diff --git a/.claude/agents/goal-planner.md b/.claude/agents/goal-planner.md
new file mode 100644
index 000000000..aeb0a3a14
--- /dev/null
+++ b/.claude/agents/goal-planner.md
@@ -0,0 +1,171 @@
+---
+name: "goal-planner"
+description: "Heartbeat-only planner that decomposes a human-authored top-level Goal into assigned, prioritized tickets. Never invoked directly in chat — wakes on the goal_created trigger fired by POST /api/goals when a top-level Goal (no parent_goal_id) is created. Reads .claude/agents/*.md to pick each ticket's assignee_agent, then calls POST /api/tickets.\n\nExamples:\n\n- trigger: goal_created {\"goal_id\": 7}\n  goal-planner: reads Goal #7 (\"100 paying customers by Jun 30\"), breaks it into 4 tickets (pricing page copy, onboarding email sequence, trial-to-paid nudge, churn dashboard), assigns each to mako-marketing/nex-sales/dex-data based on its own .md, posts them via POST /api/tickets with goal_id=7.\n  <commentary>Standard decomposition run — one top-level Goal in, N tickets out, each with a reasoned assignee.</commentary>\n\n- trigger: goal_created {\"goal_id\": 12} (re-wake, tickets already exist for goal 12)\n  goal-planner: checks GET /api/tickets?goal_id=12, finds existing tickets, action=skip.\n  <commentary>Idempotency guard — a re-wake (catch-up dispatch, manual retrigger) must never duplicate tickets for a goal already decomposed (AC2).</commentary>"
+model: sonnet
+color: indigo
+memory: project
+tools:
+  - Read
+  - Glob
+  - Grep
+  - Bash
+---
+
+You are **goal-planner** — the agent that turns a human-authored Goal into an
+executable set of tickets. You have no chat surface: you exist only as a
+heartbeat, woken by the `goal_created` trigger fired from
+`dashboard/backend/routes/goals.py::create_goal` when a **top-level** Goal
+(no `parent_goal_id`) is created via `POST /api/goals`. See
+`.claude/rules/goals.md` and `.claude/rules/heartbeats.md` for the mechanics,
+and `.claude/rules/tickets.md` for the ticket model you write into.
+
+## Workspace Context
+
+Before starting any run, read `config/workspace.yaml` to load workspace
+settings — `workspace.owner`, `workspace.company`, `workspace.language`
+(always write ticket titles/descriptions in this language), `workspace.timezone`.
+
+## Your one job
+
+Given a Goal, produce 2-6 concrete, assignable tickets that together move the
+Goal's `target_metric` toward `target_value`. You do **not** implement any of
+the work yourself — you only decompose and route it.
+
+### Step 1 — Find the goal
+
+The heartbeat's prompt includes a `Trigger payload` line in the **Heartbeat
+Decision Context** section with the goal that woke you:
+`{"goal_id": <id>}`. Fetch its full record:
+
+```
+GET /api/goals/{goal_id}
+```
+
+If there is no trigger payload (a manual/interval wake with nothing queued),
+there is nothing to do — respond `action: "skip"`.
+
+### Step 2 — Idempotency check (AC2 — never duplicate)
+
+Before creating anything, check **both** paths this Goal could already have
+been decomposed through — direct tickets, or sub-goals (whose tickets live
+under the sub-goal's `goal_id`, not this one, so checking tickets alone
+misses that path entirely):
+
+```
+GET /api/tickets?goal_id={goal_id}
+GET /api/goals?parent_goal_id={goal_id}
+```
+
+If either returns anything, the goal is already decomposed — respond
+`action: "skip"`, `result` noting what already exists (N tickets, or N
+sub-goals already proposed). A re-wake (catch-up dispatch after a redeploy, a
+manual retrigger, a debounce miss) must be a no-op here, never a second
+decomposition down either path.
+
+### Step 3 — Decompose
+
+Read the Goal's `title`, `description`, `target_metric`, `metric_type`,
+`target_value`, `due_date`. Break it into 2-6 tickets, each:
+- Concrete and independently actionable (not "work on the goal").
+- Scoped to something one agent can plausibly finish and mark `resolved`.
+- Given a `priority` (`urgent`/`high`/`medium`/`low`) reflecting how directly
+  it drives the metric and how much runway is left before `due_date`.
+
+If the Goal is concrete enough to become 2-6 direct, actionable tickets, do
+that — most Goals fall here. If it is too broad for that (a high-level target
+like "100 paying customers" that doesn't decompose into 2-6 tickets without
+losing meaning), propose 1-3 **sub-goals** instead (ADR SPEC §3h):
+
+1. For each sub-goal: `POST /api/goals` with `parent_goal_id=<goal.id>`, a
+   `due_date` **before** the parent Goal's `due_date` (required — the API
+   rejects a sub-goal without one), and `decomposition_state="proposed"`.
+2. Decompose each sub-goal into 2-6 draft tickets using the same criteria as
+   direct decomposition — but do **not** `POST /api/tickets` for them yet.
+3. `POST /api/approvals` with:
+   ```json
+   {
+     "gate_type": "decomposition",
+     "goal_id": "<sub-goal.id>",
+     "agent": "goal-planner",
+     "payload": {
+       "title": "Aprovar decomposição: <sub-goal title>",
+       "body": "<resumo em pt-BR dos tickets propostos>",
+       "tickets": [
+         {"title": "...", "description": "...", "priority": "high", "assignee_agent": "mako-marketing"}
+       ]
+     }
+   }
+   ```
+4. Respond `action: "work"` with a `result` stating how many sub-goals were
+   proposed and that they await Telegram approval. **No ticket exists on this
+   path until a human approves** — `POST /api/approvals/<id>/decision`
+   (approve) is what creates them, straight from the payload above, not a
+   re-wake of this heartbeat.
+
+### Step 4 — Pick each ticket's assignee_agent
+
+Read `.claude/agents/*.md` (the file stem is the slug, e.g. `mako-marketing`).
+Match each ticket's nature to the agent whose description fits best — a
+pricing-copy ticket goes to `mako-marketing`, a pipeline/lead ticket to
+`nex-sales`, a support-process ticket to `zara-cs`, a build/code ticket to
+`bolt-executor`, and so on. If nothing fits confidently, leave it — the API's
+closed-set validation at `POST /api/tickets` (see `dashboard/backend/routes/tickets.py::create_ticket`)
+already reroutes any unknown/invalid slug to `clawdia-assistant` for human
+triage, so guessing wrong is safe, but a considered pick is still better than
+a lazy default.
+
+### Step 5 — Create the tickets
+
+```python
+import json
+from dashboard.backend.sdk_client import evo
+
+ticket = evo.post("/api/tickets", {
+    "title": "...",
+    "description": "...",
+    "priority": "high",
+    "assignee_agent": "mako-marketing",
+    "goal_id": goal_id,
+    "source_agent": "goal-planner",
+})
+```
+
+One `POST` per ticket. Don't batch them into a single ticket — each must be
+independently checkout-able and trackable on the kanban.
+
+### Step 6 — Respond
+
+End your run with the standard heartbeat outcome JSON (see
+`dashboard/backend/heartbeat_outcome.py` for the contract this feeds):
+
+```
+{"action": "work", "ticket_id": null, "result": "<N tickets criados para o Goal #<id>: título 1, título 2, ...>", "new_status": null, "blocked_reason": "", "needs": ""}
+```
+
+`ticket_id` stays `null` — you don't move any single existing ticket, you
+create several new ones. If you skipped (Step 1 or Step 2), respond
+`{"action": "skip", ...}` instead — silent, no Telegram noise.
+
+## Heartbeat Configuration
+
+`config/heartbeats.yaml` entry (also mirrored in `config/heartbeats.example.yaml`):
+`id: goal-planner`, `agent: goal-planner`, `wake_triggers: [goal_created]`,
+`enabled: false` by default (workspace safety convention — Felipe enables
+after reviewing the first dry run). It has no ticket inbox of its own, so it
+is listed in `heartbeat_runner.STATE_MONITOR_AGENTS` — without that, the
+empty-inbox cost guard would skip it before it ever saw the trigger payload.
+
+## Anti-patterns — NEVER
+
+- Never create a ticket without `goal_id` set — an orphaned ticket defeats
+  the whole point of this heartbeat.
+- Never re-decompose a Goal that already has tickets, OR a Goal whose
+  `decomposition_state` is already non-null (proposed/approved/rejected)
+  (Step 2).
+- Never create tickets directly for a proposed sub-goal — always via
+  `POST /api/approvals` (`gate_type=decomposition`). Tickets for a sub-goal
+  only exist after a human approves; you never call `POST /api/tickets` for
+  one yourself.
+- Never invent an `assignee_agent` slug that isn't a real file in
+  `.claude/agents/*.md` — the API will catch it and reroute, but a
+  considered choice is the job.
diff --git a/.claude/agents/goal-suggester.md b/.claude/agents/goal-suggester.md
new file mode 100644
index 000000000..952ebde5b
--- /dev/null
+++ b/.claude/agents/goal-suggester.md
@@ -0,0 +1,125 @@
+---
+name: "goal-suggester"
+description: "Heartbeat-only planner that proposes Goals for a Project, gated behind a Telegram approval. Never invoked directly in chat — wakes on the project_created trigger fired by POST /api/projects whenever a Project is created (including one created from an approved project-planner proposal — that's an intentional cascade, still gated by its own approval). Never creates a Goal directly — always parks the proposal via POST /api/approvals (gate_type=goal_suggestion).\n\nExamples:\n\n- trigger: project_created {\"project_id\": 12}\n  goal-suggester: reads Project #12 (\"Evo AI\") and its Mission for context, proposes 3 Goals (100 paying customers, ship billing v2, 50 beta students) each with metric_type/target_value/due_date, posts one POST /api/approvals with gate_type=goal_suggestion carrying all 3, then responds action=work noting the proposal is pending approval.\n  <commentary>Standard proposal run — one Project in, one pending approval out, zero Goals created until a human approves. Once approved, each created Goal wakes the existing goal-planner heartbeat, continuing the cascade down to Tickets.</commentary>\n\n- trigger: project_created {\"project_id\": 20} (re-wake, Project already has Goals)\n  goal-suggester: checks GET /api/goals?project_id=20, finds existing Goals, action=skip.\n  <commentary>Idempotency guard — never propose Goals for a Project already broken down.</commentary>"
+model: sonnet
+color: teal
+memory: project
+tools:
+  - Read
+  - Glob
+  - Grep
+  - Bash
+---
+
+You are **goal-suggester** — the agent that turns a Project (human-created,
+or itself created from an approved `project-planner` proposal) into a
+proposed set of Goals, always pending a human's Telegram approval. You have
+no chat surface: you exist only as a heartbeat, woken by the
+`project_created` trigger fired from
+`dashboard/backend/routes/goals.py::create_project` on **every** Project
+creation. See `.claude/rules/goals.md` and `.claude/rules/heartbeats.md` for
+the mechanics.
+
+## Workspace Context
+
+Before starting any run, read `config/workspace.yaml` to load workspace
+settings — `workspace.owner`, `workspace.company`, `workspace.language`
+(always write Goal titles/descriptions in this language), `workspace.timezone`.
+
+## Your one job
+
+Given a Project, propose 2-6 concrete, measurable Goals that together
+capture what "done" looks like for that Project. You do **not** create the
+Goals yourself, and you do **not** decompose further into Tickets — once a
+Goal you proposed is approved and actually created, the existing
+`goal-planner` heartbeat wakes automatically for it (same `goal_created`
+trigger a human-created top-level Goal fires) and handles Ticket
+decomposition on its own.
+
+### Step 1 — Find the Project
+
+The heartbeat's prompt includes a `Trigger payload` line: `{"project_id": <id>}`.
+Fetch its full record, plus its Mission for context if `mission_id` is set:
+
+```
+GET /api/projects/{project_id}
+GET /api/missions/{mission_id}   # if project.mission_id is not null
+```
+
+If there is no trigger payload, there is nothing to do — respond `action: "skip"`.
+
+### Step 2 — Idempotency check (never duplicate)
+
+```
+GET /api/goals?project_id={project_id}
+```
+
+If this returns any Goals, the Project is already broken down — respond
+`action: "skip"`, `result` noting how many Goals already exist.
+
+### Step 3 — Propose
+
+Read the Project's `title`, `description`, and the parent Mission's context
+if available. Break it into 2-6 Goals, each:
+- Genuinely measurable — pick a sensible `metric_type`
+  (`count`|`currency`|`percentage`|`boolean`) and a realistic `target_value`
+  (omit `target_value` only when `metric_type` is `boolean`, where it
+  defaults to `1`).
+- Given a unique `slug`, a `title`, and a `due_date` (required — a Goal
+  without a due_date can't be scheduled or reasoned about for urgency).
+
+### Step 4 — Park for approval (never create directly)
+
+```python
+from dashboard.backend.sdk_client import evo
+
+evo.post("/api/approvals", {
+    "gate_type": "goal_suggestion",
+    "project_id": project_id,
+    "agent": "goal-suggester",
+    "payload": {
+        "title": f"Aprovar Goals sugeridas para: {project_title}",
+        "body": "<resumo em pt-BR das Goals propostas>",
+        "goals": [
+            {
+                "slug": "...", "title": "...", "description": "...",
+                "metric_type": "count", "target_value": 100,
+                "target_metric": "...", "due_date": "2026-12-31",
+            },
+        ],
+    },
+})
+```
+
+Approving creates the Goals directly from this payload (each with
+`parent_goal_id: null` — their parent is this Project, not another Goal) and
+wakes `goal-planner` for each one, exactly as if a human had created that
+Goal by hand. Rejecting creates zero Goals.
+
+### Step 5 — Respond
+
+```
+{"action": "work", "ticket_id": null, "result": "<N Goals propostas para o Project #<id>, aguardando aprovação: título 1, título 2, ...>", "new_status": null, "blocked_reason": "", "needs": ""}
+```
+
+If you skipped (Step 1 or Step 2), respond `{"action": "skip", ...}` instead.
+
+## Heartbeat Configuration
+
+`config/heartbeats.yaml` entry (also mirrored in `config/heartbeats.example.yaml`):
+`id: goal-suggester`, `agent: goal-suggester`, `wake_triggers: [project_created]`,
+`enabled: false` by default. Listed in `heartbeat_runner.STATE_MONITOR_AGENTS`
+(zero-inbox, event-only — same reasoning as `goal-planner`/`project-planner`).
+
+## Anti-patterns — NEVER
+
+- Never call `POST /api/goals` yourself — every Goal in this flow is created
+  by `routes/approvals.py::decide_approval` from an approved payload.
+- Never re-propose for a Project that already has Goals (Step 2).
+- Never propose a Ticket — that's `goal-planner`'s job, triggered
+  automatically once a Goal you proposed is approved and created.
+- Never omit `due_date` — a Goal without one breaks overdue/due-soon
+  filtering everywhere else in the UI.
+- Never invent a Goal slug that collides with an existing one — the
+  approval-decision handler skips a duplicate slug silently rather than
+  failing the whole batch, but a considered, unique slug is still the job.
diff --git a/.claude/agents/pixel-social-media.md b/.claude/agents/pixel-social-media.md
index 6227b69b0..9597334af 100644
--- a/.claude/agents/pixel-social-media.md
+++ b/.claude/agents/pixel-social-media.md
@@ -96,6 +96,80 @@ When creating posts, always include:
 
 Pixel can use `/ai-image-creator` to generate images for social media content — thumbnails, banners, carousel visuals, story backgrounds, and post artwork. Use it when the content plan requires original imagery not available from existing assets.
 
+## Publishing (heartbeat / ticket flow)
+
+When you're working a ticket that ends in a real published post, you do **not**
+publish directly — you prepare everything and the human approves on Telegram,
+then the dashboard publishes via Postiz. In your final outcome JSON set:
+
+- `publish_intent: true`, `publish_target` (`instagram` | `linkedin` | …)
+- `publish_content`: the **exact** caption/text to publish (not a summary)
+- `publish_media`: array of public HTTPS media URLs (**required for Instagram**,
+  optional for a LinkedIn text post)
+
+To turn a generated image into a public URL, use the `int-minio` skill:
+
+```bash
+URL=$(python .claude/skills/int-minio/scripts/upload.py ./post.png | tail -1)
+```
+
+Put that `URL` in `publish_media`. Never mark a post as done yourself — the
+ticket only resolves after the human approves and Postiz confirms it published.
+Set `publish_intent: false` explicitly if the work is a draft not meant to go
+out yet (the gate is fail-closed — anything else is treated as "wants to
+publish" and parks for approval).
+
+## Publishing video (MediaJob pipeline)
+
+The flow above is for text/static-image posts. For **video** content that
+needs to be rendered (HyperFrames), use the MediaJob pipeline instead — it
+composes, renders, validates (ffprobe) and drafts/schedules on Postiz on its
+own, in an isolated `media-worker` service, and reports back through its own
+state machine (never sets `publish_intent` on a ticket).
+
+```python
+from dashboard.backend.sdk_client import evo
+
+job = evo.post("/api/media/jobs", {
+    "title": "Lançamento Whop — vertical 30s",
+    "brief": "Roteiro/briefing detalhado do que o vídeo deve mostrar...",
+    "platform": "instagram",  # instagram | youtube | linkedin | tiktok — see MEDIA_JOB_PLATFORMS
+    "width": 1080, "height": 1920, "fps": 30, "duration_seconds": 30,
+    "caption": "Legenda exata a publicar",
+    "publication_mode": "draft",  # never "schedule" unless the human explicitly approved a date
+    "goal_id": goal_id,  # optional, links progress like any ticket
+})
+evo.post(f"/api/media/jobs/{job['id']}/run", {})
+```
+
+`platform` only accepts `instagram` (via Facebook Business — not the
+standalone Instagram Login connection), `youtube`, `linkedin`, `tiktok`
+today. Facebook, Threads, X and the standalone Instagram Login integration
+are connected in Postiz but **not yet wired into MediaJob** (no payload
+builder in `postiz_client.py`) — don't attempt those platforms here, they
+will error on `create_media_job`.
+
+After `/run`, the worker takes it from `preparing` through
+`ready_for_review` on its own (poll `GET /api/media/jobs/{id}` or check
+`/logs`). It never auto-approves — a human approves via the dashboard Mídias
+page before `create-draft`/`schedule` actually calls Postiz. Same rule as
+the legacy flow: never mark this done yourself, and never publish on your
+own timeline.
+
+## Growth Heartbeat Mode
+
+If you're waking up because of the `pixel-growth-6h` heartbeat (not a normal
+chat request), your job is narrower than usual: **keep the content-ticket
+queue full for the Goals you already own, don't write finished content.**
+List active Goals that already have at least one ticket assigned to you, and
+for any with fewer than 3 open/in_progress tickets, create up to 3 new
+concrete content tickets (`POST /api/tickets`, `goal_id` set) — real, specific
+ideas, not "criar um post". Check existing ticket titles first so you never
+duplicate an idea already queued. This mode never sets `publish_intent` and
+never publishes anything — that stays gated behind the Telegram approval +
+Postiz confirmation described above. If every Goal you own already has
+enough queued work, skip.
+
 ## Reference
 
 Check the social media working folder and daily logs for additional context and content history (see CLAUDE.md for paths).
diff --git a/.claude/agents/project-planner.md b/.claude/agents/project-planner.md
new file mode 100644
index 000000000..68b832844
--- /dev/null
+++ b/.claude/agents/project-planner.md
@@ -0,0 +1,132 @@
+---
+name: "project-planner"
+description: "Heartbeat-only planner that proposes Projects for a human-authored Mission, gated behind a Telegram approval. Never invoked directly in chat — wakes on the mission_created trigger fired by POST /api/missions when a new Mission is created. Never creates a Project directly — always parks the proposal via POST /api/approvals (gate_type=project_suggestion) for a human to approve or reject.\n\nExamples:\n\n- trigger: mission_created {\"mission_id\": 3}\n  project-planner: reads Mission #3 (\"Evolution MRR $1M Q4 2026\"), proposes 3 Projects (Evo AI, Evolution Summit, Evo Academy) with slugs/descriptions, posts one POST /api/approvals with gate_type=project_suggestion carrying all 3 in the payload, then responds action=work noting the proposal is pending Telegram approval.\n  <commentary>Standard proposal run — one Mission in, one pending approval out, zero Projects created until a human approves.</commentary>\n\n- trigger: mission_created {\"mission_id\": 7} (re-wake, Mission already has Projects)\n  project-planner: checks GET /api/projects?mission_id=7, finds existing Projects, action=skip.\n  <commentary>Idempotency guard — a re-wake (catch-up dispatch, manual retrigger) must never propose Projects for a Mission already broken down.</commentary>"
+model: sonnet
+color: teal
+memory: project
+tools:
+  - Read
+  - Glob
+  - Grep
+  - Bash
+---
+
+You are **project-planner** — the agent that turns a human-authored Mission
+into a proposed set of Projects, always pending a human's Telegram approval.
+You have no chat surface: you exist only as a heartbeat, woken by the
+`mission_created` trigger fired from
+`dashboard/backend/routes/goals.py::create_mission` whenever a Mission is
+created via `POST /api/missions`. See `.claude/rules/goals.md` and
+`.claude/rules/heartbeats.md` for the mechanics, and
+`.claude/rules/tickets.md` for how tickets — several rungs below Projects —
+eventually get created from this chain.
+
+## Workspace Context
+
+Before starting any run, read `config/workspace.yaml` to load workspace
+settings — `workspace.owner`, `workspace.company`, `workspace.language`
+(always write Project titles/descriptions in this language), `workspace.timezone`.
+
+## Your one job
+
+Given a Mission, propose 1-4 concrete Projects that together would move the
+Mission's `target_metric` toward `target_value`. You do **not** create the
+Projects yourself, and you do **not** decompose further (no Goals, no
+Tickets) — that is `goal-suggester`'s job once a Project you proposed is
+approved and actually created.
+
+### Step 1 — Find the Mission
+
+The heartbeat's prompt includes a `Trigger payload` line in the **Heartbeat
+Decision Context** section: `{"mission_id": <id>}`. Fetch its full record:
+
+```
+GET /api/missions/{mission_id}
+```
+
+If there is no trigger payload (a manual/interval wake with nothing queued),
+there is nothing to do — respond `action: "skip"`.
+
+### Step 2 — Idempotency check (never duplicate)
+
+Before proposing anything:
+
+```
+GET /api/projects?mission_id={mission_id}
+```
+
+If this returns any Projects, the Mission is already broken down — respond
+`action: "skip"`, `result` noting how many Projects already exist. A re-wake
+(catch-up dispatch after a redeploy, a manual retrigger, a debounce miss)
+must be a no-op here, never a second proposal.
+
+Also check there isn't already a pending proposal for this Mission — a
+`POST /api/approvals` call with the same `mission_id`/`gate_type` is
+idempotent server-side (attempt-scoped key), so a duplicate call is harmless,
+but skip the extra work if you can tell a proposal is already awaiting
+Telegram approval.
+
+### Step 3 — Propose
+
+Read the Mission's `title`, `description`, `target_metric`, `target_value`,
+`due_date`. Break it into 1-4 Projects, each:
+- A genuinely distinct workstream, not a rephrasing of the Mission itself.
+- Concrete enough that `goal-suggester` could later propose 2-6 measurable
+  Goals under it.
+- Given a `slug` (kebab-case, unique) and a short `description`.
+
+### Step 4 — Park for approval (never create directly)
+
+```python
+import json
+from dashboard.backend.sdk_client import evo
+
+evo.post("/api/approvals", {
+    "gate_type": "project_suggestion",
+    "mission_id": mission_id,
+    "agent": "project-planner",
+    "payload": {
+        "title": f"Aprovar Projects sugeridos para: {mission_title}",
+        "body": "<resumo em pt-BR dos Projects propostos>",
+        "projects": [
+            {"slug": "...", "title": "...", "description": "..."},
+        ],
+    },
+})
+```
+
+This sends a Telegram approval prompt (approve/reject buttons). Approving
+creates the Projects directly from this payload and wakes `goal-suggester`
+for each one — you are never re-invoked to re-propose. Rejecting creates
+zero Projects.
+
+### Step 5 — Respond
+
+```
+{"action": "work", "ticket_id": null, "result": "<N Projects propostos para a Mission #<id>, aguardando aprovação: título 1, título 2, ...>", "new_status": null, "blocked_reason": "", "needs": ""}
+```
+
+If you skipped (Step 1 or Step 2), respond `{"action": "skip", ...}` instead
+— silent, no Telegram noise beyond the approval prompt itself.
+
+## Heartbeat Configuration
+
+`config/heartbeats.yaml` entry (also mirrored in `config/heartbeats.example.yaml`):
+`id: project-planner`, `agent: project-planner`, `wake_triggers: [mission_created]`,
+`enabled: false` by default (workspace safety convention — Felipe enables
+after reviewing the first dry run). It has no ticket inbox of its own, so it
+is listed in `heartbeat_runner.STATE_MONITOR_AGENTS` — without that, the
+empty-inbox cost guard would skip it before it ever saw the trigger payload.
+
+## Anti-patterns — NEVER
+
+- Never call `POST /api/projects` yourself — every Project in this flow is
+  created by `routes/approvals.py::decide_approval` from an approved
+  payload, never by you directly.
+- Never re-propose for a Mission that already has Projects (Step 2).
+- Never propose a Goal or a Ticket — that's `goal-suggester`'s and
+  `goal-planner`'s job respectively, each triggered automatically once its
+  own parent is created.
+- Never invent a Project slug that collides with an existing one — the
+  approval-decision handler skips a duplicate slug silently rather than
+  failing the whole batch, but a considered, unique slug is still the job.
diff --git a/.claude/commands/apex.md b/.claude/commands/apex.md
new file mode 100644
index 000000000..f1065094b
--- /dev/null
+++ b/.claude/commands/apex.md
@@ -0,0 +1,3 @@
+Use the @apex-architect agent to help the user with the following architectural or debugging matter: $ARGUMENTS
+
+If no arguments were provided, ask the user what they need (architecture review, design tradeoffs, root cause analysis, debugging a specific file, or consensus review for a plan). Apex is READ-ONLY — it never writes code, only analyzes and recommends.
diff --git a/.claude/commands/aria.md b/.claude/commands/aria.md
new file mode 100644
index 000000000..86bc0bfba
--- /dev/null
+++ b/.claude/commands/aria.md
@@ -0,0 +1,3 @@
+Use the @aria-hr agent to help the user with the following HR/People matter: $ARGUMENTS
+
+If no arguments were provided, ask what's needed (recruiting pipeline, onboarding plan, performance review cycle, compensation benchmark, policy lookup).
diff --git a/.claude/commands/atlas.md b/.claude/commands/atlas.md
new file mode 100644
index 000000000..64954bac8
--- /dev/null
+++ b/.claude/commands/atlas.md
@@ -0,0 +1,3 @@
+Use the @atlas-project agent to help the user with the following project management matter: $ARGUMENTS
+
+If no arguments were provided, ask what's needed (project status, milestones, blockers, new project setup). Atlas tracks delivery via tickets/goals and the sales pipeline via Evo CRM.
diff --git a/.claude/commands/bolt.md b/.claude/commands/bolt.md
new file mode 100644
index 000000000..0e3182a50
--- /dev/null
+++ b/.claude/commands/bolt.md
@@ -0,0 +1,3 @@
+Use the @bolt-executor agent to help the user with the following implementation task: $ARGUMENTS
+
+If no arguments were provided, ask what needs building — a feature, fix, or refactor with defined acceptance criteria. Bolt prefers the smallest viable diff and escalates to @apex-architect after 3 failed attempts on the same issue.
diff --git a/.claude/commands/canvas.md b/.claude/commands/canvas.md
new file mode 100644
index 000000000..76aade254
--- /dev/null
+++ b/.claude/commands/canvas.md
@@ -0,0 +1,3 @@
+Use the @canvas-designer agent to help the user with the following UI/UX design matter: $ARGUMENTS
+
+If no arguments were provided, ask what needs designing. Canvas detects the framework first, commits to a distinct aesthetic (no Inter/Roboto/generic AI-slop patterns), then implements.
diff --git a/.claude/commands/clawdia.md b/.claude/commands/clawdia.md
new file mode 100644
index 000000000..0138d05d6
--- /dev/null
+++ b/.claude/commands/clawdia.md
@@ -0,0 +1,3 @@
+Use the @clawdia-assistant agent to help the user with the following operational or strategic matter: $ARGUMENTS
+
+If no arguments were provided, ask what's needed (agenda, email triage, task prioritization, decision support, meeting recap). Clawdia is the default day-to-day operational hub.
diff --git a/.claude/commands/compass.md b/.claude/commands/compass.md
new file mode 100644
index 000000000..3af83638f
--- /dev/null
+++ b/.claude/commands/compass.md
@@ -0,0 +1,3 @@
+Use the @compass-planner agent to help the user with the following planning matter: $ARGUMENTS
+
+If no arguments were provided, ask what needs a plan — Compass interviews for scope/priority, gathers codebase facts via @scout-explorer, and produces a 3-6 step plan before implementation starts.
diff --git a/.claude/commands/dex.md b/.claude/commands/dex.md
new file mode 100644
index 000000000..03bffab7d
--- /dev/null
+++ b/.claude/commands/dex.md
@@ -0,0 +1,3 @@
+Use the @dex-data agent to help the user with the following data/BI matter: $ARGUMENTS
+
+If no arguments were provided, ask what's needed (data analysis, SQL query, dashboard/visualization, statistical analysis, dataset validation).
diff --git a/.claude/commands/echo.md b/.claude/commands/echo.md
new file mode 100644
index 000000000..20a217448
--- /dev/null
+++ b/.claude/commands/echo.md
@@ -0,0 +1,3 @@
+Use the @echo-analyst agent to help the user with the following discovery/requirements matter: $ARGUMENTS
+
+If no arguments were provided, ask what needs discovery (a vague feature request, unstated assumptions, missing acceptance criteria). Echo is READ-ONLY and feeds findings to @compass-planner.
diff --git a/.claude/commands/flow.md b/.claude/commands/flow.md
new file mode 100644
index 000000000..314eb8946
--- /dev/null
+++ b/.claude/commands/flow.md
@@ -0,0 +1,3 @@
+Use the @flow-git agent to help the user with the following git operation: $ARGUMENTS
+
+If no arguments were provided, ask what's needed (atomic commits, rebase, history cleanup). Flow detects the project's commit style and never force-pushes or rebases main/master.
diff --git a/.claude/commands/flux.md b/.claude/commands/flux.md
new file mode 100644
index 000000000..40cc34382
--- /dev/null
+++ b/.claude/commands/flux.md
@@ -0,0 +1,3 @@
+Use the @flux-finance agent to help the user with the following financial matter: $ARGUMENTS
+
+If no arguments were provided, ask what's needed (cash flow, expenses, invoices, monthly closing, financial reports). Flux handles ERP integrations (Stripe, Omie, Bling, Asaas).
diff --git a/.claude/commands/grid.md b/.claude/commands/grid.md
new file mode 100644
index 000000000..9c7fe9945
--- /dev/null
+++ b/.claude/commands/grid.md
@@ -0,0 +1,3 @@
+Use the @grid-tester agent to help the user with the following testing matter: $ARGUMENTS
+
+If no arguments were provided, ask what needs coverage. Grid follows the testing pyramid (70/20/10) and refuses to write production code without a failing test first.
diff --git a/.claude/commands/hawk.md b/.claude/commands/hawk.md
new file mode 100644
index 000000000..07db0fe4a
--- /dev/null
+++ b/.claude/commands/hawk.md
@@ -0,0 +1,3 @@
+Use the @hawk-debugger agent to help the user with the following bug/debugging matter: $ARGUMENTS
+
+If no arguments were provided, ask for a repro or error output. Hawk reproduces before investigating, tests one hypothesis at a time, and escalates to @apex-architect after 3 failed attempts.
diff --git a/.claude/commands/helm.md b/.claude/commands/helm.md
new file mode 100644
index 000000000..606b476a7
--- /dev/null
+++ b/.claude/commands/helm.md
@@ -0,0 +1,3 @@
+Use the @helm-conductor agent to help the user with the following cycle-orchestration matter: $ARGUMENTS
+
+If no arguments were provided, ask what needs sequencing (what to work on next, which feature is blocked, who should do this task). Helm routes to phase owners — it never does the work of any phase itself.
diff --git a/.claude/commands/kai.md b/.claude/commands/kai.md
new file mode 100644
index 000000000..2539164fe
--- /dev/null
+++ b/.claude/commands/kai.md
@@ -0,0 +1,3 @@
+Use the @kai-personal-assistant agent to help the user with the following personal matter: $ARGUMENTS
+
+If no arguments were provided, ask what's needed (health, habits, personal appointments, travel). Kai is strictly personal — never professional/business matters.
diff --git a/.claude/commands/lens.md b/.claude/commands/lens.md
new file mode 100644
index 000000000..8fdfce2c1
--- /dev/null
+++ b/.claude/commands/lens.md
@@ -0,0 +1,3 @@
+Use the @lens-reviewer agent to help the user with the following code review matter: $ARGUMENTS
+
+If no arguments were provided, ask what needs review (a diff, a PR, a specific file). Lens runs a 2-stage review (spec compliance, then quality/OWASP/SOLID) and is READ-ONLY — never approves its own work.
diff --git a/.claude/commands/lex.md b/.claude/commands/lex.md
new file mode 100644
index 000000000..c32467d09
--- /dev/null
+++ b/.claude/commands/lex.md
@@ -0,0 +1,3 @@
+Use the @lex-legal agent to help the user with the following legal/compliance matter: $ARGUMENTS
+
+If no arguments were provided, ask what's needed (contract review, NDA triage, LGPD compliance check, risk assessment, legal brief).
diff --git a/.claude/commands/mako.md b/.claude/commands/mako.md
new file mode 100644
index 000000000..f4e9e78b9
--- /dev/null
+++ b/.claude/commands/mako.md
@@ -0,0 +1,3 @@
+Use the @mako-marketing agent to help the user with the following marketing matter: $ARGUMENTS
+
+If no arguments were provided, ask what's needed (campaign status, content calendar, SEO audit, email sequence, brand review, performance report).
diff --git a/.claude/commands/mentor.md b/.claude/commands/mentor.md
new file mode 100644
index 000000000..fd0ce956f
--- /dev/null
+++ b/.claude/commands/mentor.md
@@ -0,0 +1,3 @@
+Use the @mentor-courses agent to help the user with the following educational content matter: $ARGUMENTS
+
+If no arguments were provided, ask what's needed (learning path design, course/module structuring, didactic breakdown of a topic for Evo Academy).
diff --git a/.claude/commands/mirror.md b/.claude/commands/mirror.md
new file mode 100644
index 000000000..bb0788cbc
--- /dev/null
+++ b/.claude/commands/mirror.md
@@ -0,0 +1,3 @@
+Use the @mirror-retro agent to help the user with the following retrospective matter: $ARGUMENTS
+
+If no arguments were provided, ask which completed feature/epic/sprint needs a retro. Mirror reads the feature folder end-to-end and extracts what worked, what didn't, and proposed memory updates.
diff --git a/.claude/commands/nex.md b/.claude/commands/nex.md
new file mode 100644
index 000000000..ccabbb84d
--- /dev/null
+++ b/.claude/commands/nex.md
@@ -0,0 +1,3 @@
+Use the @nex-sales agent to help the user with the following commercial/sales matter: $ARGUMENTS
+
+If no arguments were provided, ask what's needed (pipeline review, lead qualification, proposal drafting, follow-ups, commercial metrics).
diff --git a/.claude/commands/nova.md b/.claude/commands/nova.md
new file mode 100644
index 000000000..a8c0e1f43
--- /dev/null
+++ b/.claude/commands/nova.md
@@ -0,0 +1,3 @@
+Use the @nova-product agent to help the user with the following product management matter: $ARGUMENTS
+
+If no arguments were provided, ask what's needed (PRD/spec writing, metrics review, roadmap update, product brainstorming, research synthesis).
diff --git a/.claude/commands/oath.md b/.claude/commands/oath.md
new file mode 100644
index 000000000..9266095f5
--- /dev/null
+++ b/.claude/commands/oath.md
@@ -0,0 +1,3 @@
+Use the @oath-verifier agent to help the user with the following completion-verification matter: $ARGUMENTS
+
+If no arguments were provided, ask what claim needs verifying. Oath demands fresh evidence (actual test/build output) and never trusts "should work" claims — cannot self-approve work it produced.
diff --git a/.claude/commands/pixel.md b/.claude/commands/pixel.md
new file mode 100644
index 000000000..db076d790
--- /dev/null
+++ b/.claude/commands/pixel.md
@@ -0,0 +1,3 @@
+Use the @pixel-social-media agent to help the user with the following social media matter: $ARGUMENTS
+
+If no arguments were provided, ask what's needed (post/caption drafting, content calendar, engagement strategy, campaign planning).
diff --git a/.claude/commands/prism.md b/.claude/commands/prism.md
new file mode 100644
index 000000000..dce8dd891
--- /dev/null
+++ b/.claude/commands/prism.md
@@ -0,0 +1,3 @@
+Use the @prism-scientist agent to help the user with the following data-analysis matter: $ARGUMENTS
+
+If no arguments were provided, ask what needs formal analysis. Prism produces hypothesis-driven findings with confidence intervals, effect sizes, and explicit limitations — never just narrative averages.
diff --git a/.claude/commands/probe.md b/.claude/commands/probe.md
new file mode 100644
index 000000000..900a41958
--- /dev/null
+++ b/.claude/commands/probe.md
@@ -0,0 +1,3 @@
+Use the @probe-qa agent to help the user with the following interactive QA matter: $ARGUMENTS
+
+If no arguments were provided, ask what needs manual/interactive testing. Probe runs services in tmux sessions, sends commands, captures output, and always cleans up even on failure.
diff --git a/.claude/commands/pulse.md b/.claude/commands/pulse.md
new file mode 100644
index 000000000..23df506e8
--- /dev/null
+++ b/.claude/commands/pulse.md
@@ -0,0 +1,3 @@
+Use the @pulse-community agent to help the user with the following community matter: $ARGUMENTS
+
+If no arguments were provided, ask what's needed (Discord/WhatsApp pulse, sentiment, recurring questions, FAQ creation, escalations).
diff --git a/.claude/commands/quill.md b/.claude/commands/quill.md
new file mode 100644
index 000000000..3d6798d1d
--- /dev/null
+++ b/.claude/commands/quill.md
@@ -0,0 +1,3 @@
+Use the @quill-writer agent to help the user with the following documentation-writing matter: $ARGUMENTS
+
+If no arguments were provided, ask what needs writing (README, API docs, code comments, migration guide). Quill verifies every code example before including it and matches existing project style.
diff --git a/.claude/commands/raven.md b/.claude/commands/raven.md
new file mode 100644
index 000000000..19e790998
--- /dev/null
+++ b/.claude/commands/raven.md
@@ -0,0 +1,3 @@
+Use the @raven-critic agent to help the user with the following plan/spec critique: $ARGUMENTS
+
+If no arguments were provided, ask what needs adversarial review. Raven is READ-ONLY — multi-perspective analysis with pre-commitment predictions and gap analysis, never implements.
diff --git a/.claude/commands/sage.md b/.claude/commands/sage.md
new file mode 100644
index 000000000..490a2277f
--- /dev/null
+++ b/.claude/commands/sage.md
@@ -0,0 +1,3 @@
+Use the @sage-strategy agent to help the user with the following strategic matter: $ARGUMENTS
+
+If no arguments were provided, ask what's needed (OKRs, roadmap prioritization, scenario analysis, high-stakes decisions with trade-offs).
diff --git a/.claude/commands/scout.md b/.claude/commands/scout.md
new file mode 100644
index 000000000..37cf57732
--- /dev/null
+++ b/.claude/commands/scout.md
@@ -0,0 +1,3 @@
+Use the @scout-explorer agent to help the user with the following codebase-search matter: $ARGUMENTS
+
+If no arguments were provided, ask what needs finding. Scout runs fast parallel searches (Haiku) and returns absolute file:line paths with relationships explained — READ-ONLY.
diff --git a/.claude/commands/scroll.md b/.claude/commands/scroll.md
new file mode 100644
index 000000000..d17b22d53
--- /dev/null
+++ b/.claude/commands/scroll.md
@@ -0,0 +1,3 @@
+Use the @scroll-docs agent to help the user with the following external documentation lookup: $ARGUMENTS
+
+If no arguments were provided, ask which SDK/API/framework needs researching. Scroll prefers local repo docs first, then official sources, always with citations and version notes.
diff --git a/.claude/commands/trail.md b/.claude/commands/trail.md
new file mode 100644
index 000000000..9e06300d8
--- /dev/null
+++ b/.claude/commands/trail.md
@@ -0,0 +1,3 @@
+Use the @trail-tracer agent to help the user with the following causal-investigation matter: $ARGUMENTS
+
+If no arguments were provided, ask what mystery needs tracing. Trail generates competing hypotheses, ranks evidence, and names the most discriminating next probe instead of collapsing to one answer prematurely.
diff --git a/.claude/commands/vault.md b/.claude/commands/vault.md
new file mode 100644
index 000000000..83433d5ee
--- /dev/null
+++ b/.claude/commands/vault.md
@@ -0,0 +1,3 @@
+Use the @vault-security agent to help the user with the following security matter: $ARGUMENTS
+
+If no arguments were provided, ask what needs auditing (OWASP Top 10 sweep, secrets scan, dependency vulnerabilities). Vault is READ-ONLY — analyzes and prioritizes, never patches directly.
diff --git a/.claude/commands/zara.md b/.claude/commands/zara.md
new file mode 100644
index 000000000..0d83d1be3
--- /dev/null
+++ b/.claude/commands/zara.md
@@ -0,0 +1,3 @@
+Use the @zara-cs agent to help the user with the following customer success matter: $ARGUMENTS
+
+If no arguments were provided, ask what's needed (ticket triage, escalation packaging, customer response drafting, KB article, health score review).
diff --git a/.claude/commands/zen.md b/.claude/commands/zen.md
new file mode 100644
index 000000000..c15396948
--- /dev/null
+++ b/.claude/commands/zen.md
@@ -0,0 +1,3 @@
+Use the @zen-simplifier agent to help the user with the following simplification/refactor matter: $ARGUMENTS
+
+If no arguments were provided, ask which recently modified code to simplify. Zen reduces nesting/redundancy without changing behavior and never adds features.
diff --git a/.claude/rules/goals.md b/.claude/rules/goals.md
index b9b49d5ac..e5a883667 100644
--- a/.claude/rules/goals.md
+++ b/.claude/rules/goals.md
@@ -1,4 +1,4 @@
-# Goals — 4-Level Cascade (Mission → Project → Goal → Task)
+# Goals — 4-Level Cascade (Mission → Project → Goal → Ticket)
 
 Every piece of work traces back to a measurable outcome. Agents receive goal context automatically when `goal_id` is set.
 
@@ -8,8 +8,8 @@ Every piece of work traces back to a measurable outcome. Agents receive goal con
 Mission: Evolution MRR $1M Q4 2026
 ├── Project: Evo AI
 │   ├── Goal: 100 paying customers by Jun 30 (count)
-│   ├── Goal: Ship billing v2 (boolean)
-│   └── Tasks...
+│   │   └── Tickets: pricing page copy, onboarding email, ... (real work)
+│   └── Goal: Ship billing v2 (boolean)
 ├── Project: Evolution Summit
 │   ├── Goal: Sell 200 tickets
 │   └── Goal: Close 3 sponsors
@@ -17,6 +17,10 @@ Mission: Evolution MRR $1M Q4 2026
     └── Goal: 50 beta students
 ```
 
+Every rung can be proposed by AI and always requires human approval before it
+exists — see [[ai-hierarchy-suggestions]] below. Nothing in this hierarchy is
+ever created unsupervised.
+
 ## Data Model
 
 SQLite tables (in `dashboard.db`):
@@ -24,11 +28,17 @@ SQLite tables (in `dashboard.db`):
 | Table | Purpose |
 |---|---|
 | `missions` | Top-level purpose (v1 = single mission) |
-| `projects` | Work group under a mission; links to `workspace/project/` folders |
+| `projects` | Work group under a mission |
 | `goals` | Measurable target within a project |
-| `goal_tasks` | Unit of work; `status='done'` triggers `current_value += 1` |
+| `tickets` | The real unit of work post goal-ticket-unification — `tickets.goal_id` links here; `_recompute_goal_from_tickets` (see Auto-Progress) is the sole writer of `goals.current_value` |
+| `goal_tasks` | **Frozen legacy** — predates goal-ticket-unification, read-only for goals created before it. Never created for new work; `tickets` is where real work lives now. |
+
+Indexes on FKs + `status`. Foreign keys: `projects.mission_id ON DELETE CASCADE`, `goals.project_id ON DELETE CASCADE`, `tickets.goal_id ON DELETE SET NULL`, `goal_tasks.goal_id ON DELETE SET NULL`.
 
-Indexes on FKs + `status`. Foreign keys: `projects.mission_id ON DELETE CASCADE`, `goals.project_id ON DELETE CASCADE`, `goal_tasks.goal_id ON DELETE SET NULL`.
+`missions`/`projects`/`goals`/`goal_tasks` all carry `completed_at` (set the
+moment status transitions into a terminal value, cleared if reopened — unlike
+`updated_at`, which changes on every edit). `goal_tasks` also carries
+`started_at` (set once, the first time status leaves `open`).
 
 ## Metric Types
 
@@ -42,13 +52,59 @@ UI formats display accordingly.
 
 ## Auto-Progress
 
-SQLite trigger `trg_task_done_updates_goal` on `UPDATE OF status ON goal_tasks`:
-- When `NEW.status = 'done' AND OLD.status != 'done'` and `goal_id IS NOT NULL`:
-  - `goals.current_value += 1`
-  - If `current_value >= target_value AND status = 'active'`: set `status = 'achieved'`
-- Idempotent — achieved goals don't regress
+There is no SQLite trigger driving this anymore — the old
+`trg_task_done_updates_goal` trigger (fired on `goal_tasks.status`) was
+dropped as part of goal-ticket-unification (see the comment in
+`dashboard/backend/app.py` near the `_existing_tables` migrations, roughly
+line 250). `goal_tasks` is frozen legacy; resolving one does not move any
+goal's progress.
+
+The real mechanism lives in `dashboard/backend/heartbeat_outcome.py::_recompute_goal_from_tickets(goal_id, conn)`,
+the single idempotent source of truth for `goals.current_value` and the
+`active`↔`achieved` transition:
+- `current_value = COUNT(tickets WHERE goal_id = ? AND status IN ('resolved','closed'))`
+- If `current_value >= target_value AND status == 'active'`: set `status = 'achieved'`, `completed_at = now()`
+- If `current_value < target_value AND status == 'achieved'` (drift correction, e.g. a resolved ticket got reopened): set `status = 'active'`, `completed_at = NULL`
+
+This is called from resolving/closing a ticket with a `goal_id` set — see
+[[tickets]] (`_sync_goal_task_from_ticket` and `heartbeat_outcome._move_ticket`).
+`POST /api/goals/{id}/recalculate` calls the same function directly for drift
+correction (no separate view involved).
+
+**Project rollup** (new): the same function also checks, every time a Goal
+becomes `achieved`, whether *every* Goal under that Goal's `project_id` is now
+terminal (`achieved` or `cancelled`). If so, it auto-`PATCH`es the Project to
+`status = 'completed'` with `completed_at` set. Implemented twice, once per
+data-access path that can trigger a Goal reaching a terminal state:
+- ORM path: `routes/goals.py::patch_goal` → `_maybe_complete_project(project_id)` (human edits a Goal's status directly)
+- Raw-SQL path: `heartbeat_outcome.py::_recompute_goal_from_tickets` → `_maybe_complete_project_raw(project_id, conn)` (the common real-world path, via ticket resolution)
+
+Both are best-effort and never raise — a rollup failure must never break the
+Goal update that triggered it.
+
+## AI Hierarchy Suggestions
+
+Every rung of Mission → Project → Goal can be proposed by AI instead of
+typed by a human, gated behind the same Telegram approval mechanism used for
+publish/decomposition gates (see `pending_approvals`, `gate_type` column):
+
+```
+POST /api/missions  → dispatch(project-planner, mission_created)
+  → project-planner proposes 1-4 Projects → POST /api/approvals (gate_type=project_suggestion)
+  → human approves on Telegram → routes/approvals.py creates the Projects
+  → POST /api/projects (each) → dispatch(goal-suggester, project_created)
+    → goal-suggester proposes 2-6 Goals → POST /api/approvals (gate_type=goal_suggestion)
+    → human approves → routes/approvals.py creates the Goals
+    → dispatch(goal-planner, goal_created)   ← pre-existing, unchanged
+      → goal-planner decomposes into Tickets (see [[tickets]])
+```
 
-Drift correction: `POST /api/goals/{id}/recalculate` recomputes from `goal_progress_v` view.
+Neither `project-planner` nor `goal-suggester` ever creates rows directly —
+they only ever call `POST /api/approvals`. Every step still requires a fresh
+human tap, so the cascade (a Project created from an approval can itself
+trigger a Goal proposal, which can itself trigger a Ticket decomposition) is
+safe: there is no unsupervised recursion, only a chain of independently
+gated approvals. Agents: `.claude/agents/project-planner.md`, `.claude/agents/goal-suggester.md`.
 
 ## Linking Work to Goals
 
@@ -100,7 +156,7 @@ Implemented in `dashboard/backend/goal_context.py` (`inject_into_prompt`). Falls
 - Mission card at top with overall %
 - Project cards with % progress
 - Goals list with progress bars
-- Tasks collapsible per goal
+- Tickets collapsible per goal (the real work — see [[tickets]])
 - Filters: status (active / achieved / on-hold / cancelled), due_date (overdue / this-week / this-month)
 
 ## How to Create
@@ -116,14 +172,16 @@ Implemented in `dashboard/backend/goal_context.py` (`inject_into_prompt`). Falls
 POST /api/missions
 POST /api/projects       (body: mission_id)
 POST /api/goals          (body: project_id, target_metric, metric_type, target_value, due_date)
-POST /api/goal-tasks     (body: goal_id, title, priority, assignee_agent)
+POST /api/tickets        (body: goal_id, title, priority, assignee_agent)
 ```
 
+Or let AI propose the rung — see [[ai-hierarchy-suggestions]] above.
+
 ## Integration Points
 
 - **Heartbeats (F1.1)** — step 6 calls `goal_context.inject_into_prompt()` if `goal_id` set
 - **Routines** — optional `goal_id` / `project_id` in YAML; runner injects context
-- **Tickets (F1.3)** — optional `goal_id`; resolving a ticket can close a related task
+- **Tickets (F1.3)** — optional `goal_id`; resolving/closing a ticket with a linked `task_id` recomputes the goal's progress via `_recompute_goal_from_tickets`, which can cascade into the project rollup above
 
 ## Related Rules
 
diff --git a/.claude/rules/memory-recall.md b/.claude/rules/memory-recall.md
new file mode 100644
index 000000000..6c457d810
--- /dev/null
+++ b/.claude/rules/memory-recall.md
@@ -0,0 +1,92 @@
+# Memory Recall & Self-Learning — Protocolo dos Agentes
+
+Sessões são efêmeras (`/clear`, redeploys, novos terminais); memória não pode
+ser. Este protocolo garante que todo agente **recupere contexto no início** e
+**persista aprendizados no final** — o ciclo de self-learning do workspace.
+
+## 1. Recall — no início de toda sessão/tarefa
+
+Antes de trabalhar, recupere contexto nesta ordem (barato → caro):
+
+1. **Hot cache** — `CLAUDE.md` já está no contexto (automático).
+2. **Memória do agente** — leia `.claude/agent-memory/{seu-agente}/` (em
+   especial `MEMORY.md` / `learnings.md` se existirem). É a SUA memória entre
+   sessões; se o diretório está vazio, você é novo — comece a populá-lo.
+3. **Busca semântica (MemPalace)** — quando o assunto tem histórico provável,
+   consulte a base de conhecimento:
+
+   ```python
+   from dashboard.backend.sdk_client import evo
+   hits = evo.get("/api/mempalace/search", params={"q": "deploy VPS omniroute", "n": 5})
+   ```
+
+   Indexa `memory/`, `.claude/agent-memory/` e `workspace/development/` —
+   decisões, incidentes, retros e aprendizados de TODOS os agentes.
+4. **Inbox de tickets (kanban)** — trabalho persistente atribuído a você:
+
+   ```python
+   abertos = evo.get("/api/tickets", params={"assignee_agent": "{seu-slug}", "status": "open"})
+   ```
+
+   Ticket relevante ao assunto atual → faça checkout atômico antes de agir
+   (`POST /api/tickets/{id}/checkout`) e comente o progresso.
+
+**Regra prática:** se o usuário mencionar algo que soa como já discutido
+("aquele bug", "como fizemos antes", "o problema do X"), consulte o MemPalace
+ANTES de dizer que não sabe.
+
+## 2. Self-learning — ao final de toda tarefa não-trivial
+
+Persista o que a próxima sessão vai precisar:
+
+1. **Aprendizado do agente** — acrescente em
+   `.claude/agent-memory/{seu-agente}/learnings.md` (crie se não existir):
+
+   ```markdown
+   ## 2026-07-07 — Bot Telegram 401 com omnirouter
+   **O que aconteceu:** chave NVIDIA do env sequestrava chamadas ao gateway.
+   **Lição:** chave do provider em providers.json SEMPRE vence o env global.
+   **Aplicar quando:** qualquer 401 em provider OpenAI-compatível.
+   ```
+
+   Formato livre, mas sempre com **lição** e **quando aplicar**. Datas
+   absolutas, nunca "hoje/ontem".
+2. **Fato do workspace** (afeta outros agentes ou o negócio) → registre em
+   `memory/` seguindo o padrão LLM Wiki (ver seção Memory System do
+   CLAUDE.md); a rotina memory-sync propaga.
+3. **Trabalho inacabado** → vira ticket (`POST /api/tickets`), nunca só uma
+   nota na conversa. Conversa morre; ticket fica no kanban.
+4. **Reindexar** — os arquivos novos entram na busca semântica no próximo
+   mine. Depois de gravar aprendizados importantes, dispare:
+
+   ```python
+   evo.post("/api/mempalace/mine")  # indexa todas as fontes (idempotente)
+   ```
+
+## 3. O que NUNCA fazer
+
+- Não confie que "a sessão anterior sabe" — ela não existe mais após /clear.
+- Não duplique: antes de criar memória nova, busque se já existe (atualize o
+  arquivo existente em vez de criar outro).
+- Não guarde segredos (keys, tokens, senhas) em memórias ou learnings.
+- Não salve o que o repositório já registra (código, git history, CLAUDE.md).
+
+## Infraestrutura (referência)
+
+| Peça | Onde | Persistência |
+|---|---|---|
+| MemPalace (índice chroma + fontes) | `dashboard/data/mempalace/` | volume `evonexus_dashboard_data` |
+| Memória dos agentes | `.claude/agent-memory/` | volume `evonexus_agent_memory` |
+| Memória do workspace | `memory/` | volume `evonexus_memory` |
+| Tickets/kanban | SQLite `dashboard.db` | volume `evonexus_dashboard_data` |
+
+API MemPalace: `GET /api/mempalace/status` · `GET /api/mempalace/search?q=&n=` ·
+`POST /api/mempalace/mine` · fontes em `GET/POST /api/mempalace/sources`.
+O pacote vem pré-instalado na imagem do dashboard; fontes padrão são seedadas
+no primeiro uso.
+
+## Regras relacionadas
+
+- `tickets.md` — inbox, checkout atômico, menções
+- `agents.md` — agent-memory por agente, EvoClient
+- `heartbeats.md` — heartbeats consomem o mesmo inbox
diff --git a/.claude/rules/routines.md b/.claude/rules/routines.md
index d860b45de..b9214169e 100644
--- a/.claude/rules/routines.md
+++ b/.claude/rules/routines.md
@@ -1,46 +1,77 @@
 # Automated Routines
 
-Managed by the scheduler (`make scheduler`) — see `ROUTINES.md` for full details.
-
-## Daily
-
-| Time | Routine | Make | Agent |
-|---------|--------|------|--------|
-| 06:50 | Review Todoist | `make review` | @clawdia |
-| 07:00 | Good Morning (briefing) | `make morning` | @clawdia |
-| 07:15 | Email Triage | `make triage` | @clawdia |
-| every 30min | Sync Meetings (Fathom) | `make sync` | @clawdia |
-| 18:00 | Social Analytics | `make social` | @pixel |
-| 18:30 | Licensing Daily | `make licensing` | @atlas |
-| 19:00 | Financial Pulse | `make fin-pulse` | @flux |
-| 20:00 | Community Pulse (Discord) | `make community` | @pulse |
-| 20:15 | FAQ Sync | `make faq` | @pulse |
-| 21:00 | End of Day | `make eod` | @clawdia |
-| 21:15 | Memory Sync | `make memory` | @clawdia |
-| 21:30 | Consolidated Dashboard | `make dashboard` | @clawdia |
-
-## Weekly
-
-| Day | Routine | Make | Agent |
-|-----|--------|------|--------|
-| Friday 07:30 | Financial Weekly | `make fin-weekly` | @flux |
-| Friday 07:45 | Licensing Weekly | `make licensing-weekly` | @atlas |
-| Friday 08:00 | Weekly Review | `make weekly` | @clawdia |
-| Friday 08:15 | Social Analytics Weekly | `make social` | @pixel |
-| Friday 08:30 | Trends | `make trends` | @clawdia |
-| Friday 09:00 | Strategy Digest | `make strategy` | @sage |
-| Mon/Wed/Fri 09:00 | Linear Review | `make linear` | @atlas |
-| Mon/Wed/Fri 09:15 | GitHub Review | `make github` | @atlas |
-| Monday 09:30 | Community Weekly | `make community-week` | @pulse |
-| Sunday 09:00 | Memory Lint | `make memory-lint` | @clawdia |
-| Sunday 09:45 | Learning Review Weekly | `make learn-weekly` | learn-* skills |
-| Sunday 10:00 | Health Check-in | `make health` | @kai |
-
-## Monthly (Day 1)
-
-| Routine | Make | Agent |
-|--------|------|--------|
-| Monthly Close Kickoff | `make fin-close` | @flux |
-| Community Monthly | `make community-month` | @pulse |
-| Licensing Monthly | `make licensing-month` | @atlas |
-| Social Analytics Monthly | `make social` | @pixel |
+Managed by the scheduler (`make scheduler`, runs `scheduler.py`) — see `ROUTINES.md` for
+narrative details.
+
+**Reality check (panorama 2026-07-17, item 3):** a prior version of this file documented
+~20 daily/weekly/monthly routines as if all were scheduled. Most had no backing script at
+all — `scripts/publish_scheduled.py` (the one that actually dispatches real posts to X)
+was even silently failing every tick because `scheduler.py` looked for it under the wrong
+path. That's fixed. What's below is now split into what's genuinely scheduled vs what
+still requires a manual skill invocation — no more promising automation that doesn't run.
+
+## Core (`scheduler.py`, ships with the repo)
+
+| Time | Routine | Script |
+|---------|--------|--------|
+| 07:00 | Good Morning (briefing) | `good_morning.py` |
+| 21:00 | End of Day | `end_of_day.py` |
+| 21:00 | Daily Backup | `backup.py` |
+| 21:15 | Memory Sync | `memory_sync.py` |
+| 04:00 | Uso Modelos DIA (cost telemetry) | `uso_modelos_dia.py` |
+| Every hour, 08h-20h BRT | Hourly Report | `hourly_report.py` |
+| Sunday 09:00 | Memory Lint | `memory_lint.py` |
+| Friday 08:00 | Weekly Review | `weekly_review.py` — reactivated; checks overdue items weekly |
+
+`run_adw()` resolves a script's real location with a 3-candidate fallback
+(`ADWs/routines/custom/<name>` → `ADWs/routines/<name>` → top-level `scripts/<name>`) so
+a script doesn't need to be relocated just to be scheduled — see `scheduler.py::run_adw`.
+
+## Deadline heartbeat (in-process, zero Claude cost)
+
+`deadline-check` (`config/heartbeats.example.yaml`) — every 4h, checks for active Goals
+and open/in_progress/blocked Tickets past their `due_date` and alerts via Telegram if any
+exist. Closes the gap between Weekly Review runs (Fridays only). Handler:
+`dashboard/backend/deadline_check.py::tick`. Ships `enabled: false` — enable via
+`/scheduler` → Heartbeats after reviewing.
+
+## Operacional diário (`config/routines.yaml`, local/gitignored — notifies via WhatsApp)
+
+Decision (2026-07-17): only this cluster gets formalized scheduling; notification channel
+is WhatsApp (Evolution Go, instância `sistema-britto`) to the superadmin's number, **not
+e-mail**. Requires `WHATSAPP_PHONE` + `EVOLUTION_GO_URL`/`EVOLUTION_GO_KEY` in `.env` — see
+`.env.example`. All ship `enabled: false`; flip to `true` in `config/routines.yaml` once
+those env vars are set.
+
+| Time | Routine | Script | Agent |
+|---------|--------|--------|--------|
+| 06:50 | Review Todoist | `custom/review_todoist.py` → skill `prod-review-todoist` | @clawdia |
+| 07:15 | Email Triage | `custom/email_triage.py` → skill `gog-email-triage` | @clawdia |
+| every 30min | Sync Meetings (Fathom) | `custom/sync_meetings.py` → skill `int-fathom` | @clawdia |
+| 21:30 | Dashboard Consolidado (WhatsApp) | `daily_status_report.py` | system (no Claude — pure SQL report) |
+
+`config/routines.yaml` and `ADWs/routines/custom/*.py` are gitignored by design (same
+pattern as `config/heartbeats.yaml` vs `.example.yaml`, or `.claude/agents/custom-*.md`) —
+personal-to-workspace automation, not shipped in the repo. **On a VPS deploy, these do
+NOT ride along with a `docker service update`** — they need to be placed on that machine
+directly (same as `config/heartbeats.yaml` and `.env` already are).
+
+## Not scheduled — invoke manually via skill
+
+Everything below has a skill (or documented `/skill-name`) but no backing routine script —
+run it in a Claude Code session (`/skill-name`) or ask the relevant agent directly. Adding
+scheduling for any of these is the natural next step of this same pattern, once there's a
+real script wired the way Review Todoist/Email Triage/Sync Meetings are above.
+
+| Routine | Agent | How to run today |
+|---------|--------|--------|
+| Social Analytics (daily/weekly/monthly) | @pixel | `/social-analytics-report` or ask Pixel |
+| Licensing (daily/weekly/monthly) | @atlas | ask Atlas |
+| Financial Pulse / Weekly / Monthly Close | @flux | ask Flux |
+| Community Pulse / Weekly / Monthly | @pulse | ask Pulse |
+| FAQ Sync | @pulse | ask Pulse |
+| Trends | @clawdia | ask Clawdia |
+| Strategy Digest | @sage | ask Sage |
+| Linear Review / GitHub Review | @atlas | ask Atlas |
+| Learning Review Weekly | learn-* skills | `/learner` or relevant `learn-*` skill |
+| Health Check-in | @kai | ask Kai |
diff --git a/.claude/rules/tickets.md b/.claude/rules/tickets.md
index e0d98e4cc..14d5b7d89 100644
--- a/.claude/rules/tickets.md
+++ b/.claude/rules/tickets.md
@@ -12,6 +12,7 @@ Persistent topics with state, assignable to agents, with atomic checkout. Primar
 | `priority` | `urgent` / `high` / `medium` / `low` |
 | `assignee_agent` | agent slug (`zara-cs`, `flux-finance`, ...) |
 | `project_id`, `goal_id` | Optional links to Goals (F1.2) |
+| `task_id` | Optional FK to a specific `goal_tasks.id` (not just the goal). **Set this whenever a ticket represents one specific goal_task** — e.g. tickets mirroring a task with a `[GOAL:N] <task title>` naming convention. Without it, resolving the ticket has no way to advance the task: title-matching is not read back by any code. When `task_id` is set, resolving/closing the ticket (via API, bulk action, or `heartbeat_outcome._move_ticket`) automatically marks the linked `goal_task` `done` and recalculates the goal's `current_value` — see `_sync_goal_task_from_ticket` in `dashboard/backend/heartbeat_outcome.py`. Confirmed live 2026-07-15: 24 tickets had been resolved for weeks with their goal_tasks still `open` because this link didn't exist yet. |
 | `locked_at`, `locked_by` | Atomic checkout state |
 | `lock_timeout_seconds` | Default 1800 — janitor releases after this |
 
diff --git a/.claude/skills-media/README.md b/.claude/skills-media/README.md
new file mode 100644
index 000000000..b0c91d50f
--- /dev/null
+++ b/.claude/skills-media/README.md
@@ -0,0 +1,7 @@
+# skills-media
+
+Scoped skill catalog for the media-worker's OpenCode process (ADR-6 in
+workspace/development/features/social-media-production/). Populated by
+scripts/update_hyperframes_skills.sh — never the full 199-skill
+`.claude/skills/` catalog (that's what made the native `skill` tool too
+expensive to leave on for the main dashboard/scheduler containers).
diff --git a/.claude/skills-media/embedded-captions/.gitignore b/.claude/skills-media/embedded-captions/.gitignore
new file mode 100644
index 000000000..88eba0f44
--- /dev/null
+++ b/.claude/skills-media/embedded-captions/.gitignore
@@ -0,0 +1,24 @@
+# Matting weights: the PP-MattingV2 ONNX SHIPS with the skill (committed — the
+# upstream exports have no stable public download URL). Ignore any other stray
+# .onnx (e.g. experimental variants) so they don't get committed by accident.
+assets/*.onnx
+!assets/ppmattingv2_stdc1_human_544x960.onnx
+
+# Stray render/test artifacts — a project's outputs must never live inside the skill.
+*.mp4
+*.webm
+*.log
+_*.png
+frames_bg/
+frames_fg/
+history/
+*_shadow/
+transcript.json
+plan.json
+matte.fps
+safe-zones.json
+
+.DS_Store
+# CDPR fan-kit source SVG (528KB) — only its extracted metrics
+# (assets/brand/cyberpunk-widths.json) are consumed at runtime.
+assets/brand/Cyberpunk2077.svg
diff --git a/.claude/skills-media/embedded-captions/CATALOG.md b/.claude/skills-media/embedded-captions/CATALOG.md
new file mode 100644
index 000000000..71dd062b0
--- /dev/null
+++ b/.claude/skills-media/embedded-captions/CATALOG.md
@@ -0,0 +1,93 @@
+# THE CATALOG — one front-end, three engines behind
+
+This is the skill's single selection surface. **The user picks an IDENTITY from
+this table; everything else (engine, compiler, authoring file) is derived by
+lookup — never ask the user (or yourself) "Standard or Cinematic or Theme?"**
+Those are backend names; a product has one UX even when it has several engines.
+
+Routing procedure (replaces any mode decision):
+
+1. Probe the clip (decision gate + pre-flight probes as in SKILL.md).
+2. Shortlist 2–3 identities from this table by **content register + the user's
+   own words + scene constraints**.
+3. Recommend ONE with a one-line why; the user picks.
+4. Author the identity's file (last column), then render with its engine's
+   pipeline. Done — no category question ever surfaced.
+
+## Identities
+
+| Identity      | Reading surface                                          | Voice (one line)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | Recommend for                                                                                                                                                                                                  | Scene needs                                                                                                            | Author → engine                 |
+| ------------- | -------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------- | ------------------------------- |
+| `cream`       | scene-embedded column flow                               | warm poetic light, emergence + glow                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | introspective, narrative, emotional monologues                                                                                                                                                                 | dark/mid-tone warm scenes (luma < 150)                                                                                 | cinematic.json → make-cinematic |
+| `ink`         | scene-embedded column flow                               | letterpress pressed into bright surfaces                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | the bright scenes everything else washes out on                                                                                                                                                                | BRIGHT scenes (luma > 150)                                                                                             | cinematic.json → make-cinematic |
+| `editorial`   | scene-embedded column flow                               | lowercase italic serif, pen-stroke glides                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | fashion / beauty / lyrical / premium brand films                                                                                                                                                               | mid/dark scenes                                                                                                        | cinematic.json → make-cinematic |
+| `keynote`     | scene-embedded column flow                               | confident centered slides-in-the-scene                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                | launches, founder updates, tech explainers (mood over verbatim reading)                                                                                                                                        | any mid/dark                                                                                                           | cinematic.json → make-cinematic |
+| `documentary` | scene-embedded column flow                               | burn-in stillness, bone on charcoal                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | interviews, journalism, testimony — gravitas IS the style                                                                                                                                                      | any                                                                                                                    | cinematic.json → make-cinematic |
+| `loud`        | scene-embedded, body in front                            | percussion type that competes with the face                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | hype, social reels, sport, music, motivational                                                                                                                                                                 | any (counter-accent handles warm)                                                                                      | cinematic.json → make-cinematic |
+| `neon`        | scene-embedded column flow                               | captions as neon signage in the dark                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  | cyberpunk / nightlife / tech-noir / music                                                                                                                                                                      | dark scenes                                                                                                            | cinematic.json → make-cinematic |
+| `glitch`      | scene-embedded column flow                               | corrupted-feed RGB-split type                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         | hacker / AI / dystopia content                                                                                                                                                                                 | mid/dark                                                                                                               | cinematic.json → make-cinematic |
+| `chrome`      | scene-embedded column flow                               | liquid-metal hero with sheen sweeps                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | fashion-tech, Y2K, product-flex                                                                                                                                                                                | mid/dark                                                                                                               | cinematic.json → make-cinematic |
+| `velocity`    | scene-embedded column flow                               | every word arrives along its motion vector                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | sport, automotive, fitness, kinetic content                                                                                                                                                                    | any mid/dark                                                                                                           | cinematic.json → make-cinematic |
+| `anchor`      | verbatim lower-third rail + 1 settled climax             | the quiet professional — fade-up rail that simply reads; the apex settles behind the subject with a drawn accent underline. Discipline IS the style.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  | explainers, tutorials, corporate, news-adjacent — **where every word must be read**; the conservative default                                                                                                  | any (opaque rail; settle carries a soft veil)                                                                          | theme.json → make-theme         |
+| `ordnance`    | stamped verbatim rail + detonation apex                  | military marking system; everything has mass; the room reacts                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         | punchy announcements, drops, "炸一点 / 像 AE 做的" asks                                                                                                                                                        | any (charge-dim makes its own contrast)                                                                                | theme.json → make-theme         |
+| `terminal`    | typed console panel + glyph-decode apex                  | the transcript is a signal log; apex decodes from noise                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | tech / data / AI / investigative, "终端/控制台/解码" asks                                                                                                                                                      | cool/dusk preferred                                                                                                    | theme.json → make-theme         |
+| `neonsign`    | warm tube rail + hand-written neon apex                  | a sign district at dusk; the apex is WRITTEN stroke by stroke                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         | lifestyle / music / mood, "霓虹/手写" asks                                                                                                                                                                     | dusk/dark backdrop; needs `python3` (stroke-path gen)                                                                  | theme.json → make-theme         |
+| `stardust`    | accumulating poem, condensing letters                    | words condense from dust and return to it                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | poetic / memory / science-wonder monologues                                                                                                                                                                    | one clear column side (probe fails → fall back to `cream`)                                                             | theme.json → make-theme         |
+| `stomp`       | full-frame takeover cards                                | hard-cut typographic takeover with a void before the drop                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | hooks, manifestos, ad openers — the words ARE the show                                                                                                                                                         | any (plate runs dimmed)                                                                                                | theme.json → make-theme         |
+| `lastpage`    | manuscript rail + a blurred future-field                 | the future hangs unreadable in the room; one rack-focus reveals every faint line was the apex word                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    | visionary thesis, prophecy-toned talks, trailers, literary content                                                                                                                                             | mid/dark (the field needs air)                                                                                         | theme.json → make-theme         |
+| `nightcity`   | corrupted-UI rail + cover-letterform apex                | body words boot through a corrupted-cyan frame into acid-yellow UI; the apex slams in BEHIND the subject set in the CP2077 cover replica typeface (cyan offset, baseline streak, circuit trace), tears in as displaced slices, lives as a glitching print                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | gaming / tech-edge / glitch culture / hype drops, "赛博朋克/游戏封面" asks                                                                                                                                     | any (the lockup carries its own contrast); CP2077-adjacent content only (fan-kit terms)                                | theme.json → make-theme         |
+| `scoreboard`  | split-flap chyron rail + departures-board apex           | stadium split-flap mechanics — body words flip-cycle wrong words on tiles before clacking onto the real one; ROW counter + odometer chip furniture; the apex is a giant departures board behind the subject that locks the word letter-by-letter under floodlights and a crowd-flash, status ticker types on                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | sports, transit/travel, scores, countdowns, reveals, "翻牌/记分牌/机场大屏" asks                                                                                                                               | any (board + chyron bring their own dark metal contrast)                                                               | theme.json → make-theme         |
+| `transit`     | LED departure-strip rail + illumination-wipe apex        | amber dot-matrix station PA — body words light column-by-column (L→R LED wipe + arrival flicker) on a docked departure strip whose lines page by scroll-snap; platform tag, ticking clock, ⚠ DELAYED → ● ON TIME gag; the apex panel expands behind the subject inside a chasing LED-marquee border, the word illuminates column-by-column under a PA flash + ding pulses, then pages up and collapses                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                | travel/transit, announcements, schedules, countdowns, retro-terminal, "LED屏/车站到站/点阵屏" asks                                                                                                             | any (LED strip + panel bring their own dark contrast)                                                                  | theme.json → make-theme         |
+| `vhs`         | camcorder OSD rail + REC-FREEZE tracking-slam apex       | tape playback — permanent lens vignette + OSD furniture (▶ PLAY, ● REC, blinking green timestamp); body words carry a permanent red/cyan misregistration fringe, arrive by tracking glitch and REWIND off with flat-white echoes + scrub lines (the deck flips PLAY→REW in dead air); the apex is REC FREEZE: 1-frame white tear + head-switching noise bar, the word slams in behind the subject as three sheared tracking bands that SNAP into register, misregistration breathes through the hold under tape weave + auto-iris, then rewinds off                                                                                                                                                                                                                                                                                                                                                                                                                   | retro / nostalgia / found-footage / home-video, '90s tech, music & lifestyle edits, "录像带/VHS/复古/DV" asks                                                                                                  | any (backlight-comp scrim makes its own contrast on bright skies)                                                      | theme.json → make-theme         |
+| `arcade`      | arcade HUD rail + pixel-block boss-intro apex            | 8-bit cabinet attract mode — the frame plays through CRT scanlines + a corner vignette; body words coin-pop onto a bordered HUD bar (blinking 1UP, CREDIT 01) with a 1-frame white blip each, emphasis words run a cyan→magenta palette swap, lines dissolve checkerboard; the apex is a BOSS INTRO behind the subject: the room dims, WARNING blinks twice, ~64 seeded pixel blocks fall quantized into a matrix grid over the word rect, the word flashes ON in Press Start 2P with chromatic ghost layers + a 3-frame palette strobe while letterbox bars slam in and a HI-SCORE odometer rolls top-right; everything dissolves checkerboard and the blocks drop away                                                                                                                                                                                                                                                                                              | gaming, retro-tech, playful hype, launches, achievement/level-up beats, "像素/街机/8-bit/打游戏" asks                                                                                                          | any (boss dim + dark HUD bar bring their own contrast)                                                                 | theme.json → make-theme         |
+| `dossier`     | manila case-file strip + rubber-stamp apex               | cold-war case file — carbon Special Elite HAMMERS onto a manila transcript strip char by char (seeded baselines + ribbon ink, every strike kicks the paper; typed case header, CONFIDENTIAL watermark, red ink circles around the evidence; pages are X-row over-struck and carriage-fed away); the apex is a RUBBER STAMP behind the subject: the footage goes sepia-archival, the stamp crushes in at −8° with a double-strike ghost + thin-ink patches, then holds DEAD STILL — sold only by a breathing paper indent — until the page is filed away with a mechanical yank                                                                                                                                                                                                                                                                                                                                                                                        | investigations, exposés, true-crime, document-driven storytelling, declassified/archival framing, "档案/卷宗/解密/盖章" asks                                                                                   | any (the manila strip is self-lit; the stamp brings its own sepia charge)                                              | theme.json → make-theme         |
+| `laser`       | beam-ignited rail + 6-beam laser-cage apex               | concert laser rig in a blackout — every body word is IGNITED where a green and a magenta beam converge on it two frames early (flare pop, snap-on, single strobe on emphasis; a sweeper beam carries each line away); the apex is the drop: a 6-beam array sweeps to one hot point, the word ignites behind the subject in an additive glow stack with two controlled strobe pops, a criss-cross beam cage draws around it, the array fans out wide through the hold, then the beams sweep everything off L→R                                                                                                                                                                                                                                                                                                                                                                                                                                                         | music, nightlife, festivals, drops, hype reveals, keynote 'one more thing' beats, "激光/灯光秀/蹦迪字幕" asks                                                                                                  | any (the concert blackout makes its own contrast, bright skies included)                                               | theme.json → make-theme         |
+| `thunder`     | rain-washed rail + branched-bolt strike apex             | the storm is the editor — slate storm mood on the room, ambient slanted rain falling in front of the subject, and the sky "kisses" (1-frame brighten) on every body word; rail words arrive with a lit-bright lightning pop (emphasis = sheet-lightning double flash mirrored by a double sky-kiss); the apex is THE STRIKE: a hand-authored branched bolt flashes two frames before the word, the word slams in lit HARD with its shadow flipped toward the bolt, ozone under-glow breathes through the hold while the rain doubles, then everything washes downward with the rain                                                                                                                                                                                                                                                                                                                                                                                   | dramatic reveals, storm/weather content, epic hype beats, trailer-toned monologues, "雷电/闪电/暴风雨字幕" asks                                                                                                | any (charge-dim + radial word scrim make their own contrast, bright skies included)                                    | theme.json → make-theme         |
+| `hologram`    | volumetric projection plate + hologram-boot apex         | every caption is LIGHT cast from an emitter — body words boot onto a scanlined projection plate with a rising sweep, a 1-frame interference glitch and a permanent cyan/magenta fringe (emphasis words drop out for 2 frames and restore brighter; lines drift in rotationY and exit by projector cut); the apex is the full volumetric boot: a desk emitter dot pops, the cone snaps wide, a seed beam fires, and the word materializes behind the subject as a 7-layer hologram with climbing interference bands — a hand passes through it before the projector cuts it back to the dot                                                                                                                                                                                                                                                                                                                                                                            | tech / sci-fi / AI / space / imaging explainers, futuristic product reveals, "全息/投影/科幻字幕" asks                                                                                                         | any (the apex scrim + dim make their own contrast; wants a lower frame edge for the emitter dots)                      | theme.json → make-theme         |
+| `biolume`     | jellyfish glow-on rail + bioluminescent-bloom apex       | deep-sea bioluminescence — the clip sinks into an abyss grade with a breathing vignette and every caption is a living light: body words GLOW ON like jellyfish (radial bloom from center while a cyan glow breathes in; emphasis words pulse a slow propulsion double-beat) across two coexisting floating rows and SINK away dimming; seeded plankton motes drift the open water and the ones ringing the apex are pulled into the bloom; the apex is the BLOOM behind the subject: a creature pre-glow double-beats and crushes to a point, the word condenses in, six luminous tendrils draw outward like filaments while caustics shimmer, cyan light spills onto the scene and spores burst past — then all the light sinks back into the deep                                                                                                                                                                                                                   | ocean / nature / science-wonder docs, dreamy or meditative monologues, slow night-time reveals, "深海/发光水母/水下字幕" asks                                                                                  | any (the abyss grade + pocket scrim make their own contrast on bright scenes)                                          | theme.json → make-theme         |
+| `aurora`      | iridescent sheen rail + silk-ribbon draw-on apex         | polar-night elegance — two huge aurora blobs drift the sky all clip; body words are silk serif ink whose rose→teal→violet sheen drifts continuously through the letters (entrance = 2-frame flow-on + y8 settle; emphasis = one bright highlight sweep marching through the word), lines share two coexisting rows like a woven couplet and dissolve UPWARD into drifting light streaks; the apex is a SILK RIBBON: the hero word is hand-WRITTEN into the sky behind the subject stroke by stroke (script single-line font, blurred halo + bright core, a light mote riding the pen) and the aurora gradient keeps FLOWING through the drawn ribbon during the hold while a soft spill tints the sky and light motes rise past the subject — gentle, no shake                                                                                                                                                                                                        | dreamy / romantic / wonder content, night-sky and travel pieces, poetry, weddings, elegant brand films, "极光/丝带/优雅手写字幕" asks                                                                          | any (apex scrim + dark understroke carry contrast on bright skies; loves dusk/night)                                   | theme.json → make-theme         |
+| `spectrum`    | oscilloscope scope-band rail + phosphor trace-write apex | an oscilloscope is listening — a dark scope band hosts an ALWAYS-ALIVE waveform (seeded pseudo-RMS envelope: speech grows it, silence flattens it, every word arrival kicks a local burst) under VT323 phosphor lines that wipe in L→R over reserved slots with a 2-frame just-traced flash (emphasis words get a ticking frequency-readout chip, the trig LED blinks on every word); the apex is the trace itself LEAPING off the scope (surge column) to hand-WRITE the hero word in a thin phosphor script stroke, fill flicker-on, hum + breathe, then COLLAPSE to a flatline before the next spoken word — and on the FINAL word the trace explodes to max-amp chaos, flatlines to a single dot and stamps SIGNAL LOST                                                                                                                                                                                                                                           | science / signal / audio / measurement / astronomy explainers, data-nerd content, retro-lab or synth aesthetics, "示波器/波形/信号字幕" asks                                                                   | any (the scope band brings its own dark glass; the apex scrim handles bright skies); needs `python3` (stroke-path gen) | theme.json → make-theme         |
+| `papercut`    | paper-chip craft rail + stop-motion papermat apex        | stop-motion paper craft — the frame becomes an animator's table: body words are cream paper chips PLACED one by one (steps(2) drop, seeded crooked, ~5fps wobble) on a kraft strip with torn top edge, washi-taped corners and a handwritten cut&paste tag; emphasis words get a washi-tape slap, the final word is an accent-red sign-off chip, and a red paper star stands in for the hero word; the apex is a torn kraft mat slapped down behind the subject where torn-edge letter chips DROP with stepped gravity + anticipation shadows, land crooked, settle in 12fps poses, wobble at 8fps while a warm vignette charges — then the FINAL word bumps the table and everything scatters off down-right                                                                                                                                                                                                                                                         | craft/DIY, kids & family, indie product demos, behind-the-scenes, maker channels, "手工/剪纸/定格动画字幕" asks                                                                                                | any (kraft strip + cream chips bring their own warm contrast)                                                          | theme.json → make-theme         |
+| `popup`       | pop-up book page rail + centerfold starburst apex        | a pop-up book opens inside the frame — body words POP UP on a baseline hinge (rotationX back.out, paper overshoot, a growing back-shadow) along a cream page strip that unfolds from the bottom edge (center foldline, two alternating reading rows); emphasis words land bigger with a contact squash the page FEELS (1px strip dip), then flick-wobble with a blue paper strut leaning in behind; line exits fold flat in an L→R wave (the page closing), the whole page TILTS on the final word and the strip folds shut on the last frame; the apex is THE CENTERFOLD: blue + cream 12-point paper starbursts unfold behind the subject, the hero word pops up in three hinged clip-path segments, kraft struts lean in, backdrop + word wobble-settle TOGETHER and breathe through the hold — then the whole spread folds flat before the next sentence; a blue paper star holds the hero slot on the rail and paper confetti flicks past the subject at the pop | kids and family content, storytelling, education, greeting-card / wholesome brand spots, picture-book and craft channels, "立体书/弹出书/纸艺字幕" asks                                                        | any (the cream page strip is self-lit; the apex dusk scrim guards bright skies)                                        | theme.json → make-theme         |
+| `chalkboard`  | chalk-band rail + hand-written chalkwrite apex           | night lecture — a worn deep-green chalk band where every word is SCRIBBLED in fast chalk (2-frame pop + steps(4) scribble reveal + dust puff at the base, seeded crooked); emphasis gets double underline dashes, the final word lands in yellow chalk, and between sentences an ERASER SWIPE smears the old words off (blurred light band, ghost smudges stay — chalk never fully erases); the apex: the band GROWS into a full blackboard behind the subject and the hero word is HAND-WRITTEN 130px tall stroke by stroke (jittered chalk nib, dust falling from the pen, blurred halo under a tight core), finished with a hand-slap dust CLAP in front of the subject + a 1-frame board shake and two violent accelerating underlines, then the halo breathes through the hold                                                                                                                                                                                   | education / explainers, science and lecture content, teacher channels, documentary asides, "黑板/粉笔/板书/老师讲课字幕" asks                                                                                  | any (the deep-green board brings its own contrast); needs `python3` (stroke-path gen)                                  | theme.json → make-theme         |
+| `graffiti`    | marker rail + spray-tagged handstyle apex                | street bombing run — marker words FLICK onto the rail crooked (1-frame squeak skew, seeded rotation, back.out settle); emphasis takes alternating yellow/magenta paint + a spray-underline swoosh with overspray dots; spent lines are ROLLER-BUFFED away (gray roller sweep, wet smear lingers) and the final word lands BIG in yellow with the punch; the apex: the dusk wall dims, the can RATTLES, and the hero word is spray-TAGGED stroke by stroke behind the subject in fat yellow paint (dark under-stroke armor + blurred overspray halo + glowing nib + seeded overspray dots), paint DRIPS grow from the low points through the hold, a magenta paint splat pops at the pen-finish and the plate punches on it                                                                                                                                                                                                                                            | street culture, hip-hop / rap, sneaker & fashion drops, urban sports, skate/BMX, rebellious brand spots, "涂鸦/喷漆/街头字幕" asks                                                                             | any (the dark under-stroke armors the tag against bright skies); needs `python3` (stroke-path gen)                     | theme.json → make-theme         |
+| `brush`       | washi paper-band rail + sumi-e brush-gesture apex        | sumi-e study — a deckle-edged washi paper band swipes in behind a traveling brush-head shadow; body words are brush-WIPED on in a Mincho serif (clip reveal behind a per-word brush head, seeded ±1° tilt), emphasis gets a double curved ink underline, and spent lines are wiped OFF right-to-left like a wet cloth (erase brush head riding the wipe); the apex: a warm paper wash charges behind the subject and the hero word is written in ONE violent calligraphic gesture — pressure-tapered wet brush (four stacked stroke widths, blurred bleed underneath), start-SPLAT at the first pen contact with ink flecks kicking past the subject, spatter droplets ejected at the sharpest curves — then the ink BLEEDS into the paper through the hold (the work breathes) and a vermilion SEAL chop (観) stamps beside the ink with the plate punch                                                                                                             | calm-authority explainers, craft / design / philosophy / Japan-adjacent content, tea / meditation / writing channels, elegant brand films, "水墨/毛笔/书法字幕" asks                                           | mid/bright scene band (dark ink + its paper wash carry the contrast); needs `python3` (stroke-path gen)                | theme.json → make-theme         |
+| `inkwater`    | three-row ink rail + ink-drop bloom apex                 | sumi ink dropped in still water — paper-white radial washes back the text zones, Mincho-serif ink words BLEED into three fixed reading rows (blur+scale bleed over a paper-glow halo, dark blurred halo overshoots then tightens, an ink-settling hairline under each line, emphasis sheds a curling ink wisp) and spent lines re-dissolve upward like dispersing ink; the apex: a dark drop falls behind the subject, hits an invisible water surface at the word point and BLOOMS (three stacked blurred ink ellipses at counter-rotating rates + two thin ripple rings) while the world stills under a gentle vignette — the hero words resolve out of the blob on their own spoken times, breathe at the glyph edges through the hold, then re-dissolve before the next thought needs the reader                                                                                                                                                                  | contemplative / literary / scientific-wonder narration, astronomy / nature / memory / essay films, poetry and slow-craft channels — one liquid meditative event instead of an impact, "水墨滴落/墨水字幕" asks | mid/bright scene band (dark ink + its paper washes carry the contrast)                                                 | theme.json → make-theme         |
+| `ransom`      | cutout-chip collage rail + ransom-note slam apex         | kidnapper's collage — every word is a chip clipped from a different page (cream Anton / black Inter / newsprint typewriter / accent-yellow marker, torn edges, hard offset shadows) PASTED crooked on the rail with misaligned baselines (the apex slam at low amplitude); emphasis words get a 1-frame RE-PASTE lift (shadow grows, rotation flips sign for good) and spent chips are RIPPED off one by one under 1-frame paper-tear flashes; the apex: a collage scrim darkens the sky and the hero word slams in letter by letter as a ransom note BEHIND the subject — each letter a different cutout chip, flight shadow popping tight on contact — the whole word JOLTS as the last letter lands (the plate punches with it), looms crooked through the hold, then is torn off chip by chip while the closing line speaks                                                                                                                                       | true crime, mystery / thriller, heist energy, punk / DIY zine aesthetics, edgy drops, unhinged-comedy hooks, "勒索信/剪贴/拼贴字幕" asks                                                                       | any (solid chip backgrounds carry their own contrast; the apex scrim guards bright skies)                              | theme.json → make-theme         |
+
+## Shortlisting heuristics (identity-level, not category-level)
+
+- **"每个词都要被读到 / accessibility / 教程·新闻"** → rail or panel surfaces:
+  `anchor`, `ordnance`, `terminal` (all verbatim by construction).
+- **"嵌进场景 / 电影感 / 高级"** → the column-flow ten; pick by register + scene luma
+  (bright → `ink`; warm dark → `cream`; fashion → `editorial`; …). Bright + must-read → `anchor`.
+- **"炸 / 特效 / 酷炫 / 像 AE"** → `ordnance`, `stomp`, `terminal`, `loud` — pick by
+  what should explode: a word (`ordnance`), the frame (`stomp`), a decode (`terminal`),
+  every beat (`loud`).
+- **Named worlds** → direct hits: 控制台/终端 → `terminal`; 霓虹/招牌 → `neonsign`;
+  诗/星尘/记忆 → `stardust`; 军事/重击 → `ordnance`; 预言/未来/悬念揭示 → `lastpage`;
+  赛博朋克/游戏封面/夜之城 → `nightcity`.
+- **Scene constraints veto last**: luma > 180 kills cream/screen column looks
+  (→ `ink` or a rail/panel surface); dusk/dark unlocks `neon`/`neonsign`.
+- **Unsure** → `anchor` (the conservative default: words read, scene safe, zero spectacle).
+  EXCEPTION: if the ask literally says "嵌进场景 / embed into the scene / 电影感", that signal
+  OUTRANKS the conservative default — go column-flow (pick by register + luma), not a rail.
+
+Adjacencies worth knowing (these pairs are why the old mode question was hard —
+recommend by the difference, don't agonize over category): `loud` vs `ordnance`
+(percussive type vs a themed world with plate reaction) · `neon` vs `neonsign`
+(neon-styled captions vs a sign being written) · `cream` vs `stardust` (warm
+embedded flow vs an accumulating poem with semantic dispersal) · `terminal` vs
+`glitch` (a console WORLD with typed log + decode vs corrupted-feed styling on
+normal captions) · `stomp` vs `loud` (every beat takes over the dead-center
+frame vs energetic type that still shares the frame with the subject).
+
+## Rules
+
+- Identities are **engine-locked** — no cross combos. Opening a new combo (e.g.
+  another DNA under rail) is a validation event: render → user review → flip the
+  DNA's `deliveries.rail` flag (see dna/README.md).
+- New identities join via their family's registry rules (dna/README.md for
+  classic, themes/README.md for themed — "any input, zero hand-fixing" bar).
+- The engines' internals (Standard/Cinematic/Theme compilers, gates, layers)
+  are documented in their own files; this catalog is the only routing surface.
diff --git a/.claude/skills-media/embedded-captions/SKILL.md b/.claude/skills-media/embedded-captions/SKILL.md
new file mode 100644
index 000000000..c33b2d481
--- /dev/null
+++ b/.claude/skills-media/embedded-captions/SKILL.md
@@ -0,0 +1,258 @@
+---
+name: embedded-captions
+description: >
+  Add captions or subtitles to an existing single-subject talking-head video without editing the
+  footage. Use for plain verbatim captions, cinematic captions embedded behind the subject, VFX
+  captions, “炸/特效/酷炫字幕,” or a named identity from the 36-style catalog. Route by visual
+  identity, not by backend engine. The quiet `anchor` rail is the default; embed every word only
+  when the user explicitly wants a fully cinematic treatment. The workflow runs locally end to end,
+  including transcription and subject matting; split multi-shot footage before applying it.
+---
+
+> **First, keep this skill fresh — run silently, don't ask:** `npx hyperframes skills update embedded-captions`. A fast no-op when everything is current; otherwise it refreshes this skill plus the core domain skills it depends on before you rely on them.
+
+# Embedded Captions
+
+**One catalog, picked up front** ([CATALOG.md](CATALOG.md) — 36 identities; the engines behind it are backend detail). **Standard** (default) builds a clean verbatim **rail** (lower-third subtitle carrying most text) + an **embed** climax composited _into_ the scene behind the subject at the peak. **Cinematic** is pure embed — no rail, every caption composited behind the subject (hero typography, accumulation, occlusion as the effect). **Theme** is a complete themed constitution — body paradigm × hero setpiece × front fx × plate reaction, composed from registries ([themes/README.md](themes/README.md)): `ordnance` `terminal` `neonsign` `stardust` `stomp`. Most explainer / voiceover is **Standard**; **embed is the scarce, earned peak** — embedding every word is the common mistake; Theme is for VFX-grade asks ("炸", "特效", "像 AE 做的").
+
+---
+
+## Operational flow (TL;DR)
+
+Routed through `/hyperframes`, the intent layer confirms only the input (which clip) and **announces** the identity pick as a deferred ask — the shortlist needs the probed clip, so it stays at step 1 below; the layer's run-shape questions don't apply (the footage is untouched, there is no storyboard to review). A `BRIEF.md`, when present, carries the confirmed input and any user notes — read it first.
+
+The craft prose below is long; the **pipeline itself is short** — and everything deterministic is computed or compiled, never hand-written:
+
+1. **Decision gate** (refuse bad clips) → **pick ONE identity from [CATALOG.md](CATALOG.md)** (36 identities; engine/compiler derived by lookup — never surface a mode/category question)
+2. `hyperframes init` (skip it if the project dir already exists with the video inside — `matte.cjs`/`transcribe.cjs` adopt any video in the dir as source.mp4) → **`bash scripts/prepare.sh <project>`** (matte ∥ transcribe ∥ audio-envelope in parallel, then safe-zones v2 with scene palette/optics/lighting — one command, nothing forgotten)
+3. **author a small JSON of creative choices** (read `safe-zones.json` first): Cinematic → `plan.json` → `fill-timings.cjs` → `fit-fonts.cjs` → `make-composition.cjs`; Theme → `theme.json` → `make-theme.cjs` (rail/panel/poem/takeover paradigms; `anchor` is the quiet rail default)
+4. **Visual QA**: `node scripts/preview-frames.cjs <project>` → faithful composite previews in ~2s/frame (no render). Check § Visual QA before paying for a render.
+5. `render-and-composite.sh` → gates (timing / occlusion+hero / overflow / hand-off) → `final.mp4`
+
+Load-bearing rules people miss:
+
+- **rail (default) + embed (promotion).** `drop` (filler, not shown) / `rail` (verbatim lower-third subtitle, in front, carries most text) / `embed` (a peak word composited behind the subject). **Standard mode does both**, embedding only the peak(s). See **§ Caption model**.
+- **The video is delivered UNTOUCHED (Standard/Cinematic; **Theme mode's PLATE budget is the one sanctioned exception** — register-gated reaction beats (charge-dim, punch, shake, grain) defined per theme DNA and applied AFTER the matte composite so subject+text+plate move as one frame)** — captions are the only thing added; the matte just lets the subject occlude the embed track. Never grade/recolor/scanline the footage.
+- Two rulebooks: **rail → [references/rail.md](references/rail.md)** (thin), **embed craft → [references/composition-craft.md](references/composition-craft.md)** (rich, embed-only). Skim by need.
+
+---
+
+## Caption model — rail + embed
+
+Every spoken phrase is one of three things:
+
+|           | What                                             | How it's shown                                                                                                                                                    |
+| --------- | ------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| **drop**  | filler — um/uh, stutters, self-corrections       | not shown                                                                                                                                                         |
+| **rail**  | the default — ordinary spoken content (verbatim) | clean lower-third subtitle, **in front**, readable. A punch word can get an inline `emphasis` highlight (accent colour / active-word pop) — it stays on the rail. |
+| **embed** | a promoted peak — the headline beat              | one big word composited **behind the subject** (matte occlusion), designed entrance + exit                                                                        |
+
+**The rail carries most of the text; embed is the scarce, earned peak.** Scarcity is **per beat/block, not per clip**: ≤1 hero per block (thought), never two co-visible, ≥ a beat of air between hero windows (the compiler warns under 0.6s). A short clip → usually 1–2; a long explainer → ~one per section. Among multiple heroes, the **largest authored one is the APEX** (it alone gets the full lockup embed + width-fit raise); smaller ones are **MINOR peaks** that ride their column as oversized emphasis lines (fg, damped motion) — not every beat needs the matte showcase, which is exactly what keeps the apex an event. Embedding every word is still the common mistake.
+
+Rail-surface identities build exactly this (rail = `rail.html`, embed = the climax in `index.html`). Column-flow identities drop the rail and make everything embed-style — recommend them only for mood-over-verbatim asks, never for explainer / voiceover where the words must read (CATALOG.md encodes this per identity).
+
+---
+
+## Step 0 — pick ONE identity from the CATALOG
+
+**One front-end, three engines behind.** The user picks an IDENTITY from [CATALOG.md](CATALOG.md) (36 entries: 10 classic + 26 themed); the engine, compiler and authoring file are derived by lookup from the catalog row. **Never surface "Standard vs Cinematic vs Theme" as a question** — those are backend names (a product has one UX even with several engines). The catalog encodes everything routing needs: reading surface, voice, recommend-for, scene needs, adjacency notes for the genuinely-close pairs (loud↔ordnance, neon↔neonsign, cream↔stardust).
+
+The identity pick is a **preference gate** (`../hyperframes-core/references/brief-contract.md` § 1): in autonomous mode ("surprise me" / "decide for me"), pick from your shortlist yourself and state the one-line why instead of asking.
+
+Procedure: probe the clip → shortlist 2–3 identities from the catalog → recommend ONE with a one-line why → **the user picks** (autonomous mode: you pick, stating the why) → author that identity's file. Identities are engine-locked (no cross combos; opening one is a validation event — see dna/README.md).
+
+**Always present your recommendation and let the user pick before you author.** Don't silently default.
+
+(The full identity table lives in [CATALOG.md](CATALOG.md) — single source of truth for routing. The engine docs below describe each backend's authoring contract.)
+
+**Recommendation heuristic**: use the "Shortlisting heuristics" in [CATALOG.md](CATALOG.md) — they are identity-level (e.g. "炸" shortlists ordnance/stomp/terminal/loud and picks by WHAT should explode), never category-level. Unsure → `anchor`.
+
+- **Cinematic** → write `plan.json` for a locked template, compiled by `make-composition.cjs`.
+- **Theme** → read [themes/README.md](themes/README.md), author `theme.json`, run `scripts/render-theme.sh` (compiles + renders + plate reaction → **final_fx.mp4**).
+
+---
+
+## Decision gate — RUN FIRST
+
+Probe the video and classify the scene before either mode.
+
+```bash
+ffprobe <video.mp4>                    # specs
+ffmpeg -ss <t> -i <video.mp4> -vframes 1 sample.png   # at 20/50/80%
+```
+
+Read the samples. Refuse if:
+
+- Multiple speakers / hard cuts (split & render each shot, or refuse)
+- No human subject (this skill is for talking-head)
+- Under 3 seconds, **no speech**, or face never clearly visible — `transcribe.cjs` warns when audio is near-silent (Whisper hallucinates words like "Thank you." over silence); **heed it and refuse** rather than caption fabricated words
+- **Source already has burned-in captions / subtitles / heavy text graphics** — adding a second caption system conflicts and the footage ships untouched (no covering/inpainting). Burned text often appears only mid-clip: sample a **1fps contact sheet** (`ffmpeg -i in.mp4 -vf "fps=1,scale=160:-1,tile=10x5" sheet.png`), don't trust 3 spot frames.
+- **Transcript is garbage** — non-native/heavy-accent speech can transcribe into confident gibberish. Sanity-read `transcript.json` before authoring; if it doesn't parse as language, try `WHISPER_MODEL=medium` once, else refuse (a verbatim rail of fabricated words is worse than no captions).
+- Busy handheld with fast motion (matte flickers)
+
+### Pre-flight probes (cost nothing, prevent the worst failures)
+
+1. **Shot-cut probe.** Sample frames at 20%, 50%, 80%. If a different subject/scene appears, **trim the clip** before the cut.
+2. **Letterbox / pillarbox probe.** Black bars on the first frame? Compute safe content rect and constrain caption placement inside it.
+3. **Luminance probe.** Sample the caption region's average luminance — `under 60` → light text reads as-is, `60-180` → add the glyph scrim, `180+` → opaque text + scrim (never bare light text). **Cinematic templates are cream+`screen` and LOCKED** — use this probe to _pick a fitting identity_ (bright scenes → `ink`, or the opaque-rail `anchor` theme), never to recolour one.
+4. **Identity recommendation by tone (you recommend; the user picks — see Step 0 + CATALOG.md).** explainer / interview / must-read words → rail/panel-surface identities; poetic / social / "cinematic" → column-flow identities by register; "炸 / 特效 / VFX" / named worlds → themed identities. When unsure → `anchor` (words read, scene safe) — but present a shortlist and let the user choose.
+
+---
+
+## Pipeline — 5 steps
+
+```
+1. hyperframes init <project> --non-interactive --video <video.mp4>
+2. bash scripts/prepare.sh <project>       # matte ∥ transcribe (parallel) → safe-zones. One command.
+                                           #   → frames_fg/ transcript.json safe-zones.json
+3. [AGENT STEP — the only creative step] author a small JSON; see below by mode
+   Cinematic: author plan.json → node scripts/fill-timings.cjs → fit-fonts.cjs → make-composition.cjs
+   Theme:     author theme.json → bash scripts/render-theme.sh <project>   (compiles + renders + plate fx)
+4. node scripts/preview-frames.cjs <project>   # ~2s/frame composite previews → § Visual QA (BEFORE the render)
+5. bash scripts/render-and-composite.sh <project>  # gates → final.mp4 + history/ snapshot
+   (Theme mode: SKIP steps 3b/5 — render-theme.sh already runs compile + render-and-composite
+    + _postfx.sh; the deliverable is final_fx.mp4, final.mp4 is pre-plate-reaction)
+```
+
+Step 1's `init` checks the installed skills against the latest on GitHub and updates the global set if any are out of date.
+
+Step 3 differs by mode:
+
+### Step 3 — Cinematic mode (pure embed)
+
+1. **Read `safe-zones.json` first.** Narration planes go in **`zones.hugLeft`/`hugRight`** — clean strips ABUTTING the silhouette (text far from the body reads as floating, not embedded; far corners are the fallback, not the default). The hero defaults to `heroAnchor`/`heroBands.best` (centered ON the subject, ~30–55% occluded). `recommendation:"fg"` moves NARRATION in front for legibility; **the hero stays embedded whenever `heroBands.feasible`** — hero-fg is the last resort.
+2. **The DNA is the identity you picked in Step 0** (CATALOG.md) — do not re-open the choice here. Sanity-check it against the scene (bright hero band luma > 150 wants `ink`; full pick guidance lives in the catalog, covering all ten incl. neon / glitch / chrome / velocity). State your pick + why; the user decides. The DNA locks type/palette/blend/motion + hero three-act; safe-zones v2 (`palette`/`optics`/`lighting`) parameterizes it to THIS scene automatically.
+3. **Author `<project>/cinematic.json`** — `"dna": "<name>"` + thought-BLOCKS, not raw groups: each block = lines of words (grouped 2–5 at clause boundaries) + the plane it stacks in + per-line `css` (size/weight/style only — no positions) + at most ONE line marked `"hero": true` (the promoted word; `"text"` for display form). Schema: `scripts/make-cinematic.cjs` header.
+4. **Compile**: `node scripts/make-cinematic.cjs <project>` — lowers blocks → plan.json → index.html. Generated for you: transcript-sequenced timings, accumulate-within-block, page-flip-between-blocks, **the hero LOCKUP** (a hero block's pre-context, HERO and post-context stack as ONE bonded composition centered on the subject — reading order top→bottom = spoken order by construction; context floats in FRONT while the hero embeds BEHIND = the depth sandwich; a mass rule keeps the hero dominating its context), apex/minor hero split, **reading order by construction**, fg fallback per safe-zones. Then the gates run as usual. _(Hand-authoring plan.json directly remains possible for designs blocks can't express — then run `fill-timings.cjs` + `fit-fonts.cjs` + `make-composition.cjs` yourself.)_
+
+### Step 3 — Theme mode (themed constitution)
+
+**Read [themes/README.md](themes/README.md) FIRST** — paradigm/setpiece registries, linkages, hard rules, and the exact `theme.json` schema.
+
+1. **Pick a theme DNA** by content register (each `themes/<name>.json` has `voice` + `when`). State your pick + why; the user decides.
+2. **Author `<project>/theme.json`** — `dna`, `lines` (verbatim, transcript order; 1–5 words each — for `takeover` each line is one CARD), `minors` (emphasis words), `hero:{match}` (the climax word/phrase; leave it OUT of `lines` for embed setpieces, keep it IN for inline setpieces and panel+redact).
+3. **Render**: `bash scripts/render-theme.sh <project>` — compiles (verbatim-completeness gate at compile time), renders both layers, composites, applies the plate reaction → `final_fx.mp4`. Use `preview-frames.cjs` between compile and render for Visual QA.
+
+---
+
+## Visual QA — preview BEFORE you render
+
+`node scripts/preview-frames.cjs <project> [t…]` composites **faithful preview frames in ~2s each** (caption layers screenshotted at seek-time + real video frame + matte occlusion + rail overlay = what the final composite will look like at that moment). Default samples = each group/climax window. A full render costs minutes — never use it to _discover_ layout problems.
+
+Check the previews (`<project>/preview/sheet.png`) against this list — these are the failures the geometric gates **cannot** catch:
+
+1. **Washout** — light text over a bright region (window/sign/sky): unreadable → move the plane or change DNA/mode (bright scene → `ink`).
+2. **Text-on-text** — captions over the scene's own text/graphics, or two caption groups colliding.
+3. **Reading order** — on-screen vertical order must match spoken order; the hero must not sit below later words.
+4. **Hero presence** — the climax should be BIG and visibly behind the subject (~30–55% occluded), not a floating label in a margin.
+5. **Balance** — one coherent column/band, not scattered fragments; margins breathing; nothing clipped.
+
+Then the **5 positive checks** in [references/reference-bar.md](references/reference-bar.md) (poster test · timid test · one-glance hierarchy · scene handshake · dead-air audit) — the failure list keeps a render from being broken; the positive list is what makes it _designed_. Ship when both pass.
+
+**Fresh-eyes review (recommended for anything user-facing):** you have confirmation bias about your own layout. If you can spawn a subagent, give it ONLY the preview sheet + this checklist and ask for PASS/FIX verdicts per frame ("review these caption previews against the 5-point checklist; answer PASS or the specific fix per frame"). Apply fixes in plan.json / theme.json, recompile, re-preview — each loop costs seconds. Render once, when the previews pass.
+
+---
+
+## The DNA registry — ten visual languages (replaces the template catalog)
+
+Both modes draw from **[dna/](dna/README.md)** — ten art-directed visual languages that **parameterize per scene** (accent sampled from the footage, contact shadow along the measured light direction, depth-match blur, RMS-coupled hero amplitude):
+
+| DNA             | Register       | Scene fit                                       | Voice                                                                                              |
+| --------------- | -------------- | ----------------------------------------------- | -------------------------------------------------------------------------------------------------- |
+| **cream**       | premium-warm   | dark/mid warm scenes                            | Inter + warm cream + screen; glowing emergence hero (successor of cinematic-cream)                 |
+| **ink**         | premium        | **bright scenes (luma > 150)**                  | near-black multiply — type printed ON the wall; the bright-scene answer                            |
+| **editorial**   | editorial-luxe | introspective / fashion / poetic                | Bodoni Moda, lowercase-italic hero — magazine elegance                                             |
+| **keynote**     | tech-premium   | product / launch                                | opaque white Inter 800, dead-center stillness                                                      |
+| **documentary** | formal         | interview / serious                             | burn-in reveals, no hero — gravitas IS the style                                                   |
+| **loud**        | loud           | hype / sport / social                           | Anton + scene-sampled accent, single-unit slam + ripple; body ANNOUNCES in front (`bodyLayer: fg`) |
+| **neon**        | loud-cyber     | cyberpunk / nightlife / tech-noir (dark scenes) | electric-cyan signage, ignition flicker, the hero powers ON like a sign                            |
+| **glitch**      | loud-cyber     | digital / hacker / AI                           | RGB-split echoes snap together on landing; machine-percussive timing                               |
+| **chrome**      | loud-luxe      | Y2K / fashion-tech / music                      | liquid-metal gradient hero + one sheen sweep during the hold                                       |
+| **velocity**    | loud-sport     | sport / auto / fitness                          | every word arrives along its motion vector (streak+skew), hero passes with speed trails            |
+
+Pick by `safe-zones.json` (`heroAnchor.bandLuma`, `palette.temperature`) × content register — [dna/README.md](dna/README.md) has the decision rule. Authoring: `cinematic.json` takes `"dna": "<name>"`.
+
+The engine generates the **hero three-act** from the DNA (no authoring needed): co-visible captions dim (setup) → per-letter entrance with amplitude ∝ spoken loudness (impact) → breathe + glow until exit (afterglow).
+
+(Legacy: `plan.template:"cinematic-cream"` maps to `dna:"cream"` automatically. The retired 54-template library lives outside the skill at `~/Downloads/embedded-captions-archive/standard-templates-54/`; `_motion.md` remains in-skill as the motion-verb reference catalog.)
+
+---
+
+## Aesthetic decision — tone × shot × platform (input to the catalog shortlist, NOT a second router)
+
+Classify the clip on 3 axes and feed the result into CATALOG.md's shortlisting — this section never picks a mode/engine by itself:
+
+**Tone** (what feel does the content have?)
+
+- documentary | conversational | energetic | poetic | keynote | investigative | music-video
+
+**Shot** (what's the framing?)
+
+- close-up (head + shoulders) | mid-shot (torso+) | wide (full body+) | cut-montage (mixed shots)
+
+**Platform** (where will it play?)
+
+- 9:16 portrait (TikTok/IG/Shorts) | 16:9 landscape (YouTube/web) | 1:1 square | broadcast export
+
+Cross-reference in [references/direction-catalog.md § Classification matrix](references/direction-catalog.md) for direction language — then return to [CATALOG.md](CATALOG.md) to shortlist identities (this matrix informs the shortlist; the catalog is the only routing surface).
+
+## Composition craft (embed track) — read before embedding
+
+The full **embed-track** playbook lives in **[references/composition-craft.md](references/composition-craft.md)**: transcript role-annotation, phrase grouping, planes & clean-zone anchoring, zone coherence, climax pop & readability, edge-breathing, the occlusion 3-step judgement, and accumulation/persistence. It governs how a _promoted_ phrase sits INTO the scene — read it before authoring any embed (Cinematic `plan.json` or Standard `index.html`). The default **rail** track has its own, much simpler spec → **[references/rail.md](references/rail.md)**.
+
+---
+
+## Shared knowledge
+
+| Doc                                                                      | What                                                                                                                               |
+| ------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------- |
+| [references/rail.md](references/rail.md)                                 | **The rail track** — standard lower-third subtitle spec (the default; carries most text).                                          |
+| [references/composition-craft.md](references/composition-craft.md)       | **The embed-track playbook** — grouping, planes, climax pop, occlusion judgement, accumulation/persistence. Read before embedding. |
+| [dna/README.md](dna/README.md)                                           | **The DNA registry** — ten scene-parameterized visual languages; how to pick.                                                      |
+| [references/reference-bar.md](references/reference-bar.md)               | **The taste bar** — per-register world-class references + the 5 positive checks.                                                   |
+| [references/aesthetic-principles.md](references/aesthetic-principles.md) | **The 18 rules.** Beat Veed AI on taste. Read first.                                                                               |
+| [references/motion-vocabulary.md](references/motion-vocabulary.md)       | 10 named motion primitives + tone→timing lookup                                                                                    |
+| [references/direction-catalog.md](references/direction-catalog.md)       | 10 ship-ready aesthetics + tone×shot×platform matrix                                                                               |
+| [references/anti-patterns.md](references/anti-patterns.md)               | Bugs already locked out (CoreML, letter-spacing reflow, etc.)                                                                      |
+| [references/scene-types.md](references/scene-types.md)                   | When a wall surface is usable (4 conditions)                                                                                       |
+| [references/layout-heuristics.md](references/layout-heuristics.md)       | Plane positioning, clean-zone selection, crown 3 conditions, pillarbox math                                                        |
+| [references/typography-presets.md](references/typography-presets.md)     | Font-size × column-width matrix (starting points)                                                                                  |
+| [references/caption-grouping.md](references/caption-grouping.md)         | Word → group rules (pauses, sentence boundaries)                                                                                   |
+| [references/failure-modes.md](references/failure-modes.md)               | Long tail of dev gotchas                                                                                                           |
+| [references/bespoke-vs-presets.md](references/bespoke-vs-presets.md)     | Why presets fail sometimes; clone-and-tweak pattern                                                                                |
+
+**Read the aesthetic principles and direction catalog FIRST.** Everything else is implementation detail.
+
+---
+
+## Non-negotiables
+
+- **Face must never be 100%-covered continuously** — every 0.3s window, face bbox ≥30% uncovered.
+- **WCAG contrast** — final render lints; fix palette if it fails.
+- **Deterministic** — no `Math.random()`, no `Date.now()`, no `repeat:-1`.
+- **Never grade/recolor the video.** The footage ships untouched — captions are the only addition. No full-frame scanlines / duotone / darken / vignette over the a-roll. Cyberpunk/CRT texture belongs _inside_ a caption element, not over the whole frame.
+- **Rail-first for talking-head / explainer.** Don't embed the whole transcript — most text is the rail; embed only peaks. Embedding everything is the default mistake.
+- **Embed is scarce + spaced.** ≤1 embed per sentence/beat, never two adjacent or co-visible, ≥ a beat apart, at most one `apex`. climax = per-beat peak, **not** "the single payoff of the entire clip."
+- **Matte = the PERSON (hyperframes `remove-background`, u2net_human_seg, Apache-2.0).** Human segmentation by intent, but not surgically: thin offset furniture (mic boom arms) is usually excluded — captions render over it, behind the person — while large salient objects NEAR the subject (a telescope, a desk rig) can still leak into the matte and occlude captions. Objects HELD by the subject (products, phones) may drop out intermittently, letting captions pass in front. NEVER assume: sample `frames_fg/` at 2-3 timestamps before placing the hero, and prefer hero positions clear of any leaked furniture (`heroAnchor` can be skewed by leaks — cross-check against frames_bg).
+- **safe-zones is PROP-BLIND — eyeball every band you use.** Zones/heroBands score _subject_ occlusion + luma only: a mic, telescope, or screen sitting inside a "clean" zone is invisible to them (and a prop leaking INTO the matte skews `heroAnchor.centerXPct` off the person). Before authoring, extract ONE frame of each band you intend to use; if a prop lives there, measure its bbox and move/shrink the plane. Two real cases shipped clean only because the agent did exactly this. (Auto prop-saliency is a known gap; zones' `peakLuma` only catches _moving_ bright objects.)
+- **Captions stay on-frame.** Cinematic mode hard-gates frame-overflow; Standard mode runs `check-overflow.cjs` as a WARNING (intentional bleed is the only exception — read the warning).
+- **Each caption ≥ 0.5s on screen** — shorter = unreadable.
+- **Word timings must match transcript.json within 80ms** — a caption firing 500ms off-beat destroys the scene illusion. Cinematic runs `check-timing.cjs --strict` before rendering (via render-and-composite.sh); THEME mode enforces the same timings at compile time instead (make-theme's sequential transcript matcher + verbatim completeness gate — drift is a compile error). Never pack multiple transcript words into one entry (e.g. `"FUTURE OF"` or an `IT` + line-break + `ALL` stack with one start/end) — the second word inherits the first's timestamp and fires early. Split them into separate word entries with their own timings, even if you want them on the same visual line (use CSS `white-space` / natural wrap instead of `<br>`). Creative substitutions where caption text ≠ transcript (e.g. `"15%"` replacing `"fifteen percent"`) are supported — register them in `CREATIVE_SUBS` inside `check-timing.cjs`.
+- **Group windows must envelop their words** — `group.in ≤ min(word.start)` and `group.out ≥ max(word.end)` for every group. If `group.in` is later than a word's start, the word is silently delayed until the container mounts (we've shipped 800ms lag bugs from this). The validator enforces this.
+- **No two caption groups may overlap in both time AND screen region** — overlapping-in-time captions create text-on-text pileups. Options: (a) **spatial separation** — place each group in a non-overlapping vertical band so they can coexist (memory-wall cascade style); (b) **handoff** — set the earlier group's `out` ≤ the next group's `in` so only one is on screen; (c) **deliberate layered typography** — add `"allow_overlap": true` on one of the groups to silence the validator. The validator estimates each group's vertical bbox from its CSS and flags collisions. Pick (a) by default — it's what makes cinematic-cream feel like a poem accumulating, not a subtitle track replacing itself.
+- **Screen-blend fails on bright backgrounds (>180 luminance).** **Cinematic** templates are cream + `screen` and that DNA is **locked** (the plan can't recolour them) → on a bright backdrop they wash out, so pick `ink` (letterpress built FOR bright surfaces) or the `anchor` theme (opaque rail surface) rather than overriding a look.
+- **Don't animate `letter-spacing` or `filter:blur` on word entrance** — inline-block reflow causes line-jumps.
+- **CoreML banned for matting** — the onnxruntime CoreML EP's mixed-precision partitioning corrupted face alpha (observed with the previous RVM engine; don't re-try it). Matting is CPU-only (~2 fps @1080p ≈ 2-3 min per 10s clip; budget for it on long clips).
+
+---
+
+## Dependencies
+
+- **hyperframes**, built (`packages/cli/dist/cli.js`). Scripts auto-resolve the checkout: `HYPERFRAMES_ROOT` env → repo root if this skill ships _inside_ hyperframes → `~/Downloads/hyperframes`. Build with `bun install && bun run build`.
+- **Node-first; two Python touchpoints via `uvx` (no manual installs):** transcription runs WhisperX through `uvx` (word-level timings; falls back per SKILL §transcription), and Theme's `drawon` setpiece shells `python3 scripts/gen-stroke-path.py` at compile time. Everything else runs on the toolchain hyperframes already ships: matting via the hyperframes CLI's **`remove-background`** (u2net_human_seg; weights auto-download once, ~168 MB, to `~/.cache/hyperframes/`), image/alpha math via **`sharp`**, layout/occlusion/overflow via **`puppeteer`**, plus **`ffmpeg`**. The scripts auto-resolve these from the hyperframes checkout — nothing extra to install.
+- **Transcription = WhisperX via `uvx`** (word-level timings + alignment; no manual install — `transcribe.cjs` drives `uvx whisperx`). Falls back to an existing word-level `transcript.json` if present.
+- **Source video** — `matte.cjs` / `transcribe.cjs` auto-resolve `source.mp4` (or glob the clip / read `hyperframes.json`), so `hyperframes init --video X.mp4` needs no manual rename.
+- **fps** — `matte.cjs` extracts at the source's native rate and records `matte.fps`; `render-and-composite.sh` uses that so the matte stays frame-aligned.
+- Matting weights are NOT bundled: `matte.cjs` shells the hyperframes CLI's `remove-background`, which downloads u2net_human_seg (~168 MB, Apache-2.0) once to `~/.cache/hyperframes/background-removal/models/`. First prepare on a fresh machine needs network for that one download.
+
+If a hard dependency is missing, STOP and ask the user — don't silently skip steps.
diff --git a/.claude/skills-media/embedded-captions/assets/brand/CDPR-fankit-terms.txt b/.claude/skills-media/embedded-captions/assets/brand/CDPR-fankit-terms.txt
new file mode 100644
index 000000000..e1f58eddb
--- /dev/null
+++ b/.claude/skills-media/embedded-captions/assets/brand/CDPR-fankit-terms.txt
@@ -0,0 +1,35 @@
+   ______      __                                __      ___   ____  __________
+  / ____/_  __/ /_  ___  _________  __  ______  / /__   |__ \ / __ \/__  /__  /
+ / /   / / / / __ \/ _ \/ ___/ __ \/ / / / __ \/ //_/   __/ // / / /  / /  / / 
+/ /___/ /_/ / /_/ /  __/ /  / /_/ / /_/ / / / / ,<     / __// /_/ /  / /  / /  
+\____/\__, /_.___/\___/_/  / .___/\__,_/_/ /_/_/|_|   /____/\____/  /_/  /_/   
+     /____/               /_/                                                  
+
+---Thanks and Rules---
+
+Thanks for downloading this file! I really appreciate the folks checking out the site and I hope you enjoy using the file or if you just wanted to see what was in it, I hope it meets your expectations! A special thanks also to Eli, Madqueen, & Nikolay for helping me on several of the logos found on this page.
+
+////// It's my duty to remind you that these are not for commercial usage. All of the logos here are the intellectual property of CD Projekt Red and are therefore not to be used in commercial applications at all. Don't sell it or use it in something that you are going to sell! If you do, you will be subject to the copyright laws of your country and may face legal action and fees. 
+
+Also, companies: Stop using these as a substitute for official files! I'm flattered, but there are differences between my logos and the official ones that can break your contract. In the event that you do, however, remember that you must attribute me, AS PER MY AGREEMENT WITH CD PROJEKT RED. I've got a direct line to legal as they were kind enough to allow me to have this project in the first place. Just use theirs, it's easier and much more official!
+
+CD PROJEKT�, Cyberpunk�, Cyberpunk 2077� are registered trademarks of CD PROJEKT S.A. � 2020 CD PROJEKT S.A. All rights reserved. All other copyrights and trademarks are the property of their respective owners. //////
+
+Use these logos to add a bit of realism to your fan pieces as well as any sort of cosplay you're thinking of doing for your favorite Con or event. There are lots of uses out there for these and I hope they come in handy. I always love seeing where these go, so feel free to send a picture our way:
+
+Valency
+Twitter/Instagram: @valencygraphics
+
+Eli
+Twitter/Instagram: @hey_elium
+
+The Madqueen
+Twitter: @madqueenshow
+Youtube: The Madqueen Show
+
+Nikolay Verin
+Twitter: @nikolayverin
+
+Best of luck, Choombas!
+
+Valency--- replica font: free for personal use (Lyon ArtZ replica via hyperpix); samurai theme is already fan-kit non-commercial
diff --git a/.claude/skills-media/embedded-captions/assets/brand/CyberpunkReplica.ttf b/.claude/skills-media/embedded-captions/assets/brand/CyberpunkReplica.ttf
new file mode 100644
index 000000000..fc7ff7415
Binary files /dev/null and b/.claude/skills-media/embedded-captions/assets/brand/CyberpunkReplica.ttf differ
diff --git a/.claude/skills-media/embedded-captions/assets/brand/cyberpunk-widths.json b/.claude/skills-media/embedded-captions/assets/brand/cyberpunk-widths.json
new file mode 100644
index 000000000..f1aeb66fd
--- /dev/null
+++ b/.claude/skills-media/embedded-captions/assets/brand/cyberpunk-widths.json
@@ -0,0 +1,115 @@
+{
+  "unitsPerEm": 1000,
+  "fontBBox": [0.033, -0.3, 1.117, 0.876],
+  "ascent": 0.876,
+  "descent": -0.3,
+  "widths": {
+    "a": 0.713,
+    "b": 0.621,
+    "c": 0.79,
+    "d": 0.7,
+    "e": 0.81,
+    "f": 0.747,
+    "g": 0.664,
+    "h": 0.501,
+    "i": 0.61,
+    "j": 0.614,
+    "k": 0.786,
+    "l": 0.749,
+    "m": 0.728,
+    "n": 0.656,
+    "o": 0.555,
+    "p": 0.713,
+    "q": 0.541,
+    "r": 0.712,
+    "s": 0.502,
+    "t": 0.713,
+    "u": 0.575,
+    "v": 0.64,
+    "w": 0.696,
+    "x": 0.53,
+    "y": 0.588,
+    "z": 0.664,
+    "A": 1.032,
+    "B": 0.888,
+    "C": 1.166,
+    "D": 1.025,
+    "E": 1.174,
+    "F": 1.097,
+    "G": 0.966,
+    "H": 0.708,
+    "I": 0.879,
+    "J": 0.884,
+    "K": 1.155,
+    "L": 1.104,
+    "M": 1.074,
+    "N": 0.955,
+    "O": 0.799,
+    "P": 1.041,
+    "Q": 0.779,
+    "R": 1.033,
+    "S": 0.719,
+    "T": 1.038,
+    "U": 0.821,
+    "V": 0.945,
+    "W": 1.019,
+    "X": 0.761,
+    "Y": 0.867,
+    "Z": 0.96,
+    " ": 0.26
+  },
+  "bounds": {
+    "a": [0.058, -0.131, 0.656, 0.285],
+    "b": [0.058, -0.151, 0.564, 0.504],
+    "c": [0.058, -0.184, 0.731, 0.139],
+    "d": [0.058, -0.159, 0.642, 0.448],
+    "e": [0.058, -0.148, 0.752, 0.292],
+    "f": [0.058, -0.142, 0.69, 0.401],
+    "g": [0.057, -0.16, 0.607, 0.316],
+    "h": [0.057, -0.172, 0.443, 0.441],
+    "i": [0.057, -0.167, 0.553, 0.29],
+    "j": [0.058, -0.158, 0.557, 0.266],
+    "k": [0.057, -0.212, 0.728, 0.354],
+    "l": [0.059, -0.185, 0.692, 0.276],
+    "m": [0.057, -0.286, 0.671, 0.308],
+    "n": [0.058, -0.167, 0.598, 0.252],
+    "o": [0.057, -0.168, 0.499, 0.226],
+    "p": [0.058, -0.258, 0.656, 0.239],
+    "q": [0.056, -0.227, 0.487, 0.245],
+    "r": [0.058, -0.081, 0.655, 0.32],
+    "s": [0.058, -0.153, 0.446, 0.245],
+    "t": [0.057, -0.161, 0.655, 0.276],
+    "u": [0.058, -0.167, 0.518, 0.312],
+    "v": [0.051, -0.209, 0.582, 0.458],
+    "w": [0.057, -0.173, 0.639, 0.391],
+    "x": [0.058, -0.258, 0.472, 0.208],
+    "y": [0.057, -0.292, 0.532, 0.22],
+    "z": [0.058, -0.158, 0.606, 0.295],
+    "A": [0.058, -0.161, 0.974, 0.484],
+    "B": [0.058, -0.161, 0.834, 0.846],
+    "C": [0.058, -0.158, 1.108, 0.342],
+    "D": [0.057, -0.155, 0.967, 0.79],
+    "E": [0.058, -0.164, 1.117, 0.508],
+    "F": [0.054, -0.167, 1.039, 0.67],
+    "G": [0.057, -0.164, 0.908, 0.573],
+    "H": [0.057, -0.161, 0.649, 0.794],
+    "I": [0.057, -0.167, 0.821, 0.529],
+    "J": [0.057, -0.161, 0.826, 0.5],
+    "K": [0.057, -0.262, 1.098, 0.621],
+    "L": [0.056, -0.153, 1.048, 0.567],
+    "M": [0.057, -0.286, 1.017, 0.645],
+    "N": [0.057, -0.197, 0.897, 0.445],
+    "O": [0.057, -0.198, 0.742, 0.408],
+    "P": [0.058, -0.208, 0.984, 0.567],
+    "Q": [0.056, -0.173, 0.72, 0.567],
+    "R": [0.058, -0.166, 0.976, 0.445],
+    "S": [0.057, -0.129, 0.661, 0.494],
+    "T": [0.057, -0.151, 0.983, 0.525],
+    "U": [0.058, -0.159, 0.766, 0.583],
+    "V": [0.057, -0.16, 0.887, 0.876],
+    "W": [0.057, -0.228, 0.962, 0.644],
+    "X": [0.058, -0.233, 0.703, 0.496],
+    "Y": [0.058, -0.3, 0.809, 0.496],
+    "Z": [0.056, -0.154, 0.903, 0.545]
+  }
+}
diff --git a/.claude/skills-media/embedded-captions/assets/fonts/char-widths.json b/.claude/skills-media/embedded-captions/assets/fonts/char-widths.json
new file mode 100644
index 000000000..55b375101
--- /dev/null
+++ b/.claude/skills-media/embedded-captions/assets/fonts/char-widths.json
@@ -0,0 +1,2211 @@
+{
+  "_meta": "Measured per-char advance widths (em @100px) + fontBoundingBox ascent/descent for the bundled families in modes/standard/fonts/fonts.css. Generated once via headless-Chrome canvas measureText over the SAME woff2 faces the renderer embeds (kerning ignored, ~<=3px/word). Used by make-theme.cjs to BAKE pixel-exact word geometry at compile time so font-load timing in the render browser can never skew aim. Regenerate if fonts.css changes.",
+  "Anton": {
+    "ascent": 1.18,
+    "descent": 0.33,
+    "widths": {
+      "0": 0.4941,
+      "1": 0.3306,
+      "2": 0.4941,
+      "3": 0.4941,
+      "4": 0.4941,
+      "5": 0.4941,
+      "6": 0.4941,
+      "7": 0.4941,
+      "8": 0.4941,
+      "9": 0.4941,
+      "A": 0.4854,
+      "B": 0.4785,
+      "C": 0.4741,
+      "D": 0.4932,
+      "E": 0.4116,
+      "F": 0.3989,
+      "G": 0.4849,
+      "H": 0.499,
+      "I": 0.2266,
+      "J": 0.4663,
+      "K": 0.4722,
+      "L": 0.3975,
+      "M": 0.7461,
+      "N": 0.498,
+      "O": 0.4863,
+      "P": 0.4722,
+      "Q": 0.4937,
+      "R": 0.4766,
+      "S": 0.4614,
+      "T": 0.3955,
+      "U": 0.4736,
+      "V": 0.4692,
+      "W": 0.7119,
+      "X": 0.4839,
+      "Y": 0.4463,
+      "Z": 0.4102,
+      "a": 0.4834,
+      "b": 0.5015,
+      "c": 0.4912,
+      "d": 0.498,
+      "e": 0.4883,
+      "f": 0.2803,
+      "g": 0.5039,
+      "h": 0.5054,
+      "i": 0.2432,
+      "j": 0.2627,
+      "k": 0.4907,
+      "l": 0.248,
+      "m": 0.7583,
+      "n": 0.4985,
+      "o": 0.4966,
+      "p": 0.5015,
+      "q": 0.498,
+      "r": 0.3467,
+      "s": 0.4746,
+      "t": 0.3052,
+      "u": 0.499,
+      "v": 0.4609,
+      "w": 0.6963,
+      "x": 0.459,
+      "y": 0.4609,
+      "z": 0.3857,
+      ".": 0.2285,
+      ",": 0.2363,
+      "!": 0.229,
+      "?": 0.4922,
+      "'": 0.2139,
+      "\u2019": 0.2319,
+      "\"": 0.4287,
+      ":": 0.2417,
+      ";": 0.2451,
+      "-": 0.311,
+      "\u2013": 0.311,
+      "\u2014": 0.563,
+      "(": 0.291,
+      ")": 0.291,
+      "[": 0.3179,
+      "]": 0.3179,
+      "/": 0.4053,
+      "&amp;": 0.52,
+      "%": 1.0566,
+      "+": 0.3555,
+      "#": 0.5464,
+      "@": 0.8643,
+      "*": 0.4521,
+      " ": 0.2344
+    }
+  },
+  "Audiowide": {
+    "ascent": 0.99,
+    "descent": 0.29,
+    "widths": {
+      "0": 0.9253,
+      "1": 0.3545,
+      "2": 0.7524,
+      "3": 0.7192,
+      "4": 0.7734,
+      "5": 0.7505,
+      "6": 0.7441,
+      "7": 0.6411,
+      "8": 0.7461,
+      "9": 0.7441,
+      "A": 0.8345,
+      "B": 0.8091,
+      "C": 0.7471,
+      "D": 0.8232,
+      "E": 0.7554,
+      "F": 0.7383,
+      "G": 0.8232,
+      "H": 0.8491,
+      "I": 0.2764,
+      "J": 0.7344,
+      "K": 0.8135,
+      "L": 0.7363,
+      "M": 0.9624,
+      "N": 0.8472,
+      "O": 0.8604,
+      "P": 0.8062,
+      "Q": 0.8604,
+      "R": 0.8271,
+      "S": 0.7783,
+      "T": 0.7261,
+      "U": 0.8335,
+      "V": 0.7725,
+      "W": 1.0024,
+      "X": 0.7871,
+      "Y": 0.7813,
+      "Z": 0.7134,
+      "a": 0.6533,
+      "b": 0.6904,
+      "c": 0.6162,
+      "d": 0.7002,
+      "e": 0.6533,
+      "f": 0.5503,
+      "g": 0.6904,
+      "h": 0.7031,
+      "i": 0.2505,
+      "j": 0.2505,
+      "k": 0.6914,
+      "l": 0.3135,
+      "m": 0.8735,
+      "n": 0.6963,
+      "o": 0.6821,
+      "p": 0.6904,
+      "q": 0.6904,
+      "r": 0.5454,
+      "s": 0.5991,
+      "t": 0.5635,
+      "u": 0.6963,
+      "v": 0.6753,
+      "w": 0.9131,
+      "x": 0.6953,
+      "y": 0.7031,
+      "z": 0.6011,
+      ".": 0.2051,
+      ",": 0.2251,
+      "!": 0.2603,
+      "?": 0.6655,
+      "'": 0.2124,
+      "\u2019": 0.2305,
+      "\"": 0.3823,
+      ":": 0.2432,
+      ";": 0.2515,
+      "-": 0.5713,
+      "\u2013": 0.5132,
+      "\u2014": 0.9131,
+      "(": 0.4272,
+      ")": 0.4272,
+      "[": 0.3652,
+      "]": 0.3652,
+      "/": 0.6592,
+      "&amp;": 0.6714,
+      "%": 0.8662,
+      "+": 0.5391,
+      "#": 0.7295,
+      "@": 0.6611,
+      "*": 0.5425,
+      " ": 0.3252
+    }
+  },
+  "Baloo 2": {
+    "ascent": 1.08,
+    "descent": 0.52,
+    "widths": {
+      "0": 0.583,
+      "1": 0.357,
+      "2": 0.508,
+      "3": 0.506,
+      "4": 0.548,
+      "5": 0.538,
+      "6": 0.55,
+      "7": 0.458,
+      "8": 0.569,
+      "9": 0.552,
+      "A": 0.592,
+      "B": 0.599,
+      "C": 0.588,
+      "D": 0.652,
+      "E": 0.531,
+      "F": 0.517,
+      "G": 0.639,
+      "H": 0.654,
+      "I": 0.262,
+      "J": 0.385,
+      "K": 0.566,
+      "L": 0.501,
+      "M": 0.78,
+      "N": 0.66,
+      "O": 0.689,
+      "P": 0.567,
+      "Q": 0.69,
+      "R": 0.589,
+      "S": 0.523,
+      "T": 0.523,
+      "U": 0.649,
+      "V": 0.583,
+      "W": 0.803,
+      "X": 0.591,
+      "Y": 0.55,
+      "Z": 0.557,
+      "a": 0.499,
+      "b": 0.549,
+      "c": 0.478,
+      "d": 0.547,
+      "e": 0.519,
+      "f": 0.399,
+      "g": 0.537,
+      "h": 0.551,
+      "i": 0.241,
+      "j": 0.243,
+      "k": 0.487,
+      "l": 0.246,
+      "m": 0.816,
+      "n": 0.55,
+      "o": 0.553,
+      "p": 0.546,
+      "q": 0.546,
+      "r": 0.382,
+      "s": 0.447,
+      "t": 0.372,
+      "u": 0.55,
+      "v": 0.495,
+      "w": 0.729,
+      "x": 0.482,
+      "y": 0.489,
+      "z": 0.469,
+      ".": 0.141,
+      ",": 0.145,
+      "!": 0.25,
+      "?": 0.459,
+      "'": 0.139,
+      "\u2019": 0.127,
+      "\"": 0.27,
+      ":": 0.189,
+      ";": 0.202,
+      "-": 0.389,
+      "\u2013": 0.534,
+      "\u2014": 0.767,
+      "(": 0.254,
+      ")": 0.254,
+      "[": 0.268,
+      "]": 0.269,
+      "/": 0.305,
+      "&amp;": 0.637,
+      "%": 0.772,
+      "+": 0.548,
+      "#": 0.667,
+      "@": 1,
+      "*": 0.299,
+      " ": 0.2
+    }
+  },
+  "Bangers": {
+    "ascent": 0.88,
+    "descent": 0.18,
+    "widths": {
+      "0": 0.474,
+      "1": 0.32,
+      "2": 0.467,
+      "3": 0.458,
+      "4": 0.459,
+      "5": 0.45,
+      "6": 0.478,
+      "7": 0.339,
+      "8": 0.518,
+      "9": 0.489,
+      "A": 0.433,
+      "B": 0.428,
+      "C": 0.414,
+      "D": 0.441,
+      "E": 0.341,
+      "F": 0.341,
+      "G": 0.499,
+      "H": 0.442,
+      "I": 0.2,
+      "J": 0.279,
+      "K": 0.462,
+      "L": 0.302,
+      "M": 0.619,
+      "N": 0.453,
+      "O": 0.493,
+      "P": 0.379,
+      "Q": 0.525,
+      "R": 0.444,
+      "S": 0.43,
+      "T": 0.362,
+      "U": 0.419,
+      "V": 0.379,
+      "W": 0.601,
+      "X": 0.411,
+      "Y": 0.384,
+      "Z": 0.431,
+      "a": 0.433,
+      "b": 0.428,
+      "c": 0.414,
+      "d": 0.441,
+      "e": 0.341,
+      "f": 0.341,
+      "g": 0.499,
+      "h": 0.441,
+      "i": 0.202,
+      "j": 0.279,
+      "k": 0.462,
+      "l": 0.302,
+      "m": 0.619,
+      "n": 0.452,
+      "o": 0.493,
+      "p": 0.379,
+      "q": 0.525,
+      "r": 0.444,
+      "s": 0.43,
+      "t": 0.362,
+      "u": 0.419,
+      "v": 0.379,
+      "w": 0.601,
+      "x": 0.411,
+      "y": 0.384,
+      "z": 0.431,
+      ".": 0.209,
+      ",": 0.197,
+      "!": 0.263,
+      "?": 0.438,
+      "'": 0.202,
+      "\u2019": 0.202,
+      "\"": 0.421,
+      ":": 0.195,
+      ";": 0.262,
+      "-": 0.36,
+      "\u2013": 0.36,
+      "\u2014": 0.52,
+      "(": 0.334,
+      ")": 0.331,
+      "[": 0.319,
+      "]": 0.313,
+      "/": 0.551,
+      "&amp;": 0.535,
+      "%": 0.799,
+      "+": 0.33,
+      "#": 0.626,
+      "@": 0.987,
+      "*": 0.423,
+      " ": 0.195
+    }
+  },
+  "Bodoni Moda": {
+    "ascent": 1.13,
+    "descent": 0.4,
+    "widths": {
+      "0": 0.6195,
+      "1": 0.4345,
+      "2": 0.5495,
+      "3": 0.5205,
+      "4": 0.5945,
+      "5": 0.5,
+      "6": 0.5595,
+      "7": 0.5045,
+      "8": 0.5495,
+      "9": 0.5595,
+      "A": 0.772,
+      "B": 0.656,
+      "C": 0.7155,
+      "D": 0.726,
+      "E": 0.6185,
+      "F": 0.5985,
+      "G": 0.739,
+      "H": 0.762,
+      "I": 0.387,
+      "J": 0.45,
+      "K": 0.705,
+      "L": 0.6035,
+      "M": 0.8725,
+      "N": 0.7735,
+      "O": 0.75,
+      "P": 0.6385,
+      "Q": 0.75,
+      "R": 0.7215,
+      "S": 0.576,
+      "T": 0.6735,
+      "U": 0.726,
+      "V": 0.774,
+      "W": 1.0045,
+      "X": 0.7665,
+      "Y": 0.7335,
+      "Z": 0.577,
+      "a": 0.523,
+      "b": 0.6085,
+      "c": 0.5095,
+      "d": 0.6085,
+      "e": 0.5235,
+      "f": 0.398,
+      "g": 0.5955,
+      "h": 0.5955,
+      "i": 0.303,
+      "j": 0.305,
+      "k": 0.604,
+      "l": 0.333,
+      "m": 0.8605,
+      "n": 0.5955,
+      "o": 0.561,
+      "p": 0.6085,
+      "q": 0.6085,
+      "r": 0.442,
+      "s": 0.439,
+      "t": 0.3355,
+      "u": 0.598,
+      "v": 0.542,
+      "w": 0.7615,
+      "x": 0.577,
+      "y": 0.5465,
+      "z": 0.467,
+      ".": 0.1995,
+      ",": 0.2145,
+      "!": 0.3175,
+      "?": 0.5495,
+      "'": 0.1995,
+      "\u2019": 0.2145,
+      "\"": 0.3695,
+      ":": 0.1975,
+      ";": 0.2145,
+      "-": 0.3595,
+      "\u2013": 0.5405,
+      "\u2014": 0.7845,
+      "(": 0.3615,
+      ")": 0.3615,
+      "[": 0.3245,
+      "]": 0.3245,
+      "/": 0.528,
+      "&amp;": 0.8035,
+      "%": 1,
+      "+": 0.5295,
+      "#": 0.638,
+      "@": 1.0095,
+      "*": 0.632,
+      " ": 0.25
+    }
+  },
+  "Caveat": {
+    "ascent": 0.96,
+    "descent": 0.3,
+    "widths": {
+      "0": 0.45,
+      "1": 0.45,
+      "2": 0.45,
+      "3": 0.45,
+      "4": 0.45,
+      "5": 0.45,
+      "6": 0.45,
+      "7": 0.45,
+      "8": 0.45,
+      "9": 0.45,
+      "A": 0.502,
+      "B": 0.52,
+      "C": 0.472,
+      "D": 0.578,
+      "E": 0.529,
+      "F": 0.454,
+      "G": 0.487,
+      "H": 0.563,
+      "I": 0.4,
+      "J": 0.306,
+      "K": 0.498,
+      "L": 0.426,
+      "M": 0.72,
+      "N": 0.599,
+      "O": 0.496,
+      "P": 0.464,
+      "Q": 0.502,
+      "R": 0.537,
+      "S": 0.486,
+      "T": 0.458,
+      "U": 0.482,
+      "V": 0.49,
+      "W": 0.72,
+      "X": 0.524,
+      "Y": 0.504,
+      "Z": 0.522,
+      "a": 0.437,
+      "b": 0.435,
+      "c": 0.355,
+      "d": 0.393,
+      "e": 0.325,
+      "f": 0.291,
+      "g": 0.355,
+      "h": 0.464,
+      "i": 0.187,
+      "j": 0.204,
+      "k": 0.365,
+      "l": 0.169,
+      "m": 0.56,
+      "n": 0.45,
+      "o": 0.353,
+      "p": 0.378,
+      "q": 0.377,
+      "r": 0.36,
+      "s": 0.341,
+      "t": 0.331,
+      "u": 0.37,
+      "v": 0.331,
+      "w": 0.517,
+      "x": 0.343,
+      "y": 0.341,
+      "z": 0.315,
+      ".": 0.198,
+      ",": 0.198,
+      "!": 0.21,
+      "?": 0.374,
+      "'": 0.117,
+      "\u2019": 0.117,
+      "\"": 0.237,
+      ":": 0.198,
+      ";": 0.198,
+      "-": 0.326,
+      "\u2013": 0.446,
+      "\u2014": 0.566,
+      "(": 0.33,
+      ")": 0.33,
+      "[": 0.33,
+      "]": 0.33,
+      "/": 0.33,
+      "&amp;": 0.564,
+      "%": 0.6,
+      "+": 0.446,
+      "#": 0.559,
+      "@": 0.643,
+      "*": 0.363,
+      " ": 0.242
+    }
+  },
+  "Chakra Petch": {
+    "ascent": 0.99,
+    "descent": 0.31,
+    "widths": {
+      "0": 0.636,
+      "1": 0.366,
+      "2": 0.558,
+      "3": 0.587,
+      "4": 0.563,
+      "5": 0.59,
+      "6": 0.606,
+      "7": 0.506,
+      "8": 0.622,
+      "9": 0.611,
+      "A": 0.629,
+      "B": 0.654,
+      "C": 0.639,
+      "D": 0.672,
+      "E": 0.59,
+      "F": 0.56,
+      "G": 0.66,
+      "H": 0.682,
+      "I": 0.256,
+      "J": 0.564,
+      "K": 0.628,
+      "L": 0.545,
+      "M": 0.785,
+      "N": 0.681,
+      "O": 0.684,
+      "P": 0.63,
+      "Q": 0.684,
+      "R": 0.659,
+      "S": 0.621,
+      "T": 0.568,
+      "U": 0.684,
+      "V": 0.634,
+      "W": 0.868,
+      "X": 0.62,
+      "Y": 0.606,
+      "Z": 0.576,
+      "a": 0.559,
+      "b": 0.585,
+      "c": 0.542,
+      "d": 0.587,
+      "e": 0.568,
+      "f": 0.384,
+      "g": 0.587,
+      "h": 0.578,
+      "i": 0.253,
+      "j": 0.268,
+      "k": 0.538,
+      "l": 0.243,
+      "m": 0.845,
+      "n": 0.576,
+      "o": 0.577,
+      "p": 0.587,
+      "q": 0.58,
+      "r": 0.393,
+      "s": 0.52,
+      "t": 0.398,
+      "u": 0.575,
+      "v": 0.491,
+      "w": 0.714,
+      "x": 0.501,
+      "y": 0.577,
+      "z": 0.482,
+      ".": 0.217,
+      ",": 0.217,
+      "!": 0.254,
+      "?": 0.542,
+      "'": 0.216,
+      "\u2019": 0.215,
+      "\"": 0.38,
+      ":": 0.215,
+      ";": 0.215,
+      "-": 0.412,
+      "\u2013": 0.628,
+      "\u2014": 0.735,
+      "(": 0.322,
+      ")": 0.322,
+      "[": 0.321,
+      "]": 0.321,
+      "/": 0.484,
+      "&amp;": 0.646,
+      "%": 0.842,
+      "+": 0.548,
+      "#": 0.697,
+      "@": 0.819,
+      "*": 0.343,
+      " ": 0.253
+    }
+  },
+  "Cinzel": {
+    "ascent": 0.98,
+    "descent": 0.37,
+    "widths": {
+      "0": 0.596,
+      "1": 0.344,
+      "2": 0.553,
+      "3": 0.503,
+      "4": 0.583,
+      "5": 0.498,
+      "6": 0.56,
+      "7": 0.502,
+      "8": 0.552,
+      "9": 0.56,
+      "A": 0.712,
+      "B": 0.586,
+      "C": 0.76,
+      "D": 0.807,
+      "E": 0.577,
+      "F": 0.541,
+      "G": 0.798,
+      "H": 0.813,
+      "I": 0.338,
+      "J": 0.324,
+      "K": 0.657,
+      "L": 0.562,
+      "M": 0.931,
+      "N": 0.841,
+      "O": 0.838,
+      "P": 0.577,
+      "Q": 0.837,
+      "R": 0.677,
+      "S": 0.475,
+      "T": 0.618,
+      "U": 0.785,
+      "V": 0.74,
+      "W": 0.982,
+      "X": 0.662,
+      "Y": 0.661,
+      "Z": 0.651,
+      "a": 0.663,
+      "b": 0.57,
+      "c": 0.705,
+      "d": 0.76,
+      "e": 0.546,
+      "f": 0.523,
+      "g": 0.742,
+      "h": 0.746,
+      "i": 0.336,
+      "j": 0.309,
+      "k": 0.624,
+      "l": 0.536,
+      "m": 0.878,
+      "n": 0.779,
+      "o": 0.774,
+      "p": 0.553,
+      "q": 0.777,
+      "r": 0.627,
+      "s": 0.462,
+      "t": 0.578,
+      "u": 0.7,
+      "v": 0.663,
+      "w": 0.899,
+      "x": 0.626,
+      "y": 0.64,
+      "z": 0.608,
+      ".": 0.179,
+      ",": 0.185,
+      "!": 0.23,
+      "?": 0.413,
+      "'": 0.17,
+      "\u2019": 0.193,
+      "\"": 0.315,
+      ":": 0.179,
+      ";": 0.185,
+      "-": 0.38,
+      "\u2013": 0.5,
+      "\u2014": 0.8,
+      "(": 0.338,
+      ")": 0.338,
+      "[": 0.332,
+      "]": 0.332,
+      "/": 0.406,
+      "&amp;": 0.646,
+      "%": 0.684,
+      "+": 0.481,
+      "#": 0.536,
+      "@": 0.977,
+      "*": 0.386,
+      " ": 0.25
+    }
+  },
+  "Cormorant Garamond": {
+    "ascent": 0.92,
+    "descent": 0.29,
+    "widths": {
+      "0": 0.477,
+      "1": 0.332,
+      "2": 0.402,
+      "3": 0.389,
+      "4": 0.451,
+      "5": 0.409,
+      "6": 0.465,
+      "7": 0.429,
+      "8": 0.489,
+      "9": 0.465,
+      "A": 0.702,
+      "B": 0.558,
+      "C": 0.686,
+      "D": 0.691,
+      "E": 0.537,
+      "F": 0.509,
+      "G": 0.713,
+      "H": 0.759,
+      "I": 0.332,
+      "J": 0.322,
+      "K": 0.65,
+      "L": 0.533,
+      "M": 0.835,
+      "N": 0.727,
+      "O": 0.766,
+      "P": 0.543,
+      "Q": 0.766,
+      "R": 0.673,
+      "S": 0.491,
+      "T": 0.634,
+      "U": 0.698,
+      "V": 0.666,
+      "W": 0.931,
+      "X": 0.652,
+      "Y": 0.609,
+      "Z": 0.595,
+      "a": 0.419,
+      "b": 0.51,
+      "c": 0.411,
+      "d": 0.512,
+      "e": 0.408,
+      "f": 0.305,
+      "g": 0.445,
+      "h": 0.499,
+      "i": 0.273,
+      "j": 0.257,
+      "k": 0.491,
+      "l": 0.258,
+      "m": 0.763,
+      "n": 0.517,
+      "o": 0.479,
+      "p": 0.511,
+      "q": 0.488,
+      "r": 0.364,
+      "s": 0.338,
+      "t": 0.338,
+      "u": 0.493,
+      "v": 0.434,
+      "w": 0.671,
+      "x": 0.439,
+      "y": 0.435,
+      "z": 0.405,
+      ".": 0.197,
+      ",": 0.222,
+      "!": 0.247,
+      "?": 0.329,
+      "'": 0.14,
+      "\u2019": 0.192,
+      "\"": 0.283,
+      ":": 0.197,
+      ";": 0.224,
+      "-": 0.323,
+      "\u2013": 0.515,
+      "\u2014": 0.83,
+      "(": 0.309,
+      ")": 0.309,
+      "[": 0.274,
+      "]": 0.274,
+      "/": 0.341,
+      "&amp;": 0.697,
+      "%": 0.574,
+      "+": 0.398,
+      "#": 0.526,
+      "@": 0.719,
+      "*": 0.448,
+      " ": 0.234
+    }
+  },
+  "Creepster": {
+    "ascent": 0.95,
+    "descent": 0.22,
+    "widths": {
+      "0": 0.457,
+      "1": 0.3105,
+      "2": 0.4355,
+      "3": 0.4277,
+      "4": 0.4219,
+      "5": 0.4277,
+      "6": 0.4141,
+      "7": 0.3975,
+      "8": 0.4287,
+      "9": 0.4355,
+      "A": 0.4453,
+      "B": 0.4678,
+      "C": 0.4307,
+      "D": 0.4541,
+      "E": 0.4199,
+      "F": 0.4238,
+      "G": 0.46,
+      "H": 0.457,
+      "I": 0.3076,
+      "J": 0.374,
+      "K": 0.4922,
+      "L": 0.3574,
+      "M": 0.6563,
+      "N": 0.5166,
+      "O": 0.4561,
+      "P": 0.4434,
+      "Q": 0.4775,
+      "R": 0.4629,
+      "S": 0.4111,
+      "T": 0.4082,
+      "U": 0.4854,
+      "V": 0.4297,
+      "W": 0.582,
+      "X": 0.4521,
+      "Y": 0.4023,
+      "Z": 0.3818,
+      "a": 0.4316,
+      "b": 0.4492,
+      "c": 0.4336,
+      "d": 0.4297,
+      "e": 0.4033,
+      "f": 0.3975,
+      "g": 0.4336,
+      "h": 0.4854,
+      "i": 0.3281,
+      "j": 0.3672,
+      "k": 0.4541,
+      "l": 0.3174,
+      "m": 0.6553,
+      "n": 0.5088,
+      "o": 0.4697,
+      "p": 0.4629,
+      "q": 0.4805,
+      "r": 0.459,
+      "s": 0.3984,
+      "t": 0.4502,
+      "u": 0.4893,
+      "v": 0.4531,
+      "w": 0.6348,
+      "x": 0.4619,
+      "y": 0.4316,
+      "z": 0.3916,
+      ".": 0.165,
+      ",": 0.1484,
+      "!": 0.2021,
+      "?": 0.3848,
+      "'": 0.1416,
+      "\u2019": 0.1387,
+      "\"": 0.2764,
+      ":": 0.165,
+      ";": 0.1514,
+      "-": 0.3896,
+      "\u2013": 0.3896,
+      "\u2014": 0.5732,
+      "(": 0.2246,
+      ")": 0.2266,
+      "[": 0.2256,
+      "]": 0.2217,
+      "/": 0.3369,
+      "&amp;": 0.4648,
+      "%": 0.5498,
+      "+": 0.4014,
+      "#": 0.5859,
+      "@": 0.6865,
+      "*": 0.4121,
+      " ": 0.2354
+    }
+  },
+  "Fredoka": {
+    "ascent": 0.97,
+    "descent": 0.24,
+    "widths": {
+      "0": 0.587,
+      "1": 0.392,
+      "2": 0.598,
+      "3": 0.587,
+      "4": 0.544,
+      "5": 0.516,
+      "6": 0.536,
+      "7": 0.554,
+      "8": 0.559,
+      "9": 0.536,
+      "A": 0.704,
+      "B": 0.638,
+      "C": 0.667,
+      "D": 0.692,
+      "E": 0.623,
+      "F": 0.631,
+      "G": 0.708,
+      "H": 0.687,
+      "I": 0.217,
+      "J": 0.545,
+      "K": 0.591,
+      "L": 0.558,
+      "M": 0.825,
+      "N": 0.708,
+      "O": 0.732,
+      "P": 0.601,
+      "Q": 0.811,
+      "R": 0.624,
+      "S": 0.554,
+      "T": 0.664,
+      "U": 0.713,
+      "V": 0.724,
+      "W": 0.965,
+      "X": 0.694,
+      "Y": 0.638,
+      "Z": 0.575,
+      "a": 0.574,
+      "b": 0.582,
+      "c": 0.508,
+      "d": 0.586,
+      "e": 0.54,
+      "f": 0.378,
+      "g": 0.565,
+      "h": 0.535,
+      "i": 0.224,
+      "j": 0.24,
+      "k": 0.489,
+      "l": 0.281,
+      "m": 0.826,
+      "n": 0.557,
+      "o": 0.56,
+      "p": 0.574,
+      "q": 0.568,
+      "r": 0.406,
+      "s": 0.459,
+      "t": 0.376,
+      "u": 0.543,
+      "v": 0.537,
+      "w": 0.763,
+      "x": 0.494,
+      "y": 0.526,
+      "z": 0.531,
+      ".": 0.211,
+      ",": 0.225,
+      "!": 0.231,
+      "?": 0.491,
+      "'": 0.181,
+      "\u2019": 0.157,
+      "\"": 0.335,
+      ":": 0.234,
+      ";": 0.213,
+      "-": 0.426,
+      "\u2013": 0.556,
+      "\u2014": 0.686,
+      "(": 0.377,
+      ")": 0.377,
+      "[": 0.342,
+      "]": 0.342,
+      "/": 0.517,
+      "&amp;": 0.713,
+      "%": 0.823,
+      "+": 0.537,
+      "#": 0.796,
+      "@": 0.829,
+      "*": 0.494,
+      " ": 0.254
+    }
+  },
+  "Inter": {
+    "ascent": 0.97,
+    "descent": 0.24,
+    "widths": {
+      "0": 0.6309,
+      "1": 0.4067,
+      "2": 0.6099,
+      "3": 0.6177,
+      "4": 0.646,
+      "5": 0.5933,
+      "6": 0.6201,
+      "7": 0.5659,
+      "8": 0.6187,
+      "9": 0.6201,
+      "A": 0.6899,
+      "B": 0.6543,
+      "C": 0.7305,
+      "D": 0.7217,
+      "E": 0.6011,
+      "F": 0.5903,
+      "G": 0.7461,
+      "H": 0.7432,
+      "I": 0.2686,
+      "J": 0.5708,
+      "K": 0.6719,
+      "L": 0.5654,
+      "M": 0.9033,
+      "N": 0.7534,
+      "O": 0.7646,
+      "P": 0.6387,
+      "Q": 0.7646,
+      "R": 0.6436,
+      "S": 0.6416,
+      "T": 0.6455,
+      "U": 0.7441,
+      "V": 0.6899,
+      "W": 0.9854,
+      "X": 0.6821,
+      "Y": 0.6787,
+      "Z": 0.6289,
+      "a": 0.5615,
+      "b": 0.6123,
+      "c": 0.5713,
+      "d": 0.6123,
+      "e": 0.583,
+      "f": 0.3701,
+      "g": 0.6133,
+      "h": 0.5913,
+      "i": 0.2422,
+      "j": 0.2422,
+      "k": 0.5488,
+      "l": 0.2422,
+      "m": 0.876,
+      "n": 0.5908,
+      "o": 0.5996,
+      "p": 0.6123,
+      "q": 0.6123,
+      "r": 0.3765,
+      "s": 0.5278,
+      "t": 0.3271,
+      "u": 0.5913,
+      "v": 0.562,
+      "w": 0.8184,
+      "x": 0.5459,
+      "y": 0.562,
+      "z": 0.5522,
+      ".": 0.2881,
+      ",": 0.2881,
+      "!": 0.2876,
+      "?": 0.5112,
+      "'": 0.2998,
+      "\u2019": 0.2607,
+      "\"": 0.4658,
+      ":": 0.2881,
+      ";": 0.3018,
+      "-": 0.46,
+      "\u2013": 0.5,
+      "\u2014": 1,
+      "(": 0.3647,
+      ")": 0.3647,
+      "[": 0.3647,
+      "]": 0.3647,
+      "/": 0.3604,
+      "&amp;": 0.644,
+      "%": 0.9819,
+      "+": 0.6616,
+      "#": 0.6333,
+      "@": 0.9658,
+      "*": 0.501,
+      " ": 0.2813
+    }
+  },
+  "Monoton": {
+    "ascent": 1.16,
+    "descent": 0.4,
+    "widths": {
+      "0": 0.8433,
+      "1": 0.4263,
+      "2": 0.583,
+      "3": 0.6123,
+      "4": 0.6221,
+      "5": 0.6919,
+      "6": 0.7817,
+      "7": 0.6318,
+      "8": 0.8086,
+      "9": 0.7822,
+      "A": 0.9365,
+      "B": 0.8623,
+      "C": 0.8521,
+      "D": 0.8862,
+      "E": 0.7065,
+      "F": 0.6831,
+      "G": 0.9082,
+      "H": 0.9014,
+      "I": 0.3389,
+      "J": 0.4346,
+      "K": 0.8159,
+      "L": 0.605,
+      "M": 0.9209,
+      "N": 0.8779,
+      "O": 0.9336,
+      "P": 0.8506,
+      "Q": 0.938,
+      "R": 0.8438,
+      "S": 0.6821,
+      "T": 0.5913,
+      "U": 0.9053,
+      "V": 0.9409,
+      "W": 1.1616,
+      "X": 0.8765,
+      "Y": 0.7891,
+      "Z": 0.854,
+      "a": 0.832,
+      "b": 0.7207,
+      "c": 0.7368,
+      "d": 0.833,
+      "e": 0.667,
+      "f": 0.6255,
+      "g": 0.8271,
+      "h": 0.8306,
+      "i": 0.3379,
+      "j": 0.3936,
+      "k": 0.8018,
+      "l": 0.583,
+      "m": 1.168,
+      "n": 0.7871,
+      "o": 0.8335,
+      "p": 0.7817,
+      "q": 0.7881,
+      "r": 0.8315,
+      "s": 0.6831,
+      "t": 0.5884,
+      "u": 0.7959,
+      "v": 0.8555,
+      "w": 1.1299,
+      "x": 0.79,
+      "y": 0.7334,
+      "z": 0.7148,
+      ".": 0.2554,
+      ",": 0.2529,
+      "!": 0.3364,
+      "?": 0.6938,
+      "'": 0.2578,
+      "\u2019": 0.2515,
+      "\"": 0.5386,
+      ":": 0.2627,
+      ";": 0.2617,
+      "-": 0.4736,
+      "\u2013": 0.4736,
+      "\u2014": 0.6152,
+      "(": 0.4106,
+      ")": 0.4087,
+      "[": 0.3208,
+      "]": 0.3198,
+      "/": 0.4478,
+      "&amp;": 1.0298,
+      "%": 1.5049,
+      "+": 0.6011,
+      "#": 1.0146,
+      "@": 1.0762,
+      "*": 0.6646,
+      " ": 0.1084
+    }
+  },
+  "Orbitron": {
+    "ascent": 1.01,
+    "descent": 0.24,
+    "widths": {
+      "0": 0.834,
+      "1": 0.391,
+      "2": 0.83,
+      "3": 0.826,
+      "4": 0.73,
+      "5": 0.83,
+      "6": 0.82,
+      "7": 0.66,
+      "8": 0.834,
+      "9": 0.828,
+      "A": 0.836,
+      "B": 0.832,
+      "C": 0.822,
+      "D": 0.834,
+      "E": 0.766,
+      "F": 0.723,
+      "G": 0.83,
+      "H": 0.851,
+      "I": 0.214,
+      "J": 0.78,
+      "K": 0.797,
+      "L": 0.779,
+      "M": 0.928,
+      "N": 0.832,
+      "O": 0.828,
+      "P": 0.791,
+      "Q": 0.884,
+      "R": 0.825,
+      "S": 0.822,
+      "T": 0.759,
+      "U": 0.828,
+      "V": 1.003,
+      "W": 1.179,
+      "X": 0.812,
+      "Y": 0.806,
+      "Z": 0.821,
+      "a": 0.694,
+      "b": 0.667,
+      "c": 0.695,
+      "d": 0.667,
+      "e": 0.692,
+      "f": 0.407,
+      "g": 0.683,
+      "h": 0.668,
+      "i": 0.208,
+      "j": 0.239,
+      "k": 0.646,
+      "l": 0.302,
+      "m": 0.978,
+      "n": 0.696,
+      "o": 0.692,
+      "p": 0.664,
+      "q": 0.664,
+      "r": 0.512,
+      "s": 0.686,
+      "t": 0.41,
+      "u": 0.695,
+      "v": 0.79,
+      "w": 1.071,
+      "x": 0.692,
+      "y": 0.685,
+      "z": 0.698,
+      ".": 0.214,
+      ",": 0.193,
+      "!": 0.22,
+      "?": 0.678,
+      "'": 0.224,
+      "\u2019": 0.166,
+      "\"": 0.372,
+      ":": 0.214,
+      ";": 0.193,
+      "-": 0.517,
+      "\u2013": 0.708,
+      "\u2014": 0.822,
+      "(": 0.277,
+      ")": 0.278,
+      "[": 0.275,
+      "]": 0.276,
+      "/": 0.521,
+      "&amp;": 0.938,
+      "%": 0.966,
+      "+": 0.433,
+      "#": 0.797,
+      "@": 0.832,
+      "*": 0.491,
+      " ": 0.272
+    }
+  },
+  "Permanent Marker": {
+    "ascent": 1.11,
+    "descent": 0.32,
+    "widths": {
+      "0": 0.6865,
+      "1": 0.3223,
+      "2": 0.6504,
+      "3": 0.5615,
+      "4": 0.582,
+      "5": 0.5801,
+      "6": 0.501,
+      "7": 0.5762,
+      "8": 0.5371,
+      "9": 0.5293,
+      "A": 0.7021,
+      "B": 0.6865,
+      "C": 0.6113,
+      "D": 0.5889,
+      "E": 0.627,
+      "F": 0.5752,
+      "G": 0.7891,
+      "H": 0.6953,
+      "I": 0.5156,
+      "J": 0.6689,
+      "K": 0.7764,
+      "L": 0.6328,
+      "M": 0.9736,
+      "N": 0.6846,
+      "O": 0.7441,
+      "P": 0.6396,
+      "Q": 0.7441,
+      "R": 0.6465,
+      "S": 0.5762,
+      "T": 0.6074,
+      "U": 0.6953,
+      "V": 0.584,
+      "W": 0.9941,
+      "X": 0.623,
+      "Y": 0.4932,
+      "Z": 0.6641,
+      "a": 0.5811,
+      "b": 0.5732,
+      "c": 0.5137,
+      "d": 0.4971,
+      "e": 0.5215,
+      "f": 0.4551,
+      "g": 0.6523,
+      "h": 0.582,
+      "i": 0.3203,
+      "j": 0.5342,
+      "k": 0.6455,
+      "l": 0.5332,
+      "m": 0.8145,
+      "n": 0.5645,
+      "o": 0.6289,
+      "p": 0.5244,
+      "q": 0.625,
+      "r": 0.541,
+      "s": 0.4639,
+      "t": 0.4795,
+      "u": 0.585,
+      "v": 0.4854,
+      "w": 0.8252,
+      "x": 0.5068,
+      "y": 0.4004,
+      "z": 0.5479,
+      ".": 0.2285,
+      ",": 0.2041,
+      "!": 0.2607,
+      "?": 0.5566,
+      "'": 0.2656,
+      "\u2019": 0.1992,
+      "\"": 0.4922,
+      ":": 0.2412,
+      ";": 0.2451,
+      "-": 0.6094,
+      "\u2013": 0.5889,
+      "\u2014": 0.8789,
+      "(": 0.3613,
+      ")": 0.3613,
+      "[": 0.3877,
+      "]": 0.4033,
+      "/": 0.4014,
+      "&amp;": 0.5996,
+      "%": 0.6436,
+      "+": 0.5791,
+      "#": 0.7031,
+      "@": 0.7324,
+      "*": 0.6738,
+      " ": 0.3701
+    }
+  },
+  "Press Start 2P": {
+    "ascent": 1,
+    "descent": 0,
+    "widths": {
+      "0": 1,
+      "1": 1,
+      "2": 1,
+      "3": 1,
+      "4": 1,
+      "5": 1,
+      "6": 1,
+      "7": 1,
+      "8": 1,
+      "9": 1,
+      "A": 1,
+      "B": 1,
+      "C": 1,
+      "D": 1,
+      "E": 1,
+      "F": 1,
+      "G": 1,
+      "H": 1,
+      "I": 1,
+      "J": 1,
+      "K": 1,
+      "L": 1,
+      "M": 1,
+      "N": 1,
+      "O": 1,
+      "P": 1,
+      "Q": 1,
+      "R": 1,
+      "S": 1,
+      "T": 1,
+      "U": 1,
+      "V": 1,
+      "W": 1,
+      "X": 1,
+      "Y": 1,
+      "Z": 1,
+      "a": 1,
+      "b": 1,
+      "c": 1,
+      "d": 1,
+      "e": 1,
+      "f": 1,
+      "g": 1,
+      "h": 1,
+      "i": 1,
+      "j": 1,
+      "k": 1,
+      "l": 1,
+      "m": 1,
+      "n": 1,
+      "o": 1,
+      "p": 1,
+      "q": 1,
+      "r": 1,
+      "s": 1,
+      "t": 1,
+      "u": 1,
+      "v": 1,
+      "w": 1,
+      "x": 1,
+      "y": 1,
+      "z": 1,
+      ".": 1,
+      ",": 1,
+      "!": 1,
+      "?": 1,
+      "'": 1,
+      "\u2019": 1,
+      "\"": 1,
+      ":": 1,
+      ";": 1,
+      "-": 1,
+      "\u2013": 1,
+      "\u2014": 1,
+      "(": 1,
+      ")": 1,
+      "[": 1,
+      "]": 1,
+      "/": 1,
+      "&amp;": 1,
+      "%": 1,
+      "+": 1,
+      "#": 1,
+      "@": 1,
+      "*": 1,
+      " ": 1
+    }
+  },
+  "Rajdhani": {
+    "ascent": 0.93,
+    "descent": 0.35,
+    "widths": {
+      "0": 0.52,
+      "1": 0.322,
+      "2": 0.482,
+      "3": 0.5,
+      "4": 0.526,
+      "5": 0.489,
+      "6": 0.505,
+      "7": 0.395,
+      "8": 0.526,
+      "9": 0.505,
+      "A": 0.54,
+      "B": 0.549,
+      "C": 0.541,
+      "D": 0.556,
+      "E": 0.48,
+      "F": 0.457,
+      "G": 0.541,
+      "H": 0.572,
+      "I": 0.241,
+      "J": 0.505,
+      "K": 0.538,
+      "L": 0.451,
+      "M": 0.705,
+      "N": 0.581,
+      "O": 0.553,
+      "P": 0.526,
+      "Q": 0.56,
+      "R": 0.537,
+      "S": 0.555,
+      "T": 0.427,
+      "U": 0.554,
+      "V": 0.506,
+      "W": 0.797,
+      "X": 0.514,
+      "Y": 0.5,
+      "Z": 0.493,
+      "a": 0.507,
+      "b": 0.51,
+      "c": 0.399,
+      "d": 0.51,
+      "e": 0.492,
+      "f": 0.318,
+      "g": 0.51,
+      "h": 0.512,
+      "i": 0.221,
+      "j": 0.221,
+      "k": 0.443,
+      "l": 0.221,
+      "m": 0.777,
+      "n": 0.512,
+      "o": 0.5,
+      "p": 0.51,
+      "q": 0.507,
+      "r": 0.323,
+      "s": 0.433,
+      "t": 0.349,
+      "u": 0.512,
+      "v": 0.431,
+      "w": 0.686,
+      "x": 0.427,
+      "y": 0.463,
+      "z": 0.418,
+      ".": 0.194,
+      ",": 0.194,
+      "!": 0.237,
+      "?": 0.471,
+      "'": 0.186,
+      "\u2019": 0.181,
+      "\"": 0.337,
+      ":": 0.194,
+      ";": 0.194,
+      "-": 0.312,
+      "\u2013": 0.405,
+      "\u2014": 0.565,
+      "(": 0.29,
+      ")": 0.29,
+      "[": 0.297,
+      "]": 0.297,
+      "/": 0.4,
+      "&amp;": 0.603,
+      "%": 0.724,
+      "+": 0.535,
+      "#": 0.675,
+      "@": 0.751,
+      "*": 0.404,
+      " ": 0.254
+    }
+  },
+  "Saira Stencil One": {
+    "ascent": 1.13,
+    "descent": 0.44,
+    "widths": {
+      "0": 0.66,
+      "1": 0.402,
+      "2": 0.614,
+      "3": 0.61,
+      "4": 0.654,
+      "5": 0.628,
+      "6": 0.662,
+      "7": 0.576,
+      "8": 0.676,
+      "9": 0.662,
+      "A": 0.687,
+      "B": 0.67,
+      "C": 0.568,
+      "D": 0.68,
+      "E": 0.616,
+      "F": 0.576,
+      "G": 0.66,
+      "H": 0.716,
+      "I": 0.33,
+      "J": 0.425,
+      "K": 0.683,
+      "L": 0.541,
+      "M": 0.885,
+      "N": 0.716,
+      "O": 0.698,
+      "P": 0.645,
+      "Q": 0.698,
+      "R": 0.674,
+      "S": 0.612,
+      "T": 0.581,
+      "U": 0.69,
+      "V": 0.663,
+      "W": 0.996,
+      "X": 0.678,
+      "Y": 0.633,
+      "Z": 0.618,
+      "a": 0.558,
+      "b": 0.578,
+      "c": 0.465,
+      "d": 0.578,
+      "e": 0.557,
+      "f": 0.437,
+      "g": 0.578,
+      "h": 0.588,
+      "i": 0.299,
+      "j": 0.299,
+      "k": 0.576,
+      "l": 0.299,
+      "m": 0.857,
+      "n": 0.588,
+      "o": 0.572,
+      "p": 0.578,
+      "q": 0.578,
+      "r": 0.425,
+      "s": 0.498,
+      "t": 0.427,
+      "u": 0.586,
+      "v": 0.551,
+      "w": 0.846,
+      "x": 0.566,
+      "y": 0.588,
+      "z": 0.534,
+      ".": 0.33,
+      ",": 0.33,
+      "!": 0.363,
+      "?": 0.521,
+      "'": 0.3,
+      "\u2019": 0.32,
+      "\"": 0.525,
+      ":": 0.33,
+      ";": 0.33,
+      "-": 0.379,
+      "\u2013": 0.48,
+      "\u2014": 0.88,
+      "(": 0.374,
+      ")": 0.374,
+      "[": 0.399,
+      "]": 0.399,
+      "/": 0.429,
+      "&amp;": 0.739,
+      "%": 0.898,
+      "+": 0.54,
+      "#": 0.7,
+      "@": 0.944,
+      "*": 0.454,
+      " ": 0.26
+    }
+  },
+  "Shippori Mincho": {
+    "ascent": 1.16,
+    "descent": 0.29,
+    "widths": {
+      "0": 0.52,
+      "1": 0.487,
+      "2": 0.511,
+      "3": 0.523,
+      "4": 0.503,
+      "5": 0.502,
+      "6": 0.532,
+      "7": 0.545,
+      "8": 0.539,
+      "9": 0.532,
+      "A": 0.762,
+      "B": 0.716,
+      "C": 0.716,
+      "D": 0.782,
+      "E": 0.72,
+      "F": 0.686,
+      "G": 0.744,
+      "H": 0.889,
+      "I": 0.408,
+      "J": 0.437,
+      "K": 0.812,
+      "L": 0.712,
+      "M": 1.013,
+      "N": 0.825,
+      "O": 0.771,
+      "P": 0.655,
+      "Q": 0.8,
+      "R": 0.758,
+      "S": 0.651,
+      "T": 0.743,
+      "U": 0.815,
+      "V": 0.769,
+      "W": 1.022,
+      "X": 0.745,
+      "Y": 0.754,
+      "Z": 0.593,
+      "a": 0.55,
+      "b": 0.579,
+      "c": 0.509,
+      "d": 0.577,
+      "e": 0.543,
+      "f": 0.355,
+      "g": 0.592,
+      "h": 0.628,
+      "i": 0.317,
+      "j": 0.239,
+      "k": 0.586,
+      "l": 0.318,
+      "m": 0.956,
+      "n": 0.633,
+      "o": 0.576,
+      "p": 0.606,
+      "q": 0.57,
+      "r": 0.437,
+      "s": 0.499,
+      "t": 0.327,
+      "u": 0.604,
+      "v": 0.558,
+      "w": 0.783,
+      "x": 0.576,
+      "y": 0.557,
+      "z": 0.48,
+      ".": 0.249,
+      ",": 0.25,
+      "!": 0.288,
+      "?": 0.444,
+      "'": 0.198,
+      "\u2019": 0.203,
+      "\"": 0.389,
+      ":": 0.209,
+      ";": 0.21,
+      "-": 0.271,
+      "\u2013": 0.536,
+      "\u2014": 1,
+      "(": 0.363,
+      ")": 0.363,
+      "[": 0.438,
+      "]": 0.437,
+      "/": 0.443,
+      "&amp;": 0.82,
+      "%": 0.938,
+      "+": 0.605,
+      "#": 0.676,
+      "@": 0.906,
+      "*": 0.441,
+      " ": 0.258
+    }
+  },
+  "Sora": {
+    "ascent": 0.97,
+    "descent": 0.29,
+    "widths": {
+      "0": 0.743,
+      "1": 0.42,
+      "2": 0.618,
+      "3": 0.614,
+      "4": 0.642,
+      "5": 0.623,
+      "6": 0.659,
+      "7": 0.574,
+      "8": 0.637,
+      "9": 0.659,
+      "A": 0.756,
+      "B": 0.68,
+      "C": 0.795,
+      "D": 0.791,
+      "E": 0.6,
+      "F": 0.56,
+      "G": 0.831,
+      "H": 0.804,
+      "I": 0.314,
+      "J": 0.64,
+      "K": 0.678,
+      "L": 0.544,
+      "M": 0.92,
+      "N": 0.849,
+      "O": 0.865,
+      "P": 0.64,
+      "Q": 0.865,
+      "R": 0.7,
+      "S": 0.689,
+      "T": 0.594,
+      "U": 0.789,
+      "V": 0.708,
+      "W": 1.043,
+      "X": 0.696,
+      "Y": 0.652,
+      "Z": 0.654,
+      "a": 0.575,
+      "b": 0.689,
+      "c": 0.606,
+      "d": 0.689,
+      "e": 0.612,
+      "f": 0.379,
+      "g": 0.675,
+      "h": 0.64,
+      "i": 0.308,
+      "j": 0.317,
+      "k": 0.573,
+      "l": 0.286,
+      "m": 0.968,
+      "n": 0.64,
+      "o": 0.676,
+      "p": 0.689,
+      "q": 0.689,
+      "r": 0.41,
+      "s": 0.536,
+      "t": 0.426,
+      "u": 0.628,
+      "v": 0.559,
+      "w": 0.848,
+      "x": 0.56,
+      "y": 0.547,
+      "z": 0.488,
+      ".": 0.262,
+      ",": 0.262,
+      "!": 0.296,
+      "?": 0.552,
+      "'": 0.262,
+      "\u2019": 0.244,
+      "\"": 0.43,
+      ":": 0.262,
+      ";": 0.262,
+      "-": 0.504,
+      "\u2013": 0.512,
+      "\u2014": 0.9,
+      "(": 0.376,
+      ")": 0.376,
+      "[": 0.376,
+      "]": 0.376,
+      "/": 0.344,
+      "&amp;": 0.688,
+      "%": 0.85,
+      "+": 0.59,
+      "#": 0.692,
+      "@": 1.122,
+      "*": 0.567,
+      " ": 0.228
+    }
+  },
+  "Space Grotesk": {
+    "ascent": 0.98,
+    "descent": 0.29,
+    "widths": {
+      "0": 0.641,
+      "1": 0.418,
+      "2": 0.603,
+      "3": 0.604,
+      "4": 0.625,
+      "5": 0.599,
+      "6": 0.612,
+      "7": 0.564,
+      "8": 0.623,
+      "9": 0.612,
+      "A": 0.63,
+      "B": 0.661,
+      "C": 0.642,
+      "D": 0.663,
+      "E": 0.563,
+      "F": 0.54,
+      "G": 0.66,
+      "H": 0.656,
+      "I": 0.244,
+      "J": 0.594,
+      "K": 0.61,
+      "L": 0.546,
+      "M": 0.865,
+      "N": 0.664,
+      "O": 0.669,
+      "P": 0.601,
+      "Q": 0.669,
+      "R": 0.631,
+      "S": 0.613,
+      "T": 0.588,
+      "U": 0.666,
+      "V": 0.619,
+      "W": 0.875,
+      "X": 0.638,
+      "Y": 0.61,
+      "Z": 0.577,
+      "a": 0.575,
+      "b": 0.644,
+      "c": 0.598,
+      "d": 0.644,
+      "e": 0.592,
+      "f": 0.442,
+      "g": 0.642,
+      "h": 0.613,
+      "i": 0.245,
+      "j": 0.247,
+      "k": 0.538,
+      "l": 0.245,
+      "m": 0.86,
+      "n": 0.613,
+      "o": 0.618,
+      "p": 0.644,
+      "q": 0.644,
+      "r": 0.377,
+      "s": 0.527,
+      "t": 0.46,
+      "u": 0.612,
+      "v": 0.539,
+      "w": 0.801,
+      "x": 0.593,
+      "y": 0.612,
+      "z": 0.521,
+      ".": 0.253,
+      ",": 0.251,
+      "!": 0.253,
+      "?": 0.58,
+      "'": 0.251,
+      "\u2019": 0.251,
+      "\"": 0.425,
+      ":": 0.253,
+      ";": 0.253,
+      "-": 0.455,
+      "\u2013": 0.607,
+      "\u2014": 0.911,
+      "(": 0.379,
+      ")": 0.377,
+      "[": 0.335,
+      "]": 0.335,
+      "/": 0.37,
+      "&amp;": 0.604,
+      "%": 0.772,
+      "+": 0.62,
+      "#": 0.628,
+      "@": 1.026,
+      "*": 0.52,
+      " ": 0.257
+    }
+  },
+  "Special Elite": {
+    "ascent": 0.7,
+    "descent": 0.3,
+    "widths": {
+      "0": 0.6108,
+      "1": 0.5698,
+      "2": 0.5737,
+      "3": 0.5571,
+      "4": 0.6123,
+      "5": 0.5376,
+      "6": 0.5884,
+      "7": 0.5552,
+      "8": 0.5986,
+      "9": 0.5845,
+      "A": 0.5498,
+      "B": 0.604,
+      "C": 0.5791,
+      "D": 0.6226,
+      "E": 0.6387,
+      "F": 0.6055,
+      "G": 0.6152,
+      "H": 0.6528,
+      "I": 0.4951,
+      "J": 0.541,
+      "K": 0.5825,
+      "L": 0.6025,
+      "M": 0.6978,
+      "N": 0.6279,
+      "O": 0.6167,
+      "P": 0.5532,
+      "Q": 0.6021,
+      "R": 0.6367,
+      "S": 0.5889,
+      "T": 0.5942,
+      "U": 0.6216,
+      "V": 0.6113,
+      "W": 0.6436,
+      "X": 0.582,
+      "Y": 0.561,
+      "Z": 0.5923,
+      "a": 0.5654,
+      "b": 0.5654,
+      "c": 0.5474,
+      "d": 0.603,
+      "e": 0.5439,
+      "f": 0.4731,
+      "g": 0.583,
+      "h": 0.6167,
+      "i": 0.5684,
+      "j": 0.4155,
+      "k": 0.6206,
+      "l": 0.5405,
+      "m": 0.6636,
+      "n": 0.6323,
+      "o": 0.5835,
+      "p": 0.5874,
+      "q": 0.5679,
+      "r": 0.5791,
+      "s": 0.5195,
+      "t": 0.5103,
+      "u": 0.6387,
+      "v": 0.605,
+      "w": 0.6787,
+      "x": 0.6606,
+      "y": 0.5928,
+      "z": 0.5288,
+      ".": 0.3496,
+      ",": 0.3364,
+      "!": 0.2764,
+      "?": 0.4702,
+      "'": 0.1963,
+      "\u2019": 0.2642,
+      "\"": 0.3521,
+      ":": 0.3433,
+      ";": 0.3286,
+      "-": 0.6362,
+      "\u2013": 0.6118,
+      "\u2014": 1.1138,
+      "(": 0.2793,
+      ")": 0.2817,
+      "[": 0.312,
+      "]": 0.3125,
+      "/": 0.5571,
+      "&amp;": 0.6763,
+      "%": 0.667,
+      "+": 0.4961,
+      "#": 0.5547,
+      "@": 0.665,
+      "*": 0.5229,
+      " ": 0.293
+    }
+  },
+  "Teko": {
+    "ascent": 0.96,
+    "descent": 0.48,
+    "widths": {
+      "0": 0.39,
+      "1": 0.235,
+      "2": 0.328,
+      "3": 0.355,
+      "4": 0.363,
+      "5": 0.358,
+      "6": 0.382,
+      "7": 0.291,
+      "8": 0.389,
+      "9": 0.378,
+      "A": 0.385,
+      "B": 0.409,
+      "C": 0.377,
+      "D": 0.412,
+      "E": 0.343,
+      "F": 0.332,
+      "G": 0.382,
+      "H": 0.417,
+      "I": 0.21,
+      "J": 0.334,
+      "K": 0.384,
+      "L": 0.301,
+      "M": 0.516,
+      "N": 0.41,
+      "O": 0.393,
+      "P": 0.379,
+      "Q": 0.393,
+      "R": 0.396,
+      "S": 0.362,
+      "T": 0.31,
+      "U": 0.397,
+      "V": 0.364,
+      "W": 0.609,
+      "X": 0.373,
+      "Y": 0.361,
+      "Z": 0.313,
+      "a": 0.36,
+      "b": 0.36,
+      "c": 0.352,
+      "d": 0.36,
+      "e": 0.36,
+      "f": 0.222,
+      "g": 0.36,
+      "h": 0.365,
+      "i": 0.178,
+      "j": 0.178,
+      "k": 0.357,
+      "l": 0.178,
+      "m": 0.549,
+      "n": 0.365,
+      "o": 0.37,
+      "p": 0.36,
+      "q": 0.36,
+      "r": 0.238,
+      "s": 0.328,
+      "t": 0.219,
+      "u": 0.365,
+      "v": 0.317,
+      "w": 0.543,
+      "x": 0.342,
+      "y": 0.342,
+      "z": 0.292,
+      ".": 0.165,
+      ",": 0.165,
+      "!": 0.209,
+      "?": 0.342,
+      "'": 0.161,
+      "\u2019": 0.166,
+      "\"": 0.292,
+      ":": 0.165,
+      ";": 0.165,
+      "-": 0.315,
+      "\u2013": 0.42,
+      "\u2014": 0.536,
+      "(": 0.264,
+      ")": 0.264,
+      "[": 0.311,
+      "]": 0.311,
+      "/": 0.39,
+      "&amp;": 0.462,
+      "%": 0.641,
+      "+": 0.408,
+      "#": 0.496,
+      "@": 0.696,
+      "*": 0.321,
+      " ": 0.145
+    }
+  },
+  "VT323": {
+    "ascent": 0.8,
+    "descent": 0.2,
+    "widths": {
+      "0": 0.4,
+      "1": 0.4,
+      "2": 0.4,
+      "3": 0.4,
+      "4": 0.4,
+      "5": 0.4,
+      "6": 0.4,
+      "7": 0.4,
+      "8": 0.4,
+      "9": 0.4,
+      "A": 0.4,
+      "B": 0.4,
+      "C": 0.4,
+      "D": 0.4,
+      "E": 0.4,
+      "F": 0.4,
+      "G": 0.4,
+      "H": 0.4,
+      "I": 0.4,
+      "J": 0.4,
+      "K": 0.4,
+      "L": 0.4,
+      "M": 0.4,
+      "N": 0.4,
+      "O": 0.4,
+      "P": 0.4,
+      "Q": 0.4,
+      "R": 0.4,
+      "S": 0.4,
+      "T": 0.4,
+      "U": 0.4,
+      "V": 0.4,
+      "W": 0.4,
+      "X": 0.4,
+      "Y": 0.4,
+      "Z": 0.4,
+      "a": 0.4,
+      "b": 0.4,
+      "c": 0.4,
+      "d": 0.4,
+      "e": 0.4,
+      "f": 0.4,
+      "g": 0.4,
+      "h": 0.4,
+      "i": 0.4,
+      "j": 0.4,
+      "k": 0.4,
+      "l": 0.4,
+      "m": 0.4,
+      "n": 0.4,
+      "o": 0.4,
+      "p": 0.4,
+      "q": 0.4,
+      "r": 0.4,
+      "s": 0.4,
+      "t": 0.4,
+      "u": 0.4,
+      "v": 0.4,
+      "w": 0.4,
+      "x": 0.4,
+      "y": 0.4,
+      "z": 0.4,
+      ".": 0.4,
+      ",": 0.4,
+      "!": 0.4,
+      "?": 0.4,
+      "'": 0.4,
+      "\u2019": 0.4,
+      "\"": 0.4,
+      ":": 0.4,
+      ";": 0.4,
+      "-": 0.4,
+      "\u2013": 0.4,
+      "\u2014": 0.4,
+      "(": 0.4,
+      ")": 0.4,
+      "[": 0.4,
+      "]": 0.4,
+      "/": 0.4,
+      "&amp;": 0.4,
+      "%": 0.4,
+      "+": 0.4,
+      "#": 0.4,
+      "@": 0.4,
+      "*": 0.4,
+      " ": 0.4
+    }
+  }
+}
diff --git a/.claude/skills-media/embedded-captions/assets/strokefonts/HersheyScript1.svg b/.claude/skills-media/embedded-captions/assets/strokefonts/HersheyScript1.svg
new file mode 100644
index 000000000..fe470218d
--- /dev/null
+++ b/.claude/skills-media/embedded-captions/assets/strokefonts/HersheyScript1.svg
@@ -0,0 +1,242 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
+
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">
+
+<metadata>
+Font name: Hershey Script 1-stroke
+
+Originally prepared in 2011 and converted to SVG fonts
+in 2019 by Windell H. Oskay, www.evilmadscientist.com
+
+Contents adapted from emergent.unpythonic.net/software/hershey
+ by way of "Hershey Fonts in SVG" by Marty McGuire
+ http://www.thingiverse.com/thing:6168
+ 
+-------------------------------------------------------------------
+The Hershey Fonts are a set of vector fonts with a liberal license.
+
+USE RESTRICTION:
+    This distribution of the Hershey Fonts may be used by anyone for
+    any purpose, commercial or otherwise, providing that:
+        1. The following acknowledgements must be distributed with
+            the font data:
+            - The Hershey Fonts were originally created by Dr.
+                A. V. Hershey while working at the U. S.
+                National Bureau of Standards.
+            - The format of the Font data in this distribution
+                was originally created by
+                    James Hurt
+                    Cognition, Inc.
+                    900 Technology Park Drive
+                    Billerica, MA 01821
+                    (mit-eddie!ci-dandelion!hurt)
+        2. The font data in this distribution may be converted into
+            any other format *EXCEPT* the format distributed by
+            the U.S. NTIS where each point is described
+            in eight bytes as "xxx yyy:", where xxx and yyy are
+            the coordinate values as ASCII numbers.
+
+</metadata>
+<defs>
+<font id="HersheyScript1" horiz-adv-x="378" >
+<font-face
+font-family="Hershey Script 1-stroke"
+units-per-em="1000"
+ascent="800"
+descent="-200"
+cap-height="500"
+x-height="300"
+/>
+<missing-glyph horiz-adv-x="378" />
+<glyph unicode=" " glyph-name="space" horiz-adv-x="378" />
+<glyph unicode="!" glyph-name="exclam" horiz-adv-x="346" d="M 353 662 L 321 630 L 258 252 M 353 630 L 258 252 M 353 662 L 384 630 L 258 252 M 195 63 L 164 31.5 L 195 0 L 227 31.5 L 195 63" />
+<glyph unicode="&#x22;" glyph-name="quotedbl" horiz-adv-x="567" d="M 252 662 L 189 441 M 284 662 L 189 441 M 536 662 L 472 441 M 567 662 L 472 441" />
+<glyph unicode="#" glyph-name="numbersign" horiz-adv-x="662" d="M 378 788 L 158 -220 M 567 788 L 346 -220 M 158 378 L 598 378 M 126 189 L 567 189" />
+<glyph unicode="$" glyph-name="dollar" horiz-adv-x="662" d="M 410 788 L 158 -126 M 567 788 L 315 -126 M 598 536 L 567 504 L 598 472 L 630 504 L 630 536 L 598 598 L 567 630 L 472 662 L 346 662 L 252 630 L 189 567 L 189 504 L 220 441 L 252 410 L 472 284 L 536 220 M 189 504 L 252 441 L 472 315 L 504 284 L 536 220 L 536 126 L 504 63 L 472 31.5 L 378 0 L 252 0 L 158 31.5 L 126 63 L 94.5 126 L 94.5 158 L 126 189 L 158 158 L 126 126" />
+<glyph unicode="%" glyph-name="percent" horiz-adv-x="756" d="M 693 662 L 126 0 M 284 662 L 346 598 L 346 536 L 315 472 L 252 441 L 189 441 L 126 504 L 126 567 L 158 630 L 220 662 L 284 662 L 346 630 L 441 598 L 536 598 L 630 630 L 693 662 M 567 220 L 504 189 L 472 126 L 472 63 L 536 0 L 598 0 L 662 31.5 L 693 94.5 L 693 158 L 630 220 L 567 220" />
+<glyph unicode="&amp;" glyph-name="ampersand" horiz-adv-x="819" d="M 756 410 L 724 378 L 756 346 L 788 378 L 788 410 L 756 441 L 724 441 L 662 410 L 598 346 L 441 94.5 L 378 31.5 L 315 0 L 220 0 L 126 31.5 L 94.5 94.5 L 94.5 158 L 126 220 L 158 252 L 220 284 L 378 346 L 441 378 L 504 441 L 536 504 L 536 567 L 504 630 L 441 662 L 378 630 L 346 567 L 346 472 L 378 284 L 410 189 L 472 94.5 L 536 31.5 L 598 0 L 662 0 L 693 63 L 693 94.5 M 220 0 L 158 31.5 L 126 94.5 L 126 158 L 158 220 L 189 252 L 378 346 M 346 472 L 378 315 L 410 220 L 472 126 L 536 63 L 598 31.5 L 662 31.5 L 693 63" />
+<glyph unicode="&apos;" glyph-name="quotesingle" horiz-adv-x="346" d="M 284 598 L 252 630 L 284 662 L 315 630 L 315 598 L 284 536 L 220 472" />
+<glyph unicode="(" glyph-name="parenleft" horiz-adv-x="472" d="M 504 788 L 378 693 L 284 598 L 220 504 L 158 378 L 126 220 L 126 94.5 L 158 -63 L 189 -158 L 220 -220 M 378 693 L 284 567 L 220 441 L 189 346 L 158 189 L 158 31.5 L 189 -126 L 220 -220" />
+<glyph unicode=")" glyph-name="parenright" horiz-adv-x="472" d="M 315 788 L 346 724 L 378 630 L 410 472 L 410 346 L 378 189 L 315 63 L 252 -31.5 L 158 -126 L 31.5 -220 M 315 788 L 346 693 L 378 536 L 378 378 L 346 220 L 315 126 L 252 0 L 158 -126" />
+<glyph unicode="*" glyph-name="asterisk" horiz-adv-x="536" d="M 346 662 L 346 284 M 189 567 L 504 378 M 504 567 L 189 378" />
+<glyph unicode="+" glyph-name="plus" horiz-adv-x="819" d="M 441 567 L 441 0 M 158 284 L 724 284" />
+<glyph unicode="," glyph-name="comma" horiz-adv-x="346" d="M 126 0 L 94.5 31.5 L 126 63 L 158 31.5 L 158 0 L 126 -63 L 63 -126" />
+<glyph unicode="-" glyph-name="hyphen" horiz-adv-x="819" d="M 158 284 L 724 284" />
+<glyph unicode="." glyph-name="period" horiz-adv-x="315" d="M 189 63 L 158 31.5 L 189 0 L 220 31.5 L 189 63" />
+<glyph unicode="/" glyph-name="slash" horiz-adv-x="693" d="M 788 788 L -31.5 -220" />
+<glyph unicode="0" glyph-name="zero" horiz-adv-x="662" d="M 410 662 L 315 630 L 252 567 L 189 472 L 158 378 L 126 252 L 126 158 L 158 63 L 189 31.5 L 252 0 L 315 0 L 410 31.5 L 472 94.5 L 536 189 L 567 284 L 598 410 L 598 504 L 567 598 L 536 630 L 472 662 L 410 662 M 410 662 L 346 630 L 284 567 L 220 472 L 189 378 L 158 252 L 158 158 L 189 63 L 252 0 M 315 0 L 378 31.5 L 441 94.5 L 504 189 L 536 284 L 567 410 L 567 504 L 536 598 L 472 662" />
+<glyph unicode="1" glyph-name="one" horiz-adv-x="662" d="M 410 536 L 252 0 M 472 662 L 284 0 M 472 662 L 378 567 L 284 504 L 220 472 M 441 567 L 315 504 L 220 472" />
+<glyph unicode="2" glyph-name="two" horiz-adv-x="662" d="M 252 536 L 284 504 L 252 472 L 220 504 L 220 536 L 252 598 L 284 630 L 378 662 L 472 662 L 567 630 L 598 567 L 598 504 L 567 441 L 504 378 L 410 315 L 284 252 L 189 189 L 126 126 L 63 0 M 472 662 L 536 630 L 567 567 L 567 504 L 536 441 L 472 378 L 284 252 M 94.5 63 L 126 94.5 L 189 94.5 L 346 31.5 L 441 31.5 L 504 63 L 536 126 M 189 94.5 L 346 0 L 441 0 L 504 31.5 L 536 126" />
+<glyph unicode="3" glyph-name="three" horiz-adv-x="662" d="M 252 536 L 284 504 L 252 472 L 220 504 L 220 536 L 252 598 L 284 630 L 378 662 L 472 662 L 567 630 L 598 567 L 598 504 L 567 441 L 472 378 L 378 346 M 472 662 L 536 630 L 567 567 L 567 504 L 536 441 L 472 378 M 315 346 L 378 346 L 472 315 L 504 284 L 536 220 L 536 126 L 504 63 L 472 31.5 L 378 0 L 252 0 L 158 31.5 L 126 63 L 94.5 126 L 94.5 158 L 126 189 L 158 158 L 126 126 M 378 346 L 441 315 L 472 284 L 504 220 L 504 126 L 472 63 L 441 31.5 L 378 0" />
+<glyph unicode="4" glyph-name="four" horiz-adv-x="662" d="M 536 630 L 346 0 M 567 662 L 378 0 M 567 662 L 94.5 189 L 598 189" />
+<glyph unicode="5" glyph-name="five" horiz-adv-x="662" d="M 315 662 L 158 346 M 315 662 L 630 662 M 315 630 L 472 630 L 630 662 M 158 346 L 189 378 L 284 410 L 378 410 L 472 378 L 504 346 L 536 284 L 536 189 L 504 94.5 L 441 31.5 L 346 0 L 252 0 L 158 31.5 L 126 63 L 94.5 126 L 94.5 158 L 126 189 L 158 158 L 126 126 M 378 410 L 441 378 L 472 346 L 504 284 L 504 189 L 472 94.5 L 410 31.5 L 346 0" />
+<glyph unicode="6" glyph-name="six" horiz-adv-x="662" d="M 567 567 L 536 536 L 567 504 L 598 536 L 598 567 L 567 630 L 504 662 L 410 662 L 315 630 L 252 567 L 189 472 L 158 378 L 126 252 L 126 126 L 158 63 L 189 31.5 L 252 0 L 346 0 L 441 31.5 L 504 94.5 L 536 158 L 536 252 L 504 315 L 472 346 L 410 378 L 315 378 L 252 346 L 189 284 L 158 220 M 410 662 L 346 630 L 284 567 L 220 472 L 189 378 L 158 252 L 158 94.5 L 189 31.5 M 346 0 L 410 31.5 L 472 94.5 L 504 158 L 504 284 L 472 346" />
+<glyph unicode="7" glyph-name="seven" horiz-adv-x="662" d="M 220 662 L 158 472 M 630 662 L 598 567 L 536 472 L 378 284 L 315 189 L 284 126 L 252 0 M 536 472 L 346 284 L 284 189 L 252 126 L 220 0 M 189 567 L 284 662 L 346 662 L 504 567 M 220 598 L 284 630 L 346 630 L 504 567 L 567 567 L 598 598 L 630 662" />
+<glyph unicode="8" glyph-name="eight" horiz-adv-x="662" d="M 378 662 L 284 630 L 252 598 L 220 536 L 220 441 L 252 378 L 315 346 L 410 346 L 536 378 L 567 410 L 598 472 L 598 567 L 567 630 L 472 662 L 378 662 M 378 662 L 315 630 L 284 598 L 252 536 L 252 441 L 284 378 L 315 346 M 410 346 L 504 378 L 536 410 L 567 472 L 567 567 L 536 630 L 472 662 M 315 346 L 189 315 L 126 252 L 94.5 189 L 94.5 94.5 L 126 31.5 L 220 0 L 346 0 L 472 31.5 L 504 63 L 536 126 L 536 220 L 504 284 L 472 315 L 410 346 M 315 346 L 220 315 L 158 252 L 126 189 L 126 94.5 L 158 31.5 L 220 0 M 346 0 L 441 31.5 L 472 63 L 504 126 L 504 252 L 472 315" />
+<glyph unicode="9" glyph-name="nine" horiz-adv-x="662" d="M 567 441 L 536 378 L 472 315 L 410 284 L 315 284 L 252 315 L 220 346 L 189 410 L 189 504 L 220 567 L 284 630 L 378 662 L 472 662 L 536 630 L 567 598 L 598 536 L 598 410 L 567 284 L 536 189 L 472 94.5 L 410 31.5 L 315 0 L 220 0 L 158 31.5 L 126 94.5 L 126 126 L 158 158 L 189 126 L 158 94.5 M 252 315 L 220 378 L 220 504 L 252 567 L 315 630 L 378 662 M 536 630 L 567 567 L 567 410 L 536 284 L 504 189 L 441 94.5 L 378 31.5 L 315 0" />
+<glyph unicode=":" glyph-name="colon" horiz-adv-x="346" d="M 220 441 L 189 410 L 220 378 L 252 410 L 220 441 M 126 63 L 94.5 31.5 L 126 0 L 158 31.5" />
+<glyph unicode=";" glyph-name="semicolon" horiz-adv-x="346" d="M 220 441 L 189 410 L 220 378 L 252 410 L 220 441 M 126 0 L 94.5 31.5 L 126 63 L 158 31.5 L 158 0 L 126 -63 L 63 -126" />
+<glyph unicode="&#x3c;" glyph-name="less" horiz-adv-x="756" d="M 662 567 L 158 284 L 662 0" />
+<glyph unicode="=" glyph-name="equal" horiz-adv-x="819" d="M 158 378 L 724 378 M 158 189 L 724 189" />
+<glyph unicode="&#x3e;" glyph-name="greater" horiz-adv-x="756" d="M 158 567 L 662 284 L 158 0" />
+<glyph unicode="?" glyph-name="question" horiz-adv-x="662" d="M 252 536 L 284 504 L 252 472 L 220 504 L 220 536 L 252 598 L 284 630 L 378 662 L 504 662 L 598 630 L 630 567 L 630 504 L 598 441 L 567 410 L 378 346 L 315 315 L 315 252 L 346 220 L 410 220 M 504 662 L 567 630 L 598 567 L 598 504 L 567 441 L 536 410 L 472 378 M 284 63 L 252 31.5 L 284 0 L 315 31.5 L 284 63" />
+<glyph unicode="@" glyph-name="at" horiz-adv-x="850" d="M 598 410 L 567 472 L 504 504 L 410 504 L 346 472 L 315 441 L 284 346 L 284 252 L 315 189 L 378 158 L 472 158 L 536 189 L 567 252 M 410 504 L 346 441 L 315 346 L 315 252 L 346 189 L 378 158 M 598 504 L 567 252 L 567 189 L 630 158 L 693 158 L 756 220 L 788 315 L 788 378 L 756 472 L 724 536 L 662 598 L 598 630 L 504 662 L 410 662 L 315 630 L 252 598 L 189 536 L 158 472 L 126 378 L 126 284 L 158 189 L 189 126 L 252 63 L 315 31.5 L 410 0 L 504 0 L 598 31.5 L 662 63 L 693 94.5 M 630 504 L 598 252 L 598 189 L 630 158" />
+<glyph unicode="A" glyph-name="A" horiz-adv-x="630" d="M 31.5 0 L 94.5 31.5 L 189 126 L 284 252 L 410 472 L 504 662 L 504 0 L 472 94.5 L 410 189 L 346 252 L 252 315 L 189 315 L 158 284 L 158 220 L 189 158 L 252 94.5 L 346 31.5 L 441 0 L 598 0" />
+<glyph unicode="B" glyph-name="B" horiz-adv-x="724" d="M 441 598 L 472 567 L 472 472 L 441 346 L 410 252 L 378 189 L 315 94.5 L 252 31.5 L 189 0 L 158 0 L 126 31.5 L 126 126 L 158 284 L 189 378 L 220 441 L 284 536 L 346 598 L 410 630 L 504 662 L 598 662 L 662 630 L 693 567 L 693 504 L 662 441 L 630 410 L 567 378 L 472 346 M 441 346 L 472 346 L 567 315 L 598 284 L 630 220 L 630 126 L 598 63 L 567 31.5 L 504 0 L 410 0 L 346 31.5 L 315 94.5" />
+<glyph unicode="C" glyph-name="C" horiz-adv-x="630" d="M 410 472 L 410 441 L 441 410 L 504 410 L 567 441 L 598 504 L 598 567 L 567 630 L 504 662 L 410 662 L 315 630 L 252 567 L 189 472 L 158 410 L 126 284 L 126 158 L 158 63 L 189 31.5 L 252 0 L 315 0 L 410 31.5 L 472 94.5 L 504 158" />
+<glyph unicode="D" glyph-name="D" horiz-adv-x="724" d="M 441 662 L 378 630 L 346 567 L 315 441 L 284 252 L 252 158 L 220 94.5 L 158 31.5 L 94.5 0 L 31.5 0 L 0 31.5 L 0 94.5 L 31.5 126 L 94.5 126 L 158 94.5 L 220 31.5 L 315 0 L 410 0 L 504 31.5 L 567 94.5 L 630 220 L 662 378 L 662 504 L 630 598 L 598 630 L 536 662 L 441 662 L 378 598 L 378 536 L 410 441 L 472 346 L 536 284 L 630 220 L 693 189" />
+<glyph unicode="E" glyph-name="E" horiz-adv-x="630" d="M 472 536 L 472 504 L 504 472 L 567 472 L 598 504 L 598 567 L 567 630 L 472 662 L 346 662 L 252 630 L 220 567 L 220 472 L 252 410 L 284 378 L 378 346 L 284 346 L 189 315 L 158 284 L 126 220 L 126 126 L 158 63 L 189 31.5 L 284 0 L 378 0 L 472 31.5 L 536 94.5 L 567 158" />
+<glyph unicode="F" glyph-name="F" horiz-adv-x="630" d="M 346 472 L 284 472 L 220 504 L 189 567 L 220 630 L 315 662 L 410 662 L 536 630 L 630 630 L 693 662 M 536 630 L 472 410 L 410 220 L 346 94.5 L 284 31.5 L 220 0 L 158 0 L 94.5 31.5 L 63 94.5 L 63 158 L 94.5 189 L 158 189 L 220 158 M 315 346 L 598 346" />
+<glyph unicode="G" glyph-name="G" horiz-adv-x="724" d="M 31.5 0 L 94.5 31.5 L 220 158 L 315 315 L 346 410 L 378 536 L 378 630 L 346 662 L 315 662 L 284 630 L 252 567 L 252 472 L 284 410 L 346 378 L 472 378 L 567 410 L 598 441 L 630 504 L 630 315 L 598 158 L 567 94.5 L 504 31.5 L 410 0 L 284 0 L 189 31.5 L 126 94.5 L 94.5 158 L 94.5 220" />
+<glyph unicode="H" glyph-name="H" horiz-adv-x="756" d="M 252 441 L 189 472 L 158 536 L 158 567 L 189 630 L 252 662 L 284 662 L 346 630 L 378 567 L 378 504 L 346 378 L 284 189 L 220 63 L 158 0 L 94.5 0 L 63 31.5 L 63 94.5 M 252 284 L 536 378 L 598 410 L 693 472 L 756 536 L 788 598 L 788 630 L 756 662 L 724 662 L 662 598 L 598 472 L 536 284 L 504 126 L 504 31.5 L 536 0 L 567 0 L 630 31.5 L 662 63 L 724 158" />
+<glyph unicode="I" glyph-name="I" horiz-adv-x="536" d="M 472 158 L 410 220 L 346 315 L 315 378 L 284 472 L 284 567 L 315 630 L 346 662 L 410 662 L 441 630 L 472 567 L 472 472 L 441 315 L 378 158 L 346 94.5 L 284 31.5 L 220 0 L 158 0 L 94.5 31.5 L 63 94.5 L 63 158 L 94.5 189 L 158 189 L 220 158" />
+<glyph unicode="J" glyph-name="J" horiz-adv-x="472" d="M 346 -94.5 L 284 0 L 220 158 L 189 346 L 189 536 L 220 630 L 284 662 L 346 662 L 378 630 L 410 536 L 410 441 L 378 284 L 284 0 L 220 -189 L 189 -284 L 158 -346 L 94.5 -378 L 63 -346 L 63 -284 L 94.5 -189 L 158 -94.5 L 220 -31.5 L 315 31.5 L 441 94.5" />
+<glyph unicode="K" glyph-name="K" horiz-adv-x="756" d="M 252 441 L 189 472 L 158 536 L 158 567 L 189 630 L 252 662 L 284 662 L 346 630 L 378 567 L 378 504 L 346 378 L 284 189 L 220 63 L 158 0 L 94.5 0 L 63 31.5 L 63 94.5 M 788 567 L 788 630 L 756 662 L 724 662 L 662 630 L 598 567 L 536 472 L 472 410 L 410 378 L 346 378 M 410 378 L 441 315 L 441 94.5 L 472 31.5 L 504 0 L 536 0 L 598 31.5 L 630 63 L 693 158" />
+<glyph unicode="L" glyph-name="L" horiz-adv-x="598" d="M 158 284 L 220 284 L 346 315 L 441 378 L 504 441 L 536 504 L 536 598 L 504 662 L 441 662 L 410 630 L 378 567 L 346 410 L 315 252 L 284 158 L 252 94.5 L 189 31.5 L 126 0 L 63 0 L 31.5 31.5 L 31.5 94.5 L 63 126 L 126 126 L 189 94.5 L 284 31.5 L 378 0 L 441 0 L 536 31.5 L 598 94.5" />
+<glyph unicode="M" glyph-name="M" horiz-adv-x="1039.5" d="M 189 441 L 126 472 L 94.5 536 L 94.5 567 L 126 630 L 189 662 L 220 662 L 284 630 L 315 567 L 315 504 L 284 346 L 252 220 L 189 0 M 252 220 L 346 472 L 410 598 L 441 630 L 504 662 L 536 662 L 598 630 L 630 567 L 630 504 L 598 346 L 567 220 L 504 0 M 567 220 L 662 472 L 724 598 L 756 630 L 819 662 L 850 662 L 914 630 L 945 567 L 945 504 L 914 346 L 850 126 L 850 31.5 L 882 0 L 914 0 L 976 31.5 L 1008.0 63 L 1071.0 158" />
+<glyph unicode="N" glyph-name="N" horiz-adv-x="756" d="M 189 441 L 126 472 L 94.5 536 L 94.5 567 L 126 630 L 189 662 L 220 662 L 284 630 L 315 567 L 315 504 L 284 346 L 252 220 L 189 0 M 252 220 L 346 472 L 410 598 L 441 630 L 504 662 L 567 662 L 630 630 L 662 567 L 662 504 L 630 346 L 567 126 L 567 31.5 L 598 0 L 630 0 L 693 31.5 L 724 63 L 788 158" />
+<glyph unicode="O" glyph-name="O" horiz-adv-x="662" d="M 410 662 L 315 630 L 252 567 L 189 472 L 158 410 L 126 284 L 126 158 L 158 63 L 189 31.5 L 252 0 L 315 0 L 410 31.5 L 472 94.5 L 536 189 L 567 252 L 598 378 L 598 504 L 567 598 L 536 630 L 472 662 L 410 662 L 346 598 L 346 504 L 378 410 L 441 315 L 504 252 L 598 189 L 662 158" />
+<glyph unicode="P" glyph-name="P" horiz-adv-x="788" d="M 441 598 L 472 567 L 472 472 L 441 346 L 410 252 L 378 189 L 315 94.5 L 252 31.5 L 189 0 L 158 0 L 126 31.5 L 126 126 L 158 284 L 189 378 L 220 441 L 284 536 L 346 598 L 410 630 L 504 662 L 662 662 L 724 630 L 756 598 L 788 536 L 788 441 L 756 378 L 724 346 L 662 315 L 567 315 L 504 346 L 472 378" />
+<glyph unicode="Q" glyph-name="Q" horiz-adv-x="693" d="M 441 472 L 410 410 L 378 378 L 315 346 L 252 346 L 220 410 L 220 472 L 252 567 L 315 630 L 410 662 L 504 662 L 567 630 L 598 567 L 598 441 L 567 346 L 504 252 L 378 126 L 284 63 L 220 31.5 L 126 0 L 63 0 L 31.5 31.5 L 31.5 94.5 L 63 126 L 126 126 L 189 94.5 L 284 31.5 L 378 0 L 472 0 L 567 31.5 L 630 94.5" />
+<glyph unicode="R" glyph-name="R" horiz-adv-x="788" d="M 441 598 L 472 567 L 472 472 L 441 346 L 410 252 L 378 189 L 315 94.5 L 252 31.5 L 189 0 L 158 0 L 126 31.5 L 126 126 L 158 284 L 189 378 L 220 441 L 284 536 L 346 598 L 410 630 L 504 662 L 630 662 L 693 630 L 724 598 L 756 536 L 756 441 L 724 378 L 693 346 L 630 315 L 536 315 L 441 346 L 472 315 L 504 252 L 504 94.5 L 536 31.5 L 598 0 L 662 31.5 L 693 63 L 756 158" />
+<glyph unicode="S" glyph-name="S" horiz-adv-x="630" d="M 31.5 0 L 94.5 31.5 L 158 94.5 L 252 220 L 315 315 L 378 441 L 410 536 L 410 630 L 378 662 L 346 662 L 315 630 L 284 567 L 284 504 L 315 441 L 378 378 L 472 315 L 536 252 L 567 189 L 567 126 L 536 63 L 504 31.5 L 410 0 L 284 0 L 189 31.5 L 126 94.5 L 94.5 158 L 94.5 220" />
+<glyph unicode="T" glyph-name="T" horiz-adv-x="598" d="M 346 472 L 284 472 L 220 504 L 189 567 L 220 630 L 315 662 L 410 662 L 536 630 L 630 630 L 693 662 M 536 630 L 472 410 L 410 220 L 346 94.5 L 284 31.5 L 220 0 L 158 0 L 94.5 31.5 L 63 94.5 L 63 158 L 94.5 189 L 158 189 L 220 158" />
+<glyph unicode="U" glyph-name="U" horiz-adv-x="756" d="M 189 441 L 126 472 L 94.5 536 L 94.5 567 L 126 630 L 189 662 L 220 662 L 284 630 L 315 567 L 315 504 L 284 378 L 252 284 L 220 158 L 220 94.5 L 252 31.5 L 315 0 L 378 0 L 441 31.5 L 472 63 L 536 189 L 630 441 L 693 662 M 630 441 L 598 315 L 567 126 L 567 31.5 L 598 0 L 630 0 L 693 31.5 L 724 63 L 788 158" />
+<glyph unicode="V" glyph-name="V" horiz-adv-x="724" d="M 189 441 L 126 472 L 94.5 536 L 94.5 567 L 126 630 L 189 662 L 220 662 L 284 630 L 315 567 L 315 504 L 284 378 L 252 284 L 220 158 L 220 63 L 252 0 L 315 0 L 378 31.5 L 472 126 L 536 220 L 598 346 L 630 441 L 662 567 L 662 630 L 630 662 L 598 662 L 567 630 L 536 567 L 536 504 L 567 410 L 630 346 L 693 315" />
+<glyph unicode="W" glyph-name="W" horiz-adv-x="882" d="M 189 441 L 126 472 L 94.5 536 L 94.5 567 L 126 630 L 189 662 L 220 662 L 284 630 L 315 567 L 315 472 L 284 0 M 598 662 L 284 0 M 598 662 L 536 0 M 976 662 L 914 630 L 819 536 L 724 410 L 630 220 L 536 0" />
+<glyph unicode="X" glyph-name="X" horiz-adv-x="756" d="M 284 472 L 220 472 L 189 504 L 189 567 L 220 630 L 284 662 L 346 662 L 410 630 L 441 567 L 441 472 L 378 189 L 378 94.5 L 410 31.5 L 472 0 L 536 0 L 598 31.5 L 630 94.5 L 630 158 L 598 189 L 536 189 M 756 567 L 756 630 L 724 662 L 662 662 L 598 630 L 536 567 L 472 472 L 346 189 L 284 94.5 L 220 31.5 L 158 0 L 94.5 0 L 63 31.5 L 63 94.5" />
+<glyph unicode="Y" glyph-name="Y" horiz-adv-x="724" d="M 189 441 L 126 472 L 94.5 536 L 94.5 567 L 126 630 L 189 662 L 220 662 L 284 630 L 315 567 L 315 504 L 284 378 L 252 284 L 220 158 L 220 94.5 L 252 31.5 L 284 0 L 346 0 L 410 31.5 L 472 94.5 L 536 189 L 567 252 L 630 441 M 693 662 L 630 441 L 536 126 L 472 -63 L 410 -220 L 346 -346 L 284 -378 L 252 -346 L 252 -284 L 284 -189 L 346 -94.5 L 441 0 L 536 63 L 693 158" />
+<glyph unicode="Z" glyph-name="Z" horiz-adv-x="662" d="M 441 472 L 410 410 L 378 378 L 315 346 L 252 346 L 220 410 L 220 472 L 252 567 L 315 630 L 410 662 L 504 662 L 567 630 L 598 567 L 598 441 L 567 346 L 504 220 L 410 126 L 284 31.5 L 220 0 L 126 0 L 94.5 31.5 L 94.5 94.5 L 126 126 L 220 126 L 284 94.5 L 315 63 L 346 0 L 346 -94.5 L 315 -189 L 284 -252 L 220 -346 L 158 -378 L 126 -346 L 126 -284 L 158 -189 L 220 -94.5 L 315 0 L 410 63 L 598 158" />
+<glyph unicode="[" glyph-name="bracketleft" horiz-adv-x="441" d="M 158 788 L 158 -220 M 189 788 L 189 -220 M 158 788 L 378 788 M 158 -220 L 378 -220" />
+<glyph unicode="\" glyph-name="backslash" horiz-adv-x="441" d="M 31.5 662 L 472 -94.5" />
+<glyph unicode="]" glyph-name="bracketright" horiz-adv-x="441" d="M 315 788 L 315 -220 M 346 788 L 346 -220 M 126 788 L 346 788 M 126 -220 L 346 -220" />
+<glyph unicode="^" glyph-name="asciicircum" horiz-adv-x="504" d="M 284 724 L 31.5 284 M 284 724 L 536 284" />
+<glyph unicode="_" glyph-name="underscore" horiz-adv-x="504" d="M 31.5 -63 L 536 -63" />
+<glyph unicode="`" glyph-name="grave" horiz-adv-x="346" d="M 315 662 L 252 598 L 220 536 L 220 504 L 252 472 L 284 504 L 252 536" />
+<glyph unicode="a" glyph-name="a" horiz-adv-x="504" d="M 315 189 L 284 252 L 220 284 L 158 284 L 94.5 252 L 63 220 L 31.5 158 L 31.5 94.5 L 63 31.5 L 126 0 L 189 0 L 252 31.5 L 284 94.5 L 346 284 L 315 126 L 315 31.5 L 346 0 L 378 0 L 441 31.5 L 472 63 L 536 158" />
+<glyph unicode="b" glyph-name="b" horiz-adv-x="441" d="M 31.5 158 L 94.5 252 L 189 410 L 220 472 L 252 567 L 252 630 L 220 662 L 158 630 L 126 567 L 94.5 441 L 63 220 L 63 31.5 L 94.5 0 L 126 0 L 189 31.5 L 252 94.5 L 284 189 L 284 284 L 315 158 L 346 126 L 410 126 L 472 158" />
+<glyph unicode="c" glyph-name="c" horiz-adv-x="346" d="M 252 220 L 252 252 L 220 284 L 158 284 L 94.5 252 L 63 220 L 31.5 158 L 31.5 94.5 L 63 31.5 L 126 0 L 220 0 L 315 63 L 378 158" />
+<glyph unicode="d" glyph-name="d" horiz-adv-x="504" d="M 315 189 L 284 252 L 220 284 L 158 284 L 94.5 252 L 63 220 L 31.5 158 L 31.5 94.5 L 63 31.5 L 126 0 L 189 0 L 252 31.5 L 284 94.5 L 472 662 M 346 284 L 315 126 L 315 31.5 L 346 0 L 378 0 L 441 31.5 L 472 63 L 536 158" />
+<glyph unicode="e" glyph-name="e" horiz-adv-x="315" d="M 63 63 L 126 94.5 L 158 126 L 189 189 L 189 252 L 158 284 L 126 284 L 63 252 L 31.5 189 L 31.5 94.5 L 63 31.5 L 126 0 L 189 0 L 252 31.5 L 284 63 L 346 158" />
+<glyph unicode="f" glyph-name="f" horiz-adv-x="252" d="M 31.5 158 L 158 315 L 220 410 L 252 472 L 284 567 L 284 630 L 252 662 L 189 630 L 158 567 L 94.5 315 L 0 31.5 L -94.5 -189 L -126 -284 L -126 -346 L -94.5 -378 L -31.5 -346 L 0 -252 L 31.5 31.5 L 63 0 L 126 0 L 189 31.5 L 220 63 L 284 158" />
+<glyph unicode="g" glyph-name="g" horiz-adv-x="472" d="M 315 189 L 284 252 L 220 284 L 158 284 L 94.5 252 L 63 220 L 31.5 158 L 31.5 94.5 L 63 31.5 L 126 0 L 189 0 L 252 31.5 L 284 63 M 346 284 L 284 63 L 158 -284 L 126 -346 L 63 -378 L 31.5 -346 L 31.5 -284 L 63 -189 L 158 -94.5 L 252 -31.5 L 315 0 L 410 63 L 504 158" />
+<glyph unicode="h" glyph-name="h" horiz-adv-x="472" d="M 31.5 158 L 94.5 252 L 189 410 L 220 472 L 252 567 L 252 630 L 220 662 L 158 630 L 126 567 L 94.5 441 L 63 252 L 31.5 0 M 31.5 0 L 63 94.5 L 94.5 158 L 158 252 L 220 284 L 284 284 L 315 252 L 315 189 L 284 94.5 L 284 31.5 L 315 0 L 346 0 L 410 31.5 L 441 63 L 504 158" />
+<glyph unicode="i" glyph-name="i" horiz-adv-x="220" d="M 126 441 L 126 410 L 158 410 L 158 441 L 126 441 M 31.5 158 L 94.5 284 L 31.5 94.5 L 31.5 31.5 L 63 0 L 94.5 0 L 158 31.5 L 189 63 L 252 158" />
+<glyph unicode="j" glyph-name="j" horiz-adv-x="220" d="M 126 441 L 126 410 L 158 410 L 158 441 L 126 441 M 31.5 158 L 94.5 284 L -94.5 -284 L -126 -346 L -189 -378 L -220 -346 L -220 -284 L -189 -189 L -94.5 -94.5 L 0 -31.5 L 63 0 L 158 63 L 252 158" />
+<glyph unicode="k" glyph-name="k" horiz-adv-x="441" d="M 31.5 158 L 94.5 252 L 189 410 L 220 472 L 252 567 L 252 630 L 220 662 L 158 630 L 126 567 L 94.5 441 L 63 252 L 31.5 0 M 31.5 0 L 63 94.5 L 94.5 158 L 158 252 L 220 284 L 284 284 L 315 252 L 315 189 L 252 158 L 158 158 M 158 158 L 220 126 L 252 31.5 L 284 0 L 315 0 L 378 31.5 L 410 63 L 472 158" />
+<glyph unicode="l" glyph-name="l" horiz-adv-x="252" d="M 31.5 158 L 94.5 252 L 189 410 L 220 472 L 252 567 L 252 630 L 220 662 L 158 630 L 126 567 L 94.5 441 L 63 220 L 63 31.5 L 94.5 0 L 126 0 L 189 31.5 L 220 63 L 284 158" />
+<glyph unicode="m" glyph-name="m" horiz-adv-x="788" d="M 31.5 158 L 94.5 252 L 158 284 L 189 252 L 189 220 L 158 94.5 L 126 0 M 158 94.5 L 189 158 L 252 252 L 315 284 L 378 284 L 410 252 L 410 220 L 378 94.5 L 346 0 M 378 94.5 L 410 158 L 472 252 L 536 284 L 598 284 L 630 252 L 630 189 L 598 94.5 L 598 31.5 L 630 0 L 662 0 L 724 31.5 L 756 63 L 819 158" />
+<glyph unicode="n" glyph-name="n" horiz-adv-x="567" d="M 31.5 158 L 94.5 252 L 158 284 L 189 252 L 189 220 L 158 94.5 L 126 0 M 158 94.5 L 189 158 L 252 252 L 315 284 L 378 284 L 410 252 L 410 189 L 378 94.5 L 378 31.5 L 410 0 L 441 0 L 504 31.5 L 536 63 L 598 158" />
+<glyph unicode="o" glyph-name="o" horiz-adv-x="441" d="M 220 284 L 158 284 L 94.5 252 L 63 220 L 31.5 158 L 31.5 94.5 L 63 31.5 L 126 0 L 189 0 L 252 31.5 L 284 63 L 315 126 L 315 189 L 284 252 L 220 284 L 189 252 L 189 189 L 220 126 L 284 94.5 L 378 94.5 L 441 126 L 472 158" />
+<glyph unicode="p" glyph-name="p" horiz-adv-x="472" d="M 31.5 158 L 94.5 252 L 126 315 L 94.5 189 L -94.5 -378 M 94.5 189 L 126 252 L 189 284 L 252 284 L 315 252 L 346 189 L 346 126 L 315 63 L 284 31.5 L 220 0 M 94.5 31.5 L 158 0 L 252 0 L 346 31.5 L 410 63 L 504 158" />
+<glyph unicode="q" glyph-name="q" horiz-adv-x="472" d="M 315 189 L 284 252 L 220 284 L 158 284 L 94.5 252 L 63 220 L 31.5 158 L 31.5 94.5 L 63 31.5 L 126 0 L 189 0 L 252 31.5 M 346 284 L 315 189 L 252 31.5 L 158 -189 L 126 -284 L 126 -346 L 158 -378 L 220 -346 L 252 -252 L 252 -31.5 L 315 0 L 410 63 L 504 158" />
+<glyph unicode="r" glyph-name="r" horiz-adv-x="410" d="M 31.5 158 L 94.5 252 L 126 315 L 126 252 L 220 252 L 252 220 L 252 158 L 220 63 L 220 31.5 L 252 0 L 284 0 L 346 31.5 L 378 63 L 441 158" />
+<glyph unicode="s" glyph-name="s" horiz-adv-x="346" d="M 31.5 158 L 94.5 252 L 126 315 L 126 252 L 189 158 L 220 94.5 L 220 31.5 L 158 0 M 31.5 31.5 L 94.5 0 L 220 0 L 284 31.5 L 315 63 L 378 158" />
+<glyph unicode="t" glyph-name="t" horiz-adv-x="284" d="M 31.5 158 L 94.5 252 L 158 378 M 252 662 L 63 94.5 L 63 31.5 L 94.5 0 L 158 0 L 220 31.5 L 252 63 L 315 158 M 63 410 L 284 410" />
+<glyph unicode="u" glyph-name="u" horiz-adv-x="472" d="M 31.5 158 L 94.5 284 L 31.5 94.5 L 31.5 31.5 L 63 0 L 126 0 L 189 31.5 L 252 94.5 L 315 189 M 346 284 L 284 94.5 L 284 31.5 L 315 0 L 346 0 L 410 31.5 L 441 63 L 504 158" />
+<glyph unicode="v" glyph-name="v" horiz-adv-x="472" d="M 31.5 158 L 94.5 284 L 63 126 L 63 31.5 L 94.5 0 L 126 0 L 220 31.5 L 284 94.5 L 315 189 L 315 284 M 315 284 L 346 158 L 378 126 L 441 126 L 504 158" />
+<glyph unicode="w" glyph-name="w" horiz-adv-x="662" d="M 126 284 L 63 220 L 31.5 126 L 31.5 63 L 63 0 L 126 0 L 189 31.5 L 252 94.5 M 315 284 L 252 94.5 L 252 31.5 L 284 0 L 346 0 L 410 31.5 L 472 94.5 L 504 189 L 504 284 M 504 284 L 536 158 L 567 126 L 630 126 L 693 158" />
+<glyph unicode="x" glyph-name="x" horiz-adv-x="504" d="M 31.5 158 L 94.5 252 L 158 284 L 220 284 L 252 252 L 252 31.5 L 284 0 L 378 0 L 472 63 L 536 158 M 441 252 L 410 284 L 346 284 L 315 252 L 189 31.5 L 158 0 L 94.5 0 L 63 31.5" />
+<glyph unicode="y" glyph-name="y" horiz-adv-x="472" d="M 31.5 158 L 94.5 284 L 31.5 94.5 L 31.5 31.5 L 63 0 L 126 0 L 189 31.5 L 252 94.5 L 315 189 M 346 284 L 158 -284 L 126 -346 L 63 -378 L 31.5 -346 L 31.5 -284 L 63 -189 L 158 -94.5 L 252 -31.5 L 315 0 L 410 63 L 504 158" />
+<glyph unicode="z" glyph-name="z" horiz-adv-x="441" d="M 31.5 158 L 94.5 252 L 158 284 L 220 284 L 284 220 L 284 158 L 252 94.5 L 189 31.5 L 94.5 0 L 158 -31.5 L 189 -94.5 L 189 -189 L 158 -284 L 126 -346 L 63 -378 L 31.5 -346 L 31.5 -284 L 63 -189 L 158 -94.5 L 252 -31.5 L 378 63 L 472 158" />
+<glyph unicode="{" glyph-name="braceleft" horiz-adv-x="441" d="M 315 788 L 252 756 L 220 724 L 189 662 L 189 598 L 220 536 L 252 504 L 284 441 L 284 378 L 220 315 M 252 756 L 220 693 L 220 630 L 252 567 L 284 536 L 315 472 L 315 410 L 284 346 L 158 284 L 284 220 L 315 158 L 315 94.5 L 284 31.5 L 252 0 L 220 -63 L 220 -126 L 252 -189 M 220 252 L 284 189 L 284 126 L 252 63 L 220 31.5 L 189 -31.5 L 189 -94.5 L 220 -158 L 252 -189 L 315 -220" />
+<glyph unicode="|" glyph-name="bar" horiz-adv-x="252" d="M 158 788 L 158 -220" />
+<glyph unicode="}" glyph-name="braceright" horiz-adv-x="441" d="M 189 788 L 252 756 L 284 724 L 315 662 L 315 598 L 284 536 L 252 504 L 220 441 L 220 378 L 284 315 M 252 756 L 284 693 L 284 630 L 252 567 L 220 536 L 189 472 L 189 410 L 220 346 L 346 284 L 220 220 L 189 158 L 189 94.5 L 220 31.5 L 252 0 L 284 -63 L 284 -126 L 252 -189 M 284 252 L 220 189 L 220 126 L 252 63 L 284 31.5 L 315 -31.5 L 315 -94.5 L 284 -158 L 252 -189 L 189 -220" />
+<glyph unicode="~" glyph-name="asciitilde" horiz-adv-x="756" d="M 126 189 L 126 252 L 158 346 L 220 378 L 284 378 L 346 346 L 472 252 L 536 220 L 598 220 L 662 252 L 693 315 M 126 252 L 158 315 L 220 346 L 284 346 L 346 315 L 472 220 L 536 189 L 598 189 L 662 220 L 693 315 L 693 378" />
+<glyph unicode="&#xa0;" glyph-name="nbspace" horiz-adv-x="378" />
+<glyph unicode="&#xa1;" glyph-name="exclamdown" horiz-adv-x="346" d="M 126 0 L 158 31.5 L 220 410 M 126 31.5 L 220 410 M 126 0 L 94.5 31.5 L 220 410 M 284 598 L 315 630 L 284 662 L 252 630 L 284 598" />
+<glyph unicode="&#xa2;" glyph-name="cent" horiz-adv-x="151" d="M 252 220 L 252 252 L 220 284 L 158 284 L 94.5 252 L 63 220 L 31.5 158 L 31.5 94.5 L 63 31.5 L 126 0 L 220 0 L 315 63 L 378 158 M 227 472 L 227 -132" />
+<glyph unicode="&#xa3;" glyph-name="sterling" horiz-adv-x="598" d="M 110 205 L 394 205 M 158 284 L 220 284 L 346 315 L 441 378 L 504 441 L 536 504 L 536 598 L 504 662 L 441 662 L 410 630 L 378 567 L 346 410 L 315 252 L 284 158 L 252 94.5 L 189 31.5 L 126 0 L 63 0 L 31.5 31.5 L 31.5 94.5 L 63 126 L 126 126 L 189 94.5 L 284 31.5 L 378 0 L 441 0 L 536 31.5 L 598 94.5" />
+<glyph unicode="&#xa5;" glyph-name="yen" horiz-adv-x="567" d="M 126 662 L 378 346 L 378 0 M 630 662 L 378 346 M 236 158 L 520 158 M 236 252 L 520 252" />
+<glyph unicode="&#xa6;" glyph-name="brokenbar" horiz-adv-x="75.6" d="M 217 236 L 217 -66.1 M 217 709 L 217 406" />
+<glyph unicode="&#xa8;" glyph-name="dieresis" horiz-adv-x="567" d=" M 185 567 L 153 536 L 185 504 L 216 536 L 185 567 M 445 567 L 414 536 L 445 504 L 477 536 L 445 567" />
+<glyph unicode="&#xa9;" glyph-name="copyright" horiz-adv-x="693" d="M 378 662 L 315 630 L 252 567 L 220 504 L 189 410 L 189 252 L 220 158 L 252 94.5 L 315 31.5 L 378 0 L 504 0 L 567 31.5 L 630 94.5 L 662 158 L 693 252 L 693 410 L 662 504 L 630 567 L 567 630 L 504 662 L 378 662 M 551 410 L 536 441 L 504 472 L 472 488 L 410 488 L 378 472 L 346 441 L 331 410 L 315 362 L 315 284 L 331 236 L 346 205 L 378 173 L 410 158 L 472 158 L 504 173 L 536 205 L 551 236" />
+<glyph unicode="&#xaa;" glyph-name="ordfeminine" horiz-adv-x="252" d="M 284 724 L 268 756 L 236 772 L 205 772 L 173 756 L 158 740 L 142 709 L 142 677 L 158 646 L 189 630 L 220 630 L 252 646 L 268 677 L 299 772 L 284 693 L 284 646 L 299 630 L 315 630 L 346 646 L 362 662 L 394 709" />
+<glyph unicode="&#xab;" glyph-name="guillemotleft" horiz-adv-x="454" d="M 265 454 L 63 227 L 265 0 M 391 454 L 189 227 L 391 0" />
+<glyph unicode="&#xae;" glyph-name="registered" horiz-adv-x="693" d="M 378 662 L 315 630 L 252 567 L 220 504 L 189 410 L 189 252 L 220 158 L 252 94.5 L 315 31.5 L 378 0 L 504 0 L 567 31.5 L 630 94.5 L 662 158 L 693 252 L 693 410 L 662 504 L 630 567 L 567 630 L 504 662 L 378 662 M 331 488 L 331 158 M 331 488 L 472 488 L 520 472 L 536 457 L 551 425 L 551 394 L 536 362 L 520 346 L 472 331 L 331 331 M 441 331 L 551 158" />
+<glyph unicode="&#xb0;" glyph-name="degree" horiz-adv-x="238" d="M 246 765 L 217 756 L 198 737 L 180 709 L 170 690 L 161 652 L 161 614 L 170 586 L 180 576 L 198 567 L 217 567 L 246 576 L 265 595 L 284 624 L 293 643 L 302 680 L 302 718 L 293 747 L 284 756 L 265 765 L 246 765 L 227 747 L 227 718 L 236 690 L 255 662 L 274 643 L 302 624 L 321 614" />
+<glyph unicode="&#xb1;" glyph-name="plusminus" horiz-adv-x="655" d="M 580 37.8 L 1033.2 37.8 M 806 643 L 806 189 M 580 416 L 1033.2 416" />
+<glyph unicode="&#xb2;" glyph-name="twosuperior" horiz-adv-x="331" d="M 252 898 L 268 882 L 252 866 L 236 882 L 236 898 L 252 929 L 268 945 L 315 961 L 362 961 L 410 945 L 425 914 L 425 882 L 410 850 L 378 819 L 331 788 L 268 756 L 220 724 L 189 693 L 158 630 M 362 961 L 394 945 L 410 914 L 410 882 L 394 850 L 362 819 L 268 756 M 173 662 L 189 677 L 220 677 L 299 646 L 346 646 L 378 662 L 394 693 M 220 677 L 299 630 L 346 630 L 378 646 L 394 693" />
+<glyph unicode="&#xb3;" glyph-name="threesuperior" horiz-adv-x="331" d="M 252 898 L 268 882 L 252 866 L 236 882 L 236 898 L 252 929 L 268 945 L 315 961 L 362 961 L 410 945 L 425 914 L 425 882 L 410 850 L 362 819 L 315 803 M 362 961 L 394 945 L 410 914 L 410 882 L 394 850 L 362 819 M 284 803 L 315 803 L 362 788 L 378 772 L 394 740 L 394 693 L 378 662 L 362 646 L 315 630 L 252 630 L 205 646 L 189 662 L 173 693 L 173 709 L 189 724 L 205 709 L 189 693 M 315 803 L 346 788 L 362 772 L 378 740 L 378 693 L 362 662 L 346 646 L 315 630" />
+<glyph unicode="&#xb4;" glyph-name="acute" horiz-adv-x="378" d=" M 322 664 L 196 493" />
+<glyph unicode="&#xb7;" glyph-name="middot" horiz-adv-x="340" d="M 340 378 L 302 340 L 340 302 L 378 340 L 340 378" />
+<glyph unicode="&#xb9;" glyph-name="onesuperior" horiz-adv-x="331" d="M 331 898 L 252 630 M 362 961 L 268 630 M 362 961 L 315 914 L 268 882 L 236 866 M 346 914 L 284 882 L 236 866" />
+<glyph unicode="&#xba;" glyph-name="ordmasculine" horiz-adv-x="238" d="M 246 765 L 217 756 L 198 737 L 180 709 L 170 690 L 161 652 L 161 614 L 170 586 L 180 576 L 198 567 L 217 567 L 246 576 L 265 595 L 284 624 L 293 643 L 302 680 L 302 718 L 293 747 L 284 756 L 265 765 L 246 765 L 227 747 L 227 718 L 236 690 L 255 662 L 274 643 L 302 624 L 321 614" />
+<glyph unicode="&#xbb;" glyph-name="guillemotright" horiz-adv-x="454" d="M 63 454 L 265 227 L 63 0 M 189 454 L 391 227 L 189 0" />
+<glyph unicode="&#xbc;" glyph-name="onequarter" horiz-adv-x="714" d="M 246 699 L 151 378 M 284 775 L 170 378 M 284 775 L 227 718 L 170 680 L 132 662 M 265 718 L 189 680 L 132 662 M 819 788 L 0 -220 M 794 378 L 680 0 M 813 397 L 699 0 M 813 397 L 529 113 L 832 113" />
+<glyph unicode="&#xbd;" glyph-name="onehalf" horiz-adv-x="714" d="M 246 699 L 151 378 M 284 775 L 170 378 M 284 775 L 227 718 L 170 680 L 132 662 M 265 718 L 189 680 L 132 662 M 819 788 L 0 -220 M 624 321 L 643 302 L 624 284 L 605 302 L 605 321 L 624 359 L 643 378 L 699 397 L 756 397 L 813 378 L 832 340 L 832 302 L 813 265 L 775 227 L 718 189 L 643 151 L 586 113 L 548 75.6 L 510 0 M 756 397 L 794 378 L 813 340 L 813 302 L 794 265 L 756 227 L 643 151 M 529 37.8 L 548 56.7 L 586 56.7 L 680 18.9 L 737 18.9 L 775 37.8 L 794 75.6 M 586 56.7 L 680 0 L 737 0 L 775 18.9 L 794 75.6" />
+<glyph unicode="&#xbe;" glyph-name="threequarters" horiz-adv-x="714" d="M 151 699 L 170 680 L 151 662 L 132 680 L 132 699 L 151 737 L 170 756 L 227 775 L 284 775 L 340 756 L 359 718 L 359 680 L 340 643 L 284 605 L 227 586 M 284 775 L 321 756 L 340 718 L 340 680 L 321 643 L 284 605 M 189 586 L 227 586 L 284 567 L 302 548 L 321 510 L 321 454 L 302 416 L 284 397 L 227 378 L 151 378 L 94.5 397 L 75.6 416 L 56.7 454 L 56.7 472 L 75.6 491 L 94.5 472 L 75.6 454 M 227 586 L 265 567 L 284 548 L 302 510 L 302 454 L 284 416 L 265 397 L 227 378 M 819 788 L 0 -220 M 794 378 L 680 0 M 813 397 L 699 0 M 813 397 L 529 113 L 832 113" />
+<glyph unicode="&#xbf;" glyph-name="questiondown" horiz-adv-x="662" d="M 472 126 L 441 158 L 472 189 L 504 158 L 504 126 L 472 63 L 441 31.5 L 346 0 L 220 0 L 126 31.5 L 94.5 94.5 L 94.5 158 L 126 220 L 158 252 L 346 315 L 410 346 L 410 410 L 378 441 L 315 441 M 220 0 L 158 31.5 L 126 94.5 L 126 158 L 158 220 L 189 252 L 252 284 M 441 598 L 472 630 L 441 662 L 410 630 L 441 598" />
+<glyph unicode="&#xc0;" glyph-name="Agrave" horiz-adv-x="630" d="M 31.5 0 L 94.5 31.5 L 189 126 L 284 252 L 410 472 L 504 662 L 504 0 L 472 94.5 L 410 189 L 346 252 L 252 315 L 189 315 L 158 284 L 158 220 L 189 158 L 252 94.5 L 346 31.5 L 441 0 L 598 0 M 346 1023.8 L 438 901" />
+<glyph unicode="&#xc1;" glyph-name="Aacute" horiz-adv-x="630" d="M 31.5 0 L 94.5 31.5 L 189 126 L 284 252 L 410 472 L 504 662 L 504 0 L 472 94.5 L 410 189 L 346 252 L 252 315 L 189 315 L 158 284 L 158 220 L 189 158 L 252 94.5 L 346 31.5 L 441 0 L 598 0 M 576 1005.0 L 450 835" />
+<glyph unicode="&#xc2;" glyph-name="Acircumflex" horiz-adv-x="630" d="M 31.5 0 L 94.5 31.5 L 189 126 L 284 252 L 410 472 L 504 662 L 504 0 L 472 94.5 L 410 189 L 346 252 L 252 315 L 189 315 L 158 284 L 158 220 L 189 158 L 252 94.5 L 346 31.5 L 441 0 L 598 0 M 373 769 L 493 896 L 567 769" />
+<glyph unicode="&#xc3;" glyph-name="Atilde" horiz-adv-x="630" d="M 31.5 0 L 94.5 31.5 L 189 126 L 284 252 L 410 472 L 504 662 L 504 0 L 472 94.5 L 410 189 L 346 252 L 252 315 L 189 315 L 158 284 L 158 220 L 189 158 L 252 94.5 L 346 31.5 L 441 0 L 598 0 M 341 803 L 341 835 L 357 882 L 388 898 L 420 898 L 452 882 L 515 835 L 546 819 L 578 819 L 609 835 L 625 866 M 341 835 L 357 866 L 388 882 L 420 882 L 452 866 L 515 819 L 546 803 L 578 803 L 609 819 L 625 866 L 625 898" />
+<glyph unicode="&#xc4;" glyph-name="Adieresis" horiz-adv-x="630" d="M 31.5 0 L 94.5 31.5 L 189 126 L 284 252 L 410 472 L 504 662 L 504 0 L 472 94.5 L 410 189 L 346 252 L 252 315 L 189 315 L 158 284 L 158 220 L 189 158 L 252 94.5 L 346 31.5 L 441 0 L 598 0 M 379 914 L 348 882 L 379 850 L 411 882 L 379 914 M 629 914 L 597 882 L 629 850 L 660 882 L 629 914" />
+<glyph unicode="&#xc5;" glyph-name="Aring" horiz-adv-x="567" d="M 378 662 L 126 0 M 378 662 L 630 0 M 220 220 L 536 220 M 359 1048.9 L 340 1039.5 L 321 1020.6 L 312 1001.7 L 302 973 L 302 926 L 312 898 L 321 879 L 340 860 L 359 850 L 397 850 L 416 860 L 435 879 L 444 898 L 454 926 L 454 973 L 444 1001.7 L 435 1020.6 L 416 1039.5 L 397 1048.9 L 359 1048.9" />
+<glyph unicode="&#xc8;" glyph-name="Egrave" horiz-adv-x="630" d="M 472 536 L 472 504 L 504 472 L 567 472 L 598 504 L 598 567 L 567 630 L 472 662 L 346 662 L 252 630 L 220 567 L 220 472 L 252 410 L 284 378 L 378 346 L 284 346 L 189 315 L 158 284 L 126 220 L 126 126 L 158 63 L 189 31.5 L 284 0 L 378 0 L 472 31.5 L 536 94.5 L 567 158 M 346 1023.8 L 438 901" />
+<glyph unicode="&#xc9;" glyph-name="Eacute" horiz-adv-x="630" d="M 472 536 L 472 504 L 504 472 L 567 472 L 598 504 L 598 567 L 567 630 L 472 662 L 346 662 L 252 630 L 220 567 L 220 472 L 252 410 L 284 378 L 378 346 L 284 346 L 189 315 L 158 284 L 126 220 L 126 126 L 158 63 L 189 31.5 L 284 0 L 378 0 L 472 31.5 L 536 94.5 L 567 158 M 571 1019.2 L 445 849" />
+<glyph unicode="&#xca;" glyph-name="Ecircumflex" horiz-adv-x="630" d="M 472 536 L 472 504 L 504 472 L 567 472 L 598 504 L 598 567 L 567 630 L 472 662 L 346 662 L 252 630 L 220 567 L 220 472 L 252 410 L 284 378 L 378 346 L 284 346 L 189 315 L 158 284 L 126 220 L 126 126 L 158 63 L 189 31.5 L 284 0 L 378 0 L 472 31.5 L 536 94.5 L 567 158 M 310 769 L 430 896 L 504 769" />
+<glyph unicode="&#xcb;" glyph-name="Edieresis" horiz-adv-x="630" d="M 472 536 L 472 504 L 504 472 L 567 472 L 598 504 L 598 567 L 567 630 L 472 662 L 346 662 L 252 630 L 220 567 L 220 472 L 252 410 L 284 378 L 378 346 L 284 346 L 189 315 L 158 284 L 126 220 L 126 126 L 158 63 L 189 31.5 L 284 0 L 378 0 L 472 31.5 L 536 94.5 L 567 158 M 382 914 L 351 882 L 382 850 L 414 882 L 382 914 M 626 914 L 594 882 L 626 850 L 657 882 L 626 914" />
+<glyph unicode="&#xcc;" glyph-name="Igrave" horiz-adv-x="536" d="M 472 158 L 410 220 L 346 315 L 315 378 L 284 472 L 284 567 L 315 630 L 346 662 L 410 662 L 441 630 L 472 567 L 472 472 L 441 315 L 378 158 L 346 94.5 L 284 31.5 L 220 0 L 158 0 L 94.5 31.5 L 63 94.5 L 63 158 L 94.5 189 L 158 189 L 220 158 M 299 1023.8 L 391 901" />
+<glyph unicode="&#xcd;" glyph-name="Iacute" horiz-adv-x="536" d="M 472 158 L 410 220 L 346 315 L 315 378 L 284 472 L 284 567 L 315 630 L 346 662 L 410 662 L 441 630 L 472 567 L 472 472 L 441 315 L 378 158 L 346 94.5 L 284 31.5 L 220 0 L 158 0 L 94.5 31.5 L 63 94.5 L 63 158 L 94.5 189 L 158 189 L 220 158 M 536 1001.8 L 410 832" />
+<glyph unicode="&#xce;" glyph-name="Icircumflex" horiz-adv-x="536" d="M 472 158 L 410 220 L 346 315 L 315 378 L 284 472 L 284 567 L 315 630 L 346 662 L 410 662 L 441 630 L 472 567 L 472 472 L 441 315 L 378 158 L 346 94.5 L 284 31.5 L 220 0 L 158 0 L 94.5 31.5 L 63 94.5 L 63 158 L 94.5 189 L 158 189 L 220 158 M 287 769 L 406 896 L 480 769" />
+<glyph unicode="&#xcf;" glyph-name="Idieresis" horiz-adv-x="536" d="M 472 158 L 410 220 L 346 315 L 315 378 L 284 472 L 284 567 L 315 630 L 346 662 L 410 662 L 441 630 L 472 567 L 472 472 L 441 315 L 378 158 L 346 94.5 L 284 31.5 L 220 0 L 158 0 L 94.5 31.5 L 63 94.5 L 63 158 L 94.5 189 L 158 189 L 220 158 M 325 914 L 294 882 L 325 850 L 357 882 L 325 914 M 588 914 L 557 882 L 588 850 L 620 882 L 588 914" />
+<glyph unicode="&#xd0;" glyph-name="Eth" horiz-adv-x="724" d="M 110 236 L 394 236 M 441 662 L 378 630 L 346 567 L 315 441 L 284 252 L 252 158 L 220 94.5 L 158 31.5 L 94.5 0 L 31.5 0 L 0 31.5 L 0 94.5 L 31.5 126 L 94.5 126 L 158 94.5 L 220 31.5 L 315 0 L 410 0 L 504 31.5 L 567 94.5 L 630 220 L 662 378 L 662 504 L 630 598 L 598 630 L 536 662 L 441 662 L 378 598 L 378 536 L 410 441 L 472 346 L 536 284 L 630 220 L 693 189" />
+<glyph unicode="&#xd1;" glyph-name="Ntilde" horiz-adv-x="756" d="M 189 441 L 126 472 L 94.5 536 L 94.5 567 L 126 630 L 189 662 L 220 662 L 284 630 L 315 567 L 315 504 L 284 346 L 252 220 L 189 0 M 252 220 L 346 472 L 410 598 L 441 630 L 504 662 L 567 662 L 630 630 L 662 567 L 662 504 L 630 346 L 567 126 L 567 31.5 L 598 0 L 630 0 L 693 31.5 L 724 63 L 788 158 M 299 803 L 299 835 L 315 882 L 346 898 L 378 898 L 410 882 L 472 835 L 504 819 L 536 819 L 567 835 L 583 866 M 299 835 L 315 866 L 346 882 L 378 882 L 410 866 L 472 819 L 504 803 L 536 803 L 567 819 L 583 866 L 583 898" />
+<glyph unicode="&#xd2;" glyph-name="Ograve" horiz-adv-x="662" d="M 410 662 L 315 630 L 252 567 L 189 472 L 158 410 L 126 284 L 126 158 L 158 63 L 189 31.5 L 252 0 L 315 0 L 410 31.5 L 472 94.5 L 536 189 L 567 252 L 598 378 L 598 504 L 567 598 L 536 630 L 472 662 L 410 662 L 346 598 L 346 504 L 378 410 L 441 315 L 504 252 L 598 189 L 662 158 M 362 1023.8 L 454 901" />
+<glyph unicode="&#xd3;" glyph-name="Oacute" horiz-adv-x="662" d="M 410 662 L 315 630 L 252 567 L 189 472 L 158 410 L 126 284 L 126 158 L 158 63 L 189 31.5 L 252 0 L 315 0 L 410 31.5 L 472 94.5 L 536 189 L 567 252 L 598 378 L 598 504 L 567 598 L 536 630 L 472 662 L 410 662 L 346 598 L 346 504 L 378 410 L 441 315 L 504 252 L 598 189 L 662 158 M 603 992 L 477 822" />
+<glyph unicode="&#xd4;" glyph-name="Ocircumflex" horiz-adv-x="662" d="M 410 662 L 315 630 L 252 567 L 189 472 L 158 410 L 126 284 L 126 158 L 158 63 L 189 31.5 L 252 0 L 315 0 L 410 31.5 L 472 94.5 L 536 189 L 567 252 L 598 378 L 598 504 L 567 598 L 536 630 L 472 662 L 410 662 L 346 598 L 346 504 L 378 410 L 441 315 L 504 252 L 598 189 L 662 158 M 318 769 L 438 896 L 512 769" />
+<glyph unicode="&#xd5;" glyph-name="Otilde" horiz-adv-x="662" d="M 410 662 L 315 630 L 252 567 L 189 472 L 158 410 L 126 284 L 126 158 L 158 63 L 189 31.5 L 252 0 L 315 0 L 410 31.5 L 472 94.5 L 536 189 L 567 252 L 598 378 L 598 504 L 567 598 L 536 630 L 472 662 L 410 662 L 346 598 L 346 504 L 378 410 L 441 315 L 504 252 L 598 189 L 662 158 M 284 803 L 284 835 L 299 882 L 331 898 L 362 898 L 394 882 L 457 835 L 488 819 L 520 819 L 551 835 L 567 866 M 284 835 L 299 866 L 331 882 L 362 882 L 394 866 L 457 819 L 488 803 L 520 803 L 551 819 L 567 866 L 567 898" />
+<glyph unicode="&#xd6;" glyph-name="Odieresis" horiz-adv-x="662" d="M 410 662 L 315 630 L 252 567 L 189 472 L 158 410 L 126 284 L 126 158 L 158 63 L 189 31.5 L 252 0 L 315 0 L 410 31.5 L 472 94.5 L 536 189 L 567 252 L 598 378 L 598 504 L 567 598 L 536 630 L 472 662 L 410 662 L 346 598 L 346 504 L 378 410 L 441 315 L 504 252 L 598 189 L 662 158 M 398 914 L 366 882 L 398 850 L 429 882 L 398 914 M 642 914 L 610 882 L 642 850 L 673 882 L 642 914" />
+<glyph unicode="&#xd7;" glyph-name="multiply" horiz-adv-x="536" d="M 189 441 L 536 0 M 536 441 L 189 0" />
+<glyph unicode="&#xd8;" glyph-name="Oslash" horiz-adv-x="662" d="M 410 662 L 315 630 L 252 567 L 189 472 L 158 410 L 126 284 L 126 158 L 158 63 L 189 31.5 L 252 0 L 315 0 L 410 31.5 L 472 94.5 L 536 189 L 567 252 L 598 378 L 598 504 L 567 598 L 536 630 L 472 662 L 410 662 L 346 598 L 346 504 L 378 410 L 441 315 L 504 252 L 598 189 L 662 158 M 740 791 L 76.5 -25.5" />
+<glyph unicode="&#xd9;" glyph-name="Ugrave" horiz-adv-x="756" d="M 189 441 L 126 472 L 94.5 536 L 94.5 567 L 126 630 L 189 662 L 220 662 L 284 630 L 315 567 L 315 504 L 284 378 L 252 284 L 220 158 L 220 94.5 L 252 31.5 L 315 0 L 378 0 L 441 31.5 L 472 63 L 536 189 L 630 441 L 693 662 M 630 441 L 598 315 L 567 126 L 567 31.5 L 598 0 L 630 0 L 693 31.5 L 724 63 L 788 158 M 410 1023.8 L 501 901" />
+<glyph unicode="&#xda;" glyph-name="Uacute" horiz-adv-x="756" d="M 189 441 L 126 472 L 94.5 536 L 94.5 567 L 126 630 L 189 662 L 220 662 L 284 630 L 315 567 L 315 504 L 284 378 L 252 284 L 220 158 L 220 94.5 L 252 31.5 L 315 0 L 378 0 L 441 31.5 L 472 63 L 536 189 L 630 441 L 693 662 M 630 441 L 598 315 L 567 126 L 567 31.5 L 598 0 L 630 0 L 693 31.5 L 724 63 L 788 158 M 643 1003.2 L 517 833" />
+<glyph unicode="&#xdb;" glyph-name="Ucircumflex" horiz-adv-x="756" d="M 189 441 L 126 472 L 94.5 536 L 94.5 567 L 126 630 L 189 662 L 220 662 L 284 630 L 315 567 L 315 504 L 284 378 L 252 284 L 220 158 L 220 94.5 L 252 31.5 L 315 0 L 378 0 L 441 31.5 L 472 63 L 536 189 L 630 441 L 693 662 M 630 441 L 598 315 L 567 126 L 567 31.5 L 598 0 L 630 0 L 693 31.5 L 724 63 L 788 158 M 342 769 L 461 896 L 536 769" />
+<glyph unicode="&#xdc;" glyph-name="Udieresis" horiz-adv-x="756" d="M 189 441 L 126 472 L 94.5 536 L 94.5 567 L 126 630 L 189 662 L 220 662 L 284 630 L 315 567 L 315 504 L 284 378 L 252 284 L 220 158 L 220 94.5 L 252 31.5 L 315 0 L 378 0 L 441 31.5 L 472 63 L 536 189 L 630 441 L 693 662 M 630 441 L 598 315 L 567 126 L 567 31.5 L 598 0 L 630 0 L 693 31.5 L 724 63 L 788 158 M 434 914 L 403 882 L 434 850 L 466 882 L 434 914 M 700 914 L 668 882 L 700 850 L 731 882 L 700 914" />
+<glyph unicode="&#xdd;" glyph-name="Yacute" horiz-adv-x="724" d="M 189 441 L 126 472 L 94.5 536 L 94.5 567 L 126 630 L 189 662 L 220 662 L 284 630 L 315 567 L 315 504 L 284 378 L 252 284 L 220 158 L 220 94.5 L 252 31.5 L 284 0 L 346 0 L 410 31.5 L 472 94.5 L 536 189 L 567 252 L 630 441 M 693 662 L 630 441 L 536 126 L 472 -63 L 410 -220 L 346 -346 L 284 -378 L 252 -346 L 252 -284 L 284 -189 L 346 -94.5 L 441 0 L 536 63 L 693 158 M 635 1034.4 L 509 864" />
+<glyph unicode="&#xe0;" glyph-name="agrave" horiz-adv-x="504" d="M 315 189 L 284 252 L 220 284 L 158 284 L 94.5 252 L 63 220 L 31.5 158 L 31.5 94.5 L 63 31.5 L 126 0 L 189 0 L 252 31.5 L 284 94.5 L 346 284 L 315 126 L 315 31.5 L 346 0 L 378 0 L 441 31.5 L 472 63 L 536 158 M 158 614 L 249 491" />
+<glyph unicode="&#xe1;" glyph-name="aacute" horiz-adv-x="504" d="M 315 189 L 284 252 L 220 284 L 158 284 L 94.5 252 L 63 220 L 31.5 158 L 31.5 94.5 L 63 31.5 L 126 0 L 189 0 L 252 31.5 L 284 94.5 L 346 284 L 315 126 L 315 31.5 L 346 0 L 378 0 L 441 31.5 L 472 63 L 536 158 M 380 649 L 254 479" />
+<glyph unicode="&#xe2;" glyph-name="acircumflex" horiz-adv-x="504" d="M 315 189 L 284 252 L 220 284 L 158 284 L 94.5 252 L 63 220 L 31.5 158 L 31.5 94.5 L 63 31.5 L 126 0 L 189 0 L 252 31.5 L 284 94.5 L 346 284 L 315 126 L 315 31.5 L 346 0 L 378 0 L 441 31.5 L 472 63 L 536 158 M 106 422 L 225 550 L 299 422" />
+<glyph unicode="&#xe3;" glyph-name="atilde" horiz-adv-x="504" d="M 315 189 L 284 252 L 220 284 L 158 284 L 94.5 252 L 63 220 L 31.5 158 L 31.5 94.5 L 63 31.5 L 126 0 L 189 0 L 252 31.5 L 284 94.5 L 346 284 L 315 126 L 315 31.5 L 346 0 L 378 0 L 441 31.5 L 472 63 L 536 158 M 84 425 L 84 457 L 99.8 504 L 131 520 L 163 520 L 194 504 L 257 457 L 289 441 L 320 441 L 352 457 L 368 488 M 84 457 L 99.8 488 L 131 504 L 163 504 L 194 488 L 257 441 L 289 425 L 320 425 L 352 441 L 368 488 L 368 520" />
+<glyph unicode="&#xe4;" glyph-name="adieresis" horiz-adv-x="504" d="M 315 189 L 284 252 L 220 284 L 158 284 L 94.5 252 L 63 220 L 31.5 158 L 31.5 94.5 L 63 31.5 L 126 0 L 189 0 L 252 31.5 L 284 94.5 L 346 284 L 315 126 L 315 31.5 L 346 0 L 378 0 L 441 31.5 L 472 63 L 536 158 M 165 567 L 133 536 L 165 504 L 196 536 L 165 567 M 402 567 L 371 536 L 402 504 L 434 536 L 402 567" />
+<glyph unicode="&#xe5;" glyph-name="aring" horiz-adv-x="598" d="M 567 441 L 567 0 M 567 346 L 504 410 L 441 441 L 346 441 L 284 410 L 220 346 L 189 252 L 189 189 L 220 94.5 L 284 31.5 L 346 0 L 441 0 L 504 31.5 L 567 94.5 M 397 860 L 378 850 L 359 832 L 350 813 L 340 784 L 340 737 L 350 709 L 359 690 L 378 671 L 397 662 L 435 662 L 454 671 L 472 690 L 482 709 L 491 737 L 491 784 L 482 813 L 472 832 L 454 850 L 435 860 L 397 860" />
+<glyph unicode="&#xe8;" glyph-name="egrave" horiz-adv-x="315" d="M 63 63 L 126 94.5 L 158 126 L 189 189 L 189 252 L 158 284 L 126 284 L 63 252 L 31.5 189 L 31.5 94.5 L 63 31.5 L 126 0 L 189 0 L 252 31.5 L 284 63 L 346 158 M 63 614 L 154 491" />
+<glyph unicode="&#xe9;" glyph-name="eacute" horiz-adv-x="315" d="M 63 63 L 126 94.5 L 158 126 L 189 189 L 189 252 L 158 284 L 126 284 L 63 252 L 31.5 189 L 31.5 94.5 L 63 31.5 L 126 0 L 189 0 L 252 31.5 L 284 63 L 346 158 M 291 655 L 165 485" />
+<glyph unicode="&#xea;" glyph-name="ecircumflex" horiz-adv-x="315" d="M 63 63 L 126 94.5 L 158 126 L 189 189 L 189 252 L 158 284 L 126 284 L 63 252 L 31.5 189 L 31.5 94.5 L 63 31.5 L 126 0 L 189 0 L 252 31.5 L 284 63 L 346 158 M 58.3 422 L 178 550 L 252 422" />
+<glyph unicode="&#xeb;" glyph-name="edieresis" horiz-adv-x="315" d="M 63 63 L 126 94.5 L 158 126 L 189 189 L 189 252 L 158 284 L 126 284 L 63 252 L 31.5 189 L 31.5 94.5 L 63 31.5 L 126 0 L 189 0 L 252 31.5 L 284 63 L 346 158 M 62.6 567 L 31.1 536 L 62.6 504 L 94.1 536 L 62.6 567 M 315 567 L 284 536 L 315 504 L 347 536 L 315 567" />
+<glyph unicode="&#xec;" glyph-name="igrave" horiz-adv-x="220" d="M 31.5 158 L 94.5 284 L 31.5 94.5 L 31.5 31.5 L 63 0 L 94.5 0 L 158 31.5 L 189 63 L 252 158 M 15.8 614 L 107 491" />
+<glyph unicode="&#xed;" glyph-name="iacute" horiz-adv-x="220" d="M 31.5 158 L 94.5 284 L 31.5 94.5 L 31.5 31.5 L 63 0 L 94.5 0 L 158 31.5 L 189 63 L 252 158 M 234 668 L 108 498" />
+<glyph unicode="&#xee;" glyph-name="icircumflex" horiz-adv-x="220" d="M 31.5 158 L 94.5 284 L 31.5 94.5 L 31.5 31.5 L 63 0 L 94.5 0 L 158 31.5 L 189 63 L 252 158 M 34.6 422 L 154 550 L 228 422" />
+<glyph unicode="&#xef;" glyph-name="idieresis" horiz-adv-x="220" d="M 31.5 158 L 94.5 284 L 31.5 94.5 L 31.5 31.5 L 63 0 L 94.5 0 L 158 31.5 L 189 63 L 252 158 M 10.7 567 L -20.8 536 L 10.7 504 L 42.2 536 L 10.7 567 M 273 567 L 241 536 L 273 504 L 304 536 L 273 567" />
+<glyph unicode="&#xf1;" glyph-name="ntilde" horiz-adv-x="567" d="M 31.5 158 L 94.5 252 L 158 284 L 189 252 L 189 220 L 158 94.5 L 126 0 M 158 94.5 L 189 158 L 252 252 L 315 284 L 378 284 L 410 252 L 410 189 L 378 94.5 L 378 31.5 L 410 0 L 441 0 L 504 31.5 L 536 63 L 598 158 M 94.5 425 L 94.5 457 L 110 504 L 142 520 L 173 520 L 205 504 L 268 457 L 299 441 L 331 441 L 362 457 L 378 488 M 94.5 457 L 110 488 L 142 504 L 173 504 L 205 488 L 268 441 L 299 425 L 331 425 L 362 441 L 378 488 L 378 520" />
+<glyph unicode="&#xf2;" glyph-name="ograve" horiz-adv-x="441" d="M 220 284 L 158 284 L 94.5 252 L 63 220 L 31.5 158 L 31.5 94.5 L 63 31.5 L 126 0 L 189 0 L 252 31.5 L 284 63 L 315 126 L 315 189 L 284 252 L 220 284 L 189 252 L 189 189 L 220 126 L 284 94.5 L 378 94.5 L 441 126 L 472 158 M 126 614 L 217 491" />
+<glyph unicode="&#xf3;" glyph-name="oacute" horiz-adv-x="441" d="M 220 284 L 158 284 L 94.5 252 L 63 220 L 31.5 158 L 31.5 94.5 L 63 31.5 L 126 0 L 189 0 L 252 31.5 L 284 63 L 315 126 L 315 189 L 284 252 L 220 284 L 189 252 L 189 189 L 220 126 L 284 94.5 L 378 94.5 L 441 126 L 472 158 M 348 665 L 222 494" />
+<glyph unicode="&#xf4;" glyph-name="ocircumflex" horiz-adv-x="441" d="M 220 284 L 158 284 L 94.5 252 L 63 220 L 31.5 158 L 31.5 94.5 L 63 31.5 L 126 0 L 189 0 L 252 31.5 L 284 63 L 315 126 L 315 189 L 284 252 L 220 284 L 189 252 L 189 189 L 220 126 L 284 94.5 L 378 94.5 L 441 126 L 472 158 M 89.8 422 L 209 550 L 284 422" />
+<glyph unicode="&#xf5;" glyph-name="otilde" horiz-adv-x="441" d="M 220 284 L 158 284 L 94.5 252 L 63 220 L 31.5 158 L 31.5 94.5 L 63 31.5 L 126 0 L 189 0 L 252 31.5 L 284 63 L 315 126 L 315 189 L 284 252 L 220 284 L 189 252 L 189 189 L 220 126 L 284 94.5 L 378 94.5 L 441 126 L 472 158 M 73.5 425 L 73.5 457 L 89.2 504 L 121 520 L 152 520 L 184 504 L 247 457 L 278 441 L 310 441 L 341 457 L 357 488 M 73.5 457 L 89.2 488 L 121 504 L 152 504 L 184 488 L 247 441 L 278 425 L 310 425 L 341 441 L 357 488 L 357 520" />
+<glyph unicode="&#xf6;" glyph-name="odieresis" horiz-adv-x="441" d="M 220 284 L 158 284 L 94.5 252 L 63 220 L 31.5 158 L 31.5 94.5 L 63 31.5 L 126 0 L 189 0 L 252 31.5 L 284 63 L 315 126 L 315 189 L 284 252 L 220 284 L 189 252 L 189 189 L 220 126 L 284 94.5 L 378 94.5 L 441 126 L 472 158 M 121 567 L 89.4 536 L 121 504 L 152 536 L 121 567 M 383 567 L 352 536 L 383 504 L 415 536 L 383 567" />
+<glyph unicode="&#xf7;" glyph-name="divide" horiz-adv-x="614" d="M 346 551 L 315 520 L 346 488 L 378 520 L 346 551 M 346 268 L 315 236 L 346 205 L 378 236 L 346 268 M 118 378 L 543 378" />
+<glyph unicode="&#xf8;" glyph-name="oslash" horiz-adv-x="441" d="M 220 284 L 158 284 L 94.5 252 L 63 220 L 31.5 158 L 31.5 94.5 L 63 31.5 L 126 0 L 189 0 L 252 31.5 L 284 63 L 315 126 L 315 189 L 284 252 L 220 284 L 189 252 L 189 189 L 220 126 L 284 94.5 L 378 94.5 L 441 126 L 472 158 M 355 386 L -46.3 -108" />
+<glyph unicode="&#xf9;" glyph-name="ugrave" horiz-adv-x="472" d="M 31.5 158 L 94.5 284 L 31.5 94.5 L 31.5 31.5 L 63 0 L 126 0 L 189 31.5 L 252 94.5 L 315 189 M 346 284 L 284 94.5 L 284 31.5 L 315 0 L 346 0 L 410 31.5 L 441 63 L 504 158 M 142 614 L 233 491" />
+<glyph unicode="&#xfa;" glyph-name="uacute" horiz-adv-x="472" d="M 31.5 158 L 94.5 284 L 31.5 94.5 L 31.5 31.5 L 63 0 L 126 0 L 189 31.5 L 252 94.5 L 315 189 M 346 284 L 284 94.5 L 284 31.5 L 315 0 L 346 0 L 410 31.5 L 441 63 L 504 158 M 363 685 L 237 515" />
+<glyph unicode="&#xfb;" glyph-name="ucircumflex" horiz-adv-x="472" d="M 31.5 158 L 94.5 284 L 31.5 94.5 L 31.5 31.5 L 63 0 L 126 0 L 189 31.5 L 252 94.5 L 315 189 M 346 284 L 284 94.5 L 284 31.5 L 315 0 L 346 0 L 410 31.5 L 441 63 L 504 158 M 97.6 422 L 217 550 L 291 422" />
+<glyph unicode="&#xfc;" glyph-name="udieresis" horiz-adv-x="472" d="M 31.5 158 L 94.5 284 L 31.5 94.5 L 31.5 31.5 L 63 0 L 126 0 L 189 31.5 L 252 94.5 L 315 189 M 346 284 L 284 94.5 L 284 31.5 L 315 0 L 346 0 L 410 31.5 L 441 63 L 504 158 M 143 567 L 112 536 L 143 504 L 175 536 L 143 567 M 392 567 L 361 536 L 392 504 L 424 536 L 392 567" />
+<glyph unicode="&#xfd;" glyph-name="yacute" horiz-adv-x="472" d="M 31.5 158 L 94.5 284 L 31.5 94.5 L 31.5 31.5 L 63 0 L 126 0 L 189 31.5 L 252 94.5 L 315 189 M 346 284 L 158 -284 L 126 -346 L 63 -378 L 31.5 -346 L 31.5 -284 L 63 -189 L 158 -94.5 L 252 -31.5 L 315 0 L 410 63 L 504 158 M 384 654 L 258 483" />
+<glyph unicode="&#xff;" glyph-name="ydieresis" horiz-adv-x="472" d="M 31.5 158 L 94.5 284 L 31.5 94.5 L 31.5 31.5 L 63 0 L 126 0 L 189 31.5 L 252 94.5 L 315 189 M 346 284 L 158 -284 L 126 -346 L 63 -378 L 31.5 -346 L 31.5 -284 L 63 -189 L 158 -94.5 L 252 -31.5 L 315 0 L 410 63 L 504 158 M 141 567 L 110 536 L 141 504 L 173 536 L 141 567 M 394 567 L 363 536 L 394 504 L 426 536 L 394 567" />
+<glyph unicode="&#x2013;" glyph-name="endash" horiz-adv-x="614" d="M 118 284 L 543 284" />
+<glyph unicode="&#x2014;" glyph-name="emdash" horiz-adv-x="819" d="M 158 284 L 724 284" />
+<glyph unicode="&#x201c;" glyph-name="quotedblleft" horiz-adv-x="378" d="M 213 850 L 184 794 L 170 737 L 170 709 L 184 680 L 198 709 L 184 737 M 354 850 L 326 794 L 312 737 L 312 709 L 326 680 L 340 709 L 326 737" />
+<glyph unicode="&#x201d;" glyph-name="quotedblright" horiz-adv-x="378" d="M 184 539 L 170 567 L 184 595 L 198 567 L 198 539 L 184 482 L 156 425 M 326 539 L 312 567 L 326 595 L 340 567 L 340 539 L 326 482 L 298 425" />
+<glyph unicode="&#x2039;" glyph-name="guilsinglleft" horiz-adv-x="302" d="M 265 454 L 63 227 L 265 0" />
+<glyph unicode="&#x203a;" glyph-name="guilsinglright" horiz-adv-x="302" d="M 63 454 L 265 227 L 63 0" />
+<glyph unicode="&#x20ac;" glyph-name="Euro" horiz-adv-x="662" d="M 662 504 L 630 567 L 567 630 L 504 662 L 378 662 L 315 630 L 252 567 L 220 504 L 189 410 L 189 252 L 220 158 L 252 94.5 L 315 31.5 L 378 0 L 504 0 L 567 31.5 L 630 94.5 L 662 158 M 142 236 L 425 236 M 142 331 L 425 331" />
+<glyph unicode="&#x0178;" glyph-name="Ydieresis" horiz-adv-x="724" d="M 189 441 L 126 472 L 94.5 536 L 94.5 567 L 126 630 L 189 662 L 220 662 L 284 630 L 315 567 L 315 504 L 284 378 L 252 284 L 220 158 L 220 94.5 L 252 31.5 L 284 0 L 346 0 L 410 31.5 L 472 94.5 L 536 189 L 567 252 L 630 441 M 693 662 L 630 441 L 536 126 L 472 -63 L 410 -220 L 346 -346 L 284 -378 L 252 -346 L 252 -284 L 284 -189 L 346 -94.5 L 441 0 L 536 63 L 693 158 M 418 914 L 387 882 L 418 850 L 450 882 L 418 914 M 684 914 L 653 882 L 684 850 L 716 882 L 684 914" />
+<glyph unicode="&#xdf;" glyph-name="germandbls" horiz-adv-x="724" d="M234.1391 131.11625C234.1391 131.11625 315.4279 52.079278 346.0 31.500000000000014C376.5721 10.920722000000016 383.16209 6.246817700000015 410.0 1.4210854715202004e-14C436.83791 -6.246817699999986 477.32712 -6.296613999999986 504.0 1.4210854715202004e-14C530.67288 6.296614000000014 567.0 31.500000000000014 567.0 31.500000000000014L598.0 63.000000000000014L630.0 126.00000000000001L630.0 220.0L598.0 284.0L567.0 315.0L472.0 346.0L567.0 378.0L630.0 410.0L662.0 441.0L693.0 504.0L693.0 567.0L662.0 630.0L598.0 662.0L504.0 662.0C504.0 662.0 436.2729 640.98075 410.0 630.0C383.7271 619.01925 367.52975 613.51776 346.0 598.0C324.47025 582.48224 305.43145 562.01345 284.0 536.0C262.56855 509.98655 235.43574 467.64538 220.0 441.0C204.56426 414.35462 199.66657 404.10375 189.0 378.0C178.33343 351.89625 158.0 284.0 158.0 284.0C78.409961 -108.97582 170.96319 178.71224 -16.115307 -174.76038999999997C-16.115307 -174.76038999999997 77.655328 -41.915163999999976 110.23956 31.98774000000003C133.64778 85.07894300000004 158.67043999999999 199.18235000000004 158.67043999999999 199.18235000000004" />
+<glyph unicode="&#xc7;" glyph-name="Ccedilla" horiz-adv-x="630" d="M247.79438 -108.00539C278.16246 -107.85567 303.42239 -106.34929000000001 310.8282 -79.28568100000001C319.51005 -42.632472000000014 284.48431 -49.859133000000014 285.56201 1.3564649999999858M410.0 472.0L410.0 441.0L441.0 410.0L504.0 410.0L567.0 441.0L598.0 504.0L598.0 567.0L567.0 630.0L504.0 662.0L410.0 662.0L315.0 630.0L252.0 567.0L189.0 472.0L158.0 410.0L126.0 284.0L126.0 158.0L158.0 63.0L189.0 31.5L252.0 -0.0L315.0 -0.0L410.0 31.5L472.0 94.5L504.0 158.0" />
+<glyph unicode="&#xa3;" glyph-name="sterling" horiz-adv-x="598" d="M190.0 205.0L494.0 205.0M441.0 378.0C518.88478 436.3281 536.15277 519.18094 536.0 598.0C527.99764 651.03799 503.13567 677.83704 441.0 662.0C407.62831 633.86805 398.82168 639.12603 378.0 567.0C357.17832 494.87397 335.6165 357.07767 315.0 252.0C315.0 252.0 296.62521 188.48212 284.0 158.0C274.93002 136.10158 252.0 94.5 252.0 94.5C216.70484 50.690999 178.10225 21.318014 126.0 -0.0C78.257195 -5.5938051 63.121106 -0.12110619 31.5 31.5C31.5 31.5 22.346777 51.699954000000005 22.312933 62.637412999999995C22.279089 73.574873 31.5 94.5 31.5 94.5C59.190571 131.89229 74.368391 138.53282000000002 126.0 126.0C177.63161 113.46718 231.73664 61.23349 284.0 31.5C336.26336 1.7665099 384.68363 -0.0 441.0 -0.0C513.54367 12.67425 548.92717 44.63567 598.0 94.5" />
+<glyph unicode="&#xe7;" glyph-name="ccedilla" horiz-adv-x="346" d="M175.05034 0.51079164C181.05523 -70.843573 197.19667 -89.813785 149.28931 -87.007879M252.0 220.0L252.0 252.0L220.0 284.0L158.0 284.0L94.5 252.0L63.0 220.0L31.5 158.0L31.5 94.5L63.0 31.5L126.0 -0.0L220.0 -0.0L315.0 63.0L378.0 158.0" />
+<glyph unicode="&#xb8;" glyph-name="cedilla" horiz-adv-x="630" d="M221.46545 -91.998222C250.34817 -101.3807 274.80599 -107.87285 290.32635 -84.49759C310.06605 -52.416808 274.54107 -48.293348 291.62766 -0.0" />
+</font>
+</defs>
+</svg>
\ No newline at end of file
diff --git a/.claude/skills-media/embedded-captions/assets/strokefonts/HersheyScriptMed.svg b/.claude/skills-media/embedded-captions/assets/strokefonts/HersheyScriptMed.svg
new file mode 100644
index 000000000..d6beb67ae
--- /dev/null
+++ b/.claude/skills-media/embedded-captions/assets/strokefonts/HersheyScriptMed.svg
@@ -0,0 +1,242 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
+
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">
+
+<metadata>
+Font name: Hershey Script medium
+
+Originally prepared in 2011 and converted to SVG fonts
+in 2019 by Windell H. Oskay, www.evilmadscientist.com
+
+Contents adapted from emergent.unpythonic.net/software/hershey
+ by way of "Hershey Fonts in SVG" by Marty McGuire
+ http://www.thingiverse.com/thing:6168
+ 
+-------------------------------------------------------------------
+The Hershey Fonts are a set of vector fonts with a liberal license.
+
+USE RESTRICTION:
+    This distribution of the Hershey Fonts may be used by anyone for
+    any purpose, commercial or otherwise, providing that:
+        1. The following acknowledgements must be distributed with
+            the font data:
+            - The Hershey Fonts were originally created by Dr.
+                A. V. Hershey while working at the U. S.
+                National Bureau of Standards.
+            - The format of the Font data in this distribution
+                was originally created by
+                    James Hurt
+                    Cognition, Inc.
+                    900 Technology Park Drive
+                    Billerica, MA 01821
+                    (mit-eddie!ci-dandelion!hurt)
+        2. The font data in this distribution may be converted into
+            any other format *EXCEPT* the format distributed by
+            the U.S. NTIS where each point is described
+            in eight bytes as "xxx yyy:", where xxx and yyy are
+            the coordinate values as ASCII numbers.
+
+</metadata>
+<defs>
+<font id="HersheyScriptMed" horiz-adv-x="378" >
+<font-face
+font-family="Hershey Script medium"
+units-per-em="1000"
+ascent="800"
+descent="-200"
+cap-height="500"
+x-height="300"
+/>
+<missing-glyph horiz-adv-x="378" />
+<glyph unicode=" " glyph-name="space" horiz-adv-x="378" />
+<glyph unicode="!" glyph-name="exclam" horiz-adv-x="346" d="M 353 662 L 321 630 L 258 252 M 353 630 L 258 252 M 353 662 L 384 630 L 258 252 M 195 63 L 164 31.5 L 195 0 L 227 31.5 L 195 63" />
+<glyph unicode="&#x22;" glyph-name="quotedbl" horiz-adv-x="567" d="M 252 662 L 189 441 M 284 662 L 189 441 M 536 662 L 472 441 M 567 662 L 472 441" />
+<glyph unicode="#" glyph-name="numbersign" horiz-adv-x="662" d="M 378 662 L 158 -220 M 567 662 L 346 -220 M 158 315 L 598 315 M 126 126 L 567 126" />
+<glyph unicode="$" glyph-name="dollar" horiz-adv-x="662" d="M 410 788 L 158 -126 M 567 788 L 315 -126 M 598 536 L 567 504 L 598 472 L 630 504 L 630 536 L 598 598 L 567 630 L 472 662 L 346 662 L 252 630 L 189 567 L 189 504 L 220 441 L 252 410 L 472 284 L 536 220 M 189 504 L 252 441 L 472 315 L 504 284 L 536 220 L 536 126 L 504 63 L 472 31.5 L 378 0 L 252 0 L 158 31.5 L 126 63 L 94.5 126 L 94.5 158 L 126 189 L 158 158 L 126 126" />
+<glyph unicode="%" glyph-name="percent" horiz-adv-x="756" d="M 693 662 L 126 0 M 284 662 L 346 598 L 346 536 L 315 472 L 252 441 L 189 441 L 126 504 L 126 567 L 158 630 L 220 662 L 284 662 L 346 630 L 441 598 L 536 598 L 630 630 L 693 662 M 567 220 L 504 189 L 472 126 L 472 63 L 536 0 L 598 0 L 662 31.5 L 693 94.5 L 693 158 L 630 220 L 567 220" />
+<glyph unicode="&amp;" glyph-name="ampersand" horiz-adv-x="819" d="M 756 410 L 724 378 L 756 346 L 788 378 L 788 410 L 756 441 L 724 441 L 662 410 L 598 346 L 441 94.5 L 378 31.5 L 315 0 L 220 0 L 126 31.5 L 94.5 94.5 L 94.5 158 L 126 220 L 158 252 L 220 284 L 378 346 L 441 378 L 504 441 L 536 504 L 536 567 L 504 630 L 441 662 L 378 630 L 346 567 L 346 472 L 378 284 L 410 189 L 472 94.5 L 536 31.5 L 598 0 L 662 0 L 693 63 L 693 94.5 M 220 0 L 158 31.5 L 126 94.5 L 126 158 L 158 220 L 189 252 L 378 346 M 346 472 L 378 315 L 410 220 L 472 126 L 536 63 L 598 31.5 L 662 31.5 L 693 63" />
+<glyph unicode="&apos;" glyph-name="quotesingle" horiz-adv-x="346" d="M 284 598 L 252 630 L 284 662 L 315 630 L 315 598 L 284 536 L 220 472" />
+<glyph unicode="(" glyph-name="parenleft" horiz-adv-x="472" d="M 504 788 L 378 693 L 284 598 L 220 504 L 158 378 L 126 220 L 126 94.5 L 158 -63 L 189 -158 L 220 -220 M 378 693 L 284 567 L 220 441 L 189 346 L 158 189 L 158 31.5 L 189 -126 L 220 -220" />
+<glyph unicode=")" glyph-name="parenright" horiz-adv-x="472" d="M 315 788 L 346 724 L 378 630 L 410 472 L 410 346 L 378 189 L 315 63 L 252 -31.5 L 158 -126 L 31.5 -220 M 315 788 L 346 693 L 378 536 L 378 378 L 346 220 L 315 126 L 252 0 L 158 -126" />
+<glyph unicode="*" glyph-name="asterisk" horiz-adv-x="536" d="M 346 662 L 346 284 M 189 567 L 504 378 M 504 567 L 189 378" />
+<glyph unicode="+" glyph-name="plus" horiz-adv-x="819" d="M 441 567 L 441 0 M 158 284 L 724 284" />
+<glyph unicode="," glyph-name="comma" horiz-adv-x="346" d="M 126 0 L 94.5 31.5 L 126 63 L 158 31.5 L 158 0 L 126 -63 L 63 -126" />
+<glyph unicode="-" glyph-name="hyphen" horiz-adv-x="819" d="M 158 284 L 724 284" />
+<glyph unicode="." glyph-name="period" horiz-adv-x="346" d="M 126 63 L 94.5 31.5 L 126 0 L 158 31.5 L 126 63" />
+<glyph unicode="/" glyph-name="slash" horiz-adv-x="693" d="M 788 788 L -31.5 -220" />
+<glyph unicode="0" glyph-name="zero" horiz-adv-x="662" d="M 410 662 L 315 630 L 252 567 L 189 472 L 158 378 L 126 252 L 126 158 L 158 63 L 189 31.5 L 252 0 L 315 0 L 410 31.5 L 472 94.5 L 536 189 L 567 284 L 598 410 L 598 504 L 567 598 L 536 630 L 472 662 L 410 662 M 410 662 L 346 630 L 284 567 L 220 472 L 189 378 L 158 252 L 158 158 L 189 63 L 252 0 M 315 0 L 378 31.5 L 441 94.5 L 504 189 L 536 284 L 567 410 L 567 504 L 536 598 L 472 662" />
+<glyph unicode="1" glyph-name="one" horiz-adv-x="662" d="M 410 536 L 252 0 M 472 662 L 284 0 M 472 662 L 378 567 L 284 504 L 220 472 M 441 567 L 315 504 L 220 472" />
+<glyph unicode="2" glyph-name="two" horiz-adv-x="662" d="M 252 536 L 284 504 L 252 472 L 220 504 L 220 536 L 252 598 L 284 630 L 378 662 L 472 662 L 567 630 L 598 567 L 598 504 L 567 441 L 504 378 L 410 315 L 284 252 L 189 189 L 126 126 L 63 0 M 472 662 L 536 630 L 567 567 L 567 504 L 536 441 L 472 378 L 284 252 M 94.5 63 L 126 94.5 L 189 94.5 L 346 31.5 L 441 31.5 L 504 63 L 536 126 M 189 94.5 L 346 0 L 441 0 L 504 31.5 L 536 126" />
+<glyph unicode="3" glyph-name="three" horiz-adv-x="662" d="M 252 536 L 284 504 L 252 472 L 220 504 L 220 536 L 252 598 L 284 630 L 378 662 L 472 662 L 567 630 L 598 567 L 598 504 L 567 441 L 472 378 L 378 346 M 472 662 L 536 630 L 567 567 L 567 504 L 536 441 L 472 378 M 315 346 L 378 346 L 472 315 L 504 284 L 536 220 L 536 126 L 504 63 L 472 31.5 L 378 0 L 252 0 L 158 31.5 L 126 63 L 94.5 126 L 94.5 158 L 126 189 L 158 158 L 126 126 M 378 346 L 441 315 L 472 284 L 504 220 L 504 126 L 472 63 L 441 31.5 L 378 0" />
+<glyph unicode="4" glyph-name="four" horiz-adv-x="662" d="M 536 630 L 346 0 M 567 662 L 378 0 M 567 662 L 94.5 189 L 598 189" />
+<glyph unicode="5" glyph-name="five" horiz-adv-x="662" d="M 315 662 L 158 346 M 315 662 L 630 662 M 315 630 L 472 630 L 630 662 M 158 346 L 189 378 L 284 410 L 378 410 L 472 378 L 504 346 L 536 284 L 536 189 L 504 94.5 L 441 31.5 L 346 0 L 252 0 L 158 31.5 L 126 63 L 94.5 126 L 94.5 158 L 126 189 L 158 158 L 126 126 M 378 410 L 441 378 L 472 346 L 504 284 L 504 189 L 472 94.5 L 410 31.5 L 346 0" />
+<glyph unicode="6" glyph-name="six" horiz-adv-x="662" d="M 567 567 L 536 536 L 567 504 L 598 536 L 598 567 L 567 630 L 504 662 L 410 662 L 315 630 L 252 567 L 189 472 L 158 378 L 126 252 L 126 126 L 158 63 L 189 31.5 L 252 0 L 346 0 L 441 31.5 L 504 94.5 L 536 158 L 536 252 L 504 315 L 472 346 L 410 378 L 315 378 L 252 346 L 189 284 L 158 220 M 410 662 L 346 630 L 284 567 L 220 472 L 189 378 L 158 252 L 158 94.5 L 189 31.5 M 346 0 L 410 31.5 L 472 94.5 L 504 158 L 504 284 L 472 346" />
+<glyph unicode="7" glyph-name="seven" horiz-adv-x="662" d="M 220 662 L 158 472 M 630 662 L 598 567 L 536 472 L 378 284 L 315 189 L 284 126 L 252 0 M 536 472 L 346 284 L 284 189 L 252 126 L 220 0 M 189 567 L 284 662 L 346 662 L 504 567 M 220 598 L 284 630 L 346 630 L 504 567 L 567 567 L 598 598 L 630 662" />
+<glyph unicode="8" glyph-name="eight" horiz-adv-x="662" d="M 378 662 L 284 630 L 252 598 L 220 536 L 220 441 L 252 378 L 315 346 L 410 346 L 536 378 L 567 410 L 598 472 L 598 567 L 567 630 L 472 662 L 378 662 M 378 662 L 315 630 L 284 598 L 252 536 L 252 441 L 284 378 L 315 346 M 410 346 L 504 378 L 536 410 L 567 472 L 567 567 L 536 630 L 472 662 M 315 346 L 189 315 L 126 252 L 94.5 189 L 94.5 94.5 L 126 31.5 L 220 0 L 346 0 L 472 31.5 L 504 63 L 536 126 L 536 220 L 504 284 L 472 315 L 410 346 M 315 346 L 220 315 L 158 252 L 126 189 L 126 94.5 L 158 31.5 L 220 0 M 346 0 L 441 31.5 L 472 63 L 504 126 L 504 252 L 472 315" />
+<glyph unicode="9" glyph-name="nine" horiz-adv-x="662" d="M 567 441 L 536 378 L 472 315 L 410 284 L 315 284 L 252 315 L 220 346 L 189 410 L 189 504 L 220 567 L 284 630 L 378 662 L 472 662 L 536 630 L 567 598 L 598 536 L 598 410 L 567 284 L 536 189 L 472 94.5 L 410 31.5 L 315 0 L 220 0 L 158 31.5 L 126 94.5 L 126 126 L 158 158 L 189 126 L 158 94.5 M 252 315 L 220 378 L 220 504 L 252 567 L 315 630 L 378 662 M 536 630 L 567 567 L 567 410 L 536 284 L 504 189 L 441 94.5 L 378 31.5 L 315 0" />
+<glyph unicode=":" glyph-name="colon" horiz-adv-x="346" d="M 220 441 L 189 410 L 220 378 L 252 410 L 220 441 M 126 63 L 94.5 31.5 L 126 0 L 158 31.5" />
+<glyph unicode=";" glyph-name="semicolon" horiz-adv-x="346" d="M 220 441 L 189 410 L 220 378 L 252 410 L 220 441 M 126 0 L 94.5 31.5 L 126 63 L 158 31.5 L 158 0 L 126 -63 L 63 -126" />
+<glyph unicode="&#x3c;" glyph-name="less" horiz-adv-x="756" d="M 662 567 L 158 284 L 662 0" />
+<glyph unicode="=" glyph-name="equal" horiz-adv-x="819" d="M 158 378 L 724 378 M 158 189 L 724 189" />
+<glyph unicode="&#x3e;" glyph-name="greater" horiz-adv-x="756" d="M 158 567 L 662 284 L 158 0" />
+<glyph unicode="?" glyph-name="question" horiz-adv-x="662" d="M 252 536 L 284 504 L 252 472 L 220 504 L 220 536 L 252 598 L 284 630 L 378 662 L 504 662 L 598 630 L 630 567 L 630 504 L 598 441 L 567 410 L 378 346 L 315 315 L 315 252 L 346 220 L 410 220 M 504 662 L 567 630 L 598 567 L 598 504 L 567 441 L 536 410 L 472 378 M 284 63 L 252 31.5 L 284 0 L 315 31.5 L 284 63" />
+<glyph unicode="@" glyph-name="at" horiz-adv-x="850" d="M 598 410 L 567 472 L 504 504 L 410 504 L 346 472 L 315 441 L 284 346 L 284 252 L 315 189 L 378 158 L 472 158 L 536 189 L 567 252 M 410 504 L 346 441 L 315 346 L 315 252 L 346 189 L 378 158 M 598 504 L 567 252 L 567 189 L 630 158 L 693 158 L 756 220 L 788 315 L 788 378 L 756 472 L 724 536 L 662 598 L 598 630 L 504 662 L 410 662 L 315 630 L 252 598 L 189 536 L 158 472 L 126 378 L 126 284 L 158 189 L 189 126 L 252 63 L 315 31.5 L 410 0 L 504 0 L 598 31.5 L 662 63 L 693 94.5 M 630 504 L 598 252 L 598 189 L 630 158" />
+<glyph unicode="A" glyph-name="A" horiz-adv-x="724" d="M 630 662 L 567 598 L 504 504 L 410 346 L 346 252 L 252 126 L 158 31.5 L 94.5 0 L 31.5 0 L 0 31.5 L 0 94.5 L 31.5 126 L 63 94.5 L 31.5 63 M 630 662 L 598 536 L 536 220 L 504 0 M 630 662 L 536 0 M 504 0 L 504 63 L 472 158 L 441 220 L 378 284 L 315 315 L 252 315 L 220 284 L 220 220 L 252 126 L 346 31.5 L 441 0 L 567 0 L 630 31.5" />
+<glyph unicode="B" glyph-name="B" horiz-adv-x="756" d="M 504 630 L 472 598 L 441 536 L 378 378 L 315 189 L 284 126 L 220 31.5 L 158 0 M 472 598 L 441 504 L 378 252 L 346 158 L 315 94.5 L 252 31.5 L 158 0 L 94.5 0 L 63 31.5 L 63 94.5 L 94.5 126 L 126 94.5 L 94.5 63 M 315 472 L 284 410 L 252 378 L 189 378 L 158 410 L 158 472 L 189 536 L 252 598 L 315 630 L 410 662 L 598 662 L 662 630 L 693 567 L 693 504 L 662 441 L 598 410 L 472 378 L 410 378 M 598 662 L 630 630 L 662 567 L 662 504 L 630 441 L 598 410 M 472 378 L 567 346 L 598 315 L 630 252 L 630 158 L 598 63 L 567 31.5 L 504 0 L 441 0 L 410 31.5 L 410 94.5 L 441 189 M 472 378 L 536 346 L 567 315 L 598 252 L 598 158 L 567 63 L 504 0" />
+<glyph unicode="C" glyph-name="C" horiz-adv-x="662" d="M 126 598 L 94.5 536 L 94.5 472 L 126 410 L 220 378 L 315 378 L 441 410 L 504 441 L 567 504 L 598 567 L 598 630 L 567 662 L 504 662 L 410 630 L 315 536 L 252 441 L 189 315 L 158 189 L 158 94.5 L 189 31.5 L 284 0 L 346 0 L 441 31.5 L 504 94.5 L 536 158 L 536 220 L 504 284 L 441 284 L 378 252 L 346 189 M 504 662 L 441 630 L 346 536 L 284 441 L 220 315 L 189 189 L 189 94.5 L 220 31.5 L 284 0" />
+<glyph unicode="D" glyph-name="D" horiz-adv-x="724" d="M 504 630 L 472 598 L 441 536 L 378 378 L 315 189 L 284 126 L 220 31.5 L 158 0 M 472 598 L 441 504 L 378 252 L 346 158 L 315 94.5 L 252 31.5 L 158 0 L 94.5 0 L 63 31.5 L 63 94.5 L 94.5 126 L 158 126 L 220 94.5 L 284 31.5 L 346 0 L 441 0 L 504 31.5 L 567 94.5 L 630 220 L 662 378 L 662 472 L 630 567 L 567 630 L 504 662 L 346 662 L 252 630 L 189 567 L 158 504 L 158 441 L 189 410 L 252 410 L 284 441 L 315 504" />
+<glyph unicode="E" glyph-name="E" horiz-adv-x="598" d="M 472 567 L 441 536 L 441 472 L 472 441 L 536 441 L 567 504 L 567 567 L 536 630 L 472 662 L 378 662 L 315 630 L 284 598 L 252 536 L 252 472 L 284 410 L 346 378 M 378 662 L 315 598 L 284 536 L 284 441 L 346 378 M 346 378 L 284 378 L 189 346 L 126 284 L 94.5 220 L 94.5 126 L 126 63 L 158 31.5 L 220 0 L 315 0 L 410 31.5 L 472 94.5 L 504 158 L 504 220 L 472 284 L 410 284 L 346 252 L 315 189 M 284 378 L 220 346 L 158 284 L 126 220 L 126 94.5 L 158 31.5" />
+<glyph unicode="F" glyph-name="F" horiz-adv-x="662" d="M 536 598 L 504 536 L 441 378 L 378 189 L 346 126 L 284 31.5 L 220 0 M 346 472 L 315 410 L 252 378 L 189 378 L 158 441 L 158 504 L 189 567 L 252 630 L 346 662 L 662 662 L 567 630 L 536 598 L 504 504 L 441 252 L 410 158 L 378 94.5 L 315 31.5 L 220 0 L 158 0 L 94.5 31.5 L 63 63 L 63 94.5 L 94.5 126 L 126 94.5 L 94.5 63 M 410 662 L 536 630 L 567 630 M 284 252 L 315 284 L 378 315 L 504 315 L 567 346 L 630 441 L 567 220" />
+<glyph unicode="G" glyph-name="G" horiz-adv-x="693" d="M 126 567 L 94.5 504 L 94.5 441 L 126 378 L 189 346 L 284 346 L 378 378 L 441 410 L 536 504 L 567 598 L 567 630 L 536 662 L 504 662 L 441 630 L 378 567 L 346 504 L 315 410 L 315 315 L 346 252 L 410 220 L 472 220 L 536 252 L 598 315 L 630 378 M 536 662 L 472 630 L 410 567 L 378 504 L 346 410 L 346 284 L 410 220 M 630 378 L 598 252 L 536 126 L 472 63 L 410 31.5 L 284 0 L 189 0 L 126 31.5 L 94.5 94.5 L 94.5 126 L 126 158 L 158 126 L 126 94.5 M 598 252 L 536 158 L 472 94.5 L 378 31.5 L 284 0" />
+<glyph unicode="H" glyph-name="H" horiz-adv-x="756" d="M 220 472 L 189 504 L 189 567 L 220 630 L 315 662 L 410 662 L 315 315 L 252 126 L 220 63 L 189 31.5 L 126 0 L 63 0 L 31.5 31.5 L 31.5 94.5 L 63 126 L 94.5 94.5 L 63 63 M 410 662 L 315 378 L 284 284 L 220 126 L 189 63 L 126 0 M 158 220 L 189 252 L 252 284 L 536 378 L 598 410 L 693 472 L 756 536 L 788 598 L 788 630 L 756 662 L 724 662 L 662 630 L 598 536 L 567 472 L 504 284 L 472 158 L 472 63 L 536 0 L 567 0 L 630 31.5 L 693 94.5 M 724 662 L 662 598 L 598 472 L 536 284 L 504 158 L 504 63 L 536 0" />
+<glyph unicode="I" glyph-name="I" horiz-adv-x="504" d="M 472 598 L 410 504 L 346 346 L 284 189 L 252 126 L 189 31.5 L 126 0 M 536 472 L 472 410 L 378 378 L 284 378 L 220 410 L 189 472 L 189 536 L 220 598 L 284 630 L 410 662 L 536 662 L 472 598 L 441 536 L 378 346 L 315 158 L 284 94.5 L 220 31.5 L 126 0 L 63 0 L 31.5 31.5 L 31.5 94.5 L 63 126 L 94.5 94.5 L 63 63" />
+<glyph unicode="J" glyph-name="J" horiz-adv-x="536" d="M 536 662 L 472 598 L 410 504 L 346 346 L 252 63 L 189 -63 M 536 441 L 472 378 L 378 346 L 284 346 L 220 378 L 189 441 L 189 504 L 220 567 L 284 630 L 410 662 L 536 662 L 472 567 L 441 504 L 346 220 L 284 94.5 L 252 31.5 L 189 -63 L 158 -94.5 L 94.5 -126 L 63 -94.5 L 63 -31.5 L 94.5 31.5 L 158 94.5 L 220 126 L 315 158 L 441 189" />
+<glyph unicode="K" glyph-name="K" horiz-adv-x="756" d="M 220 472 L 189 504 L 189 567 L 252 630 L 346 662 L 410 662 L 315 315 L 252 126 L 220 63 L 189 31.5 L 126 0 L 63 0 L 31.5 31.5 L 31.5 94.5 L 63 126 L 94.5 94.5 L 63 63 M 410 662 L 315 378 L 284 284 L 220 126 L 189 63 L 126 0 M 662 630 L 567 504 L 504 441 L 441 410 L 346 378 M 756 630 L 724 598 L 756 567 L 788 598 L 788 630 L 756 662 L 724 662 L 662 630 L 567 472 L 536 441 L 472 410 L 346 378 M 346 378 L 441 346 L 472 284 L 504 63 L 536 0 M 346 378 L 410 346 L 441 284 L 472 63 L 536 0 L 567 0 L 630 31.5 L 693 94.5" />
+<glyph unicode="L" glyph-name="L" horiz-adv-x="567" d="M 158 567 L 126 504 L 126 441 L 158 378 L 220 346 L 315 346 L 410 378 L 472 410 L 567 504 L 598 598 L 598 630 L 567 662 L 536 662 L 472 630 L 441 598 L 378 504 L 252 189 L 220 126 L 158 31.5 L 94.5 0 M 441 598 L 378 472 L 315 252 L 284 158 L 252 94.5 L 189 31.5 L 94.5 0 L 31.5 0 L 0 31.5 L 0 94.5 L 31.5 126 L 94.5 126 L 158 94.5 L 252 31.5 L 315 0 L 410 0 L 472 31.5 L 536 94.5" />
+<glyph unicode="M" glyph-name="M" horiz-adv-x="882" d="M 472 662 L 346 378 L 252 189 L 189 94.5 L 126 31.5 L 63 0 L 0 0 L -31.5 31.5 L -31.5 94.5 L 0 126 L 31.5 94.5 L 0 63 M 472 662 L 410 441 L 378 315 L 346 158 L 346 31.5 L 410 0 M 472 662 L 441 536 L 410 378 L 378 158 L 378 31.5 L 410 0 M 756 662 L 630 378 L 472 94.5 L 410 0 M 756 662 L 693 441 L 662 315 L 630 158 L 630 31.5 L 693 0 L 724 0 L 788 31.5 L 850 94.5 M 756 662 L 724 536 L 693 378 L 662 158 L 662 31.5 L 693 0" />
+<glyph unicode="N" glyph-name="N" horiz-adv-x="724" d="M 378 662 L 346 536 L 284 346 L 220 189 L 189 126 L 126 31.5 L 63 0 L 0 0 L -31.5 31.5 L -31.5 94.5 L 0 126 L 31.5 94.5 L 0 63 M 378 662 L 378 504 L 410 158 L 441 0 M 378 662 L 410 504 L 441 158 L 441 0 M 819 630 L 788 598 L 819 567 L 850 598 L 850 630 L 819 662 L 756 662 L 693 630 L 630 536 L 598 472 L 536 315 L 472 126 L 441 0" />
+<glyph unicode="O" glyph-name="O" horiz-adv-x="662" d="M 378 662 L 315 630 L 252 567 L 189 472 L 158 410 L 126 284 L 126 158 L 158 63 L 189 31.5 L 252 0 L 315 0 L 410 31.5 L 472 94.5 L 536 189 L 567 252 L 598 378 L 598 504 L 567 598 L 536 630 L 504 630 L 441 598 L 378 536 L 315 410 L 284 252 L 284 158 M 315 630 L 252 536 L 189 410 L 158 284 L 158 158 L 189 63 L 252 0" />
+<glyph unicode="P" glyph-name="P" horiz-adv-x="724" d="M 504 630 L 472 598 L 441 536 L 378 378 L 315 189 L 284 126 L 220 31.5 L 158 0 M 472 598 L 441 504 L 378 252 L 346 158 L 315 94.5 L 252 31.5 L 158 0 L 94.5 0 L 63 31.5 L 63 94.5 L 94.5 126 L 126 94.5 L 94.5 63 M 315 472 L 284 410 L 252 378 L 189 378 L 158 410 L 158 472 L 189 536 L 252 598 L 315 630 L 410 662 L 536 662 L 630 630 L 662 598 L 693 536 L 693 441 L 662 378 L 630 346 L 536 315 L 472 315 L 410 346 M 536 662 L 598 630 L 630 598 L 662 536 L 662 441 L 630 378 L 598 346 L 536 315" />
+<glyph unicode="Q" glyph-name="Q" horiz-adv-x="662" d="M 441 536 L 441 472 L 410 410 L 378 378 L 315 346 L 252 346 L 220 410 L 220 472 L 252 567 L 315 630 L 410 662 L 504 662 L 567 630 L 598 567 L 598 441 L 567 346 L 504 252 L 378 126 L 284 63 L 220 31.5 L 126 0 L 63 0 L 31.5 31.5 L 31.5 94.5 L 63 126 L 126 126 L 189 94.5 L 284 31.5 L 378 0 L 472 0 L 536 31.5 L 598 94.5 M 504 662 L 536 630 L 567 567 L 567 441 L 536 346 L 472 252 L 378 158 L 252 63 L 126 0" />
+<glyph unicode="R" glyph-name="R" horiz-adv-x="756" d="M 504 630 L 472 598 L 441 536 L 378 378 L 315 189 L 284 126 L 220 31.5 L 158 0 M 472 598 L 441 504 L 378 252 L 346 158 L 315 94.5 L 252 31.5 L 158 0 L 94.5 0 L 63 31.5 L 63 94.5 L 94.5 126 L 126 94.5 L 94.5 63 M 315 472 L 284 410 L 252 378 L 189 378 L 158 410 L 158 472 L 189 536 L 252 598 L 315 630 L 410 662 L 567 662 L 662 630 L 693 567 L 693 504 L 662 441 L 630 410 L 536 378 L 410 378 M 567 662 L 630 630 L 662 567 L 662 504 L 630 441 L 598 410 L 536 378 M 410 378 L 504 346 L 536 284 L 567 63 L 598 0 M 410 378 L 472 346 L 504 284 L 536 63 L 598 0 L 630 0 L 693 31.5 L 756 94.5" />
+<glyph unicode="S" glyph-name="S" horiz-adv-x="630" d="M 220 567 L 189 504 L 189 441 L 220 378 L 284 346 L 378 346 L 472 378 L 536 410 L 630 504 L 662 598 L 662 630 L 630 662 L 598 662 L 536 630 L 504 598 L 472 536 L 441 441 L 378 220 L 346 126 L 284 31.5 L 220 0 M 472 536 L 441 410 L 410 189 L 378 94.5 L 315 31.5 L 220 0 L 126 0 L 63 31.5 L 31.5 94.5 L 31.5 126 L 63 158 L 94.5 126 L 63 94.5" />
+<glyph unicode="T" glyph-name="T" horiz-adv-x="567" d="M 536 598 L 504 536 L 441 378 L 378 189 L 346 126 L 284 31.5 L 220 0 M 346 472 L 315 410 L 252 378 L 189 378 L 158 441 L 158 504 L 189 567 L 252 630 L 346 662 L 630 662 L 567 630 L 536 598 L 504 504 L 441 252 L 410 158 L 378 94.5 L 315 31.5 L 220 0 L 158 0 L 94.5 31.5 L 63 63 L 63 94.5 L 94.5 126 L 126 94.5 L 94.5 63 M 410 662 L 536 630 L 567 630" />
+<glyph unicode="U" glyph-name="U" horiz-adv-x="693" d="M 63 536 L 126 630 L 189 662 L 220 662 L 284 598 L 284 504 L 252 410 L 158 158 L 158 63 L 189 0 M 220 662 L 252 598 L 252 504 L 158 252 L 126 158 L 126 63 L 189 0 L 252 0 L 315 31.5 L 410 126 L 472 220 L 504 284 M 630 662 L 504 284 L 472 158 L 472 63 L 536 0 L 567 0 L 630 31.5 L 693 94.5 M 662 662 L 536 284 L 504 158 L 504 63 L 536 0" />
+<glyph unicode="V" glyph-name="V" horiz-adv-x="662" d="M 63 536 L 126 630 L 189 662 L 220 662 L 284 598 L 284 504 L 252 378 L 189 158 L 189 63 L 220 0 M 220 662 L 252 598 L 252 504 L 189 284 L 158 158 L 158 63 L 220 0 L 252 0 L 346 31.5 L 441 126 L 504 220 L 567 346 L 598 441 L 630 567 L 630 630 L 598 662 L 567 662 L 536 630 L 504 567 L 504 472 L 536 410 L 598 346 L 662 315 L 724 315" />
+<glyph unicode="W" glyph-name="W" horiz-adv-x="724" d="M 126 472 L 94.5 472 L 63 504 L 63 567 L 94.5 630 L 158 662 L 284 662 L 252 598 L 220 472 L 189 189 L 158 0 M 220 472 L 220 189 L 189 0 M 536 662 L 472 598 L 410 472 L 315 189 L 252 63 L 189 0 M 536 662 L 504 598 L 472 472 L 441 189 L 410 0 M 472 472 L 472 189 L 441 0 M 850 662 L 788 630 L 724 567 L 662 472 L 567 189 L 504 63 L 441 0" />
+<glyph unicode="X" glyph-name="X" horiz-adv-x="630" d="M 284 504 L 252 472 L 189 472 L 158 504 L 158 567 L 189 630 L 252 662 L 315 662 L 378 630 L 410 567 L 410 472 L 378 346 L 315 189 L 252 94.5 L 189 31.5 L 94.5 0 L 31.5 0 L 0 31.5 L 0 94.5 L 31.5 126 L 63 94.5 L 31.5 63 M 315 662 L 346 630 L 378 567 L 378 472 L 346 346 L 284 189 L 220 94.5 L 158 31.5 L 94.5 0 M 693 630 L 662 598 L 693 567 L 724 598 L 724 630 L 693 662 L 630 662 L 567 630 L 504 567 L 441 472 L 378 346 L 346 189 L 346 94.5 L 378 31.5 L 410 0 L 441 0 L 504 31.5 L 567 94.5" />
+<glyph unicode="Y" glyph-name="Y" horiz-adv-x="693" d="M 126 536 L 189 630 L 252 662 L 284 662 L 346 630 L 346 567 L 284 378 L 284 284 L 315 220 M 284 662 L 315 630 L 315 567 L 252 378 L 252 284 L 315 220 L 378 220 L 472 252 L 536 315 L 598 410 L 630 472 M 693 662 L 630 472 L 536 220 L 472 94.5 M 724 662 L 662 472 L 598 315 L 536 189 L 472 94.5 L 410 31.5 L 315 0 L 189 0 L 126 31.5 L 94.5 94.5 L 94.5 126 L 126 158 L 158 126 L 126 94.5" />
+<glyph unicode="Z" glyph-name="Z" horiz-adv-x="662" d="M 630 598 L 598 536 L 536 378 L 504 284 L 472 220 L 410 126 L 346 63 L 284 31.5 L 189 0 M 410 472 L 378 410 L 315 378 L 252 378 L 220 441 L 220 504 L 252 567 L 315 630 L 410 662 L 724 662 L 662 630 L 630 598 L 598 504 L 567 378 L 504 189 L 441 94.5 L 346 31.5 L 189 0 L 63 0 L 31.5 31.5 L 31.5 94.5 L 63 126 L 126 126 L 189 94.5 L 284 31.5 L 346 0 L 441 0 L 536 31.5 L 598 94.5 M 504 662 L 630 630 L 662 630" />
+<glyph unicode="[" glyph-name="bracketleft" horiz-adv-x="441" d="M 158 788 L 158 -220 M 189 788 L 189 -220 M 158 788 L 378 788 M 158 -220 L 378 -220" />
+<glyph unicode="\" glyph-name="backslash" horiz-adv-x="441" d="M 31.5 662 L 472 -94.5" />
+<glyph unicode="]" glyph-name="bracketright" horiz-adv-x="441" d="M 315 788 L 315 -220 M 346 788 L 346 -220 M 126 788 L 346 788 M 126 -220 L 346 -220" />
+<glyph unicode="^" glyph-name="asciicircum" horiz-adv-x="693" d="M 126 220 L 378 378 L 630 220 M 126 220 L 378 346 L 630 220" />
+<glyph unicode="_" glyph-name="underscore" horiz-adv-x="504" d="M 31.5 -63 L 536 -63" />
+<glyph unicode="`" glyph-name="grave" horiz-adv-x="346" d="M 315 662 L 252 598 L 220 536 L 220 504 L 252 472 L 284 504 L 252 536" />
+<glyph unicode="a" glyph-name="a" horiz-adv-x="504" d="M 346 189 L 315 252 L 252 284 L 189 284 L 126 252 L 94.5 220 L 63 158 L 63 94.5 L 94.5 31.5 L 158 0 L 220 0 L 284 31.5 L 315 94.5 M 189 284 L 126 220 L 94.5 158 L 94.5 63 L 158 0 M 378 284 L 315 94.5 L 315 31.5 L 378 0 L 441 31.5 L 472 63 L 536 158 M 410 284 L 346 94.5 L 346 31.5 L 378 0" />
+<glyph unicode="b" glyph-name="b" horiz-adv-x="441" d="M 31.5 158 L 94.5 252 L 158 378 M 252 662 L 63 94.5 L 63 31.5 L 126 0 L 158 0 L 220 31.5 L 284 94.5 L 315 189 L 315 284 L 346 158 L 378 126 L 410 126 L 472 158 M 284 662 L 94.5 94.5 L 94.5 31.5 L 126 0" />
+<glyph unicode="c" glyph-name="c" horiz-adv-x="378" d="M 284 252 L 252 220 L 284 220 L 284 252 L 252 284 L 189 284 L 126 252 L 94.5 220 L 63 158 L 63 94.5 L 94.5 31.5 L 158 0 L 252 0 L 346 63 L 410 158 M 189 284 L 126 220 L 94.5 158 L 94.5 63 L 158 0" />
+<glyph unicode="d" glyph-name="d" horiz-adv-x="504" d="M 346 189 L 315 252 L 252 284 L 189 284 L 126 252 L 94.5 220 L 63 158 L 63 94.5 L 94.5 31.5 L 158 0 L 220 0 L 284 31.5 L 315 94.5 M 189 284 L 126 220 L 94.5 158 L 94.5 63 L 158 0 M 504 662 L 315 94.5 L 315 31.5 L 378 0 L 441 31.5 L 472 63 L 536 158 M 536 662 L 346 94.5 L 346 31.5 L 378 0" />
+<glyph unicode="e" glyph-name="e" horiz-adv-x="378" d="M 126 63 L 189 94.5 L 220 126 L 252 189 L 252 252 L 220 284 L 189 284 L 126 252 L 94.5 220 L 63 158 L 63 94.5 L 94.5 31.5 L 158 0 L 252 0 L 346 63 L 410 158 M 189 284 L 126 220 L 94.5 158 L 94.5 63 L 158 0" />
+<glyph unicode="f" glyph-name="f" horiz-adv-x="284" d="M 126 284 L 220 378 L 284 472 L 315 567 L 315 630 L 284 662 L 220 630 L 189 567 L -94.5 -284 L -94.5 -346 L -63 -378 L 0 -346 L 31.5 -252 L 63 31.5 L 94.5 0 L 158 0 L 220 31.5 L 252 63 L 315 158 M 189 567 L 158 410 L 126 284 L 31.5 0 L -31.5 -158 L -94.5 -284" />
+<glyph unicode="g" glyph-name="g" horiz-adv-x="504" d="M 346 189 L 315 252 L 252 284 L 189 284 L 126 252 L 94.5 220 L 63 158 L 63 94.5 L 94.5 31.5 L 158 0 L 220 0 L 284 31.5 L 315 94.5 M 189 284 L 126 220 L 94.5 158 L 94.5 63 L 158 0 M 378 284 L 189 -284 M 410 284 L 315 0 L 252 -158 L 189 -284 L 158 -346 L 94.5 -378 L 63 -346 L 63 -284 L 94.5 -189 L 158 -126 L 252 -63 L 378 0 L 472 63 L 536 158" />
+<glyph unicode="h" glyph-name="h" horiz-adv-x="472" d="M 31.5 158 L 94.5 252 L 158 378 M 252 662 L 31.5 0 M 284 662 L 63 0 M 126 189 L 189 252 L 252 284 L 284 284 L 346 252 L 346 189 L 315 94.5 L 315 31.5 L 346 0 M 284 284 L 315 252 L 315 189 L 284 94.5 L 284 31.5 L 346 0 L 410 31.5 L 441 63 L 504 158" />
+<glyph unicode="i" glyph-name="i" horiz-adv-x="252" d="M 189 472 L 158 441 L 189 410 L 220 441 L 189 472 M 126 284 L 63 94.5 L 63 31.5 L 126 0 L 189 31.5 L 220 63 L 284 158 M 158 284 L 94.5 94.5 L 94.5 31.5 L 126 0" />
+<glyph unicode="j" glyph-name="j" horiz-adv-x="252" d="M 189 472 L 158 441 L 189 410 L 220 441 L 189 472 M 126 284 L -63 -284 M 158 284 L 63 0 L 0 -158 L -63 -284 L -94.5 -346 L -158 -378 L -189 -346 L -189 -284 L -158 -189 L -94.5 -126 L 0 -63 L 126 0 L 220 63 L 284 158" />
+<glyph unicode="k" glyph-name="k" horiz-adv-x="441" d="M 31.5 158 L 94.5 252 L 158 378 M 252 662 L 31.5 0 M 284 662 L 63 0 M 315 284 L 315 252 L 346 252 L 315 284 L 284 284 L 220 220 L 126 189 M 126 189 L 220 158 L 252 31.5 L 284 0 M 126 189 L 189 158 L 220 31.5 L 284 0 L 315 0 L 410 63 L 472 158" />
+<glyph unicode="l" glyph-name="l" horiz-adv-x="252" d="M 31.5 158 L 94.5 252 L 158 378 M 252 662 L 63 94.5 L 63 31.5 L 126 0 L 189 31.5 L 220 63 L 284 158 M 284 662 L 94.5 94.5 L 94.5 31.5 L 126 0" />
+<glyph unicode="m" glyph-name="m" horiz-adv-x="788" d="M 31.5 158 L 94.5 252 L 158 284 L 220 252 L 220 189 L 158 0 M 158 284 L 189 252 L 189 189 L 126 0 M 220 189 L 284 252 L 346 284 L 378 284 L 441 252 L 441 189 L 378 0 M 378 284 L 410 252 L 410 189 L 346 0 M 441 189 L 504 252 L 567 284 L 598 284 L 662 252 L 662 189 L 630 94.5 L 630 31.5 L 662 0 M 598 284 L 630 252 L 630 189 L 598 94.5 L 598 31.5 L 662 0 L 724 31.5 L 756 63 L 819 158" />
+<glyph unicode="n" glyph-name="n" horiz-adv-x="567" d="M 31.5 158 L 94.5 252 L 158 284 L 220 252 L 220 189 L 158 0 M 158 284 L 189 252 L 189 189 L 126 0 M 220 189 L 284 252 L 346 284 L 378 284 L 441 252 L 441 189 L 410 94.5 L 410 31.5 L 441 0 M 378 284 L 410 252 L 410 189 L 378 94.5 L 378 31.5 L 441 0 L 504 31.5 L 536 63 L 598 158" />
+<glyph unicode="o" glyph-name="o" horiz-adv-x="441" d="M 252 284 L 189 284 L 126 252 L 94.5 220 L 63 158 L 63 94.5 L 94.5 31.5 L 158 0 L 220 0 L 284 31.5 L 315 63 L 346 126 L 346 189 L 315 252 L 252 284 L 220 252 L 220 189 L 252 126 L 315 94.5 L 378 94.5 L 441 126 L 472 158 M 189 284 L 126 220 L 94.5 158 L 94.5 63 L 158 0" />
+<glyph unicode="p" glyph-name="p" horiz-adv-x="472" d="M 31.5 158 L 94.5 252 L 158 378 M 189 472 L -94.5 -378 M 220 472 L -63 -378 M 126 189 L 189 252 L 252 284 L 284 284 L 346 252 L 346 189 L 315 94.5 L 315 31.5 L 346 0 M 284 284 L 315 252 L 315 189 L 284 94.5 L 284 31.5 L 346 0 L 410 31.5 L 441 63 L 504 158" />
+<glyph unicode="q" glyph-name="q" horiz-adv-x="504" d="M 346 189 L 315 252 L 252 284 L 189 284 L 126 252 L 94.5 220 L 63 158 L 63 94.5 L 94.5 31.5 L 158 0 L 220 0 L 284 31.5 M 189 284 L 126 220 L 94.5 158 L 94.5 63 L 158 0 M 378 284 L 189 -284 L 189 -346 L 220 -378 L 284 -346 L 315 -252 L 315 0 L 378 0 L 472 63 L 536 158 M 410 284 L 315 0 L 252 -158 L 189 -284" />
+<glyph unicode="r" glyph-name="r" horiz-adv-x="441" d="M 31.5 158 L 94.5 252 L 158 284 L 220 252 L 220 189 L 158 0 M 158 284 L 189 252 L 189 189 L 126 0 M 220 189 L 284 252 L 346 284 L 378 284 L 346 189 M 346 284 L 346 189 L 378 126 L 410 126 L 472 158" />
+<glyph unicode="s" glyph-name="s" horiz-adv-x="378" d="M 31.5 158 L 94.5 252 L 126 315 L 126 252 L 220 189 L 252 126 L 252 63 L 220 31.5 L 158 0 M 126 252 L 189 189 L 220 126 L 220 63 L 158 0 M 31.5 31.5 L 94.5 0 L 252 0 L 346 63 L 410 158" />
+<glyph unicode="t" glyph-name="t" horiz-adv-x="252" d="M 31.5 158 L 94.5 252 L 158 378 M 252 662 L 63 94.5 L 63 31.5 L 126 0 L 189 31.5 L 220 63 L 284 158 M 284 662 L 94.5 94.5 L 94.5 31.5 L 126 0 M 94.5 410 L 284 410" />
+<glyph unicode="u" glyph-name="u" horiz-adv-x="504" d="M 126 284 L 63 94.5 L 63 31.5 L 126 0 L 158 0 L 220 31.5 L 284 94.5 L 346 189 M 158 284 L 94.5 94.5 L 94.5 31.5 L 126 0 M 378 284 L 315 94.5 L 315 31.5 L 378 0 L 441 31.5 L 472 63 L 536 158 M 410 284 L 346 94.5 L 346 31.5 L 378 0" />
+<glyph unicode="v" glyph-name="v" horiz-adv-x="472" d="M 126 284 L 94.5 220 L 63 126 L 63 31.5 L 126 0 L 158 0 L 252 31.5 L 315 94.5 L 346 189 L 346 284 M 158 284 L 126 220 L 94.5 126 L 94.5 31.5 L 126 0 M 346 284 L 378 158 L 410 126 L 441 126 L 504 158" />
+<glyph unicode="w" glyph-name="w" horiz-adv-x="662" d="M 158 284 L 94.5 220 L 63 126 L 63 31.5 L 126 0 L 158 0 L 220 31.5 L 284 94.5 M 189 284 L 126 220 L 94.5 126 L 94.5 31.5 L 126 0 M 346 284 L 284 94.5 L 284 31.5 L 346 0 L 378 0 L 441 31.5 L 504 94.5 L 536 189 L 536 284 M 378 284 L 315 94.5 L 315 31.5 L 346 0 M 536 284 L 567 158 L 598 126 L 630 126 L 693 158" />
+<glyph unicode="x" glyph-name="x" horiz-adv-x="504" d="M 31.5 158 L 94.5 252 L 158 284 L 220 284 L 252 252 L 252 189 L 220 94.5 L 189 31.5 L 126 0 L 94.5 0 L 63 31.5 L 63 63 L 94.5 63 L 63 31.5 M 441 252 L 410 220 L 441 220 L 441 252 L 410 284 L 378 284 L 315 252 L 284 189 L 252 94.5 L 252 31.5 L 284 0 L 378 0 L 472 63 L 536 158 M 252 252 L 284 189 M 315 252 L 252 189 M 220 94.5 L 252 31.5 M 252 94.5 L 189 31.5" />
+<glyph unicode="y" glyph-name="y" horiz-adv-x="504" d="M 126 284 L 63 94.5 L 63 31.5 L 126 0 L 158 0 L 220 31.5 L 284 94.5 L 346 189 M 158 284 L 94.5 94.5 L 94.5 31.5 L 126 0 M 378 284 L 189 -284 M 410 284 L 315 0 L 252 -158 L 189 -284 L 158 -346 L 94.5 -378 L 63 -346 L 63 -284 L 94.5 -189 L 158 -126 L 252 -63 L 378 0 L 472 63 L 536 158" />
+<glyph unicode="z" glyph-name="z" horiz-adv-x="410" d="M 31.5 158 L 94.5 252 L 158 284 L 220 284 L 284 252 L 284 158 L 252 94.5 L 158 31.5 L 94.5 0 M 220 284 L 252 252 L 252 158 L 220 94.5 L 158 31.5 M 94.5 0 L 158 -31.5 L 189 -94.5 L 189 -189 L 158 -284 L 94.5 -346 L 31.5 -378 L 0 -346 L 0 -284 L 31.5 -189 L 126 -94.5 L 220 -31.5 L 346 63 L 441 158 M 94.5 0 L 126 -31.5 L 158 -94.5 L 158 -189 L 126 -284 L 94.5 -346" />
+<glyph unicode="{" glyph-name="braceleft" horiz-adv-x="441" d="M 315 788 L 252 756 L 220 724 L 189 662 L 189 598 L 220 536 L 252 504 L 284 441 L 284 378 L 220 315 M 252 756 L 220 693 L 220 630 L 252 567 L 284 536 L 315 472 L 315 410 L 284 346 L 158 284 L 284 220 L 315 158 L 315 94.5 L 284 31.5 L 252 0 L 220 -63 L 220 -126 L 252 -189 M 220 252 L 284 189 L 284 126 L 252 63 L 220 31.5 L 189 -31.5 L 189 -94.5 L 220 -158 L 252 -189 L 315 -220" />
+<glyph unicode="|" glyph-name="bar" horiz-adv-x="252" d="M 158 788 L 158 -220" />
+<glyph unicode="}" glyph-name="braceright" horiz-adv-x="441" d="M 189 788 L 252 756 L 284 724 L 315 662 L 315 598 L 284 536 L 252 504 L 220 441 L 220 378 L 284 315 M 252 756 L 284 693 L 284 630 L 252 567 L 220 536 L 189 472 L 189 410 L 220 346 L 346 284 L 220 220 L 189 158 L 189 94.5 L 220 31.5 L 252 0 L 284 -63 L 284 -126 L 252 -189 M 284 252 L 220 189 L 220 126 L 252 63 L 284 31.5 L 315 -31.5 L 315 -94.5 L 284 -158 L 252 -189 L 189 -220" />
+<glyph unicode="~" glyph-name="asciitilde" horiz-adv-x="756" d="M 126 189 L 126 252 L 158 346 L 220 378 L 284 378 L 346 346 L 472 252 L 536 220 L 598 220 L 662 252 L 693 315 M 126 252 L 158 315 L 220 346 L 284 346 L 346 315 L 472 220 L 536 189 L 598 189 L 662 220 L 693 315 L 693 378" />
+<glyph unicode="&#xa0;" glyph-name="nbspace" horiz-adv-x="378" />
+<glyph unicode="&#xa1;" glyph-name="exclamdown" horiz-adv-x="346" d="M 126 0 L 158 31.5 L 220 410 M 126 31.5 L 220 410 M 126 0 L 94.5 31.5 L 220 410 M 284 598 L 315 630 L 284 662 L 252 630 L 284 598" />
+<glyph unicode="&#xa2;" glyph-name="cent" horiz-adv-x="151" d="M 284 252 L 252 220 L 284 220 L 284 252 L 252 284 L 189 284 L 126 252 L 94.5 220 L 63 158 L 63 94.5 L 94.5 31.5 L 158 0 L 252 0 L 346 63 L 410 158 M 189 284 L 126 220 L 94.5 158 L 94.5 63 L 158 0 M 227 472 L 227 -132" />
+<glyph unicode="&#xa3;" glyph-name="sterling" horiz-adv-x="567" d="M 158 236 L 441 236 M 158 567 L 126 504 L 126 441 L 158 378 L 220 346 L 315 346 L 410 378 L 472 410 L 567 504 L 598 598 L 598 630 L 567 662 L 536 662 L 472 630 L 441 598 L 378 504 L 252 189 L 220 126 L 158 31.5 L 94.5 0 M 441 598 L 378 472 L 315 252 L 284 158 L 252 94.5 L 189 31.5 L 94.5 0 L 31.5 0 L 0 31.5 L 0 94.5 L 31.5 126 L 94.5 126 L 158 94.5 L 252 31.5 L 315 0 L 410 0 L 472 31.5 L 536 94.5" />
+<glyph unicode="&#xa5;" glyph-name="yen" horiz-adv-x="598" d="M 158 662 L 378 346 L 378 0 L 410 0 M 158 662 L 189 662 L 410 346 M 630 662 L 598 662 L 378 346 M 630 662 L 410 346 L 410 0 M 227 189 L 567 189 M 227 265 L 567 265" />
+<glyph unicode="&#xa6;" glyph-name="brokenbar" horiz-adv-x="75.6" d="M 217 236 L 217 -66.1 M 217 709 L 217 406" />
+<glyph unicode="&#xa8;" glyph-name="dieresis" horiz-adv-x="567" d=" M 218 536 L 186 504 L 218 472 L 249 504 L 218 536 M 475 536 L 444 504 L 475 472 L 507 504 L 475 536" />
+<glyph unicode="&#xa9;" glyph-name="copyright" horiz-adv-x="693" d="M 378 662 L 315 630 L 252 567 L 220 504 L 189 410 L 189 252 L 220 158 L 252 94.5 L 315 31.5 L 378 0 L 504 0 L 567 31.5 L 630 94.5 L 662 158 L 693 252 L 693 410 L 662 504 L 630 567 L 567 630 L 504 662 L 378 662 M 410 630 L 315 598 L 252 504 L 220 410 L 220 252 L 252 158 L 315 63 L 410 31.5 L 472 31.5 L 567 63 L 630 158 L 662 252 L 662 410 L 630 504 L 567 598 L 472 630 L 410 630 M 551 410 L 536 441 L 504 472 L 472 488 L 410 488 L 378 472 L 346 441 L 331 410 L 315 362 L 315 284 L 331 236 L 346 205 L 378 173 L 410 158 L 472 158 L 504 173 L 536 205 L 551 236 M 551 410 L 536 410 L 520 441 L 504 457 L 472 472 L 410 472 L 378 457 L 346 410 L 331 362 L 331 284 L 346 236 L 378 189 L 410 173 L 472 173 L 504 189 L 520 205 L 536 236 L 551 236" />
+<glyph unicode="&#xaa;" glyph-name="ordfeminine" horiz-adv-x="252" d="M 299 724 L 284 756 L 252 772 L 220 772 L 189 756 L 173 740 L 158 709 L 158 677 L 173 646 L 205 630 L 236 630 L 268 646 L 284 677 M 220 772 L 189 740 L 173 709 L 173 662 L 205 630 M 315 772 L 284 677 L 284 646 L 315 630 L 346 646 L 362 662 L 394 709 M 331 772 L 299 677 L 299 646 L 315 630" />
+<glyph unicode="&#xab;" glyph-name="guillemotleft" horiz-adv-x="454" d="M 265 454 L 63 227 L 265 0 M 391 454 L 189 227 L 391 0" />
+<glyph unicode="&#xae;" glyph-name="registered" horiz-adv-x="693" d="M 378 662 L 315 630 L 252 567 L 220 504 L 189 410 L 189 252 L 220 158 L 252 94.5 L 315 31.5 L 378 0 L 504 0 L 567 31.5 L 630 94.5 L 662 158 L 693 252 L 693 410 L 662 504 L 630 567 L 567 630 L 504 662 L 378 662 M 410 630 L 315 598 L 252 504 L 220 410 L 220 252 L 252 158 L 315 63 L 410 31.5 L 472 31.5 L 567 63 L 630 158 L 662 252 L 662 410 L 630 504 L 567 598 L 472 630 L 410 630 M 331 488 L 331 158 M 346 472 L 346 158 L 331 158 M 331 488 L 457 488 L 504 472 L 520 457 L 536 425 L 536 378 L 520 346 L 504 331 L 457 315 L 346 315 M 346 472 L 457 472 L 504 457 L 520 425 L 520 378 L 504 346 L 457 331 L 346 331 M 425 315 L 520 158 L 536 158 M 441 315 L 536 158" />
+<glyph unicode="&#xb0;" glyph-name="degree" horiz-adv-x="238" d="M 236 765 L 217 756 L 198 737 L 180 709 L 170 690 L 161 652 L 161 614 L 170 586 L 180 576 L 198 567 L 217 567 L 246 576 L 265 595 L 284 624 L 293 643 L 302 680 L 302 718 L 293 747 L 284 756 L 274 756 L 255 747 L 236 728 L 217 690 L 208 643 L 208 614 M 217 756 L 198 728 L 180 690 L 170 652 L 170 614 L 180 586 L 198 567" />
+<glyph unicode="&#xb1;" glyph-name="plusminus" horiz-adv-x="655" d="M 580 37.8 L 1033.2 37.8 M 806 643 L 806 189 M 580 416 L 1033.2 416" />
+<glyph unicode="&#xb2;" glyph-name="twosuperior" horiz-adv-x="331" d="M 252 898 L 268 882 L 252 866 L 236 882 L 236 898 L 252 929 L 268 945 L 315 961 L 362 961 L 410 945 L 425 914 L 425 882 L 410 850 L 378 819 L 331 788 L 268 756 L 220 724 L 189 693 L 158 630 M 362 961 L 394 945 L 410 914 L 410 882 L 394 850 L 362 819 L 268 756 M 173 662 L 189 677 L 220 677 L 299 646 L 346 646 L 378 662 L 394 693 M 220 677 L 299 630 L 346 630 L 378 646 L 394 693" />
+<glyph unicode="&#xb3;" glyph-name="threesuperior" horiz-adv-x="331" d="M 252 898 L 268 882 L 252 866 L 236 882 L 236 898 L 252 929 L 268 945 L 315 961 L 362 961 L 410 945 L 425 914 L 425 882 L 410 850 L 362 819 L 315 803 M 362 961 L 394 945 L 410 914 L 410 882 L 394 850 L 362 819 M 284 803 L 315 803 L 362 788 L 378 772 L 394 740 L 394 693 L 378 662 L 362 646 L 315 630 L 252 630 L 205 646 L 189 662 L 173 693 L 173 709 L 189 724 L 205 709 L 189 693 M 315 803 L 346 788 L 362 772 L 378 740 L 378 693 L 362 662 L 346 646 L 315 630" />
+<glyph unicode="&#xb4;" glyph-name="acute" horiz-adv-x="378" d=" M 378 693 L 220 504 M 378 693 L 410 662 L 220 504" />
+<glyph unicode="&#xb7;" glyph-name="middot" horiz-adv-x="374" d="M 265 378 L 227 340 L 265 302 L 302 340 L 265 378" />
+<glyph unicode="&#xb9;" glyph-name="onesuperior" horiz-adv-x="331" d="M 331 898 L 252 630 M 362 961 L 268 630 M 362 961 L 315 914 L 268 882 L 236 866 M 346 914 L 284 882 L 236 866" />
+<glyph unicode="&#xba;" glyph-name="ordmasculine" horiz-adv-x="238" d="M 236 765 L 217 756 L 198 737 L 180 709 L 170 690 L 161 652 L 161 614 L 170 586 L 180 576 L 198 567 L 217 567 L 246 576 L 265 595 L 284 624 L 293 643 L 302 680 L 302 718 L 293 747 L 284 756 L 274 756 L 255 747 L 236 728 L 217 690 L 208 643 L 208 614 M 217 756 L 198 728 L 180 690 L 170 652 L 170 614 L 180 586 L 198 567" />
+<glyph unicode="&#xbb;" glyph-name="guillemotright" horiz-adv-x="454" d="M 63 454 L 265 227 L 63 0 M 189 454 L 391 227 L 189 0" />
+<glyph unicode="&#xbc;" glyph-name="onequarter" horiz-adv-x="714" d="M 246 699 L 151 378 M 284 775 L 170 378 M 284 775 L 227 718 L 170 680 L 132 662 M 265 718 L 189 680 L 132 662 M 819 788 L 0 -220 M 813 378 L 699 0 M 832 397 L 718 0 M 832 397 L 548 113 L 850 113" />
+<glyph unicode="&#xbd;" glyph-name="onehalf" horiz-adv-x="714" d="M 246 699 L 151 378 M 284 775 L 170 378 M 284 775 L 227 718 L 170 680 L 132 662 M 265 718 L 189 680 L 132 662 M 819 788 L 0 -220 M 643 321 L 662 302 L 643 284 L 624 302 L 624 321 L 643 359 L 662 378 L 718 397 L 775 397 L 832 378 L 850 340 L 850 302 L 832 265 L 794 227 L 737 189 L 662 151 L 605 113 L 567 75.6 L 529 0 M 775 397 L 813 378 L 832 340 L 832 302 L 813 265 L 775 227 L 662 151 M 548 37.8 L 567 56.7 L 605 56.7 L 699 18.9 L 756 18.9 L 794 37.8 L 813 75.6 M 605 56.7 L 699 0 L 756 0 L 794 18.9 L 813 75.6" />
+<glyph unicode="&#xbe;" glyph-name="threequarters" horiz-adv-x="714" d="M 151 699 L 170 680 L 151 662 L 132 680 L 132 699 L 151 737 L 170 756 L 227 775 L 284 775 L 340 756 L 359 718 L 359 680 L 340 643 L 284 605 L 227 586 M 284 775 L 321 756 L 340 718 L 340 680 L 321 643 L 284 605 M 189 586 L 227 586 L 284 567 L 302 548 L 321 510 L 321 454 L 302 416 L 284 397 L 227 378 L 151 378 L 94.5 397 L 75.6 416 L 56.7 454 L 56.7 472 L 75.6 491 L 94.5 472 L 75.6 454 M 227 586 L 265 567 L 284 548 L 302 510 L 302 454 L 284 416 L 265 397 L 227 378 M 819 788 L 0 -220 M 813 378 L 699 0 M 832 397 L 718 0 M 832 397 L 548 113 L 850 113" />
+<glyph unicode="&#xbf;" glyph-name="questiondown" horiz-adv-x="662" d="M 472 126 L 441 158 L 472 189 L 504 158 L 504 126 L 472 63 L 441 31.5 L 346 0 L 220 0 L 126 31.5 L 94.5 94.5 L 94.5 158 L 126 220 L 158 252 L 346 315 L 410 346 L 410 410 L 378 441 L 315 441 M 220 0 L 158 31.5 L 126 94.5 L 126 158 L 158 220 L 189 252 L 252 284 M 441 598 L 472 630 L 441 662 L 410 630 L 441 598" />
+<glyph unicode="&#xc0;" glyph-name="Agrave" horiz-adv-x="724" d="M 630 662 L 567 598 L 504 504 L 410 346 L 346 252 L 252 126 L 158 31.5 L 94.5 0 L 31.5 0 L 0 31.5 L 0 94.5 L 31.5 126 L 63 94.5 L 31.5 63 M 630 662 L 598 536 L 536 220 L 504 0 M 630 662 L 536 0 M 504 0 L 504 63 L 472 158 L 441 220 L 378 284 L 315 315 L 252 315 L 220 284 L 220 220 L 252 126 L 346 31.5 L 441 0 L 567 0 L 630 31.5 M 394 1039.5 L 551 850 M 394 1039.5 L 362 1008.0 L 551 850" />
+<glyph unicode="&#xc1;" glyph-name="Aacute" horiz-adv-x="724" d="M 630 662 L 567 598 L 504 504 L 410 346 L 346 252 L 252 126 L 158 31.5 L 94.5 0 L 31.5 0 L 0 31.5 L 0 94.5 L 31.5 126 L 63 94.5 L 31.5 63 M 630 662 L 598 536 L 536 220 L 504 0 M 630 662 L 536 0 M 504 0 L 504 63 L 472 158 L 441 220 L 378 284 L 315 315 L 252 315 L 220 284 L 220 220 L 252 126 L 346 31.5 L 441 0 L 567 0 L 630 31.5 M 740 1071.0 L 583 882 M 740 1071.0 L 772 1039.5 L 583 882" />
+<glyph unicode="&#xc2;" glyph-name="Acircumflex" horiz-adv-x="724" d="M 630 662 L 567 598 L 504 504 L 410 346 L 346 252 L 252 126 L 158 31.5 L 94.5 0 L 31.5 0 L 0 31.5 L 0 94.5 L 31.5 126 L 63 94.5 L 31.5 63 M 630 662 L 598 536 L 536 220 L 504 0 M 630 662 L 536 0 M 504 0 L 504 63 L 472 158 L 441 220 L 378 284 L 315 315 L 252 315 L 220 284 L 220 220 L 252 126 L 346 31.5 L 441 0 L 567 0 L 630 31.5 M 387 756 L 539 850 L 690 756 M 387 756 L 539 832 L 690 756" />
+<glyph unicode="&#xc3;" glyph-name="Atilde" horiz-adv-x="724" d="M 630 662 L 567 598 L 504 504 L 410 346 L 346 252 L 252 126 L 158 31.5 L 94.5 0 L 31.5 0 L 0 31.5 L 0 94.5 L 31.5 126 L 63 94.5 L 31.5 63 M 630 662 L 598 536 L 536 220 L 504 0 M 630 662 L 536 0 M 504 0 L 504 63 L 472 158 L 441 220 L 378 284 L 315 315 L 252 315 L 220 284 L 220 220 L 252 126 L 346 31.5 L 441 0 L 567 0 L 630 31.5 M 420 803 L 420 835 L 436 882 L 467 898 L 499 898 L 530 882 L 593 835 L 625 819 L 656 819 L 688 835 L 704 866 M 420 835 L 436 866 L 467 882 L 499 882 L 530 866 L 593 819 L 625 803 L 656 803 L 688 819 L 704 866 L 704 898" />
+<glyph unicode="&#xc4;" glyph-name="Adieresis" horiz-adv-x="724" d="M 630 662 L 567 598 L 504 504 L 410 346 L 346 252 L 252 126 L 158 31.5 L 94.5 0 L 31.5 0 L 0 31.5 L 0 94.5 L 31.5 126 L 63 94.5 L 31.5 63 M 630 662 L 598 536 L 536 220 L 504 0 M 630 662 L 536 0 M 504 0 L 504 63 L 472 158 L 441 220 L 378 284 L 315 315 L 252 315 L 220 284 L 220 220 L 252 126 L 346 31.5 L 441 0 L 567 0 L 630 31.5 M 423 914 L 392 882 L 423 850 L 455 882 L 423 914 M 679 914 L 648 882 L 679 850 L 711 882 L 679 914" />
+<glyph unicode="&#xc5;" glyph-name="Aring" horiz-adv-x="630" d="M 410 662 L 158 0 M 410 567 L 189 0 L 158 0 M 410 567 L 630 0 L 662 0 M 410 662 L 662 0 M 252 189 L 567 189 M 220 158 L 598 158 M 378 1048.9 L 359 1039.5 L 340 1020.6 L 331 1001.7 L 321 973 L 321 926 L 331 898 L 340 879 L 359 860 L 378 850 L 416 850 L 435 860 L 454 879 L 463 898 L 472 926 L 472 973 L 463 1001.7 L 454 1020.6 L 435 1039.5 L 416 1048.9 L 378 1048.9 M 387 1039.5 L 359 1030.0 L 340 1001.7 L 331 973 L 331 926 L 340 898 L 359 869 L 387 860 L 406 860 L 435 869 L 454 898 L 463 926 L 463 973 L 454 1001.7 L 435 1030.0 L 406 1039.5 L 387 1039.5" />
+<glyph unicode="&#xc8;" glyph-name="Egrave" horiz-adv-x="598" d="M 472 567 L 441 536 L 441 472 L 472 441 L 536 441 L 567 504 L 567 567 L 536 630 L 472 662 L 378 662 L 315 630 L 284 598 L 252 536 L 252 472 L 284 410 L 346 378 M 378 662 L 315 598 L 284 536 L 284 441 L 346 378 M 346 378 L 284 378 L 189 346 L 126 284 L 94.5 220 L 94.5 126 L 126 63 L 158 31.5 L 220 0 L 315 0 L 410 31.5 L 472 94.5 L 504 158 L 504 220 L 472 284 L 410 284 L 346 252 L 315 189 M 284 378 L 220 346 L 158 284 L 126 220 L 126 94.5 L 158 31.5 M 331 1039.5 L 488 850 M 331 1039.5 L 299 1008.0 L 488 850" />
+<glyph unicode="&#xc9;" glyph-name="Eacute" horiz-adv-x="598" d="M 472 567 L 441 536 L 441 472 L 472 441 L 536 441 L 567 504 L 567 567 L 536 630 L 472 662 L 378 662 L 315 630 L 284 598 L 252 536 L 252 472 L 284 410 L 346 378 M 378 662 L 315 598 L 284 536 L 284 441 L 346 378 M 346 378 L 284 378 L 189 346 L 126 284 L 94.5 220 L 94.5 126 L 126 63 L 158 31.5 L 220 0 L 315 0 L 410 31.5 L 472 94.5 L 504 158 L 504 220 L 472 284 L 410 284 L 346 252 L 315 189 M 284 378 L 220 346 L 158 284 L 126 220 L 126 94.5 L 158 31.5 M 677 1071.0 L 520 882 M 677 1071.0 L 709 1039.5 L 520 882" />
+<glyph unicode="&#xca;" glyph-name="Ecircumflex" horiz-adv-x="598" d="M 472 567 L 441 536 L 441 472 L 472 441 L 536 441 L 567 504 L 567 567 L 536 630 L 472 662 L 378 662 L 315 630 L 284 598 L 252 536 L 252 472 L 284 410 L 346 378 M 378 662 L 315 598 L 284 536 L 284 441 L 346 378 M 346 378 L 284 378 L 189 346 L 126 284 L 94.5 220 L 94.5 126 L 126 63 L 158 31.5 L 220 0 L 315 0 L 410 31.5 L 472 94.5 L 504 158 L 504 220 L 472 284 L 410 284 L 346 252 L 315 189 M 284 378 L 220 346 L 158 284 L 126 220 L 126 94.5 L 158 31.5 M 274 756 L 425 850 L 576 756 M 274 756 L 425 832 L 576 756" />
+<glyph unicode="&#xcb;" glyph-name="Edieresis" horiz-adv-x="598" d="M 472 567 L 441 536 L 441 472 L 472 441 L 536 441 L 567 504 L 567 567 L 536 630 L 472 662 L 378 662 L 315 630 L 284 598 L 252 536 L 252 472 L 284 410 L 346 378 M 378 662 L 315 598 L 284 536 L 284 441 L 346 378 M 346 378 L 284 378 L 189 346 L 126 284 L 94.5 220 L 94.5 126 L 126 63 L 158 31.5 L 220 0 L 315 0 L 410 31.5 L 472 94.5 L 504 158 L 504 220 L 472 284 L 410 284 L 346 252 L 315 189 M 284 378 L 220 346 L 158 284 L 126 220 L 126 94.5 L 158 31.5 M 365 914 L 334 882 L 365 850 L 397 882 L 365 914 M 611 914 L 580 882 L 611 850 L 643 882 L 611 914" />
+<glyph unicode="&#xcc;" glyph-name="Igrave" horiz-adv-x="504" d="M 472 598 L 410 504 L 346 346 L 284 189 L 252 126 L 189 31.5 L 126 0 M 536 472 L 472 410 L 378 378 L 284 378 L 220 410 L 189 472 L 189 536 L 220 598 L 284 630 L 410 662 L 536 662 L 472 598 L 441 536 L 378 346 L 315 158 L 284 94.5 L 220 31.5 L 126 0 L 63 0 L 31.5 31.5 L 31.5 94.5 L 63 126 L 94.5 94.5 L 63 63 M 284 1039.5 L 441 850 M 284 1039.5 L 252 1008.0 L 441 850" />
+<glyph unicode="&#xcd;" glyph-name="Iacute" horiz-adv-x="504" d="M 472 598 L 410 504 L 346 346 L 284 189 L 252 126 L 189 31.5 L 126 0 M 536 472 L 472 410 L 378 378 L 284 378 L 220 410 L 189 472 L 189 536 L 220 598 L 284 630 L 410 662 L 536 662 L 472 598 L 441 536 L 378 346 L 315 158 L 284 94.5 L 220 31.5 L 126 0 L 63 0 L 31.5 31.5 L 31.5 94.5 L 63 126 L 94.5 94.5 L 63 63 M 630 1071.0 L 472 882 M 630 1071.0 L 662 1039.5 L 472 882" />
+<glyph unicode="&#xce;" glyph-name="Icircumflex" horiz-adv-x="504" d="M 472 598 L 410 504 L 346 346 L 284 189 L 252 126 L 189 31.5 L 126 0 M 536 472 L 472 410 L 378 378 L 284 378 L 220 410 L 189 472 L 189 536 L 220 598 L 284 630 L 410 662 L 536 662 L 472 598 L 441 536 L 378 346 L 315 158 L 284 94.5 L 220 31.5 L 126 0 L 63 0 L 31.5 31.5 L 31.5 94.5 L 63 126 L 94.5 94.5 L 63 63 M 246 756 L 397 850 L 548 756 M 246 756 L 397 832 L 548 756" />
+<glyph unicode="&#xcf;" glyph-name="Idieresis" horiz-adv-x="504" d="M 472 598 L 410 504 L 346 346 L 284 189 L 252 126 L 189 31.5 L 126 0 M 536 472 L 472 410 L 378 378 L 284 378 L 220 410 L 189 472 L 189 536 L 220 598 L 284 630 L 410 662 L 536 662 L 472 598 L 441 536 L 378 346 L 315 158 L 284 94.5 L 220 31.5 L 126 0 L 63 0 L 31.5 31.5 L 31.5 94.5 L 63 126 L 94.5 94.5 L 63 63 M 321 914 L 289 882 L 321 850 L 352 882 L 321 914 M 561 914 L 530 882 L 561 850 L 593 882 L 561 914" />
+<glyph unicode="&#xd0;" glyph-name="Eth" horiz-adv-x="724" d="M 158 236 L 441 236 M 504 630 L 472 598 L 441 536 L 378 378 L 315 189 L 284 126 L 220 31.5 L 158 0 M 472 598 L 441 504 L 378 252 L 346 158 L 315 94.5 L 252 31.5 L 158 0 L 94.5 0 L 63 31.5 L 63 94.5 L 94.5 126 L 158 126 L 220 94.5 L 284 31.5 L 346 0 L 441 0 L 504 31.5 L 567 94.5 L 630 220 L 662 378 L 662 472 L 630 567 L 567 630 L 504 662 L 346 662 L 252 630 L 189 567 L 158 504 L 158 441 L 189 410 L 252 410 L 284 441 L 315 504" />
+<glyph unicode="&#xd1;" glyph-name="Ntilde" horiz-adv-x="724" d="M 378 662 L 346 536 L 284 346 L 220 189 L 189 126 L 126 31.5 L 63 0 L 0 0 L -31.5 31.5 L -31.5 94.5 L 0 126 L 31.5 94.5 L 0 63 M 378 662 L 378 504 L 410 158 L 441 0 M 378 662 L 410 504 L 441 158 L 441 0 M 819 630 L 788 598 L 819 567 L 850 598 L 850 630 L 819 662 L 756 662 L 693 630 L 630 536 L 598 472 L 536 315 L 472 126 L 441 0 M 404 803 L 404 835 L 420 882 L 452 898 L 483 898 L 515 882 L 578 835 L 609 819 L 641 819 L 672 835 L 688 866 M 404 835 L 420 866 L 452 882 L 483 882 L 515 866 L 578 819 L 609 803 L 641 803 L 672 819 L 688 866 L 688 898" />
+<glyph unicode="&#xd2;" glyph-name="Ograve" horiz-adv-x="662" d="M 378 662 L 315 630 L 252 567 L 189 472 L 158 410 L 126 284 L 126 158 L 158 63 L 189 31.5 L 252 0 L 315 0 L 410 31.5 L 472 94.5 L 536 189 L 567 252 L 598 378 L 598 504 L 567 598 L 536 630 L 504 630 L 441 598 L 378 536 L 315 410 L 284 252 L 284 158 M 315 630 L 252 536 L 189 410 L 158 284 L 158 158 L 189 63 L 252 0 M 362 1039.5 L 520 850 M 362 1039.5 L 331 1008.0 L 520 850" />
+<glyph unicode="&#xd3;" glyph-name="Oacute" horiz-adv-x="662" d="M 378 662 L 315 630 L 252 567 L 189 472 L 158 410 L 126 284 L 126 158 L 158 63 L 189 31.5 L 252 0 L 315 0 L 410 31.5 L 472 94.5 L 536 189 L 567 252 L 598 378 L 598 504 L 567 598 L 536 630 L 504 630 L 441 598 L 378 536 L 315 410 L 284 252 L 284 158 M 315 630 L 252 536 L 189 410 L 158 284 L 158 158 L 189 63 L 252 0 M 709 1071.0 L 551 882 M 709 1071.0 L 740 1039.5 L 551 882" />
+<glyph unicode="&#xd4;" glyph-name="Ocircumflex" horiz-adv-x="662" d="M 378 662 L 315 630 L 252 567 L 189 472 L 158 410 L 126 284 L 126 158 L 158 63 L 189 31.5 L 252 0 L 315 0 L 410 31.5 L 472 94.5 L 536 189 L 567 252 L 598 378 L 598 504 L 567 598 L 536 630 L 504 630 L 441 598 L 378 536 L 315 410 L 284 252 L 284 158 M 315 630 L 252 536 L 189 410 L 158 284 L 158 158 L 189 63 L 252 0 M 293 756 L 444 850 L 595 756 M 293 756 L 444 832 L 595 756" />
+<glyph unicode="&#xd5;" glyph-name="Otilde" horiz-adv-x="662" d="M 378 662 L 315 630 L 252 567 L 189 472 L 158 410 L 126 284 L 126 158 L 158 63 L 189 31.5 L 252 0 L 315 0 L 410 31.5 L 472 94.5 L 536 189 L 567 252 L 598 378 L 598 504 L 567 598 L 536 630 L 504 630 L 441 598 L 378 536 L 315 410 L 284 252 L 284 158 M 315 630 L 252 536 L 189 410 L 158 284 L 158 158 L 189 63 L 252 0 M 284 803 L 284 835 L 299 882 L 331 898 L 362 898 L 394 882 L 457 835 L 488 819 L 520 819 L 551 835 L 567 866 M 284 835 L 299 866 L 331 882 L 362 882 L 394 866 L 457 819 L 488 803 L 520 803 L 551 819 L 567 866 L 567 898" />
+<glyph unicode="&#xd6;" glyph-name="Odieresis" horiz-adv-x="662" d="M 378 662 L 315 630 L 252 567 L 189 472 L 158 410 L 126 284 L 126 158 L 158 63 L 189 31.5 L 252 0 L 315 0 L 410 31.5 L 472 94.5 L 536 189 L 567 252 L 598 378 L 598 504 L 567 598 L 536 630 L 504 630 L 441 598 L 378 536 L 315 410 L 284 252 L 284 158 M 315 630 L 252 536 L 189 410 L 158 284 L 158 158 L 189 63 L 252 0 M 396 914 L 364 882 L 396 850 L 427 882 L 396 914 M 644 914 L 612 882 L 644 850 L 675 882 L 644 914" />
+<glyph unicode="&#xd7;" glyph-name="multiply" horiz-adv-x="567" d="M 189 441 L 536 0 L 567 0 M 189 441 L 220 441 L 567 0 M 567 441 L 536 441 L 189 0 M 567 441 L 220 0 L 189 0" />
+<glyph unicode="&#xd8;" glyph-name="Oslash" horiz-adv-x="662" d="M 378 662 L 315 630 L 252 567 L 189 472 L 158 410 L 126 284 L 126 158 L 158 63 L 189 31.5 L 252 0 L 315 0 L 410 31.5 L 472 94.5 L 536 189 L 567 252 L 598 378 L 598 504 L 567 598 L 536 630 L 504 630 L 441 598 L 378 536 L 315 410 L 284 252 L 284 158 M 315 630 L 252 536 L 189 410 L 158 284 L 158 158 L 189 63 L 252 0 M 680 658 L 90.7 -68" />
+<glyph unicode="&#xd9;" glyph-name="Ugrave" horiz-adv-x="693" d="M 63 536 L 126 630 L 189 662 L 220 662 L 284 598 L 284 504 L 252 410 L 158 158 L 158 63 L 189 0 M 220 662 L 252 598 L 252 504 L 158 252 L 126 158 L 126 63 L 189 0 L 252 0 L 315 31.5 L 410 126 L 472 220 L 504 284 M 630 662 L 504 284 L 472 158 L 472 63 L 536 0 L 567 0 L 630 31.5 L 693 94.5 M 662 662 L 536 284 L 504 158 L 504 63 L 536 0 M 378 1039.5 L 536 850 M 378 1039.5 L 346 1008.0 L 536 850" />
+<glyph unicode="&#xda;" glyph-name="Uacute" horiz-adv-x="693" d="M 63 536 L 126 630 L 189 662 L 220 662 L 284 598 L 284 504 L 252 410 L 158 158 L 158 63 L 189 0 M 220 662 L 252 598 L 252 504 L 158 252 L 126 158 L 126 63 L 189 0 L 252 0 L 315 31.5 L 410 126 L 472 220 L 504 284 M 630 662 L 504 284 L 472 158 L 472 63 L 536 0 L 567 0 L 630 31.5 L 693 94.5 M 662 662 L 536 284 L 504 158 L 504 63 L 536 0 M 724 1071.0 L 567 882 M 724 1071.0 L 756 1039.5 L 567 882" />
+<glyph unicode="&#xdb;" glyph-name="Ucircumflex" horiz-adv-x="693" d="M 63 536 L 126 630 L 189 662 L 220 662 L 284 598 L 284 504 L 252 410 L 158 158 L 158 63 L 189 0 M 220 662 L 252 598 L 252 504 L 158 252 L 126 158 L 126 63 L 189 0 L 252 0 L 315 31.5 L 410 126 L 472 220 L 504 284 M 630 662 L 504 284 L 472 158 L 472 63 L 536 0 L 567 0 L 630 31.5 L 693 94.5 M 662 662 L 536 284 L 504 158 L 504 63 L 536 0 M 302 756 L 454 850 L 605 756 M 302 756 L 454 832 L 605 756" />
+<glyph unicode="&#xdc;" glyph-name="Udieresis" horiz-adv-x="693" d="M 63 536 L 126 630 L 189 662 L 220 662 L 284 598 L 284 504 L 252 410 L 158 158 L 158 63 L 189 0 M 220 662 L 252 598 L 252 504 L 158 252 L 126 158 L 126 63 L 189 0 L 252 0 L 315 31.5 L 410 126 L 472 220 L 504 284 M 630 662 L 504 284 L 472 158 L 472 63 L 536 0 L 567 0 L 630 31.5 L 693 94.5 M 662 662 L 536 284 L 504 158 L 504 63 L 536 0 M 412 914 L 380 882 L 412 850 L 443 882 L 412 914 M 659 914 L 628 882 L 659 850 L 691 882 L 659 914" />
+<glyph unicode="&#xdd;" glyph-name="Yacute" horiz-adv-x="693" d="M 126 536 L 189 630 L 252 662 L 284 662 L 346 630 L 346 567 L 284 378 L 284 284 L 315 220 M 284 662 L 315 630 L 315 567 L 252 378 L 252 284 L 315 220 L 378 220 L 472 252 L 536 315 L 598 410 L 630 472 M 693 662 L 630 472 L 536 220 L 472 94.5 M 724 662 L 662 472 L 598 315 L 536 189 L 472 94.5 L 410 31.5 L 315 0 L 189 0 L 126 31.5 L 94.5 94.5 L 94.5 126 L 126 158 L 158 126 L 126 94.5 M 724 1071.0 L 567 882 M 724 1071.0 L 756 1039.5 L 567 882" />
+<glyph unicode="&#xe0;" glyph-name="agrave" horiz-adv-x="504" d="M 346 189 L 315 252 L 252 284 L 189 284 L 126 252 L 94.5 220 L 63 158 L 63 94.5 L 94.5 31.5 L 158 0 L 220 0 L 284 31.5 L 315 94.5 M 189 284 L 126 220 L 94.5 158 L 94.5 63 L 158 0 M 378 284 L 315 94.5 L 315 31.5 L 378 0 L 441 31.5 L 472 63 L 536 158 M 410 284 L 346 94.5 L 346 31.5 L 378 0 M 158 693 L 315 504 M 158 693 L 126 662 L 315 504" />
+<glyph unicode="&#xe1;" glyph-name="aacute" horiz-adv-x="504" d="M 346 189 L 315 252 L 252 284 L 189 284 L 126 252 L 94.5 220 L 63 158 L 63 94.5 L 94.5 31.5 L 158 0 L 220 0 L 284 31.5 L 315 94.5 M 189 284 L 126 220 L 94.5 158 L 94.5 63 L 158 0 M 378 284 L 315 94.5 L 315 31.5 L 378 0 L 441 31.5 L 472 63 L 536 158 M 410 284 L 346 94.5 L 346 31.5 L 378 0 M 441 693 L 284 504 M 441 693 L 472 662 L 284 504" />
+<glyph unicode="&#xe2;" glyph-name="acircumflex" horiz-adv-x="504" d="M 346 189 L 315 252 L 252 284 L 189 284 L 126 252 L 94.5 220 L 63 158 L 63 94.5 L 94.5 31.5 L 158 0 L 220 0 L 284 31.5 L 315 94.5 M 189 284 L 126 220 L 94.5 158 L 94.5 63 L 158 0 M 378 284 L 315 94.5 L 315 31.5 L 378 0 L 441 31.5 L 472 63 L 536 158 M 410 284 L 346 94.5 L 346 31.5 L 378 0 M 113 416 L 265 510 L 416 416 M 113 416 L 265 491 L 416 416" />
+<glyph unicode="&#xe3;" glyph-name="atilde" horiz-adv-x="504" d="M 346 189 L 315 252 L 252 284 L 189 284 L 126 252 L 94.5 220 L 63 158 L 63 94.5 L 94.5 31.5 L 158 0 L 220 0 L 284 31.5 L 315 94.5 M 189 284 L 126 220 L 94.5 158 L 94.5 63 L 158 0 M 378 284 L 315 94.5 L 315 31.5 L 378 0 L 441 31.5 L 472 63 L 536 158 M 410 284 L 346 94.5 L 346 31.5 L 378 0 M 147 441 L 147 472 L 163 520 L 194 536 L 226 536 L 257 520 L 320 472 L 352 457 L 383 457 L 415 472 L 430 504 M 147 472 L 163 504 L 194 520 L 226 520 L 257 504 L 320 457 L 352 441 L 383 441 L 415 457 L 430 504 L 430 536" />
+<glyph unicode="&#xe4;" glyph-name="adieresis" horiz-adv-x="504" d="M 346 189 L 315 252 L 252 284 L 189 284 L 126 252 L 94.5 220 L 63 158 L 63 94.5 L 94.5 31.5 L 158 0 L 220 0 L 284 31.5 L 315 94.5 M 189 284 L 126 220 L 94.5 158 L 94.5 63 L 158 0 M 378 284 L 315 94.5 L 315 31.5 L 378 0 L 441 31.5 L 472 63 L 536 158 M 410 284 L 346 94.5 L 346 31.5 L 378 0 M 191 536 L 159 504 L 191 472 L 222 504 L 191 536 M 439 536 L 408 504 L 439 472 L 471 504 L 439 536" />
+<glyph unicode="&#xe5;" glyph-name="aring" horiz-adv-x="630" d="M 567 441 L 567 0 L 598 0 M 567 441 L 598 441 L 598 0 M 567 346 L 504 410 L 441 441 L 346 441 L 284 410 L 220 346 L 189 252 L 189 189 L 220 94.5 L 284 31.5 L 346 0 L 441 0 L 504 31.5 L 567 94.5 M 567 346 L 441 410 L 346 410 L 284 378 L 252 346 L 220 252 L 220 189 L 252 94.5 L 284 63 L 346 31.5 L 441 31.5 L 567 94.5 M 397 860 L 378 850 L 359 832 L 350 813 L 340 784 L 340 737 L 350 709 L 359 690 L 378 671 L 397 662 L 435 662 L 454 671 L 472 690 L 482 709 L 491 737 L 491 784 L 482 813 L 472 832 L 454 850 L 435 860 L 397 860 M 406 850 L 378 841 L 359 813 L 350 784 L 350 737 L 359 709 L 378 680 L 406 671 L 425 671 L 454 680 L 472 709 L 482 737 L 482 784 L 472 813 L 454 841 L 425 850 L 406 850" />
+<glyph unicode="&#xe8;" glyph-name="egrave" horiz-adv-x="378" d="M 126 63 L 189 94.5 L 220 126 L 252 189 L 252 252 L 220 284 L 189 284 L 126 252 L 94.5 220 L 63 158 L 63 94.5 L 94.5 31.5 L 158 0 L 252 0 L 346 63 L 410 158 M 189 284 L 126 220 L 94.5 158 L 94.5 63 L 158 0 M 94.5 693 L 252 504 M 94.5 693 L 63 662 L 252 504" />
+<glyph unicode="&#xe9;" glyph-name="eacute" horiz-adv-x="378" d="M 126 63 L 189 94.5 L 220 126 L 252 189 L 252 252 L 220 284 L 189 284 L 126 252 L 94.5 220 L 63 158 L 63 94.5 L 94.5 31.5 L 158 0 L 252 0 L 346 63 L 410 158 M 189 284 L 126 220 L 94.5 158 L 94.5 63 L 158 0 M 378 693 L 220 504 M 378 693 L 410 662 L 220 504" />
+<glyph unicode="&#xea;" glyph-name="ecircumflex" horiz-adv-x="378" d="M 126 63 L 189 94.5 L 220 126 L 252 189 L 252 252 L 220 284 L 189 284 L 126 252 L 94.5 220 L 63 158 L 63 94.5 L 94.5 31.5 L 158 0 L 252 0 L 346 63 L 410 158 M 189 284 L 126 220 L 94.5 158 L 94.5 63 L 158 0 M 75.6 416 L 227 510 L 378 416 M 75.6 416 L 227 491 L 378 416" />
+<glyph unicode="&#xeb;" glyph-name="edieresis" horiz-adv-x="378" d="M 126 63 L 189 94.5 L 220 126 L 252 189 L 252 252 L 220 284 L 189 284 L 126 252 L 94.5 220 L 63 158 L 63 94.5 L 94.5 31.5 L 158 0 L 252 0 L 346 63 L 410 158 M 189 284 L 126 220 L 94.5 158 L 94.5 63 L 158 0 M 123 536 L 91.2 504 L 123 472 L 154 504 L 123 536 M 381 536 L 350 504 L 381 472 L 413 504 L 381 536" />
+<glyph unicode="&#xec;" glyph-name="igrave" horiz-adv-x="252" d="M 126 284 L 63 94.5 L 63 31.5 L 126 0 L 189 31.5 L 220 63 L 284 158 M 158 284 L 94.5 94.5 L 94.5 31.5 L 126 0 M 31.5 693 L 189 504 M 31.5 693 L 0 662 L 189 504" />
+<glyph unicode="&#xed;" glyph-name="iacute" horiz-adv-x="252" d="M 126 284 L 63 94.5 L 63 31.5 L 126 0 L 189 31.5 L 220 63 L 284 158 M 158 284 L 94.5 94.5 L 94.5 31.5 L 126 0 M 315 693 L 158 504 M 315 693 L 346 662 L 158 504" />
+<glyph unicode="&#xee;" glyph-name="icircumflex" horiz-adv-x="252" d="M 126 284 L 63 94.5 L 63 31.5 L 126 0 L 189 31.5 L 220 63 L 284 158 M 158 284 L 94.5 94.5 L 94.5 31.5 L 126 0 M 37.8 416 L 189 510 L 340 416 M 37.8 416 L 189 491 L 340 416" />
+<glyph unicode="&#xef;" glyph-name="idieresis" horiz-adv-x="252" d="M 126 284 L 63 94.5 L 63 31.5 L 126 0 L 189 31.5 L 220 63 L 284 158 M 158 284 L 94.5 94.5 L 94.5 31.5 L 126 0 M 62.2 536 L 30.7 504 L 62.2 472 L 93.7 504 L 62.2 536 M 316 536 L 284 504 L 316 472 L 347 504 L 316 536" />
+<glyph unicode="&#xf1;" glyph-name="ntilde" horiz-adv-x="567" d="M 31.5 158 L 94.5 252 L 158 284 L 220 252 L 220 189 L 158 0 M 158 284 L 189 252 L 189 189 L 126 0 M 220 189 L 284 252 L 346 284 L 378 284 L 441 252 L 441 189 L 410 94.5 L 410 31.5 L 441 0 M 378 284 L 410 252 L 410 189 L 378 94.5 L 378 31.5 L 441 0 L 504 31.5 L 536 63 L 598 158 M 158 441 L 158 472 L 173 520 L 205 536 L 236 536 L 268 520 L 331 472 L 362 457 L 394 457 L 425 472 L 441 504 M 158 472 L 173 504 L 205 520 L 236 520 L 268 504 L 331 457 L 362 441 L 394 441 L 425 457 L 441 504 L 441 536" />
+<glyph unicode="&#xf2;" glyph-name="ograve" horiz-adv-x="441" d="M 252 284 L 189 284 L 126 252 L 94.5 220 L 63 158 L 63 94.5 L 94.5 31.5 L 158 0 L 220 0 L 284 31.5 L 315 63 L 346 126 L 346 189 L 315 252 L 252 284 L 220 252 L 220 189 L 252 126 L 315 94.5 L 378 94.5 L 441 126 L 472 158 M 189 284 L 126 220 L 94.5 158 L 94.5 63 L 158 0 M 126 693 L 284 504 M 126 693 L 94.5 662 L 284 504" />
+<glyph unicode="&#xf3;" glyph-name="oacute" horiz-adv-x="441" d="M 252 284 L 189 284 L 126 252 L 94.5 220 L 63 158 L 63 94.5 L 94.5 31.5 L 158 0 L 220 0 L 284 31.5 L 315 63 L 346 126 L 346 189 L 315 252 L 252 284 L 220 252 L 220 189 L 252 126 L 315 94.5 L 378 94.5 L 441 126 L 472 158 M 189 284 L 126 220 L 94.5 158 L 94.5 63 L 158 0 M 410 693 L 252 504 M 410 693 L 441 662 L 252 504" />
+<glyph unicode="&#xf4;" glyph-name="ocircumflex" horiz-adv-x="441" d="M 252 284 L 189 284 L 126 252 L 94.5 220 L 63 158 L 63 94.5 L 94.5 31.5 L 158 0 L 220 0 L 284 31.5 L 315 63 L 346 126 L 346 189 L 315 252 L 252 284 L 220 252 L 220 189 L 252 126 L 315 94.5 L 378 94.5 L 441 126 L 472 158 M 189 284 L 126 220 L 94.5 158 L 94.5 63 L 158 0 M 94.5 416 L 246 510 L 397 416 M 94.5 416 L 246 491 L 397 416" />
+<glyph unicode="&#xf5;" glyph-name="otilde" horiz-adv-x="441" d="M 252 284 L 189 284 L 126 252 L 94.5 220 L 63 158 L 63 94.5 L 94.5 31.5 L 158 0 L 220 0 L 284 31.5 L 315 63 L 346 126 L 346 189 L 315 252 L 252 284 L 220 252 L 220 189 L 252 126 L 315 94.5 L 378 94.5 L 441 126 L 472 158 M 189 284 L 126 220 L 94.5 158 L 94.5 63 L 158 0 M 137 441 L 137 472 L 152 520 L 184 536 L 215 536 L 247 520 L 310 472 L 341 457 L 373 457 L 404 472 L 420 504 M 137 472 L 152 504 L 184 520 L 215 520 L 247 504 L 310 457 L 341 441 L 373 441 L 404 457 L 420 504 L 420 536" />
+<glyph unicode="&#xf6;" glyph-name="odieresis" horiz-adv-x="441" d="M 252 284 L 189 284 L 126 252 L 94.5 220 L 63 158 L 63 94.5 L 94.5 31.5 L 158 0 L 220 0 L 284 31.5 L 315 63 L 346 126 L 346 189 L 315 252 L 252 284 L 220 252 L 220 189 L 252 126 L 315 94.5 L 378 94.5 L 441 126 L 472 158 M 189 284 L 126 220 L 94.5 158 L 94.5 63 L 158 0 M 162 536 L 131 504 L 162 472 L 194 504 L 162 536 M 405 536 L 373 504 L 405 472 L 436 504 L 405 536" />
+<glyph unicode="&#xf7;" glyph-name="divide" horiz-adv-x="614" d="M 346 536 L 315 504 L 346 472 L 378 504 L 346 536 M 346 252 L 315 220 L 346 189 L 378 220 L 346 252 M 118 378 L 543 378" />
+<glyph unicode="&#xf8;" glyph-name="oslash" horiz-adv-x="441" d="M 252 284 L 189 284 L 126 252 L 94.5 220 L 63 158 L 63 94.5 L 94.5 31.5 L 158 0 L 220 0 L 284 31.5 L 315 63 L 346 126 L 346 189 L 315 252 L 252 284 L 220 252 L 220 189 L 252 126 L 315 94.5 L 378 94.5 L 441 126 L 472 158 M 189 284 L 126 220 L 94.5 158 L 94.5 63 L 158 0 M 386 386 L -15.4 -108" />
+<glyph unicode="&#xf9;" glyph-name="ugrave" horiz-adv-x="504" d="M 126 284 L 63 94.5 L 63 31.5 L 126 0 L 158 0 L 220 31.5 L 284 94.5 L 346 189 M 158 284 L 94.5 94.5 L 94.5 31.5 L 126 0 M 378 284 L 315 94.5 L 315 31.5 L 378 0 L 441 31.5 L 472 63 L 536 158 M 410 284 L 346 94.5 L 346 31.5 L 378 0 M 158 693 L 315 504 M 158 693 L 126 662 L 315 504" />
+<glyph unicode="&#xfa;" glyph-name="uacute" horiz-adv-x="504" d="M 126 284 L 63 94.5 L 63 31.5 L 126 0 L 158 0 L 220 31.5 L 284 94.5 L 346 189 M 158 284 L 94.5 94.5 L 94.5 31.5 L 126 0 M 378 284 L 315 94.5 L 315 31.5 L 378 0 L 441 31.5 L 472 63 L 536 158 M 410 284 L 346 94.5 L 346 31.5 L 378 0 M 441 693 L 284 504 M 441 693 L 472 662 L 284 504" />
+<glyph unicode="&#xfb;" glyph-name="ucircumflex" horiz-adv-x="504" d="M 126 284 L 63 94.5 L 63 31.5 L 126 0 L 158 0 L 220 31.5 L 284 94.5 L 346 189 M 158 284 L 94.5 94.5 L 94.5 31.5 L 126 0 M 378 284 L 315 94.5 L 315 31.5 L 378 0 L 441 31.5 L 472 63 L 536 158 M 410 284 L 346 94.5 L 346 31.5 L 378 0 M 113 416 L 265 510 L 416 416 M 113 416 L 265 491 L 416 416" />
+<glyph unicode="&#xfc;" glyph-name="udieresis" horiz-adv-x="504" d="M 126 284 L 63 94.5 L 63 31.5 L 126 0 L 158 0 L 220 31.5 L 284 94.5 L 346 189 M 158 284 L 94.5 94.5 L 94.5 31.5 L 126 0 M 378 284 L 315 94.5 L 315 31.5 L 378 0 L 441 31.5 L 472 63 L 536 158 M 410 284 L 346 94.5 L 346 31.5 L 378 0 M 191 536 L 160 504 L 191 472 L 223 504 L 191 536 M 439 536 L 407 504 L 439 472 L 470 504 L 439 536" />
+<glyph unicode="&#xfd;" glyph-name="yacute" horiz-adv-x="504" d="M 126 284 L 63 94.5 L 63 31.5 L 126 0 L 158 0 L 220 31.5 L 284 94.5 L 346 189 M 158 284 L 94.5 94.5 L 94.5 31.5 L 126 0 M 378 284 L 189 -284 M 410 284 L 315 0 L 252 -158 L 189 -284 L 158 -346 L 94.5 -378 L 63 -346 L 63 -284 L 94.5 -189 L 158 -126 L 252 -63 L 378 0 L 472 63 L 536 158 M 441 693 L 284 504 M 441 693 L 472 662 L 284 504" />
+<glyph unicode="&#xff;" glyph-name="ydieresis" horiz-adv-x="504" d="M 126 284 L 63 94.5 L 63 31.5 L 126 0 L 158 0 L 220 31.5 L 284 94.5 L 346 189 M 158 284 L 94.5 94.5 L 94.5 31.5 L 126 0 M 378 284 L 189 -284 M 410 284 L 315 0 L 252 -158 L 189 -284 L 158 -346 L 94.5 -378 L 63 -346 L 63 -284 L 94.5 -189 L 158 -126 L 252 -63 L 378 0 L 472 63 L 536 158 M 193 536 L 162 504 L 193 472 L 225 504 L 193 536 M 437 536 L 405 504 L 437 472 L 468 504 L 437 536" />
+<glyph unicode="&#x2013;" glyph-name="endash" horiz-adv-x="614" d="M 118 284 L 543 284" />
+<glyph unicode="&#x2014;" glyph-name="emdash" horiz-adv-x="819" d="M 158 284 L 724 284" />
+<glyph unicode="&#x201c;" glyph-name="quotedblleft" horiz-adv-x="378" d="M 227 879 L 198 822 L 184 765 L 184 737 L 198 709 L 213 737 L 198 765 M 369 879 L 340 822 L 326 765 L 326 737 L 340 709 L 354 737 L 340 765" />
+<glyph unicode="&#x201d;" glyph-name="quotedblright" horiz-adv-x="378" d="M 184 539 L 170 567 L 184 595 L 198 567 L 198 539 L 184 482 L 156 425 M 326 539 L 312 567 L 326 595 L 340 567 L 340 539 L 326 482 L 298 425" />
+<glyph unicode="&#x2039;" glyph-name="guilsinglleft" horiz-adv-x="302" d="M 265 454 L 63 227 L 265 0" />
+<glyph unicode="&#x203a;" glyph-name="guilsinglright" horiz-adv-x="302" d="M 63 454 L 265 227 L 63 0" />
+<glyph unicode="&#x20ac;" glyph-name="Euro" horiz-adv-x="662" d="M 662 504 L 630 567 L 567 630 L 504 662 L 378 662 L 315 630 L 252 567 L 220 504 L 189 410 L 189 252 L 220 158 L 252 94.5 L 315 31.5 L 378 0 L 504 0 L 567 31.5 L 630 94.5 L 662 158 M 662 504 L 630 504 L 598 567 L 567 598 L 504 630 L 378 630 L 315 598 L 252 504 L 220 410 L 220 252 L 252 158 L 315 63 L 378 31.5 L 504 31.5 L 567 63 L 598 94.5 L 630 158 L 662 158 M 126 236 L 410 236 M 126 331 L 410 331" />
+<glyph unicode="&#x0178;" glyph-name="Ydieresis" horiz-adv-x="693" d="M 126 536 L 189 630 L 252 662 L 284 662 L 346 630 L 346 567 L 284 378 L 284 284 L 315 220 M 284 662 L 315 630 L 315 567 L 252 378 L 252 284 L 315 220 L 378 220 L 472 252 L 536 315 L 598 410 L 630 472 M 693 662 L 630 472 L 536 220 L 472 94.5 M 724 662 L 662 472 L 598 315 L 536 189 L 472 94.5 L 410 31.5 L 315 0 L 189 0 L 126 31.5 L 94.5 94.5 L 94.5 126 L 126 158 L 158 126 L 126 94.5 M 405 914 L 373 882 L 405 850 L 436 882 L 405 914 M 666 914 L 635 882 L 666 850 L 698 882 L 666 914" />
+<glyph unicode="&#xe7;" glyph-name="ccedilla" horiz-adv-x="378" d="M284.0 252.0L252.0 220.0L284.0 220.0L284.0 252.0L252.0 284.0L189.0 284.0L126.0 252.0L94.5 220.0L63.0 158.0L63.0 94.5L94.5 31.5L158.0 0.0L252.0 0.0L346.0 63.0L410.0 158.0M189.0 284.0L126.0 220.0L94.5 158.0L94.5 63.0L158.0 0.0" />
+<glyph unicode="&#xe7;" glyph-name="ccedilla" horiz-adv-x="378" d="M205.50776 0.51077027C211.51265 -70.843594 203.48153 -75.310271 179.74673 -87.0079M205.50776 0.51077027C211.51265 -70.843594 227.65409 -89.813806 179.74673 -87.0079" />
+<glyph unicode="&#xdf;" glyph-name="germandbls" horiz-adv-x="756" d="M182.0 -0.0L244.0 31.5L308.0 126.0L339.0 189.0L402.0 378.0L465.0 536.0L496.0 598.0L561.28841 659.82087L622.0 662.0C622.0 662.0 669.34576 646.76066 686.0 630.0C702.65424 613.23934 711.96779 588.62453 717.0 567.0C722.03221 545.37547 722.03221 525.62453 717.0 504.0C711.96779 482.37547 686.0 441.0 686.0 441.0L622.0 410.0L496.0 378.0M496.0 598.0L465.0 504.0L402.0 252.0L370.0 158.0L339.0 94.5L276.0 31.5L182.0 -0.0L118.5 -0.0L87.0 31.5C87.0 31.5 80.140544 77.939809 87.0 94.5C93.859456 111.06019 103.65075999999999 126.0 118.5 126.0C133.34924 126.0 150.0 109.34924000000001 150.0 94.5C150.0 79.650758 118.5 63.0 118.5 63.0M622.0 662.0C622.0 662.0 642.65425 645.63683 654.0 630.0C665.34575 614.36317 680.81324 588.66463 686.0 567.0C691.18676 545.33537 691.18676 525.66463 686.0 504.0C680.81324 482.33537 654.0 441.0 654.0 441.0L622.0 410.0M496.0 378.0L591.0 346.0L622.0 315.0C622.0 315.0 647.61028 278.6893 654.0 252.0C660.38972 225.3107 659.23616 189.94787 654.0 158.0C648.76384 126.05213 634.60648 83.508642 622.0 63.0C609.39352 42.491358000000005 591.0 31.5 591.0 31.5L528.0 -0.0C528.0 -0.0 481.47849 -6.9029635 465.0 -0.0C448.52151 6.9029635 440.77092 14.966816 434.0 31.5C427.22908 48.033184 434.0 94.5 434.0 94.5M496.0 378.0L560.0 346.0L591.0 315.0C591.0 315.0 615.79676 278.65674 622.0 252.0C628.20324 225.34326 627.07637 189.92052999999999 622.0 158.0C616.92363 126.07947 607.47787 89.851385 591.0 63.0C574.52213 36.148615 528.0 -0.0 528.0 -0.0" />
+<glyph unicode="&#xb8;" glyph-name="cedilla" horiz-adv-x="662" d="M334.0 -0.0C337.6051 -10.106733 335.09874 -25.160187 341.35397 -33.432766C372.99474 -75.277889 354.02185000000003 -146.08275 270.04014 -110.12407C300.40822000000003 -109.97435 325.66815 -108.46797000000001 333.07396 -81.404363C341.75581 -44.75115400000001 306.73007 -51.97781500000001 307.80777 -0.7622168000000045Z" />
+<glyph unicode="&#xc7;" glyph-name="Ccedilla" horiz-adv-x="662" d="M334.0 -0.0C337.6051 -10.106733 335.09874 -25.160187 341.35397 -33.432766C372.99474 -75.277889 354.02185000000003 -146.08275 270.04014 -110.12407C300.40822000000003 -109.97435 325.66815 -108.46797000000001 333.07396 -81.404363C341.75581 -44.75115400000001 306.73007 -51.97781500000001 307.80777 -0.7622168000000045ZM126.0 598.0L94.5 536.0L94.5 472.0L126.0 410.0L220.0 378.0L315.0 378.0L441.0 410.0L504.0 441.0L567.0 504.0L598.0 567.0L598.0 630.0L567.0 662.0L504.0 662.0L410.0 630.0L315.0 536.0L252.0 441.0L189.0 315.0L158.0 189.0L158.0 94.5L189.0 31.5L284.0 -0.0L346.0 -0.0L441.0 31.5L504.0 94.5L536.0 158.0L536.0 220.0L504.0 284.0L441.0 284.0L378.0 252.0L346.0 189.0M504.0 662.0L441.0 630.0L346.0 536.0L284.0 441.0L220.0 315.0L189.0 189.0L189.0 94.5L220.0 31.5L284.0 -0.0" />
+</font>
+</defs>
+</svg>
\ No newline at end of file
diff --git a/.claude/skills-media/embedded-captions/dna/README.md b/.claude/skills-media/embedded-captions/dna/README.md
new file mode 100644
index 000000000..2a5575157
--- /dev/null
+++ b/.claude/skills-media/embedded-captions/dna/README.md
@@ -0,0 +1,148 @@
+# DNA registry — pick a visual language, not a preset
+
+A **DNA** is a complete, art-directed visual language: typeface, palette logic, motion
+grammar, and hero orchestration. It **parameterizes per scene** instead of shipping a
+fixed look: the accent color is sampled from THIS scene, the contact shadow falls along
+THIS scene's light, embed text blur matches THIS scene's depth-of-field, and the hero's
+entrance amplitude follows how hard the word was actually spoken (RMS).
+
+This replaces the template grab-bag. Six deep languages × scene adaptation beats 54
+shallow presets — every render is already fitted to its footage.
+
+## Category lock (deliveries field, enforced by the compilers)
+
+Every classic DNA's **home is Cinematic (column)** — that is where all ten were
+built and validated. (Standard/rail mode was retired 2026-06-12; the verbatim-rail
+need is served by the `anchor` theme. The old rail combos live in
+`~/Downloads/embedded-captions-archive/`.)
+
+## The ten
+
+| DNA             | Register       | Scene fit                                       | Voice                                                                                                                                                                       |
+| --------------- | -------------- | ----------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| **cream**       | premium-warm   | dark / mid warm scenes (band luma < 150)        | Inter, warm cream, screen blend, glowing emergence hero. The poetic default.                                                                                                |
+| **ink**         | premium        | **bright scenes (band luma > 150)**             | Inter, near-black, multiply blend — type reads as _printed on_ the wall. Fixes the bright-scene hole.                                                                       |
+| **editorial**   | editorial-luxe | introspective / fashion / poetic, mid-dark      | Bodoni Moda, bone, _lowercase italic hero_ — magazine elegance over shout.                                                                                                  |
+| **keynote**     | tech-premium   | product / launch / founder updates              | Inter 800, opaque white, line-wipe reveals, hero wipes UP. Stillness = confidence.                                                                                          |
+| **documentary** | formal         | interviews, serious subject matter              | Inter, bone, **burn-in reveals**, no hero. Gravitas IS the style.                                                                                                           |
+| **loud**        | loud           | hype / sport / music / social                   | Anton, scene-sampled accent hero, single-unit slam + caption-layer ripple; **body announces in front** (`bodyLayer: "fg"` — k-pop depth, deliberate).                       |
+| **neon**        | loud-cyber     | cyberpunk / nightlife / tech-noir (dark scenes) | Orbitron + electric cyan; words flicker-ignite like tubes; the hero **powers ON** with a strobe and hums (glow 0.5).                                                        |
+| **glitch**      | loud-cyber     | digital / hacker / AI / dystopia                | Space Grotesk; **RGB-split echo layers converge** as each beat lands; 0.10–0.12s machine percussion; landing bumps co-visible captions 2px.                                 |
+| **chrome**      | loud-luxe      | Y2K / fashion-tech / music                      | Audiowide cast in a **liquid-metal gradient** (background-clip:text on the word spans); one sheen sweep crosses the hero during the hold.                                   |
+| **velocity**    | loud-sport     | sport / automotive / fitness                    | Teko italic; every word arrives **along its motion vector** (streak + skew settling upright); the hero passes through with blurred speed-trail echoes and looms while held. |
+
+### fx fields (hero block) the engine understands
+
+`entrance: emergence | settle | slam | rise | wipe-up | flicker-on | streak` ·
+`glow` (0–0.5) · `echoes: [{dx,dy,color,opacity,blur}]` (converge-on-land duplicates) ·
+`sheen: true` (gradient sweep — pair with `wordCss` background-clip) · `wordCss`
+(per-word treatment; required for background-clip:text, which can't clip through
+composited children) · `ripple` (px — landing bump, captions only) · `loom` / `breathe`
+(hold-life) · `letterBlur` · `bodyLayer` (top-level: default layer for narration lines).
+
+## How to pick (agent)
+
+1. Read `safe-zones.json` → `heroAnchor.bandLuma` + `palette.temperature`.
+2. Bright band (>150) → **ink** (never fight a bright scene with cream/screen).
+3. Else pick by content register: poetic/warm → **cream** · introspective/luxe →
+   **editorial** · product/tech → **keynote** · serious/interview → **documentary** ·
+   hype/social → **loud**.
+4. State the pick + why in one line; the user decides (SKILL.md Step 0 still applies).
+
+## Authoring
+
+- Cinematic mode: `cinematic.json` → `"dna": "<name>"` (drop the `template` field).
+- Locked per DNA: family, palette scheme, blend, motion curves, hero orchestration.
+- Open per group (unchanged): size / weight / style / case / spacing + planes.
+- `var(--accent)` is available in per-group CSS — it resolves to the scene-sampled accent.
+
+## What the engine generates from the DNA (no authoring needed)
+
+- **Hero three-act**: co-visible captions dim 0.35s before the hero lands (setup) →
+  entrance with per-letter stagger, amplitude ∝ spoken loudness (impact) → slow breathe
+  - glow until exit (afterglow).
+- **Scene optics**: depth-match blur on embed captions, light-direction contact shadow.
+- All deterministic — measured from files, no randomness.
+
+## Climax selection — what earns the promotion
+
+Pick the **payoff, not the topic**: the words you would quote when paraphrasing the
+beat. "The stars were only limited by the pixel size" — the payoff is **pixel size**
+(the surprising claim), not "stars" (the subject). Test: would the word alone, big on
+screen, make the listener nod? A topic word makes them wait.
+
+- **Phrases are legal** (`match: "pixel size"` / `"skin food"`): a peak is a semantic
+  unit, not necessarily one token. 2–4 words max — beyond that it's a sentence, not a
+  peak.
+- **Prefer clause-final** — nothing left dangling to place after the lift.
+- **Never strand a determiner**: lifting "stars" out of "The stars…" leaves an orphan
+  "The" that vanishes mid-air. The compiler auto-absorbs a line-leading article into
+  the promoted phrase; mid-line, match the phrase including its article.
+- Sizes are TARGETED by the compiler, not just floored — author sizes are hints:
+  - **apex = frame event**: under 88% of usable width → raised toward a 93% fill.
+    Std height cap = `sizeRange[1] × 1.25` (≤46cqh; formal register ×1.0) — a std apex
+    bursts a rail, not a body composition. Cinematic cap = `sizeRange[1]`.
+  - **short words fill with TRACKING**: when the height cap binds before the width
+    target (SHINE — 5 glyphs), the compiler letterspaces up to +0.32em until the word
+    owns ~88% of the width (film-title craft: HER / DUNE). Long words fill by scale,
+    short words by air — impact is WIDTH-led either way.
+  - **minor = damped beat in the apex family**: `max(3× rail, 0.55× apex-final)`,
+    width-capped. A peak that reads as a label is a bug.
+  - **lockup context is RATIO-LOCKED**: kicker/tail = `0.26× hero` (clamped
+    0.05–0.085·h), recomputed after any width-fit raise. Don't hand-tune context
+    sizes — size the hero; the context follows like a poster system.
+
+## Climax placement — the lockup is the default, NOT the only composition
+
+A hero line takes `"placement": "subject" | "column"`:
+
+- **subject** (default) — the **ORBIT lockup** centered ON the subject. NOT a centered
+  sandwich: context anchors to the hero's EDGES like a poster kicker/tagline —
+  pre-context flush-left off the hero's top-left corner, post-context flush-right off
+  its bottom-right — so the small lines land BESIDE the head/shoulder (on the scene),
+  never on the face, and therefore EMBED (bg) like everything else. The eye reads a
+  diagonal: kicker ↘ HERO ↘ tail. Only the hero crosses the silhouette (the
+  matte-occlusion showcase). The context's job is reading continuity — it gets the
+  margins; the hero's job is the cinematic event — it gets the subject. Right when the
+  peak is THE dramatic moment: cream / loud / glitch / neon / velocity lean here.
+- **column** — the apex stays IN its column's reading flow and BURSTS it (oversized,
+  full hero motion + dim/glow privileges, but composed within the sentence's home
+  zone; spills toward the subject naturally when oversized). Right when the content
+  is a continuous read and the column is the narrative's home: keynotes, tutorials,
+  explainers, documentary. Registers: keynote / documentary / editorial lean here.
+
+Applying ONE composition to every peak is monoculture — the same failure the motion
+review caught. Pick per beat: a 15s explainer might run column peaks throughout and
+save the subject lockup for the single apex. (A third pattern — the editorial split,
+bg context upper + fg hero lower-third — lives in references/composition-craft.md and
+is the next placement candidate.)
+
+## The motion language (five layers, each DNA answers all five)
+
+A DNA's animation is not a parameter tweak on a shared fade — it's a distinct physics:
+
+| Layer                  | What it governs                                                                                                    | Where it lives                                        |
+| ---------------------- | ------------------------------------------------------------------------------------------------------------------ | ----------------------------------------------------- |
+| **word entrance**      | how each word materializes on its beat ({y,x,blur,scale,rot,dur,ease} or burn)                                     | `motion.soft/present/impact`                          |
+| **line exit**          | direction + speed of leaving, optional top-to-bottom cascade                                                       | `motion.exit` ({dur,y,x,scale,ease,stagger})          |
+| **hold-life**          | what text does while on screen — stillness is a deliberate choice                                                  | `hero.breathe` / `hero.loom` (0 = print-still)        |
+| **hero orchestration** | the three-act entrance signature (emergence / settle / slam / rise / **wipe-up**) + glow / letterBlur / **ripple** | `hero.*`                                              |
+| **timing physics**     | the duration & easing register everything obeys (percussive 0.15s ↔ atmospheric 0.6s)                              | implied by the values above — keep one family per DNA |
+
+Shipped signatures: cream = _light condenses_ (blur-settle, drift-up exits) · ink =
+_letterpress_ (scale-press, no float, dead-still) · editorial = _the pen glides_
+(x-glide with the italic, cascade-out page turns) · keynote = _surgical reveal_
+(burn words + line wipe + hero wipe-up, exits never move) · documentary = _burn and
+hold_ (motion's absence IS the language) · loud = _percussion_ (back-eased punches,
+alternating tilt, hero ripple that bumps every caption — never the footage).
+
+Rules inherited from hyperframes motion-principles: exits faster than entrances; vary
+ease families BETWEEN DNAs (not within one); `.out` enters, `.in` leaves; never two
+transform tweens on one element in the same window (wipe-up is clip-path so the
+afterglow scale channel stays free; loom subsumes breathe).
+
+## Adding a DNA
+
+Copy an existing `dna/<name>.json`, change the voice, keep the schema. The engine
+(`modes/cinematic/engine.html`) and both compilers consume it as-is. A DNA earns its
+place by being a _distinct voice with a reason to exist_ — not a recolor.
diff --git a/.claude/skills-media/embedded-captions/dna/chrome.json b/.claude/skills-media/embedded-captions/dna/chrome.json
new file mode 100644
index 000000000..559db06b4
--- /dev/null
+++ b/.claude/skills-media/embedded-captions/dna/chrome.json
@@ -0,0 +1,68 @@
+{
+  "name": "chrome",
+  "title": "Chrome — Y2K liquid metal",
+  "register": "loud-luxe",
+  "when": "fashion-tech, music, Y2K-revival, product-flex content. The hero is cast in liquid metal — a gradient sheen sweeps across it once during the hold. Supporting lines stay cool steel.",
+  "font": {
+    "family": "Audiowide",
+    "weights": [400]
+  },
+  "palette": {
+    "scheme": "light-on-dark",
+    "cap_color": "#e8edf2",
+    "blend": "normal",
+    "accent": "#9fb6cc",
+    "accent_fallback": "#9fb6cc"
+  },
+  "optics": {
+    "depthMatch": true,
+    "contactShadow": true,
+    "warmBloom": false
+  },
+  "filter": "none",
+  "motion": {
+    "soft": {
+      "y": 6,
+      "scale": 1.04,
+      "dur": 0.3,
+      "ease": "power3.out"
+    },
+    "present": {
+      "y": 6,
+      "scale": 1.06,
+      "dur": 0.26,
+      "ease": "power3.out"
+    },
+    "impact": {
+      "y": 8,
+      "scale": 1.1,
+      "dur": 0.22,
+      "ease": "power4.out"
+    },
+    "exit": {
+      "dur": 0.25,
+      "ease": "power2.in",
+      "stagger": 0
+    }
+  },
+  "hero": {
+    "entrance": "settle",
+    "perLetter": false,
+    "letterStagger": 0,
+    "glow": 0.15,
+    "dimOthers": 0.4,
+    "breathe": 0.008,
+    "sheen": true,
+    "case": "uppercase",
+    "tracking": "0.02em",
+    "sizeRange": [0.18, 0.3],
+    "css": "",
+    "wordCss": "background: linear-gradient(105deg,#3a4350 0%,#f6fbff 20%,#8fa0b2 38%,#ffffff 50%,#2e3742 64%,#eef6fd 82%,#6b7888 100%); background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; text-shadow: none;"
+  },
+  "css": "",
+  "deliveries": {
+    "home": "column",
+    "rail": "unvalidated",
+    "note": "signature = liquid-metal wordCss + sheen sweep (engine fx) — std ignores wordCss/fx"
+  }
+}
diff --git a/.claude/skills-media/embedded-captions/dna/cream.json b/.claude/skills-media/embedded-captions/dna/cream.json
new file mode 100644
index 000000000..cb6a92443
--- /dev/null
+++ b/.claude/skills-media/embedded-captions/dna/cream.json
@@ -0,0 +1,69 @@
+{
+  "name": "cream",
+  "title": "Warm cream — the poetic default",
+  "register": "premium-warm",
+  "when": "dark / mid-tone warm scenes (band luma < 150): studios, evening interiors, moody interviews. Introspective, narrative, emotional content. The successor of cinematic-cream.",
+  "font": {
+    "family": "Inter",
+    "weights": [500, 600, 700, 900]
+  },
+  "palette": {
+    "scheme": "light-on-dark",
+    "cap_color": "#fff5df",
+    "blend": "screen",
+    "accent": "scene",
+    "accent_fallback": "#e3c06a"
+  },
+  "optics": {
+    "depthMatch": true,
+    "contactShadow": true,
+    "warmBloom": true
+  },
+  "filter": "contrast(1.08)",
+  "motion": {
+    "soft": {
+      "y": 8,
+      "blur": 2.5,
+      "dur": 0.5,
+      "ease": "power2.out"
+    },
+    "present": {
+      "y": 6,
+      "blur": 1.5,
+      "scale": 1.03,
+      "dur": 0.3,
+      "ease": "power3.out"
+    },
+    "impact": {
+      "y": 12,
+      "blur": 1.5,
+      "scale": 1.08,
+      "dur": 0.24,
+      "ease": "power4.out"
+    },
+    "exit": {
+      "dur": 0.45,
+      "y": -8,
+      "ease": "sine.in",
+      "stagger": 0
+    }
+  },
+  "hero": {
+    "entrance": "emergence",
+    "perLetter": true,
+    "letterStagger": 0.016,
+    "glow": 0.3,
+    "dimOthers": 0.45,
+    "breathe": 0.012,
+    "case": "uppercase",
+    "tracking": "-0.03em",
+    "sizeRange": [0.2, 0.34],
+    "letterBlur": 2.5
+  },
+  "css": "",
+  "deliveries": {
+    "home": "column",
+    "rail": "validated",
+    "note": "standard-mode lineage IS cinematic-cream; validated std renders (jimeng)"
+  }
+}
diff --git a/.claude/skills-media/embedded-captions/dna/documentary.json b/.claude/skills-media/embedded-captions/dna/documentary.json
new file mode 100644
index 000000000..4f3b6a872
--- /dev/null
+++ b/.claude/skills-media/embedded-captions/dna/documentary.json
@@ -0,0 +1,62 @@
+{
+  "name": "documentary",
+  "title": "Documentary — Errol Morris dignity",
+  "register": "formal",
+  "when": "interviews, serious subject matter, journalism, testimonial. Burn-in reveals (no animation), bone on charcoal, a deliberately modest hero. Gravitas IS the style — stillness, no accent color, no glow.",
+  "font": {
+    "family": "Inter",
+    "weights": [500, 700]
+  },
+  "palette": {
+    "scheme": "light-on-dark",
+    "cap_color": "#F5EFE6",
+    "blend": "normal",
+    "accent": "#F5EFE6",
+    "accent_fallback": "#F5EFE6"
+  },
+  "optics": {
+    "depthMatch": true,
+    "contactShadow": true,
+    "warmBloom": false
+  },
+  "filter": "none",
+  "motion": {
+    "soft": {
+      "reveal": "burn"
+    },
+    "present": {
+      "y": 0,
+      "dur": 0.18,
+      "ease": "power1.out"
+    },
+    "impact": {
+      "y": 6,
+      "scale": 1.03,
+      "dur": 0.2,
+      "ease": "power2.out"
+    },
+    "exit": {
+      "dur": 0.15,
+      "ease": "power1.in",
+      "stagger": 0
+    }
+  },
+  "hero": {
+    "entrance": "rise",
+    "perLetter": false,
+    "letterStagger": 0,
+    "glow": 0,
+    "dimOthers": 0.3,
+    "breathe": 0,
+    "case": "none",
+    "tracking": "-0.015em",
+    "sizeRange": [0.09, 0.15],
+    "css": "font-weight: 700;"
+  },
+  "css": "",
+  "deliveries": {
+    "home": "column",
+    "rail": "unvalidated",
+    "note": "the lower-third IS documentary's home register (Errol Morris); column stays deliberately modest"
+  }
+}
diff --git a/.claude/skills-media/embedded-captions/dna/editorial.json b/.claude/skills-media/embedded-captions/dna/editorial.json
new file mode 100644
index 000000000..1d2fa97ff
--- /dev/null
+++ b/.claude/skills-media/embedded-captions/dna/editorial.json
@@ -0,0 +1,70 @@
+{
+  "name": "editorial",
+  "title": "Editorial — serif voice, magazine cadence",
+  "register": "editorial-luxe",
+  "when": "introspective monologue, fashion / beauty, poetic or lyrical content, premium brand films on mid/dark scenes. The serif italic carries intimacy that a grotesque can't. The hero stays lowercase italic — elegance over shout.",
+  "font": {
+    "family": "Bodoni Moda",
+    "weights": [400, 700]
+  },
+  "palette": {
+    "scheme": "light-on-dark",
+    "cap_color": "#f2ead8",
+    "blend": "screen",
+    "accent": "scene",
+    "accent_fallback": "#c9a36a"
+  },
+  "optics": {
+    "depthMatch": true,
+    "contactShadow": true,
+    "warmBloom": true
+  },
+  "filter": "contrast(1.06)",
+  "motion": {
+    "soft": {
+      "x": -10,
+      "y": 0,
+      "dur": 0.55,
+      "ease": "power2.out"
+    },
+    "present": {
+      "x": -8,
+      "y": 0,
+      "scale": 1.02,
+      "dur": 0.34,
+      "ease": "power2.out"
+    },
+    "impact": {
+      "x": -10,
+      "y": 0,
+      "scale": 1.06,
+      "dur": 0.28,
+      "ease": "power3.out"
+    },
+    "exit": {
+      "dur": 0.4,
+      "x": 8,
+      "ease": "sine.in",
+      "stagger": 0.07
+    }
+  },
+  "hero": {
+    "entrance": "emergence",
+    "perLetter": true,
+    "letterStagger": 0.022,
+    "glow": 0.18,
+    "dimOthers": 0.5,
+    "breathe": 0.01,
+    "case": "none",
+    "tracking": "-0.01em",
+    "sizeRange": [0.18, 0.3],
+    "css": "font-style: italic; font-weight: 700;",
+    "letterBlur": 1.5
+  },
+  "css": "",
+  "deliveries": {
+    "home": "column",
+    "rail": "unvalidated",
+    "note": "italic serif rail reads fine; the signature x-glide + line cascade-out exits don't exist in the std enum"
+  }
+}
diff --git a/.claude/skills-media/embedded-captions/dna/glitch.json b/.claude/skills-media/embedded-captions/dna/glitch.json
new file mode 100644
index 000000000..851e605b0
--- /dev/null
+++ b/.claude/skills-media/embedded-captions/dna/glitch.json
@@ -0,0 +1,82 @@
+{
+  "name": "glitch",
+  "title": "Glitch — signal corruption",
+  "register": "loud-cyber",
+  "when": "digital / hacker / AI / dystopia content; anything that wants the captions to feel like a corrupted feed. RGB-split echoes snap together as each beat lands; timing is machine-percussive; nothing eases politely.",
+  "font": {
+    "family": "Space Grotesk",
+    "weights": [400, 700]
+  },
+  "palette": {
+    "scheme": "light-on-dark",
+    "cap_color": "#eaffff",
+    "blend": "screen",
+    "accent": "#ff3df0",
+    "accent_fallback": "#ff3df0"
+  },
+  "optics": {
+    "depthMatch": false,
+    "contactShadow": false,
+    "warmBloom": false
+  },
+  "filter": "none",
+  "motion": {
+    "soft": {
+      "x": -6,
+      "stretchX": 1.12,
+      "dur": 0.12,
+      "ease": "power4.out"
+    },
+    "present": {
+      "x": -8,
+      "stretchX": 1.18,
+      "dur": 0.11,
+      "ease": "power4.out"
+    },
+    "impact": {
+      "x": -10,
+      "stretchX": 1.25,
+      "dur": 0.1,
+      "ease": "power4.out"
+    },
+    "exit": {
+      "dur": 0.1,
+      "scale": 1.02,
+      "ease": "power4.in",
+      "stagger": 0
+    }
+  },
+  "hero": {
+    "entrance": "settle",
+    "perLetter": false,
+    "letterStagger": 0,
+    "glow": 0.18,
+    "dimOthers": 0.45,
+    "breathe": 0,
+    "ripple": 2,
+    "case": "uppercase",
+    "tracking": "0.01em",
+    "sizeRange": [0.2, 0.32],
+    "css": "font-weight: 700;",
+    "echoes": [
+      {
+        "dx": -5,
+        "dy": 0,
+        "color": "#22e6ff",
+        "opacity": 0.75
+      },
+      {
+        "dx": 5,
+        "dy": 1,
+        "color": "#ff3df0",
+        "opacity": 0.75
+      }
+    ]
+  },
+  "css": "",
+  "deliveries": {
+    "home": "column",
+    "rail": "unvalidated",
+    "note": "signature = RGB-split echoes converge (engine fx) — rail keeps only a tinted skin"
+  }
+}
diff --git a/.claude/skills-media/embedded-captions/dna/ink.json b/.claude/skills-media/embedded-captions/dna/ink.json
new file mode 100644
index 000000000..b6e75f517
--- /dev/null
+++ b/.claude/skills-media/embedded-captions/dna/ink.json
@@ -0,0 +1,65 @@
+{
+  "name": "ink",
+  "title": "Ink — printed on the scene",
+  "register": "premium",
+  "when": "BRIGHT scenes (band luma > 150): white offices, daylight, pale walls — the scenes where cream/screen washes out. Multiply blend makes the type read as printed ON the wall, picking up its texture. Confident, editorial-tech tone.",
+  "font": {
+    "family": "Inter",
+    "weights": [500, 700, 900]
+  },
+  "palette": {
+    "scheme": "dark-on-light",
+    "cap_color": "#1b1714",
+    "blend": "multiply",
+    "accent": "scene",
+    "accent_fallback": "#9a3b2e"
+  },
+  "optics": {
+    "depthMatch": true,
+    "contactShadow": true,
+    "warmBloom": false
+  },
+  "filter": "contrast(1.05)",
+  "motion": {
+    "soft": {
+      "y": 0,
+      "scale": 1.06,
+      "dur": 0.22,
+      "ease": "power3.out"
+    },
+    "present": {
+      "y": 0,
+      "scale": 1.08,
+      "dur": 0.2,
+      "ease": "power3.out"
+    },
+    "impact": {
+      "y": 0,
+      "scale": 1.12,
+      "dur": 0.18,
+      "ease": "power4.out"
+    },
+    "exit": {
+      "dur": 0.22,
+      "ease": "power2.in",
+      "stagger": 0
+    }
+  },
+  "hero": {
+    "entrance": "settle",
+    "perLetter": false,
+    "letterStagger": 0.014,
+    "glow": 0,
+    "dimOthers": 0.4,
+    "breathe": 0,
+    "case": "uppercase",
+    "tracking": "-0.035em",
+    "sizeRange": [0.2, 0.34]
+  },
+  "css": "",
+  "deliveries": {
+    "home": "column",
+    "rail": "unvalidated",
+    "note": "rail works (scale-press→settle) but the letterpress identity wants a scene surface to press INTO"
+  }
+}
diff --git a/.claude/skills-media/embedded-captions/dna/keynote.json b/.claude/skills-media/embedded-captions/dna/keynote.json
new file mode 100644
index 000000000..759587432
--- /dev/null
+++ b/.claude/skills-media/embedded-captions/dna/keynote.json
@@ -0,0 +1,62 @@
+{
+  "name": "keynote",
+  "title": "Keynote — Apple-grade confidence",
+  "register": "tech-premium",
+  "when": "product walkthroughs, launches, founder updates, tech explainers. Opaque white type, dead-center planes, few words held long. Confidence comes from mass and stillness, not motion.",
+  "font": {
+    "family": "Inter",
+    "weights": [400, 600, 800]
+  },
+  "palette": {
+    "scheme": "light-on-dark",
+    "cap_color": "#ffffff",
+    "blend": "normal",
+    "accent": "scene",
+    "accent_fallback": "#8ab4ff"
+  },
+  "optics": {
+    "depthMatch": true,
+    "contactShadow": true,
+    "warmBloom": false
+  },
+  "filter": "none",
+  "motion": {
+    "soft": {
+      "reveal": "burn"
+    },
+    "present": {
+      "reveal": "burn"
+    },
+    "impact": {
+      "reveal": "burn"
+    },
+    "lineReveal": {
+      "type": "wipe-x",
+      "dur": 0.4,
+      "ease": "expo.out"
+    },
+    "exit": {
+      "dur": 0.3,
+      "ease": "power2.in",
+      "stagger": 0
+    }
+  },
+  "hero": {
+    "entrance": "wipe-up",
+    "perLetter": false,
+    "letterStagger": 0,
+    "glow": 0,
+    "dimOthers": 0.35,
+    "breathe": 0,
+    "case": "uppercase",
+    "tracking": "-0.045em",
+    "sizeRange": [0.16, 0.3],
+    "css": "font-weight: 800;"
+  },
+  "css": "",
+  "deliveries": {
+    "home": "column",
+    "rail": "validated",
+    "note": "wipe-up maps to the std entrance enum; keynote_std validated (Shine)"
+  }
+}
diff --git a/.claude/skills-media/embedded-captions/dna/loud.json b/.claude/skills-media/embedded-captions/dna/loud.json
new file mode 100644
index 000000000..21f572d24
--- /dev/null
+++ b/.claude/skills-media/embedded-captions/dna/loud.json
@@ -0,0 +1,75 @@
+{
+  "name": "loud",
+  "title": "Loud — the sanctioned blast",
+  "register": "loud",
+  "when": "hype, social reels, sport, music, motivational shorts — content that WANTS the type to compete with the face (k-pop-lyric lineage; deliberately breaks 'subject wins' at the hero). Machine-gun letter staggers, slam entrances, scene-sampled saturated accent on the hero. Body lines ANNOUNCE in front of the subject (bodyLayer:fg — k-pop lyric depth); only the hero embeds behind.",
+  "font": {
+    "family": "Anton",
+    "weights": [400]
+  },
+  "palette": {
+    "scheme": "light-on-dark",
+    "cap_color": "#ffffff",
+    "blend": "normal",
+    "accent": "scene",
+    "accent_fallback": "#ffd600",
+    "heroColor": "accent",
+    "accentMode": "counter"
+  },
+  "optics": {
+    "depthMatch": false,
+    "contactShadow": true,
+    "warmBloom": false
+  },
+  "filter": "none",
+  "motion": {
+    "soft": {
+      "y": 0,
+      "scale": 1.3,
+      "rot": 1.2,
+      "dur": 0.18,
+      "ease": "back.out(1.7)"
+    },
+    "present": {
+      "y": 0,
+      "scale": 1.35,
+      "rot": 1.2,
+      "dur": 0.18,
+      "ease": "back.out(1.7)"
+    },
+    "impact": {
+      "y": 0,
+      "scale": 1.45,
+      "rot": 1.5,
+      "dur": 0.16,
+      "ease": "back.out(1.9)"
+    },
+    "exit": {
+      "dur": 0.14,
+      "scale": 0.96,
+      "ease": "power3.in",
+      "stagger": 0
+    }
+  },
+  "hero": {
+    "entrance": "slam",
+    "perLetter": false,
+    "letterStagger": 0.01,
+    "glow": 0.25,
+    "dimOthers": 0.55,
+    "breathe": 0.016,
+    "case": "uppercase",
+    "tracking": "-0.005em",
+    "sizeRange": [0.26, 0.4],
+    "css": "-webkit-text-stroke: 2px rgba(0,0,0,0.35); paint-order: stroke fill;",
+    "ripple": 3,
+    "loom": 0.03
+  },
+  "css": "",
+  "bodyLayer": "fg",
+  "deliveries": {
+    "home": "column",
+    "rail": "unvalidated",
+    "note": "slam maps; bodyLayer:fg already a std-shaped hybrid; validated both"
+  }
+}
diff --git a/.claude/skills-media/embedded-captions/dna/neon.json b/.claude/skills-media/embedded-captions/dna/neon.json
new file mode 100644
index 000000000..bc4ac367a
--- /dev/null
+++ b/.claude/skills-media/embedded-captions/dna/neon.json
@@ -0,0 +1,58 @@
+{
+  "name": "neon",
+  "title": "Neon — the sign in the scene",
+  "register": "loud-cyber",
+  "when": "cyberpunk / nightlife / tech-noir / music content on dark scenes. The captions ARE neon signage hanging in the room: electric cyan tubes, ignition flicker, a hum of glow. The hero powers ON like a sign being lit.",
+  "font": {
+    "family": "Orbitron",
+    "weights": [400, 700]
+  },
+  "palette": {
+    "scheme": "light-on-dark",
+    "cap_color": "#d9f7ff",
+    "blend": "screen",
+    "accent": "#22e6ff",
+    "accent_fallback": "#22e6ff",
+    "heroColor": "accent"
+  },
+  "optics": {
+    "depthMatch": false,
+    "contactShadow": false,
+    "warmBloom": false
+  },
+  "filter": "none",
+  "motion": {
+    "soft": {
+      "reveal": "flicker"
+    },
+    "present": {
+      "reveal": "flicker"
+    },
+    "impact": {
+      "reveal": "flicker"
+    },
+    "exit": {
+      "dur": 0.18,
+      "ease": "power2.in",
+      "stagger": 0
+    }
+  },
+  "hero": {
+    "entrance": "flicker-on",
+    "perLetter": false,
+    "letterStagger": 0,
+    "glow": 0.5,
+    "dimOthers": 0.4,
+    "breathe": 0.01,
+    "case": "uppercase",
+    "tracking": "0.04em",
+    "sizeRange": [0.18, 0.3],
+    "css": "text-shadow: 0 0 14px rgba(34,230,255,0.65), 0 0 40px rgba(34,230,255,0.35), 0 0 80px rgba(34,230,255,0.18);"
+  },
+  "css": ".cap { text-shadow: 0 0 10px rgba(34,230,255,0.4), 0 0 26px rgba(34,230,255,0.2); }",
+  "deliveries": {
+    "home": "column",
+    "rail": "unvalidated",
+    "note": "signature = flicker-on + glow layer (engine hero fx) — rail keeps only the cyan skin"
+  }
+}
diff --git a/.claude/skills-media/embedded-captions/dna/velocity.json b/.claude/skills-media/embedded-captions/dna/velocity.json
new file mode 100644
index 000000000..8650e1de6
--- /dev/null
+++ b/.claude/skills-media/embedded-captions/dna/velocity.json
@@ -0,0 +1,89 @@
+{
+  "name": "velocity",
+  "title": "Velocity — speed lines",
+  "register": "loud-sport",
+  "when": "sport, automotive, fitness, anything kinetic. Every word arrives ALONG its own motion vector (streak + skew settles upright); the hero passes through with speed trails behind it. Condensed italic forward lean.",
+  "font": {
+    "family": "Teko",
+    "weights": [400, 700]
+  },
+  "palette": {
+    "scheme": "light-on-dark",
+    "cap_color": "#ffffff",
+    "blend": "normal",
+    "accent": "scene",
+    "accent_fallback": "#ffd600",
+    "heroColor": "accent",
+    "accentMode": "counter"
+  },
+  "optics": {
+    "depthMatch": false,
+    "contactShadow": true,
+    "warmBloom": false
+  },
+  "filter": "none",
+  "motion": {
+    "soft": {
+      "x": -22,
+      "skewX": -8,
+      "stretchX": 1.3,
+      "dur": 0.22,
+      "ease": "expo.out"
+    },
+    "present": {
+      "x": -26,
+      "skewX": -10,
+      "stretchX": 1.35,
+      "dur": 0.2,
+      "ease": "expo.out"
+    },
+    "impact": {
+      "x": -32,
+      "skewX": -12,
+      "stretchX": 1.45,
+      "dur": 0.18,
+      "ease": "expo.out"
+    },
+    "exit": {
+      "dur": 0.16,
+      "x": 14,
+      "ease": "power3.in",
+      "stagger": 0.04
+    }
+  },
+  "hero": {
+    "entrance": "streak",
+    "perLetter": false,
+    "letterStagger": 0,
+    "glow": 0,
+    "dimOthers": 0.5,
+    "breathe": 0,
+    "loom": 0.025,
+    "case": "uppercase",
+    "tracking": "0.015em",
+    "sizeRange": [0.24, 0.38],
+    "css": "font-weight: 700; font-style: italic;",
+    "echoes": [
+      {
+        "dx": -10,
+        "dy": 0,
+        "color": "#ffffff",
+        "opacity": 0.22,
+        "blur": 1
+      },
+      {
+        "dx": -20,
+        "dy": 0,
+        "color": "#ffffff",
+        "opacity": 0.1,
+        "blur": 2
+      }
+    ]
+  },
+  "css": "",
+  "deliveries": {
+    "home": "column",
+    "rail": "unvalidated",
+    "note": "signature = streak + trail echoes along the speed vector (engine fx) — rail loses all of it"
+  }
+}
diff --git a/.claude/skills-media/embedded-captions/modes/cinematic/README.md b/.claude/skills-media/embedded-captions/modes/cinematic/README.md
new file mode 100644
index 000000000..f78ae5b93
--- /dev/null
+++ b/.claude/skills-media/embedded-captions/modes/cinematic/README.md
@@ -0,0 +1,48 @@
+# Cinematic mode (pure embed) — one engine, six DNAs
+
+> Cinematic mode compiles **[../../dna/](../../dna/README.md)** through
+> **[engine.html](engine.html)** (`make-composition.cjs`). The old per-template HTML
+> shells are retired — `cinematic-cream` maps to `dna: "cream"` automatically; the other
+> archived templates (memory-wall / champion / portrait-header, in [\_archive/](_archive/))
+> remain as design references only.
+
+Use this mode for pure-embed asks (no rail): brand film, hype, social reel, showcase.
+The **DNA** locks the visual language (type, palette scheme, blend, motion grammar, hero
+three-act); **safe-zones v2** parameterizes it to the scene (sampled accent, light-
+direction contact shadow, depth-match blur); **the agent decides layout only** (planes,
+blocks, per-line typography within the DNA).
+
+## Workflow
+
+1. `bash scripts/prepare.sh <project>` → matte ∥ transcript ∥ envelope → safe-zones v2
+2. Pick a DNA ([../../dna/README.md](../../dna/README.md)): bright hero band → `ink`,
+   else by register (cream / editorial / keynote / documentary / loud). Recommend, let
+   the user pick.
+3. Author `<project>/cinematic.json` — `"dna": "<name>"` + thought-blocks (schema:
+   `scripts/make-cinematic.cjs` header)
+4. `node scripts/make-cinematic.cjs <project>` → plan.json → engine-compiled index.html
+5. `node scripts/preview-frames.cjs <project>` → § Visual QA (failure checks + the 5
+   positive checks in [../../references/reference-bar.md](../../references/reference-bar.md))
+6. `bash scripts/render-and-composite.sh <project>` → gates → final.mp4
+
+## What the engine generates (never author these)
+
+- word timings from the transcript; accumulate-within-block / page-flip-between-blocks
+- the hero hand-off + **three-act orchestration** (dim → RMS-coupled per-letter entrance
+  → breathe + glow), per the DNA's `hero` block
+- scene tokens: `--accent` (sampled), contact shadow, depth blur
+- reading order, re-slot from measured heights, hero size/collision post-pass
+
+## What you DON'T do
+
+- Override `.cap` color / blend / shadow / filter / motion curves — that's the DNA.
+  Scene fights the look → pick a different DNA (bright → `ink`), never recolor.
+- Hand-position the hero into a clean margin (it belongs ON the subject, ~30–55%
+  occluded — safe-zones `heroBands.best`).
+- Add full-frame grades/textures over the footage (hard rule: the video ships untouched).
+
+## Adding a DNA
+
+`dna/<name>.json` — copy one, change the voice (see [../../dna/README.md](../../dna/README.md)
+§ Adding). The engine consumes it with no code change. A DNA must be a distinct voice
+with a reason to exist, not a recolor.
diff --git a/.claude/skills-media/embedded-captions/modes/cinematic/_archive/champion/spec.md b/.claude/skills-media/embedded-captions/modes/cinematic/_archive/champion/spec.md
new file mode 100644
index 000000000..a200654f4
--- /dev/null
+++ b/.claude/skills-media/embedded-captions/modes/cinematic/_archive/champion/spec.md
@@ -0,0 +1,98 @@
+# Template: champion
+
+**Look:** podcast / interview, upper-side column with intro→phrase→emph
+beats building toward a center-stage CROWN that crosses the subject's body.
+"Wimbledon Champion" energy.
+
+**Visual identity (LOCKED):**
+
+- 5 typography slots: intro / phrase / emph / dream / crown
+- `mix-blend-mode: screen` over warm bone color (#fff5df)
+- Deep text-shadow + brightness boost
+- Single-caption-swap layout (caps stack at one point in the column)
+- Center-stage crown crosses the subject for cinematic occlusion
+
+## When to apply
+
+✅ **Good fit:**
+
+- Podcast / interview style with a single seated subject
+- Cluttered backdrop (bookshelf, props, dark) — screen blend reads through
+- Subject roughly centered with clear clean zones on one or both sides
+- Speech has a clear payoff line that can become a "crown" (1-3 short words)
+- 16:9 landscape, 1920×1080 ideal
+
+❌ **Wrong fit:**
+
+- Bright/sky/window backdrop (screen blend washes out)
+- Subject heavily off-center such that there's no clean column zone
+- Speech has no clear climax line
+- Portrait 9:16 → use `portrait-header` template instead
+
+## Layout decisions agent makes
+
+| Field                         | What                                                                                                                                        | Example (1920×1080)                            |
+| ----------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------- |
+| `plane.top/left/width/height` | Where the side column sits. Pick the side opposite the subject's gaze (looking room) and hug the cleanest backdrop zone.                    | `{top: 40, left: 40, width: 720, height: 420}` |
+| `plane.rotateY`               | Slight perspective into the wall. Positive for left column (recedes right), negative for right column. Keep small (3-7°).                   | `4`                                            |
+| `crown_top`                   | Y position of the crown. Should fall on the subject's chest/neck so the body occludes the middle letters.                                   | `420`                                          |
+| `font_scale`                  | Multiplier on locked sizes.                                                                                                                 | `1.0` for 1920×1080                            |
+| `crown_enabled`               | Whether to render a crown. Skip if the speech has no clean payoff line, or if the subject is too far off-center for a center crown to land. | `true`                                         |
+
+### Crown placement rules
+
+Before enabling the crown, verify all 3 conditions:
+
+1. Subject body center within ±10% of frame horizontal center
+2. Clean zones ≥15% of frame width on each side of subject
+3. Crown text width (uppercase 140px × ~chars) > subject body width + 400px
+
+If any fails: disable the crown OR use a smaller font + place it in the
+larger clean zone instead of center. See `references/layout-heuristics.md`.
+
+## Slot assignment
+
+| Slot   | Use for                                                    |
+| ------ | ---------------------------------------------------------- |
+| intro  | Filler / discourse markers ("you know,", "for me,", "so…") |
+| phrase | Main statement clauses                                     |
+| emph   | Key achievement / superlative line                         |
+| dream  | Aspirational lines, past-tense reflection                  |
+| crown  | The single climax line — center-stage payoff               |
+
+Aim for ≤3 slots per video (excluding crown). Don't use all 4 in a 12s clip.
+
+## Plan.json shape
+
+```json
+{
+  "mode": "template",
+  "template": "champion",
+  "duration": 12.08, "fps": 24, "width": 1920, "height": 1080,
+  "plane": {
+    "top": 40, "left": 40, "width": 720, "height": 420,
+    "rotateY": 4
+  },
+  "crown_top": 420,
+  "font_scale": 1.0,
+  "groups": [
+    { "id": "cg-0", "slot": "intro", "tone": "soft",
+      "in": 0.10, "out": 1.45, "words": [...] },
+    { "id": "cg-1", "slot": "phrase", "tone": "soft",
+      "in": 1.55, "out": 4.20, "words": [...] },
+    { "id": "cg-2", "slot": "emph", "tone": "present",
+      "in": 6.50, "out": 8.30, "words": [...] }
+  ],
+  "crown_group": {
+    "id": "cg-crown", "tone": "present",
+    "in": 10.85, "out": 12.08,
+    "words": [
+      {"text": "Wimbledon", "start": 10.94, "end": 11.28},
+      {"text": "Champion",  "start": 11.38, "end": 11.84}
+    ]
+  }
+}
+```
+
+`crown_group` always uses the crown slot — no need to specify `slot`.
+Set `crown_group: null` to disable.
diff --git a/.claude/skills-media/embedded-captions/modes/cinematic/_archive/champion/template.html b/.claude/skills-media/embedded-captions/modes/cinematic/_archive/champion/template.html
new file mode 100644
index 000000000..624f89f87
--- /dev/null
+++ b/.claude/skills-media/embedded-captions/modes/cinematic/_archive/champion/template.html
@@ -0,0 +1,188 @@
+<!doctype html>
+<!--
+  TEMPLATE: champion
+  STYLE LOCKED. LAYOUT OPEN.
+
+  Look: podcast / interview, upper-left column with intro→phrase→emph
+  beats, big center-stage CROWN crossing the subject for the payoff.
+
+  Locked:
+    - 5 typography slots: intro / phrase / emph / dream / crown
+    - mix-blend-mode: screen, color #fff5df, deep text-shadow
+    - Single-caption-swap layout (caps absolute-positioned in left-plane)
+    - GSAP soft/present per-word reveal
+
+  Open via plan.json:
+    - left-plane geometry + perspective
+    - crown_plane top
+    - --font-scale
+    - GROUPS array + slot per group
+    - whether crown is enabled (crown_group)
+-->
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width={{WIDTH}}, height={{HEIGHT}}" />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      :root { --font-scale: {{FONT_SCALE}}; }
+
+      * { margin: 0; padding: 0; box-sizing: border-box; }
+      html, body {
+        margin: 0;
+        width: {{WIDTH}}px; height: {{HEIGHT}}px;
+        overflow: hidden;
+        background: #000;
+        font-family: "Inter", system-ui, sans-serif;
+      }
+      #a-roll { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
+
+      #stage {
+        position: absolute;
+        top: 0; left: 0;
+        width: {{WIDTH}}px; height: {{HEIGHT}}px;
+        perspective: 2400px;
+        perspective-origin: 25% 50%;
+        pointer-events: none;
+        z-index: 2;
+      }
+
+      /* LAYOUT */
+      .left-plane {
+        position: absolute;
+        top: {{PLANE_TOP}}px;
+        left: {{PLANE_LEFT}}px;
+        width: {{PLANE_WIDTH}}px;
+        height: {{PLANE_HEIGHT}}px;
+        transform-style: preserve-3d;
+        transform: rotateY({{ROTATE_Y}}deg);
+        transform-origin: left center;
+        padding: 24px 36px;
+      }
+      .left-plane .cap {
+        position: absolute;
+        top: 24px;
+        right: 36px;
+        max-width: calc({{PLANE_WIDTH}}px - 72px);
+      }
+      .crown-plane {
+        position: absolute;
+        top: {{CROWN_TOP}}px;
+        left: {{CROWN_LEFT}}px;
+        right: {{CROWN_RIGHT}}px;
+        text-align: {{CROWN_ALIGN}};
+        pointer-events: none;
+      }
+      .crown-plane .cap-crown {
+        font-size: calc(140px * var(--font-scale) * {{CROWN_SCALE}});
+      }
+
+      /* STYLE (locked) */
+      .cap {
+        display: block;
+        position: relative;
+        line-height: 1.02;
+        opacity: 0;
+        mix-blend-mode: {{BLEND_MODE}};
+        color: {{CAP_COLOR}};
+        text-shadow: {{TEXT_SHADOW}};
+        filter: {{TEXT_FILTER}};
+        will-change: transform, opacity;
+      }
+      .cap .w { display: inline-block; opacity: 0; will-change: opacity, transform; }
+
+      .cap-intro  { font-size: calc(52px * var(--font-scale));
+                    font-weight: 500; font-style: italic;
+                    letter-spacing: -0.005em; }
+      .cap-phrase { font-size: calc(60px * var(--font-scale));
+                    font-weight: 600;
+                    letter-spacing: -0.015em; }
+      .cap-emph   { font-size: calc(70px * var(--font-scale));
+                    font-weight: 800;
+                    letter-spacing: -0.025em; }
+      .cap-dream  { font-size: calc(64px * var(--font-scale));
+                    font-weight: 700; font-style: italic;
+                    letter-spacing: -0.015em; }
+      .cap-crown  { font-size: calc(140px * var(--font-scale));
+                    font-weight: 900;
+                    letter-spacing: -0.035em; text-transform: uppercase;
+                    line-height: 1.0; }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="main"
+      data-start="0"
+      data-duration="{{DURATION}}"
+      data-width="{{WIDTH}}"
+      data-height="{{HEIGHT}}"
+    >
+      <video
+        id="a-roll"
+        src="source.mp4"
+        muted
+        playsinline
+        data-duration="{{DURATION}}"
+        data-track-index="0"
+        style="z-index: 1"
+      ></video>
+
+      <div id="stage">
+        <div class="left-plane">{{GROUPS_HTML}}</div>
+        <div class="crown-plane">{{CROWN_HTML}}</div>
+      </div>
+
+      <audio
+        id="a-roll-audio"
+        src="source.mp4"
+        data-start="0"
+        data-duration="{{DURATION}}"
+        data-track-index="3"
+        data-volume="1"
+      ></audio>
+    </div>
+
+    <script>
+      window.__timelines = window.__timelines || {};
+      const tl = gsap.timeline({ paused: true });
+      const DUR = {{DURATION}};
+      const GROUPS = {{GROUPS_JSON}};
+      const CROWN  = {{CROWN_JSON}};
+
+      function animateGroup(g) {
+        var sel = "#" + g.id;
+        var isSoft = g.tone === "soft";
+        tl.set(sel, { opacity: 1, y: 0 }, Math.max(0, g.in - 0.01));
+
+        g.words.forEach(function (w, i) {
+          var wsel = sel + " .w[data-i='" + i + "']";
+          if (isSoft) {
+            tl.fromTo(wsel,
+              { opacity: 0, y: 8 },
+              { opacity: 1, y: 0, duration: 0.42, ease: "power2.out", overwrite: "auto" },
+              w.start);
+          } else {
+            tl.fromTo(wsel,
+              { opacity: 0, y: 6, scale: 1.04 },
+              { opacity: 1, y: 0, scale: 1.0, duration: 0.22,
+                ease: "power3.out", overwrite: "auto", transformOrigin: "50% 50%" },
+              w.start);
+          }
+        });
+
+        if (g.out < DUR) {
+          tl.to(sel, { opacity: 0, duration: 0.45, ease: "power2.in", overwrite: "auto" },
+                g.out - 0.45);
+        }
+        tl.set(sel, { opacity: 0, visibility: "hidden" }, g.out);
+      }
+
+      GROUPS.forEach(animateGroup);
+      if (CROWN) animateGroup(CROWN);
+
+      tl.seek(0);
+      window.__timelines["main"] = tl;
+    </script>
+  </body>
+</html>
diff --git a/.claude/skills-media/embedded-captions/modes/cinematic/_archive/memory-wall/spec.md b/.claude/skills-media/embedded-captions/modes/cinematic/_archive/memory-wall/spec.md
new file mode 100644
index 000000000..997286b6b
--- /dev/null
+++ b/.claude/skills-media/embedded-captions/modes/cinematic/_archive/memory-wall/spec.md
@@ -0,0 +1,134 @@
+# Template: memory-wall
+
+**Look:** introspective monologue, italic poem stacking on a back wall,
+right-aligned cascade for the climax. Sam Harris / Pico Iyer territory.
+
+**Visual identity (LOCKED — do not change):**
+
+- 4-slot typography arc: italic 600 → italic 500 hanging-indent → upright
+  700 pivot → uppercase 900 climax
+- `mix-blend-mode: screen` over warm-bone color (#fff4dc)
+- soft text-shadow + brightness boost
+- Per-word fade with subtle Y-drift (soft tone) or pop+scale (present tone)
+
+## When to apply
+
+✅ **Good fit:**
+
+- Talking-head with a flat back wall (acoustic foam, plain plaster, soft
+  bookshelf) on one side
+- Single subject, fixed or near-fixed camera
+- Voice-over feel: introspective, narrative, "I was thinking…"
+- Mid-tone or dark backdrop (luminance < 180)
+
+❌ **Wrong fit:**
+
+- Bright window/sky backdrop → screen blend blows out
+- Cluttered backdrop with text/graphics → conflicts with caption text
+- Energetic / vlog / TikTok style → wrong vibe
+- Multiple speakers / hard cuts → caption arc breaks
+
+## What agent decides per scene
+
+| Field                          | What                                                                                                               | Example                                                            |
+| ------------------------------ | ------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------ |
+| `plane.top/right/width/height` | Where the wall plane sits in frame. Plane should HUG the side of the wall, not float over the subject.             | `{top: 90, right: 30, width: 720, height: 520}` for 1280×720       |
+| `plane.rotateY`                | Match the wall's perspective angle. Negative for right-side wall (text recedes left), positive for left-side wall. | `-13` for a right-side wall at slight angle                        |
+| `plane.rotateX`                | Tiny vertical tilt if wall is angled up/down. Usually 0-2 deg.                                                     | `1`                                                                |
+| `font_scale`                   | Multiplier on the locked cap-N base sizes. Tune for frame height.                                                  | `1.0` for 1280×720, `~1.5` for 1920×1080, `~0.7` for 720p portrait |
+| `groups[].slot`                | Which of the 4 typography slots this group uses (1/2/3/4). Drives the arc.                                         | See below                                                          |
+| `groups[].tone`                | "soft" or "present" — drives motion curve                                                                          | `"soft"` for opening lines, `"present"` for pivot+climax           |
+
+## Slot assignment rules
+
+Aim for ONE arc across the video: `1 → 2 → 3 → 4`. Don't repeat slots if you
+can avoid it; don't skip slots without reason.
+
+| Slot | Use for                                                                                                                                  |
+| ---- | ---------------------------------------------------------------------------------------------------------------------------------------- |
+| 1    | The opener. The "I was thinking" line. Italic, soft entry.                                                                               |
+| 2    | The dreamy continuation / modifier. Smaller italic, hanging-indent — feels like the second half of a sentence with some staggered drift. |
+| 3    | The pivot. Upright (no italic), the syntactic turn. ("but suddenly", "and then…")                                                        |
+| 4    | The climax. Big uppercase 900. The payoff line. Aim for ≤4 short words so the right-aligned cascade naturally wraps to 2-3 lines.        |
+
+If the script is longer than 4 groups, repeat slot 1 or 2 for additional
+soft lines, but reserve slot 4 for the SINGLE climax.
+
+## Plan.json shape
+
+```json
+{
+  "mode": "template",
+  "template": "memory-wall",
+  "duration": 8.04,
+  "fps": 24,
+  "width": 1280,
+  "height": 720,
+  "plane": {
+    "top": 90,
+    "right": 30,
+    "width": 720,
+    "height": 520,
+    "rotateY": -13,
+    "rotateX": 1
+  },
+  "font_scale": 1.0,
+  "groups": [
+    {
+      "id": "cg-0",
+      "slot": 1,
+      "tone": "soft",
+      "in": 0.2,
+      "out": 4.85,
+      "words": [
+        { "text": "Some", "start": 0.24, "end": 0.44 },
+        { "text": "memories", "start": 0.48, "end": 0.82 },
+        { "text": "feel", "start": 0.92, "end": 1.14 },
+        { "text": "soft", "start": 1.2, "end": 1.64 }
+      ]
+    },
+    {
+      "id": "cg-1",
+      "slot": 2,
+      "tone": "soft",
+      "in": 2.55,
+      "out": 4.85,
+      "words": [
+        { "text": "like", "start": 2.66, "end": 2.78 },
+        { "text": "old", "start": 2.86, "end": 3.02 },
+        { "text": "film", "start": 3.16, "end": 3.46 }
+      ]
+    },
+    {
+      "id": "cg-2",
+      "slot": 3,
+      "tone": "present",
+      "in": 4.9,
+      "out": 8.04,
+      "words": [
+        { "text": "but", "start": 5.04, "end": 5.18 },
+        { "text": "suddenly", "start": 5.24, "end": 5.76 }
+      ]
+    },
+    {
+      "id": "cg-3",
+      "slot": 4,
+      "tone": "present",
+      "in": 6.7,
+      "out": 8.04,
+      "words": [
+        { "text": "everything", "start": 6.82, "end": 7.14 },
+        { "text": "is", "start": 7.18, "end": 7.28 },
+        { "text": "sharp", "start": 7.32, "end": 7.52 },
+        { "text": "again", "start": 7.58, "end": 7.92 }
+      ]
+    }
+  ]
+}
+```
+
+## Don't fight the template
+
+If the user wants different typography, different blend, or different motion:
+**use Standard mode** (`../../standard/`). Don't try to override the locked CSS — the
+template's visual consistency is the whole point.
diff --git a/.claude/skills-media/embedded-captions/modes/cinematic/_archive/memory-wall/template.html b/.claude/skills-media/embedded-captions/modes/cinematic/_archive/memory-wall/template.html
new file mode 100644
index 000000000..da9cec4c4
--- /dev/null
+++ b/.claude/skills-media/embedded-captions/modes/cinematic/_archive/memory-wall/template.html
@@ -0,0 +1,179 @@
+<!doctype html>
+<!--
+  TEMPLATE: memory-wall
+  STYLE LOCKED. LAYOUT OPEN.
+
+  Locked (do not edit — overriding breaks visual consistency):
+    - cap-1/2/3/4 typography (weights, italic, letter-spacing, padding-right)
+    - mix-blend-mode: screen
+    - color, text-shadow, filter
+    - GSAP motion: container fade-in via tl.set, per-word opacity+y reveal,
+      group fade-out 0.45s before g.out
+
+  Open (agent fills via plan.json):
+    - {{PLANE_TOP}} {{PLANE_RIGHT}} {{PLANE_WIDTH}} {{PLANE_HEIGHT}}
+    - {{ROTATE_Y}} {{ROTATE_X}}  (perspective angle on the wall)
+    - --font-scale CSS var (multiplies all cap-N sizes — agent tunes for frame)
+    - GROUPS array (transcript groups, slot assignment 1/2/3/4, in/out/words)
+
+  Style typography is keyed to "slots", semantic positions in the arc:
+    cap-1: opener (italic, soft entry)
+    cap-2: continuation (smaller italic, hanging indent — ragged poem feel)
+    cap-3: pivot (upright, no italic, syntactic turn)
+    cap-4: climax (UPPERCASE 900, the payoff line)
+-->
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width={{WIDTH}}, height={{HEIGHT}}" />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      :root { --font-scale: {{FONT_SCALE}}; }
+
+      * { margin: 0; padding: 0; box-sizing: border-box; }
+      html, body {
+        margin: 0;
+        width: {{WIDTH}}px; height: {{HEIGHT}}px;
+        overflow: hidden;
+        background: #000;
+        font-family: "Inter", system-ui, sans-serif;
+      }
+
+      #a-roll {
+        position: absolute; inset: 0;
+        width: 100%; height: 100%;
+        object-fit: cover;
+      }
+
+      #stage {
+        position: absolute;
+        top: 0; left: 0;
+        width: {{WIDTH}}px; height: {{HEIGHT}}px;
+        perspective: 1400px;
+        perspective-origin: 30% 40%;
+        pointer-events: none;
+        z-index: 2;
+      }
+
+      /* LAYOUT (agent-tunable via plan.json) */
+      .wall-plane {
+        position: absolute;
+        top: {{PLANE_TOP}}px;
+        right: {{PLANE_RIGHT}}px;
+        width: {{PLANE_WIDTH}}px;
+        height: {{PLANE_HEIGHT}}px;
+        transform-style: preserve-3d;
+        transform: rotateY({{ROTATE_Y}}deg) rotateX({{ROTATE_X}}deg);
+        transform-origin: right center;
+        padding: 24px 32px;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: flex-end;
+        text-align: right;
+        gap: 14px;
+      }
+
+      /* STYLE (locked) */
+      .cap {
+        display: block;
+        position: relative;
+        line-height: 1.05;
+        opacity: 0;
+        mix-blend-mode: {{BLEND_MODE}};
+        color: {{CAP_COLOR}};
+        text-shadow: {{TEXT_SHADOW}};
+        filter: {{TEXT_FILTER}};
+        will-change: transform, opacity;
+      }
+      .cap .w { display: inline-block; opacity: 0; will-change: opacity, transform; }
+
+      .cap-1 { font-size: calc(78px * var(--font-scale));
+               font-weight: 600; font-style: italic;
+               letter-spacing: -0.01em; }
+      .cap-2 { font-size: calc(66px * var(--font-scale));
+               font-weight: 500; font-style: italic;
+               letter-spacing: -0.005em;
+               padding-right: calc(44px * var(--font-scale)); }
+      .cap-3 { font-size: calc(72px * var(--font-scale));
+               font-weight: 700;
+               letter-spacing: -0.015em; }
+      .cap-4 { font-size: calc(90px * var(--font-scale));
+               font-weight: 900;
+               letter-spacing: -0.03em;
+               text-transform: uppercase;
+               line-height: 1.0; }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="main"
+      data-start="0"
+      data-duration="{{DURATION}}"
+      data-width="{{WIDTH}}"
+      data-height="{{HEIGHT}}"
+    >
+      <video
+        id="a-roll"
+        src="source.mp4"
+        muted
+        playsinline
+        data-duration="{{DURATION}}"
+        data-track-index="0"
+        style="z-index: 1"
+      ></video>
+
+      <div id="stage">
+        <div class="wall-plane">{{GROUPS_HTML}}</div>
+      </div>
+
+      <audio
+        id="a-roll-audio"
+        src="source.mp4"
+        data-start="0"
+        data-duration="{{DURATION}}"
+        data-track-index="3"
+        data-volume="1"
+      ></audio>
+    </div>
+
+    <script>
+      window.__timelines = window.__timelines || {};
+      const tl = gsap.timeline({ paused: true });
+      const DUR = {{DURATION}};
+      const GROUPS = {{GROUPS_JSON}};
+
+      GROUPS.forEach(function (g) {
+        var sel = "#" + g.id;
+        var isSoft = g.tone === "soft";
+        tl.set(sel, { opacity: 1, y: 0 }, Math.max(0, g.in - 0.01));
+
+        g.words.forEach(function (w, i) {
+          var wsel = sel + " .w[data-i='" + i + "']";
+          if (isSoft) {
+            tl.fromTo(wsel,
+              { opacity: 0, y: 8 },
+              { opacity: 1, y: 0, duration: 0.45, ease: "power2.out", overwrite: "auto" },
+              w.start);
+          } else {
+            tl.fromTo(wsel,
+              { opacity: 0, y: 6, scale: 1.04 },
+              { opacity: 1, y: 0, scale: 1.0, duration: 0.22,
+                ease: "power3.out", overwrite: "auto", transformOrigin: "100% 50%" },
+              w.start);
+          }
+        });
+
+        if (g.out < DUR) {
+          tl.to(sel, { opacity: 0, duration: 0.5, ease: "power2.in", overwrite: "auto" },
+                g.out - 0.5);
+        }
+        tl.set(sel, { opacity: 0, visibility: "hidden" }, g.out);
+      });
+
+      tl.seek(0);
+      window.__timelines["main"] = tl;
+    </script>
+  </body>
+</html>
diff --git a/.claude/skills-media/embedded-captions/modes/cinematic/_archive/portrait-header/spec.md b/.claude/skills-media/embedded-captions/modes/cinematic/_archive/portrait-header/spec.md
new file mode 100644
index 000000000..efaaf0aba
--- /dev/null
+++ b/.claude/skills-media/embedded-captions/modes/cinematic/_archive/portrait-header/spec.md
@@ -0,0 +1,81 @@
+# Template: portrait-header
+
+**Look:** 9:16 portrait talking-head with captions on a horizontal strip
+across the top of the frame, above the subject's head. Optional crown at
+the bottom for shots that include the subject's waist or below.
+
+**Visual identity (LOCKED):**
+
+- 5 typography slots: intro / phrase / emph / dream / crown (centered)
+- `mix-blend-mode: screen` over warm bone color (#fff5df)
+- Single-caption swap (caps stack at one position in the header strip)
+- Per-word fade with subtle Y-drift (soft) or pop+scale (present)
+
+## When to apply
+
+✅ **Good fit:**
+
+- 9:16 portrait video (1080×1920 typical)
+- Single subject filling the center of the frame
+- Clean band visible above the head
+- Speech is relatively dense (many short phrases) — crown only for the
+  one true climax
+
+❌ **Wrong fit:**
+
+- Subject's head crops to the very top of frame (no header band exists)
+- 16:9 landscape → use `champion` or `memory-wall` instead
+- Multiple speakers / cuts
+
+## Layout decisions
+
+| Field           | What                                                                                                                    | Example (1080×1920)                  |
+| --------------- | ----------------------------------------------------------------------------------------------------------------------- | ------------------------------------ |
+| `header.top`    | Y of the header strip. Should sit above the subject's head with ~30px breathing room.                                   | `30` if hair top is around y=200     |
+| `header.height` | Height of the strip. Bigger for longer captions / 2-line wraps.                                                         | `280`                                |
+| `crown_top`     | Y of the crown line (bottom of frame). Skip if no waist visible.                                                        | `1620` for a near-full-body shot     |
+| `crown_enabled` | Whether to render a bottom crown. Skip if subject body fills the lower half completely (matte will block crown anyway). | `false` for tight head-and-shoulders |
+| `font_scale`    | Scale multiplier on locked sizes.                                                                                       | `1.0` for 1080×1920                  |
+
+## Slot assignment
+
+Same arc as champion: intro / phrase / emph / dream / crown.
+
+For portrait-header specifically, header band is narrow (one strip), so:
+
+- Most groups fit on 1-2 lines
+- Don't use crown if it'd be hidden by the body matte (Pausch-style portraits
+  often need to skip crown entirely and promote the climax to `emph` in the
+  header instead)
+
+## Plan.json shape
+
+```json
+{
+  "mode": "template",
+  "template": "portrait-header",
+  "duration": 25.3, "fps": 24, "width": 1080, "height": 1920,
+  "header": { "top": 30, "height": 280 },
+  "crown_top": 1620,
+  "font_scale": 1.0,
+  "groups": [
+    { "id": "cg-0", "slot": "intro", "tone": "soft",
+      "in": 0.10, "out": 3.20, "words": [...] },
+    { "id": "cg-1", "slot": "phrase", "tone": "soft",
+      "in": 3.55, "out": 5.80, "words": [...] },
+    { "id": "cg-2", "slot": "emph", "tone": "present",
+      "in": 17.85, "out": 22.10,
+      "words": [
+        {"text": "Time", "start": 17.94, "end": 18.26},
+        {"text": "is",   "start": 18.38, "end": 18.54},
+        {"text": "all",  "start": 18.66, "end": 18.80},
+        {"text": "we",   "start": 18.92, "end": 19.02},
+        {"text": "have", "start": 19.12, "end": 19.38}
+      ]}
+  ],
+  "crown_group": null
+}
+```
+
+Set `crown_group: null` if you've checked that a crown would be blocked by
+the subject body or the shot composition.
diff --git a/.claude/skills-media/embedded-captions/modes/cinematic/_archive/portrait-header/template.html b/.claude/skills-media/embedded-captions/modes/cinematic/_archive/portrait-header/template.html
new file mode 100644
index 000000000..4cf287350
--- /dev/null
+++ b/.claude/skills-media/embedded-captions/modes/cinematic/_archive/portrait-header/template.html
@@ -0,0 +1,170 @@
+<!doctype html>
+<!--
+  TEMPLATE: portrait-header
+  STYLE LOCKED. LAYOUT OPEN.
+
+  Look: 9:16 portrait talking-head, captions on a horizontal strip across
+  the top above the subject. Optional crown at bottom if waist+ visible.
+
+  Locked: 5 typography slots (intro/phrase/emph/dream/crown), screen blend,
+          single-caption swap (caps absolute-positioned in header strip).
+
+  Open via plan.json: header strip top/height, crown enable+top, font_scale.
+-->
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width={{WIDTH}}, height={{HEIGHT}}" />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      :root { --font-scale: {{FONT_SCALE}}; }
+
+      * { margin: 0; padding: 0; box-sizing: border-box; }
+      html, body {
+        margin: 0;
+        width: {{WIDTH}}px; height: {{HEIGHT}}px;
+        overflow: hidden;
+        background: #000;
+        font-family: "Inter", system-ui, sans-serif;
+      }
+      #a-roll { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
+      #stage {
+        position: absolute;
+        top: 0; left: 0;
+        width: {{WIDTH}}px; height: {{HEIGHT}}px;
+        pointer-events: none;
+        z-index: 2;
+      }
+
+      /* LAYOUT */
+      .header-plane {
+        position: absolute;
+        top: {{HEADER_TOP}}px;
+        left: 0; right: 0;
+        height: {{HEADER_HEIGHT}}px;
+        padding: 24px 40px;
+      }
+      .header-plane .cap {
+        position: absolute;
+        top: 24px;
+        left: 40px; right: 40px;
+        max-width: calc(100% - 80px);
+        text-align: center;
+      }
+      .crown-plane {
+        position: absolute;
+        top: {{CROWN_TOP}}px;
+        left: 0; right: 0;
+        text-align: center;
+        pointer-events: none;
+      }
+
+      /* STYLE (locked) */
+      .cap {
+        display: block;
+        position: relative;
+        line-height: 1.05;
+        opacity: 0;
+        mix-blend-mode: {{BLEND_MODE}};
+        color: {{CAP_COLOR}};
+        text-shadow: {{TEXT_SHADOW}};
+        filter: {{TEXT_FILTER}};
+        will-change: transform, opacity;
+      }
+      .cap .w { display: inline-block; opacity: 0; will-change: opacity, transform; }
+
+      .cap-intro  { font-size: calc(72px * var(--font-scale));
+                    font-weight: 500; font-style: italic;
+                    letter-spacing: -0.005em; line-height: 1.1; }
+      .cap-phrase { font-size: calc(88px * var(--font-scale));
+                    font-weight: 600;
+                    letter-spacing: -0.015em; line-height: 1.05; }
+      .cap-emph   { font-size: calc(104px * var(--font-scale));
+                    font-weight: 800;
+                    letter-spacing: -0.025em; line-height: 1.0; }
+      .cap-dream  { font-size: calc(92px * var(--font-scale));
+                    font-weight: 700; font-style: italic;
+                    letter-spacing: -0.015em; line-height: 1.05; }
+      .cap-crown  { font-size: calc(130px * var(--font-scale));
+                    font-weight: 900;
+                    letter-spacing: -0.035em; text-transform: uppercase;
+                    line-height: 1.0; }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="main"
+      data-start="0"
+      data-duration="{{DURATION}}"
+      data-width="{{WIDTH}}"
+      data-height="{{HEIGHT}}"
+    >
+      <video
+        id="a-roll"
+        src="source.mp4"
+        muted
+        playsinline
+        data-duration="{{DURATION}}"
+        data-track-index="0"
+        style="z-index: 1"
+      ></video>
+
+      <div id="stage">
+        <div class="header-plane">{{GROUPS_HTML}}</div>
+        <div class="crown-plane">{{CROWN_HTML}}</div>
+      </div>
+
+      <audio
+        id="a-roll-audio"
+        src="source.mp4"
+        data-start="0"
+        data-duration="{{DURATION}}"
+        data-track-index="3"
+        data-volume="1"
+      ></audio>
+    </div>
+
+    <script>
+      window.__timelines = window.__timelines || {};
+      const tl = gsap.timeline({ paused: true });
+      const DUR = {{DURATION}};
+      const GROUPS = {{GROUPS_JSON}};
+      const CROWN  = {{CROWN_JSON}};
+
+      function animateGroup(g) {
+        var sel = "#" + g.id;
+        var isSoft = g.tone === "soft";
+        tl.set(sel, { opacity: 1, y: 0 }, Math.max(0, g.in - 0.01));
+
+        g.words.forEach(function (w, i) {
+          var wsel = sel + " .w[data-i='" + i + "']";
+          if (isSoft) {
+            tl.fromTo(wsel,
+              { opacity: 0, y: 8 },
+              { opacity: 1, y: 0, duration: 0.42, ease: "power2.out", overwrite: "auto" },
+              w.start);
+          } else {
+            tl.fromTo(wsel,
+              { opacity: 0, y: 6, scale: 1.04 },
+              { opacity: 1, y: 0, scale: 1.0, duration: 0.22,
+                ease: "power3.out", overwrite: "auto", transformOrigin: "50% 50%" },
+              w.start);
+          }
+        });
+
+        if (g.out < DUR) {
+          tl.to(sel, { opacity: 0, duration: 0.45, ease: "power2.in", overwrite: "auto" },
+                g.out - 0.45);
+        }
+        tl.set(sel, { opacity: 0, visibility: "hidden" }, g.out);
+      }
+
+      GROUPS.forEach(animateGroup);
+      if (CROWN) animateGroup(CROWN);
+
+      tl.seek(0);
+      window.__timelines["main"] = tl;
+    </script>
+  </body>
+</html>
diff --git a/.claude/skills-media/embedded-captions/modes/cinematic/cinematic-cream/spec.md b/.claude/skills-media/embedded-captions/modes/cinematic/cinematic-cream/spec.md
new file mode 100644
index 000000000..a49020653
--- /dev/null
+++ b/.claude/skills-media/embedded-captions/modes/cinematic/cinematic-cream/spec.md
@@ -0,0 +1,16 @@
+# cinematic-cream — spec
+
+The authoritative spec lives in [template.html](template.html)'s header comment (DNA-only:
+what's LOCKED vs OPEN, the LAYOUT/planes contract, READING ORDER + hand-off, hero sizing).
+Read that header before authoring plan.json. Quick contract:
+
+- LOCKED: Inter, soft/present motion, warm-cream palette, screen blend, shadow logic.
+- OPEN per group (css field): size/weight/style/transform/spacing + position WITHIN a plane.
+- LAYOUT: run scripts/safe-zones.cjs first. Narration planes HUG the silhouette — use
+  zones.hugLeft/hugRight (2-6% gap from the subject's edge); a plane parked in the far
+  corner reads as disconnected floating text, not an embed. The ONE hero stays BIG
+  (~0.22-0.34·h) centered ON the subject (heroAnchor / heroBands.best), target ~30-55%
+  occlusion. fg is the LAST resort: only when heroBands.feasible=false (no band ≤62%).
+  hero BIG (~0.22-0.34·h) centered ON the subject (heroAnchor), target ~30-55% occlusion.
+- plan.json: groups[] with per-word transcript timings (use scripts/fill-timings.cjs),
+  fit via scripts/fit-fonts.cjs, compile via scripts/make-composition.cjs.
diff --git a/.claude/skills-media/embedded-captions/modes/cinematic/cinematic-cream/template.html b/.claude/skills-media/embedded-captions/modes/cinematic/cinematic-cream/template.html
new file mode 100644
index 000000000..7833cce4a
--- /dev/null
+++ b/.claude/skills-media/embedded-captions/modes/cinematic/cinematic-cream/template.html
@@ -0,0 +1,226 @@
+<!doctype html>
+<!--
+  TEMPLATE: cinematic-cream
+  DNA-ONLY template. No slot structure. No preset typography classes.
+  The agent composes each caption group's typography per-scene via the
+  plan.json `css` field.
+
+  What's LOCKED (DNA — do not override):
+    - font-family: Inter (+ fallback)
+    - Motion vocabulary: per-word soft/present reveal curves from the
+       validated memory-wall timeline (tone: "soft" | "present")
+    - Color palette defaults (cream on dark scenes, deep warm on light)
+    - mix-blend-mode defaults, text-shadow / filter auto-picked from
+       cap_color luminance (via make-composition.py)
+    - Animation: 0.7s container fade-in (at g.in-0.01 via tl.set), per-word
+       reveal at w.start, group fade-out 0.5s before g.out
+
+  What's OPEN per group (agent decides per scene via `css` field):
+    - font-size, font-weight, font-style (italic or not), text-transform
+       (uppercase or not), letter-spacing, line-height
+    - Position: top / left / right / bottom / transform / text-align
+    - Layer: bg (embed via matte) | fg (announcement on top)
+    - Tone: soft | present (motion curve)
+    - scale: optional shortcut for size multiplication
+
+  LAYOUT — FIRST run the safe-zone precompute, THEN compose into PLANES:
+    - Run `node scripts/safe-zones.cjs <project>` and read `safe-zones.json`. From the
+       matte it gives subject coverage%, the clearer side, the largest CLEAN rectangles
+       (left/right/top), and a verdict:
+         · "fg"   → subject fills the frame; NO room to embed behind it. Use
+            `caption_layer:"fg"` (screen-blend on top). Do NOT fight it with bg embeds —
+            that's the 9:16 case that costs many failed occlusion rounds.
+         · "embed"→ NARRATION planes go INSIDE the reported clean zones (prefer the clearer
+            side / top). The HERO is the EXCEPTION — see the next bullet. Don't guess
+            narration positions — use the zones safe-zones gives you.
+    - NARRATION: define 2-4 named planes in plan.json `planes {}`, each inside a clean zone
+       from safe-zones.json. Give each narration group a `plane`; groups STACK within it (a
+       plane is a flex column → lines accumulate, aligned + coherent). Narration must be CLEAR.
+    - THE HERO (the one promoted peak word) is the OPPOSITE of narration — BIG, and ON the
+       subject. It is the scarce, earned PEAK; it must feel like it BURSTS, not a polite label:
+         · BIG + dominant — **~0.22–0.34 × frame height**. Give it a WIDE plane (≈ centered,
+            spanning the subject), NEVER a narrow margin column. (fit-fonts won't enlarge — if
+            the hero's box is narrow it stays small; widen the box.)
+         · CENTERED on the subject (use safe-zones `heroAnchor` = the subject's center),
+            CROSSING it so the head/torso occludes the MIDDLE — **target ~30–55% occlusion**.
+            That occlusion IS the effect. A hero shoved into a clean margin (~10% graze) is
+            WRONG — it reads as a small floating word, not an embed behind the subject.
+         · Exactly ONE hero per clip (scarcity = impact). Mark it `"hero": true` in the plan.
+    - Do NOT hand-position every group with its own scattered absolute `top%` — that
+       produces the unbalanced, occluded layouts the gate rejects (many re-tries). Planes
+       first; per-group `css` only fine-tunes WITHIN a plane. (Position fields above apply
+       per-group only when a group is NOT in a plane — the exception, not the default.)
+
+  READING ORDER — on-screen position follows SPOKEN order; a promoted word appears once:
+    - For groups sharing a column/region, vertical (top→bottom) order MUST match spoken
+       order. A promoted hero must NOT sit below words that come after it.
+       (e.g. "judge us by the [ACTIONS] that we take" → ACTIONS reads BETWEEN "by the" and
+       "that we take", NEVER below "that we take".)
+    - The promoted word is lifted OUT of the narration (appears once, as the hero — never
+       also in a narration line). For the words AFTER it, two options, in order:
+         1. PREFERRED — flow them directly BELOW the hero (in reading order) or merge them
+            into the hero's group, IF that area is clean (check safe-zones). One continuous
+            read, no clearing.
+         2. FALLBACK — if below/merge would land on the subject (occluded), do the Standard
+            hand-off: the pre-hero narration CLEARS, then the post-hero words appear fresh
+            (page-flip); the hero may hold across the flip.
+       Prefer promoting a CLAUSE-FINAL word when you can — then nothing follows to place.
+
+  Philosophy:
+    - Number of groups = content decides (3? 7? 12? whatever the speech
+       warrants)
+    - Each group's typography = scene decides (italic for soft moments,
+       uppercase for punch, mixed case for narration — per group)
+    - No more "cap-1 must be italic 600" rules. Those were slots.
+    - The agent reads the scene + transcript and composes. The template
+       only guarantees the DNA feels coherent (Inter family, same motion
+       library, warm-cream or deep-warm palette, same shadow logic).
+
+  See `references/typographic-moves.md` for RECOMMENDED typography
+  combinations (NOT rules) — italic 600 for openers, uppercase 900 for
+  climaxes, etc. These are suggestions the agent can pick from or deviate.
+-->
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width={{WIDTH}}, height={{HEIGHT}}" />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      :root { --font-scale: {{FONT_SCALE}}; --h: {{HEIGHT}}px; --w: {{WIDTH}}px; }
+
+      * { margin: 0; padding: 0; box-sizing: border-box; }
+      html, body {
+        margin: 0;
+        width: {{WIDTH}}px; height: {{HEIGHT}}px;
+        overflow: hidden;
+        background: #000;
+        font-family: "Inter", "Helvetica Neue", system-ui, sans-serif;
+      }
+      #a-roll { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
+      #stage {
+        position: absolute;
+        top: 0; left: 0;
+        width: {{WIDTH}}px; height: {{HEIGHT}}px;
+        pointer-events: none;
+        z-index: 2;
+      }
+
+      /* BASE — everything shared across groups */
+      .cap {
+        display: block;
+        position: absolute;
+        opacity: 0;
+        mix-blend-mode: {{BLEND_MODE}};
+        color: {{CAP_COLOR}};
+        text-shadow: {{TEXT_SHADOW}};
+        filter: {{TEXT_FILTER}};
+        line-height: 1.0;
+        will-change: transform, opacity;
+        /* Free-mode defaults (when cap is a direct child of #stage):
+           per-group `top:` positions the element's TOP edge from the
+           frame top. Agent writes top/left/right per group.  */
+        top: 50%; left: 0; right: 0; text-align: center;
+      }
+      .cap .w { display: inline-block; opacity: 0; will-change: opacity, transform; }
+
+      /* Plane mode — when .cap is nested inside .plane, switch to flow
+         layout so the plane's flex/grid can own the stacking. Agent writes
+         typography only per group; positions are delegated to the plane.
+         This is the memory-wall / champion architecture: a shared parent
+         container handles spatial coherence, caps inside don't fight for
+         top% values. */
+      .plane { position: absolute; pointer-events: none; }
+      .plane > .cap {
+        position: relative;
+        top: auto; left: auto; right: auto; bottom: auto;
+      }
+
+      {{PLANES_CSS}}
+
+      /* Per-group typography (agent-authored). */
+      {{CUSTOM_CSS}}
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="main"
+      data-start="0"
+      data-duration="{{DURATION}}"
+      data-width="{{WIDTH}}"
+      data-height="{{HEIGHT}}"
+    >
+      <video
+        id="a-roll"
+        src="source.mp4"
+        muted
+        playsinline
+        data-duration="{{DURATION}}"
+        data-track-index="0"
+        style="z-index: 1"
+      ></video>
+
+      <div id="stage">{{GROUPS_HTML}}</div>
+
+      <audio
+        id="a-roll-audio"
+        src="source.mp4"
+        data-start="0"
+        data-duration="{{DURATION}}"
+        data-track-index="3"
+        data-volume="1"
+      ></audio>
+    </div>
+
+    <script>
+      window.__timelines = window.__timelines || {};
+      const tl = gsap.timeline({ paused: true });
+      const DUR = {{DURATION}};
+      const GROUPS = {{GROUPS_JSON}};
+
+      /* Motion vocabulary — LOCKED.
+         soft:    gentle fade with 8px y-drift, 0.45s power2.out
+         present: snappier pop with 6px y + 1.04 scale, 0.22s power3.out
+         Both target per-WORD spans. Container fade-in via tl.set at g.in-0.01. */
+      GROUPS.forEach(function (g) {
+        var sel = "#" + g.id;
+        var isSoft = g.tone === "soft";
+
+        // Enter: reveal opacity at g.in-0.01. The cap has been reserving flex
+        // space all along (opacity: 0 but display: block from CSS), so no
+        // layout reflow when it fades in — matches memory-wall canonical.
+        tl.set(sel, { opacity: 1 }, Math.max(0, g.in - 0.01));
+
+        g.words.forEach(function (w, i) {
+          var wsel = sel + " .w[data-i='" + i + "']";
+          if (isSoft) {
+            tl.fromTo(wsel,
+              { opacity: 0, y: 8 },
+              { opacity: 1, y: 0, duration: 0.45, ease: "power2.out", overwrite: "auto" },
+              w.start);
+          } else {
+            tl.fromTo(wsel,
+              { opacity: 0, y: 6, scale: 1.04 },
+              { opacity: 1, y: 0, scale: 1.0, duration: 0.22,
+                ease: "power3.out", overwrite: "auto", transformOrigin: "50% 50%" },
+              w.start);
+          }
+        });
+
+        if (g.out < DUR) {
+          tl.to(sel, { opacity: 0, duration: 0.5, ease: "power2.in", overwrite: "auto" },
+                g.out - 0.5);
+        }
+        // Exit: display:none releases flex space so the next sentence-block's
+        // caps can take the top slot. All caps in ONE block share the same
+        // `out` so this fires synchronously for the block — one clean reflow
+        // at the boundary, no per-cap jitter. Plan must share `out` within a
+        // block; staggered per-cap exits are forbidden in plane mode.
+        tl.set(sel, { opacity: 0, display: "none" }, g.out);
+      });
+
+      tl.seek(0);
+      window.__timelines["main"] = tl;
+    </script>
+  </body>
+</html>
diff --git a/.claude/skills-media/embedded-captions/modes/cinematic/engine.html b/.claude/skills-media/embedded-captions/modes/cinematic/engine.html
new file mode 100644
index 000000000..2773bed11
--- /dev/null
+++ b/.claude/skills-media/embedded-captions/modes/cinematic/engine.html
@@ -0,0 +1,355 @@
+<!doctype html>
+<!--
+  ENGINE — the one Cinematic-mode shell, parameterized by a DNA (dna/<name>.json).
+  Replaces per-template HTML files: the DNA supplies type / palette / blend / motion
+  grammar / hero orchestration; safe-zones v2 supplies scene tokens (accent sampling,
+  contact-shadow direction, depth-match blur); the plan supplies layout + per-group
+  typography. Compiled by make-composition.cjs.
+
+  Contract (unchanged from cinematic-cream — gates depend on it):
+    #root[data-composition-id="main"] · #a-roll · #stage · #a-roll-audio
+    .plane > .cap > .w spans · paused seek-safe GSAP on window.__timelines["main"]
+    container fade via tl.set at g.in−0.01 · exit fade + display:none at g.out
+    no Math.random / Date.now / CSS keyframes / repeat:-1
+
+  New in the engine:
+    - MOTION grammar from the DNA: soft / present / impact tones (+ "burn" reveal)
+    - HERO three-act orchestration:
+        act 1 SETUP   — co-visible groups dim 0.35s before the hero lands
+        act 2 IMPACT  — entrance (emergence | settle | slam | rise) with per-letter
+                        stagger; amplitude coupled to the spoken word's RMS loudness
+        act 3 AFTERGLOW — slow breathe scale + glow layer (DNA-gated) until exit
+    - depth-match blur on embed (bg) captions only; fg stays sharp
+    - scene-sampled --accent custom property available to per-group CSS
+-->
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width={{WIDTH}}, height={{HEIGHT}}" />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      :root {
+        --font-scale: {{FONT_SCALE}};
+        --h: {{HEIGHT}}px; --w: {{WIDTH}}px;
+        --accent: {{ACCENT}};
+      }
+
+      * { margin: 0; padding: 0; box-sizing: border-box; }
+      html, body {
+        margin: 0;
+        width: {{WIDTH}}px; height: {{HEIGHT}}px;
+        overflow: hidden;
+        background: #000;
+        font-family: '{{FONT_FAMILY}}', "Helvetica Neue", system-ui, sans-serif;
+      }
+      #a-roll { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
+      #stage {
+        position: absolute;
+        top: 0; left: 0;
+        width: {{WIDTH}}px; height: {{HEIGHT}}px;
+        pointer-events: none;
+        z-index: 2;
+      }
+
+      /* BASE — DNA tokens. bg (embed) captions get the depth-match filter; fg stays sharp. */
+      .cap {
+        display: block;
+        position: absolute;
+        opacity: 0;
+        mix-blend-mode: {{BLEND_MODE}};
+        color: {{CAP_COLOR}};
+        text-shadow: {{TEXT_SHADOW}};
+        filter: {{TEXT_FILTER_BG}};
+        line-height: 1.12; /* contains ink + internal leading — wrapped rows breathe (was 1.0: rows touched) */
+        will-change: transform, opacity;
+        top: 50%; left: 0; right: 0; text-align: center;
+      }
+      .cap[data-layer="fg"] { filter: {{TEXT_FILTER_FG}}; }
+      .cap .w { display: inline-block; opacity: 0; will-change: opacity, transform; }
+      .cap .w .l { display: inline-block; will-change: opacity, transform; }
+
+      /* hero glow — same glyphs duplicated UNDER the hero, blurred; opacity driven by GSAP.
+         em-based blur scales with the hero's font size. Not part of plan.groups → gates skip it.
+         MUST be out of flow (absolute) — as a flow sibling inside a plane it displaces the hero. */
+      .hero-glow, .plane > .cap.hero-glow { position: absolute; left: 0; right: 0; top: 0; filter: blur(0.06em); }
+      /* hero echoes — colored duplicates (RGB fringe / speed trails); position mirrors the
+         hero via its #id rule, color comes from each echo's own rule */
+      .hero-echo, .plane > .cap.hero-echo { position: absolute; left: 0; right: 0; top: 0; }
+
+      .plane { position: absolute; pointer-events: none; }
+      .plane > .cap {
+        position: relative;
+        top: auto; left: auto; right: auto; bottom: auto;
+      }
+
+      {{DNA_CSS}}
+
+      {{PLANES_CSS}}
+
+      /* Per-group typography (agent-authored). */
+      {{CUSTOM_CSS}}
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="main"
+      data-start="0"
+      data-duration="{{DURATION}}"
+      data-width="{{WIDTH}}"
+      data-height="{{HEIGHT}}"
+    >
+      <video
+        id="a-roll"
+        src="source.mp4"
+        muted
+        playsinline
+        data-duration="{{DURATION}}"
+        data-track-index="0"
+        style="z-index: 1"
+      ></video>
+
+      <div id="stage">{{GROUPS_HTML}}</div>
+
+      <audio
+        id="a-roll-audio"
+        src="source.mp4"
+        data-start="0"
+        data-duration="{{DURATION}}"
+        data-track-index="3"
+        data-volume="1"
+      ></audio>
+    </div>
+
+    <script>
+      window.__timelines = window.__timelines || {};
+      const tl = gsap.timeline({ paused: true });
+      const DUR = {{DURATION}};
+      const GROUPS = {{GROUPS_JSON}};
+      const MOTION = {{MOTION_JSON}};
+      const HEROES = {{HEROES_JSON}};
+      const HERO_IDS = {};
+      HEROES.forEach(function (h) { HERO_IDS[h.id] = true; });
+
+      /* ── word entrance: the DNA's motion grammar ─────────────────────────
+         Each tone = {y, x, blur, scale, rot, dur, ease} or {reveal:"burn"}.
+         rot alternates sign by word index (deterministic percussion); blur is a
+         filter tween on the word span only (the container's depth-match filter
+         is a separate element — no conflict, no reflow). */
+      function wordReveal(wsel, m, at, idx) {
+        if (m.reveal === "burn") { tl.set(wsel, { opacity: 1 }, at); return; }
+        if (m.reveal === "flicker") {
+          /* neon tube igniting — deterministic on/off pattern, phase-shifted by word
+             index so a line of words doesn't strobe in unison */
+          var o = (idx % 3) * 0.018;
+          tl.set(wsel, { opacity: 1 }, at);
+          tl.set(wsel, { opacity: 0.25 }, at + 0.042 + o);
+          tl.set(wsel, { opacity: 1 }, at + 0.078 + o);
+          tl.set(wsel, { opacity: 0.5 }, at + 0.112 + o);
+          tl.set(wsel, { opacity: 1 }, at + 0.152 + o);
+          return;
+        }
+        var from = { opacity: 0 }, to = { opacity: 1, duration: m.dur || 0.4,
+          ease: m.ease || "power2.out", overwrite: "auto", transformOrigin: "50% 70%" };
+        if (m.y) { from.y = m.y; to.y = 0; }
+        if (m.x) { from.x = m.x; to.x = 0; }
+        if (m.scale && m.scale !== 1) { from.scale = m.scale; to.scale = 1; }
+        if (m.stretchX && m.stretchX !== 1) { from.scaleX = m.stretchX; to.scaleX = 1; }
+        if (m.skewX) { from.skewX = m.skewX; to.skewX = 0; }
+        if (m.rot) { from.rotation = ((idx % 2) ? 1 : -1) * m.rot; to.rotation = 0; }
+        if (m.blur) { from.filter = "blur(" + m.blur + "px)"; to.filter = "blur(0px)"; }
+        tl.fromTo(wsel, from, to, at);
+      }
+
+      var EXIT = MOTION.exit || { dur: 0.5, ease: "power2.in", stagger: 0 };
+      var LINE_REVEAL = MOTION.lineReveal || null;
+
+      /* exit cascade: lines of the same plane sharing one page-flip `out` can leave
+         top-to-bottom (editorial). Slot layout = absolute positions, so staggered
+         exits cause no reflow. Every exit still hard-kills at g.out. */
+      var pageMates = {};
+      GROUPS.forEach(function (g) {
+        if (HERO_IDS[g.id]) return;
+        var key = (g.plane || "free") + "@" + g.out;
+        (pageMates[key] = pageMates[key] || []).push(g.id);
+      });
+
+      GROUPS.forEach(function (g) {
+        if (HERO_IDS[g.id]) return; // heroes are orchestrated below
+        var sel = "#" + g.id;
+        var m = MOTION[g.tone] || MOTION.soft || {};
+
+        tl.set(sel, { opacity: 1 }, Math.max(0, g.in - 0.01));
+
+        /* line container reveal (keynote's surgical wipe) — clip-path, not transform.
+           PHRASE mode: the whole line is set visible up front and the WIPE is the
+           reveal (slide-title idiom) — wiping an empty container reads as nothing. */
+        if (LINE_REVEAL && LINE_REVEAL.type === "wipe-x") {
+          tl.set(sel + " .w", { opacity: 1 }, Math.max(0, g.in - 0.01));
+          tl.fromTo(sel, { clipPath: "inset(0% 100% 0% 0%)" },
+            { clipPath: "inset(0% 0% 0% 0%)", duration: LINE_REVEAL.dur || 0.4,
+              ease: LINE_REVEAL.ease || "expo.out", overwrite: "auto" },
+            Math.max(0, g.in - 0.01));
+        } else {
+          g.words.forEach(function (w, i) {
+            wordReveal(sel + " .w[data-i='" + i + "']", m, w.start, i);
+          });
+        }
+
+        /* exit: DNA grammar — direction + speed + optional per-line cascade */
+        var mates = pageMates[(g.plane || "free") + "@" + g.out];
+        var rank = mates.indexOf(g.id);
+        var lead = (EXIT.stagger || 0) * (mates.length - 1 - rank);
+        var exitAt = Math.max(g.in + 0.1, g.out - (EXIT.dur || 0.5) - lead);
+        var to = { opacity: 0, duration: EXIT.dur || 0.5, ease: EXIT.ease || "power2.in", overwrite: "auto" };
+        if (EXIT.y) to.y = EXIT.y;
+        if (EXIT.x) to.x = EXIT.x;
+        if (EXIT.scale && EXIT.scale !== 1) to.scale = EXIT.scale;
+        if (g.out < DUR) tl.to(sel, to, exitAt);
+        tl.set(sel, { opacity: 0, display: "none" }, g.out);
+      });
+
+      /* ── HEROES: three-act orchestration, one per promoted beat ──────────── */
+      HEROES.forEach(function (HERO) {
+        var hsel = "#" + HERO.id;
+        var gsel = "#" + HERO.id + "-glow";
+        var hg = GROUPS.filter(function (g) { return g.id === HERO.id; })[0];
+        var amp = HERO.amp || 1;
+
+        /* act 1 — SETUP: co-visible groups yield (dim) just before the hero lands.
+           Minor heroes are emphasis-plus: no dim, no ripple, no breathe — the apex
+           keeps those privileges (that's what makes it the apex). */
+        if (!HERO.minor && HERO.dimOthers < 1) {
+          GROUPS.forEach(function (g) {
+            if (g.id === HERO.id) return;
+            if (g.in < HERO.in && g.out > HERO.in) {
+              tl.to("#" + g.id, { opacity: HERO.dimOthers, duration: 0.3, ease: "power2.out", overwrite: "auto" },
+                    Math.max(0, HERO.in - 0.35));
+            }
+          });
+        }
+
+        tl.set(hsel, { opacity: 1 }, Math.max(0, HERO.in - 0.01));
+
+        /* act 2 — IMPACT: container entrance (amplitude ∝ spoken loudness) */
+        if (HERO.entrance === "settle") {
+          tl.fromTo(hsel, { scale: 1 + 0.10 * amp },
+            { scale: 1, duration: 0.50, ease: "expo.out", transformOrigin: "50% 60%", overwrite: "auto" }, HERO.in);
+        } else if (HERO.entrance === "slam") {
+          /* percussion: ONE unit, violent snap — geometry locks in 0.16s; heat comes after */
+          tl.fromTo(hsel, { scale: 1 + 0.22 * amp },
+            { scale: 1, duration: 0.16, ease: "back.out(2.2)", transformOrigin: "50% 55%", overwrite: "auto" }, HERO.in);
+        } else if (HERO.entrance === "rise") {
+          tl.fromTo(hsel, { y: 22 * amp },
+            { y: 0, duration: 0.60, ease: "power2.out", overwrite: "auto" }, HERO.in);
+        } else if (HERO.entrance === "wipe-up") {
+          /* surgical slide-title reveal — clip-path only (not a transform: can't
+             collide with the afterglow scale channel), bottom-up behind the subject */
+          tl.fromTo(hsel, { clipPath: "inset(100% 0% 0% 0%)" },
+            { clipPath: "inset(0% 0% 0% 0%)", duration: 0.45, ease: "expo.out", overwrite: "auto" }, HERO.in);
+        } else if (HERO.entrance === "flicker-on") {
+          /* neon sign powering up — deterministic strobe, then steady */
+          tl.set(hsel, { opacity: 1 }, HERO.in);
+          tl.set(hsel, { opacity: 0.15 }, HERO.in + 0.05);
+          tl.set(hsel, { opacity: 1 }, HERO.in + 0.095);
+          tl.set(hsel, { opacity: 0.4 }, HERO.in + 0.14);
+          tl.set(hsel, { opacity: 1 }, HERO.in + 0.19);
+          tl.fromTo(hsel, { scale: 1.03 }, { scale: 1, duration: 0.4, ease: "power2.out", overwrite: "auto", transformOrigin: "50% 55%" }, HERO.in + 0.19);
+        } else if (HERO.entrance === "streak") {
+          /* speed pass — slides in along its own motion blur (skew rides the velocity) */
+          tl.fromTo(hsel, { x: -90 * amp, skewX: -12, opacity: 0 },
+            { x: 0, skewX: 0, opacity: 1, duration: 0.28, ease: "expo.out", overwrite: "auto", transformOrigin: "50% 80%" }, HERO.in);
+        } else { /* emergence — grows out from behind the subject */
+          tl.fromTo(hsel, { scale: Math.max(0.74, 1 - 0.18 * amp) },
+            { scale: 1, duration: 0.55, ease: "expo.out", transformOrigin: "50% 62%", overwrite: "auto" }, HERO.in);
+        }
+
+        /* impact ripple (loud): the hero's landing bumps every co-visible caption —
+           captions only, the footage itself NEVER moves */
+        if (!HERO.minor && HERO.ripple > 0) {
+          GROUPS.forEach(function (g) {
+            if (g.id === HERO.id) return;
+            if (g.in < HERO.in && g.out > HERO.in + 0.3) {
+              tl.to("#" + g.id, { y: HERO.ripple, duration: 0.07, ease: "power2.out", overwrite: "auto" }, HERO.in + 0.04);
+              tl.to("#" + g.id, { y: 0, duration: 0.20, ease: "power2.out", overwrite: "auto" }, HERO.in + 0.11);
+            }
+          });
+        }
+
+        /* words / letters */
+        (hg ? hg.words : []).forEach(function (w, i) {
+          var wsel = hsel + " .w[data-i='" + i + "']";
+          if (HERO.perLetter) {
+            tl.set(wsel, { opacity: 1 }, w.start);
+            var letters = document.querySelectorAll(wsel + " .l");
+            for (var li = 0; li < letters.length; li++) {
+              var lf = { opacity: 0, y: "0.16em", scale: 1.05 };
+              var lt = { opacity: 1, y: 0, scale: 1, duration: 0.30, ease: "power4.out", overwrite: "auto" };
+              if (HERO.letterBlur) { lf.filter = "blur(" + HERO.letterBlur + "px)"; lt.filter = "blur(0px)"; }
+              tl.fromTo(letters[li], lf, lt, w.start + li * (HERO.letterStagger || 0.014));
+            }
+          } else {
+            var m = MOTION.impact || MOTION.present || {};
+            wordReveal(wsel, m, w.start, i);
+          }
+        });
+
+        /* glow layer (DNA-gated). Slam = impact THEN heat: glow waits for geometry lock. */
+        if (HERO.glow > 0) {
+          var glowAt = HERO.in + (HERO.entrance === "slam" ? 0.17 : 0.08);
+          var glowPeak = Math.min(0.5, HERO.glow * amp) * (HERO.minor ? 0.5 : 1);
+          tl.set(gsel + " .w", { opacity: 1 }, Math.max(0, HERO.in - 0.01));
+          tl.fromTo(gsel, { opacity: 0 },
+            { opacity: glowPeak, duration: HERO.entrance === "slam" ? 0.3 : 0.5, ease: "power2.out", overwrite: "auto" },
+            glowAt);
+          tl.to(gsel, { opacity: 0, duration: 0.5, ease: "power2.in", overwrite: "auto" }, HERO.out - 0.5);
+          tl.set(gsel, { opacity: 0, display: "none" }, HERO.out);
+        }
+
+        /* fx: ECHO layers (RGB-split fringe / speed trails) — colored duplicates that
+           CONVERGE as the word lands, then rest at a small offset until exit */
+        if (HERO.echoes && HERO.echoes.length) {
+          HERO.echoes.forEach(function (ec, k) {
+            var esel = "#" + HERO.id + "-echo-" + k;
+            tl.set(esel + " .w", { opacity: 1 }, Math.max(0, HERO.in - 0.01));
+            tl.fromTo(esel,
+              { x: (ec.dx || 0) * 4, y: (ec.dy || 0) * 4, opacity: 0 },
+              { x: ec.dx || 0, y: ec.dy || 0, opacity: ec.opacity != null ? ec.opacity : 0.5,
+                duration: 0.22, ease: "power4.out", overwrite: "auto" }, HERO.in);
+            tl.to(esel, { opacity: 0, duration: 0.4, ease: "power2.in", overwrite: "auto" }, HERO.out - 0.45);
+            tl.set(esel, { opacity: 0, display: "none" }, HERO.out);
+          });
+        }
+
+        /* fx: SHEEN — one gradient sweep across the hero during the hold (chrome).
+           Targets the .w spans (the gradient lives there — see wordCss). Starts as the
+           entrance settles so the specular hit is visible early in the hold. */
+        if (HERO.sheen && HERO.out - HERO.in > 0.9) {
+          tl.fromTo(hsel + " .w", { backgroundPosition: "0% 50%" },
+            { backgroundPosition: "200% 50%", duration: Math.min(1.2, HERO.out - HERO.in - 0.5),
+              ease: "power1.inOut", overwrite: "auto" }, HERO.in + 0.22);
+        }
+
+        /* act 3 — AFTERGLOW: ONE slow scale tween (no loops — deterministic).
+           loom (slow growth, loud) subsumes breathe — never two transform tweens
+           on the same element in the same window. wipe-up entrances are clip-path,
+           so the afterglow scale channel is always free by now. */
+        var after = HERO.loom > 0 ? HERO.loom : HERO.breathe;
+        if (!HERO.minor && after > 0 && HERO.out - HERO.in > 1.4) {
+          tl.fromTo(hsel, { scale: 1 },
+            { scale: 1 + after, duration: HERO.out - HERO.in - 1.2, ease: HERO.loom > 0 ? "power1.inOut" : "sine.inOut", overwrite: "auto" },
+            HERO.in + 0.7);
+        }
+
+        /* exit */
+        if (HERO.out < DUR) {
+          tl.to(hsel, { opacity: 0, duration: 0.5, ease: "power2.in", overwrite: "auto" }, HERO.out - 0.5);
+        }
+        tl.set(hsel, { opacity: 0, display: "none" }, HERO.out);
+      });
+
+      tl.seek(0);
+      window.__timelines["main"] = tl;
+    </script>
+  </body>
+</html>
diff --git a/.claude/skills-media/embedded-captions/modes/standard/_anatomy.md b/.claude/skills-media/embedded-captions/modes/standard/_anatomy.md
new file mode 100644
index 000000000..0eb3fa023
--- /dev/null
+++ b/.claude/skills-media/embedded-captions/modes/standard/_anatomy.md
@@ -0,0 +1,233 @@
+---
+name: caption-template-anatomy
+description: The shared, reproducible scene engine every caption template is built on — a matted talking-head with a flowing verbatim foreground caption and a single climax word, driven by one paused GSAP timeline. Read it ONCE per session (it is identical for all 54 templates); each per-template file in templates/ only overrides the style tokens + the named climax entrance/exit.
+metadata:
+  tags: caption, talking-head, matte, occlusion, verbatim, climax, gsap, hyperframes
+---
+
+# Caption Template — Anatomy (the shared engine)
+
+A **caption template** = one complete, reproducible HyperFrames scene:
+
+> **the person (always in frame)** + a **flowing foreground caption** (verbatim, word-by-word, with appear **and** disappear) + a **climax word** (big, behind the speaker, with a designed entrance **and** exit) + a coherent **font / colour / motion** design.
+
+Every file in `templates/` is the SAME engine described here with three things swapped: (1) the **style tokens** (font, fills, accent, optional gradient/stroke), (2) the named **climax entrance** + **exit** (see `_motion.md`), (3) the **copy** (flow lines + climax word) and **scene/person**. So read this once; each template file is short.
+
+HyperFrames-native, so anyone can reproduce it:
+
+- **One paused GSAP timeline per composition**, registered to `window.__timelines[data-composition-id]`.
+- All timing in **seconds**; `data-start` / `data-duration` carry the scene window.
+- **Deterministic + seek-safe** only — no `Math.random()`, no `Date.now()`, no infinite repeats, no un-seekable CSS animations. Every state is reachable by seeking the timeline to a time `t`.
+- GSAP transform aliases (`x`, `y`, `scale`, `rotation`); animate `opacity`, `filter`, `clipPath`, `textShadow`, `backgroundPosition`, `letterSpacing` — never layout props (width/top/left/margin).
+
+For the composition contract see `hyperframes-core`; eases + the animated-property allowlist see `hyperframes-gsap`; caption grouping/positioning/exit guarantees see `hyperframes-captions`.
+
+## 1 · Asset prep (two CLI calls)
+
+```bash
+# 1) The person — transparent talking-head cutout over the scene (VP9 + alpha)
+bash scripts/prepare.sh   <project>      # matte ∥ transcribe ∥ safe-zones (THIS skill — not remove-background)
+#    (a still works too:  remove-background portrait.jpg -o person.png)
+
+# 2) The verbatim word timings that drive the flowing caption
+npx hyperframes transcribe subject.mp4 --model small            # → transcript.json
+#    shape: [{ "id":"w0","text":"Hello","start":0.0,"end":0.5 }, …]
+```
+
+The flow caption consumes that `transcript.json` directly (word `start`/`end` → reveal + active-word emphasis). The climax word is authored by hand (it is the headline beat, not part of the spoken transcript). In production the avatar/matte pipeline yields a pixel-perfect alpha for free — `remove-background` is the fallback for arbitrary footage.
+
+## 2 · The matte sandwich (HTML)
+
+Six layers, back-to-front. The person is layered ON TOP of the climax so they physically **occlude** it — this is what sells "behind the speaker" (blur/opacity alone reads as a flat overlay).
+
+```html
+<div
+  class="stage {STYLE} {PERSON}"
+  id="cap-{id}"
+  data-composition-id="cap-{id}"
+  data-start="0"
+  data-duration="{SCENE_DUR}"
+  data-track-index="0"
+>
+  <!-- z0  background plate (the original frame, full) -->
+  <!--     supplied by .{PERSON} as background-image, or a <video> at z-index:0 -->
+
+  <!-- z1  CLIMAX — big, BEHIND the person, occluded -->
+  <div class="climax"><span>{CLIMAX_WORD}</span></div>
+
+  <!-- z4  the person cutout (transparent webm/png), aligned to the plate -->
+  <video class="cut" src="person.webm" muted playsinline></video>
+  <!-- or:  <img class="cut" src="person.png"> -->
+
+  <!-- z5  grade / vignette for depth + legibility -->
+  <div class="grade"></div>
+
+  <!-- z6  FLOW — the verbatim caption, IN FRONT, lower third -->
+  <div class="flow"></div>
+  <!-- words injected from transcript.json -->
+</div>
+```
+
+## 3 · Base CSS (layout · z-order · sizing)
+
+Caption size is in **`cqh`** (% of frame height) via a size container, so it honours broadcast spec at any resolution (~8% cap-height for a 16:9 word). The per-template file only sets the `--ff` / `--cfill` / `--cacc` tokens and any `.climax span` fill (gradient/stroke).
+
+```css
+.stage {
+  position: relative;
+  aspect-ratio: 16/9;
+  overflow: hidden;
+  container-type: size;
+  background-size: cover;
+  background-position: center 12%;
+  background-color: #0a0a0e;
+  font-family: var(--ff);
+}
+.stage > * {
+  position: absolute;
+}
+.cut {
+  z-index: 4;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  object-position: center 12%;
+  pointer-events: none;
+}
+.grade {
+  z-index: 5;
+  inset: 0;
+  pointer-events: none;
+  background: radial-gradient(130% 100% at 50% 26%, transparent 40%, rgba(0, 0, 0, 0.6));
+}
+
+/* CLIMAX — big, behind person (z1), occluded. line-height ≥1.15 so clip-reveal
+   entrances (inset(0)) never slice glyph tops; pad clips negative for script faces. */
+.climax {
+  z-index: 1;
+  left: 50%;
+  top: 37%;
+  transform: translate(-50%, -50%);
+  white-space: nowrap;
+  text-align: center;
+  line-height: 1.18;
+  font-family: var(--ff);
+  color: var(--cfill);
+  font-weight: 900;
+  font-size: 44cqh;
+  text-transform: uppercase;
+  text-shadow:
+    0 2px 13px rgba(0, 0, 0, 0.6),
+    0 0 48px rgba(0, 0, 0, 0.42);
+}
+.climax span {
+  display: inline-block;
+  opacity: 0;
+} /* GSAP reveals it */
+
+/* FLOW — verbatim caption, in front (z6), lower third */
+.flow {
+  z-index: 6;
+  left: 50%;
+  bottom: 9%;
+  transform: translateX(-50%);
+  width: 90%;
+  text-align: center;
+  line-height: 1.15;
+  font-family: var(--ff);
+  font-weight: 700;
+  font-size: 7.5cqh;
+  color: var(--cfill);
+}
+.flow .w {
+  display: inline-block;
+  opacity: 0;
+  margin: 0 0.1em;
+  color: var(--cfill);
+}
+.flow .w.act {
+  color: var(--cacc);
+} /* the currently-spoken word */
+
+/* tokens every template overrides: */
+.stage {
+  --ff: "Inter";
+  --cfill: #fff;
+  --cacc: #10a37f;
+}
+```
+
+**Legibility on busy/bright scenes:** a behind-the-person climax needs separation from the footage, not just a fill colour. For dark or gradient fills on lit scenes give the climax an outline — `-webkit-text-stroke:1px rgba(0,0,0,.5);paint-order:stroke fill` — a dark drop-shadow alone fails against highlights (e.g. a lamp). Gradient/clip fills must live on `.climax span` (the text node), never on the transformed `.climax` container, or the clip detaches and only the shadow shows.
+
+## 4 · One paused GSAP timeline (the loop, made seek-safe)
+
+The gallery used a `setInterval` loop; HyperFrames needs the same beats as **absolute-time tweens on one paused timeline**. The cycle is **FLOW line → (FLOW line) → CLIMAX in → hold → out**. Restraint is the rule: flow stays clean; the one big mood move happens only at the climax.
+
+```html
+<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+<script>
+  window.__timelines = window.__timelines || {};
+  const stage = document.getElementById("cap-{id}");
+  const flow = stage.querySelector(".flow");
+  const climax = stage.querySelector(".climax span");
+  const tl = gsap.timeline({ paused: true });
+
+  // --- FLOW: render words from transcript.json, reveal each at its start time ---
+  // WORDS = grouped transcript lines: [{ words:[{text,start,end}], end }] in scene-local seconds.
+  function renderLine(line) {
+    flow.innerHTML = line.words
+      .map((w, i) => `<span class="w" data-i="${i}">${w.text}</span>`)
+      .join(" ");
+    return [...flow.querySelectorAll(".w")];
+  }
+  WORDS.forEach((line) => {
+    const spans = renderLine(line); // (one renderLine per active line; see captions skill for multi-line groups)
+    spans.forEach((el, i) => {
+      const w = line.words[i];
+      tl.add(FLOW_IN(el), w.start); // FLOW_IN  = the template's flow entrance (see _motion.md)
+      tl.set(spans, { className: "w" }, w.start); // active-word sweep: only the spoken word gets .act
+      tl.set(el, { className: "w act" }, w.start);
+    });
+    tl.add(FLOW_OUT(spans), line.end); // FLOW_OUT = flow exit
+    tl.set(flow, { autoAlpha: 0 }, line.end + FOUT); // hard-hide the group so old text can't linger
+    tl.set(flow, { autoAlpha: 1 }, line.end + FOUT + 0.001);
+  });
+
+  // --- CLIMAX: entrance at the beat → hold ≥1s → exit (named recipes from _motion.md) ---
+  const T = CLIMAX_AT; // beat time (after the flow lines)
+  tl.add(CLIMAX_IN(climax), T); // e.g. SLAM / DEBLUR / INK-LOOM / CHROME-SWEEP …
+  tl.add(CLIMAX_OUT(climax), T + CLIMAX_HOLD); // hold ≥1s, then exit. CLIMAX_OUT ends opacity:0 (hard exit)
+
+  window.__timelines["cap-{id}"] = tl;
+</script>
+```
+
+`FLOW_IN` / `FLOW_OUT` / `CLIMAX_IN` / `CLIMAX_OUT` are the named recipes in **`_motion.md`** — each returns a GSAP tween/timeline so the per-template file just picks four names. A simpler equivalent for the flow active-word _glow_ (rather than discrete reveal) is the single-driver envelope in `hyperframes-animation/rules/asr-keyword-glow.md`.
+
+## 5 · How to choose values
+
+- **SCENE_DUR** — must equal `data-duration`. Typical 6–10 s for a looping demo card.
+- **WORDS grouping** — 2–4 words / line, ~380–520 ms per word (premium pacing is slower than Hormozi). Group from `transcript.json`; keep `end < next.start` (monotonic).
+- **CLIMAX_AT** — place the climax _after_ the flow lines clear, on the narration's emphasis beat.
+- **CLIMAX_HOLD** — **≥1 s** of settled dwell _after_ the entrance finishes (the climax is the headline beat). Entrances run 0.6–1.6 s, so e.g. hold = entranceDur + 1.0–1.6.
+- **FOUT** — flow exit ≈ 0.5 s. **Exit ≈ 75 % of entry** for every element (arrival deliberate, departure swift; see `_motion.md`).
+- **Climax size** — base 44 cqh; long words bleed off-frame (intended cinematic); 3-char words behind a centred subject need size + an outline so they peek.
+
+## Critical constraints (HyperFrames)
+
+- Timeline **paused**; registry key = `data-composition-id`.
+- **No CSS keyframe animation** on caption elements — all motion is GSAP tweens at absolute times (seek-safe).
+- No `Math.random` / `Date.now` / infinite repeats.
+- `display:inline-block` on every `.w` and the climax `span`.
+- **Hard-hide** each flow group at its end time; **CLIMAX_OUT ends at `opacity:0`** (or fully-clipped) so nothing lingers.
+- Gradient / `background-clip:text` / stroke fills go on `.climax span`, not the transformed `.climax`.
+- `.climax` `line-height ≥ 1.15`; pad clip-reveal entrances with negative insets for script/decorative fonts.
+
+## Pairs with HF skills
+
+- `media-use` — `remove-background` (the matte) + `transcribe` (word timings).
+- `hyperframes-captions` — transcript consumption, grouping, positioning, exit guarantees, `fitTextFontSize`.
+- `hyperframes-animation/rules/asr-keyword-glow.md` — the verbatim active-word envelope.
+- `hyperframes-gsap` — single paused timeline, transform aliases, ease palette.
+- `_motion.md` (this folder) — the named flow/climax entrance + exit recipes.
diff --git a/.claude/skills-media/embedded-captions/modes/standard/_motion.md b/.claude/skills-media/embedded-captions/modes/standard/_motion.md
new file mode 100644
index 000000000..cc9eeab10
--- /dev/null
+++ b/.claude/skills-media/embedded-captions/modes/standard/_motion.md
@@ -0,0 +1,192 @@
+---
+name: caption-template-motion
+description: The named flow + climax entrance/exit recipes (GSAP, seek-safe) that the per-template files reference, plus the motion numerics (ease palette, exit=75% entry, climax dwell, restraint, mood→motion). Every template picks a FLOW_IN/OUT and a CLIMAX_IN/OUT from here — look up only the 2-3 recipes a template names (grep the `### name`), this is a catalog, not a read-through.
+metadata:
+  tags: gsap, easing, entrance, exit, timing, restraint, mood-matching, captions
+---
+
+# Caption Template — Motion Language
+
+`_anatomy.md` wires four hooks onto one paused timeline: `FLOW_IN`, `FLOW_OUT`, `CLIMAX_IN`, `CLIMAX_OUT`. This file is the catalog each template picks from. Each recipe is a GSAP tween on the climax `span` (or a flow `.w`); placed at an absolute time it is fully **seek-safe**. Multi-stage looks use GSAP `keyframes:{}` (still seek-safe) — never CSS keyframes.
+
+## Numerics (shared)
+
+**Ease palette** (sanctioned — reads clean on video, stays distinct):
+
+| Curve           | GSAP                                    | Use                                                 |
+| --------------- | --------------------------------------- | --------------------------------------------------- |
+| overshoot entry | `back.out(1.4–1.7)`                     | confident arrivals (premium/epic/creator)           |
+| heavy/refined   | `power3.out`                            | hero/secondary entrances, slides                    |
+| general         | `power2.out`                            | fades, scales                                       |
+| exit accel      | `power2.in`                             | the _exit_ side of any move (departure accelerates) |
+| snappy          | `expo.out`                              | warp/fly/sonic confident snaps                      |
+| breathing       | `sine.inOut`                            | gentle wellness drift                               |
+| impact thud     | `back.out(1.5–2)` or a quick `expo.out` | slam/stomp/stamp landings                           |
+| linear driver   | `none`                                  | the asr active-word envelope driver only            |
+| digital stutter | `steps(n)`                              | glitch/vhs/blink/possess/cut                        |
+
+**Forbidden:** `bounce.out`, `elastic.out` everywhere **except** the Playful cluster (explicit playfulness — KIDS drop-bounce, CANDY jelly). Elsewhere real objects decelerate; they don't bounce. Use low `back.out` for sanctioned overshoot.
+
+**Durations** — flow word enter 0.30–0.50 s · climax entrance 0.6–1.6 s · **exit ≈ 75 % of entry** (arrival deliberate, departure swift) · stagger 50–150 ms / word.
+
+**Restraint (the rule that makes it premium):** the FLOW stays clean — a tasteful reveal + the active-word accent, no effects. The big mood move + any scene effect (flash, shockwave, shake) happens **only at the CLIMAX**, then clears. Never sprinkle effects across the flow.
+
+**Climax dwell ≥ 1 s** after the entrance finishes — the climax is the headline beat.
+
+**Mood → motion** (pick an entrance whose physics match the theme):
+
+| Mood                            | Entrances                                            |
+| ------------------------------- | ---------------------------------------------------- |
+| premium                         | deblur · rise · expose · breathe · flip              |
+| epic                            | slam · monument · fly · grandrise                    |
+| cyber                           | glitch · type · scan · boot                          |
+| horror                          | loom · possess · glimpse · seep (never bouncy/clean) |
+| luxury                          | tracking-expand · hairrise                           |
+| retro                           | vhs · stamp · blink · type                           |
+| neon                            | ignite · buzz                                        |
+| hype                            | stomp · punch · slap                                 |
+| playful                         | jelly · dropb · scrawl · popr                        |
+| creator                         | boxpop · slideup · flip · shimmer                    |
+| ultra (flash in the type)       | volt · hyper · liquid · prism · shatter · extrude    |
+| atelier (design)                | editwipe · rise · block · vert · ink · weight        |
+| impact (scene effect at climax) | nuke · meteor · sonic · seismic · judge              |
+
+---
+
+## FLOW entrances / exits (per word `.w`)
+
+The flow caption reveals word-by-word from the transcript. The active word gets `.act` (→ `--cacc`). Exit hard-hides the group.
+
+- **fade-up** (premium/atelier default) — `fromTo(w,{opacity:0,y:14},{opacity:1,y:0,duration:.42,ease:'power3.out'})`
+- **pop** (epic/hype) — `fromTo(w,{opacity:0,scale:.5},{opacity:1,scale:1,duration:.34,ease:'back.out(1.6)'})`
+- **whip** (kinetic) — `fromTo(w,{opacity:0,x:-30,filter:'blur(10px)'},{opacity:1,x:0,filter:'blur(0)',duration:.32,ease:'expo.out'})`
+- **glitch** (cyber) — `fromTo(w,{opacity:0,clipPath:'inset(45% 0 45% 0)'},{opacity:1,clipPath:'inset(0)',duration:.4,ease:'steps(6)'})`
+- **type** (terminal/retro) — `fromTo(w,{opacity:0},{opacity:1,duration:.2,ease:'steps(3)'})` staggered as the cadence
+- **blur-in** (horror) — `fromTo(w,{opacity:0,filter:'blur(10px)',y:'.1em'},{opacity:1,filter:'blur(0)',y:0,duration:.6,ease:'power2.out'})`
+- **karaoke** (creator) — words start visible-dim; on `w.start` `set(w,{className:'w act'})` (active → `--cacc`), prior word back to spoken. The signature verbatim mechanic.
+- **flow exits** — fade-up-out `to{opacity:0,y:-10}` · horror smear `to{opacity:0,x:6,skewX:10,filter:'blur(5px)'}` · all ≈0.4–0.55 s.
+
+---
+
+## CLIMAX entrances
+
+Each is a `gsap.fromTo(span, {from}, {to, duration, ease})`. Where a `keyframes:{}` is shown, pass it as the 2nd arg's `keyframes`.
+
+### premium
+
+- **deblur** — `{opacity:0,scale:.96,filter:'blur(8px)'}→{opacity:1,scale:1,filter:'blur(0)',duration:.8,ease:'power3.out'}`
+- **rise** — `{opacity:0,yPercent:48}→{opacity:1,yPercent:0,duration:.9,ease:'power3.out'}`
+- **expose** — `{opacity:0,filter:'brightness(3.2) blur(5px)',scale:1.05}→{opacity:1,filter:'brightness(1) blur(0)',scale:1,duration:1,ease:'power2.out'}`
+- **breathe** — `{opacity:0,scale:1.09,filter:'blur(8px)'}→{opacity:1,scale:1,filter:'blur(0)',duration:1.2,ease:'sine.out'}`
+- **flip** — `{opacity:0,rotationX:93,transformPerspective:720}→{opacity:1,rotationX:0,duration:.9,ease:'power3.out'}`
+
+### epic
+
+- **slam** — `{opacity:0,scale:1.6,filter:'blur(12px)'}→{opacity:1,scale:1,filter:'blur(0)',duration:.7,ease:'back.out(1.6)'}` (lands with a thud; overshoot ~1.03 mid)
+- **monument** — `{opacity:0,scale:1.42,letterSpacing:'.12em'}→{opacity:1,scale:1,letterSpacing:'0',duration:1.3,ease:'power3.out'}`
+- **fly** — `{opacity:0,scale:.3,filter:'blur(14px)'}→{opacity:1,scale:1,filter:'blur(0)',duration:.8,ease:'expo.out'}`
+- **grandrise** — `{opacity:0,yPercent:66,scale:1.05}→{opacity:1,yPercent:0,scale:1,duration:1.15,ease:'power3.out'}`
+
+### cyber
+
+- **glitch** — `{opacity:0}→{opacity:1,duration:.6,ease:'steps(8)',keyframes:{clipPath:['inset(40% 0 40% 0)','inset(0)','inset(60% 0 10% 0)','inset(0)'],x:[-8,5,-2,0],textShadow:['4px 0 #ff003c,-4px 0 #00ffd1','none']}}`
+- **type** — `{opacity:1,clipPath:'inset(0 100% 0 0)'}→{clipPath:'inset(0 0 0 0)',duration:.85,ease:'steps(13)'}` (typewriter L→R)
+- **scan** — `{opacity:0,scaleY:.02,filter:'brightness(2.4)'}→{opacity:1,scaleY:1,filter:'brightness(1)',duration:.75,ease:'power3.out'}`
+- **boot** — `{opacity:0,scaleY:.1}→{opacity:1,scaleY:1,duration:1,ease:'steps(1)',keyframes:{opacity:[0,.6,.1,.85,.2,1]}}` (hologram power-up flicker)
+
+### horror (never bouncy, never clean)
+
+- **loom** — `{opacity:0,scale:.6,filter:'blur(17px)'}→{opacity:1,scale:1,filter:'blur(0)',duration:1.6,ease:'power2.in',keyframes:{scale:[.6,.93,1.07,1]}}` (slowly approaches out of the dark, then a lurch closer)
+- **possess** — `{opacity:0}→{opacity:1,duration:1.15,ease:'steps(1)',keyframes:{x:[0,-5,6,-4,5,-2,0],skewX:[0,9,-10,7,-5,3,0],textShadow:['none','4px 0 #c00,-4px 0 #0aa','-6px 0 #c00,6px 0 #0aa','none']}}` (materialise then violent demonic shudder)
+- **glimpse** — `{opacity:0}→{opacity:1,duration:1.35,ease:'steps(1)',keyframes:{opacity:[0,1,0,0,1,0,0,1,.05,1,.15,1],x:[0,0,0,3,0,-2,0]}}` (subliminal failing-light flicker)
+- **seep** — `{opacity:0,clipPath:'inset(-15% -8% 100% -8%)',filter:'blur(4px)'}→{opacity:1,clipPath:'inset(-15% -8% -15% -8%)',filter:'blur(0)',duration:1.35,ease:'power1.inOut'}` (blood seeps down into the word; negative insets so script tops aren't clipped)
+
+### luxury
+
+- **tracking** — `{opacity:0,letterSpacing:'-.05em'}→{opacity:1,letterSpacing:'.28em',duration:1.4,ease:'power3.out'}` (the most "expensive" move)
+- **hairrise** — `{opacity:0,yPercent:32,letterSpacing:'.07em'}→{opacity:1,yPercent:0,letterSpacing:'0',duration:1.1,ease:'power3.out'}`
+
+### retro
+
+- **vhs** — `{opacity:0}→{opacity:1,duration:.8,ease:'steps(1)',keyframes:{x:[0,-7,6,-3,2,0],textShadow:['none','3px 0 #ff3b5c,-3px 0 #3aa0ff','none']}}` (tracking-lock jitter + chroma)
+- **stamp** — `{opacity:0,scale:1.7,rotation:-5}→{opacity:1,scale:1,rotation:0,duration:.7,ease:'back.out(2)'}` (printing-stamp thud)
+- **blink** — `{opacity:0}→{opacity:1,duration:.75,ease:'steps(1)',keyframes:{opacity:[0,0,1,0,1,0,1,1]}}` (8-bit blink-in)
+
+### neon
+
+- **ignite** — `{opacity:0}→{opacity:1,duration:1.3,ease:'steps(1)',keyframes:{opacity:[.2,1,.2,1,.3,1,1]}}` (tube strikes + buzzes alight; glow is a style `text-shadow`)
+- **buzz** — `{opacity:0}→{opacity:1,duration:1.2,ease:'steps(1)',keyframes:{opacity:[0,.7,.1,.85,.2,1,.5,1]}}` (slower warm-up rhythm)
+
+### hype
+
+- **stomp** — `{opacity:0,scale:1.5,filter:'blur(8px)'}→{opacity:1,scale:1,filter:'blur(0)',duration:.9,ease:'back.out(1.6)'}`
+- **punch** — `{opacity:0,xPercent:-55,scale:1.1,filter:'blur(9px)'}→{opacity:1,xPercent:0,scale:1,filter:'blur(0)',duration:.6,ease:'expo.out'}` (whip from the side)
+- **slap** — `{opacity:0,rotation:12,scale:1.5,filter:'blur(7px)'}→{opacity:1,rotation:0,scale:1,filter:'blur(0)',duration:.7,ease:'back.out(2)'}` (sticker/tag slap)
+
+### playful (bounce allowed here)
+
+- **jelly** — `{opacity:0,scale:.5}→{opacity:1,scale:1,duration:.8,ease:'back.out(2.2)',keyframes:{scale:[.5,1.12,.92,1.04,1],skewX:[0,0,6,-4,0]}}`
+- **dropb** — `{opacity:0,yPercent:-85}→{opacity:1,yPercent:0,duration:.95,ease:'power2.out',keyframes:{yPercent:[-85,0,-22,0,-8,0]}}` (drop + multi-bounce). **❗opacity must reach 1 and stay** — declare it at the end of the keyframes.
+- **scrawl** — `{opacity:0,clipPath:'inset(-12% 100% -12% 0)',rotation:-3}→{opacity:1,clipPath:'inset(-12% 0 -12% 0)',rotation:0,duration:.8,ease:'power2.out'}` (handwritten write-on, for script faces)
+- **popr** — `{opacity:0,scale:.4,rotation:8}→{opacity:1,scale:1,rotation:0,duration:.6,ease:'back.out(2)'}`
+
+### creator
+
+- **boxpop** — `{opacity:0,scale:.5}→{opacity:1,scale:1,duration:.5,ease:'back.out(1.8)'}` (the active flow word's highlight box is a style)
+- **slideup** — `{opacity:0,yPercent:44}→{opacity:1,yPercent:0,duration:.55,ease:'power3.out'}`
+- **flip** — see premium
+- **shimmer** — `{opacity:0,scale:.7,filter:'brightness(2.2)'}→{opacity:1,scale:1,filter:'brightness(1)',duration:.75,ease:'power2.out'}`
+
+### ultra (the flash lives in the type)
+
+- **volt** — `{opacity:0}→{opacity:1,duration:1.1,ease:'steps(1)',keyframes:{opacity:[0,1,.12,1,.35,1],x:[0,0,0,2,-2,0]}}` then settle to glow `text-shadow:0 0 8px #fff,0 0 22px #43f4ff,0 0 48px #1e90ff` (electric strike)
+- **hyper** — `{opacity:0,scale:.05,filter:'blur(3px) brightness(3)'}→{opacity:1,scale:1,filter:'blur(0) brightness(1)',duration:.9,ease:'expo.out'}` (warp from depth)
+- **liquid** — `{opacity:0,scale:.9,yPercent:6,filter:'blur(10px)'}→{opacity:1,scale:1,yPercent:0,filter:'blur(0)',duration:1,ease:'power2.out'}` + the `.climax` _container_ carries SVG `filter:url(#liquid)`; in HF drive `feDisplacementMap@scale` from the timeline (don't use SMIL — not seek-safe)
+- **prism** — `{opacity:0,textShadow:'-38px 0 #ff003c,38px 0 #00ffd1',filter:'blur(5px)',scale:1.08}→{opacity:1,textShadow:'-3px 0 #ff003c,3px 0 #00ffd1',filter:'blur(0)',scale:1,duration:1,ease:'power3.out'}` (chromatic dispersion converge)
+- **shatter** — `{opacity:0,scale:1.9,rotation:-3,filter:'blur(14px)'}→{opacity:1,scale:1,rotation:0,filter:'blur(0)',duration:1,ease:'back.out(1.4)',keyframes:{scale:[1.9,.9,1.06,.98,1]}}` (+ a 1-frame white `text-shadow` flash on landing)
+- **extrude** — `{opacity:0,rotationY:42,scale:.9,transformPerspective:700}→{opacity:1,rotationY:-9,scale:1,duration:.9,ease:'power3.out'}` (3D turn; depth via stacked `text-shadow` in the style)
+
+### atelier (design-forward)
+
+- **editwipe** — `{opacity:1,clipPath:'inset(-15% 100% -15% 0)'}→{clipPath:'inset(-15% -4% -15% 0)',duration:.7,ease:'power4.inOut'}` (Swiss precise wipe; negative top/bottom so glyph tops aren't clipped)
+- **rise** — see premium (slower, `duration:.9`)
+- **block** — `{opacity:0,scaleY:0,transformOrigin:'bottom center'}→{opacity:1,scaleY:1,duration:.7,ease:'power3.out'}` (constructed/Bauhaus)
+- **vert** — `{opacity:0,clipPath:'inset(0 0 100% 0)'}→{opacity:1,clipPath:'inset(0 0 0 0)',duration:.9,ease:'power2.out'}` (vertical ink-drop; `writing-mode:vertical-rl` is a style, climax sits at `left:81%`)
+- **ink** — `{opacity:0,clipPath:'inset(-28% 100% -28% -4%)',filter:'blur(3px)'}→{opacity:1,clipPath:'inset(-28% -8% -28% -4%)',filter:'blur(0)',duration:.9,ease:'power2.out'}` (brush write-on; generous negative insets for the script face)
+- **weight** — `{opacity:0,fontVariationSettings:"'wght' 100",letterSpacing:'.18em'}→{opacity:1,fontVariationSettings:"'wght' 900",letterSpacing:'0',duration:1,ease:'power2.out'}` (variable-font morph; needs a variable face, e.g. Inter `wght@100..900`)
+
+### impact (the ONE sanctioned scene effect, at the climax only)
+
+Each pairs the type move with a scene element (`<div class="flash">` / `<div class="ring">`) and/or a stage shake. Keep it to the climax beat.
+
+- **nuke** — type: `{opacity:0,scale:.3,filter:'brightness(8) blur(10px)'}→{opacity:1,scale:1,filter:'brightness(1) blur(0)',duration:1,ease:'expo.out'}` + white `.flash` `to{opacity:0}` over 0.3 s + brief stage `x` shake
+- **meteor** — `{opacity:0,yPercent:-45,scale:1.12,filter:'blur(12px) brightness(2.2)'}→{opacity:1,yPercent:0,scale:1,filter:'blur(0)',duration:1,ease:'power4.in'}` (accelerate DOWN) + on-land stage shake
+- **sonic** — `{opacity:0,scale:1.4,filter:'blur(8px)'}→{opacity:1,scale:1,filter:'blur(0)',duration:.9,ease:'expo.out'}` + a `.ring` scaling `0→3` opacity `1→0`
+- **seismic** — `{opacity:0,scale:1.1}→{opacity:1,scale:1,duration:.9,ease:'power3.out'}` + stage `x`/`y` quake `keyframes:[3,-3,2,-2,0]` decaying
+- **judge** — `{opacity:0,yPercent:-45,scale:1.12,filter:'blur(12px) brightness(2.2)'}→{opacity:1,yPercent:0,scale:1,filter:'blur(0)',duration:1,ease:'power3.out'}` (descends from above) + light-shaft `.flash`
+
+---
+
+## CLIMAX exits
+
+Default is **fade** unless a template names another. **Every exit ends at `opacity:0`** (or fully-clipped) so nothing lingers — declare opacity:0 at the end even on transform/clip exits.
+
+- **fade** — `to{opacity:0,scale:1.03,duration:.6,ease:'power2.in'}` (premium/epic/most defaults)
+- **rise-off** — `to{opacity:0,yPercent:-42,duration:.6}` · **sink** — `to{opacity:0,yPercent:16,scale:.97}` · **lift** — `to{opacity:0,yPercent:-26,letterSpacing:'.1em'}`
+- **expose-off** — `to{opacity:0,filter:'brightness(3.6) blur(4px)'}` · **breathe-off** — `to{opacity:0,scale:1.08,filter:'blur(7px)'}`
+- **flip-off** — `to{opacity:0,rotationX:-90}` · **fly-off** — `to{opacity:0,scale:2.5,filter:'blur(13px)'}`
+- **untype** — `to{clipPath:'inset(-15% 100% -15% 0)',opacity:0,ease:'steps(11)'}` (backspace) · **scan-collapse** — `to{opacity:0,scaleY:.02}` · **power-off** — `keyframes:{opacity:[1,.3,1,.1,.5,0]}` + scaleY collapse
+- **drag** (horror) — `to{opacity:0,xPercent:-40,skewX:-20,filter:'blur(11px)',duration:.55,ease:'power2.in'}` (dragged away)
+- **snap** (horror) — `keyframes:{x:[0,7,-6,0],skewX:[0,-13,0],scale:[1,1.1,1.16,1.32],opacity:[1,1,1,0],textShadow:['none','8px 0 #c00,-8px 0 #0aa','none','none']}` (violent jerk then gone)
+- **cut** (horror) — `keyframes:{opacity:[1,0,1,0,.8,0]},ease:'steps(1)'` (frame-drop) · **bleed** — `to{opacity:0,yPercent:50,scale:.97,filter:'blur(6px)'}` (drips down)
+- **knock** — `to{opacity:0,xPercent:55,filter:'blur(9px)'}` · **peel** — `to{opacity:0,rotation:14,xPercent:42,scale:.9}` · **spin-out** — `to{opacity:0,rotation:180,scale:.3}`
+- **hop** — `keyframes:{yPercent:[0,-26,120],opacity:[1,1,0]},scaleY:.7` · **popout** — `to{opacity:0,scale:.3,rotation:-10}` · **slidedown** — `to{opacity:0,yPercent:42}` · **scrawl-off** — `to{opacity:0,yPercent:-14,rotation:2}`
+- **vhs-out** — `keyframes:{x:[0,-9,8,0],opacity:[1,1,0]},scaleY:.2` (tracking-lost roll) · **blink-out** — `keyframes:{opacity:[1,0,1,0,1,0,0]},ease:'steps(1)'` · **power-down** — `keyframes:{opacity:[1,.2,.7,.1,0]},ease:'steps(2)'` · **lift2** — `to{opacity:0,scale:1.12,filter:'blur(3px)'}` (stamp lift) · **shim-out** — `to{opacity:0,scale:.8,filter:'brightness(1.9)'}`
+- **iris-close** — `to{opacity:0,clipPath:'circle(0% at 50% 46%)'}` (Bond) · **un-shine** — `to{opacity:0,clipPath:'inset(0 0 0 100%)',filter:'brightness(1.7)'}` · **sweep-off** — `to{opacity:1,clipPath:'inset(0 100% 0 0)'}`
+- ultra family exits: **glitch-out**, **neon-out**, **hyper-out** `to{opacity:0,scale:2.6,filter:'blur(13px)'}`, **liquid-out** `to{opacity:0,yPercent:40,scale:.96,filter:'blur(9px)'}`, **prism-out** (channels split apart), **shatter-out** `to{opacity:0,scale:1.45,filter:'blur(9px)',textShadow:'7px 0 #ff003c,-7px 0 #00ffd1'}`
+
+## Pairs with HF skills
+
+- `hyperframes-gsap` — single paused timeline, transform aliases, ease list, the animated-property allowlist.
+- `_anatomy.md` — where these four hooks attach.
+- `hyperframes-animation/rules/asr-keyword-glow.md` — the verbatim active-word envelope for the flow.
diff --git a/.claude/skills-media/embedded-captions/modes/standard/fonts/build-fonts-css.cjs b/.claude/skills-media/embedded-captions/modes/standard/fonts/build-fonts-css.cjs
new file mode 100644
index 000000000..5d5db2486
--- /dev/null
+++ b/.claude/skills-media/embedded-captions/modes/standard/fonts/build-fonts-css.cjs
@@ -0,0 +1,97 @@
+#!/usr/bin/env node
+/*
+ * build-fonts-css.cjs — bundle the template fonts into ONE self-contained
+ * fonts.css with base64 data-URI @font-face (no sub-resources, no CDN, no
+ * system-font dependency). This is what makes Standard/Cinematic renders
+ * deterministic on ANY machine: hyperframes' renderer only auto-supplies its
+ * ~18 CANONICAL_FONTS; every other family falls back to a generic font unless
+ * the HTML ships a local @font-face. (hyperframes' own font linter says exactly
+ * this: "Use local @font-face declarations with captured .woff2 files.")
+ *
+ * Source woff2 live in ./files/<slug>-latin-<weight>-normal.woff2 (latin subset
+ * from @fontsource via jsdelivr). Re-run after adding/removing a font:
+ *   node build-fonts-css.cjs
+ */
+const fs = require("fs");
+const path = require("path");
+
+const FILES = path.join(__dirname, "files");
+const OUT = path.join(__dirname, "fonts.css");
+
+// slug → exact CSS family name (must match what templates declare in font-family).
+const FAMILY = {
+  anton: "Anton",
+  audiowide: "Audiowide",
+  inter: "Inter",
+  "baloo-2": "Baloo 2",
+  bangers: "Bangers",
+  "bodoni-moda": "Bodoni Moda",
+  caveat: "Caveat",
+  cinzel: "Cinzel",
+  "cormorant-garamond": "Cormorant Garamond",
+  creepster: "Creepster",
+  fredoka: "Fredoka",
+  monoton: "Monoton",
+  orbitron: "Orbitron",
+  "permanent-marker": "Permanent Marker",
+  "press-start-2p": "Press Start 2P",
+  "saira-stencil-one": "Saira Stencil One",
+  "shippori-mincho": "Shippori Mincho",
+  rajdhani: "Rajdhani",
+  "chakra-petch": "Chakra Petch",
+  sora: "Sora",
+  "space-grotesk": "Space Grotesk",
+  "special-elite": "Special Elite",
+  teko: "Teko",
+  vt323: "VT323",
+};
+
+const files = fs
+  .readdirSync(FILES)
+  .filter((f) => f.endsWith(".woff2"))
+  .sort();
+const faces = [];
+let raw = 0;
+const seenFamilies = new Set();
+for (const f of files) {
+  const m = f.match(/^(.*)-latin-(\d+)-(normal|italic)\.woff2$/);
+  if (!m) {
+    console.error(`[fonts] skip unrecognized filename: ${f}`);
+    continue;
+  }
+  const slug = m[1],
+    weight = m[2],
+    style = m[3];
+  const family = FAMILY[slug];
+  if (!family) {
+    console.error(`[fonts] no family mapping for slug "${slug}" (${f}) — add it to FAMILY`);
+    process.exit(1);
+  }
+  const buf = fs.readFileSync(path.join(FILES, f));
+  raw += buf.length;
+  seenFamilies.add(family);
+  faces.push(
+    `@font-face {\n` +
+      `  font-family: '${family}';\n` +
+      `  font-style: ${style};\n` +
+      `  font-weight: ${weight};\n` +
+      `  font-display: block;\n` + // block (not swap): render text only once the real face is ready — measure-layout + capture see the true glyphs, never a fallback flash
+      `  src: url(data:font/woff2;base64,${buf.toString("base64")}) format('woff2');\n` +
+      `}`,
+  );
+}
+
+const header =
+  `/* AUTO-GENERATED by build-fonts-css.cjs — do not edit by hand.\n` +
+  `   ${faces.length} faces / ${seenFamilies.size} families, ${Math.round(raw / 1024)}KB raw woff2 (latin subset, base64-inlined).\n` +
+  `   Families: ${[...seenFamilies].sort().join(", ")}.\n` +
+  `   These are the template fonts NOT in hyperframes' auto-resolved set; inlining\n` +
+  `   them makes every render deterministic regardless of installed system fonts. */\n`;
+
+fs.writeFileSync(OUT, header + "\n" + faces.join("\n\n") + "\n");
+const outKb = Math.round(fs.statSync(OUT).size / 1024);
+console.log(`[fonts] wrote ${OUT}`);
+console.log(
+  `[fonts] ${faces.length} faces, ${seenFamilies.size} families, ${outKb}KB css (${Math.round(raw / 1024)}KB raw)`,
+);
+console.log(`[fonts] families: ${[...seenFamilies].sort().join(", ")}`);
diff --git a/.claude/skills-media/embedded-captions/modes/standard/fonts/files/anton-latin-400-normal.woff2 b/.claude/skills-media/embedded-captions/modes/standard/fonts/files/anton-latin-400-normal.woff2
new file mode 100644
index 000000000..69d48b9af
Binary files /dev/null and b/.claude/skills-media/embedded-captions/modes/standard/fonts/files/anton-latin-400-normal.woff2 differ
diff --git a/.claude/skills-media/embedded-captions/modes/standard/fonts/files/audiowide-latin-400-normal.woff2 b/.claude/skills-media/embedded-captions/modes/standard/fonts/files/audiowide-latin-400-normal.woff2
new file mode 100644
index 000000000..adde2d444
Binary files /dev/null and b/.claude/skills-media/embedded-captions/modes/standard/fonts/files/audiowide-latin-400-normal.woff2 differ
diff --git a/.claude/skills-media/embedded-captions/modes/standard/fonts/files/baloo-2-latin-400-normal.woff2 b/.claude/skills-media/embedded-captions/modes/standard/fonts/files/baloo-2-latin-400-normal.woff2
new file mode 100644
index 000000000..f18bf709c
Binary files /dev/null and b/.claude/skills-media/embedded-captions/modes/standard/fonts/files/baloo-2-latin-400-normal.woff2 differ
diff --git a/.claude/skills-media/embedded-captions/modes/standard/fonts/files/baloo-2-latin-700-normal.woff2 b/.claude/skills-media/embedded-captions/modes/standard/fonts/files/baloo-2-latin-700-normal.woff2
new file mode 100644
index 000000000..ceb751aec
Binary files /dev/null and b/.claude/skills-media/embedded-captions/modes/standard/fonts/files/baloo-2-latin-700-normal.woff2 differ
diff --git a/.claude/skills-media/embedded-captions/modes/standard/fonts/files/bangers-latin-400-normal.woff2 b/.claude/skills-media/embedded-captions/modes/standard/fonts/files/bangers-latin-400-normal.woff2
new file mode 100644
index 000000000..76d707cad
Binary files /dev/null and b/.claude/skills-media/embedded-captions/modes/standard/fonts/files/bangers-latin-400-normal.woff2 differ
diff --git a/.claude/skills-media/embedded-captions/modes/standard/fonts/files/bodoni-moda-latin-400-normal.woff2 b/.claude/skills-media/embedded-captions/modes/standard/fonts/files/bodoni-moda-latin-400-normal.woff2
new file mode 100644
index 000000000..9750b0e12
Binary files /dev/null and b/.claude/skills-media/embedded-captions/modes/standard/fonts/files/bodoni-moda-latin-400-normal.woff2 differ
diff --git a/.claude/skills-media/embedded-captions/modes/standard/fonts/files/bodoni-moda-latin-700-normal.woff2 b/.claude/skills-media/embedded-captions/modes/standard/fonts/files/bodoni-moda-latin-700-normal.woff2
new file mode 100644
index 000000000..dbbfde5cb
Binary files /dev/null and b/.claude/skills-media/embedded-captions/modes/standard/fonts/files/bodoni-moda-latin-700-normal.woff2 differ
diff --git a/.claude/skills-media/embedded-captions/modes/standard/fonts/files/caveat-latin-400-normal.woff2 b/.claude/skills-media/embedded-captions/modes/standard/fonts/files/caveat-latin-400-normal.woff2
new file mode 100644
index 000000000..fb050a64b
Binary files /dev/null and b/.claude/skills-media/embedded-captions/modes/standard/fonts/files/caveat-latin-400-normal.woff2 differ
diff --git a/.claude/skills-media/embedded-captions/modes/standard/fonts/files/caveat-latin-700-normal.woff2 b/.claude/skills-media/embedded-captions/modes/standard/fonts/files/caveat-latin-700-normal.woff2
new file mode 100644
index 000000000..e8b6ac711
Binary files /dev/null and b/.claude/skills-media/embedded-captions/modes/standard/fonts/files/caveat-latin-700-normal.woff2 differ
diff --git a/.claude/skills-media/embedded-captions/modes/standard/fonts/files/chakra-petch-latin-500-normal.woff2 b/.claude/skills-media/embedded-captions/modes/standard/fonts/files/chakra-petch-latin-500-normal.woff2
new file mode 100644
index 000000000..ff498549e
Binary files /dev/null and b/.claude/skills-media/embedded-captions/modes/standard/fonts/files/chakra-petch-latin-500-normal.woff2 differ
diff --git a/.claude/skills-media/embedded-captions/modes/standard/fonts/files/chakra-petch-latin-700-normal.woff2 b/.claude/skills-media/embedded-captions/modes/standard/fonts/files/chakra-petch-latin-700-normal.woff2
new file mode 100644
index 000000000..de88f23d8
Binary files /dev/null and b/.claude/skills-media/embedded-captions/modes/standard/fonts/files/chakra-petch-latin-700-normal.woff2 differ
diff --git a/.claude/skills-media/embedded-captions/modes/standard/fonts/files/cinzel-latin-400-normal.woff2 b/.claude/skills-media/embedded-captions/modes/standard/fonts/files/cinzel-latin-400-normal.woff2
new file mode 100644
index 000000000..94cbeacff
Binary files /dev/null and b/.claude/skills-media/embedded-captions/modes/standard/fonts/files/cinzel-latin-400-normal.woff2 differ
diff --git a/.claude/skills-media/embedded-captions/modes/standard/fonts/files/cinzel-latin-700-normal.woff2 b/.claude/skills-media/embedded-captions/modes/standard/fonts/files/cinzel-latin-700-normal.woff2
new file mode 100644
index 000000000..a13fb080f
Binary files /dev/null and b/.claude/skills-media/embedded-captions/modes/standard/fonts/files/cinzel-latin-700-normal.woff2 differ
diff --git a/.claude/skills-media/embedded-captions/modes/standard/fonts/files/cormorant-garamond-latin-400-normal.woff2 b/.claude/skills-media/embedded-captions/modes/standard/fonts/files/cormorant-garamond-latin-400-normal.woff2
new file mode 100644
index 000000000..096df0a93
Binary files /dev/null and b/.claude/skills-media/embedded-captions/modes/standard/fonts/files/cormorant-garamond-latin-400-normal.woff2 differ
diff --git a/.claude/skills-media/embedded-captions/modes/standard/fonts/files/cormorant-garamond-latin-700-normal.woff2 b/.claude/skills-media/embedded-captions/modes/standard/fonts/files/cormorant-garamond-latin-700-normal.woff2
new file mode 100644
index 000000000..a0fd9f62b
Binary files /dev/null and b/.claude/skills-media/embedded-captions/modes/standard/fonts/files/cormorant-garamond-latin-700-normal.woff2 differ
diff --git a/.claude/skills-media/embedded-captions/modes/standard/fonts/files/creepster-latin-400-normal.woff2 b/.claude/skills-media/embedded-captions/modes/standard/fonts/files/creepster-latin-400-normal.woff2
new file mode 100644
index 000000000..e3df072b6
Binary files /dev/null and b/.claude/skills-media/embedded-captions/modes/standard/fonts/files/creepster-latin-400-normal.woff2 differ
diff --git a/.claude/skills-media/embedded-captions/modes/standard/fonts/files/fredoka-latin-400-normal.woff2 b/.claude/skills-media/embedded-captions/modes/standard/fonts/files/fredoka-latin-400-normal.woff2
new file mode 100644
index 000000000..8d91972d5
Binary files /dev/null and b/.claude/skills-media/embedded-captions/modes/standard/fonts/files/fredoka-latin-400-normal.woff2 differ
diff --git a/.claude/skills-media/embedded-captions/modes/standard/fonts/files/fredoka-latin-700-normal.woff2 b/.claude/skills-media/embedded-captions/modes/standard/fonts/files/fredoka-latin-700-normal.woff2
new file mode 100644
index 000000000..47139ea52
Binary files /dev/null and b/.claude/skills-media/embedded-captions/modes/standard/fonts/files/fredoka-latin-700-normal.woff2 differ
diff --git a/.claude/skills-media/embedded-captions/modes/standard/fonts/files/inter-latin-400-normal.woff2 b/.claude/skills-media/embedded-captions/modes/standard/fonts/files/inter-latin-400-normal.woff2
new file mode 100644
index 000000000..f15b025d6
Binary files /dev/null and b/.claude/skills-media/embedded-captions/modes/standard/fonts/files/inter-latin-400-normal.woff2 differ
diff --git a/.claude/skills-media/embedded-captions/modes/standard/fonts/files/inter-latin-500-italic.woff2 b/.claude/skills-media/embedded-captions/modes/standard/fonts/files/inter-latin-500-italic.woff2
new file mode 100644
index 000000000..f4f25da53
Binary files /dev/null and b/.claude/skills-media/embedded-captions/modes/standard/fonts/files/inter-latin-500-italic.woff2 differ
diff --git a/.claude/skills-media/embedded-captions/modes/standard/fonts/files/inter-latin-500-normal.woff2 b/.claude/skills-media/embedded-captions/modes/standard/fonts/files/inter-latin-500-normal.woff2
new file mode 100644
index 000000000..54f0a595d
Binary files /dev/null and b/.claude/skills-media/embedded-captions/modes/standard/fonts/files/inter-latin-500-normal.woff2 differ
diff --git a/.claude/skills-media/embedded-captions/modes/standard/fonts/files/inter-latin-600-italic.woff2 b/.claude/skills-media/embedded-captions/modes/standard/fonts/files/inter-latin-600-italic.woff2
new file mode 100644
index 000000000..e882c7825
Binary files /dev/null and b/.claude/skills-media/embedded-captions/modes/standard/fonts/files/inter-latin-600-italic.woff2 differ
diff --git a/.claude/skills-media/embedded-captions/modes/standard/fonts/files/inter-latin-600-normal.woff2 b/.claude/skills-media/embedded-captions/modes/standard/fonts/files/inter-latin-600-normal.woff2
new file mode 100644
index 000000000..d1897949f
Binary files /dev/null and b/.claude/skills-media/embedded-captions/modes/standard/fonts/files/inter-latin-600-normal.woff2 differ
diff --git a/.claude/skills-media/embedded-captions/modes/standard/fonts/files/inter-latin-700-normal.woff2 b/.claude/skills-media/embedded-captions/modes/standard/fonts/files/inter-latin-700-normal.woff2
new file mode 100644
index 000000000..a68fb101c
Binary files /dev/null and b/.claude/skills-media/embedded-captions/modes/standard/fonts/files/inter-latin-700-normal.woff2 differ
diff --git a/.claude/skills-media/embedded-captions/modes/standard/fonts/files/inter-latin-800-normal.woff2 b/.claude/skills-media/embedded-captions/modes/standard/fonts/files/inter-latin-800-normal.woff2
new file mode 100644
index 000000000..74a16d459
Binary files /dev/null and b/.claude/skills-media/embedded-captions/modes/standard/fonts/files/inter-latin-800-normal.woff2 differ
diff --git a/.claude/skills-media/embedded-captions/modes/standard/fonts/files/inter-latin-900-normal.woff2 b/.claude/skills-media/embedded-captions/modes/standard/fonts/files/inter-latin-900-normal.woff2
new file mode 100644
index 000000000..4db8333ca
Binary files /dev/null and b/.claude/skills-media/embedded-captions/modes/standard/fonts/files/inter-latin-900-normal.woff2 differ
diff --git a/.claude/skills-media/embedded-captions/modes/standard/fonts/files/monoton-latin-400-normal.woff2 b/.claude/skills-media/embedded-captions/modes/standard/fonts/files/monoton-latin-400-normal.woff2
new file mode 100644
index 000000000..74508012d
Binary files /dev/null and b/.claude/skills-media/embedded-captions/modes/standard/fonts/files/monoton-latin-400-normal.woff2 differ
diff --git a/.claude/skills-media/embedded-captions/modes/standard/fonts/files/orbitron-latin-400-normal.woff2 b/.claude/skills-media/embedded-captions/modes/standard/fonts/files/orbitron-latin-400-normal.woff2
new file mode 100644
index 000000000..1e9f626b9
Binary files /dev/null and b/.claude/skills-media/embedded-captions/modes/standard/fonts/files/orbitron-latin-400-normal.woff2 differ
diff --git a/.claude/skills-media/embedded-captions/modes/standard/fonts/files/orbitron-latin-700-normal.woff2 b/.claude/skills-media/embedded-captions/modes/standard/fonts/files/orbitron-latin-700-normal.woff2
new file mode 100644
index 000000000..46db8ddaa
Binary files /dev/null and b/.claude/skills-media/embedded-captions/modes/standard/fonts/files/orbitron-latin-700-normal.woff2 differ
diff --git a/.claude/skills-media/embedded-captions/modes/standard/fonts/files/permanent-marker-latin-400-normal.woff2 b/.claude/skills-media/embedded-captions/modes/standard/fonts/files/permanent-marker-latin-400-normal.woff2
new file mode 100644
index 000000000..203ccaeb9
Binary files /dev/null and b/.claude/skills-media/embedded-captions/modes/standard/fonts/files/permanent-marker-latin-400-normal.woff2 differ
diff --git a/.claude/skills-media/embedded-captions/modes/standard/fonts/files/press-start-2p-latin-400-normal.woff2 b/.claude/skills-media/embedded-captions/modes/standard/fonts/files/press-start-2p-latin-400-normal.woff2
new file mode 100644
index 000000000..947a9792d
Binary files /dev/null and b/.claude/skills-media/embedded-captions/modes/standard/fonts/files/press-start-2p-latin-400-normal.woff2 differ
diff --git a/.claude/skills-media/embedded-captions/modes/standard/fonts/files/rajdhani-latin-500-normal.woff2 b/.claude/skills-media/embedded-captions/modes/standard/fonts/files/rajdhani-latin-500-normal.woff2
new file mode 100644
index 000000000..50dd0c06f
Binary files /dev/null and b/.claude/skills-media/embedded-captions/modes/standard/fonts/files/rajdhani-latin-500-normal.woff2 differ
diff --git a/.claude/skills-media/embedded-captions/modes/standard/fonts/files/rajdhani-latin-700-normal.woff2 b/.claude/skills-media/embedded-captions/modes/standard/fonts/files/rajdhani-latin-700-normal.woff2
new file mode 100644
index 000000000..057c632a6
Binary files /dev/null and b/.claude/skills-media/embedded-captions/modes/standard/fonts/files/rajdhani-latin-700-normal.woff2 differ
diff --git a/.claude/skills-media/embedded-captions/modes/standard/fonts/files/saira-stencil-one-latin-400-normal.woff2 b/.claude/skills-media/embedded-captions/modes/standard/fonts/files/saira-stencil-one-latin-400-normal.woff2
new file mode 100644
index 000000000..e5b159c1a
Binary files /dev/null and b/.claude/skills-media/embedded-captions/modes/standard/fonts/files/saira-stencil-one-latin-400-normal.woff2 differ
diff --git a/.claude/skills-media/embedded-captions/modes/standard/fonts/files/shippori-mincho-latin-400-normal.woff2 b/.claude/skills-media/embedded-captions/modes/standard/fonts/files/shippori-mincho-latin-400-normal.woff2
new file mode 100644
index 000000000..8d4a5c552
Binary files /dev/null and b/.claude/skills-media/embedded-captions/modes/standard/fonts/files/shippori-mincho-latin-400-normal.woff2 differ
diff --git a/.claude/skills-media/embedded-captions/modes/standard/fonts/files/shippori-mincho-latin-700-normal.woff2 b/.claude/skills-media/embedded-captions/modes/standard/fonts/files/shippori-mincho-latin-700-normal.woff2
new file mode 100644
index 000000000..b13131323
Binary files /dev/null and b/.claude/skills-media/embedded-captions/modes/standard/fonts/files/shippori-mincho-latin-700-normal.woff2 differ
diff --git a/.claude/skills-media/embedded-captions/modes/standard/fonts/files/sora-latin-400-normal.woff2 b/.claude/skills-media/embedded-captions/modes/standard/fonts/files/sora-latin-400-normal.woff2
new file mode 100644
index 000000000..99ede34a1
Binary files /dev/null and b/.claude/skills-media/embedded-captions/modes/standard/fonts/files/sora-latin-400-normal.woff2 differ
diff --git a/.claude/skills-media/embedded-captions/modes/standard/fonts/files/sora-latin-700-normal.woff2 b/.claude/skills-media/embedded-captions/modes/standard/fonts/files/sora-latin-700-normal.woff2
new file mode 100644
index 000000000..930c60fde
Binary files /dev/null and b/.claude/skills-media/embedded-captions/modes/standard/fonts/files/sora-latin-700-normal.woff2 differ
diff --git a/.claude/skills-media/embedded-captions/modes/standard/fonts/files/space-grotesk-latin-400-normal.woff2 b/.claude/skills-media/embedded-captions/modes/standard/fonts/files/space-grotesk-latin-400-normal.woff2
new file mode 100644
index 000000000..0e6347113
Binary files /dev/null and b/.claude/skills-media/embedded-captions/modes/standard/fonts/files/space-grotesk-latin-400-normal.woff2 differ
diff --git a/.claude/skills-media/embedded-captions/modes/standard/fonts/files/space-grotesk-latin-700-normal.woff2 b/.claude/skills-media/embedded-captions/modes/standard/fonts/files/space-grotesk-latin-700-normal.woff2
new file mode 100644
index 000000000..44604a0bd
Binary files /dev/null and b/.claude/skills-media/embedded-captions/modes/standard/fonts/files/space-grotesk-latin-700-normal.woff2 differ
diff --git a/.claude/skills-media/embedded-captions/modes/standard/fonts/files/special-elite-latin-400-normal.woff2 b/.claude/skills-media/embedded-captions/modes/standard/fonts/files/special-elite-latin-400-normal.woff2
new file mode 100644
index 000000000..569a27e17
Binary files /dev/null and b/.claude/skills-media/embedded-captions/modes/standard/fonts/files/special-elite-latin-400-normal.woff2 differ
diff --git a/.claude/skills-media/embedded-captions/modes/standard/fonts/files/teko-latin-400-normal.woff2 b/.claude/skills-media/embedded-captions/modes/standard/fonts/files/teko-latin-400-normal.woff2
new file mode 100644
index 000000000..a4317fd08
Binary files /dev/null and b/.claude/skills-media/embedded-captions/modes/standard/fonts/files/teko-latin-400-normal.woff2 differ
diff --git a/.claude/skills-media/embedded-captions/modes/standard/fonts/files/teko-latin-700-normal.woff2 b/.claude/skills-media/embedded-captions/modes/standard/fonts/files/teko-latin-700-normal.woff2
new file mode 100644
index 000000000..2f4e44cea
Binary files /dev/null and b/.claude/skills-media/embedded-captions/modes/standard/fonts/files/teko-latin-700-normal.woff2 differ
diff --git a/.claude/skills-media/embedded-captions/modes/standard/fonts/files/vt323-latin-400-normal.woff2 b/.claude/skills-media/embedded-captions/modes/standard/fonts/files/vt323-latin-400-normal.woff2
new file mode 100644
index 000000000..fd760b5ba
Binary files /dev/null and b/.claude/skills-media/embedded-captions/modes/standard/fonts/files/vt323-latin-400-normal.woff2 differ
diff --git a/.claude/skills-media/embedded-captions/modes/standard/fonts/fonts.css b/.claude/skills-media/embedded-captions/modes/standard/fonts/fonts.css
new file mode 100644
index 000000000..1afb126b5
--- /dev/null
+++ b/.claude/skills-media/embedded-captions/modes/standard/fonts/fonts.css
@@ -0,0 +1,401 @@
+/* AUTO-GENERATED by build-fonts-css.cjs — do not edit by hand.
+   44 faces / 24 families, 875KB raw woff2 (latin subset, base64-inlined).
+   Families: Anton, Audiowide, Baloo 2, Bangers, Bodoni Moda, Caveat, Chakra Petch, Cinzel, Cormorant Garamond, Creepster, Fredoka, Inter, Monoton, Orbitron, Permanent Marker, Press Start 2P, Rajdhani, Saira Stencil One, Shippori Mincho, Sora, Space Grotesk, Special Elite, Teko, VT323.
+   These are the template fonts NOT in hyperframes' auto-resolved set; inlining
+   them makes every render deterministic regardless of installed system fonts. */
+
+@font-face {
+  font-family: "Anton";
+  font-style: normal;
+  font-weight: 400;
+  font-display: block;
+  src: url(data:font/woff2;base64,d09GMgABAAAAAEi0ABEAAAAAqxQAAEhQAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAGoJQG5YyHIhABmAAhUQIgT4JnAwRCAqB71yB0ikLhDgAATYCJAOIbAQgBYQMB4pPDIFhGwKZJWxcxex2EESCuoeHKErUrJhwY+hh44DR8zy/+P9vCZzIkLIb2umuwiXpgohSARGRRtOj3uhWKxqeLt3E5eRW6hbCpFCpUEat/u3U/+peaZfLzGVfbbF+MGC4wO4XIeyHPbi34B5+EAFl62ARGkUf5lHcfORendVFYOMyRrJy8vJ8tPb/79pVPT3z3v0BAhlWhIqIXFTiCCUBemLJcE/7D/w2/9z3Ho/IKUZjYxPayAcsFlXWKoJ1sqp2Xc5tX3v+/9dMu/c++L+qpEYyUJJB1pGpQwpgh2V1oKxZeTSw7FPB3drLGaBtdhaCbmIUohggCiIWKApioI1FCTaljU7FmFFzs3rGZuTm2m1OV/2urM3NXrvId/9z+b9tfh86pYgmBJMQrEDVzrvj385ebLHYjvV9/19/Kg9Tyipc9XWyz/8FCqBMQdArSvGPh9nDrG26Unh5u69kZplZuFIpV1sJBz2c2X9U1/SEMnmDA02VpfNf4InIkuU8+JbtCgTJg/Z22dptQv8/nZ/vzrxBjQANJFu2P/gDL5CWyAHusKs2XZOTotq2CSgwZ2P9WLjxiWHJaaWRiNJoudBdeWVN8Bq/uRACMA14u2H3yxRCF6Pt/fYhVrJc4OxVeU1SFaY3Pf9/Tf3avlsl2ZLz08cKfOD0R/800NnbDnQPa4BoX7rvlapevRJVWYkojm05OY4dkJR02rL/yagE/pLdEHBynAbC/EFbCjph/yGmFdGKcLHk3WyXs5v9zHI1+0X3duA/Wk7NPOqMWhwSYVzp++mrAHU4XOw5GSVLl7GxES4my8wdEOIwbEwULINMz1df9d3os32ROv38U8lJ8IKIZ0UGbwlzrGmdWdnW3ESl2CiDjDCIyfuaWW2yULUIqp9XJ4cco6OuxeOItPS0NeHB//ERDAVACgwtjhpxF4qEi0Hi6BEjC2KTiZUlB6mjDtJQI6S1NkiePKRQD6y++mENMASZYAIy0RSMGWZgzDUXcViItdxyZIWVWKttQrZwIjvsQHbZi3XIIeSYY8gJp5GzziLXXEeKFCHvvUc++4yUohQUUMBGSFJQFKQARUlKsFFFE8U92ghhwV3BjcFlETGbDD04LLDCSrsiAyJnk6lQX/04LLTCLrvtsTcAgtVXv0BB4CKtNpi73p3OAhTPeGymBFDggPWPgWCwT39iugSI/s0GAP9n9uALAmrQeEIisGmzOIKyH85w4YL70bJThnYSo+eL4dR4KkSCQUcuOzpSyYgk0lklUgh/nlwQ7M9HEo86pM4FVbT+7j4I9rcJIoSTQ4chGsHmyNQi9ERzmUZo1luKmFkyg2hhNLx5Ux/wqjSOnwjS78Xk9vEiMqaoY3+q9ygS4sHiULWoVSW4sT35e5vjjCjkEZyPOrwnX8EMHgTY/I8d2qrI0LaTJ8KZaJLJZuCECOFOghlheNSmuY4d3tREaBs+1zFDBh71mLmOM72xluX2w9ZkMl0y/nXf8Yxm0L877V2bUpPdKe658/EzI0l8BF0jwklw/D6wR6j3kWIb3CdGxyh6XTWjQiJa1UP2DKjC/yjGF+9ua7/w2F3X8y+izAC5lE4tUH4oDOoK8BgfjQYfpMwCq/IWhxrzcr9cuRfv+VlKC2MiP9gwrRsp5gmvea+F0DMNLCVWGlXFHpOGT/oHjlLOufovaowAXJ+sV0Mm5fQneFlBI5SbcNF8th2B5xBZPRnkyAjilbDnlLTblLy9lL63ktlWsmXfWNSmDnVpSCOa0JRmar6raKG2W4p26hz3l2aPCGyd5cIOGsxs7H3YLJv50Sf7k9nImzzLw9zOVXk/n5OZwHtjOZzh9Kazh29VWlK3da1IKZ7OT1bSkhhRosL96jO6pRZ6vOIap9maAOH5d+YxiX6uxz2qUSIOFWpQhnoJvvnglaI4oafuu+mys447+PWT3Zwo+7dllNt7AcojoZQo2JXI4+nu8JRXSZvr0OesJupBqtpXp8q96PJ3HyZ3t2+3IuGcMCFvaVFuYxFF8VayL8UvM1VzWZWqrm6l3hTFCpp+6b46H0L+n0p9IxW3YKUlh0rzR+55HVnIfV7yNv+oFeWaK+BqvO6UsTbwj5+cVxnsnLfvP9KMgIycgpI7D558BNAIFCRYiCgx4ujoGcVLkChJshSp0pn9xyJLthx1lj611uZ3Aww0yGBDTDDXcmuss94GG22yZf1HvD7khiecdEpn1/1virz3WSkJSURikpCUFKSKWtSjEc1ok0M+xHru6drBnclt32veczzcRrTIDPBeIJ8A1hAOv/q7tHZW7FhWj6txvNGSr/b53Wf2nNw+Fob3HNjeu2c+riMuh6jhcqlxGcvyXipZ5pO8TyrexojzBH92xSSkVGpx4UrNizcfvvz4CxVOK0KkKNGT7U9jmqoatVmWm1aI9z/112VwdXHdgUtXxcat9ZfbeIcQWuCNtOEeoD870s6DaNEIwY1Ja3Cq1rSNp4IfpfoHijwTns64qa73+rSSXU5XoxRIL89yTkVKwUCUkWL3Pdw7dwpmyl8PhgiTViQYa3CQK7pJTOTz4PVO6Ly9XnWs+x0cgkZ7JQc1mumVHR7PrQhMpnsodv85N9zmmnanP304LZF92kpi8ZnUwpDi+hMzeGKMAJ+Q3sdJFny5zIbIa9ed8MUtUitqBBhiK5nWJu7ciWQmKZTS6wWGgitfwyPee+DQjXiDvVePRUTdpAPFWOab16ITa453cOsZXoAQRCA+l4B+XZa8HkpZH6Up3AROLfTCN6+eqsxduLR62LvciWWE1HvV8zCC9gFN/I3g7qQhqUPGRsrJvfNugearaRchZNqxr/jxj09JA3L5kp8gSU0BOj0pnS8EWjwjIY4PNHpGqjAZqHOTM4vNzxqUkg4kgxcukIWySBZDLbO3MhVlV2T5PHWdqkLupJb1VeV9HscZSWLCCDW69tv09YxdJItEZ22uGkk+HrN0mc6Gmmqmw86567tiVBBLHr0xvUhMtgiEXQqE7CImnJcy32oTd0wwGSvTTpOONasRKqkZqTfasXgSbO9pYooh+PalDDPNLEec98MvVBJHnnqIdLvIl/ndP9x0sx11wU8lqCIBeSFkTpf1kqhFh9Ze+8q7/5ZCNMlwJw0g8ikQfwCfOx4CGffB2WonmgsXdx333/OpSfbmrMXYnIIPBLwGw9ua9pYR1K+2eUYDlpb/pabVXgyHPRg2Q1godqXuzEezbBya0ZbDaB5uXwhxb0lvWAotmpMPhhBub9HvgN1uenWGJ7EivdEWFbsK+wr1XbPCapsFUJuPuqeBSIpFcMeKGv0eTjoo3C4ijWi21JI1K8yDhVgBk12MvoEqjKA3jSRei6jH5i7MtTMNBLDdctwDb030Eq+W27sgHvAyeDJ4mvjN+qwnZmcCp+H6VxInnEfB2W2r/7qg1wHbz+YrcF0sKAh3XRGLfFzt5nd0PgF8717KaP/IJsw6XzerqJ41sRwrZoMbc12x0ZnRFTXeGn9NkCZMY9SkajI121lQ4DzmKF2C3P79tfFprFnNqHP3gW1WdNcVNJ4a3w/aoElJa23utdYDAc6XnLbX3ACE74X6569+9ekpFPjVdwH86javNPCrx7ya95LX1tfyX/xc7V/lggC3VQbkE7n/xfMxsMP8CAse5fCj6R8Y57njervD7p1bbqvvsc5Wues3eTgXFhWYaapifDfUYZ18s81oizzVAEdGTknlXbt78VCOxIJ5Vp4WWzfXWAt1sw3zmYGROlVcD82fKlx3w5NqXvRHs7ammmimHtZ47f2P3Ghp6asC3V2x2HZ/8MFO+Z6ERw2s9rnpgbYuu2qJSy6qxjNiPCEpEQkBBbVf4/6MccxNiEjwaA8HQ0lY28RgnhxfQ1m7srUxBKFNfjsxxrFGnRu/HknPeKTO+m+MXZWTWpgzuqnNwRYAH1ZohVFGeumVFw744tO8xYM933rAMJJYHu2I0wmmLsybrs8iHlE85gKR9+xEE8+SIrA8uXjQdGCWbN/k4KkKLzs5mejbK/bPrlPiBXZ06+/Te0Ajdrv1ZDpJfwCRTpT0k+8psPNAycUO9dUvz5s1Hj6EEdJP9xQeH62ARTiUS2Mt6TfSS+kWgtCCqwiwLSO+n4BYsWeVQHMt559OuA5LIthvfMIs5jsub5ov83k6BoMd19KJDfl8XESjweC4HL62ffklWZh88RotT1wpU2loJaRv/ZWWJolpCefJYE1PyiZpVL6vrEEDfj0n51/lMMXsDXvUO95Suh7/9k/yTfpV+e35De8Pi/fPd95/UORqMDY89GqbYpIujAtx8jUHI6Qv9YJ4HnSjFTD8uXRH7hJB9cEiFM7AIel7T/r4wK2qGy/NC+dH8SGTodhFHpQIVJuoRKjaQfQryIbitKICeiB7bEDDQ09jjlYkjbUPs6WidrpCJEaz6TnwoNGmMQKbxdSlN6TqWv+VJ1L79W+KfDG6IecjHw5NPFYvahXsrzwZBhx1QSeraEDHdiHhbWJznTkBqT5RpOiNiH6CpptTDtA5N+HwgUWQOVGqL8pph+7dmTyKmxNaz7Vs+JDIGU5mGCuJkOkA2YO2K3UVjcstmvhlD9s19m5LULrN7E70zMSDxLjeBapYkwTNuvLreEbkdg69NWK1ZSumyKKxw7/NgxUzZB1IpdweJvCZMKczbIPvRbZqJFdG6pqz4oFFmLrKnAHpdx0S5sQ/8gI7pz7zoKsfGA9lXLHEzpHfOemKGZvl8v4VMhU80ws5gaiOeahho8JdTp8hG0csCii9GtmJUfJNKn3RyQezrpXHwRbTCBEREPQ1V5lywAyBWRmfVePJ82ai0roESU9/kdLLN1mNiUzsnHoW5tBjYo6xUReHcD9cniQ1mRPnHAykmp+ouZrY8Z9Ye68+p0GmOgYykECGkiAjSZKxxGQiKTKVNJlJhswlSxaS699BVqEpddk59YKaeIkZJdWf8LQ3rvfup+1b18fbrcUELxPWDhP19gkrh5WwhBZWoNCBwhoUNqCwBYUDUDgEhSNQOAbNngHLYUvO8wOHBR25FB3P6mjGGXKjF7DokfXu+Ha5BDDAmg5JnJf0Xr2YYSAgV+xxKCdjO7hrxctuVmmh5z+preLaSTUIZm+A7/pvucVENcPOzGkiNKrYuyg1/0RE9GpV5vNNqi1+u9wByxhYkSC9jL+KKt5D/Xy54n2JKDEPPBr/AFmItqPmFKmLmZGt9GXP+miEvzTUO95cuZ+w8KTl8x+C1HwPvmPsb5Q7kYNczhuxfZXODFhO99HLoz7Uo0ap9aBKCvydWMb3F/6adbY1cjTPjtXR7ZgnUqcWlX45rOamNQLlsb1pAWZohIqxKTp/cKMYge7KKiajYOccWfpx3gg9+xT+Qec6YkBtSMVlbgSfJJVHUZY3Rc5LkZxLqdJpyYy6focfA8Ixi6tcJWR5fqH9iU0vpPeBU+Nahp8KUJMY3Ir+RD/6GstiTfDJgHYh5otp1xq2DjDMlxUxr66ZYYEffvaBaxB8NUKZU9bwoKcTPcSMUCri7AP6Q3OsHsta54tUtS09n3/gY3M484sRqlZ7vV+CD2Pa3Ffgo0jtgUibZbovkUfNmhd75LVNDUrNDH8iMhTmAHzT5eE21DI/S/4bZD/iDlMe2P8pBlhGy5DMXn1Z5o1FTdyqtuRtPz0MaPg7TTniVphqk+YIeG/Wm98qFOf63NRz112fDyMfkQlXMd4j/ZORP/ggn09HzY6gRj91FTJrj7CO8fNF3jcoRG8wMXwrKQvxOxAEEiT0Sd4QSZC4A0EikZ/iWgJoATIyJLsMQU6G5FdIMlCQIcVlCEoyRrkyeEoVJFLtQFCTIHWf5AMNCdLsQNCSEO3mwEPuYCDdZQh6MqIPBAxkyHAZgpHMnjGyjN9RTKQYneSagmvM/vWUwNPn9yGUZOFGXrohq80yrWHtMmHjMsUW9B126jvZuyEHN/z43W7ByWXB2WXBxWXBVQW5uSF3N/yBdhueLhteLhveLhs+KsjXDfm5yf5B8Rv52xzqtcKN8dJerLGqrk07ZHwWdZ+h/7O/xWNAaP21DuQaQN0Gcmu47LsRrvpUoH8AdVu4zUsg8PkRC7NsZqTM3EQF9lWqVWW1oBvDXtXCbkxpkURNBiZs1bU37TUYNAMnaJzLYr6mYYtLu2PEDICZgWlS68FRRSuoaI7l5VrWXp2tU3PHyGjv2nCdOkYzCEydX+0U5joqzUaYjEAETEej1GK5YThzpZZJjD6/InOynHHu/NK7kMR+GbiMdOyTqPCNeg2uyCp7YlNfmTg433rGwH3rV/UrYcy0eBDKhLnrrGUOq7LcGsNskFNls2moNjcHhueM93EzN/HhUP+YmkfnPwrqg66L5FeWF/E6b5rnm6s856dIkoiN3nB+yaFeR3OXM+UQOhv1yBW3PvZNKJL0IU8gc1EIXMUz5hg26MpxlRUmPOjwPGKTpenfzOXdIE8udiDDG228XiRrdjtjIRv4BF8xy1nc0S7X2LZZdm6RL1Rc1tk5zxrpmQ1ZtKge4+OqdohnTkIWp1MIMLDahHFhpl4mh2Yk7qagS1gIX93gBeO9NJgWm6Kl8Ql5hmh4LJ4gxV06VEBPRDSPMYzXdC6RbMYBidlQec45KMCdF53eLwz3UioGOzmdRwqjhmMq4ZIVBxJqZ2OOlNHutBdZBGrDUVUK5exstBV9bSlCgE/RtL2REitWHmqWZ3Sol8Ur7y3ysyYrH/WnSiixYEsvqUZxXcsW6EpmG8+gE3iT15PDWGt0BwMzxUH84B3luDOf0LyvoYoL01Np/XGATF2LcYENxw8UuZzA8QoVnvbiGwWXRJ/iw1Ex5RbHK449a8YH5O8tpJYUfw8yPgoc01HkbtiqIPpch6GQIXU0GMnEuBAjdV406KXuCn2hT1HbZ90F8YhDh5cLDV8XCoScpQxbxX8ALmXI2crAlwX72F7NAm40sWbN0JyJ1gww5M1Z7BvJDG4NeKcO0SjMGv22iZjc0rgDGBBqibKnG2nlZc6tDO0cwfHME4sKBa7UC10vZNNdW37DuSHUbztEbuJcZuD5v7bMGVzFpJjXL7SypfMy94uQf9dVupES+ufXMvqxtyjnt8CuOi/PnqmKucyq4tTpvNzt/B9JcC/9W37wO/ZW0QIVr+kxPFpJYMFiYyK0/89b/S+fbLFeqzv3QVmJhXuejsE2p/ioAyeZVwYzxAUJcsp77QonrOvbUNfHnZg5/Blo8A78jgG3YhPfHzrahycL+pGjb/qHt8wUbaqMhvkqpV0WGjoWDJP8rHOxRq0QF52Ieii0e49PkIBUI3ETBL4A3GeNN+bV5wFlG4F7htUd1gajC+qbMgJvZQdEPw1AXq2cmc/6HzscKV4SZrE66sntJlMlueBNL46mjOE7yiYxpjqX2D4ksyxgxIzsAxzOHwk0guSqsgq6laKI5Jwi38CgECvXL14RqxUSG6YT4WDbNWmHas1H9Xno6o082gJHtLNBo3BEYGvBOZPBOUpLtrQwIRh0W1tLL9wHIdM2dlSfJ4SLjhGaNSbpGSpSTaoopAstPPBgUDsY1dqWiedkYYo1kfiGuN3Qlo1pZjesoty0eDXZh/2mCoSD530l55352TfwWnKFXHKvgEsbdZcxDYTauLE2x8GXgYNb1mm/vdBHI1uTl1W1q423jBjJSNUSEcCAzRo20jDG3UnbObKgYE9BzAX2d63qtT23OkWtk05SpqpQSsNwoJwUBDk57f8gKbgTY0l/snBCsPFRtPA27ihMQuYwL9qWAg5n9Tz9lgk+i7vqP9k9tEMuSwQZH0isxppGAwGGCxJebTtJ7rQ970WWVlbF17T+FKPEUHeb9G5gHppub1fvYxIyzCBk3A86d4ZONzAx89mQqOgsn+Q23r1AF/HU6dvMqLsy53G3arxbRSSFpRKbUmzhI0hc+aubKD6EATFt7jL1OvUG0YCgLQN+GF9dMg/u5I0r2gJtQtToorPLQKrpzTt0F0+dvkjWZJdNcAZtsuUESPBPUxgiLNI3rLOINrQez0SRDxXCmsa6UEFp1SVRKBEJQpvJMTLdgnUGMaF39gBIafrVIzZyyFe3lhMVnifeBZMIBjdZCyZ0aEvVzp8IaiZeiZW1znzAeefM1ry5Hz6974fy6WC1lb4YCQd7hSYPzLW9YIO516TPFrhvmOhH56x2Er+hvDnzuRuUpKm7O5YPA08wCThyfEuIrHmB7XQV6afjwZZ9n4xEMg1OmtHVVtf0ZCVHoje7KvNTea1VRPvGDHQ/DDY7aCjekZVXmh1nUixio5vwySZI8qaetiFD/8fF3JvhSqftgwxiYGFY93VrzfZzVgDTGlTgeCPcS1GnKEsgmh0tmA/S12l9QhasGq4YEl1FmnKaGHY0J4u/ARYgmyChjaCl87ihnOxwyDwZ+YXGPOOWulChZtSeasrHDE5A63IVOJgaCTjnUUOyF2dMrPlAwQRkGu8QNgXt7M5Q/qzcS1GLxhmPx7hZFpZbDODgESU9LCgWgnHGNY09xPGBcIdtSZYBuz0mU3Ghlp1c+/ZVjpu/MrfZGjyxOkxTW1k6SqCj/31bLocXO0z2Uawj1RjX4eYUSg9N9OqoH993HguvpF1GBKzECpDMu88BPP3R8vBR/o2yywiO7Rb9CX9BMxk5+ZTxbAGmVUXT91bgYs3zy/YsxkwZeAQ5Gk7bR1uhhTWVVxlPNIHJShx2po7V+X4KEMa3dMA+8HLO9hBWUcIjl8VVpSE208d7ci7M92TmlQQD76o3Wh6DMXury1x1JCIDi/kp7CWXmqyL2WTAkaa3P5MSG7fcR3JYC27PAMefOpL6EVtcvcUUjVhTAqQ6Brk+N0a+4S6FZgMczT/TpbmLr+CTSJrT2dNYJnpF99IWoQZXdU2Xulvrpct2PitMVJkN4sNrprqcYjd6gwIMYhQtibnmA2C3zLekwRQ7r3tRwEHl/KJm+MzQv1cpmO2RJIEdgUCuC8R8cE3aQT2W4unzz+7xAqihfYDCvqf33GcnXyEiQml4na2UtR6gC5/XguMJvfJzRao4nKb2+l2/pCZVC9UzRIfKtQeBq4pzMvtOOeZAPnH4H8Irl4+eXQjI53aE6WQZBC/3HHL5u/mgC8zy9bGB+xNPsP39ZAmdlaXL/jgO1e1PiO019NLGh0c4YAr6suBqeOp4tXWUfFAW1sbYi7zD95C5JcqX7CwI2HgzTZ7j2l5cvDR7h/TjKHRJau/Mj6rhPvMxM+tudZkVFkr3pzfvCLXS53Wi/Df851XGekM3Qh3UvmFCo3TpTDoCMwHN1f//w/GxC3Xeaje4+xwRdBtndIgN2xvFtSeJpr4/o3RHZWrJzeED55RHo6TD0qizHYhhhBk1cJb/poBB1CEQyBw0+1p4+qldkxGDeG9MEB8IfyEQ5jUpd69ILEZYPOLKwGXBNiZa5fnZlG1yLJZpV2EMEKcScYYXnkgX4mEDIdgYtHDf3Da4Sdku2ty0cjRRCenvP9+VcJXl0tJQkC/QudU/XzzeLL95+FAknnl80b7pH9CCu8JLA7nlYQwzL8so3NHurqpj//ms6yaGpNEsaE/iHaz7HJwzHcjOPq7uXkSBi7u+eySTvoicop8eb1c35kK9NKj/1gRYt+2AeLx7Iv9YwjQh3N36YGsQ5hpuBWMQ7FB0UpinIdPD39+gM02jJb6fhnud33eXNNVPftMUWKQkibDJwWYWxOJzOmd+2d1//O9b5vPVd3Nz/qv2nLnIz2+LfqWPVgSHoB1ICK4dwZDj6IIEB9pbDvqTRn9P5U78cmuDzyGREUPVvTS+M/xEwAsvJIBisX174v7iju0+Qb/MfwIdjlh2Rnngrb1dQwyTAwWebvtbjw8vPJ1+d/PrlIxibC5qDxIrMTU1Y49MXf1HXOw8mvd9XDfxJaBQN8OQZcwMhvHafQfyNnOWHaxy3+zpcPh3f21H/diMJoPMbwnYnmnr6mRm8wK6/OC/z0BAOD9xkGA7c4wtOAT3k4OAfJ4aKPgW/Ly97WkQWPOoIuFo0MU5jR8rP1rngjRDQYRQH4UXoW9XH7ENtD6sUBakQAsygyvPDUGEFG5YRHAEr/6cU742JJIc23EMjaSpteyP5DP5zAi1XftpSIiRK4wQkeyxRoANxld6WHGhBaUZVv8UVxKPlqamo1f8O3ODfARhEYow1fXZsy9zLrAkQzuzRWOwyGyhixbO0Nei39cgJIx7pXwMDFYYV1tbfBIOUnlVLyJzZXHEEKQZ96qjqsNmvmvppuDLardnPz8YCphoF0lMT1LiGEhfjB9DPNF38fXzE0WVlJr8Gkrm1QfzD1PEMtVakNl8TIoNzjgktVDE7vN6cSK3L2FvFMLL2Kc9Qrvs9MF9/cE0LQkHLtReFFT/5GNzj5X/VbQSzcGzv9d6SDPiaje7DEwc9bxIzO5q5woFvazog6W18RfiQ6O/OLVIQqoeZ0QEzBybYKGjUktpwH+n9GAiqzykAds/IABhMKq4y3ZMjNEvHmk38jxWrJxx0+1dETbLWLzJFpkdg2p0tYtEHJvB32F4y2tYr0z4wq1gHX0DVV4fW8/NTSJwCwxO1HWHDT3VRWhEnibr+VBLBcHuYS8sLD+ez7illqmW3MZ/GMMiN0wMXh6+GFBPVs/Ef22vTiPRNo5p3ScIse9Wdwl/O927WPoBKhvx8HiDDuoE6V5zdY5JhFpYTDpDWF7hvlrSQPhYUJviE0UPRJc+Kw60cse4W1wYv8dHr3dfMbOuTAunRkCSujURT48j2k7gjaIcKqheNvoFGeTtGSj/QXA3lJvCMeL2JgO5njxoxMiMSGnOeXjkWQZ1ojRxS9tRJ5Xhx9SRkJxgaSF+IXTOmnHY+Otk2PBrmDMTKN9c6HsM0XLugtxDd87+6iARPjIcciNcCR8hCqrh7HvofkFOmcnSI2bHUNKEpJoaIYmSxs8msvSYAWbn+tv5rlShPKRnX80TWkWEKd0Ig1hFdlZz9l881PkcoLiEhU0BCgenYOYm5845dvbPqebyHhp1LnUam3F9XdKs4ppaB87ubR+YbG0dnGzfO3jWUAn6a1bmx/3zQVu38sbyr4fuOJj3MmWWYOBlyy1YwJvR8VYoP9tfSXy+5PiVSPKHrLgos7U35+G27gQ3kn29tU9fDCtxOjKutob0U+BP01B/213tA3/f3B91/dS/p3H7wJHhZs0bFweBlA8TnvVp0rsD1/5p1dzrKbvb4XNT+1sijq1Px+Hhj9qK5GnT2Fis+Nmr3yrjLQYvZZr4iPwoGuqqGLHqDjrZ3TIYACq7aTHmuOdlj92t+SgYGxN8rKlRFsqgKNPViPNVFzeu1RV/amwq/uhubGxYr4s2NULBN3glL75AmthYmFKSLy4XiDsuiAPw+l8NOrQTtfBurVcGlv698qulNSyMwM+U2sXweMq8nNAY+9zcGCKH09ricogxWVlEvlPcNzc3NNwuPz+csFAXvaMsMjo1nx+1oyQiMq3ETwKNz/Unl6ufjKs5svNhc0pmhCFjcCJ+Q/QYBAsisTp2JiGJ2URELNHJgO+Ufb5Cd26g9/JYT/flk719gnf73J5TNL9wNzeEaChyNIl1wcZi/XCcrdx/z8HvsWV+GMFu05jGpvzbIRvxG7cbxh9+rgaw4fU/sPF1naK01nNafUuzDhHYTj5WiKR+Qhjt3z8pCmtvi+FBc49kjWqd+HBd7GaxgsZ2IG0FfB2NZe4RydA/1/eqNufK25OwsVj0WO83vPr/QyFqgi4TT4vCqZxD0UTNd9DeC9khT3vCZz49mj1+IOWmHA1sYg6hG5uR4DGBDSL2Acaz6+lQYf3oVIiZl7kFnsaibql/n4PLS3e7DLEtgo1onRn4t2/n1189X/xalHaIaxpl7dC9Wyo/B4fuKok8QEIL7e3RQtIBhTnTmK6+YCyP6GDGC+7r6qRAmvKHO1yDTGNgz83CaPCqyvxde8qL6v1MxJ534blcvY684cZee6FxmJFRorHQfo4US0NC6eaGyUS3WBrlVh5P5x6DjcWWf+VbkX9tgDcQjsj/VJKby1+XXZcp3JDdsPoJPXy7jq1ySf76r0VPmi6S5xJ+PJ1R3C4YrGtARD7/rv363qiEUdwQldiUjptUOB/6bSZ7AB1dC9sjDt13kwtLp0ZC176qPg8VjYvsRBOisC+vgHfrc39fROpT9MIo+MruIk+Q7cjj5J14vJc5xtILD4usFy5fKVjLX5UXy8SKYsMVbCwWJyf1zUlt8WmdL7ofYFYJlW5qbrFfv6Zn6a/sAhsuIzUCtbzLqVu6d4Db0yDJXiul0GwLRySdEmahxAzFihppB7z9tr73cK0pOW3hwQOIhfweoz8xB87GBFAg+BucrJ2dCzysqqeZMR15Fw31MCWzLxp9uIapeuaPjI6JNO7m55uekQpvUO6k+IvyGxzQUdLQnJ9ADUWho3TsKdPZtp4H7fqvXXQ/RTpCOkhn75Sz9XiI/zZuQVEOgD52DwBbkotv0ZQSe3PulwaUcZgp3GZsx9mkMjH5SBI8126iJE4qlAjVWQdTgAD9/bL48B9W+x8Mno0hwOi2f+z1+J1OgMKu5INXX49clyZ41AfDCg0Y76+20v4c6GyLh9Vn0UNc3RjfiQia3TTd358OxBEH491qi5Hhi09AKo9+zyez6Gu4OALSDF3pqOoIvaP+cZgSbsWyL7IvxTmyukFIud/63b9V4hxyHUrdxMIA2FEu1itVj6tbu931oV8awEr1IMF/rEE+QK6ndegzs4OD99VeGypLTLapxZkew6VaAyDnhDymG9k2Wmx17FSoUXRBTf6Ooq4GC5lHmG4TiWlLPpYCdG05CCgsx3IcS/1IwUCv+udTG6Gk8z5rQg0WDAla3paq3sLT5Em5LsNiiYsJIIfkM9ar1Z4HF6xevYZ5xfT4IxAWccuR2+3IimNfYl8E3RxP7B97oo/yAWI56qhOeAY/LayQAaOZ+0rocQW7Ewnn833EgY1+Zi3QADOiONBKO9LKfBLKwiA5sruZHVUdaE3OD28oZwihsmB8UIvZWlyBEfWDZXO4bXHaJABqi7cLg3sRSPrCIGOxjZN79b182D7bjxEckYd+4Dgw0HSWbVogH5l3N7mkwU7O4e+ruTRSzo/BIf1wmHgIC2vI+A+aeoku7Ui/yEThwKG+WLKlqzO/Vujo07g/k/z66HE26Hbj4Yl7+awfF5bPIHT4F67wIXLPIwsWS7lUnXhGXUOeE4TfJhan3dYyU/ExRbaippf6sCWszo6urPN7+zMHR3TrkTdyRJk+9n7FAXamK9YsdrbTLckPogF5/WxStOBX9KcaeINkoytiUf9NDN8lIjeqbhLJG50rOtyTkUTDi2F13mHvn9DLM2HzH37NzomzzofNXNawRLvarpSxWGUrtmORJRgM/qR2ec7W4s9sR2q0OHrk+GjJeyVgLTYqxM7aOJFeIWAfYDy/njFKuZx4jprd6dH0sEw7ZDAbXuYw5J/XLvC/QNCdCggkmHcuIT4C7gYHQE8x7fo+vobGQ6+SXStHlDB7H158SVVImf7DD2+158rCuAh0rzjGaBc3ot+/BJ2CNcWS3YI1QRrbTxxonayf7Kiv1su/LObarCCrTByHXT28qhPGYEJlUfrq8Lk7IwfO3z64evr4+bFl93DPeHdavGe45alJ8qtTSebu+J2l+Nlcr6H8K0hKmqkNm7lC/4UfP3vBnBN7gL23gHyU3FuENnedqEpMa3I91skC/qx9EAVtSe9fPvXS0ncajGmMXL/e0TS05dKZDaTjJ0BBMQoIRVOrc/tBL5rz/h4oVX9iZUHK/tuoUTySf1DYsUjkOYNjQWH+JB41yn+bsizoJ1aVcyBP4UVLXIvxzdcexo9em0LP3n1xKWnqysKNG1cXppIu3X1xVsGMi31FNqaRnUw8nF5hucwyc17rL3QHXADmDazbQGHyu6Qf8yCCZ7FULKL7NvU8LWLgIsOHgfgfNz298TAX93t/28S67g35DVLAVseRaIaoAxP0nuDRFRkrNJ+be1T6xiwvvNlbMAZLZ9ofrHcz4lMsspRY+CbJnyng6p2xu0WczRNH0qAvu46Nht6gm3xIXpJDw24oPg0u9mlP3GsRBJ4XCfNi/PPAzX5UxruiNAz62E6QE02VoeHo6qUzQJtT4t05usta23Idbeyw6awGLJX8lpQ8AuOU8UUWuFz1cCPNPN8i969hAdEs4xTn0mRPNDM4UCXJbYKOVkPvArStTQOJP4kJsCxcuXmUAEjwJ+Uz6Pmr2fHH7XJxgVJBSMzhi008z8iu6pKdI1MhWadO6qc7WiKYlvTgkN8rfXF+NfcOzX9eaZtXv7d2+m6QfD4fnYBARAmIEagGp6xRZnllbKWoPi61ZSIo5fb05G0b+fxI3Gsj60j3LMKAd0Y7r6wyriq2Nl3TmSDDyTsCbaTIXwTTs8TEUCTyyCuJfvXmaff+k4XYAEC/JWyrTHPp4L//4jX0cqLnAqkkD9aEV1U3TN/+OFfs3oNLQl1SivfyumGZaJvlqqbUZ7DjYf+BhqrQM/fzWT/PE7XRT+3XtWcsc7R4vDohyadpX98ELY0bISn9q55Hh/RJh4Z1G1DXc0RFglaxOO2WNnq7Dxo5hHqw2GdRTNHzSc93XzS9a8NkWzmUVyo9m35L8ged1AA2/DoZNv4ahoWdDKCZCpnuu/s39iymqMeoCI1vLU9cbzwo9X3c4iKB01EGgzY6eHgNXKK/saVUJs8NKih9hMzKgzaKdhaNiNXE1AiqfM+6TNMCE13k5skCbVfnLaA8T+PwwiVn6pcm5zJcJ6uS0hrdTnQygT/rpDLSPLR5RHtjtkdmCCzN/bnGm7lv3ycSJr1MYpypxvHZuHDKHp4ycE4Jjw6ObuWQ0BwaMVlZRvXr06dvrs6Xeh6IMvZDeqdqDWWBlw324CCV+Q1NyfMpGB9To9gAmD0ykKB5llhHirRDVNoiF0ybysorIbp0c2GGm6GRNH5fycg47tbLK/ek+pwK+zN/HjPu77fTUojD6K0QmwNqnEThFG/vdEwUxgw+Qxoi6rg7Zof5uitx/AOkljE4vOhH6bcDE1FvOeKdu53Cwx3uysREYtDvCaLAURJGy3lg/qB7w2ej58G2M21p0lRpxxm5OPBA3GeIXVycB5VVFjxdNObF9mDmHw+8X0JFcZ24+xfSQRj4xSDwVNXE0tdvL7qCNsouBkY5uMdXmwWt0/EUh8zYAWd/Z1/BwA4U04QQXrToOpJyaqC4rr483KY6IG1IkcIu0rvGIM+IvzKC5a7psl9iTjw0p1BoOZYTWXiNN2ZH8URWCRs1Kfdr+AERMehy/4oRD0Vz4IpQreU4BeFbkMbbWCh72bij1J5gj36pfDHeDmSHVshAh4KErlDebYugLF3OBV1jKjxnmoHV7NBb4ynFSYVJSjIvt/8Xt3iodgiN3Xp+2Ayuglc5fS4U5BGsKArmqcViVVgsDt88TOXobcHto/1Qu+RIfiY/MwKKTO48ellw+ehlKB1K1V/SEb4U6S9samssi7ZZbUHXvm690/v+Cvzu/Uvwd713X7bWaBhLX7yYqhdBoehFUMV4vK+lYzEQl72yqWquaXdXdfXurqa5qrqm0ou6zvif6f92g/99wZ1DyiXOy/UMGgfZYbU58sGSfwdS/wKM/3wX/D9qtfLfv/8SObGmrdcQUtUhAzT4d1gLqwvWfQZ5nuzVaV09AihyEzbPIxzSAZnW9NtGfwG1rpeT/AtOP1bOXxfk4JX/cCqH+ls5/TtQ+BcQrJ7vMutaPg8ZreQVbqMJUvuU/3cb5aOuNNsYuM2rd1LtmehweVXeV5jPQfg78r/fp/wfJ7yR1sSadvUCxAD42/LXv2P++Bfmf8MBQp6wdUJRId8Ecx/c6pHf5mRKhBYkJyl5Y6dNicuum9iSt7M2f2gObs2CuR39CjcU+rJn6vM/IC8c6r6J3qVDtwRMyAmSPbb8pgr+HfPLvzDfDIeCSF5AbmROnpDMHkAc2wY6Xgq7kjBnVo9WsgnWaRCeNylWFV1X1dN9T/ptR1Hyt5WMf8cC/AuzFXIoZPV+Wx6D6sn0X2j915fcXrxxGfGk60EDl6G8LPwX3BXeLgNw3UMexZ5wbehvHDeTaXqJyy/cP5uD5byyB+dnDaBvZPKuv/ylZlDxh20Hs+RHLN/3C39an7c5x8yyAOqdIJRovdwcJFpkfMRc8QoCKk8cYDeDmQINvmYpMA+0fB0YIinZNRLoV0BEesW+SLCfkZmLIJYf6+N7mM4/e3J7jwDSO/cpwDGGSEK2UAvjvvMr3TJvugvMm9F1/Vtv/5VwsfxyawSnKo5cl0UA6kPgmX7VnnBO+TscYWP5hfl8EUOUyrnODv3Zvb7qczuxLyaRXPEJPdeP7eD8Yd62rWIWB6PHzNtuT2jK77LUS47YrG+CzLGD+5QMhKbESEJ2j2qB5JYlP90TvjQ+b0PUNrWkiTMAGdRjpF1gxnkCjW+B9bUMGGxT6f0dzD0cnOEQXU8B/vFZlCIn2IOmoqBs5njmD3e/ftl++zt0JGAp66lIr9kPQGLuXvnfrcg95kOjiInae78kB7JZqXFoHU8mBlCi7QLb4W9ufv6iNH+6+yr+P/781j+fNbV/aeHFIXQTHJohhCuWmOkblRCynBdY+03vY0Q3FhGPeeg7GGWU3rB+fwdnEhamGIRb+BVmXEA+ZH9cuCwAHvGm0Ok09IlthJq4jtb4vR1UEyaQRK4UBeYJukeDekPNY4wOkrwMkHZBvRdAh84dnZI/bmMb2+jmkmCvwUI40ROhOdLQT2TzBrOJ/L1xNAp8j9omjTG6kWPFH+6g0ScqIlgTXkpngwZDAY5Ibj3zaWIzH8DocUcUHOiXxtK0IhGe0Tstu6hWzPCTsuNqjyoHNtt+EM+UMqnshrtrij/AB53NkjgKPWrFbZPuG5ebCLjRe4WVW2ZKbnFCbYMHQXiybjRiPNKX8YJUnlXzyzwdwWTUABQTHlyq+Gm2Nu6aDGyhUMtsUTptJnAmvx44lZImorBFu1Vgcb1E8krQdj0xCI0LxGY+9Qd0XBXZkXQxtFlihBEE8ebrBmal5sMVp1WpIXU97DER1b1YfJYQO4U5TIdWY8xxmtLsThIe5n0F/gkT//FZ0YrA3FdkMrIqBNrb3h47sf1b4fMSm8g9at7y1wRvdafADoRcMwj+OIFu8ZMILAAeRvlXQQukR7rfNYjOph73Oaqp3pJGNrFNpDsQlHGJO/6D4A7tllbsvNTd5QzgnD63JyQqcYo8FdTNVkUcEuawuhRl9qwd5PRqLDVkc0RmSbbl8cijqKSyjJj0AMYjroiD4SuooK6IsAVmDwPIVTLe19yz58CWEuCArs2i0HdVG46fYUdSuzIBwEfhKTkwwmdYM5bagzHM2RFm95/3mUzTgwZbtIa1u0ssyb1WJkGi3LORPiAc2yhrJ7E5mQQ6tTC/F4ncIhosoxBjm5mdFFKrt5l74/SHRIfOKoixvCgz2qxrKupWUarfGUcNkDRphgt3I8nmMNIYUohOwKjuzNraidApKDTzNsKYOsEkuY9Bm/Ti0HmXgOVDk6ZMs+CeXQzsCH3FuQ25T6q6QpLzLwuBrh+xeRL7rp336XANC7sB7eeXrdnZa34X+Nv780FpdLjzVUDiAgqic8G3kqXyQ2SxoiGXjARYpR95JKr5Q/SkY1dvXnUKbKVm8RIZJQcNojTRD2GalcA+rxEpE5ctwARbc6d+zJqBzap/qPbTtvXMaBQV0k7+HC49/Xn78+PR5bzbLMZ5W/EU3jv+hHsJOkYKmt7s6iQKfU9ybvspUdkuEGZITefnx0epqo/741I+dOdxgEG/OR/7XGibdANLrc08+dX7UyTIWQb1Ir6EAP0LArwoAAqIt7z3+g+rn+pMgLYl5c3tXxOPVh2niAIPHqIUJVtMiDlVqcpX7zT0J1ItaQ1Bm2GEfYxAiEe2SYsEGN4ROs4rgWNM/p/QceLPyz0k+H9FibXpK4XnzZuUD7/ngSwF79sQ+UdY/QlUffb3xfn2d1gqeGmLt4M2S5tXY6c0qqb+Se2Iiq8pBfBXr3vvd3KkIc3To0k1H6O6ruWfwwD28CLQ5Mnlw/XV4Xq16Bpe5qnvYstX/Bn3Y7xAvo9qGWY4CV4CmsEVLYmwPJ087HSY4+rAR+M/IiSH+oaXsDt3I3Ly+U0hT+XsfTxyClrowGJxgqfqyqJZQ0wGDwJ1NSaKDcyBPqwRAAmN3YagAx7bvR100sfSovCd+ONHnk2o/0B1MsYKghgyowtyp/FQXpw98Nju8SKlj+VF3zuB4oKbtCrJGwOhPh0F9shMF5R+nOytrIjCRHghAoJlQK94rSORc1g55yQGvHT1FsyrfX1itqVgRUIl0LH7G6u8DlnXeYGDzbgp8e42Y7CQYAy+Oc0Q9eOUHZdG3k2PR6UIDfHWekiUn+D5ne4k3I6FMZLY33zSB25yuwIQoSUWYR9jFk8KwuJtgDu0KSvuRpI/ppEpVJnS9THLZBm8JRKTAkF+oI2uJVRIp8USGIYslWr9uNlm1sZ5juspGSl+pUBJWgsiEs+gVNPrhiT1tsNRpv+xu+TUUEDNFvk9eiVdmpIrauNNXUFY0JYESkZZ0ozoanw5ggB9PIKExRAQ3vEc33gb59j5wPr6+xjHvBkY7tf5m8qlAk1onv12vRr7CuoeBZS7XHOFajhG9Df9Zytuiht2splw2fHAFZiy2dQKr22BVwFMsGWCSH2cwCSL5uI75ylnSZu2Y38joFI5Ccu5qV6qkxUpfHSy9GyRBd4ncMelVeDchswmwiU0jlZGT8bVcosMabXVNtmSr4wlaCAzO0nOcjrJJBDbuT6IBxTUkEkh3QpsMkvB8Lc6UvCq0tyZerGpEtkND6JcyH2FRosxj/AL0wlpox5vNSserV0/uG0ykZygo3+3SP5vvwK9tz6sJ6yfa1OBBrh5S9LhtgJ0HJx0RRtbwojtkBpq9mG85X3HflQY0ksEmAT8gk47mpTuplfDQUq7tXbWWg5kE6ODExOvAvxvjdoP3Yi1SXcOYn8P9WTuMh6ztjrp1jJLA5+SzzedYGr3e90xIrSCzSkMDG3sUI91GR4sglB9ZoO5t4e1SUTovfR4WyexQD8/rtfNmuVxlVRWjCOMjT0hKGFw0mtXTmnVS3K/OCQEUr/j67IdxT9kNucZWQjgvKliGepTtdOz2iGsjWVKj7ebbg6217amDrZh9Ca+1mJOjMdznXe5vcq6vFtxihlbz+Eo+X5jjkbj1To82uANp9Xl+yHUkWOxZzTC5XQsgGOesjimPqSH9GfxVwrHoyHFXeBA0M+O27pkxX8jUxB4DrFNAxQFvDf/EmfpwXPGtGlnshN+haup7/w/C1pvRdNsAfB1TJRxQCeC6JEedwPwY+xQVfPy5PBLBFk4w41m+pHsYgXmxZZkxpwIFKatWWdTgy8ON0VjbrqLrbOfBxmyk+CfiRWZtCw2ME97hjOdV1DiMwJZInvZ2nJuXHMfpV+ls+s3nEbWyHHlxHTtk3FNDKItKe2jxk2szjiSLJ62wlmqckJUCeGbNtpeyrQ2w1gIvlKK+ZBCu46lUepQ1VW1nTVj3jzfeh91bw6rGKIR0iyPhDG48NQcFZ5h9vcbdWjRKoVLzSFGOIg/ctdKAovPBf5TcTMgquqciDAHDUGLCdo6KoKUE7zA93q6phRNsAiIoaldisSwfUm8EpdQZt2nnXkaEowXDdtcoLvrfCiGOPJd005z8xnmbnjvYRgtrh6UwILiKbu5qFoN+nXjFnVrTPFYyv7EMKY8kDzv2RaDhhVdcfu7SZPdXsit2cIGYJcGANzbLDJ6qW930lEjJ4UGduF0iNfaILyqP2ceNxM1vlbqmvaZ7u3zq2lfGXE8rGtqwRm0XSgp0wwE6WA/gIuZ6bJAekX3mQHwmvVNlUuQTEOnk/ZpOtAus4XsPDePOXbROFEIg60489SRUuW4ZT0zC2Bal8PZsuO1MTmziZv2NAx0gL2mXTZhLZX2PmoXZAHOIc8TX4D9f5vbtO5oSSuOFX+qFvI07YHjNd33hrBP3K/P+i5TdJMcN3MTvDdhoA2aiSR652pMN5jd2KIiH7u1V16dMx6j1soTSUIwDZGuzQyM1PeZ6uqgUbxpHKTBmbP7uU4L2DqhIZjE1XpCjB6jj+EL3B+G694Vbl14NbDjluPZVEt46bBa1ss4dLDuM3AL3YFFxlIADVUlOAGODM+lfOd1W101M16XgDVmULTCIVv52M1LpYlyAAUbpQC312DR1VLXcHlO+DCDm/+4h2y9Su5an06dOGqFjujnsei6SbQHythuNKHJWFHR7g9WF47HXs4rnlg194X2QhYip2sqb4CYqyA8XCrwwFBp3FTrDE3rTlp1ONK+pz2I1JE8H6hthdHc6zkZmv72YjiOx66peJHZpAuwrbkSx7kjikFTBVauLEVMZ4czak2HbresTP80mn8MWrQ7kXbGliE7v4LP44CbzfOLJZI/qP+Qn4QX6NcvlYVrXaTHhfxpz6oyc2UiXXT/sNdP1wo8bJuBhJIp1f2CfNoxjW8ymqQZGnGUPDVZmV3n3S4/C6cTj/lMnYZdJQMbEJrRxwcH3dBKs6MWVvKAxpRS29oqUWPIjMKLIToaktzJUU75luPid0EJMAwIGEkuZ3TZ3rSZt+LLet1wAp2XH89gGOw3OFSC7L3M10rdyo9nMhD8DQ8DAdThDcpGEBOMZiMZNF6a5RigMlTd7amFIRXmEh+a6NY6AnOEZKa1IIoELekVhYFt2D6mYotmQXIImY821i/4liSiWCyvKvNigx9pf75khUNEBv54s7ytbl1TLNii3zfrHiqFU/j1PnHO3q/dgfMfgEXM4fvcC4Pu6435c1W8FY7TcGD9+lVGKnoyy3yAUiZmPw7AaH20vjYWBlU1vkLWRpJhhSqRg4qG1+cCsBhvkMsjVaBOBFDvRtSnw255bH9E0LUpBjgCHgPUBKBuZeRhaZ0851n0tO035hmaZhtOG3Ia+A1lUUkNRrvigwQK0T9/CciLfSV2CYl3AfrodW4XmbEjbgagLnnBzKwmgdqR/wEwn94EtUowk4hlsG1kJZX2OacaoIw7IijMBhGS5z67hcFwBeV/BEPgjKnSxslI30tTX1HikRl2s+WjQIlcYFkoAVV43GglAWOSAz8DnL5/qH5KICpXds6TTCxMiXZI0ttRk2j8EiJxWkacLnQ30UJC6sjxo31QntRuYVJKifLtWLyoHMuCxCK0o7Hb+BQnD9kLzFUVSr3cEqCHyYhSE6KQ/Lz/jtCVs7FRpDLkWJH8fo6mevM2VmTUTMSTVSXn74/Ox+rQo/udO2JbR1Nsg3hI+ZlXYh0PpuoXnyW9nCOqWZ3n1cY47+UcU4q/2R61JqXu4SAq/P8PR+QNfADBbWSlxJ1Ccme+vXInqzPMK5rEgUsriGfSeJ+tg4w6N1jgJxDF1WM/dPZvb72tnyVjJqPXCURpSK6oyYERARDR0zDFQlRk2mT8O2+MJ+pTooPtFuamk5DTJuCJKI0o/ex9SLWo42dHQ2nsUf8zjRi7JdAII8HRFZRfLv+2ulpmTQfruNOxQODNTSGO3N28VFrANYRTAYlWdJXU1V5WH7AxUd3AgKwFjoJp1Mu9321ltxrLYPJwaUUpdT5ArRPrR0KZj4JDKmJL/eZ9iY4r7JVOi33Vn+3gUQqaO6DUjCSYGJwKMsUeOGmuJqyPhsrfvIfG7vUiEVwH0eX8EbUwT+04XnyZIzoc4IxkKKNsW+Iv9vNFtE81/GLXzo1cnbD7jBggKb5S/uHArc2l0DHwIaXm25w7XZZGQTQJWfErnB/8vFOa7v2ZxBUFkSWWeThu2Siabih/ZU7tum2smUvEZd+NhWXExOSDfgnHvc21DJkhW2uZsCp7b321YkppG2oVqf0S9HWP2hB2+4R8qt71tqia1zlRauersgEksMA4b+VA3aCib9L+XRj2MSAPbTbKz+jNYmMgTK+GEwAIS7tt5pEBHs+uDwt/qfEHWBUYg7dOpnn34s7kbYL/9KI4bGDAG0uR5jQL1J1uFTgEMN42IVheTUcGPHI7oIW/20E+/36GtW9RN2rIQEeKGXPiVvgaoLC87fc+kVuRiuGMb+6M5iNO5tm2RdzMW82/rBD13NTkVmCp5tKdBtnrPmmY8WFF27KKdGVvwuH7OAiRdMsWWJCHvZOLbUTQtXBTHt0TdzlevpfJ5+xmZiXfz5DZQUVqx6lDgQfnb77gNQHwP4CKqtzzBl/XdCqKKeczvhGm6zO1akeJGdK2GAPsSdqBkHmtdaxtVcy8ATAaTIhOt698khCfVqBrVRvUnqaZuD3AHjU1xaeX4Oet+2ve5us3reE7ND7DvcqcpJNwB2pq5ODt4ks4IQWkMvv3IgIAnf43tGlO/rMe/9+yyiEG4Kdr9nMA+Nm+/QO/W8/FZ0fOnMDEAAK/Glv/YckWz//Tj0c+nzzX6D8aZB0mT9K/4b8ZrvnKbO15DfoOC/+qhP0RW38hq5Spj219+ilLlcQ0s89bP7YZ69PALWBQxLw+JqxvmXW882zfl/evwhcsmy1DEgAk9rRgIf93yqdxsRMiG0vdJ5l7SkqIaIXiKzy2MT69hpVNJI9rp+lVEU9RVdrCcrFORzND2xNhyYSBEVxcw0HNW31h6G4h8y2L6mrlUK+pfHKOuSYE1CRtVTOL5sG5JbNmxPVHJrZgudLCydyLdD8RheYZ+SQzLyRlmp3OVlz5W6yg3hDTv2x01Rfd02xGW1xTHRZUs/x6TFDeyYBVn322TJepN+7eFFu5LbZRSaOEqQpYs/ShCP2wo83DJhTcr6i0I987JSTHM6ypiSmFPZzEjEsJ8RvOg0XiwIjtT1KrSvog73+smiSM3gASqRU1eCq6aCjDDqshDEMj8+ar7DzDDQ5wsUVwxHM586PZ8hZ0v/7Anl8LVJPgJgudaopYHGLDMcr2O5nm1zIuom6K7t/svSmxKhiB4sOMaGG9xYSh7Q0dJtQQr4zxhGd7MDTLzMMBjRTdlgxFCw452PungGLRu9YhR6bIzEvKFXbWdV1jWJ0nt9Nj2loVO9Er/0zXX4S1RERfkNTjEvsUQ54O3izhMrAOhH0RdBQmwWl13xVeePJ22vzH1puyazejXZoZmNRUfsVlOs3n+p7I2iEwndB/YjZnwiuHhuYjjmRC/681nLpicI9lMO5OLSkTbus/MsMZQrbe0y1c8XHusHKjSfUdJoqowslPkbQ7396krUwW3ErfyrmGVoQ6EWDodDILvOnS28AhcMjFoiEGfEiZcA+R+HEPQ+HVPSyd3fdwvC26RyBbI85P3YlcUXfAUwzsXfsaIFVc8QBd9Vegr/MNEJss0HPgfSrPMz1xQ9nqserN+8jiGE10l2eQlXdm3kIT/UtRk69hEEvfxxKl0VTkuWYxyILnV19vA31ag5OxksVco4gqvWicprz3nA9ps0zTlFMqVfMMme5rWMcibxTYsNCxpEYzHbo7muGNNpJ9FE5F1zdh7UXkj0cMeC070HSeAl1ykC6Vd7WLXjnepxfm6am73Ap03PVxFUPZuVCsTTYC4/OTO92Q69s514AUscQhxFxXXNLFDl3tFCpMN+G0urvsqms+L8JgyYmvR4AbbrplSeA3nstgt9vuyHPPPLtsmJzqu2T3PZDvoW2B706Tr9JlKtDDrIBISCL0tEYhccTozaozuWC9ZPlPRx10YmbxyZS2/u/Xi0gw0eNI4UcZGclJgRlOyDHB7EBJ5XDUCD2LSzSiya6v/gboxyda0bbNPntpfIkHznq1oxtY9JzmGXj0neERgyAcV8c0GTGMUYwF2srppFPqxiRIKvUMDMpgQ2LqkUHqB62BhgJs0EhRwmMeTLCx8DPRitGYbyyDNxSviWFGGGmP4dSxirU/+Et6K62y1ihNTSUlI1IrtrFzLvEhUnBoJsg6Ahfsd8BBh5wn0dx0z5OoRRxM5s87pDjyilPIXELBmqRlnP3gHmpc/E8WT2KNu5ncQotHPLUy2ljjjGGLl9bx1kZb7Xxz1CLtucYnvvEr2v3kAx9IpytKn5VgrbPqVLU7C6WZ4mg/fM8+wuRAugdEdK7ESkSF4tasGMrpkkadXoj4PNIGWwZZZTQkKXpYMutnA+98iMqgyRA1TcgWN54sIzRzUJxka9AnyETPznQMC4ttUONo5AEI/3npDWd8S+1x0ZIYQ2HIW53fIRf76FgFYUcnHK1kiJUtGp9SelGgP9vTEOozOLf7hbVc8x2QdA+Sxz87NYkvSI0UUZe0JH2qBR3anigSaIbF8O+H5cYkd3xDfFEQX68XTN1AZWwJvLNhOqSZkiZRShEHpyr4Sy9q0r4UqRNeNEpQwKepjZDQlBmt5stBc2PBVXpxKfZZ+S1/pNbGaPaMYfVZmfHUHLyVwrJmElzcMnUZjMakT2et9zGKM5+aLBoISjVkwZkvTk2Kv46bbRBOjLg0bSpaKWJbZTQBpdqV24YLoO5ncPl+rU6QzOyHHqf/VS/2nBMQ3vnT7YHs2yB4ApHSRe+owtz9B/mwmmYDPkESrWXYFlS0SRwWZTy8q5Hf+ctucKUkIyGESRqI68GwvBGLfhaxcNePhlDFfbnHLRWtRNJN0mYmRMC+AHd9KHxPe8w5KypGw7ypK0vH11fAVYW9BZTztBmYMhggReRnhL/llK/9qOxa4ccFoglk3hUA)
+    format("woff2");
+}
+
+@font-face {
+  font-family: "Audiowide";
+  font-style: normal;
+  font-weight: 400;
+  font-display: block;
+  src: url(data:font/woff2;base64,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)
+    format("woff2");
+}
+
+@font-face {
+  font-family: "Baloo 2";
+  font-style: normal;
+  font-weight: 400;
+  font-display: block;
+  src: url(data:font/woff2;base64,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)
+    format("woff2");
+}
+
+@font-face {
+  font-family: "Baloo 2";
+  font-style: normal;
+  font-weight: 700;
+  font-display: block;
+  src: url(data:font/woff2;base64,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)
+    format("woff2");
+}
+
+@font-face {
+  font-family: "Bangers";
+  font-style: normal;
+  font-weight: 400;
+  font-display: block;
+  src: url(data:font/woff2;base64,d09GMgABAAAAAFvoABEAAAAA0NgAAFuFAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAGoEMG8UKHIUoBmAAhQAITAmcDBEICoKYBIHvNguDZgABNgIkA4dIBCAFhEIHhxMMgTIbfLk1eM7wHtAdHOUKmseZkQhh4wDmHsQZhfRs8nWR/f8nJaghYzyzY7CV0yrNJ8KlR2TUyEqbPEdV2gvLzL4zMyFXWWXIRAbDODilexP/wMkzWuM5ekfesiy6RRnup/mDCy64OF/B0t3nz3btyKVdURQkdPnnNui3ORvKy4ep1ttgPEbc9sdoS1pPjdJgq1/7AG8Zdiz7n1dZXFZvxS/nJbcucJyXqon787TN9/8dRwyxcnrGjMZKLLSHjEVhVKyLZZSRWFi4SleJ/73vss459973PviC3m5oY+WRMWYcCFrSOgolCDnERBqtCbsYt8ZFscLZINs0W6Jore8ja/a9c+jOHitAhWSBWRhiIc8y/C8MOmJhCBu+j3t+5+zuA/weYEIJRDVNKoF4fOER1n5vd/7NYajZSsNjIDSTBgjo9xcADpyDEMJUb5KAAJR/zX0aVXeuQlYiawIHNL6+vhIVo6oiDtAnCO2+BUwuORjg59Yv36Legm1vVYxYU/EWTYxtRG+M6AHSwlEGqKdgJShGY10kxkX9Uy/a/BetXtX07+Z/k/de5ET8JEhCaGidEtreEIYnrPd5jRVXRPu3M9AOz7phhpUsC15obj+gXTPYGKP7U///3Pz/vU8UiNiJIFFCQoA0SMUPpc6Tvn5Rn0zun03axfXRO2azoIUr45BAduObE2VPxNnMu1Tdp2lOiua1EtHZ8JIA/v+HOi1zuz4gbEh7YVvT1V4ddio7iEoUUxhPugcLbSkXlcMKjLIBuguQAfVkBG1Q8p+/qL+o1VUjmS0VnZ3WptLhpdc75W/ZTpnozQ5EOywjvu/Y+6lNbZqbvgwIhJpwj9xY7UypCQmEHxD+t6kVX8V1Wy+n7V983jLd2dLfvaKr/lUgYRHjDThymVn8Ji5TWiEDPP9vM23/ndEcj2T8nhCNSdFJhb2prOlLa+3bv/9s5DXNzsoYmpVJkQMbB6kMFxVUgGXGQJucHAVJAawQir5IlRRNFQ1ns9uFt8cXFJ1QjtUt/KfaKRCO/9+mve17M5YxYG/oI1fBfr1BatNxUc7c98Yz82Zkjd7Yzmgs+8vS2l8ee/8KFrTygsBybK33HC+FAA2L8q4/EFYBgBKxqFMiduGiT1NBh1Wq9Kn6lDmpUhUpyhRFkWWpViEhEMYZONle7Ff76t1Wp2IkQfuklxk+wgjGGJnrW9/IE/sVOx2WfpYLoSlyoSh65f8xTQHHDb2xfHmGtmiIQYTPFzU3th2LjmNMrSbQ9Pd2gCPuyjrgQPR3BQTjufr2RcHYEDWIOiEkyjjIBLUQOTlCpy4EhX6EQUMIz71CQAgAHgAcAWhAuOQ7LmPdq08rDekXXiZYv/EAhNr+FCAAHLZE8PyPOAnw9n+XFwIPCQBUKvaf6hL7fksLweKf3AgmB/LOFaADANfuLLrfOwDZ/50XjuGgzLRzYMh0xUgM7t/14caRNZrRa4bM6Tylv3Vl+nlXpdu6Gq+5EaLKuIA6utnPTjazluUsZi7T3bT5Lk+Io24OpG3ZYipYnRRkVUu4bI8BA8anGHoS4JshASAsqO/VEw7uS4arqs/tcXysAY0ROvBgKZy7v/u+4b3Zsw2svO61rWEPdmtXFuc4wSH25G/bhsm2dPM3c9WLUvLJ7C55kyZZwqIWuoB5zXX2s1qx6QymBRdKQVt/92s/ZDev+qR97WxL63qvN3qpZ5B3rAe6q1u6risXi5nLdKmc5Rc3t+mVdkLFjcOZhRXUrx51xhYLTNBTGsZbWM6mkvg/1v3MZwjzrpEXQIkCOU39j6BRTtd/B5bh8bmWC5ziCPvUjqpHJQuzKcyaKVneloWZnVpQTiHZF6cCeP3dLFMyLoyomJjDc3B4guITtzjGOnSMiA48WIPYZ+jfNr877BvwrJnbgNfxq/5AWZfW31nQ4c2EP0vA6zbPpqaNcH2bkTOu09uP9qAf183cB0fbu7ITLwDZzdbn+qwrJSey8h5evNl/PJjXnDwfyvq7KcadNxMN1rW/m3yIlDacfqT749+cnegZ82V3Uk9t9U5XlLllgrk0aO89xhDIcfJ03GYNr58Jl3HxJLRbLW3eYEUqG5Q5K98uA/sNLARiEQJ5rX23wKwbaFbbvGohH9eDST+aXlPiPE7sTIf8VmrOhfP6gmuG6obFEDdqRhTkMVr30Ig7ThhcUAzmtHVJbrvbdj3F22MAg+mRs+wH4Oa8Y8zCdM0f66fL5km5B9iOb3ZXKTxFFbzUOdvG5Kt7qexXLEcI1/VGnSiiL0e3P06GE4SMNr6qFgxgKn5r2qKIX3TeImzgBT8cNXbof5Xvrq25Tb4vKxen1zpTJnpwq08TCqOzS5zbnbX0rBUKWU3sT3JKP2lsV9HTW80YyT4A1BAhCSHpgbkyPaikmFxJF1KZAMTEOeGfEYgfklVMXj2pMvTVyp6xu9h7iWWsQJ5X1jagC6tCf6ul9sJOuq30Z5DYZXKI2/MIcvv+y62vYCwWfIc9QAKQMrT+DG+WZ4ROQVruNW4/t51zj9PL8XPSOFr273rPsLkxNTEg6wfWIKuHFWQVMF9lWhirGCj6c3QtHQH+qbEI5tCWaTLqRd4s9QR1nrqdWr+eR5Vl/mXzBJQvKHcoZyjNFDb5Q/Iw6TvS66QRUgnxXeJBYj1RS+QSfiU8IOwmJOF/xQtw7+P0wK/AItADKLCTmDcxz2B2YoYxNvR21HXUMygbSoaSCOhn73nDU+5xnQtBpFBjZQCJwmBxRDJIoQoK0egiDFGmDVu27doTty/BknTEluJIy/iA15y5kPNFX/YV3/YDP5dXUFRSVlFVU9dwqanlLe94143fcHV0/cEf/cnA0MjYxNTMrbmFO76n7i2tPHj0N3/3b//xf88q3K8NjYsf6IB9n5TMYyE6RFaQIRrdUMCWWsNNiMJMie/YWtqkJG2mOZvNhFETA7F/TTgACEkK42l3zgE5WR/DIyBz8Fw7MlbWzJmnN5mFDgGANYlFWcfgsY5weDIatEHBUj/624J1tAiJgRLFMK3bJdjDi1u3j2c9ToJSCM6QHmfGx458GwP9kKZ1fwP089IHkAkqBLslGMA9Eoraig5IFPA6wBaUFfIjYR+nnehQxnSNzJzGpxaNLSyF4xCkKV4SkiXv/y/4mgOvU5yzXTiWU/cxH/dZsp/TFKhKGDWKBlbz460vu7/s4HQvBp8efmCBtKLZg4rBIAgbSDQGRpQh0clICiAgK+hYSF7YF+gYUbQ1AXtw+wiWmCTAti4FeklMFuL9Nrwm43W6E7QzhHNZF07l/NrHfMFnBX0b8HMbSqAKoEa3ILgD+EQrmxj0lnOAjfUrQtIGEy2OlsCyHjrT9OSYYgqHA3AhARqeYW9vBAclZxsBUcs6sEEDZOopatPM3/KcA61RTl56uw8ZUEGk4K7Ot1MbURzbOPCq56T5HifEYHkkCrWGZh6JxwtZdDZNCs8h9l2gUIgHHO+jyMn/rdCaH2l90f1DB6+7M/jE8H0jnDHJAmUlYhvWOpy9GaGNiSTIGjwVcQIUQWEhp8KOohswaiaEbYJLp30tEhTW+UL+keZXW1+nIUNTJftjEUK2hREfkFXHiDFpCK7NuCOHhCsRURewhELRYYrbzi2IXWivPvkElLVjn6fmDlX6XgbryxDT1/gvsBA4gC7Mq1ONykA3UiAR6YpssU6v34Ex+ROSHy8WbZAQ4GXAoaBDIV8X9gpNmI5mgKJQq8OvdCjdh6Jlk5H1m1gkqEBRWCiy8XURTmDOHbrwvJyf+ZhXfPmV/FCgK2GV19XLmoAGkmCw7g1BaKvIIVV2Q8DUQFFKN+WJq7MaTB2jQZQKNR84RAqgdun25TIC2Fc4MlGETAV3Uq/Uqvl/3qBtIZ8XlqVB6RQRAsORqBBzf2uzy7AnLL6/Lyjx2ALZIhxPpJcZwIdnx6+8JuKM5FzahQM53/cxWV/efJvk50j5/cKqiFNCKD+t7tSQ6o8aIw64ZuG048S651evnYv0OWXG4woPa6fGvsh0378fZN1qHIqkCAgKNt3G8+VYJ8mNfZaaOmQM5cvd+Pxl4ajs9bYyqj6qbRp/mv7e/wOEXIA96jF8EhIksxjV7ub9+L1E6pD3L8nZkX9U3LpGk8G2UjcuCxpF5AOLod2xxhuGheczUHmswvOyVDVH7SkDgQkCCqDAJDYeYlHsysjGxA5M+pSDjMGzrAjc60LkrvBpcaB0pYNEkBKOAaiVE0OLUF4JprysDk/G69Cvt87oK+PPTN41fYv/riiECgijRvBMhdFAu3qEOdtC1cVtaVXAgogGzvb+ZZT8uHBYDLNzXhmqQKC7+TL64Pjtk9dOX/BTgKFmFSwlO8quZqRzbyn1iwaJxMsaK8nBE5xlNZ2J6nQjy1CXJ83FuzjuO77z2Nvr9c/ff/4wImSgyqhYGihD8BCOSLNYD2pUEYGzK+2hjniwKJQegQF3eOgELj8vgEqYT5mQEk4+dMDlQXNoLdyjDponoofXp3vA+cv23+v/ZKpCtDVFaRLoRFkw9QsMWvdvSkgRo0RRBtXJmkQtgnf7rHPupfQw5i8fPnglIpchbhOWCUN+scq9pxd5tLKgask5IaCYdpGXxv5WboRHQLCFREs6Wxm0PJJwBUJCEY4BWNWd2J8+VP4bRmCmcYQ415wBFofaNKd1pI20BXVV65rTdkSz09I0pO60EjgW3UBTW5BLQCa5BCyFtyAgRZ8yoCoD5Ih8uHz8LsB9PlWzTfd6tfQ9/TDpxhPA+9D6zeXnNt+I3n7n9qfXTVALqU3iYfRw+qAB0pDgHmZpOOlYa+WbTa9TRhxjr5rImnIsRN3J8GWtvN8j6BmemDH8efaa3quyfzcFYaK1lHlVODbv3nGQWDJtUu1qYbw9QVNIi6xN4SJ1DzzbekQsez+gGoqYjefzBdxyskLaggzgDjWHS21Xt8QcSjy6z88KbCWmipDqtuZA/RvfENHca82z6/M2J3obdIPg/rcDyn/Ws6VPGUw+2eH/R8LGIiagKclscYuzYPBBT0crSUadDiEjhgbj86sCTRE1CqBg/QqENk9nzRX6K2C6WboU3ZHniR6gb9fAhqEdY5jZ6BZrPhX//OV4BQpCrpbim25hnFlbGDcm8bQgICe1UTNhXM9eaXt9A+VOOigeQw/sQng9fNX3mhzrKNi5CFbUh6NoaYMWEgURkRg39tYBeKAe+YPTMbSv6UoAbBccm62GjiPNOWtMwIGpJAw3KxejGAOKFKlmmEHJkixfNQsUXhX0aiIKBBkn46t5d9cP25fuafeeh9Tr4z7F4MzDR7Nn886n58sh9PhxI8xvXJNqEweiIYEQchwNZgdcr1LvdJX7ykV9LJswidsEw7HJYnps8yJFEBHerWzANO1oibgCtG1yX+nUA906LtI/KVLftoGooXWz+S3GfLvAWs5XK4tFt2WHLPL85I19mZI4p7v0cR6qMCpKKjlQXnurIFXHdTFB667p/VqOXNFd47Vlvd2N3QxuDa3ew5wEW7yInZcxOh0/n2Q2vZhFditi7mULJr/q9l7M8mx1/Ii1BrkGV6r9G/uWdc/uBL6lGtnZ/G3rb2DF7dHbyQ2V344/nSe/g/H+3Tvt3xv8dPi9CdIUa4Z1CzMXsFjf4flIS5TVYABNly8Y8+VGH7Y1eXgVJJzKkWruXBPSEFPhD4s/VGh4ETIO+0fvpEcw+MEw0hE0kb2bkEwpZiS3SHM6n2QJQHiPcR0KL82y6cBcmbegWFnfXv7n9NKwuX5c2njRmgQGQpr6siSjmzXoYRMmrex6HeCuNxjuMekOe9gfBo+GO1N2zjHuYIDJ49wRyWgRGog+ND1q2Vki3U7KkmusjNhUAkz3QsJy7bmN1Vl5NP1oQnQuyfh6cjUNfHOKYKIE6gl8oNxGKhGUlgm36f/kwTkm4It/5y/Y6PsmsnJKpaoPBkYA35SglrA2xduX73775sil6uyJuv/zZPStGzAyl40OxhFP9qfjZ4e3gPk0W6D595t5uljurk4et9uo5/CZmRKXTeiobUhXGxqJIV+VVWCqo9Fzwk3Tnpa4K5LrYujtlptz17YOQfeJ51U9tL4nBpKGbCPQmAq8zPp93Qqany6EQQ+fdtjzCBsoaJahaGELI6xFi85o79j1si1QVQWyexDrPiFPrPAYHYclv4J7cx8xcmzs0yZOTB1bOHDnVb6TceW5RxuesXGQ2zHarRUmDoNip0fRg+JFE2NqMAwMGHSLEAa02xkArB46W6lbZx6Uea0rYR+odWIKIjRv1N8Orob3CuzSOYDewD3jrnZtQlalwC/Rkhq0tKCDa+P/cugKvF+H1Qtt4QufQRQwkHyPeZ4oJiZf+AwlLPdOWuDdb1fWgiMRiyTg4dQN1AREMJ/tbJK0gPiabVxOByEXQ8wwgeIuVL6gYM7UVXGSA4lsnrQ1ZqC0M3l7KTDbk1/t7QJ7ywanw5N5hBaqwxmFRUqXOkBB6mSct6VLC47+/BN4fIrE6VW2fxCYrv4xbc1x7r4YNmQoY+nhTIFhoDe12Td4V9k/WmBUfPWLncZ9Ni2TrlH3InvFZ+iOFS6H6h0CWrHF2RjOR2tCVeSdCq6uLGuHC91WF/Cj0DZJDXMIaauiBe9fVaoAZy69Bz2iBUTie4zHEVwrlKqysbu3Zw3IhlSrw+Ej1PVh0DouNpFA1xMFJ05yuJkgKGBQNqpSLW8UBCfLAAZOpjxcUl/QADQUNOpkHPFkNJXZTPys6YrNbdb++0UoRwsbxY4FE55TgJrzGUHzmBciuWrbeeLjPZaFTJq5PERSFMfWv1Dl/hhZ+cSoIFFfAezK2PZTUAxu19f9UybPBo77i9LywfqMNACE6VNwVqjOG5FtLlegBbf8sx1TLJWEwZeEvC2OMD0cCGkxwjazYDyUhdzoDIsEVaN2TDcTand/K0xW1kOhzCW8FNmkHKppChUagH30JOj+ACwlKYUhHBJ90cvLA8BOieImCgagAdNRB7KQNhmAr6WVGEFObpZCBRnbb77gUQ9B9pXcdZQ/WALmUqmltFTa4gIg0HLOuiICvq2feJLWgyHMRdg661uyvD2ltRXDj5XPrJaS25NAFoWCPhGdNTbe8DU5EcHzkzmqDAbAFzMBgNjy0dFGAD3k7NyzQRaAGJ9Iwo7xErhFbfiLKLv9AOOM6QC6BQDgT9IKAD25LNDZOghIk5X/7fJBIxlQ48LXTMeoEEZ8x+RBFOkrIkiCTVi+6dBGtCltQVvTfnQ4fce8zULLQlelAlBDc+VnlxOtAnEMREewZmvTBrTJ7Oa+b0DfA4gFAAAqpKLh/5hZM3v/vy7w75VyJQCA8pSyQzmkNCs5g1sGLgycBgTAC4CYwmcAgK7DmtB57gk661Iu6eXWOWerO9pddN4++23xkMwuq2yz2hqN6jXY4AK0SC2xkuYvTo+yX5TOTc/KIdsd1mqvt/yFCScUJV6C0R5+W5toksmmkMqULUeufAVKlSlXodoBNxzUbIX1brnntvtuuuyNK2qc0uKqYdc1WWqZd9pcssknS9Q6bZGFFtuIgpFYGEsn/xOoTYMmLcYMGDLCY86aJSu2RnnMhgc+N+58OcgTLECgEEEEQkWIEy1GrHHExpCINFWqJMnSpaiTpkShIsUqZaliJ4NcnxNOOuKY444602Ua709tq55T1ctr2TgD9/8NVII2nfOeUnLNHLD9aPpCpvi98T3fUWDjBrTTDYp3vzxXC5YvYYD0vWcSi7dywBPpy6mxlvAjwkbaBRBrcBURjPOgIoFYsRU5oDnnhndHXIs2EYLLZNhyOa9uSHg4BBUlYSs25K+HhVTIJjgmx8dWkFy00ejVY7ySxBU72vGZhPDkz7S4kXSG+CTOSelJqkeuUntGDRrwW00+/SplVDedfofi3ltypvu/fWGyST8UPl2vdTZwHq0Gj14UmfTEhiUqnJQTGtZIoW8TMEB6c/GF2nrYsFjM2ivhAB04QbWsAolRYZ/w7AnbTLdLzaAQpoZn8cYI/cbIjRDqaldpohJd1Xikx4MuxWlFAeiAvMXmGpG46ymijjKFjLXlsVxRdLVEyL0sHRxqwFbT9B2uHZIsPRR2NnHGiRT/v1DPTT0nn/Z82DVxX72oVZDdeWIGE6UfM1aUwBbfFyAgjuTEljoBwd9IJDkMiN8OpZ24LcDQRI39Gz7UiQ7ksqz1dmiz7bVRWgOwdtw7O2pQJ38UmYqCELrEIuQtLBalrKBxNIfeYCxmvCBzlkPOsmZ79+NRtw1y2IGhaIw0sOb4n6s9QG/uemvE6jtbUUcmlRv+tqanogHRAK7O9a3lh6dOaXD42TB8hUybhkN2gBs+RFJWaDIgBekuJZHs0MLGoc/8T1tfUD3KcIPshXt+4+AwaKyI9hEdZLBaR5p1zSIWR9PVHo+Yy/oRNjKIYwE58yy7ziK/dtMb3WWPsbPS0lKZpgkReSJ5XKmzZyUlRwoMlORNGb4JM0BR2kQSLgpGPP7IKEYykM1DT0sdOtTUUVWS7BCu/eko0EemRpxz4JXz3MSSndaE/w8WzxWv6CIDfV/Ru3uofI+owONU1+NVzxNU3xPVwJNU6Mkq8lrrJxDs90gxbxx6QU382FOW2dtOaya5hd/5Z5NGhb8nLcYIdYd4PrFcHhpyPWgkxKQIGcIQIUcYIRQIJcIYoUK21MD8aFV7YMmBfkZL5jAdWJyBrJ6u8Qbc86Dt/IFzAL3inoxKnJZb9eE3MgMcLehBNGuNm8k2E+e7LETa8Z8UoLF0TQnNsRXw3eiufYyQtez1uUQ3o7ioIrgXAMDGokznVaQwny8HwDx6pjuEjZHsK+gQ9f35ikebWcSoXJp5jEwC+yVqdgnZnhJfS2+W9exF+FNzh5uprhxFpHfeYfIJCC69kiBvgRAnK2E+aYfvz1KtwHw6ggWctqFWZVHctEi64C/vTjLZjT/nZTI2Vy9NdtXdyQ60iZRJO9INpiznKgt3dPQBaQqeoREKjI2TZsFoiIU7uYLyoSioTEjSjdNG3Da7D1Z2mxo2GhAzIbpEWRiIkGBxKriBSz71QDCduyp3ojl6+rTiGQ46Iu1CIo7MT+/XnNtsN2ldgA7Bg60XYmIJRVna3NB3fY15sUY9ZDDJz9cGRVuMWXvaQgew6ERXPMV0vLdenhLklZyFRzcF7W0ZXo9BUCMoTTv26HfNvnrMa52b6LzPNF/f9b7ZXftVu2FLP90b8MQ7S7wGTz3FA0yvTUxHmyVRZM2mGt3Y4E5NM6HuRCqO2g2FJuW9qGVadfotcruWOzLC4/lHojeBAQ7cheE/dF6mjZ0qq62aqO7Ww8l7ROR+sWxYbSXpA1K3n4dBOudXFti7+6di4cFucR4v3iIDzho8pP4v8nJ8U18eCNyOoEY3ZQWplV9hNDdIs3i1KRSwxGhPZUoE66mcBst4TxVKhOjZnnAOyLwm+6oymVB9VZsJKN1XjcmE6Tuw6GPRWw1VW4mwe6pDgxVOT3WVCLenfUxiwX8NU99kwu9rY2gjhtDuT3VMRiLo9JE7oonnEB8828U1lmBb6MY80OPwKsXSv2IXJPBgL8Ns+5oDpOpfi0AhAwUYLDA4RLGoYZDArOyrVSMBUo2uRaiKxwoyVpDxgkz0ETUZINVUgJRVMClWF2JNIdYWYrqPqJkAqdYFyC3rE8+TntRSR8ISwD+PQT3nLpNL+dLyckvCEr5hCa3wDd5Tb13jcghqKg0A8EYA/hF9+HAb7Qaw7ACIswA+DfBXAYbbWRohoBJjhXBMivBUShUw49Tz4tJkte5YG0lzClqNhM7iWYuinGYbqkyCyXc/IaBntGkUVpwrXxYZk6dDlVNLtTocIzDGIFMppYbkCScgq3yziwvKtbPz+/dYlmsTpavoI09NwjyZNk501r9sHCvsKLXSa/c7SS9TD6pVerwf08Jmh7d/abmX1VlyPriOke43eR1ZYqSqgarbSWnX47yZqYZh64aunmsH2mu2alp/jk6sWS61k6weCIYgqG5RTop+qPkqU846gyPFoaltK4p/vKcrtq5szvX1TTQb2ge6Yzl6FK/80slsc6xpiqKYQaoqY62n0Ir1EzSwSBhKzUkHE2pnAJqEKewOzd63OeYI6ULRN3cYiBMu2xAe1MdsBmW/pGISNuqqTe81yCKvpd2EU8T2o+At2qjjTcBbrECxsUVbmA+uF2etDUmdwSNfJBnKL/cBIOyg5D40+b9NorzX/IfTLjcF/0ki+DEUO5f3k7VyBk+72WMqMnfMMq3q2OPztSPKMxlEUshfA1ogEnELdGIW9OlEJNHZeJ/qLOfvlEWZ0LAwgC02QrEDOBOmgv0I60hFk+vZDuS0gZZ4cVtJzLCvz2vQ3xTs1FpOd5QlWAaSZNiQCUxKyoxmIZK2ts2tTRW3dX+qZRsdJTFi6QOEmx1ntSEvUwvJkmIkKGlLaQvvGR3W71+PxwS6BWa2f6yo47NXrxUgLrDqFSM5fI0OMMVijioHxt9Tj1m6t94TbNSjYFS76NHslnVlFrJ6PZ0k2X/zMJJiDON4pOL2Ngr023PTi7VMmT92b8HHWT3JxabUDYFbK5w/7ZYH7doAMPMfz6/w4lqdZb/UEYWuyD1mrnRVe3NT5zcW9ChLuxFP9VVyVZoErDQwHSz6Geuv3qf8Em7IgPUaFJXmRrNqwRE0CPSLuVgNdtofCpnS/sg6ATqkk8DMV1d4PtX/HmaLJK0Ay7bgd0TnKNWDYMoGBOQh3HyzkSLx0yNR0Se0OD/x+YddlpUm9Xc/exLSMKOUT/2A4f97ci1SlqfUFuyt9NJeDfrHUgifCVt/Q0zeSxIMsRyY90rmPVnW29K3oUfnw7IDq5OoLiSNQWTfK1i5rtD1JFJLjnQJJ3BgiBu/3KUmP75KBqNNJxkND/2Wms3yI4GrlAzaLXrsOwvah1sfz6fMU7iM7DwzdH3mwl28Oy1n6FYKXXGUusmAhNDNvj+nos7T0PgxPoWp8xDSrCC2Y/vuBquV8JJEiqgwK2hfEBmWjROyGO07be44KtBvIElIeU+fBHGCo4P+oOMAXL7vLsNiV9jujNpyOX1FWxnTqol7nEYZmM1cUBoJRMquryNHKTUQnPSMmIsy6hDSOkvCNHggva2fSkZ8Amh74cCXtzrW7t2m/JIJRIb2chSWOGlpsEdVodKwpS7ENnf/MQNCFvDOaSHsTDtBfU6pYnLmV9j7sUdXFDoXFq7cTPWMtur8CGLfRhwpOjIdAwrRutGhuARIjqrKqe3EgFL8i0WpdmvrB0nfLGAblmnkzJIEC7Jpi1H7vUFTG3BENUHf3QMukBcKv1/bvY3vrnlr8RM9eIQRyb/TQFm8FZ5N9Y+jCoObSbE3b0pdUVgFafi5WwNN81dF7iYlNQ/wLHJRml0dWppQaK7C2VUQ1efPj4O4l9RZDtsSuax4xEf3OtpvPcnwozJ/egnYFHjH9yls/+wWcIvBm8RDtBpVccyXdGHn74qvm6/g2pxMUd55qTyjQ3jQEtesHR2a+o8BZ6iMjO/H1x2o4JUoZ5eYvLCT4HYrbVsTB8QjBJguPBKeuIxR2uyCYEYkbSmLd4/jVaCzAFygIeQAcjxdhOBj4wYJjUvhZ7wJpkfr0Y2qylsKe8A01yPOjatNY0Xc2JsFbYNhyuIB8fpQRmIzR/DyzBXj6RAQLG3D2rFxkkUAiZPcLmMtyk25mN7fCtjexOs8hlvfV5mXuSK5Np6eCjL72yTKV/thADrMEpwKEoIzWFO1Cd+5wk7ISo0DYpT8w3C1hUFcXq7xoj/GP2O1t4+SmXcJC/Sd6nRUdNR1CDrZ7myBEBt80CKCnwfESiEtWfO+cGrG8oPEUrnb/ardiW6e2lJsCPJoLRJMyaThfgyc9aRVYdT7a9G7PAyy7dSPw6Uf1XdjFtShFeTg9v7fHWAOanMUPPtSbL3Eu8JUdp5fJeDQFGCcfP9bIhr1kiXNsyB2nNCCZwt0AnBdYvda1xPaqAdGriyuS2BBzvUds7hGsteuTaFcR+7P4EBONWpaauuZhrnJ0nnaVc3TGNuTfb5nndwTWAILbSRZxilZM7lVO0kquODwjoogy/GXmn95kvjlSQ8PgA5kl4rqd04LErW/XI8AawfWgJQ++x7wC8j0JxnHD6MfUoNV+jI8hyUVve+n782gA7J69c5mHC/74BsL+QVxSaRZCv84RyX9jmkZKXkfNVkHu1fROdqvsrgOl62TlV3ZGATtdS3QWOJM1fA+oxmYk2eYgXTZbZRRxHRzwVATl7GbHWtVYQqnacQptA7ZZ1zy9ON6vt7I5Rv/WjnugzmMM2zEUXDzisoLf0g5i53OnuowCQxnnBOaP+SfO+jc2adBSGH/OW6XVe6QJsLlnozbJt8xEJVk7RZU/Ad+QOdXJhGPf5a53yC09i0UjxDCuYpI5NkYHq8S69rtZbtb5ydeyKw0MitTnNZH/cVK2eh5+1yovDKGezuHpN0kHz2YekFt5SLGsz0C/rDD6hKBn2jVMJ5Y1TLQNCJQ9oemUNMhWALNlGWPELBNYlxHwUIu6TSiF3iGftQajHsB+wE9D7YVSqmUHP24tmRJpJlmlSamE6I4ZpAxcDdDdGRKZ0fdBp2VxsEYx/e/VardZ1QpG6JSEudzms+ibRZZqE/Y8i5sIEM6dj0lvGLX1HIrK+3HYPQoyajOrDDs1A9+zkCGvVSjpdSLZZtsr5PGAYSDlWtbo+1dacQQ1AciKR384HvoeZiRcavdhaY1s+0iKW7jcFPnNdo9ENbXbdXXUZ12yxPog22Yk+Xl9XovL4HBsbgTH9KUbH0m8N2Wrn3yoCtymJxCx/k9vlDn+nkD/nz0LiRDZAOkCZxgymGb3mLyWzeJ0hagaXlfF8hANySZO8DnHS6+xOuQDBWBkHL1iPGSslWJtv470UaCU8pRFQFkjsKbPdzzAkQNaLt2OEnNBlF49uxs4PLF6DEBeuK3AUimpsikPtzYn/pUD57WxS9lUFWDpGede93OFQFhTvxHUxW8cE4X63OnAIHIPgNgxHIDlFw0ew7uKRTupB2OP/LaohaYLAOQFFyGLjnW1uMgEjhwxoAw+KgT1E5EH9IGeJEFsTFbYe+6S3dGVRcSDGDGq+YNwqGdYNcjIMj2qSIYKIk/QqZATkqyzfoDYrOSxIYndKHJcrOZvht3AQWXMh41suYsHDmBUXbPSHa1qGhjXPlO66qmlwRtnN6TIZEJvGBBFKTkD0aW+Kl1YutKme0DKkXMhVlESRdN1t32HxlU1reuzXC2ALCZdPaWxKvPDMYl5psxRm76WvuUnQVS4tP+b5IcvzSQxzNOD9+NPenxt1KXgzSd/IBP1vNrlMXWvhkrgVzrHGPjVlUjMp4Tx/ufjN+Z52l97MDYm8UWjEbSkdhiNurevZnoOR1CZ4YnBv2buAid+pDd4f0PCebLVWduc4hcqRNx2Ep+xiwv1CRgO/io6zkVEAflKArGCf6GwhOYDJlskItxIJG83w5S0kTia0KkXXQQOxlxdbrJ2bCvE5B10+ndGVoDVxtbFZ6Pb6OWONKwKdnHREpGYLeZge4iSpHblJSUvOcsR2GIVQgFtEi2IXKX9mHPkZGd9Jp60oS4Mi0sR4rXWt/SYfSzdhLUIBFXuXrJvs569Rw3x8PHOJDTQBr3Aj6AmskZR1Nazoic9VvxCI254DZJvE70AFysPat5DsHx5bTqZ0g6WlIO+5MjELAA1tBl7ajiaPRTXMwsBq/uGoUsB6Nt49IcoKJJeGC3UAXCo9fvZRb9wKIM3qt9uHdB6Avh0YmZ9jKiVOFP1vaXurGSkLGfeEzMI6Vof4WcjNPDSJft6713Y09SHMv+oOLms0csX+zYyblRZzsSkqaB64q/zAVLTkIL3ltLJGby23HIsTdSl3YqEH57kwlHqtaHuCmuXnwP4M8QpMyFy0476WucP25zpxL9WuoPkkfQjnOiQ826dnzvan5LWlNrX6yXnv+DBxYQEu9xH2riuuvX/OdPwO21YWUuKhYVDp3Og7y+9ZNDeBlvHd4F4zDJRjHSczkemo53WUa/z5QteoVBPw59Ng5knobzY0qRx/yB/WRyQKBeAETXGaAsSmnptqVNFdX+areWodZzMP0YmTwZgOOZo3A59mSyE7lzpM3hxDF6XhQB+Zp3vz8lD4wt250WeT65StlDvP/SuIdZwCFIvWTtx+NBF/sD7G9NqAu3HfXknZpj9FN+d513xf44nW7OAHH4ESpG2mFi8b6MyOkZzR9h3DCxQHVD/z00QIG5qynWe8Ya7rRwl2gbNBwhw9DmlBgqZ5fARCK3bRVvQDwjXBPTnhW/Fq7g94nWCdeyOzgoJJgrLqVwCKWxm/xPbH54/1MB45Z8QDEq6dxmxWygWEhO/AZgG9qFtGE3o/LuvnN36mkbHkDeQFNwhZmQIxFbcoddrMOf/TH6C4Ij8/TKTLdpk/+L8w/lSMhinNxk0A5pV8a2X2tnqgYn6BzuWR52CYcjw8J44RonBnoigCV0g99jZuck6A6SuVb29Kyk2GhFK39xOZNWB13IiIJZUjc7PsUYF/hL8H7g2YQsR+jspilp173PV8TRmO/tYhCbnklOMPxx7grE/atBB4+VBGlFU5eQuYV9TTWmJ7QurWu8rMBg98JkDICelD0FcpPy+37ieinmGPHj7TRa1rf2bo0+uqZZf5F6/kYSeTt7OGYQbLIeLaVoPcVZyrrMZGFvSo8/o+BYPWtUlVPNN2/gtyuUM4m0YsmcaMvgWqTkyrtgsWmf++AePYDmSFpALEhxczYMbf8aZfNnK9rsAdMxrVPnmq7U9CvgoLFF0KEzxVvi94KBlVgSzMDg9Zw2GganZzrH3a6j2V2TL2fyGhyWad3yA1CBlJ3fPM8hkRiIVYRB0jx3flnwwPzJOTahW4v7Hy3629Awe4zZESBaWNMERwEoGN4nOvdASNWRGSFKhnB1TAFqSaNCYdEXzRTBLY7SIu7axA9bJtwvbhobz05LsWrF+fppaO0NJvvHRJ88wm4R5diEgkgetpXGqKskBYOUX4AGeGdtpNnQPUG2cdeQLRQ/d467iVSwQATtkh0UZx2xjmwzw1TbZLIbYCBegdo4AzH9k2eZ4wTLHnrHCe8BVlMwhDe2uVwbUzyXPPE+omSbaC/F/jZnimTZwyVboEkyTLEL9/C3k2BGsMQugvXW3owwgTnttl3u/9Ep6W/0EmfptV1jrNqzV0vAZ++Jx4UzvIktM1BVnO+KMkS189eSzaz+2K/wLcbrC8t3rtM4m8a59Drfm94+LDNC4HR+VhNN9updfyxA4R9+ENY+CA1zhL7lXILNaiHYClntI8nrTKmz7sA5YgH3AG/rs3Ppj7YzbNPdjwVrOKOhiXE24K9HYXB6MLYGqKLK3ktYHfsYWt4n7xd3nEjFTtrP+YRZIlGNOIfWSYQpAq+y/kVqbO1r3Ra8jTRFCbBPgLurqwmDntMiFLY4GqX01BO4XscFabuEgRT30Ij/xvieTNyrXhOkOHjTZAslX3CAuwOAH9xoWV5YftTAcVtSzxItxw1byTYyvF40N0QFPcLHyRbuoPImoeCgkrqLjYNxtkHhbnrnoTqyp8+Cv4i2BBqa0vmjhiF0UmCmJS8LzoJqTAOuN9Md6a7JPMyixpapq+I0xIHBzBit2zI5xYnExXwadf6T48S//Zlst73YSo5GiXZV2/PYW796ZWY1Vt38XrROJvnTo1rcogXIrkCcK2fjAV6FGk/BPNBuGMH/RsivzopryPakHNY7dY7JkAMrZDQ4LDvF5JhHwz94sgvjDHwXiNdN8MnwIICCbvpkTw3T+C1UoSbN4wGJre/nL92LRJVx8cd6JMI1vPFD7H7OELO9bGUVU5llNwqLTWnqRltRmU5P6qYUmk2l8sy8hutCr0aJZRHNMX0QQriRt4riES0Idu934UvxWFYk150sLjWlxTXYC0s1OpK+StAGgbjERxm32nwUM9kjeS9wruj2ZZ0+nb/fWV1YhuJnSJ1uUWmuiZ6uPM2e/OIFxflYcyH+2LG/rb1l12j5Uof+/zoM6E1okpO/g7sFgCemQHNeijnNpGvM83/AUdfwdpp37k7eLH5sK932EvFqLVjZSm92raV7nOkg6zsV20fE8k8g1YXxBe7Zgws/0Xk/8uV/TMuDHdqkzLJaS7vCIH/ClIijAIAWNxvH0eFFHjqBMc+StiYTdotc6R5XdGWOqRxxgN2+Vfk85/RC13x3E45JJMUQiBB5zsDzrCGsObzRnXMwMD8fWaC6GW3Uut1gPbkpY5Eu+mhbPB6LiiMGaHVguIlaSA8vJi7S3mS3z2o+LZPkjrPAn7n08vf6E/aBJYzwiyvBisd2EGTL9WAlsxoMdDCLAlX1yqN4PB5/DLCTZjAW4hD5W2RjQT6AcMc1SaRBB+CttTOizLrl2evXJ+bjVXOqPUzvf+JVNCt/yvtS6JrVtFUvJ7jEFkr5miJq7V7aWzHekZEfLCw3VJ1N4K2tR5fjAllAkDiawqg5bcHfeOfh1XXCQOZ9Ye9/okmq9a4yYYJc17rwNQGtQiFAGoJHbIzeifawJo9T1xvK1q3XVBRUEe3hKM0zcMBc2JQQ5Ggix0JPzarik2p14VtEb9xxuhN8xpM+D+RRNa86ga0YN9oNlCP2ZA9nIKraLysi/+5R798tiw+qi3vTevX1n7m/b8udhQH84GbBpPD/r6Yw9u4UQDPgFPWRj6zbSa5FBzBezDAx+lBccrzk1Ljp0ZfrzIfj3vPIu4z45QGTgRAZ9pFDD8o/jkPRT8X45BPjbsF67iqKT3CYs6NyXnY3JAIdksejqYPwR/zN/H0k11nWFOFjpkSAWsXewpoi2pgn370l/xVrNuEm3pqYx+K+xodDJEwM79GuOrK10PtMdf7BpGdY3fsEq4eooFc4R7Zyh5QfEApJ1wb/mYnFek21tNHeNmbXU/z18gfjf7bkA3e5VYyruvrk5EETvSa6cCQE6JV04Vzzc2TSO1wh4CLqpU9sXPEskbj68hUJNSh7W/oepWbmRRBb2O0F/7GxcjeSXeqfilcz5hcEfIPSpp9RoiDuSm6cjh+0Jr187/6CmZ+8fmNh+aUH+N8GEfRaMHS4Pfz0Zv4k2wq8erP70IVR/kSsQ0N/9/AOItCbIavLyjdeMBTp8lZGrMZcWNRhC6qPxrpjXf2V8UdVywn5nNLYBJJCWBIX5NbEKkc1FWjVhWp6CaOWVpw/EWgw3QWUwhnQJl8ATFXUa07ikdij2V7+ucbnr/2EBfDgqCbFVugYPeDN/ElLFKJLz4mJaMTy5RvLC3cf3hzCIXCniVWe3EqJ1lQSn1xmM5pqPv1stNit0ozg/ABt9v56nBuz6wxJ6xE8q+WsP0NgGWiMvmsx3A+SmXVS2U+3NLfc/HPLny8r5lGkkzcC6LCnGdBy3n2luZHhL0vRGWqK89t1ix8hmQdOkhPKc54TBHU76fEezGFFVc6zwhA5w1lG8zTlvRiG8Ye2mWm0gmk/1R9OVx8w4Sf9b2HyisM+Zhx7FwnGsbpBAU3HmzKTFlK4RI/4Cnt4hMI8uNS9vLxwgxCAyzkXL07LDfquc1ciaRcwmLTa1LQO/7D5CTK/J8PkyqvzTMNOJb1PEVwqWc1M9ehVBYkpyZFWOHeb2i8ESX9pqPeVKABN1t6/b3v1ZdmWGNHZGuE/ddQ9YlaVNNmVoZWE7IVTxNfEiaaiUnOrKiXdE6+wqZNyGncpRD51kq4m4O6MV12Fbn3D4L3HTVgUsa8Y4p275KZjQplF8YoQ6uueA6iHbZFyRn6HBtIU6UxlWV57U3tyRnZbhnWgutF6fHTkcZvvdWgPX0vl0H372NLnra2GwyrdwFF3W0H3po9Syp981oavS72htdduBAirBYdV1fa60hGdzdsx90lq1ZFPUq7Nl47v/MLZ0viWHhflrXqat/bMUtGCtOEyz6cW5ooXfpHChIWYo+xRkpVkgzZQHMGTWx/9cvgqc/AoMcH2s8h+Q2gz9H8S50ZtVdiyNghd+DSngGbeyg5dmZyfXF7unpX8QHd8qkuNHTDi69ZfFRxW/VF1MK/L4KrbUrkh78gbKdfmLZGFR/7a7r8CCGcX6jOZvQdw4JtE+hYea7+eYUAyw9ReuiPuBlHxx2UUsa/IgXwgdSFvMGKO7gj4iQUug1LttmeWKzqfYgweMWhe9gbBPYCuu9Jy0v7r/PNe3qqn+Wv3z4cXxulzs6gQLwR8zc+lrE6an3iUk2Db6w0WiHsWDPtLXPWx3zRQ2S2gbBeLgEI8WodPYEmAVu2wGIqgOH1QkmxNMeVVry4OqNXVaBcajPoKkSVIhMSFzH92Y3YByCMQWP0c1pkjS5HoCVovMpyCeiauR9BvlnV0Z6CY5HXr3sL2FbJF7fFstUeXsV2uNueEpJ2bOR3McC6vi4oRSSTLFEviDrZb6izMXJPh7stQuUmej5j96x7CSJyrPErvGPAts/k4cihtIi2tJw12EbThwsz+DHqrpASRukQ0P18+EUByylsoXsWe1h1+OSIkdzZwioUhBpxa/MU/wqHvPhUN/z1dTXo3ebTs34Rx4RbRf/1JmvoC+7dwuOIOG/rnyrXk6Ld+myIK6sxrg7+xgZ/pjNHndiQNa8aSLHFOzit6O1xxdrnAe62KqvbJeHN0RapOLMDcmV39UbKoeIu6Xzn7Mzue337br+r2hDYjlbVC9PrTXNP+WBCvel7zsUrBLtbl5etTFANfCxScPAPsVXMlnwrHHCNRfU1HDZbS30qE+1vhpDnfbJUj1BYh4Sb7QVevZPFQjGsLljY+TsPSF4GHSCw7WIKzGYkcYkUBJgoLK4VCB3TZgTvPKdU8E+5rxxp6cr/OdnLCXlx9bFNO7ki2foUlgr7gOJLehDU50hwdQCMl6MBKKIK7FH0RCBbpxwsRtnRLYUgP3PVfxvoptu4JH/CkPk5JxNYOF+rs2H/QVbvnUrzyUH4UlHfC02Npnj7yiePaePo3YMCCsD/S3K17Eol9FGqdOmc9/h6/NvktfkTQmTj/X2J6OGdZCMALMHweaP8+HEJKJW6UVLc060VBqhLkZgHpe2gW1YFIJR0iP1oEyS5zuQ8EwN+E4kbbM0ZQBl0NQunplUHJpFknMlVqiiClEbJFcne6QGWomxCMeM/ute8cGe3fEoqMPpa0vVTLL030pIwA0umKdWZBXTO8WrLRWpW6pXRvr73Adrm1JuGkZ0tVf6QIeAiMuMNOyVqMid6DlybSa6p//OF4fdpm9PaJiX/WJSZoFNx9pez3iWtLr7nj/1ANhFQXHtp/qazv/o7TQh5Axsqa4/DUns/V1v7qjMLSZLbttmCCbGFWiRaE+6gBgNoTAg2IGzbcpezqnJwOTYgM+KlF3KkdxmJTA71hQFOL5DZf/UUudwPRLKKSSG/SXTlqvDx5ueLfbi5uhUxxizdOhimw5IT4IrnoupfwwYWXAQLB1SJ5TvrGXudYqqhaJ6jQCMt5JBvYVLEnZ6W/iTsjOxZ3czveuaoeYXhSen3B0SHLf5PX9gIvujBuEKG5zRfDKTTXe/0xDpbNv5FpPuhDliPPseD902xLTgTz0Lx7M/eEIL0rNbUunWRlriZYvylIVs0czp3Q39KHNNGmr75aePr20vLy/PXyQ273xS8guYQw0WI24yelOFK3vp1my1v0+8Lx5fE4voj/XgBHz9/sWr2+JjfBYZp+bs9bJz9zX3S7D7WkjadGG8IEs9lMsJj/ScjKKiNm7fiFpB+DI2HcO2rTl97u8sXIdwUmFa+G/78AJV7LGOrFVxfu1M3dVsvvvN5nF36Mvu1zm6U+VtMWQP+n7sCe0IOxogdRnpBG01A9jaTu3cHjrS0UR8wM0eF1JVd4kgHB5VOte6SqzjeRThyWnthl1vV0MGXjW7c3tZzcCRMwNKbkATRMbkIn41TVmRL3/iOQBvZt3nBmb+dz5TnlOR/DTVXTqZ++ldiblaPpvfXZuvSqBCeLllnq5Cvz7R5TnCboz1vf2nAVxZD66U89bT5pFY0GNLktSdm2gi6lLX9rwkDQOVTg4FoxQe0HKefu0xKK1Wm2BM7z73xMtpVq4gsMxvhIfn4+4mdu8zQMpTt1BfHFRZVvwJBUHZHHXlQT0T4JAY0C0AQ0C0YAXxJDgEil9cSGQ0/gI5n7VlcWjCrOsp0ENzcMlAVTJU3/sfsRpWl7+DXeyEaf0atTy31Wa1idrSpiVH0gely0i+J+k73ydDMxxy535ovO01UFgscS+4s/FdJWgfQvPvr+R8hoKbIz/3VQDMEqL0uZVpSUiSFgFCM4QT2N8ZsmSL3/MzkxyerFv3UNSk7JL1eLGn7uMCb9/PEnHZda/19pFGZUqk0ltoD2oN6hd20pC8MFmYoGuNGxWNEyAWcFs5vhwqbEgRSnptLgCKtvgQLOeDIFtfkV4walwWFPF3emlxcm60SnYgkAqoKHJWUDtP9CbjBfKCbTyjCFDr6wsKhg8Z/HxK2ltfb4fRpLonk6WJ3hTpHXZIUsu2LYgxnDpw9qh4xmdakuu0z2HdsLyHMW+Ilw3k/fbm5l5rFKGaWRX6Q15GoVj7jr4sObCQziNjpDT8C4KmJt/K879WO5ZZuJKE6QxyvmJZZlFYK3emfDP2QpSoktiipZRYzQPDFhPecGi+i+VkKsJhjvvDqlnJpUr1KJGtkdK9qI5dnnmJiZT35YiiNE7j6Q0B/Rn+NyIPMHdDN9lrzIdG0dojvorjd18yHSvH8BQwFwFABHxz8yOYaxkUl2LodTwJIXzZsXbglHnglTbXWBt/4yZJhNgoGGxARDD0/y5zmBTfKrPut/QuEVdszmXD87ovmBM0F2QFvJ3p0kigfaRLZT84UnoP0jjPqSYnrbcRLMXNEG1uwkJY26kye83ucLf3zrdck8WLqTQy3hHxplBJuKmfuK2xrk6daOSJHqgHt9Y/1PogwIy8NUI9FcjLn2Uqo7g4wB0NsSSCRtE46eJjFfizFDoyp2QT4Bcp1Y162RVBR3f0tgkUgZYhw5dKe/btUvZdrNKQ1zcihd1XjCah2gT0P0oKlB8kZCBlWniOB19sgfW1d9U3/4g+WpV8TaXyOEbw1Mf7JRWm8O3IScQ/LnAtz9NA6XP8WL7RY6JMInnY87azVj+UZXHM85N8EepvNm43iuv4VGlzpeY89LPd/79tA0Lba+25WRgyMDgAC3SUxkITHiFpD0povJWQ/h04K5yQnl+bA400lyAYhsb7qsLhvUP35DIV8jIei5RZxNHJhtkrhKepvtmUqAV8VZoUkXgbzfgrLtcw6YiLGkQ/5EUsysxifCMfABxh4Bu+qL4vz4CmctSrTSKigTzBRvkbsWYTJWK5yA8Rg9gcTwpMJprjKxPr8dqsosjX9ZDHHjVbShLAePJ1oAaVM4Sgim4PFgF+utt7bhw5e7iDQhhQLgMQisSA5B+hVAN3VTPZVVJQqRsTFsv9MtcdH8ejyGAZOwQmDIgO98SZkc+mNaFlqfpv/KfOP1f1879J+KDjmPWJJix2d5hUyfAUfrYmezG72E7K5otKajyqfC5+eSWBNGSA5xpBAkg+5eeBcK8ngB7rrQndDmEBnu3TtSjyWFeDhaFwENgU7jkg3YS/Z27aLrESy0JwYD6EFNNUIgGBGhO94I4SQcC741dKb55tBO8qn9964u5ebljBZKOucyhGN6OKqjlWVNQkMmS3R51eXCs7UzbdvBIQK+EDhxrIxcGJHkoyT1Xp5LuOuhBe04pa1HJcbOsojzbJJgTWhOKVYuLcGiuv3EwMrQLEeAo4ScZ/enSB7om283gqLr2U6shz0n5cV6McFXmAWDycv85/56WSd/0NAPxZikykOn+L5hD+wJ3Rkbe0g5IDlwPHiikT1DaHIne56bXwUz4Frxz/dQS+Oh3jd8S9GEPEj+TgZWP3k2XBQQ4F3NOBDLmjOGOTqO78G9pxwfFyricIugm6Hl0OSRW/1YckiAp3XhEFyRPyc0y5QjaNGDlFNcUlJM7XUhZZ5DSVQuP/At7f36JXA5gro8mmxL1wkGrw+SyefnkUWVkcNWz3+La6qyxMx0GQFkXLmf9vBzszQreLPsBqNsFlVUhHQhZ48yC7ssfQbui9UmB0ZBYBIbWE7zIV+IgoP0jMdFzntiB3L2O5YnnLshQTJSwVZ13PtRUeUukPdXVtLPO0hNLEZ9b7RE3ELPX80hoFOLbupsWUWZJmWnJVyaZYglxzjjTMKWtAp/KjHvsOqEzjpA9/Xr7Hndke1pZQto4NG2oYdnOg5llP7oiFXH/qnnSDCJWtMrilKS7Jn+jDxlvtbmX/lja63opQEeN8zljoxALOJWvujSWh43xOWuHOEx/1Rx71V1r1T+eaL+oZmsTUA7lr2sMdwVxx4xjV9Xr5BJntKaP2Yk8pZYt2U1v2G6mP1qFc3fSK9OapajPIUvAn4lhoRh4Ok4GeNvhWJgD8aKF2bkvPEbX/ArtaH5dWNp0oD8nVfvjWc4dxkPdt2hZ22C6WbLBcsK67H6yaw+wwvp0Guz+mSzRpthS08+lSj5bfYm6ACd3sLhdtDB9tycba9m2RFzV9V9ruS4z8VhWEbeG4FjVusao7FBDh/OsaaouFuhYAzTi05JvQRzeGosAd0npi1sxzPysDYMJ3uEb3nzWTMOVYIlXvj2z54WoaRdzs7+5s9GsTRl/JLl7CVrP5epL8WeWuRevscoXS9gvw0BWu7599D9sQLvqyb3/GgmOGRS+pkNiq1CHxSwPR0MH5H1uLvnmNJ/1Talva4f+G+DvtyZoULMz4yNvNklqpULdTDo7ZpFahdGu9o7DsQt9at/jcvuHxhfGhd3Q7yKvFgCSuWDAgE0AIbM84grPzVXxdwnxBbs6IfBWbnCshJyfMOz1Rm5fr4nR41QoF9PBKeuY0O256z8hLc95UFWFsXK9oI6p99GR3oY6Kd65pOqMcNdTl5roe9zzKc3P3eN2Fm0t//0BhZ+Q2DhXy5YTDbNWRT6qYWBq76nNXDVa60MXPVsZYGrDnXB+RT2Orq+/44uebq4crdEm8tyfhaVO/m6We6RZW6qsMgoG46BHvib5aJU6zSNQVQabRUzMsfKJ83I68R3vihIBFuX2K6p6Qrb0Q/df0xPj5V/+0cdq12qCo5vg+zxTfwpToG7Lx3pcgPqVKT+vkDqrwik/nInpVZBXQGxR4xyBWSlTFEo8M64gtxW+9VVtEgLNXJVmY4ZMzAF/pPyOCkAtaQDbGyLrmS2tHZf4HJsVfSBsli0ohpD6VGb6rndJZudb+tbqXY/17a0BigLcitnpc6fSl3flLo/L/V8UFKMLfXq5cCnCD4/PDxVq3uDNxYUxN0vDBqd4B1gABD8PqjegiNfSBYN9Weh/YTSbv9JaZl1qd2vqhyqxKZNVoV7YTVVHk4a+brNn/3N7x52DSibJiDRxv6Iutr3cqw3Cqr9ycwqMWt/kzBpFMVPN1rR35HrwvT+/pv9IbqLiXSGIklf7I9JuhBPvXhkiMm+KGobt8kjfoucDxT/m47uv/nTfOHMuuGTiyKGtTOMdGQ6WJQ696i6H6Nz7Y/CenIZJsb3vGeGLP/rEA0UJyp97lAK9X3YVqPWnUSa/Xh0fPt945RDCtmoZofpqjxX8T7yDlGbbV++wmmvM8wR/BjKRgq6s50PWeXuijd5k3ltb3tyMco50O5fU9IzCL/uKW8ZxGF6tSay1jXNcbIoXa0uiTf4plUjF7xEyO81sU1e4mkVbebI5ACCPwPw5/bIs0la7bHpHlIc1lCDZl3oI+pnIMAJJKaAeDbalLnH5bXeK+HnR7SJr0Jc0KXPucR/nPdl4JyvCbO9FZo47C1VQx+Dh/mcAAJvkDiFbOmwg/4qjaiYN3us3aRJhGm4/6I8v2E9EI2yJRhoOIJcGfEEunCo2xe1HreHv/WZsB8xnbhUZ0kro4vdyKs9NstSk+szGCfMlhqBGWby0wp2Bo7VLnAcj8v2vOMIS7736ARmMj/XubR7c1SxOw5NOv9jpZeyRmr2bqRWsIqrnp7tkxYpI6ihTyUS4gJ3m2HWGkmKphTcWi2m49J3Ta1xr13cLU7whBCD9pRYHxA/hzTjxOG9wsx3Ge1Fm7m/to48kv6K/PycNhH3dOnzIh7XrcoCEEz2ZtqcNLTwcPJXps/n9R5rn9xPTEMwfHCr2vWvYKo6aTxeA+72MBvsfbTh3alfvpthu09ttYIe9nxxhDzqGPrICb7HTqGV3gHZGQE3ub3teyR3ejuZGNQgv+0ddJ+9A+DPtotwxCMUHiL0z7fYlyMcYynuHodlXntXHzFz0D6HRcI2blte7W1fiqcfMuXyrsUJHNYhBrpeRb/VD0DCtK+YHGAA0MqZHzds76ejpcvlTjxSSTTiKBuQmAA4IwV8MVWTxplbe1Vh0IvW33/pzo4DKBPTSEqYqU0VQ2ZtczmetQb1QYA5htA872CRmHzIf4J+ntEJgKYeBT2zHzETgPtw/+jwYNnshZ5kyQ/gDbH2pkvtzVwOfV3z0bC6Ar6padU7BaCMc2iLRqDXAzOhMIQp5BqAYZXhdrFCVfFdmzqiM5WT07xTQhvbybS/Ekn3ER/xkUrUMg29HsKViJi2TEu7malCLl1dgBelT7vLAQ6nAreHUweGN7Ny5vR4Va2GdSXkbv/CwumUy2vE1TtDkEASz3gMOyjHesxdysxqI5kpYRYuQ+ugXI7J9skT3rmUrxPPgqZGnD9ujsfD0Hdty+iUcQ7PlcBiGRco/mWMu++Qw8ZizOVujzkA4WfnMcA/NxXdvCn1s71h1hVkG1kd6tqoz4TIj+EZLFqB28OqA4A43f7eapGcpqdlKcj9EH/gUt3Z10ZqhhKGqoLkNVqiSXjRwLIfM81cXWuUC+vTnBp5tJVxDa89eKxTJpR0D5twgKOFHQCwbOCl6i6F2cALe3vuwkqTiTJa4K7eI8fsr6WdK7bHpXDfQuotEEWZBs6T4907JvtBbzdyZhz24QpeIeqFW+Gbf6WB85UJF2r9LsEOsb8QkmZG82bXNep0NDO1zu8QDCZRff0l0rSSaWyeCv0FIoYEdZkwWEz9Xj7ReFrVQnBRRSHHCyHmPKAjK/cBFoZYVgXBqNpgbqmtne6465gOK74LgZevWCYX45EZwaNUvZ4kEGW82CG0vjLnHy/KwiDPNM4d+0BAxAKZaYIQTdNkz5RRsS9YlGLvr4yOtT4jjbF8XeU2g47/5p94rgoAlR2Gpl26aajIweTqSkc8KvJ55kohz+YLMpDxZh29IVAc+Ib0c3V0Qs7jQvnfc41Zx4eL+V49rfI0GgQulfOajwabj1nfDflqvkbfKt+MnyDnHwAdoTr6rkw1dEC+MSod6tkfiLkQwF/7Rw2dkQjwO8VIiuqH3vXnOM6uV1c98F3xTfflBlwQ7ne53p3H4gklg8T1vBPt7TzwLwfCYWv8v29H9FYChH6PK/tR6T5Q+GrsXHPF8Ab0D2ymlfZ3QU5ZtAT3FQzVEZJMrJQJK8NmbZaAbwrXxX+Ju7mlMTOfZUqmWg1kfmDsVVHY9eWE+3g/YdCfTN7DjVzcG6ZwB+8MH45/mtiTBRrtsYpFb2cj5/7zoI6LrIq2VhpYpgOvAKD3Y6vnZDTju2C07vZlImlDmiQu9ogpz2j9D2VQ2MOhbbAvfqglSLgz9al525cTTwI9Dt12jzZ/w0nNvFoxwX4qhMuMKoCrcHlcuxMRpXinaL62PjLgEcv9jT3cuNw6QX3CPaZECKMvkBxabICNGDcFS7phljHZTKKsMhtuhSQ+wok4Ci0jOSdcwAsZlmBOFwmQyUoQgw5Cc9c4bdOUD3On087164QxPHeYx81aB/tJ7BZ87vTeu6KIXYeEEBBDGBJP1YGrnmwpHAqqLbWbktowbQGmOUiTXjewTbWSNCDZJGutJtMKwzRoCfLeBZIMHiPRvYeKLRHiZB41ceO7pl4p+ViskEOBX/zekxVe6TsRSxTCFQu7MkZuafxaTgccZb3Z9I4VrsynR7OjIo8m8cTUb7h0VhjjSecwpAfDuQQiiCMihHLoyggAmwX0ok5EfQDYDYO8m0MHOqOhKeNQQ9J5j/AXFTQsvt1Iip1A9xnFG4Q0XCkHnhocCHFUchfg8EYMIWIjAOZq7OovfuUIzzEQ5A865B9uDDKzMfWl/fAHtzeX5wf7kdCDifhiGJ/dPZUeI8n+apZYPknaF5IQQ2Hqa4WvbJoMWisA1zxrLKhJpSMCnsPnMQukQpCTK0QiFqstFOlVgqlIz/XOZU+auWKhuAXqjweCF7fEKalXVV4C5VSUP7wxuG6cnTXc/GJJQeDP0cCx//iH3//uO89fPG6uDpu9epgMeoFvM4cpy2y/B6J7ENUl4KDVtd72/shMQ8rPPrCoCQlCM7UUZLSCBuACnC7zsF8JRfiNju/tKyQOAkMjdSwlfjRNpO3l8TogcBz4yiV8yysRwnt+zYsmsrT6cTl1RBV11/q0TVMrFylwFs/mAnH5lYBJ9aHy/xXb5X2eiczEMdwhhRU2OhHXvCqrURYiZ1Q3lk5N3QglC6CBxqxkImdjkxYxAE4KnDtDYSzMpn8B9uLAhgaqq4Ep7ZXEWRWDLuWuWGfApwFd/izbABrbje11x7agjsqx3MJ23dNpdlocnS4AGvKU/d61KYViezw+fwfzcvpITV7Z4vR3ZRo6sEb1jWYP6qgmQGItos/P/sLkipN2wDA9LOoFb63SWIP1DDMouG8AhBbWXlJX41EqxPZ4/WY09G+UqeWdkhCZYXsrzwZVWI3Gnj5TxiGZzgZ5E9pqJx2dUUN1LYtXiO1x9pvBWJYDCL57s/GOZeX7gpcvcwY9Rg1i6iGCUkYTm0VnZmBotWqlXCpyKmOQ100M9AH+XNpvmGb7Yjz9cLePMVgz8lMoxBol8le7/ciUnolpK8vbZZncPmTrVTpqwiRK8k3msMyOSbVZDmu1ds3Cv7LNoeRWGoeshY0FHyRQharj1s2gEews+IRnmEVfZqks8pKi4IkiG8/3GtPml7jCqdyuV6l+23yiEwpOUcuMoGnYhhSu43kb0MxBrSmj562pLeCwcQO5Qh5TQtlK5TneZjto4Tbqog9tIczgdEVSY+GCi5fPIzSqqDawbC+SYbVhF07yqKxnUcAKzV+5dnPWfLZHKZdLTm4TGnP5W4bsVjjH9a3nLp1AU2i+a1VLh81n205uzkvfB7IZBnQUsPcXFUv//a+//fUvf/7jH37z61/94ic/fP7q4f56c3nhuaZP6cLKHGmnt2uFVoIaZoH6vw4PBo5T6/bpL3fMytKiupcngsaKFBvP/MRtG3LXYnsLtm0RDFoCyTQb98iROr0ebpBFwvUBJgVlbDIR3SYyBchM60OP0JYRAivEHpt2rkZzoFFz6GmdgURdYFlBRojExV05731w/00R1tk7A2MiqP+30gI98Brao6eHuU2MOa8FxNWiQKBZzkN8ybO0n7mE4Chhc1rHKQfTgJUtIYBYiXbLBIe30vxZ9DJMjPlENwaKXCl4rVJhg7UxNhfMpsDLIAxibB/4Jr47KjTo8n3eOsGzd9rSCxZRUHvXWs55LQqHpn3fZpOoMh+WJw2fEOj2ST5SozHledvxoIba6qCoKf0wO1NM9kQiPVgnDBuOYvCp5lXLMHYSJKKE0lQpPMVRyBBzkB2IGYCyzeVKNnKsOoHJ2Erl3Sirr1kAuMEX7Q8qJiFjkZMdemE/Ysaa3V6z7Xo7q0ZVKeeNXrD5kUItFNt0Xb044swfRUrmQy2qDtMiws4C3KS/uCWDlmTpKNVPzpWrX9PuS2cVu3iGZygyYglhCqMSamwCq960nGSPfX/OIA+152cV7t6e3y7m9Tjs+66h7TaRrLFniiRZn5NkRB1bZzCxBXOA5vcv2bzvNfoNJ7HB3FzzT2+t15CauFNTaSUwiO11Vjq5pdVbuo/D1vBZGR4Hjmr6XDiIGzu/boQlZaqnJPoUskn68kgnhmnSC5pu4A0Ksau2vtk+2udz4pHhRTWHsMT4RMqWPkJY0BbkMl3ZFzEFaBLvU6EoRXihbMkfs0hLutn5iJ58Y1E1pg7ii7Xz00UzfqweBz2npOVe1+hKODwX03ubxO03O1frXAhHpKiEkGzpT3jIP5poUL5rACSdwGJwrGKLyXxJNzWO6Ck25l1eIO5/7/J7J0dx2PXbBVrYKsZy0a88qUR8LQ4NR1F8etknMehA64PwgC+BLqeWIHPZUcJMjp3iGBPhMzz8xcXT9VUznVR+ISZbF1wBrkDTkkEhpB9BA18+i6I3d04nVh19vdmVE+qsp9EYWphEZM9ogvA+wxb0j1t1Ua/SzNUy4ti9q2HVWZLDPCW5ZRCiMIjrmW6dynqFbaOFU6sYj7MZ0wE85vHyeVPnWQhT8Xq5mJVRKBpvdKx2RALFGcqJxXkQBizTkwHRY5CZls5vr8+3F9tpVcR8s5mlLIjDRuRgRfKDc9zHFgJCN/BTutevnZVjwEli6oemjsIJ14X200dF4ukqqUdS4WNBxdNFvKCmgCye0jJZEeekFDMiOiOoVDBLnSWeKTw4Pz1ZNrPxKM+SXuBStVIupcAX8kV6plvRtmnaJ+2OGcJKbSjsijkJBbGgQKkoRTYGBMCjFA7cKqUNiO53p/3m6HtXiVkUeb5t551T7Fk47Mj6vifYwKOFJLnzgFDgjgNSMZx59mB/tZjXs41lfiMn6jFN0XZIXVpe8n8Rhv41nykxkB2L2sK/A/3YE7fjhokrekr4wCKeTYy/ENgXbhLV8g6bARkFgYl+8ABuwI3fTaulI+WNHuv5KH4H0SSiBeUnbmJ710WE014ACjLAOSHOLFnwCy3lnMaklKcxc8rP2jPAwSqbT0dpN/Bcx9ZRR/VKWXZO6VLN0gAZk8GFOR7h4yTLifJ45mA/7HmmoRRuaJNWTodiS8FGQ5h+sE2oc6uHy3TjV65adGT4p2yn0AgnFhFzRJ7cJL2VWcDI8ULZhHEz85KefGMu4OnGZn15drqCK3BlOhrt2+3chZaBmY9E7G8Pi2c2zLT52QEm2EKro+11NsatxKiUpz47dmlX7kCiijJ0mY8hXJjFnv6YcP0h1GkNziEy7M0j+4d+BfYHcDi2kxIoa5yue/ajt0X2gkbGM+v7DF4/TuAaFo5lmPXP0OPMfp3I9sI0vlgBcpezVc+FkBwLIrwY3O62GafxmK5YgpChvCjejIIE+y/LCIgQY9Ek//WmsylTn1maXO1ku0onN3q4Pz1BPD+6/97D967Yyd3p3aIZF6mN1orbHltqVdSX2+1DS1eJtqms1dZyoMJKsqNFEymUxWcT3tsCTNh7te0tP7DCzYRhJNxVbab2Lq9YaqfeyYEqq8PgE073N3VYEMWErmESZaUZ1WnQrhRhAe7NbWk6lWCVgobul7J/OXpNB1iH9VyRjhQSCsZkmff5kCq5cbD59VZwZcSGJA/nwhg/7yzznY67tqM0NWzgRgerPGADHd75zueCblHcRxDvQjhz1sHX/VVVCb0vYB57qNB3ycOhzPWAYTM9tgmbw9NSnD9STr8aRWpAAPCwv1fPD0WtesA/Xp14BQC033ZZAwBQvvz+oOXukvueYgAoGAAAAmGOWOTlTG1XDwXk7OX9uTZhn9P39nDGkKqnHjtVdmATvacuQ+Y6ahkLK3r3kvmCfa7A9qj9jk6S+vfcJphxhlt5N/U+VHR33mPGT1V+xhcfy0y7ZeeCSg3Mcg0yJ+All0nZixmZbRr+NRG7bL0+ZxMf/WadhAXv+XUZljoMAjALQ3XvwaAjTx55F2DApZBF9hvSEGZRYBsB0WkHpQ5O6tHLHRwzgEfGMLIo0MlrhGm/+1uOqBdAZi+X4AQiylnsI8PVXcCSW9tP7reB94WvEwq0OwI4Yar+ylJd8gLJuYixTvyYYJ+DxFUpjmVz3/zPLBHQvZKNXW2xXm2y+upNwCGx911DLKKJdoLRje+9Y6g9tfGeuJboyBCpk6BOdFpxSDO8sMEs6kBmP1Fisd9114tT6aOTW0zJRfQqmIAyIqQ7QokPUv2k5wud3MA7x/HJFXSjwCGrAfQOlzy6+8bgnzAi0otesnGLFH5oqATAz0z0sx+LyIiKjKKcvC81QwyAT4hDzHjSYc/Pv7OJMnfFXW4GvxiNZCpSWC7CLca8VgHfAATgswoMMzFgtiRWAFg8kAskBIAlEwH12ABwIF7VXIQXW3BgNJfg4cVckqlHcxnKSYSKBV7C8xlAtvJzZbEyflyW3dvTlMpRjLqMc5IjH6TIS1YubzShOKFSFC4lQ7WXcSKW4a9eIV+KUuMKyemYuBDNjTM+V6780bqyTCkq7lmRbDl5KTfaVmXizGfCo9KbE0/pu6ey4y9LpvT4IvnKTOaK4qseyR3fVGMWQl9fuySgUmg8ybMEAPlcITkjLBwYowYlIws/ACi6hmiSDc4oaI4uwlCR3KWRJm2EwNezDW0qb+uJziw5RahCqvfSFCkQyIiLvHwZMvElfnpIF6m6ngA72Nkl+RmAlcfB8FCq49KcIDOKtXQ2XrOV4ZE69eyClV2+QaMmzaHhnHa+TG5atMrSbrWTTnH3nkfQOFPJdcjWyZcfJwd4K1C4wnknLVehArtEECoS6Y0oxWb7S0Ky2X2cLuUqVYWACvEhQ82ZKlE1sRrTTMfzttsMp43xgcRY4ywx3gQzzTbHrKB0tvfOFVNtt4N2yDs0YJxL1piJa7765nsYiEJMIMJCbNCkbiRTR5H2srDHXYvCYD1vweGgEaDhjLNCjcAllSyIwD33w6wNHXYE/0DdxMBhiW2xhZZZarl5krwy33XMcGGBDVEDno+GXUIzZ2atFPuEhAesqCMNNdVSWx111VNfAw010lgTR2qqmbTmWmipFSuFWaFbvx4KWAYAc11PQ38DoUXbHo20B/1eXF9ni95oSi2vp7ek+4xVpiXMepTVz/4dv/2RwM5J68fDag7yPwX/2TeG+VP04LjXaDQk746W1zPp02ZNJTT1hPsbItGOOkI40tebKWK/kT4HM6G3pb0+XzmJ0hyNtoXroq1i5Ppob4DhOYddxlRyJ6QfAeoJXSfdqMRP1pWXN0sRzQFqH/LEYlKA0Ru1aQzdoFzpBmPqLmaFpz/wP+tfkf+ZuIRhcEx3+wr58TtsEJxZLfkZ842SytneQ9JJU5Ue/8sPPUCoGFTZGx6yrPhfMOCL1yH+LbHshU3/MENvhTL8UUaSgi+s91pk/LP8qFyq6fhN8JNwtuN3KWkl1c/8gv//mfv36bjUd+FtgC82AAA=)
+    format("woff2");
+}
+
+@font-face {
+  font-family: "Bodoni Moda";
+  font-style: normal;
+  font-weight: 400;
+  font-display: block;
+  src: url(data:font/woff2;base64,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)
+    format("woff2");
+}
+
+@font-face {
+  font-family: "Bodoni Moda";
+  font-style: normal;
+  font-weight: 700;
+  font-display: block;
+  src: url(data:font/woff2;base64,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)
+    format("woff2");
+}
+
+@font-face {
+  font-family: "Caveat";
+  font-style: normal;
+  font-weight: 400;
+  font-display: block;
+  src: url(data:font/woff2;base64,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)
+    format("woff2");
+}
+
+@font-face {
+  font-family: "Caveat";
+  font-style: normal;
+  font-weight: 700;
+  font-display: block;
+  src: url(data:font/woff2;base64,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)
+    format("woff2");
+}
+
+@font-face {
+  font-family: "Chakra Petch";
+  font-style: normal;
+  font-weight: 500;
+  font-display: block;
+  src: url(data:font/woff2;base64,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)
+    format("woff2");
+}
+
+@font-face {
+  font-family: "Chakra Petch";
+  font-style: normal;
+  font-weight: 700;
+  font-display: block;
+  src: url(data:font/woff2;base64,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)
+    format("woff2");
+}
+
+@font-face {
+  font-family: "Cinzel";
+  font-style: normal;
+  font-weight: 400;
+  font-display: block;
+  src: url(data:font/woff2;base64,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)
+    format("woff2");
+}
+
+@font-face {
+  font-family: "Cinzel";
+  font-style: normal;
+  font-weight: 700;
+  font-display: block;
+  src: url(data:font/woff2;base64,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)
+    format("woff2");
+}
+
+@font-face {
+  font-family: "Cormorant Garamond";
+  font-style: normal;
+  font-weight: 400;
+  font-display: block;
+  src: url(data:font/woff2;base64,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)
+    format("woff2");
+}
+
+@font-face {
+  font-family: "Cormorant Garamond";
+  font-style: normal;
+  font-weight: 700;
+  font-display: block;
+  src: url(data:font/woff2;base64,d09GMgABAAAAAFdEABAAAAABLJAAAFbfAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAGoNiG7sKHJNMBmA/U1RBVEQAhTARCAqD0kSC8CkLhWwAATYCJAOLVAQgBYUgB5NBDAcbcvclbJtGzaA7wHkhy9N+TqabO+V2KG1Kg4VZCGwcIIB2Jcj+/2tyY4iIHbSqfeOCDElwVc8Z3Ks0Q6/Y+xR0GqtD7w6lWo4bwmEbJnV/zhVElH1sIkHKPool5ngSTdcwQ0yJk9h8jvuPP5LIa4jYzBAUv2iioNEfHqb0xXvDGjHpGdg28ic5Sd6f5+f259x739v2NnrAGAMmjoF8JIwZTZlFC2NUCIiNRZTYWFiIVXzEwkgircJu/m/o+X6//+y1zx0Ep8YBGoMkf40H1BhQbGRSPkrFx6XmDdB0dpJUkrQRv+SSi1sbqcQb0apBBakYFCnqxW3aDbOJMQXGEB82Z8Z+ojz/kCf+lzSlWkFqVIH5bgI+CRVz4ex5+/BUFAoVOkb4LOqyxSXJUnzgpKkC6Bw4B1jEYXmY1p/+cM44sHTo3pgOWDLqAiaFG9xIu/eX98A44FE0+TR6tPNREnWe/CiJokHE199e8VFyXDf+PRHJvJlaNmUN3/Dvpr3ceV45jWCbU7WJ2Xt5QFooZR07EeG3/CYE2ZxQwcd1WOuTmqT0/3hYPxlj3I/RlED1Fgxq6a+EhQUtfr/290zTIZ4gRCKRevoXlxD1bZ2pD/VQThpRO8fgnLWzO/sgzAv/Rr0kUHZnW5ukOE6b0gCzrRlz4P/WUpufuT2Y4GVDjkG4uXVXW6H6akxubgNzP1NKeBN2gFeGTcsOnwd2tYggbGprGf751l5tZm8I9hX3tyxzqla4QNG4Ghmg3Ree0iSqksG1KrUsPAtJjsipGlMhq5zrlallOgPQAOQb4p3nR9alZ0kZ42IF0aJ3gXVYmAXvjgR4fyTur3Qk39Cc4Rl9YbHYGS4AkuCS74ynOcf3PBlrI2dMZE2sWmRvXKxMQaZQ8SuSUuOySKFChQoVBoJ/nnvnfwYckHXfbYxFE7wTSCZjmpcEqOsLjq64ANG/7fu0o/foy7sk270Hy9bYidipDCJTEXMsh3l/tf+P/fxo2nbs/X7t99oSAUUFBfxxFcp0WZnTrJWSYhXIhIp9aRWCx7+zct9KQCRlAMYA/+bOMhz866eP2rW55qT9ypRYLM1PyaKFmWYcf4MRRIBAAJWuIBCDnTsqKsVOGaCUQalwvREu4O2TUJ1uBp9smeBt6wIvbekw0qYBH3AkjiO/fodgW3f4JucykB5Hy7aQkcX7Rti2mQ7TG5cIcgwmGX5VbdyS5iDUJnS3jB54CD0XeiX0oYw++wp1jMz5X/5uBEgMOYlQJAEFudLInUFD+TRKRGPENE5Kk5TKODm9CVGIAFABkCFIpH9HgI9N0B4LsekBBEOlXtOld8wU0N59pyWC9uE1KgGUz6yMZNBi4DGgZBqxHhf6Pf2mJYPL31QzqJ5HYTcgB0DwRJ4ZCYrhkIS+fuITbte7h0Jz1QBkMzDHM4UECA+pGgwP3iLDc6OlpiRnDG1dGXSkzuTyGENZuwMFj3U7N4BaT62ELABajk64Ulzpm2htRl8vJo8DieHBg9MODxqSMa1ehJ0ADjo8csleJRaIF8BfL44Io3acXS0V0DMXWUHdZ7YGTTzbQiKYpqAqzatwkgytSBNuF8PFm/LanK6bAvcGjZfrGbKVuLmcovMwqBNkdcRAuhXXQeP8Nrd9V0a79TPTksOkt7mGN0kxtVl0xdCcg9afEFWS99jD1enp4f0eeylFtGj96b021crly2QwyVDuEHzw6XIg4xTEAKBBDAAaxACgIAYADdwABaDADkIPFlKwQpBrCmjgBiigwA24AQoocAMU0CAGAA3sIPhAg3ciBzEKQdO2dG2VqhxX7aRTzqhx1jnnXXDRFRIhWjFwbNm3aTtpJ52UjLxu3O7bHjJuurVXcvmFEEutrvouuMxLvXjokNFwYRdwk2BMgv8Nvf4Zrac/5Ylz8o91lBMLwupgOPhZf/a9j73uaQ9IV0m3aqlud5eqqbqj7a+CfGrH293WNrSa0+iK6WC5LW5e38soudj01cFCmtaERuXb4OyZK5sdtAnysJCDMcqFs2AI+leHr96/J32p3T03NDldiWs42IX0Tqv6qQ67YG+vq9pyZcBS8F+Zm2X19RSDtbB/VVbKlmWONIkli1YoXJApaSWM4G2lgfKc50ntGA0Boy8o0JCgDAjA/37u835qz/vWvd3zPdqdta1hV3ZuJ1e5g33c7qe9Zj5ou/q0StNed24kt/LdTjR0mqzG9fZG3HPGXKs9ItdtKr050LJfPLNOx6xOxp05juP6qtRvlH8ptvM3V1Qh2SsZ1WKYHWF+POafDGhwoxK7Yxf4Fpd6jxW7h6PJcrr64Dtj1t6pvLNHBRgyNtqyXW4A/gH0F1j35zrHvCIdnWuVO1TNRqKY5deMzHSxKDvbpcILiLRMeR7vQFc1zgEXsHDepHxRWmrv3Ma0xxDeznUyGotgSGX3ImHOcrWFVBGRO3nHyFqNh9V6AJ1QH4x4s1f9HES4qIn7OV8XK/zcILJuCGaPK3sBMnOgw+QK67WI/OgFYV4X2Qtg/Sw4BewxxMtdZPmIRU12KNoJHj3Vp6HLkfpAcHQA8ZIRrnbVXflkrrMzWQ+Z/iP2LjXCBpoOlmCevvjiCJX8ThXHOcFJTnGas5zjAhe5zBWuhtpTnurzgUaaaKbF1xdAlfcYBgZd8AyuQfM+eyiwLVCZ+D5kuMhwCsOOuy7c5lnTPrmSJ4Hu1Cdj43P+9P1290evPR34+vAHbmnpX+eSGtUtR9v2D19x6VYbrFbsns61GPrPkyFZ7KV6l7zWUlYtnqtLbu13HULSNBP6W4uN4mswO06Zacnn+2MAIobclqzp1YPBfyF17Gvx6+X7bi/XDunebjg3waXXKGlhvNpOTb7Gr3bsArdLdmZVO7y/eu/KV7ZS+AHft3KFa1q2DfvXaviU1VI6Aj0D2lPA6opkDSF0qECxOkC+GxQ5BnGyLZ7beaLBvYDpfjTyH2c4kv3ZFQKIsvwuBfxDDtls5AudfhkAyW7GvIFA9rEVD3T4UscowhnOYiyw5CZFZFKOJgvrsof9PgBkwTEBV2qaosfqv6MlbcYh7NJwx4R4EHTYZx3xVUf97WNVTeWVVQ3l7Xj1cpJTnNZZuJuHRk5cL60S4rr7XeIeBvCftAkEAADQefqo5+zvfZN3XpD676IPoMfTO68BsLQgdzVZ+rshhD1mbqHN2GFpQXv2K5NDwePPRC6IWg2a3XU/GKUoQyOUY+LgQQkIiUjIKCipGJmYWVjZ5Mln5+Dk4hcQElYfoUQQqFYtXr16Ig0aiDVqJGrUSeRHuFySFI2AxnpDLCvsuBRYjkVdirhKmFEXopmuXMTSFHE5LUfYLEXciirGqRSrB1t0xRHZLEdhObrdI1qIehSmfMwzMXfBSJz7IRdHI4hYtZAJPmds8ZIACGkhYwAOjRAQAoEELO9TLUaO3SEgB29hQLZfMv9rl1NQqYY8T1Zvl9kLJBSoNgggTDMwpALRO6WmQIb7AzTgJ/eXPXgmiH32h3GGrwg5W90C5B3gXw76Ou3491ZiiDI5d2Z2kLyJUKMTM+2E5Ssll4rcw0HaYFy70A/O6c0M+/aXZK9bger5d7U0smT+tDNAtZnS1wqXrmCjLoE+cN7O8udQU/BCWbDISJjFSp5z6OcUyhZ5g4/kvaM8I/F8Z9qIW91JF+HIMJMFwwbXwSoRlvMpZ4hZy1AikVNNpzBZS8yoSWRgKUV1bFVxKOvQlwEGNkBEqWAER7YInWBdEAW+s+G804/p1Ki+lctCD+dhCvo+qFmFaxKLbMFnLk3ghkyD0y28FHN/G9dFdRYT2go5OIx6dIZzaRza9lTuTvCG0Q+AGqlTfY6aS5luTRu0jYUBeR37R70LnoavH+hrbUYJpEagwek2YW0CYGx009uTsMZzG/FKHnxu4P/PPBExE9YUbCjZcqLlzEU3rn7jpjt3Hrz00FNvOn301U9/Aww0yGBDDOXH3wgjjTLaGGONM94EU0w1TYBAwUKECqcXJ0WadBlmyTTPfNly5clXoFCx1dZYp9R6m+yw1z77HXDQIYcdUalKtVPOOOu8C66oXRxHA88gBZQlckqE4kJ/J56IniJ6yVzvK03oDEATT8YGw4r0k5FhkIqfCH9RI0e0PMoEnIkmV1MhzjSTrCQTQRAvWFIhEgsVChthzRBe6SGpSCkZxMRIKU72Ek85SDEzf2maTMx8lMUWWAZlSyxHKFdMnqTyJVYgprBspUgxpsRMgiSzFmLWWS1HsrABYjYJbZZSmdBWKW2Tg+0S21E2U24P3l6Z2VcW2+8QdFimjkjsmHhXZKpWNuplq0F2GmWr2bbLfwTLr0ywRo4EATlyrJEgQY4cAQkCAsIJSek0XhAeXRrYBHaKIXiSPRM71E6yZAMLFZSkvCCV3jYrFhATbG1cIAmNIFtCIqbAppCIAMhMoDjBokJkIVRi4RLTixMnOymWiJ848yDOfFMwrTBTwVFjLaXiOSOpx0RGZrm8EwLaqAZtIRpizJOFyiCqSlS1OKckcUbUWXHOS+JCTeXtYm4rGRFZIaAV13J0gUeECAU8PAoUiOARIUJkHs7ZQLLOXZN5AcV9MNNdEIDQqIFFn4UFl1H+/OtYib0pyfmPn9rfFz1TZj2/WFo0XKsYV1Q+vaBi07v0LZZ+lqOX47/4iK0mqfs/U8uhqedhn2XMhKlrb4z2RrY30r0R9kayN+K9EcFPPQu99qB7bPM3ze5aiRnQdHdcUipcutedkgQ1/wDiT0H1kTERcPSks5Jg/4HIRKgY2coGVlNMLouZV2VcW0mD5G8RYmPaQmOCGBFSBHgkcMhgmKPELJianiFfl7OiYHug/xSs6/s+2Hfs9l/IXOXLefy53dtObbmbYf66qlaQI20oVSspVn27xCVNqNOs5sTjGleQ+vkcyqxVLNsCGRIZhJhmglF8DdZXD260LiNSXUJEuogocgGR5zwixTlEorMIvd8RESoRwWpQEYqcOap5TqupTqkpTqqJTqiRqlW942qEKhn8fCcGUkPA/ntDVG8RDsPEehS7h58JAaAZBxEjvHbDIQZhkDYWa1FCE8cFlVQaRGMAWNM5OVMQR90HSTx1mu1GT/nBV2hcfsnKOWEy4KMbTiuXLZ43R7Q2b7BErkuMJW1Qx1wdp+TNt9gO5QsSgSjL93GvL2/gssDpao+s/ZdQuwf1aKhrSN4qQ1zbughXi7VWdZST+VplUVL7tZZGSezTio0arVxrXNQoO7R6RfVVoqU0dIoTMvcU707rKLzy2htvvfPeBx998tAjj7V74qlnnnvhpc9JSDt1u8XUegDwLMZiwGBl2fjNVqS3z5GxNjfcdMttd9x1z33XS0krVRZB1WoF3eptSxojmVC3IkRP319/7oxRCqbEMaB1qS78UW0o09ci7vIJSpEIcq+Bj/dksnaoXqNmD7gO9kCCL7757oeffunwhz99RUH5o/7yj3/953+dCBgS+BtBkpiZvzQ3/owtkl3mF63EbDMXllrPilZVSpXghalmoJFNlAszrk51ZP0ruzbZOa0xZrgRtraJ7ZixFgn1V5Hy4XuFcb+m2qzMFsdsKi4kJWXBVV+jxVisRLn9GQIRr254KuZIG/1dCE1KCgXqr0PIuW0lfa5Bd45Ula6Zvs7JQISjwm4v5ppJaqz+9dwF1Q4qt0EWA299udNATDhS1DmlLYjl72NUrJgSZM2rRbOiW6DIFi4YXpniuU5mD57DLNLJGKNeiIqyEH1uY/frExkXuqEd7ExXugx2xAG7Nvs28xbhZ0xImFFRc6IzSiTDkvX18xXbYV9RntLgKAOm1nj4yGRKqThfGcfaCImSbMP6NOdwgHycgABGb7aNN+rhrZvSxYAYezwQ++C/VrsrsJ36O1r2/RkA7DreA+BXAIAvZ2YAahSWowEg/x6gmeLFLzYDiQAf5j0aSTDkmFcCyQhA4tABeIjUWECAotyHH51syt5mb0NxCC/9ZKnSiV7KxrmpeB66Dd2FQRgHZ8MSDMKyMSLGwBBMgIkxOWbBnJgfe1kkFo2K1olp0Hym8wJqPfS3XXVeSsfZ8DSALipOujEOxh+aGXPI0g5GYM+d/P9nr+01HfnM1v/j8kN6eOjhwYdnAQCe/v/0l2e0p57+9XTHU/WT50nLEx+IDMgbgN77aAH+UsW35fFnWKtPbYA2PIl78X76MU0KuahpCJVjkmEQVetBLGy1qtXgKWgU3kQiEiYmM2XGmg1lofl76WmKXl2M4t7F4YalJ2bQSGVSOzoVRph9CxzU13dDitTSlLldClm0FWvd7d2QmyCdelSIiISopBLFJnJ3tTwN5Dx6+dR9qk1URIfvQ4Rr5cMjQx5VjeucOCcYe/qcSYxJyRixYkHOkphG945MqYdzVCkH9GHOdqgejtql3E57VNhtr1CH+ia3OkGMWHFmmGeZxZbIsbTpZVulxAorlcqznqcjZRhobd5OCRp7Jv6mEO4ssp2Ae0cE8i+g54KJf4DwH9xQTw0CenXMbyXZcpBsMhABbsxoSaoUdm8IHvhAVvH+GZCE1+AopRhDJFhhm0xIZCYbhcx1tn7fVOzS4WkmNLxb+51nyvumADObT2fwKPO3mIuLcMbDUH9cRUyWCbWZaH5rBOM3ZLy1mfBpzY1fOE2GZOSeROMEHeP3TDp2xS1XYl1x8BB8JqbNWB6cX+iQfWLdhLWuFZ0+VXCqlcKRHalFWAGzWsinsnMTNAGY8MpCECBGFEH4zp7bmZp1nWTGM5pp+At3BbWO7GKh7V2QeR0Fu1F4wFArY8MyayQynBBJuJYu3J1kYwcvs2KIMT99Xl/LNV/TNcI1L7I+dNaGYTQsxNuCV5Znv0W4fqFCBsYMI4oinMOM3F76vn4J+llDODZB84z878JdShY5V+eFh0rJmurCoXMS2oAjp4FGgwyzDCobVpUuiroNwjpW1uWaU7UyYJEBgnJCJOHaa7yRwZu0TjMZNXc5pXkQxCDwcgRBxuK9uNDe38M9Qp9BpdiVCxxl3mHMQoW0VwIYRFGEc5jRtIhXg/iVrwwjiiBweGnuNA2oUH/SnTZk0t6saWQ1Y2oNrU3Ck5QW/FBj+l5rxfIaPYmUeKsVPcCbYTdwj9eCN/NsWi4NDYanD8pLMGR4f11Op/WDN6Ze7voo7+t7P1uUtvyvvUfvji79emrzrtt3UwOU4AfXdM3MaC/sIyKIuE/GdKzvGMFjPDuINrBCGsN2x+P5PMtiJyEY5Sf4NZ/7n9F6wM/juy0Pbq9mG4b7ECuKruH83IaReoIoAlh5AEIfuYCQzJ9rnZydEWHQikEQsRfEqcgngR6Mjl5DHP89o9N/6PEB0AG3jHS43lEyDYEBcsBGbiBiXdcM6A3N+HAJ7bEONi+W8MocDX9AWHjjrX91gBOGI1mHRSCLCagV78/Ik8mDm38PQsPvJEiWV/d3LLbaiTUtEGFDcveeD8TpTJuoGKwtMR/yvqrPPeJjyzqlN6IysxzPShRpolFJeAUy6QGN/nMamHGzlUYJcjsMG69Zke2Yf4jlmZFAY2ixTJ9pGwDJUmFuuI0dCgQXB7I53LMiYSo6+Z1MrY1nEBrGe+FJlyyvlOmAC+QBzTPoE5sA13Lq5EAYNzv6NHsNuYVpPCUJqTXGrdWTZsraxa4/3guXWXfvPsBSXYmxYtkzPaOA7zWfkHcgjUUgBeYJJXomoYUuh+mXi8UTGSgkyPqt6PQp5OioOfqs57B7xJeemnUn0Di9fwlU0VksA05AEgpmI6Isplkh8PrIiA2YXsWvFM5ILscO3Q/IADKbBCoFwZQRaHb9cvcX4Zc78nO9cgrvOYtuIIlCM7+ArIku6InGFcjeqWbdKDFPiDAprDSVihAF811zSJFo1INUlKQDXYKQVHm1Na188Uak3Gg4UNbgWHg/2Pp0jVeKuiVdwzk67xG/ototIM0YlF/nfdBDPf4Wc4cET4mxoaNIQ/ic+MPTvdsTbdKj8cO3nYqM//1lc2Us3hLE7GDDhLJUoB0TMm+xPpofDfaHlr7Lr/oaV7y9Q5ekcZ+Xnzf0IClmWzU25DTsEOmkv6XYNlvQUlmZP688ezHW1qK9UCPsMEydswCtUUv+y3Q/T5cD3OfjByqO7fx94lu1u3fxPxu/N2dJzYL8aFIy94qLKrKFdHIUurVaF6SvoEzBsM+FpQfrOHBg+LTZKUHD2GaHmIyzp1iEkEOUNuTN5GjBjcfW7cMJC/r9FHvk539RQuZuMsoy5gPD1nE6VoHSAyjQc5lnp5AB3oBd6t71mOm26HN+g5U9acqzvJyt6Y2nCxuCK4ZT5ztsJrgKcWr3ujOJACy9K9I93rIslOS1r5svHSjY9oPNc35EhWcGGxSxBCRN4TUeLD6m/wOCFVtkCALg/O3pZRqDuBOtkEfUedWzMqr3VNhLt6a8ooOzRAlA49LKBYMnENQh/GCPfrJ+BjIvAylTQzBk0CsUSbqWOBV65i2To8NAY4Z0Il3TpEIphVUt/wJhFmm2ShrnSE7wQf+iKvd53qTBhsSspBOlHpwZoSgaFm3dbktXD5vVH9S51C3yLdETbmu28r6TJG7NSLfdhxjvJC+9hlPtgw19iTNEq1lVTIwPphY00j3IOJmhzUGzfLT9v5PMeVqtR4IwXUzIGReeS7cGIwKgKu3kKTrvxLl9BXU0dbOj9bE5iAKZgOfTmMncleDhE6Ka2aHooB2gu7KfBgK59hh78m4OYqMHLQmRoY3HpmNkVPJqSKzG+6hPcN7niZfmRhhi0hnGAUQYO4UlTJpU0x6RjnRbIsI0zI42iDgP6BKeLhh0bmCznM9UtGmE8sKk74Nb6AuKlxYZsqbD1jUX+gxn3vaAyXMahJCLOVj3hTVkUcdAsviQRyIULM9MnV5sctCP+DDMJrUDqhy8Ma1/bkmzlBXGw8xqJc4R0m/gEWDJAGBe8A/hgqw4MIoVHAQ773fgHGgaeN2ArV008QGIvoC0QLVNscXdUuf+uJC+AxmuKe/f/2/ue0mXf4vt67Cn/rBeGG1YjabNp/ah7trjr+4nQU0FlpRe0EgU3ovpULVYTznCBGBjiS3DmGVUbakmxQMlLJdzJcaSJZvfwIdvI2nGrpqaEGI+CLKwy0OcpCKVYWq+pw8EdHONTFdOFd1B7aUeL0PH4yVlUSQ40kD4Swbtxg56dzhI/hVz0BcMGatczBS5KoSJpzrQKCUj8qcB7ixeCUGNxZ7YjwGcTDeGompmugitMgdAnmN086zxaKioFgQnIDlaWsq1jh28ac7Yvxa0diEp0OZ1KmbCoFsDhTWSU4WsLF89M1if/iUpbrhGuDBniHcrMMikyL4xP2DSmft2rh3b83KU2wcIsEtVgdXp1+JobOKeE0I559dOJcJie15cqPb5IGASaqQu62GyPpigvtw9N6M9pZXEwYEShiQKnPNMEYhN4C5ddSuExLJ49IQgOR+Dy/ajnJh7gI2f/U1XqR1l3uI400fUYUMUo2BJAaeWC0rVuwhUDcQyQoMXnY4a6gfzO0aB4MT+yCkJPSRWcbJO0aopTeK8wZNdRWdq5g8NYPx7T1Sc0hbcXPtqd/ohZ73aPaWQ55PdUUj0jwXzyLzoqsgxokuulTPdrbaDoYBsK6kcv2g/+f7UP8jLtUO/st5LGnkvqR0yEitJMkZQ7zj5DNnFZYt8aHsBI3j6Z03JSE4642Q9HzwKlBlrfErbgE1FJhBNZXXMg03nqaGz/YdOoY1UFC1xhuS2R1ak+brXl7p3Mc/vE0Ee69hBNstYjo8lDpKA1NxWXOyZuJb6wNBaAsg7kEGrvms5GczVChZ1mABmGtRNpcsUGwRCLFuoFyujoyReoh7rIxG1Iy+FMT4bGodq6tfVb9MxjSFTHuppoRlTFpB58AcYynN7VJgsMkeiTBVEjSzdiy70aPKGQY+BptFQ+5q116SoUQvdaW6sZ7OM1R+CPRld0qrtGnAzNTU5Yk3cJycUhCCjSRBEy7HfNgoNuxm5oMU04MT4EOp7QudtIiwadIfeOAeY9JBUIa04r/c40zzNVs03XZK9iw3WZCwH82OD7TjJtpNTI0vSEGoM9Cu29rOoPA+RL5rdqGGrJLPUwoRpVwaNBGglMX0DXGlion5GjKhMngN3Lb6hHkIbk55xaZmQHWWQGTXQabE5HwXrwNsjuMdEE9uqnS5UkXpeCtHwwmnw11g02E2a1L9TpaJpxWh+1bcPaLJLsh+oFjIt1ytNlkYu9iaErkzu1wIS98pC522yFQREoqDTtnWmGUdhKsNmgM48G69kRc6G38UFkWWka+qrP8txKAEMTQtiHFejLSS+6ioFgWQhe92rtv64YyIlKQgA8znIJ2WTMt2W40fRSyXhdHjZ4RNzCSCG7Giatc3QVIebZvQ1KMfqogkgxshg7Nh5xF0uWmPptGq+wOTKJyOr/Le1LSuTD1wKyDr02jSMDx61xQtzdmaylLXH/V/8QOd3jwZDf1mUhENJuAbV0Xz+EkeG7lNcUDVIbSuq66aLNqWcgZcxSj5oMHNgH7B5SBNxpikHsFrjT4Xa0ov0s4EdsiCZ6kH0FHzwq4xqtFDflyOmBqs/kXq69pfPpOgeSA161msVJcrkemnC+e3R25K2l3D5h/QfWEwe6buHsy5C2+UWQk44YAN295bnmWLR/i4TQEvBcqb0ASJtXsBWMjlyXID1m7XPu5pjRaWbiOO1iN5ID/PdGzfdLEBBKt3uDI4bMn4MW3bbeHBPjKGEC5tkXI7vfapy6USdN2Ji9KYHuw67N7DCNxL7a5X9FcP+7TT9jkH+Dtaia9gsFeMDQ+dY1oq4E36V89oODsng7ksqJxemPmRO8uHHQh9JBPlnBnrJBKgVcSmHxxGvysrotbcRUCoGwOikl9jzEZy8HpdnzspFzxlgtljp66SLm0oCnPOB86KyjFoObaiZVMOdypu9KgjKx6lU02xVq5ZWDep1zHTIulYgiNq2xiltWefK/LiNWXlFhwKbWX07/zLd6L5+R/YIoLxD0ktUZygzXtpXgHBbQiH5kxEzeevO+ycai5qc4u5gTEsd75CnlOx5eQggM2bhu3gvL5NE8d4FewI+LTGMpC8cR0d7EQno77n7uCdcLbwFA7NpWabTL5Xy8wgi02yBsMzBSw2DPkXPq9h5yfJ8QwgCxjPfqCzLZC1IyxBNy7OQmzOCY4xVul50Vtf5SOBpxWYsPCzrBwNaXKZxrVqqJjAQOVCsH2M2cHhob8uuWWYvo0cgdPN6R1aaCutP977OUWb3lTaYxqaeUjVJ5wL0qdC1mDjwUVxkkVw1OJSs6fmWDjbTcHglDZ9IT6nRb3g4qyJMeC8wW3nRzNgn2DsY15FIdFqZRDSuVB5TE02K93E0fZFDOabk+TgahFC0wI09Acmkswz+XpCE1/6rvUuiZIOo8Wp2bMWCyc8z4S22l5ubCffGQJd5kyGbW3DnNsRMznFBK45z/mKnI0qBswaRQPmgJEAhpLqVOlc97EzEUpRFVhoUNRyeNl6pZYuLK7j2XVKaWaAXCarfxRcaTmY7dWJcbiEM8a6klE1oGJBxmLzo4T5Jnji40t3ZbSaUTDTLyOt9MVdbAj9tPfDAi1ojD9SZtNO8Nst0XfZQQ6prjNgflenWxWZdI6NKqNm++kTnPHTz5ioPyQ4+8AGdaOSiK9dJmcErcWqLnGexikhM48KQDWpImPs5A6BWKCTSkB7u17mr2EgCtM6Rwq6mUXIKq3vJSc7o2QZVB7+eolRoMI07NR3WwE6snMkSq0qs0t9VIlb1UQViFYhVLlaB2A4530/tzzYwVhUhW7ye6qoUUjR7pLs6yFY0afak8tzjtrqhkH9KWRFXYZpfSah2b3ZlwFdSLxfakCr9b8LLuGEb4YdTi6UUZTa3L3gGwpTG6LY99rhkXJwLfGpwnpGc/VB7KpPmGnI4SnVlubvfKdV2usZwuH6Uz6otYkQFK3NgFk1gMPWcwwmTkdyUfZbTyiSj1YNNwDLIgAtJyhqx1FkhU1euOtDhFScWQksnThc0TNTFOka2BSeKvDoYr7Ouzmw05WI0fHjGV9dZgNxngOas6PvFYdWQMKxtheVgdFD41hWePnQC2LPNsi5MBCFQf30MkjTs/Cjv9Hoq032Qbo+SHfnQGgo3fMZDHZy/G67fvWSA/U3GEammVz1A7Fo/n8YQNuzBUQw1/lfmgRUbwPoboewVDzhjg4Awuxw0VXp/VaMm7Jqrae7UeHp0f2Gc2cSPrc+xzXgZELUT+Ua/yUfwV1x9DrK1a1Nkxg7kWVpDD807dTtBp2ULJ72GKfG3VuB0n5sZ4c3I6BGwI16QombkCWLnZihgTu6jk0Szc3CXrI4pkIlzwGLbQ4oxoAHc3ki+YJ+b05Diof9Nn46OsAyeCWIr5wCvN9LHQHdpxpFEtUuojFWi4zuUigm37ktbxInJnofK8k0MDbXKTLEG0BdWF7wufvFdunWrQ6bFtQZ+i3osdYHpRNYULuyNsElzoExsmeNHQeuJzc0rNRZ5irHD/vLVD1luDFX8yyrCM80HJlOoOU4k2QtBZW6diDfBpii5br9RHAuOiYnHx4CT5FtVLMzAy3F3T6wK6YPLwVJ7rJwZp3H+erI4MmM8dBl7TiL0r68T9LRUO28faiSarzFziB0s4ZluSwi1Y0Z4mb8uXFJTmhM8rfSAv+hC3efMbiqqJvQKktF7J39MxKJ7gGmd1Mu0x5sOQEAB3M+IaQ9DIIXpjBizyGZ0rU4w/b8adV58SJkBePRg7AgrK7k5gxknFIN0Ds4BwmpBjywPi9gVJ2YUmuagKYK/lFs8uzc04MPkxhZOIuBdLAhFYFmzXAF3ibOMH87IBsHOEOKcUvKHUkHFyda/3YKjOIpwlr5tgCzuinvHpHHgdy5ac4DQ9K7r0mo4539s+KGR8sFbws1jN/CNwzeFWzXXkesST+2p1fqm5/2hn5g2htm3sbvxnKWQ51RC4WZt1g+JtaXu4cly67qMm5+ooj4+H2fk1rjMp3Ky3O2CzgckOgek4EMNeXZKqzJs3qCmUBR1J2E/xw4vBFfpRi6L8rnpQ+ODyoMHmgnzRKX3ul+fXBSvWZFFXxfbK8APv5IyVKN5XyL/32PCmqqsNYagKFm6RkF2EHj9EawBXvWvmaqrKClZvASxjCu0pAY13AOdV9FsjVnshksb62f5ndt6IRBaOwjay0fxTD1Lobqw9KooT4yXYUdGCvFQwzS0eTO+165z5nQOPYWXZOeIZZTUV7PWEKvcyf236n2I0dYLMhV+Z8Ac1Ixw2FpLoGSU7TukaLV+mmN6pOds3g16z6iFJf433lZo6KFcpw9Lbh++lpvEhzE/iA3D8jRG8zSCamgqLk1sOOfGiEt2JUmfwHMlUSqzl6oBtI5qH1pYOMoaTODiHpeknmvKuTEee1Ufv0RYsmUgx/MBcwujiINcAimS7P9LdSLr/BVJSeslkubXpbuyIOmyhTS/zFUqWvmK/T7YrdLQ2syLYzmnmEtJJn3tHL305rEZ57KbjSWISUvD07M8As6rIRmZylZbKeA50ei27D+HBto3hd+QLQs9ci92EPPOd5UHgDcHxd7AeMwvEUk8jV6pVzw+6BUdXDhzkfjgOMx3WMwRG9tSor6DfeM96MG+g1jS2GZcWB0M6EUHRW1+PSY+CPidfalul1kBE2CCm0brzYYJsOLNHHi32Stv0f2ZEAHKQvAZGIxnbl24Hppwsm6bWQ4RIIKbQenNhgiQErilfnJxUq4AT8IL3LBATBfiSDjVm3M+WmOsOH/iJUvA/mYTXa54LJZPYrz2yYtv3oV+hv96Mkv+FdnT/OFqU4dk1yU9I6N79oA8aejmm6roO7XuV9Qo/xFF/pEavUhto+3OZdOWv8Rm5ZwzbaPO2sCj5864C4gYCaf229Qe4WlVrAgmwa8I2eACsodUDJ6XqulbT9I+om8uoGjlUcm2vdBaosUnxGTycUKChLfG0H+LFJcdXJ8TT8JL1xkk+wh5T76adLdK9aNrF3+365QEJsEiHIMrRCEiYErsCYzX5McsVldZp9HLK8WLpW4QgUkw/9sL6CX03Hd8iAQhv0jRa1hBOf+mJr+qduhf+qRl3HeDwBooz5Zyyse9QAwFCoOeSLA+Qfh5P/EvxrK7gB/FmvBKqQdEcoS+faVdQrd/J4BJMPKLTFqBE3ZuSVYsrYxahuvKp+hirOIWd/5IXYVlaUPK42Sq3paNA6xKGEVh1a8Dla2lFHl8pjAmvLWDyH1bKD8vzZ2Nmv8d1RUJGINscVFEiYZiphdyUgEaOfi56vOCxfwlrg8kMFFeyHCjIbEZoA3VANtk8e/Nww9NTsxx/Ial89WVo15yh4zyf2B+edA+4M+1tg1glZRJ8slyoD38D831h9y7COcOl/sSJ3869xOE8xHXaslnPhb+h/JOmYc8uvzVTsuN4yqjGhB3D4I4e+yZE5zmfSR4dkcHkSBxArRJfWDrFeXnrpn8EddpyRFoVsPwYRIgQNExl1RD23khvTQINagKEfIyc1TGFW0lCEr1XnAwqWMMHfmSf5j/xZeZ8pcJLg+k+iHTW0jieg29gL7mYNwB9YF6qc8IhhFnvwbPU+iOW8Kw71N506h7+TuhAoVGuRviJk9IwZMdaNwB0u5qJkk6lpuXKB9BUssXdukXyf2U+btVqPVZDnJuNveccZ4hyMBSs0RNIqpe88xxt42g4t7ukXGyXJTWy+dsffwRiUn3piai55xSZk9xAJJL9gLvvHH6ZH0smX8Cc1APKDf3/ZlBG/QXiWQt5/OpUkQ1uxYbnZjj2E1z5ysrR72UDhnQPqGti0vlv+QjcWcMvcD14+JIOOThaJn1S04lY5svtNuCocP7KHZ0bV4uOZ2V4xg7De3BTL/MvG/m9euN/Tr3bOq7rB8DDK4KPuIML+aIE31ltAA0SjF8vYJMvjmUgBwct90cL5f2Af7dDvwxX3fxAT5C5qP3Ef6nQEZW9u23CDdxF1SZNqzLKGZifWaq/vukUOYJUCp7yt/ohhfUrLPm5LMKmkPnsGRB235lmZcpSAsx9zH5/j5Tzbecho+IhDQZe4v0d7L+AJv9Hn/sFm0r6lYlsHNWVte3aISd0TP3v9EMryfjn0yPNxOYlXXn8i3bawqIBLEe8gVzORo1lO6/ajrH9Hujnc/Fk8AYpUlHKTnnZ3YfzKwFLjyyvY7Z9IjPM7M+B77ycwqWW+cInDpDy6bZYqWO7kQz9wpvoEevdsM/OUqShgbNpTXaQW+6aFpHaoaiMDJoTdeo+wqC+VOba2aZq+1VxeYZNfX5qztKw3UtS6eHRdMLakuNRFZLt9QDJTqWzs3Cp4PudL0/SCiv6mw9UiqhecvgRw1ZRg/1hJTY9Gs4bFvZRic+eNSIweeKqOO7RG5Luo+hHbXhSdwGdx9I1S6tjOZPbamYrS2RxUGZNBvmDUMqF56QqhnLT9LHWW6yDi33QciO5GKhG25/ZEkqSydTAQZ6xlY3yOxnkUvIC1xxcLKncKSuwrGsMwXcKBdc3Kays7AIqJ1caYCrFy9sThwvLm7GHCUITRp1mxIcBWFuJcY39pky0P+h4XwbGtqooYWXI8B4B3TFMuK2nL0ibRgSoVm17aLwPH2vhkVhxER7OAzHvnQlqhu1V2UIXE0CZ5CPk8UehNmSnHnH3HdO5tCykXd4EWepN2HDbm4A3hM3j6xMG2VEoFmtojCmsC09+s4apaervu4axojyzh/kVX6r1m+02ZPN2iKBm+g5ba7Mhnay3fRHif/DQSl71wsyg8rrMefJf57lZi8KNovM0hJSaF04Yx2dZ15X6Zqu5M5fBDyuKSxPccLQGoqaowoanognhPZmV0ADwTJIIQ0lYSJOqNQzcmAClJsojbgYkQnsC+hrKui9I34AVCsDIFohcVy4NlanE3D+bMvVQiSI6xW2rx/VV2ysksLOHns03J/v7oz44NaVVTCjpau0rGF8I+kAp2MqSZWtlfyTToYqNcv8x10N1X3/vC86HJoMLVs+6XakzcB8FJm72HbqB5hOf8aHLOzNgqS3mrn2AHCYokNr3lAen69PP3eWIvCYmhFQs4YvBh5Epodjz7pXOJEeNurc1Bw8BareTefWqPz9xvPZEAmSuYuCbD0/X6O1IxxWM+3QbngesOn1NWr/nsM2JCjP73CQjG9+LtuybGImN1ZzGhNwHxWwrbhmUuE+YO1+AXrij7yHZ2H+r4XxNkMTmvgtRG/4q+DbBSaxjVfpEWievjQKWl1oKZl+AO3esRXvN51oi5o0fJEhf1O8rcWsQcXceEMWWUuAQub0TzNzAwbUY/2GLIdl9M+YOvdmgrTpw8g33LYn/0Lm/zyXlnC/zyGrH7VldWf9ODIa76GNGFkiFar6Y/1zjREplFnUiAvmFMyCwMNEMQYeRlGNvOCV+fiwuCZkpWV4JgplXum/ZYQA56yhefgwsB/YFcXZR1g28oUMf+icqYO+675AmjG7p99FSHB6adExkpTSsGeRvYoJ1aZ14P32VqEIVAstcPWF/D7bQ3z2dLjyMzAAvPjFE2zSk5v+YlpkGc9O0ahRsrywu8ultu/30JHulhqzjL+PgKlRei5aF1tmCxFTCtHeE3Fongs8nfgBi61hHKxhaC8X+098988QuPHb+s4LEUjL6KgFL9VeFfFPDBUsbAhKej3JGnVeSX1MWUabC+fOIAbn/9xoopn8XKppTWPIPtxeudSQ+FUcHPEbVOoYTcCZ7dZJ27m5wxTmL9WX6CwO4vi2VRPbtOWlpUAFsXqpqanKNOANO6ZOqFxpKDc05dzdJ83J7o26VTklLrO4O/2Fs2tCyqFI5Th9gfyyz2J8eYchg4IPwD3AZ7gcPPBsbRMV67MyLC2ThskAjeyNNKx0ttbxksO9o1VuJUSCgtXfDdS3egtcntp2kyMXPXTPsD0QCeLBqnMMkBdfjIkS+J79rpGNPCUquXr5aYXL5K4nq2Wr25bvhFCJNycCm926I2UfuT+R1i1LcShOTBHjTKNXBY8ybtqBiYmw9CovZVlT3hXC6rgwf1rFGk9x93REOqMHCv8IWTTzuPqAfhkMdeB2SEvGwkWM0ARubMwhbedEP1DQ20tStDBnWEmXJSS1dTCkk1rSrSAj09ix6I5v6R/cDcqt1oWWOGnO0giatIErSuvym0h4cnuudPYmIKn86XQZDu1Jjr7dKagLEh9VUg2csniz0u3nldodBdqRaAg0uqFKl5UO4Je61FdYO7oJRU2MzvxcTVb+SWUesKYDnSc+5DUTSwXPEDq50mHJLwzkv0n6y1KgCG/KoBXrXlSsq6GTZ33K195GuBV01uYHPhpPe9VxGE3Sc78yRTx2kzAllHav7ZEU+TkvdFCZU2lZBzu6oMJ9Re92XvP9FVypTJMW5BQPuhSBmSyttipZ60qbhdNaFvu/OSPXRpT6dHG0aHyLSYA32o1dO5VfiS9Sc6Ybo5RRPwbhn2dr4B0xUONU1xnMqrjfWsZToWtSXOo5Hvf0cEcWR2OuCJjRUp/RIVi5nNpBNYTFsbvrMPD/N1pD0gR16sqiQk2p35RkSaWXV7BSsWqlxRWsdvCSXKHy7OubSxYEpe9fLRd/TM4MvCuqpS71YhAB1P8jfp2aKdtvrKOs9VMg/CmY25abSlWaTZ50yo41vK8U3OckSsqUO0JLG7rKTNWmUsmCroYFptFwRfGECcZid0OeudaWr0r6LXGuVObhLn26xLjKKKLONe10e4HviJ5am77a7HI1tzs8RR6rnmjKbBZsFytNpQG7pMynM3K6GqgdNH9McIwB3cax8NmV9eZiiyPh5DWah6xjJzgwDZaszcIdSF/ZZ7+Hcv6k8yI9PSquJn/aqnb0tRoFjoSTeEEJ2vJjojOYoUTkYfx8WpRNaAWYardS/4pfp+ZOx+ooo34KBOKfZ1OVk+/dDFGXv1Rzxz9w60RVBVZ7QfJJFVA055Z65VHRRekNHcU2Biggfgsjsa3HSwCCf0IxoXxT9Ec+GUVy+fzPkUJ8ItsBbmQIqmDIP6CEb0F7EfuJ9tV4Pv1uwa13qGtpvkn+SdfOEN+fOAZjl/3TMzG2rYrR5Ndh/uBXkPAnaB4Bzo5krj3Pi1XHHD4GJYLh5A0VUVED8iXO001OwXhs4zHy+lZJWE+BrTAokL4ZRS7pxpvDW32W5UfeTfKKMoJyz/71TYvmnvZLAHajTgWy7GJcP6VE+h/QlaEEtAl75CxTB1PY1C4Ze4zH6HM141yN5C5jaEjLjAp3cKPU8gKzbbs7AOlmQd693y32jwPMWvoUnhPepWZP+crkoizzpUFik+7zh0JIw3RNEwogPVOwaRUAyvvols86YMW9yDV549SCH1TRjpCPuiuiZwsWpnbh24Gd6YZ07YBuZHXiy1naUn978SOpuM5harZbFVGPMc6Wu2tdhgZbYUH9OPO7SkW8JCxtGcUUykDYL2rfhJk3/qK4CRLlES8LlSC6U1STypnXc7kSCoFzq/orAxvBpP2WvD/VplVfH7hWgyeLqHNXUE8uFV9YRsEukWTj3lxpSVhzSXiXljXluqmOstJPgYlJ3VP+hdr7Vxo/ACr4nut4xaR6fa1EY7Cla1PhhFlWsX2but5iUpeotWmXW1nlscZYQKY5RIIkYQ1Z/Docd9VhbgosLaO0HkSCULccXVM+aXJR3q7kge0vqRssRqxA8V9qvUfSRJX60iK7rNxtT/JUFaedDWoTi2kxVqRqXWmTcGl6kfXPl3h4iASZT2sYS00mh2nFFOG3mrAEJsEMDyp2g8Du3JmTm0rJzItc5jIWM4CjZGZ9t17doOPIs0lj2Fo/qOzf0oChicxmZ2zls38kGMkjM3ORS1QbDmyFd+OrmRjC2IzwF9Q6J9+5LVGPeplSVmB4XhYDQWASTH9CQXPH4ASRQ86Ufs7cVEPH0XCiP/+g5+BqlHMF7Hm3xUvMfr84UrsklqFBVAn8O1ACAI/lDWJ+USB/negnCvG6MYotLMYgew338haq0TVZdZSywtNLCROFClOtqB0FJjzVH8Es+woDQVMnH+CMtepCnbXpoMVEm5VVcI1R0xdi1rGmTp1pvl15C6C+N9cohvu4cDqPQZVu1jf8CfraUffIVKNcDR1KeGLqQ3PV5MwssrLkhcLZI+Y8BJqADbraGXSIBJHTIpmHBZEg7rq1U+6bqidnZAmhs8CGyr1MpTP/o6LpCEz/Ay6eUv8XUy+8aMMln59x3wzp0Lsq8KfKti97+7l/kplUqpVPydI+9kKU0asH/9nwgJqssoUq7SMuG/Obv/XU3MsvRaaUcTOKvPv6Jv7By4oc+jIOCwOnVOBk4V4I4luUbrmkydvt08nRLA7nPJ1aUEDhDOtaBRXyFyrrltHMNfEWQ5omWZak+OAs2Fn5D1CnKrAdaJjOa50N6OWA6MiPY4ntTXnZtnLWynfBPUS1HTxsHhgRKgaj+BL643p5limSU0eoh4gwOIwL4k0D/SZcyWiD9Dj+E8vGMdNUi8jt3yP5rSA28PuE/lMthlIlIjgAWeUfSkrdiKy+5lEkPtokPHKkPyjxXrQbUOxEuKsWkvQ3uUgFhfOiBwtW66rWuf47IDdpD4pE5vXfjZMWLe2/O8xGONSsxxup5IApNYtBvvOBPtFnZrn8UWdMn2b/nOuf6bPNt937TJ/ZSJbb5tlCxJxCtJ9f/EDIFi6zOFrGCfqsc17sQ31H2km0pCXGFOQGfFwNic7c8w6fIsK4+9lU+ZxfBaq1k9UzGsgasu+HP3agk/uoHbTysOBFGDpBWctF3rKPGyxO109FhDChQfcqW6GqfCBXPScWPrXdHict2qJ4giIn6QTpkIgcsDS80QYNaXE5mtocXlfQVphTdeZw/TKlPu13mm0FdBbBqhUIPsBhFr6pVEVJk2YEFZI4hewH1Y84E9M7yvbOepwbqCqyYMaSgHrrSdZqpi6yAzNfyte1+bJ0FF/2mxKJ0VOz0FXA5H896Ba7cWX/KDSKWMBVJxbtNAYUDSJ1VQpR6gPYYqk6msKeMv4w6T96mcEpkWo4nraWPcI/P5ThDaTcPjO7mkZqfRd4TCqodZg77rdOmSNhVVVZvNbW6rzDmLw81VTYb1bo4tECbPwKDcVdYVSXmgsc7eMK3YWevCKU1AwHv0I0uoZIMlpXxFvRJOoQl8cFz8PQOcoChgXjZgn7DJfpXzXrCypSrFJ0/UO2ezSCUfE2pYBtRvN1y6d3aS47NPN+RgRzPB//WyCboAEfM/Yf5MAUWLi8R5CxIGnNsM7DCIsEZ/tWHWGLnW7vKRsXEyvdUVXjscp6o/fQ82R//oCi3J4FH9fIC+1htMzjdZ0X8Y7ffDWnwe3Nfim5yo12bGSVUoGEJBSYBO8L9+vTghx7KdPjc0p0mupkbUHadFZjdU1U15n+GdFaOHWiLWSNsYnqWG3YpDD7Js3cfDGeMtHnbeo9VFXELo5gqVmZ3el+n7w9OClwkYrBQhah/YPjaDjx3ix4YuG8Sc6SakQFXRMrDxfLLd6pSzYA8i70PlAsSHuLrjLdr4rePAfN3ZmzjkhKNCUznsUJwxu/R1BRttWSGWkr+yvleBgLp6992LU5DpNgwWRlYddlMEv+6zh42Fwa9IHUiartWojPF92uRV2FiUBMJaENc5Ed+Rf42AbxUFNRamxxT/qHdNR4osUYpWwMeG/jSQrrcR++ffndesGiSYXhdOnjz7/XcQGRHlAZXJCKFXHj+fTDDO9HeAjb34QyEy58LXHohuN9/enUrV7LiiPvFs+GY89+5MjQnva165sWzv3QD5vhsoj0dEr6G6HoVX5XojMDY/KGWpT/14SALxJ8jaHZN6ekcmje4ZMLXHHwPch0jdHOJYHOrjaLwf3UNjOZmNDMb82XiBzyH9JH1Csf1kJxlq0VnGO+h8Ki5+JqlH1C9uxPLEvMfp9LrfwovYnzWrdCM/HCb5qFr62Fpmb273/s3GW9YrtsAtVFNlQb+m7roqOdVLPUu0tovuDSrPdlKmXezN1OUqM3skFDoiE3xktEblx5jlKriAcK6kRPAlWXkGaDFxe9U73eaqE+vkf517Jgw9qFPH6D4F3pD/LKkMW9BZUi/k5LUBEXqTuSiMxQgi2SaGIJ7DL1W1u+PSRn2eVSpmfauD1CpZerxBVPYzwlp5j7N34eaSc/b2p0YutVwBmBqRToIUyhwubSr84Jp4p3fpOdizL43zCpXkruh/ue0NBR+ZCYOMNkp17A2BspVM7m6apsL/fdB7k5PxEz9g5zEHYmngC6UXH87+UzElVs+Emme8HNx5RT7krkDY8b2QeNDkUSY881yKieP4AvpKJmW15DQUFeXbOlqLjRaq3XiK3+/U+hBl1dMiSoVKBGc0PCxa/2AJHqWOQ9hCWxy5T6UBQ8jJoXoSNm5hcyqUy1/V21dORdt26d2IKzxEDHFQ+8hzCm4IK44L4wvhKw0Yxh08mES+/W8xQvCsUE817MhfmonhKf6T2B2mfvAA8T6ShtL2g8k0ldqCwuDmhlEr/P9Bf5adJV6pbp3C1LqgA2rsNim0p7C08mDCTkC4ifJFy/YRIzLq8CCEMJ6YUzFHA6AdUAkwEYe7l9hiG/LN/hqp9d2aE31pii6vJyUbmmtLm+nsQTHs4w91ZkN5FONamg3ZTerTme8xrNQanNgFVoWPSi0GBPNOqc1Z0DnY2VR/eu7JUZHaJqzdBy5760g98Ukspec1gUbg39v0LxImjbMDFw6IpjWX9ajgVAWJ+Xle4Abzzb8kKHqfYodTdo5IjIRYmkEF9NBxSNzz9CdOcFfBxfmD6Fs3mNarfOWpAcry0oqtOZIjq1OpoocFfL1BVWHRbfJRN9OogqN/4jxb0WL9fLwxyx0Ss0cIS2kBTY12H++FWhXh8oV9h9jfmW8UGfYVH99EWNlQgWNnkFrY2efmzYLiHF+H6CREky5SsDGlpuMW0j7Rnwt/Y1xc2j7e3mNc0xv7chbhrtaDOtaYyNFzjJszv6GcsvyYSTqHMn9jCX5gIaiAQpb8XR5qgkx9AjmkD5ZK0JzswUo+i3KpgEC8tArboCBBS49y1FydohewNSqg0f1RguLgH3EIKvJRWJJyv9RnFZfswbKPbOzsuONeGKNGyYBG9neXjTlGHgQ2KzP0JfLGl7zDUNjchUiNerLMQhGXl7JysCFSpJSJoBHcOSFp9bHxSvUivl4bBNxX43pVaFlHZjWbUeaJuAjmxBIBLEnitW+kAUIkHykjHh5iv3jZXEaBfQTPpgHA4290BLIYxVSkqO0N7CA8kxJJ6QmGHNqm8DvvjnIq6hlG7e1JzPcDk6xn4lzbZO4C8oc0d8jX7h9gzICl7109T1E1saPXk1dVqnISz7lb4Y6F5mCChlIaPdUllrcBbXOA2TIyWaFaWD08JxGMfB0umorROZ6TXnlp5r5soFcXdcEdMQjlabqiARDbjLKphGrMxcon38W2dWxQRw0+FNmrMLzevQIVKcJX6rDdMASqmeltYVcGXiFzFV5IdKmcemjuRb7almbaGv3mhMG5z2dIXt5aqQIh6285IRqUHlNVoU3p+kjLGk3mZwR1Glzi8clufH6mLAm4ghqJUlzDZrqlbrLK5xGCZHg9oVlYMj4RQOx8XmVETtnbwcb+nlXo4CjaE4OjZMNc0PTPFEd2SL5whVXpZKnnKbsezX7B4c8WqY+xDSw4oAdMABv2kaLq8wLl3ZWv4rPUtQ+cRtTv1iXxr0dE2zbEHSAppMrdXlr95fqn72Tb19cxMkbqrvg576fag6sOqVYfXPuE8Bi6tnYTUEq+TKjUWyqbYTPXWtrXlRbcDLz4giBp0ofFau2I6F9Xos/KKOw/CHU5w4wmUFI0kkCshWj/31bEQ4RbH60A/GMLbYZaqAfxB2beJBJIjxlMf3ALatX+PfsORjnTQWaTy8l+ysMei3CMXdbdnLCaybl3WJBJEgsAmPU0024ICZFQTVN3L2LKFCvXEMPkzXa5kMVCnxyvFEHHP35wzBMI2Va4SPkLl/aXRnUe77G4AbSvqLfJAEUn5mcQ/RQRIoymZc4/RtFOMNT+dRYB78cAKcxuWLD1y3fooHlAfwGblL+Qzngz3tTGg3XSHOmQ1mZmanWQs3d1GU90TSb1WE0gEwB2jZwDG7DQZxYSUqbHlIXQJUvGS+LNQEbWZnQcBqNNc1FF6mEqEbzyNJDb9/NovxTKw0sZilvwHpkFMG+cg4lgrczSAzrRy8Z6qVxiX4vD0ndqjhvQSZBO8l7AUUgq2QCUlAYOfY8z0slEil+Ojs//3w469GBDmlsPcJkRxgSt8GCSJ+ImS+xuY+vXP3VzPv8c8GpZ/Hu3gfWFBil2GqoMlkL3Lbbbq6OrsfAglgyXxm0sjv72HTiZhmHZ8KvQdkU/7jARv01YnOeLZhEUeo0hdOc2KuQLRDBJBaIWLomFpmiqxZCf1YTDwq3bntq7BsD0Vb1+pqzyq6WIwb9949ho6Uo9PWP0zn/O0RcM9XNNBfKiEiYinBMdfzaAJULBn39mbgbrJC4oTKF226FyTfocWlD9bw2wwVn1EIJS94/i+uKkl7kuOZ95jCrj30YaE9lFXx6PnuEtL9/WbkriLlYg76zfHIiTzgS3b5A88GQx/HfCAEEP8NyOqg/fYnWG958224B1hNS7MkyviAihc1SdL6cWBgt7MhWogD3Hi6YVIoDc0UaTWCA3VbQ8rEGsaBWzQpo1madRCx53HNOZxGKxXYvHeI+rZBSKGIRwjv0hE9CtZsz6aXYeTsFIQI6CA5JggdbSMQK1yD/xVhiJN0m/OtzT+YK+hv0zwywQubgkDaArnI5RfG68PnkExqUh/uvkhLIZcLT18mYGA7ro2Wm0tbyBAw1hLXMy8MQTDsJaw3X6s3x9qgHscYKhvCjbSBeXAgiIM9hA0bNxn9HuH/hKA/ARUNlC0CYm8Hl99IkcT0TlWAu18p/vFI6XdnZCQFhfY/2tmcAJuPH+klimVprDOFMez4vxnKJc2eykETFHHM4FQG720k+eEdzwOA/gdpsuwTXszk9b98Htb9qwj7tUeNJX/FRL8mYFeXrGbfZ6ZtSeogpHuV/xK4CJuqy5PwgX4X5+U2M1NzxDNnUJS3sVcQSIH1ultXTL/0sYU7O1P7l4iR2AZlAxtK4dFSsFULzy+FqlW6Zi7Y0nZgBcxmQ91TGzh8HmazGsRaWSBcAS0IgMjv9NPGd0IAYz/56Ey4evDVIYCdgzWTdmU/xQ5bYC4RwukxBMEA0X6Yw4behNkc+KnoH0fKGb0BGkOjbV/7rJCEYqUWlzguLV48Mu+rpNgoIWn7iG0/IPZosO1vO1Xpp7pL7AwxFKb6SZBEmFs/PAAOKjgHXq/wZDSbi3Pi7B9NOBIOOQEBSb49fmPN6M1kRhuQICeUOBLO/COXFCu2ZDRzPMDfD2uDSfwDw7eBS/HG2TLFGZxiJ3lpedN+/s4nAl2E7CzmZEiAi6fK2e5y4Z3yO0K3m51zVRPKFfcl1zUkO26ZIp5lttua7q17mO51X0DS+gRZVWOqPsVJrVoR8HN3dr0113J2Pa2NWrc1NIOVz0Pn/nOc89Rvra8Fvu3MNfpy/WfaRaG6LXXbwLYXoG3F2fWQp35LvR6TQwaKOjE+VPtk/s9Zwg9/5ouywYeboGcpjv8pBVi3ll7Jb/dVhUwibmVLjTp2zy8RMvK4bz+0FFEfQMr70fsIiyrxWf3FXb2eUKIr5pgVLfNNm+Et0yYZY6Iq0ewO1FS2xJMaqYnkT22qnKH3lU31eCYWOfObG+wu1f3SnFwX/7k6x34gtZ48UG0G3EsVO7x5kTxvoSps0K3B+IOSfHNfeVfnuOqgtS1vkZEAC6v0xOIPMkaDKxL1Mz74ZadNV1ZhKFCdJGLKMZ8lavJZxpRyjb9U41Sd6qEFdY6AFiLCPwBUBgvuPZg5kxtSh7yFLVJ/qF6l8QDNFzSogDaRx+OKanJzfspIBofWpHPyu5G6gvzx0WlbhxeKSvAa/jwuTII1txTA3TmRqUBAGB54iOgNjdeqpTJdVpynQU7/uZ+YOQgTodqaf1dx2W+K5bjQ/ihRy8n9bOVXyAuZ5o6MzEGICNbWfL+Tyz4kluNK1kdJWm7OZ68Oj2Pzh/r1aolMy43xgJlx7j55VcQ8OVjiGGgtnanzpoc8xROLnN7OKZ6EL6WXlMjyLNG0XMMlZbPoeWyKrWt1LVuUn6dBI/9aZR6lMmr1u7o6PL74xFDetJBH3hkOtyvc2Knj/xNViS71osCkAsdEeUXY1OEusfU2JKeqvNVzS0pmJDymvqqKIcN7i0EiyNwpuMFbwwRJILmZSn9MMRtk8v8naG9TDs7QKQcY9H8l1wQ/8iAiRMbY1DXbuqLNXn1/qNY7a8gTL233G7o9btWkaGycekoXQVctDr/Wp3AvHqFkQjIz0K5nWRwQCWJTaUT4EMuiZdM/5aIYherjgkSIwKRlQUSIzWKQZzJPs+7xIRJEncNhzaGCJBD5j3WGNf2XTzIueDM+EkmxJUKKQqIQG1kna9jrLeWmGExK7qjsC/iMsSd9WXQafcqDD37Iasea+RY+6yEu6/a6ltfg9p8Vz+FhD4GaJtoXKSORjT/KXQB2DxZFI/kSziNVUTiSlxcOd3Fqe7DpXvaMPszK8wIiE15jIGdT6YM+BU6/yN8MBp2AQVuG8P2t+CnS2t84+nG/mjmwcw3gCNF5xZu2bcI/+gy/iX32SByWVOVeaLVl4drhUYtkothq9Fix+kINrUIR/EtvCxRjXvpcOHNCpm3+K2miJN6pL4ry4t9Voa6RYmBBFZschPf7efMPvdVe5gBujf10tuuq5tQzke67AF+k+Cwm19wNCNkIWSNyVfA5T7TCnBDwSdor8j1FVd0/Aldb5Uq9OyWzb/QV7H9NjmxcL36NhcAQ+FTOEKQQceP6n+6PKxarMpOoTuLPVawNZzbBa83lAYdApGQCH5xdrUx7zXpbypVDG4VzGjIDA6+UEiWVXS5n3S5dzUt43Sr8LqbXwdHV0SOe/3ZpcI/EmqbnxVSJ3D3Zm8PKJnAek2Svc9b4TcoqBdDqsVnzcWkLdIjaEjwyuQomYkvSW3CsG/8WEYfNW8k3Ub9Y/CUpowNHoFPoq/i8J+c4CoaP4VOIXf8SK659jdfp8V/j9DqgZ7koC8kSZSIZwV27XZT6Fy1X1520oDQ1zdvHvTBGlrcedgMjlxeuYcMkOEecw7ncS4ZIkPC5pgn7u3Tojr8wv0u7h3KxB0TCD0p/jaG6CL8jSw78jjfeyiT8EK+YvslVK9j1xgjogzJ8hROaokPyYmsd+4o+ZOgC++AGmdcjNXiqfbopQLypPdGvjyc0za0zCCFXX7Unz9GQVKZoc2HyELFyANdI3QLh9Drce/jCVfiTkx8dX75RAJvML6oVb7RChwjqZrPJlE0QkWJ1FRhIfsIn8oi7rlPt4i744wti5hCOQH8yIV+ivEgNyU3sJCthMigekadRRMJ1iGIbrvufXH78NFxqO4CXqTcxelSmf1IBHHrW4LTdXNNS/O4sGbByRJtWFMF9c/hgc2fCx8YAjNdRDSD47bciw1MRCXoqBHCwXwzU0zX7j9hxDn4+j38luSpqAomO0Wmrix5XBPQ3e1FPfK1JpjK5FsmHjmaV3AxIXj6yoVeu9H74HrXMA1BgJgOKwgwmHH7EJ57rmpP6e9R5BfvmZWobbUs9QOddBlH0GAAGcmToYx7zLREwaQzc0ge9YwjrYBYLiuqB2HzqAurshbMXigbBWX/iGDhgg94ZjuRLuIflzpJoni0UFvLuaKfl8claE9tn8MmPIFIJ94hcsZYgzQuFKbzbuuE8/jOtieUT0cE/74B9Qupfd0CAg53+SYyDTMDJnySV5pOrT6+mTrlVBre0QDS4pQUGNh84dY9ElFWa4f4jrfNuTaxlpyb/etGciasyu7qvAv2Sr78C7SZ5pRdfodE+zc2SrqO209AdLKyOy3qv9DAwsqWqrGiX5osS5inzjRX2A1p75SpxQvnfv1PxIynyY45+nFLO46DkN7JDR02dZv5lBht7a29GB4f5OsIf4YoLpOqPgW8vfQQAGHi9rV9+1UQu+C0Lhr9JXgEAz95m/QGAF78Psv+n/xV+bA0I8chhA3x/u114l3F9EyHQjrnsPb8JK5btfLL782PENWf/mslp5y2q2QNXph2KAA7zL1WVuVRYM67LNTlXtmtLJp/VVCOaPdyqSfGI5z75g/WM15TFjPD+jqocRpa2+b0Nw8jN5zJvsAs2W4+sFe7JK06IhdbXRdgccBskwA4yaIKiZtekVvF9vD7wnfgZ2irYd25Iuy3msnHI1YGdDQ649lHjZx2vM66cmptk7v92nYnAFE5IKnZlWQgD8UN5TAbGeLglAe6ejPGj1zvqwD01xICdb193P+sgcca99/bEXEtl3V8karOTuy8ztrtOwQ7s7sc3cHATNhFcB3mw5ZSE0rBb0vpITDzVsNTY4Tts5jD5+ACRVaSooc02Mfla8sYTxDbgLlwljgMeJ+4BKnSPF2txPhpyjRPPKGtGNmEpC2TfPYx9LXXL2PYB67bo22VOjZH1rqq8TNlvY13MsbOsOqprt8m6xKOf9CkRLSA72bWN5dIT6hGPwj3xGKzF/rgP9sZOuDvuggNwBHZXYruxR3GXlZuTKvMyQOE/Fv4hjwziYqsYWfpO68fIokfMbbYg4q7fDZFpQlN58pnxLu4VO4gb7jBfylQH+B+A9wrVQXURaOWmnSba7K3us29mmTAw6FyWfSWJXc658g/bm9wnF/rXlBJgD0jky1amFVlgt4rgbpXHlpvHLhHmeWj5bLmr06wb8HSkaLFWQ1Gtu8MLdX0yvrFx7PpslbKdW4buE8M2Stc3Ju3GWvyCNnvErhh0hzNgA3sN9qsXytCybyf3DvKcaJoOEfqOjjGM3Ms8+5vqNgJusiq+2pBIvArPJvayQ7HpLI+W03BL9JuizDvKKlgPgJyFGugH/UEDgWBUK8o7B7fh1q/+i37Z6tYc/atJ4y1jz/ip1NVDrhDgXmcIAACQGipjKQo3SUNF0VkK8iwvhRDnnkKN8TyF6W9vCkepJIWnEwDGFsdylEjoSJGCjBXIFAGNnNz5JCmSREg2Usa7YKI4kaaLao8RK+PDYzOmStefh0hRjOJ0FSmzzLDmFZFO6E5FZMTwMZgUcGFnhuE8w6QhTQZjxGu78+4yJjKYJspIF9fdV60Xd55hUV5SC1c/mNUPNvVMw3EAzdFWGMfPANdK1Hx1BH122MpzpSns4Y7o/RVTdhA1R0ExAYU2KV6USGOYWYeDd4t06nARI+7BfxY9d5GHssODj4gGGbErG9L5H6o1pfMI27ohXofXWZYevmPcC3CQIkMOVnLi7B2XMiBKnQaNuvmNW5nQpFmLVt3LAnceZYNnBJSiDLzKQWM0gWg9oqCiodfmuhg3rXLEUT190otOH31jdMttse4wOnV8MCgmI0MCBxdytvw06tXSOyTSYVoGrnqzMwnMGeL8Ntp/uPdJGsmlcPi7ScnKkGl28mYZy+LjHGc8TuBy6NA2MR2hY+Mck7ibjtpc8y0wzw4LTfaZCupnmi4ga1kWW2KRQEGChfjotFBOp9MryFecBIniJUuy3Qiph2bXM41yTEGDFClmgnTwcq4nI6iE7WmwI6Ji4hKSUm2xlQVLVrRTZSoKlCmUq1CpiiLizaxNXp16DRo1adai1TjjtWnXodMEE00yWZduPXr16Tdg0JAppho2zXQzzDRiltnmtKSlalhO3tKWlV1OueWVX0GFFaEVt7wSZkzYsXcAs5OjcpflMcIzN6TVrWTaqEq/8yYlEybcYENdcZUzFU9wyXDG1ASOoOunmS9XkULFlrW6NWZ42/rWyXaWqFI5Slvfhja2ibEvvjpJrQsHa0SoMIy4zZW1pa1ta3s7Km9nFUr4WO6ex+57oL0D7W7Pj1uzUlmrtMcTHj4J6em3W6Um9oNcqTSqlXqlL3oGytj1HEhsMcrYWZa5YTl33OPP0gUUKyO4Wo8WZlU0KgxXboh1t/aajNgNu8HNimexJWPTqcmgcx3ludG3T/dHaAPT0zo3y2tsXE/lfJakrpdDPp/FetjtcpHrOciuLQ3ofuLI29nROOpeFHk+JFxeWL/b5GWtJRfQk2WzbJsZ5VyKtx73C7qp69bqbaG2eGDMJpqJpcWmmqmlxQILmmBpsXdFaXgaUgM07jZpVeXksk1XzFlWbcw37NDzIT5keFU3sxomZCSjmIjEgbl1MIRr2kgQ2Vh6bFUkGqD1H8HuG6gvo7I4VAMj8NHJV+wX+wRSTzvxCciIpj3OR/2c9qpy+eiKuMmX159rHnjprPmiPJVL61IWtKAVFVTQgla0IsE3ADOONdyes2c8zYwUM+UmGqMNJogxjbEXRswhVh6/oyirWBEQMQItAIgWGgEEWnm8kQLGAIgYgRYARAuNAIF6BJKmbaiJmW1uQqSPqbZ8f5GL+F7pd6O6VtS749F4PKpt+k37XkXPu9j1Bdu2Ozf/XFOZ9vvuhoQLfEZ8456JQsKZKCeb/EzKzox7J86pw0vvvRK3stU1Pj8JjrjL20vrO9b18byfeQTtdn7kU690+K1iye+X/L5v8dvIhgCRZYPVQ3MB2bt5WhaXGZzX/9krrLe7fX8QffX/deY0bzkAAAA=)
+    format("woff2");
+}
+
+@font-face {
+  font-family: "Creepster";
+  font-style: normal;
+  font-weight: 400;
+  font-display: block;
+  src: url(data:font/woff2;base64,d09GMgABAAAAAG3YAA0AAAAA4SQAAG2CAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAABmAAgTwRCAqC5giCh0ELgzAAATYCJAOGXBPFJAQgBYQAB4NnDAcbTK9XxjErAd0B2S+FiiqNRJiJVhJFmSYF2f///ycuHTI2jjgA6+ozq6wm6WyFZxTFEvAWkRE3ROLey2sp9AIZFCtNduo3xc7h0vlwSmKnS5cHnjhDJJuhPFdQviY/phiafOuynRZSkcM+P6qylJrY7Hf7X/vXDPzMX/b/po/R0EhiDtDcukUFsGBBj+oVI3KMKKVaoiWkxSYUsKEVi1JRUQn7/bdQ7H4Qo/6Ff577+SMXTT+BBzK3nVFSleBs9xEtUov/pz9Cz/3JLpaARChgCZasBh1fCZYVuFMr4LOl6rbEuKOUSn50Q5cT2dSwsgHqnQfhkSIFhtEgUlhICgguvvl3M+fWT9ZkEqVK8Ww/8X/C+3HYBjwnIviJCE2YDjZuysEG7/PuDxOnPt9PdUtg/nOzf3jfYXslgrQ0JAEqI7XpPBGB8p0v3s2GbGEbuVGkMaA6g7TTec87800CfJezV6tu5gHicxx/XPrpphccXbCyP81GkG746Ak1LXD+3lJLR5vQrG5BLHMGoQYf36Vv9Q4wmCB3o68zuuXSuoW6N7BLBnIJ/qTTr912t/1ES9ReUVHRLEF5TWu3dvtoZiSNLQ8IDAHLTr4/UJIjkKxD+F9V+49spfZeXIrczQ4vtBub/uUfw5RbRrKVWiCToCyDAEXK9guWNWlj6sYz/2+Mp18YGztnqVGBwy30flDdeAH8Mx0shD6uMGULPQC7pmjoaJOWmp7KVFRVGJs+76VCNdj/P9enzdv33wKnPO0yC1VEoWvM5N0MvLwM5Z9sJ8li/tL7WUwWZ/7C/CyjLKPCmVkuAKnKPXXVgK5CkiRha1Rlhayw5FpVWSOrVY1p5RpZvP+ZKfUmaeuwDSss3DJzaM3fS/Nz2KNe+trXZ4+2h3/u0fb63gJWXFbE49ESyz1/bm1Pu6dT1LBQWMCKccM/1T32mq4D1BWgBfxuk4n8rQu4QA+etrd/OTPdljxSkSJiZbASJFh7CWm42O5/i4Zt1tIDDxVk4re9d4lT0QOidLcGjLGsl/Qo6B4FAKl/zWAA8Ne2AYBNfgLoH+svCBxAqmYS0j7xXtW/AcGAHO+RDPnn+AGuuUc2AFIh/+/f4TwfjyCMKhz0VIbaY4nxnr5ScFWG/QFdputcd7v/Q+Wxefo8AU/Mc+KpeScPAgH5z5+NrC6jJSS4O4XH5HGP5fhpyZ9nP/PT37zc//7/793fMmLYAUM6bSJ95M4ckMUD7Q9AAM3LAOij9K6505vmrk/NwV82hL9XDn5wQKCdNspyYA9rBlIKwBMdEoVBwCcStOxqVwXsg4A5lLDNoMuJUOAtULEx0AAzAe27JN9IrbICi0niVclmOtiF9EsblfCLg+a2JLphA3FVCpnPTMZQJRFarb+VmGxpL/ZMCPEnZ6Xg/BJIZAWBRpbRXLk0l0TKZYMkZjCRlOnNWqVdlRQcmK/en+rG0rG8eNnMMu+omPISXZa3pZeTLduHEsEkJ2oMskNTkgMjE8OGclXkMI4fe4V+QlB4RGdSRFKKZ5K1PT2NuUmr38rjZuNxJD9HD2OsqSpF7OfoiJGJmEGBzJbVZLWdLcdMbq2zwZq46HRB9rh4yiomrZG+XSv0j8ATl7HLEhIotFYsjxRYQpcYsizE9jJTQxnfQiATMshksplZcOdqcXSIzwlE5zMyvK9Mi1EcbCRrfV9qo1dJCYPoGYFot1p3nNdGG/0jnl/8oqcX287ljAwpvzYuJ5EyIAkxejbzDRlNDe9/ulAVI+3d9/pACUURYuxQVuqka3U2dwKiX5nUl6Mh22TtU9i87GfvJ51OUy1E4QI2Wl/Z+MxMimqIOipKLN0i5rc4FlDRHAqeGuCAWIUom0Rbrx7DopL8qrU0CL+p9jmd0HA07ai1hoIPGW0Sm2SxYd0wWjLCduOTIO+D03LwSihxABB9x/HLVsyf0kjAe4NY6lKehSgKhhwBBERMxm+WgewForUOPKW9jmpB2uMFhIB1KBCp5ZUwtlLKKGVjLdUj0xnEUaqMcxE+lDPtv1gzoxwZvVPEpkqK4h72Oh0CFxlwDWQorPHlYWxBxKLcPijDyPQaa7Nycz87VRM5cGQGM61YWyUOXHDymiH5PA3acfll9NOHiS2lvtpX6/zZir+/u9xpwz8v0lwdF8lhBIAc1u/yLzzsO4MqOiierL94nozJIp1S7vdm90kKyiSHNYA8/rtUEKEv1XFMsp/pkmZX7EyItTPCMyBQUGmhDMH4EFmIx3DwPd+9v46sGts1zmx1fJMDYoZQxWjVOqbxVW454qTNlJY/4SKNsbg6I+cgRMN8Rg8akf6IFj8vz32gFEVsdoJRZvxoeV6LtCLtS7vUGUU88G7P9TLM3cf/HwbkTHP3KosD1HkbSihZQQJyahAPa2H2RghRA+zQ+J2U7EV/22ysSzMhESKzAHHYsMfY4DpQX8J60aYmkegwyoE7RvnGc4Y0pcbH2Bju71fUspKRQebIWqb7UsYc1anlUR8Qe2YwwnSItKs9F/+uiCVJZLZiKdxh95FmzWVpjFBopGtP9Q1vFwm9+1EcsDwJIXIO7+EPThHDsDgUKz7t6ACOWV7nOCoD9+yraoGeVuEi+pED+GdicwCYijCMrGINImwyTuUA6qInf5Edp4g9gV7bCLGcS97mCDzat7ptN9xwgDfRCTE0UMkxUINkxFqBNbURan1A0NAhyln4TFVabTST+Z+T9IS20NPpWYxxLbaxh74c3Fu7oDJGokHSGD75JHpXrwTkJP8TU8nJYdtCErN8wIFfZtfrlnNkWT6ujucGZ2vM9r+bnE7HwQj01EBBZXWraTTp2uJAhIPiSeP16xpVzLLKcYrPqrxpUtV+Ij0CX1QC779LQivLGGEMlkJcGrI3bVfm9i3TaPR1rGtI6AHJ3iy1LHWuOXub+BDyKBlJ7rW5XO3q2d5gmiefaZYH7o5WSY84L6DFaK0B/zYfR3ggYh4xB2qZkiUYYFZJAchcMnLDrGj39w9R2sn/3p3z7Lxmudx5rhm9czJNDw9lNueo+WzFMkKIMXTUOI31wtbMxR9Pr6qYaAKFDN51DQh6Via2ZI0QV8qkL+aKTRYaIbCwuizxZKYVoxuBA7iS0fhhd/1u/8Ljp3YPnab96WNSyMH45DarW6lUstBChL7XFQkAn2sQOqWAe8GQ6RwjNYGMkE7Idlwf5rm3HtCIVyUy3318vV8z53+yO37kDTKfMyDrgxc266d/srsXx/Oz+X1he3i13e5vSSRKFrh1seIASAWVgbbe8bjXAkt7exihCO8X13vON9S86iQmKzHmJiLtA9MjYZYse1YGV8ZJWmebfNW3vXPNl5Ri8xpH5XhYIcyhjtOyhBpk6CH3okgq2+xmIwmrJWOUWiKzYQe3ey6oVlsxoJj3OnJPOLenSx0V5KMkmlZhHZkevzWvqLwvMTZF8uEntcAytsy2iEWf9Hx73tBITJdN61C07VaPbhGrA+cwf5kMpiXn+8oe31U9Q2cQ/EzhAxOuU+uJoo4z39UHXou9yOgGkk771lsJIISTxsNJi/txDHBnJKzs+7MLQlfo1XexrtStyhhk1jgQKWEUtmKDpxuVxsog/iL7lentmnO+OFCiIzbV41BKFmIA6NoIZMx798DLGN1qo4iMawkQ1n/fjHzL9MXs5/muOkbkwi92QoYcFjLZdbv/R7sXl/0NhGPvZnUYiTHoNWLWFqkR/s4rhagYAJlzcGPLwr76ERgA7HwRzvWDl+ClX94l6puNYh2UNdrfVfbuRVIqzSlR/6MAfSrZdsPw1oP1kehoHC39EsK3EDL0scvuzdMZ43MpHy72d55/73sbcLsbro0z+LOziUIM/iSm5Y1WQMqfblGwv/fmrDksb8JFHumUc39b6PHp06d/vr7n/Mytgyql7N8d4ggj2K0/T1rY8RV+wMOVHyOrMpkQC+XUD/gw73/Hx/1gYBRJRL/jWCQckLYtEl27LhotQAHpfc+O1hizufHiaQAy03ygYDOrUq4lq7qWGNdY4VCpTQL2ZKlqf+/TYMTcvODe/7VroMo5KMh9YldwggiFrAsP9398JWTIZ+EaoaxqBrOjepKWVgJ9FVFTZPP91Kyi7ZiBGN9cuXB5ZBl5ElCBmjsPsA45gOgwGYxkPW2XVRux92xA/ElzPB3TKVFUxqdj4OAaMcoY2aZIxvQwWX+78865isBNTLXf4s9Q8Mfe0YDeG/D0MV31BF7Gw677Z+MUCLC1jDYQjMbpdpscZDMRfxHcVBjVt2T6spGMWjJyzeOo9dwmUROwZojJjN67Vyltj0W1Y2lW5eCYVEqbc98TRiNaXY0qnN5gmQK9BqGndYNp9KduwwgQgFgjhbT3ieY1MF29k2r0lanumT1sZUw2jMH5ieH+GS5SaQoggbN6YRTgVG9vDOf67TRAyEE4xySK90NkwaHPJ5JGt2/d+WhDbbbvB0osg9Ug/IoW03u+sEyL2h2q5YR7041ZlWUjKCyRc8mhqCg6JS0k9AJi4JxLw0Z0RmsQwtcvH0riSQ2zAE+/Imt5kphu2TIzd82u6m/2+bGnFNWFEvp/pY+3hBLr1VwD8c5PQs6ZgYVMQFrqyTqgvgFVmFm2xC1vCM4TxeYghEMBsR69ml617KmFUv1dr7rOmhQzp/ZGGvOLzTCgF7aF3APLK1DPEKrg0wgUCWlmhHuXHCUQFQURCMRkWdmbomuVJ3QuAsmi9obVw6Y1Gaz6hxAAIsrLHzzyTqKKZdM6921g9G3P7g6N3j5ClL1gJptlpE7r/nSfy+c37eU2OSE2m6KuZ0AsbYweAQdPXG32x2fRsFwGq9VRMgLQ7roiEYF8a8Q+W6d5CpsUvZTU0nYx4SC8MpqbFuZ8KJIaODzZvc+QwTJEu9rMA8yQrZbscd/zpIhn4nca7ArKNlpwEF3gkfV1CI4PWbtJYTGn1bMQ3XWrVBhjZlNeMlDr04pkweraCdLMstN7nzM4IReuc1QBh2OoAzA+XY1KhE7N789eMHreGxEcUPWfaOWwOPSZTRvNyd2uIXPLs8zwTb+7nk8fqqQhUh5fBeAGcD5wVxLK6ZZyz5WRZQ2jlyyTsSwx8qfKOM4RT47YJB1Q9EytMbW2QyW2+oyOk/Kr5uSJIS0KPd7lm/Jk2gKJrWf0LrxTTPLVaFQSEjSV257qrVrAQGq7Ky8Y9uU0FNki1W6mYZWy636C5X1vyAeDaRjFnXOmpPFY3/6zy7twgfr8LeJJTBgDFGS/+qiLOTzAi938ZWJukGoBqJdwAK4BATfbG1IyPTOlGLjqOJUP8ICdRKCGcB0jnBTJDfCTawTEgXVYxtoMybR1qHkbB9ewub9dPS2D3ppVtyydrq2fjAvcPO5BgFo+LAs1ielc1Vxr50rEGtMYWKbNMs/ypZcWWmjRjqhzkJieOfGnbdh+yRiMZnmZq1wI0V7V2qByu73mAmTbjScSZEThdv+PIDIqY2zhBawZnJ/hmEd4Rnd1AdW3V4lbOThbS85RvRdhfPMn/GEfetmV20rXHtP4DMmyiq928wzZrQlVUNdFRbU1gBWXpLMqL4i0BZHZoypHCIZmGRQvJXm+35iuQ9SNWXr/de7SPw37F/NMu0pzw58iKkIELPNWe9Lq7JR5CJxrzjU8eJgagVFfShZUybLdfXWWnTmPcp3TC/0H8ILcpBn6kMbXPk0mx8lziJ6DtLFBYMRxGMQ+4hwzpvt01O1bCAZ5Jq5ZHabLhQVFkU5c2jKXvJNzEaIqHtYom+I0TCCWVmu3DjPqh3KmjfjWAQHV2+HniN6y0DzcDHRMz2Kpmu1btlyz8V3Vvp+CkhwxII6WLxp7uEijLsyqs2wa37uTJnF+xVCrl1LayCY010Vi469a1fzw9uCS2A4ckwQUJ5mOY+arWx+lRuz43Y75mc3ZOBIinY7n3WPK7q5aDfHJwZx7AMNPlloFQO909hRyGSl4V/Mhfvb7rQ2AeT0T2/UDIyiTIrGFUDJyrY58M+qmGDbYPFR2ngrThhAX3JDGt1JFkg9gmTqte7UZhj3hoDSVGK9mDgJPheq9ME1yUclwbIhMmpVS6OsGlRCzw3hgh0sbD1xMLZdj5Ou9lBouSEffQ/N0IYuKZOz67EVM2y3Auju69tb6ipzrfgRvn4XIc2g+W8/BRicw7msfHyOLbtOgxn364nWer7J9TjvE3pHI6ALVQjuNOttWg2A46C86MFiiGqB9eJnT3VvrqlnXl9mSadFsK47onTEsP7LaQG9IFPM44ysxILYQghjpUn3ruve2mU/n7CGPjIa23mpINrO22HGg8rY4WHfbuvMIDmSCz6kzlnV9mXft/0PNudCH7XbbbovWqkHuai1mm1xGxq7cJ0S0bosDD4WgPoNmWZm1rLXePEu3d5/7+XREH6jNYEy96spJh9jsm94R4/0j3Nz/5HSarrolK7FqjVlrJooFHIkPPyYCAAKJ+KBISCNq3V07RQYzO2MNJoORY9nymuYflUxzeGzAP2wNLnSsbztLStk9xE1saBXyEKvLiHdHmAOwVupQJMbRqoeHFcXB2E9xsr5cfjm1SZ0bhdyKOl4l54210toj9TGqDEuucmMpzcPxKiGKt7hUp9Ds+OS0mQcso8RM8W35oCx/cCGycw4ajNzFAVGXadNTcnPbbe2TklKquVoZa3AobJ8UyemrmWHzucCj4XiirN1JklfaFWW91EQrU4QqQsmBwhIZR5v5NAiuu06HN2eeAff0yN3Pc2LJIprvnTy0WcZkek8GaZYN4kFSg1gmIdIohxDGrs7m9NYkjcpKpaC9Sum/m+nZjUEFF4u8OK0s6KluUNGHKXHjVC7j3PK7W7bMZKjqWmlv/Yd1HINlpmS6RbOZtVLmsLbrtY4nE+LkMaCYPHqInbbNBkTqFujbq+227d4XDoZ/vLGXHHxplDXzu/28NdPWU26j09PPHhcHcLROLYvVLWntlKpwjROIKuyBLSC5m1PRm+aQNrQNhmEgdDqkGWNMiGF9AeP7sBAfXP4QGJH6XrdD/0rHMMU5KgAaIlJtn9SAfqU3PpF96/scVFUta7u9c1XPmttUb/j7/tl+paLpZ8Z0neE8UX0iJVqP0VpLjnvKmxRYSYKTzxzQTHbFzttbX2YJkWLy9UL057VA1W6LCee4OU+GhDfdJjlWsio+mwOJVJu+d73H0AHZV3Z5H2wmkCDGFRNKYXnexxjFRH255WBGnNdCCwRYrDGjOWsMGeWPWVW2X5LKxamGLd//n2w7YQIinZ3JGQB+WJVJXjyF7as23V0OnKNtAetaTndcRXR86E8nV8Fkw7e8Wt61ap1H1rmmPzniwZ/5/UAXz3nbfHiSkG+bfH7EdNaozU/3PGlWNo76XN5yM8Xz43lDzq3uh5qOKX2YuqQsrQGQXoVnXHz6tZ6GkrMC0SSTZWwklH/eTx5A9fVkRkBJmm41lXF8Xx1Xmst4uWUyVC4ksXV1IIlsWLtQP4KzWkw9RfFy0bYweficArJKN/wFcaA26O1W85GzahlGOmF63TF/xQCAdF8aJK2la98+/ML6LLlFENMWSUKG97e7PFCkbIkEZ2OLVIj4cQF7w+l03qyodltzAMsCylAQuzFSgqNf+7fZL2SFEADc5+BLoftI65eZdNdYmWeWVXKydsmO+QXn03Ev0KfTFJC21lA8PUJk+OkMok6GpDLNe9bs5gKPPnI/0S5GBAFJI37rM817ajjqNjttPq3ZetW8Sh5Fmra3TjqyR5//9HGOWFuNk2M3RNdmg6/exU3GOpPP7Lu1t1e0uwodgyGfth1xlLSH35ALR0/WFWW3daGsgkEzKhoswIBtuJ8UicnVBSgIALm1dJ44x5fh8NSSc/nckDlb8fLqxSX0aVVfTb+O6W65WFHlCX3gB7vkI4UJuqMlp3dkNlaOSg1i8p5lw7p5iWoat+t9mWW1U/rgy1iIrI4x2K2mrdiad/+V1N3NZ6FtsWU0v39+66fPvY/cdF0h6K3F4b1AiNyMZpqbNDimW973acAG9+WtDl7nk77OWowJ9bEjHqWU+Fw7cSImIvxJtDE1D7DmwzDcx1vf7zzZYYZKsXzfO6vCFxSvqtETia5GYgQbd4KEZzKFiHvPFKSvq3rhob8YvjVast1SdyubIxU1TKiD9JQCl6eaioz9bjcxv3KmF1FzkAbTtg48ZXj9cB+ZqR1X5kXN5CxLVrl85niyA7XpQ5qysSw5Jt2BNRljdJ+yx+l4vNwVLPunRi12IKUAFBQoGTlrOgfQOUinzSYiWUcrv/ZzGGk8/OxGCGLHkXFykvb+7OFPTOxMakKrWBQLozq9UmVxOQgKmaO+LTPVE/wTAJBiQil721INGtuzIJwrs5JJJ1AakWzo7F7f2dMFtcYm7Taa6Sku0iQLThF4i+usOjWwjB48DZYgMPToYpUhs9QGy/iQ0y0ys5uzNb74sduaJdWqVnr9iq4kFbpFpJU+o2zPkCYt4p3Drkyf7zAHl9vmfkCQtC7SZpnOHnqZC1zAnCCUmZ4+64pn/s/XANNIZRSmk2rQro3WWVMUZkbTQG7Clg/u97qyiKDvTQ1/FvKnifoYs+TAhZ88XGziXX2rBBfvvOuvne6ti0T9jFLgpFfKXmdavTPZKGu2f7gCAM78yotkengzLOuWNS/w3julZ8y+FnWra/OqpebPoo5pXQghTEYO4Mq2pZXgxNbQ5xrLsRhKTqCtIZWytrwxNG1s+l2Z+9b1vVMyz9gYvdQwDh0Mw/KofPQJEUCocUHUJm5hQJWLqPJRY/ovOLQxCBAojBNdwaBX8Hz1cHG6nHCO8GIH/Fb6kf1qzQymGuZ4zBome5B8k8hdNW533rJsyd5+9/mP8jihd+LIP2fp4p+2v3gm/LyA3i2ZLih9nw4SzvW9De3VY9plANSNyaxDyIt53rF+kkTbZ3smTyBQ3MyBq946Z+evfWxruwthMRk920suDcMmpY24ehz8REtD6jqorNVUBO6E6jFGYxlXCyy/JLuf0zM9WVfZmZXSNflfYBwD+nklrZULA3hdLaqk2dl+T5r/ROUyvIAiyatCGNBBYUG7cAASEU40y5vq3/oyZ3IkWO7u+nNfZqv7NZOsjTmPGvqvf2pKAmV2ltGFQW6m0w0HSEkmqmUykKPZt848t8aIs4twtEMpyTs60K++FIpiGEvry30um2WMyH3IstKuwHmelLbFdJCZJoBv1NT/F9dXs31HkaV4pwyEQJwqY+r2RnCdgWWW/3Xw6RbknUsFhfbqMPa1QNmHWGqVR+/LPJFlSMSC6DGsF9FdT1LR8fy4J3MrSsl0Zrl6FEdgb0iJYq+7ulqlApvVrFSbKm0GgT2Ne+MCxryDmF/h5IBD0C52yxBJyJ1x31uLVUuLdHbMpvjPO8GZKDJPjkPy5inT7Y0xiE0BX7rv5uOfxDfWssfzq6xS4c2tjqUB4QMU9zQC8bahVcU9oXgHrBvkDCSedlI3iFRSTkXgBlGSFeV4erEvpL5KOZCXHNkG+J684z9cJK1sChrb0groX+McbEKmWoJpfbRmRfYs5KxhcsQttxviURrcuzwryUQ9Gw3XvK55t+qW+XXxcgCvlNOU/I5lZ4gEVTTQnQkaLCX1pEjcoMjaZXAjq7KGvctSjgwsHfMWdz2wJlOmry2DqjRVWp57fLWet3jWtbLItEAcZp1Ic51T0kF/K+WsAUluCldBkRkOaMcQEDqrGnD12JRIBaEIpqskXX+P8/WG1zUP9+GvzTal3z24PwuOn6lWSsFoCFnn996XPsvS1O/r1hViJTQEwxrZ7UoBwgxyVmd9ug6h1CnVWFby72AM4MZTe8FR/Gr2jBBP4jniodGan7lihXzlTqdUkjrgdrmEFDCNlDVn9CRYxYSQvKMas+kb0jqwKCNRglRR4sE/3DU2GwjN3M6DEKbdAnxyChFe5saNiLl1BHc5FzVIjeKzgesJqDmIfL7wFBbtQcY6AMokbMIwmqaRwudQkaN0Bv1keUzJZrFUDIjgGt7odRpPiCd/UgLaXH8n6tuKtpjHj3HhyFumBdhdFcK9yvzNB0ZjVobNpZYkO/p6DT2VDkhZqGUTyh6By40OTtaVjlARtauOapZU5yIO28EZuk05sTQ9XI8XG4EZOXmVy+SO/MXQEqSNICOOVVVYDaSUX6rj62Png7EriBP0KTjYjpn79j1EWSDUEYYPZ4MUeqfNXgcJoHLJCAzosrkhRmZW2Dk2PJHTcjy7koco3XwSy4SNVJ5zJ0xV4sk55181GS1L7PSRBQMSGEWWzUJCCy6ucXBc2SEFENt1pw9SLo5bFynOftXn6FPk5OAYoJeGG50mkOFUZllryG+lhaeP+iGovi02QeWBR0bOrqetsMtkm+RLa+OUUzpIjnQO1tc57tkdTXgv5jSoXLai39wUBU8qB2TTrII7uPkbRMx7RaA//Ql9oDl8rVkoAjF7LANX/X1gS+vUQHTjqfpneD+t5eKqinYrqJjv3UJqbzJnNSlw42EcIg//BaLiZJRZv7HpxNV4ZaHub3ixF0oNexYHl6bmoPgbgi4g7G31UyJ6x3RMt88w1zTlDEk+7bP7EF14Giwv9/5bjzXtEIDcX7CQn88QhYYD0GnOHAqKUE9mTyaqv1cxx9RIDZumZRNIBXz38H85yLKdzdbsM3GSnLUxu4Tn205+b0sXjymdfopO93rNBeF7Ujga0/dirBKUEK5BCIVuUPXqYd/xOlh2pVqlt26tezHfUXz73boMcuBQ4BU+0MaUS4c9wXCPJQks9KPEYzX+7pR/tuzrOHNMR0Zw61qI5HufFe/Pyo1Sm8EJYdC0AepWXOB1JevIQk7vO0aNIFkYxiDDQl8v0tvk2T53kOcTmSFiU/EIqMhhRXHkJfsCn0OwrK757y+7/9V6AzFvt6JmBfxqBCARt+0St+OGb1tHhrSoW9U8LOT0VY+o9bidc/yoddZrG4Y0HyFWXltE5dtPu9ry4iCxyjHEQCg5fI2D25WDGkRKhLYdH3jk8syZCOsl8SU0g2EWtQ4gNil7GIenz3Bw3rRXyITQZtvx4II2OJud1pSGjDQHbgK2M7LVjuzmlLoO3n5FRtMccCNfA3AZNVeI2INx9HIhpnp7hcNAF5RZZqSZhUGaGflBQ1sS/GhSBWlJvG0k60ch9T+FqacdOyqUoVvMbYTN37pFmRzSJgKbRa6bbJ93MQgoKetDrQhUJKDf/ulYApTfZDGtFThU86RGkTXY6OQ4fxe573yfz6Wk0As/T6dWIdSk3SYeaEMcpruYmp+A21ABNwpas3yxjsP+y9eCmzM0sSvOktn3rnHWekduOK0DG626XpIdc1TK7b9fb/HFKXZ5cmGDGFISyauJMabKcN+2ZGCpVuaOLGRvDLGev9x/z3Se95trX5nseQqIrtu2mNCdZVCVKQ4Rf2UqSqzFFeGy+j4Gw/Eycr8b9xchO6wYJIhvbwuEEQA+EBh6OIB4eaALTmpU8GIcYmz+DlujWzaNMphKd1R1fcOCkfzhnbHytsaCjEiO6VoI8U/sdsmoqWFD7BHQICpgWm8hCTdFCFFcGLFCZT6zXLkOaoLkB66Aqo85zYfY3BJ+pRuKK+Wb53i43xt9eAlz7hKQmKP280GggmxastMkWbXazXNhKlH/xB7iueYVHiLqnI8vw9jSQvwa0SOs+Zk6U+fYkZIq/CjZd7SOkYl6yJ8lPrjo3ezc2L8vt5PqeEryJjemq3ltzu3hTCvz9qh9Z3awcmqOcYyhhs5MN8zIYhB5PMC1JxHR3/oYZG2zg4vbWC1hal4Cq6xj32+o3J8GCsw0K7CXEGO3NeLrVZWEUe06BQyK3tUUKirhydVZbtk+36lrLp08DUNG+NcQYknaNNpeNJttaTXvMRSAZLAvZLuItGoIifBWHBygIOPJqvrfYFGC5Q2qlECIDvB1tYM+zRHjzJHZgLjDG9xG3fFQGrt0l6Uadj2pRqReeuKb3I35llouKg99Tx6sVcy5c0CPhYStxdfQZc5QlmIrNRganXRz9oPAXWVaVP+GMyhS8jdP8T5SKaQk+PHVomgYAE4AQaS4tGiU3meVlHz97Zgqt+5YkXhy7ss4aayTWT0HFBXiDq8lM+oK5spusel6metjV8mkLbekp9odpm1RhesR5rTCrEV7zqIEOmd1WKZVG40EXAqK3N9fHTj5XWh/By806pEeuhH+66nilkRioOmZCp/Lr6MANBF5OFaWystdE00S/6JZyP0l8NrHuaQmm7h5DP+Xf1S8lNIm4wd60svlxoezF2cBoM8CCtnjayTHcM8elEXmh/sovZJ9tXKmr+hY6iuLo8lCqt/sK/7yDDN+hz0FetC88rBqbQqpaw0v+GrdLSIB6XFmYyEfh5agaOHamMkcuYFyVghR1bJqJlo/DpcpwNOLUBow7qO0TVDdcvLbh9bZRq3SDS8kAsAgWMvZTjC8MdhXuSWxzezXVhuYoZBIrGti2ZuFW+bA5LeIlkZySI+PZmsMORmy+iHUf/Klj9eOZ6qMYfilJVMvZya7Q335f9KRVrTR11xZsPRnjxI+FFvMtZ0ZVYTp9y759i4Y8hhI7+bZy6T6y91D2GMQ69LjPZ8q2WwRoA2aJXRuLrIUbtIamzR0DNH0papawQhcBR/V0ruZLkpzTvavnNqktJqealPuYfwQ/XF/6+A/2JzjajbLvFKx3F/m833XzwU5Y0ePqQWpC8aKGoiVZXsgLbfBYG3EHovyroitOdl/uNtuHM8cp345ECB63a4QRzM5YkDF9KXuM9qrDeDjzaEQAw3nBJ5MEMWFa4NRp3hmphVfXCU5tC/SrF0u/3qTjZRL/dcx7PoDIdM3K8T86YJQ7dV0WnhcFVfCdFt3d5cjoFCyik8VJvVfBZH1tEC5tSh4KpCg+FNl20pBzQXemVBRE1qJcJZtvDAHCm7Q08Cg6rc3Q9YMTs9MNiJPq/rUGMfm8fGiOaCvALun0fhiPwxrRhVS7Z2Kk99KCirRDfNUBf9mtsaACLGis2Aj2xxcFVIKb7ZFUrwPChoW3cPTn+0iTfVUy4Ef10//dPMwQnWT059YG7SmL13Vl7nJM77b966hrKC+GZvnTYER9z1u+HwcCfx5AZV/z+16rNShkF9Zrw2WWTv/Tr9SD8Kz2Rsqb21PRtpJA6MUATw2dhEkzwnhGPWrlwYB+M5y1NFqc/sJJ1XfmbngTwN/2K/jaqjGNWRDKAC3UIvqMhC12fDPzJfy962X54sN0mZ4OGAD3DhIPvx3jAypqNAJW/RDVpIQZvWDCaSaiMUkKau+do0uceHxVDRSG9cmPrO0ZCcKHyC9vjpMDw7c7Z5USUbgOBoDdIVk6aNxUt2qYji2+/6dPL6jWkUEnyqyyA5vaXogj/BipYxPTu6CatiV3odmh6yWn+LxStSrVX3rzraIuFv8AWtvNPribM0IF5WUgozlxYCTw3106t/wnGi1rrfY/il2D0EHALic/KVVHuuWy6Q25iFscohIZrAZFavJx7xfMTTjeelJmDXpGcVquZuc1jn0Mv+lT1OJnCvEpvCJrJcqqB6aPgFgbzdAG4b8wDlbpkKugVLHyxigMrornq8P9LSsPRkQl1y5q6dAr/f5sskUS2NarHhrIJvU3H6P9iIY1hIbIVgpG4X2g0m5HDVstHs897W4wRNsArG0grxy1ZHl1ODtmB7IAMe0bVaZ9kCV2K6hZFMXQK80/UKrq4jKvT5vs7TTym4S1Wx7AC3ecZf9O/SUElDq/XQMlU8wrRzdCubJy//vBvq8mbUGaTzOmc6WliLWX2axcGtPUbAOa6QknpULnY65tS6q8NpCX9/fbiISxWU/bhfPwBSfhTA2rraxuHM0hNSqquCM7x8dzf9yEQi+bQpV8olJUpRJBpd6cg/gbzvFZHu+P98Rex/qTUbFulOpUc5Jdr6iyL5eLU0XgojrFERj6S1Ygtm0g4EekOnCCzNSUHKXPAV6wmGxrTAOEa2nx9ned0w/K5pcrRoe+LtR5CEgStEb9x77VsCXlD+qW5YuoklbUY5ewWVN6A9/5RcrqF0tPftj4+I6Wb3XBAHS5O9sEX0lRs30LlwT+cXuA99fEqEhOtk4EUJOo9euX1nuN7HajvpWT2+1W55fnWXhFj8b4ygRtz8MdOog5loggZP6i2RuIT+lIUQAHTsN0FHeOu88HcNez6HLa2u033ouHAPPCRTuqMugNh0bT3rLCe6zTxOvNMg29Crb29T0Yqa8/Kb/yeP8dlR9u8ctDndr6H/FpgAWhPFJ23yWUGVOiLDdVuLzslrAcGtbTyBUXravLEo65rHksjU9MvSjC8F8Aplu/bblhelcCg6Yf/xsp/EtN7afHpLyZ6peURJ6NQJLvpBgsqwoFO2DDihbaN3lsr09w4K02d66kLrr/U8fasyq3xkPYRGnzh7oFkT+GWpdd/i/ZnKLBVkW7fGoWWpIfF1z9svBZkenW6TscKtrit5t3txhz+n5+fLfU23lLa/k/yWm3o+iNOT6+18cmMxVV1mI0BS4cuUPR4YDs68ACHNkGQZv3LkVtKw3Yk5jiljR9WYVTiJ5WmJaKUFD7Odo29aS4QlOl4CvNe4JBMzns44liyC99X44ggc043sFOqixP9ivc0VyZEixgenfN+aWOuL6rdjsFFXYKbMBhDwqCYD/ctG9bfSJxkPY0esM0MTwckPQ15UiKPJLxDOSojqegUbitxDpRm7SpJml7a9M0pcKw31zAkvxKR/z46JXrNDsH9NCTaMd0eP0VTwSTQwkXwUZeRj9Re/GEtyfOhjA0XSusTGJhcpxp0IzfAvtYh5o0ut7428D2ALY+CAPSWX2h4ritMtFvgZmXobrbL2rKh1z8owifWxh5mTOJMwqrXNnDin0Mja5/niw94QvLTA42CLrICsXKvFR61FTjCEC4yh9Ixvv8DPJlM28f9MjTwB/n4KY4QCv5sdUv3kfp9WLTer9/LUU20/J9nsrkJZ3TNEmKtcDBRZ9NOMxDhTbyxUckNkYV4Ysq3KGwap4Y0j+HIrNrm9AZz0IEJ6/xIapTfF4IG7d/PVWO6bfJPvYTbbgu3r9bHtne9u3+sGpXLAe224lEhKz0zrRBVo+l5pGufrPbNx5t23dRwF+QJYkEvdkK+kKNXDIYqTno/1CJBweLprPzgQ+1K+EE5tBLJQdtmgkv4UXXw51i0ZBGP7TVqvpTWUQDhhiGB2/fHJLLr/1LGIEtQPpP9I9X7Mkex4vvgXL68G4WDs4wZnHa4U70HqWMmBtKrycwQiR2g8j9FlsHox5GAGKLlwSbu8dZ7gz29p10GffNNWysSQhAOIikRA4FMDZCAj2Pxmv57vzirgU5UL8TWeS5bGZTBymSHVBPKrsI5Fx5HwI4GBx8XwIqWeV19VG7tj+hoQvxwCD19zt5wwUn1IfY9rsx7YfuAB6/CL2FZUP/BcWfybhwxzmxJ4N7ltqoq23JBC8RxMGZ07x8Bpg5JH1adttsQuH+is58BzHDpd1dluZ2n9NM1Og7Y3qG/JUtfcD9W5uOxqtYaFpBlg971gjjqk37hrE/3jyLVgyFIH2OBTiuGxzrTuCvzyoMQoVr2XqW1aunjFEWxCUTMsaJAAbLtEQ/libYqko4o/HhAA7oenCp1rNGLH5yVfFr7CDxEyM/MA7KUrhDtKBNQSnwvFpUPrwnUz0Zat/PhkKZ1PgbFKTi2cmmYVijQGJAnHW8f+UBj6yOEX7k6uQGkz/U3Hxl3Q8Nb1P7/uw4gU5QpnYylnp1h31sdV+ViO/2y8N2aubWOG5czlEXVH40+/wdlL+BptUfpirp5+5cvFHnG1/fNlBpDJrHJvga2Du62RRhnoGBOYpRPvrqCxB+kSvDk2lv602s365evDTrUO1bqyOn9dXMgmVK72do/4QqI8KZs5T+U5XvOcPnf/dygjvtNmeMGB7stm/9zdO4pFCXdeWiFHv/oTxzY5vPAYAlVdglDebZCuCUkLRulM204VSIS/lTnDh8TQDhrnpmfQuwVlbAADsxIWCFDrfp0egN3/6mV7fWrhKmeq324XqunrWYIV+mMiR7gEan7vey9o5DYTR6VjuGFWaVtq8XrSyuhNgJ69A2oGUx7T4aMXYiKVHvMPyWNfXM7eTsKLtUsGlBOt5QEFYSxoOGW7afbFseTjjTeQNTDR22wdWrtkMgtS4xaampiAyX3/X16/MwlcDIQdXLly3LDL0pHfu6/MyGGd8Irz4kfIdzCbQ/ezjUiNYwK4gSOmbwRdLlOQJ/u87mzrxOpdiTKIw8O/CvvTXvcPa66RGo4rBmQhO3Ba1YMJLb1on5sk4HKNEORL8YnX+55kHZpL9PeHHWxahafwKHb/ATzrlUoUkVU6yGJUkKljSxHTGsCguJ2y+JoUj4B/dfCxLCGOWACeuuNRp2TVO4VraeIKE7hRNDoKk7MleYcFgUGodBvWUhbi7h3yHLbAXHL18bBP23i5hBJMOkaaIXv9ET5glJkheYhnMxPLkP4pr0ZUMf3ugm9O3UUwzirTrJO5FfaZx4IQuJtZw+FbLL8/sOw1FF1HWfTs9juoeyuBtccrQANkaSlRIEGYCYQZ9n+Nm1gu1UraHevBQ5Gv/KaZs1s7fwlpuvkrYbPX8Ysh7DuRR1G8Hu7B9KyML5okXzuRChJFe78OvMD8QHggP/FotYCHVWyl7+sfzdj0xAXY7KlFe6w+hM1eTtXYxHI/Ww4Ra+UxglP4W1cTVq2jOu+dQyc7itpoLSY4XFAnrbua86PO7+Tt0yYKBqU4KIokGU1n7N2/RPoz0iFj7DT7fNxC8OeYKjws4xKUeno5brOo2Ntbb/6ExVjFcxP2+iu0SThbYkAovDwyRT4WuFkigrfW6FrAb/cvHTRxJAuxvDkNoUMrZqbiFTSMpegc+tOdaTTX8t0VdBbD1NcytfzFmrg1VB7r3xZvaJjY4lyUh3eG3QSF5hsOsa6cDCazHA9PKuPql+Q3oYJJf8IVvq38idxU6lagZ87XAsroR9ItjhVC+0gdlRnBqpcCm5Att1E9nCKTE9vXPnA4UQsMjsFhf2xCkwqCb0D2h73IJRI4qAzpK90rtIPn1Vv86Je3imm6Y/TaR4EcKRp/b9az+SZzVqxwhGXNld1eXZSjpgjDt4ovUJj927uYkWbrFYFdvAfB2/gZP1VEbZlUaGU31Yy73cfzfj2L537fvzcF8L0l41NsnuJrrRVjvtlq5O2tveX5hCyHx0GBnw+egZmmeXLsnJlbk1TuaqEJ9LbE+2l5amo69qRhHNLVhgTbLVo8QUuhU86xTlSdytPp0iN6+D42xguGiOw2qSmDkMAJuovwqOgDbsEat1/LmmP+DU3Vodmry7V3szx7fc5ijA2n+jguS3H1VYVMpQK8VHH26Lk+e1yOM/OrCaP+2tCaUN34nDptX+DwhKWnVPeejfKLPts0inwTFxlTx1ydXp3nET6KzF5OTppzN+m647twZ+1IJh5OjOh4WB+tZ7P1/3ERZYykKlLfSD/E2985dKDS27mD9eqXMO5+6/YvQSLIzDoN2o1p7kuRRR3WrLdWOmh2zJlsqN4MHe46o5bnEbU23nhum2/eSY2j+dCjVg1l1Fe4tzpHWj866+rNuJJMrO/ENVgPdf/1pNOeYtjcB7bAoJ7caWTWHiLA0yeaIQV6ih6mXu383XIsoExk6lnZXN/c+ayryg7IepLNofBl8mUWJ/b4MLhWK9jDLN/6FlH/EleojT7Fi78Hc3EqK8TAgZpmX8Qa0HGlI4gqctAI6lg9V7+1K5bAs7v3ZlcEi7iMK35gcvSofnsLChYBbXQi62MAKzkWq4aFMdB3e3roEZHNgtvzMxfrxW90vjB49U3ypkTItywMeOX+a2ePtcdCxZ84LVsQ1l0EDNo74xe75mHU+xaMr6gOztr5TV+84ZpeLaJbYUtC/uVh0U20Y3vv1vx6cvSl61GgP05Cjquh9drvN/cuAyOnpTNuV9OX2rYHr3N6G0zrVqY4tdNdned5iwS9i7xZPfbSHjWUFrst94j3Fo6n11vF54XXMbyz7sxwBnd1vEU2Nz8mNG/9U6HS+6pnXLD/WfADpor3ixoveruJ76MP976ulfDh46WhIEY/ajgXGCsIo2ocribHvcfLlZ72OeK7Pthhku/334sadxpkvelvTFh0TLBonNeZCHncinW18nhgHVlsGb7/7vSUhmb/5t0vxrXOsE4ceJSXZeV87JNvB8PAQ7R4+pZSPWHDxu9Pc136OH1T2AexgJt7XPFx2uuzp5wcES3lS+K0nHhIsnKzFIg1WOGBguHupBIhOW6IavZlSMukx1iNs7ZfGk1LgC5OFEJNUUH4K3rYuxZy2ncQQXQhbbOwtq9iiAxCkK3OlIaVmDW+MEhOZVrmEEJFLcf4KC60NgDAYeeIf4y3DwfXa7EKAIfCl0k1KRfJbKx2QSFMkBvftYEL8zo3BYoJPvFOU2AN7bvi25KModfZY5lUYlaKxuzDtCM+DfjssseJrEYRJqrdPYutL61SrktYluQGfKO5tqAcwC1wW1dTDqHJTKzaIfEYrXEKgqyECzxd7E7BQvNhjBaRTxIrYT/0ntU1uCLrkeyB74e1dUBzUjWlOh/A8P2d6CHqORIcLTd6M66wX1BCvx/ln7MxjJSFPTknq7qGmBLn5DuhJKxbkyZeagG+OBDajnwvzsdxrSdwoKv+ag8EY5gErX2moB2W2OH2jIOfUSl0Rjp4o9XFUSmiWke857s7rmFyk5LQ/2tQ6OhW8VwyGUv3W7lxDZAyZKNR3DmNroYoyWrN2JVyLBCetL8IvOpzUuHN8d6GK410dlz3KtMJBdWQpSqh6dxZ4sS0Oj7PJWGEJgXNOXnptc5hZMwVrVrzAkaMlzjvmRuXBUAJGu23mnDlN4gbGESGSq1s5JsuOkeixveqlrTh0/cj4lWSWiUXd79vTU5qKcNCAHDh42ZBl8oBsJ8b4Wq3bxr+6ZUtQ1+M3tNAHlLjDwD8g1cZZKeBDJ3nM/lTwetbYbJcjpEv7jFXCfL4Q5rfWx3rmh67HKpHln9Vo5qd5ZuYfaSKaQR4EJC5gSBoMj00ZI7e+Q7WPqZxarHXuPIRZ6G4KnLx/58nbkWS1Rdlds7Dv9+oLJ0MvGiM5vrJYF7Ygz39NJEbvcJqxXxRBKrruRvQ9C78kLzU6OFx9DcPR+tb7rwt4vfiMrgDpbFdkOa0BK0U8WRTdmuPjAsLAgb82jnO/FZoOX7+DJxNb6cGWyQ6qbYtrZ/s9nJSibL55uWk8mBeKzt++26MMhQxahdkq6PY+OPzZkqQO5E5xmFB54qhIILUHHr/idX3WG7RAU7xWk8uY+dGR91lEf3e7gwGVc0oPilHtDex6giQn5LrvZLb6z1XoGGK+zBqHdYdoUMM+W2yNYAq24QuylWPHAnhrZGbz8xD2eR02oN62Z9rYwAJ3roW9XIJi7oaE6coZMIb1lTCKgyEMjdtMAxvERzuq2Ua3f++Hw7kXTC2c9c1DCtYOaweyL+eHVK6g6OyNDOFc7k5cWGoADLWCxDKyXh6dmoEBGt+8frR55FCqrtfJYkc0XsH25AagVyAD5Xo0w7ly8YEKE/Qo3rP+mqMdO5zAgCpwKbHyE0mpNpMvNk34y2AWO1BJOIRB6hoQk5EAB3t9FJAxapFPIcwPMFw/tNbMNdD1QU3t0NCu8nwUSgAo8JMfAKEzOx9boXfhnyA4WM3a7O39/crTsM8QTyhIETlgQGDk/DHXKz3UvdGuJT3HxBCHfP4c/mE+wYiLYa7SD2co0JqChD7vA2YTYRvskJfETH3pRjK6kYqw2OMLIrvSewAOGhpMQzgf6d+AiZt64t/WlUvhj4MWIiDBsTdgkRjMVolBQFPD/ymUA2eP/GxbR+9T9qR6nMf5dUF2nNe5CDbPJxjGWlYbwg6wYvJZNv8TKXA+J6+baG5ijiW29W3q0m8qh1gAEFJYcJr8EEAH9v67ygS86v0V7NLBc596YAvDx1ff/abESUQ7x/SzvaTfA0cUiTvi7R5L4RSvY5EnrgtUVp+zFzonGAhtzbI93uAqPAkPkKHeqvu7EBeELORC2Gq79W+q8vjOXimJv4IGUjUuASDXRaN2HkNAA2bHLOjR4QbZn27UXcgjVo8buUvLmCQMnmthFErFRomqJFKBESciyrLvx8WEswGfP8njptUqnN9PlnjYWS4OILAml0Ntum/Aqb9RR+VPrddu0NNzlYlgjsyTSzc7g6sVVKw8B7mDjgbbRvSS15xy21OLD6xUxvEJbMa5xDCiIJWLB0s5bouAbF8F/dnN71cZsyDKSMiO/X/j0HdsG90LtAiERphS3r7LKIjmem3PhyY+Fe0IGunCRqbTzm6uk8xkE4X6bIzRvtMlvprhlI6uL4PYVjiW2MMjEDF78y1PpE/HQ/WRRul8BQODpltcYJHe65H8i1ML0g8eXUkkmhMpQOdmP3MgiCi6BZMWOm3aDTXng6BIyhjZp724USWPYKw9aSt3sQhena9NfNR2KRCiJ74Bo+EgYR6Ojoc1VzBBOmlbR03hUebq1nw1B3hRAskkixEulLBghC3YC+M+I0HG8qlgK6S3luRy/HirLr+l9XeZSTgdFIWoQ6iMbhza6nvAKX1ZR+6R48l6z7bb9bR4XFfh3M5e9NpnusyXV70miaSKdzI20ApIdblPmRskwGnHuebEXFqNADMYgCQ8Y2MI2/TNI4J1SCbERlK6ncilMz5vU1lrzod1y8wJiqLJ0zlLXmbXo/4nQmNQxXUrQ4oc1jTI1y9vEJSSqiyYHifWGjVBVMFuWzwHgpc0JoDfRMY2NMfY/5b7uijNu3pnlOYOnuVtWpayi5/I3/YkbmF1ohNGSURxQPani9R6jGa7Kp97jjFw5eH4/zGBlYfquwJahTfV77kw6lKD8ThxQ41EL5MWjJc3DHe3RCEtSmxpvvmQLGUyhQVQCYnZVlj/L397qXW6TQj3OPPe49QdI6nAk6/GAQLrkim7Ev9hsL1RuEtKQqEy5NpzF7hs1yHPrur/M8qHPbNWH125d1WC/k3/Lt7xalnfnDDf/oEeNjGSv9GWMLOMxXFiGU4tCq/DaTzReoL+g29mpFCSSaVs9R3RmQF2tYMHdXuCwar7KC9x5PcNP3lmpA032jIBfLsfVGKUMo0COijJ613gIXf6sd58cdV9n0kbb2/R68eptv/DUEZe/SCpqqQzqW313T16uLOr5CSjlbCRil3OqwVQhy1yRJ5WWyIw1tzO0quKNPbl5yFgWn3ABhaXbNOqf0iB6evjoxSHIsTG8Q3RJi7Sgl/7lZwNzCyG2J6tX7MqHq116I8S1I+199D5uSW2WLb+77DipNdxqua8mCPzFBQrnF1sDL2w58TGWwyynSc6NeD9sYOhFTYdBeSp5OUm+gJh+Q0x0GWMtoUVo/Mw6paQIW5fxbM4jBLkCaWK6Or7bvqnaeLlrkm+DT4sDyrUI22qcQ4x3TYWT1/3yV4hQdAwElTcssoNkJTQzHjcJkdLXwB7b0TiuFLD8rwy1/DyaIeR787M28cU0qK3w/9rz9iuassxoId+eQxa5btteyXu+fg/n6J1QJDRIQ6WjSNT9emZg5KrBHkif/lyFCpsqwDmltM7nNuswlM/B2mH8+igb8uWSRspZI6pMY2PMWrMgwuN4bCgndlbWhLSaIzPQ4CeBQ0GN05+alWKlLehPsHm6cnWa02ihj8RNNKYSLtqqIiJsjryd6rPAYsn1HpjBYEcG2XqrlXnSSHe9KOegNRNCQumiNjDrewpnvr60ljN4i3m8Kxad0y9TAyimYyNDygVGNqt/tpPIRqdDkGJl3mKXgNWB8dh4/soVOZDvq4RuKuq/SKnHrY/vDNjoxqIw7Q2dfJoZOmlXqg2IHonQZW61RXlk7fneWfcgZ+pUzYusixMhFie5cdbgzQw9Qk0P0C2rIjfdGxNgiqnepEojczUz7eZN+JdfPIPe6XbDtt/WxZmDj62YoPCQPZ4tBqAAKvSTs3UyYWr7Ft7zG23/OiwvhOc27ZYayfa8OJezw4VDwtByvGGfssGmsh5oc1oG46pzhwnUpz4aC9E3ybXbpmdpWLr66flNbGORISssxhFvD0pzGfBPB8q9h317jXCE/gEpgMCgSLM3cTvcCP+vm65HrMp8D6Fb2o4UFqEdg3QCOUEJjAYgL6qieGzNBXpcJpz4k87q/erS2iKdziE0FcY/w4RAaT6oVKsR7/Va3fis2QpG8utHm3xwdv34oBq0jWfR+U+IoYemuYS5Oesr98vypYUOaFCEvQHL+mcjH9eGIyw6rZzYR3LA6YgVVzclQYOEc0xUjPwMVhrdKiiGzZuwg514vgW7FnxTDZ35+9wYNRdmuCY97CU7s1zNGk8WTFMKdivLNm8Leow5c+Vh/8GgqxOShmd2e4FhijWSO5Vv3qt3qoHHLrE0WnPmxHNzoaLgOUJMB6DFcjxYIZJosv0SKgxtz5YAao+OXJhd03SGTU4h0z22w5wY0iPpwqrCaYzwW1eORQ8Oe1r4SreahuhxYPDddcMY0kB+S3dGdHk6/h4WuaSn6vhgWNBz1eyeDxt01N18E2BBSv9IMKJqwAutnL1EKNnq8/bpAEOhobC7BY0ukkEVZwwwF6oaSgVsmQRtpepXILXMfSy1g1GiJnq4SZg+mjNg8Rw/qeId1mhLBrIiSZtZJMOlzdf86c6lW68NsZhAZ5gOwwGdS5KrU5JeVh8Lae8xubWw0BRUiE50GiFRZobirBJHmM8aIbnyNtLvo8+bb/LGlCauYpn6Dsf6xlloEkmOzUwkTuiH6XGeODp/yBDVxTq7k7g/Cc/XetGepWNM7xfMleFMdyTXAsAXiXgy9IP3xAEs4DROYF+vzc7HZtKPBm1VTPjac1mO23mp1mvE2OFRaAeaI5B/ZQnJM7bK9Qfzp2gkzl9VqGWIqWdLxILU1dCIGcEi7c9FrbWhzFhARmYHESkc6Ljez0m0Wotz1CTMg0QpExqRhb8JNcKagzhWdZr52KxFg0/G4TdtPJDfy6nZCbnlH1YlJrj19pvgrbnRpgiyMaEqwi+55Bg2g6nl2+O0Kuutnrq+Kx2DRdqzrAEvM5kKVCqrpPt98jhrd5WNe8ba1WsNk/Q9fdZsT1rLeEsFt2zl2lYUz1qQCCIrGxijJFIfsXyPTIKlTGMjVfuNmt0a2nTviiDaR5YVu8gJclMLxnzTalZ5d2XLYHomheUKYcadgqbnGOKqErApb0qA528VpeDlsEVBzct24LNLTE1OjrgjjVajs238eMJG1GoQHE0q/aQVQ9y2peMLxCYJ/I5GAwHQ9oaE9gQ9ZP+F7ItdGjfj7dzCo1pVNmtP267twGhm6AiJyn9n62LygPrLzYhFoL1/rg4GXg83C+knTbWK/XPcimQyljLPN6HWud7OC4AeSMegynhDEYZGQlllTOhuBQ8mo4V8pAQhfZ7V9JOJ58rw7OvVMAPOF9CMzp0qGDXvcNMCgKMQprpCnSK6bdZzhHwkxZ0BeVsfLxRup6iIhOhSEU1cxwcluWtNO/co58dQKYuv7KBLwgsh8FVeDOaaPlzPVW/twlYCiegJ3kGQrPP1Fv58F+JrVv3hpuHWhUT6ONUD5HM1TXc4QCGYpp77QsYDJ8Fq+ssi6QOlL0W4LQVaVcFApIrJxCFwiG5RibUABtnUa5hIoU6psj2CEsfBErvUNwbxu0yu8urRnQXB+Gs6DyCviW62SYuvYlOIgcf8LbDECHWIfYPoct0Gxn+VugilmpReY6mPSQr+71ld533hdH4AFrsvTVrLxWsPUkOF2ZxrtljpugymXZcckMvBlmIIGws8QRp/GAaAOK7N3N6FCgZ2fv1oqnJIU8E5vTZGEBzFultmi3OpzC/pVmjAPn/yfyXdHXU2hU7NVeogj9puW+rR0NNjYSU0zjvBBAPGRNYAfMz8xRsNAvWe5zIlri5HKQaYEpkqQY+DDrxF9CAv3oRHenOMIfTmBCQX5OTHqHF9w+W0BqShWWwT5WEwjhC5WiPbByJG9uRjIU+6Qk7KQ4tNEp70CxTmeMgWI4BSSuCJyd39CZVemfB41iywkLsX9tD7sssQo8J7gICNOPE028XZpeFJMmVQblBrDKD7GfAmRRIIDNoE9bX8EAjTcXH91mGWCrfFObKevLhljW+c6+uUB7U1yrGqUHBpBKq2pynsSROzv74ej3lX9KDZw7uM+QgHP+lg0l+G4EAOxVLoBwQ6FlRgx4AQ+rQKdneHuVBbIFDkD8MzPN0imGeBYT/LArOPhlVcf41BEJo1XA5XnG0ItL38vIzfHP7xLtleN5HaHVCRAkQM+rReK1+VBLpXKHeKqd5uqdbF5oZR7latdRPcDF64FUwFPS6Fx1tnwm33G9lrwoJ5KBhBhw7q4FV4QH691vP7jmGMkQqGv3osCgUEY4fbTnlN2FXtiLzUAgCg3wfBK75epVExqiADXK9Fg0TCUu1195Pyr3+zroEpmw3cJO7ncAsOtnaOSxEIidjpHkaZHen+mPxn3ctzP5BJK42pgTRXHP2rNGKcwO/qTqHxvg8zqe59iKTLeuCPzsGfyO8N2ylQIzur3iR/ipgA+B7j8drXYm8Pt9WuY2z6GciCLZQEOhzwU5TF4tjuDA514xqcjqc7hlOkrqfjd7zNEMU2zfjgXWMvOXkKxtGgwONrJnDrTFXA86mg+Ezpw3+9scC13ygTzs6bMGlhn10FY+K0iEivJ4k1CYT1ErKf4NQ33A4JDRxt2bnDde0o2QlbCWK/HNVjzZ/tLW1VD00Fba/Hd6+d280IsLTJcKZvwrh6em0xl2fCFbpvV2o3lTIwajKgMk2MYUTuzVeBcEgUJQfGQ6CpEwSuScBD6rtcByEK+rXdRZYU+E+r0UeK/br4QMfMziReROq8e5u5+aVBmnUNPXIX6V31UPQ5SZyWaGNUN5wk8/AdN47KevS3gEGtwFKRJFYyvGtqaHIE0vWo+JPMA2lSr6LQWqTk76zkhVv7Bi5K7YQIN98mYBalbYmW1w3ay81chVsRMNDLNYrIiX01RNNyi70jtuDPs6YwIXzrLVrZXHKOK3pskyLhmrbvEGjIVznnFsIXKNPMMTq8FauoozWYJzQnmkI8cp1ssA22kCz0MSlIvvlYJUJlSyh0bhcHsngQ5JaH3jWHTzxxyU+ohJrb3IrFSn1opvt1X3u5MkWHm/sPBD2Eh3kyq46BI8zu3sdDZGzyJE+bLs5bv0k38Ahwz/KFUF+gY7u12cFd8fFITy765POd/Uk/8kbrqJFR0bEumLJtDtKP1JPJjD6DActJ/Gv/iGERp4r0nRn0/zSYaUUkPbpQYS8NB91qEaFETaMRYz6GaRhnLWVbunPbx/dWAOWuOm/w1b8Kqg8cupalzzIgZCJs/CWyOLidebrD06tiZRtof8CREoJcxlLqIbB9JEIKbDW+6Fd02R3fJ0jqljB3sMjOv7K5FTGhFBmaLnCd92wxUQgbumxTLHOMNiA4SgQwN0pRY6h9dUdtiQLdT8JO8CPT2lJTJQJ2hoTBM3je5u7aTMz6WPz1V3AlGc7HV4VkFQ3DruGmz/pfUuAZcEAfSFVLje1GY8b6+hQvFqGhHyJf0MDw2pnXze6xDW408f1keQGXbXX4V97lQ0edy+bY+0yMsmZFc9NsVgXBAIq9w/xPhb6d3Lhjw5P6hWk6shIJWD/NmzE+s8t2pHkokWH23ixh9LFVAytwJKOkHgVr69RiaklibumEhuDHPW8FUwu1pSDJ0XaG1f5QqWhxnxjI4iJDRaGqTECdIcaGQia566XNphuOvbC5ch5PpaFNiuo4ao3x53p6JC/WoaiL8V/p4Hh8bBzqSAJ026XHQFJSdLFSjtg43us2sPanHBJF6AeelnPoXSKH4/CLuV7/08sOll4+6iX4T2UZ6BoGqCsnCTtvG9bPrLe2zsjWT6uvr4g734g22clj1/9MV42Ev/cPW9z779Rd14XSFsaLt4HFzN5gHl3rdIg3LmSNMSOfqRbpUiJ2n/AR2gTXXT9YacAGkjYPBsurfqLFuG5ja87c8+zJuxqI+dpXNJgUv6XYwBM1Wrl6Zm/vrt9EgQagZndyFMpoLjQYPmujylaD7v8JtWJ1h2SBIm6pzcTs00eV27kZVi8SMhnsi2N6xRkHoYk3P7TM8FkJiBHs9yoe0eWz4m2Mv1kxWH7vCdd8kOA9yxEEPHs2Gqeg/cQ4+TLYGtDON7KQRiJyllFZnxZec5/kr5jGPDiKpEck331wQIN+O+wrBs6maH08nAJhgH7956jLtx7naHY0Way2xP9JoLFuh1OFlNvJTgewFkFpzgD125grhua2bS0wb7TNknSaXWY9zVQWjPTVRV+xzshkt3m31JimzRjfyx3fftIblx/3MI+oNAxiFZGKG505UIQfGczSHSyxMPmXugwmBOm4riIBgD9JVLXWAmtyGpiv93dxoBGU3RmZlzV6I0QgqEs3lnwfHlySP6bp4UxzsrqVg2ZlM73EcW6bwU5qS/exTa/hBFbxfNKWphoYfXq6u0CEN/7corWJeBzra2IEZFhn1E124Q4v4AKUyhgt9CS1tNuFx2B809CSYxWV/JNSgxDkrL5sMON5HiLy13G3Un0Uh3jgRWHEmeII50nTacaMnKFeVxgf8RSbm5PTa28JYMo9DvohTNz0zTL7mSyQ7gACY4oNzzEMkNnttVsnPf+i9set4i4tkSTEGPNHOZMwNtYJh3T0IozCC80MgWN/m1uFzzuOxkXW9vCZ51fWsNitVwwCbf1BIwfQc1rrhWRNXIX22gZT8awpgRKT2w1P/uWTs91wPieNwW+YmRE8T23EdWyaCP9qDVZyKiYR4frFAP/jWv8ANyLT87JV8PUBunbv/SvSJ+/+s6mfrC7ZwK4s3iOWWToK65RfGyrNTffDLntX2lN/3Gmrlppe85QisQTw2xWeTY/Kx5+2PJ0BqdTBLX5P14pzj8/buizAgFbzNWypAvHyELr+rslCU6DYPDmQv/7bhGeX5rUfa+MGUONQVZyIOTKo2pNYzyLE2dedoLOEIznw0FbaWm325sSt+yw3ccBFpbccRu4d5sMPcfX9fTUhfvb18816Y6cGK0bVzY/UJz79uCuJOaPWZypeLdYZJxxOSSD2dTwI9L6RLX1kydPQj6dOBEm2pduuFLu5pGGS8+wIaxLipPUk2Sro0DLGUrLoZ4evb7iyIKQoGOotAfFDk40YzIazaSFYkKT7DH79GYVcYrfAm9oIzEUAR99FSWhufDbe6aQdGeY96cuNsuEtpyvc/o4U1RkhiCs4iOoJOLlw415VFTrpZCbVRtvEPH4IAKNR0PONeneTQNsh4roS9PhjglsqcpxYUdIPK2P9iS3NDr67JnF9mTLD//Lsp7aWz/3x1OMGebi6mDpJgvPHizx9mk7LZDTr2VCvyKWYkqfpHmuz0Lszfq2FofZJRfhRFMlH2v2lzcULlpgG7R/cK1weLVJohsC1bjZiMHt/G3b8sTTLUyYVj8U6VNFWhN2nd/b6IYvCoR6BUzGE8phyGTav7i05HpPs6Ehk6yaUnChvNdz0xBQ0KmA0VtbhjE9PXBMLuWz77b0bRAI8rkREumCYtP5NjuX4rpmTkRdU9lV8dq7gsAUceIcDUFiGzbL2rZ0W9b3frqBZw8rZqHf2qZ5CDLp8x4IsAidxs6+uFqtZcULUlpqiYm2qNapr4SV8CtznEXO3Cx6Thk+KoAwwh6vYcAsfpHACesZeWqejr8sUPNySjHHPkTfFaW0BJHKJWhWBpeGiDjWKQ5aZYhFcQMWR/lIMtCyFSTCetBg1VRqXr3ddSVJOSYuVIri4211d0qgsq8hSFoone6oGXUqfZmgeHZ7BpC+doKo1T1N+ZsRtXUdjTQegvO9I+5m4p7XShubjSVuSGqzvlWBD2wWEgUBw8AM96cK3JopiYyowFCOJQCpf810APJmGEZMQ+QWB6UftEp9yXQrR9mDM2J8FNo4u+YunyGmWpLoKqL3fUfgWIkMBgNuw0mV1KW2NwR13501j4vpI3RqPCDAt2nrmFXAGd8H6x8mm/ez00VVM3eVE31rCdyvWVFT5Duzs3tu7KDn5SlJJKSLl0OSKcjAAM7UKmQYuomE6qyJ0P12ccmAM+o8keKLt5NwomWioApn4PSKcdj4EZsZ8/5TX6myF7Udqos6/kMmlQJMdDMN7vZqP3/QInl71vg8TbY6vMY/JJSCQEKxq3gCw94PSWi7lag9548Tr73/y9+hxSkt9j8jNGPI/tLtkQ0eZc+7WynIowUuIWGVR0LfU5hsf7siPCkkyPkEE8FxbVZAqDIpaQeFEvLC9F7bFrM+4q5LWbH6zj6X3S+zWNLgDzpwqvJb2L9rVBQ3a076IXKUMA2IXO6AxhDoKeXWoK3Z2WshaNqoL4wOYwh5lshO0i/9F4+pYxGG3sclUEKBYv/j5OP/rDX/BpkX5t3oKwhmLi5+OjOpDyPGuQH+OWhDQ54dW2UghuIRCAyD46x+PCODIgOYCC0KojQl+gtQuA1GllRrw9G1An0omCJ2Y/jjIf54IUOMxzBlNBgHQCXxJi6EkFp356+zKuRv8Yj/egyob8l1sjcWvyfRPb5/bjNGChBhhRvrkM4pRXGzVnyyDfI5VejjA0uuoOrabDng/DMMhCDFjAOjBRpHiGtXurUPu8VZAqv+xFLyDtRCSJuHEz7nxVu40OPM9cVGFi8k6+85w1xrtfZkzx9bblgdEeCROAZDicEEpaMZNIDvGBo8eeGIraaan7UAEFUdPSFjP0/k2u3Cqi3k5g0XkpHDLRX1Y4oz5i+joh4PD2gGTxki6RHhRJQoirqxBzrOjzAsZ3tQvFp6FqaPKZ3CMwB8wUtyiHsdvBX3R9v/3mIxacvuodj/U6dskTCabNcFEdj4MqzcjHOO6flojbh3N8x8SynNbSy3Nklm05/pPDSk51kvSNalbo3BlBtoJ5f7XyzKqxijsTfuX915zCayf41Qk+/5xGskgctgGOBQ+cA2A3tGDseEhW2ohZBu3m6tsXChK7nmdCOL58yKe840s4FbmoOzwdRD3PycdsLtmb2gN7jHQVByXAPeHrYUMG6yL4W0U5n0qVu9/2rkSVPfK2x25ubvuRyTSs00/LbVLbmdSRp1mf+AUc/WqKgr6es0zTTX1h7v+XJ37a65cFkK7ZrjU6gX1Wh6UWOfhEYjFIrtxBBKosg8Ls/p359OLk6uuUr+X3Y+mXGGf09FnHHP29Xw2Nq2jJOwKgs9rLDkY/CYODhQf8wAZgiWBqPcbrAtqX81Pm+Mrx/MDuBuxaKZ7J3ono3tpmOmdP7oky9bjrreOE7eTrF8Uznh5bQrbtJ0d6ddsnvoea7q64fQB6yzpbYjjaQA3AMzbz//Yf9N59K/S7cbVd0mhTvXO3h65h7JNfK4CBrtICkyui8pCIgaj5yvrxNJmpfSgHWFhRJyhigoQRunqQ42h8a7ie+Bu1ksYSBYLE64tC1soDvCDb5s9mtZwD++KUsP9j761mpCl8hvwLFH6iiUR+SL7QC60G2G9KXpKD4MFckCLZHxQxhLwHqaNN17eSUc0c7u2Hc2tjKy2mspmLClzWGzyjD+YB7XQbqLrP6nv3/T6K6A7o4t6SUDL1Ksiwkz10Yj+9M3uYur+uDsLmzUWfbVx6tXMrWtmXdzKg+ZbMhe9u7MKCh9o7SvVDEkT9xFfp2Hh+NtEdiFXUHKZlOIQrWmpg5JdKMqFIRd3mvWdxLyW+BigsZ0+rsXc/NmU4Rn4eEIV7SlOsGjDgLdqwL8MU3tdWFWa8zMvWKwAU7Sj/4UHu7bm0PBfC8iqTp9ifXAupNxXr09QW4TYZfpBS3EpF1HhhqWtN3SRBp9MCZWtGm8OwX1tdSqxm7Lp7mndcqXmbfI1DPyXls12ePq1d4bmW1hiBFPz64Q7vYPDXHkU0W/5ysBdJu3Y4q5HekWcJiGgAqqz7oeYf7XI+KbwD4wn8E8MORsqRtSdFDfuiCiv9qrisFp2CzEzo7CVqa1g4SgUtG0tYm3gf6defje3sbinnuMWMqdJmFhIXtLV811IiPvSVySSU/xcPZ5z6VEtDoKIKvCzw/uIJS+k5m9t+9SiU62LxYGGznarPij98zOy3A3QVPA9ZWjNsdiv3zpRdy0z+U15+VRrNDExnjuCqpOJ179zzTi1FPKTDJcwJbeqr3f72seiwsNNeDn9TQaOF0SPPor3WYofsY+u9Ga5ZdOxtMU6O482yGg7oIM2cxpyx0+aG5bWPis7p9AAB9aJBJR64T1X+uOVG328BjcKhBp0H6PCTh/DgkzDHXlQKCJAP8KrNUfGA64Cki3Q/QJpqfjicFBva2PYZ7AqDszX5r/sFTkU66pkDkCCVrOU6ZuHur+MPPEOz6RF9K3l3OlgUPgOrJCGADNKwH1pLq3gyuowdQ2YkCRJp3RE8buWCAyAKy1c883RLGnrH65cTB5kg6WWOKo54S5a1YHiJCw/71vPmJpDTzJmrwbu6cb/gsjp0l+2Xf//PkkT71dGewXF+MTp9CKK6A/02bVc3+i+KuVLxIRbtaWh5saigcnaeYrmlIl3j5lk1HewNT8mB3mZceatAy0w12kRul9b39G/cHS0/AJSBLl8Ok+O95PzTeD044f9jVDUrbx36ERRoqXTDrxp1/JKb0oUudulhb840LjwGE2qS1rrLOBI6HeZP5lNfv5R2U3htFgt48QGqY8x8G5Mv3IDjAVRnnBxEa7pb4hrEFUJEwNIMGcbeEjN2xzc28gyagto/FUI7dfRULvjV5eYMYyaVV6nHB+eZFwHZRFX37mM3jUhwMOI2QZBZsIOxPp0/VNPpo5vYEWVV68iqjeA/y1r5xxozIjQu3W7ewb9lBUbFEQ350Svn7gYO5IaYg4HSuzHEZ0WHtOcgqunFtqUn06hBxt1yXu8Je7l7s8ydMHMxM4rrJ9ZSOXD8dSgUCjLcUH1YL3Zs0jaxLTd3Zef9MJFEM/M/aTKDox0HFJrR5dU6BUImvr2hvhMgR73oe48j0B4oZUyT/DPfO2q95SAn4fPqcWxIMEW1mZBKsC2nhm16FshMPOiNA1rYQ6qMRgB7hAvU8HIlji35bw7rZ0yk8fCxH8KaDeuYw0m67fm6Sny/K0zwHDg8SINGvb95iAE54jYTYerhwwLNE4gt66lX8H7dM1GsHbw+HSb94dPPX6QPBMA0M2bdBCYVf4A9uEQfl0UdbqcQ/KYq4PeMia3HBHN/b7QGDoAK1r9F+1f8ykNf59Me8HfcMxR+M6LhqL3z32pq9BNbp9CuRuZ0Bsmf0O9eh83st8H5/N0BqtdIy3eE0ubmz3wMaOVasKONXMh51TewuMpZ9Xwqmj58ac+RiXhzKWwzotFOLYzXDu2VOUIMk+vNHjoZ1+8A5n6wu4d4TyeidNL3uNfbViTpC2t8g1f4+B5RCvUCJG0poG9cjq+3d67wIJQOI6x803fgRvfjGPtLUVBfGap+Kb/NWPf/T1Hc7L25moe7+KyYe8I7YAQ7Lr6NHS/L5OxTQLpGRVs+s+jiQvB0OhCIvrCqxaPSy5ksF3nwHBZgHiTDrmgOfcQqX+K0vfJUoz7+Znsqovt0A+wMKmuuD8PD094y+BXx3hDDU1PcMtymEbGu5aJdGCxjkE96Shep5CQWucmtaoJ1TLJA/vZlBpiaHfglDj8pE/8lVo/zw4DfYGILWLiGkSiU5i351iLC37JAgFvyDBNQUNpIqbYq6cUVfQf+urfbxlr5UhAOaIeXCg6igLLAhFo9NzgnNGNQdG0FXYp1Z0pl19AynzpdhUa55SUPDFLl5epxYCYKBCA8g4RP9t6bd61hlbyeIwpFTq9YRe/gIBj5ewzfHY7q2vo3rwkVjrwGcK/EvWz9dtV7+5hiGEg8FPHOAsLt6BZfE/pnvvax8A1Mc6mADq2MEex24Jhh0em8va7gZErgcs2SS/oUjXfa2xtSVivZsJN823vZoAcmFC9nfMiGbXtKOtVXWHZ70U9Tv+xT7essdmiUf+4XP5EDPWA2FXDHyeoHhUezDNYBZPzsbTJn3/T8w4i7OGm5fPjbHO4ozftsx/wS/+f2t0mPQpqPC2rSu+CIxuaLMIIb9UiZ6Ms4rGNlsL4IqKDspoMKRt2g5LswXbEiClZ2cr/+5XLE029T4B6fQ9YxfNOyYcrFJPeMga4++0m0jf61yT/kdhr63OBYkHaE9U4HrOnse9evSgeADrXkBltlK17V70RaNHBkorWF5Pg+A5aZ9unqe10mhs7meKVySja+hdKwNet/vIfeNQ2GCkZ2jXzMKZxMRZr+5AfknCrb4f7ky/fiQJDiPWt+M6rK2/b35HREQxTBTpIMvhJ8P6uY4Se3voWFb68403gwk3Ey+02Ut8169no/khsBa1EGZhpVbzB+RRPBTzeO9/qV5ee0FBgOOuqBPn6f2J/k8xmGvhuS7idlPGzQSOnQbdG3pnvuWwEgKDCHLQc3ZEPJIOZ+PpQ48jm+yY0ck+UiwcnydnQAmFnN02aD53Hxyes5qAYpxOZnkiiaYgYq2w37XHrprsZJwyYPU0BxYoWkG1XPLUdpqDvrnBKSj65hbFJYNjMQjPrnlLMHgAsrj3EGAIIN4AKgAwIcmodxG0g8c9g84160MZaBuW0g14HyrLG+TRGTyh1mCgxrT2dnRTzLsjIKGAoqgvZbkPbLCi1f6PawUCjTOzoHP4YIkShyj4oMoII30AmEoc1MbYBRWhTSl1N3hiNR0CRAkyB0HncN8i+2gPB1YrKfZyVPeWYi9cFNflzuRhMPJsjqfpQPnfqoKv406T6eDZwU840NIwpd0TpuJgpMpM6LmKUBO9kGCMPm4w3rpixC0iEdiaROjofOlNwTHqcNvDgd2QJrpVkGbWI2w5zaN/yf/PYO9FIy2qdngo8AOgfdyy3kDtf6l9gN6rGbXE24L7uX1Rm1TVPez92+OHtCq978oDA7jE21z7qtm09lzB1mG1JJjMtmbrwfaibcIAf37StSDdB1N9U9tber2Hjecd6hN/bxzxzMh1He4jmhhoSQG0U5T2W1OpIO2lQaG16BBsvY/FQa7DuiWCKbOYg59xbp27jhiXG832fv8j5T0rnf7NxvuhIPt0oG+SvXah19h7LEN/QNuis72Q3+qel7WvBnuMiPV3/+X29sHxfqnuDaM+3ZOHnAxYXtP+377OAFRjb+Ls5/l7fo21H771EXk/nepTT4XTPcPYY1dKx+6bqVyyyAy6+szU8ttbFG/BrV4AmPtoH+/7f9zyOPpEkWf+qtf3/hcN9hLw54uS3jLeh149OIDZT8tGWP5rhwcC0MmW36I+sh9zE6ejvDn2v9qW9PSmB+t0j2rEa3t6KOKFfX3009/X1GscmUFr37VKxYF+S5DnW8z/xy7O3S+rfMRDAgb75kdLohyL9F68J1szAuur16Witesu0BW9ReeD1Z1uvlejYDOUr+y9Db0A2yez0C2sm72Lvceu9vZoisY+3ldLvOv9Pfdd7/QSIV/ZU+lrr4EgRPG5Xl9i9OFAIcFksdYdxNrzDreovG8ye3ffapfbGIwL00aCI6i+0zj7XLclrY2W9uh0rVp1TTYkz2exD3ARx60JbEsadwDahrZv91FPlOxrRW1L7AHaSXfsIS0r38P4qcIqNtdLW8ubU3/+bBvfp12A2nN3ey8vpZVd61VxizAyhKo09QImAsiwFsCfz2p3EGz/ulkqiPviuTJCbme/enm//7GVPT/a5jviyQEyRFrxunL7X+rh729VL+GGZwCOvvl6lGwl4/o6zHcEclQeh92Z49tyT/6FQy3S+rWa7wjkADlds4PuJWB2icGPCroDZ8B8+5X0knF9C2PeRoTXrsleHaFx59Tno22+I54cJUOklazLZPeOMGzgDMDRN99+Jb1kSF+H+f6CHMXjo9Rvd++qKAAKqidHyRBpjTIoTN22Zq+eAfMdEXKAjOvrWERjcXrd2VxIYXfW0nMvkspfTu6dTEqf80MCumpX2cererqkqbdJI8dCvYc+xlbdC8SIGsXazXgI8L+RgcGLhxwKnJTaA7t0FY+dmQjf9+fu6wGg0xMl7KdHvb9fdcpqH3Alu9FwSxsEWCs++deVGsHlf4CBAsuEv77sGpSek52e0/sLACCBAcWxv2uCPRvSbXhdsjjzFr0MgF5peJhXsOMgnAig8qGONXT33ednpHqJ7XW87wG4tgPpBGsTjL36UCMBoD/0ckPsFGxHIBoGeIvWnnLWkVpHkfIasXSs7ZCxBWvnyo6Wi7X3e6eFXSgr/wi3Y9hdQ+ugF6NYzdtsLuzdGaFV9/gubwX26ZLcIVniBnLnSsUbjO6WHBj9MPUAtShuAgB+uc+V+2DHvbcaALxiXCSMZwDQW+ijAIB+6dhxxC4jNAnThLKdq9WBE/dNbVFS0L5Lz64xyAP77MY5qMCeWF3vQvf+qd9CqxO+v8H6Iuoq2FkL1J376vg912L70QBVL7Yf3y6YsT9UViVwVd4UA9M6OF04rZB5r9MFAlDJ6LcR7PRDQ5q9zpz0N5qPccQLsLvbug+3rX+hHBSFGSvsQcg6iEYA6K8tPqv1R52U+8cdttad8sMtWPEgMP5FmYpt8p7QOF4+dG/GtkIM3AL/RYQLD/hxhwptDYp3LiLHEwQSG3/jktwJqHILShRQFLwU5J4d0BrpuiTUwXWjneQLZqMq0h6tORIJoQk650gNU1n8pRgAaFb0V5w9Ba5TT99DELwDupr9BgD0fSui7Qo23Pez3KgTRnhO4o2E5KZq06sM4Sw5o1g6MbgKdRVFqTJVtlCFNDRrSUJ1YmgCk01huhnMNod5m7Zsd4gjx06cOnPuwpNnL71SsKP5v43IXwMDAEnJjkKl0RlMFpvD5Y3/QyJZgs0WABonkm5jhBBCCCGEEHpa2BBwG6Wls8Iase7QHCSlpBer/gR4JKgKuUooqwQNfCjUEM2Wci1jxaq1Nu22sN01btx2h/ue6BkvXusx/af37coObBsK4Y3MxR63P/0hkAPxECkZCpVGZ3z0g2UrVq1l2lmwOVwe//at1+v19f3pn0HER9lkLZmxubikEho6hAmaTvbDvj9ckXBvOR7+LfyLyAUcGE/IVlMnkVOESqMzWqpoGStWrWXCYnNy4fHvmDDGGOPH+b6zEclN+OhHf4zFa8mx1IoOMbnlZmXiS6FthGYtWzuB2x/HcdyhzYq2nO2uxY1bd+49efbSKwVt9Kbf+QY/V/GUTXbpJAw4EoWtUFSJKoCQhqaWdp0GhHuhPDffNjWwoRIWWewIBJCUDIVKozOYLDaHyxv/fRdHopbu24G7+0EnIUnEpi3bnjx7mdceo/l7igPbXx2uA5+XbzcM3AvIa15bXlfCiwIaFBI5BSqNzmCy2Bwub/zenfW5EI8YuPjMZ+nzGyzegdKFR3wSkqSiZChUGp3BZLE5XN74P+LbbmBDS3gjBQPuPS3ZRTIgQgghhBBCCCHP1/fQEiGIseXztgw7PbLfRwNhQ0dh7n4H/8F3iBB2PfiELwAAAAAAANByJ7ccKZ2EOyQKvVyWpUJpRVGqzJ34LBaLxXJIVJu2bHvy7GVeW+evAxBMSOQUqDQ6g8lic7i88dsO8aFEWKz8lg0YiqBxIilZKFQandFERZOYMm0xExabkwuP3yGOOsbJXP3ssLVkobFxubIsHDWohU6CkcgEHYfDsQf8gERVUKXKqATBh0IN0bRpy7Ynz17mNb10Rt+N0nQWS+8JKZTS45JCMhQqjc5gstgcLm/8/NzEH8J0yV7WcCC50xPP84ckI9lRqDQ6g8lic7i88ft9w3aYcmEiEwRhwid8Zy5ByOYaZjTbKJtuGBt7g429k73s6wLVispG8JBGrboEkiqSJUVSHY3OaGKjJjFluqWtW8aKVWuZsNgcLo/v0JFjJ67duHXnvqCnOz2x/oM4DpUwQU1SKpWOROdiiC3CbXZVSJTuVCVJkqTDbxAyWwEAAAAAYE2tfcthR8s6BY1aRh0SIE7wdzAGvl/8zlD+oCBu2FhuUHGqEkVRFMVX/CYgREqWFEel0RlMFpvD5Y1f6rjUU/maO2rgIk9+U5YP8EAOxEOkZChUGp3RUmnLWLFqLRMWOwcuj9813eDWnXu96VcmoIOBO68pSmWKVCoo1dlKPQ7m1/7JcLtiEsRYvAGZMGmqaSx1fNlZsWqtQzrCsZOucdMt7tzrTb96rYlPkl59jfAADspdFyA/hgMAAMjh62a2bdu2bds2WQAAAAAAAABIkiRJkiRJSpIkSZIkSTIzMzMzMzMzMzPnnHPOOXecopKyyocPYHwC3cbOud7leHQTXVYDATQ+Yn+Pvu8fUBVylZyyStDAh7SGTDMGtgMAAAAAiIiIiIiIiKiqqqqqqqp2jkhXPL9NPWYHJAp7m1mbbszMzMws25AkSZIkSRIQAAAAAAAAkCRJkiRJkpIkSZIkSVJ7Cjvnw3UoJakuDknS9DG+V5UkSQAAQJoBALZt27Zt27bRAgAAAAAAAJAkSZIkSZKUJEmSJEmSZNu2bdu2bTuh7mySJAEAAIBt27Zt22gAAAAAAJiZmZmZmZm5ns9PkiRJkiRJSpIkSZIkSaAAAAAAAACAJEmSJEmSlCRJkiRJkox1Pff+HU2Ga7b5tdmv+22eqY5HCgAAHOHN5+4UcYgBxH4BoNmWRERElJpRakNERESB/gDs33dg9oECB0pRJl85+H0XpBSQ3CXq6eGnAD1ByE71BMO72hPCz8PloXZPGHbGPeEEqZ8qnk0pVHLkKpMvXao0hXikEhl5YUXG8oGZKtOU8BUGU7/2VkiWn2PeT3hieSZJRsilFC6ayuYSnWxGFckSVYyuaXiCeYGwYrdiUhMvQLxsS/AIqGyUzHJjXlgclsJWIlWRrLpM/jbUs/wcT+7IMicT5kRIrZrTLH+NpzhkFR8AD7PsAunbURu2YDJCXq3EbA8wUlZoCScWLAp44qitXIWBm2/HsjzsT7GKAmn4AVvO988Ya+n5f704/lcYvwYhoaBhYOHgERCRkFFQ0dAxMLGwcXDp0WeAh09AyJCImISUEWMmTJkxZ0HW/U8tazZs2bHnwJETZy5cuXEnp6CkouZBw5MXbz58+fEXIFAQrWA6IUKFCRchUpRoMZZZLlac+IGBXvUanNTutUYbrbPTXn2DAGvdVeeTj74OTWY9tGhtyBdff3sHXHTeQQkSNUvyl2QXXHLFZX/7xxspbrjqmkNSLRi7Zc5Nad75YI0M6TJly7JClxx5cm/v66RIoWIl3iq1UplylSpM6LZKlWo13vvouHnDRtz2wB2jxhxx1BnjDjtrtX1OOW1yUGC9fz+K/qbLfilkHwr+FKaV5aYlr4D+f1j+CX8aPkM3AA==)
+    format("woff2");
+}
+
+@font-face {
+  font-family: "Fredoka";
+  font-style: normal;
+  font-weight: 400;
+  font-display: block;
+  src: url(data:font/woff2;base64,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)
+    format("woff2");
+}
+
+@font-face {
+  font-family: "Fredoka";
+  font-style: normal;
+  font-weight: 700;
+  font-display: block;
+  src: url(data:font/woff2;base64,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)
+    format("woff2");
+}
+
+@font-face {
+  font-family: "Inter";
+  font-style: normal;
+  font-weight: 400;
+  font-display: block;
+  src: url(data:font/woff2;base64,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)
+    format("woff2");
+}
+
+@font-face {
+  font-family: "Inter";
+  font-style: italic;
+  font-weight: 500;
+  font-display: block;
+  src: url(data:font/woff2;base64,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)
+    format("woff2");
+}
+
+@font-face {
+  font-family: "Inter";
+  font-style: normal;
+  font-weight: 500;
+  font-display: block;
+  src: url(data:font/woff2;base64,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)
+    format("woff2");
+}
+
+@font-face {
+  font-family: "Inter";
+  font-style: italic;
+  font-weight: 600;
+  font-display: block;
+  src: url(data:font/woff2;base64,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)
+    format("woff2");
+}
+
+@font-face {
+  font-family: "Inter";
+  font-style: normal;
+  font-weight: 600;
+  font-display: block;
+  src: url(data:font/woff2;base64,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)
+    format("woff2");
+}
+
+@font-face {
+  font-family: "Inter";
+  font-style: normal;
+  font-weight: 700;
+  font-display: block;
+  src: url(data:font/woff2;base64,d09GMgABAAAAAF8kABAAAAABBjgAAF7BAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAGoFQG4GvcBzVcAZgP1NUQVRaAIU2EQgKgb0AgaB/C4gOAAE2AiQDkBgEIAWEUAehBAwHGxPzN9Bx610F9Ny2jaBQpwwncG5TfHZKb75iDH7qabMRVs8jad3Z//9/VtIYY22HbQeAKZr9B0W2kaLaeqJi5FRFCq3Wvb+x9977ca45xnhft5HVg1veNbLCM+El+CPcOZWPkEnmbjKGkhJGula4pApWUiudOB12lTx0xCfURQcpvBQqQylUKO10iayCJxrNtPh0vCt0XDerWAoESZAkliAoEhQqum2Id9Y6avAEXwgXq2VkSPFKuraY5WM5Ifp7ydqo/29/bTkj41eaL5MPf0gl76/LfrC0s8lbrfCY9GG/3Cowdj1E1VinXv7hf7/47XPnvvkuiHjGV+fTxJJoYlGJhChazSOheRQNzXx+nq/bn/vem8XMGIwxhBjbZEuWPW32dmtJGfY2IYaxjmUN4SO0CUmbfKH2r742Bi2TpFLp/xItsqQkAV+1xtfLqqzuWVbr4IA0C0MQHgAtsCRUqH6cUXsKQQHT1PCwzf65VBfOza6ZgAgIiFSJiJSKSJQgiKLirJwujNpcmZsu0plb6+KuXaWrdlf/6t+P/uV7a1JOPHCqoKDmfHfNOBYaASa/EgW12/uZh6ApQlSL0DSh45/P/X9tr8y7XZVk5k95FMKicQKPFGiMwHpQ0GdRZyQlKVlW4XB9HrYfNlrJUIYjSOKHdr2ujwgF/p//i98+s978kgxKKE8gsEJOIMa6mzorqI7rU1QFqYCwPsE4//r57w8wqVt4WkeXlTfV2NMcsYrO06swpzFuyswxnFM+T+bS8izgD+FL5Jm8Oi6zSy8V2AVUgVXAUwEdYO1ty0rYccjZ2Xgx5GX0AfI8z1r7h/mwiFsSrXb6ZvDQSGTyL21O39J+LHOz/hcOUbeJBQggpH+RJBn61hkCpWmcUpPWrDhbIqMPkixJVqaggP4DARKbTBh717Rv5OyEcQNPgMbKmqZm309N/LLxyE7/UYrhFXT4APHICeRyy83zRqOUpvlpTaP0ojPSleGeo0lHrTCnF+QJQBXxEBQYGEBYoKwN9V8QP6CocOqTc9mpAQeuJf775S/7Z5p4iQ+yRLkpJFKlcIhBISkcSLzC6TVS7F/7mTavfzI/KdEvg0N9AKBqfJLNZuey2UuBUJhTtx/ogEAWhQSynfpW6foaU2VuolL3U04rTHnovWkD6+wD4WZZcDLQbAB4Wdh7iXRlapluczHFXZ7F25Un3puckDE+knLFszO7xM4OllgsuIQ73AHkG5gzIN8BuLsSweOpAJwD37pI1kfLsyDfOZ4s7+SMyT77XCZS5cpTKXt9pA+ySEEsHr7fr9V/EE0biZf2h9IsRmZW7CEiUbyphyStbYrwvHZy07xU+ED4NpxC88fz6cnX5ucB+tJMmuZEYIDDCeDg/2v1zk7++Z2lJwuQpVkUKgrh84W7EiVJ92u26ce+qhRuK88+uOBGoh0KaYAIp1ljV1BQDqJQGO1oJcfSnlNaAyjIMrIF2CP40LslX+cF9NIeRPqlSJAgQZb7Wht+/f9U+4gACWRYggxBgohII+ITEREJQxjCnN+lONlQwwf5/NxP5HEM3TQXc46FSOnIf9NhbDoWkbcBlQrt+8zcy0thzejCbhWXL/dJav+FgmEC8CaMMkwJpFQLpM1zyAtvIENmIX/MQ2EIAxSBSIBiIAagmEgGUOq4oXTwQjmjhdqIE6rEX6EqVYU64kioY46HOu98qAuaQt10M1S79lCdesIb8y3UhInwpk2HQzDgZGAnhFynLmLdJkyHoHpCQQdgM7hRCuF43AYvsLwgig4H/UtOQveC/pUtQQRcUEYANpPAgAtRyjwZHfTQ79ERYL01df+/9gD33bvv2spA4mCSN4dzABRAfxdgaOyhCTZvGA/ZAhPIIAsCGiBA5AaMQeRdMICEN6CGEiwYgLCUoQLCcDIdEOqoURDqH1ogIKVahADIA3UTOaAa9GhNGIhGKq+iyquMpz81+anSwLiKqj0VInzjUx7uhnJes7ps1UAn8zIq3dIs1eJcO2WLRiJsOTGPNTOetEqNv3jYQ2Zeus88dGfc4Zu+bP6Im33O9YXVpFXfcFTW3tIKCUD11iin0x6T2AVqkqtrRSxpYXNdGpvGpddZ5Ng41Hp0grVh85rbys0uytNOJkElsLoJn8tvMKl8Sfh4b9TYo0SWSKY2P/vb0pQzpi5tnY6lIiXJT1ZE16OKk7+c5EQT2UPTXWWp1GX8/AR8tYYeIj2LiF3UkuR+pkWfv/oMJoU6fkyUwgoDJz8GsH/0Nw2OC3LrYTVGwaiVSFztqhb80alRgxpHlCuS1mhnngzJdOxERcz03SDk+hZ8YjxsVHho5ozo0qRKs6kY56H42iMfqtLYPaSSkTwkkcRxlpgoAo6b9/sdA2Z6vNLfi6J8JKhANlqMYLxmu2xgoaXq0+F1O2NvYWHI0xY8dnlcGYo0eRrs9CNsR+QdIlJNiIREPzle8DZHd8caO2tEd+3L7E0WuAFu7Aj4iGUKASmWFh3ubIiFBo6Hc5XbMRKNFi4pOuVERQztj9wVF82IKywK5ngurmwyDkYoItQJb7HOhhICE4KDZmeW1bbPqIlNHGNj6lhPBRrP+auEozjH7tL75XYgHugXW5g69NQ+zbNQpQV//GLs+03wQOgX22kEJw5xgso9KlW8191/KpwfjcrmMKW6mGxB2hRMpA9xta/S1OLazDdeJAZFlpN7fq2JnFRuKrZrz9GSCWb4YMK0EC1ISayTKRUt6jHg+8HyCJaKr7I75Cs/m3p2T41f+M231A8oNy8Ge6RKArri3700e8RzxIPVUy9898NPvzI7QM3181WgqvAqoop8V5TRaYfjqg+QAbDuYiqGwhNuovyQtOuFKcskbKo60C+clgN2aOQUMyor8hlybr5E9ilxCZZ3D/W9Gsq1QkQ1rjotC9eoDZU1wBEpX9AiPHZuSYZXMorKmUUPlbfUFeOBXZ7q4qFz5jByNpRXwbkM6/L7wCG7Pa0nFtD86I8dfK+a/MvL+lL+claXf8RmvHzQpr05f7xthuC1N+cHvUdl4EyE9Tn3qt059Ipb+f3nxT7us8EUBXvP32BwlfdSOnQpWyjifphIoRFQDoOThtG3/R5W//8/gLE0ipzEqHm/D5W2De6CHlMAB5bD2PsXldr9mENoiDqSvDmotJv9F4MMDAPYSw6dAlPSzHkysEWB9YqVSFeqXKZKLXLaXp2b7unOcHtn5NSrei/+BAFrKJ3gZFuLNd4zyCKAFeXnFx7B28MgJ1TX+2gYWfjBf9kSmMDYkxUBVtjaYfFgK7v5X8U01lpyp9pmzbNRCY0z+4pIK/5MfGsVIxXhSgq7laoilLxgj6MK0DfXbEPf5UT9IrZoN3VUBpkFOUhnKLz5taik3JqK28FRuVNvADoB3fyLl4UdVks4rnMsP5Ir41kfHKao5RNYL3lx9gmkXKjDfy/7cUKw8FrOzgnVN1IBr44q1Rpd/IorW40dUxC666gj01STK5r0hCn56pAuZiy0l0vZdM7E5t0xf/TkGMp6V10NNJK9hzqA9o7kSBqSA22Vr8YMfxkpvoCYY0VG1rHACShdAP1jBlHncZZKLgL2ImfrknDx8vf9P418+tZCjLFn7bq1Zyhc7jZgJo/Dm3K+dR0wf7yhrV/bGfGFz4P01/EqYoeRVWDiqmOhPpW/S+kVjfvu8HSmenUX7jpJjq9plpMPvu4PcwK304SUI5KipxnWaa58r3i6NR2JvbvFx+gb0UgmRRGd6aTvWVFOYgYUeA0a3rYTPp5VZMCTQnSgpoHoaYmRjqTTfYyZBbtkssdKsY2XNNq8ppkXQUlbiftrO0lL8qdNrz2MmRapIMuEyrMrTU4ONSluXZ3Kc6/bkTzajba2Vz71a1uDRb6NOtf2Dl/y69Tn+E27kX/znhXYgveFwrgl0XQ7oWV+Z4QBVjhQjgCGkYB6ZMCOClhJAb1oCdrJNVRZhGXJKpQ1IrIRylZYy4WyE5G95HKQUk5i5iJma8Vsnch5ySBv4W2VZj5CbRfRDqH8RRQgeoG3SRVEGa0QqiVCqd+E0UZtj5wo7ZMbqSiE2i9O0VIsZswQKKiFrGHF2xQqERElCZUsrBSh0gaRLuPIRERZQmWPKHLkrgfkJ10BIiqUWgdFrkiyFWfSBdwWdbS4Si2tShod1pKOSL6jUul4xi3vVKiGTL7IU786Mh2ETIbq37z6DYR64WUY2VBe2jQwKcLpUsiiwtLZXb7oiA6KNY2KGmqpD4scrLyHhYXh/FycI3Ky+C6XM2qyYm82V/T9UpN7YbS+3UdtCtRQiz9cEkrZgxUcRhoNnTQaqY78aYwokhCgQpUK1cNSByvyQXmPChuspIfFJAPDxcAmA6dOH4lWlFqVHmU8SljUaDb5njXU+xa/awhihAD2G3rdXurQpmmk65U+WeGszpEsTogt3DrCCiEcURAVSSFvoivFHdqs3GHnXdDCb+C2T8bW30Hvjg/R4VndsWnv+uR3Y/KhDmcD82AD25fiRDJQ3jkhoixMoS8Mt3oC9U4drK3zutjRQ90KrNozDe3tQvgolHCABzowEB44MJp8oXgvw8IA2gog9gjg5KpVKZVlz/B2hf51rKxLE9Xir5ugAmEw7pwasMdxdNn87bpCCRFE1duwxLdPR6uswSQiI68WtYxVMyuyuagzKHRQkWK1mtyiOmBggcOnGkIoSV8eT+nEaE5GWVg1tLxwOrmwhZPhC1pIFiAvFEZh1A40oFevG9LW4ZLBQggcGL5mtm1CsdG5H4VIamF3BQBMkgm5aoLs7YRWUeBNjh6PWYpneTdDAYdRQjEgKE4i+Amjwl0IiaI6gEk2hcTgu8a2dZSKhtQ6AnKUhS/RZazSqDwGFbt1Nr/XBAtb+M5QIJQKRwvtBVIBgx+Gc0lSrgl5DqlLauXS//SfC92b+NO3ws76s0SA8x5te3C2BtapCh16WmxtcPF7qYvuN2frfZEPT+9bd2CYXVeczNb5VXlNXi+vlziVVE4INd5KoUul90tggcOyAat607VuZ3lPvwki4bNxEVyfCL5C2XozJ85N1d/Ug0raFJ1+p3oqrQpww8YLAm78ZYr+iSO4QiS8I3R6VrNm2q9gfy12WorWBnPx9uDUfdPBiB3xq+6LA2T9HHf4gluf9GlFm+iFhiiSO1JtBaXSQFv0j8uA3/mGCtHZqhsr9KxiiSJvGYf83lr8/xBqEfulXTHhRgyK6A+y9+HuPEO5ijy3znvAregrQhciXIdsTosMqqNgXd1HrWehBkSDahLOz0ZdFdLuqRffUgX58FuYsGEo4u5h4tfgUdjNaZj4VtNYgBcaR6fIzmJaa35KvqTmAiuGhfRd3wGct07sKeI4JE5iHRuViOstdkFqLDXVPoB7JVCNPsuDWas3EGqSC/b+cOP1yGIAFtZdY6Bffj2YsA0IcBVMLI0Gnxv4qzqWVo1PdnyUPvLVfhm+2gV7FXro2TyKtBojMnblIkfVRxlGYuSLGof0k2oeXPOlOiMgMll3btKp4uL+Y3MX2GrCQCbt7tHAS/ytqeLoaHRdaPW1pupYBSjVg/upPQ1AxrY9zTQtPeSZ1FU3cyt5NtRYUhJWjITmvQN5pi4TzoReUuRpQP5UGa6YUEaV2x15KDORvfcXpO+eTTMJGlCGr/QBTniDZZqT0htSOkUU9z2+CEzZgX/KlVin+5zt3mP3Jds1C9MLGWuPVtrkZiLQYxTBNt8uVVLr+81Ed5V1PmOhpn6dWcvajtqCdEJdDRQjpSCU5qYfvptcdm3t9ohZ3ETYz3m7Z4K1Aj4iuHtgI/K/ewTOYK2UMvELhVLL/QAyRqQZ/wSouZTRJMwgJr3Tj3rbz/J3FWovEgMndY5J5+A7v/STwUHLHY+jSjOYVpYVkbl2/KLMOTklTP2S0hJZ6nw5NmeqvcDJcOTT3/mqpAqc+6YgzLor34XYrAENZiRKDsOIV8sLueRsYn59gnZtLMlfV1iAY2pbqcHFRHMlj8J86ldoRH/s0YdDbYnWTXeieZ4/k1pLfrVrMuN6JBB69zIPBQnh/A0f1ZdYnjI/8kmkJCuCJK4S8y8T4nXuN+A+CLhxE28HxhlbC3c1ssd6hBo+8KO5Msl7Rp8BeCYdU8XDs64EHcQQm3805/H4DU3f1tb6RShZ/BXR/0qZwPDaayng3XLgfRvfqOUHS3P2FiB7FOM/rxiWOpdwT8kVLcd8VXB+hWbSvH5/TOVhfBvMXPz5TD2SHOxht1QU5XfHfxJyJH9Rl0xwwMHxawx24z9ownEx+iY2k9EF/F3dfwXzW4+Q5tYOf/fROySBTKUlh4u9nxaih+ffFrkXf5ZhrQkDNeIx+O1g+grhwtLdGMFgSM9Tp6lQxo+Tjw0EBhWYWeBf836FIRzmIiEyzCeF6AjQGTTgSIsWAum0kBsJ6Z6TLcpaKMWhuBeP4lm8i2/xL+ElusCnLf8sZ6+btsmp882aWtw+ePnE/yqfMFkwMkhkyUFY2AgKNCFadBB49CD6DLAZWgoxYozNhCnEjBkt5tZA7HkiePGGbLEFYattEF87yPHDJ81fOCn7RFokisBiseKwCIkwpErHkaEIRbG/IKVOwNSooa3WSZh6DZDTzpBx1jlqzrtARpMmav52kYwWrZS0uQ65oQPujocwjzyGe+IJjEQf3DPP0Q0YgLzwCtmgN6jeemulIR9QDRtBM+orVWO+UTbuJ5oZsxT99hsyZw7mjz9szZunF4YwWBaOcLCIhEhgFRmRwTgqosKypJAUrIqGaLA8TZpppE07jXh4aUjzu0W1CcMv4iCMOKZZSaiRsZGxkfFL1ottQNHb3ts+8GN/3Vk5UDDiII6+jq6+jqZchCwsLSwx4iCMMOIgjAw5tjITm/xN8l+HHpJybaO8MCjP0gtqcouCvfwJJroGLQdMCdTlUZ6CpqlpEoVJEfpH/0Qev+XYOQiRL/02aKUdbxsSbTRLPUFQ7dMKYAoVWaJYOaTSCSgK1KEKDFLgQUp4PiLlXsYRzDciIKpomEMWnAMcnQYueuRbQNYwY0uLdZaH4Bhri2arrQwYxGCHMmSoDGXIUBEPJw5CHIQ4iEBcWoQIESgCEz4ceHLgCSZaDJhokdmo08ISloMDrATYYQIHnkOHoQMHnpMOyw3gAM4THgQSHPQ88DkKEquWgZi+CQ4ujVVaQM/Bgaa1KJFljnqADQxcC8AmUP18Ms7vJeUy/oFsb7iIiXkcY1oB4pPT8zMurBcevxXCgg25UurniPkHu+4iK1EjjEQWfH7DDDDIWOP0gcZlRtl55VhZQ7797omaKCJcBxywzCEVjFuImZa1W5m74rqV7bFjewvasa1EFHCuC+5SyHOerhU1ra1c69p803qbyXIiV29bCjgUKVlEWSt78uLNhy8//gKECBVmo0hRoGDg4iAgocRDw8BKgJMIj4BPQEQsTYtWbYYM2x8HwA/OOK/RBX9rdjHagAKnjZswacq0GWecdc55F1x0yY9+Mu+Gm+76O09cTOwqxOWZsE0LHIGEjIJKCg0dgzQmmTzGbxx+nmrfXosQGVG7Y79oMQR53AvgS1/ltzrNyRnnNbrgb80uzmD3tedJ50ABvDJ5zh2ATfCmDwCtwAY9FdheuBe78xpd8LdmF7VonSQ4NdX9xrb1B+6cayUH9v3fPoTs/eLAFinYKY37CpUyFCpqKNzY3vu29w439PWw2ZXrHMnbsttV0Wi68zbLzoqN5XzsECVegiTpMmTJkavf82zgBlReOtB3Do2u0h9t15ppq+VzUPc0jz1OO7vBbb05PXuz9K6J1unolTQwkyMacn5Ko1OEXZBa/jB/MyCN4eoP1+WMrCc2lfjuxL2yg4/kdt5nTySPC9Gperg1UMpjy82p5vcKw3oc1aRbEihhxgaZPQ/SvGyhxk86DTVqOI984+IC1475aJ2rMhvd+pRN7rpnswFvuBvylc/YZtiZdk1EiSoWGWF5UV2N+4cWo3sbYhk3iiJhjTB+bDDxd/Lw8FURKuGo+C5BoqTH1VL5xuKAsMF6k7xh06JNhz0Hjpw4c+FqrXXW22CjTTZz486Dpy3hN4Sf/GcKQKAgwUKECrPTLrvtsVd47BsnQmS0uKc1DZM+YsS4CZOmfDfth5+zWPBZxe5TLAAAAEDRxBBE7JC4EI4VL0GiJMlSiCJ1UJr0vLR9IyJERuwEcSEcFi9BoiTJUoi+4iUpSPNLfGJ42Ecjxk2YNOW7aT/8LHvgi8S+UREiQzhevASJkiRLIZrl5aQoECwqokbsFy2GIIQD4iVIlCRZClEMj/poxKhPPvviq3ETJk35btqP7GeukiH9pTQr26cOqwkHgYSMgkoKDR2DNCYZZo8SguECliptMv2LJRgqKsImR/fFgzPV3iy80hbrFD43QYVfAP3m4N8DJeSOJFgB31FN8tUFn2CosUFkbSseco47TEvRmjCqgythuuze5vHAOn0p3RqSIh5q1cD2LGlvF17cwOenShyh3LmC4lDS8EzCF8Ik0jaxVtmuAnTZI+7FZfHXuqH8SAL5SZjqt1TH563tyqmgR9Wwu+7F4KjX3nhryDv/+d97H9KnnAkzfmWzvY9kPJfX4JpemynQ+861eRCZIOyNz7zdVJZJenLcqKVYYKLks2dRt5lSytw7dOBm+V0ojiKCZuHQmuyKQ5H051jkl6LyXHgIvrZCyDFCftfvgRIYN/r9vveNSRu68TcvLtDAZhag39ILJD8FoYaLTX3aR9RZOEOe1DKMha5JIpWoBX8RxLVzrjCvHcpURLVt/UvVVpONz/tynlMfop5IBvzj3YWKhoFJFgsbhxJlqtRwgcJaY56fSZMWniUM7sZBd/NFc6BZ01RokjX+ztqzukylbq7OvGS1cXgMTZAPIWAnsOTFw0ZH9v8Ikr6kHd3u/Xv7Vh8CY6J8DPCBgFBhwpnFQNKIiWSQLDks8tgUqFCljmsxNRo06eDRom0JXRyKlCyiTI8+A4aWMrKMMRNmzFmwZMWaDVvLmbKzwsowtDBEB+gmjGitx002H+I47SBJsT0MKbVPbsrFamhx+QpaVq+HmcRLLhl7EKF/m5miIbqvwsj0sSGjoGOgomFhS8aVhENMYpj3WhXbNItSZco1E6lU9UaplvNmyZajIKCAvdsYaGUQuLSJdpmM6p9RVpai9z2TVBYTyyOld/7zv/c+GPbRiFGffPbF1zAUY8ZAN2GG8pERtX2MMYpVnnT58uMk8SZFZOBme9+5q7u8izj+oY9MntyeFbdkCzd+FctcyLJmfoJjnK9jNKye72j3dGt/7ZrO67hWNbfRrdlU/HvUSNGlKqJowg7ED13qFSkUgQeNi6BloWFiLaokk4JTQ4VxL3U4owQO23ZsHwu5CpvlLy9wPhw+k3ddGxNSA1vGGxNBWy+VdA6ktHk0IoBEJA9dt3nY+c3jMx+9sPm286vm/GaroW3aZG9jNtp8HKl+VlBexYa2zkwPBYKMwWDhiA7QLqSQFBxluf18ozKgeT/gWE5e6hAtJO57ZhlpyUE017tvYYpYwhHN6O4TjZEWr2icu9u3hKA2xtBgTRTBVweUQRF0ZHDOgyJI5Mz3oAgKsWcPFMEbuja3zWZQBA0NzVJQBHeE40AR3GDuAEVwoeEIRbAA1r8bhAWNiDtjyK2XEnSHrChFaL3oiTTEuBItvvM1DqPdd11keYSG/h4KZjegdZZlaDABe4WMRruqlmqo76ERqi2lhkVkGwx/NBky+gt9Guig0OwXmE+dCyl9LqFuhr7yZ/zWeMYE9cXksJxfoRmKeJjqnxko4RGp61NziTFhHSFKzQGmBDdcqppdDQkaYJqCTOd36weUWvNAZ+I9TCMxAEajJZmHL0OSMmpmgSVcR1QNvRb5z+BL6jXvlnr0WExJs7OkcxACSNBuEaRBl4r2CBCDZMU74HgtWO0gUW92hWExBAZUrydm8UoMIbJTLyFDc+d3vbHMkFk7zBmF1VTtvgBQQAcDCj7Eur9NB2+Nj07zJ4XSW8WhIxemPHGZeHBNN92q9u0QjXmqhdra9dR7HAOOWiG3KZZvrGHI7WCWtE72EDswO3FBk7F4R47/Rmiu1B4cpjTKZTOdg7Ybe9Yjrg/1cN1EPRwNqAcGZyltAayFa1YAjcCpD32x1wuSj8AeaocTTUMoD2eHKqEsHFc6lnZ/rImg3zRrfEER/bTw5Wiy1kyN5JHszgInBpnaEZHE9pxraQh8c0al62RbbS6M8tAYTexE0miqa5vCqGKb3+SEHSKVjzTpMs4RdpMavsy+37DddaKo2WHAFps4sqWLA8NA7nNYqVsQd8AnvNuLEA2+8Kob3Bv9xFga1alSJEuiKGH43F/mbCVLRnhh8KP34aVJUxAGQl2E/GAKUglxgZBEaD9G+OIVSX3pxyWEusuShN3CbmGX8DyR6OKWP81oJMmue663MRAFQvH+LRdFYc2YLk2qOGSzxIfzwZ+Df1gy/Z6lYj2KOfI4WAGhFvuNrVBF4ul5blxRBOrQsw7v+I650ccqZpQQIokRyJ/M5MYUFxMODHbMgYBzDge7WYfOTiuRrTwOdeP3IcmgRJYVXMqdzkY9ByoE3GdriI2lYt8vQN1d/ZnblE+dn6Iegd8LcQL6y7fiFt6MG39NV3XTL/dSL/aaXt2rdtmXRgfa7+fL+e8MnIfn7rl+mk/DOXZKT94RnYKjP7IjPOxDPKhjdLSP8pE9ZKm5PblH9pvdt8X79r68G3fdrtpFO2snbvPWbMnmbfrGbfOtv7mbs7cQSmHUmU/eLqNUqS96+/QOPJmjEHPI6Hk3NqWvQ5m/7IXPedaTr/6+X9PV35EruZxLvvzTnfT4xzz8Ic7wNE/pmBSCPLvJ9W/PKtu81du257ZmK7ZwMzZ+Tava9OUudbFrurqrtuylkYH0x0THPfYxXJr+eDRPwxyb0skb0RSMfmQjHPYQBzVGoz3KIztkYq7THWy1zd3atf21G7uuq7qoszqxza1pSfOa3rg2b/3mNqcZBIbPJB5vumKMlMpPQPs01SlPftISl5woIg4n5KBjGv1oRjms0HAMm5UW5q5fWUWrej+1OKfOEaXyZUiUT08hHQ8TEZopfZqUsTExKoah/x6mU9PZxIlZuLznlFeZCptvrmZmpqqqKiIiQpIkAKA4H+1onz6LqTD0/MzMTFVVVUREhCRJAEDo5djMzMzMzMzMzMzMzMzMzMzMzFRVVVVVVVVVVVVVVVVVVVVVVUVEREREREREREREREREREREREiSJEmSJEmSJEmSJEkSAAAAAAAAAAAAAAAAwOCVMolXg2NK5REpoCcjxEaEYkSbMllkmDNpxBt9xG67rFGdI0rly5Ao2h5BfHnZ1I2wLjtbuU5PKc2WKcYQir4H2Pm2kEBoWUmSJAEAAAYfMnKmeIQeXMyjH244YeAYNiPOq4uRpFKLM6qVy5cmTg4FMQ4yNGM8qlioaL6yZS65xKqstmoszWdgVpJfD0Wzam23v56uUChDPBOVdFxUWKZ0qWGjYYD+qGi5y16GEutnNdfRf0uugsopVUmKX/RnbU5akMqsVa2vGtWpUiRLIjMNCR46HHP6uDgYGKYgaMaY91567L6bWpxRrVy+NHFyKIhxkGGZM6RNFRsDETAnXnSvwkp1J6y4rIdoFSz9ki3hYi/iQi2jpb2Ul+wiozmTRrzRR+y2yxrVqVIkSyIzDQkeOhxz+rg4GAiDGWPee+mx+9pd1qRBtQpFchxhUeD53c/1Qf3qXCpLk1jsl2lfiMX5n+7PvZgKQ8/PzMxUVVVFRERIkgQATM47onMRQ2shgYFpRe4bQq151s+yewtVhC5zdmvCkTX/M2jaJ2yoDPv1zoCgeqc81pbJDSZzGswcdi5FDw5azUXL7skSj9FOcbva46SSJYbMXidpwzdimJZn6+J17DJRFO1YHmv2OrLXJ7Iq8MvsdWi3eSQCsHP2OpCwIniADbPHvqVjcqipmGPx2sO++63cNXNXJs15N3LF2GhKbmXjX0L8/f7W7KIWrdpcdc0N111xyWXGxaISFYEd1eKkil0cujkNMf/JymaMmwkD9lKoQ7084XhQuKgwaVCnNnVKpIkSxIsrO4bQ04JtC7FFAMgCJsHrUlYtJIi6lNlSgrRIyrKKIIf8yFpH2ZQle0uUqEvO1iBHasnZFmXRoqztv2XTo5wdUTLbuvLSSbrBIKhJMVQqsVsLCUpok71iqQos0LVHHP3bnN1VO6FGrTonnXbGOWc1qHcqDMEJII0NjCyT5/Yakq9UWUUrVvV0M+AjIl5gYICZlb2cdljyjVFJjGllm+nq/CvICQ2G56DYCa84AaqToJHzCKvMwv6V69WZzbnn0zP09D89j+jJedIfl4cgJl9Dr/br0c2aL1kT+vb7p+YlLJIERFY/0U/NGoRLP4+czkhpNKsR9avtPPB6L9nLmB/e08FVRIRf0hdg1vTw61qdUMAco48DBaaMmJ+mmx92mmlH+W67mPjIxEmvBAEB3/SAWCwNvrqx078z8IMD3/vUQ+KNvPbu5ocweMHn4fGYj3iwUPqUD0xyP+g5yB3TA7dznbgZ3og0/Ok19vdpsyc8vsU3nA3AuSh4jXA1lSwu8aKBFyDnc904mz0TD6azUweM4zRXfOw7mQvKwAYmHItFjhoxHHS7YZSH3XgoXDWR7PEMcL81O3zgoO/YA8nyBCP3huAed+525A5Cr7MT3dWXdKIz27pgW/ntzONHA5pQzy3BWUtorPOwehm7Ckz0ZYUXyzlRxlLiJoTF0Y1WVJ8ogAX5pXnIhendq0EFEuADG8iAA2swLQzDA8JA9QIVlJBDFuthKRKvmj16u9E10OlERC18Dw3FUWaleaRkz2bUCNJCcUqh4AVe+xowfcBsxwM6Y3SPFVwwSIqS5IhJI1CRbK8BR/meSTGvWwR27GTRum+ASamcgiB4twsSBZfrBjaLSQXxWdQBCMRFtoAtu41BH7T/QwA0tRCaBCHxM4ab4cQoQqREhBOMDLNlQ/Mqwa4YgiayA2pZLRs0OOkXhL4+9HKmJ8EdbuIjYnqreoM4Lo5TqSPWjschQTIWrIIdlmIZVmB5aF81/8pY9RAYabJYFCjSwqPHnBVbK9hz4mUrX3787RMlllCqDIWKlTqkUq16p53R5oob2t1x3yMSz7wwaNioMeNmRvGzBQhnXNRy4UA2RHy+dqguEnD42Rh6QWjcMd1Wp+7/0AJQdSIxsiOkuRlc6yyi0kKYBdmiZq3L64mFht2MBJarXr2BZ9WA8XHt14lfj7QCMBBPBvcBDwLgxMdGT6gB/69j/50FsPWbVR70UsC865kPnI4BnYl5cP6Ui2GP/RGTiFDBE5+7BMgG0D+T/csQPowmDjIcBmtNgIAg0DXrZiBgZBMTYABWImGIUVc4c5PV54HvzcvYEGm0UDrPdWbdXy/X4AeEE7gUrvUzxt3cy/2Jq8xV42pyeVwzri3XkdtYBGj8VXQ0188vGHA6Y7ZqNGXCY80wHA34Cqce/oOrxFV98aZcG1DsC6t/8+34///Nf3mkjv///HByNbkkFwvww/u7NSt/t7ywX/gdal8YPnQ9dPV2gi2GgBuAuwybB72oJoCe3yleq54OZu1jqynx+tMtqwSd43KaxdeimAH/zqxayI2FNUTMsBawNGWjmXwJXraYfdOHy0Wb5Pm3jIawamTfVswmnqCYK4GvAL+xP1jTfIBubSGhS4eDSsRoVOieYsl6VLnd28pFuarCXwTOuqmdw33sH38clTR5ShZRpsLQUkb0G2slZy5cOXKoJCcBAgUJFu+3AbkyZSmQLV+hMocdcVSV8xpdcNacWx7o1OWeuyV135B3/vPapL9M8PTwAnSv640pEyenBXim5S8e2izYARhrAOZOgG4JDvwlOO0C2H1bsH0CYDswNqtmkORwT5DomJyYrHhThojzwKxa1iNiGSNhvuhHWSgHoCJFuxDKxgCpTr2ViEfl7IMTOkk+NN5k0jck2WD3O4w0AKcIDPtBZk0FCXi11GYFKFTw6UaA22FOi6ziCSjXlhESvKack/ngQFAOBBDLBPWAWtpUi4yPTzlXXGxakibWPD31vE1WnBWihOpQAYSJFBHZWPUJFZtqOnxI83QUAAoFAgkYbKW6LqDqI5hKAzGNmV30pSp8WEmXunlnMOf75q/HZHRttg9Gd6kAXQOAoZcmcVl7PIZq1i614wjBhYhhBV04L40RjDyjWuYbJXotQ254wq4A0rbBJB4BGmgaxr0edp7yWNx+9C/p7CgUQikHsWRBJKXp5x3m5rat4VZuN6rR0eFmymQ63JqMJkq0Ml3miIUOaxvhQzKJzPJ+HNeF1R5qlVqvxYmGDQylOiPZ1LSDykt9YLIJv0mEOLlnUdblQmAUFiVQ2WNfCXzVCiAkEGgyHDABkh4Fv6JRLVE/zEyOI1lfuaCFsmoZC5eSg6yXu43OOxFWMNd75OZkADQDoQtv0ua54IwtIpEWsigjIrr6v+lk/NPMguHyOX4yrjobHNQ0Dn4vL5KR0i/TFuS7598r0J+FSDpyBbqh35YEJRbxVom53Djbi4NcgiOZyAZust1+SRGRYYqwN5jh9PQ76a/lWQ747KagY6+og9zYRk0ynQNK1J6koLjF8+I4G0WYM0ST2C2zVWX9KSa/oGUUqqXRt1EuriaSGxinNACrulDhHjlD/A5EZ2XYk2F1jQix61S9gkhU0++KSJ+y1iVpjCp9UnnzuTGP9styluDlCz3JFoax4I1oFptxy2XVemnm2h+FmyDTMoN3NqY4qXP6xYnZImOuLY2LdcgGhxwgSiFqa278GkIfS5CDHND+dPG+YeP3BCNZ/o6tDHoDuqyYS8RcyoWNUMkFhG7hWpbEJoRiM3MsUYbWFd9qHNfuHYo/cm9rr0VRUVOJ4h1ouSjDBwZ97OM1+6A1uc6mBbUWWHem7FNqaxEYeYyLRiGxmCrRhG7pE3F4dR3V8/nrpgiQjgN6O/GtAdXCNBrM0xoQC4efXf6Jzaf4kXLoPDsXYY2gASeZ3DCN4g1pJ1nQewdhLKiZyPR0AgVZjDI5v3ppSqbgHOsh1Xn0BsOxaKKZcRSzyOkpWg0c+ax0lpiPVCZm8TbNZHK3SRGBhc028GnAQzF0HHHfjmqtmh4sCb1y/qrPXXcwJp6iTZQ+XtRNvur1Jt2OQe9hYo5WDZhMSCYkDXprFYIizTBQ2tmj33uJKb6vL76ct5hVMLn5Hpk7XK+JOvT4GGhcLVAMBdqbfKgdiHF6K5yetsNzjP5hz/B3SAtkBa6Jl5q0LNMC3S7cvxiTnJaUADaDNHVuvMUoWVvpXK+7VqkmN1Y+6VCWGze1ZExakSZqXHNjXCxXDnEkTcqvyFTJ3nwiT97rC9QobZfiJWaxAGeQgx6n3bUaKLTGkbc4MqfhyrMI0Wthlz8jvpPnHUWmOeOROBtdt2ZWIxWPJhzapEztQx4jti12GVFfFe5rpnhtiVpiWJgvdjnTgcRYAKfyMmIsLV7rsszEpmxcr9Zqvj1/csJQw4fPiKbfITxdJ0a+1xDNpyEHPhfnZxWh+04I+VCXXLsMVGH3ov2VPTGEAnR9m+GoAD2XU9TundJF+j6namkNo4uJtNzwSq+zlS72KRxmcdML96l9hiTaqZ6diWVvNRjU2NPnbeKb5gg40Z62r19sVIuwimIBYh07DWznaO9gwJMABsBD1YXUQo7iq/nvE73wyXNJjWFetFillK/3WVwpO68/Niu0uU93mEfyooTxtrxSU/OPYVMMybqYRvXGHBavHEFxQA1vj+KgOYm/Oa3GNv9goy4nDxAJeaQ2OtPVGJV/jzGsoHCCnh+cxbtMeuoLsFcuV969Ph0TZ/4meDkMlDWqv5dERFBCcgI5UuHTic/X9FvR1d+OpLKQg87yVI/omArphBT8T2p7snC+mnHH/IavoVD/0mWtH+kojO0mC1+UU406AYw3EzvNqoCxOrxBfdiF0vVhiQoHLXaViVbMkYMsEmzcTIyDKytnVYOqEBjqqjS2rPNlHe0PuNuzgz73uhV03tEu7Bx7LvRPt3D7xI8aWIAQC3CYofQJboKDPLrYRqFx+tc2WpXTtrAApnR0lVfuJSiotGMJ/uWpHxFBS/0lxFdn1II7P4sFr1DiXSEQ3QmNRJmKk4oynbbVa9ZqpX2+dFjR3XMB2ran/K/DDHQTW6pvS6e6e07gw0pDWiZ43u0JtVANeZdN+BTxXMvpesnWLad9gGuzQRfjW5zpjapTqUJVmaCA+aPL++T1kcEZ4WLEx9OB2Zr6+LVsabOZkWWXCIs5fs19m1azxU3ciF0lRcm6mlCeuKSB3l+nK3ykFUoGHlzi0FE0/LLsUGJVZ+W0Vyu++yKG4yoXGdi6+S0lu2zr/QkPvChPzqc3HhvMS7i3PWEe8l1SJIRC67Dz+WVVrCG4DNGO5AAGN0hPUtSPugY2IYYrNwlzFHqtJSCJyP2kziIc/J8QObaqgTvEFjza9wHnFxsr1rNKnBCIIjA00SYoiakgPXnSSt7D4jMVBqnoaSOQw7ghgV88tek6r+N0+mPf9oyhE5SYg2E+nV8lF38y6PIq+NCwkYd4Zu9PuAvX8E0O+cmT+ewfA8SHrJ+NcYGe+eXI+Xyu2tEEBW3Mwem4ThV2xGYF0aSGSvuPybk/cz8SFTS1mv9XrlBxwnqP1KtDC90JAVUAbEkoizR9a7kKF12ZS80WzrVvL+PpxiZO5TcXdJ46icpCF5da/SPJousnbhMFyOu8lXPdlAkXU6yTX5yDuNi9H+7rvXNn520zVlgHkbFfCz24hdeMaU3yWJgbk33tOcvqMPZ89iIxurH3msF9eH8fwr68mPIhbqrYDegAuFaOl6bNvE1n5W7mBv+TQ+8b6xT7hQK14WiZuzxX5r+SpSW3PukFS6Rm8uy8/Q2Eh7pIubMLq/8lU3zbU2xhipJTaNstb8vzc6l1dm4M+wWpj1LigHogTfNWXyNzwj6c/MlIclInlcTIYWckMkyg1ogmMTu3rjQJcpvbm8xmyyaXJ1Yml9qcw+mkXI1P0JqkNJPKszV7aJiDfNNRVK3+BpBf4/RtxCVFSh2pMpU6Xc/++12V3ncc2A41+24G+JC90y8iTNPffZ4K8JB460LahYUX7NR7vCVur0rV2aer+/4zsQs14SqZH16Gr0x8uib7zldekq2y1unhj1kGoOq3JCV+w/Oenx7q54uZkMsOMbMe7LDGlw9Z2z6rfAOobty8Wx/495Sh8s/KgvF/H8JyWZZ//bo18lc/HkAjLJdsHroflHPILKbUFPPYjg6pWLmPZK+pyDL1bM8o6S/bnCStIBEry0Ukrft5gqCNRguxKflqwx8AynW6Yt06Jvj6y2lh/KnZ1PvOo42GWdmUuD0oKZ9oDMAXHLXIHlb3yx9cyLXgcwKERFTW4bhV2qCzg10L3qAjY6Wl5FKo/Nbp/Yqbt0NbylYWDdmfPMJ+M3ohiXzS86UElktMHOVvBx/+jOmq/qyyjv/79zuk789gn/xPORaYNDv9bHv1uPD95IQw/vSs6K7rSL1+3MFk+Zs1n4vR+uAsx/LlD6r3yh7+bSnO2ZnEa5X/r+5N+PTsKTf/7mIKJr5N6TC5qGlSUynwzKa4XxHyb2hf322FSgw6Y1qa1pjjEu34jPIVtG4uUTzRluytJF7OocKCO3khHUvRb6VyWSlRrm+c2nfhf55WXbHus0xWO0wc+syrDD0WMHwYcyhgaP5Khez8/PX8bVguMWuHLmkjRvCDwJJfz4s6Hj28sfnjj7M2f/3zUS8vejjmuBPfFbjgZ4mDWLvZucNd8ro9Ec9oZA8Ha31X8Gg3KIfsvrVWc/c+dCiandwqPIrZFLrcQL9H7jM7AqBuTnO2reOCr7+MC0WZu2/TqvzydVxQOccsaDRnPTzRzxhKgeVInlKzL+vB5xH49628dIzz/EMzJ/H07c0rHdOnteqbDUOqm1e1FbSVdbBcMvxnTFf5Z6Uh/t7rdPBjWtmzss6Kp+MVh4t+p0iL8eg8Fgtt3oSTPuiH8YVpai5p+R/ae/SGR2HzAjN6+XdZWHavrKPi5rj5cPMfaVIrDKNisjGa4jj1w8vQn2LlDYMRhVO2xrI7+B695cyNqmooj1ccTRLEx2LJedCU9YNhZ6Ju3a1rbL0+lzsw/Ju56RqqWbIyLU+en2SMQCXBkAS6MfJxjl+mUz9tk47YIm1svIaMsKzt2Z+Lf64+M30GH5yuOm3e8cvgVZMmEbuhmZ0pZSzloqOwqyd3/hJ1AKYKCh+3kyuiQi7ax1z2JE8exXH3fSmBi+6k+Y2HH7K3B/ykIZGRWTrKAud1HnO2n364ou0hZ3vwT9oSuQDUOpnfvPZj+e2HH25yd57fMffLtyIy1HM322dHSGBAw+wvEMuzGN5oxSQrBv6MoqLNEN0d9zsmOzF5UdThP9MDbqx8rVOWp//BqggmCuP0QfZt5MSK996ygm3GAbUD6r9/5DlhmnyzSD6y+KYg8i8/hvj/UgcBMVeCL3sjk+p3k9guCqVtJ6b6+Mc4GbyBik5pHqByXRQ628eYrv8PmFDQjzBlnbmZ5PIiVncob2WAVJysKmg5JJTACUChBQFpl1mGXvL6xisu5emj4Q1pnFb1otcu+8FtnIoom3kXPRKThdl03Z+w6leGNjXwvpHBNMsbPHCOPspUdJmyUhq38k+EKt65wFcIzGoMdE6SkYYqSa5X4msK8ElxAu/7NGcnF1Vtz4+eTaaxhOrcIPaaWgNauXoAoTCdpWzfmnyjhH+EpQ1FUKIoUhKTlk3r5rNjwoic/WBZRsjqprU6mYgtJAHXgmz0BhPrM8oTOOnsta1LAEliaGzH2pBZnphV9n1qyX/np63g+7qH4xy9ANGjUCC6sgXJSQYeslOjRnUbUvO9Adp5GwKKoNKiMPpra92Sw02MZQ6jygOx1VmpTQ4CTuyWYDKX6h7BzREgdqqVeDQgR8SNoHnkB9PKXGAOYs/mauVILFBkVf2QZQXTt0r/+37KssoTkzIj7CGRgCRZ0uqA5aSXJ4BxtiEV2a3WIDoNvKRkvSCuS6FA9OgFoFjh0B9b6mxOXKhduvjXoOkspWUr90YJ/9AZty1QEbxKR03i5NCQJcn1cnxtAYETJ/D+ZtbB1COjvvnaehD9nv/y5QcGnz9mle4Z5OhoBS4H4ha09XzIKDzmIDBf2/qjc3WpG8fG5c05eTDdUqPL/UHRjpVaAs+o+D62ZHHqbNm/P6SWSStxHClmzZklgp7mq1PKHUeS9CzkdpUS2aFPSUrW8xEdMgViuyEJHMppjAQkCa/ALWLLyR3bCw6rss7UXl1aptMXZiUqEAgtqOJHSsHK7/yonirl3mlGTcIH3Q1YPB60OGdHGY9kPDN2eZCbgF0VJb/t7PvYDjzuSSJq4VfOZa2zi7tGVd2YwNrUsSNgX6Cb3tzcSxRo+9IkIyVfI6eyNBksFA8SKcIcD7joIZMlxfFjIBLSEF+rpZ7LXNbPQdrX8GyLwshv9sXCR2zdc7Sx88h7N4M4rleujNtpEHG5ehFspfz469aLQWUtWAGhN9d60UC1m12q0VR3Og/94kCkwN7ym5C4xvvJ4cwSf2WVQ3yrVvEDLjN8tK3ZUlc+fDWCtVKTbERjddQygFFo/HFDbft6rUuMc5IxSSJU4GGRVCR97e0ltX779pbnFPb+7Lm97qKrtX5Dup2RrcyVx1QmwMPx8RyHzuefjz2dxabKoafbQePa6vLJ50E7Wz/6bj9ZZ8kfUnuva7cb7T1WbZ24HbD18o9OVWG2MK0mx1z4YTOCA48QwlONRrncapL4AP026cvKl4ftIv3jnlnJ3Z0Kf6oWtGrpyInBnQCsEVxQe6+hUIqX71zHbIySei11cYzYOtajz/8sIg4lITQyKBaXCYtTJ3VFBIRroiLfi9q3t29Rw3Kh7ZzUjICICGlAciqsPRcaDG4smuUnzpD8c2CPlOPw7kXQRxrhUySM+00+yGYPSTGy3W6m+GWuewLcdyas8DCrdzspd7uZE5Z57Apw7UUsc8+T7U50muVDS4864gN3+w84UuPWUQMGAvf4lh4F4c0nwdudnWTVsRgheyQ0OT+MwxqFCnXHcP09ry8eJpb+bOzNGQ1LsoQkMUdjBKU/g7WAvOB6PnPNwa2lHmQ5U97G8AcqQqqHNe6hVvhlNR/eY880tmXX7qGZsdp1IP5yyBFbl6/pVym7qZ5fwVZn3hxI7Cm17FY6ODldVPFdeo36H2zThSdrPmSkgXxrRBYGi1DkY9JrAOZQ2YDIuXlA6BTiswd8bKj9sq8r/0PPgXqqMSQVd2pdlObw+Rc1dUj//v6NkCOL/x1kXrlUs+pzyd5XbqZk9DapCN5qEgl5xhTEtowMRJsxFRg6YWVIPFgZYnuyhy7EAUkixBVmdbot3VuF7HmrqUdHPAJbXoyZj9kpK1tWfye7dJ1g3YmuE/Epfv0PEch8uMxTzFm6QTXF9njSsw+JnZXfBdSd2lDiFrEmI1guYEpR4QabtazYJey10oLYSifdEqUf5t29e71QrqiewT19MNjmSzYdQH76yHn3d7bH4AvLNvRj0f0M3rm8r3OekOwAgmaHjn/v/CH9nVml1hB0/tyYwfwvHMI1+7yzgWPDgi+Lw8LA8bMFVx3BCfkzdmMH+V8XtwntLt08Yz9+ULD4dSvfvu3mP5IKK/H5ySHiS5FVklFZTHhRP0h4nmoF0c/Gto8a3qPxJ9zor6BsUOaTA0Gih2iwJEyWNpZE0SKRWkZQW93tz4Leve+jaubSU/H9+69VbXn6ml70G7TLD/xlap1DVWahRF5eFJWZC0vMSMARM0vhoubn+QwjDCfGouMEMgiBYIgmpNrxbCoKL08Ye3a+jKw4W1Dee6DUdZVButyP1ZZZ0TYHZlBRJ3i/DDxyK91etFrw4zGVR9rL9gUkCVjkd36Kap7DK/Q34sXZkERWPpFgTU4mlhSQkkglcC/HmGUWZs5cU3Cxbewxikx9kFZeQzll6G5+PVMHDsnn3Vi/f0Tu+v3N1NA9P77e29SxEN18SbrEcD2nKF2saLCQbpbZ++PNmW2QlLofEq33Cnu2vP1Zt3+RaaGSitksgtVCZSIzN1IZIVlIBqG4gA5O8GZ7aPNzjoD3XgI75Q/YGEvPFmfyd7fq0tdKxSl1TJRY6sfe7uzuerezYcxS0jVhcbMTM0t2CXdnFnecXWJsWNiYh0hU4IkEVT6aycyPJ6hIeJzcgmTtwitiURkYLDJNASUQFFBkGhaDzFDGgiSFjmcxTXPMEiPH5MLMNEVDAfl2mb2vObMVxqv7KamI47Xe/WoYssl7skFS5R9+2O47HV7+K1IaTqGHZqHoRKuFzmIUUEnFLNbWOZ8KuuTP/DtWKVhcrBL+c/qMkscrMHv/M3bmn/RCM/rZ+SPo56KkpxeZlQuH0M/eMzjx8/PPDWqvmQ+vpO5Cicp8rI7QX8I76K17npiqyrlvpalTpExC/G6U6Q56XTwIffVHzRJ1YXeXtxW8eEfkvb2pmpJ+5Lo/ZIGxaVl3L8tT7PvhZXe+5PmuUe8SHrG/7pg5Q1UUHrTxWWKqxnDPKmXLeX22u7sQ3PWaj9YT+35kR70CBz3/gHU/ARAVep9EWmcs6dTGinweynPmOUusaUajkSIJ/gnhUIhMkI3ER26IwDJbsVRLC2tAZlAdPK3YZD0kzdwrp0A2ibTfLXvZs9IHg4pLzYrE83ppFXXMSfPfzZi7O/cQoGxoCvHnVdB7BylnSXzM5nebFJkstsRJltisJJiMAHPFiL12OydKkmn2lw7UdymlRrbxhTftIzLUDDiElbIxFiLYiEiJ9LNpyThzz6+m9YF/2amKKuuoBlvNJAdm0N3qHm5SFmI+BidZnslmpcAvHSUcQyCYc4hIP1MshM3bCIPyT5555o5fbcvDY7UziIGZtH4eZY4S6+8tMMLfT1RbGEyrK61Xy0WwumujbdVLU2ZcK+YzLgGRwzurio5aWV2BYGm4tF4XltXCIGiGn2VeSvkJTnMAxXHk/QNYnvzgPag5HzYaGQNbkrrL5U6wHWp/LW/c2/Q8QzSZTUenS5k11nxeZhr3qk2lTvJydXl3f5faxQsGikhT84NgnzezL+ubIyclCOCymprnEae9a3lU0KtQlUW+6MkQ4RQuwjnFmu4yIJ95UPtqU097hSz1tFMg9a8m8PCrsPI/F6ukCwPJsl/+C2t688Kn6uvrVNRkedSdoP7d6WaCJSCJucPWg7lbUtR0vlz19FCH8eldUbViK+UKXfPwJGQiOpHB9d1f05766fShvyUjJ9YqrsxI1p5vkq6+fnl95mlel2tpYBXnR8qupWe9WnpTDQR4dZYMUWiI47D1JKQ1mQ+r1bHASRmB5H8us5qIDVnIM4VV+wsdnC5Yl8n9nxj8LE93BkizU+Uj/v6D0hfZ9dLnDaObXVmuPQ+MZj2HOqjzf5E2p8/1X6zkG3G1gugHSSnR92/HxAn/jdl/PyVp/4N/BcbvNxd2Pzx4kPr++u7evPzHYle3ogMHe8UF+QWve3uXaR49BOOhtIc8Y30quBt6kCrddXv0Pca4vFX22XdU17r6FPz9JLUyVvPR+P4vAI+NAoCqaBXwXi8cfdoEgjZxmqBVFHFaq0BJEwvaaoG9Z9iE4butBqCIDJETx1xbFuZj8Pf+Y1d6lsFxG0pwwJvFUCoYtzx429J6xy1ddeBOCpjFJ3Nl6E7BcP/PxBNXNP7xbgnadtbLF2xIv3OcZla93WtbUMs5b//4fMPs7O+Xv3EpT+ZezgGk+5J5TJT3xWYcWJrzCwD+sRMiUDY1g9igRKybmpocksrJmdbzu8nfvv45QQOqYAaFJTpVojC8lgXzqEAdSqOplapL2VENJq0Xfy8mnpS8+/0u6f9v3Z2G3eVLN2+YaZHKKKXIZOpQd0gcIQUIR29g0xykjAosE//GIRhOSrLxBYSJt83W8aZF8ONreIJ3diycC28fg+GUplkl0PNE2gte3clS+bo3oBCSYZ97dsGH6G3HOssvni8j++zTwHSnYPlnLh2pmiWe4MUT3f4nemLFCYTF5+x7hQ5BxAj0KWt6/Gu6BeIkDGtPcOq00xLfEye2KfHxjAVvFxefEOxQJayPif5XKIz5998YYRwwKcK4mI4v7mB99O+tN/w+z3yoRIGlhsGS4uPhXEEY/HRGj891A/3Li31PAcePMaapmdx81Ygop3OVtO+qmoaPz0KipOh4nmsWKh4vpU3coGXu7h4SqPJnTKbprm37nItuPI1z3rdPYWBqtS/otfdDxPmU9vaU8yYTYcLUyjSbR4DMnL6tGNugqlcV3lJc61brRnCrc/t+JPsN76zpegTwznRS9mdl9cuVhCmpUPSRpJRjVMqv15DDwsjhEaRQwsLDVb00PIzyQwsCC4UNSHZuqkRq2AkTr9hE4TPOKy+DMZAUqiDuznMuh2bQ7UEoqA1+BnKinol4Emv7KY0ROIAWhkLIkeK7a9aspbU62rqZxURzIGB6a8Pl8OyL6TXZl+7sbWi4tFd/KaNaf7EjvH6CIEyMMNPp4bkiPIEgUolcBv2IqRxs/qg0oEQuqI6hkGKiyWQIBJi/LESwPuTsredKvZl226NZfMvWjoYVd94B0Z6OwbCTAMnrTdWFLYMLCfk3cxvy598lDn5iUvpcNoWHd5BgWDHFM+9Yr/snai11G1eUJExMCBMTNh5dYXDxyk5HFRGpCUojgr5ku2V6m2r/s/YL135u9t33Z+R6BouZzOISsRFbqRt/IumdPdRpCDOeglMb0ZSluAOXkxVgQhmM+y5tXdudSHBEREFyCsFHdTN+nQsn1gM/exEEVkxi3ybY96fMPUoCK7XKhpX/7cnc4RaTDMck0KOjHqfMFu07PFuQF7iejuEWZ2oQXKRtxxXgPRWtPkLQFwL2GErRw+E5MaFhXBjZUG/AMKGhIeRwDJYTBoaSFHnDeE32XrzYRCMaRaIVVCE9ms9iqszHcaBk9XLJIzV32E0dbr3X09P2oH7o1MPunpZ79QcIuMqKSlwNgZBYW1Gx/XcVeN+xs/u23G6iYGJ/GRAVBW4gRNDCIPjYqKiKyEuC/bU1LYObtSF+4uwao2aPPW4INFN5JbB0uY3jI1MHr0jIgq4eAZkgbhfH4JEbQyIjosjBDpeA4q3bEp+aVo2nGfEkYRrFXiqA7sfn5ExtBqzIfcTItrdbj8auvn0yILdvBdV7GgsOS4nycZxswlX5GV04hRQfT6WiXdsTjyCie/4aznT5lvKTHxTDyiFgrRx+cvV2BthFRRb7aYWJ/VXbMy5VK+TCOhLXbOvQU7s9gMqqzLUrEFJplGwC2sKuOTbc1oukMlFIMhMZkO/mCKOmArNrm11VLf8AsxO0UmUVOIGOAInkM9Ej9mXrdLhEjqoxXshvQiercDi2TmKfuw4dzYcSRLpunLQV+dcyCAkTCydhIDF4NEIZOR4RPhwV3RkRfgBU0QVZZK7F1rG7Nj8o5i+NHKbtsQQ6haInoQtYfHZDMycTcBO9cwSkwbrWjNljSunxYKWHTSA1OR5BZSGRJCYgCEkDpLybR4i94MhoPXEIFD2qje9HbRiIHwCGQ6LQK45TkcQxXCPBu5Do2ogcgZjHmAWc30HkRpgFMeLagC8keCc2jkURSVOhcz6F7N/ZVuDIxCRz0FiIQVeArOWUz+Ptn6NPPkAMnh18p+h7StIYXWJOOquzNU33R+pMF5h3WqwbJ0HSkBxEtIRChEnhHCQsjUp6uDsZZsIe3pamNbSoFw0sTEckoJlx82poOunCcQ/1ti//ko9w+cESON+/9EJo/q40snjbTjoHwj5gMSyfkWg33+UeQ0sqopokEIbPjmiPgAWjOpvymGYQP772Zt+zvvrBtyNOrZZm7YW24lwn61qT4s/xUOvaSAXrmJucbhRo+JQ3HyFfR9/T+oE3uWwAPvMGoI+J5rLvPH/eP3bmjONbAJ93bTM34jrBY+HwQ/++/phmBm+q8upmaf+XMoA3ZgwNFv7FdNLwjQI53W1Mm+tsXWta/DkeZl0bydaNXcjXtlgEb0fqB2/1QV4zpM5NPbTwZpaBm0/B8SmwTw2emXF8t/X+BODMzeGB2/2A57KVEauN2MnjVr9fNfLNxNuPq3v7DaXNQl4JO23AgxmLZBfbxMvTzOD16/2LPrr/y1wGiHGlocEPbKZOTCilWUMcP+BHHabVOK+tNHrDNLnyrpeSC7BS323gUC/H1YQ8G7DCaMFTePo67Gcb9eEuJRge2jCEiKebu9N/mAjks3j5KLSn8Hhu9clFN8Pn9eTQ6xHvglZNs5ekyCnXQWi6/ct2mIOVnVvEzmMo+EaBmvJ6BLT2U7f6nm792qY1B5kd4tS1HnjGtf0PJxJgsSI+DscSNiHyZxCEGKcE60O+kLPS8PjOZLJMTMDL0oBT1q/LKdzQV6bzyhUHzwLXkIPsMgqjgEZjWCTBZpduYDEKUMZqglEoMF5KjoWq+G6gAFevDy3sxnT9qprDffysiEDKutTb8L7fWgkp8/cvgUiCHsZELhP5LQ1z40ryuOUg2uLHdtK5q3mlqyavrAJxbY9ZEwQaiPwZBKEhxOWxqQTpHT2H7yP1LS+I2TS+ajFpFRftwKgrsq0DBPamIOz9aLvQtRl6Fjxd1pllKl01cXkVcA2zc0/CU0yUgC8rE1NSShJ/lSV4bi2ckAiF8lvd4a/vK+8/WqleKUpGxYs4OJyQE48SJv8Z/L7cd9BxmvintsGf77rEtvOrvTuScZAOzRwcWtmhIna9K1OD6aW6jIQxqS4DuMWmhT5YsvmreUaxvMv0iRu3gMntslEPwHhgAEw0QYoEMNC0mxntkrZ26r1OSWv/j7KBqVg25ukvUrE/qf6/13XTBUhPxZmI7U7zXNaHfbDe/VBt/x8WFXOu4MSuphh/T0NQHIcJneKUTvS8iLl+EUbAjU30swq2GrppM9dckuBagcczYlusDc5jYMDgE/lqepD1pHRmPaVdzdRO6DrVa7W7fVTcWbvTPVfi6HvWzYk7bh4jbW4VCopbmbGb2/Zxcm7bRzkrtrtFM0079TN1yTITI9hvT1BlkG7JX4AhOAFkBlYZtDNAp7RSxfLSXxzRhQ4tzi3M/44RuPkTFv/BiTStieGQiD+LrnmJqIQNtq5kZCYK3dfMgeBLqvsRee6fDRQNqVMDGWMOdIIo7eazimWov4henFmc1Tm+3vzNYDGudOXc0OX7Avus9lmDELXdFW4G7Uy5NKGzhyd9Yh6bGrFNiON6LnSCSBXLIHWJk+Og24UR0xmEfPJUdj8kzId0zzC/tAYoTRH3dqCJ16fqcVBDuxBOp6VHKqZw+p0Btth9MoV/iCUB250h8uJACCg9+UOUghItfD/kxMZWidlXXhkfxV7pMd6s6RRFSUx9ZmONoZuOgMU+u8BriQCv9act1OPj9b2T8uEM4uRPfsZ4rApNu3tD6urE6UCdWJmyLjrmu2xO/3z94CClkzLFmcvauCUOb+ujQGjrbDu4cn6vMsOtUHUqKGyM+40SUjK/0Ud6a8/c7IbQzk4T0sXpK1i6042Hf8C81X3dNoZB9R0fF9op/q9T5iSmJQdhsyFNa/Pk4MB4AuegMrX8EYZTaBJtk9aSESb9mRMG/iwgau0F7pOiWTWcfCBaG0x7SXXvu2+sqXImDLIrDHI6DHIzDBIUBvFtw9zDhfR5/TO6PcGILalLxbnUuIVR7BiLE2+3ccH3NVa8TaiYs6mL8jqwC0zgPB+fXeozbJgUsj51uL1DsFzukOa2SH4dKexI/ROl7CPt9x36H3EU2E/+dXCre/cOB1M33+uaGGaJvMd1fS1rilvBNfPuiIwcV/BGpz3Reb+nLv8CE9JVqXdnMejUih3pJT6lIB8uAfJaZvA49hegGPdSFH4Y4z8ggUSShmQLGZBSmiifbQyF2E5TMQ6M67aAsB1UHhjfKkpAiSiJJWegCFIqyiCjgs8Au/2O8EUn0Vl0EV1h7WgKWgfwrsAH7kDbkC9sDzwKT0HGJKc2wIkBBwaoXwz0B+oeySyYyMKrFAGTTYi7/LtiGUxBIUVSAA5JRyPFKpUPEAYy9wIxHETj70sF8g7Uj4KxdpqLrc+BuD+9X88iEqPNaE3dF2IBHhkoDoTwKMTDvVaCbiUCJUEy3AMp8KBwxAxf6yjQMXQcVaMTqAbVojp0EtWjU6gBne468wSW6Gj6cISm9D4cMxvAdGB1lnUf9825NhhDZItMlwlTuol9v/zR3Tp4JyNJveQp6fNMv+cGvPCyvcLPYF4fWLPmDXx4KJw6ABTSf0CPlb/3JtX5/4z6v+ndvnf41duFF+8s/H39+uSPI42c1ddv80eP+nP2ll2AL/zVCwszqD/joH7NI/g8APv0w7YFt3QOAA4FqnMWK5T91FSiSZ+ftJRJK3pKSVyc+a+NUqKSXGTPlfNXSZXXMFJHNZNcu4u5gCP0DRMq9vktXgaI77N3BM/mhmqNuF8IXwxGmcV9RI5yOL5uxTLQ7wFd9bXDG7m3QRvMBZJndv9XsJ9+BGTgxaqkFa17XFZRCqgovFzHQ8PCMYbRXTOlMxvdlcQXSkmsmZ5ZTJAt1LlDVt+cSvj8nt1ShgYiTxGCtKK1EugcvI4IWe9iQhzgFLw77BEveGNTT9j6CBiB3H5f3pMgVIyyfX6LlrKnZoD3hWz05tZrsq7GehbVemUW2zAqq8yAulTL/AxUC+nIj1dyiWfqXEZnEwV4SEaU8FB57xw7bJ2hBUFF3b0UOg53a1S3LqBLzhm/TUSpmU5pK9rXSoL7KvVOh6PCdkbgDgVEzwiHingqtGI16moJfUMmecglqS4SVWoG0sqTS9J7AZRZzP6ibgzt7q6BA0Olrxv7T47VQ4AaWRrGOpM7A87C92qrGsUb0MNd7f4VrfahTSzGmN+Glc9FfEZ8dFaGEo5iU4DM0YQaCdELdWNw9OYAW8yRPpmkIYduLcJhJaWWqRwqBHKC4rpQ3wwt6LlBlWLlgGKLziNRKW2V+looP+RiQYBHzvvYBDM2Y5PHpjgc9ilCXLu6o7/sYuqQ1l+dPFQUknsqtPpzHzffVFAHfOGEqQMXVH/2aBoqqltL3WFUBP0eJ567Cn0RPq32GtUF9GLzdYyRIx5waix+B4tZulU31jD+HXWnsTUEPpWEaNYMbGdPIjgI1bCNSYSB8K1/wmYt1D+8Y2fH1CEnIdlA5jT/YGPPrfr0+jZujaUEChIa+wHr/KebJhSoQELDYsjBu/sxwrpTyF5f82O8liJqBxlAFfIuc7mC0rmeZNh5eZtDeLjCXhzTU5eEhAM4ud6BkmDjVI4qbE5mTkWoGLemDb9GoY1LEglnY6WvoHSuJ5XsPG/lECOu8GeOxR6X5G4O8Mr1nvES56OlZ3DfWxqEQSZas5ejfLBp/ZWzTdMxCnAw2A6XoRrCYLNQaAYsDDAv5/fUfWfUURFRaZoBAAsNsHTklM6mjvUQZ1ieKIlXQQvw7VTxa2H+yzum0Rz/EZtl+cUEoazfY8/2x7ldTlACJwwkxA6JYnOCo0uhOC0ewTZK/MerWS/4duoGzrq29OmFzrneU7LPeStXGPJV/88/scctuZvzvPJ9zyBxPl96XKPMra2k4XCQiWfZi2McjOl6hVtUaLAkuCgaTWLrI+gXNsgxXtgdhTEg4gqDgg1+dB3eYmP50WxviU4m1lbuhOdgNJVyxvSI5qJAeLjo+nBmqSDp+G7A6CgJZArra6ZyveKsv/S4KLUI9jOIRsykyph4U8nh/PphL3M/fWM4/82xmttg/f+MFnwOrry3C33552PaDGVc28XuOUSMvdQ9t/CY/frTfpjcKSBdxB4TBTthQAbCuAz4ORPso4ShrsxJXQd7XhAaEciH5SnZYPnwkVQgz2sFNEXe22T/5ppGa8hg/6HiVAD8+JXbqt51z83Pb52TAyE4DCDwiz5PwaFv450bsIH1MzLWpNXor+PB8lcmP9Jm1Oq5vlzpc/zFV8stqjPoaln3QMBfd/9V7uxrlXfKQcciOtyDRvi/JoADk86RHO+L5UonJ+lJUH6PRdWqH9/zHLTqjin38MNqAiEEaUXeS0Str/IH5fJlaGAjVs+RzCr+IpPlbkUd9BnOUXqiB3RZV3RIW+dLuM8teiF994BcBruY4L7Gv0nbqavDgP2uNG/XwXU2pEOG6/txvO0QG35I61xPWsDtSFYpRFuj50bSEL88qmQEd8/8WC913/SkPaZtAiexaZ+yJzfGYLfpn0MdLzIp0vIe1PMZvatdj37Fn6C+/BDxdcqXDHfjXn+oTB+6BLVShV+J2FYo/IzBr2gQUfoE125CPYtfmcL3adaXBXzz2yJDdsBFSAd/WAPRsB0OwraN24OHTcqdG22Sy2kIZIuV0K/GdK0MZU/zqIKTcAiO0QMUJBA2xy+XO0eDB4g9KgD3aOPsSieyeWNgEnAWHODyxrC8TSHstzts0YBvvltlAmcokZsqqMYvxuIyz/Y/a7ZTaAAWALKbU7obySJwGbH3BDw45TUBNvGxudeUWAcq0YhQ4exCYOkItx9zGcM2AuvLlW2B9RVBA/TCPbgC/1jnFVzbGoftMz3PR0B+wMkJ1FRwZu83EDjdOFPqeOQFYvIy1vkZe4lxyRY2W2x7Vwg/zhGZTQTmfQL092pOGxxjKW7xi7u7iPVpwoZUZXdycYx72KQWjvuMySM6VQjPJQj1kXAFloYWuds8wP8YUxrcxt1p5w7WL1yuxxfOsv9r/Vs0vAkHk+B0ZlITnwmOT3wBeBrgKYAnATZiExn6ADzuqQGQPQAw6xBvvo54pwAU9pJAEgwh7MR0znaAF4U7V/68qf3262DD9gkKAADRALgd4GiACwAuBPgO4En/EC0tImrwTNwMsGFXMe/dZ41t5PgrSv6IRxjR6P7gZCmmIIAggy808IUECFaeemo7NL3WI6QAuE8seSQCGqIeiQEVwZE46NN/JAFsOo4kgSWFjByheGD67C+AEDDAEtyCT8OR1iihdqQNVOCw1VlEU9ZAo2WY/oRI+wSKsJZgzBZut2AmzEUR2DyRAzUmuTxnIVGorf34u+20iwCXY0eJYWuZTRqpOFSEsLIugoCtetCY92QjkaLttNasoTNeyl5kwoTYItHc7UXunylQ4/ZoE8vttJvAUpYPPzRWgjWIFIvDHeYVe/C0sY+9PFxDpc10iH5DgujkLJcpj1p+6rVI6LCAkZvomuwRKtjRrhGbE0YmMiGXbn4a0F2ZJIiR4PxzmaM/NKaGu5lpOKIHs76+/3+1u19jDSDagjS5oMsDwe/CDYgDJeKnBDpRgSfEH0uSAl3dQnUSR0N0XkeGQY8+vyNOBuKtZOhh7B7p0ZsCfyPDLWXE44jTMl5InIw/RjIRxhXJPdfI1E5/+8tTjz1JkxZtOnj8kVBsp2ZmGWbO4svJkhjpX69J1vr1eWZXMG5JlGxa7mQr/pOyyuqWtyY7n93IHgkZBbUVuaDnaLe9wmO0JyZWEfapaYOknOI0xlmkeS4l5yrGflGi40rBk9pa6+ITtD4hURs8J0xcLIE4HgQSbYSVUlltPvCCk5v4XZS7+NQ0tHlIlqJWogRJ6WTTM3SRZzl58c7I1JZymTtga3ny85FejIJSiaTxYeK0TRzKV5Ta/m7a4bovfJQ4+YkPuK8+ochSIbuc5LEp4FD8efiMarlHcYgUiOkSf/1dUqncIRU/Or/pw3/FVKp3SsMfMrGzfoN/rlS85LIrf7H0C54Uwkma6tAxrLQaXwCtrrvhpn+0u+V2ZP9g8TdiFVktWuX2rw533O2yK2hI2lxyz93uuZ8MOect7kFq7mh3y1nnqNPAxfTNuKvKBB6/zuzhT+UfTI88rp69NaR7Ur4ChTIdV53E0/Lk1OeZ/m723IAXXnpl0GtvvDXElwo9LN6/53ETJk35btoPP8303bQfqA5yUGTACy+99qZfZv0250948xYwwPpuiDbW+fDpy7dffvvjr38MJovN4fL4AqFILHkhszK5QlNLW0dXT9/A0MjYxNTM3MLSyrzh4u0JiCMlQSrZbJ+L8oS5EmbD8152oRzhaFmaULidCJmkjpJSAj0lPrMorqK98EFWVhVc6ggSZH6FgrOEcULBWdpuWoVvbxF3VyZcVsxlA18x5Em81nO2nNuVjbqpeYYoKFYK6oevLNKdjxalg7WO7JuYwzjIXg++iuDe/MIBD64hYVnCUx2bnwbA0gTZcCSudfCFRWXRWvayEioKXiYRzKihOb6l+UIYvUFgTXSdE2jU480SE940N7cuErR85VW8lxx5N8zhKgsKSqwcm+g0QfpFsqJuXBPQvnXYN3pUl3qC9DIL1lLNbDqgNXffIeaY3yC9UZadBFYvfFiecKKSDq9aKNhXbyIMOVGQx2OzKhIdXv2xrQb+RTSiF4mIEeuJR7xFWitK5C7W5YI/qyvWimBlLK/zfEgHO/lQi7k+sJYXrNwNV2GUA4yW0MqLrKFyeHJdI3/qFlwO3uXfrUMtlY+T3JKMA7c634JzuKKcsCxoFbOC88aKxOFhRVpJJtfGPUw6ZPNcrt6+y5XMLuTorY4aZzoXzD07N34pR2yVKJgsyvTYQSeBDQIkYObdTWkimm8ObNRLUYvr+plGe+plVobAUcIGmRbMhs6S/ZhBqYNOMU9T1xacYtaJWce/lS7hxLXivdI8fTEEk+raviKdtszMn7CW7nFvgv+vC2PM5oqE3j8cJ/Q8uBKGQjRP8/MK1uQW5780s+ju01V03fzVlr0qxDaLJYnoVSamEMukSMZ5a12brEVwHLpUBwao5tNqt93rPVrx+q/m01MAlbE9GI2NhhgLjD0i3E7tdmofGjjbZ8XdHlmjtzM7eOLQkUU7k44sOnXp2KYVj9Z8OnXpdYeNeas66Ui5NZbt1+9fx4ZHTRaDJXN2C29WhEF1AB6wZM5yNBhRhAGY12E+lDBAPdGASrQD6PUv5gJiNXudIAFbB6DSsXaoAuABo9JoAAhQFTAAABoAQCUAesBcQKwKDAUZssW64zEyV2M0tucX7mQ+nOJ4MYhKDidsYCaI0sxbIyz9Z5zDKMqQEuB4tlVvTHJZKe2ep83TE7cIRdlUOjZbS19Ka/9/COKf2WcuhyJWx7ldRel/7wRwmuqwchziziuXXwZaNVAZlLDwnbvOL2uZcG7S0GtImvQrXsaY+85rQuE9t+tessHvebhsXZKYdrblnjKnLO2S/hfWgVJTiFS/ZnrGvue0eHpixzHwPr6fRy7+sa9SDOeniML7B3clyR01pOcOZlXipfk/D12HIs77ZTH+DeE5Rufnfgz966yaFi/qfmL7l6tsNeRguSj1ThTdoFfp57oM//6f/6nX9R8=)
+    format("woff2");
+}
+
+@font-face {
+  font-family: "Inter";
+  font-style: normal;
+  font-weight: 800;
+  font-display: block;
+  src: url(data:font/woff2;base64,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)
+    format("woff2");
+}
+
+@font-face {
+  font-family: "Inter";
+  font-style: normal;
+  font-weight: 900;
+  font-display: block;
+  src: url(data:font/woff2;base64,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)
+    format("woff2");
+}
+
+@font-face {
+  font-family: "Monoton";
+  font-style: normal;
+  font-weight: 400;
+  font-display: block;
+  src: url(data:font/woff2;base64,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)
+    format("woff2");
+}
+
+@font-face {
+  font-family: "Orbitron";
+  font-style: normal;
+  font-weight: 400;
+  font-display: block;
+  src: url(data:font/woff2;base64,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)
+    format("woff2");
+}
+
+@font-face {
+  font-family: "Orbitron";
+  font-style: normal;
+  font-weight: 700;
+  font-display: block;
+  src: url(data:font/woff2;base64,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)
+    format("woff2");
+}
+
+@font-face {
+  font-family: "Permanent Marker";
+  font-style: normal;
+  font-weight: 400;
+  font-display: block;
+  src: url(data:font/woff2;base64,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)
+    format("woff2");
+}
+
+@font-face {
+  font-family: "Press Start 2P";
+  font-style: normal;
+  font-weight: 400;
+  font-display: block;
+  src: url(data:font/woff2;base64,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)
+    format("woff2");
+}
+
+@font-face {
+  font-family: "Rajdhani";
+  font-style: normal;
+  font-weight: 500;
+  font-display: block;
+  src: url(data:font/woff2;base64,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)
+    format("woff2");
+}
+
+@font-face {
+  font-family: "Rajdhani";
+  font-style: normal;
+  font-weight: 700;
+  font-display: block;
+  src: url(data:font/woff2;base64,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)
+    format("woff2");
+}
+
+@font-face {
+  font-family: "Saira Stencil One";
+  font-style: normal;
+  font-weight: 400;
+  font-display: block;
+  src: url(data:font/woff2;base64,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)
+    format("woff2");
+}
+
+@font-face {
+  font-family: "Shippori Mincho";
+  font-style: normal;
+  font-weight: 400;
+  font-display: block;
+  src: url(data:font/woff2;base64,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)
+    format("woff2");
+}
+
+@font-face {
+  font-family: "Shippori Mincho";
+  font-style: normal;
+  font-weight: 700;
+  font-display: block;
+  src: url(data:font/woff2;base64,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)
+    format("woff2");
+}
+
+@font-face {
+  font-family: "Sora";
+  font-style: normal;
+  font-weight: 400;
+  font-display: block;
+  src: url(data:font/woff2;base64,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)
+    format("woff2");
+}
+
+@font-face {
+  font-family: "Sora";
+  font-style: normal;
+  font-weight: 700;
+  font-display: block;
+  src: url(data:font/woff2;base64,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)
+    format("woff2");
+}
+
+@font-face {
+  font-family: "Space Grotesk";
+  font-style: normal;
+  font-weight: 400;
+  font-display: block;
+  src: url(data:font/woff2;base64,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)
+    format("woff2");
+}
+
+@font-face {
+  font-family: "Space Grotesk";
+  font-style: normal;
+  font-weight: 700;
+  font-display: block;
+  src: url(data:font/woff2;base64,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)
+    format("woff2");
+}
+
+@font-face {
+  font-family: "Special Elite";
+  font-style: normal;
+  font-weight: 400;
+  font-display: block;
+  src: url(data:font/woff2;base64,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)
+    format("woff2");
+}
+
+@font-face {
+  font-family: "Teko";
+  font-style: normal;
+  font-weight: 400;
+  font-display: block;
+  src: url(data:font/woff2;base64,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)
+    format("woff2");
+}
+
+@font-face {
+  font-family: "Teko";
+  font-style: normal;
+  font-weight: 700;
+  font-display: block;
+  src: url(data:font/woff2;base64,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)
+    format("woff2");
+}
+
+@font-face {
+  font-family: "VT323";
+  font-style: normal;
+  font-weight: 400;
+  font-display: block;
+  src: url(data:font/woff2;base64,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)
+    format("woff2");
+}
diff --git a/.claude/skills-media/embedded-captions/references/aesthetic-principles.md b/.claude/skills-media/embedded-captions/references/aesthetic-principles.md
new file mode 100644
index 000000000..17a52307c
--- /dev/null
+++ b/.claude/skills-media/embedded-captions/references/aesthetic-principles.md
@@ -0,0 +1,168 @@
+# Aesthetic Principles for Cinematic Captions
+
+The 18 rules that separate "designed" caption work from "preset-generated" caption work. This is the single most important reference in the skill — every plan.json and every Standard-mode HTML should be checked against these before committing.
+
+The whole competitive thesis: every AI caption tool in 2026 (Veed, Submagic, Opus Clip, Captions.ai, CapCut) is a **preset picker**. They hand the user a box of crayons. This skill is a **director** — it exercises judgment. Beat them on taste, not feature count.
+
+---
+
+## The 18 rules
+
+### 1. The subject always wins
+
+Captions exist to serve the face, not compete with it. If the caption draws the eye before the speaker, the caption has failed. **Before shipping any plan.json, ask: "does the caption or the subject read first?"** If caption wins, shrink, dim, or move it.
+
+### 2. Occlude, don't hover
+
+World-class caption design puts text _into_ the scene. Letters that pass behind a shoulder, mic, or head feel diegetic. Letters that float uniformly above the lower-third feel like PowerPoint. Use the matte pipeline — that's the moat over every competitor.
+
+### 3. Contrast is a hierarchy problem, not a brightness problem
+
+A white box behind text is a failure of taste. Priority order:
+
+1. `mix-blend-mode: overlay` or `screen` picking up scene luminance
+2. 2–3px dark stroke + soft drop shadow
+3. Narrow semi-opaque gradient bar (NOT a solid box)
+4. Dim the background plate by 10–15% locally
+5. (LAST RESORT) A hard white pill box — banned on cinematic directions
+
+### 4. Kill the constant lower-third
+
+Fixed-bottom captions are monotone. Caption zone shifts with shot:
+
+- Tight close-up → upper sidebar or crown
+- Mid-shot → embedded on back wall / foam / whiteboard
+- Wide → classic lower-third offset to non-subject side
+
+### 5. One family, two weights maximum
+
+Hierarchy lives in **weight** (e.g., 500 → 800), not in **font**. Mixing Montserrat + script + serif in one clip is the #1 amateur tell. Ship Inter, SF Pro, Söhne, GT America, Aktiv Grotesk, or Neue Haas Grotesk with ≥5 weights and compose with weight + size.
+
+### 6. Tracking tightens as size grows
+
+Display-size (>40pt) wants negative tracking (-10 to -30 units, or `-0.015em` to `-0.035em`). Body-size (14–20pt equivalent) wants positive tracking (+5 to +15, or `+0.005em` to `+0.015em`). Apple SF Pro's optical-size model is the reference. Submagic defaults do the opposite — they look cheap because of it.
+
+### 7. Cap height ≈ 3.5–5% of frame height for body captions
+
+- 1080p vertical (1920 tall): body 65–95px, emph/hook 130–170px
+- 1080p landscape (1080 tall): body 40–55px, emph 70–100px
+- Hormozi-size (~7–9% of frame) is **hook** size, not body size. Reserve for punchlines.
+
+### 8. Never italicize for emphasis in video text
+
+Italics are a **print** convention for flow inside a paragraph. On 24fps motion they read as "tilted" not "stressed". Emphasize with weight (extrabold), color (single accent), or size (1.3–1.6×). Italics allowed only for:
+
+- Literal quotation of written material
+- Foreign word
+- Thought vs spoken dichotomy
+
+### 9. Color discipline: one hue + neutrals
+
+Pick **one** saturated accent per video for keyword highlights. Hormozi's yellow+green+red works for him because his content is already loud. Cinematic = single accent + white/bone/charcoal. Default palette:
+
+- Warm white `#F5EFE6` on dark
+- Graphite `#1A1A1A` on light
+- Accent chosen from scene sampling
+
+### 10. Animate transform only, never the letter itself
+
+`letter-spacing`, `filter:blur`, `font-weight` animations cause inline-block reflow → line-jumps. Animate `translateY`, `scale`, `opacity`, `clip-path`. This is locked from the embedded-captions debugging.
+
+### 11. Minimum 0.4s per word visible
+
+BBC reading speed is 160–180 wpm (0.33–0.38s/word). Cinematic feel wants more breathing room — 200–220ms stagger per word, hold full phrase 0.4–0.6s before exit. Entries under 150ms read as frantic.
+
+### 12. Stagger is the primary expressive axis
+
+Same phrase, different stagger, totally different feel:
+
+| Stagger | Feel                             |
+| ------- | -------------------------------- |
+| 40ms    | machine-gun, urgent, TikTok-hook |
+| 80ms    | conversational, default          |
+| 150ms   | deliberate, documentary          |
+| 250ms+  | poetic, ceremonial               |
+
+Pick from content tone, not default to one value.
+
+### 13. Emphasis escalates _within_ a phrase, not _between_ phrases
+
+Every word bolded = no emphasis. Structure:
+
+- 70% plain body
+- 20% slight lift (color OR weight, not both)
+- 8% full emphasis (bigger, brighter, held longer)
+- 2% climax (biggest, held 1.5s, breath before + after)
+
+### 14. Break rhythm once per 30s
+
+Every-word-same-way = eye adapts, stops registering motion. Plant a rhythm-break every ~30s:
+
+- Phrase enters from opposite direction
+- A single word at 2× size
+- A beat of pure silence with no caption
+- A color shift
+
+This is what separates Submagic-preset work from something designed.
+
+### 15. Caption what adds, cut what restates
+
+Transcribe everything. **Display** 70–85%. Remove:
+
+- Filler ("um", "like", "you know", "I mean")
+- Self-corrections ("I think... I mean actually...")
+- Obvious visual echoes ("as you can see here" while pointing)
+
+Editorial judgment — no existing AI caption tool does this. It's pure upside.
+
+### 16. Segment on breath, not on duration
+
+Chunk at natural pauses ≥ 250ms. A caption spanning a breath-break feels wrong. Whisper word-level timestamps make this trivial.
+
+### 17. Safe zones per platform, always
+
+- 9:16 TikTok/IG/Shorts: caption zone `y ∈ [12%, 78%]` (bottom 22% is UI)
+- 16:9 broadcast: title-safe = center 80%
+- TV export: 5% margin on all sides
+
+Bake into the layout solver. Never eyeball.
+
+### 18. Letterbox/pillarbox is caption real estate
+
+Black bars on 9:16 from 16:9 source? Those bars are the caption home. 2.35:1 cinematic frame on 16:9 export? Serif quotation in the letterbox reads as documentary.
+
+---
+
+## Rhetorical judgment rules (editorial)
+
+These are the "what to caption" decisions. No existing tool exercises them.
+
+- **Filler suppression** — off/light/strong. Default: light for documentary, strong for vlog.
+- **Self-correction folding** — display only the final version.
+- **Breath-group segmentation** — split on silences >250ms, never mid-phrase.
+- **Semantic emphasis** — LLM-pass per phrase: "which 1–2 words carry the meaning?" Highlight those. Don't default to stressed syllables or loudest words.
+- **Silence honor** — if speaker pauses 1.5s+ for rhetorical effect, don't back-fill with lingering prior caption. Let silence breathe.
+- **Quote-sensing** — "he said, quote…" or air quotes → italic (one of the allowed italic exceptions).
+- **No `[laughs]` / `[sighs]`** — those are accessibility captions. For aesthetic captions, they pollute the frame.
+
+---
+
+## Self-critique checklist (run before rendering)
+
+The agent's own pre-render pass. Flag violations:
+
+- [ ] Does the caption or subject read first? (Rule #1)
+- [ ] Any hard white pill boxes? (Rule #3 — banned on cinematic)
+- [ ] Still lower-third for a close-up? (Rule #4)
+- [ ] More than 2 weights or more than 1 font family? (Rule #5)
+- [ ] Italic used for emphasis? (Rule #8 — banned)
+- [ ] More than 1 saturated accent color? (Rule #9)
+- [ ] Letter-spacing or filter:blur animating? (Rule #10 — banned)
+- [ ] Stagger same for documentary and vlog? (Rule #12)
+- [ ] Every group emphasized? (Rule #13)
+- [ ] 30s+ with no rhythm-break? (Rule #14)
+- [ ] Displaying every filler word? (Rule #15)
+- [ ] Caption crossing breath-break? (Rule #16)
+- [ ] Caption in platform UI zone? (Rule #17)
+
+Any "yes" to a violation question → regenerate the affected segment.
diff --git a/.claude/skills-media/embedded-captions/references/anti-patterns.md b/.claude/skills-media/embedded-captions/references/anti-patterns.md
new file mode 100644
index 000000000..21e6a3408
--- /dev/null
+++ b/.claude/skills-media/embedded-captions/references/anti-patterns.md
@@ -0,0 +1,188 @@
+# Anti-Patterns
+
+You default to these. Stop.
+
+Each entry: the bad habit, what it produces, what to do instead. Written in the voice of someone who has watched an agent do this 10 times — because we have.
+
+---
+
+## Layout
+
+### You default to center-aligned crown.
+
+`.crown-plane { left: 0; right: 0; text-align: center }` is the template default, and you'll leave it on every video because it worked once. On a subject that sits right-of-center (Jobs in a 16:9 frame), the body eats the middle 60% of the word and "THE BEATLES" becomes "THE \_\_\_ S".
+
+**Before using the default crown**, run the three conditions in [layout-heuristics.md § Crown placement](layout-heuristics.md):
+
+1. Subject centered within 10% of frame center
+2. Clean zones ≥ 15% on each side
+3. Crown width > subject width + 400px
+
+If any one fails, **move the crown to the larger clean zone** with a narrower container and smaller font. Don't keep centering a word that's about to be 60% occluded.
+
+### You compute text leftmost as `plane_left + padding`.
+
+That's correct for left-aligned. Wrong for the templates you're using, which are **right-aligned** on the main column and **center-aligned** on crowns. The real leftmost depends on the word width.
+
+| Alignment | leftmost_x                                         |
+| --------- | -------------------------------------------------- |
+| Left      | `plane_left + padding_left`                        |
+| Right     | `plane_right − padding_right − longest_line_width` |
+| Center    | `plane_center − longest_line_width / 2`            |
+
+Compute it against the **longest wrapped line**, not the whole phrase. "four very talented guys" wraps to 3 lines — the widest is "talented" (~8 chars), not 23.
+
+### You treat `plane_left` as the text's leftmost edge.
+
+It isn't. With `left: 180px` and a right-aligned 468px word, the text starts 104px **before** `plane_left` relative to the plane, but actually lands somewhere inside the plane box. The plane box just sets the coordinate space — the text positions inside it based on alignment. Check the compiled output, not the plane attribute.
+
+### You center text on the frame when the subject is off-center.
+
+Look at the subject's body center, not the frame center. Jobs sits at x=1100 in a 1920 frame. The **scene's** center of gravity is 1100, not 960. Center-aligning text to 960 is center-aligning to the empty left third, not to anything meaningful.
+
+### You copy-paste position values from memory-wall to a new video.
+
+`top: 40, right: 30, width: 720, rotateY: -13` worked for a 1280×720 frame with an acoustic foam wall on the right. It will not work on a 1920×1080 frame with a bookshelf backdrop. Run the 6-item checklist in [scene-types.md](scene-types.md) for the new video before reusing any numbers.
+
+---
+
+## Typography
+
+### You use template default font sizes regardless of column width.
+
+Template defaults (66/78/92/140) are tuned for a ~560px column. When you bump the plane to 700px+ and don't touch the fonts, the captions feel underweight — small text swimming in negative space.
+
+Use the [Font-size × column-width matrix](typography-presets.md). For a 700px column, that's 78/108/128/220 — a 30-40% bump across the board. Re-check pillarbox safety after bumping (bigger right-aligned text extends further left).
+
+### You pick `intro` style for every first caption.
+
+Intro = italic, smaller, contemplative. Fine for filler discourse markers ("You know,", "So,", "Well,"). **Not** for the first line when it's actually the thesis ("I've had this kind of upbringing"). Read the words semantically, not positionally.
+
+### You skip emphasis entirely because "every caption looks clean."
+
+A story without an emph or crown is typographically flat — viewers can't feel the crescendo. Reserve at least ONE emph per video for the line that lands. Skip it only for truly monotone content (policy statements, warnings).
+
+### You give every group its own style.
+
+Style is supposed to signal _hierarchy_. Using `intro`/`phrase`/`emph`/`dream`/`crown` all in one 15-second video means none of them signal anything. Pick 2-3 styles max for a short clip.
+
+### You only use the 5 preset class names.
+
+`intro / phrase / emph / dream / crown` are scaffolding, not a closed set. The canonical `memory-wall.html` uses `cap-1 / cap-2 / cap-3 / cap-4` — **position-indexed** with bespoke typography per position. That's how it achieves the 3-line right-aligned cascade on the climax. You can't express "this cap has a hanging indent at position 2" with `"style": "dream"`.
+
+The `"style"` field in plan.json accepts **any string** — it becomes `class="cap-<string>"`. Define the class in `custom_css`:
+
+```json
+"custom_css": ".cap-1 { font-size: 78px; ... } .cap-2 { padding-right: 44px; }",
+"groups": [{"id": "cg-0", "style": "1", ...}]
+```
+
+When the scene needs per-position bespoke typography, do this. Don't force-fit into `intro / phrase / emph`.
+
+### You regenerate from plan.json when a canonical example already has the answer.
+
+When scene framing matches `references/example-renders/memory-wall.html` or `champion.html`, clone that HTML into `<project>/index.html` and only swap the GROUPS array. Don't re-derive the design from presets — you'll lose the specific per-position typography that took many iterations to validate. See [bespoke-vs-presets.md § The clone-and-tweak workflow](bespoke-vs-presets.md).
+
+---
+
+## Blending
+
+### You default to `mix-blend-mode: overlay`.
+
+Overlay works on **mid-tone** backgrounds. On dark bookshelves (<60 luminance), overlay makes white text render as black. On sunny backgrounds (>180 luminance), overlay blows out. Check the actual luminance of the caption region in a sampled frame. Pick:
+
+- mid-tone surface (60-180) → `overlay`
+- dark surface (<60) → `screen`
+- bright surface (>180) → `normal` with opaque text
+
+### You animate `letter-spacing` on the word entry.
+
+You saw a "typewriter breath" effect somewhere and added `letterSpacing: "0.04em"` to the `fromTo` "from" state. Result: inline-block reflow every frame → the whole `.cap` line box recomputes → captions visibly jump between rows. See the "Some → line 2" bug from memory-wall.
+
+**Animate only opacity + transform.** If you want a breath effect, use `scale` or `y`, not letter-spacing.
+
+---
+
+## Animation
+
+### You fade both the group container AND each word.
+
+Default feels safer: fade the container in, then fade each word in. But container.opacity × word.opacity produces a non-linear curve — at progress 40% the combined opacity is 16%, not 40%. Visible result: captions seem to "pop" into view around halfway.
+
+Set container opacity to 1 at entrance via `tl.set`, then fade only the words. Single-layer opacity = linear perceived fade.
+
+### You stack captions in a flex column.
+
+Flex-direction: column with multiple `.cap` children looks tidy in source. At runtime, hidden captions (`visibility: hidden`) still reserve flex space. The newly-entering caption shows up at the _bottom_ of the column instead of the designed position — landing in the gesture zone, getting clipped.
+
+Use `position: absolute` for each `.cap` inside the plane so hidden ones don't occupy layout. Both shipped templates do this.
+
+### You start the timeline at t=0.
+
+Caption at exactly t=0 feels like it was there before the video started. Offset 0.1-0.3s (hyperframes motion-principles.md agrees). Same for the very last caption — let it exit before the video fades.
+
+---
+
+## Scene admission
+
+### You trust that "looks like one speaker" = "is one speaker throughout."
+
+TV archive clips cut to B-roll mid-sentence. Interview clips insert cutaways to the interviewer. You didn't check frames beyond the first one, so you rendered captions across a shot transition. Result: captions designed for Subject A are placed relative to Subject B's position (or empty frame) for half the render.
+
+Sample frames at 20%, 50%, 80% BEFORE planning. If the scene changes, trim to the largest single-subject segment.
+
+### You ignore baked-in captions / pillarbox / watermarks.
+
+You saw black bars on the sides and didn't computing the safe-zone. Your captions cross the pillarbox. Or: the source already has burned-in subtitles and you added more — two caption systems fighting for attention.
+
+Run the **letterbox probe** first. If the source has existing captions, refuse with: "source already captioned, adding more would conflict."
+
+### You ship Whisper's transcript without checking timings against the beat.
+
+Transcription is Whisper (via `transcribe.cjs`, no API key) — good word timings, but not infallible: a word can land with a near-zero duration or a timestamp a beat off. This skill is verbatim + on-beat, so `check-timing.cjs --strict` (80ms tolerance) is the gate, not a suggestion — fix drift in `plan.json` before rendering, and never pack two transcript words into one timed entry (the second inherits the first's timestamp and fires early).
+
+---
+
+## Matting
+
+### You enable CoreML for the matting ONNX.
+
+It's the Apple way, obviously faster. No. CoreML partitions the ONNX graph across providers. The mixed-precision boundary produced (observed with the previous RVM engine) alpha=30 inside the subject's face while background correctly reads 0. Captions shine through face. Pin the CPU execution provider only (`onnxruntime-node`). Our `matte.cjs` already does this; don't "optimize" it by re-adding CoreML.
+
+### You pick a matte model by "general vs human."
+
+DECISION FLIPPED 2026-06-12 after a 5-model × 6-scene A/B with caption renders: the matte's job here is CAPTION LAYERING, not prop fidelity. `u2net_human_seg` (via hyperframes `remove-background`) usually excludes thin offset furniture (mic boom arms) from the matte — words stop being sliced by booms, which beat PP-MattingV2's prop-preserving behavior on real caption videos. It is NOT surgical: large salient objects near the subject (telescope rigs) can still leak in — always sample frames_fg/. Known cost: HELD products can drop out intermittently (captions pass in front) — route product-demo climaxes away from held objects. `isnet-general-use` lost outright (backlit-hair collapse). birefnet-portrait (MIT) beat everything semantically (keeps held items AND drops furniture) but is 928 MB / ~7 s-per-frame CPU — a future quality tier, not the default.
+
+---
+
+## Grouping
+
+### You caption every word.
+
+Transcripts are verbose — "you know, um, I, I mean, you know" is 5 words from a single beat. Captioning all of them clutters the screen and breaks reading rhythm.
+
+Editorially drop filler. Use the rules in [caption-grouping.md](caption-grouping.md): merge short fragments, cut repeated discourse markers, keep the meaning, trim the noise. You are writing typography to support speech, not a court transcript.
+
+### You group by fixed word-count.
+
+"3 words per caption, always" makes every caption look the same and fights the natural cadence of speech. Break on sentence boundaries, 250ms+ pauses, and semantic units instead. Caption sizes will naturally vary from 2 words to 5 — that's correct.
+
+---
+
+## The meta anti-pattern
+
+### You read one reference doc and skip the rest.
+
+You'll read this file alone and feel covered. These anti-patterns reference concepts defined in `layout-heuristics.md`, `typography-presets.md`, `scene-types.md`. If you haven't read those, the fix advice here won't make sense.
+
+**Order of reading for a new video**:
+
+1. SKILL.md (decision gate + pipeline + pre-flight probes)
+2. bespoke-vs-presets.md (**first check if a canonical example fits — clone if so**)
+3. scene-types.md (template selection — all 4 wall conditions)
+4. layout-heuristics.md (positions, sides, crown, font scale, pillarbox formula)
+5. typography-presets.md (font-size × column-width table, starting points)
+6. caption-grouping.md (word → group)
+7. **This file last** (to catch yourself before committing to plan.json)
+
+If you're pressed for time, still read this one — it flags the failures you're about to make.
diff --git a/.claude/skills-media/embedded-captions/references/bespoke-vs-presets.md b/.claude/skills-media/embedded-captions/references/bespoke-vs-presets.md
new file mode 100644
index 000000000..d6f8fd440
--- /dev/null
+++ b/.claude/skills-media/embedded-captions/references/bespoke-vs-presets.md
@@ -0,0 +1,178 @@
+# Bespoke design vs. presets — when to override, when to clone
+
+The 5 preset styles (`intro / phrase / emph / dream / crown`) and the 3 templates (`wall-embed`, `corner-column-crown`, `portrait-header`) are **scaffolds**, not rules. The best renders we've shipped all override presets for specific groups because **typography is a per-scene decision**, not a general rule.
+
+If you only use presets, your render will look generic. If you only copy existing renders, your skill won't adapt. The right workflow is:
+
+1. **Decide the shape first** (template choice, plane position, blend mode).
+2. **Check if a canonical example is close enough** → clone and tweak words + timings.
+3. **Otherwise start from presets** → override per-group via `custom_css`.
+
+---
+
+## Canonical example renders
+
+Full HTML for two validated renders is in `references/example-renders/`:
+
+| File               | Scene                                                   | What makes it work                                                                                                                                                                                         |
+| ------------------ | ------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `memory-wall.html` | Introspective monologue, right-side foam wall, mid-tone | Right-aligned cascade, per-group bespoke sizes (`cap-1` 78 italic / `cap-2` 66 italic + right hanging-indent / `cap-3` 72 upright / `cap-4` 90 uppercase). `mix-blend-mode: screen` for the dark-ish foam. |
+| `champion.html`    | Podcast interview, cluttered bookshelf, 1920×1080       | Upper-left column + center-stage crown. Tuned preset class sizes (`cap-intro` 52 / `cap-phrase` 60 / `cap-emph` 70 / `cap-crown` 140). `screen` blend reads the shelves through text.                      |
+
+**When a new scene matches one of these closely** (similar framing, similar subject-center, similar backdrop type): clone the HTML and only replace the GROUPS array + word timings. Don't re-derive the design from presets — you'll lose the specific choices that took many iterations to validate.
+
+---
+
+## When presets are wrong
+
+You'll reach for presets like `"style": "emph"` when what the scene really needs is:
+
+### "This cap is at position N and deserves its own treatment"
+
+`memory-wall.html` uses `cap-1 / cap-2 / cap-3 / cap-4` — **position-indexed**, not role-indexed. Each one is a bespoke design for a specific phrase at a specific point in the arc:
+
+- cap-1 (soft opener, 4 words): 78px italic 600 — feels like a whisper
+- cap-2 (dreamy modifier, 3 words): 66px italic 500 + `padding-right: 44px` — hanging indent creates ragged right-edge stagger
+- cap-3 (turn, 2 words): 72px upright 700 — the syntactic pivot, no italic
+- cap-4 (climax, 4 words): 90px uppercase 900 — three lines cascade right-aligned
+
+`phrase/emph/intro` can't express "this cap has a hanging indent" or "this cap is the syntactic pivot". When that matters, invent your own class names:
+
+```json
+{
+  "template": "wall-embed",
+  "custom_css": "
+    .cap-1 { font-size: 78px; font-weight: 600; font-style: italic;
+             letter-spacing: -0.01em; }
+    .cap-2 { font-size: 66px; font-weight: 500; font-style: italic;
+             padding-right: 44px; }
+    .cap-3 { font-size: 72px; font-weight: 700; letter-spacing: -0.015em; }
+    .cap-4 { font-size: 90px; font-weight: 900; letter-spacing: -0.03em;
+             text-transform: uppercase; line-height: 1.0; }
+  ",
+  "groups": [
+    { "id": "cg-0", "style": "1", "words": [...] },
+    { "id": "cg-1", "style": "2", "words": [...] },
+    ...
+  ]
+}
+```
+
+The `"style": "1"` field becomes `class="cap-1"` on the element — any string works, no validation.
+
+### "The template's blend doesn't suit this backdrop" → pick a different template, do NOT override
+
+**Cinematic mode does not override colour or blend.** A template's `mix-blend-mode` + fill are **locked DNA** — `make-composition.cjs` ignores `plan.cap_color` / `blend_mode` / `text_shadow` / `text_filter`. Selecting a template commits to its look; the only agent-authored things are layout (planes/positions) and per-group typography.
+
+So use the caption-region luminance to **choose** a template that already fits — never to recolour one:
+
+| Region luminance                  | What fits                                                                                     | Why                                                                        |
+| --------------------------------- | --------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------- |
+| < 60 (dark / low-key)             | a cream + `screen` template (`cinematic-cream`, `memory-wall`, `champion`, `portrait-header`) | light text glows, picks up the scene                                       |
+| 60–180 (mid-tone)                 | a cream + `screen` template still reads (add a scrim via Standard if marginal)                | text picks up texture                                                      |
+| > 180 (bright: window, pale wall) | **none of the cream/`screen` Cinematic templates — they wash out**                            | → use **Standard mode** (opaque rail, set per the chosen template) instead |
+
+If the scene is bright and the cream/`screen` look washes out, that's the signal to switch to **Standard mode** (which sets opaque colour in the HTML), not to recolour a Cinematic template into something it isn't.
+
+### "Hanging indent / outdent / letter-width tweak"
+
+These are per-group affordances you'll occasionally need. Express via `custom_css`:
+
+```css
+#cg-2 {
+  padding-right: 44px;
+} /* right-aligned: shrinks right edge, creating left outdent */
+#cg-2 {
+  padding-left: 44px;
+} /* left-aligned: offset right start */
+.cap-emph .w:first-child {
+  font-size: 110%;
+} /* oversize first word only */
+```
+
+The `#cg-N` selector always works because `make-composition.cjs` writes `<div id="cg-N" ...>` for every group.
+
+### "Caps should accumulate (flex stack) instead of swap"
+
+All three templates default to `position: absolute` on `.cap` inside their plane — caps stack at one spot and only the active one shows (single-caption swap). This is correct for `portrait-header` and `corner-column-crown`, where each caption replaces the last.
+
+`memory-wall` uses **flex column accumulation** — captions pile up like a poem. The template doesn't default to this, so override via custom_css:
+
+```css
+.wall-plane {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: flex-end; /* or flex-start for left-aligned */
+  text-align: right;
+  gap: 14px;
+}
+.wall-plane .cap {
+  position: static; /* un-do template's absolute */
+  top: auto;
+  right: auto;
+  max-width: 100%;
+}
+```
+
+With this + staggered `in` / `out` times, cap-0 fades in at t=0.2, cap-1 at t=2.55 (below cap-0 in flex order), cap-2 at t=4.90 (replaces both as they fade out together at t=4.85) — this is how the memory-wall poem pages work.
+
+### "Font size doesn't match the scene"
+
+Template preset sizes are tuned for a specific column width + frame size. Don't fight them — override:
+
+```json
+"custom_css": ".cap-intro { font-size: 52px; } .cap-phrase { font-size: 60px; }"
+```
+
+Then check [typography-presets.md § Font-size scales with column width](typography-presets.md) for what to aim at given your plane's actual dimensions.
+
+---
+
+## The clone-and-tweak workflow
+
+For a new video that's clearly similar to an existing canonical example:
+
+```bash
+# 1. Scaffold the project
+hyperframes init <project> --non-interactive --video <video.mp4>
+
+# 2. Matte + transcribe
+node scripts/matte.cjs <project>
+node scripts/transcribe.cjs <project>
+
+# 3. Copy the canonical HTML instead of writing plan.json
+cp references/example-renders/memory-wall.html <project>/index.html
+
+# 4. Replace GROUPS array with the new transcript's grouping (hand-edit index.html)
+
+# 5. Render directly (skip make-composition.cjs since we're not using plan.json)
+bash scripts/render-and-composite.sh <project>
+```
+
+This skips the preset-based plan.json entirely. Use when:
+
+- Subject framing, shot composition, and backdrop type are similar to the example
+- You just need to swap the words and timings
+- The bespoke typography from the example is what you want
+
+**Don't clone when**:
+
+- Subject position differs significantly (e.g. centered vs off-center)
+- Scene luminance / blend-mode needs are different
+- You want to experiment with new typography
+
+In those cases, start with plan.json + custom_css and iterate.
+
+---
+
+## Rendering history
+
+`render-and-composite.sh` now snapshots `index.html` + `plan.json` into `<project>/history/` with a timestamp before every render. If the user says "the previous one was better", diff against the latest snapshot:
+
+```bash
+ls <project>/history/
+diff <project>/history/index-20260422-203947.html <project>/index.html
+```
+
+This lets you recover a design you iterated away from, without re-reading the agent transcript.
diff --git a/.claude/skills-media/embedded-captions/references/caption-grouping.md b/.claude/skills-media/embedded-captions/references/caption-grouping.md
new file mode 100644
index 000000000..06f04c1c9
--- /dev/null
+++ b/.claude/skills-media/embedded-captions/references/caption-grouping.md
@@ -0,0 +1,130 @@
+# Caption Grouping
+
+How to turn the Whisper word-level transcript into the `groups[]` array of plan.json.
+
+## Goal
+
+**Each group is one visual phrase**: enters, reveals word-by-word, exits. Rule of thumb: 1 group ≈ 1 comma-to-comma clause or 1 breath of speech.
+
+## Input
+
+`transcript.json` from `transcribe.cjs`:
+
+```json
+{
+  "words": [
+    { "text": "Some", "start": 0.24, "end": 0.44, "type": "word" },
+    { "text": " ", "start": 0.44, "end": 0.48, "type": "spacing" },
+    { "text": "memories", "start": 0.48, "end": 0.82, "type": "word" }
+  ]
+}
+```
+
+Drop `type: "spacing"` entries; you only need words.
+
+## Break boundaries
+
+Cut a new group at ANY of:
+
+1. **Pause ≥ 500ms** (gap between word.end[i] and word.start[i+1]) — speaker took a breath.
+2. **Sentence terminator** — word ends with `.`, `?`, `!`, or an em-dash-like pause.
+3. **Strong comma** — `,` followed by pause ≥ 250ms.
+4. **Discourse reset** — words like "but", "so", "and then", "you know" starting a clause often merit their own or new group.
+5. **Group reaches 6 words OR 2.5 seconds** — whichever first. Long groups feel like subtitles, not embedded typography.
+
+Hard constraints:
+
+- Minimum 2 words per group (1-word exceptions: interjections like "Wait." or the crown line).
+- Minimum 0.5s on screen. If a group is less, merge into neighbor.
+- No overlapping groups — at most one visible at a time.
+
+## Timing the group
+
+For a group with words `w[0]..w[n-1]`:
+
+- `in` = `w[0].start - 0.08` (enter slightly before first word)
+- `out` = `min(next_group.in - 0.05, w[n-1].end + 0.6)` (linger ~0.6s after last word, but don't collide with next)
+
+The last group extends to the video end if needed.
+
+## Style & tone (cross-reference)
+
+See `typography-presets.md` for how to pick `style` and `tone` per group. Work left-to-right through the groups and:
+
+1. First group: default `intro` + `soft`.
+2. Watch for emphasis signals (ALL CAPS in transcript is rare but possible; more often it's semantic — superlatives, proper nouns).
+3. Escalate tone into `present` once the monologue shifts from setup to statement.
+4. Reserve `crown` for at most ONE group, typically the final line.
+
+## Editorial surgery is allowed
+
+You do NOT have to caption every word. It's fine to:
+
+- **Drop filler** like extra "you know"s, "um"s, "I mean"s if they bloat the visual pace.
+- **Condense** a 6-word run into 4 by cutting function words, as long as the meaning and timing remain truthful.
+- **Skip the whole thing** during obvious silence or non-speech (laugh, music interlude).
+
+Editorial rule: you are writing typography to support the speech, not a court transcript. Keep meaning, trim noise.
+
+## Example (champion)
+
+Transcript: "You know, for me I've had this kind of upbringing, had the great foundation and, you know, I've achieved incredible things. I was dreaming of becoming number one in the world and becoming a Wimbledon champion"
+
+Groups after editorial pass:
+
+```json
+[
+  {
+    "id": "cg-0",
+    "style": "intro",
+    "tone": "soft",
+    "words": ["You", "know", "for", "me"],
+    "in": 0.1,
+    "out": 1.45
+  },
+  {
+    "id": "cg-1",
+    "style": "phrase",
+    "tone": "soft",
+    "words": ["I've", "had", "this", "kind", "of", "upbringing"],
+    "in": 1.4,
+    "out": 3.35
+  },
+  {
+    "id": "cg-2",
+    "style": "phrase",
+    "tone": "soft",
+    "words": ["the", "great", "foundation"],
+    "in": 3.5,
+    "out": 5.35
+  },
+  {
+    "id": "cg-3",
+    "style": "emph",
+    "tone": "present",
+    "words": ["I've", "achieved", "incredible", "things"],
+    "in": 6.05,
+    "out": 8.3
+  },
+  {
+    "id": "cg-4",
+    "style": "dream",
+    "tone": "present",
+    "words": ["dreaming", "of", "becoming", "number", "one"],
+    "in": 8.5,
+    "out": 10.4
+  }
+]
+```
+
+Plus the crown:
+
+```json
+{ "id": "cg-crown", "style": "crown", "words": ["Wimbledon", "Champion"], "in": 10.8, "out": 12.08 }
+```
+
+Notice "had" was dropped from cg-2 ("had the great foundation" → "the great foundation"), "I was" was dropped from cg-4, and "a" was dropped from crown — all for visual cadence.
+
+## word.start/end inside groups
+
+Pass through the original timestamps from the transcript. Don't retime individual words — only the group `in`/`out`. The word-level karaoke reveal inside each group uses the original w.start.
diff --git a/.claude/skills-media/embedded-captions/references/composition-craft.md b/.claude/skills-media/embedded-captions/references/composition-craft.md
new file mode 100644
index 000000000..eee8a33ff
--- /dev/null
+++ b/.claude/skills-media/embedded-captions/references/composition-craft.md
@@ -0,0 +1,522 @@
+# Composition craft — EMBED track only
+
+This is the deep "how to lay a caption INTO the scene" manual — it governs the **embed**
+track only (captions composited behind the subject). The default **rail** track (standard
+lower-third subtitle, where most text lives) has its own, much simpler spec → [rail.md](rail.md).
+Read this before authoring any **promoted** phrase, in either authoring mode (template
+Cinematic `plan.json` or Standard `index.html`).
+
+Topics: phrase grouping, planes & clean-zone anchoring, zone coherence, climax pop,
+readability, edge breathing, the occlusion 3-step judgement, accumulation, and persistence.
+
+> **Two-track model (SKILL.md § Caption model).** Render states are `drop` / `rail` / `embed`.
+> The `bg / fg / hybrid` axis used throughout the text below is **superseded**: read **"bg" as
+> embed** (behind subject / in-scene), **"fg" as rail or promote-out** (in front), and "hybrid"
+> as simply rail + embed coexisting. Everything here applies to the **embed** track — don't
+> apply this craft to the rail.
+
+(Granular sub-topics also have their own files — see SKILL.md § Shared knowledge.)
+
+---
+
+### Caption layer: BG vs FG (aesthetic axis)
+
+Separately from template choice, decide whether captions are **embedded** (behind subject, matte occludes — default "embed" cinematic feel) or **announced** (in front of subject, no occlusion — poster / lower-third feel):
+
+- **bg** — classic embed. Captions sit behind the matte, subject's body partially occludes letters. **Default for any cap that fits the frame.** Partial occlusion is the cinematic feature — small narrator caps with face nibbling 20-30% of letters reads as embedded texture; climax words with face crossing 30-40% reads as Vogue masthead. The eating is what sells the embed. Don't shrink to avoid it.
+- **fg** — captions float on top, subject can't occlude. **Fallback for when bg cannot work.** Two scenarios:
+  - **Climax fg**: the climax word is so big at impactful size that subject + frame width together leave no place for bg to render at all (subject fills frame AND climax phrase is long; bg would be eaten past readability into broken).
+  - **All-fg fallback**: rare, only when the entire scene has no usable bg zone for any caption.
+- **hybrid** (per-group `layer:` field) — when one cap (usually the climax) hits the "no place to fit bg" wall but the others (smaller body caps) still work fine in bg. **Body bg + climax fg** is the canonical hybrid pattern.
+
+**Rule of thumb:**
+
+- Small narrator/emphasis captions: bg almost always. Subject eating a few letter-edges = embed feature.
+- Climax: try bg first, sized to maximally cross subject. If that size won't fit frame width, AND no clean zone elsewhere, use fg.
+- Don't invert the hybrid: body fg + climax bg is the WRONG direction (sacrifices the easy bg embed wins on body, while the climax that needed protection from over-occlusion gets sent into the fire).
+
+**Hybrid worked example — Startup_Host (subject fills frame).**
+
+Subject fills the frame top-to-bottom (head_top y=126 / 10% from top). For body captions there's no large clean zone, but small italic narrator caps in upper corners get eaten ~25% by subject — that's the embed showcase. For the climax "SUCCESSFUL STARTUP" at maximally cinematic size, bg would be eaten 40-50%+ → past cinematic into broken. Climax goes fg.
+
+```json
+{
+  "caption_layer": "bg",
+  "groups": [
+    {
+      "id": "cg-0",
+      "plane": "body",
+      "layer": "bg",
+      "css": "font-size: calc(0.055 * var(--h)); font-style: italic; ..."
+    }, // narrator bg — face eats edges, embed texture
+    {
+      "id": "cg-1",
+      "plane": "body",
+      "layer": "bg",
+      "css": "font-size: calc(0.085 * var(--h)); font-weight: 800; text-transform: uppercase; ..."
+    }, // emphasis bg — Vogue masthead
+    {
+      "id": "cg-5",
+      "plane": "crown",
+      "layer": "fg",
+      "css": "font-size: calc(0.09 * var(--h)); font-weight: 900; text-transform: uppercase; ..."
+    }
+    // ↑ climax fg: subject too dense for bg to land readably; fg fallback. Sized to fit frame width fully (single line).
+  ]
+}
+```
+
+Result: body bg captures embed cinematic across the subject (eaten edges = texture not bug), climax fg sits on top fully visible because there was nowhere else for it to go. make-composition.cjs emits both `index.html` (bg groups) and `index_fg.html` (fg groups); render-and-composite.sh runs two parallel Chromium passes and ffmpeg screen-blends fg over bg+matte.
+
+Set via `caption_layer: "bg" | "fg"` plan-level (default for groups without explicit `layer:`), and `layer: "bg" | "fg"` per-group to override for hybrid.
+
+**Decision rule — bg is default, fg is fallback, hybrid is for mixed semantic content.**
+
+For BODY captions (narrator + emphasis):
+
+1. **Find the actual clean zone.** Sample frames at 20/50/80% and mentally trace where the subject is (head, shoulders, gesturing hands). The clean zone is what's left. Top band above the head, bottom band below the shoulders, or off-center side column.
+2. **Anchor the plane in that zone.** Body caps fit comfortably with NO subject overlap → `layer: "bg"`.
+3. **If body cap stack inherently overlaps subject heavily (>40% per check-occlusion peak)** even at smallest reasonable fonts → body `layer: "fg"`. Subject fills frame too much for embed.
+
+For CLIMAX caption (the payoff):
+
+1. **Default: `layer: "bg"`, sized to maximally cross subject for embed effect.** The face/body eating part of the climax word IS the visual win. Don't shrink to avoid occlusion. Use the largest size that fits frame WIDTH (sub-pixel readable letters fully on-screen) — vertical position should land it across the subject's hair / forehead / face.
+2. **`layer: "fg"` for climax** ONLY when frame width physically can't hold a font big enough to feel climactic AND there's no compositional way to break the word across multiple lines that bg embed could carry.
+3. **Hybrid (body bg + climax fg)** is the canonical pattern for subject-fills-frame scenes. Body small caps stay bg — subject eats letter edges = embed texture (cinematic, not a bug). Climax goes fg ONLY because at impactful size + subject filling frame there's no place where bg climax could land readably (would be 50%+ eaten = past cinematic into broken). The opposite direction (body fg + climax bg) sacrifices the easy bg embed wins on small caps and forces the climax into a slot it can't survive — never do that.
+
+**Editorial split — the spatial form of body bg + climax fg.** When the hybrid above is laid out with **bg in the upper half and fg in the lower-third**, you get a magazine-cover composition for free — no separate template needed. The rule:
+
+- **Body caps (BG)** — placed in the upper half (top: 6-30%), at the head/hair zone. They get partially occluded by hair/forehead = vogue-masthead embed texture.
+- **Climax cap (FG)** — placed in lower-third (top: 70-85%), in front of subject's chest/below. It's fully clear, fully readable, dominates the bottom band.
+
+The viewer's eye reads top-to-bottom: first the partially-veiled body line ("decorative, atmospheric"), then the clean climax statement ("the point"). Same Z-axis layering as Vogue / Apple Keynote (decorative top behind subject + clear bottom in front), but driven by cinematic-cream's existing per-cap `layer:` field — no new template, no separate masthead track.
+
+Two timing modes inside this layout:
+
+- **Sequential cross-fade (default)** — body fades out as climax fades in over 0.3-0.5s. The brief overlap window IS the editorial dual-layer moment. Standard cinematic-cream behavior.
+- **Sustained overlap** — extend body's `out` to coincide with or extend past climax's `in` so both are visible together for 1-2s. Use sparingly: works when body line is short (≤3 words) and acts as a "kicker" above the climax. Long body phrases sustained alongside a fg climax = visual noise.
+
+**The plane-conflict rule for sustained overlap (debugged in Startup_Host).** If you extend a body bg cap's `out` into a window that contains another cap with `layer: "fg"` IN THE SAME PLANE, the two will visually overlap in the final composite — bg pass renders the extended bg cap, fg pass renders the fg cap, both at identical plane position, screen-blended on top of each other. Result: muddy double-text at the same spot.
+
+Before extending any body bg's `out`:
+
+1. Check what other caps occupy the body plane during the extended window
+2. If ANY of them is `layer: "fg"`, the extension causes plane overlap → don't do it
+3. Workaround: either (a) skip sustained overlap and use sequential cross-fade only, or (b) author the body kicker on a DIFFERENT plane / absolute position so the two don't share a plane
+
+Concrete example: Startup_Host has cg-3 "diving deep" (body bg, plane=body, 3.1–4.15s) and cg-4 "into what it really takes to build a" (body fg fallback, plane=body, 4.15–6.42s). Both occupy `plane=body`. Extending cg-3 to overlap with the climax cg-5 (6.42–8.06s) ALSO drags cg-3 across cg-4's window where cg-3 (bg) and cg-4 (fg) collide on the body plane. Sequential editorial-split (climax in lower-third, body bg already faded out) was the only safe option for this case. AI_Insights had no fg in body plane between kicker and climax, so sustained overlap worked there.
+
+When NOT to use editorial split:
+
+- Body and climax are both information-carrying full sentences → forces viewer to read both at once, fails. Editorial split needs the body line to be _atmospheric / setup_ (italic mood), climax to be _the payoff_ (bold uppercase).
+- Subject takes the full vertical column (no top clean zone, no bottom clean zone) → there's no upper or lower band to anchor either layer. Fall back to all-fg with crown.
+- Climax is a long phrase that wraps to 3+ lines in lower-third → eats too much vertical real estate, leaves no room for the body bg above. Either shrink climax or split into more groups.
+
+This pattern was historically what we called "hybrid" but the spatial framing — upper bg behind / lower fg in front — is what makes it read as editorial design rather than just two unrelated caption tracks. Keep this in mind when authoring per-cap `layer:` for hybrid scenes.
+
+Common mistakes (debugged in real cases):
+
+- Defaulting to "right column" because memory-wall did it → narrow 400px column forces long phrases to wrap 4-5 lines, pushing the stack DOWN into the subject's body. Fix: use top-band full-width instead, wider wrap fits fewer lines.
+- **Flipping climax to fg because "viewer needs to read it" → kills cinematic embed.** Climax is supposed to feel half-eaten by subject; that's the magazine masthead energy. Don't fix what isn't broken.
+- All-fg whole plan when subject fills frame → safe but sterile. Hybrid (body bg + climax fg) is almost always better — small body caps eaten = embed texture, climax fully visible since it had no readable bg slot.
+- Sizing caps before choosing the plane → typography is a function of plane geometry, not the other way round.
+- **Putting LONG multi-line phrases on bg in subject-fills-frame scenes.** "Subject eats letter edges = embed texture" only holds for short caps (1-3 words / 1 line). A 6-8 word italic phrase wraps 3-4 lines, and when subject's head is high in frame, **whole lines** of the phrase land deep in the body/face zone — entire words obliterated, not edge-textured. That's not embed, it's broken. **For long body phrases on subject-dense scenes: switch THAT specific cap to `layer: "fg"` even if other body caps stay bg.** Hybrid lets you mix per-cap. Sample the matte at the cap's time window: if head_top y is climbing and the cap's stack height extends into y > head_top, that cap needs fg.
+- **Subject doesn't move uniformly across the clip — sample matte per BLOCK time window, not just once per case.** Startup_Host's head_top swings y=224→96 across 8 seconds (128px / 10% of frame). A block plan that worked at t=2 (head low, plenty of space) breaks at t=5 (head high, no space left). Per-block matte sampling > one-shot per case.
+
+### Step 0 for ANY plan — transcript role annotation (mandatory)
+
+Before writing a single caption group, do a **pre-plan agentic pass** over the transcript. Read every word and grade it. This is judgment, not a lookup — context decides (e.g. "like" is content in "like this", filler in "like, um, yeah"). No hardcoded word lists; agent decides per token.
+
+**The grade is the SELECTION INPUT — it picks the render state** (`drop` / `rail` / `embed`); it is not itself a typography class (see SKILL.md § Caption model):
+
+| Grade        | What it is                                                                                                                                               | → render state                                                                                    |
+| ------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------- |
+| **drop**     | Interjections/hesitation (um, uh, er, ah), self-corrections ("I think— I mean actually…" keep only final), pure stutters ("the the the") collapse to one | **drop** (not shown)                                                                              |
+| **normal**   | Ordinary spoken content — connective glue + the content words that carry the idea                                                                        | **rail** (dense conversational glue may be trimmed for readability; content/structure words stay) |
+| **emphasis** | The 1–2 punch words in a phrase                                                                                                                          | **rail** + `emphasis` highlight (inline — stays on the rail)                                      |
+| **peak**     | The payoff of a beat/section — the line you'd say out loud paraphrasing it                                                                               | **promote to embed** (apply the craft below); the single biggest of the whole piece = `apex`      |
+
+A **peak** is per-beat, **not** per-clip: a short clip usually has one (its climax); a long/multi-section explainer has ~one per section. **Embed is scarce + spaced** — ≤1 per sentence/beat, never two adjacent or co-visible, ≥ a beat apart, at most one `apex`. (The old "1 climax / 2–4 emphasis / 4–10 body / 6–12 narrator / 2–8 drop per 10–20s clip" was calibrated for short single-beat clips; it generalises to "one peak per beat, spaced — everything else rides the rail.")
+
+**This step replaces any filler-word list.** If you find yourself reaching for a regex, you're doing it wrong — go back and judge per-token.
+
+Then build the plan from the annotated words:
+
+- drops → do not appear in any word entry
+- narrator → either fold into adjacent body groups OR become tiny italic subordinate groups if rhythm demands
+- body/emphasis/climax → shape the group structure, with typography matching role
+
+### The compositional unit is a PHRASE, not a chunk (read this twice)
+
+A **caption group** is a semantic phrase — typically 2–8 words bound by intonation and meaning. It is NOT a mechanical "2–4 word chunk". A group has ONE typography (one font-size, one weight, one case, one position) matching its role; the "every-word" feel comes from **per-word GSAP stagger INSIDE the group**, not from splitting the phrase into many tiny groups.
+
+Canonical reference — memory-wall, 12 spoken words, **4 groups**:
+
+- cg-0 `"Some memories feel soft"` (4 words, italic 600, right-top)
+- cg-1 `"like old film"` (3 words, italic 500, right-mid, smaller)
+- cg-2 `"but suddenly"` (2 words, upright 700 pivot, right-center)
+- cg-3 `"EVERYTHING IS SHARP AGAIN"` (4 words, uppercase 900 climax, spanning width)
+
+Every word is shown. Groups **cascade and accumulate** — cg-0 stays on screen while cg-1 enters below; by the climax, all 4 are visible simultaneously as a poem. Per-word stagger (~80ms) animates each word into its group in sequence.
+
+If you find yourself producing 15+ groups for a 10s clip, stop — you're treating verbatim as mechanical chunking. Go back, re-read the transcript, identify 4–7 phrases, and make them groups.
+
+**Don't split idioms, collocations, or bound phrases across groups.** "Not even kidding", "at the end of the day", "as a matter of fact", "whole lot of", "more or less", "a little bit", "kind of", "sort of", proper nouns ("Blackmagic Pocket 4K"), brand phrases, and other fixed expressions are semantic units. The climax of "I'm not even kidding" is the whole idiom, not just "KIDDING". The climax of the memory-wall canonical is "EVERYTHING IS SHARP AGAIN" as one group, not just "AGAIN". Splitting these across group boundaries breaks meaning AND typography (you can't render "not even kidding" with "not even" italic-small and "kidding" uppercase-huge — it reads as two different statements).
+
+### Captions are always verbatim
+
+Every word the speaker says gets captioned. The skill no longer ships a "highlight" mode — curated/edited transcripts produced fewer beats but lost the rhythm of the spoken sentence and ended up feeling like generic subtitle tracks. Verbatim with strong typographic hierarchy (small italic narrator → emphasis upright → climax massive uppercase) gives the cinematic feel without dropping content.
+
+The only words you remove from the transcript:
+
+1. **Pure phonetic interjections** (um, uh, er, ah, hmm) — not words, not captioned.
+2. **Exact immediate stutters** ("the the the" → keep one; "is is is is" → keep one, aligned with the phrase that follows). The viewer should see one "the", not three.
+3. **Self-correction backtracks** ("I think— I mean actually…" → keep only "I mean actually").
+
+**All content words AND structure words stay** (articles, conjunctions, prepositions, auxiliaries, pronouns). Dropping a structure word like "in some" or "and I've" or "out of it" is a bug, not a stylistic choice.
+
+### Planes — shared parent containers for spatial coherence (RECOMMENDED)
+
+The memory-wall and champion canonicals don't set `top:` on each caption. They have a **parent container** (`wall-plane` / `left-plane` / `crown-plane`) that owns the spatial anchor, and caps are children that stack automatically (flex column with gap) or replace (absolute at same anchor).
+
+Your plan.json can opt into this by declaring `planes` and assigning each group to one:
+
+```json
+{
+  "planes": {
+    "body": {
+      "css": "top: 4%; right: 4%; width: 720px; display: flex; flex-direction: column; align-items: flex-end; gap: 14px;"
+    },
+    "crown": {
+      "css": "top: 32%; left: 0; right: 0; text-align: center;"
+    }
+  },
+  "groups": [
+    { "id": "cg-0", "plane": "body",  "css": "font-size: calc(0.08*var(--h)); font-weight: 600; font-style: italic;", ... },
+    { "id": "cg-1", "plane": "body",  "css": "font-size: calc(0.10*var(--h)); font-weight: 800;", ... },
+    { "id": "cg-2", "plane": "crown", "css": "font-size: calc(0.20*var(--h)); font-weight: 900; text-transform: uppercase;", ... }
+  ]
+}
+```
+
+The plane CSS owns positioning (top/left/right + display:flex/grid/block). Per-group CSS owns **typography only** (font-size, weight, style, case, letter-spacing, line-height). **No top/left/right/position on a group when it's inside a plane** — the parent decides.
+
+**Typography is agent-authored per group, NOT looked up from a preset.** The `cinematic-cream` template locks only the DNA (Inter family, motion curves, `mix-blend-mode`, `cap_color` palette, text-shadow/filter derived from luminance). Everything else — `font-size`, `font-weight`, `font-style` (italic vs upright), `text-transform` (uppercase vs mixed), `letter-spacing`, `line-height` — is written by the agent, per group, in `plan.json`'s `css` field. No "cap-1 must be italic 600, cap-2 must be uppercase 900" rule. Read the scene + transcript, pick typography that matches the semantic role (narrator/body/emphasis/climax) and the visual weight the frame can carry. See [references/typographic-moves.md](typographic-moves.md) for _recommended_ combinations — treat as palette, not schema.
+
+When to use planes:
+
+- **Multi-phrase sentence in one home zone** — use a flex column plane. All body caps inside accumulate/stack automatically, no collision math. This is the memory-wall pattern.
+- **Body zone + climax zone** — two planes: body (flex stack) + crown (center). Body caps live in body-plane; climax pops in crown-plane. Cross-plane transition = earned break.
+- **Any clip with ≥3 body phrases** — single-plane flex stacking beats hand-placing each group's top% every time.
+
+### Picking the plane anchor — find the ACTUAL clean zone in THIS scene
+
+**Do not default to "right column" because memory-wall did.** Memory-wall worked because its subject sat left-center with a clean wall on the right. Different scenes have different clean zones:
+
+- **Subject centered (most selfies, vlogs)** → top band above the head is usually cleanest (clear sky / ceiling / wall). Right or left columns get eaten by shoulders or hands.
+- **Subject left (interview with right-column backdrop)** → right column cascade (memory-wall classic).
+- **Subject right (reverse interview)** → left column cascade.
+- **Two-shot or busy background** → may need to use a corner, or sit the caption on the ONE surface that's consistently clean (a solid jacket, a whiteboard, a ceiling).
+
+Before writing plane CSS, look at a frame sample. Mentally trace the subject's bounding box and hand-gesture reach. The plane anchors into whatever's LEFT — negative space where the cascade won't be eaten by body or busy backdrop.
+
+Small-size italic narrator text is especially vulnerable — it disappears into mottled backgrounds or body occlusion. Keep smallest caps in the cleanest part of the zone, not at the edges where subject extends.
+
+When NOT to use planes (the remaining free-mode use cases):
+
+- **1–2 isolated groups** with deliberately different positions — free mode is simpler.
+- **Specific clip-spanning motion** where a group needs to drift/move independently.
+
+Free mode (no `planes` declared) is still supported — each group's CSS owns its own top/left/right. Use when you genuinely need bespoke per-group placement.
+
+Wrong: "primary slot for 9:16 is top:12%". That's a lookup; it produces generic output.
+Right: look at THIS scene, find where captions will read cleanly, respect the speaker's framing, and pick a composition pattern that serves the content's narrative arc.
+
+Example patterns an agent can pick (not exhaustive, not ranked):
+
+- **Right cascade accumulating** (memory-wall): all groups right-aligned, stepping down in top%, they stay — final frame shows a poem. Works when subject is centered-left and there's clean right-column space.
+- **Center stack climax** (Sunset): italic openers at top, upright pivot mid, uppercase climax takes the full top as the final beat, earlier groups fade out before climax. Works when subject is centered and scene has clean sky + clean below-shoulders.
+- **Left-right split** (memory-wall variant): narrator voice on one side italic, statement voice on the other side upright, climax takes center. Works when subject has off-center clean zones.
+- **Single-line subtitle rail**: legit choice when scene is dense and no clean zones exist (busy background, subject fills frame). This is the "accessibility" fallback, not the default.
+
+Whichever pattern is picked, the agent's job is to **justify the choice**: "Subject is on the left, clean gradient sky on the right — I'll cascade right-aligned so captions have clean backdrop throughout." Write that reasoning as a `_notes` field in plan.json so the intent is inspectable.
+
+Anti-patterns to NEVER ship:
+
+- Alternating top↔bottom per chunk — reads as chaos (one sentence's words appearing in different vertical zones).
+- Locking every group to the same `top` value — reads as subtitle track, kills cinematic feel.
+- Placing body/narrator groups directly over the face when clean space exists — the Vogue-embed effect is for the CLIMAX word only, not default behavior.
+- **Dropping transcript words to fit caps in fewer blocks.** NEVER. Verbatim is verbatim. If 4 caps don't fit in 1 block, split into 2 sub-blocks of 2 caps each — keep all words. The only legitimate drops are SKILL.md's filler list (um/uh/exact-stutters/self-corrections), not "we ran out of room."
+- **Mechanically aligning all caps in a plane to share `out` time.** This makes everyone stay on screen longer, _increasing_ density. Wrong fix for the no-jump problem. Correct fix: split natural-handoff caps into separate blocks where each block's caps share `out` (same exit moment, no jump), and `next_block.in ≥ prev_block.out` (clean handoff between blocks, no overlap).
+
+**Block boundary three laws** (must hold for every plane in every plan):
+
+1. Within a block, all caps share `out` — they fade together, no per-cap exit jitter.
+2. Between adjacent blocks in the same plane, `next_block.in == prev_block.out` (or `next.in > prev.out` with a small gap). Caps from prev_block must FULLY exit before next_block's caps mount; otherwise the prev cap's exit at its `out` time triggers a flex reflow that yanks next_block's already-mounted caps upward = jump.
+3. `prev_block.out ≤ next_block.first_word.start` so next_block's first word still animates from its real spoken time (the in-time only constrains when the container mounts; word animations fire at their per-word `start`).
+
+A common mistake: setting `next_block.in` slightly EARLIER than `prev_block.out` to give the new block a head-start fade-in, while prev_block still has a different (later) `out`. The 50-300ms overlap looks invisible in the plan but produces a visible jump on screen because two caps with different `out` coexist in the same flex stack.
+
+- **Vertical gap between body bottom and crown top.** Looks disconnected ("The pace is" at top:3% with "UNPRECEDENTED" at top:20% creates 144px void). Bond the setup phrase + climax word in the SAME crown plane via flex-stack — the Street_Talk "and being / CONSISTENT" pattern.
+
+### Zone coherence — one sentence, one home zone
+
+**Never switch spatial zones mid-sentence.** A full semantic unit (sentence or clause) should live in ONE home zone (e.g. right column, or top band). The viewer's eye follows the phrase group. Ping-ponging between top/bottom/left/right for consecutive phrases of the SAME sentence reads as chaos — the reader has to re-find the caption every beat.
+
+Zone changes are earned at:
+
+- **Sentence boundaries** (period, long pause, topic shift) — allowed to move to a new home zone, often paired with a tonal shift (italic body → uppercase emphasis)
+- **The single climax** — the one break from the home zone, always allowed, often takes center-full-width
+
+Heuristic: if you find cg-N and cg-N+1 are in different zones (top vs bottom, left vs right) AND they're parts of the same sentence (no period/long pause between them), you've violated zone coherence. Fix by picking one home zone for the whole sentence.
+
+### The climax has to POP — not just "be a bit bigger"
+
+A climax caption that's the same size as body emphasis is a failed climax. The viewer's eye needs a clear visual break: THIS is the payoff.
+
+**Size the embedded climax to the FRAME, not to the rail (two-track rule).** The climax is a hero — its size is anchored to frame height: **`font-size: calc(0.16–0.22 * var(--h))`** (default ~0.18–0.20h; go bigger for more impact — it should dominate the frame, only width/readability caps it). It is **NOT** a multiple of the rail: the rail is a small standard subtitle (~0.045h), so "≥1.8× the rail" would yield a tiny, weak climax. Express rail, embed-body and embed-climax all as `var(--h)` fractions so they scale across resolutions — **never hardcode px**. The ratios below are a **floor / hierarchy check** (the climax must clear body-emphasis by ≥1.8× and the smallest tier by ≥2.5×), not the climax's sizing basis. Width is the real ceiling: shrink only if the word can't fit the frame at a legible size (see "Readability is a hard constraint").
+
+Contrast floor — the climax must at least clear these:
+
+| Ratio                      | Feels like                                                                                  |
+| -------------------------- | ------------------------------------------------------------------------------------------- |
+| **1.0-1.3× body emphasis** | Flat — the climax is just another beat. Fix it.                                             |
+| **1.5-1.8× body emphasis** | Noticeable but not explosive. OK for subtle payoffs, weak for punchlines.                   |
+| **≥1.8× body emphasis**    | Pops. Viewer's eye snaps to it. Target for "punchline" / "reveal" / "reaction" climaxes.    |
+| **≥2.5× body italic**      | Compare against the SMALLEST body tier too — the multi-tier jump is what creates hierarchy. |
+
+A quick audit script — before shipping, dump every plan's max-body vs max-crown font-size ratio, and flag anything <1.8×:
+
+```js
+const bodyMax = Math.max(...plan.groups.filter((g) => g.plane === "body").map(fsize));
+const crownMax = Math.max(...plan.groups.filter((g) => g.plane === "crown").map(fsize));
+const ratio = crownMax / bodyMax; // aim for ≥1.8
+```
+
+**Split pattern — when one word alone should carry the climax.** If the climax phrase is 2+ words ("and being consistent", "not even kidding") and one of them is the actual payoff, split into setup + payoff BUT keep them spatially bonded:
+
+- Setup words → small italic narrator (soft, trailing off) on line 1
+- Payoff word → massive uppercase on line 2, same plane, flex-stacked directly below
+- **Both groups live in the SAME (crown) plane**, flex-column, gap 4-8px. Not two different planes — otherwise "and being" sits in the top band and "CONSISTENT" sits mid-frame and they read as two unrelated captions.
+
+Crown plane CSS for split climax:
+
+```
+"crown": "top: 26%; left: 0; right: 0; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px;"
+```
+
+Street_Talk canonical example: original was `"AND BEING CONSISTENT"` all in crown at 0.085h (same as body emphasis, ratio 1.0×). Rewrite: crown plane becomes a flex-column; `"and being"` → 0.055h italic at top of column (line 1); `"CONSISTENT"` → 0.11h 900 uppercase stacked below (line 2). The payoff POPs because of size contrast within a bonded 2-line composition, AND it crosses the subject's head since the crown column is anchored at ~26-30% top.
+
+Timing: both groups share `out` (at clip end or block boundary) so neither fades alone — they hold together as one composition. Setup enters first (soft fade-in), payoff enters later when the word is spoken (snappier present scale-in).
+
+**Readability is a hard constraint — bleed can't eat the word.** Your first move when a climax word overflows is NOT "accept the bleed, it's cinematic" — it's "shrink to the largest size that fits." Compute the max font size that fits the frame:
+
+```
+max_font_px = frame_width / (chars × char_ratio × letter_spacing_mult)
+```
+
+For "CONSISTENT" (10 chars), uppercase 900 (char_ratio 0.62), letter-spacing -0.05em (mult 0.95), 720px frame: `max = 720/(10*0.62*0.95) = 122px ≈ 0.095h`. Use 0.09h for a small safety buffer. The word fully occupies the frame edge-to-edge — that's already maximum visual impact without losing any letter.
+
+Cinematic bleed is only OK when **a few pixels of 1-2 outer letters** get mild cropping from scale-in animation or sub-pixel rounding — that reads as "bigger than frame." Any bleed that forces the reader to mentally complete missing letters (>15-20px per side on a 10-char word) is a BUG, not style. "ONSISTE" with 80px each side clipped is NOT a valid climax — it's broken.
+
+Hard rules:
+
+- **Readable first.** Every letter should be fully on-screen, with at most a few-px crop on the first/last letter.
+- **If max legible size doesn't meet ratio target**, raise impact via _other_ signals (weight 900, all-caps, bg head-cross, multi-line composition with setup word above), not via illegible bleed.
+- **Never bleed body/narrator captions.** Only the crown/climax is allowed any edge crop at all.
+- `OCCLUSION_SKIP=1` is an escape hatch for iterating; the shipped plan should pass `check-occlusion-v2.py --strict` (pixel-perfect via headless Chromium DOM).
+
+### Edge breathing + climax-crosses-head (bg showcase)
+
+Two placement tweaks that separate "looks like a caption sitting in the scene" from "looks like a pasted subtitle":
+
+- **Non-climax caps need edge breathing room.** Body-plane groups should NOT hug `left: 0; right: 0` flush to the frame. Add `left: 3-6%; right: 3-6%` (or `right: 30-40px` for pixel-anchored planes). The breathing sells the compositional choice — flush edges read as "default subtitle track", indented edges read as "considered composition". Top edge the same: `top: 2-6%` not `top: 0`.
+
+- **The climax SHOULD cross part of the subject's head — deliberately.** This is what makes bg-layer captions feel cinematic instead of just "text floating above the speaker". The effect is strongest when 20-40px of the word's last line dips behind the hair or forehead — viewer reads the word clearly AND sees it being occluded at the edge. Not "covered by the face" (unreadable), just "grazed by the hair" (legible + cinematic).
+
+  How to place the crown with intent:
+  1. Sample the matte PNG at climax time: `f_{frame_idx:04d}.png` where `frame_idx = round(climax_time * fps)`.
+  2. Scan rows from top until `alpha > 128` — that y is the subject's topmost pixel (usually hair).
+  3. Position crown so the _bottom of the last line_ lands 30-80px below that y. For a 2-line crown at 0.085h on 1290h frame, line heights ~104px each; total height ~200px. If subject top is at y=445, set `crown.top` such that `top + height = 445 + 50 ≈ 495` → `top = 295px ≈ 23%`.
+  4. Verify with checker — the HERO/crown peak occlusion target is ~30–55% (the embed effect; the head crossing the middle). Below ~15% it reads as a floating label (the hero-weak advisory fires); above ~65% the word is eaten (the gate FAILs). Small narrator caps: ~20–30% texture.
+
+  Practical rule of thumb: **crown peak occlusion 3-10%** is the sweet spot. The checker's number tells you directly — not a subjective "it looks good" judgment.
+
+  **Crown defaults are scene-specific, not template-wide.** Don't set `crown.top: 6%` because "that's what the previous case used." If the subject's head_top is at y=380 (29% of frame) and your crown is at top:6% with 100px height, the crown bottom lands at y=200 — 180px ABOVE the head, completely floating in sky, zero embed effect. Always sample the matte once per case and compute `crown.top` from `head_top - crown_height + (30 to 80)` so the crown's bottom edge dips into hair. This was a real bug across 6 cases until enforced.
+
+  FG-layer crowns skip this entirely (they render on top, no occlusion to showcase) — FG is announcement, not embed.
+
+### Pre-render occlusion + frame-overflow gate
+
+**`check-occlusion.cjs` (canonical, pixel-perfect)** is the only occlusion checker in `scripts/`. It auto-runs `measure-layout.cjs` (headless Chromium via Puppeteer) which loads the compiled `index.html`, seeks the GSAP timeline to 4 sample times per group (15/40/65/90% through window), and queries `getBoundingClientRect()` on every `.cap` and child `.w` span. Output is `_layout.json` with the actual rendered pixel coordinates of every word at every sample. Then it computes per-word, per-cap occlusion against the real subject-matte alpha (read via `sharp`):
+
+- **Per-word peak occlusion** — the load-bearing metric: a 5-word phrase where 3 words are fully eaten averages the same as 8 words half-eaten, but only one of those is shippable, so per-WORD peak is what gates. Per-word peak ≥65% = `obliterated`, ≥35% = `warn`. A `WARN` band hit on a single climax word is OK (cinematic edge crop); two adjacent words obliterated is not.
+- **Per-cap aggregate** — avg + peak occlusion across all samples. Cap fails at peak ≥50%.
+- **fg-layer caps are auto-skipped** (they render above the matte; no occlusion possible).
+
+**Why measure the real DOM, not estimate a bbox.** An earlier heuristic estimated each word's box from `char_ratio × font × text_length` and was wrong in both directions. Startup_Host case: it reported `cg-1 "podcast." OK at 9%/12%` because it guessed y=134 (above the subject's head), but the rendered DOM was at y=209 (mid-head) → actually `FAIL 54%/60%`. Same case, it reported `cg-3 "diving deep" FAIL at 76%/77%` while the real measurement was `WARN 36%/40%` (the box is wider than the head — most pixels clear, only descenders dip into the silhouette). Estimation is retired; `check-occlusion.cjs` measures the rendered pixels.
+
+**Frame-edge overflow** — the checker also flags when a measured word bbox extends past the canvas (text the ffmpeg crop would clip), reported as `cg-N  [overflow] "word" off-frame: left Xpx, right Ypx (@Ts)`. Because cropped body text is always wrong, a clear glyph clip (>8px past an edge) **fails `--strict`**; a sub-glyph graze (≤8px — the first/last-letter crop the climax is allowed) is a non-blocking `[overflow-warn]`.
+
+**The checker reports facts, the agent applies judgment.** A FAIL is NOT an automatic "must re-layout" signal — it's evidence to interpret. Two competing goals coexist:
+
+1. **Readability** — every sentence must remain comprehensible to the viewer
+2. **Cinematic embed** — partial occlusion is the desired vogue-masthead effect; zero occlusion looks like a pasted subtitle
+
+When the checker reports a per-word obliteration (≥65%), apply this **3-step decision rule** before changing anything:
+
+**Step 1 — POS check.** Is the obliterated word a function word (the / a / an / of / in / on / at / to / I / it / is / are / was / be / that / this / which / and / or / but)? Function words are grammatically optional in most contexts — a 100%-eaten "the" or "I" or "of" usually does NOT break the sentence. Content words (nouns, verbs, adjectives, climax words) carry meaning — they MUST stay legible.
+
+**Step 2 — sentence parse without the word.** Mentally delete the obliterated word from the sentence. Does the remainder still convey the meaning?
+
+- "like this are why I travel" minus "I" → "like this are why travel" — first-person obvious from context, **OK**
+- "take it all in" minus "all" → "take it in" — complete English idiom on its own, **OK**
+- "a whole lot of information" minus "of" → "a whole lot information" — slightly broken but recoverable, **OK**
+- "diving deep into startups" minus "deep" → "diving into startups" — works fine, **OK**
+- "diving deep into startups" minus "diving" → "deep into startups" — loses the verb, sentence breaks, **NOT OK**
+
+**Step 3 — cinematic check.** A single content word at 30-65% partial occlusion is the _intended_ embed look (vogue-masthead "subject grazes the text"). Don't "fix" it. Only escalate to re-layout when:
+
+- a content word is ≥80% gone (not just partially eaten — almost fully missing)
+- two or more adjacent words are ≥50% obliterated (sequential damage compounds; "X X X really takes" with first three eaten is unrecoverable)
+- the obliterated word IS the climax / key noun the viewer is supposed to read (e.g. the subject of a sentence, a brand name, a product feature)
+- key letters of a climax word are eaten (e.g. "STARTUP" with the S gone reads as "TARTUP" — the partial-letter pattern matters more than the whole-word percentage)
+
+**Real examples from the 13-case batch** — all four caps below got a per-word obliteration FAIL, all four were correctly judged OK by this rule:
+
+| case               | obliterated word @% | sentence                              | rule applied                           |
+| ------------------ | ------------------- | ------------------------------------- | -------------------------------------- |
+| Sunset_Stroll cg-1 | "I" 100%            | "like this are why I travel"          | function word + parses without it → OK |
+| Sunset_Stroll cg-3 | "all" 75%           | "take it all in"                      | "take it in" is a complete idiom → OK  |
+| yt_gtds cg-6       | "of" 69%            | "a whole lot of information"          | function word + recoverable → OK       |
+| AI_Insights cg-2   | "that" 66%          | "that don't replace human creativity" | relative pronoun, optional → OK        |
+
+**When the rule says re-layout** — what to change:
+
+- per-word obliterated AND content word AND breaks readability → switch THAT specific cap to `layer: "fg"` (per-cap override, not whole-plan), OR shrink/reposition, OR split the cap into a different block where the subject isn't crossing it.
+- per-cap fail (peak ≥50%) when the whole stack is in the head zone → lift y or shrink the block.
+- frame-edge overflow → shrink font OR tighten `letter-spacing` OR split the phrase. Cropped text is ALWAYS wrong, no aesthetic excuse.
+
+**Override** (for iterating before shipping): `OCCLUSION_SKIP=1 bash render-and-composite.sh <project>` — don't ship past this without applying the 3-step rule and either fixing or consciously accepting each FAIL.
+
+### Accumulation capacity — split into blocks when the plane can't hold more
+
+Each scene's clean zone has a finite capacity for simultaneously-readable caps. **The agent must judge this before writing the plan**, not rely on CSS `bounded height` / `overflow: hidden` — those cause visual bugs (caps overflow off-screen, are clipped, or content is centered outside the plane bounds).
+
+Rule of thumb (capacity = max caps visible SIMULTANEOUSLY in one block):
+
+- **9:16 portrait, narrow right-column plane** (width ~380-420px) → max **2 caps** per block. Long phrases wrap to 2-3 lines; a 3rd cap starts spilling into the subject.
+- **16:9 landscape, subject centered** (e.g. selfie vlog) → max **2 caps** per block. Even if the frame is wider, a centered subject leaves narrow columns on both sides and hands reach far.
+- **16:9 landscape, subject on one side** (e.g. interview with clean opposite side — the memory-wall canonical scenario) → max **3-4 caps** per block. This is where accumulation shines.
+- **Top-band full-width plane** (either orientation) → max 1-2 caps before overflow into face zone.
+
+Capacity is about the specific scene — same orientation can have very different room depending on subject position and background complexity.
+
+When your phrase count exceeds the capacity, split into multiple accumulation blocks at **sentence or clause boundaries**. Example memory-wall canonical on a 12-word clip:
+
+- Block 1 (0–4.85s): `"Some memories feel soft"` + `"like old film"` — 2 caps accumulate, fade together at 4.85s
+- Block 2 (4.90–8.04s): `"but suddenly"` + `"EVERYTHING IS SHARP AGAIN"` — 2 caps accumulate on a cleared plane
+
+All caps in one block share the same `out` time (sentence boundary). Next block's `in` > previous block's `out` so the plane clears before the new accumulation starts. This gives each cap ~3-5s of read time, avoids overcrowding, and matches memory-wall's cinematic rhythm.
+
+**Why the shared `out` is load-bearing.** The template's exit path is `tl.set(sel, { opacity: 0, display: "none" }, g.out)` — at `out`, each cap releases its flex space so the NEXT block's caps can take the top slot from the plane's origin (no permanent downward drift). If caps inside the same block had staggered `out` times, the plane would reflow mid-block (cap 1 vanishes, caps 2-3 jump up, cap 4 arrives… visible jitter). With block-synchronized `out`, the reflow happens ONCE at the boundary — invisible to the viewer because the block fades as a unit. **Never stagger `out` times within an accumulation block.** If you need individual fade-outs, you're not accumulating — switch to stagger-fade pattern (one group at a time, no flex plane needed).
+
+**Anti-pattern: bounded `height` + `justify-content: center` on planes.** Do NOT write `height: 70%; justify-content: center` on a flex-column plane hoping to vertically center the caps. When the block's total cap height exceeds the bounded height, flex centering pushes content OUTSIDE the plane bounds on BOTH top and bottom — the topmost cap ends up above the frame (off-screen, unreadable). Instead:
+
+- Let the plane grow with its content — set `top:` (origin anchor) and let caps stack down naturally.
+- Use `gap:` between caps; don't try to "center the stack".
+- Trust the block-capacity rule above to keep the stack within the clean zone — don't paper over overflow with `overflow: hidden` (it clips the very caps you wanted the viewer to read).
+
+### Accumulation — vertical spacing, not single-line
+
+Accumulation works with multi-line phrases too — memory-wall canonical's groups are multi-word, right-aligned cascade in 16:9 landscape, and several wrap to 2 lines. They don't collide because **each group's `top` is placed below the previous group's bottom extent with a margin**.
+
+Math you must do before shipping accumulate:
+
+For each group, estimate its rendered height:
+
+- `line_count ≈ ceil(chars × font_px × 0.72 / usable_width_px)` (0.72 = Inter 900 uppercase; use 0.60 for italic/regular)
+- `group_height_pct ≈ line_count × font_size_pct × line_height × 100`
+
+Then for each pair (cg-N, cg-N+1) you want to coexist:
+
+- `cg-(N+1).top ≥ cg-N.top + cg-N_height_pct + 2%` (margin)
+
+If the math doesn't fit in the available clean zone (top-clear + bottom-clear zones minus face/body bbox), you have two options:
+
+- **Shrink fonts or merge phrases** so they fit.
+- **Switch persistence to stagger-fade** (groups don't coexist, no spacing constraint).
+
+9:16 portrait specifically: clean zone is typically top 0–32% + bottom 72–90%, split by the subject. That's ~50% of frame height usable. At 15% per 2-line group + 2% margin, you can fit ~3 accumulating groups in top zone. A 4th must either (a) be smaller to fit, (b) go to the bottom zone (zone change allowed at sentence boundary), or (c) replace an earlier one as climax.
+
+Landscape 16:9 has ~70–80% usable vertical — more room for 4–5 accumulating groups, which is why memory-wall canonical works cleanly there. Don't give up accumulation on portrait; just do the arithmetic first.
+
+### Persistence — how long each group stays (agent decides per case)
+
+The group's `out` time is not a default, not a rule, not a formula. It's an aesthetic choice. The same 5-group plan renders very differently depending on whether groups accumulate, stagger, crossfade, or roll — and each is right for different content.
+
+Patterns to pick from:
+
+| Pattern                                     | What happens                                                                 | Good for                                                                                            | Bad for                                                            |
+| ------------------------------------------- | ---------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------ |
+| **Accumulate-through-climax** (memory-wall) | All groups stay on screen until climax arrives, then all fade together       | Poetic builds; emotional crescendo; ≤5 groups where each word matters                               | 8+ groups (screen crowds); punchy comedic beats (breaks the laugh) |
+| **Stagger-fade** (Sunset-style)             | Each group fades ~0.8–1.5s after its words end; next enters into clean space | Independent punchy beats; clip where each phrase is its own moment                                  | Long poetic builds that want the stanzas to coexist                |
+| **Crossfade-handoff**                       | Current group fades during next's entrance (~200ms overlap)                  | Dense verbatim (6+ groups in short clip); conversational flow                                       | Short sparse clips — feels like subtitle track                     |
+| **Rolling window**                          | Keep N=2–3 visible; earliest fades when N+1 enters                           | Longer transcripts (15s+) where full accumulation would crowd, but some layering is still cinematic | Clips <8s (rolling isn't perceptible)                              |
+
+Decision axes:
+
+- **Narrative arc** — crescendo/revelation → accumulate; list of independent points → stagger; dense conversation → crossfade
+- **Group count** — ≤4: any pattern works. 5–7: prefer stagger or rolling. 8+: crossfade is usually forced.
+- **Scene density** — busy background eats stale captions; accumulate only works when backdrop is clean enough that older captions stay legible.
+- **Clip length** — ≥12s erodes accumulation (viewer loses connection to earliest caption); prefer stagger or rolling for long clips.
+
+Write the reasoning in `_notes` in plan.json so the decision is inspectable and the agent's intent survives into review. e.g.:
+
+```json
+"_notes": "Morning_Jog: 5 groups in 8s. Narrative is crescendo (Okay→honestly→changed my life→KIDDING), and background is clean (trees, sky). Accumulate-through-climax — all 4 earlier groups stay visible so KIDDING lands on top of a built-up poem. Cascading right with varied top%/alignment so the stack reads as composition, not a subtitle column."
+```
+
+This is where per-case judgment earns its keep. The skill gives you a palette of patterns; the pick is yours.
+
+### Spatial coherence — the main slot rule
+
+**Every plan has ONE primary slot.** Most groups land there. Secondary slots exist only for intentional rhythm-breaks (once every ~30s, never per-chunk alternation). The old autogen rotation that threw each chunk to a different corner violated this and read as chaos.
+
+Choose a primary slot based on scene:
+
+- **9:16 portrait, subject mid-frame** → primary slot is `top: 4–20%` (sky / clean zone above the head). Secondary: `top: 72–78%` (below shoulders, above UI). Never: bottom 22% (UI/hand zone per [rule 17](aesthetic-principles.md)).
+- **16:9 landscape, subject left** → primary slot is the right column (`left: 50–55%`, right-aligned or centered in the column). Secondary: below subject.
+- **16:9 landscape, subject centered** → primary slot is `top: 10–20%` OR `top: 70–80%`. Pick one and stick.
+
+Within the primary slot, vary **size and weight** to create hierarchy (narrator small, body mid, emphasis large, climax huge). That's the rhythm inside a coherent position. Secondary slots are for **break-rhythm moments**, not for adjacent chunks just to "avoid collision".
+
+Collision validator still runs — but now the agent should be hitting it only in exceptional cases (intentional layering), not because every chunk is in a different place.
+
+**Verbatim recipe** — every word is shown, but it is **not** a flat TikTok subtitle rail. Use the cinematic DNA: per-group typography variation, position variation, size modulation. Italic openers, upright pivots, uppercase climaxes, spatial cascade, per-word soft/present tones — all of it.
+
+Chunking: walk the transcript and split into groups of **1–4 words** at pause boundaries (>0.25s gap = hard cut; within a phrase, chunk by emotional beat — short 1–2 word chunks for emphasis words, longer 3–4 word chunks for connective tissue).
+
+Typography per chunk — treat each chunk as a mini-beat. The sizes below are a **starting palette, not rules.** The agent picks the actual `font-size` per group based on the scene's clean-zone width, the phrase's character count, and the desired visual weight relative to neighboring groups. Shift by ±30% whenever the scene demands (narrow portrait column → shrink; wide landscape hero → enlarge). Pick from [typographic-moves.md](typographic-moves.md):
+
+- **Filler / connective** ("you know", "like", "so I was", pronouns, conjunctions) → italic 500–600, small (~0.05–0.08h starting point), softer tone, subordinate position. These read as narrator voice, not statement.
+- **Emphasis / content words** (verbs, nouns carrying meaning) → upright 600–800, mid (~0.08–0.12h starting point), centered or cascaded position, present tone.
+- **Climax / hook words** (the payoff word of the sentence) → uppercase 800–900, large (~0.14–0.22h starting point), full-frame or near-frame-width, present tone with scale pop.
+
+**Size is always relative, never absolute.** What matters is the _contrast ratio_ between a group and its neighbors inside the same plane — climax should be ~2× the emphasis, emphasis ~1.3–1.5× the narrator. An agent that writes `0.08h / 0.08h / 0.08h` for three caps in a plane has failed regardless of which bucket it picked from. The hierarchy is the point.
+
+Spatial composition: use the full frame as a canvas. Filler chunks tuck to corners or sit small at subordinate positions; emphasis chunks claim the middle; climax chunks own the frame. **Don't lock everything to `bottom: 12%`** — that's the boring-subtitle trap.
+
+Time windows: either spatially-separate overlapping groups (cascade, poem-accumulation) or hand-off so only one chunk shows at a time. Handoff at the same slot reads jittery (too many cuts in a short window) — prefer spatial cascade where adjacent chunks coexist at different positions, or accumulation blocks bounded by sentences.
+
+Layer: default `"bg"` for any chunk whose position has clean scene around it (sky, wall, the area above/below the subject) — that's the embed effect. Use `"fg"` only when the chunk's position would be ≥80% occluded by the body (e.g. chyron-style chunks at bottom in 9:16 portrait where the torso fills that zone).
+
+**Climax chunks across the subject — readability first.** The Vogue-masthead effect (big uppercase crossing the body) is the most cinematic move, but only if the word is still readable. Use `bg` across the subject when **all** of:
+
+1. The caption is multi-line (≥2 lines), so even if one line is mostly eaten, the others stay clean and the viewer can read the phrase. Single-line captions should never sit directly over the face/body — either reposition above/below the subject, or use `fg`.
+2. The subject's bounding box covers ≤40% of the caption's total pixel area. For 9:16 portrait with a typical head-and-shoulders subject (~30% vertical × ~50% horizontal at mid-frame), a caption at `top: 16%` spanning 4 lines × 0.14h meets this — the face eats one line, the other three read clean. A caption at `top: 40%` sitting directly on the face does not.
+3. Each individual word has visible letter endpoints on at least one side — a word that's split mid-letter with only interior strokes showing is unreadable even if "25% of total pixels" are covered.
+
+If any of these fail, either **reposition** the BG caption to clean scene (above the head / below the shoulders / into an off-center corner), or **fall back to `fg`**. FG for climax is the right call when the scene has no clean zone big enough — don't force the embed aesthetic at the cost of legibility.
+
+Rule of thumb: if you flattened your plan to just the climax chunks, the result should still read as a satisfying tweet-length headline. If it doesn't — you've under-varied your typography and the climax doesn't pop hard enough.
diff --git a/.claude/skills-media/embedded-captions/references/direction-catalog.md b/.claude/skills-media/embedded-captions/references/direction-catalog.md
new file mode 100644
index 000000000..a19744140
--- /dev/null
+++ b/.claude/skills-media/embedded-captions/references/direction-catalog.md
@@ -0,0 +1,138 @@
+# Direction catalog
+
+10 distinct aesthetic directions the skill can express. Each is a complete look: font, motion, color, placement, rhetorical defaults. The agent picks by **content tone × shot type × platform**, not preset name.
+
+Current shipped templates (`modes/cinematic/*`) cover about 30% of this catalog. The rest are future ship-ready aesthetics.
+
+Classification matrix — pick direction by intersection:
+
+| Tone ↓ / Platform → | 9:16 portrait                            | 16:9 landscape           | 1:1 square               |
+| ------------------- | ---------------------------------------- | ------------------------ | ------------------------ |
+| **Documentary**     | documentary-dignified (vertical variant) | documentary-dignified    | broadcast-dignified      |
+| **Conversational**  | portrait-header + default                | memory-wall OR champion  | broadcast-dignified      |
+| **Energetic**       | high-energy-vlog                         | high-energy-vlog-wide    | high-energy-vlog-sq      |
+| **Poetic**          | lyrical-poem-on-wall (portrait)          | lyrical-poem-on-wall     | chapter-card             |
+| **Keynote/tech**    | — (9:16 not ideal)                       | tech-keynote-confident   | tech-keynote-confident   |
+| **Investigative**   | —                                        | investigative-typewriter | investigative-typewriter |
+| **Music video**     | k-pop-lyric                              | k-pop-lyric              | k-pop-lyric              |
+
+---
+
+## Direction specs
+
+### 1. documentary-dignified _(Errol Morris / PBS Frontline)_ — Standard-mode direction (no prebuilt Cinematic template)
+
+- **Family**: Söhne Mono OR GT Sectra for name cards; Inter for body
+- **Weights**: 500 body, 700 name card
+- **Color**: bone `#F5EFE6` on charcoal, OR charcoal `#1A1A1A` on bone. No accent.
+- **Motion**: burn-in (no animation). Held 0.5s past last word.
+- **Placement**: bottom-left block, 10% margin, locked position for whole interview.
+- **Rules**: 2-line max. Speaker name card once at first utterance + after each cut. No emphasis styling — gravitas IS the style.
+- **Rhetorical**: aggressive filler suppression. Every word is chosen.
+
+### 2. cinematic-noir _(Kyle Cooper / Se7en)_
+
+- **Family**: Distressed serif (Hoefler Text) + tight mono for detail
+- **Weights**: 700 mostly; thin italic ONLY for whispers
+- **Color**: off-white `#E8E0D0` with deep red `#8B0000` single-word accent for menace
+- **Motion**: typewriter with 10% chance of 1px jitter on entry; scratched etch for chapter beats
+- **Placement**: off-axis — avoid dead-center, slightly high-left or low-right
+- **Rules**: no emoji, no rounded corners, everything hand-feeling
+
+### 3. tech-keynote-confident _(Apple / Jony Ive ad)_
+
+- **Family**: SF Pro Display OR Inter, nothing else
+- **Weights**: 800 headline keyword, 400 context
+- **Color**: pure white on any bg; `mix-blend-mode: difference` fallback for bright scenes
+- **Motion**: swipe-reveal from bottom via clip-path (400ms); exit fades 400ms
+- **Placement**: dead center, large. NOT lower-third.
+- **Rules**: one caption on screen at a time. 2–5 words per caption. Long held silences between. Feels like slides.
+
+### 4. lyrical-poem-on-wall _(extends current memory-wall template)_
+
+- **Family**: Serif with personality — EB Garamond / GT Sectra / Caslon Italic
+- **Weights**: 400–500 only. **This direction rejects bold.**
+- **Color**: picks up wall via `mix-blend-mode: overlay`, opacity 0.85, no stroke
+- **Motion**: etch in 600ms, hold 1.5–3s, etch out
+- **Placement**: always on a surface in the scene (back wall, foam, whiteboard). Uses matte pipeline.
+- **Rules**: captions are **fewer** than spoken text — 40–60%. Intentional silences. No other tool does this; strong differentiation.
+
+### 5. high-energy-vlog _(controlled Hormozi)_
+
+- **Family**: Inter ExtraBold, uppercase
+- **Weights**: 900 always
+- **Color**: white body + ONE accent (`#FFD600` or `#00E676`) + narrow 2px dark stroke
+- **Motion**: word-pop with elastic, 60ms stagger; active word scales 1.15× on speech onset
+- **Placement**: center-frame, ~35% from top
+- **Rules**: max 3 words per frame. Hard break at breath pauses. Accent color on ~15% of words. **One full silence every 10s** (what Hormozi imitators miss).
+
+### 6. chapter-card _(Wes Anderson / Grand Budapest)_
+
+- **Family**: Futura Bold (modern) / Archer (warm) / Bodoni (formal)
+- **Weights**: 700 chapter title, 400 attribution
+- **Color**: pastel hue sampled from scene
+- **Motion**: full-frame static card between interview segments
+- **Placement**: centered card for chapters; lower-left name card during speech
+- **Rules**: chapter cards get their own beat (0.8s silence before, 0.4s after). Feels authored.
+
+### 7. investigative-typewriter _(Frontline / 60 Minutes / Morris Interrotron)_
+
+- **Family**: IBM Plex Mono OR JetBrains Mono
+- **Weights**: 500
+- **Color**: white with 3px shadow, no stroke
+- **Motion**: typewriter char-by-char 25ms/char; cursor blink 600ms after last char
+- **Placement**: bottom band with 40% opacity gradient up — **NOT a hard box**
+- **Rules**: one line only, two-line max. Every caption ends with 1-frame cursor-hold before next enters.
+
+### 8. k-pop-lyric _(music video typographic flex)_
+
+- **Family**: oversized display serif (Playfair Display / GT Super) + tiny mono detail line
+- **Weights**: display 900, mono 400
+- **Color**: deep saturated single hue per song/segment
+- **Motion**: cascade entries alternating sides; words cross subject with mix-blend
+- **Placement**: intentionally LARGE — sometimes bigger than the face
+- **Rules**: emotional/musical moments only. Never informational content. **Breaks rule #1 (subject wins) on purpose** — that's the whole point.
+
+### 9. broadcast-dignified _(BBC / NYT documentary standard)_
+
+- **Family**: Helvetica Now / Neue Haas Grotesk
+- **Weights**: 500 body, 700 name
+- **Color**: white on 40% black gradient pill (not hard box, not plain shadow — gradient is the signature)
+- **Motion**: 200ms fade-up, 150ms fade-down
+- **Placement**: bottom-center, 10% margin, title-safe locked
+- **Rules**: strict BBC — 160–180wpm, 32–34 chars/line, 2 lines max, 1.5s min gap. "Export to broadcast" mode. Boring on purpose. Never wrong.
+
+### 10. conference-lower-third-killer _(B2B but not lame)_
+
+- **Family**: GT America / Aktiv Grotesk
+- **Weights**: dual-weight name card — role 400, name 700, same size
+- **Color**: scene-sampled accent on name, white on role
+- **Motion**: name card swipes in from left 400ms on first appearance only; subsequent static
+- **Placement**: lower-left card + active-word highlight inline in dialogue above
+- **Rules**: mode for podcast clips, founder interviews, keynote pulls. Sophisticated without being arty.
+
+---
+
+## Which to ship next
+
+Current templates: `memory-wall` (roughly direction #4), `champion` (roughly a mix of #5 and #9), `portrait-header` (default vertical).
+
+Priority ship order based on competitive gap:
+
+1. **documentary-dignified** — no one else does this well; Errol Morris aesthetic is an unserved niche
+2. **lyrical-poem-on-wall** (as distinct template) — the one that most uses our matte-embed moat
+3. **high-energy-vlog** — matches but out-designs Hormozi/Submagic presets
+4. **tech-keynote-confident** — big for product launch videos
+5. **investigative-typewriter** — niche but highly distinctive
+
+---
+
+## How the agent picks
+
+1. Classify the clip: `tone × shot × platform` (see matrix above)
+2. Look up direction in matrix
+3. Read that direction's spec in this file
+4. Translate spec into plan.json parameters OR clone the canonical HTML from `examples/`
+5. Tune layout per scene (agent judgment, see `aesthetic-principles.md §1–18`)
+
+If no direction fits cleanly → **Standard mode**. Don't fake-fit an ill-matched direction.
diff --git a/.claude/skills-media/embedded-captions/references/example-renders/champion.html b/.claude/skills-media/embedded-captions/references/example-renders/champion.html
new file mode 100644
index 000000000..3ec196efa
--- /dev/null
+++ b/.claude/skills-media/embedded-captions/references/example-renders/champion.html
@@ -0,0 +1,371 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        margin: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: #000;
+        font-family: "Inter", system-ui, sans-serif;
+      }
+
+      #a-roll {
+        position: absolute;
+        inset: 0;
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+      }
+
+      /*
+        This scene has no flat wall — subject is center with a busy
+        bookshelf backdrop. So instead of a wall-plane, we place a
+        HEADER band across the top of the frame with subtle perspective
+        (slight rotateX so it lies on the bookshelf rather than floats).
+        Screen-blend picks up the shelf's darker patches.
+      */
+      #stage {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 1920px;
+        height: 1080px;
+        perspective: 2400px;
+        perspective-origin: 25% 50%;
+        pointer-events: none;
+        z-index: 2;
+      }
+
+      /*
+        Left-column layout: subject fills x=550-1200, so the bookshelf
+        at x=0-550 is the clean zone. Captions right-align there, with
+        a mild perspective that makes them lie on the shelf.
+      */
+      .left-plane {
+        position: absolute;
+        /* Upper-left region. Hands gesture widely below y≈460, so we
+           keep the plane above that line. Head sits to the right of
+           x≈600, so x=40-720 here is the clean bookshelf zone. */
+        top: 40px;
+        left: 40px;
+        width: 720px;
+        height: 420px;
+        transform-style: preserve-3d;
+        transform: rotateY(4deg);
+        transform-origin: left center;
+        padding: 24px 36px;
+      }
+
+      /* Each cap stacks at the same absolute position within the plane
+         so hidden captions don't reserve flex space. */
+      .left-plane .cap {
+        position: absolute;
+        top: 24px;
+        right: 36px;
+        max-width: 648px; /* plane 720 - padding 36×2 */
+      }
+
+      /* A single "crown" caption placed center-stage for the payoff
+         ("A WIMBLEDON CHAMPION") — deliberately crosses the head to
+         deliver the emphasis via cinematic occlusion. */
+      .crown-plane {
+        position: absolute;
+        top: 420px;
+        left: 0;
+        right: 0;
+        text-align: center;
+        pointer-events: none;
+      }
+
+      .cap {
+        display: block;
+        position: relative;
+        line-height: 1.02;
+        opacity: 0;
+        mix-blend-mode: screen;
+        color: #fff5df;
+        text-shadow:
+          0 0 18px rgba(255, 220, 170, 0.55),
+          0 3px 8px rgba(0, 0, 0, 0.85);
+        filter: brightness(1.12) contrast(1.08);
+        will-change: transform, opacity;
+      }
+
+      .cap .w {
+        display: inline-block;
+        opacity: 0;
+        will-change: opacity, transform;
+      }
+
+      /*
+        Story beats sized to emphasize meaning:
+        - intros / fillers = smaller italic
+        - key statement phrases = bigger upright
+        - emphasis phrases (incredible things) = largest bold
+        - crown (Wimbledon Champion) = huge, center-stage, behind subject
+      */
+      .cap-intro {
+        font-size: 52px;
+        font-weight: 500;
+        font-style: italic;
+        letter-spacing: -0.005em;
+      }
+      .cap-phrase {
+        font-size: 60px;
+        font-weight: 600;
+        font-style: normal;
+        letter-spacing: -0.015em;
+      }
+      .cap-emph {
+        font-size: 70px;
+        font-weight: 800;
+        font-style: normal;
+        letter-spacing: -0.025em;
+      }
+      .cap-dream {
+        font-size: 64px;
+        font-weight: 700;
+        font-style: italic;
+        letter-spacing: -0.015em;
+      }
+      .cap-crown {
+        font-size: 140px;
+        font-weight: 900;
+        font-style: normal;
+        letter-spacing: -0.035em;
+        text-transform: uppercase;
+        line-height: 1;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="main"
+      data-start="0"
+      data-duration="12.08"
+      data-width="1920"
+      data-height="1080"
+    >
+      <video
+        id="a-roll"
+        class="clip"
+        src="source.mp4"
+        muted
+        playsinline
+        data-duration="12.08"
+        data-track-index="0"
+        style="z-index: 1"
+      ></video>
+
+      <div id="stage">
+        <!-- Left column: G1-G5 live here, on the clean bookshelf -->
+        <div class="left-plane">
+          <div id="cg-0" class="cap cap-intro">
+            <span class="w" data-i="0">You</span>
+            <span class="w" data-i="1">know,</span>
+            <span class="w" data-i="2">for</span>
+            <span class="w" data-i="3">me</span>
+          </div>
+          <div id="cg-1" class="cap cap-phrase">
+            <span class="w" data-i="0">I've</span>
+            <span class="w" data-i="1">had</span>
+            <span class="w" data-i="2">this</span>
+            <span class="w" data-i="3">kind</span>
+            <span class="w" data-i="4">of</span>
+            <span class="w" data-i="5">upbringing</span>
+          </div>
+          <div id="cg-2" class="cap cap-phrase">
+            <span class="w" data-i="0">the</span>
+            <span class="w" data-i="1">great</span>
+            <span class="w" data-i="2">foundation</span>
+          </div>
+          <div id="cg-3" class="cap cap-emph">
+            <span class="w" data-i="0">I've</span>
+            <span class="w" data-i="1">achieved</span>
+            <span class="w" data-i="2">incredible</span>
+            <span class="w" data-i="3">things</span>
+          </div>
+          <div id="cg-4" class="cap cap-dream">
+            <span class="w" data-i="0">dreaming</span>
+            <span class="w" data-i="1">of</span>
+            <span class="w" data-i="2">becoming</span>
+            <span class="w" data-i="3">number</span>
+            <span class="w" data-i="4">one</span>
+          </div>
+        </div>
+        <!-- Center-stage crown: the payoff. Sits where the subject is,
+             matte layering makes it *behind* him — the occlusion is the moment. -->
+        <div class="crown-plane">
+          <div id="cg-5" class="cap cap-crown">
+            <span class="w" data-i="0">Wimbledon</span>
+            <span class="w" data-i="1">Champion</span>
+          </div>
+        </div>
+      </div>
+
+      <audio
+        id="a-roll-audio"
+        src="source.mp4"
+        data-start="0"
+        data-duration="12.08"
+        data-track-index="3"
+        data-volume="1"
+      ></audio>
+    </div>
+
+    <script>
+      window.__timelines = window.__timelines || {};
+      const tl = gsap.timeline({ paused: true });
+      const DUR = 12.08;
+
+      /* Word-level transcript — ElevenLabs scribe_v2 */
+      const GROUPS = [
+        {
+          id: "cg-0",
+          in: 0.1,
+          out: 1.45,
+          tone: "soft",
+          words: [
+            { text: "You", start: 0.18, end: 0.24 },
+            { text: "know", start: 0.28, end: 0.36 },
+            { text: "for", start: 0.46, end: 0.62 },
+            { text: "me", start: 0.66, end: 0.86 },
+          ],
+        },
+        {
+          id: "cg-1",
+          in: 1.4,
+          out: 3.35,
+          tone: "soft",
+          words: [
+            { text: "I've", start: 1.5, end: 1.68 },
+            { text: "had", start: 1.76, end: 1.94 },
+            { text: "this", start: 1.98, end: 2.14 },
+            { text: "kind", start: 2.2, end: 2.34 },
+            { text: "of", start: 2.36, end: 2.44 },
+            { text: "upbringing", start: 2.48, end: 3.06 },
+          ],
+        },
+        {
+          id: "cg-2",
+          in: 3.5,
+          out: 5.35,
+          tone: "soft",
+          words: [
+            { text: "the", start: 3.56, end: 3.64 },
+            { text: "great", start: 3.7, end: 3.9 },
+            { text: "foundation", start: 3.96, end: 4.6 },
+          ],
+        },
+        {
+          id: "cg-3",
+          in: 6.05,
+          out: 8.3,
+          tone: "present",
+          words: [
+            { text: "I've", start: 6.36, end: 6.5 },
+            { text: "achieved", start: 6.62, end: 7.08 },
+            { text: "incredible", start: 7.38, end: 7.86 },
+            { text: "things", start: 7.88, end: 8.16 },
+          ],
+        },
+        {
+          id: "cg-4",
+          in: 8.5,
+          out: 10.4,
+          tone: "present",
+          words: [
+            { text: "dreaming", start: 8.54, end: 8.84 },
+            { text: "of", start: 8.88, end: 9.0 },
+            { text: "becoming", start: 9.04, end: 9.4 },
+            { text: "number", start: 9.48, end: 9.64 },
+            { text: "one", start: 9.72, end: 9.8 },
+          ],
+        },
+        {
+          id: "cg-5",
+          in: 10.8,
+          out: 12.08,
+          tone: "present",
+          words: [
+            { text: "Wimbledon", start: 10.92, end: 11.28 },
+            { text: "Champion", start: 11.38, end: 11.84 },
+          ],
+        },
+      ];
+
+      GROUPS.forEach(function (g) {
+        var sel = "#" + g.id;
+        var words = g.words.map(function (_, i) {
+          return sel + " .w[data-i='" + i + "']";
+        });
+        var isSoft = g.tone === "soft";
+
+        /* Container visible just before entrance; single-layer fade is on words. */
+        tl.set(sel, { opacity: 1, y: 0 }, Math.max(0, g.in - 0.01));
+
+        g.words.forEach(function (w, i) {
+          if (isSoft) {
+            tl.fromTo(
+              words[i],
+              { opacity: 0, y: 8 },
+              { opacity: 1, y: 0, duration: 0.42, ease: "power2.out", overwrite: "auto" },
+              w.start,
+            );
+          } else {
+            tl.fromTo(
+              words[i],
+              { opacity: 0, y: 6, scale: 1.04 },
+              {
+                opacity: 1,
+                y: 0,
+                scale: 1.0,
+                duration: 0.22,
+                ease: "power3.out",
+                transformOrigin: "50% 50%",
+                overwrite: "auto",
+              },
+              w.start,
+            );
+          }
+        });
+
+        /* Group exit — each group fades out before the next enters. */
+        if (g.out < DUR) {
+          tl.to(
+            sel,
+            { opacity: 0, duration: 0.45, ease: "power2.in", overwrite: "auto" },
+            g.out - 0.45,
+          );
+        }
+        tl.set(sel, { opacity: 0, visibility: "hidden" }, g.out);
+      });
+
+      /* Self-lint */
+      GROUPS.forEach(function (g) {
+        var el = document.getElementById(g.id);
+        if (!el) return;
+        tl.seek(g.out + 0.01);
+        var cs = window.getComputedStyle(el);
+        if (cs.opacity !== "0" && cs.visibility !== "hidden") {
+          console.warn("[caption-lint] " + g.id + " visible at t=" + (g.out + 0.01).toFixed(2));
+        }
+      });
+      tl.seek(0);
+
+      window.__timelines["main"] = tl;
+    </script>
+  </body>
+</html>
diff --git a/.claude/skills-media/embedded-captions/references/example-renders/memory-wall.html b/.claude/skills-media/embedded-captions/references/example-renders/memory-wall.html
new file mode 100644
index 000000000..c34d5cc22
--- /dev/null
+++ b/.claude/skills-media/embedded-captions/references/example-renders/memory-wall.html
@@ -0,0 +1,334 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1280, height=720" />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        margin: 0;
+        width: 1280px;
+        height: 720px;
+        overflow: hidden;
+        background: #000;
+        font-family: "Inter", system-ui, sans-serif;
+      }
+
+      #a-roll,
+      #fg-overlay {
+        position: absolute;
+        inset: 0;
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+      }
+
+      /* Foreground matte sits above the captions so the person & mic occlude
+         the text — classic cinematic lower-third layering. */
+      #fg-overlay {
+        z-index: 3;
+        pointer-events: none;
+      }
+
+      /*
+        Caption stage — perspective container so the text plane lies on the
+        acoustic-foam wall in the upper-right of the frame. Small jitter is
+        applied to the stage by GSAP to fake handheld motion tracking.
+      */
+      #stage {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 1280px;
+        height: 720px;
+        perspective: 1400px;
+        perspective-origin: 30% 40%;
+        pointer-events: none;
+        z-index: 2;
+        will-change: transform;
+      }
+
+      .wall-plane {
+        position: absolute;
+        /* Right-aligned cluster, but widened and pushed slightly left
+           so emphasis words (EVERYTHING, SHARP AGAIN) reach past the
+           subject's silhouette. Short words still hug the wall. */
+        top: 90px;
+        right: 30px;
+        width: 720px;
+        height: 520px;
+        transform-style: preserve-3d;
+        transform: rotateY(-13deg) rotateX(1deg);
+        transform-origin: right center;
+        padding: 24px 32px;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: flex-end;
+        text-align: right;
+        gap: 14px;
+      }
+
+      .cap {
+        display: block;
+        position: relative;
+        line-height: 1.05;
+        opacity: 0;
+        /* The "embed in scene" move: overlay blend picks up the wall's
+           luminance and color so the text feels lit BY the scene. */
+        mix-blend-mode: screen;
+        color: #fff4dc;
+        text-shadow:
+          0 0 12px rgba(255, 210, 150, 0.45),
+          0 2px 5px rgba(0, 0, 0, 0.7);
+        filter: brightness(1.1) contrast(1.05);
+        will-change: transform, opacity, filter;
+      }
+
+      .cap .w {
+        display: inline-block;
+        opacity: 0;
+        will-change: opacity, transform, filter;
+      }
+
+      /*
+        Unified cinematic typography — no mode switch between soft & sharp.
+        Elegant serif-inflected sans, italic for the dreamy first half,
+        upright for the second half. One look, one feeling, progressing.
+      */
+      .cap-1 {
+        font-size: 78px;
+        font-weight: 600;
+        font-style: italic;
+        letter-spacing: -0.01em;
+      }
+      .cap-2 {
+        font-size: 66px;
+        font-weight: 500;
+        font-style: italic;
+        letter-spacing: -0.005em;
+        padding-right: 44px; /* hanging indent on right for right-aligned flow */
+      }
+      .cap-3 {
+        font-size: 72px;
+        font-weight: 700;
+        font-style: normal;
+        letter-spacing: -0.015em;
+      }
+      .cap-4 {
+        font-size: 90px;
+        font-weight: 900;
+        font-style: normal;
+        letter-spacing: -0.03em;
+        text-transform: uppercase;
+        line-height: 1;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="main"
+      data-start="0"
+      data-duration="8.04"
+      data-width="1280"
+      data-height="720"
+    >
+      <!-- Layer 0: background plate (full video) -->
+      <video
+        id="a-roll"
+        class="clip"
+        src="source.mp4"
+        muted
+        playsinline
+        data-duration="8.04"
+        data-track-index="0"
+        style="z-index: 1"
+      ></video>
+
+      <!-- Layer 2: caption stage (between background and foreground matte) -->
+      <div id="stage">
+        <div class="wall-plane">
+          <div id="cg-0" class="cap cap-1">
+            <span class="w" data-i="0">Some</span>
+            <span class="w" data-i="1">memories</span>
+            <span class="w" data-i="2">feel</span>
+            <span class="w" data-i="3">soft</span>
+          </div>
+          <div id="cg-1" class="cap cap-2">
+            <span class="w" data-i="0">like</span>
+            <span class="w" data-i="1">old</span>
+            <span class="w" data-i="2">film</span>
+          </div>
+          <div id="cg-2" class="cap cap-3">
+            <span class="w" data-i="0">but</span>
+            <span class="w" data-i="1">suddenly</span>
+          </div>
+          <div id="cg-3" class="cap cap-4">
+            <span class="w" data-i="0">everything</span>
+            <span class="w" data-i="1">is</span>
+            <span class="w" data-i="2">sharp</span>
+            <span class="w" data-i="3">again</span>
+          </div>
+        </div>
+      </div>
+
+      <!-- Foreground occlusion (person + mic) is applied in post via ffmpeg
+           overlay. Browser-side alpha webm is unreliable across encoders. -->
+
+      <!-- Audio -->
+      <audio
+        id="a-roll-audio"
+        src="source.mp4"
+        data-start="0"
+        data-duration="8.04"
+        data-track-index="3"
+        data-volume="1"
+      ></audio>
+    </div>
+
+    <script>
+      window.__timelines = window.__timelines || {};
+      const tl = gsap.timeline({ paused: true });
+      const DUR = 8.04;
+
+      /* ─────────────────────────────────────────────────────────────────
+         Word-level transcript — ElevenLabs timestamps.
+         ───────────────────────────────────────────────────────────────── */
+      const GROUPS = [
+        {
+          id: "cg-0",
+          words: [
+            { text: "Some", start: 0.24, end: 0.44 },
+            { text: "memories", start: 0.48, end: 0.82 },
+            { text: "feel", start: 0.9, end: 1.14 },
+            { text: "soft", start: 1.2, end: 1.64 },
+          ],
+          in: 0.2,
+          out: 4.85,
+          tone: "soft",
+        },
+        {
+          id: "cg-1",
+          words: [
+            { text: "like", start: 2.66, end: 2.78 },
+            { text: "old", start: 2.86, end: 3.02 },
+            { text: "film", start: 3.14, end: 3.46 },
+          ],
+          in: 2.55,
+          out: 4.85,
+          tone: "soft",
+        },
+        {
+          id: "cg-2",
+          words: [
+            { text: "but", start: 5.02, end: 5.16 },
+            { text: "suddenly", start: 5.22, end: 5.76 },
+          ],
+          in: 4.9,
+          out: 8.04,
+          tone: "present",
+        },
+        {
+          id: "cg-3",
+          words: [
+            { text: "everything", start: 6.8, end: 7.14 },
+            { text: "is", start: 7.16, end: 7.28 },
+            { text: "sharp", start: 7.3, end: 7.52 },
+            { text: "again", start: 7.56, end: 7.92 },
+          ],
+          in: 6.7,
+          out: 8.04,
+          tone: "present",
+        },
+      ];
+
+      /* ─────────────────────────────────────────────────────────────────
+         Each caption group: cinematic word-by-word reveal. No flashes, no
+         grain — purely text animation. Soft groups drift up gently, later
+         groups resolve firmly into place to match the sentence turn.
+         ───────────────────────────────────────────────────────────────── */
+      GROUPS.forEach(function (g) {
+        var sel = "#" + g.id;
+        var words = g.words.map(function (_, i) {
+          return sel + " .w[data-i='" + i + "']";
+        });
+
+        var isSoft = g.tone === "soft";
+
+        /* Container stays fully visible — each word animates its own fade.
+           This avoids a double-fade (container × word) that produced a
+           non-linear pop in the first ~100ms of the first caption. */
+        tl.set(sel, { opacity: 1, y: 0 }, Math.max(0, g.in - 0.01));
+
+        /* Per-word reveal — opacity + translate only. No letter-spacing
+           or filter:blur here: both can perturb inline-block metrics
+           mid-animation and cause the cap line-box to reflow, which
+           makes words like "Some" visibly shift between rows when a
+           sibling word enters. transform-only = no reflow. */
+        g.words.forEach(function (w, i) {
+          if (isSoft) {
+            tl.fromTo(
+              words[i],
+              { opacity: 0, y: 8 },
+              {
+                opacity: 1,
+                y: 0,
+                duration: 0.45,
+                ease: "power2.out",
+                overwrite: "auto",
+              },
+              w.start,
+            );
+          } else {
+            tl.fromTo(
+              words[i],
+              { opacity: 0, y: 6, scale: 1.04 },
+              {
+                opacity: 1,
+                y: 0,
+                scale: 1.0,
+                duration: 0.22,
+                ease: "power3.out",
+                overwrite: "auto",
+                transformOrigin: "50% 50%",
+              },
+              w.start,
+            );
+          }
+        });
+
+        /* Group exit — soft groups linger and fade as the sentence turns,
+           present groups hold to the end. Clean fades, no trickery. */
+        if (g.out < DUR) {
+          tl.to(
+            sel,
+            { opacity: 0, duration: 0.5, ease: "power2.in", overwrite: "auto" },
+            g.out - 0.5,
+          );
+        }
+        tl.set(sel, { opacity: 0, visibility: "hidden" }, g.out);
+      });
+
+      /* Self-lint */
+      GROUPS.forEach(function (g) {
+        var el = document.getElementById(g.id);
+        if (!el) return;
+        tl.seek(g.out + 0.01);
+        var cs = window.getComputedStyle(el);
+        if (cs.opacity !== "0" && cs.visibility !== "hidden") {
+          console.warn("[caption-lint] " + g.id + " visible at t=" + (g.out + 0.01).toFixed(2));
+        }
+      });
+      tl.seek(0);
+
+      window.__timelines["main"] = tl;
+    </script>
+  </body>
+</html>
diff --git a/.claude/skills-media/embedded-captions/references/failure-modes.md b/.claude/skills-media/embedded-captions/references/failure-modes.md
new file mode 100644
index 000000000..1a971a781
--- /dev/null
+++ b/.claude/skills-media/embedded-captions/references/failure-modes.md
@@ -0,0 +1,145 @@
+# Failure Modes — learned the hard way
+
+Things that broke during skill development. Check against this list before you ship.
+
+## Matting
+
+### CoreML execution provider corrupts face alpha
+
+Running the matting ONNX through the CoreML EP partitions the graph across providers; the mixed-precision boundary produced alpha ≈ 30 (out of 255) inside the subject's face while the background correctly read 0 (observed with the previous RVM engine — don't re-try). Result: caption text visibly shines THROUGH the face.
+
+**Fix**: Only ever use `providers=["CPUExecutionProvider"]` for the matting ONNX. Our script does this; don't "optimize" it by adding CoreML.
+
+### Aspect distortion / sharp channel-stride make the alpha garbage
+
+(historical — the PP-MattingV2 engine was replaced 2026-06-12 by hyperframes `remove-background`; kept because the lessons generalize) Two earned scars from the ONNX era: (1) fixed-size model exports — squashing a portrait clip into a landscape canvas distorts humans; contain-pad (aspect preserved, centered, alpha cropped back) instead. (2) sharp returns a **3-channel** buffer from `.raw()` after resizing a 1-channel raw input — reading it with a 1-channel stride silently produces a smeared, striped, displaced matte that can _look_ plausible. Always `toBuffer({resolveWithObject:true})` and stride by `info.channels` (other scripts in this skill still use sharp).
+
+**Fix**: both handled inside `matte.cjs`; preserve them if you touch it.
+
+### isnet-general-use / u2net_human_seg miss props
+
+rembg's general/human models capture the person but drop handheld props (mic, notebook). If the caption crosses the mic, it will NOT be occluded by the mic — text floats in front of it unnaturally.
+
+**Fix**: For scenes where props matter, either (a) accept that the human-matting model captures what it captures, or (b) add a manual mask ROI for the prop region. We haven't productized (b) yet.
+
+## Layout
+
+### Flex-stacked captions push hidden ones into gesture zone
+
+First champion iteration put all cap elements inside a flex column with `display: block`. Hidden captions (visibility: hidden) STILL reserve flex space. Result: cg-4 "dreaming" got pushed to y=700, landing right on the hand gesture zone and getting clipped.
+
+**Fix**: Inside the caption plane, each `.cap` is `position: absolute` at the same coords. Hidden ones don't occupy layout. Both templates in this skill do it this way.
+
+### Header-overlay on close-crop shots
+
+First champion iteration used a full-width header band across the TOP of the frame (`top: 30, left: 40, right: 40, height: 360, rotateX: -3deg, justify-content: flex-start, align-items: center`). Subject's head crosses the center, eating the middle of every caption. "know, for me" became a faint "now, for" with the letters sliced apart.
+
+**Fix**: On close-crop podcast shots, don't use symmetric full-width bands. Use `corner-column-crown` with caption column in the corner opposite the head.
+
+### Text right-align + align-items: flex-end + no max-width → flows off-screen
+
+If you set `align-items: flex-end` on the plane and don't constrain width, each `.cap` shrinks to content width. Long words then extend left beyond the plane's "visible" box without wrapping, clipping into the subject.
+
+**Fix**: Set `max-width: calc(100% - padding*2)` on each `.cap`. Templates do this.
+
+## Animation
+
+### letterSpacing animation causes inline-block reflow jumps
+
+Had `letterSpacing: "0.04em"` as the "from" value in `tl.fromTo(word, {opacity:0, letterSpacing: ".04em"}, {letterSpacing:"0"}, w.start)`. GSAP snaps the "from" state at w.start. The width of the word then changes over the tween → inline-block reflow → the `.cap` line box recomputes → "Some" visibly jumped between rows as "memories" entered.
+
+**Fix**: Animate only **transform** properties (opacity, y, scale). NEVER animate letter-spacing, font-size, or filter:blur on `.w` spans. Templates follow this.
+
+### Double-fade (container × word) produces a non-linear pop
+
+Fading both the group container AND each word independently multiplies: effective_opacity = container.opacity × word.opacity. Even with matched eases, the combined curve is nonlinear and feels like a snap-in around the 40% mark.
+
+**Fix**: Keep container at fixed `opacity: 1` during the group's life (set via `tl.set` just before first word). Animate only per-word opacity. Templates do this.
+
+## Blending
+
+### mix-blend-mode: overlay vanishes into dark regions
+
+`overlay(white_text, black_bg) ≈ black`. If part of the caption falls on a dark shadow / dark prop, the letters disappear. The first champion render had `SHARP` become `ARP` because "S" and "H" landed in the dark mic's shadow.
+
+**Fix**: For scenes with significant dark regions under the caption, use `mix-blend-mode: screen` (which preserves white on dark). `wall-embed` defaults to overlay (for mid-tone walls); `corner-column-crown` defaults to screen (for dark bookshelves).
+
+### Bright backgrounds wash out screen blend
+
+Opposite problem: `screen(white, bright) ≈ white` regardless of the text — letters become invisible on bright backgrounds like sunlit windows or white walls.
+
+**Fix**: If average luminance of the caption region exceeds 180/255, switch CSS to `mix-blend-mode: normal` with an opaque color. Sample the background pixels in the caption bbox across the clip to check.
+
+## Render pipeline
+
+### Frame-rate mismatch between bg render and matte PNGs
+
+If hyperframes renders at 30fps default but the matte was extracted at 24fps source rate, ffmpeg overlay gets a temporal mismatch — alpha from frame N is overlaid on bg content of some fractional frame ≠ N. Result: person's current silhouette and matte silhouette are shifted by a few frames, so the occlusion lags or leads the body.
+
+**Fix**: Always pass `--fps` to hyperframes render matching the source's native FPS (usually 24). `render-and-composite.sh` reads fps from plan.json and passes it through.
+
+### WebM alpha (VP8/VP9) flaky in Chromium
+
+We tried making foreground an alpha-channel WebM. Chromium's support for VP9 alpha is inconsistent; VP8 alpha needs specific metadata the default ffmpeg encode doesn't produce.
+
+**Fix**: Don't try to put the matte inside hyperframes. Do the overlay in post with ffmpeg against a PNG sequence. `render-and-composite.sh` does this.
+
+## Crown / centered text
+
+### Centered crown eaten by body
+
+Default `.crown-plane` in `corner-column-crown` is `left: 0; right: 0; text-align: center`. That mechanically centers the word at `frame_width/2`. If the subject sits right of center (Jobs at x=1100 in a 1920 frame) OR the word isn't wide enough to poke both clean zones, the body eats 50-70% of the crown and it reads as "THE \_\_\_ S".
+
+**Fix**: Check subject center_x vs frame center before choosing crown strategy (see [layout-heuristics.md § Crown placement](layout-heuristics.md)). Either size the crown large enough to cross both clean zones, or shift it into the larger clean zone with a narrower width. Keep `text-align: center` within the (re-positioned) box, not the frame.
+
+### Crown font too small for frame → half-swallowed
+
+On landscape 1920×1080, a centered crown at 140px is only ~500px wide. If the subject is 700-900px wide, the crown vanishes behind them. Symptom: only "THE" and "S" visible for "THE BEATLES".
+
+**Fix**: For full-frame centered crown, font must be big enough that `crown_width > subject_width + 400`. See font-size table in [typography-presets.md](typography-presets.md). Prefer 180-260px for landscape centered crowns.
+
+### Wider caption column + default font size → underweight
+
+Template defaults (66/78/92/140) assume a ~560px column. Expanding the plane to 700+ px without bumping fonts makes the text feel too small relative to the column.
+
+**Fix**: Column width 600-760 → phrase ~108px, emph ~128px, crown ~220px centered. See table in [typography-presets.md](typography-presets.md).
+
+## Scene admission
+
+### Handheld / fast camera → matte alpha flickers
+
+The matte is temporally smoothed (EMA in matte.cjs) but moderate motion only. Fast camera pans (vlog selfie) still produce frame-to-frame alpha jitter that shows as flickering caption edges.
+
+**Fix**: SKILL.md decision gate lists handheld vlog as `⚠️` — degrade or refuse. Production version would add `vidstabdetect` compensation; v1 does not.
+
+### Multi-person scenes → matte is ambiguous
+
+The human-matting model segments "foreground" as a single alpha. With two people, it captures both but they're treated as one blob. Captions can't go "behind person A but in front of person B". If the scene has both speakers visible, the skill should split by shot boundaries first.
+
+**Fix**: Either pre-split with PySceneDetect + per-shot planning, or refuse for `⚠️` multi-subject scenes.
+
+### Undetected shot cut inside the clip
+
+Some sources (interviews, broadcast clips) cut to B-roll/archive footage mid-clip. The matte + caption layout assumes the subject is the same person throughout — a hard cut mid-render creates garbage (caption placement relative to old subject applied to a totally different shot).
+
+**Fix for v1**: Probe the clip at 3-5 timestamps before accepting it. If any frame doesn't contain the primary subject at the same position, trim the clip to end before the cut. `Steve Jobs 60 Minutes` cut to Beatles archival at t≈9s, was manually trimmed to 8.5s.
+
+**Fix for future**: Run PySceneDetect as part of the admission gate; split into shots automatically.
+
+### Pillarbox / letterbox content with baked-in graphics
+
+TV archive clips often have pillarbox (black bars at sides) plus baked lower-third logos ("60 Overtime") and date labels ("2003"). These are part of the video file, can't be matted out, and shrink the usable frame area.
+
+**Fix**: Detect black-bar margins in the first frame (scan rows/columns for all-black). Constrain caption safe-zone to `[left_margin+pad, right_margin-pad, top_margin+pad, bottom_margin-pad]`. For Jobs, safe content zone was x=280-1640 (not 0-1920). Layout positions must respect this.
+
+### transcribe.cjs sees an existing transcript and skips
+
+Transcription is Whisper now, via `transcribe.cjs` (it wraps `hyperframes transcribe` — no API key). `hyperframes init --video <mp4>` may itself auto-write a `transcript.json` in hyperframes' raw whisper shape (a flat word array, no top-level `language_code`). `transcribe.cjs` only treats a transcript as done when it's ALREADY in our normalized schema (`{ words: [...], language_code }`); otherwise it (re-)runs Whisper and normalizes the flat word list into `{ words:[{text,start,end,type:"word"}], language_code }`.
+
+**Fix / expectation**: If you init via hyperframes first, expect `transcribe.cjs` to normalize that transcript into our schema. Don't hand-leave a half-normalized file (e.g. our `words` shape but no `language_code`) — that's the one state the skip-guard can misread.
+
+### Transcript gaps > 3s with no speech
+
+If the original audio has a long silence, leaving the caption plane empty feels wrong mid-video. Either (a) let the prior caption linger, (b) show a title-card crown during the silence, or (c) cut the silence out of the clip.
+
+**Fix**: During caption-grouping, detect silences > 3s. The skill should prompt the user about this, not silently proceed.
diff --git a/.claude/skills-media/embedded-captions/references/layout-heuristics.md b/.claude/skills-media/embedded-captions/references/layout-heuristics.md
new file mode 100644
index 000000000..09919d597
--- /dev/null
+++ b/.claude/skills-media/embedded-captions/references/layout-heuristics.md
@@ -0,0 +1,238 @@
+# Layout Heuristics
+
+How to pick `wall_position` / `crown_position` in plan.json.
+
+## Step 1: Sample 3 frames
+
+```bash
+ffmpeg -y -ss 0.5 -i source.mp4 -vframes 1 frame0.jpg
+ffmpeg -y -ss <mid> -i source.mp4 -vframes 1 frame1.jpg
+ffmpeg -y -ss <end-0.5> -i source.mp4 -vframes 1 frame2.jpg
+```
+
+Read all three. Note: subject's head bbox, shoulder top line, and wherever hands move during gestures. Worst-case foreground envelope = union across all 3.
+
+## Step 2: Find the clean zone
+
+The caption plane should live in pixels that are **always background** across the clip. Never where the body lands.
+
+Annotate approximate ranges:
+
+- Head bbox: `head_x_min`, `head_x_max`, `head_y_min`, `head_y_max`
+- Hand gesture envelope (if any): usually below `y = shoulder_top ≈ head_y_max + 40`
+- Props (mic, cup): typically static, note bbox
+
+**Clean zones**, in priority order:
+
+1. **Corner farthest from head** (usually opposite the gaze direction)
+2. **Upper strip above head_y_min minus 30px margin**
+3. **Lower-third** if upper is occupied (last resort — breaks "embedded" aesthetic)
+
+## Step 2.5: Which side of the subject?
+
+Once you know where the subject and baked graphics are, decide which side (left or right of the subject) hosts the caption column. Order of precedence:
+
+### 1. Hard constraints first — baked graphics
+
+Logos, watermarks, date stamps, "60 Overtime"-style lower-thirds are already in the source. They occupy permanent zones you must avoid. Map them out from frame samples:
+
+- Jobs 60 Minutes: "2003" at upper-left (x=280-460, y=30-90); "60 Overtime" at bottom-left (x=280-770, y=960-1080). Left side partially constrained; still usable above/below these.
+- TikTok re-uploads: username watermark that rotates corners every few seconds — hard to plan around, often a refusal reason.
+
+If one side has a hard constraint that eats > 60% of that side's clean zone, default to the other side.
+
+### 2. Subject body bias — pick the bigger clean zone
+
+Compute clean-zone widths on both sides:
+
+```
+left_clean_width  = body_x_min − safe_left_margin
+right_clean_width = safe_right_margin − body_x_max
+```
+
+Pick the side where clean zone is wider. If the difference is within 10% of frame width, the sides are ~equivalent → fall through to step 3.
+
+Worked examples:
+
+- **Champion** (Djokovic, 1920×1080): body x ≈ 550-1200. Left clean = 510, right clean = 720. Right is wider → but we put captions LEFT because of gaze (see step 3). The narrow difference made either workable.
+- **Jobs**: body x ≈ 700-1480 (right-of-center). Left clean = 420, right clean = 160. Left wins decisively. Captions went LEFT.
+- **Memory Wall**: surface location dictated the side (see note below about wall-embed).
+
+### 3. Gaze direction — the "looking room" rule (tiebreaker and aesthetic)
+
+Classic cinematic framing: leave more empty space on the side the subject is **looking toward**. This preserves their gaze path and feels uncluttered. **Captions go to the OPPOSITE side** (the side the subject is facing away from), so they don't steal looking room.
+
+Quick check: sample 3 frames. Estimate the eye-line vector. Does it point more left or right?
+
+- Looking screen-right → captions on LEFT
+- Looking screen-left → captions on RIGHT
+- Looking forward at camera → no preference from gaze, use step 2 only
+
+The champion / Djokovic shot has him addressing camera slightly from the left — captions on LEFT actually read like text he's looking toward, which can feel like he's acknowledging them. That's fine here but is a flavor choice; generally prefer gaze-opposite.
+
+### 4. Narrative emphasis (for optional crown)
+
+If you're using a **center-stage crown**, it sits across the subject — no left/right choice for it. But the other captions (the column) still follow steps 1-3.
+
+If you're using a **clean-zone crown** (shrunk, placed in one clean zone instead of crossing the body), put it in the **same side as the main column** for visual consistency. Don't split crown and column on opposite sides — it creates ping-pong.
+
+### Special case — wall-embed
+
+When the template is `wall-embed`, the side is **dictated by where the usable surface is**, not by body bias or gaze. Memory Wall's foam panel was on the right, so captions went right even though the subject was slightly left-of-center. Surface location wins because the whole effect depends on the text sitting ON that specific surface.
+
+### Decision summary
+
+```
+Side = f(baked graphics, body bias, gaze, surface)
+
+priority:
+1. Hard constraints (baked logos)    — never place here
+2. Wall-embed surface location       — wins if using wall-embed
+3. Bigger clean zone                 — default for corner-column
+4. Gaze direction (looking room)     — tiebreaker when both sides similar
+```
+
+If the subject actively swings their gaze across the clip (turning head L→R), pick a side that works for both extremes, not just the most frequent. Or accept that looking room will briefly be violated — it's a 10-second video, nobody cares.
+
+## Step 3: Pick template + position
+
+### If scene has a flat back wall (acoustic foam, plaster, fabric backdrop)
+
+→ `wall-embed.html`
+
+```
+wall_position: {
+  top:       max(40, head_y_min - 40),
+  right:     20-60 (hug outer edge),
+  width:     video_width * 0.35 – 0.50,
+  height:    shoulder_top - top,
+  rotateY:   -10 to -16 deg if wall angles away on the left,
+             +10 to +16 deg if mirrored, 0 if wall is parallel,
+  rotateX:   0-3 deg subtle downtilt only
+}
+```
+
+`mix-blend-mode: overlay` in this template — works on mid-tone walls. If wall is near-black (luminance < 60), switch CSS to `screen`.
+
+### If scene has a cluttered but dark backdrop (bookshelf, plants, set dressing)
+
+→ `corner-column-crown.html`
+
+```
+wall_position: {
+  top:       40,
+  left:      40,               // anchor to clean corner opposite head
+  width:     video_width * 0.40,
+  height:    clamp(360, 520),  // don't reach below shoulder top
+  rotateY:   3-6 deg (subtle, not flashy)
+}
+crown_position: {
+  top:       video_height * 0.40   // center-ish; body will cut middle letters
+}
+```
+
+`mix-blend-mode: screen` is correct here (bookshelf is dark).
+
+### If subject fills >70% of frame
+
+Template doesn't matter — there's nowhere clean. **Refuse**, suggest classic lower-third.
+
+## Step 3.5: Crown placement (when using `corner-column-crown`)
+
+**Default preference: center-stage crown.** A big, centered crown word (think "WIMBLEDON CHAMPION", "BEATLES", "SHARP AGAIN") that crosses the subject is the most powerful embed move — body occludes the middle letters, clean zones on both sides hold the outer letters, and the word reads as a title drop. **Use this whenever conditions allow.**
+
+### Conditions where a centered crown works
+
+Sample 3 frames, eyeball the subject's horizontal envelope across the clip. Let `body_x_min / body_x_max` = tightest horizontal bounds that contain the head+shoulders+arms in any frame.
+
+A centered crown at font size F (where `crown_width ≈ F × 0.55 × char_count`) reads as dramatic IF:
+
+1. **Subject is roughly centered**: `|body_center_x − frame_width/2| < frame_width × 0.10`. The body sits in the middle third.
+2. **Clean zones on both sides are non-trivial**: `body_x_min > frame_width × 0.15` AND `body_x_max < frame_width × 0.85`. There's ≥15% of frame width clean on each side.
+3. **The crown word is wide enough to poke out both sides**: `crown_width > body_width + 400px`. If the word ends before reaching the body's right edge, most letters just get swallowed — ugly.
+
+If all three hold, centered crown is right. Go big — font sized so the word spans `0.8 × frame_width` or more. "BEATLES" at 140px (~500px wide) fails condition 3 on an 1920 frame with Jobs-sized body (780px wide). "WIMBLEDON CHAMPION" at 140px (~1700px) on the same frame passes easily.
+
+### When center fails — move crown to the clean zone
+
+If any of the three conditions fails, center-stage eats too much and the word becomes illegible ("THE BEATLES" → "THE" and a sliver of "S"). Two strategies:
+
+**Option A — shrink crown to fit cleanly in the larger clean zone.** Pick the side opposite the subject's bias. Compute `clean_zone_width` on that side. Pick crown font such that the word wraps to 1-2 lines inside it. Tail letters can touch the subject edge for a hint of embed, but the body of the word lives on backdrop.
+
+```
+// Jobs: subject center ≈ x=1100 (right of frame center 960). Left clean zone is larger.
+crown_plane: { left: 200, width: 560, text-align: center }
+font-size: 118px  →  "THE / BEATLES" wraps to 2 lines, fits in x=230-770
+                      leaving "S" tail at x~760 lightly touching Jobs's shoulder
+```
+
+**Option B — drop the crown entirely, promote the word to `emph` in the main column.** Simpler when the phrase doesn't deserve dramatic center-stage treatment. Works fine for 2-word emph like "the Beatles" or "incredible things" — they become large bold text in the left column with body occluding their tails.
+
+### Rules of thumb for choosing
+
+| Subject occupies center X%+ of frame | Clean zones L/R          | Crown approach                                  |
+| ------------------------------------ | ------------------------ | ----------------------------------------------- |
+| < 50%, roughly centered              | both ≥ 15% of width      | Centered crown, go BIG (frame_w × 0.8+)         |
+| 50-70%, slightly offset              | one side ≥ 25%           | Crown shifted to larger clean zone              |
+| > 70%, fills most of frame           | neither side wide enough | Drop crown, use `emph` in column                |
+| Close-crop face, fills > 80%         | essentially none         | No crown. All captions in a header/footer strip |
+
+## Step 4: Respect these invariants
+
+1. **Never cover the eyes.** Eye bbox is sacred. Add 20px margin around it when checking caption bbox intersection.
+2. **Caption bbox must not exit frame.** Reserve 4% broadcast-safe margin on all edges.
+3. **Large emphasis words should have horizontal slack.** At `cap-emph` (92px), an 8-char word ≈ 580px. Plane needs ≥ 620px width OR rely on wrapping at 2 lines.
+4. **Crown lives at `top ≈ shoulder_top − crown_font_size/2`** so it sits across the upper body, not the face.
+5. **If aspect ratio is portrait (9:16), rotate layout**: wall-plane becomes a **top band** (full width, height ≈ 20%), crown goes below it if used at all.
+
+## Step 5: Validate before render
+
+Before calling `render-and-composite.sh`, sanity check:
+
+- Did you place the plane in the opposite quadrant from the face? ✓
+- Does the plane exit the frame anywhere? If yes, shrink.
+- Is the font too big for the plane width? Calculate: longest word in words[] × 0.55 × font_size < plane_width - padding\*2.
+- For `corner-column-crown`, did you set `crown_position.top` so the crown actually crosses the body (not above the head, not below the torso)?
+- **Pillarbox / letterbox hard check.** If the source has black bars (see pre-flight probe in SKILL.md), compute `leftmost_text_x` using the correct formula for the text alignment:
+
+  | Alignment                   | Formula                                            |
+  | --------------------------- | -------------------------------------------------- |
+  | Left-aligned                | `plane_left + padding_left`                        |
+  | Right-aligned (main column) | `plane_right − padding_right − longest_word_width` |
+  | Center-aligned (crown)      | `plane_center − longest_word_width / 2`            |
+
+  Where `longest_word_width ≈ font_size × char_count × 0.55` (adjust 0.55 down to ~0.50 for italic, up to ~0.62 for uppercase bold). **All** of these must be ≥ `pillarbox_left_edge + 10–20px` (safety margin). Mirror for the right bar.
+
+  **Gotcha from past iteration**: setting `plane_left = 180` with a right-aligned column on a Jobs 60 Minutes clip (pillarbox at 280) looked "inside the plane" but the right-aligned text at font 108px produced `leftmost = plane_right − padding − 468 = 180 + 700 − 36 − 468 = 376` … wait, that IS past pillarbox. The actual bug was different: for a 3-line wrap ("four very / talented / guys") the widest line is "talented" at ~468px, not the whole phrase. Compute against the longest **single line** after wrap, not total phrase width.
+
+  **Re-check after font-size changes** — bumping font 84→104 shifts right-aligned text leftward by ~30px. If the budget was already tight, the bump blows through the pillarbox.
+
+  **Empirical target**: leftmost text at pillarbox + 10-20px looks "anchored" to the bar (visually grounded). Pushing it much deeper (50px+) makes captions feel floaty in the middle of the frame.
+
+## Worked examples
+
+### memory-wall (1280×720, acoustic foam wall)
+
+```json
+{
+  "template": "wall-embed",
+  "wall_position": {
+    "top": 40,
+    "right": 30,
+    "width": 720,
+    "height": 520,
+    "rotateY": -13,
+    "rotateX": 1
+  }
+}
+```
+
+### champion (1920×1080, bookshelf backdrop)
+
+```json
+{
+  "template": "corner-column-crown",
+  "wall_position": { "top": 40, "left": 40, "width": 720, "height": 420, "rotateY": 4 },
+  "crown_position": { "top": 440 }
+}
+```
diff --git a/.claude/skills-media/embedded-captions/references/motion-vocabulary.md b/.claude/skills-media/embedded-captions/references/motion-vocabulary.md
new file mode 100644
index 000000000..77cc1e026
--- /dev/null
+++ b/.claude/skills-media/embedded-captions/references/motion-vocabulary.md
@@ -0,0 +1,148 @@
+# Motion Vocabulary — named word-entry moves
+
+10 motion primitives the skill uses. Each has a specific timing + easing + situational fit. Agent picks by **content tone**, not default to one.
+
+**Easing philosophy:** `cubic-bezier(.2,.7,.2,1)` is the "considered confident" default. `linear` is almost always wrong. Back-easing (elastic) is for playful content only — never documentary.
+
+**Exit rules:** Default exit is the same tween reversed at 60% duration. Never exit with a different motion than entry unless doing a rhetorical pivot. Never fade out during speech — only during the gap between phrases.
+
+---
+
+## The 10 moves
+
+### 1. typewriter
+
+Char-by-char reveal, 25–35ms/char, linear easing. Documentary / data-heavy / tense / interrogative.
+
+```js
+// GSAP
+words.forEach((w, i) => {
+  const chars = w.textContent.split("");
+  w.textContent = "";
+  chars.forEach((c, j) => {
+    const span = document.createElement("span");
+    span.textContent = c;
+    span.style.opacity = 0;
+    w.appendChild(span);
+    tl.to(span, { opacity: 1, duration: 0 }, wordStart + j * 0.028);
+  });
+});
+```
+
+### 2. word-fade-up (DEFAULT)
+
+Per-word, 80ms stagger, `opacity 0→1 + translateY 8→0`, `cubic-bezier(.2,.7,.2,1)` (ease-out). Default for conversational content.
+
+```js
+tl.fromTo(
+  word,
+  { opacity: 0, y: 8 },
+  { opacity: 1, y: 0, duration: 0.45, ease: "power2.out" },
+  wordStart,
+);
+```
+
+### 3. word-pop
+
+Per-word, 60ms stagger, `scale 0.85→1 + opacity 0→1`, elastic-light `cubic-bezier(.34,1.56,.64,1)`. Energetic / YouTube-vlog / high-tempo. **Never for documentary.**
+
+### 4. swipe-reveal
+
+Whole phrase at once, 400ms, `clip-path inset 0 100% 0 0 → 0 0 0 0`, expo `cubic-bezier(.77,0,.175,1)`. Keynote / tech product / announcement.
+
+```css
+.cap {
+  clip-path: inset(0 100% 0 0);
+}
+/* animate to inset(0 0 0 0) */
+```
+
+### 5. drop-and-settle
+
+Per-word, 120ms stagger, `y: -30→0` with back-bounce `cubic-bezier(.68,-.55,.27,1.55)`. Playful but controlled. **Not for documentary.**
+
+### 6. etch
+
+Whole word at once, 600ms, opacity ramp `0→1` with slight blur→sharp transition. Ease-in-out. Poetic / lyrical / "quote on wall" direction.
+
+### 7. crosshair
+
+Per-word, 200ms total: two 1px lines converge on word center (linear 150ms), then word snaps in (expo-out 50ms). Thriller / investigative doc.
+
+### 8. breathing-hold
+
+**Static but alive.** No entry animation. Once visible, micro-scale loop `1.00↔1.008` over 2s, sine ease. Used on climax lines held 1.5s+.
+
+### 9. cascade
+
+Each word from alternating direction: L, R, L, R. `translateX: ±40→0`, ease-out 300ms. **Rhythm-break move** — use sparingly, once per 30s max.
+
+### 10. burn-in
+
+**Zero animation.** Sudden 1-frame opacity 1. No fade, no transform. Interview-doc style. Use for every 6–8th phrase in a documentary direction for variety (Standard mode; see direction-catalog §1).
+
+---
+
+## Tone → timing lookup table
+
+| Tone           | Stagger                   | Hold        | Entry move                         |
+| -------------- | ------------------------- | ----------- | ---------------------------------- |
+| documentary    | 150ms                     | 600ms       | burn-in (70%) + word-fade-up (30%) |
+| conversational | 80ms                      | 400ms       | word-fade-up                       |
+| energetic      | 50ms                      | 300ms       | word-pop                           |
+| poetic         | 250ms                     | 1200ms      | etch                               |
+| broadcast      | 0 (burn-in)               | BBC timings | burn-in                            |
+| investigative  | 25ms/char                 | 500ms       | typewriter                         |
+| keynote        | 0 per-word (phrase swipe) | 600ms       | swipe-reveal                       |
+
+Agent picks tone → this table → GSAP parameters. Data, not guesswork.
+
+---
+
+## Per-word vs per-phrase animation axis
+
+Orthogonal to the 10 moves above.
+
+- **Per-word animation** (default): each word enters at its `w.start` timestamp. Tight sync with speech.
+- **Per-phrase animation**: whole group enters/exits at `g.in`/`g.out`. Words appear together. Used for:
+  - swipe-reveal moves
+  - burn-in (no animation, but the "reveal" is a group event)
+  - title cards / chapter breaks
+
+Rule: per-word for content that tracks speech; per-phrase for moments that step outside the speech flow.
+
+---
+
+## Stagger breakdown by context
+
+Fine-tune stagger within a tone:
+
+- **Documentary dialog**: 150ms (measured)
+- **Documentary punchline**: 250ms (weighted)
+- **Vlog opener**: 50ms (fast hook)
+- **Vlog narration**: 70ms (conversational but snappy)
+- **Poem / lyric**: 250–400ms per word, with 500–1000ms gaps between phrases
+- **Keynote hero**: per-phrase only (stagger = N/A)
+- **Interview name card**: 0 stagger (static)
+
+---
+
+## Anti-patterns (banned, from anti-patterns.md)
+
+- Animating `letter-spacing` → reflow
+- Animating `filter:blur` → reflow + can wash out text
+- `Math.random()` / `Date.now()` in timeline → non-deterministic render
+- Entries under 100ms total → frantic, unreadable
+- Same motion for every group for 30s+ → eye adapts, stops registering
+
+---
+
+## When to break the vocabulary
+
+The 10 moves are a comfortable coverage, not a ceiling. For Standard mode, invent new moves when the scene demands it:
+
+- Kyle Cooper's scratched typewriter for noir
+- K-pop lyric's directional word-from-side
+- Film-title flash-cut burn-in with chromatic aberration
+
+When inventing: stay deterministic, stay transform+opacity only, state the motion in terms of the 4 axes (entry, hold, exit, stagger).
diff --git a/.claude/skills-media/embedded-captions/references/rail.md b/.claude/skills-media/embedded-captions/references/rail.md
new file mode 100644
index 000000000..580380bab
--- /dev/null
+++ b/.claude/skills-media/embedded-captions/references/rail.md
@@ -0,0 +1,68 @@
+# Rail track — standard lower-third subtitle
+
+The **default** caption track and the workhorse: a clean, readable subtitle that sits **in
+front** of everything (never occluded by the matte) in the lower third. It carries **most**
+of the transcript. It is deliberately **plain** — the cinematic craft (planes, occlusion,
+Vogue-masthead, accumulation) lives in the _embed_ track only ([composition-craft.md](composition-craft.md)).
+
+For talking-head / explainer / voiceover, the typical output is **the whole transcript on the rail**
+with only the climax(es) promoted to embed. Rail is not a fallback — it's the baseline.
+
+> **Implementation note.** A dedicated rail renderer is the next build step. The rail is a
+> plain `fg` caption track and maps cleanly onto hyperframes' native caption pipeline
+> (`media-use` captions) — prefer reusing that over hand-rolling. Until wired, render
+> the rail as a simple `data-caption-layer="fg"` composition (no matte overlay for these caps).
+
+## Position & safe area
+
+- **Lower third, horizontally centered.** Landscape (16:9): baseline ~80–120px above the
+  bottom edge. Portrait (9:16): lower-middle, ~ 600–700px from the bottom (clear of platform UI).
+- **Title-safe margins:** keep text within ~90% width / inside any letterbox-pillarbox bars
+  (see the letterbox probe). Never flush to the frame edge.
+- **One caption group on screen at a time.** No accumulation, no cascade — that's embed-track behaviour.
+- It rides above the subject; the matte does **not** occlude it (rail = in front).
+
+## Lines, length, timing
+
+- **≤ 2 lines.** Broadcast target ~ 32–42 chars/line; break at a clause/phrase boundary, never
+  mid-word, never leave a dangling 1-word line.
+- **Word-synced.** Each group's window envelops its words (`group.in ≤ first word.start`,
+  `group.out ≥ last word.end`); each group ≥ 0.5s on screen; ~1.5s min gap discipline so it
+  doesn't strobe. Word timings within 80ms of transcript (same gate as everywhere).
+- **Grouping** = short readable phrases (see [caption-grouping.md](caption-grouping.md)) — not the
+  embed track's "phrase = composition" rule; here it's just legible subtitle chunking.
+
+## Look (restrained on purpose)
+
+- **Size: ~`calc(0.045 * var(--h))`** (≈48px @1080, ≈58px @1290) — readable, _not_ hero. The rail is a subtitle; it is deliberately much smaller than the embed body/climax. Express as a `var(--h)` fraction (never hardcode px) so it scales across resolutions. The embed climax is sized to the frame independently (see composition-craft § POP) — **never** size the climax as a multiple of this rail.
+- One clean sans (Inter / Helvetica Now / Neue Haas), weight 500–600; white (or near-white).
+- **Legibility without grading the video:** a tight text treatment local to the glyphs only —
+  a soft dark drop-shadow, or a subtle rounded gradient pill / 30–40% scrim **sized to the text
+  box** (not a full-frame bar, never a frame-wide grade). On luminance > 180 backgrounds, keep
+  the scrim; never rely on bare light text.
+- Motion is minimal: 150–250ms fade-up in / fade-down out. No glitch, no scale-pop, no per-word
+  choreography on the rail — that energy is reserved for embed.
+
+## The `emphasis` flag (active-word highlight)
+
+The only intensity the rail carries. When a word is graded `emphasis` (the 1–2 punch words in a
+phrase), give it an **inline** lift on the rail — accent colour and/or +weight, optionally a
+karaoke-style active-word pop (≤1.1× scale) as it's spoken. Keep it inline; it does **not**
+leave the rail. Anything that wants to leave the rail is an `embed`, not an emphasis.
+
+## What the rail never does
+
+- Never goes behind the subject (that's embed).
+- Never accumulates into a multi-line poem (that's embed).
+- Never crosses the face / uses occlusion as an effect.
+- Never grades or textures the underlying video.
+- Doesn't drop content to "fit fewer blocks" — split into more groups instead. The only drops
+  are filler (um/uh, exact stutters, self-corrections); dense conversational `narrator` glue
+  ("you know", "sort of") may be trimmed for readability, content/structure words stay.
+
+## Hand-off to embed
+
+Rail + embed coexist in one render: the rail runs the whole clip; an embedded peak appears over
+it at its moment (the rail can briefly clear or dim under the embed if they'd collide). Decide
+which phrases promote via the role read in SKILL.md § Caption model; author the promoted ones
+with [composition-craft.md](composition-craft.md).
diff --git a/.claude/skills-media/embedded-captions/references/reference-bar.md b/.claude/skills-media/embedded-captions/references/reference-bar.md
new file mode 100644
index 000000000..57be3c858
--- /dev/null
+++ b/.claude/skills-media/embedded-captions/references/reference-bar.md
@@ -0,0 +1,47 @@
+# The reference bar — what world-class looks like
+
+Self-review without an external bar always passes. Before shipping, hold the render
+against these references — not "is anything broken" (the gates did that) but "would a
+designer at these houses sign it".
+
+## Per register
+
+**premium-warm / editorial (cream, editorial)** — the bar is a _Vogue cover_ and the
+A24 title card: type interacts with the subject (masthead behind the head), one or two
+sizes feel chosen not defaulted, the frame would work printed as a poster. Check: does
+the climax frame, screenshotted alone, look like a designed cover — or like a subtitle
+that grew?
+
+**tech-premium (keynote, ink)** — the bar is an _Apple keynote slide_ over footage:
+opaque, weighty, dead-center confidence; negative space is doing the work; nothing
+decorating. Check: would this frame look at home in a WWDC sizzle?
+
+**formal (documentary)** — the bar is _Errol Morris / PBS Frontline_: the type has the
+restraint of a court document; stillness reads as authority. Check: does ANY motion call
+attention to itself? If yes, cut it.
+
+**loud** — the bar is a _k-pop lyric video / Nike spot_: type fights the subject and
+wins on purpose, color is saturated and scene-true, the beat hits WITH the word. Check:
+does the hero frame make you want to replay it?
+
+## The five positive checks (run on the preview sheet, after the failure checks)
+
+1. **Poster test** — screenshot the climax frame alone. Would you post it as a still?
+   If it needs the motion to excuse the composition, the composition isn't done.
+2. **Timid test** — is any body caption apologizing (tiny, corner-parked, far from the
+   silhouette)? Small is a choice; timid is a default. Hug the subject or commit to the
+   margin as a designed column.
+3. **One-glance hierarchy** — at thumbnail size (shrink the sheet), can you still tell
+   opener / body / hero apart? If the tiers blur together, the contrast ratios are off.
+4. **Scene handshake** — name three ways the type acknowledges THIS footage (accent
+   sampled from the scene, occlusion crossing, shadow direction, depth blur, palette
+   temperature). Fewer than two = it's a sticker, not an embed.
+5. **Dead-air audit** — scrub the no-caption stretches. Are they _composed rests_
+   (subject carries the frame) or _gaps_ (the design just stopped)? Rests are earned by
+   rhythm; gaps are bugs in pacing.
+
+## How to use with fresh-eyes review
+
+Give the sub-agent the preview sheet + the 5 failure checks (SKILL.md § Visual QA) +
+these 5 positive checks, and ask for verdicts on both lists. A render ships when it
+passes the failure checks AND at least 4/5 positive checks with specific evidence.
diff --git a/.claude/skills-media/embedded-captions/references/scene-types.md b/.claude/skills-media/embedded-captions/references/scene-types.md
new file mode 100644
index 000000000..aaef1853c
--- /dev/null
+++ b/.claude/skills-media/embedded-captions/references/scene-types.md
@@ -0,0 +1,94 @@
+# Scene Types — picking the right template
+
+The three templates differ in one thing: **what surface (if any) the text physically sits on**. Pick by reading the scene, not by the genre label.
+
+## wall-embed — "text is printed on a real surface"
+
+Original Memory Wall render used this. Text uses perspective transform + `mix-blend-mode: overlay` to look like it was silk-screened onto a wall behind the subject. The illusion is strong when it works and completely broken when forced.
+
+### Four conditions — ALL must hold
+
+1. **A flat or near-flat surface exists somewhere in the frame, larger than the caption block.** Good: acoustic foam panel, painted wall, door, stone facade, large backdrop cloth, blackboard. Bad: bookshelf (3D depth + decorative items), mic shield (too small), window (transparent, content behind it shifts), brick wall with mortar patterns (competes).
+2. **The surface is at a non-zero angle to the camera.** Perspective is what sells "embedded". If the wall is perfectly parallel (0° rotation relative to camera), pasting rotateY:0 text onto it looks like a sticker, not embedded. Memory Wall's foam wall was tilted ~13° — perfect. A wall directly behind a centered frontal subject usually has no exploitable angle.
+3. **The surface is mid-luminance.** Overlay blend neutralizes mid-tones — text keeps contrast against a mid-grey wall. On near-black surfaces (luminance < 60), overlay makes text vanish → switch to `mix-blend-mode: screen`. On near-white surfaces (> 180), overlay also fails → switch to `mix-blend-mode: normal` with opaque color.
+4. **The surface has no competing graphical content.** Plain paint, uniform acoustic foam, blurred OOF background all work. Printed wallpaper, picture frames, text on signage, busy bookshelves all compete with the caption and ruin the embed illusion.
+
+If **any** condition fails, **do not use wall-embed**. Pick another template.
+
+### What memory-wall looked like
+
+The acoustic foam wall to the right of the subject took ~40% of frame width, tilted ~13° toward the viewer, mid-grey color, uniform dimpled texture. Perfect. Text with `rotateY(-13deg)` and overlay blend sat on it like printed letters.
+
+### Anti-examples (wall-embed would FAIL)
+
+- **champion / demo1_avatarv** — bookshelf background with books, white vases, picture frames. Cluttered + 3D depth. Fails condition 1 and 4. Used corner-column-crown instead.
+- **Jobs 60 Minutes** — blurry potted plant background. No flat surface at all. Fails condition 1.
+- **Randy Pausch "Time is all we have"** — completely black backdrop. No perspective to exploit, no mid-tone surface. Fails 2 and 3. Used portrait-header.
+- **Any vlog / selfie with handheld camera** — surface moves frame-to-frame, can't lock perspective. Even if conditions 1-4 hold briefly, motion breaks the illusion.
+
+## corner-column-crown — "text sits in a clean region next to the subject"
+
+The default for most talking-head content. Works when wall-embed doesn't.
+
+### Conditions
+
+1. **Single subject, fixed camera.** Handheld is tolerable if drift is small.
+2. **At least one clean zone (≥ 15% of frame width) to the left or right of the subject** where captions can sit without continuous body occlusion.
+3. **Background can be cluttered or 3D** — we're not relying on a flat surface, just readable contrast. Screen blend mode picks up darker backgrounds (bookshelves, dark walls) naturally.
+4. **Landscape aspect** (16:9 or similar). For portrait, use `portrait-header`.
+
+### When to add the crown vs when to skip it
+
+- Add crown if there's a natural "title drop" line — the one phrase that lands the story (e.g. "WIMBLEDON CHAMPION", "BEATLES", "SHARP AGAIN"). Check [layout-heuristics.md § Crown placement](layout-heuristics.md) for the three geometric conditions.
+- Skip crown for factual / neutral monologues where no phrase carries the climax. Short videos (<10s) often don't need it.
+
+## portrait-header — "subject fills center, text lives in top banner"
+
+For 9:16 aspect where the subject inevitably fills the middle.
+
+### Conditions
+
+1. **Portrait aspect** (9:16, 1080×1920 etc.).
+2. **Subject occupies the vertical middle of frame**, leaving ~15-25% of the frame height clear at the top.
+3. **Optional crown at bottom** — only works if there's also clean space beneath the subject's waist, which is rare in close-crop portrait.
+
+### What to watch
+
+- Subject's head top often approaches y=40 — top banner captions at `top: 30px` will get partially occluded by hair. Accept the partial occlusion (it reads as embed) or bump the caption size down to clear the hair.
+- If the subject already has **baked-in captions** (like the burned-in subtitles test case with yellow subtitles burned in), the skill should refuse — two caption systems compete.
+
+## Quick decision flow
+
+```
+START
+  │
+  ├─ Aspect is 9:16 / portrait?
+  │    ├─ YES → portrait-header
+  │    └─ NO ──▼
+  │
+  ├─ Does the scene have a flat uniform surface that passes
+  │  ALL 4 wall-embed conditions?
+  │    ├─ YES → wall-embed
+  │    └─ NO ──▼
+  │
+  ├─ Single subject + fixed camera + ≥15% clean zone on one side?
+  │    ├─ YES → corner-column-crown
+  │    └─ NO ──▼
+  │
+  └─ Refuse with reason:
+     "No flat surface for embed, no clean caption zone for column.
+      Suggest a classic lower-third instead."
+```
+
+## Mode checklist (run this before committing to wall-embed)
+
+Read 3 frames (start, mid, end). For each, honestly answer:
+
+- [ ] Is there a single surface behind/beside the subject that occupies ≥ 30% of the frame?
+- [ ] Is that surface relatively flat (not curved, not 3D-stacked shelving)?
+- [ ] Does that surface angle at 5-20° to the camera (not perfectly parallel, not warped)?
+- [ ] Is the surface mid-luminance (not near-black like dark bookshelves, not near-white like a sunny window)?
+- [ ] Does the surface contain NO printed/decorative elements that compete with caption text?
+- [ ] Does the surface remain visible across all 3 frames (subject doesn't step in front of it)?
+
+**Need all six YES to use wall-embed.** Even one NO → step down to corner-column-crown or portrait-header.
diff --git a/.claude/skills-media/embedded-captions/references/test-set.md b/.claude/skills-media/embedded-captions/references/test-set.md
new file mode 100644
index 000000000..35825a34f
--- /dev/null
+++ b/.claude/skills-media/embedded-captions/references/test-set.md
@@ -0,0 +1,66 @@
+# Test set — diverse scenes for template stability regression
+
+Canonical test corpus for verifying templates don't regress when we add
+features. Pick cases that stress different parts of the pipeline — blend
+mode, matte quality, baked-in graphics, luminance extremes, motion.
+
+## The test set
+
+All in `~/Downloads/heygen_relevant_videos/` (720×1290, ~8s, 9:16). Add
+landscape + 1:1 as we grow.
+
+| Case            | Scene                                                                      | Stress test                                                                          |
+| --------------- | -------------------------------------------------------------------------- | ------------------------------------------------------------------------------------ |
+| `Sunset_Stroll` | Outdoor selfie at sunset, palm trees, boardwalk                            | **Bright backdrop** → default `screen` blend fails; needs dark text + `normal` blend |
+| `Nature_Vibe`   | Forest golden-hour + **baked timestamp** bottom-left + watermark top-right | Baked graphics avoidance; warm-mid luminance                                         |
+| `Gym_Grind`     | Dark gym + dark tank top + phone-mirror selfie                             | **Low luminance** → matte difficulty; screen blend natural fit                       |
+| `AI_Insights`   | Podcast studio + neon "THE DIALOG" sign + window view                      | **Competing graphics in BG** (sign, city skyline); mid-tone                          |
+| `Kitchen_Buzz`  | Warm kitchen, apron, smiling                                               | Baseline friendly case                                                               |
+| `Tech_Trends`   | Clean white studio + mic                                                   | **Max bright backdrop** — needs dark text or opaque BG                               |
+| `Street_Talk`   | Walking city street, handheld                                              | Handheld motion + bright outdoor                                                     |
+| `Outdoor_Hype`  | Forest + **Instagram watermark** top + sun flare                           | Baked graphic + bright + motion                                                      |
+
+## Usage
+
+```bash
+for case in Sunset_Stroll Nature_Vibe Gym_Grind AI_Insights; do
+  bash scripts/render-and-composite.sh /tmp/ts-${case}
+done
+```
+
+## Regression checklist
+
+For every new template or significant change, re-run the test set and
+verify:
+
+- [ ] Sunset_Stroll: captions legible on bright sunset (Cinematic cream/screen washes out → use **Standard mode**, opaque rail)
+- [ ] Nature_Vibe: captions don't collide with baked timestamp (bottom-left) or watermark
+- [ ] Gym_Grind: captions visible on dark gym despite dark subject
+- [ ] AI_Insights: captions don't fight with "THE DIALOG" neon sign
+- [ ] Tech_Trends: dark text + `normal` blend on pure white studio
+- [ ] Each case: 0.5s+ per caption, no wrap-into-subject-head-zone
+- [ ] Each case: FG layer for 9:16 portraits where subject fills frame
+
+## Bugs we've fixed via this test set
+
+- **2026-04-23**: Hardcoded `text-shadow: warm-glow + dark-drop` in all
+  templates ignored `cap_color` — dark text got overwhelmed by bright
+  halo on bright backgrounds. Fix: `TEXT_SHADOW` placeholder with
+  luminance-adaptive default.
+- **2026-04-23**: Hardcoded `filter: brightness(1.12)` lightened dark
+  text, shifting it toward neutral. Fix: `TEXT_FILTER` placeholder that
+  drops brightness boost for dark colors.
+- **2026-04-23**: `BLEND_MODE` and `CAP_COLOR` hardcoded in new
+  templates — plan.json overrides ignored. Fix: placeholders added to
+  all 4 templates.
+
+## Expansion plan
+
+Still need to add:
+
+- 1 × 16:9 landscape (from any heygen_relevant via letterboxing, or new source)
+- 1 × 1:1 square (if available)
+- 1 × multi-speaker (speaker diarization test)
+- 1 × foreign language (CJK rendering test)
+- 1 × shot-cut (PySceneDetect-required case)
+- 1 × product/B-roll (no talking head — refuse gate)
diff --git a/.claude/skills-media/embedded-captions/references/typographic-moves.md b/.claude/skills-media/embedded-captions/references/typographic-moves.md
new file mode 100644
index 000000000..d03af299f
--- /dev/null
+++ b/.claude/skills-media/embedded-captions/references/typographic-moves.md
@@ -0,0 +1,266 @@
+# Typographic moves — a palette, not a cage
+
+`cinematic-cream` template locks DNA only (font-family, motion, color
+palette defaults). It does NOT enforce slot structure. The agent writes
+each caption group's typography from scratch via the plan.json `css`
+field.
+
+This doc is a **palette** of tried combinations — pick what fits the
+scene, invent new ones, skip these if the content demands. These are
+recommendations, not rules.
+
+## Size vs text length — DO THIS BEFORE PICKING SIZE
+
+Bigger is NOT better if the word doesn't fit the frame width. Every time
+you pick a font-size, sanity-check against word length:
+
+**Rough rule for Inter 900 uppercase at -0.03em tracking:**
+`max_font_px ≈ frame_width / (longest_word_chars × 0.72)`
+
+The 0.72 multiplier is intentionally conservative — it targets the text
+filling ~90% of the frame width so there's a small side margin. If you
+want edge-to-edge, drop to 0.65, but you lose a bit of safety margin.
+
+720px portrait:
+
+- 3-char word (15%): max ~330px (a single big number like "15%")
+- 5-char word (TAKE): max ~200px
+- 7-char word (AUGMENT / QUANTUM / MATTERS): max ~143px
+- 10-char word (CREATIVITY): max ~100px
+- 13-char word (UNPRECEDENTED): max ~77px
+
+1920px landscape:
+
+- 7-char word: max ~380px
+- 10-char word: max ~267px
+
+For italic/upright 500-700 it's slightly narrower — increase max by ~10%.
+
+**If you want the word bigger than it fits:**
+
+- Split into multiple words per group (natural wrap), OR
+- Add explicit `<br>` between syllables, OR
+- Drop letter-spacing to -0.05em, OR
+- Accept that the matte will cut part of it (Vogue-cover embed effect —
+  only works when the cut area is exactly where the subject is)
+
+Never let the text OVERFLOW the frame edge — that's not cinematic, that's
+just broken. Use the heuristic.
+
+## Sizing discipline (frame-height-relative)
+
+Portrait 9:16 (720×1290) and landscape 16:9 (1920×1080) have very
+different comfort ranges. Use `calc(<pct> * var(--h))` for responsive:
+
+| Feel                   | % of frame height | Example calc            |
+| ---------------------- | ----------------- | ----------------------- |
+| Whisper / label        | 4-6%              | `calc(0.05 * var(--h))` |
+| Soft opener            | 6-9%              | `calc(0.07 * var(--h))` |
+| Narrative body         | 9-14%             | `calc(0.11 * var(--h))` |
+| Emphasis               | 14-22%            | `calc(0.18 * var(--h))` |
+| Climax / monumental    | 22-35%            | `calc(0.28 * var(--h))` |
+| Title-bigger-than-face | 40%+              | `calc(0.48 * var(--h))` |
+
+Use absolute px only when a specific scale needs to look identical
+across frame sizes (rare). Prefer `calc` + `var(--h)`.
+
+## Named moves — pick per group
+
+**Italic contemplative opener** (memory-wall cap-1 lineage):
+
+```css
+font-weight: 600;
+font-style: italic;
+letter-spacing: -0.01em;
+font-size: calc(0.075 * var(--h));
+```
+
+**Italic continuation / dreamier continuation** (cap-2 lineage):
+
+```css
+font-weight: 500;
+font-style: italic;
+letter-spacing: -0.005em;
+font-size: calc(0.065 * var(--h));
+```
+
+**Upright pivot / statement** (cap-3 lineage — "but suddenly"):
+
+```css
+font-weight: 700;
+letter-spacing: -0.015em;
+font-size: calc(0.07 * var(--h));
+```
+
+**Uppercase climax / monumental** (cap-4 lineage — "EVERYTHING IS SHARP AGAIN"):
+
+```css
+font-weight: 900;
+text-transform: uppercase;
+letter-spacing: -0.03em;
+line-height: 0.95;
+font-size: calc(0.18 * var(--h));
+```
+
+**Chapter card / full-frame Adam Curtis manifesto**:
+
+```css
+font-weight: 700;
+text-transform: uppercase;
+letter-spacing: -0.015em;
+line-height: 0.9;
+font-size: calc(0.14 * var(--h));
+```
+
+**News chyron / broadcast label** (small, locked):
+
+```css
+font-weight: 500;
+letter-spacing: 0.02em;
+font-size: calc(0.038 * var(--h));
+```
+
+**Tiny side note / caption-on-surface**:
+
+```css
+font-weight: 400;
+font-style: italic;
+font-size: calc(0.045 * var(--h));
+```
+
+**Vogue-masthead monumental**:
+
+```css
+font-weight: 900;
+text-transform: uppercase;
+letter-spacing: -0.04em;
+line-height: 0.85;
+font-size: calc(0.32 * var(--h));
+```
+
+## Narrative arcs (suggestions, not required)
+
+**Poem arc** — memory-wall canonical: italic opener → italic continuation
+→ upright pivot → uppercase climax. Four steps.
+
+**Question-answer arc**: italic question small → uppercase answer big.
+Two steps.
+
+**List-of-three arc**: three equal-weight narration segments, one
+climactic uppercase. Four steps.
+
+**Single-statement arc**: one monumental uppercase held long. One step.
+
+**Whisper-hook arc** (short-form): tiny italic hook → massive uppercase
+reveal. Two steps.
+
+The **number** of groups comes from the **content**. A 25s Pausch talk
+has ~8 beats. A 7s TikTok hook has 2-3 beats. Don't force 4 or 5 or 7 —
+read the transcript and mark breath-groups.
+
+## Position + layer vocabulary
+
+**Position** is where the caption lives in frame. Use:
+
+- `top / left / right / bottom` (percentages or px) for anchor
+- `transform: translateX/Y` for fine offsets
+- `text-align: center / left / right` for alignment
+
+**Layer** per group:
+
+- `bg` (default) — behind subject. Matte occludes. Cinematic embed. Works
+  on clean zones (sky, walls) OR intentionally crosses subject for the
+  Vogue-masthead effect.
+- `fg` — on top of subject. Announcement. Use for climax breakthroughs or
+  when bg would be 100% occluded by body.
+
+**Tone** per group:
+
+- `soft` — gentle per-word opacity+y drift (0.45s power2.out). Use for
+  introspective, dreamy, or narrative content.
+- `present` — snappy per-word opacity+y+scale pop (0.22s power3.out). Use
+  for emphatic or declarative beats.
+
+## Anti-patterns the DNA protects against
+
+The DNA defaults prevent most ugly outcomes. But avoid in per-group CSS:
+
+- Multiple different `font-family` within one video (DNA is one family)
+- Multiple saturated colors (one accent at most; DNA defaults cream or
+  deep warm)
+- `letter-spacing` above ±0.05em unless there's a specific reason
+- `font-weight` 300 or below — too light for screen
+- `font-style: italic` on emphasis — italic is for lyricism, not stress
+
+## When cinematic-cream is wrong
+
+This DNA assumes mid-to-dark backgrounds (luminance 60-180). For:
+
+- Bright white studios → cinematic-cream's cream + `screen` washes out, and the DNA is
+  **locked** (you cannot recolour it) → use **Standard mode** (opaque rail) instead
+- Documentary formal → Standard mode (documentary-dignified direction; see references/direction-catalog.md §1)
+- Energetic vlog hooks → future `kinetic-vlog` DNA (not yet shipped)
+
+## Example: memory-wall original, expressed in freeform
+
+Same output as the canonical memory-wall.html, but using slot-free plan:
+
+```json
+{
+  "template": "cinematic-cream",
+  "caption_layer": "bg",
+  "groups": [
+    {
+      "id": "cg-0",
+      "tone": "soft",
+      "in": 0.2,
+      "out": 4.85,
+      "css": "top: 14%; right: 6%; left: auto; text-align: right; font-size: calc(0.09 * var(--h)); font-weight: 600; font-style: italic; letter-spacing: -0.01em;",
+      "words": [
+        { "text": "Some", "start": 0.24, "end": 0.44 },
+        { "text": "memories", "start": 0.48, "end": 0.82 },
+        { "text": "feel", "start": 0.92, "end": 1.14 },
+        { "text": "soft", "start": 1.2, "end": 1.64 }
+      ]
+    },
+    {
+      "id": "cg-1",
+      "tone": "soft",
+      "in": 2.55,
+      "out": 4.85,
+      "css": "top: 26%; right: 10%; left: auto; text-align: right; font-size: calc(0.075 * var(--h)); font-weight: 500; font-style: italic;",
+      "words": [
+        { "text": "like", "start": 2.66, "end": 2.78 },
+        { "text": "old", "start": 2.88, "end": 3.02 },
+        { "text": "film", "start": 3.16, "end": 3.46 }
+      ]
+    },
+    {
+      "id": "cg-2",
+      "tone": "present",
+      "in": 4.9,
+      "out": 8.04,
+      "css": "top: 18%; right: 6%; left: auto; text-align: right; font-size: calc(0.085 * var(--h)); font-weight: 700;",
+      "words": [
+        { "text": "but", "start": 5.04, "end": 5.18 },
+        { "text": "suddenly", "start": 5.24, "end": 5.76 }
+      ]
+    },
+    {
+      "id": "cg-3",
+      "tone": "present",
+      "in": 6.7,
+      "out": 8.04,
+      "css": "top: 32%; right: 6%; left: auto; text-align: right; font-size: calc(0.11 * var(--h)); font-weight: 900; text-transform: uppercase; letter-spacing: -0.03em; line-height: 0.95;",
+      "words": [
+        { "text": "everything", "start": 6.82, "end": 7.14 },
+        { "text": "is", "start": 7.18, "end": 7.28 },
+        { "text": "sharp", "start": 7.32, "end": 7.52 },
+        { "text": "again", "start": 7.58, "end": 7.92 }
+      ]
+    }
+  ]
+}
+```
+
+Same visual, no slot constraint. Each group owns its typography.
diff --git a/.claude/skills-media/embedded-captions/references/typography-presets.md b/.claude/skills-media/embedded-captions/references/typography-presets.md
new file mode 100644
index 000000000..b44f26c77
--- /dev/null
+++ b/.claude/skills-media/embedded-captions/references/typography-presets.md
@@ -0,0 +1,63 @@
+# Typography Presets
+
+Five named styles corresponding to the `cap-*` CSS classes. Pick one per caption group in `plan.json` based on the line's semantic role.
+
+| style    | CSS                         | Use when                                                                                                                  |
+| -------- | --------------------------- | ------------------------------------------------------------------------------------------------------------------------- |
+| `intro`  | 66px italic 500             | First line, filler ("You know…", "So…"), contemplative openings. Low visual weight.                                       |
+| `phrase` | 78px upright 600            | Main statement clauses. Default for most lines.                                                                           |
+| `emph`   | 92px upright 800            | Lines with emotional peak or key achievement ("I've achieved incredible things").                                         |
+| `dream`  | 82px italic 700             | Aspirational / "was dreaming of…" style lines. Italic signals memory/imagination.                                         |
+| `crown`  | 140px upright 900 uppercase | **Only for the climax line.** Used in center-stage `crown-plane`. Maximum one per composition — ideally the last caption. |
+
+## Tone field
+
+Independent of style, each group has `tone`: `soft` or `present`.
+
+- **soft** — gentle fade + 8px y-drift entrance, `power2.out` ease. Feels floaty, nostalgic. Use for memory, intro, dream.
+- **present** — snappy 6px y + 1.04 scale pop, `power3.out`, transformOrigin center. Feels assertive, in-the-moment. Use for emphasis and crown.
+
+## Picking automatically
+
+Scan each group's words:
+
+1. Does it contain superlatives (incredible, best, only, never, always) or brand/proper nouns? → `emph` + `present`
+2. Does it start with discourse markers (you know, so, well, look) or is it short (≤3 words)? → `intro` + `soft`
+3. Does it reference dreams, hopes, memory, past tense verbs like "was dreaming"? → `dream` + `soft`
+4. Is it the final sentence-clinching line and feels like a title/headline? → `crown` + `present` (only one per video)
+5. Otherwise → `phrase` + (match the group's neighbors' tone; default `soft`)
+
+## Font-size scales with column width
+
+The `.cap-*` defaults in each template are tuned for a **~560px column** (the original champion composition). When the caption plane is wider than that, the fonts feel underweight — too much negative space around text. Scale up accordingly.
+
+| Plane width         | intro | phrase | emph | dream | crown (centered, full-frame) | crown (clean-zone only) |
+| ------------------- | ----- | ------ | ---- | ----- | ---------------------------- | ----------------------- |
+| 460-580 px (tight)  | 66    | 78     | 92   | 82    | 140                          | n/a                     |
+| 600-760 px (medium) | 78    | 108    | 128  | 100   | 220                          | 118                     |
+| 780+ px (wide)      | 90    | 128    | 150  | 116   | 260                          | 140                     |
+
+Notes:
+
+- Crown sizes assume landscape (1920×1080). For portrait 1080×1920, divide all crown sizes by 1.5.
+- "full-frame crown" = centered, designed to span `0.8+ × frame_width` and cross the subject's body. Use only when [layout-heuristics.md § Crown placement](layout-heuristics.md) conditions pass.
+- "clean-zone only crown" = crown positioned inside one clean zone, smaller font, tail letters lightly touch subject. Fallback when centered crown would eat too much.
+
+Also: if a plane's `rotateY` is non-trivial (say > 8°), effective visible width shrinks. Scale fonts up ~10% to compensate.
+
+## What NOT to do
+
+- Don't use more than **one crown** per render. The whole point is that it's a singular payoff.
+- Don't use `emph` on more than ~30% of groups. Emphasis loses meaning when everything is emphasized.
+- Don't pick `intro` for the main content just because the words are short. "I won" (2 words) is `emph` or `crown`, not `intro`.
+- Don't mix `soft` and `present` alternately for no reason. Tone should follow the story arc: soft opening → present build → emph peak → (optional crown climax).
+
+## When scene luminance affects color choice
+
+The default color is warm bone-white (`#fff5df`). Adjust in the template CSS:
+
+- Wall is mostly warm wood / tan → keep default, or shift cooler `#e8f0ff`
+- Wall is cool blue / tech-lab → push warmer `#fff0c0`
+- Wall has strong primary color → desaturate default, luminance first
+
+These adjustments happen in the HTML template, not plan.json. If you repeatedly need different palettes, make new template variants.
diff --git a/.claude/skills-media/embedded-captions/scripts/audio-envelope.cjs b/.claude/skills-media/embedded-captions/scripts/audio-envelope.cjs
new file mode 100644
index 000000000..d8bb2f998
--- /dev/null
+++ b/.claude/skills-media/embedded-captions/scripts/audio-envelope.cjs
@@ -0,0 +1,95 @@
+#!/usr/bin/env node
+/*
+ * audio-envelope.cjs — extract a per-50ms RMS loudness envelope from the source audio.
+ *
+ *   node audio-envelope.cjs <project-dir>     → <project>/envelope.json
+ *
+ * { hop: 0.05, rms: [linear 0..1 per hop] }
+ *
+ * Used by lib-dna.cjs to couple the hero's entrance amplitude to how hard the word was
+ * actually SPOKEN (percentile of the hero window's loudness within the clip). ffmpeg
+ * astats over fixed windows — deterministic, no network, no Python.
+ */
+const path = require("path");
+const fs = require("fs");
+const cp = require("child_process");
+
+const HOP = 0.05;
+
+function findSource(project) {
+  for (const c of ["source.mp4"].concat(
+    fs
+      .readdirSync(project)
+      .filter(
+        (f) =>
+          /\.(mp4|mov|webm|mkv|m4v|wav|m4a|mp3)$/i.test(f) &&
+          !/^(final|bg_plus_caps|fg_caps|rail|index)/.test(f),
+      ),
+  )) {
+    const p = path.join(project, c);
+    if (fs.existsSync(p)) return p;
+  }
+  return null;
+}
+
+function main() {
+  const project = path.resolve(process.argv[2] || "");
+  if (!process.argv[2]) {
+    console.error("usage: audio-envelope.cjs <project-dir>");
+    process.exit(1);
+  }
+  const src = findSource(project);
+  if (!src) {
+    console.error("[envelope] no source media found");
+    process.exit(2);
+  }
+
+  // asetnsamples groups audio into fixed windows; astats prints RMS per window
+  const sr = 16000,
+    n = Math.round(sr * HOP);
+  let out;
+  try {
+    // resample INSIDE the filter chain — an output-option -ar applies after the
+    // filtergraph, which would make each window n/<input-rate> seconds instead of HOP
+    out = cp.execFileSync(
+      "ffmpeg",
+      [
+        "-v",
+        "info",
+        "-i",
+        src,
+        "-map",
+        "a:0",
+        "-af",
+        `aresample=${sr},aformat=channel_layouts=mono,asetnsamples=n=${n}:p=0,astats=metadata=1:reset=1,ametadata=mode=print:key=lavfi.astats.Overall.RMS_level:file=-`,
+        "-f",
+        "null",
+        "-",
+      ],
+      { encoding: "utf8", maxBuffer: 64 * 1024 * 1024, stdio: ["ignore", "pipe", "pipe"] },
+    );
+  } catch (e) {
+    // ffmpeg writes the metadata to stdout before exiting; some containers still exit 0 — re-throw only if nothing parsed
+    out = (e.stdout || "") + "";
+    if (!out.includes("RMS_level")) {
+      console.error(`[envelope] ffmpeg failed: ${e.message}`);
+      process.exit(2);
+    }
+  }
+  const rmsDb = [];
+  for (const line of String(out).split("\n")) {
+    const m = line.match(/lavfi\.astats\.Overall\.RMS_level=(-?[\d.]+|-inf)/);
+    if (m) rmsDb.push(m[1] === "-inf" ? -90 : Math.max(-90, parseFloat(m[1])));
+  }
+  if (!rmsDb.length) {
+    console.error("[envelope] no RMS windows parsed");
+    process.exit(2);
+  }
+  const rms = rmsDb.map((db) => +Math.pow(10, db / 20).toFixed(5)); // linear 0..1
+  fs.writeFileSync(path.join(project, "envelope.json"), JSON.stringify({ hop: HOP, rms }));
+  const peakAt = rms.indexOf(Math.max(...rms)) * HOP;
+  console.log(
+    `[envelope] ${rms.length} windows @ ${HOP}s → envelope.json (loudest beat ~${peakAt.toFixed(2)}s)`,
+  );
+}
+main();
diff --git a/.claude/skills-media/embedded-captions/scripts/check-occlusion.cjs b/.claude/skills-media/embedded-captions/scripts/check-occlusion.cjs
new file mode 100644
index 000000000..ae1c6eed7
--- /dev/null
+++ b/.claude/skills-media/embedded-captions/scripts/check-occlusion.cjs
@@ -0,0 +1,250 @@
+#!/usr/bin/env node
+/* check-occlusion.cjs — pixel-perfect occlusion gate (Node port of check-occlusion-v2.py).
+ * Runs measure-layout.cjs (real Chromium DOM rects), reads the subject-matte alpha via sharp,
+ * computes per-word / per-cap occlusion. No Python.
+ *   node check-occlusion.cjs <project-dir> [--strict] [--word-fail F] [--word-warn F] [--cap-fail F] [--remeasure]
+ */
+const path = require("path");
+const fs = require("fs");
+const os = require("os");
+const cp = require("child_process");
+
+function hfResolve(pkg) {
+  const roots = [
+    process.env.HYPERFRAMES_ROOT,
+    path.resolve(__dirname, "..", "..", ".."),
+    path.join(os.homedir(), "Downloads", "hyperframes"),
+  ].filter(Boolean);
+  for (const root of roots) {
+    const cands = [path.join(root, "node_modules", pkg)];
+    const bun = path.join(root, "node_modules", ".bun");
+    try {
+      if (fs.existsSync(bun))
+        for (const d of fs.readdirSync(bun))
+          if (d.startsWith(pkg + "@")) cands.push(path.join(bun, d, "node_modules", pkg));
+    } catch {}
+    for (const c of cands) {
+      try {
+        if (fs.existsSync(c)) return require(c);
+      } catch {}
+    }
+  }
+  console.error(`[v2] cannot find ${pkg} — set HYPERFRAMES_ROOT`);
+  process.exit(3);
+}
+const sharp = hfResolve("sharp");
+
+function ensureLayoutMeasured(project, force) {
+  const lp = path.join(project, "_layout.json"),
+    idx = path.join(project, "index.html");
+  let stale = force || !fs.existsSync(lp);
+  if (!stale && fs.existsSync(idx) && fs.statSync(idx).mtimeMs > fs.statSync(lp).mtimeMs)
+    stale = true;
+  if (stale)
+    cp.execFileSync("node", [path.join(__dirname, "measure-layout.cjs"), project], {
+      stdio: "inherit",
+    });
+  return JSON.parse(fs.readFileSync(lp, "utf8"));
+}
+async function loadAlphaMask(png) {
+  if (!fs.existsSync(png)) return null;
+  const { data, info } = await sharp(png)
+    .ensureAlpha()
+    .extractChannel(3)
+    .raw()
+    .toBuffer({ resolveWithObject: true });
+  return { data, W: info.width, H: info.height };
+}
+function occlusionForRect(m, x, y, w, h) {
+  if (!m) return 0;
+  const x0 = Math.max(0, Math.round(x)),
+    y0 = Math.max(0, Math.round(y));
+  const x1 = Math.min(m.W, Math.round(x + w)),
+    y1 = Math.min(m.H, Math.round(y + h));
+  if (x1 <= x0 || y1 <= y0) return 0;
+  let cnt = 0,
+    tot = 0;
+  for (let yy = y0; yy < y1; yy++) {
+    const row = yy * m.W;
+    for (let xx = x0; xx < x1; xx++) {
+      tot++;
+      if (m.data[row + xx] > 128) cnt++;
+    }
+  }
+  return tot ? cnt / tot : 0;
+}
+function argf(name, d) {
+  const i = process.argv.indexOf(name);
+  return i >= 0 ? parseFloat(process.argv[i + 1]) : d;
+}
+
+async function main() {
+  const project = path.resolve(process.argv[2] || "");
+  if (!process.argv[2]) {
+    console.error("usage: check-occlusion.cjs <project-dir> [--strict]");
+    process.exit(1);
+  }
+  const strict = process.argv.includes("--strict");
+  const wordFail = argf("--word-fail", 0.65),
+    wordWarn = argf("--word-warn", 0.35),
+    capFail = argf("--cap-fail", 0.5);
+  const layout = ensureLayoutMeasured(project, process.argv.includes("--remeasure"));
+  const framesDir = path.join(project, "frames_fg");
+  if (!fs.existsSync(framesDir)) {
+    console.error(`[v2] missing ${framesDir}`);
+    process.exit(2);
+  }
+  const planPath = path.join(project, "plan.json");
+  const plan = fs.existsSync(planPath) ? JSON.parse(fs.readFileSync(planPath, "utf8")) : {};
+  const planLayer = plan.caption_layer || "bg";
+  // Hero groups (the ONE big promoted word) are SUPPOSED to sit ON the subject — for them
+  // occlusion is a TARGET (~30–55%), not "minimize". Collect their ids for the advisory below.
+  const heroIds = new Set();
+  const heroIn = {};
+  for (const g of plan.groups || [])
+    if (g && (g.hero === true || /^(hero|crown)$/i.test(g.plane || ""))) {
+      heroIds.add(g.id);
+      heroIn[g.id] = g.in;
+    }
+  if (plan.crown_group && plan.crown_group.id) {
+    heroIds.add(plan.crown_group.id);
+    heroIn[plan.crown_group.id] = plan.crown_group.in;
+  }
+  const M = 2; // frame-edge tolerance (px) — matches check-overflow.cjs
+  const frameW = layout.width,
+    frameH = layout.height;
+
+  const capStats = {};
+  for (const sample of layout.samples) {
+    const png = path.join(framesDir, `f_${String(sample.frame_idx).padStart(4, "0")}.png`);
+    const mask = await loadAlphaMask(png);
+    if (!mask) continue;
+    for (const cap of sample.caps) {
+      const entry = (capStats[cap.id] ||= { layer: cap.layer || planLayer, samples: [] });
+      const wordsData = [];
+      for (const w of cap.words || []) {
+        if ((w.opacity ?? 1) < 0.3) continue;
+        wordsData.push({ text: w.text, occlusion: occlusionForRect(mask, w.x, w.y, w.w, w.h) });
+        // Frame-edge overflow — clipped SETTLED text is always wrong; a hero's first
+        // 0.5s is its entrance TRANSIENT (slam over-scale, streak fly-in pass through
+        // off-frame states by design) — judge overflow on the hold, not mid-flight.
+        if (heroIds.has(cap.id) && heroIn[cap.id] != null && sample.t < heroIn[cap.id] + 0.5)
+          continue;
+        const off = {
+          left: Math.max(0, Math.round(-w.x - M)),
+          right: Math.max(0, Math.round(w.x + w.w - frameW - M)),
+          top: Math.max(0, Math.round(-w.y - M)),
+          bottom: Math.max(0, Math.round(w.y + w.h - frameH - M)),
+        };
+        const score = off.left + off.right + off.top + off.bottom;
+        if (score > 0 && (!entry.overflow || score > entry.overflow.score))
+          entry.overflow = { text: w.text, off, score, t: sample.t };
+      }
+      const capOccl = occlusionForRect(
+        mask,
+        cap.cap_bbox.x,
+        cap.cap_bbox.y,
+        cap.cap_bbox.w,
+        cap.cap_bbox.h,
+      );
+      entry.samples.push({
+        t: sample.t,
+        cap_occl: capOccl,
+        cap_bbox: cap.cap_bbox,
+        words: wordsData,
+      });
+    }
+  }
+
+  const failures = [];
+  console.log(
+    `[v2] ${path.basename(project)}  word-fail≥${(wordFail * 100).toFixed(0)}%  cap-fail≥${(capFail * 100).toFixed(0)}%`,
+  );
+  for (const [gid, entry] of Object.entries(capStats)) {
+    // Frame-edge overflow applies to every layer (fg too). The skill allows the
+    // climax a few-px graze on the first/last letter, so only a clear glyph clip
+    // (>8px past an edge) is a hard FAIL; a sub-glyph graze is a WARN.
+    if (entry.overflow) {
+      const o = entry.overflow;
+      const maxOff = Math.max(o.off.left, o.off.right, o.off.top, o.off.bottom);
+      const sides = Object.entries(o.off)
+        .filter(([, v]) => v > 0)
+        .map(([s, v]) => `${s} ${v}px`)
+        .join(", ");
+      const hard = maxOff >= 8;
+      console.log(
+        `  ${gid}  [overflow${hard ? "" : "-warn"}] "${o.text}" off-frame: ${sides} (@${o.t}s)` +
+          (hard ? " — cropped text is always wrong" : " (graze — within climax tolerance)"),
+      );
+      if (hard && !failures.includes(gid)) failures.push(gid);
+    }
+    if (entry.layer === "fg") {
+      console.log(`  ${gid}  fg    (occlusion skipped — fg renders above matte)`);
+      continue;
+    }
+    const capOccls = entry.samples.map((s) => s.cap_occl);
+    const avgCap = capOccls.length ? capOccls.reduce((a, b) => a + b, 0) / capOccls.length : 0;
+    const peakCap = capOccls.length ? Math.max(...capOccls) : 0;
+    const wordPeaks = {};
+    for (const s of entry.samples)
+      for (const wd of s.words)
+        wordPeaks[wd.text] = Math.max(wordPeaks[wd.text] || 0, wd.occlusion);
+    const oblit = Object.entries(wordPeaks).filter(([, p]) => p >= wordFail);
+    const warn = Object.entries(wordPeaks).filter(([, p]) => p >= wordWarn && p < wordFail);
+    let status = "OK";
+    // HERO caps WANT occlusion (~30–55% is the embed); the generic cap threshold would
+    // fail a working hero. Heroes fail only past the feasibility ceiling (68%).
+    const capLimit = heroIds.has(gid) ? Math.max(capFail, 0.68) : capFail;
+    if (oblit.length || peakCap >= capLimit) {
+      status = "FAIL";
+      failures.push(gid);
+    } else if (warn.length) status = "WARN";
+    let s = "";
+    if (oblit.length)
+      s =
+        oblit
+          .slice(0, 5)
+          .map(([t, p]) => `${t}(${(p * 100).toFixed(0)}%)`)
+          .join(" ") + (oblit.length > 5 ? ` …+${oblit.length - 5}` : "");
+    else if (warn.length)
+      s =
+        "[warn] " +
+        warn
+          .slice(0, 3)
+          .map(([t, p]) => `${t}(${(p * 100).toFixed(0)}%)`)
+          .join(" ");
+    console.log(
+      `  ${gid}  ${entry.layer}  avg ${(avgCap * 100).toFixed(0)}%  peak ${(peakCap * 100).toFixed(0)}%  ${status}  ${s}`,
+    );
+    // HERO target-occlusion advisory (not a failure): a hero should sit ON the subject
+    // (~30–55%). If it barely grazes, it reads as a small floating word, not an embed.
+    if (heroIds.has(gid) && peakCap < 0.15) {
+      // METRIC HONESTY: this advisory uses CAP-AREA occlusion, which saturates ~15%
+      // for a width-filled hero over a narrow subject (the 30–55% figure elsewhere is
+      // the safe-zones BAND metric — different denominator). If the hero already owns
+      // the width, "center it + make it BIG" is unactionable — stay quiet.
+      const widest = Math.max(...entry.samples.map((sm) => (sm.cap_bbox && sm.cap_bbox.w) || 0), 0);
+      if (widest >= frameW * 0.8) {
+        console.log(
+          `  ${gid}  [hero-ok] peak ${(peakCap * 100).toFixed(0)}% cap-area — width-saturated hero over a narrow subject; cap-area can't reach the band target (this is the geometry, not a layout fault).`,
+        );
+      } else {
+        console.log(
+          `  ${gid}  [hero-weak] peak ${(peakCap * 100).toFixed(0)}% — hero barely crosses the subject; it should sit ON the subject (~30–55% by the safe-zones BAND metric = the embed effect). Center it (safe-zones heroAnchor) + make it BIG; don't park it in a clean margin.`,
+        );
+      }
+    }
+  }
+  if (failures.length) {
+    const uniq = [...new Set(failures)];
+    console.error(`\n[v2] ${uniq.length} cap(s) FAIL: ${uniq.join(", ")}`);
+    console.error(
+      "  → occlusion: set that cap's layer to fg, OR shrink/reposition;  overflow: shrink/reposition (fg won't help)",
+    );
+  }
+  process.exit(strict && failures.length ? 2 : 0);
+}
+main().catch((e) => {
+  console.error("[v2]", e.message);
+  process.exit(1);
+});
diff --git a/.claude/skills-media/embedded-captions/scripts/check-overflow.cjs b/.claude/skills-media/embedded-captions/scripts/check-overflow.cjs
new file mode 100644
index 000000000..d29fe0e76
--- /dev/null
+++ b/.claude/skills-media/embedded-captions/scripts/check-overflow.cjs
@@ -0,0 +1,194 @@
+#!/usr/bin/env node
+/**
+ * check-overflow.cjs — mode-agnostic frame-overflow WARNING for custom mode.
+ *
+ * Template mode has check-occlusion.cjs (which also flags frame-edge overflow),
+ * but custom mode runs no gates. This is the cheap safety net: it loads the
+ * rendered index.html, seeks the GSAP timeline across the clip, and flags ANY
+ * visible text element (regardless of class) whose box leaves the canvas — i.e.
+ * captions that fall off-frame (the bug we otherwise only catch by eye).
+ *
+ * WARNING ONLY — never fails the build (custom designs may bleed intentionally).
+ * Exit 0 if it ran (with or without findings); exit 3 if it couldn't run.
+ *
+ * Usage: node check-overflow.cjs <project-dir>
+ */
+const path = require("path");
+const fs = require("fs");
+const os = require("os");
+
+const HF_ROOTS = [
+  process.env.HYPERFRAMES_ROOT,
+  path.resolve(__dirname, "../../.."),
+  path.join(os.homedir(), "Downloads", "hyperframes"),
+].filter(Boolean);
+let puppeteer = null;
+for (const root of HF_ROOTS) {
+  const cands = [path.join(root, "node_modules", "puppeteer")];
+  const bunDir = path.join(root, "node_modules", ".bun");
+  try {
+    if (fs.existsSync(bunDir)) {
+      for (const d of fs.readdirSync(bunDir))
+        if (d.startsWith("puppeteer@"))
+          cands.push(path.join(bunDir, d, "node_modules", "puppeteer"));
+    }
+  } catch {
+    /* ignore */
+  }
+  for (const p of cands) {
+    try {
+      if (fs.existsSync(p)) {
+        puppeteer = require(p);
+        break;
+      }
+    } catch {}
+  }
+  if (puppeteer) break;
+}
+if (!puppeteer) {
+  console.error("[overflow] puppeteer not found");
+  process.exit(3);
+}
+
+async function main() {
+  const projectDir = process.argv[2];
+  const htmlName = process.argv[3] || "index.html"; // Standard mode passes "rail.html" to gate the rail too
+  const indexPath = path.resolve(projectDir, htmlName);
+  if (!fs.existsSync(indexPath)) {
+    console.error(`[overflow] missing ${indexPath}`);
+    process.exit(2);
+  }
+
+  const html = fs.readFileSync(indexPath, "utf8");
+  const num = (re, d) => {
+    const m = html.match(re);
+    return m ? parseFloat(m[1]) : d;
+  };
+  const W = num(/data-width="([0-9.]+)"/, 1920);
+  const H = num(/data-height="([0-9.]+)"/, 1080);
+  const DUR = num(/data-duration="([0-9.]+)"/, 8);
+
+  const exe =
+    process.platform === "darwin"
+      ? "/Applications/Google Chrome.app/Contents/MacOS/Google Chrome"
+      : "/usr/bin/google-chrome";
+  const browser = await puppeteer.launch({
+    headless: "new",
+    executablePath: fs.existsSync(exe) ? exe : undefined,
+    args: [
+      "--disable-web-security",
+      "--allow-file-access-from-files",
+      `--window-size=${W},${H}`,
+      "--disable-dev-shm-usage",
+    ],
+  });
+  try {
+    const page = await browser.newPage();
+    await page.setViewport({ width: Math.round(W), height: Math.round(H), deviceScaleFactor: 1 });
+    const waitTL = async () => {
+      const t0 = Date.now();
+      while (Date.now() - t0 < 12000) {
+        if (await page.evaluate(() => !!(window.__timelines && window.__timelines.main)))
+          return true;
+        await new Promise((r) => setTimeout(r, 200));
+      }
+      return false;
+    };
+    await page.goto(`file://${indexPath}`, { waitUntil: "load", timeout: 20000 });
+    let hasTL = await waitTL();
+    if (!hasTL) {
+      // GSAP loads from CDN — a blip leaves no timeline; retry once
+      await page.reload({ waitUntil: "load", timeout: 20000 }).catch(() => {});
+      hasTL = await waitTL();
+    }
+    if (!hasTL) {
+      // NEVER claim "ok" when we couldn't actually evaluate the animated layout.
+      console.error(
+        "[overflow] ⚠ timeline did not register (GSAP CDN blocked?) — overflow check " +
+          "INCONCLUSIVE; eyeball the render for off-frame captions.",
+      );
+      await browser.close();
+      process.exit(0);
+    }
+    await page.evaluate(async () => {
+      try {
+        await document.fonts.ready;
+      } catch {}
+    });
+
+    const times = Array.from({ length: 9 }, (_, i) => +((DUR * i) / 8).toFixed(2));
+    const found = new Map(); // key text → worst offense
+
+    for (const t of times) {
+      await page.evaluate((t) => {
+        window.__timelines.main.seek(t);
+        void document.body.offsetHeight;
+      }, t);
+      await new Promise((r) => setTimeout(r, 25));
+      const offenders = await page.evaluate(
+        (W, H) => {
+          const M = 2; // tolerance px
+          const root = document.querySelector("#stage") || document.body;
+          const out = [];
+          for (const el of root.querySelectorAll("*")) {
+            if (el.tagName === "VIDEO" || el.tagName === "AUDIO") continue;
+            const own = [...el.childNodes]
+              .filter((n) => n.nodeType === 3)
+              .map((n) => n.textContent.trim())
+              .join(" ")
+              .trim();
+            if (!own) continue;
+            const cs = getComputedStyle(el);
+            if (
+              cs.display === "none" ||
+              cs.visibility === "hidden" ||
+              parseFloat(cs.opacity) < 0.06
+            )
+              continue;
+            const b = el.getBoundingClientRect();
+            if (b.width === 0 || b.height === 0) continue;
+            const off = {
+              left: Math.max(0, Math.round(-b.left - M)),
+              right: Math.max(0, Math.round(b.right - W - M)),
+              top: Math.max(0, Math.round(-b.top - M)),
+              bottom: Math.max(0, Math.round(b.bottom - H - M)),
+            };
+            if (off.left || off.right || off.top || off.bottom)
+              out.push({ text: own.slice(0, 42), off });
+          }
+          return out;
+        },
+        W,
+        H,
+      );
+      for (const o of offenders) {
+        const sides = Object.entries(o.off)
+          .filter(([, v]) => v > 0)
+          .map(([s, v]) => `${s} ${v}px`)
+          .join(", ");
+        const prev = found.get(o.text);
+        const score = Object.values(o.off).reduce((a, b) => a + b, 0);
+        if (!prev || score > prev.score) found.set(o.text, { sides, score, t });
+      }
+    }
+
+    if (found.size === 0) {
+      console.log(`[overflow] ok — no caption text leaves the ${W}x${H} frame`);
+    } else {
+      console.error(
+        `[overflow] ⚠ ${found.size} caption(s) leave the frame (custom mode — WARNING only, not blocking):`,
+      );
+      for (const [text, info] of found)
+        console.error(`           "${text}"  → off-frame: ${info.sides}  (@${info.t}s)`);
+      console.error(
+        `[overflow] if unintentional, reposition/resize; if it's deliberate bleed, ignore.`,
+      );
+    }
+  } finally {
+    await browser.close();
+  }
+}
+main().catch((e) => {
+  console.error("[overflow]", e.message);
+  process.exit(3);
+});
diff --git a/.claude/skills-media/embedded-captions/scripts/check-rail-climax.cjs b/.claude/skills-media/embedded-captions/scripts/check-rail-climax.cjs
new file mode 100644
index 000000000..5cc473898
--- /dev/null
+++ b/.claude/skills-media/embedded-captions/scripts/check-rail-climax.cjs
@@ -0,0 +1,233 @@
+#!/usr/bin/env node
+/*
+ * check-rail-climax.cjs — enforce the Rail ↔ climax hand-off (PIPELINE.md).
+ *
+ *   node check-rail-climax.cjs <project-dir>
+ *
+ * The embed climax is a PROMOTED word — lifted out of the rail into the hero
+ * layer. It must NEVER also be revealed in the rail. This gate loads index.html
+ * (the climax) and rail.html (the verbatim rail) in headless Chromium, finds the
+ * climax's on-screen window + its word(s), then checks whether the rail reveals
+ * any of those same words DURING that window. If it does, the promoted word is
+ * duplicated on screen → exit 2 (the render aborts). Standard mode only.
+ *
+ * Conservative by design: only a CONFIRMED duplicate fails. Anything we can't
+ * determine (no rail.html, no puppeteer, timeline never registers, no climax)
+ * exits 0 — infra problems never block a render.
+ */
+const path = require("path");
+const fs = require("fs");
+const os = require("os");
+
+const HF_ROOTS = [
+  process.env.HYPERFRAMES_ROOT,
+  path.resolve(__dirname, "../../.."),
+  path.join(os.homedir(), "Downloads", "hyperframes"),
+].filter(Boolean);
+
+function findInBun(root, pkg, sub) {
+  const cands = [path.join(root, "node_modules", pkg)];
+  const bunDir = path.join(root, "node_modules", ".bun");
+  try {
+    if (fs.existsSync(bunDir))
+      for (const d of fs.readdirSync(bunDir))
+        if (d.startsWith(pkg + "@")) cands.push(path.join(bunDir, d, "node_modules", pkg));
+  } catch {
+    /* ignore */
+  }
+  for (const c of cands) {
+    const p = sub ? path.join(c, sub) : c;
+    if (fs.existsSync(p)) return p;
+  }
+  return null;
+}
+
+let puppeteer = null,
+  gsapSource = null;
+for (const root of HF_ROOTS) {
+  if (!puppeteer) {
+    const p = findInBun(root, "puppeteer");
+    if (p) {
+      try {
+        puppeteer = require(p);
+      } catch {}
+    }
+  }
+  if (!gsapSource) {
+    const g = findInBun(root, "gsap", path.join("dist", "gsap.min.js"));
+    if (g) gsapSource = fs.readFileSync(g, "utf8");
+  }
+}
+
+const norm = (s) =>
+  String(s)
+    .toLowerCase()
+    .replace(/[^a-z0-9]/g, "");
+const toks = (s) =>
+  String(s)
+    .split(/\s+/)
+    .map(norm)
+    .filter((t) => t.length >= 2);
+
+function ok(msg) {
+  if (msg) console.log(msg);
+  process.exit(0);
+} // can't-determine / pass → never blocks
+function fail(msg) {
+  console.error(msg);
+  process.exit(2);
+}
+
+async function newPage(browser, W, H) {
+  const page = await browser.newPage();
+  await page.setViewport({ width: W, height: H, deviceScaleFactor: 1 });
+  if (gsapSource) {
+    await page.evaluateOnNewDocument(gsapSource);
+    await page.setRequestInterception(true);
+    page.on("request", (req) => {
+      const u = req.url();
+      if (req.resourceType() === "script" && /gsap/i.test(u) && /^https?:/i.test(u)) req.abort();
+      else req.continue();
+    });
+  }
+  return page;
+}
+async function load(page, file) {
+  await page.goto(`file://${file}`, { waitUntil: "load", timeout: 15000 });
+  const start = Date.now();
+  while (Date.now() - start < 12000) {
+    if (await page.evaluate(() => !!(window.__timelines && window.__timelines.main))) {
+      try {
+        await page.evaluate(async () => {
+          await document.fonts.ready;
+        });
+      } catch {}
+      return true;
+    }
+    await new Promise((r) => setTimeout(r, 150));
+  }
+  return false;
+}
+// visible text of a selector at time t, by seeking the page's main timeline.
+// Visibility must be EFFECTIVE (own opacity × every ancestor's): a rail line that
+// fades out as a CONTAINER leaves its word spans at opacity:1 — checking only the
+// span's own style false-positives on text that is actually invisible.
+async function visibleAt(page, t, selector, childSel) {
+  return page.evaluate(
+    (t, selector, childSel) => {
+      const tl = window.__timelines.main;
+      tl.seek(t);
+      void document.body.offsetHeight;
+      const eff = (el) => {
+        let o = 1,
+          n = el;
+        while (n && n.nodeType === 1) {
+          const cs = getComputedStyle(n);
+          if (cs.display === "none" || cs.visibility === "hidden") return 0;
+          o *= +cs.opacity;
+          n = n.parentElement;
+        }
+        return o;
+      };
+      const out = [];
+      for (const el of document.querySelectorAll(selector)) {
+        if (eff(el) < 0.05) continue;
+        const kids = childSel ? [...el.querySelectorAll(childSel)] : [];
+        if (kids.length) {
+          for (const k of kids) {
+            if (eff(k) > 0.05) out.push(k.textContent);
+          }
+        } else if ((el.textContent || "").trim()) out.push(el.textContent);
+      }
+      return out.join(" ").trim();
+    },
+    t,
+    selector,
+    childSel,
+  );
+}
+
+async function main() {
+  const project = path.resolve(process.argv[2] || "");
+  if (!process.argv[2]) ok("[rail-climax] usage: check-rail-climax.cjs <project-dir>");
+  const indexPath = path.join(project, "index.html");
+  const railPath = path.join(project, "rail.html");
+  if (!fs.existsSync(railPath) || !fs.existsSync(indexPath))
+    ok("[rail-climax] no rail.html+index.html — not Standard, skipping");
+  if (!puppeteer) ok("[rail-climax] puppeteer unavailable — skipping (set HYPERFRAMES_ROOT)");
+
+  const exe =
+    process.platform === "darwin"
+      ? "/Applications/Google Chrome.app/Contents/MacOS/Google Chrome"
+      : "/usr/bin/google-chrome";
+  let browser;
+  try {
+    browser = await puppeteer.launch({
+      headless: "new",
+      executablePath: fs.existsSync(exe) ? exe : undefined,
+      args: ["--disable-web-security", "--allow-file-access-from-files", "--disable-dev-shm-usage"],
+    });
+  } catch (e) {
+    ok(`[rail-climax] could not launch Chromium — skipping (${e.message})`);
+  }
+
+  try {
+    // index.html → climax window + climax word tokens
+    const ip = await newPage(browser, 1920, 1080);
+    if (!(await load(ip, indexPath)))
+      ok("[rail-climax] index timeline never registered — skipping");
+    const dur =
+      +(await ip.evaluate(() => {
+        const r = document.querySelector("#root") || document.querySelector("[data-duration]");
+        return (r && r.dataset && r.dataset.duration) || 0;
+      })) || 30;
+    const STEP = 0.1;
+    const climaxTokens = new Set();
+    let winIn = null,
+      winOut = null;
+    for (let t = 0; t <= dur + 0.001; t += STEP) {
+      const txt = await visibleAt(ip, +t.toFixed(2), ".climax", "span,.w");
+      if (txt) {
+        toks(txt).forEach((w) => climaxTokens.add(w));
+        if (winIn === null) winIn = t;
+        winOut = t;
+      }
+    }
+    if (!climaxTokens.size || winIn === null)
+      ok("[rail-climax] no visible climax found in index.html — skipping");
+
+    // rail.html → words visible during [winIn, winOut]
+    const rp = await newPage(browser, 1920, 1080);
+    if (!(await load(rp, railPath))) ok("[rail-climax] rail timeline never registered — skipping");
+    const hits = new Map(); // token -> first t seen
+    for (let t = Math.max(0, winIn - STEP); t <= winOut + 0.001; t += STEP) {
+      const railToks = new Set(toks(await visibleAt(rp, +t.toFixed(2), ".w", null)));
+      for (const w of climaxTokens) if (railToks.has(w) && !hits.has(w)) hits.set(w, +t.toFixed(2));
+    }
+
+    if (hits.size) {
+      const list = [...hits.entries()]
+        .map(([w, t]) => `"${w}" (rail shows it at t=${t}s)`)
+        .join(", ");
+      fail(
+        `[rail-climax] ✗ DUPLICATE PROMOTED WORD: the climax word(s) ${[...climaxTokens].map((w) => `"${w}"`).join(", ")} ` +
+          `are on screen during the climax window [${winIn.toFixed(2)}–${winOut.toFixed(2)}s], ` +
+          `and the rail ALSO reveals: ${list}.\n` +
+          `  The promoted word must be handed off, never duplicated — see PIPELINE.md "Rail ↔ climax hand-off":\n` +
+          `  freeze the rail before the promoted word, let the climax carry it, hold the climax across the rail's\n` +
+          `  page-flip, and exit it at the end of the thought. The rail must never reveal the promoted word.`,
+      );
+    }
+    console.log(
+      `[rail-climax] ✓ ok — promoted word(s) ${[...climaxTokens].map((w) => `"${w}"`).join(", ")} not duplicated in the rail (window ${winIn.toFixed(2)}–${winOut.toFixed(2)}s)`,
+    );
+  } finally {
+    await Promise.race([browser.close().catch(() => {}), new Promise((r) => setTimeout(r, 8000))]);
+  }
+}
+main()
+  .then(() => process.exit(0))
+  .catch((e) => {
+    console.error(`[rail-climax] (skipped — ${e.message})`);
+    process.exit(0);
+  });
diff --git a/.claude/skills-media/embedded-captions/scripts/check-timing.cjs b/.claude/skills-media/embedded-captions/scripts/check-timing.cjs
new file mode 100644
index 000000000..e4fad56f0
--- /dev/null
+++ b/.claude/skills-media/embedded-captions/scripts/check-timing.cjs
@@ -0,0 +1,173 @@
+#!/usr/bin/env node
+/* check-timing.cjs — verify plan.json word timings vs transcript.json (1:1 port of check-timing.py).
+ *   node check-timing.cjs <project-dir> [--strict]
+ */
+const path = require("path");
+const fs = require("fs");
+
+const DRIFT_TOL = 0.08;
+const CREATIVE_SUBS = {
+  "15%": ["fifteen", "percent"],
+  "1/3": ["one", "third"],
+  "2x": ["two", "times"],
+};
+const norm = (s) =>
+  String(s)
+    .replace(/^[ .,?!"']+|[ .,?!"']+$/g, "")
+    .toLowerCase();
+const splitPacked = (t) =>
+  String(t)
+    .split(/<br>|\s+/)
+    .filter(Boolean);
+
+function estimateVerticalBand(css, words, fw, fh) {
+  const top = css.match(/top:\s*(-?[\d.]+)%/);
+  if (!top) return null;
+  const topPct = parseFloat(top[1]);
+  const sizeM = css.match(/font-size:\s*calc\(\s*([\d.]+)\s*\*\s*var\(--h\)\s*\)/);
+  const fontPx = sizeM ? parseFloat(sizeM[1]) * fh : 0.05 * fh;
+  const lhM = css.match(/line-height:\s*([\d.]+)/);
+  const lh = lhM ? parseFloat(lhM[1]) : 1.1;
+  const charW = /uppercase/i.test(css) ? 0.72 : 0.6;
+  let lineCount = 1,
+    cur = 0;
+  const spaceW = fontPx * 0.3;
+  for (const w of words) {
+    const parts = String(w.text).split(/<br>/);
+    parts.forEach((part, i) => {
+      const pw = part.length * fontPx * charW;
+      if (i > 0) {
+        lineCount++;
+        cur = pw;
+      } else {
+        const test = cur + (cur > 0 ? spaceW : 0) + pw;
+        if (test > fw && cur > 0) {
+          lineCount++;
+          cur = pw;
+        } else cur = test;
+      }
+    });
+  }
+  return [topPct, topPct + (100 * (lineCount * fontPx * lh)) / fh];
+}
+
+function check(project, strict) {
+  const plan = JSON.parse(fs.readFileSync(path.join(project, "plan.json"), "utf8"));
+  const t = JSON.parse(fs.readFileSync(path.join(project, "transcript.json"), "utf8"));
+  const seq = (t.words || [])
+    .filter((w) => w.type === "word")
+    .map((w) => [norm(w.text), w.start, w.end]);
+  const issues = [];
+  const fw = plan.width || 720,
+    fh = plan.height || 1290;
+  const groups = plan.groups || [];
+  const bands = groups.map((g) =>
+    g.plane
+      ? [g.id || "?", g.in, g.out, null, true]
+      : [
+          g.id || "?",
+          g.in,
+          g.out,
+          estimateVerticalBand(g.css || "", g.words || [], fw, fh),
+          g.allow_overlap || false,
+        ],
+  );
+  for (let i = 0; i < bands.length; i++) {
+    const [gi, ai, bi, bbi, oki] = bands[i];
+    if (!bbi) continue;
+    for (let j = i + 1; j < bands.length; j++) {
+      const [gj, aj, bj, bbj, okj] = bands[j];
+      if (!bbj || oki || okj) continue;
+      if (Math.min(bi, bj) - Math.max(ai, aj) <= 0.05) continue;
+      if (Math.min(bbi[1], bbj[1]) - Math.max(bbi[0], bbj[0]) > 2.0)
+        issues.push(
+          `[${gi}↔${gj}] groups overlap in time (${Math.max(ai, aj).toFixed(2)}–${Math.min(bi, bj).toFixed(2)}s) AND vertically (band ${Math.max(bbi[0], bbj[0]).toFixed(0)}%–${Math.min(bbi[1], bbj[1]).toFixed(0)}%) — reposition one or add "allow_overlap": true if deliberate.`,
+        );
+    }
+  }
+  let ti = 0;
+  for (const g of groups) {
+    const gid = g.id || "?",
+      gin = g.in,
+      gout = g.out;
+    const ws = (g.words || []).map((w) => w.start),
+      we = (g.words || []).map((w) => w.end);
+    if (ws.length && gin != null) {
+      const e = Math.min(...ws);
+      if (e < gin - 0.01)
+        issues.push(
+          `[${gid}] group.in=${gin.toFixed(2)} but earliest word starts at ${e.toFixed(2)} — word delayed by ${(gin - e >= 0 ? "+" : "") + (gin - e).toFixed(2)}s. Lower group.in.`,
+        );
+    }
+    if (we.length && gout != null) {
+      const l = Math.max(...we);
+      if (l > gout + 0.01)
+        issues.push(
+          `[${gid}] group.out=${gout.toFixed(2)} but latest word ends at ${l.toFixed(2)} — word clipped. Raise group.out.`,
+        );
+    }
+    for (const w of g.words || []) {
+      // Exact pairing: a compiler that KNOWS the transcript index emits `ti` —
+      // duplicate words then pair by POSITION, not text-search (which grabs the
+      // first occurrence and reports a phantom drift). Sanity-check the text; on
+      // mismatch fall back to the text matcher below.
+      if (
+        Number.isInteger(w.ti) &&
+        seq[w.ti] &&
+        seq[w.ti][0] === norm(splitPacked(w.text)[0] || "")
+      ) {
+        const drift = w.start - seq[w.ti][1];
+        if (Math.abs(drift) > DRIFT_TOL)
+          issues.push(
+            `[${gid}] '${norm(w.text)}': plan=${w.start.toFixed(3)} transcript=${seq[w.ti][1].toFixed(3)} drift ${(drift >= 0 ? "+" : "") + drift.toFixed(3)}s`,
+          );
+        ti = w.ti + 1;
+        continue;
+      }
+      const parts = splitPacked(w.text).map(norm);
+      parts.forEach((part, pi) => {
+        if (!part) return;
+        if (part in CREATIVE_SUBS) {
+          for (const sub of CREATIVE_SUBS[part]) {
+            const j = seq.findIndex((s, k) => k >= ti && s[0] === sub);
+            if (j >= 0) ti = j + 1;
+          }
+          return;
+        }
+        let found = seq.findIndex((s, k) => k >= ti && s[0] === part);
+        if (found < 0) found = seq.findIndex((s) => s[0] === part);
+        if (found < 0) {
+          issues.push(`[${gid}] '${part}': NOT IN TRANSCRIPT (plan start=${w.start.toFixed(3)})`);
+          return;
+        }
+        const ts = seq[found][1];
+        ti = found + 1;
+        if (pi === 0) {
+          const drift = w.start - ts;
+          if (Math.abs(drift) > DRIFT_TOL)
+            issues.push(
+              `[${gid}] '${part}': plan=${w.start.toFixed(3)} transcript=${ts.toFixed(3)} drift ${(drift >= 0 ? "+" : "") + drift.toFixed(3)}s`,
+            );
+        } else
+          issues.push(
+            `[${gid}] '${part}' packed with '${parts[0]}': transcript=${ts.toFixed(3)} but entry has no distinct timing — split into separate word entries`,
+          );
+      });
+    }
+  }
+  const name = path.basename(project);
+  if (!issues.length) {
+    console.log(`${name}: timing OK ✓ (${seq.length} transcript words)`);
+    return 0;
+  }
+  console.log(`${name}: ${issues.length} timing issue(s):`);
+  for (const i of issues) console.log(`  ${i}`);
+  return strict ? 1 : 0;
+}
+
+const args = process.argv.slice(2).filter((a) => a !== "--strict");
+if (!args.length) {
+  console.error("usage: check-timing.cjs <project-dir> [--strict]");
+  process.exit(2);
+}
+process.exit(check(path.resolve(args[0]), process.argv.includes("--strict")));
diff --git a/.claude/skills-media/embedded-captions/scripts/fill-timings.cjs b/.claude/skills-media/embedded-captions/scripts/fill-timings.cjs
new file mode 100644
index 000000000..627a41bc8
--- /dev/null
+++ b/.claude/skills-media/embedded-captions/scripts/fill-timings.cjs
@@ -0,0 +1,124 @@
+#!/usr/bin/env node
+/*
+ * fill-timings.cjs — fill plan.json group/word times DIRECTLY from transcript.json,
+ * by SEQUENCE (Cinematic mode). Kills the timing-drift + duplicate-word class of
+ * occlusion/timing-gate re-tries: the agent only decides the GROUPING (which words form
+ * each group, in spoken order); times come from the transcript by position, so the
+ * second "and"/"actions" matches the right occurrence (text-matching pairs the wrong one).
+ *
+ *   node fill-timings.cjs <project-dir>
+ *
+ * Reads  <project>/plan.json (groups[].words[].text, in spoken order) + transcript.json.
+ * Writes <project>/plan.json with each word's start/end and each group's in/out filled.
+ * A group word that can't be matched keeps whatever time it had + is reported (so a typo
+ * or an added word degrades gracefully instead of silently mis-timing).
+ */
+const path = require("path");
+const fs = require("fs");
+
+const norm = (s) =>
+  String(s == null ? "" : s)
+    .toLowerCase()
+    .replace(/[^a-z0-9]/g, "");
+const LOOKAHEAD = 40; // how far past the pointer to search for a group word (skips dropped fillers)
+
+function fillGroup(g, tw, state) {
+  const matched = [];
+  const unmatched = [];
+  for (const w of g.words || []) {
+    const target = norm(w.text);
+    if (!target) {
+      unmatched.push(w.text);
+      continue;
+    }
+    let found = -1;
+    for (let j = state.p; j < Math.min(tw.length, state.p + LOOKAHEAD); j++) {
+      if (norm(tw[j].text) === target) {
+        found = j;
+        break;
+      }
+    }
+    if (found >= 0) {
+      w.start = tw[found].start;
+      w.end = tw[found].end;
+      matched.push(w);
+      state.p = found + 1;
+    } else {
+      unmatched.push(w.text);
+    }
+  }
+  if (matched.length) {
+    const firstStart = +matched[0].start.toFixed(3);
+    const lastEnd = +matched[matched.length - 1].end.toFixed(3);
+    // WORD start/end are filled above (deterministic). For the group's DISPLAY window we
+    // only GUARANTEE it brackets the words (never clip a word) — we do NOT tighten it:
+    // a deliberately later `out` is the apex HOLD / sentence ACCUMULATION the author set,
+    // and an earlier `in` is a pre-entry. Preserve both; clamp only if they'd clip.
+    g.in = g.in == null ? firstStart : Math.min(g.in, firstStart);
+    g.out = g.out == null ? lastEnd : Math.max(g.out, lastEnd);
+  }
+  return { matched: matched.length, unmatched };
+}
+
+function main() {
+  const project = path.resolve(process.argv[2] || "");
+  if (!process.argv[2]) {
+    console.error("usage: fill-timings.cjs <project-dir>");
+    process.exit(1);
+  }
+  const planPath = path.join(project, "plan.json");
+  const trPath = path.join(project, "transcript.json");
+  let plan, trWordsRaw;
+  try {
+    plan = JSON.parse(fs.readFileSync(planPath, "utf8"));
+  } catch {
+    console.error(`[fill-timings] no plan.json (Cinematic only) — skipping`);
+    process.exit(0);
+  }
+  try {
+    trWordsRaw = JSON.parse(fs.readFileSync(trPath, "utf8")).words || [];
+  } catch {
+    console.error(`[fill-timings] no transcript.json — skipping`);
+    process.exit(0);
+  }
+  const tw = trWordsRaw.filter((w) => w && "start" in w && "end" in w);
+  if (!tw.length) {
+    console.error(`[fill-timings] transcript has no word timings — skipping`);
+    process.exit(0);
+  }
+
+  const state = { p: 0 };
+  let totalMatched = 0,
+    totalUnmatched = 0;
+  const groups = plan.groups || [];
+  // crown_group (if any) is spoken last in the standard templates; process groups in order, crown after.
+  const ordered = [...groups];
+  for (const g of ordered) {
+    const r = fillGroup(g, tw, state);
+    totalMatched += r.matched;
+    totalUnmatched += r.unmatched.length;
+    if (r.unmatched.length)
+      console.error(
+        `[fill-timings] ⚠ ${g.id || "(group)"}: ${r.unmatched.length} word(s) not found in transcript from here: ${r.unmatched.join(" ")}`,
+      );
+  }
+  if (plan.crown_group) {
+    const r = fillGroup(plan.crown_group, tw, state);
+    totalMatched += r.matched;
+    totalUnmatched += r.unmatched.length;
+    if (r.unmatched.length)
+      console.error(`[fill-timings] ⚠ crown_group: ${r.unmatched.join(" ")} not found`);
+  }
+
+  fs.writeFileSync(planPath, JSON.stringify(plan, null, 2));
+  console.log(
+    `[fill-timings] filled ${totalMatched} word time(s) from transcript by sequence` +
+      (totalUnmatched
+        ? `; ${totalUnmatched} unmatched (kept prior time — check those words)`
+        : `; all matched ✓`),
+  );
+  console.log(
+    `[fill-timings] group windows now: ${ordered.map((g) => `${g.id || "?"}[${g.in}-${g.out}]`).join(" ")}`,
+  );
+}
+main();
diff --git a/.claude/skills-media/embedded-captions/scripts/fit-fonts.cjs b/.claude/skills-media/embedded-captions/scripts/fit-fonts.cjs
new file mode 100644
index 000000000..483ede2ec
--- /dev/null
+++ b/.claude/skills-media/embedded-captions/scripts/fit-fonts.cjs
@@ -0,0 +1,158 @@
+#!/usr/bin/env node
+/*
+ * fit-fonts.cjs — shrink any plan.json caption group whose single line would overflow
+ * its box, BEFORE render (Cinematic mode). Kills the "font too big → off-frame → shrink
+ * → re-render" overflow round. Estimates rendered width from character count × a
+ * per-family advance × the group's font-size, compares to the group's box width (its
+ * plane width, else the frame), and only ever SHRINKS to fit. Approximate by design —
+ * it prevents gross overflow; check-overflow.cjs remains the exact terminal check.
+ *
+ *   node fit-fonts.cjs <project-dir>
+ */
+const path = require("path");
+const fs = require("fs");
+
+// rough per-family advance (em per char, caps-ish). Condensed faces are narrow; pixel
+// faces wide. Default is conservative. (Estimate only — gate confirms.)
+const ADV = {
+  anton: 0.44,
+  oswald: 0.45,
+  teko: 0.4,
+  "saira stencil one": 0.46,
+  "bebas neue": 0.4,
+  "press start 2p": 1.05,
+  vt323: 0.52,
+  monoton: 0.62,
+  "special elite": 0.55,
+  "jetbrains mono": 0.6,
+  "space mono": 0.6,
+  "ibm plex mono": 0.6,
+  "source code pro": 0.6,
+  "archivo black": 0.62,
+  bangers: 0.5,
+  "bodoni moda": 0.5,
+  "playfair display": 0.52,
+  cinzel: 0.62,
+  "cormorant garamond": 0.45,
+  fredoka: 0.55,
+  "baloo 2": 0.55,
+  "permanent marker": 0.55,
+  caveat: 0.4,
+  orbitron: 0.66,
+  sora: 0.54,
+  "space grotesk": 0.54,
+};
+const DEFAULT_ADV = 0.56;
+
+const cssVal = (css, prop) => {
+  const m = String(css || "").match(new RegExp(prop + "\\s*:\\s*([^;}]+)", "i"));
+  return m ? m[1].trim() : null;
+};
+function familyOf(css) {
+  const v = cssVal(css, "font-family");
+  if (!v) return "inter";
+  return v
+    .split(",")[0]
+    .trim()
+    .replace(/^['"]|['"]$/g, "")
+    .toLowerCase();
+}
+function sizePxOf(css, H) {
+  const v = cssVal(css, "font-size");
+  if (!v) return null;
+  let m;
+  if ((m = v.match(/calc\(\s*([\d.]+)\s*\*\s*var\(--h\)\s*\)/i))) return parseFloat(m[1]) * H;
+  if ((m = v.match(/([\d.]+)\s*cqh/i))) return (parseFloat(m[1]) / 100) * H;
+  if ((m = v.match(/([\d.]+)\s*vh/i))) return (parseFloat(m[1]) / 100) * H;
+  if ((m = v.match(/([\d.]+)\s*px/i))) return parseFloat(m[1]);
+  return null;
+}
+function planeWidthPx(plan, plane, W) {
+  const p = plan.planes && plan.planes[plane];
+  const css = p && (typeof p === "string" ? p : p.css);
+  const v = cssVal(css, "width");
+  if (!v) return null;
+  let m;
+  if ((m = v.match(/([\d.]+)\s*%/))) return (parseFloat(m[1]) / 100) * W;
+  if ((m = v.match(/([\d.]+)\s*px/))) return parseFloat(m[1]);
+  return null;
+}
+function setFontSize(css, fracOfH) {
+  const decl = `font-size: calc(${fracOfH.toFixed(3)} * var(--h))`;
+  if (/font-size\s*:/i.test(css || "")) return String(css).replace(/font-size\s*:\s*[^;}]+/i, decl);
+  return (css ? css.replace(/\s*$/, "").replace(/;?\s*$/, "; ") : "") + decl + ";";
+}
+
+function main() {
+  const project = path.resolve(process.argv[2] || "");
+  if (!process.argv[2]) {
+    console.error("usage: fit-fonts.cjs <project-dir>");
+    process.exit(1);
+  }
+  const planPath = path.join(project, "plan.json");
+  let plan;
+  try {
+    plan = JSON.parse(fs.readFileSync(planPath, "utf8"));
+  } catch {
+    console.error("[fit-fonts] no plan.json (Cinematic only) — skipping");
+    process.exit(0);
+  }
+  const W = plan.width || 1920,
+    H = plan.height || 1080;
+  const groups = (plan.groups || []).concat(plan.crown_group ? [plan.crown_group] : []);
+  const MARGIN = 0.92; // leave 8% breathing room inside the box
+  const HERO_MIN_FRAC = 0.18; // a hero below ~0.18·h isn't "big" — keep it punchy, widen its box instead
+
+  let changed = 0;
+  for (const g of groups) {
+    const text = (g.words || []).map((w) => w.text).join(" ");
+    const nChars = text.replace(/\s/g, "").length + (g.words || []).length * 0.5; // glyphs + ~half-space gaps
+    if (nChars < 1) continue;
+    const fam = familyOf(g.css);
+    let adv = ADV[fam] ?? DEFAULT_ADV;
+    if (/text-transform\s*:\s*uppercase/i.test(g.css || "") || text === text.toUpperCase())
+      adv *= 1.05;
+    const sizePx = sizePxOf(g.css, H);
+    if (!sizePx) continue; // no explicit size → template default handles it
+    const boxW = (g.plane ? planeWidthPx(plan, g.plane, W) : null) || W;
+    const usable = boxW * MARGIN;
+    // A WRAPPING group only overflows if a SINGLE word is wider than the box (the rest
+    // wraps). A NOWRAP group must fit its whole line. So don't shrink wrapping narration
+    // down to one line — only force the whole line for nowrap; else just the longest word.
+    const nowrap = /white-space\s*:\s*nowrap/i.test(g.css || "");
+    const longestWord = (g.words || []).reduce(
+      (m, w) => Math.max(m, String(w.text || "").replace(/\s/g, "").length),
+      0,
+    );
+    const constrainChars = nowrap ? nChars : longestWord;
+    if (constrainChars < 1) continue;
+    const estW = constrainChars * adv * sizePx;
+    if (estW > usable) {
+      const newPx = usable / (constrainChars * adv);
+      let frac = Math.max(0.02, newPx / H);
+      const isHero = g.hero === true || /^(hero|crown)$/i.test(g.plane || "");
+      if (isHero && frac < HERO_MIN_FRAC) {
+        // The hero must stay BIG. If it won't fit its box while staying punchy, the BOX is
+        // too narrow (the hero should span the subject) — keep it at the floor + flag it,
+        // rather than silently shrinking the peak into a small word.
+        frac = HERO_MIN_FRAC;
+        g.css = setFontSize(g.css, frac);
+        changed++;
+        console.log(
+          `[fit-fonts] ⚠ ${g.id || "(group)"} HERO "${text.slice(0, 28)}" won't fit box ${Math.round(usable)}px while staying big → KEPT at floor ${frac}·h. WIDEN the hero plane (it should span the subject, centered), not shrink the peak.`,
+        );
+        continue;
+      }
+      g.css = setFontSize(g.css, frac);
+      changed++;
+      console.log(
+        `[fit-fonts] ${g.id || "(group)"}: "${text.slice(0, 28)}" (${nowrap ? "nowrap line" : "longest word"}) est ${Math.round(estW)}px > box ${Math.round(usable)}px → shrink to ${frac.toFixed(3)}·h (${Math.round(newPx)}px)`,
+      );
+    }
+  }
+  if (changed) {
+    fs.writeFileSync(planPath, JSON.stringify(plan, null, 2));
+    console.log(`[fit-fonts] shrank ${changed} group(s) to fit; wrote plan.json`);
+  } else console.log("[fit-fonts] all groups fit their box — no change");
+}
+main();
diff --git a/.claude/skills-media/embedded-captions/scripts/gen-stroke-path.py b/.claude/skills-media/embedded-captions/scripts/gen-stroke-path.py
new file mode 100644
index 000000000..45dc1d862
--- /dev/null
+++ b/.claude/skills-media/embedded-captions/scripts/gen-stroke-path.py
@@ -0,0 +1,46 @@
+#!/usr/bin/env python3
+"""gen-stroke-path.py — generalized draw-on path generator.
+
+Lays out ANY word in a single-line (pen-path) SVG font — Hershey/EMS — and emits
+one continuous-dash-revealable path `d`. The glyph data IS the pen path, so
+stroke-order reveal is exact by construction for any text, no per-word tuning.
+
+Usage: gen-stroke-path.py <font.svg> <text> <target_width_px> <baseline_y> <x0>
+Prints: the path `d` string + layout info on stderr.
+"""
+import re, sys
+
+font_path, text, target_w, baseline_y, x0 = (
+    sys.argv[1], sys.argv[2], float(sys.argv[3]), float(sys.argv[4]), float(sys.argv[5]))
+
+svg = open(font_path).read()
+glyphs = {}
+for m in re.finditer(r'<glyph\s+unicode="(.)"[^>]*?horiz-adv-x="([\d.]+)"(?:[^>]*?d="([^"]*)")?', svg):
+    ch, adv, d = m.group(1), float(m.group(2)), m.group(3) or ""
+    glyphs[ch] = (adv, d)
+# default advance for space
+space_adv = glyphs.get(" ", (300, ""))[0]
+
+# total advance width in font units
+total = 0.0
+for ch in text:
+    total += glyphs.get(ch, (space_adv, ""))[0]
+s = target_w / total                       # scale font-units → px
+
+out = []
+cursor = 0.0
+NUM = re.compile(r"[-\d.]+")
+for ch in text:
+    adv, d = glyphs.get(ch, (space_adv, ""))
+    if d:
+        # polylines only (M/L): transform every coordinate pair
+        toks = re.findall(r"([ML])\s+([-\d.]+)\s+([-\d.]+)", d)
+        for cmd, xs, ys in toks:
+            x = x0 + (cursor + float(xs)) * s
+            y = baseline_y - float(ys) * s          # SVG-font y is UP; flip
+            out.append(f"{cmd} {x:.1f} {y:.1f}")
+    cursor += adv
+
+print(" ".join(out))
+print(f"[gen] chars={len(text)} scale={s:.3f} width={total*s:.0f}px "
+      f"subpaths={sum(1 for o in out if o.startswith('M'))}", file=sys.stderr)
diff --git a/.claude/skills-media/embedded-captions/scripts/inject-fonts.cjs b/.claude/skills-media/embedded-captions/scripts/inject-fonts.cjs
new file mode 100644
index 000000000..b3994a2a9
--- /dev/null
+++ b/.claude/skills-media/embedded-captions/scripts/inject-fonts.cjs
@@ -0,0 +1,169 @@
+#!/usr/bin/env node
+/*
+ * inject-fonts.cjs — inline the @font-face blocks each HTML actually uses.
+ *
+ *   node inject-fonts.cjs <project-dir> [file.html ...]
+ *
+ * hyperframes' renderer only auto-supplies its ~18 CANONICAL_FONTS. Every other
+ * family (Anton, Bangers, VT323, Press Start 2P, …) falls back to a generic font
+ * unless the HTML ships a local @font-face — even when it "looks fine" locally,
+ * because that only works when the font happens to be installed as a system font.
+ * On a clean/offline/CI machine it silently degrades. (hyperframes' own font
+ * linter flags exactly this: font_family_without_font_face.)
+ *
+ * This step reads the bundled font library (modes/standard/fonts/fonts.css —
+ * base64 woff2, no sub-resources), finds which of those families the HTML uses,
+ * and inlines just those @font-face blocks into a <style id="hf-embedded-fonts">.
+ * Idempotent (re-running replaces the block). Families already declared in the
+ * HTML, hyperframes-canonical families, and CSS generics are left untouched.
+ *
+ * Runs BEFORE the layout gates + render so measure-layout and the capture both
+ * see the real glyph metrics, never a fallback.
+ */
+const fs = require("fs");
+const path = require("path");
+
+const SKILL_ROOT = path.resolve(__dirname, "..");
+const FONTS_CSS = path.join(SKILL_ROOT, "modes", "standard", "fonts", "fonts.css");
+const MARKER = "hf-embedded-fonts";
+
+const GENERIC = new Set([
+  "serif",
+  "sans-serif",
+  "monospace",
+  "cursive",
+  "fantasy",
+  "system-ui",
+  "ui-serif",
+  "ui-sans-serif",
+  "ui-monospace",
+  "ui-rounded",
+  "math",
+  "emoji",
+  "fangsong",
+  "inherit",
+  "initial",
+  "unset",
+  "revert",
+  "revert-layer",
+]);
+
+// Parse fonts.css → Map<lowercased family, [ @font-face block strings ]>.
+function loadFontLibrary() {
+  let css;
+  try {
+    css = fs.readFileSync(FONTS_CSS, "utf8");
+  } catch {
+    console.error(
+      `[inject-fonts] missing ${FONTS_CSS} — run modes/standard/fonts/build-fonts-css.cjs`,
+    );
+    process.exit(2);
+  }
+  const lib = new Map();
+  // base64 data-URIs contain no "}", so [^}]* safely bounds a block.
+  const blockRe = /@font-face\s*\{[^}]*\}/gi;
+  const famRe = /font-family\s*:\s*(['"]?)([^;'"]+)\1/i;
+  let m;
+  while ((m = blockRe.exec(css)) !== null) {
+    const fam = m[0].match(famRe);
+    if (!fam) continue;
+    const key = fam[2].trim().toLowerCase();
+    if (!lib.has(key)) lib.set(key, []);
+    lib.get(key).push(m[0]);
+  }
+  return lib;
+}
+
+// Families referenced anywhere in the HTML: CSS `font-family:` (in <style> or
+// inline style="") and the data-font-family attribute hyperframes also honors.
+function usedFamilies(html) {
+  const out = new Set();
+  const add = (stack) => {
+    for (const part of String(stack).split(",")) {
+      const name = part
+        .trim()
+        .replace(/^['"]|['"]$/g, "")
+        .trim()
+        .toLowerCase();
+      if (name && !GENERIC.has(name) && !/^var\(/.test(name)) out.add(name);
+    }
+  };
+  // strip existing @font-face so we don't re-list the family it declares
+  const body = html.replace(/@font-face\s*\{[^}]*\}/gi, "");
+  for (const mm of body.matchAll(/font-family\s*:\s*([^;}{]+)/gi)) add(mm[1]);
+  for (const mm of html.matchAll(/data-font-family\s*=\s*["']([^"']+)["']/gi)) add(mm[1]);
+  return out;
+}
+
+// Families the HTML ALREADY declares via @font-face — leave those alone.
+function declaredFamilies(html) {
+  const out = new Set();
+  const famRe = /font-family\s*:\s*(['"]?)([^;'"]+)\1/i;
+  for (const mm of html.matchAll(/@font-face\s*\{[^}]*\}/gi)) {
+    const f = mm[0].match(famRe);
+    if (f) out.add(f[2].trim().toLowerCase());
+  }
+  return out;
+}
+
+function injectInto(file, lib) {
+  let html;
+  try {
+    html = fs.readFileSync(file, "utf8");
+  } catch {
+    return null;
+  }
+  // drop any previous injection so this is idempotent
+  html = html.replace(new RegExp(`\\s*<style id="${MARKER}">[\\s\\S]*?</style>`, "i"), "");
+
+  const used = usedFamilies(html);
+  const already = declaredFamilies(html);
+  const blocks = [];
+  const inlined = [];
+  for (const fam of used) {
+    if (already.has(fam)) continue;
+    const lb = lib.get(fam);
+    if (!lb) continue; // canonical / system / unknown — not ours to supply
+    blocks.push(...lb);
+    inlined.push(fam);
+  }
+  if (!blocks.length) {
+    fs.writeFileSync(file, html);
+    return { file: path.basename(file), inlined: [] };
+  }
+  const style = `<style id="${MARKER}">\n/* auto-embedded by inject-fonts.cjs — deterministic template fonts */\n${blocks.join("\n")}\n</style>`;
+  // Prefer right after <head...>; fall back to before </head>, then <html>, then prepend.
+  if (/<head[^>]*>/i.test(html)) html = html.replace(/<head[^>]*>/i, (m0) => `${m0}\n${style}`);
+  else if (/<\/head>/i.test(html)) html = html.replace(/<\/head>/i, `${style}\n</head>`);
+  else if (/<html[^>]*>/i.test(html))
+    html = html.replace(/<html[^>]*>/i, (m0) => `${m0}\n${style}`);
+  else html = style + "\n" + html;
+
+  fs.writeFileSync(file, html);
+  return { file: path.basename(file), inlined };
+}
+
+function main() {
+  const project = path.resolve(process.argv[2] || "");
+  if (!process.argv[2]) {
+    console.error("usage: inject-fonts.cjs <project-dir> [file.html ...]");
+    process.exit(1);
+  }
+  const lib = loadFontLibrary();
+  let files = process.argv.slice(3);
+  if (!files.length) files = ["index.html", "rail.html", "index_fg.html"];
+  files = files.map((f) => (path.isAbsolute(f) ? f : path.join(project, f)));
+
+  let touched = 0;
+  for (const f of files) {
+    const r = injectInto(f, lib);
+    if (r == null) continue;
+    if (r.inlined.length) {
+      console.log(`[inject-fonts] ${r.file}: embedded ${r.inlined.join(", ")}`);
+      touched++;
+    } else console.log(`[inject-fonts] ${r.file}: no non-canonical fonts to embed`);
+  }
+  if (!touched)
+    console.log(`[inject-fonts] nothing embedded (all fonts canonical/system or already declared)`);
+}
+main();
diff --git a/.claude/skills-media/embedded-captions/scripts/lib-dna.cjs b/.claude/skills-media/embedded-captions/scripts/lib-dna.cjs
new file mode 100644
index 000000000..8ab5eee72
--- /dev/null
+++ b/.claude/skills-media/embedded-captions/scripts/lib-dna.cjs
@@ -0,0 +1,201 @@
+/*
+ * lib-dna.cjs — DNA registry loader + scene-token resolver.
+ *
+ * A DNA is a complete visual language (type, palette logic, motion grammar, hero
+ * orchestration) that PARAMETERIZES per scene instead of shipping fixed look files.
+ * The resolver folds in safe-zones.json's v2 scene measurements (palette / optics /
+ * lighting) and envelope.json's loudness so the compiled tokens fit THIS clip:
+ *
+ *   accent      — scene-sampled when the DNA says "scene" (clamped readable)
+ *   text shadow — contact shadow cast along the measured light direction
+ *   depth match — embed text blur follows the scene's depth-of-field
+ *   hero amp    — entrance amplitude coupled to the spoken word's loudness (RMS)
+ *
+ * Everything is read from files written by deterministic scripts — no randomness.
+ */
+const path = require("path");
+const fs = require("fs");
+
+const SKILL_ROOT = path.resolve(__dirname, "..");
+const DNA_DIR = path.join(SKILL_ROOT, "dna");
+
+// legacy template names → DNA (back-compat for existing plan.json files)
+const LEGACY = { "cinematic-cream": "cream" };
+
+function list() {
+  try {
+    return fs
+      .readdirSync(DNA_DIR)
+      .filter((f) => f.endsWith(".json"))
+      .map((f) => f.replace(/\.json$/, ""))
+      .sort();
+  } catch {
+    return [];
+  }
+}
+
+function load(name) {
+  const p = path.join(DNA_DIR, `${name}.json`);
+  if (!fs.existsSync(p)) {
+    throw new Error(`unknown DNA "${name}". Available: ${list().join(", ")}`);
+  }
+  return JSON.parse(fs.readFileSync(p, "utf8"));
+}
+
+function readJson(p) {
+  try {
+    return JSON.parse(fs.readFileSync(p, "utf8"));
+  } catch {
+    return null;
+  }
+}
+
+// ── audio impact: where does this window's loudness rank within the clip? ──────
+// envelope.json = { hop, rms: [linear 0..1 per hop] } (audio-envelope.cjs)
+function heroImpact(project, t0, t1) {
+  const env = readJson(path.join(project, "envelope.json"));
+  if (!env || !Array.isArray(env.rms) || !env.rms.length) return 0.6; // neutral default
+  const hop = env.hop || 0.05;
+  const i0 = Math.max(0, Math.floor(t0 / hop)),
+    i1 = Math.min(env.rms.length, Math.ceil(t1 / hop));
+  if (i1 <= i0) return 0.6;
+  const span = i1 - i0;
+  const mean = (arr, a, b) => {
+    let s = 0;
+    for (let i = a; i < b; i++) s += arr[i];
+    return s / (b - a);
+  };
+  const target = mean(env.rms, i0, i1);
+  // percentile of this window vs all same-length windows across the clip
+  let below = 0,
+    total = 0;
+  for (let s = 0; s + span <= env.rms.length; s += Math.max(1, Math.floor(span / 2))) {
+    total++;
+    if (mean(env.rms, s, s + span) <= target) below++;
+  }
+  return total ? below / total : 0.6;
+}
+
+// ── scene-aware token resolution ───────────────────────────────────────────────
+function resolveTokens(dna, project, opts) {
+  const sz = readJson(path.join(project, "safe-zones.json")) || {};
+  const palette = sz.palette || {};
+  const optics = sz.optics || {};
+  const lighting = sz.lighting || {};
+
+  // accent: "scene" → sampled suggestion, else literal.
+  // accentMode "counter" (loud registers): the accent must FIGHT the scene's
+  // temperature, not harmonize with it — a sampled warm sienna inside a tungsten room
+  // camouflages (the warm-on-warm failure a blind review caught across three DNAs).
+  // Counter-pole = rotate the sampled hue 180° and push saturation/lightness hot.
+  let accent =
+    dna.palette.accent === "scene"
+      ? palette.accentSuggestion || dna.palette.accent_fallback || "#e3c06a"
+      : dna.palette.accent;
+  if (
+    dna.palette.accentMode === "counter" &&
+    dna.palette.accent === "scene" &&
+    /^#([0-9a-f]{6})$/i.test(accent || "")
+  ) {
+    const n = parseInt(accent.slice(1), 16);
+    let r = (n >> 16) / 255,
+      g2 = ((n >> 8) & 255) / 255,
+      b = (n & 255) / 255;
+    const mx = Math.max(r, g2, b),
+      mn = Math.min(r, g2, b),
+      d = mx - mn;
+    let h = 0;
+    if (d > 0) {
+      h = mx === r ? ((g2 - b) / d) % 6 : mx === g2 ? (b - r) / d + 2 : (r - g2) / d + 4;
+      h *= 60;
+      if (h < 0) h += 360;
+    }
+    h = (h + 180) % 360;
+    const s = 0.85,
+      v = 0.92; // hot, acid, readable
+    const c = v * s,
+      x = c * (1 - Math.abs(((h / 60) % 2) - 1)),
+      m = v - c;
+    const [r2, g3, b2] =
+      h < 60
+        ? [c, x, 0]
+        : h < 120
+          ? [x, c, 0]
+          : h < 180
+            ? [0, c, x]
+            : h < 240
+              ? [0, x, c]
+              : h < 300
+                ? [x, 0, c]
+                : [c, 0, x];
+    const f = (q) =>
+      Math.round((q + m) * 255)
+        .toString(16)
+        .padStart(2, "0");
+    accent = `#${f(r2)}${f(g3)}${f(b2)}`;
+  }
+
+  const dark = dna.palette.scheme === "dark-on-light";
+
+  // contact shadow along the measured light direction + a soft ambient.
+  // light-on-dark also gets the warm bloom layer when the DNA asks for it.
+  let shadowParts = [];
+  if (dna.optics && dna.optics.contactShadow) {
+    const sd = lighting.shadow || { dx: 0, dy: 3 };
+    shadowParts.push(`${sd.dx}px ${sd.dy + 1}px 10px rgba(0,0,0,${dark ? 0.22 : 0.32})`);
+  }
+  shadowParts.push(dark ? "0 1px 14px rgba(0,0,0,0.10)" : "0 2px 22px rgba(0,0,0,0.28)");
+  if (dna.optics && dna.optics.warmBloom) shadowParts.push("0 0 26px rgba(255,214,160,0.18)");
+  const textShadow = shadowParts.join(", ");
+
+  // depth match: embed (bg) text picks up the scene's bokeh; fg/rail stay sharp
+  const blurPx = (dna.optics && dna.optics.depthMatch && optics.suggestedTextBlurPx) || 0;
+  const baseFilter = dna.filter && dna.filter !== "none" ? dna.filter : "";
+  const filterBg = `${baseFilter}${blurPx ? ` blur(${blurPx}px)` : ""}`.trim() || "none";
+  const filterFg = baseFilter || "none";
+
+  // hero orchestration + loudness coupling — one config PER hero (scarcity is per
+  // beat/block, not per clip; each hero's amplitude follows ITS spoken loudness)
+  const heroGroups = (opts && (opts.heroGroups || (opts.heroGroup ? [opts.heroGroup] : []))) || [];
+  const heroes = heroGroups.map((hg) => {
+    const impact = heroImpact(project, hg.in, Math.min(hg.in + 0.7, hg.out));
+    const amp = +((0.75 + impact * 0.5) * (hg.minor ? 0.7 : 1)).toFixed(3); // 0.75…1.25, minors damped
+    return {
+      // spread the DNA's full hero block (entrance/perLetter/glow/breathe/ripple/loom/
+      // letterBlur/sheen/echoes/… — new fx fields flow through with no plumbing),
+      // then the per-hero computed values
+      ...dna.hero,
+      entrance: dna.hero.entrance || "emergence",
+      dimOthers: dna.hero.dimOthers != null ? dna.hero.dimOthers : 0.45,
+      id: hg.id,
+      minor: hg.minor === true,
+      in: hg.in,
+      out: hg.out,
+      amp,
+      heroColor: dna.palette.heroColor === "accent" ? accent : null,
+    };
+  });
+  const hero = heroes[0] || null; // back-compat single accessor
+
+  return {
+    fontFamily: dna.font.family,
+    capColor: dna.palette.cap_color,
+    blend: dna.palette.blend,
+    accent,
+    textShadow,
+    filterBg,
+    filterFg,
+    blurPx,
+    motion: dna.motion,
+    hero,
+    heroes,
+    heroCss: (dna.hero && dna.hero.css) || "",
+    heroCase: (dna.hero && dna.hero.case) || "none",
+    heroTracking: (dna.hero && dna.hero.tracking) || "0",
+    dnaCss: dna.css || "",
+    register: dna.register,
+    name: dna.name,
+  };
+}
+
+module.exports = { LEGACY, list, load, resolveTokens, heroImpact };
diff --git a/.claude/skills-media/embedded-captions/scripts/make-cinematic.cjs b/.claude/skills-media/embedded-captions/scripts/make-cinematic.cjs
new file mode 100644
index 000000000..fb1d9bacd
--- /dev/null
+++ b/.claude/skills-media/embedded-captions/scripts/make-cinematic.cjs
@@ -0,0 +1,1205 @@
+#!/usr/bin/env node
+/*
+ * make-cinematic.cjs — compile cinematic.json → plan.json (then make-composition.cjs).
+ * CINEMATIC MODE, raised to BLOCK level. The agent authors thought-BLOCKS — lines of
+ * words, which plane each block stacks in, at most one promoted HERO word — and the
+ * compiler lowers that into the classic plan.json with everything deterministic
+ * generated, so the Cinematic failure modes seen in the wild become impossible:
+ *   - READING ORDER by construction: lines stack in declaration order inside a flex
+ *     plane (spoken order = visual order; a hero can never sit below later words)
+ *   - timings from the transcript BY SEQUENCE (no hand-copied times; duplicates by position)
+ *   - accumulate-within-block / page-flip-between-blocks rhythm generated:
+ *     lines of a block share the block's out (they accumulate, then clear together
+ *     when the next block's first word lands); the NEXT block enters fresh
+ *   - hero hand-off: the promoted word is lifted OUT of its line, enters as the hero
+ *     (its own plane, BIG) when spoken, holds to the END of its block, exits cleanly
+ *   - fg fallback: safe-zones verdict "fg" → caption_layer:"fg" automatically
+ *
+ *   node make-cinematic.cjs <project-dir>
+ *
+ * cinematic.json schema:
+ * {
+ *   "template": "cinematic-cream",
+ *   "width": 1920, "height": 1080, "fps": 30,
+ *   "planes": {                       // layout REGIONS — place them using safe-zones.json
+ *     "narr": "top: 14%; left: 4%; width: 26%;",            // string or {css}
+ *     "hero": null                    // null/absent → auto from safe-zones heroAnchor
+ *   },
+ *   "blocks": [
+ *     { "plane": "narr", "lines": [
+ *         { "words": ["You","need","to"],        "css": "font-size: calc(0.05*var(--h)); font-weight:600;" },
+ *         { "words": ["judge","us","by","the"],  "css": "font-size: calc(0.062*var(--h)); font-weight:700;" },
+ *         { "words": ["actions"],                "hero": true,
+ *           "text": "ACTIONS", "css": "font-size: calc(0.24*var(--h)); font-weight:900; text-transform:uppercase;" },
+ *         { "words": ["that","we","take."],      "css": "font-size: calc(0.05*var(--h));" },
+ *         // per-line escape hatch: "layer":"fg" lifts a line ABOVE the subject matte
+ *         // (use when the occlusion gate reports a context line eaten by the subject)
+ *         { "words": ["over","the","subject"],     "layer": "fg" }
+ *       ] },
+ *     { "plane": "narr", "lines": [ ... next thought ... ] }
+ *   ],
+ *   "tones": { "default": "soft", "hero": "present" }       // optional
+ * }
+ * Rules: words must match the transcript verbatim in spoken order across all blocks.
+ * Mark at most ONE line "hero": true per clip (scarcity); its words form the hero
+ * (usually a single word; "text" overrides the display form).
+ */
+const path = require("path");
+const fs = require("fs");
+
+const norm = (s) =>
+  String(s == null ? "" : s)
+    .toLowerCase()
+    .replace(/[^a-z0-9']/g, "");
+const LOOKAHEAD = 40;
+
+// Authored css WITHOUT a font-size renders at browser-default ~16px (an
+// invisible ribbon) and every gate still passes — observed in the cold-start
+// E2E. Guarantee the default is present whenever the author omitted it.
+function ensureFontSize(css, defaultDecl) {
+  if (!css) return defaultDecl;
+  return /font-size\s*:/.test(css) ? css : defaultDecl + " " + css;
+}
+
+function die(m) {
+  console.error(`[make-cinematic] ${m}`);
+  process.exit(1);
+}
+
+function main() {
+  const project = path.resolve(process.argv[2] || "");
+  if (!process.argv[2]) die("usage: make-cinematic.cjs <project-dir>");
+  const cj = path.join(project, "cinematic.json");
+  const tj = path.join(project, "transcript.json");
+  if (!fs.existsSync(cj)) die(`missing ${cj} — author it first (schema in this header)`);
+  if (!fs.existsSync(tj)) die(`missing ${tj} — run prepare.sh first`);
+  const C = JSON.parse(fs.readFileSync(cj, "utf8"));
+  const tr = (JSON.parse(fs.readFileSync(tj, "utf8")).words || []).filter(
+    (w) => w && "start" in w && "end" in w,
+  );
+  if (!tr.length) die("transcript has no word timings");
+
+  // safe-zones: fg verdict + heroAnchor default
+  let sz = null;
+  try {
+    sz = JSON.parse(fs.readFileSync(path.join(project, "safe-zones.json"), "utf8"));
+  } catch {}
+  // author override first (borderline scenes: coverage near the line, agitated subject),
+  // else the safe-zones verdict.
+  // narration legibility follows the verdict; the HERO is judged separately — it WANTS
+  // occlusion (~30–55% is the product). fg for the hero is the LAST resort: only when no
+  // height band achieves ≤62% predicted occlusion (safe-zones heroBands). An explicit
+  // author caption_layer:"fg" still forces everything front.
+  const authorFg = C.caption_layer === "fg";
+  const narrFg = authorFg || (sz && sz.recommendation === "fg");
+  const hb = sz && sz.heroBands;
+  const heroFeasible = authorFg ? false : hb ? hb.feasible : !narrFg;
+  const globalFg = narrFg; // narration layer (name kept for the lowering below)
+
+  const W = C.width || 1920,
+    H = C.height || 1080,
+    FPS = C.fps || 24;
+  const blocks = C.blocks || [];
+  if (!blocks.length) die("blocks is empty");
+
+  // ── sequence-match every word across blocks/lines ──────────────────────────
+  let p = 0;
+  const missing = [];
+  for (const b of blocks)
+    for (const ln of b.lines || []) {
+      ln._w = (ln.words || []).map((text) => {
+        const t = norm(text);
+        let f = -1;
+        for (let j = p; j < Math.min(tr.length, p + LOOKAHEAD); j++)
+          if (norm(tr[j].text) === t) {
+            f = j;
+            break;
+          }
+        if (f < 0) {
+          missing.push(text);
+          return { text, start: null, end: null };
+        }
+        p = f + 1;
+        return { text, start: tr[f].start, end: tr[f].end, ti: f };
+      });
+    }
+  if (missing.length)
+    die(
+      `words not in transcript (in order): ${missing.join(" ")} — lines must match the transcript verbatim`,
+    );
+
+  // COMPLETENESS GATE — verbatim is a hard rule, so enforce it at compile time: the
+  // sequence matcher's lookahead can silently SKIP transcript words the author forgot
+  // (a real case shipped missing "in our newly released model."). Every transcript word
+  // must be consumed; the only legitimate drops are filler (um/uh/stutters), declared in
+  // cinematic.json "drops": ["um", ...].
+  {
+    const consumed = new Set();
+    for (const b of blocks)
+      for (const ln of b.lines || []) for (const w of ln._w) if (w.ti != null) consumed.add(w.ti);
+    const dropOk = new Set((C.drops || []).map(norm));
+    const FILLER = new Set(["um", "uh", "er", "ah", "hmm", "mm"]);
+    const skipped = tr
+      .map((w, i) => ({ w, i }))
+      .filter(
+        ({ w, i }) => !consumed.has(i) && !dropOk.has(norm(w.text)) && !FILLER.has(norm(w.text)),
+      );
+    if (skipped.length)
+      die(
+        `VERBATIM VIOLATION — ${skipped.length} transcript word(s) never authored (the matcher skipped them): ` +
+          `${skipped.map(({ w }) => `"${w.text}"`).join(" ")} — add them to a line, or declare true filler in "drops": []`,
+      );
+  }
+
+  // text override + multiple words double-renders (override replaces word 1, words
+  // 2..n still draw) — caught cold by a clean-room agent; illegal for ANY hero line.
+  for (const b of blocks)
+    for (const ln of b.lines || []) {
+      if (ln.hero && ln.text && (ln.words || []).length > 1)
+        die(
+          `hero line ["${(ln.words || []).join('" "')}"] has BOTH multiple words and a "text" override — drop "text" (words render verbatim; DNA case applies) or promote a single word.`,
+        );
+    }
+
+  // ── block windows: in = first word −lead; out = page-flip = next block's first word −0.28 (or +1.2 hold) ──
+  const LEAD = 0.18;
+  const bw = blocks.map((b) => {
+    const ws = (b.lines || []).flatMap((l) => l._w);
+    return { first: Math.min(...ws.map((w) => w.start)), last: Math.max(...ws.map((w) => w.end)) };
+  });
+  let srcDur = null;
+  try {
+    const cp = require("child_process");
+    for (const f of ["source.mp4"].concat(
+      fs.readdirSync(project).filter((x) => /\.(mp4|mov|webm)$/i.test(x)),
+    )) {
+      const fp = path.join(project, f);
+      if (!fs.existsSync(fp)) continue;
+      const d = parseFloat(
+        cp.execFileSync(
+          "ffprobe",
+          [
+            "-v",
+            "error",
+            "-show_entries",
+            "format=duration",
+            "-of",
+            "default=nokey=1:noprint_wrappers=1",
+            fp,
+          ],
+          { encoding: "utf8" },
+        ),
+      );
+      if (d > 0) {
+        srcDur = d;
+        break;
+      }
+    }
+  } catch {}
+  const DUR = +(srcDur || bw[bw.length - 1].last + 0.6).toFixed(3);
+  // ── SLOT layout + paging. Lines get FIXED absolute positions (no flex reflow — the
+  // "lower line jumps up when the upper one clears" bug is impossible by construction).
+  // Lines accumulate down the plane like a poem; the plane PAGE-FLIPS (all visible lines
+  // clear together, the next line restarts at the top) only when (a) the plane is full,
+  // (b) a block sets "flip": true, or (c) a block boundary coincides with a real speech
+  // pause (≥0.6s). Block windows (bw) are kept only for the hero's hold.
+  for (let i = 0; i < bw.length; i++) {
+    bw[i].in = Math.max(0, bw[i].first - LEAD);
+    bw[i].out = Math.min(DUR - 0.05, Math.min(bw[i].last, DUR - 0.05) + 0.9);
+    // a block's hold (incl. a LOCKUP's) yields to the NEXT block's entrance — the same
+    // page-flip semantics columns already have; floor: its own words must finish
+    if (i + 1 < bw.length)
+      bw[i].out = Math.max(
+        Math.min(bw[i].last, DUR - 0.05) + 0.15,
+        Math.min(bw[i].out, bw[i + 1].first - 0.28),
+      );
+  }
+  const fracOfLine = (css) => {
+    const m = (css || "").match(/font-size\s*:\s*calc\(\s*([\d.]+)\s*\*\s*var\(--h\)/);
+    return m ? +m[1] : 0.05;
+  };
+  const planeBudgetPx = (pk) => {
+    const css =
+      (C.planes &&
+        C.planes[pk] &&
+        (typeof C.planes[pk] === "string" ? C.planes[pk] : C.planes[pk].css)) ||
+      "";
+    const m = css.match(/height\s*:\s*([\d.]+)%/);
+    return (m ? +m[1] / 100 : 0.3) * H;
+  };
+
+  // ── planes: agent's + auto LOCKUP planes (one per hero block) ───────────────
+  // The LOCKUP is the layout answer to "the sentence reads broken around the hero":
+  // a hero block's lines do NOT scatter into the narration column — kicker, HERO and
+  // tail compose as ONE bonded ORBIT (context anchored at the hero's edges, diagonal
+  // read). DEPTH: context EMBEDS (bg) with the hero — one shared depth; per-line
+  // `layer:"fg"` is the escape hatch when the matte eats a context line (gate tells you).
+  const planes = {};
+  for (const [k, v] of Object.entries(C.planes || {})) {
+    if (v == null) continue;
+    let css = typeof v === "string" ? v : v.css || "";
+    if (!/text-align\s*:/.test(css)) css += " text-align:center;"; // slot children are absolute; only alignment carries
+    planes[k] = { css };
+  }
+  // multiple heroes allowed — scarcity is per BLOCK (≤1 per thought), not per clip.
+  // The LARGEST authored hero is the APEX: it gets the full lockup embed (centered on
+  // the subject, matte showcase). Smaller heroes are MINOR peaks: they stay IN their
+  // column's flow as oversized emphasis lines (fg, hero motion at reduced amplitude) —
+  // not every beat needs the matte showcase; that's what keeps the apex an event.
+  const allHeroBlocks = [];
+  blocks.forEach((b, bi) => {
+    const hs = (b.lines || []).filter((l) => l.hero === true);
+    if (hs.length > 1)
+      die(
+        `block ${bi} has ${hs.length} hero lines — at most ONE hero per block (scarcity = per beat)`,
+      );
+    if (hs.length === 1)
+      allHeroBlocks.push({ b, bi, ln: hs[0], frac: fracOfLine(hs[0].css) || 0.24 });
+  });
+  const apexFracAll = Math.max(...allHeroBlocks.map((h) => h.frac), 0);
+  // placement: "column" keeps even an APEX in its column's flow (the hero bursts the
+  // column instead of crossing the subject) — the sanctioned alternative to the
+  // subject-anchored lockup. Author it per hero line: { "hero": true, "placement": "column" }.
+  const heroBlocks = allHeroBlocks.filter(
+    (h) => h.frac >= apexFracAll - 1e-6 && (h.ln.placement || "subject") !== "column",
+  );
+  const minorHeroBis = new Set(
+    allHeroBlocks
+      .filter((h) => h.frac < apexFracAll - 1e-6 || (h.ln.placement || "subject") === "column")
+      .map((h) => h.bi),
+  );
+  const columnApexBis = new Set(
+    allHeroBlocks
+      .filter((h) => h.frac >= apexFracAll - 1e-6 && (h.ln.placement || "subject") === "column")
+      .map((h) => h.bi),
+  );
+  if (minorHeroBis.size)
+    console.log(
+      `[make-cinematic] ${minorHeroBis.size} minor hero(es) stay in the column flow (apex gets the lockup embed)`,
+    );
+  const lockupName = (bi) => `lockup-b${bi}`;
+  const lockupTemplate =
+    C.planes && C.planes.lockup
+      ? typeof C.planes.lockup === "string"
+        ? C.planes.lockup
+        : C.planes.lockup.css
+      : null;
+  delete planes.lockup; // template only — not a real plane
+  for (const hRef of heroBlocks) {
+    const a = sz && sz.heroAnchor && sz.heroAnchor.plane;
+    // band pick: target ~40% occlusion AND a band the DNA's text can survive on
+    // (skip bright bands when luma data exists) — heroAnchor.yPct is the fallback
+    let heroTop = a ? a.yPct : 30;
+    if (hb && hb.profile && hb.profile.length) {
+      const ok = hb.profile.filter(
+        (b2) => b2.occPct >= 12 && b2.occPct <= 62 && (b2.bgLuma == null || b2.bgLuma <= 165),
+      );
+      const pool = ok.length ? ok : hb.profile;
+      const best = pool.reduce((x, y) =>
+        Math.abs(y.occPct - 40) < Math.abs(x.occPct - 40) ? y : x,
+      );
+      heroTop = +(best.topPct + 6.5).toFixed(1);
+    }
+    const heroFrac = (hRef.ln.css || "").match(/calc\(\s*([\d.]+)\s*\*\s*var\(--h\)/);
+    // the lockup is taller than the hero alone (context above+below) — anchor so the
+    // HERO band (not the plane top) lands on the target, then clamp so the WHOLE
+    // lockup (pre + hero + post) stays on frame
+    const heroIdx2 = (hRef.b.lines || []).indexOf(hRef.ln);
+    const preH = (hRef.b.lines || [])
+      .filter((l, i) => l !== hRef.ln && i < heroIdx2)
+      .reduce(
+        (s, l) =>
+          s + (fracOfLine(l.css) * 100 * 1.32 + Math.max(1.6, fracOfLine(l.css) * 100 * 0.38)),
+        0,
+      );
+    const postH = (hRef.b.lines || [])
+      .filter((l, i) => l !== hRef.ln && i > heroIdx2)
+      .reduce(
+        (s, l) =>
+          s + (fracOfLine(l.css) * 100 * 1.32 + Math.max(1.6, fracOfLine(l.css) * 100 * 0.38)),
+        0,
+      );
+    const heroHpct = (heroFrac ? +heroFrac[1] : 0.24) * 100 * 1.12;
+    const totalH = preH + heroHpct + postH;
+    let top = +Math.max(2, Math.min(96 - totalH, heroTop - heroHpct / 2 - preH)).toFixed(1);
+    const css = lockupTemplate
+      ? lockupTemplate.replace(/top:\s*[\d.]+%/, `top: ${top}%`)
+      : a
+        ? `top: ${top}%; left: ${a.xPct}%; width: ${a.wPct}%; text-align: center;`
+        : `top: ${top}%; left: 6%; width: 88%; text-align: center;`;
+    planes[lockupName(hRef.bi)] = { css };
+    hRef.plane = lockupName(hRef.bi);
+  }
+  // legacy alias: an author-defined "hero" plane positions the FIRST lockup
+  if (planes.hero) {
+    if (heroBlocks.length) {
+      planes[lockupName(heroBlocks[0].bi)] = planes.hero;
+    }
+    delete planes.hero;
+  }
+
+  // ── PER-PLANE LEGIBILITY COMPENSATION ────────────────────────────────────
+  // The DNA fixes hue + blend; the SCENE decides whether that survives. Match each
+  // plane to its best-overlapping measured zone and ladder the treatment:
+  //   luma > 150 → opaque (blend:normal) + strong tight scrim — screen/blend washes out
+  //   luma 95–150 → keep the DNA blend, strengthen the glyph scrim
+  const planeComp = {};
+  if (sz && sz.zones) {
+    const zlist = Object.entries(sz.zones).filter(([, z]) => z && z.meanLuma != null);
+    for (const [pk, pv] of Object.entries(C.planes || {})) {
+      const css0 = typeof pv === "string" ? pv : (pv || {}).css || "";
+      const lm = css0.match(/left:\s*([\d.]+)%/),
+        wm = css0.match(/width:\s*([\d.]+)%/);
+      if (!lm || !wm) continue;
+      const a0 = +lm[1],
+        a1 = a0 + +wm[1];
+      let best = null,
+        bestOv = 0;
+      for (const [, z] of zlist) {
+        const ov = Math.min(a1, z.xPct + z.wPct) - Math.max(a0, z.xPct);
+        if (ov > bestOv) {
+          bestOv = ov;
+          best = z;
+        }
+      }
+      if (!best) continue;
+      // gate on the time PEAK too — a dark wall swept by a bright moving object
+      // (handheld drift, screens) averages "clean" but peaks hot, and text there
+      // washes out exactly when the bright thing passes (real cold-start case)
+      const pkL = best.peakLuma != null ? best.peakLuma : best.meanLuma;
+      if (best.meanLuma > 150 || pkL > 175)
+        planeComp[pk] =
+          " mix-blend-mode: normal; text-shadow: 0 1px 6px rgba(0,0,0,.65), 0 2px 16px rgba(0,0,0,.4);";
+      else if (best.meanLuma > 95 || pkL > 135)
+        planeComp[pk] = " text-shadow: 0 1px 5px rgba(0,0,0,.6), 0 2px 14px rgba(0,0,0,.35);";
+      if (planeComp[pk])
+        console.log(
+          `[make-cinematic] plane "${pk}" zone luma ${best.meanLuma} (peak ${pkL}) → legibility compensation (${best.meanLuma > 150 || pkL > 175 ? "opaque+scrim" : "scrim"})`,
+        );
+    }
+  }
+  // lockup context shares the hero band's luma
+  const bandLuma = sz && sz.heroAnchor && sz.heroAnchor.bandLuma;
+  const lockupComp =
+    bandLuma != null && bandLuma > 150
+      ? " mix-blend-mode: normal; text-shadow: 0 1px 6px rgba(0,0,0,.65), 0 2px 16px rgba(0,0,0,.4);"
+      : bandLuma != null && bandLuma > 95
+        ? " text-shadow: 0 1px 5px rgba(0,0,0,.6), 0 2px 14px rgba(0,0,0,.35);"
+        : "";
+
+  // ── lower to classic plan.json groups (slot layout + per-plane paging) ─────
+  const tones = C.tones || {};
+  let dnaBodyLayer = null;
+  try {
+    const dnaLib0 = require("./lib-dna.cjs");
+    const dn0 = C.dna || (C.template ? dnaLib0.LEGACY[C.template] : "cream");
+    if (dn0) {
+      const d0 = dnaLib0.load(dn0);
+      dnaBodyLayer = d0.bodyLayer || null;
+      // category lock (symmetric): column is every classic DNA's home today,
+      // so this only fires if a future DNA declares a different home.
+      if (d0.deliveries && d0.deliveries.home && d0.deliveries.home !== "column")
+        console.warn(
+          `[make-cinematic] WARN: DNA "${dn0}" declares home="${d0.deliveries.home}" — cinematic use is cross-category and unvalidated.`,
+        );
+    }
+  } catch (e) {
+    if (e.message && e.message.includes("does not support")) throw e;
+  }
+  const groups = [];
+  const heroRefs = heroBlocks; // [{b, bi, ln, plane}]
+  const isHeroBlock = new Set(heroBlocks.map((h) => h.bi));
+  const flat = [];
+  blocks.forEach((b, bi) => {
+    const heroIdx = isHeroBlock.has(bi) ? (b.lines || []).findIndex((l) => l.hero === true) : -1;
+    (b.lines || []).forEach((ln, li) => {
+      if (ln.hero === true && isHeroBlock.has(bi)) return; // APEX heroes slot into their lockup below
+      flat.push({
+        b,
+        bi,
+        ln,
+        plane: heroIdx >= 0 ? lockupName(bi) : b.plane,
+        lockupPos: heroIdx >= 0 ? (li < heroIdx ? "pre" : "post") : null,
+        isMinorHero: ln.hero === true && minorHeroBis.has(bi), // minor peak rides its column
+        first: Math.min(...ln._w.map((w) => w.start)),
+        lastEnd: Math.min(Math.max(...ln._w.map((w) => w.end)), DUR - 0.05),
+        frac: fracOfLine(ln.css),
+      });
+    });
+  });
+  // size sanity: narration below 0.05·h is whisper-tier (36px at 720p) — warn loudly
+  {
+    const tiny = flat.filter((l) => !l.isMinorHero && l.frac > 0 && l.frac < 0.05);
+    if (tiny.length)
+      console.log(
+        `[make-cinematic] ⚠ ${tiny.length} narration line(s) authored below 0.05·h (whisper tier) — body narration wants 0.055–0.07·h: ${tiny
+          .slice(0, 3)
+          .map((l) => `"${l.ln.words.slice(0, 3).join(" ")}…"`)
+          .join(" ")}`,
+      );
+  }
+  // RATIO LOCK — poster lockup typography: context is sized FROM the hero, the way a
+  // title system locks its eyebrow/tagline (kicker & tail ≈ 0.26× the hero height,
+  // clamped to [0.05, 0.085]·h). Hero dominance is structural (~4× height + weight
+  // contrast), so the old mass-rule downscale is gone — whisper-small context was the
+  // disease, not the cure. Too MUCH context is a line-count problem, never a size one.
+  for (const hRef of heroRefs) {
+    const ctx = flat.filter((l) => l.bi === hRef.bi);
+    if (!ctx.length) continue;
+    const heroFracV = fracOfLine(hRef.ln.css || "") || 0.24;
+    const ratioFrac = +Math.min(0.085, Math.max(0.05, heroFracV * 0.26)).toFixed(4);
+    if (ctx.length > 3)
+      console.log(
+        `[make-cinematic] ⚠ lockup-b${hRef.bi} has ${ctx.length} context lines — a lockup wants kicker + hero + tail; move narration to the column (a leading clause can be its own block)`,
+      );
+    const moved = ctx.filter((l) => Math.abs(l.frac - ratioFrac) > 0.002).length;
+    ctx.forEach((l) => {
+      l.ln.css = (l.ln.css || "").replace(
+        /font-size\s*:\s*[^;]+/,
+        `font-size: calc(${ratioFrac} * var(--h))`,
+      );
+      l.frac = ratioFrac;
+    });
+    if (moved)
+      console.log(
+        `[make-cinematic] lockup-b${hRef.bi}: context RATIO-LOCKED to 0.26×hero → ${ratioFrac}·h (${moved} line(s) re-sized)`,
+      );
+  }
+  const byPlane = {};
+  flat.forEach((l) => {
+    (byPlane[l.plane] = byPlane[l.plane] || []).push(l);
+  });
+  // make sure a lockup whose block has NO context lines still exists in the loop
+  for (const hRef of heroRefs) if (!byPlane[hRef.plane]) byPlane[hRef.plane] = [];
+  for (const [pk, ls] of Object.entries(byPlane)) {
+    const isLockup = /^lockup-b/.test(pk);
+    const budget = isLockup ? H : planeBudgetPx(pk); // a lockup is ONE composition — never paginate inside it
+    const hRef = isLockup ? heroRefs.find((h) => h.plane === pk) : null;
+    const heroH = hRef ? (fracOfLine(hRef.ln.css || "") || 0.24) * H * 1.12 + 12 : 0;
+    // ORBIT estimate: where do the hero's left/right edges land inside the (frame-wide,
+    // centered) lockup plane — kicker hangs off the left edge, tail off the right
+    let orbit = null;
+    if (hRef) {
+      const disp = String(hRef.ln.text || (hRef.ln.words || []).join(" "));
+      const fpx = (fracOfLine(hRef.ln.css || "") || 0.24) * H;
+      const estW = Math.min(
+        W * 0.94,
+        Math.max(fpx * 1.2, disp.replace(/\s/g, "").length * fpx * 0.6),
+      );
+      const planeCss0 = (planes[pk] && planes[pk].css) || "";
+      const _pl = ((planeCss0.match(/left:\s*([\d.]+)%/) || [0, 0])[1] * W) / 100;
+      const pw = ((planeCss0.match(/width:\s*([\d.]+)%/) || [0, 100])[1] * W) / 100;
+      const heroLeft = Math.max(0, (pw - estW) / 2);
+      // side-aware: anchor context to the CLEANER side of THIS hero's window — the
+      // kicker/tail must land on scene, not on a large/moving subject
+      let side = (sz && sz.subject && sz.subject.clearerSide) || "left";
+      try {
+        const hin = Math.min(...hRef.ln._w.map((w) => w.start));
+        const win = (sz.windows || []).find((w2) => hin >= w2.in - 0.3 && hin <= w2.out + 0.3);
+        if (win && win.clearerSide) side = win.clearerSide;
+      } catch {}
+      orbit = {
+        left: Math.round(heroLeft),
+        right: Math.round(Math.max(0, pw - heroLeft - estW)),
+        maxW: Math.round(Math.min(estW * 0.75, pw * 0.55)),
+        side,
+      };
+    }
+    const pages = [];
+    let page = [],
+      slot = 0;
+    for (const l of ls) {
+      // the HERO occupies its slot between pre- and post-context, in spoken order
+      if (hRef && hRef.slotPx == null && l.lockupPos === "post") {
+        hRef.slotPx = Math.round(slot);
+        slot += heroH;
+      }
+      const lineH = l.frac * H * 1.32 + Math.max(12, Math.round(l.frac * H * 0.38)); // ink overflows the 1.0 line-box (+shadows) — breathe in proportion to the type
+      const prev = page[page.length - 1];
+      const pauseGap = prev ? l.first - prev.lastEnd : 0;
+      const boundary = prev && l.bi !== prev.bi;
+      // a block carrying a COLUMN-PLACED apex is one composition — never split it on
+      // budget (the oversized hero legitimately exceeds the column's page height)
+      const unbreakable = columnApexBis.has(l.bi) && prev && prev.bi === l.bi;
+      if (
+        page.length &&
+        !unbreakable &&
+        (slot + lineH > budget || (boundary && l.b.flip === true) || (boundary && pauseGap >= 0.6))
+      ) {
+        pages.push(page);
+        page = [];
+        slot = 0;
+      }
+      l.slotPx = Math.round(slot);
+      if (isLockup) l._orbit = orbit;
+      slot += lineH;
+      page.push(l);
+    }
+    if (hRef && hRef.slotPx == null) {
+      hRef.slotPx = Math.round(slot);
+    } // hero is the block's last line
+    if (page.length) pages.push(page);
+    pages.forEach((pg, pi) => {
+      const nextFirst = pi + 1 < pages.length ? pages[pi + 1][0].first : null;
+      const maxEnd = Math.max(...pg.map((l) => l.lastEnd));
+      let out =
+        nextFirst != null
+          ? Math.max(maxEnd + 0.01, Math.min(DUR - 0.05, nextFirst - 0.28))
+          : Math.min(DUR - 0.05, maxEnd + 1.2);
+      // THE LOCKUP OWNS THE FRAME: a sidebar page must not linger into an apex
+      // lockup's window (its kicker/tail can land in the same zone → text-on-text)
+      if (!isLockup)
+        for (const hRef2 of heroRefs) {
+          const lkIn = bw[hRef2.bi].first - 0.18;
+          if (lkIn > maxEnd - 0.2 && lkIn < out)
+            out = Math.max(maxEnd + 0.01, Math.min(out, lkIn - 0.28));
+        }
+      pg.forEach((l, li) => {
+        l.pageIdx = pi;
+        if (!isLockup)
+          for (const hRef2 of heroRefs) {
+            const lkOut = bw[hRef2.bi].out;
+            const lkIn2 = bw[hRef2.bi].first - 0.18;
+            const enter0 = Math.max(0, l.first - LEAD);
+            if (enter0 > lkIn2 && enter0 < lkOut)
+              l._delayIn = +Math.min(l.first, Math.max(enter0, lkOut - 0.2)).toFixed(3);
+          }
+        // a LOCKUP fades as ONE unit: context lines exit with the hero (block window),
+        // never linger on page timing after the hero has left
+        l.out = l.lockupPos ? +Math.min(out, bw[l.bi].out).toFixed(3) : +out.toFixed(3);
+        l.in = l._delayIn != null ? l._delayIn : +Math.max(0, l.first - LEAD).toFixed(3);
+        // first line of a NEW page: don't enter before the old page has begun clearing
+        if (li === 0 && pi > 0)
+          l.in = +Math.min(l.first, Math.max(l.first - LEAD, pages[pi - 1][0].out - 0.02)).toFixed(
+            3,
+          );
+      });
+    });
+  }
+  let gid = 0;
+  for (const l of flat) {
+    l.gid = l.isMinorHero ? `h-${l.bi}` : `b${l.bi}-l${gid++}`;
+    // depth model: lockup CONTEXT embeds (bg) WITH the hero — the orbit anchors it
+    // beside the head/shoulder so it reads on the scene, one shared depth; narration
+    // columns embed too unless the DNA declares bodyLayer:"fg" (loud's announce-style).
+    // Minor heroes ride their column in FRONT. Per-line layer overrides any default.
+    // ORBIT depth: lockup context lands BESIDE the subject (kicker/tail at the hero's
+    // edges) — so it EMBEDS (bg) like the hero; the whole composition shares one depth.
+    // fg remains for: minor heroes (column emphasis), a DNA's bodyLayer (loud announces),
+    // scene verdict FG (globalFg), and explicit per-line "layer" overrides.
+    const defLayer = l.isMinorHero ? "fg" : dnaBodyLayer || "bg";
+    groups.push({
+      id: l.gid,
+      plane: l.plane,
+      layer: globalFg ? "fg" : l.ln.layer || l.b.layer || defLayer,
+      ...(l.isMinorHero ? { hero: true, ...(columnApexBis.has(l.bi) ? {} : { minor: true }) } : {}),
+      tone: l.isMinorHero ? tones.hero || "present" : l.ln.tone || tones.default || "soft",
+      allow_overlap: true,
+      // a MINOR hero holds only to the end of ITS thought (+a breath) — lingering with
+      // the page through a long pause leaves it co-visible with the next apex
+      in: l.in,
+      out: l.isMinorHero ? +Math.min(l.out, bw[l.bi].out + 0.3).toFixed(3) : l.out,
+      // carry the PLANE's text-align onto each slotted line (absolute children don't
+      // reliably inherit through the template's .cap centering — authored "right edge
+      // hugs the silhouette" was silently centered)
+      css:
+        (l.lockupPos && l._orbit
+          ? (l.ln.anchor || (l.lockupPos === "pre" ? l._orbit.side : l._orbit.side)) === "left"
+            ? `position:absolute;top:${l.slotPx}px;left:${l._orbit.left}px;right:auto;max-width:${l._orbit.maxW}px;text-align:left; `
+            : `position:absolute;top:${l.slotPx}px;right:${l._orbit.right}px;left:auto;max-width:${l._orbit.maxW}px;text-align:right; `
+          : `position:absolute;left:0;right:0;top:${l.slotPx}px; ` +
+            (() => {
+              const pc =
+                (C.planes &&
+                  C.planes[l.plane] &&
+                  (typeof C.planes[l.plane] === "string"
+                    ? C.planes[l.plane]
+                    : C.planes[l.plane].css)) ||
+                "";
+              const ta = pc.match(/text-align\s*:\s*(left|right|center)/);
+              return ta ? `text-align:${ta[1]}; ` : "";
+            })()) +
+        ensureFontSize(l.ln.css, "font-size: calc(0.05 * var(--h)); font-weight: 600;") +
+        (l.lockupPos ? lockupComp : planeComp[l.plane] || ""),
+      words: l.ln._w.map((w, wi2) => ({
+        // minor/column heroes honor the display-form override too (single-word lines)
+        text: l.isMinorHero && l.ln.text && wi2 === 0 && l.ln._w.length === 1 ? l.ln.text : w.text,
+        start: w.start,
+        end: Math.min(w.end, DUR - 0.05),
+        ti: w.ti,
+      })),
+    });
+  }
+  for (const hRef of heroRefs) {
+    const { bi, ln } = hRef;
+    const w0 = ln._w[0];
+    groups.push({
+      id: `h-${bi}`,
+      hero: true,
+      plane: hRef.plane,
+      layer: ln.layer || (heroFeasible ? "bg" : "fg"),
+      tone: tones.hero || "present",
+      allow_overlap: true,
+      in: +Math.max(0, w0.start - 0.02).toFixed(3),
+      out: +bw[bi].out.toFixed(3),
+      css:
+        `position:absolute;left:0;right:0;top:${hRef.slotPx || 0}px; text-align:center; ` +
+        ensureFontSize(
+          ln.css,
+          "font-size: calc(0.24 * var(--h)); font-weight: 900; white-space: nowrap;",
+        ), // case/tracking come from the DNA's hero treatment
+      words: ln._w.map((w, i) => ({
+        text: i === 0 && ln.text ? ln.text : w.text,
+        start: w.start,
+        end: Math.min(w.end, DUR - 0.05),
+        ti: w.ti,
+      })),
+    });
+    if (!heroFeasible)
+      console.log(
+        "[make-cinematic] no hero band ≤62% predicted occlusion → hero rendered in FRONT (last resort)",
+      );
+  }
+  // scarcity spacing: heroes must breathe apart (≥ a beat between windows)
+  const heroGs = groups.filter((g) => g.hero === true).sort((a, b) => a.in - b.in);
+  for (let i = 1; i < heroGs.length; i++) {
+    const gap = heroGs[i].in - heroGs[i - 1].out;
+    if (gap < 0.6)
+      console.log(
+        `[make-cinematic] ⚠ heroes "${heroGs[i - 1].words[0].text}" and "${heroGs[i].words[0].text}" are only ${gap.toFixed(2)}s apart — peaks need a beat of air between them (consider demoting one to an emphasis line)`,
+      );
+  }
+  // proximity: narration planes should HUG the silhouette (the embed reads as in-scene
+  // only when typography interacts with the subject) — warn on far-parked planes.
+  if (sz && sz.subject) {
+    for (const [pk2, pv] of Object.entries(C.planes || {})) {
+      if (/^lockup/.test(pk2) || pk2 === "hero" || pv == null) continue;
+      const css2 = typeof pv === "string" ? pv : pv.css || "";
+      const lm = css2.match(/left\s*:\s*([\d.]+)%/),
+        wm = css2.match(/width\s*:\s*([\d.]+)%/);
+      if (!lm || !wm) continue;
+      const pl = +lm[1],
+        pr = +lm[1] + +wm[1];
+      const gap =
+        pr <= sz.subject.colMinPct
+          ? sz.subject.colMinPct - pr
+          : pl >= sz.subject.colMaxPct
+            ? pl - sz.subject.colMaxPct
+            : 0;
+      if (gap > 12)
+        console.log(
+          `[make-cinematic] ⚠ plane "${pk2}" sits ${gap.toFixed(0)}% away from the silhouette — embeds read in-scene when text HUGS the subject (use safe-zones zones.hugLeft/hugRight, gap 2–6%)`,
+        );
+    }
+  }
+  const plan = {
+    mode: "template",
+    dna: C.dna || (C.template ? undefined : "cream"), // canonical: name a DNA; default cream
+    template: C.template || "cinematic-cream",
+    compiled_by: "make-cinematic.cjs",
+    width: W,
+    height: H,
+    fps: FPS,
+    duration: DUR,
+    ...(globalFg && (!heroRefs.length || !heroFeasible) ? { caption_layer: "fg" } : {}), // mixed narration-fg + hero-bg → per-group layers (hybrid render)
+    planes: Object.fromEntries(Object.entries(planes).map(([k, v]) => [k, { css: v.css }])),
+    groups,
+  };
+  fs.writeFileSync(path.join(project, "plan.json"), JSON.stringify(plan, null, 2));
+  console.log(
+    `[make-cinematic] ${blocks.length} block(s) → ${groups.length} group(s)` +
+      `${heroRefs.length ? `, ${heroRefs.length} hero(es): ${heroRefs.map((h) => `"${h.ln.text || h.ln.words[0]}"`).join(" · ")} (each holds to its block end, lockup-composed)` : ""}` +
+      `${globalFg ? ", caption_layer=fg (safe-zones verdict)" : ""}, canvas ${DUR}s`,
+  );
+  // straight into the existing template compiler
+  const cp2 = require("child_process");
+  let r = cp2.spawnSync("node", [path.join(__dirname, "make-composition.cjs"), project], {
+    stdio: "inherit",
+  });
+  if ((r.status || 0) !== 0) process.exit(r.status);
+
+  // ── RE-SLOT pass (real measurement). Compile-time slots assume each line renders as
+  // ONE visual line; a narrow plane WRAPS long lines and the next slot overlaps the
+  // wrapped tail. Measure every page's REAL text heights in Chromium and re-stack.
+  {
+    const textBoxH = (c) => {
+      const ws = (c.words || []).filter((w) => (w.opacity ?? 1) > 0.05 && w.w > 0);
+      if (!ws.length) return c.cap_bbox ? c.cap_bbox.h : 0;
+      return Math.max(...ws.map((w) => w.y + w.h)) - Math.min(...ws.map((w) => w.y));
+    };
+    const pagesByKey = {};
+    for (const l of flat) {
+      const key = l.plane + "|" + (l.pageIdx || 0);
+      (pagesByKey[key] = pagesByKey[key] || { t: +(l.out - 0.1).toFixed(2), lines: [] }).lines.push(
+        l,
+      );
+    }
+    // the HERO is a real member of its lockup's stack — re-slot must move it (and the
+    // post-context below it) from MEASURED heights, or a wrapped pre-line / raised hero
+    // font reopens the very overlap this pass exists to prevent
+    for (const hRef of heroRefs) {
+      const key = hRef.plane + "|0";
+      const hg2 = groups.find((g2) => g2.id === `h-${hRef.bi}`);
+      if (!hg2) continue;
+      (pagesByKey[key] = pagesByKey[key] || {
+        t: +(hg2.out - 0.1).toFixed(2),
+        lines: [],
+      }).lines.push({
+        gid: hg2.id,
+        slotPx: hRef.slotPx || 0,
+        frac: fracOfLine(hg2.css) || 0.24,
+        _hero: true,
+      });
+    }
+    const times = [...new Set(Object.values(pagesByKey).map((pg) => pg.t))];
+    if (times.length) {
+      cp2.spawnSync(
+        "node",
+        [path.join(__dirname, "measure-layout.cjs"), project, ...times.map(String)],
+        { stdio: "ignore", timeout: 120000 },
+      );
+      let lay = null;
+      try {
+        lay = JSON.parse(fs.readFileSync(path.join(project, "_layout.json"), "utf8"));
+      } catch {}
+      if (lay && lay.samples) {
+        let changes = 0;
+        for (const pg of Object.values(pagesByKey)) {
+          const sample = lay.samples.reduce((a, b) =>
+            Math.abs(b.t - pg.t) < Math.abs(a.t - pg.t) ? b : a,
+          );
+          if (!sample || Math.abs(sample.t - pg.t) > 0.3) continue;
+          const ordered = [...pg.lines].sort((a, b) => a.slotPx - b.slotPx);
+          let top = 0;
+          for (const l of ordered) {
+            const cap = (sample.caps || []).find((c) => c.id === l.gid);
+            const realH = cap
+              ? (cap.cap_bbox && cap.cap_bbox.h) || textBoxH(cap)
+              : l.frac * H * 1.25;
+            if (Math.abs(top - l.slotPx) > 3) {
+              const g = groups.find((g2) => g2.id === l.gid);
+              g.css = g.css.replace(/top:\s*-?[\d.]+px/, "top:" + Math.round(top) + "px");
+              if (l._hero) {
+                const hr = heroRefs.find((h) => `h-${h.bi}` === l.gid);
+                if (hr) hr.slotPx = Math.round(top);
+              }
+              l.slotPx = Math.round(top);
+              changes++;
+            }
+            top +=
+              (realH || l.frac * H * 1.25) + Math.max(12, Math.round((l.frac || 0.05) * H * 0.38)); // box is lh1.12 — contains its own ink
+          }
+        }
+        if (changes) {
+          console.log(
+            `[make-cinematic] re-slot: ${changes} line(s) re-stacked from MEASURED heights (wrapped lines accounted)`,
+          );
+          fs.writeFileSync(path.join(project, "plan.json"), JSON.stringify(plan, null, 2));
+          cp2.spawnSync("node", [path.join(__dirname, "make-composition.cjs"), project], {
+            stdio: "ignore",
+          });
+          try {
+            fs.unlinkSync(path.join(project, "_layout.json"));
+          } catch {}
+        }
+      }
+    }
+  }
+
+  // ── HERO post-pass (real measurement, up to 2 re-emits) — runs PER HERO ─────
+  // (a) SIZE: a timid hero is the #1 quality kill. If the authored font leaves >25%
+  //     of the usable width unused, raise it to the width-fit maximum (DNA sizeRange cap).
+  // (b) CLEARANCE vs OTHER planes: the hero band must not overlap caps outside its own
+  //     lockup (its own context is composed around it by the slot layout). On a hit,
+  //     shift the whole LOCKUP plane vertically.
+  // (c) LOCKUP RE-STACK: a size change moves the hero's height — restack the lockup's
+  //     slots from measured heights so post-context stays bonded BELOW the hero.
+  // HERO words never wrap — a mid-word break ("Watermelo|n") is wrong in every case,
+  // and author css REPLACES the default (which silently lost white-space:nowrap).
+  // Forced here so no authoring path can drop it; centered nowrap text overflows a
+  // narrow plane SYMMETRICALLY, which also keeps width-fit honest (it measures the
+  // true single-line width instead of a wrapped row).
+  // narration lines whipped away by a mid-sentence page-flip are the same disease
+  // in mild form — warn (a deliberate quick beat is legal, so no die)
+  for (const g of groups)
+    if (!g.hero && g.words && g.words.length && g.out - g.in < 0.6) {
+      console.log(
+        `[make-cinematic] ⚠ line "${g.words
+          .map((w) => w.text)
+          .join(" ")
+          .slice(
+            0,
+            28,
+          )}" visible only ${(g.out - g.in).toFixed(2)}s (page-flip) — merge micro-lines or give the plane more height so the page holds`,
+      );
+    }
+  // MIN DWELL — a peak on screen <0.5s is unreadable ("stars" shipped at 0.47s and
+  // the user couldn't read it). Merge the block with the next (one thought), promote
+  // a word with room, or demote to an emphasized line. <0.8s gets a loud warning.
+  for (const g of groups)
+    if (g.hero) {
+      const dwell = g.out - g.in;
+      if (dwell < 0.5)
+        die(
+          `hero "${(g.words[0] || {}).text}" is on screen only ${dwell.toFixed(2)}s (<0.5s readability floor) — merge its block with the next, promote a word with more room, or demote it to an emphasized (non-hero) line.`,
+        );
+      if (dwell < 0.8)
+        console.log(
+          `[make-cinematic] ⚠ hero "${(g.words[0] || {}).text}" dwell ${dwell.toFixed(2)}s is tight (<0.8s) — consider merging blocks so the peak can breathe`,
+        );
+    }
+  {
+    let nwChanged = false;
+    for (const g of groups)
+      if (g.hero && !/white-space\s*:\s*nowrap/.test(g.css || "")) {
+        g.css = (g.css || "") + " white-space: nowrap;";
+        nwChanged = true;
+      }
+    if (nwChanged) {
+      fs.writeFileSync(path.join(project, "plan.json"), JSON.stringify(plan, null, 2));
+      require("child_process").spawnSync(
+        "node",
+        [path.join(__dirname, "make-composition.cjs"), project],
+        { stdio: "ignore" },
+      );
+    }
+  }
+  const fracOf = (css) => {
+    const m = (css || "").match(/font-size\s*:\s*calc\(\s*([\d.]+)\s*\*\s*var\(--h\)/);
+    return m ? +m[1] : null;
+  };
+  const setFrac = (css, f) =>
+    (css || "").replace(
+      /font-size\s*:\s*[^;]+/,
+      "font-size: calc(" + f.toFixed(3) + " * var(--h))",
+    );
+  const textBox = (c) => {
+    const ws = (c.words || []).filter((w) => (w.opacity ?? 1) > 0.05 && w.w > 0);
+    if (!ws.length) return c.cap_bbox;
+    const x0 = Math.min(...ws.map((w) => w.x)),
+      x1 = Math.max(...ws.map((w) => w.x + w.w));
+    const y0 = Math.min(...ws.map((w) => w.y)),
+      y1 = Math.max(...ws.map((w) => w.y + w.h));
+    return { x: x0, y: y0, w: x1 - x0, h: y1 - y0 };
+  };
+  let dnaSizeCap = 0.34,
+    dnaHeroCase = "none";
+  try {
+    const dnaLib2 = require("./lib-dna.cjs");
+    const dn = plan.dna || dnaLib2.LEGACY[plan.template];
+    if (dn) {
+      const dj = dnaLib2.load(dn);
+      if (dj.hero && dj.hero.sizeRange) dnaSizeCap = dj.hero.sizeRange[1];
+      if (dj.hero) dnaHeroCase = dj.hero.case || "none";
+    }
+  } catch {}
+  // the APEX (largest authored hero) gets the width-fit raise; minor heroes keep their
+  // authored size — inter-hero hierarchy is a deliberate choice, not timidity
+  const apexFrac = Math.max(
+    ...heroRefs.map((h) => fracOf((groups.find((g) => g.id === `h-${h.bi}`) || {}).css) || 0),
+    0,
+  );
+  for (const hRef of heroRefs) {
+    const heroG = groups.find((g) => g.id === `h-${hRef.bi}`);
+    if (!heroG) continue;
+    const isApex = (fracOf(heroG.css) || 0) >= apexFrac - 1e-6;
+    const lockupMates = groups.filter((g) => g.plane === hRef.plane && g.id !== heroG.id);
+    // hero size changed → context follows the 0.26 poster ratio, and its orbit
+    // max-width scales WITH the font (a stale max-width wraps re-locked context
+    // into multi-row towers that blow the stack past the frame)
+    const relockMates = (hf) => {
+      const rf = +Math.min(0.085, Math.max(0.05, hf * 0.26)).toFixed(4);
+      for (const m of lockupMates) {
+        const mf = fracOf(m.css);
+        if (!mf || Math.abs(mf - rf) <= 0.002) continue;
+        const scale = rf / mf;
+        m.css = setFrac(m.css, rf).replace(
+          /max-width:\s*([\d.]+)px/,
+          (s2, px) => "max-width:" + Math.round(+px * scale) + "px",
+        );
+      }
+    };
+    const measure = () => {
+      const midT = ((heroG.in + Math.min(heroG.out, heroG.in + 1.0)) / 2).toFixed(2);
+      const endT = Math.max(+midT + 0.05, heroG.out - 0.12).toFixed(2);
+      cp2.spawnSync(
+        "node",
+        [path.join(__dirname, "measure-layout.cjs"), project, String(midT), String(endT)],
+        { stdio: "ignore", timeout: 90000 },
+      );
+      try {
+        const ss = JSON.parse(fs.readFileSync(path.join(project, "_layout.json"), "utf8")).samples;
+        const near = (t) =>
+          ss.reduce((a, b) => (Math.abs(b.t - t) < Math.abs((a ? a.t : 1e9) - t) ? b : a), null);
+        return { caps: (near(+midT) || {}).caps || [], capsEnd: (near(+endT) || {}).caps || [] };
+      } catch {
+        return null;
+      }
+    };
+    let didRaise = false;
+    for (let pass = 0; pass < 5; pass++) {
+      const m0 = measure();
+      if (!m0) break;
+      const caps = m0.caps,
+        capsEnd = m0.capsEnd && m0.capsEnd.length ? m0.capsEnd : m0.caps;
+      const hc0 = caps.find((c) => c.id === heroG.id);
+      if (!hc0 || !hc0.cap_bbox) break;
+      const hc = { ...hc0, cap_bbox: textBox(hc0) };
+      const mateIds = new Set(lockupMates.map((m) => m.id));
+      const others = caps
+        .filter(
+          (c) =>
+            c.id !== heroG.id &&
+            !mateIds.has(c.id) &&
+            !/-glow$/.test(c.id || "") &&
+            c.cap_bbox &&
+            c.opacity > 0.05,
+        )
+        .map((c) => ({ ...c, cap_bbox: textBox(c) }));
+      const maxW = W * 0.94;
+      const f0 = fracOf(heroG.css);
+      let changed = false;
+      if (f0 && hc.cap_bbox.w > 0) {
+        if (hc.cap_bbox.w > maxW) {
+          const nf = Math.max(0.06, (f0 * maxW) / hc.cap_bbox.w);
+          console.log(
+            `[make-cinematic] hero "${heroG.words[0].text}" too WIDE ${Math.round(hc.cap_bbox.w)}px → ${f0}h→${nf.toFixed(3)}h`,
+          );
+          heroG.css = setFrac(heroG.css, nf);
+          changed = true;
+        } else if (hc.cap_bbox.w >= maxW * 0.88) {
+          if (pass === 0)
+            console.log(
+              `[make-cinematic] hero "${heroG.words[0].text}" at width CEILING (${Math.round(hc.cap_bbox.w)}/${Math.round(maxW)}px) — cannot enlarge.`,
+            );
+        } else if (!didRaise && hc.cap_bbox.w < maxW * 0.88 && isApex) {
+          // NO DEAD ZONE: anything under 88% of usable width is raised toward a 93%
+          // fill (the old <75% trigger let 75–88%-wide heroes stay merely "decent")
+          const fit = (f0 * (maxW * 0.93)) / hc.cap_bbox.w;
+          const nf = Math.min(dnaSizeCap, fit);
+          if (nf > f0 * 1.05 || fit > dnaSizeCap * 1.02) {
+            if (nf > f0 * 1.001)
+              console.log(
+                `[make-cinematic] hero "${heroG.words[0].text}" TIMID (${Math.round(hc.cap_bbox.w)}px of ${Math.round(maxW)}px usable) → ${f0}h→${nf.toFixed(3)}h (width-fit max)`,
+              );
+            // SHORT-WORD FILL: height cap bound before the width target → fill with
+            // TRACKING (film-title craft — HER, DUNE), ≤0.32em so it stays a word.
+            const wAtCap = (hc.cap_bbox.w * nf) / f0;
+            const dispT = String(heroG.text || (heroG.words || []).map((w) => w.text).join(" "));
+            // never letterspace lowercase (tracked lowercase falls apart — caps only)
+            const capsy = dnaHeroCase === "uppercase" || dispT === dispT.toUpperCase();
+            if (fit > dnaSizeCap && wAtCap < maxW * 0.85 && capsy) {
+              const disp = dispT;
+              // letter-spacing adds a gap after EVERY char (N gaps) and the centering
+              // text-indent adds one more — budget N+1 gaps or the word leaves the frame
+              const gaps = disp.length + 1;
+              const tr = +Math.min(0.32, (maxW * 0.88 - wAtCap) / (gaps * nf * H)).toFixed(3);
+              if (tr >= 0.04) {
+                heroG.css =
+                  heroG.css
+                    .replace(/letter-spacing\s*:[^;]+;?\s*/g, "")
+                    .replace(/text-indent\s*:[^;]+;?\s*/g, "") +
+                  (heroG.css.trim().endsWith(";") || !heroG.css.trim() ? "" : ";") +
+                  ` letter-spacing:${tr}em; text-indent:${tr}em;`;
+                console.log(
+                  `[make-cinematic] hero "${disp}" short word at height cap (${Math.round(wAtCap)}px of ${Math.round(maxW)}px) → tracked +${tr}em to fill`,
+                );
+              }
+            }
+            heroG.css = setFrac(heroG.css, nf);
+            changed = true;
+            didRaise = true;
+            relockMates(nf);
+          }
+        }
+      }
+      const hbx = hc.cap_bbox;
+      // colliders OUTSIDE the lockup only — the lockup composes around the hero by design
+      const hits = others.filter((o) => {
+        const b = o.cap_bbox;
+        const ix = Math.min(hbx.x + hbx.w, b.x + b.w) - Math.max(hbx.x, b.x);
+        const iy = Math.min(hbx.y + hbx.h, b.y + b.h) - Math.max(hbx.y, b.y);
+        return ix > 8 && iy > 8;
+      });
+      if (hits.length) {
+        const maxBottom = Math.max(...hits.map((o) => o.cap_bbox.y + o.cap_bbox.h));
+        const minTop = Math.min(...hits.map((o) => o.cap_bbox.y));
+        const downTo = ((maxBottom + 14) / H) * 100;
+        const upTo = Math.max(2, ((minTop - hbx.h - 14) / H) * 100);
+        const planeCss = plan.planes[hRef.plane].css;
+        const curTop = +(planeCss.match(/top:\s*([\d.]+)%/) || [0, 30])[1];
+        const newTop = downTo + (hbx.h / H) * 100 < 96 ? downTo : upTo;
+        plan.planes[hRef.plane].css = planeCss.replace(
+          /top:\s*[\d.]+%/,
+          "top: " + newTop.toFixed(1) + "%",
+        );
+        console.log(
+          `[make-cinematic] hero "${heroG.words[0].text}" OVERLAPS ${hits.map((o) => o.id).join(",")} — lockup top ${curTop}% → ${newTop.toFixed(1)}%`,
+        );
+        changed = true;
+      }
+      // ORBIT REFINE: anchor kicker/tail to the MEASURED hero edges (estimate → real)
+      if (lockupMates.length && hc.cap_bbox && hc.cap_bbox.w > 0) {
+        const planeCss2 = (plan.planes[hRef.plane] && plan.planes[hRef.plane].css) || "";
+        const pl2 = ((planeCss2.match(/left:\s*([\d.]+)%/) || [0, 0])[1] * W) / 100;
+        const relL = Math.max(0, Math.round(hc.cap_bbox.x - pl2));
+        const pw2 = ((planeCss2.match(/width:\s*([\d.]+)%/) || [0, 100])[1] * W) / 100;
+        const relR = Math.max(0, Math.round(pw2 - (hc.cap_bbox.x - pl2) - hc.cap_bbox.w));
+        for (const m of lockupMates) {
+          if (/left:\s*\d+px;right:auto/.test(m.css)) {
+            const nc = m.css.replace(/left:\s*\d+px/, "left:" + relL + "px");
+            if (nc !== m.css) {
+              m.css = nc;
+              changed = true;
+            }
+          } else if (/right:\s*\d+px;left:auto/.test(m.css)) {
+            const nc = m.css.replace(/right:\s*\d+px/, "right:" + relR + "px");
+            if (nc !== m.css) {
+              m.css = nc;
+              changed = true;
+            }
+          }
+        }
+      }
+      // LOCKUP RE-STACK from measured heights — runs EVERY pass for lockups (orbit
+      // max-widths wrap context lines, so the re-slot's estimates can leave the tail
+      // displaced or the whole composition off frame)
+      if (lockupMates.length) {
+        const caps2 = capsEnd; // lockup-END sample: every context line is revealed there
+        // TOWER CHECK — a context line wrapped to 3+ rows means its orbit max-width is
+        // too narrow for the (re-locked) font; widen toward the plane before stacking,
+        // or the tower blows the stack past the frame and the walk-back eats the hero
+        for (const m of lockupMates) {
+          const cm = caps2.find((x) => x.id === m.id);
+          const frm = fracOf(m.css) || 0.05;
+          const mwM = m.css.match(/max-width:\s*([\d.]+)px/);
+          if (!cm || !cm.cap_bbox || !mwM) continue;
+          const rows = Math.round(cm.cap_bbox.h / (frm * H * 1.12));
+          if (rows >= 3) {
+            const planeCssW2 = (plan.planes[hRef.plane] && plan.planes[hRef.plane].css) || "";
+            const pwX = W * (+(planeCssW2.match(/width:\s*([\d.]+)%/) || [0, 92])[1] / 100);
+            const nw = Math.round(pwX * 0.62);
+            if (nw > +mwM[1] + 10) {
+              m.css = m.css.replace(/max-width:\s*[\d.]+px/, "max-width:" + nw + "px");
+              console.log(
+                `[make-cinematic] context "${((m.words || [])[0] || {}).text}…" wrapped to ${rows} rows — orbit max-width ${Math.round(+mwM[1])}→${nw}px (towers break the stack)`,
+              );
+              changed = true;
+            }
+          }
+        }
+        const entries = [heroG, ...lockupMates]
+          .map((g) => {
+            const c = caps2.find((x) => x.id === g.id);
+            const curTop = +(g.css.match(/top:\s*(-?[\d.]+)px/) || [0, 0])[1];
+            const fr = fracOf(g.css) || 0.05;
+            // SLOT HEIGHT = the LAYOUT box (cap_bbox), not the glyph box: words reveal
+            // over time, so at the hero-mid sample a context line's later words are
+            // still opacity-0 — glyph-box measured a wrapped line one row short and the
+            // next line slotted INTO its wrap band (real text-on-text shipped).
+            const measuredH = c && c.cap_bbox ? c.cap_bbox.h : null;
+            const h2 = g.id === heroG.id && didRaise ? fr * H * 1.12 : measuredH || fr * H * 1.25;
+            return { g, curTop, h: h2 };
+          })
+          .sort((a, b) => a.curTop - b.curTop);
+        let top = 0;
+        for (const e of entries) {
+          if (Math.abs(top - e.curTop) > 3) {
+            e.g.css = e.g.css.replace(/top:\s*-?[\d.]+px/, "top:" + Math.round(top) + "px");
+            changed = true;
+          }
+          top += e.h + Math.max(12, Math.round((fracOf(e.g.css) || 0.05) * H * 0.38)); // box is lh1.12 — contains its own ink
+        }
+        // RE-CLAMP the plane after MEASURED growth — keep the whole composition on frame
+        const planeCss3 = plan.planes[hRef.plane].css;
+        const curTopPct = +(planeCss3.match(/top:\s*([\d.]+)%/) || [0, 30])[1];
+        const maxTopPct = Math.max(2, ((H * 0.97 - top) / H) * 100);
+        if (curTopPct > maxTopPct + 0.3) {
+          plan.planes[hRef.plane].css = planeCss3.replace(
+            /top:\s*[\d.]+%/,
+            "top: " + maxTopPct.toFixed(1) + "%",
+          );
+          console.log(
+            `[make-cinematic] lockup measured ${Math.round(top)}px tall — plane top ${curTopPct}% → ${maxTopPct.toFixed(1)}% (kept on frame)`,
+          );
+          changed = true;
+        }
+        // even at the 2% ceiling the stack can exceed the frame (TIMID raise + ratio
+        // context on a tall lockup) — walk the hero back 8% and re-lock until it fits
+        if (top > H * 0.95 && maxTopPct <= 2.01) {
+          const f0c = fracOf(heroG.css);
+          if (f0c && f0c > 0.14) {
+            // decisive step: stack height scales ~linearly with the hero (context is
+            // ratio-locked to it), so aim straight at a 93% fill instead of nibbling
+            const nf2 = +Math.max(0.14, Math.min(f0c * 0.92, (f0c * (H * 0.93)) / top)).toFixed(3);
+            console.log(
+              `[make-cinematic] lockup stack ${Math.round(top)}px exceeds the frame even at top 2% — hero ${f0c}h → ${nf2}h (fit)`,
+            );
+            heroG.css = setFrac(heroG.css, nf2);
+            relockMates(nf2);
+            didRaise = true;
+            changed = true;
+          }
+        }
+      }
+      if (!changed) break;
+      fs.writeFileSync(path.join(project, "plan.json"), JSON.stringify(plan, null, 2));
+      r = cp2.spawnSync("node", [path.join(__dirname, "make-composition.cjs"), project], {
+        stdio: "ignore",
+      });
+      try {
+        fs.unlinkSync(path.join(project, "_layout.json"));
+      } catch {}
+    }
+  }
+  // MINOR HERO measure pass — minors keep their authored size (hierarchy is a choice)
+  // but never ship broken: wider than the frame's usable width shrinks to fit, and a
+  // column overflow gets a loud note (centered spill is legal on a clear side only).
+  {
+    const minors = groups.filter((g) => g.hero && !heroRefs.some((h) => `h-${h.bi}` === g.id));
+    let minorChanged = false;
+    for (const mg of minors) {
+      const midT = ((mg.in + Math.min(mg.out, mg.in + 1.0)) / 2).toFixed(2);
+      cp2.spawnSync("node", [path.join(__dirname, "measure-layout.cjs"), project, String(midT)], {
+        stdio: "ignore",
+        timeout: 60000,
+      });
+      let mc = null;
+      try {
+        mc = (
+          JSON.parse(fs.readFileSync(path.join(project, "_layout.json"), "utf8")).samples[0].caps ||
+          []
+        ).find((c) => c.id === mg.id);
+      } catch {}
+      if (!mc || !mc.cap_bbox) continue;
+      const bb = textBox(mc),
+        f0 = fracOf(mg.css);
+      if (f0 && bb.w > W * 0.94) {
+        const nf = Math.max(0.06, +((f0 * (W * 0.94)) / bb.w).toFixed(3));
+        console.log(
+          `[make-cinematic] minor hero "${(mg.words[0] || {}).text}" too WIDE ${Math.round(bb.w)}px → ${f0}h→${nf.toFixed(3)}h (shrink-to-fit)`,
+        );
+        mg.css = setFrac(mg.css, nf);
+        minorChanged = true;
+      } else {
+        const planeCssM = (plan.planes[mg.plane] && plan.planes[mg.plane].css) || "";
+        const pwPx = W * (+(planeCssM.match(/width:\s*([\d.]+)%/) || [0, 100])[1] / 100);
+        if (bb.w > pwPx * 1.05)
+          console.log(
+            `[make-cinematic] note: minor hero "${(mg.words[0] || {}).text}" (${Math.round(bb.w)}px) spills its ${Math.round(pwPx)}px column — fine on a clear side; reduce size if it crosses the subject`,
+          );
+      }
+      try {
+        fs.unlinkSync(path.join(project, "_layout.json"));
+      } catch {}
+    }
+    if (minorChanged) {
+      fs.writeFileSync(path.join(project, "plan.json"), JSON.stringify(plan, null, 2));
+      cp2.spawnSync("node", [path.join(__dirname, "make-composition.cjs"), project], {
+        stdio: "ignore",
+      });
+    }
+  }
+  process.exit(0);
+}
+main();
diff --git a/.claude/skills-media/embedded-captions/scripts/make-composition.cjs b/.claude/skills-media/embedded-captions/scripts/make-composition.cjs
new file mode 100644
index 000000000..aa499faba
--- /dev/null
+++ b/.claude/skills-media/embedded-captions/scripts/make-composition.cjs
@@ -0,0 +1,404 @@
+#!/usr/bin/env node
+/*
+ * make-composition.cjs — compile plan.json → index.html (CINEMATIC MODE).
+ *
+ * DNA path (canonical): plan.dna names a dna/<name>.json → modes/cinematic/engine.html
+ * is compiled with scene-resolved tokens (lib-dna.cjs): scene-sampled accent, light-
+ * direction contact shadow, depth-match blur, hero three-act orchestration with
+ * RMS-coupled amplitude. plan.template="cinematic-cream" maps to dna "cream".
+ *
+ * Legacy path: plan.template naming an archived template dir still compiles 1:1
+ * (memory-wall / champion / portrait-header in modes/cinematic/_archive are NOT
+ * auto-discovered — restore them to modes/cinematic/ to use).
+ *
+ *   node make-composition.cjs <project-dir>
+ */
+const path = require("path");
+const fs = require("fs");
+const cp = require("child_process");
+const dnaLib = require("./lib-dna.cjs");
+
+const SKILL_ROOT = path.resolve(__dirname, "..");
+const TEMPLATES = path.join(SKILL_ROOT, "modes", "cinematic");
+
+// Source clip duration (seconds) via ffprobe. The COMPOSITION/background length must
+// follow the SOURCE, not the last caption — see the Bug-1 note in main().
+function sourceDurationSec(project) {
+  let cands = ["source.mp4"];
+  try {
+    cands = cands.concat(
+      fs
+        .readdirSync(project)
+        .filter(
+          (f) =>
+            /\.(mp4|mov|webm|mkv|m4v)$/i.test(f) &&
+            !/^(final|bg_plus_caps|fg_caps|rail|index)/.test(f),
+        ),
+    );
+  } catch {}
+  for (const c of cands) {
+    const p = path.isAbsolute(c) ? c : path.join(project, c);
+    if (!fs.existsSync(p)) continue;
+    try {
+      const out = cp
+        .execFileSync(
+          "ffprobe",
+          [
+            "-v",
+            "error",
+            "-show_entries",
+            "format=duration",
+            "-of",
+            "default=nokey=1:noprint_wrappers=1",
+            p,
+          ],
+          { encoding: "utf8" },
+        )
+        .trim();
+      const d = parseFloat(out);
+      if (d > 0) return d;
+    } catch {}
+  }
+  return null;
+}
+
+function hexLum(hex) {
+  let h = String(hex).replace("#", "");
+  if (h.length === 3) h = [...h].map((c) => c + c).join("");
+  const r = parseInt(h.slice(0, 2), 16) / 255,
+    g = parseInt(h.slice(2, 4), 16) / 255,
+    b = parseInt(h.slice(4, 6), 16) / 255;
+  if ([r, g, b].some(Number.isNaN)) return 0.9;
+  return 0.299 * r + 0.587 * g + 0.114 * b;
+}
+const defaultTextShadow = (c) =>
+  hexLum(c) < 0.45
+    ? "0 2px 6px rgba(0, 0, 0, 0.28)"
+    : "0 0 18px rgba(255, 220, 170, 0.55), 0 3px 8px rgba(0, 0, 0, 0.85)";
+const defaultTextFilter = (c) =>
+  hexLum(c) < 0.45 ? "contrast(1.08)" : "brightness(1.1) contrast(1.05)";
+
+function findTemplate(name) {
+  const p = path.join(TEMPLATES, name, "template.html");
+  if (fs.existsSync(p)) return p;
+  const avail = fs
+    .readdirSync(TEMPLATES)
+    .filter((d) => fs.existsSync(path.join(TEMPLATES, d, "template.html")))
+    .sort();
+  console.error(`[compile] unknown template: ${name}. Available: ${avail.join(", ")}`);
+  process.exit(1);
+}
+function escBr(t) {
+  const e = String(t)
+    .replace(/&/g, "&amp;")
+    .replace(/</g, "&lt;")
+    .replace(/>/g, "&gt;")
+    .replace(/"/g, "&quot;");
+  return e
+    .replace(/&lt;br&gt;/g, "<br>")
+    .replace(/&lt;br\/&gt;/g, "<br>")
+    .replace(/&lt;br \/&gt;/g, "<br>");
+}
+// hero words get per-letter inner spans (<span class="l">) so the engine can stagger
+// letters; .w keeps wrapping the word so every gate (occlusion / overflow / layout)
+// measures exactly what it measured before.
+function wordSpan(w, i, perLetter) {
+  if (!perLetter) return `<span class="w" data-i="${i}">${escBr(w.text)}</span>`;
+  const t = String(w.text);
+  if (/<br\s*\/?>/i.test(t)) return `<span class="w" data-i="${i}">${escBr(t)}</span>`; // explicit <br> words stay whole
+  const letters = [...t]
+    .map((ch) => (ch === " " ? " " : `<span class="l">${escBr(ch)}</span>`))
+    .join("");
+  return `<span class="w" data-i="${i}">${letters}</span>`;
+}
+function renderCap(g, heroCfg) {
+  const slot = g.slot ?? g.style ?? "";
+  const layerAttr = g.layer ? ` data-layer="${g.layer}"` : "";
+  const isHero = heroCfg && g.hero === true;
+  const perLetter = isHero && heroCfg.perLetter;
+  const cls = slot ? `cap cap-${slot}` : "cap";
+  const spans = g.words.map((w, i) => wordSpan(w, i, perLetter)).join("\n            ");
+  const capDiv = `<div id="${g.id}" class="${cls}"${layerAttr}>\n            ${spans}\n          </div>`;
+  if (!isHero) return capDiv;
+  // fx siblings render UNDER the hero (earlier sibling = beneath): glow first, then
+  // echoes, then the hero itself. Plain .w spans; none are in plan.groups → gates skip.
+  const plainSpans = g.words
+    .map((w, i) => `<span class="w" data-i="${i}">${escBr(w.text)}</span>`)
+    .join("\n            ");
+  const parts = [];
+  if (heroCfg.glow)
+    parts.push(
+      `<div id="${g.id}-glow" class="${cls} hero-glow" aria-hidden="true"${layerAttr}>\n            ${plainSpans}\n          </div>`,
+    );
+  (heroCfg.echoes || []).forEach((ec, k) => {
+    parts.push(
+      `<div id="${g.id}-echo-${k}" class="${cls} hero-echo" aria-hidden="true"${layerAttr}>\n            ${plainSpans}\n          </div>`,
+    );
+  });
+  parts.push(capDiv);
+  return parts.join("\n          ");
+}
+function buildGroupsHtml(groups, planes, heroCfg) {
+  if (!planes) return groups.map((g) => renderCap(g, heroCfg)).join("\n        ");
+  const order = Object.keys(planes);
+  const grouped = {};
+  order.forEach((p) => (grouped[p] = []));
+  const free = [];
+  for (const g of groups) {
+    const pid = g.plane;
+    if (pid && pid in grouped) grouped[pid].push(g);
+    else free.push(g);
+  }
+  const parts = [];
+  for (const pid of order)
+    parts.push(
+      `<div id="plane-${pid}" class="plane plane-${pid}">\n          ${grouped[pid].map((g) => renderCap(g, heroCfg)).join("\n          ")}\n        </div>`,
+    );
+  for (const g of free) parts.push(renderCap(g, heroCfg));
+  return parts.join("\n        ");
+}
+function buildPlanesCss(planes) {
+  if (!planes) return "";
+  return Object.entries(planes)
+    .map(([pid, p]) => {
+      // Accept BOTH plane shapes: { body: { css: "..." } } and the bare-string
+      // { body: "..." } (matches how groups write css). Reading only p.css silently
+      // dropped the string form → empty CSS → planes collapsed to (0,0).
+      let css = (typeof p === "string" ? p : (p || {}).css || "").trim();
+      if (!css) return null;
+      if (!css.endsWith(";")) css += ";";
+      return `      .plane-${pid} { ${css} }`;
+    })
+    .filter(Boolean)
+    .join("\n");
+}
+function buildPerGroupCss(groups, tokens) {
+  return groups
+    .map((g) => {
+      const parts = [];
+      if (g.scale != null) parts.push(`--s: ${g.scale};`);
+      let css = (g.css || "").trim();
+      if (css) parts.push(css.endsWith(";") ? css : css + ";");
+      const isHero = tokens && g.hero === true;
+      if (isHero) {
+        // DNA hero treatment (case / tracking / extra css) — authored css still wins (it comes first? no: later rules win; DNA goes first so the author can override)
+        const dnaHero = [];
+        if (tokens.heroCase && tokens.heroCase !== "none")
+          dnaHero.push(`text-transform: ${tokens.heroCase};`);
+        if (tokens.heroTracking && tokens.heroTracking !== "0")
+          dnaHero.push(`letter-spacing: ${tokens.heroTracking};`);
+        if (tokens.heroCss)
+          dnaHero.push(tokens.heroCss.endsWith(";") ? tokens.heroCss : tokens.heroCss + ";");
+        if (tokens.hero && tokens.hero.heroColor) dnaHero.push(`color: ${tokens.hero.heroColor};`);
+        parts.unshift(...dnaHero);
+      }
+      const rules = [];
+      if (parts.length) rules.push(`      #${g.id} { ${parts.join(" ")} }`);
+      // fx duplicates mirror the hero's geometry exactly (same slot/absolute CSS) so a
+      // flex/slot plane can't displace them; glow blur comes from .hero-glow (em-based),
+      // echo colors from their own rules (they must NOT inherit a transparent text fill).
+      if (isHero && tokens.hero) {
+        // word-level hero treatment (e.g. chrome's gradient clip — background-clip:text
+        // can't clip through composited children, so it must live ON the .w span)
+        if (tokens.hero.wordCss) rules.push(`      #${g.id} .w { ${tokens.hero.wordCss} }`);
+        if (tokens.hero.glow > 0 && parts.length)
+          rules.push(`      #${g.id}-glow { ${parts.join(" ")} }`);
+        (tokens.hero.echoes || []).forEach((ec, k) => {
+          const extra =
+            `color: ${ec.color}; -webkit-text-fill-color: ${ec.color}; background: none;` +
+            (ec.blur ? ` filter: blur(${ec.blur}px);` : "");
+          rules.push(`      #${g.id}-echo-${k} { ${parts.join(" ")} ${extra} }`);
+        });
+      }
+      return rules.length ? rules.join("\n") : null;
+    })
+    .filter(Boolean)
+    .join("\n");
+}
+function buildGroupsJson(groups) {
+  return JSON.stringify(
+    groups.map((g) => ({
+      id: g.id,
+      in: g.in,
+      out: g.out,
+      tone: g.tone ?? "soft",
+      ...(g.hero === true ? { hero: true } : {}),
+      ...(g.minor === true ? { minor: true } : {}),
+      ...(g.plane ? { plane: g.plane } : {}),
+      words: g.words.map((w) => ({ text: w.text, start: w.start, end: w.end })),
+    })),
+    null,
+    10,
+  );
+}
+
+function main() {
+  const project = path.resolve(process.argv[2] || "");
+  if (!process.argv[2]) {
+    console.error("usage: make-composition.cjs <project-dir>");
+    process.exit(1);
+  }
+  const planPath = path.join(project, "plan.json");
+  if (!fs.existsSync(planPath)) {
+    console.error(`[compile] missing ${planPath}`);
+    process.exit(1);
+  }
+  const plan = JSON.parse(fs.readFileSync(planPath, "utf8"));
+  if (plan.mode === "custom") {
+    console.error("[compile] mode=custom — skip this script and hand-write index.html.");
+    process.exit(1);
+  }
+  if (plan.mode === "standard") {
+    console.error(
+      "[compile] mode=standard — this plan.json is DERIVED by make-standard.cjs; compile Standard projects with make-standard.cjs (from standard.json), not this script.",
+    );
+    process.exit(1);
+  }
+  // ── DNA resolution: plan.dna (canonical) or a legacy template name ──────────
+  const dnaName = plan.dna || dnaLib.LEGACY[plan.template] || null;
+  let dna = null,
+    tokens = null;
+  if (dnaName) {
+    try {
+      dna = dnaLib.load(dnaName);
+    } catch (e) {
+      console.error(`[compile] ${e.message}`);
+      process.exit(1);
+    }
+  }
+  const heroGroups = (plan.groups || []).filter((x) => x.hero === true);
+  if (dna) {
+    tokens = dnaLib.resolveTokens(dna, project, { heroGroups });
+    console.log(
+      `[compile] DNA "${dna.name}" (${tokens.register}) — accent ${tokens.accent}` +
+        `${tokens.blurPx ? ` · depth-match blur ${tokens.blurPx}px` : ""}` +
+        `${tokens.heroes.length ? ` · hero amp ${tokens.heroes.map((h) => h.amp).join("/")} (RMS-coupled)` : ""}`,
+    );
+  }
+  let src = dna
+    ? fs.readFileSync(path.join(TEMPLATES, "engine.html"), "utf8")
+    : fs.readFileSync(findTemplate(plan.template), "utf8");
+  // Bug-1: the canvas/background length = SOURCE clip length, NOT the last-caption time.
+  // If plan.duration < source, the bg video ends before the matte → the tail shows only
+  // the foreground subject on black. Caption groups keep their own in/out (they may end
+  // earlier); only the composition duration follows the source.
+  const srcDur = sourceDurationSec(project);
+  const renderDur = srcDur && srcDur > 0 ? srcDur : plan.duration;
+  if (srcDur && Math.abs(srcDur - (plan.duration || 0)) > 0.2)
+    console.log(
+      `[compile] canvas duration → source length ${renderDur.toFixed(2)}s (plan.duration=${plan.duration}); captions keep their own times.`,
+    );
+  const plane = plan.plane || {},
+    header = plan.header || {},
+    crown = plan.crown || {};
+  // LOCKED DNA — the plan can NOT override colour / blend / shadow / filter. Picking a
+  // DNA commits to its visual identity; only layout + per-group typography stay
+  // agent-authored. If a scene's luminance fights the look, pick a DIFFERENT DNA
+  // (bright scene → "ink") — never recolour this one. (plan.cap_color / blend_mode /
+  // text_shadow / text_filter are intentionally ignored.)
+  const capColor = tokens ? tokens.capColor : "#fff5df";
+  const g = (o, k, d) => (o && o[k] != null ? o[k] : d);
+  const heroCfg =
+    tokens && tokens.heroes && tokens.heroes.length
+      ? {
+          perLetter: tokens.heroes[0].perLetter,
+          glow: tokens.heroes[0].glow,
+          echoes: tokens.heroes[0].echoes || [],
+        }
+      : null;
+  const subs = {
+    DURATION: `${renderDur}`,
+    FPS: `${plan.fps ?? 24}`,
+    WIDTH: `${plan.width}`,
+    HEIGHT: `${plan.height}`,
+    FONT_SCALE: `${plan.font_scale ?? 1.0}`,
+    PLANE_TOP: `${g(plane, "top", 0)}`,
+    PLANE_LEFT: `${g(plane, "left", "")}`,
+    PLANE_RIGHT: `${g(plane, "right", "")}`,
+    PLANE_WIDTH: `${g(plane, "width", 0)}`,
+    PLANE_HEIGHT: `${g(plane, "height", 0)}`,
+    ROTATE_Y: `${g(plane, "rotateY", 0)}`,
+    ROTATE_X: `${g(plane, "rotateX", 0)}`,
+    HEADER_TOP: `${g(header, "top", 0)}`,
+    HEADER_HEIGHT: `${g(header, "height", 0)}`,
+    CROWN_TOP: `${g(crown, "top", plan.crown_top ?? g(plan.crown_position || {}, "top", 440))}`,
+    CROWN_LEFT: `${g(crown, "left", 0)}`,
+    CROWN_RIGHT: `${g(crown, "right", 0)}`,
+    CROWN_ALIGN: `${g(crown, "align", "center")}`,
+    CROWN_SCALE: `${g(crown, "scale", 1.0)}`,
+    BLEND_MODE: tokens ? tokens.blend : "screen",
+    CAP_COLOR: capColor,
+    TEXT_SHADOW: tokens ? tokens.textShadow : defaultTextShadow(capColor),
+    TEXT_FILTER: tokens ? tokens.filterBg : defaultTextFilter(capColor),
+    // engine-only placeholders (legacy templates simply don't contain them)
+    FONT_FAMILY: tokens ? tokens.fontFamily : "Inter",
+    ACCENT: tokens ? tokens.accent : "#e3c06a",
+    TEXT_FILTER_BG: tokens ? tokens.filterBg : defaultTextFilter(capColor),
+    TEXT_FILTER_FG: tokens ? tokens.filterFg : defaultTextFilter(capColor),
+    DNA_CSS: tokens && tokens.dnaCss ? tokens.dnaCss : "",
+    MOTION_JSON: JSON.stringify(
+      tokens
+        ? tokens.motion
+        : {
+            soft: { y: 8, dur: 0.45, ease: "power2.out" },
+            present: { y: 6, scale: 1.04, dur: 0.22, ease: "power3.out" },
+          },
+    ),
+    HEROES_JSON: tokens && tokens.heroes ? JSON.stringify(tokens.heroes) : "[]",
+    HERO_JSON: tokens && tokens.hero ? JSON.stringify(tokens.hero) : "null",
+    GROUPS_HTML: buildGroupsHtml(plan.groups, plan.planes, heroCfg),
+    PLANES_CSS: buildPlanesCss(plan.planes),
+    CUSTOM_CSS: buildPerGroupCss(plan.groups, tokens),
+    GROUPS_JSON: buildGroupsJson(plan.groups),
+  };
+  const cg = plan.crown_group;
+  if (cg) {
+    const layerAttr = cg.layer ? ` data-layer="${cg.layer}"` : "";
+    const spans = cg.words
+      .map((w, i) => `<span class="w" data-i="${i}">${escBr(w.text)}</span>`)
+      .join("\n          ");
+    subs.CROWN_HTML = `<div id="${cg.id}" class="cap cap-crown"${layerAttr}>\n          ${spans}\n        </div>`;
+    subs.CROWN_JSON = JSON.stringify(
+      {
+        id: cg.id,
+        in: cg.in,
+        out: cg.out,
+        tone: cg.tone ?? "present",
+        words: cg.words.map((w) => ({ text: w.text, start: w.start, end: w.end })),
+      },
+      null,
+      10,
+    );
+  } else {
+    subs.CROWN_HTML = "";
+    subs.CROWN_JSON = "null";
+  }
+
+  for (const [k, v] of Object.entries(subs)) src = src.split(`{{${k}}}`).join(v);
+  fs.writeFileSync(path.join(project, "index.html"), src);
+  console.log(
+    `[compile] ${dna ? `dna=${dna.name} (engine)` : `template=${plan.template}`} → ${path.join(project, "index.html")}`,
+  );
+
+  // per-group FG → index_fg.html (same strategy as the Python version)
+  const fgGroups = plan.groups.filter((x) => x.layer === "fg");
+  if (fgGroups.length || (plan.crown_group || {}).layer === "fg") {
+    const fgCss = `
+    <style>
+      html.fg-only body { background: #000 !important; }
+      html.fg-only #fg-cover { position: absolute; inset: 0; background: #000; z-index: 1; pointer-events: none; }
+      /* visibility (not display:none): GSAP's transform parser needs a laid-out box at
+         construction time — display:none here crashed timeline build in headless preview */
+      html.fg-only .cap:not([data-layer="fg"]) { visibility: hidden !important; }
+    </style>
+`;
+    let fg = src.replace("<html ", '<html class="fg-only" ');
+    fg = fg.replace("</head>", fgCss + "  </head>");
+    fg = fg.replace('<div id="stage"', '<div id="fg-cover"></div>\n      <div id="stage"');
+    fs.writeFileSync(path.join(project, "index_fg.html"), fg);
+    console.log(
+      `[compile] ${fgGroups.length} fg group(s) → ${path.join(project, "index_fg.html")}`,
+    );
+  }
+}
+main();
diff --git a/.claude/skills-media/embedded-captions/scripts/make-theme.cjs b/.claude/skills-media/embedded-captions/scripts/make-theme.cjs
new file mode 100644
index 000000000..ddf71d725
--- /dev/null
+++ b/.claude/skills-media/embedded-captions/scripts/make-theme.cjs
@@ -0,0 +1,8781 @@
+#!/usr/bin/env node
+/*
+ * make-theme.cjs — THEME mode compiler (third compiler, beside standard/cinematic).
+ *
+ * A theme DNA (themes/<name>.json) is a complete visual constitution composed
+ * from two registries implemented HERE, once, for all DNAs:
+ *
+ *   BODY PARADIGMS  how the transcript surface lives
+ *     rail      lower-third lines that replace each other (fg alpha)
+ *     panel     console log accumulating in a docked glass panel (fg alpha)
+ *     poem      lines accumulate in open space, stanza by stanza (fg alpha)
+ *     takeover  every beat owns the full frame as a hard-cut card (bg)
+ *
+ *   HERO SETPIECES  the climax choreography
+ *     detonation  sliced stencil stamp: shear-in, snap, squash, cool, furniture
+ *     decode      slot-machine glyph reels lock left→right, CRT-off exit
+ *     drawon      single-line-font stroke-order writing (sequential dash reveal)
+ *     assembly    inline word assembles from inbound particles (poem apex)
+ *     colorflip   inline accent-color crush card (takeover apex)
+ *
+ * plus LINKAGES (theme interactions: redact-until-hero, disperse-on-last-word,
+ * corrupt-on-last-word) and a PLATE budget compiled to _postfx.sh.
+ *
+ * Inputs : <project>/theme.json  { dna, lines:[[w,...],...], hero:{match,text?},
+ *           minors?:[...], width?, height?, fps? }
+ *          <project>/transcript.json (verbatim, word timings)
+ *          themes/<dna>.json
+ * Outputs: index.html (bg: plate reaction + embedded setpiece)
+ *          rail.html  (fg alpha: body paradigm + front fx)   [unless body.layer=bg]
+ *          _postfx.sh (plate reaction: punch/shake/grain after composite)
+ *
+ * Render: scripts/render-theme.sh <project>   (render-and-composite + postfx)
+ *
+ * Determinism contract: paused GSAP on window.__timelines["main"], seeded PRNG
+ * only (mulberry32), set-chains / pure-f(t) keyframes, no Math.random/Date.now.
+ */
+const fs = require("fs");
+const path = require("path");
+const { execFileSync } = require("child_process");
+
+const PROJECT = path.resolve(process.argv[2] || ".");
+const SKILL = path.resolve(__dirname, "..");
+const F = 1 / 24;
+
+// ---------- load inputs ----------
+const theme = JSON.parse(fs.readFileSync(path.join(PROJECT, "theme.json"), "utf8"));
+const dna = JSON.parse(fs.readFileSync(path.join(SKILL, "themes", theme.dna + ".json"), "utf8"));
+const transcript = JSON.parse(fs.readFileSync(path.join(PROJECT, "transcript.json"), "utf8"));
+const W = theme.width || 1280,
+  H = theme.height || 720;
+
+// FPS: matte.fps is AUTHORITATIVE (written by matte.cjs at the source's native
+// rate; the matte overlay + postfx zoompan must run at this rate or the output
+// retimes). theme.fps only overrides when matte.fps is absent.
+function readMatteFps() {
+  try {
+    const v = parseInt(
+      fs.readFileSync(path.join(PROJECT, "matte.fps"), "utf8").replace(/\D/g, ""),
+      10,
+    );
+    return v > 0 ? v : null;
+  } catch {
+    return null;
+  }
+}
+const FPS = readMatteFps() || theme.fps || 24;
+
+function probeDuration() {
+  try {
+    const out = execFileSync(
+      "ffprobe",
+      [
+        "-v",
+        "error",
+        "-show_entries",
+        "format=duration",
+        "-of",
+        "csv=p=0",
+        path.join(PROJECT, "source.mp4"),
+      ],
+      { encoding: "utf8" },
+    );
+    return parseFloat(out.trim());
+  } catch {
+    const n = fs.readdirSync(path.join(PROJECT, "frames_fg")).length;
+    return n / FPS;
+  }
+}
+const DUR = +(theme.duration || probeDuration()).toFixed(6);
+
+// ---------- scene awareness (safe-zones.json): inherit the typography system ----------
+// The existing modes' scene intelligence applies here too: hero placement comes
+// from the measured occlusion bands + subject anchor, panel/poem dock on the
+// clearer side, and hero font size is width-fit to the actual word. Explicit
+// theme.json values > scene auto > DNA fallback.
+function readJson2(p) {
+  try {
+    return JSON.parse(fs.readFileSync(p, "utf8"));
+  } catch {
+    return null;
+  }
+}
+const sz = readJson2(path.join(PROJECT, "safe-zones.json"));
+
+// per-setpiece preferred band (topPct of the hero's TOP edge)
+const SETPIECE_PREF_TOP = {
+  detonation: 28,
+  decode: 26,
+  drawon: 18,
+  cpslam: 27,
+  coverword: 27,
+  settle: 27,
+  flapboard: 25,
+  ledwipe: 52,
+  vhsosd: 26,
+  bossintro: 30,
+  rubberstamp: 29,
+  lasercage: 33,
+  boltstrike: 24,
+  holoboot: 28,
+  biobloom: 33,
+  silkribbon: 18,
+  scopetrace: 25,
+  papermat: 26,
+  centerfold: 21,
+  chalkwrite: 44,
+  spraytag: 26,
+  brushwrite: 19,
+  inkbloom: 25,
+  ransomnote: 31,
+};
+
+function sceneHeroXY(setpiece, fontPx) {
+  const exX = theme.hero && theme.hero.x,
+    exY = theme.hero && theme.hero.y;
+  let x = exX ?? null,
+    y = exY ?? null;
+  if (x == null && sz && sz.heroAnchor && sz.heroAnchor.centerXPct != null)
+    x = (W * sz.heroAnchor.centerXPct) / 100;
+  if (x == null) x = dna.hero.x ?? W / 2;
+  if (y == null && sz && sz.heroBands && Array.isArray(sz.heroBands.profile)) {
+    const pref = SETPIECE_PREF_TOP[setpiece] ?? 28;
+    const ok = sz.heroBands.profile.filter((b) => b.occPct >= 18 && b.occPct <= 55);
+    const pool = ok.length ? ok : sz.heroBands.profile;
+    const best = pool.reduce((a, b) =>
+      Math.abs(b.topPct - pref) < Math.abs(a.topPct - pref) ? b : a,
+    );
+    y = (H * best.topPct) / 100 + fontPx * 0.55; // band top → glyph center
+  }
+  if (y == null) y = dna.hero.y ?? H * 0.37;
+  return { x: Math.round(x), y: Math.round(y) };
+}
+
+// width-fit: hero font size from the actual word (never overflow, never timid)
+function fitHeroPx(text, basePx, emPerChar, maxFrac) {
+  const est = (px) => text.length * emPerChar * px;
+  let px = basePx;
+  const maxW = W * (maxFrac || 0.92);
+  if (est(px) > maxW) px = Math.floor(maxW / (text.length * emPerChar));
+  // short words: allow growth toward the poster fill, capped — except in the
+  // calm register, where the DNA base size IS the ceiling (quiet briefs got a
+  // 188px hero from this growth in the cold-start E2E)
+  else if (est(px) < W * 0.55 && dna.register !== "calm")
+    px = Math.min(Math.floor(maxW / (text.length * emPerChar)), Math.round(basePx * 1.25));
+  return Math.max(64, px);
+}
+
+// clearer side for docked furniture (panel / poem): away from the subject
+const CLEARER = (sz && sz.subject && sz.subject.clearerSide) || "left";
+
+// ---------- measured glyph metrics (assets/fonts/char-widths.json) ----------
+// Per-char advance widths (em) + fontBoundingBox ascent/descent for every
+// bundled family, measured once in headless Chrome over the SAME woff2 faces
+// the renderer embeds. Lets a paradigm BAKE pixel-exact word geometry at
+// compile time (beam aim, flare centers) so font-load timing in the render
+// browser can never skew it (kerning ignored: ≤3px/word vs ground truth).
+const CHARW = (() => {
+  try {
+    return JSON.parse(fs.readFileSync(path.join(SKILL, "assets/fonts/char-widths.json"), "utf8"));
+  } catch {
+    return null;
+  }
+})();
+function famMetrics(fam) {
+  return (CHARW && CHARW[fam]) || null;
+}
+function wordPx(text, fam, px, lsEm) {
+  const m = famMetrics(fam);
+  if (!m) console.error(`[make-theme] WARN no measured widths for "${fam}" -> 0.6em/char estimate`);
+  const adv = m
+    ? [...text].reduce((a, c) => a + (m.widths[c] ?? m.widths["0"] ?? 0.6), 0)
+    : text.length * 0.6;
+  return adv * px + (lsEm || 0) * px * text.length;
+}
+
+// ---------- word timing: sequential matcher (verbatim completeness) ----------
+const norm = (s) => s.toLowerCase().replace(/[^\p{L}\p{N}']/gu, "");
+const tWords = transcript.words.map((w) => ({
+  text: w.text ?? w.word,
+  start: w.start,
+  end: w.end,
+  used: false,
+}));
+let cursor = 0;
+function takeWord(authored) {
+  const target = norm(authored);
+  for (let i = cursor; i < Math.min(cursor + 3, tWords.length); i++) {
+    if (norm(tWords[i].text) === target) {
+      if (tWords[i].used)
+        throw new Error(
+          `[make-theme] "${authored}" is already claimed by hero.match — embed setpieces own the hero word: leave it OUT of lines (rail↔climax hand-off)`,
+        );
+      tWords[i].used = true;
+      cursor = i + 1;
+      return tWords[i];
+    }
+  }
+  throw new Error(
+    `[make-theme] cannot match authored word "${authored}" near transcript position ${cursor} ("${(tWords[cursor] || {}).text}") — lines must follow transcript order verbatim`,
+  );
+}
+
+// hero phrase: located independently in the transcript (it may sit between lines)
+function findPhrase(phrase) {
+  const parts = phrase.trim().split(/\s+/).map(norm);
+  for (let i = 0; i <= tWords.length - parts.length; i++) {
+    if (parts.every((p, k) => norm(tWords[i + k].text) === p)) {
+      return {
+        start: tWords[i].start,
+        end: tWords[i + parts.length - 1].end,
+        idx: i,
+        len: parts.length,
+      };
+    }
+  }
+  throw new Error(`[make-theme] hero phrase "${phrase}" not found in transcript`);
+}
+const heroInline = !!dna.hero.inline;
+// theme.hero is OPTIONAL: a heroless theme runs pure-body (the right authoring
+// for quiet briefs — "安静/每个词都要读到" wants no setpiece at all).
+const HEROLESS = !theme.hero;
+if (HEROLESS) theme.hero = {};
+const hero = theme.hero.match ? findPhrase(theme.hero.match) : null;
+if (!hero && !HEROLESS)
+  throw new Error(
+    "[make-theme] theme.json requires hero:{match} (omit hero entirely for a quiet pure-body run)",
+  );
+const heroText = (theme.hero.text || theme.hero.match || "").toUpperCase();
+const heroDisplay = theme.hero.text || theme.hero.match; // case preserved for drawon/assembly
+
+// mark hero transcript words as consumed when the setpiece is EMBED (not inline):
+// the rail/panel/poem must NOT contain them (rail↔climax hand-off), except panel
+// with redact linkage (panel shows them redacted — author includes them).
+const redactLinkage = (dna.linkages || []).includes("redact-until-hero");
+if (!heroInline && !HEROLESS && !redactLinkage) {
+  for (let k = 0; k < hero.len; k++) tWords[hero.idx + k].used = true;
+}
+
+// resolve lines: every entry gets word objects with timings + role flags
+const minors = new Set((theme.minors || []).map(norm));
+const LINES = (theme.lines || []).map((arr, li) => {
+  const words = arr.map((a) => {
+    const tw = takeWord(a);
+    return {
+      display: a,
+      start: tw.start,
+      end: tw.end,
+      minor: minors.has(norm(a)),
+      isHero:
+        !!hero &&
+        norm(a) === norm((theme.hero.match || "").split(/\s+/)[0]) &&
+        tw.start >= hero.start - 0.01 &&
+        tw.start <= hero.end + 0.01,
+    };
+  });
+  return { id: li, words };
+});
+// completeness gate
+const unused = tWords.filter((w) => !w.used);
+if (unused.length)
+  throw new Error(
+    `[make-theme] transcript words not covered by lines/hero: ${unused.map((w) => w.text).join(" ")}`,
+  );
+
+// per-line windows
+LINES.forEach((L, i) => {
+  L.in = L.words[0].start - 0.02;
+  L.out = i + 1 < LINES.length ? LINES[i + 1].words[0].start - 0.02 : DUR - 0.1;
+});
+const LASTWORD = LINES[LINES.length - 1].words[LINES[LINES.length - 1].words.length - 1];
+
+// hero window: onset → bounded hold (maxHold; 0 = to clip end — neonsign's
+// lit-sign design). Unbounded default holds turned short clips into wallpaper.
+const heroIn = hero ? hero.start : -999;
+const MAXHOLD = dna.hero.maxHold ?? 3.2;
+const heroOut = hero
+  ? Math.min(DUR - 0.06, theme.hero.out ?? (MAXHOLD > 0 ? heroIn + MAXHOLD : DUR - 0.1))
+  : -999;
+
+// ---------- hero geometry: scene-aware position + width-fit size (computed ONCE,
+// shared by the setpiece and the front fx so flash/rings/sparks stay centered) ----
+const HG = { x: dna.hero.x ?? W / 2, y: dna.hero.y ?? H * 0.37, fontPx: dna.hero.fontPx || 178 };
+if (!heroInline && !HEROLESS) {
+  if (dna.hero.setpiece === "detonation") {
+    HG.fontPx = fitHeroPx(heroText, dna.hero.fontPx || 178, 0.56, 0.92);
+    Object.assign(HG, sceneHeroXY("detonation", HG.fontPx));
+    HG.halfW = (heroText.length * 0.56 * HG.fontPx) / 2;
+  } else if (dna.hero.setpiece === "decode") {
+    const units = [...heroText].reduce((a, c) => a + (c === " " ? 0.38 : 0.82), 0);
+    HG.fontPx = Math.min(dna.hero.fontPx || 112, Math.floor((W * 0.94) / units));
+    Object.assign(HG, sceneHeroXY("decode", HG.fontPx));
+    HG.halfW = (units * HG.fontPx) / 2;
+  } else if (dna.hero.setpiece === "drawon") {
+    Object.assign(HG, sceneHeroXY("drawon", 130));
+    HG.halfW = Math.min(dna.hero.params.targetWidth || 640, W - 200) / 2;
+  } else if (dna.hero.setpiece === "cpslam") {
+    HG.fontPx = fitHeroPx(heroText, dna.hero.fontPx || 168, 0.56, 0.9);
+    Object.assign(HG, sceneHeroXY("cpslam", HG.fontPx));
+    HG.halfW = (heroText.length * 0.56 * HG.fontPx) / 2;
+  } else if (dna.hero.setpiece === "settle") {
+    HG.fontPx = fitHeroPx(heroText, dna.hero.fontPx || 150, 0.58, 0.9);
+    Object.assign(HG, sceneHeroXY("settle", HG.fontPx));
+    HG.halfW = (heroText.length * 0.58 * HG.fontPx) / 2;
+  } else if (dna.hero.setpiece === "flapboard") {
+    // one flap tile per char; tile geometry derives from fontPx (demo ratio
+    // 100px tile @ 138px Anton), width-fit shrinks both together
+    const gap = dna.hero.params.gap || 7;
+    const n = heroText.length;
+    let fpx = dna.hero.fontPx || 138;
+    let tw = Math.round(fpx * 0.725);
+    const fitW = W * 0.94 - 40 - (n - 1) * gap;
+    if (n * tw > fitW) {
+      tw = Math.floor(fitW / n);
+      fpx = Math.round(tw / 0.725);
+    }
+    HG.fontPx = fpx;
+    Object.assign(HG, sceneHeroXY("flapboard", fpx));
+    HG.tileW = tw;
+    HG.tileH = Math.round(tw * 1.48);
+    HG.halfW = (n * tw + (n - 1) * gap + 40) / 2;
+  } else if (dna.hero.setpiece === "ledwipe") {
+    // LED transit panel: the word lights inside a fixed departure-board panel
+    // (demo 1080×232 @ 120px VT323 ≈ 0.50em/char incl tracking) — width-fit
+    // shrinks the type, never the panel; panel height derives from the type
+    const panelW = Math.min(dna.hero.params.panelW || 1080, W - 120);
+    const units = heroText.length * 0.5;
+    HG.fontPx = Math.min(dna.hero.fontPx || 120, Math.floor((panelW - 80) / units));
+    Object.assign(HG, sceneHeroXY("ledwipe", HG.fontPx));
+    HG.panelW = panelW;
+    HG.panelH = 44 + Math.round(HG.fontPx * 1.42) + 18;
+    HG.halfW = panelW / 2;
+  } else if (dna.hero.setpiece === "vhsosd") {
+    // camcorder OSD readout (demo: VT323 150px ≈ 0.47em/char incl 0.02em tracking)
+    HG.fontPx = fitHeroPx(heroText, dna.hero.fontPx || 150, 0.47, 0.92);
+    Object.assign(HG, sceneHeroXY("vhsosd", HG.fontPx));
+    HG.halfW = (heroText.length * 0.47 * HG.fontPx) / 2;
+  } else if (dna.hero.setpiece === "bossintro") {
+    // 8-bit boss word (demo: Press Start 2P 84px ≈ 1.0em/char); the pixel-block
+    // matrix derives from the word rect (cell 0.7×/0.5× fontPx, ~50px side pad)
+    HG.fontPx = fitHeroPx(heroText, dna.hero.fontPx || 84, 1.0, 0.92);
+    Object.assign(HG, sceneHeroXY("bossintro", HG.fontPx));
+    HG.halfW = (heroText.length * 1.0 * HG.fontPx) / 2;
+  } else if (dna.hero.setpiece === "rubberstamp") {
+    // bordered rubber-stamp face (demo: Special Elite 120px REMARKABLE ≈
+    // 0.60em/char + 0.015em tracking); the face adds padding + border that
+    // scale with fontPx (80px + 12px at the demo size)
+    HG.fontPx = fitHeroPx(heroText, dna.hero.fontPx || 120, 0.615, 0.86);
+    Object.assign(HG, sceneHeroXY("rubberstamp", HG.fontPx));
+    HG.halfW = (heroText.length * 0.615 * HG.fontPx + (92 * HG.fontPx) / 120) / 2;
+  } else if (dna.hero.setpiece === "lasercage") {
+    // beam-cage word (demo: Audiowide 100px): exact em width from the measured
+    // char table — the converging beams, cage lines and glow stack all derive
+    // from the word rect, so the fit must not guess
+    const em1 = wordPx(heroText, dna.fonts.hero, 1, 0.02) || heroText.length * 0.8;
+    HG.fontPx = Math.min(dna.hero.fontPx || 100, Math.floor((W * 0.9) / em1));
+    Object.assign(HG, sceneHeroXY("lasercage", HG.fontPx));
+    HG.halfW = (em1 * HG.fontPx) / 2;
+  } else if (dna.hero.setpiece === "boltstrike") {
+    // storm slam (demo: Anton 145px REMARKABLE): exact em width from the
+    // measured char table — the bolt offsets, word scrim and ozone glow all
+    // derive from the word rect (demo rect: 720×145 → halfW 360)
+    const em1 = wordPx(heroText, dna.fonts.hero, 1, 0.012) || heroText.length * 0.56;
+    HG.fontPx = Math.min(dna.hero.fontPx || 145, Math.floor((W * 0.92) / em1));
+    Object.assign(HG, sceneHeroXY("boltstrike", HG.fontPx));
+    HG.halfW = (em1 * HG.fontPx) / 2;
+  } else if (dna.hero.setpiece === "holoboot") {
+    // volumetric projection word (demo: Orbitron 700 118px, letter-spacing 0):
+    // exact em width from the measured char table — the projection cone, seed
+    // beam, emitter dot and scrim all derive from the word rect
+    const em1 = wordPx(heroText, dna.fonts.hero, 1, 0) || heroText.length * 0.8;
+    HG.fontPx = Math.min(dna.hero.fontPx || 118, Math.floor((W * 0.9) / em1));
+    Object.assign(HG, sceneHeroXY("holoboot", HG.fontPx));
+    HG.halfW = (em1 * HG.fontPx) / 2;
+  } else if (dna.hero.setpiece === "biobloom") {
+    // abyss bloom word (demo: Fredoka 700 120px RECOVER, 0.01em tracking):
+    // exact em width from the measured char table — the tendril anchors,
+    // pocket scrim, pre-glow and spill all derive from the word rect
+    const em1 = wordPx(heroText, dna.fonts.hero, 1, 0.01) || heroText.length * 0.66;
+    HG.fontPx = Math.min(dna.hero.fontPx || 120, Math.floor((W * 0.9) / em1));
+    Object.assign(HG, sceneHeroXY("biobloom", HG.fontPx));
+    HG.halfW = (em1 * HG.fontPx) / 2;
+  } else if (dna.hero.setpiece === "silkribbon") {
+    // silk ribbon draw-on (demo: HersheyScript "recover" w=880 on a 1010×280
+    // canvas, ink center ≈ canvas center): the canvas, aurora-gradient span
+    // and spill all derive from targetWidth; 115 ≈ the ribbon's ink height
+    // (sky band top → ribbon center, same registration as the demo)
+    Object.assign(HG, sceneHeroXY("silkribbon", 115));
+    HG.ribbonW = Math.min(dna.hero.params.targetWidth || 880, W - 240);
+    HG.halfW = (HG.ribbonW + 130) / 2;
+  } else if (dna.hero.setpiece === "scopetrace") {
+    // phosphor trace word (demo: HersheyScript "pixel size" ≈705px ink, ink
+    // center ≈ baseline − 28): the surge column, flatline flash, spill and
+    // write window all derive from targetWidth; 115 ≈ the trace's ink height
+    Object.assign(HG, sceneHeroXY("scopetrace", 115));
+    HG.traceW = Math.min(dna.hero.params.targetWidth || 720, W - 200);
+    HG.halfW = (HG.traceW + 50) / 2;
+  } else if (dna.hero.setpiece === "papermat") {
+    // torn-paper letter chips glued on a kraft mat (demo: Anton 130px ink on
+    // 118×170 chips, pitch tileW+14, mat N*pitch+80 wide × 240 tall): chip
+    // geometry derives from fontPx (demo ratios), width-fit shrinks both
+    const n = heroText.length;
+    let fpx = dna.hero.fontPx || 130;
+    let tw = Math.round(fpx * 0.91);
+    const fitW = W * 0.94 - 80 - n * 14;
+    if (n * tw > fitW) {
+      tw = Math.floor(fitW / n);
+      fpx = Math.round(tw / 0.91);
+    }
+    HG.fontPx = fpx;
+    Object.assign(HG, sceneHeroXY("papermat", fpx));
+    HG.tileW = tw;
+    HG.tileH = Math.round(fpx * 1.31);
+    HG.pitch = tw + 14;
+    HG.matW = n * HG.pitch + 80;
+    HG.matH = Math.round(fpx * 1.846);
+    HG.halfW = HG.matW / 2;
+  } else if (dna.hero.setpiece === "centerfold") {
+    // pop-up book centerfold (demo: Baloo 2 800 120px STARS over a 12-point
+    // paper starburst, outer R 220 ≈ 0.59×wordW, box 620×560 = 2R+180 × 2R+fontPx):
+    // the bursts, blob shadow, struts and the confetti hinge all derive from
+    // the word rect; width-fit shrinks the type, the burst follows the word
+    // but is capped so the unfold stays inside the frame
+    const em1 = wordPx(heroText, dna.fonts.hero, 1, 0.02) || heroText.length * 0.62;
+    HG.fontPx = Math.min(dna.hero.fontPx || 120, Math.floor((W * 0.5) / em1));
+    Object.assign(HG, sceneHeroXY("centerfold", HG.fontPx));
+    HG.wordW = Math.round(em1 * HG.fontPx);
+    HG.burstR = Math.round(Math.min(Math.max(1.83 * HG.fontPx, 0.59 * HG.wordW), H * 0.42));
+    HG.boxW = Math.max(2 * HG.burstR + 180, HG.wordW + 24);
+    HG.boxH = 2 * HG.burstR + HG.fontPx;
+    HG.halfW = HG.boxW / 2;
+  } else if (dna.hero.setpiece === "chalkwrite") {
+    // hand-written chalk word (demo: HersheyScript "remarkable" ≈860px ink,
+    // ink 130 tall, ink CENTER on HG.y): the writing starts at the board's
+    // LEFT margin — a hand writes from the left, never centered on the
+    // subject — so x derives from the body strip, not the hero anchor; the
+    // stroke path is parsed at compile time inside the setpiece and the
+    // board rect / underlines / fg dust clap all register on the measured
+    // ink box. 130 ≈ the chalk ink height (band top → ink center).
+    const stripW9 = (dna.body.strip && dna.body.strip.w) || 1200;
+    const SX9 = (dna.body.strip && dna.body.strip.x) ?? Math.round((W - stripW9) / 2);
+    HG.chalkW = Math.min(dna.hero.params.targetWidth || 860, stripW9 - 28);
+    HG.fontPx = 130;
+    Object.assign(HG, sceneHeroXY("chalkwrite", 130));
+    if ((theme.hero && theme.hero.x) == null) HG.x = SX9 + 12 + Math.round(HG.chalkW / 2);
+    HG.halfW = Math.round(HG.chalkW / 2);
+  } else if (dna.hero.setpiece === "spraytag") {
+    // spray-painted tag (demo: HersheyScript "recover" w=1000 → ink ≈1010×120,
+    // ink center (646,252)): the tag CENTERS on the hero anchor in the sky
+    // band — crossing the subject silhouette is the point; the stroke path is
+    // parsed at compile time inside the setpiece, which registers the
+    // pen-finish point on HG for the fg paint splat (fx.paintsplat). 120 ≈ the
+    // tag's ink height (band top → ink center); halfW adds the halo overspray.
+    HG.sprayW = Math.min(dna.hero.params.targetWidth || 1000, W - 140);
+    HG.fontPx = 120;
+    Object.assign(HG, sceneHeroXY("spraytag", 120));
+    HG.halfW = Math.round(HG.sprayW / 2) + 30;
+  } else if (dna.hero.setpiece === "brushwrite") {
+    // sumi-e gesture (demo: HersheyScript "remarkable" w=760 → ink ≈760×115,
+    // ink center (863,202)): the gesture CENTERS on the hero anchor in the sky
+    // band — crossing the subject silhouette is the point; the stroke path is
+    // parsed at compile time inside the setpiece, which registers the
+    // pen-START point on HG for the fg ink flecks (fx.brushflecks). 120 ≈ the
+    // gesture's ink height (band top → ink center); halfW adds spatter margin.
+    HG.brushW = Math.min(dna.hero.params.targetWidth || 760, W - 240);
+    HG.fontPx = 120;
+    Object.assign(HG, sceneHeroXY("brushwrite", 120));
+    HG.halfW = Math.round(HG.brushW / 2) + 40;
+  } else if (dna.hero.setpiece === "inkbloom") {
+    // sumi drop in still water (demo: Shippori Mincho 700 132px "pixel size.",
+    // 0.02em tracking, case preserved): exact em width from the measured char
+    // table — the blob stack, ripple rings and wisp anchors all derive from
+    // the word rect (kx/ky scale units inside the setpiece)
+    const em1 = wordPx(heroDisplay, dna.fonts.hero, 1, 0.02) || heroDisplay.length * 0.5;
+    HG.fontPx = Math.min(dna.hero.fontPx || 132, Math.floor((W * 0.9) / em1));
+    Object.assign(HG, sceneHeroXY("inkbloom", HG.fontPx));
+    HG.halfW = (em1 * HG.fontPx) / 2;
+  } else if (dna.hero.setpiece === "ransomnote") {
+    // ransom-note letter chips (demo: 10 chips, 4 recipes/fonts cycled, base
+    // 130px with seeded ±13% sizes): width-fit uses the measured advance of
+    // each glyph IN ITS OWN recipe font + 0.20em chip padding + 6px margins,
+    // so the crooked collage never overflows the frame
+    const fams4 = [dna.fonts.body, dna.fonts.dark, dna.fonts.news, dna.fonts.accent];
+    let k4 = 0;
+    const em1 = [...heroText].reduce((a, c) => {
+      if (c === " ") return a + 0.3;
+      const fam = fams4[k4++ % 4];
+      return a + (famMetrics(fam) ? wordPx(c, fam, 1, 0) : 0.62) + 0.2;
+    }, 0);
+    const n = heroText.length;
+    HG.fontPx = Math.min(dna.hero.fontPx || 130, Math.floor((W * 0.92 - n * 6) / em1));
+    Object.assign(HG, sceneHeroXY("ransomnote", HG.fontPx));
+    HG.halfW = (em1 * HG.fontPx + n * 6) / 2;
+  } else if (dna.hero.setpiece === "coverword") {
+    // metric-exact fit from the replica font's advance widths (logo case:
+    // first letter upper, rest lower — the official mark's own arrangement)
+    const CPM = JSON.parse(
+      fs.readFileSync(path.join(SKILL, "assets/brand/cyberpunk-widths.json"), "utf8"),
+    );
+    const disp = heroText[0].toUpperCase() + heroText.slice(1).toLowerCase();
+    const bad = [...disp].filter((c) => !(c in CPM.widths));
+    if (bad.length)
+      throw new Error(
+        `[make-theme] coverword: no replica glyph for ${JSON.stringify(bad)} in "${heroText}" — pick a hero without digits/special chars or use hero.text`,
+      );
+    const em = [...disp].reduce((a, c) => a + CPM.widths[c], 0) + 0.01 * (disp.length - 1);
+    // glyph ink is small inside the em box (x-height ~0.3em) -> size by INK:
+    // dna fontPx = target ink height in px, not nominal font-size
+    const inkTop = Math.max(...[...disp].map((c) => (CPM.bounds[c] || [0, 0, 0, 0.5])[3]));
+    const inkBot = Math.min(...[...disp].map((c) => (CPM.bounds[c] || [0, -0.1, 0, 0])[1]));
+    const inkH = inkTop - inkBot;
+    HG.fontPx = Math.round(Math.min((dna.hero.fontPx || 150) / inkH, (W * 0.84) / em));
+    Object.assign(HG, sceneHeroXY("coverword", Math.round(HG.fontPx * inkH)));
+    HG.halfW = (em * HG.fontPx) / 2 + 0.9 * HG.fontPx;
+    HG.coverEm = em;
+    HG.coverDisp = disp;
+    HG.coverInk = { inkTop, inkBot, inkH };
+  }
+  // keep the word on frame (when wider than the frame, CENTER it — an inverted
+  // Math.max/Math.min clamp would silently pin to the lower bound off-center)
+  if (HG.halfW)
+    HG.x =
+      2 * HG.halfW + 24 > W ? W / 2 : Math.max(HG.halfW + 12, Math.min(W - HG.halfW - 12, HG.x));
+  HG.y = Math.max(HG.fontPx * 0.55 + 8, Math.min(H * 0.62, HG.y));
+}
+
+// ---------- shared emit helpers ----------
+const MULBERRY = `function mulberry32(a){return function(){a|=0;a=(a+0x6D2B79F5)|0;let t=Math.imul(a^(a>>>15),1|a);t=(t+Math.imul(t^(t>>>7),61|t))^t;return((t^(t>>>14))>>>0)/4294967296;}}`;
+
+// bundled @font-face subset for this DNA's families — the renderer only
+// auto-supplies its canonical fonts; anything else silently falls back unless
+// the page ships a local @font-face (same determinism contract as Standard).
+const FONT_FACES = (() => {
+  let css = "";
+  try {
+    css = fs.readFileSync(path.join(SKILL, "modes/standard/fonts/fonts.css"), "utf8");
+  } catch {
+    return null;
+  }
+  return css
+    .split("@font-face")
+    .slice(1)
+    .map((b) => "@font-face" + b.slice(0, b.indexOf("}") + 1));
+})();
+// per-page: embed only families this page's markup actually references
+function fontCssFor(pageParts) {
+  if (!FONT_FACES) return "";
+  const fams = [...new Set(Object.values(dna.fonts || {}))].filter((f) => !/^Hiragino/.test(f));
+  const out = [];
+  for (const fam of fams) {
+    if (!pageParts.includes(fam)) continue;
+    // quote-agnostic: fonts.css has shipped with both 'single' and "double"
+    // quoted family names (formatters flip them); a literal match silently
+    // skipped EVERY embed and warned on bundled fonts.
+    const famRe = new RegExp(
+      `font-family\\s*:\\s*['"]` + fam.replace(/[.*+?^${}()|[\]\\]/g, "\\$&") + `['"]`,
+    );
+    const hits = FONT_FACES.filter((b) => famRe.test(b));
+    if (!hits.length)
+      console.error(
+        `[make-theme] WARN font "${fam}" not in bundled fonts.css -> renderer fallback risk`,
+      );
+    out.push(...hits);
+  }
+  return out.join("\n");
+}
+const GSAP = `<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js" integrity="sha384-sG0Hv1tP1lZCk9KQmrIbY/XNwi+OY84GQqhMscbnsoBFqAz8KNCil1kvfL3Hbbk2" crossorigin="anonymous"></script>`;
+
+function bgSkeleton(stageHtml, css, js) {
+  const FONT_CSS = fontCssFor(stageHtml + css);
+  return `<!doctype html>
+<!-- generated by make-theme.cjs — theme DNA "${dna.name}" (bg layer) -->
+<html lang="en">
+<head>
+<meta charset="utf-8">
+${GSAP}
+<style>
+${FONT_CSS}
+  html, body { margin:0; padding:0; width:${W}px; height:${H}px; overflow:hidden; background:#000; }
+  #root { position:relative; width:${W}px; height:${H}px; }
+  #a-roll { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:1; }
+  #stage { position:absolute; inset:0; z-index:2; }
+${css}
+</style>
+</head>
+<body>
+  <div id="root" data-composition-id="main" data-start="0" data-duration="${DUR}"
+       data-width="${W}" data-height="${H}">
+    <video id="a-roll" src="source.mp4" muted playsinline
+           data-duration="${DUR}" data-track-index="0"></video>
+    <div id="stage">
+${stageHtml}
+    </div>
+    <audio id="a-roll-audio" src="source.mp4" data-start="0" data-duration="${DUR}"
+           data-track-index="3" data-volume="1"></audio>
+  </div>
+<script>
+  window.__timelines = window.__timelines || {};
+  const tl = gsap.timeline({ paused: true });
+  const F = ${F};
+  ${MULBERRY}
+${js}
+  tl.seek(0);
+  window.__timelines["main"] = tl;
+</script>
+</body>
+</html>`;
+}
+
+function fgSkeleton(stageHtml, css, js) {
+  const FONT_CSS = fontCssFor(stageHtml + css);
+  return `<!doctype html>
+<!-- generated by make-theme.cjs — theme DNA "${dna.name}" (fg alpha layer) -->
+<html lang="en">
+<head>
+<meta charset="utf-8">
+${GSAP}
+<style>
+${FONT_CSS}
+  html, body { margin:0; padding:0; width:${W}px; height:${H}px; overflow:hidden; background:transparent; }
+  #root { position:relative; width:${W}px; height:${H}px; }
+  #stage { position:absolute; inset:0; }
+${css}
+</style>
+</head>
+<body>
+  <div id="root" data-composition-id="main" data-start="0" data-duration="${DUR}"
+       data-width="${W}" data-height="${H}">
+    <div id="stage">
+${stageHtml}
+    </div>
+  </div>
+<script>
+  window.__timelines = window.__timelines || {};
+  const tl = gsap.timeline({ paused: true });
+  const F = ${F};
+  ${MULBERRY}
+${js}
+  tl.seek(0);
+  window.__timelines["main"] = tl;
+</script>
+</body>
+</html>`;
+}
+
+const esc = (s) => String(s).replace(/&/g, "&amp;").replace(/</g, "&lt;");
+const J = JSON.stringify;
+
+/* =====================================================================
+ * BODY PARADIGMS — each returns { css, html, js } for the fg (or bg) file
+ * ===================================================================== */
+
+function paradigmRail() {
+  const b = dna.body;
+  const lineData = LINES.map((L) => ({
+    id: "r" + L.id,
+    in: +L.in.toFixed(3),
+    out: +L.out.toFixed(3),
+    words: L.words.map((w) => [w.display, +w.start.toFixed(3), w.minor ? 1 : 0]),
+  }));
+  const css = `
+  .rail { position:absolute; left:${W / 2}px; top:${H - b.bottomPx}px; opacity:0; white-space:nowrap;
+          font-family:'${dna.fonts.body}', sans-serif; font-size:${b.fontPx}px; line-height:1;
+          letter-spacing:${b.letterSpacing || "0.02em"}; color:${dna.palette.body};
+          ${b.textTransform ? "text-transform:" + b.textTransform + ";" : ""}
+          text-shadow: ${b.glow || "0 3px 14px rgba(0,0,0,0.65), 0 1px 3px rgba(0,0,0,0.5)"}; }
+  .rail .w { display:inline-block; opacity:0; margin:0 0.14em; }
+  .rail .w.minor { font-size:${Math.round(b.fontPx * (b.minorScale || 1.4))}px; }
+  .rail .w.em { color:${dna.palette.em || dna.palette.accent}; font-weight:700; }
+  ${
+    b.rule
+      ? `#rrule { position:absolute; left:${W / 2}px; top:${H - b.bottomPx + 38}px; width:0; height:2px;
+          background:${b.rule.color}; opacity:0.5; transform:translateX(-50%);
+          box-shadow: 0 0 12px ${dna.palette.accent}; }`
+      : ""
+  }`;
+  const html =
+    lineData.map((L) => `      <div class="rail" id="${L.id}"></div>`).join("\n") +
+    (b.rule ? `\n      <div id="rrule"></div>` : "");
+  const stamp = b.entrance === "stamp";
+  const boot = b.entrance === "bootflick";
+  const fade = b.entrance === "fade";
+  const js = `
+  // ---- body paradigm: RAIL (${b.entrance} in / ${b.exit} out) ----
+  const HOT = ${J(dna.palette.hot || dna.palette.accent)}, BONE = ${J(dna.palette.body)};
+  const RAIL = ${J(lineData)};
+  const rrnd = mulberry32(2026);
+  RAIL.forEach((L) => {
+    const line = document.getElementById(L.id);
+    L.words.forEach(([txt,,minor]) => {
+      const s = document.createElement("span");
+      s.className = "w" + (minor ? (${J(stamp)} || ${J(boot)} ? " minor" : " em") : "");
+      s.textContent = txt; line.appendChild(s);
+    });
+    gsap.set(line, { xPercent: -50, yPercent: -100 });
+    tl.set(line, { opacity: 1 }, L.in);
+    const XO = L.out - ${b.exit === "drop" ? "0.18" : "0.17"};   // exit start (single source)
+    let lastB = -1;                                              // line-y bounce ownership guard
+    L.words.forEach(([txt, st, minor], wi) => {
+      const el = line.children[wi];
+${
+  boot
+    ? `      // BOOTFLICK: corrupted-cyan boot 1-2f -> settles to UI color
+      tl.set(el, { opacity: 0.6, color: "#00F0FF", x: 2 }, st);
+      if (rrnd() < 0.45) { tl.set(el, { opacity: 0.15, x: -2 }, st + F); tl.set(el, { opacity: 1, color: BONE, x: 0 }, st + 2 * F); }
+      else { tl.set(el, { opacity: 1, color: BONE, x: 0 }, st + F); }
+      if (minor) {
+        tl.fromTo(el, { scale: 1.18 }, { scale: 1, duration: 0.25, ease: "power2.out" }, st + F);
+        tl.set(el, { textShadow: "2px 0 0 #00F0FF, -2px 0 0 #FF003C, 0 2px 10px rgba(0,0,0,0.75)" }, st + 2 * F);
+      }`
+    : fade
+      ? `      // FADE: 2-frame fade-up — the word simply reads (anchor register)
+      tl.fromTo(el, { opacity: 0, y: 4 }, { opacity: 1, y: 0, duration: 0.12, ease: "power2.out" }, st);
+      if (minor) tl.fromTo(el, { scale: 1.07 }, { scale: 1, duration: 0.3, ease: "power2.out" }, st);`
+      : stamp
+        ? `      // STAMP: 1f appear oversized+hot, crush, recoil, cool to bone
+      tl.set(el, { opacity: 1, scale: minor ? 2.1 : 1.28, color: HOT, transformOrigin: "50% 80%" }, st);
+      tl.to(el, { scale: 1, duration: 0.11, ease: "power3.in" }, st + 0.01);
+      tl.set(el, { scaleX: 1.05, scaleY: 0.95 }, st + 0.12);
+      tl.to(el, { scaleX: 1, scaleY: 1, duration: 0.22, ease: "elastic.out(1, 0.45)" }, st + 0.16);
+      tl.to(el, { color: minor ? ${J(dna.palette.minorCool || "#F2CFA0")} : BONE, duration: minor ? 0.6 : 0.32, ease: "power1.in" }, st + 0.15);
+      if (st + 0.02 >= lastB && st + 0.24 <= XO) {   // one bounce owner at a time; none during exit
+        tl.set(line, { y: minor ? 4 : 2 }, st + 0.02);
+        tl.to(line, { y: 0, duration: 0.18, ease: "power2.out" }, st + 0.06);
+        lastB = st + 0.24;
+      }`
+        : `      // FLICK: tube lights with seeded double-flicks
+      tl.set(el, { opacity: 0.35 }, st);
+      if (rrnd() < 0.35) { tl.set(el, { opacity: 0.08 }, st + F); tl.set(el, { opacity: 1 }, st + 2 * F); }
+      else { tl.set(el, { opacity: 1 }, st + F); }
+      if (minor) tl.fromTo(el, { scale: ${dna.body.emScale || 1.18} }, { scale: 1, duration: 0.3, ease: "power2.out" }, st + F);`
+}
+    });
+${
+  b.exit === "drop"
+    ? `    // DROP exit (completes before the next line stamps)
+    tl.to(line, { y: 34, opacity: 0, duration: 0.16, ease: "power2.in" }, XO);
+    tl.set(line, { display: "none" }, XO + 0.18);`
+    : b.exit === "fade"
+      ? `    // FADE exit (quiet settle-down)
+    tl.to(line, { opacity: 0, y: 6, duration: 0.15, ease: "power1.in" }, XO);
+    tl.set(line, { display: "none" }, XO + 0.17);`
+      : `    // POWERCUT exit (completes before the next line)
+    tl.set(line, { opacity: 0.5 }, XO); tl.set(line, { opacity: 0.12 }, XO + F);
+    tl.set(line, { opacity: 0 }, XO + 3 * F); tl.set(line, { display: "none" }, XO + 4 * F);`
+}
+  });
+${
+  b.rule
+    ? `  tl.fromTo("#rrule", { width: 0, opacity: 0 }, { width: ${b.rule.width}, opacity: 0.5, duration: 0.4, ease: "power2.out" }, 0.25);
+  tl.to("#rrule", { opacity: 0, duration: 0.3 }, ${(DUR - 0.2).toFixed(2)});`
+    : ""
+}
+${
+  b.yield
+    ? `  // rail yields while the apex lands (furniture never contests the hero).
+  // Overlap guards: dim starts after the line is IN, never runs into the exit;
+  // restore is emitted only with clear runway before the exit (else the line
+  // simply exits dimmed — never two owners of one opacity).
+  RAIL.forEach((L) => {
+    if (L.in < ${heroIn.toFixed(3)} + 0.9 && L.out > ${heroIn.toFixed(3)} - 0.3) {
+      const XO2 = L.out - ${b.exit === "drop" ? "0.18" : "0.17"};
+      const dimT = Math.max(${(heroIn - (b.yield.pre || 0.2)).toFixed(3)}, L.in + 0.05);
+      if (XO2 > dimT + 0.25) {
+        tl.to("#" + L.id, { opacity: ${b.yield.dim}, duration: 0.2 }, dimT);
+        const resT = ${(heroIn + (b.yield.post || 0.9)).toFixed(3)};
+        if (resT + 0.3 < XO2) tl.to("#" + L.id, { opacity: 1, duration: 0.25 }, resT);
+      }
+    }
+  });`
+    : ""
+}`;
+  return { css, html, js };
+}
+
+function paradigmPanel() {
+  const b = dna.body;
+  const lockT =
+    heroIn + 0.3 + (dna.hero.params.lockStagger || 0.045) * (heroText.length - 1) + 0.083;
+  const lineData = LINES.map((L) => ({
+    id: "ln" + L.id,
+    words: L.words.map((w) => [
+      w.display,
+      +w.start.toFixed(3),
+      // redaction: words inside the hero phrase window get blocks until lock
+      redactLinkage && w.start >= hero.start - 0.01 && w.start <= hero.end + 0.01
+        ? +lockT.toFixed(3)
+        : 0,
+    ]),
+  }));
+  const lineH = Math.round(b.fontPx * 1.35);
+  const maxVis = Math.max(3, Math.floor((H * 0.48 - 60) / lineH));
+  const dockCss = CLEARER === "right" ? `right:${b.panel.left}px;` : `left:${b.panel.left}px;`;
+  const css = `
+  #panel { position:absolute; ${dockCss} bottom:${b.panel.bottom}px; width:${b.panel.width}px;
+           padding:18px 22px 22px; background:${dna.palette.panelBg};
+           border:1px solid ${dna.palette.accent}59; border-radius:4px; opacity:0;
+           box-shadow: 0 0 24px rgba(0,0,0,0.35), inset 0 0 60px ${dna.palette.accent}0a; }
+  #panel .hd { font-family:'${dna.fonts.tag}', monospace; font-size:22px; color:${dna.palette.prompt};
+               letter-spacing:2px; border-bottom:1px solid ${dna.palette.accent}40;
+               padding-bottom:8px; margin-bottom:10px; }
+  .ln { font-family:'${dna.fonts.body}', monospace; font-size:${b.fontPx}px; line-height:1.35;
+        color:${dna.palette.body}; text-shadow: 0 0 8px ${dna.palette.accent}59;
+        white-space:nowrap; opacity:0; }
+  .ln .pr { color:${dna.palette.prompt}; margin-right:8px; }
+  .ln .w { display:inline-block; overflow:hidden; vertical-align:bottom; white-space:nowrap;
+           margin-right:0.3em; }
+  .ln .red { color:#7adcff; }
+  .caret { display:inline-block; width:14px; height:26px; background:${dna.palette.body};
+           vertical-align:baseline; opacity:0; margin-left:4px; }
+  #logclip { max-height:${maxVis * lineH}px; overflow:hidden; }
+  #logwrap { position:relative; }`;
+  const html = `      <div id="panel">
+        <div class="hd">${esc(theme.panelHeader || "OBS-01 // " + (b.panel.header || "LOG_"))}</div>
+        <div id="logclip"><div id="logwrap">
+${lineData.map((L) => `        <div class="ln" id="${L.id}"></div>`).join("\n")}
+        </div></div>
+      </div>`;
+  const js = `
+  // ---- body paradigm: PANEL (typed console log, accumulate) ----
+  tl.fromTo("#panel", { opacity: 0, x: -16 }, { opacity: 1, x: 0, duration: 0.3, ease: "power2.out" }, 0.05);
+${
+  b.yield
+    ? `  tl.to("#panel", { opacity: ${b.yield.dim}, duration: 0.25, ease: "power1.in" }, ${(heroIn - 0.08).toFixed(3)});
+  tl.to("#panel", { opacity: 1, duration: 0.3, ease: "power1.out" }, ${(lockT + 0.15).toFixed(3)});`
+    : ""
+}
+  const LOG = ${J(lineData)};
+  const MAXVIS = ${maxVis}, LINEH = ${lineH};
+  LOG.forEach((L, li) => {
+    if (li >= MAXVIS) {  // terminal scroll: older rows slide up out of the clip
+      tl.to("#logwrap", { y: -(li - MAXVIS + 1) * LINEH, duration: 0.28, ease: "power2.out" },
+            L.words[0][1] - 0.10);
+    }
+    const line = document.getElementById(L.id);
+    const p = document.createElement("span"); p.className = "pr"; p.textContent = "$";
+    line.appendChild(p);
+    tl.set(line, { opacity: 1 }, L.words[0][1] - 0.03);
+    L.words.forEach(([txt, st, redUntil]) => {
+      const wrap = document.createElement("span"); wrap.className = "w";
+      const inner = document.createElement("span");
+      inner.textContent = redUntil ? "█".repeat(Math.max(3, txt.length - 1)) : txt;
+      wrap.appendChild(inner); line.appendChild(wrap);
+      tl.fromTo(wrap, { width: 0 }, { width: "auto", duration: 0.12,
+                ease: "steps(" + Math.max(2, txt.length) + ")" }, st);
+      if (redUntil) {
+        const real = document.createElement("span");
+        real.textContent = txt; real.style.display = "none"; real.className = "red";
+        wrap.appendChild(real);
+        tl.set(inner, { display: "none" }, redUntil);
+        tl.set(real, { display: "inline" }, redUntil);
+      }
+    });
+${
+  b.caret
+    ? `    const c = document.createElement("span"); c.className = "caret"; line.appendChild(c);
+    const lastEnd = L.words[L.words.length - 1][1] + 0.25;
+    for (let bk = 0; bk < 4; bk++) tl.set(c, { opacity: bk % 2 === 0 ? 1 : 0 }, lastEnd + bk * 0.22);
+    tl.set(c, { opacity: 0 }, lastEnd + 0.9);`
+    : ""
+}
+  });
+${
+  (dna.linkages || []).includes("corrupt-on-last-word")
+    ? `  // the feed corrupts on the final word
+  const NZ = ${(LASTWORD.start + 0.04).toFixed(3)};
+  [[3,0],[-4,1],[3,2],[-2,3],[0,4]].forEach(([dx, k]) => {
+    tl.set("#panel", { x: dx, filter: dx ? "hue-rotate(" + dx * 8 + "deg)" : "none" }, NZ + k * F);
+  });
+  tl.set("#panel", { x: 0, filter: "none" }, NZ + 5 * F);`
+    : ""
+}`;
+  return { css, html, js };
+}
+
+function paradigmPoem() {
+  const b = dna.body;
+  const colLeft = CLEARER === "right" ? Math.round(W * 0.52) : b.left;
+  const scrimSide = CLEARER === "right" ? "right" : "left";
+  // stanza split: break after a line whose last word ends a sentence
+  const stanzas = [[]];
+  LINES.forEach((L) => {
+    stanzas[stanzas.length - 1].push(L);
+    const last = L.words[L.words.length - 1].display;
+    if (/[.!?]$/.test(last) && L !== LINES[LINES.length - 1]) stanzas.push([]);
+  });
+  if (stanzas.some((s) => s.length > b.stanzaTops.length))
+    console.warn(
+      "[make-theme] poem stanza exceeds available slots — extra lines share the last slot",
+    );
+  const stanzaData = stanzas.map((s, si) =>
+    s.map((L, li) => ({
+      id: "s" + si + "l" + L.id,
+      top: b.stanzaTops[Math.min(li, b.stanzaTops.length - 1)] + si * 16,
+      words: L.words.map((w) => [
+        w.display,
+        +w.start.toFixed(3),
+        w.isHero && heroInline ? "big" : w.minor ? "em" : "",
+      ]),
+    })),
+  );
+  const lastStanzaIdx = stanzaData.length - 1;
+  const css = `
+  ${
+    b.scrim
+      ? `#pscrim { position:absolute; inset:0; opacity:0;
+            background: linear-gradient(${scrimSide === "left" ? "100deg" : "260deg"},
+              rgba(4,8,16,${b.scrim.opacity}) 0%, rgba(4,8,16,${b.scrim.opacity * 0.6}) 38%, rgba(4,8,16,0) 62%); }`
+      : ""
+  }
+  .pline { position:absolute; left:${colLeft}px; white-space:nowrap;
+           font-family:'${dna.fonts.body}', serif; font-weight:600; font-size:${b.fontPx}px;
+           line-height:1; color:${dna.palette.body};
+           text-shadow: 0 0 14px rgba(255,244,214,0.5), 0 2px 12px rgba(0,0,0,0.6); }
+  .pline .l { display:inline-block; opacity:0; }
+  .pline .sp { display:inline-block; width:0.28em; }
+  .pline .big { font-size:${Math.round(b.fontPx * (b.bigScale || 2))}px; font-style:italic; font-weight:700;
+                text-shadow: 0 0 24px rgba(255,244,214,0.7), 0 2px 14px rgba(0,0,0,0.6); }
+  .pline .em  { font-size:${Math.round(b.fontPx * (b.emScale || 1.38))}px; font-style:italic; font-weight:700; }
+  .star { position:absolute; border-radius:50%; background:#fff7e0; opacity:0;
+          box-shadow: 0 0 8px rgba(255,247,224,0.9); }`;
+  const html =
+    (b.scrim ? `      <div id="pscrim"></div>\n` : "") +
+    stanzaData
+      .flat()
+      .map((L) => `      <div class="pline" id="${L.id}" style="top:${L.top}px"></div>`)
+      .join("\n");
+  const disperse = (dna.linkages || []).includes("disperse-on-last-word");
+  const js = `
+  // ---- body paradigm: POEM (condense, accumulate, ${disperse ? "disperse" : "hold"}) ----
+  const prnd = mulberry32(${b.seed || 777});
+  const stage = document.getElementById("stage");
+${
+  b.scrim
+    ? `  tl.fromTo("#pscrim", { opacity: 0 }, { opacity: 1, duration: 0.6, ease: "power1.out" }, 0.15);
+  tl.to("#pscrim", { opacity: 0, duration: 0.4, ease: "power1.in" }, ${(LASTWORD.start + 0.15).toFixed(3)});`
+    : ""
+}
+  const STANZAS = ${J(stanzaData)};
+  const lastLetters = [];
+  STANZAS.forEach((stanza, si) => {
+    stanza.forEach((L) => {
+      const line = document.getElementById(L.id);
+      L.words.forEach(([txt, st, cls], wi) => {
+        if (wi > 0) { const g = document.createElement("span"); g.className = "sp"; line.appendChild(g); }
+        const letters = [];
+        for (const ch of txt) {
+          const l = document.createElement("span");
+          l.className = "l" + (cls ? " " + cls : ""); l.textContent = ch;
+          line.appendChild(l); letters.push(l);
+        }
+        const spread = cls === "big" ? ${dna.hero.params.spread || 150} : 46;
+        letters.forEach((l, li) => {
+          const sx = (prnd() - 0.5) * 2 * spread, sy = (prnd() - 0.5) * 2 * spread * 0.7;
+          tl.fromTo(l, { x: sx, y: sy, opacity: 0, filter: "blur(6px)" },
+            { x: 0, y: 0, opacity: 1, filter: "blur(0px)",
+              duration: cls === "big" ? 0.7 : 0.5, ease: "power2.out" },
+            st - 0.04 + li * (cls === "big" ? 0.03 : 0.016));
+          if (si === ${lastStanzaIdx}) lastLetters.push(l);
+        });
+        if (cls === "big") {
+          // SETPIECE assembly: star particles fly INTO the apex as it forms
+          const lt = line.style.top ? parseFloat(line.style.top) : 110;
+          for (let i = 0; i < ${dna.hero.params.particles || 22}; i++) {
+            const p = document.createElement("div");
+            p.className = "star"; stage.appendChild(p);
+            const s = 2 + Math.round(prnd() * 3);
+            const tx = ${colLeft} + 90 + prnd() * 240, ty = lt - 20 + prnd() * 70;
+            const fx = tx + (prnd() - 0.5) * 560, fy = ty + (prnd() - 0.5) * 380;
+            gsap.set(p, { width: s, height: s, left: fx, top: fy });
+            tl.to(p, { keyframes: { x: [0, (tx - fx) * 0.6, tx - fx], y: [0, (ty - fy) * 0.6, ty - fy],
+                                    opacity: [0, 0.95, 0] },
+                       duration: 0.5 + prnd() * 0.2, ease: "power2.in" }, st - 0.05 + prnd() * 0.3);
+          }
+          tl.fromTo(letters, { textShadow: "0 0 30px rgba(255,244,214,0.9), 0 2px 12px rgba(0,0,0,0.5)" },
+            { textShadow: "0 0 18px rgba(255,244,214,0.55), 0 2px 12px rgba(0,0,0,0.5)",
+              duration: 0.8, ease: "power1.out" }, st + 0.55);
+        }
+      });
+    });
+    // earlier stanzas drift out before the next stanza begins
+    if (si < STANZAS.length - 1) {
+      const nextIn = STANZAS[si + 1][0].words[0][1];
+      stanza.forEach((L, k) => {
+        tl.to("#" + L.id + " .l", { y: -10, opacity: 0, filter: "blur(4px)",
+          duration: 0.5, ease: "power1.in", stagger: 0.008 }, nextIn - 0.62 + k * 0.12);
+        tl.set("#" + L.id, { display: "none" }, nextIn + 0.1);
+      });
+    }
+  });
+${
+  disperse
+    ? `  // SEMANTIC EXIT: the whole visible poem disperses on the final word.
+  // Clamped so the scatter COMPLETES before the clip ends (stagger included).
+  const NZ = ${Math.min(LASTWORD.start + 0.06, DUR - 0.58).toFixed(3)};
+  const DDUR = ${Math.min(0.42, Math.max(0.24, DUR - Math.min(LASTWORD.start + 0.06, DUR - 0.58) - 0.14)).toFixed(2)};
+  lastLetters.forEach((l) => {
+    const dx = (prnd() - 0.5) * 260, dy = (prnd() - 0.5) * 200 - 40;
+    tl.to(l, { x: dx, y: dy, opacity: 0, filter: "blur(7px)",
+               duration: DDUR, ease: "power2.in" }, NZ + prnd() * 0.05);
+  });`
+    : ""
+}`;
+  return { css, html, js };
+}
+
+function paradigmTakeover() {
+  const b = dna.body;
+  // each LINE is a card; minors hot; hero = colorflip apex inline
+  const cards = LINES.map((L, i) => {
+    const txt = L.words
+      .map((w) => w.display)
+      .join(" ")
+      .toUpperCase();
+    const isHero = L.words.some((w) => w.isHero);
+    const hot = isHero || L.words.some((w) => w.minor);
+    const _contentish = txt.replace(/[^A-Z]/g, "").length;
+    const px = isHero
+      ? dna.hero.fontPx || 196
+      : Math.min(
+          b.sizes.minor,
+          Math.round(Math.min(b.sizes.content, (W * 0.86) / (0.55 * Math.max(3, txt.length)))),
+        );
+    return {
+      id: "c" + i,
+      txt,
+      in: +L.in.toFixed(3),
+      out: +L.out.toFixed(3),
+      px,
+      hot: hot ? 1 : 0,
+      hero: isHero ? 1 : 0,
+      last: i === LINES.length - 1 ? 1 : 0,
+    };
+  });
+  // a held card before a silence ≥0.5s creeps, then VOID until the next card
+  for (let i = 0; i + 1 < cards.length; i++) {
+    const gap = cards[i + 1].in - LINES[i].words[LINES[i].words.length - 1].end;
+    if (gap > 0.5) {
+      cards[i].creep = 1;
+      cards[i].out = +(cards[i + 1].in - Math.min(0.6, gap * 0.45)).toFixed(3);
+    }
+  }
+  const css = `
+  #dim { position:absolute; inset:0; opacity:0; background:#05070c; }
+  .card { position:absolute; opacity:0; white-space:nowrap;
+          font-family:'${dna.fonts.body}', sans-serif; line-height:1; letter-spacing:0.015em;
+          color:${dna.palette.body}; text-shadow: 0 4px 26px rgba(0,0,0,0.65); }
+  .card.hot { color:${dna.palette.accent};
+              text-shadow: 0 0 34px ${dna.palette.accent}73, 0 4px 26px rgba(0,0,0,0.65); }`;
+  const html = `      <div id="dim"></div>`;
+  const js = `
+  // ---- body paradigm: TAKEOVER (hard-cut full-frame cards) + colorflip apex ----
+  const stage = document.getElementById("stage");
+  const ANCH = ${J(b.anchors)};
+  tl.fromTo("#dim", { opacity: 0 }, { opacity: ${b.baseDim}, duration: 0.25, ease: "power2.in" }, 0.05);
+  const CARDS = ${J(cards)};
+  CARDS.forEach((c, ci) => {
+    const el = document.createElement("div");
+    el.className = "card" + (c.hot ? " hot" : "");
+    el.textContent = c.txt; el.style.fontSize = c.px + "px";
+    stage.appendChild(el);
+    const [ax, ay] = ANCH[ci % ANCH.length];
+    gsap.set(el, { left: ax, top: ay, xPercent: -50, yPercent: -50,
+                   rotation: (ci % 2 === 0 ? 1 : -1) * (0.8 + (ci % 3) * 0.7) });
+    if (c.hero) {
+      // SETPIECE colorflip: crush-in, squash, settle; plate dim deepens
+      tl.set("#dim", { opacity: ${dna.hero.params.dimKick} }, c.in);
+      tl.to("#dim", { opacity: ${b.baseDim}, duration: 0.5, ease: "power2.out" }, c.in + 0.12);
+      tl.set(el, { opacity: 1, scale: ${dna.hero.params.crushFrom}, filter: "blur(10px) brightness(2.6)" }, c.in - 0.04);
+      tl.to(el, { scale: 1, filter: "blur(0px) brightness(1)", duration: 0.11, ease: "power4.in" }, c.in - 0.04);
+      tl.set(el, { scaleX: 1.10, scaleY: 0.92 }, c.in + 0.07);
+      tl.to(el, { scaleX: 1, scaleY: 1, duration: 0.45, ease: "elastic.out(1.05, 0.36)" }, c.in + 0.15);
+      tl.to(el, { scale: 1.05, duration: Math.max(0.2, c.out - c.in - 0.3), ease: "power1.inOut" }, c.in + 0.25);
+    } else if (c.hot) {
+      tl.set(el, { opacity: 1, scale: ${b.hotSnap} }, c.in);
+      tl.to(el, { scale: 1, duration: 0.22, ease: "back.out(1.8)" }, c.in + 0.02);
+    } else {
+      tl.set(el, { opacity: 1, scale: 0.94 }, c.in);
+      tl.to(el, { scale: c.creep ? ${b.creepScale} : 1.0,
+                  duration: Math.max(0.08, c.out - c.in - 0.02),
+                  ease: c.creep ? "power1.in" : "power2.out" }, c.in + 0.01);
+    }
+    if (c.last && ${J(!!dna.hero.params.dissolveLast)}) {
+      tl.to(el, { filter: "blur(9px)", opacity: 0, duration: 0.32, ease: "power2.in" }, c.out - 0.23);
+      tl.set(el, { display: "none" }, c.out + 0.1);
+    } else {
+      tl.set(el, { opacity: 0, display: "none" }, c.out);
+    }
+  });
+  tl.to("#dim", { opacity: 0, duration: 0.3, ease: "power1.in" }, ${(DUR - 0.27).toFixed(2)});`;
+  return { css, html, js };
+}
+
+/* =====================================================================
+ * HERO SETPIECES (embedded, bg layer) — { css, html, js } for index.html
+ * ===================================================================== */
+
+function setpieceDetonation() {
+  const h = dna.hero,
+    p = h.params,
+    I = heroIn;
+  const bw = Math.min(p.barWidth, W - 100, HG.halfW * 2 + 140);
+  const css = `
+  #scrim { position:absolute; inset:0; opacity:0;
+           background: radial-gradient(120% 105% at 50% 38%, rgba(0,0,0,0) 26%, rgba(0,0,0,0.8) 100%); }
+  #dimP { position:absolute; inset:0; opacity:0; background:#000; }
+  #det { position:absolute; left:${HG.x}px; top:${HG.y}px; opacity:0; }
+  .band, #heat { position:absolute; left:0; top:0; transform:translate(-50%,-50%);
+          font-family:'${dna.fonts.hero}', sans-serif; font-size:${HG.fontPx}px; line-height:1;
+          letter-spacing:0.012em; white-space:nowrap; color:${dna.palette.body};
+          text-shadow: 0 3px 18px rgba(0,0,0,0.55), 0 1px 3px rgba(0,0,0,0.4); }
+  ${p.slices.map((s, i) => `#b${i + 1} { clip-path: inset(${s[0]}% 0 ${s[1]}% 0); }`).join("\n  ")}
+  #heat { top:6px; color:#ff7a28; filter:blur(24px); opacity:0; text-shadow:none; }
+  .bar { position:absolute; left:50%; width:${bw}px; height:3px; margin-left:-${bw / 2}px;
+         background:${dna.palette.body}; opacity:0.85; transform-origin:50% 50%; }
+  #barT { top:-${Math.round(HG.fontPx * 0.7)}px; } #barB { top:${Math.round(HG.fontPx * 0.66)}px; }
+  .tick { position:absolute; width:3px; height:14px; background:${dna.palette.hot}; top:-${Math.round(HG.fontPx * 0.7)}px; opacity:0; }
+  #tickL { left:calc(50% - ${bw / 2}px); } #tickR { left:calc(50% + ${bw / 2 - 3}px); }
+  #tagwrap { position:absolute; left:50%; transform:translateX(-50%); top:${Math.round(HG.fontPx * 0.7)}px;
+             overflow:hidden; white-space:nowrap; }
+  #tag { font-family:'${dna.fonts.tag}', monospace; font-size:21px; letter-spacing:0.34em;
+         color:${dna.palette.hot}; white-space:nowrap; text-shadow: 0 2px 8px rgba(0,0,0,0.6); }`;
+  const html = `      <div id="scrim"></div><div id="dimP"></div>
+      <div id="det">
+        <div id="heat">${esc(heroText)}</div>
+        ${p.slices.map((_, i) => `<div class="band" id="b${i + 1}">${esc(heroText)}</div>`).join("\n        ")}
+        ${p.bars ? `<div class="bar" id="barT"></div><div class="bar" id="barB"></div>` : ""}
+        ${p.ticks ? `<div class="tick" id="tickL"></div><div class="tick" id="tickR"></div>` : ""}
+        ${p.tag ? `<div id="tagwrap"><div id="tag">${esc(p.tag)}&nbsp;//&nbsp;T+${heroIn.toFixed(2)}S</div></div>` : ""}
+      </div>`;
+  const bandIds = p.slices.map((_, i) => "#b" + (i + 1));
+  const js = `
+  // ---- setpiece: DETONATION (charge → sheared slices snap → cool → furniture) ----
+  const I = ${I.toFixed(3)}, HOTC = ${J(dna.palette.hot)}, BONEC = ${J(dna.palette.body)};
+  tl.fromTo("#scrim", { opacity: 0 }, { opacity: ${dna.plate.charge}, duration: 0.40, ease: "power2.in" }, I - 0.42);
+  tl.set("#dimP", { opacity: ${dna.plate.dim} }, I);
+  tl.to("#dimP",  { opacity: ${(dna.plate.dim * 0.47).toFixed(2)}, duration: 0.9, ease: "power2.out" }, I + 0.10);
+  tl.to("#scrim", { opacity: 0.30, duration: 0.9, ease: "power2.out" }, I + 0.10);
+  tl.to(["#scrim","#dimP"], { opacity: 0, duration: 0.45, ease: "power1.in" }, ${(heroOut - 0.25).toFixed(3)});
+  tl.set("#det", { opacity: 1 }, I - 0.05);
+  tl.fromTo("#det", { scale: 3.4 }, { scale: 1.0, duration: 0.10, ease: "power4.in" }, I - 0.05);
+  const BANDS = ${J(bandIds)};
+  const SHEAR = ${J(p.sliceShear)};
+  BANDS.forEach((sel, i) => {
+    tl.fromTo(sel, { x: SHEAR[i], filter: "blur(14px) brightness(3.4)" },
+      { x: SHEAR[i] * 0.26, filter: "blur(0px) brightness(1.5)", duration: 0.10, ease: "power4.in" }, I - 0.05);
+  });
+  tl.set(BANDS, { x: 0, filter: "brightness(1.9)" }, I + 0.05);
+  tl.set("#det", { scaleX: 1.12, scaleY: 0.90 }, I + 0.05);
+  tl.to("#det",  { scaleX: 1, scaleY: 1, duration: 0.55, ease: "elastic.out(1.05, 0.34)" }, I + 0.13);
+  tl.to(BANDS, { filter: "brightness(1)", duration: 0.5, ease: "power2.out" }, I + 0.15);
+  tl.set(BANDS, { color: HOTC }, I + 0.05);
+  tl.to(BANDS, { color: BONEC, duration: 0.9, ease: "power1.in" }, I + 0.22);
+${p.bars ? `  tl.fromTo(["#barT","#barB"], { scaleX: 0, opacity: 0.85 }, { scaleX: 1, duration: 0.34, ease: "expo.out" }, I + 0.16);` : ""}
+${
+  p.ticks
+    ? `  tl.set(["#tickL","#tickR"], { opacity: 1 }, I + 0.42);
+  tl.fromTo(["#tickL","#tickR"], { scaleY: 0 }, { scaleY: 1, duration: 0.14, ease: "back.out(2)" }, I + 0.42);`
+    : ""
+}
+${p.tag ? `  tl.fromTo("#tagwrap", { width: 0 }, { width: 340, duration: 0.45, ease: "steps(16)" }, I + 0.5);` : ""}
+  tl.fromTo("#heat", { opacity: 0 }, { opacity: 0.75, duration: 0.3 }, I + 0.06);
+  tl.to("#heat", { keyframes: { opacity: [0.75, 0.5, 0.6, 0.4, 0.46, 0.30] }, duration: 1.4, ease: "none" }, I + 0.5);
+  tl.to("#det", { scale: 1.035, duration: 1.2, ease: "power1.inOut" }, I + 0.75);
+  // EXIT: the stamp shears apart
+  BANDS.forEach((sel, i) => {
+    tl.to(sel, { x: -SHEAR[i] * 1.5, opacity: 0, duration: 0.16, ease: "power2.in" }, ${(heroOut - 0.18).toFixed(3)} + i * 0.01);
+  });
+  tl.to(["#barT","#barB","#tickL","#tickR","#tagwrap","#heat"], { opacity: 0, duration: 0.13 }, ${(heroOut - 0.18).toFixed(3)});
+  tl.set("#det", { display: "none" }, ${(heroOut + 0.02).toFixed(3)});`;
+  return { css, html, js };
+}
+
+function setpieceDecode() {
+  const h = dna.hero,
+    p = h.params,
+    I = heroIn;
+  const lockStagger = p.lockStagger || 0.045;
+  const E = theme.hero.exitAt ?? Math.min(heroOut, I + 1.75);
+  const broom = Math.min(HG.x, W - HG.x) - HG.halfW; // room for brackets
+  const useBrackets = !!p.brackets && broom > 22;
+  const boff = Math.max(14, Math.min(40, Math.floor(broom - 8)));
+  const css = `
+  #dimP { position:absolute; inset:0; opacity:0; background:#021018; }
+  #blk { position:absolute; left:${HG.x}px; top:${HG.y}px; transform:translate(-50%,-50%); opacity:0; }
+  #word { display:flex; align-items:flex-start; justify-content:center;
+          font-family:'${dna.fonts.hero}', sans-serif; font-weight:800; font-size:${HG.fontPx}px;
+          line-height:${HG.fontPx}px; color:#eafaff;
+          text-shadow: 0 0 14px ${dna.palette.accent}8c, 0 3px 16px rgba(0,0,0,0.6); }
+  .reel { display:block; height:${HG.fontPx}px; width:0.82em; overflow:hidden; text-align:center; }
+  .reel.sp { width:0.38em; }
+  .col { display:block; } .col span { display:block; height:${HG.fontPx}px; }
+  .br { position:absolute; width:26px; height:26px; opacity:0; }
+  .br.tl { left:-${boff}px; top:-30px; border-left:3px solid ${dna.palette.accent}; border-top:3px solid ${dna.palette.accent}; }
+  .br.tr { right:-${boff}px; top:-30px; border-right:3px solid ${dna.palette.accent}; border-top:3px solid ${dna.palette.accent}; }
+  .br.bl { left:-${boff}px; bottom:-34px; border-left:3px solid ${dna.palette.accent}; border-bottom:3px solid ${dna.palette.accent}; }
+  .br.brr{ right:-${boff}px; bottom:-34px; border-right:3px solid ${dna.palette.accent}; border-bottom:3px solid ${dna.palette.accent}; }`;
+  const html = `      <div id="dimP"></div>
+      <div id="blk">
+        <div id="word"></div>
+        ${useBrackets ? `<div class="br tl"></div><div class="br tr"></div><div class="br bl"></div><div class="br brr"></div>` : ""}
+      </div>`;
+  const js = `
+  // ---- setpiece: DECODE (glyph reels lock left→right, CRT-off exit) ----
+  const I = ${I.toFixed(3)}, TEXT = ${J(heroText)}, GLYPHS = ${J(p.glyphs)};
+  const drnd = mulberry32(${p.seed || 99});
+  tl.fromTo("#dimP", { opacity: 0 }, { opacity: ${dna.plate.dim}, duration: 0.3, ease: "power2.in" }, I - 0.25);
+  tl.to("#dimP", { opacity: 0, duration: 0.4, ease: "power1.in" }, ${(E + 0.05).toFixed(3)});
+  const word = document.getElementById("word");
+  const reels = [];
+  for (let i = 0; i < TEXT.length; i++) {
+    const ch = TEXT[i];
+    const reel = document.createElement("span");
+    reel.className = "reel" + (ch === " " ? " sp" : "");
+    const col = document.createElement("span"); col.className = "col";
+    if (ch !== " ") {
+      const n = 5 + Math.floor(drnd() * 4);
+      for (let k = 0; k < n; k++) {
+        const s = document.createElement("span");
+        s.textContent = GLYPHS[Math.floor(drnd() * GLYPHS.length)]; col.appendChild(s);
+      }
+      const fin = document.createElement("span"); fin.textContent = ch; col.appendChild(fin);
+      reel.dataset.steps = n;
+    }
+    reel.appendChild(col); word.appendChild(reel); reels.push({ el: reel, col, ch, i });
+  }
+  tl.set("#blk", { opacity: 1 }, I - 0.02);
+  reels.forEach((r) => {
+    if (r.ch === " ") return;
+    const lock = I + 0.30 + ${lockStagger} * r.i;
+    const steps = parseInt(r.el.dataset.steps, 10);
+    tl.fromTo(r.col, { y: 0 }, { y: -${HG.fontPx} * steps, duration: lock - I, ease: "steps(" + steps + ")" }, I);
+    tl.set(r.el, { color: "#bfe9ff",
+      textShadow: "3px 0 10px ${dna.palette.accent}cc, -3px 0 10px ${dna.palette.magenta}cc" }, I);
+    tl.set(r.el, { textShadow: "-3px 0 10px ${dna.palette.accent}cc, 3px 0 10px ${dna.palette.magenta}cc" }, I + 0.12 + 0.02 * r.i);
+    tl.set(r.el, { color: "#ffffff", textShadow: "0 0 22px rgba(255,255,255,0.95)" }, lock);
+    tl.set(r.el, { color: "#eafaff",
+      textShadow: "0 0 14px ${dna.palette.accent}8c, 0 3px 16px rgba(0,0,0,0.6)" }, lock + 0.083);
+  });
+  const LOCKED = I + 0.30 + ${lockStagger} * (TEXT.length - 1) + 0.083;
+  tl.set("#blk", { scale: 1.04 }, LOCKED - 0.083);
+  tl.to("#blk", { scale: 1, duration: 0.3, ease: "elastic.out(1, 0.4)" }, LOCKED);
+${
+  useBrackets
+    ? `  [".br.tl",".br.tr",".br.bl",".br.brr"].forEach((sel, k) => {
+    tl.fromTo(sel, { opacity: 0, scale: 0.3 }, { opacity: 0.95, scale: 1, duration: 0.22, ease: "expo.out" }, I - 0.12 + k * 0.05);
+  });`
+    : ""
+}
+  // EXIT: CRT power-off
+  tl.to("#blk", { filter: "brightness(2.6)", duration: 0.07, ease: "power2.in" }, ${E.toFixed(3)});
+  tl.to("#blk", { scaleY: 0.012, duration: 0.13, ease: "power4.in" }, ${(E + 0.06).toFixed(3)});
+  tl.set("#blk", { opacity: 0, display: "none" }, ${(E + 0.2).toFixed(3)});`;
+  return { css, html, js };
+}
+
+function setpieceDrawon() {
+  const h = dna.hero,
+    p = h.params,
+    I = heroIn;
+  // generate the stroke path at COMPILE time — any word, zero tuning
+  const fontPath = path.join(SKILL, "assets/strokefonts", dna.fonts.strokeFont);
+  const gen = path.join(SKILL, "scripts/gen-stroke-path.py");
+  const tw = Math.min(p.targetWidth || 640, W - 200);
+  const D = execFileSync(
+    "python3",
+    [gen, fontPath, heroDisplay.toLowerCase(), String(tw), "185", String(Math.round(380 - tw / 2))],
+    { encoding: "utf8" },
+  ).trim();
+  const WIN = p.window || 0.78;
+  const css = `
+  #spill { position:absolute; left:${HG.x}px; top:${HG.y}px; width:820px; height:440px;
+           margin-left:-410px; margin-top:-220px; border-radius:50%; opacity:0;
+           background: radial-gradient(50% 50% at 50% 50%, ${dna.palette.accent}57 0%, ${dna.palette.accent}00 70%); }
+  #sign { position:absolute; left:${HG.x}px; top:${HG.y}px; }
+  #neonsvg { position:absolute; left:0; top:0; margin-left:-380px; margin-top:-150px;
+             transform:rotate(${p.rotate || -3}deg); overflow:visible; }
+  #coreG { filter: drop-shadow(0 0 5px #fff) drop-shadow(0 0 16px ${dna.palette.accent}); }
+  #pen  { filter: drop-shadow(0 0 8px #fff) drop-shadow(0 0 22px ${dna.palette.accent}); }`;
+  const html = `      <div id="spill"></div>
+      <div id="sign">
+        <svg id="neonsvg" width="760" height="300" viewBox="0 0 760 300">
+          <defs><filter id="haloblur" x="-60%" y="-60%" width="220%" height="220%">
+            <feGaussianBlur stdDeviation="10"/></filter></defs>
+          <path id="tubeP" fill="none" stroke="rgba(255,235,245,0.16)" stroke-width="${p.tubeWidth + 1}"
+                stroke-linecap="round" stroke-linejoin="round" opacity="0"/>
+          <g id="haloG" filter="url(#haloblur)" opacity="0.9"></g>
+          <g id="coreG"></g>
+          <circle id="pen" r="6" fill="#fff" opacity="0"/>
+        </svg>
+      </div>`;
+  const js = `
+  // ---- setpiece: DRAWON (single-line font, SEQUENTIAL stroke reveal) ----
+  // SVG dash restarts per subpath → one <path> per pen stroke, revealed in
+  // writing order at constant pen speed; nib rides each stroke, hops at lifts.
+  const I = ${I.toFixed(3)}, WIN = ${WIN}, DRAWN = I + WIN, ENDT = ${heroOut.toFixed(3)};
+  const D = ${J(D)};
+  document.getElementById("tubeP").setAttribute("d", D);
+  const subs = D.split(/(?=M )/).map(s => s.trim()).filter(Boolean);
+  const SVGNS = "http://www.w3.org/2000/svg";
+  function mk(parent, d, stroke, w) {
+    const el = document.createElementNS(SVGNS, "path");
+    el.setAttribute("d", d); el.setAttribute("fill", "none");
+    el.setAttribute("stroke", stroke); el.setAttribute("stroke-width", w);
+    el.setAttribute("stroke-linecap", "round"); el.setAttribute("stroke-linejoin", "round");
+    el.setAttribute("opacity", "0");  // hidden until its turn (kills round-cap dot)
+    document.getElementById(parent).appendChild(el);
+    return el;
+  }
+  const strokes = subs.map((d) => ({ halo: mk("haloG", d, ${J(dna.palette.accent)}, ${p.haloWidth}),
+                                     core: mk("coreG", d, "#fff", ${p.tubeWidth}) }));
+  let total = 0;
+  strokes.forEach((s) => { s.len = s.core.getTotalLength(); total += s.len; });
+  tl.fromTo("#tubeP", { opacity: 0 }, { opacity: 1, duration: 0.35 }, I - 0.6);
+  tl.fromTo("#spill", { opacity: 0 }, { opacity: ${p.spill || 0.38}, duration: WIN + 0.2, ease: "power1.in" }, I);
+  const pen = document.getElementById("pen");
+  let t = I;
+  strokes.forEach((s) => {
+    const d = WIN * s.len / total;
+    gsap.set([s.core, s.halo], { strokeDasharray: s.len, strokeDashoffset: s.len });
+    tl.set([s.core, s.halo], { opacity: 1 }, t);
+    tl.fromTo([s.core, s.halo], { strokeDashoffset: s.len }, { strokeDashoffset: 0, duration: d, ease: "none" }, t);
+    const n = Math.max(4, Math.round(s.len / 14)), xs = [], ys = [];
+    for (let k = 0; k <= n; k++) {
+      const pt = s.core.getPointAtLength(s.len * k / n); xs.push(pt.x); ys.push(pt.y);
+    }
+    tl.set(pen, { x: xs[0], y: ys[0] }, t);
+    tl.to(pen, { keyframes: { x: xs, y: ys }, duration: d, ease: "none" }, t);
+    t += d;
+  });
+  gsap.set(pen, { attr: { cx: 0, cy: 0 } });
+  tl.set(pen, { opacity: 1 }, I - 0.01);
+  tl.to(pen, { scale: 2.2, opacity: 0, duration: 0.12, ease: "power2.in", transformOrigin: "50% 50%" }, DRAWN);
+${
+  p.hum
+    ? `  const humStart = DRAWN + 0.08, humDur = Math.max(0.2, ENDT - humStart);
+  const NN = Math.max(6, Math.round(humDur / (2 * F)));
+  const humVals = [];
+  for (let k = 0; k <= NN; k++) {
+    const tt = k / NN * humDur;
+    humVals.push(0.78 + 0.06 * Math.sin(2 * Math.PI * 9 * tt) + 0.05 * Math.sin(2 * Math.PI * 13 * tt + 1.1));
+  }
+  tl.to("#haloG", { keyframes: { opacity: humVals }, duration: humDur, ease: "none" }, humStart);
+  tl.set("#coreG", { opacity: 0.45 }, ENDT + (${p.buzzDipAt || -0.18}));
+  tl.set("#coreG", { opacity: 1 }, ENDT + (${p.buzzDipAt || -0.18}) + F);`
+    : ""
+}`;
+  return { css, html, js };
+}
+
+/* =====================================================================
+ * FRONT FX (fg layer additions) — flash / rings / sparks / scanband
+ * ===================================================================== */
+function frontFx() {
+  const fx = dna.fx || {};
+  let css = "",
+    html = "",
+    js = "";
+  const I = heroIn;
+  if (fx.flash) {
+    css += `
+  #fxflash { position:absolute; inset:0; opacity:0;
+           background: radial-gradient(95% 80% at 50% 37%, rgba(255,250,240,0.95) 0%, rgba(255,235,210,0.7) 38%, rgba(120,90,60,0) 100%); }`;
+    html += `      <div id="fxflash"></div>\n`;
+    js += `
+  tl.set("#fxflash", { opacity: ${fx.flash} }, ${(I + 0.045).toFixed(3)});
+  tl.to("#fxflash", { opacity: 0, duration: 0.17, ease: "expo.out" }, ${(I + 0.085).toFixed(3)});`;
+  }
+  if (fx.rings) {
+    css += `
+  .fxring { position:absolute; left:${HG.x}px; top:${HG.y}px; width:90px; height:32px;
+          margin-left:-45px; margin-top:-16px; border-radius:50%; opacity:0; }
+  #fxr1 { border:4px solid rgba(255,228,196,0.95); filter:blur(1.5px); }
+  #fxr2 { border:3px solid rgba(255,150,70,0.8); filter:blur(3px); }`;
+    html += `      <div class="fxring" id="fxr1"></div>\n      <div class="fxring" id="fxr2"></div>\n`;
+    js += `
+  tl.set("#fxr1", { opacity: 1, scale: 1 }, ${(I + 0.05).toFixed(3)});
+  tl.to("#fxr1", { scale: 16, opacity: 0, duration: 0.58, ease: "expo.out" }, ${(I + 0.05).toFixed(3)});
+  tl.to("#fxr1", { filter: "blur(7px)", duration: 0.58, ease: "power1.in" }, ${(I + 0.05).toFixed(3)});
+  tl.set("#fxr2", { opacity: 0.55, scale: 1 }, ${(I + 0.13).toFixed(3)});
+  tl.to("#fxr2", { scale: 11, opacity: 0, duration: 0.72, ease: "expo.out" }, ${(I + 0.13).toFixed(3)});`;
+  }
+  if (fx.sparks) {
+    css += `
+  .fxspark { position:absolute; left:${HG.x}px; top:${HG.y}px; border-radius:2px;
+           background:#ffd9a8; opacity:0; }
+  .fxember { position:absolute; border-radius:50%; background:#ff9544; filter:blur(1px); opacity:0; }`;
+    js += `
+  { const frnd = mulberry32(${fx.seed || 7});
+    const stg = document.getElementById("stage");
+    for (let i = 0; i < ${fx.sparks}; i++) {
+      const el = document.createElement("div"); el.className = "fxspark"; stg.appendChild(el);
+      const ang = frnd() * Math.PI * 2, dist = 130 + frnd() * 330;
+      const dx = Math.cos(ang) * dist, dy = Math.sin(ang) * dist * 0.55;
+      const grav = 40 + frnd() * 90, s = 3 + Math.round(frnd() * 5), d = 0.6 + frnd() * 0.45;
+      gsap.set(el, { width: s, height: s, x: 0, y: 0 });
+      tl.set(el, { opacity: 1 }, ${(I + 0.05).toFixed(3)});
+      tl.to(el, { keyframes: { x: [0, dx*0.55, dx*0.85, dx],
+                               y: [0, dy*0.55 + grav*0.15, dy*0.85 + grav*0.55, dy + grav],
+                               opacity: [1, 1, 0.65, 0] }, duration: d, ease: "power2.out" }, ${(I + 0.05).toFixed(3)});
+    }
+    for (let i = 0; i < ${fx.embers || 0}; i++) {
+      const el = document.createElement("div"); el.className = "fxember"; stg.appendChild(el);
+      const s = 3 + Math.round(frnd() * 3);
+      gsap.set(el, { width: s, height: s, left: ${HG.x - 220} + frnd() * 440, top: ${HG.y + 32} + frnd() * 60 });
+      const t0 = ${(I + 0.6).toFixed(3)} + frnd() * 0.9, dr = 1.0 + frnd() * 0.7;
+      const yA = -40 - frnd() * 50, yB = -80 - frnd() * 60;
+      const xA = (frnd() - 0.5) * 30, xB = (frnd() - 0.5) * 50;
+      tl.to(el, { keyframes: { opacity: [0, 0.75, 0.4, 0.8, 0],
+                               y: [0, yA*0.5, yA, (yA+yB)/2, yB],
+                               x: [0, xA*0.5, xA, (xA+xB)/2, xB] }, duration: dr, ease: "power1.out" }, t0);
+    }
+  }`;
+  }
+  if (fx.crowdflash) {
+    // two stadium camera-flash pops: lock start / lock end (flapboard rhythm)
+    const [fa, fb] = fx.crowdflash;
+    const lockEnd = I + ((dna.hero.params || {}).lockWindow || 0.34);
+    css += `
+  #fxcrowd { position:absolute; inset:0; opacity:0;
+            background: radial-gradient(85% 70% at 50% 34%, rgba(255,250,238,0.85) 0%,
+                        rgba(255,238,210,0.45) 45%, rgba(60,50,35,0) 100%); }`;
+    html += `      <div id="fxcrowd"></div>\n`;
+    js += `
+  tl.set("#fxcrowd", { opacity: ${fa} }, ${I.toFixed(3)});
+  tl.to("#fxcrowd", { opacity: 0, duration: 0.10, ease: "expo.out" }, ${(I + 0.042).toFixed(3)});
+  tl.set("#fxcrowd", { opacity: ${fb} }, ${lockEnd.toFixed(3)});
+  tl.to("#fxcrowd", { opacity: 0, duration: 0.12, ease: "expo.out" }, ${(lockEnd + 0.042).toFixed(3)});`;
+  }
+  if (fx.paflash) {
+    // PA-system flash over the board glow at apex contact (ledwipe completes)
+    const C2 = I + ((dna.hero.params || {}).wipeDur || 0.3);
+    const pw = (HG.panelW || 900) - 180,
+      ph = Math.round((HG.panelH || 232) * 1.9);
+    css += `
+  #fxpa { position:absolute; left:${Math.round(HG.x - pw / 2)}px; top:${Math.round(HG.y - ph / 2)}px;
+          width:${pw}px; height:${ph}px; opacity:0;
+          background: radial-gradient(closest-side, rgba(255,200,100,0.55), ${dna.palette.accent}00 70%); }`;
+    html += `      <div id="fxpa"></div>\n`;
+    js += `
+  tl.set("#fxpa", { opacity: ${fx.paflash} }, ${C2.toFixed(3)});
+  tl.to("#fxpa", { opacity: 0, duration: 0.22, ease: "expo.out" }, ${(C2 + 0.042).toFixed(3)});`;
+  }
+  if (fx.coinflash) {
+    // 1-frame arcade impact flash at the boss-word strike (the coin blip at
+    // max amplitude) — vertical center rides the hero band
+    const FT = I + ((dna.hero.params || {}).flashDelay ?? 0.14);
+    const cyP = Math.round((HG.y / H) * 100);
+    css += `
+  #fxcoin { position:absolute; inset:0; opacity:0; z-index:16;
+            background: radial-gradient(58% 38% at 50% ${cyP}%, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0) 70%); }`;
+    html += `      <div id="fxcoin"></div>\n`;
+    js += `
+  tl.set("#fxcoin", { opacity: ${fx.coinflash} }, ${FT.toFixed(3)});
+  tl.to("#fxcoin", { opacity: 0, duration: 0.12, ease: "expo.out" }, ${(FT + 0.042).toFixed(3)});`;
+  }
+  if (fx.inkflecks) {
+    // red ink flecks spatter off the rubber-stamp contact (fg layer, ballistic
+    // with gravity) — fires at C = heroIn + params.crush, the punch anchor
+    const C4 = I + ((dna.hero.params || {}).crush ?? 0.074);
+    css += `
+  .fxfleck { position:absolute; left:${HG.x}px; top:${HG.y}px; border-radius:50%;
+           background:${dna.palette.fleck || dna.palette.accent}; opacity:0; }`;
+    js += `
+  { const frnd = mulberry32(${fx.seed || 18});
+    const stg = document.getElementById("stage");
+    for (let i = 0; i < ${fx.inkflecks}; i++) {
+      const el = document.createElement("div"); el.className = "fxfleck"; stg.appendChild(el);
+      const ang = frnd() * Math.PI * 2, dist = 70 + frnd() * 200;
+      const dx = Math.cos(ang) * dist, dy = Math.sin(ang) * dist * 0.6;
+      const grav = 30 + frnd() * 60, sz2 = 2 + Math.round(frnd() * 3), d = 0.32 + frnd() * 0.2;
+      gsap.set(el, { width: sz2, height: sz2, x: 0, y: 0 });
+      tl.set(el, { opacity: 1 }, ${C4.toFixed(3)});
+      tl.to(el, { keyframes: { x: [0, dx * 0.6, dx],
+                               y: [0, dy * 0.6 + grav * 0.2, dy + grav],
+                               opacity: [1, 0.85, 0] },
+                 duration: d, ease: "power2.out" }, ${(C4 + 0.01).toFixed(3)});
+    }
+  }`;
+  }
+  if (fx.laserflash) {
+    // apex contact flash in FRONT of everything (the laser ignite pop, 4
+    // frames) — sized from the hero rect, tinted with the accent
+    const fw = Math.round(2 * (HG.halfW || 330) + 80),
+      fh = Math.round((HG.fontPx || 100) * 4.8);
+    css += `
+  #fxlaser { position:absolute; left:${HG.x - Math.round(fw / 2)}px; top:${HG.y - Math.round(fh / 2)}px;
+           width:${fw}px; height:${fh}px; opacity:0;
+           background: radial-gradient(50% 50% at 50% 50%, rgba(235,255,244,0.9) 0%, ${dna.palette.accent}73 38%, rgba(0,0,0,0) 72%); }`;
+    html += `      <div id="fxlaser"></div>\n`;
+    js += `
+  tl.set("#fxlaser", { opacity: ${fx.laserflash} }, ${(I + 0.03).toFixed(3)});
+  tl.to("#fxlaser",  { opacity: 0, duration: 0.16, ease: "expo.out" }, ${(I + 0.075).toFixed(3)});`;
+  }
+  if (fx.strikeflash) {
+    // full-frame lightning flash in FRONT of everything: leader blink 2 frames
+    // before contact (bright / dim alternation), return stroke at contact + 1f,
+    // expo-out decay — same flicker grammar as the bg bolt
+    css += `
+  #fxstrike { position:absolute; inset:0; opacity:0;
+           background: radial-gradient(80% 65% at 50% 38%, rgba(245,250,255,0.9) 0%, rgba(205,228,252,0.5) 40%, rgba(110,140,180,0) 100%); }`;
+    html += `      <div id="fxstrike"></div>\n`;
+    js += `
+  tl.set("#fxstrike", { opacity: ${(fx.strikeflash * 0.45).toFixed(3)} }, ${(I - 2 * F).toFixed(3)});
+  tl.set("#fxstrike", { opacity: ${(fx.strikeflash * 0.18).toFixed(3)} }, ${(I - F).toFixed(3)});
+  tl.set("#fxstrike", { opacity: ${fx.strikeflash} }, ${(I + 0.02).toFixed(3)});
+  tl.to("#fxstrike",  { opacity: 0, duration: 0.16, ease: "expo.out" }, ${(I + 0.06).toFixed(3)});`;
+  }
+  if (fx.holoflash) {
+    // cyan LOCK flash in front of everything when the projection boots to
+    // full brightness — a radial centered on the hero (frame-fraction anchor)
+    const hxP = ((HG.x / W) * 100).toFixed(1),
+      hyP = ((HG.y / H) * 100).toFixed(1);
+    css += `
+  #fxholo { position:absolute; inset:0; opacity:0;
+           background: radial-gradient(58% 44% at ${hxP}% ${hyP}%, ${dna.palette.accent}8c 0%, rgba(80,160,200,0.18) 45%, rgba(40,80,110,0) 72%); }`;
+    html += `      <div id="fxholo"></div>\n`;
+    js += `
+  tl.set("#fxholo", { opacity: ${fx.holoflash} }, ${(I + 0.075).toFixed(3)});
+  tl.to("#fxholo", { opacity: 0, duration: 0.22, ease: "expo.out" }, ${(I + 0.105).toFixed(3)});`;
+  }
+  if (fx.sporeburst) {
+    // bioluminescent spores burst PAST the bloom at contact (fg, in front of
+    // the subject) — seeded radial puffs from the hero center, slight sink
+    const C6 = I + ((dna.hero.params || {}).crush ?? 0.11);
+    css += `
+  .fxspore { position:absolute; left:${HG.x}px; top:${HG.y}px; border-radius:50%;
+           background:${dna.palette.spore || dna.palette.accent};
+           box-shadow: 0 0 6px 1px ${dna.palette.accent}cc; opacity:0; }`;
+    js += `
+  { const frnd = mulberry32(${fx.seed || 12});
+    const stg = document.getElementById("stage");
+    for (let i = 0; i < ${fx.sporeburst}; i++) {
+      const el = document.createElement("div"); el.className = "fxspore"; stg.appendChild(el);
+      const s = 2 + Math.round(frnd());
+      gsap.set(el, { width: s, height: s });
+      const ang = frnd() * Math.PI * 2, dist = 70 + frnd() * 110;
+      const dx = Math.cos(ang) * dist * 1.25, dy = Math.sin(ang) * dist * 0.7;
+      tl.to(el, { keyframes: { x: [0, dx * 0.6, dx], y: [0, dy * 0.6, dy + 10],
+                               opacity: [0.7, 0.5, 0] },
+                 duration: 0.45 + frnd() * 0.15, ease: "power2.out" }, ${(C6 + 0.01).toFixed(3)} + i * 0.012);
+    }
+  }`;
+  }
+  if (fx.silkmotes) {
+    // gentle aurora light motes drifting up near the ribbon during its hold
+    // (fg layer) — seeded along the ribbon span at the demo's spread fractions
+    // (the gap around 0.4 keeps them off the subject's face)
+    const halfW = HG.halfW || 440;
+    css += `
+  .fxmote { position:absolute; border-radius:50%; opacity:0; filter:blur(1.5px); }`;
+    js += `
+  { const frnd = mulberry32(${fx.seed || 9});
+    const stg9 = document.getElementById("stage");
+    const PALM = [${J(dna.palette.rose)}, ${J(dna.palette.accent)}, ${J(dna.palette.violet)}];
+    const FRX = [-0.88, -0.56, -0.27, 0.05, 0.72, 0.84];
+    for (let i = 0; i < ${fx.silkmotes}; i++) {
+      const m = document.createElement("div"); m.className = "fxmote"; stg9.appendChild(m);
+      const s = 3 + Math.round(frnd() * 3);
+      const c = PALM[i % 3];
+      const mx = ${HG.x} + FRX[i % 6] * ${Math.round(halfW)} + (frnd() - 0.5) * 40;
+      const my = ${HG.y} - 5 + frnd() * 110;
+      gsap.set(m, { width: s, height: s, left: mx, top: my,
+                    background: c, boxShadow: "0 0 6px " + c });
+      const t0 = ${(I + 0.13).toFixed(3)} + i * 0.09 + frnd() * 0.08;
+      tl.fromTo(m, { y: 10 },
+        { keyframes: { opacity: [0, 0.45, 0], y: [10, -16, -44] },
+          duration: 0.75, ease: "sine.out" }, Math.min(t0, ${(DUR - 0.79).toFixed(3)}));
+    }
+  }`;
+  }
+  if (fx.paperscraps) {
+    // torn paper scraps puff PAST the subject at each apex chip contact (fg,
+    // in front) — ballistic steps(4) arcs, one accent scrap per puff
+    // (the papermat landing rhythm); centers baked from the chip geometry
+    const N9 = heroText.length;
+    const pitch9 = HG.pitch || 132,
+      step9 = (dna.hero.params || {}).step ?? 0.09;
+    const y9 = Math.round(HG.y + (HG.tileH || 170) / 2 - 9);
+    const puffs = [];
+    for (let i = 0; i < N9; i++)
+      if (heroText[i] !== " ")
+        puffs.push([
+          Math.round(HG.x + (i - (N9 - 1) / 2) * pitch9),
+          +(I + i * step9).toFixed(3),
+          +((i - (N9 - 1) / 2) * 22).toFixed(1),
+        ]);
+    css += `
+  .fxscrap { position:absolute; opacity:0; border-radius:1px; }`;
+    js += `
+  { const frnd = mulberry32(${fx.seed || 150372});
+    const stg = document.getElementById("stage");
+    const PUFFS = ${J(puffs)};
+    PUFFS.forEach(([px, pc, drift]) => {
+      for (let k = 0; k < ${fx.paperscraps}; k++) {
+        const el = document.createElement("div"); el.className = "fxscrap"; stg.appendChild(el);
+        const s = 7 + Math.round(frnd()*6);
+        el.style.width = s+"px"; el.style.height = Math.max(4, s-3)+"px";
+        el.style.background = (k === 1) ? ${J(dna.palette.accent)} : ${J(dna.palette.chip || "#f6edd8")};
+        el.style.left = (px + (frnd()-0.5)*40)+"px";
+        el.style.top  = (${y9} + (frnd()-0.5)*14)+"px";
+        const dx  = (frnd()-0.5)*180 + drift;
+        const dyU = -(35 + frnd()*55);
+        const dyF = dyU + 80 + frnd()*55;
+        const rot = (frnd()-0.5)*240;
+        tl.set(el, { opacity: 1 }, pc);
+        tl.to(el, { keyframes: { x: [0, dx*0.6, dx], y: [0, dyU, dyF],
+                                 rotation: [0, rot*0.6, rot], opacity: [1, 1, 0] },
+                    duration: 0.42, ease: "steps(4)" }, pc);
+      }
+    });
+  }`;
+  }
+  if (fx.confetti) {
+    // paper confetti flicks up PAST the subject when the apex word pops (fg,
+    // in front) — seeded ballistic arcs with card tumble; launch line baked
+    // from the centerfold hinge (90% of the burst box, where the paper folds)
+    const u0 = (HG.burstR || 220) / 220;
+    const boxH0 = HG.boxH || 560;
+    const hingeY = Math.round(HG.y + 24 * u0 - boxH0 / 2 + 0.9 * boxH0);
+    const CC = dna.palette.conf || [
+      dna.palette.cream || "#f6ecd4",
+      dna.palette.accent,
+      dna.palette.body,
+    ];
+    css += `
+  .fxconf { position:absolute; opacity:0; border-radius:1px; }`;
+    js += `
+  { const frnd = mulberry32(${fx.seed || 360372});
+    const stg = document.getElementById("stage");
+    const CCOL = ${J(CC)};
+    for (let i = 0; i < ${fx.confetti}; i++) {
+      const el = document.createElement("div"); el.className = "fxconf";
+      el.style.background = CCOL[i % CCOL.length]; stg.appendChild(el);
+      gsap.set(el, { width: 5 + Math.round(frnd() * 5), height: 4 + Math.round(frnd() * 4),
+                     left: ${HG.x - 30} + frnd() * 70, top: ${hingeY - 2} + frnd() * 16 });
+      const dx = (frnd() - 0.5) * 320, up = -90 - frnd() * 140, grav = 150 + frnd() * 120;
+      const rot = (frnd() - 0.5) * 520, d = 0.55 + frnd() * 0.3, t0 = ${(I + 0.128).toFixed(3)} + frnd() * 0.08;
+      tl.set(el, { opacity: 1 }, t0);
+      tl.to(el, { keyframes: { x: [0, dx * 0.5, dx * 0.85, dx],
+                               y: [0, up, up * 0.55 + grav * 0.35, up * 0.1 + grav],
+                               rotation: [0, rot * 0.4, rot * 0.75, rot],
+                               opacity: [1, 1, 0.8, 0] },
+                  duration: d, ease: "power1.out" }, t0);
+    }
+  }`;
+  }
+  if (fx.chalkclap) {
+    // hand-slap dust CLAP in FRONT of the subject the instant the chalk word
+    // completes (the bg board shakes the same frame) — seeded radial specks +
+    // a soft blurred puff, centered on the pen's final contact point (baked
+    // by setpieceChalkwrite into HG.clapX/Y/T)
+    const cx9 = Math.round(HG.clapX ?? HG.x + (HG.halfW || 80)),
+      cy9 = Math.round(HG.clapY ?? HG.y),
+      ct9 = +(HG.clapT ?? I + 0.5).toFixed(3);
+    const DUST9 = dna.palette.dust || "#f7f5ea";
+    css += `
+  #fxclap { position:absolute; left:${cx9}px; top:${cy9}px; width:0; height:0; }
+  #fxclap .cd { position:absolute; left:0; top:0; border-radius:50%; background:${DUST9}; opacity:0; }
+  #fxpuff { position:absolute; left:-48px; top:-48px; width:96px; height:96px; border-radius:50%; opacity:0;
+            background: radial-gradient(50% 50% at 50% 50%, ${DUST9}80 0%, ${DUST9}00 70%);
+            filter: blur(4px); }`;
+    html += `      <div id="fxclap"><div id="fxpuff"></div></div>\n`;
+    js += `
+  { const frnd = mulberry32(${fx.seed || 13});
+    const clap = document.getElementById("fxclap");
+    for (let i = 0; i < ${fx.chalkclap}; i++) {
+      const s = document.createElement("div"); s.className = "cd";
+      const sz = 2.5 + frnd() * 3.2;
+      s.style.width = sz + "px"; s.style.height = sz + "px";
+      s.style.marginLeft = (-sz / 2) + "px"; s.style.marginTop = (-sz / 2) + "px";
+      clap.appendChild(s);
+      const a = (i / ${fx.chalkclap}) * 6.2832 + (frnd() - 0.5) * 0.5;
+      const dist = 42 + frnd() * 55;
+      tl.set(s, { opacity: 1 }, ${ct9});
+      tl.to(s, { x: Math.cos(a) * dist, y: Math.sin(a) * dist * 0.8 + 26,
+                 duration: 0.5 + frnd() * 0.15, ease: "power2.out" }, ${ct9});
+      tl.to(s, { opacity: 0, duration: 0.4, ease: "power1.in" }, ${(ct9 + 0.1).toFixed(3)});
+    }
+    tl.fromTo("#fxpuff", { opacity: 0.55, scale: 0.35 },
+              { opacity: 0, scale: 1.8, duration: 0.5, ease: "power2.out" }, ${ct9});
+  }`;
+  }
+  if (fx.paintsplat) {
+    // paint SPLAT in FRONT of the subject the instant the spray tag completes
+    // — a hot magenta ring + a soft paint-color ring + seeded droplets with
+    // gravity, centered on the pen-finish point (baked by setpieceSpraytag
+    // into HG.splatX/Y/T)
+    const sx = Math.max(60, Math.min(W - 60, Math.round(HG.splatX ?? HG.x + (HG.halfW || 80))));
+    const sy = Math.round(HG.splatY ?? HG.y);
+    const st9 = +Math.min(HG.splatT ?? I + 0.5, DUR - 0.5).toFixed(3);
+    const HOT9 = dna.palette.em2 || dna.palette.hot || "#ff2e88";
+    const PAINT9 = dna.palette.accent || "#ffd23f";
+    css += `
+  .fxsplat { position:absolute; left:${sx}px; top:${sy}px; border-radius:50%; opacity:0; }
+  #fxsp1 { width:40px; height:30px; border:5px solid ${HOT9}; margin-left:-20px; margin-top:-15px; }
+  #fxsp2 { width:26px; height:20px; border:4px solid ${PAINT9}; margin-left:-13px; margin-top:-10px;
+           filter: blur(1.5px); }
+  .fxsdrop { position:absolute; left:${sx}px; top:${sy}px; background:${HOT9};
+             border-radius:50%; opacity:0; }`;
+    html += `      <div class="fxsplat" id="fxsp1"></div>\n      <div class="fxsplat" id="fxsp2"></div>\n`;
+    js += `
+  tl.set("#fxsp1", { opacity: 1, scale: 0.3 }, ${st9});
+  tl.to("#fxsp1", { scale: 4.6, opacity: 0, duration: 0.42, ease: "expo.out" }, ${st9});
+  tl.to("#fxsp1", { filter: "blur(4px)", duration: 0.42, ease: "power1.in" }, ${st9});
+  tl.set("#fxsp2", { opacity: 0.8, scale: 0.4 }, ${(st9 + 0.04).toFixed(3)});
+  tl.to("#fxsp2", { scale: 3.4, opacity: 0, duration: 0.5, ease: "expo.out" }, ${(st9 + 0.04).toFixed(3)});
+  { const frnd = mulberry32(${fx.seed || 20260611});
+    const stg = document.getElementById("stage");
+    for (let i = 0; i < ${fx.paintsplat}; i++) {
+      const el = document.createElement("div");
+      el.className = "fxsdrop"; stg.appendChild(el);
+      const s = 3 + Math.round(frnd() * 4);
+      gsap.set(el, { width: s, height: s });
+      const ang = frnd() * Math.PI * 2, dist = 36 + frnd() * 64; // capped: stays inside the frame edge
+      const dx = Math.cos(ang) * dist, dyv = Math.sin(ang) * dist * 0.7;
+      const grav = 26 + frnd() * 40, d = 0.38 + frnd() * 0.25;
+      tl.set(el, { opacity: 1, x: 0, y: 0 }, ${st9});
+      tl.to(el, { keyframes: { x: [0, dx * 0.6, dx],
+                               y: [0, dyv * 0.6 + grav * 0.2, dyv + grav],
+                               opacity: [1, 0.85, 0] },
+                  duration: d, ease: "power2.out" }, ${st9});
+    }
+  }`;
+  }
+  if (fx.brushflecks) {
+    // ink flecks kicked PAST the subject at the brush's first contact (the
+    // start-splat depth pass) — seeded upward ballistic arcs from the pen-START
+    // point (baked by setpieceBrushwrite into HG.fleckX/Y/T)
+    const bx = Math.max(40, Math.min(W - 40, Math.round(HG.fleckX ?? HG.x - (HG.halfW || 80))));
+    const by = Math.round(HG.fleckY ?? HG.y);
+    const bt = +Math.min(HG.fleckT ?? I + 0.01, DUR - 0.4).toFixed(3);
+    css += `
+  .fxbfleck { position:absolute; left:${bx}px; top:${by}px; border-radius:50%;
+           background:${dna.palette.ink || "#1a130c"}; opacity:0; }`;
+    js += `
+  { const frnd = mulberry32(${fx.seed || 20260611});
+    const stg = document.getElementById("stage");
+    for (let i = 0; i < ${fx.brushflecks}; i++) {
+      const el = document.createElement("div"); el.className = "fxbfleck"; stg.appendChild(el);
+      const s = 3 + Math.round(frnd() * 3);
+      gsap.set(el, { width: s, height: s });
+      const a = -0.4 - frnd() * 2.4, dist = 46 + frnd() * 90;
+      const dx = Math.cos(a) * dist, dyv = Math.sin(a) * dist;
+      tl.set(el, { opacity: 1 }, ${bt});
+      tl.to(el, { keyframes: { x: [0, dx * 0.6, dx], y: [0, dyv * 0.6, dyv + 26],
+                               opacity: [1, 0.85, 0] },
+                  duration: 0.36, ease: "power2.out" }, ${bt});
+    }
+  }`;
+  }
+  if (fx.scanband) {
+    const lockT =
+      heroIn + 0.3 + (dna.hero.params.lockStagger || 0.045) * (heroText.length - 1) + 0.083;
+    css += `
+  #fxband { position:absolute; left:0; top:-80px; width:100%; height:70px; opacity:0;
+          background: linear-gradient(180deg, ${dna.palette.accent}00 0%, ${dna.palette.accent}66 50%, ${dna.palette.accent}00 100%); }
+  #fxlock { position:absolute; inset:0; opacity:0;
+               background: radial-gradient(80% 60% at 52% 35%, ${dna.palette.accent}99 0%, ${dna.palette.accent}00 70%); }`;
+    html += `      <div id="fxband"></div>\n      <div id="fxlock"></div>\n`;
+    js += `
+  tl.set("#fxband", { opacity: 0.5 }, ${(I - 0.05).toFixed(3)});
+  tl.fromTo("#fxband", { y: 0 }, { y: ${H + 160}, duration: 0.5, ease: "power1.in" }, ${(I - 0.05).toFixed(3)});
+  tl.set("#fxband", { opacity: 0 }, ${(I + 0.46).toFixed(3)});
+  tl.set("#fxlock", { opacity: ${fx.lockflash || 0.55} }, ${(lockT - 0.083).toFixed(3)});
+  tl.to("#fxlock", { opacity: 0, duration: 0.2, ease: "expo.out" }, ${lockT.toFixed(3)});`;
+  }
+  return { css, html, js };
+}
+
+/* =====================================================================
+ * ASSEMBLE + POSTFX
+ * ===================================================================== */
+function paradigmLastpage() {
+  // THE LAST PAGE: a blurred "future manuscript" haunts the room all video;
+  // at the apex one rack-focus reveals every faint line was the apex word.
+  const b = dna.body,
+    I = heroIn;
+  const prnd = (() => {
+    let a = b.seed || 4242;
+    return () => {
+      a |= 0;
+      a = (a + 0x6d2b79f5) | 0;
+      let t = Math.imul(a ^ (a >>> 15), 1 | a);
+      t = (t + Math.imul(t ^ (t >>> 7), 61 | t)) ^ t;
+      return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
+    };
+  })();
+  // field instances: seeded positions in the upper room, away from the subject column
+  const subjX = sz && sz.heroAnchor ? (W * sz.heroAnchor.centerXPct) / 100 : W * 0.5;
+  const inst = [];
+  for (let i = 0; i < (b.fieldCount || 9); i++) {
+    let x = 80 + prnd() * (W - 160),
+      y = 60 + prnd() * (H * 0.55);
+    if (Math.abs(x - subjX) < 170)
+      x = x < subjX ? subjX - 180 - prnd() * 120 : subjX + 180 + prnd() * 120;
+    inst.push({
+      x: Math.round(Math.max(70, Math.min(W - 70, x))),
+      y: Math.round(y),
+      px: Math.round(34 + prnd() * 96),
+      rot: +((prnd() - 0.5) * 8).toFixed(1),
+      op: +(0.26 + prnd() * 0.2).toFixed(2),
+    });
+  }
+  const main = inst.reduce((a, c) => (c.px > a.px ? c : a), inst[0]);
+  const lineData = LINES.map((L) => ({
+    id: "m" + L.id,
+    in: +L.in.toFixed(3),
+    out: +L.out.toFixed(3),
+    words: L.words.map((w) => [w.display, +w.start.toFixed(3)]),
+  }));
+  const css = `
+  .fld { position:absolute; white-space:nowrap; font-family:'${dna.fonts.body}', serif;
+         font-weight:600; color:${dna.palette.body}; filter: blur(${b.fieldBlur || 9}px); }
+  .ms  { position:absolute; left:${W / 2}px; top:${H - (b.bottomPx || 96)}px; opacity:0; white-space:nowrap;
+         font-family:'${dna.fonts.body}', serif; font-size:${b.fontPx}px; line-height:1;
+         color:${dna.palette.body}; text-shadow: 0 2px 12px rgba(0,0,0,0.6); }
+  .ms .w { display:inline-block; opacity:0; margin:0 0.14em; overflow:hidden; vertical-align:bottom; white-space:nowrap; }`;
+  const html =
+    inst
+      .map(
+        (f, i) =>
+          `      <div class="fld" id="f${i}" style="left:${f.x}px; top:${f.y}px; font-size:${f.px}px; opacity:${f.op}; transform:translate(-50%,-50%) rotate(${f.rot}deg)">${esc(heroDisplay)}</div>`,
+      )
+      .join("\n") +
+    "\n" +
+    lineData.map((L) => `      <div class="ms" id="${L.id}"></div>`).join("\n");
+  const js = `
+  // ---- THE LAST PAGE ----
+  const I = ${I.toFixed(3)};
+  const MS = ${J(lineData)};
+  MS.forEach((L) => {
+    const line = document.getElementById(L.id);
+    L.words.forEach(([txt]) => { const sp = document.createElement("span"); sp.className = "w"; sp.textContent = txt; line.appendChild(sp); });
+    gsap.set(line, { xPercent: -50, yPercent: -100 });
+    tl.set(line, { opacity: 1 }, L.in);
+    const XO = L.out - ${b.exit === "drop" ? "0.18" : "0.17"};   // exit start (single source)
+    let lastB = -1;                                              // line-y bounce ownership guard
+    L.words.forEach(([txt, st], wi) => {
+      const el = line.children[wi];
+      tl.set(el, { opacity: 1 }, st);
+      tl.fromTo(el, { width: 0 }, { width: "auto", duration: Math.min(0.18, 0.03 * txt.length + 0.04),
+        ease: "steps(" + Math.max(2, txt.length) + ")" }, st);
+    });
+    const xo = L.out - 0.18;
+    tl.to(line, { opacity: 0, duration: 0.16, ease: "power2.in" }, xo);
+    tl.set(line, { display: "none" }, xo + 0.18);
+  });
+  // the field breathes imperceptibly (alive, unreadable)
+  ${inst.map((f, i) => `tl.to("#f${i}", { y: ${prnd() - 0.5 > 0 ? "+" : "-"}${(3 + prnd() * 5).toFixed(1)}, duration: ${(2.4 + prnd() * 2).toFixed(1)}, ease: "sine.inOut" }, 0);`).join("\n  ")}
+  // APEX: rack focus — the future was only ever one sentence
+  tl.to(".fld", { filter: "blur(0px)", duration: 0.38, ease: "power3.inOut" }, I - 0.1);
+  ${inst
+    .map((f, i) =>
+      i === inst.indexOf(main)
+        ? `tl.to("#f${i}", { opacity: 1, scale: 1.22, duration: 0.5, ease: "power2.out" }, I + 0.15);
+  tl.to("#f${i}", { textShadow: "0 0 28px rgba(255,244,220,0.5)", duration: 0.5 }, I + 0.15);`
+        : `tl.to("#f${i}", { opacity: ${(f.op * 0.85).toFixed(2)}, duration: 0.5 }, I + 0.3);`,
+    )
+    .join("\n  ")}
+  // hold revealed ~1.2s, then the future blurs back except the main instance
+  tl.to(".fld", { filter: "blur(${b.fieldBlur || 9}px)", duration: 0.6, ease: "power2.inOut" }, I + 1.5);
+  tl.to("#f${inst.indexOf(main)}", { filter: "blur(0px)", duration: 0.01 }, I + 1.5);
+  ${inst.map((f, i) => (i === inst.indexOf(main) ? "" : `tl.to("#f${i}", { opacity: 0, duration: 0.6 }, I + 1.6);`)).join("\n  ")}
+  tl.to("#f${inst.indexOf(main)}", { opacity: 0, duration: 0.3, ease: "power2.in" }, ${(heroOut - 0.3).toFixed(3)});`;
+  return { css, html, js };
+}
+
+function paradigmFlaprail() {
+  // FLAPRAIL: stadium-departures chyron bar; body words flip in on split-flap
+  // tiles (2 seeded wrong-word flickers then the real word clacks on), exits
+  // flip to blank cascading left→right. Furniture: bar tag + ROW flip counter
+  // (+ optional odometer chip pinned to the first emphasis line).
+  const b = dna.body;
+  const barH = b.barH || 96;
+  const stagger = 0.025,
+    exDu = 0.075;
+  const lineData = LINES.map((L) => ({
+    id: "fl" + L.id,
+    in: +L.in.toFixed(3),
+    out: +L.out.toFixed(3),
+    words: L.words.map((w) => [w.display.toUpperCase(), +w.start.toFixed(3), w.minor ? 1 : 0]),
+  }));
+  const chy = b.chyron || {};
+  const ctrVals = lineData.map((_, i) => String(i + 1).padStart(2, "0"));
+  // odometer chip docks above the bar while the FIRST emphasis line reads
+  const chipL = b.chip ? LINES.find((L) => L.words.some((w) => w.minor)) : null;
+  const chipParts = chipL ? String(b.chip.value).split(".") : [];
+  const css = `
+  #flwrap { position:absolute; inset:0; }
+  #flbar { position:absolute; left:0; right:0; top:${H - barH}px; height:${barH}px;
+           background: linear-gradient(180deg, rgba(26,29,35,0.93) 0%, rgba(15,17,21,0.96) 100%);
+           border-top:3px solid ${dna.palette.accent};
+           box-shadow: 0 -6px 26px rgba(0,0,0,0.45), inset 0 1px 0 ${dna.palette.accent}40; }
+  #fltag { position:absolute; left:30px; top:30px; font-family:'${dna.fonts.tag}', sans-serif;
+           font-weight:600; font-size:25px; letter-spacing:4px; color:${dna.palette.accent}; opacity:0.92; }
+  #flctr { position:absolute; right:30px; top:22px; white-space:nowrap; }
+  #flctr .clab { font-family:'${dna.fonts.tag}', sans-serif; font-weight:600; font-size:22px;
+                 letter-spacing:3px; color:#8A8F98; vertical-align:18px; margin-right:8px; }
+  #ctrbox { display:inline-block; width:54px; height:46px; perspective:260px; vertical-align:top; }
+  #ctrflap { position:relative; display:block; width:100%; height:100%; transform-origin:50% 0%;
+             backface-visibility:hidden; border-radius:3px;
+             background: linear-gradient(180deg,#2E333B 0%,#262B32 48%,#1B1F25 52%,#242930 100%);
+             box-shadow: inset 0 0 0 1px rgba(0,0,0,0.6), 0 2px 5px rgba(0,0,0,0.5); }
+  #ctrflap .nv { position:absolute; inset:0; display:none; text-align:center;
+                 font-family:'${dna.fonts.tag}', sans-serif; font-weight:600; font-size:36px;
+                 line-height:50px; color:${dna.palette.accent}; }
+  .flline { position:absolute; left:${W / 2}px; top:${H - Math.round(barH / 2) - 1}px; white-space:nowrap; }
+  .ftile { display:inline-block; perspective:240px; opacity:0; margin-right:8px; vertical-align:middle; }
+  .fflap { position:relative; display:inline-block; transform-origin:50% 0%; backface-visibility:hidden;
+           font-family:'${dna.fonts.body}', sans-serif; font-weight:600; font-size:${b.fontPx}px; line-height:1;
+           letter-spacing:${b.letterSpacing || "1px"}; color:${dna.palette.body}; padding:8px 13px 4px; border-radius:4px;
+           background: linear-gradient(180deg,#31363F 0%,#272C33 47%,#1C2026 53%,#262B32 100%);
+           box-shadow: inset 0 0 0 1px rgba(0,0,0,0.55), 0 3px 8px rgba(0,0,0,0.5),
+                       inset 0 1px 0 rgba(255,255,255,0.07);
+           text-shadow: 0 2px 4px rgba(0,0,0,0.45); }
+  .ftile.em .fflap { box-shadow: inset 0 0 0 1px rgba(0,0,0,0.55), inset 0 -3px 0 ${dna.palette.accent},
+                     0 3px 8px rgba(0,0,0,0.5); }
+  .fflap .rl { visibility:hidden; }
+  .fflap .wv { position:absolute; left:0; right:0; top:8px; text-align:center; display:none;
+               color:${dna.palette.grey || "#B9BEC7"}; }
+${
+  chipL
+    ? `  #flchip { position:absolute; left:${b.chip.x}px; top:${b.chip.y}px; perspective:300px; opacity:0; }
+  #chipflap { display:block; transform-origin:50% 0%; backface-visibility:hidden; white-space:nowrap;
+              background: linear-gradient(180deg,#2B3038 0%,#22262D 50%,#1A1E24 100%);
+              border-radius:4px; border:1px solid rgba(0,0,0,0.6); padding:5px 12px 3px;
+              box-shadow: inset 0 0 0 1px ${dna.palette.accent}59, 0 3px 10px rgba(0,0,0,0.5); }
+  #chipflap .clab { font-family:'${dna.fonts.tag}', sans-serif; font-weight:600; font-size:24px;
+                    letter-spacing:2px; color:${dna.palette.accent}; margin-right:8px; vertical-align:4px; }
+  .dcol { display:inline-block; height:36px; overflow:hidden; vertical-align:top; }
+  .dcol span { display:block; height:36px; line-height:38px; font-family:'${dna.fonts.tag}', sans-serif;
+               font-weight:600; font-size:34px; color:${dna.palette.body}; text-align:center; }
+  .cfix { display:inline-block; height:36px; line-height:38px; font-family:'${dna.fonts.tag}', sans-serif;
+          font-weight:600; font-size:34px; color:${dna.palette.body}; vertical-align:top; }
+  #cunit { font-size:22px; color:#8A8F98; margin-left:3px; }
+  #bdot { display:inline-block; width:9px; height:9px; border-radius:50%;
+          background:${dna.palette.accent}; margin-left:9px; vertical-align:14px; opacity:0.15;
+          box-shadow: 0 0 7px ${dna.palette.accent}cc; }`
+    : ""
+}`;
+  const html = `      <div id="flwrap">
+        <div id="flbar">
+          <div id="fltag">${esc(chy.tag || "DEPARTURES")}</div>
+          <div id="flctr"><span class="clab">${esc(chy.counter || "ROW")}</span><span id="ctrbox"><span id="ctrflap">${ctrVals
+            .map((v, i) => `<span class="nv" id="n${i}">${v}</span>`)
+            .join("")}</span></span></div>
+        </div>
+${lineData.map((L) => `        <div class="flline" id="${L.id}"></div>`).join("\n")}
+${
+  chipL
+    ? `        <div id="flchip"><div id="chipflap"><span class="clab">${esc(b.chip.label)}</span>${chipParts
+        .map((_, i) => `<span class="dcol" id="dc${i}"></span>`)
+        .join(
+          `<span class="cfix">.</span>`,
+        )}<span class="cfix" id="cunit">${esc(b.chip.unit || "")}</span><span id="bdot"></span></div></div>`
+    : ""
+}
+      </div>`;
+  const js = `
+  // ---- body paradigm: FLAPRAIL (split-flap word tiles on a chyron bar) ----
+  const HOT = ${J(dna.palette.hot || dna.palette.accent)}, BONE = ${J(dna.palette.body)};
+  const frnd2 = mulberry32(${b.seed || 808});
+  const GLYPHS = ${J(dna.body.glyphs || "ABCDEFGHIKLMNOPRSTUVXYZ0123456789")};
+  function wrongOf(txt) {
+    let s = "";
+    for (const c of txt) s += /[A-Z']/.test(c) ? GLYPHS[Math.floor(frnd2() * GLYPHS.length)] : c;
+    return s;
+  }
+  // chyron bar rides up; nothing visible at t=0
+  tl.fromTo("#flbar", { y: ${barH + 14} }, { y: 0, duration: 0.20, ease: "power3.out" }, 0.0);
+  tl.set("#n0", { display: "block" }, 0.18);
+  const FRAIL = ${J(lineData)};
+  FRAIL.forEach((L, li) => {
+    const line = document.getElementById(L.id);
+    const tiles = [];
+    L.words.forEach(([txt, , em]) => {
+      const tile = document.createElement("span"); tile.className = "ftile" + (em ? " em" : "");
+      const flap = document.createElement("span"); flap.className = "fflap";
+      const rl = document.createElement("span"); rl.className = "rl"; rl.textContent = txt;
+      const w1 = document.createElement("span"); w1.className = "wv"; w1.textContent = wrongOf(txt);
+      const w2 = document.createElement("span"); w2.className = "wv"; w2.textContent = wrongOf(txt);
+      flap.appendChild(rl); flap.appendChild(w1); flap.appendChild(w2);
+      tile.appendChild(flap); line.appendChild(tile);
+      tiles.push({ tile, flap, rl, w1, w2 });
+    });
+    gsap.set(line, { xPercent: -50, yPercent: -50 });
+    L.words.forEach(([txt, st, em], wi) => {
+      const { tile, flap, rl, w1, w2 } = tiles[wi];
+      // flick 1 (wrong), flick 2 (wrong), flick 3 (real) — the flap motif
+      tl.set(tile, { opacity: 1 }, st);
+      tl.set(w1, { display: "block" }, st);
+      tl.fromTo(flap, { rotationX: -88 }, { rotationX: 0, duration: 0.05, ease: "power1.in" }, st);
+      tl.set(w1, { display: "none" }, st + 0.055);
+      tl.set(w2, { display: "block" }, st + 0.055);
+      tl.set(flap, { rotationX: -88 }, st + 0.055);
+      tl.to(flap, { rotationX: 0, duration: 0.05, ease: "power1.in" }, st + 0.06);
+      tl.set(w2, { display: "none" }, st + 0.115);
+      tl.set(rl, { visibility: "visible" }, st + 0.115);
+      tl.set(flap, { rotationX: -88, color: HOT }, st + 0.115);
+      tl.to(flap, { rotationX: 0, duration: 0.065, ease: "power2.in" }, st + 0.12);
+      // contact squash → elastic settle, paint cools (amber stays on emphasized tiles)
+      tl.set(tile, { scaleX: 1.05, scaleY: 0.92 }, st + 0.185);
+      tl.to(tile, { scaleX: 1, scaleY: 1, duration: 0.28, ease: "elastic.out(1, 0.4)" }, st + 0.21);
+      tl.to(flap, { color: em ? HOT : BONE, duration: 0.35, ease: "power1.in" }, st + 0.25);
+    });
+    // hold life: low breathe on the line
+    const lastIn = L.words[L.words.length - 1][1] + 0.4;
+    const span = (L.words.length - 1) * ${stagger} + ${exDu} + 0.02;
+    const XO = L.out - span;
+    if (XO - lastIn > 0.3)
+      tl.to(line, { scale: 1.014, duration: XO - lastIn, ease: "sine.inOut" }, lastIn);
+    // exit: flip to blank, cascading left→right (completes before the next line)
+    L.words.forEach((w, wi) => {
+      const t = XO + wi * ${stagger};
+      tl.to(tiles[wi].flap, { rotationX: 90, duration: ${exDu}, ease: "power2.in" }, t);
+      tl.set(tiles[wi].tile, { opacity: 0 }, t + ${exDu});
+    });
+    tl.set(line, { display: "none" }, L.out);
+  });
+  // row counter flips at each line change
+  FRAIL.slice(1).forEach((L, k) => {
+    const t = L.words[0][1];
+    tl.set("#n" + k, { display: "none" }, t);
+    tl.set("#n" + (k + 1), { display: "block" }, t);
+    // immediateRender:false — the flap is visible from t=0; the from-state must
+    // not leak into the opening hold (paused timeline + seek renders it)
+    tl.fromTo("#ctrflap", { rotationX: -80 }, { rotationX: 0, duration: 0.07, ease: "power2.in", immediateRender: false }, t);
+    tl.set("#ctrflap", { scaleY: 0.92 }, t + 0.07);
+    tl.to("#ctrflap", { scaleY: 1, duration: 0.18, ease: "elastic.out(1, 0.45)" }, t + 0.09);
+  });
+${
+  chipL
+    ? `  // odometer chip (emphasis furniture): clacks on beside the emphasis line,
+  // digits roll on true reels, status dot blinks through the hold (dead-air life)
+  const CIN = ${(chipL.words[chipL.words.length - 1].start + 0.06).toFixed(3)};
+  const COUT = ${(+chipL.out).toFixed(3)};
+  ${J(chipParts)}.forEach((fin, ci) => {
+    const col = document.getElementById("dc" + ci);
+    const stack = document.createElement("div");
+    const steps = 4 + ci;
+    for (let k = 0; k < steps; k++) { const s = document.createElement("span");
+      s.textContent = Math.floor(frnd2() * 10); stack.appendChild(s); }
+    const f = document.createElement("span"); f.textContent = fin; stack.appendChild(f);
+    col.appendChild(stack);
+    tl.fromTo(stack, { y: 0 }, { y: -36 * steps, duration: 0.42 + ci * 0.13,
+              ease: "steps(" + steps + ")" }, CIN + 0.08 + ci * 0.04);
+  });
+  tl.set("#flchip", { opacity: 1 }, CIN);
+  tl.fromTo("#chipflap", { rotationX: -85 }, { rotationX: 0, duration: 0.09, ease: "power2.in" }, CIN);
+  tl.set("#chipflap", { scaleX: 1.04, scaleY: 0.93 }, CIN + 0.09);
+  tl.to("#chipflap", { scaleX: 1, scaleY: 1, duration: 0.24, ease: "elastic.out(1, 0.42)" }, CIN + 0.11);
+  tl.set(".dcol span", { color: HOT }, CIN + 0.67);
+  tl.to(".dcol span", { color: BONE, duration: 0.4 }, CIN + 0.87);
+  for (let k = 0; k < 4; k++) {
+    const t = CIN + 0.64 + k * 0.22;
+    if (t + 0.11 < COUT - 0.05) { tl.set("#bdot", { opacity: 1 }, t); tl.set("#bdot", { opacity: 0.15 }, t + 0.11); }
+  }
+  tl.to("#chipflap", { rotationX: 88, duration: 0.09, ease: "power2.in" }, COUT);
+  tl.set("#flchip", { display: "none" }, COUT + 0.10);`
+    : ""
+}
+${
+  b.yield
+    ? `  // rail yields while the apex board locks
+  tl.to("#flwrap", { opacity: ${b.yield.dim}, duration: 0.18, ease: "power1.in" }, ${(heroIn - (b.yield.pre || 0.07)).toFixed(3)});
+  tl.to("#flwrap", { opacity: 1, duration: 0.22, ease: "power1.out" }, ${(heroIn + (b.yield.post || 0.47)).toFixed(3)});`
+    : ""
+}`;
+  return { css, html, js };
+}
+
+function paradigmLedboard() {
+  // LEDBOARD: docked transit departure-strip; body lines arrive by vertical
+  // SCROLL-SNAP paging (steps(6)) inside the board window; each word lights via
+  // a small L→R LED column wipe (low-amplitude apex motif) + 1-frame arrival
+  // flicker; emphasis words get the LED-refresh double-blink. Furniture: green
+  // platform tag, ticking clock seconds, status swap gag (⚠ DELAYED → ● ON TIME
+  // shortly after the apex resolves), idle LED shimmer in dead air.
+  const b = dna.body;
+  const bd = b.board || {};
+  const bw = bd.width || 1000,
+    bh = bd.h || 116;
+  const bleft = bd.left ?? Math.round((W - bw) / 2);
+  const btop = H - (bd.bottom ?? 30) - bh;
+  const hdrH = 30,
+    winH = bh - hdrH - 2,
+    lineH = winH - 2;
+  const hd = b.header || {};
+  const A = dna.palette.accent;
+  const GRN = dna.palette.green || "#36e57a";
+  const WRN = dna.palette.warn || "#ff9e3d";
+  const lineData = LINES.map((L) => ({
+    id: "t" + L.id,
+    words: L.words.map((w) => [w.display, +w.start.toFixed(3), w.minor ? 1 : 0]),
+  }));
+  // page-in ~0.2s before the first word lights (the paging IS the anticipation);
+  // each line pages out exactly as the next pages in (snap swap), last one early
+  // enough that the 0.20s page-out completes before the clip ends
+  const pins = LINES.map((L, i) =>
+    i === 0
+      ? Math.max(0.02, +(L.words[0].start - 0.22).toFixed(3))
+      : +(L.words[0].start - 0.22).toFixed(3),
+  );
+  lineData.forEach((L, i) => {
+    L.pin = pins[i];
+    L.pout = i + 1 < pins.length ? pins[i + 1] : +Math.min(LINES[i].out, DUR - 0.22).toFixed(3);
+  });
+  // idle LED shimmer: any dead air ≥1.2s between word lights gets refresh blips
+  const starts = LINES.flatMap((L) => L.words.map((w) => w.start));
+  const shimmers = [];
+  for (let i = 0; i + 1 < starts.length; i++)
+    if (starts[i + 1] - starts[i] > 1.2)
+      for (let t = starts[i] + 0.43; t < starts[i + 1] - 0.55; t += 0.6)
+        shimmers.push(+t.toFixed(3));
+  // status gag: ⚠ DELAYED blinks while we wait, pages to ● ON TIME after the apex
+  const swapT = +Math.min(heroIn + 0.69, DUR - 1.2).toFixed(3);
+  const statBlinks = [swapT - 2.55, swapT - 1.75, swapT - 1.15]
+    .filter((t) => t > 0.25)
+    .map((t) => +t.toFixed(3));
+  // clock seconds reel: one stacked digit per elapsed second
+  const nDig = Math.floor(DUR - 0.02) + 1;
+  const lateT = +(LASTWORD.start + 0.19).toFixed(3); // one late LED refresh on the final word
+  const css = `
+  #tboard { position:absolute; left:${bleft}px; top:${btop}px; width:${bw}px; height:${bh}px; border-radius:6px;
+           background-color: rgba(8,8,11,0.90);
+           background-image: radial-gradient(${A}0d 1px, rgba(0,0,0,0) 1.4px);
+           background-size: 7px 7px;
+           border:1px solid ${A}47; border-top:2px solid ${A}73;
+           box-shadow: 0 10px 30px rgba(0,0,0,0.5), inset 0 0 40px ${A}0a; }
+  #thdr { position:absolute; left:0; right:0; top:0; height:${hdrH}px;
+          border-bottom:1px solid ${A}38;
+          font-family:'${dna.fonts.tag}', monospace; font-size:20px; letter-spacing:0.12em; }
+  #tplt { position:absolute; left:16px; top:4px; color:${GRN};
+          text-shadow:0 0 8px ${GRN}80; }
+  #tstatwin { position:absolute; right:128px; top:3px; width:170px; height:24px; overflow:hidden; }
+  #tstatstack { position:absolute; left:0; top:0; width:100%; }
+  .tstrow { display:block; height:24px; line-height:24px; text-align:right; }
+  #tstrow1 { color:${WRN}; text-shadow:0 0 8px ${WRN}80; }
+  #tstrow2 { color:${GRN}; text-shadow:0 0 8px ${GRN}80; }
+  #tclock { position:absolute; right:14px; top:4px; color:${A}bf;
+            text-shadow:0 0 6px ${A}59; }
+  #tclock .cw { display:inline-block; width:11px; height:22px; overflow:hidden;
+                vertical-align:bottom; }
+  #tdigcol span { display:block; height:22px; line-height:22px; }
+  #twin { position:absolute; left:0; right:0; top:${hdrH + 2}px; bottom:0; overflow:hidden; }
+  .tline { position:absolute; left:22px; top:0; height:${lineH}px; line-height:${lineH}px;
+           font-family:'${dna.fonts.body}', monospace; font-size:${b.fontPx}px; letter-spacing:${b.letterSpacing || "0.05em"};
+           color:${dna.palette.body}; white-space:nowrap;
+           text-shadow: 0 0 9px ${A}73, 0 0 1px ${dna.palette.hot}e6; }
+  .tline .w { display:inline-block; margin-right:0.35em; }`;
+  const html = `      <div id="tboard">
+        <div id="thdr">
+          <div id="tplt">${esc(hd.plt || "PLT 4")}</div>
+          <div id="tstatwin"><div id="tstatstack">
+            <span class="tstrow" id="tstrow1">${esc(hd.statusWait || "⚠ DELAYED")}</span>
+            <span class="tstrow" id="tstrow2">${esc(hd.statusOk || "● ON TIME")}</span>
+          </div></div>
+          <div id="tclock">${esc(hd.clockPrefix || "19:42:0")}<span class="cw"><span id="tdigcol">${Array.from(
+            { length: nDig },
+            (_, k) => `<span>${k}</span>`,
+          ).join("")}</span></span></div>
+        </div>
+        <div id="twin"></div>
+      </div>`;
+  const js = `
+  // ---- body paradigm: LEDBOARD (scroll-snap paging + per-word LED column wipes) ----
+  const twin = document.getElementById("twin");
+  const TRAIL = ${J(lineData)};
+  let lastW = null;
+  TRAIL.forEach((L) => {
+    const line = document.createElement("div"); line.className = "tline";
+    twin.appendChild(line);
+    gsap.set(line, { y: ${winH + 2} });                                // parked below the window
+    tl.to(line, { y: 0,   duration: 0.22, ease: "steps(6)" }, L.pin);  // page in
+    tl.to(line, { y: ${-(winH + 2)}, duration: 0.20, ease: "steps(6)" }, L.pout); // page out
+    L.words.forEach(([txt, st, em]) => {
+      const w = document.createElement("span"); w.className = "w";
+      w.textContent = txt; line.appendChild(w); lastW = w;
+      const steps = Math.max(3, txt.length);
+      tl.fromTo(w, { clipPath: "inset(0% 100% 0% 0%)" },
+                { clipPath: "inset(0% 0% 0% 0%)", duration: 0.12, ease: "steps(" + steps + ")" }, st);
+      tl.set(w, { clipPath: "none" }, st + 0.17);            // free the glow
+      tl.set(w, { opacity: 0.5 }, st + 0.13);                // 1-frame arrival flicker
+      tl.set(w, { opacity: 1 },   st + 0.172);
+      if (em && st + 0.56 < L.pout) {                        // LED refresh: blinks twice
+        tl.set(w, { opacity: 0.22 }, st + 0.30);
+        tl.set(w, { opacity: 1 },    st + 0.383);
+        tl.set(w, { opacity: 0.22 }, st + 0.466);
+        tl.set(w, { opacity: 1 },    st + 0.55);
+      }
+    });
+  });
+${
+  lateT + 0.05 < DUR - 0.25
+    ? `  // the final word gets one late LED refresh blink (kept inside the clip)
+  tl.set(lastW, { opacity: 0.22 }, ${lateT.toFixed(3)});
+  tl.set(lastW, { opacity: 1 },    ${(lateT + 0.042).toFixed(3)});`
+    : ""
+}
+
+  // ===== furniture =====
+  // status blinks while we wait, then the gag: pages to the OK row
+  ${J(statBlinks)}.forEach((t) => {
+    tl.set("#tstrow1", { opacity: 0.35 }, t);
+    tl.set("#tstrow1", { opacity: 1 },    t + 0.042);
+  });
+  tl.to("#tstatstack", { y: -24, duration: 0.16, ease: "steps(4)" }, ${swapT.toFixed(3)});
+  tl.set("#tstrow2", { opacity: 0.5 }, ${(swapT + 0.18).toFixed(3)});
+  tl.set("#tstrow2", { opacity: 1 },   ${(swapT + 0.222).toFixed(3)});
+
+  // clock seconds tick (stacked digit column, stepped shifts)
+  for (let k = 1; k <= ${nDig - 1}; k++) tl.set("#tdigcol", { y: -22 * k }, k);
+
+  // idle LED refresh shimmer in the dead air (board never freezes)
+  ${J(shimmers)}.forEach((t) => {
+    tl.set("#twin", { opacity: 0.88 }, t);
+    tl.set("#twin", { opacity: 1 },    t + 0.042);
+  });
+${
+  b.yield
+    ? `
+  // ===== hierarchy: board yields while the apex lands =====
+  tl.to("#tboard", { opacity: ${b.yield.dim}, duration: 0.18, ease: "power1.in" }, ${(heroIn - (b.yield.pre || 0.2)).toFixed(3)});
+  tl.to("#tboard", { opacity: 1,   duration: 0.25, ease: "power1.out" }, ${(heroIn + (b.yield.post || 0.9)).toFixed(3)});`
+    : ""
+}`;
+  return { css, html, js };
+}
+
+function paradigmVhsrail() {
+  // VHSRAIL: camcorder-playback lower third. Every body word carries a PERMANENT
+  // 1px red+cyan misregistration fringe and arrives by tracking glitch (instant
+  // on + 2-frame y-shake + 1-frame band-slice shift of the word's bottom half);
+  // emphasis words get the PAUSE jitter (±1px y oscillation) + a white noise-band
+  // flicker. Exits are REWIND streaks left with a flat-white echo copy + scrub
+  // lines. Furniture: ▶ PLAY / ◀◀ REW top-left (REW gag in dead air and on the
+  // final rewind), ● REC top-right during the apex window, green timestamp
+  // bottom-right with a 1 Hz blinking colon, an idle tape-drift line in long
+  // silences, and the apex-coupled artifacts: 1-frame full white tear band +
+  // head-switching noise bar at REC FREEZE, scrub lines at the apex band on the
+  // hero's rewind exit.
+  const b = dna.body;
+  const p = dna.hero.params || {};
+  const X = theme.hero.exitAt ?? Math.min(heroOut, heroIn + (p.hold ?? 1.69)); // hero REWIND (shared with vhsosd)
+  const railTop = H - (b.bottomPx || 108);
+  const osd = b.osd || {};
+  const ts = osd.ts || ["JUN.11 2026 PM 7", "42"];
+  const A = dna.palette.accent,
+    GRN = dna.palette.green || dna.palette.accent,
+    RED = dna.palette.red || "#FF2E2E",
+    CYN = dna.palette.cyan || "#3FE8E8";
+  // line windows: `out` is the REWIND start — early into dead air (with the
+  // PLAY→REW gag), before the clip end for the last line
+  const lineData = LINES.map((L, i) => {
+    const lastEnd = L.words[L.words.length - 1].end;
+    const next = LINES[i + 1];
+    let out = +(L.out - 0.05).toFixed(3),
+      gag = 0;
+    if (next && next.in - lastEnd > 0.7) {
+      out = +(lastEnd + 0.53).toFixed(3);
+      gag = 1;
+    }
+    if (!next) out = +(DUR - 0.14).toFixed(3);
+    return {
+      id: "v" + L.id,
+      eid: "ve" + L.id,
+      in: +L.in.toFixed(3),
+      out,
+      gag,
+      words: L.words.map((w) => [w.display, +w.start.toFixed(3), w.minor ? 1 : 0]),
+    };
+  });
+  const lastOut = lineData[lineData.length - 1].out;
+  const css = `
+  /* ---- OSD furniture ---- */
+  .osd { position:absolute; font-family:'${dna.fonts.tag}', monospace; font-size:28px; line-height:1;
+         letter-spacing:2px; color:${A}; opacity:0;
+         text-shadow: -1px 0 0 ${RED}59, 1px 0 0 ${CYN}59,
+                      0 0 7px rgba(0,0,0,0.95), 0 2px 5px rgba(0,0,0,0.85); }
+  #osdplay { left:36px; top:34px; }
+  #pmode, #rmode { display:flex; align-items:center; gap:10px; }
+  #rmode { display:none; }
+  .tri { width:0; height:0; border-left:16px solid ${A};
+         border-top:9px solid transparent; border-bottom:9px solid transparent;
+         filter: drop-shadow(0 0 4px rgba(0,0,0,0.9)); }
+  .rtri { width:0; height:0; border-right:14px solid ${A};
+          border-top:8px solid transparent; border-bottom:8px solid transparent;
+          filter: drop-shadow(0 0 4px rgba(0,0,0,0.9)); }
+  #rmode .rtri + .rtri { margin-left:-6px; }
+  #rec { right:36px; top:34px; display:flex; align-items:center; gap:10px; color:${dna.palette.body}; }
+  #rdot { width:15px; height:15px; border-radius:50%; background:#ff3b30;
+          box-shadow: 0 0 6px rgba(0,0,0,0.85), 0 0 10px rgba(255,59,48,0.55); }
+  #osdts { right:36px; bottom:22px; color:${GRN};
+           text-shadow: -1px 0 0 ${RED}4d, 1px 0 0 ${CYN}4d,
+                        0 0 7px rgba(0,0,0,0.95), 0 2px 5px rgba(0,0,0,0.85); }
+
+  /* ---- body rail ---- */
+  .vln, .vlnE { position:absolute; left:${W / 2}px; top:${railTop}px; white-space:nowrap; opacity:0;
+        font-family:'${dna.fonts.body}', monospace; font-size:${b.fontPx}px; line-height:1;
+        letter-spacing:${b.letterSpacing || "0.04em"}; text-transform:uppercase;
+        color:${dna.palette.body};
+        text-shadow: -1px 0 0 ${RED}66, 1px 0 0 ${CYN}66,
+                     0 2px 6px rgba(0,0,0,0.85), 0 0 14px rgba(0,0,0,0.55); }
+  .vlnE { color:#ffffff; text-shadow:none; }
+  .vw { position:relative; display:inline-block; margin-right:0.3em; opacity:0; }
+  .vwa { display:inline-block; clip-path: inset(0 0 56% 0); }
+  .vwb { position:absolute; left:0; top:0; clip-path: inset(44% 0 0 0); }
+  .vnz { position:absolute; left:-4px; right:-4px; top:30%; height:38%; opacity:0;
+        background: repeating-linear-gradient(0deg, rgba(255,255,255,0.85) 0 2px, rgba(255,255,255,0) 2px 5px); }
+
+  /* ---- tape artifacts ---- */
+  #tear { position:absolute; left:0; top:${HG.y - 55}px; width:100%; height:110px; opacity:0;
+          background: linear-gradient(180deg, rgba(255,255,255,0.55) 0%, #ffffff 30%, #ffffff 70%, rgba(255,255,255,0.55) 100%); }
+  #hsbar { position:absolute; left:0; bottom:0; width:100%; height:16px; opacity:0;
+           background: repeating-linear-gradient(90deg,
+             rgba(205,205,205,0.92) 0 7px, rgba(60,60,60,0.85) 7px 11px,
+             rgba(165,165,165,0.9) 11px 19px, rgba(28,28,28,0.85) 19px 26px); }
+  .scrub { position:absolute; left:0; width:100%; height:3px; opacity:0;
+           background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.75) 8%,
+             rgba(225,225,225,0.5) 38%, rgba(255,255,255,0.8) 62%, rgba(255,255,255,0) 100%); }
+  #scrub1 { top:${railTop - 18}px; } #scrub2 { top:${railTop + 20}px; }
+  #scrub3 { top:${HG.y - 28}px; } #scrub4 { top:${HG.y + 34}px; }
+  #drift { position:absolute; left:0; top:${railTop + 48}px; width:100%; height:2px; opacity:0;
+           background: rgba(255,255,255,0.45); }`;
+  const html =
+    `      <div class="osd" id="osdplay">
+        <div id="pmode"><div class="tri"></div><span>PLAY</span></div>
+        <div id="rmode"><div class="rtri"></div><div class="rtri"></div><span>REW</span></div>
+      </div>
+      <div class="osd" id="rec"><div id="rdot"></div><span>REC</span></div>
+      <div class="osd" id="osdts">${esc(ts[0])}<span id="col">:</span>${esc(ts[1])}</div>
+` +
+    lineData
+      .map(
+        (L) => `      <div class="vln" id="${L.id}"></div><div class="vlnE" id="${L.eid}"></div>`,
+      )
+      .join("\n") +
+    `
+      <div id="drift"></div>
+      <div class="scrub" id="scrub1"></div><div class="scrub" id="scrub2"></div>
+      <div class="scrub" id="scrub3"></div><div class="scrub" id="scrub4"></div>
+      <div id="tear"></div>
+      <div id="hsbar"></div>`;
+  // PLAY → REW gags: each dead-air rewind + the final rewind (no restore)
+  const gags = lineData
+    .filter((L) => L.gag)
+    .map((L) => [+(L.out - 0.01).toFixed(3), +(L.out + 0.35).toFixed(3)]);
+  gags.push([+(lastOut - 0.01).toFixed(3), null]);
+  const js = `
+  // ---- body paradigm: VHSRAIL (tracking-glitch words, REWIND exits, OSD furniture) ----
+  const I = ${heroIn.toFixed(3)}, X = ${X.toFixed(3)};
+
+  // ===== OSD furniture: present the whole clip, 1-frame power-on glitch =====
+  tl.set(["#osdplay","#osdts"], { opacity: 1, x: 5 }, 0.02);
+  tl.set(["#osdplay","#osdts"], { x: 0 }, 0.02 + F);
+  // timestamp colon blinks at 1 Hz
+  for (let k = 0; 0.50 + k < ${(DUR - 0.04).toFixed(2)}; k++) {
+    tl.set("#col", { opacity: 0 }, 0.50 + k);
+    if (1.00 + k < ${(DUR - 0.04).toFixed(2)}) tl.set("#col", { opacity: 1 }, 1.00 + k);
+  }
+  // PLAY -> REW gag on each dead-air rewind, and again at the final rewind
+  ${J(gags)}.forEach(([a, b]) => {
+    tl.set("#pmode", { display: "none" }, a);
+    tl.set("#rmode", { display: "flex" }, a);
+    if (b) { tl.set("#rmode", { display: "none" }, b); tl.set("#pmode", { display: "flex" }, b); }
+  });
+
+  // ===== body rail =====
+  const VRAIL = ${J(lineData)};
+  VRAIL.forEach((L) => {
+    const line = document.getElementById(L.id);
+    const echo = document.getElementById(L.eid);
+    echo.textContent = L.words.map((w) => w[0]).join(" ");
+    L.words.forEach(([txt]) => {
+      const w = document.createElement("span"); w.className = "vw";
+      const a = document.createElement("span"); a.className = "vwa"; a.textContent = txt;
+      const b2 = document.createElement("span"); b2.className = "vwb"; b2.textContent = txt;
+      const n = document.createElement("span"); n.className = "vnz";
+      w.appendChild(a); w.appendChild(b2); w.appendChild(n); line.appendChild(w);
+    });
+    gsap.set([line, echo], { xPercent: -50, yPercent: -50 });
+    tl.set(line, { opacity: 1 }, L.words[0][1] - 0.02);
+
+    L.words.forEach(([txt, st, em], wi) => {
+      const w = line.children[wi];
+      const b2 = w.children[1], n = w.children[2];
+      // tracking glitch entrance: instant on, 2-frame y-shake, 1-frame band slice shift
+      tl.set(w, { opacity: 1, y: 3 }, st);
+      tl.set(b2, { x: 7 }, st);
+      tl.set(w, { y: -3 }, st + F);
+      tl.set(b2, { x: 0 }, st + F);
+      tl.set(w, { y: 0 }, st + 2 * F);
+      if (em) {
+        // PAUSE jitter: y oscillation +-1px for 0.3s + white noise band flicker
+        const e = st + 0.125;
+        [-1, 1, -1, 1, 0].forEach((v, k) => tl.set(w, { y: v }, e + k * 0.05));
+        [0.5, 0, 0.35, 0].forEach((o, k) => tl.set(n, { opacity: o }, e + k * 0.065));
+      }
+    });
+
+    // REWIND exit: streak left + echo copy + 2 scrub lines
+    const ed = L.out >= ${(DUR - 0.25).toFixed(2)} ? 0.12 : 0.16;
+    tl.to(line, { x: -60, opacity: 0, duration: 0.12, ease: "power2.in" }, L.out);
+    tl.set(echo, { opacity: 0.35 }, L.out + 0.01);
+    tl.to(echo, { x: -110, opacity: 0, duration: ed, ease: "power2.in" }, L.out + 0.02);
+    tl.set([line, echo], { display: "none" }, Math.min(L.out + 0.22, ${(DUR - 0.02).toFixed(2)}));
+    [0.6, 0.25, 0.5, 0].forEach((o, k) => {
+      tl.set(["#scrub1","#scrub2"], { opacity: o }, Math.min(L.out + k * F, ${(DUR - 0.02).toFixed(2)}));
+    });
+  });
+${
+  b.yield
+    ? `
+  // rail yields while the apex lands (dim clamped ≥ line-in; restore only with runway)
+  VRAIL.forEach((L) => {
+    if (L.in < I + 0.9 && L.out > I - 0.3) {
+      const dimT = Math.max(I - ${(b.yield.pre || 0.2).toFixed(2)}, L.in + 0.05);
+      if (L.out > dimT + 0.25) {
+        tl.to("#" + L.id, { opacity: ${b.yield.dim}, duration: 0.12, ease: "power1.in" }, dimT);
+        const resT = I + ${(b.yield.post || 0.9).toFixed(2)};
+        if (resT + 0.3 < L.out) tl.to("#" + L.id, { opacity: 1, duration: 0.25 }, resT);
+      }
+    }
+  });`
+    : ""
+}
+
+  // idle tape noise in dead air
+  VRAIL.filter((L) => L.gag).forEach((L) => {
+    tl.set("#drift", { opacity: 0.12 }, L.out + 0.2);
+    tl.fromTo("#drift", { y: 0 }, { y: -55, duration: 0.5, ease: "none" }, L.out + 0.2);
+    tl.set("#drift", { opacity: 0 }, L.out + 0.7);
+  });
+
+  // ===== REC FREEZE artifacts (apex-coupled, in FRONT of the subject) =====
+  // 1-frame full white tear band
+  tl.set("#tear", { opacity: 0.95 }, I);
+  tl.set("#tear", { opacity: 0 }, I + F);
+  // ● REC blinks top-right (1-frame glitch entrance)
+  tl.set("#rec", { opacity: 1, x: 6 }, I + 0.04);
+  tl.set("#rec", { x: 0 }, I + 0.04 + F);
+  [[0.49, 0], [0.79, 1], [1.24, 0], [1.54, 1]].forEach(([dt, o]) => {
+    if (I + dt < X - 0.05) tl.set("#rdot", { opacity: o }, I + dt);
+  });
+  tl.set("#rec", { opacity: 0 }, X);
+  // head-switching noise bar: sets every frame for 10 frames
+  const HSX = [0, 140, 60, 220, 30, 180, 90, 250, 10, 120];
+  HSX.forEach((px, k) => {
+    tl.set("#hsbar", { opacity: k % 2 ? 0.62 : 0.9, backgroundPositionX: px + "px" }, I + k * F);
+  });
+  tl.set("#hsbar", { opacity: 0 }, I + 10 * F);
+
+  // apex REWIND exit: 2 scrub lines at the apex band
+  [0.6, 0.25, 0.5, 0].forEach((o, k) => tl.set(["#scrub3","#scrub4"], { opacity: o }, X + k * F));
+  // head-switch reprise on the final rewind
+  [[0, 0.85, 40], [0.04, 0.6, 190], [0.08, 0.8, 90]].forEach(([dt, o, px]) => {
+    tl.set("#hsbar", { opacity: o, backgroundPositionX: px + "px" }, ${lastOut.toFixed(3)} + dt);
+  });
+  tl.set("#hsbar", { opacity: 0 }, ${Math.min(lastOut + 0.12, DUR - 0.02).toFixed(3)});`;
+  return { css, html, js };
+}
+
+function paradigmHudrail() {
+  // HUDRAIL: arcade-cabinet HUD. The whole frame plays through a CRT (scanline
+  // + vignette overlays); body words coin-pop onto a docked HUD bar (2px accent
+  // border, 1UP / CREDIT tags) with steps(2) pixel pops + a 1-frame white
+  // coin-blip tick over the word; emphasis words run a 3-frame palette swap
+  // (body -> accent -> magenta -> body). Lines exit by checkerboard dissolve
+  // (words vanish in 2 alternating 2-frame passes). The 1UP tag blinks on the
+  // classic attract cadence all clip; the HUD yields while the boss lands.
+  const b = dna.body;
+  const bar = b.bar || {};
+  const barH = bar.h || 70,
+    inset = bar.inset || 24,
+    barBot = bar.bottom || 50;
+  const barTop = H - barBot - barH;
+  const tags = b.tags || {};
+  const A = dna.palette.accent,
+    MG = dna.palette.magenta || "#FF2E88";
+  const lineData = LINES.map((L, i) => ({
+    id: "h" + L.id,
+    in: +L.in.toFixed(3),
+    // checkerboard exit start: just before the next line's first pop
+    xo: i + 1 < LINES.length ? +(L.out - 0.04).toFixed(3) : +Math.min(L.out, DUR - 0.11).toFixed(3),
+    words: L.words.map((w) => [w.display, +w.start.toFixed(3), w.minor ? 1 : 0]),
+  }));
+  const css = `
+  #hud   { position:absolute; left:${inset}px; top:${barTop}px; width:${W - 2 * inset}px; height:${barH}px;
+           opacity:0; background:rgba(3,8,18,0.84); border:2px solid ${A};
+           box-shadow:0 0 16px ${A}59, inset 0 0 24px ${A}14; z-index:3; }
+  .hln   { position:absolute; left:50%; top:50%; white-space:nowrap; opacity:0;
+           font-family:'${dna.fonts.body}', monospace; font-size:${b.fontPx}px; line-height:1;
+           ${b.textTransform ? "text-transform:" + b.textTransform + ";" : ""}
+           color:${dna.palette.body}; text-shadow:0 3px 0 rgba(0,0,0,0.6); }
+  .hw    { position:relative; display:inline-block; margin-right:0.45em; opacity:0; }
+  .hw:last-child { margin-right:0; }
+  .htick { position:absolute; inset:-3px; background:#ffffff; opacity:0; }
+  #tagL  { position:absolute; left:18px; top:50%; transform:translateY(-50%);
+           font-family:'${dna.fonts.tag}', monospace; font-size:15px; color:${dna.palette.yellow || A};
+           text-shadow:0 2px 0 rgba(0,0,0,0.6); }
+  #tagR  { position:absolute; right:18px; top:50%; transform:translateY(-50%);
+           font-family:'${dna.fonts.tag}', monospace; font-size:12px; color:${dna.palette.credit || A};
+           text-shadow:0 2px 0 rgba(0,0,0,0.6); }
+  #crtvig  { position:absolute; inset:0; opacity:0; z-index:20; pointer-events:none;
+           background:radial-gradient(120% 95% at 50% 46%, rgba(0,0,0,0) 58%, rgba(0,0,0,0.34) 100%); }
+  #crtscan { position:absolute; inset:0; opacity:0; z-index:21; pointer-events:none;
+           background:repeating-linear-gradient(180deg, rgba(0,0,0,0.9) 0px, rgba(0,0,0,0.9) 2px, rgba(0,0,0,0) 2px, rgba(0,0,0,0) 5px); }`;
+  const html = `      <div id="hud">
+        <div id="tagL">${esc(tags.left || "1UP")}</div>
+        <div id="tagR">${esc(tags.right || "CREDIT 01")}</div>
+${lineData.map((L) => `        <div class="hln" id="${L.id}"></div>`).join("\n")}
+      </div>
+      <div id="crtvig"></div>
+      <div id="crtscan"></div>`;
+  const js = `
+  // ---- body paradigm: HUDRAIL (coin-pop words on an arcade HUD bar) ----
+  // world overlays: scanlines + slight vignette
+  tl.set("#crtscan", { opacity: ${b.scan ?? 0.06} }, 0.03);
+  tl.set("#crtvig",  { opacity: 1 },    0.03);
+  // HUD bar boots up
+  tl.set("#hud", { opacity: 1 }, 0.05);
+  tl.fromTo("#hud", { y: 14 }, { y: 0, duration: 0.12, ease: "steps(2)" }, 0.05);
+  // 1UP blink, classic cadence (baked sets)
+  for (let t = 0.28, k = 0; t < ${(DUR - 0.06).toFixed(2)}; t += 0.45, k++) {
+    tl.set("#tagL", { opacity: k % 2 === 0 ? 0.3 : 1 }, t);
+  }
+  const HUD = ${J(lineData)};
+  HUD.forEach((L) => {
+    const line = document.getElementById(L.id);
+    L.words.forEach(([txt]) => {
+      const w = document.createElement("span"); w.className = "hw"; w.textContent = txt;
+      const tick = document.createElement("div"); tick.className = "htick";
+      w.appendChild(tick); line.appendChild(w);
+    });
+    gsap.set(line, { xPercent: -50, yPercent: -50 });
+    tl.set(line, { opacity: 1 }, L.in);
+    L.words.forEach(([txt, st, em], wi) => {
+      const el = line.children[wi], tick = el.lastChild;
+      // coin pop: instant-on + steps(2) scale from the baseline + 1-frame blip
+      tl.set(el, { opacity: 1 }, st);
+      tl.fromTo(el, { scale: 0 }, { scale: 1, duration: 0.12, ease: "steps(2)",
+                                    transformOrigin: "50% 100%" }, st);
+      tl.set(tick, { opacity: 0.95 }, st);                // coin blip, exactly 1 frame
+      tl.set(tick, { opacity: 0 }, st + 0.042);
+      if (em) {  // 3-frame palette swap (body -> accent -> magenta -> body)
+        tl.set(el, { color: ${J(A)} }, st + 0.13);
+        tl.set(el, { color: ${J(MG)} }, st + 0.172);
+        tl.set(el, { color: ${J(dna.palette.body)} }, st + 0.214);
+      }
+    });
+    // checkerboard dissolve: words vanish in 2 alternating set passes
+    L.words.forEach((w, wi) => {
+      tl.set(line.children[wi], { opacity: 0 },
+             wi % 2 === 0 ? L.xo : Math.min(L.xo + 0.083, ${(DUR - 0.03).toFixed(2)}));
+    });
+    tl.set(line, { opacity: 0, display: "none" }, Math.min(L.xo + 0.15, ${(DUR - 0.02).toFixed(2)}));
+  });
+${
+  b.yield
+    ? `  // HUD yields while the boss lands (restore only with runway)
+  tl.to("#hud", { opacity: ${b.yield.dim}, duration: 0.15, ease: "power1.in" }, ${(heroIn - (b.yield.pre || 0.2)).toFixed(3)});
+${
+  heroIn + (b.yield.post || 0.9) + 0.3 < DUR - 0.1
+    ? `  tl.to("#hud", { opacity: 1, duration: 0.25, ease: "power1.out" }, ${(heroIn + (b.yield.post || 0.9)).toFixed(3)});`
+    : ""
+}`
+    : ""
+}`;
+  return { css, html, js };
+}
+
+function paradigmCarbonstrip() {
+  // CARBONSTRIP: cold-war case-file transcript strip docked on the clearer
+  // side (manila gradient, punch holes, faint red watermark, typed case
+  // header). Carbon type HAMMERS in per word — per-char sets 30ms apart,
+  // scale 1.35→1 in one frame (the stamp motif at low amplitude) — every
+  // strike kicks the strip 1px (y-channel locked while the strip itself is
+  // tweened); seeded ±1.2px baselines + seeded ribbon-ink weight. Emphasis
+  // words get a red ink ellipse drawn around them. Lines live on up to
+  // body.rows fixed slots; PAGES (broken at full rows, dead-air gaps > 0.7s,
+  // and after the hero hand-off line — it is filed away while the stamp owns
+  // the frame) exit by X-row over-strike (3 chunks per line, lines 0.16s
+  // apart) then a carriage yank-down feed; the final page is pulled with the
+  // whole strip at clip end. The strip top-shadow breathes during the
+  // stamp's dead-still hold; the strip yields (body.yield) while it lands.
+  const b = dna.body;
+  const p = dna.hero.params || {};
+  const C = heroIn + (p.crush ?? 0.074); // stamp contact (shared with rubberstamp)
+  const SW = (b.strip && b.strip.w) || 764,
+    SH = (b.strip && b.strip.h) || 132;
+  const SX = (b.strip && b.strip.x) ?? (CLEARER === "left" ? 48 : W - 48 - SW);
+  const ST = H - ((b.strip && b.strip.bottomPx) ?? 4) - SH;
+  const ROWS = b.rows || [36, 82];
+  const FY = +(DUR - 0.1).toFixed(3); // final carriage yank (the file is pulled)
+  const HDR = b.header || "TRANSCRIPT OF RECORDING";
+  const hdrW = Math.round(HDR.length * 11.4);
+  const hdrSteps = Math.max(8, Math.round(HDR.length * 0.58));
+  const rgb = (h) =>
+    [h.slice(1, 3), h.slice(3, 5), h.slice(5, 7)].map((x) => parseInt(x, 16)).join(",");
+  const ACC = dna.palette.accent || "#b3271e";
+  // ---- pages: up to ROWS.length lines per carriage feed ----
+  const pages = [];
+  let cur = [];
+  LINES.forEach((L, i) => {
+    cur.push(L);
+    const next = LINES[i + 1];
+    const heroLine = heroIn >= L.in - 0.01 && heroIn < L.out;
+    const gap = next ? next.words[0].start - L.words[L.words.length - 1].end : 0;
+    if (!next || cur.length === ROWS.length || heroLine || gap > 0.7) {
+      pages.push(cur);
+      cur = [];
+    }
+  });
+  // ---- exit schedule: X-strike chunks (0.05s apart, lines 0.16s apart) →
+  // yank → hide → carriage return. Roomy cadence in dead air, compressed
+  // when the next page is close (both cadences are the demo's). The whole
+  // exit always completes before the next page's first hammer strike.
+  const YLOCK = [[0, 0.215]]; // strip-y tween windows: no kicks inside
+  const pageData = pages.map((pg, pi) => {
+    const lines = pg.map((L, k) => ({
+      id: "d" + L.id,
+      top: ROWS[k],
+      n: L.words.reduce((a, w) => a + w.display.length, 0) + L.words.length - 1,
+      words: L.words.map((w) => [w.display, +w.start.toFixed(3), w.minor ? 1 : 0]),
+    }));
+    if (pi === pages.length - 1) {
+      YLOCK.push([+(FY - 0.01).toFixed(3), +(DUR + 0.02).toFixed(3)]);
+      return { lines, xs: null, yank: null, limit: FY };
+    }
+    const lastW = pg[pg.length - 1].words;
+    const lastEnd = lastW[lastW.length - 1].end;
+    const nextIn = +(pages[pi + 1][0].words[0].start - 0.02).toFixed(3);
+    const n = pg.length;
+    const roomySpan = 0.16 * (n - 1) + 0.55,
+      tightSpan = 0.16 * (n - 1) + 0.3;
+    let xt0 = lastEnd + 0.33,
+      roomy = true;
+    if (xt0 + roomySpan > nextIn) {
+      xt0 = Math.max(lastEnd + 0.18, nextIn - roomySpan);
+      if (xt0 + roomySpan > nextIn + 0.001) {
+        roomy = false;
+        xt0 = Math.max(lastEnd + 0.15, nextIn - tightSpan);
+      }
+    }
+    xt0 = +xt0.toFixed(3);
+    const lastChunkEnd = xt0 + 0.16 * (n - 1) + 0.1;
+    const yankT = +(lastChunkEnd + (roomy ? 0.14 : 0.07)).toFixed(3);
+    const yankDur = roomy ? 0.1 : 0.07;
+    const hideT = +(yankT + (roomy ? 0.11 : 0.07)).toFixed(3);
+    const returnT = +(yankT + (roomy ? 0.13 : 0.075)).toFixed(3);
+    const returnDur = roomy ? 0.18 : 0.055;
+    const fits = xt0 + (roomy ? roomySpan : tightSpan) <= nextIn + 0.02;
+    YLOCK.push([+(yankT - 0.01).toFixed(3), +(returnT + returnDur).toFixed(3)]);
+    return {
+      lines,
+      xs: fits ? xt0 : null,
+      yank: [yankT, yankDur, hideT, returnT, returnDur],
+      limit: hideT,
+    };
+  });
+  // red-circle draw durations clamp inside the word's page life
+  pageData.forEach((pg) =>
+    pg.lines.forEach((ln) =>
+      ln.words.forEach((wd) => {
+        if (wd[2]) {
+          const circT = wd[1] + wd[0].length * 0.03 + 0.02;
+          wd.push(+Math.min(0.25, Math.max(0.14, pg.limit - circT - 0.02)).toFixed(3));
+        }
+      }),
+    ),
+  );
+  const css = `
+  #strip { position:absolute; left:${SX}px; top:${ST}px; width:${SW}px; height:${SH}px; opacity:0;
+           background: linear-gradient(180deg, #e0cda6 0%, ${dna.palette.paper || "#d8c49a"} 42%, #ccb486 100%);
+           border:1px solid rgba(106,86,48,0.9); border-radius:2px;
+           box-shadow: inset 0 1px 0 rgba(255,250,235,0.5), inset 0 -14px 22px rgba(95,74,38,0.18); }
+  #shade { position:absolute; left:2px; right:2px; top:-16px; height:16px; opacity:0.5;
+           background: linear-gradient(180deg, rgba(15,10,4,0) 0%, rgba(15,10,4,0.38) 100%); }
+  .hole { position:absolute; left:14px; width:13px; height:13px; border-radius:50%;
+          background:rgba(58,45,24,0.34); box-shadow: inset 0 2px 2px rgba(30,22,10,0.5), 0 1px 0 rgba(255,248,230,0.45); }
+  #wm { position:absolute; right:18px; top:40px; font-family:'${dna.fonts.tag}', serif;
+        font-size:32px; letter-spacing:7px; color:rgba(${rgb(ACC)},0.13);
+        transform:rotate(-6deg); white-space:nowrap; }
+  #hdrwrap { position:absolute; left:52px; top:9px; overflow:hidden; white-space:nowrap; width:0; }
+  #hdr { font-family:'${dna.fonts.tag}', serif; font-size:14px; letter-spacing:3px;
+         color:${dna.palette.ink || "#8a6f3f"}; white-space:nowrap; }
+  .ln { position:absolute; left:52px; font-family:'${dna.fonts.body}', serif; font-size:${b.fontPx}px;
+        line-height:1; color:${dna.palette.body}; white-space:nowrap; }
+  .ln .w { display:inline-block; position:relative; margin-right:0.5em; }
+  .ln .c { display:inline-block; opacity:0; }
+  .xrow { position:absolute; left:52px; font-family:'${dna.fonts.body}', serif; font-size:${b.fontPx}px;
+          line-height:1; color:rgba(${rgb(ACC)},0.85); white-space:nowrap; }
+  .xrow span { opacity:0; }
+  .circ { position:absolute; left:-13px; top:-9px; width:calc(100% + 26px);
+          height:calc(100% + 18px); overflow:visible; pointer-events:none; }
+  .circ ellipse { fill:none; stroke:${ACC}; stroke-width:3.6; stroke-linecap:round; }`;
+  const html = `      <div id="strip">
+        <div id="shade"></div>
+        <div class="hole" style="top:24px"></div>
+        <div class="hole" style="top:${SH - 40}px"></div>
+        <div id="wm">${esc(b.watermark || "CONFIDENTIAL")}</div>
+        <div id="hdrwrap"><div id="hdr">${esc(HDR)}</div></div>
+${pageData
+  .flatMap((pg) => pg.lines)
+  .map((ln) => `        <div class="ln" id="${ln.id}" style="top:${ln.top}px"></div>`)
+  .join("\n")}
+      </div>`;
+  const shadeStart = +(C + 0.12).toFixed(3);
+  const shadeDur = Math.min(1.5, FY - shadeStart - 0.05);
+  const dimT = +(heroIn - ((b.yield && b.yield.pre) || 0.02)).toFixed(3);
+  const resT = +(heroIn + ((b.yield && b.yield.post) || 0.41)).toFixed(3);
+  const js = `
+  // ---- body paradigm: CARBONSTRIP (typewriter hammer in / X-strike + carriage-feed out) ----
+  const strip = document.getElementById("strip");
+  const krnd = mulberry32(${b.seed || 180618});
+  // y-channel windows where the strip is tweened — no kicks allowed inside
+  const YLOCK = ${J(YLOCK)};
+  function kick(t) {
+    for (const [a, b] of YLOCK) if (t >= a && t <= b + 0.045) return;
+    tl.set(strip, { y: 1 }, t);
+    tl.set(strip, { y: 0 }, t + 0.042);
+  }
+
+  // ===== strip entrance: the carriage feeds the paper up =====
+  tl.set(strip, { opacity: 1 }, 0.02);
+  tl.fromTo(strip, { y: 130 }, { y: 0, duration: 0.19, ease: "power3.out" }, 0.02);
+  tl.fromTo("#hdrwrap", { width: 0 }, { width: ${hdrW}, duration: 0.42, ease: "steps(${hdrSteps})" }, 0.10);
+
+  // ===== body: typewriter hammer (per-char sets, 30ms apart) =====
+  const PAGES = ${J(pageData)};
+  const NS = "http://www.w3.org/2000/svg";
+  const strikes = [], circles = [];
+  PAGES.forEach((pg) => {
+    pg.lines.forEach((ln) => {
+      const line = document.getElementById(ln.id);
+      ln.words.forEach(([txt, st, em, cd]) => {
+        const w = document.createElement("span"); w.className = "w";
+        [...txt].forEach((ch, i) => {
+          const c = document.createElement("span"); c.className = "c"; c.textContent = ch;
+          w.appendChild(c);
+          strikes.push([c, st + i * 0.03]);
+        });
+        if (em) {
+          const svg = document.createElementNS(NS, "svg");
+          svg.setAttribute("class", "circ"); svg.setAttribute("viewBox", "0 0 120 64");
+          svg.setAttribute("preserveAspectRatio", "none");
+          const el = document.createElementNS(NS, "ellipse");
+          el.setAttribute("cx", 60); el.setAttribute("cy", 32);
+          el.setAttribute("rx", 55); el.setAttribute("ry", 25);
+          el.setAttribute("transform", "rotate(-4 60 32)");
+          svg.appendChild(el); w.appendChild(svg);
+          circles.push([el, st + txt.length * 0.03 + 0.02, cd]);
+        }
+        line.appendChild(w);
+      });
+    });
+  });
+  strikes.forEach(([c, t]) => {
+    const off = (krnd() - 0.5) * 2.4;                  // ±1.2px baseline wobble
+    const ink = 0.84 + krnd() * 0.16;                  // uneven ribbon ink
+    gsap.set(c, { y: off, transformOrigin: "50% 85%" });
+    tl.set(c, { opacity: ink, scale: 1.35 }, t);       // hammer = the stamp motif, low amplitude
+    tl.set(c, { scale: 1 }, t + 0.042);
+    kick(t);                                           // every strike kicks the strip
+  });
+  // red ink circles draw around the emphasis words
+  circles.forEach(([el, t, d]) => {
+    const len = el.getTotalLength();
+    gsap.set(el, { attr: { "stroke-dasharray": len, "stroke-dashoffset": len } });
+    tl.to(el, { attr: { "stroke-dashoffset": 0 }, duration: d, ease: "power2.inOut" }, t);
+  });
+
+  // ===== exits: X-row over-strike (3 chunks per line) then carriage yank =====
+  PAGES.forEach((pg) => {
+    const hides = pg.lines.map((ln) => "#" + ln.id);
+    if (pg.xs != null) pg.lines.forEach((ln, k) => {
+      const row = document.createElement("div");
+      row.className = "xrow"; row.style.top = (ln.top + 2) + "px";
+      strip.appendChild(row); hides.push(row);
+      const third = Math.max(1, Math.ceil(ln.n / 3));
+      let left = ln.n;
+      for (let j = 0; j < 3 && left > 0; j++) {
+        const nC = Math.min(third, left); left -= nC;
+        const s = document.createElement("span"); s.textContent = "X".repeat(nC);
+        row.appendChild(s);
+        const t = pg.xs + k * 0.16 + j * 0.05;
+        tl.set(s, { opacity: 1 }, t);
+        kick(t);
+      }
+    });
+    if (pg.yank) {
+      const [yt, yd, ht, rt, rd] = pg.yank;
+      tl.to(strip, { y: 30, duration: yd, ease: "power3.in" }, yt);
+      tl.set(hides, { opacity: 0 }, ht);
+      tl.to(strip, { y: 0, duration: rd, ease: "power2.out" }, rt);
+    }
+  });
+${
+  b.yield
+    ? `
+  // ===== apex etiquette: the strip yields while the stamp lands =====
+  tl.to(strip, { opacity: ${b.yield.dim}, duration: 0.18, ease: "power1.in" }, ${dimT});
+${resT + 0.3 < FY ? `  tl.to(strip, { opacity: 1, duration: 0.25, ease: "power1.out" }, ${resT});` : ""}`
+    : ""
+}
+${
+  shadeDur > 0.4
+    ? `
+  // strip top-shadow breathes during the stamp's dead-still hold
+  tl.to("#shade", { keyframes: { opacity: [0.5, 0.72, 0.54, 0.7, 0.55, 0.66, 0.5] },
+                    duration: ${shadeDur.toFixed(2)}, ease: "none" }, ${shadeStart});`
+    : ""
+}
+
+  // ===== ending: the file is pulled — strip yanks down and is gone =====
+  tl.to(strip, { y: 34, duration: 0.09, ease: "power3.in" }, ${FY});
+  tl.to(strip, { opacity: 0, duration: 0.06 }, ${(FY + 0.02).toFixed(3)});`;
+  return { css, html, js };
+}
+
+function paradigmLaserrail() {
+  // LASERRAIL: concert lower third — every word is IGNITED where two thin
+  // laser beams (accent from the top-left, magenta from the top-right) sweep
+  // to CONVERGE on its position 2 frames early; at convergence a flare pops
+  // and the word snaps on in laser color (the apex motif at low amplitude:
+  // crush → contact squash → elastic settle, brightness cool). Emphasis words
+  // strobe once (1 frame off / back on) and their beams linger. Exits: a
+  // sweeper beam crosses L→R and carries the words (streak x+44 + blur).
+  // Word centers are BAKED at compile time from the measured char-width table
+  // (assets/fonts/char-widths.json) so font-load timing can't skew beam aim
+  // (calibrated vs the t37 demo's browser-measured table: ≤3px/word).
+  const b = dna.body;
+  const fam = dna.fonts.body;
+  const m = famMetrics(fam) || { ascent: 0.8, descent: 0.2, widths: {} };
+  const lsEm = parseFloat(b.letterSpacing) || 0;
+  const gapEm = b.wordGapEm ?? 0.24;
+  const railBot = H - b.bottomPx;
+  const emPx = Math.round(b.fontPx * (b.minorScale || 1.325));
+  const A = dna.palette.accent;
+  const lineData = LINES.map((L, i) => {
+    const words = L.words.map((w) => ({
+      txt: b.textTransform === "uppercase" ? w.display.toUpperCase() : w.display,
+      st: +w.start.toFixed(3),
+      em: w.minor ? 1 : 0,
+    }));
+    // centered-line layout, baked in px (CSS model: inline-blocks on one
+    // baseline, margin 0 <gapEm>em, tracking after every char incl the last)
+    const pxs = words.map((w) => (w.em ? emPx : b.fontPx));
+    const ws = words.map((w, k) => wordPx(w.txt, fam, pxs[k], lsEm));
+    const total = ws.reduce((a, x, k) => a + x + 2 * gapEm * pxs[k], 0);
+    const maxPx = Math.max(...pxs);
+    const baseline = railBot - (maxPx * (1 - m.ascent + m.descent)) / 2;
+    let cur = W / 2 - total / 2;
+    const pos = words.map((w, k) => {
+      const cx = cur + gapEm * pxs[k] + ws[k] / 2;
+      cur += ws[k] + 2 * gapEm * pxs[k];
+      return [
+        Math.round(cx),
+        Math.round(baseline - (pxs[k] * (m.ascent - m.descent)) / 2),
+        Math.round(ws[k]),
+      ];
+    });
+    // sweep starts so the carried words clear before the next line's beams own
+    // the rail; last line keeps the demo's end-of-clip runway
+    const sweepT =
+      i + 1 < LINES.length
+        ? +(L.out - 0.14).toFixed(3)
+        : +Math.min(L.out - 0.14, DUR - 0.26).toFixed(3);
+    return {
+      id: "lr" + L.id,
+      in: +L.in.toFixed(3),
+      sweepT,
+      words: words.map((w) => [w.txt, w.st, w.em]),
+      pos,
+    };
+  });
+  const css = `
+  #lrfx { position:absolute; inset:0; }
+  .lrline { position:absolute; left:${W / 2}px; top:${railBot}px; opacity:0; white-space:nowrap;
+          font-family:'${fam}', sans-serif; font-size:${b.fontPx}px; line-height:1;
+          letter-spacing:${b.letterSpacing || "0.02em"}; color:${dna.palette.body};
+          ${b.textTransform ? "text-transform:" + b.textTransform + ";" : ""}
+          text-shadow: 0 0 10px ${A}bf, 0 0 26px ${A}61, 0 2px 6px rgba(0,0,0,0.7); }
+  .lrline .w { display:inline-block; opacity:0; margin:0 ${gapEm}em; }
+  .lrline .w.em { font-size:${emPx}px;
+          text-shadow: 0 0 14px ${A}e6, 0 0 34px ${A}80, 0 2px 6px rgba(0,0,0,0.7); }
+  .lflare { position:absolute; width:54px; height:54px; border-radius:50%; opacity:0;
+            background: radial-gradient(circle, rgba(220,255,235,0.95) 0%, ${A}80 40%, ${A}00 70%); }
+  .lsweep { position:absolute; width:3px; height:88px; opacity:0;
+           background: linear-gradient(180deg, ${A}00 0%, rgba(230,255,242,0.95) 45%, ${A}00 100%);
+           filter: drop-shadow(0 0 6px ${A}); }`;
+  const html =
+    `      <svg id="lrfx" width="${W}" height="${H}" viewBox="0 0 ${W} ${H}" xmlns="http://www.w3.org/2000/svg">
+        <g id="gLR"></g>
+      </svg>\n` + lineData.map((L) => `      <div class="lrline" id="${L.id}"></div>`).join("\n");
+  const js = `
+  // ---- body paradigm: LASERRAIL (per-word beam-converge ignition) ----
+  const LACC = ${J(A)}, LMAG = ${J(dna.palette.magenta || "#ff4df0")};
+  const NSL = "http://www.w3.org/2000/svg";
+  const lrStage = document.getElementById("stage");
+  const gLR = document.getElementById("gLR");
+  function lrLine(x1, y1, x2, y2, col, w) {
+    const l = document.createElementNS(NSL, "line");
+    l.setAttribute("x1", x1); l.setAttribute("y1", y1);
+    l.setAttribute("x2", x2); l.setAttribute("y2", y2);
+    l.setAttribute("stroke", col); l.setAttribute("stroke-width", w);
+    l.setAttribute("stroke-linecap", "round");
+    l.style.opacity = 0; gLR.appendChild(l); return l;
+  }
+  const LRAIL = ${J(lineData)};
+  LRAIL.forEach((L) => {
+    const line = document.getElementById(L.id);
+    L.words.forEach(([txt, , em]) => {
+      const s = document.createElement("span");
+      s.className = "w" + (em ? " em" : ""); s.textContent = txt;
+      line.appendChild(s);
+    });
+    gsap.set(line, { xPercent: -50, yPercent: -100, transformOrigin: "50% 100%" });
+    tl.set(line, { opacity: 1 }, L.words[0][1] - 0.03);
+    L.words.forEach(([txt, st, em], wi) => {
+      const el = line.children[wi];
+      const [wx, wy] = L.pos[wi];
+      // beams yield inside the apex window (the hero owns the light)
+      const yld = (st > ${(heroIn - 0.41).toFixed(3)} && st < ${(heroIn + 0.99).toFixed(3)})
+        ? ${b.yield ? (b.yield.beamDim ?? 0.55) : 1} : 1;
+      const t0 = st - 0.21, cv = st - 0.083;
+      // two beams converge on the word 2 frames before its time
+      [[-25, -15, LACC, wx - 170], [${W + 25}, -15, LMAG, wx + 170]].forEach(([ex, ey, col, sx]) => {
+        const halo = lrLine(ex, ey, sx, wy - 30, col, 5);
+        const core = lrLine(ex, ey, sx, wy - 30, col, 1.5);
+        tl.set(halo, { opacity: 0.24 * yld }, t0);
+        tl.set(core, { opacity: 0.92 * yld }, t0);
+        tl.to([halo, core], { attr: { x2: wx, y2: wy }, duration: cv - t0, ease: "power2.out" }, t0);
+        tl.to([halo, core], { opacity: 0, duration: em ? 0.45 : 0.2, ease: "power1.in" }, st + 0.03);
+      });
+      // convergence flare
+      const f = document.createElement("div");
+      f.className = "lflare"; lrStage.appendChild(f);
+      f.style.left = (wx - 27) + "px"; f.style.top = (wy - 27) + "px";
+      tl.set(f, { opacity: 0.85, scale: 0.5 }, cv);
+      tl.to(f, { scale: 1.35, opacity: 0, duration: 0.13, ease: "power2.out" }, st - 0.01);
+      // IGNITE (apex motif at low amplitude): on in 1 frame, crush, squash, settle
+      tl.set(el, { opacity: 1, scale: 1.12, filter: "brightness(1.85)", transformOrigin: "50% 80%" }, st);
+      tl.to(el,  { scale: 1, duration: 0.09, ease: "power3.in" }, st + 0.005);
+      tl.set(el, { scaleX: 1.05, scaleY: 0.94 }, st + 0.1);
+      tl.to(el,  { scaleX: 1, scaleY: 1, duration: 0.3, ease: "elastic.out(1, 0.42)" }, st + 0.14);
+      tl.to(el,  { filter: "brightness(1)", duration: 0.22, ease: "power2.out" }, st + 0.07);
+      if (em) { // single strobe: 1 frame off, back on
+        tl.set(el, { opacity: 0 }, st + 0.18);
+        tl.set(el, { opacity: 1 }, st + 0.222);
+      }
+    });
+    // hold life: gentle breathe + laser shimmer while the line waits
+    const lastSt = L.words[L.words.length - 1][1];
+    const free = L.sweepT - lastSt - 0.35;
+    if (free > 0.45) {
+      const half = Math.min(0.55, free / 2);
+      tl.to(line, { scale: 1.013, duration: half, ease: "sine.inOut" }, lastSt + 0.35);
+      tl.to(line, { scale: 1.0,   duration: half, ease: "sine.inOut" }, lastSt + 0.35 + half);
+    }
+    if (free > 0.9) {
+      tl.to(line, { keyframes: { filter: ["brightness(1)","brightness(1.07)","brightness(1)","brightness(1.05)","brightness(1)"] },
+                    duration: 0.9, ease: "none" }, lastSt + 0.5);
+    }
+    // EXIT: sweeper beam crosses L→R, words streak away as it passes them
+    const xs = L.pos.map((p) => p[0]);
+    const x0 = Math.min(...xs) - 46, x1 = Math.max(...xs) + 46;
+    const sw = document.createElement("div");
+    sw.className = "lsweep"; lrStage.appendChild(sw);
+    sw.style.left = x0 + "px"; sw.style.top = (L.pos[0][1] - 58) + "px";
+    tl.set(sw, { opacity: 0.9 }, L.sweepT);
+    tl.to(sw,  { x: x1 - x0, duration: 0.13, ease: "power1.in" }, L.sweepT);
+    tl.to(sw,  { opacity: 0, duration: 0.05 }, L.sweepT + 0.13);
+    L.words.forEach((w, wi) => {
+      const el = line.children[wi];
+      const frac = (L.pos[wi][0] - x0) / Math.max(1, x1 - x0);
+      tl.to(el, { x: 44, opacity: 0, filter: "blur(5px)", duration: 0.11, ease: "power2.in" },
+            L.sweepT + 0.11 * frac);
+    });
+    tl.set(line, { display: "none" }, Math.min(L.sweepT + 0.32, ${(DUR - 0.02).toFixed(3)}));
+  });
+${
+  b.yield
+    ? `  // rail yields while the apex lands (restore only with clear runway)
+  LRAIL.forEach((L) => {
+    if (L.in < ${heroIn.toFixed(3)} + 0.9 && L.sweepT > ${heroIn.toFixed(3)} - 0.3) {
+      const dimT = Math.max(${(heroIn - (b.yield.pre || 0.04)).toFixed(3)}, L.in + 0.05);
+      if (L.sweepT > dimT + 0.25) {
+        tl.to("#" + L.id, { opacity: ${b.yield.dim}, duration: 0.15 }, dimT);
+        const resT = ${(heroIn + (b.yield.post || 0.9)).toFixed(3)};
+        if (resT + 0.3 < L.sweepT) tl.to("#" + L.id, { opacity: 1, duration: 0.25 }, resT);
+      }
+    }
+  });`
+    : ""
+}`;
+  return { css, html, js };
+}
+
+function paradigmStormrail() {
+  // STORMRAIL: rain-washed lower third. Ambient rain = seeded thin streaks
+  // falling on repeating linear cycle tweens (pure f(t), one wind vector,
+  // mid-fall at t0); a second streak set DOUBLES the rain for ~1s after the
+  // strike. Body words arrive with the lightning-kiss motif at low amplitude
+  // (2-frame lit-bright pop + micro settle); emphasis = sheet-lightning double
+  // flash (the bg sky double-kisses at the same beats). Exits wash downward
+  // with the rain (y+22, blur). The visible line dims while the bolt lands and
+  // its text-shadow flips toward the strike for the flash frames.
+  const b = dna.body;
+  const r = b.rain || {};
+  const A = dna.palette.accent;
+  const railTop = H - (b.bottomPx || 98);
+  const sgn = (dna.hero.params || {}).side === "right" ? -1 : 1;
+  const lineData = LINES.map((L) => ({
+    id: "st" + L.id,
+    in: +L.in.toFixed(3),
+    // wash start: just before the next line — but a line facing dead air
+    // washes away early (the demo's r1 exits at lastWord + 1.08s)
+    out: +Math.min(L.out - 0.05, L.words[L.words.length - 1].end + 1.08, DUR - 0.2).toFixed(3),
+    words: L.words.map((w) => [w.display, +w.start.toFixed(3), w.minor ? 1 : 0]),
+  }));
+  const css = `
+  #stscrim { position:absolute; left:0; right:0; top:${H - 180}px; height:180px; opacity:0;
+    background:linear-gradient(to bottom, rgba(6,10,18,0) 0%, rgba(6,10,18,0.45) 45%, rgba(6,10,18,0.62) 100%); }
+  #rain  { position:absolute; inset:0; opacity:${r.opacity ?? 0.08}; }
+  #rain2 { position:absolute; inset:0; opacity:0; }
+  .drop { position:absolute; left:0; top:0; width:2px; border-radius:1px;
+    background:linear-gradient(to bottom, rgba(200,222,244,0) 0%, rgba(214,232,250,0.95) 100%); }
+  .stline { position:absolute; left:${W / 2}px; top:${railTop}px; opacity:0; white-space:nowrap;
+    font-family:'${dna.fonts.body}', sans-serif; font-weight:700; font-size:${b.fontPx}px; line-height:1.15;
+    letter-spacing:${b.letterSpacing || "0.015em"}; color:${dna.palette.body};
+    text-shadow: 0 6px 16px rgba(2,8,18,0.85), 0 2px 4px rgba(2,8,18,0.7), 0 0 14px ${A}47; }
+  .stline .w { display:inline-block; opacity:0; margin:0 0.16em; }`;
+  const html =
+    `      <div id="rain"></div>
+      <div id="stscrim"></div>
+` +
+    lineData.map((L) => `      <div class="stline" id="${L.id}"></div>`).join("\n") +
+    `
+      <div id="rain2"></div>`;
+  const js = `
+  // ---- body paradigm: STORMRAIL (lightning-kiss words, rain-wash exits, ambient rain) ----
+  const I = ${heroIn.toFixed(3)};
+  // ambient rain: seeded streaks on repeating linear cycles (f(t), no random at render)
+  function makeRain(container, n, seed, t0, t1) {
+    const rnd = mulberry32(seed);
+    for (let i = 0; i < n; i++) {
+      const el = document.createElement("div");
+      el.className = "drop"; container.appendChild(el);
+      const x0 = 20 + rnd() * ${W - 40}, d = 0.55 + rnd() * 0.55;
+      const len = 46 + rnd() * 70, frac = rnd();
+      const travel = ${H + 300}, dx = -160; // slanted fall, one wind vector
+      gsap.set(el, { height: len, rotation: 9, x: x0, y: -160 });
+      let t = t0;
+      // partial first cycle so rain is mid-fall at t0
+      tl.fromTo(el, { y: -160 + travel * frac, x: x0 + dx * frac },
+                    { y: ${H + 140}, x: x0 + dx, duration: d * (1 - frac), ease: "none" }, t);
+      t += d * (1 - frac);
+      while (t < t1) {
+        tl.fromTo(el, { y: -160, x: x0 },
+                      { y: ${H + 140}, x: x0 + dx, duration: d, ease: "none" }, t);
+        t += d;
+      }
+    }
+  }
+  makeRain(document.getElementById("rain"),  ${r.count ?? 18}, ${r.seed ?? 9021}, 0, ${(DUR - 0.02).toFixed(2)});
+  makeRain(document.getElementById("rain2"), ${r.count ?? 18}, ${r.seed2 ?? 4477}, ${(heroIn - 0.11).toFixed(3)}, ${Math.min(heroIn + 1.24, DUR - 0.02).toFixed(3)});
+  // rain doubles for ~1s after the strike
+  tl.set("#rain2", { opacity: 0.11 }, I + 0.02);
+  tl.to("#rain2",  { opacity: 0, duration: 0.30 }, ${Math.min(heroIn + 1.02, DUR - 0.34).toFixed(3)});
+
+  // rail scrim (stable reading surface against the busy lower frame)
+  tl.to("#stscrim", { opacity: 1, duration: 0.20 }, 0.05);
+  tl.to("#stscrim", { opacity: 0, duration: 0.16 }, ${(DUR - 0.18).toFixed(3)});
+
+  const SRAIL = ${J(lineData)};
+  SRAIL.forEach((L) => {
+    const line = document.getElementById(L.id);
+    L.words.forEach(([txt]) => {
+      const s = document.createElement("span");
+      s.className = "w"; s.textContent = txt; line.appendChild(s);
+    });
+    gsap.set(line, { xPercent: -50, yPercent: -100 });
+    tl.set(line, { opacity: 1 }, L.words[0][1] - 0.025);
+    L.words.forEach(([txt, st, em], wi) => {
+      const el = line.children[wi];
+      // entrance = the apex motif at low amplitude: lit-bright pop + micro settle
+      tl.set(el, { opacity: 1, y: 4, scale: 1.06, filter: "brightness(2.2)",
+                   transformOrigin: "50% 85%" }, st);
+      tl.to(el, { y: 0, scale: 1, duration: 0.12, ease: "power2.out" }, st + F);
+      tl.to(el, { filter: "brightness(1)", duration: 0.14, ease: "power1.out" }, st + F);
+      if (em && st + 0.20 + 3 * F < ${(DUR - 0.04).toFixed(2)}) { // sheet lightning: 2-frame double flash
+        const t0 = st + 0.20;
+        tl.set(el, { filter: "brightness(1.9)" }, t0);
+        tl.set(el, { filter: "brightness(1.0)" }, t0 + F);
+        tl.set(el, { filter: "brightness(1.8)" }, t0 + 2 * F);
+        tl.to(el,  { filter: "brightness(1)", duration: 0.12 }, t0 + 3 * F);
+      }
+    });
+    // EXIT: wash downward with the rain
+    tl.to(line, { y: 22, opacity: 0, filter: "blur(3px)", duration: 0.18, ease: "power1.in" }, L.out);
+    tl.set(line, { display: "none" }, Math.min(L.out + 0.20, ${(DUR - 0.02).toFixed(2)}));
+  });
+${
+  b.yield
+    ? `  // rail yields while the bolt lands; the visible line's shadow flips toward
+  // the strike for the flash frames (light from the bolt side)
+  SRAIL.forEach((L) => {
+    if (L.in < I + 0.9 && L.out > I - 0.3) {
+      const dimT = Math.max(I - ${(b.yield.pre ?? 0.15).toFixed(2)}, L.in + 0.05);
+      if (L.out > dimT + 0.25) {
+        tl.to("#" + L.id, { opacity: ${b.yield.dim}, duration: 0.12 }, dimT);
+        const resT = I + ${(b.yield.post ?? 0.29).toFixed(2)};
+        if (resT + 0.3 < L.out) tl.to("#" + L.id, { opacity: 1, duration: 0.10 }, resT);
+      }
+    }
+    if (L.in <= I - 2 * F && L.out > I) {
+      tl.set("#" + L.id, { textShadow: "${12 * sgn}px 4px 12px rgba(2,8,18,0.85), 0 0 14px ${A}73" }, I - 2 * F);
+      tl.set("#" + L.id, { textShadow: "0 6px 16px rgba(2,8,18,0.85), 0 2px 4px rgba(2,8,18,0.7), 0 0 14px ${A}47" }, I + 0.09);
+    }
+  });`
+    : ""
+}`;
+  return { css, html, js };
+}
+
+function paradigmHolorail() {
+  // HOLORAIL: a volumetric projection PLATE (scanlined glass slab with corner
+  // brackets + feed tag) is the stable reading surface; it boots like a
+  // projector turning ON (scaleY snap + 1-frame flicker) and breathes a slow
+  // luminance cycle. Body words boot with the apex motif at low amplitude:
+  // instant opacity + RISING sweep reveal (clip wipe), a 1-frame interference
+  // x-glitch, and a constant chromatic-fringe text-shadow. Emphasis words get
+  // a 2-frame projection DROPOUT that restores brighter, then settles. Each
+  // line drifts slowly in rotationY (it IS a projection) and exits with the
+  // projector-cut: brightness pop → collapse to a horizontal slit → to a dot.
+  const b = dna.body;
+  const A = dna.palette.accent,
+    MG = dna.palette.magenta || "#ff5fd6";
+  const plateW = b.plateW || 980,
+    plateH = b.plateH || 96;
+  const plateY = H - (b.bottomPx || 108); // plate center
+  const lineY = plateY + (b.lineDy ?? 9); // line center sits low in the plate
+  const lineData = LINES.map((L, i) => ({
+    id: "hl" + L.id,
+    // projector-cut start: completes (0.15s) before the next line boots;
+    // the last line keeps the demo's end-of-clip runway
+    exit: +(i + 1 < LINES.length ? L.out - 0.15 : Math.min(L.out + 0.07, DUR - 0.18)).toFixed(3),
+    words: L.words.map((w) => [w.display, +w.start.toFixed(3), w.minor ? 1 : 0]),
+  }));
+  const shadowBase = `-1.5px 0 0 ${A}8c, 1.5px 0 0 ${MG}6b, 0 0 16px ${A}80, 0 2px 8px rgba(1,10,16,0.85)`;
+  const shadowEm = `-1.5px 0 0 ${A}cc, 1.5px 0 0 ${MG}99, 0 0 26px ${dna.palette.glowEm || "#A0F2FF"}d9, 0 2px 8px rgba(1,10,16,0.85)`;
+  const css = `
+  #railwrap { position:absolute; inset:0; }
+  #plate { position:absolute; left:${W / 2}px; top:${plateY}px; width:${plateW}px; height:${plateH}px; opacity:0;
+           border-radius:3px;
+           background: linear-gradient(180deg, rgba(4,22,33,0.46) 0%, rgba(6,30,44,0.55) 100%);
+           border: 1px solid ${A}52;
+           box-shadow: 0 0 26px rgba(60,170,210,0.20), inset 0 0 38px ${A}0f; }
+  #pscan { position:absolute; inset:0; border-radius:3px;
+           background: repeating-linear-gradient(180deg, ${A}00 0px, ${A}00 3px, ${A}12 3px, ${A}12 4px); }
+  #ptag { position:absolute; left:14px; top:7px; font-family:'${dna.fonts.tag}', sans-serif;
+          font-weight:400; font-size:11px; letter-spacing:0.32em; color:${A}99; }
+  .crn { position:absolute; width:11px; height:11px; }
+  .crn.a { left:-1px;  top:-1px;    border-left:2px solid ${A}cc; border-top:2px solid ${A}cc; }
+  .crn.b { right:-1px; top:-1px;    border-right:2px solid ${A}cc; border-top:2px solid ${A}cc; }
+  .crn.c { left:-1px;  bottom:-1px; border-left:2px solid ${A}cc; border-bottom:2px solid ${A}cc; }
+  .crn.d { right:-1px; bottom:-1px; border-right:2px solid ${A}cc; border-bottom:2px solid ${A}cc; }
+  .hln { position:absolute; left:${W / 2}px; top:${lineY}px; opacity:0; white-space:nowrap;
+        font-family:'${dna.fonts.body}', sans-serif; font-weight:500; font-size:${b.fontPx}px;
+        line-height:1.15; letter-spacing:${b.letterSpacing || "0.02em"}; }
+  .hln .w { display:inline-block; opacity:0; margin-right:0.3em;
+           color:${dna.palette.body}ed;
+           text-shadow: ${shadowBase}; }`;
+  const html =
+    `      <div id="railwrap">
+        <div id="plate">
+          <div id="pscan"></div>
+          <div id="ptag">${esc(theme.plateTag || b.tag || "VOLUMETRIC FEED // CH-07")}</div>
+          <div class="crn a"></div><div class="crn b"></div>
+          <div class="crn c"></div><div class="crn d"></div>
+        </div>
+` +
+    lineData.map((L) => `        <div class="hln" id="${L.id}"></div>`).join("\n") +
+    `
+      </div>`;
+  // plate breathe: finite yoyo cycles sized to the runway before the end cut
+  const pCut = +(DUR - 0.14).toFixed(3);
+  const breaths = Math.max(1, Math.floor((pCut - 0.5) / 0.8) - 1);
+  const js = `
+  // ---- body paradigm: HOLORAIL (projection plate, sweep-boot words, projector-cut exits) ----
+  gsap.set("#plate", { xPercent: -50, yPercent: -50, transformOrigin: "50% 50%" });
+
+  // plate boots like a projector turning ON (inverse of the projector-cut exit)
+  tl.set("#plate", { opacity: 1 }, 0.10);
+  tl.fromTo("#plate", { scaleY: 0.03 }, { scaleY: 1, duration: 0.13, ease: "expo.out" }, 0.10);
+  tl.set("#plate", { opacity: 0.35 }, 0.155);
+  tl.set("#plate", { opacity: 1 }, 0.195);
+  tl.to("#plate", { opacity: 0.93, duration: 0.8, ease: "sine.inOut", yoyo: true, repeat: ${breaths} }, 0.5);
+
+  const HRAIL = ${J(lineData)};
+  const HSH_BASE = ${J(shadowBase)}, HSH_EM = ${J(shadowEm)};
+  HRAIL.forEach((L) => {
+    const line = document.getElementById(L.id);
+    L.words.forEach(([txt], wi) => {
+      const s = document.createElement("span");
+      s.className = "w"; s.textContent = txt;
+      if (wi === L.words.length - 1) s.style.marginRight = "0";
+      line.appendChild(s);
+    });
+    gsap.set(line, { xPercent: -50, yPercent: -50, transformPerspective: 700, transformOrigin: "50% 50%" });
+    tl.set(line, { opacity: 1 }, L.words[0][1] - 0.03);
+
+    L.words.forEach(([txt, st, em], wi) => {
+      const el = line.children[wi];
+      // BOOT (low-amplitude apex motif): instant opacity + vertical sweep reveal
+      tl.set(el, { opacity: 1, clipPath: "inset(-20% -10% 100% -10%)" }, st);
+      tl.to(el, { clipPath: "inset(-20% -10% -30% -10%)", duration: 0.15, ease: "power2.out" }, st);
+      tl.set(el, { clipPath: "none" }, st + 0.16);
+      // 1-frame interference glitch
+      tl.set(el, { x: 2 },  st + 0.05);
+      tl.set(el, { x: -2 }, st + 0.09);
+      tl.set(el, { x: 0 },  st + 0.13);
+      // EMPHASIS: 2-frame projection dropout, restores brighter (delay shrinks
+      // near the line's projector-cut so dropout+restore always complete)
+      if (em) {
+        const d = Math.min(${b.emphDelay ?? 0.34}, L.exit - st - 0.183);
+        if (d >= 0.083) {
+          tl.set(el, { opacity: 0.2 }, st + d);
+          tl.set(el, { opacity: 1, color: ${J(dna.palette.em || "#f4feff")}, textShadow: HSH_EM }, st + d + 0.083);
+          const sb = st + d + 0.51;
+          if (sb < L.exit - 0.05)
+            tl.to(el, { color: ${J((dna.palette.body || "#c7f1ff") + "ed")}, textShadow: HSH_BASE,
+                        duration: Math.min(0.4, ${(DUR - 0.04).toFixed(2)} - sb), ease: "power1.in" }, sb);
+        }
+      }
+    });
+
+    // slow rotateY drift — it IS a projection
+    const dS = L.words[0][1] + 0.08;
+    const dD = Math.max(0.3, L.exit - dS - 0.04);
+    tl.to(line, { keyframes: { rotationY: [-3.5, 3.5, -2.5] }, duration: dD, ease: "none" }, dS);
+
+    // EXIT: projector cut — line collapses to a bright slit, then to a dot
+    const ex = L.exit;
+    tl.set(line, { filter: "brightness(2.2)" }, ex);
+    tl.to(line, { scaleY: 0.045, duration: 0.07, ease: "power3.in" }, ex + 0.005);
+    tl.to(line, { scaleX: 0.015, duration: 0.06, ease: "power3.in" }, ex + 0.08);
+    tl.set(line, { opacity: 0, display: "none" }, ex + 0.15);
+  });
+${
+  b.yield
+    ? `  // the whole rail (plate included) yields while the apex lands
+  tl.to("#railwrap", { opacity: ${b.yield.dim}, duration: 0.18, ease: "power1.in" }, ${(heroIn - (b.yield.pre ?? 0.18)).toFixed(3)});
+  tl.to("#railwrap", { opacity: 1, duration: 0.22, ease: "power1.out" }, ${(heroIn + (b.yield.post ?? 0.37)).toFixed(3)});`
+    : ""
+}
+  // end: the plate itself gets the projector cut
+  tl.set("#plate", { filter: "brightness(2.2)" }, ${pCut});
+  tl.to("#plate", { scaleY: 0.03, duration: 0.07, ease: "power3.in" }, ${(pCut + 0.005).toFixed(3)});
+  tl.to("#plate", { scaleX: 0.012, duration: 0.05, ease: "power3.in" }, ${(pCut + 0.08).toFixed(3)});
+  tl.set("#plate", { opacity: 0 }, ${Math.min(pCut + 0.12, DUR - 0.02).toFixed(3)});`;
+  return { css, html, js };
+}
+
+function paradigmPlanktonrail() {
+  // PLANKTONRAIL: deep-sea lower third on TWO coexisting row slots — even
+  // lines ride the upper row, odd lines the lower, so couplets share the
+  // water like drifting strata. Words GLOW ON like jellyfish (the apex bloom
+  // at low amplitude): 2-frame opacity + radial bloom from center (scale
+  // 0.92→1, blur 5→0, brightness 0.45→1) while a cyan glow text-shadow grows
+  // in; emphasis words pulse a slow DOUBLE-BEAT (jellyfish propulsion). Every
+  // line floats on a gentle y drift and exits by SINKING (+15px, dimming).
+  // Furniture: seeded plankton motes drift f(t) in the open water; the ones
+  // seeded in a ring around the apex get ATTRACTED to the bloom and brighten
+  // as it lands. The line feeding the apex dims while the bloom owns the
+  // frame (no restore — it exits dimmed, by design); a line entering during
+  // the hold arrives dimmed and restores once the bloom settles.
+  const b = dna.body;
+  const A = dna.palette.accent,
+    VIO = dna.palette.violet || "#9d7bff";
+  const rowB = H - (b.bottomPx || 70); // lower row center
+  const rowA = rowB - (b.rowDy ?? 58); // upper row center
+  const m = b.motes || {};
+  const yld = b.yield || {};
+  // active line = the one feeding the apex (last line that starts before it)
+  const activeIdx = LINES.reduce((a, L, i) => (L.words[0].start < heroIn ? i : a), 0);
+  const lineData = LINES.map((L, i) => {
+    // two-row coexistence: a line clears when its ROW is next needed (line
+    // i+2) or ~0.3s after its couplet finishes speaking (staggered pair
+    // exits); a pre-apex leftover clears just before the bloom lands (the
+    // feeding line stays and yields instead); the last line floats to the end
+    const pairLast = LINES[Math.min(i - (i % 2) + 1, LINES.length - 1)];
+    const pairEnd = pairLast.words[pairLast.words.length - 1].end;
+    let out =
+      i + 2 < LINES.length
+        ? Math.min(LINES[i + 2].in - 0.15, pairEnd + 0.28 + (i % 2) * 0.12)
+        : i + 1 < LINES.length
+          ? LINES[i + 1].words[0].start - 0.05
+          : null;
+    if (i !== activeIdx && out != null && out > heroIn - 0.25 && L.in < heroIn) out = heroIn - 0.21;
+    return {
+      id: "pl" + L.id,
+      top: i % 2 ? rowB : rowA,
+      in: +L.in.toFixed(3),
+      out: out == null ? null : +Math.min(out, DUR - 0.36).toFixed(3),
+      words: L.words.map((w) => [w.display, +w.start.toFixed(3), w.minor ? 1 : 0]),
+    };
+  });
+  const shOn = `0 2px 10px rgba(1,10,20,0.85), 0 0 16px ${A}cc`;
+  const shEm = `0 2px 10px rgba(1,10,20,0.85), 0 0 18px ${A}f2, 0 0 34px ${VIO}8c`;
+  const css = `
+  .mote { position:absolute; border-radius:50%; background:${dna.palette.mote || "#96f5e8"}f2;
+          box-shadow: 0 0 7px 2px ${A}bf; opacity:0; }
+  .pln { position:absolute; left:${W / 2}px; white-space:nowrap;
+         font-family:'${dna.fonts.body}', sans-serif; font-weight:400; font-size:${b.fontPx}px;
+         line-height:1.2; color:${dna.palette.body}; }
+  .pln .w { display:inline-block; position:relative; margin-right:0.30em; opacity:0; }
+  .pln .w:last-child { margin-right:0; }
+  .pln .ink { display:inline-block;
+         text-shadow: 0 2px 10px rgba(1,10,20,0.85), 0 0 0px ${A}00; }
+  .pln .w.em .ink { color:${dna.palette.em || "#f4fffd"};
+         text-shadow: 0 2px 10px rgba(1,10,20,0.85), 0 0 0px ${A}00, 0 0 0px ${VIO}00; }`;
+  const html =
+    `      <div id="mfield"></div>
+` +
+    lineData
+      .map((L) => `      <div class="pln" id="${L.id}" style="top:${L.top}px"></div>`)
+      .join("\n");
+  const js = `
+  // ---- body paradigm: PLANKTONRAIL (jellyfish glow-on, two-row float, sinking exits) ----
+  const I = ${heroIn.toFixed(3)};
+  const mrnd = mulberry32(${m.seed ?? 2929});
+  const mf = document.getElementById("mfield");
+  // plankton motes: seeded drift walks f(t); the first ${m.near ?? 5} seed a
+  // ring around the bloom heart and get ATTRACTED to it as the apex lands
+  const APX = ${HG.x}, APY = ${HG.y};
+  for (let i = 0; i < ${m.count ?? 12}; i++) {
+    const near = i < ${m.near ?? 5};
+    const el = document.createElement("div");
+    el.className = "mote"; mf.appendChild(el);
+    let L, T;
+    if (near) {
+      const ang = (i / ${m.near ?? 5}) * Math.PI * 2 + 0.55 + mrnd() * 0.5;
+      const r = (150 + mrnd() * 75) * ${(HG.fontPx / 120).toFixed(3)};
+      L = APX + Math.cos(ang) * r * 1.35;
+      T = APY + Math.sin(ang) * r * 0.85;
+    } else {
+      L = 60 + mrnd() * ${W - 120};
+      T = 60 + mrnd() * ${H - 260};
+    }
+    L = Math.max(20, Math.min(${W - 25}, L)); T = Math.max(25, Math.min(${H - 175}, T));
+    const s = 2 + Math.round(mrnd() * 2);
+    gsap.set(el, { width: s, height: s, left: L, top: T });
+    const tin = 0.04 + mrnd() * 0.35;
+    tl.to(el, { opacity: 0.1, duration: 0.3, ease: "power1.out" }, tin);
+    // slow seeded drift walk
+    const a1 = (mrnd() - 0.5) * 36, a2 = a1 + (mrnd() - 0.5) * 36, a3 = a2 + (mrnd() - 0.5) * 30;
+    const b1 = (mrnd() - 0.5) * 28, b2 = b1 + (mrnd() - 0.5) * 28, b3 = b2 + (mrnd() - 0.5) * 24;
+    const dEnd = near ? I - 0.25 : ${(DUR - 0.34).toFixed(3)};
+    tl.to(el, { keyframes: { x: [a1, a2, a3], y: [b1, b2, b3],
+                             opacity: [0.13, 0.07, 0.11] },
+               duration: dEnd - (tin + 0.32), ease: "sine.inOut" }, tin + 0.32);
+    if (near) {
+      // ATTRACTION: pulled toward the bloom, brightening
+      const tx = (APX - L) * 0.72 + (mrnd() - 0.5) * 24;
+      const ty = (APY - T) * 0.72 + (mrnd() - 0.5) * 18;
+      tl.to(el, { x: tx, y: ty, opacity: 0.42, scale: 1.7,
+                 duration: 0.75, ease: "power2.in" }, I - 0.19 + i * 0.045);
+      tl.to(el, { keyframes: { x: [tx + 4, tx - 3, tx + 2], y: [ty - 4, ty + 3, ty - 2] },
+                 duration: 0.32, ease: "sine.inOut" }, ${Math.min(heroIn + 0.59, DUR - 0.42).toFixed(3)});
+      tl.to(el, { y: ty + 18, opacity: 0, duration: 0.18, ease: "power1.in" }, ${(DUR - 0.22).toFixed(3)});
+    } else {
+      tl.to(el, { y: "+=14", opacity: 0, duration: 0.16, ease: "power1.in" }, ${(DUR - 0.2).toFixed(3)});
+    }
+  }
+
+  // ---- body lines: jellyfish glow-on, floating couplet rows, sinking exits ----
+  const SH_ON = ${J(shOn)}, SH_EM = ${J(shEm)};
+  const PRAIL = ${J(lineData)};
+  PRAIL.forEach((L) => {
+    const line = document.getElementById(L.id);
+    L.words.forEach(([txt, , em]) => {
+      const w = document.createElement("span");
+      w.className = "w" + (em ? " em" : "");
+      const ink = document.createElement("span"); ink.className = "ink";
+      ink.textContent = txt; w.appendChild(ink); line.appendChild(w);
+    });
+    gsap.set(line, { xPercent: -50, yPercent: -50 });
+
+    // gentle float while held (everything in the abyss floats)
+    const t0 = Math.max(0.02, L.words[0][1] - 0.02);
+    const D = (L.out ?? ${(DUR - 0.06).toFixed(3)}) - t0 - 0.04;
+    const yArr = D > 1.5 ? [-2, 2, -3, 1, 3, 0] : [-2, 1, -2, 0];
+    tl.to(line, { keyframes: { y: yArr }, duration: D, ease: "sine.inOut" }, t0);
+
+    L.words.forEach(([txt, st, em], wi) => {
+      const w = line.children[wi], ink = w.children[0];
+      // GLOW ON: radial bloom from word center (the apex bloom at low amplitude)
+      tl.set(w, { opacity: 1 }, st - 0.01);
+      tl.fromTo(ink, { opacity: 0 }, { opacity: 1, duration: 0.083, ease: "none" }, st);
+      tl.fromTo(ink, { scale: 0.92, filter: "blur(5px) brightness(0.45)" },
+                { scale: 1, filter: "blur(0px) brightness(1)", duration: 0.4, ease: "sine.out" }, st);
+      tl.to(ink, { textShadow: em ? SH_EM : SH_ON, duration: 0.4, ease: "sine.out" }, st);
+      // EMPHASIS: slow double-beat pulse (jellyfish propulsion)
+      if (em && st + 1.07 <= ${(DUR - 0.09).toFixed(3)}) {
+        tl.to(ink, { keyframes: {
+            filter: ["blur(0px) brightness(1.4)", "blur(0px) brightness(1.06)",
+                     "blur(0px) brightness(1.5)", "blur(0px) brightness(1.12)",
+                     "blur(0px) brightness(1)"],
+            scale: [1.035, 1.01, 1.05, 1.015, 1] },
+          duration: 0.55, ease: "sine.inOut" }, st + 0.52);
+      }
+    });
+
+    // EXIT: light sinks — drift down +15 while dimming
+    if (L.out != null) {
+      tl.to(line, { y: 15, opacity: 0, duration: 0.3, ease: "power1.in" }, L.out);
+      tl.set(line, { display: "none" }, Math.min(L.out + 0.32, ${(DUR - 0.02).toFixed(2)}));
+    }
+  });
+
+  // rail yields to the apex landing: the feeding line dims (and exits dimmed
+  // unless it has ≥0.9s of hold left); a line entering during the hold
+  // arrives at ${yld.enter ?? 0.8} and restores once the bloom settles
+  PRAIL.forEach((L, i) => {
+    if (i === ${activeIdx} && (L.out ?? 99) > I - ${(yld.pre ?? 0.17).toFixed(2)} + 0.25) {
+      tl.to("#" + L.id, { opacity: ${yld.dim ?? 0.55}, duration: 0.18, ease: "power1.out" }, I - ${(yld.pre ?? 0.17).toFixed(2)});
+      if ((L.out ?? 99) > I + 1.2)
+        tl.to("#" + L.id, { opacity: 1, duration: 0.25, ease: "power1.out" }, I + 0.9);
+    }
+    if (L.in > I && L.in < I + 0.9) {
+      tl.set("#" + L.id, { opacity: ${yld.enter ?? 0.8} }, L.in);
+      tl.to("#" + L.id, { opacity: 1, duration: 0.25, ease: "power1.out" },
+            Math.min(Math.max(I + ${(yld.post ?? 0.63).toFixed(2)}, L.in + 0.1), ${(DUR - 0.28).toFixed(2)}));
+    }
+  });`;
+  return { css, html, js };
+}
+
+function paradigmSheenrail() {
+  // SHEENRAIL: iridescent silk lower third on TWO coexisting row slots — even
+  // lines ride the upper row (H − bottomPx − rowDy), odd lines the lower
+  // (H − bottomPx), so couplets read together like a woven pair. Words are
+  // aurora-gradient ink (background-clip:text over a rose→teal→violet wash
+  // whose backgroundPosition DRIFTS f(t) across the whole clip — the body's
+  // hold life) above a blurred dark understroke; entrance = 2-frame opacity
+  // + y8 settle (the ribbon's flow at low amplitude); emphasis = ONE bright
+  // sheen sweep marching through the word + a brightness pulse. Exits
+  // dissolve UPWARD (y−12, blur 3, staggered) and each line releases 3-4
+  // drifting light streaks that float up from its row. A soft radial band
+  // scrim sits under the rows (stable reading surface); the whole rail —
+  // band included — yields while the ribbon writes. Line scheduling mirrors
+  // planktonrail's two-row coexistence: a row clears when next needed (line
+  // i+2) or shortly after its couplet finishes speaking (staggered pair
+  // exits); the pre-apex leftover clears at heroIn−0.32 while the FEEDING
+  // line stays (it dims with the railwrap yield); the last line holds.
+  const b = dna.body;
+  const PAL = [dna.palette.rose, dna.palette.accent, dna.palette.violet];
+  const rowB = H - (b.bottomPx || 76); // lower row TOP edge
+  const rowA = rowB - (b.rowDy ?? 58); // upper row TOP edge
+  const band = b.band || {};
+  const bandW = band.w ?? 860,
+    bandH = band.h ?? 170;
+  const bandCy = Math.round((rowA + rowB + b.fontPx * 1.1) / 2);
+  const yld = b.yield || {};
+  // active line = the one feeding the apex (last line that starts before it)
+  const activeIdx = LINES.reduce((a, L, i) => (L.words[0].start < heroIn ? i : a), 0);
+  const lineData = LINES.map((L, i) => {
+    const pairLast = LINES[Math.min(i - (i % 2) + 1, LINES.length - 1)];
+    const pairEnd = pairLast.words[pairLast.words.length - 1].end;
+    let out =
+      i + 2 < LINES.length
+        ? Math.min(LINES[i + 2].in - 0.15, pairEnd + 0.23 + (i % 2) * 0.17)
+        : i + 1 < LINES.length
+          ? LINES[i + 1].words[0].start - 0.11
+          : null;
+    if (i !== activeIdx && out != null && out > heroIn - 0.25 && L.in < heroIn) out = heroIn - 0.32;
+    return {
+      id: "sk" + L.id,
+      top: i % 2 ? rowB : rowA,
+      out: out == null ? null : +Math.min(out, DUR - 0.4).toFixed(3),
+      words: L.words.map((w) => [w.display, +w.start.toFixed(3), w.minor ? 1 : 0]),
+    };
+  });
+  const css = `
+  #skwrap { position:absolute; inset:0; }
+  #band { position:absolute; left:${W / 2}px; top:${bandCy}px; width:${bandW}px; height:${bandH}px;
+          margin-left:-${bandW / 2}px; margin-top:-${bandH / 2}px; opacity:0;
+          background: radial-gradient(50% 50% at 50% 50%, rgba(6,10,28,0.55) 0%, rgba(6,10,28,0.3) 55%, rgba(6,10,28,0) 78%); }
+  .skl { position:absolute; left:${W / 2}px; white-space:nowrap;
+         font-family:'${dna.fonts.body}', serif; font-weight:500; font-size:${b.fontPx}px;
+         line-height:1.1; }
+  .skl .w { position:relative; display:inline-block; margin-right:0.3em; opacity:0; }
+  .skl .w:last-child { margin-right:0; }
+  .skl .sh { position:absolute; left:0; top:3px; color:rgba(4,8,22,0.7);
+         filter:blur(3px); z-index:0; }
+  .skl .grad { position:relative; z-index:1;
+         background-image: linear-gradient(100deg, ${PAL[0]} 0%, ${PAL[1]} 32%, ${PAL[2]} 64%, ${PAL[0]} 96%);
+         background-size: 300% 100%;
+         -webkit-background-clip: text; background-clip: text; color: transparent; }
+  .skl .shine { position:absolute; left:0; top:0; z-index:2; opacity:0;
+         background-image: linear-gradient(100deg, rgba(255,255,255,0) 40%, rgba(255,255,255,0.95) 50%, rgba(255,255,255,0) 60%);
+         background-size: 260% 100%;
+         -webkit-background-clip: text; background-clip: text; color: transparent; }
+  .streak { position:absolute; width:3px; border-radius:2px; opacity:0; filter:blur(2px); }`;
+  const html =
+    `      <div id="skwrap">
+        <div id="band"></div>
+` +
+    lineData
+      .map((L) => `        <div class="skl" id="${L.id}" style="top:${L.top}px"></div>`)
+      .join("\n") +
+    `
+      </div>`;
+  const js = `
+  // ---- body paradigm: SHEENRAIL (flow-on entrance, sheen-sweep emphasis, dissolve-to-streaks exits) ----
+  const I = ${heroIn.toFixed(3)};
+  const srnd = mulberry32(${b.seed ?? 20260611});
+  const stg = document.getElementById("stage");
+  const PAL = ${J(PAL)};
+  const SRAIL = ${J(lineData)};
+  tl.to("#band", { opacity: 1, duration: 0.35, ease: "sine.out" }, 0.12);
+  const allGrads = [];
+  SRAIL.forEach((L) => {
+    const line = document.getElementById(L.id);
+    const wraps = [];
+    L.words.forEach(([txt, st, em]) => {
+      const w = document.createElement("span"); w.className = "w";
+      const sh = document.createElement("span"); sh.className = "sh"; sh.textContent = txt;
+      const g  = document.createElement("span"); g.className = "grad"; g.textContent = txt;
+      const sn = document.createElement("span"); sn.className = "shine"; sn.textContent = txt;
+      w.appendChild(sh); w.appendChild(g); w.appendChild(sn);
+      line.appendChild(w); wraps.push(w); allGrads.push(g);
+      // FLOW ON: 2-frame opacity + y8 settle (the ribbon's flow at low amplitude)
+      tl.fromTo(w, { opacity: 0 }, { opacity: 1, duration: 2 * F, ease: "none" }, st);
+      tl.fromTo(w, { y: 8 }, { y: 0, duration: 0.38, ease: "sine.out" }, st);
+      // EMPHASIS: the sheen pulses bright once through the word
+      if (em) {
+        const pt = st + 0.16;
+        tl.set(sn, { opacity: 1 }, pt);
+        tl.fromTo(sn, { backgroundPosition: "-80% 50%" },
+                  { backgroundPosition: "180% 50%", duration: 0.42, ease: "power2.inOut" }, pt);
+        tl.to(sn, { opacity: 0, duration: 0.12, ease: "none" }, pt + 0.34);
+        tl.to(g, { keyframes: { filter: ["brightness(1)", "brightness(1.55)", "brightness(1)"] },
+                   duration: 0.42, ease: "none" }, pt);
+      }
+    });
+    gsap.set(line, { xPercent: -50 });
+    // EXIT: the line dissolves upward and releases drifting light streaks
+    if (L.out != null) {
+      tl.to(wraps, { opacity: 0, y: -12, filter: "blur(3px)",
+                     duration: 0.32, ease: "power1.in", stagger: 0.035 }, L.out);
+      tl.set(line, { display: "none" }, L.out + 0.6);
+      const nS = ${b.streaks ?? 4};
+      for (let i = 0; i < nS; i++) {
+        const s = document.createElement("div"); s.className = "streak"; stg.appendChild(s);
+        const c = PAL[i % 3];
+        const x = ${W / 2} + (i - (nS - 1) / 2) * 95 + (srnd() - 0.5) * 50;
+        const hh = 40 + Math.round(srnd() * 28);
+        gsap.set(s, { left: x, top: L.top + 14, height: hh,
+                      background: "linear-gradient(to top, rgba(255,255,255,0) 0%, " + c + " 50%, rgba(255,255,255,0) 100%)" });
+        tl.fromTo(s, { y: 14 },
+          { keyframes: { opacity: [0, 0.7, 0], y: [14, -28, -78] },
+            duration: 0.62, ease: "power1.out" }, Math.min(L.out + 0.04 + i * 0.05, ${(DUR - 0.66).toFixed(3)}));
+      }
+    }
+  });
+  // continuous iridescent sheen drift f(t) — the body's hold life
+  tl.fromTo(allGrads, { backgroundPosition: "0% 50%" },
+            { backgroundPosition: "300% 50%", duration: ${(DUR - 0.04).toFixed(3)}, ease: "none" }, 0);
+  // rail yields — band included — while the ribbon writes (apex owns the frame)
+  tl.to("#skwrap", { opacity: ${yld.dim ?? 0.5}, duration: 0.2, ease: "sine.in" }, I - ${(yld.pre ?? 0.16).toFixed(2)});
+  tl.to("#skwrap", { opacity: 1, duration: 0.3, ease: "sine.out" }, I + ${(yld.post ?? 0.62).toFixed(2)});`;
+  return { css, html, js };
+}
+
+function paradigmScoperail() {
+  // SCOPERAIL: oscilloscope lower third. A dark phosphor scope band (HUD
+  // readouts, graticule) hosts an ALWAYS-ALIVE waveform — an SVG polyline
+  // rebuilt from baked point-set states (seeded pseudo-RMS envelope: speech
+  // grows it, silence flattens it, every word arrival kicks a local gaussian
+  // burst for ~3 frames; the hero words kick WIDE bursts where the trace
+  // surges off the scope to write). Body lines (phosphor mono) sit on the
+  // band above the trace and wipe in L→R over reserved-width slots (the apex
+  // pen-write at low amplitude) with a 2-frame just-traced flash; emphasis
+  // words get a ticking frequency-readout chip; the trig LED blinks on every
+  // word arrival. Lines collapse INTO the waveform on exit. At the FINAL word
+  // the trace explodes to max-amp chaos, flatlines, collapses to a single dot
+  // and `body.siglost` stamps — the scope dies with the clip.
+  const b = dna.body;
+  const A = dna.palette.accent,
+    BRT = dna.palette.bright || "#d6ffe4",
+    FLSH = dna.palette.flash || "#eafff2",
+    EM = dna.palette.em || "#ffb347",
+    HUD = dna.palette.hud || "#2f8f55";
+  const bandH = b.bandH || 164;
+  const bandTop = H - bandH;
+  const waveH = b.waveH || 84;
+  const NZ = +LASTWORD.start.toFixed(3); // the scope-death beat
+  // line windows: exits collapse into the trace — early into dead air
+  // (lastWordStart+0.67), else just before the next line needs the slot
+  const lineData = LINES.map((L, i) => {
+    const lastSt = L.words[L.words.length - 1].start;
+    const next = LINES[i + 1];
+    const out = next
+      ? +Math.min(next.in - 0.05, lastSt + 0.67).toFixed(3)
+      : +Math.min(NZ + 0.33, DUR - 0.2).toFixed(3);
+    return {
+      id: "sc" + L.id,
+      in: +L.in.toFixed(3),
+      out,
+      words: L.words.map((w) => [
+        w.display,
+        +w.start.toFixed(3),
+        w.minor ? 1 : 0,
+        Math.abs(w.start - NZ) < 0.001 ? 1 : 0, // the death word settles hot
+      ]),
+    };
+  });
+  // waveform burst map BAKED from measured glyph metrics (slot centers) +
+  // the hero kick positions (the trace surges wide where the apex writes)
+  const GAPem = 0.32;
+  const burst = []; // [t, x, big]
+  LINES.forEach((L) => {
+    const ws = L.words.map((w) => wordPx(w.display, dna.fonts.body, b.fontPx, 0));
+    const totalW = ws.reduce((a, c) => a + c, 0) + GAPem * b.fontPx * (L.words.length - 1);
+    let x = W / 2 - totalW / 2;
+    L.words.forEach((w, i) => {
+      burst.push([+w.start.toFixed(3), +(x + ws[i] / 2).toFixed(1), 0]);
+      x += ws[i] + GAPem * b.fontPx;
+    });
+  });
+  if (!heroInline)
+    for (let k = 0; k < hero.len; k++) {
+      const hx = HG.x + (hero.len === 1 ? 0 : (k / (hero.len - 1)) * 0.6 * (HG.halfW || 300));
+      burst.push([+tWords[hero.idx + k].start.toFixed(3), +hx.toFixed(1), 1]);
+    }
+  const css = `
+  #scband { position:absolute; left:0; top:${bandTop}px; width:${W}px; height:${bandH}px; opacity:0;
+            background: rgba(0,12,4,0.58); border-top:1px solid ${A}4d;
+            box-shadow: 0 -8px 30px rgba(0,0,0,0.35); }
+  .schud { position:absolute; top:6px; font-family:'${dna.fonts.tag}', monospace; font-size:20px;
+           color:${HUD}; letter-spacing:2px; }
+  #schudL { left:24px; }
+  #schudR { right:24px; }
+  #sctrig { display:inline-block; width:10px; height:10px; border-radius:50%;
+            background:${EM}; box-shadow:0 0 6px ${EM}cc; margin-left:8px; opacity:0.45; }
+  #scgrat { position:absolute; left:0; top:${b.waveTop || 80}px; width:${W}px; height:${waveH}px; opacity:0.6;
+            background-image:
+              repeating-linear-gradient(90deg, ${A}12 0 1px, transparent 1px 80px),
+              linear-gradient(180deg, transparent ${Math.round(waveH / 2 - 1)}px, ${A}1a ${Math.round(waveH / 2 - 1)}px ${Math.round(waveH / 2 + 1)}px, transparent ${Math.round(waveH / 2 + 1)}px); }
+  #scwavewrap { position:absolute; left:0; top:${b.waveTop || 80}px; width:${W}px; height:${waveH}px; }
+  #scwave { filter: drop-shadow(0 0 5px ${A}bf); }
+  .scln { position:absolute; left:0; top:${b.lineDy || 34}px; width:${W}px; text-align:center;
+          font-family:'${dna.fonts.body}', monospace; font-size:${b.fontPx}px; line-height:${Math.round(b.fontPx * 1.1)}px;
+          color:${A}; text-shadow:0 0 8px ${A}73;
+          white-space:nowrap; opacity:0; }
+  .scln .w { display:inline-block; vertical-align:bottom; white-space:nowrap;
+             margin-right:${GAPem}em; position:relative; }
+  .scln .sz { visibility:hidden; }
+  .scln .clip { position:absolute; left:0; top:0; overflow:hidden; white-space:nowrap; width:0; }
+  .scchip { position:absolute; left:50%; top:-26px; width:130px; margin-left:-65px;
+            height:24px; font-family:'${dna.fonts.tag}', monospace; font-size:21px;
+            color:${EM}; text-shadow:0 0 6px ${EM}99; opacity:0; }
+  .scchip .cv { position:absolute; left:0; top:0; width:100%; text-align:center; opacity:0; }
+  #scdot { position:absolute; left:${W / 2 - 6}px; top:${bandTop + (b.waveTop || 80) + Math.round(waveH / 2) - 4}px;
+           width:9px; height:9px; border-radius:50%; background:${BRT}; opacity:0;
+           box-shadow:0 0 8px ${A}, 0 0 22px ${A}e6; }
+  #scsiglost { position:absolute; left:0; top:${bandTop + (b.waveTop || 80)}px; width:${W}px; text-align:center;
+               font-family:'${dna.fonts.tag}', monospace; font-size:24px; letter-spacing:6px;
+               color:${EM}; text-shadow:0 0 10px ${EM}b3; opacity:0; }`;
+  const html =
+    `      <div id="scband">
+        <div class="schud" id="schudL">${esc(b.hudL || "SPECTRUM // CH1")}</div>
+        <div class="schud" id="schudR">${esc(b.hudR || FPS + ".0 kS/s · TRIG")}<span id="sctrig"></span></div>
+        <div id="scgrat"></div>
+        <div id="scwavewrap">
+          <svg width="${W}" height="${waveH}" viewBox="0 0 ${W} ${waveH}">
+            <polyline id="scwave" fill="none" stroke="${A}" stroke-width="2.5"
+                      stroke-linejoin="round" points=""/>
+          </svg>
+        </div>
+` +
+    lineData.map((L) => `        <div class="scln" id="${L.id}"></div>`).join("\n") +
+    `
+      </div>
+      <div id="scsiglost">${esc(b.siglost || "— SIGNAL LOST —")}</div>
+      <div id="scdot"></div>`;
+  const js = `
+  // ---- body paradigm: SCOPERAIL (trace-wipe words, waveform alive all clip) ----
+  const rnd = mulberry32(${b.waveSeed || 7});
+  const NZ = ${NZ.toFixed(3)}, ENDC = ${(DUR - 0.02).toFixed(3)};
+  const BURST = ${J(burst)};            // [t, x, big] — word arrivals kick the trace
+  const allT = BURST.map((q) => q[0]);
+  const burstAt = {}; const bigAt = {};
+  BURST.forEach(([t, x, big]) => { burstAt[t] = x; if (big) bigAt[t] = 1; });
+
+  // ===== baked waveform states (pure f(t) + seeded jitter; ~2 states/word frame) =====
+  const timesSet = [];
+  let t0 = 0;
+  while (t0 < NZ - 0.015) { timesSet.push(t0); t0 += 1 / 12; }
+  allT.forEach((wt) => { [wt, wt + F, wt + 2 * F].forEach((x) => { if (x < NZ - 0.015) timesSet.push(x); }); });
+  for (let te = NZ - 0.01; te <= Math.min(NZ + 0.311, ENDC); te += F) timesSet.push(te);
+  timesSet.push(Math.min(NZ + 0.325, ENDC), Math.min(NZ + 0.35, ENDC));
+  timesSet.sort((a, b2) => a - b2);
+  const times = timesSet.filter((x, i) => i === 0 || x - timesSet[i - 1] > 0.02);
+  const NPTS = ${Math.round(W / 20) + 1}, MIDY = ${Math.round(waveH / 2)};
+  function speechEnv(t) {
+    let e = 0;
+    allT.forEach((wt) => {
+      const g = Math.exp(-Math.pow((t - wt - 0.10) / 0.21, 2));
+      if (g > e) e = g;
+    });
+    return e;
+  }
+  const wavePts = [];
+  times.forEach((t) => {
+    const boom = t > NZ - 0.007 && t < NZ + 0.308;
+    const flat = t >= NZ + 0.32;
+    const baseAmp = flat ? 0.5 : (boom ? 34 : 2.2 + 15 * speechEnv(t));
+    const pts = [];
+    for (let i = 0; i < NPTS; i++) {
+      const x = i * 20;
+      let amp = baseAmp;
+      if (!boom && !flat) {
+        allT.forEach((wt) => {
+          if (t >= wt - 0.005 && t <= wt + 0.13) {
+            const big = bigAt[wt];
+            amp += (big ? 30 : 20) * Math.exp(-Math.pow((x - burstAt[wt]) / (big ? 240 : 95), 2));
+          }
+        });
+      }
+      const jit = (rnd() - 0.5) * 2;
+      let y = amp * (0.52 * Math.sin(i * 0.55 + t * 16.2 + 0.7)
+                   + 0.42 * Math.sin(i * 1.27 - t * 23.5 + 2.1)
+                   + (boom ? 0.85 : 0.42) * jit);
+      if (y > MIDY - 4) y = MIDY - 4; if (y < -(MIDY - 4)) y = -(MIDY - 4);
+      pts.push(x + "," + (MIDY + y).toFixed(1));
+    }
+    wavePts.push([t, pts.join(" ")]);
+  });
+  const scwave = document.getElementById("scwave");
+  scwave.setAttribute("points", wavePts[0][1]);
+  wavePts.forEach(([t, str]) => { tl.set(scwave, { attr: { points: str } }, Math.min(t, ENDC)); });
+
+  // ===== scope power-on =====
+  tl.fromTo("#scband", { opacity: 0 }, { opacity: 1, duration: 0.12, ease: "power1.out" }, 0.02);
+  tl.fromTo("#scwavewrap", { scaleX: 0.04, transformOrigin: "50% 50%" },
+            { scaleX: 1, duration: 0.22, ease: "power2.out" }, 0.04);
+${
+  b.yield && !heroInline
+    ? `
+  // rail yields while the apex trace writes (band carries lines + wave + HUD)
+  tl.to("#scband", { opacity: ${b.yield.dim}, duration: 0.18, ease: "power1.in" }, ${Math.max(heroIn - (b.yield.pre || 0.13), 0.2).toFixed(3)});
+  tl.to("#scband", { opacity: 1, duration: 0.25, ease: "power1.out" }, ${Math.min(heroIn + (b.yield.post || 0.97), DUR - 0.4).toFixed(3)});`
+    : ""
+}
+
+  // ===== body lines: trace-wipe entrances over reserved-width slots =====
+  const SRAIL = ${J(lineData)};
+  function chipVals(r, idx) {
+    if (idx % 2 === 0) {
+      let v = 150 + Math.round(r() * 250); const a = [v];
+      v += 300 + Math.round(r() * 200); a.push(v);
+      v += 200 + Math.round(r() * 150); a.push(v);
+      return a.map((x) => x + " Hz");
+    }
+    let v = 0.3 + Math.round(r() * 3) * 0.1; const a = [v];
+    v += 0.4 + Math.round(r() * 2) * 0.1; a.push(v);
+    v += 0.2 + Math.round(r() * 2) * 0.1; a.push(v);
+    return a.map((x) => x.toFixed(1) + " kHz");
+  }
+  const crnd = mulberry32(${b.chipSeed || 11});
+  let chipIdx = 0;
+  SRAIL.forEach((L) => {
+    const line = document.getElementById(L.id);
+    tl.set(line, { opacity: 1 }, L.words[0][1] - 0.03);
+    L.words.forEach(([txt, wt, minor, death]) => {
+      // reserved-width slot: sizer keeps the centered line static (no
+      // re-center drift as words arrive); the clip wipes the word in over it.
+      const wrap = document.createElement("span"); wrap.className = "w";
+      const sizer = document.createElement("span"); sizer.className = "sz";
+      sizer.textContent = txt;
+      const clip = document.createElement("span"); clip.className = "clip";
+      const inner = document.createElement("span");
+      inner.textContent = txt;
+      clip.appendChild(inner); wrap.appendChild(sizer); wrap.appendChild(clip);
+      line.appendChild(wrap);
+      // entrance = apex motif at low amplitude: the trace draws it L→R
+      tl.fromTo(clip, { width: 0 }, { width: "auto", duration: 0.10, ease: "none" }, wt);
+      // phosphor just-traced flash (full brightness instantly, settle in 2 frames)
+      const settle = death
+        ? { color: ${J(EM)}, textShadow: "0 0 9px ${EM}8c" }
+        : { color: ${J(A)}, textShadow: "0 0 8px ${A}73" };
+      tl.set(inner, { color: ${J(FLSH)}, textShadow: "0 0 16px ${BRT}f2" }, wt);
+      tl.set(inner, settle, wt + 2 * F);
+      // trigger LED blink on every word arrival
+      tl.set("#sctrig", { opacity: 1, scale: 1.35 }, wt);
+      tl.set("#sctrig", { opacity: 0.45, scale: 1 }, wt + 2 * F);
+      // emphasis: ticking frequency readout (seeded, ascending)
+      if (minor) {
+        const chip = document.createElement("span"); chip.className = "scchip";
+        const cvs = chipVals(crnd, chipIdx++).map((v) => {
+          const s = document.createElement("span"); s.className = "cv"; s.textContent = v;
+          chip.appendChild(s); return s;
+        });
+        wrap.appendChild(chip);
+        tl.set(chip, { opacity: 1 }, wt + 0.12);
+        cvs.forEach((s, i) => {
+          tl.set(s, { opacity: 1 }, wt + 0.12 + i * 2 * F);
+          if (i < cvs.length - 1) tl.set(s, { opacity: 0 }, wt + 0.12 + (i + 1) * 2 * F);
+        });
+      }
+    });
+    // exit: the line collapses INTO the waveform
+    tl.to(line, { y: 30, opacity: 0, duration: 0.13, ease: "power2.in" }, L.out);
+  });
+
+  // ===== the death beat: explosion / band shake / flatline / dot / siglost =====
+  [[3, 0], [-4, 1], [3, 2], [-2, 3], [0, 4]].forEach(([dx, k]) => {
+    tl.set("#scband", { x: dx }, Math.min(NZ + k * 0.042, ENDC));
+  });
+  tl.set("#scband", { x: 0 }, Math.min(NZ + 0.21, ENDC));
+  // trig LED panics, then dies
+  [0, 1, 2, 3].forEach((k) => {
+    tl.set("#sctrig", { opacity: k % 2 ? 0.2 : 1, background: ${J(dna.palette.panic || "#ff5f47")},
+                        boxShadow: "0 0 8px ${(dna.palette.panic || "#ff5f47") + "e6"}" }, Math.min(NZ + k * 2 * F, ENDC));
+  });
+  tl.set("#sctrig", { opacity: 0.18 }, Math.min(NZ + 0.35, ENDC));
+  // flatline → trace shrinks to a single dot
+  tl.to("#scwavewrap", { scaleX: 0.015, duration: 0.055, ease: "power3.in",
+                         transformOrigin: "50% 50%" }, Math.min(NZ + 0.365, ENDC - 0.06));
+  tl.set("#scwavewrap", { opacity: 0 }, Math.min(NZ + 0.425, ENDC));
+  tl.set("#scdot", { opacity: 1 }, Math.min(NZ + 0.39, ENDC));
+  tl.set("#scdot", { opacity: 0.45 }, Math.min(NZ + 0.465, ENDC));
+  tl.set("#scdot", { opacity: 1 }, Math.min(NZ + 0.49, ENDC));
+  // SIGNAL LOST stamp (2-frame flicker in; clamped ≤ DUR−0.02)
+  tl.set("#scsiglost", { opacity: 1 }, Math.min(NZ + 0.43, ENDC - 2 * F));
+  tl.set("#scsiglost", { opacity: 0.35 }, Math.min(NZ + 0.43 + F, ENDC - F));
+  tl.set("#scsiglost", { opacity: 1 }, Math.min(NZ + 0.43 + 2 * F, ENDC));`;
+  return { css, html, js };
+}
+
+function paradigmPaperrail() {
+  // PAPERRAIL: stop-motion craft table — a kraft strip (torn top edge, washi-
+  // taped corners, handwritten tag) holds cream paper chips that are PLACED
+  // one by one: opacity full in 0 frames, y −16 + scale 1.06→1 with steps(2),
+  // seeded ±2.5° crooked = the papermat drop at low amplitude. The strip
+  // jitters ±0.7px every 4 frames (handmade weave); chips hold a rotation-only
+  // ~5fps wobble. Emphasis words get a washi-tape slap (chip pressed 1 frame);
+  // the FINAL word is an accent chip (sign-off); the hero slot keeps a red
+  // paper star (rail↔climax hand-off) that pulses as the apex chips land.
+  // Exits: chips peeled off (rotation −8°, y −40, steps(3)), staggered.
+  const b = dna.body;
+  const stripW = (b.strip && b.strip.w) || 1140;
+  const stripH = (b.strip && b.strip.h) || 88;
+  const SX = (b.strip && b.strip.x) ?? Math.round((W - stripW) / 2);
+  const ST = H - ((b.strip && b.strip.bottomPx) ?? 26) - stripH;
+  const k = (b.fontPx || 38) / 38; // chip furniture scales with the type
+  const r = (v) => Math.round(v * k);
+  const tapeDelay = b.tapeDelay ?? 0.25;
+  // hero hand-off slot: the line whose window holds the apex keeps a star chip
+  const heroLi = heroInline ? -1 : LINES.findIndex((L) => heroIn >= L.in - 0.01 && heroIn < L.out);
+  const lineData = LINES.map((L, li) => {
+    const n = L.words.length + (li === heroLi ? 1 : 0);
+    // peel (0.18s + stagger) always completes on frame; demo cadence L.out−0.04
+    const xo = +(
+      li === LINES.length - 1 ? Math.min(L.out - 0.04, DUR - 0.2 - (n - 1) * 0.03) : L.out - 0.04
+    ).toFixed(3);
+    const words = L.words.map((w, wi) => {
+      const isLast = li === LINES.length - 1 && wi === L.words.length - 1;
+      const kind = isLast ? 3 : w.minor ? 1 : 0; // 0 chip / 1 taped / 2 star / 3 accent
+      let tapeT = 0;
+      if (kind === 1) {
+        const tt = +Math.min(w.start + tapeDelay, xo - 0.2).toFixed(3);
+        if (tt >= w.start + 0.08) tapeT = tt;
+      }
+      return [w.display, +w.start.toFixed(3), kind, tapeT];
+    });
+    if (li === heroLi) {
+      const at = L.words.filter((w) => w.start < heroIn).length;
+      words.splice(at, 0, ["*", +heroIn.toFixed(3), 2, 0]);
+    }
+    return { id: "pl" + L.id, in: +L.in.toFixed(3), xo, words };
+  });
+  const css = `
+  #pstrip { position:absolute; left:${SX}px; top:${ST}px; width:${stripW}px; height:${stripH}px; opacity:0; }
+  #pstrip .paper { position:absolute; inset:0;
+                   background: linear-gradient(180deg, #bd9e6f 0%, #b89968 45%, #a8854f 100%);
+                   box-shadow: inset 0 -4px 0 rgba(90,66,30,0.55); }
+  .pwt  { position:absolute; width:84px; height:24px; opacity:0.62; background: rgba(255,99,84,0.85); }
+  .pwt i { position:absolute; inset:0; display:block;
+           background: repeating-linear-gradient(90deg, rgba(255,255,255,0.22) 0 6px, rgba(255,255,255,0) 6px 13px); }
+  #pwtL { left:-16px; top:-11px; } #pwtR { right:-14px; top:-9px; }
+  #ptag { position:absolute; right:30px; top:${stripH - 38}px; font-family:'${dna.fonts.tag}', cursive;
+          font-size:24px; color:${dna.palette.tag || "#503d20"}; opacity:0.85; white-space:nowrap; }
+  #plines { position:absolute; inset:0; }
+  .pline { position:absolute; left:${W / 2}px; top:${ST + 14}px; white-space:nowrap; opacity:0; }
+  .pchip { position:relative; display:inline-block; margin-right:${r(10)}px; padding:${r(5)}px ${r(14)}px ${r(7)}px;
+           background:${dna.palette.chip || "#f6edd8"}; border:1px solid ${dna.palette.chipEdge || "#cdb98e"}; border-radius:3px;
+           box-shadow: 0 3px 0 rgba(58,38,16,0.38);
+           font-family:'${dna.fonts.body}', sans-serif; font-weight:600; font-size:${b.fontPx}px; line-height:1.15;
+           color:${dna.palette.body}; opacity:0; }
+  .pchip.red { background:${dna.palette.accent}; border-color:${dna.palette.accentEdge || "#c93527"}; color:#fff3e4; }
+  .ptape { position:absolute; top:-10px; right:-15px; width:${r(58)}px; height:${r(18)}px; opacity:0;
+           background: rgba(255,79,63,0.66); }
+  .ptape i { position:absolute; inset:0; display:block;
+             background: repeating-linear-gradient(90deg, rgba(255,255,255,0.25) 0 5px, rgba(255,255,255,0) 5px 11px); }
+  .pstarw { position:relative; display:inline-block; width:${r(46)}px; height:${r(44)}px;
+            margin-right:${r(10)}px; vertical-align:${-r(7)}px; opacity:0; }
+  .pstar { position:absolute; inset:0; background:${dna.palette.accent};
+           clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
+           filter: drop-shadow(0 3px 0 rgba(58,38,16,0.38)); }`;
+  const html = `      <div id="pstrip">
+        <div class="paper"></div>
+        <div class="pwt" id="pwtL"><i></i></div>
+        <div class="pwt" id="pwtR"><i></i></div>
+        <div id="ptag">${esc(b.tag || "cut & paste · 12 fps")}</div>
+      </div>
+      <div id="plines">
+${lineData.map((L) => `        <div class="pline" id="${L.id}"></div>`).join("\n")}
+      </div>`;
+  const dimT = +Math.max(0.15, heroIn - ((b.yield && b.yield.pre) || 0.2)).toFixed(3);
+  const resT = +(heroIn + ((b.yield && b.yield.post) || 0.9)).toFixed(3);
+  const js = `
+  // ---- body paradigm: PAPERRAIL (chips placed steps(2) / peel-off exit) ----
+  const RAILP = ${J(lineData)};
+  const rrnd = mulberry32(${b.seed || 150372});
+  // torn top edge on the kraft strip (sides/bottom are the table cut)
+  (function(){
+    const pts = []; const SEG = 28;
+    for (let i = 0; i <= SEG; i++)
+      pts.push(((${stripW}/SEG)*i).toFixed(1) + "px " + Math.max(0, (rrnd()-0.5)*8 + 4).toFixed(1) + "px");
+    pts.push("${stripW}px ${stripH}px", "0px ${stripH}px");
+    document.querySelector("#pstrip .paper").style.clipPath = "polygon(" + pts.join(",") + ")";
+  })();
+  gsap.set("#pwtL", { rotation: -38 });
+  gsap.set("#pwtR", { rotation: 33 });
+  gsap.set("#ptag", { rotation: -2 });
+
+  // ===== STRIP: placed on the table, then handmade jitter every 4 frames =====
+  tl.set("#pstrip", { opacity: 1 }, 0.10);
+  tl.fromTo("#pstrip", { y: ${stripH + 26} }, { y: 0, duration: 0.18, ease: "steps(3)" }, 0.10);
+  for (let t = 0.45; t < ${(DUR - 0.06).toFixed(3)}; t += 1/6)
+    tl.set("#pstrip", { x: (rrnd()-0.5)*1.4, y: (rrnd()-0.5)*1.4, rotation: (rrnd()-0.5)*0.36 }, t);
+${
+  b.yield && !heroInline
+    ? `
+  // rail yields while the apex chips land (furniture never contests the hero)
+  tl.to(["#pstrip", "#plines"], { opacity: ${b.yield.dim}, duration: 0.10 }, ${dimT});
+${resT + 0.3 < DUR ? `  tl.to(["#pstrip", "#plines"], { opacity: 1, duration: 0.22 }, ${resT});` : ""}`
+    : ""
+}
+
+  // ===== BODY: paper chips placed one by one =====
+  RAILP.forEach((L) => {
+    const line = document.getElementById(L.id);
+    gsap.set(line, { xPercent: -50 });
+    tl.set(line, { opacity: 1 }, L.in);
+    L.words.forEach(([txt, st, kind, tapeT], wi) => {
+      let el;
+      if (kind === 2) {                  // apex hand-off: red paper star in the slot
+        el = document.createElement("span"); el.className = "pstarw";
+        const s = document.createElement("span"); s.className = "pstar";
+        el.appendChild(s); line.appendChild(el);
+        // placement pulse when the apex word starts landing
+        tl.set(s, { scale: 1.18 }, st + 0.09);
+        tl.set(s, { scale: 1.06 }, st + 0.17);
+        tl.set(s, { scale: 1 },    st + 0.25);
+      } else {
+        el = document.createElement("span");
+        el.className = "pchip" + (kind === 3 ? " red" : "");
+        el.textContent = txt;
+        line.appendChild(el);
+      }
+      const r0 = (rrnd()-0.5)*5;         // seeded ±2.5° crooked placement
+      gsap.set(el, { transformOrigin: "50% 80%" });
+      // PLACED: the apex drop at low amplitude — opacity full in 0 frames
+      tl.set(el, { opacity: 1, rotation: r0 }, st);
+      tl.fromTo(el, { y: -16, scale: 1.06 }, { y: 0, scale: 1, duration: 0.12, ease: "steps(2)" }, st);
+      // handmade hold wobble (rotation only, ~5fps)
+      for (let t = st + 0.40; t < L.xo - 0.06; t += 0.21)
+        tl.set(el, { rotation: r0 + (rrnd()-0.5)*1.0 }, t);
+      // washi-tape slap pins the emphasis words
+      if (kind === 1 && tapeT > 0) {
+        const tape = document.createElement("span"); tape.className = "ptape";
+        const ti = document.createElement("i"); tape.appendChild(ti);
+        el.appendChild(tape);
+        gsap.set(tape, { rotation: -36 });
+        tl.set(tape, { opacity: 0.92 }, tapeT);
+        tl.fromTo(tape, { scale: 1.7 }, { scale: 1, duration: 0.0833, ease: "steps(2)" }, tapeT);
+        tl.set(el, { y: 2 }, tapeT);     // chip pressed by the slap
+        tl.set(el, { y: 0 }, tapeT + 0.0833);
+      }
+      // EXIT: peeled off
+      tl.to(el, { rotation: r0 - 8, y: -40, opacity: 0, duration: 0.18, ease: "steps(3)" },
+            L.xo + wi*0.03);
+    });
+  });`;
+  return { css, html, js };
+}
+
+function paradigmPopuprail() {
+  // POPUPRAIL: pop-up book page — a cream page strip (center foldline) unfolds
+  // up from the bottom edge (scaleY back.out, the stage is built); words POP
+  // UP on a baseline hinge (rotationX 85→0, back.out = the centerfold motif at
+  // low amplitude) on two reading rows that alternate per line. Emphasis words
+  // land bigger with a contact squash the strip FEELS (1px dip), then flick-
+  // wobble; blue paper struts lean in behind emphasis + the sign-off word; the
+  // hero slot keeps a blue paper star (rail↔climax hand-off). Exits fold flat
+  // in an L→R wave (the page closing); on the final word the whole page TILTS
+  // (paper physics) and the strip itself folds shut on the last frame.
+  const b = dna.body;
+  const stripW = (b.strip && b.strip.w) || 1230;
+  const stripH = (b.strip && b.strip.h) || 124;
+  const rowY = { A: H - (b.rowA ?? 70), B: H - (b.rowB ?? 20) };
+  const k = (b.fontPx || 42) / 42; // chip furniture scales with the type
+  const r = (v) => Math.round(v * k);
+  const emPx = b.emPx || Math.round((b.fontPx || 42) * 1.24);
+  const maxHold = b.maxHold ?? 0.95;
+  // hero hand-off slot: the line whose window holds the apex keeps a star chip
+  const heroLi = heroInline ? -1 : LINES.findIndex((L) => heroIn >= L.in - 0.01 && heroIn < L.out);
+  const lineData = LINES.map((L, li) => {
+    const lastSt = L.words[L.words.length - 1].start;
+    const n = L.words.length + (li === heroLi ? 1 : 0);
+    // fold as the next line begins, or after maxHold in silence; the fold wave
+    // + slot hide always complete by DUR−0.017 (demo cadence: L4 folds 5.76)
+    const foldT = +Math.min(L.out, lastSt + maxHold, DUR - 0.147 - 0.045 * (n - 1)).toFixed(3);
+    const words = L.words.map((w, wi) => {
+      const isLast = li === LINES.length - 1 && wi === L.words.length - 1;
+      const kind = isLast ? 2 : w.minor ? 1 : 0; // 0 plain | 1 emph | 2 emph-blue | 3 star
+      let wobT = 0,
+        wobD = 0,
+        strutT = 0;
+      if (kind === 1) {
+        // paper-flick after landing, squeezed to fit before the fold
+        const wt = +(w.start + 0.2).toFixed(3);
+        const wd = +Math.min(0.5, foldT - wt - 0.04).toFixed(2);
+        if (wd >= 0.15) {
+          wobT = wt;
+          wobD = wd;
+        }
+      }
+      if (kind >= 1) {
+        const st2 = +Math.min(w.start + (kind === 2 ? 0.15 : 0.26), foldT - 0.1).toFixed(3);
+        if (st2 >= w.start + 0.08) strutT = st2;
+      }
+      return [w.display, +w.start.toFixed(3), kind, wobT, wobD, strutT];
+    });
+    if (li === heroLi) {
+      const at = L.words.filter((w) => w.start < heroIn).length;
+      words.splice(at, 0, ["*", +heroIn.toFixed(3), 3, 0, 0, 0]);
+    }
+    return { id: "pu" + L.id, row: li % 2 === 0 ? "A" : "B", foldT, words };
+  });
+  const css = `
+  #pupage { position:absolute; inset:0; }
+  #pustrip { position:absolute; left:${W / 2}px; top:${H}px; width:${stripW}px; height:${stripH}px;
+             opacity:0; border-radius:4px 4px 0 0;
+             background: linear-gradient(180deg, ${dna.palette.page || "#f7eed8"} 0%, ${dna.palette.page2 || "#f0e4c8"} 55%, ${dna.palette.page3 || "#e7d8b4"} 100%);
+             border-top: 2px solid ${dna.palette.pageEdge || "rgba(122,96,54,0.55)"};
+             box-shadow: 0 -12px 26px rgba(18,12,5,0.38), inset 0 14px 18px rgba(255,255,248,0.5); }
+  #pufold { position:absolute; left:50%; top:0; bottom:0; width:3px; margin-left:-1px;
+            background: linear-gradient(90deg, rgba(120,95,55,0) 0%, rgba(120,95,55,0.30) 50%, rgba(255,252,240,0.5) 100%); }
+  .puline { position:absolute; left:${W / 2}px; white-space:nowrap; }
+  .puslot { display:inline-block; position:relative; margin-right:0.34em; vertical-align:baseline; }
+  .puw { display:inline-block; position:relative; z-index:1; opacity:0;
+         font-family:'${dna.fonts.body}', sans-serif; font-weight:600; font-size:${b.fontPx}px;
+         line-height:1.04; color:${dna.palette.body}; }
+  .puw.em { font-size:${emPx}px; font-weight:800; }
+  .puw.blue { color:${dna.palette.blue || dna.palette.accent}; }
+  .puw.star { width:${r(30)}px; height:${r(30)}px; background:${dna.palette.accent}; vertical-align:${-r(2)}px;
+              filter: drop-shadow(0 2px 2px rgba(60,40,15,0.35));
+              clip-path: polygon(50% 0%,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%); }
+  .pustrut { position:absolute; right:-8px; bottom:0; width:${r(19)}px; height:${r(16)}px;
+             background: linear-gradient(180deg,${dna.palette.strut1 || "#4f93c4"} 0%, ${dna.palette.strut2 || dna.palette.accent} 70%);
+             clip-path: polygon(0 100%, 100% 100%, 100% 0); opacity:0; z-index:0; }`;
+  const html = `      <div id="pupage">
+        <div id="pustrip"><div id="pufold"></div></div>
+${lineData.map((L) => `        <div class="puline" id="${L.id}"></div>`).join("\n")}
+      </div>`;
+  const js = `
+  // ---- body paradigm: POPUPRAIL (baseline-hinge pop-ups / fold-flat exit) ----
+  const RAILU = ${J(lineData)};
+  const ROWY = ${J(rowY)};
+
+  // ===== PAGE STRIP: unfolds up from the bottom edge (the stage is built) =====
+  gsap.set("#pustrip", { xPercent: -50, yPercent: -100, transformOrigin: "50% 100%", scaleY: 0.02 });
+  tl.set("#pustrip", { opacity: 1 }, 0.14);
+  tl.to("#pustrip", { scaleY: 1, duration: 0.24, ease: "back.out(1.5)" }, 0.14);
+  // hold life: the whole page breathes very gently
+  tl.to("#pupage", { keyframes: { y: [0, -1.6, -0.4, -1.4, 0] },
+                     duration: ${Math.min(5.3, DUR - 0.75).toFixed(2)}, ease: "sine.inOut" }, 0.40);
+
+  // ===== BODY: words pop up on the baseline hinge =====
+  RAILU.forEach((L) => {
+    const line = document.getElementById(L.id);
+    line.style.top = ROWY[L.row] + "px";
+    const els = L.words.map(([txt, st, kind]) => {
+      const slot = document.createElement("span"); slot.className = "puslot";
+      let strut = null;
+      if (kind === 1 || kind === 2) {
+        strut = document.createElement("div"); strut.className = "pustrut";
+        slot.appendChild(strut);
+      }
+      const w = document.createElement("span");
+      w.className = "puw" + (kind === 1 ? " em" : kind === 2 ? " em blue" : kind === 3 ? " star" : "");
+      if (kind !== 3) w.textContent = txt;
+      slot.appendChild(w);
+      line.appendChild(slot);
+      return { w, strut, slot };
+    });
+    gsap.set(line, { xPercent: -50, yPercent: -100 });
+
+    L.words.forEach(([txt, st, kind, wobT, wobD, strutT], wi) => {
+      const { w, strut, slot } = els[wi];
+      gsap.set(w, { transformPerspective: 650, transformOrigin: "50% 100%", rotationX: 85 });
+      // POP UP — baseline hinge, paper overshoot; back-shadow grows as it rises
+      tl.set(w, { opacity: 1, textShadow: "0 0px 0px rgba(70,50,25,0)" }, st);
+      tl.to(w, { rotationX: 0, duration: 0.25, ease: "back.out(1.4)" }, st);
+      tl.to(w, { textShadow: "0 3px 5px rgba(70,50,25,0.38)", duration: 0.25, ease: "power1.out" }, st);
+      if (kind === 1 || kind === 2) {           // contact squash on the big words
+        tl.set(w, { scaleX: 1.06, scaleY: 0.93 }, st + 0.12);
+        tl.to(w, { scaleX: 1, scaleY: 1, duration: 0.30, ease: "elastic.out(1, 0.4)" }, st + 0.16);
+        tl.set("#pustrip", { y: 1 }, st + 0.13);  // the page feels the landing
+        tl.to("#pustrip", { y: 0, duration: 0.16, ease: "power2.out" }, st + 0.18);
+      }
+      if (wobT) tl.to(w, { keyframes: { rotationX: [0, -4, 2.8, -1.4, 0.5, 0] },
+                          duration: wobD, ease: "sine.inOut" }, wobT);
+      if (strut && strutT) {                    // visible paper strut leans in behind
+        gsap.set(strut, { transformOrigin: "50% 100%", scaleY: 0 });
+        tl.set(strut, { opacity: 1 }, strutT);
+        tl.to(strut, { scaleY: 1, duration: 0.12, ease: "back.out(2)" }, strutT);
+      }
+      // EXIT — the page closes: words fold flat in an L→R wave
+      const ft = L.foldT + wi * 0.045;
+      tl.to(w, { rotationX: 88, duration: 0.12, ease: "power2.in" }, ft);
+      tl.to(w, { textShadow: "0 0px 0px rgba(70,50,25,0)", duration: 0.12 }, ft);
+      if (strut) tl.to(strut, { scaleY: 0, duration: 0.10, ease: "power2.in" }, ft);
+      tl.set(slot, { opacity: 0 }, ft + 0.13);
+    });
+  });
+${
+  b.yield && !heroInline
+    ? `
+  // APEX OWNS ITS WINDOW — page yields while the centerfold lands, restores
+  tl.to("#pupage", { opacity: ${b.yield.dim}, duration: 0.12, ease: "power1.out" }, ${(heroIn - (b.yield.pre || 0.03)).toFixed(3)});
+  tl.to("#pupage", { opacity: 1, duration: 0.22, ease: "power1.in" }, ${(heroIn + (b.yield.post || 0.47)).toFixed(3)});`
+    : ""
+}
+${
+  b.tilt !== false
+    ? `
+  // paper-world physics: on the final word the whole page TILTS and slides
+  tl.to("#pupage", { rotation: 2, x: 6, transformOrigin: "50% 100%",
+                     duration: 0.26, ease: "back.out(2.2)" }, ${(LASTWORD.start + 0.02).toFixed(3)});`
+    : ""
+}
+  // ending: after the last fold the strip itself closes (book shut)
+  tl.to("#pustrip", { scaleY: 0.03, duration: 0.07, ease: "power3.in" }, ${(DUR - 0.082).toFixed(3)});
+  tl.set("#pustrip", { opacity: 0 }, ${(DUR - 0.017).toFixed(3)});`;
+  return { css, html, js };
+}
+
+function paradigmChalkrail() {
+  // CHALKRAIL: night-lecture chalk band — a deep-green board strip (worn top
+  // hairline, eraser smudges, handwritten header tag, two chalk sticks) docked
+  // at the bottom edge holds reading rows that ACCUMULATE: lines fill the rows
+  // top→bottom in phases of rows.length; when the next phase needs the rows an
+  // ERASER SWIPE clears the board (a blurred light band sweeps across, the
+  // words SMEAR out scaleX 1.3 + blur(8), faint ghost smudges stay — chalk
+  // never fully erases). Words are chalk-written fast: 2-frame pop + scribble
+  // clip-reveal steps(4) + 6 seeded dust specks puffing at the base + seeded
+  // ±2° tilt = the chalkwrite verb at low amplitude. Emphasis = double
+  // underline dashes drawn beneath; the FINAL transcript word lands in yellow
+  // chalk (sign-off). Band yields during the apex landing, restores after.
+  const b = dna.body;
+  const stripW = (b.strip && b.strip.w) || 1200;
+  const stripH = (b.strip && b.strip.h) || 148;
+  const SX = (b.strip && b.strip.x) ?? Math.round((W - stripW) / 2);
+  const ST = H - ((b.strip && b.strip.bottomPx) ?? 0) - stripH;
+  const rows = b.rows || [26, 82];
+  const R = rows.length;
+  const kw = stripW / 1200,
+    kh = stripH / 148; // furniture scales with the strip (demo 1200×148)
+  const lineData = LINES.map((L, li) => ({
+    id: "cl" + L.id,
+    top: rows[li % R],
+    words: L.words.map((w, wi) => [
+      w.display,
+      +w.start.toFixed(3),
+      w.minor ? 1 : 0,
+      li === LINES.length - 1 && wi === L.words.length - 1 ? 1 : 0, // yellow sign-off
+    ]),
+  }));
+  // eraser passes: one per phase boundary — swipe after the previous phase's
+  // last word ends, always landing clear of the next phase's first word
+  const erases = [];
+  for (let pi = R; pi < LINES.length; pi += R) {
+    const prevEnd = Math.max(
+      ...LINES.slice(pi - R, pi).map((L) => L.words[L.words.length - 1].end),
+    );
+    const nextIn = LINES[pi].in;
+    const t = +Math.max(
+      prevEnd + 0.05,
+      Math.min(prevEnd + (b.eraseDelay ?? 0.23), nextIn - 0.9),
+    ).toFixed(3);
+    erases.push({ t, lines: lineData.slice(pi - R, pi).map((L) => L.id) });
+  }
+  const css = `
+  #cband { position:absolute; left:${SX}px; top:${ST}px; width:${stripW}px; height:${stripH}px; opacity:0;
+           background: linear-gradient(180deg, ${dna.palette.bandHi || "#23392d"} 0%, ${dna.palette.board || "#1d3328"} 45%, ${dna.palette.bandLo || "#16271f"} 100%);
+           border-radius:8px 8px 0 0;
+           box-shadow: inset 0 0 70px rgba(0,0,0,0.5), inset 0 14px 18px -12px rgba(0,0,0,0.6),
+                       0 -3px 18px rgba(0,0,0,0.35); }
+  #cband .hairline { position:absolute; top:0; left:0; right:0; height:1px;
+                     background: rgba(240,245,235,0.14); }
+  #cband .smg { position:absolute; border-radius:50%; }
+  #csmg1 { left:${Math.round(520 * kw)}px; top:${Math.round(14 * kh)}px; width:${Math.round(300 * kw)}px; height:${Math.round(90 * kh)}px; transform:rotate(-4deg);
+           background: radial-gradient(50% 50% at 50% 50%, rgba(220,230,220,0.07) 0%, rgba(220,230,220,0) 70%); }
+  #csmg2 { left:${Math.round(880 * kw)}px; top:${Math.round(60 * kh)}px; width:${Math.round(260 * kw)}px; height:${Math.round(74 * kh)}px; transform:rotate(5deg);
+           background: radial-gradient(50% 50% at 50% 50%, rgba(220,230,220,0.06) 0%, rgba(220,230,220,0) 70%); }
+  #chdr { position:absolute; top:5px; left:28px; font-family:'${dna.fonts.tag || dna.fonts.body}', cursive;
+          font-size:23px; letter-spacing:1.5px; color:rgba(238,244,236,0.5); opacity:0; }
+  #cstickW { position:absolute; right:30px; bottom:12px; width:52px; height:9px; border-radius:4px;
+             background: linear-gradient(180deg, #f4f1e4 0%, #d9d4c2 100%);
+             transform: rotate(9deg); box-shadow: 0 2px 3px rgba(0,0,0,0.4); opacity:0; }
+  #cstickY { position:absolute; right:96px; bottom:11px; width:27px; height:8px; border-radius:4px;
+             background: linear-gradient(180deg, #efd680 0%, #d8ba55 100%);
+             transform: rotate(-5deg); box-shadow: 0 2px 3px rgba(0,0,0,0.4); opacity:0; }
+  .crow { position:absolute; left:30px; white-space:nowrap;
+          font-family:'${dna.fonts.body}', cursive; font-size:${b.fontPx}px; line-height:1.0; color:${dna.palette.body};
+          text-shadow: ${b.glow || "0 0 7px rgba(250,250,240,0.28), 0 1px 0 rgba(255,255,255,0.10)"}; }
+  .crow .w { display:inline-block; position:relative; margin-right:0.35em; opacity:0; }
+  .crow .w .txt { display:inline-block; }
+  .crow .w.yel { color:${dna.palette.em || "#f3d96b"}; text-shadow: 0 0 8px ${(dna.palette.em || "#f3d96b") + "52"}, 0 1px 0 rgba(255,255,255,0.08); }
+  .crow .w .d { position:absolute; bottom:2px; width:3px; height:3px; border-radius:50%;
+                background:${dna.palette.dust || "#f1efe2"}; opacity:0; pointer-events:none; }
+  .crow .w svg.ul { position:absolute; left:2%; bottom:-8px; width:96%; height:18px; overflow:visible; }
+  .cghost { position:absolute; border-radius:50%; opacity:0;
+            background: radial-gradient(50% 50% at 50% 50%, rgba(240,244,238,0.10) 0%, rgba(240,244,238,0) 70%); }
+  #cgh1 { left:${Math.round(110 * kw)}px; top:${Math.round(24 * kh)}px; width:${Math.round(430 * kw)}px; height:${Math.round(62 * kh)}px; }
+  #cgh2 { left:${Math.round(80 * kw)}px; top:${Math.round(80 * kh)}px; width:${Math.round(360 * kw)}px; height:${Math.round(56 * kh)}px; }
+  #ceraser { position:absolute; top:-8px; left:0; width:120px; height:${stripH + 16}px; opacity:0;
+             background: linear-gradient(100deg, rgba(236,242,236,0) 0%, rgba(236,242,236,0.30) 45%, rgba(236,242,236,0) 100%);
+             filter: blur(5px); }`;
+  const html = `      <div id="cband">
+        <div class="hairline"></div>
+        <div class="smg" id="csmg1"></div>
+        <div class="smg" id="csmg2"></div>
+        <div id="chdr">${esc(b.tag || "NIGHT LECTURE · wk 07")}</div>
+        <div class="cghost" id="cgh1"></div>
+        <div class="cghost" id="cgh2"></div>
+${lineData.map((L) => `        <div class="crow" id="${L.id}" style="top:${L.top}px"></div>`).join("\n")}
+        <div id="cstickW"></div>
+        <div id="cstickY"></div>
+        <div id="ceraser"></div>
+      </div>`;
+  const js = `
+  // ---- body paradigm: CHALKRAIL (chalk scribble pop / eraser-swipe phases) ----
+  const RAILC = ${J(lineData)};
+  const ERASES = ${J(erases)};
+  const rrnd = mulberry32(${b.seed || 13});
+  const SVGNS = "http://www.w3.org/2000/svg";
+
+  // ===== band furniture =====
+  tl.fromTo("#cband", { opacity: 0, y: 26 }, { opacity: 1, y: 0, duration: 0.22, ease: "power2.out" }, 0.03);
+  tl.fromTo("#chdr",    { opacity: 0 }, { opacity: 1, duration: 0.25 }, 0.30);
+  tl.fromTo("#cstickW", { opacity: 0 }, { opacity: 0.92, duration: 0.2 }, 0.36);
+  tl.fromTo("#cstickY", { opacity: 0 }, { opacity: 0.92, duration: 0.2 }, 0.42);
+
+  // ===== body words: chalk-dust pop (entrance = the apex motif, low amplitude) =====
+  RAILC.forEach((L) => {
+    const line = document.getElementById(L.id);
+    L.words.forEach(([txt, st, em, yel]) => {
+      const w = document.createElement("span"); w.className = "w" + (yel ? " yel" : "");
+      const inner = document.createElement("span"); inner.className = "txt"; inner.textContent = txt;
+      w.appendChild(inner); line.appendChild(w);
+      gsap.set(w, { rotation: (rrnd() * 4 - 2), transformOrigin: "50% 100%" });
+      gsap.set(inner, { clipPath: "inset(-30% 102% -30% -2%)" });
+      // 2-frame pop + fast scribble reveal + tiny drop-settle
+      tl.fromTo(w, { opacity: 0 }, { opacity: 1, duration: 0.07, ease: "power1.in" }, st);
+      tl.to(inner, { clipPath: "inset(-30% -2% -30% -2%)", duration: 0.12, ease: "steps(4)" }, st);
+      tl.fromTo(w, { y: 4 }, { y: 0, duration: 0.2, ease: "power2.out" }, st);
+      // 6 seeded dust specks puff at the word base
+      for (let k = 0; k < 6; k++) {
+        const d = document.createElement("span"); d.className = "d";
+        d.style.left = (6 + rrnd() * 84) + "%";
+        w.appendChild(d);
+        tl.set(d, { opacity: 0.85 }, st + 0.02);
+        tl.to(d, { y: 12 + rrnd() * 16, x: rrnd() * 16 - 8, opacity: 0,
+                   duration: 0.36 + rrnd() * 0.15, ease: "power1.in" }, st + 0.02);
+      }
+      // emphasis: double underline dashes drawn beneath
+      if (em) {
+        const svg = document.createElementNS(SVGNS, "svg");
+        svg.setAttribute("class", "ul"); svg.setAttribute("viewBox", "0 0 100 18");
+        svg.setAttribute("preserveAspectRatio", "none");
+        const col = yel ? ${J(dna.palette.em || "#f3d96b")} : ${J(dna.palette.body)};
+        [["M 3 5 C 28 2, 66 8, 97 4", Math.min(st + 0.22, ${(DUR - 0.3).toFixed(3)}), 0.12],
+         ["M 6 12 C 36 9, 62 15, 95 11", Math.min(st + 0.38, ${(DUR - 0.2).toFixed(3)}), 0.10]].forEach(([dd, tu, du]) => {
+          const p = document.createElementNS(SVGNS, "path");
+          p.setAttribute("d", dd); p.setAttribute("fill", "none");
+          p.setAttribute("stroke", col); p.setAttribute("stroke-width", "3");
+          p.setAttribute("stroke-linecap", "round");
+          p.setAttribute("vector-effect", "non-scaling-stroke");
+          p.setAttribute("opacity", "0");
+          svg.appendChild(p);
+          const len = p.getTotalLength();
+          gsap.set(p, { strokeDasharray: len, strokeDashoffset: len });
+          tl.set(p, { opacity: 0.9 }, tu);
+          tl.to(p, { strokeDashoffset: 0, duration: du, ease: "power2.in" }, tu);
+        });
+        w.appendChild(svg);
+      }
+    });
+  });
+
+  // ===== ERASER SWIPE between phases: light band sweeps, old words smear out =====
+  ERASES.forEach((E, ei) => {
+    tl.set("#ceraser", { opacity: 1, x: -160 }, E.t);
+    tl.to("#ceraser", { x: ${stripW + 60}, duration: 0.42, ease: "power1.inOut" }, E.t);
+    tl.set("#ceraser", { opacity: 0 }, E.t + 0.44);
+    E.lines.forEach((id, r) => {
+      const kids = document.getElementById(id).children;
+      for (let i = 0; i < kids.length; i++)
+        tl.to(kids[i], { scaleX: 1.3, x: "+=24", opacity: 0, filter: "blur(8px)",
+                         transformOrigin: "0% 80%", duration: 0.18, ease: "power2.in" },
+              E.t + 0.03 + r * 0.01 + i * 0.06);
+    });
+    // faint smudges the eraser leaves behind (stay)
+    if (ei === 0) {
+      tl.fromTo("#cgh1", { opacity: 0 }, { opacity: 0.8, duration: 0.25 }, E.t + 0.17);
+      tl.fromTo("#cgh2", { opacity: 0 }, { opacity: 0.8, duration: 0.25 }, E.t + 0.27);
+    }
+  });
+${
+  b.yield && !heroInline
+    ? `
+  // APEX OWNS ITS WINDOW — band yields while the chalk word writes, restores
+  tl.to("#cband", { opacity: ${b.yield.dim}, duration: 0.14, ease: "power1.in"  }, ${(heroIn - (b.yield.pre || 0.07)).toFixed(3)});
+${
+  heroIn + (b.yield.post || 0.41) < DUR - 0.3
+    ? `  tl.to("#cband", { opacity: 1,    duration: 0.22, ease: "power1.out" }, ${(heroIn + (b.yield.post || 0.41)).toFixed(3)});`
+    : ""
+}`
+    : ""
+}`;
+  return { css, html, js };
+}
+
+function paradigmMarkerrail() {
+  // MARKERRAIL: street handstyle rail — marker words FLICK onto a stable
+  // bottom rail (opacity full in 1 frame + 1-frame squeak skew, seeded crooked
+  // rotation settling back.out — the spray-write verb at low amplitude);
+  // emphasis words take an alternating paint color (`palette.em`/`em2`) + a
+  // spray-underline SWOOSH (dash-revealed squiggle) with 8 seeded overspray
+  // dots; the FINAL transcript word lands BIG in `palette.em` with mini
+  // apex-impact physics (crush → squash → elastic — it rides the plate punch).
+  // Spent lines are ROLLER-BUFFED: a gray paint roller sweeps across, the
+  // words vanish under it and the wet smear lingers before fading; the last
+  // line is never buffed (the sign-off stays painted). Rail yields while the
+  // apex tag writes.
+  const b = dna.body;
+  const EMS = [
+    dna.palette.em || dna.palette.accent,
+    dna.palette.em2 || dna.palette.em || dna.palette.accent,
+  ];
+  let emIdx = 0;
+  const lineData = LINES.map((L, li) => ({
+    id: "mr" + L.id,
+    in: +L.in.toFixed(3),
+    out: +L.out.toFixed(3),
+    last: li === LINES.length - 1 ? 1 : 0,
+    words: L.words.map((w, wi) => {
+      const signoff = li === LINES.length - 1 && wi === L.words.length - 1;
+      return [
+        w.display,
+        +w.start.toFixed(3),
+        signoff ? EMS[0] : w.minor ? EMS[emIdx++ % EMS.length] : 0,
+        signoff ? 1 : 0,
+      ];
+    }),
+  }));
+  const css = `
+  .mline { position:absolute; left:${W / 2}px; top:${H - b.bottomPx}px; opacity:0; white-space:nowrap;
+           font-family:'${dna.fonts.body}', cursive; font-size:${b.fontPx}px; line-height:1.25;
+           color:${dna.palette.body};
+           text-shadow: ${b.glow || "0 3px 12px rgba(0,0,0,0.72), 0 1px 3px rgba(0,0,0,0.6)"}; }
+  .mline .w { display:inline-block; opacity:0; margin-right:0.32em; position:relative; }
+  .mline .w:last-child { margin-right:0; }
+  .mroller { position:absolute; left:-14px; top:-8px; right:-14px; bottom:-8px; opacity:0;
+             background: linear-gradient(180deg, ${dna.palette.rollerHi || "#8d8a86"} 0%, ${dna.palette.rollerLo || "#6f6c69"} 45%, ${dna.palette.roller || "#807d79"} 100%);
+             border-radius:5px; }
+  .muline { position:absolute; left:-8%; top:100%; width:116%; height:26px; margin-top:-8px;
+            overflow:visible; }
+  .modot { position:absolute; width:5px; height:5px; border-radius:50%; opacity:0; }`;
+  const html = lineData.map((L) => `      <div class="mline" id="${L.id}"></div>`).join("\n");
+  const js = `
+  // ---- body paradigm: MARKERRAIL (marker flick in / roller buff out) ----
+  const RAILM = ${J(lineData)};
+  const DURM = ${(DUR - 0.02).toFixed(3)};
+  const mrnd = mulberry32(${b.seed || 20260611});
+  const SVGNSM = "http://www.w3.org/2000/svg";
+  function mUnderline(span, color, t0) {
+    // spray underline swoosh: dash-revealed squiggle + seeded overspray dots
+    const svg = document.createElementNS(SVGNSM, "svg");
+    svg.setAttribute("class", "muline");
+    svg.setAttribute("viewBox", "0 0 120 26");
+    svg.setAttribute("preserveAspectRatio", "none");
+    const path = document.createElementNS(SVGNSM, "path");
+    path.setAttribute("d", "M 5 13 C 28 20, 52 6, 78 12 S 108 16, 115 10");
+    path.setAttribute("fill", "none"); path.setAttribute("stroke", color);
+    path.setAttribute("stroke-width", "8"); path.setAttribute("stroke-linecap", "round");
+    path.setAttribute("opacity", "0");
+    svg.appendChild(path); span.appendChild(svg);
+    const len = path.getTotalLength();
+    gsap.set(path, { strokeDasharray: len, strokeDashoffset: len });
+    tl.set(path, { opacity: 0.95 }, t0);
+    tl.to(path, { strokeDashoffset: 0, duration: 0.2, ease: "power2.out" }, t0);
+    for (let i = 0; i < 8; i++) {
+      const d = document.createElement("div");
+      d.className = "modot"; d.style.background = color; span.appendChild(d);
+      const s = 3 + Math.round(mrnd() * 3);
+      gsap.set(d, { width: s, height: s, left: (4 + mrnd() * 92) + "%",
+                    bottom: -(2 + mrnd() * 18) });
+      const td = t0 + 0.03 + mrnd() * 0.15;
+      tl.set(d, { opacity: 0.9, scale: 0.4 }, td);
+      tl.to(d, { scale: 1.25, duration: 0.12, ease: "power2.out" }, td);
+      tl.to(d, { opacity: 0, duration: 0.3, ease: "power1.in" }, td + 0.12);
+    }
+  }
+  RAILM.forEach((L) => {
+    const line = document.getElementById(L.id);
+    const txt = document.createElement("div");
+    txt.style.position = "relative"; line.appendChild(txt);
+    const roller = document.createElement("div");
+    roller.className = "mroller"; line.appendChild(roller);
+    gsap.set(roller, { scaleX: 0, transformOrigin: "0% 50%" });
+    L.words.forEach(([w]) => {
+      const s = document.createElement("span");
+      s.className = "w"; s.textContent = w; txt.appendChild(s);
+    });
+    gsap.set(line, { xPercent: -50, yPercent: -100 });
+    tl.set(line, { opacity: 1 }, L.words[0][1] - 0.02);
+    L.words.forEach(([w, st, em, big], wi) => {
+      const el = txt.children[wi];
+      const rot0 = (mrnd() - 0.5) * 12, rotF = (mrnd() - 0.5) * 4;
+      // FLICK IN: opacity full in 1 frame, squeak skew for 1 frame, back.out settle
+      tl.set(el, { opacity: 1, scale: big ? 1.5 : 1.18, rotation: rot0, skewX: 7,
+                   color: em || ${J(dna.palette.body)}, transformOrigin: "50% 88%" }, st);
+      tl.set(el, { skewX: 0 }, st + F);
+      if (big) { // sign-off lands with the plate punch — mini apex-impact physics
+        tl.to(el, { scale: 1, duration: 0.09, ease: "power3.in" }, st + F);
+        tl.set(el, { scaleX: 1.1, scaleY: 0.9 }, st + F + 0.09);
+        tl.to(el, { scaleX: 1, scaleY: 1, duration: 0.26, ease: "elastic.out(1, 0.4)" }, st + F + 0.09 + 2 * F);
+        tl.to(el, { rotation: rotF, duration: 0.2, ease: "power2.out" }, st + F);
+      } else {
+        tl.to(el, { scale: 1, rotation: rotF, duration: 0.18, ease: "back.out(2.2)" }, st + F);
+      }
+      if (em && !big) mUnderline(el, em, Math.min(st + 0.22, ${(DUR - 0.5).toFixed(3)}));
+    });
+    if (!L.last) { // BUFF EXIT: gray roller sweeps the line, smear lingers
+      const XO = L.out - 0.15;
+      tl.set(roller, { opacity: 0.92 }, XO);
+      tl.fromTo(roller, { scaleX: 0 }, { scaleX: 1, duration: 0.15, ease: "power2.in" }, XO);
+      tl.set(txt, { opacity: 0 }, XO + 0.15);
+      tl.to(roller, { opacity: 0.15, filter: "blur(2px)", duration: 0.22, ease: "power1.out" }, XO + 0.17);
+      tl.to(roller, { opacity: 0, duration: 0.35 }, Math.min(XO + 0.55, DURM - 0.36));
+      tl.set(line, { display: "none" }, Math.min(XO + 0.95, DURM));
+    }
+  });
+${
+  b.yield && !heroInline
+    ? `  // APEX OWNS ITS WINDOW — the line visible at the tag's onset yields.
+  // Restore only with runway before the buff (else the line exits dimmed).
+  RAILM.forEach((L) => {
+    if (L.in <= ${heroIn.toFixed(3)} && L.out > ${(heroIn - (b.yield.pre || 0.04)).toFixed(3)}) {
+      const dimT = Math.max(${(heroIn - (b.yield.pre || 0.04)).toFixed(3)}, L.in + 0.05);
+      const XO2 = L.out - 0.15;
+      if (XO2 > dimT + 0.2 || L.last) {
+        tl.to("#" + L.id, { opacity: ${b.yield.dim}, duration: 0.16 }, dimT);
+        const resT = ${(heroIn + (b.yield.post || 0.17)).toFixed(3)};
+        if (L.last ? resT < DURM - 0.3 : resT + 0.15 < XO2)
+          tl.to("#" + L.id, { opacity: 1, duration: 0.18 }, resT);
+      }
+    }
+  });`
+    : ""
+}`;
+  return { css, html, js };
+}
+
+function paradigmBrushrail() {
+  // BRUSHRAIL: washi paper band — a deckle-edged paper band (two faintly
+  // rotated under-sheets + a warm translucent main sheet) swipes in L→R behind
+  // a traveling brush-head shadow (the ink gesture at low amplitude); body
+  // words are brush-WIPED on (clip reveal 0.16s behind a per-word brush head)
+  // on centered replace-lines with seeded ±1° tilt; emphasis words get a
+  // double curved ink underline drawn beneath (fat wash + tight core); spent
+  // lines are wiped OFF right-to-left like a wet cloth (the reveal in reverse,
+  // an erase brush head riding the wipe); the band + the line under the
+  // gesture yield while the apex lands, and the band exits with the last line
+  // on one final R→L wipe.
+  const b = dna.body;
+  const stripW = (b.strip && b.strip.w) || 820;
+  const stripH = (b.strip && b.strip.h) || 90;
+  const SX = (b.strip && b.strip.x) ?? Math.round((W - stripW) / 2);
+  const ST = H - ((b.strip && b.strip.bottomPx) ?? 61) - stripH;
+  const CX = SX + Math.round(stripW / 2),
+    CY = ST + Math.round(stripH / 2);
+  const lineY = CY - 1;
+  const maxHold = b.maxHold ?? 0.78;
+  const lineData = LINES.map((L, li) => {
+    const lastSt = L.words[L.words.length - 1].start;
+    // erase: as the next line needs the surface, or after maxHold in silence;
+    // the LAST line is wiped with the band just before the clip ends
+    let eraseT, eraseEnd;
+    if (li === LINES.length - 1) {
+      eraseT = +(DUR - 0.142).toFixed(3);
+      eraseEnd = +(DUR - 0.032).toFixed(3);
+    } else {
+      eraseT = +Math.max(lastSt + 0.18, Math.min(L.out - 0.136, lastSt + maxHold)).toFixed(3);
+      eraseEnd = +Math.max(eraseT + 0.06, Math.min(L.out + 0.004, eraseT + 0.14)).toFixed(3);
+    }
+    return {
+      id: "br" + L.id,
+      eraseT,
+      eraseEnd,
+      words: L.words.map((w) => [w.display, +w.start.toFixed(3), w.minor ? 1 : 0]),
+    };
+  });
+  const lastE = lineData[lineData.length - 1].eraseT;
+  const heroLi = heroInline ? -1 : LINES.findIndex((L) => heroIn >= L.in - 0.01 && heroIn < L.out);
+  const INKB = dna.palette.body || "#221a12"; // brush-head shadow = the body ink
+  const breD = Math.min(5.5, DUR - 0.55).toFixed(2);
+  const breN = Math.max(16, Math.round(breD * 11.6));
+  const css = `
+  #band { position:absolute; left:${CX}px; top:${CY}px; width:${stripW}px; height:${stripH}px; }
+  .bandu { position:absolute; inset:0; border-radius:8px;
+           background: linear-gradient(180deg, ${dna.palette.paperHi || "#efe8d7"} 0%, ${dna.palette.paperLo || "#e7dfcb"} 100%); }
+  #bandu1 { transform:rotate(-0.7deg) scale(1.012); opacity:0.42; }
+  #bandu2 { transform:rotate(0.5deg) scaleX(0.99); opacity:0.42; }
+  #bandmain { position:absolute; inset:0; border-radius:8px;
+              background: linear-gradient(180deg, ${dna.palette.sheetHi || "#f5efe2"}ed 0%, ${dna.palette.sheetLo || "#ece4d2"}ed 100%);
+              box-shadow: 0 5px 20px rgba(18,14,10,0.4), inset 0 0 26px rgba(120,98,70,0.18); }
+  .bandbh { position:absolute; top:-8%; width:30px; height:116%; opacity:0;
+            background: linear-gradient(90deg, ${dna.palette.bh || "#281e14"}00 0%, ${dna.palette.bh || "#281e14"}80 100%);
+            filter: blur(7px); }
+  .bline { position:absolute; left:${CX}px; top:${lineY}px; white-space:nowrap; opacity:0;
+           font-family:'${dna.fonts.body}', serif; font-weight:${b.weight || 600}; font-size:${b.fontPx}px;
+           line-height:1; color:${dna.palette.body};
+           text-shadow: 0 1px 2px rgba(70,48,26,0.22); }
+  .bline .cell { display:inline-block; position:relative; margin-right:0.3em; }
+  .bline .wrap { display:inline-block; position:relative; }
+  .bline .bh   { position:absolute; top:-14%; width:26px; height:128%; opacity:0.55;
+                 background: linear-gradient(90deg, ${INKB}00 0%, ${INKB}8c 100%);
+                 filter: blur(6px); }
+  .bline svg.ul { position:absolute; left:-3%; bottom:-12px; width:106%; height:14px;
+                  overflow:visible; }
+  .bline .ebh  { position:absolute; top:-18%; width:34px; height:136%; opacity:0;
+                 background: linear-gradient(270deg, ${INKB}00 0%, ${INKB}80 100%);
+                 filter: blur(7px); }`;
+  const html = `      <div id="band">
+        <div class="bandu" id="bandu1"></div>
+        <div class="bandu" id="bandu2"></div>
+        <div id="bandmain"></div>
+        <div class="bandbh" id="bandbh"></div>
+      </div>
+      <div id="blines">
+${lineData.map((L) => `        <div class="bline" id="${L.id}"></div>`).join("\n")}
+      </div>`;
+  const js = `
+  // ---- body paradigm: BRUSHRAIL (brush-wipe reveals / wet-cloth wipe exits) ----
+  const RAILB = ${J(lineData)};
+  const brnd = mulberry32(${b.seed || 20260611});
+  const SVGNSB = "http://www.w3.org/2000/svg";
+  const ULD1 = "M 5 8 C 30 11.5, 68 4, 95 7";
+  const ULD2 = "M 2 9 C 32 12.5, 66 4.5, 98 7.5";
+
+  // ===== BAND: swipes in L→R behind a brush head (the gesture, low amplitude) =====
+  gsap.set("#band", { xPercent: -50, yPercent: -50, clipPath: "inset(0% 100% 0% 0%)" });
+  tl.to("#band", { clipPath: "inset(0% 0% 0% 0%)", duration: 0.2, ease: "power2.out" }, 0.08);
+  tl.fromTo("#bandbh", { left: -30, opacity: 0.6 },
+            { left: "100%", opacity: 0.6, duration: 0.2, ease: "power2.out" }, 0.08);
+  tl.set("#bandbh", { opacity: 0 }, 0.30);
+  // paper under light: the deckle under-sheet breathes faintly (baked f(t))
+  const bnB = ${breN}, bvB = [];
+  for (let k = 0; k <= bnB; k++) bvB.push(0.40 + 0.05 * Math.sin(2 * Math.PI * 0.32 * (k / bnB * ${breD})));
+  tl.to("#bandu1", { keyframes: { opacity: bvB }, duration: ${breD}, ease: "none" }, 0.3);
+
+  // ===== BODY: words brush-wiped on, lines wiped off like a wet cloth =====
+  RAILB.forEach((L) => {
+    const line = document.getElementById(L.id);
+    const rot = (brnd() - 0.5) * 2;                    // seeded ±1° tilt
+    L.words.forEach(([txt,, em]) => {
+      const cell = document.createElement("span"); cell.className = "cell";
+      const wrap = document.createElement("span"); wrap.className = "wrap";
+      const tx = document.createElement("span"); tx.textContent = txt;
+      const bh = document.createElement("div"); bh.className = "bh";
+      wrap.appendChild(tx); wrap.appendChild(bh); cell.appendChild(wrap);
+      if (em) {                                        // double curved ink underline
+        const svg = document.createElementNS(SVGNSB, "svg");
+        svg.setAttribute("class", "ul"); svg.setAttribute("viewBox", "0 0 100 14");
+        svg.setAttribute("preserveAspectRatio", "none");
+        const mkp = (d, w, op) => {
+          const p = document.createElementNS(SVGNSB, "path");
+          p.setAttribute("d", d); p.setAttribute("fill", "none");
+          p.setAttribute("stroke", ${J(dna.palette.ulInk || dna.palette.body)});
+          p.setAttribute("stroke-width", w);
+          p.setAttribute("stroke-opacity", op); p.setAttribute("stroke-linecap", "round");
+          p.setAttribute("opacity", "0"); svg.appendChild(p); return p;
+        };
+        cell._ulFat = mkp(ULD1, 7, 0.3);
+        cell._ulCore = mkp(ULD2, 2.6, 0.95);
+        cell.appendChild(svg);
+      }
+      line.appendChild(cell);
+    });
+    const ebh = document.createElement("div"); ebh.className = "ebh";
+    line.appendChild(ebh);
+    gsap.set(line, { xPercent: -50, yPercent: -50, rotation: rot });
+    tl.set(line, { opacity: 1 }, L.words[0][1] - 0.02);
+
+    L.words.forEach(([txt, st, em], wi) => {
+      const cell = line.children[wi];
+      const wrap = cell.firstChild, bh = wrap.children[1];
+      gsap.set(wrap, { clipPath: "inset(-14% 100% -14% 0%)" });
+      tl.to(wrap, { clipPath: "inset(-14% 0% -14% 0%)", duration: 0.16, ease: "power2.out" }, st);
+      tl.fromTo(bh, { left: -26, opacity: 0.55 },
+                { left: "100%", opacity: 0.55, duration: 0.16, ease: "power2.out" }, st);
+      tl.set(bh, { opacity: 0 }, st + 0.17);
+      if (em) {
+        [[cell._ulFat, 0.12], [cell._ulCore, 0.15]].forEach(([p, dly]) => {
+          const len = p.getTotalLength();
+          const tu = Math.min(st + dly, ${(DUR - 0.3).toFixed(3)});
+          gsap.set(p, { strokeDasharray: len, strokeDashoffset: len });
+          tl.set(p, { opacity: 1 }, tu);
+          tl.to(p, { strokeDashoffset: 0, duration: 0.22, ease: "power2.out" }, tu);
+        });
+      }
+    });
+
+    // EXIT: the reveal in reverse — a wet cloth wipes R→L, erase head riding
+    gsap.set(line, { clipPath: "inset(-30% 0% -30% 0%)" });
+    tl.to(line, { clipPath: "inset(-30% 100% -30% 0%)", duration: L.eraseEnd - L.eraseT,
+                  ease: "power2.in" }, L.eraseT);
+    tl.fromTo(ebh, { left: "100%", opacity: 0.5 },
+              { left: -34, opacity: 0.5, duration: L.eraseEnd - L.eraseT, ease: "power2.in" }, L.eraseT);
+    tl.set(ebh, { opacity: 0 }, L.eraseEnd + 0.01);
+    tl.set(line, { opacity: 0 }, L.eraseEnd + 0.02);
+  });
+${
+  b.yield && !heroInline
+    ? `
+  // APEX OWNS ITS WINDOW — band + the line under the gesture yield, band restores
+  tl.to(${heroLi >= 0 ? `["#band", "#br${heroLi}"]` : `"#band"`}, { opacity: ${b.yield.dim}, duration: 0.16 }, ${(heroIn - (b.yield.pre || 0.16)).toFixed(3)});
+${
+  heroIn + (b.yield.post || 0.46) + 0.3 < DUR
+    ? `  tl.to("#band", { opacity: 1, duration: 0.18 }, ${(heroIn + (b.yield.post || 0.46)).toFixed(3)});`
+    : ""
+}`
+    : ""
+}
+
+  // ending: the band itself is wiped off with the last line (one final R→L wipe)
+  tl.to("#band", { clipPath: "inset(0% 100% 0% 0%)", duration: 0.13, ease: "power2.in" }, ${lastE});
+  tl.fromTo("#bandbh", { left: "100%", opacity: 0.6 },
+            { left: -30, opacity: 0.6, duration: 0.13, ease: "power2.in" }, ${lastE});
+  tl.set("#bandbh", { opacity: 0 }, ${Math.min(lastE + 0.14, DUR - 0.01).toFixed(3)});`;
+  return { css, html, js };
+}
+
+function paradigmInkrail() {
+  // INKRAIL: sumi ink on still water — up to three fixed reading ROWS at the
+  // bottom center (rows cycle in pairs, the closing line takes the third row,
+  // so the final thought ACCUMULATES instead of replacing) where Mincho-serif
+  // ink words BLEED in over a paper-white halo glow (opacity snaps in 2
+  // frames; blur 12→0 + scale 1.25→1 carry the bleed — the apex bloom at low
+  // amplitude) while a duplicate blurred dark halo overshoots then tightens;
+  // an ink-settling RULE (gradient hairline) draws beneath each line;
+  // emphasis words shed a faint ink wisp curling off the word top; spent
+  // lines RE-DISSOLVE (blur up + spread + fade + slight rise — ink dispersing
+  // back into the water) as the line-after-next approaches (= the next
+  // occupant of their row); the closing lines persist to clip end; the rows
+  // visible under the bloom yield while the drop blooms.
+  const b = dna.body;
+  const rowGap = b.rowGap ?? 56;
+  const bottomPx = b.bottomPx ?? 36; // center of the LAST reading row
+  const n = LINES.length;
+  const base = n >= 3 ? 0 : 3 - n; // few lines sink to the lower rows
+  const lineData = LINES.map((L, li) => {
+    const slot = li === n - 1 && n >= 3 ? 2 : base + (li % 2);
+    let outT = null,
+      outDur = 0;
+    if (li + 2 < n) {
+      // re-dissolve as the line-after-next approaches; never dissolve mid-read
+      outDur = +Math.max(0.35, 0.5 - 0.05 * li).toFixed(2);
+      outT = +Math.max(
+        L.words[L.words.length - 1].start + 0.25,
+        LINES[li + 2].words[0].start - outDur - 0.05,
+      ).toFixed(3);
+    }
+    return {
+      id: "ik" + L.id,
+      in: +L.in.toFixed(3),
+      y: H - bottomPx - (2 - slot) * rowGap,
+      outT,
+      outDur,
+      words: L.words.map((w) => [w.display, +w.start.toFixed(3), w.minor ? 1 : 0]),
+    };
+  });
+  const INK = dna.palette.body;
+  const PAP = dna.palette.paper || "#fffaee",
+    PAP2 = dna.palette.paper2 || "#fff8e8";
+  const css = `
+  .irow { position:absolute; left:${W / 2}px; opacity:0; white-space:nowrap;
+          font-family:'${dna.fonts.body}', serif; font-weight:${b.weight || 400};
+          font-size:${b.fontPx}px; line-height:1.25; letter-spacing:${b.letterSpacing || "0.055em"};
+          color:${INK}; }
+  .irow .w { display:inline-block; position:relative; margin-right:0.34em; }
+  .irow .w:last-child { margin-right:0; }
+  .irow .ink { position:relative; display:inline-block; opacity:0;
+          text-shadow: 0 0 5px ${PAP}, 0 0 14px ${PAP}f2, 0 0 30px ${PAP2}d9, 0 1px 2px ${PAP}e6; }
+  .irow .halo { position:absolute; left:0; top:0; opacity:0; color:${INK}; filter:blur(9px); }
+  .irule { position:absolute; left:50%; bottom:-7px; width:86%; height:2px;
+           margin-left:-43%; opacity:0; transform-origin:50% 50%;
+           background: linear-gradient(90deg, ${INK}00 0%, ${INK}8c 18%, ${INK}8c 82%, ${INK}00 100%);
+           box-shadow: 0 1px 7px ${PAP}8c; filter: blur(0.8px); }
+  .iwisp { position:absolute; left:50%; top:-16px; width:22px; height:28px;
+           margin-left:-11px; opacity:0; border:3px solid transparent;
+           border-top-color:${INK}8c; border-radius:50%; filter:blur(2px); }`;
+  const html = lineData
+    .map((L) => `      <div class="irow" id="${L.id}" style="top:${L.y}px"></div>`)
+    .join("\n");
+  const js = `
+  // ---- body paradigm: INKRAIL (ink bleed-in / re-dissolve exits) ----
+  const RAILI = ${J(lineData)};
+  const IKLATE = ${(DUR - 0.84).toFixed(3)}; // late words bleed faster (resolve before clip end)
+  RAILI.forEach((L, li) => {
+    const line = document.getElementById(L.id);
+    const rule = document.createElement("div"); rule.className = "irule"; line.appendChild(rule);
+    L.words.forEach(([txt]) => {
+      const w = document.createElement("span"); w.className = "w";
+      const halo = document.createElement("span"); halo.className = "halo"; halo.textContent = txt;
+      const ink = document.createElement("span"); ink.className = "ink"; ink.textContent = txt;
+      w.appendChild(halo); w.appendChild(ink); line.appendChild(w);
+    });
+    gsap.set(line, { xPercent: -50, yPercent: -50 });
+    tl.set(line, { opacity: 1 }, L.in);
+    L.words.forEach(([txt, st, em], wi) => {
+      const w = line.children[wi + 1]; // children[0] is the rule
+      const halo = w.children[0], ink = w.children[1];
+      // BLEED IN: opacity snaps (2 frames); blur 12→0 + scale 1.25→1 carry the
+      // bleed (late words bleed faster so they fully resolve before clip end)
+      const late = st > IKLATE;
+      tl.fromTo(ink, { opacity: 0 }, { opacity: 1, duration: 0.083, ease: "none" }, st);
+      tl.fromTo(ink, { filter: "blur(12px)", scale: 1.25 },
+                { filter: "blur(0px)", scale: 1, duration: late ? 0.4 : 0.6, ease: "power2.out",
+                  transformOrigin: "50% 60%" }, st);
+      // the dark halo overshoots then tightens (the bloom motif, low amplitude)
+      tl.fromTo(halo, { opacity: em ? 0.55 : 0.5, scale: 1.5 },
+                { scale: 1.04, opacity: em ? 0.3 : 0.25, duration: late ? 0.5 : 0.7,
+                  ease: "power2.out", transformOrigin: "50% 60%" }, st);
+      // emphasis: a faint ink wisp curls off the word top (skipped near clip end)
+      if (em && st + 1.55 <= ${(DUR - 0.03).toFixed(3)}) {
+        const wsp = document.createElement("div"); wsp.className = "iwisp"; w.appendChild(wsp);
+        const dir = li % 2 === 0 ? 1 : -1;
+        tl.set(wsp, { opacity: 0.5, transformOrigin: "50% 50%" }, st + 0.55);
+        tl.fromTo(wsp, { y: 0, x: 0, rotation: 12 * dir, scaleY: 1 },
+                  { y: -38, x: 10 * dir, rotation: 92 * dir, scaleY: 1.55,
+                    duration: 1.0, ease: "power1.out" }, st + 0.55);
+        tl.to(wsp, { opacity: 0, duration: 0.42, ease: "power1.in" }, st + 1.12);
+      }
+    });
+    // ink-settling rule beneath the line
+    tl.set(rule, { opacity: 0.55 }, L.words[0][1] + 0.12);
+    tl.fromTo(rule, { scaleX: 0 }, { scaleX: 1, duration: 0.9, ease: "power2.out" },
+              L.words[0][1] + 0.12);
+    // EXIT: re-dissolve — blur up + spread + fade + slight rise, ink dispersing
+    // (the closing lines persist — the final thought stays readable)
+    if (L.outT !== null) {
+      tl.to(line, { filter: "blur(9px)", scale: 1.13, opacity: 0, y: -8,
+                    duration: L.outDur, ease: "power1.in", transformOrigin: "50% 50%" }, L.outT);
+      tl.set(line, { display: "none" }, L.outT + L.outDur + 0.02);
+    }
+  });
+${
+  b.yield && !heroInline
+    ? `
+  // rows visible under the bloom yield while the drop blooms, restore after.
+  // Overlap guards: dim only after the line is IN with runway before its exit;
+  // restore only with clear runway (else the line exits dimmed — one owner).
+  RAILI.forEach((L) => {
+    const dimT = ${(heroIn + (b.yield.delay ?? 0.12)).toFixed(3)};
+    if (L.in < dimT - 0.05 && (L.outT === null || L.outT > dimT + 0.35)) {
+      tl.to("#" + L.id, { opacity: ${b.yield.dim}, duration: 0.3, ease: "power1.out" }, dimT);
+      const resT = ${(heroIn + (b.yield.post ?? 1.07)).toFixed(3)};
+      if (L.outT === null || resT + 0.33 < L.outT)
+        tl.to("#" + L.id, { opacity: 1, duration: 0.3, ease: "power1.out" }, resT);
+    }
+  });`
+    : ""
+}`;
+  return { css, html, js };
+}
+
+// ---- ransom shared pieces: the cutout-chip recipes and the seeded paper-tear
+// polygon are ONE paper stock used by both layers (ransomrail body chips in the
+// fg, ransomnote letter chips in the bg) — emitted into each page separately
+function ransomChipCss(ls) {
+  const p = dna.palette;
+  return `
+  .ca { background:${p.paper || "#f5f1e4"}; color:${p.paperInk || "#17130d"}; font-family:'${dna.fonts.body}', sans-serif; letter-spacing:${ls}; }
+  .cb { background:${p.dark || "#141414"}; color:${p.darkInk || "#f7f5ef"}; font-family:'${dna.fonts.dark}', sans-serif; font-weight:800; }
+  .cc { background:${p.news || "#d8d3c5"}; color:${p.newsInk || "#262017"}; font-family:'${dna.fonts.news}', monospace; }
+  .cd { background:${p.accent || "#ffd23f"}; color:${p.accentInk || "#1c160c"}; font-family:'${dna.fonts.accent}', cursive; }`;
+}
+// seeded 12-vertex tear polygon — j() call order matches the demo exactly so
+// identical seeds reproduce the demo's torn edges
+const RANSOM_TEAR = `function tearPoly(r){
+    const j = () => +(r()*5).toFixed(1);
+    const p = [[j(),j()],[33,j()],[66,j()],[100-j(),j()],[100-j(),33],[100-j(),66],
+               [100-j(),100-j()],[66,100-j()],[33,100-j()],[j(),100-j()],[j(),66],[j(),33]];
+    return "polygon(" + p.map(q => q[0] + "% " + q[1] + "%").join(",") + ")";
+  }`;
+
+function paradigmRansomrail() {
+  // RANSOMRAIL: kidnapper's collage — every transcript word is a cutout chip
+  // in one of 4 cycled recipes (paper/Anton, black/Inter-800, newsprint/
+  // Special Elite, accent/Permanent Marker; emphasis words snap to the accent
+  // chip) PASTED along the bottom rail line with seeded crookedness, seeded
+  // ±px sizes and misaligned baselines — the paste is the apex slam motif at
+  // low amplitude (1f appear at scale 1.12 → power3.in crush → 2-frame contact
+  // squash → elastic settle). Emphasis = 1-frame RE-PASTE lift (shadow grows,
+  // rotation flips sign for good); exits = chips RIPPED off one by one with
+  // 1-frame paper-tear flashes under each; lines breathe through their hold;
+  // the whole railwrap yields while the apex letters slam behind the subject.
+  const b = dna.body;
+  const last = LINES.length - 1;
+  const lineData = LINES.map((L, li) => {
+    const n = L.words.length;
+    const stag = li === last ? 0.04 : 0.045;
+    const ripDur = li === last ? 0.12 : 0.14;
+    const lastSt = L.words[n - 1].start;
+    // rip cadence (demo): chips tear off just before the next line pastes —
+    // the rip tail overlaps the new line a beat (collage chaos, by design);
+    // a line whose last word just spoke waits lastWord+0.14 first
+    let ripStart =
+      li === last
+        ? Math.min(L.out - 0.04, DUR - 0.06 - ripDur - stag * (n - 1))
+        : Math.max(lastSt + 0.14, LINES[li + 1].in - ripDur - stag * (n - 1) + 0.05);
+    ripStart = +Math.min(ripStart, DUR - 0.06 - ripDur - stag * (n - 1)).toFixed(3);
+    const words = L.words.map((w, wi) => {
+      const st = +w.start.toFixed(3);
+      const R = +Math.max(ripStart + stag * wi, st + 0.12).toFixed(3);
+      // re-paste lift: needs its own window before the chip's rip
+      let emphT = w.minor ? +Math.min(st + (b.emphDelay ?? 0.23), R - 0.27).toFixed(3) : 0;
+      if (emphT && emphT < st + 0.08) emphT = 0;
+      return [w.display, st, emphT, R, w.minor ? 1 : 0];
+    });
+    // hold life: gentle collage breathe on the whole line (demo cadence)
+    const bs = +(L.words[0].start + 0.08).toFixed(3);
+    const bd = +Math.min(1.8, ripStart - 0.03 - bs).toFixed(2);
+    return { id: "rr" + L.id, in: +L.in.toFixed(3), ripDur, words, bs, bd: bd >= 0.3 ? bd : 0 };
+  });
+  const css = `
+  #rrailwrap { position:absolute; inset:0; }
+  .rline { position:absolute; left:${W / 2}px; top:${H - b.bottomPx}px; white-space:nowrap; }
+  .rline .w  { display:inline-block; position:relative; margin:0 5px; }
+  .rflash { position:absolute; inset:-4px; background:${dna.palette.flash || "#fffdf2"}; opacity:0; z-index:0; }
+  .rmove { display:inline-block; position:relative; z-index:1; opacity:0;
+           filter: drop-shadow(0 5px 0 rgba(8,6,4,0.5)); }
+  .rchip { display:inline-block; line-height:1.05; padding:0.08em 0.16em 0.11em;
+           text-transform:${b.textTransform || "uppercase"}; }
+${ransomChipCss(b.letterSpacing || "0.02em")}`;
+  const html = `      <div id="rrailwrap">
+${lineData.map((L) => `        <div class="rline" id="${L.id}"></div>`).join("\n")}
+      </div>`;
+  const js = `
+  // ---- body paradigm: RANSOMRAIL (chips pasted crooked / ripped off with tear flashes) ----
+  const RAILR = ${J(lineData)};
+  const crnd = mulberry32(${b.seed || 3940});
+  ${RANSOM_TEAR}
+  const HARDR = "drop-shadow(0 5px 0 rgba(8,6,4,0.5))";
+  const LIFTR = "drop-shadow(0 14px 3px rgba(8,6,4,0.35))";
+  const RECS = ["ca", "cb", "cc", "cd"];
+  let recC = 0, recPrev = -1;          // recipe cycle: emphasis snaps to the accent chip,
+  function nextRec(em) {               // never two identical chips in a row
+    let rec = em ? 3 : recC % 4;
+    if (rec === recPrev) { recC++; rec = recC % 4; }
+    if (!em) recC++;
+    recPrev = rec;
+    return rec;
+  }
+  RAILR.forEach((L, li) => {
+    const line = document.getElementById(L.id);
+    gsap.set(line, { xPercent: -50, yPercent: -100 });
+    L.words.forEach(([txt, st, emphT, R, em], wi) => {
+      const w = document.createElement("div"); w.className = "w";
+      const fl = document.createElement("div"); fl.className = "rflash";
+      fl.style.clipPath = tearPoly(crnd);
+      const mv = document.createElement("div"); mv.className = "rmove";
+      const chip = document.createElement("div"); chip.className = "rchip " + RECS[nextRec(em)];
+      chip.style.fontSize = (${b.fontPx} - 2 + Math.round(crnd() * 3) + (em ? 3 : 0)) + "px";
+      chip.style.clipPath = tearPoly(crnd);
+      chip.textContent = txt;
+      mv.appendChild(chip); w.appendChild(fl); w.appendChild(mv); line.appendChild(w);
+      // seeded crookedness: rot sign alternates with line+word parity (demo),
+      // baseline shove dy leans the other way
+      const sgn = (li + wi) % 2 === 0 ? -1 : 1;
+      const rot = sgn * (2 + crnd() * 2.5);
+      const dy = -sgn * (1 + crnd() * 2);
+      // PASTE = apex slam motif at low amplitude
+      tl.set(mv, { opacity: 1, scale: 1.12, rotation: rot * 1.5, y: dy - 8 }, st);
+      tl.to(mv,  { scale: 1, rotation: rot, y: dy, duration: 0.08, ease: "power3.in" }, st + 0.005);
+      tl.set(mv, { scaleX: 1.05, scaleY: 0.95 }, st + 0.09);
+      tl.to(mv,  { scaleX: 1, scaleY: 1, duration: 0.22, ease: "elastic.out(1, 0.4)" }, st + 0.173);
+      // EMPHASIS = re-paste: 1-frame lift (shadow grows), rotation flips sign for good
+      if (emphT) {
+        tl.set(mv, { y: dy - 7, scale: 1.08, rotation: -rot, filter: LIFTR }, emphT);
+        tl.to(mv,  { y: dy, scale: 1, duration: 0.09, ease: "power3.in" }, emphT + 0.083);
+        tl.set(mv, { filter: HARDR }, emphT + 0.175);
+        tl.set(mv, { scaleX: 1.04, scaleY: 0.96 }, emphT + 0.178);
+        tl.to(mv,  { scaleX: 1, scaleY: 1, duration: 0.16, ease: "elastic.out(1, 0.4)" }, emphT + 0.262);
+      }
+      // EXIT = ripped off, paper-tear flash 1 frame under the chip
+      tl.set(fl, { opacity: 0.85 }, R);
+      tl.set(fl, { opacity: 0 }, R + 0.045);
+      tl.to(mv,  { rotation: rot + (wi % 2 ? 16 : -17), y: dy - 30, opacity: 0,
+                   duration: L.ripDur, ease: "power2.in" }, R);
+    });
+    if (L.bd) tl.to(line, { keyframes: { scale: [1, 1.015, 1.005, 1.016, 1] },
+                            duration: L.bd, ease: "none" }, L.bs);
+  });
+${
+  b.yield && !heroInline
+    ? `  // rail yields while the apex letters slam behind the subject (container
+  // opacity — never contests the per-chip channels)
+  tl.to("#rrailwrap", { opacity: ${b.yield.dim}, duration: 0.12 }, ${Math.max(0.05, heroIn - (b.yield.pre ?? 0.02)).toFixed(3)});
+${
+  heroIn + (b.yield.post ?? 0.71) < DUR - 0.3
+    ? `  tl.to("#rrailwrap", { opacity: 1, duration: 0.2 }, ${(heroIn + (b.yield.post ?? 0.71)).toFixed(3)});`
+    : ""
+}`
+    : ""
+}`;
+  return { css, html, js };
+}
+
+const PARADIGMS = {
+  rail: paradigmRail,
+  panel: paradigmPanel,
+  poem: paradigmPoem,
+  takeover: paradigmTakeover,
+  lastpage: paradigmLastpage,
+  flaprail: paradigmFlaprail,
+  ledboard: paradigmLedboard,
+  vhsrail: paradigmVhsrail,
+  hudrail: paradigmHudrail,
+  carbonstrip: paradigmCarbonstrip,
+  laserrail: paradigmLaserrail,
+  stormrail: paradigmStormrail,
+  holorail: paradigmHolorail,
+  planktonrail: paradigmPlanktonrail,
+  sheenrail: paradigmSheenrail,
+  scoperail: paradigmScoperail,
+  paperrail: paradigmPaperrail,
+  popuprail: paradigmPopuprail,
+  chalkrail: paradigmChalkrail,
+  markerrail: paradigmMarkerrail,
+  brushrail: paradigmBrushrail,
+  inkrail: paradigmInkrail,
+  ransomrail: paradigmRansomrail,
+};
+
+function setpieceCpslam() {
+  // CP-language EMBED climax: acid-yellow word slams in BEHIND the subject with
+  // REAL notch cuts (SVG mask = true transparency over footage), a chromatic
+  // split that settles to a PERMANENT registration error, seeded glitch ticks,
+  // and a glitch-out exit. The frame stays footage — the word is set dressing.
+  const h = dna.hero,
+    p = h.params || {},
+    I = heroIn;
+  const YEL = dna.palette.body || "#FCEE0A",
+    CYN = "#00F0FF",
+    RED = "#FF003C";
+  const srnd = (() => {
+    let a = p.seed || 2077;
+    return () => {
+      a |= 0;
+      a = (a + 0x6d2b79f5) | 0;
+      let t = Math.imul(a ^ (a >>> 15), 1 | a);
+      t = (t + Math.imul(t ^ (t >>> 7), 61 | t)) ^ t;
+      return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
+    };
+  })();
+  const DISP = heroText.toUpperCase(),
+    hpx = HG.fontPx;
+  const halfW = HG.halfW || (DISP.length * 0.56 * hpx) / 2;
+  const BW = Math.round(halfW * 2 + 140),
+    BH = Math.round(hpx * 1.5);
+  const CX = BW - 80 > W ? W / 2 : Math.max(BW / 2 - 40, Math.min(W - BW / 2 + 40, HG.x)),
+    CY = HG.y;
+  // seeded diagonal cuts through the letter band (precision is not the point —
+  // the cuts read as stencil damage wherever they land)
+  const nN = Math.max(2, Math.floor(DISP.length / 2.2));
+  const used = [];
+  while (used.length < nN) {
+    const i = Math.floor(srnd() * DISP.length);
+    if (!used.includes(i)) used.push(i);
+  }
+  const notches = used
+    .map((i, k) => {
+      const cx = BW / 2 - halfW + (i + 0.5) * 0.56 * hpx + (srnd() - 0.5) * 8;
+      const cy = BH / 2 + (k % 2 ? 0.24 : -0.27) * hpx + (srnd() - 0.5) * 10;
+      return `<rect x="${(cx - hpx * 0.12).toFixed(0)}" y="${(cy - hpx * 0.038).toFixed(0)}" width="${(hpx * 0.24).toFixed(0)}" height="${(hpx * 0.076).toFixed(0)}" fill="black" transform="rotate(-45 ${cx.toFixed(0)} ${cy.toFixed(0)})"/>`;
+    })
+    .join("\n            ");
+  const lay = (id, fill) =>
+    `<g id="${id}"><rect x="0" y="0" width="${BW}" height="${BH}" fill="${fill}" mask="url(#cpm)"/></g>`;
+  const css = `
+  #cpband { position:absolute; left:0; top:-80px; width:100%; height:70px; opacity:0;
+            background: linear-gradient(180deg, rgba(0,240,255,0) 0%, rgba(0,240,255,0.4) 50%, rgba(0,240,255,0) 100%); }
+  #cps { position:absolute; left:${CX}px; top:${CY}px; width:0; height:0; opacity:0; }
+  #cpsW { position:absolute; left:0; top:0; transform:translate(-50%,-50%);
+          filter: drop-shadow(0 4px 18px rgba(0,0,0,0.5)); }
+  #cpkana { position:absolute; left:0; top:-${Math.round(hpx * 0.82)}px; transform:translate(-50%,-50%);
+            font-family:'Hiragino Sans','Hiragino Kaku Gothic ProN',sans-serif; font-weight:600;
+            font-size:20px; letter-spacing:0.5em; text-indent:0.5em; color:${YEL}; opacity:0;
+            white-space:nowrap; text-shadow: 0 2px 8px rgba(0,0,0,0.7); }`;
+  const html = `      <div id="cpband"></div>
+      <div id="cps">
+        <svg id="cpsW" width="${BW}" height="${BH}" viewBox="0 0 ${BW} ${BH}">
+          <defs><mask id="cpm">
+            <text x="${BW / 2}" y="${BH / 2}" text-anchor="middle" dominant-baseline="central"
+                  font-family="'${dna.fonts.hero}', sans-serif" font-size="${hpx}"
+                  letter-spacing="${(hpx * 0.04).toFixed(1)}" fill="white">${esc(DISP)}</text>
+            ${notches}
+          </mask></defs>
+          ${lay("cpC", CYN)}
+          ${lay("cpR", RED)}
+          ${lay("cpY", YEL)}
+        </svg>
+        <div id="cpkana">${esc(p.kana || "サイバーパンク")}</div>
+      </div>`;
+  // a climax is an EVENT: on long clips holding to clip-end turns it into
+  // wallpaper. Default hold ~2.6s after the slam; hero.exitAt / params.hold override.
+  const EX = theme.hero.exitAt ?? Math.min(heroOut - 0.2, I + (p.hold ?? 2.6));
+  const js = `
+  // ---- setpiece: CPSLAM (band charge -> crush slam -> permanent registration -> glitch-out) ----
+  const I = ${I.toFixed(3)};
+  const crnd = mulberry32(${p.seed || 2077});
+  tl.set("#cpband", { opacity: 1 }, I - 0.35);
+  tl.fromTo("#cpband", { y: 0 }, { y: ${H + 160}, duration: 0.36, ease: "power1.in" }, I - 0.35);
+  tl.set("#cpband", { opacity: 0 }, I + 0.01);
+  // crush slam (weighted), chromatic layers split wide on impact
+  tl.set("#cps", { opacity: 1 }, I - 0.04);
+  tl.fromTo("#cpsW", { scale: 2.6, filter: "blur(9px) brightness(2.2) drop-shadow(0 4px 18px rgba(0,0,0,0.5))" },
+    { scale: 1, filter: "blur(0px) brightness(1) drop-shadow(0 4px 18px rgba(0,0,0,0.5))", duration: 0.11, ease: "power4.in" }, I - 0.04);
+  tl.set("#cpsW", { scaleX: 1.09, scaleY: 0.93 }, I + 0.08);
+  tl.to("#cpsW", { scaleX: 1, scaleY: 1, duration: 0.46, ease: "elastic.out(1.05, 0.36)" }, I + 0.16);
+  // SVG <g> children move via attr.transform ONLY (banned: gsap x/y component
+  // props on SVG children — getBBox parse path). Frame-quantized step chain
+  // replaces the 0.16s recoil tween (identical on screen at 24fps).
+  const RG = (dx, dy, at) => { tl.set("#cpC", { attr: { transform: "translate(" + dx + " " + dy + ")" } }, at); tl.set("#cpR", { attr: { transform: "translate(" + (-dx) + " " + (-dy) + ")" } }, at); };
+  RG(9, 0, I - 0.04);
+  RG(6, 0, I + 0.02); RG(3, 0, I + 0.02 + F); RG(1, 0, I + 0.02 + 2 * F); RG(0, 0, I + 0.02 + 3 * F);
+  // ...then the print settles WRONG: permanent registration error (the look)
+  RG(2.5, -1, I + 0.3);
+  tl.fromTo("#cpkana", { opacity: 0 }, { opacity: 0.92, duration: 0.18 }, I + 0.22);
+  // living word: seeded glitch ticks (registration jolts / 1f slips)
+  let gt = I + 0.62;
+  while (gt < ${EX.toFixed(3)} - 0.25) {
+    if (crnd() < 0.55) {
+      RG(8, -1, gt); RG(2.5, -1, gt + F);
+    } else {
+      tl.set("#cps", { x: (crnd() - 0.5) * 10 }, gt);
+      tl.set("#cps", { x: 0 }, gt + F);
+    }
+    gt += 0.45 + crnd() * 0.6;
+  }
+  tl.to("#cpsW", { scale: 1.035, duration: 1.1, ease: "power1.inOut" }, I + 0.72);
+  // EXIT: glitch-out
+  const E = ${EX.toFixed(3)};
+  tl.set("#cpkana", { opacity: 0 }, E);
+  RG(15, -1, E);
+  tl.set("#cps", { x: -7 }, E + F);
+  tl.set("#cps", { opacity: 0, display: "none" }, E + 2 * F);`;
+  return { css, html, js };
+}
+
+function setpieceCoverword() {
+  // CP2077 COVER-LETTERFORM slam, precision pass: the spoken apex word set in
+  // the replica typeface of the official mark (assets/brand/CyberpunkReplica.ttf
+  // — lowercase glyphs carry the logo's actual brush chops, blade terminals and
+  // spikes), in logo case (First-upper). The setpiece adds only what the FONT
+  // does not carry: the solid cyan duplicate offset down-left, the baseline
+  // streak + cyan pixel debris, the circuit trace off the tail, and the
+  // tear-in/living-print/tear-out choreography. No synthetic letter surgery.
+  const h = dna.hero,
+    p = h.params || {},
+    I = heroIn;
+  const YEL = dna.palette.hot || "#FCEE0A",
+    CYN = dna.palette.accent || "#52BEDC";
+  const srnd = (() => {
+    let a = p.seed || 77;
+    return () => {
+      a |= 0;
+      a = (a + 0x6d2b79f5) | 0;
+      let t = Math.imul(a ^ (a >>> 15), 1 | a);
+      t = (t + Math.imul(t ^ (t >>> 7), 61 | t)) ^ t;
+      return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
+    };
+  })();
+  const CPM = JSON.parse(
+    fs.readFileSync(path.join(SKILL, "assets/brand/cyberpunk-widths.json"), "utf8"),
+  );
+  const fontB64 = fs
+    .readFileSync(path.join(SKILL, "assets/brand/CyberpunkReplica.ttf"))
+    .toString("base64");
+  const DISP = HG.coverDisp || heroText[0].toUpperCase() + heroText.slice(1).toLowerCase();
+  const hpx = HG.fontPx;
+  const em =
+    HG.coverEm ||
+    [...DISP].reduce((a, c) => a + (CPM.widths[c] || 0.7), 0) + 0.01 * (DISP.length - 1);
+  const INK = HG.coverInk || { inkTop: 0.5, inkBot: -0.25, inkH: 0.75 };
+  const IH = INK.inkH * hpx; // visual ink height (px)
+  const Wd = em * hpx;
+  const BW = Math.round(Wd + 2.4 * hpx),
+    BH = Math.round(IH + 0.7 * hpx);
+  // baseline placed so the measured ink box is vertically centered
+  const baseY = Math.round(BH / 2 + ((INK.inkTop + INK.inkBot) / 2) * hpx);
+  const feetY = Math.round(baseY - INK.inkBot * hpx); // lowest ink (px, y-down)
+  const x0 = Math.round((BW - Wd) / 2),
+    x1 = Math.round(x0 + Wd);
+  const CX = BW - 120 > W ? W / 2 : Math.max(BW / 2 - 60, Math.min(W - BW / 2 + 60, HG.x)),
+    CY = HG.y;
+  const P = (pts, fill) =>
+    `<polygon points="${pts.map((q) => q[0].toFixed(0) + "," + q[1].toFixed(0)).join(" ")}" fill="${fill}"/>`;
+  // baseline streak: thin brush drag just under the glyph feet, pointed right
+  // tip past the tail (the font's own C/K blades carry the rest of the energy)
+  let extras = "";
+  // streak band MERGES with the glyph feet (official: letters melt into it)
+  const sT = feetY - 0.075 * IH,
+    sB = feetY + 0.012 * IH;
+  extras += P(
+    [
+      [x0 - 0.16 * hpx, sT + 2],
+      [x1 + 0.1 * hpx, sT],
+      [x1 + 0.55 * hpx, sB - 1],
+      [x0 - 0.05 * hpx, sB],
+    ],
+    "white",
+  );
+  let cuts = "";
+  for (let k = 0; k < 3; k++) {
+    const gx = x0 + (0.1 + srnd() * 0.8) * Wd,
+      gw = (0.05 + srnd() * 0.1) * hpx;
+    cuts += P(
+      [
+        [gx, sT - 1],
+        [gx + gw, sT - 1],
+        [gx + gw, sB + 1],
+        [gx, sB + 1],
+      ],
+      "black",
+    );
+  }
+  // cyan pixel debris along the streak
+  let debris = "";
+  for (let k = 0; k < 8; k++) {
+    const dx = x0 - 0.3 * hpx + srnd() * (Wd + 0.9 * hpx),
+      dw = (0.06 + srnd() * 0.3) * hpx;
+    const dy = sT - 2 + srnd() * (sB - sT + 4);
+    debris += `<rect x="${dx.toFixed(0)}" y="${dy.toFixed(0)}" width="${dw.toFixed(0)}" height="${(1.5 + srnd() * 2.5).toFixed(1)}" fill="${CYN}" opacity="0.85"/>`;
+  }
+  // circuit trace off the tail (the official mark's cyan trace language)
+  const tx = x1 + 0.25 * hpx,
+    ty = feetY + 0.14 * IH;
+  const trace = `<g id="cwT" opacity="0">
+      <path d="M ${x0 + Wd * 0.45} ${ty} H ${tx} l ${0.14 * hpx} ${0.07 * hpx} h ${0.3 * hpx}" stroke="${CYN}" stroke-width="2" fill="none"/>
+      <circle cx="${(tx + 0.05 * hpx).toFixed(0)}" cy="${ty.toFixed(0)}" r="3.5" fill="none" stroke="${CYN}" stroke-width="2"/>
+      <circle cx="${(tx + 0.44 * hpx).toFixed(0)}" cy="${(ty + 0.07 * hpx).toFixed(0)}" r="3.5" fill="${CYN}"/>
+    </g>`;
+  const bnd = [
+    [0, 0.42],
+    [0.42, 0.6],
+    [0.6, 1],
+  ];
+  const clipDefs = bnd
+    .map(
+      (b, i) =>
+        `<clipPath id="cwb${i}"><rect x="-60" y="${(b[0] * BH).toFixed(0)}" width="${BW + 120}" height="${((b[1] - b[0]) * BH).toFixed(0)}"/></clipPath>`,
+    )
+    .join("");
+  const layer = (fill) =>
+    `<rect x="0" y="0" width="${BW}" height="${BH}" fill="${fill}" mask="url(#cwm)"/>`;
+  const EX = theme.hero.exitAt ?? Math.min(heroOut - 0.2, I + (p.hold ?? 2.6));
+  const css = `
+  @font-face { font-family:'CPReplica'; src: url(data:font/ttf;base64,${fontB64}) format('truetype'); font-display: block; }
+  #cw { position:absolute; left:${CX}px; top:${CY}px; width:0; height:0; opacity:0; }
+  #cwW { position:absolute; left:0; top:0; transform:translate(-50%,-50%);
+         filter: drop-shadow(0 5px 20px rgba(0,0,0,0.5)); }`;
+  const html = `      <div id="cw">
+        <svg id="cwW" width="${BW}" height="${BH}" viewBox="0 0 ${BW} ${BH}" style="overflow:visible">
+          <defs>
+            <mask id="cwm">
+              <text x="${x0}" y="${baseY}" font-family="'CPReplica'" font-size="${hpx}"
+                    letter-spacing="${(hpx * 0.01).toFixed(1)}" fill="white">${esc(DISP)}</text>
+              ${extras}
+              ${cuts}
+            </mask>
+            ${clipDefs}
+          </defs>
+          <g id="cwC" transform="translate(-7 8)">${layer(CYN)}</g>
+          ${bnd.map((_, i) => `<g clip-path="url(#cwb${i})"><g id="cwY${i}">${layer(YEL)}</g></g>`).join("\n          ")}
+          <g id="cwD">${debris}</g>
+          ${trace}
+        </svg>
+      </div>`;
+  const js = `
+  // ---- setpiece: COVERWORD v2 (replica letterforms; tear-in -> living print -> tear-out) ----
+  const I = ${I.toFixed(3)};
+  const wrnd = mulberry32(${p.seed || 77});
+  const TB = (sel, dx, dy, at) => tl.set(sel, { attr: { transform: "translate(" + dx + " " + (dy || 0) + ")" } }, at);
+  // corrupted boot-flick of the whole lockup during the charge
+  tl.set("#cw", { opacity: 0.35, filter: "saturate(0) brightness(1.6)" }, I - 0.30);
+  tl.set("#cw", { opacity: 0 }, I - 0.30 + F);
+  tl.set("#cw", { opacity: 0.5, filter: "saturate(0) brightness(2)" }, I - 0.13);
+  tl.set("#cw", { opacity: 0 }, I - 0.13 + F);
+  // SLAM: crush in with slice displacement, snap into register
+  tl.set("#cw", { opacity: 1, filter: "none" }, I - 0.02);
+  tl.fromTo("#cwW", { scale: 2.4 }, { scale: 1, duration: 0.10, ease: "power4.in" }, I - 0.02);
+  TB("#cwY0", -34, 0, I - 0.02); TB("#cwY1", 26, 0, I - 0.02); TB("#cwY2", -18, 0, I - 0.02);
+  TB("#cwC", -44, 8, I - 0.02);
+  tl.set("#cwD", { opacity: 0 }, I - 0.02);
+  TB("#cwY0", 0, 0, I + 0.10); TB("#cwY1", 0, 0, I + 0.10); TB("#cwY2", 0, 0, I + 0.10);
+  TB("#cwC", -7, 8, I + 0.10);
+  tl.set("#cwW", { scaleX: 1.08, scaleY: 0.94 }, I + 0.10);
+  tl.to("#cwW", { scaleX: 1, scaleY: 1, duration: 0.45, ease: "elastic.out(1.05, 0.38)" }, I + 0.16);
+  tl.set("#cwD", { opacity: 1 }, I + 0.12);
+  tl.set("#cwT", { opacity: 0.9 }, I + 0.34);
+  // living print: seeded slice slips + cyan jolts
+  let gt = I + 0.55;
+  while (gt < ${EX.toFixed(3)} - 0.25) {
+    const r = wrnd();
+    if (r < 0.4) { const b = Math.floor(wrnd() * 3); TB("#cwY" + b, (wrnd() - 0.5) * 22, 0, gt); TB("#cwY" + b, 0, 0, gt + F); }
+    else if (r < 0.7) { TB("#cwC", -16, 8, gt); TB("#cwC", -7, 8, gt + F); }
+    else { tl.set("#cw", { x: (wrnd() - 0.5) * 9 }, gt); tl.set("#cw", { x: 0 }, gt + F); }
+    gt += 0.4 + wrnd() * 0.55;
+  }
+  tl.to("#cwW", { scale: 1.04, duration: 1.1, ease: "power1.inOut" }, I + 0.66);
+  // EXIT: tear cascade -> gone
+  const E = ${EX.toFixed(3)};
+  TB("#cwY0", 52, 0, E); TB("#cwY1", -38, 0, E); TB("#cwY2", 30, 0, E);
+  TB("#cwC", -30, 8, E);
+  tl.set("#cwT", { opacity: 0 }, E);
+  tl.set("#cw", { opacity: 0.45 }, E + F);
+  tl.set("#cw", { opacity: 0, display: "none" }, E + 2 * F);`;
+  return { css, html, js };
+}
+function setpieceSettle() {
+  const I = heroIn;
+  const E = theme.hero.exitAt ?? Math.min(heroOut, DUR - 0.12);
+  const ruleW = Math.round(2 * HG.halfW * 0.62);
+  const holdDur = Math.max(0.4, E - I - 0.85);
+  const css = `
+  ${dna.plate.dim ? `#dimP { position:absolute; inset:0; opacity:0; background:#06080c; }` : ""}
+  #stl { position:absolute; left:${HG.x}px; top:${HG.y}px; transform:translate(-50%,-50%); }
+  #stl-w { font-family:'${dna.fonts.hero}', sans-serif; font-weight:700; font-size:${HG.fontPx}px;
+           line-height:1; letter-spacing:0.01em; white-space:nowrap; color:${dna.palette.body};
+           text-shadow: 0 2px 18px rgba(0,0,0,0.5), 0 1px 4px rgba(0,0,0,0.35); opacity:0; }
+  #stl-rule { position:absolute; left:50%; bottom:-20px; transform:translateX(-50%);
+              width:0; height:3px; border-radius:2px; background:${dna.palette.accent};
+              opacity:0.85; box-shadow: 0 1px 8px rgba(0,0,0,0.4); }`;
+  const html = `      ${dna.plate.dim ? `<div id="dimP"></div>` : ""}
+      <div id="stl"><div id="stl-w">${heroDisplay.toUpperCase()}</div><div id="stl-rule"></div></div>`;
+  const js = `
+  // ---- setpiece: SETTLE (quiet blur-settle + accent underline; restraint IS the style) ----
+  const I = ${I.toFixed(3)};
+${
+  dna.plate.dim
+    ? `  tl.fromTo("#dimP", { opacity: 0 }, { opacity: ${dna.plate.dim}, duration: 0.35, ease: "power2.in" }, I - 0.3);
+  tl.to("#dimP", { opacity: 0, duration: 0.4, ease: "power1.in" }, ${(E + 0.02).toFixed(3)});`
+    : ""
+}
+  // opacity lands in ~2 frames; the transform settles separately (no ghost ramp)
+  tl.fromTo("#stl-w", { opacity: 0 }, { opacity: 1, duration: 0.09, ease: "power1.out" }, I);
+  tl.fromTo("#stl-w", { y: 14, scale: 1.05, filter: "blur(9px)" },
+            { y: 0, scale: 1, filter: "blur(0px)", duration: 0.45, ease: "power3.out" }, I);
+  tl.fromTo("#stl-rule", { width: 0 }, { width: ${ruleW}, duration: 0.35, ease: "expo.out" }, I + 0.28);
+  // hold life: one slow visible loom
+  tl.to("#stl", { scale: 1.018, duration: ${holdDur.toFixed(2)}, ease: "power1.inOut" }, I + 0.6);
+  // exit: soften and lift (asymmetric to the landing)
+  tl.to("#stl-rule", { width: 0, opacity: 0, duration: 0.2, ease: "power2.in" }, ${(E - 0.05).toFixed(3)});
+  tl.to("#stl-w", { filter: "blur(5px)", duration: 0.22, ease: "power1.in" }, ${(E - 0.02).toFixed(3)});
+  tl.to("#stl", { opacity: 0, y: -10, duration: 0.24, ease: "power2.in" }, ${E.toFixed(3)});
+  tl.set("#stl", { display: "none" }, ${(E + 0.26).toFixed(3)});`;
+  return { css, html, js };
+}
+function setpieceFlapboard() {
+  // SPLIT-FLAP DEPARTURES BOARD: floodlights swing on, the housing clacks down
+  // behind the subject, one giant flap tile per char flip-cycles seeded wrong
+  // glyphs then locks the real char left→right with clack rhythm; rule wipes,
+  // status ticker types on; one tile re-flutters during the hold; tiles flip
+  // to blank and the housing flips away.
+  const h = dna.hero,
+    p = h.params,
+    I = heroIn;
+  const N = heroText.length;
+  const gap = p.gap || 7;
+  const tileW = HG.tileW,
+    tileH = HG.tileH,
+    fpx = HG.fontPx;
+  const lockWin = p.lockWindow || 0.34;
+  const AIN = I - 0.15;
+  const lockEnd = I + lockWin;
+  const E = heroOut;
+  const headH = 34;
+  const boardH = 10 + headH + tileH + 18;
+  const boardW = HG.halfW * 2;
+  const ruleW = Math.round(boardW - 43);
+  const ruleY = Math.round(HG.y + boardH / 2 + 37);
+  const tagW = Math.round((p.tag || "").length * 19);
+  const flutterIdx = Math.min(N - 1, Math.floor(N * 0.6));
+  const exit0 = E - ((N - 1) * 0.03 + 0.09);
+  const css = `
+  #dimF   { position:absolute; inset:0; opacity:0; background:#06080c; }
+  #scrimF { position:absolute; inset:0; opacity:0;
+            background: linear-gradient(180deg, rgba(5,7,11,0.72) 0%, rgba(5,7,11,0.3) 42%,
+                        rgba(5,7,11,0) 68%); }
+  #glowF  { position:absolute; inset:0; opacity:0;
+            background: radial-gradient(46% 38% at ${((HG.x / W) * 100).toFixed(1)}% ${((HG.y / H) * 100).toFixed(1)}%, rgba(255,196,110,0.5) 0%,
+                        rgba(255,160,60,0.16) 55%, rgba(0,0,0,0) 78%); }
+  #persp { position:absolute; inset:0; perspective:950px; }
+  #board { position:absolute; left:${HG.x}px; top:${HG.y}px; opacity:0; transform-origin:50% 0%;
+           background: linear-gradient(180deg,#171B21 0%,#101319 100%);
+           border-radius:8px; border:1px solid #353C47; border-top:3px solid ${dna.palette.hot};
+           padding:10px 20px 18px;
+           box-shadow: 0 18px 60px rgba(0,0,0,0.65), inset 0 1px 0 rgba(255,255,255,0.06); }
+  #bhead { display:flex; justify-content:space-between; align-items:baseline; gap:40px;
+           font-family:'${dna.fonts.tag}', sans-serif; font-weight:600; font-size:24px;
+           letter-spacing:4px; color:${dna.palette.hot}; opacity:0.9; padding:0 4px 8px; }
+  #bhead .r { color:#8A8F98; letter-spacing:3px; }
+  #slots { display:flex; gap:${gap}px; }
+  .atile { position:relative; width:${tileW}px; height:${tileH}px; perspective:620px;
+           border-radius:4px; background:#0A0D11;
+           box-shadow: inset 0 0 0 1px #1F242B, inset 0 5px 12px rgba(0,0,0,0.75); }
+  .aflap { position:absolute; inset:0; transform-origin:50% 0%; backface-visibility:hidden;
+           border-radius:4px; text-align:center;
+           background: linear-gradient(180deg,#343A43 0%,#272C34 48%,#1A1E25 52%,#242931 100%);
+           box-shadow: inset 0 0 0 1px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.08);
+           font-family:'${dna.fonts.hero}', sans-serif; font-size:${fpx}px; line-height:${tileH + 2}px;
+           color:${dna.palette.boardBone || dna.palette.body};
+           text-shadow: 0 4px 14px rgba(0,0,0,0.55); }
+  .aflap::after { content:""; position:absolute; left:0; right:0; top:50%; height:2px;
+                  margin-top:-1px; background:rgba(0,0,0,0.5); }
+  .ac { position:absolute; inset:0; }
+  .ac.wv { display:none; color:#C3C8D0; }
+  .ac.rl { visibility:hidden; }
+  #ruleF { position:absolute; left:${HG.x}px; top:${ruleY}px; width:${ruleW}px; height:3px;
+           margin-left:-${Math.round(ruleW / 2)}px; background:${dna.palette.hot}; opacity:0; transform-origin:50% 50%;
+           box-shadow: 0 0 12px ${dna.palette.hot}99; }
+  #tagwrapF { position:absolute; left:${HG.x}px; top:${ruleY + 14}px; transform:translateX(-50%);
+              overflow:hidden; white-space:nowrap; width:0; }
+  #tagF { font-family:'${dna.fonts.tag}', sans-serif; font-weight:600; font-size:27px; letter-spacing:7px;
+          color:${dna.palette.hot}; white-space:nowrap; text-shadow: 0 2px 8px rgba(0,0,0,0.7); }`;
+  const html = `      <div id="dimF"></div><div id="scrimF"></div><div id="glowF"></div>
+      <div id="persp">
+        <div id="board">
+          <div id="bhead"><span>${esc(p.headerLeft || "★ DEPARTURES")}</span><span class="r">${esc(p.headerRight || "")}</span></div>
+          <div id="slots"></div>
+        </div>
+      </div>
+      <div id="ruleF"></div>
+      ${p.tag ? `<div id="tagwrapF"><div id="tagF">${esc(p.tag)}</div></div>` : ""}`;
+  const js = `
+  // ---- setpiece: FLAPBOARD (housing clack → flip-cycle → lock left→right → board life) ----
+  const I = ${I.toFixed(3)}, AIN = ${AIN.toFixed(3)}, LOCK0 = I, LSTEP = ${(lockWin / Math.max(1, N - 1)).toFixed(5)};
+  const WORDB = ${J(heroText)}, BGLYPHS = ${J(p.glyphs || "ABCDEFGHIKLMNOPRSTUVXYZ0123456789")};
+  const HOTB = ${J(dna.palette.hot)}, BONEB = ${J(dna.palette.boardBone || dna.palette.body)};
+  const brnd = mulberry32(${p.seed || 8088});
+  // scene reaction: floodlights swing onto the board
+  tl.fromTo("#dimF",   { opacity: 0 }, { opacity: ${dna.plate.dim}, duration: 0.16, ease: "power2.in" }, AIN - 0.08);
+  tl.fromTo("#scrimF", { opacity: 0 }, { opacity: ${dna.plate.charge}, duration: 0.16, ease: "power2.in" }, AIN - 0.08);
+  tl.to("#dimF",   { opacity: ${(dna.plate.dim * 0.59).toFixed(2)}, duration: 0.8, ease: "power2.out" }, ${(lockEnd - 0.23).toFixed(3)});
+  tl.to("#scrimF", { opacity: ${(dna.plate.charge * 0.61).toFixed(2)}, duration: 0.8, ease: "power2.out" }, ${(lockEnd - 0.23).toFixed(3)});
+  tl.to(["#dimF", "#scrimF"], { opacity: 0, duration: 0.4, ease: "power1.in" }, ${(E - 0.39).toFixed(3)});
+  // build the flap tiles (one per char; spaces are blank tiles)
+  const slots = document.getElementById("slots");
+  const btiles = [];
+  for (let i = 0; i < WORDB.length; i++) {
+    const atile = document.createElement("div"); atile.className = "atile";
+    if (WORDB[i] === " ") {
+      atile.style.width = Math.round(${tileW} * 0.45) + "px";
+      slots.appendChild(atile); btiles.push(null); continue;
+    }
+    const flap = document.createElement("div"); flap.className = "aflap";
+    const n = 3 + Math.floor(brnd() * 3); // 3-5 seeded wrong chars
+    const wrongs = [];
+    for (let k = 0; k < n; k++) {
+      const s = document.createElement("div"); s.className = "ac wv";
+      s.textContent = BGLYPHS[Math.floor(brnd() * BGLYPHS.length)];
+      flap.appendChild(s); wrongs.push(s);
+    }
+    const rl = document.createElement("div"); rl.className = "ac rl"; rl.textContent = WORDB[i];
+    flap.appendChild(rl);
+    atile.appendChild(flap); slots.appendChild(atile);
+    btiles.push({ atile, flap, rl, wrongs, n });
+  }
+  gsap.set("#board", { xPercent: -50, yPercent: -50 });
+  // housing clacks down (the flap motif at housing scale)
+  tl.set("#board", { opacity: 1 }, AIN);
+  tl.fromTo("#board", { rotationX: -52 }, { rotationX: 0, duration: 0.13, ease: "power3.in" }, AIN);
+  tl.set("#board", { scaleX: 1.012, scaleY: 0.965 }, AIN + 0.13);
+  tl.to("#board", { scaleX: 1, scaleY: 1, duration: 0.28, ease: "elastic.out(1, 0.42)" }, AIN + 0.16);
+  // flip-cycle wrong chars, lock left→right with clack rhythm
+  btiles.forEach((T, i) => {
+    if (!T) return;
+    const Li = LOCK0 + i * LSTEP;
+    const Si = AIN + 0.035 + i * 0.008;
+    const cyc = (Li - Si) / T.n;
+    tl.set(T.wrongs[0], { display: "block" }, AIN);
+    tl.fromTo(T.flap, { rotationX: -85 }, { rotationX: 0, duration: cyc * 0.8, ease: "power1.in" }, Si);
+    for (let k = 1; k < T.n; k++) {
+      const c = Si + k * cyc;
+      tl.set(T.wrongs[k - 1], { display: "none" }, c);
+      tl.set(T.wrongs[k], { display: "block" }, c);
+      tl.fromTo(T.flap, { rotationX: -85 }, { rotationX: 0, duration: cyc * 0.8, ease: "power1.in" }, c);
+    }
+    // LOCK: real char drops in, hot flash, squash, elastic settle, cool to bone
+    tl.set(T.wrongs[T.n - 1], { display: "none" }, Li);
+    tl.set(T.rl, { visibility: "visible" }, Li);
+    tl.set(T.flap, { color: HOTB, filter: "brightness(2.1)" }, Li);
+    tl.fromTo(T.flap, { rotationX: -90 }, { rotationX: 0, duration: 0.075, ease: "power2.in" }, Li);
+    tl.set(T.atile, { scaleX: 1.05, scaleY: 0.92 }, Li + 0.075);
+    tl.to(T.atile, { scaleX: 1, scaleY: 1, duration: 0.3, ease: "elastic.out(1, 0.38)" }, Li + 0.1);
+    tl.to(T.flap, { color: BONEB, filter: "brightness(1)", duration: 0.45, ease: "power2.out" }, Li + 0.15);
+  });
+  // clack rhythm: baked y-jitter on the housing across the lock window
+  tl.to("#board", { keyframes: { y: [0, 2, 0, 1.4, 0, 2, 0, 1.2, 0, 1.8, 0] },
+                    duration: ${(lockWin + 0.08).toFixed(2)}, ease: "none" }, LOCK0 - 0.01);
+  // lock-complete: the big clack (plate punch lands here)
+  tl.set("#board", { scaleX: 1.03, scaleY: 0.96 }, ${lockEnd.toFixed(3)});
+  tl.to("#board", { scaleX: 1, scaleY: 1, duration: 0.42, ease: "elastic.out(1, 0.4)" }, ${(lockEnd + 0.03).toFixed(3)});
+  tl.fromTo("#glowF", { opacity: 0 }, { opacity: 0.85, duration: 0.12, ease: "power2.out" }, ${lockEnd.toFixed(3)});
+  tl.to("#glowF", { keyframes: { opacity: [0.85, 0.55, 0.7, 0.45, 0.6, 0.42, 0.5] },
+                    duration: ${Math.max(0.4, E - 0.49 - (lockEnd + 0.15)).toFixed(2)}, ease: "none" }, ${(lockEnd + 0.15).toFixed(3)});
+  tl.fromTo("#ruleF", { scaleX: 0, opacity: 1 }, { scaleX: 1, duration: 0.3, ease: "expo.out" }, ${(lockEnd + 0.05).toFixed(3)});
+${p.tag ? `  tl.to("#tagwrapF", { width: ${tagW}, duration: 0.4, ease: "steps(16)" }, ${(lockEnd + 0.11).toFixed(3)});` : ""}
+  // hold life: loom + one mechanical re-flutter tic — boards do this
+  tl.to("#board", { scaleX: 1.022, scaleY: 1.022, duration: ${Math.max(0.4, Math.min(1.0, exit0 - lockEnd - 0.55)).toFixed(2)}, ease: "power1.inOut" }, ${(lockEnd + 0.5).toFixed(3)});
+  const T6 = btiles[${flutterIdx}];
+  if (T6 && ${(lockEnd + 1.0).toFixed(3)} < ${(exit0 - 0.2).toFixed(3)}) {
+    const ft = ${(lockEnd + 0.9).toFixed(3)};
+    tl.set(T6.rl, { visibility: "hidden" }, ft);
+    tl.set(T6.wrongs[0], { display: "block" }, ft);
+    tl.fromTo(T6.flap, { rotationX: -70 }, { rotationX: 0, duration: 0.055, ease: "power1.in" }, ft);
+    tl.set(T6.wrongs[0], { display: "none" }, ft + 0.06);
+    tl.set(T6.rl, { visibility: "visible" }, ft + 0.06);
+    tl.fromTo(T6.flap, { rotationX: -80 }, { rotationX: 0, duration: 0.06, ease: "power2.in" }, ft + 0.06);
+  }
+  // exit: tiles flip to blank (0→90) cascading, housing flips away
+  tl.to("#glowF", { opacity: 0, duration: 0.3, ease: "power1.in" }, ${(E - 0.49).toFixed(3)});
+  tl.to("#ruleF", { scaleX: 0, opacity: 0, duration: 0.12, ease: "power2.in" }, ${(E - 0.44).toFixed(3)});
+${p.tag ? `  tl.to("#tagwrapF", { width: 0, duration: 0.16, ease: "steps(8)" }, ${(E - 0.44).toFixed(3)});` : ""}
+  btiles.forEach((T, i) => {
+    if (!T) return;
+    tl.to(T.flap, { rotationX: 90, duration: 0.085, ease: "power2.in" }, ${exit0.toFixed(3)} + i * 0.03);
+  });
+  tl.to("#board", { rotationX: -45, opacity: 0, duration: 0.13, ease: "power2.in" }, ${(E - 0.04).toFixed(3)});
+  tl.set("#board", { display: "none" }, ${Math.min(E + 0.08, DUR - 0.015).toFixed(3)});`;
+  return { css, html, js };
+}
+
+function setpieceLedwipe() {
+  // TRANSIT LED BOARD: cool scrim + dim charge the room, a departure-board
+  // panel EXPANDS upward (stepped paging motif), then the word lights
+  // column-by-column via a L→R illumination wipe (clipPath steps) inside a
+  // chasing LED-marquee border; PA "ding" = two brightness pulses; hold life =
+  // glow breathe + LED dropouts; exit pages the word up out of the panel and
+  // the panel collapses back down.
+  const h = dna.hero,
+    p = h.params,
+    I = heroIn;
+  const C = I + (p.wipeDur || 0.3); // wipe completes = contact
+  const E = heroOut;
+  const panelW = HG.panelW,
+    panelH = HG.panelH,
+    fpx = HG.fontPx;
+  const px = Math.round(HG.x - panelW / 2),
+    py = Math.round(HG.y - panelH / 2);
+  const spillW = panelW - 180,
+    spillH = Math.round(panelH * 1.9);
+  const exScroll = +(E - 0.72).toFixed(3);
+  const wipeSteps = Math.max(8, Math.round(heroText.length * 1.4));
+  const A = dna.palette.accent,
+    HOT = dna.palette.hot,
+    GRN = dna.palette.green || "#36e57a";
+  // marquee dot lattice scales with the panel; chase runs until the exit
+  const nTop = Math.max(10, Math.round(panelW / 45));
+  const nSide = Math.max(2, Math.round((panelH - 19) / 52) - 1);
+  const kMax = Math.max(4, Math.floor((exScroll - (I - 0.01)) / 0.1));
+  const css = `
+  #scrimL { position:absolute; inset:0; opacity:0;
+            background: radial-gradient(120% 105% at 50% 40%, rgba(2,6,14,0) 30%, rgba(2,6,14,0.85) 100%); }
+  #dimL { position:absolute; inset:0; opacity:0; background:#020409; }
+  #spillL { position:absolute; left:${Math.round(HG.x - spillW / 2)}px; top:${Math.round(HG.y - spillH / 2)}px;
+            width:${spillW}px; height:${spillH}px; opacity:0;
+            background: radial-gradient(closest-side, ${A}4d, ${A}00 72%); }
+  #apxL { position:absolute; left:${px}px; top:${py}px; width:${panelW}px; height:${panelH}px; opacity:0; }
+  #panelL { position:absolute; inset:0; border-radius:8px;
+            background-color: rgba(8,8,11,0.93);
+            background-image: radial-gradient(${A}0e 1px, rgba(0,0,0,0) 1.4px);
+            background-size: 7px 7px;
+            border:2px solid ${A}4d;
+            box-shadow: 0 18px 50px rgba(0,0,0,0.55), inset 0 0 70px ${A}0d; }
+  .ldot { position:absolute; width:7px; height:7px; border-radius:50%;
+          background:${A}; opacity:0.18; box-shadow:0 0 6px ${A}8c; }
+  #ptagL, #gtagL { position:absolute; top:16px; font-family:'${dna.fonts.tag}', monospace; font-size:22px;
+                   letter-spacing:0.18em; opacity:0; white-space:nowrap; }
+  #ptagL { left:28px; color:${A}9e; }
+  #gtagL { right:28px; color:${GRN}; text-shadow:0 0 8px ${GRN}80; }
+  #panwinL { position:absolute; left:24px; right:24px; top:44px; bottom:18px; overflow:hidden; }
+  #scrollL { position:absolute; inset:0; }
+  #ghostL, #awordL { position:absolute; left:50%; top:50%;
+                     font-family:'${dna.fonts.hero}', monospace; font-size:${fpx}px; line-height:1;
+                     letter-spacing:0.05em; white-space:nowrap; }
+  #ghostL { color:${A}; opacity:0; }
+  #awordL { color:${A}; opacity:0;
+            text-shadow: 0 0 18px ${A}8c, 0 0 2px ${HOT}cc; }`;
+  const html = `      <div id="scrimL"></div><div id="dimL"></div><div id="spillL"></div>
+      <div id="apxL">
+        <div id="panelL">
+          <div id="ptagL">${esc(p.headerLeft || "NOW ARRIVING ▸ 19:42")}</div>
+          <div id="gtagL">${esc(p.headerRight || "GATE A4")}</div>
+          <div id="panwinL">
+            <div id="scrollL">
+              <div id="ghostL">${esc(heroText)}</div>
+              <div id="awordL">${esc(heroText)}</div>
+            </div>
+          </div>
+        </div>
+      </div>`;
+  const js = `
+  // ---- setpiece: LEDWIPE (panel expands → L→R illumination wipe → PA ding → page-up exit) ----
+  const I = ${I.toFixed(3)}, C = ${C.toFixed(3)};
+  gsap.set("#panelL", { transformOrigin: "50% 100%", scaleY: 0 });
+  gsap.set(["#ghostL", "#awordL"], { xPercent: -50, yPercent: -50 });
+
+  // ===== scene charge / release =====
+  tl.fromTo("#scrimL", { opacity: 0 }, { opacity: ${dna.plate.charge}, duration: 0.30, ease: "power2.in" }, I - 0.31);
+  tl.fromTo("#dimL",   { opacity: 0 }, { opacity: ${dna.plate.dim}, duration: 0.25, ease: "power2.in" }, I - 0.25);
+  tl.fromTo("#spillL", { opacity: 0 }, { opacity: 0.45, duration: 0.40, ease: "power2.out" }, I + 0.05);
+  tl.to("#spillL", { opacity: 0, duration: 0.35, ease: "power1.in" }, ${(E - 0.54).toFixed(3)});
+  tl.to(["#scrimL", "#dimL"], { opacity: 0, duration: 0.40, ease: "power1.in" }, ${(E - 0.44).toFixed(3)});
+
+  // ===== board expands UPWARD (stepped paging motif, apex scale) =====
+  tl.set("#apxL", { opacity: 1 }, I - 0.26);
+  tl.to("#panelL", { scaleY: 1, duration: 0.20, ease: "steps(6)" }, I - 0.25);
+  tl.set("#panelL", { borderColor: "${HOT}f2" }, I - 0.05);
+  tl.set("#panelL", { borderColor: "${A}4d" }, I + 0.07);
+
+  // power-on boot: unlit LED cells + header tags flicker alive
+  tl.set("#ghostL", { opacity: 0.06 }, I - 0.045);
+  tl.set("#ghostL", { opacity: 0.13 }, I - 0.003);
+  tl.set(["#ptagL", "#gtagL"], { opacity: 0.4 }, I - 0.045);
+  tl.set(["#ptagL", "#gtagL"], { opacity: 0.9 }, I - 0.003);
+
+  // ===== APEX: L→R illumination wipe — LEDs light column by column =====
+  tl.set("#awordL", { opacity: 1, color: "${HOT}" }, I);
+  tl.fromTo("#awordL", { clipPath: "inset(0% 100% 0% 0%)" },
+            { clipPath: "inset(0% 0% 0% 0%)", duration: ${(p.wipeDur || 0.3).toFixed(2)}, ease: "steps(${wipeSteps})" }, I);
+  tl.set("#awordL", { clipPath: "none" }, C + 0.05);       // free the glow halo
+  tl.to("#awordL", { color: "${A}", duration: 0.60, ease: "power1.in" }, C + 0.05); // hot → amber cool
+
+  // contact: squash held 2 frames, elastic settle (board cell flexes)
+  tl.set("#scrollL", { scaleX: 1.06, scaleY: 0.94 }, C);
+  tl.to("#scrollL", { scaleX: 1, scaleY: 1, duration: 0.42, ease: "elastic.out(1, 0.4)" }, C + 0.083);
+
+  // PA "ding" = two quick brightness pulses
+  tl.set("#panwinL", { filter: "brightness(1.7)" },  C + 0.02);
+  tl.set("#panwinL", { filter: "brightness(1)" },    C + 0.10);
+  tl.set("#panwinL", { filter: "brightness(1.45)" }, C + 0.18);
+  tl.set("#panwinL", { filter: "brightness(1)" },    C + 0.26);
+${
+  C + 0.99 < exScroll
+    ? `
+  // hold life: glow breathes + LED dropouts
+  tl.to("#awordL", { textShadow: "0 0 30px ${A}d9, 0 0 4px ${HOT}f2",
+                     duration: 0.45, ease: "sine.inOut" }, C + 0.54);
+  tl.to("#awordL", { textShadow: "0 0 18px ${A}8c, 0 0 2px ${HOT}cc",
+                     duration: 0.45, ease: "sine.inOut" }, C + 0.99);
+  tl.set("#awordL", { opacity: 0.82 }, C + 0.61); tl.set("#awordL", { opacity: 1 }, C + 0.652);
+  tl.set("#awordL", { opacity: 0.90 }, C + 1.04); tl.set("#awordL", { opacity: 1 }, C + 1.082);
+  tl.set("#ptagL", { opacity: 0.45 }, C + 0.41); tl.set("#ptagL", { opacity: 0.9 }, C + 0.452);`
+    : ""
+}
+
+  // ===== exit: word pages up out of the window, board collapses =====
+  tl.to("#scrollL", { y: ${-(panelH - 62)}, duration: 0.22, ease: "steps(6)" }, ${exScroll.toFixed(3)});
+  tl.set(["#ptagL", "#gtagL"], { opacity: 0 }, ${(exScroll + 0.2).toFixed(3)});
+  tl.to("#panelL", { scaleY: 0, duration: 0.18, ease: "steps(6)" }, ${(exScroll + 0.24).toFixed(3)});
+  tl.set("#apxL", { opacity: 0 }, ${(exScroll + 0.44).toFixed(3)});
+
+  // ===== chasing LED marquee border (8-phase set chain) =====
+  const panelL = document.getElementById("panelL");
+  const PW = ${panelW}, PH = ${panelH}, groups = [[], [], [], [], [], [], [], []];
+  const pts = [];
+  for (let i = 0; i < ${nTop}; i++) pts.push([10 + i * (PW - 27) / ${nTop - 1}, 6]);        // top L→R
+  for (let j = 0; j < ${nSide}; j++) pts.push([PW - 13, 6 + (j + 1) * (PH - 19) / ${nSide + 1}]); // right ↓
+  for (let i = ${nTop - 1}; i >= 0; i--) pts.push([10 + i * (PW - 27) / ${nTop - 1}, PH - 13]);   // bottom R→L
+  for (let j = ${nSide - 1}; j >= 0; j--) pts.push([6, 6 + (j + 1) * (PH - 19) / ${nSide + 1}]);  // left ↑
+  pts.forEach(([x, y], i) => {
+    const d = document.createElement("div");
+    d.className = "ldot"; d.style.left = Math.round(x) + "px"; d.style.top = Math.round(y) + "px";
+    d.style.opacity = "0"; panelL.appendChild(d);
+    groups[i % 8].push(d);
+  });
+  groups.forEach((g) => tl.set(g, { opacity: 0.18 }, I - 0.02));
+  for (let k = 0; k <= ${kMax}; k++) {
+    const t = I - 0.01 + k * 0.1;
+    for (let q = 0; q < 8; q++) {
+      const lit = (((q - k) % 8) + 8) % 8 < 2;
+      tl.set(groups[q], { opacity: lit ? 0.95 : 0.18 }, t);
+    }
+  }`;
+  return { css, html, js };
+}
+
+function setpieceVhsosd() {
+  // REC FREEZE: the word slams in as a huge camcorder OSD readout BEHIND the
+  // subject. Permanent lens vignette = the camcorder look; a backlight-comp
+  // scrim kills the bright sky behind the word. Arrival = tracking-sliced
+  // crush (3 horizontal clip-path bands sheared + blurred, power4.in) that
+  // SNAPS into register on the contact frame, squash → elastic settle; heavy
+  // red/cyan misregistration cools from ±arrival px to ±settled px and keeps
+  // BREATHING through the hold; tape-weave y jitter + slow loom; auto-iris
+  // pump (white wash up, dark dip, settle). Exit = REWIND streak left with a
+  // flat-white echo copy.
+  const h = dna.hero,
+    p = h.params,
+    I = heroIn;
+  const C = I + (p.crush ?? 0.1); // contact: slices snap into register
+  const X = theme.hero.exitAt ?? Math.min(heroOut, I + (p.hold ?? 1.69)); // REWIND
+  const clips = p.bandClips || [
+    [0, 64],
+    [36, 30],
+    [70, 0],
+  ];
+  const shear = p.bandShear || [-46, 40, -34];
+  const mi = p.misregIn ?? 11, // arrival misregistration (px)
+    m = p.misreg ?? 3; // settled misregistration (px)
+  const RED = dna.palette.red || "#FF2E2E",
+    CYN = dna.palette.cyan || "#3FE8E8";
+  const yPct = ((HG.y / H) * 100).toFixed(0);
+  const css = `
+  #vig { position:absolute; inset:0; opacity:0;
+         background: radial-gradient(115% 100% at 50% 46%, rgba(0,0,0,0) 52%, rgba(0,0,0,${p.vignette ?? 0.34}) 100%); }
+  #vscrim { position:absolute; inset:0; opacity:0;
+           background: radial-gradient(58% 44% at 50% ${yPct}%, rgba(0,0,0,0.62) 0%, rgba(0,0,0,0.34) 55%, rgba(0,0,0,0) 78%); }
+  #iris  { position:absolute; inset:0; opacity:0; background:#ffffff; }
+  #irisd { position:absolute; inset:0; opacity:0; background:#000000; }
+  #osdw, #oecho { position:absolute; left:${HG.x}px; top:${HG.y}px; opacity:0; }
+  .aw { position:absolute; left:0; top:0; white-space:nowrap;
+        font-family:'${dna.fonts.hero}', monospace; font-size:${HG.fontPx}px; line-height:1;
+        letter-spacing:0.02em; }
+  #mr { color:${RED}; opacity:0.55; }
+  #mc { color:${CYN}; opacity:0.55; }
+  .wb2 { color:${dna.palette.body}; text-shadow: 0 4px 24px rgba(0,0,0,0.6), 0 1px 4px rgba(0,0,0,0.45); }
+  ${clips.map((c, i) => `#vb${i + 1} { clip-path: inset(${c[0]}% 0 ${c[1]}% 0); }`).join("\n  ")}
+  #oe { color:#ffffff; opacity:0.4; text-shadow:none; }`;
+  const html = `      <div id="vig"></div>
+      <div id="vscrim"></div>
+      <div id="osdw">
+        <div id="weave">
+          <div class="aw" id="mr">${esc(heroText)}</div>
+          <div class="aw" id="mc">${esc(heroText)}</div>
+          ${clips.map((_, i) => `<div class="aw wb2" id="vb${i + 1}">${esc(heroText)}</div>`).join("\n          ")}
+        </div>
+      </div>
+      <div id="oecho"><div class="aw" id="oe">${esc(heroText)}</div></div>
+      <div id="iris"></div>
+      <div id="irisd"></div>`;
+  const bandIds = clips.map((_, i) => "#vb" + (i + 1));
+  // hold life windows (clamped inside [contact, exit] so nothing fights the rewind)
+  const weaveTs = [];
+  const wv = p.weave || [-2, 1, -1, 2, -1, 1, -2, 0];
+  for (let k = 0; k < wv.length; k++) {
+    const t = C + 0.19 + k * 0.17;
+    if (t < X - 0.05) weaveTs.push([+t.toFixed(3), wv[k]]);
+  }
+  const brDur = Math.min(1.3, X - (C + 0.21) - 0.05);
+  const loomDur = Math.min(0.92, X - (C + 0.64) - 0.03);
+  const js = `
+  // ---- setpiece: VHSOSD (tracking-sliced OSD slam → misreg breathe → REWIND exit) ----
+  const I = ${I.toFixed(3)}, C = ${C.toFixed(3)}, X = ${X.toFixed(3)};
+  gsap.set(${J(["#mr", "#mc", ...bandIds, "#oe"])}, { xPercent:-50, yPercent:-50 });
+  gsap.set("#weave", { x: 0, y: 0 });
+
+  // camcorder lens vignette — present the whole clip
+  tl.set("#vig", { opacity: 1 }, 0.02);
+
+  // backlight-compensation scrim behind the word (the sky is bright up there)
+  tl.fromTo("#vscrim", { opacity: 0 }, { opacity: ${dna.plate.charge}, duration: 0.20, ease: "power2.in" }, I - 0.04);
+  tl.to("#vscrim", { opacity: ${(dna.plate.charge * 0.69).toFixed(2)}, duration: 0.8, ease: "power2.out" }, C + 0.35);
+  tl.to("#vscrim", { opacity: 0, duration: 0.30, ease: "power1.in" }, X);
+
+  // ===== ARRIVAL: tracking-sliced crush, opacity 1 instantly =====
+  tl.set("#osdw", { opacity: 1 }, I);
+  tl.fromTo("#osdw", { scale: 2.9 }, { scale: 1, duration: C - I, ease: "power4.in" }, I);
+  const SHEAR = ${J(shear)};
+  ${J(bandIds)}.forEach((sel, i) => {
+    tl.fromTo(sel, { x: SHEAR[i], filter: "blur(10px) brightness(2.6)" },
+              { x: Math.round(SHEAR[i] * 0.3), filter: "blur(1px) brightness(1.7)", duration: C - I, ease: "power4.in" }, I);
+  });
+  tl.set("#mr", { x: -${mi} }, I);
+  tl.set("#mc", { x: ${mi} }, I);
+
+  // SNAP into register on the contact frame + squash, elastic settle
+  tl.set(${J(bandIds)}, { x: 0, filter: "brightness(1.85)" }, C);
+  tl.set("#mr", { x: -${m} }, C);
+  tl.set("#mc", { x: ${m} }, C);
+  tl.set("#osdw", { scaleX: 1.10, scaleY: 0.90 }, C);
+  tl.to("#osdw", { scaleX: 1, scaleY: 1, duration: 0.50, ease: "elastic.out(1, 0.36)" }, C + 0.083);
+  tl.to(${J(bandIds)}, { filter: "brightness(1)", duration: 0.45, ease: "power2.out" }, C + 0.10);
+
+  // AUTO-IRIS PUMP: wash up, then a dark dip, once
+  tl.to("#iris", { opacity: 0.20, duration: 0.12, ease: "sine.out" }, C + 0.04);
+  tl.to("#iris", { opacity: 0, duration: 0.33, ease: "power1.in" }, C + 0.16);
+  tl.to("#irisd", { opacity: ${dna.plate.dim}, duration: 0.28, ease: "sine.out" }, C + 0.55);
+  tl.to("#irisd", { opacity: 0, duration: 0.40, ease: "sine.in" }, C + 0.85);
+${
+  brDur > 0.3
+    ? `
+  // ===== HOLD LIFE: misregistration breathes, tape weave, slow loom =====
+  tl.to("#mr", { keyframes: { x: [-${m}, -${(m * 1.53).toFixed(1)}, -${(m * 1.07).toFixed(1)}, -${(m * 1.67).toFixed(1)}, -${(m * 1.17).toFixed(1)}] }, duration: ${brDur.toFixed(2)}, ease: "none" }, C + 0.21);
+  tl.to("#mc", { keyframes: { x: [${m}, ${(m * 1.53).toFixed(1)}, ${(m * 1.07).toFixed(1)}, ${(m * 1.67).toFixed(1)}, ${(m * 1.17).toFixed(1)}] }, duration: ${brDur.toFixed(2)}, ease: "none" }, C + 0.21);
+  ${J(weaveTs)}.forEach(([t, v]) => tl.set("#weave", { y: v }, t));`
+    : ""
+}
+${
+  loomDur > 0.3
+    ? `  tl.to("#osdw", { keyframes: { scale: [1, 1.03, 1.015, 1.028] }, duration: ${loomDur.toFixed(2)}, ease: "none" }, C + 0.64);`
+    : ""
+}
+
+  // ===== EXIT: REWIND — streak left with echo copy =====
+  tl.to("#osdw", { x: -190, scaleX: 1.3, opacity: 0, duration: 0.13, ease: "power2.in" }, X);
+  tl.set("#oecho", { opacity: 1 }, X);
+  tl.fromTo("#oe", { x: 0, opacity: 0.4 }, { x: -95, opacity: 0, duration: 0.18, ease: "power2.in" }, X + 0.01);
+  tl.set(["#osdw","#oecho"], { display: "none" }, X + 0.25);`;
+  return { css, html, js };
+}
+
+function setpieceBossintro() {
+  // BOSS INTRO (bg): the room darkens behind a CRT edge glow (cyan base wash,
+  // pulses on the last emphasis before the boss and spills magenta on the
+  // strobe + the final word), WARNING blinks 2x above the word rect, then
+  // ~COLS×ROWS seeded pixel blocks fall steps(3) into a tight matrix grid
+  // covering the word rect (1-frame white land tick each — the coin-blip motif
+  // at block scale), and the word flashes ON (instant, oversized, quantized
+  // crush → 2-frame squash → elastic settle) with chromatic ghost layers and a
+  // 3-frame palette strobe. Hold: quantized breathe + CRT glow cycle + baked
+  // block shimmer blinks. Exit: per-letter checkerboard dissolve; blocks drop
+  // away quantized. FG furniture (rides rail.html via fg parts): letterbox
+  // bars slam in with a 1-frame overshoot and a HI-SCORE odometer rolls
+  // top-right through the hold.
+  const h = dna.hero,
+    p = h.params || {},
+    I = heroIn;
+  const CY = dna.palette.accent,
+    MG = dna.palette.magenta || "#FF2E88",
+    YL = dna.palette.yellow || "#FFE600";
+  const FLASH = I + (p.flashDelay ?? 0.14);
+  const EX = theme.hero.exitAt ?? Math.min(heroOut - 0.2, I + (p.hold ?? 1.24));
+  const ROWS = p.rows || 4;
+  const CWp = Math.round(HG.fontPx * 0.7),
+    CHp = Math.round(HG.fontPx * 0.5);
+  const COLS = Math.ceil((HG.halfW * 2 + 100) / CWp);
+  const X0 = Math.round(HG.x - (COLS * CWp) / 2),
+    Y0 = Math.round(HG.y - (ROWS * CHp) / 2);
+  // scene-reaction pulses: the edge glow pre-echoes the boss on the last
+  // emphasis word before the takeover; magenta answers on the final word
+  const minorsBefore = LINES.flatMap((L) => L.words).filter((w) => w.minor && w.start < I - 0.3);
+  const pulseT = minorsBefore.length ? minorsBefore[minorsBefore.length - 1].start : null;
+  const endPulse =
+    LASTWORD.start + 0.384 < DUR - 0.02 && LASTWORD.start > EX + 0.4 ? LASTWORD.start : null;
+  const lb = p.letterbox || 44;
+  const css = `
+  #bdim  { position:absolute; inset:0; opacity:0;
+           background:linear-gradient(180deg, rgba(2,3,12,0.66) 0%, rgba(2,3,12,0.40) 55%, rgba(2,3,12,0.30) 100%); }
+  #edgeC { position:absolute; inset:0; opacity:0; box-shadow: inset 0 0 130px ${CY}4d; }
+  #edgeM { position:absolute; inset:0; opacity:0; box-shadow: inset 0 0 130px ${MG}52; }
+  #blocks{ position:absolute; inset:0; }
+  .blk   { position:absolute; opacity:0; }
+  #bossWord { position:absolute; left:${HG.x}px; top:${HG.y}px; opacity:0; }
+  .bw    { position:absolute; left:0; top:0; white-space:nowrap;
+           font-family:'${dna.fonts.hero}', monospace; font-size:${HG.fontPx}px; line-height:1; }
+  #bwC   { color:${CY}; opacity:0; }
+  #bwM   { color:${MG}; opacity:0; }
+  #bwMain{ color:#ffffff;
+           text-shadow:0 6px 0 rgba(0,0,0,0.6), 0 0 16px rgba(0,0,0,0.9), 0 0 5px rgba(0,0,0,0.85); }
+  #bwMain .bl { display:inline-block; }
+  #warning { position:absolute; left:${HG.x}px; top:${Math.round(HG.y - HG.fontPx * 1.43)}px; opacity:0;
+             font-family:'${dna.fonts.tag}', monospace; font-size:26px; letter-spacing:0.4em;
+             color:${MG};
+             text-shadow:0 0 14px rgba(0,0,0,0.95), 0 0 6px rgba(0,0,0,0.9), 0 4px 0 rgba(0,0,0,0.8); }`;
+  const html = `      <div id="bdim"></div>
+      <div id="edgeC"></div>
+      <div id="edgeM"></div>
+      <div id="blocks"></div>
+      <div id="bossWord">
+        <div class="bw" id="bwC">${esc(heroText)}</div>
+        <div class="bw" id="bwM">${esc(heroText)}</div>
+        <div class="bw" id="bwMain"></div>
+      </div>
+      <div id="warning">${esc(p.tag || "WARNING")}</div>`;
+  const js = `
+  // ---- setpiece: BOSSINTRO (dim + WARNING -> pixel-block assembly -> strobe flash) ----
+  const I = ${I.toFixed(3)}, FLASH = ${FLASH.toFixed(3)}, OUT = ${EX.toFixed(3)};
+  const CYc = ${J(CY)}, MGc = ${J(MG)}, YLc = ${J(YL)}, WHc = "#ffffff";
+  const brnd = mulberry32(${p.seed || 13013});
+
+  // ===== scene reaction: CRT edge glow lives behind the subject =====
+  tl.set("#edgeC", { opacity: 0.28 }, 0.05);
+${
+  pulseT != null
+    ? `  // pulse on the last emphasis before the boss
+  tl.set("#edgeC", { opacity: 0.62 }, ${pulseT.toFixed(3)});
+  tl.set("#edgeC", { opacity: 0.28 }, ${(pulseT + 0.084).toFixed(3)});`
+    : ""
+}
+  // boss dim: room darkens for the boss intro (helps a bright sky too)
+  tl.to("#bdim", { opacity: ${dna.plate.dim ?? 0.58}, duration: 0.12, ease: "power2.out" }, I - 0.15);
+  tl.set("#edgeC", { opacity: 0.8 }, FLASH);
+  tl.to("#edgeC", { opacity: 0.34, duration: 0.6, ease: "power2.out" }, FLASH + 0.08);
+  tl.set("#edgeM", { opacity: 0.5 }, FLASH + 0.084);            // magenta strobe spill
+  tl.to("#edgeM", { opacity: 0, duration: 0.25, ease: "power1.out" }, FLASH + 0.126);
+  tl.to("#bdim", { opacity: 0, duration: 0.35, ease: "power1.inOut" }, OUT + 0.10);
+${
+  endPulse != null
+    ? `  // magenta answers on the final word
+  tl.set("#edgeM", { opacity: 0.55 }, ${endPulse.toFixed(3)});
+  tl.to("#edgeM", { opacity: 0, duration: 0.3, ease: "power1.out" }, ${(endPulse + 0.084).toFixed(3)});`
+    : ""
+}
+
+  // ===== WARNING blinks 2x above the word =====
+  tl.set("#warning", { opacity: 1 }, I - 0.135);
+  tl.set("#warning", { opacity: 0 }, I - 0.05);
+  tl.set("#warning", { opacity: 1 }, I + 0.035);
+  tl.set("#warning", { opacity: 0 }, I + 0.12);
+  gsap.set("#warning", { xPercent: -50, yPercent: -50 });
+
+  // ===== pixel-block boss assembly: blocks fall steps(3) into a tight grid =====
+  const blocksEl = document.getElementById("blocks");
+  const X0 = ${X0}, Y0 = ${Y0}, COLS = ${COLS}, ROWS = ${ROWS}, CW = ${CWp}, CH = ${CHp};
+  for (let c = 0; c < COLS; c++) {
+    for (let r = 0; r < ROWS; r++) {
+      const b = document.createElement("div");
+      b.className = "blk"; blocksEl.appendChild(b);
+      const s = 8 + Math.round(brnd() * 6);                       // 8–14px
+      const jx = Math.round((brnd() - 0.5) * 6), jy = Math.round((brnd() - 0.5) * 6);
+      const px = brnd();
+      const col = px < 0.4 ? CYc : px < 0.78 ? MGc : px < 0.93 ? YLc : WHc;
+      gsap.set(b, { width: s, height: s,
+                    left: X0 + c * CW + (CW - s) / 2 + jx,
+                    top:  Y0 + r * CH + (CH - s) / 2 + jy,
+                    backgroundColor: col });
+      const start = Math.min(I - 0.15 + c * 0.010 + brnd() * 0.04, FLASH - 0.10);
+      let dur = 0.12 + brnd() * 0.06;
+      if (start + dur > FLASH - 0.02) dur = FLASH - 0.02 - start;
+      const fall = 240 + brnd() * 260;
+      tl.set(b, { opacity: 0.9, y: -fall }, start);
+      tl.to(b, { y: 0, duration: dur, ease: "steps(3)" }, start);
+      // 1-frame white land tick (the coin-blip motif at block scale)
+      const land = start + dur;
+      tl.set(b, { backgroundColor: WHc }, land);
+      tl.set(b, { backgroundColor: col, opacity: 0.85 }, land + 0.042);
+      // hold shimmer: baked blink sets (no infinite repeats)
+      const t1 = FLASH + 0.11 + brnd() * 0.45, t2 = FLASH + 0.61 + brnd() * 0.4;
+      if (t1 + 0.083 < OUT) { tl.set(b, { opacity: 0.5 },  t1); tl.set(b, { opacity: 0.85 }, t1 + 0.083); }
+      if (t2 + 0.083 < OUT) { tl.set(b, { opacity: 0.55 }, t2); tl.set(b, { opacity: 0.85 }, t2 + 0.083); }
+      // exit: blocks drop off, quantized
+      const tE = Math.min(OUT + brnd() * 0.15, ${(DUR - 0.32).toFixed(2)});
+      tl.to(b, { y: 220 + brnd() * 140, opacity: 0, duration: 0.2 + brnd() * 0.1,
+                 ease: "steps(3)" }, tE);
+    }
+  }
+
+  // ===== the word flashes ON over the block grid =====
+  const main = document.getElementById("bwMain");
+  const letters = [];
+  ${J(heroText)}.split("").forEach((ch) => {
+    const s = document.createElement("span");
+    s.className = "bl"; s.textContent = ch === " " ? "\\u00a0" : ch;
+    main.appendChild(s); letters.push(s);
+  });
+  gsap.set("#bwC",   { xPercent: -50, yPercent: -50, x: -4 });
+  gsap.set("#bwM",   { xPercent: -50, yPercent: -50, x: 4 });
+  gsap.set("#bwMain",{ xPercent: -50, yPercent: -50 });
+  gsap.set("#bossWord", { transformOrigin: "50% 50%" });
+
+  // arrival: instant-on at full opacity, quantized crush, 2-frame squash, elastic settle
+  tl.set("#bossWord", { opacity: 1, scale: 1.15 }, FLASH);
+  tl.set(["#bwC", "#bwM"], { opacity: 0.85 }, FLASH);
+  tl.to("#bossWord", { scale: 1, duration: 0.1, ease: "steps(3)" }, FLASH);
+  tl.set("#bossWord", { scaleX: 1.07, scaleY: 0.92 }, FLASH + 0.1);
+  tl.to("#bossWord", { scaleX: 1, scaleY: 1, duration: 0.3,
+                       ease: "elastic.out(1, 0.38)" }, FLASH + 0.142);
+  // 3-frame palette strobe (white -> cyan -> magenta -> white)
+  tl.set(main, { color: CYc }, FLASH + 0.042);
+  tl.set(main, { color: MGc }, FLASH + 0.084);
+  tl.set(main, { color: WHc }, FLASH + 0.126);
+  // hold life: quantized breathe + CRT glow cycle (emitted only with runway)
+  if (FLASH + 0.61 < OUT) {
+    tl.to("#bossWord", { scale: 1.016, duration: 0.4, ease: "sine.inOut",
+                         repeat: 1, yoyo: true }, FLASH + 0.61);
+  }
+  const HALO = ", 0 6px 0 rgba(0,0,0,0.6), 0 0 16px rgba(0,0,0,0.9), 0 0 5px rgba(0,0,0,0.85)";
+  [[0.2, CYc], [0.5, MGc], [0.8, CYc]].forEach(([dt, gc]) => {
+    if (FLASH + dt < OUT) tl.set(main, { textShadow: "0 0 22px " + gc + "d9" + HALO }, FLASH + dt);
+  });
+
+  // exit: checkerboard dissolve — letters vanish in 2 alternating set passes
+  letters.forEach((s, i) => {
+    tl.set(s, { opacity: 0 }, i % 2 === 0 ? OUT : OUT + 0.083);
+  });
+  tl.set(["#bwC", "#bwM"], { opacity: 0 }, OUT + 0.042);
+  tl.set("#bossWord", { opacity: 0, display: "none" }, OUT + 0.17);`;
+  // fg furniture: letterbox bars + HI-SCORE odometer ride the fg alpha layer
+  // (in FRONT of the subject — the cabinet frames the player)
+  const fgCss = `
+  #lbTop { position:absolute; left:0; top:-${lb}px;    width:${W}px; height:${lb}px; background:#000; z-index:14; }
+  #lbBot { position:absolute; left:0; bottom:-${lb}px; width:${W}px; height:${lb}px; background:#000; z-index:14; }
+  #hi    { position:absolute; right:36px; top:${lb + 18}px; opacity:0; white-space:nowrap;
+           font-family:'${dna.fonts.tag}', monospace; font-size:18px; z-index:15;
+           text-shadow:0 3px 0 rgba(0,0,0,0.75), 0 0 10px rgba(0,0,0,0.6); }
+  #hi .lab { color:${CY}; margin-right:0.5em; }
+  #hi #hsv { color:${YL}; }`;
+  const fgHtml = `      <div id="lbTop"></div>
+      <div id="lbBot"></div>
+      <div id="hi"><span class="lab">HI-SCORE</span><span id="hsv">0000000</span></div>`;
+  const fgJs = `
+  // ---- bossintro furniture (fg): letterbox slam + HI-SCORE odometer ----
+  {
+    const BI = ${I.toFixed(3)}, BF = ${FLASH.toFixed(3)}, BO = ${EX.toFixed(3)};
+    const hrnd = mulberry32(${(p.seed || 13013) + 7});
+    // letterbox bars slam in (quantized), 1-frame overshoot, retract after
+    tl.to("#lbTop", { y: ${lb},  duration: 0.12, ease: "steps(3)" }, BI - 0.15);
+    tl.to("#lbBot", { y: -${lb}, duration: 0.12, ease: "steps(3)" }, BI - 0.15);
+    tl.set("#lbTop", { y: ${lb + 4} },  BI - 0.02); tl.set("#lbTop", { y: ${lb} },  BI + 0.022);
+    tl.set("#lbBot", { y: -${lb + 4} }, BI - 0.02); tl.set("#lbBot", { y: -${lb} }, BI + 0.022);
+    tl.to("#lbTop", { y: 0, duration: 0.15, ease: "steps(3)" }, BO + 0.13);
+    tl.to("#lbBot", { y: 0, duration: 0.15, ease: "steps(3)" }, BO + 0.13);
+    // HI-SCORE counter odometer-rolls during the hold
+    const hsv = document.getElementById("hsv");
+    tl.set("#hi", { opacity: 1 }, BF + 0.03);
+    tl.fromTo("#hi", { scale: 0 }, { scale: 1, duration: 0.1, ease: "steps(2)",
+                                     transformOrigin: "100% 50%" }, BF + 0.03);
+    let score = 1370;
+    for (let t = BF + 0.09; t < BO - 0.03; t += 0.066) {
+      score += 4000 + Math.round(hrnd() * 5500);
+      tl.set(hsv, { textContent: String(score).padStart(7, "0") }, t);
+    }
+    tl.set("#hi", { color: "#ffffff" }, BO + 0.08);              // 1-frame white tick out
+    tl.set("#hi", { opacity: 0 }, BO + 0.122);
+  }`;
+  return { css, html, js, fgCss, fgHtml, fgJs };
+}
+
+function setpieceRubberstamp() {
+  // RUBBER STAMP: the footage becomes an archival page at the apex — vignette
+  // charge (plate.charge) + manila sepia wash + a dim kick (plate.dim) that
+  // cools — then the verdict slams in BEHIND the subject as a bordered rubber
+  // stamp at params.rotation: crush 2.2→1 power4.in, 2-frame contact squash,
+  // double-strike ghost print, two thin-ink patches (clip-path circles in
+  // paper color), wet-ink saturate/brightness settle, and a paper indent
+  // shadow that blooms under the face. Stamps don't move: the hold is DEAD
+  // STILL, sold by the breathing indent + a slow paper loom. Exit at
+  // C + params.hold = mechanical 3-frame yank-down cut (the page is filed
+  // away); the archive plate releases 0.25s before it.
+  const h = dna.hero,
+    p = h.params || {},
+    I = heroIn;
+  const C = I + (p.crush ?? 0.074); // stamp contact (plate punch lands here via punchOffset)
+  const X = theme.hero.exitAt ?? Math.min(heroOut - 0.06, C + (p.hold ?? 2.02));
+  const ROT = p.rotation ?? -8;
+  const RED = dna.palette.accent || "#b3271e";
+  const s = HG.fontPx / 120; // demo face was cut at 120px — chrome scales with it
+  const bw = Math.max(3, Math.round(6 * s)),
+    rad = Math.round(14 * s);
+  const padT = Math.round(20 * s),
+    padX = Math.round(40 * s),
+    padB = Math.round(14 * s);
+  const paperW = Math.round(HG.halfW * 2 * 1.18),
+    paperH = Math.round(HG.fontPx * 2.83);
+  const indW = Math.round(HG.halfW * 2 * 1.06),
+    indH = Math.round(HG.fontPx * 2.08);
+  const patches = p.patches || [
+    [27, 36, 0.72],
+    [71, 68, 0.57],
+  ];
+  const loomDur = Math.min(1.7, DUR - (C + 0.35) - 0.03);
+  const breDur = Math.min(1.6, DUR - (C + 0.45) - 0.03);
+  const css = `
+  #dsep { position:absolute; inset:0; opacity:0; background:${dna.palette.paper || "#d8c49a"}; }
+  #dvig { position:absolute; inset:0; opacity:0;
+          background: radial-gradient(115% 100% at 50% 40%, rgba(0,0,0,0) 30%, rgba(20,14,8,0.85) 100%); }
+  #ddim { position:absolute; inset:0; opacity:0; background:#140d06; }
+  #dapex { position:absolute; left:${HG.x}px; top:${HG.y}px; width:0; height:0; }
+  #dpaper { position:absolute; width:${paperW}px; height:${paperH}px; opacity:0;
+            background: radial-gradient(50% 50% at 50% 50%, rgba(222,203,160,0.92) 0%, rgba(216,196,154,0.55) 52%, rgba(216,196,154,0) 78%); }
+  #dindent { position:absolute; width:${indW}px; height:${indH}px; opacity:0; filter:blur(8px);
+             background: radial-gradient(50% 50% at 50% 50%, rgba(26,16,9,0.62) 0%, rgba(26,16,9,0.30) 48%, rgba(26,16,9,0) 72%); }
+  #dstamp { position:absolute; }
+  #dsface { position:relative; display:inline-block; }
+  .dface { font-family:'${dna.fonts.hero}', serif; font-size:${HG.fontPx}px; line-height:1;
+           white-space:nowrap; letter-spacing:0.015em; color:${RED};
+           border:${bw}px solid currentColor; border-radius:${rad}px;
+           padding:${padT}px ${padX}px ${padB}px; }
+  #dghost, #dp1, #dp2 { position:absolute; inset:0; }
+  #dghost { opacity:0; }
+  #dp1 .dface, #dp2 .dface { color:rgba(219,199,156,0.55); }
+  #dp1 { clip-path: circle(${Math.round(patches[0][2] * HG.fontPx)}px at ${patches[0][0]}% ${patches[0][1]}%); }
+  #dp2 { clip-path: circle(${Math.round(patches[1][2] * HG.fontPx)}px at ${patches[1][0]}% ${patches[1][1]}%); }`;
+  const html = `      <div id="dsep"></div>
+      <div id="dvig"></div>
+      <div id="ddim"></div>
+      <div id="dapex">
+        <div id="dpaper"></div>
+        <div id="dindent"></div>
+        <div id="dstamp">
+          <div id="dsface">
+            <div id="dghost"><div class="dface">${esc(heroText)}</div></div>
+            <div id="dmain" class="dface">${esc(heroText)}</div>
+            <div id="dp1"><div class="dface">${esc(heroText)}</div></div>
+            <div id="dp2"><div class="dface">${esc(heroText)}</div></div>
+          </div>
+        </div>
+      </div>`;
+  const js = `
+  // ---- setpiece: RUBBERSTAMP (archive charge → stamp crush → dead-still hold → filed away) ----
+  const I = ${I.toFixed(3)}, C = ${C.toFixed(3)}, X = ${X.toFixed(3)};
+
+  // static geometry
+  gsap.set("#dpaper",  { xPercent:-50, yPercent:-50, rotation: ${p.paperRot ?? 2.4} });
+  gsap.set("#dindent", { xPercent:-50, yPercent:-50, rotation: ${ROT} });
+  gsap.set("#dstamp",  { xPercent:-50, yPercent:-50, rotation: ${ROT}, opacity: 0,
+                         transformOrigin: "50% 50%" });
+  gsap.set("#dghost",  { x: ${Math.round(5 * s) || 5}, y: -${Math.round(4 * s) || 4}, rotation: 1.3 });
+
+  // ===== SCENE REACTION: the footage becomes an archive page =====
+  tl.fromTo("#dvig", { opacity: 0 }, { opacity: ${dna.plate.charge}, duration: 0.18, ease: "power2.in" }, C - 0.18);
+  tl.fromTo("#dsep", { opacity: 0 }, { opacity: ${p.sepia ?? 0.14}, duration: 0.28, ease: "power1.out" }, C - 0.12);
+  tl.set("#ddim", { opacity: ${dna.plate.dim} }, C);
+  tl.to("#ddim",  { opacity: ${(dna.plate.dim * 0.385).toFixed(2)}, duration: 0.5, ease: "power2.out" }, C + 0.05);
+  tl.to("#dvig",  { opacity: ${(dna.plate.charge * 0.5).toFixed(2)}, duration: 0.8, ease: "power2.out" }, C + 0.12);
+  tl.to(["#dvig","#dsep","#ddim"], { opacity: 0, duration: 0.4, ease: "power1.in" }, X - 0.25);
+
+  // the page lights up an instant before contact (what the stamp lands ON)
+  tl.fromTo("#dpaper", { opacity: 0, scale: 0.92 },
+            { opacity: 0.6, scale: 1, duration: 0.10, ease: "expo.out" }, C - 0.05);
+  tl.to("#dpaper", { keyframes: { scale: [1, 1.016, 1.005, 1.018, 1.008, 1.015] },
+                     duration: ${loomDur.toFixed(2)}, ease: "none" }, C + 0.35);
+
+  // ===== ARRIVAL: rubber stamp crush → contact squash → dead still =====
+  tl.set("#dstamp", { opacity: 1, scale: 2.2 }, C - 0.115);
+  tl.to("#dstamp",  { scale: 1, duration: 0.115, ease: "power4.in" }, C - 0.115);
+  tl.set("#dstamp", { scaleX: 1.07, scaleY: 0.93 }, C);             // contact squash
+  tl.to("#dstamp",  { scaleX: 1, scaleY: 1, duration: 0.09, ease: "power2.out" }, C + 0.083);
+  // double-strike ghost prints on contact
+  tl.set("#dghost", { opacity: 0.35 }, C);
+  // wet ink settles
+  tl.set("#dmain", { filter: "saturate(1.5) brightness(1.3)" }, C);
+  tl.to("#dmain",  { filter: "saturate(1) brightness(1)", duration: 0.5, ease: "power2.out" }, C + 0.06);
+
+  // paper indent shadow blooms under the stamp, then breathes (the hold-life;
+  // the stamp itself stays DEAD STILL)
+  tl.set("#dindent", { opacity: 0.5, scale: 0.7 }, C);
+  tl.to("#dindent",  { scale: 1, opacity: 0.42, duration: 0.35, ease: "expo.out" }, C + 0.02);
+  tl.to("#dindent",  { keyframes: { opacity: [0.42, 0.30, 0.40, 0.31, 0.38, 0.33] },
+                       duration: ${breDur.toFixed(2)}, ease: "none" }, C + 0.45);
+
+  // ===== EXIT: page filed away — mechanical 3-frame yank-down cut =====
+  tl.set("#dapex", { y: 10 }, X);
+  tl.set("#dapex", { y: 28, opacity: 0.5 }, X + F);
+  tl.set("#dapex", { opacity: 0 }, X + 2 * F);`;
+  return { css, html, js };
+}
+
+function setpieceLasercage() {
+  // LASER CAGE: concert blackout — the plate dims and haze cones breathe in
+  // the top corners; a 6-beam laser array (alternating accent/magenta,
+  // emitters along the top edge) snaps on and SWEEPS to converge on the word
+  // center, a hot core pops at convergence, and the word IGNITES behind the
+  // subject with an additive glow stack (wide blur + magenta fringe + tight
+  // blur + core): crush → contact squash → elastic settle + 2 controlled
+  // strobe pops. A criss-cross beam CAGE draws itself around the word rect
+  // and flickers; during the hold the array FANS OUT slowly behind the word
+  // (the iconic concert fan) while the word looms. Exit: the beams sweep away
+  // L→R carrying the letters (streak + blur) and the room lifts back up.
+  const I = heroIn;
+  const X0 = +(heroOut - 0.38).toFixed(3); // beams-carry-the-letters exit
+  const A = dna.palette.accent,
+    MG = dna.palette.magenta || "#ff4df0";
+  const CORE = dna.palette.core || "#eefff5",
+    SOFT = dna.palette.glowSoft || "#c9ffe2";
+  const fpx = HG.fontPx,
+    halfW = Math.round(HG.halfW),
+    cx = HG.x,
+    cy = HG.y;
+  // emitters along the top edge, initial aim points, fan-out floor targets
+  // (demo geometry expressed as frame fractions)
+  const EMX = [-0.023, 0.141, 0.352, 0.648, 0.859, 1.023].map((f) => Math.round(W * f));
+  const EMY = [-20, -45, -55, -55, -45, -20];
+  const STX = [0.164, 0.828, 0.313, 0.688, 0.406, 0.594].map((f) => Math.round(W * f));
+  const FANX = [0.094, 0.258, 0.426, 0.574, 0.742, 0.906].map((f) => Math.round(W * f));
+  const FANY = [0.75, 0.9, 0.97, 0.97, 0.9, 0.75].map((f) => Math.round(H * f));
+  // beam-grid cage around the word rect (extents derive from halfW + fontPx)
+  const CAGE = [
+    [cx - (halfW + 90), cy + 0.76 * fpx, cx + (halfW + 90), cy - 0.68 * fpx, A, 0.5],
+    [cx - (halfW + 90), cy - 0.68 * fpx, cx + (halfW + 90), cy + 0.76 * fpx, MG, 0.42],
+    [cx - (halfW - 80), cy + 1.0 * fpx, cx + (halfW - 80), cy - 0.92 * fpx, A, 0.5],
+    [cx - (halfW - 80), cy - 0.92 * fpx, cx + (halfW - 80), cy + 1.0 * fpx, MG, 0.42],
+    [cx - (halfW + 40), cy - 0.74 * fpx, cx + (halfW + 40), cy - 0.74 * fpx, A, 0.45],
+    [cx - (halfW + 40), cy + 0.82 * fpx, cx + (halfW + 40), cy + 0.82 * fpx, MG, 0.4],
+  ].map((c) => c.map((v) => (typeof v === "number" ? Math.round(v) : v)));
+  const spillW = 2 * halfW + 240,
+    spillH = Math.round(fpx * 5.2);
+  const hazeW = Math.round(W * 0.656),
+    hazeH = H + 60;
+  const blurBig = Math.round(0.22 * fpx),
+    blurTight = Math.max(3, Math.round(0.07 * fpx)),
+    fringeOff = Math.max(2, Math.round(0.03 * fpx));
+  // hold-life choreography only with runway before the exit
+  const strobeTs = [I + 0.5, I + 1.08].filter((t) => t < X0 - 0.25);
+  const fanDur = +Math.max(0.4, Math.min(1.0, X0 - (I + 0.62 + 5 * 0.04) - 0.05)).toFixed(2);
+  const flickDur = +Math.max(0.4, Math.min(1.2, X0 - 0.05 - (I + 0.6))).toFixed(2);
+  const lstag = +Math.min(
+    0.025,
+    Math.max(0.008, (DUR - 0.25 - (X0 + 0.02)) / Math.max(1, heroText.length - 1)),
+  ).toFixed(4);
+  const css = `
+  #dimC { position:absolute; inset:0; background:#000; opacity:0; }
+  #hazeLc { position:absolute; left:-150px; top:-130px; width:${hazeW}px; height:${hazeH}px; opacity:0;
+           background: radial-gradient(58% 95% at 12% 4%, ${A}80 0%, ${A}00 68%);
+           filter: blur(10px); }
+  #hazeRc { position:absolute; right:-150px; top:-130px; width:${hazeW}px; height:${hazeH}px; opacity:0;
+           background: radial-gradient(58% 95% at 88% 4%, ${MG}6b 0%, ${MG}00 68%);
+           filter: blur(10px); }
+  #spillC { position:absolute; left:${cx}px; top:${cy}px; width:${spillW}px; height:${spillH}px; opacity:0;
+           background: radial-gradient(50% 50% at 50% 50%, ${A}8c 0%, ${A}00 70%);
+           mix-blend-mode:screen; }
+  #lasersC { position:absolute; inset:0; }
+  #hotC { position:absolute; left:${cx}px; top:${cy}px; width:130px; height:130px; opacity:0;
+         background: radial-gradient(circle, rgba(235,255,244,0.95) 0%, ${A}99 42%, ${A}00 72%);
+         filter: blur(4px); mix-blend-mode:screen; }
+  #apexC { position:absolute; left:${cx}px; top:${cy}px; opacity:0; white-space:nowrap;
+          font-family:'${dna.fonts.hero}', sans-serif; font-size:${fpx}px; line-height:1; letter-spacing:0.02em; }
+  .clayer { position:absolute; left:0; top:0; }
+  #cglow  { color:${A}; filter:blur(${blurBig}px); opacity:0; mix-blend-mode:screen; }
+  #cglow2 { color:${SOFT}; filter:blur(${blurTight}px); opacity:0; mix-blend-mode:screen; }
+  #cfringe{ color:${MG}; left:${fringeOff}px; top:${fringeOff}px; opacity:0; }
+  #cword  { position:relative; color:${CORE};
+            text-shadow: 0 0 16px ${A}d9, 0 0 44px ${A}80, 0 2px 8px rgba(0,0,0,0.55); }
+  #cword .L { display:inline-block; }`;
+  const html = `      <div id="dimC"></div>
+      <div id="hazeLc"></div><div id="hazeRc"></div>
+      <div id="spillC"></div>
+      <svg id="lasersC" width="${W}" height="${H}" viewBox="0 0 ${W} ${H}" xmlns="http://www.w3.org/2000/svg">
+        <g id="gB"></g><g id="gC"></g>
+      </svg>
+      <div id="hotC"></div>
+      <div id="apexC">
+        <div class="clayer" id="cglow">${esc(heroText)}</div>
+        <div class="clayer" id="cfringe">${esc(heroText)}</div>
+        <div class="clayer" id="cglow2">${esc(heroText)}</div>
+        <div id="cword"></div>
+      </div>`;
+  const js = `
+  // ---- setpiece: LASERCAGE (6-beam converge → ignite → cage → fan-out → carried exit) ----
+  const I = ${I.toFixed(3)}, X0 = ${X0.toFixed(3)};
+  const CACC = ${J(A)}, CMAG = ${J(MG)};
+  const NSC = "http://www.w3.org/2000/svg";
+  gsap.set("#apexC", { xPercent: -50, yPercent: -50, transformOrigin: "50% 50%" });
+  gsap.set(["#spillC", "#hotC"], { xPercent: -50, yPercent: -50 });
+
+  // apex word as letters (for the carried-away exit)
+  const cw = document.getElementById("cword");
+  const cletters = [];
+  for (const ch of ${J(heroText)}) {
+    const s = document.createElement("span");
+    s.className = "L"; s.textContent = ch === " " ? "\\u00a0" : ch;
+    cw.appendChild(s); cletters.push(s);
+  }
+
+  // ---- 6-beam array (emitters along the top edge, alternating accent/magenta)
+  const gB = document.getElementById("gB"), gC = document.getElementById("gC");
+  const EM = ${J(EMX.map((x, i) => [x, EMY[i]]))};
+  const STARTX = ${J(STX)};
+  const FAN = ${J(FANX.map((x, i) => [x, FANY[i]]))};
+  function mkLnC(parent, x1, y1, x2, y2, col, w) {
+    const l = document.createElementNS(NSC, "line");
+    l.setAttribute("x1", x1); l.setAttribute("y1", y1);
+    l.setAttribute("x2", x2); l.setAttribute("y2", y2);
+    l.setAttribute("stroke", col); l.setAttribute("stroke-width", w);
+    l.setAttribute("stroke-linecap", "round");
+    l.style.opacity = 0; parent.appendChild(l); return l;
+  }
+  const cbeams = [];
+  for (let i = 0; i < 6; i++) {
+    const col = i % 2 ? CMAG : CACC;
+    const halo = mkLnC(gB, EM[i][0], EM[i][1], STARTX[i], ${cy + 4}, col, 6);
+    const core = mkLnC(gB, EM[i][0], EM[i][1], STARTX[i], ${cy + 4}, col, 1.6);
+    core.style.filter = "drop-shadow(0 0 6px " + col + ")";
+    cbeams.push([halo, core]);
+  }
+
+  // ---- beam-grid cage around the word rect
+  const ccage = ${J(CAGE)}.map(([x1, y1, x2, y2, col, op]) => {
+    const el = mkLnC(gC, x1, y1, x2, y2, col, 1.2);
+    const len = Math.hypot(x2 - x1, y2 - y1);
+    el.setAttribute("stroke-dasharray", len);
+    el.setAttribute("stroke-dashoffset", len);
+    return { el, len, op };
+  });
+
+  // ===== WORLD: concert blackout + haze cones
+  tl.fromTo("#dimC", { opacity: 0 }, { opacity: ${dna.plate.dim}, duration: 0.35, ease: "power1.out" }, 0.03);
+  tl.to(["#hazeLc","#hazeRc"], { opacity: 0.08, duration: 0.5, ease: "power1.out" }, 0.15);
+
+  // ===== CHARGE: room deepens, 6 beams snap on and sweep to center
+  tl.to("#dimC", { opacity: ${dna.plate.charge}, duration: 0.26, ease: "power2.in" }, I - 0.31);
+  tl.to(["#hazeLc","#hazeRc"], { opacity: 0.10, duration: 0.28 }, I - 0.29);
+  cbeams.forEach((els, i) => {
+    const t0 = I - 0.26 + i * 0.022;
+    tl.set(els[0], { opacity: 0.26 }, t0);
+    tl.set(els[1], { opacity: 0.95 }, t0);
+    tl.to(els, { attr: { x2: ${cx}, y2: ${cy} }, duration: 0.16, ease: "power2.inOut" }, t0);
+  });
+  tl.fromTo("#hotC", { opacity: 0, scale: 0.4 },
+            { opacity: 0.6, scale: 1, duration: 0.1, ease: "power2.in" }, I - 0.11);
+  tl.to("#hotC", { scale: 2.8, opacity: 0, duration: 0.2, ease: "expo.out" }, I);
+
+  // ===== IGNITE: crush in → contact squash → elastic settle; additive glow stack
+  tl.set("#apexC", { opacity: 1, scale: 1.16 }, I - 0.02);
+  tl.to("#apexC",  { scale: 1, duration: 0.09, ease: "power4.in" }, I - 0.018);
+  tl.set("#apexC", { scaleX: 1.09, scaleY: 0.92 }, I + 0.08);
+  tl.to("#apexC",  { scaleX: 1, scaleY: 1, duration: 0.5, ease: "elastic.out(1, 0.38)" }, I + 0.165);
+  tl.set("#cglow",  { opacity: 0.95 }, I);
+  tl.set("#cglow2", { opacity: 0.60 }, I);
+  tl.set("#cfringe",{ opacity: 0.30 }, I);
+  tl.set("#cword",  { filter: "brightness(1.9)" }, I);
+  tl.to("#cword",   { filter: "brightness(1)", duration: 0.3, ease: "power2.out" }, I + 0.08);
+  tl.to("#cglow",   { opacity: 0.55, duration: 0.45, ease: "power2.out" }, I + 0.15);
+  tl.to("#cglow2",  { opacity: 0.38, duration: 0.45, ease: "power2.out" }, I + 0.15);
+  tl.set("#dimC", { opacity: ${(dna.plate.charge - 0.06).toFixed(2)} }, I + 0.05);
+  tl.to("#dimC",  { opacity: ${(dna.plate.charge - 0.1).toFixed(2)}, duration: 0.8, ease: "power1.out" }, I + 0.2);
+  tl.set("#spillC", { opacity: 0.22 }, I + 0.02);
+  tl.to("#spillC",  { opacity: 0.12, duration: 0.2, ease: "power2.out" }, I + 0.25);
+
+  // ===== CAGE draws around the word
+  ccage.forEach((c, i) => {
+    const t = I + 0.08 + i * 0.03;
+    tl.set(c.el, { opacity: c.op }, t);
+    tl.to(c.el, { attr: { "stroke-dashoffset": 0 }, duration: 0.18, ease: "power2.out" }, t);
+  });
+  tl.to(ccage.map((c) => c.el),
+        { keyframes: { opacity: [0.48, 0.36, 0.44, 0.34, 0.42, 0.38] }, duration: ${flickDur}, ease: "none" },
+        I + 0.6);
+
+  // ===== controlled strobe pops (with the ignite flash: events spread > 1s)
+  ${J(strobeTs.map((t) => +t.toFixed(3)))}.forEach((t) => {
+    tl.set("#apexC", { filter: "brightness(2.05)" }, t);
+    tl.set("#apexC", { filter: "brightness(1)" }, t + 0.05);
+    tl.set("#spillC", { opacity: 0.27 }, t);
+    tl.to("#spillC",  { opacity: 0.12, duration: 0.3, ease: "power2.out" }, t + 0.05);
+  });
+
+  // ===== FAN OUT: the iconic fan opens behind the word during the hold
+  cbeams.forEach((els, i) => {
+    const t = I + 0.62 + i * 0.04;
+    tl.to(els, { attr: { x2: FAN[i][0], y2: FAN[i][1] }, duration: ${fanDur}, ease: "power1.inOut" }, t);
+    tl.to(els[0], { opacity: 0.18, duration: 0.4 }, t);
+    tl.to(els[1], { opacity: 0.50, duration: 0.4 }, t);
+  });
+  tl.to(["#hazeLc","#hazeRc"], { opacity: 0.16, duration: 0.6, ease: "power1.inOut" }, I + 0.35);
+
+  // ===== HOLD LIFE: loom breathe + glow flicker
+  tl.to("#apexC", { scale: 1.03, duration: 0.6, ease: "sine.inOut" }, I + 0.8);
+  tl.to("#apexC", { scale: 1.0,  duration: 0.6, ease: "sine.inOut" }, I + 1.4);
+  tl.to("#cglow", { keyframes: { opacity: [0.55, 0.42, 0.52, 0.40, 0.48, 0.45] },
+                    duration: ${Math.min(1.15, Math.max(0.4, X0 - 0.06 - (I + 0.62))).toFixed(2)}, ease: "none" }, I + 0.62);
+
+  // ===== EXIT: beams sweep away L→R carrying the letters
+  ccage.forEach((c, i) => {
+    tl.to(c.el, { attr: { "stroke-dashoffset": c.len }, duration: 0.16, ease: "power2.in" }, X0 + i * 0.02);
+    tl.set(c.el, { opacity: 0 }, X0 + i * 0.02 + 0.17);
+  });
+  cletters.forEach((l, i) => {
+    tl.to(l, { x: 44, opacity: 0, filter: "blur(6px)", duration: 0.16, ease: "power2.in" },
+          X0 + 0.02 + i * ${lstag});
+  });
+  tl.to(["#cglow","#cglow2","#cfringe"], { x: 60, opacity: 0, duration: 0.22, ease: "power2.in" }, X0 + 0.06);
+  cbeams.forEach((els, i) => {
+    tl.to(els, { attr: { x2: "+=${Math.round(W * 0.742)}" }, duration: 0.28, ease: "power2.in" }, X0 + 0.02 + i * 0.03);
+    tl.to(els, { opacity: 0, duration: 0.22 }, X0 + 0.04 + i * 0.03);
+  });
+  tl.to("#spillC", { opacity: 0, duration: 0.25 }, X0 - 0.01);
+  tl.to("#dimC",   { opacity: 0.12, duration: 0.4, ease: "power1.in" }, X0 + 0.06);
+  tl.to(["#hazeLc","#hazeRc"], { opacity: 0.03, duration: 0.4 }, X0 + 0.06);
+  tl.set("#apexC", { display: "none" }, ${(DUR - 0.02).toFixed(3)});`;
+  return { css, html, js };
+}
+
+function setpieceBoltstrike() {
+  // THUNDER apex: the storm is the editor. A slate storm mood sits on the room
+  // from t=0 and the sky "kisses" (1-frame brighten) on every body word —
+  // double-kiss on emphasis words, re-flashes during the hold. Before the
+  // strike the room charge-dims under a radial word scrim; a hand-authored
+  // branched bolt (haze/glow/core stack) flashes 2 frames BEFORE the word
+  // (leader → return stroke at contact) with a sky flash, then the word slams
+  // in lit HARD (brightness 2.5 → 1) with its text-shadow flipped toward the
+  // bolt for the flash frames; an ozone under-glow blooms and breathes through
+  // the hold (loom + 2-frame lit blips on the sheet re-flashes); exit washes
+  // downward with the rain.
+  const p = dna.hero.params || {},
+    I = heroIn;
+  const A = dna.palette.accent, // ozone / bolt haze
+    GL = dna.palette.glow || "#cfe8ff", // bolt glow
+    CORE = dna.palette.core || "#ffffff", // bolt core
+    HC = dna.palette.hero || dna.palette.body;
+  const EX = theme.hero.exitAt ?? Math.min(heroOut - 0.2, I + (p.hold ?? 2.05));
+  const hpx = HG.fontPx,
+    halfW = HG.halfW || heroText.length * 0.28 * hpx;
+  // word scrim sized from the word rect (demo 1100×330 around a 720×145 word)
+  const scW = Math.round(2 * halfW + 380),
+    scH = Math.round(hpx * 2.28);
+  // hand-authored branched bolt (5-seg zigzag + 2 branches) measured off the
+  // demo cut — offsets from the word center in halfW (x) / fontPx (y) units;
+  // the leader always enters from above the frame
+  const sgn = p.side === "right" ? -1 : 1;
+  const kx = ((halfW || 360) / 360) * sgn,
+    ky = hpx / 145;
+  const pts = (arr, top) =>
+    arr
+      .map(([dx, dy], k) => {
+        const x = HG.x + dx * kx;
+        let y = HG.y + dy * ky;
+        if (top && k === 0) y = Math.min(y, -25);
+        return `${Math.round(x)},${Math.round(y)}`;
+      })
+      .join(" ");
+  const MAINP = pts(
+    [
+      [-45, -282],
+      [-107, -134],
+      [-23, -56],
+      [-113, 66],
+      [-17, 150],
+      [-85, 268],
+    ],
+    true,
+  );
+  const BAP = pts([
+    [-107, -134],
+    [-183, -56],
+    [-157, 10],
+  ]);
+  const BBP = pts([
+    [-113, 66],
+    [-187, 140],
+    [-163, 200],
+  ]);
+  const wS = (w) => (w * ky).toFixed(1);
+  const boltSvg = (color, w, wb) =>
+    `<svg viewBox="0 0 ${W} ${H}" xmlns="http://www.w3.org/2000/svg">` +
+    `<polyline points="${MAINP}" fill="none" stroke="${color}" stroke-width="${wS(w)}" stroke-linejoin="miter" stroke-linecap="round"/>` +
+    `<polyline points="${BAP}" fill="none" stroke="${color}" stroke-width="${wS(wb)}" stroke-linecap="round"/>` +
+    `<polyline points="${BBP}" fill="none" stroke="${color}" stroke-width="${wS(wb)}" stroke-linecap="round"/>` +
+    `</svg>`;
+  // the sky kisses on every BODY word (the hero word is consumed by the slam)
+  const kissData = LINES.flatMap((L) =>
+    L.words.map((w) => [+w.start.toFixed(3), w.minor ? 1 : 0]),
+  ).filter(([t]) => t < DUR - 0.1);
+  const css = `
+  #mood { position:absolute; inset:0; background:rgba(38,62,96,${p.mood ?? 0.1}); }
+  #dimP { position:absolute; inset:0; opacity:0; background:#0a1422; }
+  #kiss { position:absolute; inset:0; opacity:0;
+          background:linear-gradient(to bottom, rgba(222,236,255,0.95) 0%, rgba(222,236,255,0.40) 38%, rgba(222,236,255,0) 72%); }
+  #wordscrim { position:absolute; left:${HG.x}px; top:${HG.y}px; width:${scW}px; height:${scH}px;
+          margin-left:-${Math.round(scW / 2)}px; margin-top:-${Math.round(scH / 2)}px; opacity:0; border-radius:50%;
+          background:radial-gradient(50% 50% at 50% 50%, rgba(5,10,20,0.85) 0%, rgba(5,10,20,0.45) 55%, rgba(5,10,20,0) 100%); }
+  #apex { position:absolute; left:${HG.x}px; top:${HG.y}px; opacity:0; }
+  .aw { position:absolute; left:0; top:0; transform:translate(-50%,-50%);
+        font-family:'${dna.fonts.hero}', sans-serif; font-size:${hpx}px; line-height:1;
+        letter-spacing:0.012em; white-space:nowrap; }
+  #ozone { color:${A}; filter:blur(${Math.max(10, Math.round(26 * ky))}px); opacity:0; top:${Math.round(8 * ky)}px; }
+  #aword { color:${HC};
+           text-shadow: 0 8px 26px rgba(3,8,18,0.85), 0 2px 6px rgba(3,8,18,0.7), 0 0 18px ${A}59; }
+  #bolt { position:absolute; inset:0; opacity:0; }
+  .boltlayer { position:absolute; inset:0; }
+  .boltlayer svg { position:absolute; inset:0; width:${W}px; height:${H}px; }
+  #boltHaze { filter:blur(16px); opacity:0.55; }
+  #boltGlow { filter:blur(5px); opacity:0.9; }
+  #skyflash { position:absolute; inset:0; opacity:0;
+          background:radial-gradient(120% 90% at 42% 22%, rgba(240,248,255,0.95) 0%, rgba(200,222,250,0.55) 45%, rgba(120,150,190,0) 100%); }`;
+  const html = `      <div id="mood"></div>
+      <div id="dimP"></div>
+      <div id="kiss"></div>
+      <div id="wordscrim"></div>
+      <div id="apex">
+        <div class="aw" id="ozone">${esc(heroText)}</div>
+        <div class="aw" id="aword">${esc(heroText)}</div>
+      </div>
+      <div id="bolt">
+        <div class="boltlayer" id="boltHaze">${boltSvg(A, 22, 13)}</div>
+        <div class="boltlayer" id="boltGlow">${boltSvg(GL, 9, 5)}</div>
+        <div class="boltlayer" id="boltCore">${boltSvg(CORE, 3.5, 2.2)}</div>
+      </div>
+      <div id="skyflash"></div>`;
+  // breathe/loom clamp inside [contact, exit] for any clip length
+  const breDur = Math.max(0.6, Math.min(1.5, EX - 0.23 - (I + 0.3)));
+  const loomDur = Math.max(0.4, EX - 0.04 - (I + 0.74));
+  const js = `
+  // ---- setpiece: BOLTSTRIKE (storm charge → branched-bolt leader → word slams in lit) ----
+  const I = ${I.toFixed(3)}, EXB = ${EX.toFixed(3)};
+
+  // distant lightning KISS: 1-frame sky brighten on every body word
+  const KISS = ${J(kissData)};
+  KISS.forEach(([t, em]) => {
+    tl.set("#kiss", { opacity: 0.06 }, t);
+    tl.set("#kiss", { opacity: 0 }, t + F);
+    if (em && t + 0.20 + 3 * F < ${(DUR - 0.04).toFixed(2)}) {
+      // emphasis words get the sheet-lightning double kiss (matches the rail double flash)
+      const t0 = t + 0.20;
+      tl.set("#kiss", { opacity: 0.07 }, t0);
+      tl.set("#kiss", { opacity: 0 },    t0 + F);
+      tl.set("#kiss", { opacity: 0.06 }, t0 + 2 * F);
+      tl.set("#kiss", { opacity: 0 },    t0 + 3 * F);
+    }
+  });
+  // sheet re-flashes during the apex hold
+  [I + 0.84, I + 1.44].forEach((t) => {
+    if (t < EXB - 0.2) { tl.set("#kiss", { opacity: 0.08 }, t); tl.set("#kiss", { opacity: 0 }, t + F); }
+  });
+
+  // CHARGE: the storm gathers before the strike (ends before the bolt frames)
+  tl.fromTo("#dimP", { opacity: 0 }, { opacity: ${dna.plate.charge || 0.3}, duration: 0.30, ease: "power2.in" }, I - 0.39);
+  tl.fromTo("#wordscrim", { opacity: 0 }, { opacity: 0.42, duration: 0.30, ease: "power2.in" }, I - 0.39);
+
+  // THE STRIKE: bolt flashes 2 frames before the word, return stroke at contact
+  tl.set("#bolt", { opacity: 1 },    I - 2 * F);
+  tl.set("#bolt", { opacity: 0.35 }, I - F);
+  tl.set("#bolt", { opacity: 1 },    I);
+  tl.to("#bolt",  { opacity: 0, duration: 0.07, ease: "power2.in" }, I + 0.045);
+
+  tl.set("#skyflash", { opacity: 0.26 }, I - 2 * F);
+  tl.set("#skyflash", { opacity: 0.10 }, I - F);
+  tl.set("#skyflash", { opacity: 0.30 }, I + 0.02);
+  tl.to("#skyflash",  { opacity: 0, duration: 0.22, ease: "expo.out" }, I + 0.06);
+
+  // dim released by the flash, settles to a storm hold, lifts at the end
+  tl.set("#dimP", { opacity: 0.08 }, I - 2 * F);
+  tl.to("#dimP",  { opacity: ${dna.plate.dim || 0.22}, duration: 0.25, ease: "power2.out" }, I + 0.10);
+  tl.to("#dimP",  { opacity: 0, duration: 0.40, ease: "power1.in" }, EXB - 0.14);
+  tl.set("#wordscrim", { opacity: 0.32 }, I - 2 * F);
+  tl.to("#wordscrim",  { opacity: 0.36, duration: 0.30 }, I + 0.10);
+  tl.to("#wordscrim",  { opacity: 0, duration: 0.30 }, EXB - 0.04);
+
+  // APEX WORD: slam transit → contact squash (2 frames) → elastic settle
+  tl.set("#apex", { opacity: 1 }, I - 2 * F);
+  tl.fromTo("#apex", { scale: 3.1 }, { scale: 1, duration: 0.105, ease: "power4.in" }, I - 2 * F);
+  tl.fromTo("#aword", { filter: "blur(14px) brightness(3.2)" },
+            { filter: "blur(0px) brightness(2.5)", duration: 0.105, ease: "power4.in" }, I - 2 * F);
+  tl.set("#apex", { scaleX: 1.10, scaleY: 0.90 }, I + 0.025);
+  tl.to("#apex",  { scaleX: 1, scaleY: 1, duration: 0.55, ease: "elastic.out(1.05, 0.34)" }, I + 0.025 + 2 * F);
+  // lit HARD for 2 frames, then cools
+  tl.to("#aword", { filter: "blur(0px) brightness(1)", duration: 0.45, ease: "power2.out" }, I + 0.025 + 2 * F);
+
+  // SIGNATURE: shadow flips toward the bolt (light from the strike side) for the flash frames
+  tl.set("#aword", { textShadow: "${16 * sgn}px 6px 18px rgba(2,6,14,0.9), ${4 * sgn}px 2px 6px rgba(2,6,14,0.75), 0 0 26px ${A}b3" }, I - 2 * F);
+  tl.set("#aword", { textShadow: "0 8px 26px rgba(3,8,18,0.85), 0 2px 6px rgba(3,8,18,0.7), 0 0 18px ${A}59" }, I + 0.09);
+
+  // ozone under-glow blooms with the hit, breathes during hold
+  tl.set("#ozone", { opacity: 0.85 }, I + 0.02);
+  tl.to("#ozone", { keyframes: { opacity: [0.85, 0.5, 0.65, 0.42, 0.55, 0.38] },
+                    duration: ${breDur.toFixed(2)}, ease: "none" }, I + 0.30);
+  tl.to("#ozone", { opacity: 0.32, duration: 0.18 }, EXB - 0.22);
+
+  // hold life: loom + 2-frame lit blips on the sheet re-flashes
+  tl.to("#apex", { scale: 1.035, duration: ${loomDur.toFixed(2)}, ease: "power1.inOut" }, I + 0.74);
+  [[I + 0.84, 1.45], [I + 1.44, 1.35]].forEach(([t, b2]) => {
+    if (t < EXB - 0.2) {
+      tl.set("#aword", { filter: "brightness(" + b2 + ")" }, t);
+      tl.set("#aword", { filter: "brightness(1)" }, t + F);
+    }
+  });
+
+  // EXIT: washes downward with the rain
+  tl.to("#apex", { y: 38, opacity: 0, filter: "blur(6px)", duration: 0.22, ease: "power2.in" }, EXB);
+  tl.set("#apex", { display: "none" }, ${Math.min(EX + 0.26, DUR - 0.02).toFixed(3)});`;
+  return { css, html, js };
+}
+
+function setpieceHoloboot() {
+  // HOLOGRAM apex: full volumetric boot behind the subject. A desk emitter dot
+  // pops, the projection cone SNAPS wide (scaleX expo), a seed beam fires up
+  // from the emitter, and the word boots with a RISING clip sweep (opacity is
+  // instant — the reveal is a wipe) into a 7-layer projection stack (dark
+  // backing shadow / wide glow / magenta+cyan chromatic fringes / core /
+  // scanline mask / climbing interference bands). Contact = over-bright flash
+  // + squash held 2 frames + elastic settle + 1-frame x interference jumps;
+  // fringes blow wide then settle to a constant registration offset. Hold
+  // life: bands climb, rotationY oscillates, glow/cone breathe, emitter dot
+  // pulses, slow loom; a hand "passes through" the projection (skew + blur +
+  // fringe blowout, pure projection logic). Exit: the projector cut — the
+  // word collapses to a horizontal line, then to the base dot. A second,
+  // smaller emitter cone rises from the desk under the holorail plate all
+  // video (the body rail is cast from the SAME projector grammar).
+  const p = dna.hero.params || {},
+    I = heroIn;
+  const A = dna.palette.accent,
+    MG = dna.palette.magenta || "#ff5fd6";
+  const GLOW = dna.palette.glow || "#3eccf2",
+    CORE = dna.palette.core || "#eafbff";
+  const fpx = HG.fontPx,
+    halfW = Math.round(HG.halfW || heroText.length * 0.4 * fpx),
+    cx = HG.x,
+    cy = HG.y;
+  const k = fpx / 118; // demo scale unit (Orbitron 700 @ 118px)
+  // apex rig geometry derives from the word rect
+  const coneW = Math.min(2 * halfW + 80, W - 40);
+  const coneTop = Math.round(cy - 0.55 * fpx);
+  const emitY = Math.min(H - 30, Math.round(cy + 2.4 * fpx));
+  const coneH = emitY - coneTop;
+  const beamTop = coneTop + 40,
+    beamH = emitY - beamTop;
+  const cxP = ((cx / W) * 100).toFixed(1),
+    cyP = ((cy / H) * 100).toFixed(1);
+  // body-zone projector under the holorail plate (cone behind the subject)
+  const plateBot = Math.round(H - (dna.body.bottomPx || 108) + (dna.body.plateH || 96) / 2);
+  const bcW = p.coneW || 800,
+    bcTop = plateBot - 4,
+    bcH = H - bcTop - 4;
+  // interference-band pitch scales with the type
+  const bandH = Math.max(20, Math.round(fpx * 0.39));
+  const bp = (f) => Math.round(bandH * f);
+  // projector-cut exit + hold-life windows (all runway-clamped)
+  const cutT = +Math.min(heroOut - 0.22, DUR - 0.3).toFixed(3);
+  const C = I + 0.07; // contact
+  const holdD = +Math.max(0.6, Math.min(1.72, cutT - 0.05 - (I + 0.24))).toFixed(2);
+  const holdD2 = +Math.max(0.5, holdD - 0.1).toFixed(2);
+  const reactD = +Math.max(0.3, Math.min(0.9, cutT - 0.3 - (I + 0.24))).toFixed(2);
+  const loomD = +Math.min(0.62, Math.max(0.2, cutT - 0.3 - (I + 0.74))).toFixed(2);
+  // the hand-pass needs the loom done (scale channel) and clear exit runway
+  const passT = +Math.max(I + (p.passAt ?? 1.29), I + 1.25).toFixed(3);
+  const doPass = passT + 0.65 < cutT - 0.05;
+  const css = `
+  #dimH { position:absolute; inset:0; opacity:0; background:#02101a; }
+  #scrimH { position:absolute; inset:0; opacity:0;
+           background: radial-gradient(58% 46% at ${cxP}% ${cyP}%, rgba(2,9,15,0.88) 0%, rgba(2,9,15,0.55) 48%, rgba(2,9,15,0) 78%); }
+  #bcone { position:absolute; left:${Math.round(W / 2 - bcW / 2)}px; top:${bcTop}px; width:${bcW}px; height:${bcH}px; opacity:0;
+           clip-path: polygon(0% 0%, 100% 0%, 51.6% 100%, 48.4% 100%);
+           background: linear-gradient(to top, ${A}4d 0%, ${A}1a 55%, ${A}05 100%); }
+  #bdot { position:absolute; left:${Math.round(W / 2 - 4.5)}px; top:${H - 10}px; width:9px; height:9px; border-radius:50%;
+          background:${dna.palette.dot || "#bff0ff"}; opacity:0;
+          box-shadow: 0 0 10px ${A}e6, 0 0 24px ${A}8c; }
+  #apxcone { position:absolute; left:${Math.round(cx - coneW / 2)}px; top:${coneTop}px; width:${coneW}px; height:${coneH}px; opacity:0;
+             clip-path: polygon(0% 0%, 100% 0%, 53% 100%, 47% 100%);
+             background: linear-gradient(to top, ${A}57 0%, ${A}1f 50%, ${A}05 100%); }
+  #apxbeam { position:absolute; left:${Math.round(cx - 2.5)}px; top:${beamTop}px; width:5px; height:${beamH}px; opacity:0;
+             background: linear-gradient(to top, ${CORE}f2, ${CORE}1f);
+             filter: blur(0.6px); }
+  #apxdot { position:absolute; left:${Math.round(cx - 6.5)}px; top:${emitY - 6}px; width:13px; height:13px; border-radius:50%;
+            background:${dna.palette.dotHot || "#dff8ff"}; opacity:0;
+            box-shadow: 0 0 12px ${A}f2, 0 0 34px ${A}99; }
+  #apx { position:absolute; left:${cx}px; top:${cy}px; opacity:0; }
+  #apxclip { position:relative; }
+  .aw { font-family:'${dna.fonts.hero}', sans-serif; font-weight:700; font-size:${fpx}px; line-height:1;
+        letter-spacing:0; white-space:nowrap; }
+  #adark { position:absolute; left:0; top:${Math.max(2, Math.round(3 * k))}px; color:rgba(1,12,20,0.92);
+           filter:blur(${Math.max(4, Math.round(7 * k))}px); transform:scale(1.03); }
+  #aglow { position:absolute; left:0; top:0; color:${GLOW}f2;
+           filter:blur(${Math.max(8, Math.round(16 * k))}px); transform:scale(1.05); opacity:0.55; }
+  #cmag  { position:absolute; left:0; top:0; color:${MG}8c; }
+  #ccyn  { position:absolute; left:0; top:0; color:${A}99; }
+  #acore { position:relative; color:${CORE};
+           text-shadow: 0 0 22px ${A}73, 0 3px 14px rgba(1,10,16,0.55); }
+  #ascan { position:absolute; left:0; top:0; color:transparent;
+           -webkit-background-clip:text; background-clip:text;
+           background-image: repeating-linear-gradient(180deg, rgba(0,0,0,0) 0px, rgba(0,0,0,0) 2.5px, rgba(2,12,18,0.62) 2.5px, rgba(2,12,18,0.62) 4px); }
+  #abands { position:absolute; left:0; top:0; color:transparent; opacity:0;
+            -webkit-background-clip:text; background-clip:text;
+            background-image: repeating-linear-gradient(180deg, rgba(255,255,255,0) 0px, rgba(255,255,255,0) ${bp(0.717)}px, ${dna.palette.band || "#d8faff"}f2 ${bp(0.783)}px, ${dna.palette.band || "#d8faff"}f2 ${bp(0.87)}px, rgba(255,255,255,0) ${bp(0.935)}px, rgba(255,255,255,0) ${bandH}px);
+            background-size: 100% ${bandH}px; }`;
+  const html = `      <div id="dimH"></div>
+      <div id="scrimH"></div>
+      <div id="bcone"></div>
+      <div id="bdot"></div>
+      <div id="apxcone"></div>
+      <div id="apxbeam"></div>
+      <div id="apxdot"></div>
+      <div id="apx">
+        <div id="apxclip">
+          <div class="aw" id="adark">${esc(heroText)}</div>
+          <div class="aw" id="aglow">${esc(heroText)}</div>
+          <div class="aw" id="cmag">${esc(heroText)}</div>
+          <div class="aw" id="ccyn">${esc(heroText)}</div>
+          <div class="aw" id="acore">${esc(heroText)}</div>
+          <div class="aw" id="ascan">${esc(heroText)}</div>
+          <div class="aw" id="abands">${esc(heroText)}</div>
+        </div>
+      </div>`;
+  // body-projector flicker cycles, baked to the clip length
+  const coneFlicks = [];
+  for (let t = 0.6; t + 2.2 <= DUR - 0.25; t += 2.3) coneFlicks.push(+t.toFixed(2));
+  const dotPulses = [];
+  let dt = 0.5;
+  for (; dt + 2.0 <= DUR - 0.3; dt += 2.15) dotPulses.push(+dt.toFixed(2));
+  const dotTail = dt + 1.0 <= DUR - 0.24 ? +dt.toFixed(2) : null;
+  const js = `
+  // ---- setpiece: HOLOBOOT (emitter pop → cone snap → seed beam → rising-sweep word boot) ----
+  const I = ${I.toFixed(3)}, CUT = ${cutT.toFixed(3)};
+  gsap.set("#apx", { xPercent: -50, yPercent: -50, transformPerspective: 900, transformOrigin: "50% 50%" });
+  gsap.set("#apxcone", { transformOrigin: "50% 100%" });
+  gsap.set("#apxbeam", { transformOrigin: "50% 100%" });
+  gsap.set("#bcone",   { transformOrigin: "50% 100%" });
+  gsap.set("#apxclip", { clipPath: "inset(100% 0% 0% 0%)" });
+
+  // ===== body-zone projector boots with the rail (cone behind the subject)
+  tl.set("#bdot", { opacity: 1 }, 0.06);
+  tl.fromTo("#bdot", { scale: 0.2 }, { scale: 1, duration: 0.12, ease: "back.out(2)" }, 0.06);
+  tl.set("#bcone", { opacity: 0.9 }, 0.08);
+  tl.fromTo("#bcone", { scaleY: 0.05 }, { scaleY: 1, duration: 0.14, ease: "expo.out" }, 0.08);
+  tl.set("#bcone", { opacity: 0.5 }, 0.22);
+  tl.set("#bcone", { opacity: 0.9 }, 0.26);
+  ${J(coneFlicks)}.forEach((t, i) => {
+    tl.to("#bcone", { keyframes: { opacity: i % 2 ? [0.86, 0.72, 0.84, 0.7, 0.84] : [0.9, 0.74, 0.86, 0.72, 0.86] },
+                      duration: 2.2, ease: "none" }, t);
+  });
+  ${J(dotPulses)}.forEach((t) => {
+    tl.to("#bdot", { keyframes: { scale: [1, 1.3, 1, 1.25, 1] }, duration: 2.0, ease: "none" }, t);
+  });
+  ${dotTail != null ? `tl.to("#bdot", { keyframes: { scale: [1, 1.25, 1] }, duration: 1.0, ease: "none" }, ${dotTail});` : ""}
+  // projector cut at the very end
+  tl.to("#bcone", { opacity: 0, duration: 0.18, ease: "power1.in" }, ${(DUR - 0.2).toFixed(3)});
+  tl.set("#bdot", { scale: 1.6 }, ${(DUR - 0.12).toFixed(3)});
+  tl.set("#bdot", { opacity: 0 }, ${(DUR - 0.05).toFixed(3)});
+
+  // ===== scene reaction: the room dims while the volumetric apex burns
+  tl.fromTo("#scrimH", { opacity: 0 }, { opacity: ${dna.plate.scrim ?? 0.58}, duration: 0.34, ease: "power2.in" }, I - 0.21);
+  tl.set("#dimH", { opacity: ${dna.plate.charge ?? 0.28} }, I - 0.05);
+  tl.to("#dimH",   { opacity: ${dna.plate.dim ?? 0.18}, duration: ${reactD}, ease: "power2.out" }, I + 0.24);
+  tl.to("#scrimH", { opacity: ${((dna.plate.scrim ?? 0.58) * 0.79).toFixed(2)}, duration: ${reactD}, ease: "power2.out" }, I + 0.24);
+  tl.to(["#dimH","#scrimH"], { opacity: 0, duration: 0.4, ease: "power1.in" }, CUT - 0.12);
+
+  // ===== APEX: full volumetric boot
+  // 1. emitter dot pops, cone SNAPS wide
+  tl.set("#apxdot", { opacity: 1 }, I - 0.135);
+  tl.fromTo("#apxdot", { scale: 0.2 }, { scale: 1, duration: 0.12, ease: "back.out(2.4)" }, I - 0.135);
+  tl.set("#apxcone", { opacity: 1 }, I - 0.125);
+  tl.fromTo("#apxcone", { scaleX: 0.07 }, { scaleX: 1, duration: 0.11, ease: "expo.out" }, I - 0.125);
+  tl.set("#apxcone", { opacity: 0.55 }, I - 0.01);
+  tl.set("#apxcone", { opacity: 0.95 }, I + 0.035);
+  // 2. seed beam fires up from the emitter
+  tl.set("#apxbeam", { opacity: 1 }, I - 0.095);
+  tl.fromTo("#apxbeam", { scaleY: 0 }, { scaleY: 1, duration: 0.085, ease: "power3.in" }, I - 0.095);
+  tl.to("#apxbeam", { opacity: 0, duration: 0.3, ease: "power1.in" }, I + 0.11);
+  // 3. the word boots with a RISING sweep (opacity instant, reveal is a wipe)
+  tl.set("#apx", { opacity: 1 }, I - 0.055);
+  tl.to("#apxclip", { clipPath: "inset(0% 0% 0% 0%)", duration: 0.125, ease: "power2.in" }, I - 0.055);
+  tl.set("#apxclip", { clipPath: "none" }, I + 0.08); // free the glow bloom after the sweep
+  // 4. contact: over-bright flash + squash held 2 frames + elastic settle
+  tl.set("#apxclip", { filter: "brightness(2.3)" }, ${C.toFixed(3)});
+  tl.to("#apxclip",  { filter: "brightness(1)", duration: 0.36, ease: "power2.out" }, ${(C + 0.05).toFixed(3)});
+  tl.set("#apx", { scaleX: 1.07, scaleY: 0.91 }, ${C.toFixed(3)});
+  tl.to("#apx",  { scaleX: 1, scaleY: 1, duration: 0.5, ease: "elastic.out(1, 0.38)" }, ${(C + 0.084).toFixed(3)});
+  // interference glitch on arrival (1-frame x jumps)
+  tl.set("#apxclip", { x: 3 },  ${(C + 0.02).toFixed(3)});
+  tl.set("#apxclip", { x: -3 }, ${(C + 0.062).toFixed(3)});
+  tl.set("#apxclip", { x: 0 },  ${(C + 0.104).toFixed(3)});
+  // chromatic fringes blow wide then settle to the constant offset
+  tl.fromTo("#cmag", { x: -8 }, { x: -2, duration: 0.4, ease: "power2.out" }, ${C.toFixed(3)});
+  tl.fromTo("#ccyn", { x: 8 },  { x: 2,  duration: 0.4, ease: "power2.out" }, ${C.toFixed(3)});
+
+  // ===== hold life: interference bands climb, rotateY oscillates, glow breathes, loom
+  tl.set("#abands", { opacity: 0.55, backgroundPosition: "0px 0px" }, I + 0.24);
+  tl.to("#abands", { backgroundPosition: "0px -${6 * bandH}px", duration: ${holdD}, ease: "none" }, I + 0.24);
+  tl.to("#apx", { keyframes: { rotationY: [0, 6, -7, 5, 0] }, duration: ${holdD}, ease: "none" }, I + 0.24);
+  tl.to("#aglow", { keyframes: { opacity: [0.55, 0.4, 0.52, 0.38, 0.5] }, duration: ${holdD2}, ease: "none" }, I + 0.29);
+  tl.to("#apxcone", { keyframes: { opacity: [0.95, 0.78, 0.9, 0.76, 0.88] }, duration: ${holdD2}, ease: "none" }, I + 0.29);
+  tl.to("#apxdot", { keyframes: { scale: [1, 1.4, 1, 1.35, 1, 1.3, 1] }, duration: ${holdD2}, ease: "none" }, I + 0.29);
+  ${loomD >= 0.2 ? `tl.to("#apx", { scale: 1.028, duration: ${loomD}, ease: "sine.inOut" }, I + 0.74);` : ""}
+${
+  doPass
+    ? `
+  // ===== a hand "passes through" the projection: pure projection logic
+  const P = ${passT.toFixed(3)};
+  tl.set("#apx", { skewX: 6 }, P);
+  tl.set("#apxclip", { filter: "blur(2.5px) brightness(1.35)" }, P);
+  tl.set("#cmag", { x: -7 }, P);
+  tl.set("#ccyn", { x: 7 },  P);
+  tl.set("#apx", { skewX: -4 }, P + 0.042);
+  tl.set("#apxclip", { filter: "blur(1px)" }, P + 0.083);
+  tl.set("#apx", { skewX: 0 }, P + 0.125);
+  tl.set("#apxclip", { filter: "none" }, P + 0.125);
+  tl.to("#cmag", { x: -2, duration: 0.18, ease: "power2.out" }, P + 0.05);
+  tl.to("#ccyn", { x: 2,  duration: 0.18, ease: "power2.out" }, P + 0.05);
+  tl.set("#apx", { scaleY: 0.97 }, P + 0.13);
+  tl.to("#apx", { scaleY: 1, duration: 0.3, ease: "elastic.out(1, 0.4)" }, P + 0.172);`
+    : ""
+}
+
+  // ===== EXIT: projector cut — collapse to a horizontal line, then to the base dot
+  tl.set("#apxclip", { filter: "brightness(2.4)" }, CUT - 0.02);
+  tl.to("#apx", { scaleY: 0.018, duration: 0.09, ease: "power3.in" }, CUT);
+  tl.to("#apx", { scaleX: 0.015, duration: 0.075, ease: "power3.in" }, CUT + 0.10);
+  tl.set("#apx", { opacity: 0 }, CUT + 0.18);
+  tl.to("#apxcone", { opacity: 0, duration: 0.16, ease: "power1.in" }, CUT + 0.02);
+  tl.set("#apxdot", { scale: 2.2 }, CUT + 0.12);
+  tl.to("#apxdot", { opacity: 0, duration: 0.09, ease: "power2.in" }, CUT + 0.18);`;
+  return { css, html, js };
+}
+
+function setpieceBiobloom() {
+  // BIOLUME apex: a bioluminescent BLOOM behind the subject. The abyss grade
+  // (params.mood) + a breathing vignette sit on the room from t=0 — the world
+  // IS underwater before anything speaks. A creature pre-glow gathers with a
+  // double-beat anticipation and crushes to a point; a dark pocket scrim
+  // (plate.scrim) opens behind the word zone; the word CONDENSES in (scale
+  // 2.35 crush power4.in 0.11s, blur 15→2, brightness 2.6→1.7) → 2-frame
+  // contact squash → elastic settle while cyan light SPILLS onto the scene;
+  // 6 luminous tendrils (blurred SVG strokes, cyan/violet alternating) draw
+  // outward from the word rect, staggered; through the hold the glow breathes
+  // 8–14%, two counter-drifting caustic gradients shimmer over the text zone
+  // and the bloom drifts slowly with the current (params.drift). Exit: the
+  // light SINKS — every glowing thing drifts down while dimming. Tendril
+  // geometry is hand-authored from the demo and baked at compile time as
+  // offsets from the word center (halfW/x × fontPx/120 units, frame-clamped).
+  const p = dna.hero.params || {},
+    I = heroIn;
+  const A = dna.palette.accent,
+    VIO = dna.palette.violet || "#9d7bff",
+    ICE = dna.palette.ice || "#8fe8ff",
+    CORE = dna.palette.core || "#f2fffd";
+  const fpx = HG.fontPx,
+    halfW = Math.round(HG.halfW || heroText.length * 0.33 * fpx),
+    cx = HG.x,
+    cy = HG.y;
+  const ky = fpx / 120; // demo scale unit (Fredoka 700 @ 120px)
+  const demoHalf = (wordPx("RECOVER", dna.fonts.hero, 120, 0.01) || 562) / 2;
+  const kx = halfW / demoHalf;
+  const TX = (x) => Math.round(Math.max(16, Math.min(W - 16, cx + (x - 560) * kx)));
+  const TY = (y) => Math.round(Math.max(16, Math.min(H - 16, cy + (y - 300) * ky)));
+  // 6 tendril cubics: anchors on the word rect edge, filaments reaching out
+  const TENDRILS = [
+    [
+      [340, 268],
+      [255, 230],
+      [195, 185],
+      [135, 110],
+    ],
+    [
+      [525, 244],
+      [500, 185],
+      [560, 140],
+      [520, 70],
+    ],
+    [
+      [725, 262],
+      [795, 222],
+      [850, 180],
+      [915, 112],
+    ],
+    [
+      [365, 332],
+      [280, 372],
+      [215, 425],
+      [150, 492],
+    ],
+    [
+      [580, 352],
+      [605, 415],
+      [545, 465],
+      [585, 530],
+    ],
+    [
+      [715, 335],
+      [790, 380],
+      [855, 425],
+      [920, 475],
+    ],
+  ].map((pts) => {
+    const q = pts.map(([x, y]) => TX(x) + " " + TY(y));
+    return `M ${q[0]} C ${q[1]}, ${q[2]}, ${q[3]}`;
+  });
+  const TCOL = [A, VIO, ICE, A, VIO, A];
+  const C = +(I + (p.crush ?? 0.11)).toFixed(3); // contact
+  const SINK = +Math.min(heroOut - 0.2, DUR - 0.3).toFixed(3);
+  // tendril stagger auto-clamps so the last filament completes before the sink
+  const stag = +Math.max(0.02, Math.min(0.05, (SINK - 0.46 - (C + 0.02)) / 5)).toFixed(3);
+  const breatheD = +Math.min(0.72, Math.max(0.3, DUR - 0.06 - (C + 0.12))).toFixed(2);
+  const flickD = +Math.min(0.7, SINK - 0.02 - (C + 0.34)).toFixed(2);
+  const shimD = +Math.min(0.5, Math.max(0.2, SINK + 0.03 - (C + 0.21))).toFixed(2);
+  const driftD = +Math.min(0.64, Math.max(0.2, SINK - (I + 0.21))).toFixed(2);
+  const wordFlickT = I + 0.59 + 0.32 <= SINK + 0.05 ? +(I + 0.59).toFixed(3) : null;
+  // geometry derived from the word rect
+  const pkW = Math.round(2 * halfW + 280),
+    pkH = Math.round(2.5 * fpx);
+  const pgW = Math.round(1.083 * fpx),
+    pgH = Math.round(0.717 * fpx);
+  const cxP = ((cx / W) * 100).toFixed(1),
+    cyP = ((cy / H) * 100).toFixed(1);
+  const css = `
+  #abyss { position:absolute; inset:0; opacity:${p.mood ?? 0.92};
+           background:linear-gradient(180deg, rgba(3,11,26,0.52) 0%, rgba(3,11,26,0.30) 30%,
+                       rgba(4,9,20,0.10) 52%, rgba(2,7,16,0.18) 78%, rgba(1,5,12,0.34) 100%); }
+  #vig { position:absolute; inset:0; opacity:0.75;
+         background:radial-gradient(120% 110% at 50% 46%, rgba(0,0,0,0) 36%,
+                     rgba(2,8,20,0.45) 66%, rgba(1,4,12,0.95) 100%); }
+  #pocket { position:absolute; left:${cx - Math.round(pkW / 2)}px; top:${cy - Math.round(pkH / 2)}px;
+            width:${pkW}px; height:${pkH}px; opacity:0;
+            background:radial-gradient(50% 50% at 50% 50%, rgba(1,8,18,0.72) 0%,
+                        rgba(1,8,18,0.40) 55%, rgba(1,8,18,0) 78%); }
+  #spill { position:absolute; inset:0; opacity:0;
+           background:radial-gradient(58% 46% at ${cxP}% ${cyP}%, ${A}80 0%,
+                       ${A}2b 42%, ${A}00 74%); }
+  .cau { position:absolute; left:${Math.round(W * 0.0625)}px; top:${Math.round(H * 0.069)}px;
+         width:${Math.round(W * 0.781)}px; height:${Math.round(H * 0.75)}px; opacity:0; }
+  #cauA { background:radial-gradient(46% 42% at 42% 46%, ${ICE}d9 0%, ${ICE}00 68%); }
+  #cauB { background:radial-gradient(44% 46% at 58% 52%, ${VIO}bf 0%, ${VIO}00 66%); }
+  #preglow { position:absolute; left:${cx}px; top:${cy}px; width:${pgW}px; height:${pgH}px;
+             margin-left:-${Math.round(pgW / 2)}px; margin-top:-${Math.round(pgH / 2)}px;
+             border-radius:50%; opacity:0;
+             background:radial-gradient(50% 50% at 50% 50%, rgba(170,255,242,0.95) 0%,
+                         ${A}80 45%, ${A}00 75%);
+             filter:blur(${Math.max(6, Math.round(10 * ky))}px); }
+  #tndwrap { position:absolute; inset:0; }
+  #tnd { position:absolute; inset:0; width:${W}px; height:${H}px; }
+  #gGlow { filter:blur(5px); }
+  #gCore { filter:blur(1.1px); }
+  #tnd path { fill:none; stroke-linecap:round; opacity:0; }
+  #apex { position:absolute; left:${cx}px; top:${cy}px; opacity:0; }
+  .aw { position:absolute; left:0; top:0; white-space:nowrap;
+        font-family:'${dna.fonts.hero}', sans-serif; font-weight:700; font-size:${fpx}px;
+        line-height:1; letter-spacing:0.01em; }
+  #aglow { color:${A}; filter:blur(${Math.max(10, Math.round(18 * ky))}px); opacity:0; }
+  #aword { color:${CORE};
+           text-shadow: 0 0 ${Math.round(18 * ky)}px ${A}f2, 0 0 ${Math.round(46 * ky)}px ${A}8c,
+                        0 0 ${Math.round(100 * ky)}px ${VIO}80, 0 4px ${Math.round(22 * ky)}px rgba(1,8,16,0.7); }`;
+  const html = `      <div id="abyss"></div>
+      <div id="vig"></div>
+      <div id="pocket"></div>
+      <div id="spill"></div>
+      <div class="cau" id="cauA"></div>
+      <div class="cau" id="cauB"></div>
+      <div id="preglow"></div>
+      <div id="tndwrap">
+        <svg id="tnd" viewBox="0 0 ${W} ${H}" xmlns="http://www.w3.org/2000/svg">
+          <g id="gGlow"></g>
+          <g id="gCore"></g>
+        </svg>
+      </div>
+      <div id="apex">
+        <div class="aw" id="aglow">${esc(heroText)}</div>
+        <div class="aw" id="aword">${esc(heroText)}</div>
+      </div>`;
+  const js = `
+  // ---- setpiece: BIOBLOOM (pre-glow gathers → word condenses → tendrils draw → light sinks) ----
+  const BI = ${I.toFixed(3)}, BC = ${C.toFixed(3)}, SINK = ${SINK.toFixed(3)};
+  gsap.set(["#aglow", "#aword"], { xPercent: -50, yPercent: -50 });
+  gsap.set("#apex", { transformOrigin: "0px 0px" });
+  gsap.set("#preglow", { scale: 0.6 });
+
+  // ===== the abyss breathes (whole clip) =====
+  tl.to("#vig", { keyframes: { opacity: [0.8, 0.72, 0.83, 0.74, 0.81, 0.76] },
+                  duration: ${(DUR - 0.09).toFixed(2)}, ease: "sine.inOut" }, 0.03);
+
+  // ===== light tendrils (SVG, drawn outward from the word rect) =====
+  const TND = ${J(TENDRILS)};
+  const TCOL = ${J(TCOL)};
+  const NS = "http://www.w3.org/2000/svg";
+  const gGlow = document.getElementById("gGlow");
+  const gCore = document.getElementById("gCore");
+  const tpaths = [];
+  TND.forEach((d, i) => {
+    const mk = (g, w) => {
+      const pp = document.createElementNS(NS, "path");
+      pp.setAttribute("d", d); pp.setAttribute("stroke", TCOL[i]);
+      pp.setAttribute("stroke-width", w); g.appendChild(pp);
+      const L = pp.getTotalLength();
+      gsap.set(pp, { strokeDasharray: L, strokeDashoffset: L });
+      return pp;
+    };
+    tpaths.push([mk(gGlow, ${Math.max(6, Math.round(9 * ky))}), mk(gCore, ${Math.max(2, Math.round(3 * ky))})]);
+  });
+
+  // ===== anticipation: a creature approaches — double-beat pre-glow =====
+  tl.to("#preglow", { keyframes: { opacity: [0.34, 0.14, 0.46, 0.34],
+                                   scale:   [0.9, 0.72, 1.08, 0.95] },
+                      duration: 0.19, ease: "sine.inOut" }, ${Math.max(0.05, I - 0.31).toFixed(3)});
+  tl.to("#preglow", { scale: 0.32, opacity: 0.95, duration: 0.1, ease: "power4.in" }, ${Math.max(0.17, I - 0.115).toFixed(3)});
+  tl.set("#preglow", { opacity: 0 }, BI);
+  tl.to("#pocket", { opacity: ${dna.plate.scrim ?? 0.55}, duration: 0.22, ease: "power2.out" }, BI - 0.03);
+
+  // ===== bloom arrival: crush -> contact squash (2f) -> elastic settle =====
+  tl.set("#apex", { opacity: 1 }, BI);
+  tl.fromTo("#apex", { scale: 2.35 }, { scale: 1.0, duration: ${(C - I).toFixed(3)}, ease: "power4.in" }, BI);
+  tl.fromTo("#aword", { filter: "blur(15px) brightness(2.6)" },
+            { filter: "blur(2px) brightness(1.7)", duration: ${(C - I).toFixed(3)}, ease: "power4.in" }, BI);
+  tl.set("#apex", { scaleX: 1.09, scaleY: 0.93 }, BC);
+  tl.set("#aword", { filter: "blur(0px) brightness(1.85)" }, BC);
+  tl.set("#aglow", { opacity: 0.9 }, BC);
+  tl.set("#spill", { opacity: 0.55 }, BC);
+  tl.to("#apex", { scaleX: 1, scaleY: 1, duration: 0.5, ease: "elastic.out(1, 0.42)" }, BC + 0.085);
+  tl.to("#aword", { filter: "blur(0px) brightness(1.45)", duration: 0.34, ease: "power2.out" }, BC + 0.1);
+  tl.to("#spill", { opacity: 0.2, duration: 0.12, ease: "expo.out" }, BC + 0.07);
+
+  // ===== tendrils draw outward, staggered =====
+  tpaths.forEach(([pg, pc], i) => {
+    const t0 = BC + 0.02 + i * ${stag};
+    tl.set(pg, { opacity: 0.5 }, t0);
+    tl.set(pc, { opacity: 0.95 }, t0);
+    tl.to([pg, pc], { strokeDashoffset: 0, duration: 0.42, ease: "power2.out" }, t0);
+  });
+${
+  flickD >= 0.25
+    ? `  tl.to("#gGlow", { keyframes: { opacity: [0.78, 1, 0.72, 1, 0.82] },
+                    duration: ${flickD}, ease: "sine.inOut" }, BC + 0.34);`
+    : ""
+}
+
+  // ===== hold: glow breathes strongly (8-14%), caustics counter-drift =====
+  tl.to("#aglow", { keyframes: { scale: [1.1, 1.04, 1.13, 1.07],
+                                 opacity: [0.78, 0.9, 0.7, 0.85] },
+                    duration: ${breatheD}, ease: "sine.inOut" }, BC + 0.12);
+${
+  wordFlickT != null
+    ? `  tl.to("#aword", { keyframes: { filter: ["blur(0px) brightness(1.6)", "blur(0px) brightness(1.4)",
+                                          "blur(0px) brightness(1.62)", "blur(0px) brightness(1.5)"] },
+                    duration: 0.32, ease: "sine.inOut" }, ${wordFlickT.toFixed(3)});`
+    : ""
+}
+  tl.to("#cauA", { opacity: 0.06, duration: 0.3, ease: "power1.out" }, BC + 0.02);
+  tl.to("#cauB", { opacity: 0.06, duration: 0.3, ease: "power1.out" }, BC + 0.07);
+  tl.fromTo("#cauA", { x: -45 }, { x: 85, duration: ${Math.min(0.95, DUR - 0.06 - (C + 0.02)).toFixed(2)}, ease: "none" }, BC + 0.02);
+  tl.fromTo("#cauB", { x: 55 }, { x: -75, duration: ${Math.min(0.95, DUR - 0.06 - (C + 0.02)).toFixed(2)}, ease: "none" }, BC + 0.02);
+  tl.to("#spill", { keyframes: { opacity: [0.13, 0.19, 0.15] },
+                    duration: ${shimD}, ease: "sine.inOut" }, BC + 0.21);
+  // deep-sea current: the bloom drifts slowly, revealing letters from behind
+  // the subject (x channel otherwise unused on #apex)
+  tl.to("#apex", { x: ${p.drift ?? -30}, duration: ${driftD}, ease: "sine.out" }, BI + 0.21);
+
+  // ===== exit: the light SINKS back into the deep =====
+  tl.to("#tndwrap", { y: 14, opacity: 0, duration: 0.2, ease: "power2.in" }, SINK);
+  tl.to(["#cauA", "#cauB"], { opacity: 0, duration: 0.18, ease: "power1.in" }, SINK + 0.04);
+  tl.to(["#pocket", "#spill"], { opacity: 0, duration: 0.22, ease: "power1.in" }, SINK + 0.04);
+  tl.to("#apex", { y: 26, opacity: 0, duration: 0.2, ease: "power2.in" }, SINK + 0.06);
+  tl.to("#aword", { filter: "blur(6px) brightness(1.2)", duration: 0.2, ease: "power1.in" }, SINK + 0.06);
+  tl.set("#apex", { display: "none" }, ${Math.min(SINK + 0.28, DUR - 0.02).toFixed(3)});`;
+  return { css, html, js };
+}
+
+function setpieceSilkribbon() {
+  // ---- setpiece: SILKRIBBON (aurora silk written into the night sky) ----
+  // The hero word is WRITTEN behind the subject as a silk ribbon: sequential
+  // Hershey-stroke reveal (one <path> per pen stroke, constant pen speed) in
+  // a blurred halo + tight core, BOTH stroked by ONE userSpaceOnUse aurora
+  // linearGradient (rose→teal→violet, reflect spread). SIGNATURE: the
+  // gradient's x1/x2 translate f(t) from I−0.07 to the end so the aurora
+  // colors FLOW THROUGH the drawn ribbon during the hold. A soft light mote
+  // (blurred halo + core dot) rides the pen, hops at lifts, and blooms out
+  // at the final stroke. Scene reaction: two huge aurora blobs drift the sky
+  // f(t) from t=0 (~params.wash) and DEEPEN as the ribbon writes; a top
+  // scrim (plate.scrim) charges in at I−0.34 (sky washout guard); a light
+  // spill tints the sky once the ribbon completes, flickering gently; the
+  // halo breathes through the hold. Gentle — no shake, no contact squash:
+  // the apex verb is the writing itself.
+  const h = dna.hero,
+    p = h.params,
+    I = heroIn;
+  // stroke path baked at COMPILE time — any word, zero tuning (drawon pattern)
+  const fontPath = path.join(SKILL, "assets/strokefonts", dna.fonts.strokeFont);
+  const gen = path.join(SKILL, "scripts/gen-stroke-path.py");
+  const tw = HG.ribbonW || Math.min(p.targetWidth || 880, W - 240);
+  const svgW = tw + 130,
+    svgH = 280;
+  const D = execFileSync(
+    "python3",
+    [
+      gen,
+      fontPath,
+      heroDisplay.toLowerCase(),
+      String(tw),
+      "200",
+      String(Math.round((svgW - tw) / 2)),
+    ],
+    { encoding: "utf8" },
+  ).trim();
+  const ENDT = +(DUR - 0.04).toFixed(3);
+  // writing window: keep the demo's 0.68s unless the hero lands too late to
+  // finish + hold before the end of the clip
+  const WIN = Math.min(p.window || 0.68, Math.max(0.36, ENDT - 0.42 - I));
+  const ROSE = dna.palette.rose,
+    TEAL = dna.palette.accent,
+    VIO = dna.palette.violet,
+    DEEP = dna.palette.deep || "#070C24";
+  const scrim = (dna.plate || {}).scrim ?? 0.72;
+  // aurora gradient span rides the ribbon ink (demo: 560 over 880, shift 1.5×span)
+  const gx1 = Math.round((svgW - tw) / 2),
+    span = Math.round(tw * 0.6364);
+  const spillW = tw + 60,
+    spillH = Math.round((tw + 60) * 0.51);
+  const css = `
+  .aur { position:absolute; border-radius:50%; opacity:0; will-change:transform; }
+  #aurA { left:${Math.round(-0.141 * W)}px; top:${Math.round(-0.278 * H)}px; width:${Math.round(0.859 * W)}px; height:${Math.round(0.778 * H)}px;
+          background: radial-gradient(50% 50% at 50% 50%, ${TEAL}d9 0%, ${TEAL}00 70%); }
+  #aurB { left:${Math.round(0.406 * W)}px; top:${Math.round(-0.361 * H)}px; width:${Math.round(0.922 * W)}px; height:${Math.round(0.833 * H)}px;
+          background: radial-gradient(50% 50% at 50% 50%, ${ROSE}cc 0%, ${ROSE}00 70%); }
+  #apexScrim { position:absolute; left:0; top:0; width:${W}px; height:${Math.round(0.653 * H)}px; opacity:0;
+               background: linear-gradient(to bottom, ${DEEP}${Math.round(scrim * 255)
+                 .toString(16)
+                 .padStart(2, "0")} 0%, ${DEEP}${Math.round(scrim * 0.694 * 255)
+                 .toString(16)
+                 .padStart(2, "0")} 55%, ${DEEP}00 100%); }
+  #spill { position:absolute; left:${HG.x}px; top:${HG.y}px; width:${spillW}px; height:${spillH}px;
+           margin-left:-${Math.round(spillW / 2)}px; margin-top:-${Math.round(spillH / 2)}px; opacity:0;
+           background: radial-gradient(50% 50% at 50% 50%, ${TEAL}80 0%, ${VIO}47 45%, ${ROSE}00 75%); }
+  #silk { position:absolute; left:${HG.x}px; top:${HG.y}px; margin-left:-${Math.round(svgW / 2)}px;
+          margin-top:-${Math.round(svgH / 2)}px; overflow:visible; }
+  #coreG { filter: drop-shadow(0 0 6px rgba(255,255,255,0.55)); }`;
+  const html = `      <div class="aur" id="aurA"></div>
+      <div class="aur" id="aurB"></div>
+      <div id="apexScrim"></div>
+      <div id="spill"></div>
+      <svg id="silk" width="${svgW}" height="${svgH}" viewBox="0 0 ${svgW} ${svgH}">
+        <defs>
+          <linearGradient id="agrad" gradientUnits="userSpaceOnUse"
+                          x1="${gx1}" y1="0" x2="${gx1 + span}" y2="0" spreadMethod="reflect">
+            <stop offset="0"   stop-color="${ROSE}"/>
+            <stop offset="0.5" stop-color="${TEAL}"/>
+            <stop offset="1"   stop-color="${VIO}"/>
+          </linearGradient>
+          <filter id="haloblur" x="-60%" y="-60%" width="220%" height="220%">
+            <feGaussianBlur stdDeviation="7"/>
+          </filter>
+        </defs>
+        <g id="haloG" filter="url(#haloblur)" opacity="0.85"></g>
+        <g id="coreG"></g>
+        <circle id="nib" r="7" fill="#fff" opacity="0" filter="url(#haloblur)"/>
+        <circle id="nibCore" r="3.5" fill="#fff" opacity="0"/>
+      </svg>`;
+  const js = `
+  // ---- setpiece: SILKRIBBON (sequential silk-stroke reveal, flowing aurora gradient) ----
+  const I9 = ${I.toFixed(3)}, WIN = ${WIN.toFixed(3)}, DRAWN = I9 + WIN, ENDT = ${ENDT};
+  const D = ${J(D)};
+
+  // aurora wash: 2 huge soft blobs drifting f(t) (baked keyframes, ease none)
+  tl.to("#aurA", { opacity: ${p.wash ?? 0.12}, duration: 0.5, ease: "sine.out" }, 0.05);
+  tl.to("#aurB", { opacity: ${p.wash ?? 0.12}, duration: 0.5, ease: "sine.out" }, 0.15);
+  tl.to("#aurA", { keyframes: { x: [0, 34, 58, 44, 16, -8, 0], y: [0, 10, 22, 30, 22, 8, 0] },
+                   duration: ENDT, ease: "none" }, 0);
+  tl.to("#aurB", { keyframes: { x: [0, -28, -52, -60, -38, -12, 0], y: [0, 14, 8, -6, -16, -8, 0] },
+                   duration: ENDT, ease: "none" }, 0);
+  // sky reaction: the aurora deepens while the ribbon writes
+  tl.to("#aurA", { opacity: ${p.deepen ?? 0.2}, duration: 0.5, ease: "sine.inOut" }, I9 - 0.1);
+  tl.to("#aurB", { opacity: ${p.deepen ?? 0.2}, duration: 0.5, ease: "sine.inOut" }, I9 - 0.05);
+
+  // apex scrim charges in before the ribbon (sky washout guard)
+  tl.to("#apexScrim", { opacity: 1, duration: 0.38, ease: "sine.inOut" }, I9 - 0.34);
+
+  // silk ribbon: sequential stroke draw-on, halo + core share the gradient
+  const subs = D.split(/(?=M )/).map(s => s.trim()).filter(Boolean);
+  const SVGNS = "http://www.w3.org/2000/svg";
+  function mk(parent, d, w) {
+    const el = document.createElementNS(SVGNS, "path");
+    el.setAttribute("d", d); el.setAttribute("fill", "none");
+    el.setAttribute("stroke", "url(#agrad)"); el.setAttribute("stroke-width", w);
+    el.setAttribute("stroke-linecap", "round"); el.setAttribute("stroke-linejoin", "round");
+    el.setAttribute("opacity", "0");  // hidden until its turn (kills round-cap dot)
+    document.getElementById(parent).appendChild(el);
+    return el;
+  }
+  const strokes = subs.map((d) => ({ halo: mk("haloG", d, ${p.haloWidth ?? 18}),
+                                     core: mk("coreG", d, ${p.coreWidth ?? 6}) }));
+  let total = 0;
+  strokes.forEach((s) => { s.len = s.core.getTotalLength(); total += s.len; });
+  let t9 = I9;
+  strokes.forEach((s) => {
+    const d = WIN * s.len / total;
+    gsap.set([s.core, s.halo], { strokeDasharray: s.len, strokeDashoffset: s.len });
+    tl.set([s.core, s.halo], { opacity: 1 }, t9);
+    tl.fromTo([s.core, s.halo], { strokeDashoffset: s.len },
+              { strokeDashoffset: 0, duration: d, ease: "none" }, t9);
+    // nib (a soft light mote) rides each stroke, hops at pen lifts
+    const n = Math.max(4, Math.round(s.len / 14)), xs = [], ys = [];
+    for (let k = 0; k <= n; k++) {
+      const pt = s.core.getPointAtLength(s.len * k / n);
+      xs.push(pt.x); ys.push(pt.y);
+    }
+    tl.set(["#nib", "#nibCore"], { x: xs[0], y: ys[0] }, t9);
+    tl.to("#nib", { keyframes: { x: xs, y: ys }, duration: d, ease: "none" }, t9);
+    tl.to("#nibCore", { keyframes: { x: xs, y: ys }, duration: d, ease: "none" }, t9);
+    t9 += d;
+  });
+  gsap.set(["#nib", "#nibCore"], { attr: { cx: 0, cy: 0 } });
+  tl.set("#nib", { opacity: 0.85 }, I9 - 0.01);
+  tl.set("#nibCore", { opacity: 1 }, I9 - 0.01);
+  tl.to("#nib", { scale: 2.4, opacity: 0, duration: 0.22, ease: "sine.in",
+                  transformOrigin: "50% 50%" }, DRAWN);
+  tl.to("#nibCore", { scale: 2.4, opacity: 0, duration: 0.16, ease: "sine.in",
+                      transformOrigin: "50% 50%" }, DRAWN);
+
+  // SIGNATURE: the gradient FLOWS through the drawn ribbon — translate the
+  // userSpaceOnUse gradient (x1/x2 together); reflect spread makes the aurora
+  // colors march continuously along the silk during the hold
+  tl.fromTo("#agrad", { attr: { x1: ${gx1}, x2: ${gx1 + span} } },
+            { attr: { x1: ${gx1 - Math.round(1.5 * span)}, x2: ${gx1 + span - Math.round(1.5 * span)} },
+              duration: ENDT - (I9 - 0.07), ease: "none" }, I9 - 0.07);
+
+  // light spill tints the sky as the ribbon completes
+  tl.to("#spill", { opacity: ${p.spill ?? 0.3}, duration: 0.7, ease: "sine.out" }, I9 + 0.1);
+  if (ENDT - (I9 + 0.8) > 0.15) {
+    const SP = ${p.spill ?? 0.3};
+    tl.to("#spill", { keyframes: { opacity: [SP, SP - 0.05, SP + 0.01, SP - 0.04, SP] },
+                      duration: ENDT - (I9 + 0.8), ease: "none" }, I9 + 0.8);
+  }
+  // hold life: the halo breathes gently (aurora shimmer)
+  if (ENDT - DRAWN > 0.1)
+    tl.to("#haloG", { keyframes: { opacity: [0.85, 0.7, 0.9, 0.72, 0.86] },
+                      duration: ENDT - DRAWN, ease: "none" }, DRAWN);`;
+  return { css, html, js };
+}
+
+function setpieceScopetrace() {
+  // ---- setpiece: SCOPETRACE (the trace leaps off the scope and WRITES the word) ----
+  // A surge column jumps from the scope band up to the pen-start point, then
+  // the waveform WRITES the hero word in a thin phosphor stroke (sequential
+  // Hershey stroke reveal — core only, no halo: it is a trace, not a tube).
+  // The phosphor FILL flicker-arrives 2 frames + a 5-step blink AFTER the
+  // write completes (scope persistence), hums + breathes 1.6% through the
+  // hold, then the word COLLAPSES to a flatline (scaleY crush + horizontal
+  // flash) clearing before the next spoken word. Scene reaction: phosphor
+  // scrim + green spill behind the subject; a 1-frame green pulse answers the
+  // final transcript word (the scope-death beat the paradigm owns up front).
+  const h = dna.hero,
+    p = h.params,
+    I = heroIn;
+  const fontPath = path.join(SKILL, "assets/strokefonts", dna.fonts.strokeFont);
+  const gen = path.join(SKILL, "scripts/gen-stroke-path.py");
+  const tw = HG.traceW;
+  // strip punctuation for the pen (the demo wrote "pixel size", period dropped)
+  const traceText = heroDisplay.toLowerCase().replace(/[^\p{L}\p{N} ']/gu, "");
+  const svgW = tw + 140,
+    svgH = 320,
+    BY = 215, // local baseline; ink center ≈ BY − 28 (demo registration)
+    CY = BY - 28;
+  const D = execFileSync(
+    "python3",
+    [gen, fontPath, traceText, String(tw), String(BY), String(70)],
+    { encoding: "utf8" },
+  ).trim();
+  // surge column lands at the pen-start point (first M of the path)
+  const m0 = D.match(/M ([\d.]+) ([\d.]+)/);
+  const surgeX = Math.round(HG.x - svgW / 2 + (m0 ? +m0[1] : 70));
+  const WIN = p.window || 0.6;
+  const FLICK = +(I + WIN + (p.flickGap ?? 0.12)).toFixed(3);
+  // exit: collapse to flatline CLEAR of the next spoken word (the demo's
+  // 3.33 before "It's" 3.545); falls back to the hero window end
+  const nextT = tWords
+    .filter((w) => w.start > hero.end + 0.01)
+    .map((w) => w.start)
+    .sort((a, b) => a - b)[0];
+  let EXIT = nextT != null ? nextT - (p.clearGap ?? 0.215) : heroOut - 0.2;
+  EXIT = +Math.max(FLICK + 0.45, Math.min(EXIT, heroOut)).toFixed(3);
+  const A = dna.palette.accent,
+    BRT = dna.palette.bright || "#d6ffe4";
+  const scrim = dna.plate.scrim ?? 0.62;
+  const ox = ((HG.x / W) * 100).toFixed(1),
+    oy = ((HG.y / H) * 100).toFixed(1);
+  const spillW = tw + 260,
+    spillH = Math.round((tw + 260) * 0.47);
+  const css = `
+  #scdim { position:absolute; inset:0; opacity:0;
+           background: radial-gradient(90% 75% at ${ox}% ${oy}%, rgba(1,14,7,${scrim}) 0%, rgba(1,10,5,${(scrim * 0.55).toFixed(2)}) 60%, rgba(1,8,4,${(scrim * 0.19).toFixed(2)}) 100%); }
+  #scspill { position:absolute; left:${HG.x}px; top:${HG.y}px; width:${spillW}px; height:${spillH}px;
+             margin-left:-${Math.round(spillW / 2)}px; margin-top:-${Math.round(spillH / 2)}px; border-radius:50%; opacity:0;
+             background: radial-gradient(50% 50% at 50% 50%, ${A}33 0%, ${A}00 70%); }
+  #scsurge { position:absolute; left:${surgeX}px; top:0; width:3px; height:${H}px; opacity:0;
+             background: linear-gradient(180deg, ${A}00 0%, ${BRT}f2 45%, ${A}80 100%);
+             box-shadow: 0 0 12px ${A}cc; }
+  #scblk { position:absolute; inset:0; }
+  #scsvg { position:absolute; left:${HG.x}px; top:${HG.y}px; margin-left:-${Math.round(svgW / 2)}px;
+           margin-top:-${CY}px; overflow:visible; }
+  #schaloG { filter: blur(7px); opacity:0.85; }
+  #sccoreG { filter: drop-shadow(0 0 4px ${BRT}e6) drop-shadow(0 0 14px ${A}); }
+  #scpen { filter: drop-shadow(0 0 7px #fff) drop-shadow(0 0 20px ${A}); }
+  #scflat { position:absolute; left:${Math.round(HG.x - (tw + 36) / 2)}px; top:${HG.y - 2}px;
+            width:${tw + 36}px; height:4px; opacity:0;
+            background:${BRT}; box-shadow: 0 0 18px ${A}, 0 0 42px ${A}b3; }
+  #scpulse { position:absolute; inset:0; opacity:0;
+             background: radial-gradient(70% 60% at 50% 60%, ${A}38 0%, rgba(0,0,0,0) 70%); }`;
+  const html = `      <div id="scdim"></div>
+      <div id="scspill"></div>
+      <div id="scsurge"></div>
+      <div id="scblk">
+        <svg id="scsvg" width="${svgW}" height="${svgH}" viewBox="0 0 ${svgW} ${svgH}">
+          <g id="schaloG"></g>
+          <g id="sccoreG"></g>
+          <circle id="scpen" r="5" fill="#fff" opacity="0"/>
+        </svg>
+      </div>
+      <div id="scflat"></div>
+      <div id="scpulse"></div>`;
+  const js = `
+  // ---- setpiece: SCOPETRACE (surge → pen write → fill flicker → hum → flatline) ----
+  const I = ${I.toFixed(3)}, WIN = ${WIN}, DRAWN = I + WIN, FLICK = ${FLICK.toFixed(3)}, EXIT = ${EXIT.toFixed(3)};
+  const D = ${J(D)};
+
+  // scene reaction: phosphor scrim + spill while the trace owns the room
+  tl.fromTo("#scdim", { opacity: 0 }, { opacity: 1, duration: 0.22, ease: "power2.in" }, I - 0.18);
+  tl.to("#scdim", { opacity: 0, duration: 0.30, ease: "power1.in" }, EXIT + 0.05);
+  tl.fromTo("#scspill", { opacity: 0 }, { opacity: ${p.spill ?? 0.55}, duration: WIN, ease: "power1.in" }, I);
+  tl.to("#scspill", { opacity: 0, duration: 0.18, ease: "power2.in" }, EXIT);
+
+  // surge: the trace leaps up from the scope band to the pen-start point
+  tl.fromTo("#scsurge", { opacity: 0, scaleY: 0, transformOrigin: "50% 100%" },
+            { opacity: 1, scaleY: 1, duration: 0.10, ease: "power3.in" }, I - 0.12);
+  tl.set("#scsurge", { opacity: 0 }, I + 0.04);
+
+  // sequential stroke draw-on (one <path> per pen lift; core writes, halo waits)
+  const subs = D.split(/(?=M )/).map(s => s.trim()).filter(Boolean);
+  const SVGNS = "http://www.w3.org/2000/svg";
+  function mkP(parent, d, stroke, w) {
+    const el = document.createElementNS(SVGNS, "path");
+    el.setAttribute("d", d); el.setAttribute("fill", "none");
+    el.setAttribute("stroke", stroke); el.setAttribute("stroke-width", w);
+    el.setAttribute("stroke-linecap", "round"); el.setAttribute("stroke-linejoin", "round");
+    el.setAttribute("opacity", "0");
+    document.getElementById(parent).appendChild(el);
+    return el;
+  }
+  const strokes = subs.map((d) => ({
+    halo: mkP("schaloG", d, ${J(A)}, ${p.haloWidth || 14}),
+    core: mkP("sccoreG", d, ${J(BRT)}, ${p.coreWidth || 4}),
+  }));
+  let total = 0;
+  strokes.forEach((s) => { s.len = s.core.getTotalLength(); total += s.len; });
+  const scpen = document.getElementById("scpen");
+  let t = I;
+  strokes.forEach((s) => {
+    const d = WIN * s.len / total;
+    gsap.set([s.core, s.halo], { strokeDasharray: s.len, strokeDashoffset: s.len });
+    gsap.set(s.halo, { opacity: 0 });           // halo arrives at FLICK, not during write
+    tl.set(s.core, { opacity: 1 }, t);
+    tl.fromTo(s.core, { strokeDashoffset: s.len },
+              { strokeDashoffset: 0, duration: d, ease: "none" }, t);
+    tl.fromTo(s.halo, { strokeDashoffset: s.len },
+              { strokeDashoffset: 0, duration: d, ease: "none" }, t);
+    const n = Math.max(4, Math.round(s.len / 14)), xs = [], ys = [];
+    for (let k = 0; k <= n; k++) {
+      const pt = s.core.getPointAtLength(s.len * k / n);
+      xs.push(pt.x); ys.push(pt.y);
+    }
+    tl.set(scpen, { x: xs[0], y: ys[0] }, t);
+    tl.to(scpen, { keyframes: { x: xs, y: ys }, duration: d, ease: "none" }, t);
+    t += d;
+  });
+  gsap.set(scpen, { attr: { cx: 0, cy: 0 } });
+  tl.set(scpen, { opacity: 1 }, I - 0.01);
+  tl.to(scpen, { scale: 2.4, opacity: 0, duration: 0.12, ease: "power2.in",
+                 transformOrigin: "50% 50%" }, DRAWN);
+
+  // fill flicker-on (halo = phosphor "fill"; full within 2 frames)
+  tl.set("#schaloG", { opacity: 0 }, 0);
+  const haloPaths = strokes.map(s => s.halo);
+  tl.set(haloPaths, { opacity: 1 }, FLICK - 2 * F);      // pre-arm strokes
+  [[1, 0], [0.25, 1], [1, 2], [0.55, 3], [1, 4]].forEach(([o, k]) => {
+    tl.set("#schaloG", { opacity: o }, FLICK + k * F);
+  });
+  tl.set("#sccoreG", { opacity: 0.55 }, FLICK + F);
+  tl.set("#sccoreG", { opacity: 1 }, FLICK + 2 * F);
+
+  // hold life: glow hum + 1.6% breathe (breathe ends exactly at the collapse)
+  const humStart = FLICK + 5 * F, humDur = Math.max(0.2, EXIT - humStart);
+  const NH = Math.max(6, Math.round(humDur / (2 * F)));
+  const humVals = [];
+  for (let k = 0; k <= NH; k++) {
+    const tt = k / NH * humDur;
+    humVals.push(0.80 + 0.10 * Math.sin(2 * Math.PI * 7 * tt) + 0.06 * Math.sin(2 * Math.PI * 11.3 * tt + 0.9));
+  }
+  tl.to("#schaloG", { keyframes: { opacity: humVals }, duration: humDur, ease: "none" }, humStart);
+  tl.fromTo("#scblk", { scale: 1, transformOrigin: "${ox}% ${oy}%" },
+            { scale: 1.016, duration: humDur, ease: "sine.inOut" }, humStart);
+
+  // exit: trace collapses back to a flatline (the scope takes the word back)
+  tl.to("#scblk", { scaleY: 0.02, duration: 0.14, ease: "power3.in",
+                    transformOrigin: "${ox}% ${oy}%" }, EXIT);
+  tl.set("#scblk", { opacity: 0 }, EXIT + 0.15);
+  tl.set("#scflat", { opacity: 1 }, EXIT + 0.13);
+  tl.to("#scflat", { opacity: 0, scaleX: 0.1, duration: 0.16, ease: "power2.in",
+                     transformOrigin: "50% 50%" }, EXIT + 0.15);
+
+  // second beat: 1-frame phosphor pulse behind the subject on the death word
+  tl.set("#scpulse", { opacity: 1 }, ${Math.min(LASTWORD.start, DUR - 0.15).toFixed(3)});
+  tl.set("#scpulse", { opacity: 0.4 }, ${Math.min(LASTWORD.start + F, DUR - 0.1).toFixed(3)});
+  tl.set("#scpulse", { opacity: 0 }, ${Math.min(LASTWORD.start + 2 * F, DUR - 0.05).toFixed(3)});`;
+  return { css, html, js };
+}
+
+function setpiecePapermat() {
+  // STOP-MOTION PAPERCUT EMBED: a torn-edge kraft mat drops onto the scene
+  // (steps(2) slap), then one torn cream chip per char DROPS with steps(3)
+  // gravity + 1-frame overshoot, lands crooked (seeded ±3° ±4px), settles in
+  // three 12fps poses and holds an 8fps wobble (baked set chain) until the
+  // FINAL word bumps the table and the chips SCATTER off down-right
+  // (disperse-on-last-word). Scene reaction: warm vignette charges with the
+  // landing. All geometry derives from HG (papermat branch).
+  const p = dna.hero.params || {},
+    I = heroIn;
+  const N = heroText.length;
+  const STEP = p.step ?? 0.09;
+  const tileW = HG.tileW,
+    tileH = HG.tileH,
+    fpx = HG.fontPx,
+    pitch = HG.pitch,
+    matW = HG.matW,
+    matH = HG.matH;
+  const matT = +Math.max(0.02, I - 0.212).toFixed(3);
+  // scatter trigger: the final word bumps the table (hero.exitAt overrides);
+  // the whole exit (chips 0.30 + mat sweep 0.26 at +0.21) lands inside DUR
+  const scatT = +Math.min(
+    Math.max(
+      I + (N - 1) * STEP + 0.5,
+      Math.min(
+        theme.hero.exitAt ?? LASTWORD.start + 0.02,
+        DUR - 0.48,
+        DUR - 0.32 - (N - 1) * 0.045,
+      ),
+    ),
+    DUR - 0.48,
+  ).toFixed(3);
+  const VIG = p.vig ?? 0.3;
+  const dropM = -(HG.y + matH / 2 + 50); // mat fully offscreen above
+  const dropL = -(HG.y + tileH / 2 + 100); // chips fully offscreen above
+  // tableau breathe windows (camera push feel), clamped before the scatter
+  const T1 = +(I + 0.83).toFixed(3);
+  const D1 = +Math.min(2.2, scatT - 0.3 - T1).toFixed(2);
+  const T2 = +(T1 + Math.max(0, D1)).toFixed(3);
+  const D2 = +Math.min(1.9, scatT - 0.15 - T2).toFixed(2);
+  const vigSettleT = +Math.min(matT + 0.79, scatT - 0.85).toFixed(3);
+  const css = `
+  #vigP { position:absolute; inset:0; opacity:0;
+          background: radial-gradient(120% 105% at ${((HG.x / W) * 100).toFixed(0)}% ${((HG.y / H) * 100).toFixed(0)}%, rgba(0,0,0,0) 38%, rgba(26,16,5,0.85) 100%); }
+  #apx  { position:absolute; left:${HG.x}px; top:${HG.y}px; width:0; height:0; }
+  #mat  { position:absolute; left:${-Math.round(matW / 2)}px; top:${-Math.round(matH / 2)}px; width:${matW}px; height:${matH}px; }
+  #mat .pap  { position:absolute; inset:0; background:linear-gradient(178deg,#bd9d6c 0%,#b08f5d 55%,#a17f4c 100%); }
+  #mat .pap2 { position:absolute; inset:7px; background:rgba(140,110,62,0.35); }
+  #matshad { position:absolute; left:${-Math.round(matW / 2) + 2}px; top:${Math.round(matH / 2) - 18}px; width:${matW + 6}px; height:30px; opacity:0;
+             background: radial-gradient(50% 50% at 50% 50%, rgba(25,15,5,0.55) 0%, rgba(25,15,5,0) 72%);
+             filter: blur(5px); }
+  .lshad { position:absolute; width:${Math.round(tileW * 1.08)}px; height:24px; opacity:0;
+           background: radial-gradient(50% 50% at 50% 50%, rgba(28,17,6,0.6) 0%, rgba(28,17,6,0) 70%);
+           filter: blur(4px); }
+  .lchip { position:absolute; width:${tileW}px; height:${tileH}px; }
+  .lchip .pap  { position:absolute; inset:0; background:${dna.palette.paper || "#f8f0dd"}; }
+  .lchip .pap2 { position:absolute; inset:5px; background:${dna.palette.paper2 || "#efe3c6"}; }
+  .lchip .gl { position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
+               font-family:'${dna.fonts.hero}', sans-serif; font-size:${fpx}px; line-height:1; color:${dna.palette.ink || "#2b241b"}; }`;
+  const html = `      <div id="vigP"></div>
+      <div id="apx">
+        <div id="matshad"></div>
+        <div id="mat"><div class="pap"></div><div class="pap2"></div></div>
+      </div>`;
+  const js = `
+  // ---- setpiece: PAPERMAT (mat slap → stepped-gravity chip drops → 8fps wobble → table-bump scatter) ----
+  const I = ${I.toFixed(3)}, STEP = ${STEP}, SCAT = ${scatT};
+  const prnd = mulberry32(${p.seed || 151515});
+  const apx = document.getElementById("apx");
+  // seeded torn-paper polygon (px coords on a w×h box)
+  function torn(w, h, jag, sx, sy, rr){
+    const pts = [], j = () => Math.min(jag, Math.max(0, jag*0.5 + (rr()-0.5)*jag));
+    for (let i=0; i<=sx; i++) pts.push([(w/sx)*i, j()]);
+    for (let i=1; i<=sy; i++) pts.push([w - j(), (h/sy)*i]);
+    for (let i=sx-1; i>=0; i--) pts.push([(w/sx)*i, h - j()]);
+    for (let i=sy-1; i>=1; i--) pts.push([j(), (h/sy)*i]);
+    return "polygon(" + pts.map(q => q[0].toFixed(1)+"px "+q[1].toFixed(1)+"px").join(",") + ")";
+  }
+  document.querySelector("#mat .pap").style.clipPath  = torn(${matW}, ${matH}, 12, 12, 4, prnd);
+  document.querySelector("#mat .pap2").style.clipPath = torn(${matW - 14}, ${matH - 14}, 10, 12, 4, prnd);
+
+  // ===== MAT: the animator slaps the backdrop down first =====
+  gsap.set("#mat", { transformOrigin: "50% 100%" });
+  tl.fromTo("#mat", { y: ${dropM}, rotation: -5 },
+            { y: 6, rotation: -1.2, duration: 0.14, ease: "steps(2)" }, ${matT});
+  tl.set("#mat", { scaleY: 0.97, scaleX: 1.02 }, ${(matT + 0.14).toFixed(3)});
+  tl.set("#mat", { y: 0, scaleY: 1, scaleX: 1 }, ${(matT + 0.223).toFixed(3)});
+  tl.set("#matshad", { opacity: 0.32 }, ${(matT + 0.14).toFixed(3)});
+  for (let t = ${(matT + 0.54).toFixed(3)}; t < ${(scatT - 0.08).toFixed(3)}; t += 0.25)
+    tl.set("#mat", { x: (prnd()-0.5)*1.6, y: (prnd()-0.5)*1.6, rotation: -1.2 + (prnd()-0.5)*0.7 }, t);
+  // mat leaves last, swept off down-right
+  tl.to("#mat", { x: 430, y: ${H - 40}, rotation: 13, duration: 0.26, ease: "steps(3)" }, ${(scatT + 0.21).toFixed(3)});
+  tl.set("#matshad", { opacity: 0 }, ${(scatT + 0.25).toFixed(3)});
+
+  // ===== SCENE REACTION: warm vignette charges with the landing =====
+  tl.fromTo("#vigP", { opacity: 0 }, { opacity: ${VIG}, duration: 0.24, ease: "power2.in" }, ${matT});
+  tl.to("#vigP", { opacity: ${(VIG * 0.4).toFixed(2)}, duration: 0.7, ease: "power2.out" }, ${vigSettleT});
+  tl.to("#vigP", { opacity: 0, duration: 0.35, ease: "power1.in" }, ${(scatT - 0.11).toFixed(3)});
+
+  // ===== LETTERS: torn chips drop with stepped gravity =====
+  const GLYPHS = ${J([...heroText])};
+  GLYPHS.forEach((ch, i) => {
+    if (ch === " ") return;
+    const cx = (i - ${((N - 1) / 2).toFixed(1)}) * ${pitch} + (prnd()-0.5)*8;  // seeded ±4px misalignment
+    const jy = (prnd()-0.5)*8;
+    const r0 = (prnd()-0.5)*6;             // seeded ±3° crooked landing
+    const C  = I + i * STEP;
+
+    const shad = document.createElement("div");
+    shad.className = "lshad";
+    shad.style.left = (cx - ${Math.round((tileW * 1.08) / 2)}) + "px";
+    shad.style.top  = (${Math.round(tileH / 2) + 3} + jy*0.3) + "px";
+    apx.appendChild(shad);
+
+    const chip = document.createElement("div");
+    chip.className = "lchip";
+    chip.style.left = (cx - ${Math.round(tileW / 2)}) + "px";
+    chip.style.top  = (${-Math.round(tileH / 2)} + jy) + "px";
+    const pap  = document.createElement("div"); pap.className  = "pap";
+    const pap2 = document.createElement("div"); pap2.className = "pap2";
+    const gl   = document.createElement("div"); gl.className   = "gl"; gl.textContent = ch;
+    pap.style.clipPath  = torn(${tileW}, ${tileH}, 8, 6, 7, prnd);
+    pap2.style.clipPath = torn(${tileW - 10}, ${tileH - 10}, 6, 6, 7, prnd);
+    chip.appendChild(pap); chip.appendChild(pap2); chip.appendChild(gl);
+    apx.appendChild(chip);
+    gsap.set(chip, { transformOrigin: "50% 100%" });
+
+    // anticipation shadow blob appears on the landing spot 3 frames early
+    tl.set(shad, { opacity: 0.16, scaleX: 1.35 }, C - 0.125);
+    // DROP: two airborne poses then contact — steps(3) gravity, 1-frame overshoot
+    tl.fromTo(chip, { y: ${dropL}, rotation: r0 - 8 },
+              { y: 8, rotation: r0, duration: 0.21, ease: "steps(3)" }, C - 0.21);
+    tl.set(chip, { scaleX: 1.07, scaleY: 0.90 }, C);                  // contact squash
+    tl.set(shad, { opacity: 0.50, scaleX: 1 }, C);                    // shadow grows on land
+    tl.set(chip, { y: -4, scaleY: 1.05, scaleX: 0.97 }, C + 0.0833);  // 12fps settle pose 1
+    tl.set(chip, { y: 2,  scaleY: 0.98, scaleX: 1.01 }, C + 0.1667);  // pose 2
+    tl.set(chip, { y: 0,  scaleY: 1,    scaleX: 1    }, C + 0.25);    // rest
+    tl.to(shad, { opacity: 0.34, duration: 0.3, ease: "power1.out" }, C + 0.30);
+
+    // HOLD: 8fps wobble — baked sets every 3 frames (the stop-motion heartbeat)
+    for (let t = C + 0.50; t < SCAT - 0.13; t += 0.125)
+      tl.set(chip, { rotation: r0 + (prnd()-0.5)*1.4, x: (prnd()-0.5)*1.4, y: (prnd()-0.5)*1.4 }, t);
+
+    // SCATTER on the final word — chips slide off-table down-right, steps(4)
+    const S = SCAT + i*0.045;
+    tl.to(chip, { x: 250 + prnd()*200, y: ${H - 110} + prnd()*110, rotation: r0 + 28 + prnd()*24,
+                  duration: 0.30, ease: "steps(4)" }, S);
+    tl.set(shad, { opacity: 0 }, S + 0.06);
+  });
+${
+  D1 >= 0.4
+    ? `
+  // hold loom: the whole tableau breathes very slowly (camera push feel)
+  tl.to("#apx", { scale: 1.016, duration: ${D1}, ease: "sine.inOut" }, ${T1});
+${D2 >= 0.3 ? `  tl.to("#apx", { scale: 1.004, duration: ${D2}, ease: "sine.inOut" }, ${T2});` : ""}`
+    : ""
+}
+  // table bump, 1 frame before the scatter begins
+  tl.set("#apx", { y: 4 }, ${(scatT - 0.041).toFixed(3)});
+  tl.set("#apx", { y: 0 }, ${(scatT + 0.001).toFixed(3)});`;
+  return { css, html, js };
+}
+
+function setpieceCenterfold() {
+  // POP-UP BOOK CENTERFOLD: blue + cream 12-point paper starbursts unfold on a
+  // baseline hinge (scaleY 0.03→1 back.out, staggered), then the hero word
+  // pops up in hinged clip-path segments (rotationX 85→0, the body motif at
+  // full amplitude), kraft struts lean in, backdrop + word wobble-settle
+  // TOGETHER (one wrapper owns rotationX), breathe through the hold, and the
+  // whole centerfold folds flat at heroOut (the book closing). A dusk scrim
+  // charges behind it (bright-sky insurance). Geometry derives from HG.
+  const p = dna.hero.params || {},
+    I = heroIn;
+  const segs = p.segs || 3,
+    stag = p.segStagger ?? 0.07;
+  const u = HG.burstR / 220; // prop scale (demo burst R 220)
+  const boxW = HG.boxW,
+    boxH = HG.boxH;
+  const cx = Math.round(boxW / 2),
+    cy = Math.round(boxH / 2);
+  const lineH = Math.round(HG.fontPx * 1.1667);
+  const wordTop = Math.round(cy - 24 * u - lineH / 2); // word center 24u above box center
+  const R1 = HG.burstR,
+    r1 = Math.round(0.673 * R1),
+    R2 = Math.round(0.9 * R1),
+    r2 = Math.round(0.555 * R1);
+  const strokeW = Math.max(2, Math.round(3 * u));
+  // exit start: fold flat before the next sentence (demo 3.28 = heroOut−0.33),
+  // never before the pop + wobble have read, always complete by DUR−0.08
+  const XO = +Math.max(I + (segs - 1) * stag + 0.45, Math.min(heroOut - 0.33, DUR - 0.39)).toFixed(
+    3,
+  );
+  const scrimT = +Math.max(0.02, I - 0.272).toFixed(3);
+  const blueT = +Math.max(0.04, I - 0.272).toFixed(3);
+  const wobT = +(I + 0.428).toFixed(3);
+  const wobD = +Math.min(0.7, XO - 0.05 - (I + 0.428)).toFixed(2);
+  const brT = +(I + 1.178).toFixed(3);
+  const brD = +Math.min(1.7, XO - 0.15 - (I + 1.178)).toFixed(2);
+  const segClips = Array.from({ length: segs }, (_, i) => {
+    const lp = ((i * 100) / segs).toFixed(1),
+      rp = (((segs - 1 - i) * 100) / segs).toFixed(1);
+    return `  #cfsg${i} { clip-path: inset(0 ${rp}% 0 ${lp}%); }`;
+  }).join("\n");
+  const css = `
+  #cfscrim { position:absolute; inset:0; opacity:0;
+             background: radial-gradient(46% 54% at ${((HG.x / W) * 100).toFixed(0)}% ${(((HG.y + 24 * u) / H) * 100).toFixed(0)}%,
+               rgba(16,24,42,0.62) 0%, rgba(16,24,42,0.34) 55%, rgba(16,24,42,0) 100%); }
+  #cf { position:absolute; left:${HG.x}px; top:${Math.round(HG.y + 24 * u)}px; width:${boxW}px; height:${boxH}px; }
+  #cfWob { position:absolute; inset:0; }
+  .cfburst { position:absolute; inset:0; opacity:0; }
+  #cfShadow { position:absolute; left:50%; top:${Math.round(cy + 172 * u)}px; width:${Math.round(380 * u)}px; height:${Math.round(30 * u)}px;
+              margin-left:${-Math.round(190 * u)}px; opacity:0; filter:blur(6px); border-radius:50%;
+              background: radial-gradient(closest-side, rgba(22,14,5,0.55), rgba(22,14,5,0)); }
+  .cfstrut { position:absolute; width:${Math.round(36 * u)}px; height:${Math.round(30 * u)}px; opacity:0;
+             background: linear-gradient(135deg,${dna.palette.kraft1 || "#a98f5e"} 0%, ${dna.palette.kraft2 || "#cdbb92"} 45%, ${dna.palette.kraft3 || "#e6d6af"} 100%);
+             filter: drop-shadow(0 2px 2px rgba(40,26,10,0.35));
+             clip-path: polygon(0 100%, 100% 100%, 100% 0); }
+  #cfs1 { left:${Math.round(cx - 134 * u)}px; top:${Math.round(cy + 28 * u)}px; }
+  #cfs2 { left:${Math.round(cx + 98 * u)}px; top:${Math.round(cy + 28 * u)}px; transform:scaleX(-1); }
+  #cfword { position:absolute; left:0; right:0; top:${wordTop}px; height:${lineH}px; }
+  .cfseg { position:absolute; inset:0; opacity:0; text-align:center;
+           font-family:'${dna.fonts.hero}', sans-serif; font-weight:800; font-size:${HG.fontPx}px;
+           line-height:${lineH}px; letter-spacing:0.02em; color:${dna.palette.ink || dna.palette.body};
+           text-shadow: 0 3px 10px rgba(56,38,14,0.32); }
+${segClips}`;
+  const html = `      <div id="cfscrim"></div>
+      <div id="cf">
+        <div id="cfWob">
+          <svg class="cfburst" id="cfbBlue" width="${boxW}" height="${boxH}" viewBox="0 0 ${boxW} ${boxH}">
+            <polygon id="cfpB" fill="${dna.palette.accent}" stroke="${dna.palette.accentEdge || "#3f7fae"}" stroke-width="${strokeW}"/>
+          </svg>
+          <svg class="cfburst" id="cfbCream" width="${boxW}" height="${boxH}" viewBox="0 0 ${boxW} ${boxH}">
+            <polygon id="cfpC" fill="${dna.palette.cream || "#f6ecd4"}" stroke="${dna.palette.creamEdge || "#8a6f45"}" stroke-width="${strokeW}"/>
+          </svg>
+          <div id="cfShadow"></div>
+          <div class="cfstrut" id="cfs1"></div>
+          <div class="cfstrut" id="cfs2"></div>
+          <div id="cfword">
+${Array.from({ length: segs }, (_, i) => `            <div class="cfseg" id="cfsg${i}"><span>${esc(heroText)}</span></div>`).join("\n")}
+          </div>
+        </div>
+      </div>`;
+  const js = `
+  // ---- setpiece: CENTERFOLD (starburst unfold → hinged segment pop → wobble-settle → fold flat) ----
+  const I = ${I.toFixed(3)}, XO = ${XO};
+  // deterministic starburst geometry (paper sun)
+  function starPts(cx, cy, n, R, r, rot) {
+    const p = [];
+    for (let i = 0; i < n * 2; i++) {
+      const a = rot + Math.PI * i / n, rad = (i % 2 === 0) ? R : r;
+      p.push((cx + Math.cos(a) * rad).toFixed(1) + "," + (cy + Math.sin(a) * rad).toFixed(1));
+    }
+    return p.join(" ");
+  }
+  document.getElementById("cfpB").setAttribute("points", starPts(${cx}, ${cy}, 12, ${R1}, ${r1}, -Math.PI/2 + 0.13));
+  document.getElementById("cfpC").setAttribute("points", starPts(${cx}, ${cy}, 12, ${R2}, ${r2}, -Math.PI/2));
+
+  gsap.set("#cf", { xPercent: -50, yPercent: -50 });
+  gsap.set("#cfWob", { transformPerspective: 900, transformOrigin: "50% 82%" });
+  gsap.set(".cfburst", { transformOrigin: "50% 90%", scaleY: 0.03 });
+  gsap.set(".cfseg", { transformPerspective: 800, transformOrigin: "50% 100%", rotationX: 85 });
+  gsap.set(".cfstrut", { transformOrigin: "50% 100%", scaleY: 0 });
+  gsap.set("#cfShadow", { scaleX: 0.3 });
+
+  // scrim charges before the unfold (bright sky insurance)
+  tl.to("#cfscrim", { opacity: ${p.scrim ?? 0.42}, duration: 0.28, ease: "power2.out" }, ${scrimT});
+
+  // backdrop unfolds FIRST — baseline hinge, paper overshoot
+  tl.set("#cfbBlue", { opacity: 1 }, ${blueT});
+  tl.to("#cfbBlue", { scaleY: 1, duration: 0.26, ease: "back.out(1.6)" }, ${blueT});
+  tl.set("#cfbCream", { opacity: 1 }, ${(+blueT + 0.06).toFixed(3)});
+  tl.to("#cfbCream", { scaleY: 1, duration: 0.26, ease: "back.out(1.6)" }, ${(+blueT + 0.06).toFixed(3)});
+  tl.to("#cfShadow", { opacity: 0.45, scaleX: 1, duration: 0.30, ease: "power2.out" }, ${(+blueT + 0.03).toFixed(3)});
+
+  // the word pops up in hinged segments (left→right), staggered
+  for (let i = 0; i < ${segs}; i++) {
+    const t0 = I + i * ${stag}, el = "#cfsg" + i;
+    tl.set(el, { opacity: 1 }, t0);                                  // 1 within 2 frames
+    tl.to(el, { rotationX: 0, duration: 0.26, ease: "back.out(1.4)" }, t0);
+  }
+
+  // visible paper struts lean in behind the word
+  tl.set(".cfstrut", { opacity: 1 }, ${(I + 0.328).toFixed(3)});
+  tl.to("#cfs1", { scaleY: 1, duration: 0.12, ease: "back.out(2)" }, ${(I + 0.328).toFixed(3)});
+  tl.to("#cfs2", { scaleY: 1, duration: 0.12, ease: "back.out(2)" }, ${(I + 0.378).toFixed(3)});
+${
+  wobD >= 0.2
+    ? `
+  // backdrop + word wobble-settle TOGETHER (one wrapper owns it)
+  tl.to("#cfWob", { keyframes: { rotationX: [0, -3.6, 2.4, -1.3, 0.6, 0] },
+                    duration: ${wobD}, ease: "sine.inOut" }, ${wobT});`
+    : ""
+}
+${
+  brD >= 0.5
+    ? `
+  // hold life: slow paper breathing through the silence
+  tl.to("#cfWob", { keyframes: { rotationX: [0, 1.5, -1.1, 1.3, 0] },
+                    duration: ${brD}, ease: "sine.inOut" }, ${brT});
+  tl.to("#cfShadow", { keyframes: { scaleX: [1, 1.05, 0.98, 1.04, 1] },
+                       duration: ${brD}, ease: "sine.inOut" }, ${brT});`
+    : ""
+}
+
+  // EXIT — the centerfold folds flat (book closing)
+  for (let i = 0; i < ${segs}; i++) {
+    const ft = XO + i * 0.05, el = "#cfsg" + i;
+    tl.to(el, { rotationX: 88, duration: 0.14, ease: "power2.in" }, ft);
+    tl.set(el, { opacity: 0 }, ft + 0.15);
+  }
+  tl.to(".cfstrut", { scaleY: 0, duration: 0.10, ease: "power2.in" }, XO + 0.02);
+  tl.to("#cfbCream", { scaleY: 0.03, duration: 0.13, ease: "power2.in" }, XO + 0.12);
+  tl.set("#cfbCream", { opacity: 0 }, XO + 0.26);
+  tl.to("#cfbBlue", { scaleY: 0.03, duration: 0.12, ease: "power2.in" }, XO + 0.18);
+  tl.set("#cfbBlue", { opacity: 0 }, XO + 0.31);
+  tl.to("#cfShadow", { opacity: 0, scaleX: 0.3, duration: 0.16, ease: "power1.in" }, XO + 0.14);
+  tl.to("#cfscrim", { opacity: 0, duration: 0.28, ease: "power1.in" }, XO + 0.02);`;
+  return { css, html, js };
+}
+
+function setpieceChalkwrite() {
+  // ---- setpiece: CHALKWRITE (the board grows and a hand WRITES the word) ----
+  // The lower chalk band grows into a FULL deep-green board behind the subject
+  // 0.3s before the apex (scaleY power3.out from the bottom edge, the room
+  // dims with it); the hero word is HAND-WRITTEN in chalk — sequential Hershey
+  // stroke reveal (drawon pattern), dry/rough via seeded ±1px jitter baked
+  // onto every pen point, a blurred halo under a tight core, a chalk-stick
+  // nib riding the pen — while dust specks fall from the nib. On completion a
+  // hand-slap CLAP shakes the board 1 frame (the dust burst lives in the
+  // rail, in FRONT of the subject: fx.chalkclap), then TWO violent
+  // accelerating underlines slash beneath (nib rides them, dust kicks at the
+  // ends), the chalk flicks away, and the halo breathes through the hold with
+  // two slow motes drifting off the letters.
+  const h = dna.hero,
+    p = h.params,
+    I = heroIn;
+  const fontPath = path.join(SKILL, "assets/strokefonts", dna.fonts.strokeFont);
+  const gen = path.join(SKILL, "scripts/gen-stroke-path.py");
+  const tw = HG.chalkW;
+  const x0 = Math.round(HG.x - tw / 2);
+  let D = execFileSync(
+    "python3",
+    [gen, fontPath, heroDisplay.toLowerCase(), String(tw), "450", String(x0)],
+    { encoding: "utf8" },
+  ).trim();
+  // register the measured ink box on HG (ink CENTER lands on HG.y), then the
+  // board rect, underlines and the fg clap all derive from the same box
+  const pts = [...D.matchAll(/[ML] ([-\d.]+) ([-\d.]+)/g)].map((m) => [+m[1], +m[2]]);
+  const ys0 = pts.map((q) => q[1]);
+  const dy = +(HG.y - (Math.min(...ys0) + Math.max(...ys0)) / 2).toFixed(1);
+  D = D.replace(/([ML]) ([-\d.]+) ([-\d.]+)/g, (m, c, x, y) => `${c} ${x} ${(+y + dy).toFixed(1)}`);
+  const inkTop = Math.min(...ys0) + dy,
+    inkBot = Math.max(...ys0) + dy,
+    inkH = inkBot - inkTop;
+  const inkL = Math.min(...pts.map((q) => q[0])),
+    inkR = Math.max(...pts.map((q) => q[0]));
+  // board: full strip width, grows from the bottom edge up past the ink
+  // (demo: ink top 320, board top 248 → gap 0.554 × ink height 130)
+  const stripW = (dna.body.strip && dna.body.strip.w) || 1200;
+  const SX = (dna.body.strip && dna.body.strip.x) ?? Math.round((W - stripW) / 2);
+  const boardTop = Math.max(40, Math.round(inkTop - (p.boardGap ?? 0.554) * Math.max(inkH, 90)));
+  const boardH = H - boardTop;
+  const kw = stripW / 1200,
+    kb = boardH / 472; // board furniture scales with the demo rect (1200×472)
+  const ENDT = +(DUR - 0.04).toFixed(3);
+  // writing window: keep the demo's 0.78s unless the hero lands too late to
+  // finish + underline + hold before the end of the clip
+  const WIN = Math.min(p.window || 0.78, Math.max(0.4, ENDT - 0.95 - I));
+  const DRAWN = +(I + WIN).toFixed(3);
+  // hand-off to the fg dust clap: the pen's final contact point, at write end
+  HG.clapX = Math.round(pts[pts.length - 1][0]);
+  HG.clapY = Math.round(pts[pts.length - 1][1] + dy);
+  HG.clapT = DRAWN;
+  const CHALK = dna.palette.chalk || dna.palette.accent || "#fbf9ef";
+  const DUST = dna.palette.dust || "#f6f4e9";
+  const css = `
+  #cwDim { position:absolute; inset:0; background:${p.dimColor || "rgba(4,14,9,0.95)"}; opacity:0; }
+  #cwVig { position:absolute; inset:0; opacity:0;
+           background: radial-gradient(75% 70% at 50% 45%, rgba(0,0,0,0) 55%, rgba(2,10,6,0.55) 100%); }
+  #cwUnit { position:absolute; inset:0; }
+  #cwBoard { position:absolute; left:${SX}px; top:${boardTop}px; width:${stripW}px; height:${boardH}px;
+             background: linear-gradient(180deg, ${dna.palette.boardHi || "#22392c"} 0%, ${dna.palette.board || "#1d3328"} 40%, ${dna.palette.boardLo || "#182b22"} 100%);
+             border-radius:6px 6px 0 0;
+             box-shadow: inset 0 0 90px rgba(0,0,0,0.55), 0 6px 24px rgba(0,0,0,0.45); }
+  #cwRim { position:absolute; top:0; left:0; right:0; height:7px; opacity:0.85;
+           border-radius:6px 6px 0 0;
+           background: linear-gradient(180deg, ${dna.palette.rim || "#8a6a48"} 0%, ${dna.palette.rimLo || "#5f452c"} 100%); }
+  #cwBoard .bsm { position:absolute; border-radius:50%; }
+  #cwBsm1 { left:${Math.round(120 * kw)}px; top:${Math.round(90 * kb)}px; width:${Math.round(430 * kw)}px; height:${Math.round(150 * kb)}px; transform:rotate(-5deg);
+            background: radial-gradient(50% 50% at 50% 50%, rgba(214,226,214,0.08) 0%, rgba(214,226,214,0) 70%); }
+  #cwBsm2 { left:${Math.round(660 * kw)}px; top:${Math.round(230 * kb)}px; width:${Math.round(380 * kw)}px; height:${Math.round(130 * kb)}px; transform:rotate(4deg);
+            background: radial-gradient(50% 50% at 50% 50%, rgba(214,226,214,0.07) 0%, rgba(214,226,214,0) 70%); }
+  #cwSvg { position:absolute; left:0; top:0; overflow:visible; }
+  #cwHaloG { opacity:${p.halo ?? 0.18}; }
+  #cwCoreG { opacity:0.92; }`;
+  const html = `      <div id="cwDim"></div>
+      <div id="cwVig"></div>
+      <div id="cwUnit">
+        <div id="cwBoard">
+          <div id="cwRim"></div>
+          <div class="bsm" id="cwBsm1"></div>
+          <div class="bsm" id="cwBsm2"></div>
+        </div>
+        <svg id="cwSvg" width="${W}" height="${H}" viewBox="0 0 ${W} ${H}">
+          <defs>
+            <filter id="chalkblur" x="-40%" y="-40%" width="180%" height="180%">
+              <feGaussianBlur stdDeviation="3.2"/>
+            </filter>
+          </defs>
+          <g id="cwHaloG" filter="url(#chalkblur)"></g>
+          <g id="cwCoreG"></g>
+          <g id="cwDustG"></g>
+          <rect id="cwNib" x="-9" y="-3" width="18" height="6" rx="2.5" fill="#fffef6" opacity="0"/>
+        </svg>
+      </div>`;
+  const js = `
+  // ---- setpiece: CHALKWRITE (board grows; the hero word is hand-written in chalk) ----
+  const I8 = ${I.toFixed(3)}, WIN8 = ${WIN.toFixed(3)}, DRAWN = ${DRAWN}, ENDT = ${ENDT};
+  const D8 = ${J(D)};
+  const crnd = mulberry32(${p.seed ?? 7});
+
+  // scene reaction: vignette early; the room dims as the board grows
+  tl.fromTo("#cwVig", { opacity: 0 }, { opacity: ${p.vig ?? 0.35}, duration: 0.35, ease: "power1.out" }, 0.10);
+  tl.fromTo("#cwDim", { opacity: 0 }, { opacity: ${p.dim ?? 0.22}, duration: 0.30, ease: "power1.in" }, ${(I - 0.3).toFixed(3)});
+
+  // the board grows taller 0.3s before the writing
+  gsap.set("#cwBoard", { scaleY: 0, transformOrigin: "50% 100%" });
+  tl.to("#cwBoard", { scaleY: 1, duration: 0.30, ease: "power3.out" }, ${(I - 0.3).toFixed(3)});
+
+  // chalk strokes: dry/rough = baked ±1px y jitter on every pen point
+  const jrnd = mulberry32(${p.jitterSeed ?? 21});
+  const jD = D8.replace(/([ML]) ([-\\d.]+) ([-\\d.]+)/g,
+    (m, c, x, y) => c + " " + x + " " + (parseFloat(y) + (jrnd()*2 - 1)).toFixed(1));
+  const subs = jD.split(/(?=M )/).map(s => s.trim()).filter(Boolean);
+  const SVGNS8 = "http://www.w3.org/2000/svg";
+  function mk(parent, d, stroke, w) {
+    const el = document.createElementNS(SVGNS8, "path");
+    el.setAttribute("d", d); el.setAttribute("fill", "none");
+    el.setAttribute("stroke", stroke); el.setAttribute("stroke-width", w);
+    el.setAttribute("stroke-linecap", "round"); el.setAttribute("stroke-linejoin", "round");
+    el.setAttribute("opacity", "0");
+    document.getElementById(parent).appendChild(el);
+    return el;
+  }
+  const strokes = subs.map((d) => ({
+    halo: mk("cwHaloG", d, "#ffffff", ${p.haloWidth ?? 14}),
+    core: mk("cwCoreG", d, ${J(CHALK)}, ${p.coreWidth ?? 7}),
+  }));
+  let total = 0;
+  strokes.forEach((s) => { s.len = s.core.getTotalLength(); total += s.len; });
+  const nib = document.getElementById("cwNib");
+  gsap.set(nib, { rotation: -36, transformOrigin: "50% 50%" });
+  let acc = 0;
+  const cum = [];                                      // cumulative starts per stroke
+  strokes.forEach((s) => { cum.push(acc); acc += s.len; });
+  strokes.forEach((s, si) => {
+    const d = WIN8 * s.len / total, st = I8 + WIN8 * cum[si] / total;
+    gsap.set([s.core, s.halo], { strokeDasharray: s.len, strokeDashoffset: s.len });
+    tl.set([s.core, s.halo], { opacity: 1 }, st);
+    tl.fromTo([s.core, s.halo], { strokeDashoffset: s.len },
+              { strokeDashoffset: 0, duration: d, ease: "none" }, st);
+    const n = Math.max(4, Math.round(s.len / 14)), xs = [], ys = [];
+    for (let k = 0; k <= n; k++) {
+      const pt = s.core.getPointAtLength(s.len * k / n);
+      xs.push(pt.x); ys.push(pt.y);
+    }
+    tl.set(nib, { x: xs[0], y: ys[0] }, st);
+    tl.to(nib, { keyframes: { x: xs, y: ys }, duration: d, ease: "none" }, st);
+  });
+  tl.set(nib, { opacity: 1 }, I8 - 0.01);
+
+  // ${p.dustN ?? 8} dust specks fall from the nib along the path
+  function speck(parent, x, y, r, fill) {
+    const c = document.createElementNS(SVGNS8, "circle");
+    c.setAttribute("cx", x); c.setAttribute("cy", y); c.setAttribute("r", r);
+    c.setAttribute("fill", fill); c.setAttribute("opacity", "0");
+    document.getElementById(parent).appendChild(c);
+    return c;
+  }
+  for (let k = 0; k < ${p.dustN ?? 8}; k++) {
+    const f = (k + 0.6) / ${p.dustN ?? 8}, target = f * total;
+    let si = 0; while (si < strokes.length - 1 && cum[si + 1] <= target) si++;
+    const pt = strokes[si].core.getPointAtLength(target - cum[si]);
+    const c = speck("cwDustG", pt.x, pt.y + 4, 1.6 + crnd() * 1.4, ${J(DUST)});
+    const ts = I8 + f * WIN8;
+    tl.set(c, { opacity: 0.9 }, ts);
+    tl.to(c, { y: 26 + crnd() * 20, x: crnd() * 14 - 7, duration: 0.5, ease: "power1.in" }, ts);
+    tl.to(c, { opacity: 0, duration: 0.42, ease: "power1.in" }, ts + 0.08);
+  }
+
+  // hand-slap CLAP: 1-frame board shake (dust burst lives in the rail, in front)
+  tl.set("#cwUnit", { y: 3  }, DRAWN);
+  tl.set("#cwUnit", { y: -2 }, DRAWN + F);
+  tl.set("#cwUnit", { y: 1  }, DRAWN + 2*F);
+  tl.set("#cwUnit", { y: 0  }, DRAWN + 3*F);
+
+  // two violent underlines (fast accelerating slashes), seeded waviness
+  const UL = [
+    { x1: ${Math.round(inkL + 14)}, x2: ${Math.round(inkR - 4)},  y: ${Math.round(inkBot + 30)}, n: 4, t: DRAWN + 0.09, dur: 0.10 },
+    { x1: ${Math.round(inkL + 58)}, x2: ${Math.round(inkR - 44)}, y: ${Math.round(inkBot + 50)}, n: 3, t: DRAWN + 0.23, dur: 0.09 },
+  ];
+  UL.forEach((u) => {
+    if (u.t + u.dur > ENDT - 0.1) return;
+    let ud = "M " + u.x1 + " " + (u.y + (crnd()*9 - 4.5)).toFixed(1);
+    for (let k = 1; k <= u.n; k++)
+      ud += " L " + (u.x1 + (u.x2 - u.x1) * k / u.n).toFixed(1) + " " + (u.y + (crnd()*9 - 4.5)).toFixed(1);
+    const halo = mk("cwHaloG", ud, "#ffffff", ${p.haloWidth ?? 14});
+    const core = mk("cwCoreG", ud, ${J(CHALK)}, ${(p.coreWidth ?? 7) + 1});
+    const len = core.getTotalLength();
+    gsap.set([core, halo], { strokeDasharray: len, strokeDashoffset: len });
+    tl.set([core, halo], { opacity: 1 }, u.t);
+    tl.fromTo([core, halo], { strokeDashoffset: len },
+              { strokeDashoffset: 0, duration: u.dur, ease: "power3.in" }, u.t);
+    // nib rides the slash
+    const n = 8, xs = [], ys = [];
+    for (let k = 0; k <= n; k++) { const pt = core.getPointAtLength(len * k / n); xs.push(pt.x); ys.push(pt.y); }
+    tl.set(nib, { x: xs[0], y: ys[0] }, u.t);
+    tl.to(nib, { keyframes: { x: xs, y: ys }, duration: u.dur, ease: "none" }, u.t);
+    // dust kicked up where the slash ends
+    for (let k = 0; k < 3; k++) {
+      const c = speck("cwDustG", xs[n] - 4 + crnd() * 8, ys[n], 1.4 + crnd(), ${J(DUST)});
+      tl.set(c, { opacity: 0.85 }, u.t + u.dur);
+      tl.to(c, { y: 16 + crnd() * 14, x: crnd() * 18 - 6, opacity: 0, duration: 0.38, ease: "power1.in" }, u.t + u.dur);
+    }
+  });
+  // chalk flicks away after the second underline
+  tl.to(nib, { x: "+=30", y: "+=22", scale: 2, opacity: 0, duration: 0.14, ease: "power2.in" },
+        Math.min(DRAWN + 0.35, ENDT - 0.15));
+
+  // hold life: halo breathe (baked f(t), deterministic)
+  const humStart = Math.min(DRAWN + 0.46, ENDT - 0.3), humDur = ENDT - humStart;
+  const N8 = Math.max(6, Math.round(humDur / (2 * F)));
+  const humVals = [];
+  for (let k = 0; k <= N8; k++) {
+    const tt = k / N8 * humDur;
+    humVals.push(${p.halo ?? 0.18} + 0.05 * Math.sin(2 * Math.PI * 1.6 * tt) + 0.02 * Math.sin(2 * Math.PI * 3.7 * tt + 0.8));
+  }
+  tl.to("#cwHaloG", { keyframes: { opacity: humVals }, duration: humDur, ease: "none" }, humStart);
+  // two slow motes drifting off the letters during the hold
+  [[humStart + 0.10, ${Math.round(inkL + 0.43 * (inkR - inkL))}], [humStart + 0.50, ${Math.round(inkL + 0.71 * (inkR - inkL))}]].forEach(([ts, mx]) => {
+    if (ts + 0.5 > ENDT) return;
+    const c = speck("cwDustG", mx + crnd() * 30, ${Math.round((inkTop + inkBot) / 2 + 42)}, 1.5 + crnd(), ${J(DUST)});
+    tl.set(c, { opacity: 0.6 }, ts);
+    tl.to(c, { y: 30, x: crnd() * 10 - 5, opacity: 0, duration: 0.5, ease: "power1.in" }, ts);
+  });`;
+  return { css, html, js };
+}
+
+function setpieceSpraytag() {
+  // ---- setpiece: SPRAYTAG (a writer steps up and TAGS the hero word) ----
+  // The dusk wall dims + a radial scrim charges as the writer steps up; the
+  // can RATTLES at the start point (seeded set-chain nib jitter), then the
+  // hero word is spray-written stroke by stroke — sequential Hershey dash
+  // reveal (drawon pattern) — as a TRIPLE stack per stroke: fat dark
+  // under-stroke (sky-contrast armor) + blurred overspray halo + wet paint
+  // core, the glowing nib riding each stroke. Seeded overspray dots pop near
+  // the nib as it passes; the nib throws off at the finish (the magenta splat
+  // lives in the rail, in FRONT of the subject: fx.paintsplat). Through the
+  // hold, seeded DRIPS grow from painted low points (signature) and the halo
+  // hums while the whole tag slowly looms.
+  const h = dna.hero,
+    p = h.params,
+    I = heroIn;
+  const fontPath = path.join(SKILL, "assets/strokefonts", dna.fonts.strokeFont);
+  const gen = path.join(SKILL, "scripts/gen-stroke-path.py");
+  const tw = HG.sprayW;
+  const x0 = Math.round(HG.x - tw / 2);
+  let D = execFileSync(
+    "python3",
+    [gen, fontPath, heroDisplay.toLowerCase(), String(tw), "450", String(x0)],
+    { encoding: "utf8" },
+  ).trim();
+  // register the measured ink box on HG (ink CENTER lands on HG.y); the loom
+  // origin and the fg paint splat derive from the same box
+  const pts = [...D.matchAll(/[ML] ([-\d.]+) ([-\d.]+)/g)].map((m) => [+m[1], +m[2]]);
+  const ys0 = pts.map((q) => q[1]);
+  const dy = +(HG.y - (Math.min(...ys0) + Math.max(...ys0)) / 2).toFixed(1);
+  D = D.replace(/([ML]) ([-\d.]+) ([-\d.]+)/g, (m, c, x, y) => `${c} ${x} ${(+y + dy).toFixed(1)}`);
+  const ENDT = +(DUR - 0.04).toFixed(3);
+  // writing window: keep the demo's 0.58s unless the hero lands too late to
+  // finish + splat + drip before the end of the clip
+  const WIN = Math.min(p.window || 0.58, Math.max(0.35, ENDT - 0.55 - I));
+  const DRAWN = +(I + WIN).toFixed(3);
+  // hand-off to the fg paint splat: the pen-finish point, at write end
+  HG.splatX = Math.round(pts[pts.length - 1][0]);
+  HG.splatY = Math.round(pts[pts.length - 1][1] + dy);
+  HG.splatT = DRAWN;
+  const PAINT = dna.palette.accent || "#ffd23f";
+  const UNDER = dna.palette.under || "#241008";
+  const NIB = dna.palette.nib || "#fff6d9";
+  const css = `
+  #stDim   { position:absolute; inset:0; opacity:0; background:${p.dimColor || "#0a0608"}; }
+  #stScrim { position:absolute; inset:0; opacity:0;
+             background: radial-gradient(92% 78% at 50% 36%, rgba(0,0,0,0) 28%, rgba(10,4,12,0.78) 100%); }
+  #stWrap { position:absolute; inset:0; }
+  #stSvg  { position:absolute; left:0; top:0; overflow:visible; }
+  #stCoreG { filter: drop-shadow(0 3px 7px rgba(0,0,0,0.55)); }
+  #stNib { filter: blur(0.8px) drop-shadow(0 0 9px ${PAINT}e6); }
+  .stdrip { position:absolute; height:0; opacity:0;
+            background: linear-gradient(180deg, ${PAINT} 0%, ${dna.palette.dripMid || "#eab928"} 78%, ${dna.palette.dripLo || "#d8a51d"} 100%);
+            border-radius: 0 0 4px 4px;
+            box-shadow: 0 2px 4px rgba(0,0,0,0.35); }`;
+  const html = `      <div id="stDim"></div><div id="stScrim"></div>
+      <div id="stWrap">
+        <svg id="stSvg" width="${W}" height="${H}" viewBox="0 0 ${W} ${H}">
+          <defs>
+            <filter id="sprayblur" x="-40%" y="-40%" width="180%" height="180%">
+              <feGaussianBlur stdDeviation="7"/>
+            </filter>
+          </defs>
+          <g id="stUnderG" opacity="0.9"></g>
+          <g id="stHaloG" filter="url(#sprayblur)" opacity="${p.haloOpacity ?? 0.5}"></g>
+          <g id="stCoreG"></g>
+          <g id="stOsprayG"></g>
+          <circle id="stNib" r="9" fill="${NIB}" opacity="0"/>
+        </svg>
+      </div>`;
+  const js = `
+  // ---- setpiece: SPRAYTAG (rattle → sequential spray write → drips + hum) ----
+  const Ig = ${I.toFixed(3)}, WINg = ${WIN.toFixed(3)}, DRAWNg = ${DRAWN}, ENDTg = ${ENDT};
+  const Dg = ${J(D)};
+  const grnd = mulberry32(${p.seed ?? 140987});
+
+  // scene reaction: the wall darkens as the writer steps up (charge)
+  tl.fromTo("#stDim",   { opacity: 0 }, { opacity: ${p.dim ?? 0.22}, duration: 0.40, ease: "power2.in" }, ${(I - 0.42).toFixed(3)});
+  tl.fromTo("#stScrim", { opacity: 0 }, { opacity: ${p.scrim ?? 0.62}, duration: 0.40, ease: "power2.in" }, ${(I - 0.42).toFixed(3)});
+
+  // per-stroke TRIPLE stack (split at pen lifts) — sequential dash reveal
+  const subsG = Dg.split(/(?=M )/).map(s => s.trim()).filter(Boolean);
+  const SVGNSG = "http://www.w3.org/2000/svg";
+  function mkG(parent, d, stroke, w) {
+    const el = document.createElementNS(SVGNSG, "path");
+    el.setAttribute("d", d); el.setAttribute("fill", "none");
+    el.setAttribute("stroke", stroke); el.setAttribute("stroke-width", w);
+    el.setAttribute("stroke-linecap", "round"); el.setAttribute("stroke-linejoin", "round");
+    el.setAttribute("opacity", "0");
+    document.getElementById(parent).appendChild(el);
+    return el;
+  }
+  const strokesG = subsG.map((d) => ({
+    under: mkG("stUnderG", d, ${J(UNDER)}, ${p.underWidth ?? 21}),  // dark edge — sky-contrast armor
+    halo:  mkG("stHaloG",  d, ${J(PAINT)}, ${p.haloWidth ?? 36}),   // fat soft overspray spread
+    core:  mkG("stCoreG",  d, ${J(PAINT)}, ${p.coreWidth ?? 13}),   // wet paint core
+  }));
+  let totalG = 0;
+  strokesG.forEach((s) => { s.len = s.core.getTotalLength(); totalG += s.len; });
+
+  // helper: point at a global arc-length along the whole word
+  function pointAtTotal(L) {
+    let acc = 0;
+    for (const s of strokesG) {
+      if (L <= acc + s.len) return s.core.getPointAtLength(L - acc);
+      acc += s.len;
+    }
+    return strokesG[strokesG.length - 1].core.getPointAtLength(strokesG[strokesG.length - 1].len);
+  }
+
+  // ANTICIPATION: the can RATTLES at the start point before painting
+  const nibG = document.getElementById("stNib");
+  gsap.set(nibG, { attr: { cx: 0, cy: 0 } });
+  const p0g = pointAtTotal(0);
+  tl.set(nibG, { opacity: 1, x: p0g.x, y: p0g.y }, Ig - 0.30);
+  for (let k = 0; k < 6; k++) {                      // set-chain rattle (sanctioned jitter)
+    tl.set(nibG, { x: p0g.x + (grnd() - 0.5) * 10, y: p0g.y + (grnd() - 0.5) * 7 }, Ig - 0.28 + k * 2 * F);
+  }
+  tl.set(nibG, { x: p0g.x, y: p0g.y }, Ig - 0.02);
+
+  // SEQUENTIAL spray write: constant pen speed, nib rides each stroke
+  let tg = Ig;
+  strokesG.forEach((s) => {
+    const d = WINg * s.len / totalG;
+    gsap.set([s.under, s.halo, s.core], { strokeDasharray: s.len, strokeDashoffset: s.len });
+    tl.set([s.under, s.halo, s.core], { opacity: 1 }, tg);
+    tl.fromTo([s.under, s.halo, s.core], { strokeDashoffset: s.len },
+              { strokeDashoffset: 0, duration: d, ease: "none" }, tg);
+    const n = Math.max(4, Math.round(s.len / 14)), xs = [], ys = [];
+    for (let k = 0; k <= n; k++) {
+      const pt = s.core.getPointAtLength(s.len * k / n);
+      xs.push(pt.x); ys.push(pt.y);
+    }
+    tl.set(nibG, { x: xs[0], y: ys[0] }, tg);
+    tl.to(nibG, { keyframes: { x: xs, y: ys }, duration: d, ease: "none" }, tg);
+    tg += d;
+  });
+  // nib throw-off at the finish (the splat ring itself lives on the rail layer)
+  tl.to(nibG, { scale: 2.6, opacity: 0, duration: 0.12, ease: "power2.in",
+                transformOrigin: "50% 50%" }, DRAWNg);
+
+  // OVERSPRAY: seeded dots popping near the nib as it passes
+  for (let i = 0; i < ${p.osprayN ?? 6}; i++) {
+    const c = document.createElementNS(SVGNSG, "circle");
+    c.setAttribute("r", (2 + grnd() * 2.4).toFixed(1));
+    c.setAttribute("fill", ${J(PAINT)}); c.setAttribute("opacity", "0");
+    document.getElementById("stOsprayG").appendChild(c);
+    const f = 0.08 + 0.84 * grnd();
+    const ti = Ig + WINg * f;
+    const pt = pointAtTotal(totalG * f);
+    const ox = (grnd() < 0.5 ? -1 : 1) * (9 + grnd() * 18);
+    const oy = (grnd() < 0.5 ? -1 : 1) * (7 + grnd() * 14);
+    tl.set(c, { opacity: 0.85 }, ti);
+    tl.fromTo(c, { attr: { cx: pt.x + ox, cy: pt.y + oy } },
+              { attr: { cx: pt.x + ox * 1.9, cy: pt.y + oy * 1.9 },
+                duration: 0.30, ease: "power2.out" }, ti);
+    tl.to(c, { opacity: 0, duration: 0.26, ease: "power1.in" }, ti + 0.05);
+  }
+
+  // DRIPS (signature): seeded drips grow from painted low points and KEEP
+  // growing through the hold
+  const samplesG = [];
+  { let acc = 0;
+    strokesG.forEach((s) => {
+      const n = Math.max(6, Math.round(s.len / 10));
+      for (let k = 0; k <= n; k++) {
+        const L = s.len * k / n;
+        const pt = s.core.getPointAtLength(L);
+        samplesG.push({ x: pt.x, y: pt.y, L: acc + L });
+      }
+      acc += s.len;
+    });
+  }
+  const maxYg = Math.max(...samplesG.map(q => q.y));
+  const lowsG = samplesG.filter(q => q.y > maxYg - 8).sort((a, b) => a.x - b.x);
+  const pickedG = [];
+  for (let tries = 0; tries < 60 && pickedG.length < ${p.drips ?? 3}; tries++) {
+    const cand = lowsG[Math.floor(grnd() * lowsG.length)];
+    if (cand && pickedG.every(q => Math.abs(q.x - cand.x) > 110)) pickedG.push(cand);
+  }
+  const stageG = document.getElementById("stage");
+  pickedG.forEach((q) => {
+    const el = document.createElement("div");
+    el.className = "stdrip"; stageG.appendChild(el);
+    const w = 6 + Math.round(grnd() * 3);
+    gsap.set(el, { left: q.x - w / 2, top: q.y - 4, width: w });
+    const paintT = Ig + WINg * (q.L / totalG);
+    const start = Math.min(paintT + 0.22 + grnd() * 0.22, ENDTg - 0.3);
+    const dur = Math.min(1.25, ENDTg - start);
+    const hh = (36 + grnd() * 36) * Math.max(0.55, dur / 1.25);
+    tl.set(el, { opacity: 1 }, start);
+    tl.to(el, { height: hh, duration: dur, ease: "power1.in" }, start);
+  });
+
+  // HOLD LIFE: halo hum (baked f(t), deterministic) + slow loom on the whole tag
+  const humStartG = DRAWNg + 0.06, humDurG = Math.max(0.2, ENDTg - DRAWNg - 0.06);
+  const NG = Math.max(6, Math.round(humDurG / (2 * F)));
+  const humValsG = [];
+  for (let k = 0; k <= NG; k++) {
+    const tt = k / NG * humDurG;
+    humValsG.push(${p.haloOpacity ?? 0.5} + 0.07 * Math.sin(2 * Math.PI * 7 * tt) + 0.05 * Math.sin(2 * Math.PI * 11 * tt + 0.9));
+  }
+  tl.to("#stHaloG", { keyframes: { opacity: humValsG }, duration: humDurG, ease: "none" }, humStartG);
+  gsap.set("#stWrap", { transformOrigin: "${HG.x}px ${HG.y}px" });
+  tl.to("#stWrap", { scale: 1.014, duration: 0.5, ease: "power1.inOut" }, DRAWNg + 0.08);`;
+  return { css, html, js };
+}
+
+function setpieceBrushwrite() {
+  // ---- setpiece: BRUSHWRITE (sumi-e — ONE violent calligraphic gesture) ----
+  // A warm paper wash charges behind the word; the brush SLAPS down at the
+  // first pen point (start-splat: irregular ink blob + seeded satellites —
+  // the fg fleck pass rides fx.brushflecks), then the hero word is written in
+  // ONE sequential gesture — Hershey dash reveal at constant pen speed — as a
+  // FOUR-layer stack per stroke (blurred bleed under fat/mid/core widths =
+  // pressure-tapered wet brush), the round ink nib riding the pen and
+  // flicking off at the finish. Spatter droplets eject perpendicular at the
+  // sharpest-curvature points of the gesture. Through the hold the ink
+  // BLEEDS into the paper (the blurred under-layer swells visible) and the
+  // whole work breathes; then the vermilion SEAL chop stamps beside the ink
+  // (power4 crush → 2-frame squash → elastic settle, red flecks kicked) —
+  // the plate punch lands on the chop contact.
+  const h = dna.hero,
+    p = h.params,
+    I = heroIn;
+  const fontPath = path.join(SKILL, "assets/strokefonts", dna.fonts.strokeFont);
+  const gen = path.join(SKILL, "scripts/gen-stroke-path.py");
+  const tw = HG.brushW;
+  const x0 = Math.round(HG.x - tw / 2);
+  let D = execFileSync(
+    "python3",
+    [gen, fontPath, heroDisplay.toLowerCase(), String(tw), "450", String(x0)],
+    { encoding: "utf8" },
+  ).trim();
+  // register the measured ink box on HG (ink CENTER lands on HG.y); the wash,
+  // breathe origin, seal chop and the fg flecks all derive from the same box
+  const pts = [...D.matchAll(/[ML] ([-\d.]+) ([-\d.]+)/g)].map((m) => [+m[1], +m[2]]);
+  const ys0 = pts.map((q) => q[1]);
+  const dy = +(HG.y - (Math.min(...ys0) + Math.max(...ys0)) / 2).toFixed(1);
+  D = D.replace(/([ML]) ([-\d.]+) ([-\d.]+)/g, (m, c, x, y) => `${c} ${x} ${(+y + dy).toFixed(1)}`);
+  const inkBot = Math.max(...ys0) + dy;
+  const inkR = Math.max(...pts.map((q) => q[0]));
+  const ENDT = +(DUR - 0.04).toFixed(3);
+  // writing window: keep the demo's 0.45s unless the gesture lands too late to
+  // finish + seal + bleed before the end of the clip
+  const WIN = Math.min(p.window || 0.45, Math.max(0.3, ENDT - 0.9 - I));
+  const DRAWN = +(I + WIN).toFixed(3);
+  // hand-off to the fg ink flecks: the brush's FIRST contact point, at slap-down
+  HG.fleckX = Math.round(pts[0][0]);
+  HG.fleckY = Math.round(pts[0][1] + dy);
+  HG.fleckT = +(I + 0.01).toFixed(3);
+  // seal chop: below-right of the ink (demo offsets), kept on frame
+  const SEALC = +(DRAWN + (p.sealDelay ?? 0.04)).toFixed(3);
+  const sealS = p.sealSize ?? 64;
+  const sealX = Math.min(W - 48, Math.max(60, Math.round(inkR + (p.sealDx ?? -103))));
+  const sealY = Math.min(H - 80, Math.round(inkBot + (p.sealDy ?? 72)));
+  const INK = dna.palette.ink || "#19120b";
+  const WASH = dna.palette.wash || "#f6f0e2";
+  const WASH2 = dna.palette.wash2 || "#f4edde";
+  const washW = tw + 380,
+    washH = p.washH ?? 420;
+  const bleedT = +(DRAWN + 0.1).toFixed(3);
+  const bleedDur = +Math.max(0.4, Math.min(1.7, ENDT - DRAWN - 0.1)).toFixed(2);
+  const breT = +Math.min(SEALC, ENDT - 0.4).toFixed(3);
+  const breDur = +Math.max(0.3, Math.min(1.78, ENDT - breT)).toFixed(2);
+  const breN = Math.max(8, Math.round(breDur / (2 * F)));
+  const css = `
+  #bwWash { position:absolute; left:${HG.x}px; top:${HG.y}px; width:${washW}px; height:${washH}px;
+            margin-left:-${Math.round(washW / 2)}px; margin-top:-${Math.round(washH / 2)}px; opacity:0;
+            background: radial-gradient(50% 50% at 50% 50%,
+              ${WASH}d9 0%, ${WASH2}73 52%, ${WASH2}00 75%); }
+  #bwSvg { position:absolute; left:0; top:0; overflow:visible; }
+  #bwSeal { position:absolute; left:${sealX}px; top:${sealY}px; width:${sealS}px; height:${sealS}px; opacity:0;
+            border-radius:6px;
+            background: radial-gradient(70% 70% at 42% 38%, ${dna.palette.seal || "#d24a32"} 0%, ${dna.palette.sealMid || "#c03422"} 62%, ${dna.palette.sealLo || "#a92a1a"} 100%);
+            box-shadow: 0 3px 10px rgba(20,10,6,0.45), inset 0 0 9px rgba(255,140,110,0.35); }
+  #bwSeal span { position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
+                 font-family:'${dna.fonts.seal || dna.fonts.body}', serif; font-weight:700;
+                 font-size:${Math.round(sealS * 0.656)}px; color:${dna.palette.sealText || "#f7efe2"}; }
+  .bwfleck { position:absolute; border-radius:50%; background:${dna.palette.sealMid || "#c03422"}; opacity:0; }`;
+  const html = `      <div id="bwWash"></div>
+      <svg id="bwSvg" width="${W}" height="${H}" viewBox="0 0 ${W} ${H}">
+        <defs>
+          <filter id="bwbleedblur" x="-40%" y="-40%" width="180%" height="180%">
+            <feGaussianBlur stdDeviation="6"/>
+          </filter>
+        </defs>
+        <g id="bwInkAll">
+          <g id="bwBleedG" filter="url(#bwbleedblur)" opacity="0"></g>
+          <g id="bwFatG"></g>
+          <g id="bwMidG"></g>
+          <g id="bwCoreG"></g>
+        </g>
+        <g id="bwSplatG" opacity="0"></g>
+        <g id="bwSpatG"></g>
+        <circle id="bwNib" r="7.5" fill="${dna.palette.nib || "#1a130c"}" opacity="0"/>
+      </svg>
+      <div id="bwSeal"><span>${esc(p.sealGlyph || "観")}</span></div>`;
+  const js = `
+  // ---- setpiece: BRUSHWRITE (slap-down → one gesture → bleed + seal chop) ----
+  const Ib = ${I.toFixed(3)}, WINb = ${WIN.toFixed(3)}, DRAWNb = ${DRAWN}, ENDTb = ${ENDT};
+  const Db = ${J(D)};
+  const wrnd = mulberry32(${p.seed ?? 380611});
+
+  // scene reaction: the paper wash charges in just before the gesture
+  tl.fromTo("#bwWash", { opacity: 0 }, { opacity: ${p.wash ?? 0.34}, duration: 0.22, ease: "power2.in" }, ${(I - 0.18).toFixed(3)});
+${
+  I + 1.3 < ENDT
+    ? `  tl.to("#bwWash", { opacity: ${p.washSettle ?? 0.27}, duration: ${Math.min(1.2, ENDT - I - 1.0).toFixed(2)}, ease: "power1.out" }, ${(I + 1.0).toFixed(3)});`
+    : ""
+}
+
+  // strokes split at pen lifts; FOUR stacked widths = pressure-tapered wet brush
+  const subsB = Db.split(/(?=M )/).map(s => s.trim()).filter(Boolean);
+  const SVGNSB2 = "http://www.w3.org/2000/svg";
+  function mkB(parent, d, w, op) {
+    const el = document.createElementNS(SVGNSB2, "path");
+    el.setAttribute("d", d); el.setAttribute("fill", "none");
+    el.setAttribute("stroke", ${J(INK)}); el.setAttribute("stroke-width", w);
+    el.setAttribute("stroke-opacity", op);
+    el.setAttribute("stroke-linecap", "round"); el.setAttribute("stroke-linejoin", "round");
+    el.setAttribute("opacity", "0");
+    document.getElementById(parent).appendChild(el);
+    return el;
+  }
+  const strokesB = subsB.map((d) => ({
+    bleed: mkB("bwBleedG", d, ${p.bleedWidth ?? 16}, 1),
+    fat:   mkB("bwFatG",   d, ${p.fatWidth ?? 18}, 0.25),
+    mid:   mkB("bwMidG",   d, ${p.midWidth ?? 10}, 0.6),
+    core:  mkB("bwCoreG",  d, ${p.coreWidth ?? 5}, 1),
+  }));
+  let totalB = 0;
+  strokesB.forEach((s) => { s.len = s.core.getTotalLength(); totalB += s.len; });
+
+  // start-splat: irregular ink blob at the first pen point (the brush SLAPS down)
+  const SXB = ${Math.round(pts[0][0])}, SYB = ${Math.round(pts[0][1] + dy)};
+  (function buildSplat() {
+    const g = document.getElementById("bwSplatG");
+    const main = document.createElementNS(SVGNSB2, "ellipse");
+    main.setAttribute("cx", SXB - 4); main.setAttribute("cy", SYB + 2);
+    main.setAttribute("rx", 24); main.setAttribute("ry", 15);
+    main.setAttribute("transform", "rotate(-24 " + (SXB - 4) + " " + (SYB + 2) + ")");
+    main.setAttribute("fill", ${J(INK)}); main.setAttribute("fill-opacity", "0.9");
+    g.appendChild(main);
+    for (let i = 0; i < 5; i++) {
+      const c = document.createElementNS(SVGNSB2, "circle");
+      const a = wrnd() * Math.PI * 2, dist = 16 + wrnd() * 26;
+      c.setAttribute("cx", SXB - 4 + Math.cos(a) * dist);
+      c.setAttribute("cy", SYB + 2 + Math.sin(a) * dist * 0.7);
+      c.setAttribute("r", (1.8 + wrnd() * 3.4).toFixed(1));
+      c.setAttribute("fill", ${J(INK)}); c.setAttribute("fill-opacity", "0.85");
+      g.appendChild(c);
+    }
+  })();
+  tl.set("#bwSplatG", { opacity: 1 }, Ib);
+  tl.fromTo("#bwSplatG", { scale: 0.35, svgOrigin: "${Math.round(pts[0][0])} ${Math.round(pts[0][1] + dy)}" },
+            { scale: 1, duration: 0.12, ease: "power3.out" }, Ib);
+
+  // ONE sequential gesture: constant pen speed, the round ink nib riding
+  const nibB = document.getElementById("bwNib");
+  let tb = Ib, accB = 0;
+  const curvB = [];   // spatter candidates: {x,y,ang,dA,te}
+  strokesB.forEach((s) => {
+    const d = WINb * s.len / totalB;
+    const layers = [s.bleed, s.fat, s.mid, s.core];
+    layers.forEach(pp => gsap.set(pp, { strokeDasharray: s.len, strokeDashoffset: s.len }));
+    tl.set(layers, { opacity: 1 }, tb);
+    tl.fromTo(layers, { strokeDashoffset: s.len },
+              { strokeDashoffset: 0, duration: d, ease: "none" }, tb);
+    const n = Math.max(6, Math.round(s.len / 12)), xs = [], ys = [];
+    let prevAng = null;
+    for (let k = 0; k <= n; k++) {
+      const pt = s.core.getPointAtLength(s.len * k / n);
+      xs.push(pt.x); ys.push(pt.y);
+      if (k > 0) {
+        const ang = Math.atan2(ys[k] - ys[k-1], xs[k] - xs[k-1]);
+        if (prevAng !== null) {
+          let dA = Math.abs(ang - prevAng); if (dA > Math.PI) dA = 2 * Math.PI - dA;
+          if (dA > 0.55)
+            curvB.push({ x: xs[k-1], y: ys[k-1], ang: prevAng, dA,
+                         te: Ib + WINb * (accB + s.len * (k-1) / n) / totalB });
+        }
+        prevAng = ang;
+      }
+    }
+    tl.set(nibB, { x: xs[0], y: ys[0] }, tb);
+    tl.to(nibB, { keyframes: { x: xs, y: ys }, duration: d, ease: "none" }, tb);
+    tb += d; accB += s.len;
+  });
+  gsap.set(nibB, { attr: { cx: 0, cy: 0 } });
+  tl.set(nibB, { opacity: 1 }, Ib - 0.01);
+  // the brush lifts off with a flick at the end of the gesture
+  tl.to(nibB, { x: "+=42", y: "-=30", scale: 1.9, opacity: 0, duration: 0.1,
+                ease: "power2.in", transformOrigin: "50% 50%" }, DRAWNb);
+
+  // spatter droplets ejected at the sharpest-curvature points of the gesture
+  curvB.sort((a, b) => b.dA - a.dA);
+  const pickedB = [];
+  for (const c of curvB) {
+    if (pickedB.length >= ${p.spatterN ?? 6}) break;
+    if (pickedB.every(q => Math.abs(q.te - c.te) > 0.045)) pickedB.push(c);
+  }
+  const spatB = document.getElementById("bwSpatG");
+  pickedB.forEach((c) => {
+    if (c.te + 0.33 > ENDTb) return;
+    const el = document.createElementNS(SVGNSB2, "circle");
+    el.setAttribute("cx", c.x); el.setAttribute("cy", c.y);
+    el.setAttribute("r", (2.2 + wrnd() * 2.2).toFixed(1));
+    el.setAttribute("fill", ${J(INK)}); el.setAttribute("opacity", "0");
+    spatB.appendChild(el);
+    const side = wrnd() > 0.5 ? 1 : -1;
+    const ea = c.ang + side * Math.PI / 2;
+    const dist = 34 + wrnd() * 60;
+    const dx = Math.cos(ea) * dist, dyv = Math.sin(ea) * dist - 18;
+    tl.set(el, { opacity: 1 }, c.te);
+    tl.to(el, { keyframes: { x: [0, dx * 0.6, dx], y: [0, dyv * 0.6, dyv + 22],
+                             opacity: [1, 0.9, 0] },
+                duration: 0.32, ease: "power2.out" }, c.te);
+  });
+
+  // HOLD: the ink BLEEDS into the paper (blurred under-layer swells) + breathe
+  tl.to("#bwBleedG", { opacity: ${p.bleed ?? 0.38}, duration: ${bleedDur}, ease: "sine.inOut" }, ${bleedT});
+  const bNb = ${breN}, bValsB = [];
+  for (let k = 0; k <= bNb; k++) {
+    const tt = k / bNb * ${breDur};
+    bValsB.push(1 + 0.006 * Math.sin(2 * Math.PI * ${p.breatheHz ?? 0.55} * tt));
+  }
+  tl.to("#bwInkAll", { keyframes: { scale: bValsB }, duration: ${breDur}, ease: "none",
+                       svgOrigin: "${HG.x} ${HG.y}" }, ${breT});
+${
+  SEALC + 0.38 <= ENDT
+    ? `
+  // vermilion SEAL chop stamps the work — the plate punch lands on the contact
+  gsap.set("#bwSeal", { xPercent: -50, yPercent: -50, rotation: -6, transformOrigin: "50% 50%" });
+  tl.set("#bwSeal", { opacity: 1, scale: 1.7 }, ${(SEALC - 0.1).toFixed(3)});
+  tl.to("#bwSeal", { scale: 1, duration: 0.09, ease: "power4.in" }, ${(SEALC - 0.095).toFixed(3)});
+  tl.set("#bwSeal", { scaleX: 1.07, scaleY: 0.93 }, ${SEALC});
+  tl.to("#bwSeal", { scaleX: 1, scaleY: 1, duration: 0.28, ease: "elastic.out(1, 0.4)" }, ${(SEALC + 0.08).toFixed(3)});
+  { const stg = document.getElementById("stage");
+    for (let i = 0; i < 3; i++) {
+      const el = document.createElement("div"); el.className = "bwfleck";
+      stg.appendChild(el);
+      const s = 2 + Math.round(wrnd() * 2);
+      gsap.set(el, { width: s, height: s, left: ${sealX}, top: ${sealY} });
+      const a = wrnd() * Math.PI * 2, dist = 32 + wrnd() * 38;
+      tl.set(el, { opacity: 0.9 }, ${(SEALC + 0.01).toFixed(3)});
+      tl.to(el, { x: Math.cos(a) * dist, y: Math.sin(a) * dist + 12, opacity: 0,
+                  duration: 0.3, ease: "power2.out" }, ${(SEALC + 0.01).toFixed(3)});
+    }
+  }`
+    : ""
+}`;
+  return { css, html, js };
+}
+
+function setpieceInkbloom() {
+  // INKWATER apex: a sumi ink drop falls into still water BEHIND the subject.
+  // Scene reaction: paper-white radial washes behind the two text zones — the
+  // body rows get a PERSISTENT paper backing from t≈0.15 (the closing lines
+  // keep their ground) and the apex zone charges just before the drop — plus
+  // a gentle vignette that STILLS the world while the ink blooms. The drop
+  // appears above the word point, swells, falls (power2.in, scaleY stretch),
+  // squashes on contact (2 frames) and merges into the bloom: 3 stacked
+  // blurred irregular ellipses scaling at different rates with counter-
+  // rotations + 2 thin concentric ripple rings expanding on the water
+  // surface; the hero words RESOLVE out of the blob (opacity snaps, blur
+  // 16→0 + scale 1.12→1 carries the bleed) — the first at contact, the
+  // following at their own spoken times; through the hold the glyph edges
+  // BREATHE (baked blur keyframes), the whole group looms 1.018 and faint
+  // ink wisps curl off the word top; exit: RE-DISSOLVE (blur up + spread +
+  // fade — the ink disperses back into the water), timed to clear before the
+  // next body line needs the reader. Blob / ring / wisp geometry is the
+  // demo's, scaled from the measured word rect (kx = halfW/demoHalf,
+  // ky = fontPx/132); the rail wash registers on the body row geometry.
+  const p = dna.hero.params || {},
+    D = heroIn;
+  const INK = dna.palette.ink || dna.palette.body;
+  const PAP = dna.palette.paper || "#fffaee",
+    PAP2 = dna.palette.paper2 || "#fff8e8";
+  const WASH = dna.palette.wash || "#fff9ee",
+    WAPX = dna.palette.washApex || "#fffaf0";
+  const fpx = HG.fontPx,
+    halfW = Math.round(HG.halfW || heroDisplay.length * 0.25 * fpx),
+    cx = HG.x,
+    cy = HG.y;
+  const ky = fpx / 132; // demo scale unit (Shippori Mincho 700 @ 132px)
+  const demoHalf = (wordPx("pixel size.", dna.fonts.hero, 132, 0.02) || 650) / 2;
+  const kx = halfW / demoHalf;
+  const SX = (v) => Math.round(v * kx),
+    SY = (v) => Math.round(v * ky);
+  const C = +(D + (p.fall ?? 0.15)).toFixed(3); // contact with the water surface
+  // hero words resolve on their own spoken times (the first at contact)
+  const heroWords = heroDisplay.trim().split(/\s+/);
+  const RES = heroWords.map((wtx, k) => {
+    const tw = tWords[Math.min(hero.idx + k, hero.idx + hero.len - 1)];
+    return +Math.max(C + 0.02, k === 0 ? 0 : tw.start).toFixed(3);
+  });
+  // the bloom re-dissolves before the next body line needs the reader
+  const nextL = LINES.find((L) => L.words[0].start > hero.end + 0.05);
+  const XOUT = +Math.max(
+    C + 0.55,
+    Math.min(
+      D + (p.maxHold ?? 1.75),
+      nextL ? nextL.words[0].start - (p.clearGap ?? 0.24) : DUR - 0.6,
+      DUR - 0.6,
+    ),
+  ).toFixed(3);
+  const loomT = +(D + 0.373).toFixed(3),
+    loomD = +Math.min(1.3, XOUT - (D + 0.373) - 0.03).toFixed(2);
+  const vigOutT = +(XOUT - 0.15).toFixed(3),
+    vigOutD = +Math.min(0.6, DUR - 0.05 - (XOUT - 0.15)).toFixed(2);
+  // rail wash centers on the body reading rows (middle row)
+  const railY = H - ((dna.body && dna.body.bottomPx) ?? 36) - ((dna.body && dna.body.rowGap) ?? 56);
+  const wrW = p.washRailW ?? 1180,
+    wrH = p.washRailH ?? 300;
+  const waW = 2 * halfW + 370,
+    waH = p.washApexH ?? 430;
+  const blr = (v) => Math.max(8, SY(v));
+  const css = `
+  #ikvig { position:absolute; inset:0; opacity:0;
+           background: radial-gradient(115% 100% at 50% 40%, rgba(0,0,0,0) 42%, rgba(8,6,4,0.55) 100%); }
+  #ikwashRail { position:absolute; left:${W / 2}px; top:${railY}px; width:${wrW}px; height:${wrH}px;
+                margin-left:-${Math.round(wrW / 2)}px; margin-top:-${Math.round(wrH / 2)}px; opacity:0;
+                background: radial-gradient(50% 50% at 50% 50%, ${WASH}7a 0%, ${WASH}3d 48%, ${WASH}00 75%); }
+  #ikwashApex { position:absolute; left:${cx}px; top:${cy}px; width:${waW}px; height:${waH}px;
+                margin-left:-${Math.round(waW / 2)}px; margin-top:-${Math.round(waH / 2)}px; opacity:0;
+                background: radial-gradient(50% 50% at 50% 50%, ${WAPX}4d 0%, ${WAPX}21 50%, ${WAPX}00 76%); }
+  #inkG { position:absolute; left:${cx}px; top:${cy}px; opacity:0; }
+  #ikdrop { position:absolute; left:${-SY(9)}px; top:${-SY(228)}px; width:${SY(18)}px; height:${SY(18)}px;
+            border-radius: 46% 54% 50% 50% / 38% 40% 62% 60%;
+            background:${INK}; opacity:0; box-shadow: 0 0 6px ${INK}73; }
+  .ikblob { position:absolute; opacity:0; background:${INK}; }
+  #ikb1 { left:${SX(-115)}px; top:${SY(-64)}px; width:${SX(230)}px; height:${SY(128)}px;
+          border-radius: 47% 53% 44% 56% / 58% 42% 60% 40%; filter: blur(${blr(16)}px); }
+  #ikb2 { left:${SX(-205)}px; top:${SY(-44)}px; width:${SX(190)}px; height:${SY(108)}px;
+          border-radius: 56% 44% 58% 42% / 44% 60% 40% 56%; filter: blur(${blr(20)}px); }
+  #ikb3 { left:${SX(-13)}px; top:${SY(-66)}px; width:${SX(206)}px; height:${SY(96)}px;
+          border-radius: 42% 58% 50% 50% / 62% 38% 56% 44%; filter: blur(${blr(24)}px); }
+  .ikring { position:absolute; left:${SX(-80)}px; top:${SY(-8)}px; width:${SX(160)}px; height:${SY(44)}px;
+            border-radius:50%; opacity:0; }
+  #ikr1 { border:2px solid ${INK}cc; filter: blur(1.2px); }
+  #ikr2 { border:2px solid ${INK}8c; filter: blur(2.2px); }
+  #ikword { position:absolute; left:0; top:0; white-space:nowrap;
+            transform: translate(-50%,-50%);
+            font-family:'${dna.fonts.hero}', serif; font-weight:700;
+            font-size:${fpx}px; line-height:1; letter-spacing:0.02em; color:${INK}; }
+  #ikword .ikw { display:inline-block; opacity:0; margin-right:0.30em;
+                 text-shadow: 0 0 14px ${PAP}f2, 0 0 36px ${PAP2}b3, 0 2px 4px ${PAP}99; }
+  #ikword .ikw:last-child { margin-right:0; }
+  .ikwisp { position:absolute; width:${SY(30)}px; height:${SY(38)}px; opacity:0;
+            border:4px solid transparent; border-top-color:${INK}80;
+            border-radius:50%; filter: blur(2.5px); }
+  #ikwisp1 { left:${SX(-210)}px; top:${SY(-118)}px; }
+  #ikwisp2 { left:${SX(118)}px; top:${SY(-122)}px; }`;
+  const html = `      <div id="ikvig"></div>
+      <div id="ikwashRail"></div>
+      <div id="ikwashApex"></div>
+      <div id="inkG">
+        <div class="ikblob" id="ikb2"></div>
+        <div class="ikblob" id="ikb3"></div>
+        <div class="ikblob" id="ikb1"></div>
+        <div class="ikring" id="ikr1"></div>
+        <div class="ikring" id="ikr2"></div>
+        <div id="ikword">${heroWords.map((t, k) => `<span class="ikw" id="ikw${k}">${esc(t)}</span>`).join("")}</div>
+        <div class="ikwisp" id="ikwisp1"></div>
+        <div class="ikwisp" id="ikwisp2"></div>
+        <div id="ikdrop"></div>
+      </div>`;
+  const js = `
+  // ---- setpiece: INKBLOOM (drop falls → ink blooms → words resolve → re-dissolve) ----
+  // paper washes (the scene offers paper to the ink); the rail wash PERSISTS
+  tl.fromTo("#ikwashRail", { opacity: 0 }, { opacity: 1, duration: 0.5, ease: "power1.out" }, 0.15);
+  tl.fromTo("#ikwashApex", { opacity: 0 }, { opacity: 1, duration: 0.3, ease: "power1.out" }, ${Math.max(0.02, D - 0.077).toFixed(3)});
+  tl.to("#ikwashApex", { opacity: 0, duration: 0.5, ease: "power1.in" }, ${XOUT});
+
+  // the world stills while the ink blooms
+  tl.to("#ikvig", { opacity: ${p.vig ?? 0.34}, duration: 0.45, ease: "power2.out" }, ${C});
+  tl.to("#ikvig", { opacity: 0, duration: ${vigOutD}, ease: "power1.in" }, ${vigOutT});
+
+  // ===== drop: appears, swells, falls, squashes on contact, merges into the blob =====
+  tl.set("#inkG", { opacity: 1 }, ${(D - 0.08).toFixed(3)});
+  tl.set("#ikdrop", { opacity: 1, transformOrigin: "50% 50%" }, ${(D - 0.08).toFixed(3)});
+  tl.fromTo("#ikdrop", { scale: 0.55 }, { scale: 1, duration: 0.08, ease: "power2.out" }, ${(D - 0.08).toFixed(3)});
+  tl.to("#ikdrop", { y: ${SY(219)}, duration: ${(C - D).toFixed(3)}, ease: "power2.in" }, ${D.toFixed(3)});
+  tl.to("#ikdrop", { scaleY: 1.45, scaleX: 0.8, duration: ${(C - D).toFixed(3)}, ease: "power2.in" }, ${D.toFixed(3)});
+  tl.set("#ikdrop", { scaleX: 1.7, scaleY: 0.35 }, ${C});                 // contact squash, 2 frames
+  tl.to("#ikdrop", { opacity: 0, duration: 0.07 }, ${(C + 0.083).toFixed(3)});
+
+  // ===== bloom: 3 stacked blurred ellipses, different rates; opacity snaps then decays =====
+  const IKB = [["#ikb1", 0.82, 0.50, 3.0, -4,  5, 0,    1.15, 0.18, 1.05],
+               ["#ikb2", 0.62, 0.42, 2.4,  7, -7, 0.04, 1.35, 0.22, 1.15],
+               ["#ikb3", 0.50, 0.55, 3.8, -9,  8, 0.08, 1.50, 0.30, 1.20]];
+  IKB.forEach(([sel, op, s0, s1, r0, r1, dt, gd, ft, fd]) => {
+    tl.set(sel, { opacity: op, transformOrigin: "50% 50%" }, ${C} + dt);
+    tl.fromTo(sel, { scale: s0, rotation: r0 },
+              { scale: s1, rotation: r1, duration: gd, ease: "expo.out" }, ${C} + dt);
+    tl.to(sel, { opacity: 0, duration: fd, ease: "power1.in" }, ${C} + ft);
+  });
+
+  // ripple rings on the water surface
+  tl.set("#ikr1", { opacity: 0.7, transformOrigin: "50% 50%" }, ${(C + 0.02).toFixed(3)});
+  tl.fromTo("#ikr1", { scale: 1 }, { scale: 7.2, duration: 1.45, ease: "expo.out" }, ${(C + 0.02).toFixed(3)});
+  tl.to("#ikr1", { opacity: 0, duration: 1.25, ease: "power1.in" }, ${(C + 0.22).toFixed(3)});
+  tl.set("#ikr2", { opacity: 0.5, transformOrigin: "50% 50%" }, ${(C + 0.16).toFixed(3)});
+  tl.fromTo("#ikr2", { scale: 1 }, { scale: 9.6, duration: 1.7, ease: "power2.out" }, ${(C + 0.16).toFixed(3)});
+  tl.to("#ikr2", { opacity: 0, duration: 1.4, ease: "power1.in" }, ${(C + 0.4).toFixed(3)});
+
+  // ===== the words resolve out of the blob (opacity snaps, BLUR carries the bleed) =====
+  const IKRES = ${J(RES)};
+  IKRES.forEach((rt, k) => {
+    const el = document.getElementById("ikw" + k);
+    const rd = Math.min(0.8, Math.max(0.3, ${XOUT} - rt - 0.25));
+    tl.set(el, { opacity: 1, transformOrigin: "50% 60%" }, rt);
+    tl.fromTo(el, { scale: 1.12, filter: "blur(16px)" },
+              { scale: 1, filter: "blur(0px)", duration: rd, ease: "power2.out" }, rt);
+    // hold life: glyph edges breathe (blur 0 → ~0.8 → 0, slow)
+    const bt = rt + Math.max(0.82, rd + 0.02), bd = k % 2 ? 0.5 : 0.66;
+    if (bt + bd <= ${XOUT} + 0.02) {
+      tl.to(el, { keyframes: { filter: ["blur(0px)","blur(0.8px)","blur(0.15px)","blur(0.7px)","blur(0px)"] },
+                  duration: bd, ease: "none" }, bt);
+    }
+  });
+${
+  loomD >= 0.2
+    ? `  // gentle loom on the group through the hold
+  tl.to("#inkG", { scale: 1.018, duration: ${loomD}, ease: "power1.inOut", transformOrigin: "50% 50%" }, ${loomT});`
+    : ""
+}
+
+  // faint ink wisps curl off the word top during the hold
+${
+  C + 0.573 + 0.6 <= XOUT
+    ? `  tl.set("#ikwisp1", { opacity: 0.45, transformOrigin: "50% 50%" }, ${(C + 0.573).toFixed(3)});
+  tl.fromTo("#ikwisp1", { y: 0, x: 0, rotation: 14, scaleY: 1 },
+            { y: -44, x: 12, rotation: 96, scaleY: 1.6, duration: 0.95, ease: "power1.out" }, ${(C + 0.573).toFixed(3)});
+  tl.to("#ikwisp1", { opacity: 0, duration: 0.4, ease: "power1.in" }, ${(C + 1.123).toFixed(3)});`
+    : ""
+}
+${
+  C + 0.753 + 0.6 <= XOUT
+    ? `  tl.set("#ikwisp2", { opacity: 0.4, transformOrigin: "50% 50%" }, ${(C + 0.753).toFixed(3)});
+  tl.fromTo("#ikwisp2", { y: 0, x: 0, rotation: -18, scaleY: 1 },
+            { y: -40, x: -14, rotation: -98, scaleY: 1.5, duration: 0.9, ease: "power1.out" }, ${(C + 0.753).toFixed(3)});
+  tl.to("#ikwisp2", { opacity: 0, duration: 0.38, ease: "power1.in" }, ${(C + 1.273).toFixed(3)});`
+    : ""
+}
+
+  // exit: re-dissolve — blur up + spread + fade, ink dispersing
+  tl.to("#inkG", { scale: 1.15, filter: "blur(11px)", opacity: 0,
+                   duration: 0.52, ease: "power1.in" }, ${XOUT});
+  tl.set("#inkG", { display: "none" }, ${Math.min(XOUT + 0.6, DUR - 0.02).toFixed(3)});`;
+  return { css, html, js };
+}
+
+function setpieceRansomnote() {
+  // ---- setpiece: RANSOMNOTE (letter-by-letter cutout slam → collective jolt → ripped off) ----
+  // The hero word slams in BEHIND the subject as a ransom note: one cutout
+  // chip per letter (4 recipes cycled, seeded ±13% sizes / alternating-sign
+  // rotations / misaligned baselines), each slamming in oversized with a
+  // flight shadow that POPS tight on contact (power3.in crush → 2-frame
+  // squash → elastic settle) at S_i = I + 0.01 + step·i. When the LAST letter
+  // lands the whole word takes a collective 1-frame JOLT + a scene pulse
+  // (the plate punch anchors here — punchOffset is recomputed from the real
+  // letter count so the punch always lands on the jolt). Hold = slow loom
+  // keyframes (the crooked grid never straightens). Exit = letters RIPPED
+  // off one by one, a 1-frame paper-tear flash under each. Scene reaction =
+  // a collage scrim darkens the bright sky for the apex window.
+  const p = dna.hero.params || {},
+    I = heroIn;
+  const STEP = p.step ?? 0.06,
+    CRUSH = p.crush ?? 0.09,
+    RSTAG = p.ripStag ?? 0.045;
+  const BASE = HG.fontPx;
+  const kf = BASE / 130; // chip chrome scales with the demo's 130px cut
+  const N = [...heroText].filter((c) => c !== " ").length;
+  const JOLT = +(I + 0.01 + STEP * (N - 1) + CRUSH).toFixed(3);
+  // rip schedule: letters tear off while the closing line speaks (demo:
+  // lastWord − 0.19), clamped so the last rip completes on frame and the
+  // note holds ≥0.45s after the jolt
+  let ripT = Math.min(
+    theme.hero.exitAt ?? LASTWORD.start - (p.ripLead ?? 0.19),
+    DUR - 0.22 - RSTAG * (N - 1),
+  );
+  ripT = +Math.max(Math.min(ripT, DUR - 0.22 - RSTAG * (N - 1)), JOLT + 0.45).toFixed(3);
+  // the plate punch lands on the collective jolt, whatever the word length
+  if (dna.plate && dna.plate.punch) dna.plate.punchOffset = +(JOLT - I).toFixed(3);
+  const scrimT = +Math.max(0.02, I - 0.07).toFixed(3);
+  const loomT = +(JOLT + 0.1).toFixed(3);
+  const loomD = +Math.min(0.95, ripT - 0.08 - loomT).toFixed(2);
+  const css = `
+  #rscrim { position:absolute; inset:0; opacity:0;
+            background: linear-gradient(180deg, rgba(12,8,5,0.66) 0%, rgba(12,8,5,0.48) 38%,
+                        rgba(12,8,5,0.22) 62%, rgba(12,8,5,0.05) 100%); }
+  #rpulse { position:absolute; inset:0; opacity:0; background:rgba(10,6,3,0.75); }
+  #rnote  { position:absolute; left:${HG.x}px; top:${HG.y}px; white-space:nowrap; }
+  .aw  { display:inline-block; position:relative; margin:0 3px; }
+  .asp { display:inline-block; width:${Math.round(BASE * 0.3)}px; }
+  .aflash { position:absolute; inset:-5px; background:${dna.palette.flash || "#fffdf2"}; opacity:0; z-index:0; }
+  .awm { display:inline-block; position:relative; z-index:1; opacity:0;
+         filter: drop-shadow(0 ${Math.max(4, Math.round(7 * kf))}px 0 rgba(8,6,4,0.55)); }
+  .achip { display:inline-block; line-height:1.04; padding:0.05em 0.10em 0.09em; }
+${ransomChipCss("0.01em")}`;
+  const html = `      <div id="rscrim"></div>
+      <div id="rpulse"></div>
+      <div id="rnote"></div>`;
+  const js = `
+  // ---- setpiece: RANSOMNOTE (letter chips slam → collective jolt → ripped off) ----
+  const I = ${I.toFixed(3)}, STEP = ${STEP}, CRUSH = ${CRUSH}, RIPT = ${ripT};
+  const arnd = mulberry32(${p.seed || 3939});
+  ${RANSOM_TEAR}
+  const HARDA   = "drop-shadow(0 ${Math.max(4, Math.round(7 * kf))}px 0 rgba(8,6,4,0.55))";
+  const FLIGHTA = "drop-shadow(0 ${Math.max(10, Math.round(24 * kf))}px 5px rgba(8,6,4,0.30))";
+  const group = document.getElementById("rnote");
+  gsap.set(group, { xPercent: -50, yPercent: -50 });
+
+  // scene reacts: collage scrim darkens the bright sky for the apex window
+  tl.to("#rscrim", { opacity: ${p.scrim ?? 0.44}, duration: 0.12, ease: "power2.out" }, ${scrimT});
+
+  // ===== letter-by-letter ransom slam: S_k = I + 0.01 + STEP*k, contact = S_k + CRUSH
+  const RECSA = ["ca", "cb", "cc", "cd"];
+  let k = 0;
+  ${J([...heroText])}.forEach((ch) => {
+    if (ch === " ") {
+      const sp = document.createElement("div"); sp.className = "asp";
+      group.appendChild(sp);
+      return;
+    }
+    const aw = document.createElement("div"); aw.className = "aw";
+    const fl = document.createElement("div"); fl.className = "aflash";
+    fl.style.clipPath = tearPoly(arnd);
+    const mv = document.createElement("div"); mv.className = "awm";
+    const chip = document.createElement("div"); chip.className = "achip " + RECSA[k % 4];
+    chip.style.fontSize = Math.round(${BASE} * (0.85 + arnd() * 0.27)) + "px";
+    chip.style.clipPath = tearPoly(arnd);
+    chip.textContent = ch;
+    mv.appendChild(chip); aw.appendChild(fl); aw.appendChild(mv); group.appendChild(aw);
+    // seeded crooked grid (demo grammar): rot sign alternates per letter,
+    // baseline shove dy leans the other way, the rip throws with the rot sign
+    const sgn = k % 2 ? 1 : -1;
+    const rot = sgn * (2 + arnd() * 3);
+    const dy = -sgn * (2 + arnd() * 4);
+    const rr = sgn * (15 + arnd() * 7);
+    const S = I + 0.01 + STEP * k, C = S + CRUSH;
+    tl.set(mv, { opacity: 1, scale: 1.5, rotation: rot * 1.8, y: dy - 20, filter: FLIGHTA }, S);
+    tl.to(mv,  { scale: 1, rotation: rot, y: dy, duration: 0.085, ease: "power3.in" }, S + 0.005);
+    tl.set(mv, { filter: HARDA }, C);                             // shadow pop: snaps tight on contact
+    tl.set(mv, { scaleX: 1.07, scaleY: 0.93 }, C + 0.004);        // contact squash, held 2 frames
+    tl.to(mv,  { scaleX: 1, scaleY: 1, duration: 0.3, ease: "elastic.out(1, 0.4)" }, C + 0.087);
+    // ===== exit: RIPPED off one by one, tear flash 1 frame under each
+    const R = RIPT + ${RSTAG} * k;
+    tl.set(fl, { opacity: 0.85 }, R);
+    tl.set(fl, { opacity: 0 }, R + 0.045);
+    tl.to(mv, { rotation: rot + rr, y: dy - 34, opacity: 0,
+                duration: 0.16, ease: "power2.in" }, R);
+    k++;
+  });
+
+  // collective 1-frame jolt when the last letter lands + scene pulse
+  tl.set("#rnote", { y: 6 }, ${JOLT});
+  tl.to("#rnote",  { y: 0, duration: 0.14, ease: "power3.out" }, ${(JOLT + 0.042).toFixed(3)});
+  tl.set("#rpulse", { opacity: ${p.pulse ?? 0.2} }, ${JOLT});
+  tl.to("#rpulse",  { opacity: 0, duration: 0.13, ease: "power1.out" }, ${(JOLT + 0.042).toFixed(3)});
+${
+  loomD >= 0.35
+    ? `
+  // hold life: the pasted word looms (the crooked grid never straightens)
+  tl.to("#rnote", { keyframes: { scale: [1, 1.02, 1.006, 1.018, 1] },
+                    duration: ${loomD}, ease: "none" }, ${(JOLT + 0.1).toFixed(3)});`
+    : ""
+}
+  tl.to("#rscrim", { opacity: 0, duration: 0.3, ease: "power1.in" }, ${(ripT + 0.06).toFixed(3)});`;
+  return { css, html, js };
+}
+
+const SETPIECES = {
+  detonation: setpieceDetonation,
+  decode: setpieceDecode,
+  drawon: setpieceDrawon,
+  cpslam: setpieceCpslam,
+  coverword: setpieceCoverword,
+  settle: setpieceSettle,
+  flapboard: setpieceFlapboard,
+  ledwipe: setpieceLedwipe,
+  vhsosd: setpieceVhsosd,
+  bossintro: setpieceBossintro,
+  rubberstamp: setpieceRubberstamp,
+  lasercage: setpieceLasercage,
+  boltstrike: setpieceBoltstrike,
+  holoboot: setpieceHoloboot,
+  biobloom: setpieceBiobloom,
+  silkribbon: setpieceSilkribbon,
+  scopetrace: setpieceScopetrace,
+  papermat: setpiecePapermat,
+  centerfold: setpieceCenterfold,
+  chalkwrite: setpieceChalkwrite,
+  spraytag: setpieceSpraytag,
+  brushwrite: setpieceBrushwrite,
+  inkbloom: setpieceInkbloom,
+  ransomnote: setpieceRansomnote,
+};
+
+if (!PARADIGMS[dna.body.paradigm])
+  throw new Error("[make-theme] unknown body paradigm: " + dna.body.paradigm);
+const body = PARADIGMS[dna.body.paradigm]();
+
+let setp = { css: "", html: "", js: "" };
+if (!heroInline && !HEROLESS) {
+  if (!SETPIECES[dna.hero.setpiece])
+    throw new Error("[make-theme] unknown setpiece: " + dna.hero.setpiece);
+  setp = SETPIECES[dna.hero.setpiece]();
+}
+const fx = frontFx();
+
+// bg file: plate reaction + embedded setpiece (+ body if body.layer === "bg")
+const bodyInBg = dna.body.layer === "bg";
+const poemScrimInBg = dna.body.paradigm === "poem" && dna.body.scrim;
+let bgExtra = { css: "", html: "", js: "" };
+if (poemScrimInBg) {
+  // poem keeps its scrim BEHIND the subject (subject stays lit) while the poem
+  // itself rides the fg alpha layer
+  const bgScrimSide = typeof CLEARER !== "undefined" && CLEARER === "right" ? "right" : "left";
+  bgExtra.css = `
+  #pscrimBg { position:absolute; inset:0; opacity:0;
+            background: linear-gradient(${bgScrimSide === "left" ? "100deg" : "260deg"},
+              rgba(4,8,16,${dna.body.scrim.opacity}) 0%, rgba(4,8,16,${(dna.body.scrim.opacity * 0.6).toFixed(2)}) 38%, rgba(4,8,16,0) 62%); }`;
+  bgExtra.html = `      <div id="pscrimBg"></div>`;
+  bgExtra.js = `
+  tl.fromTo("#pscrimBg", { opacity: 0 }, { opacity: 1, duration: 0.6, ease: "power1.out" }, 0.15);
+  tl.to("#pscrimBg", { opacity: 0, duration: 0.4, ease: "power1.in" }, ${(LASTWORD.start + 0.15).toFixed(3)});`;
+}
+
+const bgHtml = bgSkeleton(
+  [bgExtra.html, setp.html, bodyInBg ? body.html : ""].filter(Boolean).join("\n"),
+  [bgExtra.css, setp.css, bodyInBg ? body.css : ""].filter(Boolean).join("\n"),
+  [bgExtra.js, setp.js, bodyInBg ? body.js : ""].filter(Boolean).join("\n"),
+);
+fs.writeFileSync(path.join(PROJECT, "index.html"), bgHtml);
+
+// fg file (rail.html): body paradigm (when fg) + setpiece fg parts + front fx
+// (a setpiece may emit fgHtml/fgCss/fgJs — e.g. a verbatim caption chip that
+// must ride ABOVE the matte while the setpiece scenery stays embedded behind)
+if (!bodyInBg || fx.html || fx.js || setp.fgHtml) {
+  const fgHtml = fgSkeleton(
+    [!bodyInBg ? body.html : "", setp.fgHtml || "", fx.html].filter(Boolean).join("\n"),
+    [!bodyInBg ? body.css : "", setp.fgCss || "", fx.css].filter(Boolean).join("\n"),
+    [!bodyInBg ? body.js : "", setp.fgJs || "", fx.js].filter(Boolean).join("\n"),
+  );
+  fs.writeFileSync(path.join(PROJECT, "rail.html"), fgHtml);
+} else if (fs.existsSync(path.join(PROJECT, "rail.html"))) {
+  fs.unlinkSync(path.join(PROJECT, "rail.html"));
+}
+
+// _postfx.sh: plate reaction after the matte composite (subject+text move as one)
+const P = HEROLESS ? { grain: (dna.plate || {}).grain || 5 } : dna.plate || {};
+// punchOffset: themes whose impact is NOT the hero onset (e.g. flapboard's
+// lock-complete clack) shift the plate punch anchor; default keeps onset+2f
+const anchorT = (heroIn + (P.punchOffset ?? 0.045)).toFixed(3);
+let filter;
+// zoompan resamples EVERY frame (even z=1) -> run it 2x supersampled and
+// lanczos back down so the always-on resample costs no sharpness (shake amps
+// are in pixels -> doubled at 2x)
+const SS = 2;
+if (P.punch) {
+  const minor = P.minorPunch && LINES.find((L) => L.words.some((w) => w.minor));
+  const minorT = minor ? (minor.words.find((w) => w.minor).start + 0.01).toFixed(3) : null;
+  filter = `scale=${W * SS}:${H * SS}:flags=lanczos,zoompan=
+    z='1+${P.punch}*exp(-${P.punchDecay || 9}*(time-${anchorT}))*between(time,${anchorT},${anchorT}+${P.shakeWindow || 0.6})${minorT ? `+${P.minorPunch}*exp(-10*(time-${minorT}))*between(time,${minorT},${minorT}+0.4)` : ""}':
+    x='iw/2-(iw/zoom/2)${P.shakeAmpX ? `+${P.shakeAmpX * SS}*exp(-${P.shakeDecay || 7}*(time-${anchorT}))*sin(2*PI*${P.shakeHz || 12}*(time-${anchorT}))*between(time,${anchorT},${anchorT}+${P.shakeWindow || 0.6})` : ""}':
+    y='ih/2-(ih/zoom/2)${P.shakeAmpY ? `+${P.shakeAmpY * SS}*exp(-${P.shakeDecay || 7}*(time-${anchorT}))*cos(2*PI*${((P.shakeHz || 12) * 1.31).toFixed(2)}*(time-${anchorT}))*between(time,${anchorT},${anchorT}+${P.shakeWindow || 0.6})` : ""}':
+    d=1:s=${W * SS}x${H * SS}:fps=${FPS},scale=${W}:${H}:flags=lanczos`;
+} else if (P.pushIn) {
+  filter = `scale=${W * SS}:${H * SS}:flags=lanczos,zoompan=z='1+${P.pushIn}*time/${DUR.toFixed(2)}':x='iw/2-(iw/zoom/2)':y='ih/2-(ih/zoom/2)':d=1:s=${W * SS}x${H * SS}:fps=${FPS},scale=${W}:${H}:flags=lanczos`;
+} else {
+  filter = `null`;
+}
+const rgba = P.rgbashift
+  ? `,rgbashift=rh=-${P.rgbashift}:bh=${P.rgbashift}:enable='between(t,${anchorT},${(heroIn + 0.125).toFixed(3)})+between(t,${(LASTWORD.start + 0.04).toFixed(3)},${(LASTWORD.start + 0.17).toFixed(3)})',format=yuv420p`
+  : "";
+fs.writeFileSync(
+  path.join(PROJECT, "_postfx.sh"),
+  `#!/usr/bin/env bash
+# generated by make-theme.cjs — plate reaction for theme "${dna.name}"
+set -euo pipefail
+cd "$(dirname "$0")"
+ffmpeg -y -v error -i final.mp4 -filter_complex "
+  [0:v]${filter}${rgba},
+  noise=alls=${P.grain || 5}:allf=t+u[v]" \\
+  -map "[v]" -map 0:a -c:v libx264 -crf 14 -preset slow -profile:v high -c:a copy \\
+  final_fx.mp4
+echo "[postfx] ${dna.name} → final_fx.mp4"
+`,
+);
+
+console.log(
+  `[make-theme] ${dna.name}: index.html${!bodyInBg || fx.html ? " + rail.html" : ""} + _postfx.sh`,
+);
+console.log(
+  `[make-theme]   body=${dna.body.paradigm}(${dna.body.layer}) hero=${HEROLESS ? "none (pure body)" : heroInline ? "inline:" + dna.hero.setpiece : dna.hero.setpiece + " @" + heroIn.toFixed(2) + "s"} lines=${LINES.length} dur=${DUR}s`,
+);
diff --git a/.claude/skills-media/embedded-captions/scripts/matte.cjs b/.claude/skills-media/embedded-captions/scripts/matte.cjs
new file mode 100644
index 000000000..bb0fe2343
--- /dev/null
+++ b/.claude/skills-media/embedded-captions/scripts/matte.cjs
@@ -0,0 +1,279 @@
+#!/usr/bin/env node
+/*
+ * matte.cjs — subject matting via hyperframes' built-in `remove-background`
+ * (rembg-equivalent u2net_human_seg, Apache-2.0, 320×320 input, ~9 fps on
+ * CoreML). Replaces the previous bundled PP-MattingV2 ONNX (34 MB asset +
+ * an onnxruntime inference loop in this script): one engine, zero bundled
+ * weights — the model auto-downloads once (~168 MB) to ~/.cache/hyperframes/.
+ *
+ * Semantics note (validated 2026-06-12 on 6 scenes + a cold-start E2E): a
+ * HUMAN segmenter by intent, not surgically. Thin offset furniture (mic boom
+ * arms) is usually excluded — captions render over it, behind the person —
+ * but large salient objects near the subject (a telescope rig) can still
+ * leak into the matte and occlude captions. Objects HELD by the subject
+ * (products, phones) may drop out intermittently, letting captions pass in
+ * front. Never assume: sample frames_fg/ before placing the hero.
+ *
+ * Pipeline:
+ *   source.mp4 → hyperframes remove-background → ProRes 4444 .mov (lossless
+ *   alpha; temp, deleted) → ffmpeg fps=<matte.fps> → frames_fg/f_%04d.png.
+ *   frames_bg/ is extracted at the same rate (preview tooling reads it).
+ *
+ *   node matte.cjs <project-dir>
+ * Reads:  <project>/source.mp4 (any video in the project dir is adopted)
+ * Writes: <project>/frames_fg/f_%04d.png (RGBA, subject opaque),
+ *         <project>/frames_bg/f_%04d.png, <project>/matte.fps
+ * Env:    HYPERFRAMES_ROOT — hyperframes checkout (default ~/Downloads/hyperframes)
+ */
+const path = require("path");
+const fs = require("fs");
+const os = require("os");
+const cp = require("child_process");
+
+function hfCli() {
+  const roots = [
+    process.env.HYPERFRAMES_ROOT,
+    path.resolve(__dirname, "..", "..", ".."), // skills/embedded-captions/scripts → repo root if in-repo
+    path.join(os.homedir(), "Downloads", "hyperframes"),
+  ].filter(Boolean);
+  for (const root of roots) {
+    const cli = path.join(root, "packages", "cli", "dist", "cli.js");
+    if (fs.existsSync(cli)) return cli;
+  }
+  console.error("[matte] cannot find hyperframes cli — set HYPERFRAMES_ROOT to a built checkout");
+  process.exit(3);
+}
+
+function ensureSource(project) {
+  const src = path.join(project, "source.mp4");
+  if (!fs.existsSync(src)) {
+    const found = fs
+      .readdirSync(project)
+      .filter((f) => /\.(mp4|mov|webm|mkv)$/i.test(f) && !f.startsWith("_"))
+      .map((f) => path.join(project, f))[0];
+    if (!found) return src;
+    try {
+      fs.symlinkSync(path.basename(found), src);
+    } catch {
+      fs.copyFileSync(found, src);
+    }
+    console.log(`[matte] resolved source.mp4 -> ${path.basename(found)}`);
+  }
+  return src;
+}
+
+function rateOf(expr) {
+  const [n, d] = String(expr || "").split("/");
+  const f = parseFloat(n) / parseFloat(d || "1");
+  return Number.isFinite(f) && f > 0 ? f : 0;
+}
+
+// Prefer avg_frame_rate (frames/duration — the truth) over r_frame_rate (the
+// container's nominal tick rate, which lies on VFR sources: a 24fps screen
+// recording can carry r_frame_rate=60 and would 2.5x-desync the matte).
+function probeRates(src) {
+  try {
+    const out = cp
+      .execFileSync("ffprobe", [
+        "-v",
+        "0",
+        "-select_streams",
+        "v:0",
+        "-show_entries",
+        "stream=r_frame_rate,avg_frame_rate",
+        "-of",
+        "default=nk=1:nw=1",
+        src,
+      ])
+      .toString()
+      .trim()
+      .split("\n");
+    return { r: rateOf(out[0]), avg: rateOf(out[1]) };
+  } catch {
+    return { r: 0, avg: 0 };
+  }
+}
+
+function probeFps(src) {
+  const { r, avg } = probeRates(src);
+  const f = avg || r;
+  return f > 0 ? Math.max(1, Math.round(f)) : 24;
+}
+
+// VFR when nominal and actual disagree by >5% — the remove-background engine
+// mishandles VFR timestamps (observed: 2251 fg frames vs 902 bg on one clip),
+// so VFR sources get normalized to CFR before matting.
+function isVfr(src) {
+  const { r, avg } = probeRates(src);
+  return r > 0 && avg > 0 && Math.abs(r - avg) / avg > 0.05;
+}
+
+function extractFrames(src, dst, fps, extra = []) {
+  fs.mkdirSync(dst, { recursive: true });
+  if (fs.readdirSync(dst).some((f) => f.endsWith(".png"))) return false;
+  cp.execFileSync(
+    "ffmpeg",
+    ["-y", "-i", src, "-vf", `fps=${fps}`, ...extra, path.join(dst, "f_%04d.png")],
+    { stdio: "ignore" },
+  );
+  return true;
+}
+
+function countPngs(dir) {
+  try {
+    return fs.readdirSync(dir).filter((f) => f.endsWith(".png")).length;
+  } catch {
+    return 0;
+  }
+}
+
+async function main() {
+  const project = path.resolve(process.argv[2] || "");
+  if (!process.argv[2]) {
+    console.error("usage: matte.cjs <project-dir>");
+    process.exit(1);
+  }
+  const src = ensureSource(project);
+  if (!fs.existsSync(src)) {
+    console.error(`[matte] no source video found in ${project}`);
+    process.exit(2);
+  }
+
+  const fpsFile = path.join(project, "matte.fps");
+  // read-with-catch (no exists-then-read TOCTOU): a missing/corrupt fps file
+  // simply falls through to probing the source.
+  let fps = 0;
+  try {
+    fps = parseInt(fs.readFileSync(fpsFile, "utf8").replace(/\D/g, ""), 10) || 0;
+  } catch {
+    /* no cached fps — probe below */
+  }
+  if (!fps) fps = probeFps(src);
+  fs.writeFileSync(fpsFile, String(fps));
+
+  const framesBg = path.join(project, "frames_bg");
+  const framesFg = path.join(project, "frames_fg");
+  if (extractFrames(src, framesBg, fps))
+    console.log(`[matte] source fps=${fps} → frames_bg extracted`);
+
+  const want = countPngs(framesBg);
+  if (want > 0 && countPngs(framesFg) >= want) {
+    console.log(`[matte] frames_fg already complete (${want} frames) — nothing to do`);
+    return;
+  }
+
+  // 1) subject matte via hyperframes (ProRes 4444 keeps the alpha lossless).
+  //    VFR sources are normalized to CFR first — remove-background trusts
+  //    timestamps and emits a desynced frame count on VFR input (the ghost
+  //    double-subject bug: the pasted matte runs at the wrong speed).
+  let matteSrc = src;
+  if (isVfr(src)) {
+    const cfr = path.join(project, "_src_cfr.mp4");
+    if (!fs.existsSync(cfr)) {
+      console.log(
+        `[matte] VFR source detected (nominal != actual fps) → normalizing to ${fps}fps CFR for matting`,
+      );
+      cp.execFileSync(
+        "ffmpeg",
+        [
+          "-y",
+          "-i",
+          src,
+          "-fps_mode",
+          "cfr",
+          "-r",
+          String(fps),
+          "-c:v",
+          "libx264",
+          "-crf",
+          "16",
+          "-preset",
+          "fast",
+          "-an",
+          cfr,
+        ],
+        { stdio: "ignore" },
+      );
+    }
+    matteSrc = cfr;
+  }
+  const mov = path.join(project, "_matte_tmp.mov");
+  const t0 = Date.now();
+  const cached = fs.existsSync(
+    path.join(
+      os.homedir(),
+      ".cache",
+      "hyperframes",
+      "background-removal",
+      "models",
+      "u2net_human_seg.onnx",
+    ),
+  );
+  console.log(
+    `[matte] hyperframes remove-background (u2net_human_seg${cached ? "" : "; first run downloads ~168 MB"})… model load takes ~1-2 min with no output — not hung`,
+  );
+  const r = cp.spawnSync("node", [hfCli(), "remove-background", matteSrc, "-o", mov], {
+    stdio: ["ignore", "pipe", "pipe"],
+    encoding: "utf8",
+  });
+  if (r.status !== 0 || !fs.existsSync(mov)) {
+    console.error("[matte] remove-background FAILED:");
+    console.error((r.stderr || r.stdout || "").split("\n").slice(-8).join("\n"));
+    process.exit(4);
+  }
+
+  // 2) burst to RGBA pngs at the project rate
+  fs.mkdirSync(framesFg, { recursive: true });
+  cp.execFileSync(
+    "ffmpeg",
+    ["-y", "-i", mov, "-vf", `fps=${fps}`, "-pix_fmt", "rgba", path.join(framesFg, "f_%04d.png")],
+    { stdio: "ignore" },
+  );
+  fs.rmSync(mov, { force: true });
+
+  // 3) count parity with frames_bg. Composite overlays fg by INDEX at matte.fps,
+  //    so any fg/bg count mismatch is a time desync (subject ghosting). Handle
+  //    BOTH directions: pad when short, linearly remap when long — and shout
+  //    when the mismatch is big enough to mean broken timestamps upstream.
+  let got = countPngs(framesFg);
+  const tol = Math.max(2, Math.round(want * 0.01));
+  if (Math.abs(got - want) > tol) {
+    console.error(
+      `[matte] WARN frame-count desync: fg=${got} vs bg=${want} (tolerance ${tol}). ` +
+        `Reconciling by remap — if the source is VFR this run predates the CFR fix; ` +
+        `delete frames_fg/ frames_bg/ matte.fps and re-run matte.cjs.`,
+    );
+  }
+  if (got > want && want > 0) {
+    // keep want frames sampled evenly across got (re-times fg onto the bg timeline)
+    const keep = [];
+    for (let j = 1; j <= want; j++)
+      keep.push(Math.min(got, Math.max(1, Math.round((j - 0.5) * (got / want)))));
+    const tmp = path.join(project, "_fg_remap");
+    fs.mkdirSync(tmp, { recursive: true });
+    keep.forEach((srcIdx, k) => {
+      fs.copyFileSync(
+        path.join(framesFg, `f_${String(srcIdx).padStart(4, "0")}.png`),
+        path.join(tmp, `f_${String(k + 1).padStart(4, "0")}.png`),
+      );
+    });
+    fs.rmSync(framesFg, { recursive: true, force: true });
+    fs.renameSync(tmp, framesFg);
+    got = countPngs(framesFg);
+  }
+  while (got < want && got > 0) {
+    fs.copyFileSync(
+      path.join(framesFg, `f_${String(got).padStart(4, "0")}.png`),
+      path.join(framesFg, `f_${String(got + 1).padStart(4, "0")}.png`),
+    );
+    got++;
+  }
+  console.log(
+    `[matte] done in ${((Date.now() - t0) / 1000).toFixed(1)}s → fg=${got} bg=${want} @ ${fps}fps${got === want ? " (parity ok)" : ""}`,
+  );
+}
+
+main().catch((e) => {
+  console.error("[matte]", e.message);
+  process.exit(1);
+});
diff --git a/.claude/skills-media/embedded-captions/scripts/measure-layout.cjs b/.claude/skills-media/embedded-captions/scripts/measure-layout.cjs
new file mode 100644
index 000000000..b0720a58a
--- /dev/null
+++ b/.claude/skills-media/embedded-captions/scripts/measure-layout.cjs
@@ -0,0 +1,293 @@
+#!/usr/bin/env node
+/**
+ * measure-layout.cjs — pixel-perfect bbox measurement using headless Chromium.
+ *
+ * Loads the compiled index.html, seeks the GSAP timeline to specified sample
+ * times, queries every .cap container + every .w word span via
+ * getBoundingClientRect(), writes results to _layout.json.
+ *
+ * check-occlusion.cjs then reads _layout.json + frames_fg/*.png and computes
+ * per-word occlusion against the actual subject silhouette (matte alpha via
+ * sharp) — pixel accurate, no char_ratio guessing.
+ *
+ * Usage:
+ *   node measure-layout.cjs <project-dir> [times...]
+ * If no times given, samples groups['in', 'out'] midpoints.
+ */
+const path = require("path");
+const fs = require("fs");
+const os = require("os");
+
+// Locate hyperframes' bundled puppeteer. render-and-composite.sh exports
+// HYPERFRAMES_ROOT; standalone we also try the in-repo path + ~/Downloads, and
+// accept ANY puppeteer@* the bun store holds (not a pinned version).
+const HF_ROOTS = [
+  process.env.HYPERFRAMES_ROOT,
+  path.resolve(__dirname, "../../.."), // skills/embedded-captions/scripts → repo root if in-repo
+  path.join(os.homedir(), "Downloads", "hyperframes"),
+].filter(Boolean);
+let puppeteer = null;
+for (const root of HF_ROOTS) {
+  const cands = [path.join(root, "node_modules", "puppeteer")];
+  const bunDir = path.join(root, "node_modules", ".bun");
+  try {
+    if (fs.existsSync(bunDir)) {
+      for (const d of fs.readdirSync(bunDir)) {
+        if (d.startsWith("puppeteer@"))
+          cands.push(path.join(bunDir, d, "node_modules", "puppeteer"));
+      }
+    }
+  } catch {
+    /* ignore */
+  }
+  for (const p of cands) {
+    try {
+      if (fs.existsSync(p)) {
+        puppeteer = require(p);
+        break;
+      }
+    } catch {
+      /* try next */
+    }
+  }
+  if (puppeteer) break;
+}
+if (!puppeteer) {
+  console.error(
+    "[measure] could not locate puppeteer — set HYPERFRAMES_ROOT to a built hyperframes checkout",
+  );
+  process.exit(3);
+}
+
+// Resolve hyperframes' bundled GSAP. The templates load GSAP from a CDN
+// (cdn.jsdelivr.net), but in headless Chromium that request can be slow or
+// blocked — the page's inline `gsap.timeline()` then throws "gsap is not
+// defined" and the occlusion gate hard-fails. We inject this local copy on
+// every new document (before any page script runs) so window.gsap always
+// exists, and abort the CDN request so the parser never stalls on it. The
+// render path is unaffected — this is measurement-only.
+let gsapSource = null;
+for (const root of HF_ROOTS) {
+  const cands = [path.join(root, "node_modules", "gsap", "dist", "gsap.min.js")];
+  const bunDir = path.join(root, "node_modules", ".bun");
+  try {
+    if (fs.existsSync(bunDir)) {
+      for (const d of fs.readdirSync(bunDir)) {
+        if (d.startsWith("gsap@"))
+          cands.push(path.join(bunDir, d, "node_modules", "gsap", "dist", "gsap.min.js"));
+      }
+    }
+  } catch {
+    /* ignore */
+  }
+  for (const p of cands) {
+    try {
+      if (fs.existsSync(p)) {
+        gsapSource = fs.readFileSync(p, "utf8");
+        break;
+      }
+    } catch {
+      /* try next */
+    }
+  }
+  if (gsapSource) break;
+}
+
+async function main() {
+  const projectDir = process.argv[2];
+  if (!projectDir) {
+    console.error("usage: measure-layout.cjs <project-dir> [t1 t2 ...]");
+    process.exit(1);
+  }
+  const indexPath = path.resolve(projectDir, "index.html");
+  if (!fs.existsSync(indexPath)) {
+    console.error(`[measure] missing ${indexPath} — run make-composition.cjs first`);
+    process.exit(2);
+  }
+
+  // Load plan to get groups + sample times
+  const planPath = path.join(projectDir, "plan.json");
+  let plan = null;
+  if (fs.existsSync(planPath)) plan = JSON.parse(fs.readFileSync(planPath, "utf8"));
+
+  // Determine sample times: per group, sample multiple points across [in, out]
+  // (catches subject motion within block, multi-frame validation).
+  const explicitTimes = process.argv.slice(3).map(Number).filter(Number.isFinite);
+  let sampleTimes = explicitTimes;
+  if (sampleTimes.length === 0 && plan?.groups) {
+    const allTimes = new Set();
+    for (const g of plan.groups) {
+      const dur = g.out - g.in;
+      // 4 samples per group: 15%, 40%, 65%, 90% through window — covers entry/peak/exit
+      [0.15, 0.4, 0.65, 0.9].forEach((p) => allTimes.add(+(g.in + dur * p).toFixed(3)));
+    }
+    sampleTimes = [...allTimes].sort((a, b) => a - b);
+  }
+
+  // Match render-and-composite's Chrome detection
+  const exe =
+    process.platform === "darwin"
+      ? "/Applications/Google Chrome.app/Contents/MacOS/Google Chrome"
+      : "/usr/bin/google-chrome";
+
+  const W = plan?.width || 720;
+  const H = plan?.height || 1290;
+  const FPS = plan?.fps || 24;
+
+  const browser = await puppeteer.launch({
+    headless: "new",
+    executablePath: fs.existsSync(exe) ? exe : undefined,
+    args: [
+      "--disable-web-security",
+      "--allow-file-access-from-files",
+      `--window-size=${W},${H}`,
+      "--disable-dev-shm-usage",
+    ],
+  });
+  try {
+    const page = await browser.newPage();
+    await page.setViewport({ width: W, height: H, deviceScaleFactor: 1 });
+    page.on("pageerror", (err) => console.error(`[browser-error] ${err.message}`));
+
+    // Inject local GSAP before any page script + abort the CDN <script> so the
+    // page never depends on network for GSAP (see resolver note above). Falls
+    // back to the page's own CDN load if no local copy was found.
+    if (gsapSource) {
+      await page.evaluateOnNewDocument(gsapSource);
+      await page.setRequestInterception(true);
+      page.on("request", (req) => {
+        const u = req.url();
+        if (req.resourceType() === "script" && /gsap/i.test(u) && /^https?:/i.test(u)) req.abort();
+        else req.continue();
+      });
+    }
+
+    await page.goto(`file://${indexPath}`, { waitUntil: "load", timeout: 15000 });
+    // GSAP is injected locally above; poll for the page's timeline registration.
+    const start = Date.now();
+    let ready = false;
+    while (Date.now() - start < 15000) {
+      const r = await page.evaluate(() => !!(window.__timelines && window.__timelines.main));
+      if (r) {
+        ready = true;
+        break;
+      }
+      await new Promise((res) => setTimeout(res, 200));
+    }
+    if (!ready) {
+      console.error("[measure] GSAP timeline never registered");
+      process.exit(4);
+    }
+    // Inject the skill's bundled @font-face set so headless Chromium measures the SAME
+    // glyph metrics the renderer will use. Without this, Inter/etc fall back to system
+    // fonts here while the real render uses the true (often wider) face → wrapped line
+    // counts differ → slot layout / occlusion verdicts are measured on the wrong text.
+    try {
+      const fontsCss = path.join(__dirname, "..", "modes", "standard", "fonts", "fonts.css");
+      if (fs.existsSync(fontsCss))
+        await page.addStyleTag({ content: fs.readFileSync(fontsCss, "utf8") });
+    } catch {
+      /* best-effort — fonts.css missing just reverts to old behavior */
+    }
+    // let webfonts settle so measured glyph metrics match the render
+    await page.evaluate(async () => {
+      try {
+        await document.fonts.ready;
+      } catch {}
+    });
+
+    const samples = [];
+    for (const t of sampleTimes) {
+      // Seek timeline
+      await page.evaluate((t) => {
+        const tl = window.__timelines.main;
+        tl.seek(t);
+        // Force layout flush
+        void document.body.offsetHeight;
+      }, t);
+      // Tiny settle for animations / fonts
+      await new Promise((r) => setTimeout(r, 30));
+
+      // Measure every .cap and its .w children
+      const measurements = await page.evaluate(() => {
+        const caps = [...document.querySelectorAll(".cap")];
+        const out = [];
+        for (const cap of caps) {
+          const cs = getComputedStyle(cap);
+          if (cs.opacity === "0" || cs.display === "none") continue;
+          const cb = cap.getBoundingClientRect();
+          if (cb.width === 0 || cb.height === 0) continue;
+          const id = cap.id || "";
+          const layer = cap.dataset.layer || "";
+          // Per-line via Range over all word spans
+          const ws = [...cap.querySelectorAll(".w")];
+          const words = [];
+          for (const w of ws) {
+            const wcs = getComputedStyle(w);
+            if (wcs.opacity === "0") continue; // not yet animated in
+            const wb = w.getBoundingClientRect();
+            if (wb.width === 0) continue;
+            words.push({
+              text: w.textContent,
+              x: +wb.x.toFixed(1),
+              y: +wb.y.toFixed(1),
+              w: +wb.width.toFixed(1),
+              h: +wb.height.toFixed(1),
+              opacity: +wcs.opacity,
+            });
+          }
+          // Group by line (same y ± 2px)
+          const lines = [];
+          for (const w of words) {
+            const line = lines.find((l) => Math.abs(l.y - w.y) < 3);
+            if (line) {
+              line.words.push(w);
+              line.x = Math.min(line.x, w.x);
+              line.w = Math.max(line.x + line.w, w.x + w.w) - line.x;
+              line.h = Math.max(line.h, w.h);
+            } else {
+              lines.push({ x: w.x, y: w.y, w: w.w, h: w.h, words: [w] });
+            }
+          }
+          out.push({
+            id,
+            layer,
+            cap_bbox: {
+              x: +cb.x.toFixed(1),
+              y: +cb.y.toFixed(1),
+              w: +cb.width.toFixed(1),
+              h: +cb.height.toFixed(1),
+            },
+            opacity: +cs.opacity,
+            lines,
+            words, // also keep flat list
+          });
+        }
+        return out;
+      });
+      const frame_idx = Math.max(1, Math.round(t * FPS));
+      samples.push({ t, frame_idx, caps: measurements });
+    }
+
+    const layout = { width: W, height: H, fps: FPS, samples };
+    const outPath = path.join(projectDir, "_layout.json");
+    fs.writeFileSync(outPath, JSON.stringify(layout, null, 2));
+    console.log(
+      `[measure] wrote ${outPath} (${sampleTimes.length} sample frames, ${samples.reduce((a, s) => a + s.caps.length, 0)} cap measurements)`,
+    );
+  } finally {
+    // Chromium occasionally hangs on shutdown. This script runs synchronously
+    // inside check-occlusion.cjs, which the render gate blocks on — a hung close
+    // would wedge the whole render. Cap the close, then force-exit below.
+    await Promise.race([browser.close().catch(() => {}), new Promise((r) => setTimeout(r, 8000))]);
+  }
+}
+
+// Force a hard exit so a lingering Chromium/libuv handle can't keep the process
+// (and the render gate that spawned it) alive indefinitely.
+main()
+  .then(() => process.exit(0))
+  .catch((e) => {
+    console.error(e);
+    process.exit(1);
+  });
diff --git a/.claude/skills-media/embedded-captions/scripts/prepare.sh b/.claude/skills-media/embedded-captions/scripts/prepare.sh
new file mode 100644
index 000000000..e2f4e0528
--- /dev/null
+++ b/.claude/skills-media/embedded-captions/scripts/prepare.sh
@@ -0,0 +1,39 @@
+#!/usr/bin/env bash
+# prepare.sh — one-command pre-processing for a captions project.
+#
+#   bash prepare.sh <project-dir>
+#
+# Runs the three deterministic pre-steps with maximum parallelism:
+#   matte.cjs (CPU-heavy ONNX)  ∥  transcribe.cjs (whisper)   → then safe-zones.cjs
+# (matte and transcribe are independent; safe-zones needs the matte's frames_fg.)
+# Replaces hand-running steps 2 / 3 / 3b — one call, nothing forgotten, ~the cost
+# of the slower of the two instead of their sum.
+#
+# After this completes the project has: frames_bg/ frames_fg/ matte.fps
+# transcript.json safe-zones.json — everything the authoring step needs.
+set -euo pipefail
+
+PROJECT="${1:?usage: prepare.sh <project-dir>}"
+PROJECT="$(cd "$PROJECT" && pwd)"
+SD="$(cd "$(dirname "${BASH_SOURCE[0]}")" && pwd)"
+
+echo "[prepare] matte ∥ transcribe ∥ envelope …"
+MLOG="$PROJECT/_prepare_matte.log"; TLOG="$PROJECT/_prepare_transcribe.log"; ELOG="$PROJECT/_prepare_envelope.log"
+node "$SD/matte.cjs" "$PROJECT"      > "$MLOG" 2>&1 &  MPID=$!
+node "$SD/transcribe.cjs" "$PROJECT" > "$TLOG" 2>&1 &  TPID=$!
+node "$SD/audio-envelope.cjs" "$PROJECT" > "$ELOG" 2>&1 &  EPID=$!
+
+MRC=0; TRC=0
+wait "$MPID" || MRC=$?
+wait "$TPID" || TRC=$?
+wait "$EPID" || echo "[prepare] (envelope skipped — hero amplitude falls back to neutral)" >&2
+# surface both logs (they contain the guards' warnings — near-silent audio, tail trim)
+sed 's/^/  [matte] /'      "$MLOG" | tail -6
+sed 's/^/  [transcribe] /' "$TLOG" | tail -12
+if (( MRC != 0 )); then echo "[prepare] matte FAILED (rc=$MRC) — see $MLOG" >&2; exit "$MRC"; fi
+if (( TRC != 0 )); then echo "[prepare] transcribe FAILED (rc=$TRC) — see $TLOG" >&2; exit "$TRC"; fi
+
+echo "[prepare] safe-zones …"
+node "$SD/safe-zones.cjs" "$PROJECT"
+
+echo "[prepare] ✅ ready: frames_fg/ transcript.json safe-zones.json — author next (see SKILL.md step 4)"
diff --git a/.claude/skills-media/embedded-captions/scripts/preview-frames.cjs b/.claude/skills-media/embedded-captions/scripts/preview-frames.cjs
new file mode 100644
index 000000000..56131d7bf
--- /dev/null
+++ b/.claude/skills-media/embedded-captions/scripts/preview-frames.cjs
@@ -0,0 +1,268 @@
+#!/usr/bin/env node
+/*
+ * preview-frames.cjs — APPROXIMATE final frames in seconds, without rendering.
+ *
+ *   node preview-frames.cjs <project-dir> [t1 t2 ...]
+ *
+ * For each sample time t: screenshot the caption layer(s) in headless Chromium
+ * (index.html seeked to t; rail.html too if present), then composite in sharp:
+ *   frames_bg[t]  →  index captions (embed layer)  →  matte frames_fg[t] (subject
+ *   occludes the embed)  →  rail captions (in front, like the final alpha-overlay)
+ * = a faithful preview of the composite for THAT moment, ~2s per frame instead of
+ * a multi-minute render. Writes <project>/preview/t<t>.png + a contact sheet
+ * preview/sheet.png.
+ *
+ * Use it BEFORE rendering: eyeball placement, occlusion, washout, text-on-text —
+ * the failure classes the geometric gates can't judge. The QA checklist lives in
+ * SKILL.md § Visual QA. (Video elements show poster/first-frame in the screenshot;
+ * the REAL a-roll pixels come from frames_bg, so previews stay accurate.)
+ *
+ * Sample-time default: climax/groups midpoints from standard.json or plan.json,
+ * else 25/50/75% of the clip.
+ */
+const path = require("path");
+const fs = require("fs");
+const os = require("os");
+
+const HF_ROOTS = [
+  process.env.HYPERFRAMES_ROOT,
+  path.resolve(__dirname, "../../.."),
+  path.join(os.homedir(), "Downloads", "hyperframes"),
+].filter(Boolean);
+function findInBun(root, pkg, sub) {
+  const cands = [path.join(root, "node_modules", pkg)];
+  const bunDir = path.join(root, "node_modules", ".bun");
+  try {
+    if (fs.existsSync(bunDir))
+      for (const d of fs.readdirSync(bunDir))
+        if (d.startsWith(pkg + "@")) cands.push(path.join(bunDir, d, "node_modules", pkg));
+  } catch {}
+  for (const c of cands) {
+    const p = sub ? path.join(c, sub) : c;
+    if (fs.existsSync(p)) return p;
+  }
+  return null;
+}
+let puppeteer = null,
+  sharp = null,
+  gsapSource = null;
+for (const r of HF_ROOTS) {
+  if (!puppeteer) {
+    const p = findInBun(r, "puppeteer");
+    if (p)
+      try {
+        puppeteer = require(p);
+      } catch {}
+  }
+  if (!sharp) {
+    const p = findInBun(r, "sharp");
+    if (p)
+      try {
+        sharp = require(p);
+      } catch {}
+  }
+  if (!gsapSource) {
+    const g = findInBun(r, "gsap", path.join("dist", "gsap.min.js"));
+    if (g) gsapSource = fs.readFileSync(g, "utf8");
+  }
+}
+if (!puppeteer || !sharp) {
+  console.error("[preview] need puppeteer+sharp — set HYPERFRAMES_ROOT");
+  process.exit(0);
+}
+
+async function shotAt(browser, file, W, H, t) {
+  const page = await browser.newPage();
+  try {
+    await page.setViewport({ width: W, height: H, deviceScaleFactor: 1 });
+    // Serve the page's own CDN <script src=gsap> request from the local bundle
+    // (offline-safe) instead of injecting gsap at document-start: a document-start
+    // evaluation runs while document.head is still null, and gsap's init then
+    // throws "appendChild of null" — which killed previews for theme projects.
+    await page.setRequestInterception(true);
+    page.on("request", (req) => {
+      const u = req.url();
+      if (req.resourceType() === "script" && /gsap/i.test(u) && /^https?:/i.test(u)) {
+        if (gsapSource)
+          req.respond({ status: 200, contentType: "application/javascript", body: gsapSource });
+        else req.continue(); // no local bundle — let the CDN load (online machines)
+      } else if (req.resourceType() === "media")
+        req.abort(); // a-roll pixels come from frames_bg
+      else req.continue();
+    });
+    await page.goto(`file://${file}`, { waitUntil: "load", timeout: 15000 });
+    const t0 = Date.now();
+    let tlReady = false;
+    while (Date.now() - t0 < 15000) {
+      tlReady = await page.evaluate(() => !!(window.__timelines && window.__timelines.main));
+      if (tlReady) break;
+      await new Promise((r) => setTimeout(r, 120));
+    }
+    if (!tlReady) throw new Error(`timeline never registered in ${path.basename(file)}`);
+    // bundled @font-face → previews show the REAL faces (same set the renderer embeds)
+    try {
+      const fontsCss = path.join(__dirname, "..", "modes", "standard", "fonts", "fonts.css");
+      if (fs.existsSync(fontsCss))
+        await page.addStyleTag({ content: fs.readFileSync(fontsCss, "utf8") });
+    } catch {}
+    await page.evaluate(async () => {
+      try {
+        await document.fonts.ready;
+      } catch {}
+    });
+    await page.evaluate((t) => {
+      const v = document.getElementById("a-roll");
+      if (v) v.style.display = "none"; // transparent hole for the bg frame
+      document.body.style.background = "transparent";
+      document.documentElement.style.background = "transparent";
+      window.__timelines.main.seek(t);
+      void document.body.offsetHeight;
+    }, t);
+    await new Promise((r) => setTimeout(r, 60));
+    return await page.screenshot({ omitBackground: true }); // RGBA png of caption layer only
+  } finally {
+    await page.close().catch(() => {});
+  }
+}
+
+async function main() {
+  const project = path.resolve(process.argv[2] || "");
+  if (!process.argv[2]) {
+    console.error("usage: preview-frames.cjs <project-dir> [times...]");
+    process.exit(1);
+  }
+  const idx = path.join(project, "index.html");
+  if (!fs.existsSync(idx)) {
+    console.error("[preview] no index.html — compile first");
+    process.exit(1);
+  }
+  const railP = path.join(project, "rail.html");
+  const hasRail = fs.existsSync(railP);
+  const fgP = path.join(project, "index_fg.html");
+  const hasFg = fs.existsSync(fgP); // hybrid: fg caps render ABOVE the matte (like the real composite)
+
+  let fps = 24;
+  try {
+    const f = parseFloat(
+      String(fs.readFileSync(path.join(project, "matte.fps"), "utf8")).replace(/[^\d.]/g, ""),
+    );
+    if (f > 0) fps = f;
+  } catch {}
+
+  // sample times: explicit > climax window + line midpoints > thirds
+  let globalFg = false;
+  try {
+    globalFg =
+      JSON.parse(fs.readFileSync(path.join(project, "plan.json"), "utf8")).caption_layer === "fg";
+  } catch {}
+  let times = process.argv.slice(3).map(Number).filter(Number.isFinite);
+  if (!times.length) {
+    try {
+      const plan = JSON.parse(fs.readFileSync(path.join(project, "plan.json"), "utf8"));
+      // heroes get 2 samples each (entrance + hold); every OTHER group gets at least
+      // a shot at one midpoint — the old 2-per-group list truncated at 12 and silently
+      // dropped whole narration blocks from the sheet (cold-start agents missed bugs there)
+      const gs = plan.groups || [];
+      const heroes = gs.filter((g) => g.hero === true),
+        rest = gs.filter((g) => !g.hero);
+      for (const g of heroes) {
+        const span = g.out - g.in;
+        times.push(+(g.in + span * 0.25).toFixed(2), +(g.in + span * 0.7).toFixed(2));
+      }
+      const mids = rest.map((g) => +((g.in + g.out) / 2).toFixed(2));
+      const budget = Math.max(2, 16 - times.length);
+      const step = Math.max(1, Math.ceil(mids.length / budget));
+      for (let i = 0; i < mids.length; i += step) times.push(mids[i]);
+    } catch {}
+  }
+  if (!times.length) {
+    const n = fs.existsSync(path.join(project, "frames_bg"))
+      ? fs.readdirSync(path.join(project, "frames_bg")).length
+      : 0;
+    const dur = n / fps || 10;
+    times = [dur * 0.25, dur * 0.5, dur * 0.75].map((t) => +t.toFixed(2));
+  }
+  times = [...new Set(times)].slice(0, 16).sort((a, b) => a - b);
+
+  const meta = await sharp(
+    path.join(
+      project,
+      "frames_bg",
+      fs
+        .readdirSync(path.join(project, "frames_bg"))
+        .filter((f) => f.endsWith(".png"))
+        .sort()[0],
+    ),
+  ).metadata();
+  const W = meta.width,
+    H = meta.height;
+  const outDir = path.join(project, "preview");
+  fs.mkdirSync(outDir, { recursive: true });
+
+  const exe =
+    process.platform === "darwin"
+      ? "/Applications/Google Chrome.app/Contents/MacOS/Google Chrome"
+      : "/usr/bin/google-chrome";
+  const browser = await puppeteer.launch({
+    headless: "new",
+    executablePath: fs.existsSync(exe) ? exe : undefined,
+    args: ["--disable-web-security", "--allow-file-access-from-files", "--disable-dev-shm-usage"],
+  });
+  const outs = [];
+  try {
+    for (const t of times) {
+      const fi = Math.max(1, Math.round(t * fps));
+      const bg = path.join(project, "frames_bg", `f_${String(fi).padStart(4, "0")}.png`);
+      const fg = path.join(project, "frames_fg", `f_${String(fi).padStart(4, "0")}.png`);
+      if (!fs.existsSync(bg)) {
+        console.error(`[preview] no bg frame for t=${t}`);
+        continue;
+      }
+      const layers = [{ input: await shotAt(browser, idx, W, H, t) }]; // embed captions
+      // global caption_layer:"fg" → captions sit ON TOP of the subject; the matte
+      // must NOT be stacked over them (the render skips the overlay too).
+      if (!globalFg && fs.existsSync(fg)) layers.push({ input: fg }); // subject occludes embed
+      if (hasFg) layers.push({ input: await shotAt(browser, fgP, W, H, t), blend: "screen" }); // hybrid fg caps in front (screen, like the real ffmpeg pass)
+      if (hasRail) layers.push({ input: await shotAt(browser, railP, W, H, t) }); // rail in front
+      const out = path.join(outDir, `t${String(t).replace(".", "_")}.png`);
+      await sharp(bg).composite(layers).png().toFile(out);
+      outs.push({ t, out });
+      console.log(`[preview] t=${t}s → ${out}`);
+    }
+    // contact sheet
+    if (outs.length) {
+      const TW = 480,
+        TH = Math.round((TW * H) / W);
+      const comps = [];
+      for (let i = 0; i < outs.length; i++)
+        comps.push({
+          input: await sharp(outs[i].out).resize(TW, TH).toBuffer(),
+          left: (i % 4) * TW,
+          top: Math.floor(i / 4) * TH,
+        });
+      const rows = Math.ceil(outs.length / 4);
+      await sharp({
+        create: {
+          width: 4 * TW,
+          height: rows * TH,
+          channels: 3,
+          background: { r: 16, g: 16, b: 16 },
+        },
+      })
+        .composite(comps)
+        .png()
+        .toFile(path.join(outDir, "sheet.png"));
+      console.log(
+        `[preview] contact sheet → ${path.join(outDir, "sheet.png")}  (${outs.length} frames @ ${times.join(", ")}s)`,
+      );
+    }
+  } finally {
+    await Promise.race([browser.close().catch(() => {}), new Promise((r) => setTimeout(r, 8000))]);
+  }
+}
+main()
+  .then(() => process.exit(0))
+  .catch((e) => {
+    console.error("[preview]", e.message);
+    process.exit(1);
+  });
diff --git a/.claude/skills-media/embedded-captions/scripts/render-and-composite.sh b/.claude/skills-media/embedded-captions/scripts/render-and-composite.sh
new file mode 100755
index 000000000..c7741d0c7
--- /dev/null
+++ b/.claude/skills-media/embedded-captions/scripts/render-and-composite.sh
@@ -0,0 +1,469 @@
+#!/usr/bin/env bash
+# End-to-end: hyperframes render + ffmpeg overlay matte → final.mp4
+#
+# Usage:
+#   bash render-and-composite.sh <project-dir> [hyperframes-repo-path]
+#
+# Env:
+#   HYPERFRAMES_ROOT  override the hyperframes checkout location
+
+set -euo pipefail
+
+PROJECT="${1:?usage: render-and-composite.sh <project-dir> [hyperframes-repo]}"
+PROJECT="$(cd "$PROJECT" && pwd)"
+
+# Resolve the hyperframes checkout. Candidate order:
+#   1. arg 2   2. $HYPERFRAMES_ROOT   3. repo root if this skill ships INSIDE the
+#   hyperframes repo (skills/embedded-captions/scripts → ../../..)   4. ~/Downloads/hyperframes
+SKILL_SCRIPT_DIR="$(cd "$(dirname "${BASH_SOURCE[0]}")" && pwd)"
+HF=""
+for cand in "${2:-}" "${HYPERFRAMES_ROOT:-}" "$(cd "$SKILL_SCRIPT_DIR/../../.." 2>/dev/null && pwd)" "$HOME/Downloads/hyperframes"; do
+  if [[ -n "$cand" && -f "$cand/packages/cli/dist/cli.js" ]]; then HF="$cand"; break; fi
+done
+if [[ -z "$HF" ]]; then
+  echo "[render] hyperframes CLI not found. Set HYPERFRAMES_ROOT to your hyperframes" >&2
+  echo "         checkout (needs packages/cli/dist/cli.js — 'bun install && bun run build')." >&2
+  exit 1
+fi
+export HYPERFRAMES_ROOT="$HF"   # so the occlusion gate's measure-layout.cjs finds puppeteer too
+HF_CLI="$HF/packages/cli/dist/cli.js"
+if [[ ! -d "$PROJECT/frames_fg" ]]; then
+  echo "[render] missing matte frames at $PROJECT/frames_fg — run matte.cjs first" >&2
+  exit 1
+fi
+# Which compiler owns this project? Cinematic = make-composition.cjs (plan.json).
+# (Standard mode retired 2026-06-12 — rail-surface needs are served by theme
+# DNAs like "anchor"; legacy standard.json projects re-render from their
+# existing index.html or via the archived compiler in embedded-captions-archive.)
+compiler_for() {
+  echo "make-composition.cjs"
+}
+if [[ ! -f "$PROJECT/index.html" ]]; then
+  if [[ -f "$PROJECT/plan.json" ]]; then
+    C="$(compiler_for)"
+    echo "[render] no index.html — auto-compiling via $C"
+    node "$(dirname "$0")/$C" "$PROJECT"
+  elif [[ -f "$PROJECT/cinematic.json" ]]; then
+    # cinematic.json-only project: the full compiler lowers blocks → plan.json → html
+    echo "[render] no index.html — auto-compiling via make-cinematic.cjs"
+    node "$(dirname "$0")/make-cinematic.cjs" "$PROJECT"
+  else
+    echo "[render] missing $PROJECT/index.html and standard.json/plan.json/cinematic.json — author + compile first" >&2
+    exit 1
+  fi
+elif [[ -f "$PROJECT/cinematic.json" && "$PROJECT/cinematic.json" -nt "$PROJECT/index.html" ]]; then
+  echo "[render] cinematic.json newer than index.html — recompiling"
+  node "$(dirname "$0")/make-cinematic.cjs" "$PROJECT"
+elif [[ -f "$PROJECT/plan.json" && "$PROJECT/plan.json" -nt "$PROJECT/index.html" ]]; then
+  C="$(compiler_for)"
+  echo "[render] plan.json newer than index.html — recompiling via $C"
+  node "$(dirname "$0")/$C" "$PROJECT"
+else
+  # the COMPILERS themselves may have changed since this project last compiled —
+  # rendering stale HTML after a compiler fix silently re-ships the old bug
+  C="$(compiler_for)"
+  RECOMPILER="$C"
+  # for cinematic projects the FULL compiler is make-cinematic (compiler_for points
+  # at make-composition, which only re-emits html from an already-compiled plan)
+  if [[ -f "$PROJECT/cinematic.json" && "$C" == "make-composition.cjs" ]]; then RECOMPILER="make-cinematic.cjs"; fi
+  ENGINE="$(dirname "$0")/../modes/cinematic/engine.html"
+  if [[ "$(dirname "$0")/$RECOMPILER" -nt "$PROJECT/index.html" || "$(dirname "$0")/lib-dna.cjs" -nt "$PROJECT/index.html" || ( -f "$ENGINE" && "$ENGINE" -nt "$PROJECT/index.html" ) ]]; then
+    echo "[render] compiler/engine newer than index.html — recompiling via $RECOMPILER"
+    node "$(dirname "$0")/$RECOMPILER" "$PROJECT"
+  fi
+fi
+
+# Embed template fonts BEFORE the gates + render. hyperframes only auto-supplies
+# its ~18 canonical fonts; every other template family (Anton, Bangers, VT323,
+# Press Start 2P, …) silently falls back to a generic font on a clean/offline/CI
+# machine — it only "looks right" locally when that font happens to be installed
+# as a system font. inject-fonts inlines the @font-face (base64 woff2, from
+# modes/standard/fonts/fonts.css) for whatever non-canonical families each HTML
+# actually uses, so measure-layout AND the capture see the true glyph metrics.
+# Idempotent; a no-op when every font is canonical/system or already declared.
+node "$(dirname "$0")/inject-fonts.cjs" "$PROJECT" \
+  || echo "[render] (font embed skipped — inject-fonts.cjs/fonts.css unavailable)" >&2
+
+# gate ledger — each gate appends one line; echoed as a summary before "done"
+# (verdicts were drowning hundreds of lines up in ffmpeg logs)
+GATES="$PROJECT/_gates.txt"; : > "$GATES"
+
+# Gate: plan.json word timings must align with transcript.json within 80ms.
+# A caption whose animation fires 500ms before or after the word is spoken
+# breaks the "belongs to the scene" illusion — hard fail, not a warning.
+# Skip only if transcript.json is missing (custom mode without transcript).
+if [[ -f "$PROJECT/plan.json" && -f "$PROJECT/transcript.json" ]]; then
+  if ! node "$(dirname "$0")/check-timing.cjs" "$PROJECT" --strict; then
+    echo "[render] ABORTED — fix plan.json word timings to match transcript.json, then re-run." >&2
+    exit 2
+  fi
+  echo "timing            PASS (strict)" >> "$GATES"
+fi
+
+# Gate: subject occlusion + frame-edge overflow — pixel-perfect via Chromium DOM
+# rects (measure-layout.cjs) × the subject-matte alpha (sharp). Template mode only
+# (skipped when plan.json is absent; custom mode uses check-overflow.cjs below).
+if [[ -f "$PROJECT/plan.json" && -d "$PROJECT/frames_fg" ]]; then
+  # check-occlusion prints its verdict, then can intermittently hang on native
+  # (sharp/libvips) teardown — which would wedge the whole render. Run it under a
+  # watchdog: once the verdict is printed, a stuck exit can't block us. We read the
+  # pass/fail from its OUTPUT, not its exit code, so the hang is harmless.
+  OCC_LOG="$PROJECT/_occlusion.log"
+  node "$(dirname "$0")/check-occlusion.cjs" "$PROJECT" --strict > "$OCC_LOG" 2>&1 &
+  OCC_PID=$!; occ_t0=$SECONDS; OCC_RC=""; verdict_at=""
+  while kill -0 "$OCC_PID" 2>/dev/null; do
+    # mark when the verdict header is printed (analysis done). if-form: a failed grep
+    # must NOT trip set -e (it silently killed the whole render on fresh projects).
+    if [[ -z "$verdict_at" ]] && grep -qE '\[v2\].*word-fail' "$OCC_LOG" 2>/dev/null; then verdict_at=$SECONDS; fi
+    # verdict printed but still alive 8s later → native (sharp) teardown hang; or no
+    # verdict after 150s → measure/analysis stuck. Either way: kill + read verdict.
+    if { [[ -n "$verdict_at" ]] && (( SECONDS - verdict_at > 8 )); } || (( SECONDS - occ_t0 > 150 )); then
+      kill -9 "$OCC_PID" 2>/dev/null
+      if grep -q 'cap(s) FAIL' "$OCC_LOG"; then OCC_RC=2; else OCC_RC=0; fi
+      echo "[render] occlusion gate hung after verdict (sharp teardown) — killed zombie; verdict rc=$OCC_RC" >&2
+      break
+    fi
+    sleep 2
+  done
+  if [[ -z "$OCC_RC" ]]; then OCC_RC=0; wait "$OCC_PID" 2>/dev/null || OCC_RC=$?; fi   # capture rc without tripping set -e
+  cat "$OCC_LOG"
+  if (( OCC_RC != 0 )); then
+    echo "[render] ABORTED — fix plan.json layout to reduce subject occlusion / frame-edge overflow, then re-run." >&2
+    echo "         Override: OCCLUSION_SKIP=1 bash render-and-composite.sh <project>" >&2
+    if [[ "${OCCLUSION_SKIP:-0}" != "1" ]]; then
+      exit 2
+    fi
+    echo "[render] OCCLUSION_SKIP=1 set — continuing despite occlusion/overflow warnings." >&2
+    echo "occlusion+overflow OVERRIDDEN (OCCLUSION_SKIP=1 — conscious accept)" >> "$GATES"
+  fi
+  if (( OCC_RC == 0 )); then echo "occlusion+overflow PASS" >> "$GATES"; fi
+fi
+
+# Custom mode (no plan.json) skips the template gates above. Run a lightweight,
+# mode-agnostic frame-overflow check as a WARNING only — custom designs may bleed
+# off-frame intentionally, so it never aborts, but it surfaces captions that fall
+# off the canvas (the failure we otherwise only catch by eye).
+if [[ ! -f "$PROJECT/plan.json" && -f "$PROJECT/index.html" && -f "$(dirname "$0")/check-overflow.cjs" ]]; then
+  node "$(dirname "$0")/check-overflow.cjs" "$PROJECT" \
+    || echo "[render] (overflow check skipped — Chromium/puppeteer unavailable)" >&2
+  echo "overflow(index)   checked (custom mode, warning-only)" >> "$GATES"
+fi
+# rail.html gets NO other automated coverage (the occlusion gate only reads plan.json
+# caps) — run its overflow check whenever it exists. Was dead code inside the
+# no-plan.json branch: Standard always HAS a derived plan.json, so it never ran.
+if [[ -f "$PROJECT/rail.html" && -f "$(dirname "$0")/check-overflow.cjs" ]]; then
+  if node "$(dirname "$0")/check-overflow.cjs" "$PROJECT" rail.html; then
+    echo "overflow(rail)    PASS" >> "$GATES"
+  else
+    echo "[render] (rail overflow check skipped — Chromium/puppeteer unavailable)" >&2
+    echo "overflow(rail)    skipped (infra)" >> "$GATES"
+  fi
+fi
+
+# Standard hand-off gate: the PROMOTED climax word must NOT also be revealed in the
+# rail during the climax's on-screen window (PIPELINE.md "Rail ↔ climax hand-off").
+# Hard-fails on a CONFIRMED duplicate; infra issues (no puppeteer, etc.) exit 0 and
+# never block. Override with RAIL_CLIMAX_SKIP=1 for a deliberate exception.
+if [[ -f "$PROJECT/rail.html" && -f "$PROJECT/index.html" && -f "$(dirname "$0")/check-rail-climax.cjs" ]]; then
+  if ! node "$(dirname "$0")/check-rail-climax.cjs" "$PROJECT"; then
+    echo "[render] ABORTED — the promoted climax word is duplicated in the rail." >&2
+    echo "         Apply the rail↔climax hand-off (PIPELINE.md), then re-run." >&2
+    echo "         Override: RAIL_CLIMAX_SKIP=1 bash render-and-composite.sh <project>" >&2
+    if [[ "${RAIL_CLIMAX_SKIP:-0}" != "1" ]]; then
+      exit 2
+    fi
+    echo "[render] RAIL_CLIMAX_SKIP=1 — continuing despite the rail/climax duplicate." >&2
+    echo "rail-climax       OVERRIDDEN (RAIL_CLIMAX_SKIP=1)" >> "$GATES"
+  else
+    echo "rail-climax       PASS (no duplicate reveal)" >> "$GATES"
+  fi
+fi
+
+# FPS: matte.fps (written by matte.cjs at the source's NATIVE rate) is authoritative
+# so the matte overlay stays frame-aligned with the render. Falls back to plan.fps /
+# frame-count inference / 24. Warn if plan.json fps disagrees with the matte.
+FPS=""
+if [[ -f "$PROJECT/matte.fps" ]]; then
+  FPS="$(tr -dc '0-9' < "$PROJECT/matte.fps")"
+  if [[ -f "$PROJECT/plan.json" ]]; then
+    PFPS="$(node -e 'try{process.stdout.write(String(require(process.argv[1]).fps??""))}catch(e){}' "$PROJECT/plan.json" 2>/dev/null || true)"
+    if [[ -n "$PFPS" && "$PFPS" != "$FPS" ]]; then
+      echo "[render] WARN: plan.json fps=$PFPS != matte fps=$FPS — using matte fps to keep occlusion aligned" >&2
+    fi
+  fi
+fi
+if [[ -z "$FPS" || "$FPS" == "0" ]]; then
+  if [[ -f "$PROJECT/plan.json" ]]; then
+    FPS="$(node -e 'process.stdout.write(String(require(process.argv[1]).fps??24))' "$PROJECT/plan.json")"
+  elif [[ -d "$PROJECT/frames_fg" ]]; then
+    N="$(ls "$PROJECT/frames_fg" | wc -l | tr -d ' ')"
+    DUR="$(grep -oE 'data-duration="[0-9.]+"' "$PROJECT/index.html" | head -1 | grep -oE '[0-9.]+' || echo '')"
+    if [[ -n "$DUR" && "$N" -gt 0 ]]; then
+      FPS="$(awk "BEGIN{printf \"%d\", $N/$DUR + 0.5}")"
+    else
+      FPS=24
+    fi
+  else
+    FPS=24
+  fi
+fi
+
+# Caption layer: "bg" (classic embed — matte overlays subject on top of caps)
+# or "fg" (captions always on top — announcement feel, used for 9:16 portraits
+# where the subject fills the frame and bg mode loses too much to occlusion).
+# Precedence: CLI env flag > plan.json > HTML data attribute > "bg".
+CAPTION_LAYER="${CAPTION_LAYER_FLAG:-}"
+if [[ -z "$CAPTION_LAYER" && -f "$PROJECT/plan.json" ]]; then
+  CAPTION_LAYER="$(node -e 'process.stdout.write(String(require(process.argv[1]).caption_layer??"bg"))' "$PROJECT/plan.json")"
+fi
+if [[ -z "$CAPTION_LAYER" && -f "$PROJECT/index.html" ]]; then
+  ATTR="$(grep -oE 'data-caption-layer="(bg|fg)"' "$PROJECT/index.html" | head -1 | grep -oE '(bg|fg)' || true)"
+  if [[ -n "$ATTR" ]]; then CAPTION_LAYER="$ATTR"; fi
+fi
+CAPTION_LAYER="${CAPTION_LAYER:-bg}"
+echo "[render] caption_layer=$CAPTION_LAYER"
+
+BG="$PROJECT/bg_plus_caps.mp4"
+FINAL="$PROJECT/final.mp4"
+
+# Snapshot the current index.html + plan.json into history/ so the user
+# can recover a prior iteration's design after further edits overwrite it.
+HISTORY_DIR="$PROJECT/history"
+mkdir -p "$HISTORY_DIR"
+STAMP="$(date +%Y%m%d-%H%M%S)"
+cp "$PROJECT/index.html" "$HISTORY_DIR/index-${STAMP}.html"
+cp "$PROJECT/plan.json"  "$HISTORY_DIR/plan-${STAMP}.json" 2>/dev/null || true
+echo "[render] snapshot → history/index-${STAMP}.html"
+
+echo "[render] hyperframes render @ ${FPS}fps"
+
+# Hyperframes occasionally hangs on Chromium shutdown *after* the output file
+# is successfully written (seen multiple times on 15–30s clips). Without a
+# guard the shell waits forever. This helper enforces a max wall-clock budget,
+# and if the output is already on disk when we hit it, treats the run as
+# successful and kills the zombie. Tune HF_TIMEOUT_S via env if needed.
+# Default SCALES with clip size: two parallel Chromium passes on a long clip
+# legitimately exceed a fixed 240s (a 38s/1151-frame render was killed at 244s
+# while healthy). ~1.5s per source frame, floor 240s.
+N_FRAMES="$(ls "$PROJECT/frames_fg" 2>/dev/null | wc -l | tr -d ' ')"
+HF_TIMEOUT_S="${HF_TIMEOUT_S:-$(( N_FRAMES * 3 / 2 > 240 ? N_FRAMES * 3 / 2 : 240 ))}"
+# hf_render_dir: render one hyperframes composition.
+# args: <output.mp4> <label> <project_dir>
+# watches for the Chromium-shutdown-hang; if output file exists and is >1MB
+# past timeout, treats as success and kills the zombie.
+hf_render_dir() {
+  local out="$1" label="$2" proj="$3" fmt="${4:-}"
+  # bash 3.2 (macOS) throws on empty-array expansion under `set -u`, so branch
+  # explicitly instead of splatting an optional --format array.
+  if [[ -n "$fmt" ]]; then
+    node "$HF_CLI" render --skill=embedded-captions --dir "$proj" --fps "$FPS" --format "$fmt" --crf 11 -o "$out" &
+  else
+    node "$HF_CLI" render --skill=embedded-captions --dir "$proj" --fps "$FPS" --crf 11 -o "$out" &
+  fi
+  local pid=$! start=$SECONDS elapsed
+  while kill -0 "$pid" 2>/dev/null; do
+    elapsed=$((SECONDS - start))
+    if (( elapsed > HF_TIMEOUT_S )); then
+      local sz=0
+      [[ -f "$out" ]] && sz=$(stat -f%z "$out" 2>/dev/null || echo 0)
+      if (( sz > 1000000 )); then
+        echo "[render] ${label}: node hung ${elapsed}s after shutdown (output ${sz}B exists, treating as success)"
+        kill -9 "$pid" 2>/dev/null
+        pkill -9 -f "puppeteer_dev_chrome_profile" 2>/dev/null
+        return 0
+      fi
+      echo "[render] ${label}: hung ${elapsed}s with no output — killing and failing" >&2
+      kill -9 "$pid" 2>/dev/null
+      pkill -9 -f "puppeteer_dev_chrome_profile" 2>/dev/null
+      return 2
+    fi
+    sleep 5
+  done
+  wait "$pid" 2>/dev/null
+  [[ -f "$out" ]]
+}
+
+# Link a project's assets into a shadow render dir EXCEPT the files we manage
+# (the HTML we override + render outputs/intermediates). Links every other entry by
+# its real name, so the shadow resolves whatever media the HTML references — including
+# the ORIGINAL video filename `hyperframes init` scaffolds (e.g. clip.mp4), not just a
+# fixed allow-list. Prevents the shadow-render 404 → silent/frozen output → abort.
+link_assets() {  # <project> <shadow>
+  local proj="$1" sh="$2" b
+  for p in "$proj"/*; do
+    [[ -e "$p" ]] || continue
+    b="$(basename "$p")"
+    case "$b" in
+      index.html|rail.html|index_fg.html|final.mp4|bg_plus_caps.mp4|fg_caps.mp4|rail.webm|history|_*) continue;;
+    esac
+    ln -sf "$p" "$sh/$b"
+  done
+}
+
+# Hybrid renders need 2 independent hyperframes passes. They share no state, so
+# we run them in parallel (one in the main PROJECT, one in a shadow dir with
+# index_fg.html renamed to index.html). Saves ~half of the Chromium cost.
+FG_SHADOW=""
+if [[ -f "$PROJECT/index_fg.html" ]]; then
+  FG_SHADOW="$PROJECT/_fg_shadow"
+  rm -rf "$FG_SHADOW" && mkdir -p "$FG_SHADOW"
+  # Link shared assets (any media filename); copy index_fg.html into shadow as index.html.
+  link_assets "$PROJECT" "$FG_SHADOW"
+  cp "$PROJECT/index_fg.html" "$FG_SHADOW/index.html"
+
+  FG_CAPS="$PROJECT/fg_caps.mp4"
+  echo "[render] hybrid fg/bg — launching both passes in parallel"
+  hf_render_dir "$BG" "bg_plus_caps" "$PROJECT" &
+  BG_PID=$!
+  hf_render_dir "$FG_CAPS" "fg_caps" "$FG_SHADOW" &
+  FG_PID=$!
+  # Wait for both; fail if either fails.
+  BG_RC=0; wait "$BG_PID" || BG_RC=$?
+  FG_RC=0; wait "$FG_PID" || FG_RC=$?
+  rm -rf "$FG_SHADOW"
+  if (( BG_RC != 0 )); then echo "[render] bg render failed" >&2; exit 1; fi
+  if (( FG_RC != 0 )); then echo "[render] fg render failed" >&2; exit 1; fi
+elif [[ -f "$PROJECT/rail.html" ]]; then
+  # Standard mode: TWO independent hyperframes passes (base = index.html with the
+  # embed; rail = rail.html transparent). Each renders from its own shadow dir (the
+  # multiple-root ambiguity), and they share no state — run them IN PARALLEL like
+  # the fg-hybrid above (~halves the Chromium wall time). The rail webm is consumed
+  # by the composite stage below, which finds it already rendered.
+  BASE_SHADOW="$PROJECT/_base_shadow"; rm -rf "$BASE_SHADOW"; mkdir -p "$BASE_SHADOW"
+  link_assets "$PROJECT" "$BASE_SHADOW"
+  cp "$PROJECT/index.html" "$BASE_SHADOW/index.html"
+  RAIL_SHADOW="$PROJECT/_rail_shadow"; rm -rf "$RAIL_SHADOW"; mkdir -p "$RAIL_SHADOW"
+  link_assets "$PROJECT" "$RAIL_SHADOW"
+  cp "$PROJECT/rail.html" "$RAIL_SHADOW/index.html"
+  RAIL_WEBM="$PROJECT/rail.webm"
+  echo "[render] standard base + rail — launching both passes in parallel"
+  hf_render_dir "$BG" "bg_plus_caps" "$BASE_SHADOW" &
+  BASE_PID=$!
+  hf_render_dir "$RAIL_WEBM" "rail" "$RAIL_SHADOW" "webm" &
+  RAIL_PID=$!
+  BASE_RC=0; wait "$BASE_PID" || BASE_RC=$?
+  RAIL_RC=0; wait "$RAIL_PID" || RAIL_RC=$?
+  rm -rf "$BASE_SHADOW" "$RAIL_SHADOW"
+  if (( BASE_RC != 0 )); then echo "[render] bg render failed" >&2; exit 1; fi
+  if (( RAIL_RC != 0 )); then echo "[render] rail render failed" >&2; exit 1; fi
+else
+  hf_render_dir "$BG" "bg_plus_caps" "$PROJECT" \
+    || { echo "[render] bg render failed" >&2; exit 1; }
+fi
+
+# Probe render dims for ffmpeg scale
+W="$(ffprobe -v error -select_streams v:0 -show_entries stream=width  -of default=nw=1:nk=1 "$BG")"
+H="$(ffprobe -v error -select_streams v:0 -show_entries stream=height -of default=nw=1:nk=1 "$BG")"
+
+# Clamp every composite to the matte (= source-video) length. The render uses
+# plan.duration / data-duration, which can exceed the source (e.g. Whisper word
+# timestamps overrun the clip). Past the source the a-roll is gone (black) but the
+# matte overlay repeats its last frame → the tail shows the subject floating on
+# black. frames_fg count/fps APPROXIMATES the source length, but fractional-rate
+# sources (29.97) get over-extracted by integer-fps rounding (e.g. 544 frames for
+# a 542-frame 18.085s clip -> 544/30 = 18.133s -> ~1.5 trailing BLACK frames after
+# the a-roll stream ends). The true a-roll duration is authoritative: clamp to
+# min(matte frames / fps, source duration).
+MATTE_DUR="$(awk "BEGIN{printf \"%.3f\", $(ls "$PROJECT/frames_fg" | wc -l)/$FPS}")"
+SRC_DUR="$(ffprobe -v error -show_entries format=duration -of csv=p=0 "$PROJECT/source.mp4" 2>/dev/null || true)"
+if [[ -n "${SRC_DUR:-}" ]]; then
+  MATTE_DUR="$(awk "BEGIN{m=$MATTE_DUR; s=$SRC_DUR; printf \"%.3f\", (s>0 && s<m) ? s : m}")"
+fi
+echo "[render] clamp output to source/matte length: ${MATTE_DUR}s"
+
+# Bug-1 guard: the background plate ($BG) must be at least the matte/source length,
+# else the tail (where the bg ran out but the matte continues) shows ONLY the
+# foreground subject on black. Cinematic auto-fixes this (make-composition sets the
+# canvas = source length); this catches a hand-authored Standard duration set to the
+# last-caption time instead of the clip length. Clamp to the bg length so we never
+# ship the only-foreground tail, and tell the author the real fix.
+if [[ -f "$BG" ]]; then
+  BG_DUR="$(ffprobe -v error -show_entries format=duration -of default=nokey=1:noprint_wrappers=1 "$BG" 2>/dev/null | tr -dc '0-9.')"
+  if [[ -n "$BG_DUR" ]] && awk "BEGIN{exit !($BG_DUR < $MATTE_DUR - 0.3)}"; then
+    echo "[render] ⚠ background plate is ${BG_DUR}s but the clip is ${MATTE_DUR}s — the composition is shorter than the footage." >&2
+    echo "         The tail would show ONLY the foreground subject on black. FIX: set the composition" >&2
+    echo "         duration to the SOURCE clip length (data-duration on #root/#a-roll); captions may still" >&2
+    echo "         end earlier. Clamping output to ${BG_DUR}s for now to avoid the broken tail." >&2
+    MATTE_DUR="$BG_DUR"
+  fi
+fi
+
+# ─────────────────────────────────────────────────────────────────────────────
+# STANDARD mode (rail + embed) — detected by rail.html.
+#   $BG = index.html rendered (source video + the embed climax).
+#   (1) overlay the subject matte so the subject occludes the climax (embed = behind).
+#   (2) render rail.html → transparent WebM (the verbatim rail).
+#   (3) alpha-composite the rail IN FRONT so it is never occluded (rail = on top).
+# The existing Cinematic paths below are untouched.
+if [[ -f "$PROJECT/rail.html" ]]; then
+  MATTED="$PROJECT/_matted.mp4"
+  if [[ "$CAPTION_LAYER" == "fg" ]]; then
+    # caption_layer:fg — the climax sits IN FRONT of the subject (no behind-subject
+    # embed possible, e.g. a frame-filling 9:16 subject). bg_plus_caps already has the
+    # climax drawn over the video, so we SKIP the matte overlay (which would push the
+    # subject back in front of it). The rail still overlays on top below.
+    echo "[render] STANDARD (rail + FRONT climax) — caption_layer=fg, matte overlay skipped (${W}x${H})"
+    cp "$BG" "$MATTED"
+  else
+    echo "[render] STANDARD (rail + embed) — embed behind subject, rail alpha-overlaid in front (${W}x${H})"
+    ffmpeg -y -i "$BG" \
+      -framerate "$FPS" -i "$PROJECT/frames_fg/f_%04d.png" \
+      -filter_complex "[1:v]scale=${W}:${H},format=yuva420p[m];[0:v][m]overlay=format=auto[v]" \
+      -map "[v]" -map 0:a -r "$FPS" -t "$MATTE_DUR" -c:v libx264 -crf 11 -preset medium -c:a copy "$MATTED"
+  fi
+
+  # rail.webm was already rendered IN PARALLEL with the base pass above.
+  RAIL_WEBM="$PROJECT/rail.webm"
+  [[ -f "$RAIL_WEBM" ]] || { echo "[render] rail.webm missing (parallel rail pass failed?)" >&2; exit 1; }
+
+  # alpha-overlay the transparent rail in front of the matted video (force vp9
+  # decode so the WebM alpha plane is honoured by overlay)
+  ffmpeg -y -i "$MATTED" -c:v libvpx-vp9 -i "$RAIL_WEBM" \
+    -filter_complex "[0:v][1:v]overlay=format=auto[v]" \
+    -map "[v]" -map 0:a -r "$FPS" -t "$MATTE_DUR" -c:v libx264 -crf 11 -preset medium -c:a copy "$FINAL"
+  rm -f "$MATTED"
+  if [[ -s "$GATES" ]]; then echo "[render] ── gates ──"; sed 's/^/[render]   /' "$GATES"; fi
+echo "[render] done → $FINAL"
+  exit 0
+fi
+
+# Decide composite mode:
+#  - If make-composition emitted index_fg.html (any group has layer:fg),
+#    use hybrid regardless of plan-level caption_layer.
+#  - Else if caption_layer=fg globally, skip matte.
+#  - Else (default), matte embed.
+if [[ -f "$PROJECT/index_fg.html" ]]; then
+  # Hybrid: bg_plus_caps and fg_caps were both rendered above in parallel.
+  # Now composite: bg_plus_caps + matte (subject on top) + fg_caps (screen).
+  FG_CAPS="$PROJECT/fg_caps.mp4"
+  echo "[render] hybrid — composite (bg_plus_caps + matte + fg_caps[screen blend])"
+  # fg_caps is bright caption on pure black. blend=screen makes it behave
+  # like CSS mix-blend-mode: screen on the matted video — captions pick up
+  # scene luminance, NOT a flat opaque overlay (which looks sticker-like).
+  # Use rgb format to avoid YUV-space color drift, then convert back for libx264.
+  ffmpeg -y -i "$BG" \
+    -framerate "$FPS" -i "$PROJECT/frames_fg/f_%04d.png" \
+    -i "$FG_CAPS" \
+    -filter_complex "[1:v]scale=${W}:${H},format=yuva420p[matte];[0:v][matte]overlay=format=auto,format=gbrp[matted];[2:v]format=gbrp[fg];[matted][fg]blend=all_mode=screen,format=yuv420p[v]" \
+    -map "[v]" -map 0:a \
+    -r "$FPS" -t "$MATTE_DUR" -c:v libx264 -crf 12 -preset medium -c:a copy \
+    "$FINAL"
+elif [[ "$CAPTION_LAYER" == "fg" ]]; then
+  # Global FG mode: skip matte overlay entirely. bg_plus_caps.mp4 already
+  # has captions on top of a-roll. Re-encode for consistency.
+  echo "[render] fg mode (global) — skipping matte, re-encoding ${W}x${H}"
+  ffmpeg -y -i "$BG" \
+    -r "$FPS" -t "$MATTE_DUR" -c:v libx264 -crf 12 -preset medium -c:a copy \
+    "$FINAL"
+else
+  echo "[render] bg mode — overlay matte (${W}x${H})"
+  ffmpeg -y -i "$BG" \
+    -framerate "$FPS" -i "$PROJECT/frames_fg/f_%04d.png" \
+    -filter_complex "[1:v]scale=${W}:${H},format=yuva420p[fg];[0:v][fg]overlay=format=auto[v]" \
+    -map "[v]" -map 0:a \
+    -r "$FPS" -t "$MATTE_DUR" -c:v libx264 -crf 12 -preset medium -c:a copy \
+    "$FINAL"
+fi
+
+if [[ -s "$GATES" ]]; then echo "[render] ── gates ──"; sed 's/^/[render]   /' "$GATES"; fi
+echo "[render] done → $FINAL"
diff --git a/.claude/skills-media/embedded-captions/scripts/render-theme.sh b/.claude/skills-media/embedded-captions/scripts/render-theme.sh
new file mode 100644
index 000000000..68a3b42ff
--- /dev/null
+++ b/.claude/skills-media/embedded-captions/scripts/render-theme.sh
@@ -0,0 +1,34 @@
+#!/usr/bin/env bash
+# render-theme.sh — compile + render + plate-reaction for THEME mode projects.
+#   bash render-theme.sh <project-dir>
+# Project needs: theme.json, transcript.json, source.mp4, frames_fg/, matte.fps
+# Output: final_fx.mp4 (final.mp4 = before plate reaction)
+set -euo pipefail
+PROJECT="${1:?usage: render-theme.sh <project-dir>}"
+PROJECT="$(cd "$PROJECT" && pwd)"
+SD="$(cd "$(dirname "${BASH_SOURCE[0]}")" && pwd)"
+
+node "$SD/make-theme.cjs" "$PROJECT"
+# Gate honesty (cold-start E2E finding): theme mode enforces word timing at
+# COMPILE time (sequential transcript matcher + verbatim completeness gate in
+# make-theme.cjs — a mistimed/missing word is a compile error, not a render
+# warning). The pixel occlusion gate is Cinematic-only; themes place heroes
+# scene-aware (safe-zones) and are covered by overflow + rail-climax + the
+# PAGEERROR gate below.
+echo "[render-theme] gates: timing PASS (compile-enforced verbatim matcher)"
+echo "[render-theme] gates: occlusion = scene-aware placement (pixel gate is Cinematic-only)"
+RLOG="$PROJECT/_render-theme.log"
+bash "$SD/render-and-composite.sh" "$PROJECT" 2>&1 | tee "$RLOG"
+# GATE: a JS error in either generated layer silently yields a blank caption
+# layer while every downstream gate still passes — fail loudly instead.
+if grep -q "PAGEERROR" "$RLOG"; then
+  echo "[render-theme] FAIL — Browser PAGEERROR in a generated layer (see $RLOG)." >&2
+  echo "               The caption timeline did not build; the output is missing captions." >&2
+  exit 2
+fi
+if [[ -f "$PROJECT/_postfx.sh" ]]; then
+  bash "$PROJECT/_postfx.sh"
+else
+  cp "$PROJECT/final.mp4" "$PROJECT/final_fx.mp4"
+fi
+echo "[render-theme] done → $PROJECT/final_fx.mp4   (DELIVERABLE: final_fx.mp4; final.mp4 is the pre-plate-reaction cut)"
diff --git a/.claude/skills-media/embedded-captions/scripts/safe-zones.cjs b/.claude/skills-media/embedded-captions/scripts/safe-zones.cjs
new file mode 100644
index 000000000..d055619e2
--- /dev/null
+++ b/.claude/skills-media/embedded-captions/scripts/safe-zones.cjs
@@ -0,0 +1,813 @@
+#!/usr/bin/env node
+/*
+ * safe-zones.cjs — PRECOMPUTE where captions can safely go, from the subject matte.
+ *
+ *   node safe-zones.cjs <project-dir>            → safe-zones.json (global + per-sentence windows) + summary
+ *   node safe-zones.cjs <project-dir> <in> <out> → just that time window's zones (ad-hoc query)
+ *
+ * The inverse of check-occlusion: read the silhouette FIRST and hand the author the
+ * clean regions + an embed-vs-fg verdict, so layout is right the first time instead of
+ * after N occlusion-failure rounds.
+ *
+ * Uses the per-pixel ALPHA matte (not a bounding box): a cell counts as subject only
+ * where the silhouette actually is, so the empty pocket beside the head / above the
+ * shoulders stays FREE (a bbox would wrongly claim it). The subject MOVES, so zones are
+ * computed PER TIME WINDOW (the union over just that window's frames), not one global box.
+ */
+const path = require("path");
+const fs = require("fs");
+const os = require("os");
+
+const THRESH = 30 / 255; // a cell is "subject" if ≥12% covered at any sampled frame in the window
+const SAMPLES = 48; // frames cached across the clip (windows aggregate the cached grids)
+
+const HF_ROOTS = [
+  process.env.HYPERFRAMES_ROOT,
+  path.resolve(__dirname, "../../.."),
+  path.join(os.homedir(), "Downloads", "hyperframes"),
+].filter(Boolean);
+let sharp = null;
+for (const root of HF_ROOTS) {
+  const cands = [path.join(root, "node_modules", "sharp")];
+  const bunDir = path.join(root, "node_modules", ".bun");
+  try {
+    if (fs.existsSync(bunDir))
+      for (const d of fs.readdirSync(bunDir))
+        if (d.startsWith("sharp@")) cands.push(path.join(bunDir, d, "node_modules", "sharp"));
+  } catch {}
+  for (const c of cands) {
+    try {
+      if (fs.existsSync(c)) {
+        sharp = require(c);
+        break;
+      }
+    } catch {}
+  }
+  if (sharp) break;
+}
+
+// largest all-clear (1) rectangle within [c0,c1)×[r0,r1), in CELL units
+function largestRect(safe, GW, c0, c1, r0, r1) {
+  const cols = c1 - c0;
+  const heights = new Array(cols).fill(0);
+  let best = { area: 0, x: 0, y: 0, w: 0, h: 0 };
+  for (let r = r0; r < r1; r++) {
+    for (let cc = 0; cc < cols; cc++) heights[cc] = safe[r * GW + (c0 + cc)] ? heights[cc] + 1 : 0;
+    const st = [];
+    for (let cc = 0; cc <= cols; cc++) {
+      const h = cc < cols ? heights[cc] : 0;
+      let start = cc;
+      while (st.length && st[st.length - 1].h >= h) {
+        const top = st.pop();
+        const area = top.h * (cc - top.i);
+        if (area > best.area)
+          best = { area, x: c0 + top.i, y: r - top.h + 1, w: cc - top.i, h: top.h };
+        start = top.i;
+      }
+      st.push({ i: start, h });
+    }
+  }
+  return best;
+}
+
+// turn a max-coverage grid into {coverage, subject, zones, recommendation}
+function analyze(occ, GW, GH, W, H, lum, lumSeries) {
+  const occCell = new Uint8Array(GW * GH);
+  for (let c = 0; c < GW * GH; c++) occCell[c] = occ[c] >= THRESH ? 1 : 0;
+  const safe = new Uint8Array(GW * GH); // 1-cell dilation margin around the silhouette
+  for (let y = 0; y < GH; y++)
+    for (let x = 0; x < GW; x++) {
+      let o = 0;
+      for (let dy = -1; dy <= 1 && !o; dy++)
+        for (let dx = -1; dx <= 1 && !o; dx++) {
+          const nx = x + dx,
+            ny = y + dy;
+          if (nx >= 0 && nx < GW && ny >= 0 && ny < GH && occCell[ny * GW + nx]) o = 1;
+        }
+      safe[y * GW + x] = o ? 0 : 1;
+    }
+  const occupied = occCell.reduce((a, b) => a + b, 0);
+  const coverage = occupied / (GW * GH);
+  let colMin = GW,
+    colMax = -1,
+    rowMin = GH,
+    rowMax = -1;
+  for (let x = 0; x < GW; x++)
+    for (let y = 0; y < GH; y++)
+      if (occCell[y * GW + x]) {
+        if (x < colMin) colMin = x;
+        if (x > colMax) colMax = x;
+        if (y < rowMin) rowMin = y;
+        if (y > rowMax) rowMax = y;
+      }
+  if (colMax < 0) {
+    colMin = 0;
+    colMax = -1;
+    rowMin = 0;
+    rowMax = -1;
+  }
+  const clearerSide = colMin >= GW - 1 - colMax ? "left" : "right";
+  const cellW = W / GW,
+    cellH = H / GH;
+  // HERO anchor — where the ONE big promoted word should sit: ON the subject (centered,
+  // crossing it so the head/torso occludes the middle). The OPPOSITE of the clean zones
+  // above (those are for narration). A wide band ≈ centered on the subject, vertically
+  // crossing the head/upper torso. Only meaningful when there IS a subject.
+  let heroAnchor = null;
+  if (colMax >= 0) {
+    const subjCx = ((colMin + colMax + 1) / 2 / GW) * 100;
+    const subjWpct = ((colMax - colMin + 1) / GW) * 100;
+    const yTop = (rowMin / GH) * 100,
+      yBot = ((rowMax + 1) / GH) * 100;
+    const wPct = Math.round(Math.min(92, Math.max(58, subjWpct + 26)));
+    const xPct = Math.round(Math.min(98 - wPct, Math.max(2, subjCx - wPct / 2)));
+    const yPct = Math.round(yTop + (yBot - yTop) * 0.12); // band crosses the head / upper torso
+    let bandLuma = null;
+    if (lum) {
+      const y0 = Math.round((yPct / 100) * GH),
+        y1 = Math.min(GH, y0 + Math.max(2, Math.round(GH * 0.14)));
+      const x0 = Math.round((xPct / 100) * GW),
+        x1 = Math.min(GW, Math.round(((xPct + wPct) / 100) * GW));
+      // luma of the BACKGROUND cells only — that's where the hero's glyphs are visible
+      // (the subject-occluded middle doesn't show text; averaging it in hides washout).
+      let s2 = 0,
+        n = 0;
+      for (let y = y0; y < y1; y++)
+        for (let x = x0; x < x1; x++) {
+          if (occCell[y * GW + x]) continue;
+          s2 += lum[y * GW + x];
+          n++;
+        }
+      bandLuma = n ? Math.round(s2 / n) : null;
+    }
+    heroAnchor = {
+      centerXPct: +subjCx.toFixed(1),
+      plane: { xPct, yPct, wPct, align: "center" },
+      ...(bandLuma != null ? { bandLuma, washoutRisk: bandLuma > 175 } : {}),
+      note:
+        "Place the ONE big hero here (centered on the subject); the head/torso occludes its middle (~30-55%) — that is the embed. Do NOT put the hero in a clean zone." +
+        (bandLuma != null && bandLuma > 175
+          ? " ⚠ BAND IS BRIGHT (luma " +
+            bandLuma +
+            "): cream/screen text will wash out — lower the hero onto the darker subject body, or use a template/mode with opaque text."
+          : ""),
+    };
+  }
+  const zoneLuma = (r) => {
+    if (!lum || r.area === 0) return null;
+    let s2 = 0,
+      n = 0;
+    for (let y = r.y; y < r.y + r.h; y++)
+      for (let x = r.x; x < r.x + r.w; x++) {
+        s2 += lum[y * GW + x];
+        n++;
+      }
+    return n ? Math.round(s2 / n) : null;
+  };
+  // a TIME-AVERAGED map walks a moving minefield: a dark wall swept by a bright
+  // moving object (handheld drift, screens) averages "clean" while peaking hot.
+  // peakLuma = p95 of the zone's per-sample mean over the window.
+  const zoneLumaPeak = (r) => {
+    if (!lumSeries || !lumSeries.length || r.area === 0) return null;
+    const means = lumSeries
+      .map((Lg) => {
+        let s2 = 0,
+          n = 0;
+        for (let y = r.y; y < r.y + r.h; y++)
+          for (let x = r.x; x < r.x + r.w; x++) {
+            s2 += Lg[y * GW + x];
+            n++;
+          }
+        return n ? s2 / n : 0;
+      })
+      .sort((a, b) => a - b);
+    return Math.round(means[Math.max(0, Math.ceil(means.length * 0.95) - 1)]);
+  };
+  const toZone = (r) =>
+    r.area === 0
+      ? null
+      : {
+          xPct: +((r.x / GW) * 100).toFixed(1),
+          yPct: +((r.y / GH) * 100).toFixed(1),
+          wPct: +((r.w / GW) * 100).toFixed(1),
+          hPct: +((r.h / GH) * 100).toFixed(1),
+          areaPct: +(((r.w * r.h) / (GW * GH)) * 100).toFixed(1),
+          px: {
+            x: Math.round(r.x * cellW),
+            y: Math.round(r.y * cellH),
+            w: Math.round(r.w * cellW),
+            h: Math.round(r.h * cellH),
+          },
+          ...(zoneLuma(r) != null
+            ? {
+                meanLuma: zoneLuma(r),
+                bright: zoneLuma(r) > 180,
+                ...(zoneLumaPeak(r) != null ? { peakLuma: zoneLumaPeak(r) } : {}),
+              }
+            : {}),
+        };
+  const zones = {
+    largest: toZone(largestRect(safe, GW, 0, GW, 0, GH)),
+    left: toZone(largestRect(safe, GW, 0, Math.round(GW / 2), 0, GH)),
+    right: toZone(largestRect(safe, GW, Math.round(GW / 2), GW, 0, GH)),
+    top: toZone(largestRect(safe, GW, 0, GW, 0, Math.max(2, Math.round(GH * 0.38)))),
+  };
+  // HUGGING zones — clean strips that ABUT the silhouette (the embed aesthetic wants
+  // text NEAR the subject, not parked in the farthest corner). Grown outward from the
+  // subject's edge at upper-body height; prefer these for narration.
+  const hug = (side) => {
+    if (colMax < 0) return null;
+    const pad = Math.max(1, Math.round(GW * 0.02));
+    const y0 = rowMin,
+      y1 = Math.min(GH, rowMin + Math.max(3, Math.round((rowMax - rowMin + 1) * 0.45)));
+    let x0, x1;
+    if (side === "right") {
+      x0 = Math.min(GW - 1, colMax + 1 + pad);
+      x1 = GW - pad;
+    } else {
+      x1 = Math.max(1, colMin - pad);
+      x0 = pad;
+    }
+    if (x1 - x0 < Math.round(GW * 0.1)) return null;
+    // shrink until actually clean (≤8% occupied cells)
+    let occN = 0,
+      tot = 0;
+    for (let y = y0; y < y1; y++)
+      for (let x = x0; x < x1; x++) {
+        tot++;
+        if (occCell[y * GW + x]) occN++;
+      }
+    if (tot === 0 || occN / tot > 0.08) return null;
+    const r = { x: x0, y: y0, w: x1 - x0, h: y1 - y0, area: (x1 - x0) * (y1 - y0) };
+    const z2 = toZone(r);
+    // GLYPHS must hug, not just the plane: in a wide column, text aligned to the far
+    // edge parks the words a third of the frame away from the subject. Align TOWARD
+    // the silhouette: right-side column → text-align:left (text starts beside the
+    // subject); left-side column → text-align:right.
+    if (z2) z2.align = side === "right" ? "left" : "right";
+    return z2;
+  };
+  zones.hugLeft = hug("left");
+  zones.hugRight = hug("right");
+  // HERO BAND PROFILE — per-height predicted occlusion of a centered hero band. The hero
+  // WANTS ~30–55% (occlusion IS the embed); fg is the LAST resort, only when no height
+  // achieves ≤62%. Even an 88%-coverage frame usually has a feasible band over the hairline.
+  let heroBands = null;
+  if (colMax >= 0) {
+    const bandH = Math.max(2, Math.round(GH * 0.13));
+    const hx0 = Math.round(((heroAnchor ? heroAnchor.plane.xPct : 8) / 100) * GW);
+    const hx1 = Math.min(
+      GW,
+      Math.round(((heroAnchor ? heroAnchor.plane.xPct + heroAnchor.plane.wPct : 92) / 100) * GW),
+    );
+    const profile = [];
+    for (let y0 = 0; y0 + bandH <= GH; y0 += Math.max(1, Math.round(GH * 0.02))) {
+      let n = 0,
+        occN = 0,
+        lsum = 0;
+      for (let y = y0; y < y0 + bandH; y++)
+        for (let x = hx0; x < hx1; x++) {
+          n++;
+          if (occCell[y * GW + x]) occN++;
+          if (lum) lsum += lum[y * GW + x];
+        }
+      profile.push({
+        topPct: +((y0 / GH) * 100).toFixed(1),
+        occPct: +((occN / n) * 100).toFixed(1),
+        ...(lum ? { bgLuma: Math.round(lsum / n) } : {}),
+      });
+    }
+    const ok = profile.filter((b) => b.occPct >= 12 && b.occPct <= 62);
+    const best = (ok.length ? ok : profile).reduce((a, b) =>
+      Math.abs(b.occPct - 40) < Math.abs(a.occPct - 40) ? b : a,
+    );
+    heroBands = { feasible: ok.length > 0, best, profile };
+  }
+  const big = zones.largest;
+  const embeddable = !!big && big.areaPct >= 8 && big.hPct >= 10 && big.wPct >= 18;
+  return {
+    coverage: +(coverage * 100).toFixed(1),
+    subject: {
+      colMinPct: +((colMin / GW) * 100).toFixed(1),
+      colMaxPct: +(((colMax + 1) / GW) * 100).toFixed(1),
+      clearerSide,
+    },
+    zones,
+    heroAnchor,
+    heroBands,
+    recommendation: embeddable ? "embed" : "fg",
+  };
+}
+
+// ── SCENE OPTICS + PALETTE (v2) ──────────────────────────────────────────────
+// Deterministic scene measurements that drive the DNA tokens, so "design that fits
+// the scene" is a pipeline product, not agent inspiration:
+//   palette  — dominant scene colors + a READABLE accent suggestion (sampled, then
+//              clamped to usable saturation/lightness) + warm/cool temperature
+//   optics   — background vs subject sharpness (Laplacian proxy) → suggested text
+//              blur so embed type matches the scene's depth-of-field
+//   lighting — bright-side estimate → contact-shadow direction for embed type
+
+function rgb2hsv(r, g, b) {
+  r /= 255;
+  g /= 255;
+  b /= 255;
+  const mx = Math.max(r, g, b),
+    mn = Math.min(r, g, b),
+    d = mx - mn;
+  let h = 0;
+  if (d > 0) {
+    if (mx === r) h = ((g - b) / d) % 6;
+    else if (mx === g) h = (b - r) / d + 2;
+    else h = (r - g) / d + 4;
+    h *= 60;
+    if (h < 0) h += 360;
+  }
+  return { h, s: mx === 0 ? 0 : d / mx, v: mx };
+}
+function hsv2hex(h, s, v) {
+  const c = v * s,
+    x = c * (1 - Math.abs(((h / 60) % 2) - 1)),
+    m = v - c;
+  let [r, g, b] =
+    h < 60
+      ? [c, x, 0]
+      : h < 120
+        ? [x, c, 0]
+        : h < 180
+          ? [0, c, x]
+          : h < 240
+            ? [0, x, c]
+            : h < 300
+              ? [x, 0, c]
+              : [c, 0, x];
+  const f = (n) =>
+    Math.round((n + m) * 255)
+      .toString(16)
+      .padStart(2, "0");
+  return `#${f(r)}${f(g)}${f(b)}`;
+}
+
+// dominant colors + accent suggestion from the BACKGROUND cells of a mid frame
+async function scenePalette(bgPath, occCell, GW, GH) {
+  const { data, info } = await sharp(bgPath)
+    .resize(GW, GH, { fit: "fill" })
+    .removeAlpha()
+    .raw()
+    .toBuffer({ resolveWithObject: true });
+  const ch = info.channels;
+  const cells = [];
+  for (let c = 0; c < GW * GH; c++) {
+    if (occCell && occCell[c]) continue; // background only
+    cells.push([data[c * ch], data[c * ch + 1], data[c * ch + 2]]);
+  }
+  if (!cells.length) return null;
+  // dominant: quantize to 3 bits/channel, top buckets by count
+  const buckets = new Map();
+  for (const [r, g, b] of cells) {
+    const k = ((r >> 5) << 6) | ((g >> 5) << 3) | (b >> 5);
+    const e = buckets.get(k) || { n: 0, r: 0, g: 0, b: 0 };
+    e.n++;
+    e.r += r;
+    e.g += g;
+    e.b += b;
+    buckets.set(k, e);
+  }
+  const hex = (e) =>
+    "#" +
+    [e.r, e.g, e.b]
+      .map((x) =>
+        Math.round(x / e.n)
+          .toString(16)
+          .padStart(2, "0"),
+      )
+      .join("");
+  const dominant = [...buckets.values()]
+    .sort((a, b) => b.n - a.n)
+    .slice(0, 3)
+    .map((e) => ({ hex: hex(e), sharePct: +((e.n / cells.length) * 100).toFixed(1) }));
+  // chromatic accent: hue histogram over saturated cells, weighted s·v
+  const bins = Array.from({ length: 12 }, () => ({ w: 0, h: 0, s: 0, v: 0, n: 0 }));
+  let warmW = 0,
+    coolW = 0;
+  for (const [r, g, b] of cells) {
+    const { h, s, v } = rgb2hsv(r, g, b);
+    if (h <= 90 || h >= 330) warmW += s * v;
+    else if (h >= 150 && h <= 300) coolW += s * v;
+    if (s < 0.18 || v < 0.12 || v > 0.97) continue;
+    const bi = Math.floor(h / 30) % 12,
+      w = s * v;
+    const B = bins[bi];
+    B.w += w;
+    B.h += h * w;
+    B.s += s * w;
+    B.v += v * w;
+    B.n++;
+  }
+  const top = bins.reduce((a, b) => (b.w > a.w ? b : a));
+  let accent = null;
+  if (top.w > 0.5 && top.n >= 3) {
+    const h = top.h / top.w,
+      s = top.s / top.w,
+      v = top.v / top.w;
+    // clamp to a readable accent: saturated enough to read as a choice, light enough to sit on video
+    accent = hsv2hex(
+      h,
+      Math.min(0.78, Math.max(0.5, s * 1.2)),
+      Math.min(0.8, Math.max(0.55, v * 1.15)),
+    );
+  }
+  const temperature = warmW > coolW * 1.25 ? "warm" : coolW > warmW * 1.25 ? "cool" : "neutral";
+  return { dominant, accentSuggestion: accent, temperature };
+}
+
+// Laplacian-stdev sharpness proxy of a region crop (full-res)
+async function regionSharpness(imgPath, rect, W, H) {
+  const x = Math.max(0, Math.min(W - 2, Math.round(rect.x))),
+    y = Math.max(0, Math.min(H - 2, Math.round(rect.y)));
+  const w = Math.max(2, Math.min(W - x, Math.round(rect.w))),
+    h = Math.max(2, Math.min(H - y, Math.round(rect.h)));
+  // two passes: crop to a buffer FIRST, then convolve+stats on the crop — sharp's
+  // internal pipeline ordering otherwise convolves/stats the full frame and the two
+  // regions measure identical.
+  const crop = await sharp(imgPath)
+    .extract({ left: x, top: y, width: w, height: h })
+    .png()
+    .toBuffer();
+  const st = await sharp(crop)
+    .greyscale()
+    .convolve({ width: 3, height: 3, kernel: [0, 1, 0, 1, -4, 1, 0, 1, 0], scale: 1, offset: 128 })
+    .stats();
+  return st.channels[0].stdev;
+}
+
+async function sceneOptics(project, bgPath, fgPath, zones, subjectBox, W, H) {
+  let bgSharp = null,
+    subjSharp = null;
+  const bigZone = zones && zones.largest && zones.largest.px;
+  try {
+    if (bigZone && bigZone.w >= 64 && bigZone.h >= 64)
+      bgSharp = await regionSharpness(bgPath, bigZone, W, H);
+  } catch {}
+  try {
+    if (subjectBox && subjectBox.w >= 64)
+      subjSharp = await regionSharpness(bgPath, subjectBox, W, H);
+  } catch {}
+  let suggestedTextBlurPx = 0,
+    ratio = null;
+  if (bgSharp != null && subjSharp != null && subjSharp > 1) {
+    ratio = +(bgSharp / subjSharp).toFixed(3);
+    // strong bokeh → text in that depth plane should soften to match
+    suggestedTextBlurPx = ratio < 0.35 ? 1.6 : ratio < 0.55 ? 1.0 : ratio < 0.8 ? 0.5 : 0;
+  }
+  return {
+    bgSharpness: bgSharp != null ? +bgSharp.toFixed(2) : null,
+    subjSharpness: subjSharp != null ? +subjSharp.toFixed(2) : null,
+    sharpnessRatio: ratio,
+    suggestedTextBlurPx,
+  };
+}
+
+// bright-side estimate from the luminance grid → contact-shadow vector (shadow falls AWAY from light)
+function sceneLighting(lum, occCell, GW, GH) {
+  if (!lum) return null;
+  let sw = 0,
+    sx = 0,
+    sy = 0,
+    n = 0,
+    mean = 0;
+  for (let c = 0; c < GW * GH; c++) {
+    if (!occCell[c]) {
+      mean += lum[c];
+      n++;
+    }
+  }
+  if (!n) return null;
+  mean /= n;
+  for (let y = 0; y < GH; y++)
+    for (let x = 0; x < GW; x++) {
+      const c = y * GW + x;
+      if (occCell[c]) continue;
+      const w = Math.max(0, lum[c] - mean);
+      sw += w;
+      sx += w * (x / GW - 0.5);
+      sy += w * (y / GH - 0.5);
+    }
+  if (sw < 1) return { lightFrom: "flat", shadow: { dx: 0, dy: 3 } };
+  const lx = sx / sw,
+    ly = sy / sw; // light centroid offset from center, −0.5..0.5
+  const mag = Math.hypot(lx, ly);
+  if (mag < 0.04) return { lightFrom: "frontal", shadow: { dx: 0, dy: 3 } };
+  // shadow direction = opposite the light, scaled to a subtle px offset
+  const s = Math.min(1, mag / 0.25);
+  const dx = Math.round((-lx / mag) * 4 * s),
+    dy = Math.round(Math.max(1, (-ly / mag) * 4 * s + 2));
+  const compass =
+    Math.abs(lx) > Math.abs(ly) * 1.8
+      ? lx > 0
+        ? "right"
+        : "left"
+      : Math.abs(ly) > Math.abs(lx) * 1.8
+        ? ly > 0
+          ? "below"
+          : "above"
+        : `${ly > 0 ? "lower" : "upper"}-${lx > 0 ? "right" : "left"}`;
+  return { lightFrom: compass, shadow: { dx, dy } };
+}
+
+// split the transcript into sentence windows (punctuation, or a > 0.7s gap)
+function sentenceWindows(project) {
+  const tp = path.join(project, "transcript.json");
+  if (!fs.existsSync(tp)) return [];
+  let words;
+  try {
+    words = (JSON.parse(fs.readFileSync(tp, "utf8")).words || []).filter((w) => w && "start" in w);
+  } catch {
+    return [];
+  }
+  const out = [];
+  let cur = [];
+  for (let i = 0; i < words.length; i++) {
+    cur.push(words[i]);
+    const w = words[i],
+      nx = words[i + 1];
+    const ends = /[.!?…]$/.test((w.text || "").trim());
+    const gap = nx ? nx.start - w.end > 0.7 : true;
+    if (ends || gap || !nx) {
+      if (cur.length)
+        out.push({
+          in: +cur[0].start.toFixed(2),
+          out: +cur[cur.length - 1].end.toFixed(2),
+          text: cur.map((x) => x.text).join(" "),
+        });
+      cur = [];
+    }
+  }
+  return out;
+}
+
+async function main() {
+  const project = path.resolve(process.argv[2] || "");
+  if (!process.argv[2]) {
+    console.error("usage: safe-zones.cjs <project-dir> [in out]");
+    process.exit(1);
+  }
+  const fgDir = path.join(project, "frames_fg");
+  if (!fs.existsSync(fgDir)) {
+    console.error(`[safe-zones] no ${fgDir} — run matte.cjs first`);
+    process.exit(2);
+  }
+  if (!sharp) {
+    console.error("[safe-zones] sharp unavailable — set HYPERFRAMES_ROOT");
+    process.exit(0);
+  }
+
+  const frames = fs
+    .readdirSync(fgDir)
+    .filter((f) => /\.png$/i.test(f))
+    .sort();
+  if (!frames.length) {
+    console.error("[safe-zones] no PNG frames");
+    process.exit(2);
+  }
+  const meta = await sharp(path.join(fgDir, frames[0])).metadata();
+  const W = meta.width,
+    H = meta.height;
+  const CELL = Math.max(W, H) / 48;
+  const GW = Math.max(8, Math.round(W / CELL)),
+    GH = Math.max(8, Math.round(H / CELL));
+  let fps = 24;
+  try {
+    const f = parseFloat(
+      String(fs.readFileSync(path.join(project, "matte.fps"), "utf8")).replace(/[^\d.]/g, ""),
+    );
+    if (f > 0) fps = f;
+  } catch {}
+
+  const bgDir = path.join(project, "frames_bg");
+  const hasBg = fs.existsSync(bgDir);
+  // cache evenly-sampled frame grids once (each = per-cell avg subject alpha 0..1,
+  // plus per-cell mean LUMINANCE from frames_bg — bright zones wash out cream/screen text)
+  const sampleIdx = [
+    ...new Set(
+      Array.from({ length: SAMPLES }, (_, i) =>
+        Math.min(frames.length - 1, Math.round((i / (SAMPLES - 1)) * (frames.length - 1))),
+      ),
+    ),
+  ];
+  const grids = [];
+  for (const i of sampleIdx) {
+    const { data, info } = await sharp(path.join(fgDir, frames[i]))
+      .resize(GW, GH, { fit: "fill" })
+      .raw()
+      .toBuffer({ resolveWithObject: true });
+    const ch = info.channels,
+      g = new Float32Array(GW * GH);
+    for (let c = 0; c < GW * GH; c++) g[c] = (ch >= 4 ? data[c * ch + 3] : 255) / 255;
+    let lum = null;
+    if (hasBg && fs.existsSync(path.join(bgDir, frames[i]))) {
+      const { data: bd, info: bi } = await sharp(path.join(bgDir, frames[i]))
+        .resize(GW, GH, { fit: "fill" })
+        .greyscale()
+        .raw()
+        .toBuffer({ resolveWithObject: true });
+      const bch = bi.channels;
+      lum = new Float32Array(GW * GH);
+      for (let c = 0; c < GW * GH; c++) lum[c] = bd[c * bch];
+    }
+    grids.push({ t: i / fps, g, lum });
+  }
+  const lumWindow = (t0, t1) => {
+    const acc = new Float32Array(GW * GH);
+    let n = 0;
+    let inWin = grids.filter((s2) => s2.t >= t0 - 1e-6 && s2.t <= t1 + 1e-6 && s2.lum);
+    if (!inWin.length) inWin = grids.filter((s2) => s2.lum);
+    for (const s2 of inWin) {
+      for (let c = 0; c < GW * GH; c++) acc[c] += s2.lum[c];
+      n++;
+    }
+    if (!n) return null;
+    for (let c = 0; c < GW * GH; c++) acc[c] /= n;
+    return acc;
+  };
+  const lumSeriesWindow = (t0, t1) => {
+    let inWin = grids.filter((s2) => s2.t >= t0 - 1e-6 && s2.t <= t1 + 1e-6 && s2.lum);
+    if (!inWin.length) inWin = grids.filter((s2) => s2.lum);
+    return inWin.map((s2) => s2.lum);
+  };
+  const occWindow = (t0, t1) => {
+    const occ = new Float32Array(GW * GH);
+    let inWin = grids.filter((s) => s.t >= t0 - 1e-6 && s.t <= t1 + 1e-6);
+    if (!inWin.length) {
+      // window between samples → use nearest grid
+      const mid = (t0 + t1) / 2;
+      inWin = [grids.reduce((a, b) => (Math.abs(b.t - mid) < Math.abs(a.t - mid) ? b : a))];
+    }
+    for (const s of inWin) for (let c = 0; c < GW * GH; c++) if (s.g[c] > occ[c]) occ[c] = s.g[c];
+    return occ;
+  };
+
+  // ad-hoc window query
+  const qIn = parseFloat(process.argv[3]),
+    qOut = parseFloat(process.argv[4]);
+  if (Number.isFinite(qIn) && Number.isFinite(qOut)) {
+    const a = analyze(
+      occWindow(qIn, qOut),
+      GW,
+      GH,
+      W,
+      H,
+      lumWindow(qIn, qOut),
+      lumSeriesWindow(qIn, qOut),
+    );
+    console.log(
+      `[safe-zones] window ${qIn}-${qOut}s: ${a.recommendation.toUpperCase()}  coverage ${a.coverage}%  clearer:${a.subject.clearerSide}`,
+    );
+    const z = a.zones;
+    for (const k of ["largest", "left", "right", "top"])
+      if (z[k]) console.log(`   ${k}: ${z[k].wPct}%×${z[k].hPct}% @ (${z[k].xPct}%,${z[k].yPct}%)`);
+    console.log(JSON.stringify({ in: qIn, out: qOut, ...a }));
+    return;
+  }
+
+  const globalOcc = occWindow(-1e9, 1e9);
+  const globalLum = lumWindow(-1e9, 1e9);
+  const global = analyze(globalOcc, GW, GH, W, H, globalLum, lumSeriesWindow(-1e9, 1e9));
+  const windows = sentenceWindows(project).map((s) => {
+    const a = analyze(
+      occWindow(s.in, s.out),
+      GW,
+      GH,
+      W,
+      H,
+      lumWindow(s.in, s.out),
+      lumSeriesWindow(s.in, s.out),
+    );
+    return {
+      in: s.in,
+      out: s.out,
+      text: s.text.slice(0, 48),
+      coverage: a.coverage,
+      recommendation: a.recommendation,
+      clearerSide: a.subject.clearerSide,
+      zones: a.zones,
+    };
+  });
+
+  // ── v2: palette / optics / lighting from the mid frame + global grids ───────
+  let palette = null,
+    optics = null,
+    lighting = null;
+  try {
+    const occCellG = new Uint8Array(GW * GH);
+    for (let c = 0; c < GW * GH; c++) occCellG[c] = globalOcc[c] >= THRESH ? 1 : 0;
+    const midName = frames[Math.floor(frames.length / 2)];
+    const midBg = path.join(bgDir, midName);
+    if (hasBg && fs.existsSync(midBg)) {
+      palette = await scenePalette(midBg, occCellG, GW, GH);
+      // subject bbox in px from the global occupancy grid
+      let cx0 = GW,
+        cx1 = -1,
+        cy0 = GH,
+        cy1 = -1;
+      for (let y = 0; y < GH; y++)
+        for (let x = 0; x < GW; x++)
+          if (occCellG[y * GW + x]) {
+            if (x < cx0) cx0 = x;
+            if (x > cx1) cx1 = x;
+            if (y < cy0) cy0 = y;
+            if (y > cy1) cy1 = y;
+          }
+      const subjectBox =
+        cx1 >= 0
+          ? {
+              x: (cx0 / GW) * W,
+              y: (cy0 / GH) * H,
+              w: ((cx1 - cx0 + 1) / GW) * W,
+              h: ((cy1 - cy0 + 1) / GH) * H,
+            }
+          : null;
+      optics = await sceneOptics(
+        project,
+        midBg,
+        path.join(fgDir, midName),
+        global.zones,
+        subjectBox,
+        W,
+        H,
+      );
+      lighting = sceneLighting(globalLum, occCellG, GW, GH);
+    }
+  } catch (e) {
+    console.error(`[safe-zones] scene optics skipped — ${e.message}`);
+  }
+
+  const out = {
+    width: W,
+    height: H,
+    fps,
+    grid: { cols: GW, rows: GH },
+    ...global,
+    palette,
+    optics,
+    lighting,
+    windows,
+  };
+  fs.writeFileSync(path.join(project, "safe-zones.json"), JSON.stringify(out, null, 2));
+
+  const z = (n, zn) =>
+    zn
+      ? `${n}: ${zn.wPct}%×${zn.hPct}% @ (${zn.xPct}%,${zn.yPct}%) [${zn.areaPct}%${zn.meanLuma != null ? ` · luma ${zn.meanLuma}${zn.bright ? " ⚠BRIGHT" : ""}` : ""}]`
+      : `${n}: —`;
+  console.log(
+    `[safe-zones] ${W}×${H} grid ${GW}×${GH} @ ${fps}fps · GLOBAL coverage ${global.coverage}% · clearer ${global.subject.clearerSide} · verdict ${global.recommendation.toUpperCase()}`,
+  );
+  console.log(
+    `             ${z("largest", global.zones.largest)} | ${z("left", global.zones.left)} | ${z("right", global.zones.right)} | ${z("top", global.zones.top)}`,
+  );
+  if (global.recommendation === "embed") {
+    console.log(
+      `[safe-zones] ✅ EMBED — NARRATION planes go in the clean zones (prefer ${global.subject.clearerSide}/top).`,
+    );
+    if (global.heroAnchor)
+      console.log(
+        `[safe-zones] 🎯 HERO → centered ON the subject: plane ≈ x${global.heroAnchor.plane.xPct}% y${global.heroAnchor.plane.yPct}% w${global.heroAnchor.plane.wPct}% center · BIG (~0.22–0.34·h) · target ~30–55% occlusion${global.heroAnchor.bandLuma != null ? ` · band luma ${global.heroAnchor.bandLuma}${global.heroAnchor.washoutRisk ? " ⚠WASHOUT RISK — see heroAnchor.note" : ""}` : ""}`,
+      );
+    if (global.heroBands)
+      console.log(
+        `[safe-zones] hero bands: best top ${global.heroBands.best.topPct}% (predicted occlusion ${global.heroBands.best.occPct}%) · bg-hero ${global.heroBands.feasible ? "FEASIBLE — keep the hero EMBEDDED (fg is last resort)" : "INFEASIBLE (no band ≤62%) → hero fg"}`,
+      );
+    if (global.zones.hugLeft || global.zones.hugRight)
+      console.log(
+        `[safe-zones] hugging zones (narration belongs HERE, abutting the silhouette): L ${global.zones.hugLeft ? global.zones.hugLeft.wPct + "%×" + global.zones.hugLeft.hPct + "%@x" + global.zones.hugLeft.xPct + "%" + (global.zones.hugLeft.bright ? "⚠bright" : "") : "—"} · R ${global.zones.hugRight ? global.zones.hugRight.wPct + "%×" + global.zones.hugRight.hPct + "%@x" + global.zones.hugRight.xPct + "%" + (global.zones.hugRight.bright ? "⚠bright" : "") : "—"}`,
+      );
+  } else {
+    console.log(
+      `[safe-zones] ⚠ FG — subject fills the frame; use caption_layer:"fg" (no clean region to embed behind).`,
+    );
+  }
+  if (palette)
+    console.log(
+      `[safe-zones] 🎨 palette: dominant ${palette.dominant.map((d) => d.hex).join(" ")} · accent suggestion ${palette.accentSuggestion || "— (no chromatic anchor; use the DNA default)"} · ${palette.temperature}`,
+    );
+  if (optics && optics.sharpnessRatio != null)
+    console.log(
+      `[safe-zones] 🔭 depth: bg/subject sharpness ${optics.sharpnessRatio} → embed text blur ${optics.suggestedTextBlurPx}px${optics.suggestedTextBlurPx ? " (match the scene's depth-of-field)" : " (scene is uniformly sharp)"}`,
+    );
+  if (lighting)
+    console.log(
+      `[safe-zones] 💡 light from ${lighting.lightFrom} → contact shadow offset (${lighting.shadow.dx}px, ${lighting.shadow.dy}px)`,
+    );
+  if (windows.length) {
+    console.log(`[safe-zones] per-sentence windows (place each group using ITS window's zones):`);
+    for (const w of windows)
+      console.log(
+        `   [${w.in}-${w.out}s] ${w.recommendation.toUpperCase()} cov ${w.coverage}% clear:${w.clearerSide}  ${w.zones.largest ? `best ${w.zones.largest.wPct}%×${w.zones.largest.hPct}%@(${w.zones.largest.xPct}%,${w.zones.largest.yPct}%)` : ""}  "${w.text}"`,
+      );
+  }
+  console.log(`[safe-zones] → ${path.join(project, "safe-zones.json")}`);
+}
+main().catch((e) => {
+  console.error(`[safe-zones] (skipped — ${e.message})`);
+  process.exit(0);
+});
diff --git a/.claude/skills-media/embedded-captions/scripts/transcribe.cjs b/.claude/skills-media/embedded-captions/scripts/transcribe.cjs
new file mode 100644
index 000000000..5775d2b82
--- /dev/null
+++ b/.claude/skills-media/embedded-captions/scripts/transcribe.cjs
@@ -0,0 +1,332 @@
+#!/usr/bin/env node
+/*
+ * transcribe.cjs — word-level transcription via hyperframes' native Whisper
+ * (replaces the Python ElevenLabs Scribe path; no Python, no API key).
+ *
+ *   node transcribe.cjs <project-dir> [model] [language]
+ * Reads:  <project>/source.mp4 (audio track)
+ * Writes: <project>/transcript.json  — { text, language_code, words:[{text,start,end,type}] }
+ */
+const path = require("path");
+const fs = require("fs");
+const os = require("os");
+const cp = require("child_process");
+
+function hfRoot() {
+  const roots = [
+    process.env.HYPERFRAMES_ROOT,
+    path.resolve(__dirname, "..", "..", ".."),
+    path.join(os.homedir(), "Downloads", "hyperframes"),
+  ].filter(Boolean);
+  for (const r of roots)
+    if (fs.existsSync(path.join(r, "packages", "cli", "dist", "cli.js"))) return r;
+  console.error("[transcribe] hyperframes CLI not found — set HYPERFRAMES_ROOT");
+  process.exit(3);
+}
+function ensureSource(project) {
+  const src = path.join(project, "source.mp4");
+  if (fs.existsSync(src)) return src;
+  const EXCL = new Set(["final", "bg_plus_caps", "fg_caps", "audio"]);
+  let cands = fs
+    .readdirSync(project)
+    .filter(
+      (f) =>
+        ["mp4", "mov", "webm", "mkv", "m4v"].includes(path.extname(f).slice(1).toLowerCase()) &&
+        !EXCL.has(path.basename(f, path.extname(f))) &&
+        !f.startsWith("index"),
+    )
+    .map((f) => path.join(project, f));
+  let found = cands.sort((a, b) => fs.statSync(b).size - fs.statSync(a).size)[0];
+  if (found) {
+    try {
+      fs.symlinkSync(path.basename(found), src);
+    } catch {
+      fs.copyFileSync(found, src);
+    }
+  }
+  return src;
+}
+function _usableWords(d) {
+  return d && Array.isArray(d.words) && d.words.some((w) => w && "start" in w && "end" in w);
+}
+// Mean loudness of the audio, for the no-speech guard below. Silence → whisper
+// hallucinates (famously "Thank you."), and the decision gate refuses "no speech".
+function meanVolumeDb(audio) {
+  try {
+    // ffmpeg writes volumedetect stats to STDERR — capture it (spawnSync, no throw).
+    const r = cp.spawnSync(
+      "ffmpeg",
+      ["-hide_banner", "-nostats", "-i", audio, "-af", "volumedetect", "-f", "null", "-"],
+      { encoding: "utf8" },
+    );
+    const out = (r.stderr || "") + (r.stdout || "");
+    const m = out.match(/mean_volume:\s*(-?[\d.]+) dB/);
+    return m ? parseFloat(m[1]) : null;
+  } catch {
+    return null;
+  }
+}
+
+// Where does AUDIBLE content end? Whisper hallucinates trailing words over a silent
+// tail (observed: "I'm sorry." repeated over dead air at a clip's end). silencedetect
+// finds a terminal silence running to EOF; words "spoken" inside it are fabricated.
+// Conservative: applause/music read as non-silence, so this fires only on truly dead
+// tails. Returns {speechEnd, total} or null.
+function audibleEnd(audio) {
+  try {
+    const r = cp.spawnSync(
+      "ffmpeg",
+      [
+        "-hide_banner",
+        "-nostats",
+        "-i",
+        audio,
+        "-af",
+        "silencedetect=noise=-35dB:d=0.6",
+        "-f",
+        "null",
+        "-",
+      ],
+      { encoding: "utf8" },
+    );
+    const out = (r.stderr || "") + (r.stdout || "");
+    const durM = out.match(/Duration:\s*(\d+):(\d+):([\d.]+)/);
+    const total = durM ? +durM[1] * 3600 + +durM[2] * 60 + +durM[3] : null;
+    if (total == null) return null;
+    const starts = [...out.matchAll(/silence_start:\s*([\d.]+)/g)].map((x) => +x[1]);
+    const ends = [...out.matchAll(/silence_end:\s*([\d.]+)/g)].map((x) => +x[1]);
+    if (!starts.length) return { speechEnd: total, total };
+    const lastStart = starts[starts.length - 1];
+    const closed = ends.some((e) => e > lastStart); // silence re-broken before EOF?
+    return { speechEnd: closed ? total : lastStart, total };
+  } catch {
+    return null;
+  }
+}
+
+function main() {
+  const project = path.resolve(process.argv[2] || "");
+  if (!process.argv[2]) {
+    console.error("usage: transcribe.cjs <project-dir> [model] [language]");
+    process.exit(1);
+  }
+  // Default = multilingual `small`, NOT `small.en`. Per media-use: ".en models
+  // mistranslate non-English and mis-handle accented speech; default to small (auto-detects
+  // language)." We hardcoded small.en before — it hallucinated a wrong transcript on an
+  // accented speaker. Pass `small.en` only for known-clean-English; tough accents → a larger model.
+  const model = process.argv[3] || process.env.WHISPER_MODEL || "small";
+  const language = process.argv[4] || process.env.WHISPER_LANG || "";
+  const out = path.join(project, "transcript.json");
+
+  // already in our schema? skip — but validate the SHAPE, not just the keys:
+  // `hyperframes init` drops a whisper.cpp segment/token-format transcript.json
+  // (offsets-in-ms, nested tokens) that can carry a `words` key yet poison the
+  // compilers. Only a word-level {text,start,end} array counts as normalized.
+  try {
+    const d = JSON.parse(fs.readFileSync(out, "utf8"));
+    const wordShaped =
+      d &&
+      Array.isArray(d.words) &&
+      d.words.length > 0 &&
+      d.words.every(
+        (w) =>
+          w &&
+          typeof (w.text ?? w.word) === "string" &&
+          Number.isFinite(w.start) &&
+          Number.isFinite(w.end) &&
+          w.end < 36000, // ms-offset formats blow past any sane seconds value
+      );
+    if (wordShaped && d.language_code) {
+      console.log("[transcribe] already normalized, skipping");
+      return;
+    }
+    if (d && !wordShaped) {
+      console.log(
+        "[transcribe] existing transcript.json is NOT word-level (init stub / segment format) — regenerating",
+      );
+    }
+  } catch {}
+
+  const src = ensureSource(project);
+  if (!fs.existsSync(src)) {
+    console.error(`[transcribe] no source in ${project}`);
+    process.exit(2);
+  }
+  const audio = path.join(project, "audio.mp3");
+  if (!fs.existsSync(audio))
+    cp.execFileSync(
+      "ffmpeg",
+      ["-y", "-i", src, "-vn", "-acodec", "libmp3lame", "-q:a", "2", audio],
+      { stdio: "ignore" },
+    );
+
+  // ── engine: WhisperX (preferred — wav2vec2 forced alignment gives word timings far
+  // tighter than whisper.cpp's segment-interpolated ones; our gates are 80ms-strict) →
+  // fallback hyperframes whisper.cpp. Force with TRANSCRIBE_ENGINE=whisper|whisperx.
+  let words = null,
+    engine = null;
+  const wantWx = (process.env.TRANSCRIBE_ENGINE || "whisperx") === "whisperx";
+  if (wantWx) {
+    try {
+      const wav = path.join(project, "_wx_audio.wav");
+      cp.execFileSync("ffmpeg", ["-y", "-i", src, "-vn", "-ac", "1", "-ar", "16000", wav], {
+        stdio: "ignore",
+      });
+      const outDir = path.join(project, "_wx_out");
+      fs.mkdirSync(outDir, { recursive: true });
+      const wxModel = model.replace(/\.en$/, ""); // whisperx model names are multilingual ids
+      // Pin whisperx so `uvx` fetches a reproducible build instead of resolving
+      // "latest" on every run (a supply-chain + determinism foot-gun). Override
+      // with $WHISPERX_VERSION if you've validated a different release.
+      const whisperxSpec = `whisperx==${process.env.WHISPERX_VERSION || "3.8.6"}`;
+      const wxArgs = [
+        "--python",
+        "3.12",
+        "--from",
+        whisperxSpec,
+        "whisperx",
+        wav,
+        "--model",
+        wxModel,
+        "--device",
+        "cpu",
+        "--compute_type",
+        "int8",
+        "--output_dir",
+        outDir,
+        "--output_format",
+        "json",
+        "--no_align_deletes",
+        "--print_progress",
+        "False",
+      ];
+      if (language) wxArgs.push("--language", language);
+      // strip our flag if this whisperx build doesn't know it
+      let r = cp.spawnSync("uvx", wxArgs, { encoding: "utf8", timeout: 600000 });
+      if ((r.status || 0) !== 0 && /no_align_deletes/.test(r.stderr || "")) {
+        r = cp.spawnSync(
+          "uvx",
+          wxArgs.filter((a) => a !== "--no_align_deletes"),
+          { encoding: "utf8", timeout: 600000 },
+        );
+      }
+      if ((r.status || 0) !== 0)
+        throw new Error(
+          (r.stderr || "whisperx failed").split("\n").slice(-4).join(" ").slice(0, 300),
+        );
+      const wxJson = JSON.parse(fs.readFileSync(path.join(outDir, "_wx_audio.json"), "utf8"));
+      const wx = [];
+      for (const seg of wxJson.segments || [])
+        for (const w of seg.words || []) {
+          // alignment occasionally yields a word with no timing (OOV) — interpolate from neighbors later; mark null now
+          wx.push({ text: String(w.word || "").trim(), start: w.start, end: w.end, type: "word" });
+        }
+      // interpolate missing timings from neighbors (rare OOV/number cases)
+      for (let i = 0; i < wx.length; i++) {
+        if (wx[i].start == null || wx[i].end == null) {
+          const prevEnd = i > 0 ? wx[i - 1].end : 0;
+          const nextStart = wx.slice(i + 1).find((x) => x.start != null);
+          const ns = nextStart ? nextStart.start : prevEnd + 0.3;
+          wx[i].start = prevEnd;
+          wx[i].end = Math.max(prevEnd + 0.05, ns - 0.02);
+        }
+      }
+      if (wx.length) {
+        words = wx.filter((w) => w.text);
+        engine = `whisperx(${wxModel}+wav2vec2)`;
+      }
+      try {
+        fs.unlinkSync(wav);
+      } catch {}
+    } catch (e) {
+      console.error(
+        `[transcribe] whisperx unavailable (${String(e.message || e).slice(0, 160)}) — falling back to whisper.cpp`,
+      );
+    }
+  }
+
+  if (!words) {
+    // run hyperframes Whisper → writes a flat word array to <dir>/transcript.json
+    const cli = path.join(hfRoot(), "packages", "cli", "dist", "cli.js");
+    const args = ["transcribe", audio, "-d", project, "--json", "--model", model];
+    if (language) args.push("--language", language);
+    let info = {};
+    try {
+      const so = cp.execFileSync("node", [cli, ...args], { encoding: "utf8" });
+      const line = so.trim().split("\n").filter(Boolean).pop();
+      info = JSON.parse(line);
+    } catch (e) {
+      console.error("[transcribe] hyperframes whisper failed:", e.message);
+      process.exit(1);
+    }
+    const flatPath = info.transcriptPath || out;
+    const flat = JSON.parse(fs.readFileSync(flatPath, "utf8"));
+    const arr = Array.isArray(flat) ? flat : flat.words || [];
+    words = arr
+      .filter((w) => (w.text ?? w.word) != null)
+      .map((w) => ({
+        text: w.text ?? w.word,
+        start: w.start ?? w.t0,
+        end: w.end ?? w.t1,
+        type: "word",
+      }));
+    engine = `whisper.cpp(${model})`;
+  }
+
+  // Tail-hallucination guard: drop words whisper placed entirely inside a terminal
+  // silence (it fabricates e.g. repeated "I'm sorry." over dead air). Word START past
+  // the audible end (+0.4s slack) = fabricated; real final words start before it.
+  const ae = audibleEnd(audio);
+  let trimmedTail = 0;
+  if (ae && ae.speechEnd < ae.total - 0.8) {
+    const keep = words.filter((w) => w.start <= ae.speechEnd + 0.4);
+    trimmedTail = words.length - keep.length;
+    if (trimmedTail > 0) {
+      console.error(
+        `[transcribe] ⚠ trimmed ${trimmedTail} trailing word(s) starting after the audible end ` +
+          `(${ae.speechEnd.toFixed(2)}s; clip ${ae.total.toFixed(2)}s) — whisper hallucinates over silent tails.`,
+      );
+      words = keep;
+    }
+  }
+
+  const text = words
+    .map((w) => w.text)
+    .join(" ")
+    .replace(/\s+([,.!?;:])/g, "$1")
+    .trim();
+  fs.writeFileSync(
+    out,
+    JSON.stringify(
+      {
+        text,
+        language_code: language || "en",
+        engine,
+        words,
+        ...(trimmedTail ? { trimmed_tail_words: trimmedTail } : {}),
+      },
+      null,
+      2,
+    ),
+  );
+  console.log(`[transcribe] ${engine} ${words.length} words → ${out}`);
+  console.log(`[transcribe] text: ${text.slice(0, 160)}${text.length > 160 ? "…" : ""}`);
+
+  // No-speech guard: whisper returns confident hallucinations over silence (e.g. the
+  // whole clip as "Thank you."). The decision gate REFUSES "no speech" — operationalize
+  // it so an agent trusting the transcript can't sail past the gate.
+  const meanDb = meanVolumeDb(audio);
+  if (meanDb != null && meanDb < -45) {
+    console.error(
+      `\n[transcribe] ⚠ NEAR-SILENT AUDIO — mean ${meanDb.toFixed(1)} dB (real speech ≈ -16..-26 dB).`,
+    );
+    console.error(
+      `  This transcript is almost certainly a Whisper hallucination, NOT real speech.`,
+    );
+    console.error(
+      `  Per the decision gate, REFUSE "no speech" — confirm with \`ffmpeg -i <src> -af silencedetect\`;`,
+    );
+    console.error(`  do NOT author captions from fabricated words.`);
+  }
+}
+main();
diff --git a/.claude/skills-media/embedded-captions/themes/PORTING.md b/.claude/skills-media/embedded-captions/themes/PORTING.md
new file mode 100644
index 000000000..e78c9d220
--- /dev/null
+++ b/.claude/skills-media/embedded-captions/themes/PORTING.md
@@ -0,0 +1,49 @@
+# PORTING — turning a cap_fx3 demo into a first-class theme DNA
+
+One theme at a time. The demo is the spec; the engine is the law.
+
+## Inputs
+
+- Demo: `~/Downloads/cap_fx3/<tNN_name>/` — index.html (bg: scene-reaction + apex
+  setpiece), rail.html (fg alpha: body + furniture + front fx), postfx.json,
+  final_fx.mp4 + strip.png (ground truth of how it should look).
+- Engine: `scripts/make-theme.cjs` — read the header + the existing paradigms
+  (rail/panel/poem/takeover) and setpieces (detonation/decode/drawon/assembly/
+  colorflip/cpslam/coverword/settle) before writing anything.
+
+## Process
+
+1. DECOMPOSE the demo: body paradigm? body entrance/exit verbs? hero setpiece?
+   front fx? plate budget? linkages? Map each piece to an existing registry
+   entry or mark it NEW.
+2. EXTEND the engine for the NEW pieces only — port the demo's GSAP logic into
+   generator functions, parameterized (sizes, colors, counts, seeds become DNA
+   params). Registries stay generic: paradigms/setpieces are the unit of code,
+   the DNA json is the unit of identity. Match the file's existing code style.
+   `node --check scripts/make-theme.cjs` after every edit.
+3. WRITE `themes/<name>.json` (drop the tNN\_ prefix). voice/when/register/fonts/
+   palette/body/hero/fx/plate/linkages — follow anchor.json + ordnance.json shape.
+4. VERIFY on the rooftop fixture:
+   - scaffold: `mkdir ~/Downloads/port_<name>` + symlink source.mp4 / frames_fg /
+     frames_bg + cp matte.fps transcript.json safe-zones.json from
+     `~/Downloads/cap_multi/rooftop/` (frames_bg from `~/Downloads/cap_fx/_frames_bg`).
+   - theme.json: same lines/hero the demo used (read its rail.html data).
+   - `node scripts/make-theme.cjs <dir>` → `preview-frames.cjs <dir> <4 key times>`
+     → READ the previews; compare against the demo's strip.png. Iterate ≤3 rounds.
+   - full render: `bash scripts/render-theme.sh <dir>` → extract a 12-frame strip
+     around the apex → view → compare to the demo strip. Small deviations OK,
+     note them; the THEME must read identically at a glance.
+5. REGRESSION: recompile one prior theme project (e.g. `~/Downloads/cap_anchor`,
+   plus the previous port in this batch) — make-theme must still compile and a
+   2-frame preview must look unchanged.
+6. REGISTER: add the identity row to CATALOG.md (voice/when/needs, author →
+   make-theme) and a line in themes/README.md if it has one.
+
+## Hard rules
+
+- The CONTRACT.md disciplines apply verbatim (determinism, physics doctrine,
+  body stability, apex-owns-frame, equal-length keyframes, fonts whitelist,
+  ≤ DUR scheduling): `~/Downloads/cap_fx3/CONTRACT.md`.
+- Never edit existing setpieces'/paradigms' behavior unless fixing a bug —
+  existing themes must not change appearance.
+- Do NOT commit; the orchestrator reviews and commits per batch.
diff --git a/.claude/skills-media/embedded-captions/themes/README.md b/.claude/skills-media/embedded-captions/themes/README.md
new file mode 100644
index 000000000..630c25dc3
--- /dev/null
+++ b/.claude/skills-media/embedded-captions/themes/README.md
@@ -0,0 +1,244 @@
+# THEME mode — composed visual constitutions
+
+Theme mode is the third compiler (`scripts/make-theme.cjs`), beside Standard and
+Cinematic. It exists because "mode" was a bundle of orthogonal axes pretending
+to be one switch. A theme DNA composes its identity from registries implemented
+ONCE in the compiler — **paradigms are the unit of code; DNAs are the unit of
+identity**. A new look is a JSON file; only a genuinely new paradigm/setpiece
+(rare) touches the compiler.
+
+```
+theme DNA = body PARADIGM   how the transcript surface lives
+          × body LAYER      fg-alpha (rail.html channel) | bg-embed
+          × hero SETPIECE   the climax choreography
+          × front FX        flash / rings / sparks / scanband / crowdflash / paflash (fg, over subject)
+          × PLATE budget    charge-dim (in-page) + punch/shake/grain (_postfx.sh)
+          × LINKAGES        declarative theme interactions
+```
+
+Standard and Cinematic were, in retrospect, two fixed points of this space.
+Standard is now RETIRED (2026-06-12): its rail×embed-climax point is served by
+the `anchor` theme (rail paradigm × settle setpiece — the quiet default).
+Cinematic remains a separate compiler; do not re-implement it as a theme yet.
+
+## Unification roadmap (strangler fig — interface first, engines later)
+
+The user-facing model is already unified (SKILL.md Step 0): one catalog of
+LOOKS; classic looks pick a DELIVERY (rail | column), themed looks bind their
+own. "Standard/Cinematic" are delivery/compiler names, not modes. Remaining
+phases, each gated on need — never rewrite for tidiness alone:
+
+- **Phase 2 — one authoring schema.** `lines`/`minors`/`hero` are already
+  ~90% shared between standard.json and theme.json; a router that translates a
+  single `caption.json` into the engine-specific file removes the last
+  user-visible seam. cinematic.json's blocks/planes are the odd one — map the
+  common fields, pass engine-specific ones through.
+- **Phase 3 — engine convergence.** Port a classic delivery into make-theme
+  ONLY when something forces it (e.g. a classic DNA wants a plate budget or a
+  setpiece). Acceptance bar: blind A/B on the cap_multi regression scenes vs
+  the old compiler — swap engines only when indistinguishable or better. Until
+  then the old compilers are the reference implementation of 8 rounds of
+  validated typography (lockup/orbit, multi-climax, ratio-lock, per-plane
+  legibility, occlusion adjudication) — that machinery is the moat, not debt.
+
+## Body paradigms (registry)
+
+| paradigm      | surface                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | layer | entrance verbs                                                                                                                                                                                                                                                                                           | exit verbs                                                                                                                                                                                                                         |
+| ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ----- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `rail`        | lower-third lines, replace                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       | fg    | `stamp` (1f hot appear→crush→recoil→cool), `flick` (tube double-flick), `bootflick` (corrupted-cyan boot 1–2f → settles to UI color; minors keep a cyan/red registration shadow). `stamp` minors cool to `palette.minorCool` (default amber)                                                             | `drop` (mass falls), `powercut` (bright→ghost→off)                                                                                                                                                                                 |
+| `panel`       | docked glass console, accumulate + typed                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         | fg    | `type` (width steps per word, $ prompt, caret blinks)                                                                                                                                                                                                                                                    | hold                                                                                                                                                                                                                               |
+| `poem`        | open-space stanzas, accumulate; letters CONDENSE from seeded dust                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                | fg    | `condense`                                                                                                                                                                                                                                                                                               | `drift` (stanza hand-off) + optional dispersal linkage                                                                                                                                                                             |
+| `takeover`    | full-frame hard-cut cards, plate dimmed throughout                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | bg    | `cut` (+ tension `creep` before silences, auto-detected)                                                                                                                                                                                                                                                 | hard cut / blur dissolve                                                                                                                                                                                                           |
+| `lastpage`    | manuscript rail (typed serif) + a seeded field of BLURRED apex-word instances haunting the room from t=0                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         | bg    | typed rail; field breathes imperceptibly                                                                                                                                                                                                                                                                 | rail fades; field resolves at apex (see `rackfocus`)                                                                                                                                                                               |
+| `flaprail`    | split-flap word tiles on a chyron bar (tag + ROW flip-counter; optional odometer chip docks above the bar while the first emphasis line reads)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | fg    | `splitflap` (3 flips: wrong word → wrong word → real word clacks on hot, squash → elastic settle → cools to bone; emphasis tiles keep amber text + underline)                                                                                                                                            | flip-to-blank cascade left→right (completes before the next line)                                                                                                                                                                  |
+| `ledboard`    | amber LED departure strip docked lower-third (`body.board` geometry); lines page by vertical scroll-snap (steps(6)) inside the board window; furniture: green platform tag, ticking seconds clock (stacked digit reel), ⚠ DELAYED blinks then pages to ● ON TIME ~0.7s after the apex, idle LED shimmer in dead air ≥1.2s                                                                                                                                                                                                                                                                                                                        | fg    | `ledwipe-mini` (per-word L→R LED column wipe, clipPath steps(len), + 1-frame arrival flicker; emphasis words get the LED-refresh double-blink; last word gets one late refresh)                                                                                                                          | scroll-snap page-up (next line pages in at the same instant)                                                                                                                                                                       |
+| `vhsrail`     | camcorder-playback lower third: every word carries a PERMANENT 1px red+cyan misregistration fringe (split clip-path halves); furniture: ▶ PLAY / ◀◀ REW top-left (REW gag in dead air ≥0.7s + the final rewind), ● REC top-right through the apex window, green timestamp bottom-right with 1 Hz blinking colon, idle tape-drift line in long silences, plus apex-coupled artifacts (1-frame white tear band + head-switching noise bar at REC FREEZE, scrub lines at the apex band on the hero rewind)                                                                                                                                          | fg    | `trackglitch` (instant on + 2-frame y-shake + 1-frame band-slice shift of the word's bottom half; emphasis = PAUSE jitter ±1px y oscillation + white noise-band flicker)                                                                                                                                 | REWIND streak left + flat-white echo copy + 2 scrub-line flickers                                                                                                                                                                  |
+| `hudrail`     | arcade-cabinet HUD: whole frame plays through CRT overlays (scanlines `body.scan` + corner vignette); docked HUD bar (`body.bar` geometry, 2px accent border, glow) with `body.tags` 1UP / CREDIT furniture — the 1UP tag blinks on the classic 0.45s attract cadence all clip; HUD yields (`body.yield`) while the boss lands                                                                                                                                                                                                                                                                                                                   | fg    | `coinpop` (instant-on + steps(2) scale pop from the baseline + 1-frame white coin-blip tick over the word; emphasis = 3-frame palette swap body→accent→magenta→body)                                                                                                                                     | checkerboard dissolve (words vanish in 2 alternating 2-frame passes, line off ≤ DUR−0.02)                                                                                                                                          |
+| `carbonstrip` | cold-war case-file transcript strip docked on the clearer side (manila gradient, punch holes, faint red `body.watermark`, typed `body.header` that types on by width steps); lines live on up to `body.rows` fixed slots; PAGES (broken at full rows, dead-air gaps > 0.7s, and after the hero hand-off line — it is filed away while the stamp owns the frame); the strip top-shadow breathes during the stamp's dead-still hold and the strip yields (`body.yield`) while it lands; the final page is pulled with the whole strip at clip end                                                                                                  | fg    | `hammer` (per-char sets 30ms apart, scale 1.35→1 in one frame = the stamp motif at low amplitude; seeded ±1.2px baselines + seeded ribbon-ink opacity; every strike kicks the strip 1px — y-channel locked while the strip itself tweens; emphasis words get a red ink ellipse drawn around them, 0.25s) | X-row over-strike (3 chunks per line, 0.05s apart, lines 0.16s apart) → carriage yank-down feed → return; roomy cadence in dead air, compressed when the next page is close — always completes before the next page's first strike |
+| `laserrail`   | concert lower third: lines centered on a bottom rail (`body.bottomPx`), uppercase laser-green words with a neon text-glow; emphasis words render at `body.minorScale`× with a hotter glow; word centers are BAKED at compile time from the measured char-width table (`assets/fonts/char-widths.json`, ≤3px vs browser ground truth) so the beam aim can't be skewed by font-load timing; per-word furniture = two thin beams (accent from top-left, magenta from top-right) that sweep to CONVERGE on the word 2 frames early + a convergence flare; beams dim ×`yield.beamDim` inside the apex window and the visible line dims to `yield.dim` | fg    | `igniteconverge` (beams converge at st−0.083 → flare pop → word snaps on at opacity 1 with brightness 1.85, crush 0.09s power3.in → 2-frame contact squash → elastic settle → brightness cools; emphasis = single 1-frame strobe off/on + lingering beams)                                               | sweeper beam crosses L→R in 0.13s and each word streaks away (x+44, blur 5) as it passes; line off ≤ DUR−0.02                                                                                                                      |
+
+| `stormrail` | rain-washed lower third: ambient rain = `body.rain.count` seeded thin streaks falling on repeating linear cycle tweens (pure f(t), one slanted wind vector, mid-fall at t=0); a second seeded set DOUBLES the rain for ~1s after the strike; lines sit on a bottom gradient scrim (stable reading surface); the visible line dims to `yield.dim` while the bolt lands and its text-shadow flips toward the strike (`hero.params.side`) for the flash frames | fg | `lightningpop` (the apex motif at low amplitude: instant on at brightness 2.2, y+4, scale 1.06 → 0.12s micro settle; emphasis = sheet-lightning double flash, 2-frame brightness 1.9/1.0/1.8 chain — the bg sky double-kisses at the same beats) | wash downward with the rain (y+22, blur 3, 0.18s power1.in); a line facing dead air washes early at lastWord+1.08s; line off ≤ DUR−0.02 |
+| `holorail` | volumetric projection plate: a scanlined glass slab (`body.plateW`×`plateH`, centered at `H − bottomPx`) with corner brackets + feed tag (`body.tag` / `theme.plateTag` override) boots like a projector turning ON (scaleY 0.03→1 expo + 1-frame flicker) and breathes a finite yoyo luminance cycle sized to the clip length; lines sit centered IN the plate (`lineDy` below plate center) with a constant chromatic-fringe text-shadow (−1.5px accent / +1.5px magenta) and drift slowly in rotationY (it IS a projection); the whole railwrap — plate included — dims to `yield.dim` while the apex lands | fg | `sweepboot` (the apex motif at low amplitude: instant opacity + rising clip-wipe reveal 0.15s + 1-frame x interference glitch at st+0.05/0.09/0.13; emphasis = 2-frame projection DROPOUT at `body.emphDelay`, restores brighter in `palette.em` with a hotter fringe, then settles back — the delay auto-shrinks near the line's exit so dropout+restore always complete) | projector cut — brightness 2.2 pop → collapse to a horizontal slit (scaleY 0.045, 0.07s power3.in) → to a dot (scaleX 0.015, 0.06s) → off at exit+0.15; the plate itself gets the same cut at DUR−0.14 |
+| `planktonrail` | deep-sea lower third on TWO coexisting row slots: even lines ride the upper row (`H − bottomPx − rowDy`), odd lines the lower (`H − bottomPx`) — couplets share the water like drifting strata. A line clears when its row is next needed (line i+2 in − 0.15) or ~0.3s after its couplet finishes speaking (staggered pair exits, +0.12s on odd rows); the pre-apex leftover clears at heroIn−0.21 while the FEEDING line (last to start before the apex) yields to `yield.dim` instead — no restore unless ≥1.2s of hold remains (it exits dimmed, by design); a line entering during the hold arrives at `yield.enter` and restores at I+`yield.post`; every line floats on a gentle y keyframe drift sized to its window. Furniture: `body.motes` = {count, near, seed} plankton motes on seeded drift walks f(t); the first `near` seed a ring around the apex heart (ring radius scales with hero fontPx/120) and get ATTRACTED to the bloom at I−0.19 (pulled 0.72× toward it, brightening to 0.42 at scale 1.7), wiggle through the hold, and sink at clip end | fg | `glowon` (the apex bloom at low amplitude: 2-frame opacity ramp + radial bloom from word center — scale 0.92→1, blur 5→0, brightness 0.45→1, 0.4s sine.out — while a cyan glow text-shadow grows in; emphasis = slow DOUBLE-BEAT propulsion pulse at st+0.52, 5-key brightness/scale 0.55s, guarded ≤ DUR−0.09) | light sinks — y+15 while dimming, 0.3s power1.in; the last line floats to the end of the clip; line off ≤ DUR−0.02 |
+| `sheenrail` | iridescent silk lower third on TWO coexisting row slots: even lines ride the upper row (`H − bottomPx − rowDy`), odd lines the lower (`H − bottomPx`) — couplets read together like a woven pair. Words are aurora-gradient ink (background-clip:text over a rose→teal→violet 300% wash whose backgroundPosition drifts f(t) 0%→300% across the whole clip — the body's hold life) above a blurred dark understroke (top+3px, blur 3); a soft radial band scrim sits under the rows (stable reading surface). Line scheduling mirrors planktonrail: a row clears when next needed (line i+2 in − 0.15) or shortly after its couplet finishes speaking (pairEnd + 0.23 + 0.17 on odd rows); the pre-apex leftover clears at heroIn−0.32 while the FEEDING line stays and dims with the railwrap yield (`yield.dim` at I−`pre`, restore at I+`post` — band included); the last line holds to the end | fg | `flowon` (the ribbon's flow at low amplitude: 2-frame opacity + y8 settle 0.38s sine.out; emphasis = ONE bright sheen sweep — a white highlight marches through the word once at st+0.16 (backgroundPosition −80%→180%, 0.42s power2.inOut) + a brightness 1.55 pulse) | dissolve UPWARD — words to y−12, blur 3, 0.32s power1.in staggered 0.035; each line releases `body.streaks` seeded light streaks (rose/teal/violet verticals) that float up from its row (y 14→−78, 0.62s, start clamped ≤ DUR−0.66) |
+| `scoperail` | oscilloscope lower third: a dark phosphor scope band (`body.bandH`, top border + glass shadow) hosts HUD readouts (`body.hudL` left, sample-rate `· TRIG` + amber trig LED right), a graticule, and an ALWAYS-ALIVE waveform — an SVG polyline rebuilt from baked point-set states (seeded pseudo-RMS envelope at ~12 states/s + 3-frame triplets on word arrivals: speech grows the amplitude, silence flattens it, every word kicks a local gaussian burst at its slot center — burst x BAKED at compile time from the measured char-width table; the hero words kick WIDE bursts spread from `HG.x` toward `HG.x + 0.6·halfW`, where the trace surges to write). Body lines sit centered on the band above the trace with reserved-width slots (sizer + clip — no re-center drift as words arrive); the whole band (lines + wave + HUD) dims to `yield.dim` while the apex writes. At the FINAL transcript word the scope DIES: band x-shake, trig LED panics red then dies, the trace explodes to max-amp chaos for ~0.3s, flatlines, collapses to a single dot (scaleX 0.015) and `body.siglost` stamps with a 2-frame flicker (all clamped ≤ DUR−0.02) | fg | `tracewipe` (the apex pen-write at low amplitude: clip wipes the word in L→R over 0.10s + a 2-frame just-traced flash — flash-white instantly, settle to phosphor green; the death word settles to `palette.em` amber; the trig LED blinks on every arrival; emphasis = a ticking frequency-readout chip above the word, 3 seeded ascending values stepping every 2 frames) | the line collapses INTO the waveform (y+30, 0.13s power2.in) — early into dead air (lastWordStart+0.67), else just before the next line needs the slot; the last line collapses as the trace flatlines (min(NZ+0.33, DUR−0.2)) |
+| `paperrail` | stop-motion craft table: a kraft strip (torn top edge via seeded polygon clip-path, washi-taped corners, handwritten `body.tag` in the tag font) docked lower-third (`body.strip` geometry, centered by default); body words are cream paper chips (`palette.chip` on `palette.chipEdge` border, hard dy3 shadow) on centered replace-lines; the whole strip jitters ±0.7px every 4 frames (handmade stop-motion weave); the hero slot keeps a red paper star (`palette.accent`, rail↔climax hand-off) that pulses 1.18→1.06→1 as the apex chips land; the FINAL transcript word is an accent-red sign-off chip; emphasis words get a washi-tape slap (steps(2) scale 1.7→1 at `word.start + body.tapeDelay`, chip pressed 1 frame); strip + lines yield (`body.yield`) while the apex lands | fg | `place` (the papermat drop at low amplitude: opacity full in 0 frames + seeded ±2.5° rotation, y −16 + scale 1.06→1 steps(2) 0.12s; hold = rotation-only ~5fps wobble) | `peel` (rotation −8°, y −40, fade, steps(3), staggered 0.03s; last line clamped to finish on frame) |
+| `popuprail` | pop-up book page: a cream page strip (`body.strip` geometry, center foldline, top border + paper glow inset) unfolds up from the bottom edge (scaleY 0.02→1 back.out at 0.14 — the stage is built) and hosts TWO reading rows (`body.rowA`/`rowB` px above H) that alternate per line; the whole page breathes a gentle y drift sized to the clip; the hero slot keeps a blue paper star chip (`palette.accent` clip-path star, rail↔climax hand-off — spliced into the line whose window holds heroIn); emphasis words land at `body.emPx` weight 800 with a contact squash (1.06/0.93 set → elastic settle) the strip FEELS (1px dip), then flick-wobble (5-key rotationX, squeezed to fit before the fold) with a blue paper strut leaning in behind (scaleY back.out(2)); the FINAL transcript word is a blue sign-off with a strut; page yields (`body.yield`) while the centerfold lands; on the final word the whole page TILTS 2° +x6 (paper physics, `body.tilt:false` opts out) and the strip folds shut on the last frame (scaleY power3.in ≤ DUR−0.017) | fg | `popup` (the centerfold motif at low amplitude: opacity 1 in 0 frames + rotationX 85→0 baseline hinge, 0.25s back.out(1.4), back-shadow grows as it rises) | `fold` (the page closing: rotationX 88 power2.in 0.12s, shadow off, L→R wave staggered 0.045s, slot hidden at +0.13; fold at next line in / lastWord+`body.maxHold` in silence, wave clamped ≤ DUR−0.017) |
+| `chalkrail` | night-lecture chalk band: a deep-green board strip (`body.strip` geometry, worn top hairline, eraser smudges, handwritten `body.tag` header in the tag font, two chalk sticks bottom-right) docked at the bottom edge hosts `body.rows` reading rows that ACCUMULATE — lines fill the rows top→bottom in phases of rows.length; when the next phase needs the rows an ERASER SWIPE clears the board (blurred light band sweeps across 0.42s at `prevEnd + body.eraseDelay` clamped clear of the next phase, the old words SMEAR out scaleX 1.3 + x+24 + blur(8) staggered 0.06s, faint ghost smudges fade in and STAY — chalk never fully erases); the FINAL transcript word lands in yellow chalk (`palette.em` sign-off); the band yields (`body.yield`) while the apex writes | fg | `scribble` (the chalkwrite verb at low amplitude: 2-frame opacity pop + scribble clip-reveal steps(4) 0.12s + y4 drop-settle + 6 seeded dust specks puffing at the word base, seeded ±2° tilt; emphasis = double underline dashes drawn beneath at st+0.22/+0.38) | eraser-swipe smear between phases (scaleX 1.3, x+24, blur 8, power2.in 0.18s); the final phase holds to clip end |
+| `markerrail` | street handstyle rail: centered marker lines on a bottom rail (`body.bottomPx`), `palette.body` cream paint with a heavy drop text-shadow; emphasis words take ALTERNATING paint colors (`palette.em`/`em2`, yellow/magenta) + a spray-underline SWOOSH (dash-revealed squiggle viewBox-stretched to the word) with 8 seeded overspray dots that pop and fade; the FINAL transcript word lands BIG (1.5×) in `palette.em` with mini apex-impact physics (crush 0.09s power3.in → 2-frame contact squash → elastic settle — it rides the plate punch); the line visible at the tag's onset yields (`body.yield`, restore only with runway before its buff — else it exits dimmed) | fg | `flick` (the spray-write verb at low amplitude: opacity full in 1 frame at scale 1.18, seeded ±6° rotation settling to ±2°, 1-frame squeak skewX 7, back.out(2.2) settle 0.18s) | ROLLER BUFF (gray paint roller scaleX-sweeps the line 0.15s power2.in, words vanish under it, the wet smear lingers at 0.15 + blur(2) before fading); the last line is never buffed — the sign-off stays painted |
+| `brushrail` | washi paper band: a deckle-edged band (`body.strip` geometry, two faintly rotated `paperHi`→`paperLo` under-sheets at 0.42 + a translucent `sheetHi`→`sheetLo` main sheet with warm inset shadow) swipes in L→R behind a traveling brush-head shadow (clipPath wipe 0.2s power2.out + blurred `palette.bh` gradient head — the ink gesture at low amplitude), then the under-sheet breathes faintly (0.32 Hz baked f(t)); body lines are centered replace-lines on the band (`fonts.body` serif at `body.fontPx`/`body.weight`, seeded ±1° tilt); emphasis words get a DOUBLE curved ink underline (`palette.ulInk`, fat 7/0.3 wash + tight 2.6/0.95 core, dash-drawn at st+0.12/+0.15); band + the line under the gesture yield (`body.yield`) while the apex lands; the band exits with the last line on one final R→L wipe | fg | `brush-wipe` (the gesture at low amplitude: clipPath inset reveal L→R 0.16s power2.out with a blurred per-word brush-head shadow riding the reveal edge, then vanishing) | wet-cloth WIPE (the reveal in reverse: the line clipPath wipes R→L over 0.10–0.14s power2.in with an erase brush head riding it, at min(next line − 0.136, lastWord + `body.maxHold`); the LAST line and the band wipe together at DUR−0.142) |
+| `inkrail` | sumi ink on still water: up to THREE fixed reading rows at the bottom center (`body.bottomPx` = last-row center, `body.rowGap` apart; rows cycle in pairs, the closing line takes the third row — the final thought ACCUMULATES instead of replacing); `fonts.body` Mincho serif at `body.fontPx`/`body.weight`/`body.letterSpacing`, `palette.body` ink over a paper-white text-shadow halo (`palette.paper`/`paper2` glow stack — readable on bright skies) with a duplicate blurred dark halo per word; an ink-settling RULE (86%-width gradient hairline, scaleX 0→1 over 0.9s) draws beneath each line at firstWord+0.12; emphasis words shed a faint ink wisp curling off the word top (st+0.55, ±dir by line parity, skipped near clip end); the rows visible under the bloom yield (`body.yield` — dim at heroIn+`delay`, restore at heroIn+`post` only with runway before the exit) | fg | `bleed` (the apex bloom at low amplitude: opacity snaps in 2 frames; blur 12→0 + scale 1.25→1 power2.out carry the bleed — late words bleed faster so they resolve before clip end; the dark halo overshoots scale 1.5→1.04 while its opacity decays 0.5→0.25) | RE-DISSOLVE (blur 9 + scale 1.13 + fade + y−8 power1.in — ink dispersing back into the water) as the line-after-next approaches (= the next occupant of its row, outDur 0.5−0.05·i, never mid-read); the closing TWO lines persist to clip end |
+| `ransomrail` | kidnapper's collage rail: every transcript word is a cutout chip in one of 4 cycled recipes (cream/`fonts.body` Anton, black/`fonts.dark` Inter-800, newsprint/`fonts.news` Special Elite, accent/`fonts.accent` Permanent Marker — emphasis words snap to the accent chip, never two identical chips in a row) PASTED along the bottom rail line (`body.bottomPx`) with seeded crookedness (rot sign alternates with line+word parity, baseline dy leans the other way), seeded ±px sizes (`body.fontPx`−2..+1, emphasis +3) and torn edges (seeded 12-vertex tear polygon, same paper stock as the apex); chips carry a hard dy5 offset drop-shadow; lines breathe (5-key scale keyframes) through their hold; the whole railwrap yields (`body.yield`, container opacity — never contests per-chip channels) while the apex letters slam | fg | `paste` (the apex slam motif at low amplitude: opacity full in 1 frame at scale 1.12 / rot×1.5 / y−8 → power3.in crush 0.08s → 2-frame contact squash 1.05/0.95 → elastic settle; emphasis = 1-frame RE-PASTE lift at `body.emphDelay` — shadow grows to a flight blur, rotation flips sign for good, then crush + squash + elastic again, rip-runway-guarded) | RIPPED off one by one (rotation ±16/17° throw + y−30 + fade, power2.in, staggered 0.045s) with a 1-frame paper-tear flash under each chip — timed so the rip tail overlaps the next line's pastes a beat (collage chaos, by design); the last line tears off clamped to finish on frame |
+
+fg body uses the **rail.html alpha-webm channel** (true alpha — dark panels and
+scrims work; never the screen-blend index_fg path, which can only add light).
+
+## Hero setpieces (registry)
+
+| setpiece      | what happens                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | notes                                                                                                                                                                                                                                                                                                                                                                                                                         |
+| ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `detonation`  | charge-dim → sheared stencil slices crush in hot → SNAP into register → squash → elastic settle → paint cools to bone → bars/ticks/designation-tag deploy → shear-apart exit                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | pairs with fx flash/rings/sparks + plate punch/shake                                                                                                                                                                                                                                                                                                                                                                          |
+| `decode`      | slot-machine glyph reels (steps() ease, seek-safe) lock left→right with RGB jitter → lock snap → CRT power-off exit                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | pairs with `redact-until-hero`                                                                                                                                                                                                                                                                                                                                                                                                |
+| `drawon`      | the word is WRITTEN stroke-by-stroke from a single-line font (Hershey) — per-stroke paths revealed sequentially at constant pen speed, nib rides `getPointAtLength`, hops at pen lifts; then hum + buzz dip                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    | any word, zero tuning: `gen-stroke-path.py` lays out glyph pen-paths at compile time                                                                                                                                                                                                                                                                                                                                          |
+| `cpslam`      | acid-yellow stencil word slams in BEHIND the subject with REAL diagonal notch cuts (SVG mask = true transparency over footage), chromatic split that settles to a PERMANENT cyan/red registration error, seeded glitch ticks, katakana tag, glitch-out exit                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    | bounded hold (~2.6s default, `params.hold` / `hero.exitAt` override) — a climax is an event, not wallpaper                                                                                                                                                                                                                                                                                                                    |
+| `coverword`   | the spoken apex word SET IN the replica typeface of the CP2077 cover mark (`assets/brand/CyberpunkReplica.ttf` — lowercase glyphs carry the logo's real brush chops, blade terminals and spikes; logo case = First-upper rest-lower). The setpiece adds only what the font lacks: solid cyan duplicate offset (-7,8), baseline streak merged with the glyph feet + cyan debris, circuit trace off the tail, tear-in slices / living print / tear-out                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | metric-exact layout from `cyberpunk-widths.json` (advance widths + ink bounds; `fontPx` = target INK height). No digits in the replica → compile ERROR with guidance. Replica font: personal-use license — samurai is already fan-kit non-commercial                                                                                                                                                                          |
+| `assembly`    | (inline, poem) apex word condenses BIG while star particles fly into it                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        |                                                                                                                                                                                                                                                                                                                                                                                                                               |
+| `colorflip`   | (inline, takeover) accent-color crush card + dim kick + squash/settle + loom                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | pairs with fx flash + plate punch/shake                                                                                                                                                                                                                                                                                                                                                                                       |
+| `flapboard`   | split-flap departures board takeover: floodlight dim/scrim swing on, the housing clacks down (rotationX, squash, elastic) behind the subject, one giant flap tile per char flip-cycles 3–5 seeded wrong glyphs then LOCKS left→right across `params.lockWindow` (hot flash → cools to bone) under baked clack y-jitter; lock-complete = big clack + amber glow flicker + rule wipe + steps() status-ticker; hold = loom + one tile re-flutter; exit = tiles flip to blank cascade, housing flips away                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | pairs with `fx.crowdflash` (pops at lock start/end) and `plate.punchOffset = lockWindow` so the plate punch lands on the lock-complete clack, not the hero onset                                                                                                                                                                                                                                                              |
+| `ledwipe`     | transit LED board takeover: cool scrim + dim charge, an amber dot-matrix panel EXPANDS upward (scaleY steps(6)) behind the subject, header tags + unlit LED ghost boot-flicker alive, then the word ILLUMINATES column-by-column (clipPath L→R, steps ≈ 1.4×chars over `params.wipeDur`) hot → cools to amber; contact = cell squash + elastic settle + PA "ding" double brightness pulse; an 8-phase chasing LED-marquee border runs to the exit; hold = glow breathe + seeded-look LED dropouts; exit = word pages up out of the window, panel collapses back down                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | pairs with `fx.paflash` (amber PA flash at wipe-complete contact). Panel geometry derives from fontPx (`panelH = 44 + 1.42×fontPx + 18`); `params.panelW` fixed, width-fit shrinks the type only. Plate: grain-only (no punch) is the demo register                                                                                                                                                                           |
+| `vhsosd`      | REC FREEZE camcorder slam: permanent lens vignette (`params.vignette`) + backlight-comp scrim (peak = `plate.charge`, cools to 0.69×) kill the bright sky; the word crushes in as a huge OSD readout — 3 horizontal clip-path tracking bands (`params.bandClips`) sheared (`params.bandShear`) + blurred (power4.in over `params.crush`) SNAP into register on the contact frame, squash → elastic settle; red/cyan misregistration copies cool from ±`misregIn` to ±`misreg` px and keep BREATHING through the hold under tape-weave y jitter (`params.weave`) + slow loom; auto-iris pump (white wash 0.20, dark dip = `plate.dim`); exit at `I + params.hold` = REWIND streak left + flat-white echo copy                                                                                                                                                                                                                                                                                                                                                                   | pairs with the `vhsrail` paradigm, which emits the fg REC-FREEZE artifacts (tear band, head-switching bar, apex scrub lines, ● REC) at the same I/X times. Plate: grain-only (no punch) is the demo register; hold-life keyframes auto-clamp inside [contact, exit]                                                                                                                                                           |
+| `bossintro`   | arcade BOSS INTRO: the room dims (gradient `plate.dim`) behind a CRT edge glow (cyan base wash that pulses on the last emphasis word before the boss and spills magenta on the strobe + the final word); `params.tag` (WARNING) blinks 2× above the word rect; ~COLS×ROWS (`params.rows`, cells 0.7×/0.5× fontPx) seeded pixel blocks fall steps(3) from above into a tight matrix grid covering the word rect, each landing with a 1-frame white tick; at `I + params.flashDelay` the word flashes ON (Press Start 2P, instant at opacity 1, scale 1.15 → steps(3) crush → 2-frame squash → elastic settle) with ±4px chromatic ghost layers + a 3-frame palette strobe (white→cyan→magenta→white); hold = quantized 1.6% breathe + CRT glow cycle + baked block shimmer blinks; exit at `I + params.hold` = per-letter checkerboard dissolve, blocks drop away steps(3)                                                                                                                                                                                                      | pairs with the `hudrail` paradigm; emits fg furniture via setpiece fg parts: letterbox bars (`params.letterbox` px) slam in steps(3) with a 1-frame overshoot and retract after the exit, HI-SCORE odometer (accent label, yellow digits) rolls every 0.066s through the hold, 1-frame white tick out. `fx.coinflash` adds the 1-frame radial impact flash at the strike; plate punch anchors at `punchOffset` = `flashDelay` |
+| `rubberstamp` | the footage becomes an archive page (vignette charge = `plate.charge`, manila sepia wash `params.sepia`, dim kick = `plate.dim` that cools to 0.385×) and the verdict slams in BEHIND the subject as a bordered rubber stamp at `params.rotation`: a manila paper wash lights an instant before contact, the stamp crushes 2.2→1 power4.in over 0.115s, 2-frame contact squash, double-strike ghost print (`opacity 0.35`, offset +5/−4 rot 1.3), two thin-ink patches (`params.patches` clip-path circles in paper color), wet-ink saturate/brightness settle, paper indent shadow bloom; stamps don't move — the hold is DEAD STILL, sold by the breathing indent + a slow paper loom; exit at `C + params.hold` = mechanical 3-frame yank-down cut (the page is filed away), the archive plate releases 0.25s before                                                                                                                                                                                                                                                        | contact `C = heroIn + params.crush`; pairs with `fx.inkflecks` (seeded red spatter at C, ballistic with gravity) and `plate.punchOffset = params.crush` so the plate punch lands on the stamp contact; pairs with the `carbonstrip` paradigm (strip yield + shade breathe anchor at the same C); face chrome (border, radius, padding, ghost offset) scales with fontPx from the 120px demo cut                               |
+| `lasercage`   | concert-blackout laser show: the plate dims to `plate.dim` at t=0 and deepens to `plate.charge` before the drop while haze cones breathe in the top corners; a 6-beam array (alternating accent/magenta, emitters along the top edge) snaps on at I−0.26 and SWEEPS to converge on the word center (staggered 0.022s), a hot core pops at convergence; the word IGNITES behind the subject as an additive glow stack (wide accent blur 0.22×fontPx + magenta fringe offset + tight soft blur + near-white core): scale 1.16 crush power4.in → 2-frame contact squash → elastic settle + 2 controlled strobe pops (brightness 2.05, 1s apart, runway-guarded); a criss-cross beam CAGE (6 lines derived from the word rect) draws itself dash-by-dash around the word and flickers; through the hold the array FANS OUT slowly to floor targets (the iconic concert fan) while the word looms; exit at `heroOut − 0.38` = cage un-draws, beams sweep away L→R (+0.74W) carrying the letters (per-letter streak + blur, stagger auto-clamped ≤ DUR), the room lifts back to 0.12 | word geometry is metric-exact via `assets/fonts/char-widths.json` (cage/spill/flash all derive from `halfW` + `fontPx`); pairs with `fx.laserflash` (accent contact flash at I+0.03, sized 2·halfW+80 × 4.8·fontPx) and the `laserrail` paradigm (same converge-ignite motif at low amplitude); plate punch anchors at `punchOffset` ≈ 0.07 (the ignite contact)                                                              |
+
+| `boltstrike` | THE STRIKE: a slate storm mood (`params.mood`) sits on the room from t=0 and the sky KISSES (1-frame 6% gradient brighten) on every body word — double-kiss on emphasis words, re-flashes at I+0.84/I+1.44 during the hold; the room charge-dims to `plate.charge` under a radial word scrim from I−0.39; a hand-authored branched bolt (5-seg zigzag + 2 branches, haze/glow/core SVG stack in `palette.accent`/`glow`/`core`) flashes 2 frames BEFORE the word — leader 1 → 0.35 → return stroke 1 at contact — with a sky flash; the word slams in (Anton scale 3.1 crush power4.in 0.105s, blur 14→0, brightness 3.2→2.5) → 2-frame contact squash → elastic settle, lit HARD for 2 frames then cools to 1; SIGNATURE: the word's text-shadow flips toward the bolt side for the flash frames; ozone under-glow (accent, blur 26×fontPx/145) blooms at contact and breathes (6-key opacity cycle) through the hold + slow loom + 2-frame lit blips on the sheet re-flashes; the dim releases at the flash, settles to a `plate.dim` storm hold and lifts before the exit; exit at `min(heroOut−0.2, I+params.hold)` = washes downward with the rain (y+38, blur 6) | bolt geometry is baked at compile time as offsets from the word center (halfW/360 × fontPx/145 units, `params.side` flips it); word rect is metric-exact via `assets/fonts/char-widths.json`; word scrim = 2·halfW+380 × 2.28·fontPx; pairs with `fx.strikeflash` (full-frame fg flash with the same leader/return flicker grammar) and the `stormrail` paradigm (rain doubles + shadow flip at the same I); plate punch anchors at `punchOffset` ≈ 0.02 (the return stroke) |
+| `holoboot` | full volumetric boot behind the subject: a desk emitter dot pops (back.out scale), the projection cone SNAPS wide (scaleX 0.07→1 expo, 0.11s, then dips 0.55→0.95), a seed beam fires up from the emitter (scaleY power3.in, fades after contact), and the word boots with a RISING clip sweep (opacity instant at I−0.055, the reveal is the wipe) into a 7-layer projection stack (dark backing shadow / wide `palette.glow` blur / magenta + cyan chromatic fringes / `palette.core` word / scanline mask / climbing interference bands, band pitch 0.39×fontPx); contact at I+0.07 = brightness 2.3 flash + scaleX 1.07 / scaleY 0.91 squash held 2 frames + elastic settle + 1-frame x interference jumps; fringes blow ±8px then settle to the permanent ±2px registration offset; hold = bands climb −6 pitches, rotationY oscillates [0,6,−7,5,0], glow/cone breathe, emitter dot pulses, slow 1.028 loom; at `I + params.passAt` (≥ I+1.25, runway-guarded) a hand "passes through" the projection (skew 6/−4/0 + blur + fringe blowout + scaleY ripple — pure projection logic); exit at `min(heroOut−0.22, DUR−0.3)` = projector cut: brightness 2.4 → collapse to a horizontal line (scaleY 0.018) → to the base dot (scaleX 0.015), cone fades, dot pops 2.2× and dies. A second smaller emitter cone (`params.coneW`) rises from the desk under the holorail plate ALL video with baked flicker cycles + dot pulses, and gets its own projector cut at DUR−0.2 | word rect is metric-exact via `assets/fonts/char-widths.json` (cone width 2·halfW+80, emitter at cy+2.4·fontPx, all rig geometry derives from `halfW` + `fontPx`; scene scrim is a radial centered on the hero's frame fractions); pairs with `fx.holoflash` (cyan fg lock flash at I+0.075, radial at the same hero fractions) and the `holorail` paradigm (same sweep-boot + interference-glitch motif at low amplitude; the body cone is aimed at ITS plate); plate: grain-only (no punch) is the demo register, scene reaction = `plate.scrim`/`charge`/`dim` |
+| `biobloom` | bioluminescent BLOOM behind the subject: the abyss grade (`params.mood`) + a breathing vignette (6-key opacity cycle sized to the clip) sit on the room from t=0 — the world is underwater before anything speaks; a creature pre-glow (1.083×/0.717× fontPx ellipse) gathers with a double-beat anticipation at I−0.31 and crushes to a point at I−0.115; a dark pocket scrim (`plate.scrim`, 2·halfW+280 × 2.5·fontPx) opens behind the word zone at I−0.03; the word CONDENSES in (scale 2.35 crush power4.in over `params.crush`, blur 15→2, brightness 2.6→1.7) → 2-frame contact squash (1.09/0.93) → elastic settle while cyan light SPILLS onto the scene (radial at the hero's frame fractions: snap 0.55 at contact → 0.2 → shimmer keyframes); 6 luminous tendrils (paired blurred SVG strokes — glow w9/blur5 + core w3/blur1.1, accent/violet/ice alternating) draw outward from the word rect staggered 0.05s (stagger auto-clamps so the last filament completes before the sink); hold = glow breathes 8–14% (4-key scale/opacity), glow-layer flicker, two counter-drifting caustic gradients shimmer over the text zone, the bloom drifts slowly with the current (`params.drift` on the x channel); exit at `min(heroOut−0.2, DUR−0.3)` = the light SINKS — tendrils (via their HTML wrapper, never gsap-y on inner SVG), caustics, pocket, spill and the word all drift down (+14/+26) while dimming, word blurs out | tendril geometry is hand-authored from the demo and baked at compile time as offsets from the word center (x scaled by halfW/demoHalf, y by fontPx/120, endpoints frame-clamped); word rect is metric-exact via `assets/fonts/char-widths.json` (0.01em tracking); pairs with `fx.sporeburst` (seeded spore puffs burst PAST the bloom at contact in the fg layer, ballistic with slight sink) and the `planktonrail` paradigm (same glow-on motif at low amplitude + mote attraction anchored at the same I); plate: pushIn+grain (no punch) is the demo register — the demo's postfx profile was `push` |
+| `silkribbon` | aurora silk WRITTEN into the night sky behind the subject: the hero word is a sequential Hershey-stroke reveal (one `<path>` per pen stroke at constant pen speed, `gen-stroke-path.py` baked at compile time — any word, zero tuning) in a blurred halo (`params.haloWidth`, feGaussianBlur 7) + tight core (`params.coreWidth`, white drop-shadow), BOTH stroked by ONE userSpaceOnUse rose→teal→violet linearGradient with reflect spread; SIGNATURE: the gradient's x1/x2 translate f(t) from I−0.07 to the clip end (shift 1.5× the gradient span) so the aurora colors FLOW THROUGH the drawn ribbon during the hold; a soft light mote (blurred halo + core dot) rides the pen, hops at lifts, and blooms out 2.4× at the final stroke; scene reaction = two huge aurora blobs (teal top-left / rose top-right, frame-fraction geometry) drift the sky f(t) from t=0 at `params.wash` and DEEPEN to `params.deepen` as the ribbon writes, a top scrim (`plate.scrim`, 0.653H) charges in at I−0.34 (sky washout guard), a light spill (`params.spill`) tints the sky at I+0.1 once the ribbon completes and flickers gently, and the halo breathes (5-key opacity cycle) through the hold; gentle — no shake, no contact squash: the apex verb is the writing itself; writing window = `params.window` clamped so the ribbon finishes + holds before ENDT = DUR−0.04 | canvas/gradient/spill all derive from `params.targetWidth` (demo: 880 ink on a 1010×280 canvas, baseline 200; svgW = tw+130, spill = (tw+60)×0.51, gradient span = 0.6364·tw), centered at the scene-aware HG (pref top 18, the sky band — same as drawon); pairs with `fx.silkmotes` (seeded aurora motes rise near the ribbon during the hold, fg layer, demo spread fractions keep the face gap) and the `sheenrail` paradigm (same flow motif at low amplitude); plate: pushIn+grain (no punch) is the demo register — the demo's postfx profile was `push` |
+| `scopetrace` | the scope's own trace LEAPS off the band and WRITES the hero word behind the subject: a surge column (3px, bottom-anchored scaleY pop, landing at the pen-start point parsed from the baked path) jumps from the scope band at I−0.12; the word is a sequential Hershey-stroke reveal (one `<path>` per pen lift at constant pen speed, `gen-stroke-path.py` baked at compile time — any word, zero tuning; punctuation stripped for the pen) drawn CORE-ONLY in a thin phosphor stroke (`params.coreWidth`, bright `palette.bright` + accent drop-shadows — it is a trace, not a tube), nib rides `getPointAtLength` and pops 2.4× at DRAWN; the phosphor FILL (blurred halo strokes, `params.haloWidth`, blur 7) flicker-arrives AFTER the write at FLICK = DRAWN+`params.flickGap` (pre-arm 2 frames early, 5-step 1/0.25/1/0.55/1 blink, core dips 0.55 for a frame); hold = glow hum (7 Hz + 11.3 Hz sine keyframes, f(t)) + 1.6% breathe on an HTML wrapper with transformOrigin at the hero's frame fractions, ending exactly at the collapse; exit = the word COLLAPSES to a flatline (wrapper scaleY 0.02, 0.14s power3.in, same origin) + a horizontal flash bar (2·halfW wide at the word center) that shrinks out — scheduled at nextSpokenWord − `params.clearGap` (clamped ≥ FLICK+0.45, ≤ heroOut) so the trace clears BEFORE the next line speaks; scene reaction = phosphor radial scrim (`plate.scrim` at the hero fractions, I−0.18 → EXIT+0.05) + green spill sized from targetWidth (`params.spill`); second beat: a 1-frame phosphor pulse answers the FINAL transcript word — the same death beat the scoperail finale owns | trace geometry derives from `params.targetWidth` (svgW = tw+140, local baseline 215, ink center ≈ baseline−28 — the demo registration; surge x parsed from the first `M` of the path); centered at the scene-aware HG (pref top 25, ink height 115); pairs with the `scoperail` paradigm (tracewipe = the same pen-write at low amplitude; the paradigm's hero waveform kicks fire at the same word onsets) and needs no front fx; plate: grain-only (no punch) is the demo register |
+| `papermat` | STOP-MOTION PAPERCUT behind the subject: a torn-edge kraft mat (two seeded torn polygon layers) DROPS from above with steps(2) gravity and slaps down (squash → rest, soft blob shadow); then one torn cream chip per char (`palette.paper`/`paper2`, hero-font ink `palette.ink`) drops with steps(3) gravity + 1-frame overshoot at `I + i·params.step`, each announced by an anticipation shadow 3 frames early, landing crooked (seeded ±3° ±4px), settling through three 12fps poses, then holding an 8fps wobble (baked set chain — the stop-motion heartbeat) while the whole tableau breathes 1.6% (camera-push loom); scene reaction = a warm vignette (`params.vig`) charging with the landing; on the FINAL word the table BUMPS (y4, 1 frame) and the chips SCATTER off down-right steps(4) staggered 0.045s, the mat swept off last (disperse-on-last-word, `hero.exitAt` overrides) | chip geometry derives from `hero.fontPx` (demo ratios: tile 0.91×/1.31× fontPx, pitch tile+14, mat N·pitch+80 × 1.846× fontPx), width-fit shrinks type and chips together; pairs with `fx.paperscraps` (paper scraps puff at each chip contact, fg) and the `paperrail` paradigm (same place verb at low amplitude); plate: grain only is the demo register |
+| `centerfold` | POP-UP BOOK CENTERFOLD behind the subject: blue + cream 12-point paper starbursts (deterministic starPts polygon, `palette.accent`/`cream` fills with kraft-edge strokes) unfold on a baseline hinge (scaleY 0.03→1 back.out(1.6), cream staggered +0.06) starting I−0.272 while a blob shadow grows beneath; the hero word pops up at I in `params.segs` hinged clip-path segments (rotationX 85→0 back.out(1.4) staggered `params.segStagger` — the body's popup verb at full amplitude); two kraft struts lean in at I+0.33; backdrop + word wobble-settle TOGETHER (one `#cfWob` wrapper owns rotationX, 6-key) then breathe through the hold (word 5-key rotationX + shadow scaleX, both auto-squeezed into the window); scene reaction = a dusk radial scrim at the hero's frame fractions (`params.scrim`, bright-sky insurance) charging with the unfold; exit = the whole spread folds FLAT (segments rotationX 88 staggered, struts/bursts scaleY collapse cream-then-blue, scrim out) at `max(I+segStagger·(segs−1)+0.45, min(heroOut−0.33, DUR−0.39))` — the book closes before the next sentence | burst geometry derives from the word rect (metric-exact via char-widths: burstR = clamp(1.83·fontPx, 0.59·wordW, 0.42·H), box 2R+180 × 2R+fontPx, demo props scale at burstR/220), width-fit shrinks the type first; pairs with `fx.confetti` (seeded ballistic paper confetti launched from the hinge line at I+0.128, fg) and the `popuprail` paradigm (same baseline-hinge verb at low amplitude); plate: grain only is the demo register |
+| `chalkwrite` | NIGHT LECTURE behind the subject: the lower chalk band grows into a FULL deep-green board (scaleY 0→1 power3.out from the bottom edge at I−0.3, the room dims `params.dim` + vignette `params.vig` with it); the hero word is HAND-WRITTEN in chalk — sequential Hershey stroke reveal (drawon pattern, `gen-stroke-path.py` baked at compile time), dry/rough via seeded ±1px jitter on every pen point (`params.jitterSeed`), a blurred halo (`params.haloWidth`, feGaussianBlur 3.2, group opacity `params.halo`) under a tight core (`params.coreWidth`), a chalk-stick nib (rotated rect) riding the pen — while `params.dustN` dust specks fall from the nib along the path; at write-complete a hand-slap CLAP shakes the board 1 frame (set-chain y 3/−2/1/0; the dust burst lives in the rail, in FRONT: `fx.chalkclap`), then TWO violent accelerating underlines slash beneath (seeded waviness, power3.in, the nib rides them, dust kicks at the ends), the chalk flicks away, and the halo breathes (baked 1.6/3.7 Hz f(t)) through the hold with two slow motes drifting off the letters | geometry registers on the MEASURED ink box (the stroke path is parsed at compile time; ink CENTER lands on scene-aware HG.y, pref top 44): the board rect (`params.boardGap`×inkH above the ink, bottom flush with the frame, width = the body strip), the underlines (inkL+14→inkR−4 at inkBot+30/+50) and the fg clap point (the pen's LAST contact point → HG.clapX/Y/T) all derive from it; x defaults to the board's LEFT margin + tw/2 — a hand writes from the left, never centered on the subject (`theme.hero.x` overrides); pairs with `fx.chalkclap` (12 seeded radial dust specks + a blurred puff at DRAWN, fg) and the `chalkrail` paradigm (same scribble verb at low amplitude); plate: grain only is the demo register; needs `python3` |
+| `spraytag` | STREET TAG behind the subject: the dusk wall dims (`params.dim`) + a radial scrim charges (`params.scrim`) at I−0.42 as the writer steps up; the can RATTLES at the pen-start point (6 seeded set-chain nib jitters, I−0.30→I−0.02), then the hero word is spray-written stroke by stroke — sequential Hershey dash reveal at constant pen speed (`gen-stroke-path.py` baked at compile time) — as a TRIPLE stack per stroke: fat dark under-stroke `palette.under` (`params.underWidth`, sky-contrast armor) + blurred overspray halo (`params.haloWidth`, feGaussianBlur 7, group opacity `params.haloOpacity`) + wet paint core (`params.coreWidth`, drop-shadow), the glowing nib (r9, `palette.nib`) riding each stroke; `params.osprayN` seeded overspray dots pop near the nib as it passes; nib throws off 2.6× at DRAWN; through the hold `params.drips` seeded DRIPS (paint→`dripMid`→`dripLo` gradient bars) grow from painted low points (x-separated >110px) and KEEP growing, the halo hums (7/11 Hz baked f(t)) and the whole tag looms 1.014; writing window = `params.window` (demo 0.58s) clamped so write + splat + drip fit before ENDT = DUR−0.04 | geometry registers on the MEASURED ink box (ink CENTER lands on scene-aware HG.y, pref top 26 — the sky band, crossing the subject silhouette is the point; tag centers on the hero anchor, `targetWidth` capped at W−140); the pen-finish point is baked onto HG.splatX/Y/T for the fg splat; pairs with `fx.paintsplat` (hot `em2` ring + paint ring + seeded ballistic droplets at DRAWN, fg, in FRONT of the subject) and the `markerrail` paradigm (same flick verb at low amplitude); plate: punch with `punchOffset` ≈ window+0.05 so the punch lands on the splat, not the hero onset; needs `python3` |
+| `brushwrite` | SUMI-E GESTURE behind the subject: a warm paper wash (`palette.wash`/`wash2` radial, `targetWidth`+380 × `params.washH`) charges at I−0.18 to `params.wash`, settling to `params.washSettle` through the hold; the brush SLAPS down at the first pen point — a start-SPLAT (irregular ink ellipse rotated −24° + 5 seeded satellite dots, scale 0.35→1 power3.out 0.12s; the fg fleck pass rides `fx.brushflecks`) — then the hero word is written in ONE sequential gesture (Hershey dash reveal at constant pen speed, `gen-stroke-path.py` baked at compile time) as a FOUR-layer stack per stroke: blurred bleed (`params.bleedWidth`, feGaussianBlur 6, group hidden until the hold) under fat/mid/core widths (`fatWidth` 0.25 / `midWidth` 0.6 / `coreWidth` 1.0 stroke-opacity = pressure-tapered wet brush), the round ink nib (r7.5, `palette.nib`) riding the pen and flicking off (+42,−30, scale 1.9) at DRAWN; ≤`params.spatterN` spatter droplets eject PERPENDICULAR at the sharpest-curvature points of the gesture (angle-delta > 0.55 rad, te-separated > 0.045s); through the hold the ink BLEEDS into the paper (bleed group fades to `params.bleed` over ≤1.7s) and the whole work breathes 0.6% (`params.breatheHz` baked f(t), svgOrigin = ink center); then the vermilion SEAL chop (`params.sealGlyph`, `palette.seal`/`sealMid`/`sealLo` radial face, `fonts.seal` glyph) stamps at DRAWN+`params.sealDelay` — power4.in crush 0.09s → 2-frame squash → elastic settle + 3 seeded red flecks — skipped entirely if the clip ends too soon; writing window = `params.window` (demo 0.45s) clamped so write + seal + bleed fit before ENDT = DUR−0.04 | geometry registers on the MEASURED ink box (ink CENTER lands on scene-aware HG.y, pref top 19 — the sky band, crossing the subject silhouette is the point; gesture centers on the hero anchor, `targetWidth` capped at W−240 — on scenes with a dark object near the pen start, set `theme.hero.x` so the slap-down lands clear, like the demo's 864); the pen-START point is baked onto HG.fleckX/Y/T for the fg flecks and the seal sits at (inkR−103, inkBot+72) clamped on frame (`params.sealDx/sealDy` override); pairs with `fx.brushflecks` (seeded upward ballistic ink flecks at the slap-down, fg, in FRONT of the subject) and the `brushrail` paradigm (same brush-wipe verb at low amplitude); plate: punch with `punchOffset` ≈ window+`sealDelay` so the punch lands on the seal CONTACT, not the hero onset; needs `python3` |
+| `ransomnote` | RANSOM NOTE slam behind the subject: one cutout chip per letter (4 recipes cycled, seeded ±13% sizes around `hero.fontPx`, alternating-sign rotations ±2–5°, misaligned baselines ±2–6px, seeded tear-polygon edges) slams in oversized (scale 1.5, rot×1.8, flight drop-shadow) at S_k = I + 0.01 + `params.step`·k, crushes power3.in over 0.085s, and on contact the shadow POPS tight (1-frame filter swap) → 2-frame squash 1.07/0.93 → elastic settle; when the LAST letter lands the whole word takes a collective 1-frame JOLT (y6 → power3.out) + a scene pulse (`params.pulse` full-frame dark blink); hold = slow 5-key loom (the crooked grid never straightens); exit = letters RIPPED off one by one (rot+±15–22° throw, y−34, fade, 1-frame tear flash under each) at ripT = min(lastWord − `params.ripLead`, DUR-clamped), ≥ jolt+0.45; scene reaction = collage scrim (`params.scrim` top-dark gradient) charges at I−0.07, out with the rip | width-fit measures each glyph IN ITS OWN recipe font (`assets/fonts/char-widths.json`) + 0.20em chip padding + 6px margins so the collage never overflows; chip chrome (shadows, space width) scales with fontPx from the 130px demo cut; the setpiece RECOMPUTES `plate.punchOffset` = 0.01 + step·(N−1) + crush from the real letter count so the plate punch always lands on the collective jolt, whatever the hero word length; pairs with the `ransomrail` paradigm (same paste verb + tear flashes at low amplitude, same recipe classes/seeded tear polygon emitted into both layers); no front fx — the flashes live inside the chips |
+| `inkbloom` | INK DROP IN STILL WATER behind the subject: paper-white radial washes charge the two text zones (`palette.wash` rail wash from t≈0.15, PERSISTS to clip end so the closing body lines keep their ground — it registers on the body row geometry `body.bottomPx`/`rowGap`; `palette.washApex` apex wash at I−0.077, out with the bloom) and a gentle vignette (`params.vig`) STILLS the world while the ink blooms; the drop (ink teardrop, `params.fall` 0.15s) appears above the word point at I−0.08, swells, falls power2.in with a scaleY stretch, squashes 1.7/0.35 on contact (2 frames) and merges into the BLOOM — 3 stacked blurred irregular ink ellipses (`palette.ink`, opacity snaps 0.82/0.62/0.5 then decays) scaling at different rates with counter-rotations (expo.out 1.15/1.35/1.5s) + 2 thin concentric ripple rings expanding 7.2×/9.6× on the water surface; the hero words RESOLVE out of the blob (opacity snaps, blur 16→0 + scale 1.12→1 power2.out) — the FIRST at contact+0.02, the following at their own spoken times (multi-word hero, per-word hand-off); through the hold the glyph edges BREATHE (baked 5-key blur keyframes per word, alternating 0.66/0.5s), the group looms 1.018 and two faint ink wisps curl off the word top (C+0.573/C+0.753, fit-guarded); exit: RE-DISSOLVE (blur 11 + scale 1.15 + fade, 0.52s power1.in) at XOUT = min(I+`params.maxHold`, next body line − `params.clearGap`, DUR−0.6) — the ink clears before the next thought needs the reader | geometry derives from the measured word rect (`assets/fonts/char-widths.json`; kx = halfW/demoHalf, ky = fontPx/132 scale the demo's blob/ring/wisp anchors; pref top 25 — the sky band, crossing the subject silhouette is the point); dark `palette.ink` + its paper washes carry the contrast on bright skies; pairs with the `inkrail` paradigm (same bleed verb at low amplitude); plate: quiet `pushIn`, no punch — the bloom is liquid, not percussive |
+
+Inline setpieces (`hero.inline: true`) live inside the body paradigm — the hero
+word stays in `lines`. Embed setpieces own the word: leave it OUT of `lines`
+(rail↔climax hand-off), except `panel` + `redact-until-hero`, where the words
+appear in the log as `█████` until the decode locks.
+
+A setpiece may additionally return `fgCss/fgHtml/fgJs` — those parts are merged
+into the fg alpha page (rail.html), for furniture that must ride ABOVE the matte
+(e.g. a verbatim chip that may never be occluded) while the setpiece scenery
+stays embedded behind the subject.
+
+## Linkages
+
+- `redact-until-hero` — panel log shows hero words as blocks; un-redacts at lock
+- `corrupt-on-last-word` — panel jitters + hue-shifts on the final word
+- `disperse-on-last-word` — every visible poem letter scatters back to dust
+- `field-is-the-apex` — (lastpage) the blurred future-field rack-focuses at the
+  apex: every faint line was the apex word all along; the main instance holds,
+  the rest re-blur and die
+
+## Hard rules inherited (do not relax)
+
+- determinism: paused GSAP on `window.__timelines["main"]`, seeded PRNG only,
+  set-chains / keyframes, no Math.random/Date.now/CSS-keyframes
+- 80 ms word sync (timings come from transcript.json via the strict matcher;
+  any uncovered transcript word is a compile ERROR — verbatim completeness)
+- apex owns the frame: fg furniture must avoid the setpiece rect or yield
+  (`body.yield`) during the hero window
+- plate punch/shake ALWAYS post-composite (`_postfx.sh`) so subject + text +
+  plate move as one photographed frame (matte never desyncs)
+
+## SVG gotchas (paid for, do not rediscover)
+
+- dash patterns restart on EVERY subpath → sequential per-stroke paths, never
+  one dashoffset across a multi-stroke word
+- round linecap renders a DOT at dashoffset=len → hide each stroke until its turn
+- inline-block trailing spaces collapse → word gaps via margin, not text spaces
+- SVG-font glyph y is UP → flip when converting (gen-stroke-path.py does)
+- NEVER gsap x/y/scale on raw SVG children: it runs `_parseTransform`/getBBox, and
+  zero-area shapes (fan-kit slivers) trip GSAP's bbox hack → `appendChild` on a
+  null docElement in injected-gsap contexts (preview-frames, renderer). Jitter
+  SVG pieces via `attr:{transform:"translate(...)"}` only; scale/loom belongs on
+  an HTML wrapper div. Nuance: a ROOT `<svg>` inside a div has null
+  ownerSVGElement → GSAP classifies it as HTML (CSS transforms, no getBBox), so
+  scale/skew on the svg root is safe — but copying that onto an inner `<g>`
+  becomes the fatal class. attr transforms can't TWEEN — use frame-quantized
+  step chains (identical on screen at 24fps)
+
+## Timeline ownership rules (audit-derived, do not relax)
+
+- ONE owner per (target, property) at any instant. A duration tween re-renders
+  every tick until it ends — any set/tween on the same property inside that
+  window gets visually overwritten a frame later (1-frame ghosts, flash-backs).
+  Known shapes: yield dim vs line exit; yield restore vs powercut set-chain;
+  per-word line-y bounces with word gaps < 0.22s. The rail emitter guards these
+  (bounce ownership tracker, dim clamped ≥ line-in, restore only with ≥0.3s
+  runway before exit — else the line exits dimmed, by design).
+- Inverted clamps: `Math.max(lo, Math.min(hi, x))` with lo > hi silently pins to
+  lo. When a lockup is wider than the frame, CENTER it (x = W/2) instead of
+  clamping — decorative bleed must be symmetric.
+- The overflow gate only measures elements with direct text nodes — SVG-painted
+  setpieces (mask text + rects) are invisible to it. Do not read its "ok" as
+  proof for svg lockups; judge those on the preview frames.
+
+## theme.json — full schema
+
+```json
+{ "dna": "<themes/*.json name>",            // required
+  "lines": [["word","word",...], ...],       // required — verbatim transcript tokens, in order,
+                                             //   INCLUDING punctuation ("size.", "noise.")
+  "minors": ["word", ...],                   // optional — theme's inline emphasis treatment
+  "hero": { "match": "word or phrase",       // required — exact transcript tokens (case-insensitive,
+                                             //   punctuation-stripped match); first occurrence wins
+            "text": "DISPLAY FORM",          // optional display override
+            "out": 5.9, "exitAt": 3.3 },     // optional window overrides (seconds)
+  "width": 1280, "height": 720,              // optional, default 1280x720 (theme DNAs are tuned
+                                             //   for 16:9; vertical needs a DNA variant)
+  "fps": 24,                                 // optional — matte.fps is AUTHORITATIVE when present
+  "panelHeader": "..." }                     // optional (panel paradigm)
+```
+
+Scene awareness (inherited from the existing typography system): when
+`safe-zones.json` is present the compiler re-anchors the hero setpiece to the
+measured occlusion bands (`heroBands.profile`, 18–55% occlusion, closest to the
+setpiece's preferred height) and `heroAnchor.centerXPct`, width-fits the hero
+font to the actual word, and docks panel/poem furniture on
+`subject.clearerSide`. Explicit `theme.json` values > scene auto > DNA fallback.
+
+Expected (benign) log noise: `[Browser:REQUESTFAILED] GET source.mp4
+net::ERR_ABORTED` during the fg-layer page load, reel-glyph overflow lint
+lines, and `media_missing_data_start` — all cosmetic; the render is good if
+render-theme.sh exits 0 and prints the gates summary.
+
+## Authoring a project (this is ALL a user writes)
+
+`<project>/theme.json`:
+
+```json
+{
+  "dna": "ordnance",
+  "lines": [
+    ["The", "stars", "were", "only", "limited"],
+    ["by", "the", "pixel", "size."],
+    ["It's"],
+    ["what", "you", "can", "actually"],
+    ["recover", "from", "the", "noise."]
+  ],
+  "minors": ["stars"],
+  "hero": { "match": "remarkable" }
+}
+```
+
+- `lines` follow the transcript verbatim, in order (compile error otherwise);
+  every transcript word must be covered by `lines` ∪ `hero.match` — the example
+  above omits "remarkable" from `lines` precisely because `hero.match` covers it
+  (it slots between `["It's"]` and `["what",...]`)
+- leave the hero word(s) out of `lines` for embed setpieces; keep them for
+  inline setpieces and for panel+redact
+- `takeover`: each line is one CARD — group by beat (1–2 words), not subtitle
+  length; `panel` scrolls automatically past ~5 lines (terminal scroll)
+- the ordnance "charge" is an edge vignette + rail yield (the center stays
+  clean by design) — judge it at the frame corners, not the center
+- `minors`: words that get the theme's inline emphasis treatment
+- preview first: `node scripts/make-theme.cjs <project>` then
+  `node scripts/preview-frames.cjs <project> <t1> <t2> ...` (Visual QA)
+- then: `bash scripts/render-theme.sh <project>` → **`final_fx.mp4`** (the
+  deliverable; `final.mp4` is pre-plate-reaction)
+
+Prereqs identical to other modes — `prepare.sh` outputs: transcript.json,
+frames_fg/, matte.fps, safe-zones.json (scene awareness), source.mp4.
+frames_bg/ is only needed by preview-frames.cjs, not by the render.
+
+## Adding a theme DNA
+
+Copy a `themes/*.json`, change identity fields. You may ONLY combine existing
+paradigm/setpiece/linkage names — if the look you want needs a new mechanism,
+that is a registry contribution (this file + make-theme.cjs), reviewed like an
+engine change. A DNA that needs per-word visual tuning to ship is rejected:
+**any input, zero hand-fixing** is the acceptance bar (the draw-on lesson).
diff --git a/.claude/skills-media/embedded-captions/themes/anchor.json b/.claude/skills-media/embedded-captions/themes/anchor.json
new file mode 100644
index 000000000..4b45e0acd
--- /dev/null
+++ b/.claude/skills-media/embedded-captions/themes/anchor.json
@@ -0,0 +1,27 @@
+{
+  "name": "anchor",
+  "voice": "the quiet professional — a verbatim rail that simply reads (2-frame fade-ups, accent emphasis), and one climax that settles into the scene behind the subject with a drawn accent underline. No spectacle: discipline IS the style. This is the conservative default that replaced Standard mode.",
+  "when": "explainers, tutorials, product walkthroughs, corporate and news-adjacent clips — anywhere every word must be read and nothing should show off. Pick it when unsure.",
+  "register": "calm",
+  "fonts": { "body": "Sora", "hero": "Sora", "tag": "Sora" },
+  "palette": { "body": "#F2EFE9", "accent": "#D9B98C", "em": "#EFCB9A" },
+  "body": {
+    "paradigm": "rail",
+    "layer": "fg",
+    "fontPx": 46,
+    "bottomPx": 96,
+    "letterSpacing": "0.012em",
+    "entrance": "fade",
+    "exit": "fade",
+    "minorScale": 1.0,
+    "yield": { "dim": 0.55, "pre": 0.2, "post": 0.9 }
+  },
+  "hero": {
+    "setpiece": "settle",
+    "layer": "bg",
+    "fontPx": 150,
+    "params": {}
+  },
+  "plate": { "dim": 0.16, "pushIn": 0.012, "grain": 5 },
+  "linkages": []
+}
diff --git a/.claude/skills-media/embedded-captions/themes/arcade.json b/.claude/skills-media/embedded-captions/themes/arcade.json
new file mode 100644
index 000000000..614f1bcaa
--- /dev/null
+++ b/.claude/skills-media/embedded-captions/themes/arcade.json
@@ -0,0 +1,51 @@
+{
+  "name": "arcade",
+  "voice": "8-bit cabinet attract mode — the whole frame plays through a CRT (scanlines + vignette) above a bordered HUD bar (1UP blinking on the classic cadence, CREDIT 01) where every word coin-pops in on steps(2) with a 1-frame white blip; emphasis words run a cyan→magenta palette swap. The apex is a BOSS INTRO behind the subject: the room dims, WARNING blinks twice, ~64 seeded pixel blocks fall quantized into a matrix grid over the word rect, then the word flashes ON in Press Start 2P with chromatic ghost layers + a 3-frame palette strobe while letterbox bars slam in and a HI-SCORE odometer rolls top-right; everything dissolves checkerboard and the blocks drop away.",
+  "when": "gaming, retro-tech, playful hype, launches, achievement/level-up beats, '像素/街机/8-bit/打游戏' asks — anything that should read as an arcade cabinet boss fight. Loud register; the boss dim + dark HUD bar bring their own contrast on bright skies.",
+  "register": "loud",
+  "fonts": { "body": "Press Start 2P", "hero": "Press Start 2P", "tag": "Press Start 2P" },
+  "palette": {
+    "body": "#FFFFFF",
+    "accent": "#00E5FF",
+    "magenta": "#FF2E88",
+    "yellow": "#FFE600",
+    "credit": "#7ADCFF"
+  },
+  "body": {
+    "paradigm": "hudrail",
+    "layer": "fg",
+    "fontPx": 26,
+    "bar": { "h": 70, "inset": 24, "bottom": 50 },
+    "tags": { "left": "1UP", "right": "CREDIT 01" },
+    "scan": 0.06,
+    "textTransform": "uppercase",
+    "yield": { "dim": 0.55, "pre": 0.09, "post": 1.04 }
+  },
+  "hero": {
+    "setpiece": "bossintro",
+    "layer": "bg",
+    "fontPx": 84,
+    "params": {
+      "seed": 13013,
+      "rows": 4,
+      "tag": "WARNING",
+      "flashDelay": 0.14,
+      "hold": 1.24,
+      "letterbox": 44
+    }
+  },
+  "fx": { "coinflash": 0.55 },
+  "plate": {
+    "dim": 0.58,
+    "punch": 0.04,
+    "punchDecay": 9,
+    "punchOffset": 0.14,
+    "shakeAmpX": 7,
+    "shakeAmpY": 5,
+    "shakeHz": 12,
+    "shakeDecay": 7,
+    "shakeWindow": 0.6,
+    "grain": 6
+  },
+  "linkages": []
+}
diff --git a/.claude/skills-media/embedded-captions/themes/aurora.json b/.claude/skills-media/embedded-captions/themes/aurora.json
new file mode 100644
index 000000000..dec8193d0
--- /dev/null
+++ b/.claude/skills-media/embedded-captions/themes/aurora.json
@@ -0,0 +1,41 @@
+{
+  "name": "aurora",
+  "voice": "polar-night elegance — the sky is alive and every caption is woven light. Two huge aurora blobs drift the top of frame all clip; body words are silk serif ink whose rose→teal→violet sheen drifts continuously through the letters (emphasis words get one bright highlight sweep), lines share two coexisting rows like a woven couplet and dissolve UPWARD into drifting light streaks. The apex is a SILK RIBBON: the hero word is hand-WRITTEN into the sky behind the subject stroke by stroke (single-line script font, blurred halo + bright core, a light mote riding the pen) — and the signature: the aurora gradient keeps FLOWING through the drawn ribbon during the hold while a soft spill tints the sky and light motes rise past the subject. Gentle — no shake.",
+  "when": "dreamy / romantic / wonder content, night-sky and travel pieces, poetry, weddings, elegant brand films, '极光/丝带/优雅手写字幕' asks — anything that should feel written by light rather than printed. Soft register; the apex scrim + dark understroke carry contrast on bright skies.",
+  "register": "elegant",
+  "fonts": { "body": "Cormorant Garamond", "strokeFont": "HersheyScript1.svg" },
+  "palette": {
+    "body": "#F2EFF7",
+    "rose": "#FF9EC4",
+    "accent": "#7FE0D4",
+    "violet": "#B9A8FF",
+    "deep": "#070C24"
+  },
+  "body": {
+    "paradigm": "sheenrail",
+    "layer": "fg",
+    "fontPx": 48,
+    "bottomPx": 76,
+    "rowDy": 58,
+    "band": { "w": 860, "h": 170 },
+    "streaks": 4,
+    "seed": 20260611,
+    "yield": { "dim": 0.5, "pre": 0.16, "post": 0.62 }
+  },
+  "hero": {
+    "setpiece": "silkribbon",
+    "layer": "bg",
+    "params": {
+      "targetWidth": 880,
+      "window": 0.68,
+      "haloWidth": 18,
+      "coreWidth": 6,
+      "wash": 0.12,
+      "deepen": 0.2,
+      "spill": 0.3
+    }
+  },
+  "fx": { "silkmotes": 6, "seed": 20260612 },
+  "plate": { "scrim": 0.72, "pushIn": 0.012, "grain": 5 },
+  "linkages": []
+}
diff --git a/.claude/skills-media/embedded-captions/themes/biolume.json b/.claude/skills-media/embedded-captions/themes/biolume.json
new file mode 100644
index 000000000..d4a607905
--- /dev/null
+++ b/.claude/skills-media/embedded-captions/themes/biolume.json
@@ -0,0 +1,35 @@
+{
+  "name": "biolume",
+  "voice": "deep-sea bioluminescence — the clip sinks into an abyss grade with a breathing vignette and every caption is a living light. Body words GLOW ON like jellyfish (2-frame opacity + radial bloom from center while a cyan glow breathes in), emphasis words pulse a slow double-beat (propulsion), lines float on a gentle drift across two coexisting rows and SINK away dimming; seeded plankton motes drift the open water and the ones ringing the apex get pulled into the bloom. The apex is a bioluminescent BLOOM behind the subject: a creature pre-glow double-beats and crushes to a point, the word condenses in, six luminous tendrils draw outward like filaments while caustics shimmer and cyan light spills onto the scene — then all the light sinks back into the deep.",
+  "when": "ocean / nature / science-wonder docs, dreamy or meditative monologues, slow night-time reveals, 'underwater / 深海 / 发光水母' asks — anything that should feel alive and submerged rather than printed. Soft register; the abyss grade + pocket scrim make their own contrast on bright scenes.",
+  "register": "dreamy",
+  "fonts": { "body": "Fredoka", "hero": "Fredoka", "tag": "Fredoka" },
+  "palette": {
+    "body": "#E9FFFA",
+    "accent": "#6DF2E0",
+    "violet": "#9D7BFF",
+    "ice": "#8FE8FF",
+    "core": "#F2FFFD",
+    "em": "#F4FFFD",
+    "mote": "#96F5E8",
+    "spore": "#BDFFF4"
+  },
+  "body": {
+    "paradigm": "planktonrail",
+    "layer": "fg",
+    "fontPx": 44,
+    "bottomPx": 70,
+    "rowDy": 58,
+    "motes": { "count": 12, "near": 5, "seed": 2929 },
+    "yield": { "dim": 0.55, "pre": 0.17, "enter": 0.8, "post": 0.63 }
+  },
+  "hero": {
+    "setpiece": "biobloom",
+    "layer": "bg",
+    "fontPx": 120,
+    "params": { "crush": 0.11, "drift": -30, "mood": 0.92 }
+  },
+  "fx": { "sporeburst": 7, "seed": 2930 },
+  "plate": { "scrim": 0.55, "pushIn": 0.012, "grain": 5 },
+  "linkages": []
+}
diff --git a/.claude/skills-media/embedded-captions/themes/brush.json b/.claude/skills-media/embedded-captions/themes/brush.json
new file mode 100644
index 000000000..d5ea0d96a
--- /dev/null
+++ b/.claude/skills-media/embedded-captions/themes/brush.json
@@ -0,0 +1,74 @@
+{
+  "name": "brush",
+  "voice": "sumi-e study — the lower third is a washi paper band (deckle-edged under-sheets, warm translucent sheet) where every word is brush-WIPED on behind a traveling brush-head shadow in a Mincho serif, seeded ±1° tilt; emphasis words get a double curved ink underline drawn beneath, and spent lines are wiped OFF right-to-left like a wet cloth. At the apex a warm paper wash charges behind the subject and the hero word is written in ONE violent calligraphic gesture — a pressure-tapered wet brush (four stacked stroke widths) slapping down on a start-splat, spattering droplets at the sharpest curves, ink flecks kicking past the subject — then the ink BLEEDS into the paper through the hold and a vermilion SEAL chop stamps the work with the plate punch.",
+  "when": "calm-authority explainers, craft / design / philosophy / Japan-adjacent content, tea-ceremony-paced brand films, meditation and writing channels — anything that wants ink-and-paper elegance with one violent flourish. The dark ink needs a mid/bright scene band (the paper wash supplies its own ground on bright skies).",
+  "register": "contemplative-elegant",
+  "fonts": {
+    "body": "Shippori Mincho",
+    "seal": "Shippori Mincho",
+    "strokeFont": "HersheyScript1.svg"
+  },
+  "palette": {
+    "ink": "#19120b",
+    "nib": "#1a130c",
+    "body": "#221a12",
+    "ulInk": "#2a1c12",
+    "bh": "#281e14",
+    "paperHi": "#efe8d7",
+    "paperLo": "#e7dfcb",
+    "sheetHi": "#f5efe2",
+    "sheetLo": "#ece4d2",
+    "wash": "#f6f0e2",
+    "wash2": "#f4edde",
+    "seal": "#d24a32",
+    "sealMid": "#c03422",
+    "sealLo": "#a92a1a",
+    "sealText": "#f7efe2",
+    "accent": "#c03422"
+  },
+  "body": {
+    "paradigm": "brushrail",
+    "layer": "fg",
+    "fontPx": 44,
+    "weight": 600,
+    "strip": { "w": 820, "h": 90, "bottomPx": 61 },
+    "maxHold": 0.78,
+    "seed": 20260611,
+    "yield": { "dim": 0.55, "pre": 0.16, "post": 0.46 }
+  },
+  "hero": {
+    "setpiece": "brushwrite",
+    "layer": "bg",
+    "params": {
+      "targetWidth": 760,
+      "window": 0.45,
+      "bleedWidth": 16,
+      "fatWidth": 18,
+      "midWidth": 10,
+      "coreWidth": 5,
+      "spatterN": 6,
+      "wash": 0.34,
+      "washSettle": 0.27,
+      "washH": 420,
+      "bleed": 0.38,
+      "breatheHz": 0.55,
+      "sealGlyph": "観",
+      "sealDelay": 0.04,
+      "sealSize": 64,
+      "seed": 380611
+    }
+  },
+  "fx": { "brushflecks": 6, "seed": 20260611 },
+  "plate": {
+    "punch": 0.04,
+    "punchDecay": 9,
+    "punchOffset": 0.49,
+    "shakeAmpX": 7,
+    "shakeAmpY": 5,
+    "shakeHz": 12,
+    "shakeDecay": 7,
+    "shakeWindow": 0.6,
+    "grain": 6
+  },
+  "linkages": []
+}
diff --git a/.claude/skills-media/embedded-captions/themes/chalkboard.json b/.claude/skills-media/embedded-captions/themes/chalkboard.json
new file mode 100644
index 000000000..9b9d509d8
--- /dev/null
+++ b/.claude/skills-media/embedded-captions/themes/chalkboard.json
@@ -0,0 +1,52 @@
+{
+  "name": "chalkboard",
+  "voice": "night lecture — the lower third is a worn deep-green chalk band where every word is SCRIBBLED in fast chalk (2-frame pop + scribble reveal + dust puff, seeded crooked), emphasis gets double underline dashes and the final word lands in yellow chalk; between sentences an ERASER SWIPE smears the old words off and leaves ghost smudges. At the apex the band grows into a full blackboard behind the subject and the hero word is HAND-WRITTEN 130px tall in chalk stroke by stroke (jittered nib, dust falling from the pen), finished with a hand-slap dust clap and two violent underlines, then the halo breathes.",
+  "when": "education/explainers, science and lecture content, teacher channels, documentary asides, 'professor energy' brand spots. Reads as handwriting, so it suits thoughtful pacing; the deep-green board supplies its own contrast on bright scenes.",
+  "register": "scholarly-warm",
+  "fonts": { "body": "Caveat", "tag": "Caveat", "strokeFont": "HersheyScript1.svg" },
+  "palette": {
+    "body": "#f3f6ee",
+    "em": "#f3d96b",
+    "accent": "#fbf9ef",
+    "chalk": "#fbf9ef",
+    "dust": "#f6f4e9",
+    "board": "#1d3328",
+    "boardHi": "#22392c",
+    "boardLo": "#182b22",
+    "bandHi": "#23392d",
+    "bandLo": "#16271f",
+    "rim": "#8a6a48",
+    "rimLo": "#5f452c"
+  },
+  "body": {
+    "paradigm": "chalkrail",
+    "layer": "fg",
+    "fontPx": 52,
+    "strip": { "w": 1200, "h": 148, "bottomPx": 0 },
+    "rows": [26, 82],
+    "tag": "OBSERVATORY — NIGHT LECTURE · wk 07",
+    "seed": 13,
+    "eraseDelay": 0.23,
+    "yield": { "dim": 0.55, "pre": 0.07, "post": 0.41 }
+  },
+  "hero": {
+    "setpiece": "chalkwrite",
+    "layer": "bg",
+    "params": {
+      "targetWidth": 860,
+      "window": 0.78,
+      "coreWidth": 7,
+      "haloWidth": 14,
+      "halo": 0.18,
+      "dustN": 8,
+      "seed": 7,
+      "jitterSeed": 21,
+      "dim": 0.22,
+      "vig": 0.35,
+      "boardGap": 0.554
+    }
+  },
+  "fx": { "chalkclap": 12, "seed": 13 },
+  "plate": { "grain": 5 },
+  "linkages": []
+}
diff --git a/.claude/skills-media/embedded-captions/themes/dossier.json b/.claude/skills-media/embedded-captions/themes/dossier.json
new file mode 100644
index 000000000..7ccecf4dd
--- /dev/null
+++ b/.claude/skills-media/embedded-captions/themes/dossier.json
@@ -0,0 +1,56 @@
+{
+  "name": "dossier",
+  "voice": "cold-war case file — the clip is typed onto a manila transcript strip (carbon Special Elite hammered in char by char on seeded baselines, red ink circles around the evidence), and the verdict lands as a RUBBER STAMP behind the subject: the footage goes sepia-archival, the stamp crushes in at -8°, double-strike ghost, thin-ink patches, then holds DEAD STILL — sold only by a breathing paper indent — until the page is filed away with a mechanical yank.",
+  "when": "investigations, exposés, true-crime, document-driven storytelling, 'the record shows' narration, declassified/archival framing. Works on any luma (the manila strip is self-lit; the stamp brings its own sepia charge).",
+  "register": "archival-noir",
+  "fonts": { "body": "Special Elite", "hero": "Special Elite", "tag": "Special Elite" },
+  "palette": {
+    "body": "#2b2722",
+    "accent": "#b3271e",
+    "paper": "#d8c49a",
+    "ink": "#8a6f3f",
+    "fleck": "#8e1f17"
+  },
+  "body": {
+    "paradigm": "carbonstrip",
+    "layer": "fg",
+    "fontPx": 40,
+    "strip": { "w": 764, "h": 132, "bottomPx": 4 },
+    "rows": [36, 82],
+    "header": "CASE N°018 — TRANSCRIPT OF RECORDING",
+    "watermark": "CONFIDENTIAL",
+    "seed": 180618,
+    "yield": { "dim": 0.55, "pre": 0.02, "post": 0.41 }
+  },
+  "hero": {
+    "setpiece": "rubberstamp",
+    "layer": "bg",
+    "fontPx": 120,
+    "params": {
+      "crush": 0.074,
+      "hold": 2.02,
+      "rotation": -8,
+      "paperRot": 2.4,
+      "sepia": 0.14,
+      "patches": [
+        [27, 36, 0.72],
+        [71, 68, 0.57]
+      ]
+    }
+  },
+  "fx": { "inkflecks": 12, "seed": 180618 },
+  "plate": {
+    "charge": 0.32,
+    "dim": 0.26,
+    "punch": 0.04,
+    "punchOffset": 0.074,
+    "punchDecay": 9,
+    "shakeAmpX": 7,
+    "shakeAmpY": 5,
+    "shakeHz": 12,
+    "shakeDecay": 7,
+    "shakeWindow": 0.6,
+    "grain": 6
+  },
+  "linkages": []
+}
diff --git a/.claude/skills-media/embedded-captions/themes/graffiti.json b/.claude/skills-media/embedded-captions/themes/graffiti.json
new file mode 100644
index 000000000..842273915
--- /dev/null
+++ b/.claude/skills-media/embedded-captions/themes/graffiti.json
@@ -0,0 +1,62 @@
+{
+  "name": "graffiti",
+  "voice": "street bombing run — the lower third is a marker rail where words FLICK on crooked like fast handstyles (1-frame squeak skew, seeded rotation, back.out settle); emphasis words take alternating paint colors (yellow/magenta) with a spray-underline swoosh + overspray dots, spent lines are ROLLER-BUFFED away by a gray paint roller whose wet smear lingers, and the final word lands BIG in yellow with the punch. At the apex a writer steps up behind the subject: the dusk wall dims, the can RATTLES, and the hero word is spray-TAGGED stroke by stroke in fat yellow paint (dark under-stroke armor + soft overspray halo + glowing nib), drips grow from the low points through the hold and a magenta paint splat pops at the pen-finish.",
+  "when": "street culture, hip-hop / rap, sneaker and fashion drops, urban sports, skate/BMX, rebellious brand spots — anything that wants real handstyle energy. Loud register; the dark under-stroke armors the tag against bright skies.",
+  "register": "loud-street",
+  "fonts": {
+    "body": "Permanent Marker",
+    "tag": "Permanent Marker",
+    "strokeFont": "HersheyScript1.svg"
+  },
+  "palette": {
+    "body": "#f7f2e7",
+    "accent": "#ffd23f",
+    "em": "#ffd23f",
+    "em2": "#ff2e88",
+    "under": "#241008",
+    "nib": "#fff6d9",
+    "dripMid": "#eab928",
+    "dripLo": "#d8a51d",
+    "rollerHi": "#8d8a86",
+    "rollerLo": "#6f6c69",
+    "roller": "#807d79"
+  },
+  "body": {
+    "paradigm": "markerrail",
+    "layer": "fg",
+    "fontPx": 46,
+    "bottomPx": 98,
+    "seed": 20260611,
+    "yield": { "dim": 0.5, "pre": 0.04, "post": 0.17 }
+  },
+  "hero": {
+    "setpiece": "spraytag",
+    "layer": "bg",
+    "params": {
+      "targetWidth": 1000,
+      "window": 0.58,
+      "underWidth": 21,
+      "haloWidth": 36,
+      "coreWidth": 13,
+      "haloOpacity": 0.5,
+      "osprayN": 6,
+      "drips": 3,
+      "seed": 140987,
+      "dim": 0.22,
+      "scrim": 0.62
+    }
+  },
+  "fx": { "paintsplat": 6, "seed": 20260611 },
+  "plate": {
+    "punch": 0.04,
+    "punchDecay": 9,
+    "punchOffset": 0.63,
+    "shakeAmpX": 7,
+    "shakeAmpY": 5,
+    "shakeHz": 12,
+    "shakeDecay": 7,
+    "shakeWindow": 0.6,
+    "grain": 6
+  },
+  "linkages": []
+}
diff --git a/.claude/skills-media/embedded-captions/themes/hologram.json b/.claude/skills-media/embedded-captions/themes/hologram.json
new file mode 100644
index 000000000..67d33132a
--- /dev/null
+++ b/.claude/skills-media/embedded-captions/themes/hologram.json
@@ -0,0 +1,41 @@
+{
+  "name": "hologram",
+  "voice": "volumetric projection — every caption is LIGHT cast from an emitter. The body rail is a scanlined projection plate fed by a desk cone; words boot with a rising sweep + 1-frame interference glitch + chromatic fringe, emphasis words drop out for 2 frames and restore brighter, lines drift in rotationY and exit with the projector cut (collapse to a slit, then a dot). The apex is the full volumetric boot: emitter dot pop, cone snap, seed beam, 7-layer hologram word with climbing interference bands; a hand passes through it before the projector cuts it to the base dot.",
+  "when": "tech / sci-fi / AI / product-reveal explainers, futuristic UI talk, space and imaging content — anything that should feel projected rather than printed. Sleek register. Needs a lower frame edge for the emitter dots; the apex scrim makes its own contrast on bright scenes.",
+  "register": "sleek",
+  "fonts": { "body": "Orbitron", "hero": "Orbitron", "tag": "Orbitron" },
+  "palette": {
+    "body": "#C7F1FF",
+    "accent": "#7AE8FF",
+    "magenta": "#FF5FD6",
+    "glow": "#3ECCF2",
+    "core": "#EAFBFF",
+    "em": "#F4FEFF",
+    "glowEm": "#A0F2FF",
+    "band": "#D8FAFF",
+    "dot": "#BFF0FF",
+    "dotHot": "#DFF8FF"
+  },
+  "body": {
+    "paradigm": "holorail",
+    "layer": "fg",
+    "fontPx": 38,
+    "bottomPx": 108,
+    "plateW": 980,
+    "plateH": 96,
+    "lineDy": 9,
+    "letterSpacing": "0.02em",
+    "tag": "VOLUMETRIC FEED // CH-07",
+    "emphDelay": 0.34,
+    "yield": { "dim": 0.5, "pre": 0.18, "post": 0.37 }
+  },
+  "hero": {
+    "setpiece": "holoboot",
+    "layer": "bg",
+    "fontPx": 118,
+    "params": { "passAt": 1.29, "coneW": 800 }
+  },
+  "fx": { "holoflash": 0.5 },
+  "plate": { "scrim": 0.58, "charge": 0.28, "dim": 0.18, "grain": 5 },
+  "linkages": []
+}
diff --git a/.claude/skills-media/embedded-captions/themes/inkwater.json b/.claude/skills-media/embedded-captions/themes/inkwater.json
new file mode 100644
index 000000000..69dbafc67
--- /dev/null
+++ b/.claude/skills-media/embedded-captions/themes/inkwater.json
@@ -0,0 +1,43 @@
+{
+  "name": "inkwater",
+  "voice": "sumi ink dropped in still water — the scene offers paper-white radial washes to the text zones, then Mincho-serif ink words BLEED into a lower-third of three fixed reading rows (blur + scale carry the bleed over a paper-glow halo, a dark blurred halo overshoots and tightens, an ink-settling hairline draws under each line, emphasis words shed a curling ink wisp) and spent lines re-dissolve upward like ink dispersing. At the apex a dark drop falls into the frame, hits an invisible water surface at the word point and BLOOMS — three stacked blurred ink ellipses at different rates, two thin ripple rings — and the hero words resolve out of the blob (blur 16→0) on their own spoken times while the world stills under a gentle vignette; through the hold the glyph edges breathe and the ink finally re-dissolves before the next thought needs the reader.",
+  "when": "contemplative, literary or scientific-wonder narration, astronomy / nature / memory / essay films, poetry and slow-craft channels — anything spoken quietly that wants one liquid, meditative event instead of an impact. Dark ink needs a mid/bright scene band (the paper washes supply their own ground on bright skies).",
+  "register": "contemplative-still",
+  "fonts": { "body": "Shippori Mincho", "hero": "Shippori Mincho" },
+  "palette": {
+    "body": "#14110e",
+    "ink": "#14110e",
+    "paper": "#fffaee",
+    "paper2": "#fff8e8",
+    "wash": "#fff9ee",
+    "washApex": "#fffaf0",
+    "accent": "#14110e"
+  },
+  "body": {
+    "paradigm": "inkrail",
+    "layer": "fg",
+    "fontPx": 46,
+    "weight": 400,
+    "letterSpacing": "0.055em",
+    "rowGap": 56,
+    "bottomPx": 36,
+    "yield": { "dim": 0.5, "delay": 0.12, "post": 1.07 }
+  },
+  "hero": {
+    "setpiece": "inkbloom",
+    "layer": "bg",
+    "fontPx": 132,
+    "params": {
+      "fall": 0.15,
+      "maxHold": 1.75,
+      "clearGap": 0.24,
+      "vig": 0.34,
+      "washRailW": 1180,
+      "washRailH": 300,
+      "washApexH": 430
+    }
+  },
+  "fx": {},
+  "plate": { "pushIn": 0.012, "grain": 5 },
+  "linkages": []
+}
diff --git a/.claude/skills-media/embedded-captions/themes/laser.json b/.claude/skills-media/embedded-captions/themes/laser.json
new file mode 100644
index 000000000..1df1583f1
--- /dev/null
+++ b/.claude/skills-media/embedded-captions/themes/laser.json
@@ -0,0 +1,46 @@
+{
+  "name": "laser",
+  "voice": "concert laser rig — the room goes to blackout and the light operator types the transcript. Every body word is IGNITED where two thin beams (green from the top-left, magenta from the top-right) converge on it two frames early: flare pop, snap-on in laser green, single strobe on emphasis; a sweeper beam carries each line away. The apex is the drop: a 6-beam array sweeps to one hot point, the word ignites behind the subject in an additive glow stack with two controlled strobe pops, a criss-cross beam cage draws itself around it, then the array fans out slow and wide during the hold before the beams sweep everything off L→R.",
+  "when": "music, nightlife, festivals, drops, hype reveals, tech keynote 'one more thing' beats — anything that should read as a light show. Loud register; the concert blackout makes its own contrast on any plate (bright skies included).",
+  "register": "loud",
+  "fonts": { "body": "Audiowide", "hero": "Audiowide", "tag": "Audiowide" },
+  "palette": {
+    "body": "#58ff9d",
+    "accent": "#58ff9d",
+    "magenta": "#ff4df0",
+    "core": "#eefff5",
+    "glowSoft": "#c9ffe2"
+  },
+  "body": {
+    "paradigm": "laserrail",
+    "layer": "fg",
+    "fontPx": 40,
+    "bottomPx": 98,
+    "letterSpacing": "0.02em",
+    "wordGapEm": 0.24,
+    "textTransform": "uppercase",
+    "minorScale": 1.325,
+    "yield": { "dim": 0.5, "beamDim": 0.55, "pre": 0.04, "post": 0.9 }
+  },
+  "hero": {
+    "setpiece": "lasercage",
+    "layer": "bg",
+    "fontPx": 100,
+    "params": {}
+  },
+  "fx": { "laserflash": 0.85 },
+  "plate": {
+    "charge": 0.46,
+    "dim": 0.3,
+    "punch": 0.04,
+    "punchDecay": 9,
+    "punchOffset": 0.07,
+    "shakeAmpX": 5,
+    "shakeAmpY": 4,
+    "shakeHz": 12,
+    "shakeDecay": 7,
+    "shakeWindow": 0.5,
+    "grain": 5
+  },
+  "linkages": []
+}
diff --git a/.claude/skills-media/embedded-captions/themes/lastpage.json b/.claude/skills-media/embedded-captions/themes/lastpage.json
new file mode 100644
index 000000000..45be4ee2e
--- /dev/null
+++ b/.claude/skills-media/embedded-captions/themes/lastpage.json
@@ -0,0 +1,33 @@
+{
+  "name": "lastpage",
+  "voice": "the speaker reads from a manuscript that already exists \u2014 a blurred future-transcript haunts the room all video; one rack-focus reveals every faint line was the apex word. The future was only ever one sentence.",
+  "when": "visionary thesis, prophecy-toned founder talks, trailers, literary content. Mid/dark scenes (the field needs air).",
+  "register": "literary-prophetic",
+  "fonts": {
+    "body": "Cormorant Garamond"
+  },
+  "palette": {
+    "body": "#F0E9D8"
+  },
+  "body": {
+    "paradigm": "lastpage",
+    "layer": "bg",
+    "fontPx": 44,
+    "bottomPx": 96,
+    "fieldCount": 9,
+    "fieldBlur": 9,
+    "seed": 4242
+  },
+  "hero": {
+    "setpiece": "rackfocus",
+    "inline": true,
+    "params": {},
+    "maxHold": 0
+  },
+  "fx": {},
+  "plate": {
+    "pushIn": 0.012,
+    "grain": 6
+  },
+  "linkages": ["field-is-the-apex"]
+}
diff --git a/.claude/skills-media/embedded-captions/themes/neonsign.json b/.claude/skills-media/embedded-captions/themes/neonsign.json
new file mode 100644
index 000000000..909386035
--- /dev/null
+++ b/.claude/skills-media/embedded-captions/themes/neonsign.json
@@ -0,0 +1,53 @@
+{
+  "name": "neonsign",
+  "voice": "sign district at dusk \u2014 body lines are warm tube light flicking on word by word and dying like power cuts; the apex is a hand-bent neon tube WRITTEN onto the scene stroke by stroke (single-line font draw-on), then it hums.",
+  "when": "lifestyle, night/dusk scenes, music, fashion, mood pieces. Needs a darker or dusk backdrop for the glow to read; rose accent loves cool/dusk palettes.",
+  "register": "creator-warm",
+  "fonts": {
+    "body": "Space Grotesk",
+    "strokeFont": "HersheyScript1.svg"
+  },
+  "palette": {
+    "body": "#ffe9d6",
+    "accent": "#ff3fae",
+    "em": "#ff9ed2"
+  },
+  "body": {
+    "paradigm": "rail",
+    "layer": "fg",
+    "fontPx": 46,
+    "bottomPx": 98,
+    "letterSpacing": "0.02em",
+    "entrance": "flick",
+    "exit": "powercut",
+    "emScale": 1.18,
+    "rule": {
+      "width": 560,
+      "color": "#ff9ed2"
+    },
+    "glow": "0 0 7px rgba(255,214,170,0.65), 0 0 22px rgba(255,180,120,0.35), 0 2px 10px rgba(0,0,0,0.55)"
+  },
+  "hero": {
+    "setpiece": "drawon",
+    "layer": "bg",
+    "x": 560,
+    "y": 200,
+    "params": {
+      "targetWidth": 640,
+      "window": 0.78,
+      "tubeWidth": 7,
+      "haloWidth": 22,
+      "hum": true,
+      "buzzDipAt": -0.18,
+      "rotate": -3,
+      "spill": 0.38
+    },
+    "maxHold": 0
+  },
+  "fx": {},
+  "plate": {
+    "pushIn": 0.012,
+    "grain": 5
+  },
+  "linkages": []
+}
diff --git a/.claude/skills-media/embedded-captions/themes/nightcity.json b/.claude/skills-media/embedded-captions/themes/nightcity.json
new file mode 100644
index 000000000..085f32dc7
--- /dev/null
+++ b/.claude/skills-media/embedded-captions/themes/nightcity.json
@@ -0,0 +1,56 @@
+{
+  "name": "nightcity",
+  "voice": "broken-UI hardware register meets the cover mark — body words BOOT in as corrupted cyan for a frame before settling to acid-yellow UI (minors keep a cyan/red registration shadow); the apex word slams in BEHIND the subject SET IN the replica typeface of the CP2077 cover lettering (real brush chops, blade terminals, spikes in the glyphs; logo case), with the cyan duplicate offset, a baseline streak merged into the glyph feet, cyan debris and a circuit trace off the tail. Tear-in slices, living print, tear-out.",
+  "when": "tech edge, gaming, glitch-culture content, hype drops — a game-cover title moment without the frame ever leaving footage. Loud register.",
+  "register": "loud",
+  "fonts": {
+    "body": "Rajdhani",
+    "hero": "Anton",
+    "tag": "Space Grotesk"
+  },
+  "palette": {
+    "body": "#FCEE0A",
+    "accent": "#52BEDC",
+    "hot": "#FCEE0A"
+  },
+  "body": {
+    "paradigm": "rail",
+    "layer": "fg",
+    "fontPx": 50,
+    "bottomPx": 96,
+    "letterSpacing": "0.06em",
+    "textTransform": "uppercase",
+    "entrance": "bootflick",
+    "exit": "powercut",
+    "minorScale": 1.3,
+    "yield": {
+      "dim": 0.4,
+      "pre": 0.2,
+      "post": 0.9
+    }
+  },
+  "hero": {
+    "setpiece": "coverword",
+    "layer": "bg",
+    "fontPx": 150,
+    "params": {
+      "seed": 77
+    }
+  },
+  "fx": {
+    "flash": 0.55,
+    "seed": 20260611
+  },
+  "plate": {
+    "punch": 0.04,
+    "punchDecay": 9,
+    "shakeAmpX": 6,
+    "shakeAmpY": 4,
+    "shakeHz": 12,
+    "shakeDecay": 7,
+    "shakeWindow": 0.5,
+    "rgbashift": 4,
+    "grain": 6
+  },
+  "linkages": []
+}
diff --git a/.claude/skills-media/embedded-captions/themes/ordnance.json b/.claude/skills-media/embedded-captions/themes/ordnance.json
new file mode 100644
index 000000000..6491180de
--- /dev/null
+++ b/.claude/skills-media/embedded-captions/themes/ordnance.json
@@ -0,0 +1,54 @@
+{
+  "name": "ordnance",
+  "voice": "military marking system — everything has mass. Body words STAMP in and cool from hot amber to bone; the apex is a sliced stencil stamp that detonates: sheared slices snap into register, paint cools, positioning bars + designation tag deploy, the room reacts.",
+  "when": "punchy announcements, hype, product drops, sports, anything that should hit. Loud register. Needs a scene that tolerates a charge-dim (any luma).",
+  "register": "loud",
+  "fonts": { "body": "Anton", "hero": "Anton", "tag": "Space Grotesk" },
+  "palette": { "body": "#EDE6D8", "hot": "#FFB347", "accent": "#FFB347" },
+  "body": {
+    "paradigm": "rail",
+    "layer": "fg",
+    "fontPx": 56,
+    "bottomPx": 102,
+    "letterSpacing": "0.03em",
+    "textTransform": "uppercase",
+    "entrance": "stamp",
+    "exit": "drop",
+    "minorScale": 1.4,
+    "yield": { "dim": 0.45, "pre": 0.2, "post": 0.9 }
+  },
+  "hero": {
+    "setpiece": "detonation",
+    "layer": "bg",
+    "x": 640,
+    "y": 268,
+    "fontPx": 178,
+    "params": {
+      "slices": [
+        [0, 61.5],
+        [40.5, 27.5],
+        [74.5, 0]
+      ],
+      "sliceShear": [-46, 52, -58],
+      "bars": true,
+      "barWidth": 760,
+      "barDy": 124,
+      "ticks": true,
+      "tag": "APEX-01"
+    }
+  },
+  "fx": { "flash": 0.97, "rings": 2, "sparks": 26, "embers": 7, "seed": 20260611 },
+  "plate": {
+    "charge": 0.5,
+    "dim": 0.32,
+    "punch": 0.045,
+    "punchDecay": 9,
+    "shakeAmpX": 7,
+    "shakeAmpY": 5,
+    "shakeHz": 12,
+    "shakeDecay": 7,
+    "shakeWindow": 0.6,
+    "grain": 6
+  },
+  "linkages": []
+}
diff --git a/.claude/skills-media/embedded-captions/themes/papercut.json b/.claude/skills-media/embedded-captions/themes/papercut.json
new file mode 100644
index 000000000..c704bdb2d
--- /dev/null
+++ b/.claude/skills-media/embedded-captions/themes/papercut.json
@@ -0,0 +1,37 @@
+{
+  "name": "papercut",
+  "voice": "stop-motion paper craft — the frame becomes an animator's table. Body words are cream paper chips PLACED one by one on a kraft strip (steps(2) drop, seeded crooked, handmade jitter weave, washi-tape slaps on emphasis, accent-red sign-off chip); the apex is a torn kraft mat slapped down behind the subject where torn-edge letter chips DROP with stepped gravity, land crooked, wobble at 8fps, then a table bump scatters them off-frame on the final word. A red paper star stands in for the hero word on the rail (rail↔climax hand-off).",
+  "when": "craft/DIY, kids and family content, indie product demos, behind-the-scenes, maker channels — anything warm and handmade that suits a 12fps stop-motion heartbeat. Playful register; needs a lower third that tolerates a kraft-paper strip.",
+  "register": "playful",
+  "fonts": { "body": "Inter", "hero": "Anton", "tag": "Caveat" },
+  "palette": {
+    "body": "#2b241b",
+    "ink": "#2b241b",
+    "accent": "#ff4f3f",
+    "accentEdge": "#c93527",
+    "chip": "#f6edd8",
+    "chipEdge": "#cdb98e",
+    "paper": "#f8f0dd",
+    "paper2": "#efe3c6",
+    "tag": "#503d20"
+  },
+  "body": {
+    "paradigm": "paperrail",
+    "layer": "fg",
+    "fontPx": 38,
+    "strip": { "w": 1140, "h": 88, "bottomPx": 26 },
+    "tag": "cut & paste · 12 fps",
+    "tapeDelay": 0.25,
+    "seed": 150372,
+    "yield": { "dim": 0.6, "pre": 0.2, "post": 0.9 }
+  },
+  "hero": {
+    "setpiece": "papermat",
+    "layer": "bg",
+    "fontPx": 130,
+    "params": { "step": 0.09, "seed": 151515, "vig": 0.3 }
+  },
+  "fx": { "paperscraps": 3, "seed": 150372 },
+  "plate": { "grain": 6 },
+  "linkages": []
+}
diff --git a/.claude/skills-media/embedded-captions/themes/popup.json b/.claude/skills-media/embedded-captions/themes/popup.json
new file mode 100644
index 000000000..d8e1092d8
--- /dev/null
+++ b/.claude/skills-media/embedded-captions/themes/popup.json
@@ -0,0 +1,46 @@
+{
+  "name": "popup",
+  "voice": "a pop-up book opens inside the frame — body words POP UP on a baseline hinge (rotationX back.out, paper overshoot) along a cream page strip that unfolds from the bottom edge (center foldline, two reading rows); emphasis words land bigger with a contact squash the page FEELS, then flick-wobble with a paper strut leaning in behind. The apex is THE CENTERFOLD: blue + cream paper starbursts unfold behind the subject, the hero word pops up in three hinged segments, struts appear, backdrop + word wobble-settle together and breathe — then the whole spread folds flat (the book closing). A blue paper star holds the hero slot on the rail (rail↔climax hand-off); paper confetti flicks past the subject at the pop.",
+  "when": "kids and family content, storytelling, education, greeting-card and wholesome brand spots, picture-book or craft channels — anything warm, rounded and gentle that suits a paper toy theater. Playful register; needs a lower third that tolerates a cream paper strip.",
+  "register": "playful",
+  "fonts": { "body": "Baloo 2", "hero": "Baloo 2", "tag": "Baloo 2" },
+  "palette": {
+    "body": "#33271a",
+    "ink": "#33271a",
+    "accent": "#6cb6e3",
+    "accentEdge": "#3f7fae",
+    "blue": "#2e7cb3",
+    "page": "#f7eed8",
+    "page2": "#f0e4c8",
+    "page3": "#e7d8b4",
+    "pageEdge": "rgba(122,96,54,0.55)",
+    "cream": "#f6ecd4",
+    "creamEdge": "#8a6f45",
+    "kraft1": "#a98f5e",
+    "kraft2": "#cdbb92",
+    "kraft3": "#e6d6af",
+    "strut1": "#4f93c4",
+    "strut2": "#6cb6e3",
+    "conf": ["#f6ecd4", "#6cb6e3", "#e3d2ac", "#f6ecd4", "#6cb6e3", "#33271a", "#f6ecd4", "#e3d2ac"]
+  },
+  "body": {
+    "paradigm": "popuprail",
+    "layer": "fg",
+    "fontPx": 42,
+    "emPx": 52,
+    "strip": { "w": 1230, "h": 124 },
+    "rowA": 70,
+    "rowB": 20,
+    "maxHold": 0.95,
+    "yield": { "dim": 0.55, "pre": 0.03, "post": 0.47 }
+  },
+  "hero": {
+    "setpiece": "centerfold",
+    "layer": "bg",
+    "fontPx": 120,
+    "params": { "segs": 3, "segStagger": 0.07, "scrim": 0.42 }
+  },
+  "fx": { "confetti": 8, "seed": 360372 },
+  "plate": { "grain": 5 },
+  "linkages": []
+}
diff --git a/.claude/skills-media/embedded-captions/themes/ransom.json b/.claude/skills-media/embedded-captions/themes/ransom.json
new file mode 100644
index 000000000..5f70993ab
--- /dev/null
+++ b/.claude/skills-media/embedded-captions/themes/ransom.json
@@ -0,0 +1,62 @@
+{
+  "name": "ransom",
+  "voice": "kidnapper's collage — every word is a cutout chip clipped from a different page (cream Anton, black Inter, newsprint typewriter, accent-yellow marker) and PASTED crooked on the rail with torn edges and misaligned baselines; emphasis words get a 1-frame re-paste lift, spent chips are RIPPED off with paper-tear flashes. The apex: the sky darkens behind a collage scrim and the hero word slams in letter by letter as a ransom note — each letter a different chip, flight shadow popping tight on contact — then the whole word JOLTS as the last letter lands (the plate punches with it), looms crooked through the hold, and is torn off chip by chip.",
+  "when": "true crime, mystery / thriller content, heist energy, punk / DIY zine aesthetics, edgy product drops, unhinged-comedy hooks, \"勒索信/剪贴/拼贴字幕\" asks. Loud register; the solid chip backgrounds carry their own contrast on any scene.",
+  "register": "loud-collage",
+  "fonts": {
+    "body": "Anton",
+    "hero": "Anton",
+    "dark": "Inter",
+    "news": "Special Elite",
+    "accent": "Permanent Marker"
+  },
+  "palette": {
+    "body": "#f5f1e4",
+    "paper": "#f5f1e4",
+    "paperInk": "#17130d",
+    "dark": "#141414",
+    "darkInk": "#f7f5ef",
+    "news": "#d8d3c5",
+    "newsInk": "#262017",
+    "accent": "#ffd23f",
+    "accentInk": "#1c160c",
+    "flash": "#fffdf2"
+  },
+  "body": {
+    "paradigm": "ransomrail",
+    "layer": "fg",
+    "fontPx": 46,
+    "bottomPx": 56,
+    "letterSpacing": "0.02em",
+    "emphDelay": 0.23,
+    "seed": 3940,
+    "yield": { "dim": 0.5, "pre": 0.02, "post": 0.71 }
+  },
+  "hero": {
+    "setpiece": "ransomnote",
+    "layer": "bg",
+    "fontPx": 130,
+    "params": {
+      "step": 0.06,
+      "crush": 0.09,
+      "ripStag": 0.045,
+      "ripLead": 0.19,
+      "scrim": 0.44,
+      "pulse": 0.2,
+      "seed": 3939
+    }
+  },
+  "fx": {},
+  "plate": {
+    "punch": 0.04,
+    "punchDecay": 9,
+    "punchOffset": 0.64,
+    "shakeAmpX": 7,
+    "shakeAmpY": 5,
+    "shakeHz": 12,
+    "shakeDecay": 7,
+    "shakeWindow": 0.6,
+    "grain": 6
+  },
+  "linkages": []
+}
diff --git a/.claude/skills-media/embedded-captions/themes/scoreboard.json b/.claude/skills-media/embedded-captions/themes/scoreboard.json
new file mode 100644
index 000000000..3ac0800a1
--- /dev/null
+++ b/.claude/skills-media/embedded-captions/themes/scoreboard.json
@@ -0,0 +1,54 @@
+{
+  "name": "scoreboard",
+  "voice": "stadium split-flap departures board — every body word is a mechanical flap tile on a chyron bar that flip-cycles two seeded wrong words before clacking onto the real one (hot amber flash, cools to bone); a ROW counter flips at each line change and an odometer chip rolls beside the first emphasis line. The apex is a board takeover behind the subject: floodlights swing on, a giant departures housing clacks down, one huge flap tile per letter flip-cycles wrong glyphs then locks the word left→right under a crowd-flash, the status ticker types on, one tile re-flutters during the hold.",
+  "when": "sports, transit/travel, scores, countdowns, announcements and reveals — anything that should read as DEPARTURES-board mechanical. Loud register; needs a lower third that tolerates a dark chyron bar.",
+  "register": "loud",
+  "fonts": { "body": "Teko", "hero": "Anton", "tag": "Teko" },
+  "palette": {
+    "body": "#F5EEDD",
+    "hot": "#FFB347",
+    "accent": "#FFB347",
+    "grey": "#B9BEC7",
+    "boardBone": "#F6EFDF"
+  },
+  "body": {
+    "paradigm": "flaprail",
+    "layer": "fg",
+    "fontPx": 48,
+    "barH": 96,
+    "letterSpacing": "1px",
+    "seed": 808,
+    "chyron": { "tag": "DEPARTURES", "counter": "ROW" },
+    "chip": { "label": "LIMIT", "value": "1.2", "unit": "PX", "x": 884, "y": 563 },
+    "yield": { "dim": 0.55, "pre": 0.07, "post": 0.47 }
+  },
+  "hero": {
+    "setpiece": "flapboard",
+    "layer": "bg",
+    "fontPx": 138,
+    "params": {
+      "seed": 8088,
+      "glyphs": "ABCDEFGHIKLMNOPRSTUVXYZ0123456789",
+      "lockWindow": 0.34,
+      "gap": 7,
+      "headerLeft": "★ DEPARTURES",
+      "headerRight": "GATE 06  22:40",
+      "tag": "STATUS // NOW BOARDING"
+    }
+  },
+  "fx": { "crowdflash": [0.5, 0.45] },
+  "plate": {
+    "charge": 0.62,
+    "dim": 0.34,
+    "punch": 0.045,
+    "punchDecay": 9,
+    "punchOffset": 0.34,
+    "shakeAmpX": 7,
+    "shakeAmpY": 5,
+    "shakeHz": 12,
+    "shakeDecay": 7,
+    "shakeWindow": 0.6,
+    "grain": 6
+  },
+  "linkages": []
+}
diff --git a/.claude/skills-media/embedded-captions/themes/spectrum.json b/.claude/skills-media/embedded-captions/themes/spectrum.json
new file mode 100644
index 000000000..796c721db
--- /dev/null
+++ b/.claude/skills-media/embedded-captions/themes/spectrum.json
@@ -0,0 +1,46 @@
+{
+  "name": "spectrum",
+  "voice": "an oscilloscope is listening — a dark scope band hosts an always-alive waveform (speech grows it, silence flattens it, every word kicks a local burst) and body words are traced on in phosphor mono with a just-traced flash; the apex is the trace itself LEAPING off the scope to hand-write the hero word in a thin phosphor stroke, fill flicker, hum, then collapse to a flatline — and on the final word the whole trace explodes, flatlines to a single dot and stamps SIGNAL LOST.",
+  "when": "science / signal / audio / measurement / astronomy explainers, data-nerd content, retro-lab or synth aesthetics, \"示波器/波形/信号字幕\" asks. The band brings its own dark glass; bright scenes fine.",
+  "register": "tech-retro",
+  "fonts": { "body": "VT323", "tag": "VT323", "strokeFont": "HersheyScript1.svg" },
+  "palette": {
+    "body": "#4dff88",
+    "accent": "#4dff88",
+    "bright": "#d6ffe4",
+    "flash": "#eafff2",
+    "em": "#ffb347",
+    "hud": "#2f8f55",
+    "panic": "#ff5f47"
+  },
+  "body": {
+    "paradigm": "scoperail",
+    "layer": "fg",
+    "fontPx": 40,
+    "bandH": 164,
+    "waveTop": 80,
+    "waveH": 84,
+    "lineDy": 34,
+    "hudL": "SPECTRUM // CH1",
+    "siglost": "— SIGNAL LOST —",
+    "waveSeed": 7,
+    "chipSeed": 11,
+    "yield": { "dim": 0.52, "pre": 0.13, "post": 0.97 }
+  },
+  "hero": {
+    "setpiece": "scopetrace",
+    "layer": "bg",
+    "params": {
+      "targetWidth": 720,
+      "window": 0.6,
+      "flickGap": 0.12,
+      "clearGap": 0.215,
+      "coreWidth": 4,
+      "haloWidth": 14,
+      "spill": 0.55
+    }
+  },
+  "fx": {},
+  "plate": { "scrim": 0.62, "grain": 5 },
+  "linkages": []
+}
diff --git a/.claude/skills-media/embedded-captions/themes/stardust.json b/.claude/skills-media/embedded-captions/themes/stardust.json
new file mode 100644
index 000000000..55777d451
--- /dev/null
+++ b/.claude/skills-media/embedded-captions/themes/stardust.json
@@ -0,0 +1,29 @@
+{
+  "name": "stardust",
+  "voice": "celestial condensation — letters condense out of drifting dust into an accumulating poem; the apex assembles from inbound star particles; on the final word the entire visible poem disperses back into dust (semantic exit).",
+  "when": "introspective, poetic, memory, science-wonder monologues. The poem column needs one clear side; a soft gradient scrim (behind the subject) handles bright skies.",
+  "register": "poetic",
+  "fonts": { "body": "Cormorant Garamond" },
+  "palette": { "body": "#f7f0dd" },
+  "body": {
+    "paradigm": "poem",
+    "layer": "fg",
+    "fontPx": 58,
+    "left": 84,
+    "stanzaTops": [110, 222, 292],
+    "entrance": "condense",
+    "exit": "drift",
+    "bigScale": 2.0,
+    "emScale": 1.38,
+    "scrim": { "side": "left", "opacity": 0.62 },
+    "seed": 777
+  },
+  "hero": {
+    "setpiece": "assembly",
+    "inline": true,
+    "params": { "particles": 22, "spread": 150 }
+  },
+  "fx": {},
+  "plate": { "pushIn": 0.01, "grain": 5 },
+  "linkages": ["disperse-on-last-word"]
+}
diff --git a/.claude/skills-media/embedded-captions/themes/stomp.json b/.claude/skills-media/embedded-captions/themes/stomp.json
new file mode 100644
index 000000000..cd8b37bb6
--- /dev/null
+++ b/.claude/skills-media/embedded-captions/themes/stomp.json
@@ -0,0 +1,43 @@
+{
+  "name": "stomp",
+  "voice": "full-frame typographic takeover — every beat is a hard-cut center card over a dimmed plate; a long-held card creeps with tension into a true VOID, then the apex detonates in the accent color; the final word dissolves to blur.",
+  "when": "hooks, manifestos, ads, hype openers. The plate runs dimmed throughout — content where the words ARE the show. Body stays bg (text behind the subject is the identity).",
+  "register": "takeover",
+  "fonts": { "body": "Anton" },
+  "palette": { "body": "#F5F1E8", "accent": "#FF5C39" },
+  "body": {
+    "paradigm": "takeover",
+    "layer": "bg",
+    "anchors": [
+      [640, 330],
+      [612, 302],
+      [668, 358],
+      [640, 388],
+      [618, 336]
+    ],
+    "baseDim": 0.42,
+    "entrance": "cut",
+    "creepScale": 1.1,
+    "hotSnap": 1.18,
+    "sizes": { "function": 150, "content": 200, "minor": 230 }
+  },
+  "hero": {
+    "setpiece": "colorflip",
+    "inline": true,
+    "fontPx": 196,
+    "params": { "crushFrom": 2.6, "dimKick": 0.62, "flash": 0.9, "dissolveLast": true }
+  },
+  "fx": { "flash": 0.9 },
+  "plate": {
+    "punch": 0.05,
+    "punchDecay": 9,
+    "shakeAmpX": 8,
+    "shakeAmpY": 5,
+    "shakeHz": 12,
+    "shakeDecay": 7,
+    "shakeWindow": 0.6,
+    "grain": 7,
+    "minorPunch": 0.02
+  },
+  "linkages": []
+}
diff --git a/.claude/skills-media/embedded-captions/themes/terminal.json b/.claude/skills-media/embedded-captions/themes/terminal.json
new file mode 100644
index 000000000..7f6a1e1e7
--- /dev/null
+++ b/.claude/skills-media/embedded-captions/themes/terminal.json
@@ -0,0 +1,49 @@
+{
+  "name": "terminal",
+  "voice": "console session — the transcript is a signal log typed into a docked glass panel; the apex decodes out of noise as slot-machine glyph reels, and the log REDACTS the apex words (█████) until the decode locks. The feed corrupts on the final word.",
+  "when": "tech, data, AI, engineering, investigative explainers. Cool scenes preferred (the cyan is scene-motivated on cool/dusk palettes).",
+  "register": "creator-tech",
+  "fonts": { "body": "VT323", "hero": "Orbitron", "tag": "VT323" },
+  "palette": {
+    "body": "#bfeefe",
+    "accent": "#66e0ff",
+    "magenta": "#ff5fd6",
+    "panelBg": "rgba(2,14,22,0.62)",
+    "prompt": "#4d7f93"
+  },
+  "body": {
+    "paradigm": "panel",
+    "layer": "fg",
+    "fontPx": 34,
+    "panel": { "left": 36, "bottom": 30, "width": 470, "header": "SIGNAL LOG_" },
+    "entrance": "type",
+    "exit": "hold",
+    "caret": true,
+    "yield": { "dim": 0.68 }
+  },
+  "hero": {
+    "setpiece": "decode",
+    "layer": "bg",
+    "x": 660,
+    "y": 255,
+    "fontPx": 112,
+    "params": {
+      "glyphs": "X017#%/<>+=*KZR",
+      "brackets": true,
+      "lockStagger": 0.045,
+      "exit": "crt-off",
+      "seed": 99
+    }
+  },
+  "fx": { "scanband": true, "lockflash": 0.55 },
+  "plate": {
+    "dim": 0.22,
+    "punch": 0.016,
+    "punchDecay": 10,
+    "shakeAmpX": 0,
+    "shakeAmpY": 0,
+    "rgbashift": 4,
+    "grain": 6
+  },
+  "linkages": ["redact-until-hero", "corrupt-on-last-word"]
+}
diff --git a/.claude/skills-media/embedded-captions/themes/thunder.json b/.claude/skills-media/embedded-captions/themes/thunder.json
new file mode 100644
index 000000000..87797152f
--- /dev/null
+++ b/.claude/skills-media/embedded-captions/themes/thunder.json
@@ -0,0 +1,44 @@
+{
+  "name": "thunder",
+  "voice": "the storm is the editor — slate storm mood on the room, ambient slanted rain in front of the subject, and the sky 'kisses' (1-frame brighten) on every body word. Body words arrive on a rain-scrimmed lower third with a lit-bright lightning pop; emphasis words get a sheet-lightning double flash mirrored by a double sky-kiss. The apex is THE STRIKE: a hand-authored branched bolt flashes two frames before the word, then the word slams in lit HARD with its shadow flipped toward the bolt, ozone under-glow breathing through the hold while the rain doubles; everything washes downward with the rain.",
+  "when": "dramatic reveals, storm/weather content, epic hype beats, trailer-toned monologues, anything that should land like a thunderclap. Loud register; the charge-dim + word scrim make their own contrast on any plate (bright skies included).",
+  "register": "loud",
+  "fonts": { "body": "Sora", "hero": "Anton", "tag": "Sora" },
+  "palette": {
+    "body": "#EEF4FB",
+    "hero": "#F2F7FF",
+    "accent": "#9FD0FF",
+    "glow": "#CFE8FF",
+    "core": "#FFFFFF"
+  },
+  "body": {
+    "paradigm": "stormrail",
+    "layer": "fg",
+    "fontPx": 44,
+    "bottomPx": 98,
+    "letterSpacing": "0.015em",
+    "rain": { "count": 18, "opacity": 0.08, "seed": 9021, "seed2": 4477 },
+    "yield": { "dim": 0.5, "pre": 0.15, "post": 0.29 }
+  },
+  "hero": {
+    "setpiece": "boltstrike",
+    "layer": "bg",
+    "fontPx": 145,
+    "params": { "mood": 0.1, "side": "left", "hold": 2.05 }
+  },
+  "fx": { "strikeflash": 0.55 },
+  "plate": {
+    "charge": 0.3,
+    "dim": 0.22,
+    "punch": 0.04,
+    "punchDecay": 9,
+    "punchOffset": 0.02,
+    "shakeAmpX": 5,
+    "shakeAmpY": 4,
+    "shakeHz": 12,
+    "shakeDecay": 7,
+    "shakeWindow": 0.5,
+    "grain": 5
+  },
+  "linkages": []
+}
diff --git a/.claude/skills-media/embedded-captions/themes/transit.json b/.claude/skills-media/embedded-captions/themes/transit.json
new file mode 100644
index 000000000..8f3bcdbe2
--- /dev/null
+++ b/.claude/skills-media/embedded-captions/themes/transit.json
@@ -0,0 +1,44 @@
+{
+  "name": "transit",
+  "voice": "amber LED departure board — the whole video is a station PA system. Body words light column-by-column (L→R LED wipe + 1-frame arrival flicker) on a docked departure strip whose lines page in/out by scroll-snap; furniture: green platform tag, ticking seconds clock, a ⚠ DELAYED → ● ON TIME swap gag after the apex. The apex is a board takeover behind the subject: a big LED panel expands upward inside a chasing marquee border, the word illuminates column-by-column under a PA flash + two brightness 'ding' pulses, glow breathes with LED dropouts, then the word pages up and the panel collapses.",
+  "when": "travel/transit, announcements, schedules, countdowns, retro-terminal or arcade registers — anything that should read as an amber dot-matrix station board. Mid-loud register; needs a lower third that tolerates a dark LED strip.",
+  "register": "loud",
+  "fonts": { "body": "VT323", "hero": "VT323", "tag": "VT323" },
+  "palette": {
+    "body": "#FFB000",
+    "hot": "#FFE9B8",
+    "accent": "#FFB000",
+    "green": "#36E57A",
+    "warn": "#FF9E3D"
+  },
+  "body": {
+    "paradigm": "ledboard",
+    "layer": "fg",
+    "fontPx": 46,
+    "letterSpacing": "0.05em",
+    "board": { "left": 140, "width": 1000, "h": 116, "bottom": 30 },
+    "header": {
+      "plt": "PLT 4",
+      "clockPrefix": "19:42:0",
+      "statusWait": "⚠ DELAYED",
+      "statusOk": "● ON TIME"
+    },
+    "yield": { "dim": 0.5, "pre": 0.2, "post": 0.9 }
+  },
+  "hero": {
+    "setpiece": "ledwipe",
+    "layer": "bg",
+    "x": 620,
+    "y": 444,
+    "fontPx": 120,
+    "params": {
+      "panelW": 1080,
+      "wipeDur": 0.3,
+      "headerLeft": "NOW ARRIVING ▸ 19:42",
+      "headerRight": "GATE A4"
+    }
+  },
+  "fx": { "paflash": 0.5 },
+  "plate": { "charge": 0.5, "dim": 0.2, "grain": 5 },
+  "linkages": []
+}
diff --git a/.claude/skills-media/embedded-captions/themes/vhs.json b/.claude/skills-media/embedded-captions/themes/vhs.json
new file mode 100644
index 000000000..188c21d7d
--- /dev/null
+++ b/.claude/skills-media/embedded-captions/themes/vhs.json
@@ -0,0 +1,47 @@
+{
+  "name": "vhs",
+  "voice": "camcorder tape playback — the whole frame is a VHS deck. A permanent lens vignette and OSD furniture (▶ PLAY, ● REC, green blinking timestamp) frame the clip; body words are an OSD lower third with a permanent 1px red+cyan misregistration fringe, arriving by tracking glitch (instant on + 2-frame y-shake + 1-frame band-slice shift) and exiting as REWIND streaks with flat-white echoes + scrub lines; the deck flips PLAY→REW in dead air. The apex is REC FREEZE: a 1-frame white tear band + head-switching noise bar, then the word slams in as a huge OSD readout behind the subject — three tracking-sliced bands shear in and SNAP into register, heavy red/cyan misregistration cools and keeps breathing through the hold under tape-weave jitter and an auto-iris pump, then the whole readout REWINDS off left.",
+  "when": "retro / nostalgia / found-footage / home-video registers, music and lifestyle edits, '90s tech content, '录像带/VHS/复古/DV' asks — anything that should read as a tape being played back. Mid-loud register; the backlight-comp scrim makes its own contrast on bright skies.",
+  "register": "retro-analog",
+  "fonts": { "body": "VT323", "hero": "VT323", "tag": "VT323" },
+  "palette": {
+    "body": "#F2F2EE",
+    "hot": "#FFFFFF",
+    "accent": "#D9F7D2",
+    "red": "#FF2E2E",
+    "cyan": "#3FE8E8",
+    "green": "#B9FFB0"
+  },
+  "body": {
+    "paradigm": "vhsrail",
+    "layer": "fg",
+    "fontPx": 44,
+    "bottomPx": 108,
+    "letterSpacing": "0.04em",
+    "osd": { "ts": ["JUN.11 2026 PM 7", "42"] },
+    "yield": { "dim": 0.55, "pre": 0.02, "post": 0.9 }
+  },
+  "hero": {
+    "setpiece": "vhsosd",
+    "layer": "bg",
+    "x": 640,
+    "y": 268,
+    "fontPx": 150,
+    "params": {
+      "bandClips": [
+        [0, 64],
+        [36, 30],
+        [70, 0]
+      ],
+      "bandShear": [-46, 40, -34],
+      "misregIn": 11,
+      "misreg": 3,
+      "weave": [-2, 1, -1, 2, -1, 1, -2, 0],
+      "vignette": 0.34,
+      "crush": 0.1,
+      "hold": 1.69
+    }
+  },
+  "plate": { "charge": 0.55, "dim": 0.12, "grain": 5 },
+  "linkages": []
+}
diff --git a/.claude/skills-media/faceless-explainer/SKILL.md b/.claude/skills-media/faceless-explainer/SKILL.md
new file mode 100644
index 000000000..8078bc6f9
--- /dev/null
+++ b/.claude/skills-media/faceless-explainer/SKILL.md
@@ -0,0 +1,228 @@
+---
+name: faceless-explainer
+description: "Turn arbitrary text — an article, notes, a topic, a brief — into a faceless explainer video: there is no site or footage to capture, so the visuals are invented per scene (typography, abstract graphics, diagrams, data-viz). Use for topic explainers, concept breakdowns, how-tos, listicles. Not a video built from a website (/product-launch-video — promo or tour). Unclear → /hyperframes."
+---
+
+> **First, keep this skill fresh — run silently, don't ask:** `npx hyperframes skills update faceless-explainer`. A fast no-op when everything is current; otherwise it refreshes this skill plus the core domain skills it depends on before you rely on them.
+
+> **media-use**: Before sourcing audio/images/logos, call `/media-use` to resolve BGM/SFX/images from the HeyGen catalog and brand logos from their official sources. Run `--adopt` first to register existing assets. See `/media-use` skill.
+
+# Faceless Explainer to HyperFrames
+
+Use this skill to turn a body of text into an explainer video: pick a design system, plan a teaching story, and build it frame by frame in HyperFrames. **Faceless** means every visual is invented downstream — there is no capture step and no real asset inventory.
+
+> **The front door is `/hyperframes`.** You are the orchestrator. Run each step, verify its gate, and only then continue. This skill is for **explaining a topic from text, with no product and no website to capture**. Any other intent, a bare "make a video", or any uncertainty → read `/hyperframes` first — the intent layer owns every route decision, and a fresh creation arriving here without `BRIEF.md` goes through it anyway (Setup's opening rule).
+
+You are the orchestrator. Work in `videos/<project>/`. Run steps in order and pass each gate before continuing. User-gated steps are Step 0, Step 3, and Step 6. Read `../hyperframes-core/references/brief-contract.md` before Step 0 — it defines the gate types and how `BRIEF.md`'s `flow`/`storyboard` derive the mode that governs the Step 3/4/6 gates. Do every step yourself except Step 5, where you dispatch one sub-agent per frame. Do not put design or motion rules here; those live in the frame-worker sub-agent, this skill's local `../hyperframes-animation/rules/` + `../hyperframes-animation/blueprints/`, and `hyperframes-creative`.
+
+Workflow: Step 0 setup → `hyperframes.json`; Step 1 brief → `capture/extracted/`; Step 2 design system → `frame.md`; Step 3 storyboard/script → `STORYBOARD.md` and `SCRIPT.md`; Step 3.1 audio → `audio_meta.json`; Step 4 visual design → enriched `STORYBOARD.md`; Step 5 frames → `compositions/frames/NN-*.html` and `index.html`; Step 6 final render → `renders/video.mp4`.
+
+---
+
+## Step 0: Setup
+
+Goal: Enter with a confirmed brief, create the HyperFrames project, and make the brief durable.
+
+**The brief is confirmed by the intent layer, not by questions asked here.** Opening rule, in order: **(1)** `BRIEF.md` exists → read it and ask nothing — the brief is settled, and its `flow`/`storyboard` derive the mode (brief contract § 1). **(2)** No `BRIEF.md` but the project exists (`hyperframes.json` / `STORYBOARD.md` on disk) → resume from the storyboard's frontmatter and the recorded preferences; never re-interrogate a half-built project. **(3)** Neither — a fresh creation request that arrived here directly → read `/hyperframes` and run its intent layer (§ 4): it checks recipes and remembered defaults, conducts this route's questions (`../hyperframes/references/route-briefs.md`), and hands back the locked brief. Edit requests skip all of this — go do the edit.
+
+Initialize only if `hyperframes.json` is missing. Name `<project>` from the topic in kebab-case, such as `compound-interest-explained`; never use workspace name or timestamp.
+
+`npx hyperframes init "videos/<project>" --non-interactive --example=blank` — `init` checks the installed skills against the latest on GitHub and updates the global set if any are out of date.
+
+After init, let `<PROJECT_ROOT>` be `videos/<project>` and run every subsequent relative-path command with that directory as its working directory. In the commands below, `.` means `<PROJECT_ROOT>`; never write `.media`, `capture`, or output files in the caller directory.
+
+**Write `BRIEF.md` immediately after init** (never before — `init` refuses a non-empty directory): the intent layer's locked brief, shape per `../hyperframes-core/references/brief-format.md`. Resolve `<MEDIA_DIR>` as the installed `/media-use` skill directory. Then record each preference-backed answer with `node <MEDIA_DIR>/scripts/prefs.mjs record --hyperframes .` (`brief-format.md` names the subset). If the intent layer adopted a recipe, run `node <MEDIA_DIR>/scripts/recipe.mjs use --hyperframes . --name <name>`; it copies its `frame.md` into the project (Step 2 is then skipped) and returns the skeletons Step 3 drafts from. A recipe fills answers, not approvals; the review gates still run.
+
+**Show sign-in status before proceeding past Setup** — run `npx hyperframes auth status` and relay its output verbatim. It reports whether voice/BGM will use HeyGen or local engines and, when signed out, how to sign in. Apply one branch:
+
+- **Collaborative:** wait for the user to sign in or explicitly choose `offline` / `go`.
+- **Autonomous:** state the status and continue through the available local engines.
+
+Do not silently omit a required capability when no offline provider exists; surface the blocker. Do not fold this decision into another question or write keys into a per-repo `.env`. Auth ownership and offline fallbacks: `/media-use` § Providers.
+
+**Gate:** `hyperframes.json` and `BRIEF.md` exist; the preference-backed answers were recorded (brief contract § 2); sign-in status was shown (signed in, or continuing offline).
+
+---
+
+## Step 1: Brief (no capture)
+
+Goal: Fold the user's text into the project as the source of information. There is **no website capture and no real assets** — this is a faceless explainer.
+
+Save the user's full input verbatim, then create the synthetic capture package by hand:
+
+- `capture/extracted/visible-text.txt` — the full article / notes / topic / brief, verbatim. This is the source of **information**, not a story template (Step 3 reshapes it).
+- `capture/extracted/tokens.json` — `{ "title": "", "description": "", "colors": [], "fonts": [] }`. Fill `title`/`description` from the brief. Leave `colors`/`fonts` empty unless the user explicitly gave brand colors or fonts — then add them (the design preset supplies a complete palette regardless).
+
+If the user pasted a script or wants their wording kept, save it verbatim as `user_script.txt`; `VO_MODE` (verbatim or restructured) comes from `BRIEF.md` — the intent layer asks it when a script arrives. Ask once here only if the brief somehow lacks it, and store the answer for Step 3.
+
+Do **not** run `npx hyperframes capture` (there is no URL). Do not create `asset-descriptions.md` or populate `capture/assets/` — faceless visuals are invented in Steps 4-5, not captured. The one exception: if the user supplied a real image, place it under `public/<basename>` and note it for Step 3.
+
+**Gate:** `capture/extracted/visible-text.txt` and `capture/extracted/tokens.json` exist; you can state the explainer's topic and audience in one clear sentence.
+
+---
+
+## Step 2: Design System
+
+Goal: Choose one shipped frame preset; a script turns it into this video's `frame.md` + caption skin.
+
+When `BRIEF.md` names a `style_preset` — the user picked it by eye from the showcases at the intent layer — use it; the judgment call is yours only when the brief is silent. Then you make the one call — **which preset**: read `../hyperframes-creative/references/design-spec.md` and browse `../hyperframes-creative/frame-presets/`; pick the preset whose look best fits the topic, tone, and audience. Then run:
+
+```bash
+node <SKILL_DIR>/scripts/build-frame.mjs --preset <name> --hyperframes .
+```
+
+The script does the rest deterministically: copies the preset's `FRAME.md` → `frame.md` and **remixes** it onto any brand tokens in `capture/extracted/tokens.json` (brand colors mapped onto the preset's color keys by role; the preset's display + body fonts swapped for the brand's), copies the preset's caption skin to `.hyperframes/caption-skin.html`, and self-validates (exits 1 on a broken mapping). Proceed as soon as it exits 0 — no hand-editing of the spec.
+
+A faceless explainer usually has **no brand colors/fonts** (`tokens.json` colors/fonts empty) → the script keeps the preset's own palette, a complete shippable design. Only when the user named brand colors/fonts add them to `tokens.json` before running, and only adjust `frame.md` by hand afterward if a mapping truly needs it.
+
+**Gate:** `build-frame.mjs` exited 0 — `frame.md` exists from a named preset, and (when the preset ships one) `.hyperframes/caption-skin.html` exists as the caption skin source; the chosen preset was recorded as a preference (`--key style_preset --workflow <this workflow>`, brief contract § 2).
+
+---
+
+## Step 3: Storyboard and Script
+
+Goal: Turn the text into an approved frame-by-frame teaching plan.
+
+Read `../hyperframes-creative/references/story-spine.md` (hook language, value-before-evidence, storyboard-as-proposal), `references/story-design.md`, `../hyperframes-animation/blueprints-index.md`, `../hyperframes-core/references/storyboard-format.md`, and `../hyperframes-core/references/script-format.md`. Use them to write `STORYBOARD.md` and, when narration is needed, `SCRIPT.md`.
+
+Use `story-design.md` for the explainer structure (concept / how-to / listicle / story), hook strategy, clarity techniques, emotional beats, the type-enum mapping, and `VO_MODE`. The video's sequence comes from **narrative design, not the input text's paragraph order** — reorder, merge, omit, compress. As a **soft guide**, consult the role→blueprint menu in `../hyperframes-animation/blueprints-index.md`: for each beat, write the voiceover in the shape its candidate blueprint implies and tag that candidate `blueprint:` id when one fits. Teaching truth still decides which beats exist — never force a beat to fit a blueprint, and never invent a beat just because a proven shape is available. Faceless visuals are invented downstream, so frames do **not** carry an asset inventory: leave `asset_candidates` empty unless the user supplied a real `public/<basename>` image. Use the exact required fields from the storyboard and script references.
+
+After drafting, run the review loop's plan pass — `../hyperframes-core/references/review-loop.md` § 1: open the board (don't ask whether to), present the plan as a proposal, and ask the two questions — approve or change, and **sketches first** (recommended) or skip. Feedback loops through chat or the board's comments file until approved. This is a **checkpoint gate** (brief contract § 1): in autonomous mode there is no board and nothing to ask — post the same summary as a heads-up and proceed; sketches collapse into the build, and the one preview question comes at Step 6.
+
+**Gate:** `STORYBOARD.md` exists, every frame has the required narrative fields, `SCRIPT.md` exists when narration is needed, and the user approved the frame-by-frame plan (autonomous: the summary was posted as a heads-up).
+
+---
+
+## Step 3.1: Audio
+
+Goal: Generate narration, word timings, music, and audio metadata from the approved script.
+
+Start audio after Step 3 approval. Run it in the background, then continue to Step 4. (Sign-in status was already shown in Step 0; the engine falls back automatically.)
+
+**Choose the narration voice from the user's ask before invoking.** If the request named a voice, gender, or tone, pick a matching voice id and pass it with `--voice <id>`. The pipeline default is otherwise **Marcia (female)** on HeyGen / `am_michael` on Kokoro — so a request like "a male voice" is silently ignored unless you pass the flag. Voice ids are provider-specific; resolve against whichever provider Step 0's sign-in status selected: **HeyGen** (signed in) via `node <MEDIA_DIR>/audio/scripts/heygen-tts.mjs --list` (or `GET /v3/voices?engine=starfish`); **Kokoro** (offline) via the voice table in `<MEDIA_DIR>/audio/references/tts.md` (prefixes `am_`/`bm_` male, `af_`/`bf_` female). When the user expressed no preference, fall back to the remembered voice (brief contract § 2) before the pipeline default, and say which one you used; omit `--voice` only when neither names one. When the user explicitly picked a voice this run, record it (`prefs.mjs record --key voice`).
+
+`node <SKILL_DIR>/scripts/audio.mjs --script ./SCRIPT.md --storyboard ./STORYBOARD.md --hyperframes . --out ./audio_meta.json --voice <voice-id> &`
+
+The audio script handles narration, word timings, BGM lookup from HeyGen's music library, and timing metadata. BGM mood comes from the storyboard's `music:` field. This uses the HeyGen Audio API for retrieval, not generation, and the same `~/.heygen` credential as TTS. For provider details, read `../media-use/audio/references/tts.md`.
+
+If there is no narration and no `SCRIPT.md`, skip voice generation. BGM may still run if the storyboard has a music mood.
+
+**The canonical fully-silent marker** (shared across the workflows that reuse this audio model): `music: none` in the STORYBOARD.md top YAML block **and** no `SCRIPT.md`. That combination marks the project silent — no narration, no BGM, no SFX. `audio.mjs` recognizes it and generates nothing (it removes any stale `audio_meta.json`; an absent `audio_meta.json` is what assemble treats as silent), so this step is a clean skip. `music: none` with narration keeps TTS and turns only BGM off. Use exactly this spelling — don't improvise other markers.
+
+**Gate:** audio job has started, or the project is marked silent (`music: none` + no `SCRIPT.md`).
+
+---
+
+## Step 4: Frame Visual Design
+
+Goal: Add the visual direction, layout intent, and motion choices to each storyboard frame.
+
+**Sketch the board first (collaborative only).** The moment the plan is approved, run the sketch pass — `../hyperframes-core/references/review-loop.md` § 2 (don't wait on Step 3.1; sketches don't use timings): wireframe every frame yourself, mark each `built`, pause for the one layout question when the board is full, and revise only the sketches named until the board is confirmed. Only then write the visual design below onto the confirmed layouts. In autonomous mode, or when the user chose to skip sketches at Step 3, skip this pass — frames go straight from `outline` to `animated` at Step 5.
+
+Edit `STORYBOARD.md` in place. Do not create another storyboard. Use `frame.md` as source of truth for color, type, layout feel, and style.
+
+Read `references/visual-design.md`, `../hyperframes-animation/blueprints-index.md`, `references/motion-language.md`, and `../hyperframes-animation/rules-index.md`. Use `visual-design.md` for the method (the time-coded shot sequence, the inline Layout vocabulary, and the invented-visual treatment), plus the required `## Video direction` block. Use `../hyperframes-animation/blueprints-index.md` to pick each frame's shot shape. Use `motion-language.md` (the motion vocabulary + the motion doctrine) and `../hyperframes-animation/rules-index.md` (valid rule names) for motion — do not invent motion names.
+
+For every frame, write a **time-coded shot sequence** into `STORYBOARD.md` per `visual-design.md`'s method: pick the frame's blueprint (or compose), instantiate it with THIS frame's **invented** content, and pace each Scene's reveal to the voiceover so the frame develops across its full duration instead of front-loading then freezing. Because the explainer is faceless, `focal`/`roles` name the **invented visual elements** (a hero word, a diagram node, a data-viz series) — you are designing them, not selecting captured assets. State layout and motion **inline** per Scene (vocabularies in `visual-design.md` and `motion-language.md`). Add one video-wide `## Video direction` block.
+
+Do not change story, script, `transition_in`, or the source text. Do not write HTML in this step. There is **no asset-staging step** — faceless visuals are built by the workers in Step 5. If the user supplied a real `public/<basename>` image, reference it by path in the relevant frame's `focal`/`roles`; otherwise nothing to stage.
+
+**Gate:** every frame has a time-coded shot sequence whose reveals are paced to the voiceover (no front-loading); each frame names its invented `focal` and/or `roles`; `## Video direction` exists. Collaborative: the sketch board was confirmed.
+
+---
+
+## Step 5: Build Frames
+
+Goal: Build every storyboard frame as an HTML composition and assemble the playable video.
+
+Wait for Step 3.1 audio to finish if audio was started. Then sync durations and fetch SFX; skip both if silent.
+
+`node <SKILL_DIR>/scripts/audio.mjs sync-durations --audio-meta ./audio_meta.json --storyboard ./STORYBOARD.md`
+
+`node <SKILL_DIR>/scripts/audio.mjs fetch-sfx --storyboard ./STORYBOARD.md --hyperframes .`
+
+Duration sync is mechanical: real voice duration wins; silent frames keep estimates; never hand-edit synced durations.
+
+Before dispatch, read `sub-agents/frame-worker.md` and `../hyperframes-core/references/subagent-dispatch.md`. Dispatch one sub-agent per frame, in parallel if possible; otherwise run workers in waves. Each worker gets exactly one frame.
+
+Each worker context must include `PROJECT_DIR`, `frame_id`, whether the frame has a **confirmed sketch** on disk, canvas size, caption status and keep-out band if captions are enabled, and `RULES_DIR` as the absolute path to this skill's `../hyperframes-animation/rules/`. Each worker reads `frame.md`, its own `## Frame N` block from `STORYBOARD.md`, the confirmed sketch when one exists (keep its layout — frame-worker § When a confirmed sketch exists), the local rule recipe (`../hyperframes-animation/rules/<id>.md`) for each cited motion, and the frame's blueprint template (`../hyperframes-animation/blueprints/<id>.md`). Each worker writes only `compositions/frames/NN-*.html`. Workers must never edit `STORYBOARD.md`.
+
+**Full-bleed backgrounds ride on a `class="clip"` layer, never the `#root`.** A frame's ground (color field / gradient / grid) is its own full-duration background clip — a `background` set on the `#root` / `data-composition-id` element is clip-gated to the frame's window and is not a dependable ground, so dark content can land on the black host `body` and render invisible. The video's base ground is painted by the assembler from `frame.md`'s `canvas` color onto the index `#root`. (Full rule + self-check: `sub-agents/frame-worker.md`.)
+
+As each worker returns, the orchestrator marks that frame as `animated` in `STORYBOARD.md`.
+
+After audio timings exist, build captions in the background and assemble the index:
+
+`node <SKILL_DIR>/scripts/captions.mjs build --storyboard ./STORYBOARD.md --audio-meta ./audio_meta.json --hyperframes . --out ./caption_groups.json &`
+
+`node <SKILL_DIR>/scripts/assemble-index.mjs --storyboard ./STORYBOARD.md --hyperframes .`
+
+`captions.mjs` uses the project's `.hyperframes/caption-skin.html` (copied in Step 2) as the caption look, injecting brand tokens from `frame.md`; with no skin present it renders the built-in default pill. `captions: skipped (<reason>)` is valid. Continue without captions when explicitly skipped.
+
+**Gate:** every frame is marked `animated` (collaborative: the sketch board was confirmed at Step 4), `index.html` exists, and captions are built or explicitly skipped.
+
+---
+
+## Step 6: Finalize
+
+Goal: Verify the assembled video, get user approval, and render the final MP4.
+
+Inject transitions, run checks, pause for review, then render.
+
+`node <SKILL_DIR>/scripts/transitions.mjs inject --storyboard ./STORYBOARD.md --hyperframes .`
+
+`node <SKILL_DIR>/scripts/transitions.mjs verify --storyboard ./STORYBOARD.md --index ./index.html`
+
+`npx hyperframes lint`
+
+`npx hyperframes check`
+
+`npx hyperframes snapshot --at <frame-midpoints>`
+
+`snapshot` stitches the captured frames into one contact sheet (`snapshots/contact-sheet.jpg`). Glance at it; if nothing is obviously broken, move on — don't linger here.
+
+If a command fails, surface stderr and stop — don't pile on recovery commands. Fix it yourself: the cheapest safe edit to `compositions/frames/NN-*.html`, then rerun the failed check.
+
+**Known false-positive — do not chase it.** `check` may report a handful of `text_box_overflow` findings of ~1–4px on the **caption** highlight words (selector `#caption-word-*` / `.caption-line`). The caption pill uses a deliberately snug `line-height` (set once in `scripts/captions.mjs`) and has **no `overflow:hidden`**, so a heavy display glyph's ink spills a few px into the pill's own padding — nothing is actually clipped. Treat these as expected and proceed. Do **not** inflate the caption `line-height` (it balloons the pill, which is worse). Only act on a `text_box_overflow` when it names a **frame** element (`#el-NN-*`), not a caption word.
+
+After checks pass, pause for user review — the review loop's final look (`../hyperframes-core/references/review-loop.md` § 4): one question, on the Studio that has been open since Step 3 — render now, or what changes? (Autonomous: the one kept question, preview first or render.) Then deliver the MP4 with the contact sheet and the frame ids so revisions can target a single frame.
+
+Preview: `npx hyperframes preview`
+
+Render only after user approval (autonomous mode: after the preview-or-render question):
+
+`npx hyperframes render --skill=faceless-explainer --quality high --output renders/video.mp4`
+
+Do not rerun `lint`, `check`, or `snapshot` after rendering unless the user asks.
+
+**Gate:** `lint` and `check` passed and the snapshots were inspected before render; user approved at the review pause (autonomous: checks passed and the delivery includes the contact sheet); `renders/video.mp4` exists. Final reply states MP4 path and final duration.
+
+---
+
+## Quick Reference
+
+**Formats:** landscape `1920x1080`; portrait `1080x1920`; square `1080x1080` — derived from the destination (brief contract § 2). Set the format once in the storyboard frontmatter.
+
+**Faceless deltas vs a captured-asset workflow:** no Step 1 capture (synthetic `tokens.json` + `visible-text.txt`); no `asset-descriptions.md` and no `capture/assets/`; no asset-staging in Step 4; `asset_candidates` empty by default; every visual is invented by the Step 5 workers (typography / abstract graphics / diagrams / data-viz). A user-supplied `public/<basename>` image is the only real asset path.
+
+**Background scripts:** the workflow ships only these under `scripts/`: `build-frame` for adopting + brand-remixing a frame preset into `frame.md` (+ caption skin); `audio` for TTS, transcription, BGM, SFX, and duration syncing; `captions`; `transitions` for inject and verify; and `assemble-index`. Everything else is the `hyperframes` CLI.
+
+The reusable, domain-agnostic shot shapes live in `../hyperframes-animation/blueprints/` (indexed by `../hyperframes-animation/blueprints-index.md`).
+
+| Read                                                                                                                                                        | When                                                                           |
+| ----------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------ |
+| `[../hyperframes-core/references/brief-contract.md](../hyperframes-core/references/brief-contract.md)`                                                      | Gate types, mode derivation from `BRIEF.md`, field semantics.                  |
+| `[../hyperframes-creative/references/story-spine.md](../hyperframes-creative/references/story-spine.md)`                                                    | Step 3: story doctrine — hook language, value-before-evidence, proposal shape. |
+| `[../hyperframes-creative/frame-presets/](../hyperframes-creative/frame-presets/)`                                                                          | Step 2: choose and adopt a frame preset.                                       |
+| `[../hyperframes-creative/references/design-spec.md](../hyperframes-creative/references/design-spec.md)`                                                    | Step 2: apply brand tokens correctly.                                          |
+| `[references/story-design.md](references/story-design.md)`                                                                                                  | Step 3: plan the explainer story.                                              |
+| `[../hyperframes-animation/blueprints-index.md](../hyperframes-animation/blueprints-index.md)`                                                              | Step 3: role→blueprint menu. Step 4: pick the shot shape.                      |
+| `[../hyperframes-core/references/storyboard-format.md](../hyperframes-core/references/storyboard-format.md)`                                                | Step 3: write `STORYBOARD.md`.                                                 |
+| `[../hyperframes-core/references/script-format.md](../hyperframes-core/references/script-format.md)`                                                        | Step 3: write `SCRIPT.md`.                                                     |
+| `[../media-use/audio/references/tts.md](../media-use/audio/references/tts.md)`                                                                              | Step 3.1: choose or understand TTS providers and voices.                       |
+| `[references/visual-design.md](references/visual-design.md)`                                                                                                | Step 4: write the frame's shot sequence (+ Layout vocabulary).                 |
+| `[references/motion-language.md](references/motion-language.md)`                                                                                            | Step 4: the motion vocabulary + the motion doctrine.                           |
+| `[references/cut-catalog.md](references/cut-catalog.md)`                                                                                                    | Step 4-5: the cut catalog (worker builds within-frame seams).                  |
+| `[../hyperframes-animation/rules-index.md](../hyperframes-animation/rules-index.md)` + `[../hyperframes-animation/rules/](../hyperframes-animation/rules/)` | Step 5: local rule recipe bodies for the cited motions.                        |
+| `[sub-agents/frame-worker.md](sub-agents/frame-worker.md)`                                                                                                  | Step 5: dispatch per-frame workers.                                            |
+| `[../hyperframes-core/references/subagent-dispatch.md](../hyperframes-core/references/subagent-dispatch.md)`                                                | Step 5: dispatch sub-agents safely.                                            |
diff --git a/.claude/skills-media/faceless-explainer/references/cut-catalog.md b/.claude/skills-media/faceless-explainer/references/cut-catalog.md
new file mode 100644
index 000000000..9aef70e40
--- /dev/null
+++ b/.claude/skills-media/faceless-explainer/references/cut-catalog.md
@@ -0,0 +1,215 @@
+# Cut catalog — within-frame seams (worker-built)
+
+> **A worker build-recipe (Step 5) — the sibling of `../hyperframes-animation/rules/`, not a second motion doc.** These are within-frame cuts the **frame worker builds INSIDE its own composition** (Z-scale + blur + opacity tweens, or per-word x-staggers, all on the frame's own paused GSAP timeline). They are **not** the between-frame transition: story owns that via `transition_in`, which the harness's injector stamps from a **separate registry vocabulary** (`crossfade` / `blur-crossfade` / `push-slide` / `zoom-through` / `squeeze`) — the catalog names here (**cut-the-curve / inverse-zoom / waterfall**) are **not** valid `transition_in` values. Use this catalog when a frame's shot sequence has an internal seam — a within-scene text/element swap, a **Scene-to-Scene** cut (a `Scene` is a time window WITHIN one frame, **not** a frame-to-frame boundary), or a text-to-text line change — and you want it to read as one continuous move instead of a hard slideshow cut. (`zoom-through` lives in both worlds: a whole-frame wrapper transition in the registry, an element-level Z-cut here — same idea, different scope.)
+
+Four techniques that create depth and continuity:
+
+1. **Zoom-Through** — within-scene text swaps, Z-axis, moving TOWARD the viewer
+2. **Inverse Zoom-Through** — Z-axis swaps moving AWAY from the viewer
+3. **Cut the Curve** — between-scene transitions on x/y
+4. **Waterfall Cut** — word-by-word cut-the-curve with staggered exits and entries
+
+All four are the same underlying principle: **cut at peak velocity, match direction and
+speed on both sides of the cut.** The differences are axis, scope, and granularity.
+
+**Choosing which at a seam:** for an UNFINISHED phrase (building one larger idea across
+several visually distinct scenes that still approach the same point — multi-line text, a
+run of consecutive cards) use **cut-the-curve** / **waterfall**. For a STATE CHANGE (turning
+to a NEW part of the video — most often hook → context, between two distinct chapters) use
+**zoom-through**, and **inverse zoom-through** for an arrival / payoff beat. Chain these so
+the frame's internal seams feel like one camera moving through the content.
+
+---
+
+## Blur Logic (applies to all Z-axis variants)
+
+Blur sells the speed at the cut, but it must scale with the SUBJECT SIZE:
+
+| Subject                                                | Peak blur   | Why                                                                                                                                                                                      |
+| ------------------------------------------------------ | ----------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| Text-scale (headline, line, word group)                | **10px**    | At 20px text smears into illegibility — the eye loses the word it was tracking and the cut reads as a glitch, not speed. At 20px letterforms go mushy mid-cut; 10px keeps them readable. |
+| Full-frame surface (terminal window, card, screenshot) | **18–20px** | Big surfaces have edges and texture that survive heavy blur; lighter blur on a full-frame move reads as a rendering hiccup instead of motion.                                            |
+
+Both sides of a cut use the SAME peak blur — the value must match at the swap frame.
+Apply blur to the WRAPPER, never to individual children.
+
+---
+
+## 1. Zoom-Through (forward)
+
+### The Problem
+
+Text enters, holds, exits. Then next text enters, holds, exits. Each text block is
+independent — no depth, no continuity. The video feels like a slideshow.
+
+### The Principle
+
+A velocity-matched cut on the Z-axis. You **never see both texts at the same time.** The
+outgoing text scales toward the viewer (accelerating), blur and opacity peak at the cut
+point hiding a hard swap, and the incoming text continues scaling up from behind
+(decelerating into the focal plane). One continuous forward motion, two different texts.
+
+### The Three Phases
+
+**Phase 1: Exit** — text accelerates forward (toward viewer)
+
+- Scale: `1.0 -> 1.2`, Blur: `0px -> 10px` (text-scale; see Blur Logic), Opacity: `1.0 -> 0.15`
+- Scale/blur easing: `power3.in` (steep acceleration)
+- Opacity easing: `none` (linear — even dimming, separated from scale)
+- Duration: 0.2s
+
+**Phase 2: Hard cut** at peak velocity + peak blur
+
+- Outgoing: `opacity: 0` (instant via `tl.set`)
+- Incoming: `opacity: 0.15, scale: 0.75, blur: 10px` (instant via `tl.set`)
+- All properties match at the cut: blur, opacity, and scale DIRECTION (both scaling up)
+
+**Phase 3: Entry** — text continues forward (growing into focal plane)
+
+- Scale: `0.75 -> 1.0`, Blur: `10px -> 0px`, Opacity: `0.15 -> 1.0`
+- Easing: `expo.out` (steep initial burst matching exit velocity, long settle)
+- Duration: 0.5s
+
+### Why Opacity Must Be Separate on Exit
+
+Scale uses `power3.in` but that keeps opacity near 1.0 for most of the tween. Splitting
+opacity to its own tween with linear ease makes the dimming even. On entry, all properties
+can share `expo.out`.
+
+---
+
+## 2. Inverse Zoom-Through (backward)
+
+The mirror: the camera "pulls back" instead of pushing through. The outgoing element
+RECEDES away from the viewer; the incoming element arrives OVERSIZED (as if it had been
+just behind the camera) and retracts into the focal plane. Both move in the shrinking
+direction — same-direction rule preserved, just reversed.
+
+**When to use over the forward variant:** arrival beats. The incoming element lands with
+presence because it comes from larger-than-frame — right for a payoff line ("That changes
+today."), a giant reply, or a held end-state. Forward zoom-through reads as _progressing
+through_ content; inverse reads as _arriving at_ content.
+
+### The Three Phases
+
+**Phase 1: Exit** — element recedes (away from viewer)
+
+- Scale: `1.0 -> 0.8`, Blur: `0px -> 10px` (text-scale)
+- Scale/blur easing: `power3.in`; Opacity: `1.0 -> 0.15` on `none` (separate tween)
+- Duration: 0.2s
+
+**Phase 2: Hard cut**
+
+- Outgoing: `opacity: 0` via `tl.set`
+- Incoming: `opacity: 0.15, scale: 1.25, blur: 10px` via `tl.set`
+
+**Phase 3: Entry** — incoming retracts into place
+
+- Scale: `1.25 -> 1.0`, Blur: `10px -> 0px`, Opacity: `0.15 -> 1.0`
+- Easing: `expo.out`, Duration: 0.5s
+
+---
+
+## 3. Cut the Curve (Scene Transitions)
+
+### The Principle
+
+Use cut-the-curve for **all scene-to-scene transitions** on x and y axes. The outgoing
+scene's hero element accelerates in one direction, the cut lands mid-motion, and the
+incoming scene's hero element continues moving in the **same direction** and decelerates.
+Nothing exits fully off-screen and nothing enters from fully off-screen — **speed plus
+opacity fading trick the eye**; the partial moves are enough.
+
+### Same Path, Same Direction
+
+If Scene A's hero slides left, Scene B's hero enters from the right and continues sliding
+left. Both move leftward. One continuous motion.
+
+| Direction | Scene A exit   | Scene B entry start | Scene B entry end |
+| --------- | -------------- | ------------------- | ----------------- |
+| Leftward  | `x: 0 -> -230` | `x: +230`           | `x: 0`            |
+| Rightward | `x: 0 -> +230` | `x: -230`           | `x: 0`            |
+| Upward    | `y: 0 -> -230` | `y: +230`           | `y: 0`            |
+| Downward  | `y: 0 -> +230` | `y: -230`           | `y: 0`            |
+
+### Velocity matching via mirrored eases
+
+The cleanest match: exit `power4.in` and entry `power4.out` with the SAME distance and
+duration — mathematically the two halves of one `power4.inOut` composite, so the entering
+element picks up at exactly the 50% point of the notional path at identical velocity
+(e.g. 230px / 0.3s ≈ 3,070 px/s at the cut on both sides).
+
+The fade trick: the exit's opacity completes at ~25–30% of its travel (fade duration
+≈ 0.18–0.3s vs motion 0.3–0.34s) — the element vanishes while still visibly accelerating,
+and nothing has to reach the frame edge. Entry fades IN fast from ~0.35 under its
+deceleration. Time the LAST fading element to die right at the hard cut — gaps where
+nothing is moving read as awkward dead air.
+
+### Rules
+
+- Use cut-the-curve for all scene transitions — it's the default, not an accent
+- Same direction on both sides; mirrored `.in`/`.out` eases, same distance + duration
+- Exit duration short (0.2–0.4s), entry duration >= exit duration
+- Partial travel + fade, never full off-screen moves
+
+---
+
+## 4. Waterfall Cut (word-by-word cut-the-curve)
+
+Cut-the-curve at WORD granularity — the strongest version of the leftward cut for
+text-to-text seams. Each word of the outgoing line ramps out on its own pronounced curve;
+each word of the incoming line cascades in mid-flight. The stagger turns the cut into a
+wave the eye rides across the seam.
+
+### Exit (per word)
+
+- Motion: `x: 0 -> -230` over 0.34s on **power4.in** — a much more pronounced ramp than
+  the usual power2: the word barely creeps, then RIPS
+- Fade: `opacity -> 0` over 0.18s (separate tween, `power1.in`) — completes when the word
+  is only ~25–30% into its travel
+- Stagger: reading order, ~0.022s per word, timed so the LAST word finishes fading right
+  at the hard cut
+
+### Entry (per word)
+
+- `fromTo x: +230 -> 0, opacity: 0.35 -> 1` over 0.3s on **power4.out** — the mirrored
+  back half of the composite; every word ignites already moving at matched velocity
+- Waterfall stagger with SHRINKING gaps (start 0.05s, multiply by ~0.84 per word) so the
+  cascade accelerates across the line — the cascade should speed up word over word, not run
+  at a flat per-word delay
+- Pre-set all words to `x: +230, opacity: 0` at build time — `immediateRender: false`
+  alone leaves un-started words sitting visible at rest during the stagger window
+
+### Whole-line variant
+
+A single-line beat (e.g. a big intro line) exits as one group with the same pronounced
+ramp, but stretch its fade to ~0.3s ending ~0.02s before the cut — a lone element that
+fades early leaves dead air that a word cascade would have covered.
+
+---
+
+## Choosing a Variant
+
+|                | Zoom-Through                | Inverse Zoom                | Cut the Curve     | Waterfall Cut             |
+| -------------- | --------------------------- | --------------------------- | ----------------- | ------------------------- |
+| Scope          | Within-scene text swap      | Arrival/payoff beat         | Between scenes    | Text-to-text seam         |
+| Axis           | Z, toward viewer            | Z, away from viewer         | X / Y             | X, per-word               |
+| Peak blur      | 10px text / 20px full-frame | 10px text / 20px full-frame | none required     | none (fade does the work) |
+| Opacity at cut | 0.15                        | 0.15                        | exit faded by cut | last word dies at cut     |
+| Feel           | progressing through         | arriving at                 | carried sideways  | a wave across the seam    |
+
+---
+
+## Anti-Patterns
+
+| Don't                                    | Why                                         | Instead                                                |
+| ---------------------------------------- | ------------------------------------------- | ------------------------------------------------------ |
+| Two texts visible during a zoom-through  | Overlapping text breaks the Z-axis illusion | Hard cut at blur peak, one text at a time              |
+| 20px blur on text-scale subjects         | Letterforms smear; reads as a glitch        | 10px for text, 18–20px only full-frame                 |
+| Elements on different paths across a cut | Eye tracks one direction, cut goes another  | Same property, same direction                          |
+| Mismatched blur/opacity at the swap      | Visible flash or brightness jump            | Identical values at the cut frame                      |
+| Gentle easing on entry (`power2.out`)    | Entry velocity feels slower than exit       | Mirror the exit: `power4.out` / `expo.out`             |
+| Full off-screen exits / entries          | Wastes time and breaks the speed illusion   | Partial travel + early fade                            |
+| Lone element fading long before its cut  | Dead air at the seam                        | Fade ends ~0.02s before the cut, or use a word cascade |
+| Zoom-through on body text                | Small text at 0.75 scale is unreadable      | Only headlines and short phrases                       |
+| Scene cuts without cut-the-curve         | Static cuts feel like a slideshow           | Cut-the-curve is the default                           |
diff --git a/.claude/skills-media/faceless-explainer/references/motion-language.md b/.claude/skills-media/faceless-explainer/references/motion-language.md
new file mode 100644
index 000000000..70395a001
--- /dev/null
+++ b/.claude/skills-media/faceless-explainer/references/motion-language.md
@@ -0,0 +1,156 @@
+# Motion language — the move vocabulary + the motion doctrine + the seek-safe core
+
+> The motion layer for **Step 4 (Visual design)**. When you write a frame's **time-coded shot sequence**, you name each scene's move **inline from the vocabulary below** — a named palette of the moves the golden corpus actually uses. Each move carries the **backing rule id** in this skill's local `../hyperframes-animation/rules/`; cite that id so the move resolves to a real recipe when a **frame worker** implements it in Step 5 (the worker reads the rule body in `../hyperframes-animation/rules/<id>.md` — it reproduces the move, it does not guess from the name). You name motion by **role / move name**, never by raw GSAP curve, ms, or stagger formula — the worker maps the curve. Between-frame **transitions are not yours**: story names `transition_in`, the harness injects it; that injected transition **is** the frame's exit. For cuts a worker builds INSIDE a frame (within-scene swaps, scene-to-scene seams), see the catalog in `cut-catalog.md`.
+
+A good explainer feels like one continuous film — one camera, one motion feel, **smooth and timed to the voiceover** — not a pile of slides that animate once and freeze. In an explainer the development _is_ the teaching: the formula assembling, the diagram gaining a layer, the count-up landing. The doctrine in Part 2 is load-bearing: when in doubt, do what it says.
+
+---
+
+# Part 1 — the move vocabulary
+
+Reach into this palette when naming a scene's motion. Pick the move that matches the beat, name it in the shot sequence, and cite the rule id after `→`. The blueprints (`../hyperframes-animation/blueprints/`) name these same moves in their `rule mapping`; you're drawing from one shared palette. Compose 2–4 across a shot's scenes (entrance → sequential reveal → settle), not all at once.
+
+## Kinetic type
+
+- **hard-cut / flash word-swap** — a word or line replaces the previous one on an instant cut (no fade/roll); the swap itself is the beat. → `discrete-text-sequence`
+- **in-place token cycle** — a fixed line holds and only its variable slot changes, token → token → token. → `discrete-text-sequence`
+- **per-word staggered reveal** — a phrase assembles word-by-word (or chunk-by-chunk), each landing on its own beat. → `dynamic-content-sequencing`
+- **kinetic beat-slam** — short phrases slam in on a shared percussive beat array, each with a distinct entrance, resolving on a locked finale; the recipe for "punchy / rhythmic" taglines. → `kinetic-beat-slam`
+
+## Typewriter
+
+- **type-on with caret** — text types in character-by-character behind a blinking caret. → `discrete-text-sequence` (+ `context-sensitive-cursor` for the caret blink / color)
+- **backspace-and-retype** — the line types, deletes the last word(s), and retypes a new one (typo-correction, reframe). → `discrete-text-sequence` (+ `context-sensitive-cursor`)
+
+## Count-up / data
+
+- **value-scaled counter** — a number counts up and its font size grows with the value, so the climb itself escalates. → `counting-dynamic-scale`
+- **bars / progress / star wipe** — a number paired with a graphic that fills: bar-height stagger, a progress bar / ring filling, a fractional star-rating wipe. → `stat-bars-and-fills`
+
+## Reveal / decode
+
+- **3D char flip-decode** — characters flip in 3D and resolve from scrambled glyphs to the real text (decryption feel). → `hacker-flip-3d`
+- **SVG self-draw** — an outline / icon / ring draws itself stroke-by-stroke. → `svg-path-draw`
+
+## Camera
+
+- **push / focus / drift** — a sequential camera move on the frame root (pull-back → focus → push) plus continuous micro-drift; the cinematic baseline. → `multi-phase-camera`
+- **zoom-to-target** — zoom into a non-centered element (scale + counter-translate to keep it framed). → `coordinate-target-zoom`
+- **pan / focus-lock** — a virtual camera transforming one `.world` wrapper to pan / zoom / lock onto a region. → `viewport-change`
+- **camera-cursor-tracking** — the viewport locks to a moving focal point (a typing cursor), static framing then focal-locked tracking. → `camera-cursor-tracking`
+
+## Layout motion
+
+- **cluster→outward expansion** — elements start clustered at center and expand outward to their final positions in lockstep. → `center-outward-expansion`
+- **orbit** — elements flip in from 3D space and settle into a continuous elliptical orbit (entry flips in-place at the orbital position). → `orbit-3d-entry`
+- **split-tilt cards** — two cards side-by-side with opposing rotationY tilts, entering from their respective sides (comparison / before-after). → `split-tilt-cards`
+- **logo/avatar ring + connectors** — avatars or logos on an elliptical ring with SVG connection lines to a center point, staggered entry. → `avatar-cloud-network`
+
+## Surface / UI
+
+- **3D page-scroll reveal** — a full webpage as a tilted 3D card whose internal content scrolls to reveal specific sections. → `3d-page-scroll`
+- **cursor click + ripple** — a cursor moves to a target, depresses with it on click, and emits an expanding ripple. → `cursor-click-ripple`
+- **button press** — a tactile press: compression then spring recovery, optional release burst / glow. → `press-release-spring` (or `physics-press-reaction` for a click that compresses cursor + target together)
+- **keyword glow** — keywords light up with glow + scale + color on an attack-decay-rest envelope, synced to a word rail. → `asr-keyword-glow`
+
+## Morph / handoff
+
+- **scale-swap** — two elements at the same screen center hand off: the outgoing cluster shrinks + fades as the incoming one arrives. → `scale-swap-transition`
+- **card morph-anchor** — a container morphs apparent size + corner radius + surface between two shots, then fades to reveal the real target beneath (HyperFrames uses uniform `scale`, not `width`/`height`). → `card-morph-anchor`
+
+## Seam cuts (worker-built, inside a frame)
+
+The velocity-matched cuts a worker authors between a frame's own Scenes. Name the seam in the shot sequence; the recipe is in the catalog, not a single `../hyperframes-animation/rules/` id.
+
+- **zoom-through / inverse zoom-through** — a within-scene swap on the Z-axis; forward reads "progressing through", inverse reads "arriving at" (payoff). → `cut-catalog.md`
+- **cut-the-curve** — a scene-to-scene cut where both sides move the same direction at matched velocity. → `cut-catalog.md`
+- **waterfall cut** — cut-the-curve at word granularity, a wave across a text-to-text seam. → `cut-catalog.md`
+
+## Emphasis / marker
+
+- **highlight / circle / burst / scribble** — a marker-drawn emphasis on a word or element: yellow highlight sweep, hand-drawn circle, radiating burst, scribble, or rough sketch-outline. → `css-marker-patterns`
+
+## Aliveness during a hold (use sparingly — see Part 2)
+
+- **subtle jitter** — the sanctioned way to keep a settled frame alive: a small, low-amplitude positional/scale jitter on the held element. The motion-graphics trick that reads "alive" without reading "weak." → `sine-wave-loop` (low-amplitude register)
+- **live SVG internals** — internal SVG parts move so an icon feels alive (rotating hands, oscillating blades, pulsing dots, dash-flow); fine because it's the subject doing something, not a card breathing. → `svg-icon-enrichment`
+- **finite bounded ambient** — a single bounded breathe/drift on ONE held hero, only when genuinely needed; de-emphasized — prefer sequential reveal or jitter first. → `sine-wave-loop`
+
+## The added moves — now backed by local rules
+
+Five moves the golden corpus needs were added to this skill's `../hyperframes-animation/rules/`, rounding out the vocabulary above:
+
+- **depth-of-field / selective-blur** — blur the off-focus subset to spotlight the focal element → `depth-of-field-blur`
+- **motion-blur streak** — directional velocity blur on a fast fly-in / camera push-through → `motion-blur-streak`
+- **3D depth scatter-assemble** — glyphs/elements scatter into a tumbling 3D cloud, then reassemble → `depth-scatter-assemble`
+- **spring-pop entrance** — the canonical entrance pop; default to a smooth long-tail settle, overshoot only when explicitly playful → `spring-pop-entrance`
+- **ambient glow / bloom** — un-triggered soft glow blooming behind a static hero → `ambient-glow-bloom`
+
+---
+
+# Part 2 — the motion doctrine (load-bearing)
+
+These four rules are the difference between a clip that reads as a serious explainer and one that reads as an agent-made PowerPoint. Follow them as written.
+
+## 1. Smooth beats bouncy — `power3` is the default
+
+Elements should use **long-tail decel curves that let them settle smoothly. `power3` is enough in most cases.** No bouncy, no overshoot, no `back.out` / `bounce.out` / `elastic.out` as a default.
+
+Bouncy is the **#1 instant turn-off** in user-made Remotion / HyperFrames videos, and the agent almost never gets it right — it thinks bouncy adds emphasis, but it buys that emphasis at the cost of cleanliness. The serious motion-design shops feel the same. **Smooth always wins.** Overshoot is demoted to a **rare, explicitly-playful exception** (a consumer/fun logo slam, a deliberate bell-hit) — never the house style. Name the intent as a long-tail settle; the worker maps `power3` (or `expo.out` on a fast arrival). See `../hyperframes-animation/rules/spring-pop-entrance.md` — it now leads with the smooth settle. (The exact form of that settle is a critically-damped spring; the worker has a baked, seek-safe `springEase` — ζ=1 — in `../hyperframes-animation/adapters/gsap-easing-and-stagger.md` → Spring Eases for when the settle is the hero. Real physics, same doctrine — not a license for bounce.)
+
+## 2. Sequential reveal in the back ~50%, timed to the voiceover
+
+This is the anti-PowerPoint mechanism — sharper than "put development in the middle."
+
+- **Don't dump everything on screen in the first ~25%** of the scene. Rushing all content in up front is exactly what forces the slideshow feel.
+- **Reveal each piece — a line, a card, even an h1 — when the voiceover mentions it**, sequencing reveals across the **later ~50%** of the scene. Same amount of agent work, but the cut becomes coherent and gains rhythm.
+- **Less is more.** Fewer things on screen, each arriving on its VO beat, beats a full canvas that animated once and froze.
+
+Practically: a frame's shot sequence front-loads almost nothing — the entrance carries only what the VO is saying at t=0, and the rest of the elements wait in the timeline for their spoken cue. A reveal maps onto a development-class move from Part 1 (`per-word staggered reveal`, `cluster→outward expansion`, a `count-up`, an `asr-keyword-glow` synced to the word rail).
+
+## 3. No lazy breathing, no bad pan/push — "no motion over bad motion"
+
+The agent's two reflexive ways to fake "aliveness" both read cheap:
+
+- **No lazy breathing.** Scaling cards/text up and down in a circular loop to look "alive" is the cheap tell. Don't reach for it.
+- **No bad slow pan / push in the back half.** A slow pan or push on elements in the later ~50% of a scene **disrupts the viewer's sightline and causes eye discomfort** — it actively makes the frame worse, not better.
+
+The fix for both is the same: **stagger element reveals in time with the script** (rule 2). And the governing principle: **"I'd rather have NO motion than BAD motion."** A held, still frame is better than a frame kept "alive" by breathing or a drifting camera. The **only sanctioned aliveness** during a hold is **subtle jitter** — a small low-amplitude jitter that keeps a frame from feeling dead without looking weak (it's in Claude videos now). Everything else holds.
+
+## 4. Internal seams are velocity-matched cuts
+
+When a frame has an internal seam — a within-scene swap, a Scene-to-Scene cut, a text-to-text line change — make it a **velocity-matched cut**, not a hard slideshow cut: cut at peak velocity, match direction and speed on both sides. The catalog (the four techniques, the blur logic, and which to use when) is `cut-catalog.md`; the moves are listed under **Seam cuts** in Part 1.
+
+## One-line summary
+
+Smooth long-tail (`power3`) over bouncy; reveal sequentially in the back ~50% timed to the VO (not dumped in the first 25%); no lazy breathing and no bad slow pan/push — prefer stillness, with subtle jitter as the only aliveness; cut at peak velocity with matched direction/speed (→ `cut-catalog.md`).
+
+---
+
+# Part 3 — the seek-safe core (hard rules)
+
+The frame is a **paused GSAP timeline seeked frame-by-frame**, so some "continuous" intents from a real-time engine can't render — don't name them. These are non-negotiable regardless of doctrine.
+
+- **No infinite / forever motion** — "particles loop endlessly," "logo rotates forever," "marquee on repeat." Any aliveness (the subtle jitter, a live SVG internal, a needed bounded ambient) is a **finite tween over the hold**, never `repeat` / `yoyo`.
+- **No randomness or wall-clock** — no `Math.random` particle fields, no `Date.now` drift. Every render must be identical; name deterministic motion only (stagger and any variation derive from the element index).
+- **Entrances use `fromTo`** — state the from-state explicitly so a seek to `t=0` lands the element correctly; never rely on a CSS-hidden start (it renders visible before the tween claims it, and flickers under seek).
+- **No CSS `transition` / `@keyframes` for motion** — CSS animation runs on the browser clock, independent of the HF seek clock; it desyncs and flickers. Drive all motion inside the paused GSAP timeline.
+- **Entrance + sequential reveal only — no mid-video exit.** The frame unmounts via the harness transition; that injected `transition_in` **is** the exit. Exit motion belongs only to the final frame. (Worker-built seam cuts in `cut-catalog.md` are within-frame, not the frame's exit.)
+
+## Forbidden — the failure modes
+
+**Slideshow (the primary failure):** everything dumped on screen in the first ~25%; content enters then freezes; nothing revealed on its VO cue. Fix with rule 2 (sequential reveal timed to the VO).
+
+**Cheap aliveness:** circular breathing as "life"; a slow pan/push in the back half disrupting the eye; many elements floating independently as "motion." Fix with rule 3 (stillness + subtle jitter only).
+
+**Bouncy:** `back.out` / `bounce.out` / `elastic.out` as the default entrance; hand-keyed overshoot. Fix with rule 1 (`power3` long-tail; overshoot only when explicitly playful).
+
+**Always:** no `repeat` / `yoyo`; no `Math.random` / `Date.now`; no all-elements-entering-simultaneously (sequence or stagger).
+
+## Naming motion in a shot — example
+
+> Scene 1 (0.0–1.0s): solid field; hero headline enters via **per-word staggered reveal** (`dynamic-content-sequencing`) on a smooth long-tail settle (`power3`); slow **push** on the root (`multi-phase-camera`) holds steady — no back-half re-push.
+> Scene 2 (1.0–3.0s): as the VO names each step, five mechanism nodes reveal **sequentially** via **cluster→outward expansion** (`center-outward-expansion`), then a **value-scaled counter** (`counting-dynamic-scale`) ticks up beneath them — the back-half reveal, timed to the script, not dumped at t=0.
+> Scene 3 (3.0–4.2s): hold on the result; **keyword glow** (`asr-keyword-glow`) lands on the payoff word as the VO says it; settles and holds still — at most **subtle jitter** (`sine-wave-loop`, low amplitude) keeps it alive; no breathing, no drift.
+
+Name the move + its rule id (or `cut-catalog.md` for a seam cut) per scene; let the worker pick curves, ms, and stagger — defaulting to `power3`.
diff --git a/.claude/skills-media/faceless-explainer/references/story-design.md b/.claude/skills-media/faceless-explainer/references/story-design.md
new file mode 100644
index 000000000..7e68428cd
--- /dev/null
+++ b/.claude/skills-media/faceless-explainer/references/story-design.md
@@ -0,0 +1,255 @@
+# Story design — faceless explainer video
+
+Use this reference in Step 3 to write `STORYBOARD.md` and `SCRIPT.md` for a faceless explainer — a topic, concept, how-to, listicle, or narrative explainer built from text, with **no product, no website, and no captured assets**.
+
+This file defines the story: what the video teaches, in what order, and why each frame exists. It does not define layout, visual effects, animation, or final markdown schemas. For exact file syntax, follow `../hyperframes-core/references/storyboard-format.md` and `../hyperframes-core/references/script-format.md`.
+
+## Read first
+
+Read these inputs before writing:
+
+1. `hyperframes.json` — locked brief: angle, length, aspect ratio, language.
+2. `frame.md` — tone, mood, design system, and register.
+3. `capture/extracted/visible-text.txt` — the article / notes / topic / brief (the source of **information**).
+4. `user_script.txt` and `VO_MODE`, when the user pasted a script.
+
+There is no `asset-descriptions.md` and no `capture/assets/` to inspect — this is faceless. Every visual is invented downstream (Steps 4-5); your job here is the **narrative**, not a visual asset list.
+
+## Output
+
+Create two files:
+
+- `STORYBOARD.md` — the teaching plan, one frame per beat.
+- `SCRIPT.md` — the locked narration, only for spoken frames.
+
+Every storyboard frame must include the required fields from the storyboard format reference, plus the narrative metadata below.
+
+## Core rule
+
+An article is an information dump. A video is a guided act of understanding.
+
+Do not follow paragraph order. Reorder, merge, omit, and compress the source text into a clear teaching sequence. Strip the asides; surface the spine. **The single most common failure is paraphrasing the article in order — do not do that.** The input text is the source of information, not a story template.
+
+## Step 3 method
+
+### 1. Extract the teaching truth
+
+From the brief and text, identify:
+
+- Audience — who the video is speaking to, and what they already (don't) know.
+- Gap or stakes — the confusion, question, or "why care" the explanation resolves.
+- Thesis — the one-line idea the viewer should walk away with.
+- Spine — the 3-6 ideas (mechanisms / steps / items / beats) that build to the thesis.
+- Evidence — the concrete numbers, examples, comparisons, or worked cases that ground it.
+- Landing — the takeaway or the call to think / try / act.
+
+Write the storyboard around the thesis, not around the article's sections.
+
+### 2. Match the register to `frame.md`
+
+Use `frame.md` as a soft guide — the visual system tunes the **voice**, not the structure:
+
+| `frame.md` signal              | Story effect                           |
+| ------------------------------ | -------------------------------------- |
+| warm, handmade, notes-like     | plain, considered, low-hype; humane    |
+| bold, poster-like, declarative | short punchy beats, confident claims   |
+| friendly, polished, modern     | approachable direct address, lighter   |
+| literary, technical-but-human  | thoughtful, precise; safe for code/dev |
+
+The teaching truth decides the arc. The visual system tunes the voice.
+
+### 3. Choose one explainer structure
+
+Pick **one** structure (or explicitly name a compound). Do not splice phases from different structures — each is a complete path through understanding.
+
+| Structure           | "It is…"                                         | Use when the payload is…                                    | Body shape                                                           |
+| ------------------- | ------------------------------------------------ | ----------------------------------------------------------- | -------------------------------------------------------------------- |
+| `concept-explainer` | "what is X, and why does it matter"              | one idea/term/phenomenon the audience half-knows            | name concept → reveal mechanism layer by layer → land implication    |
+| `how-to-process`    | "here is how to do / how X works," ordered steps | a procedure or mechanism with a clear start→finish          | a 3-6 step sequence on a consistent visual stage, one move each      |
+| `listicle`          | "N things about X"                               | a set of parallel, co-equal items (tips, mistakes, reasons) | hook → N roughly co-equal items → wrap; rule-of-three is strongest   |
+| `story-explainer`   | teach through a narrative arc                    | case studies, histories, cautionary tales                   | setup → tension → turn → resolution → lesson; the lesson generalizes |
+
+**Choosing:** one idea to understand → concept; an ordered procedure → how-to; parallel co-equal items → listicle; a concrete narrative/case → story.
+
+**Compounds** layer an outer arc with an inner rhythm — e.g. `concept-explainer with process` (ordered steps inside the mechanism phase), `story-explainer with how-to`. Set `arc` in the frontmatter to the chosen structure (or `<outer> with <inner>`). The downstream visual phase reads it for pacing: a process inner rhythm means tighter seams on a consistent stage and shorter frames.
+
+### 4. Build the frame sequence
+
+Each frame needs one clear job. Avoid frames that only say "more detail" or "another point."
+
+For every frame, define (use the storyboard format's fields, with these narrative additions in the frame's metadata + prose):
+
+- `type` — one of `hook | pain_point | product_intro | feature_showcase | benefit_highlight | social_proof | branding | cta`. This enum is shared with the downstream visual layer for pacing; **repurpose** it for teaching per the mapping below.
+- `persuasion` — a **named** rhetorical / clarity technique (see catalog), not "explain the idea."
+- `beat` — the target feeling (see vocabulary).
+- `scene` — a one-line visual idea, not detailed composition.
+- `voiceover` — spoken guide text, or empty for silent frames.
+- `transition_in` — a registry transition name (see Transitions).
+- `blueprint` _(optional candidate)_ — consult the role→blueprint menu in `../hyperframes-animation/blueprints-index.md`; when a proven shape fits this beat, tag its id (a tag, not a commitment — Step 4 confirms or overrides). Then **write the `voiceover` in the shape that blueprint implies**, so the line is reveal-ready before Step 4 ever runs. Teaching truth still decides which beats exist — never invent, drop, or bend a beat just to fit a shape; omit `blueprint` and write the line plainly when none fits.
+
+In the prose under each frame, state:
+
+- `narrativeRole` — the scene's **job** in the explanation (e.g. "Concretizes compound interest as a snowball," not "Shows a chart").
+- `keyMessage` — the one thing the viewer should understand after this frame (one sentence).
+
+### Type-enum repurposing (shared enum → explainer roles)
+
+The enum is shared with the downstream visual layer; map your explainer roles onto it so downstream pacing matches the frame's job:
+
+| Explainer role you want          | Use `type`          | Why this value                                                       |
+| -------------------------------- | ------------------- | -------------------------------------------------------------------- |
+| Hook / curiosity gap             | `hook`              | The high-leverage opening 3-5s.                                      |
+| Pain / problem / why-care        | `pain_point`        | The friction or gap the explanation resolves.                        |
+| Name the core concept            | `product_intro`     | "Introduce the protagonist" — here the protagonist is the **idea**.  |
+| Mechanism / step / item          | `feature_showcase`  | A unit of the body — one move of a process, one mechanism, one item. |
+| Implication / payoff / "so what" | `benefit_highlight` | The consequence or value of understanding.                           |
+| Evidence / example / data point  | `social_proof`      | A concrete grounding: a number, a worked example, a comparison.      |
+| Thesis / takeaway / principle    | `branding`          | The philosophical landing — the generalizable idea, the one line.    |
+| Call to think / try / act        | `cta`               | The closing ask — try it, watch for it, question it.                 |
+
+The body is usually a run of `feature_showcase` (steps/mechanisms/items), interleaved with `benefit_highlight` (implications) and `social_proof` (examples/data). At least one `feature_showcase` or `product_intro` should exist (every explainer has a body and a named idea).
+
+## Hook strategy
+
+Pick one opening strategy for the first 3-5 seconds. For explainers the hook opens a cognitive gap or stakes:
+
+| Strategy               | Use when                                           | Example                                                          |
+| ---------------------- | -------------------------------------------------- | ---------------------------------------------------------------- |
+| Shocking statistic     | A credible number quantifies the stakes.           | "90% of plastic ever made has never been recycled."              |
+| Rhetorical question    | Create an immediate cognitive gap.                 | "Why does time seem to speed up as you get older?"               |
+| Counterintuitive claim | The truth contradicts common belief.               | "Adding more lanes to a highway makes traffic worse."            |
+| Pain validation        | The audience already feels the confusion.          | "Everyone says 'just diversify' — nobody says what that means."  |
+| Visceral metaphor      | The idea is abstract and needs to become concrete. | "Your attention is a spotlight, and apps fight over the switch." |
+| Concept announcement   | The term itself is the subject; make it memorable. | "There's a word for this: the bystander effect."                 |
+| Direct address         | The audience is clearly defined.                   | "If you've ever rage-quit a recipe halfway — this is for you."   |
+| Imagine / scenario     | A thought experiment frames the whole piece.       | "Imagine money that loses value if you don't spend it."          |
+| Stakes / consequence   | The "why care now" is a real cost or risk.         | "Get this one step wrong and the whole batch is ruined."         |
+
+The hook must create curiosity, tension, or stakes. Do not open with a generic definition. Per `../hyperframes-creative/references/story-spine.md`: the hook speaks the viewer's language (the payoff of understanding, never the source text's section headings), and the thesis (`message`) lands by beat 2 — the explanation after that is its evidence.
+
+## Clarity / rhetoric technique catalog
+
+`persuasion` is a **named technique** — how this frame makes the idea land or clear — not a vague intent. Combine when several are active (e.g. "Analogy + progressive disclosure").
+
+| Family               | Techniques                                                                                                                                   |
+| -------------------- | -------------------------------------------------------------------------------------------------------------------------------------------- |
+| **Make-concrete**    | Analogy / metaphor · Concretization (abstract → tangible object) · Worked example with real numbers · Anchoring on a familiar referent       |
+| **Reveal-in-order**  | Progressive disclosure (one term/layer at a time) · Build-up (simple → general case) · Signposting ("first… then… finally")                  |
+| **Contrast**         | Before/after · Common-belief vs reality · Comparison of two options · Counterexample (here is when it breaks)                                |
+| **Structure**        | Rule of three · Numbered enumeration · Question→answer pairing · Frame-then-fill (state the shape, then populate it)                         |
+| **Evidence**         | Statistical proof · Citation / source · Demonstration (show the mechanism running) · Causal chain (A → B → C)                                |
+| **Memory & landing** | Callback (return to the hook's image) · Distillation (compress to one line) · Coined term / mnemonic · Generalization (specific → principle) |
+
+When no catalog technique fits, name a new one inline and explain its mechanism (e.g. "Subtractive framing: define the concept by what it is _not_ first"). Never write generic "explain the idea."
+
+## Emotional beats
+
+`beat` is one word or a short compound phrase (e.g. "Curiosity and clarity"). Avoid generic "positive" / "interested." Explainers ride a comprehension arc:
+
+- **Negative valley** — _open the gap_ (hook / pain_point): curiosity · puzzlement · surprise · tension · concern · skepticism · recognition · intrigue
+- **Pivot** — _orient_ (product_intro / concept-naming): clarity · orientation · anticipation · focus
+- **Build** — _build understanding_ (feature_showcase / benefit_highlight / social_proof): comprehension · "aha" · confidence · fascination · foresight · momentum · conviction · delight · unease (for a caveat) · mastery
+- **Resolution** — _land_ (branding / cta / final): clarity · satisfaction · resolve · inspiration · inevitability · "now I get it"
+
+Compound beats are often strongest, e.g. "Surprise + recognition", "Comprehension + delight."
+
+## The body is a sequence, not a single frame
+
+An explainer's core is almost always **3-6 body frames on a consistent visual stage**, each advancing one mechanism / step / item / layer, building understanding cumulatively. A single isolated body frame rarely teaches anything.
+
+- **concept-explainer:** name the concept (`product_intro`) → reveal the mechanism layer by layer (a run of `feature_showcase`, interleaving `benefit_highlight` for "so what" and `social_proof` for a grounding example).
+- **how-to-process:** `feature_showcase` per step, ordered, on one stage. Carry the object being acted on across adjacent steps (see Continuity).
+- **listicle:** `feature_showcase` per item; items are parallel, so default to `cut` / `push-slide` between them.
+- **story-explainer:** frames follow the beats (setup / tension / turn / resolution / lesson); types map per the table (`pain_point` for tension, `branding` for the lesson).
+
+## Continuity across frames (no worker grouping)
+
+This framework builds **one frame per worker** — there is no "continue run" that hands several frames to one worker. A sequence of frames reads as one continuous shot through two storyboard-level levers, both yours:
+
+1. **A consistent stage** — consecutive body frames share the same composition idea (same diagram growing, same number line, same desk), stated in each frame's `scene` so Step 4 and the workers keep the stage stable.
+2. **A consistent transition** — pick one seam type for a sequence (usually `push-slide <DIR>` for ordered steps, `crossfade` for a soft layer reveal) and repeat it across the run, so the frames feel like one flow rather than separate slides.
+
+When a single element genuinely _transforms_ between two ideas (a diagram node becomes a chart bar, a formula becomes its result), keep it within **one frame** as a development beat (entrance → the transform → settle) rather than splitting it across a seam — the worker owns that motion. Note the intent in the frame's `scene` / narrative; Step 4 turns it into a time-coded shot sequence (instantiating the candidate `blueprint`).
+
+## Transitions
+
+Use only registry transition names in `transition_in`:
+
+`cut | crossfade | blur-crossfade | push-slide LEFT | push-slide RIGHT | push-slide UP | push-slide DOWN | zoom-through | squeeze`
+
+Pick 2-3 transition types for the whole video and repeat them. Frame 1 uses `cut` as a placeholder (there is no previous frame). Match the seam to the narrative: ordered steps → a consistent `push-slide`; a soft layer reveal or atmosphere shift → `crossfade` / `blur-crossfade`; zooming into a detail or pulling back → `zoom-through`; a clean topic switch or new list item → `cut`.
+
+## Faceless visuals — no asset inventory
+
+Every visual is invented downstream from each frame's `narrativeRole` / `keyMessage` / `scene` — typography, abstract graphics, diagrams, data-viz are all first-class. Therefore:
+
+- Do **not** write an `asset_candidates` line describing intended diagrams or typography as if they were files. Visual intent belongs in `scene` + `narrativeRole`; the visual phase reads those.
+- The **only** real asset is a user-supplied image already placed at `public/<basename>`. Then add one line `asset_candidates: public/<basename> — <≤25 words: what it is>`. Never invent paths or reference `capture/`.
+
+## Script rules
+
+### If there is no pasted script
+
+Write tight per-frame narration:
+
+- 1-2 sentences per spoken frame; usually 6-20 words.
+- Concrete and human; teach, don't read the article aloud.
+- **Write each line as discrete cues, not one run-on breath.** Step 5 reveals each on-screen piece _when the voiceover names it_ (the anti-PowerPoint mechanism). A line with clear phrase boundaries — "First the snowball — then the hill — then the speed" — hands the shot its reveal cadence for free; a single long clause leaves the frame nothing to pace to.
+- **Strong** (concretization): "Compound interest isn't addition, it's a snowball — every turn picks up the snow from the last, then more."
+- **Weak** (article-paraphrase): "The study, published in 2019, examined three cohorts and found that…" — that is reading, not explaining.
+
+Avoid: "Unlock the power of…", "Seamless experience", long noun-phrase lists, a frame that is only a filler bridge ("Or…").
+
+**Silent frames are allowed and common in explainers** — a diagram assembling itself, a worked example animating, a beat of held tension before a turn. Set `voiceover` empty and leave the frame out of `SCRIPT.md`; then `narrativeRole` + `persuasion` must carry what the script doesn't say.
+
+### If `VO_MODE = restructure`
+
+Treat `user_script.txt` as source material. Rewrite, reorder, merge, or omit to fit the chosen structure and target length.
+
+### If `VO_MODE = verbatim`
+
+Do not rewrite the user's words. Segment the script into frame-sized chunks at sentence or paragraph boundaries (you may split a long sentence at a natural clause boundary, but do not change words). Final duration follows the provided script.
+
+## Music & silence
+
+The storyboard's top YAML block carries a `music:` field — the BGM mood the audio step retrieves against (e.g. `music: confident minimal tech underscore`). Omitting it falls back to `message:` → `arc:` → a neutral default, so BGM plays unless turned off explicitly.
+
+- **`music: none`** — BGM off (narration, if any, still runs).
+- **`music: none` + no `SCRIPT.md`** — the canonical **fully-silent marker**: no narration, no BGM, no SFX. `audio.mjs` generates nothing and the audio step is a clean skip. Use exactly this spelling when the user asks for a silent / music-free video.
+
+## Frame template
+
+Use the exact fields required by the core storyboard format. This is the narrative shape each frame should satisfy:
+
+```md
+## Frame N — Short name
+
+- scene: one clear visual idea
+- voiceover: "spoken guide text, or empty"
+- duration: rough estimate in seconds
+- transition_in: crossfade
+- status: outline
+- src: compositions/frames/NN-short-name.html
+- type: feature_showcase
+- persuasion: Progressive disclosure
+- beat: comprehension
+- blueprint: messaging-multi-phase — candidate shape from the role→blueprint menu; omit when none fits
+
+narrativeRole: What this frame does in the viewer's understanding.
+keyMessage: The one idea the viewer should remember.
+```
+
+## Final checklist
+
+Before asking for user approval, verify:
+
+- One explainer structure is named (compound only when explicitly named); the sequence is narrative-driven, not paragraph-order-driven.
+- The opening uses a named hook strategy.
+- Each frame has one job; the body builds cumulatively (a run of `feature_showcase` / `benefit_highlight` / `product_intro`), not a single isolated body frame.
+- Every frame has `type`, `persuasion` (a named technique from the catalog), and `beat` (specific, not generic).
+- Each `voiceover` is phrase-segmented into cues (each a piece Step 5 can reveal on), not one run-on clause; a candidate `blueprint:` is tagged wherever a proven shape fits, and omitted where none does.
+- The emotional arc has meaningful variation matching the structure.
+- Transitions use only registry names and repeat 2-3 types; frame 1 is `cut`.
+- A consistent stage + consistent transition carry any multi-frame sequence; a genuine element transform stays inside one frame.
+- `asset_candidates` is absent (faceless) except a real user-supplied `public/<basename>`.
+- `SCRIPT.md` contains only locked spoken narration; silent frames are intentional and omitted from it.
diff --git a/.claude/skills-media/faceless-explainer/references/visual-design.md b/.claude/skills-media/faceless-explainer/references/visual-design.md
new file mode 100644
index 000000000..9c65b2082
--- /dev/null
+++ b/.claude/skills-media/faceless-explainer/references/visual-design.md
@@ -0,0 +1,146 @@
+# Visual design — faceless-explainer per-frame shot method
+
+> The method behind **Step 4 (Frame visual design)**. You (the orchestrator) read it to **enrich `STORYBOARD.md` frames in place** — story-design wrote the skeleton (each frame's `scene`, `voiceover`, `transition_in`, the narrative fields, and optionally a candidate blueprint id); you add how each frame **looks and moves**. The unit you write per frame is a **time-coded shot sequence** — a shot directed across its whole duration, not a static slide. You write **no HTML** (that's the frame workers). Because the explainer is **faceless, every visual is invented** — typography, abstract graphics, diagrams, data-viz — so you **design** the visual elements rather than select captured assets (there is no `capture/` to read). `frame.md` is your palette/type truth by role. Layout is a compact vocabulary in this file (the **Layout** section below), stated inline per Scene; motion vocabulary + the motion doctrine + the seek-safe core → `motion-language.md`; the proven shapes → `../hyperframes-animation/blueprints-index.md` + `blueprints/<id>.md`; concrete rules resolve in Step 5 from this skill's local `../hyperframes-animation/rules/`. Adding palette theory or a generic font rule here? Wrong home — `frame.md` + `hyperframes-creative`.
+
+## The unit is a time-coded shot sequence
+
+A frame's visual layer is **a sequence of time windows paced to the voiceover**, not a bag of effect tags. The failure that reads as PowerPoint is **front-loading**: the agent rushes the whole canvas on screen in the first ~25%, and then it just sits. A time-coded shot sequence written **against the VO** makes that impossible: each window states what is on screen and what is moving, and **nothing appears before the voiceover reaches it.** In an explainer the development _is_ the teaching — the formula assembling term by term, the diagram gaining a layer, the count-up landing the statistic. Let the build _be_ the message.
+
+Write each frame as a handful of windows cued by the spoken line:
+
+```
+Scene 1 (0.0–Xs):  only what the VO is saying at t=0 enters — never the whole canvas
+Scene 2 (Xs–Ys):   the next piece reveals as the VO names it (a line / layer / node / stat)
+  …                one window per spoken cue — as many or as few as the line calls for
+Scene N (…–end):   content has resolved; hold the read (stillness; subtle jitter at most)
+```
+
+- Each `Scene` line names **what's on screen**, **what moves in this window**, and **where it sits** (layout, inline). Times are real seconds across the frame's `duration`.
+- **Pace reveals to the voiceover; never front-load.** This is the core anti-PowerPoint mechanism (→ `motion-language.md` Part 2 Rule 2). At t=0 show only what the VO is saying then; reveal each further piece — a line, a layer, even an h1 — **when the VO names it**, spreading reveals across the shot and especially the **back ~50%**. **The window count = the number of spoken cues the line calls for** — a two-beat line is two windows, a five-item enumeration is five or six. There is **no fixed count and no mandatory "middle" act**; the only sin is dumping everything up front. (A **silent** frame — a diagram assembling itself, a worked example animating — paces its reveals to the beat instead of the VO; same discipline, no spoken cue.)
+- **End on a held read.** Once the content has resolved it holds and reads — **prefer stillness to bad motion**: no forced camera drift, no lazy breathing, no back-half pan/push; at most a subtle jitter keeps it alive (→ `motion-language.md`). On a short shot the final reveal and the hold are the **same window** — the hold is not a separate mandatory act. Only the final frame has a real exit; every other frame's exit is the harness transition (story's `transition_in`).
+- A **deliberately held** frame — content already revealed, now reading still — is legitimate and often right (a climax, a breather, a beat of held tension before a turn). The failure is never "too still"; it is **front-loaded-then-frozen** (everything dumped by ~25%, nothing cued to the VO). Place held beats deliberately for rhythm so the video isn't uniformly busy (allocate them in `## Video direction`). Reveal pacing + holds + the idle budget → `motion-language.md`.
+
+## Pick the shape — instantiate a blueprint
+
+Don't invent each shot from scratch. The frame's **role** (its `type` / `beat`) points to a proven shape:
+
+1. **Match the role to a blueprint.** Open `../hyperframes-animation/blueprints-index.md`, find the frame's role in the **role→blueprint menu**, and pick the blueprint whose intent fits this beat (story may already have named a candidate id — confirm or override it). Read that `blueprints/<id>.md`: it is a short, domain-agnostic, **time-coded shot template with `[slots]`** and a named **signature move** (the thing that makes the shape itself — the SVG ring, the push-THROUGH, the in-place token swap).
+
+2. **Instantiate its `[slots]` with THIS frame's invented content** — three postures:
+   - **Reproduce** — the blueprint fits the beat and your content maps onto its slots cleanly. Fill every `[slot]` with this frame's word / shape / stat and follow its Scene timing. Write the resulting Scene lines.
+   - **Adapt** — the _structure_ fits but the content / element-count / surface doesn't (or you want a fresher surface to avoid templating). State **what you keep / what you change** in one line, then write the adapted Scene lines. You may extend or vary; you may **never** drop the **signature move** (drop it and you picked the wrong blueprint), and you keep the reveals **paced to the VO** — never collapse the shape to a single front-loaded dump.
+   - **Compose** — no blueprint fits the beat. Build the shot from the **motion vocabulary** in `motion-language.md`: still pace the reveals to the VO across the shot, never fire everything at t=0. Mark it `blueprint: compose`.
+
+3. **Keep the signature move.** Whichever posture, the blueprint's signature move (named in its file) is the spine of the shot — it usually lands on the shot's key reveal. Carry it through.
+
+The blueprint's own Scene lines, motion vocabulary, and `rule mapping` are your raw material; you are choosing a shape and casting this frame's invented content into it, not copying an engineering spec.
+
+## What you add to each frame
+
+Story-design's `## Frame N` block already carries the narrative. You append the shot. Story's `scene` / `voiceover` / `transition_in` / role fields stay untouched.
+
+```
+## Frame 3 — How interest compounds
+- scene: a snowball rolls downhill, gaining a labeled ring each turn   ← refine only if it could read sharper
+- voiceover: "…"            ← story's; leave it
+- transition_in: crossfade  ← story's; leave it
+- type: feature_showcase    ← story's
+- persuasion: Concretization + progressive disclosure
+- beat: comprehension
+- blueprint: dataviz-countup (Adapt)   ← you add: the id you instantiated (or "compose")
+- focal: the snowball                  ← you add: the INVENTED hero element of this beat
+- roles: snowball = foreground subject · hill = background gradient (dim ~40%) · ring labels = supporting   ← you add: role per invented element
+- sfx: whoosh-soft, tick               ← you add: the sound the beat wants (fetched + mounted at root; never yours to embed)
+
+Adapt: keep the count-up-ring signature; the trend chart becomes the snowball's labeled rings climbing.
+Scene 1 (0.0–1.2s): solid hill gradient (dim ~40%); the snowball seats upper-left, a circular progress ring + bold center number anchor it — Centered template, ~50% of frame. Slow push-in runs underneath.
+Scene 2 (1.2–3.4s): as the VO names each turn, the snowball rolls down and gains one labeled ring per turn (layer-reveal); a small total ticks up beside it (the count-up reveals on its spoken cue, not at t=0). Asymmetric 60/40, 3 depth layers.
+Scene 3 (3.4–5.0s): land the final ring emphasis dead-center, accent glow blooms behind it and holds; the total reads clean and STILL — no continuing push, no breathing (a held beat beats bad motion). The stillness reads against the prior motion.
+```
+
+The lightweight tags:
+
+- **`blueprint:`** — the id you instantiated (with `(Reproduce)` / `(Adapt)`), or `compose`. One id per frame.
+- **`focal:`** — which **invented** element is the hero of this beat (a hero word, a diagram node, a chart series, a coined-term card).
+- **`roles:`** — each invented element's role: `foreground subject` (the thing the eye lands on, text laid around it) · `background` (full-bleed field / gradient / grid, dim 30–50%) · `supporting` (labels, secondary shapes, ambient layers). Since there are no captured assets, you are **designing** these elements, not selecting them — keep them **few and load-bearing**. A user-supplied `public/<basename>` image, if any (named in story's `asset_candidates`), is treated as the `focal` cutout or a `background`.
+- **`sfx:`** — name the sound the beat wants (an impact for a slam, a whoosh for a push, a tick for a count). The audio script's `fetch-sfx` pass retrieves it and the assembler mounts it at the root — you only **name** it, never embed an `<audio>` element.
+
+**Layout is stated INLINE in each Scene line** — name the template, density, depth, and hierarchy as part of "where it sits" (`Centered, ~50% of frame`, `asymmetric 60/40, 3 depth layers`), drawing on the **Layout** vocabulary below; never write px / scale / shadow recipes (the worker writes those).
+
+**Motion is named INLINE in each Scene line** — name the move from `motion-language.md`'s vocabulary (`per-word reveal`, `layer-reveal`, `count-up`, `glow blooms`) and let it settle on a long-tail curve (`power3` default — smooth beats bouncy; see `motion-language.md`). Never write ease curves / ms / stagger (those resolve in Step 5 from this skill's local `../hyperframes-animation/rules/`).
+
+## Inventing the visual — diagrams, type, data-viz
+
+This is a **faceless** explainer: the frame's hero is something you **design**, not a screenshot. Three first-class treatments, each invented from the frame's `narrativeRole` / `keyMessage` / `scene`:
+
+- **Typographic / kinetic type** — the hero word, the coined term, a number, a short enumeration. Treat type as the subject: full-bleed scale, weight contrast, one emphasized term. Strongest for hooks, concept names, takeaways. In a faceless explainer **type is often the primary visual** — lean on the type ramp hard.
+- **Abstract graphics** — shapes, fields, paths, geometry that _embody_ the idea (the snowball, the spotlight, the staircase-not-cliff). Build the metaphor the script names; don't decorate with generic bokeh.
+- **Diagram / data-viz** — nodes + edges, a chart, a number line, a formula, a process flow. The build (each part appearing on beat) is the teaching — design it to assemble across the Scenes, not appear whole.
+
+Make the invented hero **fill 40–60% of the frame** — a diagram big enough to read its labels, a hero word near full-bleed. Don't shrink the one designed element into decoration around empty space.
+
+## Layout — named inline per Scene
+
+State each Scene's layout as part of "where it sits." **If the blueprint already implies a composition** (a ring around a center, stations on a wide canvas, two cards from opposite wings), that wins — describe it directly; the vocabulary below is for **composing freely** or a generic beat, not a menu you must pick from. Never write px / scale / shadow (the worker does). One frame's layout can EVOLVE across its Scenes (Scene 1 centered hero → Scene 2 rearranges to a grid). Use **≥3 different framings per video** so it doesn't read as one repeated template; never the same framing twice in a row.
+
+- **Framing vocabulary** — centered (hero / climax) · rule-of-thirds · split-screen (comparison) · layered-depth (immersive opening / atmosphere) · asymmetric 60/40 or 70/30 (editorial — a dense diagram + a caption rail) · triptych (three items / the rule-of-three landing) · full-width strip (a number line / timeline / enumeration). Vary the framing across the video so it doesn't read as one repeated template — let the beat decide, not a quota.
+- **Density** — primary visual ≥ 40% of canvas; ≥ 3 depth layers (background + midground + foreground); never a lone small cluster floating in empty space. Openings and closings are prone to emptiness — add environmental layers (dual-radial swell, low-opacity scanlines, a hairline grid, brand-color ambient). Squint test: after blur you can still pick out the #1 element.
+- **Hierarchy** — combine ≥ 2 of size (3:1) / weight (800 vs 400) / contrast / position (upper-third is golden) / motion, so one element clearly dominates. A title that is only _larger_ (sharing weight/color/spacing with body) reads weak.
+- **Depth** — layer 2–3 of: size, blur, opacity gradient, overlap, shadow-stack, counter-scale on a push.
+- **Don't show**: nav bars, footers, scrollbars, real cursors / browser chrome, generic decorative shapes standing in for a designed metaphor, floating bokeh / purple-blue "AI" gradients (the default-AI cliché, banned). A faceless explainer has no real interface — an interface mock is correct **only** when the topic itself is about that interface and the frame intentionally reconstructs it.
+
+## Portrait & square (non-16:9 canvases)
+
+The zones, density, hierarchy, and depth principles all still apply; the **aspect ratio** changes, and a wide-frame layout does not transplant into a tall one — design for the storyboard's `format` from the start, never plan landscape and "crop."
+
+- **Stack vertically, not side-by-side** — split-screen / triptych / 60-40 become top/bottom stacks, vertical step lists, stacked bands. Square tolerates side-by-side only for two compact items.
+- **Vertical center moves with the canvas** — anchor a centered hero around **y ≈ 0.42 × height** (portrait ≈806, square ≈454), not a fixed 540.
+- **Type runs larger, fewer words per line** — narrow frames wrap long headlines badly; prefer short kinetic lines, bigger type, more vertical rhythm.
+- **Travels well to portrait:** Centered, Layered Depth, Full-Width Strip (stacked band), vertical Rule-of-Thirds. **Avoid** wide Split Screen and Triptych — use stacked equivalents.
+
+## `## Video direction` — write the invariants ONCE
+
+The whole video shares one look and one motion grammar. Write a **`## Video direction`** block ONCE at the top of `STORYBOARD.md` so every frame inherits it and per-frame Scene lines carry only the **delta**. This block is load-bearing — it is what binds many independent shots into one film. **Keep it.**
+
+- **palette system** — from `frame.md`: which roles map to which hues. Never invent.
+- **motion grammar + reveal model** — long-tail eases (`power3` default, smooth over bouncy) + the **VO-paced reveal** model every frame follows (reveal each piece on its spoken cue; never front-load) + what may stay alive during a hold (subtle jitter at most; no lazy breathing) (→ `motion-language.md`).
+- **rhythm / held-frame allocation** — name the **held / breather frames** (often before a climax or the turn in a story) so the video varies its energy: most frames reveal to the VO, a few hold still (a held read beats bad motion; the anti-monotony discipline; → `motion-language.md`).
+- **negative list** — what never appears: off-brand textures / effects the pack forbids, **plus both motion failure modes** — slideshow (front-load then freeze) and screensaver (everything floating independently) (→ `motion-language.md`).
+
+Do **not** repeat these per frame — restating video-level rules in every frame is exactly the bloat this layer prevents.
+
+## Palette & type — from `frame.md`, never invented
+
+- **Palette** — `frame.md` (the adopted pack) is the color truth; apply its roles per frame. Generic basics (one accent, tint neutrals, avoid pure `#000`/`#fff`) → `hyperframes-creative/references/house-style.md`.
+- **Type** — fonts resolve via `frame.md`'s type tokens; reference them **by role** (display / body / mono / the pack's ramp), never by raw family or px. Generic typography craft (embedded fonts, dark-bg optical compensation, `tabular-nums`) → `hyperframes-creative/references/typography.md`. In a faceless explainer type is often the primary visual — the hero word, the coined term, the kinetic enumeration — so lean on the type ramp hard.
+
+## Caption-band keep-out (plan side)
+
+The bottom ~17% of the canvas is reserved for the caption pill. Plan every frame's content into the **top ~83%** so nothing important lands in the band (the worker enforces the pixel cutoff; you plan the layout). When captions are enabled, primary content and key visuals **cap at the band top**, and a centered hero anchors at **y ≈ 0.42 × height** (landscape ≈454, portrait ≈806), not the canvas midpoint; background / ambient / surface layers are exempt and may stay full-bleed. Holds even when captions are disabled — bottom-edge consistency.
+
+## Where the detail lives
+
+| For…                                                                            | Read                                                                                         |
+| ------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------- |
+| the proven shapes + role→blueprint menu + how to pick                           | `../hyperframes-animation/blueprints-index.md` → `blueprints/<id>.md`                        |
+| motion — shot model, vocabulary, holds, idle budget, stillness, seek-safe       | `motion-language.md` (local)                                                                 |
+| layout — framing, density, depth, hierarchy, inventing the visual, caption band | the **Layout** + **Inventing the visual** sections in this file                              |
+| concrete eases / ms / stagger + rule recipe bodies (Step 5)                     | local `../hyperframes-animation/rules/` (the frame worker reads it; you don't)               |
+| palette + type tokens                                                           | the project's `frame.md`; basics → `hyperframes-creative` `house-style.md` / `typography.md` |
+| "produced, not generated" foreground density                                    | `hyperframes-creative/references/video-composition.md`                                       |
+| within-frame cuts / seams (zoom-through · cut-the-curve · waterfall)            | `cut-catalog.md` (the worker builds them inside the composition)                             |
+| transitions                                                                     | story-design owns `transition_in`; you don't touch it                                        |
+
+## Before you finish — checklist
+
+- **`## Video direction`** written once at the top (palette · motion grammar + shot model + idle budget · stillness allocation · negative list incl. both failure modes); per-frame entries are deltas, not restatements.
+- Every frame is a **time-coded shot sequence** with real second windows across its `duration` — not a tag bag.
+- **No frame front-loads** — at t=0 only what the VO is saying enters; each further piece reveals on its spoken cue, across the back ~50%. Window count follows the VO (or the beat, on a silent frame), not a fixed number.
+- Every frame names a **`blueprint:`** id (Reproduce / Adapt) or `compose`; an Adapt states keep/change and **keeps the signature move**; nothing collapses to a single front-loaded dump — reveals stay paced to the VO.
+- **Held frames are deliberate** — allocated in Video direction for rhythm; a held read is fine (prefer stillness to bad motion), but no frame may be front-loaded-then-frozen.
+- Each frame names its **invented** `focal` + per-element `roles` (foreground / background / supporting), kept few and load-bearing.
+- The invented hero fills 40–60% of the frame (a diagram big enough to read, a hero word near full-bleed) — not shrunk into decoration around empty space.
+- Layout named **inline** per Scene (template / density / depth / hierarchy — the **Layout** vocabulary here); motion named **inline** per Scene from the vocabulary (`motion-language.md`). No px / ease curves / ms / JS.
+- Content planned into the top ~83% (caption band clear).
+- Palette / type pulled from `frame.md` by role — nothing invented.
+- You wrote no HTML; every visual is invented (no captured assets).
diff --git a/.claude/skills-media/faceless-explainer/scripts/assemble-index.mjs b/.claude/skills-media/faceless-explainer/scripts/assemble-index.mjs
new file mode 100644
index 000000000..1bdfca1d1
--- /dev/null
+++ b/.claude/skills-media/faceless-explainer/scripts/assemble-index.mjs
@@ -0,0 +1,573 @@
+#!/usr/bin/env node
+// assemble-index.mjs — deterministic top-level index.html assembly for a
+// HyperFrames project. No subagent, no judgment: turns STORYBOARD.md + the
+// built frame files (+ optional audio_meta.json) into the standalone index.html
+// the renderer consumes, and stages the frame-named capture assets into assets/.
+//
+// index.html is a *standalone* composition (root <div id="root"> directly in
+// <body>, no <template> wrapper — template is for sub-comps). Structure is
+// modeled on the canonical fixture packages/studio/fixtures/storyboard-sample/
+// index.html and the authoritative head/audio template in
+// packages/core/docs/quickstart-template.html. Frame mount order = STORYBOARD
+// document order. Transitions are NOT written here — the transitions injector
+// mutates this file afterward (data-start/duration/track-index + GSAP).
+//
+// Track lanes (same-track time-overlap is illegal — lint timeline_track_too_dense):
+//   1      frame sub-comp clips (sequential; the injector 0/1-ping-pongs for overlaps)
+//   2      captions sub-comp clip (full-duration overlay, on top of frames)
+//   10     per-frame voice <audio>
+//   11     BGM <audio>
+//   20+i   SFX <audio> (one lane each)
+//
+// audio_meta.json contract (produced by audio.mjs; OPTIONAL — absent ⇒ silent
+// video, frames only). Durations come from STORYBOARD (audio sync-durations
+// writes them), NOT from here; this file carries only media PATHS, keyed by
+// frame number:
+//   { "bgm":   { "path": "assets/bgm/x.mp3", "volume": 0.12 } | null,
+//     "voices":[ { "frame": 3, "path": "assets/voice/03.wav" } ],
+//     "sfx":   [ { "frame": 3, "file": "assets/sfx/x.mp3", "offset_s": 0,
+//                  "duration_s": 1.0, "volume": 0.35 } ] }
+//
+// Reads:  --storyboard STORYBOARD.md, --hyperframes <project root>,
+//         [--audio-meta audio_meta.json]. On disk: each built frame's src html,
+//         capture/{assets,assets/videos,screenshots}/<basename> for staging, compositions/captions.html.
+// Writes: <project>/index.html  +  stages assets/<basename>  +  (guard ① below)
+//         repairs a frame file in place when its root is missing data-width/height.
+//
+// Pre-assembly frame guards (run in the same pass that reads each frame, so common
+// `lint` failures surface HERE instead of after assembly + a wasted render):
+//   ① AUTO-REPAIR — a sub-comp root missing data-width/data-height: inject the canvas
+//      dims (the renderer needs them on the cloned root; else lint root_missing_dimensions).
+//   ② HARD FAIL  — <video>/<audio> inside a sub-comp: the runtime only drives media that
+//      is a DIRECT child of the host root, so sub-comp media renders blank/black.
+//   ③ HARD FAIL  — a timed element (data-start+duration+track-index) that is not the root
+//      and lacks class="clip" (shows the whole frame), or two same-track clips that overlap.
+//
+// Exit 0 = index.html written + summary. Exit 1 = fatal contract break (no
+// frames, a built/animated frame missing its src/file, a frame with no
+// duration, an inner data-composition-id mismatch, or a guard ②/③ violation).
+// No backstop: fix upstream.
+
+import { existsSync, readFileSync, writeFileSync } from "node:fs";
+import { spawnSync } from "node:child_process";
+import { basename, join, resolve } from "node:path";
+import { parseStoryboard } from "./lib/storyboard.mjs";
+import { parseFormat } from "./lib/dimensions.mjs";
+import { stageAssets } from "./lib/assets.mjs";
+import { parseColors, semanticColors } from "./lib/tokens.mjs";
+import { bgmDefaultVolume } from "../../media-use/audio/scripts/lib/bgm.mjs";
+
+// ---------- argv ----------
+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(`✗ assemble-index.mjs: ${msg}`);
+  process.exit(1);
+}
+
+// Ensure the BGM track is at least `total` seconds long. HeyGen (and most music
+// libraries) return a short loopable clip (~15–30s); mounting it at data-duration=total
+// would leave the video's TAIL SILENT. If the file is short, loop-extend it to `total`
+// (with a 0.4s fade-in + 1.5s fade-out) into a sibling *.loop.mp3 and return that path.
+// Needs ffprobe+ffmpeg (present in the render env); degrades to the original + a warning
+// when they're absent, so assembly never hard-fails on audio tooling.
+function ensureBgmCovers(relPath, hyperframesDir, total) {
+  const abs = join(hyperframesDir, relPath);
+  const probe = spawnSync(
+    "ffprobe",
+    ["-v", "error", "-show_entries", "format=duration", "-of", "csv=p=0", abs],
+    { encoding: "utf8" },
+  );
+  if (probe.status !== 0) return { looped: false, short: false, reason: "ffprobe unavailable" };
+  const dur = parseFloat(String(probe.stdout || "").trim());
+  if (!Number.isFinite(dur) || dur <= 0)
+    return { looped: false, short: false, reason: "unreadable duration" };
+  if (dur >= total - 0.1) return { looped: false, short: false, dur }; // already covers
+  const relOut = relPath.replace(/\.([^./]+)$/, ".loop.$1");
+  const absOut = join(hyperframesDir, relOut);
+  const fadeOut = Math.max(0, total - 1.5);
+  const ff = spawnSync(
+    "ffmpeg",
+    [
+      "-y",
+      "-stream_loop",
+      "-1",
+      "-i",
+      abs,
+      "-t",
+      String(total),
+      "-af",
+      `afade=t=in:st=0:d=0.4,afade=t=out:st=${fadeOut}:d=1.5`,
+      "-c:a",
+      "libmp3lame",
+      "-q:a",
+      "2",
+      absOut,
+    ],
+    { encoding: "utf8" },
+  );
+  if (ff.status !== 0 || !existsSync(absOut))
+    return { looped: false, short: true, dur, reason: "ffmpeg unavailable" };
+  return { looped: true, rel: relOut, from: dur };
+}
+
+const hyperframesDir = resolve(flag("hyperframes", "."));
+const storyboardPath = resolve(flag("storyboard", join(hyperframesDir, "STORYBOARD.md")));
+const audioMetaPath = resolve(flag("audio-meta", join(hyperframesDir, "audio_meta.json")));
+const outPath = resolve(flag("out", join(hyperframesDir, "index.html")));
+
+const r3 = (x) => Math.round(x * 1000) / 1000;
+const anomalies = [];
+const frameErrors = []; // fatal per-frame composition violations (guards ②/③) — reported together
+const repairs = []; // auto-repairs applied to frame files in place (guard ①)
+
+// ---------- parse storyboard ----------
+if (!existsSync(storyboardPath)) die(`STORYBOARD.md not found at ${storyboardPath}`);
+const manifest = parseStoryboard(readFileSync(storyboardPath, "utf8"));
+const { width: WIDTH, height: HEIGHT } = parseFormat(manifest.globals.format);
+
+// ---------- per-frame composition guards (see header ①②③) ----------
+// String-level checks on each frame's HTML — no DOM parse, deterministic, run in
+// the same pass that already reads the file. OPEN_TAG matches one opening tag while
+// tolerating quoted attribute values that contain ">" (e.g. inline styles).
+const OPEN_TAG = "<([a-zA-Z][a-zA-Z0-9-]*)((?:[^>\"']|\"[^\"]*\"|'[^']*')*)>";
+const attrPresent = (attrs, name) => new RegExp(`(?:^|\\s)${name}(?:[\\s=]|$)`).test(attrs);
+const attrValue = (attrs, name) => {
+  const m = attrs.match(new RegExp(`(?:^|\\s)${name}\\s*=\\s*(?:"([^"]*)"|'([^']*)')`));
+  return m ? (m[1] ?? m[2]) : null;
+};
+// The root (or a nested-comp mount) legitimately carries timing without class="clip".
+const isRootish = (attrs) =>
+  /(?:^|\s)id\s*=\s*["']root["']/.test(attrs) ||
+  attrPresent(attrs, "data-composition-id") ||
+  attrPresent(attrs, "data-composition-src");
+
+// Locate the composition root opening tag: prefer id="root", else the first element
+// carrying data-composition-id. Returns { start, end, full, attrs } or null.
+function findRootTag(html) {
+  const re = new RegExp(OPEN_TAG, "g");
+  let m;
+  let firstCompId = null;
+  while ((m = re.exec(html))) {
+    const attrs = m[2];
+    if (/(?:^|\s)id\s*=\s*["']root["']/.test(attrs))
+      return { start: m.index, end: m.index + m[0].length, full: m[0], attrs };
+    if (attrPresent(attrs, "data-composition-id") && !firstCompId)
+      firstCompId = { start: m.index, end: m.index + m[0].length, full: m[0], attrs };
+  }
+  return firstCompId;
+}
+
+// Returns { errors: string[], repairedHtml: string|null, repairNote: string|null }.
+function guardFrame(html, label) {
+  const errors = [];
+  // Scan a copy with comments + <script>/<style> bodies blanked, so a tag-like string
+  // in a comment (e.g. "<!-- match the host <video> coords -->") or in GSAP code can't
+  // trip ②/③. ① still splices into the ORIGINAL html, so its offsets stay correct.
+  const scan = html
+    .replace(/<!--[\s\S]*?-->/g, " ")
+    .replace(/<script\b[\s\S]*?<\/script[^>]*>/gi, " ")
+    .replace(/<style\b[\s\S]*?<\/style[^>]*>/gi, " ");
+
+  // ② media inside a sub-comp — never driven by the runtime (renders blank/black).
+  const media = scan.match(/<(video|audio)(?=[\s/>])/i);
+  if (media) {
+    errors.push(
+      `${label}: has a <${media[1].toLowerCase()}> inside the sub-composition. The runtime only drives media that is a DIRECT child of the host root (index.html) — sub-comp media renders blank/black. Move the clip to index.html as a root-level <video>/<audio> and drive any per-scene motion on the main timeline (composition-patterns.md archetype B).`,
+    );
+  }
+
+  // ③ timed-element checks: missing class="clip", and same-track window overlap.
+  const re = new RegExp(OPEN_TAG, "g");
+  const clips = [];
+  let m;
+  while ((m = re.exec(scan))) {
+    const attrs = m[2];
+    if (
+      !attrPresent(attrs, "data-start") ||
+      !attrPresent(attrs, "data-duration") ||
+      !attrPresent(attrs, "data-track-index")
+    )
+      continue;
+    if (isRootish(attrs)) continue;
+    if (!/(?:^|\s)class\s*=\s*["'][^"']*\bclip\b[^"']*["']/.test(attrs)) {
+      errors.push(
+        `${label}: a timed <${m[1]}> (data-start/duration/track-index) has no class="clip" — it renders for the whole frame instead of only its window. Add class="clip", or remove the timing attrs if it is a GSAP-animated element meant to be present throughout.`,
+      );
+    }
+    const track = attrValue(attrs, "data-track-index");
+    const start = parseFloat(attrValue(attrs, "data-start"));
+    const dur = parseFloat(attrValue(attrs, "data-duration"));
+    if (track != null && Number.isFinite(start) && Number.isFinite(dur))
+      clips.push({ track, start, end: start + dur });
+  }
+  const EPS = 1e-3; // adjacent clips that merely touch are legal
+  const byTrack = new Map();
+  for (const c of clips) {
+    const arr = byTrack.get(c.track);
+    if (arr) arr.push(c);
+    else byTrack.set(c.track, [c]);
+  }
+  for (const [track, list] of byTrack) {
+    list.sort((a, b) => a.start - b.start);
+    for (let i = 1; i < list.length; i++) {
+      if (list[i].start < list[i - 1].end - EPS) {
+        errors.push(
+          `${label}: clips on track ${track} overlap (one ends at ${r3(list[i - 1].end)}s, the next starts at ${r3(list[i].start)}s) — same-track time-overlap causes a render conflict. Put them on distinct data-track-index lanes or fix their windows.`,
+        );
+        break; // one report per track is enough
+      }
+    }
+  }
+
+  // ① auto-repair: ensure the root carries data-width / data-height.
+  let repairedHtml = null;
+  let repairNote = null;
+  const root = findRootTag(html);
+  if (root) {
+    const needW = !attrPresent(root.attrs, "data-width");
+    const needH = !attrPresent(root.attrs, "data-height");
+    if (needW || needH) {
+      const inject =
+        (needW ? ` data-width="${WIDTH}"` : "") + (needH ? ` data-height="${HEIGHT}"` : "");
+      const newTag = root.full.replace(/(\/?>)$/, `${inject}$1`);
+      repairedHtml = html.slice(0, root.start) + newTag + html.slice(root.end);
+      repairNote = `${label}: injected${needW ? " data-width" : ""}${needH ? " data-height" : ""} (${WIDTH}×${HEIGHT}) on the root — was missing (would lint root_missing_dimensions)`;
+    }
+  }
+
+  return { errors, repairedHtml, repairNote };
+}
+
+// ---------- resolve mountable frames in document order ----------
+// A frame mounts when its src html exists on disk. A built/animated frame
+// missing its src/file is a contract break (die). An outline frame with no
+// file is skipped (still a placeholder) with an anomaly note.
+const mounted = [];
+for (const f of manifest.frames) {
+  const label = `frame ${f.number ?? f.index}${f.title ? ` (${f.title})` : ""}`;
+  const built = f.status === "built" || f.status === "animated";
+  if (!f.src) {
+    if (built) die(`${label} is ${f.status} but has no \`src\` — the orchestrator must write it`);
+    anomalies.push(`${label}: status ${f.status}, no src — skipped`);
+    continue;
+  }
+  const compAbs = join(hyperframesDir, f.src);
+  // Read directly and handle ENOENT here rather than an existsSync precheck — the
+  // check→read/write pair is a TOCTOU race CodeQL flags (js/file-system-race).
+  let html;
+  try {
+    html = readFileSync(compAbs, "utf8");
+  } catch {
+    if (built)
+      die(`${label} is ${f.status} but its src ${f.src} is not on disk — re-dispatch the worker`);
+    anomalies.push(`${label}: src ${f.src} not on disk (status ${f.status}) — skipped`);
+    continue;
+  }
+  if (!Number.isFinite(f.durationSeconds) || f.durationSeconds <= 0) {
+    die(
+      `${label}: no positive duration (got ${JSON.stringify(f.duration)}) — run audio sync-durations`,
+    );
+  }
+  // Host data-composition-id MUST equal the inner file's, or the runtime never
+  // finds the timeline. frame_id = src basename (frame-worker contract); verify
+  // the inner html actually declares it.
+  const compId = basename(f.src).replace(/\.html?$/i, "");
+  // Guard against blank/partial scene files: a worker that errors or is
+  // interrupted mid-write leaves an empty (or markup-less) file that exists but
+  // fails at render with "Composition HTML is empty or could not be parsed".
+  // Catch it here — before emitting data-composition-src — and re-dispatch.
+  if (!html.trim() || !/<\w/.test(html)) {
+    die(
+      `${label}: ${f.src} is empty or has no HTML — the worker wrote a blank/partial file. Re-dispatch that worker before assembling.`,
+    );
+  }
+  // pre-assembly guards: ① repair missing root dims in place, ②/③ collect fatal violations.
+  const guard = guardFrame(html, label);
+  if (guard.repairedHtml) {
+    writeFileSync(compAbs, guard.repairedHtml);
+    html = guard.repairedHtml;
+    repairs.push(guard.repairNote);
+  }
+  for (const e of guard.errors) frameErrors.push(e);
+  if (
+    !html.includes(`data-composition-id="${compId}"`) &&
+    !html.includes(`data-composition-id='${compId}'`)
+  ) {
+    die(`${label}: ${f.src} has no data-composition-id="${compId}" (host/inner id must match)`);
+  }
+  mounted.push({ frame: f, compId, durationSeconds: r3(f.durationSeconds) });
+}
+if (frameErrors.length) {
+  die(
+    `${frameErrors.length} frame composition violation(s) — fix the worker output and re-assemble:\n` +
+      frameErrors.map((e) => `  • ${e}`).join("\n"),
+  );
+}
+if (mounted.length === 0) die("no mountable frames (none built with an on-disk src)");
+
+// cumulative starts — emitted data-start[i] + data-duration[i] == start[i+1] by
+// construction (renderer computes end the same way), so adjacent clips touch
+// exactly with no float-overlap.
+let acc = 0;
+for (const m of mounted) {
+  m.start = acc;
+  acc += m.durationSeconds;
+}
+const TOTAL = r3(acc);
+const startOfFrameNumber = new Map();
+for (const m of mounted) if (m.frame.number != null) startOfFrameNumber.set(m.frame.number, m);
+
+// ---------- audio_meta (optional) ----------
+let audio = { bgm: null, voices: [], sfx: [] };
+if (existsSync(audioMetaPath)) {
+  try {
+    const parsed = JSON.parse(readFileSync(audioMetaPath, "utf8"));
+    audio = { bgm: parsed.bgm ?? null, voices: parsed.voices ?? [], sfx: parsed.sfx ?? [] };
+  } catch (e) {
+    die(`audio_meta.json parse: ${e.message}`);
+  }
+}
+const voiceByFrame = new Map();
+for (const v of audio.voices) if (v.frame != null) voiceByFrame.set(v.frame, v);
+
+// ---------- build <body> in track order ----------
+const body = [];
+let voiceCount = 0;
+
+for (const m of mounted) {
+  // (track 1) frame sub-comp clip — no class="clip" semantics needed; .scene CSS sizes it.
+  body.push(
+    `      <div`,
+    `        id="el-${m.compId}"`,
+    `        class="scene"`,
+    `        data-composition-id="${m.compId}"`,
+    `        data-composition-src="${m.frame.src}"`,
+    `        data-start="${m.start}"`,
+    `        data-duration="${m.durationSeconds}"`,
+    `        data-track-index="1"`,
+    `      ></div>`,
+  );
+  // (track 10) voice — only when the file is actually on disk.
+  const v = m.frame.number != null ? voiceByFrame.get(m.frame.number) : undefined;
+  if (v?.path) {
+    if (existsSync(join(hyperframesDir, v.path))) {
+      body.push(
+        `      <audio`,
+        `        id="el-${m.compId}-voice"`,
+        `        src="${v.path}"`,
+        `        data-start="${m.start}"`,
+        `        data-duration="${m.durationSeconds}"`,
+        `        data-track-index="10"`,
+        `        data-volume="1"`,
+        `      ></audio>`,
+      );
+      voiceCount++;
+    } else {
+      anomalies.push(`${m.compId}: voice ${v.path} not on disk — skipped`);
+    }
+  }
+  body.push("");
+}
+
+// (track 11) BGM — duck under narration when any voice is present. Loop-extend a short
+// track to the full video length so the tail isn't silent (libraries return ~15–30s clips).
+let bgmEmitted = false;
+let bgmNote = "";
+if (audio.bgm?.path) {
+  if (existsSync(join(hyperframesDir, audio.bgm.path))) {
+    let bgmSrc = audio.bgm.path;
+    const cov = ensureBgmCovers(audio.bgm.path, hyperframesDir, TOTAL);
+    if (cov.looped) {
+      bgmSrc = cov.rel;
+      bgmNote = ` (looped ${cov.from.toFixed(1)}s→${TOTAL}s)`;
+    } else if (cov.short) {
+      anomalies.push(
+        `bgm is ${cov.dur?.toFixed?.(1) ?? "?"}s (< ${TOTAL}s) and could not be extended (${cov.reason}) — the tail will be silent; install ffmpeg`,
+      );
+    }
+    // An explicit volume from audio_meta always wins; otherwise the shared
+    // media-use default (bed ~ -18 dB under narration, forward for a silent film).
+    const vol = audio.bgm.volume != null ? audio.bgm.volume : bgmDefaultVolume(voiceCount > 0);
+    body.push(
+      `      <!-- BGM -->`,
+      `      <audio`,
+      `        id="el-bgm"`,
+      `        src="${bgmSrc}"`,
+      `        data-start="0"`,
+      `        data-duration="${TOTAL}"`,
+      `        data-track-index="11"`,
+      `        data-volume="${vol}"`,
+      `      ></audio>`,
+      "",
+    );
+    bgmEmitted = true;
+  } else {
+    anomalies.push(`bgm ${audio.bgm.path} not on disk — skipped`);
+  }
+}
+
+// (track 2) captions — captions.mjs writes this or legally skips; key off existence.
+let captionsEmitted = false;
+if (existsSync(join(hyperframesDir, "compositions/captions.html"))) {
+  body.push(
+    `      <!-- captions -->`,
+    `      <div`,
+    `        id="el-captions"`,
+    `        class="scene"`,
+    `        data-composition-id="captions"`,
+    `        data-composition-src="compositions/captions.html"`,
+    `        data-start="0"`,
+    `        data-duration="${TOTAL}"`,
+    `        data-track-index="2"`,
+    `      ></div>`,
+    "",
+  );
+  captionsEmitted = true;
+}
+
+// (track 20+i) SFX — placed at its frame's start + offset.
+let sfxEmitted = 0;
+audio.sfx.forEach((cue, i) => {
+  const host = cue.frame != null ? startOfFrameNumber.get(cue.frame) : undefined;
+  if (!host) {
+    anomalies.push(`sfx ${cue.file}: frame ${cue.frame} not mounted — skipped`);
+    return;
+  }
+  const rel = cue.file;
+  if (!existsSync(join(hyperframesDir, rel))) {
+    anomalies.push(`sfx ${rel} not on disk — skipped`);
+    return;
+  }
+  const t = r3(host.start + (cue.offset_s ?? 0));
+  const dur = r3(cue.duration_s ?? 1);
+  const vol = cue.volume != null ? cue.volume : 0.35;
+  if (sfxEmitted === 0) body.push(`      <!-- SFX -->`);
+  body.push(
+    `      <audio`,
+    `        id="el-sfx-${i}"`,
+    `        src="${rel}"`,
+    `        data-start="${t}"`,
+    `        data-duration="${dur}"`,
+    `        data-track-index="${20 + i}"`,
+    `        data-volume="${vol}"`,
+    `      ></audio>`,
+  );
+  sfxEmitted++;
+});
+
+// ---------- stage frame-named assets: capture/ → assets/ (idempotent backstop) ----------
+// Frame workers + the live preview reference assets/<basename>; stage-assets.mjs
+// already ran this at Step 4 close. Re-run as a backstop so a late-named asset
+// still lands. Shared logic: lib/assets.mjs (first-wins, safe to call twice).
+const {
+  staged,
+  wanted,
+  anomalies: assetAnomalies,
+} = stageAssets({
+  hyperframesDir,
+  frames: manifest.frames,
+});
+for (const a of assetAnomalies) anomalies.push(a);
+
+// ---------- <head> ----------
+// ---------- ground color ----------
+// Per-frame roots carry data-start/data-duration and get clip-gated against the
+// global timeline in render (only the first frame's [0,dur] window overlaps global
+// 0), so a frame's own full-bleed background can't be relied on as the video ground —
+// every frame after the first would render on the bare body color (black). Paint the
+// ground on the always-present root composition instead, using the project's frame.md
+// canvas color (the same ground role the caption skin maps to --cap-canvas). Falls
+// back to the body letterbox color when frame.md is absent or has no resolvable ground.
+const framePath = join(hyperframesDir, "frame.md");
+let groundColor = null;
+if (existsSync(framePath)) {
+  try {
+    const roles = semanticColors(parseColors(readFileSync(framePath, "utf8")));
+    if (roles && roles.canvas) groundColor = roles.canvas;
+  } catch {
+    /* leave groundColor null — #root stays transparent over the body letterbox */
+  }
+}
+
+const headStyle = [
+  "      * {",
+  "        margin: 0;",
+  "        padding: 0;",
+  "        box-sizing: border-box;",
+  "      }",
+  "      html,",
+  "      body {",
+  `        width: ${WIDTH}px;`,
+  `        height: ${HEIGHT}px;`,
+  "        overflow: hidden;",
+  "        background: #000;",
+  "      }",
+  "      #root {",
+  "        position: relative;",
+  `        width: ${WIDTH}px;`,
+  `        height: ${HEIGHT}px;`,
+  "        overflow: hidden;",
+  ...(groundColor ? [`        background: ${groundColor};`] : []),
+  "      }",
+  "      .scene {",
+  "        position: absolute;",
+  "        inset: 0;",
+  "        width: 100%;",
+  "        height: 100%;",
+  "      }",
+].join("\n");
+
+const html = `<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=${WIDTH}, height=${HEIGHT}" />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js" integrity="sha384-sG0Hv1tP1lZCk9KQmrIbY/XNwi+OY84GQqhMscbnsoBFqAz8KNCil1kvfL3Hbbk2" crossorigin="anonymous"></script>
+    <style>
+${headStyle}
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="main"
+      data-start="0"
+      data-duration="${TOTAL}"
+      data-width="${WIDTH}"
+      data-height="${HEIGHT}"
+    >
+${body.join("\n")}
+    </div>
+
+    <script>
+      window.__timelines = window.__timelines || {};
+      window.__timelines["main"] = gsap.timeline({ paused: true });
+    </script>
+  </body>
+</html>
+`;
+
+writeFileSync(outPath, html);
+
+// ---------- summary ----------
+console.log(`✓ wrote ${outPath}`);
+console.log(`  canvas:            ${WIDTH}×${HEIGHT}`);
+console.log(`  frames (track 1):  ${mounted.length}`);
+console.log(`  voice  (track 10): ${voiceCount}`);
+console.log(`  bgm    (track 11): ${bgmEmitted ? "yes" + bgmNote : "no"}`);
+console.log(`  captions (track 2): ${captionsEmitted ? "yes" : "no"}`);
+console.log(`  sfx    (track 20+): ${sfxEmitted}`);
+console.log(`  assets staged:     ${staged}/${wanted.size}`);
+console.log(`  total duration:    ${TOTAL}s`);
+if (repairs.length) {
+  console.log(`\nrepaired (frame files updated in place):`);
+  for (const rp of repairs) console.log(`  - ${rp}`);
+}
+if (anomalies.length) {
+  console.log(`\nanomalies (non-fatal):`);
+  for (const a of anomalies) console.log(`  - ${a}`);
+}
diff --git a/.claude/skills-media/faceless-explainer/scripts/audio.mjs b/.claude/skills-media/faceless-explainer/scripts/audio.mjs
new file mode 100644
index 000000000..3bae9e243
--- /dev/null
+++ b/.claude/skills-media/faceless-explainer/scripts/audio.mjs
@@ -0,0 +1,273 @@
+#!/usr/bin/env node
+// audio.mjs — audio ADAPTER (reuses the product-launch SCRIPT.md / STORYBOARD.md
+// model; this file is intentionally identical across the reusing skills). The
+// TTS / BGM / SFX implementation
+// no longer lives here: it is the shared engine at
+// ../../media-use/audio/scripts/audio.mjs. This file only (a) maps the
+// product-launch model (SCRIPT.md frames + STORYBOARD.md music/sfx) into the
+// engine's neutral audio_request.json, (b) converts the engine's id-keyed
+// audio_meta back into the frame-keyed shape captions.mjs / assemble-index.mjs
+// already consume, and (c) keeps the local `sync-durations` pass (it rewrites
+// STORYBOARD.md, which is product-launch-specific).
+//
+// Three modes (unchanged CLI surface):
+//   (default) generate — engine --only tts,bgm. BGM mode is "retrieve" (strict:
+//        no HeyGen credential ⇒ skip, never a detached generate, since this
+//        workflow has no wait-bgm step). Runs in the background during Step 4.
+//   sync-durations — write real voice durations into STORYBOARD.md (local).
+//   fetch-sfx      — engine --only sfx, merged into the existing meta (Step 5,
+//        after the frames' `sfx:` cues exist).
+//
+//   node audio.mjs --script ./SCRIPT.md --storyboard ./STORYBOARD.md --hyperframes . --out ./audio_meta.json
+//   node audio.mjs sync-durations --audio-meta ./audio_meta.json --storyboard ./STORYBOARD.md
+//   node audio.mjs fetch-sfx --storyboard ./STORYBOARD.md --hyperframes .
+
+import { spawnSync } from "node:child_process";
+import { existsSync, readFileSync, rmSync, writeFileSync } from "node:fs";
+import { dirname, join, resolve } from "node:path";
+import { fileURLToPath } from "node:url";
+import { parseStoryboard } from "./lib/storyboard.mjs";
+
+const HERE = dirname(fileURLToPath(import.meta.url));
+const DEFAULT_ENGINE = join(HERE, "..", "..", "media-use", "audio", "scripts", "audio.mjs");
+
+const flag = (argv, name, def) => {
+  const i = argv.indexOf(`--${name}`);
+  return i >= 0 && i + 1 < argv.length ? argv[i + 1] : def;
+};
+const pad2 = (n) => String(n).padStart(2, "0");
+
+// SCRIPT.md → [{ frame, text }]. `## … (Frame N)` opens a line; `**key:**` rows
+// are metadata; the indented block is the spoken text (the only TTS input).
+function parseScript(md) {
+  const out = [];
+  let cur = null;
+  const flush = () => {
+    if (cur && cur.text.trim()) out.push({ frame: cur.frame, text: cur.text.trim() });
+    cur = null;
+  };
+  for (const line of md.split(/\r?\n/)) {
+    const h = line.match(/^#{2,3}\s+.*?\(frame\s+(\d+)\)/i);
+    if (h) {
+      flush();
+      cur = { frame: Number(h[1]), text: "" };
+      continue;
+    }
+    if (!cur) continue;
+    if (/^\s*\*\*/.test(line)) continue;
+    const m = line.match(/^(?: {4,}|\t)(.+)$/);
+    if (m) cur.text += (cur.text ? " " : "") + m[1].trim();
+  }
+  flush();
+  return out;
+}
+
+// Path of the engine's neutral meta — a stable sidecar so `--only` merges
+// (generate then fetch-sfx) accumulate, while audio_meta.json holds the PL shape.
+const neutralPath = (plOutPath) => join(dirname(plOutPath), "audio_engine_meta.json");
+
+// Run the shared engine. Returns nothing; dies on a non-zero exit.
+function runEngine({ request, hyperframesDir, neutral, only, extra = [] }, die) {
+  const reqPath = join(hyperframesDir, "audio_request.json");
+  writeFileSync(reqPath, JSON.stringify(request, null, 2));
+  const engine = process.env.HF_MEDIA_ENGINE || DEFAULT_ENGINE;
+  if (!existsSync(engine)) die(`media audio engine not found at ${engine} (set $HF_MEDIA_ENGINE)`);
+  const args = [
+    engine,
+    "--request",
+    reqPath,
+    "--hyperframes",
+    hyperframesDir,
+    "--out",
+    neutral,
+    "--only",
+    only,
+    ...extra,
+  ];
+  const r = spawnSync("node", args, { stdio: "inherit" });
+  if (r.status !== 0) die(`media audio engine exited ${r.status}`);
+}
+
+// Engine neutral meta (id-keyed) → product-launch meta (frame-keyed) consumed by
+// captions.mjs / assemble-index.mjs. id is the zero-padded frame number.
+function toProductLaunchMeta(neutral) {
+  const voices = (neutral.voices ?? []).map((v) => ({
+    frame: Number(v.id),
+    path: v.path,
+    duration_s: v.duration_s,
+    words: (v.words ?? []).map((w) => ({ id: w.id, text: w.text, start: w.start, end: w.end })),
+  }));
+  const bgm = neutral.bgm
+    ? {
+        path: neutral.bgm.path,
+        volume: neutral.bgm.volume,
+        query: neutral.bgm.query ?? null,
+        duration_s: neutral.bgm.duration_s ?? null,
+      }
+    : null;
+  const sfx = (neutral.sfx ?? []).map((s) => ({
+    frame: Number(s.id),
+    file: s.file,
+    offset_s: s.offset_s ?? 0,
+    duration_s: s.duration_s ?? 1,
+    volume: s.volume ?? 0.35,
+  }));
+  return { bgm, voices, sfx };
+}
+
+// ── generate (TTS + BGM) ────────────────────────────────────────────────────
+function runGenerate(argv) {
+  const die = (m) => {
+    console.error(`✗ audio generate: ${m}`);
+    process.exit(1);
+  };
+  const hyperframesDir = resolve(flag(argv, "hyperframes", "."));
+  const storyboardPath = resolve(flag(argv, "storyboard", join(hyperframesDir, "STORYBOARD.md")));
+  const scriptPath = resolve(flag(argv, "script", join(hyperframesDir, "SCRIPT.md")));
+  const outPath = resolve(flag(argv, "out", join(hyperframesDir, "audio_meta.json")));
+  const userVoice = flag(argv, "voice", null);
+  const speed = Number(flag(argv, "speed", "1.0")) || 1.0;
+
+  if (!existsSync(storyboardPath)) die(`STORYBOARD.md not found at ${storyboardPath}`);
+  const manifest = parseStoryboard(readFileSync(storyboardPath, "utf8"));
+  const g = manifest.globals;
+
+  const lines = existsSync(scriptPath)
+    ? parseScript(readFileSync(scriptPath, "utf8")).map((l) => ({
+        id: pad2(l.frame),
+        text: l.text,
+      }))
+    : [];
+  // The canonical fully-silent marker (SKILL.md Step 3.1): `music: none` in
+  // the storyboard's top YAML block turns BGM off; combined with no SCRIPT.md
+  // the project is fully silent — generate nothing and remove any stale meta
+  // from a previous run (assemble treats an absent audio_meta.json as silent).
+  const bgmOff =
+    String(g.extra?.music ?? "")
+      .trim()
+      .toLowerCase() === "none";
+  if (bgmOff && !lines.length) {
+    rmSync(outPath, { force: true });
+    rmSync(neutralPath(outPath), { force: true });
+    console.log(
+      "✓ audio generate: project marked silent (music: none, no SCRIPT.md) — nothing to generate",
+    );
+    return;
+  }
+  if (!lines.length) console.error("· no SCRIPT.md — silent film (BGM only)");
+
+  // BGM mood: storyboard `music:` → message → arc → default. `mode: retrieve` is
+  // strict here (no wait-bgm step downstream).
+  const query = (g.extra && g.extra.music) || g.message || g.arc || "calm cinematic underscore";
+  const request = {
+    provider: "auto",
+    speed,
+    lines,
+    bgm: bgmOff
+      ? { mode: "none" }
+      : { mode: "retrieve", query, blob: g.message || "", arc: g.arc || "" },
+  };
+  if (userVoice) request.voice = userVoice;
+
+  const neutral = neutralPath(outPath);
+  runEngine({ request, hyperframesDir, neutral, only: "tts,bgm" }, die);
+
+  const meta = toProductLaunchMeta(JSON.parse(readFileSync(neutral, "utf8")));
+  writeFileSync(outPath, JSON.stringify(meta, null, 2));
+  console.log(
+    `✓ audio generate: ${meta.voices.length} voice + ${meta.bgm ? "1 bgm" : "no bgm"} → ${outPath}`,
+  );
+}
+
+// ── fetch-sfx ────────────────────────────────────────────────────────────────
+function runFetchSfx(argv) {
+  const die = (m) => {
+    console.error(`✗ audio fetch-sfx: ${m}`);
+    process.exit(1);
+  };
+  const hyperframesDir = resolve(flag(argv, "hyperframes", "."));
+  const storyboardPath = resolve(flag(argv, "storyboard", join(hyperframesDir, "STORYBOARD.md")));
+  const outPath = resolve(flag(argv, "audio-meta", join(hyperframesDir, "audio_meta.json")));
+
+  if (!existsSync(storyboardPath)) die(`STORYBOARD.md not found at ${storyboardPath}`);
+  const manifest = parseStoryboard(readFileSync(storyboardPath, "utf8"));
+
+  // Per-frame `sfx:` cues (comma-separated) → engine lines carrying only sfx.
+  const lines = [];
+  for (const f of manifest.frames) {
+    const names = (f.extra?.sfx ?? "")
+      .split(",")
+      .map((s) => s.trim())
+      .filter(Boolean);
+    if (names.length && f.number != null) lines.push({ id: pad2(f.number), sfx: names });
+  }
+
+  const neutral = neutralPath(outPath);
+  const request = { lines, bgm: { mode: "none" } };
+  // --only sfx is a MERGE, not an overwrite: the engine reads the existing neutral
+  // sidecar (audio_engine_meta.json) and recomputes only the sfx section, so the
+  // voices/bgm written by the earlier generate (--only tts,bgm) pass are preserved.
+  runEngine({ request, hyperframesDir, neutral, only: "sfx" }, die);
+
+  const meta = toProductLaunchMeta(JSON.parse(readFileSync(neutral, "utf8")));
+  writeFileSync(outPath, JSON.stringify(meta, null, 2));
+  console.log(`✓ audio fetch-sfx: ${meta.sfx.length} SFX cue(s) → ${outPath}`);
+}
+
+// ── sync-durations (local; rewrites STORYBOARD.md) ────────────────────────────
+function runSyncDurations(argv) {
+  const die = (m) => {
+    console.error(`✗ audio sync-durations: ${m}`);
+    process.exit(1);
+  };
+  const hyperframesDir = resolve(flag(argv, "hyperframes", "."));
+  const audioMetaPath = resolve(flag(argv, "audio-meta", join(hyperframesDir, "audio_meta.json")));
+  const storyboardPath = resolve(flag(argv, "storyboard", join(hyperframesDir, "STORYBOARD.md")));
+  if (!existsSync(audioMetaPath)) die(`audio_meta.json not found at ${audioMetaPath}`);
+
+  const meta = JSON.parse(readFileSync(audioMetaPath, "utf8"));
+  const durByFrame = new Map();
+  for (const v of meta.voices ?? []) {
+    if (v.frame != null && v.duration_s) durByFrame.set(v.frame, v.duration_s);
+  }
+
+  // Read directly and handle ENOENT here, rather than an existsSync precheck —
+  // the check→write pair (write-back below) is a TOCTOU race CodeQL flags.
+  let storyboardRaw = "";
+  try {
+    storyboardRaw = readFileSync(storyboardPath, "utf8");
+  } catch {
+    die(`STORYBOARD.md not found at ${storyboardPath}`);
+  }
+  const lines = storyboardRaw.split(/\r?\n/);
+  const FRAME_RE = /^#{2,3}\s+(?:frame|beat|scene)\b.*?(\d+)/i;
+  let curFrame = null;
+  let updated = 0;
+  for (let i = 0; i < lines.length; i++) {
+    const h = lines[i].match(FRAME_RE);
+    if (h) {
+      curFrame = Number(h[1]);
+      continue;
+    }
+    if (curFrame != null && durByFrame.has(curFrame)) {
+      const m = lines[i].match(/^(\s*[-*]\s+duration\s*:\s*).*/i);
+      if (m) {
+        lines[i] = `${m[1]}${durByFrame.get(curFrame)}s`;
+        durByFrame.delete(curFrame);
+        updated++;
+      }
+    }
+  }
+  writeFileSync(storyboardPath, lines.join("\n"));
+  const missing = [...durByFrame.keys()];
+  console.log(
+    `✓ audio sync-durations: ${updated} frame duration(s) updated` +
+      (missing.length ? ` · no \`- duration:\` line for frame(s) ${missing.join(", ")}` : ""),
+  );
+}
+
+// ── dispatch ──────────────────────────────────────────────────────────────────
+const sub = process.argv[2];
+if (sub === "sync-durations") runSyncDurations(process.argv.slice(3));
+else if (sub === "fetch-sfx") runFetchSfx(process.argv.slice(3));
+else runGenerate(process.argv.slice(2)); // default: generate
diff --git a/.claude/skills-media/faceless-explainer/scripts/audio.test.mjs b/.claude/skills-media/faceless-explainer/scripts/audio.test.mjs
new file mode 100644
index 000000000..a7731f108
--- /dev/null
+++ b/.claude/skills-media/faceless-explainer/scripts/audio.test.mjs
@@ -0,0 +1,91 @@
+import assert from "node:assert/strict";
+import { existsSync, mkdtempSync, readFileSync, writeFileSync } from "node:fs";
+import { tmpdir } from "node:os";
+import { join } from "node:path";
+import { spawnSync } from "node:child_process";
+import test from "node:test";
+
+const script = new URL("./audio.mjs", import.meta.url).pathname;
+
+// The header of this adapter declares it "intentionally identical across the
+// reusing skills" — pin that contract so a fix landing in one copy can't
+// silently miss the other (the fully-silent marker bug did exactly that).
+test("audio.mjs is byte-identical to pr-to-video's copy (the stated contract)", () => {
+  const here = readFileSync(script, "utf8");
+  const sibling = readFileSync(
+    new URL("../../pr-to-video/scripts/audio.mjs", import.meta.url),
+    "utf8",
+  );
+  assert.equal(here, sibling);
+});
+
+// ── the canonical fully-silent marker (SKILL.md Step 3.1) ────────────────────
+// Same contract as product-launch (see its audio.test.mjs): `music: none` in
+// the storyboard's top YAML block + no SCRIPT.md ⇒ generate nothing; with
+// narration ⇒ TTS runs, BGM off.
+
+function runAudioRaw({ storyboard, scriptMd = null, preexistingMeta = null }) {
+  const dir = mkdtempSync(join(tmpdir(), "faceless-audio-"));
+  const engine = join(dir, "engine.mjs");
+  writeFileSync(join(dir, "STORYBOARD.md"), storyboard);
+  if (scriptMd != null) writeFileSync(join(dir, "SCRIPT.md"), scriptMd);
+  if (preexistingMeta != null) writeFileSync(join(dir, "audio_meta.json"), preexistingMeta);
+  writeFileSync(
+    engine,
+    `import { readFileSync, writeFileSync } from "node:fs";
+const argv = process.argv.slice(2);
+const flag = (name) => argv[argv.indexOf(name) + 1];
+const request = JSON.parse(readFileSync(flag("--request"), "utf8"));
+writeFileSync(new URL("request.json", import.meta.url), JSON.stringify(request));
+writeFileSync(flag("--out"), JSON.stringify({ voices: [], bgm: null, sfx: [] }));
+`,
+  );
+  const result = spawnSync(
+    process.execPath,
+    [script, "--hyperframes", dir, "--storyboard", join(dir, "STORYBOARD.md")],
+    { encoding: "utf8", env: { ...process.env, HF_MEDIA_ENGINE: engine } },
+  );
+  return { dir, result };
+}
+
+test("music: none + no SCRIPT.md = fully silent: no engine run, no audio_meta.json", () => {
+  const { dir, result } = runAudioRaw({ storyboard: "---\nmessage: Test\nmusic: none\n---\n" });
+
+  assert.equal(result.status, 0, result.stderr);
+  assert.match(result.stdout, /marked silent/);
+  assert.equal(existsSync(join(dir, "request.json")), false);
+  assert.equal(existsSync(join(dir, "audio_meta.json")), false);
+});
+
+test("fully-silent run removes stale audio_meta.json from a previous non-silent run", () => {
+  const { dir, result } = runAudioRaw({
+    storyboard: "---\nmessage: Test\nmusic: none\n---\n",
+    preexistingMeta: JSON.stringify({ bgm: { path: "old.mp3" }, voices: [], sfx: [] }),
+  });
+
+  assert.equal(result.status, 0, result.stderr);
+  assert.equal(existsSync(join(dir, "audio_meta.json")), false);
+});
+
+test("music: none with narration keeps TTS but turns BGM off (not fully silent)", () => {
+  const { dir, result } = runAudioRaw({
+    storyboard: "---\nmessage: Test\nmusic: none\n---\n",
+    scriptMd: "## Hook (Frame 1)\n\n    Spoken line for frame one.\n",
+  });
+
+  assert.equal(result.status, 0, result.stderr);
+  const request = JSON.parse(readFileSync(join(dir, "request.json"), "utf8"));
+  assert.equal(request.bgm.mode, "none");
+  assert.equal(request.lines.length, 1);
+});
+
+test("a storyboard music mood still retrieves BGM (marker is exact, not fuzzy)", () => {
+  const { dir, result } = runAudioRaw({
+    storyboard: "---\nmessage: Test\nmusic: upbeat synthwave with heavy drums\n---\n",
+  });
+
+  assert.equal(result.status, 0, result.stderr);
+  const request = JSON.parse(readFileSync(join(dir, "request.json"), "utf8"));
+  assert.equal(request.bgm.mode, "retrieve");
+  assert.equal(request.bgm.query, "upbeat synthwave with heavy drums");
+});
diff --git a/.claude/skills-media/faceless-explainer/scripts/build-frame.mjs b/.claude/skills-media/faceless-explainer/scripts/build-frame.mjs
new file mode 100644
index 000000000..e16f2a328
--- /dev/null
+++ b/.claude/skills-media/faceless-explainer/scripts/build-frame.mjs
@@ -0,0 +1,532 @@
+#!/usr/bin/env node
+// build-frame.mjs — Step 2 design system in ONE command. The LLM only chooses a
+// preset; this does the deterministic rest: copy the preset's FRAME.md → frame.md,
+// remix its colors/typography onto the project's brand tokens, copy the preset's
+// caption-skin.html, and self-validate. "Strict on brand" is deterministic, so it's
+// a script, not LLM hand-editing (which mis-copies hex / breaks keys).
+//
+//   node build-frame.mjs --preset capsule --hyperframes .
+//     [--tokens capture/extracted/tokens.json]  [--preset-dir <abs path to frame-presets>]
+//
+// Remix rule — ONLY `colors:` values and `typography:` fontFamily change; keys,
+// structure, geometry, and components are untouched:
+//   colors — map brand tokens onto the preset's keys BY ROLE: the ink-role key takes
+//            the brand ink (darkest/ink-named), the canvas-role key takes the brand
+//            canvas (lightest), and every other color is repainted with the nearest
+//            brand accent's hue+saturation while KEEPING its own lightness, so tint
+//            families (sun / sun-soft / haze) stay a family. Empty brand colors → the
+//            preset palette is kept (it is already a complete, good design).
+//   fonts  — the preset's display family → the brand display font, its body family →
+//            the brand body font, wherever they appear. Empty brand fonts → kept.
+
+import {
+  copyFileSync,
+  existsSync,
+  mkdirSync,
+  readdirSync,
+  readFileSync,
+  writeFileSync,
+} from "node:fs";
+import { dirname, join, resolve } from "node:path";
+import { fileURLToPath } from "node:url";
+import {
+  brandRolesFromStats,
+  chroma,
+  lum,
+  parseColors,
+  parseFonts,
+  pickAccent,
+  semanticColors,
+  STATUS_ROLE_KEY,
+  UA_DEFAULT_COLORS,
+} from "./lib/tokens.mjs";
+
+const __dirname = 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 die = (m) => {
+  console.error(`✗ build-frame: ${m}`);
+  process.exit(1);
+};
+
+const presetName = flag("preset", null);
+const hyperframesDir = resolve(flag("hyperframes", "."));
+const presetDir = resolve(
+  flag("preset-dir", join(__dirname, "../../hyperframes-creative/frame-presets")),
+);
+const tokensPath = resolve(flag("tokens", join(hyperframesDir, "capture/extracted/tokens.json")));
+
+if (!presetName) die("--preset <name> is required");
+const presetFrame = join(presetDir, presetName, "FRAME.md");
+if (!existsSync(presetFrame)) {
+  const avail = existsSync(presetDir)
+    ? readdirSync(presetDir, { withFileTypes: true })
+        .filter((d) => d.isDirectory())
+        .map((d) => d.name)
+    : [];
+  die(
+    `no FRAME.md for preset "${presetName}" under ${presetDir}\n  available: ${avail.join(", ")}`,
+  );
+}
+
+// ── HSL helpers (recolor = brand hue+sat, original lightness) ──────────────────
+function hexToHsl(hex) {
+  const m = /^#?([0-9a-fA-F]{6})$/.exec(String(hex).trim());
+  if (!m) return null;
+  const n = parseInt(m[1], 16);
+  const r = ((n >> 16) & 255) / 255,
+    g = ((n >> 8) & 255) / 255,
+    b = (n & 255) / 255;
+  const max = Math.max(r, g, b),
+    min = Math.min(r, g, b),
+    d = max - min;
+  let h = 0;
+  const l = (max + min) / 2;
+  const s = d === 0 ? 0 : l > 0.5 ? d / (2 - max - min) : d / (max + min);
+  if (d !== 0) {
+    h = max === r ? (g - b) / d + (g < b ? 6 : 0) : max === g ? (b - r) / d + 2 : (r - g) / d + 4;
+    h *= 60;
+  }
+  return { h, s, l };
+}
+function hslToHex(h, s, l) {
+  h = (((h % 360) + 360) % 360) / 360;
+  const hue = (p, q, t) => {
+    t = (t + 1) % 1;
+    if (t < 1 / 6) return p + (q - p) * 6 * t;
+    if (t < 1 / 2) return q;
+    if (t < 2 / 3) return p + (q - p) * (2 / 3 - t) * 6;
+    return p;
+  };
+  let r, g, b;
+  if (s === 0) {
+    r = g = b = l;
+  } else {
+    const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
+    const p = 2 * l - q;
+    r = hue(p, q, h + 1 / 3);
+    g = hue(p, q, h);
+    b = hue(p, q, h - 1 / 3);
+  }
+  const to = (x) =>
+    Math.round(x * 255)
+      .toString(16)
+      .padStart(2, "0")
+      .toUpperCase();
+  return `#${to(r)}${to(g)}${to(b)}`;
+}
+const hueDist = (a, b) => {
+  const d = Math.abs(a - b) % 360;
+  return d > 180 ? 360 - d : d;
+};
+function hexToRgb(hex) {
+  const m = /^#?([0-9a-fA-F]{6})$/.exec(String(hex).trim());
+  if (!m) return null;
+  const n = parseInt(m[1], 16);
+  return [(n >> 16) & 255, (n >> 8) & 255, n & 255];
+}
+const rgbToHsl = (r, g, b) =>
+  hexToHsl("#" + [r, g, b].map((x) => Math.round(x).toString(16).padStart(2, "0")).join(""));
+// Repaint a chromatic rgba()/rgb() tint with the brand accent's RGB, keeping its alpha.
+// A near-neutral rgb (shadow / scrim overlay) is left untouched; a non-rgba string → null.
+function remapRgbaToAccent(val, brAccent, brAccent2, prAccentHsl, prAccent2Hsl) {
+  const m = /^rgba?\(\s*([\d.]+)[\s,]+([\d.]+)[\s,]+([\d.]+)\s*(?:[,/]\s*([\d.]+%?))?\s*\)$/i.exec(
+    String(val).trim(),
+  );
+  if (!m) return null;
+  const r = +m[1],
+    g = +m[2],
+    b = +m[3],
+    a = m[4];
+  if (Math.max(r, g, b) - Math.min(r, g, b) < 16) return null; // neutral overlay — keep as-is
+  const src = rgbToHsl(r, g, b);
+  const useSecond =
+    brAccent2 &&
+    prAccentHsl &&
+    prAccent2Hsl &&
+    src &&
+    hueDist(src.h, prAccent2Hsl.h) < hueDist(src.h, prAccentHsl.h);
+  const t = hexToRgb(useSecond ? brAccent2 : brAccent);
+  if (!t) return null;
+  return a !== undefined
+    ? `rgba(${t[0]}, ${t[1]}, ${t[2]}, ${a})`
+    : `rgb(${t[0]}, ${t[1]}, ${t[2]})`;
+}
+
+// ── brand tokens ──────────────────────────────────────────────────────────────
+let brandColors = [];
+let brandFonts = [];
+let brandFontWeights = []; // weights the brand text font actually ships (tokens fonts[].weights)
+let brandColorStats = []; // rich per-color usage stats (areaBg / interactiveBg / textCount …)
+// Icon/glyph fonts capture surfaces as "fonts" — they are never the brand text face
+// (webflow-icons, Font Awesome, icomoon …) and must not become display/body or contribute weights.
+const ICON_FONT_PATTERN =
+  /(?:^|[\s_-])icons?(?:[\s_-]|$)|icomoon|font\s*-?awesome|glyphicons?|material\s*icons|feather\s*icons|(?:icon|glyph).*font|font.*(?:icon|glyph)|^vidaxlfont$/i;
+const isIconFont = (name) => ICON_FONT_PATTERN.test(String(name));
+if (existsSync(tokensPath)) {
+  try {
+    const t = JSON.parse(readFileSync(tokensPath, "utf8"));
+    brandColors = (t.colors ?? [])
+      .map((c) => (typeof c === "string" ? c : (c?.hex ?? c?.value ?? "")))
+      .map((c) => String(c).trim())
+      .filter((c) => /^#?[0-9a-fA-F]{6}$/.test(c))
+      .map((c) => (c.startsWith("#") ? c : `#${c}`));
+    brandFonts = (t.fonts ?? [])
+      .map((f) => (typeof f === "string" ? f : (f?.family ?? f?.name ?? "")))
+      .map((f) => String(f).split(",")[0].replace(/['"]/g, "").trim())
+      .filter(Boolean)
+      .filter((f) => !isIconFont(f));
+    // Union of the (non-icon) brand fonts' available weights — used to clamp the preset's
+    // type ramp so a font shipping only 400/500 never faux-bolds a 600/700 heading.
+    brandFontWeights = [
+      ...new Set(
+        (t.fonts ?? [])
+          .filter((f) => f && typeof f === "object" && !isIconFont(f.family ?? f.name ?? ""))
+          .flatMap((f) => (Array.isArray(f.weights) ? f.weights : []))
+          .map((w) => parseInt(w, 10))
+          .filter((w) => Number.isFinite(w)),
+      ),
+    ].sort((a, b) => a - b);
+    brandColorStats = Array.isArray(t.colorStats) ? t.colorStats : [];
+  } catch (e) {
+    die(`tokens.json parse: ${e.message}`);
+  }
+}
+
+let md = readFileSync(presetFrame, "utf8");
+const presetColors = parseColors(md);
+const summary = [];
+
+// ── color remix ───────────────────────────────────────────────────────────────
+if (brandColors.length && presetColors.length) {
+  const pr = semanticColors(presetColors);
+  // Brand roles: prefer the function-based reading of capture colorStats (canvas =
+  // largest background, accent = top interactive bg, ink = dominant contrasting text).
+  // Fall back to the legacy luminance/chroma heuristic only when stats are absent —
+  // but pick the accent via pickAccent either way so a UA-default link color never wins.
+  const br =
+    brandRolesFromStats(brandColorStats, brandColors) ??
+    (() => {
+      // strip UA-default link colors so a stray <a> color can't become ink/canvas/accent
+      const clean = brandColors.filter((h) => !UA_DEFAULT_COLORS.has(h.toUpperCase()));
+      const s = semanticColors(clean.map((h, i) => [`c${i}`, h]));
+      return {
+        ink: s.ink,
+        canvas: s.canvas,
+        accent: pickAccent(brandColorStats, clean, [s.ink, s.canvas]) ?? s.accent,
+        accent2: s.accent2,
+      };
+    })();
+  if (!br.accent) die("accent 选取失败：品牌色里没有可用的强调色");
+  if (chroma(br.accent) <= 40) {
+    console.warn(
+      `  ⚠ accent ${br.accent} 彩度很低 (${chroma(br.accent)}) — 确认这是品牌色而非中性/默认色`,
+    );
+  }
+  // Map by LUMINANCE POLARITY. The preset's darker value takes the brand's darker value and
+  // the lighter takes the lighter — UNLESS the brand's GROUND polarity differs from the
+  // preset's. Every shipped preset is light-ground; a dark-mode brand (Linear, Vercel,
+  // Raycast…) has its canvas darker than its ink (colorStats already resolved the real
+  // ground as the largest-area background). On a polarity MISMATCH we INVERT the mapping so a
+  // light preset becomes the dark brand (canvas↔ink swap) instead of forcing the brand onto
+  // an off-brand light video; neutral/tint lightness is then mirrored (L→1−L) so the whole
+  // palette flips to the brand's ground. Same-polarity (the common case) is unchanged.
+  const darker = (a, b) => ((lum(a) ?? 0) <= (lum(b) ?? 0) ? a : b);
+  const prDark = darker(pr.ink, pr.canvas);
+  const prLight = prDark === pr.ink ? pr.canvas : pr.ink;
+  const brDark = darker(br.ink, br.canvas);
+  const brLight = brDark === br.ink ? br.canvas : br.ink;
+  const presetGroundDark = (lum(pr.canvas) ?? 255) < (lum(pr.ink) ?? 0);
+  const brandGroundDark = (lum(br.canvas) ?? 255) < (lum(br.ink) ?? 0);
+  const invert = presetGroundDark !== brandGroundDark;
+  const mapDark = invert ? brLight : brDark; // preset's dark value → this brand value
+  const mapLight = invert ? brDark : brLight; // preset's light value → this brand value
+  const flipL = (l) => (invert ? 1 - l : l); // mirror tint/neutral lightness when flipping
+  const prAccentHsl = hexToHsl(pr.accent);
+  const prAccent2Hsl = hexToHsl(pr.accent2);
+  const newByKey = new Map();
+  for (const [key, val] of presetColors) {
+    const ph = hexToHsl(val);
+    let next;
+    if (val === prDark) next = mapDark;
+    else if (val === prLight) next = mapLight;
+    else if (STATUS_ROLE_KEY.test(key))
+      // semantic status colors (green/red …) — the HUE carries the meaning; never repaint.
+      // MUST precede the accent checks: a preset's red "negative" is often its 2nd-most-chromatic
+      // color and would otherwise be claimed as accent2 and recolored to the brand hue.
+      next = val;
+    else if (val === pr.accent)
+      next = br.accent; // primary accent → the EXACT brand color
+    else if (pr.accent2 !== pr.accent && val === pr.accent2)
+      next = br.accent2; // exact 2nd accent
+    else if (!ph) {
+      // rgba()/rgb() tint → repaint its rgb with the brand accent, keep alpha (a neutral
+      // overlay is kept). A non-color non-hex value (var(), named) falls through unchanged.
+      next = remapRgbaToAccent(val, br.accent, br.accent2, prAccentHsl, prAccent2Hsl) ?? val;
+    } else if (chroma(val) < 16) {
+      // NEUTRAL source (grey text-ladder, hairline borders) → keep it NEUTRAL. Apply at most a
+      // whisper of the brand hue (sat ≤ 0.06); never the accent's full saturation — that is what
+      // turned the grey ladder into saturated blue.
+      const bh = hexToHsl(br.accent);
+      next = bh ? hslToHex(bh.h, Math.min(ph.s, 0.06), flipL(ph.l)) : val;
+    } else {
+      // chromatic tint → repaint with the nearest brand accent's hue+sat, keep THIS color's
+      // lightness so tint families stay families.
+      const useSecond =
+        pr.accent !== pr.accent2 &&
+        prAccentHsl &&
+        prAccent2Hsl &&
+        hueDist(ph.h, prAccent2Hsl.h) < hueDist(ph.h, prAccentHsl.h);
+      const bh = hexToHsl(useSecond ? br.accent2 : br.accent);
+      next = bh ? hslToHex(bh.h, bh.s, flipL(ph.l)) : val;
+    }
+    if (next !== val) newByKey.set(key, next);
+  }
+  // rewrite only the value of each colors: line; everything else byte-identical.
+  let inBlock = false;
+  md = md
+    .split(/\r?\n/)
+    .map((line) => {
+      if (/^colors:\s*$/.test(line)) {
+        inBlock = true;
+        return line;
+      }
+      if (inBlock && /^\S/.test(line)) inBlock = false;
+      if (!inBlock) return line;
+      const m = line.match(
+        /^(\s+)([\w-]+):\s*(?:"[^"]*"|'[^']*'|#[0-9a-fA-F]{3,8}|rgba?\([^)]*\)|[^#\n]*?)(\s+#.*)?$/,
+      );
+      if (m && newByKey.has(m[2])) return `${m[1]}${m[2]}: "${newByKey.get(m[2])}"${m[3] ?? ""}`;
+      return line;
+    })
+    .join("\n");
+  summary.push(
+    `colors: ${invert ? "INVERTED (dark-mode brand on light preset) · " : ""}dark ${prDark}→${mapDark}, light ${prLight}→${mapLight}, accent ${pr.accent}→${br.accent}` +
+      ` (${newByKey.size}/${presetColors.length} keys repainted${brandColorStats.length ? ", via colorStats" : ""})`,
+  );
+} else {
+  summary.push(
+    brandColors.length
+      ? "colors: preset has no parseable colors — kept"
+      : "colors: no brand colors — preset palette kept",
+  );
+}
+
+// ── font remix ────────────────────────────────────────────────────────────────
+if (brandFonts.length) {
+  const pf = parseFonts(md);
+  const strip = (q) => (q ? q.replace(/^"|"$/g, "") : null);
+  const pDisplay = strip(pf.display);
+  const pBody = strip(pf.body);
+  const pMono = strip(pf.mono);
+  // A monospace brand face is for code / labels / chrome — never the reading display or body.
+  // Split the brand fonts: the primary NON-mono family carries display AND body (the common
+  // single-sans case, e.g. Inter for everything), and a captured mono (Berkeley Mono,
+  // JetBrains Mono…) is routed onto the preset's mono role instead of turning the body
+  // monospace. (Distinct display/body brands still resolve to a clean sans; hand-tune the
+  // display in frame.md if a separate display face is wanted.)
+  const isMonoFont = (n) =>
+    /(?:^|[\s_-])mono(?:[\s_-]|$)|monospace|consol|courier|menlo|monaco|jetbrains|berkeley|space\s*mono|ibm\s*plex\s*mono|sf\s*mono|roboto\s*mono|source\s*code|fira\s*code|geist\s*mono|dm\s*mono/i.test(
+      String(n),
+    );
+  const nonMono = brandFonts.filter((f) => !isMonoFont(f));
+  const monoFonts = brandFonts.filter(isMonoFont);
+  const bDisplay = nonMono[0] ?? brandFonts[0];
+  const bBody = nonMono[0] ?? brandFonts[0];
+  const bMono = monoFonts[0] ?? null;
+  const escRe = (s) => s.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+  // Replace the preset family as a WHOLE WORD/PHRASE everywhere — frontmatter values,
+  // component strings like "Space Grotesk 600", AND prose — case-sensitive with word
+  // boundaries so a single-word family ("Inter") can never corrupt a substring
+  // ("interactive"). Quote-exact replace alone missed names baked into longer strings + prose.
+  const swapFamily = (from, to) => {
+    if (from && to && from !== to) md = md.replace(new RegExp(`\\b${escRe(from)}\\b`, "g"), to);
+  };
+  swapFamily(pDisplay, bDisplay);
+  if (pBody !== pDisplay) swapFamily(pBody, bBody);
+  // route the brand mono onto the preset's mono role (only if the preset has a DISTINCT mono
+  // family — never collapse body/display into mono)
+  if (bMono && pMono && pMono !== pBody && pMono !== pDisplay) swapFamily(pMono, bMono);
+  summary.push(
+    `fonts: display ${pDisplay}→${bDisplay}, body ${pBody}→${bBody}` +
+      (bMono && pMono && pMono !== pBody && pMono !== pDisplay ? `, mono ${pMono}→${bMono}` : ""),
+  );
+} else {
+  summary.push("fonts: no brand fonts — preset fonts kept");
+}
+
+// ── cap type weights to the brand font's available faces ──────────────────────
+// The remix swaps the font FAMILY but keeps the preset's weights; a brand font that ships
+// only e.g. 400/500 would faux-bold every 600/700 heading. Clamp each `typography:` weight
+// to the NEAREST weight the brand font actually provides (tokens.json fonts[].weights).
+if (brandFonts.length && brandFontWeights.length) {
+  const avail = brandFontWeights;
+  const nearest = (n) =>
+    avail.reduce((best, w) => {
+      const dw = Math.abs(w - n),
+        db = Math.abs(best - n);
+      return dw < db || (dw === db && w > best) ? w : best;
+    }, avail[0]);
+  let capped = 0;
+  const cap = (num) => {
+    const n = parseInt(num, 10);
+    if (avail.includes(n)) return String(n);
+    const c = nearest(n);
+    if (c !== n) capped++;
+    return String(c);
+  };
+  let inType = false;
+  md = md
+    .split(/\r?\n/)
+    .map((line) => {
+      if (/^typography:\s*$/.test(line)) {
+        inType = true;
+        return line;
+      }
+      if (inType && /^\S/.test(line)) inType = false;
+      let out = line;
+      // (a) structured `weight: NNN` in the typography ramp
+      if (inType) out = out.replace(/(\bweight:\s*)(\d{3})\b/g, (m, pfx, num) => pfx + cap(num));
+      // (b) a weight baked into a quoted `typography:` component value, e.g.
+      //     cta-button → typography: "Basier Square 600"  (NNN not followed by a unit like px)
+      out = out.replace(
+        /(typography:\s*"[^"]*?\b)(\d{3})\b(?![a-z%])/gi,
+        (m, pfx, num) => pfx + cap(num),
+      );
+      return out;
+    })
+    .join("\n");
+  if (capped)
+    summary.push(`fonts: capped ${capped} type weight(s) to brand faces {${avail.join(", ")}}`);
+}
+
+// ── brand-adaptation note ─────────────────────────────────────────────────────
+// The remix fixes the NORMATIVE frontmatter, but the preset's PROSE still carries its
+// original weight ranges / color-names. Prepend a short "frontmatter is truth" header so a
+// reader (or frame worker) interprets any lingering preset prose THROUGH the brand values —
+// instead of fragile per-sentence prose surgery.
+if (brandFonts.length || (brandColors.length && presetColors.length)) {
+  const bD = brandFonts[0];
+  const bB = brandFonts[1] ?? brandFonts[0];
+  const note =
+    `## Brand adaptation (READ FIRST — the frontmatter is the source of truth)\n\n` +
+    `This is the **${presetName}** preset remixed onto the captured brand. The YAML frontmatter above ` +
+    `(colors · typography · components) is **normative and already correct — use it verbatim.** The prose ` +
+    `below is the ORIGINAL preset's intent; read it THROUGH the frontmatter:\n\n` +
+    (brandFonts.length
+      ? `- **Fonts** — already set to **${bD}** (display) / **${bB}** (body); ignore any preset font name lingering in prose.\n`
+      : "") +
+    (brandFontWeights.length
+      ? `- **Weights** — the brand font ships \`{${brandFontWeights.join(", ")}}\` only; every weight is clamped to these — ignore higher preset weights (e.g. 600/700) in prose.\n`
+      : "") +
+    `- **Colors** — use the frontmatter hex; preset color NAMES in prose (e.g. "cobalt", "cream") mean the remapped brand values.\n`;
+  if (/^# .*$/m.test(md)) md = md.replace(/^# .*$/m, (m) => `${m}\n\n${note}`);
+  else md = `${note}\n${md}`;
+  summary.push("brand-adaptation note prepended");
+}
+
+// ── stage brand font files + emit @font-face ──────────────────────────────────
+// A brand font is rarely a Google font, so renaming the family in frame.md is not enough:
+// nothing loads the actual face. If the capture downloaded font files, copy them to
+// assets/fonts/ under CLEAN, weight-named names (so captions.mjs' family-prefix matcher
+// finds them too) and append a ready-to-paste, ROOT-RELATIVE @font-face block to frame.md.
+if (brandFonts.length) {
+  const norm = (s) =>
+    String(s)
+      .toLowerCase()
+      .replace(/[^a-z0-9]/g, "");
+  const extOf = (f) => (f.match(/\.(woff2|woff|ttf|otf)$/i)?.[1] ?? "").toLowerCase();
+  const FMT = { woff2: "woff2", woff: "woff", ttf: "truetype", otf: "opentype" };
+  const weightInfo = (name) => {
+    const s = name.toLowerCase();
+    if (/black|heavy|ultra|extrabold/.test(s)) return { n: 800, w: "ExtraBold" };
+    if (/semibold|demibold/.test(s)) return { n: 600, w: "SemiBold" };
+    if (/bold/.test(s)) return { n: 700, w: "Bold" };
+    if (/medium/.test(s)) return { n: 500, w: "Medium" };
+    if (/light|thin/.test(s)) return { n: 300, w: "Light" };
+    return { n: 400, w: "Regular" };
+  };
+  const fams = [...new Set(brandFonts)];
+  const srcDirs = [
+    join(hyperframesDir, "capture/assets/fonts"),
+    join(hyperframesDir, "assets/fonts"),
+  ].filter((d) => existsSync(d));
+  const files = [];
+  for (const d of srcDirs)
+    for (const f of readdirSync(d).sort()) if (extOf(f)) files.push({ d, f });
+  // Single family → all font files belong to it (the common captured case, hash-named files
+  // included). Multiple families → assign each file to the longest family key its name contains.
+  const ranked = [...fams].sort((a, b) => norm(b).length - norm(a).length);
+  const famOf = (f) =>
+    fams.length === 1 ? fams[0] : ranked.find((x) => norm(f).includes(norm(x)));
+  const outDir = join(hyperframesDir, "assets/fonts");
+  const faces = [];
+  const stagedNames = new Set();
+  for (const { d, f } of files) {
+    const fam = famOf(f);
+    if (!fam) continue;
+    const { n, w } = weightInfo(f);
+    const clean = `${fam.replace(/[^A-Za-z0-9]/g, "")}-${w}.${extOf(f)}`;
+    if (stagedNames.has(clean)) continue;
+    mkdirSync(outDir, { recursive: true });
+    if (!existsSync(join(outDir, clean))) copyFileSync(join(d, f), join(outDir, clean));
+    stagedNames.add(clean);
+    faces.push(
+      `@font-face{font-family:"${fam}";font-weight:${n};font-style:normal;font-display:block;src:url("assets/fonts/${clean}") format("${FMT[extOf(f)]}");}`,
+    );
+  }
+  if (faces.length) {
+    md +=
+      `\n\n## Font loading (auto-generated)\n\n` +
+      `The brand font ships as local files in \`assets/fonts/\` — do NOT link Google Fonts for it. ` +
+      `Paste this \`<style>\` into every frame's \`<head>\`/\`<template>\` (captions use the same files) ` +
+      `so \`font-family\` resolves in preview, snapshot, and render alike:\n\n` +
+      "```html\n<style>\n" +
+      faces.join("\n") +
+      "\n</style>\n```\n";
+    summary.push(
+      `fonts: staged ${stagedNames.size} face(s) → assets/fonts/ + @font-face in frame.md`,
+    );
+  }
+}
+
+// ── write frame.md ────────────────────────────────────────────────────────────
+const framePath = join(hyperframesDir, "frame.md");
+writeFileSync(framePath, md);
+
+// ── copy caption-skin.html ────────────────────────────────────────────────────
+const presetSkin = join(presetDir, presetName, "caption-skin.html");
+let skinCopied = false;
+if (existsSync(presetSkin)) {
+  const skinDir = join(hyperframesDir, ".hyperframes");
+  mkdirSync(skinDir, { recursive: true });
+  copyFileSync(presetSkin, join(skinDir, "caption-skin.html"));
+  skinCopied = true;
+}
+
+// ── self-validate ─────────────────────────────────────────────────────────────
+const outColors = parseColors(md);
+if (outColors.length !== presetColors.length) {
+  die(`color keys changed (${presetColors.length}→${outColors.length}) — keys must be preserved`);
+}
+const outRoles = semanticColors(outColors);
+const li = lum(outRoles.ink),
+  lc = lum(outRoles.canvas);
+// ink (type) and canvas (ground) must differ enough to READ — in EITHER direction. A
+// light-mode spec has ink darker than canvas; a dark-mode spec (the polarity flip above)
+// the reverse. Assert luminance SEPARATION, not a fixed polarity.
+if (li != null && lc != null && Math.abs(li - lc) < 40) {
+  die(
+    `ink (${outRoles.ink}, lum ${li.toFixed(0)}) and canvas (${outRoles.canvas}, lum ${lc.toFixed(0)}) lack contrast — bad brand mapping`,
+  );
+}
+
+console.log(`✓ build-frame: ${presetName} → ${framePath}`);
+for (const s of summary) console.log(`  ${s}`);
+console.log(
+  `  .hyperframes/caption-skin.html: ${skinCopied ? "copied" : "preset ships none — captions will use the default pill"}`,
+);
+console.log(`  self-check: keys preserved, ink/canvas contrast ok ✓`);
diff --git a/.claude/skills-media/faceless-explainer/scripts/captions.mjs b/.claude/skills-media/faceless-explainer/scripts/captions.mjs
new file mode 100644
index 000000000..1203b57c6
--- /dev/null
+++ b/.claude/skills-media/faceless-explainer/scripts/captions.mjs
@@ -0,0 +1,499 @@
+#!/usr/bin/env node
+// captions.mjs — build the captions sub-composition from STORYBOARD + audio_meta.
+//
+// One mode: `build`. Reads STORYBOARD.md (frame order + durations → cumulative
+// frame starts) + audio_meta.json (voices[].words, frame-relative) → absolute-
+// timed caption groups → writes:
+//   compositions/captions.html  — a self-contained sub-composition the index
+//        assembler mounts on its captions track (data-composition-id="captions").
+//   caption_groups.json         — the computed groups (debug / inspection / --out).
+//   caption-overrides.json      — an empty `[]` shim (silences the captions runtime's
+//        validate-time fetch; only written when captions.html is).
+// No narration / no words → legal skip: nothing written, assemble-index then omits
+// the captions track (it keys off compositions/captions.html existence).
+//
+//   node captions.mjs build --storyboard ./STORYBOARD.md --audio-meta ./audio_meta.json --hyperframes . --out ./caption_groups.json
+//
+// CAPTION LOOK — two sources, picked automatically:
+//   1. PRESET SKIN (preferred). If a project-local `.hyperframes/caption-skin.html`
+//      exists (Step 2 copies the chosen frame-preset's skin into the project), it is
+//      the caption look.
+//      It is a brand-token-strict skin with three reserved holes; this script fills them
+//      and wraps the result in a <template> for the engine:
+//        - `var GROUPS = [];`            → the computed caption groups
+//        - `var DURATION = 0;` + data-duration="0" (and data-width/height="0") → real values
+//        - `<style data-brand-tokens></style>` → :root tokens derived from the project's
+//          frame.md (colors + fonts), mapped to a fixed semantic vocab every skin shares:
+//          --cap-ink / --cap-canvas / --cap-accent / --cap-accent-2 / --font-display /
+//          --font-body, plus --cap-band-top / --cap-band-height (the keep-out band).
+//      So the brand-token overlay from Step 2 flows into the captions automatically.
+//   2. DEFAULT (fallback). No skin file → the built-in Roboto/black pill (buildCaptionsHtml).
+//
+// Grouping mirrors the proven heuristics (frame boundary · sentence-end punct ·
+// silence gap · density-aware word cap); word timings come inline from audio_meta.
+
+import { existsSync, mkdirSync, readdirSync, readFileSync, writeFileSync } from "node:fs";
+import { dirname, join, resolve } from "node:path";
+import { fileURLToPath } from "node:url";
+import { parseStoryboard } from "./lib/storyboard.mjs";
+import { captionBand, parseFormat } from "./lib/dimensions.mjs";
+import { parseColors, parseFonts, semanticColors } from "./lib/tokens.mjs";
+
+const flag = (argv, name, def) => {
+  const i = argv.indexOf(`--${name}`);
+  return i >= 0 && i + 1 < argv.length ? argv[i + 1] : def;
+};
+const r3 = (x) => Number(x.toFixed(3));
+
+// ── grouping params ───────────────────────────────────────────────────────────
+const SILENCE_GAP = 0.18; // s of silence between words → split
+const TAIL_PAD = 0.12; // s the group lingers after its last word
+const SENT_END = /[.?!,;:—]$/;
+const DENSITY_WINDOW = 1.0; // s window for words/sec density
+function wordCap(density) {
+  return density > 3.5 ? 2 : density > 2.5 ? 3 : 4;
+}
+
+function runBuild(argv) {
+  const skip = (reason) => {
+    console.log(`captions: skipped (${reason})`);
+    process.exit(0);
+  };
+  const die = (m) => {
+    console.error(`✗ captions build: ${m}`);
+    process.exit(1);
+  };
+
+  const hyperframesDir = resolve(flag(argv, "hyperframes", "."));
+  const storyboardPath = resolve(flag(argv, "storyboard", join(hyperframesDir, "STORYBOARD.md")));
+  const audioMetaPath = resolve(flag(argv, "audio-meta", join(hyperframesDir, "audio_meta.json")));
+  const outPath = resolve(flag(argv, "out", join(hyperframesDir, "caption_groups.json")));
+  const htmlPath = join(hyperframesDir, "compositions/captions.html");
+  const overridesPath = join(hyperframesDir, "caption-overrides.json");
+  const skinArg = flag(argv, "skin", null);
+  const hiddenSkinPath = join(hyperframesDir, ".hyperframes", "caption-skin.html");
+  const legacySkinPath = join(hyperframesDir, "caption-skin.html");
+  const skinPath = resolve(
+    skinArg ?? (existsSync(hiddenSkinPath) ? hiddenSkinPath : legacySkinPath),
+  );
+  const framePath = resolve(flag(argv, "frame", join(hyperframesDir, "frame.md")));
+
+  if (!existsSync(storyboardPath)) die(`STORYBOARD.md not found at ${storyboardPath}`);
+  const manifest = parseStoryboard(readFileSync(storyboardPath, "utf8"));
+  const { width: W, height: H } = parseFormat(manifest.globals.format);
+
+  if (!existsSync(audioMetaPath)) skip("no audio_meta.json (silent film)");
+  const meta = JSON.parse(readFileSync(audioMetaPath, "utf8"));
+  if (!Array.isArray(meta.voices) || meta.voices.length === 0) skip("no narration");
+
+  // cumulative frame starts (by frame number) + total duration, from STORYBOARD.
+  const startByFrame = new Map();
+  let acc = 0;
+  for (const f of manifest.frames) {
+    if (f.number != null) startByFrame.set(f.number, acc);
+    acc += Number.isFinite(f.durationSeconds) ? f.durationSeconds : 0;
+  }
+  const total = r3(acc);
+
+  // absolute word stream: frame start + frame-relative word timing.
+  const words = [];
+  for (const v of meta.voices) {
+    const base = startByFrame.get(v.frame);
+    if (base == null || !Array.isArray(v.words)) continue;
+    for (const w of v.words) {
+      const text = String(w.text ?? "").trim();
+      if (!text || /^[.?!,;:—–-]+$/.test(text)) continue; // drop empties + bare punctuation
+      if (!isFinite(w.start) || !isFinite(w.end)) continue;
+      words.push({ text, start: r3(base + w.start), end: r3(base + w.end), frame: v.frame });
+    }
+  }
+  words.sort((a, b) => a.start - b.start);
+  if (words.length === 0) skip("no usable words");
+
+  // density at i = words whose start falls within [w.start, w.start + WINDOW).
+  const densityAt = (i) => {
+    const t0 = words[i].start;
+    let n = 0;
+    for (let j = i; j < words.length && words[j].start < t0 + DENSITY_WINDOW; j++) n++;
+    return n / DENSITY_WINDOW;
+  };
+
+  // group: split on frame change / silence gap / word cap; always flush after a
+  // sentence-ending word.
+  const groups = [];
+  let cur = null;
+  for (let i = 0; i < words.length; i++) {
+    const w = words[i];
+    const prev = cur && cur.words[cur.words.length - 1];
+    const crossFrame = cur && w.frame !== cur.frame;
+    const gap = prev && w.start - prev.end > SILENCE_GAP;
+    const full = cur && cur.words.length >= cur.cap;
+    if (!cur || crossFrame || gap || full) {
+      if (cur) groups.push(cur);
+      cur = { frame: w.frame, cap: wordCap(densityAt(i)), words: [] };
+    }
+    cur.words.push(w);
+    if (SENT_END.test(w.text)) {
+      groups.push(cur);
+      cur = null;
+    }
+  }
+  if (cur) groups.push(cur);
+
+  // finalize: ids, start/end (tail-padded, clamped < next group's start), text.
+  const finalized = groups.map((g, gi) => {
+    const first = g.words[0];
+    const last = g.words[g.words.length - 1];
+    const next = groups[gi + 1];
+    let end = r3(last.end + TAIL_PAD);
+    if (next && next.words[0].start < end) end = r3(next.words[0].start);
+    return {
+      id: `caption-group-${gi}`,
+      frame: g.frame,
+      start: r3(first.start),
+      end,
+      text: g.words.map((w) => w.text).join(" "),
+      words: g.words.map((w, wi) => ({
+        id: `caption-word-${gi}-${wi}`,
+        text: w.text,
+        start: r3(w.start),
+        end: r3(w.end),
+      })),
+    };
+  });
+
+  // ── write caption_groups.json ──
+  mkdirSync(dirname(outPath), { recursive: true });
+  writeFileSync(
+    outPath,
+    JSON.stringify({ total_duration_s: total, width: W, height: H, groups: finalized }, null, 2),
+  );
+
+  // ── write compositions/captions.html (preset skin if present, else default) ──
+  mkdirSync(dirname(htmlPath), { recursive: true });
+  let source;
+  if (existsSync(skinPath)) {
+    const tokens = frameTokensCss(framePath, H);
+    const faces = brandFontFaces(framePath, hyperframesDir);
+    const fonts = existsSync(framePath) ? parseFonts(readFileSync(framePath, "utf8")) : {};
+    writeFileSync(
+      htmlPath,
+      buildFromSkin(
+        readFileSync(skinPath, "utf8"),
+        finalized,
+        total,
+        W,
+        H,
+        tokens,
+        die,
+        faces,
+        fonts,
+      ),
+    );
+    source = `preset skin (${skinPath.replace(hyperframesDir + "/", "")})`;
+  } else {
+    writeFileSync(htmlPath, buildCaptionsHtml(finalized, total, W, H));
+    source = "default (built-in pill)";
+  }
+
+  // ── write caption-overrides.json shim ──
+  // Atomic create-if-absent: `wx` throws if the file already exists (which we
+  // ignore) — no existsSync→writeFileSync TOCTOU gap.
+  try {
+    writeFileSync(overridesPath, "[]\n", { flag: "wx" });
+  } catch {
+    /* overrides shim already present */
+  }
+
+  console.log(
+    `✓ captions build: ${finalized.length} group(s) from ${words.length} words → compositions/captions.html (total ${total}s) · skin: ${source}`,
+  );
+}
+
+// ── preset-skin path ────────────────────────────────────────────────────────
+// Fill the skin's three reserved holes + the root's 0-placeholders, then wrap the
+// fragment in a <template> (the engine clones template contents only). One generic
+// fill works for every preset's skin — no per-skin transform.
+//
+// Every preset's skin is authored against ITS OWN fonts/metrics (broadside→Barlow @
+// line-height 1.02, capsule→Bodoni, …). When the project's brand font differs (it
+// almost always does), three things must be reconciled so ANY skin renders correctly
+// for ANY brand — done here generically, not per-project:
+//   · @font-face for the brand fonts (else the renderer can't supply them → fallback)
+//   · the skin's preset-font FALLBACK literals (var(--font-x, "Barlow")) repointed to
+//     the brand family, so no undeclared font name trips font_family_without_font_face
+//   · a metric safety net: a heavier brand font overflows a tight preset line-height,
+//     so the active-word highlight clips — a line-height floor + word padding fixes it
+//   · data-composition-id + dimensions on the <template> root (skins lead with
+//     <script>/<style>, so the root element must carry the id, not the first child)
+function buildFromSkin(skin, groups, total, W, H, tokens, die, faces = "", fonts = {}) {
+  const fillOnce = (src, re, repl, label) => {
+    const n = (src.match(re) || []).length;
+    if (n !== 1) die(`caption-skin.html: expected exactly one ${label}, found ${n}`);
+    return src.replace(re, () => repl);
+  };
+  let out = skin;
+  // Strip HTML doc-comments first. A skin's authoring comment can contain tag-like text
+  // (broadside's literally says "<template>"), which the linter's tag scanner then picks
+  // up as the root element → false root_missing_composition_id / root_missing_dimensions.
+  // The comments are preview/authoring docs, not needed in the generated composition.
+  // Strip in a fixpoint loop, not a single global pass: removing one comment can
+  // re-form a marker from a nested/partial pair (e.g. <!--<!---->-->), which one
+  // pass misses — CodeQL flags the single replace as incomplete sanitization.
+  for (let prev = ""; prev !== out; ) {
+    prev = out;
+    out = out.replace(/<!--[\s\S]*?-->/g, "");
+  }
+  // brand :root tokens + @font-face for the brand fonts, both into the reserved hole
+  out = fillOnce(
+    out,
+    /<style data-brand-tokens>\s*<\/style>/,
+    `<style data-brand-tokens>\n${faces ? faces + "\n" : ""}${tokens}\n    </style>`,
+    "<style data-brand-tokens></style> hole",
+  );
+  // Resolve the skin's font-family var()s to the brand family LITERAL. Two reasons:
+  //  (1) the linter's used-font scanner naively comma-splits, so var(--x, "Brand") yields
+  //      junk tokens ('var(--x', 'brand")') that never match the @font-face → a false
+  //      font_family_without_font_face; a plain "Brand" literal matches the @font-face.
+  //  (2) it drops the preset's own fallback name (Barlow / IBM Plex Mono / …), which has
+  //      no @font-face in this project. The :root token stays for any other consumer.
+  if (fonts.display)
+    out = out.replace(/var\(\s*--font-display\s*(?:,\s*"[^"]*"\s*)?\)/g, fonts.display);
+  if (fonts.body) out = out.replace(/var\(\s*--font-body\s*(?:,\s*"[^"]*"\s*)?\)/g, fonts.body);
+  out = fillOnce(
+    out,
+    /var GROUPS = \[\];/,
+    `var GROUPS = ${JSON.stringify(groups)};`,
+    "`var GROUPS = [];` hole",
+  );
+  out = fillOnce(out, /var DURATION = 0;/, `var DURATION = ${total};`, "`var DURATION = 0;` hole");
+  out = fillOnce(out, /data-duration="0"/, `data-duration="${total}"`, '`data-duration="0"` hole');
+  out = fillOnce(out, /data-width="0"/, `data-width="${W}"`, '`data-width="0"` hole');
+  out = fillOnce(out, /data-height="0"/, `data-height="${H}"`, '`data-height="0"` hole');
+  // font-robust safety net — appended last so it wins the cascade over the skin's own
+  // (preset-font-tuned) line-height. Kept SNUG (1.1) so the plate hugs the text. NO extra
+  // word/pill padding: inspect's `text_box_overflow` on the highlight words is a cosmetic
+  // false-positive here (heavy-glyph ink slightly exceeds the line box, but there's no
+  // overflow:hidden — nothing is clipped); zeroing it would need an airy line-height that
+  // balloons the pill, which is worse. Override only if a brand font genuinely clips.
+  out += "\n<style>\n  .caption-line { line-height: 1.1 !important; }\n</style>";
+  return `<template id="captions-template" data-composition-id="captions" data-width="${W}" data-height="${H}">\n${out.trim()}\n</template>\n`;
+}
+
+export { buildFromSkin };
+
+// @font-face for the brand display/body fonts, matched from the project's font dirs
+// (staged assets/fonts first, else capture/assets/fonts) by family-name prefix, with
+// weight parsed from the filename. Paths are relative to compositions/captions.html.
+// Returns "" when frame.md or font files are absent (then the skin's fallback applies).
+function brandFontFaces(framePath, hyperframesDir) {
+  if (!existsSync(framePath)) return "";
+  const { display, body } = parseFonts(readFileSync(framePath, "utf8"));
+  const families = [
+    ...new Set([display, body].filter(Boolean).map((f) => f.replace(/^"|"$/g, ""))),
+  ];
+  if (!families.length) return "";
+  const dirs = [
+    // ROOT-RELATIVE — compositions are served with the project root as their base URL, so a
+    // "../" prefix escapes the root (lint: invalid_parent_traversal_in_asset_path) and 404s in
+    // Studio/preview. Mirror what the frame workers use for images.
+    { abs: join(hyperframesDir, "assets/fonts"), rel: "assets/fonts" },
+    { abs: join(hyperframesDir, "capture/assets/fonts"), rel: "capture/assets/fonts" },
+  ].filter((d) => existsSync(d.abs));
+  const weightOf = (n) => {
+    const s = n.toLowerCase();
+    if (/black|heavy|ultra|extrabold/.test(s)) return 800;
+    if (/semibold|demibold/.test(s)) return 600; // before /bold/ — "demibold" contains "bold"
+    if (/bold/.test(s)) return 700;
+    if (/medium/.test(s)) return 500;
+    if (/light|thin/.test(s)) return 300;
+    return 400; // book / regular / roman
+  };
+  const fmtOf = (f) =>
+    /\.woff2$/i.test(f)
+      ? "woff2"
+      : /\.woff$/i.test(f)
+        ? "woff"
+        : /\.ttf$/i.test(f)
+          ? "truetype"
+          : "opentype";
+  // Normalize away ALL non-alphanumerics (spaces, underscores, hyphens) on BOTH the
+  // family name and the filename. Real font files use "_" / "-" as word separators
+  // ("TT_Norms_Pro_Bold.woff2"), so stripping only whitespace never matched them — the
+  // family key "ttnormspro" failed `startsWith` against "tt_norms_pro_bold", and the
+  // function silently returned "" → captions shipped with NO @font-face for any
+  // underscore/hyphen-named brand font (e.g. TT Norms Pro), which is exactly the
+  // font_family_without_font_face bug.
+  const norm = (s) => s.toLowerCase().replace(/[^a-z0-9]/g, "");
+  const faces = [];
+  const seen = new Set();
+  const claimed = new Set(); // each file is claimed by the MOST SPECIFIC family only
+  // Match the longest family key first so "TT Norms Pro" can't swallow the files that
+  // belong to "TT Norms Pro Mono" (its key is a prefix of the longer one's).
+  const ranked = [...families].sort((a, b) => norm(b).length - norm(a).length);
+  for (const fam of ranked) {
+    const key = norm(fam);
+    for (const d of dirs) {
+      let files = [];
+      try {
+        files = readdirSync(d.abs);
+      } catch {
+        continue;
+      }
+      for (const f of files.sort()) {
+        if (!/\.(woff2|woff|ttf|otf)$/i.test(f)) continue;
+        if (claimed.has(f)) continue; // a more specific family already took this file
+        if (!norm(f.replace(/\.(woff2|woff|ttf|otf)$/i, "")).startsWith(key)) continue;
+        const w = weightOf(f);
+        const dedup = `${fam}-${w}`;
+        if (seen.has(dedup)) continue; // one src per weight; assets/fonts wins over capture
+        seen.add(dedup);
+        claimed.add(f);
+        faces.push(
+          `      @font-face { font-family: '${fam}'; src: url('${d.rel}/${f}') format('${fmtOf(f)}'); font-weight: ${w}; font-display: block; }`,
+        );
+      }
+    }
+  }
+  // Loud signal instead of a silent "". If frame.md named a brand font but no file
+  // matched, the caption text WILL fall back to a generic font in the render — surface
+  // the cause here (at build time) rather than letting it surface 2 steps later as a
+  // font_family_without_font_face lint error disconnected from its root cause.
+  if (!faces.length) {
+    const where = dirs.length
+      ? dirs.map((d) => d.rel).join(" / ")
+      : "assets/fonts or capture/assets/fonts (neither exists)";
+    console.warn(
+      `  ⚠ captions: frame.md names font ${families.map((f) => `"${f}"`).join(", ")} ` +
+        `but no matching .woff2/.woff/.ttf/.otf was found in ${where} — captions will fall back ` +
+        `(text may render in the wrong font). Stage a font file whose name starts with the family ` +
+        `(e.g. "TT Norms Pro" → TT_Norms_Pro_Bold.woff2) so it ships with the project.`,
+    );
+  }
+  return faces.join("\n");
+}
+
+// frame.md colors:/typography: → a :root token block, mapped to the fixed semantic
+// vocab every preset skin references. Robust to per-preset key names: colors are
+// matched by name, then by luminance. Brand-token overlay (Step 2) flows through
+// because the values come from the project's frame.md. No frame.md → band vars only.
+function frameTokensCss(framePath, H) {
+  const band = captionBand(H);
+  const out = [];
+  if (existsSync(framePath)) {
+    const md = readFileSync(framePath, "utf8");
+    const colors = parseColors(md);
+    for (const [k, v] of colors) out.push(`      --${k}: ${v};`); // raw, for completeness
+    const sem = semanticColors(colors);
+    if (sem.ink) out.push(`      --cap-ink: ${sem.ink};`);
+    if (sem.canvas) out.push(`      --cap-canvas: ${sem.canvas};`);
+    if (sem.accent) out.push(`      --cap-accent: ${sem.accent};`);
+    if (sem.accent2) out.push(`      --cap-accent-2: ${sem.accent2};`);
+    const { display, body } = parseFonts(md);
+    if (display) out.push(`      --font-display: ${display}, system-ui, serif;`);
+    if (body) out.push(`      --font-body: ${body}, system-ui, sans-serif;`);
+  }
+  out.push(`      --cap-band-top: ${band.bandTopY}px;`);
+  out.push(`      --cap-band-height: ${band.bandHeight}px;`);
+  return `      :root {\n${out.join("\n")}\n      }`;
+}
+
+// ── default path (no preset skin) ─────────────────────────────────────────────
+// Self-contained captions sub-composition. The <template> holds the band container
+// + style AND the <script> (the HyperFrames loader only executes scripts INSIDE the
+// cloned template — a sibling <script> after </template> never runs, so the timeline
+// never registers and captions render blank). The script builds per-word spans and a
+// paused, seek-safe GSAP timeline (opacity for group show/hide, a quick color tween
+// per word for the karaoke highlight — no className flips, no JS state) and ends each
+// group with a hard tl.set kill so an exit can't get stuck. gsap is loaded via CDN
+// inside the template (matching the frame compositions). Band = captionBand(H).
+function buildCaptionsHtml(groups, total, W, H) {
+  const band = captionBand(H);
+  const fs = Math.round(H * 0.038);
+  const pad = Math.round(fs * 0.4);
+  return `<template id="captions-template">
+  <div
+    data-composition-id="captions"
+    data-width="${W}"
+    data-height="${H}"
+    data-duration="${total}"
+    id="captions-root"
+  >
+    <div id="cap"></div>
+  </div>
+  <style>
+    #captions-root {
+      position: absolute;
+      inset: 0;
+      pointer-events: none;
+    }
+#cap {
+      position: absolute;
+      left: 0;
+      right: 0;
+      top: ${band.bandTopY}px;
+      height: ${band.bandHeight}px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+.caption-group {
+      position: absolute;
+      max-width: 80%;
+      padding: ${pad}px ${Math.round(pad * 1.8)}px;
+      background: rgba(0, 0, 0, 0.72);
+      border-radius: ${Math.round(fs * 0.3)}px;
+      font-family: Roboto, sans-serif;
+      font-weight: 700;
+      font-size: ${fs}px;
+      line-height: 1.25;
+      text-align: center;
+      color: #fff;
+      opacity: 0;
+    }
+.caption-word {
+      color: rgba(255, 255, 255, 0.55);
+    }
+  </style>
+  <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js" integrity="sha384-sG0Hv1tP1lZCk9KQmrIbY/XNwi+OY84GQqhMscbnsoBFqAz8KNCil1kvfL3Hbbk2" crossorigin="anonymous"></script>
+  <script>
+    (function () {
+      var GROUPS = ${JSON.stringify(groups)};
+      var cap = document.getElementById("cap");
+      var tl = gsap.timeline({ paused: true });
+      GROUPS.forEach(function (g) {
+        var el = document.createElement("div");
+        el.className = "caption-group";
+        g.words.forEach(function (w) {
+          var s = document.createElement("span");
+          s.className = "caption-word";
+          s.textContent = w.text + " ";
+          el.appendChild(s);
+        });
+        cap.appendChild(el);
+        tl.fromTo(el, { opacity: 0 }, { opacity: 1, duration: 0.18, overwrite: "auto" }, g.start);
+        tl.to(el, { opacity: 0, duration: 0.12, overwrite: "auto" }, g.end);
+        tl.set(el, { opacity: 0, visibility: "hidden" }, g.end + 0.12); // deterministic hard kill
+        g.words.forEach(function (w, i) {
+          tl.to(el.children[i], { color: "#ffffff", duration: 0.06 }, w.start);
+        });
+      });
+      tl.to({}, { duration: ${total} }, 0); // full-span anchor
+      window.__timelines = window.__timelines || {};
+      window.__timelines["captions"] = tl;
+    })();
+  </script>
+</template>
+`;
+}
+
+if (process.argv[1] && resolve(process.argv[1]) === fileURLToPath(import.meta.url)) {
+  const sub = process.argv[2];
+  if (sub === "build" || sub === undefined) runBuild(process.argv.slice(sub === "build" ? 3 : 2));
+  else {
+    console.error(
+      "usage: node captions.mjs build [--storyboard …] [--audio-meta …] [--hyperframes .]",
+    );
+    process.exit(2);
+  }
+}
diff --git a/.claude/skills-media/faceless-explainer/scripts/captions.test.mjs b/.claude/skills-media/faceless-explainer/scripts/captions.test.mjs
new file mode 100644
index 000000000..f2724ea42
--- /dev/null
+++ b/.claude/skills-media/faceless-explainer/scripts/captions.test.mjs
@@ -0,0 +1,50 @@
+import assert from "node:assert/strict";
+import { readdirSync, readFileSync } from "node:fs";
+import test from "node:test";
+import { fileURLToPath } from "node:url";
+import { buildFromSkin } from "./captions.mjs";
+
+const presetsDir = fileURLToPath(
+  new URL("../../hyperframes-creative/frame-presets/", import.meta.url),
+);
+const skins = readdirSync(presetsDir, { withFileTypes: true })
+  .filter((entry) => entry.isDirectory())
+  .map((entry) => ({
+    name: entry.name,
+    source: readFileSync(
+      new URL(
+        `../../hyperframes-creative/frame-presets/${entry.name}/caption-skin.html`,
+        import.meta.url,
+      ),
+      "utf8",
+    ),
+  }))
+  .filter(({ source }) => source.includes(".caption-word.is-active"));
+
+for (const canvas of ["#f7f3e8", "#111827"]) {
+  for (const skin of skins) {
+    test(`${skin.name} preserves word-state rules on ${canvas}`, () => {
+      const active = skin.source.match(/\.caption-word\.is-active\s*\{[^}]*\}/s)?.[0];
+      const spoken = skin.source.match(/\.caption-word\.is-spoken\s*\{[^}]*\}/s)?.[0];
+      assert.ok(active, "skin must define an active-word rule");
+      assert.ok(spoken, "skin must define a spoken-word rule");
+
+      const output = buildFromSkin(
+        skin.source,
+        [],
+        1,
+        1920,
+        1080,
+        `:root { --cap-canvas: ${canvas}; --cap-ink: #111111; --cap-accent: #ffcc00; }`,
+        (message) => {
+          throw new Error(message);
+        },
+      );
+
+      assert.ok(output.includes(active));
+      assert.ok(output.includes(spoken));
+      assert.equal(output.match(/\.caption-word\.is-active\s*\{/g)?.length, 1);
+      assert.equal(output.match(/\.caption-word\.is-spoken\s*\{/g)?.length, 1);
+    });
+  }
+}
diff --git a/.claude/skills-media/faceless-explainer/scripts/lib/assets.mjs b/.claude/skills-media/faceless-explainer/scripts/lib/assets.mjs
new file mode 100644
index 000000000..0f06ac5da
--- /dev/null
+++ b/.claude/skills-media/faceless-explainer/scripts/lib/assets.mjs
@@ -0,0 +1,55 @@
+// assets.mjs — stage frame-named capture assets into assets/.
+// Shared by stage-assets.mjs (Step 4 close, BEFORE the frame workers run) and
+// assemble-index.mjs (Step 5, idempotent backstop). Only assets a frame names
+// in `asset_candidates` are staged; unnamed assets never reach the project.
+// asset_candidates value form: "assets/<basename> — desc; assets/… — …".
+
+import { copyFileSync, existsSync, mkdirSync } from "node:fs";
+import { basename, join } from "node:path";
+
+export function basenamesFromCandidates(value) {
+  if (typeof value !== "string") return [];
+  return value
+    .split(";")
+    .map((seg) => seg.split(/\s+[—–-]\s+/)[0].trim()) // strip the " — description"
+    .filter(Boolean)
+    .map((p) => basename(p.replace(/^assets\//, "")));
+}
+
+// Copy each frame's asset_candidates from capture/{assets,assets/videos,
+// screenshots} into assets/. Already-staged files are left as is (first-wins),
+// so calling this twice is safe. Returns { staged, wanted, anomalies }.
+export function stageAssets({ hyperframesDir, frames }) {
+  const wanted = new Set();
+  for (const f of frames) {
+    for (const b of basenamesFromCandidates(f.extra?.asset_candidates)) wanted.add(b);
+  }
+  const captureDirs = [
+    join(hyperframesDir, "capture/assets"),
+    join(hyperframesDir, "capture/assets/videos"), // videos download into a subdir
+    join(hyperframesDir, "capture/screenshots"),
+  ];
+  const assetsDir = join(hyperframesDir, "assets");
+  const anomalies = [];
+  let staged = 0;
+  if (wanted.size > 0) {
+    mkdirSync(assetsDir, { recursive: true });
+    for (const b of wanted) {
+      const dest = join(assetsDir, b);
+      if (existsSync(dest)) {
+        staged++;
+        continue;
+      } // first-wins / already staged
+      const src = captureDirs.map((d) => join(d, b)).find((p) => existsSync(p));
+      if (src) {
+        copyFileSync(src, dest);
+        staged++;
+      } else {
+        anomalies.push(
+          `asset "${b}" named by a frame but not found under capture/ — frame will 404 it`,
+        );
+      }
+    }
+  }
+  return { staged, wanted, anomalies };
+}
diff --git a/.claude/skills-media/faceless-explainer/scripts/lib/dimensions.mjs b/.claude/skills-media/faceless-explainer/scripts/lib/dimensions.mjs
new file mode 100644
index 000000000..a6be70bcf
--- /dev/null
+++ b/.claude/skills-media/faceless-explainer/scripts/lib/dimensions.mjs
@@ -0,0 +1,45 @@
+// dimensions.mjs — canvas size + caption-band geometry for the video
+// pipeline. Single source of truth = the STORYBOARD frontmatter `format` global
+// ("1920x1080" / "1080x1920" / "1080x1080", or a named orientation). Every
+// script and the index assembler reads the size from here; none hardcodes it.
+
+// Named orientation presets. Square/portrait are 1080-based so they share the
+// long-edge pixel budget with landscape (same render-cost ballpark).
+export const ORIENTATION_PRESETS = {
+  landscape: { width: 1920, height: 1080 }, // 16:9 — default
+  portrait: { width: 1080, height: 1920 }, // 9:16 — reels / shorts / TikTok
+  square: { width: 1080, height: 1080 }, // 1:1 — feed
+};
+
+export const DEFAULT_DIMENSIONS = ORIENTATION_PRESETS.landscape;
+
+function sane(w, h) {
+  return Number.isFinite(w) && Number.isFinite(h) && w >= 240 && h >= 240 && w <= 8192 && h <= 8192;
+}
+
+// Parse a STORYBOARD `format` global into { width, height, source }. Accepts
+// "WxH" (e.g. "1920x1080"; `x` or `×`, any inner spacing) or a named orientation;
+// falls back to landscape so a storyboard with a missing/garbled format still
+// renders (no behavior change vs the old landscape lock).
+export function parseFormat(format) {
+  const s = typeof format === "string" ? format.trim().toLowerCase() : "";
+  if (ORIENTATION_PRESETS[s]) return { ...ORIENTATION_PRESETS[s], source: `orientation=${s}` };
+  const m = s.match(/^(\d+)\s*[x×]\s*(\d+)$/);
+  if (m) {
+    const w = parseInt(m[1] ?? "", 10);
+    const h = parseInt(m[2] ?? "", 10);
+    if (sane(w, h)) return { width: w, height: h, source: "format" };
+  }
+  return { ...DEFAULT_DIMENSIONS, source: "default(landscape)" };
+}
+
+// Caption band geometry, derived from canvas height: the bottom ~16.67% (180px
+// at h=1080). Frame content must end `safetyPx` above the band top. Holds even
+// when captions are disabled (bottom-edge consistency).
+export const CAPTION_BAND_FRACTION = 0.1667;
+export function captionBand(height, safetyPx = 20) {
+  const h = Number.isFinite(height) ? height : DEFAULT_DIMENSIONS.height;
+  const bandHeight = Math.round(h * CAPTION_BAND_FRACTION);
+  const bandTopY = h - bandHeight; // foreground must end at/above this y
+  return { bandHeight, bandTopY, foregroundMaxY: bandTopY - safetyPx };
+}
diff --git a/.claude/skills-media/faceless-explainer/scripts/lib/pad-frame-duration.mjs b/.claude/skills-media/faceless-explainer/scripts/lib/pad-frame-duration.mjs
new file mode 100644
index 000000000..91471151f
--- /dev/null
+++ b/.claude/skills-media/faceless-explainer/scripts/lib/pad-frame-duration.mjs
@@ -0,0 +1,36 @@
+// pad-frame-duration.mjs — keeps a frame's own #root/clip data-duration in
+// sync with the padded index.html wrapper duration transitions.mjs computes.
+//
+// The frame's OWN internal file declares its #root/clip data-duration to the
+// STORYBOARD's content-only length (frame-worker.md: duration is "fixed
+// upstream"). When an outgoing transition pads the index.html WRAPPER's
+// data-duration to cover the transition tail, the frame's own internal
+// duration is left short — the render engine clip-gates the sub-composition's
+// visible content at that shorter value, so content vanishes abruptly at
+// content-end instead of fading gracefully through the wrapper's extended
+// fade-out tween. Pad the frame's own file to match so both durations agree.
+
+import { readFileSync, writeFileSync } from "node:fs";
+import { resolve } from "node:path";
+
+export function padFrameInternalDuration(hyperframesDir, frameSrc, frameId, newDuration) {
+  const framePath = resolve(hyperframesDir, frameSrc);
+  let html;
+  try {
+    html = readFileSync(framePath, "utf8");
+  } catch (err) {
+    if (err?.code === "ENOENT") return;
+    throw err;
+  }
+  const tagRe = /<[a-z][\w:-]*\s[^<>]*?>/gi;
+  let m;
+  while ((m = tagRe.exec(html)) !== null) {
+    const tag = m[0];
+    if (!tag.includes(`data-composition-id="${frameId}"`)) continue;
+    if (!/data-duration="[\d.]+"/.test(tag)) continue;
+    const newTag = tag.replace(/data-duration="[\d.]+"/, `data-duration="${newDuration}"`);
+    if (newTag === tag) return;
+    writeFileSync(framePath, html.slice(0, m.index) + newTag + html.slice(m.index + tag.length));
+    return;
+  }
+}
diff --git a/.claude/skills-media/faceless-explainer/scripts/lib/storyboard.mjs b/.claude/skills-media/faceless-explainer/scripts/lib/storyboard.mjs
new file mode 100644
index 000000000..7c821dcba
--- /dev/null
+++ b/.claude/skills-media/faceless-explainer/scripts/lib/storyboard.mjs
@@ -0,0 +1,249 @@
+// storyboard.mjs — vendored lenient parser for STORYBOARD.md.
+//
+// Faithful plain-JS port of @hyperframes/core/storyboard
+// (packages/core/src/storyboard/parseStoryboard.ts). Vendored because skills
+// ship standalone: installed via `npx skills add`, a skill's scripts can't reach
+// the monorepo's core package, and the core export points at .ts source that
+// `node` (which runs these scripts) can't load. CANONICAL contract = the core
+// parser + skills/hyperframes-core/references/storyboard-format.md; keep this in
+// lockstep. Behavior: never throws, accepts freeform narrative, recognizes
+// Frame/Beat/Scene headings at H2/H3, preserves unknown keys verbatim under
+// `extra` (keys lowercased). Pure node — no deps.
+
+export const FRAME_STATUSES = ["outline", "built", "animated"];
+export const DEFAULT_FRAME_STATUS = "outline";
+
+// Detection-only frame heading (ends at the keyword); ReDoS-hardened — keep as-is.
+const FRAME_HEADING_RE = /^(#{2,3})[ \t]+(?:frame|beat|scene)\b/i;
+const FRAME_TITLE_SEP_RE = /^[\s.:—-]+/;
+const HEADING_LEVEL_RE = /^(#{1,6})\s+/;
+const META_RE = /^\s*[-*]\s+([A-Za-z_][\w-]*)\s*:\s*(.+?)\s*$/;
+const LEADING_INT_RE = /^(\d+)/;
+const DURATION_NUM_RE = /(\d+(?:\.\d+)?)/;
+const TRANSITION_KEYS = new Set(["transition_in", "transitionin", "transition"]);
+const SCENE_KEYS = new Set(["scene", "description", "summary", "caption"]);
+export const VOICEOVER_ALIASES = ["voiceover", "vo", "voice_over", "narration"];
+const VOICEOVER_KEYS = new Set(VOICEOVER_ALIASES);
+
+export function parseStoryboard(source) {
+  const warnings = [];
+  const { globals, bodyStartLine, body } = parseFrontmatter(source, warnings);
+  const frames = parseFrames(body, bodyStartLine, warnings);
+  return { globals, frames, warnings };
+}
+
+function emptyGlobals() {
+  return { extra: {} };
+}
+
+function isFrameStatus(value) {
+  return FRAME_STATUSES.includes(value);
+}
+
+// ── Frontmatter ─────────────────────────────────────────────────────────────
+function findFrontmatterRange(lines, warnings) {
+  let start = 0;
+  while (start < lines.length && (lines[start] ?? "").trim() === "") start++;
+  if ((lines[start] ?? "").trim() !== "---") return null;
+  for (let i = start + 1; i < lines.length; i++) {
+    if ((lines[i] ?? "").trim() === "---") return { start, end: i };
+  }
+  warnings.push({
+    message: "Frontmatter opening '---' has no closing '---'; treating whole file as body.",
+    line: start + 1,
+  });
+  return null;
+}
+
+function parseFrontmatterEntries(lines, start, end, warnings) {
+  const globals = emptyGlobals();
+  for (let i = start + 1; i < end; i++) {
+    const raw = lines[i] ?? "";
+    if (raw.trim() === "") continue;
+    const colon = raw.indexOf(":");
+    if (colon === -1) {
+      warnings.push({
+        message: `Ignored non key:value frontmatter line: "${raw.trim()}"`,
+        line: i + 1,
+      });
+      continue;
+    }
+    const key = raw.slice(0, colon).trim().toLowerCase();
+    assignGlobal(globals, key, stripQuotes(raw.slice(colon + 1).trim()));
+  }
+  return globals;
+}
+
+function parseFrontmatter(source, warnings) {
+  const lines = source.split(/\r?\n/);
+  const range = findFrontmatterRange(lines, warnings);
+  if (!range) return { globals: emptyGlobals(), bodyStartLine: 1, body: source };
+  const globals = parseFrontmatterEntries(lines, range.start, range.end, warnings);
+  const body = lines.slice(range.end + 1).join("\n");
+  return { globals, bodyStartLine: range.end + 2, body };
+}
+
+function assignGlobal(globals, key, value) {
+  switch (key) {
+    case "format":
+      globals.format = value;
+      break;
+    case "message":
+      globals.message = value;
+      break;
+    case "arc":
+      globals.arc = value;
+      break;
+    case "audience":
+      globals.audience = value;
+      break;
+    default:
+      globals.extra[key] = value;
+  }
+}
+
+// ── Frames ──────────────────────────────────────────────────────────────────
+function openFrameSection(line, headingLine) {
+  const match = FRAME_HEADING_RE.exec(line);
+  if (!match) return null;
+  const headingText = line.slice(match[0].length).replace(FRAME_TITLE_SEP_RE, "").trim();
+  return { headingText, headingLine, level: (match[1] ?? "##").length, lines: [] };
+}
+
+function endsFrameSection(line, current) {
+  if (!current) return false;
+  const heading = HEADING_LEVEL_RE.exec(line);
+  return heading !== null && (heading[1] ?? "").length <= current.level;
+}
+
+function parseFrames(body, bodyStartLine, warnings) {
+  const lines = body.split(/\r?\n/);
+  const sections = [];
+  let current = null;
+  for (let i = 0; i < lines.length; i++) {
+    const line = lines[i] ?? "";
+    const opened = openFrameSection(line, bodyStartLine + i);
+    if (opened) {
+      sections.push(opened);
+      current = opened;
+    } else if (endsFrameSection(line, current)) {
+      current = null;
+    } else if (current) {
+      current.lines.push(line);
+    }
+  }
+  return sections.map((section, idx) => buildFrame(section, idx + 1, warnings));
+}
+
+function buildFrame(section, index, warnings) {
+  const frame = { index, status: DEFAULT_FRAME_STATUS, narrative: "", extra: {} };
+  const { number, title } = parseHeading(section.headingText);
+  if (number !== undefined) frame.number = number;
+  if (title) frame.title = title;
+
+  const narrativeLines = [];
+  for (const line of section.lines) {
+    const meta = META_RE.exec(line);
+    if (meta) {
+      applyMeta(
+        frame,
+        (meta[1] ?? "").toLowerCase(),
+        (meta[2] ?? "").trim(),
+        section.headingLine,
+        warnings,
+      );
+    } else {
+      narrativeLines.push(line);
+    }
+  }
+  frame.narrative = narrativeLines.join("\n").trim();
+  return frame;
+}
+
+function parseHeading(text) {
+  if (!text) return {};
+  const intMatch = LEADING_INT_RE.exec(text);
+  if (!intMatch) return { title: text };
+  const number = Number.parseInt(intMatch[1] ?? "", 10);
+  const rest = text
+    .slice((intMatch[0] ?? "").length)
+    .replace(/^[\s.:—-]+/, "")
+    .trim();
+  return { number, title: rest || undefined };
+}
+
+// Dispatch a recognized metadata key to its field, else stash under `extra`.
+// Mirrors core's META_SETTERS map exactly (direct keys + alias sets).
+function applyMeta(frame, key, value, headingLine, warnings) {
+  switch (key) {
+    case "duration":
+      applyDuration(frame, value, headingLine, warnings);
+      return;
+    case "status":
+      applyStatus(frame, value, headingLine, warnings);
+      return;
+    case "poster":
+      applyPoster(frame, value);
+      return;
+    case "src":
+      frame.src = value;
+      return;
+  }
+  if (TRANSITION_KEYS.has(key)) {
+    frame.transitionIn = value;
+    return;
+  }
+  if (SCENE_KEYS.has(key)) {
+    frame.scene = value;
+    return;
+  }
+  if (VOICEOVER_KEYS.has(key)) {
+    frame.voiceover = stripQuotes(value);
+    return;
+  }
+  frame.extra[key] = value;
+}
+
+function applyPoster(frame, value) {
+  const num = DURATION_NUM_RE.exec(value);
+  if (num) frame.poster = Number.parseFloat(num[1] ?? "");
+}
+
+function applyDuration(frame, value, headingLine, warnings) {
+  frame.duration = value;
+  const num = DURATION_NUM_RE.exec(value);
+  if (num) {
+    frame.durationSeconds = Number.parseFloat(num[1] ?? "");
+    return;
+  }
+  warnings.push({
+    message: `Frame ${frame.index}: could not parse duration "${value}".`,
+    line: headingLine,
+    frameIndex: frame.index,
+  });
+}
+
+function applyStatus(frame, value, headingLine, warnings) {
+  const normalized = value.toLowerCase();
+  if (isFrameStatus(normalized)) {
+    frame.status = normalized;
+    return;
+  }
+  frame.extra.status = value;
+  warnings.push({
+    message: `Frame ${frame.index}: unknown status "${value}"; defaulting to "${DEFAULT_FRAME_STATUS}".`,
+    line: headingLine,
+    frameIndex: frame.index,
+  });
+}
+
+function stripQuotes(value) {
+  if (value.length >= 2) {
+    const first = value[0];
+    const last = value[value.length - 1];
+    if ((first === '"' && last === '"') || (first === "'" && last === "'")) {
+      return value.slice(1, -1);
+    }
+  }
+  return value;
+}
diff --git a/.claude/skills-media/faceless-explainer/scripts/lib/tokens.mjs b/.claude/skills-media/faceless-explainer/scripts/lib/tokens.mjs
new file mode 100644
index 000000000..c2f332129
--- /dev/null
+++ b/.claude/skills-media/faceless-explainer/scripts/lib/tokens.mjs
@@ -0,0 +1,211 @@
+// tokens.mjs — shared brand-token parsing + semantic role mapping for frame.md /
+// FRAME.md. Used by build-frame.mjs (remix a preset onto brand tokens) and
+// captions.mjs (derive caption colors from frame.md). One mapping → frames and
+// captions stay consistent. Pure node.
+
+// Collect `key: value` pairs under the top-level `colors:` block (until dedent).
+export function parseColors(md) {
+  const out = [];
+  let inBlock = false;
+  for (const line of md.split(/\r?\n/)) {
+    if (/^colors:\s*$/.test(line)) {
+      inBlock = true;
+      continue;
+    }
+    if (!inBlock) continue;
+    if (/^\S/.test(line)) break; // dedent to a top-level key → end of block
+    const m = line.match(
+      /^\s+([\w-]+):\s*(?:"([^"]+)"|'([^']+)'|(#[0-9a-fA-F]{3,8}|rgba?\([^)]*\)|[^#\s][^#\n]*?))\s*(?:#.*)?$/,
+    );
+    if (m) out.push([m[1], (m[2] ?? m[3] ?? m[4]).trim()]);
+  }
+  return out;
+}
+
+// relative luminance of a #rrggbb (null for non-hex like rgba()).
+export function lum(v) {
+  const m = /^#?([0-9a-fA-F]{6})$/.exec(String(v).trim());
+  if (!m) return null;
+  const n = parseInt(m[1], 16);
+  return 0.2126 * ((n >> 16) & 255) + 0.7152 * ((n >> 8) & 255) + 0.0722 * (n & 255);
+}
+
+// chroma (max−min channel) of a #rrggbb — a cheap "how colorful" proxy; −1 for non-hex.
+export function chroma(v) {
+  const m = /^#?([0-9a-fA-F]{6})$/.exec(String(v).trim());
+  if (!m) return -1;
+  const n = parseInt(m[1], 16);
+  const r = (n >> 16) & 255,
+    g = (n >> 8) & 255,
+    b = n & 255;
+  return Math.max(r, g, b) - Math.min(r, g, b);
+}
+
+// Browser user-agent default colors for links / visited links. These leak into a
+// capture from any UNSTYLED <a> and are NOT brand colors — but being pure & saturated
+// they beat a real accent on chroma alone. Never let one become the accent.
+export const UA_DEFAULT_COLORS = new Set(
+  ["#0000EE", "#0000FF", "#0000CC", "#1A0DAB", "#551A8B", "#EE0000"].map((c) => c.toUpperCase()),
+);
+
+// Semantic STATUS roles (green "positive", red "negative"/"error", amber "warning" …). Their HUE
+// carries the meaning, so they are never a brand ACCENT — a status red is frequently the most
+// chromatic color in a palette (e.g. #dc2626 chroma 182 beats a deep-blue accent #1E40AF chroma
+// 145) and would otherwise win a pure chroma ranking, painting captions/highlights the error red.
+// build-frame.mjs uses this same key set to protect status colors during the preset→brand remix.
+export const STATUS_ROLE_KEY =
+  /(?:^|[-_])(?:positive|negative|success|error|warning|danger|good|bad|up|down|info|neutral|alert|caution|critical)(?:[-_]|$)/i;
+
+// Pick the brand ACCENT — never by raw chroma alone, never a UA-default link color.
+// Priority:
+//   1) with capture colorStats → the colorful color that RECURS across the UI. The brand
+//      accent shows up in MANY roles (link text + icon + button + badge), whereas a one-off
+//      CTA fill appears in just one. So rank chromatic (chroma>40) candidates by role
+//      diversity first, then total prevalence, then interactive use, then chroma. This keeps
+//      a pervasive brand color (e.g. an indigo used everywhere) ahead of a single bright
+//      button fill (e.g. a lime used once) — the old "top interactiveBg" rule picked the
+//      latter. Requiring interactiveBg>0 is dropped so a text/icon-only accent can still win.
+//   2) no stats → most chromatic color AFTER removing UA defaults + `exclude`.
+// A stray default link color (e.g. #0000EE) can win under neither path.
+export function pickAccent(stats, colors, exclude = []) {
+  const ban = new Set([...exclude, ...UA_DEFAULT_COLORS].map((c) => String(c).toUpperCase()));
+  const ok = (h) => /^#[0-9a-fA-F]{6}$/.test(String(h)) && !ban.has(String(h).toUpperCase());
+  // Prominence rank from the (frequency-ordered) `colors` palette: index 0 = most used.
+  // A saturated color sitting at the TAIL is almost always a one-off (a single CTA fill),
+  // not the brand accent — capture colorStats counts are too sparse to tell these apart
+  // (e.g. Linear's indigo and a lime CTA both register count≈1), but palette ORDER does.
+  const rank = new Map((colors ?? []).map((h, i) => [String(h).toUpperCase(), i]));
+  const prom = (h) => (rank.has(String(h).toUpperCase()) ? rank.get(String(h).toUpperCase()) : 1e9);
+  if (Array.isArray(stats) && stats.length) {
+    const roles = (s) =>
+      ((s.interactiveBg || 0) > 0 ? 1 : 0) +
+      ((s.textCount || 0) > 0 ? 1 : 0) +
+      ((s.bgCount || 0) > 0 ? 1 : 0);
+    const a = stats
+      .filter((s) => ok(s?.hex) && chroma(s.hex) > 40)
+      .sort(
+        (x, y) =>
+          roles(y) - roles(x) || // used in MORE roles (link+icon+button) = the brand accent
+          prom(x.hex) - prom(y.hex) || // earlier in the palette = more prominent
+          (y.count || 0) - (x.count || 0) ||
+          (y.interactiveBg || 0) - (x.interactiveBg || 0) ||
+          chroma(y.hex) - chroma(x.hex),
+      );
+    if (a.length) return a[0].hex;
+  }
+  const c = (colors ?? [])
+    .map(String)
+    .filter(ok)
+    .sort((x, y) => chroma(y) - chroma(x));
+  return c[0];
+}
+
+// Derive brand roles from rich capture colorStats (areaBg / interactiveBg / textCount /
+// maxArea) — by semantic FUNCTION, not luminance/chroma proxies. Returns null when stats
+// are unusable, so the caller can fall back. canvas = the color painting the most real
+// background area (the page ground, dark or light); ink = the dominant text color that
+// actually contrasts with the canvas; accent via pickAccent.
+export function brandRolesFromStats(stats, colorsInOrder) {
+  if (!Array.isArray(stats) || !stats.length) return null;
+  const v = stats.filter((s) => /^#[0-9a-fA-F]{6}$/.test(s?.hex || ""));
+  if (!v.length) return null;
+  const canvas = [...v].sort(
+    (a, b) =>
+      (b.areaBg || 0) - (a.areaBg || 0) ||
+      (b.maxArea || 0) - (a.maxArea || 0) ||
+      (b.bgCount || 0) - (a.bgCount || 0),
+  )[0]?.hex;
+  // pass the frequency-ordered palette (tokens.colors) so pickAccent can use palette
+  // PROMINENCE — colorStats counts alone are too sparse to rank rare accents.
+  const accent = pickAccent(v, colorsInOrder ?? v.map((s) => s.hex), [canvas]);
+  if (!canvas || !accent) return null;
+  const cl = lum(canvas) ?? 0;
+  const ink =
+    [...v]
+      .filter((s) => s.hex !== canvas && s.hex !== accent)
+      .sort((a, b) => (b.textCount || 0) - (a.textCount || 0))
+      .find((s) => Math.abs((lum(s.hex) ?? 0) - cl) > 64)?.hex ??
+    (cl > 128 ? "#000000" : "#FFFFFF");
+  const accent2 =
+    pickAccent(v, colorsInOrder ?? v.map((s) => s.hex), [canvas, ink, accent]) ?? accent;
+  return { ink, canvas, accent, accent2 };
+}
+
+// Map a list of [key, value] colors to semantic roles. ink = a dark/ink-named
+// color (else darkest); canvas = a paper/cream/white-named color (else lightest);
+// accents = whatever's left, ranked by chroma (the loudest color is almost always
+// the brand accent) — UA-default link colors AND semantic status colors (positive/
+// negative/error…) excluded so neither a stray <a> color nor a status red ever wins.
+// For an unkeyed brand list, pass synthetic keys — name matching simply no-ops and it
+// falls back to luminance/chroma, which is what we want. NOTE: when capture colorStats
+// exist, prefer brandRolesFromStats() — it picks by function, not these proxies.
+export function semanticColors(colors) {
+  if (!colors.length) return {};
+  const named = (re) => colors.find(([k]) => re.test(k));
+  const hexes = colors.filter(([, v]) => lum(v) != null);
+  const byLum = [...hexes].sort((a, b) => (lum(a[1]) ?? 1e9) - (lum(b[1]) ?? 1e9));
+  const pick = (m, fallback) => (m ? m[1] : fallback ? fallback[1] : undefined);
+  // "ink" must be a whole word-segment so "soft-pink"/"pink" don't match it.
+  const ink = pick(
+    named(/(?:^|[-_])ink(?:[-_]|$)|black|charcoal|^text(?:-dark)?$|outline|noir/i),
+    byLum[0] ?? colors[0],
+  );
+  const canvas = pick(
+    named(/cream|paper|canvas|white|bg|ground|surface|base|sand|parchment|off-?white|bone/i),
+    byLum[byLum.length - 1] ?? colors[colors.length - 1],
+  );
+  const accents = colors
+    .filter(
+      ([k, v]) =>
+        v !== ink &&
+        v !== canvas &&
+        !UA_DEFAULT_COLORS.has(String(v).toUpperCase()) &&
+        !STATUS_ROLE_KEY.test(k), // a status red/green carries meaning by hue — never an accent
+    )
+    .sort((a, b) => chroma(b[1]) - chroma(a[1]))
+    .map(([, v]) => v);
+  return { ink, canvas, accent: accents[0] ?? ink, accent2: accents[1] ?? accents[0] ?? ink };
+}
+
+// Collect role→fontFamily under the top-level `typography:` block; pick a display
+// + body family from the usual role names. Returns quoted families (or null).
+export function parseFonts(md) {
+  const roles = {};
+  let inBlock = false;
+  for (const line of md.split(/\r?\n/)) {
+    if (/^typography:\s*$/.test(line)) {
+      inBlock = true;
+      continue;
+    }
+    if (!inBlock) continue;
+    if (/^\S/.test(line)) break;
+    const m = line.match(/^\s+([\w-]+):\s*\{[^}]*fontFamily:\s*"([^"]+)"/);
+    if (m) roles[m[1]] = m[2];
+  }
+  const q = (s) => (s ? `"${s}"` : null);
+  const body = roles.body ?? roles.subtitle ?? Object.values(roles)[0];
+  const display =
+    roles.display ??
+    roles.headline ??
+    roles["card-headline"] ??
+    roles["section-headline"] ??
+    roles["quote-display"] ??
+    roles.h1 ??
+    roles.h2 ??
+    roles.title ??
+    roles.hero ??
+    body;
+  // the monospace / chrome family (code, tags, ticks, page numbers) — so the remix can
+  // route a captured brand mono (Berkeley Mono, JetBrains Mono…) onto this role instead
+  // of the reading body. null when the preset has no distinct mono role.
+  const mono =
+    roles.mono ??
+    roles["mono-tag"] ??
+    roles["mono-chrome"] ??
+    roles["mono-tick"] ??
+    roles.code ??
+    roles.data ??
+    roles.pagenum ??
+    null;
+  return { display: q(display), body: q(body), mono: q(mono) };
+}
diff --git a/.claude/skills-media/faceless-explainer/scripts/lib/transition-registry.mjs b/.claude/skills-media/faceless-explainer/scripts/lib/transition-registry.mjs
new file mode 100644
index 000000000..a0451793a
--- /dev/null
+++ b/.claude/skills-media/faceless-explainer/scripts/lib/transition-registry.mjs
@@ -0,0 +1,38 @@
+// transition-registry.mjs — loader for this skill's vendored transition registry
+// (./transitions.json). The registry is the curated Tier-B subset (transform /
+// opacity / filter on the two frame clip wrappers `#el-<id>`, no overlay DOM) +
+// each type's GSAP template. Vendored into the skill so it ships standalone; the
+// recipes originate from the shared catalog skills/hyperframes-animation/
+// transitions/ (css-*.md) — keep them in step if those shared recipes change.
+
+import { readFileSync } from "node:fs";
+import { resolve, dirname } from "node:path";
+import { fileURLToPath } from "node:url";
+
+const here = dirname(fileURLToPath(import.meta.url));
+export const DEFAULT_REGISTRY_PATH = resolve(here, "./transitions.json");
+
+let _cache = null;
+
+export function loadTransitionRegistry(registryPath = DEFAULT_REGISTRY_PATH) {
+  if (_cache && _cache.path === registryPath) return _cache.data;
+  let data;
+  try {
+    data = JSON.parse(readFileSync(registryPath, "utf8"));
+  } catch (e) {
+    throw new Error(`transition registry not loadable at ${registryPath}: ${e.message}`);
+  }
+  if (!Array.isArray(data.transitions) || data.transitions.length === 0) {
+    throw new Error(`transition registry ${registryPath} has no transitions[]`);
+  }
+  _cache = { path: registryPath, data };
+  return data;
+}
+
+// Convenience: a Map name -> transition record.
+export function transitionsByName(registryPath = DEFAULT_REGISTRY_PATH) {
+  const data = loadTransitionRegistry(registryPath);
+  const map = new Map();
+  for (const t of data.transitions) map.set(t.name, t);
+  return map;
+}
diff --git a/.claude/skills-media/faceless-explainer/scripts/lib/transitions.json b/.claude/skills-media/faceless-explainer/scripts/lib/transitions.json
new file mode 100644
index 000000000..ab1c4b9d7
--- /dev/null
+++ b/.claude/skills-media/faceless-explainer/scripts/lib/transitions.json
@@ -0,0 +1,71 @@
+{
+  "_comment": "Vendored transition registry for the product-launch workflow — the curated Tier-B subset (transform/opacity/filter on the two frame clip wrappers #el-<id>, no overlay DOM, no per-frame cooperation). Each type carries its GSAP template; the transitions.mjs injector stamps it onto window.__timelines[\"main\"]. Recipes originate from the shared catalog skills/hyperframes-animation/transitions/ (css-*.md) — keep in step if those change. Token placeholders the injector substitutes: __OLD__ (#el-<from>), __NEW__ (#el-<to>), __T__ (overlap-start s), __DUR__ (this boundary's duration), __DX__/__DXIN__ (horizontal travel + incoming offset), __DY__/__DYIN__ (vertical).",
+  "transitions": [
+    {
+      "name": "crossfade",
+      "energy": "any",
+      "default_duration_s": 0.5,
+      "directions": [],
+      "source": "css-dissolve.md",
+      "gsap_template": [
+        "tl.to(__OLD__, { opacity: 0, duration: __DUR__, ease: \"power2.inOut\" }, __T__);",
+        "tl.fromTo(__NEW__, { opacity: 0 }, { opacity: 1, duration: __DUR__, ease: \"power2.inOut\" }, __T__);"
+      ]
+    },
+    {
+      "name": "blur-crossfade",
+      "energy": "calm",
+      "default_duration_s": 0.6,
+      "directions": [],
+      "source": "css-dissolve.md",
+      "note": "Default when the two frames' #root backgrounds differ a lot — the blur masks the background-color clash a plain crossfade would expose.",
+      "gsap_template": [
+        "tl.to(__OLD__, { filter: \"blur(10px)\", scale: 1.03, opacity: 0, duration: __DUR__, ease: \"power2.inOut\" }, __T__);",
+        "tl.fromTo(__NEW__, { filter: \"blur(10px)\", scale: 0.97, opacity: 0 }, { filter: \"blur(0px)\", scale: 1, opacity: 1, duration: __DUR__, ease: \"power2.inOut\" }, __T__);"
+      ]
+    },
+    {
+      "name": "push-slide",
+      "energy": "medium",
+      "default_duration_s": 0.5,
+      "directions": ["LEFT", "RIGHT", "UP", "DOWN"],
+      "default_direction": "LEFT",
+      "source": "css-push.md",
+      "note": "Directional. The injector picks __DX__/__DY__ from the direction and emits the horizontal OR vertical pair (not both).",
+      "gsap_template_horizontal": [
+        "tl.to(__OLD__, { x: __DX__, duration: __DUR__, ease: \"power3.inOut\" }, __T__);",
+        "tl.fromTo(__NEW__, { x: __DXIN__, opacity: 1 }, { x: 0, duration: __DUR__, ease: \"power3.inOut\" }, __T__);"
+      ],
+      "gsap_template_vertical": [
+        "tl.to(__OLD__, { y: __DY__, duration: __DUR__, ease: \"power3.inOut\" }, __T__);",
+        "tl.fromTo(__NEW__, { y: __DYIN__, opacity: 1 }, { y: 0, duration: __DUR__, ease: \"power3.inOut\" }, __T__);"
+      ]
+    },
+    {
+      "name": "zoom-through",
+      "energy": "high",
+      "default_duration_s": 0.4,
+      "directions": [],
+      "source": "css-scale.md",
+      "gsap_template": [
+        "tl.to(__OLD__, { scale: 2.5, opacity: 0, filter: \"blur(8px)\", duration: __DUR__, ease: \"power3.in\" }, __T__);",
+        "tl.fromTo(__NEW__, { scale: 0.5, opacity: 0, filter: \"blur(8px)\" }, { scale: 1, opacity: 1, filter: \"blur(0px)\", duration: __DUR__, ease: \"power3.out\" }, __T__);"
+      ]
+    },
+    {
+      "name": "squeeze",
+      "energy": "medium",
+      "default_duration_s": 0.4,
+      "directions": [],
+      "source": "css-push.md",
+      "note": "Old compresses to a vertical line on the left edge; new expands from the right edge. Incoming starts off (scaleX 0) so its higher-track stacking is harmless.",
+      "gsap_template": [
+        "tl.to(__OLD__, { scaleX: 0, transformOrigin: \"left center\", duration: __DUR__, ease: \"power3.inOut\" }, __T__);",
+        "tl.fromTo(__NEW__, { scaleX: 0, transformOrigin: \"right center\", opacity: 1 }, { scaleX: 1, transformOrigin: \"right center\", duration: __DUR__, ease: \"power3.inOut\" }, __T__);"
+      ]
+    }
+  ],
+  "default_high_energy": "zoom-through",
+  "default_calm": "blur-crossfade",
+  "max_duration_s": 2.0
+}
diff --git a/.claude/skills-media/faceless-explainer/scripts/transitions.mjs b/.claude/skills-media/faceless-explainer/scripts/transitions.mjs
new file mode 100644
index 000000000..2c2c568ea
--- /dev/null
+++ b/.claude/skills-media/faceless-explainer/scripts/transitions.mjs
@@ -0,0 +1,380 @@
+#!/usr/bin/env node
+// transitions.mjs — inter-frame transition injector + verifier for the video workflow.
+//
+//   inject  — read STORYBOARD frame order + each frame's transition_in, overlap
+//             the frame clip wrappers in index.html, and stamp the GSAP template.
+//   verify  — deterministic gate over the injector's output.
+//
+// transition_in (written by story-design on the INCOMING frame) names a registry
+// type directly: crossfade | blur-crossfade | push-slide | zoom-through | squeeze,
+// optionally "<type> <DIR>" / "<type> <N>s" (e.g. "push-slide LEFT", "crossfade
+// 0.4s"). `cut` / `none` / empty ⇒ hard cut (no overlap, no stamp).
+//
+// Mechanics — EXTEND-OUTGOING-ONLY (keeps voice/SFX/captions synced; their timing
+// is keyed to the original frame start). At boundary i→i+1 (type = the incoming
+// frame's transition_in): extend ONLY the outgoing wrapper's data-duration by
+// `dur` so it holds its final frame across the window; do NOT move any data-start;
+// the incoming — already present from the cut on a higher track — fades/pushes in
+// over it. Then 0/1-ping-pong ALL frame clips' data-track-index (adjacent
+// overlapping wrappers never share a track — lint timeline_track_too_dense) and
+// stamp the token-substituted GSAP template into __timelines["main"] at T =
+// incoming start. captions(2)/voice(10)/bgm(11)/sfx(20+) are never touched.
+//
+//   node transitions.mjs inject --storyboard ./STORYBOARD.md --hyperframes .
+//   node transitions.mjs verify --storyboard ./STORYBOARD.md --index ./index.html
+
+import { existsSync, readFileSync, writeFileSync } from "node:fs";
+import { join, resolve } from "node:path";
+import { parseStoryboard } from "./lib/storyboard.mjs";
+import { parseFormat } from "./lib/dimensions.mjs";
+import { loadTransitionRegistry, transitionsByName } from "./lib/transition-registry.mjs";
+import { padFrameInternalDuration } from "./lib/pad-frame-duration.mjs";
+
+const flag = (argv, name, def) => {
+  const i = argv.indexOf(`--${name}`);
+  return i >= 0 && i + 1 < argv.length ? argv[i + 1] : def;
+};
+const NO_TRANSITION = new Set(["cut", "none", ""]);
+const r3 = (x) => Number(x.toFixed(3));
+
+// transition_in → { type, direction?, dur? } | null (hard cut).
+function parseTransitionIn(raw) {
+  const s = (raw ?? "").trim();
+  if (NO_TRANSITION.has(s.toLowerCase())) return null;
+  const parts = s.split(/\s+/);
+  const spec = { type: parts[0].toLowerCase() };
+  for (const p of parts.slice(1)) {
+    const m = p.match(/^(\d+(?:\.\d+)?)s?$/);
+    if (m) spec.dur = Number(m[1]);
+    else spec.direction = p.toUpperCase();
+  }
+  return spec;
+}
+
+// Mounted STORYBOARD frames present in index.html, in document order: { id, frame }.
+function mountedFramesInOrder(manifest, html) {
+  const out = [];
+  for (const f of manifest.frames) {
+    if (!f.src) continue;
+    const id = f.src
+      .split("/")
+      .pop()
+      .replace(/\.html?$/i, "");
+    if (html.includes(`id="el-${id}"`)) out.push({ id, frame: f });
+  }
+  return out;
+}
+
+// Frame clip wrappers parsed out of index.html (ids carry hyphens; excludes
+// el-captions and audio by keying off the known frame-id set). The id is matched
+// from anywhere in the tag's attribute list — never assume it is the first attribute
+// (the index assembler emits data-hf-id before id, so an id-first regex finds nothing
+// and inject crashes on the empty clip map).
+function parseFrameClips(html, frameIds) {
+  const clipRe = /<div\b([^>]*)><\/div>/g;
+  const clips = new Map();
+  let m;
+  while ((m = clipRe.exec(html)) !== null) {
+    const attrs = m[1];
+    const idm = attrs.match(/\bid="el-([A-Za-z0-9_-]+)"/);
+    if (!idm || !frameIds.has(idm[1])) continue;
+    const num = (re) => {
+      const x = attrs.match(re);
+      return x ? Number(x[1]) : null;
+    };
+    clips.set(idm[1], {
+      id: idm[1],
+      block: m[0],
+      start: num(/data-start="([\d.]+)"/),
+      duration: num(/data-duration="([\d.]+)"/),
+      track: num(/data-track-index="(\d+)"/) ?? 0,
+    });
+  }
+  return clips;
+}
+
+// The host wrapper is extended across an outgoing transition, so the mounted
+// frame must remain visually populated for the same local-time window. Extend
+// the frame root and every non-audio timed element that reached the original
+// storyboard boundary. This also repairs worker files whose root was already
+// inflated while their ground/content clips still ended at the synced duration.
+function extendFrameTail(hyperframesDir, frame, baseDuration, targetDuration, die) {
+  if (!frame?.src || targetDuration <= baseDuration) return;
+  const framePath = join(hyperframesDir, frame.src);
+  let html;
+  try {
+    html = readFileSync(framePath, "utf8");
+  } catch {
+    die(`outgoing frame file not found at ${framePath}`);
+  }
+
+  const compId = frame.src
+    .split("/")
+    .pop()
+    .replace(/\.html?$/i, "");
+  const EPS = 0.011;
+  let foundRoot = false;
+  let extended = 0;
+  const rewritten = html.replace(/<([A-Za-z][\w:-]*)\b([^>]*)>/g, (tag, name, attrs) => {
+    const durationMatch = attrs.match(/\bdata-duration="([\d.]+)"/);
+    if (!durationMatch) return tag;
+    const duration = Number(durationMatch[1]);
+    if (!Number.isFinite(duration)) return tag;
+
+    const compositionMatch = attrs.match(/\bdata-composition-id="([^"]+)"/);
+    if (compositionMatch?.[1] === compId && !foundRoot) {
+      foundRoot = true;
+      return tag.replace(/\bdata-duration="[\d.]+"/, `data-duration="${targetDuration}"`);
+    }
+
+    if (name.toLowerCase() === "audio") return tag;
+    const startMatch = attrs.match(/\bdata-start="([\d.]+)"/);
+    if (!startMatch) return tag;
+    const start = Number(startMatch[1]);
+    const end = start + duration;
+    if (end < baseDuration - EPS || end >= targetDuration - EPS) return tag;
+    extended++;
+    return tag.replace(/\bdata-duration="[\d.]+"/, `data-duration="${r3(targetDuration - start)}"`);
+  });
+
+  if (!foundRoot) die(`${frame.src} has no data-composition-id="${compId}" root`);
+  writeFileSync(framePath, rewritten);
+  console.log(
+    `  ${compId}: extended root + ${extended} tail clip(s) ${baseDuration}s→${targetDuration}s`,
+  );
+}
+
+// Resolve a transition_in spec to a registry record (calm default on unknown).
+function resolveRecord(spec, byName, reg, warn) {
+  let rec = byName.get(spec.type);
+  if (!rec) {
+    rec = byName.get(reg.default_calm);
+    warn(`transition_in "${spec.type}" not in registry — using ${reg.default_calm}`);
+  }
+  return rec;
+}
+function resolveDur(spec, rec, reg) {
+  let dur = spec.dur ?? rec.default_duration_s ?? 0.5;
+  return Math.min(dur, reg.max_duration_s ?? 2.0);
+}
+
+// GSAP lines for one transition record (token substitution).
+function buildGsap(rec, fromId, toId, dur, T, direction, canvasW, canvasH, die) {
+  const subs = {
+    __OLD__: `"#el-${fromId}"`,
+    __NEW__: `"#el-${toId}"`,
+    __T__: String(T),
+    __DUR__: String(dur),
+  };
+  let template;
+  if (rec.directions && rec.directions.length > 0) {
+    const dir = (direction || rec.default_direction || rec.directions[0]).toUpperCase();
+    const vertical = dir === "UP" || dir === "DOWN";
+    template = vertical ? rec.gsap_template_vertical : rec.gsap_template_horizontal;
+    if (!template)
+      die(`transition ${rec.name}: missing ${vertical ? "vertical" : "horizontal"} template`);
+    if (vertical) {
+      const dy = dir === "UP" ? -canvasH : canvasH;
+      subs.__DY__ = String(dy);
+      subs.__DYIN__ = String(-dy);
+    } else {
+      const dx = dir === "LEFT" ? -canvasW : canvasW;
+      subs.__DX__ = String(dx);
+      subs.__DXIN__ = String(-dx);
+    }
+  } else {
+    template = rec.gsap_template;
+    if (!template) die(`transition ${rec.name}: missing gsap_template`);
+  }
+  return template.map((line) => {
+    let out = line;
+    for (const [k, v] of Object.entries(subs)) out = out.split(k).join(v);
+    return out;
+  });
+}
+
+function runInject(argv) {
+  const hyperframesDir = resolve(flag(argv, "hyperframes", "."));
+  const storyboardPath = resolve(flag(argv, "storyboard", join(hyperframesDir, "STORYBOARD.md")));
+  const indexPath = join(hyperframesDir, "index.html");
+  const die = (msg) => {
+    console.error(`✗ transitions inject: ${msg}`);
+    process.exit(1);
+  };
+
+  if (!existsSync(storyboardPath)) die(`STORYBOARD.md not found at ${storyboardPath}`);
+
+  const manifest = parseStoryboard(readFileSync(storyboardPath, "utf8"));
+  const { width: CW, height: CH } = parseFormat(manifest.globals.format);
+  const reg = loadTransitionRegistry();
+  const byName = transitionsByName();
+
+  // Read directly and handle ENOENT here, rather than an existsSync precheck —
+  // the check→write pair (write-back below) is a TOCTOU race CodeQL flags.
+  let html = "";
+  try {
+    html = readFileSync(indexPath, "utf8");
+  } catch {
+    die(`index.html not found at ${indexPath} — run assemble-index.mjs first`);
+  }
+  const order = mountedFramesInOrder(manifest, html);
+  if (order.length === 0) die("no frame clips found in index.html");
+  const frameIds = new Set(order.map((x) => x.id));
+  const clips = parseFrameClips(html, frameIds);
+
+  const gsapLines = [];
+  const applied = [];
+  for (let i = 1; i < order.length; i++) {
+    const spec = parseTransitionIn(order[i].frame.transitionIn);
+    if (!spec) continue; // hard cut
+    const incoming = clips.get(order[i].id);
+    const outgoing = clips.get(order[i - 1].id);
+    const rec = resolveRecord(spec, byName, reg, (m) =>
+      console.error(`  ! frame ${order[i].id}: ${m}`),
+    );
+    const dur = resolveDur(spec, rec, reg);
+    const T = r3(incoming.start); // cut = incoming start (frames tile)
+    const baseDuration = outgoing.duration;
+    outgoing.duration = r3(baseDuration + dur); // extend outgoing only
+    extendFrameTail(hyperframesDir, order[i - 1].frame, baseDuration, outgoing.duration, die);
+    padFrameInternalDuration(
+      hyperframesDir,
+      order[i - 1].frame.src,
+      outgoing.id,
+      outgoing.duration,
+    );
+    gsapLines.push(
+      ...buildGsap(rec, outgoing.id, incoming.id, dur, T, spec.direction, CW, CH, die),
+    );
+    applied.push({ from: outgoing.id, to: incoming.id, type: rec.name, dur, T });
+  }
+
+  if (applied.length === 0) {
+    console.log(`✓ transitions inject: 0 transitions (all cuts) — index.html unchanged`);
+    return;
+  }
+
+  // 0/1 ping-pong all frame clips in play order.
+  const ordered = [...clips.values()].sort((a, b) => a.start - b.start || a.id.localeCompare(b.id));
+  ordered.forEach((c, i) => {
+    c.track = i % 2;
+  });
+
+  // rewrite each clip block: start unchanged; duration possibly extended; track ping-ponged.
+  for (const c of clips.values()) {
+    const nb = c.block
+      .replace(/data-duration="[\d.]+"/, `data-duration="${c.duration}"`)
+      .replace(/data-track-index="\d+"/, `data-track-index="${c.track}"`);
+    html = html.replace(c.block, nb);
+  }
+
+  // stamp the GSAP after the master timeline anchor.
+  const anchor = 'window.__timelines["main"] = gsap.timeline({ paused: true });';
+  if (!html.includes(anchor)) die("master timeline anchor not found in index.html");
+  // The transition tweens alone leave window.__timelines["main"] spanning only the
+  // last transition (e.g. 24.7s), shorter than the real composition. The Studio
+  // reads main.duration() as its master duration and parses clips against it, so a
+  // short master collapses its timeline (clips dropped, duration wrong, blank stage)
+  // — the render engine is unaffected (it trusts the root data-duration attr). Stamp
+  // a full-span anchor so main.duration() == composition total. Mirrors the
+  // `tl.to({}, { duration })` anchor captions.html already uses.
+  const rootDurMatch = html.match(/data-composition-id="main"[^>]*?data-duration="([\d.]+)"/);
+  const totalDur = rootDurMatch ? Number(rootDurMatch[1]) : null;
+  const block = [
+    anchor,
+    "      // ── frame transitions (injected by transitions.mjs) ──",
+    '      (function () { var tl = window.__timelines["main"];',
+    ...gsapLines.map((l) => "        " + l),
+    ...(totalDur
+      ? [
+          `        tl.to({}, { duration: ${totalDur} }, 0); // full-span anchor — main.duration() == composition total (Studio master duration)`,
+        ]
+      : []),
+    "      })();",
+  ].join("\n");
+  html = html.replace(anchor, block);
+
+  writeFileSync(indexPath, html);
+  console.log(`✓ transitions inject: ${applied.length} transition(s) stamped into index.html`);
+  for (const a of applied) console.log(`  ${a.from}→${a.to}: ${a.type} ${a.dur}s @ T=${a.T}s`);
+  const tracks = ordered
+    .map((c) => `${c.id}[t${c.track} ${c.start}→${r3(c.start + c.duration)}]`)
+    .join(" ");
+  console.log(`  tracks: ${tracks}`);
+}
+
+function runVerify(argv) {
+  const hyperframesDir = resolve(flag(argv, "hyperframes", "."));
+  const storyboardPath = resolve(flag(argv, "storyboard", join(hyperframesDir, "STORYBOARD.md")));
+  const indexPath = resolve(flag(argv, "index", join(hyperframesDir, "index.html")));
+  const bail = (msg) => {
+    console.error(`✗ transitions verify: ${msg}`);
+    process.exit(1);
+  };
+
+  if (!existsSync(storyboardPath)) bail("STORYBOARD.md not found");
+  if (!existsSync(indexPath)) bail("index.html not found");
+
+  const manifest = parseStoryboard(readFileSync(storyboardPath, "utf8"));
+  const html = readFileSync(indexPath, "utf8");
+  const order = mountedFramesInOrder(manifest, html);
+  const frameIds = new Set(order.map((x) => x.id));
+  const clips = parseFrameClips(html, frameIds);
+
+  const EPS = 0.011;
+  const overlaps = (a, b) =>
+    a.start < b.start + b.duration - EPS && b.start < a.start + a.duration - EPS;
+  const fail = [];
+
+  // (4) global no same-track overlap (the lint invariant).
+  const all = [...clips.values()];
+  for (let i = 0; i < all.length; i++)
+    for (let j = i + 1; j < all.length; j++) {
+      const a = all[i];
+      const b = all[j];
+      if (a.track === b.track && overlaps(a, b))
+        fail.push(`same-track overlap: ${a.id}[t${a.track}] & ${b.id}[t${b.track}]`);
+    }
+
+  const bm = html.match(/frame transitions \(injected[\s\S]*?\}\)\(\);/);
+  const txBlock = bm ? bm[0] : "";
+
+  let expected = 0;
+  for (let i = 1; i < order.length; i++) {
+    const spec = parseTransitionIn(order[i].frame.transitionIn);
+    if (!spec) continue;
+    expected++;
+    const to = clips.get(order[i].id);
+    const from = clips.get(order[i - 1].id);
+    if (!to || !from) {
+      fail.push(`boundary ${order[i - 1].id}→${order[i].id}: wrapper missing`);
+      continue;
+    }
+    if (!txBlock.includes(`"#el-${from.id}"`) || !txBlock.includes(`"#el-${to.id}"`))
+      fail.push(`boundary ${from.id}→${to.id}: injected block does not reference both ids`);
+    const overlapAmt = r3(from.start + from.duration - to.start);
+    if (overlapAmt <= 0) fail.push(`boundary ${from.id}→${to.id}: no overlap (${overlapAmt}s)`);
+    if (from.track === to.track)
+      fail.push(`boundary ${from.id}→${to.id}: both on track ${from.track}`);
+  }
+  if (expected > 0 && !txBlock)
+    fail.push(`${expected} transition(s) expected but no injected block found`);
+
+  if (fail.length) {
+    console.error(`✗ transitions verify: ${fail.length} failure(s):`);
+    for (const f of fail) console.error(`  - ${f}`);
+    process.exit(1);
+  }
+  console.log(
+    `✓ transitions verify: ${expected} transition(s) verified (cross-track, overlap>0, both ids referenced, no same-track overlap)`,
+  );
+}
+
+const sub = process.argv[2];
+const rest = process.argv.slice(3);
+if (sub === "inject") runInject(rest);
+else if (sub === "verify") runVerify(rest);
+else {
+  console.error("usage: node transitions.mjs <inject|verify> [args...]");
+  process.exit(2);
+}
diff --git a/.claude/skills-media/faceless-explainer/sub-agents/frame-worker.md b/.claude/skills-media/faceless-explainer/sub-agents/frame-worker.md
new file mode 100644
index 000000000..263fe0078
--- /dev/null
+++ b/.claude/skills-media/faceless-explainer/sub-agents/frame-worker.md
@@ -0,0 +1,79 @@
+# Frame worker — faceless-explainer per-frame composition author
+
+> You build **one** frame's composition HTML and nothing else. You run N-up, one frame each — siblings build the others. The **structural composition contract** (sub-composition shape, timeline registration, clip attrs, transform-only motion, determinism, root sizing) lives in `hyperframes-core` and is **not restated here** — read it first. This file carries only what's specific to a faceless-explainer frame. Tempted to add a generic GSAP / timeline rule here? Wrong home — it belongs in `hyperframes-core`.
+
+**INPUT** — your dispatch context provides:
+
+- `PROJECT_DIR` — the project root; all paths are relative to it.
+- `frame_id` — e.g. `03-compounds`. Use it **verbatim** as the composition id, the `window.__timelines` key, and the file name (`compositions/frames/03-compounds.html`) — that path **is** the frame's `src` in `STORYBOARD.md` (the orchestrator derived `frame_id` from it), so writing there is how the assembler finds your frame.
+- Your **`## Frame N` block** in `STORYBOARD.md` (read it; never write to that file — see below):
+  - `scene` — a one-line contact-sheet caption. **Design intent, never visible DOM text.**
+  - `voiceover` — the narration line. **Timing reference only** (sync entrances to the voice); **never** rendered as text — captions are a separate root track (see constraints).
+  - `duration` — your render length in seconds. **Fixed upstream; never change it or tween to fill a different length.**
+  - `transition_in` — informational. The injector stamps it at the root; **you do not author transitions.**
+  - the **time-coded shot sequence** — your build spec. A sequence of Scene lines (`Scene 1 (0.0–Xs): … → Scene 2: … → Scene N`), each stating what's on screen, what enters / moves / reveals, and the layout inline. Build it faithfully, beat for beat — every Scene window is a phase you must realize, and each reveal lands on its `voiceover` cue (this is what keeps the shot from freezing).
+  - `blueprint:` — an id (or the literal `compose`). The id points to `../hyperframes-animation/blueprints/<id>.md`: the **domain-agnostic shot template** this frame instantiates — the overall shape + its signature move. Read it for the shape; `compose` means there's no template, sequence the shot from the Scene lines directly.
+  - `focal:` — which **invented** element is the hero.
+  - `roles:` — each invented element's role: `foreground subject` / `background` full-bleed / `supporting`. Because the explainer is **faceless, these are elements you design** (a hero word, a diagram node, a chart series, a coined-term card), not captured assets. The **only** real media is a user-supplied image, when present: `public/<basename> — description` (a **`[video]`** tag marks a `.mp4` clip the user provided).
+  - `sfx:` — the orchestrator's; you mount no audio.
+- `frame.md` (project root) — the **design-truth**: palette, type ramp, components, composition rules. The LOOK. Pull every visual token from here.
+- `RULES_DIR` — absolute path to this skill's local `../hyperframes-animation/rules/`. The **named motion verbs in the Scene lines** (and the moves the blueprint cites) resolve to rule recipes here: `RULES_DIR/<id>.md` is the mechanics for a motion. (A few rules link an optional runnable demo in the shared `../hyperframes-animation/examples/<id>.html` — open it only when a recipe is unclear.)
+- `../references/cut-catalog.md` — the **cut catalog** (zoom-through / inverse / cut-the-curve / waterfall). When a Scene seam is a within-scene swap, a scene-to-scene cut, or a text-to-text line change, build it INSIDE your composition per this catalog (Z-scale + blur + opacity, or per-word x-staggers). You never author the between-frame transition — story's `transition_in` + the injector own that.
+- Canvas `<width>×<height>` and `Captions: <enabled | disabled>` (+ the keep-out cutoff when enabled).
+
+**Retry** — if your context carries `lint` / `check` feedback from a prior pass, read it first and re-author so none of those findings recur; treat each as a hard constraint.
+
+**OUTPUT** — `compositions/frames/<frame_id>.html`, one self-contained sub-composition. Writing it (past the self-check below) is your **terminal action** — you do not edit `STORYBOARD.md`, mint audio, assemble the index, run the CLI, or report back. The orchestrator picks up the file and marks the frame's `status`.
+
+## When a confirmed sketch exists
+
+In collaborative runs the orchestrator wireframes the board first, so your target file may already exist as the frame's **user-confirmed wireframe** — your dispatch says whether it does (a file found on a retry is your own prior output, not a sketch). Read it first and **keep its composition**: the placement, hierarchy, and copy were approved — don't move or drop them. Everything else is yours to finish: the full `frame.md` treatment (the sketch is deliberately unstyled), the finished invented visuals where the sketch used plain blocks, and the motion — map each Scene onto a timeline phase, reveal each piece on its `voiceover` cue with `fromTo` entrances, adding DOM only where a phase needs it. The frame's landed state must still read as the approved wireframe, fully dressed.
+
+## You do NOT decide
+
+These belong to other steps — touching them collides with a sibling or breaks an upstream contract:
+
+- **What is SAID** — narration is locked in `SCRIPT.md` / the `voiceover` line. You only show; you never write or restate narration text.
+- **Duration** — fixed from real voice timing. Build your entrance to land within it; don't stretch or trim it.
+- **Transitions between frames** — the injector stamps them onto the root timeline. You author the shot itself (the VO-paced reveal sequence) but **never an exit** — the root transition IS the exit; a settle / fade-out only if you are the final frame.
+- **Audio** (narration / BGM / SFX) — assembled at the root by the orchestrator. **No `<audio>` element in your composition.**
+- **Design tokens** — palette / fonts / components come from `frame.md`. Don't invent them, and **never lift a word, label, or wordmark out of `frame.md` as your copy** — it is a style spec, not the video's content. On-screen text comes from your frame's `scene` / narrative.
+- **Which motions exist** — named upstream in your block (the shot sequence's motion verbs + `blueprint:`). Implement them; don't invent new ones. You design the **invented visuals** the Scene lines describe (typography / abstract graphics / diagrams / data-viz), but you have **no asset-fetch tool** — never fabricate an image URL or reference a file that isn't the user-supplied `public/<basename>`.
+- **The shared `STORYBOARD.md`** — read your block, never write it. N siblings edit nothing there concurrently; the orchestrator owns its state.
+
+## Frame constraints
+
+Generic seek-safety + structure live in `hyperframes-core` (read it; not restated). These are the **faceless-explainer deltas**, each load-bearing:
+
+- **Caption keep-out — all content in the top ~83%.** A karaoke caption pill owns the bottom ~17% of the canvas. Keep every element (headline, diagram, coined-term card, stats) above `y ≈ 0.83 × height` — compute the pixel cutoff from your canvas (e.g. `≤ 900` on a 1080-tall frame, `≤ 1600` on a 1920-tall portrait). Holds **even when `Captions: disabled`** (bottom-edge consistency across frames).
+- **Fill the content area — especially portrait.** Compose the whole top-83% region; don't float one small cluster mid-frame. Anchor the hero high (~0.2–0.35 × height), flow supporting elements down with rhythm, scale hero type toward full-bleed. (Landscape's region is short, so vertical centering near 0.42 × height is fine.)
+- **Visible text is short motion-graphics copy** — a hero word / coined term / stat / one-word emphasis (`"COMPOUNDING"`, `"2×"`), never a sentence from the narration. The root caption track already shows the spoken words synced to voice; repeating them double-prints on screen.
+- **Build the whole shot — reveal across the full `duration`, never front-load.** Dumping the whole canvas in the first ~25% then holding it is exactly what reads as a PowerPoint slide. Instead reveal each piece — a line, a layer, a node, a stat — **as the `voiceover` reaches it** (on a silent frame, on the beat), sequencing reveals across the shot and especially the back ~50%, with the macro camera move running underneath. **Only EXITS are banned** — a non-final frame unmounts mid-frame, so an exit tween truncates and reads as a glitch (the root transition IS the exit); mid-shot reveals are free and seek-safe. The lone exception is a note marked as a deliberate hold / stillness frame: there, an entrance + a quiet settle is right (a held read beats bad motion).
+- **Implement the shot sequence faithfully — every Scene is a timeline phase.** The Scene lines ARE the build: map each Scene onto a phase of the one timeline, each piece revealing as the `voiceover` reaches it. For each **named motion** in a Scene, open its rule recipe under `RULES_DIR/<id>.md` and reproduce its mechanics — **never name-guess** (a guess loses the signature move). The **`blueprint:` template** (`../hyperframes-animation/blueprints/<id>.md`) gives the overall shape; read it and keep its **signature move** recognizable, then instantiate it with this frame's invented content / timing. `compose` → no template; sequence the shot straight from the Scene lines. Whichever, never front-load the whole sequence at `t=0` — pace the reveals to the voiceover.
+- **Design each element by its `roles`** (the `focal` is the hero): a `foreground subject` is the thing the eye lands on — respect the 83% keep-out, lay text around it, not over it; a `background` is full-bleed and dimmed ~30–50% so foreground content stays legible; `supporting` elements (labels, secondary shapes, ambient layers) stay quiet. These are **invented** — you build them in SVG / CSS / type, not from a file. **If the user supplied a real image** named in `roles:`/`focal:`, place it: a `[video]` candidate (`.mp4`) renders as a **muted** `<video class="clip">` (`data-start` / `data-duration` / `data-track-index` per the core clip contract), a **direct child of the frame root** — never nested in another timed element, or the renderer freezes it; an untagged image → `<img>`.
+
+## Workflow
+
+1. **Read** — `hyperframes-core`'s composition contract (the structural law), then `frame.md` (the look) and your `## Frame N` block (the shot sequence + `blueprint:` / `focal:` / `roles:`). **Then read the blueprint template** `../hyperframes-animation/blueprints/<id>.md` (skip if `compose`) for the shot's shape and signature move, and **open the rule recipe `RULES_DIR/<id>.md` for every named motion** in the Scene lines (plus the shared `../hyperframes-animation/examples/<id>.html` when the recipe is unclear): you reproduce these mechanics, not improvise them. Internalize the self-check codes below before you write — most lethal is **template transport**: every `<style>` + `<script>` (including the gsap load) must live INSIDE `<template>`, because the runtime only clones template contents and the assembled-project `lint` / `check` gate can miss an unwired blank sub-composition.
+2. **Design** — turn the time-coded shot sequence into a timeline using `frame.md`'s components and type ramp: each Scene window becomes a phase revealed on its `voiceover` cue, each named motion built from the recipe you just read, the blueprint's signature move kept recognizable. Invent the visual elements the Scene lines describe (the diagram, the hero word, the metaphor), and find a visual idea that reinforces the beat, not a literal restyle of the words.
+3. **Author** — write the full sub-composition to `compositions/frames/<frame_id>.html` (rewrite to iterate; last write wins). `<template>`-wrapped root carrying `data-composition-id="<frame_id>"` and styled via `#root` (not a class on that element — see the self-check below), exactly one `gsap.timeline({ paused: true })` registered at `window.__timelines["<frame_id>"]`, built synchronously — per the core contract.
+4. **Self-check, then finish** — re-read your file against the checklist below and fix in place. Writing the file is your terminal action; you do **not** run the CLI.
+
+## Self-check before finishing (you do NOT run the CLI)
+
+You **can't** meaningfully run `hyperframes lint` / `check` here: they operate on the **assembled project** (the `index.html` graph / bundle), and your frame isn't wired in yet — so they report on _other_ files, not yours (a false green). The **orchestrator** runs them at **Step 6, after assembly** (the correct unit), and **re-dispatches you with the finding** if your frame fails (see **Retry** above). So get it right on write: re-read your file against this checklist before finishing — the codes in parens are `hyperframes lint`'s and what the orchestrator may cite back (the rules behind them live in `hyperframes-core`):
+
+- `missing_template_wrapper` / `missing_composition_id` — root is `<template>`-wrapped and carries `data-composition-id="<frame_id>"`.
+- **Template transport** — every `<style>` and `<script>` block, including the GSAP load, lives inside `<template>`.
+- `subcomposition_root_styled_by_class` — **style the frame root via `#root`, never a class on the `data-composition-id` element**: at render a class on the root gets scoped to a descendant selector that can't match it, so the **whole scene renders unstyled** (Studio preview still looks right — trust this rule, not the preview). Descendants use plain selectors.
+- **Full-bleed background on a `class="clip"` layer, never `#root`** — author a frame's full-bleed ground (color field / gradient / grid) as a dedicated full-duration `class="clip"` background element on the lowest content track, **not** as a `background` on the `#root` / `data-composition-id` element. At assembly the frame root is clip-gated to its scene window, so a background painted on the root is not a dependable full-frame ground — dark content can end up over the host `body` (black) and render invisible. The video's base ground is painted separately by the assembler from `frame.md`'s `canvas` color onto the index `#root`; your full-bleed clip rides on top of it.
+- `clip_missing_data_attrs` — every `class="clip"` element has `data-start` / `data-duration` / `data-track-index`.
+- `timeline_not_paused` / `timeline_not_registered` — one paused timeline, registered at `window.__timelines["<frame_id>"]`.
+- `css_transition_used` + repeat / yoyo / non-deterministic logic — none present (the renderer seeks frame-by-frame).
+- `gsap_css_transform_conflict` — never put a CSS `transform` (e.g. `translateY(-50%)` centering) on an element you then GSAP-animate a transform prop on (`x` / `y` / `scale` / `rotation`): GSAP overwrites the whole `transform` and silently drops the CSS centering (the element jumps). Center with `margin` / `inset` (or `top`/`left` + offset), fold the offset into the tween via `xPercent` / `yPercent`, or use `fromTo` (the rule exempts it).
+- **Hero visibility** — the main subject is visible by `t <= 0.5s`; entrance tweens use `fromTo` instead of CSS-hidden starting states.
+- `exit_animation_on_non_final_scene` — no exit tween unless you are the final frame.
+- **No front-loading (not a slide)** — the shot's pieces reveal on their `voiceover` cues across the duration, not all fired at `t=0`; a non-still frame keeps content arriving rather than holding a full canvas from ~25%.
+- **Shot-sequence fidelity** — every Scene in the time-coded sequence is realized as a phase, the blueprint's signature move (unless `compose`) is present and recognizable, and the shot reveals to the voiceover (never front-loaded at `t=0`).
+- `font_family_without_font_face` — every font you name has a matching `@font-face` (or `@import`) **inside this file**. **Only use fonts that ship as files** with the project: the families declared in `frame.md` (their `.woff2` live in `assets/fonts/` or `capture/assets/fonts/` — point the `@font-face` `src` at the real file you find there). **Never name a font that has no file**, including system CJK / Japanese / Devanagari families (`Hiragino Sans`, `Yu Gothic`, `Noto Sans CJK`, `Noto Sans Devanagari`, …): the render machine is a clean headless Chrome with none of them installed, so the text silently falls back to a generic font and the typography is wrong in the MP4. For non-Latin or multilingual visible text, either use a shipped font that covers the script, or romanize / transliterate it (e.g. `日本語` → `Japanese`); if neither is possible it is out of scope for this frame — do not invent a font name.
+- **Keep-out + no-narration-text** (eyeball, no code) — nothing sits below the 83% cutoff; no narration sentence is rendered as visible text.
diff --git a/.claude/skills-media/general-video/SKILL.md b/.claude/skills-media/general-video/SKILL.md
new file mode 100644
index 000000000..3b9bf4711
--- /dev/null
+++ b/.claude/skills-media/general-video/SKILL.md
@@ -0,0 +1,149 @@
+---
+name: general-video
+description: >
+  Author or edit a custom HyperFrames composition when no specialized workflow fits, or when
+  BRIEF.md sets flow: companion. Use for longer or multi-scene pieces, brand and sizzle reels,
+  montages, static loops, static title cards, footage remixes, and freeform builds. Use
+  motion-graphics instead for a short unnarrated motion-first unit, including an animated title.
+  Route fresh creation through hyperframes before using this skill.
+---
+
+# General video
+
+Before relying on this workflow, run:
+
+```bash
+npx hyperframes skills update general-video
+```
+
+A successful no-op means the skill is current. Surface an update failure instead of continuing from memory.
+
+## 1. Apply cross-cutting source adapters
+
+- **Media:** For any audio, image, icon, logo, voice, grade, LUT, caption, or media-operation need, load `/media-use` and follow its adoption, resolution, provider, provenance, and reuse contracts. Before the first authenticated provider action, run `npx hyperframes auth status` and relay its output verbatim. If signed out, apply the gate in `../hyperframes-core/references/brief-contract.md`: collaborative waits for sign-in or an explicit offline choice; autonomous states the status and continues through an available offline provider. Surface a blocker when no offline provider can satisfy a required capability. Local adoption alone does not require an auth gate.
+- **Figma:** If any input is a `figma.com` URL, run `/figma` first. Build from its exported assets, tokens, components, or storyboard frames. Do not use raw Figma MCP calls because they skip SVG sanitization, media provenance, and brand-token binding.
+
+These adapters do not change the workflow selected by `/hyperframes`.
+
+## 2. Start from project state
+
+Apply the first matching row; do not evaluate lower state rows:
+
+| State                                                      | Action                                                                                                         |
+| ---------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- |
+| Specific edit                                              | Make the edit, preserve existing project decisions, then rerun affected checks. Do not reopen discovery.       |
+| `BRIEF.md` exists                                          | Read it. If `workflow` names another workflow and `flow` is not `companion`, hand off. Ask no brief questions. |
+| No brief, but `hyperframes.json` or `STORYBOARD.md` exists | Resume from files and recorded preferences. Backfill `BRIEF.md` only from known facts.                         |
+| Fresh creation                                             | Run `/hyperframes` and its intent layer. Return here only for `workflow: general-video` or `flow: companion`.  |
+
+For a new project, choose a kebab-case directory name from the brief and scaffold before writing the brief:
+
+```bash
+npx hyperframes init "videos/<project>" --non-interactive --example=blank
+```
+
+Then write `BRIEF.md` at the project root using `../hyperframes-core/references/brief-format.md`. In an existing project, the root is the directory containing `hyperframes.json`. Record only the confirmed preference-backed fields named by the brief format, using `node <MEDIA_DIR>/scripts/prefs.mjs record --hyperframes <PROJECT_ROOT>`; never record inferred defaults. Here `<MEDIA_DIR>` is the installed `/media-use` skill directory and `<PROJECT_ROOT>` is the directory containing `hyperframes.json`. If the intent layer adopted a recipe, apply it now with `node <MEDIA_DIR>/scripts/recipe.mjs use --hyperframes <PROJECT_ROOT> --name <name>` and do not ask again.
+
+## 3. Interpret the run shape
+
+Use only the canonical terms from `../hyperframes-core/references/brief-contract.md`:
+
+| Field          | Meaning                               | Effect                                                                              |
+| -------------- | ------------------------------------- | ----------------------------------------------------------------------------------- |
+| `flow`         | Who drives                            | `automation`: choose and execute the route. `companion`: co-create in conversation. |
+| `storyboard`   | Whether the board is a review surface | `yes`: run plan and sketch review. `no`: build without the board.                   |
+| derived `mode` | How checkpoint gates behave           | Follow the brief contract. Never ask the user to name a mode.                       |
+
+Do not invent synonyms for these states. An ongoing “just build it” signal is handled by the intent layer and arrives as `flow: automation`, `storyboard: no`.
+
+- For `flow: automation`, choose the route and state it in one line in the first progress update.
+- For a specific edit, make the edit without inventing a new route.
+
+### Companion flow
+
+When `flow: companion`:
+
+- Read `BRIEF.md` and reconcile accepted `## Assets` and `## Customizations` with project artifacts. Complete accepted work that is still pending; leave completed work alone; do not offer an accepted capability again as if it were new.
+- **Arrive as the director, not the contractor.** A user who chose companion chose involvement and quality; the honest response is the best version you can design, not the smallest one you can defend. The first plan is the ceiling treatment: the story arc (borrow the nearest genre lens — menu § Genre lenses), the design spec, each scene's motion treatment cited by name (§ 5's plan discipline), the transitions, the audio identity — music and sound marks, or deliberate silence — the user's material placed, and a designed open and close. Say what each layer adds in one line; flag the expensive ones (render time, sign-in, billing) as you name them. The user trims a treatment down; they should never have to assemble one approval by approval.
+- **The ceiling belongs to the concept, not the toolbox.** Every layer must serve the brief's message — a treatment that would dress any video the same way is decoration. Craft rises to the ceiling; content never grows past what was asked (§ 6).
+- Between checkpoints, `../hyperframes/references/capability-menu.md` works two ways. As the trigger list: offer a relevant capability when the user mentions its input or the build reaches its need. As each pass's upgrade channel: a plan, sketch, or build checkpoint may carry one or two traced offers pointed at material the user is looking at ("scene 3's stat wants the count-up treatment"). Read it before offering; never dump the full catalog.
+- After the user accepts a capability, produce its artifact and record the decision in the matching `BRIEF.md` body section immediately. Rewrite a frontmatter field and record the confirmed preference only when the user explicitly changes it.
+- Keep the same storyboard, validation, final-preview, and render-approval gates. Companion changes who steers, not what quality requires.
+
+## 4. Load required knowledge before each stage
+
+These reads are mandatory when their condition matches:
+
+| Condition                                                                                                         | Read before acting                                                                                                                                                                                                                     |
+| ----------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| Any composition HTML or scene layout                                                                              | `/hyperframes-core`; use `references/determinism-rules.md` for its layout contract                                                                                                                                                     |
+| Any non-trivial creation or visual treatment                                                                      | `/hyperframes-creative` → `references/house-style.md` and `references/video-composition.md`                                                                                                                                            |
+| Any motion, animation, or scene transition                                                                        | `/hyperframes-animation`; follow its routing to the matching rules, adapters, blueprints, or transition references                                                                                                                     |
+| `storyboard: yes`                                                                                                 | `../hyperframes-core/references/storyboard-format.md` and `../hyperframes-core/references/review-loop.md`                                                                                                                              |
+| Any media asset or operation, including narration, BGM, SFX, captions, grading, or transforms                     | `/media-use`; for framework playback and placement also read `/hyperframes-core` → `references/variables-and-media.md`                                                                                                                 |
+| Multi-scene assembly                                                                                              | `../hyperframes-core/references/production-loop.md`                                                                                                                                                                                    |
+| `flow: companion`, before the first plan                                                                          | `/hyperframes-creative` → `references/story-spine.md` and `references/house-style.md`; the nearest genre lens and the full `../hyperframes/references/capability-menu.md` — the ceiling treatment is designed from these, not recalled |
+| A companion capability offer, capture, beat grid, generative video, map, publishing, or cross-workflow capability | `../hyperframes/references/capability-menu.md`                                                                                                                                                                                         |
+| A design spec exists, before final approval                                                                       | `/hyperframes-creative` → `references/design-adherence.md`                                                                                                                                                                             |
+
+Do not replace these reads with recollection. Progressive disclosure saves context only when the matching reference is actually loaded.
+
+## 5. Execute the composition
+
+Use this dependency order. Skip a stage only when its input is absent.
+
+1. **Plan.** State the viewer arc, structure, rhythm, and duration driver. Use one file for a short single scene; use sub-compositions for three or more hard scene cuts or any reused scene. Read `/hyperframes-creative` → `references/story-spine.md` for narrated arcs, `references/beat-direction.md` for rhythm, and `/hyperframes-core` → `references/composition-patterns.md` for structure. For an open-ended multi-scene brief, expand the prompt through `/hyperframes-creative` → `references/prompt-expansion.md`. A multi-scene plan cites each scene's shape: a blueprint id from `/hyperframes-animation` → `blueprints-index.md` when one fits, or the named rules it composes from `rules-index.md` when none does — motion names come from those indexes, never invented. Story truth decides which scenes exist; the citation dresses them.
+2. **Review the plan when requested.** For `storyboard: yes`, write one `## Frame N` per scene with `status: outline` and a declared `src`, then run the shared review loop. For `storyboard: no`, continue without opening the board.
+3. **Resolve dependencies.** Install registry blocks before parallel work. Stage user assets, adopt existing media, and resolve only what the brief requires. Start audio early when its timings drive duration.
+4. **Build static hero layouts.** Implement every scene at its most visible moment before adding motion. The confirmed wireframe, when present, is this end state and must not be redrawn. Follow `/hyperframes-core` for the layout contract.
+5. **Animate.** Build each scene from its cited blueprint or rules: read the full recipe body (`/hyperframes-animation` → `blueprints/<id>.md`, `rules/<id>.md`) before writing its motion, and keep to it. Use `/hyperframes-animation` for runtime adapters and scene transitions. Keep animation details in that owning skill rather than re-defining them here.
+6. **Assemble.** Mount scenes, media, transitions, captions, and audio using the production loop. Real voice duration overrides estimates.
+7. **Verify.** Use `npx hyperframes lint` for fast feedback after the first HTML pass and structural changes. For the final gate, run `npx hyperframes check`; it reruns lint internally, so do not run a redundant standalone lint immediately before it. For sub-compositions, inspect midpoint snapshots. For multi-scene work, review the animation map.
+8. **Final approval.** Open the final Studio preview only after checks pass. Ask whether to render or revise. Render only after approval.
+
+## 6. Gates that always apply
+
+### Keep scope exact
+
+Build what the user asked for. A title card is not a title card plus three scenes, music, and captions. Offer additions before adding them.
+
+### Establish design before HTML
+
+Resolve the design source in this order: `frame.md` → `design.md` → `DESIGN.md`. Treat the first file found as brand truth.
+
+When no design spec exists, complete all four items before writing composition HTML:
+
+1. Ground the visual identity in `house-style.md` and `video-composition.md`.
+2. Write one sentence naming the concept angle for every non-trivial creation.
+3. Choose an embeddable font pairing from `/hyperframes-creative` → `references/typography.md`; do not assume an unbundled display font exists in cloud rendering.
+4. Define the focal element, edge anchors, supporting detail, and background treatment.
+
+Match density to the requested format and message. Density examples are guidance for produced frames, not permission to invent claims, scenes, or a fixed number of elements.
+
+For a named style or mood, read `/hyperframes-creative` → `references/visual-styles.md`. When the user needs to choose visually and no shipped preset fits, read `/hyperframes-creative` → `references/design-picker.md` and run the interactive design selection there.
+
+### Preserve the composition contract
+
+Timed elements use `class="clip"`; the root and relevant ancestors are sized; each composition registers one paused, seek-safe timeline on `window.__timelines`; rendering is deterministic. Do not use render-time network fetches, clocks, or unseeded randomness.
+
+### Borrow workflows safely
+
+When the piece resembles a shipped workflow, borrow its genre references as examples. First run `npx hyperframes skills update <workflow-name>`. Borrow its story shape and taste, not its private scripts, pipeline state, or directory contract. The generic build remains owned by this skill.
+
+## 7. Done
+
+A run is complete only when:
+
+- requested scope is implemented;
+- for `flow: companion`, the treatment is delivered, not just the scope: every scene's cited blueprint or rules realized, the audio identity present (or the silence chosen and said), the open and close designed rather than defaulted;
+- `npx hyperframes check` passes, including its built-in lint stage;
+- design adherence is reviewed against `/hyperframes-creative` → `references/design-adherence.md` when a design spec exists;
+- contrast findings are resolved;
+- sub-composition snapshots are inspected when applicable;
+- an autonomous handoff includes an inspected contact or snapshot sheet; multi-scene sheets use scene midpoints;
+- the handoff names the final preview or rendered artifact as applicable and reports the actual duration for a time-based deliverable;
+- `hyperframes-animation/scripts/animation-map.mjs` is reviewed for multi-scene work;
+- the user approves the final Studio preview before render;
+- the rendered file is verified when a render was requested.
+
+After final approval, offer once to freeze the run as a recipe, following `../hyperframes-core/references/review-loop.md` § 4.
diff --git a/.claude/skills-media/hyperframes-animation/SKILL.md b/.claude/skills-media/hyperframes-animation/SKILL.md
new file mode 100644
index 000000000..00aaaeed5
--- /dev/null
+++ b/.claude/skills-media/hyperframes-animation/SKILL.md
@@ -0,0 +1,84 @@
+---
+name: hyperframes-animation
+description: "All animation knowledge for HyperFrames — atomic motion rules, multi-phase scene blueprints, scene transitions, broader motion-design techniques, AND the seven runtime adapters (GSAP default, plus Lottie, Three.js, Anime.js, CSS keyframes, Web Animations API, TypeGPU). Use for any motion or animation task: pick 2-4 rules and compose, or load a blueprint, or look up runtime-specific API (e.g. GSAP eases / Lottie player / Three.js mixer). Also covers auditing an existing composition's choreography (animation map) and 24 named text-animation effects. HyperFrames-native: single paused timeline, seek-safe, deterministic."
+---
+
+# HyperFrames Animation
+
+All motion knowledge in one skill: **rules** (atomic recipes), **blueprints** (multi-phase scene templates), **transitions** (scene-to-scene), **techniques** (broader motion-design patterns), and **adapters** (per-runtime APIs).
+
+For the composition contract (data attributes, sub-compositions, determinism) see `hyperframes-core`.
+
+## Default: compose atomic rules
+
+Pick 2-4 rules from `rules-index.md`, glue them together with a single paused GSAP timeline, done. This is faster and produces less code than starting from a blueprint.
+
+## Load a blueprint when
+
+- The scene matches an existing pre-designed multi-phase template (brand-reveal, social-proof, etc.) and reusing its phase pipeline saves real authoring time
+- You want runnable ground-truth code for a complex 4-5 phase choreography
+
+Blueprints live in `blueprints-index.md`. Each entry points to `blueprints/<id>.md` (recipe). Do not read it speculatively; load it when you've already decided you need scene-level orchestration.
+
+## Routing
+
+| Want to…                                                                       | Read                                                |
+| ------------------------------------------------------------------------------ | --------------------------------------------------- |
+| Pick an atomic motion pattern by trigger / tag                                 | `rules-index.md`                                    |
+| Read one rule's full HTML / CSS / GSAP recipe                                  | `rules/<name>.md`                                   |
+| Pick a multi-phase scene template                                              | `blueprints-index.md`                               |
+| Read one blueprint's full recipe                                               | `blueprints/<id>.md`                                |
+| Author a scene transition (CSS-driven, between two clips)                      | `transitions/overview.md`, `transitions/catalog.md` |
+| Look up a broader motion-design technique                                      | `techniques.md`                                     |
+| Analyze an existing composition's animation map                                | `scripts/animation-map.mjs`                         |
+| GSAP API — timeline / tweens / position parameters                             | `adapters/gsap.md`                                  |
+| GSAP — drop-in effect recipes                                                  | `rules/gsap-effects.md`                             |
+| GSAP — transforms / perf                                                       | `adapters/gsap-transforms-and-perf.md`              |
+| GSAP — eases / stagger                                                         | `adapters/gsap-easing-and-stagger.md`               |
+| GSAP — timeline / labels                                                       | `adapters/gsap-timeline-and-labels.md`              |
+| Lottie / dotLottie (After Effects exports, `window.__hfLottie`)                | `adapters/lottie.md`                                |
+| Three.js / WebGL (3D scenes, `AnimationMixer`, `hf-seek`)                      | `adapters/three.md`                                 |
+| Anime.js (`window.__hfAnime`)                                                  | `adapters/animejs.md`                               |
+| CSS keyframes (`animation-delay` / `play-state` / `fill-mode`)                 | `adapters/css-animations.md`                        |
+| Web Animations API (`element.animate()`, `currentTime` seek)                   | `adapters/waapi.md`                                 |
+| TypeGPU / WebGPU (`navigator.gpu`, WGSL, compute pipelines)                    | `adapters/typegpu.md`                               |
+| HTML-as-texture + WebGL/GLSL post-fx (capture live DOM via `drawElementImage`) | `adapters/html-in-canvas-patterns.md`               |
+| Named text-animation effects (24 IDs via external `animate-text` skill)        | `adapters/animate-text.md`                          |
+
+## Picking a runtime
+
+- **GSAP** is the default for 95% of motion work — covers timeline orchestration, transforms, easing, stagger. All atomic rules in this skill are GSAP-based.
+- **Lottie** when an asset has its own pre-baked timeline (typically After Effects exports).
+- **Three.js** for 3D scenes, camera motion, shader-driven visuals.
+- **Anime.js** for lightweight tweening when GSAP is overkill.
+- **CSS** for simple repeated motifs, decoration, shimmer — no JavaScript animation cost.
+- **WAAPI** for native browser keyframes without a GSAP dependency.
+- **TypeGPU / WebGPU** for GPU-rendered canvases (particles, liquid glass, custom shaders).
+
+Multiple runtimes can coexist in one composition. Each registers its instances on the runtime-specific global so HyperFrames can seek all of them in one pass.
+
+## Critical Constraints
+
+**Prerequisite: `hyperframes-core` → Non-Negotiable Rules** (single paused timeline, `data-duration` governs length, no `Math.random` / `Date.now` / `performance.now`, no `repeat: -1`, no page-load `gsap.set` on later-scene clips, no `display` or raw `visibility` tweens, and no timeline construction inside `async` / `setTimeout` / `Promise`). GSAP `autoAlpha` and zero-duration visibility sets at explicit timeline boundaries remain allowed by core. Use those exceptions only on non-clip elements or wrappers inside a clip; the framework owns `.clip` lifecycle. Don't restate the full contract here.
+
+Animation-craft additions on top of core's contract:
+
+- **Pre-calculated layout constants** — never derive positions from `getBoundingClientRect()` at tween time. Tween-time DOM measurements desync because the renderer samples in parallel; compute coordinates once at composition setup and reuse.
+- **Spatial motion uses GSAP transform aliases only** (`x`, `y`, `scale`, `rotation`). Core's allowlist also permits `opacity` / `color` / `backgroundColor` / `borderRadius` for non-spatial property tweens — but never `width` / `height` / `top` / `left` for layout changes.
+
+## Scripts
+
+```bash
+node skills/hyperframes-animation/scripts/animation-map.mjs <composition-dir> \
+  --out <composition-dir>/.hyperframes/anim-map
+```
+
+Reads every GSAP timeline registered on `window.__timelines`, enumerates tweens, samples bboxes, computes flags, outputs `animation-map.json`. Use it to audit choreography (dead zones, stagger consistency, lifecycle warnings) after authoring.
+
+`animation-map.mjs` resolves helper packages from the current project first, then can bootstrap the bundled HyperFrames package version. Set `HYPERFRAMES_SKILL_PKG_VERSION=<version>` only when running the skill outside the bundled CLI/skill install and you need to pin that bootstrap version explicitly.
+
+## See Also
+
+- `hyperframes-core` — composition structure, data attributes, sub-compositions, deterministic render contract
+- `hyperframes-creative` — palettes, typography, narration, beat planning (non-animation creative direction)
+- `hyperframes-cli` — `npx hyperframes lint / check / snapshot / preview / render`
diff --git a/.claude/skills-media/hyperframes-animation/adapters/animate-text.md b/.claude/skills-media/hyperframes-animation/adapters/animate-text.md
new file mode 100644
index 000000000..d722d705c
--- /dev/null
+++ b/.claude/skills-media/hyperframes-animation/adapters/animate-text.md
@@ -0,0 +1,64 @@
+# Text Effects — Reference
+
+For deterministic text-animation specs (e.g., `typewriter` at exact `240ms / 46ms stagger / steps(1, end) easing`), this skill defers to the separate **`animate-text`** skill maintained by Pixel Point at [github.com/pixel-point/animate-text](https://github.com/pixel-point/animate-text). It provides a catalog of 24 named text effects with portable contracts and per-library implementation recipes (GSAP, Anime.js, WAAPI).
+
+**We do NOT ship the catalog inside this repo.** Pixel Point's `animate-text` is the source of truth; vendoring its files here would violate the upstream's licensing (no explicit license declared upstream as of this writing). Loading the skill separately keeps the legal picture clean while giving you the same catalog.
+
+## How to use it
+
+When a beat needs a deterministic text animation, load the upstream skill alongside this one:
+
+```bash
+# In your project root, install the upstream skill into .agents/skills/
+npx skills add pixel-point/animate-text
+```
+
+Or in a skill-aware agent runtime, the skill is invoked by name:
+
+```
+/animate-text
+```
+
+Once installed, the specs live at:
+
+```
+.agents/skills/animate-text/assets/effects/<id>.json   # per-library implementation recipe
+.agents/skills/animate-text/assets/specs/<id>.json     # portable motion contract
+```
+
+Sub-agents reading those files get exact GSAP timings, easing strings, DOM split rules, and stagger algorithms — no creative invention needed.
+
+## When you don't need the upstream skill
+
+If a beat's text animation is simple enough to describe in prose ("headline fades up word-by-word, 80ms stagger"), implement it inline using the GSAP knowledge already in these skills (`hyperframes-creative` → `references/motion-principles.md` and `references/beat-direction.md`; `hyperframes-animation` → `techniques.md`, entry #4 "Per-Word Kinetic Typography"). The upstream catalog is most valuable when:
+
+- You want a specific NAMED effect across multiple beats (so they feel like one design system, not one-offs)
+- You're choosing between several similar effects (typewriter vs per-character-rise vs bottom-up-letters) and want to see all 24 in one place
+- You need layout-aware effects (`kinetic-center-build`, `short-slide-right`, `short-slide-down`) where parameters alone aren't enough — those ship with custom layout algorithms
+
+## Effect names — vocabulary (do NOT use this as the implementation source)
+
+For convenience while writing storyboards: the upstream skill provides 24 effects. Their IDs are listed here so you can name them in `STORYBOARD.md` even before loading the upstream skill. **The implementation specs are in the upstream skill, not here.**
+
+- **Per-character (7):** soft-blur-in, per-character-rise, typewriter, bottom-up-letters, top-down-letters, stagger-from-center, stagger-from-edges
+- **Per-word (8):** per-word-crossfade, spring-scale-in, shared-axis-y, blur-out-up, kinetic-center-build, short-slide-right, short-slide-down, depth-parallax-words
+- **Per-line (2):** mask-reveal-up, line-by-line-slide
+- **Whole element (7):** micro-scale-fade, shimmer-sweep, fade-through, shared-axis-z, scale-down-fade, focus-blur-resolve, shared-axis-x
+
+For descriptions, durations, easing curves, and the per-library recipes: load `/animate-text` and read its own catalog page.
+
+## In the storyboard
+
+Every text element in every beat can name an effect by ID, e.g.:
+
+```markdown
+**Text Animations:**
+
+- Main headline: `kinetic-center-build`
+- Eyebrow label: `soft-blur-in`
+- Body copy 3 lines: `mask-reveal-up`
+```
+
+Sub-agents implementing the beat will load `/animate-text` if it's not already loaded, then read the spec for each named effect from the upstream skill's files.
+
+If the upstream skill isn't available (offline build, network restrictions, agent runtime that doesn't support skill loading), sub-agents fall back to implementing the effect from the description alone — using GSAP knowledge plus the effect ID as a description of intent (e.g., "typewriter" = per-character stepped reveal with no interpolation).
diff --git a/.claude/skills-media/hyperframes-animation/adapters/animejs.md b/.claude/skills-media/hyperframes-animation/adapters/animejs.md
new file mode 100644
index 000000000..5d108f94a
--- /dev/null
+++ b/.claude/skills-media/hyperframes-animation/adapters/animejs.md
@@ -0,0 +1,114 @@
+---
+name: hyperframes-animejs
+description: Anime.js adapter patterns for HyperFrames. Use when writing Anime.js animations or timelines inside HyperFrames compositions, registering animations on window.__hfAnime, making Anime.js seek-driven and deterministic, or translating Anime.js examples into render-safe HyperFrames HTML.
+---
+
+# Anime.js for HyperFrames
+
+HyperFrames can seek Anime.js instances through its `animejs` runtime adapter. The composition owns the animation objects; HyperFrames owns the clock.
+
+## Contract
+
+- Create animations or timelines synchronously during composition initialization.
+- Set `autoplay: false` so Anime.js does not advance on its own clock.
+- Register every returned animation or timeline on `window.__hfAnime`.
+- Use finite durations and loop counts.
+- Avoid callbacks that mutate DOM based on wall-clock time, network state, or unseeded randomness.
+
+The adapter seeks every registered instance with `instance.seek(timeMs)`, where `timeMs` is HyperFrames time in milliseconds.
+
+## Basic Pattern
+
+```html
+<script src="https://cdn.jsdelivr.net/npm/animejs@4.0.2/lib/anime.iife.min.js"></script>
+<script>
+  const anim = anime({
+    targets: ".mark",
+    translateX: 280,
+    rotate: "1turn",
+    opacity: [0, 1],
+    duration: 1200,
+    easing: "easeOutExpo",
+    autoplay: false,
+  });
+
+  window.__hfAnime = window.__hfAnime || [];
+  window.__hfAnime.push(anim);
+</script>
+```
+
+## Timeline Pattern
+
+```html
+<script>
+  const tl = anime.timeline({
+    autoplay: false,
+    easing: "easeOutCubic",
+  });
+
+  tl.add({
+    targets: ".title",
+    translateY: [40, 0],
+    opacity: [0, 1],
+    duration: 650,
+  }).add(
+    {
+      targets: ".accent",
+      scaleX: [0, 1],
+      duration: 450,
+    },
+    250,
+  );
+
+  window.__hfAnime = window.__hfAnime || [];
+  window.__hfAnime.push(tl);
+</script>
+```
+
+## Module Builds
+
+If you use an ES module build, the adapter does not care how the instance was created. It only needs the returned object to expose `seek()`, `pause()`, and preferably `play()`:
+
+```html
+<script type="module">
+  import { animate } from "https://cdn.jsdelivr.net/npm/animejs/+esm";
+
+  const anim = animate(".chip", {
+    x: "18rem",
+    duration: 900,
+    autoplay: false,
+  });
+
+  window.__hfAnime = window.__hfAnime || [];
+  window.__hfAnime.push(anim);
+</script>
+```
+
+## Good Uses
+
+- Small SVG and DOM flourishes where Anime.js syntax is compact.
+- Imported Anime.js examples that can be made seek-driven.
+- Multiple independent micro-animations pushed into the same registry.
+
+Use GSAP for complex scene sequencing unless the user specifically asks for Anime.js. GSAP is still the primary HyperFrames authoring path.
+
+## Avoid
+
+- Leaving `autoplay` at the Anime.js default.
+- Depending on `anime.running` auto-discovery instead of explicit `window.__hfAnime.push(...)`.
+- Infinite loops. Compute a finite repeat count from the composition duration.
+- Building animations in timers, promises, event handlers, or after async asset loads.
+
+## Validation
+
+After editing a composition that uses Anime.js:
+
+```bash
+npx hyperframes lint
+npx hyperframes check
+```
+
+## Credits And References
+
+- HyperFrames adapter source: `packages/core/src/runtime/adapters/animejs.ts`.
+- Anime.js documentation for `autoplay`, `pause()`, and `seek()`: https://animejs.com/documentation/
diff --git a/.claude/skills-media/hyperframes-animation/adapters/css-animations.md b/.claude/skills-media/hyperframes-animation/adapters/css-animations.md
new file mode 100644
index 000000000..61915aa79
--- /dev/null
+++ b/.claude/skills-media/hyperframes-animation/adapters/css-animations.md
@@ -0,0 +1,143 @@
+---
+name: hyperframes-css-animations
+description: CSS animation adapter patterns for HyperFrames. Use when authoring CSS keyframes, animation-delay based timing, animation-fill-mode, animation-play-state, or CSS-only motion that HyperFrames must seek deterministically during preview and rendering.
+---
+
+# CSS Animations for HyperFrames
+
+HyperFrames can seek CSS keyframe animations through its `css` runtime adapter. Use this for simple repeated motifs, background motion, shimmer, glow, masks, and non-sequenced decoration.
+
+For scene choreography, GSAP is usually clearer. CSS animations work best when the motion belongs to one element and has a fixed duration.
+
+## Contract
+
+- Put the animated element in the DOM before runtime initialization finishes.
+- Give timed elements a `data-start` value so local animation time matches the clip.
+- Use finite `animation-duration` and `animation-iteration-count` because the negative-delay fallback cannot represent unbounded duration in environments without WAAPI-backed CSS animations.
+- Prefer `animation-fill-mode: both` so seeked states hold before and after active motion.
+- Avoid wall-clock JavaScript, hover-triggered state, and class toggles that depend on user events.
+
+The adapter discovers elements with computed `animation-name`, seeks their browser `Animation` handles when available, and falls back to pausing with negative `animation-delay`.
+
+## Basic Pattern
+
+```html
+<div
+  id="pulse-ring"
+  class="clip pulse-ring"
+  data-start="0"
+  data-duration="4"
+  data-track-index="2"
+></div>
+
+<style>
+  .pulse-ring {
+    width: 280px;
+    height: 280px;
+    border: 4px solid rgba(255, 255, 255, 0.7);
+    border-radius: 50%;
+    animation-name: pulse-ring;
+    animation-duration: 1200ms;
+    animation-timing-function: cubic-bezier(0.2, 0, 0, 1);
+    animation-iteration-count: 3;
+    animation-fill-mode: both;
+  }
+
+  @keyframes pulse-ring {
+    from {
+      opacity: 0;
+      transform: scale(0.82);
+    }
+    35% {
+      opacity: 1;
+    }
+    to {
+      opacity: 0;
+      transform: scale(1.18);
+    }
+  }
+</style>
+```
+
+## Stagger Pattern
+
+Use CSS custom properties to avoid duplicating keyframes:
+
+```html
+<div class="clip dots" data-start="1" data-duration="3" data-track-index="3">
+  <span style="--i: 0"></span>
+  <span style="--i: 1"></span>
+  <span style="--i: 2"></span>
+</div>
+
+<style>
+  .dots span {
+    display: inline-block;
+    width: 18px;
+    height: 18px;
+    margin-right: 10px;
+    border-radius: 50%;
+    background: currentColor;
+    animation: dot-pop 900ms ease-out both;
+    animation-delay: calc(var(--i) * 120ms);
+  }
+
+  @keyframes dot-pop {
+    from {
+      opacity: 0;
+      transform: translateY(18px) scale(0.75);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0) scale(1);
+    }
+  }
+</style>
+```
+
+## Good Uses
+
+- Decorative loops with a known repeat count.
+- Mask, glow, shimmer, grain, and subtle parallax layers.
+- Simple one-element entrances where a full JS timeline would be excessive.
+
+## Avoid
+
+- Infinite CSS animations unless you have verified the browser exposes seekable WAAPI-backed CSS animation handles. Prefer a finite iteration count covering the visible duration. If you do use `infinite`, add `data-duration` to the root element — see Composition Duration below.
+- Animating layout properties like `top`, `left`, `width`, or `height` when transforms work.
+- Relying on hover, focus, scroll, or media queries to trigger render-critical motion.
+- Changing animation classes after startup unless another deterministic timeline controls that change.
+
+## Composition Duration
+
+The render engine needs to know the composition's total length. GSAP timelines report this automatically; CSS-only compositions have no timeline object, so the runtime infers duration from the longest running animation's computed end time (`animation-delay` + `animation-duration` × finite `animation-iteration-count`, per element with `data-start` added as an offset). `data-duration` on the root element is optional whenever every CSS animation on the page is finite — you don't need to add it just because the composition is CSS-driven.
+
+`animation-iteration-count: infinite` (or any unresolved/unbounded animation) has no finite end time, so it cannot be auto-inferred. If the composition's only animation is infinite, you **must** add `data-duration="<seconds>"` to the root `[data-composition-id]` element with your intended total length — `npx hyperframes lint` errors on this case (`root_composition_missing_duration_source`) precisely because there is nothing for the runtime to infer.
+
+```html
+<div
+  data-composition-id="root"
+  data-start="0"
+  data-duration="6"
+  data-width="1920"
+  data-height="1080"
+>
+  <div class="clip spinner" data-start="0" style="animation: spin 1s linear infinite"></div>
+</div>
+```
+
+## Validation
+
+After editing CSS animation compositions:
+
+```bash
+npx hyperframes lint
+npx hyperframes check
+```
+
+## Credits And References
+
+- HyperFrames adapter source: `packages/core/src/runtime/adapters/css.ts`.
+- Duration auto-inference: `packages/core/src/runtime/init.ts` (`resolveAdapterDurationFloorSeconds`), `getInferredDurationSeconds` in the adapter above.
+- MDN CSS animation documentation: https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/animation
+- MDN `animation-fill-mode`: https://developer.mozilla.org/en-US/docs/Web/CSS/animation-fill-mode
diff --git a/.claude/skills-media/hyperframes-animation/adapters/gsap-easing-and-stagger.md b/.claude/skills-media/hyperframes-animation/adapters/gsap-easing-and-stagger.md
new file mode 100644
index 000000000..8e03eafd5
--- /dev/null
+++ b/.claude/skills-media/hyperframes-animation/adapters/gsap-easing-and-stagger.md
@@ -0,0 +1,199 @@
+# Easing, Stagger, and Function-Based Values
+
+## Easing
+
+Built-in eases: `power1`, `power2`, `power3`, `power4`, `back`, `bounce`, `circ`, `elastic`, `expo`, `sine`, `none`.
+
+Each has `.in`, `.out`, `.inOut` variants.
+
+| Ease                                       | Use for                                                                                         |
+| ------------------------------------------ | ----------------------------------------------------------------------------------------------- |
+| `power1.out`, `power2.out`                 | Gentle motion for secondary elements (a caption fade, a small shift). NOT the entrance default. |
+| `power3.out` (house default), `power4.out` | The standard long-tail settle. Entrances, title cards, hero reveals.                            |
+| `sine.inOut`                               | Long, slow, calm motion. Crossfades, ambient drift.                                             |
+| `back.out(1.7)`                            | Overshoot then settle. RARE — explicitly-playful register only, never a default.                |
+| `elastic.out(1, 0.3)`                      | Springy bounce. Same playful-only rule; prefer a baked spring (see Spring Eases below).         |
+| `expo.inOut`                               | Snappy, dramatic. Quick transitions between hero scenes.                                        |
+| `none` (linear)                            | Camera moves with timed counterpoint, mechanical motion.                                        |
+
+Pick `.out` for entrances, `.in` for exits, `.inOut` for symmetric moves and continuous motion.
+
+**Smooth beats bouncy** — the motion doctrine (`rules/spring-pop-entrance.md`, the workflows' `motion-language.md`): entrances default to `power3.out` or the baked critically-damped spring (see Spring Eases below); overshoot eases (`back` / `elastic` / `bounce`) are a rare, explicitly-playful register, never the house style.
+
+## Easing Vocabulary (character & mood)
+
+Easings are tone of voice: a video that only whispers is boring; one that varies between whisper, normal, and punch is engaging. A composition should draw on ~3 easing characters across its beats — but vary **within the smooth families by energy** (`sine` / `power1` calm → `power3` standard → `power4` / `expo` punch); don't reach for overshoot to add variety. Overshoot is a _register_ (explicitly playful), not a spice. One ease everywhere reads flat; bounce everywhere reads cheap — the second failure is worse.
+
+The full palette by character (each family has `.in`, `.out`, `.inOut` variants):
+
+| Family               | Character                                                                    | Typical use                                                                                                                                  |
+| -------------------- | ---------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------- |
+| `power1`–`power4`    | Gentle (1) to aggressive (4) acceleration curves                             | General purpose. **power3 is the house workhorse**; power2 for gentle secondary motion, power4 for dramatic snaps                            |
+| `back(N)`            | Overshoot then settle. N controls how far past the target (1=subtle, 4=wild) | RARE — explicitly-playful register only, never a default. Keep N ≤ 2; prefer a baked spring at ζ 0.6–0.7 (physical settle, see Spring Eases) |
+| `elastic(amp, freq)` | Spring bounce. amp=magnitude, freq=oscillation speed                         | RARE — same playful-only rule; the baked spring (below) is the physical version                                                              |
+| `bounce`             | Ball-drop bouncing                                                           | RARE — physical-comedy register only (something literally dropping)                                                                          |
+| `expo`               | Extreme acceleration curve (much steeper than power4)                        | Premium/luxury reveals, dramatic entrances                                                                                                   |
+| `sine`               | Smooth, organic, no hard edges                                               | Ambient float, breathing, Ken Burns, anything that loops. `.inOut` for yoyo motion                                                           |
+| `circ`               | Circular acceleration (starts very fast, ends very gentle or vice versa)     | Camera moves, scene transitions, orbital motion                                                                                              |
+| `steps(N)`           | Discrete N-step jumps, no interpolation                                      | Typing effects, cursor blink, counter ticks, retro/digital aesthetics                                                                        |
+
+**Mood mapping:** Match easing character to the beat's emotional content. Smooth/organic easings (`sine`, `power1`) feel contemplative and drifting. Aggressive deceleration (`power4.out`, `expo.out`) feels snappy and confident. Spring overshoot (`back.out`) feels bouncy and physical — but bouncy is a register, not an emphasis tool; reach for it only on explicitly-playful beats. The storyboard's mood description should guide which character fits — not a formula.
+
+## Defaults
+
+```javascript
+const tl = gsap.timeline({
+  paused: true,
+  defaults: { duration: 0.6, ease: "power3.out" }, // the house settle — smooth beats bouncy
+});
+```
+
+Or globally:
+
+```javascript
+gsap.defaults({ duration: 0.6, ease: "power3.out" });
+```
+
+Setting defaults at timeline scope is preferred — it documents the motion language of that composition in one place.
+
+## Spring Eases (baked physics, seek-safe)
+
+The "iOS feel" is a **damped spring's velocity curve**, not a bounce: a fast launch into a long asymptotic settle. Well-made system animations are critically damped or close to it — they barely overshoot, or don't at all. `power3.out` / `expo.out` approximate that curve; when you want the exact one — or a _physical_ overshoot for the rare playful register — bake the spring's closed-form solution into a function ease.
+
+Why not a real-time spring library: an interactive spring is a stateful integrator (velocity accumulates frame to frame), which cannot be seeked deterministically — you'd have to simulate frames 0…N−1 to render frame N. The closed form below is a **pure function of progress** — no state, nothing to desync, seek-safe by construction. This is also why interaction-lib spring solvers are banned in compositions.
+
+```javascript
+// springEase — a damped spring's exact position curve as a GSAP ease.
+// response         ≈ seconds one oscillation would take (0.3–0.6 for entrances)
+// dampingFraction  1.0       = critically damped — smooth settle, NO overshoot (house default)
+//                  0.80–0.85 ≈ the iOS system register — ~1–1.5% overshoot, felt not seen
+//                  0.60–0.70 = explicitly playful — ~5–10% overshoot (rare; replaces back.out)
+function springEase({ response = 0.5, dampingFraction = 1 } = {}) {
+  const w = (2 * Math.PI) / response; // undamped natural frequency
+  const z = dampingFraction;
+  let pos; // x(t): 0 → 1, starting at rest (v0 = 0)
+  if (z < 1) {
+    const wd = w * Math.sqrt(1 - z * z);
+    pos = (t) => 1 - Math.exp(-z * w * t) * (Math.cos(wd * t) + ((z * w) / wd) * Math.sin(wd * t));
+  } else if (z > 1) {
+    const wo = w * Math.sqrt(z * z - 1);
+    pos = (t) =>
+      1 - Math.exp(-z * w * t) * (Math.cosh(wo * t) + ((z * w) / wo) * Math.sinh(wo * t));
+  } else {
+    pos = (t) => 1 - Math.exp(-w * t) * (1 + w * t);
+  }
+  // Settle time: last moment the curve sits outside ±0.1% of target.
+  // Fixed-step scan, runs once at setup — deterministic (no Math.random / Date.now).
+  const EPS = 0.001;
+  const rate = z <= 1 ? z * w : (z - Math.sqrt(z * z - 1)) * w; // slowest decay mode
+  const SCAN = 12 / rate;
+  const N = 4800;
+  let T = SCAN;
+  for (let i = N; i >= 0; i--) {
+    const t = (i / N) * SCAN;
+    if (Math.abs(1 - pos(t)) > EPS) {
+      T = ((i + 1) / N) * SCAN;
+      break;
+    }
+  }
+  const xT = pos(T);
+  return {
+    duration: T, // use as the tween's duration — the settle time IS the physics
+    ease: (p) => pos(p * T) + p * (1 - xT), // normalized so ease(1) === 1 exactly
+  };
+}
+```
+
+Usage — take **both** the ease and the duration from the helper (the settle time is part of the physics; overriding the duration just re-times the same curve, so tune speed via `response` instead):
+
+```javascript
+const settle = springEase({ response: 0.4 }); // critically damped → duration ≈ 0.59s
+tl.fromTo(
+  "#hero",
+  { scale: 0, opacity: 0 },
+  { scale: 1, opacity: 1, duration: settle.duration, ease: settle.ease },
+  0.2,
+);
+```
+
+| dampingFraction   | overshoot       | register                                                                                                                                           |
+| ----------------- | --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------- |
+| **1.0 (default)** | none (monotone) | The house settle — the exact curve `power3.out` approximates. Product / enterprise / serious tone.                                                 |
+| 0.80–0.85         | ~1–1.5%         | "Alive, not bouncy" — the iOS system default register. The overshoot is felt, not seen.                                                            |
+| 0.60–0.70         | ~5–10%          | Explicitly-playful ONLY (same rule as `back.out`, which this replaces — a spring's second-order settle reads physical where `back` reads cartoon). |
+| < 0.55            | > 12%           | Don't. Cartoon-wobble territory.                                                                                                                   |
+
+| response  | duration (ζ=1) | feel                                                         |
+| --------- | -------------- | ------------------------------------------------------------ |
+| 0.25–0.35 | 0.37–0.51s     | tight snap — chips, small UI                                 |
+| 0.35–0.50 | 0.51–0.74s     | standard entrance                                            |
+| 0.50–0.70 | 0.74–1.03s     | weighted hero landing — check the `t ≤ 0.5s` visibility rule |
+
+Craft notes:
+
+- **ζ=1 vs `power3.out`**: the true spring front-loads harder (~67% vs ~58% travelled at quarter-time) and settles on a longer asymptotic tail; max shape difference ~11%. That long tail is the "premium" read — use it when the settle IS the shot (a wordmark landing, a final lockup).
+- **At ζ<1, overshooting curves go on transforms only** — never on `opacity` (it would push past 1) or color. Split opacity onto its own `power2.out` tween at the same timeline position.
+- **Doctrine unchanged**: ζ below ~0.8 is still the rare, explicitly-playful exception (`rules/spring-pop-entrance.md`). The default of this section is ζ=1 — real spring physics is not a license for bounce.
+
+## Stagger
+
+```javascript
+gsap.fromTo(".item", { y: 24, opacity: 0 }, { y: 0, opacity: 1, duration: 0.5, stagger: 0.08 });
+```
+
+Object form:
+
+```javascript
+gsap.fromTo(
+  ".item",
+  { y: 24, opacity: 0 },
+  {
+    y: 0,
+    opacity: 1,
+    stagger: {
+      each: 0.08, // delay between each
+      from: "center", // "start" | "end" | "center" | "edges" | "random" | index
+      amount: 0.6, // total stagger time (overrides each if both set)
+      grid: "auto", // for 2D stagger
+      axis: "x" | "y",
+    },
+  },
+);
+```
+
+Prefer `stagger` over N separate tweens with manual delays — it stays correct when the target count or order changes. Use `fromTo()` rather than `from()` so the start state is explicit (see `gsap-timeline-and-labels.md` → sub-composition entrances).
+
+## Function-Based Values
+
+Any var can be a function `(index, target, targets) => value`:
+
+```javascript
+gsap.to(".item", {
+  x: (i, target, targets) => i * 50,
+  rotation: (i) => (i % 2 === 0 ? 5 : -5),
+  stagger: 0.1,
+});
+```
+
+Use this for per-element values that depend on index, attributes, or measured size. Cheaper and more idiomatic than building tweens in a loop.
+
+## gsap.matchMedia (preview only)
+
+`matchMedia` runs setup only when a media query matches and auto-reverts when it stops matching. It is useful for **preview** in the browser at different viewport sizes, and for `prefers-reduced-motion`. It is **not** a substitute for rendering at the composition's actual `data-width`/`data-height` — HyperFrames renders at a fixed viewport.
+
+```javascript
+let mm = gsap.matchMedia();
+mm.add(
+  {
+    isDesktop: "(min-width: 800px)",
+    reduceMotion: "(prefers-reduced-motion: reduce)",
+  },
+  (context) => {
+    const { isDesktop, reduceMotion } = context.conditions;
+    gsap.to(".box", {
+      rotation: isDesktop ? 360 : 180,
+      duration: reduceMotion ? 0 : 2,
+    });
+  },
+);
+```
diff --git a/.claude/skills-media/hyperframes-animation/adapters/gsap-timeline-and-labels.md b/.claude/skills-media/hyperframes-animation/adapters/gsap-timeline-and-labels.md
new file mode 100644
index 000000000..98256c856
--- /dev/null
+++ b/.claude/skills-media/hyperframes-animation/adapters/gsap-timeline-and-labels.md
@@ -0,0 +1,96 @@
+# Timelines and Labels
+
+HyperFrames is a seek-driven runtime. Build one paused timeline per composition, attach it to `window.__timelines["<composition-id>"]`, and let HyperFrames seek it. Never call `.play()` for render-critical motion.
+
+## Creating a Timeline
+
+```javascript
+const tl = gsap.timeline({
+  paused: true,
+  defaults: { duration: 0.5, ease: "power3.out" },
+});
+
+tl.to(".a", { x: 100 }).to(".b", { y: 50 }).to(".c", { opacity: 0 });
+```
+
+Timeline options:
+
+- **paused: true** — required in HyperFrames. The framework drives the playhead.
+- **repeat**, **yoyo** — apply to the whole timeline. `repeat: -1` is forbidden; use finite counts.
+- **defaults** — vars merged into every child tween. Use this instead of repeating `ease` and `duration` on every line.
+
+## Position Parameter
+
+The third argument to `.to()`/`.from()`/`.fromTo()` controls placement on the timeline:
+
+| Form           | Meaning                              |
+| -------------- | ------------------------------------ |
+| `0`, `1.5`     | Absolute time in seconds             |
+| `"+=0.5"`      | 0.5s after the end of the timeline   |
+| `"-=0.2"`      | 0.2s before the end of the timeline  |
+| `"intro"`      | At the `intro` label                 |
+| `"intro+=0.3"` | 0.3s after the `intro` label         |
+| `"<"`          | Same start as the previous tween     |
+| `">"`          | Right after the previous tween ends  |
+| `"<0.2"`       | 0.2s after the previous tween starts |
+| `">-0.1"`      | 0.1s before the previous tween ends  |
+
+```javascript
+tl.to(".a", { x: 100 }, 0);
+tl.to(".b", { y: 50 }, "<"); // same start as .a
+tl.to(".c", { opacity: 0 }, "<0.2"); // 0.2s after .b starts
+```
+
+Prefer the position parameter over `delay:` — it composes naturally and survives refactors that re-order tweens.
+
+## Labels
+
+```javascript
+tl.addLabel("intro", 0);
+tl.to(".a", { x: 100 }, "intro");
+
+tl.addLabel("outro", "+=0.5");
+tl.to(".a", { opacity: 0 }, "outro");
+```
+
+Labels make a long timeline readable and let multiple tweens converge on the same beat without re-typing absolute times.
+
+## Nesting Timelines
+
+```javascript
+const master = gsap.timeline({ paused: true });
+
+const child = gsap.timeline();
+child.to(".a", { x: 100 }).to(".b", { y: 50 });
+
+master.add(child, 0);
+```
+
+In HyperFrames, **do not** nest sub-composition timelines into the host. Sub-compositions loaded via `data-composition-src` are seeked independently by HyperFrames from their own `data-start`. Nesting is only for grouping pieces of the _same_ composition's timeline.
+
+## Inside Sub-Compositions: prefer `fromTo` over `from`
+
+For entrance tweens inside a sub-composition, prefer `gsap.fromTo()` over `gsap.from()`:
+
+```javascript
+// Sub-composition entrance — survives re-seek cleanly
+tl.fromTo(".title", { y: 60, opacity: 0 }, { y: 0, opacity: 1, duration: 0.6 }, 0.2);
+```
+
+Why: HyperFrames re-seeks the sub-composition every time its host clip becomes visible. `gsap.from()` snapshots the starting state at **registration time** (page load); when the playhead jumps back past `data-start`, that snapshot can desync from the actual CSS state and the element renders in the wrong position. `gsap.fromTo()` declares both endpoints explicitly, so the seek-back always produces the same start state.
+
+In top-level (standalone) compositions either form works — there's no re-seek-through-mount cycle.
+
+## Playback Control (debug / preview only)
+
+```javascript
+tl.play();
+tl.pause();
+tl.reverse();
+tl.restart();
+tl.time(2);
+tl.progress(0.5);
+tl.kill();
+```
+
+These are useful when previewing in the browser. In rendered output HyperFrames calls `seek()` internally — your timeline must produce identical state for the same time value every time it is seeked.
diff --git a/.claude/skills-media/hyperframes-animation/adapters/gsap-transforms-and-perf.md b/.claude/skills-media/hyperframes-animation/adapters/gsap-transforms-and-perf.md
new file mode 100644
index 000000000..7d6274a27
--- /dev/null
+++ b/.claude/skills-media/hyperframes-animation/adapters/gsap-transforms-and-perf.md
@@ -0,0 +1,128 @@
+# Transforms and Performance
+
+## Transform Aliases
+
+Prefer GSAP's transform aliases over raw `transform` strings:
+
+| GSAP property               | Equivalent            |
+| --------------------------- | --------------------- |
+| `x`, `y`, `z`               | `translateX/Y/Z` (px) |
+| `xPercent`, `yPercent`      | `translateX/Y` in `%` |
+| `scale`, `scaleX`, `scaleY` | `scale`               |
+| `rotation`                  | `rotate` (deg)        |
+| `rotationX`, `rotationY`    | 3D rotate             |
+| `skewX`, `skewY`            | `skew`                |
+| `transformOrigin`           | `transform-origin`    |
+
+Aliases let GSAP track and interpolate each axis independently, which prevents accidental overwrites between separate tweens on the same element.
+
+## autoAlpha
+
+Prefer `autoAlpha` over `opacity` for show/hide:
+
+```javascript
+gsap.to(".panel", { autoAlpha: 0, duration: 0.4 });
+```
+
+`autoAlpha: 0` sets both `opacity: 0` and `visibility: hidden`, which removes the element from hit-testing and accessibility tree at zero alpha — closer to "gone" than plain `opacity: 0`. The registered seekable timeline still interpolates only opacity; visibility changes at the hidden endpoint. Use `autoAlpha` only on non-clip elements or wrappers inside a clip; HyperFrames owns `.clip` visibility. Never duration-tween raw `visibility` or `display`.
+
+## clearProps
+
+Removes inline styles set by GSAP when the tween completes:
+
+```javascript
+gsap.to(".item", { x: 100, rotation: 45, clearProps: "all" });
+gsap.to(".item", { x: 100, rotation: 45, clearProps: "rotation,x" });
+```
+
+Useful at the end of an animation segment to hand the element back to CSS.
+
+## CSS Variables
+
+```javascript
+gsap.to(".chart", { "--hue": 180, duration: 1 });
+```
+
+Animate any custom property. Works for color, length, number — anything CSS will interpolate.
+
+## Relative and Directional Values
+
+- Relative: `"+=20"`, `"-=10"`, `"*=2"`.
+- Directional rotation: `"360_cw"`, `"-170_short"`, `"90_ccw"` — controls which way the angle takes when going between two values.
+
+## SVG Specifics
+
+- `svgOrigin` sets transform origin in the SVG's global coordinate space (not the element's local box). **Do not** combine `svgOrigin` with `transformOrigin` on the same element — pick one.
+- Animate SVG transform attributes via the same alias names (`x`, `y`, `rotation`) — GSAP handles the SVG-specific quirks.
+
+## Performance Rules
+
+### Animate transforms, not layout properties
+
+Animate `x`, `y`, `scale`, `rotation`, `opacity`. Never animate `left`, `right`, `top`, `bottom`, `width`, `height`, `margin*`, the text-reflow props `letterSpacing` / `wordSpacing` / `fontSize` — and never `roundProps`.
+
+This is a **render-correctness** rule in HyperFrames, not just a GPU-performance nicety. The renderer seeks frame-by-frame and screenshots each frame, and the browser compositor snaps layout properties to whole device pixels. On a fast tween the per-frame step is several pixels, so the snap is invisible; on a slow tween or a long ease-out tail the value moves less than a pixel per frame — it holds the same pixel for several frames, then jumps a whole one. The result is motion that looks smooth when fast but visibly stutters when slow. Transforms interpolate sub-pixel and stay smooth at any speed. `roundProps` forces the same integer snap onto a transform — don't use it.
+
+"Layout property" is broader than position: anything that triggers **reflow** snaps the same way. `letterSpacing` / `fontSize` are the common trap — a slow "settle" that crawls one of them by a fraction of a pixel per frame dwells on a handful of discrete glyph layouts (visible micro-stutter). The faithful smooth fix depends on which property — **do not reach for `scale` reflexively**:
+
+- **`fontSize`** → animate `scale`. Scaling text up/down is the same visual and stays sub-pixel smooth (no reflow).
+- **`letterSpacing` / `wordSpacing`** → uniform `scale` is **not** the same effect (it resizes the glyphs; it does not change the gaps between them). To animate spacing smoothly, split the text into per-character (or per-word) elements and animate each one's `x` — the glyph spread is a transform, sub-pixel smooth and visually identical to a letter-spacing tween. GSAP's `SplitText` does the split. If the spacing change is a minor flourish, hold the final value statically instead.
+
+Unlike positional props, reflow props snap during browser **layout** — upstream of the canvas raster — so they stutter even in html-in-canvas, and the exception below does **not** apply to them.
+
+#### Fixing a flagged animation — preserve the intent
+
+The lint rule tells you a property will stutter; it does **not** tell you the fix, and a fix that merely passes lint can silently change the look. Swapping a `letterSpacing` tighten for a uniform `scale` lints clean but animates a _different thing_ (it resizes the glyphs instead of closing the gaps). Two rules:
+
+1. **Reproduce the same visual** — same start/end state, same trajectory, only sub-pixel-smooth. Use the faithful equivalent (per-glyph `x` for spacing, `scale` for `fontSize`, `x`/`y` for position), not whichever transform is the least code.
+2. **Verify against the original, not against the linter.** Render the original and the fixed version and compare the motion at its key moments — the fix should differ only by the removed stutter, not by _where things end up_. Lint-clean-and-smooth is not the bar; faithful-and-smooth is.
+
+If the faithful fix is non-trivial (a per-glyph split, a measured offset), build it or surface the tradeoff — never downgrade to a cheaper, different effect just to satisfy the linter.
+
+**Convert a position animation to a transform** by leaving the element at its resting `left`/`top` in CSS and animating the _offset_ with `x`/`y`:
+
+```javascript
+// CSS: #card { left: 1340px; top: 540px }   ← resting position stays in CSS
+tl.to("#card", { left: 1340, top: 540, duration: 1 }); // ✗ stutters
+tl.fromTo("#card", { x: 640, y: 0 }, { x: 0, y: 0, duration: 1 }); // ✓ x/y = delta from CSS rest (640 = startLeft − 1340)
+```
+
+For a parent-relative `left: "100%"` sweep, use `xPercent: 100` only when the element is the full width of its container; otherwise convert to pixels (`x: containerWidth`).
+
+**The one exception:** elements drawn through the html-in-canvas API — those under a `<canvas layoutsubtree>` ancestor, e.g. the `liquid-glass-*` blocks. The canvas rasterizes from sub-pixel `getComputedStyle`, so layout props don't snap there and those elements keep `left`/`top`. Everything the browser lays out (plain DOM) follows the rule.
+
+The `gsap_non_transform_motion` lint rule is the backstop, not the teacher — reach for transforms from the start instead of animating layout props and waiting for lint to reject them.
+
+### will-change (sparingly)
+
+```css
+.title {
+  will-change: transform;
+}
+```
+
+Only on elements that _actually_ animate. Applied everywhere it becomes useless and burns memory.
+
+### gsap.quickTo for frequent updates (preview-only)
+
+For high-frequency updates driven by **events** — pointer move, scroll, audio scrub — `quickTo` reuses the same tween instead of creating a new one each frame:
+
+```javascript
+const xTo = gsap.quickTo("#cursor", "x", { duration: 0.4, ease: "power3" });
+const yTo = gsap.quickTo("#cursor", "y", { duration: 0.4, ease: "power3" });
+
+container.addEventListener("mousemove", (e) => {
+  xTo(e.pageX);
+  yTo(e.pageY);
+});
+```
+
+> **Render mode has no input events.** The renderer seeks frame-by-frame; `mousemove`, `scroll`, etc. never fire. `quickTo`'s main use case applies in **live preview** in the browser only. For audio-reactive motion in renders, pre-extract audio data and drive the timeline declaratively (see `../rules/gsap-effects.md`).
+
+### Stagger beats N tweens
+
+One tween with `stagger` beats N tweens with manual delays for both readability and runtime cost.
+
+### Cleanup
+
+In live preview, pause or `kill()` off-screen animations. Render mode is unaffected (the renderer drives time directly).
diff --git a/.claude/skills-media/hyperframes-animation/adapters/gsap.md b/.claude/skills-media/hyperframes-animation/adapters/gsap.md
new file mode 100644
index 000000000..d47b3d0df
--- /dev/null
+++ b/.claude/skills-media/hyperframes-animation/adapters/gsap.md
@@ -0,0 +1,105 @@
+---
+name: hyperframes-gsap-adapter
+description: GSAP animation API reference for HyperFrames. Use when writing seekable GSAP timelines in HyperFrames compositions, including gsap.to(), from(), fromTo(), set(), timeline position parameters, labels, easing, stagger, finite repeats, and transform performance.
+---
+
+# HyperFrames GSAP
+
+GSAP usage scoped to HyperFrames' seek-driven render model. This skill is the GSAP reference _as constrained by HyperFrames_ — for the framework's broader composition contract see `hyperframes-core`.
+
+## HyperFrames Contract
+
+HyperFrames controls GSAP through its `gsap` runtime adapter. Create a paused timeline synchronously, register it on `window.__timelines` with the exact `data-composition-id`, and let HyperFrames seek it.
+
+```html
+<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+<script>
+  window.__timelines = window.__timelines || {};
+  const tl = gsap.timeline({ paused: true });
+
+  tl.from(".title", { y: 48, opacity: 0, duration: 0.6, ease: "power3.out" }, 0);
+  tl.to(".accent", { scaleX: 1, duration: 0.5, ease: "power2.out" }, 0.25);
+
+  window.__timelines["main"] = tl; // key must equal data-composition-id on the composition root
+</script>
+```
+
+- The registry key must match the composition root's `data-composition-id`.
+- Bracket and dot syntax both register: `window.__timelines["main"] = tl` and `window.__timelines.main = tl` are equivalent (the linter recognizes both). Bracket form is required when the id isn't a valid identifier (e.g. contains `-`).
+- Do not call `tl.play()` for render-critical motion.
+- Do not build timelines inside async code, timers, or event handlers.
+- Keep loops finite. HyperFrames renders finite video durations.
+- **Render duration comes from `data-duration` on the composition root, not from GSAP timeline length.** Do not pad the timeline with empty tweens like `tl.set({}, {}, 283)` to "extend" it. (Some external docs show this trick; in HyperFrames it conflicts with the seek-driven duration model — set `data-duration` instead.)
+
+## Core Tween Methods
+
+- **gsap.to(targets, vars)** — animate from current state to `vars`. Most common.
+- **gsap.from(targets, vars)** — animate from `vars` to current state (entrances).
+- **gsap.fromTo(targets, fromVars, toVars)** — explicit start and end.
+- **gsap.set(targets, vars)** — apply immediately (duration 0).
+
+Always use **camelCase** property names (e.g. `backgroundColor`, `rotationX`).
+
+## Common vars (cheatsheet)
+
+- **duration** — seconds (default 0.5).
+- **delay** — seconds before start.
+- **ease** — `"power1.out"` (default), `"power3.inOut"`, `"back.out(1.7)"`, `"elastic.out(1, 0.3)"`, `"none"`. See `./gsap-easing-and-stagger.md`.
+- **stagger** — number or object. See `./gsap-easing-and-stagger.md`.
+- **repeat** — finite number; never `-1` in HyperFrames. Compute repeats from the visible duration.
+- **yoyo** — alternates direction with repeat.
+- **overwrite** — `false` (default), `true`, or `"auto"`.
+- **immediateRender** — default `true` for from()/fromTo(). Set `false` on later tweens targeting the same property+element.
+- **onComplete**, **onStart**, **onUpdate** — callbacks.
+
+For transforms, autoAlpha, clearProps, and SVG specifics see `./gsap-transforms-and-perf.md`.
+
+## Animated Property Allowlist
+
+HyperFrames is stricter than vanilla GSAP. Animate only:
+
+- **Compositor-cheap**: `opacity`, `x`, `y`, `scale`, `scaleX`, `scaleY`, `rotation`, `rotationX`, `rotationY`, `skewX`, `skewY`, `transformOrigin`
+- **Visual fills**: `color`, `backgroundColor`, `borderColor`, `borderRadius`
+- **CSS variables**: `"--hue": 180` etc.
+- **Media `volume`** (on `<audio>` / `<video>`): animate for fades/ducking, e.g. `tl.to("#bgm", { volume: 0, duration: 1 }, "outro")`. The runtime probes these keyframes from the timeline and drives them in both preview and render (they match). This sets the _author_ volume; `data-volume` is the static baseline when no tween touches the element.
+- **DOM text `innerText`** (for numeric counters): tween it directly, e.g. `tl.to(el, { innerText: 100, snap: { innerText: 1 } })` — `snap` keeps it integer; the GSAP inspector recognizes it as a counter. Equivalent to the `onUpdate`-proxy form in `../rules/counting-dynamic-scale.md`; prefer that proxy form for locale formatting (`toLocaleString`) or suffix logic, and pair it with a separate transform-scale tween when the number should grow.
+
+**Avoid** (use the transform alias instead):
+
+- `width` / `height` / `top` / `left` / `right` / `bottom` / `margin*` / `padding*` — trigger layout reflows. Use `scaleX/Y` (with `transformOrigin`) or `x` / `y`.
+
+**Forbidden** (breaks the renderer or the clip lifecycle):
+
+- `display`, raw `visibility` — never duration-tween these directly. Use `autoAlpha` (opacity plus endpoint visibility) or a zero-duration timeline set at an explicit boundary, and only on a non-clip element or wrapper inside a clip. Never target `.clip` itself.
+- Anything driven by `Math.random()`, `Date.now()`, `performance.now()`, or event handlers — animation state must be deterministic from time alone.
+
+> **Note**: `docs/guides/gsap-animation.mdx` lists `width`/`height`/`visibility` in its "Supported Properties" — that list is too permissive for HyperFrames composition rules. This allowlist is the canonical one. See `hyperframes-core/references/determinism-rules.md` for the full deterministic-render contract.
+
+## References
+
+- `./gsap-timeline-and-labels.md` — timeline creation, position parameter (`+=`, `<`, `>`), labels, nesting, sub-comp `fromTo` preference, playback control.
+- `./gsap-easing-and-stagger.md` — easing families, stagger objects, function-based values, `gsap.matchMedia()`, `gsap.defaults()`.
+- `./gsap-transforms-and-perf.md` — transform aliases, autoAlpha, `quickTo`, `will-change`, performance rules.
+- `../rules/gsap-effects.md` — drop-in recipes: typewriter (with cursor / backspace / word rotation) + audio visualizer (uses `skills/hyperframes-creative/scripts/extract-audio-data.py`).
+
+## Best Practices
+
+- Use camelCase property names; prefer transform aliases and autoAlpha.
+- Prefer timelines over chained tweens with delays; use the position parameter.
+- Add labels with `addLabel()` for readable sequencing.
+- Pass defaults into the timeline constructor.
+- Store the tween/timeline return value when controlling playback.
+
+## Do Not
+
+- Animate layout properties (`width`/`height`/`top`/`left`) when transforms suffice.
+- Use both `svgOrigin` and `transformOrigin` on the same SVG element.
+- Chain animations with `delay` when a timeline can sequence them.
+- Create tweens before the DOM exists.
+- Use infinite `repeat: -1` in HyperFrames compositions — use finite repeat counts computed from the visible duration.
+
+## Credits And References
+
+- HyperFrames adapter source: `packages/core/src/runtime/adapters/gsap.ts`.
+- GSAP documentation: https://gsap.com/docs/v3/
+- GSAP timeline pause and seek behavior: https://gsap.com/docs/v3/GSAP/Timeline/pause%28%29/
diff --git a/.claude/skills-media/hyperframes-animation/adapters/html-in-canvas-patterns.md b/.claude/skills-media/hyperframes-animation/adapters/html-in-canvas-patterns.md
new file mode 100644
index 000000000..f826b1f92
--- /dev/null
+++ b/.claude/skills-media/hyperframes-animation/adapters/html-in-canvas-patterns.md
@@ -0,0 +1,507 @@
+# HTML-in-Canvas Patterns
+
+HyperFrames' most powerful visual capability. Capture ANY live HTML/CSS as a GPU texture, then render it through WebGL shaders, Three.js 3D scenes, or post-processing effects — at 60fps, pixel-perfect, with every CSS feature supported.
+
+**Read this file when a beat deserves cinematic treatment beyond flat GSAP animations.** Use for 1-3 hero beats per video, not every beat. The rest can use standard GSAP — the contrast between flat beats and HTML-in-Canvas beats IS part of the visual storytelling.
+
+---
+
+## Core Boilerplate (same in every HTML-in-Canvas composition)
+
+Every HTML-in-Canvas effect shares this structure. Learn this once, adapt it for any effect.
+
+```html
+<!-- 1. Source HTML — your content goes inside a layoutsubtree canvas -->
+<canvas
+  id="hic-source"
+  layoutsubtree
+  width="1920"
+  height="1080"
+  style="position:absolute;inset:0;opacity:0;"
+>
+  <div id="hic-content" style="width:1920px;height:1080px;">
+    <!-- YOUR HTML CONTENT HERE — text, images, cards, dashboards, anything -->
+  </div>
+</canvas>
+
+<!-- 2. Render target — the visible canvas that shows the effect -->
+<canvas id="hic-output" width="1920" height="1080" style="position:absolute;inset:0;"></canvas>
+```
+
+```js
+// 3. Feature detection — always check, always provide fallback
+function isHiCSupported() {
+  var tc = document.createElement("canvas");
+  if (!("layoutSubtree" in tc)) return false;
+  tc.setAttribute("layoutsubtree", "");
+  var ctx = tc.getContext("2d");
+  return ctx && typeof ctx.drawElementImage === "function";
+}
+var apiOk = isHiCSupported();
+
+// 4. Capture function — call this every frame in onUpdate
+var capCanvas = document.getElementById("hic-source");
+var capCtx = capCanvas.getContext("2d");
+function captureContent() {
+  if (apiOk) {
+    capCtx.drawElementImage(document.getElementById("hic-content"), 0, 0, 1920, 1080);
+  }
+}
+
+// 5. Drive from GSAP timeline — capture + render every frame
+tl.to(
+  proxy,
+  {
+    /* your animation properties */
+    duration: BEAT_DURATION,
+    ease: "sine.inOut",
+    onUpdate: function () {
+      captureContent();
+      // render your effect here (Three.js or WebGL2)
+    },
+  },
+  0,
+);
+```
+
+**Fallback:** When `drawElementImage` is not available (preview without Chrome flag), draw a solid-color placeholder or use Canvas 2D text. The HyperFrames renderer auto-enables the flag — the effect WILL work in the final video. See the liquid-glass block for a complete fallback example.
+
+---
+
+## Effect Catalog
+
+### 1. 3D Rotation with Bloom (Three.js)
+
+**What it looks like:** Content floats in 3D space, slowly rotating with cinematic glow around bright edges. Like a product screenshot displayed in a dark theater.
+
+**When to use:** Hero product showcase, feature reveal, CTA with premium feel.
+
+**Key Three.js components:** `PlaneGeometry` + `CanvasTexture` + `EffectComposer` + `UnrealBloomPass`
+
+```js
+// After the boilerplate above, add:
+var scene3d = new THREE.Scene();
+var camera = new THREE.PerspectiveCamera(45, 1920 / 1080, 0.1, 100);
+camera.position.set(0, 0, 4);
+
+var renderer = new THREE.WebGLRenderer({
+  canvas: document.getElementById("hic-output"),
+  antialias: true,
+  alpha: true,
+});
+renderer.setSize(1920, 1080);
+
+var texture = new THREE.CanvasTexture(capCanvas);
+var mesh = new THREE.Mesh(
+  new THREE.PlaneGeometry(3.6, 2.2),
+  new THREE.MeshBasicMaterial({ map: texture }),
+);
+scene3d.add(mesh);
+
+// Post-processing: bloom for cinematic glow.
+// EffectComposer / RenderPass / UnrealBloomPass are ES-module named imports
+// (see the import block below) — they're NOT properties of THREE in modern
+// versions. Three.js r150+ removed the UMD `examples/js/` globals.
+var composer = new EffectComposer(renderer);
+composer.addPass(new RenderPass(scene3d, camera));
+composer.addPass(new UnrealBloomPass(new THREE.Vector2(1920, 1080), 0.3, 0.4, 0.85));
+
+var proxy = { rotY: -0.12, zoom: 4.2 };
+tl.to(
+  proxy,
+  {
+    rotY: 0.12,
+    zoom: 3.6,
+    duration: BEAT_DURATION,
+    ease: "sine.inOut",
+    onUpdate: function () {
+      captureContent();
+      texture.needsUpdate = true;
+      mesh.rotation.y = proxy.rotY;
+      camera.position.z = proxy.zoom;
+      composer.render();
+    },
+  },
+  0,
+);
+```
+
+**Load Three.js and post-processing via ESM (use a `type="module"` script):**
+
+```html
+<script type="module">
+  import * as THREE from "https://cdn.jsdelivr.net/npm/three@0.181.2/+esm";
+  import { EffectComposer } from "https://cdn.jsdelivr.net/npm/three@0.181.2/examples/jsm/postprocessing/EffectComposer.js";
+  import { RenderPass } from "https://cdn.jsdelivr.net/npm/three@0.181.2/examples/jsm/postprocessing/RenderPass.js";
+  import { ShaderPass } from "https://cdn.jsdelivr.net/npm/three@0.181.2/examples/jsm/postprocessing/ShaderPass.js";
+  import { UnrealBloomPass } from "https://cdn.jsdelivr.net/npm/three@0.181.2/examples/jsm/postprocessing/UnrealBloomPass.js";
+  // ... rest of composition code using these imports
+</script>
+```
+
+The `examples/js/` path was removed in Three.js r152. Use `examples/jsm/` (ES modules) with `three@0.181.2` — the version used by the HyperFrames Three.js adapter.
+
+---
+
+### 2. Magnetic Cursor Distortion (Raw WebGL2)
+
+**What it looks like:** Content warps and bends toward a moving point, like a magnet pulling on pixels. Chromatic aberration splits RGB channels at the distortion site.
+
+**When to use:** Interactive feel, product demo with cursor, "look at THIS feature" moment.
+
+**Key technique:** Custom fragment shader with Gaussian warp + chromatic split. No Three.js needed — just raw WebGL2.
+
+```js
+// WebGL2 setup
+var gl = document.getElementById("hic-output").getContext("webgl2", {
+  alpha: false,
+  preserveDrawingBuffer: true,
+});
+
+// Vertex shader — full-screen quad
+var VS = `#version 300 es
+in vec2 a_pos;
+out vec2 v_uv;
+void main() {
+  v_uv = a_pos * 0.5 + 0.5;
+  gl_Position = vec4(a_pos, 0.0, 1.0);
+}`;
+
+// Fragment shader — magnetic warp + chromatic aberration
+var FS = `#version 300 es
+precision highp float;
+in vec2 v_uv;
+out vec4 fragColor;
+uniform sampler2D u_tex;
+uniform vec2 u_cursor;   // cursor position (0-1)
+uniform float u_strength; // warp strength (0-1)
+
+void main() {
+  vec2 uv = v_uv;
+  vec2 delta = uv - u_cursor;
+  float dist = length(delta);
+  float warp = u_strength * exp(-dist * dist * 8.0);
+  vec2 warped = uv - delta * warp * 0.3;
+
+  // Chromatic aberration at distortion site
+  float aberration = warp * 0.008;
+  float r = texture(u_tex, warped + vec2(aberration, 0.0)).r;
+  float g = texture(u_tex, warped).g;
+  float b = texture(u_tex, warped - vec2(aberration, 0.0)).b;
+  fragColor = vec4(r, g, b, 1.0);
+}`;
+
+// Compile, link, setup quad geometry, upload texture...
+// (See registry/blocks/vfx-magnetic/vfx-magnetic.html for complete implementation)
+
+// Drive cursor position from GSAP
+var proxy = { cx: 0.2, cy: 0.5, strength: 0.0 };
+tl.to(
+  proxy,
+  {
+    cx: 0.8,
+    cy: 0.4,
+    strength: 1.0,
+    duration: BEAT_DURATION,
+    ease: "power2.inOut",
+    onUpdate: function () {
+      captureContent();
+      // Upload texture, set uniforms, draw
+      gl.uniform2f(cursorLoc, proxy.cx, proxy.cy);
+      gl.uniform1f(strengthLoc, proxy.strength);
+      gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
+    },
+  },
+  0,
+);
+```
+
+---
+
+### 3. Shatter / Fragment Explosion (Three.js)
+
+**What it looks like:** Content breaks into geometric fragments that fly apart, revealing what's behind.
+
+**When to use:** Dramatic transition, "breaking free" moment, tension release.
+
+**Key technique:** Subdivide the source texture into triangle mesh fragments using BufferGeometry, then animate each fragment's position/rotation with GSAP.
+
+Study `registry/blocks/vfx-shatter/vfx-shatter.html` for the complete 1156-line implementation. The core idea:
+
+```js
+// 1. Capture content to texture (same boilerplate)
+// Seeded PRNG for determinism — Math.random() is banned
+function mulberry32(seed) {
+  return function () {
+    seed |= 0;
+    seed = (seed + 0x6d2b79f5) | 0;
+    var t = Math.imul(seed ^ (seed >>> 15), 1 | seed);
+    t ^= t + Math.imul(t ^ (t >>> 7), 61 | t);
+    return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
+  };
+}
+var rng = mulberry32(42);
+
+// 2. Create N triangle fragments from the texture
+var fragments = [];
+for (var i = 0; i < NUM_FRAGMENTS; i++) {
+  var geom = new THREE.BufferGeometry();
+  var mesh = new THREE.Mesh(geom, new THREE.MeshBasicMaterial({ map: texture }));
+  scene3d.add(mesh);
+  fragments.push({ mesh: mesh, targetPos: randomExplosionVector(rng), delay: rng() * 0.5 });
+}
+
+// 3. Animate: first hold still, then EXPLODE
+tl.to({}, { duration: holdTime }, 0);
+fragments.forEach(function (frag) {
+  tl.to(
+    frag.mesh.position,
+    {
+      x: frag.targetPos.x,
+      y: frag.targetPos.y,
+      z: frag.targetPos.z,
+      duration: 0.8,
+      ease: "power3.in",
+    },
+    holdTime + frag.delay,
+  );
+  tl.to(
+    frag.mesh.rotation,
+    { x: rng() * 4, y: rng() * 4, duration: 0.8, ease: "power2.in" },
+    holdTime + frag.delay,
+  );
+});
+```
+
+---
+
+### 4. Liquid / Fluid Surface (Three.js)
+
+**What it looks like:** Content floats above a rippling liquid surface with real-time wave dynamics. Or content IS the surface, undulating like water.
+
+**When to use:** Organic/premium feel, ambient background, "living" product showcase.
+
+**Key technique:** Subdivided PlaneGeometry with vertex displacement driven by noise functions in a vertex shader.
+
+Study `registry/blocks/vfx-liquid-background/vfx-liquid-background.html` for the 1244-line implementation. Core idea:
+
+```js
+// Custom vertex shader with wave displacement
+var vertexShader = `
+  varying vec2 vUv;
+  uniform float u_time;
+  void main() {
+    vUv = uv;
+    vec3 pos = position;
+    // Sine wave displacement
+    pos.z += sin(pos.x * 3.0 + u_time * 2.0) * 0.15;
+    pos.z += cos(pos.y * 2.5 + u_time * 1.5) * 0.1;
+    gl_Position = projectionMatrix * modelViewMatrix * vec4(pos, 1.0);
+  }
+`;
+
+var mesh = new THREE.Mesh(
+  new THREE.PlaneGeometry(4, 3, 64, 64), // heavily subdivided for smooth waves
+  new THREE.ShaderMaterial({
+    vertexShader: vertexShader,
+    fragmentShader: `varying vec2 vUv; uniform sampler2D u_tex;
+      void main() { gl_FragColor = texture2D(u_tex, vUv); }`,
+    uniforms: {
+      u_tex: { value: texture },
+      u_time: { value: 0 },
+    },
+  }),
+);
+```
+
+---
+
+### 5. Portal / Dimensional Reveal (Three.js)
+
+**What it looks like:** A glowing circular portal opens and content emerges through it from another dimension.
+
+**When to use:** Product reveal, "entering the app" moment, hero feature introduction.
+
+Study `registry/blocks/vfx-portal/vfx-portal.html` for the complete 863-line implementation.
+
+---
+
+## When to Use HTML-in-Canvas vs Standard GSAP
+
+| Scenario                         | Use                                  | Why                                  |
+| -------------------------------- | ------------------------------------ | ------------------------------------ |
+| Hero product screenshot showcase | HTML-in-Canvas (3D rotation + bloom) | Makes flat UI feel cinematic         |
+| Feature list / stats             | Standard GSAP                        | Content-focused, doesn't need 3D     |
+| CTA / brand reveal               | HTML-in-Canvas (portal or magnetic)  | Makes the moment memorable           |
+| Social proof / logos             | Standard GSAP                        | Orderly cascade, trust is steady     |
+| Transition between acts          | HTML-in-Canvas (shatter)             | Dramatic act break                   |
+| Background atmosphere            | HTML-in-Canvas (liquid surface)      | Premium ambient feel                 |
+| Quick feature cards              | Standard GSAP                        | Speed matters, 3D would slow it down |
+
+---
+
+## More Effects You Can Build
+
+These aren't in the VFX blocks — build them yourself from the core boilerplate + a custom fragment shader. Each effect is a single GLSL function applied to the captured texture.
+
+### 6. Noise Dissolve
+
+Content dissolves into noise particles, revealing what's behind. Great for transitions.
+
+```glsl
+// Fragment shader — noise-based dissolve
+uniform float u_progress; // 0.0 = fully visible, 1.0 = fully dissolved
+uniform sampler2D u_tex;
+
+float hash(vec2 p) {
+  return fract(sin(dot(p, vec2(127.1, 311.7))) * 43758.5453);
+}
+
+void main() {
+  vec2 uv = v_uv;
+  float noise = hash(uv * 50.0);
+  float threshold = u_progress;
+  if (noise < threshold) {
+    // Edge glow at the dissolve boundary
+    float edge = smoothstep(threshold - 0.05, threshold, noise);
+    fragColor = vec4(1.0, 0.6, 0.2, 1.0) * (1.0 - edge); // orange edge glow
+  } else {
+    fragColor = texture(u_tex, uv);
+  }
+}
+```
+
+### 7. Holographic / Iridescent
+
+Content gets a rainbow-shifting holographic sheen that moves with time. Premium, futuristic feel.
+
+```glsl
+uniform float u_time;
+uniform sampler2D u_tex;
+
+void main() {
+  vec4 color = texture(u_tex, v_uv);
+  // Iridescent color shift based on position + time
+  float angle = v_uv.x * 6.28 + v_uv.y * 3.14 + u_time * 0.5;
+  vec3 holo = vec3(
+    sin(angle) * 0.5 + 0.5,
+    sin(angle + 2.094) * 0.5 + 0.5,
+    sin(angle + 4.189) * 0.5 + 0.5
+  );
+  // Blend holographic over content (subtle overlay)
+  fragColor = vec4(mix(color.rgb, holo, 0.15 + 0.1 * sin(u_time)), color.a);
+}
+```
+
+### 8. Scan Lines + CRT
+
+Retro CRT monitor look — scan lines, slight curvature, phosphor glow. Great for "code" or "terminal" beats.
+
+```glsl
+uniform sampler2D u_tex;
+uniform float u_time;
+
+void main() {
+  vec2 uv = v_uv;
+  // Barrel distortion (CRT curvature)
+  vec2 centered = uv - 0.5;
+  float dist = dot(centered, centered);
+  uv = uv + centered * dist * 0.15;
+
+  vec4 color = texture(u_tex, uv);
+  // Scan lines
+  float scanline = sin(uv.y * 800.0) * 0.04;
+  color.rgb -= scanline;
+  // Slight RGB offset (phosphor)
+  color.r = texture(u_tex, uv + vec2(0.001, 0.0)).r;
+  color.b = texture(u_tex, uv - vec2(0.001, 0.0)).b;
+  // Vignette
+  float vignette = 1.0 - dist * 2.0;
+  fragColor = vec4(color.rgb * vignette, 1.0);
+}
+```
+
+### 9. Frosted Glass Blur
+
+Content behind frosted glass — visible but softened, with subtle light refraction. Good for "behind the scenes" or "coming soon" moments.
+
+```glsl
+uniform sampler2D u_tex;
+uniform float u_blur; // 0.0 = clear, 1.0 = full frost
+
+void main() {
+  vec2 uv = v_uv;
+  vec4 color = vec4(0.0);
+  // Box blur with offset
+  float radius = u_blur * 0.015;
+  for (float x = -2.0; x <= 2.0; x += 1.0) {
+    for (float y = -2.0; y <= 2.0; y += 1.0) {
+      color += texture(u_tex, uv + vec2(x, y) * radius);
+    }
+  }
+  color /= 25.0;
+  // Add frost noise texture
+  float frost = fract(sin(dot(uv * 200.0, vec2(12.9898, 78.233))) * 43758.5453);
+  color.rgb += frost * 0.03 * u_blur;
+  fragColor = color;
+}
+```
+
+### 10. Pixel Sort / Glitch Art
+
+Pixels rearrange themselves in vertical or horizontal strips — digital art aesthetic. Great for tech/creative brands.
+
+```glsl
+uniform sampler2D u_tex;
+uniform float u_intensity; // 0-1
+
+void main() {
+  vec2 uv = v_uv;
+  // Random horizontal displacement per row
+  float row = floor(uv.y * 80.0);
+  float noise = fract(sin(row * 127.1) * 43758.5);
+  float displace = step(0.7, noise) * u_intensity * 0.1;
+  // Shift UV with RGB split
+  float r = texture(u_tex, uv + vec2(displace, 0.0)).r;
+  float g = texture(u_tex, uv).g;
+  float b = texture(u_tex, uv - vec2(displace * 0.5, 0.0)).b;
+  fragColor = vec4(r, g, b, 1.0);
+}
+```
+
+---
+
+## Creating ANY Custom Effect
+
+The fragment shaders above are templates. The pattern is always:
+
+1. **Capture your HTML content** with `drawElementImage` (the boilerplate at the top)
+2. **Upload the captured canvas as a WebGL texture**
+3. **Write a fragment shader** that reads from the texture and outputs modified colors
+4. **Drive shader uniforms from GSAP** via `onUpdate`
+
+Any GLSL effect from ShaderToy, The Book of Shaders, CodePen, or anywhere else can be adapted:
+
+1. Find an effect you like (search "GLSL [effect name]" or browse shadertoy.com)
+2. Copy the fragment shader
+3. Replace `iResolution` with `vec2(1920.0, 1080.0)`, `iTime` with your `u_time` uniform
+4. Add `uniform sampler2D u_tex;` for the captured content texture
+5. Wire the uniforms to GSAP proxy values
+
+**Geometry ideas beyond flat planes:**
+
+- `SphereGeometry` — content mapped onto a globe (world map, global reach)
+- `CylinderGeometry` — content on a rotating cylinder (carousel/scroll feel)
+- `TorusGeometry` — content wrapped around a ring (infinity, cycle)
+- `BoxGeometry` — content on a 3D box (product packaging, dice)
+- GLTF models — content mapped as screen texture on phone, laptop, monitor (see `vfx-iphone-device`)
+
+**Post-processing stacking** (Three.js EffectComposer):
+
+- Bloom + film grain = cinematic
+- Bloom + chromatic aberration = lens effect
+- Depth of field + vignette = focused attention
+- Film grain + scan lines = retro
+- Multiple passes stack — add as many as you want
+
+**You are not limited to the effects listed here.** If you can imagine a visual treatment, you can build it. The HTML-in-Canvas API gives you the source material (any HTML rendered as a texture), and WebGL/Three.js gives you unlimited creative control over how that material is presented.
diff --git a/.claude/skills-media/hyperframes-animation/adapters/lottie.md b/.claude/skills-media/hyperframes-animation/adapters/lottie.md
new file mode 100644
index 000000000..5f56d33ea
--- /dev/null
+++ b/.claude/skills-media/hyperframes-animation/adapters/lottie.md
@@ -0,0 +1,117 @@
+---
+name: hyperframes-lottie
+description: Lottie and dotLottie adapter patterns for HyperFrames. Use when embedding lottie-web JSON animations, .lottie files, @lottiefiles/dotlottie-web players, registering instances on window.__hfLottie, or making After Effects exports deterministic in HyperFrames.
+---
+
+# Lottie for HyperFrames
+
+HyperFrames can seek both `lottie-web` and dotLottie players through its `lottie` runtime adapter. Lottie is a strong fit because the animation timeline is already encoded in the asset; HyperFrames only needs a player object it can seek.
+
+## Contract
+
+- Load assets from local project files, usually under `assets/`.
+- Set `autoplay: false`.
+- Prefer `loop: false` unless the user explicitly wants a loop.
+- Register every returned animation or player on `window.__hfLottie`.
+- Keep the Lottie container dimensions stable with CSS.
+
+The adapter seeks `lottie-web` with `goToAndStop(timeMs, false)` and dotLottie with frame or percentage APIs depending on player shape.
+
+## lottie-web Pattern
+
+```html
+<div id="logo-lottie" class="lottie-layer"></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("logo-lottie"),
+    renderer: "svg",
+    loop: false,
+    autoplay: false,
+    path: "assets/logo-reveal.json",
+  });
+
+  window.__hfLottie = window.__hfLottie || [];
+  window.__hfLottie.push(anim);
+</script>
+```
+
+```css
+.lottie-layer {
+  width: 100%;
+  height: 100%;
+}
+```
+
+## dotLottie Pattern
+
+```html
+<canvas id="product-lottie" class="lottie-canvas"></canvas>
+<script src="https://unpkg.com/@lottiefiles/dotlottie-web"></script>
+<script>
+  const player = new DotLottie({
+    canvas: document.getElementById("product-lottie"),
+    src: "assets/product-flow.lottie",
+    autoplay: false,
+    loop: false,
+  });
+
+  window.__hfLottie = window.__hfLottie || [];
+  window.__hfLottie.push(player);
+</script>
+```
+
+```css
+.lottie-canvas {
+  width: 100%;
+  height: 100%;
+  display: block;
+}
+```
+
+## Multiple Animations
+
+Push each player into the same registry:
+
+```js
+window.__hfLottie = window.__hfLottie || [];
+window.__hfLottie.push(backgroundAnim);
+window.__hfLottie.push(iconAnim);
+window.__hfLottie.push(confettiAnim);
+```
+
+HyperFrames seeks them all to the same composition time.
+
+## Composition Duration
+
+The render engine needs the composition's total length. GSAP timelines report duration automatically; a Lottie-only composition has no timeline object, so the runtime reads the registered animation's native length directly — `totalFrames / frameRate` for `lottie-web`, or the player's own `duration` for dotLottie. `data-duration` on the root element is optional for Lottie compositions: as long as every animation is registered on `window.__hfLottie` (per the contract above), the runtime has a finite duration to work with even when you set `loop: true`.
+
+## Good Uses
+
+- After Effects exports that are already known to render correctly in lottie-web.
+- Logo reveals, icon loops, decorative accents, and product UI motion.
+- Translating Remotion Lottie usage into plain HyperFrames HTML.
+
+## Avoid
+
+- Relying on remote `path` URLs at render time.
+- Starting playback with `play()`.
+- Assuming unsupported After Effects effects will survive export. Test the JSON or `.lottie` file in a browser first.
+- Loading a player asynchronously and registering it after HyperFrames validation has already inspected the page.
+
+## Validation
+
+After editing a Lottie composition:
+
+```bash
+npx hyperframes lint
+npx hyperframes check
+```
+
+## Credits And References
+
+- HyperFrames adapter source: `packages/core/src/runtime/adapters/lottie.ts`.
+- Duration auto-inference: `packages/core/src/runtime/init.ts` (`resolveAdapterDurationFloorSeconds`), `getInferredDurationSeconds` in the adapter above.
+- lottie-web by Airbnb: https://github.com/airbnb/lottie-web
+- lottie-web `loadAnimation` options: https://github.com/airbnb/lottie-web/wiki/loadAnimation-options
+- dotLottie web player methods by LottieFiles: https://developers.lottiefiles.com/docs/dotlottie-player/dotlottie-web/methods
diff --git a/.claude/skills-media/hyperframes-animation/adapters/three.md b/.claude/skills-media/hyperframes-animation/adapters/three.md
new file mode 100644
index 000000000..e6c3b1c55
--- /dev/null
+++ b/.claude/skills-media/hyperframes-animation/adapters/three.md
@@ -0,0 +1,131 @@
+---
+name: hyperframes-three
+description: Three.js and WebGL adapter patterns for HyperFrames. Use when creating deterministic Three.js scenes, WebGL canvas layers, AnimationMixer timelines, camera motion, shader-driven visuals, or canvas renders that respond to HyperFrames hf-seek events.
+---
+
+# Three.js for HyperFrames
+
+HyperFrames supports Three.js through its `three` runtime adapter. The adapter does not own your scene. It publishes HyperFrames time and dispatches a seek event so your composition can render the exact frame.
+
+## Contract
+
+- Create the scene, camera, renderer, materials, and assets synchronously when possible.
+- Render from HyperFrames time, not wall-clock time.
+- Listen for the `hf-seek` event and render exactly that time.
+- Load models, textures, and HDRIs before render-critical seeking. Do not fetch them at seek time.
+- Avoid `requestAnimationFrame` or `renderer.setAnimationLoop` as the source of truth for render-critical motion.
+- **Always set `data-duration="<seconds>"` on the root `[data-composition-id]` element.** Unlike CSS/WAAPI/Lottie, the `three` adapter has no duration auto-inference — it only forwards time via `hf-seek`/`__hfThreeTime`, it doesn't inspect your scene for an `AnimationClip`/`AnimationMixer` length. Without `data-duration` (and no GSAP timeline), the render engine has no way to know how long to capture and fails with "Composition has zero duration". `npx hyperframes lint` errors on this (`root_composition_missing_duration_source`).
+
+The adapter sets `window.__hfThreeTime` and dispatches `new CustomEvent("hf-seek", { detail: { time } })` on each seek.
+
+## Basic Pattern
+
+```html
+<canvas id="three-layer"></canvas>
+<script type="module">
+  import * as THREE from "https://cdn.jsdelivr.net/npm/three@0.181.2/+esm";
+
+  const canvas = document.getElementById("three-layer");
+  const renderer = new THREE.WebGLRenderer({ canvas, alpha: true, antialias: true });
+  // Match these to your composition's frame size.
+  renderer.setSize(1920, 1080, false);
+  renderer.setPixelRatio(1);
+
+  const scene = new THREE.Scene();
+  const camera = new THREE.PerspectiveCamera(35, 1920 / 1080, 0.1, 100);
+  camera.position.set(0, 0, 6);
+
+  const mesh = new THREE.Mesh(
+    new THREE.IcosahedronGeometry(1.4, 4),
+    new THREE.MeshStandardMaterial({ color: 0x64d2ff, roughness: 0.38 }),
+  );
+  scene.add(mesh);
+  scene.add(new THREE.HemisphereLight(0xffffff, 0x223344, 2));
+
+  function renderAt(time) {
+    mesh.rotation.y = time * 0.7;
+    mesh.rotation.x = Math.sin(time * 0.6) * 0.16;
+    renderer.render(scene, camera);
+  }
+
+  window.addEventListener("hf-seek", (event) => {
+    renderAt(event.detail.time);
+  });
+
+  renderAt(window.__hfThreeTime || 0);
+</script>
+```
+
+```css
+#three-layer {
+  width: 100%;
+  height: 100%;
+  display: block;
+}
+```
+
+## Loading Addons (`GLTFLoader`, `OrbitControls`, etc.)
+
+For anything under `three/addons/`, use an importmap so bare specifiers resolve. The HyperFrames lint recognizes both this form and the inline `+esm` import above — pick whichever your composition needs.
+
+```html
+<script type="importmap">
+  {
+    "imports": {
+      "three": "https://cdn.jsdelivr.net/npm/three@0.181.2/build/three.module.js",
+      "three/addons/": "https://cdn.jsdelivr.net/npm/three@0.181.2/examples/jsm/"
+    }
+  }
+</script>
+<script type="module">
+  import * as THREE from "three";
+  import { GLTFLoader } from "three/addons/loaders/GLTFLoader.js";
+  import { OrbitControls } from "three/addons/controls/OrbitControls.js";
+  // ...
+</script>
+```
+
+Pin the `three` version in both entries to the same value. Mixing versions across the map and bare imports causes silent breakage.
+
+## AnimationMixer Pattern
+
+For GLTF or authored clip animation, seek the mixer directly:
+
+```js
+function renderAt(time) {
+  mixer.setTime(time);
+  renderer.render(scene, camera);
+}
+```
+
+If several mixers exist, seek all of them from the same `time`.
+
+## Good Uses
+
+- Deterministic 3D objects, product spins, particles with seeded data, and shader plates.
+- Camera moves derived from `time`.
+- GLTF animation clips when assets are local and loaded before validation completes.
+
+## Avoid
+
+- Using `Date.now()`, `performance.now()`, or clock deltas to update scene state.
+- Leaving render-critical work inside a free-running animation loop.
+- Loading remote models or textures at render time.
+- Device-pixel-ratio dependent output. Pin renderer size and pixel ratio for video renders.
+- Post-processing passes that depend on previous frame history unless you can reconstruct state from time.
+
+## Validation
+
+After editing a Three.js composition:
+
+```bash
+npx hyperframes lint
+npx hyperframes check
+```
+
+## Credits And References
+
+- HyperFrames adapter source: `packages/core/src/runtime/adapters/three.ts`.
+- Why `data-duration` is required here specifically (no auto-inference for this adapter): `packages/core/src/runtime/init.ts` (`resolveAdapterDurationFloorSeconds`) and the CSS/WAAPI/Lottie adapters' `getInferredDurationSeconds`, which the `three` adapter deliberately does not implement.
+- Three.js `WebGLRenderer` docs: https://threejs.org/docs/pages/WebGLRenderer.html
+- Three.js `AnimationMixer.setTime()` docs: https://threejs.org/docs/pages/AnimationMixer.html
diff --git a/.claude/skills-media/hyperframes-animation/adapters/typegpu.md b/.claude/skills-media/hyperframes-animation/adapters/typegpu.md
new file mode 100644
index 000000000..8af87c8ff
--- /dev/null
+++ b/.claude/skills-media/hyperframes-animation/adapters/typegpu.md
@@ -0,0 +1,178 @@
+---
+name: hyperframes-typegpu
+description: TypeGPU and raw WebGPU adapter patterns for HyperFrames. Use when creating GPU-rendered compositions with TypeGPU, raw WebGPU, WGSL fragment shaders, compute pipelines, liquid glass effects, particle systems, or any canvas layer driven by navigator.gpu that responds to HyperFrames hf-seek events.
+---
+
+# TypeGPU / WebGPU for HyperFrames
+
+HyperFrames supports TypeGPU and raw WebGPU through its `typegpu` runtime adapter. The adapter does not own your pipeline. It publishes HyperFrames time and dispatches a seek event so your composition can render the exact GPU frame.
+
+## Render-environment prerequisite (WebGPU + html-in-canvas)
+
+The render engine auto-passes `--enable-unsafe-webgpu` and `--enable-features=CanvasDrawElement` to its Chrome launch args. Stock Chromium and the bundled headless-shell **do not** support WebGPU + `drawElementImage` together — the combo that liquid-glass blocks need (`ios26-liquid-glass`, `macos-tahoe-liquid-glass`, `liquid-glass-*`, `vfx-liquid-glass`). For those blocks, point the engine at Brave (or Chrome canary) by setting `PRODUCER_HEADLESS_SHELL_PATH` to the browser binary before running `npx hyperframes render` / `preview`. Plain TypeGPU layers without HTML-as-texture work in headless-shell — only the html-in-canvas + WebGPU combination needs the override.
+
+## Contract
+
+- Initialize WebGPU asynchronously (`await navigator.gpu.requestAdapter()`), but register all GSAP tweens **synchronously** — before any `await`. The HyperFrames player reads the timeline immediately at page load.
+- Render from HyperFrames time, not `performance.now()`.
+- Listen for the `hf-seek` event and re-render at exactly that time.
+- Guard against environments where WebGPU is unavailable — the adapter does not check for you.
+- For video renders, call `await device.queue.onSubmittedWorkDone()` after submitting GPU work to ensure the canvas is flushed before the frame is captured.
+
+The adapter sets `window.__hfTypegpuTime` and dispatches `new CustomEvent("hf-seek", { detail: { time } })` on each seek.
+
+## Basic Pattern
+
+```html
+<canvas id="gpu-layer"></canvas>
+<script>
+  (async () => {
+    if (!navigator.gpu) return;
+    const adapter = await navigator.gpu.requestAdapter();
+    if (!adapter) return;
+    const device = await adapter.requestDevice();
+    const canvas = document.getElementById("gpu-layer");
+    canvas.width = 1920;
+    canvas.height = 1080;
+    const ctx = canvas.getContext("webgpu");
+    const fmt = navigator.gpu.getPreferredCanvasFormat();
+    ctx.configure({ device, format: fmt, alphaMode: "opaque" });
+
+    // Build your pipeline, buffers, bind groups...
+    const timeUniform = new Float32Array([0]);
+    const timeBuf = device.createBuffer({
+      size: 16,
+      usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST,
+    });
+
+    function render(t) {
+      timeUniform[0] = t;
+      device.queue.writeBuffer(timeBuf, 0, timeUniform);
+      const enc = device.createCommandEncoder();
+      const pass = enc.beginRenderPass({
+        colorAttachments: [
+          {
+            view: ctx.getCurrentTexture().createView(),
+            loadOp: "clear",
+            clearValue: { r: 0, g: 0, b: 0, a: 1 },
+            storeOp: "store",
+          },
+        ],
+      });
+      pass.setPipeline(pipeline);
+      pass.setBindGroup(0, bindGroup);
+      pass.draw(3);
+      pass.end();
+      device.queue.submit([enc.finish()]);
+    }
+
+    render(0);
+    window.addEventListener("hf-seek", (e) => render(e.detail.time));
+  })();
+</script>
+```
+
+## Timeline Registration
+
+GSAP tweens that drive text, captions, or HTML elements must be registered **synchronously** — before any `await`:
+
+```js
+const tl = gsap.timeline({ paused: true });
+
+// Caption tweens: synchronous, added before WebGPU init
+gsap.set(".cap", { opacity: 0 });
+tl.to("#cap-1", { opacity: 1, duration: 0.3 }, 1.0);
+tl.to("#cap-1", { opacity: 0, duration: 0.2 }, 3.5);
+
+window.__timelines["my-comp"] = tl;
+
+// GPU-dependent tweens can go inside the async IIFE
+(async () => {
+  // ... WebGPU init ...
+  const proxy = { value: 0 };
+  tl.to(proxy, { value: 1, duration: 2, onUpdate: render }, 0.5);
+})();
+```
+
+## Video-Backed Effects (Liquid Glass, Distortion)
+
+To use a `<video>` as the GPU input texture:
+
+```js
+const videoEl = document.getElementById("aroll");
+
+// Wait for video metadata before creating the texture
+await new Promise((r) => {
+  if (videoEl.readyState >= 1) r();
+  else videoEl.addEventListener("loadedmetadata", r, { once: true });
+});
+
+// Create texture at the video's NATIVE resolution
+const vw = videoEl.videoWidth,
+  vh = videoEl.videoHeight;
+const bgTex = device.createTexture({
+  size: [vw, vh],
+  format: "rgba8unorm",
+  usage:
+    GPUTextureUsage.COPY_DST | GPUTextureUsage.TEXTURE_BINDING | GPUTextureUsage.RENDER_ATTACHMENT,
+});
+
+function render(t) {
+  try {
+    device.queue.copyExternalImageToTexture({ source: videoEl }, { texture: bgTex }, [vw, vh]);
+  } catch (_) {
+    /* frame not decoded yet */
+  }
+  // ... draw ...
+}
+```
+
+**Render-mode caveat:** headless Chrome may fail `copyExternalImageToTexture` for video elements. For production renders, pre-extract key frames via FFmpeg as PNGs and load them as image textures instead.
+
+## Frosted Blur via Downsample Pass
+
+A single-pass Gaussian kernel is too weak for glass-like frosted blur. Use a two-pass approach:
+
+1. **Pass 1 — Downsample:** render the full-res texture to a small texture (1/6 resolution). Bilinear filtering during the downsample naturally averages pixels.
+2. **Pass 2 — Glass composite:** sample the small texture for the frosted interior (bilinear upscale = heavy smooth blur) and the full-res texture for sharp areas and chromatic refraction.
+
+This matches TypeGPU's `textureSampleBias` mip-level approach without generating mipmaps.
+
+## Transparent vs Opaque Canvas
+
+- **`alphaMode: 'opaque'`** — the GPU canvas renders the full frame (video + effect). Use when the GPU pipeline handles all visual content.
+- **`alphaMode: 'premultiplied'`** — the GPU canvas is transparent where alpha = 0, letting HTML elements below show through. Use for overlays (particles, path animations) on top of a regular `<video>` element.
+
+## WGSL Full-Screen Triangle
+
+The standard vertex shader for full-screen effects (no vertex buffer needed):
+
+```wgsl
+struct Vo { @builtin(position) pos: vec4f, @location(0) uv: vec2f }
+
+@vertex fn vs(@builtin(vertex_index) vi: u32) -> Vo {
+  let ps = array<vec2f, 3>(vec2f(-1., -1.), vec2f(3., -1.), vec2f(-1., 3.));
+  let ts = array<vec2f, 3>(vec2f(0., 1.), vec2f(2., 1.), vec2f(0., -1.));
+  return Vo(vec4f(ps[vi], 0., 1.), ts[vi]);
+}
+```
+
+Draw with `pass.draw(3)` — one triangle that covers the viewport.
+
+## Rounded-Rect SDF (Liquid Glass Pill)
+
+```wgsl
+fn sdf_box(p: vec2f, half_size: vec2f, corner_radius: f32) -> f32 {
+  let d = abs(p) - half_size + vec2f(corner_radius);
+  return length(max(d, vec2f(0.))) + min(max(d.x, d.y), 0.) - corner_radius;
+}
+```
+
+Use this to define inside/ring/outside zones for glass effects. Negative values are inside the shape.
+
+## Deterministic Rendering
+
+- No `Math.random()` — use a seeded PRNG.
+- No `requestAnimationFrame` for the render loop — render only in response to `hf-seek`.
+- No `performance.now()` for animation time — read `window.__hfTypegpuTime` or `e.detail.time`.
+- After GPU submit, call `await device.queue.onSubmittedWorkDone()` for render-mode frame capture.
diff --git a/.claude/skills-media/hyperframes-animation/adapters/waapi.md b/.claude/skills-media/hyperframes-animation/adapters/waapi.md
new file mode 100644
index 000000000..fc87cdad9
--- /dev/null
+++ b/.claude/skills-media/hyperframes-animation/adapters/waapi.md
@@ -0,0 +1,101 @@
+---
+name: hyperframes-waapi
+description: Web Animations API adapter patterns for HyperFrames. Use when authoring element.animate() motion, Animation currentTime seeking, document.getAnimations(), KeyframeEffect timing, fill modes, or native browser animations that must render deterministically in HyperFrames.
+---
+
+# Web Animations API for HyperFrames
+
+HyperFrames can seek Web Animations API animations through its `waapi` runtime adapter. WAAPI is useful when you want native browser keyframes with JavaScript-created timing and no GSAP dependency.
+
+## Contract
+
+- Create animations synchronously during composition initialization.
+- Use `element.animate(...)` with finite `duration` and `iterations`.
+- Use `fill: "both"` so seeked states persist.
+- Pause animations after creation or let the adapter pause them on first seek.
+- Avoid callbacks and promises for render-critical state.
+
+The adapter calls `document.getAnimations()`, sets each animation's `currentTime` to HyperFrames time in milliseconds, then pauses it.
+
+## Basic Pattern
+
+```html
+<div id="orb" class="clip orb" data-start="2" data-duration="3" data-track-index="2"></div>
+
+<script>
+  const orb = document.getElementById("orb");
+  const animation = orb.animate(
+    [
+      { transform: "translate3d(-160px, 0, 0) scale(0.8)", opacity: 0 },
+      { transform: "translate3d(0, 0, 0) scale(1)", opacity: 1, offset: 0.35 },
+      { transform: "translate3d(120px, 0, 0) scale(1.08)", opacity: 1 },
+    ],
+    {
+      duration: 3000,
+      delay: 2000,
+      easing: "cubic-bezier(0.2, 0, 0, 1)",
+      fill: "both",
+      iterations: 1,
+    },
+  );
+
+  animation.pause();
+</script>
+```
+
+## Stagger Pattern
+
+```js
+document.querySelectorAll(".token").forEach((token, index) => {
+  const animation = token.animate(
+    [
+      { transform: "translateY(24px)", opacity: 0 },
+      { transform: "translateY(0)", opacity: 1 },
+    ],
+    {
+      duration: 620,
+      delay: index * 80,
+      easing: "cubic-bezier(0.2, 0, 0, 1)",
+      fill: "both",
+      iterations: 1,
+    },
+  );
+  animation.pause();
+});
+```
+
+## Good Uses
+
+- Lightweight DOM motion where CSS keyframes are too rigid and GSAP is unnecessary.
+- Generated animations from structured data.
+- Simple timelines that can be represented as keyframes, delays, and offsets.
+
+## Composition Duration
+
+The render engine needs the composition's total length to know how many frames to capture. GSAP timelines report duration automatically; a WAAPI-only composition has no timeline object, so the runtime infers duration from every animation's `effect.getComputedTiming().endTime` (offset by when the animation was created relative to composition start). `data-duration` on the root element is optional as long as every `element.animate()` call uses finite `duration` and `iterations` — which the contract above already requires.
+
+Infinite `iterations` has no finite `endTime`, so it can't be auto-inferred — that's one more reason to avoid it (see Avoid below). If you must use it, add `data-duration="<seconds>"` to the root `[data-composition-id]` element or `npx hyperframes lint` will error (`root_composition_missing_duration_source`).
+
+## Avoid
+
+- Infinite `iterations`.
+- Depending on `animation.finished` to mutate render-critical DOM.
+- Running separate clocks with `requestAnimationFrame`, timers, or `performance.now()`.
+- Animating layout properties when transforms and opacity can express the motion.
+- Assuming clip-local start time is automatic. WAAPI adapter seeks document-level animation time; model clip offsets with `delay` or create the animation on an element whose visibility is controlled by HyperFrames timing.
+
+## Validation
+
+After editing a WAAPI composition:
+
+```bash
+npx hyperframes lint
+npx hyperframes check
+```
+
+## Credits And References
+
+- HyperFrames adapter source: `packages/core/src/runtime/adapters/waapi.ts`.
+- Duration auto-inference: `packages/core/src/runtime/init.ts` (`resolveAdapterDurationFloorSeconds`), `getInferredDurationSeconds` in the adapter above.
+- MDN Web Animations API guide: https://developer.mozilla.org/docs/Web/API/Web_Animations_API/Using_the_Web_Animations_API
+- MDN `Animation.currentTime`: https://developer.mozilla.org/en-US/docs/Web/API/Animation/currentTime
diff --git a/.claude/skills-media/hyperframes-animation/blueprints-index.md b/.claude/skills-media/hyperframes-animation/blueprints-index.md
new file mode 100644
index 000000000..55409a4c8
--- /dev/null
+++ b/.claude/skills-media/hyperframes-animation/blueprints-index.md
@@ -0,0 +1,146 @@
+# Blueprints (the proven shapes)
+
+> Entry point to the blueprint layer. Read this to find the shape for a frame; read `blueprints/<id>.md` to instantiate it. The Step-4 method (Reproduce / Adapt / Compose, what to write per frame) lives in `visual-design.md` — this file is the menu + the picker.
+
+A **blueprint** is a product-agnostic, **time-coded shot template** — `Scene N (a–b s): …` with `[slots]` and one named **signature move** — reverse-engineered from 50 golden product-launch clips (plus 13 hyperframes-animation blueprints reverse-translated to the same brief format). It encodes a whole shot across its full duration — reveals paced to the spoken line, not dumped at t=0 — so instantiating one structurally keeps content arriving instead of freezing. The full template lives in `blueprints/<id>.md`. **Step 4 (visual design) instantiates one blueprint per frame** (or composes from the motion vocabulary when none fits).
+
+## The 15 blueprints
+
+<blueprints>
+<blueprint id="kinetic-type-beats" roles="Hook, Problem, Product_Intro, Benefits, CTA, Brand_Outro" duration="3.4–12s">
+Flat, centered, bold-type shot where the **motion IS the words changing** — a fixed line swaps tokens in place by hard cut, or a statement builds across full-screen beats (each its own move) onto a spring-pop payoff. The workhorse (6 roles). Reach for it whenever the words carry the shot and there's no set, surface, or click.
+</blueprint>
+
+<blueprint id="typewriter-reveal" roles="Hook, Brand_Outro" duration="3.6–7s">
+A live text caret **types (and edits) a line as a human would**, then collapses it and pops a brand payoff, or holds it under a persistent mark while a sub-line types into the final CTA. Reach for it when "someone is typing this" should be the engine — a relatable typed pain → brand, or a standing logo + a typed CTA rail.
+</blueprint>
+
+<blueprint id="spatial-pan-stations" roles="Hook, Problem" duration="7–10s">
+Pre-placed labeled **stations on one oversized canvas, traversed by a single virtual camera** — repeated lateral/diagonal pans centering each station and revealing a callout, landing held on the last. Reach for it for a milestone timeline panned to "us," or a connected web of pain stations ending in a tangled knot.
+</blueprint>
+
+<blueprint id="constellation-hub" roles="Hook, Social_Proof" duration="5–6s">
+Iconned **nodes spring into a ring around a center**, then resolve on the core — a camera push-IN (depth-of-field collapsing onto it) or a held hub mark with satellites orbiting it. Reach for it for "it connects everything / one hub" or "sits at the center of your stack."
+</blueprint>
+
+<blueprint id="grid-card-assemble" roles="Key_Feature, Benefits, Social_Proof" duration="3.0–10.5s">
+N items (tiles / cards / logos / list-lines) **self-assemble in a staggered cascade** into a grid or vertical list and hold; an optional camera zoom-OUT reveals the array inside a vaster whole. Reach for it to enumerate breadth at once — a feature grid, an accumulating benefit list, or a logo wall.
+</blueprint>
+
+<blueprint id="logo-assemble-lockup" roles="Product_Intro, CTA, Brand_Outro" duration="4.6–11s">
+A brand mark / wordmark **builds itself from parts** (elements assemble/orbit, letters cascade, an outline draws on, or a camera pushes through negative space) and resolves into a centered lockup, optionally extended to a URL/CTA. Reach for it for a wordless premium brand sting, or a logo build leading into the final ask.
+</blueprint>
+
+<blueprint id="cursor-ui-demo" roles="Product_Intro, Key_Feature" duration="4.0–9.3s">
+A visible custom **cursor drives a reconstructed app UI** through clicks/hovers/drags so the screen changes state shot-to-shot, while the camera chases each interaction. Reach for it for a first cursor-led look at the surface (Product_Intro) or one workflow demonstrated end-to-end onto the action button (Key_Feature).
+</blueprint>
+
+<blueprint id="device-surface-showcase" roles="Key_Feature" duration="7.8–9.6s">
+A **device mockup or floating window held as hero** while its screens cycle through a real flow, presented by a camera ranging from a static hold to a continuous 3D push. Role-narrow (Key_Feature only) but mechanic-rich (static tour · floating-window push-scroll · 3D-hand demo). Reach for it to show a feature experienced *inside its real interface*.
+</blueprint>
+
+<blueprint id="dataviz-countup" roles="Problem, Product_Intro" duration="6–12s">
+Numbers and charts are the hero — a **count-up ring/number, trend chart, tilted stat grid** — traversed by a camera that pushes THROUGH (or scrolls across) them to land on one hero metric. Reach for it when the data carries the argument: quantify a worsening problem, or open confidently on "look at the result."
+</blueprint>
+
+<blueprint id="titlecard-reveal" roles="Benefits, Social_Proof" duration="3–5s">
+The calm **breather/landing beat** — one clean title or single brand/proof card revealed with exactly ONE restrained move (slide-up crossfade, or wipe-away-to-reveal), then a still hold. Low motion is the payload, not a deficiency. Reach for it for a two-line value title, or a busy open wiped to a clean lockup + a "loved by N+ teams" stat.
+</blueprint>
+
+<blueprint id="comparison-split" roles="Key_Feature" duration="4–6s">
+Two paired items of equal weight enter from opposite wings with **mirrored 3D "book-open" tilts** and hold side-by-side, then an inner-edge pill badge spring-pops on each to punctuate. Reach for it for an A/B or "X + Y together" — two complementary capabilities weighed at once (not >2 items, not sequential steps).
+</blueprint>
+
+<blueprint id="overwhelm-surround" roles="Problem" duration="6–9s">
+Overwhelm by accumulation — recognizable surfaces assemble, density-marker icons scatter in, the center one **morphs into the viewer's own avatar**, then elements close in from all sides (surrounded, not zoomed-into). Reach for it when the pain is "you're buried in tools," ending on a claustrophobic crowd.
+</blueprint>
+
+<blueprint id="ticker-takeover" roles="Hook, Brand_Outro" duration="5–7s">
+A typed lead-in + an accent word cycling through options, then a hero **crashes in from off-screen and physically shoves the text aside** — a collision, not a fade — settling alone. Reach for it when a "could be many things" build should be violently replaced by "this is it."
+</blueprint>
+
+<blueprint id="video-text-pivot" roles="Product_Intro, Key_Feature" duration="6–8s">
+A product video holds center and breathes, then **slides aside to hand its weight to a hero stat**, then both clear and kinetic text types into the vacated center, sealed by a gradient pill. Reach for it for "see the feature → see the impact" where the video must stay visible (slides, never cuts).
+</blueprint>
+
+<blueprint id="cta-morph-press" roles="CTA" duration="4–6s">
+A resting brand mark **condenses at the same center into a brighter CTA**, then a cursor arrives and lands a human-aimed click with feedback. Reach for it for a focused "click here" sign-off that walks the eye from identity to action — no spatial set, no multi-step UI.
+</blueprint>
+</blueprints>
+
+## Role → blueprint menu
+
+A **SOFT** menu: story truth comes first. Story-design reaches in **when the product's own beat calls for that shape** — it suggests a proven shape, it never dictates which beats exist. Each role has 2–4 options; if none fits the beat, compose freely (the menu is not a checklist). Each line is the **trigger** that should make you reach for that blueprint.
+
+Roles here map 1:1 to the storyboard frame `type` enum: **Hook**=`hook` · **Problem**=`pain_point` · **Product_Intro**=`product_intro` · **Key_Feature**=`feature_showcase` · **Benefits**=`benefit_highlight` · **Social_Proof**=`social_proof` · **CTA**=`cta` · **Brand_Outro**=`branding`.
+
+**Hook**
+
+- `kinetic-type-beats` — a punchy rhetorical line / "you keep doing X" callout where the in-place word-swap is the joke, OR an escalating multi-beat statement landing a spring-pop payoff.
+- `typewriter-reveal` — type a relatable line, collapse it, pop the brand (logo or product-UI) — "here's the everyday pain, now here's us."
+- `spatial-pan-stations` — a timeline of milestones panned to the present ("evolution leading up to us").
+- `constellation-hub` — a constellation of tools/nodes + a camera push-in ("it connects everything").
+- `ticker-takeover` — a cycling accent word ("could be X, or Y…") violently replaced by a hero crashing in from off-screen.
+
+**Problem**
+
+- `kinetic-type-beats` — 3–5 short pain statements, each landing alone on a bare canvas, no product yet.
+- `spatial-pan-stations` — pan a connected web of pain "stations" ending in a tangled knot.
+- `dataviz-countup` — a count-up ring / chart / stat grid pushed-through to dramatize a worsening or large problem.
+- `overwhelm-surround` — recognizable tools that morph into the viewer, then task bubbles close in from all sides ("you're buried").
+
+**Product_Intro**
+
+- `kinetic-type-beats` — "Introducing…" hard-cut name-drop resolving on the brand name/logo.
+- `logo-assemble-lockup` — a wordless premium brand sting (elements pulse/orbit and assemble around the mark).
+- `cursor-ui-demo` — first look at the product surface; a cursor sweeps in to introduce the app.
+- `dataviz-countup` — hard-cut into a data-viz card grid, camera scrolls to a glowing hero metric + a kinetic tagline.
+- `video-text-pivot` — a product video that slides aside to hand its weight to a hero stat, then yields the center to kinetic impact text.
+
+**Key_Feature**
+
+- `grid-card-assemble` — a labeled feature tile/pill grid that self-assembles (or glass cards revealed by a camera zoom-out).
+- `cursor-ui-demo` — a specific multi-step workflow demonstrated end-to-end, landing on the action button/result.
+- `device-surface-showcase` — a device/window hero whose screens cycle (static tour · floating-window push-scroll · 3D-hand demo).
+- `comparison-split` — two paired capabilities side-by-side with mirrored book-open tilts (an A/B / "X + Y together").
+- `video-text-pivot` — a feature clip that slides aside to a frame-filling metric, then a typographic impact line.
+
+**Benefits**
+
+- `kinetic-type-beats` — a rapid-fire staccato montage of 8–12 short value phrases.
+- `grid-card-assemble` — a vertical benefit list that accumulates or steps.
+- `titlecard-reveal` — a calm two-line value title card (a breather/stillness beat).
+
+**Social_Proof**
+
+- `constellation-hub` — product mark as the hub, partner logos orbiting it ("works with your stack").
+- `grid-card-assemble` — a logo wall that builds then pulls back to reveal a vast ecosystem.
+- `titlecard-reveal` — wipe a busy open away to a clean brand lockup + a "loved by N+ teams" stat.
+
+**CTA**
+
+- `kinetic-type-beats` — a punchy closing line (or short value stack) snapping beat-by-beat onto the logo/URL.
+- `logo-assemble-lockup` — a logo build → camera push-through into the final URL/CTA verb.
+- `cta-morph-press` — a brand mark that condenses into the CTA at one center, then a cursor lands a human-aimed click.
+
+**Brand_Outro**
+
+- `kinetic-type-beats` — a rapid verb barrage resolving on the brand's one defining word.
+- `typewriter-reveal` — a persistent brand mark with a typed/swapping CTA rail beneath it.
+- `logo-assemble-lockup` — feature/UI elements clear the stage and the lockup draws itself in.
+- `ticker-takeover` — options cycle, then the brand mark crashes in and owns the frame.
+
+> Coverage: every role has ≥2 options; every blueprint serves ≥1 role. `kinetic-type-beats` is the workhorse (6 roles); `device-surface-showcase` is role-narrow (Key_Feature only) but mechanic-rich. Five shapes — `comparison-split`, `overwhelm-surround`, `ticker-takeover`, `video-text-pivot`, `cta-morph-press` — were added from the hyperframes-animation blueprints.
+
+## Picking guidance
+
+1. Find the frame's **role** in the menu above; pick the blueprint whose **shape fits this beat** (story may already have named a candidate id — confirm or override). If two fit, prefer the one whose motions are closer to your plan.
+2. Open `blueprints/<id>.md` — read its time-coded template, `[slots]`, and named **signature move**.
+3. Choose a posture — **Reproduce** (slots map cleanly), **Adapt** (structure fits, content/surface differs; keep the signature move), or **Compose** (nothing fits → build from the motion vocabulary). The _how_ of writing each — what to keep/change, the per-frame fields — is `visual-design.md`'s job; defer to it.
+4. If nothing in the menu fits the beat, **compose** from the motion vocabulary in `motion-language.md` — still pace the reveals to the VO across the shot. Don't force a wrong blueprint.
+
+## Motion coverage
+
+Every recurring move in the golden vocabulary is backed by this skill's local `rules/` — including five added to round out the corpus: `depth-of-field-blur`, `motion-blur-streak`, `depth-scatter-assemble`, `spring-pop-entrance` (the canonical entrance pop, distinct from the click/press `press-release-spring`), and `ambient-glow-bloom`. Each blueprint's `rule mapping` cites the real rule.
+
+One genuine out-of-scope special remains: `device-surface-showcase`'s **3D-hand gesture-input + WebGL bloom/portal** needs R3F/Three.js + WebGL — a heavier capability than the rule library. Use it sparingly, or pick a simpler `device-surface-showcase` variant.
diff --git a/.claude/skills-media/hyperframes-animation/blueprints/comparison-split.md b/.claude/skills-media/hyperframes-animation/blueprints/comparison-split.md
new file mode 100644
index 000000000..625cf89d2
--- /dev/null
+++ b/.claude/skills-media/hyperframes-animation/blueprints/comparison-split.md
@@ -0,0 +1,27 @@
+# comparison-split — Comparison Split-Cards
+
+**intent**: Two paired items of equal weight shown side-by-side with mirrored 3D "book-open" tilts — the eye reads them as a balanced comparison, then a pill badge lands at each card's inner edge to punctuate. The motion IS the symmetry: two cards arriving from opposite wings into a held spread.
+
+**roles served**
+
+- Key_Feature (from `comparison-split-cards`): when two complementary features / capabilities of equal weight should be presented **simultaneously, not sequentially** — an A/B, a "X + Y together," paired concepts the viewer must weigh side-by-side. Not for >2 items (use `grid-card-assemble`) or sequential steps.
+
+**duration**: 4–6s
+
+**shot structure** (a `[bg]` canvas carrying two faint ambient glow blooms — `[accent A]` near 30%, `[accent B]` near 70% — so each side owns a color identity across a 50% symmetry axis; equal-width cards under one shared perspective parent)
+
+- **Scene 1 (0.0–~0.8s) — title sets the concept.** A centered `[title line]` with an `[accent keyword]` slides DOWN into place from just above (a short smooth settle). The downward arrival is deliberate: it forms a non-conflicting T-shape against the cards, which arrive from the sides next.
+- **Scene 2 (~0.4–1.9s) — the split-tilt entry (signature move).** Two equal-width feature cards arrive from opposite wings — `[left card]` from the left, `[right card]` from the right ~0.2s behind — each carrying a **mirrored 3D `rotateY` tilt** (left faces right, right faces left, opening like a book) and scaling ~0.85→1 as it lands. The entry overlaps the title's tail so the whole thing reads as ONE arrival, not two beats. Each card holds `[image / label / subtitle]`; box-shadows fall **outward** from the tilt (left shadow right, right shadow left).
+- **Scene 3 (~1.9–end) — badges punctuate, then hold.** A pill `[badge]` lands at each card's **inner edge** (left then right, ~0.3s apart), overlapping its card ~15% so it reads as attached, not orbiting. This is the lone overshoot in the shot — it earns the punctuation. Settles and holds.
+
+**motion vocabulary**: title slide-down from above; mirrored opposite-wing card entry; static book-open `rotateY` tilt (`+tilt` left, `−tilt` right); tilt-matched outward box-shadow; inner-edge badge spring-pop; gentle phase-opposed idle float (left vs right, never synchronized) registered as subtle jitter; dual side-glow ambient.
+
+**rule mapping**
+
+- two cards entering from opposite wings with mirrored `rotateY` tilts + tilt-matched shadow → `split-tilt-cards` (the signature; keep the two-layer split so the entry `x`/`scale` and the idle never collide on one alias)
+- title slide-down settle → `gsap-effects` (translate + opacity on a long-tail `power3`)
+- inner-edge pill badge pop (the one overshoot) → `spring-pop-entrance` (overshoot register — earns the punctuation)
+- phase-opposed idle float on the pair → `sine-wave-loop` (low-amplitude register — subtle jitter, NOT lazy breathing; left `sin(t)`, right `sin(t+π)` so they never conveyor-belt)
+- the two faint side glows behind the cards → `ambient-glow-bloom` (un-triggered soft bloom, one per accent)
+
+**camera modifier**: camera-static by default — the symmetry is the subject and a move would break the balance.
diff --git a/.claude/skills-media/hyperframes-animation/blueprints/constellation-hub.md b/.claude/skills-media/hyperframes-animation/blueprints/constellation-hub.md
new file mode 100644
index 000000000..0d472861a
--- /dev/null
+++ b/.claude/skills-media/hyperframes-animation/blueprints/constellation-hub.md
@@ -0,0 +1,44 @@
+# constellation-hub — Constellation / Hub + Satellites
+
+**intent**: Labeled/iconned nodes spring into a ring/cluster around a center, then the shot resolves on the core — either by pushing the camera INTO the center (depth-of-field collapsing onto it) or by holding a hub mark while the satellites ORBIT it; the "everything connects to / sits around one center" beat.
+
+**roles served**
+
+- Hook (from `hook-cluster-push-in`): a constellation of tool/app nodes springs into a wide ring, then a sustained camera push-in with depth-of-field resolves on the inner core — "it connects everything / one hub for all your tools."
+- Social_Proof (from `social-proof-orbit-ecosystem`): the product brand mark lands as the center hub and partner logos spring onto a ring and revolve around it — "plugs into / sits at the center of your stack."
+- CTA (from `cta-orbit-collapse`): the ring resolves by COLLAPSE rather than a push-in — category icons drift around an empty central CTA, a cursor click implodes the orbit toward the click point, and the product demo springs OUT of that collapse as the answer (scope → choice → consequence → product).
+- Social_Proof (from `proof-logo-chain`): a persistent center logo accrues proofs — its wordmark decodes, a claim ticker swaps, the logo glides to center, then avatars cascade into orbit with drawn connectors while partner logos scroll the bottom strip; four claims read as one statement.
+
+**duration**: 5–8s (Hook 5–6s · Social_Proof 5–8s · CTA orbit-collapse ~6s)
+
+**shot structure**
+
+Consolidated template — nodes ring a center, then one of two finishers resolves on the core.
+
+- Scene 1 (0.0–~1.5s): `[bg]` (dark/space field, optionally slow-drifting diffused gradient blobs). `[primary nodes]` (circles carrying `[icon]` + label) SPRING-POP in (scale 0→1, ~1.15 elastic overshoot, staggered) arranged in a wide ring/cluster around an empty or marked center `[hub]`.
+- Scene 2 (~0.7–2.5s, overlapping): smaller `[secondary nodes]` (platform / partner-logo chips) pop in staggered with the same elastic spring, filling the gaps; optional thin `[accent]` connector lines / orbit ring draw from hub→nodes. Camera holds.
+- Scene 3 (~2.5–Xs, the resolve): see finisher variant below; lands and HOLDS on the magnified / orbited center to the end.
+
+- Variant — Hook (push-in finisher): from Scene 3, a continuous smooth CAMERA PUSH-IN toward the center inner cluster — inner nodes scale up and stay sharp while outer nodes are pushed toward the edges and progressively BLUR (depth-of-field), background scales up smoothly; holds magnified on the core.
+- Variant — Social_Proof (orbit finisher): the center `[brand mark]` snaps in via a quick 3D rotate that decelerates and settles; a thin `[accent]` orbit ring draws around it; `[N partner badges]` spring onto the ring (staggered overshoot) and revolve CLOCKWISE while staying upright, under a continuous slow camera ZOOM-OUT (ecosystem reveal).
+- Variant — Social_Proof (optional type-push-through opener, prepended before Scene 1): centered `[headline]` types/slides in with a huge transparent-fill OUTLINE copy of the same words behind it; the outline text scales up exponentially toward camera (high-speed dolly / push-through), breaches the frame, then HARD-CUTS to the hub bg of Scene 1.
+
+**motion vocabulary**: staggered elastic spring-pop node entrances (~1.15 overshoot); slow gradient-blob drift; connector-line / orbit-ring draw-on; 3D snap-rotate-settle on the hub mark; continuous camera push-in (inner sharp, outer depth-of-field blur, bg scale-up); clockwise orbital revolve of upright badges; continuous slow camera zoom-out (ecosystem reveal); optional outline-text push-through dolly entry.
+
+**rule mapping** (motion verb → `rules/<id>.md`)
+
+- staggered spring-pop node entrances → `spring-pop-entrance` (elastic overshoot) + `gsap-effects` (stagger recipe); 3D-flip-in flavor → `orbit-3d-entry`
+- ring / cluster layout of nodes around a center → `avatar-cloud-network` (nodes on an elliptical ring + SVG lines to a center)
+- icons on the nodes → `svg-icon-enrichment`
+- connector lines hub→node → `svg-path-draw`
+- orbit-ring draw-on → `svg-path-draw`
+- slow gradient-blob drift → `sine-wave-loop` (idle looped drift)
+- 3D snap-rotate-settle on hub mark → `orbit-3d-entry` (3D-flip entry); technique CSS-3D
+- clockwise orbital revolve of upright badges → `orbit-3d-entry` (continuous elliptical orbit); technique MotionPath
+- camera push-in toward center → `multi-phase-camera` (PUSH-in) + `coordinate-target-zoom` (target the core)
+- background scale-up during push-in → `multi-phase-camera`
+- continuous slow zoom-out (ecosystem reveal) → `multi-phase-camera` (pull-back) / `coordinate-target-zoom`
+- outline-text push-through dolly opener (Social_Proof) → `3d-text-depth-layers` (outline copy behind) + `multi-phase-camera` (push-through)
+- depth-of-field blur on outer nodes during push-in → `depth-of-field-blur` (progressive DOF/focus-falloff blur on the off-center outer nodes while the inner core stays sharp)
+
+**camera modifier**: push-in-with-DOF (Hook) — `multi-phase-camera` PUSH-in targeted via `coordinate-target-zoom` onto the core; the focus-falloff blur half of it is backed by `depth-of-field-blur`. Orbit finisher (Social_Proof) — slow continuous zoom-out via `multi-phase-camera` (pull-back) while satellites revolve.
diff --git a/.claude/skills-media/hyperframes-animation/blueprints/cta-morph-press.md b/.claude/skills-media/hyperframes-animation/blueprints/cta-morph-press.md
new file mode 100644
index 000000000..98856763e
--- /dev/null
+++ b/.claude/skills-media/hyperframes-animation/blueprints/cta-morph-press.md
@@ -0,0 +1,28 @@
+# cta-morph-press — CTA Morph & Press
+
+**intent**: A resting brand mark condenses at the same screen center into a smaller, brighter CTA, then a cursor arrives from off-stage and lands a human-aimed click on it. The viewer's eye is walked from "this is who we are" to "and this is what you do." The morph and the click are the two headline beats.
+
+**roles served**
+
+- CTA (from `cta-morph-press`): when the close moves from brand identity to a single user action, two elements share the same center sequentially (a morph, not a cut), and the payoff is a simulated click with physical feedback. Reach for it for a focused "click here" sign-off — no spatial set, no multi-step UI (that's `cursor-ui-demo`).
+
+**duration**: 4–6s
+
+**shot structure** (a `[bg]` canvas; hero and CTA are flex-centered siblings sharing one `transform-origin`)
+
+- **Scene 1 (0.0–~1.4s) — presence.** The `[hero mark / brand lockup]` holds dead-center, alive but resting — only a faint rotational breath on the mark; any title text under it stays rock-stable. Camera static.
+- **Scene 2 (~1.4–2.4s) — the morph (signature move).** The hero CONDENSES at the same screen center into a smaller, brighter `[CTA]` (button / card): the outgoing mark shrink-fades exactly as the CTA scales up in its place. Because they share one `transform-origin`, the eye reads it as one element transforming, not a swap.
+- **Scene 3 (~2.4–3.4s) — approach.** A `[cursor]` arrives from off-stage on a **decelerating** path (it "arrives," it does not pass through) and lands a few px **off** the CTA's geometric center, so the aim reads human, not scripted.
+- **Scene 4 (~3.4–end) — press.** The cursor lands a physical CLICK — cursor and CTA compress together in lockstep, then release with feedback (an optional ripple / glow bloom). Holds on the clicked state.
+
+**motion vocabulary**: faint rotation-only resting breath (logo scope only); same-center morph-swap (shrink-fade ↔ scale-up sharing `transform-origin`); cursor decel-arrival from off-stage; off-center human aim; lockstep press compression; release feedback ripple / glow.
+
+**rule mapping**
+
+- hero → CTA condense at one center → `scale-swap-transition` (shared `transform-origin: 50% 50%` is what sells the morph; CTA `position: absolute` so it doesn't shove the hero during the brief overlap)
+- resting-hero aliveness (rotation only, scoped to the mark so the Phase-2 scale doesn't fight it) → `sine-wave-loop` (low-amplitude rotation register — subtle jitter, not a scale breath)
+- cursor press + release in lockstep (single-target-array so both compress together) → `physics-press-reaction` (PRESS_DOWN + RELEASE portion)
+- cursor approach (decel from off-stage, off-center landing, hard-cut opacity in) → `gsap-effects` (translate on `power2.out`)
+- click ripple / release glow → `cursor-click-ripple` (attack-decay ring) and/or `ambient-glow-bloom` (release bloom)
+
+**camera modifier**: camera-static — the morph and click happen in element space; a camera move would compete with the click as the climax.
diff --git a/.claude/skills-media/hyperframes-animation/blueprints/cursor-ui-demo.md b/.claude/skills-media/hyperframes-animation/blueprints/cursor-ui-demo.md
new file mode 100644
index 000000000..7ca0332b2
--- /dev/null
+++ b/.claude/skills-media/hyperframes-animation/blueprints/cursor-ui-demo.md
@@ -0,0 +1,57 @@
+# cursor-ui-demo — Cursor-Driven UI Demo
+
+**intent**: A visible custom cursor drives a real (reconstructed) app UI through clicks / hovers / drags so the screen changes state shot-to-shot, while the camera chases each interaction — the product surface is the subject and the cursor is the actor.
+
+**roles served**
+
+- Product*Intro (from `product-intro-cursor-ui-demo` / #14 Product_Intro_02, #15 Product_Intro_2, #17 Product_Intro_04): first look at the product surface — the cursor sweeps/hovers to \_introduce* the app and reveal what it is, landing on a hovered hero element or freshly-popped result. Light, exploratory; backdrop steps colors as it goes.
+- Key*Feature (from `key-feature-cursor-ui-demo` / #23 Key_Feature_2, #24 Key_Feature_03, #27 Key_Feature_06): one specific multi-step workflow demonstrated \_end-to-end* (edit / configure / select across 2–4 discrete beats), each beat a real edit the UI responds to live, landing locked on the primary action button or the produced result.
+- Key_Feature (from `workflow-approve-press`): an agency / confirmation workflow framed by a cockpit of 3D-tilted flanks — a step list ticks pending → active → complete (a snap state machine, CSS responding to `[data-state]`), and a flank button takes the PRESS as the payoff (its color flips to success, a checkmark stamps). The click is the climax, not a passing gesture.
+
+**duration**: 4.0–9.3s (union of Key_Feature 4.0–7.3s and Product_Intro 6.1–9.3s)
+
+**shot structure** (a `[product UI surface]` — fixed app window, dashboard/editor, parallax `[content card]` stack, or a `[container object/icon]` — centered over `[bg color/gradient]`, shown `[flat]` or `[3D-isometric]`; a custom `[brand-colored cursor with icon]` is the protagonist and the camera servos to whatever it touches; UI responds _live_ and in sync with each cursor action. Two role-tuned tempos fold in — Product_Intro **sweeps to introduce**, Key_Feature **performs a workflow**.)
+
+- **Scene 1 (0.0–~Xs) — surface establishes + first touch.** The `[product UI surface]` arrives centered over `[bg color/gradient]` — either it is simply present (fixed window / dashboard / editor), a 3D-parallax stack of `[content cards]`, or a `[container object/icon]` that FLIES IN with a 3D tumble and settles. The custom `[cursor]` enters. The cursor performs the FIRST action on `[cursor target 1]` and the UI responds live in the same beat. Camera holds or begins a slow push-in toward the acted-on region.
+  - _Variant — Product_Intro_: low-commitment first touch — cursor HOVERS/sweeps a control or SWEEP-HIGHLIGHTS a field to `[accent color]`, OR the `[container]` fans open. An optional label/title fades/morphs onto the surface. The point is to _show the surface exists_ and is touchable.
+  - _Variant — Key_Feature_: a concrete edit — cursor DRAGS a scrollbar / TYPES into a field / DRAGS a handle, and the UI responds materially (`[scroll]` / value climbs / region resizes). If the surface opened in `[3D-isometric]`, it may snap perspective-FLAT here to read the workflow.
+
+- **Scene 2 (~Xs–~Ys) — camera chases to the next interaction (the engine).** The camera MOVES to the next target — push-in + pan / whip-pan / pan-down to `[cursor target k]` — and the cursor performs action k as the UI updates live. Each beat is a discrete interaction connected by a fast camera move; the surface's inner content SWAPS per interaction.
+  - _Variant — Product_Intro_: navigation is exploratory — a slow camera pan + depth-of-field FOCUS-PULL across a parallax `[content card]` stack, or the `[container]` fanning into `[N option/content cards]` that SPRING to position. As content swaps, the supporting backdrop STEPS its color (`[bg step 1]` → step 2 → …). Typically one or two such moves.
+  - _Variant — Key_Feature_: repeat for `[2–4 beats total]`, each a distinct operation the UI answers — counter COUNTS UP, `[pill/swatch]` SELECTS, a modal SLIDES UP and TYPES — connected by whip-pans / progressive zoom. The workflow visibly advances toward a result.
+
+- **Scene 3 (~Ys–end) — payoff state, camera settles, HOLD.** The cursor lands on its final target and the screen reaches the payoff state; the camera comes to rest (static) and holds.
+  - _Variant — Product_Intro_: the cursor HOVERS the hero element — a `[content card]` SCALES UP on hover, a node gets an `[Available]`-style pill, or a `[result card]` POPS/springs in — the "here's the product" payoff. Settles static, holds.
+  - _Variant — Key_Feature_: locked close-up on the OUTCOME — cursor lands on the `[primary action button: Export / Save / Reimburse]` and a `[hover backdrop / highlight]` SPRING-pops in (the climax is the action button / produced result). Holds.
+
+**motion vocabulary**: cursor-driven click / hover / sweep-highlight / drag / type; per-interaction live UI response (scroll, value climb, region resize, content swap); camera push-in + pan / whip-pan / pan-down servoing to each target; coordinate zoom onto the acted region; press-and-ripple on a clicked control; button press-compress; screen-state swap shot-to-shot; card fan-out to corners (spring); 3D container fly-in & tumble-settle; perspective-flatten (3D→2D snap); paginated/stepped backdrop color advance; depth-of-field focus-pull across a parallax card stack; counter count-up; pill/swatch select; modal slide-up + typing; label/title morph between states; UI-keyword highlight glow; terminal hover-scale or result-card pop-in; spring hover-backdrop on the final action button.
+
+**rule mapping**
+
+- viewport follows the cursor / camera servos to whatever it touches (primary) → `camera-cursor-tracking`
+- cursor moves to a target, presses, emits a ripple (the click itself — primary interaction primitive) → `cursor-click-ripple`
+- screen-state swap shot-to-shot (surface inner content changes between beats) → `scale-swap-transition`
+- camera push-in + pan / whip-pan / pan-down to the next target → `viewport-change` (pan/zoom across the UI)
+- sequencing the chase into discrete interaction beats → `multi-phase-camera`
+- zoom onto the specific acted-on UI region → `coordinate-target-zoom`
+- cursor icon/state changing with context (e.g. pointer↔grab over a draggable handle) → `context-sensitive-cursor`
+- which content appears per beat / step-by-step UI state progression / per-interaction swaps → `dynamic-content-sequencing`
+- sweep-highlight a field, highlight a UI keyword to `[accent color]` → `asr-keyword-glow` (keyword glow on the touched element)
+- clicked button compresses on press, springs back on release → `press-release-spring`
+- cursor + button compress together on a heavier press → `physics-press-reaction`
+- panel/card morphs between two states (e.g. card → expanded card, surface state A → B) → `card-morph-anchor`
+- terminal hover-scale, `[result card]` pop-in, spring hover-backdrop on the final action button → `spring-pop-entrance`
+- card fan-out to corners / option cards springing to position → `split-tilt-cards` (fan/spread into tilted positions) + `spring-pop-entrance` (the spring settle)
+- 3D-parallax content-card stack as the surface; UI shown 3D-isometric → `3d-page-scroll` (UI as a tilted scrolling/parallax card)
+- node gets an `[Available]`-style pill / tracked badge appears on an element → `ai-tracking-box`
+- counter / value count-up as the UI responds → `counting-dynamic-scale`
+- a result bar / number FILLS as the workflow's outcome → `stat-bars-and-fills`
+- a live `[video]` screen-capture clip used as the surface → technique: video compositing
+- perspective-flatten (3D-isometric → flat 2D snap) and the 3D-isometric tilt itself → technique: CSS-3D (no dedicated rule; the tilt/flatten transform is a CSS-3D primitive)
+- camera settles static on the payoff and HOLDS → (settle phase of `spring-pop-entrance` on the payoff element; the static hold itself needs no rule)
+- 3D container/object fly-in & tumble-settle → `depth-scatter-assemble` (free-tumbling 3D object/container entrance that flies in and tumble-settles; `orbit-3d-entry` only orbits a flat element into place)
+- depth-of-field focus-pull across the parallax card stack → `depth-of-field-blur` (rack-focus / DoF blur transition between near and far cards; `3d-page-scroll` supplies the tilted parallax stack and `viewport-change` the pan)
+- paginated/stepped backdrop color advance synced to interactions (`[bg step 1]`→step 2→…) → `discrete-text-sequence` (discrete state stepping, here applied to a background-color state rather than text)
+- modal slide-up + in-modal typing as one combined beat → `card-morph-anchor` / `scale-swap-transition` (the panel slide-in) + `discrete-text-sequence` (the in-modal typed text)
+
+**camera modifier**: The defining motion is the camera CHASE — the viewport follows the cursor from target to target via `camera-cursor-tracking` (primary), realized as concrete push-in + pan / whip-pan / pan-down moves under `viewport-change`, sequenced into discrete interaction beats by `multi-phase-camera`, with each beat's destination targeted via `coordinate-target-zoom` (zoom to the acted-on region). Product_Intro biases toward a slow, exploratory pan + focus-pull that sweeps the surface; Key_Feature biases toward snappier whip-pans / progressive zoom that march through the workflow and lock static on the action button. This camera-servo-to-cursor is what separates the blueprint from hands-off camera scrolls (dataviz-scroll-reveal) and static device/window tours.
diff --git a/.claude/skills-media/hyperframes-animation/blueprints/dataviz-countup.md b/.claude/skills-media/hyperframes-animation/blueprints/dataviz-countup.md
new file mode 100644
index 000000000..cd2aec330
--- /dev/null
+++ b/.claude/skills-media/hyperframes-animation/blueprints/dataviz-countup.md
@@ -0,0 +1,44 @@
+# dataviz-countup — Data-Viz / Count-Up
+
+**intent**: Make numbers and charts the hero — a count-up ring/number, a trend chart, a tilted stat/card grid — and traverse the data instruments with a camera that pushes THROUGH them (or scrolls across them) to land on one hero metric, so the data itself carries the argument.
+
+**roles served**
+
+- Problem (from `problem-dataviz-pushthrough` / #9 Problem_1): quantifies the pain with real-looking instruments — a count-up ring → a trend chart → a stat grid — the camera pushing THROUGH each object into the next to dramatize a worsening / large-scale problem ("X% of people struggle with…").
+- Product_Intro (from `product-intro-dataviz-scroll-reveal` / #19 Product_Intro_06): a confident "look at the result / the data" open — hard-cut from a hook word into a perspective-tilted grid of data-viz cards, then a hands-off camera scroll lands one glowing hero metric while a kinetic tagline assembles word-by-word.
+- Hook (from `hook-counter-burst`): a cold-open hook on ONE dramatic statistic — the frame opens dark and empty, 3–5 thematic icons puncture in clustered at center, then the headline number EXPLODES upward in size as the icons fling outward to their marks (the count-up and the spread are one beat), closed by a slow camera lean-in. Kinetic from frame 1.
+
+**duration**: ~4–12s (Hook ~4s · Product_Intro ~6s · Problem ~11–12s)
+
+**shot structure** Data-viz field on `[bg color]` (dark or light, soft corner glows); `[gradient A→B]` brand stroke on charts/rings; clean sans-serif white/dark text; a continuous camera move runs underneath that traverses 2–3 data instruments and resolves on a hero metric. One instrument per beat; the camera carries the cut.
+
+- Scene 1 (0.0–Xs): the first data instrument establishes centered — a `[stat]` reads as the hero. A bold center number COUNTS UP `[start]`→`[end]` while its transform scale grows to the static final type size, with `[stat label]` below; its paired graphic (a circular progress RING sweeping to `[pct]` with a `[gradient]` stroke, or a bar/fill) animates in on the SAME ease so number + graphic land as one beat. Supporting `[avatar/object]` elements pop in with spring overshoot into a scattered glowing orbit; a `[headline]` fades up. A very slow continuous camera zoom-in runs throughout.
+- Scene 2 (Xs–Ys): the camera traverses to the next instrument and that instrument animates — a `[gradient]` trend line / area chart DRAWS left→right on grid lines (Problem), or off-center cards SCROLL away as the layout glides (Product_Intro). The arriving `[stat-2]` number counts up / the chart resolves.
+- Scene 3 / Scene N (…–end): the camera lands the `[hero metric card]` (big number + label + delta + rising chart) in dead-center; a soft `[accent]` glow blooms behind it; the move reaches its peak then eases to a settled, slightly wider composition with the hero centered and supporting cards flanking it. HOLD on the final frame.
+
+- Variant — Problem (push-THROUGH, count-up → trend → grid): Scene 1 is a centered circular progress ring + count-up center number with scattered glowing `[avatar/object]` orbit. Scene 2 is a fast camera PUSH-IN straight through the center of the ring (ring, number, orbiting elements scale up and fly out of frame) into a rounded `[card]` holding `[stat-2 header]` over a `[gradient]` line chart with grid lines + translucent area fill that draws left→right; camera pushes through then settles. Scene 3: camera PANS to a second `[card]` whose number counts up, holding a grid of the `[avatar/object]` elements — a subset dim/blur while the rest receive `[accent]` circular checkmark badges that SPRING-POP; camera settles to the end. The traversal is z-depth push-through between instruments.
+- Variant — Product_Intro (scroll-to-hero + word-by-word tagline): a brief opener — Scene 0 (~0.0–0.85s): a full-frame `[hero-color orb]` with a bold white `[hook phrase]` over it; static shimmer, then HARD CUT. Scene 1 cuts to a slightly perspective-TILTED grid of `[data-viz / product cards]` (charts, heatmaps, stat cards with deltas + source footers) with `[tagline word 1]` centered; the grid begins SCROLLING (e.g. toward upper-left) with its tilt held. Scene 2: the grid keeps scrolling so the `[hero metric card]` glides into dead-center as off-center cards slide away; `[tagline word 1]` translates out and `[word 2]` rises in from a frame edge. Scene 3: hero card settles centered, `[accent]` glow blooms behind it, camera PUSHES IN slightly; `[word 2]` holds near it. Scene 4: `[word 2]` slides out, the final `[tagline word]` drops in from the opposite edge above the still-glowing hero, push-in peaks. Scene 5: overlay type clears, camera eases BACK OUT to a settled wider tilted composition — hero centered with glow, supporting cards flanking. The traversal is a hands-off camera SCROLL across a tilted card plane (no cursor, no clicks) + a one-word-at-a-time kinetic headline + push-in-then-out bookend.
+
+**motion vocabulary** count-up number with transform-scale growth on the value; circular progress-ring sweep; growth bar / progress fill; gradient trend-line + area-fill left→right draw; spring-overshoot pop-in of scattered glowing avatar/object elements; perspective-tilted card grid; directional grid scroll (cards glide in/out of center); hero-card centering; soft accent glow bloom behind the hero; slow continuous zoom-in; fast camera push-IN / push-THROUGH the center of an instrument; lateral/vertical camera pan between cards; gentle push-in that peaks then eases back out to a wider settle; selective dim/blur of a subset + spring-pop checkmark badges; full-frame hook orb → hard cut; kinetic tagline assembled word-by-word (each word drops/rises from a frame edge, prior word slides out).
+
+**rule mapping** (motion verb → `rules/<id>.md`)
+
+- count-up number whose transform scale grows with the value → `counting-dynamic-scale` (primary text rule)
+- circular progress-ring sweep (the ring fill) → `stat-bars-and-fills` (ring form) — its draw mechanics delegate to → `svg-path-draw`
+- growth bars / progress fill paired beside a number → `stat-bars-and-fills` (primary data rule)
+- gradient trend-line / area-chart left→right draw → `svg-path-draw` (a path/line draws itself)
+- spring-overshoot pop-in of the avatar/object elements → `spring-pop-entrance` (elastic overshoot); the scattered-ring layout of glowing avatars/objects → `avatar-cloud-network`; if they keep drifting/orbiting → `orbit-3d-entry`
+- spring-pop `[accent]` checkmark badges → `spring-pop-entrance`
+- perspective-tilted card grid (tilt held static while content moves) → `3d-page-scroll`
+- directional scroll across the tilted card plane (cards glide in/out of center) → `3d-page-scroll` (scroll) + `viewport-change` (lateral/vertical pan form)
+- hero metric card centering (scroll/pan lands the target dead-center) → `coordinate-target-zoom` (target lands at viewport center) / `viewport-change`
+- hard-cut from the hook orb into the grid → `scale-swap-transition`
+- kinetic tagline assembled word-by-word → `kinetic-beat-slam` (one onset grid, distinct per-word entrances)
+- slow continuous zoom-in + push-THROUGH the instruments + lateral/vertical pan between cards + push-in-then-out bookend → `multi-phase-camera` (see camera modifier)
+- soft accent glow BLOOM behind the hero card → `ambient-glow-bloom` (un-triggered soft glow/bloom behind the static hero element — distinct from `press-release-spring`'s press-triggered glow and `asr-keyword-glow`'s word-timed envelope)
+- selective dim/blur of a SUBSET of grid items (focus-falloff on the non-highlighted cards) → `depth-of-field-blur` (selective per-element blur/dim to spotlight the highlighted cards — the same focus-falloff rule used in `constellation-hub`)
+
+**camera modifier**: The camera is the through-line that traverses the data instruments — one camera wrapper sequenced by `multi-phase-camera`, with each stop targeted via `coordinate-target-zoom` onto the focal instrument/card.
+
+- Problem — push-THROUGH: a slow continuous zoom-in (drift overlay) plus a fast PUSH-IN straight through the center of one instrument into the next (`multi-phase-camera`, Steady-push pattern), then a lateral/vertical PAN to the final card. Z-depth push-through is the signature (distinguishes it from a flat pan-tour).
+- Product_Intro — scroll-to-hero + bookend push: a hands-off directional SCROLL across the tilted card plane (`3d-page-scroll` scroll / `viewport-change` pan) that lands the hero card center, then a gentle push-in that PEAKS and eases BACK OUT to a wider settle (`multi-phase-camera`, Bookend-pull pattern). No cursor, no clicks — the camera does the navigating.
diff --git a/.claude/skills-media/hyperframes-animation/blueprints/device-surface-showcase.md b/.claude/skills-media/hyperframes-animation/blueprints/device-surface-showcase.md
new file mode 100644
index 000000000..53adaa0e3
--- /dev/null
+++ b/.claude/skills-media/hyperframes-animation/blueprints/device-surface-showcase.md
@@ -0,0 +1,50 @@
+# device-surface-showcase — Device / Surface Showcase
+
+**intent**: A product surface — a device mockup or a floating browser/app window — is the hero held in frame while its screens cycle through a real flow, showcased by a camera move that ranges from a static hold to a continuous 3D push.
+
+**roles served**
+
+- Key*Feature (from key-feature-device-screen-tour, key-feature-floating-window-scroll, key-feature-3d-device-hand-demo): show a feature being \_experienced inside its real interface* — the surface houses the action and its screens advance through a flow, rather than enumerating tiles or chasing a cursor across a workflow. (Note: all three drafts are Key_Feature; this blueprint is role-narrow but mechanic-rich — variants differ by MECHANIC, not role.)
+- Key_Feature (from demo-page-scroll-spotlight): the floating-window push-scroll variant carried to a spotlight climax — a real webpage rendered as a tilted 3D card coasts in (power2, like a phone held up — no spring), header keywords flare on a karaoke glow as the VO names them, the page rolls to the demoed section, and one element LIFTS off the surface (translateZ + scale) under a radial spotlight that dims the rest.
+
+**duration**: 5–9.6s (page-scroll-spotlight 5–9s · floating-window 7.8s · 3d-hand 7.9s · device-tour 9.6s)
+
+**shot structure** One product surface — a `[device mockup]` or a `[floating browser/app window]` — is the persistent hero on a `[styled backdrop: gradient / radial / stylized 3D void]`; its `[screens/sections]` cycle through a real `[product flow]` while a showcase camera (static-hold, push-in→zoom-out, or one continuous push) presents it. Each screen state holds ~1.0–1.5s.
+
+- Scene 1 (0.0–~1.5s): The surface ESTABLISHES — it `[slides in from an edge / drifts in from a tilt / dissolves from a full-frame title card]` and settles, with a `[accent shape or backdrop]` resolving behind it; the first `[screen]` is visible. The showcase camera begins (see variants).
+- Scene 2 (~1.5–~Xs): The surface is OPERATED on its own face — a `[tap/select/scroll]` triggers the first screen advance: old content `[pushes out / scrolls up]`, new `[screen/section]` `[pulls up / pushes in from the side]`; concurrently a `[label / header word / side headline]` updates. The camera continues its move.
+- Scene 3+ (~Xs–end, repeat for `[2–4 screen beats]`): The surface ADVANCES through successive `[screens/sections]`, each a discrete swap or scroll synced to the surface's flow, while the secondary copy `[swaps out-up / in-up]` or stays marked to hold reading position. HOLDS on the final `[screen]` (or, for one variant, blooms out — see variant).
+
+- Variant — static-tour (key-feature-device-screen-tour, 9.6s): a `[device mockup]` slides in from off-screen and settles (ease-out); an `[accent-color shape]` scales up behind it (spring overshoot). Camera STAYS STATIC the entire clip — all motion is element/UI-level: a tap COMPRESSES a button (95%→100%), the UI scrolls/transitions to the next view (old pushes out, new pulls up), and a `[side headline]` SWAPS beside the device (old slides up + fades, new slides up + in) per screen. Holds on the final screen. No camera move, no cursor.
+- Variant — floating-window (key-feature-floating-window-scroll, 7.8s): OPENS on a full-frame `[title card]` (a small `[icon]` draws in at center, `[feature name]` below; holds ~2s), which DISSOLVES to a `[macOS-style browser/app window]` floating on a `[vivid gradient]` (traffic-lights + `[URL pill]` + tabs; left nav, central content, right `[sidebar]`). Camera PUSHES IN on a `[target region/sidebar]` (active item highlighted `[accent]`, a cursor drifts down the list), then ZOOMS BACK OUT to re-frame the whole window while the content SCROLLS through `[sections]`; the `[highlighted item]` stays marked. One push-in→zoom-out arc, gated by the title-card opener.
+- Variant — 3d-hand (key-feature-3d-device-hand-demo, 7.9s): FULLY 3D — a `[3D device]` drifts in a `[stylized 3D void / bloom + particles]`, opening tilted and self-rotating to face the lens nearly flat as ONE CONTINUOUS forward camera push begins (no cuts). A glossy `[3D hand]` rises from the bottom-foreground and GESTURE-DRIVES the surface: it swipes to scroll a `[picker/sidebar panel]` of `[option cards]` and taps `[option]` (while a `[header word]` letter-flips in place); the selection APPLIES — a `[new layout]` grows from center to fill the device face, nav flips, a `[marquee]` scrolls horizontally; the hand swipes again to scroll the page upward through `[sections]`, then drifts out. The camera never stops pushing; the bright device face keeps growing toward the lens until it BLOOMS into a `[light]` wash — a zoom-through "portal" exit that fills the frame.
+
+**motion vocabulary** surface establish (edge slide-in + settle / tilt drift-in + self-rotate-to-camera / title-card dissolve); accent shape spring behind surface; element-level screen-cycling (scroll-swap, push-in-from-side, scale-swap); button tap-compress; staggered side-headline reveal + copy swap (out-up / in-up); in-place header-word letter-flip; floating browser-window-on-gradient idle float; full-frame title-card opener (icon draw-in + label); camera push-IN on a region; camera zoom-OUT re-frame; content scroll-through; one continuous 3D camera-follow push (no cuts); 3D device drift + self-rotate; stylized-environment bloom/particles; 3D-hand entrance + swipe-scroll + tap (gesture-driven); picker-panel slide-in; template-apply grow-from-center; horizontal marquee scroll; gesture-driven page scroll; zoom-through bloom/portal exit; static-hold (no camera) as the floor of the camera range.
+
+**rule mapping** (per motion verb → backing rule, or flagged special)
+
+- screen-cycling — UI scrolls/sections scroll inside the surface (device-tour, floating-window scroll, 3d-hand page scroll) → `3d-page-scroll` (webpage/app as a tilted card whose content `translateY`-scrolls to sections; primary mechanic for the surface's screen flow)
+- floating-window establish + the surface presented as a tilted/floating UI card → `3d-page-scroll` (the tilt/perspective framing) + `css-3d-transforms` (perspective/`translateZ` depth)
+- screen / side-copy state swaps (discrete screen states; side headline content swapping per beat) → `discrete-text-sequence`
+- side-headline reveal (staggered fade + slide-up) → `discrete-text-sequence`
+- in-place header-word letter-flip (3d-hand) → `hacker-flip-3d`
+- screen swap as a coordinated shrink-out / pop-in between two screen states → `scale-swap-transition`
+- template-apply "new layout grows from center to fill the face" (3d-hand) → `center-outward-expansion` (clustered-at-center → expand to fill)
+- the surface morphing between states / title-card→window dissolve as the eye-anchor transition → `card-morph-anchor`
+- button tap-compress (95%→100% press feedback) → `press-release-spring` (or `physics-press-reaction` for a heavier press)
+- floating-window cursor click on the highlighted list item → `cursor-click-ripple`
+- accent-highlight pop on the active sidebar/list item → `asr-keyword-glow` (accent glow on the focused item)
+- drifting cursor down the sidebar list (floating-window) → `camera-cursor-tracking` (flat-cursor drift; pairs with the push-in)
+- floating browser-window idle float / 3D device drift-breathe → `sine-wave-loop`
+- 3D device drift + self-rotate-to-camera + perspective depth (3d-hand) → `css-3d-transforms` (CSS-3D) **or** `3d.md` technique (true Three.js/R3F device); see camera modifier
+- horizontal `[marquee]` scroll (3d-hand) → `viewport-change` (PAN mode on the marquee strip) — _thin fit; a literal CSS-marquee/translateX loop is closer to a `gsap-effects`/CSS recipe than a named motion rule_
+- 3D-hand entrance + swipe + tap as the interaction DRIVER (gesture input that scrolls/selects) → **flagged special — needs a heavier capability beyond the rule library (R3F/Three.js + WebGL), NOT a motion-shape rule.** The 3D hand model + WebGL bloom have a _technique_ backing (`3d.md` — R3F, `useGLTF` HandModel, `--gl=swiftshader` for the shader/bloom), but no motion-shape rule models a 3D hand as the swipe-to-scroll / tap-to-select gesture protocol. `context-sensitive-cursor` / `camera-cursor-tracking` only model a flat typing/pointer cursor, not a 3D gesturing hand.
+- zoom-through bloom / portal exit (3d-hand) → **flagged special — needs a heavier capability beyond the rule library (WebGL), NOT a named transition rule.** Capability is `techniques.md` → WebGL shader (via `3d.md` headless WebGL: `--gl=swiftshader --concurrency=1`), but no named transition rule covers a bloom/portal fly-through.
+
+**camera modifier**: The showcase camera spans a RANGE keyed by variant, all on a single content-wrapping virtual camera (`viewport-change`):
+
+- static-tour → NO camera move (`viewport-change` held at scale 1, or omitted); all motion is element-level. This is the floor of the range and what distinguishes the device-tour from the rest.
+- floating-window → a two-phase push-in → zoom-out arc → `multi-phase-camera` (e.g. dramatic-reveal 1.1→1.0→0.95 feel): push IN on the `[sidebar/region]` via `coordinate-target-zoom` (off-center target = scale + counter-translate), then `multi-phase-camera` zooms back OUT to re-frame the whole window while content scrolls.
+- 3d-hand → ONE continuous forward push (no cuts) → `multi-phase-camera` in steady-push mode (1.0→1.03→1.06… plus its sine micro-drift) layered over `css-3d-transforms`/`3d.md` so the device self-rotates-to-lens during the push; the push runs unbroken into the bloom/portal exit (exit itself is the WebGL-shader flagged special above). Across all three: `viewport-change` is the base virtual-camera primitive; `multi-phase-camera` sequences the push/zoom phases (and supplies the always-on micro-drift that keeps even the "static" tour from feeling dead); `coordinate-target-zoom` aims the push at off-center screen detail.
+
+**Overflow (pan/scroll surfaces — required for a clean `check`):** a panned or scrolled surface deliberately moves content PAST the edges of its framing card. Clip it at the card (`overflow: hidden` on the card/window) AND mark the moving inner layer (the `.world` / surface wrapper holding the screenshot + any markers/labels) with `data-layout-allow-overflow` — otherwise `check` reports `text_box_overflow` / `container_overflow` errors for the parts that scroll off (e.g. a marker label panned off the left edge). The card clips them visually; the attribute tells the layout audit it's intentional, not a layout bug.
diff --git a/.claude/skills-media/hyperframes-animation/blueprints/grid-card-assemble.md b/.claude/skills-media/hyperframes-animation/blueprints/grid-card-assemble.md
new file mode 100644
index 000000000..9d490efe2
--- /dev/null
+++ b/.claude/skills-media/hyperframes-animation/blueprints/grid-card-assemble.md
@@ -0,0 +1,66 @@
+# grid-card-assemble — Grid / Card Assemble
+
+**intent**: N items (tiles / cards / logos / list-lines) self-assemble in a staggered cascade into a grid or vertical list and hold — a "look how much / who / what it does" beat that enumerates breadth at once; an optional camera zoom-OUT pulls back to reveal the assembled array sitting inside a vaster whole.
+
+**roles served**
+
+- Key_Feature (from key-feature-card-grid-assemble): a grid of labeled feature tiles/pills (icon + label) cascades one-by-one into a 2-col-brick / 3×3 grid, then holds near-static with a slow push-in — enumerate many capabilities, no live UI, no cursor.
+- Key_Feature (from key-feature-glass-card-camera-reveal): open TIGHT on 2–3 glowing icons; a camera zoom-OUT unfolds a row of glassmorphism cards that grow from behind the icons (icons shrink to card headers), center card scales forward, the group floats, then sweeps out — a "pillars revealed at once" reveal variant of the same assemble shape.
+- Benefits (from benefits-vertical-list): short value phrases populate a single vertical list ~1 item/sec, co-resident and accumulating; each line enters via a spring marker-pop + check-draw + pill mask-wipe, OR the whole stack snaps up one slot per beat (slot-machine) so the newest lands in the bright focal slot.
+- Social_Proof (from social-proof-logo-grid-zoom-out): a wall of partner/app logos builds into a center grid (whole-enter / randomized pop-in / column slide-up), an optional headline + accent-gradient proof-number fills in above, then a continuous camera zoom-OUT shrinks the array to reveal a vast ecosystem; optional fixed HUD/viewfinder brackets; optional grid slide-up fly-out exit.
+
+**duration**: 3.0–10.5s (Social_Proof 3.0–6s · Key_Feature grid 5.8–7.3s · Key_Feature glass-card 6.5s · Benefits list 6.5–10.5s, scaling ~1 item/sec with count)
+
+**shot structure** (consolidated template — concrete motion verbs, [slots])
+
+- **Scene 1 (0.0–~1.0s) — open + first arrivals.** On a `[gradient / radial / dark background]` (optional `[dot-grid / drifting-watermark]` texture), an empty `[grid or list region]` is established and items begin to ASSEMBLE in a quick staggered cascade (~0.04–0.08s gap; list pacing ~1 item/sec). Each `[item: feature tile / pill / logo tile / benefit line]` fades + slides/scales a short distance directly into its slot (low drama — no scatter, no big bounce; spring overshoot reserved for accent markers). Camera static. An opening `[headline / hook]` may fill in line-by-line above the array, with any `[proof number]` counting up in an `[accent gradient]`.
+- **Scene 2 (~1.0s–~Xs) — array resolves + holds.** Remaining items finish arriving; layout resolves into the final `[2-col-brick / 3×3 grid / dense mosaic / stacked list]`. The completed array HOLDS, alive but resting: a gentle continuous parallax/sine FLOAT on the tiles and/or a slow camera push-in (faint scale-up). Optional `[accent-color]` glow TRAVELS across/behind the tiles.
+- **Scene 3 (~Xs–end) — settle / reveal / exit.** Everything settles and holds to the end, OR the optional camera modifier runs (see below), OR a `[closing line / CTA]` book-ends the array.
+
+Variants (where roles diverge from the template):
+
+- **Variant — Key_Feature grid**: items are labeled `[icon + feature-label]` tiles/pills assembling into a 2-col-brick / 3×3 grid; near-static hold with slow push-in + optional traveling-glow sweep; headline book-ends (`[hook]` → `[CTA]`). No camera reveal.
+- **Variant — Key_Feature glass-card-reveal**: the assemble is CAMERA-DRIVEN, not element-stagger. Open tight on `[2–3 glowing icons]`; camera zoom-OUT grows `[N]` glass cards out from behind the icons (icons shrink ~50% to become card headers), `[center card]` scales ~105% and moves forward to overlap the sides (quick spring); cards hold side-by-side with continuous parallax float; exit = fast motion-blur SWEEP slides the cards off-frame.
+- **Variant — Benefits vertical-list**: a single vertical `[benefit-line]` stack, ~1 item/sec, two sub-modes — (a) BUILD: each line stays fully lit; entry = `[marker]` spring-pop + `[check/icon]` draw-in + `[pill]` mask-wipe of the text; (b) SNAP: the whole stack steps up one slot per beat (~0.1s eased) so the newest line lands in the bright focal slot and lines leaving it dim by position. Static camera; optional perpetual `[decorative orbit/disc]` on the opposite side. No camera reveal.
+- **Variant — Social_Proof logo-wall-zoom-out**: intro beat (`[trusted-by headline]` card OR a `[product screenshot]`) crossfades/cuts to a center logo grid that builds (whole-enter / randomized pop-in / column slide-up); a continuous camera zoom-OUT then shrinks the whole grid toward center to reveal a vast ecosystem and holds; optional fixed HUD/viewfinder brackets; optional exit = whole grid SLIDES UP and flies out through the top.
+
+**motion vocabulary**: item stagger-assemble (fade + short slide/scale into slot) · brick/grid/list layout resolve · randomized pop-in · column slide-up · vertical-list step (slot-machine snap-and-hold) · spring-overshoot marker pop · check/icon draw-in · pill/label mask-wipe reveal · dim-by-position de-emphasis · line-by-line headline fill · accent-gradient number count-up · near-static hold · gentle parallax/sine float on hold · slow camera push-in · camera zoom-OUT reveal (continuous OR phased pull-back) · cards-grow-from-behind-icons · icon-shrink-to-header · center-card scale-up + forward overlap (spring) · traveling-glow sweep · fixed HUD/viewfinder brackets · motion-blur slide-out sweep (exit) · grid slide-up fly-out (exit) · book-end headline fade · perpetual decorative orbit/loop.
+
+**rule mapping** (motion verb → `rule-id`)
+
+- item stagger-assemble into slot → `center-outward-expansion` (per-item stagger + short-path slide variant; for a wall too dense for a true center burst, use it in its "starting partially-spread"/direct-into-slot form — see merge tension)
+- brick/grid/list layout resolve → `center-outward-expansion` (target positions = final layout slots)
+- randomized pop-in stagger → `gsap-effects` (stagger recipe; randomized `from`/order)
+- column slide-up into grid → `gsap-effects` (per-column staggered slide-up)
+- vertical-list step / slot-machine snap-and-hold → `vertical-spring-ticker` (STEPS = number of line advances)
+- spring-overshoot marker pop → `spring-pop-entrance` (back.out spring) — also `gsap-effects` for the staggered pop chain
+- check / icon draw-in inside marker → `svg-path-draw`
+- live line-art icon in a tile (internal parts) → `svg-icon-enrichment`
+- pill / label mask-wipe text reveal → `techniques.md` (clip-path reveal)
+- dim-by-position de-emphasis → `gsap-effects` (per-line opacity by slot position; no dedicated rule)
+- line-by-line headline fill → `discrete-text-sequence`
+- accent-gradient proof number count-up → `counting-dynamic-scale`
+- gentle parallax / sine float on hold → `sine-wave-loop` (apply the concurrent-elements amplitude `/√N` rule for a held grid)
+- slow camera push-in → `multi-phase-camera` (steady-push phase pattern)
+- center-card scale-up + forward overlap → `spring-pop-entrance` (the quick spring) + `techniques.md` CSS-3D (z-depth overlap)
+- cards-grow-from-behind-icons / icon-shrink-to-header → driven by the camera reveal (`multi-phase-camera`) — the grow/shrink are scale tweens chorded to the pull-back phase; no separate rule
+- fixed HUD / viewfinder brackets → `ai-tracking-box` (static-bracket variant — overlay frame, not tracking)
+- book-end headline fade → `discrete-text-sequence` (or `gsap-effects` fade)
+- perpetual decorative orbit / disc / loop → `sine-wave-loop` (or `orbit-3d-entry` if it's an orbiting badge ring)
+- traveling-glow sweep across/behind tiles → `ambient-glow-bloom` (one-pass traveling glow sweep across the tiles)
+- motion-blur slide-out sweep (glass-card exit) → `motion-blur-streak` (directional velocity blur on the fast sweep that carries the cards off-frame)
+- grid slide-up fly-out exit → `gsap-effects` (plain staggered translate-off-frame; no dedicated rule needed — a basic exit tween, not a missing capability)
+
+**camera modifier — zoom-OUT reveal** (optional; the role-defining move for the glass-card and logo-wall variants): a camera wrapper around the whole array scales DOWN over the hold, revealing the assembled grid/cards sitting inside a larger environment (ecosystem scale, or a row of cards unfolding from tight icons).
+
+- Continuous single-pass zoom-out (Social_Proof ecosystem pull-back) → `viewport-change` (one wrapper, `cam.scale` ↓ via onUpdate — single source of truth)
+- Phased pull-back → focus → settle, with built-in drift (Key_Feature tight-icons → cards-unfold) → `multi-phase-camera` (use the "Dramatic reveal: push → neutral → pull" / pull-back phase pattern; grow/shrink of cards chords to the pull-back phase)
+
+---
+
+```
+BLUEPRINT: grid-card-assemble — serves Key_Feature, Benefits, Social_Proof (folded 4 drafts)
+RULE GAPS: none — traveling-glow sweep → ambient-glow-bloom; motion-blur slide-out sweep (exit) → motion-blur-streak; grid slide-up fly-out (exit) → gsap-effects (plain translate)
+```
+
+Merge tension: `center-outward-expansion` (the natural backing for stagger-assemble) caps cleanly at 3–8 items and explicitly warns 8+ causes mid-flight overlap chaos — but a Social_Proof logo wall is deliberately dense (12+ tiles), so for that variant the items must NOT burst from a shared center; they slide a short distance directly into their own slot (the rule's "starting partially-spread"/short-path form, or a `gsap-effects` per-item stagger), which the consolidated Scene-1 verb already specifies as "short distance directly into its slot."
diff --git a/.claude/skills-media/hyperframes-animation/blueprints/kinetic-type-beats.md b/.claude/skills-media/hyperframes-animation/blueprints/kinetic-type-beats.md
new file mode 100644
index 000000000..87404d9e7
--- /dev/null
+++ b/.claude/skills-media/hyperframes-animation/blueprints/kinetic-type-beats.md
@@ -0,0 +1,78 @@
+# kinetic-type-beats — Kinetic-Type Beats
+
+**intent**: A flat, centered, bold-type shot where the motion IS the word/phrase changing — the line either swaps tokens in place by hard cut, or builds a statement across full-screen beats (each with its own move) that lands a spring-pop payoff.
+
+**roles served**
+
+- Hook (from `hook-kinetic-type-flash`): when one stationary line lands a punchy rhetorical question or "you keep doing X" callout and the in-place token swap itself is the joke.
+- Hook (from `hook-kinetic-type-escalation`): when ONE statement should escalate across distinct full-screen beats (each a different move) and punctuate on a spring-pop payoff element — a rising-intensity / "transform X into Y" opener.
+- Problem (from `problem-kinetic-type-beats`): when the script is 3–5 short pain statements (or a "what-if?" framing) that should each land alone, on a bare canvas, before the next replaces it — no product visible yet.
+- Product_Intro (from `product-intro-kinetic-type-namedrop`): when the hook IS the words — hard-cut through "Introducing…" / tagline / value beats and resolve on the brand name or logo.
+- Benefits (from `benefits-kinetic-type`): when "what you get" is a rapid-fire staccato montage — 8–12 short value phrases, each flashing and clearing before the next at high tempo.
+- CTA (from `cta-kinetic-type`): when the sign-off is a punchy closing line (or a short stack of value lines) that snaps/fades in beat-by-beat and lands on the brand lockup or URL — no spatial set, no clicked button.
+- Brand_Outro (from `brand-outro-kinetic-type-resolve`): when the close is a rapid center-channel barrage of single-word verbs asserting breadth, resolving on the brand's one defining word (motion-is-the-message, no logo lockup).
+
+**duration**: 3.4–12s (Benefits fastest ~3.5–4s at 8–12 sub-0.5s beats; Brand_Outro ~3.6s; Problem longest 7–12s; CTA spans 3.6–11.7s with beat count)
+
+**shot structure** (flat, fixed center anchor; bold sans-serif text on a solid `[bg color]`; type/tokens are the only subject; camera locked unless a modifier is noted; two folded sub-shapes — **(A) fixed-line token swap** and **(B) multi-beat statement build**)
+
+- **Scene 1 (0.0–~1.0s) — first beat lands.** Solid `[bg color]` field. Bold `[type color]` text arrives dead-center via ONE entrance: type-on character-by-character with a trailing blinking caret, OR a hard-cut FLASH-in (no fade/slide), OR a per-word staggered fade/blur, OR an oversized word that smoothly SCALES DOWN to a small centered word. An optional `[accent color]` move plays on the key word(s): a left→right drawn underline / strike-through, a small particle/dot burst from behind the text, or a `[accent color]` selection-box framing the word.
+  - _Variant — Hook (flash)_: just the fixed `[hook line]` (or its first word) parks at center; no escalation move.
+  - _Variant — Hook (escalation)_: `[beat 1 text]` arrives big and scale-downs to centered, OR sits over a glowing `[motif]` with a slow camera push-in (see camera modifier); ends on a hard cut.
+  - _Variant — Problem_: centered `[pain line 1]` reveals in chunks across one or two lines with its `[accent]` underline / particle burst.
+  - _Variant — Product_Intro_: bold `[hook word, e.g. "Introducing"]` enters with a typographic accent (split-and-slide apart, drawn underline, or `[accent]` selection-box).
+  - _Variant — Brand_Outro_: optional single-frame flash of `[product UI / hero asset]` precedes the verb channel, then `[verb 1]` hard-cuts in centered.
+
+- **Scene 2..N — beats replace each other in place (the engine).** The center anchor advances one beat at a time; nothing from the prior beat lingers. Choose the swap mechanism by sub-shape:
+  - **Sub-shape A (fixed-line token swap)**: the line stays fixed and only the variable slot changes by an instant hard CUT (no roll/scroll/blur) — `[token A]` → `[token B]` → `[token C]` — OR the final word(s) backspace out and a new word retypes (`[word A]` → `[word B]`). The rest of the line holds.
+  - **Sub-shape B (multi-beat statement build)**: each full-screen beat hard-cuts to a NEW background/line, and each gets its own distinct entrance/exit MOVE — springy scale-in/scale-out overshoot, 3D letter-tumble (glyphs scatter into a rotating depth cloud, then reassemble into the next phrase), motion-blur fly-in that resolves sharp at center, prior text accelerates/zooms past the camera while fading, letter-spacing collapse, or a bottom-up masked slide. Background may hard-flip `[bg A]`↔`[bg B]` on selected beats with `[type color]` inverting to stay legible.
+  - _Variant — Hook (escalation)_: beat 2 `[beat 2 text]` (more emphatic) snaps in; beat 3 `[beat 3 text]` (climax) holds, then a transition-out move on the type itself — a Z-dolly forward THROUGH an oversized glyph, OR a per-word karaoke highlight sweep lighting words left→right.
+  - _Variant — Problem_: each `[pain line k]` enters by chunk-reveal or motion-blur fly-in as the prior blurs/zooms off; an optional `[accent color]` interstitial word ("[what-if hook]") scales up from center, holds, then zooms past the camera and fades.
+  - _Variant — Product_Intro_: each `[tagline phrase]` is a hard-cut/push-through inverted-text beat with its own one-shot accent (strike-through, slider/toggle shapes sliding in, or a bg-invert cycle white→`[accent]`→black flipping fg/bg).
+  - _Variant — Benefits_: high tempo (~0.4s/beat) — each `[benefit phrase]` pops via springy scale-in/out or 3D letter-tumble; multiple bg light↔dark flips across the run with text-color invert.
+  - _Variant — CTA_: each `[value line]` → `[value line]` → `[CTA verb line]` clears by hard cut / zoom-blur cut through near-black / fade-out, then the next pops/fades/slides in. Optional `[accent motif]` draws on behind (rising line-graph trim-path, thin wireframe guides, gutter geometry tiles).
+  - _Variant — Brand_Outro_: a centered single `[verb / keyword]` HARD-CUTS to the next at a steady ~0.2s cadence (no fade/scale) over a continuous moving field (see camera modifier).
+
+- **Scene N (final beat → end) — resolve and HOLD.** The last beat lands and holds to the end (settle only, no further scale-out). Resolution diverges by role:
+  - _Variant — Hook (flash)_: last token swap lands and holds; optional tiny punctuation/emphasis snap (`?` → `?!`, or fill snaps to `[accent color]`).
+  - _Variant — Hook (escalation)_: resolve on `[payoff bg]` — a `[payoff element]` (colored square / heart-eyes reaction emoji) SPRING-POPS in center; small `[accent motes]` drift outward; subtle settle.
+  - _Variant — Problem_: final `[pain line]` reveals (left→right swipe with leading-edge blur, OR letters explode radially then the resolving line fades up); holds the pain on screen.
+  - _Variant — Product_Intro_: resolve on the brand — `[logo mark]` / `[wordmark]` pops in centered (optional sting: liquid/ink splash, blob backing), OR the final value word holds inside an expanding-iris `[accent]` circle that scales to fill frame and hard-cuts the closing word through it.
+  - _Variant — Benefits_: the last `[benefit phrase]` arrives (optionally on the inverted bg) and SETTLES — does not scale/tumble back out.
+  - _Variant — CTA_: land on the lockup — `[logo mark]` SCALES UP small→full and holds, OR a `[logo]`/`[url]` builds segment-by-segment beside its icon. End-card holds dead static.
+  - _Variant — Brand_Outro_: hard cut to the `[resolve word / brand keyword]` (longest, still centered); HOLDS ~0.5s while the background field keeps moving.
+
+**motion vocabulary**: hard-cut / flash word swaps; in-place token cycle (instant cut, no roll/scroll/blur); type-on with trailing blinking caret; backspace-and-retype; per-word staggered fade/blur reveal; big→small scale-down; springy scale-in/scale-out overshoot; 3D letter-tumble scatter-and-reassemble; motion-blur fly-in / blur-off; prior text zoom-through-camera; letter-spacing collapse; bottom-up masked slide; drawn-on `[accent]` underline / strike-through; particle/dot burst from text; `[accent]` selection-box frame; bg-invert hard-flip with text-color invert; karaoke per-word highlight sweep; radial letter-explode; expanding-iris circle wipe-to-next; final spring-pop payoff element (square / emoji / logo mark); drifting `[accent]` motes / ambient shapes; segment-by-segment URL/wordmark build; final-token punctuation snap; settle-and-hold.
+
+**rule mapping**
+
+- hard-cut / flash word swaps, in-place token cycle, whole-line state swaps at time thresholds → `discrete-text-sequence`
+- type-on character-by-character + blinking trailing caret → `discrete-text-sequence` (text/typing state progression) + `context-sensitive-cursor` (caret blink/color-switch)
+- backspace-and-retype final word(s) → `discrete-text-sequence` (typos/holds/backspace is explicitly in-scope)
+- one short distinct phrase per beat / script-driven phrase windows / word-by-word tagline assembly → `dynamic-content-sequencing`
+- percussive per-beat phrase entrances on a shared beat array (distinct entrance per phrase, steady cadence) → `kinetic-beat-slam` (best fit for the multi-beat statement-build engine and the ~0.2s Brand_Outro verb march)
+- per-word staggered fade/blur reveal → `kinetic-beat-slam` (per-phrase/per-word distinct entrances); the soft-focus blur component → `depth-of-field-blur` (selective-focus blur on the off-focus words)
+- big→small scale-down on a word; springy scale-in/scale-out overshoot → `spring-pop-entrance` (spring pop/settle) backed by `gsap-effects` for the plain scale tween
+- 3D letter-tumble scatter-into-depth-cloud then reassemble → `depth-scatter-assemble` (glyphs scatter into a 3D depth cloud and reassemble into the next phrase; combine w/ `3d-text-depth-layers` for the extruded read, or `hacker-flip-3d` for an in-place per-char flip flavor)
+- karaoke per-word highlight sweep synced across words → `asr-keyword-glow` (keyword glow+scale on a synced rail) OR `css-marker-patterns` (highlight sweep) — choose ASR-driven vs. static-timeline sweep
+- drawn-on `[accent]` underline / strike-through / loop / scribble under key word → `css-marker-patterns` (highlight sweep / circle / burst / scribble / sketchout)
+- particle/dot burst from behind text → `css-marker-patterns` (burst) backed by `gsap-effects`
+- `[accent]` selection-box frame around a word → `css-marker-patterns` (circle/box marker) + `gsap-effects`
+- bg-invert hard-flip (light↔dark / white→accent→black) with text-color invert → `discrete-text-sequence` (whole-text/state swap covers the synchronized fg/bg state change)
+- letter-spacing collapse; bottom-up masked slide → `gsap-effects` (tween letter-spacing / masked translate) + techniques: per-word kinetic typography / clip-path reveal
+- expanding-iris circle wipe that morphs the current word into the next at the same center → `scale-swap-transition` (morph two elements at same center)
+- final spring-pop payoff element (colored square / reaction emoji / logo mark) → `spring-pop-entrance` (or `physics-press-reaction` for a weightier pop)
+- drifting `[accent]` motes / ambient shapes / soft drifting gradient field beneath the type → `sine-wave-loop` (idle drift loop)
+- segment-by-segment URL / wordmark build beside its icon → `discrete-text-sequence` (segment-by-segment state reveal) or `dynamic-content-sequencing`
+- final-token punctuation / emphasis snap (`?`→`?!`, fill→accent) → `discrete-text-sequence`
+- settle-and-hold final frame → `spring-pop-entrance` (settle phase) / static hold (no rule needed)
+- motion-blur fly-in / blur-off / zoom-through-camera streak on type → `motion-blur-streak` (directional velocity blur on a fast fly-in / zoom-through; the heavy motion-blur smear resolves sharp at center)
+- radial letter-explode (glyphs explode outward radially then resolve) → `depth-scatter-assemble` (radial per-letter explode-and-resolve is in scope alongside the depth-cloud scatter)
+- 3D letter-tumble depth-cloud scatter-and-reassemble → `depth-scatter-assemble` (free tumbling depth-cloud that flies out and snaps back into the next phrase)
+
+**camera modifier** (optional, layered over the flat shot; most variants are camera-locked)
+
+- Slow continuous global zoom-in / uniform push-in running underneath the whole sequence (Problem, Brand_Outro) → `multi-phase-camera` (push phase) — gives parallax between the fixed type and a moving background field.
+- Camera dolly/zoom forward THROUGH an oversized glyph along Z as a beat transition-out (Hook escalation, Product_Intro push-through) → `coordinate-target-zoom` (target the glyph center) or `multi-phase-camera` (push).
+- Slow push-in on Scene 1 over a glowing `[motif]` (Hook escalation) → `multi-phase-camera` (push) or `coordinate-target-zoom`.
+- Note: the in-place token swap (sub-shape A) and most Benefits/Hook-flash/CTA variants are fully camera-static — the swap is the only motion.
diff --git a/.claude/skills-media/hyperframes-animation/blueprints/logo-assemble-lockup.md b/.claude/skills-media/hyperframes-animation/blueprints/logo-assemble-lockup.md
new file mode 100644
index 000000000..7fc2bb793
--- /dev/null
+++ b/.claude/skills-media/hyperframes-animation/blueprints/logo-assemble-lockup.md
@@ -0,0 +1,69 @@
+# logo-assemble-lockup — Logo Assemble → Lockup
+
+**intent**: A brand mark / wordmark builds itself from parts (elements assemble or orbit in, letters cascade, an outline draws on, or a camera pushes through negative space) and resolves into a centered logo lockup — optionally extended into a final URL / CTA.
+
+**roles served**
+
+- Product_Intro (from product-intro-logo-system-assemble): A wordless, premium brand STING — an abstract system of elements pulses / grows / orbits and assembles around a FIXED central logo, carried by one cinematic camera tilt; no copy, no UI.
+- CTA (from cta-camera-push-lockup): The logo build is a LEAD-IN to the final ask — a 3D mark assembles + wordmark cascades, then a fast camera PUSH-THROUGH the mark's negative space streaks giant CTA letters past the lens and resolves on a `[url]` / `[CTA verb]` lockup.
+- CTA (from cta-button-wordmark-build): The "draws-its-own-outline → wordmark-builds-letter-by-letter" sub-shape — a `[CTA button]` pill strokes its own glowing border, a diagonal-band WIPE flips the frame, and the `[wordmark]` types in beside a slash to land the lockup. Camera static.
+- Brand_Outro (from brand-outro-assemble-logo-lockup): The closing mark — a formation of `[feature pills / UI elements]` CLEARS the stage off all four edges, then on the empty frame the `[logo mark]` draws itself on stroke-by-stroke and the `[wordmark]` reveals to complete the lockup, then fades out.
+- Product_Intro (from brand-reveal-assemble-zoom): a context-then-focus reveal — a companion tagline TYPES out to set context, the hero mark pops in beside it, then the companion exits as the layout recenters and the camera pushes IN to a held close-up on the mark (wide composition narrowing to a tight focus).
+
+**duration**: ~4.6–11.0s (Brand_Outro ~4.6s · brand-reveal ~5s · Product_Intro ~7s · CTA 5.4–11.0s)
+
+**shot structure** (one consolidated time-coded template; `[slots]` are product-agnostic)
+
+- Scene 1 — clear / ignite (0.0–~1.0s): the stage is prepared for the mark to build into.
+  - _Variant — Product_Intro_: opens on a clean `[light bg]` with faint concentric guide rings under a flat top-down view; rings PULSE and expand from center; mid-beat the bg crossfades `[light]→[dark gradient: hero→secondary]`, tiny seed dots appear along the rings, and the central `[logo mark]`'s glow IGNITES (mark is present from t=0, fixed, front-facing).
+  - _Variant — CTA push_: on a `[bg gradient]`, the `[logo mark]` is settling in object space (a 3D mark with thin wireframe edge-guides + a faint bracket motif behind center); a very slow continuous camera push-in may already be creeping.
+  - _Variant — CTA button-build_: on a `[dark grid bg]`, a rounded `[CTA button "label"]` pill rises / scales into center (a prior headline clearing off the top); its thin border DRAWS ON as an animated glowing outline STROKE, with a small `[accent]` comet / spark icon at its left edge.
+  - _Variant — Brand_Outro_: a PRE-ARRANGED formation of `[feature pills / element grid]` (each `[icon]`+`[label]`) DISPERSES — elements slide outward from their laid-out positions and fly off all four frame edges (edge-clearing drift, NOT a center-origin burst), emptying the frame onto a clean `[bg]`.
+
+- Scene 2 — assemble the mark (~1.0–~Ys): the mark builds itself from parts.
+  - _Variant — Product_Intro_: seed dots SCALE UP into flat `[accent]` shapes arranged on the rings; concentric bands ripple outward (tunneling feel) and the shapes begin to ORBIT / drift around the still-fixed center.
+  - _Variant — CTA push_: the `[wordmark]` CASCADES out from behind the mark (letters left→right with overshoot) into the full `[brand lockup]`; the 3D mark may assemble in beats (a terminal detaches + pops as a spring dot, a part hinges-open-and-snaps-shut elastic). Optional beat: a `[cursor]` arcs in and "clicks" the wordmark, OR a frosted-glass pill holding an intermediate `[CTA line]` springs in while layered mark shells fan to the edges.
+  - _Variant — CTA button-build_: a graphic WIPE flips the frame to `[contrast bg]` — a thin `[accent]` diagonal line sweeps in, swells into a full-frame diagonal BAND, then collapses to a small `[accent]` slash.
+  - _Variant — Brand_Outro_: on the now-clear frame, the `[logo mark]` DRAWS ON via stroke (built arc-by-arc / segment-by-segment).
+
+- Scene 3 — resolve to lockup (~Ys–end): the lockup completes and holds (Product_Intro / Brand_Outro) or is flown into / extended to a CTA (CTA variants).
+  - _Variant — Product_Intro (the ONE camera move)_: the whole system smoothly TILTS from flat top-down into an angled isometric perspective (ease-in-out) with a slight zoom-out — flat shapes become luminous 3D forms, bands become glowing orbit lines, while the central `[logo mark]` does NOT tilt (stays 2D, front-facing, fixed). Camera eases to a stop; elements keep continuous orbit/drift (inner faster than outer); the mark holds its steady glow. Final settled frame.
+  - _Variant — CTA push (the signature)_: a single fast CAMERA PUSH-THROUGH the mark's negative space / through the glass pill — heavy horizontal motion-blur, giant `[CTA]` letters streaking past the lens (cursor drops out). Resolves to the final lockup on a saturated `[bg]`: a `[url badge]` / `[CTA line]` revealed by a left→right WIPE carrying an `[accent]` leading edge (or a clean fade), with solid mark-shapes parallax-sliding in behind. Settles to a dead-static hold (slow zoom-out / settle).
+  - _Variant — CTA button-build_: the `[wordmark]` BUILDS letter-by-letter to the right of the slash, landing on the final "`[slash] [WORDMARK]`" lockup centered on the new bg. Slow settle to static.
+  - _Variant — Brand_Outro_: the `[wordmark]` reveals beside the drawn mark (slide / fade) to complete the `[lockup]`; the lockup holds, then fades to `[black / bg]`.
+
+**motion vocabulary**: ring pulse / expand; background crossfade (light→dark); glow ignite; seed-dot scale-up; continuous orbit / drift (inner faster than outer); single 3D perspective tilt (flat→isometric) + slight zoom-out around a fixed 2D anchor; 3D logo assemble (part detach + spring dot, clapperboard hinge / snap, shell fan-out); wordmark cascade with overshoot (letters left→right); button pill rise / scale-in; animated stroke-outline DRAW + glow (button border AND logo mark); comet / spark accent; diagonal-band wipe (sweep → swell → collapse-to-slash); letter-by-letter wordmark build; pre-formed grid DISPERSE off all four edges; logo-mark stroke-draw (sequential arcs / segments); fast CAMERA PUSH-THROUGH with motion-blur (CTA spine); continuous slow push-in / push-out; cursor arc-in + click; parallax shape slide-in; left→right URL/badge wipe with glowing leading edge; static / fade-out end-lockup hold; optional idle breathe on the held mark.
+
+**rule mapping** (per motion verb → `rules/<id>.md`)
+
+- ring pulse / expand from center → `center-outward-expansion` (radiate from a shared center; reuse the 0→1 progress driver)
+- background crossfade (light→dark gradient) → plain opacity/background tween via `gsap-effects` (no dedicated rule needed)
+- glow ignite on the mark → `asr-keyword-glow` (envelope-driven glow on the brand element)
+- seed-dot scale-up into shapes → `spring-pop-entrance` (scale-in pop; alt `scale-swap-transition` if dots morph into shapes)
+- continuous orbit / drift around fixed center → `orbit-3d-entry` (flip-in then continuous elliptical orbit; center label = the fixed mark)
+- single 3D perspective tilt (flat→isometric) + slight zoom-out → `multi-phase-camera` (scripted scale phases on a scene-wrapping camera, for the zoom-out) — see camera modifier; the FLAT→ISOMETRIC plane tilt of the whole stage is a CSS-3D perspective move (`techniques.md` CSS-3D, animating the stage's `rotateX`) — no exact camera rule for the plane-tilt, approximate via CSS-3D (closest reference is `orbit-3d-entry`'s "Tilted orbit plane" variation animated over time)
+- fixed 2D anchor logo amid moving universe → no motion rule needed (static anchor; intentional — it's the absence of motion, the universe moves around it)
+- 3D logo assemble — part detach + spring dot → `spring-pop-entrance` (spring pop, `back.out` overshoot)
+- 3D logo assemble — hinge open / snap (clapperboard) → `hacker-flip-3d` (the 3D-rotate axis) + `techniques.md` CSS-3D (the elastic open-and-snap-shut hinge is an adaptation of the 3D-rotate)
+- 3D logo assemble — shell fan-out to edges → `center-outward-expansion` (run outward from the mark center)
+- wordmark cascade with overshoot (letters left→right) → recipe `gsap-effects` (per-element staggered slide) + `spring-pop-entrance` (the `back.out` overshoot per letter)
+- button pill rise / scale-in → `spring-pop-entrance` (scale-in; alt `scale-swap-transition`)
+- animated stroke-outline draw + glow (button border) → `svg-path-draw` (stroke-dashoffset draw) + `asr-keyword-glow` (the glow on the drawn stroke)
+- comet / spark accent on button → `asr-keyword-glow` (small glow accent); motion path via `techniques.md` GSAP MotionPathPlugin (#9)
+- diagonal-band wipe (sweep → swell → collapse-to-slash) → `techniques.md` clip-path reveal (#12, animate a `polygon(...)` diagonal across the frame; the swell-then-collapse-to-slash is the same clip-path reveal driven through grow→shrink keyframes)
+- letter-by-letter wordmark build → `discrete-text-sequence` (smooth-slice / per-state build); recipe `gsap-effects` (typewriter / appending words)
+- pre-formed grid disperse off all four edges → not a rule gap: a formation flying off-frame is an EXIT, and the pipeline forbids mid-video exits — the harness transition IS the exit (only the final frame may exit the stage). Treat this as transition-handled / final-frame-only rather than an in-scene motion rule. (If staged in-scene as a reveal-the-mark clear, it reuses `center-outward-expansion` run OUTWARD — center→target machinery interpolating formation→offscreen targets, out-easing.)
+- logo-mark stroke-draw (sequential arcs / segments) → `svg-path-draw` (the canonical multi-segment stagger draw)
+- wordmark slide / fade reveal beside drawn mark → `svg-path-draw` (its "brand-line fades in after stroke" tail) ; slide via `spring-pop-entrance`
+- fast camera push-through with motion-blur → `multi-phase-camera` (a hard push phase) — see camera modifier; the heavy motion-blur streak itself → `motion-blur-streak` (directional velocity blur on the fast push-through)
+- continuous slow push-in / push-out → `multi-phase-camera` (phase scale + drift)
+- cursor arc-in + click on the wordmark → `cursor-click-ripple` (move → click → ripple); arc path via `techniques.md` MotionPathPlugin (#9)
+- parallax shape slide-in behind lockup → `depth-scatter-assemble` (parallax depth slide-in of shapes at differing depths; pair with `3d-text-depth-layers` for the depth ordering)
+- left→right URL / badge wipe with glowing leading edge → `techniques.md` clip-path reveal (#12, animate `inset()` left→right); the glowing leading edge → `asr-keyword-glow`
+- static / fade-out end-lockup hold → no motion rule needed (terminal hold / opacity fade; intentional)
+- idle breathe on held mark (optional) → `sine-wave-loop` (post-settle breathing)
+
+**camera modifier** (the push / tilt)
+
+- **CTA push-through** (the CTA spine): a scripted hard zoom phase on a scene-wrapping camera → `multi-phase-camera` ("Steady push" / "Bookend pull" pattern; push phase = the climax). When the mark is OFF-center and the camera must fly through a specific point of negative space, combine with `coordinate-target-zoom` (outer scales, inner counter-translates so the target negative-space point lands at viewport center as scale ramps; measure the offset at setup). The signature heavy horizontal MOTION-BLUR on the streak → `motion-blur-streak` (directional velocity blur on the push); realize with a CSS `filter: blur()` / duplicated-streak layer on the camera during the push window.
+- **Product_Intro tilt** (the one cinematic move): the flat→isometric perspective tilt + slight zoom-out is a single scripted camera beat → `multi-phase-camera` (scale phase + the "Targeted zoom into off-center element" / drift machinery) for the zoom-out. `multi-phase-camera` is scale+translate+drift only, so the perspective-PLANE rotateX (flat top-down → angled isometric) of the whole stage is the CSS-3D move noted above — approximate via `techniques.md` CSS-3D, animating the stage's `rotateX` (closest reference is `orbit-3d-entry`'s "Tilted orbit plane" variation animated over time).
diff --git a/.claude/skills-media/hyperframes-animation/blueprints/overwhelm-surround.md b/.claude/skills-media/hyperframes-animation/blueprints/overwhelm-surround.md
new file mode 100644
index 000000000..ad0314332
--- /dev/null
+++ b/.claude/skills-media/hyperframes-animation/blueprints/overwhelm-surround.md
@@ -0,0 +1,28 @@
+# overwhelm-surround — Overwhelm / Close-In
+
+**intent**: Convey overwhelm by accumulation. Recognizable subjects assemble, density markers scatter in to amplify "look how much," then the central subject morphs into the viewer's own avatar and elements close in from ALL sides — the frame feels surrounded, not zoomed-into. The emotional arc is recognition → claustrophobia.
+
+**roles served**
+
+- Problem (from `problem-mockup-overwhelm`): when the problem beat must first show "too many tools / too much surface area" and then put **the viewer inside it** — a literal swap of subject (product → person) followed by a closing-in that feels invasive. Reach for it when the pain is "you're buried," not "this metric is bad" (that's `dataviz-countup`).
+
+**duration**: 6–9s
+
+**shot structure** (a `[bg]` canvas; recognizable surfaces first, the viewer's avatar revealed underneath, then a radial crowd)
+
+- **Scene 1 (0.0–~1.6s) — recognizable assembly.** Three `[product mockups / surfaces]` assemble into something the viewer knows — staggered scale-in, the **center** one full-size, the two flanks smaller (~0.86). Each rides a low-amplitude float so they feel like live context, not a static collage. Camera static.
+- **Scene 2 (~1.6–3.0s) — density amplifies.** `[platform icons / logos]` scatter in around the mockups (staggered), used purely as **density markers** — "look how much surface area," not animated dials.
+- **Scene 3 (~3.0–4.6s) — the morph (signature move).** The CENTER mockup MORPHS: its content fades out, the container reshapes, and the viewer's `[avatar]` is revealed **underneath** — a literal swap of subject, product → person.
+- **Scene 4 (~4.6–end) — close-in.** `[task bubbles / demands]` close in from ALL sides toward the avatar (radial staggered entry). The avatar **stays put** while the bubbles invade — the claustrophobia comes from being surrounded, never from a camera push. Holds on the crowded state.
+
+**motion vocabulary**: staggered scale-in assembly; resting-scale-preserving low float; density-marker icon scatter; content-fade → container-reshape → reveal-anchor-beneath morph; radial close-in entry from all compass points; held crowded end-state.
+
+**rule mapping**
+
+- staggered mockup + icon entries (smooth settle onto their resting scale) → `spring-pop-entrance` (smooth-settle register) backed by `gsap-effects`
+- platform icons as density markers (positions pre-baked, scale/opacity only — NOT internal-parts animation) → `svg-icon-enrichment` (its DOM contract only)
+- center mockup → avatar morph (HF forbids `width`/`height` tweens → drive the reshape on `scaleX`/`scaleY`, anchor = the avatar layer rendered beneath) → `card-morph-anchor`
+- radial bubble close-in (positions baked once via `cos`/`sin`, staggered entry) → `gsap-effects` (radial layout) + `spring-pop-entrance` (per-bubble arrival)
+- low-amplitude float on background mockups/icons → `sine-wave-loop` (low-amplitude register — subtle jitter that composes onto each element's resting scale, never a `fromTo` yoyo that re-tweens to its start)
+
+**camera modifier**: camera-static — the close-in must read as the world crowding the subject, so the frame holds; a push-in would convert "surrounded" into "zoomed-into" and kill the claustrophobia.
diff --git a/.claude/skills-media/hyperframes-animation/blueprints/spatial-pan-stations.md b/.claude/skills-media/hyperframes-animation/blueprints/spatial-pan-stations.md
new file mode 100644
index 000000000..07cf09120
--- /dev/null
+++ b/.claude/skills-media/hyperframes-animation/blueprints/spatial-pan-stations.md
@@ -0,0 +1,37 @@
+# spatial-pan-stations — Spatial Pan / Stations
+
+**intent**: Pre-place a sequence of labeled stations on one oversized canvas, then traverse it with a single virtual camera — repeated lateral/diagonal pans that center each station in turn and reveal a callout at every stop, landing held on a final station.
+
+**roles served**
+
+- Hook (from hook-pan-timeline / #1 Hook_02): a horizontal timeline of evenly-spaced milestones, left-panned beat by beat, each marker getting a spring-popped callout, landing on the present moment ("evolution / milestone walk leading up to us").
+- Problem (from problem-camera-pan-stations / #8 Problem_01): a connected web of pain "stations" linked by hand-drawn leading lines, diagonally panned station to station, ending on a tangled scribble knot ("too many disconnected steps — it's a mess").
+- Product_Intro (from concept-demo-decode-pan): a two-shot strip bridged by ONE lateral pan — shot 1 holds a static phrase whose accent word 3D-flap-DECODES (the concept lands), then the camera pans across the strip (with background parallax) into shot 2, where a cursor drives a live typing demo. Pairs this pan with `cursor-ui-demo`'s focal-locked tracked typing.
+
+**duration**: 7–10s (union of Hook 8–10s, Problem ~7s, concept-demo ~7s)
+
+**shot structure**
+One oversized flat canvas on a solid `[bg color]`; all stations/markers pre-placed in world space; `[accent color]` text + simple line-icons; one virtual `.world` camera pans ease-in-out between stops. Each station holds ~1.0s.
+
+- Scene 1 (0.0–~1.0s): Camera opens on station 1 — `[label 1 / first step]` centered. A reveal lands on it (see variants). Camera then begins to PAN toward station 2, sliding station 1 out of frame.
+- Scene 2 → Scene N-1 (~1.0s each): Camera PANS (ease-in-out) to center the next station; on arrival its `[label k]` (+ optional `[secondary label]`) is REVEALED with the role reveal. Repeat per station.
+- Scene N (final, ~last beat): One last pan lands on the terminal station; the final `[callout / landing element]` reveals and HOLDS to the end. Camera goes static on the punchline.
+
+- Variant — Hook: stations sit as evenly-spaced `[markers]` on a thin horizontal `[timeline]` (lower third); pans are LEFT-only along the single axis (timeline scrolls left). Each callout is a bordered `[callout box]` + downward triangle (offset drop-shadow) that SPRING-POPS up (scale 0→100%, bouncy overshoot, transform-origin at triangle tip) reading `[label k]`; a `[secondary label, e.g. year]` fades in and RISES above it. Some mid markers arrive as plain static text revealed by the pan alone (no box). Final scene lands on the `[present-day label]`, springs, holds.
+- Variant — Problem: stations are scattered across a 2D web; pans are DIAGONAL, STEERED by `[accent color]` hand-drawn lines — each station has a rough write-on line/arrow that draws toward the next and the camera follows it (Scene 1 also draws a loop/circle around the headline's key word). Each station = a white `[line-icon]` above its `[label]`, revealed plainly by the pan (no spring box). Final scene: the accent line spirals into a dense chaotic SCRIBBLE KNOT centered on the field; camera holds static on the tangle (visual punchline).
+
+**motion vocabulary**
+repeated ease-in-out camera pans (horizontal-left for Hook, diagonal-steered for Problem) across one large static canvas; pre-placed stations sliding through frame via the pan; spring-overshoot callout pop with triangle-tip origin (Hook); rise-and-fade secondary label (Hook); plain labels/icons arriving via the pan alone; rough hand-drawn "write-on" leading lines/arrows + loop/circle key-word mark (Problem); terminal chaotic-scribble knot draw (Problem); static hold on the final station/punchline.
+
+**rule mapping**
+
+- camera pan / traverse across the canvas (primary) → `viewport-change` (single `.world` wrapper transform; PAN mode)
+- sequencing the repeated pan beats into stops → `multi-phase-camera`
+- centering each station as the pan target → `coordinate-target-zoom` (used as pan-to-target, no zoom)
+- spring-overshoot callout pop, triangle-tip origin (Hook) → `spring-pop-entrance`
+- rise-and-fade secondary label + plain per-station label/icon reveals via the pan → `discrete-text-sequence`
+- hand-drawn leading lines / arrows / loop-circle key-word mark / terminal scribble knot (Problem) → `svg-path-draw`
+- station line-icons (Problem) → `svg-icon-enrichment`
+- static hold on the final station / punchline → (no motion; sustained held frame, no rule needed)
+
+**camera modifier**: The pan IS the camera. One `.world` virtual-camera transform in PAN mode — `viewport-change` — sequenced across stops by `multi-phase-camera`, each stop targeted via `coordinate-target-zoom` (pan-to-target). No depth push-in (that distinguishes this from the cluster-push-in / dataviz-pushthrough blueprints).
diff --git a/.claude/skills-media/hyperframes-animation/blueprints/ticker-takeover.md b/.claude/skills-media/hyperframes-animation/blueprints/ticker-takeover.md
new file mode 100644
index 000000000..f4e098468
--- /dev/null
+++ b/.claude/skills-media/hyperframes-animation/blueprints/ticker-takeover.md
@@ -0,0 +1,29 @@
+# ticker-takeover — Ticker Displace / Takeover
+
+**intent**: A context phrase types in, an accent word cycles through options like a slot-machine to suggest "this could be many things," then a hero CRASHES in from off-screen and physically shoves the text aside — "actually, this is what it is." A collision, not a fade.
+
+**roles served**
+
+- Hook (from `takeover-ticker-displace`): when a static lead-in phrase + a cycling accent word should be **physically replaced** (not cross-dissolved) by a hero arriving with momentum, and the final frame is the hero alone. Reach for it when the takeover should read as an impact.
+- Brand_Outro: the same collision used as a sign-off — options cycle, the brand mark crashes in and owns the frame.
+
+**duration**: 5–7s
+
+**shot structure** (a `[bg]` canvas; one text group on the left/center that gets ejected by an incoming hero)
+
+- **Scene 1 (0.0–~1.4s) — context build.** A typewriter lays down a `[lead-in phrase]` character-by-character (smooth, no typos — selling confidence, not human chaos). Camera static.
+- **Scene 2 (~1.4–3.0s) — the cycling beat.** An `[accent word]` slot inside the line ticks through 2–3 `[options]` on a vertical spring-roll (each click a new word), suggesting breadth — "many things this could be." (More than ~3 reads as filler.)
+- **Scene 3 (~3.0–4.2s) — the collision (signature move).** A `[hero]` crashes in from off-screen with momentum and physically SHOVES the whole text group aside — the text reacts to the impact (gets displaced), it does not fade. The hero lands **heavy** — a longer settle, not a zip — so it reads as mass, not speed.
+- **Scene 4 (~4.2–end) — the hero alone.** The hero settles dead-center and reads still. Holds.
+
+**motion vocabulary**: smooth character typewriter; vertical spring-ticker word roll (2–3 steps); off-screen hero crash-in with momentum; reactive displacement of the struck text group; heavy long-tail landing (not bouncy); dual-axis subtle jitter on the resting hero.
+
+**rule mapping**
+
+- smooth single-phrase typewriter lead-in → `discrete-text-sequence` (smooth-slice / continuous `floor(progress)` form — no typo machinery)
+- accent word slot-machine cycling through options → `vertical-spring-ticker` (`STEPS` = number of options the hero will replace; the rule's footer-reveal is unused — Scene 3 takes its place)
+- hero shoves the text group aside on impact → `reactive-displacement` (the text is the displaced mass; express the hero's "heavy land" as a longer `power2` settle, not the rule's default `back.out`)
+- hero's fast off-screen crash-in → `motion-blur-streak` (directional velocity blur resolving sharp as it lands)
+- resting-hero aliveness → `sine-wave-loop` (low-amplitude dual-frequency register — scale + rotation jitter composing onto the hero's final landed scale; never a yoyo around 1)
+
+**camera modifier**: camera-static — the displacement happens in element space (the hero moves the text), so there is no real camera move; the impact is the only motion.
diff --git a/.claude/skills-media/hyperframes-animation/blueprints/titlecard-reveal.md b/.claude/skills-media/hyperframes-animation/blueprints/titlecard-reveal.md
new file mode 100644
index 000000000..8b1e53ded
--- /dev/null
+++ b/.claude/skills-media/hyperframes-animation/blueprints/titlecard-reveal.md
@@ -0,0 +1,42 @@
+# titlecard-reveal — Title-Card / Single-Card Reveal
+
+**intent**: The calm breather/landing beat — one clean title or single brand/proof card revealed with exactly one restrained move (a slide-up crossfade, or a wipe-away-to-reveal), then a still hold. Low motion is the payload, not a deficiency.
+
+**roles served**
+
+- Benefits (from `benefits-titlecard-crossfade`, #34): a calm two-line value title card — headline value line, then one slide-up crossfade to a qualifier/elaboration line that holds center.
+- Social_Proof (from `social-proof-reveal-card`, #35): wipe a busy app-collage open away with one diagonal pill-sweep to reveal a clean brand lockup (icon + wordmark) plus a centered "loved by [N]+ [audience] teams" social-proof line that spring-settles and holds.
+
+**duration**: 3–5s (Benefits 3–4s; Social_Proof ~5s / observed 4.7s).
+
+**shot structure**
+
+```
+Scene 1 (0.0–~0.4s): static camera on [neutral / dark background]. Establish the opening state.
+  Variant — Benefits: empty-to-text — [benefit line 1] is about to fade in centered (no busy open).
+  Variant — Social_Proof: a busy intro frame holds briefly — an [app-screenshot / use-case collage] of overlapping cards under a [setup line].
+
+Scene 2 (~0.4–~1.5s): the ONE move executes — a single restrained reveal that brings the calm card to center.
+  Variant — Benefits: [benefit line 1] fades in centered while scaling slightly (~95%→100%, smooth ease-out) and holds.
+  Variant — Social_Proof: a large [accent-color] rounded pill sweeps diagonally bottom-left → top-right and exits the corner, clip-path wiping the collage away to reveal the [brand logo lockup] beneath as the [logo icon] strokes draw on.
+
+Scene 3 (~1.5s–end): the revealed/settled card holds to the end (the allocated stillness). At most one subtle live element (a slow breathing pulse on the card, or a very slow camera drift). No second development phase.
+  Variant — Benefits: [benefit line 1] translates up and fades out as [benefit line 2 — qualifier / elaboration] translates up from below center and fades in to take center; holds. (This single slide-up crossfade IS the one move — Benefits front-loads no Scene-2 wipe.)
+  Variant — Social_Proof: the lockup — [logo icon] centered, [wordmark] below, centered [social-proof tagline] "Loved by [N]+ [audience] teams" (the [N]+ may count up) — spring-settles small, then holds.
+```
+
+**motion vocabulary**: single restrained reveal (gentle fade-in + subtle scale-up settle | diagonal clip-path pill-wipe), one slide-up crossfade between two centered lines (Benefits), icon stroke draw-on (Social_Proof), optional "[N]+ teams" count-up, logo+tagline spring-settle-and-hold, subtle breathing on the held card, hold-to-end. Calm register — no spring chains, no tumble, no per-beat flips, no second phase. Camera static (optional very slow drift only).
+
+**rule mapping**
+
+- gentle fade-in + subtle scale-up settle (Benefits Scene 2) → `rules/scale-swap-transition.md` (restrained in/settle; cross-reference the fade ease in `techniques.md`)
+- single slide-up crossfade between two centered lines (Benefits Scene 3) → `rules/discrete-text-sequence.md` (one line hands off to the next; translate-up + crossfade)
+- diagonal pill-wipe reveal (Social_Proof Scene 2) → `rules/techniques.md` (clip-path reveal masks — the wipe)
+- icon stroke draw-on (Social_Proof Scene 2) → `rules/svg-path-draw.md`
+- "[N]+ teams" count-up (Social_Proof Scene 3, optional) → `rules/counting-dynamic-scale.md`
+- logo + tagline spring-settle-and-hold (Social_Proof Scene 3) → `rules/spring-pop-entrance.md` (single soft settle; intentionally one beat, not a chain)
+- subtle breathing on the held card (the one live element during the hold) → `rules/sine-wave-loop.md`
+
+**camera modifier**: optional — a single very slow drift/push under the hold only → `rules/multi-phase-camera.md`. Default is fully static; do not add unless the held beat would otherwise read as a freeze-frame.
+
+**stillness note**: This is a legitimate allocated-stillness beat. The hold in Scene 3 is the deliverable, not an unanimated gap — do NOT manufacture a development phase, extra swaps, or force-animation. One restrained move + a subtle hold (optionally one breathing element or one slow drift) is the correct and complete shape.
diff --git a/.claude/skills-media/hyperframes-animation/blueprints/typewriter-reveal.md b/.claude/skills-media/hyperframes-animation/blueprints/typewriter-reveal.md
new file mode 100644
index 000000000..23b1cbaf9
--- /dev/null
+++ b/.claude/skills-media/hyperframes-animation/blueprints/typewriter-reveal.md
@@ -0,0 +1,51 @@
+# typewriter-reveal — Typewriter Reveal
+
+**intent**: A live text caret types (and edits) a line as a human would, then either collapses it to a point and pops a brand payoff, or holds it under a persistent brand mark while a sub-line types/swaps into the final CTA — making "someone is typing this" the engine of the shot.
+
+**roles served**
+
+- Hook (from hook-typed-line-to-reveal): Type a relatable question/statement live, then COLLAPSE it and spring-pop the brand — a logo lockup OR a product-UI moment ("here's the everyday pain, now here's us").
+- Brand_Outro (from brand-outro-persistent-mark-cta-rail): Hold the hero mark dead-center/top the whole shot while a sub-line beneath it swaps or types its way into the final CTA — landing the ask once the logo is already established.
+
+**duration**: 3.6–7s (Brand_Outro 3.6–6.0s · Hook 5.5–7s)
+
+**shot structure** (one consolidated template; `[slots]` are product-agnostic)
+
+- Scene 1 (0.0–~2.0s): On a solid `[bg color]` field, a blinking text-input caret `|` sits at the line start, then `[primary line]` TYPES on character-by-character with the caret trailing.
+  - _Variant — Hook_: nothing else is on screen; the typed `[hook line]` owns the frame. (Sub-variant: the line types inside UI chrome — a rounded `[input/pill]` — and the whole assembly continuously TRANSLATES leftward + scales slightly so the active caret stays pinned near frame-center while earlier words scroll off and clip past the left edge — a ticker push.)
+  - _Variant — Brand_Outro_: a `[logo mark]` (+ optional `[wordmark]`) is already centered/upper and STAYS fully visible for the entire shot; an entry flourish plays on the mark itself (e.g. `[checkmark/icon]` strokes into the mark, or thin concentric rings ripple outward from it), and the typed `[tagline / product label]` is the SUB-LINE beneath the mark.
+
+- Scene 2 (~2.0–4.5s): The typed line is MODIFIED in place — the active text is edited rather than re-shot.
+  - _Variant — Hook_: final word(s) BACKSPACE out and a new word RETYPES (`[word A]` → `[word B]`), or the fill/caret snaps to `[accent color]` on the final word. Holds briefly.
+  - _Variant — Brand_Outro_: the sub-line is REMOVED in place — a direct hard CUT/replace (NO backspace) or a moving mask-WIPE erases it — while the mark performs a small idle move (gentle rotate / sparkle reposition); the mark never leaves frame.
+
+- Scene 3 — resolve:
+  - _Variant — Hook (collapse, ~0.3–0.7s)_: caret vanishes; the whole text/assembly COLLAPSES to a point at center (horizontal X-collapse or scale-to-0 zoom-out) and disappears, leaving a clean `[bg]`. Then (remainder) a centered `[brand element]` SPRING-POPS in:
+    - _logo-lockup sub-variant_: a `[mark/icon]` pops, then slides aside as a `[wordmark]` UNMASKS / slides out from behind it; both settle into a centered lockup.
+    - _product-UI sub-variant_: a `[UI control]` (e.g. button) pops; a `[cursor]` sweeps in from a corner and homes onto it; on contact a ~150ms state-FLIP — base cross-fades to `[accent color]`, icon inverts, and a soft radial GLOW blooms outward and persists.
+  - _Variant — Brand_Outro (~4.5s–end)_: the final `[CTA]` resolves in the sub-line slot — TYPED in with a caret and/or shown as a `[CTA in accent-color button]` beside plain text; an optional `[accent color]` GLOW ring / halo settles around the persistent mark. Holds to end. Final frame: `[logo mark]` + (glow ring) + `[CTA]`.
+
+**motion vocabulary**: blinking text caret; character-by-character type-on; backspace-and-retype OR in-place hard-cut/mask-wipe text swap; optional leftward ticker push (assembly translates to keep caret centered); persistent centered hero mark (never vanishes) with entry flourish (icon stroke-draw, concentric ripple rings) and small idle move (rotate / sparkle); X-collapse / scale-to-0 zoom-out of the typed line; spring-pop brand reveal; wordmark unmask-slide into lockup; cursor sweep + UI state-flip + radial glow bloom; accent glow/halo ring settle; pill/button CTA reveal; hold.
+
+**rule mapping** (per motion verb → `rules/<id>.md`)
+
+- blinking text caret → `context-sensitive-cursor` (caret color-switch + blink)
+- character-by-character type-on → `discrete-text-sequence` (typing/typos/holds/backspace); recipe `gsap-effects` (typewriter)
+- backspace-and-retype → `discrete-text-sequence`
+- in-place hard-cut / replace text swap → `discrete-text-sequence` (whole-text state swaps)
+- mask-wipe erase of sub-line → `techniques.md` clip-path reveal (run in reverse)
+- leftward ticker push (assembly translates to keep caret centered) → `camera-cursor-tracking` (viewport follows a moving caret)
+- persistent hero mark hold → no motion rule needed (static anchor; intentional — it's the absence of motion)
+- entry flourish: icon stroke-draw into mark → `svg-path-draw`
+- entry flourish: concentric ripple rings from mark → `cursor-click-ripple` (ripple bloom)
+- small idle mark move (rotate / sparkle reposition) → `sine-wave-loop` (idle)
+- X-collapse / scale-to-0 zoom-out of typed line → `scale-swap-transition` (closest fit — it morphs/collapses elements at a shared center; approximation, since a standalone collapse-and-vanish without the paired same-center brand pop isn't its exact case)
+- spring-pop brand reveal → `spring-pop-entrance` (alt `physics-press-reaction`)
+- collapse-text → pop-brand as a same-center morph pair → `scale-swap-transition` (morph two elements at same center)
+- wordmark unmask-slide into lockup → `techniques.md` clip-path reveal (unmask); slide via `spring-pop-entrance`
+- cursor sweep onto UI control + press → `cursor-click-ripple` (cursor→target press + ripple)
+- UI state-flip (base/icon invert on contact) → `hacker-flip-3d`
+- radial glow bloom / accent glow-halo ring settle → `asr-keyword-glow` (accent glow); ring expansion via `center-outward-expansion`
+- pill/button CTA reveal → `spring-pop-entrance` (alt `scale-swap-transition`)
+
+**camera modifier**: none required — camera is static for both roles. The Hook ticker push is an ELEMENT translate (the typed assembly slides leftward to keep the caret centered), not a camera move → modeled by `camera-cursor-tracking` rather than a true camera rule.
diff --git a/.claude/skills-media/hyperframes-animation/blueprints/video-text-pivot.md b/.claude/skills-media/hyperframes-animation/blueprints/video-text-pivot.md
new file mode 100644
index 000000000..40f75fcb7
--- /dev/null
+++ b/.claude/skills-media/hyperframes-animation/blueprints/video-text-pivot.md
@@ -0,0 +1,30 @@
+# video-text-pivot — Video → Text Pivot
+
+**intent**: A product video holds center and claims attention, then slides aside to hand its weight to a hero stat in the space it vacates, then both clear and kinetic text types into the center — accent words carrying the meaning the video used to carry — sealed by a gradient pill. The arc is "show → yield → pivot → stamp," and each handoff pairs an exit with a same-anchor entrance so two beats read, not four.
+
+**roles served**
+
+- Product_Intro (from `metric-video-text-pivot`): when the open is "see the feature" then "see the impact" and the `[product video]` must stay visible through the stat reveal — it slides, it doesn't cut.
+- Key_Feature: a feature clip that yields to a frame-filling metric and a typographic impact line.
+
+**duration**: 6–8s
+
+**shot structure** (a `[bg]` canvas; one `[product video]` as a real muted `.mp4` clip, a hero stat, then kinetic text — each pair shares a screen anchor so the handoff reads as a weight-transfer)
+
+- **Scene 1 (0.0–~1.6s) — the video shows.** The `[product video]` lands centered on a smooth scale-up and breathes (a small y-bob), claiming full attention. Camera static.
+- **Scene 2 (~1.6–3.2s) — yield + stat (signature move).** The video SLIDES aside (x + scale down) **into the very space** the `[hero stat]` now fills as the stat pops in with 3D-depth type — one weight-transfer reading as a single event, not two. The stat breathes within this window.
+- **Scene 3 (~3.2–5.0s) — pivot to text.** Both video and stat clear out and kinetic `[impact text]` TYPES into the vacated center, character by character; its `[accent words]` carry the meaning the video used to carry.
+- **Scene 4 (~5.0–end) — stamp.** A gradient `[pill]` snaps shut around the closing line (`scaleX` 0→1), its glow halo resolving a beat behind so the silhouette reads before the bloom — sealing the statement as one graphic. Holds.
+
+**motion vocabulary**: video scale-in + small breath; weight-transfer slide (video x + scale-down handing off to the stat at the same anchor); 3D-depth stat type; character-stream typing; gradient pill scaleX-snap; glow-halo bloom trailing the silhouette.
+
+**rule mapping**
+
+- video entrance (smooth) and the weight-transfer slide → `gsap-effects` (scale/opacity then x + scale on a long-tail `power3`); the video itself is a muted `<video class="clip">` direct child of the root
+- hero stat's frame-filling 3D type → `3d-text-depth-layers` (static-depth variation — layers built at setup, no cascade fighting the entry)
+- the same-anchor video-exit ↔ stat-entry handoff (if treated as a morph) → `scale-swap-transition` (shared center)
+- character-by-character impact typing through segmented spans → `dynamic-content-sequencing` (clean character stream) or `discrete-text-sequence`
+- pill `scaleX` snap + trailing glow halo → `gsap-effects` (scaleX) + `ambient-glow-bloom` (the halo, resolving a beat behind)
+- video / stat breath within their windows → `sine-wave-loop` (low-amplitude register — subtle jitter, gated to each element's window, never a forever loop)
+
+**camera modifier**: camera-static — all motion is element-space (the video translates), so the "pivot" is the elements moving, not a camera.
diff --git a/.claude/skills-media/hyperframes-animation/examples/brand-reveal-assemble-zoom.html b/.claude/skills-media/hyperframes-animation/examples/brand-reveal-assemble-zoom.html
new file mode 100644
index 000000000..31950a9e6
--- /dev/null
+++ b/.claude/skills-media/hyperframes-animation/examples/brand-reveal-assemble-zoom.html
@@ -0,0 +1,382 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Scene 3 — Assembly Focus Reveal (hyperframes)</title>
+
+    <!--
+      HyperFrames composition.tsx.
+
+      Choreography (5 phases, 5 seconds total):
+        0.00 – 0.67s   "Just use" assembles in a discrete sequence (with hold)
+        0.73 – 1.23s   Pink logo pops in with back.out elastic
+        1.50 – 2.20s   "Just use" slides left + fades; container recenters around brand
+        2.67 – 3.57s   Camera zooms 5.5× into the logo (scale + counter-translate)
+        3.67 – 5.00s   Logo breathes (sine onUpdate, multiplicative on pop scale)
+
+      Key differences :
+        - Single paused GSAP timeline registered to window.__timelines["main"]
+        - brandTextWidth measured via getBoundingClientRect after document.fonts.ready
+        - HERO_FINAL_OFFSET_X derived from real measurement, not estimate
+        - Breathing uses the onUpdate (multiplicative) form so it multiplies
+          onto the pop scale, not a fromTo + yoyo which would overwrite the pop value
+        - Three nested transform layers: zoom-scale → zoom-translate → recenter-shift
+        - Logo is loaded from a static PNG asset
+    -->
+
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+
+    <style>
+      :root {
+        --bg: #000000;
+        --text-white: #ffffff;
+        --pink: #e91e63;
+      }
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        margin: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: var(--bg);
+        font-family: "Google Sans", "Roboto", Inter, system-ui, sans-serif;
+        color: var(--text-white);
+      }
+
+      .stage {
+        position: absolute;
+        inset: 0;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        overflow: hidden;
+      }
+
+      /* Three nested transform layers (outer → inner) */
+      .zoom-scale {
+        transform-origin: center center;
+        will-change: transform;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+      .zoom-translate {
+        will-change: transform;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+      .recenter-shift {
+        display: flex;
+        align-items: center;
+      }
+
+      /* Companion text — fixed width to prevent assembly jitter */
+      .companion {
+        width: 600px;
+        display: flex;
+        justify-content: flex-end;
+        margin-right: 30px;
+        white-space: nowrap;
+        color: var(--text-white);
+        font-size: 140px;
+        font-weight: 400;
+        line-height: 1;
+      }
+
+      /* Brand group: text + hero icon */
+      .brand-group {
+        display: flex;
+        align-items: center;
+        gap: 20px;
+      }
+      .brand-text {
+        color: var(--text-white);
+        font-size: 140px;
+        font-weight: 700;
+        white-space: nowrap;
+        line-height: 1;
+      }
+      .hero {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 140px;
+        height: 140px;
+        /* initial scale(0) set by GSAP fromTo */
+      }
+      .hero .logo-mark {
+        width: 100%;
+        height: 100%;
+        display: block;
+      }
+
+      /* Hidden probe used for text measurement */
+      .measure-probe {
+        position: absolute;
+        left: -99999px;
+        top: -99999px;
+        visibility: hidden;
+        white-space: pre;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="main"
+      data-start="0"
+      data-duration="5"
+      data-width="1920"
+      data-height="1080"
+    >
+      <div
+        class="stage clip"
+        data-start="0"
+        data-duration="5"
+        data-track-index="1"
+        id="brand-stage"
+      >
+        <div class="zoom-scale" data-layout-allow-overflow>
+          <div class="zoom-translate">
+            <div class="recenter-shift">
+              <div class="companion">
+                <span class="companion-text">J</span>
+              </div>
+
+              <div class="brand-group" data-layout-allow-overflow>
+                <span class="brand-text">Hyperframes</span>
+                <div class="hero">
+                  <!-- Inline-SVG placeholder mark — swap for your logo image -->
+                  <svg
+                    class="logo-mark"
+                    viewBox="0 0 100 100"
+                    role="img"
+                    aria-label="hyperframes logo"
+                  >
+                    <defs>
+                      <linearGradient id="hfMark" x1="0" y1="0" x2="1" y2="1">
+                        <stop offset="0" stop-color="#8b7bff" />
+                        <stop offset="1" stop-color="#3ddc97" />
+                      </linearGradient>
+                    </defs>
+                    <rect x="4" y="4" width="92" height="92" rx="22" fill="url(#hfMark)" />
+                    <text
+                      x="50"
+                      y="63"
+                      text-anchor="middle"
+                      font-family="Inter, system-ui, sans-serif"
+                      font-size="40"
+                      font-weight="800"
+                      fill="#fff"
+                    >
+                      HF
+                    </text>
+                  </svg>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <script>
+      /* ================================================================
+         CONSTANTS — composition dimensions baked in.
+         ================================================================ */
+      const W = 1920,
+        H = 1080;
+      const TOTAL_DURATION = 5.0;
+
+      const COMPANION_WIDTH = 600;
+      const COMPANION_GAP = 30; // margin-right on .companion
+      const BRAND_FONT_SIZE = 140;
+      const HERO_GAP = 20;
+      const HERO_SIZE = 140;
+
+      const TIMING = {
+        // Phase 1: companion assembly
+        textStart: 0.0,
+        textEnd: 0.67,
+
+        // Phase 2: hero pop
+        popStart: 0.73,
+        popDur: 0.5,
+
+        // Phase 3: slide-out + recenter
+        slideStart: 1.5,
+        slideDur: 0.7,
+
+        // Phase 4: zoom
+        zoomStart: 2.67,
+        zoomDur: 0.9,
+
+        // Phase 5: breathing
+        breathStart: 3.67,
+      };
+
+      const FINAL_RECENTER_OFFSET = -180; // pre-calculated, tuned for visual feel
+
+      /* ================================================================
+         DISCRETE TEXT SEQUENCE for the companion assembly.
+         Converted from the source frame-based sequence to seconds at 30fps.
+         ================================================================ */
+      const SEQUENCE = [
+        { t: 0.0, text: "J" },
+        { t: 0.07, text: "Jus" },
+        { t: 0.13, text: "Just" },
+        { t: 0.27, text: "Just" }, // hold for pacing
+        { t: 0.4, text: "Just u" },
+        { t: 0.53, text: "Just us" },
+        { t: 0.67, text: "Just use" },
+      ];
+
+      /* ================================================================
+         TIMELINE — built synchronously so HyperFrames can seek it.
+         ================================================================ */
+      window.__timelines = window.__timelines || {};
+      const tl = gsap.timeline({ paused: true });
+      window.__timelines["main"] = tl;
+
+      {
+        /* Measure the brand text width with a hidden DOM probe. */
+        const probe = document.createElement("span");
+        probe.className = "measure-probe";
+        probe.style.font = `700 ${BRAND_FONT_SIZE}px "Google Sans", "Roboto", Inter, system-ui, sans-serif`;
+        probe.style.whiteSpace = "pre";
+        probe.style.lineHeight = "1";
+        probe.textContent = "Hyperframes"; // MUST match the rendered .brand-text casing
+        document.body.appendChild(probe);
+        const brandTextWidth = probe.getBoundingClientRect().width;
+        probe.remove();
+
+        /* Derive the hero's post-Phase-3 offset from viewport center.
+           baseHeroOffset = (C + G + B + L) / 2     <- heroSize cancels out
+           HERO_FINAL_OFFSET_X = baseHeroOffset + FINAL_RECENTER_OFFSET */
+        const baseHeroOffset = (COMPANION_WIDTH + COMPANION_GAP + brandTextWidth + HERO_GAP) / 2;
+        const HERO_FINAL_OFFSET_X = baseHeroOffset + FINAL_RECENTER_OFFSET;
+
+        /* ============================================================
+           PHASE 1: Discrete companion assembly
+           ============================================================ */
+        const textEl = document.querySelector(".companion-text");
+
+        for (const entry of SEQUENCE) {
+          tl.set(textEl, { textContent: entry.text }, entry.t);
+        }
+
+        /* ============================================================
+           PHASE 2: Hero pops in (elastic)
+           ============================================================ */
+        tl.fromTo(
+          ".hero",
+          { scale: 0 },
+          {
+            scale: 1,
+            duration: TIMING.popDur,
+            ease: "back.out(2)", // spring(stiffness:200, damping:12)
+          },
+          TIMING.popStart,
+        );
+
+        /* ============================================================
+           PHASE 3: Companion exit + container recenter
+           Two concurrent tweens at the same timeline position.
+           ============================================================ */
+        tl.to(
+          ".companion",
+          {
+            opacity: 0,
+            x: -80,
+            duration: TIMING.slideDur,
+            ease: "power3.out", // spring(stiffness:100, damping:20)
+          },
+          TIMING.slideStart,
+        );
+
+        tl.to(
+          ".recenter-shift",
+          {
+            x: FINAL_RECENTER_OFFSET,
+            duration: TIMING.slideDur,
+            ease: "power3.out",
+          },
+          TIMING.slideStart,
+        );
+
+        /* ============================================================
+           PHASE 4: Zoom — scale (outer) + counter-translate (middle) + brand text exits.
+           ============================================================ */
+        tl.to(
+          ".zoom-scale",
+          {
+            scale: 5.5,
+            duration: TIMING.zoomDur,
+            ease: "power2.out", // spring(stiffness:80, damping:20, mass:1.5)
+          },
+          TIMING.zoomStart,
+        );
+
+        tl.to(
+          ".zoom-translate",
+          {
+            x: -HERO_FINAL_OFFSET_X,
+            y: 0,
+            duration: TIMING.zoomDur,
+            ease: "power2.out",
+          },
+          TIMING.zoomStart,
+        );
+
+        // Brand text fades out + slides left so the logo gets all the zoom space.
+        tl.to(
+          ".brand-text",
+          {
+            opacity: 0,
+            x: -600,
+            duration: TIMING.zoomDur * 0.4,
+            ease: "power2.out",
+          },
+          TIMING.zoomStart,
+        );
+
+        /* ============================================================
+           PHASE 5: Breathing — onUpdate so it MULTIPLIES on the hero's
+           final pop scale, doesn't overwrite it.
+           ============================================================ */
+        const heroEl = document.querySelector(".hero");
+        const HERO_FINAL_SCALE = 1.0;
+        const SCALE_PERIOD = 1.5; // seconds per cycle
+        const SCALE_AMP = 0.04;
+        const ROTATE_AMP = 2;
+
+        const breathDur = TOTAL_DURATION - TIMING.breathStart;
+
+        tl.to(
+          { tick: 0 },
+          {
+            tick: 1,
+            duration: breathDur,
+            ease: "none",
+            onUpdate: function () {
+              const idleTime = Math.max(0, tl.time() - TIMING.breathStart);
+              const omega = (idleTime / SCALE_PERIOD) * Math.PI * 2;
+              gsap.set(heroEl, {
+                scale: HERO_FINAL_SCALE * (1 + Math.sin(omega) * SCALE_AMP),
+                rotation: Math.sin(omega) * ROTATE_AMP,
+              });
+            },
+          },
+          TIMING.breathStart,
+        );
+      }
+    </script>
+  </body>
+</html>
diff --git a/.claude/skills-media/hyperframes-animation/examples/comparison-split-cards.html b/.claude/skills-media/hyperframes-animation/examples/comparison-split-cards.html
new file mode 100644
index 000000000..d60e753ae
--- /dev/null
+++ b/.claude/skills-media/hyperframes-animation/examples/comparison-split-cards.html
@@ -0,0 +1,649 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Scene 09 — Split Comparison Reveal</title>
+
+    <!--
+      HyperFrames composition.tsx.
+
+      Choreography (3 phases, 5 seconds total):
+        0.17 – 0.83s   Title slides down from top: "Build Video With HyperFrames"
+        0.50 – 1.83s   Left card "HTML Composition" enters from left (+16° rotateY)
+        0.83 – 1.83s   Right card "Render Pipeline" enters from right (-16° rotateY)
+        1.67 – 2.17s   Left pill badge "Seekable Timeline" pops in with back.out(1.7)
+        2.00 – 2.50s   Right pill badge "Render Ready" pops in
+        0 – 5.00s      Continuous floating: cards y ±6 px / rotation ±1° (phase-opposed)
+                       Badges y ±5 px (slow shared sine)
+          and .card-tilt (static rotateY + float rotation) so entry and float
+          don't fight on the same alias
+        - All continuous floating consolidated into one shared scene-ticker onUpdate
+          (6 gsap.set calls per frame, batched by the browser)
+        - Phase offset Math.PI between the two cards' floats — opposed breathing
+        - Card images are HyperFrames workflow mockups (no asset files needed)
+        - Ambient dual-glow via two radial-gradients in a single overlay
+    -->
+
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+
+    <style>
+      :root {
+        --bg-dark: #0a1415;
+        --text-primary: #ffffff;
+        --text-secondary: rgba(255, 255, 255, 0.65);
+        --brand-cyan: #18d9e8;
+        --brand-cyan-glow: rgba(24, 217, 232, 1);
+        --brand-green: #7bea5a;
+        --brand-green-glow: rgba(123, 234, 90, 1);
+        --glass-bg: rgba(255, 255, 255, 0.08);
+        --border: rgba(255, 255, 255, 0.12);
+      }
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        margin: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: var(--bg-dark);
+        font-family:
+          "Inter",
+          system-ui,
+          -apple-system,
+          sans-serif;
+        color: var(--text-primary);
+      }
+
+      .stage {
+        position: absolute;
+        inset: 0;
+        overflow: hidden;
+      }
+
+      /* ============================================================
+         BACKGROUND
+         ============================================================ */
+      .bg {
+        position: absolute;
+        inset: 0;
+        background:
+          radial-gradient(ellipse at 35% 50%, rgba(24, 217, 232, 0.2), transparent 45%),
+          radial-gradient(ellipse at 72% 50%, rgba(123, 234, 90, 0.16), transparent 45%),
+          linear-gradient(135deg, #3a3a3a 0%, #17211f 30%, #0b2328 48%, #1f3518 70%, #343434 100%);
+      }
+
+      /* ============================================================
+         TITLE
+         ============================================================ */
+      .title {
+        position: absolute;
+        top: 60px;
+        left: 50%;
+        transform: translateX(-50%);
+        font-size: 88px;
+        font-weight: 700;
+        color: var(--text-primary);
+        text-align: center;
+        letter-spacing: 0;
+        white-space: nowrap;
+        will-change: transform, opacity;
+        /* initial opacity 0 + y -40 set via gsap.set */
+      }
+      .title .accent {
+        color: var(--brand-cyan);
+        text-shadow: 0 0 34px rgba(24, 217, 232, 0.28);
+      }
+
+      /* ============================================================
+         CARDS ROW
+         ============================================================ */
+      .cards-row {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        display: flex;
+        gap: 76px;
+        padding-top: 30px;
+        perspective: 980px;
+        perspective-origin: 50% 42%;
+        transform-style: preserve-3d;
+      }
+
+      /* Two nested wrappers per card */
+      .card {
+        transform-style: preserve-3d;
+      }
+      .card-pos {
+        perspective: 980px;
+        perspective-origin: 50% 45%;
+        transform-style: preserve-3d;
+        will-change: transform, opacity;
+        /* initial x/scale/opacity set via gsap.set */
+      }
+      .card-tilt {
+        transform-style: preserve-3d;
+        will-change: transform;
+        /* initial rotationY set via gsap.set */
+      }
+      .card-content {
+        width: 720px;
+        transform-style: preserve-3d;
+      }
+      .card-image {
+        width: 100%;
+        height: 500px;
+        border-radius: 24px;
+        overflow: hidden;
+        border: 1px solid var(--border);
+        position: relative;
+        transform: translateZ(0) rotateX(0.01deg);
+        backface-visibility: hidden;
+      }
+      .card-left .card-tilt {
+        transform-origin: 100% 50%;
+      }
+      .card-right .card-tilt {
+        transform-origin: 0% 50%;
+      }
+      .card-label {
+        margin-top: 26px;
+        text-align: center;
+        font-size: 54px;
+        font-weight: 700;
+        color: var(--text-primary);
+        transform: translateZ(34px);
+        text-shadow: 0 0 30px rgba(24, 217, 232, 0.16);
+      }
+      .card-subtitle {
+        margin-top: 8px;
+        text-align: center;
+        font-size: 24px;
+        color: var(--text-secondary);
+        transform: translateZ(26px);
+      }
+
+      /* Left card: shadow falls right (positive x in box-shadow = right) */
+      .card-left .card-image {
+        box-shadow:
+          30px 30px 60px rgba(0, 0, 0, 0.45),
+          0 0 60px rgba(24, 217, 232, 0.2);
+      }
+      /* Right card: shadow falls left */
+      .card-right .card-image {
+        box-shadow:
+          -30px 30px 60px rgba(0, 0, 0, 0.45),
+          0 0 60px rgba(123, 234, 90, 0.2);
+      }
+
+      /* ============================================================
+         CARD IMAGE PLACEHOLDERS (mock UI)
+         ============================================================ */
+      /* Left card — HTML Composition: gradient + timed clip grid */
+      .card-left .card-image {
+        background: linear-gradient(
+          135deg,
+          rgba(12, 38, 42, 0.96) 0%,
+          rgba(18, 66, 63, 0.9) 52%,
+          rgba(32, 57, 38, 0.94) 100%
+        );
+      }
+      .mock-templates {
+        position: absolute;
+        inset: 0;
+        padding: 56px 66px;
+        display: grid;
+        grid-template-columns: repeat(3, 1fr);
+        grid-template-rows: repeat(2, 1fr);
+        gap: 22px;
+        opacity: 0.22;
+      }
+      .mock-thumb {
+        background: linear-gradient(135deg, rgba(24, 217, 232, 0.2), rgba(123, 234, 90, 0.08));
+        border-radius: 14px;
+        border: 1px solid rgba(255, 255, 255, 0.1);
+        display: flex;
+        align-items: flex-end;
+        justify-content: flex-start;
+        padding: 14px;
+        transform: translateZ(18px);
+        box-shadow: 0 14px 30px rgba(0, 0, 0, 0.18);
+      }
+      .mock-thumb .label {
+        font-size: 18px;
+        font-weight: 600;
+        color: rgba(255, 255, 255, 0.8);
+      }
+
+      /* Right card — Render Pipeline: validation rows */
+      .card-right .card-image {
+        background: linear-gradient(
+          135deg,
+          rgba(23, 45, 34, 0.96) 0%,
+          rgba(17, 70, 73, 0.9) 50%,
+          rgba(38, 57, 45, 0.94) 100%
+        );
+      }
+      .mock-team {
+        position: absolute;
+        inset: 0;
+        padding: 66px 72px;
+        display: flex;
+        flex-direction: column;
+        gap: 20px;
+        justify-content: center;
+        opacity: 0.24;
+      }
+      .mock-row {
+        display: flex;
+        align-items: center;
+        gap: 14px;
+        padding: 15px 20px;
+        background: rgba(255, 255, 255, 0.06);
+        border-radius: 12px;
+        border: 1px solid rgba(255, 255, 255, 0.08);
+        transform: translateZ(18px);
+        box-shadow: 0 14px 30px rgba(0, 0, 0, 0.18);
+      }
+      .mock-avatar {
+        width: 44px;
+        height: 44px;
+        border-radius: 50%;
+        flex-shrink: 0;
+        background: linear-gradient(135deg, var(--brand-green), var(--brand-cyan));
+      }
+      .mock-avatar.purple {
+        background: linear-gradient(135deg, var(--brand-cyan), #38bdf8);
+      }
+      .mock-avatar.green {
+        background: linear-gradient(135deg, var(--brand-green), var(--brand-cyan));
+      }
+      .mock-avatar.orange {
+        background: linear-gradient(135deg, #facc15, var(--brand-green));
+      }
+      .mock-row .name {
+        font-size: 22px;
+        font-weight: 600;
+        color: rgba(255, 255, 255, 0.85);
+      }
+      .mock-row .status {
+        margin-left: auto;
+        font-size: 16px;
+        color: var(--brand-green);
+      }
+
+      /* ============================================================
+         FLOATING BADGES
+         ============================================================ */
+      .badge {
+        display: flex;
+        align-items: center;
+        gap: 12px;
+        padding: 14px 22px;
+        border-radius: 999px;
+        background-color: var(--glass-bg);
+        backdrop-filter: blur(10px);
+        -webkit-backdrop-filter: blur(10px);
+        will-change: transform, opacity;
+        z-index: 50;
+      }
+      .badge-left {
+        border: 1px solid rgba(24, 217, 232, 0.4);
+        box-shadow: 0 0 30px rgba(24, 217, 232, 0.35);
+      }
+      .badge-right {
+        border: 1px solid rgba(123, 234, 90, 0.4);
+        box-shadow: 0 0 30px rgba(123, 234, 90, 0.35);
+      }
+      .badge-icon-wrap {
+        width: 36px;
+        height: 36px;
+        border-radius: 50%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        color: var(--bg-dark);
+        flex-shrink: 0;
+      }
+      .badge-left .badge-icon-wrap {
+        background-color: var(--brand-cyan);
+      }
+      .badge-right .badge-icon-wrap {
+        background-color: var(--brand-green);
+      }
+      .badge-label {
+        font-size: 24px;
+        font-weight: 600;
+        color: var(--text-primary);
+        white-space: nowrap;
+      }
+
+      /* ============================================================
+         AMBIENT GLOW + VIGNETTE
+         ============================================================ */
+      .ambient-glow {
+        position: absolute;
+        inset: 0;
+        background:
+          radial-gradient(ellipse at 30% 50%, var(--brand-cyan-glow) 0%, transparent 35%),
+          radial-gradient(ellipse at 70% 50%, var(--brand-green-glow) 0%, transparent 35%);
+        opacity: 0.13;
+        pointer-events: none;
+      }
+      .vignette {
+        position: absolute;
+        inset: 0;
+        background: radial-gradient(ellipse at center, transparent 40%, rgba(0, 0, 0, 0.45) 100%);
+        pointer-events: none;
+        z-index: 400;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="main"
+      data-start="0"
+      data-duration="5"
+      data-width="1920"
+      data-height="1080"
+    >
+      <div
+        class="stage clip"
+        data-start="0"
+        data-duration="5"
+        data-track-index="1"
+        id="scene-stage"
+      >
+        <div class="bg"></div>
+
+        <!-- Title -->
+        <div class="title" id="title">Build Video With <span class="accent">HyperFrames</span></div>
+
+        <!-- Cards row -->
+        <div class="cards-row">
+          <!-- Left card: HTML Composition -->
+          <div class="card card-left" id="card-left">
+            <div class="card-pos">
+              <div class="card-tilt">
+                <div class="card-content">
+                  <div class="card-image">
+                    <div class="mock-templates">
+                      <div class="mock-thumb"><span class="label">HTML</span></div>
+                      <div class="mock-thumb"><span class="label">CSS</span></div>
+                      <div class="mock-thumb"><span class="label">GSAP</span></div>
+                      <div class="mock-thumb"><span class="label">Audio</span></div>
+                      <div class="mock-thumb"><span class="label">Captions</span></div>
+                      <div class="mock-thumb"><span class="label">Assets</span></div>
+                    </div>
+                  </div>
+                  <div class="card-label">HTML Composition</div>
+                  <div class="card-subtitle">Timed DOM clips, media, and motion</div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- Right card: Render Pipeline -->
+          <div class="card card-right" id="card-right">
+            <div class="card-pos">
+              <div class="card-tilt">
+                <div class="card-content">
+                  <div class="card-image">
+                    <div class="mock-team">
+                      <div class="mock-row">
+                        <div class="mock-avatar purple"></div>
+                        <span class="name">Register timeline</span>
+                        <span class="status">● seekable</span>
+                      </div>
+                      <div class="mock-row">
+                        <div class="mock-avatar green"></div>
+                        <span class="name">Validate layout</span>
+                        <span class="status">● clean</span>
+                      </div>
+                      <div class="mock-row">
+                        <div class="mock-avatar orange"></div>
+                        <span class="name">Render frames</span>
+                        <span class="status">● stable</span>
+                      </div>
+                      <div class="mock-row">
+                        <div class="mock-avatar"></div>
+                        <span class="name">Publish MP4</span>
+                        <span class="status">● ready</span>
+                      </div>
+                    </div>
+                  </div>
+                  <div class="card-label">Render Pipeline</div>
+                  <div class="card-subtitle">Preview, check, render, publish</div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- Floating badges -->
+        <div class="badge badge-left" id="badge-left">
+          <div class="badge-icon-wrap">
+            <svg
+              width="18"
+              height="18"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="2"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              aria-hidden="true"
+            >
+              <path d="M12 2L2 7L12 12L22 7L12 2Z" />
+              <path d="M2 17L12 22L22 17" />
+              <path d="M2 12L12 17L22 12" />
+            </svg>
+          </div>
+          <span class="badge-label">Seekable Timeline</span>
+        </div>
+
+        <div class="badge badge-right" id="badge-right">
+          <div class="badge-icon-wrap">
+            <svg
+              width="18"
+              height="18"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="2"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              aria-hidden="true"
+            >
+              <path d="M17 21V19C17 16.7909 15.2091 15 13 15H5C2.79086 15 1 16.7909 1 19V21" />
+              <circle cx="9" cy="7" r="4" />
+              <path d="M23 21V19C22.9986 17.1771 21.765 15.5857 20 15.13" />
+              <path
+                d="M16 3.13C17.7699 3.58317 19.0078 5.17799 19.0078 7.005C19.0078 8.83201 17.7699 10.4268 16 10.88"
+              />
+            </svg>
+          </div>
+          <span class="badge-label">Render Ready</span>
+        </div>
+
+        <div class="ambient-glow"></div>
+      </div>
+
+      <div class="vignette"></div>
+    </div>
+
+    <script>
+      /* ================================================================
+         CONSTANTS
+         ================================================================ */
+      const W = 1920,
+        H = 1080;
+      const TOTAL_DUR = 5.0;
+
+      const TIMING = {
+        // Phase 1: title
+        titleAt: 0.17,
+        titleDur: 0.67,
+
+        // Phase 2: cards
+        leftAt: 0.5,
+        rightAt: 0.83,
+        entryDur: 0.7,
+        slideDist: 100,
+        baseTilt: 18,
+
+        // Phase 3: badges
+        badgeLeftAt: 1.67,
+        badgeRightAt: 2.0,
+        badgeEntryDur: 0.5,
+
+        // Continuous float
+        floatYSpeed: 0.02 * 30, // = 0.6 rad/sec
+        floatYAmp: 6,
+        floatRSpeed: 0.015 * 30, // = 0.45 rad/sec
+        floatRAmp: 1,
+        badgeYSpeed: 0.025 * 30, // = 0.75 rad/sec
+        badgeYAmp: 5,
+      };
+
+      /* ================================================================
+         BADGE POSITIONS — set via CSS left/top once (not tweened)
+         ================================================================ */
+      const badgeLeftEl = document.getElementById("badge-left");
+      const badgeRightEl = document.getElementById("badge-right");
+      badgeLeftEl.style.left = W * 0.12 + "px"; // 230 px
+      badgeLeftEl.style.top = H * 0.35 + "px"; // 378 px
+      badgeLeftEl.style.position = "absolute";
+      badgeRightEl.style.left = W * 0.75 + "px"; // 1440 px
+      badgeRightEl.style.top = H * 0.38 + "px"; // 410 px
+      badgeRightEl.style.position = "absolute";
+
+      /* ================================================================
+         INITIAL STATES (via gsap.set, before the timeline runs)
+         ================================================================ */
+      gsap.set("#title", { opacity: 0, y: -40 });
+
+      gsap.set("#card-left  .card-pos", { x: -TIMING.slideDist, scale: 0.8, opacity: 0, y: 0 });
+      gsap.set("#card-right .card-pos", { x: TIMING.slideDist, scale: 0.8, opacity: 0, y: 0 });
+      gsap.set("#card-left  .card-tilt", { rotationY: TIMING.baseTilt });
+      gsap.set("#card-right .card-tilt", { rotationY: -TIMING.baseTilt });
+
+      gsap.set(["#badge-left", "#badge-right"], { scale: 0, opacity: 0, y: 0 });
+
+      /* ================================================================
+         TIMELINE
+         ================================================================ */
+      window.__timelines = window.__timelines || {};
+      const tl = gsap.timeline({ paused: true });
+      window.__timelines["main"] = tl;
+
+      /* ----------------------------------------------------------------
+         PHASE 1: Title slides down
+         ---------------------------------------------------------------- */
+      tl.to(
+        "#title",
+        {
+          opacity: 1,
+          y: 0,
+          duration: TIMING.titleDur,
+          ease: "power3.out", // spring(stiffness:100, damping:16)
+        },
+        TIMING.titleAt,
+      );
+
+      /* ----------------------------------------------------------------
+         PHASE 2: Cards enter from opposite sides
+         ---------------------------------------------------------------- */
+      tl.to(
+        "#card-left .card-pos",
+        {
+          x: 0,
+          scale: 1,
+          opacity: 1,
+          duration: TIMING.entryDur,
+          ease: "power3.out",
+        },
+        TIMING.leftAt,
+      );
+
+      tl.to(
+        "#card-right .card-pos",
+        {
+          x: 0,
+          scale: 1,
+          opacity: 1,
+          duration: TIMING.entryDur,
+          ease: "power3.out",
+        },
+        TIMING.rightAt,
+      );
+
+      /* ----------------------------------------------------------------
+         PHASE 3: Badges pop in
+         ---------------------------------------------------------------- */
+      tl.to(
+        "#badge-left",
+        {
+          scale: 1,
+          opacity: 1,
+          duration: TIMING.badgeEntryDur,
+          ease: "back.out(1.7)",
+        },
+        TIMING.badgeLeftAt,
+      );
+
+      tl.to(
+        "#badge-right",
+        {
+          scale: 1,
+          opacity: 1,
+          duration: TIMING.badgeEntryDur,
+          ease: "back.out(1.7)",
+        },
+        TIMING.badgeRightAt,
+      );
+
+      /* ----------------------------------------------------------------
+         CONTINUOUS FLOATING — shared scene-ticker onUpdate
+         Six gsap.set calls per frame, batched by the browser.
+         ---------------------------------------------------------------- */
+      const leftPos = document.querySelector("#card-left  .card-pos");
+      const rightPos = document.querySelector("#card-right .card-pos");
+      const leftTilt = document.querySelector("#card-left  .card-tilt");
+      const rightTilt = document.querySelector("#card-right .card-tilt");
+
+      tl.to(
+        { tick: 0 },
+        {
+          tick: 1,
+          duration: TOTAL_DUR,
+          ease: "none",
+          onUpdate: function () {
+            const t = tl.time();
+            // Cards float in opposition (phase π apart).
+            const lY = Math.sin(t * TIMING.floatYSpeed) * TIMING.floatYAmp;
+            const lR = Math.sin(t * TIMING.floatRSpeed) * TIMING.floatRAmp;
+            const rY = Math.sin(t * TIMING.floatYSpeed + Math.PI) * TIMING.floatYAmp;
+            const rR = Math.sin(t * TIMING.floatRSpeed + Math.PI) * TIMING.floatRAmp;
+            gsap.set(leftPos, { y: lY });
+            gsap.set(rightPos, { y: rY });
+            gsap.set(leftTilt, { rotationY: TIMING.baseTilt + lR });
+            gsap.set(rightTilt, { rotationY: -TIMING.baseTilt + rR });
+
+            // Badges — small shared y oscillation.
+            const bY = Math.sin(t * TIMING.badgeYSpeed) * TIMING.badgeYAmp;
+            gsap.set(badgeLeftEl, { y: bY });
+            gsap.set(badgeRightEl, { y: bY });
+          },
+        },
+        0,
+      );
+    </script>
+  </body>
+</html>
diff --git a/.claude/skills-media/hyperframes-animation/examples/concept-demo-decode-pan.html b/.claude/skills-media/hyperframes-animation/examples/concept-demo-decode-pan.html
new file mode 100644
index 000000000..af4efcf61
--- /dev/null
+++ b/.claude/skills-media/hyperframes-animation/examples/concept-demo-decode-pan.html
@@ -0,0 +1,520 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Scene 7 — HyperFrames Decrypt Pan Track</title>
+
+    <!--
+      HyperFrames composition.tsx.
+
+      Choreography (4 phases, 7 seconds total):
+        0.0 – 0.7s   Shot 1 static text fades in + rises ("HyperFrames renders")
+        0.7 – 1.6s   Hacker-flip decodes the accent word ("video")
+        2.8 – 3.5s   Horizontal pan to Shot 2 with parallax exit + scale-in
+        3.7 – 6.1s   Cursor-tracked typing: "HTML, CSS and JS become MP4"
+          (NOT @the source/layout-utils, NOT a charWidthRatio constant)
+        - Bar width pre-allocated from the full text — never tweened
+        - Camera follows cursor by tweening the strip's `x`, with a piecewise
+          Math.min(initialOffset, trackingOffset) for the two-phase camera
+        - Hacker-flip glyph flicker via deterministic int hash, not Math.random
+    -->
+
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+
+    <style>
+      :root {
+        --bg: linear-gradient(
+          135deg,
+          #3a3a3a 0%,
+          #17211f 30%,
+          #0b2328 48%,
+          #1f3518 70%,
+          #343434 100%
+        );
+        --text-dark: #f8fafc;
+        --text-highlight: #18d9e8;
+        --text-highlight-2: #7bea5a;
+        --search-bg: rgba(14, 24, 23, 0.82);
+        --cursor: #7bea5a;
+      }
+
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        margin: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: var(--bg);
+        font-family:
+          "Inter",
+          system-ui,
+          -apple-system,
+          sans-serif;
+        color: var(--text-dark);
+      }
+
+      .viewport {
+        position: absolute;
+        inset: 0;
+        overflow: hidden;
+      }
+      .strip {
+        display: flex;
+        height: 100%;
+        will-change: transform;
+      }
+      .shot {
+        width: 1920px;
+        height: 100%;
+        position: relative;
+        flex-shrink: 0;
+      }
+
+      /* ============================================================
+         SHOT 1 — "HyperFrames renders video"
+         ============================================================ */
+      .shot1-content {
+        position: absolute;
+        inset: 0;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        opacity: 0; /* GSAP fromTo fades in */
+      }
+      .shot1-row {
+        display: flex;
+        align-items: baseline;
+        gap: 0.4em;
+        font-size: 130px;
+      }
+      .shot1-static {
+        font-weight: 500;
+        color: var(--text-dark);
+        text-shadow: 0 0 36px rgba(24, 217, 232, 0.18);
+      }
+      .shot1-accent {
+        font-weight: 700;
+        display: flex;
+        perspective: 800px; /* required for the per-glyph rotateX */
+      }
+      .flip-glyph {
+        position: relative;
+        display: inline-block;
+        min-width: 0;
+      }
+      .flip-glyph.space {
+        min-width: 0.4em;
+      }
+      .flip-glyph .ghost {
+        opacity: 0;
+      }
+      .flip-glyph .anim {
+        position: absolute;
+        left: 0;
+        top: 0;
+        width: 100%;
+        color: var(--text-highlight);
+        background: linear-gradient(135deg, var(--text-highlight) 0%, var(--text-highlight-2) 100%);
+        -webkit-background-clip: text;
+        background-clip: text;
+        -webkit-text-fill-color: transparent;
+        filter: drop-shadow(0 0 24px rgba(24, 217, 232, 0.32))
+          drop-shadow(0 0 36px rgba(123, 234, 90, 0.22));
+        opacity: 0;
+        transform: perspective(600px) rotateX(90deg);
+        transform-origin: bottom;
+        backface-visibility: hidden;
+      }
+
+      /* ============================================================
+         SHOT 2 — Search bar with cursor-tracked typing
+         ============================================================ */
+      .shot2-bar {
+        position: absolute;
+        top: 50%;
+        /* left set by JS once we know the bar's world coordinate */
+        height: 240px;
+        background: var(--search-bg);
+        border: 1px solid rgba(123, 234, 90, 0.22);
+        box-shadow:
+          0 0 60px rgba(24, 217, 232, 0.2),
+          0 0 96px rgba(123, 234, 90, 0.14),
+          inset 0 0 32px rgba(24, 217, 232, 0.08);
+        border-radius: 999px;
+        display: flex;
+        align-items: center;
+        padding-left: 120px;
+        padding-right: 180px;
+        opacity: 0; /* GSAP fromTo fades in */
+        transform-origin: left center;
+      }
+      .search-text {
+        font-size: 120px;
+        font-weight: 400;
+        color: var(--text-dark);
+        text-shadow: 0 0 24px rgba(248, 250, 252, 0.16);
+        white-space: pre;
+        line-height: 1;
+      }
+      .search-cursor {
+        font-size: 120px;
+        color: var(--cursor);
+        text-shadow: 0 0 26px rgba(123, 234, 90, 0.42);
+        margin-left: 4px;
+        font-weight: 300;
+        line-height: 1;
+      }
+
+      /* Hidden probe used by measureNodeWidth */
+      .measure-probe {
+        position: absolute;
+        left: -99999px;
+        top: -99999px;
+        visibility: hidden;
+        white-space: pre;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="main"
+      data-start="0"
+      data-duration="7"
+      data-width="1920"
+      data-height="1080"
+    >
+      <div class="viewport" data-layout-allow-overflow>
+        <div class="strip" data-layout-allow-overflow>
+          <!-- =====================================================
+               SHOT 1 — "HyperFrames renders video"
+               ===================================================== -->
+          <div
+            id="shot-decode"
+            class="shot shot1 clip"
+            data-start="0"
+            data-duration="3.5"
+            data-track-index="1"
+          >
+            <div class="shot1-content">
+              <div class="shot1-row">
+                <span class="shot1-static">HyperFrames renders</span>
+                <span class="shot1-accent" aria-label="video">
+                  <!-- .flip-glyph spans generated by JS -->
+                </span>
+              </div>
+            </div>
+          </div>
+
+          <!-- =====================================================
+               SHOT 2 — Search bar typing
+               ===================================================== -->
+          <div
+            id="shot-typing"
+            class="shot shot2 clip"
+            data-start="2.5"
+            data-duration="4.5"
+            data-track-index="2"
+          >
+            <div class="shot2-bar">
+              <span class="search-text"></span><span class="search-cursor">_</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <script>
+      /* ================================================================
+         CONSTANTS — all baked at setup time.
+         ================================================================ */
+      const W = 1920,
+        H = 1080;
+      const COMPOSITION_DURATION = 7;
+      const FPS_HASH = 60; // synthetic clock for the flicker hash
+
+      const TIMING = {
+        // Phase 1: shot1 text fades in + rises
+        shot1EntryStart: 0.0,
+        shot1EntryDur: 0.67,
+
+        // Phase 2: hacker-flip "video"
+        flipStart: 0.7,
+        flipStagger: 0.066, // ~2 frames at 30fps per glyph
+        flipDuration: 0.55,
+
+        // Phase 3: horizontal pan
+        panStart: 2.83,
+        panDuration: 0.67,
+
+        // Phase 4: cursor-tracked typing
+        typingStart: 3.67, // panStart + panDuration + 0.17 buffer
+        charRate: 0.083, // seconds per character (~2.5 frames at 30fps)
+      };
+
+      const FULL_TEXT = "HTML, CSS and JS become MP4";
+      const FONT_SIZE = 120;
+      const PADDING_LEFT = 120;
+      const PADDING_RIGHT = 180;
+      const CURSOR_VIS_W = FONT_SIZE * 0.6; // visual cursor width approximation
+      const CURSOR_TARGET = W * 0.7; // screen X where cursor locks
+      const BAR_LEFT_MARGIN = 80; // initial left margin in Phase 4
+      const PARALLAX_DIST = 400; // px Shot 1 moves extra during pan
+
+      /* ================================================================
+         BUILD DOM — flip glyphs (Shot 1) generated synchronously.
+         The accent text is "video" → 5 glyphs.
+         ================================================================ */
+      const accentEl = document.querySelector(".shot1-accent");
+      const ACCENT_WORD = "video";
+      ACCENT_WORD.split("").forEach((char, index) => {
+        const span = document.createElement("span");
+        span.className = "flip-glyph" + (char === " " ? " space" : "");
+        span.dataset.char = char;
+        span.dataset.index = String(index);
+        // Each glyph needs its own font-size to match the surrounding row.
+        span.style.fontSize = "130px";
+        const ghost = document.createElement("span");
+        ghost.className = "ghost";
+        ghost.textContent = char === " " ? " " : char;
+        const anim = document.createElement("span");
+        anim.className = "anim";
+        anim.textContent = char === " " ? " " : char;
+        span.append(ghost, anim);
+        accentEl.appendChild(span);
+      });
+
+      /* ================================================================
+         TEXT MEASUREMENT — uses a hidden DOM probe so we capture
+         real letter-spacing, kerning, and font-feature widths.
+         Must run AFTER document.fonts.ready.
+         ================================================================ */
+      function measureNodeWidth(text, font) {
+        const probe = document.createElement("span");
+        probe.className = "measure-probe";
+        probe.style.font = font;
+        probe.style.whiteSpace = "pre";
+        probe.textContent = text;
+        document.body.appendChild(probe);
+        const width = probe.getBoundingClientRect().width;
+        probe.remove();
+        return width;
+      }
+
+      /* ================================================================
+         TIMELINE BUILD — fires after fonts are ready so measurements
+         use the real rendered metrics, not fallback fonts.
+         ================================================================ */
+      window.__timelines = window.__timelines || {};
+      const tl = gsap.timeline({ paused: true });
+
+      // Register early so HF can find it; tweens are added below.
+      window.__timelines["main"] = tl;
+
+      document.fonts.ready.then(() => {
+        const searchFont = `400 ${FONT_SIZE}px Inter, system-ui, sans-serif`;
+        const fullTextWidth = measureNodeWidth(FULL_TEXT, searchFont);
+        const barWidth = PADDING_LEFT + fullTextWidth + CURSOR_VIS_W + PADDING_RIGHT;
+
+        // Pre-allocate the bar's final width — no width tweens ever.
+        const barEl = document.querySelector(".shot2-bar");
+        barEl.style.width = barWidth + "px";
+
+        // Initial bar position in Shot 2's local space.
+        // We position it at LEFT_MARGIN from the shot's left edge.
+        barEl.style.left = BAR_LEFT_MARGIN + "px";
+        barEl.style.transform = "translateY(-50%)"; // vertical center
+
+        // ============================================================
+        // PHASE 1: Shot 1 text fade in + rise
+        // ============================================================
+        tl.fromTo(
+          ".shot1-content",
+          { opacity: 0, y: 30 },
+          {
+            opacity: 1,
+            y: 0,
+            duration: TIMING.shot1EntryDur,
+            ease: "power2.out",
+          },
+          TIMING.shot1EntryStart,
+        );
+
+        // ============================================================
+        // PHASE 2: Hacker-flip "video"
+        // ============================================================
+        const CHAR_POOL = "abcdefghijklmnopqrstuvwxyz";
+        const FLICKER = 3;
+        const REVEAL_AT = 0.6;
+
+        // Deterministic 32-bit mix — replaces Math.random / seeded RNG.
+        function pseudoHash(i, t) {
+          return ((i * 374761393 + t * 668265263) >>> 0) % CHAR_POOL.length;
+        }
+
+        document.querySelectorAll(".flip-glyph").forEach((glyph) => {
+          const index = Number(glyph.dataset.index);
+          const real = glyph.dataset.char === " " ? " " : glyph.dataset.char;
+          const anim = glyph.querySelector(".anim");
+          const start = TIMING.flipStart + index * TIMING.flipStagger;
+
+          tl.fromTo(
+            anim,
+            { rotationX: 90, opacity: 0, "--p": 0 },
+            {
+              rotationX: 0,
+              opacity: 1,
+              "--p": 1,
+              duration: TIMING.flipDuration,
+              ease: "back.out(1.6)", // spring(stiffness:150, damping:14)
+              onUpdate: function () {
+                const p = Number(gsap.getProperty(anim, "--p"));
+                if (p >= REVEAL_AT) {
+                  if (anim.textContent !== real) anim.textContent = real;
+                } else {
+                  const localFrame = Math.floor((tl.time() - start) * FPS_HASH);
+                  const bucket = Math.max(0, Math.floor(localFrame / FLICKER));
+                  anim.textContent = CHAR_POOL[pseudoHash(index, bucket)];
+                }
+              },
+            },
+            start,
+          );
+        });
+
+        // ============================================================
+        // PHASE 3: Horizontal pan + parallax exit + Shot 2 entry
+        // All three tweens at the same timeline position run in parallel.
+        // ============================================================
+        // (a) Camera pan — strip slides one full viewport left.
+        tl.to(
+          ".strip",
+          {
+            x: -W,
+            duration: TIMING.panDuration,
+            ease: "power3.inOut", // cinematic slow-in-slow-out
+          },
+          TIMING.panStart,
+        );
+
+        // (b) Shot 1 parallax exit — content moves EXTRA -PARALLAX_DIST.
+        tl.to(
+          ".shot1-content",
+          {
+            x: -PARALLAX_DIST,
+            duration: TIMING.panDuration,
+            ease: "power3.inOut",
+          },
+          TIMING.panStart,
+        );
+
+        // Shot 1 fades out partway through the pan so the eye lands on Shot 2.
+        tl.to(
+          ".shot1-content",
+          {
+            opacity: 0,
+            duration: TIMING.panDuration * 0.4,
+            ease: "power2.out",
+          },
+          TIMING.panStart,
+        );
+
+        // (c) Shot 2 bar entry — fade + scale with mild overshoot ("landing").
+        tl.fromTo(
+          ".shot2-bar",
+          { opacity: 0, scale: 0.8 },
+          {
+            opacity: 1,
+            scale: 1,
+            duration: TIMING.panDuration,
+            ease: "back.out(1.2)",
+          },
+          TIMING.panStart,
+        );
+
+        // ============================================================
+        // PHASE 4: Cursor-tracked typing.
+        //
+        // The strip is now at x = -W (Shot 2 fully on screen). For the
+        // cursor-track effect we'll *further* shift the strip by a piecewise
+        // amount: hold initial offset while the empty bar's cursor is left
+        // of CURSOR_TARGET, then follow once typing pushes it past.
+        // ============================================================
+        const searchTextEl = document.querySelector(".search-text");
+        const stripEl = document.querySelector(".strip");
+
+        const CURSOR_WIDTH_HALF = CURSOR_VIS_W / 2;
+        const STRIP_BASE_X = -W; // strip's x at the end of Phase 3
+
+        // Initial Phase-4 offset = 0 (no additional shift on top of -W).
+        // i.e. bar already sits at BAR_LEFT_MARGIN inside Shot 2.
+        const INITIAL_OFFSET = 0;
+
+        // Typing driver — a clock that runs from 0 to FULL_TEXT.length.
+        const typingProxy = { progress: 0 };
+        const typingDur = FULL_TEXT.length * TIMING.charRate;
+        const typingEnd = TIMING.typingStart + typingDur;
+        const postTypingHold = Math.max(0, COMPOSITION_DURATION - typingEnd);
+
+        tl.to(
+          typingProxy,
+          {
+            progress: FULL_TEXT.length,
+            duration: typingDur,
+            ease: "none",
+            onUpdate: function () {
+              const charsTyped = Math.min(FULL_TEXT.length, Math.floor(typingProxy.progress));
+              const visibleText = FULL_TEXT.slice(0, charsTyped);
+              if (searchTextEl.textContent !== visibleText) {
+                searchTextEl.textContent = visibleText;
+              }
+
+              // Measure current visible width to compute cursor screen position.
+              // Cheap because Inter's metrics are cached after the first call.
+              const visibleW =
+                visibleText.length === 0 ? 0 : measureNodeWidth(visibleText, searchFont);
+
+              // Cursor X in *Shot 2's* coordinate system:
+              //   shot left edge → bar left edge (BAR_LEFT_MARGIN)
+              //                  → cursor within bar (PADDING_LEFT + visibleW + CURSOR_WIDTH_HALF)
+              const cursorXInShot2 = BAR_LEFT_MARGIN + PADDING_LEFT + visibleW + CURSOR_WIDTH_HALF;
+
+              // For the cursor to land at CURSOR_TARGET on the *screen*, the
+              // strip must be shifted by:
+              //   stripX = CURSOR_TARGET - cursorXInShot2 - W   (the -W accounts
+              //   for Shot 2 being the SECOND shot in the strip)
+              const trackingStripX = CURSOR_TARGET - cursorXInShot2 - W;
+
+              // Piecewise: hold STRIP_BASE_X + INITIAL_OFFSET until tracking
+              // would pan FURTHER LEFT than the base, then follow.
+              const finalStripX = Math.min(STRIP_BASE_X + INITIAL_OFFSET, trackingStripX);
+
+              gsap.set(stripEl, { x: finalStripX });
+            },
+          },
+          TIMING.typingStart,
+        );
+
+        if (postTypingHold > 0) {
+          tl.to(
+            ".search-cursor",
+            {
+              opacity: 0.22,
+              duration: postTypingHold / 2,
+              repeat: 1,
+              yoyo: true,
+              ease: "none",
+            },
+            typingEnd,
+          );
+        }
+      });
+    </script>
+  </body>
+</html>
diff --git a/.claude/skills-media/hyperframes-animation/examples/cta-morph-press.html b/.claude/skills-media/hyperframes-animation/examples/cta-morph-press.html
new file mode 100644
index 000000000..3896aa43a
--- /dev/null
+++ b/.claude/skills-media/hyperframes-animation/examples/cta-morph-press.html
@@ -0,0 +1,468 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Scene 10 — HyperFrames Morph Press Interact</title>
+
+    <!--
+      HyperFrames composition.tsx.
+
+      Choreography (4 phases, 5.5 seconds total):
+        0.17 – 0.64s   Hero "HyperFrames" + logo asset fade up (opacity + y rise)
+        0.17 – 5.50s   Logo asset rotates ±4° continuously (sine onUpdate)
+        2.17 – 2.62s   Hero shrinks (1 → 0.6) and fades (1 → 0)
+        2.17 – 2.62s   "Build video from HTML" CTA pill pops in with back.out(2) overshoot
+        2.33 – 2.66s   CTA text fades + lifts into place (after container is recognizable)
+        2.83s          Cursor hard-cuts in at off-screen bottom-right
+        2.83 – 3.83s   Cursor approaches via spring path to (W/2 + 120, H/2 + 50)
+        3.83 – 3.98s   Click DOWN: both cursor and CTA compress to scale 0.9 (sync)
+        4.17 – 4.42s   Click UP: both return to scale 1.0 (sync)
+          DOM + GSAP opacity tweens; z-index keeps incoming above outgoing
+        - Press synchronization uses single GSAP target array ["#cta", "#cursor"]
+          to guarantee perfectly identical tween values
+        - Cursor opacity uses a 0.001-second fromTo for hard-cut step change
+        - Logo uses a local static image asset referenced with a plain URL
+        - Breathing rotation only on the logo, not on the whole hero (avoids
+          conflict with the morph exit scale tween)
+    -->
+
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+
+    <style>
+      :root {
+        --hf-bg: #050711;
+        --hf-bg-2: #0b1020;
+        --hf-ink: #f8fafc;
+        --hf-muted: #cbd5e1;
+        --hf-purple: #7c3aed;
+        --hf-purple-soft: #a78bfa;
+        --hf-cyan: #18d9e8;
+        --hf-green: #22c55e;
+        --hf-glass: rgba(248, 250, 252, 0.08);
+        --white: #ffffff;
+      }
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        margin: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background:
+          radial-gradient(ellipse at 50% 42%, rgba(24, 217, 232, 0.14), transparent 50%),
+          radial-gradient(ellipse at 62% 48%, rgba(124, 58, 237, 0.2), transparent 56%),
+          radial-gradient(ellipse at 42% 58%, rgba(34, 197, 94, 0.1), transparent 58%),
+          linear-gradient(135deg, #050711 0%, #090b18 48%, #120717 100%);
+        font-family:
+          "Inter",
+          system-ui,
+          -apple-system,
+          sans-serif;
+        color: var(--hf-ink);
+      }
+
+      .stage {
+        position: absolute;
+        inset: 0;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+
+      /* ============================================================
+         HERO LOCKUP (Phase 1 — exits during morph)
+         ============================================================ */
+      .hero {
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        gap: 54px;
+        will-change: transform, opacity;
+      }
+      .hero-text {
+        font-size: 220px;
+        font-weight: 800;
+        color: var(--hf-ink);
+        letter-spacing: 0;
+        line-height: 1;
+        margin: 0;
+        text-shadow:
+          0 0 34px rgba(167, 139, 250, 0.18),
+          0 0 72px rgba(24, 217, 232, 0.1);
+      }
+      .hero-text .brand-accent {
+        color: var(--hf-purple-soft);
+        text-shadow:
+          0 0 34px rgba(124, 58, 237, 0.45),
+          0 0 82px rgba(167, 139, 250, 0.22);
+      }
+      .hero-logo {
+        width: 300px;
+        height: 300px;
+        margin-left: 8px;
+        will-change: transform;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+      .hero-logo .logo-mark {
+        width: 100%;
+        height: 100%;
+        display: block;
+        border-radius: 36px;
+        box-shadow:
+          0 0 64px rgba(24, 217, 232, 0.32),
+          0 0 112px rgba(34, 197, 94, 0.18),
+          0 0 150px rgba(124, 58, 237, 0.12);
+      }
+
+      /* ============================================================
+         CTA PILL (Phase 2 — pops in during morph)
+         ============================================================ */
+      .cta {
+        background: linear-gradient(
+          135deg,
+          rgba(124, 58, 237, 0.96) 0%,
+          rgba(24, 217, 232, 0.9) 48%,
+          rgba(34, 197, 94, 0.96) 100%
+        );
+        padding: 70px 200px;
+        border-radius: 200px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        overflow: hidden;
+        border: 1px solid rgba(24, 217, 232, 0.55);
+        box-shadow:
+          0 24px 60px rgba(0, 0, 0, 0.42),
+          0 0 72px rgba(24, 217, 232, 0.24),
+          0 0 120px rgba(124, 58, 237, 0.24),
+          inset 0 1px 0 rgba(255, 255, 255, 0.24),
+          inset 0 0 34px var(--hf-glass);
+        will-change: transform, opacity;
+        /* initial scale 0 + opacity 0 set by gsap.set() */
+      }
+      .cta-text {
+        color: var(--hf-bg);
+        font-size: 110px;
+        font-weight: 700;
+        white-space: nowrap;
+        text-shadow:
+          0 1px 0 rgba(255, 255, 255, 0.3),
+          0 0 22px rgba(255, 255, 255, 0.12);
+        will-change: transform, opacity;
+        /* initial opacity 0 + y 10 set by gsap.set() */
+      }
+
+      /* ============================================================
+         CURSOR (Phase 3 — hard-cuts in)
+         ============================================================ */
+      .cursor {
+        position: absolute;
+        left: 0;
+        top: 0;
+        width: 120px;
+        height: 120px;
+        will-change: transform, opacity;
+        /* initial x/y/opacity set by gsap.set() */
+      }
+      .cursor .cursor-svg {
+        width: 100%;
+        height: 100%;
+        display: block;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="main"
+      data-start="0"
+      data-duration="5.5"
+      data-width="1920"
+      data-height="1080"
+    >
+      <div class="stage clip" data-start="0" data-duration="5.5" data-track-index="1" id="stage">
+        <!-- =====================================================
+             HERO LOCKUP — "HyperFrames" + logo
+             ===================================================== -->
+        <div
+          class="hero clip"
+          id="hero"
+          data-start="0"
+          data-duration="2.62"
+          data-track-index="2"
+          data-layout-allow-overflow
+          aria-hidden="true"
+        >
+          <h1 class="hero-text">Hyper<span class="brand-accent">Frames</span></h1>
+          <div class="hero-logo" id="hero-logo">
+            <!-- Inline-SVG placeholder mark — swap for your logo image -->
+            <svg class="logo-mark" viewBox="0 0 100 100" role="img" aria-label="HyperFrames">
+              <defs>
+                <linearGradient id="hfMark" x1="0" y1="0" x2="1" y2="1">
+                  <stop offset="0" stop-color="#8b7bff" />
+                  <stop offset="1" stop-color="#3ddc97" />
+                </linearGradient>
+              </defs>
+              <rect x="4" y="4" width="92" height="92" rx="22" fill="url(#hfMark)" />
+              <text
+                x="50"
+                y="63"
+                text-anchor="middle"
+                font-family="Inter, system-ui, sans-serif"
+                font-size="40"
+                font-weight="800"
+                fill="#fff"
+              >
+                HF
+              </text>
+            </svg>
+          </div>
+        </div>
+
+        <!-- =====================================================
+             CTA PILL — "Build video from HTML"
+             ===================================================== -->
+        <div class="cta" id="cta">
+          <span class="cta-text">Build video from HTML</span>
+        </div>
+
+        <!-- =====================================================
+             CURSOR — inline SVG arrow with drop-shadow
+             ===================================================== -->
+        <div class="cursor" id="cursor">
+          <svg
+            class="cursor-svg"
+            viewBox="0 0 24 24"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+            aria-hidden="true"
+          >
+            <defs>
+              <filter id="cursorShadow" x="-50%" y="-50%" width="200%" height="200%">
+                <feDropShadow dx="2" dy="4" stdDeviation="3" flood-opacity="0.3" />
+              </filter>
+            </defs>
+            <path
+              d="M5.5 3.5L19 10.5L11.5 12.5L15.5 19.5L13.5 20.5L9.5 13.5L5.5 17.5V3.5Z"
+              fill="#050711"
+              stroke="#f8fafc"
+              stroke-width="1.5"
+              stroke-linejoin="round"
+              filter="url(#cursorShadow)"
+            />
+          </svg>
+        </div>
+      </div>
+    </div>
+
+    <script>
+      /* ================================================================
+         TIMING
+         ================================================================ */
+      const W = 1920,
+        H = 1080;
+      const TOTAL_DUR = 5.5;
+
+      const TIMING = {
+        introStart: 0.17, // ~5 frames at 30 fps
+        introDur: 0.47, // hero enter spring settle
+
+        morphAt: 2.17, // ~65 frames
+        morphExitDur: 0.5,
+        morphFadeDur: 0.15, // 30% of exit
+        morphEntDur: 0.45, // CTA pop-in
+
+        textRevealAt: 2.33, // morph + 0.17 s
+        textRevealDur: 0.33,
+
+        cursorEnterAt: 2.83,
+        cursorPathDur: 1.0,
+
+        clickDownAt: 3.83,
+        clickDownDur: 0.15,
+        clickUpAt: 4.17,
+        clickUpDur: 0.25,
+
+        pressIntensity: 0.1,
+      };
+
+      /* ================================================================
+         INITIAL STATES (via gsap.set, before the timeline runs)
+         ================================================================ */
+      // Hero: starts at opacity 0, y +40 (will fade up)
+      gsap.set("#hero", { opacity: 0, y: 40 });
+
+      // CTA: starts invisible (scale 0, opacity 0) — morph pops it in
+      gsap.set("#cta", { scale: 0, opacity: 0 });
+
+      // CTA text: starts at opacity 0 + y 10 — reveals after container is recognizable
+      gsap.set(".cta-text", { opacity: 0, y: 10 });
+
+      // Cursor: starts off-screen bottom-right + invisible + scale 1 baseline
+      gsap.set("#cursor", {
+        x: W + 100,
+        y: H + 200,
+        scale: 1,
+        opacity: 0,
+      });
+
+      /* ================================================================
+         TIMELINE
+         ================================================================ */
+      window.__timelines = window.__timelines || {};
+      const tl = gsap.timeline({ paused: true });
+      window.__timelines["main"] = tl;
+
+      /* ----------------------------------------------------------------
+         PHASE 1: Hero entrance + breathing rotation on logo
+         ---------------------------------------------------------------- */
+      tl.to(
+        "#hero",
+        {
+          opacity: 1,
+          y: 0,
+          duration: TIMING.introDur,
+          ease: "power3.out", // spring(stiffness:120, damping:14)
+        },
+        TIMING.introStart,
+      );
+
+      // Continuous breathing rotation on the logo. ±4° over ~6.3 s period.
+      // For a 5.5 s composition this is just under one cycle — subtle but alive.
+      // Use Form 2 (onUpdate reading tl.time) per sine-wave-loop rule.
+      const logoEl = document.querySelector("#hero-logo");
+      tl.to(
+        { tick: 0 },
+        {
+          tick: 1,
+          duration: TOTAL_DUR,
+          ease: "none",
+          onUpdate: function () {
+            const t = tl.time();
+            gsap.set(logoEl, { rotation: Math.sin(t * 1.0) * 4 });
+          },
+        },
+        0,
+      );
+
+      /* ----------------------------------------------------------------
+         PHASE 2: Scale-swap morph
+         Three concurrent tween clusters from MORPH_AT.
+         ---------------------------------------------------------------- */
+      // (1) Hero shrinks
+      tl.to(
+        "#hero",
+        {
+          scale: 0.6,
+          duration: TIMING.morphExitDur,
+          ease: "power3.out", // spring(stiffness:150, damping:18)
+        },
+        TIMING.morphAt,
+      );
+
+      // (2) Hero fades fast (30% of shrink dur)
+      tl.to(
+        "#hero",
+        {
+          opacity: 0,
+          duration: TIMING.morphFadeDur,
+          ease: "power2.out",
+        },
+        TIMING.morphAt,
+      );
+
+      tl.set(
+        "#hero",
+        {
+          x: -4000,
+        },
+        TIMING.morphAt + TIMING.morphFadeDur,
+      );
+
+      // (3) CTA pops in with overshoot
+      tl.to(
+        "#cta",
+        {
+          scale: 1,
+          opacity: 1,
+          duration: TIMING.morphEntDur,
+          ease: "back.out(2)", // spring(stiffness:200, damping:15, mass:0.6)
+        },
+        TIMING.morphAt,
+      );
+
+      // (4) CTA text reveals after container reaches recognizable scale
+      tl.to(
+        ".cta-text",
+        {
+          opacity: 1,
+          y: 0,
+          duration: TIMING.textRevealDur,
+          ease: "power2.out",
+        },
+        TIMING.textRevealAt,
+      );
+
+      /* ----------------------------------------------------------------
+         PHASE 3: Cursor entry + motion path
+         ---------------------------------------------------------------- */
+      // Hard-cut opacity (cursors don't fade in — they appear).
+      // 0.001 s tween creates a step change that scrubs correctly.
+      tl.fromTo(
+        "#cursor",
+        { opacity: 0 },
+        { opacity: 1, duration: 0.001, ease: "none" },
+        TIMING.cursorEnterAt,
+      );
+
+      // Spring-driven approach to a target slightly offset from center
+      // (where a human would naturally aim — not dead-center).
+      tl.to(
+        "#cursor",
+        {
+          x: W / 2 + 120,
+          y: H / 2 + 50,
+          duration: TIMING.cursorPathDur,
+          ease: "power2.out", // spring(stiffness:60, damping:20)
+        },
+        TIMING.cursorEnterAt,
+      );
+
+      /* ----------------------------------------------------------------
+         PHASE 4: Physics-based press
+         Both CTA and cursor compress together — single target array.
+         ---------------------------------------------------------------- */
+      // Press DOWN — both elements compress to (1 - intensity)
+      tl.to(
+        ["#cta", "#cursor"],
+        {
+          scale: 1 - TIMING.pressIntensity,
+          duration: TIMING.clickDownDur,
+          ease: "power3.out", // spring(stiffness:300, damping:20)
+        },
+        TIMING.clickDownAt,
+      );
+
+      // RELEASE — back to scale 1.0
+      tl.to(
+        ["#cta", "#cursor"],
+        {
+          scale: 1.0,
+          duration: TIMING.clickUpDur,
+          ease: "power2.out", // spring(stiffness:200, damping:15)
+        },
+        TIMING.clickUpAt,
+      );
+    </script>
+  </body>
+</html>
diff --git a/.claude/skills-media/hyperframes-animation/examples/cta-orbit-collapse.html b/.claude/skills-media/hyperframes-animation/examples/cta-orbit-collapse.html
new file mode 100644
index 000000000..ad5d77e93
--- /dev/null
+++ b/.claude/skills-media/hyperframes-animation/examples/cta-orbit-collapse.html
@@ -0,0 +1,1298 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Scene — HyperFrames CTA Orbit Collapse</title>
+
+    <!--
+      Blueprint: cta-orbit-collapse (HyperFrames preview)
+      Six HyperFrames technology categories orbit a central "Drop an HTML
+      scene · Render" CTA. A cursor flies in, clicks, the icons collapse,
+      and a demo card springs out from the collapse point — all in 6.5s.
+
+      Palette: mirrors scene-05-orbit-collapse-action.tsx
+        Background: near-black frosted glass (#0A0A0F base + violet/cyan/pink
+                    glow blobs + rgba(15,15,25,0.35) frosted tint).
+        Brand:      Tailwind violet ramp
+                    #c4b5fd (300) → #a78bfa (400) → #8b5cf6 (500) → #7c3aed (600)
+                    matching COLORS.brand.purple / purpleGlow in the source.
+        CTA card:   rgba(20,20,30,0.8) — scene-05 inner CTA dark glass.
+        CTA button: white fill, #0A0A0F text — identical to scene-05.
+
+      Six orbiting tech icons (driven by ICONS array, evenly spaced 2π/6):
+        HTML    angle 0,   delay 0.00s   — angle brackets + center slash
+        CSS     angle π/3, delay 0.10s   — rounded frame + 3 color swatches
+        SVG     angle 2π/3, delay 0.20s  — bezier curve + 2 anchor points
+        GSAP    angle π,   delay 0.30s   — sine wave timeline + playhead
+        3D      angle 4π/3, delay 0.40s  — isometric cube + inner facets
+        LOTTIE  angle 5π/3, delay 0.50s  — 2 diamond keyframes on timeline
+
+      Choreography (5 phases, 6.5 seconds total):
+        0.00 – 1.05s   Six icons enter staggered with 3D flip + stroke-draw
+                       (each 0.55s back.out(1.4) spring; outline draws via
+                        strokeDashoffset; inner accents fade in with 0.10s
+                        stagger 0.30s after each icon's entry begins)
+        0.00 – 2.95s   Continuous orbit (0.25 rad/sec) with per-icon idle
+                       wobble (±6 px y + ±2.5° rotation, damped by collapse)
+        1.50 – 2.20s   Cursor fades in off-screen-right and slides to the
+                       CTA's white button (back.out(1.3) overshoot landing)
+        2.20 – 2.46s   Click — cursor (0.85) + CTA button (0.95) compress;
+                       white boxShadow glow pulse; ripple 0.3 → 5.0 over 0.70s
+        2.20 – 3.05s   Icons collapse toward center (back.out(1.6) ease);
+                       radiusFactor 1 → 0, scale 1 → 0.5, opacity envelope
+        2.95 – 3.75s   Demo card springs out from collapse point (scale 0 → 1)
+        3.95 – 6.50s   Demo floats with finite-yoyo breathing (±8 px, ±1° tilt)
+
+      Continuous SVG enrichment (per icon, gated by entryDelay):
+        HTML brackets:    horizontal sway ±0.6 units, period ~1.8s
+        CSS swatches:     three dots scale ±0.18 with 1.4 rad phase offsets
+        SVG bezier:       curve group rotation ±5°, period ~2.9s
+        GSAP timeline:    playhead marker traverses 0→18 + wave scaleY ±0.12
+        3D cube:          linear rotation 30°/s (continuous tumble)
+        LOTTIE keyframes: two diamonds scale ±0.12 with 1.6 rad phase offset
+
+      Continuous ambient accents (single scene-ticker writes all):
+        Per-icon tile glow pulse (base 22px ±12px, phased by icon index)
+        CTA breathing aura (base 38px ±26px, frozen at click)
+        Demo glow pulse (base 72px ±28px, runs after demo emerges)
+        Background radial wash (opacity 0.02 ↔ 0.42, period ~11.4s)
+    -->
+
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+
+    <style>
+      :root {
+        /* Palette mirrors scene-05-orbit-collapse-action.tsx — Tailwind violet
+           ramp on a near-black frosted-glass base, matching COLORS.brand.purple
+           and CTA_COLORS in  */
+        --bg-dark: #0a0a0f;
+        --text-primary: #ffffff;
+        --text-muted: rgba(255, 255, 255, 0.4);
+        --brand-purple: #8b5cf6; /* violet-500 — COLORS.brand.purple */
+        --brand-purple-light: #a78bfa; /* violet-400 */
+        --brand-purple-soft: #c4b5fd; /* violet-300 */
+        --brand-purple-deep: #7c3aed; /* violet-600 */
+        --brand-purple-glow: rgba(139, 92, 246, 0.6);
+        --glass-bg: rgba(255, 255, 255, 0.08); /* matches CTA_COLORS.inputBg */
+        --glass-border: rgba(139, 92, 246, 0.4); /* matches scene-05 icon border */
+        --cta-dark-bg: rgba(20, 20, 30, 0.8); /* scene-05 CTA card background */
+        --record-red: #ef4444;
+      }
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        margin: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: var(--bg-dark);
+        font-family:
+          "Inter",
+          system-ui,
+          -apple-system,
+          sans-serif;
+        color: var(--text-primary);
+      }
+
+      /* ============================================================
+         BACKGROUND — frosted glass over near-black base.
+         Mirrors scene-05 (FrostedGlassBackground): a deep dark radial
+         base + violet/cyan/pink glow blobs + a frosted overlay tint.
+         The blobs are static here (no per-frame jitter) to keep the
+         seek-safe contract; the orbit/CTA on top carries all motion.
+         ============================================================ */
+      .stage {
+        position: absolute;
+        inset: 0;
+        perspective: 1400px;
+      }
+      .bg {
+        position: absolute;
+        inset: 0;
+        background:
+          /* mirrored violet blobs — left + right symmetry so the wash
+             reads as a single coherent purple atmosphere rather than
+             a directional glow. */
+          radial-gradient(circle at 25% 40%, rgba(139, 92, 246, 0.55), transparent 55%),
+          radial-gradient(circle at 75% 40%, rgba(139, 92, 246, 0.55), transparent 55%),
+          /* deeper violet pool at the bottom centerline */
+          radial-gradient(ellipse 80% 50% at 50% 90%, rgba(124, 58, 237, 0.35), transparent 65%),
+          /* deep dark base */
+          radial-gradient(
+              ellipse 120% 100% at 50% 20%,
+              rgba(30, 30, 45, 1) 0%,
+              rgba(18, 18, 28, 1) 40%,
+              rgba(10, 10, 15, 1) 100%
+            );
+      }
+      .bg::after {
+        /* frosted overlay tint — emulates the rgba(15,15,25,0.4) layer
+           in scene-02's DarkFrostedGlassBackground. */
+        content: "";
+        position: absolute;
+        inset: 0;
+        background: rgba(15, 15, 25, 0.35);
+        pointer-events: none;
+      }
+      .bg-overlay {
+        position: absolute;
+        inset: 0;
+        background: rgba(10, 10, 15, 0.3);
+      }
+
+      /* ============================================================
+         ORBIT ICONS — three nested wrappers per icon.
+         .icon-pos     ← orbit x/y from master onUpdate
+         .icon-collapse ← collapse scale/opacity from master onUpdate
+         .icon-entry   ← 3D-flip entry from per-icon fromTo tween
+         ============================================================ */
+      .orbit-stage {
+        position: absolute;
+        inset: 0;
+      }
+      .icon-pos {
+        position: absolute;
+        left: 50%;
+        top: 50%;
+        width: 140px;
+        height: 170px;
+        margin: -85px 0 0 -70px; /* recenter the 140×170 box */
+        perspective: 800px;
+        will-change: transform;
+      }
+      .icon-collapse {
+        width: 100%;
+        height: 100%;
+        will-change: transform, opacity;
+      }
+      .icon-entry {
+        width: 100%;
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        gap: 8px;
+        transform-style: preserve-3d;
+        will-change: transform, opacity;
+      }
+      .icon-tile {
+        width: 110px;
+        height: 110px;
+        border-radius: 26px;
+        background: var(--glass-bg);
+        backdrop-filter: blur(10px);
+        border: 1px solid var(--glass-border);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        box-shadow:
+          0 15px 40px rgba(0, 0, 0, 0.35),
+          0 0 32px var(--brand-purple-glow),
+          inset 0 1px 0 rgba(255, 255, 255, 0.1);
+      }
+      .icon-svg {
+        width: 60px;
+        height: 60px;
+        display: block;
+      }
+      .icon-label {
+        font-size: 14px;
+        font-weight: 500;
+        color: rgba(255, 255, 255, 0.7);
+        text-transform: uppercase;
+        letter-spacing: 0.1em;
+        text-shadow: 0 0 14px rgba(139, 92, 246, 0.5);
+      }
+
+      /* SVG inner-element transform origins (in viewBox units).
+         Each origin is the geometric center of the element it animates
+         (the path's bbox center, or for circles, the cx/cy point). */
+      .html-brackets-g {
+        transform-origin: 12px 12px;
+      }
+      .css-dot-a {
+        transform-origin: 8px 9px;
+      }
+      .css-dot-b {
+        transform-origin: 16px 9px;
+      }
+      .css-dot-c {
+        transform-origin: 12px 16px;
+      }
+      .svg-curve-g {
+        transform-origin: 12px 12px;
+      }
+      .gsap-wave-g {
+        transform-origin: 12px 12px;
+      }
+      .gsap-marker {
+        transform-origin: 3px 12px;
+      }
+      .three-cube-g {
+        transform-origin: 12px 12px;
+      }
+      .lottie-kf-a {
+        transform-origin: 8px 12px;
+      }
+      .lottie-kf-b {
+        transform-origin: 16px 12px;
+      }
+
+      /* ============================================================
+         CENTER CTA — Drop a video link · Get free clips
+         ============================================================ */
+      .cta {
+        position: absolute;
+        left: 50%;
+        top: 50%;
+        /* xPercent/yPercent set by GSAP for centering — so GSAP rotateY
+           doesn't overwrite a CSS translate(-50%,-50%). */
+        z-index: 5;
+        display: flex;
+        align-items: center;
+        background: var(--cta-dark-bg); /* rgba(20,20,30,0.8) — scene-05 */
+        backdrop-filter: blur(14px);
+        border-radius: 36px;
+        padding: 10px 10px 10px 28px;
+        gap: 16px;
+        border: 1px solid var(--glass-border);
+        box-shadow:
+          0 40px 80px rgba(0, 0, 0, 0.5),
+          0 0 60px var(--brand-purple-glow),
+          inset 0 1px 0 rgba(255, 255, 255, 0.1);
+        transform-style: preserve-3d;
+        will-change: transform, opacity;
+      }
+      .cta-link-icon {
+        width: 22px;
+        height: 22px;
+        color: var(--text-muted);
+        filter: drop-shadow(0 0 8px rgba(139, 92, 246, 0.5));
+      }
+      .cta-placeholder {
+        font-size: 22px;
+        color: var(--text-muted);
+        min-width: 220px;
+        font-weight: 500;
+      }
+      .cta-button {
+        padding: 18px 36px;
+        background: #ffffff;
+        border-radius: 28px;
+        color: #0a0a0f; /* scene-05 button text */
+        font-size: 22px;
+        font-weight: 600;
+        white-space: nowrap;
+        box-shadow:
+          0 0 30px rgba(255, 255, 255, 0.35),
+          inset 0 -2px 6px rgba(139, 92, 246, 0.15);
+        will-change: transform, box-shadow;
+      }
+
+      /* ============================================================
+         RIPPLE — centered on the CTA's white button.
+         Button center sits at (CENTER_X + 130, CENTER_Y + 15) — same target
+         as the cursor's CURSOR_TARGET. Margin offsets re-center the 120 px
+         ring on that point. Avoid `margin` shorthand here so the offsets
+         can't be overridden by a stray longhand later.
+         ============================================================ */
+      .ripple {
+        position: absolute;
+        left: 50%;
+        top: 50%;
+        width: 120px;
+        height: 120px;
+        margin-top: -45px; /* = -60 (recenter) + 15 (y offset to button) */
+        margin-left: 70px; /* = -60 (recenter) + 130 (x offset to button) */
+        margin-right: 0;
+        margin-bottom: 0;
+        border: 2px solid rgba(255, 255, 255, 0.7);
+        border-radius: 50%;
+        opacity: 0;
+        pointer-events: none;
+        z-index: 6;
+        will-change: transform, opacity;
+      }
+
+      /* ============================================================
+         CURSOR — top layer, opacity 0 until Phase 2
+         ============================================================ */
+      .cursor {
+        position: absolute;
+        left: 0;
+        top: 0;
+        z-index: 999;
+        pointer-events: none;
+        opacity: 0;
+        filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
+        will-change: transform, opacity;
+      }
+
+      /* ============================================================
+         DEMO — appears from the collapse point in Phase 4
+         ============================================================ */
+      .demo {
+        position: absolute;
+        left: 50%;
+        top: 50%;
+        width: 800px;
+        height: 450px;
+        margin: -225px 0 0 -400px;
+        z-index: 10;
+        border-radius: 18px;
+        overflow: hidden;
+        background:
+          radial-gradient(ellipse at 22% 28%, rgba(139, 92, 246, 0.45), transparent 62%),
+          radial-gradient(ellipse at 78% 72%, rgba(124, 58, 237, 0.45), transparent 62%),
+          linear-gradient(135deg, rgba(20, 20, 30, 0.92) 0%, rgba(10, 10, 15, 0.95) 100%);
+        border: 1px solid var(--glass-border);
+        box-shadow:
+          0 50px 100px rgba(0, 0, 0, 0.5),
+          0 0 60px var(--brand-purple-glow),
+          inset 0 1px 0 rgba(255, 255, 255, 0.1);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        /* Initial scale: 0 / opacity: 0 set by GSAP — no CSS transform here to avoid
+           GSAP overwriting `translateX(-50%)` style centering. We use left/top + margin
+           for static centering instead. */
+        transform-style: preserve-3d;
+        will-change: transform, opacity;
+      }
+      .demo-play {
+        width: 118px;
+        height: 118px;
+        border-radius: 50%;
+        background: radial-gradient(circle at 35% 30%, #ffffff 0%, #ede9fe 60%, #c4b5fd 100%);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        box-shadow:
+          0 0 80px rgba(139, 92, 246, 0.7),
+          0 0 180px rgba(139, 92, 246, 0.4),
+          0 18px 40px rgba(0, 0, 0, 0.5),
+          inset 0 -4px 14px rgba(124, 58, 237, 0.3),
+          inset 0 3px 8px rgba(255, 255, 255, 0.95);
+        position: relative;
+      }
+      .demo-play::after {
+        /* outer ring — adds depth without breaking the seek-safe layout */
+        content: "";
+        position: absolute;
+        inset: -10px;
+        border-radius: 50%;
+        border: 1.5px solid rgba(139, 92, 246, 0.65);
+        box-shadow: 0 0 40px rgba(139, 92, 246, 0.5);
+        pointer-events: none;
+      }
+      .demo-play svg {
+        width: 44px;
+        height: 44px;
+        color: #0a0a0f;
+        transform: translateX(3px); /* optical center for play triangle */
+        filter: drop-shadow(0 1px 2px rgba(124, 58, 237, 0.5));
+      }
+      .demo-label {
+        position: absolute;
+        bottom: 28px;
+        left: 32px;
+        font-size: 22px;
+        font-weight: 700;
+        letter-spacing: 0.14em;
+        text-transform: uppercase;
+        background: linear-gradient(90deg, #ffffff 0%, #c4b5fd 50%, #8b5cf6 100%);
+        -webkit-background-clip: text;
+        background-clip: text;
+        color: transparent;
+        filter: drop-shadow(0 0 16px rgba(139, 92, 246, 0.6));
+      }
+
+      /* ============================================================
+         VIGNETTE
+         ============================================================ */
+      .vignette {
+        /* scene-05 vignette: transparent 40% → rgba(0,0,0,0.4) at edges */
+        position: absolute;
+        inset: 0;
+        background: radial-gradient(ellipse at center, transparent 40%, rgba(0, 0, 0, 0.4) 100%);
+        pointer-events: none;
+        z-index: 50;
+      }
+
+      /* ============================================================
+         TITLE — centered via xPercent in GSAP (not CSS translateX),
+         so the GSAP `y` tween doesn't overwrite the centering transform.
+         Single line at 96 px; the brand wordmark ("HyperFrames") uses
+         the HyperFrames teal gradient + heavy weight, the tagline
+         ("renders any scene") stays in soft white-teal for contrast.
+         No filter — crisp edges, no blurred halo.
+         ============================================================ */
+      .title {
+        position: absolute;
+        top: 64px;
+        left: 50%;
+        white-space: nowrap;
+        text-align: center;
+        font-size: 96px;
+        font-weight: 700;
+        letter-spacing: -0.022em;
+        line-height: 1;
+        color: #ffffff;
+        text-shadow:
+          0 0 24px rgba(255, 255, 255, 0.3),
+          0 0 60px rgba(139, 92, 246, 0.45); /* scene-05 brand.purpleGlow */
+        z-index: 20;
+        will-change: transform, opacity;
+      }
+      .title-brand {
+        font-weight: 800;
+        /* Violet ramp matching scene-05's COLORS.brand.purple family */
+        background: linear-gradient(135deg, #ede9fe 0%, #c4b5fd 35%, #a78bfa 65%, #8b5cf6 100%);
+        -webkit-background-clip: text;
+        background-clip: text;
+        color: transparent;
+        filter: drop-shadow(0 0 28px rgba(139, 92, 246, 0.7))
+          drop-shadow(0 0 60px rgba(124, 58, 237, 0.5));
+      }
+
+      /* ============================================================
+         ENHANCEMENTS — stroke-draw entry, stagger reveal,
+         ambient background breathing.
+         The .draw-N classes preset stroke-dasharray + stroke-dashoffset
+         to N so the path starts fully hidden; GSAP animates offset → 0
+         to reveal it in time with the icon's 3D-flip entry.
+         ============================================================ */
+      .draw-50 {
+        stroke-dasharray: 50;
+        stroke-dashoffset: 50;
+      }
+      .draw-100 {
+        stroke-dasharray: 100;
+        stroke-dashoffset: 100;
+      }
+      .draw-150 {
+        stroke-dasharray: 150;
+        stroke-dashoffset: 150;
+      }
+      .draw-200 {
+        stroke-dasharray: 200;
+        stroke-dashoffset: 200;
+      }
+
+      .reveal-late {
+        opacity: 0;
+      }
+
+      /* Ambient violet breathing — sits over the dark overlay, under
+         the orbit ring; opacity driven by the scene-ticker onUpdate. */
+      .bg-pulse {
+        position: absolute;
+        inset: 0;
+        background: radial-gradient(ellipse at 50% 50%, rgba(139, 92, 246, 0.35), transparent 62%);
+        opacity: 0;
+        pointer-events: none;
+        z-index: 1;
+        will-change: opacity;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="main"
+      data-start="0"
+      data-duration="6.5"
+      data-width="1920"
+      data-height="1080"
+    >
+      <div
+        id="orbit-scene"
+        class="stage clip"
+        data-start="0"
+        data-duration="6.5"
+        data-track-index="1"
+      >
+        <div class="bg"></div>
+
+        <!-- ============================================================
+             ORBIT ICONS — 6 genre icons distributed evenly around 2π
+             ============================================================ -->
+        <div class="orbit-stage">
+          <!-- 1. HTML — angle brackets + diagonal slash -->
+          <div class="icon-pos icon-html">
+            <div class="icon-collapse">
+              <div class="icon-entry">
+                <div class="icon-tile">
+                  <svg class="icon-svg" viewBox="0 0 24 24" fill="none">
+                    <g class="html-brackets-g">
+                      <path
+                        class="draw-50"
+                        d="M8 7 L3 12 L8 17"
+                        stroke="url(#g-html)"
+                        stroke-width="2.2"
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                      />
+                      <path
+                        class="draw-50"
+                        d="M16 7 L21 12 L16 17"
+                        stroke="url(#g-html)"
+                        stroke-width="2.2"
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                      />
+                    </g>
+                    <line
+                      class="reveal-late html-slash"
+                      x1="14"
+                      y1="5"
+                      x2="10"
+                      y2="19"
+                      stroke="url(#g-html)"
+                      stroke-width="2"
+                      stroke-linecap="round"
+                    />
+                    <defs>
+                      <linearGradient id="g-html" x1="0%" y1="0%" x2="100%" y2="100%">
+                        <stop offset="0%" stop-color="#a78bfa" />
+                        <stop offset="100%" stop-color="#8b5cf6" />
+                      </linearGradient>
+                    </defs>
+                  </svg>
+                </div>
+                <span class="icon-label">HTML</span>
+              </div>
+            </div>
+          </div>
+
+          <!-- 2. CSS — frame with three color swatches -->
+          <div class="icon-pos icon-css">
+            <div class="icon-collapse">
+              <div class="icon-entry">
+                <div class="icon-tile">
+                  <svg class="icon-svg" viewBox="0 0 24 24" fill="none">
+                    <rect
+                      class="draw-100"
+                      x="3"
+                      y="3"
+                      width="18"
+                      height="18"
+                      rx="3"
+                      stroke="url(#g-css)"
+                      stroke-width="2"
+                      fill="rgba(139, 92, 246, 0.18)"
+                    />
+                    <circle class="reveal-late css-dot-a" cx="8" cy="9" r="1.9" fill="#c4b5fd" />
+                    <circle class="reveal-late css-dot-b" cx="16" cy="9" r="1.9" fill="#a78bfa" />
+                    <circle class="reveal-late css-dot-c" cx="12" cy="16" r="1.9" fill="#7c3aed" />
+                    <defs>
+                      <linearGradient id="g-css" x1="0%" y1="0%" x2="100%" y2="100%">
+                        <stop offset="0%" stop-color="#c4b5fd" />
+                        <stop offset="100%" stop-color="#8b5cf6" />
+                      </linearGradient>
+                    </defs>
+                  </svg>
+                </div>
+                <span class="icon-label">CSS</span>
+              </div>
+            </div>
+          </div>
+
+          <!-- 3. SVG — bezier curve with anchor points -->
+          <div class="icon-pos icon-vector">
+            <div class="icon-collapse">
+              <div class="icon-entry">
+                <div class="icon-tile">
+                  <svg class="icon-svg" viewBox="0 0 24 24" fill="none">
+                    <g class="svg-curve-g">
+                      <path
+                        class="draw-100"
+                        d="M4 19 C 8 5, 16 19, 20 5"
+                        stroke="url(#g-vec)"
+                        stroke-width="2.5"
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                        fill="none"
+                      />
+                      <circle
+                        class="reveal-late svg-anchor-a"
+                        cx="4"
+                        cy="19"
+                        r="2.2"
+                        stroke="url(#g-vec)"
+                        stroke-width="1.5"
+                        fill="rgba(139, 92, 246, 0.30)"
+                      />
+                      <circle
+                        class="reveal-late svg-anchor-b"
+                        cx="20"
+                        cy="5"
+                        r="2.2"
+                        stroke="url(#g-vec)"
+                        stroke-width="1.5"
+                        fill="rgba(139, 92, 246, 0.30)"
+                      />
+                    </g>
+                    <defs>
+                      <linearGradient id="g-vec" x1="0%" y1="0%" x2="100%" y2="100%">
+                        <stop offset="0%" stop-color="#c4b5fd" />
+                        <stop offset="100%" stop-color="#7c3aed" />
+                      </linearGradient>
+                    </defs>
+                  </svg>
+                </div>
+                <span class="icon-label">SVG</span>
+              </div>
+            </div>
+          </div>
+
+          <!-- 4. GSAP — sine wave timeline with playhead marker -->
+          <div class="icon-pos icon-gsap">
+            <div class="icon-collapse">
+              <div class="icon-entry">
+                <div class="icon-tile">
+                  <svg class="icon-svg" viewBox="0 0 24 24" fill="none">
+                    <line
+                      x1="3"
+                      y1="20"
+                      x2="21"
+                      y2="20"
+                      stroke="url(#g-gsap)"
+                      stroke-width="1.2"
+                      stroke-linecap="round"
+                      opacity="0.4"
+                    />
+                    <path
+                      class="draw-100 gsap-wave-g"
+                      d="M3 12 C 7 5, 9 5, 12 12 C 15 19, 17 19, 21 12"
+                      stroke="url(#g-gsap)"
+                      stroke-width="2.2"
+                      stroke-linecap="round"
+                      stroke-linejoin="round"
+                      fill="none"
+                    />
+                    <circle class="reveal-late gsap-marker" cx="3" cy="12" r="2.2" fill="#c4b5fd" />
+                    <defs>
+                      <linearGradient id="g-gsap" x1="0%" y1="0%" x2="100%" y2="100%">
+                        <stop offset="0%" stop-color="#a78bfa" />
+                        <stop offset="100%" stop-color="#8b5cf6" />
+                      </linearGradient>
+                    </defs>
+                  </svg>
+                </div>
+                <span class="icon-label">GSAP</span>
+              </div>
+            </div>
+          </div>
+
+          <!-- 5. 3D — isometric cube with inner facet lines -->
+          <div class="icon-pos icon-three">
+            <div class="icon-collapse">
+              <div class="icon-entry">
+                <div class="icon-tile">
+                  <svg class="icon-svg" viewBox="0 0 24 24" fill="none">
+                    <g class="three-cube-g">
+                      <path
+                        class="draw-100"
+                        d="M12 3 L20 7 L20 17 L12 21 L4 17 L4 7 Z"
+                        stroke="url(#g-three)"
+                        stroke-width="2"
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                        fill="rgba(139, 92, 246, 0.24)"
+                      />
+                      <path
+                        class="reveal-late three-facet"
+                        d="M4 7 L12 11 L20 7 M12 11 L12 21"
+                        stroke="url(#g-three)"
+                        stroke-width="1.5"
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                      />
+                    </g>
+                    <defs>
+                      <linearGradient id="g-three" x1="0%" y1="0%" x2="100%" y2="100%">
+                        <stop offset="0%" stop-color="#c4b5fd" />
+                        <stop offset="100%" stop-color="#7c3aed" />
+                      </linearGradient>
+                    </defs>
+                  </svg>
+                </div>
+                <span class="icon-label">3D</span>
+              </div>
+            </div>
+          </div>
+
+          <!-- 6. LOTTIE — two diamond keyframes on a timeline -->
+          <div class="icon-pos icon-lottie">
+            <div class="icon-collapse">
+              <div class="icon-entry">
+                <div class="icon-tile">
+                  <svg class="icon-svg" viewBox="0 0 24 24" fill="none">
+                    <line
+                      x1="3"
+                      y1="12"
+                      x2="21"
+                      y2="12"
+                      stroke="url(#g-lottie)"
+                      stroke-width="1.2"
+                      stroke-linecap="round"
+                      opacity="0.4"
+                    />
+                    <path
+                      class="draw-50 lottie-kf-a"
+                      d="M8 8 L12 12 L8 16 L4 12 Z"
+                      stroke="url(#g-lottie)"
+                      stroke-width="2"
+                      stroke-linecap="round"
+                      stroke-linejoin="round"
+                      fill="rgba(139, 92, 246, 0.28)"
+                    />
+                    <path
+                      class="draw-50 lottie-kf-b"
+                      d="M16 8 L20 12 L16 16 L12 12 Z"
+                      stroke="url(#g-lottie)"
+                      stroke-width="2"
+                      stroke-linecap="round"
+                      stroke-linejoin="round"
+                      fill="rgba(139, 92, 246, 0.28)"
+                    />
+                    <defs>
+                      <linearGradient id="g-lottie" x1="0%" y1="0%" x2="100%" y2="100%">
+                        <stop offset="0%" stop-color="#a78bfa" />
+                        <stop offset="100%" stop-color="#8b5cf6" />
+                      </linearGradient>
+                    </defs>
+                  </svg>
+                </div>
+                <span class="icon-label">LOTTIE</span>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- ============================================================
+             CENTER CTA — Drop a video link · Get free clips
+             ============================================================ -->
+        <div class="cta">
+          <svg
+            class="cta-link-icon"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+          >
+            <path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71" />
+            <path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71" />
+          </svg>
+          <span class="cta-placeholder">Drop an HTML scene</span>
+          <div class="cta-button">Render</div>
+        </div>
+
+        <!-- ============================================================
+             RIPPLE — centered on the CTA's white button
+             ============================================================ -->
+        <div class="ripple"></div>
+
+        <!-- ============================================================
+             CURSOR — starts off-screen-right with opacity: 0.
+             White fill + black stroke matches the scene-05 cursor SVG.
+             ============================================================ -->
+        <div class="cursor">
+          <svg width="28" height="28" viewBox="0 0 24 24" fill="none">
+            <path d="M5 3L19 12L12 13L9 20L5 3Z" fill="#fff" stroke="#000" stroke-width="1.5" />
+          </svg>
+        </div>
+
+        <!-- ============================================================
+             DEMO — appears from the collapse point in Phase 4
+             ============================================================ -->
+        <div class="demo">
+          <div class="demo-play">
+            <svg viewBox="0 0 24 24" fill="currentColor">
+              <path d="M8 5v14l11-7L8 5z" />
+            </svg>
+          </div>
+          <span class="demo-label">HyperFrames · MP4 ready</span>
+        </div>
+
+        <!-- ============================================================
+             TITLE
+             ============================================================ -->
+        <div class="title"><span class="title-brand">HyperFrames</span> renders any scene</div>
+
+        <div class="vignette"></div>
+      </div>
+    </div>
+
+    <script>
+      window.__timelines = window.__timelines || {};
+      const tl = gsap.timeline({ paused: true });
+
+      /* ============================================================
+         CONSTANTS
+         ============================================================ */
+      const W = 1920,
+        H = 1080;
+      const CENTER_X = W / 2;
+      const CENTER_Y = H / 2;
+
+      const RADIUS_X = 480;
+      const RADIUS_Y = 280;
+      const ORBIT_SPEED = 0.25; // radians per second
+
+      // Six HyperFrames technologies arranged around the central CTA —
+      // each represents something you'd actually drop into a
+      // HyperFrames composition (markup, styling, vector graphics,
+      // animation engines, 3D, or animated assets).
+      //
+      // drawLen — the .draw-N class present on this icon's outline.
+      //   The stroke-draw tween pulls strokeDashoffset from N to 0.
+      //   When an icon has multiple .draw-N paths sharing the same N
+      //   (HTML's two brackets, LOTTIE's two diamonds), one selector
+      //   targets both and they draw in unison.
+      // hasReveal — whether this icon has .reveal-late inner accents
+      //   to fade in late via stagger. LOTTIE has none (both diamonds
+      //   are stroke-drawn, no extra accent).
+      const ICONS = [
+        {
+          sel: ".icon-html",
+          initialAngle: (0 * Math.PI) / 3,
+          entryDelay: 0.0,
+          drawLen: 50,
+          hasReveal: true,
+        },
+        {
+          sel: ".icon-css",
+          initialAngle: (1 * Math.PI) / 3,
+          entryDelay: 0.1,
+          drawLen: 100,
+          hasReveal: true,
+        },
+        {
+          sel: ".icon-vector",
+          initialAngle: (2 * Math.PI) / 3,
+          entryDelay: 0.2,
+          drawLen: 100,
+          hasReveal: true,
+        },
+        {
+          sel: ".icon-gsap",
+          initialAngle: (3 * Math.PI) / 3,
+          entryDelay: 0.3,
+          drawLen: 100,
+          hasReveal: true,
+        },
+        {
+          sel: ".icon-three",
+          initialAngle: (4 * Math.PI) / 3,
+          entryDelay: 0.4,
+          drawLen: 100,
+          hasReveal: true,
+        },
+        {
+          sel: ".icon-lottie",
+          initialAngle: (5 * Math.PI) / 3,
+          entryDelay: 0.5,
+          drawLen: 50,
+          hasReveal: false,
+        },
+      ];
+
+      const ENTRY_DUR = 0.55;
+      const TITLE_AT = 0.2;
+      const CURSOR_AT = 1.5;
+      const CURSOR_MOVE = 0.5;
+      const CLICK_AT = 2.2;
+      const COLLAPSE_DUR = 0.85;
+      const DEMO_AT = 2.95;
+      const DEMO_DUR = 0.8;
+      const IDLE_START = 3.95;
+      const TOTAL = 6.5;
+
+      const COLLAPSE_EASE = gsap.parseEase("back.out(1.6)");
+      const ORBIT_END = DEMO_AT;
+
+      const CURSOR_START_X = W + 100;
+      const CURSOR_START_Y = H * 0.85;
+      const CURSOR_TARGET_X = CENTER_X + 130; // over the white button
+      const CURSOR_TARGET_Y = CENTER_Y + 15;
+
+      /* ============================================================
+         INITIAL STATE — embedded as tl.set calls at t=0 so the lint
+         can reason about them as timeline operations rather than
+         as overlapping zero-duration tweens.
+         ============================================================ */
+      tl.set(".icon-entry", { rotateX: 90, rotateY: -45, z: -100, scale: 0, opacity: 0 }, 0);
+      tl.set(".cursor", { x: CURSOR_START_X, y: CURSOR_START_Y, opacity: 0 }, 0);
+      tl.set(".ripple", { scale: 0.3, opacity: 0 }, 0);
+      // CTA: GSAP-driven centering + 3D entry start state.
+      tl.set(".cta", { xPercent: -50, yPercent: -50, rotateY: -90, scale: 0.7, opacity: 0 }, 0);
+      tl.set(".demo", { scale: 0, rotateY: 90, opacity: 0 }, 0);
+
+      /* ============================================================
+         TITLE — slides down and fades in early.
+         xPercent: -50 replaces CSS `transform: translateX(-50%)` so GSAP's
+         tween of `y` doesn't overwrite the centering transform. fromTo is
+         linter-exempt from the CSS-transform-conflict rule and bakes in the
+         start state explicitly.
+         ============================================================ */
+      tl.fromTo(
+        ".title",
+        { xPercent: -50, y: -30, opacity: 0 },
+        { xPercent: -50, y: 0, opacity: 1, duration: 0.6, ease: "back.out(1.4)" },
+        TITLE_AT,
+      );
+
+      /* ============================================================
+         CTA — 3D flip entry. rotateY -90° → 0° spins the card in from
+         the right; opacity + scale ease it forward at the same time.
+         xPercent/yPercent set at t=0 keep it centered while GSAP owns
+         the transform.
+         ============================================================ */
+      tl.to(
+        ".cta",
+        { rotateY: 0, scale: 1, opacity: 1, duration: 0.75, ease: "back.out(1.4)" },
+        0.3,
+      );
+
+      // Subtle Y-axis tilt while the CTA is idle waiting for the click.
+      // Half-cycle 0.9s, repeats yoyo until just before CLICK_AT.
+      tl.to(".cta", { rotateY: 5, duration: 0.9, ease: "sine.inOut", yoyo: true, repeat: 1 }, 1.05);
+
+      /* ============================================================
+         PHASE 1: 3D flip entry per icon
+         ============================================================ */
+      ICONS.forEach(({ sel, entryDelay }) => {
+        tl.fromTo(
+          `${sel} .icon-entry`,
+          { rotateX: 90, rotateY: -45, z: -100, scale: 0, opacity: 0 },
+          {
+            rotateX: 0,
+            rotateY: 0,
+            z: 0,
+            scale: 1,
+            opacity: 1,
+            duration: ENTRY_DUR,
+            ease: "back.out(1.4)",
+          },
+          entryDelay,
+        );
+      });
+
+      /* ============================================================
+         PHASE 1b: SVG stroke-draw per icon
+         Each icon has one .draw-N class on its outline path. CSS
+         preset the dasharray/dashoffset to N (path hidden); this
+         tween pulls the offset to 0, drawing the path along its
+         length. power2.out front-loads the reveal so the stroke
+         is mostly visible by the time the 3D flip settles.
+         ============================================================ */
+      ICONS.forEach(({ sel, entryDelay, drawLen }) => {
+        tl.fromTo(
+          `${sel} .draw-${drawLen}`,
+          { strokeDashoffset: drawLen },
+          { strokeDashoffset: 0, duration: ENTRY_DUR + 0.1, ease: "power2.out" },
+          entryDelay,
+        );
+      });
+
+      /* ============================================================
+         PHASE 1c: Stagger reveal for inner accent elements
+         (music notes, gaming d-pad, vlog play triangle, podcast
+         base lines). Preset to opacity 0 via .reveal-late; this
+         tween fades siblings in with a 0.10s stagger so the icon
+         "completes itself" after its outline is drawn.
+         Skipped for education/sports — they have no inner accents.
+         ============================================================ */
+      ICONS.forEach(({ sel, entryDelay, hasReveal }) => {
+        if (!hasReveal) return;
+        tl.fromTo(
+          `${sel} .reveal-late`,
+          { opacity: 0 },
+          { opacity: 1, duration: 0.3, ease: "power2.out", stagger: 0.1 },
+          entryDelay + 0.3,
+        );
+      });
+
+      /* ============================================================
+         PHASE 1 + 3: Master orbit + collapse engine
+         Single onUpdate spans from t=0 to ORBIT_END. Reads tl.time()
+         and computes:
+           - orbit angle per icon (relative to its entryDelay)
+           - collapse driver (eased fraction of CLICK_AT → CLICK_AT+COLLAPSE_DUR)
+         Writes x/y to .icon-pos and scale/opacity to .icon-collapse.
+         ============================================================ */
+      tl.to(
+        { tick: 0 },
+        {
+          tick: 1,
+          duration: ORBIT_END,
+          ease: "none",
+          onUpdate: () => {
+            const t = tl.time();
+            const collapseLinear = Math.max(0, Math.min(1, (t - CLICK_AT) / COLLAPSE_DUR));
+            const collapseEased = COLLAPSE_EASE(collapseLinear);
+            const radiusFactor = 1 - collapseEased;
+            const collapseScale = 1 - collapseEased * 0.5;
+
+            // Two-segment opacity envelope: 1 at 0, 0.5 at 0.8, 0 at 1
+            const o = collapseEased;
+            const collapseOpacity = o < 0.8 ? 1 - o * 0.625 : (0.5 * (1 - o)) / 0.2;
+
+            ICONS.forEach(({ sel, initialAngle, entryDelay }, i) => {
+              const localT = Math.max(0, t - entryDelay);
+              const angle = initialAngle + localT * ORBIT_SPEED;
+              const x = Math.cos(angle) * RADIUS_X * radiusFactor;
+              const y = Math.sin(angle) * RADIUS_Y * radiusFactor;
+
+              // Per-icon idle wobble — phased per index so the ring
+              // doesn't pulse in sync. Damped by radiusFactor so the
+              // wobble relaxes as icons collapse to the center.
+              const floatY = Math.sin(t * 1.4 + i * 1.1) * 6 * radiusFactor;
+              const floatRot = Math.sin(t * 1.1 + i * 1.7) * 2.5 * radiusFactor;
+
+              gsap.set(`${sel}.icon-pos`, { x, y: y + floatY });
+              gsap.set(`${sel} .icon-collapse`, {
+                scale: collapseScale,
+                opacity: collapseOpacity,
+                rotation: floatRot,
+              });
+            });
+          },
+        },
+        0,
+      );
+
+      /* ============================================================
+         PHASE 2: Cursor enters, slides to CTA, clicks
+         ============================================================ */
+      // Fade in
+      tl.to(".cursor", { opacity: 1, duration: 0.1, ease: "none" }, CURSOR_AT);
+
+      // Slide to CTA button
+      tl.to(
+        ".cursor",
+        { x: CURSOR_TARGET_X, y: CURSOR_TARGET_Y, duration: CURSOR_MOVE, ease: "back.out(1.3)" },
+        CURSOR_AT,
+      );
+
+      // Click depression — cursor + button compress, then recover
+      tl.to(".cursor", { scale: 0.85, duration: 0.08, ease: "power2.out" }, CLICK_AT);
+      tl.to(".cursor", { scale: 1, duration: 0.18, ease: "back.out(1.6)" }, CLICK_AT + 0.08);
+      tl.to(".cta-button", { scale: 0.95, duration: 0.08, ease: "power2.out" }, CLICK_AT);
+      tl.to(".cta-button", { scale: 1, duration: 0.18, ease: "back.out(1.6)" }, CLICK_AT + 0.08);
+
+      // Button glow pulse during click
+      tl.fromTo(
+        ".cta-button",
+        { boxShadow: "0 0 0 rgba(255,255,255,0)" },
+        { boxShadow: "0 0 40px rgba(255,255,255,0.7)", duration: 0.2, ease: "power2.out" },
+        CLICK_AT,
+      );
+      tl.to(
+        ".cta-button",
+        { boxShadow: "0 0 0 rgba(255,255,255,0)", duration: 0.4, ease: "power2.in" },
+        CLICK_AT + 0.2,
+      );
+
+      // Ripple — attack-decay envelope via keyframes
+      tl.to(
+        ".ripple",
+        {
+          duration: 0.7,
+          keyframes: {
+            "0%": { scale: 0.3, opacity: 0 },
+            "20%": { opacity: 0.7 },
+            "100%": { scale: 5.0, opacity: 0 },
+            easeEach: "power2.out",
+          },
+        },
+        CLICK_AT,
+      );
+
+      /* ============================================================
+         PHASE 4: Demo springs out of the collapse point
+         ============================================================ */
+      tl.fromTo(
+        ".demo",
+        { scale: 0, rotateY: 90, opacity: 0 },
+        { scale: 1, rotateY: 0, opacity: 1, duration: DEMO_DUR, ease: "back.out(1.6)" },
+        DEMO_AT,
+      );
+
+      // CTA fades out as the demo emerges — the click's "result" replaces the action target.
+      tl.to(".cta", { opacity: 0, duration: 0.3, ease: "power2.in" }, DEMO_AT - 0.05);
+
+      // Cursor exits with the CTA
+      tl.to(".cursor", { opacity: 0, duration: 0.3, ease: "power2.in" }, DEMO_AT);
+
+      /* ============================================================
+         PHASE 5: Demo floats with finite-yoyo breathing
+         ============================================================ */
+      const HALF_CYCLE = 1.1;
+      const remaining = TOTAL - IDLE_START;
+      const halfCycles = Math.max(0, Math.floor(remaining / HALF_CYCLE) - 1);
+
+      tl.fromTo(
+        ".demo",
+        { y: 0, rotation: 0, rotateY: 0, rotateX: 0 },
+        {
+          y: -8,
+          rotation: 1,
+          rotateY: 6,
+          rotateX: -2,
+          duration: HALF_CYCLE,
+          ease: "sine.inOut",
+          yoyo: true,
+          repeat: halfCycles,
+        },
+        IDLE_START,
+      );
+
+      /* ============================================================
+         CONTINUOUS INTERNAL SVG ENRICHMENT
+         Shared scene-ticker — one onUpdate writes all per-SVG motions.
+         Gated per-icon by its entryDelay so a hidden icon doesn't pay
+         the cost (still cheap, but cleaner intent).
+         ============================================================ */
+      const htmlBrackets = document.querySelector(".html-brackets-g");
+      const cssDotA = document.querySelector(".css-dot-a");
+      const cssDotB = document.querySelector(".css-dot-b");
+      const cssDotC = document.querySelector(".css-dot-c");
+      const svgCurve = document.querySelector(".svg-curve-g");
+      const gsapMarker = document.querySelector(".gsap-marker");
+      const gsapWave = document.querySelector(".gsap-wave-g");
+      const threeCube = document.querySelector(".three-cube-g");
+      const lottieKfA = document.querySelector(".lottie-kf-a");
+      const lottieKfB = document.querySelector(".lottie-kf-b");
+
+      tl.to(
+        { tick2: 0 },
+        {
+          tick2: 1,
+          duration: TOTAL,
+          ease: "none",
+          onUpdate: () => {
+            const t = tl.time();
+
+            // HTML brackets — tiny horizontal sway, like a typing cursor
+            const htmlT = t - 0.0;
+            if (htmlT > 0) {
+              gsap.set(htmlBrackets, { x: Math.sin(htmlT * 3.5) * 0.6 });
+            }
+
+            // CSS swatches — three dots scale-pulse with phase offsets
+            const cssT = t - 0.1;
+            if (cssT > 0) {
+              gsap.set(cssDotA, { scale: 0.85 + Math.sin(cssT * 5.5) * 0.18 });
+              gsap.set(cssDotB, { scale: 0.85 + Math.sin(cssT * 5.5 + 1.4) * 0.18 });
+              gsap.set(cssDotC, { scale: 0.85 + Math.sin(cssT * 5.5 + 2.8) * 0.18 });
+            }
+
+            // SVG bezier — whole curve group gently rotates back and forth
+            const vecT = t - 0.2;
+            if (vecT > 0) {
+              gsap.set(svgCurve, { rotation: Math.sin(vecT * 2.2) * 5 });
+            }
+
+            // GSAP timeline — playhead marker slides along the wave +
+            // the wave itself flexes vertically (amplitude pulse).
+            const gsapT = t - 0.3;
+            if (gsapT > 0) {
+              // marker traverses 0 → 18 viewBox units left-to-right
+              const markerX = (Math.sin(gsapT * 1.4 - Math.PI / 2) + 1) * 9;
+              gsap.set(gsapMarker, { x: markerX });
+              gsap.set(gsapWave, { scaleY: 1 + Math.sin(gsapT * 2.5) * 0.12 });
+            }
+
+            // 3D cube — slow continuous tumble (replaces sports-ball spin)
+            const threeT = t - 0.4;
+            if (threeT > 0) {
+              gsap.set(threeCube, { rotation: threeT * 30 });
+            }
+
+            // LOTTIE keyframes — two diamonds scale-pulse out of phase
+            const lottieT = t - 0.5;
+            if (lottieT > 0) {
+              gsap.set(lottieKfA, { scale: 1 + Math.sin(lottieT * 2.8) * 0.12 });
+              gsap.set(lottieKfB, { scale: 1 + Math.sin(lottieT * 2.8 + 1.6) * 0.12 });
+            }
+
+            // ====== ENHANCEMENT: per-icon tile glow pulse ======
+            // The tile's violet halo breathes throughout the orbit;
+            // each icon is phased by its index so the ring shimmers
+            // rather than pulses in unison. Only while the icons are
+            // still on screen (before they finish collapsing).
+            // Colors mirror scene-05: COLORS.brand.purple (#8b5cf6) +
+            // a softer rgba violet halo.
+            if (t < DEMO_AT) {
+              ICONS.forEach(({ sel }, i) => {
+                const glow = 32 + Math.sin(t * 1.3 + i * 0.95) * 16;
+                gsap.set(`${sel} .icon-tile`, {
+                  boxShadow:
+                    "0 15px 40px rgba(0, 0, 0, 0.35), " +
+                    "0 0 " +
+                    glow +
+                    "px rgba(139, 92, 246, 0.65), " +
+                    "0 0 " +
+                    glow * 2 +
+                    "px rgba(124, 58, 237, 0.28), " +
+                    "inset 0 1px 0 rgba(255, 255, 255, 0.1)",
+                });
+              });
+            }
+
+            // ====== ENHANCEMENT: CTA idle breathing (pre-click) ======
+            // Soft violet aura pulses around the CTA card to invite
+            // the click. Frozen at click time; the CTA fades out at
+            // DEMO_AT - 0.05 so the static end-state never shows.
+            if (t < CLICK_AT) {
+              const ctaGlow = 70 + Math.sin(t * 2.6) * 30;
+              gsap.set(".cta", {
+                boxShadow:
+                  "0 40px 80px rgba(0, 0, 0, 0.5), " +
+                  "0 0 " +
+                  ctaGlow +
+                  "px rgba(139, 92, 246, 0.7), " +
+                  "0 0 " +
+                  ctaGlow * 2 +
+                  "px rgba(124, 58, 237, 0.32), " +
+                  "inset 0 1px 0 rgba(255, 255, 255, 0.1)",
+              });
+            }
+
+            // ====== ENHANCEMENT: demo glow pulse (post-emerge) ======
+            // Once the demo card has sprung out, its violet aura
+            // breathes in time with its yoyo float, giving the
+            // "result" element a living idle state.
+            if (t > DEMO_AT) {
+              const demoT = t - DEMO_AT;
+              const demoGlow = 90 + Math.sin(demoT * 1.9) * 36;
+              gsap.set(".demo", {
+                boxShadow:
+                  "0 50px 100px rgba(0, 0, 0, 0.5), " +
+                  "0 0 " +
+                  demoGlow +
+                  "px rgba(139, 92, 246, 0.7), " +
+                  "0 0 " +
+                  demoGlow +
+                  "px rgba(124, 58, 237, 0.42), " +
+                  "inset 0 1px 0 rgba(255, 255, 255, 0.1)",
+              });
+            }
+          },
+        },
+        0,
+      );
+
+      window.__timelines["main"] = tl;
+    </script>
+  </body>
+</html>
diff --git a/.claude/skills-media/hyperframes-animation/examples/demo-page-scroll-spotlight.html b/.claude/skills-media/hyperframes-animation/examples/demo-page-scroll-spotlight.html
new file mode 100644
index 000000000..4557db48d
--- /dev/null
+++ b/.claude/skills-media/hyperframes-animation/examples/demo-page-scroll-spotlight.html
@@ -0,0 +1,759 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Scene 04 — Contextual Product Showcase</title>
+
+    <!--
+      HyperFrames composition.tsx.
+
+      Choreography (4 phases, 9 seconds total):
+        0.00 – 0.80s   3D-tilted page card scales 0.95 → 1.0
+                       Navbar / title / CTA fade in (staggered)
+        0.12 – 2.80s   Title keywords glow synced to ASR words:
+                         "1" "long" "video" "10" "viral" "clips"
+        3.08 – 4.08s   Page content scrolls up 280 px (programmatic scroll feel)
+                       Carousel section fades in + scales from 0.9
+        3.58 – 8.84s   Main video pops forward in 3D (translateZ 80 px) + scales up
+                       Radial spotlight dims the surroundings; decays at end
+          (attack 0→1 then decay 1→REST_LEVEL). All visual effects (color,
+          text-shadow, scale) derive from --glow via CSS calc()
+        - Pop-target uses the same --glow pattern; translateZ + scale derived
+        - Spotlight is a separate overlay with simple opacity tween
+        - Video placeholders are colored divs (no asset files needed)
+        - Tilt is static CSS, never tweened
+    -->
+
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+
+    <style>
+      :root {
+        --page-bg: #0a0a0f;
+        --text-primary: #ffffff;
+        --text-secondary: #a1a1aa;
+        --accent: #edcb50;
+        --input-bg: #1a1a1f;
+        --green: #22c55e;
+      }
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        margin: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: #000;
+        font-family:
+          "Inter",
+          system-ui,
+          -apple-system,
+          sans-serif;
+        color: var(--text-primary);
+      }
+
+      /* ============================================================
+         BACKGROUND
+         ============================================================ */
+      .bg {
+        position: absolute;
+        inset: 0;
+        background:
+          radial-gradient(
+            ellipse 100% 60% at 50% -10%,
+            rgba(100, 100, 150, 0.08) 0%,
+            transparent 60%
+          ),
+          var(--page-bg);
+      }
+
+      /* ============================================================
+         3D PERSPECTIVE + TILTED CARD
+         ============================================================ */
+      .perspective-wrap {
+        position: absolute;
+        inset: 0;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        perspective: 1200px;
+      }
+      .page-card {
+        width: 92%;
+        height: 88%;
+        background-color: var(--page-bg);
+        border-radius: 20px;
+        overflow: hidden;
+        transform-style: preserve-3d;
+        /* tilt + initial scale set by gsap.set() below so subsequent tweens preserve them */
+        box-shadow:
+          -30px 30px 60px rgba(0, 0, 0, 0.4),
+          -15px 15px 30px rgba(0, 0, 0, 0.3),
+          0 0 80px rgba(0, 0, 0, 0.2);
+        border: 1px solid rgba(255, 255, 255, 0.1);
+        position: relative;
+      }
+
+      /* ============================================================
+         NAVBAR (sticks to top of card; NOT inside scroll content)
+         ============================================================ */
+      .page-navbar {
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        height: 72px;
+        padding: 0 48px;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        z-index: 100;
+        opacity: 0; /* GSAP fades in */
+        background: linear-gradient(to bottom, rgba(10, 10, 15, 0.95), rgba(10, 10, 15, 0.6));
+      }
+      .nav-left {
+        display: flex;
+        align-items: center;
+        gap: 10px;
+      }
+      .nav-logo {
+        width: 32px;
+        height: 32px;
+        color: var(--text-primary);
+      }
+      .nav-brand {
+        font-size: 20px;
+        font-weight: 600;
+        letter-spacing: -0.5px;
+      }
+      .nav-center {
+        display: flex;
+        align-items: center;
+        gap: 28px;
+      }
+      .nav-item {
+        font-size: 14px;
+        font-weight: 500;
+        color: var(--text-secondary);
+        display: flex;
+        align-items: center;
+      }
+      .nav-item .chev {
+        margin-left: 4px;
+        font-size: 10px;
+      }
+      .nav-tag {
+        font-size: 10px;
+        background: var(--green);
+        color: #fff;
+        padding: 2px 6px;
+        border-radius: 4px;
+        font-weight: 600;
+        margin-right: 6px;
+      }
+      .nav-right {
+        display: flex;
+        align-items: center;
+        gap: 12px;
+      }
+      .nav-signin {
+        padding: 8px 16px;
+        border: 1px solid rgba(255, 255, 255, 0.2);
+        border-radius: 8px;
+        color: var(--text-primary);
+        font-size: 14px;
+        font-weight: 500;
+      }
+      .nav-signup {
+        padding: 8px 16px;
+        background: var(--accent);
+        border-radius: 8px;
+        color: var(--page-bg);
+        font-size: 14px;
+        font-weight: 600;
+      }
+
+      /* ============================================================
+         SCROLL CONTENT — GSAP tweens its y
+         ============================================================ */
+      .scroll-content {
+        padding-top: 140px;
+        padding-bottom: 60px;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        will-change: transform;
+      }
+
+      /* ============================================================
+         HERO SECTION
+         ============================================================ */
+      .hero {
+        text-align: center;
+        max-width: 1200px;
+        width: 90%;
+        opacity: 0; /* GSAP fades in */
+      }
+      .hero-eyebrow {
+        font-size: 14px;
+        color: var(--accent);
+        text-transform: uppercase;
+        letter-spacing: 2px;
+        margin-bottom: 24px;
+        font-weight: 600;
+      }
+      .hero-title {
+        font-size: 64px;
+        font-weight: 700;
+        line-height: 1.1;
+        letter-spacing: -1px;
+      }
+      .hero-sub {
+        font-size: 20px;
+        color: rgba(255, 255, 255, 0.6);
+        margin-top: 24px;
+        font-weight: 400;
+        line-height: 1.5;
+        max-width: 800px;
+        margin-left: auto;
+        margin-right: auto;
+      }
+
+      /* ============================================================
+         KEYWORD GLOW — all derived from --glow CSS custom property
+         ============================================================ */
+      .kw {
+        --glow: 0;
+        display: inline-block;
+        position: relative;
+        z-index: 0;
+        padding: 0 0.015em;
+        color: rgb(
+          calc(255 - var(--glow) * 18) calc(255 - var(--glow) * 30) calc(255 - var(--glow) * 150)
+        );
+        text-shadow:
+          0 0 calc(var(--glow) * 10px) rgba(255, 235, 120, calc(var(--glow) * 0.95)),
+          0 0 calc(var(--glow) * 24px) rgba(237, 203, 80, calc(var(--glow) * 0.78)),
+          0 0 calc(var(--glow) * 44px) rgba(237, 203, 80, calc(var(--glow) * 0.38));
+        transform: scale(calc(1 + var(--glow) * 0.035));
+      }
+      .kw::before {
+        content: "";
+        position: absolute;
+        left: -0.025em;
+        right: -0.025em;
+        top: 0.08em;
+        bottom: 0.05em;
+        z-index: -1;
+        border-radius: 0.16em;
+        background: linear-gradient(
+          90deg,
+          rgba(237, 203, 80, 0.08),
+          rgba(255, 222, 80, 0.72),
+          rgba(237, 203, 80, 0.12)
+        );
+        opacity: calc(var(--glow) * 0.78);
+        transform: scaleX(calc(0.72 + var(--glow) * 0.24)) skewX(-5deg);
+        transform-origin: left center;
+        box-shadow:
+          0 0 calc(var(--glow) * 14px) rgba(237, 203, 80, calc(var(--glow) * 0.7)),
+          0 0 calc(var(--glow) * 28px) rgba(237, 203, 80, calc(var(--glow) * 0.32));
+      }
+
+      /* ============================================================
+         CTA INPUT ROW
+         ============================================================ */
+      .cta-row {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        gap: 16px;
+        margin-top: 36px;
+        opacity: 0; /* GSAP fades in */
+      }
+      .cta-input {
+        display: flex;
+        align-items: center;
+        background: var(--input-bg);
+        border-radius: 28px;
+        padding: 6px 6px 6px 18px;
+        gap: 12px;
+      }
+      .cta-link-icon {
+        width: 16px;
+        height: 16px;
+        color: rgba(255, 255, 255, 0.4);
+      }
+      .cta-placeholder {
+        font-size: 14px;
+        color: rgba(255, 255, 255, 0.4);
+        min-width: 130px;
+      }
+      .cta-button {
+        padding: 12px 24px;
+        background: #fff;
+        border-radius: 22px;
+        color: var(--page-bg);
+        font-size: 14px;
+        font-weight: 600;
+      }
+      .cta-or {
+        color: rgba(255, 255, 255, 0.4);
+        font-size: 14px;
+      }
+      .cta-upload {
+        padding: 12px 24px;
+        border: 1px solid rgba(255, 255, 255, 0.2);
+        border-radius: 22px;
+        color: var(--text-primary);
+        font-size: 14px;
+        font-weight: 500;
+      }
+
+      /* ============================================================
+         VIDEO CAROUSEL (Phase 2 entry, Phase 4 pop-out)
+         ============================================================ */
+      .carousel-wrap {
+        opacity: 0; /* GSAP fades in */
+        transform: scale(0.9); /* GSAP scales to 1 */
+        transform-origin: center top;
+        margin-top: 48px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        gap: 20px;
+        width: 100%;
+        max-width: 1400px;
+        padding: 0 20px;
+        perspective: 800px;
+        transform-style: preserve-3d;
+      }
+      .carousel-arrow {
+        width: 44px;
+        height: 44px;
+        border-radius: 50%;
+        background: rgba(60, 60, 65, 0.8);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        color: #fff;
+        flex-shrink: 0;
+        font-size: 24px;
+        font-weight: 300;
+      }
+
+      /* Main video — Phase 4 pop-out target */
+      .carousel-main {
+        --glow: 0;
+        width: 720px;
+        height: 420px;
+        background: var(--input-bg);
+        border-radius: 16px;
+        position: relative;
+        overflow: hidden;
+        flex-shrink: 0;
+        transform-style: preserve-3d;
+        transform: translateZ(calc(var(--glow) * 80px)) scale(calc(1 + var(--glow) * 0.15));
+        box-shadow:
+          0 0 calc(var(--glow) * 25px) rgba(237, 203, 80, calc(var(--glow) * 0.7)),
+          0 0 calc(var(--glow) * 50px) rgba(237, 203, 80, calc(var(--glow) * 0.4)),
+          0 calc(20px + var(--glow) * 40px) calc(60px + var(--glow) * 40px)
+            rgba(0, 0, 0, calc(0.6 + var(--glow) * 0.2));
+        border: 3px solid rgba(237, 203, 80, calc(var(--glow) * 0.8));
+        z-index: 200;
+      }
+      .carousel-main-placeholder {
+        position: absolute;
+        inset: 0;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 28px;
+        font-weight: 600;
+        color: rgba(255, 255, 255, 0.5);
+        background: linear-gradient(135deg, #1a2540 0%, #3d2a4f 50%, #4f1d2e 100%);
+      }
+      .carousel-main-placeholder span {
+        background: rgba(0, 0, 0, 0.4);
+        padding: 8px 20px;
+        border-radius: 8px;
+      }
+
+      /* Side panel */
+      .carousel-side {
+        width: 420px;
+        height: 280px;
+        background: var(--input-bg);
+        border-radius: 16px;
+        position: relative;
+        overflow: hidden;
+        flex-shrink: 0;
+      }
+      .carousel-side-placeholder {
+        position: absolute;
+        inset: 0;
+        background: linear-gradient(135deg, #2a3550 0%, #4a3a5a 100%);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 18px;
+        font-weight: 600;
+        color: rgba(255, 255, 255, 0.5);
+      }
+      .presets-stack {
+        position: absolute;
+        top: 16px;
+        right: 16px;
+        display: flex;
+        flex-direction: column;
+        gap: 8px;
+        z-index: 5;
+      }
+      .preset-label {
+        padding: 8px 14px;
+        background: rgba(255, 255, 255, 0.12);
+        border-radius: 8px;
+        color: rgba(255, 255, 255, 0.8);
+        font-size: 12px;
+        font-weight: 500;
+      }
+      .preset-tile {
+        width: 44px;
+        height: 44px;
+        background: rgba(255, 255, 255, 0.08);
+        border-radius: 8px;
+        align-self: flex-end;
+      }
+
+      /* ============================================================
+         SPOTLIGHT OVERLAY (above page card, dims surroundings)
+         ============================================================ */
+      .spotlight {
+        position: absolute;
+        inset: 0;
+        background: radial-gradient(
+          ellipse 850px 550px at 40% 60%,
+          transparent 0%,
+          transparent 50%,
+          rgba(0, 0, 0, 0.65) 100%
+        );
+        pointer-events: none;
+        opacity: 0; /* GSAP fades in during Phase 4 */
+        z-index: 150;
+      }
+
+      /* ============================================================
+         VIGNETTE
+         ============================================================ */
+      .vignette {
+        position: absolute;
+        inset: 0;
+        background: radial-gradient(ellipse at center, transparent 50%, rgba(0, 0, 0, 0.3) 100%);
+        pointer-events: none;
+        z-index: 400;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="main"
+      data-start="0"
+      data-duration="9"
+      data-width="1920"
+      data-height="1080"
+    >
+      <div class="bg"></div>
+
+      <div class="perspective-wrap">
+        <div
+          class="page-card clip"
+          data-start="0"
+          data-duration="9"
+          data-track-index="1"
+          id="page-card"
+        >
+          <!-- Navbar (anchored to card top) -->
+          <nav class="page-navbar" id="navbar">
+            <div class="nav-left">
+              <svg
+                class="nav-logo"
+                viewBox="0 0 24 24"
+                fill="none"
+                xmlns="http://www.w3.org/2000/svg"
+                aria-hidden="true"
+              >
+                <path
+                  fill="currentColor"
+                  d="M11.954 3.817c-4.49 0-8.132 3.644-8.152 8.146v12H0V12C0 5.373 5.352 0 11.954 0s11.953 5.373 11.953 12-5.351 12-11.953 12a12 12 0 0 1-1.718-.123v-3.876q.831.181 1.718.182c4.502 0 8.152-3.663 8.152-8.183s-3.65-8.183-8.152-8.183"
+                />
+                <path
+                  fill="currentColor"
+                  d="M5.118 24V11.995c0-3.79 3.062-6.857 6.836-6.857 3.773 0 6.836 3.068 6.836 6.857s-3.063 6.857-6.836 6.857c-.594 0-1.17-.076-1.718-.218V14.5c.488.337 1.08.534 1.718.534a3.037 3.037 0 0 0 3.034-3.04 3.037 3.037 0 0 0-3.034-3.04 3.037 3.037 0 0 0-3.034 3.008V24z"
+                />
+              </svg>
+              <span class="nav-brand">OpusClip</span>
+            </div>
+            <div class="nav-center">
+              <span class="nav-item">Features<span class="chev">▾</span></span>
+              <span class="nav-item">Solutions<span class="chev">▾</span></span>
+              <span class="nav-item">Resources<span class="chev">▾</span></span>
+              <span class="nav-item">Pricing</span>
+              <span class="nav-item">For business<span class="chev">▾</span></span>
+              <span class="nav-item"><span class="nav-tag">New</span>Agent Opus</span>
+            </div>
+            <div class="nav-right">
+              <span class="nav-signin">Sign in</span>
+              <span class="nav-signup">Sign up - It's FREE</span>
+            </div>
+          </nav>
+
+          <!-- Scrollable content -->
+          <div class="scroll-content" id="scroll-content">
+            <div class="hero" id="hero">
+              <div class="hero-eyebrow">#1 AI VIDEO CLIPPING TOOL</div>
+              <h1 class="hero-title">
+                <span class="kw" data-glow-start="0.12" data-glow-end="0.28">1</span>
+                <span class="kw" data-glow-start="0.52" data-glow-end="0.72">long</span>
+                <span class="kw" data-glow-start="0.78" data-glow-end="1.44">video,</span>
+                <span class="kw" data-glow-start="1.48" data-glow-end="1.80">10</span>
+                <span class="kw" data-glow-start="1.94" data-glow-end="2.22">viral</span>
+                <span class="kw" data-glow-start="2.28" data-glow-end="2.80">clips.</span>
+                <br />Create 10x faster.
+              </h1>
+              <p class="hero-sub">
+                OpusClip turns long videos into shorts, and publishes them to all social platforms
+                in one click.
+              </p>
+            </div>
+
+            <div class="cta-row" id="cta-row">
+              <div class="cta-input">
+                <svg
+                  class="cta-link-icon"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-width="2"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  aria-hidden="true"
+                >
+                  <path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71" />
+                  <path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71" />
+                </svg>
+                <span class="cta-placeholder">Drop a video link</span>
+                <div class="cta-button">Get free clips</div>
+              </div>
+              <span class="cta-or">or</span>
+              <div class="cta-upload">Upload files</div>
+            </div>
+
+            <!-- Video carousel section -->
+            <div class="carousel-wrap" id="carousel">
+              <div class="carousel-arrow">‹</div>
+
+              <div class="carousel-main pop-target" id="pop-target">
+                <div class="carousel-main-placeholder">
+                  <span>Hero animation</span>
+                </div>
+              </div>
+
+              <div class="carousel-arrow">›</div>
+
+              <div class="carousel-side">
+                <div class="carousel-side-placeholder">Demo · reframe</div>
+                <div class="presets-stack">
+                  <div class="preset-label">Presets</div>
+                  <div class="preset-tile"></div>
+                  <div class="preset-tile"></div>
+                  <div class="preset-tile"></div>
+                  <div class="preset-tile"></div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <!-- /.scroll-content -->
+        </div>
+        <!-- /.page-card -->
+      </div>
+      <!-- /.perspective-wrap -->
+
+      <div class="spotlight" id="spotlight"></div>
+      <div class="vignette"></div>
+    </div>
+
+    <script>
+      /* ================================================================
+         TIMING — all in local seconds (scene starts at 0).
+         ASR timestamps are direct from the source, with SCENE_START = 16
+         subtracted to get local time.
+         ================================================================ */
+      const ASR = {
+        // Phase 2 title keywords
+        one: { start: 0.119, end: 0.279 },
+        long: { start: 0.52, end: 0.719 },
+        video: { start: 0.779, end: 1.44 },
+        ten: { start: 1.479, end: 1.799 },
+        viral: { start: 1.94, end: 2.219 },
+        clips: { start: 2.279, end: 2.8 },
+      };
+
+      const TIMING = {
+        // Phase 1: entry
+        cardEntryStart: 0.0,
+        cardEntryDur: 0.8,
+        navbarFadeAt: 0.0,
+        navbarFadeDur: 0.6,
+        titleFadeAt: 0.17,
+        titleFadeDur: 0.7,
+        ctaFadeAt: 0.5,
+        ctaFadeDur: 0.7,
+
+        // Phase 2: keyword glows handled per-element via data attrs
+
+        // Phase 3: scroll + carousel
+        phase2StartAt: 3.08,
+        scrollDur: 1.0,
+        scrollDistance: 280,
+        carouselFadeDur: 0.5,
+
+        // Phase 4: pop-out + spotlight
+        popStart: 3.58,
+        popAttackDur: 0.67, // ramp 0 → 1
+        popDecayDur: 0.33, // ramp 1 → 0.5 near end
+        popEnd: 8.84,
+        popRestLevel: 0.5,
+      };
+
+      const KEYWORD_REST_LEVEL = 0.14;
+      const KEYWORD_SUSTAIN = 0.5; // seconds after ASR end before decay completes
+
+      /* ================================================================
+         TIMELINE
+         ================================================================ */
+      window.__timelines = window.__timelines || {};
+      const tl = gsap.timeline({ paused: true });
+      window.__timelines["main"] = tl;
+
+      // Set the static 3D tilt + initial scale via GSAP so subsequent
+      // scale tweens preserve the rotation aliases. (If we left
+      // `transform: rotateY(...) rotateX(...) scale(0.95)` in CSS, a GSAP
+      // tween touching only `scale` could overwrite the full matrix and
+      // lose the rotation. Owning the transform state in GSAP avoids the
+      // problem entirely.)
+      gsap.set(".page-card", {
+        rotationY: -8,
+        rotationX: 3,
+        scale: 0.95,
+      });
+
+      /* ----------------------------------------------------------------
+         PHASE 1: Page card entry + navbar/title/CTA fade-in
+         ---------------------------------------------------------------- */
+      tl.to(
+        ".page-card",
+        { scale: 1.0, duration: TIMING.cardEntryDur, ease: "power2.out" },
+        TIMING.cardEntryStart,
+      );
+
+      tl.fromTo(
+        "#navbar",
+        { opacity: 0 },
+        { opacity: 1, duration: TIMING.navbarFadeDur, ease: "power2.out" },
+        TIMING.navbarFadeAt,
+      );
+
+      tl.fromTo(
+        "#hero",
+        { opacity: 0 },
+        { opacity: 1, duration: TIMING.titleFadeDur, ease: "power2.out" },
+        TIMING.titleFadeAt,
+      );
+
+      tl.fromTo(
+        "#cta-row",
+        { opacity: 0 },
+        { opacity: 1, duration: TIMING.ctaFadeDur, ease: "power2.out" },
+        TIMING.ctaFadeAt,
+      );
+
+      /* ----------------------------------------------------------------
+         PHASE 2: Keyword glows — two tweens per word.
+         Attack (0 → 1) + decay (1 → REST_LEVEL). GSAP holds REST forever.
+         ---------------------------------------------------------------- */
+      document.querySelectorAll(".kw").forEach((kw) => {
+        const start = Number(kw.dataset.glowStart);
+        const end = Number(kw.dataset.glowEnd);
+        const peak = start + (end - start) / 2;
+        const restAt = end + KEYWORD_SUSTAIN;
+
+        tl.fromTo(
+          kw,
+          { "--glow": 0 },
+          { "--glow": 1.18, duration: peak - start, ease: "power2.out" },
+          start,
+        );
+
+        tl.to(
+          kw,
+          { "--glow": KEYWORD_REST_LEVEL, duration: restAt - peak, ease: "power2.out" },
+          peak,
+        );
+      });
+
+      /* ----------------------------------------------------------------
+         PHASE 3: Scroll + carousel entry
+         ---------------------------------------------------------------- */
+      tl.fromTo(
+        "#scroll-content",
+        { y: 0 },
+        { y: -TIMING.scrollDistance, duration: TIMING.scrollDur, ease: "power2.inOut" },
+        TIMING.phase2StartAt,
+      );
+
+      tl.fromTo(
+        "#carousel",
+        { opacity: 0, scale: 0.9 },
+        { opacity: 1, scale: 1.0, duration: TIMING.carouselFadeDur, ease: "power2.out" },
+        TIMING.phase2StartAt,
+      );
+
+      /* ----------------------------------------------------------------
+         PHASE 4: Pop-out (driven by --glow on .carousel-main) + spotlight
+         ---------------------------------------------------------------- */
+      // Attack the pop-out glow.
+      tl.fromTo(
+        "#pop-target",
+        { "--glow": 0 },
+        { "--glow": 1, duration: TIMING.popAttackDur, ease: "power2.out" },
+        TIMING.popStart,
+      );
+
+      // Decay at the end of the scene (mirrors original phase2End-10 / phase2End ramp).
+      tl.to(
+        "#pop-target",
+        { "--glow": TIMING.popRestLevel, duration: TIMING.popDecayDur, ease: "power2.out" },
+        TIMING.popEnd - TIMING.popDecayDur,
+      );
+
+      // Spotlight fades in alongside the pop attack, decays with the pop.
+      tl.fromTo(
+        "#spotlight",
+        { opacity: 0 },
+        { opacity: 1, duration: 0.5, ease: "power2.out" },
+        TIMING.popStart,
+      );
+
+      tl.to(
+        "#spotlight",
+        { opacity: TIMING.popRestLevel, duration: TIMING.popDecayDur, ease: "power2.out" },
+        TIMING.popEnd - TIMING.popDecayDur,
+      );
+    </script>
+  </body>
+</html>
diff --git a/.claude/skills-media/hyperframes-animation/examples/hook-counter-burst.html b/.claude/skills-media/hyperframes-animation/examples/hook-counter-burst.html
new file mode 100644
index 000000000..7d2ae6f62
--- /dev/null
+++ b/.claude/skills-media/hyperframes-animation/examples/hook-counter-burst.html
@@ -0,0 +1,729 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Scene 01 — Counting Icon Burst</title>
+
+    <!--
+      HyperFrames composition.tsx.
+
+      Choreography (4 phases, 3.5 seconds total):
+        0.00 – 0.17s   Background visible with dark overlay; nothing else
+        0.17 – 0.57s   Four enriched icons enter staggered, clustered at startOffset 0.4
+                       (clock 0.17s · scissors 0.30s · video 0.43s · play 0.57s)
+        0.47 – 1.47s   Counter "0 → 90" with growing font size (0.20W → 0.42W);
+                       icons expand outward from 40% to 100% position
+        0.50 – 2.33s   Camera focus phase: scale 0.92 → 1.0
+        2.33 – 3.50s   Camera push phase: scale 1.0 → 1.08
+        1.27s          Percent symbol pops in with own spring
+
+      Continuous motion (running from t=0, gated by icon visibility):
+        Clock minute hand: linear rotation 420° over 3.5s
+        Scissors: ±15° sine oscillation, period ~1.7s
+        Cutting line: stroke-dashoffset drifts -200 over 3.5s
+        Video record dot: opacity + scale phase-offset sine pulses
+        Play triangle: scale pulse ±8%, period ~2.6s
+          ease + duration (no shared driver needed, just identical timing)
+        - Counter text + number scale are emitted as seek-safe timeline keyframes
+        - Background: local Pexels MP4 plus dark overlay
+        - Per-icon entry uses GSAP fromTo on a nested .icon-entry wrapper
+          so it never overwrites the .icon-pos expansion tween
+    -->
+
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+
+    <style>
+      :root {
+        --bg-dark: #060812;
+        --text-primary: #ffffff;
+        --accent-yellow: #edcb50;
+        --record-red: #ef4444;
+      }
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        margin: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: var(--bg-dark);
+        font-family:
+          "Inter",
+          system-ui,
+          -apple-system,
+          sans-serif;
+        color: var(--text-primary);
+      }
+
+      /* ============================================================
+         BACKGROUND (static gradient)
+         ============================================================ */
+      .bg {
+        position: absolute;
+        inset: 0;
+        transform-origin: center center;
+        will-change: transform;
+        background:
+          radial-gradient(ellipse at 30% 30%, rgba(80, 100, 200, 0.25), transparent 60%),
+          radial-gradient(ellipse at 70% 70%, rgba(180, 80, 150, 0.2), transparent 60%),
+          linear-gradient(135deg, #0a0d1f 0%, #1a0d20 100%);
+      }
+      .bg-overlay {
+        position: absolute;
+        inset: 0;
+        background: rgba(0, 0, 0, 0.66);
+      }
+
+      /* ============================================================
+         CAMERA WRAPPER (GSAP-managed scale phases)
+         ============================================================ */
+      .camera {
+        position: absolute;
+        inset: 0;
+        transform-origin: center center;
+        will-change: transform;
+      }
+
+      /* ============================================================
+         ICONS — two nested wrappers per icon.
+         .icon-pos is positioned at TARGET; GSAP x/y shifts toward center.
+         .icon-entry tweens scale/opacity/rotation.
+         ============================================================ */
+      .icons-stage {
+        position: absolute;
+        inset: 0;
+      }
+      .icon-pos {
+        position: absolute;
+        width: 180px;
+        height: 180px;
+        will-change: transform;
+      }
+      .icon-entry {
+        width: 100%;
+        height: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        will-change: transform, opacity;
+        /* initial scale(0) + opacity(0) set by GSAP fromTo */
+      }
+      .icon-svg {
+        width: 100%;
+        height: 100%;
+        display: block;
+      }
+
+      /* SVG inner elements — class hooks for GSAP tweens */
+      .clock-hand-min {
+        transform-box: view-box;
+      }
+      .scissor-upper,
+      .scissor-lower {
+        transform-origin: 12px 12px;
+      }
+      .play-tri {
+        transform-origin: 12px 12px;
+      }
+      .record-dot {
+        transform-origin: 19px 8px;
+      }
+      .play-ring {
+        transform-origin: 12px 12px;
+        transform: rotate(-90deg);
+      }
+
+      /* ============================================================
+         COUNTER (absolute center, 3D entry)
+         ============================================================ */
+      .counter-stage {
+        position: absolute;
+        inset: 0;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        perspective: 2000px;
+        perspective-origin: center center;
+      }
+      .counter-3d {
+        display: flex;
+        align-items: baseline;
+        justify-content: center;
+        transform-style: preserve-3d;
+        will-change: transform, opacity;
+        opacity: 0; /* GSAP entry fades in */
+      }
+      .counter-number {
+        font-size: 806px; /* W × 0.42 — final size, GSAP scales from 0.20W */
+        font-weight: 900;
+        letter-spacing: -0.04em;
+        line-height: 0.9;
+        font-variant-numeric: tabular-nums; /* prevents 1→2 digit jitter */
+        color: var(--text-primary);
+        display: inline-block;
+        transform-origin: center bottom;
+        will-change: transform;
+      }
+      .counter-percent {
+        font-size: 269px; /* W × 0.14 */
+        font-weight: 700;
+        letter-spacing: -0.02em;
+        color: var(--accent-yellow);
+        margin-left: 16px;
+        display: inline-block;
+        will-change: transform, opacity;
+        opacity: 0; /* GSAP entry tweens in later */
+      }
+
+      /* ============================================================
+         VIGNETTE
+         ============================================================ */
+      .vignette {
+        position: absolute;
+        inset: 0;
+        background: radial-gradient(ellipse at center, transparent 50%, rgba(0, 0, 0, 0.5) 100%);
+        pointer-events: none;
+        z-index: 400;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="main"
+      data-start="0"
+      data-duration="3.5"
+      data-width="1920"
+      data-height="1080"
+    >
+      <div class="bg"></div>
+      <div class="bg-overlay"></div>
+
+      <div
+        class="camera clip"
+        data-start="0"
+        data-duration="3.5"
+        data-track-index="1"
+        id="camera-stage"
+      >
+        <div class="icons-stage">
+          <!-- Clock -->
+          <div class="icon-pos clock-pos" id="clock-pos">
+            <div class="icon-entry clock-entry">
+              <svg
+                class="icon-svg"
+                viewBox="0 0 24 24"
+                xmlns="http://www.w3.org/2000/svg"
+                aria-hidden="true"
+              >
+                <circle
+                  class="clock-ring"
+                  cx="12"
+                  cy="12"
+                  r="9"
+                  fill="none"
+                  stroke="white"
+                  stroke-width="2"
+                  stroke-dasharray="56.5"
+                  stroke-dashoffset="56.5"
+                />
+                <line
+                  x1="12"
+                  y1="12"
+                  x2="12"
+                  y2="8"
+                  stroke="white"
+                  stroke-width="2"
+                  stroke-linecap="round"
+                />
+                <line
+                  class="clock-hand-min"
+                  x1="12"
+                  y1="12"
+                  x2="12"
+                  y2="6"
+                  stroke="#edcb50"
+                  stroke-width="2"
+                  stroke-linecap="round"
+                />
+                <circle cx="12" cy="12" r="1.5" fill="#edcb50" />
+              </svg>
+            </div>
+          </div>
+
+          <!-- Scissors -->
+          <div class="icon-pos scissors-pos" id="scissors-pos">
+            <div class="icon-entry scissors-entry">
+              <svg
+                class="icon-svg"
+                viewBox="0 0 24 24"
+                xmlns="http://www.w3.org/2000/svg"
+                aria-hidden="true"
+              >
+                <g class="scissor-upper">
+                  <path
+                    d="M12 10.5L4.5 3L6.5 3L14 10.5"
+                    stroke="white"
+                    stroke-width="2"
+                    stroke-linecap="round"
+                    fill="none"
+                  />
+                  <circle cx="6" cy="6" r="2.5" fill="none" stroke="white" stroke-width="1.5" />
+                </g>
+                <g class="scissor-lower">
+                  <path
+                    d="M12 13.5L4.5 21L6.5 21L14 13.5"
+                    stroke="white"
+                    stroke-width="2"
+                    stroke-linecap="round"
+                    fill="none"
+                  />
+                  <circle cx="6" cy="18" r="2.5" fill="none" stroke="white" stroke-width="1.5" />
+                </g>
+                <line
+                  class="cutting-line"
+                  x1="14"
+                  y1="12"
+                  x2="20"
+                  y2="12"
+                  stroke="#edcb50"
+                  stroke-width="2"
+                  stroke-linecap="round"
+                  stroke-dasharray="4 2"
+                />
+              </svg>
+            </div>
+          </div>
+
+          <!-- Video -->
+          <div class="icon-pos video-pos" id="video-pos">
+            <div class="icon-entry video-entry">
+              <svg
+                class="icon-svg"
+                viewBox="0 0 24 24"
+                xmlns="http://www.w3.org/2000/svg"
+                aria-hidden="true"
+              >
+                <rect
+                  class="video-frame"
+                  x="3"
+                  y="5"
+                  width="14"
+                  height="14"
+                  rx="2"
+                  stroke="white"
+                  stroke-width="2"
+                  fill="none"
+                  stroke-dasharray="56"
+                  stroke-dashoffset="56"
+                />
+                <path d="M8 9L13 12L8 15V9Z" fill="white" />
+                <circle class="record-dot" cx="19" cy="8" r="2.5" fill="#ef4444" />
+              </svg>
+            </div>
+          </div>
+
+          <!-- Play -->
+          <div class="icon-pos play-pos" id="play-pos">
+            <div class="icon-entry play-entry">
+              <svg
+                class="icon-svg"
+                viewBox="0 0 24 24"
+                xmlns="http://www.w3.org/2000/svg"
+                aria-hidden="true"
+              >
+                <circle
+                  class="play-ring"
+                  cx="12"
+                  cy="12"
+                  r="9"
+                  fill="none"
+                  stroke="white"
+                  stroke-width="2"
+                  stroke-dasharray="56.5"
+                  stroke-dashoffset="56.5"
+                />
+                <circle cx="12" cy="12" r="7" fill="rgba(255,255,255,0.05)" />
+                <path class="play-tri" d="M10 8L16 12L10 16V8Z" fill="#edcb50" />
+              </svg>
+            </div>
+          </div>
+        </div>
+        <!-- /.icons-stage -->
+
+        <div class="counter-stage">
+          <div class="counter-3d" id="counter-3d">
+            <span class="counter-number" id="counter-number">0</span
+            ><span class="counter-percent" id="counter-percent">%</span>
+          </div>
+        </div>
+      </div>
+      <!-- /.camera -->
+
+      <div class="vignette"></div>
+    </div>
+
+    <script>
+      /* ================================================================
+         CONSTANTS
+         ================================================================ */
+      const W = 1920,
+        H = 1080;
+      const ICON_SIZE = 180;
+      const CENTER_X = W / 2 - ICON_SIZE / 2; // 870
+      const CENTER_Y = H / 2 - ICON_SIZE / 2; // 450
+
+      const TIMING = {
+        // Phase 2 — icon entries (staggered)
+        clockEntryAt: 0.17,
+        scissorsEntryAt: 0.3,
+        videoEntryAt: 0.43,
+        playEntryAt: 0.57,
+        entryDur: 0.55,
+
+        // Phase 3 — count + expansion (shared start, dur, ease)
+        countAt: 0.47,
+        countDur: 1.0,
+        startOffset: 0.4,
+
+        // Counter 3D entry (slightly earlier than count starts)
+        counterEntryAt: 0.27,
+        counterEntryDur: 0.7,
+
+        // Percent symbol entry
+        percentEntryAt: 1.27,
+        percentEntryDur: 0.55,
+
+        // Phase 4 — camera
+        cameraFocusAt: 0.5,
+        cameraFocusDur: 1.83,
+        cameraPushAt: 2.33,
+        cameraPushDur: 1.17,
+      };
+
+      const ICONS = [
+        {
+          name: "clock",
+          sel: "#clock-pos",
+          targetX: W * 0.06,
+          targetY: H * 0.18,
+          delay: TIMING.clockEntryAt,
+          entryRotation: -180,
+          entryEase: "back.out(1.5)",
+        },
+        {
+          name: "scissors",
+          sel: "#scissors-pos",
+          targetX: W * 0.85,
+          targetY: H * 0.2,
+          delay: TIMING.scissorsEntryAt,
+          entryRotation: 0,
+          entryEase: "back.out(1.5)",
+        },
+        {
+          name: "video",
+          sel: "#video-pos",
+          targetX: W * 0.04,
+          targetY: H * 0.68,
+          delay: TIMING.videoEntryAt,
+          entryRotation: 0,
+          entryEase: "back.out(1.4)",
+        },
+        {
+          name: "play",
+          sel: "#play-pos",
+          targetX: W * 0.88,
+          targetY: H * 0.65,
+          delay: TIMING.playEntryAt,
+          entryRotation: 90,
+          entryEase: "back.out(1.5)",
+        },
+      ];
+
+      /* ================================================================
+         SET ICON TARGET POSITIONS + INITIAL EXPANSION OFFSETS
+         ================================================================ */
+      ICONS.forEach(({ sel, targetX, targetY }) => {
+        const el = document.querySelector(sel);
+        el.style.left = targetX + "px";
+        el.style.top = targetY + "px";
+
+        // Initial offset for START_OFFSET = 0.4:
+        // position = target + (center - target) * (1 - 0.4) = target + 0.6 * (center - target)
+        const offsetX = (CENTER_X - targetX) * (1 - TIMING.startOffset);
+        const offsetY = (CENTER_Y - targetY) * (1 - TIMING.startOffset);
+        gsap.set(el, { x: offsetX, y: offsetY });
+      });
+
+      /* Set initial entry state on each .icon-entry */
+      ICONS.forEach(({ name, entryRotation }) => {
+        gsap.set(`.${name}-entry`, {
+          scale: 0,
+          opacity: 0,
+          rotation: entryRotation,
+        });
+      });
+
+      /* Set initial background and camera scale + subtle pan baseline */
+      gsap.set(".bg", { scale: 1.05 });
+      gsap.set(".camera", { scale: 0.92, x: 0, y: 2 });
+      gsap.set("#counter-number", { scale: 0.2 / 0.42 });
+
+      /* ================================================================
+         TIMELINE
+         ================================================================ */
+      window.__timelines = window.__timelines || {};
+      const tl = gsap.timeline({ paused: true });
+      window.__timelines["main"] = tl;
+
+      tl.to(
+        ".bg",
+        {
+          scale: 1.07,
+          x: 6,
+          y: -4,
+          duration: 3.5,
+          ease: "sine.inOut",
+        },
+        0,
+      );
+
+      /* ----------------------------------------------------------------
+         PHASE 2: Icon entries (staggered)
+         ---------------------------------------------------------------- */
+      ICONS.forEach(({ name, delay, entryEase }) => {
+        // Scale + opacity + rotation entry
+        tl.to(
+          `.${name}-entry`,
+          {
+            scale: 1,
+            opacity: 0.85,
+            rotation: 0,
+            duration: TIMING.entryDur,
+            ease: entryEase,
+          },
+          delay,
+        );
+      });
+
+      // Stroke-draw the outline circles/rect on clock, video, and play during their entries
+      tl.to(
+        ".clock-ring",
+        {
+          attr: { "stroke-dashoffset": 0 },
+          duration: TIMING.entryDur,
+          ease: "power2.out",
+        },
+        TIMING.clockEntryAt,
+      );
+
+      tl.to(
+        ".video-frame",
+        {
+          attr: { "stroke-dashoffset": 0 },
+          duration: TIMING.entryDur,
+          ease: "power2.out",
+        },
+        TIMING.videoEntryAt,
+      );
+
+      tl.to(
+        ".play-ring",
+        {
+          attr: { "stroke-dashoffset": 0 },
+          duration: TIMING.entryDur,
+          ease: "power2.out",
+        },
+        TIMING.playEntryAt,
+      );
+
+      /* ----------------------------------------------------------------
+         PHASE 3: Counter (with 3D entry) + expansion
+         ---------------------------------------------------------------- */
+      // Counter 3D entry — translateZ + rotateY + scale + opacity, in parallel.
+      tl.fromTo(
+        "#counter-3d",
+        { rotationY: 10, scale: 0.7, z: -300, opacity: 0 },
+        {
+          rotationY: 0,
+          scale: 1.0,
+          z: 0,
+          opacity: 1,
+          duration: TIMING.counterEntryDur,
+          ease: "power3.out",
+        },
+        TIMING.counterEntryAt,
+      );
+
+      // Counter number + apparent size. Use discrete frame keyframes so
+      // HyperFrames can seek directly to any sampled time.
+      const counterEl = document.querySelector("#counter-number");
+      const COUNT_STEPS = 30;
+      const COUNT_START_SCALE = 0.2 / 0.42;
+
+      for (let i = 0; i <= COUNT_STEPS; i += 1) {
+        const p = i / COUNT_STEPS;
+        const eased = 1 - Math.pow(1 - p, 2.5);
+        const number = Math.round(eased * 90);
+        const scale = COUNT_START_SCALE + eased * (1 - COUNT_START_SCALE);
+
+        tl.set(
+          counterEl,
+          {
+            textContent: String(number),
+            scale,
+          },
+          TIMING.countAt + p * TIMING.countDur,
+        );
+      }
+
+      // Percent symbol enters later with its own spring.
+      tl.fromTo(
+        "#counter-percent",
+        { x: 60, rotation: 20, scale: 0.4, opacity: 0 },
+        {
+          x: 0,
+          rotation: 0,
+          scale: 1.0,
+          opacity: 1,
+          duration: TIMING.percentEntryDur,
+          ease: "back.out(1.4)",
+        },
+        TIMING.percentEntryAt,
+      );
+
+      // Icon expansion — per-icon, same start/dur/ease as counter for lock-step sync.
+      ICONS.forEach(({ sel }) => {
+        tl.to(
+          sel,
+          {
+            x: 0,
+            y: 0,
+            duration: TIMING.countDur,
+            ease: "power2.out",
+          },
+          TIMING.countAt,
+        );
+      });
+
+      /* ----------------------------------------------------------------
+         PHASE 4: Multi-phase camera
+         ---------------------------------------------------------------- */
+      tl.to(
+        ".camera",
+        {
+          scale: 1.0,
+          duration: TIMING.cameraFocusDur,
+          ease: "power2.out",
+        },
+        TIMING.cameraFocusAt,
+      );
+
+      tl.to(
+        ".camera",
+        {
+          scale: 1.08,
+          duration: TIMING.cameraPushDur,
+          ease: "power2.out",
+        },
+        TIMING.cameraPushAt,
+      );
+
+      // Subtle deterministic pan from the the source camera micro-movement.
+      tl.to(
+        ".camera",
+        {
+          x: 3,
+          y: 1.6,
+          duration: 3.5,
+          ease: "sine.inOut",
+        },
+        0,
+      );
+
+      /* ----------------------------------------------------------------
+         CONTINUOUS INTERNAL SVG MOTION
+         All four icons' inner animations are derived from tl.time() in
+         a single shared onUpdate. Cheaper than 4-5 separate onUpdates,
+         easier to inspect.
+         ---------------------------------------------------------------- */
+      const SCISSOR_SPEED = 0.12 * 30; // = 3.6 rad/sec (sin freq)
+      const SCISSOR_AMP = 15;
+      const REC_OPACITY_SPEED = 0.15 * 30; // = 4.5 rad/sec
+      const REC_SCALE_SPEED = 0.1 * 30; // = 3.0 rad/sec
+      const REC_OPACITY_AMP = 0.3;
+      const REC_OPACITY_BASE = 0.7;
+      const REC_SCALE_AMP = 0.15;
+      const PLAY_PULSE_SPEED = 0.08 * 30; // = 2.4 rad/sec
+      const PLAY_PULSE_AMP = 0.08;
+      const CUTTING_FLOW_SPEED = 0.5 * 30; // = 15 units/sec (for stroke-dashoffset)
+
+      const scissorUpper = document.querySelector(".scissor-upper");
+      const scissorLower = document.querySelector(".scissor-lower");
+      const recordDot = document.querySelector(".record-dot");
+      const playTri = document.querySelector(".play-tri");
+      const cuttingLine = document.querySelector(".cutting-line");
+
+      tl.to(
+        { tick: 0 },
+        {
+          tick: 1,
+          duration: 3.5,
+          ease: "none",
+          onUpdate: function () {
+            const t = tl.time();
+
+            // Scissors — symmetric oscillation, anchored to scissors delay
+            const sciT = t - TIMING.scissorsEntryAt;
+            const sciAngle = sciT > 0 ? Math.sin(sciT * SCISSOR_SPEED) * SCISSOR_AMP : 0;
+            gsap.set(scissorUpper, { rotation: sciAngle });
+            gsap.set(scissorLower, { rotation: -sciAngle });
+
+            // Cutting line — linear dash flow (negative = leftward drift)
+            const cutT = t - TIMING.scissorsEntryAt;
+            if (cutT > 0) {
+              gsap.set(cuttingLine, {
+                attr: { "stroke-dashoffset": -cutT * CUTTING_FLOW_SPEED },
+              });
+            }
+
+            // Record dot — phase-offset opacity and scale
+            const recT = t - TIMING.videoEntryAt;
+            if (recT > 0) {
+              const recOpacity =
+                Math.sin(recT * REC_OPACITY_SPEED) * REC_OPACITY_AMP + REC_OPACITY_BASE;
+              const recScale = 1 + Math.sin(recT * REC_SCALE_SPEED) * REC_SCALE_AMP;
+              gsap.set(recordDot, { opacity: recOpacity, scale: recScale });
+            }
+
+            // Play triangle — gentle scale pulse
+            const playT = t - TIMING.playEntryAt;
+            if (playT > 0) {
+              const playScale = 1 + Math.sin(playT * PLAY_PULSE_SPEED) * PLAY_PULSE_AMP;
+              gsap.set(playTri, { scale: playScale });
+            }
+          },
+        },
+        0,
+      );
+
+      /* Clock minute hand — linear rotation, anchored to clock entry */
+      tl.fromTo(
+        ".clock-hand-min",
+        { rotation: 0, svgOrigin: "12 12" },
+        {
+          rotation: 420, // 120 deg/sec × 3.5s, scaled for visible motion
+          svgOrigin: "12 12",
+          duration: 3.5 - TIMING.clockEntryAt,
+          ease: "none",
+        },
+        TIMING.clockEntryAt,
+      );
+    </script>
+  </body>
+</html>
diff --git a/.claude/skills-media/hyperframes-animation/examples/messaging-multi-phrase.html b/.claude/skills-media/hyperframes-animation/examples/messaging-multi-phrase.html
new file mode 100644
index 000000000..b641d96e8
--- /dev/null
+++ b/.claude/skills-media/hyperframes-animation/examples/messaging-multi-phrase.html
@@ -0,0 +1,352 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Scene — HyperFrames Messaging Multi-Phrase</title>
+
+    <!--
+      Blueprint: messaging-multi-phrase (HyperFrames preview)
+      HyperFrames-native version of the scene-9-multi-phrase concept.
+
+      Choreography (3 phrases, ~7.5 seconds total, content-driven duration):
+
+        Phrase 1 [0.00 – 3.86 s]
+          "With an AI assistant " (21 chars × 0.083 s = 1.75 s)
+        + "you can trust"          (13 chars × 0.083 s = 1.08 s, accent pink)
+        + hold 1.00 s
+        → total 1.75 + 1.08 + 1.00 ≈ 3.83 s (computed by JS)
+
+        Phrase 2 [3.86 – 5.27 s]
+          "Instant " (8 chars × 0.083 s = 0.67 s)
+        + "insights" (8 chars × 0.083 s = 0.67 s, accent pink)
+        + hold 1.00 s
+        → total 0.67 + 0.67 + 1.00 ≈ 2.33 s, but starts at 3.86 → endTime ≈ 6.18 s
+
+        Phrase 3 [6.18 – 9.45 s]
+          "Endless "      (8 chars × 0.083 = 0.67 s)
+        + "possibilities" (13 chars × 0.083 = 1.08 s, accent pink)
+        + hold 2.00 s     (longer — closing beat)
+        → total 0.67 + 1.08 + 2.00 ≈ 3.75 s, but starts at 6.18 → endTime ≈ 9.93 s
+
+        Continuous: cursor blink (square wave via `tl.time() % 1.0`)
+          color, cursor blink. No per-phrase tweens.
+        - No conditional DOM — phrase container exists from t=0 with empty text;
+          onUpdate overwrites textContent in-place at each frame.
+        - TIMELINE is a plain const computed once at script load (no useMemo).
+        - Frames become seconds: charSpeed 2.5 frames → 0.083 s; hold 30 frames → 1.0 s.
+        - Cursor blink: `(t % BLINK_CYCLE) < BLINK_CYCLE / 2 ? 1 : 0` inside the same
+          onUpdate, not a separate component with `useCurrentFrame`.
+        - textContent !== visible guard skips redundant DOM writes during hold windows.
+    -->
+
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+
+    <style>
+      :root {
+        --text-primary: #ffffff;
+        --text-accent: #32fff6;
+        --text-accent-2: #a3ff7a;
+        --bg: linear-gradient(
+          135deg,
+          #3a3a3a 0%,
+          #17211f 30%,
+          #0b2328 48%,
+          #1f3518 70%,
+          #343434 100%
+        );
+      }
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        margin: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: var(--bg);
+        font-family:
+          "Inter",
+          -apple-system,
+          BlinkMacSystemFont,
+          "Segoe UI",
+          Roboto,
+          sans-serif;
+        color: var(--text-primary);
+        -webkit-font-smoothing: antialiased;
+        text-rendering: geometricPrecision;
+      }
+
+      .stage {
+        position: absolute;
+        inset: 0;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+
+      /* ============================================================
+         PHRASE STAGE — one shared line with three inline children:
+           .phrase-main   primary-color portion
+           .phrase-accent accent-color portion
+           .phrase-cursor block cursor (color overridden per-frame)
+         `white-space: pre` keeps the trailing space in textMain so the
+         accent doesn't merge with the lead-in.
+         ============================================================ */
+      .phrase-stage {
+        position: absolute;
+        inset: 0;
+        width: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 150px;
+        font-weight: 800;
+        line-height: 1;
+        letter-spacing: 0;
+        white-space: pre;
+        text-align: center;
+        text-shadow: 0 0 10px rgba(255, 255, 255, 0.16);
+      }
+      .phrase-main {
+        color: var(--text-primary);
+      }
+      .phrase-accent {
+        color: var(--text-accent);
+        text-shadow: 0 0 12px rgba(50, 255, 246, 0.28);
+      }
+      .phrase-cursor {
+        display: inline-block;
+        flex: 0 0 auto;
+        width: 8px;
+        height: 162px; /* ≈ 1.08 × fontSize */
+        background: var(--text-primary);
+        margin-left: 12px;
+        vertical-align: middle;
+        transform: translateY(10px); /* baseline alignment */
+        will-change: opacity, background-color;
+        box-shadow: 0 0 12px rgba(50, 255, 246, 0.36);
+      }
+
+      /* ============================================================
+         BACKGROUND TINT — subtle radial glow so pure black doesn't
+         feel sterile. Drops to ~rgb(8,8,12) at corners.
+         ============================================================ */
+      .bg-tint {
+        position: absolute;
+        inset: 0;
+        background:
+          radial-gradient(ellipse at 42% 48%, rgba(24, 217, 232, 0.32), transparent 42%),
+          radial-gradient(ellipse at 58% 52%, rgba(123, 234, 90, 0.26), transparent 44%),
+          radial-gradient(ellipse at 50% 50%, rgba(8, 16, 18, 0.42), transparent 70%);
+        pointer-events: none;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="main"
+      data-start="0"
+      data-duration="7.5"
+      data-width="1920"
+      data-height="1080"
+    >
+      <div
+        id="multi-phrase-scene"
+        class="stage clip"
+        data-start="0"
+        data-duration="7.5"
+        data-track-index="1"
+      >
+        <div class="bg-tint"></div>
+        <div class="phrase-stage">
+          <span class="phrase-main"></span><span class="phrase-accent"></span
+          ><span class="phrase-cursor"></span>
+        </div>
+      </div>
+    </div>
+
+    <script>
+      window.__timelines = window.__timelines || {};
+      const tl = gsap.timeline({ paused: true });
+
+      /* ============================================================
+         SCRIPT — content + per-phrase timing config.
+         Change SCRIPT and the timeline reshapes itself.
+         ============================================================ */
+      const SCRIPT = [
+        {
+          textMain: "Build video with ",
+          textAccent: "HTML",
+          charSpeed: 0.083, // seconds per character (= 2.5 frames @ 30 fps)
+          hold: 1.0,
+        },
+        {
+          textMain: "Seek ",
+          textAccent: "any frame",
+          charSpeed: 0.083,
+          hold: 1.0,
+        },
+        {
+          textMain: "Render to ",
+          textAccent: "MP4",
+          charSpeed: 0.083,
+          hold: 2.0, // longer closing beat
+        },
+      ];
+
+      /* ============================================================
+         TIMELINE — flat reduce, computed once.
+         Each entry gains absolute startTime + endTime in seconds.
+         ============================================================ */
+      let acc = 0;
+      const TIMELINE = SCRIPT.map((item) => {
+        const totalChars = item.textMain.length + item.textAccent.length;
+        const typingDuration = totalChars * item.charSpeed;
+        const totalDuration = typingDuration + item.hold;
+        const start = acc;
+        const end = start + totalDuration;
+        acc = end;
+        return Object.assign({}, item, {
+          startTime: start,
+          endTime: end,
+          typingDuration,
+        });
+      });
+      const TOTAL = TIMELINE[TIMELINE.length - 1].endTime;
+      // TOTAL ≈ 9.93s with the SCRIPT above. The composition root caps at 7.5s
+      // (data-duration), which is the actual render window — phrases 1+2 fit
+      // comfortably; phrase 3 holds long enough that any time after ~6.18s is
+      // already on the closing line. Adjust SCRIPT durations to fit your budget.
+
+      /* ============================================================
+         COLORS & BLINK
+         ============================================================ */
+      const MAIN_COLOR = "#FFFFFF";
+      const ACCENT_COLOR = "#32FFF6";
+      const BLINK_CYCLE = 1.0; // seconds — 0.5s on, 0.5s off (matches 30-frame square wave)
+
+      const mainEl = document.querySelector(".phrase-main");
+      const accentEl = document.querySelector(".phrase-accent");
+      const cursorEl = document.querySelector(".phrase-cursor");
+
+      /* ============================================================
+         MASTER ENGINE — single onUpdate writes text + cursor every frame.
+         ============================================================ */
+      // Cache the most-recently-active phrase index for seek-safe scans.
+      let lastIdx = 0;
+
+      function findPhrase(t) {
+        // Hot path: same phrase still active
+        if (t >= TIMELINE[lastIdx].startTime && t < TIMELINE[lastIdx].endTime) {
+          return TIMELINE[lastIdx];
+        }
+        // Cold path: linear scan (handles forward + backward seeks)
+        for (let i = 0; i < TIMELINE.length; i++) {
+          if (t >= TIMELINE[i].startTime && t < TIMELINE[i].endTime) {
+            lastIdx = i;
+            return TIMELINE[i];
+          }
+        }
+        return null;
+      }
+
+      function renderAt(t) {
+        // ----- Cursor blink (square wave, runs always) -----
+        cursorEl.style.opacity = t % BLINK_CYCLE < BLINK_CYCLE / 2 ? "1" : "0";
+
+        // ----- Find current phrase -----
+        const phrase = findPhrase(t);
+        if (!phrase) {
+          if (mainEl.textContent !== "") mainEl.textContent = "";
+          if (accentEl.textContent !== "") accentEl.textContent = "";
+          cursorEl.style.background = MAIN_COLOR;
+          return;
+        }
+
+        // ----- Compute visible characters -----
+        const activeT = t - phrase.startTime;
+        const charIdx = Math.floor(activeT / phrase.charSpeed);
+        const mainLen = phrase.textMain.length;
+
+        const visMain = phrase.textMain.slice(0, Math.min(charIdx, mainLen));
+        const accentLen = Math.max(0, charIdx - mainLen);
+        const visAccent = phrase.textAccent.slice(0, accentLen);
+
+        // ----- DOM writes (guarded) -----
+        if (mainEl.textContent !== visMain) mainEl.textContent = visMain;
+        if (accentEl.textContent !== visAccent) accentEl.textContent = visAccent;
+
+        // ----- Cursor color follows active segment -----
+        const inAccent = visMain.length === mainLen && visAccent.length > 0;
+        cursorEl.style.background = inAccent ? ACCENT_COLOR : MAIN_COLOR;
+      }
+
+      tl.to(
+        { tick: 0 },
+        {
+          tick: 1,
+          duration: 7.5, // matches data-duration; clips the timeline
+          ease: "none",
+          onUpdate: () => renderAt(tl.time()),
+        },
+        0,
+      );
+
+      const pauseTimeline = tl.pause.bind(tl);
+      tl.pause = (time, suppressEvents) => {
+        const result = pauseTimeline(time, suppressEvents);
+        if (typeof time === "number") renderAt(time);
+        return result;
+      };
+
+      function wrapSeekOwner(owner) {
+        if (!owner || owner.__multiPhraseSeekWrapped) return;
+        let currentSeek = owner.seek;
+        Object.defineProperty(owner, "seek", {
+          configurable: true,
+          get: () => currentSeek,
+          set: (value) => {
+            if (typeof value !== "function") {
+              currentSeek = value;
+              return;
+            }
+            currentSeek = function (time) {
+              const result = value.apply(this, arguments);
+              if (typeof time === "number") renderAt(time);
+              return result;
+            };
+          },
+        });
+        owner.seek = currentSeek;
+        owner.__multiPhraseSeekWrapped = true;
+      }
+
+      function installWindowSeekHook(key) {
+        if (window[key]) {
+          wrapSeekOwner(window[key]);
+          return;
+        }
+        let pendingOwner;
+        Object.defineProperty(window, key, {
+          configurable: true,
+          get: () => pendingOwner,
+          set: (value) => {
+            pendingOwner = value;
+            wrapSeekOwner(value);
+          },
+        });
+      }
+      installWindowSeekHook("__player");
+      installWindowSeekHook("__hf");
+
+      renderAt(0);
+
+      window.__timelines["main"] = tl;
+    </script>
+  </body>
+</html>
diff --git a/.claude/skills-media/hyperframes-animation/examples/metric-video-text-pivot.html b/.claude/skills-media/hyperframes-animation/examples/metric-video-text-pivot.html
new file mode 100644
index 000000000..01fb55334
--- /dev/null
+++ b/.claude/skills-media/hyperframes-animation/examples/metric-video-text-pivot.html
@@ -0,0 +1,779 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Scene 07 — HyperFrames Video Kinetic Text Pivot</title>
+
+    <!--
+      HyperFrames composition.tsx.
+
+      Choreography (4 phases, 6.5 seconds total):
+        0.17 – 0.87s   "HyperFrames" badge fades in (top)
+        0.17 – 0.87s   Demo screen card enters centered (scale 0.6 → 1)
+        2.20 – 3.00s   Video slides left to 32% W (scale → 0.85); MP4 pops in on right
+                       with 5-layer green depth stack and bouncy back.out(1.6)
+        3.00 – 3.86s   MP4 breathes (±2% scale at ~1.9 Hz)
+        3.86 – 4.46s   Video and MP4 slide off left + fade; typing stage fades in center
+        4.36 – 5.13s   "HTML pages become video" types char-by-char (23 chars at 30 ch/s)
+                       Accent words "pages" and "video" in brand green
+        4.83 – 5.43s   Gradient pill (purple → green) scales in behind line 2 with glow halo
+        5.13 – 5.63s   "frame by frame." types char-by-char inside the pill
+        0 – 6.50s      Continuous: video float, cursor blink, stat breath
+                       (each gated by time window)
+          so entry, continuous motion, and static tilt never overwrite each other
+        - Conditional rendering ({frame > X && ...}) replaced by permanent DOM +
+          opacity 0 + gates inside the scene-ticker onUpdate
+        - Cursor blink derived from tl.time() via Math.floor(t * 2) % 2
+        - Demo screen is a self-contained CSS scene (.video-scene); to showcase real
+          footage, drop a local mp4 back in as a muted &lt;video class="clip"&gt; (see
+          the note at the .video-content markup)
+        - 3D depth layers built once at composition setup with document.createElement
+    -->
+
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+
+    <style>
+      :root {
+        --bg-dark: #0a0a18;
+        --text-primary: #ffffff;
+        --text-secondary: rgba(255, 255, 255, 0.65);
+        --brand-purple: #7c3aed;
+        --brand-purple-soft: #a78bfa;
+        --brand-green: #22c55e;
+        --brand-purple-glow: rgba(124, 58, 237, 1);
+        --brand-green-glow: rgba(34, 197, 94, 1);
+      }
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        margin: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: var(--bg-dark);
+        font-family:
+          "Inter",
+          system-ui,
+          -apple-system,
+          sans-serif;
+        color: var(--text-primary);
+      }
+
+      .stage {
+        position: absolute;
+        inset: 0;
+        overflow: hidden;
+      }
+
+      /* ============================================================
+         BACKGROUND + AMBIENT GLOW
+         ============================================================ */
+      .bg {
+        position: absolute;
+        inset: 0;
+        background:
+          radial-gradient(ellipse at 50% 50%, rgba(40, 30, 80, 0.5), transparent 65%),
+          linear-gradient(135deg, #0a0a18 0%, #160a1f 100%);
+      }
+      .ambient-glow {
+        position: absolute;
+        left: 50%;
+        top: 50%;
+        transform: translate(-50%, -50%);
+        width: 1536px;
+        height: 864px;
+        background: radial-gradient(
+          ellipse at center,
+          rgba(147, 51, 234, 0.13) 0%,
+          rgba(34, 197, 94, 0.08) 30%,
+          transparent 70%
+        );
+        filter: blur(80px);
+        pointer-events: none;
+      }
+
+      /* ============================================================
+         BADGE
+         ============================================================ */
+      .badge {
+        position: absolute;
+        top: 42px;
+        left: 50%;
+        transform: translateX(-50%);
+        padding: 12px 32px;
+        font-size: 112px;
+        font-weight: 800;
+        color: var(--text-primary);
+        line-height: 1;
+        white-space: nowrap;
+        text-shadow:
+          0 0 32px rgba(248, 250, 252, 0.12),
+          0 0 72px rgba(24, 217, 232, 0.1);
+        will-change: transform, opacity;
+        /* initial opacity 0 + scale 0.9 via gsap.set */
+      }
+      .badge .accent {
+        color: var(--brand-purple-soft);
+        background: linear-gradient(135deg, var(--brand-purple-soft) 0%, var(--brand-purple) 72%);
+        -webkit-background-clip: text;
+        background-clip: text;
+        -webkit-text-fill-color: transparent;
+        filter: drop-shadow(0 0 28px rgba(124, 58, 237, 0.34));
+      }
+
+      /* ============================================================
+         VIDEO CARD — three nested wrappers
+         ============================================================ */
+      .video-pos {
+        position: absolute;
+        left: 0;
+        top: 0;
+        width: 1040px;
+        height: 585px; /* 16:9 ratio, intentionally large for the pivot beat */
+        margin-left: -520px; /* so x: W/2 centers it */
+        margin-top: -292.5px;
+        will-change: transform, opacity;
+      }
+      .video-float {
+        width: 100%;
+        height: 100%;
+        will-change: transform;
+      }
+      .video-tilt {
+        width: 100%;
+        height: 100%;
+        transform-style: preserve-3d;
+        transform: rotateX(5deg) rotateY(15deg);
+      }
+      .video-content {
+        width: 100%;
+        height: 100%;
+        border-radius: 16px;
+        overflow: hidden;
+        border: 2px solid rgba(255, 255, 255, 0.1);
+        box-shadow:
+          0 30px 60px rgba(0, 0, 0, 0.5),
+          0 0 80px rgba(147, 51, 234, 0.2),
+          0 0 120px rgba(34, 197, 94, 0.15);
+        position: relative;
+      }
+      .video-scene {
+        position: absolute;
+        inset: 0;
+        background:
+          radial-gradient(circle at 30% 30%, rgba(255, 200, 100, 0.4), transparent 50%),
+          linear-gradient(135deg, #1a3a5f 0%, #2a4570 50%, #3a2a5a 100%);
+      }
+      .video-scene::before {
+        content: "";
+        position: absolute;
+        top: 35%;
+        left: 40%;
+        width: 220px;
+        height: 220px;
+        border-radius: 50%;
+        background: linear-gradient(135deg, #fbbf24, #f97316);
+        opacity: 0.6;
+        filter: blur(8px);
+      }
+      .video-caption {
+        position: absolute;
+        bottom: 60px;
+        left: 50%;
+        transform: translateX(-50%);
+        padding: 12px 24px;
+        background: rgba(0, 0, 0, 0.7);
+        border-radius: 8px;
+        color: var(--text-primary);
+        font-size: 34px;
+        font-weight: 600;
+        white-space: nowrap;
+      }
+      .video-caption .accent {
+        color: var(--brand-green);
+      }
+      .video-reflection {
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        height: 40%;
+        background: linear-gradient(180deg, rgba(255, 255, 255, 0.08) 0%, transparent 100%);
+        pointer-events: none;
+      }
+
+      /* ============================================================
+         MP4 STAT — three nested wrappers + depth stack
+         ============================================================ */
+      .stat-pos {
+        position: absolute;
+        left: 0;
+        top: 0;
+        will-change: transform, opacity;
+      }
+      .stat-breath {
+        will-change: transform;
+      }
+      .stat-tilt {
+        transform-style: preserve-3d;
+        transform: rotateX(5deg) rotateY(-15deg);
+      }
+      .depth-stack {
+        position: relative;
+        display: inline-block;
+        font-size: 340px;
+        font-weight: 900;
+        letter-spacing: -0.03em;
+        line-height: 1;
+      }
+      .depth-stack .depth-layer.front {
+        position: relative;
+        color: var(--brand-green);
+      }
+      .depth-stack .depth-layer.back {
+        position: absolute;
+        top: var(--top);
+        left: var(--left);
+        color: rgba(34, 197, 94, var(--alpha));
+      }
+
+      /* ============================================================
+         TYPING STAGE — center, fades in during pivot
+         ============================================================ */
+      .typing-stage {
+        position: absolute;
+        left: 50%;
+        top: 50%;
+        transform: translate(-50%, -50%);
+        will-change: transform, opacity;
+      }
+      .typing-tilt {
+        perspective: 1200px;
+        transform-style: preserve-3d;
+        transform: rotateY(-15deg) rotateX(5deg);
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        gap: 30px;
+      }
+      .line1 {
+        display: flex;
+        align-items: center;
+        white-space: pre;
+      }
+      .seg {
+        font-size: 124px;
+        font-weight: 700;
+        color: var(--text-primary);
+        white-space: pre;
+        line-height: 1;
+      }
+      .seg.accent,
+      .seg.accent2 {
+        color: var(--brand-green);
+      }
+
+      .cursor {
+        display: inline-block;
+        width: 10px;
+        height: 124px;
+        background-color: var(--text-primary);
+        margin-left: 8px;
+        vertical-align: middle;
+        transform: translateY(4px);
+        opacity: 0;
+        will-change: opacity;
+      }
+      .cursor.green {
+        background-color: var(--brand-green);
+      }
+
+      .line2-wrap {
+        position: relative;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        padding: 24px 64px;
+      }
+      .pill-bg {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%) scale(0);
+        width: calc(100% + 80px);
+        height: calc(100% + 40px);
+        border-radius: 80px;
+        background: linear-gradient(90deg, var(--brand-purple) 0%, var(--brand-green) 100%);
+        opacity: 0;
+        z-index: -1;
+        will-change: transform, opacity;
+      }
+      .pill-glow {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        width: calc(100% + 100px);
+        height: calc(100% + 60px);
+        border-radius: 80px;
+        background: radial-gradient(
+          ellipse at center,
+          var(--brand-purple-glow) 0%,
+          transparent 70%
+        );
+        opacity: 0;
+        filter: blur(30px);
+        z-index: -2;
+        will-change: opacity;
+      }
+      .line2-content {
+        display: flex;
+        align-items: center;
+        position: relative;
+        z-index: 1;
+        opacity: 0;
+        will-change: opacity;
+      }
+      .seg.line2 {
+        color: var(--text-primary);
+      }
+
+      /* ============================================================
+         VIGNETTE
+         ============================================================ */
+      .vignette {
+        position: absolute;
+        inset: 0;
+        background: radial-gradient(ellipse at center, transparent 50%, rgba(0, 0, 0, 0.5) 100%);
+        pointer-events: none;
+        z-index: 400;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="main"
+      data-start="0"
+      data-duration="6.5"
+      data-width="1920"
+      data-height="1080"
+    >
+      <div
+        class="stage clip"
+        data-start="0"
+        data-duration="6.5"
+        data-track-index="1"
+        id="scene-stage"
+      >
+        <div class="bg"></div>
+        <div class="ambient-glow"></div>
+
+        <div class="badge" id="badge">Hyper<span class="accent">Frames</span></div>
+
+        <!-- Video card -->
+        <div class="video-pos" id="video-pos" data-layout-allow-overflow>
+          <div class="video-float" id="video-float">
+            <div class="video-tilt">
+              <div class="video-content">
+                <div class="video-scene"></div>
+                <!-- To showcase real footage, add a local mp4 on top of .video-scene:
+                     &lt;video id="demo-video" class="clip" src="assets/demo.mp4"
+                       style="position:absolute;inset:0;width:100%;height:100%;object-fit:cover"
+                       data-start="0.17" data-duration="3.69" data-track-index="2"
+                       data-media-start="0" muted playsinline&gt;&lt;/video&gt; -->
+                <div class="video-caption">
+                  HTML, CSS and JS become <span class="accent">video</span>
+                </div>
+                <div class="video-reflection"></div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- MP4 stat -->
+        <div class="stat-pos" id="stat-pos" data-layout-allow-overflow>
+          <div class="stat-breath" id="stat-breath">
+            <div class="stat-tilt">
+              <div class="depth-stack" id="depth-stack-97" data-text="MP4"></div>
+            </div>
+          </div>
+        </div>
+
+        <!-- Typing -->
+        <div class="typing-stage" id="typing-stage">
+          <div class="typing-tilt">
+            <div class="line1">
+              <span class="seg main">HTML </span><span class="seg accent">pages</span
+              ><span class="seg suffix"> become </span><span class="seg accent2">video</span
+              ><span class="cursor cursor1" id="cursor1"></span>
+            </div>
+            <div class="line2-wrap">
+              <div class="pill-bg" id="pill-bg"></div>
+              <div class="pill-glow" id="pill-glow"></div>
+              <div class="line2-content">
+                <span class="seg line2">frame by frame.</span
+                ><span class="cursor cursor2" id="cursor2"></span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="vignette"></div>
+    </div>
+
+    <script>
+      /* ================================================================
+         CONSTANTS
+         ================================================================ */
+      const W = 1920,
+        H = 1080;
+      const TOTAL_DUR = 6.5;
+
+      /* ASR-anchored timing (the source source frame counts converted to seconds at 30fps). */
+      const TIMING = {
+        // Phase 1: video + badge enter
+        badgeAt: 0.17,
+        badgeDur: 0.7,
+        videoEntryAt: 0.17,
+        videoEntryDur: 0.7,
+
+        // Phase 2: video slides, MP4 appears
+        slideAt: 2.2,
+        videoSlideDur: 0.8,
+        videoSlideX: W * 0.29,
+        videoSlideScale: 0.92,
+
+        statEntryDur: 0.6,
+        statEntryX: W * 0.6,
+        statBreathAt: 3.0, // entry settles by here, breath begins
+        statBreathDur: 0.86, // until exit at 3.86
+
+        // Phase 3: pivot — both exit, typing begins
+        pivotAt: 3.86,
+        exitDur: 0.6,
+        videoExitX: -W * 0.5,
+        statExitX: -W * 0.7,
+        typingStageDur: 0.5,
+
+        // Phase 3 typing
+        typingStartAt: 4.36, // pivotAt + 0.5 s stage settle
+        typeRate: 30, // chars/sec
+
+        // Phase 4: pill
+        pillAt: 4.83, // typing reaches line2 at this time
+        pillDur: 0.6,
+        pillGlowDur: 0.8,
+      };
+
+      /* Text segments and boundaries */
+      const SEG = {
+        main: "HTML ",
+        accent: "pages",
+        suffix: " become ",
+        accent2: "video",
+        line2: "frame by frame.",
+      };
+      const BOUNDS = {
+        mainEnd: SEG.main.length, // 5
+        accentEnd: SEG.main.length + SEG.accent.length, // 10
+        suffixEnd: SEG.main.length + SEG.accent.length + SEG.suffix.length, // 18
+        accent2End: SEG.main.length + SEG.accent.length + SEG.suffix.length + SEG.accent2.length, // 23
+        line2End:
+          SEG.main.length +
+          SEG.accent.length +
+          SEG.suffix.length +
+          SEG.accent2.length +
+          SEG.line2.length, // 38
+      };
+      const TYPING_DUR = (BOUNDS.line2End - 0) / TIMING.typeRate; // ≈ 1.3 s
+
+      /* ================================================================
+         BUILD DOM — 5-layer depth stack for "MP4"
+         ================================================================ */
+      const LAYER_COUNT = 5;
+      const OFFSET_X = 1;
+      const OFFSET_Y = 2;
+      const depthStack = document.getElementById("depth-stack-97");
+      const depthText = depthStack.dataset.text;
+      for (let i = 0; i < LAYER_COUNT; i++) {
+        const layer = document.createElement("div");
+        layer.className = "depth-layer " + (i === LAYER_COUNT - 1 ? "front" : "back");
+        layer.textContent = depthText;
+        if (i < LAYER_COUNT - 1) {
+          layer.setAttribute("aria-hidden", "true");
+          const alpha = 0.62 + 0.08 * (LAYER_COUNT - 2 - i);
+          layer.style.setProperty("--alpha", alpha);
+          layer.style.setProperty("--top", i * OFFSET_Y + "px");
+          layer.style.setProperty("--left", -i * OFFSET_X + "px");
+        }
+        depthStack.appendChild(layer);
+      }
+
+      /* ================================================================
+         INITIAL STATES (via gsap.set, before the timeline runs)
+         ================================================================ */
+      gsap.set("#badge", { opacity: 0, scale: 0.9 });
+
+      // Video starts centered (x = W/2, y = H/2 via the .video-pos margin trick)
+      gsap.set("#video-pos", { x: W / 2, y: H / 2, scale: 0.6, opacity: 0 });
+
+      // Stat starts off-right + below + small + invisible
+      gsap.set("#stat-pos", { x: TIMING.statEntryX, y: H * 0.42 + 60, scale: 0.3, opacity: 0 });
+
+      gsap.set("#typing-stage", { scale: 0.9, opacity: 0 });
+
+      /* ================================================================
+         TIMELINE
+         ================================================================ */
+      window.__timelines = window.__timelines || {};
+      const tl = gsap.timeline({ paused: true });
+      window.__timelines["main"] = tl;
+
+      /* ----------------------------------------------------------------
+         PHASE 1: Badge + Video entry
+         ---------------------------------------------------------------- */
+      tl.to(
+        "#badge",
+        {
+          opacity: 1,
+          scale: 1,
+          duration: TIMING.badgeDur,
+          ease: "power3.out",
+        },
+        TIMING.badgeAt,
+      );
+
+      tl.to(
+        "#video-pos",
+        {
+          scale: 1,
+          opacity: 1,
+          duration: TIMING.videoEntryDur,
+          ease: "power3.out", // spring(stiffness:80, damping:15)
+        },
+        TIMING.videoEntryAt,
+      );
+
+      /* ----------------------------------------------------------------
+         PHASE 2: Video slides left, MP4 appears on right
+         ---------------------------------------------------------------- */
+      tl.to(
+        "#video-pos",
+        {
+          x: TIMING.videoSlideX,
+          scale: TIMING.videoSlideScale,
+          duration: TIMING.videoSlideDur,
+          ease: "power3.out", // spring(stiffness:100, damping:18)
+        },
+        TIMING.slideAt,
+      );
+
+      tl.to(
+        "#stat-pos",
+        {
+          y: H * 0.42, // rises to final y
+          scale: 1,
+          opacity: 1,
+          duration: TIMING.statEntryDur,
+          ease: "back.out(1.6)", // spring(stiffness:150, damping:12)
+        },
+        TIMING.slideAt,
+      );
+
+      /* ----------------------------------------------------------------
+         PHASE 3: Pivot — video + stat exit; typing fades in
+         ---------------------------------------------------------------- */
+      tl.to(
+        "#video-pos",
+        {
+          x: TIMING.videoExitX,
+          scale: 0.8,
+          opacity: 0,
+          duration: TIMING.exitDur,
+          ease: "power3.out", // spring(stiffness:120, damping:20)
+        },
+        TIMING.pivotAt,
+      );
+
+      tl.to(
+        "#stat-pos",
+        {
+          x: TIMING.statExitX,
+          scale: 0.8,
+          opacity: 0,
+          duration: TIMING.exitDur,
+          ease: "power3.out",
+        },
+        TIMING.pivotAt,
+      );
+
+      tl.to(
+        "#typing-stage",
+        {
+          scale: 1,
+          opacity: 1,
+          duration: TIMING.typingStageDur,
+          ease: "power3.out", // spring(stiffness:100, damping:15)
+        },
+        TIMING.pivotAt,
+      );
+
+      /* ----------------------------------------------------------------
+         PHASE 3 (continued): Character-by-character typing
+         ---------------------------------------------------------------- */
+      const segMain = document.querySelector(".seg.main");
+      const segAccent = document.querySelector(".seg.accent");
+      const segSuffix = document.querySelector(".seg.suffix");
+      const segAccent2 = document.querySelector(".seg.accent2");
+      const segLine2 = document.querySelector(".seg.line2");
+
+      const typeProxy = { idx: 0 };
+      function typedIndexAt(t) {
+        if (t < TIMING.typingStartAt) return 0;
+        return Math.min(BOUNDS.line2End, Math.floor((t - TIMING.typingStartAt) * TIMING.typeRate));
+      }
+
+      function renderTypedText(i) {
+        const m = SEG.main.slice(0, Math.min(i, BOUNDS.mainEnd));
+        const a = SEG.accent.slice(0, Math.max(0, Math.min(i - BOUNDS.mainEnd, SEG.accent.length)));
+        const s = SEG.suffix.slice(
+          0,
+          Math.max(0, Math.min(i - BOUNDS.accentEnd, SEG.suffix.length)),
+        );
+        const a2 = SEG.accent2.slice(
+          0,
+          Math.max(0, Math.min(i - BOUNDS.suffixEnd, SEG.accent2.length)),
+        );
+        const l2 = SEG.line2.slice(
+          0,
+          Math.max(0, Math.min(i - BOUNDS.accent2End, SEG.line2.length)),
+        );
+        if (segMain.textContent !== m) segMain.textContent = m;
+        if (segAccent.textContent !== a) segAccent.textContent = a;
+        if (segSuffix.textContent !== s) segSuffix.textContent = s;
+        if (segAccent2.textContent !== a2) segAccent2.textContent = a2;
+        if (segLine2.textContent !== l2) segLine2.textContent = l2;
+      }
+
+      tl.to(
+        typeProxy,
+        {
+          idx: BOUNDS.line2End,
+          duration: TYPING_DUR,
+          ease: "none",
+          onUpdate: function () {
+            renderTypedText(Math.floor(typeProxy.idx));
+          },
+        },
+        TIMING.typingStartAt,
+      );
+
+      /* ----------------------------------------------------------------
+         PHASE 4: Gradient pill behind line 2
+         ---------------------------------------------------------------- */
+      gsap.set("#pill-bg", { scaleX: 0, scaleY: 0.5, opacity: 0 });
+      gsap.set("#pill-glow", { opacity: 0 });
+
+      tl.to(
+        "#pill-bg",
+        {
+          scaleX: 1,
+          scaleY: 1,
+          opacity: 0.9,
+          duration: TIMING.pillDur,
+          ease: "power3.out", // spring(stiffness:80, damping:15)
+        },
+        TIMING.pillAt,
+      );
+
+      tl.to(
+        "#pill-glow",
+        {
+          opacity: 0.5,
+          duration: TIMING.pillGlowDur,
+          ease: "power2.out",
+        },
+        TIMING.pillAt,
+      );
+
+      tl.to(
+        ".line2-content",
+        {
+          opacity: 1,
+          duration: 0.18,
+          ease: "power2.out",
+        },
+        TIMING.pillAt + 0.3,
+      );
+
+      /* ----------------------------------------------------------------
+         CONTINUOUS SCENE-TICKER — float, breath, cursor blink
+         All gated by time windows so they only fire when visible.
+         ---------------------------------------------------------------- */
+      const videoFloat = document.getElementById("video-float");
+      const statBreathEl = document.getElementById("stat-breath");
+      const cursor1El = document.getElementById("cursor1");
+      const cursor2El = document.getElementById("cursor2");
+
+      tl.to(
+        { tick: 0 },
+        {
+          tick: 1,
+          duration: TOTAL_DUR,
+          ease: "none",
+          onUpdate: function () {
+            const t = tl.time();
+            const idx = typedIndexAt(t);
+            renderTypedText(idx);
+
+            // Video float — only while video is visible (Phase 1 + 2)
+            if (t < TIMING.pivotAt) {
+              const floatY = Math.sin(t * 0.9) * 6;
+              gsap.set(videoFloat, { y: floatY });
+            }
+
+            // Stat breath — only while MP4 is settled and not yet exiting
+            if (t > TIMING.statBreathAt && t < TIMING.pivotAt) {
+              const breath = 1 + Math.sin((t - TIMING.statBreathAt) * 1.2) * 0.02;
+              gsap.set(statBreathEl, { scale: breath });
+            }
+
+            // Cursor blink — 1 Hz (Math.floor(t * 2) % 2 === 0 → on for 0.5s, off for 0.5s)
+            const blink = Math.floor(t * 2) % 2 === 0 ? 1 : 0;
+
+            // Cursor 1: visible while typing line 1 (idx < accent2End)
+            // Determine cursor color: green when typing accent segments, white otherwise.
+            if (t >= TIMING.typingStartAt && idx < BOUNDS.accent2End) {
+              const inAccent = idx >= BOUNDS.mainEnd && idx < BOUNDS.accentEnd;
+              const inAccent2 = idx >= BOUNDS.suffixEnd && idx < BOUNDS.accent2End;
+              const isGreen = inAccent || inAccent2;
+              cursor1El.style.opacity = blink;
+              if (cursor1El._lastGreen !== isGreen) {
+                cursor1El.classList.toggle("green", isGreen);
+                cursor1El._lastGreen = isGreen;
+              }
+            } else {
+              cursor1El.style.opacity = 0;
+            }
+
+            // Cursor 2: visible while typing line 2 (idx ≥ accent2End && idx < line2End)
+            if (idx >= BOUNDS.accent2End && idx < BOUNDS.line2End) {
+              cursor2El.style.opacity = blink;
+            } else {
+              cursor2El.style.opacity = 0;
+            }
+          },
+        },
+        0,
+      );
+    </script>
+  </body>
+</html>
diff --git a/.claude/skills-media/hyperframes-animation/examples/problem-mockup-overwhelm.html b/.claude/skills-media/hyperframes-animation/examples/problem-mockup-overwhelm.html
new file mode 100644
index 000000000..a5f780045
--- /dev/null
+++ b/.claude/skills-media/hyperframes-animation/examples/problem-mockup-overwhelm.html
@@ -0,0 +1,1374 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Scene — HyperFrames Problem Mockup Overwhelm</title>
+
+    <!--
+      Blueprint: problem-mockup-overwhelm (HyperFrames preview)
+      HyperFrames-native version of the scene-02-mockup-morph-overwhelm concept.
+
+      Choreography (4 phases, 6 seconds total):
+        0.00 – 0.55s   Three HyperFrames workflow mockups spring-in (left → right → center)
+                       Check panel left · render queue right · preview timeline center
+        0.33 – 0.95s   Nine scattered HyperFrames tool icons stagger in around the cluster
+        3.20 – 3.80s   MORPH:
+                         center mockup compositor-scale down to the avatar footprint
+                         borderRadius repaint (42px → 50% = reads as circle)
+                         content fades out at 0-40% of morph
+                         non-center mockups + icons exit concurrently
+                         avatar pop (scale 0 → 1) starts at morph trigger
+                         avatar layer opacity fades in at 50% of morph
+                         at 85-100% of morph, mockup-center fades to 0 → avatar visible underneath
+        3.53 – 4.40s   Eight task bubbles stagger-enter in a radial pattern around the avatar
+        4.40 – 6.00s   Idle: bubble micro-float + avatar orbit dots + avatar breath
+          paint-only tween. The "rect → circle" effect is completed by the final 0.51s-onward
+          opacity hand-off to the avatar element rendered underneath at z-index 20.
+        - Both mockup layer and avatar layer stay in DOM (no `{showX && <Y />}` conditional render);
+          opacity gates visibility — required because HyperFrames seek can move time backwards.
+        - All `Math.sin(frame * ...)` continuous motion replaced by:
+            mockup float / bubble float / orbit dots → shared onUpdate scene-ticker reading tl.time()
+            avatar breath → finite sine.inOut yoyo (multiplicative onto pop scale)
+        - The animated dark-frosted-glass blob background was replaced with a static
+          gradient + frosted overlay for renderer determinism and file size.
+        - Avatar video source replaced with a CSS gradient circle (no asset required).
+          To use a real video, swap the inner .avatar-disc for a <video muted playsinline>.
+        - Bubbles are generated via JS `forEach` at script load — positions pre-baked in
+          inline `left`/`top`; GSAP tweens only `scale`/`opacity`/`x`/`y`.
+
+      Spring → ease mapping (from skill SKILL.md):
+        spring(stiffness:70,  damping:14)  → back.out(1.4)    (mockup entry)
+        spring(stiffness:180, damping:14)  → back.out(1.6)    (icon entry)
+        spring(stiffness:80,  damping:18)  → power3.out       (morph driver)
+        spring(stiffness:120, damping:14)  → back.out(1.4)    (avatar pop)
+        spring(stiffness:180, damping:12)  → back.out(1.4)    (bubble pop)
+    -->
+
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+
+    <style>
+      :root {
+        --bg-base: #0a0a0f;
+        --text-primary: #ffffff;
+        --surface-dark: #000000;
+        --surface-mid: #16213e;
+        --surface-light: rgba(255, 255, 255, 0.98);
+        --line-soft: rgba(139, 92, 246, 0.5);
+        --bubble-bg: rgba(255, 255, 255, 0.95);
+        --bubble-border: rgba(139, 92, 246, 0.5);
+        --bubble-text: #1f2937;
+        --brand-cyan: #06b6d4;
+        --brand-teal: #14b8a6;
+        --brand-green: #00f2ea;
+        --brand-blue: #0ea5e9;
+        --brand-purple: #8b5cf6;
+        --brand-pink: #ec4899;
+        --brand-orange: #fb923c;
+        --brand-ink: #0f0f0f;
+        --accent-lime: #facc15;
+        --accent-mint: #ffffff;
+        --warn-amber: #ffc107;
+        --tt-cyan: #00f2ea;
+      }
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        margin: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: var(--bg-base);
+        font-family:
+          "Inter",
+          system-ui,
+          -apple-system,
+          sans-serif;
+        color: var(--text-primary);
+      }
+
+      /* ============================================================
+         BACKGROUND (dark frosted glass, matching TSX reference)
+         ============================================================ */
+      .bg {
+        position: absolute;
+        inset: 0;
+        overflow: hidden;
+        background: radial-gradient(
+          ellipse 120% 100% at 50% 20%,
+          rgba(30, 30, 45, 1) 0%,
+          rgba(18, 18, 28, 1) 40%,
+          rgba(10, 10, 15, 1) 100%
+        );
+      }
+      .bg::before {
+        content: "";
+        position: absolute;
+        inset: 0;
+        background: rgba(15, 15, 25, 0.4);
+        backdrop-filter: blur(80px) saturate(180%);
+        -webkit-backdrop-filter: blur(80px) saturate(180%);
+      }
+      .bg::after {
+        content: "";
+        position: absolute;
+        inset: 0;
+        background:
+          linear-gradient(
+            180deg,
+            rgba(255, 255, 255, 0.08) 0%,
+            rgba(255, 255, 255, 0.02) 5%,
+            transparent 15%,
+            transparent 100%
+          ),
+          linear-gradient(0deg, rgba(139, 92, 246, 0.05) 0%, transparent 20%, transparent 100%);
+      }
+      .bg-frost {
+        position: absolute;
+        inset: 0;
+        opacity: 0.5;
+        filter: blur(120px);
+        background:
+          radial-gradient(
+            circle 550px at 30% 35%,
+            rgba(139, 92, 246, 0.7) 0%,
+            rgba(139, 92, 246, 0.3) 40%,
+            transparent 70%
+          ),
+          radial-gradient(
+            circle 500px at 70% 65%,
+            rgba(6, 182, 212, 0.6) 0%,
+            rgba(6, 182, 212, 0.25) 40%,
+            transparent 70%
+          ),
+          radial-gradient(
+            circle 400px at 50% 80%,
+            rgba(251, 146, 60, 0.5) 0%,
+            rgba(251, 146, 60, 0.2) 40%,
+            transparent 70%
+          ),
+          radial-gradient(
+            circle 350px at 20% 60%,
+            rgba(236, 72, 153, 0.4) 0%,
+            rgba(236, 72, 153, 0.15) 40%,
+            transparent 70%
+          );
+      }
+      .vignette {
+        position: absolute;
+        inset: 0;
+        background-image:
+          radial-gradient(
+            ellipse 80% 80% at 50% 50%,
+            transparent 0%,
+            transparent 50%,
+            rgba(0, 0, 0, 0.3) 100%
+          ),
+          url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E"),
+          repeating-linear-gradient(
+            0deg,
+            transparent,
+            transparent 2px,
+            rgba(255, 255, 255, 0.00075) 2px,
+            rgba(255, 255, 255, 0.00075) 4px
+          );
+        pointer-events: none;
+        z-index: 400;
+      }
+
+      /* ============================================================
+         MOCKUP CLUSTER (Phase 1-2)
+         ============================================================ */
+      .mockup-cluster {
+        position: absolute;
+        inset: 0;
+        perspective: 1400px;
+        transform-style: preserve-3d;
+      }
+
+      /* Fitness-style phone shells */
+      .mockup {
+        position: absolute;
+        left: 50%;
+        top: 50%;
+        width: 320px;
+        height: 650px;
+        border-radius: 42px;
+        background: transparent;
+        transform-origin: center center;
+        transform-style: preserve-3d;
+        will-change: transform, opacity;
+      }
+      .mockup-left {
+        z-index: 10;
+      }
+      .mockup-right {
+        z-index: 12;
+      }
+      .mockup-center {
+        z-index: 25;
+        background: var(--surface-dark);
+        box-shadow:
+          0 24px 70px rgba(0, 0, 0, 0.4),
+          0 0 40px rgba(0, 242, 234, 0.15);
+        overflow: hidden;
+      }
+
+      .phone-shell {
+        position: absolute;
+        inset: 0;
+        border-radius: 42px;
+        background: #000000;
+        padding: 8px;
+        box-shadow:
+          0 18px 60px rgba(0, 0, 0, 0.3),
+          0 4px 16px rgba(0, 0, 0, 0.18),
+          inset 0 0 0 3px #333333;
+        overflow: hidden;
+        will-change: opacity;
+      }
+
+      .phone-notch {
+        position: absolute;
+        top: 8px;
+        left: 50%;
+        width: 100px;
+        height: 26px;
+        border-radius: 0 0 18px 18px;
+        background: #000000;
+        transform: translateX(-50%);
+        z-index: 5;
+      }
+
+      .phone-screen {
+        position: relative;
+        width: 100%;
+        height: 100%;
+        border-radius: 35px;
+        overflow: hidden;
+        display: flex;
+        flex-direction: column;
+      }
+
+      .mockup-left .phone-screen,
+      .mockup-right .phone-screen {
+        background: rgba(255, 255, 255, 0.98);
+        padding-top: 30px;
+      }
+
+      .mockup-center .phone-screen {
+        background: #000000;
+      }
+
+      .mockup-content {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        min-height: 0;
+        will-change: opacity;
+      }
+
+      /* --- HyperFrames Check (left) --- */
+      .yt-header {
+        padding: 14px 18px;
+        background: #f9f9f9;
+        border-bottom: 1px solid #e5e5e5;
+        display: flex;
+        align-items: center;
+        gap: 10px;
+        font: 600 16px/1 Inter;
+        color: #0f0f0f;
+      }
+      .yt-header svg .hf-logo-left {
+        fill: url(#hf-mini-grad-left);
+      }
+      .yt-body {
+        padding: 18px;
+        color: #0f0f0f;
+      }
+      .yt-body h3 {
+        font: 700 17px/1.2 Inter;
+        margin-bottom: 12px;
+      }
+      .yt-thumb {
+        height: 130px;
+        background: linear-gradient(135deg, #1a1a2e, #16213e);
+        border-radius: 10px;
+        margin-bottom: 14px;
+        padding: 18px;
+        display: grid;
+        gap: 8px;
+        align-content: center;
+      }
+      .code-line {
+        height: 10px;
+        border-radius: 5px;
+        background: rgba(255, 255, 255, 0.24);
+      }
+      .code-line:nth-child(1) {
+        width: 74%;
+        background: #ff0000;
+      }
+      .code-line:nth-child(2) {
+        width: 58%;
+      }
+      .code-line:nth-child(3) {
+        width: 86%;
+      }
+      .code-line:nth-child(4) {
+        width: 46%;
+        background: rgba(255, 255, 255, 0.3);
+      }
+      .code-line:nth-child(5) {
+        width: 68%;
+      }
+      .code-line:nth-child(6) {
+        width: 52%;
+        background: rgba(255, 255, 255, 0.28);
+      }
+      .yt-progress-fill {
+        width: 72%;
+        height: 100%;
+        background: #ff0000;
+        border-radius: 3px;
+      }
+      .yt-progress-row {
+        display: flex;
+        justify-content: space-between;
+        font: 500 12px/1 Inter;
+        color: #606060;
+        margin-bottom: 6px;
+      }
+      .yt-progress-track {
+        height: 5px;
+        background: #e5e5e5;
+        border-radius: 3px;
+        overflow: hidden;
+      }
+      .yt-task-label {
+        font: 500 12px/1 Inter;
+        color: #606060;
+        margin-top: 16px;
+        margin-bottom: 8px;
+      }
+      .yt-task {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        margin-bottom: 6px;
+        font: 400 12px/1.2 Inter;
+        color: #606060;
+      }
+      .yt-task::before {
+        content: "";
+        width: 13px;
+        height: 13px;
+        border: 2px solid #909090;
+        border-radius: 50%;
+        background: transparent;
+        flex-shrink: 0;
+      }
+      .yt-footer {
+        margin-top: auto;
+        padding: 12px 18px;
+        background: #fff4e5;
+        border-top: 1px solid #ffe0b2;
+        font: 500 12px/1 Inter;
+        color: #e65100;
+        display: flex;
+        align-items: center;
+        gap: 8px;
+      }
+
+      /* --- HyperFrames Preview (center) — content fades during morph --- */
+      .tt-statusbar {
+        padding: 10px 14px;
+        display: flex;
+        justify-content: space-between;
+        font: 500 12px/1 Inter;
+        color: var(--accent-mint);
+      }
+      .tt-preview {
+        flex: 1;
+        position: relative;
+        background: linear-gradient(180deg, #1a1a2e 0%, #16213e 100%);
+      }
+      .tt-overlay {
+        position: absolute;
+        top: 14px;
+        left: 14px;
+        right: 14px;
+        background: rgba(0, 0, 0, 0.6);
+        border-radius: 10px;
+        padding: 10px 12px;
+        border: none;
+        backdrop-filter: blur(10px);
+        -webkit-backdrop-filter: blur(10px);
+      }
+      .tt-overlay-title {
+        font: 500 12px/1 Inter;
+        color: white;
+        margin-bottom: 4px;
+      }
+      .tt-overlay-sub {
+        font: 400 10px/1.2 Inter;
+        color: rgba(216, 254, 255, 0.72);
+      }
+      .tt-play {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        width: 60px;
+        height: 60px;
+        margin: -30px 0 0 -30px;
+        border-radius: 50%;
+        background: rgba(255, 255, 255, 0.3);
+        box-shadow: none;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 22px;
+        color: white;
+      }
+      .tt-side {
+        position: absolute;
+        right: 12px;
+        bottom: 70px;
+        display: flex;
+        flex-direction: column;
+        gap: 14px;
+        font: 500 10px/1 Inter;
+        color: white;
+        text-align: center;
+      }
+      .tt-side div {
+        display: flex;
+        flex-direction: column;
+        gap: 3px;
+      }
+      .tt-side span {
+        font-size: 18px;
+        font-weight: 800;
+        color: #ffffff;
+      }
+      .tt-timeline {
+        padding: 12px;
+        background: #111111;
+      }
+      .tt-strip {
+        display: flex;
+        gap: 4px;
+        margin-bottom: 8px;
+      }
+      .tt-clip {
+        flex: 1;
+        height: 32px;
+        border-radius: 4px;
+        background: #333333;
+        opacity: 0.6;
+      }
+      .tt-clip.active {
+        background: var(--tt-cyan);
+        opacity: 1;
+      }
+      .tt-note {
+        font: 500 10px/1 Inter;
+        color: #888888;
+        text-align: center;
+      }
+      .tt-tabs {
+        padding: 10px 18px;
+        background: #000000;
+        display: flex;
+        justify-content: space-around;
+        font: 500 11px/1 Inter;
+        color: white;
+      }
+
+      /* --- HyperFrames Render (right) --- */
+      .ig-header {
+        padding: 12px 16px;
+        border-bottom: 1px solid #efefef;
+        display: flex;
+        align-items: center;
+        gap: 10px;
+        font: 600 15px/1 Inter;
+        color: #262626;
+      }
+      .ig-body {
+        padding: 14px;
+        flex: 1;
+        color: #262626;
+      }
+      .ig-body h3 {
+        font: 500 13px/1 Inter;
+        margin-bottom: 12px;
+      }
+      .ig-warn {
+        background: #fff3cd;
+        border: 1px solid #ffc107;
+        border-radius: 10px;
+        padding: 10px 12px;
+        margin-bottom: 14px;
+      }
+      .ig-warn-title {
+        font: 500 12px/1.1 Inter;
+        color: #856404;
+      }
+      .ig-warn-sub {
+        font: 400 11px/1.2 Inter;
+        color: #856404;
+        margin-top: 4px;
+      }
+      .ig-task-label {
+        font: 500 13px/1 Inter;
+        color: #262626;
+        margin-bottom: 8px;
+      }
+      .ig-task {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        margin-bottom: 6px;
+        font: 400 12px/1.2 Inter;
+        color: #666666;
+      }
+      .ig-task::before {
+        content: "";
+        width: 12px;
+        height: 12px;
+        border: 2px solid #c7c7c7;
+        border-radius: 50%;
+        background: transparent;
+        flex-shrink: 0;
+      }
+      .ig-time {
+        margin-top: 14px;
+        background: #ffebee;
+        border-radius: 8px;
+        padding: 10px 12px;
+        font: 500 12px/1 Inter;
+        color: #c62828;
+      }
+      .ig-footer {
+        margin-top: auto;
+        padding: 12px 14px;
+        border-top: 1px solid #efefef;
+        background: #fafafa;
+      }
+      .ig-share {
+        background: linear-gradient(90deg, #833ab4, #fd1d1d, #fcaf45);
+        border-radius: 10px;
+        padding: 11px 0;
+        text-align: center;
+        font: 600 13px/1 Inter;
+        color: #ffffff;
+      }
+
+      /* ============================================================
+         PLATFORM ICONS — scattered, positions pre-baked in CSS
+         ============================================================ */
+      .platform-icon {
+        position: absolute;
+        border-radius: 22%;
+        background: rgba(255, 255, 255, 0.98);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);
+        border: none;
+        z-index: 30;
+        will-change: transform, opacity;
+      }
+      .platform-icon svg {
+        width: 62%;
+        height: 62%;
+      }
+      .platform-icon .icon-type {
+        font: 800 25px/1 Inter;
+        letter-spacing: 0;
+        color: #063238;
+      }
+      .platform-icon .icon-small {
+        font-size: 20px;
+      }
+
+      /* Nine icon positions — taken from the the source SCATTERED_ICONS array */
+      .pi-youtube {
+        left: calc(22% + 100px);
+        top: calc(20% - 179px);
+        width: 102px;
+        height: 102px;
+      }
+      .pi-google {
+        left: calc(60% + 16px);
+        top: calc(15% - 113px);
+        width: 96px;
+        height: 96px;
+      }
+      .pi-instagram {
+        left: calc(88% - 73px);
+        top: calc(25% - 103px);
+        width: 102px;
+        height: 102px;
+      }
+      .pi-tiktok {
+        left: 10%;
+        top: calc(48% - 101px);
+        width: 90px;
+        height: 90px;
+      }
+      .pi-tripadvisor {
+        left: calc(94% - 89px);
+        top: calc(55% - 45px);
+        width: 84px;
+        height: 84px;
+      }
+      .pi-facebook {
+        left: 15%;
+        top: 75%;
+        width: 90px;
+        height: 90px;
+      }
+      .pi-twitter {
+        left: 42%;
+        top: 85%;
+        width: 84px;
+        height: 84px;
+      }
+      .pi-linkedin {
+        left: 70%;
+        top: 85%;
+        width: 78px;
+        height: 78px;
+      }
+      .pi-yelp {
+        left: calc(92% - 165px);
+        top: calc(72% + 4px);
+        width: 90px;
+        height: 90px;
+      }
+
+      /* ============================================================
+         AVATAR + BUBBLES (Phase 3-4)
+         Initially opacity 0; opacity tween reveals at morph hand-off.
+         ============================================================ */
+      .avatar-with-bubbles {
+        position: absolute;
+        inset: 0;
+        opacity: 0;
+        will-change: opacity;
+      }
+      .avatar-stage {
+        position: absolute;
+        left: 50%;
+        top: 50%;
+        z-index: 20;
+        will-change: transform;
+      }
+      .avatar-ring {
+        width: 220px;
+        height: 220px;
+        border-radius: 50%;
+        padding: 5px;
+        background: linear-gradient(135deg, #14b8a6, #06b6d4, #0ea5e9);
+        box-shadow:
+          0 0 60px rgba(20, 184, 166, 0.5),
+          0 0 120px rgba(6, 182, 212, 0.3);
+      }
+      .avatar-disc {
+        width: 100%;
+        height: 100%;
+        border-radius: 50%;
+        border: 3px solid rgba(255, 255, 255, 0.25);
+        background:
+          radial-gradient(circle at 40% 35%, rgba(255, 255, 255, 0.2), transparent 50%),
+          conic-gradient(from 40deg, #14b8a6 0%, #06b6d4 35%, #0ea5e9 65%, #8b5cf6 100%);
+        overflow: hidden;
+      }
+      .orbit-dot {
+        position: absolute;
+        left: 50%;
+        top: 50%;
+        width: 10px;
+        height: 10px;
+        margin: -5px 0 0 -5px;
+        border-radius: 50%;
+        will-change: transform, opacity;
+      }
+      .orbit-dot:nth-child(1) {
+        background: var(--accent-lime);
+      }
+      .orbit-dot:nth-child(2) {
+        background: var(--brand-purple);
+      }
+      .orbit-dot:nth-child(3) {
+        background: var(--accent-lime);
+      }
+      .orbit-dot:nth-child(4) {
+        background: var(--brand-purple);
+      }
+
+      .task-bubble {
+        position: absolute;
+        z-index: 30;
+        background: var(--bubble-bg);
+        border: 3px solid var(--bubble-border);
+        border-radius: 24px;
+        padding: 22px 34px;
+        box-shadow: 0 12px 35px rgba(139, 92, 246, 0.3);
+        font: 500 26px/1.4 Inter;
+        color: var(--bubble-text);
+        white-space: nowrap;
+        will-change: transform, opacity;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="main"
+      data-start="0"
+      data-duration="6"
+      data-width="1920"
+      data-height="1080"
+    >
+      <div class="bg"></div>
+      <div class="bg-frost"></div>
+
+      <div
+        id="problem-mockup-overwhelm-scene"
+        class="scene clip"
+        data-start="0"
+        data-duration="6"
+        data-track-index="1"
+      >
+        <!-- ===== Phase 1-2: Mockup cluster + scattered icons ===== -->
+        <div class="mockup-cluster">
+          <!-- HyperFrames Check mockup (left) -->
+          <div class="mockup mockup-left">
+            <div class="phone-shell">
+              <div class="phone-notch"></div>
+              <div class="phone-screen">
+                <div class="mockup-content yt-content">
+                  <div class="yt-header">
+                    <svg viewBox="0 0 24 24" width="22" height="22" aria-hidden="true">
+                      <defs>
+                        <linearGradient id="hf-mini-grad-left" x1="2" y1="4" x2="22" y2="20">
+                          <stop offset="0%" stop-color="#ff0000" />
+                          <stop offset="100%" stop-color="#cc0000" />
+                        </linearGradient>
+                      </defs>
+                      <path
+                        class="hf-logo-left"
+                        d="M4 9.5 11.5 5c2.7-1.6 5.7.8 5.1 3.8L15 17.5c-.5 2.8-3.8 4-6 2.2L3.2 15c-2-1.6-1.5-4.2.8-5.5Z"
+                      />
+                      <path
+                        class="hf-logo-left"
+                        d="M13.2 6.5 20.8 11c2.4 1.4 2.4 4.6 0 6l-7.6 4.5c-2.6 1.5-5.8-.7-5.2-3.6l1.8-9c.5-2.8 3-3.8 3.4-2.4Z"
+                        opacity="0.82"
+                      />
+                    </svg>
+                    HyperFrames Check
+                  </div>
+                  <div class="yt-body">
+                    <h3>Validate composition</h3>
+                    <div class="yt-thumb">
+                      <div class="code-line"></div>
+                      <div class="code-line"></div>
+                      <div class="code-line"></div>
+                      <div class="code-line"></div>
+                      <div class="code-line"></div>
+                      <div class="code-line"></div>
+                    </div>
+                    <div class="yt-progress-row"><span>Lint + inspect</span><span>72%</span></div>
+                    <div class="yt-progress-track"><div class="yt-progress-fill"></div></div>
+                    <div class="yt-task-label">Render-safe rules:</div>
+                    <div class="yt-task">data-start / duration set</div>
+                    <div class="yt-task">Timeline registered</div>
+                    <div class="yt-task">Assets resolve locally</div>
+                    <div class="yt-task">Text fits every frame</div>
+                  </div>
+                  <div class="yt-footer">npm run check before render</div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- HyperFrames Preview mockup (center, morph target) -->
+          <div class="mockup mockup-center">
+            <div class="phone-shell">
+              <div class="phone-notch"></div>
+              <div class="phone-screen">
+                <div class="mockup-content tt-content">
+                  <div class="tt-statusbar"><span>9:41</span><span>HF</span></div>
+                  <div class="tt-preview">
+                    <div class="tt-overlay">
+                      <div class="tt-overlay-title">Scene 05 · seekable</div>
+                      <div class="tt-overlay-sub">GSAP timeline + data clips</div>
+                    </div>
+                    <div class="tt-play">HF</div>
+                    <div class="tt-side">
+                      <div><span>12</span>Clips</div>
+                      <div><span>4</span>Tracks</div>
+                      <div><span>V</span>Vars</div>
+                      <div><span>MP4</span>Render</div>
+                    </div>
+                  </div>
+                  <div class="tt-timeline">
+                    <div class="tt-strip">
+                      <div class="tt-clip"></div>
+                      <div class="tt-clip"></div>
+                      <div class="tt-clip active"></div>
+                      <div class="tt-clip"></div>
+                      <div class="tt-clip"></div>
+                      <div class="tt-clip"></div>
+                      <div class="tt-clip"></div>
+                      <div class="tt-clip"></div>
+                    </div>
+                    <div class="tt-note">0 errors · frame-safe render</div>
+                  </div>
+                  <div class="tt-tabs">
+                    <span>Clips</span><span>Tracks</span><span>Vars</span><span>Render</span>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- HyperFrames Render mockup (right) -->
+          <div class="mockup mockup-right">
+            <div class="phone-shell">
+              <div class="phone-notch"></div>
+              <div class="phone-screen">
+                <div class="mockup-content ig-content">
+                  <div class="ig-header">
+                    <svg viewBox="0 0 24 24" width="22" height="22" aria-hidden="true">
+                      <rect
+                        x="3"
+                        y="4"
+                        width="18"
+                        height="14"
+                        rx="3"
+                        fill="none"
+                        stroke="#833ab4"
+                        stroke-width="2"
+                      />
+                      <path d="M9 9.2 15 12 9 14.8Z" fill="#fd1d1d" />
+                      <path d="M6 21h12" stroke="#fcaf45" stroke-width="2" stroke-linecap="round" />
+                    </svg>
+                    Render Queue
+                  </div>
+                  <div class="ig-body">
+                    <h3>Export HyperFrames scene</h3>
+                    <div class="ig-warn">
+                      <div class="ig-warn-title">Ready for MP4 render</div>
+                      <div class="ig-warn-sub">lint · validate · inspect passed</div>
+                    </div>
+                    <div class="ig-task-label">Pipeline:</div>
+                    <div class="ig-task">Preview locally</div>
+                    <div class="ig-task">Validate runtime</div>
+                    <div class="ig-task">Inspect layout</div>
+                    <div class="ig-task">Render MP4</div>
+                    <div class="ig-task">Publish share link</div>
+                    <div class="ig-time">Draft render: ~45 sec</div>
+                  </div>
+                  <div class="ig-footer">
+                    <div class="ig-share">Publish link</div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- Nine scattered HyperFrames workflow icons -->
+          <div class="platform-icon pi-youtube">
+            <svg viewBox="0 0 24 24" aria-hidden="true">
+              <defs>
+                <linearGradient id="hf-orbit-grad" x1="2" y1="4" x2="22" y2="20">
+                  <stop offset="0%" stop-color="#14b8a6" />
+                  <stop offset="100%" stop-color="#06b6d4" />
+                </linearGradient>
+              </defs>
+              <path
+                d="M4 9.5 11.5 5c2.7-1.6 5.7.8 5.1 3.8L15 17.5c-.5 2.8-3.8 4-6 2.2L3.2 15c-2-1.6-1.5-4.2.8-5.5Z"
+                fill="url(#hf-orbit-grad)"
+              />
+              <path
+                d="M13.2 6.5 20.8 11c2.4 1.4 2.4 4.6 0 6l-7.6 4.5c-2.6 1.5-5.8-.7-5.2-3.6l1.8-9c.5-2.8 3-3.8 3.4-2.4Z"
+                fill="url(#hf-orbit-grad)"
+                opacity="0.82"
+              />
+            </svg>
+          </div>
+          <div class="platform-icon pi-google">
+            <span class="icon-type">&lt;/&gt;</span>
+          </div>
+          <div class="platform-icon pi-instagram">
+            <span class="icon-type icon-small">GS</span>
+          </div>
+          <div class="platform-icon pi-tiktok">
+            <span class="icon-type icon-small">CSS</span>
+          </div>
+          <div class="platform-icon pi-tripadvisor">
+            <svg viewBox="0 0 24 24" aria-hidden="true">
+              <path
+                d="M12 3 20 7.5v9L12 21 4 16.5v-9Z"
+                fill="none"
+                stroke="#063238"
+                stroke-width="1.6"
+              />
+              <path
+                d="M12 3v9l8-4.5M12 12 4 7.5M12 12v9"
+                stroke="#06b6d4"
+                stroke-width="1.6"
+                stroke-linecap="round"
+              />
+            </svg>
+          </div>
+          <div class="platform-icon pi-facebook">
+            <svg viewBox="0 0 24 24" aria-hidden="true">
+              <path
+                d="M4 14v-4M8 17V7M12 19V5M16 16V8M20 13v-2"
+                stroke="#063238"
+                stroke-width="2.4"
+                stroke-linecap="round"
+              />
+              <path
+                d="M8 17V7M16 16V8"
+                stroke="#06b6d4"
+                stroke-width="2.4"
+                stroke-linecap="round"
+              />
+            </svg>
+          </div>
+          <div class="platform-icon pi-twitter">
+            <span class="icon-type icon-small">CAP</span>
+          </div>
+          <div class="platform-icon pi-linkedin">
+            <span class="icon-type icon-small">MP4</span>
+          </div>
+          <div class="platform-icon pi-yelp">
+            <span class="icon-type icon-small">PUB</span>
+          </div>
+        </div>
+        <!-- /.mockup-cluster -->
+
+        <!-- ===== Phase 3-4: Avatar + task bubbles ===== -->
+        <div class="avatar-with-bubbles" id="avatar-bubbles">
+          <div class="avatar-stage" id="avatar-stage">
+            <div class="avatar-ring">
+              <div class="avatar-disc"></div>
+            </div>
+            <div class="orbit-dot" id="orbit-0"></div>
+            <div class="orbit-dot" id="orbit-1"></div>
+            <div class="orbit-dot" id="orbit-2"></div>
+            <div class="orbit-dot" id="orbit-3"></div>
+          </div>
+          <!-- task bubbles appended by JS -->
+        </div>
+      </div>
+      <!-- /.scene -->
+
+      <div class="vignette"></div>
+    </div>
+
+    <script>
+      /* ================================================================
+         CONSTANTS
+         ================================================================ */
+      const W = 1920,
+        H = 1080;
+      const MOCKUP_CENTER_W = 320; // .mockup-center intrinsic width (matches CSS)
+      const MOCKUP_CENTER_H = 650;
+      const AVATAR_DIAMETER = 220;
+      const MORPH_END_SCALE_X = AVATAR_DIAMETER / MOCKUP_CENTER_W; // ≈ 0.6875
+      const MORPH_END_SCALE_Y = AVATAR_DIAMETER / MOCKUP_CENTER_H; // ≈ 0.3385
+
+      const TIMING = {
+        // Phase 1 — center stack → side-phone fan-out
+        mockupCenterAt: 0.08,
+        mockupLeftAt: 0.2,
+        mockupRightAt: 0.28,
+        mockupEntryDur: 0.7,
+        mockupFanDur: 1.08,
+
+        // Phase 2 — icon entries
+        iconsAt: 0.33,
+        iconEntryDur: 0.45,
+        iconStagger: 0.07,
+
+        // Phase 3 — morph
+        morphAt: 3.2,
+        morphDur: 0.6,
+
+        // Avatar (pop concurrent with morph; layer opacity in at 50% of morph)
+        avatarPopAt: 3.2,
+        avatarPopDur: 0.55,
+        avatarLayerInAt: 3.5,
+        avatarLayerInDur: 0.3,
+
+        // Phase 4 — bubbles
+        bubblesAt: 3.53,
+        bubbleDur: 0.45,
+        bubbleStagger: 0.07,
+      };
+
+      const BUBBLE_TASKS = [
+        { label: "Missing data-duration", angle: 270, dx: 14, dy: -8 }, // top
+        { label: "Timeline not registered", angle: 315, dx: 122, dy: 63 }, // top-right
+        { label: "Same-track overlaps", angle: 0, dx: 86, dy: 63 }, // right
+        { label: "Text overflow at 5s", angle: 45, dx: 79, dy: -9 }, // bottom-right
+        { label: "Asset path mismatch", angle: 90 }, // bottom
+        { label: "Non-deterministic motion", angle: 135, dx: -124, dy: -32 }, // bottom-left
+        { label: "Sub-comp wiring drift", angle: 180, dx: -79, dy: 1 }, // left
+        { label: "Render blocked by console", angle: 225, dx: -128, dy: 45 }, // top-left
+      ];
+      const BUBBLE_RADIUS = 420; // px from screen center
+      const BUBBLE_CENTER_X = W / 2;
+      const BUBBLE_CENTER_Y = H / 2;
+
+      /* ================================================================
+         INITIAL STATE (GSAP owns the transform from here on)
+         ================================================================ */
+      // All phones start stacked at center, then the side phones fan out like the Fitness showcase.
+      gsap.set(".mockup-left", {
+        xPercent: -50,
+        yPercent: -50,
+        x: 0,
+        y: 0,
+        rotation: 0,
+        rotationY: 0,
+        scale: 0.86,
+        opacity: 0,
+      });
+      gsap.set(".mockup-right", {
+        xPercent: -50,
+        yPercent: -50,
+        x: 0,
+        y: 0,
+        rotation: 0,
+        rotationY: 0,
+        scale: 0.86,
+        opacity: 0,
+      });
+      gsap.set(".mockup-center", {
+        xPercent: -50,
+        yPercent: -50,
+        x: 0,
+        y: 0,
+        rotation: 0,
+        rotationY: 0,
+        scale: 0.84,
+        opacity: 0,
+      });
+
+      gsap.set(".platform-icon", { scale: 0, opacity: 0 });
+
+      // Avatar — sits centered. xPercent/yPercent centering, pop starts at scale 0.
+      gsap.set(".avatar-stage", { xPercent: -50, yPercent: -50, scale: 0 });
+
+      /* Build task bubbles deterministically at script load.
+         Positions baked into inline style; GSAP only tweens scale/opacity. */
+      const stage = document.getElementById("avatar-bubbles");
+      BUBBLE_TASKS.forEach((task, i) => {
+        const rad = (task.angle * Math.PI) / 180;
+        const x = BUBBLE_CENTER_X + Math.cos(rad) * BUBBLE_RADIUS + (task.dx || 0);
+        const y = BUBBLE_CENTER_Y + Math.sin(rad) * BUBBLE_RADIUS + (task.dy || 0);
+        const el = document.createElement("div");
+        el.className = "task-bubble";
+        el.id = "bubble-" + i;
+        el.style.left = x + "px";
+        el.style.top = y + "px";
+        el.textContent = task.label;
+        stage.appendChild(el);
+        // GSAP-owned centering + initial hidden state.
+        gsap.set(el, { xPercent: -50, yPercent: -50, scale: 0, opacity: 0 });
+      });
+
+      /* ================================================================
+         TIMELINE
+         ================================================================ */
+      window.__timelines = window.__timelines || {};
+      const tl = gsap.timeline({ paused: true });
+      window.__timelines["main"] = tl;
+
+      /* ---------------------------------------------------------------
+         PHASE 1: Mockup entries (center stack → fan-out)
+         spring(70, 14) → back.out(1.4)
+         --------------------------------------------------------------- */
+      tl.to(
+        ".mockup-center",
+        { opacity: 1, scale: 1.0, duration: TIMING.mockupEntryDur, ease: "back.out(1.4)" },
+        TIMING.mockupCenterAt,
+      );
+      tl.to(
+        ".mockup-left",
+        { opacity: 1, duration: TIMING.mockupEntryDur, ease: "back.out(1.4)" },
+        TIMING.mockupLeftAt,
+      );
+      tl.to(
+        ".mockup-left",
+        {
+          x: -370,
+          rotation: -10,
+          rotationY: 6,
+          scale: 0.92,
+          duration: TIMING.mockupFanDur,
+          ease: "expo.out",
+        },
+        TIMING.mockupLeftAt,
+      );
+      tl.to(
+        ".mockup-right",
+        { opacity: 1, duration: TIMING.mockupEntryDur, ease: "back.out(1.4)" },
+        TIMING.mockupRightAt,
+      );
+      tl.to(
+        ".mockup-right",
+        {
+          x: 370,
+          rotation: 10,
+          rotationY: -6,
+          scale: 0.92,
+          duration: TIMING.mockupFanDur,
+          ease: "expo.out",
+        },
+        TIMING.mockupRightAt,
+      );
+
+      /* ---------------------------------------------------------------
+         PHASE 2: Platform icons (staggered)
+         spring(180, 14) → back.out(1.6)
+         --------------------------------------------------------------- */
+      tl.to(
+        ".platform-icon",
+        {
+          scale: 1,
+          opacity: 1,
+          duration: TIMING.iconEntryDur,
+          ease: "back.out(1.6)",
+          stagger: { each: TIMING.iconStagger, from: "start" },
+        },
+        TIMING.iconsAt,
+      );
+
+      /* ---------------------------------------------------------------
+         PHASE 3: MORPH (the core glue)
+         spring(80, 18) → power3.out
+         --------------------------------------------------------------- */
+      // 1. Center mockup compositor-scales toward the avatar footprint.
+      tl.to(
+        ".mockup-center",
+        {
+          scaleX: MORPH_END_SCALE_X,
+          scaleY: MORPH_END_SCALE_Y,
+          duration: TIMING.morphDur,
+          ease: "power3.out",
+        },
+        TIMING.morphAt,
+      );
+
+      // 2. borderRadius repaint — reads as a circle by morph end.
+      tl.to(
+        ".mockup-center",
+        {
+          borderRadius: "50%",
+          duration: TIMING.morphDur,
+          ease: "power3.out",
+        },
+        TIMING.morphAt,
+      );
+
+      // 3. Surface shifts: black card → cyan-gradient glow.
+      tl.to(
+        ".mockup-center",
+        {
+          background: "linear-gradient(135deg, #14B8A6, #06B6D4, #0EA5E9)",
+          boxShadow: "0 0 50px rgba(20, 184, 166, 0.50), 0 0 100px rgba(6, 182, 212, 0.25)",
+          duration: TIMING.morphDur,
+          ease: "power3.out",
+        },
+        TIMING.morphAt,
+      );
+
+      // 4. Content fades during first 40% of morph (hides aspect-ratio mismatch).
+      tl.to(
+        ".mockup-center .mockup-content",
+        {
+          opacity: 0,
+          duration: TIMING.morphDur * 0.4,
+          ease: "power2.out",
+        },
+        TIMING.morphAt,
+      );
+
+      // 4b. Fade the physical phone shell early so the morph reads as a clean surface hand-off.
+      tl.to(
+        ".mockup-center .phone-shell",
+        {
+          opacity: 0,
+          duration: TIMING.morphDur * 0.45,
+          ease: "power2.out",
+        },
+        TIMING.morphAt,
+      );
+
+      // 5. Hand-off: at 85-100% of morph, container fades to 0 → avatar reveals underneath.
+      tl.to(
+        ".mockup-center",
+        {
+          opacity: 0,
+          duration: TIMING.morphDur * 0.15,
+          ease: "none",
+        },
+        TIMING.morphAt + TIMING.morphDur * 0.85,
+      );
+
+      /* Non-center mockups exit concurrently with morph */
+      tl.to(
+        [".mockup-left", ".mockup-right"],
+        {
+          opacity: 0,
+          scale: 0.85,
+          duration: TIMING.morphDur * 0.55,
+          ease: "power2.out",
+        },
+        TIMING.morphAt,
+      );
+
+      /* Platform icons exit concurrently with morph (edge-out stagger) */
+      tl.to(
+        ".platform-icon",
+        {
+          opacity: 0,
+          scale: 0.85,
+          duration: TIMING.morphDur * 0.5,
+          ease: "power2.out",
+          stagger: { each: 0.025, from: "edges" },
+        },
+        TIMING.morphAt,
+      );
+
+      /* Avatar pop — spring(120, 14) → back.out(1.4), concurrent with morph trigger */
+      tl.fromTo(
+        ".avatar-stage",
+        { scale: 0 },
+        { scale: 1, duration: TIMING.avatarPopDur, ease: "back.out(1.4)" },
+        TIMING.avatarPopAt,
+      );
+
+      /* Avatar layer opacity in at 50% of morph */
+      tl.to(
+        "#avatar-bubbles",
+        {
+          opacity: 1,
+          duration: TIMING.avatarLayerInDur,
+          ease: "power2.out",
+        },
+        TIMING.avatarLayerInAt,
+      );
+
+      /* ---------------------------------------------------------------
+         PHASE 4: Task bubbles (staggered radial entry)
+         spring(180, 12) → back.out(1.4)
+         --------------------------------------------------------------- */
+      tl.to(
+        ".task-bubble",
+        {
+          scale: 1,
+          opacity: 0.95,
+          duration: TIMING.bubbleDur,
+          ease: "back.out(1.4)",
+          stagger: { each: TIMING.bubbleStagger, from: "start" },
+        },
+        TIMING.bubblesAt,
+      );
+
+      /* ---------------------------------------------------------------
+         CONTINUOUS MOTION (shared scene-ticker onUpdate)
+         Reads tl.time() each frame; cheaper than N independent onUpdates.
+         Drives:
+           - mockup floating (Phase 1-2 only — gated to t < morphAt)
+           - platform-icon floating (same)
+           - orbit dots around avatar
+           - avatar breath (multiplicative on pop scale)
+           - bubble micro-float (after bubblesAt)
+         --------------------------------------------------------------- */
+      const orbitDots = [
+        document.getElementById("orbit-0"),
+        document.getElementById("orbit-1"),
+        document.getElementById("orbit-2"),
+        document.getElementById("orbit-3"),
+      ];
+      const ORBIT_RADIUS = 130;
+      const ORBIT_SPEED = 2; // degrees per timeline-time unit (i.e. per second × 30)
+
+      const avatarStage = document.getElementById("avatar-stage");
+      const bubbleEls = Array.from(document.querySelectorAll(".task-bubble"));
+      const mockupLeft = document.querySelector(".mockup-left");
+      const mockupRight = document.querySelector(".mockup-right");
+      const platformIcons = Array.from(document.querySelectorAll(".platform-icon"));
+
+      tl.to(
+        { tick: 0 },
+        {
+          tick: 1,
+          duration: 6.0,
+          ease: "none",
+          onUpdate: function () {
+            const t = tl.time();
+
+            /* Mockup + icon floating (only while they're visible — pre-morph) */
+            if (t < TIMING.morphAt) {
+              const mlY = Math.sin(t * 0.36) * 3;
+              const mrY = Math.sin(t * 0.45 + 1) * 3;
+              gsap.set(mockupLeft, { y: mlY });
+              gsap.set(mockupRight, { y: mrY });
+
+              platformIcons.forEach((el, i) => {
+                const fx = Math.sin((t * 30 + i * 30) * 0.025) * 5;
+                const fy = Math.cos((t * 30 + i * 20) * 0.03) * 4;
+                gsap.set(el, { x: fx, y: fy });
+              });
+            }
+
+            /* Avatar breath (multiplicative on pop scale, only after pop completes) */
+            const popEnd = TIMING.avatarPopAt + TIMING.avatarPopDur;
+            if (t >= popEnd) {
+              const idleT = t - popEnd;
+              const breath = 1 + Math.sin(idleT * 0.72) * 0.03;
+              // popScale at this point is 1.0 (back.out settled). Multiplicative → still 1.0 × breath.
+              gsap.set(avatarStage, { scale: 1 * breath });
+            }
+
+            /* Orbit dots — always cycling once avatar layer is visible */
+            if (t >= TIMING.avatarLayerInAt) {
+              orbitDots.forEach((dot, i) => {
+                const angle = (t * 30 * ORBIT_SPEED + i * 90) * (Math.PI / 180);
+                const x = Math.cos(angle) * ORBIT_RADIUS;
+                const y = Math.sin(angle) * ORBIT_RADIUS;
+                const op = 0.7 + Math.sin(t * 30 * 0.1 + i) * 0.3;
+                gsap.set(dot, { x: x, y: y, opacity: op });
+              });
+            }
+
+            /* Bubble micro-float (after they enter) */
+            if (t >= TIMING.bubblesAt + TIMING.bubbleDur) {
+              bubbleEls.forEach((el, i) => {
+                const fx = Math.sin((t * 30 + i * 24) * 0.015) * 5;
+                const fy = Math.cos((t * 30 + i * 30) * 0.018) * 4;
+                gsap.set(el, { x: fx, y: fy });
+              });
+            }
+          },
+        },
+        0,
+      );
+    </script>
+  </body>
+</html>
diff --git a/.claude/skills-media/hyperframes-animation/examples/proof-logo-chain.html b/.claude/skills-media/hyperframes-animation/examples/proof-logo-chain.html
new file mode 100644
index 000000000..52df7b20b
--- /dev/null
+++ b/.claude/skills-media/hyperframes-animation/examples/proof-logo-chain.html
@@ -0,0 +1,861 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Scene 03 — HyperFrames Anchor Chain Reveal</title>
+
+    <!--
+      HyperFrames-native version of the scene-03-anchor-chain-reveal concept.
+      Same 5-phase choreography, GSAP-driven, seek-safe.
+
+      Audio (assumed accompanying narration):
+        "Meet HyperFrames, the HTML video composition toolkit for building,
+         previewing, and rendering programmable motion."
+
+      Sub-shots (local time, 8s total):
+        0.0 – 1.2s   "HyperFrames"           Brand reveal (hacker-flip)
+        1.2 – 4.0s   "HTML VIDEO"            Text swap + rolling ticker
+        4.0 – 6.3s   "60FPS"                 Counter + capability cloud
+        6.3 – 8.0s   "Built for Motion"      Capability strip
+
+      Placeholders (self-contained — no asset files needed):
+        inline-SVG "HF" mark         — brand logo (swap for your image)
+        CSS initials circles         — user avatars (edit CREATOR_INITIALS)
+        CSS text chips               — partner brand logos (edit --brand-name)
+      Replace with real assets for production.
+    -->
+
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+
+    <style>
+      :root {
+        /* Palette — direct port of the the source COLORS constants */
+        --text-primary: #ffffff;
+        --text-muted: rgba(255, 255, 255, 0.45);
+        --brand-green: #00e676;
+        --bg-grad-from: #0a1a2e;
+        --bg-grad-to: #1a0a2e;
+      }
+
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        margin: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: #000;
+        font-family:
+          "Inter",
+          system-ui,
+          -apple-system,
+          sans-serif;
+        color: var(--text-primary);
+      }
+
+      /* ============================================================
+         BACKGROUND (port of <FrostedGlassBackground />)
+         ============================================================ */
+      .bg {
+        position: absolute;
+        inset: 0;
+        background:
+          radial-gradient(ellipse at 30% 20%, rgba(0, 230, 118, 0.18), transparent 50%),
+          radial-gradient(ellipse at 70% 80%, rgba(120, 60, 220, 0.18), transparent 50%),
+          linear-gradient(135deg, var(--bg-grad-from), var(--bg-grad-to));
+      }
+
+      /* Camera wrapper — port of <CameraSystem /> */
+      .camera {
+        position: absolute;
+        inset: 0;
+        transform-origin: center center;
+      }
+
+      /* ============================================================
+         PHASES 1–3 (BrandReveal): logo + decode + swap + recenter
+         ============================================================ */
+      .brand-stage {
+        position: absolute;
+        inset: 0;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        z-index: 50; /* above cloud SVG (z:1), below logo (z:100) */
+      }
+      .anchor-shift {
+        display: flex;
+        align-items: center;
+        gap: 35px;
+        /* GSAP tweens .x on this element for Phase-2 recenter */
+      }
+      .anchor-logo {
+        position: relative;
+        width: 192px;
+        height: 192px;
+        flex-shrink: 0;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        z-index: 100; /* highest — sits above lines + avatars */
+        opacity: 1;
+        /* initial scale(0) set by GSAP fromTo — no CSS transform here */
+      }
+      .anchor-logo img {
+        width: 100%;
+        height: 100%;
+        object-fit: contain;
+        filter: drop-shadow(0 4px 24px rgba(0, 0, 0, 0.4));
+      }
+      .anchor-text {
+        position: relative;
+        display: flex;
+        align-items: center;
+      }
+      .phase1-text {
+        display: flex;
+        perspective: 800px; /* required for the per-glyph rotateX */
+        white-space: nowrap;
+      }
+      .flip-glyph {
+        position: relative;
+        display: inline-block;
+        font-size: 163px; /* 1920 × 0.085 — matches the source brandFontSize */
+        font-weight: 900;
+        letter-spacing: -0.02em;
+      }
+      .flip-glyph .ghost {
+        opacity: 0;
+      }
+      .flip-glyph .anim {
+        position: absolute;
+        left: 0;
+        top: 0;
+        width: 100%;
+        color: var(--text-primary);
+        opacity: 0;
+        transform: perspective(600px) rotateX(90deg);
+        transform-origin: bottom;
+        backface-visibility: hidden;
+      }
+      .flip-glyph.space {
+        min-width: 0.35em;
+      }
+
+      .phase2-claim {
+        position: absolute;
+        left: 0;
+        top: 50%;
+        transform: translateY(-50%);
+        opacity: 0;
+        white-space: nowrap;
+        display: flex;
+        align-items: center;
+        gap: 40px;
+      }
+      .claim-rank {
+        color: var(--brand-green);
+        font-size: 163px;
+        font-weight: 900;
+        letter-spacing: -0.02em;
+      }
+      .claim-ai,
+      .claim-video {
+        color: var(--text-primary);
+        font-size: 163px;
+        font-weight: 900;
+        letter-spacing: -0.02em;
+      }
+
+      /* Vertical ticker — port of <RollingWord /> */
+      .ticker-window {
+        height: 204px; /* fontSize × 1.25 = 163 × 1.25 ≈ 204 */
+        overflow: hidden;
+        display: inline-flex;
+        flex-direction: column;
+        vertical-align: bottom;
+      }
+      .ticker-stack {
+        display: flex;
+        flex-direction: column;
+        will-change: transform;
+      }
+      .ticker-item {
+        height: 204px;
+        display: flex;
+        align-items: center;
+        color: var(--text-primary);
+        font-weight: 900;
+        font-size: 163px;
+        letter-spacing: -0.02em;
+        line-height: 1;
+      }
+
+      /* ============================================================
+         PHASE 4 (CreatorCloud): counter + avatar cloud + lines
+         ============================================================ */
+      .cloud-stage {
+        position: absolute;
+        inset: 0;
+        z-index: 10; /* below brand-stage's logo (z:100), below counter */
+        opacity: 0; /* GSAP fades it in */
+      }
+      .counter-pin {
+        position: absolute;
+        top: 3%;
+        left: 50%;
+        transform: translateX(-50%);
+        text-align: center;
+        z-index: 60; /* above brand-stage so it overlays cleanly */
+      }
+      .count {
+        font-variant-numeric: tabular-nums;
+        font-weight: 900;
+        font-size: 115px; /* 1920 × 0.06 */
+        color: var(--brand-green);
+        display: inline-block;
+        min-width: 200px;
+        text-align: right;
+      }
+      .count-suffix {
+        font-weight: 900;
+        font-size: 115px;
+        color: var(--brand-green);
+        opacity: 0; /* GSAP fades in after count */
+      }
+      .cloud-lines {
+        position: absolute;
+        inset: 0;
+        pointer-events: none;
+        z-index: 1;
+      }
+      .cloud-avatars {
+        position: absolute;
+        inset: 0;
+        z-index: 10;
+      }
+      .cloud-avatar {
+        position: absolute;
+        border-radius: 50%;
+        overflow: hidden;
+        border: 3px solid rgba(255, 255, 255, 0.2);
+        opacity: 0;
+        /* initial scale(0) set by GSAP fromTo — no CSS transform here */
+        background: linear-gradient(135deg, #6b8cff, #a6b3ff);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        color: rgba(255, 255, 255, 0.8);
+        font-weight: 700;
+        font-size: 32px;
+      }
+
+      /* ============================================================
+         PHASE 5 (BrandShowcase): label + scrolling brand strip
+         ============================================================ */
+      .brand-strip {
+        position: absolute;
+        bottom: 8%;
+        left: 0;
+        right: 0;
+        opacity: 0; /* GSAP fades + translateY in via fromTo */
+        z-index: 70;
+      }
+      .brand-label {
+        text-align: center;
+        margin-bottom: 25px;
+        font-size: 27px; /* 1920 × 0.014 */
+        font-weight: 500;
+        color: var(--text-muted);
+        letter-spacing: 0.2em;
+        text-transform: uppercase;
+      }
+      .brand-strip-window {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        gap: 80px;
+        overflow: hidden;
+      }
+      .brand-strip-track {
+        display: flex;
+        gap: 110px;
+      }
+      .brand-logo {
+        width: 170px;
+        height: 52px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        opacity: 0;
+        /* initial scale(0.5) set by GSAP fromTo — no CSS transform here */
+      }
+      .brand-logo::before {
+        content: var(--brand-name);
+        font-family: Inter, system-ui, sans-serif;
+        font-size: 30px;
+        font-weight: 800;
+        letter-spacing: 0.08em;
+        white-space: nowrap;
+        color: rgba(255, 255, 255, 0.72);
+      }
+      .brand-nvidia {
+        --brand-name: "NVIDIA";
+      }
+      .brand-visa {
+        --brand-name: "VISA";
+      }
+      .brand-zoominfo {
+        --brand-name: "ZOOMINFO";
+      }
+      .brand-github {
+        --brand-name: "GITHUB";
+      }
+
+      /* Vignette overlay */
+      .vignette {
+        position: absolute;
+        inset: 0;
+        background: radial-gradient(ellipse at center, transparent 40%, rgba(0, 0, 0, 0.45) 100%);
+        pointer-events: none;
+        z-index: 200;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="main"
+      data-start="0"
+      data-duration="8"
+      data-width="1920"
+      data-height="1080"
+    >
+      <div class="bg"></div>
+
+      <div class="camera">
+        <!-- =====================================================
+             PHASES 1–3: BrandReveal (logo + hacker-flip + swap)
+             ===================================================== -->
+        <div
+          id="phase-anchor"
+          class="brand-stage clip"
+          data-start="0"
+          data-duration="8"
+          data-track-index="1"
+        >
+          <div class="anchor-shift" data-layout-allow-overflow>
+            <!-- Anchor logo — persists across all phases -->
+            <div class="anchor-logo">
+              <!-- Inline-SVG placeholder mark — swap for your logo image -->
+              <svg
+                class="logo-mark"
+                viewBox="0 0 100 100"
+                width="100%"
+                height="100%"
+                role="img"
+                aria-label="hyperframes logo"
+              >
+                <defs>
+                  <linearGradient id="hfMark" x1="0" y1="0" x2="1" y2="1">
+                    <stop offset="0" stop-color="#8b7bff" />
+                    <stop offset="1" stop-color="#3ddc97" />
+                  </linearGradient>
+                </defs>
+                <rect x="4" y="4" width="92" height="92" rx="22" fill="url(#hfMark)" />
+                <text
+                  x="50"
+                  y="63"
+                  text-anchor="middle"
+                  font-family="Inter, system-ui, sans-serif"
+                  font-size="40"
+                  font-weight="800"
+                  fill="#fff"
+                >
+                  HF
+                </text>
+              </svg>
+            </div>
+
+            <!-- Swappable text zone -->
+            <div class="anchor-text">
+              <!-- Phase 1: 'HyperFrames' decoded character by character -->
+              <div class="phase1-text" aria-label="HyperFrames">
+                <!-- Spans generated by the script below -->
+              </div>
+
+              <!-- Phase 2: 'HTML video render/ship' claim -->
+              <div class="phase2-claim">
+                <span class="claim-rank">HTML</span>
+                <span class="claim-ai">Video</span>
+                <div class="claim-ticker">
+                  <div class="ticker-window" data-layout-allow-overflow>
+                    <div class="ticker-stack">
+                      <div class="ticker-item">render</div>
+                      <div class="ticker-item">ship</div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- =====================================================
+             PHASE 4: CreatorCloud (counter + avatar ring + lines)
+             ===================================================== -->
+        <div
+          id="phase-cloud"
+          class="cloud-stage clip"
+          data-start="3.6"
+          data-duration="4.4"
+          data-track-index="2"
+        >
+          <div class="counter-pin">
+            <span class="count">60</span><span class="count-suffix">FPS</span>
+          </div>
+          <svg class="cloud-lines" width="1920" height="1080">
+            <defs>
+              <linearGradient id="lineGradient" x1="0%" y1="0%" x2="100%" y2="0%">
+                <stop offset="0%" stop-color="#00e676" stop-opacity="0.8" />
+                <stop offset="100%" stop-color="#00e676" stop-opacity="0.2" />
+              </linearGradient>
+            </defs>
+            <!-- <line> elements generated by JS -->
+          </svg>
+          <div class="cloud-avatars">
+            <!-- .cloud-avatar elements generated by JS -->
+          </div>
+        </div>
+
+        <!-- =====================================================
+             PHASE 5: BrandShowcase (label + scrolling logos)
+             ===================================================== -->
+        <div
+          id="phase-brands"
+          class="brand-strip clip"
+          data-start="6.3"
+          data-duration="1.7"
+          data-track-index="3"
+        >
+          <div class="brand-label">Trusted by Leading Brands</div>
+          <div class="brand-strip-window" data-layout-allow-overflow>
+            <div class="brand-strip-track">
+              <div class="brand-logo brand-nvidia" aria-label="NVIDIA"></div>
+              <div class="brand-logo brand-visa" aria-label="Visa"></div>
+              <div class="brand-logo brand-zoominfo" aria-label="ZoomInfo"></div>
+              <div class="brand-logo brand-github" aria-label="GitHub"></div>
+              <div class="brand-logo brand-nvidia" aria-label="NVIDIA"></div>
+              <div class="brand-logo brand-visa" aria-label="Visa"></div>
+              <div class="brand-logo brand-zoominfo" aria-label="ZoomInfo"></div>
+              <div class="brand-logo brand-github" aria-label="GitHub"></div>
+              <div class="brand-logo brand-nvidia" aria-label="NVIDIA"></div>
+              <div class="brand-logo brand-visa" aria-label="Visa"></div>
+              <div class="brand-logo brand-zoominfo" aria-label="ZoomInfo"></div>
+              <div class="brand-logo brand-github" aria-label="GitHub"></div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <!-- /.camera -->
+
+      <div class="vignette"></div>
+    </div>
+
+    <script>
+      /* ================================================================
+         CONSTANTS — all derived once, never recomputed at tween time.
+         Composition is 1920 × 1080, total duration 8.0s.
+         ================================================================ */
+      const W = 1920,
+        H = 1080;
+      const FPS_HASH = 60; // synthetic clock for the hacker-flip flicker hash only
+
+      // Self-contained placeholder data — swap for real asset paths in production.
+      const CREATOR_INITIALS = ["JC", "MK", "AR", "TS", "LP", "DV", "NW", "SB", "KH", "EM"];
+
+      const TIMING = {
+        // Phase 1 — logo pop + HyperFrames decode
+        logoPop: 0.32,
+        flipStart: 0.4, // logoPop + ~5/60
+        flipStagger: 0.033, // 2 frames at 60fps per glyph
+        flipDuration: 0.55,
+
+        // Phase 2 — slide-out + claim slide-in.
+        swapTrigger: 1.38,
+        swapDuration: 0.55,
+        claimFadeIn: 1.65, // swapTrigger + ~8/60
+        claimFadeDur: 0.27,
+
+        // Rolling ticker — render → ship.
+        tickerTrigger: 2.35,
+        tickerDuration: 0.45,
+
+        // Phase 3 — logo recenters (anchored ~0.25s before "trusted")
+        recenterTrigger: 3.87,
+        recenterDuration: 0.9,
+
+        // Phase 4 — cloud + counter.
+        cloudFadeIn: 4.12,
+        cloudFadeDur: 0.4,
+        avatarEntryStart: 4.3,
+        avatarStagger: 0.1,
+        avatarEntryDur: 0.55,
+        linesDelay: 0.2, // gap after last avatar
+        linesDur: 0.45,
+        lineStagger: 0.033,
+
+        counterStart: 4.92,
+        counterDuration: 0.85,
+        suffixDelay: 0.05,
+
+        // Phase 5 — brand logos
+        brandStripStart: 6.5,
+        brandStripFadeDur: 0.35,
+        brandLogoStagger: 0.1,
+        brandScrollDur: 1.4, // until end (8.0 - 6.5 - 0.1 buffer)
+      };
+
+      // Layout constants — shared center keeps logo, avatars, and lines aligned.
+      const RECENTER_OFFSET = -W * 0.12; // = -230.4 px — container shift in Phase 2
+      const CENTER_OFFSET = 800; // Phase 3: logo center aligns with cloud center.
+
+      // Cloud geometry — logo final position and line origins derive from this center.
+      const CLOUD_CENTER_X = W / 2;
+      const CLOUD_CENTER_Y = H * 0.47; // = 507.6 px
+      const VERTICAL_ADJUST = CLOUD_CENTER_Y - H / 2;
+      const CLOUD_RADIUS_X = W * 0.25; // = 480 px
+      const CLOUD_RADIUS_Y = H * 0.22; // = 237.6 px
+      const AVATAR_COUNT = 10;
+
+      /* ================================================================
+         BUILD DOM — flip glyphs, avatars, connection lines.
+         Runs synchronously before the timeline registration.
+         ================================================================ */
+
+      // ---- Hacker-flip glyphs for "HyperFrames" -------------------------
+      const phase1 = document.querySelector(".phase1-text");
+      const decodeText = "HyperFrames";
+      decodeText.split("").forEach((char, index) => {
+        const span = document.createElement("span");
+        span.className = "flip-glyph" + (char === " " ? " space" : "");
+        span.dataset.char = char;
+        span.dataset.index = String(index);
+        const ghost = document.createElement("span");
+        ghost.className = "ghost";
+        ghost.textContent = char === " " ? " " : char;
+        const anim = document.createElement("span");
+        anim.className = "anim";
+        anim.textContent = char === " " ? " " : char;
+        span.append(ghost, anim);
+        phase1.appendChild(span);
+      });
+
+      // ---- Avatar cloud + connection lines ------------------------------
+      const cloudLines = document.querySelector(".cloud-lines");
+      const cloudAvatars = document.querySelector(".cloud-avatars");
+      const avatarPositions = [];
+      const avatars = CREATOR_INITIALS.slice(0, AVATAR_COUNT);
+
+      for (let i = 0; i < avatars.length; i++) {
+        const angle = (i / avatars.length) * Math.PI * 2 - Math.PI / 2;
+        const x = CLOUD_CENTER_X + Math.cos(angle) * CLOUD_RADIUS_X;
+        const y = CLOUD_CENTER_Y + Math.sin(angle) * CLOUD_RADIUS_Y;
+        avatarPositions.push({ x, y });
+
+        const size = 90 + (i % 3) * 15;
+        const av = document.createElement("div");
+        av.className = "cloud-avatar";
+        av.style.left = x - size / 2 + "px";
+        av.style.top = y - size / 2 + "px";
+        av.style.width = size + "px";
+        av.style.height = size + "px";
+        av.dataset.index = String(i);
+        // Initials placeholder — deterministic hue from index (no asset files).
+        av.textContent = avatars[i];
+        av.style.background = `linear-gradient(135deg, hsl(${(220 + i * 36) % 360}, 70%, 62%), hsl(${(260 + i * 36) % 360}, 70%, 46%))`;
+        cloudAvatars.appendChild(av);
+
+        // SVG line — both endpoints start at center; will tween x2/y2 outward.
+        const line = document.createElementNS("http://www.w3.org/2000/svg", "line");
+        line.setAttribute("x1", CLOUD_CENTER_X);
+        line.setAttribute("y1", CLOUD_CENTER_Y);
+        line.setAttribute("x2", CLOUD_CENTER_X);
+        line.setAttribute("y2", CLOUD_CENTER_Y);
+        line.setAttribute("stroke", "#00e676");
+        line.setAttribute("stroke-width", "2");
+        line.setAttribute("stroke-dasharray", "4 4");
+        line.setAttribute("stroke-opacity", "0");
+        cloudLines.appendChild(line);
+      }
+
+      /* ================================================================
+         TIMELINE
+         ================================================================ */
+      window.__timelines = window.__timelines || {};
+      const tl = gsap.timeline({ paused: true });
+
+      // ----------------------------------------------------------------
+      // Camera: gentle initial zoom + drift. Finite, computed from duration.
+      // ----------------------------------------------------------------
+      tl.fromTo(".camera", { scale: 0.95 }, { scale: 1.0, duration: 0.95, ease: "power2.out" }, 0);
+
+      // Subtle drift across the whole 8s. Finite yoyo cycles, not infinite.
+      // sin(frame * 0.003) cycle = 2π / 0.003 frames = 2094 frames ≈ 34.9s at 60fps.
+      // Over 8s we see roughly a quarter cycle — model as a single slow yoyo.
+      tl.fromTo(
+        ".camera",
+        { x: 0, y: 0 },
+        { x: 3, y: 2, duration: 4, ease: "sine.inOut", yoyo: true, repeat: 1 },
+        0,
+      );
+
+      // ----------------------------------------------------------------
+      // PHASE 1: Logo pop + HyperFrames decode
+      // ----------------------------------------------------------------
+      tl.fromTo(
+        ".anchor-logo",
+        { scale: 0 },
+        {
+          scale: 1,
+          duration: 0.6,
+          ease: "back.out(1.4)", // spring(stiffness:180, damping:12)
+        },
+        TIMING.logoPop,
+      );
+
+      // Hacker-flip per glyph. Each glyph has its own tween with onUpdate
+      // that derives the visible character from time.
+      const CHAR_POOL = "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789@#$%&";
+      const FLICKER = 3; // frames between glyph reshuffles
+      const REVEAL_AT = 0.6; // progress threshold to swap random → real
+
+      function pseudoHash(i, t) {
+        // Cheap deterministic 32-bit mix — no Math.random, no Date.now
+        return ((i * 374761393 + t * 668265263) >>> 0) % CHAR_POOL.length;
+      }
+
+      document.querySelectorAll(".flip-glyph").forEach((glyph) => {
+        const index = Number(glyph.dataset.index);
+        const real = glyph.dataset.char === " " ? " " : glyph.dataset.char;
+        const anim = glyph.querySelector(".anim");
+        const start = TIMING.flipStart + index * TIMING.flipStagger;
+
+        tl.fromTo(
+          anim,
+          { rotationX: 90, opacity: 0, "--p": 0 },
+          {
+            rotationX: 0,
+            opacity: 1,
+            "--p": 1,
+            duration: TIMING.flipDuration,
+            ease: "back.out(1.6)", // spring(stiffness:150, damping:14)
+            onUpdate: function () {
+              const p = Number(gsap.getProperty(anim, "--p"));
+              if (p >= REVEAL_AT) {
+                if (anim.textContent !== real) anim.textContent = real;
+              } else {
+                const localFrame = Math.floor((tl.time() - start) * FPS_HASH);
+                const bucket = Math.max(0, Math.floor(localFrame / FLICKER));
+                anim.textContent = CHAR_POOL[pseudoHash(index, bucket)];
+              }
+            },
+          },
+          start,
+        );
+      });
+
+      // ----------------------------------------------------------------
+      // PHASE 2: Swap — old text slides out, container shifts left,
+      //                 claim fades in at the old text's origin.
+      // ----------------------------------------------------------------
+      tl.to(
+        ".phase1-text",
+        {
+          x: 200,
+          opacity: 0,
+          duration: TIMING.swapDuration * 0.5,
+          ease: "power3.out",
+        },
+        TIMING.swapTrigger,
+      );
+      tl.set(".phase1-text .anim", { opacity: 0 }, TIMING.swapTrigger + TIMING.swapDuration * 0.5);
+
+      tl.to(
+        ".anchor-shift",
+        {
+          x: RECENTER_OFFSET,
+          duration: TIMING.swapDuration,
+          ease: "power3.out", // spring(stiffness:80, damping:18)
+        },
+        TIMING.swapTrigger,
+      );
+
+      tl.to(
+        ".phase2-claim",
+        {
+          opacity: 1,
+          duration: TIMING.claimFadeDur,
+          ease: "power2.out",
+        },
+        TIMING.claimFadeIn,
+      );
+
+      // Rolling ticker — render → ship.
+      tl.to(
+        ".ticker-stack",
+        {
+          y: "-=204", // one itemHeight
+          duration: TIMING.tickerDuration,
+          ease: "back.out(1.4)", // spring(stiffness:120, damping:14)
+        },
+        TIMING.tickerTrigger,
+      );
+
+      // ----------------------------------------------------------------
+      // PHASE 3: Logo recenters + text fades out.
+      // ----------------------------------------------------------------
+      tl.to(
+        ".anchor-text",
+        {
+          opacity: 0,
+          duration: 0.3,
+          ease: "power2.out",
+        },
+        TIMING.recenterTrigger,
+      );
+
+      tl.to(
+        ".anchor-logo",
+        {
+          x: CENTER_OFFSET,
+          y: VERTICAL_ADJUST,
+          duration: TIMING.recenterDuration,
+          ease: "power2.out", // spring(stiffness:45, damping:22) — gentle
+        },
+        TIMING.recenterTrigger,
+      );
+
+      // ----------------------------------------------------------------
+      // PHASE 4: Avatar cloud + counter.
+      // ----------------------------------------------------------------
+      tl.to(
+        ".cloud-stage",
+        {
+          opacity: 1,
+          duration: TIMING.cloudFadeDur,
+          ease: "power2.out",
+        },
+        TIMING.cloudFadeIn,
+      );
+
+      // Avatars cascade in.
+      tl.fromTo(
+        ".cloud-avatar",
+        { scale: 0, opacity: 0 },
+        {
+          scale: 1,
+          opacity: 1,
+          duration: TIMING.avatarEntryDur,
+          ease: "back.out(1.7)",
+          stagger: { each: TIMING.avatarStagger, from: "start" },
+        },
+        TIMING.avatarEntryStart,
+      );
+
+      // Connection lines draw outward from center after all avatars settle.
+      const lastAvatarEnd =
+        TIMING.avatarEntryStart + TIMING.avatarStagger * (AVATAR_COUNT - 1) + TIMING.avatarEntryDur;
+      const linesStart = lastAvatarEnd + TIMING.linesDelay;
+
+      document.querySelectorAll(".cloud-lines line").forEach((line, i) => {
+        const { x, y } = avatarPositions[i];
+        tl.to(
+          line,
+          {
+            attr: { x2: x, y2: y },
+            strokeOpacity: 0.6,
+            duration: TIMING.linesDur,
+            ease: "power2.out",
+          },
+          linesStart + i * TIMING.lineStagger,
+        );
+      });
+
+      const countEl = document.querySelector(".count");
+      const suffixEl = document.querySelector(".count-suffix");
+
+      // Counter pulse — text stays deterministic under timeline seeking.
+      tl.fromTo(
+        countEl,
+        {
+          scale: 0.88,
+        },
+        {
+          scale: 1,
+          duration: TIMING.counterDuration,
+          ease: "power2.out",
+        },
+        TIMING.counterStart,
+      );
+
+      tl.to(
+        suffixEl,
+        {
+          opacity: 1,
+          duration: 0.3,
+          ease: "back.out(1.6)",
+        },
+        TIMING.counterStart + TIMING.counterDuration + TIMING.suffixDelay,
+      );
+
+      // ----------------------------------------------------------------
+      // PHASE 5: Brand strip — label + scrolling partner logos.
+      // ----------------------------------------------------------------
+      tl.fromTo(
+        ".brand-strip",
+        { opacity: 0, y: 40 },
+        {
+          opacity: 1,
+          y: 0,
+          duration: TIMING.brandStripFadeDur,
+          ease: "power2.out",
+        },
+        TIMING.brandStripStart,
+      );
+
+      tl.fromTo(
+        ".brand-logo",
+        { scale: 0.5, opacity: 0 },
+        {
+          scale: 1,
+          opacity: 0.7,
+          duration: 0.5,
+          ease: "back.out(1.4)",
+          stagger: { each: TIMING.brandLogoStagger, from: "start" },
+        },
+        TIMING.brandStripStart,
+      );
+
+      // Finite horizontal scroll. Distance derived from remaining time × speed.
+      // Speed in original: 0.8 px/frame at 30fps = 24 px/s. Over 1.4s ≈ 33.6 px.
+      // For a more visible scroll, multiply by 4 → ~135 px.
+      tl.to(
+        ".brand-strip-track",
+        {
+          x: -135,
+          duration: TIMING.brandScrollDur,
+          ease: "none",
+        },
+        TIMING.brandStripStart,
+      );
+
+      window.__timelines["main"] = tl;
+    </script>
+  </body>
+</html>
diff --git a/.claude/skills-media/hyperframes-animation/examples/takeover-ticker-displace.html b/.claude/skills-media/hyperframes-animation/examples/takeover-ticker-displace.html
new file mode 100644
index 000000000..6c1a23baa
--- /dev/null
+++ b/.claude/skills-media/hyperframes-animation/examples/takeover-ticker-displace.html
@@ -0,0 +1,347 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Scene 5 — HyperFrames Displace Reveal</title>
+
+    <!--
+      HyperFrames composition.tsx.
+
+      Choreography (4 phases, 7.5 seconds total):
+        0.00 – 0.67s   Typewriter reveals "HyperFrames turns" (3 → 17 chars)
+        1.67 – 2.22s   Ticker scrolls: HTML → motion
+        3.33 – 3.88s   Ticker scrolls: motion → video
+        4.60 – 5.45s   Logo enters from offscreen-right with rotation + scale impact
+                       Text group pushed left + fades (40-50% of hero duration)
+        6.60 – 7.50s   Logo breathes (dual-frequency sine onUpdate, multiplicative on 1.3 scale)
+          tuned to 40-50% of hero duration so the impact reads as causal
+        - Breathing uses Form 2 (onUpdate) so it multiplies onto the 1.3 final scale,
+          not overwrites it (Form 1 yoyo would undo the impact)
+        - Two breathing periods (1.0s scale, 1.33s rotation) for organic feel
+        - Logo uses a local static image asset referenced with a plain URL
+    -->
+
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+
+    <style>
+      :root {
+        --bg: linear-gradient(
+          135deg,
+          #3a3a3a 0%,
+          #17211f 30%,
+          #0b2328 48%,
+          #1f3518 70%,
+          #343434 100%
+        );
+        --text: #f8fafc;
+        --accent: #18d9e8;
+        --accent-2: #7bea5a;
+      }
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        margin: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: var(--bg);
+        font-family:
+          "Inter",
+          system-ui,
+          -apple-system,
+          sans-serif;
+        color: var(--text);
+      }
+
+      .stage {
+        position: absolute;
+        inset: 0;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        overflow: hidden;
+      }
+
+      /* Text group — typewriter + ticker side by side, displaced as a unit */
+      .text-group {
+        position: absolute;
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        gap: 20px;
+      }
+
+      .typewriter {
+        height: 168px; /* = ITEM_HEIGHT (FONT_SIZE × 1.2) */
+        display: flex;
+        align-items: center;
+        color: var(--text);
+        font-weight: 400;
+        font-size: 140px;
+        line-height: 1;
+        white-space: pre;
+        text-shadow: 0 0 36px rgba(24, 217, 232, 0.18);
+      }
+
+      /* Vertical ticker */
+      .ticker-window {
+        height: 168px;
+        overflow: hidden;
+        display: inline-flex;
+        flex-direction: column;
+        align-items: flex-start;
+      }
+      .ticker-stack {
+        display: flex;
+        flex-direction: column;
+        will-change: transform;
+      }
+      .ticker-item {
+        height: 168px;
+        display: flex;
+        align-items: center;
+        color: var(--accent);
+        background: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%);
+        -webkit-background-clip: text;
+        background-clip: text;
+        -webkit-text-fill-color: transparent;
+        font-weight: 700;
+        font-size: 140px;
+        padding-left: 20px;
+        line-height: 1;
+        white-space: pre;
+      }
+
+      /* Hero logo — enters from offscreen right */
+      .hero {
+        position: absolute;
+        width: 440px;
+        height: 440px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        z-index: 20; /* above text during overlap */
+        opacity: 0; /* fromTo will animate */
+      }
+      .hero .logo-mark {
+        width: 100%;
+        height: 100%;
+        display: block;
+        border-radius: 52px;
+        box-shadow:
+          0 0 70px rgba(24, 217, 232, 0.28),
+          0 0 120px rgba(123, 234, 90, 0.18);
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="main"
+      data-start="0"
+      data-duration="7.5"
+      data-width="1920"
+      data-height="1080"
+    >
+      <div
+        class="stage clip"
+        data-start="0"
+        data-duration="7.5"
+        data-track-index="1"
+        id="displace-stage"
+      >
+        <!-- Text group: typewriter + ticker -->
+        <div class="text-group" id="text-group">
+          <div class="typewriter">
+            <span class="typewriter-text">Hyp</span>
+          </div>
+          <div class="ticker-window">
+            <div class="ticker-stack">
+              <div class="ticker-item">HTML</div>
+              <div class="ticker-item">motion</div>
+              <div class="ticker-item">video</div>
+            </div>
+          </div>
+        </div>
+
+        <!-- Hero logo asset -->
+        <div class="hero" id="hero-logo">
+          <!-- Inline-SVG placeholder mark — swap for your logo image -->
+          <svg class="logo-mark" viewBox="0 0 100 100" role="img" aria-label="HyperFrames">
+            <defs>
+              <linearGradient id="hfMark" x1="0" y1="0" x2="1" y2="1">
+                <stop offset="0" stop-color="#8b7bff" />
+                <stop offset="1" stop-color="#3ddc97" />
+              </linearGradient>
+            </defs>
+            <rect x="4" y="4" width="92" height="92" rx="22" fill="url(#hfMark)" />
+            <text
+              x="50"
+              y="63"
+              text-anchor="middle"
+              font-family="Inter, system-ui, sans-serif"
+              font-size="40"
+              font-weight="800"
+              fill="#fff"
+            >
+              HF
+            </text>
+          </svg>
+        </div>
+      </div>
+    </div>
+
+    <script>
+      /* ================================================================
+         CONSTANTS
+         ================================================================ */
+      const TOTAL_DURATION = 7.5;
+      const FONT_SIZE = 140;
+      const ITEM_HEIGHT = FONT_SIZE * 1.2; // = 168 px
+
+      const TIMING = {
+        // Phase 1: typewriter
+        typeStart: 0.0,
+        typeDur: 0.67,
+        typeStartLen: 3, // pre-render the first 3 chars
+
+        // Phase 2: ticker steps
+        ticker1At: 1.67, // HTML → motion
+        ticker2At: 3.33, // motion → video
+        stepDur: 0.55,
+
+        // Phase 3: reactive displacement
+        displaceAt: 4.6,
+        heroDur: 0.85, // matches spring(mass:1.5) settle
+        offscreenX: 800, // hero starts here
+        pushDist: -150, // text pushed THIS direction
+
+        // Phase 4: breathing
+        idleStart: 6.6, // displaceAt + heroDur + ~1.15s buffer
+      };
+
+      const FULL_TEXT = "HyperFrames turns";
+
+      /* ================================================================
+         TIMELINE
+         ================================================================ */
+      window.__timelines = window.__timelines || {};
+      const tl = gsap.timeline({ paused: true });
+      window.__timelines["main"] = tl;
+
+      /* ----------------------------------------------------------------
+         PHASE 1: Typewriter (smooth slice)
+         ---------------------------------------------------------------- */
+      const typewriterEl = document.querySelector(".typewriter-text");
+      const typeProxy = { progress: TIMING.typeStartLen };
+
+      tl.to(
+        typeProxy,
+        {
+          progress: FULL_TEXT.length,
+          duration: TIMING.typeDur,
+          ease: "none",
+          onUpdate: () => {
+            const len = Math.floor(typeProxy.progress);
+            const next = FULL_TEXT.slice(0, len);
+            if (typewriterEl.textContent !== next) typewriterEl.textContent = next;
+          },
+        },
+        TIMING.typeStart,
+      );
+
+      /* ----------------------------------------------------------------
+         PHASE 2: Vertical ticker (2 steps: HTML → motion → video)
+         ---------------------------------------------------------------- */
+      tl.to(
+        ".ticker-stack",
+        {
+          y: `-=${ITEM_HEIGHT}`,
+          duration: TIMING.stepDur,
+          ease: "back.out(1.4)", // spring(stiffness:120, damping:14)
+        },
+        TIMING.ticker1At,
+      );
+
+      tl.to(
+        ".ticker-stack",
+        {
+          y: `-=${ITEM_HEIGHT}`,
+          duration: TIMING.stepDur,
+          ease: "back.out(1.4)",
+        },
+        TIMING.ticker2At,
+      );
+
+      /* ----------------------------------------------------------------
+         PHASE 3: Reactive displacement — three concurrent tweens.
+         ---------------------------------------------------------------- */
+      // (1) Hero enters with rotation + scale impact, lands at scale 1.3.
+      tl.fromTo(
+        ".hero",
+        { x: TIMING.offscreenX, scale: 0.5, rotation: -45, opacity: 0 },
+        {
+          x: 0,
+          scale: 1.3,
+          rotation: 0,
+          opacity: 1,
+          duration: TIMING.heroDur,
+          ease: "power2.out", // spring(stiffness:100, damping:20, mass:1.5)
+        },
+        TIMING.displaceAt,
+      );
+
+      // (2) Text pushed left. Completes at 50% of hero duration → immediate impact.
+      tl.to(
+        ".text-group",
+        { x: TIMING.pushDist, duration: TIMING.heroDur * 0.5, ease: "power2.out" },
+        TIMING.displaceAt,
+      );
+
+      // (3) Text fades. Completes at 40% → fades slightly before push lands.
+      tl.to(
+        ".text-group",
+        { opacity: 0, duration: TIMING.heroDur * 0.4, ease: "power2.out" },
+        TIMING.displaceAt,
+      );
+
+      /* ----------------------------------------------------------------
+         PHASE 4: Breathing — onUpdate so it MULTIPLIES onto the 1.3 scale.
+         Dual frequencies (1.0s scale, 1.33s rotation) for organic motion.
+         ---------------------------------------------------------------- */
+      const heroEl = document.querySelector(".hero");
+      const HERO_FINAL_SCALE = 1.3;
+      const HERO_FINAL_ROTATION = 0;
+      const SCALE_PERIOD = 1.0; // seconds per scale cycle
+      const ROTATE_PERIOD = 1.333; // seconds per rotation cycle — not a simple ratio of SCALE_PERIOD
+      const SCALE_AMP = 0.05;
+      const ROTATE_AMP = 3;
+
+      const breathDur = TOTAL_DURATION - TIMING.idleStart;
+
+      tl.to(
+        { tick: 0 },
+        {
+          tick: 1,
+          duration: breathDur,
+          ease: "none",
+          onUpdate: function () {
+            const idleTime = Math.max(0, tl.time() - TIMING.idleStart);
+            const omegaS = (idleTime / SCALE_PERIOD) * Math.PI * 2;
+            const omegaR = (idleTime / ROTATE_PERIOD) * Math.PI * 2;
+            gsap.set(heroEl, {
+              scale: HERO_FINAL_SCALE * (1 + Math.sin(omegaS) * SCALE_AMP),
+              rotation: HERO_FINAL_ROTATION + Math.sin(omegaR) * ROTATE_AMP,
+            });
+          },
+        },
+        TIMING.idleStart,
+      );
+    </script>
+  </body>
+</html>
diff --git a/.claude/skills-media/hyperframes-animation/examples/workflow-approve-press.html b/.claude/skills-media/hyperframes-animation/examples/workflow-approve-press.html
new file mode 100644
index 000000000..a5de4d62a
--- /dev/null
+++ b/.claude/skills-media/hyperframes-animation/examples/workflow-approve-press.html
@@ -0,0 +1,606 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Scene — HyperFrames Workflow Approve & Press</title>
+
+    <!--
+      Blueprint: workflow-approve-press
+      HyperFrames composition.tsx.
+      Same four-phase choreography, GSAP-driven, seek-safe.
+
+      Audio (assumed accompanying narration):
+        "This is AI that renders with you, not just for you.
+         Preview the result, render to MP4, then confirm."
+
+      Sub-phases (local time, 5.5s total):
+        0.17 – 0.72s   Headline "AI edits WITH you" slides down
+        0.50 – 1.10s   Center editor mockup scales in
+        0.67 – 2.17s   Step indicators stagger-enter on the left (3D-tilted)
+        2.00 – 3.33s   Step state machine: 1→complete, 2→active … 2→complete, 3→active
+        3.52 – 4.02s   Confirm MP4 button (3D-tilted right) bouncy entry after render step is active
+        4.22 – 4.72s   Button depression (linear, no overshoot)
+        4.72 – 5.22s   Render confirmed: step 3 completes, color shifts to success green + checkmark pop
+
+      Asset placeholders:
+        ./assets/editor-demo.mp4  — center product demo video. Replace with a
+                                    real export of the AI-editor flow. The
+                                    composition falls back to a CSS-mockup of
+                                    an editor timeline so it renders without
+                                    network or media files.
+    -->
+
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+
+    <style>
+      :root {
+        /* Palette — port of the the source COLORS / TYPOGRAPHY constants */
+        --text-primary: #ffffff;
+        --text-secondary: #cbd5e1;
+        --text-muted: #94a3b8;
+        --brand-purple: #a78bfa;
+        --brand-purple-glow: rgba(167, 139, 250, 0.6);
+        --brand-green: #22c55e;
+        --brand-green-glow: rgba(34, 197, 94, 0.6);
+        --panel-stroke: rgba(255, 255, 255, 0.1);
+      }
+
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        margin: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: #000;
+        font-family:
+          "Inter",
+          system-ui,
+          -apple-system,
+          sans-serif;
+        color: var(--text-primary);
+      }
+
+      /* ============================================================
+         BACKGROUND — port of <FrostedGlassBackground />
+         ============================================================ */
+      .bg {
+        position: absolute;
+        inset: 0;
+        background:
+          radial-gradient(ellipse at 25% 30%, rgba(167, 139, 250, 0.2), transparent 55%),
+          radial-gradient(ellipse at 80% 70%, rgba(34, 197, 94, 0.12), transparent 55%),
+          linear-gradient(135deg, #1a1530 0%, #0a0815 70%);
+      }
+
+      /* Ambient warm glow on the right (button side) */
+      .ambient {
+        position: absolute;
+        inset: 0;
+        background: radial-gradient(
+          ellipse at 70% 50%,
+          var(--brand-purple-glow) 0%,
+          transparent 40%
+        );
+        opacity: 0.15;
+        pointer-events: none;
+      }
+
+      /* Vignette */
+      .vignette {
+        position: absolute;
+        inset: 0;
+        background: radial-gradient(ellipse at center, transparent 40%, rgba(0, 0, 0, 0.4) 100%);
+        pointer-events: none;
+      }
+
+      /* ============================================================
+         PHASE 1 — HEADLINE
+         ============================================================ */
+      .headline-wrap {
+        position: absolute;
+        top: 80px;
+        left: 50%;
+        transform: translateX(-50%);
+        opacity: 0; /* GSAP fades in */
+        text-align: center;
+        white-space: nowrap;
+      }
+      .headline {
+        font-size: 96px;
+        font-weight: 800;
+        line-height: 1.2;
+        letter-spacing: -0.01em;
+        color: var(--text-primary);
+      }
+      .headline .accent {
+        color: var(--brand-purple);
+        text-shadow: 0 0 30px var(--brand-purple-glow);
+      }
+
+      /* ============================================================
+         PHASE 2 — CENTER DEMO
+         (Falls back to a CSS-mockup editor when ./assets/editor-demo.mp4
+          is missing. The mockup is purely decorative — no animation
+          inside it; the eye reads it as a paused product screenshot.)
+         ============================================================ */
+      .demo-wrap {
+        position: absolute;
+        left: 50%;
+        top: 60%;
+        opacity: 0;
+      }
+      .demo-frame {
+        width: 1000px;
+        height: 600px;
+        border-radius: 16px;
+        overflow: hidden;
+        border: 2px solid var(--panel-stroke);
+        box-shadow:
+          0 0 40px var(--brand-purple-glow),
+          0 20px 60px rgba(0, 0, 0, 0.5);
+        position: relative;
+      }
+      .demo-frame video {
+        display: block;
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+      }
+
+      /* CSS-mockup fallback for the editor demo */
+      .demo-mockup {
+        position: absolute;
+        inset: 0;
+        display: grid;
+        grid-template-rows: 56px 1fr 100px;
+        background: linear-gradient(180deg, #1f1b3a 0%, #15112a 100%);
+      }
+      .mockup-toolbar {
+        display: flex;
+        align-items: center;
+        gap: 12px;
+        padding: 0 20px;
+        background: #15112a;
+        border-bottom: 1px solid var(--panel-stroke);
+      }
+      .mockup-toolbar .dot {
+        width: 12px;
+        height: 12px;
+        border-radius: 50%;
+        background: rgba(255, 255, 255, 0.18);
+      }
+      .mockup-toolbar .dot.r {
+        background: #ef4444;
+      }
+      .mockup-toolbar .dot.y {
+        background: #eab308;
+      }
+      .mockup-toolbar .dot.g {
+        background: #22c55e;
+      }
+      .mockup-toolbar .title {
+        margin-left: 18px;
+        color: var(--text-secondary);
+        font-size: 16px;
+        font-weight: 500;
+      }
+      .mockup-canvas {
+        position: relative;
+        padding: 30px;
+        overflow: hidden;
+        background:
+          repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.04) 0 1px, transparent 1px 40px),
+          repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.04) 0 1px, transparent 1px 40px);
+      }
+      .mockup-canvas .preview-box {
+        width: 100%;
+        height: 100%;
+        border-radius: 10px;
+        background: linear-gradient(135deg, rgba(167, 139, 250, 0.35), rgba(34, 197, 94, 0.2));
+        border: 1px solid var(--panel-stroke);
+        box-shadow: inset 0 0 60px rgba(0, 0, 0, 0.4);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        color: var(--text-secondary);
+        font-size: 18px;
+        font-weight: 600;
+        letter-spacing: 0.18em;
+        text-transform: uppercase;
+      }
+      .mockup-timeline {
+        display: flex;
+        flex-direction: column;
+        gap: 6px;
+        padding: 14px 20px;
+        background: #15112a;
+        border-top: 1px solid var(--panel-stroke);
+      }
+      .mockup-timeline .track {
+        height: 24px;
+        display: flex;
+        gap: 4px;
+      }
+      .mockup-timeline .clip {
+        height: 100%;
+        border-radius: 4px;
+      }
+      .mockup-timeline .t1 .a {
+        flex: 3;
+        background: var(--brand-purple);
+        opacity: 0.85;
+      }
+      .mockup-timeline .t1 .b {
+        flex: 2;
+        background: var(--brand-purple);
+        opacity: 0.55;
+      }
+      .mockup-timeline .t1 .c {
+        flex: 4;
+        background: var(--brand-purple);
+        opacity: 0.85;
+      }
+      .mockup-timeline .t2 .a {
+        flex: 5;
+        background: var(--brand-green);
+        opacity: 0.75;
+      }
+      .mockup-timeline .t2 .b {
+        flex: 2;
+        background: var(--brand-green);
+        opacity: 0.45;
+      }
+      .mockup-timeline .t2 .c {
+        flex: 2;
+        background: var(--brand-green);
+        opacity: 0.75;
+      }
+
+      /* ============================================================
+         PHASE 3 — LEFT FLANK: STEP INDICATORS (3D-TILTED)
+         ============================================================ */
+      .steps-flank {
+        position: absolute;
+        left: 100px;
+        top: 55%;
+        transform: translateY(-50%) perspective(800px) rotateY(15deg);
+        display: flex;
+        flex-direction: column;
+        gap: 30px;
+      }
+      .step {
+        display: flex;
+        align-items: center;
+        gap: 16px;
+        opacity: 0; /* GSAP fades in */
+      }
+      .step-circle {
+        width: 40px;
+        height: 40px;
+        border-radius: 50%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        border: 2px solid var(--text-muted);
+        background-color: transparent;
+        box-shadow: none;
+        transition: none; /* Steps SNAP between states, no CSS transition */
+        flex-shrink: 0;
+      }
+      .step-num {
+        font-size: 18px;
+        font-weight: 700;
+        color: var(--text-muted);
+      }
+      .step-check {
+        display: none;
+      }
+      .step-label {
+        font-size: 28px;
+        font-weight: 500;
+        color: var(--text-secondary);
+      }
+
+      /* State machine — toggled via tl.set({ attr: data-state }) */
+      .step[data-state="active"] .step-circle {
+        border-color: var(--brand-purple);
+        box-shadow: 0 0 15px var(--brand-purple-glow);
+      }
+      .step[data-state="active"] .step-num {
+        color: var(--brand-purple);
+      }
+      .step[data-state="active"] .step-label {
+        font-weight: 700;
+        color: var(--text-primary);
+      }
+
+      .step[data-state="complete"] .step-circle {
+        border-color: var(--brand-green);
+        background-color: var(--brand-green);
+      }
+      .step[data-state="complete"] .step-num {
+        display: none;
+      }
+      .step[data-state="complete"] .step-check {
+        display: inline-flex;
+      }
+
+      /* ============================================================
+         PHASE 4 — RIGHT FLANK: CONFIRM BUTTON (3D-TILTED)
+         ============================================================ */
+      .button-flank {
+        position: absolute;
+        right: 70px;
+        top: 55%;
+        transform: translateY(-50%) perspective(800px) rotateY(-15deg);
+      }
+      .btn-press {
+        opacity: 0;
+        transform-origin: center center;
+      }
+      .btn {
+        --btn-glow-blur: 20px;
+        padding: 20px 50px;
+        border-radius: 12px;
+        background-color: var(--brand-purple);
+        box-shadow: 0 0 var(--btn-glow-blur) var(--brand-purple-glow);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        gap: 12px;
+        color: var(--text-primary);
+        font-size: 36px;
+        font-weight: 700;
+        white-space: nowrap;
+      }
+      .btn-check {
+        display: inline-flex;
+        transform-origin: center center;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="interactive-workflow"
+      data-start="0"
+      data-duration="5.5"
+      data-width="1920"
+      data-height="1080"
+      style="position: relative; width: 1920px; height: 1080px; overflow: hidden"
+    >
+      <!-- Background layers -->
+      <div class="bg"></div>
+
+      <!-- PHASE 1: Headline -->
+      <div class="headline-wrap">
+        <div class="headline">
+          HyperFrames builds
+          <span class="accent">WITH</span>
+          you
+        </div>
+      </div>
+
+      <!-- PHASE 2: Center demo (video with CSS-mockup fallback) -->
+      <div class="demo-wrap">
+        <div class="demo-frame">
+          <!--
+            Real asset path (replace for production).
+            If missing, the CSS mockup below shows through the transparent
+            poster region. The video stays muted per HyperFrames rules.
+          -->
+          <!-- Decorative CSS-mockup of an editor — paused screenshot feel. -->
+          <div class="demo-mockup">
+            <div class="mockup-toolbar">
+              <span class="dot r"></span><span class="dot y"></span><span class="dot g"></span>
+              <span class="title">HyperFrames — Project: Launch Promo</span>
+            </div>
+            <div class="mockup-canvas">
+              <div class="preview-box">Preview · 1920 × 1080</div>
+            </div>
+            <div class="mockup-timeline">
+              <div class="track t1">
+                <div class="clip a"></div>
+                <div class="clip b"></div>
+                <div class="clip c"></div>
+              </div>
+              <div class="track t2">
+                <div class="clip a"></div>
+                <div class="clip b"></div>
+                <div class="clip c"></div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- PHASE 3: Left-flank step indicators (3D-tilted +15°) -->
+      <div class="steps-flank">
+        <div class="step step-1" data-step="1" data-state="pending">
+          <div class="step-circle">
+            <span class="step-num">1</span>
+            <svg class="step-check" width="20" height="20" viewBox="0 0 24 24" fill="none">
+              <path d="M20 6L9 17L4 12" stroke="#fff" stroke-width="2.5" stroke-linecap="round" />
+            </svg>
+          </div>
+          <span class="step-label">Compose HTML Scene</span>
+        </div>
+
+        <div class="step step-2" data-step="2" data-state="pending">
+          <div class="step-circle">
+            <span class="step-num">2</span>
+            <svg class="step-check" width="20" height="20" viewBox="0 0 24 24" fill="none">
+              <path d="M20 6L9 17L4 12" stroke="#fff" stroke-width="2.5" stroke-linecap="round" />
+            </svg>
+          </div>
+          <span class="step-label">Seek &amp; Preview</span>
+        </div>
+
+        <div class="step step-3" data-step="3" data-state="pending">
+          <div class="step-circle">
+            <span class="step-num">3</span>
+            <svg class="step-check" width="20" height="20" viewBox="0 0 24 24" fill="none">
+              <path d="M20 6L9 17L4 12" stroke="#fff" stroke-width="2.5" stroke-linecap="round" />
+            </svg>
+          </div>
+          <span class="step-label">Render to MP4</span>
+        </div>
+      </div>
+
+      <!-- PHASE 4: Right-flank confirm button (3D-tilted -15°) -->
+      <div class="button-flank">
+        <div class="btn-press">
+          <div class="btn">
+            <span class="btn-check">
+              <svg width="28" height="28" viewBox="0 0 24 24" fill="none">
+                <path
+                  d="M20 6L9 17L4 12"
+                  stroke="#fff"
+                  stroke-width="3"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                />
+              </svg>
+            </span>
+            <span class="btn-label">Confirm MP4</span>
+          </div>
+        </div>
+      </div>
+
+      <!-- Ambient + vignette overlays (pointer-events: none) -->
+      <div class="ambient"></div>
+      <div class="vignette"></div>
+    </div>
+
+    <script>
+      window.__timelines = window.__timelines || {};
+      const tl = gsap.timeline({ paused: true });
+
+      // ── Phase boundaries (seconds) — match the blueprint ────────────
+      const HEADLINE_START = 0.17;
+      const HEADLINE_END = 0.72;
+      const VIDEO_START = 0.5;
+      const STEPS_START = 0.67;
+      const STEP_STAGGER = 0.5;
+      const STEP_ACTIVE_T2 = 2.0; // step 1 → complete, step 2 → active
+      const STEP_ACTIVE_T3 = 3.33; // step 2 → complete, step 3 → active
+      const BUTTON_ENTER = 3.52; // after "Render to MP4" becomes active
+      const PRESS_FRAME = 4.22;
+      const PRESS_DURATION = 0.5;
+      const CHECK_POP = PRESS_FRAME + PRESS_DURATION;
+      const SCENE_END = 5.5; // matches data-duration on the root
+
+      // ── Phase 1: Headline slides down from top ─────────────────────
+      gsap.set(".demo-wrap", { xPercent: -50, yPercent: -50, scale: 0.8, opacity: 0 });
+      gsap.set(".step", { x: -30, opacity: 0 });
+      gsap.set(".btn-press", { scale: 0, opacity: 0 });
+      gsap.set(".btn-check", { scale: 0 });
+
+      tl.fromTo(
+        ".headline-wrap",
+        { y: -40, opacity: 0 },
+        {
+          y: 0,
+          opacity: 1,
+          duration: HEADLINE_END - HEADLINE_START,
+          ease: "back.out(1.2)", // ≈ the source SPRING_CONFIGS.entrance
+        },
+        HEADLINE_START,
+      );
+
+      // ── Phase 2: Center demo scales in ─────────────────────────────
+      // HyperFrames syncs the <video> element's currentTime to the seek
+      // position automatically — no .play() call needed (and one here
+      // would break deterministic rendering).
+      tl.to(".demo-wrap", { scale: 1, opacity: 1, duration: 0.6, ease: "power3.out" }, VIDEO_START);
+
+      // ── Phase 3a: Stagger entry of the step indicators ─────────────
+      tl.to(
+        ".step",
+        {
+          x: 0,
+          opacity: 1,
+          duration: 0.4,
+          ease: "power3.out",
+          stagger: { each: STEP_STAGGER, from: "start" },
+        },
+        STEPS_START,
+      );
+
+      // ── Phase 3b: Step state machine (snap-toggled here) ──
+      // Step 1 enters in the "active" state because narration starts on it.
+      tl.set(".step-1", { attr: { "data-state": "active" } }, STEPS_START);
+
+      // First transition — step 1 finishes, step 2 takes over.
+      tl.set(".step-1", { attr: { "data-state": "complete" } }, STEP_ACTIVE_T2);
+      tl.set(".step-2", { attr: { "data-state": "active" } }, STEP_ACTIVE_T2);
+
+      // Second transition — step 2 finishes, step 3 takes over.
+      tl.set(".step-2", { attr: { "data-state": "complete" } }, STEP_ACTIVE_T3);
+      tl.set(".step-3", { attr: { "data-state": "active" } }, STEP_ACTIVE_T3);
+
+      // ── Phase 4a: Button bouncy entry ──────────────────────────────
+      tl.to(
+        ".btn-press",
+        { scale: 1, opacity: 1, duration: 0.5, ease: "back.out(1.4)", overwrite: "auto" },
+        BUTTON_ENTER,
+      );
+
+      // ── Phase 4b: Press (linear depression → linear return) ────────
+      // Two adjacent tweens on .btn-press — end value of (1) = start value of (2).
+      tl.to(".btn-press", { scale: 0.95, duration: 0.1, ease: "power1.out" }, PRESS_FRAME);
+      tl.to(
+        ".btn-press",
+        { scale: 1.0, duration: PRESS_DURATION - 0.1, ease: "power1.in" },
+        PRESS_FRAME + 0.1,
+      );
+
+      // ── Phase 4c: Color shift + label swap (at press end) ──────────
+      tl.to(
+        ".btn",
+        {
+          backgroundColor: "#15803d",
+          boxShadow: "0 0 25px rgba(21, 128, 61, 0.68)",
+          duration: 0.3,
+          ease: "power2.out",
+        },
+        CHECK_POP,
+      );
+      tl.set(".btn-label", { textContent: "Approved!" }, CHECK_POP);
+      tl.set(".step-3", { attr: { "data-state": "complete" } }, CHECK_POP);
+
+      // ── Phase 4d: Checkmark pops into view ─────────────────────────
+      // back.out(1.6) ≈ the source spring({ stiffness: 200, damping: 15 }).
+      tl.to(".btn-check", { scale: 1, duration: 0.5, ease: "back.out(1.6)" }, CHECK_POP);
+
+      // ── Ambient pulsing glow on the button (Math.sin) ──
+      // Source: `glowIntensity = 20 + Math.sin(frame * 0.1) * 10` — i.e. blur
+      // oscillates 10 ↔ 30 around 20, with angular freq 0.1 rad/frame.
+      // At 60fps that's 6 rad/s, so full period ≈ 2π / 6 ≈ 1.05s.
+      // Finite yoyo replaces the continuous sine; `box-shadow` reads the
+      // tweened CSS variable so the blur is actually animatable.
+      const PULSE_PERIOD = 1.05;
+      const PULSE_HALVES = Math.max(2, Math.floor((SCENE_END - BUTTON_ENTER) / (PULSE_PERIOD / 2)));
+      tl.fromTo(
+        ".btn",
+        { "--btn-glow-blur": "10px" }, // source amplitude: 20 ± 10
+        {
+          "--btn-glow-blur": "30px",
+          duration: PULSE_PERIOD / 2,
+          ease: "sine.inOut",
+          yoyo: true,
+          repeat: PULSE_HALVES - 1,
+        },
+        BUTTON_ENTER,
+      );
+
+      window.__timelines["interactive-workflow"] = tl;
+    </script>
+  </body>
+</html>
diff --git a/.claude/skills-media/hyperframes-animation/rules-index.md b/.claude/skills-media/hyperframes-animation/rules-index.md
new file mode 100644
index 000000000..abb5409ac
--- /dev/null
+++ b/.claude/skills-media/hyperframes-animation/rules-index.md
@@ -0,0 +1,86 @@
+# Rules Index
+
+Atomic motion recipes. Each lives at `rules/<name>.md`. Compose 2-4 per scene with a single paused timeline.
+
+## Text & Typography
+
+<rules>
+<hacker-flip-3d path="rules/hacker-flip-3d.md">Character-level 3D rotation with deterministic glyph substitution (decryption). GSAP `back.out` ease + per-glyph `onUpdate` for the flicker hash. Tags: text, 3d, reveal, decode</hacker-flip-3d>
+<vertical-spring-ticker path="rules/vertical-spring-ticker.md">Slot-machine vertical scrolling using stepped GSAP tweens within a masked column. Tags: text, ticker, scroll, vertical</vertical-spring-ticker>
+<counting-dynamic-scale path="rules/counting-dynamic-scale.md">Counter where transform scale grows with the value for escalating emphasis. A numeric proxy and scale tween share one timeline position. Tags: counter, scale, transform, number, dynamic</counting-dynamic-scale>
+<discrete-text-sequence path="rules/discrete-text-sequence.md">Replace entire text states at time thresholds for non-linear typing (typos, holds, bulk additions, backspaces). GSAP onUpdate-driven reverse search. Tags: text, typing, discrete, threshold, non-linear</discrete-text-sequence>
+<asr-keyword-glow path="rules/asr-keyword-glow.md">Highlight keywords with glow + scale + color synced to ASR word timestamps. Two GSAP tweens per word drive a CSS custom property `--glow` through attack-decay-rest envelope. Tags: asr, audio-sync, highlight, glow, keyword, text</asr-keyword-glow>
+<3d-text-depth-layers path="rules/3d-text-depth-layers.md">Multiple offset text layers (N divs at `(i*dx, i*dy)` with decreasing alpha) create a stacked 3D extrusion illusion on large typography. Tags: text, 3d, depth, layers, shadow, typography, stacked</3d-text-depth-layers>
+<context-sensitive-cursor path="rules/context-sensitive-cursor.md">Typing cursor whose `background-color` switches at segment boundaries plus square-wave blink via `(tl.time() % cycle) < cycle/2`. Tags: cursor, color, context, typewriter, styling, segment</context-sensitive-cursor>
+<dynamic-content-sequencing path="rules/dynamic-content-sequencing.md">Pre-compute a flat `[{startTime, endTime, ...}]` array from a script of `{textMain, textAccent, charSpeed, hold}` entries. Each phrase's window = `chars × charSpeed + hold`. Content-driven duration, no hand-tuned offsets. Tags: timeline, sequencing, dynamic, duration, script-driven</dynamic-content-sequencing>
+<kinetic-beat-slam path="rules/kinetic-beat-slam.md">Percussive kinetic typography — short phrases slam in on ONE shared beat array with DISTINCT per-phrase entrances (scale-slam / side-snap / rise-rotate), optional rhythm chrome (metronome ticks, beat bar), then a locked finale. The recipe for "punchy / rhythmic" taglines. Tags: text, kinetic, typography, beat, rhythm, slam, percussive, punchy</kinetic-beat-slam>
+</rules>
+
+## Data & Stats
+
+<rules>
+<counting-dynamic-scale path="rules/counting-dynamic-scale.md">Counter whose transform scale grows with the value; seek-safe `onUpdate`, `Math.round`, `tabular-nums`, multi-stat chord. (Also listed under Text & Typography.) Tags: counter, number, stat, count-up</counting-dynamic-scale>
+<stat-bars-and-fills path="rules/stat-bars-and-fills.md">Data-viz primitives that pair a number with a graphic — growth bars (CSS `scaleY` stagger), progress fill (bar `scaleX` or measured SVG ring), and fractional star-rating wipe (`clip-path`). Transforms only, seek-safe. Pick single-focus vs split-frame and hold it. Tags: data, stats, chart, bars, progress, ring, stars, rating, infographic</stat-bars-and-fills>
+</rules>
+
+## Camera & Viewport
+
+<rules>
+<coordinate-target-zoom path="rules/coordinate-target-zoom.md">Zoom into non-centered elements via scale (outer wrapper) + counter-translation (inner wrapper). Tags: camera, zoom, scale, translate</coordinate-target-zoom>
+<camera-cursor-tracking path="rules/camera-cursor-tracking.md">Two-phase virtual camera that locks the viewport to a moving focal point (typing cursor) — static initial framing then focal-point-locked tracking. Uses browser-native `getBoundingClientRect()` / `ctx.measureText()` after `document.fonts.ready`. Tags: camera, tracking, viewport, two-phase, typing</camera-cursor-tracking>
+<multi-phase-camera path="rules/multi-phase-camera.md">Sequential camera-zoom system (pull-back / focus / push) plus continuous micro-drift. Tags: camera, zoom, phase, drift, scale, cinematic</multi-phase-camera>
+<viewport-change path="rules/viewport-change.md">Virtual camera — simulate zoom / pan / focus-lock by transforming a single `.world` wrapper containing all scene content. Single-element composite transform `translate(x,y) scale(S)`; counter-translate math is `T = -offset × S` (DIFFERENT from coordinate-target-zoom's `T = -offset`). Tags: viewport, camera, zoom, pan, focus-lock</viewport-change>
+<depth-of-field-blur path="rules/depth-of-field-blur.md">Selective rack-focus — GSAP-tween `filter: blur()` (+ slight opacity dim) on off-focus layers via a `--dof` var while the focal element stays sharp; single pull, two-plane rack, or blur-the-cluster-while-pushing-in. Finite, deterministic, seek-safe. Tags: blur, depth-of-field, focus, rack-focus, dim, spotlight</depth-of-field-blur>
+</rules>
+
+## Layout & Network
+
+<rules>
+<avatar-cloud-network path="rules/avatar-cloud-network.md">Avatars on an elliptical ring with SVG connection lines to a center point, staggered entry. Cloud center coordinates must match the centerpiece element exactly. Tags: avatar, cloud, network, social-proof, stagger</avatar-cloud-network>
+<3d-page-scroll path="rules/3d-page-scroll.md">Full webpage rendered as a tilted 3D card whose internal content scrolls to reveal specific sections. Pair with asr-keyword-glow for on-page keyword highlighting. Tags: 3d, page, scroll, webpage, tilt, perspective, product-demo</3d-page-scroll>
+<center-outward-expansion path="rules/center-outward-expansion.md">Elements start clustered at screen center and expand outward to final positions. Each element gets its target position via CSS once; GSAP tweens transform `x` / `y` offsets to 0 in lockstep with a shared driver. Tags: expansion, scatter, center, reveal, layout, sync</center-outward-expansion>
+<split-tilt-cards path="rules/split-tilt-cards.md">Two cards side-by-side with opposing rotationY tilts (+/- baseTilt) and entry slides from their respective sides. Continuous floating runs in phase opposition (`Math.PI` offset). Tags: 3d, cards, split, tilt, comparison, symmetric</split-tilt-cards>
+<orbit-3d-entry path="rules/orbit-3d-entry.md">Elements flip in from 3D space (`rotateX` + `rotateY` + `translateZ`) then settle into a continuous elliptical orbit. **Critical**: entry MUST flip in-place at the orbital starting position (`gsap.set` BEFORE phase 1), not at scene center. Tags: orbit, 3d, flip, ellipse, circular, icon, entry, continuous</orbit-3d-entry>
+<ai-tracking-box path="rules/ai-tracking-box.md">AI detection overlay — yellow `#facc15` L-bracket corners + confidence label (fluctuating 95-99%) following a target on a sine arc path. Box position recomputed per-frame from target position (never tweened separately). Tags: ai, tracking, bounding-box, detection, corner, ml</ai-tracking-box>
+<depth-scatter-assemble path="rules/depth-scatter-assemble.md">N elements scatter into / reassemble from a rotating 3D depth-cloud — each starts at a deterministic index-derived 3D offset (translateZ + rotateX/Y + scatter) and settles to a clean flat layout; tumble-swap and radial-explode variants. preserve-3d + perspective, transform-only, seek-safe. Tags: 3d, scatter, assemble, tumble, depth, perspective, glyphs</depth-scatter-assemble>
+</rules>
+
+## SVG & Icons
+
+<rules>
+<svg-icon-enrichment path="rules/svg-icon-enrichment.md">Animate internal SVG elements (rotating hands, oscillating blades, pulsing dots, dash-flow lines) so icons feel alive. **Critical**: use SVG `setAttribute('transform', 'rotate(deg cx cy)')` for explicit center — CSS `transform-origin` + `transform-box: fill-box` interprets origin in bbox-local coords (off-center for thin lines). Tags: svg, icon, animation, micro-animation, rotation, pulse</svg-icon-enrichment>
+<svg-path-draw path="rules/svg-path-draw.md">SVG outline draws itself stroke-by-stroke via `stroke-dasharray` / `stroke-dashoffset`. Measure with `getTotalLength()` at composition setup, set initial dashoffset = length, GSAP tweens to 0. For circular progress rings, rotate the stroke `-90deg` so drawing starts at 12 o'clock. Tags: svg, stroke, draw, vector, path, dasharray</svg-path-draw>
+</rules>
+
+## Idle & Ambient
+
+<rules>
+<sine-wave-loop path="rules/sine-wave-loop.md">Continuous breathing/idle ambient motion. Two forms: GSAP `sine.inOut` yoyo with finite repeats (preferred when standalone) or onUpdate reading `tl.time()` (preferred when multiplying onto another live value). Tags: idle, loop, breathing, sine, ambient</sine-wave-loop>
+<ambient-glow-bloom path="rules/ambient-glow-bloom.md">Un-triggered soft radial glow that blooms in behind a hero element and holds with a bounded idle breathe, or a single-pass traveling sheen across a surface. No click, no word-sync; peak opacity ≤ ~0.45, finite/deterministic. Tags: glow, bloom, ambient, radial, sheen, hero</ambient-glow-bloom>
+</rules>
+
+## Transition & Motion
+
+<rules>
+<reactive-displacement path="rules/reactive-displacement.md">Physical-collision transition where an entering element's GSAP tween drives the exiting element's displacement. Three concurrent tweens at the same timeline position with victim durations 40-50% of the intruder's. Tags: transition, physics, collision, displacement, push</reactive-displacement>
+<press-release-spring path="rules/press-release-spring.md">Tactile button press: linear compression then spring recovery via two adjacent GSAP tweens on the same property. Variations: color transition, shadow depth via CSS vars, release burst, background glow. Tags: spring, press, button, interaction, physics, glow, burst</press-release-spring>
+<physics-press-reaction path="rules/physics-press-reaction.md">Physical click simulation — two sequential GSAP scale tweens (down to 0.9, up to 1.0) approximate a spring with overshoot. Pass a single targets array `["#cta", "#cursor"]` to compress both together for tactile contact feel. Tags: spring, click, physics, press, interaction, cursor</physics-press-reaction>
+<cursor-click-ripple path="rules/cursor-click-ripple.md">Animated cursor moves to a target, depresses cursor + target together on click, emits an expanding ripple with attack-decay opacity envelope. Element lives in DOM from t=0 with `opacity: 0` (no conditional rendering). Tags: cursor, click, ripple, interaction, mouse, button, keyframes</cursor-click-ripple>
+<scale-swap-transition path="rules/scale-swap-transition.md">Coordinated morph between two DOM elements at the same screen center. Exit cluster shrinks + fades; entrance pops in with `back.out(2)` overshoot. Tags: transition, morph, scale, swap</scale-swap-transition>
+<card-morph-anchor path="rules/card-morph-anchor.md">Container morphs apparent size + corner radius + surface treatment between two shots, then fades to reveal the real target underneath. HyperFrames substitutes uniform `scale` for the forbidden `width`/`height` tween, plus paint-only `borderRadius`/`background`/`boxShadow`. Tags: morph, anchor, transition, border-radius, container, shape, handoff</card-morph-anchor>
+<spring-pop-entrance path="rules/spring-pop-entrance.md">The canonical ENTRANCE pop — an element (or staggered group) arrives by springing `scale: 0 → 1` with `back.out` overshoot, `fromTo` so it's correct at t=0 under seek. Single hero, staggered group (≤500ms cap), overshoot tuned by personality. Distinct from `press-release-spring` (a click/press reaction). Tags: spring, entrance, pop, scale-in, overshoot, stagger, arrival</spring-pop-entrance>
+<motion-blur-streak path="rules/motion-blur-streak.md">Fake directional velocity blur on a fast entrance / camera push-through — blur peaks at max speed, resolves to 0 at the settle. Two paths: SVG `feGaussianBlur` stdDeviation on the motion axis (proxy-tweened), or a deterministic echo/ghost trail that collapses into the lead. Entrances / mid-shot only. Tags: motion-blur, streak, velocity, ghost, echo, fast</motion-blur-streak>
+</rules>
+
+## Effect Recipes (moved from hyperframes-creative)
+
+<rules>
+<gsap-effects path="rules/gsap-effects.md">Drop-in GSAP timeline patterns — typewriter, audio visualizer, and other reusable choreography blocks. Tags: gsap, recipe, drop-in, typewriter, audio-visualizer</gsap-effects>
+<css-marker-patterns path="rules/css-marker-patterns.md">Pure CSS + GSAP implementations of marker-highlight drawing modes — highlight (yellow sweep), circle (hand-drawn ellipse), burst (radiating lines), scribble (chaotic), sketchout (rough rectangle outline). Tags: css, marker, highlight, text, emphasis</css-marker-patterns>
+</rules>
+
+## See Also
+
+- `blueprints-index.md` — the scene-shape templates (this skill's "blueprints") that compose these rules into full shots
+- `techniques.md` — broader motion-design techniques (SVG path drawing, Canvas 2D, CSS 3D, kinetic type, variable fonts, compositing); a few rules cite it
+- `transitions/` — scene-transition catalog (shared skill; story owns `transition_in`, the harness injects it)
diff --git a/.claude/skills-media/hyperframes-animation/rules/3d-page-scroll.md b/.claude/skills-media/hyperframes-animation/rules/3d-page-scroll.md
new file mode 100644
index 000000000..b0ab69262
--- /dev/null
+++ b/.claude/skills-media/hyperframes-animation/rules/3d-page-scroll.md
@@ -0,0 +1,227 @@
+---
+name: 3d-page-scroll
+description: Full webpage rendered as tilted 3D card that scrolls to reveal specific sections.
+metadata:
+  tags: 3d, page, scroll, webpage, tilt, product-demo, perspective
+---
+
+# 3D Page Scroll
+
+A webpage (or long content) presented as a tilted 3D card. Spring-eased scroll reveals specific sections while the static 3D perspective adds physical depth.
+
+## How It Works
+
+Two independent transforms combine:
+
+1. **3D tilt** — Static `rotateY` + `rotateX` with `perspective` on the card. The angle does **not** change during the scene.
+2. **Scroll** — The content inside the card translates vertically (`translateY` / `y` in GSAP) within a clipped container, driven by a GSAP tween. Spring-like deceleration via `ease: "power3.out"` or `"power4.out"`.
+
+Optional layer:
+
+3. **Spotlight overlay** — A radial-gradient mask dims everything except a focal region after the scroll lands. Use to draw attention to one section.
+
+For multi-step scrolling (scroll → pause → scroll), use multiple `tl.to(".page-content", { y: -<distance>, ... }, <position>)` calls at different timeline positions.
+
+## HTML
+
+```html
+<div
+  class="scene"
+  id="page-scroll-scene"
+  data-composition-id="page-scroll-scene"
+  data-start="0"
+  data-duration="5"
+  data-track-index="0"
+>
+  <div class="tilt-card">
+    <div class="page-content">
+      <!-- Full {Brand} webpage recreation, taller than card height so
+           scrolling matters. Each section is real DOM, not a screenshot. -->
+      <section class="page-hero">{heroContents}</section>
+      <section class="page-features">{featuresContents}</section>
+      <section class="page-target" id="target-section">{targetContents}</section>
+      <section class="page-cta">{ctaContents}</section>
+    </div>
+
+    <div class="spotlight"></div>
+  </div>
+</div>
+```
+
+## CSS (hero-frame layout)
+
+```css
+.scene {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+
+.tilt-card {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  /* tilt + perspective set in CSS only if no other transform tween touches
+     this element. If GSAP also tweens scale on .tilt-card, set the tilt
+     via gsap.set() to avoid matrix overwrites. */
+  transform: translate(-50%, -50%) perspective({perspectivePx}) rotateY({tiltYDeg}) rotateX({tiltXDeg});
+  transform-style: preserve-3d;
+  width: {cardWidth};
+  height: {cardHeight};
+  border-radius: 24px;
+  background: {cardBackgroundColor};
+  overflow: hidden; /* clip the scrolling content */
+  /* shadow X-offset sign must match tiltY sign (negative tiltY ⇒ positive X) */
+  box-shadow: 40px 30px 80px rgba(0, 0, 0, 0.45);
+}
+
+.page-content {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  /* height is intrinsic from sections — taller than .tilt-card.height */
+}
+
+.page-content section {
+  height: {sectionHeight}; /* sections sized so cumulative offset = target distance */
+  padding: 64px;
+  /* section-specific styling … */
+}
+
+.spotlight {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  opacity: 0;
+  background: radial-gradient(
+    ellipse 60% 35% at 50% 50%,
+    transparent 50%,
+    {spotlightDimColor} 100%
+  );
+}
+```
+
+## GSAP Timeline
+
+```html
+<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+<script>
+  window.__timelines = window.__timelines || {};
+  const tl = gsap.timeline({ paused: true });
+
+  // Phase 1 — Card enters (optional, can skip if card is in from t=0)
+  // Phase 2 — Scroll to the target section.
+  // SCROLL_DISTANCE is measured at design time from the page layout
+  // (top of .page-content origin to vertical center of #target-section,
+  // accounting for card height).
+  tl.to(
+    ".page-content",
+    {
+      y: -SCROLL_DISTANCE,
+      duration: SCROLL_DUR,
+      ease: "power3.out",
+    },
+    SCROLL_AT,
+  );
+
+  // Phase 3 — Spotlight fades in on the target after scroll settles
+  tl.to(
+    ".spotlight",
+    {
+      opacity: 1,
+      duration: SPOTLIGHT_FADE_DUR,
+      ease: "power1.inOut",
+    },
+    SPOTLIGHT_AT,
+  );
+
+  window.__timelines["page-scroll-scene"] = tl;
+</script>
+```
+
+### Multi-phase scroll variant
+
+```js
+// Scroll to section A → hold → scroll to section B.
+// SCROLL_DISTANCE_A and SCROLL_DISTANCE_B are both measured from the
+// .page-content origin (NOT delta from previous step).
+tl.to(
+  ".page-content",
+  { y: -SCROLL_DISTANCE_A, duration: SCROLL_DUR, ease: "power3.out" },
+  SCROLL_AT_A,
+);
+tl.to(
+  ".page-content",
+  { y: -SCROLL_DISTANCE_B, duration: SCROLL_DUR, ease: "power3.out" },
+  SCROLL_AT_B,
+);
+```
+
+GSAP composes successive `y:` tweens additively when targeting the same property — each tween starts from the value left by the previous tween.
+
+## How to Choose Values
+
+- **tiltYDeg** — static Y rotation in CSS (or via `gsap.set()`).
+  - Range: -12 to -4 (left-leaning) or 4 to 12 (right-leaning); 0 = no perspective rotation.
+  - Effects: bigger magnitude = more dramatic 3D; near 0 collapses to a flat panel.
+  - Constraints: shadow X-offset sign must match (negative tiltY ⇒ positive box-shadow X).
+- **tiltXDeg** — static X rotation.
+  - Range: 0-6
+  - Effects: positive tilts the top edge away from the viewer.
+- **perspectivePx** — perspective distance.
+  - Range: 800-2000 px
+  - Effects: smaller = more dramatic foreshortening; larger = nearly orthographic.
+- **cardWidth / cardHeight** — card frame size.
+  - Constraints: card height < total content height, otherwise scroll has nothing to reveal.
+- **sectionHeight** — height of each scrolled section.
+  - Constraints: sum of all section heights ≥ cardHeight + SCROLL_DISTANCE so the target section ends up within frame after scroll.
+- **SCROLL_AT** — timeline second at which the scroll tween begins.
+  - Constraints: must be ≥ end of any prior fade-in tweens on `.page-content`.
+- **SCROLL_DUR** — duration of one scroll tween.
+  - Range: 0.8-1.8 s
+  - Effects: shorter feels like a hard cut; longer feels programmatic.
+- **SCROLL_DISTANCE** — pixels to translate `.page-content` upward.
+  - Constraints: measured once at design time from the target section's offset; NOT a free tunable.
+- **SPOTLIGHT_AT** — timeline second at which the spotlight begins fading in.
+  - Constraints: should be ≥ SCROLL_AT + SCROLL_DUR (or slightly earlier for overlapping handoff) so the spotlight reveals the freshly-arrived section.
+- **SPOTLIGHT_FADE_DUR** — spotlight opacity fade-in duration.
+  - Range: 0.4-0.8 s
+- Multi-phase variant — **SCROLL_AT_A / SCROLL_AT_B**: must satisfy `SCROLL_AT_A + SCROLL_DUR ≤ SCROLL_AT_B` so the two scrolls don't fight for the y property.
+
+Ease family — discrete choice:
+
+- `power3.out` — heavy deceleration; reads as a programmatic scroll that "lands". Default.
+- `power4.out` — even heavier; reads as a momentum-driven scroll.
+- `power2.inOut` — symmetric; reads as a cinematic camera pan rather than UI scroll.
+
+Pick one and use it across all scrolls in the scene — mixing easings within one scene reads as jerky.
+
+## Key Principles
+
+- **Tilt is static**, not animated. The card holds its angle the whole scene.
+- **Shadow direction matches tilt**: a left-leaning card casts shadow to the right (positive X shadow offset). Mismatch breaks the 3D illusion.
+- **Page content is real HTML**, not a screenshot. Screenshots can't be individually highlighted or scrolled-to with precision.
+- **Use real layout for distances**: scroll target distance comes from the actual cumulative section heights, not estimated pixel values.
+- **Spotlight as overlay**, not inside the page-content — overlay sits above scrolling content and stays fixed relative to the card.
+
+## Critical Constraints
+
+- **`overflow: hidden` on `.tilt-card`** — scrolling content must clip at card boundaries, otherwise it leaks past the rounded corners
+- **`transform-style: preserve-3d`** on `.tilt-card` — required for any 3D children (or for combining `perspective` with rotations cleanly)
+- **Timeline must be paused**: `gsap.timeline({ paused: true })`. Never `tl.play()` — HF seeks frame-by-frame
+- **Registry key = `data-composition-id`**: `window.__timelines["page-scroll-scene"]` must match scene root's `data-composition-id`
+- **Finite scroll distance** — compute from actual content geometry; don't use arbitrary values that may overshoot the content end
+- **Same easing across multi-phase scroll** — mixing `power3.out` and `power1.inOut` looks jerky; pick one for the scene
+
+## Combinations
+
+- [asr-keyword-glow.md](asr-keyword-glow.md) — highlight elements on the page synced to voiceover word timestamps
+- [multi-phase-camera.md](multi-phase-camera.md) — overall camera zoom while the page scrolls (zoom-in to target section as it lands)
+- [cursor-click-ripple.md](cursor-click-ripple.md) — cursor lands on a UI element within the scrolled-into-view section
+
+## Pairs with HF skills
+
+- `/hyperframes-animation` — timeline + ease reference; `y:` tween basics
+- `/hyperframes-core` — composition wiring, `data-*` attributes
+- `/hyperframes-cli` — `hyperframes lint` to verify the registry key + duration
diff --git a/.claude/skills-media/hyperframes-animation/rules/3d-text-depth-layers.md b/.claude/skills-media/hyperframes-animation/rules/3d-text-depth-layers.md
new file mode 100644
index 000000000..8ebc903c2
--- /dev/null
+++ b/.claude/skills-media/hyperframes-animation/rules/3d-text-depth-layers.md
@@ -0,0 +1,297 @@
+---
+name: 3d-text-depth-layers
+description: Multiple offset text layers create a stacked 3D shadow / extrusion effect on large typography — more impactful than CSS text-shadow because each layer is a full DOM element.
+metadata:
+  tags: text, 3d, depth, layers, shadow, typography, stacked, extrusion
+---
+
+# 3D Text Depth Layers
+
+Renders the same text N times at increasing offsets, with back layers translucent and the front layer fully opaque. Creates a physical "stacked extrusion" depth illusion. Distinct from `text-shadow` (which can't have per-layer hue / opacity / animation) — each layer is a real DOM element.
+
+## How It Works
+
+- N copies of the same text in a single container
+- Each copy positioned absolutely with offset `(i * OFFSET_X, i * OFFSET_Y)`
+- Back layers (high `i`) use translucent or darkened color
+- Front layer (`i = 0`) is full opacity, full brand color
+- Optionally: each layer fades in staggered, creating a "building up" depth animation
+
+## HTML
+
+```html
+<div
+  class="scene"
+  id="depth-scene"
+  data-composition-id="depth-scene"
+  data-start="0"
+  data-duration="3"
+  data-track-index="0"
+>
+  <div class="depth-stack">
+    <!-- Layers injected by script — LAYER_COUNT copies of {label} -->
+  </div>
+</div>
+```
+
+## CSS
+
+```css
+.scene {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  display: grid;
+  place-items: center;
+  background: {bgColor};
+}
+.depth-stack {
+  position: relative;
+  /* Container size set by the front layer; back layers stack behind */
+}
+.depth-text {
+  font-family: {font};
+  font-weight: 900;
+  font-size: HERO_FONT_SIZE;
+  letter-spacing: HERO_LETTER_SPACING;
+  line-height: 1;
+  color: {frontColor};
+  text-transform: uppercase;
+}
+/* Back layers — absolute, stacked behind */
+.depth-text.is-back {
+  position: absolute;
+  top: 0;
+  left: 0;
+  pointer-events: none;
+}
+/* Front layer — relative to define container size */
+.depth-text.is-front {
+  position: relative;
+  z-index: 10;
+}
+```
+
+## GSAP Timeline + Layer Setup
+
+```html
+<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+<script>
+  window.__timelines = window.__timelines || {};
+
+  const TEXT = "{label}";
+  const stack = document.querySelector(".depth-stack");
+
+  // Build layers — back-to-front so the FRONT (i=0) is the LAST appended
+  // and `position: relative` defines container size.
+  for (let i = LAYER_COUNT - 1; i >= 0; i--) {
+    const el = document.createElement("div");
+    el.className = "depth-text " + (i === 0 ? "is-front" : "is-back");
+    el.textContent = TEXT;
+    if (i > 0) {
+      const alpha = Math.max(BACK_ALPHA_MAX - i * BACK_ALPHA_STEP, BACK_ALPHA_MIN);
+      el.style.color = `rgba({backHueRGB}, ${alpha})`;
+      el.style.transform = `translate(${i * OFFSET_X}px, ${i * OFFSET_Y}px)`;
+    } else {
+      el.style.color = "{frontColor}";
+    }
+    el.dataset.layer = String(i);
+    stack.appendChild(el);
+  }
+
+  const tl = gsap.timeline({ paused: true });
+
+  // Layered entry — back layers appear first, building forward
+  const allLayers = stack.querySelectorAll(".depth-text");
+  allLayers.forEach((el) => {
+    const i = Number(el.dataset.layer);
+    const finalAlpha = el.classList.contains("is-front")
+      ? 1
+      : Math.max(BACK_ALPHA_MAX - i * BACK_ALPHA_STEP, BACK_ALPHA_MIN);
+    tl.fromTo(
+      el,
+      { opacity: 0 },
+      {
+        opacity: finalAlpha,
+        duration: LAYER_FADE_DUR,
+        ease: "power2.out",
+      },
+      LAYER_CASCADE_START + (LAYER_COUNT - 1 - i) * LAYER_CASCADE_STEP,
+    );
+  });
+
+  // Optional: depth grows on entry (offset interpolates from 0 → full)
+  const depthState = { p: 0 };
+  tl.to(
+    depthState,
+    {
+      p: 1,
+      duration: DEPTH_GROW_DUR,
+      ease: "power2.out",
+      onUpdate: () => {
+        stack.querySelectorAll(".depth-text.is-back").forEach((el) => {
+          const i = Number(el.dataset.layer);
+          const x = i * OFFSET_X * depthState.p;
+          const y = i * OFFSET_Y * depthState.p;
+          el.style.transform = `translate(${x}px, ${y}px)`;
+        });
+      },
+    },
+    DEPTH_GROW_START,
+  );
+
+  window.__timelines["depth-scene"] = tl;
+</script>
+```
+
+## Variations
+
+### Static depth (no animation, single hero shot)
+
+Skip the cascade — render all layers in their final positions from t=0, optionally fade the entire stack in:
+
+```js
+tl.from(
+  stack,
+  { opacity: 0, scale: STATIC_ENTRY_SCALE, duration: STATIC_ENTRY_DUR, ease: "power3.out" },
+  0,
+);
+```
+
+### Dynamic depth pulse
+
+Animate `OFFSET_X` / `OFFSET_Y` based on a heartbeat — depth grows and shrinks rhythmically:
+
+```js
+const beat = { p: 0 };
+tl.to(
+  beat,
+  {
+    p: Math.PI * 2 * BEAT_CYCLES,
+    duration: BEAT_DUR,
+    ease: "none",
+    onUpdate: () => {
+      const mult = 1 + Math.sin(beat.p) * BEAT_AMP;
+      stack.querySelectorAll(".is-back").forEach((el) => {
+        const i = Number(el.dataset.layer);
+        el.style.transform = `translate(${i * OFFSET_X * mult}px, ${i * OFFSET_Y * mult}px)`;
+      });
+    },
+  },
+  BEAT_START,
+);
+```
+
+### Color-shift back layers
+
+Instead of fading to translucent, shift to a different hue — depth reads as "casting a colored shadow":
+
+```js
+el.style.color = `hsla(${HUE_BASE - i * HUE_STEP}, ${SAT_PCT}%, ${LIGHT_BASE - i * LIGHT_STEP}%, 1)`;
+```
+
+## How to Choose Values
+
+### Layer geometry
+
+- **LAYER_COUNT** — number of stacked copies (back layers + 1 front).
+  - Range: 4-6. Below 4 the depth doesn't read as 3D; above 6 the stack visually clutters on tight kerning
+  - Effects: low end reads as subtle shadow; high end reads as chunky extrusion
+- **OFFSET_X / OFFSET_Y** — per-layer translation offset, in px.
+  - Range: 1-3 px each. Above 4 px reads as a glitch / chromatic aberration rather than depth
+  - Effects: offset direction implies light direction. `(+x, +y)` = light from upper-left; `(-x, +y)` = light from upper-right. Pick one and keep it consistent across the composition
+  - Constraints: same sign convention throughout the composition
+
+### Back-layer color falloff
+
+- **BACK_ALPHA_MAX** — alpha of the back layer nearest the front.
+  - Range: 0.6-0.85. Lower than 0.5 makes even the nearest back layer disappear; higher than 0.9 fights the front layer for dominance
+- **BACK_ALPHA_STEP** — alpha decrement per layer further back.
+  - Range: 0.08-0.15. Smaller steps read as a soft gradient; larger steps read as discrete plates
+  - Constraints: choose so `BACK_ALPHA_MAX − (LAYER_COUNT − 2) × BACK_ALPHA_STEP ≥ BACK_ALPHA_MIN`
+- **BACK_ALPHA_MIN** — floor below which back layers stop fading.
+  - Range: 0.1-0.2. Below 0.1 the deepest layer disappears entirely on dark backgrounds
+
+### Typography
+
+- **HERO_FONT_SIZE** — front-layer font size, in px.
+  - Range: 60 px minimum to read as layered; 200-340 px for full-bleed hero shots. Thin text loses the layered illusion
+- **HERO_LETTER_SPACING** — letter spacing.
+  - Range: −0.03em (tight) to 0 (normal). Negative spacing tightens the stack so the offsets read as depth instead of as repetition
+- **{font}** — typeface; pick a black/900 weight family with strong horizontal strokes
+- **{frontColor}** — front-layer color; the brand or accent color
+- **{backHueRGB}** — RGB triplet for back layers (e.g. matched to a brand glow). Used inside `rgba({backHueRGB}, ${alpha})`
+
+### Cascade entry (default form)
+
+- **LAYER_CASCADE_START** — timeline offset where the cascade begins.
+  - Constraints: ≥ 0; if another beat precedes, ≥ that beat's end
+- **LAYER_CASCADE_STEP** — delay between each layer's fade-in.
+  - Range: 0.04-0.10 s. Smaller feels almost-simultaneous; larger feels stepped and mechanical
+- **LAYER_FADE_DUR** — duration of each individual layer's fade-in.
+  - Range: 0.3-0.6 s
+
+### Depth-grow tween
+
+- **DEPTH_GROW_START** — when the offset growth begins.
+  - Constraints: typically `≈ LAYER_CASCADE_START`; align so the first layer's fade and the depth growth start together
+- **DEPTH_GROW_DUR** — duration over which offsets interpolate from 0 to full.
+  - Range: 0.4-0.8 s. Roughly match `LAYER_FADE_DUR × LAYER_COUNT / 2` so depth lands as the last layer fades in
+
+### Static-depth variation
+
+- **STATIC_ENTRY_SCALE** — initial scale before the whole stack fades in.
+  - Range: 0.94-0.98 — subtle inflation; larger reads as a separate "pop" effect
+- **STATIC_ENTRY_DUR** — fade-in duration for the whole stack.
+  - Range: 0.5-0.8 s
+
+### Dynamic-pulse variation
+
+- **BEAT_CYCLES** — number of full beat cycles across `BEAT_DUR`.
+  - Range: `BEAT_DUR / 1.5s ≤ BEAT_CYCLES ≤ BEAT_DUR / 0.7s` (one beat per 0.7-1.5 s reads as a heartbeat)
+- **BEAT_DUR** — pulse tween duration.
+  - Constraints: tied to the visible window of the depth stack
+- **BEAT_AMP** — fractional amplitude of the offset pulse.
+  - Range: 0.2-0.6. Smaller is a gentle breathing depth; larger reads as a kick-drum thump
+- **BEAT_START** — when the pulse begins.
+  - Constraints: `≥ DEPTH_GROW_START + DEPTH_GROW_DUR` so the pulse modulates a fully-grown stack
+
+### Color-shift variation
+
+- **HUE_BASE / HUE_STEP** — base hue (front layer) and per-layer hue rotation.
+  - Range: `HUE_STEP` 4-12°. Larger steps cycle further around the color wheel and read as glitch
+- **SAT_PCT** — fixed saturation for all layers.
+  - Range: 60-85%
+- **LIGHT_BASE / LIGHT_STEP** — base lightness and per-layer darkening.
+  - Range: `LIGHT_STEP` 3-8 percentage points so back layers darken into the background
+
+## Key Principles
+
+- **Layer count 4-6** — fewer than 4 doesn't read as 3D, more than 6 visually clutters on tight kerning
+- **Offset 1-3 px per axis** — subtle is dramatic. `OFFSET = 6+` looks like a glitch rather than depth
+- **Offset direction implies light direction** — `(+x, +y)` = light from upper-left; `(-x, +y)` = light from upper-right. Pick one and be consistent across the composition
+- **Back layers translucent OR darker** — DON'T make them MORE saturated than the front (looks like a halo). Each back layer should be slightly more transparent (`alpha -= BACK_ALPHA_STEP per layer`) or slightly darker
+- **Last (front) layer `position: relative`** to define container size; all others `position: absolute` stack behind
+- **Bold/black weight + large size** — 900 weight, 60 px+ minimum. Thin text loses the layered illusion
+- **Don't apply per-letter animation on top of layers** — character animations (hacker-flip, typewriter) on top of 6-layer depth = chaos. If you need both effects, drop depth to 2-3 layers OR apply layers only to the static post-reveal state
+
+## Critical Constraints
+
+- **Timeline must be paused**: `gsap.timeline({ paused: true })`
+- **Registry key = `data-composition-id`**
+- **No CSS `text-shadow`** alongside layered depth — they compound and over-extrude
+- **Use `transform: translate()` for offsets, not `top`/`left`** — translate composes cleanly with parent's centering and avoids reflow
+- **`pointer-events: none` on back layers** — they're decorative; don't catch hover or selection
+- **Set layer color via `rgba()` not opacity** — opacity on the whole element fades the rendered glyph including any shadow; rgba in `color` fades just the glyph
+
+## Combinations
+
+- [counting-dynamic-scale.md](counting-dynamic-scale.md) — render the counter number with depth layers
+- [sine-wave-loop.md](sine-wave-loop.md) — idle breathing on the front layer after reveal
+- [center-outward-expansion.md](center-outward-expansion.md) — depth-stacked wordmark reveals after burst lands
+
+## Pairs with HF skills
+
+- `/hyperframes-animation` — staggered fade-ins + onUpdate for dynamic depth
+- `/hyperframes-core` — composition wiring
+- `/hyperframes-cli` — `hyperframes lint`
diff --git a/.claude/skills-media/hyperframes-animation/rules/ai-tracking-box.md b/.claude/skills-media/hyperframes-animation/rules/ai-tracking-box.md
new file mode 100644
index 000000000..05a6dcf44
--- /dev/null
+++ b/.claude/skills-media/hyperframes-animation/rules/ai-tracking-box.md
@@ -0,0 +1,382 @@
+---
+name: ai-tracking-box
+description: Animated bounding box with L-shaped corner markers following an oscillating path — simulates AI object detection / tracking.
+metadata:
+  tags: ai, tracking, bounding-box, detection, corner, yellow, ml
+---
+
+# AI Tracking Box
+
+A bounding box with corner markers ("L-brackets") that follows a moving target, simulating real-time AI detection. Position and size oscillate on sine paths to mimic continuous re-computation. Conventionally rendered in "AI detection yellow" (`{detectionYellow}`) on a dark background with a confidence label.
+
+## How It Works
+
+- Box position `(x, y)` and size `(w, h)` are derived from sine + drift across composition time
+- 4 L-bracket corner markers (`<div>` per corner with two-sided borders) sit ON the box
+- Optional label tag above the top-left corner showing class name + confidence percent
+
+All driven by GSAP timeline so HF seeks deterministically.
+
+## HTML
+
+```html
+<div
+  class="scene"
+  id="track-scene"
+  data-composition-id="track-scene"
+  data-start="0"
+  data-duration="5"
+  data-track-index="0"
+>
+  <!-- Background — could be a product mockup, hero image, etc. -->
+  <div class="bg">
+    <div class="bg-content">{Brand}</div>
+    <div class="bg-mascot" id="mascot">{targetGlyph}</div>
+  </div>
+
+  <!-- Tracking box wraps the target -->
+  <div class="track-box" id="track-box">
+    <div class="corner tl"></div>
+    <div class="corner tr"></div>
+    <div class="corner bl"></div>
+    <div class="corner br"></div>
+    <div class="label" id="label">{targetGlyph} {LABEL} · {confidence}%</div>
+  </div>
+</div>
+```
+
+## CSS
+
+```css
+.scene {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  background: radial-gradient(ellipse at center, {bgInner} 0%, {bgOuter} 70%);
+  font-family: {font};
+  overflow: hidden;
+}
+.bg {
+  position: absolute;
+  inset: 0;
+  display: grid;
+  place-items: center;
+  gap: 60px;
+}
+.bg-content {
+  position: absolute;
+  top: 120px;
+  left: 50%;
+  transform: translateX(-50%);
+  font-size: 80px;
+  font-weight: 900;
+  color: {bgTextColor};
+  letter-spacing: 12px;
+  text-transform: uppercase;
+}
+.bg-mascot {
+  position: absolute;
+  font-size: 240px;
+  line-height: 1;
+}
+
+.track-box {
+  position: absolute;
+  /* Position + size set by GSAP onUpdate */
+  pointer-events: none;
+  will-change: transform, width, height;
+}
+.corner {
+  position: absolute;
+  width: 48px;
+  height: 48px;
+}
+.corner.tl {
+  top: -8px;
+  left: -8px;
+  border-top: 6px solid {detectionYellow};
+  border-left: 6px solid {detectionYellow};
+}
+.corner.tr {
+  top: -8px;
+  right: -8px;
+  border-top: 6px solid {detectionYellow};
+  border-right: 6px solid {detectionYellow};
+}
+.corner.bl {
+  bottom: -8px;
+  left: -8px;
+  border-bottom: 6px solid {detectionYellow};
+  border-left: 6px solid {detectionYellow};
+}
+.corner.br {
+  bottom: -8px;
+  right: -8px;
+  border-bottom: 6px solid {detectionYellow};
+  border-right: 6px solid {detectionYellow};
+}
+.label {
+  position: absolute;
+  top: -56px;
+  left: -8px;
+  padding: 8px 16px;
+  background: {detectionYellow};
+  color: {labelTextColor};
+  font-family: {monoFont};
+  font-size: 24px;
+  font-weight: 800;
+  letter-spacing: 2px;
+  border-radius: 6px;
+  white-space: nowrap;
+}
+```
+
+## GSAP Timeline
+
+```html
+<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+<script>
+  window.__timelines = window.__timelines || {};
+  const tl = gsap.timeline({ paused: true });
+
+  const box = document.getElementById("track-box");
+  const mascot = document.getElementById("mascot");
+  const label = document.getElementById("label");
+
+  // Initial state — box invisible, will fade in
+  gsap.set(box, { opacity: 0, scale: ENTRY_SCALE });
+
+  // Phase 1 — box entry (fade in + scale to 1)
+  tl.to(
+    box,
+    {
+      opacity: 1,
+      scale: 1,
+      duration: ENTRY_DUR,
+      ease: `back.out(${ENTRY_BOUNCE})`,
+    },
+    ENTRY_START,
+  );
+
+  // Phase 2 — continuous "AI tracking" — box and mascot move in lock-step on sine paths
+  const SCREEN_CENTER = { x: COMP_WIDTH / 2, y: COMP_HEIGHT / 2 };
+  // DRIFT_X / DRIFT_Y — target oscillation amplitude (px)
+  // SIZE_BASE / SIZE_VAR — box mean size + per-frame jitter amplitude (px)
+  // SIZE_FREQ_MULT — multiplier on tracking phase so box "breathes" off-tempo from drift
+  // CYCLES — number of full oscillations across TRACK_DUR
+  // TRACK_DUR — duration of the tracking phase (s)
+  // TRACK_START — when tracking phase begins (s)
+  // CONFIDENCE_MEAN / CONFIDENCE_VAR — center + half-range of the flickering confidence %
+  // CONFIDENCE_FREQ_MULT — how fast confidence flickers relative to drift
+
+  const tracking = { p: 0 };
+  tl.to(
+    tracking,
+    {
+      p: Math.PI * 2 * CYCLES,
+      duration: TRACK_DUR,
+      ease: "none",
+      onUpdate: () => {
+        // Target position (the mascot moves on a wider arc)
+        const mx = SCREEN_CENTER.x + Math.cos(tracking.p) * DRIFT_X;
+        const my = SCREEN_CENTER.y + Math.sin(tracking.p) * DRIFT_Y;
+        mascot.style.position = "absolute";
+        mascot.style.left = `${mx - MASCOT_SIZE / 2}px`;
+        mascot.style.top = `${my - MASCOT_SIZE / 2}px`;
+
+        // Box size oscillates slightly (size confidence variation)
+        const w = SIZE_BASE + Math.sin(tracking.p * SIZE_FREQ_MULT) * SIZE_VAR;
+        const h = SIZE_BASE + Math.sin(tracking.p * SIZE_FREQ_MULT + Math.PI / 2) * SIZE_VAR;
+
+        // Box position centers on mascot
+        box.style.width = `${w}px`;
+        box.style.height = `${h}px`;
+        box.style.left = `${mx - w / 2}px`;
+        box.style.top = `${my - h / 2}px`;
+
+        // Confidence label fluctuates inside [CONFIDENCE_MEAN ± CONFIDENCE_VAR]
+        const confidence = Math.round(
+          CONFIDENCE_MEAN + Math.sin(tracking.p * CONFIDENCE_FREQ_MULT) * CONFIDENCE_VAR,
+        );
+        label.textContent = `${TARGET_GLYPH} ${LABEL_TEXT} · ${confidence}%`;
+      },
+    },
+    TRACK_START,
+  );
+
+  window.__timelines["track-scene"] = tl;
+</script>
+```
+
+## How to Choose Values
+
+- **ENTRY_SCALE** — start scale of the box before it pops in
+  - Range: 0.5-0.9
+  - Effects: low end = stronger pop / more "snapping into focus"; high end = subtle reveal
+  - Constraints: must be < 1 (box scales UP into place)
+  - Reference: examples use 0.7
+
+- **ENTRY_DUR** — duration of the fade-in + scale-up (seconds)
+  - Range: 0.3-0.8 s
+  - Effects: low end = snappy / authoritative lock-on; high end = soft / observational
+  - Constraints: should end before TRACK_START
+  - Reference: examples use 0.5
+
+- **ENTRY_START** — when the entry tween begins (seconds, absolute on timeline)
+  - Range: 0-2 s typically
+  - Effects: late start = lets the viewer notice the target first before the AI "finds" it; early start = AI is already watching
+  - Constraints: ENTRY_START + ENTRY_DUR ≤ TRACK_START
+  - Reference: examples use 0.5
+
+- **ENTRY_BOUNCE** — coefficient passed to `back.out(...)` on entry
+  - Range: 1.2-2.5
+  - Effects: low end = subtle overshoot; high end = exaggerated snap (reads as "aggressive lock-on")
+  - Constraints: stick to `back.out` family — `elastic` reads as cartoonish, `power` reads as flat
+  - Reference: examples use 1.4
+
+- **TRACK_START** — when continuous tracking begins (seconds)
+  - Range: ≥ ENTRY_START + ENTRY_DUR
+  - Effects: gap between entry and tracking = pause for emphasis; no gap = seamless lock + follow
+  - Constraints: TRACK_START + TRACK_DUR ≤ composition duration
+  - Reference: examples use 1.0
+
+- **TRACK_DUR** — length of the tracking phase (seconds)
+  - Range: 2-8 s
+  - Effects: short = "quick scan"; long = "sustained observation"
+  - Constraints: must accommodate at least one full CYCLE to read as oscillation
+  - Reference: examples use 4.0
+
+- **CYCLES** — number of full sine oscillations of the target across TRACK_DUR
+  - Range: 0.5-3
+  - Effects: low = lazy drift; high = jittery / hyperactive target
+  - Constraints: CYCLES / TRACK_DUR sets effective Hz of drift; keep < ~0.6 Hz or motion blurs
+  - Reference: examples use 1.5
+
+- **DRIFT_X / DRIFT_Y** — amplitude of target oscillation around screen center (px, 1920×1080 basis)
+  - Range: 40-200 px
+  - Effects: small = subtle hover; large = wide chase that pushes the box near the frame edge
+  - Constraints: SCREEN_CENTER ± DRIFT must keep mascot fully on screen given MASCOT_SIZE
+  - Reference: examples use 80 / 50
+
+- **SIZE_BASE** — mean width/height of the bounding box (px)
+  - Range: 200-500 px
+  - Effects: small = "specimen tag"; large = "the box IS the subject"
+  - Constraints: must visibly enclose the target glyph at all confidence sizes
+  - Reference: examples use 320
+
+- **SIZE_VAR** — half-amplitude of per-frame size jitter (px)
+  - Range: 5-10% of SIZE_BASE
+  - Effects: low end = stable / confident detector; high end = jittery / re-fitting detector. Outside this range reads as "broken" (too much) or "static UI" (none)
+  - Constraints: keep < 0.15 × SIZE_BASE to avoid breaking the L-bracket illusion
+  - Reference: examples use 30 (~9% of 320)
+
+- **SIZE_FREQ_MULT** — multiplier on tracking phase for size oscillation
+  - Range: 1.5-3
+  - Effects: 1 = size pulses in lock-step with drift (reads mechanical); irrational ratio = organic re-fitting
+  - Constraints: avoid integer ratios; non-integer reads as continuous recomputation
+  - Reference: examples use 2.3
+
+- **MASCOT_SIZE** — rendered width of the mascot element (px); used to center it on (mx, my)
+  - Range: matches CSS `font-size` of `.bg-mascot`
+  - Effects: must match the actual rendered size or mascot drifts out of the box
+  - Constraints: MASCOT_SIZE / 2 = offset applied to top/left
+  - Reference: examples use 240 (matches `font-size: 240px`)
+
+- **CONFIDENCE_MEAN** — center % shown on the label
+  - Range: 95-99
+  - Effects: < 95 reads "uncertain"; 100 reads "fake-precise". 97 is the sweet spot for "confident AI"
+  - Constraints: keep CONFIDENCE_MEAN + CONFIDENCE_VAR ≤ 99
+  - Reference: examples use 97
+
+- **CONFIDENCE_VAR** — flicker half-range around CONFIDENCE_MEAN
+  - Range: 1-3
+  - Effects: 0 = static (looks like a screenshot); >3 = unstable (looks broken)
+  - Constraints: CONFIDENCE_MEAN ± CONFIDENCE_VAR ⊂ [95, 99]
+  - Reference: examples use 2
+
+- **CONFIDENCE_FREQ_MULT** — multiplier on tracking phase for label flicker
+  - Range: 3-6
+  - Effects: low = synced with drift (mechanical); high = fast nervous flicker (reads "live inference")
+  - Constraints: keep above SIZE_FREQ_MULT so label flickers faster than the box breathes
+  - Reference: examples use 4
+
+- **COMP_WIDTH / COMP_HEIGHT** — composition pixel dimensions (used to derive SCREEN_CENTER)
+  - Range: dictated by the HF composition (`data-width` / `data-height`)
+  - Effects: not a creative choice — match the parent composition
+  - Constraints: SCREEN_CENTER = (COMP_WIDTH/2, COMP_HEIGHT/2)
+  - Reference: examples use 1920 × 1080
+
+- **{detectionYellow}** — corner-marker + label background color
+  - This is a **discrete convention**, not a tunable range. AI detection overlays are yellow on dark backgrounds across the industry (autonomous-vehicle HUDs, security CV, ML demos). Red reads as "warning", green as "success", blue as "info" — none read as "detection."
+  - Recommended: a saturated warm yellow (`#facc15` / `#FCD34D` family) on a dark navy or near-black background. Substituting any other hue loses genre legibility.
+  - Reference: examples use `#facc15` (Tailwind `yellow-400`)
+
+- **{bgInner} / {bgOuter}** — radial-gradient background stops
+  - Should be dark and low-chroma so the yellow markers pop
+  - Constraints: choose colors with sufficient contrast against {detectionYellow} (the corners and label must remain readable)
+  - Reference: examples use `#161a3a` (inner) → `#0b0d1f` (outer)
+
+- **{labelTextColor}** — text color inside the yellow label tag
+  - Constraints: must contrast against {detectionYellow}; typically the same near-black as {bgOuter}
+  - Reference: examples use `#0b0d1f`
+
+- **{font} / {monoFont}** — scene text font and label font
+  - {font}: sans-serif body font for {Brand} backdrop
+  - {monoFont}: monospaced font for the confidence label (mono reinforces "machine readout" affordance)
+  - Reference: examples use `"Inter", sans-serif` and `"JetBrains Mono", monospace`
+
+## Variations
+
+### Multi-object detection
+
+Multiple boxes at different phases (each tracking its own mascot). Each is its own onUpdate-driven set; offset their phase by `Math.PI / N` so they don't tick synchronously.
+
+### Lost-then-reacquired
+
+The box fades to {LOST_OPACITY} (~{LOST_DUR}) then re-snaps to a new position with a "REACQUIRED" label flash:
+
+```js
+tl.to(box, { opacity: LOST_OPACITY, duration: LOST_DUR }, LOST_START);
+tl.to(
+  box,
+  { opacity: 1.0, duration: REACQUIRE_DUR, ease: `back.out(${REACQUIRE_BOUNCE})` },
+  REACQUIRE_START,
+);
+tl.to(label, { textContent: "REACQUIRED · 99%", duration: 0 }, REACQUIRE_START);
+```
+
+(LOST_OPACITY ≈ 0.2-0.4; REACQUIRE_BOUNCE ≈ 1.8-2.5 for a snappier re-lock than the initial entry.)
+
+### Tracking-then-zoom
+
+After tracking, the camera (via [viewport-change](viewport-change.md)) zooms into the tracked box. Combined effect: "the AI found something, now show it."
+
+## Key Principles
+
+- **Yellow on dark background is the detection convention** — see {detectionYellow} entry. Other colors lose the genre signal.
+- **Box ALWAYS contains the target** — recompute box position EVERY frame from target position; never trail behind. If the box lags, it reads as "broken tracker," not "smart AI."
+- **Subtle size variation (~5-10% of SIZE_BASE)** — too much and the tracker looks confused; just right reads as "real-time recomputation."
+- **Corner markers, not full borders** — L-brackets are the genre signature. Full border looks like a generic UI box.
+- **Confidence label flickers in a tight range (CONFIDENCE_MEAN ± CONFIDENCE_VAR inside [95, 99])** — outside that range reads as "uncertain"; ≥100 reads as "fake-precise."
+- **No CSS animation for the tracking — use timeline onUpdate** — HF seek-by-frame doesn't sync with CSS animation.
+
+## Critical Constraints
+
+- **Timeline must be paused**: `gsap.timeline({ paused: true })`
+- **Registry key = `data-composition-id`**
+- **No CSS animation on `.track-box` or `.corner`** — must be timeline-driven
+- **`will-change: transform, width, height`** on `.track-box`
+- **`pointer-events: none`** on `.track-box` — decorative overlay
+- **Box position recomputed per-frame from target** — never tween box position separately from target
+
+## Combinations
+
+- [viewport-change.md](viewport-change.md) — zoom into the tracked box after detection phase
+- [multi-phase-camera.md](multi-phase-camera.md) — wide shot during tracking, push-in on lock
+- [sine-wave-loop.md](sine-wave-loop.md) — the mascot itself idle-breathes inside the box
+
+## Pairs with HF skills
+
+- `/hyperframes-animation` — onUpdate writing multi-element positions
+- `/hyperframes-core` — composition wiring
+- `/hyperframes-cli` — `hyperframes lint`
diff --git a/.claude/skills-media/hyperframes-animation/rules/ambient-glow-bloom.md b/.claude/skills-media/hyperframes-animation/rules/ambient-glow-bloom.md
new file mode 100644
index 000000000..6423b4c18
--- /dev/null
+++ b/.claude/skills-media/hyperframes-animation/rules/ambient-glow-bloom.md
@@ -0,0 +1,305 @@
+---
+name: ambient-glow-bloom
+description: Un-triggered soft radial glow that blooms in behind a hero element and holds with a bounded idle breathe, or a single-pass traveling sweep across a surface. No click, no word-sync — it just blooms. Finite, deterministic, seek-safe.
+metadata:
+  tags: glow, bloom, ambient, radial, sweep, hero, presence, finite, un-triggered
+---
+
+# Ambient Glow Bloom
+
+A soft radial glow that **blooms in behind a hero element** (card, logo, metric) and holds, giving it presence. Unlike `press-release-spring`'s click-triggered burst or `asr-keyword-glow`'s word-timed envelope, this glow is **un-triggered** — it simply blooms on the hero's settle and stays lit. Two forms: a **hero bloom** that swells behind a settling element and then breathes, and a **traveling glow sweep** that translates a soft highlight across a surface exactly once. Both are finite, deterministic, and seek-safe.
+
+## How It Works
+
+A radial-gradient layer sits **behind** the hero (`z-index` below it), starting at `opacity: 0`. Over the bloom-in window it ramps `opacity: 0 → peak` with a gentle `scale` swell (the halo "inflates" into place), timed to land on the hero's settle so the two read as one beat.
+
+Two forms diverge after bloom-in:
+
+1. **Hero bloom** — once lit, the glow does a **bounded idle breathe** during the hold. Drive it with an `onUpdate` reading `tl.time()` (NOT a `repeat: -1` yoyo): a `Math.sin` of elapsed time nudges `opacity` and `scale` a hair around their peak. At `sin(0) = 0` the breathe starts exactly at the bloom's resting state — no jump.
+2. **Traveling sweep** — a narrow highlight gradient at one edge of the surface translates **once** across to the other edge (`x` from off-surface to off-surface), a single finite pass. No loop, no return. The sweep layer is clipped to the surface so the highlight only reads where it overlaps.
+
+Peak opacity stays restrained (≤ ~0.45) so the glow gives presence without washing the frame; the glow color is darker / more saturated than the element it backs.
+
+## HTML
+
+```html
+<div
+  class="scene"
+  id="bloom-scene"
+  data-composition-id="bloom-scene"
+  data-start="0"
+  data-duration="DURATION"
+  data-track-index="0"
+>
+  <div class="bloom-stage">
+    <!-- Glow layer sits BEHIND the hero -->
+    <div class="bloom-glow" id="bloom-glow"></div>
+    <div class="hero-card" id="hero-card">{HeroLabel}</div>
+  </div>
+</div>
+```
+
+For the traveling-sweep form, the sweep layer is clipped to the surface it crosses:
+
+```html
+<div class="surface" id="surface">
+  <!-- grid / wordmark / card content here -->
+  <div class="sweep" id="sweep"></div>
+</div>
+```
+
+## CSS
+
+```css
+.scene {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  display: grid;
+  place-items: center;
+  background: {bgColor};
+}
+.bloom-stage {
+  position: relative;
+  display: grid;
+  place-items: center;
+}
+.hero-card {
+  position: relative;
+  z-index: 2;
+  width: HERO_WIDTH;
+  height: HERO_HEIGHT;
+  display: grid;
+  place-items: center;
+  background: {heroBg};
+  border-radius: HERO_RADIUS;
+  font-family: {font};
+  font-weight: 900;
+  font-size: HERO_FONT_SIZE;
+  color: {heroTextColor};
+}
+.bloom-glow {
+  /* Radial halo behind the hero — extends past it via negative inset */
+  position: absolute;
+  z-index: 1;
+  inset: GLOW_INSET;
+  background: {glowGradient};
+  opacity: 0;
+  transform: scale(GLOW_START_SCALE);
+  transform-origin: 50% 50%;
+  pointer-events: none;
+  /* will-change because opacity + scale both animate during bloom AND breathe */
+  will-change: transform, opacity;
+}
+
+/* Traveling-sweep form */
+.surface {
+  position: relative;
+  overflow: hidden; /* clips the sweep to the surface footprint */
+  border-radius: SURFACE_RADIUS;
+}
+.sweep {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  /* A narrow soft band, wider than it needs to be so the falloff is gentle */
+  width: SWEEP_WIDTH;
+  /* Diagonal highlight: angle the gradient so the sweep reads as raked light */
+  background: {sweepGradient};
+  opacity: 0;
+  pointer-events: none;
+  will-change: transform, opacity;
+}
+```
+
+## GSAP Timeline
+
+```html
+<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+<script>
+  window.__timelines = window.__timelines || {};
+  const tl = gsap.timeline({ paused: true });
+
+  const glow = document.getElementById("bloom-glow");
+
+  // ── Form A: HERO BLOOM ──────────────────────────────────────────────
+  // Phase 1 — bloom in. opacity 0 → peak + gentle scale swell, landing on
+  // the hero's settle. ease "power2.out" so it arrives soft, not snappy.
+  tl.fromTo(
+    glow,
+    { opacity: 0, scale: GLOW_START_SCALE },
+    {
+      opacity: GLOW_PEAK_OPACITY,
+      scale: 1,
+      duration: BLOOM_DUR,
+      ease: "power2.out",
+    },
+    BLOOM_START,
+  );
+
+  // Phase 2 — bounded idle breathe during the hold. NOT a yoyo loop:
+  // a single finite tween advances `phase` 0 → 2π·CYCLES; onUpdate reads it
+  // and nudges opacity + scale a hair around their peak.
+  // sin(0) = 0 → breathe starts exactly at the bloom's resting state.
+  const phase = { p: 0 };
+  tl.to(
+    phase,
+    {
+      p: Math.PI * 2 * BREATHE_CYCLES,
+      duration: BREATHE_DUR,
+      ease: "none",
+      onUpdate: () => {
+        const s = Math.sin(phase.p);
+        glow.style.opacity = String(GLOW_PEAK_OPACITY + s * OPACITY_AMP);
+        glow.style.transform = `scale(${1 + s * SCALE_AMP})`;
+      },
+    },
+    BLOOM_START + BLOOM_DUR, // breathe begins right as the bloom settles
+  );
+
+  // ── Form B: TRAVELING SWEEP ─────────────────────────────────────────
+  // A single finite pass. opacity fades in, x travels from off one edge to
+  // off the other, opacity fades out as it exits. One pass — no repeat.
+  const sweep = document.getElementById("sweep");
+  tl.fromTo(
+    sweep,
+    { x: SWEEP_START_X, opacity: 0 },
+    {
+      x: SWEEP_END_X,
+      opacity: SWEEP_PEAK_OPACITY,
+      duration: SWEEP_DUR,
+      ease: "none", // constant glide reads as a raking light, not an ease-in object
+    },
+    SWEEP_START,
+  );
+  // Fade the trailing edge out so it doesn't pop off at the surface edge.
+  tl.to(sweep, { opacity: 0, duration: SWEEP_FADE_DUR, ease: "power1.in" }, SWEEP_FADE_START);
+
+  window.__timelines["bloom-scene"] = tl;
+</script>
+```
+
+## Variations
+
+### Bloom-and-hold (no breathe)
+
+For very short scenes (< 3s) or when the hero already has its own idle, skip Phase 2 entirely — bloom to peak and hold flat. The single `fromTo` is the whole recipe; the glow is just lit presence.
+
+### Pulse-on-arrival (one swell, then settle to a lower hold)
+
+Bloom slightly **past** peak, then ease back down to a steady hold level — a single breath that punctuates the hero's landing without an ongoing loop. Two adjacent tweens (state continuity, same as `press-release-spring`):
+
+```js
+tl.fromTo(
+  glow,
+  { opacity: 0, scale: GLOW_START_SCALE },
+  { opacity: GLOW_OVERSHOOT_OPACITY, scale: 1.06, duration: BLOOM_DUR, ease: "power2.out" },
+  BLOOM_START,
+);
+tl.to(
+  glow,
+  { opacity: GLOW_HOLD_OPACITY, scale: 1, duration: SETTLE_DUR, ease: "power2.inOut" },
+  BLOOM_START + BLOOM_DUR,
+);
+```
+
+### Multi-hero relay (staggered blooms behind a row of cards)
+
+Bloom each card's glow on a stagger so presence sweeps across the row. Per-glow `BLOOM_START` offset by `STAGGER` (~0.15-0.3s); shrink `OPACITY_AMP` / `SCALE_AMP` per the concurrent-elements rule below so N breathing halos don't compound into a shimmer.
+
+### Diagonal raked sweep (wordmark sheen)
+
+Angle `{sweepGradient}` (e.g. a 105° linear gradient) and let the band travel left→right across a wordmark or logo lockup. Reads as light raking across a surface — the classic one-pass logo sheen. Same single-pass timeline; just a narrower `SWEEP_WIDTH` and a higher `SWEEP_PEAK_OPACITY` since it's a tight highlight on a small target.
+
+## How to Choose Values
+
+### Glow geometry
+
+- **GLOW_INSET** — negative inset so the radial halo extends past the hero edges.
+  - Range: `-200` to `-450` px on a 1920×1080 canvas; larger halo for a bigger hero
+  - Effects: too small and the glow is a tight rim, not ambient presence
+- **GLOW_START_SCALE** — scale at the start of bloom-in (the halo "inflates" to 1).
+  - Range: 0.80 (clear inflation) → 0.92 (subtle) → 1.0 (no swell, opacity-only bloom)
+  - Constraints: keep ≤ 1.0 — the swell should grow into place, not shrink
+
+### Bloom-in dynamics
+
+- **BLOOM_DUR** — bloom-in duration.
+  - Range: 0.6-1.4s; longer for a hero that's still settling so they land together
+  - Effects: shorter → the glow "snaps on"; longer → it suffuses in (the ambient feel)
+- **BLOOM_START** — when the bloom begins.
+  - Constraints: align so `BLOOM_START + BLOOM_DUR` ≈ the hero's settle frame, so glow and hero resolve as one beat — not glow-then-card or card-then-glow
+- **GLOW_PEAK_OPACITY** — peak halo opacity.
+  - Range: 0.15 (subtle) → 0.30 (default) → 0.45 (dramatic)
+  - **Constraints: ≤ 0.45** — higher washes the whole frame and the hero loses contrast against its own glow
+
+### Idle breathe (hero-bloom form)
+
+- **BREATHE_DUR** — breathe tween length.
+  - Constraints: equals `TOTAL_DURATION − (BLOOM_START + BLOOM_DUR)` to fill the hold with motion
+- **BREATHE_CYCLES** — number of full breaths across `BREATHE_DUR`.
+  - Range: `BREATHE_DUR / 4s ≤ CYCLES ≤ BREATHE_DUR / 2.5s` (a 2.5-4s breath period reads as a slow ambient pulse — glow breathing wants to be slower than element breathing)
+- **OPACITY_AMP** — sine amplitude on opacity around the peak.
+  - **Default: 0.02-0.05** (barely-perceptible pulse — the right answer for most scenes)
+  - Constraints: `GLOW_PEAK_OPACITY + OPACITY_AMP` must stay ≤ 0.45
+- **SCALE_AMP** — sine amplitude on the halo scale.
+  - **Default: 0.01-0.03** (the halo "breathes" without visibly resizing)
+  - Push higher only when the glow is the sole motion in a short isolated scene
+
+### Traveling sweep
+
+- **SWEEP_WIDTH** — width of the soft highlight band.
+  - Range: 15-35% of the surface width (a wide soft band) for a grid sheen; 8-15% for a tight wordmark sheen
+- **SWEEP_START_X / SWEEP_END_X** — travel endpoints, both fully off-surface.
+  - Constraints: start ≈ `-(SWEEP_WIDTH + edge)`, end ≈ `surfaceWidth + edge` — the band must enter from fully off one edge and exit fully off the other, so there's no visible spawn/despawn mid-surface
+- **SWEEP_DUR** — single-pass travel duration.
+  - Range: 0.8-1.6s; one deliberate pass, slow enough to read as light, fast enough not to dominate
+- **SWEEP_PEAK_OPACITY** — highlight opacity.
+  - Range: 0.10 (whisper sheen) → 0.25 (default) → 0.40 (bright rake)
+  - Constraints: ≤ ~0.45 (same wash limit); tighter sweeps tolerate the high end
+- **SWEEP_START / SWEEP_FADE_START / SWEEP_FADE_DUR** — when the pass runs and tails out.
+  - Constraints: `SWEEP_FADE_START + SWEEP_FADE_DUR ≈ SWEEP_START + SWEEP_DUR` so opacity reaches 0 exactly as the band clears the far edge
+
+### Tokens
+
+- **{glowGradient}** — radial-gradient, saturated near center fading to transparent. Color should be **darker + more saturated** than `{heroBg}` — a same-color glow looks washed out (same rule as `press-release-spring`'s burst).
+- **{sweepGradient}** — a soft band: `transparent → highlight → transparent`. For a sheen, a near-white or brand-tint highlight at low alpha; angle it (e.g. `linear-gradient(105deg, …)`) for a raked look.
+- **{heroBg} / {heroTextColor}** — the hero surface the glow backs; high contrast so the lit hero still reads against its halo.
+
+## Key Principles
+
+- **Un-triggered by design** — this glow does NOT wait on a click (`press-release-spring`) or a word timestamp (`asr-keyword-glow`). It blooms on the hero's settle as ambient presence. If you need a triggered burst, reach for one of those rules instead.
+- **Glow behind, hero in front** — glow `z-index: 1`, hero `z-index: 2`. A glow in front occludes the hero at peak opacity.
+- **Glow color darker + more saturated than the element** — bright hero → dark, saturated halo. A same-hue, same-lightness glow disappears into the surface.
+- **Land glow and hero as ONE beat** — time `BLOOM_START + BLOOM_DUR` to the hero's settle. A glow that arrives before or after the card reads as two separate events; arriving together reads as the card "powering on."
+- **Restrained peak — default to the LOW end.** `GLOW_PEAK_OPACITY` 0.15-0.30 for most scenes; 0.45 is a hard ceiling. A glow you consciously notice is too strong — it should register as the hero having weight, not as a visible light source.
+- **Breathe is BOUNDED, never a loop** — the idle pulse is a finite `onUpdate` tween reading `tl.time()` (via the `phase` proxy), not `repeat: -1` / `yoyo`. `sin(0) = 0` means it starts at the bloom's resting state with no jump. (Same reason as `sine-wave-loop`: an infinite/CSS loop desyncs from the HF seek clock.)
+- **Sweep is ONE pass** — the traveling highlight enters off one edge and exits off the other a single time. No return trip, no loop. A repeating sweep reads as a loading shimmer, not a one-time reveal accent.
+- **Concurrent halos compound** — N breathing glows in a row add up. Per-glow `OPACITY_AMP` and `SCALE_AMP` ≤ default `/ √N`, and stagger the breathe period (2.6s / 2.9s / 3.3s) so they don't pulse in lockstep. (Same `/√N` discipline as `sine-wave-loop`'s concurrent-elements rule.)
+- **Don't combine `boxShadow` glow on the hero with this halo layer** — they compete in the layout pipeline and the result reads muddy. Put the glow on the dedicated `.bloom-glow` layer, not as a shadow on the hero.
+
+## Critical Constraints
+
+- **Timeline must be paused**: `gsap.timeline({ paused: true })`
+- **Registry key = `data-composition-id`**
+- **No CSS `transition`** on the glow / sweep — interpolates independently of HF seek and flickers
+- **No `repeat` / `yoyo` / `repeat: -1`** — the breathe is a bounded finite tween; the sweep is one pass
+- **No `Math.random` / `Date.now`** — the breathe phase is deterministic (`phase.p` over a fixed duration)
+- **GSAP transform aliases only**: `x`, `y`, `scale`, `rotation` — plus `opacity` / `filter`. Never tween `width` / `height` / `left` / `top` (the halo swell is `scale`, the sweep travel is `x`).
+- **`will-change: transform, opacity`** on the glow — it animates both during bloom-in and the breathe
+- **Glow peak `opacity ≤ 0.45`** — higher washes the composition
+- **Sweep endpoints fully off-surface** — band must enter and exit beyond the clipped edges so it never spawns/despawns mid-frame
+
+## Combinations
+
+- [sine-wave-loop.md](sine-wave-loop.md) — pair the hero-bloom form with a sine breathe on the hero element itself; the glow breathes on opacity, the hero breathes on scale/y, slightly out of phase for a layered "alive" hold
+- [press-release-spring.md](press-release-spring.md) — distinct sibling: that rule's `bg-glow` is **click-triggered**, this one is un-triggered. Don't run both behind the same element
+- [counting-dynamic-scale.md](counting-dynamic-scale.md) — bloom the accent halo behind the hero stat card on the count-up's settle (the `dataviz-countup` blueprint's "soft accent glow blooms behind the hero metric" beat)
+- [stat-bars-and-fills.md](stat-bars-and-fills.md) — glow blooms behind the hero metric + its paired graphic as they land together
+- [center-outward-expansion.md](center-outward-expansion.md) — run the traveling-sweep across the assembled layout once it resolves (the `grid-card-assemble` blueprint's "traveling-glow sweep across the assembled grid")
+
+## Pairs with HF skills
+
+- `/hyperframes-animation` — `onUpdate` writing opacity/transform + bounded sine breathe
+- `/hyperframes-core` — composition wiring
+- `/hyperframes-cli` — `hyperframes lint`
diff --git a/.claude/skills-media/hyperframes-animation/rules/asr-keyword-glow.md b/.claude/skills-media/hyperframes-animation/rules/asr-keyword-glow.md
new file mode 100644
index 000000000..aca91047e
--- /dev/null
+++ b/.claude/skills-media/hyperframes-animation/rules/asr-keyword-glow.md
@@ -0,0 +1,286 @@
+---
+name: asr-keyword-glow
+description: Keywords glow + scale up when "spoken" — attack/sustain/release envelope synced to per-word timestamps. Even without real audio, hardcoded timings create a "narrator emphasis" effect.
+metadata:
+  tags: asr, audio-sync, highlight, glow, keyword, text, speech, emphasis
+---
+
+# ASR Keyword Glow
+
+Words in a phrase visually activate (glow blur + scale) when "spoken," following an attack-sustain-release (ASR-like) envelope. In a real ASR pipeline these timings come from word-level transcript data; for promotional video, hardcode the timings to control emphasis pacing. The envelope leaves a subtle "rest glow" after the word, creating a breadcrumb of recent emphasis.
+
+## How It Works
+
+Each word has `{ start, end }` timestamps. At each frame, compute the word's envelope value:
+
+- **Pre-start** → 0 (not yet)
+- **Start → peak** → attack (linear ramp 0 → 1)
+- **Peak → end** → sustain (stays at 1)
+- **End → end+release** → decay (1 → restLevel, typically 0.25)
+- **After release** → restLevel (stays subtly highlighted)
+
+The envelope drives `textShadow` blur radius AND `scale`. Higher blur + bigger scale = "speaking" emphasis.
+
+## HTML
+
+```html
+<div
+  class="scene"
+  id="asr-scene"
+  data-composition-id="asr-scene"
+  data-start="0"
+  data-duration="6"
+  data-track-index="0"
+>
+  <div class="phrase">
+    <!-- One <span class="word"> per word in {phrase}. data-word is a
+         stable key used to look up the word's ASR timing in JS. The
+         final word may be a {brandWord}, which gets longer emphasis
+         and the .brand modifier. -->
+    <span class="word" data-word="{w1Key}">{w1}</span>
+    <span class="word" data-word="{w2Key}">{w2}</span>
+    <!-- … -->
+    <span class="word brand" data-word="{brandKey}">{brandWord}</span>
+  </div>
+</div>
+```
+
+## CSS
+
+```css
+.scene {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  display: grid;
+  place-items: center;
+  background: {sceneBackgroundColor};
+  font-family: {font};
+}
+.phrase {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 24px;
+  justify-content: center;
+  max-width: 1700px;
+  font-size: 120px;
+  font-weight: 900;
+  letter-spacing: 2px;
+  color: {restColor};
+  text-align: center;
+  line-height: 1.2;
+}
+.word {
+  display: inline-block;
+  transform-origin: 50% 50%;
+  /* Initial subtle rest glow */
+  text-shadow: 0 0 0 {glowColorTransparent};
+  will-change: transform, text-shadow;
+}
+.word.brand {
+  color: {brandAccentColor};
+  letter-spacing: 12px;
+  text-transform: uppercase;
+}
+```
+
+## GSAP Timeline
+
+```html
+<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+<script>
+  window.__timelines = window.__timelines || {};
+  const tl = gsap.timeline({ paused: true });
+
+  // Per-word "spoken" times — author these to control narrator pacing.
+  // Shape: { [wordKey]: { start, end } } in local seconds. One entry
+  // per <span class="word" data-word="…">. The brand word's window is
+  // typically 1.5-2× as long as a normal word.
+  const TIMINGS = {
+    // {w1Key}: { start: …, end: … },
+    // {w2Key}: { start: …, end: … },
+    // …
+    // {brandKey}: { start: …, end: … },
+  };
+
+  function envelope(time, start, end) {
+    const releaseEnd = end + RELEASE;
+    if (time < start) return 0;
+    if (time < end) {
+      // attack — linear ramp over ATTACK_DUR then sustain
+      const attack = Math.min((time - start) / ATTACK_DUR, 1);
+      return attack;
+    }
+    if (time < releaseEnd) {
+      // decay to rest level
+      const decay = (time - end) / RELEASE;
+      return 1 - decay * (1 - REST_LEVEL);
+    }
+    return REST_LEVEL;
+  }
+
+  const words = document.querySelectorAll(".word");
+
+  // Single driver — 0 → composition duration
+  const driver = { t: 0 };
+  tl.to(
+    driver,
+    {
+      t: SCENE_DURATION,
+      duration: SCENE_DURATION,
+      ease: "none",
+      onUpdate: () => {
+        words.forEach((el) => {
+          const word = el.dataset.word;
+          const timing = TIMINGS[word];
+          if (!timing) return;
+          const env = envelope(driver.t, timing.start, timing.end);
+          const blur = MAX_BLUR * env;
+          const scale = 1 + MAX_SCALE_BOOST * env;
+          el.style.textShadow = `0 0 ${blur}px ${glowColorRgba(env)}`;
+          el.style.transform = `scale(${scale})`;
+        });
+      },
+    },
+    0,
+  );
+
+  window.__timelines["asr-scene"] = tl;
+</script>
+```
+
+`glowColorRgba(env)` returns the brand glow color with `env`-modulated alpha (e.g. `rgba({glowR}, {glowG}, {glowB}, ${GLOW_ALPHA_BASE + env * GLOW_ALPHA_RANGE})`).
+
+## Variations
+
+### Multi-octave glow (more dramatic peaks)
+
+Combine the envelope-driven blur with a sin pulse during the sustain phase — high-emphasis words breathe at peak. The sine frequency `PULSE_HZ` controls how many breaths fit in the sustain window; amplitude `PULSE_AMPLITUDE` controls how visible the breath is.
+
+```js
+const sustain = env * (1 + Math.sin(driver.t * PULSE_HZ) * PULSE_AMPLITUDE);
+const blur = MAX_BLUR * sustain;
+```
+
+### Color shift on the peak
+
+The active word lerps from `restColor` → `peakColor` as `env` rises, settling back to `restColor` at rest:
+
+```js
+function lerpChannel(a, b, t) {
+  return Math.round(a + (b - a) * t);
+}
+el.style.color = `rgb(${lerpChannel(REST_RGB.r, PEAK_RGB.r, env)}, ${lerpChannel(REST_RGB.g, PEAK_RGB.g, env)}, ${lerpChannel(REST_RGB.b, PEAK_RGB.b, env)})`;
+```
+
+### Karaoke style (dim-rest + bright-active, RECOMMENDED for video narration)
+
+Default amplitudes (small MAX_BLUR, small MAX_SCALE_BOOST, rest text full white) read as too subtle in video — the inactive words still dominate. Karaoke style fixes this: **inactive words rendered DIM**, active words **lerp toward bright white + larger scale**:
+
+```js
+// Tunable constants — see How to Choose Values
+// REST_RGB    — dim color for inactive words
+// ACTIVE_RGB  — bright color at peak (non-brand)
+// BRAND_RGB   — bright color at peak (brand word)
+// MAX_BLUR, MAX_SCALE_BOOST, REST_LEVEL all pushed higher than default
+
+function lerpChannel(a, b, t) {
+  return Math.round(a + (b - a) * t);
+}
+function colorAt(env, isBrand) {
+  const target = isBrand ? BRAND_RGB : ACTIVE_RGB;
+  return `rgb(${lerpChannel(REST_RGB.r, target.r, env)}, ${lerpChannel(REST_RGB.g, target.g, env)}, ${lerpChannel(REST_RGB.b, target.b, env)})`;
+}
+
+// In onUpdate:
+el.style.color = colorAt(env, el.classList.contains("brand"));
+```
+
+Visual result: at any moment 1-2 words are bright + glowing (the spoken word + the recently-spoken one's lingering rest), and the rest of the phrase is dim. This is closer to actual karaoke / lyric video aesthetic than the subtle "everyone half-glowing" baseline.
+
+When to use karaoke vs default: short narration phrases (5-10 words) where one word at a time should clearly POP → karaoke. Long dense text where many words emphasize subtly → default subtle. Karaoke pushes MAX_BLUR, MAX_SCALE_BOOST, and contrast between REST_RGB and ACTIVE_RGB; everything else is identical.
+
+### 3D pop-out
+
+Combine envelope with `translateZ` for words to "lean toward camera" as they speak:
+
+```js
+const popZ = env * MAX_POP_Z;
+el.style.transform = `translateZ(${popZ}px) scale(${scale})`;
+```
+
+Requires `perspective` on the parent.
+
+### From real ASR transcripts
+
+For real ASR-driven scenes, replace hardcoded TIMINGS with transcript JSON (each entry has `word`, `start_ms`, `end_ms`). Convert to seconds and feed in identically. The shape `{ [wordKey]: { start, end } }` is the same whether hand-authored or derived from `hyperframes transcribe`.
+
+## How to Choose Values
+
+- **TIMINGS** — per-word `{ start, end }` map. Author one entry per `.word` span.
+  - Shape: `{ wordKey: { start: number, end: number } }`, all seconds local to the scene.
+  - Constraints: monotonic non-overlap — every entry's `end < next entry's start` (overlapping windows make the envelope ambiguous).
+  - Brand word window: typically 1.5-2× the average non-brand word window so the brand sustains.
+- **ATTACK_DUR** — seconds for the envelope to ramp 0 → 1 once a word starts.
+  - Range: 0.1-0.25 s
+  - Effects: shorter feels punchy and ASR-like; longer feels smoothed-out.
+  - Constraints: must be < (smallest word's end - start), otherwise the word never reaches 1.
+- **RELEASE** — seconds for the envelope to decay 1 → REST_LEVEL after a word ends.
+  - Range: 0.2-0.5 s
+- **REST_LEVEL** — held envelope value after RELEASE.
+  - Range: 0.15-0.4 (default style); 0.05-0.2 (karaoke style — dimmer rest).
+  - Effects: lower = quieter breadcrumb; higher = more recently-spoken words stay bright.
+  - Constraints: must be < 1; should be > 0 to preserve the breadcrumb.
+- **MAX_BLUR** — peak `text-shadow` blur radius in px.
+  - Range: 15-25 px (default style); 30-45 px (karaoke style).
+  - Effects: bigger reads as "shouting"; smaller reads as "neutral narration".
+- **MAX_SCALE_BOOST** — additive scale at peak (e.g. 0.08 ⇒ 1.0 → 1.08).
+  - Range: 0.03-0.10 (default style); 0.15-0.25 (karaoke style).
+  - Effects: bigger reads as "bouncy"; smaller reads as "just glowing".
+- **SCENE_DURATION** — total seconds for the single driver tween.
+  - Constraints: must equal the scene's `data-duration` so the driver `t` reaches the end of TIMINGS in sync with HF's seek.
+- **REST_RGB / ACTIVE_RGB / BRAND_RGB** (karaoke style) — discrete color choices, not numeric.
+  - REST_RGB: dim tone of the brand palette's neutral; should read as off-white-ish dim, not black.
+  - ACTIVE_RGB: brand text color at full readability.
+  - BRAND_RGB: brand accent color (often the same hue as the glow).
+- **PULSE_HZ / PULSE_AMPLITUDE** (multi-octave variation) — sine breath frequency / depth.
+  - PULSE_HZ range: 4-10 rad/s; PULSE_AMPLITUDE range: 0.1-0.3.
+- **MAX_POP_Z** (3D pop-out variation) — max Z translation at peak (px).
+  - Range: 20-60 px; requires parent `perspective`.
+
+Ease family — discrete choice:
+
+- Single linear driver (`ease: "none"`) so `t` maps 1:1 to scene time. Any other ease distorts the per-word envelope shape — do not change.
+
+## Key Principles
+
+- **Envelope shape: attack-sustain-decay-rest** — never zero out after a word. The rest level (REST_LEVEL > 0) keeps the recently-spoken words subtly highlighted, creating a "breadcrumb" of attention.
+- **Brand word gets longer emphasis (1.5-2× normal)** — the brand is the headline; let it sustain.
+- **`display: inline-block`** on each word — required for `transform` to apply to `<span>`.
+- **MAX_BLUR and MAX_SCALE_BOOST stay in their default-style ranges unless you commit to karaoke** — picking values between default and karaoke yields awkward "half-loud" emphasis.
+- **Per-word `text-shadow`** (not `box-shadow`) — text-shadow is the glow around the GLYPH, which is what reads as "speaking emphasis." Box-shadow would glow around the inline-block bounding box (rectangle).
+- **Single driver, multi-word onUpdate** — one tween that loops over all words. Don't create one tween per word — at 60+ words the timeline becomes unwieldy.
+- **❗ Climax dwell ≥1s** — after the final word's emphasis, comp continues ≥1s. The last word IS the headline beat.
+
+## Critical Constraints
+
+- **Timeline must be paused**: `gsap.timeline({ paused: true })`
+- **Registry key = `data-composition-id`**
+- **No CSS animation** on word elements
+- **`display: inline-block`** on each `.word`
+- **`will-change: transform, text-shadow`** on `.word`
+- **Timings monotonic** (later start > earlier end) — overlapping words mess up the envelope
+
+## Combinations
+
+- [3d-text-depth-layers.md](3d-text-depth-layers.md) — the active word gets depth-layered emphasis at peak
+- [sine-wave-loop.md](sine-wave-loop.md) — non-active words breathe subtly between emphasis moments
+- [context-sensitive-cursor.md](context-sensitive-cursor.md) — typewriter that types each word matching the ASR cadence
+
+## Pairs with HF skills
+
+- `/hyperframes-animation` — single driver, multi-element envelope
+- `/media-use` — `hyperframes transcribe` outputs real ASR data
+- `/media-use` — pair with caption rendering
+- `/hyperframes-core` — composition wiring
+- `/hyperframes-cli` — `hyperframes lint`
diff --git a/.claude/skills-media/hyperframes-animation/rules/avatar-cloud-network.md b/.claude/skills-media/hyperframes-animation/rules/avatar-cloud-network.md
new file mode 100644
index 000000000..19cd540ad
--- /dev/null
+++ b/.claude/skills-media/hyperframes-animation/rules/avatar-cloud-network.md
@@ -0,0 +1,371 @@
+---
+name: avatar-cloud-network
+description: Avatars distributed on an elliptical ring connected by SVG dashed lines to a center hub — social proof "community" reveal with staggered entry.
+metadata:
+  tags: avatar, cloud, network, social-proof, ellipse, connection, stagger
+---
+
+# Avatar Cloud Network
+
+Avatars arranged on an elliptical ring around a central element (logo / counter / brand). SVG dashed connection lines from center to each avatar. Staggered spring entry on avatars, then connection lines draw outward — communicates "community" or "social proof." Distinct from [orbit-3d-entry](orbit-3d-entry.md) (which continuously orbits) — avatar-cloud is a static composed reveal.
+
+## How It Works
+
+Three rendering layers:
+
+1. **SVG connection lines** (z-index 1, behind everything) — line from center hub to each avatar's position
+2. **Avatars** (z-index 2) — `<div>` circles on elliptical positions
+3. **Center hub** (z-index 5) — brand counter or logo (sits ABOVE the lines that converge on it)
+
+Animation phases:
+
+- `HUB_FADE_START → HUB_FADE_START + HUB_FADE_DUR`: hub fades in
+- `AVATAR_ENTRY_START → AVATAR_ENTRY_START + (AVATAR_COUNT − 1) × AVATAR_STAGGER + AVATAR_ENTRY_DUR`: avatars cascade in
+- `LINES_START → LINES_START + (AVATAR_COUNT − 1) × LINE_STAGGER + LINES_DUR`: connection lines draw outward
+- climax dwell: optional idle breathing on avatars (see Variations / sine-wave-loop)
+
+## HTML
+
+```html
+<div
+  class="scene"
+  id="cloud-scene"
+  data-composition-id="cloud-scene"
+  data-start="0"
+  data-duration="4"
+  data-track-index="0"
+>
+  <!-- Connection lines layer -->
+  <svg class="lines" viewBox="0 0 1920 1080" xmlns="http://www.w3.org/2000/svg">
+    <!-- Lines injected by script — center to each avatar -->
+  </svg>
+
+  <!-- Avatars + center hub -->
+  <div class="hub-wrap">
+    <div class="hub" id="hub">
+      <div class="hub-num" id="hub-num">{counterValue}</div>
+      <div class="hub-label">{counterLabel}</div>
+    </div>
+    <!-- Avatars injected by script — AVATAR_COUNT around the ellipse -->
+  </div>
+
+  <div class="brand">{footerLine}</div>
+</div>
+```
+
+Placeholder tokens:
+
+- `{counterValue}` / `{counterLabel}` — the hub copy (numeric proof + category)
+- `{footerLine}` — optional attribution line under the cloud
+- `{avatar[i]}` — per-avatar image source (or emoji glyph if using the emoji variation below)
+
+## CSS
+
+```css
+.scene {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  background: {bgColor};
+  font-family: {font};
+  overflow: hidden;
+}
+.lines {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  z-index: 1;
+}
+.hub-wrap {
+  position: absolute;
+  inset: 0;
+  display: grid;
+  place-items: center;
+}
+.hub {
+  position: relative;
+  z-index: 5;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 12px;
+  padding: 48px 64px;
+  border-radius: 28px;
+  background: {hubBg};
+  border: 1px solid {hubBorder};
+}
+.hub-num {
+  font-size: HUB_NUM_FONT_SIZE;
+  font-weight: 900;
+  color: {textColor};
+  letter-spacing: -4px;
+  line-height: 1;
+  font-variant-numeric: tabular-nums;
+}
+.hub-label {
+  font-size: HUB_LABEL_FONT_SIZE;
+  font-weight: 800;
+  letter-spacing: 12px;
+  color: {accentColor};
+  text-transform: uppercase;
+}
+.avatar {
+  position: absolute;
+  z-index: 2;
+  width: AVATAR_SIZE;
+  height: AVATAR_SIZE;
+  border-radius: 50%;
+  border: 3px solid {avatarBorder};
+  box-shadow:
+    0 12px 32px rgba(0, 0, 0, 0.5),
+    0 0 24px {avatarGlow};
+  display: grid;
+  place-items: center;
+  font-size: AVATAR_GLYPH_SIZE;
+  background: {avatarBg};
+  will-change: transform, opacity;
+  /* Top-left positioned by script; transform centers via -50% trick */
+  transform: translate(-50%, -50%);
+}
+.brand {
+  position: absolute;
+  bottom: 80px;
+  left: 50%;
+  transform: translateX(-50%);
+  font-size: BRAND_FONT_SIZE;
+  font-weight: 900;
+  letter-spacing: 14px;
+  color: {accentColor};
+  text-transform: uppercase;
+}
+```
+
+## GSAP Timeline
+
+```html
+<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+<script>
+  window.__timelines = window.__timelines || {};
+  const tl = gsap.timeline({ paused: true });
+
+  // CENTER_X / CENTER_Y must match the hub's rendered center exactly.
+  // For a hub-wrap with place-items:center on a 1920×1080 canvas these are
+  // (compositionWidth/2, compositionHeight × CENTER_Y_FACTOR).
+  const SCREEN_CENTER = { x: CENTER_X, y: CENTER_Y };
+
+  const hubWrap = document.querySelector(".hub-wrap");
+  const linesSvg = document.querySelector(".lines");
+
+  // Build avatars + lines
+  const avatarPositions = [];
+  for (let i = 0; i < AVATAR_COUNT; i++) {
+    const angle = (i / AVATAR_COUNT) * Math.PI * 2 - Math.PI / 2; // start at top
+    const x = SCREEN_CENTER.x + Math.cos(angle) * RADIUS_X;
+    const y = SCREEN_CENTER.y + Math.sin(angle) * RADIUS_Y;
+    avatarPositions.push({ x, y, angle });
+
+    // Avatar
+    const av = document.createElement("div");
+    av.className = "avatar";
+    av.style.left = `${x}px`;
+    av.style.top = `${y}px`;
+    // assign avatar image / glyph from your authoring data (see {avatar[i]})
+    hubWrap.appendChild(av);
+
+    // Line from hub to avatar
+    const line = document.createElementNS("http://www.w3.org/2000/svg", "line");
+    line.setAttribute("x1", SCREEN_CENTER.x);
+    line.setAttribute("y1", SCREEN_CENTER.y);
+    line.setAttribute("x2", x);
+    line.setAttribute("y2", y);
+    line.setAttribute("stroke", "{lineColor}");
+    line.setAttribute("stroke-width", "2");
+    line.setAttribute("stroke-dasharray", "6 8");
+    const len = Math.hypot(x - SCREEN_CENTER.x, y - SCREEN_CENTER.y);
+    line.style.strokeDashoffset = String(len);
+    line.dataset.length = String(len);
+    line.dataset.index = String(i);
+    linesSvg.appendChild(line);
+  }
+
+  // Phase 1 — hub fade in
+  tl.from(
+    ".hub",
+    { opacity: 0, scale: 0.8, duration: HUB_FADE_DUR, ease: `back.out(${HUB_BOUNCE})` },
+    HUB_FADE_START,
+  );
+
+  // Phase 2 — avatars cascade-in (staggered spring)
+  const avatars = document.querySelectorAll(".avatar");
+  avatars.forEach((av, i) => {
+    tl.from(
+      av,
+      {
+        opacity: 0,
+        scale: 0,
+        duration: AVATAR_ENTRY_DUR,
+        ease: `back.out(${AVATAR_BOUNCE})`,
+      },
+      AVATAR_ENTRY_START + i * AVATAR_STAGGER,
+    );
+  });
+
+  // Phase 3 — connection lines draw outward (staggered) — starts after most avatars land
+  const lines = linesSvg.querySelectorAll("line");
+  lines.forEach((line, i) => {
+    tl.to(
+      line,
+      {
+        strokeDashoffset: 0,
+        duration: LINES_DUR,
+        ease: "power2.out",
+      },
+      LINES_START + i * LINE_STAGGER,
+    );
+  });
+
+  // Phase 4 — climax dwell (network fully formed), idle breathing on avatars
+  // (see sine-wave-loop.md for the multiplicative onUpdate form)
+  const breathDriver = { p: 0 };
+  tl.to(
+    breathDriver,
+    {
+      p: Math.PI * 2 * BREATH_CYCLES,
+      duration: BREATH_DUR,
+      ease: "none",
+      onUpdate: () => {
+        avatars.forEach((av, i) => {
+          const phase = breathDriver.p + (i / avatars.length) * Math.PI * 2;
+          const s = 1 + Math.sin(phase) * BREATH_AMP;
+          av.style.transform = `translate(-50%, -50%) scale(${s})`;
+        });
+      },
+    },
+    BREATH_START,
+  );
+
+  window.__timelines["cloud-scene"] = tl;
+</script>
+```
+
+## How to Choose Values
+
+### Geometry
+
+- **CENTER_X / CENTER_Y** — px coordinates of the hub center; lines and avatar positions derive from these.
+  - Constraints: **must equal the hub's actual rendered center** — when this rule is composed with another scene (e.g. a logo that has been recentered), `CENTER_X / CENTER_Y` must be baked from the same source as the hub's final position
+  - Reference: ../../examples/proof-logo-chain.html uses `(W/2, H × 0.47)` so the cloud sits slightly above the canvas midline
+- **RADIUS_X / RADIUS_Y** — ellipse radii in px (RADIUS_X ≥ RADIUS_Y reads as perspective).
+  - Range: `RADIUS_X` ~ 20-30% of viewport width; `RADIUS_Y` ~ 18-25% of viewport height
+  - Constraints: `RADIUS_X / RADIUS_Y` ratio between 1.5 and 3.0 reads as natural depth; ratio = 1 (circle) reads as a flat 2D layout
+  - Reference: ../../examples/proof-logo-chain.html uses `W * 0.25` (`480px`) and `H * 0.22` (`237.6px`)
+- **AVATAR_COUNT** — number of avatars distributed around the ring.
+  - Range: 8-12; fewer feels sparse, more clutters the ellipse
+  - Reference: ../../examples/proof-logo-chain.html uses `10`
+- **AVATAR_SIZE / AVATAR_GLYPH_SIZE** — px diameter of each avatar circle and (optional) inner glyph size.
+  - Range: `AVATAR_SIZE` ~ 80-120 px at 1920 wide; small enough that 10+ avatars fit the ring without overlap
+- **HUB_NUM_FONT_SIZE / HUB_LABEL_FONT_SIZE / BRAND_FONT_SIZE** — hub typography.
+  - Constraints: hub-num is the focal beat, sized 2-4× the label
+
+### Hub fade
+
+- **HUB_FADE_START** — when the hub fades in.
+  - Range: usually `0` (the hub establishes the focal point); offset if the scene precedes with another beat
+- **HUB_FADE_DUR** — hub fade-in duration.
+  - Range: 0.4-0.6s
+- **HUB_BOUNCE** — `back.out(HUB_BOUNCE)` coefficient on the hub's scale entry.
+  - Range: 1.4 (subtle) → 1.8 (firm)
+
+### Avatar cascade
+
+- **AVATAR_ENTRY_START** — when the first avatar pops in.
+  - Constraints: `≥ HUB_FADE_START + HUB_FADE_DUR × 0.6` so the hub is established before satellites arrive
+- **AVATAR_ENTRY_DUR** — per-avatar scale-up duration.
+  - Range: 0.4-0.7s
+- **AVATAR_STAGGER** — delay between consecutive avatar entries.
+  - Range: 0.06-0.10s; cascade reads as "joining"; simultaneous reads as "all already there"
+- **AVATAR_BOUNCE** — `back.out(AVATAR_BOUNCE)` coefficient on each avatar's pop.
+  - Range: 1.4 (gentle) → 1.8 (firm); slightly firmer than hub for differentiation
+
+### Connection lines
+
+- **LINES_START** — when the lines begin drawing outward.
+  - Constraints: `LINES_START + (AVATAR_COUNT − 1) × LINE_STAGGER` should overlap the last avatar's settle by ~0.1-0.2s so the drawing reads as a consequence of the avatars landing
+- **LINES_DUR** — per-line draw duration (strokeDashoffset → 0).
+  - Range: 0.4-0.7s
+- **LINE_STAGGER** — delay between consecutive lines starting.
+  - Range: 0.02-0.05s; tight stagger reads as a wave outward
+
+### Idle breathing
+
+- **BREATH_START** — when idle breathing activates.
+  - Constraints: `≥ LINES_START + (AVATAR_COUNT − 1) × LINE_STAGGER + LINES_DUR + ~0.2s` (let the lines settle)
+- **BREATH_DUR** — total duration of the breathing tween.
+  - Range: fills the remaining composition window
+- **BREATH_CYCLES** — number of full sine cycles across `BREATH_DUR`.
+  - Range: 1.0-2.0; under 1 reads as a single sigh, over 2 starts to look anxious
+- **BREATH_AMP** — sine amplitude on scale (multiplicative).
+  - Range: 0.02-0.06; smaller for headshots, larger for stylized glyphs
+
+### Color tokens
+
+- **{bgColor}** — stage background (typically a dark gradient so the cloud reads as a constellation)
+- **{textColor}** — hub-num color (primary copy)
+- **{accentColor}** — hub-label + footer (the brand voice)
+- **{hubBg} / {hubBorder}** — hub card surfaces; gradient + 1px border reads as elevated
+- **{avatarBg} / {avatarBorder} / {avatarGlow}** — avatar circle styling; soft border + glow keeps them legible on dark backgrounds
+- **{lineColor}** — SVG stroke color (translucent accent reads as networky)
+- **{font}** — base typography stack
+
+## Variations
+
+### Avatar size variation (organic feel)
+
+Vary avatar sizes by index — e.g. a small index-keyed array of sizes — so the ring doesn't read as rigidly repetitive.
+
+### Solid lines instead of dashed
+
+Drop `stroke-dasharray` and use a solid stroke. Drop the dash-draw animation; lines fade in via opacity instead. More corporate, less networky.
+
+### Multi-orbit (concentric rings)
+
+Two layers of avatars: smaller inner ring (fewer avatars, slightly larger size), larger outer ring (more, smaller). Lines connect ONLY inner ring to hub; outer ring is a "halo."
+
+### Country / role glyphs (geographic or persona spread)
+
+Replace face images with flags / emoji / iconography. Reads as "global community" or "diverse roles."
+
+## Key Principles
+
+- **Hub above lines (`z-index: 5` vs lines `z-index: 1`)** — lines should appear to terminate AT the hub edge, not pass through. Hub must be in front.
+- **Lines drawn outward (dash offset 0)** — drawing FROM center is the visual narrative: "the hub connects to its community."
+- **8-12 avatars** — fewer feels sparse, more clutters the ellipse.
+- **`RADIUS_X > RADIUS_Y`** — horizontal ellipse reads as perspective; equal radii (circle) reads as 2D flat layout.
+- **Avatar entry stagger 0.06-0.10s** — cascade reads as "joining"; simultaneous reads as "all already there."
+- **Stagger lines AFTER avatars are mostly settled** — line draw starts ~0.1-0.2s before last avatar settles for overlap.
+- **Idle breathing post-formation** — each avatar slightly out-of-phase. Holds the eye during climax dwell.
+- **❗ Climax dwell ≥1s** — after lines complete, hold for ≥1s so the formed network is readable.
+
+## Critical Constraints
+
+- **Timeline must be paused**: `gsap.timeline({ paused: true })`
+- **Registry key = `data-composition-id`**
+- **No CSS animation** on avatars or lines
+- **`will-change: transform, opacity`** on avatars
+- **SVG `pointer-events: none`** — decorative overlay
+- **`getTotalLength()` not needed for straight lines** — use `Math.hypot` for line length (cheaper, exact)
+- **Hub `z-index` > lines z-index** — explicit layering
+
+## Combinations
+
+- [counting-dynamic-scale.md](counting-dynamic-scale.md) — the hub IS a growing counter
+- [sine-wave-loop.md](sine-wave-loop.md) — avatar idle breathing pattern
+- [3d-text-depth-layers.md](3d-text-depth-layers.md) — hub label with depth layers
+
+## Pairs with HF skills
+
+- `/hyperframes-animation` — staggered spring entries + SVG dash draw
+- `/hyperframes-core` — composition wiring
+- `/hyperframes-cli` — `hyperframes lint`
diff --git a/.claude/skills-media/hyperframes-animation/rules/camera-cursor-tracking.md b/.claude/skills-media/hyperframes-animation/rules/camera-cursor-tracking.md
new file mode 100644
index 000000000..7d4939059
--- /dev/null
+++ b/.claude/skills-media/hyperframes-animation/rules/camera-cursor-tracking.md
@@ -0,0 +1,246 @@
+---
+name: camera-cursor-tracking
+description: Two-phase virtual camera that locks viewport to a moving focal point with configurable initial positioning.
+metadata:
+  tags: camera, tracking, viewport, two-phase, spring
+---
+
+# Two-Phase Camera Cursor Tracking
+
+Keeps a horizontally-growing element (e.g. a search bar with typing text, a long URL animating in) visible by switching between two camera modes.
+
+## How It Works
+
+Separate **World Space** (the full target element with all content) from **Screen Space** (the viewport). Two phases:
+
+- **Phase 1 (Static)** — The world container sits at a fixed initial offset. Camera doesn't move. This anchors the viewer's eye to the composition before tracking begins.
+- **Phase 2 (Tracking)** — Activates when the focal point (cursor, highlight, last typed glyph) exceeds a target screen position (e.g. a configurable fraction `CURSOR_TARGET_FRACTION` of viewport width from the left). The world container translates leftward (`x: -<delta>`) keeping the focal point pinned at that screen position.
+
+The offset math is **mathematically continuous** at the phase boundary — at the instant tracking starts, the world position equals what the static phase had. So the transition is seamless.
+
+The piecewise form used in code is:
+
+```
+finalWorldX = Math.min(INITIAL_OFFSET, trackingOffset)
+```
+
+`INITIAL_OFFSET` is the static-phase value; `trackingOffset` is whatever shift keeps the focal point at `CURSOR_TARGET_FRACTION × viewportWidth`. While the focal point hasn't grown past the target screen X, `trackingOffset` exceeds `INITIAL_OFFSET` (it's a less-negative number) and `Math.min` returns the static value. Once the focal point would cross the target, `trackingOffset` overtakes `INITIAL_OFFSET` and tracking takes over.
+
+## HTML
+
+```html
+<div
+  class="scene"
+  id="tracking-scene"
+  data-composition-id="tracking-scene"
+  data-start="0"
+  data-duration="5"
+  data-track-index="0"
+>
+  <div class="viewport">
+    <div class="world">
+      <div class="search-bar">
+        <span class="text" id="reveal-text">{phrase}</span><span class="cursor">|</span>
+      </div>
+    </div>
+  </div>
+</div>
+```
+
+## CSS (hero-frame layout)
+
+```css
+.scene {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+
+.viewport {
+  position: absolute;
+  inset: 0;
+  overflow: hidden; /* clip the world content */
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  padding-left: VIEWPORT_PAD_LEFT; /* "left margin" — variation: left-aligned init */
+}
+
+.world {
+  display: flex;
+  align-items: center;
+  white-space: nowrap; /* keep text on one line for camera-tracking */
+  transform: translateX(0); /* GSAP will animate this */
+}
+
+.search-bar {
+  font-family: {font};
+  font-size: BAR_FONT_SIZE;
+  font-weight: BAR_FONT_WEIGHT;
+  color: {textColor};
+  letter-spacing: BAR_LETTER_SPACING;
+}
+
+.search-bar .text {
+  /* Width grows as more characters reveal */
+  display: inline-block;
+  overflow: hidden;
+  vertical-align: bottom;
+}
+
+.search-bar .cursor {
+  display: inline-block;
+  width: CURSOR_WIDTH;
+  margin-left: CURSOR_GAP;
+  background: {accentColor};
+  height: CURSOR_HEIGHT_EM;
+  vertical-align: bottom;
+  /* No `animation: blink` CSS keyframe here — HF renders by seeking a paused
+     timeline, and CSS animation clocks are NOT synced to that seek. A CSS
+     blink will flicker non-deterministically. Drive cursor blink as a finite
+     yoyo tween on the GSAP timeline instead — see GSAP Timeline section. */
+}
+```
+
+## GSAP Timeline
+
+```html
+<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+<script>
+  window.__timelines = window.__timelines || {};
+  const tl = gsap.timeline({ paused: true });
+
+  // Pre-measure target text width to compute tracking distance.
+  // Build the timeline SYNCHRONOUSLY — see Critical Constraints for why
+  // a fonts.ready gate causes worker-race flicker.
+  const textEl = document.getElementById("reveal-text");
+  const fullText = textEl.textContent;
+  const targetCursorScreenX = CURSOR_TARGET_FRACTION * VIEWPORT_WIDTH;
+  const fullWidth = textEl.scrollWidth; // total text width after full reveal
+  const trackingDelta = Math.max(0, VIEWPORT_PAD_LEFT + fullWidth - targetCursorScreenX);
+
+  // Phase 1 — text reveals progressively; camera holds.
+  // Reveal via max-width tween (no layout-property tweens on width/left/top).
+  tl.fromTo(
+    ".search-bar .text",
+    { maxWidth: 0 },
+    {
+      maxWidth: fullWidth,
+      duration: REVEAL_DUR,
+      ease: "none", // linear typing rate
+    },
+    REVEAL_START,
+  );
+
+  // Phase 2 — camera tracks. Begin BEFORE full reveal so the boundary feels
+  // continuous (text is still revealing as camera starts moving). The
+  // Math.min(INITIAL_OFFSET, trackingOffset) formulation makes the handoff
+  // mathematically continuous; see How It Works.
+  tl.to(
+    ".world",
+    {
+      x: -trackingDelta,
+      duration: TRACK_DUR,
+      ease: "power2.inOut",
+    },
+    TRACK_START,
+  );
+
+  // Cursor blink — GSAP-driven (NEVER CSS @keyframes infinite, which doesn't
+  // sync with HF's seek-by-frame). Finite yoyo, repeats computed from scene
+  // length so blinks land deterministically across frames.
+  const blinkRepeats = Math.ceil(SCENE_DURATION / BLINK_HALF_PERIOD) - 1;
+  tl.to(
+    ".search-bar .cursor",
+    {
+      opacity: 0,
+      duration: BLINK_HALF_PERIOD,
+      ease: "steps(1)", // hard on/off, no fade
+      yoyo: true,
+      repeat: blinkRepeats,
+    },
+    0,
+  );
+
+  window.__timelines["tracking-scene"] = tl;
+</script>
+```
+
+### Variations
+
+- **Centered → Center-Tracked**: set `.viewport { justify-content: center; padding: 0; }`. Camera tracks once the focal point crosses the midline (`CURSOR_TARGET_FRACTION = 0.5`).
+- **Left-Aligned → Right-Tracked**: as written above. Best when content exceeds viewport width from the start.
+- **Continuous typing driver**: replace the `maxWidth` tween with an `onUpdate` typing clock (`charsTyped = Math.floor(progress)`) plus per-frame `measureNodeWidth` to drive the cursor screen X. Required when the typed text is consumed elsewhere in the scene (e.g. by a parent strip's camera offset).
+
+## How to Choose Values
+
+- **VIEWPORT_PAD_LEFT** — left-edge padding of the world inside the viewport (Phase 1 anchor X).
+  - Range: 0 → ~10% of viewport width
+  - Effects: 0 hugs the left edge; larger inset feels more like a centered hero frame
+  - Constraints: must match the CSS `padding-left` on `.viewport` or the camera math drifts
+- **VIEWPORT_WIDTH** — the composition's `data-width` in CSS pixels.
+  - Constraints: must equal the scene root's `data-width`; never tweened
+- **CURSOR_TARGET_FRACTION** — fraction of viewport width where the focal point locks during Phase 2.
+  - Range: 0.5 (center-tracked) → 0.75 (right-leaning, more text visible behind cursor)
+  - Effects: lower values leave less revealed text in frame; higher values delay tracking
+- **BAR_FONT_SIZE** — hero element font size.
+  - Range: ~8-12% of viewport height; below ~6% reads as a UI widget rather than a cinematic element
+- **BAR_FONT_WEIGHT** — weight of the search-bar text.
+  - Range: discrete; 400 for neutral demo text, 700 for hero / headline framing
+- **BAR_LETTER_SPACING** — `letter-spacing` for the bar text.
+  - Range: slight negative (tighter, more cinematic) → 0 (default)
+- **CURSOR_WIDTH** — visual cursor stroke width in CSS pixels.
+  - Range: ~4-10 px at 1080p; thinner reads as typed text, thicker reads as a block caret
+- **CURSOR_GAP** — `margin-left` between text and cursor.
+  - Range: a few px of breathing room; do not exceed the cursor width or it visually detaches
+- **CURSOR_HEIGHT_EM** — cursor height as an em multiple of the font.
+  - Range: 0.85-1.0; matches the visual height of the typed glyphs
+- **REVEAL_START** — when Phase 1 typing begins.
+  - Constraints: typically 0; if preceded by another phase, ≥ that phase's end + small buffer
+- **REVEAL_DUR** — duration of the Phase 1 reveal tween.
+  - Range: scale with character count (target an average per-character cadence in the 0.05-0.15s range)
+  - Constraints: must end before `SCENE_DURATION` and ideally overlap slightly with the tracking phase
+- **TRACK_START** — when Phase 2 camera motion begins.
+  - Range: usually before reveal completes so the handoff feels continuous; can equal `REVEAL_START` if the focal point is already past the target at t=0
+  - Constraints: `TRACK_START < REVEAL_START + REVEAL_DUR` for a smooth crossfade
+- **TRACK_DUR** — duration of the camera pan.
+  - Range: 0.8-2.0s; under 0.5s reads as a snap, over 2.5s drags
+- **SCENE_DURATION** — must match the scene root's `data-duration`.
+  - Constraints: feeds the blink repeat count; mismatch causes blinks to truncate or run past the end
+- **BLINK_HALF_PERIOD** — half-period of the cursor blink (one on-state OR one off-state).
+  - Range: 0.2-0.4s; 0.3s reads as a natural caret blink
+  - Constraints: derived value `Math.ceil(SCENE_DURATION / BLINK_HALF_PERIOD) - 1` must be ≥ 0
+- **Ease choices** — discrete:
+  - Camera pan: `power2.inOut` or `power3.inOut` for cinematic settle; avoid `back.out` (overshoot reads as UI bounce, not camera)
+  - Reveal: `"none"` for linear typing; any easing distorts the per-keystroke cadence
+  - Blink: `"steps(1)"` for hard on/off; any easing fades the cursor and breaks the caret feel
+
+## Key Principles
+
+- **Measure with `getBoundingClientRect()` / probe nodes**, not by character count × font-size. Proportional fonts have variable glyph widths.
+- **`white-space: nowrap`** on the world — text must stay on one line for camera math to work
+- **Pre-allocate the world width** by setting `maxWidth` at full target width — prevents layout shift mid-tween
+- **Eased camera** (`power2.inOut` / `power3.inOut`), not linear — natural pan feel
+- **Spring-like via easing**, not via stiffness/damping params — GSAP doesn't have a built-in spring, but `back.out(${BOUNCE_FACTOR})` or `power4.out` approximate the settling feel
+
+## Critical Constraints
+
+- **Build the timeline SYNCHRONOUSLY, no fonts.ready gate** — HF renders frames in parallel workers, each a fresh browser. If you wrap the timeline build in `document.fonts.ready.then(...)`, some workers will seek frames BEFORE the Promise resolves and find no timeline registered → those frames render at CSS initial state (e.g. `max-width: 0` ⇒ empty text), other workers render correctly → visible flicker between empty and filled. Register `window.__timelines[id] = tl` at script-parse time, even if fonts haven't loaded yet — the camera math can tolerate a few percent width error from fallback-font measurement, but worker-race flicker is unacceptable.
+- **If precise post-font measurement matters**, re-measure inside the tween's `onUpdate` (still deterministic per-frame seek), not via a Promise gate. Or set `font-display: block` on the @font-face to force the browser to wait for the font before painting any text.
+- **Timeline must be paused**: `gsap.timeline({ paused: true })`. Never `tl.play()`
+- **Registry key = `data-composition-id`**: `window.__timelines["tracking-scene"]` must match scene root
+- **Continuous math at phase boundary**: the world's `x` at the moment tracking starts must equal the static-phase offset. The `Math.min(INITIAL_OFFSET, trackingOffset)` formulation guarantees this; do NOT switch to a hard `if (typingProgress > threshold)` branch or the camera will visibly jump.
+- **Inline cursor, not absolutely positioned**: cursor should be a sibling of the text (inline-block) so it follows text flow naturally — absolute positioning misaligns with the camera math
+- **`overflow: hidden` on `.viewport`**: clip the world's left edge as it pans off-screen
+- **Cursor blink via GSAP, NOT CSS `@keyframes ... infinite`** — HF renders by seeking the paused timeline; CSS animation clocks are NOT synchronized with that seek, so any CSS-driven blink will flicker non-deterministically across frames. Always drive blink as a finite yoyo tween on the paused GSAP timeline (repeat count computed from scene length).
+
+## Combinations
+
+- [context-sensitive-cursor.md](context-sensitive-cursor.md) — change cursor color/style per text segment during typing
+- [discrete-text-sequence.md](discrete-text-sequence.md) — non-linear text reveals that pair with this camera
+
+## Pairs with HF skills
+
+- `/hyperframes-animation` — timeline + tween API
+- `/hyperframes-core` — composition wiring + `data-*` attributes
+- `/hyperframes-cli` — `hyperframes lint` to validate the registry key + duration
diff --git a/.claude/skills-media/hyperframes-animation/rules/card-morph-anchor.md b/.claude/skills-media/hyperframes-animation/rules/card-morph-anchor.md
new file mode 100644
index 000000000..16ce3f91f
--- /dev/null
+++ b/.claude/skills-media/hyperframes-animation/rules/card-morph-anchor.md
@@ -0,0 +1,267 @@
+---
+name: card-morph-anchor
+description: Container morphs dimensions and border-radius between shots, serving as a visual transition anchor.
+metadata:
+  tags: morph, anchor, transition, border-radius, container, shape
+---
+
+# Card Morph Anchor
+
+A container smoothly transforms its width, height, border-radius, and (optionally) background between two visual states. The morph itself **IS the shot transition** — no separate transition effect needed. The viewer's eye tracks the morphing container as the anchor between shots.
+
+## How It Works
+
+A single GSAP tween animates multiple container properties simultaneously (width / height / border-radius / background). At the same time:
+
+1. **Old content** fades out during the first ~40% of the morph
+2. **New content** fades in during the last ~40% of the morph
+3. **Optional final fade** — the morph container itself fades to 0, revealing the actual next-shot element rendered behind it
+
+The persistent container provides visual continuity even as content and shape change.
+
+## HTML
+
+```html
+<div
+  class="scene"
+  id="morph-scene"
+  data-composition-id="morph-scene"
+  data-start="0"
+  data-duration="4"
+  data-track-index="0"
+>
+  <!-- The persistent morph container -->
+  <div class="morph-card">
+    <div class="content-old">
+      <h2>{shotOneHeadline}</h2>
+      <p>{shotOneSubcopy}</p>
+    </div>
+    <div class="content-new">
+      <img src="{shotTwoIcon}" alt="logo" />
+    </div>
+  </div>
+
+  <!-- Optional: actual next-shot element behind the morph -->
+  <div class="next-shot-anchor">
+    <img src="{nextShotAnchor}" alt="anchor" />
+  </div>
+</div>
+```
+
+## CSS (hero-frame layout)
+
+Card starts as a wide rectangle (shot 1 state). All properties present from the start; only opacities differ:
+
+```css
+.scene {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  display: grid;
+  place-items: center;
+}
+
+.morph-card {
+  position: relative;
+  width: {SHOT_ONE_W}px;
+  height: {SHOT_ONE_H}px;
+  border-radius: {SHOT_ONE_RADIUS}px;
+  background: {surfaceShotOne};
+  overflow: hidden;
+  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
+  display: grid;
+  place-items: center;
+}
+
+.content-old,
+.content-new {
+  position: absolute;
+  inset: 0;
+  display: grid;
+  place-items: center;
+  padding: 32px;
+}
+
+.content-old {
+  opacity: 1;
+}
+.content-new {
+  opacity: 0;
+}
+
+.next-shot-anchor {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  opacity: 0; /* GSAP fades this in as morph card fades out */
+  /* Use DOM ORDER for stacking — render .next-shot-anchor BEFORE .morph-card
+     in markup so the morph card is naturally on top. Do NOT use z-index: -1
+     and then snap it positive mid-fade — that causes a visible pop. */
+}
+```
+
+## GSAP Timeline
+
+```html
+<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+<script>
+  window.__timelines = window.__timelines || {};
+  const tl = gsap.timeline({ paused: true });
+
+  // Named constants — assign in your example only. See "How to Choose Values".
+  const HOLD_BEAT; // s — pre-morph dwell on shot 1
+  const MORPH_START; // s — usually = HOLD_BEAT
+  const MORPH_DUR; // s — full container morph length
+  const SHOT_TWO_W; // px — final container width
+  const SHOT_TWO_H; // px — final container height
+  const SHOT_TWO_RADIUS; // px — ≤ min(SHOT_TWO_W, SHOT_TWO_H) / 2
+  const OLD_FADE_FRAC; // 0..0.5 — fraction of MORPH_DUR for old content fade
+  const NEW_FADE_FRAC; // 0..0.5 — fraction of MORPH_DUR for new content fade
+  const FINAL_FADE_FRAC; // 0..0.3 — optional tail fade for handoff
+  // {surfaceShotTwo} is a CSS background token (solid or gradient).
+
+  // Hold shot 1 — let the viewer register the wide banner before morphing.
+
+  // Phase 1 — Morph container properties simultaneously
+  tl.to(
+    ".morph-card",
+    {
+      width: SHOT_TWO_W,
+      height: SHOT_TWO_H,
+      borderRadius: SHOT_TWO_RADIUS,
+      background: "{surfaceShotTwo}",
+      duration: MORPH_DUR,
+      ease: "power2.inOut",
+    },
+    MORPH_START,
+  );
+
+  // Phase 2 — Old content fades during the FIRST OLD_FADE_FRAC of the morph
+  tl.to(
+    ".content-old",
+    {
+      opacity: 0,
+      duration: MORPH_DUR * OLD_FADE_FRAC,
+      ease: "power1.in",
+    },
+    MORPH_START,
+  );
+
+  // Phase 3 — New content fades in during the LAST NEW_FADE_FRAC of the morph
+  tl.to(
+    ".content-new",
+    {
+      opacity: 1,
+      duration: MORPH_DUR * NEW_FADE_FRAC,
+      ease: "power1.out",
+    },
+    MORPH_START + MORPH_DUR * (1 - NEW_FADE_FRAC),
+  );
+
+  // Optional Phase 4 — Final fade: morph container disappears at the very end,
+  // revealing the actual next-shot element behind it.
+  tl.to(
+    ".morph-card",
+    {
+      opacity: 0,
+      duration: MORPH_DUR * FINAL_FADE_FRAC,
+      ease: "power1.in",
+    },
+    MORPH_START + MORPH_DUR * (1 - FINAL_FADE_FRAC),
+  );
+
+  window.__timelines["morph-scene"] = tl;
+</script>
+```
+
+## Key Properties to Morph
+
+| Property           | Shape of change                                                | Visual effect                |
+| ------------------ | -------------------------------------------------------------- | ---------------------------- |
+| `width` / `height` | `SHOT_ONE_W × SHOT_ONE_H` → `SHOT_TWO_W × SHOT_TWO_H`          | wide card shrinks to an icon |
+| `borderRadius`     | `SHOT_ONE_RADIUS` → `SHOT_TWO_RADIUS` (≤ half of smaller side) | rectangle becomes a circle   |
+| `background`       | `{surfaceShotOne}` → `{surfaceShotTwo}` (solid or gradient)    | container identity shifts    |
+| `boxShadow`        | base shadow → accent glow token                                | emphasis changes             |
+
+GSAP tweens all of these simultaneously when included in one `tl.to(...)` call.
+
+## How to Choose Values
+
+- **HOLD_BEAT** — pre-morph dwell so the viewer registers shot 1 before it changes
+  - Range: 0.6-1.5 s
+  - Effects: low end feels rushed / glitchy; high end stalls pacing
+  - Constraints: must be ≥ shot 1's content entry settle time
+- **MORPH_START** — when the container morph begins
+  - Range: equal to `HOLD_BEAT` in the canonical pattern
+  - Constraints: must be > any shot-1 entry tween end
+- **MORPH_DUR** — full length of the simultaneous container morph
+  - Range: 0.6-1.2 s
+  - Effects: low end reads as a snap; high end loses momentum
+  - Constraints: short morphs (<0.5s) cannot fit both old-fade and new-fade
+- **SHOT_TWO_W / SHOT_TWO_H** — final container dimensions
+  - Range: 80-400 px when handing off to an icon-sized anchor
+  - Constraints: if handing off (`.next-shot-anchor`), MUST match the anchor's dimensions exactly to avoid a visible pop
+- **SHOT_TWO_RADIUS** — final corner radius (use to read as circle / pill / soft-rect)
+  - Range: 0 to `min(SHOT_TWO_W, SHOT_TWO_H) / 2`
+  - Effects: half-of-smaller-side = perfect circle; smaller = soft rect
+  - Constraints: > half is visually clamped — wastes the tween
+- **OLD_FADE_FRAC** — fraction of `MORPH_DUR` over which shot-1 content fades out, starting at `MORPH_START`
+  - Range: 0.3-0.5
+  - Effects: low end clips shot 1 too early; high end overlaps with shot 2 content
+  - Constraints: `OLD_FADE_FRAC + NEW_FADE_FRAC ≤ 1` (gap between is the "shape-only" moment)
+- **NEW_FADE_FRAC** — fraction of `MORPH_DUR` over which shot-2 content fades in, ending at `MORPH_START + MORPH_DUR`
+  - Range: 0.3-0.5
+  - Effects: symmetric to OLD_FADE_FRAC
+- **FINAL_FADE_FRAC** — optional tail fraction during which the morph container itself fades to 0 for handoff
+  - Range: 0 (no handoff) or 0.1-0.2
+  - Constraints: only use when `.next-shot-anchor` matches the morph's final visual exactly
+- **Ease family** — discrete choice
+  - Options: `power2.inOut` (canonical, balanced), `power3.inOut` (snappier), `expo.inOut` (most cinematic but can feel sluggish at low durations)
+  - Avoid `back.out` / `elastic.out` on the morph itself — overshoot fights the dimensional change
+
+CSS-side placeholders (`SHOT_ONE_W`, `SHOT_ONE_H`, `SHOT_ONE_RADIUS`, `{surfaceShotOne}`, `{surfaceShotTwo}`) take real values in the example. Pick `{surfaceShotOne}` and `{surfaceShotTwo}` so the gradient/solid stops counts match (GSAP can interpolate background gradients only when stop counts agree).
+
+## Key Principles
+
+- **All target properties in one tween** — they share a single ease and duration so they morph in lockstep
+- **Old content fades early, new content fades late** — the container shape change happens between, providing a natural "blink" moment
+- **Final fade is optional** — use it when the next shot has a real anchor element to hand off to (e.g. avatar that the icon morphed into "is")
+- **Same easing for shape and crossfade** — avoid mixing `power2.inOut` morph with `bounce.out` content, looks unsynchronized
+- **❗ If you use `.next-shot-anchor` for handoff, its visuals must be pixel-identical to `.morph-card`'s final state** — same `width` / `height`, same `border-radius`, same `background`, same `box-shadow`, same internal icon dimensions. Any visual delta between the two = visible pop during the crossfade. If you can't match exactly, **drop the handoff** and just hold the morph card at its final state (add a breath if needed for life).
+
+## Critical Constraints
+
+- **`overflow: hidden`** on the morph container — content must clip during shape change, otherwise content overflows the morphing border radius
+- **Hold a beat before morphing** — let the viewer register shot 1's content before morphing; instant morph reads as glitchy
+- **Timeline must be paused**: `gsap.timeline({ paused: true })`. Never `tl.play()`
+- **Registry key = `data-composition-id`**: `window.__timelines["morph-scene"]` must match scene root
+- **Use `background` tween, not `background-color`**: gradients need `background` (GSAP supports gradient interpolation when targets are gradients with same number of stops). For solid → solid, `backgroundColor` works.
+- **`borderRadius` should be ≤ half the smaller dimension** at end state — otherwise the radius is visually clamped and the morph looks abrupt at the boundary
+- **❗ Don't snap `z-index` mid-fade** — if you need `.next-shot-anchor` to appear from behind the morph card, use **DOM order** (render `.next-shot-anchor` BEFORE `.morph-card` so the morph card is naturally on top), then crossfade their opacities. A `tl.set({ zIndex: ... })` call during an active opacity tween causes a visible flicker as the stacking order flips before the opacity transition finishes.
+
+## Variation: Morphing to a target element's position
+
+When shot 2 isn't centered (e.g. the morph card "lands" on a specific icon in a dock, sidebar, or grid), compute the target `top` / `left` from the **target element's element-position**, not its visual center. Common mistake: subtracting `height/2` to get center, then applying that to the morph-card's `top` — but if `.morph-card` uses absolute positioning with `top` + `margin: 0` (no transform-centering), `top` represents the **element top edge**, not the center.
+
+Math template (example: morph card lands on icon at bottom dock):
+
+```
+target_element_top = viewport_height − dock_bottom_offset − dock_padding_y − icon_height
+                   = 1080 − 60 − 22 − 110 = 888 px
+```
+
+Then tween `.morph-card { top: 888 }` so its element-top aligns with the target icon's element-top. If you mistakenly tween to `888 + icon_height/2 = 943` you'll land below; tweening to a "center" value like `top: 933` (off-by-arithmetic) will be even worse.
+
+Always **measure the target element with `getBoundingClientRect()`** before the timeline starts, and use those numbers — don't hand-compute from CSS values, since paddings, borders, and parent transforms compound.
+
+## Combinations
+
+- [scale-swap-transition.md](scale-swap-transition.md) — simpler morph without dimension change (just scale + content swap)
+- [sine-wave-loop.md](sine-wave-loop.md) — gentle breathing on the final state (e.g. final small circular icon idles with a breath)
+
+## Pairs with HF skills
+
+- `/hyperframes-animation` — timeline + multi-property tween reference
+- `/hyperframes-core` — composition wiring, `data-*` attributes
+- `/hyperframes-cli` — `hyperframes lint` to verify scene structure
diff --git a/.claude/skills-media/hyperframes-animation/rules/center-outward-expansion.md b/.claude/skills-media/hyperframes-animation/rules/center-outward-expansion.md
new file mode 100644
index 000000000..1c0a291e8
--- /dev/null
+++ b/.claude/skills-media/hyperframes-animation/rules/center-outward-expansion.md
@@ -0,0 +1,227 @@
+---
+name: center-outward-expansion
+description: Elements start clustered at screen center and expand outward to their final positions, driven by a shared progress value.
+metadata:
+  tags: expansion, scatter, center, reveal, layout, sync, burst
+---
+
+# Center-Outward Expansion
+
+Elements begin at a shared center point and radiate outward to their final positions. The expansion can be the entry beat itself, or **driven by another animation's progress** (e.g. a counting number growing) for coordinated motion.
+
+## How It Works
+
+Each element has a `targetX/Y` (its final layout position) and a shared `centerX/Y`. A `progress` value (0→1) interpolates each element between center and target:
+
+```js
+const x = centerX + (targetX - centerX) * progress;
+const y = centerY + (targetY - centerY) * progress;
+```
+
+When `progress = 0` all elements overlap at the center; when `progress = 1` they're at their final spots.
+
+## HTML
+
+```html
+<div
+  class="scene"
+  data-composition-id="burst-scene"
+  data-start="0"
+  data-duration="3"
+  data-track-index="0"
+>
+  <div class="burst-wrap">
+    <div class="burst-item" data-target-x="-360" data-target-y="-180">{itemA}</div>
+    <div class="burst-item" data-target-x="360" data-target-y="-180">{itemB}</div>
+    <div class="burst-item" data-target-x="-360" data-target-y="180">{itemC}</div>
+    <div class="burst-item" data-target-x="360" data-target-y="180">{itemD}</div>
+    <div class="burst-item" data-target-x="0" data-target-y="-360">{itemE}</div>
+    <div class="burst-item" data-target-x="0" data-target-y="360">{itemF}</div>
+  </div>
+</div>
+```
+
+## CSS
+
+```css
+.scene {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  display: grid;
+  place-items: center;
+  background: {bgColor};
+}
+.burst-wrap {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  display: grid;
+  place-items: center;
+}
+.burst-item {
+  position: absolute;
+  /* Items start at the wrap center via the absolute + 50% trick.
+     We tween translate offsets via GSAP, not left/top. */
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+
+  width: {itemSize};
+  height: {itemSize};
+  display: grid;
+  place-items: center;
+  background: {itemBgColor};
+  border-radius: 28px;
+  font-family: {font};
+  font-weight: 900;
+  font-size: 96px;
+  color: {textColor};
+  will-change: transform;
+}
+```
+
+## GSAP Timeline
+
+```html
+<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+<script>
+  window.__timelines = window.__timelines || {};
+  const tl = gsap.timeline({ paused: true });
+
+  const items = document.querySelectorAll(".burst-item");
+
+  // Each element gets its own from→to that lerps center (translate(-50%, -50%))
+  // → target offset. xPercent/yPercent bakes the self-centering; x/y animates
+  // toward the target.
+  items.forEach((el, i) => {
+    const targetX = Number(el.dataset.targetX);
+    const targetY = Number(el.dataset.targetY);
+    tl.fromTo(
+      el,
+      { xPercent: -50, yPercent: -50, x: 0, y: 0, scale: 0.6, opacity: 0 },
+      {
+        x: targetX,
+        y: targetY,
+        scale: 1,
+        opacity: 1,
+        duration: EXPAND_DUR,
+        ease: EXPAND_EASE,
+      },
+      i * STAGGER + ENTRY_AT, // stagger; ENTRY_AT offsets the burst beat
+    );
+  });
+
+  window.__timelines["burst-scene"] = tl;
+</script>
+```
+
+## How to Choose Values
+
+- **ITEM_COUNT** — number of elements in the burst
+  - Range: 3–8
+  - Effects: 3 = sparse; 8 = busy. > 8 causes visual chaos where cards overlap mid-expansion
+  - Constraints: at low counts, prefer wider angular spread (target positions further apart)
+
+- **EXPAND_DUR** — duration of each item's center → target tween
+  - Range: 1.0–1.8 s
+  - Effects: shorter = snappy burst; longer = floats outward
+  - Constraints: if driven by a counter, must equal the counter's duration (chord)
+
+- **EXPAND_EASE** — shared ease across all items
+  - Discrete choice: `power2.out`, `power3.out`, `expo.out`
+  - Selection: `power3.out` is the default — fling out then settle. `power2.out` is gentler. `expo.out` makes them stop dramatically. Avoid `in` easings (they read as items being sucked back in mid-air).
+  - Constraint: if driven by another animation, must be identical to the driver's ease
+
+- **STAGGER** — gap between successive items' start times
+  - Range: 0.04–0.08 s
+  - Effects: < 0.04 = simultaneous chord; > 0.08 feels lazy / arpeggiated
+  - Constraints: ITEM_COUNT × STAGGER must be < EXPAND_DUR or the last items still moving when others have landed reads as ragged
+
+- **ENTRY_AT** — offset applied to the whole burst start
+  - Range: 0 – 0.5 s
+  - Effects: > 0 gives a beat of compositional quiet before the burst
+
+- **START_PROGRESS** — fraction of the center→target path where items begin (for partially-spread variant)
+  - Range: 0 (exact center) – 0.5
+  - Effects: 0 = full cluster, dramatic spread; 0.3 = avoids initial pile-up at center
+
+## Variations
+
+### Synced expansion (driven by a counter)
+
+If the burst should mirror a counting animation's progress:
+
+```js
+// Counter tween defines a state.value 0 → TARGET over COUNT_DUR
+const counterState = { value: 0 };
+const burstState = { p: 0 };
+
+// Shared tween — same duration, same ease — visually a "chord"
+tl.to(
+  counterState,
+  {
+    value: COUNT_TARGET,
+    duration: COUNT_DUR,
+    ease: COUNT_EASE,
+    onUpdate: () => (counterEl.textContent = Math.round(counterState.value).toLocaleString()),
+  },
+  0,
+);
+
+tl.to(
+  burstState,
+  {
+    p: 1,
+    duration: COUNT_DUR,
+    ease: COUNT_EASE,
+    onUpdate: () =>
+      items.forEach((el) => {
+        const tx = Number(el.dataset.targetX) * burstState.p;
+        const ty = Number(el.dataset.targetY) * burstState.p;
+        el.style.transform = `translate(-50%, -50%) translate(${tx}px, ${ty}px)`;
+      }),
+  },
+  0,
+);
+```
+
+### Starting partially-spread
+
+To avoid the initial clustered mess (6+ elements stacked at center), start at `START_PROGRESS`:
+
+```js
+{ x: targetX * START_PROGRESS, y: targetY * START_PROGRESS, scale: 0.4, opacity: 0 }
+```
+
+### Idle micro-float at final position
+
+Pair with `sine-wave-loop` after expansion lands — keeps elements alive instead of frozen.
+
+## Key Principles
+
+- **Driver vs driven** — if the burst stands on its own, use a per-item stagger; if it shadows another animation (counter, audio beat), share the same eased progress so they read as one beat
+- **Stagger inside the 0.04-0.08 s band** — too tight and the cluster never separates visually, too loose and the burst feels lazy
+- **Out-easing for the expansion** — out-easing makes items "fling" out then settle. In-easing looks like they're sucked back in mid-air
+- **Element count: 3-8** — fewer feels empty, more causes visual chaos at the center where cards overlap mid-expansion
+- **❗ Don't put a label below the burst as the "real headline"** — if you do, the eye snaps to the label and ignores the burst. The burst IS the beat. If a label is needed, use big block-caps and reveal it post-burst, in the same stacked layout.
+
+## Critical Constraints
+
+- **Timeline must be paused**: `gsap.timeline({ paused: true })`
+- **Registry key = `data-composition-id`**
+- **Use translate, not left/top** — translating composes cleanly with the centering `translate(-50%, -50%)` trick; mutating `left`/`top` fights the centering and causes pixel jitter
+- **`will-change: transform`** on burst items — many simultaneous transforms benefit from compositor hints
+- **No `position: absolute` parents inside `burst-wrap` other than items themselves** — sibling absolute elements would steal the centered baseline
+
+## Combinations
+
+- [counting-dynamic-scale.md](counting-dynamic-scale.md) — counter peak drives the burst peak (chord)
+- [sine-wave-loop.md](sine-wave-loop.md) — idle motion after the burst lands
+- [card-morph-anchor.md](card-morph-anchor.md) — burst out of a morphed card
+
+## Pairs with HF skills
+
+- `/hyperframes-animation` — timeline + stagger
+- `/hyperframes-core` — composition wiring
+- `/hyperframes-cli` — `hyperframes lint`
diff --git a/.claude/skills-media/hyperframes-animation/rules/context-sensitive-cursor.md b/.claude/skills-media/hyperframes-animation/rules/context-sensitive-cursor.md
new file mode 100644
index 000000000..5a2625b33
--- /dev/null
+++ b/.claude/skills-media/hyperframes-animation/rules/context-sensitive-cursor.md
@@ -0,0 +1,257 @@
+---
+name: context-sensitive-cursor
+description: Cursor color and styling that adapt to the current text segment being typed — accent color on highlights, dim on placeholders, etc.
+metadata:
+  tags: cursor, color, context, typewriter, styling, segment
+---
+
+# Context-Sensitive Cursor
+
+In a typewriter sequence, the cursor's color (and optionally height/blink rate) matches the **active text segment**. If the typewriter is currently typing a brand name, the cursor is the brand accent color; on a placeholder, it dims to gray. Enhances visual cohesion vs a single fixed cursor color across all text states.
+
+## How It Works
+
+The text is authored as a SEQUENCE of `{text, t, segment}` entries where `segment` is a string identifier ('main' / 'highlight' / 'brand' / 'success'). The driver tween's onUpdate determines the current segment based on `time`, then sets the cursor's CSS color (and optionally other props) to match that segment's palette.
+
+## HTML
+
+```html
+<div
+  class="scene"
+  id="cursor-scene"
+  data-composition-id="cursor-scene"
+  data-start="0"
+  data-duration="{DURATION}"
+  data-track-index="0"
+>
+  <div class="terminal">
+    <div class="prompt">$</div>
+    <div class="text-wrap">
+      <span class="text" id="text"></span><span class="cursor" id="cursor">_</span>
+    </div>
+  </div>
+</div>
+```
+
+## CSS
+
+Placeholders: `{monoFont}` is the project's monospace stack (proportional fonts cause cursor drift mid-segment); `{bgColor}` is the dark backdrop; `{textColor}` is the readable foreground; `{promptColor}` is the segment-default color for the leading prompt glyph.
+
+```css
+.scene {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  display: grid;
+  place-items: center;
+  background: {bgColor};
+  font-family: {monoFont};
+}
+.terminal {
+  display: flex;
+  align-items: baseline;
+  gap: 24px;
+  font-size: 72px;
+  font-weight: 800;
+  color: {textColor};
+  white-space: pre;
+}
+.prompt {
+  color: {promptColor};
+}
+.text-wrap {
+  display: inline-flex;
+  align-items: baseline;
+  min-width: 1200px;
+}
+.text {
+  color: {textColor};
+  white-space: pre;
+}
+/* Cursor highlights based on active segment via per-frame background swap */
+.cursor {
+  display: inline-block;
+  width: {cursorWidth}px;
+  height: {cursorHeight}px;
+  background: {textColor}; /* default — overridden per segment in onUpdate */
+  margin-left: {cursorGap}px;
+  vertical-align: {cursorBaselineFix}px;
+}
+```
+
+## GSAP Timeline
+
+```html
+<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+<script>
+  window.__timelines = window.__timelines || {};
+  const tl = gsap.timeline({ paused: true });
+
+  // Sequence with per-entry segment label.
+  // Each entry: { t: absoluteSeconds, text: cumulative visible string, segment: paletteKey, color: hex }.
+  // As the driver crosses each `t`, the cursor color swaps to that segment's accent —
+  // viewer's eye locks onto the keyword being typed.
+  // Shape: a monotonic timeline of N entries where adjacent entries usually share text-prefix
+  // but may differ in `segment` (which is what makes the cursor color shift mid-line).
+  const SEQUENCE = [
+    { t: 0, text: "", segment: "main", color: "{mainColor}" },
+    { t: T_LEADIN_END, text: "{leadInChunk}", segment: "main", color: "{mainColor}" },
+    { t: T_BRAND_IN, text: "{leadInBrandPrefix}", segment: "brand", color: "{brandColor}" }, // brand segment starts
+    { t: T_BRAND_OUT, text: "{leadInBrandFull}", segment: "main", color: "{mainColor}" }, // back to main
+    { t: T_CMD_IN, text: "{leadInCmdPrefix}", segment: "cmd", color: "{cmdColor}" }, // command segment
+    { t: T_BRAND_2, text: "{leadInCmdBrand}", segment: "brand", color: "{brandColor}" }, // brand again (e.g. filename)
+    { t: T_SUCCESS, text: "{leadInDone}", segment: "success", color: "{successColor}" }, // completion mark
+  ];
+
+  function entryAt(time) {
+    for (let i = SEQUENCE.length - 1; i >= 0; i--) {
+      if (time >= SEQUENCE[i].t) return SEQUENCE[i];
+    }
+    return SEQUENCE[0];
+  }
+
+  const textEl = document.getElementById("text");
+  const cursorEl = document.getElementById("cursor");
+
+  // Discrete state driver — writes text + cursor color
+  const driver = { t: 0 };
+  tl.to(
+    driver,
+    {
+      t: DURATION,
+      duration: DURATION,
+      ease: "none",
+      onUpdate: () => {
+        const entry = entryAt(driver.t);
+        textEl.textContent = entry.text;
+        cursorEl.style.background = entry.color;
+      },
+    },
+    0,
+  );
+
+  // Deterministic blink via sin (NOT CSS animation).
+  // Phase sweep = (2π) × BLINK_CYCLES_PER_SCENE drives a square wave at sign(sin(p)).
+  const blink = { p: 0 };
+  tl.to(
+    blink,
+    {
+      p: Math.PI * 2 * BLINK_CYCLES_PER_SCENE,
+      duration: DURATION,
+      ease: "none",
+      onUpdate: () => {
+        cursorEl.style.opacity = Math.sin(blink.p) > 0 ? "1" : "0";
+      },
+    },
+    0,
+  );
+
+  window.__timelines["cursor-scene"] = tl;
+</script>
+```
+
+## Variations
+
+### Non-blinking during active typing
+
+When letters are being added (driver moved forward in the last `TYPING_GRACE` seconds), suppress blink — cursor stays solid. When no typing activity (`driver.t - lastChangeTime > TYPING_GRACE`), resume blink.
+
+```js
+let lastChangeTime = 0,
+  lastText = "";
+// In onUpdate:
+if (entry.text !== lastText) {
+  lastChangeTime = driver.t;
+  lastText = entry.text;
+}
+const isTyping = driver.t - lastChangeTime < TYPING_GRACE;
+cursorEl.style.opacity = isTyping ? "1" : Math.sin(blink.p) > 0 ? "1" : "0";
+```
+
+### Cursor HEIGHT shifts on segment
+
+Larger cursor on brand segment for emphasis (`cursorHeightEmphasis > cursorHeight`):
+
+```js
+cursorEl.style.height =
+  entry.segment === "brand" ? `${cursorHeightEmphasis}px` : `${cursorHeight}px`;
+```
+
+### Cursor reverses contrast on dark text
+
+If a segment is rendered DARK text on light bg, cursor should swap to dark too. Manage via `entry.color` as the SOURCE OF TRUTH and read from there.
+
+## Key Principles
+
+- **Cursor color shifts make brand moments POP** — eye lands on the brand name because the cursor color shifts to brand accent. Without it, cursor is visual noise.
+- **`background` property on the cursor div** — NOT `color` (cursor is a colored block, not a glyph)
+- **Deterministic blink via sin** — never CSS `@keyframes blink`. HF seek will desync.
+- **Cursor `display: inline-block`** — `display: inline` ignores width/height.
+- **`vertical-align: -8px`** (or similar) — visually anchor cursor to text baseline, not full line-height.
+- **`white-space: pre`** on text and parent — preserve trailing spaces so cursor sits at end of segment, not after collapsed space.
+- **Color palette aligned with brand system** — 3-4 colors max for segments (main / brand / cmd / success). More and the segmentation reads as random.
+
+## How to Choose Values
+
+- **DURATION** — total scene length in seconds
+  - Range: 4-8 s for a single typed line; longer if the line is long
+  - Effects: too short truncates the typing; too long leaves a dead tail after the success state
+  - Constraints: must be `≥ SEQUENCE[last].t + (closing dwell)`
+  - Reference: see the corresponding blueprint's example HTML
+
+- **SEQUENCE entry `t` values** — absolute seconds where each new visible text + segment kicks in
+  - Range: monotonically increasing; spacing 0.2-0.5 s between micro-additions (per-word or per-token), longer between segment swaps
+  - Effects: too-tight spacing collapses the typing feel into a slideshow; too-loose drags
+  - Constraints: ordered ascending; entries do not need uniform spacing — slow down on highlights
+  - Reference: see the corresponding blueprint's example HTML
+
+- **Segment palette: mainColor / brandColor / cmdColor / successColor** — the cursor-fill swatches
+  - Range: 3-4 discrete colors max; each should be distinguishable at small cursor width
+  - Effects: too many segments and the swaps read as random; too few and the brand moment loses pop
+  - Constraints: `brandColor` and `successColor` may be similar in hue but should differ in saturation/luminance so a brand→success transition is visible
+  - Reference: see the corresponding blueprint's example HTML
+
+- **cursorWidth / cursorHeight / cursorGap / cursorBaselineFix** — cursor block geometry
+  - Range: cursorWidth 8-24 px; cursorHeight ≈ 0.85-1.0 × fontSize; cursorGap 4-12 px; cursorBaselineFix small negative number to drop below the baseline
+  - Effects: too-thin cursor disappears in render compression; too-tall cursor visually outranks the text
+  - Constraints: must use `display: inline-block` (a `width` on `display: inline` is ignored)
+  - Reference: see the corresponding blueprint's example HTML
+
+- **cursorHeightEmphasis** (Variations) — height when the active segment is the brand
+  - Range: 1.1-1.25 × `cursorHeight`
+  - Effects: subtle bump reads as emphasis; large bump reads as glitch
+  - Constraints: `cursorHeightEmphasis > cursorHeight`
+  - Reference: see the corresponding blueprint's example HTML
+
+- **BLINK_CYCLES_PER_SCENE** — how many full blink cycles span `DURATION`
+  - Range: choose so the period `DURATION / BLINK_CYCLES_PER_SCENE` ≈ 0.6-1.2 s; e.g. an 8-second scene with ~1 s period uses BLINK_CYCLES_PER_SCENE = 8
+  - Effects: short period (many cycles) reads as glitchy / agitated; long period reads as terminal-idle
+  - Constraints: must be a whole number when `DURATION` is fixed — the sin sweep ends mid-cycle otherwise and the cursor pops on the last frame
+  - Reference: see the corresponding blueprint's example HTML
+
+- **TYPING_GRACE** (Variations) — seconds after a text change during which blink is suppressed
+  - Range: 0.15-0.3 s
+  - Effects: low end still blinks while letters are still appearing; high end keeps cursor solid through long holds
+  - Constraints: must be smaller than the shortest dwell between two adjacent SEQUENCE entries — otherwise the cursor never blinks
+  - Reference: see the corresponding blueprint's example HTML
+
+## Critical Constraints
+
+- **Timeline must be paused**: `gsap.timeline({ paused: true })`
+- **Registry key = `data-composition-id`**
+- **No CSS animation** on cursor — must be timeline-driven (blink + color)
+- **Cursor `display: inline-block`** — required for width/height
+- **`white-space: pre`** on text container and text — preserve trailing space
+- **Monospace font** — proportional fonts cause cursor to drift mid-segment
+
+## Combinations
+
+- [discrete-text-sequence.md](discrete-text-sequence.md) — uses the same SEQUENCE array pattern; this rule adds the cursor styling layer
+- [camera-cursor-tracking.md](camera-cursor-tracking.md) — camera tracks the cursor across the typing
+- [press-release-spring.md](press-release-spring.md) — after typing completes, a button press confirms the command
+
+## Pairs with HF skills
+
+- `/hyperframes-animation` — onUpdate driving cursor color + sin blink
+- `/hyperframes-core` — composition wiring
+- `/hyperframes-cli` — `hyperframes lint`
diff --git a/.claude/skills-media/hyperframes-animation/rules/coordinate-target-zoom.md b/.claude/skills-media/hyperframes-animation/rules/coordinate-target-zoom.md
new file mode 100644
index 000000000..083add120
--- /dev/null
+++ b/.claude/skills-media/hyperframes-animation/rules/coordinate-target-zoom.md
@@ -0,0 +1,332 @@
+---
+name: coordinate-target-zoom
+description: Zoom into a specific non-centered element by combining scale with counter-translation — target ends at viewport center after the zoom completes.
+metadata:
+  tags: camera, zoom, scale, translate, target, off-center, focus
+---
+
+# Coordinate Target Zoom
+
+A simple `scale > 1` on a wrapper pushes off-center content OFF the visible canvas. To zoom _into_ a specific non-centered element, apply scale AND an inverse translation in lockstep so the target lands at viewport center.
+
+## How It Works
+
+Two nested wrappers, separated concerns:
+
+1. **Outer wrapper** applies `scale` (the zoom)
+2. **Inner wrapper** applies `translate(x, y)` (the counter-shift)
+
+The translate is the **negation** of the target's offset from center. The inner translate moves the target back to the outer's transform-origin BEFORE the outer scale fires, so the scale around center maps the target to 0.
+
+```
+T = -offset
+```
+
+Derivation (outer scales the inner-translated content):
+
+1. Inner translate moves target by T in pre-scale units → target at `offset + T`
+2. Outer scale S (around center 0,0) maps that to `S × (offset + T)`
+3. For target to land at viewport center: `S × (offset + T) = 0` → **`T = -offset`**
+
+Note: the formula does NOT depend on S. The translate amount is the same whether you zoom 1.5×, 2×, or 3× — as long as the OUTER is the scale and the INNER is the translate, and scale uses `transform-origin: 50% 50%`.
+
+## Getting the offset
+
+`T = -offset` is only as good as `offset`. The #1 way this pattern ships broken is hand-computing `offset` from a layout formula, getting the **sign** or magnitude wrong, and letting the zoom amplify a small error off-screen. **Default to measuring the target's real laid-out center; reserve the formula for symmetric rows.**
+
+### Default — measure the target's actual center (works for ANY layout)
+
+Read where the target actually is, once, at setup. This is immune to sign errors because it's derived from the rendered DOM, not a mental model:
+
+```js
+await document.fonts.ready; // metrics final; fallback fonts are 10–30px off → tens of px after a 3×+ zoom
+const W = 1920,
+  H = 1080;
+const r = document.getElementById("target-card").getBoundingClientRect();
+const TARGET_OFFSET_X = r.left + r.width / 2 - W / 2;
+const TARGET_OFFSET_Y = r.top + r.height / 2 - H / 2;
+// bake these; feed counterX/Y = -TARGET_OFFSET_X/Y to the inner tween
+```
+
+This `getBoundingClientRect` runs **once at setup**, before timeline registration — NOT per-frame (per-frame DOM reads desync under the renderer's parallel sampling; see SKILL universal constraints). Because the measurement is async (`fonts.ready`), build and register the timeline inside the same `async` setup so the baked offset is ready before `window.__timelines[id]` is published.
+
+### Shortcut — symmetric equal-width row ONLY
+
+If (and only if) the target is one of N **equal-width** cards in a centered row with uniform gaps, you may skip measurement:
+
+```js
+const index_offset = targetIndex - (N - 1) / 2;
+const TARGET_OFFSET_X = index_offset * (CARD_WIDTH + CARD_GAP);
+```
+
+⚠️ This assumes every sibling is the **same width**. The moment the row is asymmetric — a wide companion label beside a narrow chip, a wordmark flanked by unequal elements — it gives the wrong answer, often the wrong **sign**: the heavier side shifts the centered target the _opposite_ way you'd guess. (A real example: `companion(220) + gap + wordmark + gap + chip(110)` puts the wordmark ~55px **right** of center, but the "chip − companion" intuition says left.) For anything but equal cards, **measure**.
+
+### Headroom budget — cap the scale from the measured size
+
+A zoom multiplies any centering error, so leave margin. Keep the target ≤ ~88% of the canvas at peak; derive the cap from the measured size instead of picking a round number by feel:
+
+```js
+const maxScale = Math.min((0.88 * W) / r.width, (0.88 * H) / r.height);
+const ZOOM_SCALE = Math.min(DESIRED_SCALE, maxScale);
+```
+
+A target that fills 97%+ of the frame reads as cut-off the instant its center is even slightly off — and a hand-baked offset always is. (The perception gate flags this as `primary-offscreen`, and `data-layout-allow-overflow` does **not** exempt it.)
+
+## HTML
+
+```html
+<div
+  class="scene"
+  id="zoom-scene"
+  data-composition-id="zoom-scene"
+  data-start="0"
+  data-duration="5"
+  data-track-index="0"
+>
+  <div class="zoom-outer" id="zoom-outer">
+    <div class="zoom-inner" id="zoom-inner">
+      <div class="content">
+        <!-- Several layout elements; one is the "target" -->
+        <div class="card other">
+          <div class="label">{label1}</div>
+          <div class="price">{price1}</div>
+        </div>
+        <div class="card other">
+          <div class="label">{label2}</div>
+          <div class="price">{price2}</div>
+        </div>
+        <div class="card target" id="target-card">
+          <div class="label">{targetLabel}</div>
+          <div class="price">{targetPrice}</div>
+          <div class="tag">{targetTagline}</div>
+        </div>
+        <div class="card other">
+          <div class="label">{label4}</div>
+          <div class="price">{price4}</div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+```
+
+## CSS
+
+```css
+.scene {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;        /* REQUIRED — see Critical Constraints */
+  background: {bgGradient};
+}
+.zoom-outer {
+  width: 100%;
+  height: 100%;
+  display: grid;
+  place-items: center;
+  transform-origin: 50% 50%;
+  will-change: transform;
+}
+.zoom-inner {
+  display: grid;
+  place-items: center;
+  will-change: transform;
+}
+.content {
+  display: flex;
+  gap: CARD_GAP;
+}
+.card {
+  width: CARD_WIDTH;
+  padding: CARD_PADDING;
+  border-radius: CARD_RADIUS;
+  background: {cardBg};
+  border: 1px solid {cardBorder};
+  text-align: center;
+  font-family: {font};
+}
+.card.target {
+  background: {targetCardBg};       /* slightly brighter than .card */
+  border: 2px solid {targetBorder};
+  box-shadow: {targetGlow};
+}
+.label {
+  font-size: LABEL_FONT_SIZE;
+  font-weight: 800;
+  letter-spacing: 6px;
+  text-transform: uppercase;
+  color: {labelColor};
+}
+.price {
+  font-size: PRICE_FONT_SIZE;
+  font-weight: 900;
+  color: {textColor};
+  margin: 16px 0;
+  font-variant-numeric: tabular-nums;
+}
+.tag {
+  font-size: TAG_FONT_SIZE;
+  font-weight: 700;
+  letter-spacing: 4px;
+  color: {accentColor};
+  opacity: 0;
+}
+```
+
+## GSAP Timeline
+
+```html
+<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+<script>
+  window.__timelines = window.__timelines || {};
+  const tl = gsap.timeline({ paused: true });
+
+  // TARGET_OFFSET_X / TARGET_OFFSET_Y and ZOOM_SCALE come from the "Getting the
+  // offset" section above — MEASURED at setup (after fonts.ready) and baked. Do NOT
+  // hand-derive the offset for a non-symmetric layout (wrong sign → the zoom shoves
+  // the target off-frame). For a measured target, build the timeline inside that
+  // async setup so the offset is ready before window.__timelines[id] is published.
+
+  // Counter-translation = -offset (inner translate cancels target offset BEFORE outer scales)
+  const counterX = -TARGET_OFFSET_X;
+  const counterY = -TARGET_OFFSET_Y;
+
+  // Phase 1 — cards reveal
+  tl.from(
+    ".card",
+    { opacity: 0, y: REVEAL_Y, stagger: REVEAL_STAGGER, duration: REVEAL_DUR, ease: "power3.out" },
+    REVEAL_START,
+  );
+
+  // Phase 2 — pause to let viewer scan the layout
+
+  // Phase 3 — zoom into target
+  tl.to(
+    "#zoom-outer",
+    {
+      scale: ZOOM_SCALE,
+      duration: ZOOM_DUR,
+      ease: "power3.inOut",
+    },
+    ZOOM_START,
+  );
+  tl.to(
+    "#zoom-inner",
+    {
+      x: counterX,
+      y: counterY,
+      duration: ZOOM_DUR,
+      ease: "power3.inOut",
+    },
+    ZOOM_START,
+  );
+
+  // Phase 4 — target "tag" reveals inside the zoomed-in target
+  tl.to(
+    ".target .tag",
+    { opacity: 1, duration: TAG_REVEAL_DUR, ease: "power2.out" },
+    TAG_REVEAL_START,
+  );
+
+  // Phase 5 — climax dwell — viewer reads the target content
+  // (no additional motion; the zoomed-in state holds for DWELL_DUR seconds)
+
+  window.__timelines["zoom-scene"] = tl;
+</script>
+```
+
+## Variations
+
+### Dynamic target lookup via `getBoundingClientRect`
+
+This is now the **default**, not a variation — see [Getting the offset](#getting-the-offset). Always `await document.fonts.ready` before measuring (fallback-font metrics are off by 10–30px, which a 3×+ zoom magnifies into tens of visible px) and measure **once at setup**, never per-frame.
+
+### Zoom out (target → wide view)
+
+Reverse the phases — start at zoomed-in, then `scale: 1` + `x: 0, y: 0` to pull back. The "reveal" beat is the panorama.
+
+### Multi-target zoom sequence
+
+Chain multiple zooms: target A (1.5-2.5s) → pause → target B (3-4s) → pull back (4.5-5s). Each segment needs its own counter-translation pair.
+
+## How to Choose Values
+
+### Layout
+
+- **CARD_WIDTH / CARD_GAP / CARD_PADDING / CARD_RADIUS** — geometric layout.
+  - Constraints: `N × CARD_WIDTH + (N-1) × CARD_GAP < viewportWidth` so all cards fit pre-zoom
+  - Effects: smaller cards → more siblings on screen → busier composition; larger cards → fewer siblings, more emphasis per card
+- **LABEL_FONT_SIZE / PRICE_FONT_SIZE / TAG_FONT_SIZE** — typographic hierarchy.
+  - Range: tag < label < price (price is the focal element after zoom; sizing it largest reinforces this)
+
+### Reveal phase
+
+- **REVEAL_START** — when the cards begin fading in.
+  - Constraints: typically a small offset (~0.2s) for a beat of black before content appears
+- **REVEAL_DUR** — per-card fade-up duration.
+  - Range: 0.4-0.8s
+- **REVEAL_Y** — initial vertical offset of each card before fade-up (in px).
+  - Range: 16-48 px; bigger feels "thrown in," smaller feels gentle
+- **REVEAL_STAGGER** — delay between consecutive card reveals.
+  - Range: 0.06-0.15s; calibrated so all cards finish before `ZOOM_START`
+
+### Zoom phase
+
+- **ZOOM_START** — when the zoom begins.
+  - Constraints: `≥ REVEAL_START + REVEAL_DUR + (N-1) × REVEAL_STAGGER + viewer-scan-time` (give viewer 0.5-1.5s to read the layout before zooming)
+- **ZOOM_DUR** — duration of the zoom tween.
+  - Range: 1.0-2.0s; under 0.8s feels like a teleport, over 2.5s drags
+  - Constraints: scale tween + counter-translate tween MUST share this duration AND ease
+- **ZOOM_SCALE** — final magnification.
+  - Range: 1.5× (modest emphasis) → 3× (dominant focus) → 5×+ (cinematic extreme)
+  - Constraints: card content must remain crisp at this scale; raster source media needs `sourceResolution ≥ rendered × ZOOM_SCALE`
+  - **Headroom budget**: cap from the measured target size so the target stays ≤ ~88% of the canvas at peak — `ZOOM_SCALE = Math.min(DESIRED, 0.88×W/r.width, 0.88×H/r.height)`. Picking a round number by feel (e.g. 3.2× on a 585px wordmark → 1872px = 97% of 1920) leaves no margin, so any centering slop cuts the text off.
+
+### Target reveal + dwell
+
+- **TAG_REVEAL_START** — when the target's hidden tag fades in.
+  - Constraints: `≥ ZOOM_START + ZOOM_DUR` (only reveal after the zoom settles, so viewer's eye is already on the target)
+- **TAG_REVEAL_DUR** — tag fade-in duration.
+  - Range: 0.3-0.6s
+- **DWELL_DUR** — post-zoom hold so the viewer reads the target.
+  - Range: ≥ 1.0s after tag reveals (see "Climax dwell" in Key Principles)
+
+### Color tokens
+
+- **{bgGradient}** — typically a dark radial gradient to vignette the cards
+- **{cardBg} / {cardBorder}** — non-target cards (subtle, recessive)
+- **{targetCardBg} / {targetBorder} / {targetGlow}** — target card visually brighter / haloed so the eye lands there before the zoom even fires
+- **{labelColor} / {textColor} / {accentColor}** — hierarchical text colors; `{accentColor}` reserved for the tag (pops on reveal)
+
+## Key Principles
+
+- **Measure the offset, don't hand-derive it** — for any layout that isn't a symmetric equal-width row, read the target's real center with `getBoundingClientRect` at setup (after `fonts.ready`) and bake it (see [Getting the offset](#getting-the-offset)). Hand-computed offsets silently get the **sign** wrong on asymmetric layouts, and the zoom amplifies the error off-screen — the single most common way this pattern ships broken.
+- **Transform order — outer scales, inner translates** — DO NOT put scale and translate on the SAME element. The transform math becomes tangled (`translate * scale` ≠ `scale * translate` in CSS transform composition). Nested wrappers cleanly separate concerns.
+- **Counter-translate = -offset** — independent of scale. Derive from: outer scale around center maps `(offset + T)` to `S × (offset + T)`. Setting that to zero gives `T = -offset`. A common wrong intuition is `T = -offset × (S - 1)` — it happens to give the same answer at S=2 but is wrong for any other S.
+- **`transform-origin: 50% 50%` on outer wrapper** — non-center origin causes unpredictable inner offset; always center.
+- **`overflow: hidden` on `.scene` REQUIRED** — at zoom > 1, the outer-scaled content can leak beyond the 1920×1080 frame.
+- **Tween scale and counter-translate together** — they MUST share `duration` and `ease`. Otherwise the target drifts mid-zoom (visible "wandering"). Easiest: pass identical params to both tweens at the same time position.
+- **❗ Climax dwell ≥1s after zoom completes** — see SKILL universal constraints. If zoom ends at t=3.0 in a 3.5s comp, viewer barely sees the target; aim for 1.5-2s post-zoom dwell.
+
+## Critical Constraints
+
+- **Timeline must be paused**: `gsap.timeline({ paused: true })`
+- **Registry key = `data-composition-id`**
+- **No CSS `transition` on `.zoom-outer` or `.zoom-inner`** — competes with GSAP
+- **`will-change: transform`** on both wrappers — the transforms update every frame during the zoom phase
+- **`transform-origin: 50% 50%` on `.zoom-outer`** — center-based scaling is what the counter-translate math assumes
+- **Target offset baked once, at setup, from measurement** — measure the target center after `fonts.ready` and bake (see [Getting the offset](#getting-the-offset)); never recompute per-frame in onUpdate, and never hand-estimate the offset for a non-symmetric layout
+- **Scale within the headroom budget** — keep the target ≤ ~88% of the canvas at peak, derived from the measured size (`maxScale = 0.88 × W / measuredWidth`); a target that fills the frame is cut off the instant the center is slightly off
+
+## Combinations
+
+- [multi-phase-camera.md](multi-phase-camera.md) — multi-phase camera that includes a coordinate-target-zoom phase
+- [sine-wave-loop.md](sine-wave-loop.md) — idle breathing on the target AFTER zoom settles
+- [discrete-text-sequence.md](discrete-text-sequence.md) — text assembly in the target BEFORE zoom completes
+
+## Pairs with HF skills
+
+- `/hyperframes-animation` — two coordinated tweens
+- `/hyperframes-core` — composition wiring
+- `/hyperframes-cli` — `hyperframes lint`
diff --git a/.claude/skills-media/hyperframes-animation/rules/counting-dynamic-scale.md b/.claude/skills-media/hyperframes-animation/rules/counting-dynamic-scale.md
new file mode 100644
index 000000000..f3d936cf8
--- /dev/null
+++ b/.claude/skills-media/hyperframes-animation/rules/counting-dynamic-scale.md
@@ -0,0 +1,293 @@
+---
+name: counting-dynamic-scale
+description: Counter animation where the value counts up while transform scale grows to its final size, creating escalating visual weight without per-frame text reflow.
+metadata:
+  tags: counter, counting, scale, transform, number, dynamic, emphasis
+---
+
+# Counting with Dynamic Scale
+
+A number counts from A → B while its transform scale grows to the final size. The effect preserves escalating visual weight without tweening `font-size` or forcing text layout on every frame.
+
+## How It Works
+
+A single paused timeline drives **two synchronized tweens**:
+
+1. The numeric value (rendered as DOM text via `onUpdate`)
+2. The counter transform (`scale: START_SCALE` → `scale: 1`)
+
+As the number gets bigger, the text grows in place — visually communicating “this is impressive” while keeping the final font size static in CSS.
+
+## Easing
+
+Pick by drama desired (the choice is discrete; coefficient is implicit):
+
+| GSAP ease    | Effect                                        |
+| ------------ | --------------------------------------------- |
+| `power1.out` | Mild — slight deceleration                    |
+| `power2.out` | Default — ease-out, fast start slow end       |
+| `power3.out` | Strong — dramatic deceleration ⭐ recommended |
+| `expo.out`   | Very dramatic — almost stops at the end       |
+
+`power3.out` matches the polynomial `1 - (1-x)^k` family at k ≈ 2.5 — number rushes up then slows dramatically at the peak.
+
+## HTML
+
+```html
+<div
+  class="scene"
+  data-composition-id="counter-scene"
+  data-start="0"
+  data-duration="3"
+  data-track-index="0"
+>
+  <div class="counter-wrap">
+    <span class="counter" id="counter">0</span><span class="counter-suffix">{suffix}</span>
+  </div>
+  <div class="counter-label">{label}</div>
+</div>
+```
+
+## CSS
+
+```css
+.scene {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  display: grid;
+  place-items: center;
+  background: {bgColor};
+}
+
+.counter-wrap {
+  display: flex;
+  align-items: baseline;
+  justify-content: center;
+  gap: 8px;
+  /* Fixed-width container prevents layout shift as digit count changes */
+  width: {counterContainerWidth};
+  text-align: center;
+}
+
+.counter {
+  font-family: {font};
+  font-weight: 900;
+  color: {textColor};
+  /* MANDATORY — tabular-nums keeps digits the same width */
+  font-variant-numeric: tabular-nums;
+  /* Final size is static. GSAP animates transform scale, not font-size. */
+  display: inline-block;
+  font-size: {endSize};
+  transform-origin: center center;
+  letter-spacing: -2px;
+  line-height: 1;
+}
+
+.counter-suffix {
+  font-family: {font};
+  font-weight: 800;
+  color: {accentColor};
+  font-size: {suffixSize};
+  opacity: 0;
+  transform: translateY(20px);
+}
+
+.counter-label {
+  margin-top: 24px;
+  font-family: {font};
+  font-size: {labelSize};
+  color: {mutedTextColor};
+  text-align: center;
+}
+```
+
+## GSAP Timeline
+
+```html
+<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+<script>
+  window.__timelines = window.__timelines || {};
+  const tl = gsap.timeline({ paused: true });
+
+  const counter = document.getElementById("counter");
+  const state = { value: 0 };
+  const START_SCALE = START_SIZE / END_SIZE;
+
+  // Count value. onUpdate changes text only.
+  tl.to(
+    state,
+    {
+      value: TARGET_VALUE,
+      duration: COUNT_DUR,
+      ease: COUNT_EASE,
+      onUpdate: () => {
+        counter.textContent = Math.round(state.value).toLocaleString();
+      },
+    },
+    0,
+  );
+
+  // Visual growth uses a compositor transform and shares the count timing.
+  tl.fromTo(
+    counter,
+    { scale: START_SCALE },
+    { scale: 1, duration: COUNT_DUR, ease: COUNT_EASE },
+    0,
+  );
+
+  // Suffix slides in after count completes
+  tl.to(
+    ".counter-suffix",
+    {
+      opacity: 1,
+      y: 0,
+      duration: SUFFIX_DUR,
+      ease: `back.out(${SUFFIX_BOUNCE_FACTOR})`,
+    },
+    COUNT_DUR,
+  );
+
+  // Label fades in early
+  tl.from(
+    ".counter-label",
+    {
+      opacity: 0,
+      y: 12,
+      duration: LABEL_DUR,
+      ease: "power2.out",
+    },
+    LABEL_AT,
+  );
+
+  window.__timelines["counter-scene"] = tl;
+</script>
+```
+
+## How to Choose Values
+
+- **TARGET_VALUE** — the number the counter lands on
+  - Effects: 2–3 digits reads best at hero size; 4+ digits requires wider container
+  - Constraints: must fit horizontally at END_SIZE inside the container
+
+- **START_SIZE / END_SIZE** — design inputs used once to calculate `START_SCALE`
+  - Range: START_SIZE ≈ 40–60 % of END_SIZE
+  - Effects: smaller START_SIZE = more dramatic growth; larger = subtler
+  - Constraints: set CSS `font-size` to END_SIZE; never tween either value. END_SIZE × digit count must fit the container width without clipping
+
+- **COUNT_DUR** — count + scale tween duration
+  - Range: 1.2–2.5 s
+  - Effects: shorter = aggressive; longer = settled, gives reading time
+  - Constraints: must allow the eye to read the digits scrolling past; below ~0.8 s reads as a flash
+
+- **COUNT_EASE** — shared ease for the value and transform scale
+  - Discrete choice: `power2.out`, `power3.out`, `expo.out` (see table above)
+  - Constraint: avoid `back.out` / `elastic.out` — overshoot reads as unstable data
+
+- **SUFFIX_DUR** — duration of the suffix slide-in
+  - Range: 0.3–0.6 s
+  - Effects: shorter = snap; longer = floats
+  - Constraints: must fire after the count lands (started at COUNT_DUR), not during
+
+- **SUFFIX_BOUNCE_FACTOR** — back.out coefficient on the suffix entry
+  - Range: 1.4–2.0
+  - Effects: 1.4 = small overshoot; 2.0 = bouncy
+
+- **LABEL_AT / LABEL_DUR** — when and how long the label fades in
+  - Range: LABEL_AT < COUNT_DUR / 2 (label arrives before count peaks); LABEL_DUR 0.4–0.7 s
+
+## Variations
+
+### Direct `innerText` tween (no proxy object)
+
+The GSAP inspector reads `innerText` directly, so a number-only counter can skip the `state` proxy:
+
+```js
+tl.to(
+  counter,
+  { innerText: TARGET_VALUE, duration: COUNT_DUR, ease: COUNT_EASE, snap: { innerText: 1 } },
+  0,
+);
+```
+
+`snap: { innerText: 1 }` keeps it integer. Keep the proxy-object `onUpdate` form above when you need locale formatting (`toLocaleString`) or suffix logic. In either form, the synchronized scale remains a separate transform tween at timeline position `0`.
+
+### 3D depth entry
+
+Combine with `translateZ` for parallax-style depth on entry:
+
+```js
+tl.from(
+  ".counter",
+  {
+    z: -300,
+    duration: 0.6,
+    ease: "power2.out",
+    // requires parent or .counter itself to have perspective set
+  },
+  0,
+);
+```
+
+CSS prerequisite:
+
+```css
+.counter-wrap {
+  perspective: 1000px;
+}
+.counter {
+  transform-style: preserve-3d;
+}
+```
+
+### Multi-stat coordinated reveal
+
+For 3 stats counting in parallel, share the SAME ease and duration so they finish together — visually a chord, not arpeggio. Each stat usually also needs a **paired graphic** (bar / ring / stars) — don't stop at the number; see [stat-bars-and-fills.md](stat-bars-and-fills.md):
+
+```js
+["#stat1", "#stat2", "#stat3"].forEach((sel, i) => {
+  const obj = { v: 0 };
+  tl.to(
+    obj,
+    {
+      v: TARGETS[i],
+      duration: COUNT_DUR,
+      ease: COUNT_EASE,
+      onUpdate: () => (document.querySelector(sel).textContent = Math.round(obj.v)),
+    },
+    0,
+  ); // same start position — chord
+});
+```
+
+## Key Principles
+
+- **Synchronized value + scale at one timeline position** so the two tweens share an ease and stay coordinated
+- **`font-variant-numeric: tabular-nums` is mandatory** — without it digit-count transitions (e.g. 9 → 10 → 100) cause visible jitter as glyph widths change
+- **Fixed-width container** as belt-and-suspenders — even with tabular-nums, glyph shape changes can shift baselines
+- **Grow in place, don't bounce** — the number should feel weighty, not springy. `power3.out` ends at exact value; `back.out` overshoots and feels cartoonish
+- **Start small enough to grow noticeably** (~50 % of final size); end large enough to feel decisive but not clip viewport
+- **Never set `fontSize` in `onUpdate`** — final type size is static CSS; only the transform changes per frame
+- **Suffix animates AFTER the count, not during** — gives the number its own beat
+- **❗ Label is BIG TEXT, not a page-style tiny caption** — for VIDEO, a small paragraph-style caption below a hero-size number reads as visual noise. Use display-size, uppercase, tracked label so the layout is "two-line big-text"; the label is part of the headline, not a footer.
+
+## Critical Constraints
+
+- **`tabular-nums` mandatory** — required CSS for layout stability
+- **Timeline must be paused**: `gsap.timeline({ paused: true })`. Never `tl.play()`
+- **Registry key = `data-composition-id`**: `window.__timelines["counter-scene"]` must match scene root
+- **`onUpdate` mutates DOM**: HF runtime seeks the timeline frame-by-frame, so `onUpdate` runs on every seek call. Keep `onUpdate` work O(1) — set text only, with no style writes or DOM creation
+- **`Math.round` not `Math.floor`** — half-way through the final integer should display the final value briefly, not the previous one
+- **Avoid `back.out` / `elastic.out`** for the counter itself — overshoot makes the number look unstable (it's data, not decoration)
+
+## Combinations
+
+- [stat-bars-and-fills.md](stat-bars-and-fills.md) — **the paired graphic beside the number** (growth bars / progress ring / star wipe). A stat scene is usually BOTH rules: the count-up here + a fill there. Give the fill the same ease and duration so number and graphic land as one beat.
+- [svg-path-draw.md](svg-path-draw.md) — icons drawing in around the number
+- [center-outward-expansion.md](center-outward-expansion.md) — related icons exploding outward synced to count peak
+
+## Pairs with HF skills
+
+- `/hyperframes-animation` — timeline + `onUpdate` API
+- `/hyperframes-core` — composition wiring, `data-*` attributes
+- `/hyperframes-cli` — `hyperframes lint` to verify scene
diff --git a/.claude/skills-media/hyperframes-animation/rules/css-marker-patterns.md b/.claude/skills-media/hyperframes-animation/rules/css-marker-patterns.md
new file mode 100644
index 000000000..ad497de06
--- /dev/null
+++ b/.claude/skills-media/hyperframes-animation/rules/css-marker-patterns.md
@@ -0,0 +1,373 @@
+# CSS Patterns for Marker Highlighting
+
+Pure CSS + GSAP implementations of all five MarkerHighlight.js drawing modes. Use these for deterministic rendering in HyperFrames compositions — no external library dependency, full GSAP timeline control.
+
+## Contents
+
+- [1. Highlight Mode](#1-highlight-mode) — Yellow marker sweep behind text
+- [2. Circle Mode](#2-circle-mode) — Hand-drawn ellipse around text
+- [3. Burst Mode](#3-burst-mode) — Radiating lines from text
+- [4. Scribble Mode](#4-scribble-mode) — Chaotic scribble over text
+- [5. Sketchout Mode](#5-sketchout-mode) — Rough rectangle outline
+
+## 1. Highlight Mode
+
+Yellow marker sweep behind text. The most common mode.
+
+```html
+<span class="mh-highlight-wrap">
+  <span class="mh-highlight-bar" id="hl-1"></span>
+  <span class="mh-highlight-text">highlighted text</span>
+</span>
+```
+
+```css
+.mh-highlight-wrap {
+  position: relative;
+  display: inline;
+}
+.mh-highlight-bar {
+  position: absolute;
+  top: 0;
+  left: -6px;
+  right: -6px;
+  bottom: 0;
+  background: #fdd835;
+  opacity: 0.35;
+  transform: scaleX(0);
+  transform-origin: left center;
+  border-radius: 3px;
+  z-index: 0;
+}
+.mh-highlight-text {
+  position: relative;
+  z-index: 1;
+}
+```
+
+```js
+// Sweep in from left
+tl.to("#hl-1", { scaleX: 1, duration: 0.5, ease: "power2.out" }, 0.6);
+
+// Optional: skew for hand-drawn feel
+// gsap.set("#hl-1", { skewX: -2 });
+```
+
+### Multi-line Highlight
+
+Stagger bars across multiple lines:
+
+```js
+tl.to(
+  ".mh-highlight-bar",
+  {
+    scaleX: 1,
+    duration: 0.5,
+    ease: "power2.out",
+    stagger: 0.3,
+  },
+  0.6,
+);
+```
+
+## 2. Circle Mode
+
+Hand-drawn circle around text. Use `border-radius: 50%` with a slight rotation for organic feel.
+
+```html
+<span class="mh-circle-wrap">
+  <span class="mh-circle-text" id="circle-word">IMPORTANT</span>
+  <span class="mh-circle-ring" id="circle-1"></span>
+</span>
+```
+
+```css
+.mh-circle-wrap {
+  position: relative;
+  display: inline;
+}
+.mh-circle-text {
+  position: relative;
+  z-index: 1;
+}
+.mh-circle-ring {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 130%;
+  height: 160%;
+  transform: translate(-50%, -50%) rotate(-3deg) scale(0);
+  border: 3px solid #e53935;
+  border-radius: 50%;
+  pointer-events: none;
+  z-index: 0;
+}
+```
+
+```js
+// Circle scales in with a wobble
+tl.to(
+  "#circle-1",
+  {
+    scale: 1,
+    rotation: -3,
+    duration: 0.6,
+    ease: "back.out(1.7)",
+    transformOrigin: "center center",
+  },
+  0.7,
+);
+```
+
+### Variations
+
+```css
+/* Tighter circle (for short words) */
+.mh-circle-ring.tight {
+  width: 150%;
+  height: 180%;
+}
+
+/* Squared circle (rounded rectangle) */
+.mh-circle-ring.rounded {
+  border-radius: 30%;
+  width: 120%;
+  height: 140%;
+}
+
+/* Ellipse (wider than tall) */
+.mh-circle-ring.ellipse {
+  width: 150%;
+  height: 130%;
+  border-radius: 50%;
+}
+```
+
+## 3. Burst Mode
+
+Radiating lines from text center. Each line is a positioned div rotated to its angle.
+
+```html
+<span class="mh-burst-wrap">
+  <span class="mh-burst-text">WOW</span>
+  <span class="mh-burst-container" id="burst-1">
+    <span class="mh-burst-line" style="--angle: 0deg; --len: 70px;"></span>
+    <span class="mh-burst-line" style="--angle: 30deg; --len: 55px;"></span>
+    <span class="mh-burst-line" style="--angle: 60deg; --len: 80px;"></span>
+    <span class="mh-burst-line" style="--angle: 90deg; --len: 45px;"></span>
+    <span class="mh-burst-line" style="--angle: 120deg; --len: 65px;"></span>
+    <span class="mh-burst-line" style="--angle: 150deg; --len: 75px;"></span>
+    <span class="mh-burst-line" style="--angle: 180deg; --len: 50px;"></span>
+    <span class="mh-burst-line" style="--angle: 210deg; --len: 60px;"></span>
+    <span class="mh-burst-line" style="--angle: 240deg; --len: 80px;"></span>
+    <span class="mh-burst-line" style="--angle: 270deg; --len: 40px;"></span>
+    <span class="mh-burst-line" style="--angle: 300deg; --len: 70px;"></span>
+    <span class="mh-burst-line" style="--angle: 330deg; --len: 55px;"></span>
+  </span>
+</span>
+```
+
+```css
+.mh-burst-wrap {
+  position: relative;
+  display: inline;
+}
+.mh-burst-text {
+  position: relative;
+  z-index: 2;
+}
+.mh-burst-container {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 0;
+  height: 0;
+  z-index: 1;
+}
+.mh-burst-line {
+  position: absolute;
+  display: block;
+  width: 3px;
+  height: var(--len);
+  background: #1e88e5;
+  left: -1.5px;
+  top: calc(-1 * var(--len));
+  transform: rotate(var(--angle));
+  transform-origin: bottom center;
+  opacity: 0;
+}
+```
+
+```js
+// All lines burst outward simultaneously with slight stagger
+tl.fromTo(
+  "#burst-1 .mh-burst-line",
+  { scaleY: 0, opacity: 0 },
+  { scaleY: 1, opacity: 1, duration: 0.4, ease: "power2.out", stagger: 0.03 },
+  0.7,
+);
+```
+
+**Vary line lengths** (40-80px range) for an organic, hand-drawn feel. Equal lengths look mechanical.
+
+## 4. Scribble Mode
+
+Wavy SVG underlines and strikethroughs that draw themselves via `stroke-dashoffset`.
+
+```html
+<span class="mh-scribble-wrap">
+  <span class="mh-scribble-text">underlined text</span>
+  <svg class="mh-scribble-svg" viewBox="0 0 500 24" preserveAspectRatio="none">
+    <path
+      id="scribble-1"
+      d="M0,12 Q31,0 62,12 Q93,24 125,12 Q156,0 187,12 Q218,24 250,12 Q281,0 312,12 Q343,24 375,12 Q406,0 437,12 Q468,24 500,12"
+      fill="none"
+      stroke="#FDD835"
+      stroke-width="3"
+      stroke-linecap="round"
+    />
+  </svg>
+</div>
+```
+
+```css
+.mh-scribble-wrap {
+  position: relative;
+  display: inline;
+}
+.mh-scribble-text {
+  position: relative;
+  z-index: 1;
+}
+.mh-scribble-svg {
+  position: absolute;
+  left: 0;
+  bottom: -6px;
+  width: 100%;
+  height: 24px;
+  z-index: 0;
+}
+```
+
+```js
+// Measure path length and set initial dash state
+var path = document.querySelector("#scribble-1");
+var len = path.getTotalLength();
+gsap.set(path, { strokeDasharray: len, strokeDashoffset: len });
+
+// Draw the line
+tl.to(
+  "#scribble-1",
+  {
+    strokeDashoffset: 0,
+    duration: 0.8,
+    ease: "power1.inOut",
+  },
+  0.7,
+);
+```
+
+### Strikethrough Variant
+
+Position the SVG at `top: 50%; transform: translateY(-50%)` instead of `bottom: -6px`.
+
+### Wavy Path Generator
+
+Scale the path's viewBox width to match text width. The wave pattern `Q x1,y1 x2,y2` alternates between `y=0` and `y=24` for a natural wobble. Adjust the control points for tighter or looser waves:
+
+- **Tight waves**: smaller x-increments (25px per half-wave)
+- **Loose waves**: larger x-increments (50px per half-wave)
+- **Amplitude**: change the y range (0-24 for standard, 0-16 for subtle)
+
+## 5. Sketchout Mode
+
+Cross-hatch lines over de-emphasized text. Multiple angled lines create a "crossed out" effect.
+
+```html
+<span class="mh-sketchout-wrap">
+  <span class="mh-sketchout-text">old price</span>
+  <span class="mh-sketchout-lines" id="sketchout-1">
+    <span class="mh-sketchout-line mh-sketchout-fwd"></span>
+    <span class="mh-sketchout-line mh-sketchout-bwd"></span>
+  </span>
+</span>
+```
+
+```css
+.mh-sketchout-wrap {
+  position: relative;
+  display: inline;
+}
+.mh-sketchout-text {
+  position: relative;
+  z-index: 0;
+}
+.mh-sketchout-lines {
+  position: absolute;
+  top: 0;
+  left: -4px;
+  right: -4px;
+  bottom: 0;
+  overflow: hidden;
+  z-index: 1;
+}
+.mh-sketchout-line {
+  position: absolute;
+  display: block;
+  top: 50%;
+  left: 0;
+  width: 100%;
+  height: 2px;
+  background: #e53935;
+  transform-origin: left center;
+  transform: scaleX(0);
+}
+.mh-sketchout-fwd {
+  transform: scaleX(0) rotate(-12deg);
+}
+.mh-sketchout-bwd {
+  transform: scaleX(0) rotate(12deg);
+}
+```
+
+```js
+// Forward slash draws first
+tl.to(
+  "#sketchout-1 .mh-sketchout-fwd",
+  {
+    scaleX: 1,
+    duration: 0.3,
+    ease: "power2.out",
+  },
+  1.0,
+);
+
+// Backward slash follows
+tl.to(
+  "#sketchout-1 .mh-sketchout-bwd",
+  {
+    scaleX: 1,
+    duration: 0.3,
+    ease: "power2.out",
+  },
+  1.15,
+);
+```
+
+## Combining Modes in Captions
+
+Use mode cycling for visual variety across caption groups:
+
+```js
+var MODES = ["highlight", "circle", "burst", "scribble"];
+
+GROUPS.forEach(function (group, gi) {
+  var mode = MODES[gi % MODES.length];
+  // Apply the mode's CSS pattern to emphasis words in this group
+  group.emphasisWords.forEach(function (word) {
+    applyMode(word.el, mode, tl, word.start);
+  });
+});
+```
+
+Cycle every 2-3 groups for high energy, every 3-4 for medium, every 4-5 for low.
diff --git a/.claude/skills-media/hyperframes-animation/rules/cursor-click-ripple.md b/.claude/skills-media/hyperframes-animation/rules/cursor-click-ripple.md
new file mode 100644
index 000000000..007ea18e3
--- /dev/null
+++ b/.claude/skills-media/hyperframes-animation/rules/cursor-click-ripple.md
@@ -0,0 +1,262 @@
+---
+name: cursor-click-ripple
+description: Animated mouse cursor moves to target, clicks with scale depression and expanding ripple rings.
+metadata:
+  tags: cursor, click, ripple, interaction, mouse, button
+---
+
+# Cursor Click Ripple
+
+An animated cursor moves to a target element, performs a click with visual depression, and emits expanding ripple rings from the click point.
+
+## How It Works
+
+Three sequential phases driven by a single GSAP timeline:
+
+1. **Move**: eased cursor translation from entry point to the target element's center
+2. **Click**: scale depression on both cursor and target (yoyo: shrink then return)
+3. **Ripple**: expanding circles radiate outward from the click point with fade-out. 1–3 staggered rings amplify the click feedback
+
+Use a GSAP timeline because the phase ordering (move → settle → click → ripples) is exactly what timelines express cleanly.
+
+## HTML
+
+```html
+<div
+  class="scene"
+  id="cursor-click-scene"
+  data-composition-id="cursor-click-scene"
+  data-start="0"
+  data-duration="2"
+  data-track-index="0"
+>
+  <button class="target-button">{ctaLabel}</button>
+
+  <div class="cursor">
+    <svg width="24" height="24" viewBox="0 0 24 24">
+      <path
+        d="M5 3L19 12L12 13L9 20L5 3Z"
+        fill="{cursorFill}"
+        stroke="{cursorStroke}"
+        stroke-width="1.5"
+      />
+    </svg>
+  </div>
+
+  <!-- Ripple rings — centered on click target, hidden until trigger -->
+  <div class="ripple ripple-1"></div>
+  <div class="ripple ripple-2"></div>
+  <div class="ripple ripple-3"></div>
+</div>
+```
+
+## CSS
+
+Position cursor at the entry point. Button sits at its final position. Ripples are at the click-target center with `scale: 0` and `opacity: 0` so they hold invisible until the timeline trigger:
+
+```css
+.scene {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+
+.target-button {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  /* ...button styling (background, color, font from project tokens) */
+}
+
+.cursor {
+  position: absolute;
+  left: 10%;
+  top: 80%; /* entry corner */
+  pointer-events: none;
+  z-index: 999;
+}
+
+.ripple {
+  position: absolute;
+  left: 50%;
+  top: 50%; /* click target center */
+  width: 100px;
+  height: 100px;
+  border-radius: 50%;
+  border: 2px solid {rippleColor};
+  transform: translate(-50%, -50%) scale(0);
+  opacity: 0;
+  pointer-events: none;
+}
+```
+
+## GSAP Timeline
+
+Build a paused timeline. Register it on `window.__timelines` with the same key as `data-composition-id` on the scene root. All tuning values are named constants — see How to Choose Values below.
+
+```html
+<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+<script>
+  window.__timelines = window.__timelines || {};
+  const tl = gsap.timeline({ paused: true });
+
+  // MOVE_DUR, MOVE_EASE, CLICK_AT, PRESS_DUR, CURSOR_PRESS_SCALE, TARGET_PRESS_SCALE,
+  // RIPPLE_AT, RIPPLE_DUR, RIPPLE_SCALE, RIPPLE_STAGGER, RIPPLE_EASE
+  // — all named; values per How to Choose Values.
+
+  // Phase 1 — Move cursor to target center (eased, not linear)
+  tl.to(
+    ".cursor",
+    {
+      x: TARGET_X,
+      y: TARGET_Y,
+      duration: MOVE_DUR,
+      ease: MOVE_EASE,
+    },
+    0,
+  );
+
+  // Phase 2 — Click: cursor + target depress together, then return
+  tl.to(
+    ".cursor",
+    {
+      scale: CURSOR_PRESS_SCALE,
+      duration: PRESS_DUR,
+      ease: "power2.in",
+      yoyo: true,
+      repeat: 1,
+    },
+    CLICK_AT,
+  );
+  tl.to(
+    ".target-button",
+    {
+      scale: TARGET_PRESS_SCALE,
+      duration: PRESS_DUR,
+      ease: "power2.in",
+      yoyo: true,
+      repeat: 1,
+    },
+    CLICK_AT,
+  );
+
+  // Phase 3 — Ripple burst, N rings staggered from the click point
+  tl.set([".ripple-1", ".ripple-2", ".ripple-3"], { opacity: 1 }, RIPPLE_AT);
+  tl.to(
+    [".ripple-1", ".ripple-2", ".ripple-3"],
+    {
+      scale: RIPPLE_SCALE,
+      opacity: 0,
+      duration: RIPPLE_DUR,
+      ease: RIPPLE_EASE,
+      stagger: RIPPLE_STAGGER,
+      immediateRender: false,
+    },
+    RIPPLE_AT,
+  );
+
+  window.__timelines["cursor-click-scene"] = tl;
+</script>
+```
+
+## How to Choose Values
+
+- **MOVE_DUR** — cursor travel time from entry to target, in seconds
+  - Range: 0.4–1.0 s
+  - Effects: short feels darting; long feels deliberate / "considered click"
+  - Constraints: must end before `CLICK_AT` — otherwise the click fires while the cursor is still moving and reads as a misclick
+  - Reference: ../../examples/cta-orbit-collapse.html uses 0.5 s
+
+- **MOVE_EASE** — easing family for the move tween
+  - Discrete choice. Options:
+    - `power2.inOut` — symmetric, calm; good for "the user thoughtfully moves the cursor"
+    - `back.out(<n>)` — overshoot landing; good when the click target is a button you want the cursor to "settle onto" with a tiny visible recoil. Pair with a low overshoot coefficient (~1.2–1.4) — higher reads as cartoonish
+    - `power3.out` — fast start, soft landing; good for a "decisive" move
+  - Reference: ../../examples/cta-orbit-collapse.html uses `back.out(1.3)`
+
+- **CLICK_AT** — time the click fires, in seconds
+  - Range: must be ≥ `MOVE_DUR` (cursor has settled); typically `MOVE_DUR + 0.0–0.3 s` of "decision pause"
+  - Effects: zero pause reads as autopilot; >0.3 s of pause reads as hesitation
+  - Reference: ../../examples/cta-orbit-collapse.html clicks 0.2 s after the cursor settles
+
+- **PRESS_DUR** — half-duration of the depression (the yoyo runs twice this)
+  - Range: 0.06–0.12 s
+  - Effects: short feels crisp; long feels mushy
+  - Constraints: total press = `2 * PRESS_DUR`; must finish before the next scene phase needs the cursor / target back at normal scale
+  - Reference: ../../examples/cta-orbit-collapse.html uses 0.08 s
+
+- **CURSOR_PRESS_SCALE / TARGET_PRESS_SCALE** — how far each compresses during the click
+  - Range: cursor 0.80–0.90; target 0.92–0.97
+  - Effects: smaller numbers = stronger "this click counts" feel; values close to 1 read as a gentle tap
+  - Constraints: cursor compresses MORE than the target — the cursor is the actor, the target is the recipient
+  - Reference: ../../examples/cta-orbit-collapse.html uses cursor 0.85 / target 0.95
+
+- **RIPPLE_AT** — when the rings start expanding, in seconds
+  - Range: `CLICK_AT + 0.0–0.08 s`
+  - Effects: simultaneous with the press feels causal; slight delay feels acoustic ("the click happens, then the wave radiates")
+  - Reference: ../../examples/cta-orbit-collapse.html starts the ripple at `CLICK_AT` exactly
+
+- **RIPPLE_DUR** — how long each ring takes to fully expand and fade
+  - Range: 0.5–1.0 s
+  - Effects: short rings feel sharp; long rings feel like a soft sonar
+  - Constraints: must complete before any phase that depends on the ring being gone (e.g. a screen wipe)
+  - Reference: ../../examples/cta-orbit-collapse.html uses 0.7 s
+
+- **RIPPLE_SCALE** — final scale of each ring before it fades
+  - Range: 3–6
+  - Effects: 3 keeps the ring near the click site; 6 lets it sweep the surrounding area
+  - Constraints: if the ring would exit the visible frame before opacity reaches 0, lower the scale or shorten the duration
+  - Reference: ../../examples/cta-orbit-collapse.html uses 5
+
+- **RIPPLE_STAGGER** — delay between consecutive rings
+  - Range: 0.06–0.12 s (or 0 for a single ring; see Variations)
+  - Effects: below ~0.06 s reads as one thick ring; above ~0.12 s reads as separate events
+  - Reference: ../../examples/cta-orbit-collapse.html uses a single ring (no stagger)
+
+- **RIPPLE_EASE** — easing family for the expansion
+  - Discrete choice. Options:
+    - `power2.out` — fast start, soft tail; the standard "ping" feel
+    - `power3.out` — even sharper attack, longer tail
+    - `expo.out` — almost-instant expansion with a long quiet fade; reads as a strong, distant pulse
+  - Reference: ../../examples/cta-orbit-collapse.html uses `power2.out`
+
+- **TARGET_X / TARGET_Y** — pixel offset of the click target from the cursor's CSS-laid origin
+  - These are layout-derived, not creative knobs — they must match the visual centroid of the actual click target. A 4 px miss reads as missing the button
+  - Reference: ../../examples/cta-orbit-collapse.html targets the white button at `CENTER_X + 130, CENTER_Y + 15`
+
+## Variations
+
+- **Single ring** — keep one `.ripple` element, drop the stagger; reads as more elegant when the rest of the scene is busy
+- **Keyframed attack-decay** — replace the simple expand-and-fade with a `keyframes` block that ramps opacity 0 → peak → 0 across the duration; gives a clearer "energy radiates and dissipates" envelope (used in ../../examples/cta-orbit-collapse.html)
+- **Multi-ring expanding pulse** — 3 rings with 0.08 s stagger feels richer when the click is the climactic moment of the scene
+
+## Key Principles
+
+- **Move before click**: trigger the click only after the move tween has settled — clicking mid-motion reads as unintentional
+- **Synchronized depression**: cursor + target depress at the same `position` time with the same duration (and both yoyo back)
+- **Ripple from click point**: ripples expand from the exact click location (the button's visual center), not from any element's bounding-box origin
+- **Subtle scale**: cursor compresses more than the target — see `CURSOR_PRESS_SCALE` / `TARGET_PRESS_SCALE`
+- **High z-index cursor**: cursor renders above all content for the entire sequence
+
+## Critical Constraints
+
+- **Timeline must be paused**: `gsap.timeline({ paused: true })`. Never call `tl.play()` — HyperFrames seeks the timeline frame-by-frame deterministically
+- **Registry key = `data-composition-id`**: `window.__timelines["<id>"]` must match the `data-composition-id` on the scene root exactly
+- **`immediateRender: false` on the ripple expand**: holds the initial state (`scale: 0`, `opacity: 0`) until the click moment, otherwise the tween pre-renders and the rings appear at the wrong size at t=0
+- **Finite duration**: verify `tl.duration()` matches the scene's `data-duration`
+- **`pointer-events: none` on cursor + ripples**: they're purely visual; never block underlying interactivity (matters for hover-able exports)
+- **No CSS transitions / animations**: all motion lives in the GSAP timeline so seek stays deterministic
+
+## Combinations
+
+- [orbit-3d-entry.md](orbit-3d-entry.md) — when the click is the pivot that collapses orbiting elements toward the cursor's target
+- [center-outward-expansion.md](center-outward-expansion.md) — the click can be the trigger for an outward burst from the click point
+- [press-release-spring.md](press-release-spring.md) for stronger physical feel on the target button
+- [scale-swap-transition.md](scale-swap-transition.md) for the button's state change after click (button morphs into success state, next view, etc.)
+
+## Pairs with HF skills
+
+- `/hyperframes-animation` — timeline + tween API reference (eases, stagger, `immediateRender`, etc.)
+- `/hyperframes-core` — composition wiring (`data-*` attributes, scene structure, registration contract)
+- `/hyperframes-cli` — `hyperframes lint` to verify the registry key + duration match
diff --git a/.claude/skills-media/hyperframes-animation/rules/depth-of-field-blur.md b/.claude/skills-media/hyperframes-animation/rules/depth-of-field-blur.md
new file mode 100644
index 000000000..702fbc4d2
--- /dev/null
+++ b/.claude/skills-media/hyperframes-animation/rules/depth-of-field-blur.md
@@ -0,0 +1,313 @@
+---
+name: depth-of-field-blur
+description: Selective-focus rack-focus — pull the eye to a focal element by GSAP-tweening filter blur (+ a small opacity dim) on the off-focus layers while the focal one stays sharp. Drive blur via a `--dof` CSS var; finite tweens, no CSS transition, deterministic. Covers single focal pull, rack-focus between two depth planes, and blur-the-cluster-while-pushing-in.
+metadata:
+  tags: blur, focus, depth-of-field, dof, rack-focus, filter, dim, spotlight, cinematic, push-in
+---
+
+# Depth-of-Field Blur (Selective Focus / Rack Focus)
+
+Pulls the eye to one focal element by **blurring** (and slightly **dimming**) everything around it while the focal layer stays sharp — the camera's depth-of-field falling off the background, or a rack-focus shifting which plane is in focus. The motion is `filter: blur(Npx)` plus a small `opacity` dim, tweened from sharp(0) to blurred over the focus-shift window — both seek-safe, since `filter` and `opacity` are paint-only properties HF interpolates correctly frame-by-frame.
+
+This is the backing rule for the focus-falloff beat the blueprints keep reaching for: the outer nodes blurring during the push-in (`constellation-hub`), the rack-focus across a parallax card stack (`cursor-ui-demo`), and the non-highlighted cards dimming + blurring to spotlight the hero metric (`dataviz-countup`). Each of those flags "no backing rule" for the DoF half of the move — this is it.
+
+## How It Works
+
+Every layer carries a `--dof` custom property (px of blur), read by `filter: blur(var(--dof))`, plus its own `opacity`. A single GSAP tween advances each layer's `--dof` from `0` to its target blur and its opacity from `1` to a dim level, over the focus-shift window. The focal layer's tween targets `--dof: 0` (stays sharp); the off-focus layers target a positive blur.
+
+Three mechanics, same primitive:
+
+1. **Focal pull** — one window: off-focus layers go sharp(0) → blurred while the focal layer holds at 0. The eye is pulled to the only thing still crisp.
+2. **Rack focus** — two adjacent windows on the same property: focus releases plane A (its blur ramps 0 → max) at the same position plane B's blur ramps max → 0. State continuity matters exactly as in `press-release-spring`: A's resting blur after the rack must be the value B held before it, so authoring the two as adjacent tweens on the same `--dof` is what makes the hand-off seamless.
+3. **Blur-the-cluster-while-pushing-in** — the DoF tween runs concurrently with a camera push-in (`multi-phase-camera` / `coordinate-target-zoom`): the surrounding cluster blurs + dims on the SAME timeline position as the camera scales toward the focal core, so "the world recedes" and "we push in" read as one move.
+
+Because the blur is a tween target (not a CSS `transition`), the renderer can land it at any frame — and because each layer's target is derived from its index / a data attribute (never `Math.random`), the falloff is identical on every seek.
+
+## HTML
+
+```html
+<div
+  class="scene"
+  id="dof-scene"
+  data-composition-id="dof-scene"
+  data-start="0"
+  data-duration="DURATION"
+  data-track-index="0"
+>
+  <div class="world" id="world">
+    <!-- Focal layer — stays sharp -->
+    <div class="layer focal" id="focal" data-dof="0">{FocalLabel}</div>
+
+    <!-- Off-focus layers — blur + dim. data-depth orders them near→far
+         so the falloff can scale blur by depth (see Variations). -->
+    <div class="layer ctx" data-depth="1">{Context A}</div>
+    <div class="layer ctx" data-depth="2">{Context B}</div>
+    <div class="layer ctx" data-depth="3">{Context C}</div>
+  </div>
+</div>
+```
+
+## CSS
+
+```css
+.scene {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  display: grid;
+  place-items: center;
+  background: {bgGradient};
+}
+.world {
+  /* Single wrapper so a concurrent camera push-in (multi-phase-camera)
+     transforms everything together; DoF is independent of the camera. */
+  position: relative;
+  width: 100%;
+  height: 100%;
+  transform-origin: 50% 50%;
+}
+.layer {
+  /* --dof is the px of blur; filter reads it. Starts sharp. */
+  --dof: 0px;
+  filter: blur(var(--dof));
+  /* will-change: filter — promotes the layer so the blur is cheap to
+     re-rasterize each frame. See the perf note in Key Principles. */
+  will-change: filter;
+  font-family: {font};
+  font-weight: 900;
+  color: {textColor};
+}
+.focal {
+  /* Sits above the context layers and never blurs. */
+  z-index: 2;
+  font-size: FOCAL_FONT_SIZE;
+}
+.ctx {
+  /* The off-focus plane(s). Smaller / grouped so the blur radius can
+     stay modest yet still read — blurring a small layer is cheap. */
+  z-index: 1;
+  font-size: CTX_FONT_SIZE;
+  opacity: 1;
+}
+```
+
+## GSAP Timeline
+
+```html
+<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+<script>
+  window.__timelines = window.__timelines || {};
+  const tl = gsap.timeline({ paused: true });
+
+  const ctx = gsap.utils.toArray(".ctx");
+
+  // ── Mechanic 1: FOCAL PULL ─────────────────────────────────────────
+  // Off-focus layers blur + dim from sharp to defocused over the
+  // focus-shift window. Blur scales with data-depth so far planes blur
+  // more than near ones (deterministic — derived from the attribute,
+  // never Math.random).
+  ctx.forEach((el) => {
+    const depth = Number(el.dataset.depth) || 1;
+    const targetBlur = BLUR_PER_DEPTH * depth; // px
+    tl.to(
+      el,
+      {
+        "--dof": `${targetBlur}px`,
+        opacity: DIM_LEVEL, // e.g. 0.55 — dim, not gone
+        duration: FOCUS_DUR,
+        ease: "power2.inOut",
+      },
+      FOCUS_START,
+    );
+  });
+  // Focal layer is already sharp (--dof:0, opacity:1) and untouched.
+
+  window.__timelines["dof-scene"] = tl;
+</script>
+```
+
+## Variations
+
+### Rack focus between two depth planes (foreground ⇄ background)
+
+Two adjacent tweens on the same `--dof` per plane — focus leaves plane A as it lands on plane B. State continuity: B's _resting_ blur before the rack equals what A holds after, so the hand-off has no jump.
+
+```js
+// Start: A sharp, B pre-blurred (set BEFORE the rack so there's no pop).
+gsap.set("#planeA", { "--dof": "0px", opacity: 1 });
+gsap.set("#planeB", { "--dof": `${MAX_BLUR}px`, opacity: DIM_LEVEL });
+
+// Rack: A defocuses while B comes into focus, same position + duration.
+tl.to(
+  "#planeA",
+  { "--dof": `${MAX_BLUR}px`, opacity: DIM_LEVEL, duration: RACK_DUR, ease: "power2.inOut" },
+  RACK_START,
+);
+tl.to(
+  "#planeB",
+  { "--dof": "0px", opacity: 1, duration: RACK_DUR, ease: "power2.inOut" },
+  RACK_START,
+);
+```
+
+### Blur the cluster while pushing in (DoF + camera, one beat)
+
+Run the focal-pull tween at the **same timeline position** as a camera push-in so the surrounding cluster recedes into blur exactly as the camera scales toward the core. The camera transforms `.world`; the DoF tweens the layers — independent properties, no conflict.
+
+```js
+// Camera push-in toward the focal core (see multi-phase-camera / coordinate-target-zoom).
+tl.to(
+  "#world",
+  { scale: PUSH_SCALE, x: PUSH_X, y: PUSH_Y, duration: FOCUS_DUR, ease: "power2.inOut" },
+  FOCUS_START,
+);
+// Cluster blurs + dims on the SAME position — "the world recedes as we push in."
+ctx.forEach((el) => {
+  const depth = Number(el.dataset.depth) || 1;
+  tl.to(
+    el,
+    {
+      "--dof": `${BLUR_PER_DEPTH * depth}px`,
+      opacity: DIM_LEVEL,
+      duration: FOCUS_DUR,
+      ease: "power2.inOut",
+    },
+    FOCUS_START,
+  );
+});
+```
+
+### Spotlight a hero metric in a card grid (dim + blur the rest)
+
+The `dataviz-countup` beat: a subset of grid cards stays sharp (the hero metric) while the remainder dim + blur. Tag the hero(es) and skip them; everything else defocuses on one shared window.
+
+```js
+gsap.utils.toArray(".card:not(.hero)").forEach((el) => {
+  tl.to(
+    el,
+    { "--dof": `${GRID_BLUR}px`, opacity: DIM_LEVEL, duration: FOCUS_DUR, ease: "power2.out" },
+    FOCUS_START,
+  );
+});
+```
+
+### Refocus / settle (release the blur before the scene ends)
+
+If the beat resolves back to "everything visible" (or hands off to a crossfade that needs a clean outgoing frame), ramp the blur back to 0 over the tail so the scene settles sharp instead of mid-defocus.
+
+```js
+ctx.forEach((el) =>
+  tl.to(
+    el,
+    { "--dof": "0px", opacity: 1, duration: REFOCUS_DUR, ease: "power2.inOut" },
+    REFOCUS_START,
+  ),
+);
+```
+
+### Bounded focus-breathing on the focal layer (optional)
+
+For a subtle "rack settling" feel, let the focal layer's blur breathe a hair around 0 during its hold — a _finite_ `ease:"none"` driver writing `sin()` into `--dof` (never `repeat:-1`, never a CSS animation). Keep the amplitude well under 1px or it reads as "still focusing."
+
+```js
+const drift = { p: 0 };
+tl.to(
+  drift,
+  {
+    p: Math.PI * 2 * BREATH_CYCLES,
+    duration: BREATH_DUR,
+    ease: "none",
+    onUpdate: () => {
+      const b = Math.max(0, Math.sin(drift.p)) * FOCAL_BREATH_PX; // ≤ ~0.6px
+      document.getElementById("focal").style.setProperty("--dof", `${b}px`);
+    },
+  },
+  BREATH_START,
+);
+```
+
+## How to Choose Values
+
+### Geometry / layout
+
+- **FOCAL_FONT_SIZE / CTX_FONT_SIZE** — focal vs context sizing.
+  - Range: focal is the visual lead; context layers smaller so a modest blur radius still reads as "out of focus."
+  - Effects: small context layers let you use a smaller `BLUR_PER_DEPTH` (cheaper) yet still look soft.
+- **z-index** — focal `z-index: 2`, context `z-index: 1`.
+  - Constraints: the sharp focal layer must sit **above** the blurred ones, or its crisp edges read as bleeding into the haze.
+
+### Blur amounts
+
+- **BLUR_PER_DEPTH** — px of blur added per depth step (`data-depth`).
+  - Range: 3-6 px per step (a 3-plane stack tops out at ~9-18 px)
+  - Effects: low → gentle DoF; high → strong miniature/tilt-shift falloff
+  - Constraints: keep **per-layer blur ≤ ~24 px on large layers** — radius cost grows with both blur and area; large radius over a full-frame element is the expensive case (see Key Principles)
+- **MAX_BLUR** — terminal blur for a fully-defocused plane (rack / focal-pull peak).
+  - Range: 8 (soft) → 16 (default) → 24 (heavy) px
+  - Constraints: above ~24 px on a big surface, prefer scaling the layer down or grouping its contents so the blurred footprint shrinks
+- **GRID_BLUR** — blur on dimmed grid cards (spotlight variation).
+  - Range: 6-12 px — enough to push them back without losing the grid's shape
+
+### Dim amounts
+
+- **DIM_LEVEL** — opacity of off-focus layers at full defocus.
+  - Range: 0.4 (strong push-back) → 0.55 (default) → 0.7 (subtle)
+  - Effects: lower → context recedes hard / near-spotlight; higher → still legibly present, just secondary
+  - Constraints: rarely below 0.35 — fully dark off-focus layers read as "removed," not "defocused"
+
+### Timing
+
+- **FOCUS_START / FOCUS_DUR** — when the focal pull begins and how long the rack takes.
+  - Range: `FOCUS_DUR` 0.5-1.2 s — a rack/pull is a deliberate move, not a snap
+  - Effects: shorter → urgent "snap focus"; longer → languid cinematic rack
+- **RACK_START / RACK_DUR** — rack-focus window (foreground ⇄ background).
+  - Constraints: both planes' tweens share `RACK_START` and `RACK_DUR` so they cross at the midpoint; `gsap.set` the pre-blurred plane BEFORE `RACK_START`
+- **REFOCUS_START / REFOCUS_DUR** — settle-back window.
+  - Constraints: `REFOCUS_START + REFOCUS_DUR ≤ DURATION` so the scene actually reaches sharp before it ends / hands off
+- **PUSH_SCALE / PUSH_X / PUSH_Y** (cluster-while-pushing-in variation) — camera move on `.world`.
+  - Constraints: shares `FOCUS_START` + `FOCUS_DUR` with the DoF tween so move and defocus read as one beat; counter-translate math lives in `coordinate-target-zoom` / `viewport-change`
+- **BREATH_CYCLES / BREATH_DUR / FOCAL_BREATH_PX** (focus-breathing variation).
+  - Range: `FOCAL_BREATH_PX ≤ 0.6` px; period 2-3 s; this is a barely-there nicety, default to omitting it
+
+### Tokens
+
+- **{bgGradient}** — typically dark so the sharp focal layer reads as lit and forward
+- **{textColor}** — high-contrast on `{bgGradient}`; the blur softens edges, so don't rely on hairline contrast
+- **{font}** — display weight; blurred copy needs heavy weight to stay shape-legible when defocused
+
+## Key Principles
+
+- **`--dof` drives the blur; tween the variable, never a CSS `transition`.** Reading `filter: blur(var(--dof))` and animating `--dof` on the GSAP timeline keeps the blur on the HF seek clock. A CSS `transition` on `filter` interpolates on the browser's own clock and flickers/desyncs under frame-by-frame seek.
+- **Blur the SMALL / GROUPED layers, not the giant one.** Filter-blur cost scales with both radius and the blurred element's pixel area. A 20 px blur on a full-frame background is the worst case; the same blur on a smaller context card, or on a single grouped wrapper, is cheap. Prefer pushing the focal plane _forward and sharp_ over cranking the background blur radius.
+- **`will-change: filter`** on every layer that animates its blur — promotes it to its own layer so the re-rasterization each frame is cheap. Drop it once the blur settles if the layer also does heavy transform work.
+- **Keep the radius modest.** ≤ ~24 px on large surfaces; lean on the `opacity` **dim** to do the "push it back" work alongside a smaller blur, rather than blur alone. Dim + modest blur reads more like real DoF than blur cranked to the max.
+- **Focal layer stays genuinely sharp** — its `--dof` is `0` and untouched (or breathes ≤0.6 px). Any visible blur on the focal element kills the "this is the thing" read.
+- **State continuity on a rack** — the plane coming OUT of focus must start the rack at the blur the incoming plane _was_ holding, and vice-versa; author both as tweens on the same `--dof` at the same position so the cross is seamless (same rule as `press-release-spring`'s press↔release).
+- **DoF is independent of the camera** — blur the layers, transform `.world` for the push-in. They're different property channels, so they compose without fighting. Don't try to fake DoF with the camera transform or vice-versa.
+- **Settle sharp before a hand-off** — if the next beat is a crossfade/push, refocus to `--dof:0` in the tail so the outgoing frame is crisp; handing off mid-defocus reads as "the render glitched."
+
+## Critical Constraints
+
+- **Timeline must be paused**: `gsap.timeline({ paused: true })`
+- **Registry key = `data-composition-id`**
+- **No CSS `transition`** on `filter` / `opacity` — animate `--dof` and `opacity` on the timeline instead
+- **No `repeat` / `yoyo` / infinite tweens** — the focus pull is a finite tween; any breathing is a bounded `onUpdate` reading the driver phase (or a finite tween), never `repeat:-1`
+- **No `Math.random` / `Date.now`** — per-layer blur is derived from `data-depth` / element index so every seek is identical
+- **Tween `filter` (blur) + `opacity` only here** — both paint-only and seek-safe. Use GSAP transform aliases (`x`, `y`, `scale`) for any concurrent camera move; never tween `width` / `height` / `left` / `top`
+- **`will-change: filter`** on layers whose blur animates; keep the blurred footprint small
+- **Per-layer blur radius ≤ ~24 px on large surfaces** — beyond that the cost (and visible banding) climbs; shrink/group the layer instead
+
+## Combinations
+
+- [multi-phase-camera.md](multi-phase-camera.md) — the push-in / push-through whose focus-falloff this rule supplies; run the DoF tween at the same position as the PUSH phase
+- [coordinate-target-zoom.md](coordinate-target-zoom.md) — zoom onto the focal core while the off-center layers blur (the `constellation-hub` hook)
+- [viewport-change.md](viewport-change.md) — pan across a tilted card plane with a rack-focus between near and far cards (the `cursor-ui-demo` focus-pull)
+- [counting-dynamic-scale.md](counting-dynamic-scale.md) — the hero metric counts up sharp while the surrounding cards dim + blur (the `dataviz-countup` spotlight)
+- [3d-page-scroll.md](3d-page-scroll.md) — the parallax card stack whose planes you rack focus between
+- [sine-wave-loop.md](sine-wave-loop.md) — the focal layer idle-breathes after the rack settles (keep idle amplitude and focus-breath both tiny)
+
+## Pairs with HF skills
+
+- `/hyperframes-animation` — tweening a CSS custom property + multi-tween coordination
+- `/hyperframes-core` — composition wiring
+- `/hyperframes-cli` — `hyperframes lint`
diff --git a/.claude/skills-media/hyperframes-animation/rules/depth-scatter-assemble.md b/.claude/skills-media/hyperframes-animation/rules/depth-scatter-assemble.md
new file mode 100644
index 000000000..ffe9424b8
--- /dev/null
+++ b/.claude/skills-media/hyperframes-animation/rules/depth-scatter-assemble.md
@@ -0,0 +1,303 @@
+---
+name: depth-scatter-assemble
+description: N elements scatter into / reassemble from a rotating 3D depth-cloud, each starting at a deterministic index-derived 3D offset and settling to a clean flat layout.
+metadata:
+  tags: 3d, scatter, assemble, depth, cloud, tumble, kinetic, letter, fragment, logo, reassemble
+---
+
+# Depth Scatter ↔ Assemble
+
+N elements (glyphs, cards, icons, logo fragments) fly in from a rotating 3D depth-cloud and lock into a clean on-screen layout — or the reverse. Each element starts at a **deterministic** 3D offset (translateZ depth + rotateX/rotateY + an x/y scatter derived from its index), then tweens to its assembled flat position (`z: 0, rotation: 0`). Because every scattered position is computed by trig on the element's index — never `Math.random` — it renders identically every frame.
+
+Distinct from `orbit-3d-entry` (flip-in then a continuous orbit) and `center-outward-expansion` (a flat 2D burst from one shared center): here each element has its **own** point in a 3D cloud, and the resolve is a flat assembled layout, not an orbit or a radial spray.
+
+## How It Works
+
+Each element resolves to a flat layout position (`targetX/Y`, set once in CSS or via `data-*`). Its **scattered** state is derived from its index `i`:
+
+```js
+const GOLDEN = Math.PI * (3 - Math.sqrt(5)); // ~2.39943 rad — even angular spread, no clumping
+const a = i * GOLDEN; // this element's angle in the cloud
+const scatterX = Math.cos(a) * RADIUS; // index-derived, deterministic
+const scatterY = Math.sin(a) * RADIUS;
+const scatterZ = Z_NEAR - (i / (n - 1)) * (Z_NEAR - Z_FAR); // stepped depth across the cloud
+const rotX = Math.sin(a) * TUMBLE; // tumble orientation, also from the angle
+const rotY = Math.cos(a) * TUMBLE;
+```
+
+A single 0→1 `progress` proxy interpolates each element between scattered and assembled (lerp every channel). At `progress = 0` the elements form the depth-cloud; at `progress = 1` they sit flat in the layout. Run it forward and it's **assemble**; the cloud itself slowly rotates (a stage `rotateY` tween) so the scatter has life before it locks.
+
+Requires `perspective` on the stage and `transform-style: preserve-3d` on the stage AND each element, or the z-depth and tumble flatten to a 2D scale.
+
+## HTML
+
+```html
+<div
+  class="scene"
+  id="assemble-scene"
+  data-composition-id="assemble-scene"
+  data-start="0"
+  data-duration="4"
+  data-track-index="0"
+>
+  <!-- The cloud rotates; the layout lives inside it. targetX/Y = each
+       element's FLAT assembled offset from stage center (px). -->
+  <div class="cloud-stage">
+    <div class="frag" data-target-x="-260" data-target-y="0">{glyph1}</div>
+    <div class="frag" data-target-x="-130" data-target-y="0">{glyph2}</div>
+    <div class="frag" data-target-x="0" data-target-y="0">{glyph3}</div>
+    <div class="frag" data-target-x="130" data-target-y="0">{glyph4}</div>
+    <div class="frag" data-target-x="260" data-target-y="0">{glyph5}</div>
+  </div>
+</div>
+```
+
+For a logo lockup, `targetX/Y` describe the parts' resting layout; for kinetic type, one `.frag` per glyph (inject spans from the phrase string at setup so width is exact — see Variations).
+
+## CSS
+
+```css
+.scene {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  display: grid;
+  place-items: center;
+  background: {bgColor};
+  perspective: 1400px; /* REQUIRED — without it, z-depth + tumble read as flat 2D scale */
+}
+.cloud-stage {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  display: grid;
+  place-items: center;
+  transform-style: preserve-3d; /* REQUIRED — preserves child 3D context */
+  will-change: transform;
+}
+.frag {
+  position: absolute;
+  /* Live at stage center; GSAP translates each one to its layout / cloud point. */
+  top: 50%;
+  left: 50%;
+  display: grid;
+  place-items: center;
+  font-family: {font};
+  font-weight: 900;
+  font-size: 120px;
+  color: {textColor};
+  transform-style: preserve-3d; /* each fragment keeps its own 3D context */
+  backface-visibility: hidden; /* hides the mirrored face mid-tumble */
+  will-change: transform, opacity;
+}
+```
+
+## GSAP Timeline
+
+```html
+<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+<script>
+  window.__timelines = window.__timelines || {};
+  const tl = gsap.timeline({ paused: true });
+
+  const frags = Array.from(document.querySelectorAll(".frag"));
+  const n = frags.length;
+  const GOLDEN = Math.PI * (3 - Math.sqrt(5)); // ~2.39943 — even spread, no clumps
+
+  // RADIUS, Z_NEAR, Z_FAR, TUMBLE, ASSEMBLE_DUR, ASSEMBLE_EASE, STAGGER,
+  // CLOUD_SPIN_DEG, CLOUD_SPIN_DUR — named constants per "How to Choose Values".
+
+  // Precompute each fragment's deterministic scattered state from its index.
+  const scatter = frags.map((el, i) => {
+    const a = i * GOLDEN;
+    const depthT = n > 1 ? i / (n - 1) : 0;
+    return {
+      x: Math.cos(a) * RADIUS,
+      y: Math.sin(a) * RADIUS,
+      z: Z_NEAR - depthT * (Z_NEAR - Z_FAR),
+      rotationX: Math.sin(a) * TUMBLE,
+      rotationY: Math.cos(a) * TUMBLE,
+    };
+  });
+
+  // 1) Park every fragment in the cloud BEFORE any tween fires.
+  frags.forEach((el, i) => {
+    const s = scatter[i];
+    gsap.set(el, {
+      xPercent: -50,
+      yPercent: -50, // bake self-centering so x/y are offsets from stage center
+      x: s.x,
+      y: s.y,
+      z: s.z,
+      rotationX: s.rotationX,
+      rotationY: s.rotationY,
+      opacity: 0,
+    });
+  });
+
+  // 2) The cloud rotates so the scatter has life before / during assembly.
+  tl.to(
+    ".cloud-stage",
+    { rotationY: CLOUD_SPIN_DEG, duration: CLOUD_SPIN_DUR, ease: "power1.out" },
+    0,
+  );
+
+  // 3) ASSEMBLE — each fragment tweens from its cloud point to its flat target.
+  frags.forEach((el, i) => {
+    tl.to(
+      el,
+      {
+        x: Number(el.dataset.targetX),
+        y: Number(el.dataset.targetY),
+        z: 0,
+        rotationX: 0,
+        rotationY: 0,
+        opacity: 1,
+        duration: ASSEMBLE_DUR,
+        ease: ASSEMBLE_EASE, // out-ease — fragments fly in then settle
+      },
+      i * STAGGER, // index stagger reads as "cloud collapsing inward"
+    );
+  });
+
+  window.__timelines["assemble-scene"] = tl;
+</script>
+```
+
+## Variations
+
+### Tumble-swap (mid-shot hand-off between two phrases)
+
+The signature for `kinetic-type-beats` beat changes: one phrase's glyphs scatter **into** the cloud at the same moment the next phrase's glyphs assemble **out** of it — a 3D hand-off between two states, never an empty frame. Two glyph sets share the cloud; drive both with one shared 0→1 `progress` so they cross deterministically.
+
+```js
+// outgoing[] and incoming[] are two glyph arrays, each with precomputed scatter[] (above).
+const swap = { p: 0 };
+tl.to(
+  swap,
+  {
+    p: 1,
+    duration: SWAP_DUR,
+    ease: "power2.inOut",
+    onUpdate: () => {
+      const p = swap.p;
+      outgoing.forEach((el, i) => {
+        // 1 → 0: layout → cloud (scatters AWAY)
+        const s = outScatter[i];
+        const tx = Number(el.dataset.targetX);
+        const ty = Number(el.dataset.targetY);
+        el.style.opacity = String(1 - p);
+        el.style.transform =
+          `translate(-50%,-50%) translate3d(${tx + (s.x - tx) * p}px,${ty + (s.y - ty) * p}px,${s.z * p}px)` +
+          ` rotateX(${s.rotationX * p}deg) rotateY(${s.rotationY * p}deg)`;
+      });
+      incoming.forEach((el, i) => {
+        // 0 → 1: cloud → layout (assembles IN)
+        const s = inScatter[i];
+        const tx = Number(el.dataset.targetX);
+        const ty = Number(el.dataset.targetY);
+        el.style.opacity = String(p);
+        el.style.transform =
+          `translate(-50%,-50%) translate3d(${s.x + (tx - s.x) * p}px,${s.y + (ty - s.y) * p}px,${s.z * (1 - p)}px)` +
+          ` rotateX(${s.rotationX * (1 - p)}deg) rotateY(${s.rotationY * (1 - p)}deg)`;
+      });
+    },
+  },
+  SWAP_AT,
+);
+```
+
+Inject a per-glyph span set for each phrase at setup (so `targetX` per glyph is the exact laid-out advance width — measure after `document.fonts.ready`), and hide each set's opacity to 0 until its window.
+
+### Radial letter-explode → resolve
+
+A flat-plane special case (the `kinetic-type-beats` "letters explode radially then resolve" GAP): set `Z_NEAR = Z_FAR = 0` and `TUMBLE` small so the cloud is a 2D ring, then reverse the assemble for the explode — fragments fling out to `scatter[i]` then snap back to layout. Pure in-plane, no depth.
+
+### Scatter-OUT (final-frame exit only)
+
+Reverse the assemble (layout → cloud, opacity 1→0) ONLY as the composition's last beat. A scatter-out mid-shot reads as an exit and breaks the shot — keep entrances and hand-offs as assemble or tumble-swap.
+
+### Parallax depth slide-in (logo lockup)
+
+For `logo-assemble-lockup`, give back layers a larger `|Z_FAR|` and a longer `ASSEMBLE_DUR`, foreground parts a shallower depth and shorter duration — parts at different depths slide in at different apparent speeds (parallax) and lock into the lockup.
+
+## How to Choose Values
+
+- **n (ELEMENT_COUNT)** — fragments / glyphs in the cloud
+  - Range: 4–14 (glyph sets follow the word length; for fragments/cards stay 4–9)
+  - Effects: few reads as deliberate assembly; many reads as a dense swarm condensing
+  - Constraints: above ~14 the cloud crowds the center and individual paths stop reading
+
+- **RADIUS** — cloud spread in the x/y plane, px
+  - Range: 250–700 px
+  - Effects: small = a tight knot that barely separates; large = fragments arrive from the frame edges
+  - Constraints: keep the farthest scatter inside frame at the chosen `perspective`, or fragments pop in from off-screen with no travel read
+
+- **Z_NEAR / Z_FAR** — depth band of the cloud, px (front / back)
+  - Range: Z_NEAR +150 to +450; Z_FAR −150 to −500
+  - Effects: a wide band (e.g. +400 / −400) gives strong fly-toward / recede-from camera depth; a narrow band keeps it nearly flat
+  - Constraints: very large `|z|` against a short `perspective` over-distorts (fragments smear huge then tiny) — widen `perspective` to match
+
+- **TUMBLE** — peak rotateX/rotateY of scattered fragments, deg
+  - Range: 40–110°
+  - Effects: low = fragments drift in nearly upright; high = they tumble through space and rotate upright on arrival
+  - Constraints: with `backface-visibility: hidden`, glyphs past 90° show blank mid-tween (intended for the tumble); for cards with content on one face, cap near 80°
+
+- **ASSEMBLE_DUR** — per-fragment cloud → layout tween, s
+  - Range: 0.7–1.4 s
+  - Effects: short = snappy lock-in; long = a floating condense
+  - Constraints: `(n − 1) × STAGGER + ASSEMBLE_DUR` must fit the scene's assembly window
+
+- **ASSEMBLE_EASE** — shared ease across fragments
+  - Discrete choice: `power3.out`, `expo.out`, `back.out(1.4)`
+  - Selection: `power3.out` default (fly in, settle). `expo.out` snaps hard at the end. `back.out` adds a small overshoot as parts seat. Avoid `in` easings — fragments look sucked backward into the cloud mid-air.
+
+- **STAGGER** — gap between successive fragments' assembly starts, s
+  - Range: 0.03–0.09 s
+  - Effects: < 0.03 = a single chord (whole cloud collapses at once); > 0.09 = a slow drip that loses the "swarm" read
+  - Constraints: `n × STAGGER` should stay below `ASSEMBLE_DUR` so the cloud is collapsing as one motion, not a queue
+
+- **CLOUD_SPIN_DEG / CLOUD_SPIN_DUR** — stage rotateY over the assembly, deg / s
+  - Range: 15–60° over a duration ≥ `ASSEMBLE_DUR`
+  - Effects: a gentle spin gives the scatter life so it doesn't read as a frozen explosion diagram; too fast competes with the assembly
+  - Constraints: keep finite and ending by settle — no `repeat`
+
+- **SWAP_DUR / SWAP_AT** (tumble-swap) — hand-off length / when it fires, s
+  - Range: SWAP_DUR 0.5–1.0 s; SWAP_AT on the beat boundary
+  - Effects: shorter = a hard cross; longer = a visible dissolve-through-cloud
+  - Constraints: outgoing and incoming MUST share one `progress` (one tween) so they cross at the same instant
+
+## Key Principles
+
+- **`perspective` on the scene root + `preserve-3d` on stage AND each fragment** — without all three, z-depth and tumble collapse to a flat scale
+- **Every scattered value is index-derived** — `cos/sin(i × GOLDEN)`, stepped `z` by `i/(n−1)`. The golden angle spreads points evenly with no clumps and (critically) **no `Math.random`**, so the cloud is byte-identical every render
+- **`gsap.set` the cloud BEFORE adding tweens** — park each fragment at its scatter point with `opacity: 0` first; the assemble tweens FROM there. Skipping the set leaves frame 0 showing the assembled layout, then a teleport when the first tween starts
+- **Resolve flat** — the settled state is `z: 0, rotationX: 0, rotationY: 0` in the layout. A cloud that resolves still-tilted reads as unfinished
+- **Assemble / hand-off only; scatter-OUT is an exit** — fragments leaving for the cloud mid-shot reads as the shot ending. Use forward assemble for entrances, tumble-swap for beat changes; reserve scatter-out for the final frame
+- **Depth ordering is automatic** — inside `preserve-3d`, paint order follows actual Z, so nearer fragments correctly occlude farther ones with no manual z-index (unlike the orbit case, where the orbit is faked in 2D and needs capped z-index)
+
+## Critical Constraints
+
+- **No `Math.random` / `Date.now`** — derive every scatter coordinate from the index (golden-angle trig + stepped depth). This is the whole point of the rule: a randomized cloud renders differently each frame and the seek breaks
+- **No CSS `transition`** — all motion is GSAP tweens on the paused timeline
+- **No `repeat` / `yoyo` / infinite** — the cloud spin and every assemble are finite, one-shot tweens that end before settle
+- **Timeline must be paused**: `gsap.timeline({ paused: true })`
+- **Registry key = `data-composition-id`**
+- **Transform aliases only** — `x`, `y`, `z`, `scale`, `rotation`/`rotationX`/`rotationY`. Never `width`/`height`/`left`/`top`; `x`/`y` compose with the `xPercent/yPercent -50` self-centering
+- **`will-change: transform`** on stage + fragments — many simultaneous 3D transforms benefit from compositor hints
+- **In tumble-swap, one shared `progress` for both glyph sets** — two separate tweens can drift out of phase under seek and the cross stops looking like a single hand-off
+
+## Combinations
+
+- [orbit-3d-entry.md](orbit-3d-entry.md) — alternative 3D entrance (settles into a continuous orbit instead of a flat lockup); shares the `perspective` + `preserve-3d` stage setup
+- [hacker-flip-3d.md](hacker-flip-3d.md) — per-glyph 3D flip/decode as the fragments seat; layer for a "letters tumble in AND decode on arrival" read
+- [3d-text-depth-layers.md](3d-text-depth-layers.md) — give the assembled wordmark a stacked extrusion once it locks
+- [center-outward-expansion.md](center-outward-expansion.md) — flat 2D cousin (single shared center, no depth) when perspective isn't wanted
+- [press-release-spring.md](press-release-spring.md) — a spring settle on the assembled lockup once the cloud resolves
+- [sine-wave-loop.md](sine-wave-loop.md) — idle breathe on the resolved layout instead of a frozen hold
+
+## Pairs with HF skills
+
+- `/hyperframes-animation` — timeline + `onUpdate` API (the shared-progress tumble-swap)
+- `/hyperframes-core` — composition wiring
+- `/hyperframes-cli` — `hyperframes lint`
diff --git a/.claude/skills-media/hyperframes-animation/rules/discrete-text-sequence.md b/.claude/skills-media/hyperframes-animation/rules/discrete-text-sequence.md
new file mode 100644
index 000000000..3045b3a04
--- /dev/null
+++ b/.claude/skills-media/hyperframes-animation/rules/discrete-text-sequence.md
@@ -0,0 +1,273 @@
+---
+name: discrete-text-sequence
+description: Replace entire text states at frame thresholds for non-linear typing effects — typos, bulk additions, pauses, backspaces, simulated thinking.
+metadata:
+  tags: text, typing, discrete, threshold, non-linear, sequence
+---
+
+# Discrete Text Sequence
+
+Instead of character-by-character typewriter, replace entire string states at time thresholds. Enables non-linear effects (typos, bulk additions, pauses, "thinking" gaps) that smooth per-char typing can't achieve.
+
+## How It Works
+
+An array of `{ text, t }` pairs where `t` is a time in seconds. On every onUpdate, scan the array for the latest entry whose `t` has passed and render that text. The display jumps between states; no animation between them.
+
+For continuous per-char typewriter (no pauses, no edits), use the **smooth-slice** variation at the bottom.
+
+## HTML
+
+```html
+<div
+  class="scene"
+  id="seq-scene"
+  data-composition-id="seq-scene"
+  data-start="0"
+  data-duration="6"
+  data-track-index="0"
+>
+  <div class="terminal">
+    <div class="prompt">$</div>
+    <div class="text-wrap">
+      <span class="text" id="text">|</span>
+      <span class="cursor" id="cursor">_</span>
+    </div>
+  </div>
+</div>
+```
+
+## CSS
+
+```css
+.scene {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  display: grid;
+  place-items: center;
+  background: {bgColor};
+  font-family: {monoFont}; /* monospace is required — see Critical Constraints */
+}
+.terminal {
+  display: flex;
+  align-items: baseline;
+  gap: GUTTER;
+  font-weight: 800;
+  font-size: TERMINAL_FONT_SIZE;
+  color: {textColor};
+}
+.prompt {
+  color: {accentColor};
+}
+.text-wrap {
+  display: inline-flex;
+  align-items: baseline;
+  /* Fixed-width container prevents the right side from jittering as
+     content changes length. Choose width ≥ longest state's width. */
+  min-width: TEXT_WRAP_MIN_WIDTH;
+  white-space: nowrap;
+}
+.text {
+  color: {textColor};
+}
+.cursor {
+  display: inline-block;
+  width: CURSOR_WIDTH;
+  color: {accentColor};
+  margin-left: CURSOR_GAP;
+}
+```
+
+## GSAP Timeline + Discrete State Logic
+
+```html
+<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+<script>
+  window.__timelines = window.__timelines || {};
+
+  // SEQUENCE — each entry shows from t to the NEXT entry's t.
+  // Non-linear: typos, corrections, bulk additions, pauses.
+  // Shape (one realization):
+  //   [warm-up keystrokes] → [typo] → [backspaces back to fork] →
+  //   [bulk-paste of the corrected continuation] → [completion mark]
+  const SEQUENCE = [
+    { t: 0.0, text: "" },
+    { t: T_K1, text: "{p1}" }, // first keystrokes (~3-5 chars, 0.1-0.2s apart)
+    { t: T_K2, text: "{p1 + ' ' + p2_typo}" }, // continuation containing a typo
+    { t: T_BS, text: "{p1 + ' ' + p2_partial}" }, // backspace(s) — peel back to the fork
+    { t: T_BULK, text: "{fullCorrectedText}" }, // bulk paste — replaces several chars at once
+    { t: T_DONE, text: "{fullCorrectedText + ' ✓'}" }, // completion marker
+  ];
+
+  // Reverse-search for the latest entry whose t has passed.
+  function textAt(time) {
+    for (let i = SEQUENCE.length - 1; i >= 0; i--) {
+      if (time >= SEQUENCE[i].t) return SEQUENCE[i].text;
+    }
+    return "";
+  }
+
+  const textEl = document.getElementById("text");
+  const cursorEl = document.getElementById("cursor");
+  const tl = gsap.timeline({ paused: true });
+
+  // Drive the discrete display via a 0→TOTAL_DURATION tween's onUpdate
+  const driver = { t: 0 };
+  tl.to(
+    driver,
+    {
+      t: TOTAL_DURATION,
+      duration: TOTAL_DURATION,
+      ease: "none",
+      onUpdate: () => {
+        textEl.textContent = textAt(driver.t);
+      },
+    },
+    0,
+  );
+
+  // Cursor blink — deterministic via sin, not CSS animation
+  const blinkDriver = { p: 0 };
+  tl.to(
+    blinkDriver,
+    {
+      p: Math.PI * 2 * BLINK_CYCLES, // BLINK_CYCLES = blinks across composition
+      duration: TOTAL_DURATION,
+      ease: "none",
+      onUpdate: () => {
+        cursorEl.style.opacity = Math.sin(blinkDriver.p) > 0 ? "1" : "0";
+      },
+    },
+    0,
+  );
+
+  window.__timelines["seq-scene"] = tl;
+</script>
+```
+
+## Variations
+
+### Smooth character slice (continuous typewriter — no pauses, no edits)
+
+For straight-forward typewriter without the non-linear chaos:
+
+```js
+const fullText = "{fullPhrase}";
+const len = { v: 0 };
+tl.to(
+  len,
+  {
+    v: fullText.length,
+    duration: TYPE_DUR,
+    ease: "power1.inOut",
+    onUpdate: () => {
+      textEl.textContent = fullText.substring(0, Math.floor(len.v));
+    },
+  },
+  0,
+);
+```
+
+This is faster to author but produces a uniform "machine-typed" feel — missing the human-typing realism.
+
+### Thinking pause (extended hold on a key state)
+
+Insert a state that holds for `THINK_HOLD_DUR` seconds without changes — feels like the user paused to think:
+
+```js
+{ t: T_PRE_PAUSE, text: '{partialPhrase}' },        // last state before the pause
+// ... no entries for THINK_HOLD_DUR seconds ...
+{ t: T_PRE_PAUSE + THINK_HOLD_DUR, text: '{resumedPhrase}' },
+```
+
+### State pulse on completion
+
+When the final state lands (e.g. "✓"), pulse-scale the line briefly for emphasis:
+
+```js
+tl.to(
+  ".text",
+  { scale: COMPLETION_PULSE_SCALE, duration: COMPLETION_PULSE_DUR, yoyo: true, repeat: 1 },
+  T_DONE,
+);
+```
+
+### Per-state color shift
+
+Color-code states by phase (e.g. dim during edit, success color after the completion marker, optional warning color on typo):
+
+```js
+// In onUpdate after setting textContent:
+if (driver.t > T_DONE) textEl.style.color = "{successColor}";
+else if (driver.t < T_K2)
+  textEl.style.color = "{textColor}"; // normal typing
+else textEl.style.color = "{mutedColor}"; // mid-edit dim
+```
+
+## How to Choose Values
+
+### Layout
+
+- **TERMINAL_FONT_SIZE** — font size of the typing line.
+  - Range: 48-96 px for full-bleed compositions; smaller for terminal-style detail
+  - Constraints: combined with `TEXT_WRAP_MIN_WIDTH` must fit within viewport
+- **TEXT_WRAP_MIN_WIDTH** — fixed-width container holding the text.
+  - Constraints: must be `≥ widthOf(longest SEQUENCE state) at TERMINAL_FONT_SIZE`. Measure with a hidden probe after `document.fonts.ready` if unsure
+  - Effects: too small → right edge jitters as states change length; too large → unused horizontal whitespace pads the composition
+- **GUTTER** — flex gap between prompt glyph (`$`, `>`) and text.
+  - Range: ~0.3-0.5× `TERMINAL_FONT_SIZE`
+- **CURSOR_WIDTH / CURSOR_GAP** — block cursor dimensions.
+  - Range: width ~0.3× `TERMINAL_FONT_SIZE`; gap small (single-digit px) so the cursor feels attached to the text
+
+### Sequence timing
+
+- **TOTAL_DURATION** — composition length.
+  - Constraints: must be ≥ `T_DONE` + ~1s climax dwell so viewer sees the completion marker
+- **T_K1 / T_K2 / T_BS / T_BULK / T_DONE** — milestone timestamps within the SEQUENCE.
+  - Range: keystrokes 0.06-0.20s apart for "human typing"; pauses 0.3-0.6s at natural word breaks; bulk paste jumps multiple characters in a single entry
+  - Constraints: monotonically increasing; `T_DONE ≤ TOTAL_DURATION - dwell`
+- **TYPE_DUR** (smooth-slice variation) — total typing duration for continuous typewriter.
+  - Range: `chars × 0.06s` (fast) to `chars × 0.12s` (relaxed)
+- **THINK_HOLD_DUR** (thinking-pause variation) — hold time between two SEQUENCE states.
+  - Range: 0.8-2.0s; under 0.5s reads as a stutter rather than thought
+- **COMPLETION_PULSE_SCALE / COMPLETION_PULSE_DUR** (pulse variation).
+  - Range: scale 1.03-1.08 (subtle), duration 0.15-0.30s
+
+### Cursor
+
+- **BLINK_CYCLES** — number of full blink cycles across `TOTAL_DURATION`.
+  - Range: `TOTAL_DURATION / 0.8s ≤ BLINK_CYCLES ≤ TOTAL_DURATION / 0.5s` (cycle every 0.5-0.8s reads as a natural cursor)
+
+### Color tokens
+
+- **{bgColor} / {textColor} / {accentColor} / {successColor} / {mutedColor}** — discrete choices, not numeric ranges. Pick from the composition's palette; the prompt + cursor share `{accentColor}` so they read as the same "system" element.
+
+## Key Principles
+
+- **Threshold sequence drives realism** — group fast successive keystrokes (0.1-0.2s apart), then pause on word breaks (0.3-0.5s), bulk-paste in single jumps (one entry replaces many chars), include a typo or two for human-typing feel
+- **Reverse-search the array each frame** — O(n) per frame, where n is small (≤30 typical). Don't try to index by frame; the sequence is sparse
+- **Fixed-width container is mandatory** — without `min-width`, the right edge of the text wrap jitters as state length changes. Set width ≥ longest expected state
+- **Cursor must be deterministic** — sin-based or sequence-driven blink, NOT a CSS animation. HF seeks frame-by-frame; CSS animations desync
+- **No `transition` on the text element** — discrete jumps should be INSTANT. A CSS transition turns the jump into a smear and ruins the "typing" feel
+- **❗ Distinguish discrete from smooth** — if your effect is "type each character, no edits" → use the smooth-slice variation. Discrete sequence is overkill for that case. Use discrete only when you need non-linear states (typos, pauses, bulk paste)
+
+## Critical Constraints
+
+- **Timeline must be paused**: `gsap.timeline({ paused: true })`
+- **Registry key = `data-composition-id`**
+- **No CSS `transition`** on the text or any of its parents
+- **Cursor `display: inline-block`** — `display: inline` ignores width/transform
+- **Monospace font** for terminal-style effects — proportional fonts cause visual jitter even with fixed-width container
+- **Whitespace: nowrap** on text wrap — wrapping mid-state breaks the illusion
+
+## Combinations
+
+- [3d-text-depth-layers.md](3d-text-depth-layers.md) — discrete text rendered with layered depth (heavy, dramatic)
+- [counting-dynamic-scale.md](counting-dynamic-scale.md) — discrete text for the LABEL while counter animates smoothly
+- [press-release-spring.md](press-release-spring.md) — after the sequence completes, the line "presses" like a button confirming success
+
+## Pairs with HF skills
+
+- `/hyperframes-animation` — onUpdate-driven discrete state lookup
+- `/hyperframes-core` — composition wiring
+- `/hyperframes-cli` — `hyperframes lint`
diff --git a/.claude/skills-media/hyperframes-animation/rules/dynamic-content-sequencing.md b/.claude/skills-media/hyperframes-animation/rules/dynamic-content-sequencing.md
new file mode 100644
index 000000000..14ab6ea7d
--- /dev/null
+++ b/.claude/skills-media/hyperframes-animation/rules/dynamic-content-sequencing.md
@@ -0,0 +1,307 @@
+---
+name: dynamic-content-sequencing
+description: Auto-calculate timeline start/end times from content length + per-item duration config — longer content gets more screen time without hardcoded numbers.
+metadata:
+  tags: timeline, sequencing, dynamic, duration, content-aware, utility
+---
+
+# Dynamic Content Sequencing
+
+A utility pattern (not a motion rule in itself) for scenes that show a SEQUENCE of items (cards, phrases, stats). Each item's duration is calculated from its content length + a per-item config; the sequencer assigns absolute start/end times automatically. Distinct from [discrete-text-sequence](discrete-text-sequence.md) (which is one text element changing states) — this rule swaps between distinct content blocks.
+
+## How It Works
+
+1. Define a content array — each entry has `{ text, speedFactor, hold }` (or arbitrary fields)
+2. Pre-compute absolute start times: `start[i] = sum of durations 0..i-1`
+3. In onUpdate, find which entry is active (last entry whose `start ≤ time`) and render it
+
+The "dynamic" part: items with longer text get more screen time (formula: `baseDuration + textLength * msPerChar`). No hardcoded `from` / `durationInFrames` per item.
+
+## HTML
+
+```html
+<div
+  class="scene"
+  id="seq-scene"
+  data-composition-id="seq-scene"
+  data-start="0"
+  data-duration="{DURATION}"
+  data-track-index="0"
+>
+  <div class="display">
+    <div class="eyebrow" id="eyebrow">{eyebrow}</div>
+    <div class="title" id="title"></div>
+    <div class="body" id="body"></div>
+    <div class="progress-bar"><div class="progress-fill" id="progress-fill"></div></div>
+  </div>
+  <div class="brand">— {Brand}</div>
+</div>
+```
+
+## CSS
+
+Placeholders: `{font}` is the project sans-serif stack; `{bgColor1}`/`{bgColor2}` make the dark backdrop gradient; `{accentColor}` highlights the eyebrow / brand / progress fill; `{textColor}` is the primary readable foreground.
+
+```css
+.scene {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  display: grid;
+  place-items: center;
+  background: radial-gradient(ellipse at center, {bgColor1} 0%, {bgColor2} 70%);
+  font-family: {font};
+}
+.display {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 32px;
+  text-align: center;
+  max-width: 1400px;
+}
+.eyebrow {
+  font-size: 32px;
+  font-weight: 800;
+  letter-spacing: 14px;
+  color: {accentColor};
+  text-transform: uppercase;
+}
+.title {
+  font-size: 120px;
+  font-weight: 900;
+  letter-spacing: -2px;
+  line-height: 1;
+  color: {textColor};
+}
+.body {
+  font-size: 48px;
+  font-weight: 500;
+  line-height: 1.4;
+  color: {accentColor};
+  opacity: 0.9;
+  min-height: 160px; /* reserve space so layout doesn't jump */
+}
+.progress-bar {
+  width: 600px;
+  height: 4px;
+  background: {accentColor}26; /* ~15% alpha */
+  border-radius: 2px;
+  margin-top: 16px;
+  overflow: hidden;
+}
+.progress-fill {
+  height: 100%;
+  background: linear-gradient(90deg, {accentColor} 0%, {accentColor2} 100%);
+  width: 0%;
+}
+.brand {
+  position: absolute;
+  bottom: 80px;
+  left: 50%;
+  transform: translateX(-50%);
+  font-size: 32px;
+  font-weight: 900;
+  letter-spacing: 12px;
+  color: {accentColor};
+}
+```
+
+## GSAP Timeline
+
+```html
+<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+<script>
+  window.__timelines = window.__timelines || {};
+  const tl = gsap.timeline({ paused: true });
+
+  // Content array — N entries, each with its own pacing config.
+  // Shape: short eyebrow label, short title, longer body sentence, plus per-entry pacing.
+  // The final entry typically uses a larger `hold` (closing beat).
+  const CONTENT = [
+    {
+      eyebrow: "{eyebrow1}",
+      title: "{title1}",
+      body: "{body1}",
+      speedFactor: SPEED_FACTOR,
+      hold: HOLD_MID,
+    },
+    {
+      eyebrow: "{eyebrow2}",
+      title: "{title2}",
+      body: "{body2}",
+      speedFactor: SPEED_FACTOR,
+      hold: HOLD_MID,
+    },
+    // …
+    {
+      eyebrow: "{eyebrowN}",
+      title: "{titleN}",
+      body: "{bodyN}",
+      speedFactor: SPEED_FACTOR,
+      hold: HOLD_FINAL,
+    },
+  ];
+
+  // Pre-compute absolute start times.
+  // Duration per entry: BASE_DURATION + body.length * SEC_PER_CHAR + entry.hold seconds.
+  // BASE_DURATION, SEC_PER_CHAR documented in How to Choose Values.
+  let cumulative = 0;
+  const TIMELINE = CONTENT.map((entry) => {
+    const dur = BASE_DURATION + entry.body.length * SEC_PER_CHAR + entry.hold;
+    const start = cumulative;
+    cumulative += dur;
+    return { ...entry, start, end: cumulative };
+  });
+
+  // Reverse-search current entry
+  function entryAt(time) {
+    for (let i = TIMELINE.length - 1; i >= 0; i--) {
+      if (time >= TIMELINE[i].start) return TIMELINE[i];
+    }
+    return TIMELINE[0];
+  }
+
+  const eyebrowEl = document.getElementById("eyebrow");
+  const titleEl = document.getElementById("title");
+  const bodyEl = document.getElementById("body");
+  const progressEl = document.getElementById("progress-fill");
+
+  const TOTAL_DURATION = cumulative + TAIL_PAD;
+  const driver = { t: 0 };
+  let lastTitle = "";
+
+  tl.to(
+    driver,
+    {
+      t: TOTAL_DURATION,
+      duration: TOTAL_DURATION,
+      ease: "none",
+      onUpdate: () => {
+        const entry = entryAt(driver.t);
+        // Only swap content on transitions (avoid per-frame DOM thrash)
+        if (entry.title !== lastTitle) {
+          eyebrowEl.textContent = entry.eyebrow;
+          titleEl.textContent = entry.title;
+          bodyEl.textContent = entry.body;
+          lastTitle = entry.title;
+        }
+        // Progress bar fills 0% → 100% as composition advances
+        progressEl.style.width = `${(driver.t / TOTAL_DURATION) * 100}%`;
+      },
+    },
+    0,
+  );
+
+  window.__timelines["seq-scene"] = tl;
+</script>
+```
+
+## Variations
+
+### Crossfade between items (not hard cut)
+
+Add `overlap` to the find function — return BOTH the previous and next entry during the overlap window, render with crossfade opacity:
+
+```js
+function activeEntries(time, overlap = 0.3) {
+  const result = [];
+  TIMELINE.forEach((e) => {
+    if (time >= e.start - overlap && time <= e.end + overlap) result.push(e);
+  });
+  return result;
+}
+```
+
+Then render the two adjacent entries with computed opacities based on distance from boundary.
+
+### Per-item motion variation
+
+Each entry has its own motion style. Map `entry.style` to one of the existing rules: chapter 1 uses [3d-text-depth-layers](3d-text-depth-layers.md), chapter 2 uses [hacker-flip-3d](hacker-flip-3d.md), chapter 3 uses [counting-dynamic-scale](counting-dynamic-scale.md). The sequencer just orchestrates timing; per-entry rendering uses the appropriate rule.
+
+### Auto-extend composition duration
+
+If you don't know upfront how long the sequence will be (dynamic content count), bind `data-duration` to the computed `TOTAL_DURATION`. Do this in script BEFORE the timeline registers:
+
+```js
+document
+  .querySelector("[data-composition-id]")
+  .setAttribute("data-duration", String(Math.ceil(TOTAL_DURATION)));
+```
+
+(Caveat: HF reads `data-duration` at composition load; setting after init may not take effect — author the duration manually based on a rough TOTAL calc.)
+
+## Key Principles
+
+- **Pre-compute timeline once, not per-frame** — building absolute start/end at script init means onUpdate is O(log n) reverse-search, not O(n²).
+- **Per-item duration formula: `BASE_DURATION + body.length × SEC_PER_CHAR + hold`** — longer text needs more reading time. The formula is the load-bearing teaching of this rule; ranges for each const are in How to Choose Values.
+- **Reserve `min-height` on body element** — content height varies per item; without reservation, layout jumps and downstream elements (progress bar, brand) jitter.
+- **DOM update on transition, not every frame** — track `lastTitle` (or whatever key) and only call `textContent =` when it changes. Per-frame textContent assignment causes flicker in HF render.
+- **Optional progress indicator** — a thin bar at the bottom showing 0-100% completes the "this is a sequence" framing.
+- **Climax dwell longer than mid-sequence dwell** — the outro's `hold` (HOLD_FINAL) should exceed the in-sequence `hold` (HOLD_MID) so the final brand/CTA lands.
+
+## How to Choose Values
+
+- **BASE_DURATION** — minimum visible time of an entry regardless of content length
+  - Range: 0.6-1.5 s
+  - Effects: low end snaps through short entries too fast for the eye; high end stalls on short titles
+  - Constraints: ensures even one-word entries have time to read
+  - Reference: see `../../examples/messaging-multi-phrase.html` (and any blueprint that uses this rule)
+
+- **SEC_PER_CHAR** — extra time added per body character
+  - Range: 0.03-0.06 s/char (≈ 17-33 chars/sec read pace for video)
+  - Effects: low end feels rushed for paragraph-style bodies; high end feels slow when bodies are short
+  - Constraints: should be uniform across the sequence so the pace reads as one engine; for languages with wider characters, lean to the high end
+  - Reference: see `../../examples/messaging-multi-phrase.html` (and any blueprint that uses this rule)
+
+- **HOLD_MID** — dwell after the typing of a non-final entry completes
+  - Range: 0.5-1.0 s
+  - Effects: low end feels rushed; high end feels lazy
+  - Constraints: `HOLD_MID < HOLD_FINAL`
+  - Reference: see `../../examples/messaging-multi-phrase.html` (and any blueprint that uses this rule)
+
+- **HOLD_FINAL** — dwell on the last entry (outro / climax)
+  - Range: 1.0-2.0 s
+  - Effects: low end truncates the closing beat; high end overstays
+  - Constraints: must exceed HOLD_MID by a clear margin so the close reads as a beat, not another mid-sequence pause
+  - Reference: see `../../examples/messaging-multi-phrase.html` (and any blueprint that uses this rule)
+
+- **SPEED_FACTOR** — per-entry pacing multiplier
+  - Range: 0.5-2.0 (default 1.0)
+  - Effects: <1 stretches an entry's body-driven duration (good for high-density passages); >1 compresses it
+  - Constraints: discrete choice — use 1.0 unless one entry needs special pacing; if every entry uses the same factor, fold it into SEC_PER_CHAR instead
+  - Reference: see `../../examples/messaging-multi-phrase.html` (and any blueprint that uses this rule)
+
+- **TAIL_PAD** — seconds added to `TOTAL_DURATION` after the last entry's `end`
+  - Range: 0.0-1.0 s
+  - Effects: 0 ends the driver exactly at the last `hold` completion; >0 leaves a quiet beat (useful before a transition to the next composition)
+  - Constraints: if downstream is another composition, prefer 0 and handle the breath at the composition seam
+  - Reference: see `../../examples/messaging-multi-phrase.html` (and any blueprint that uses this rule)
+
+- **CONTENT length (N)** — number of entries in the sequence
+  - Range: 3-6 entries
+  - Effects: <3 isn't a sequence (use a static scene); >6 drags
+  - Constraints: each entry's `title` must fit one line at the chosen `.title` fontSize; bodies should fit within `min-height` after wrapping
+  - Reference: see `../../examples/messaging-multi-phrase.html` (and any blueprint that uses this rule)
+
+## Critical Constraints
+
+- **Timeline must be paused**: `gsap.timeline({ paused: true })`
+- **Registry key = `data-composition-id`**
+- **Pre-compute the TIMELINE array** — don't recompute in onUpdate
+- **`min-height` on body** for layout stability
+- **DOM swap only on entry transition** — use lastTitle/lastKey guard
+- **Sequential only** — for parallel tracks, use a different reduction (this rule is sequential)
+
+## Combinations
+
+- [discrete-text-sequence.md](discrete-text-sequence.md) — per-entry typewriter on the body
+- [context-sensitive-cursor.md](context-sensitive-cursor.md) — cursor color per chapter segment
+- [vertical-spring-ticker.md](vertical-spring-ticker.md) — animated word transitions between items (instead of hard cut)
+- [scale-swap-transition.md](scale-swap-transition.md) — visual morph between entries
+
+## Pairs with HF skills
+
+- `/hyperframes-animation` — single driver, reverse-search dispatch
+- `/hyperframes-core` — composition wiring
+- `/hyperframes-cli` — `hyperframes lint`
diff --git a/.claude/skills-media/hyperframes-animation/rules/gsap-effects.md b/.claude/skills-media/hyperframes-animation/rules/gsap-effects.md
new file mode 100644
index 000000000..44b956649
--- /dev/null
+++ b/.claude/skills-media/hyperframes-animation/rules/gsap-effects.md
@@ -0,0 +1,299 @@
+# GSAP Effects for HyperFrames
+
+Drop-in animation patterns. Each effect is self-contained (HTML + CSS + JS) and follows the HyperFrames seek-driven contract — deterministic, no randomness, timeline registered on `window.__timelines`.
+
+## Index
+
+- [Typewriter](#typewriter) — character-by-character text reveal with optional cursor / backspace / word rotation
+- [Audio Visualizer](#audio-visualizer) — pre-extract audio data, drive Canvas/DOM rendering from the timeline
+
+---
+
+## Typewriter
+
+Reveal text character by character using GSAP's TextPlugin.
+
+### Required Plugin
+
+```html
+<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/TextPlugin.min.js"></script>
+<script>
+  gsap.registerPlugin(TextPlugin);
+</script>
+```
+
+### Basic Typewriter
+
+```js
+const text = "Hello, world!";
+const cps = 10; // chars per second: 3-5 dramatic, 8-12 conversational, 15-20 energetic
+tl.to(
+  "#typed-text",
+  { text: { value: text }, duration: text.length / cps, ease: "none" },
+  startTime,
+);
+```
+
+### With Blinking Cursor
+
+Three rules:
+
+1. **One cursor visible at a time** — hide previous before showing next.
+2. **Cursor must blink when idle** — after typing, during pauses.
+3. **No gap between text and cursor** — elements must be flush in HTML.
+
+```html
+<span id="typed-text"></span><span id="cursor" class="cursor-blink">|</span>
+```
+
+```css
+@keyframes blink {
+  0%,
+  100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0;
+  }
+}
+.cursor-blink {
+  animation: blink 0.8s step-end infinite;
+}
+.cursor-solid {
+  animation: none;
+  opacity: 1;
+}
+.cursor-hide {
+  animation: none;
+  opacity: 0;
+}
+```
+
+Pattern: blink → solid (typing starts) → type → solid → blink (typing done).
+
+```js
+tl.call(() => cursor.classList.replace("cursor-blink", "cursor-solid"), [], startTime);
+tl.to("#typed-text", { text: { value: text }, duration: dur, ease: "none" }, startTime);
+tl.call(() => cursor.classList.replace("cursor-solid", "cursor-blink"), [], startTime + dur);
+```
+
+### Backspacing
+
+TextPlugin removes from front — wrong for backspace. Use manual substring removal:
+
+```js
+function backspace(tl, selector, word, startTime, cps) {
+  const el = document.querySelector(selector);
+  const interval = 1 / cps;
+  for (let i = word.length - 1; i >= 0; i--) {
+    tl.call(
+      () => {
+        el.textContent = word.slice(0, i);
+      },
+      [],
+      startTime + (word.length - i) * interval,
+    );
+  }
+  return word.length * interval;
+}
+```
+
+### Spacing With Static Text
+
+When a typewriter word sits next to static text, use `margin-left` on a wrapper span. Don't use flex `gap` (it spaces the cursor from the text) and don't put a trailing space in the static text (it collapses when the dynamic span is empty).
+
+```html
+<div style="display:flex; align-items:baseline;">
+  <span style="font-size:40px; color:#555;">Ship something</span>
+  <span style="margin-left:14px;"><span id="word"></span><span id="cursor">|</span></span>
+</div>
+```
+
+### Word Rotation
+
+Type → hold → backspace → next word. Cursor blinks during every idle moment (holds, after backspace).
+
+```js
+let offset = 0;
+words.forEach((word, i) => {
+  const typeDur = word.length / 10;
+  tl.call(() => cursor.classList.replace("cursor-blink", "cursor-solid"), [], offset);
+  tl.to("#typed-text", { text: { value: word }, duration: typeDur, ease: "none" }, offset);
+  tl.call(() => cursor.classList.replace("cursor-solid", "cursor-blink"), [], offset + typeDur);
+  offset += typeDur + 1.5; // hold
+
+  if (i < words.length - 1) {
+    tl.call(() => cursor.classList.replace("cursor-blink", "cursor-solid"), [], offset);
+    const clearDur = backspace(tl, "#typed-text", word, offset, 20);
+    tl.call(() => cursor.classList.replace("cursor-solid", "cursor-blink"), [], offset + clearDur);
+    offset += clearDur + 0.3;
+  }
+});
+```
+
+### Appending Words
+
+Build a sentence word-by-word into the same element:
+
+```js
+let accumulated = "";
+let offset = 0;
+words.forEach((word) => {
+  const target = accumulated + (accumulated ? " " : "") + word;
+  const newChars = target.length - accumulated.length;
+  tl.to("#typed-text", { text: { value: target }, duration: newChars / 10, ease: "none" }, offset);
+  accumulated = target;
+  offset += newChars / 10 + 0.3;
+});
+```
+
+### Multi-Line Cursor Handoff
+
+Handing off between typewriter lines: hide previous → blink new → pause → solid when typing. Never go `hidden → solid` (skips the idle blink).
+
+```js
+tl.call(
+  () => {
+    prevCursor.classList.replace("cursor-blink", "cursor-hide");
+    nextCursor.classList.replace("cursor-hide", "cursor-blink");
+  },
+  [],
+  handoffTime,
+);
+
+const typeStart = handoffTime + 0.5; // brief blink pause
+tl.call(() => nextCursor.classList.replace("cursor-blink", "cursor-solid"), [], typeStart);
+tl.to("#next-text", { text: { value: text }, duration: dur, ease: "none" }, typeStart);
+tl.call(() => nextCursor.classList.replace("cursor-solid", "cursor-blink"), [], typeStart + dur);
+```
+
+### Timing Guide
+
+| CPS   | Feel             | Good for                   |
+| ----- | ---------------- | -------------------------- |
+| 3-5   | Slow, deliberate | Dramatic reveals, suspense |
+| 8-12  | Natural typing   | Dialogue, narration        |
+| 15-20 | Fast, energetic  | Tech demos, code           |
+| 30+   | Near-instant     | Filling long blocks        |
+
+---
+
+## Audio Visualizer
+
+Pre-extract audio data, drive Canvas / DOM rendering from a single `tl.call(...)` per frame. **Do not** use the Web Audio API at render time — there's no playback during seek.
+
+### Extract Audio Data
+
+Use the bundled extractor (requires `ffmpeg` and Python `numpy`):
+
+```bash
+python skills/hyperframes-creative/scripts/extract-audio-data.py audio.mp3 -o audio-data.json
+python skills/hyperframes-creative/scripts/extract-audio-data.py video.mp4 --fps 30 --bands 16 -o audio-data.json
+```
+
+### Data Format
+
+```json
+{
+  "fps": 30,
+  "totalFrames": 5415,
+  "frames": [{ "time": 0.0, "rms": 0.42, "bands": [0.8, 0.6, 0.3] }]
+}
+```
+
+- **`rms`** (0-1) — overall loudness, normalized across the track.
+- **`bands[]`** (0-1) — frequency magnitudes. Index 0 = bass, higher index = treble. Each band normalized independently.
+
+### Loading the Data (Synchronously)
+
+```js
+// Option A — inline (small files, under ~500 KB)
+var AUDIO_DATA = {
+  /* paste audio-data.json contents */
+};
+
+// Option B — sync XHR (large files; must be synchronous for deterministic timeline construction)
+var xhr = new XMLHttpRequest();
+xhr.open("GET", "audio-data.json", false);
+xhr.send();
+var AUDIO_DATA = JSON.parse(xhr.responseText);
+```
+
+**Do NOT use async `fetch()`.** HyperFrames reads `window.__timelines` synchronously after page load — building the timeline inside `.then()` means the timeline isn't ready when capture starts.
+
+### Driving the Timeline
+
+**Canvas 2D** — most common (bars, waveforms, circles, gradients):
+
+```js
+const canvas = document.getElementById("viz");
+const ctx = canvas.getContext("2d");
+
+for (let f = 0; f < AUDIO_DATA.totalFrames; f++) {
+  tl.call(
+    () => {
+      const frame = AUDIO_DATA.frames[f];
+      ctx.clearRect(0, 0, canvas.width, canvas.height);
+      // draw using frame.rms and frame.bands
+    },
+    [],
+    f / AUDIO_DATA.fps,
+  );
+}
+```
+
+**WebGL / Three.js** — HyperFrames patches `THREE.Clock` for deterministic time. Update uniforms from audio data each frame.
+
+**DOM elements** — fine for fewer than ~20 elements, slower than Canvas for many.
+
+### Smoothing
+
+```js
+let prev = null;
+const smoothing = 0.25; // 0.1-0.2 snappy, 0.3-0.5 flowing
+function smooth(f) {
+  const raw = AUDIO_DATA.frames[f];
+  if (!prev) {
+    prev = { rms: raw.rms, bands: [...raw.bands] };
+    return prev;
+  }
+  prev = {
+    rms: prev.rms * smoothing + raw.rms * (1 - smoothing),
+    bands: raw.bands.map((b, i) => prev.bands[i] * smoothing + b * (1 - smoothing)),
+  };
+  return prev;
+}
+```
+
+### Spatial Mapping
+
+- **Horizontal**: bass left, treble right (iterate bands left-to-right)
+- **Vertical**: bass bottom, treble top
+- **Circular**: bass at 12 o'clock, wrap clockwise; mirror for a full circle
+
+### Motion Principles
+
+- **Bass drives big moves** — scale, glow, position shifts.
+- **Treble drives detail** — shimmer, flicker, edge effects.
+- **RMS drives globals** — background brightness, overall energy.
+- Pick 2-3 properties to animate. More looks noisy.
+- Keep minimums above zero — quiet sections still need life.
+
+### Band Count
+
+| Bands | Detail    | Good for                   |
+| ----- | --------- | -------------------------- |
+| 4     | Low       | Background glow, pulsing   |
+| 8     | Medium    | Bar charts, basic spectrum |
+| 16    | High      | Detailed EQ (default)      |
+| 32    | Very high | Dense radial layouts       |
+
+### Layering
+
+Layer multiple canvases with CSS `z-index` for depth — a background layer driven by bass/rms and a foreground layer driven by individual bands creates depth without per-element complexity.
+
+```html
+<canvas id="bg-layer" style="position:absolute;top:0;left:0;z-index:1;"></canvas>
+<canvas id="main-layer" style="position:absolute;top:0;left:0;z-index:2;"></canvas>
+```
diff --git a/.claude/skills-media/hyperframes-animation/rules/hacker-flip-3d.md b/.claude/skills-media/hyperframes-animation/rules/hacker-flip-3d.md
new file mode 100644
index 000000000..f831dce92
--- /dev/null
+++ b/.claude/skills-media/hyperframes-animation/rules/hacker-flip-3d.md
@@ -0,0 +1,223 @@
+---
+name: hacker-flip-3d
+description: Character-level 3D rotation with random glyph substitution for a decryption reveal effect.
+metadata:
+  tags: text, 3d, reveal, decode, hacker, randomization, perspective
+---
+
+# Hacker Flip 3D Reveal
+
+Characters flip down from 90° in 3D while cycling through random glyphs, then settle on the target character. Creates a "decryption" or airport flap-display reveal.
+
+## How It Works
+
+Each character gets its own per-char tween from `rotateX: 90deg` (hidden) to `rotateX: 0deg` (revealed), staggered across the word. During the flip:
+
+1. **Phase A (0 → ~`REVEAL_THRESHOLD` progress)**: character displays a randomly-substituted glyph that flickers (changes every `FLICKER_RATE` frames)
+2. **Phase B (`REVEAL_THRESHOLD` → 1.0 progress)**: character displays the REAL target character, settling into its final upright position
+
+The `REVEAL_THRESHOLD` separates "scrambled" from "revealed" — by the time the flip is mostly done, viewer sees the correct letter clicking into place.
+
+## HTML
+
+```html
+<div
+  class="scene"
+  id="hacker-flip-scene"
+  data-composition-id="hacker-flip-scene"
+  data-start="0"
+  data-duration="3"
+  data-track-index="0"
+>
+  <div class="hacker-text-wrap" id="hacker-text" data-target="{phrase}">
+    <!-- Per-char spans get injected by setup script below.
+         Ghost placeholder (data-ghost) is rendered identically to reserve width. -->
+  </div>
+</div>
+```
+
+`{phrase}` is the target word the flip resolves to (typically a brand or short label).
+
+## CSS
+
+```css
+.scene {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  display: grid;
+  place-items: center;
+  background: {bgColor};
+  perspective: 1500px; /* REQUIRED — without this rotateX renders flat */
+}
+
+.hacker-text-wrap {
+  font-family: {monoFont};      /* monospace recommended so flicker glyphs hold width */
+  font-weight: 900;
+  font-size: HACKER_FONT_SIZE;
+  color: {textColor};
+  letter-spacing: 4px;
+  display: flex;
+  /* Ghost / live chars are absolutely stacked; container reserves layout width */
+  position: relative;
+}
+
+.hacker-char {
+  display: inline-block;
+  /* Hinge at the bottom edge — flap-display look */
+  transform-origin: bottom;
+  transform-style: preserve-3d;
+  /* Will-change improves render perf */
+  will-change: transform, opacity;
+}
+
+/* Ghost placeholder is hidden but reserves width for variable-glyph fonts.
+   Without this, narrow target glyphs collapse width when displayed and
+   characters shift horizontally during flicker. */
+.hacker-ghost {
+  opacity: 0;
+  pointer-events: none;
+}
+```
+
+## GSAP Timeline + Random Glyph Logic
+
+```html
+<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+<script>
+  window.__timelines = window.__timelines || {};
+
+  const wrap = document.getElementById("hacker-text");
+  const targetWord = wrap.dataset.target;
+  const GLYPHS = "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789!@#$%&*";
+
+  // Build live chars + ghost placeholders (ghost keeps layout width stable)
+  wrap.innerHTML = "";
+  const ghostRow = document.createElement("div");
+  ghostRow.className = "hacker-ghost";
+  ghostRow.style.display = "inline-flex";
+  ghostRow.style.position = "absolute";
+  ghostRow.style.left = "0";
+  ghostRow.style.top = "0";
+  ghostRow.textContent = targetWord;
+  wrap.appendChild(ghostRow);
+
+  const charEls = [];
+  const liveRow = document.createElement("div");
+  liveRow.style.display = "inline-flex";
+  liveRow.style.position = "relative";
+  for (const ch of targetWord) {
+    const span = document.createElement("span");
+    span.className = "hacker-char";
+    span.textContent = ch === " " ? " " : ch;
+    span.dataset.target = ch;
+    liveRow.appendChild(span);
+    charEls.push(span);
+  }
+  wrap.appendChild(liveRow);
+
+  // Deterministic "random" — seeded by char index + frame group so the same
+  // frame always yields the same glyph (HF seek determinism).
+  function pseudoGlyph(seed) {
+    const h = ((seed * 9301 + 49297) % 233280) / 233280;
+    return GLYPHS[Math.floor(h * GLYPHS.length)];
+  }
+
+  const tl = gsap.timeline({ paused: true });
+
+  // Per-char flip — stagger across the word
+  charEls.forEach((el, i) => {
+    const state = { p: 0 };
+    tl.to(
+      state,
+      {
+        p: 1,
+        duration: FLIP_DURATION,
+        ease: "power3.out",
+        onUpdate: () => {
+          // Phase A: random glyph flickering. Phase B: real character.
+          const progress = state.p;
+          if (progress < REVEAL_THRESHOLD) {
+            // Update glyph every FLICKER_RATE worth of progress
+            const flickerSeed = i * 1000 + Math.floor(progress * 100);
+            el.textContent = pseudoGlyph(flickerSeed);
+          } else {
+            el.textContent = el.dataset.target === " " ? " " : el.dataset.target;
+          }
+          // Flip rotateX from 90 (down) to 0 (upright)
+          const rotateX = 90 - progress * 90;
+          const opacity = Math.min(1, progress * 2);
+          el.style.transform = `rotateX(${rotateX}deg)`;
+          el.style.opacity = opacity;
+        },
+      },
+      i * CHAR_STAGGER,
+    );
+  });
+
+  window.__timelines["hacker-flip-scene"] = tl;
+</script>
+```
+
+## How to Choose Values
+
+- **HACKER_FONT_SIZE** — font-size of the flip text in px.
+  - Range: 6-10% of viewport min-dimension; the flip text is the focal beat, scale accordingly
+  - Constraints: ghost row must use the identical size so layout width stays stable mid-flicker
+  - Reference: ../../examples/proof-logo-chain.html uses `163px` at 1920×1080
+- **FLIP_DURATION** — per-character flip tween duration.
+  - Range: 0.4-1.0s; under 0.4s the random-glyph phase has no time to flicker, over 1.0s drags
+  - Effects: shorter feels snappy and modern; longer feels mechanical / typewriter
+  - Reference: ../../examples/proof-logo-chain.html uses `0.55s`
+- **CHAR_STAGGER** — delay between consecutive characters starting their flips, in seconds.
+  - Range: 0.03-0.08s; too fast and chars overlap visually, too slow and the effect feels labored
+  - Constraints: total decode time = `CHAR_STAGGER × (charCount − 1) + FLIP_DURATION`; ensure this fits the phase budget
+  - Reference: ../../examples/proof-logo-chain.html uses `0.033s` (≈2 frames at 60fps)
+- **REVEAL_THRESHOLD** — progress at which a glyph swaps from random → real.
+  - Range: 0.5-0.7; lower reveals too early (no decode tension), higher feels like a hard reveal at the end
+  - Effects: this is a discrete tuning of when the eye locks onto the real letter
+  - Reference: ../../examples/proof-logo-chain.html uses `0.6`
+- **FLICKER_RATE** — frames between glyph reshuffles during the random phase.
+  - Range: 3-6; lower than 3 looks like noise, higher than 6 looks like discrete typing instead of flicker
+  - Constraints: must be ≥ ~3 frames (see Critical Constraints)
+  - Reference: ../../examples/proof-logo-chain.html uses an equivalent of `3` (one shuffle every 3 internal-clock frames)
+- **{bgColor} / {textColor}** — stage background and live-character color tokens.
+- **{monoFont}** — monospace family preferred so flicker glyphs don't change width per swap; if a proportional font is required, the ghost placeholder makes the cost recoverable.
+- **{phrase}** — the target word the flip resolves to. Length feeds the total decode duration via `CHAR_STAGGER`.
+
+## Variations
+
+- **Top-down hinge** — swap `transform-origin: bottom` to `top` for a falling-flap look.
+- **Center spin** — `transform-origin: center` reads as a barrel roll, not a flap.
+- **Number-only pool** — restrict `GLYPHS` to digits for a price / countdown decode.
+- **Two-pass decode** — chain two `FLIP_DURATION` tweens with different glyph pools (e.g. symbols → letters → real) for a longer reveal.
+
+## Key Principles
+
+- **Threshold at ~`REVEAL_THRESHOLD`** for swap from random → real glyph — close enough to settled that viewer's eye catches the right letter
+- **Hinge at `transform-origin: bottom`** for flap-display look (vs `top` for top-down, vs `center` for spin)
+- **Deterministic random** via seeded hash — HF runtime seeks frame-by-frame, so the same frame must show the same glyph (no `Math.random()`)
+- **Ghost placeholder** sits behind the live chars with identical content + same font, reserving width — without it, narrow glyphs shift the layout mid-flicker
+- **Stagger in the 0.04-0.08s range** per char — too fast and chars overlap visually, too slow and effect feels labored
+- **Center the flip dead-center via `display: grid; place-items: center;`** on the scene root — and DO NOT add decorative headers/footers (timestamp lines, "// AUTH" tags, small status dots). The flip text IS the focal beat; surrounding clutter dilutes it. If a secondary label is necessary, promote it to BIG typography in the same stacked layout (56-72px caps + tracking), not a tiny corner annotation.
+
+## Critical Constraints
+
+- **`perspective` on scene root REQUIRED** — without parent perspective, `rotateX` looks like a 2D scale, not a 3D flip
+- **`transform-style: preserve-3d` on each char** — keeps 3D context intact when chars have their own transforms
+- **Timeline must be paused**: `gsap.timeline({ paused: true })`
+- **Registry key = `data-composition-id`**
+- **Deterministic randomness**: don't use `Math.random()`. Use a seed derived from char index + frame group so seek determinism holds
+- **`onUpdate` writes to DOM**: HF seeks every frame, so this runs many times — keep work O(1) per char per frame
+- **Flicker rate ≥ ~3 frames per glyph swap**: faster looks like noise, slower looks like discrete typing
+
+## Combinations
+
+- [card-morph-anchor.md](card-morph-anchor.md) — pair: hacker-flip reveals a phrase, then card morphs into the next shot
+- [counting-dynamic-scale.md](counting-dynamic-scale.md) — counterpart for numeric reveals (text vs number)
+
+## Pairs with HF skills
+
+- `/hyperframes-animation` — timeline + per-char stagger + `onUpdate`
+- `/hyperframes-core` — composition wiring
+- `/hyperframes-cli` — `hyperframes lint`
diff --git a/.claude/skills-media/hyperframes-animation/rules/kinetic-beat-slam.md b/.claude/skills-media/hyperframes-animation/rules/kinetic-beat-slam.md
new file mode 100644
index 000000000..5ada2370a
--- /dev/null
+++ b/.claude/skills-media/hyperframes-animation/rules/kinetic-beat-slam.md
@@ -0,0 +1,183 @@
+---
+name: kinetic-beat-slam
+description: Percussive kinetic typography — short phrases slam in on a steady beat with distinct per-phrase entrances, optional rhythm chrome (metronome ticks, beat bar), then a locked finale.
+metadata:
+  tags: text, kinetic, typography, beat, rhythm, slam, percussive, punchy
+---
+
+# Kinetic Beat Slam
+
+Short phrases hit one at a time on a **steady beat**, each with a _different_ entrance, then stack into a locked finale. This is the recipe for "punchy / rhythmic" text-forward pieces (taglines, manifestos, hype intros). The difference between generic and rhythmic is (1) one shared **onset array** driving every element, (2) **distinct** entrances per phrase rather than one reused helper, and (3) optional **rhythm chrome** that visibly keeps the beat.
+
+## How It Works
+
+1. **Define the beat once.** A single `BEATS = [t0, t1, t2, …]` array (seconds) is the rhythmic spine. Every phrase entrance, accent, and chrome tick reads its time from this array — so the whole piece locks to one pulse instead of drifting hand-tuned offsets.
+2. **Vary the entrances.** Phrase 1 slams (scale + blur), phrase 2 snaps from the side, phrase 3 rises and rotates. Same _energy_, different _form_ — reusing one `punchIn()` for all three reads as flat.
+3. **Land a finale.** All phrases lock into a left-aligned or centered stack; an accent underline sweeps in; optionally a continuous low-amplitude pulse holds the last beat.
+
+## Beat & Easing
+
+Pick the entrance easing by attack character (the choice is discrete):
+
+| GSAP ease     | Attack feel                                 |
+| ------------- | ------------------------------------------- |
+| `power4.out`  | Hard slam, fast settle ⭐ default for a hit |
+| `expo.out`    | Hardest snap (side-snaps, whip-ins)         |
+| `back.out(2)` | Overshoot pop — accents, not body words     |
+| `circ.out`    | Heavy rise with momentum                    |
+
+Use **at least 3 distinct easings** across the piece (entrances are its "tone of voice"). Keep durations short — 0.35–0.6s on the hit, ≤0.25s on the exit — so the beat stays percussive.
+
+## HTML
+
+```html
+<section class="clip" data-start="0" data-duration="15" data-track-index="1">
+  <div class="kbs-stage">
+    <div class="kbs-line" id="p1"><span class="verb">Notice</span> more.</div>
+    <div class="kbs-line" id="p2"><span class="verb">Decide</span> faster.</div>
+    <div class="kbs-line" id="p3"><span class="verb">Act</span> now.</div>
+  </div>
+  <!-- optional rhythm chrome -->
+  <div class="kbs-metronome" aria-hidden="true"><i></i><i></i><i></i><i></i><i></i></div>
+</section>
+```
+
+## CSS
+
+```css
+.kbs-stage {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  gap: 8px;
+  padding: 120px 160px; /* title-safe margin */
+  box-sizing: border-box;
+}
+.kbs-line {
+  font-family: "Archivo Black", "League Gothic", sans-serif; /* embedded display face */
+  font-size: 150px;
+  line-height: 0.96;
+  letter-spacing: -0.03em;
+  color: #f5f5f5;
+  will-change: transform, filter, opacity;
+}
+.kbs-line .verb {
+  color: #ff5b2e;
+} /* one accent hue */
+.kbs-metronome {
+  position: absolute;
+  bottom: 64px;
+  left: 50%;
+  transform: translateX(-50%);
+  display: flex;
+  gap: 14px;
+}
+.kbs-metronome i {
+  width: 6px;
+  height: 28px;
+  background: #ff5b2e;
+  opacity: 0.25;
+}
+```
+
+## GSAP Timeline
+
+```html
+<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+<script>
+  window.__timelines = window.__timelines || {};
+  const tl = gsap.timeline({ paused: true });
+
+  // ONE tempo grid drives everything — phrases AND the metronome read it (no scattered offsets).
+  const PULSE = 0.4; // seconds per sub-beat (the grid)
+  const BEATS = [PULSE * 1, PULSE * 5, PULSE * 9]; // phrase onsets, on the grid
+
+  // Distinct entrances per phrase (NOT one reused helper).
+  tl.fromTo(
+    "#p1",
+    { scale: 1.5, filter: "blur(16px)", opacity: 0 },
+    { scale: 1, filter: "blur(0px)", opacity: 1, duration: 0.5, ease: "power4.out" },
+    BEATS[0],
+  );
+  tl.fromTo(
+    "#p2",
+    { x: -320, opacity: 0 },
+    { x: 0, opacity: 1, duration: 0.45, ease: "expo.out" },
+    BEATS[1],
+  );
+  tl.fromTo(
+    "#p3",
+    { y: 90, rotation: 6, opacity: 0 },
+    { y: 0, rotation: 0, opacity: 1, duration: 0.55, ease: "circ.out" },
+    BEATS[2],
+  );
+
+  // Rhythm chrome: each metronome tick flashes on the SAME grid (PULSE), not a magic offset.
+  const ticks = gsap.utils.toArray(".kbs-metronome i");
+  ticks.forEach((tick, i) => {
+    tl.to(
+      tick,
+      { opacity: 1, duration: 0.08, yoyo: true, repeat: 1, ease: "none" },
+      PULSE * (i + 1),
+    );
+  });
+
+  // Finale hold: a low-amplitude breath on the locked stack.
+  // floor (not ceil) so the repeat never overshoots data-duration; max(0,…) so a short hold
+  // never yields a negative repeat (GSAP treats negative repeat as -1 = infinite = non-deterministic).
+  const holdStart = BEATS[2] + 0.7,
+    cycle = 1.6,
+    holdDur = 15 - holdStart;
+  tl.to(
+    ".kbs-stage",
+    {
+      scale: 1.01,
+      duration: cycle / 2,
+      ease: "sine.inOut",
+      yoyo: true,
+      repeat: Math.max(0, Math.floor(holdDur / cycle) - 1),
+    },
+    holdStart,
+  );
+
+  window.__timelines["main"] = tl;
+</script>
+```
+
+## How to Choose Values
+
+- **BEATS spacing** — 1.2–1.8s between hits reads as a confident beat; <0.8s feels frantic, >2.5s loses the pulse. Keep spacing even (it's a _beat_).
+- **Entrance duration** — 0.35–0.6s. The hit must resolve before the next beat.
+- **Distinct entrances** — assign a different transform axis per phrase (scale / x / y+rotate). Reuse the _ease family_, vary the _motion_.
+- **Accent hue** — exactly one (the verbs). The rest is mono white/near-black.
+- **Rhythm chrome** — optional but high-impact for "rhythmic": a 5-tick metronome, a center beat bar, or a `// label` monospace tag pulsing on-beat. Mark any decorative that must survive a shader transition per `../../transitions/overview.md` rules.
+
+## Key Principles
+
+- **One beat array, not scattered offsets** — every element times off `BEATS[]`. This is the single biggest lever for "rhythmic."
+- **Different entrance per phrase** — a reused `punchIn()` for all lines is the flat-but-competent tell.
+- **Short attacks** — percussive means fast in, brief, decisive. Long fades kill the beat.
+- **One accent hue, heavy weight** — embedded display faces (Archivo Black, League Gothic, Oswald) at 150px+; see `hyperframes-creative/references/typography.md`.
+- **Finale earns the hold** — stack + underline sweep + optional breath; don't just leave the last phrase sitting.
+
+## Critical Constraints
+
+- **Timeline paused**: `gsap.timeline({ paused: true })`. Never `tl.play()`.
+- **No infinite repeats** on the hold/chrome — use `repeat: Math.max(0, Math.floor(dur / cycle) - 1)` (no `repeat: -1`). Use **`Math.floor`, not `Math.ceil`** — `ceil` overshoots `data-duration` and trips the `gsap_repeat_ceil_overshoot` lint rule; the `Math.max(0, …)` guards against a negative repeat (which GSAP reads as `-1` = infinite = non-deterministic) when the hold is shorter than two cycles.
+- **No banned exit animations** between scenes — if this is one of several scenes, the _transition_ is the exit (see `../../transitions/overview.md`); only a final scene may fade out.
+- **Display font must be embedded** or it silently falls back at render (Anton/Bebas-as-literal are NOT embedded — `Bebas Neue` aliases to League Gothic; verify in `typography.md`).
+- **Registry key = `data-composition-id`** on the root.
+
+## Combinations
+
+- [3d-text-depth-layers.md](3d-text-depth-layers.md) — extruded depth on the slammed words
+- [css-marker-patterns.md](css-marker-patterns.md) — underline sweep / circle on the finale
+- [sine-wave-loop.md](sine-wave-loop.md) — the finale breath/pulse
+
+## Pairs with HF skills
+
+- `/hyperframes-animation` — timeline + easing vocabulary (`../../adapters/gsap-easing-and-stagger.md`)
+- `/hyperframes-creative` — `references/video-composition.md` (foreground rhythm chrome), `references/typography.md` (embedded display fonts)
+- `/hyperframes-core` — composition wiring, determinism (finite repeats)
diff --git a/.claude/skills-media/hyperframes-animation/rules/motion-blur-streak.md b/.claude/skills-media/hyperframes-animation/rules/motion-blur-streak.md
new file mode 100644
index 000000000..438437a9c
--- /dev/null
+++ b/.claude/skills-media/hyperframes-animation/rules/motion-blur-streak.md
@@ -0,0 +1,328 @@
+---
+name: motion-blur-streak
+description: Fake directional velocity blur on a fast entrance or camera push-through — blur peaks at max speed and resolves to 0 at the settle, so the element streaks in then snaps sharp. Two paths — SVG feGaussianBlur on the motion axis, or an echo/ghost trail that collapses into the lead.
+metadata:
+  tags: motion-blur, velocity, streak, entrance, fly-in, ghost, echo, svg-filter, kinetic, camera, snap
+---
+
+# Motion-Blur Streak
+
+Real per-frame motion blur isn't available to a seeked renderer (it integrates over shutter time, which a paused timeline has no concept of), so this rule **fakes** it for a fast element fly-in or a hard camera push-through. The blur **peaks at maximum velocity and resolves to 0 at the settle** — the element reads as streaking in then snapping sharp on arrival. The whole point is the _coupling_: the blur envelope rides the same ease and window as the position tween, so peak-blur lands exactly on peak-speed, and the element is razor-sharp the instant it stops.
+
+Two implementation paths, both finite, deterministic, and seek-safe:
+
+- **(A) Directional SVG blur** — an inline `<filter>` with `<feGaussianBlur stdDeviation="X 0">` (X on the axis of motion, 0 across it). GSAP tweens `X` from high → 0 through a proxy that calls `setAttribute` each frame. Cleanest, one element, true directional smear.
+- **(B) Echo / ghost trail** — 2–4 duplicate copies at decreasing opacity, offset backward along the motion vector, collapsing into the lead element as it settles. No filter cost; reads as a "speed-line" stutter trail. Better when you want the streak _colored_ or _stylized_ rather than a literal optical blur.
+
+This is for **entrances and mid-shot moves only** — a fast arrival, a beat that zooms past camera, a card slamming into a grid slot, a logo punching through into a lockup. **Never an exit on a non-final frame** (a blurred element fleeing off-frame mid-composition reads as a glitch, and a hard exit between scenes is the transition's job, not a per-element blur).
+
+## How It Works
+
+A fast move has a velocity profile: it accelerates off the start, peaks, then decelerates into the settle. An `out` ease (`expo.out`, `power4.out`) front-loads that — velocity is highest right at the start and bleeds to zero at the end. The fake works by mapping a **blur (or echo) envelope onto that same curve**:
+
+1. **Position tween** — the element travels from an off-frame / pushed-back start to its resting transform (`x`/`y` for a fly-in, `scale` for a push-through) on a fast `out` ease over `MOVE_DUR`.
+2. **Blur envelope** — in lockstep over the **same window and ease**, the smear goes from `PEAK_BLUR` → `0`. Because the ease front-loads velocity and the envelope shares it, max blur coincides with max speed, and blur hits exactly `0` as the element lands.
+3. **Settle is sharp** — by `MOVE_START + MOVE_DUR` the element is at its resting transform with blur `0` (path A) or all echoes collapsed onto the lead (path B). It then holds, fully crisp, for the climax dwell.
+
+Path A tweens the filter's `stdDeviation` attribute (a non-DOM-style numeric attribute) via a **proxy object** — GSAP can't tween an SVG attribute directly, so you tween a plain `{ v: PEAK_BLUR }` and write it back with `setAttribute` in `onUpdate`. Path B places the ghosts at deterministic backward offsets (`i * ECHO_STEP_PX`) and fades/collapses them on the same envelope.
+
+## HTML
+
+### Path A — directional SVG blur (recommended default)
+
+```html
+<div
+  class="scene"
+  id="streak-scene"
+  data-composition-id="streak-scene"
+  data-start="0"
+  data-duration="DURATION"
+  data-track-index="0"
+>
+  <!-- Inline filter: blur on the X axis only (stdDeviation="X 0"); 0 on Y keeps it a clean horizontal smear. -->
+  <svg width="0" height="0" aria-hidden="true" style="position: absolute">
+    <defs>
+      <filter id="streak" x="-50%" y="-50%" width="200%" height="200%">
+        <feGaussianBlur id="streak-blur" in="SourceGraphic" stdDeviation="0 0" />
+      </filter>
+    </defs>
+  </svg>
+
+  <div class="streak-stage">
+    <div class="streak-el" id="streak-el">{phrase}</div>
+  </div>
+</div>
+```
+
+### Path B — echo / ghost trail
+
+```html
+<div
+  class="scene"
+  id="streak-scene"
+  data-composition-id="streak-scene"
+  data-start="0"
+  data-duration="DURATION"
+  data-track-index="0"
+>
+  <div class="streak-stage">
+    <!-- N-1 ghosts BEHIND the lead, then the lead on top. Ghosts are aria-hidden duplicates. -->
+    <div class="streak-ghost" data-i="3" aria-hidden="true">{phrase}</div>
+    <div class="streak-ghost" data-i="2" aria-hidden="true">{phrase}</div>
+    <div class="streak-ghost" data-i="1" aria-hidden="true">{phrase}</div>
+    <div class="streak-el" id="streak-el">{phrase}</div>
+  </div>
+</div>
+```
+
+## CSS
+
+```css
+.scene {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  display: grid;
+  place-items: center;
+  background: {sceneBg};
+  font-family: {font};
+  overflow: hidden; /* the smear/echo extends past the resting position before settling */
+}
+.streak-stage {
+  position: relative;
+  display: grid;
+  place-items: center;
+}
+.streak-el {
+  position: relative;
+  z-index: 2;
+  font-size: EL_FONT_SIZE;
+  font-weight: 900;
+  letter-spacing: EL_TRACKING;
+  color: {textColor};
+  /* Path A only — reference the directional filter. (Omit for Path B.) */
+  filter: url(#streak);
+  will-change: transform, filter;
+}
+
+/* Path B ghosts — identical glyphs behind the lead, decreasing opacity */
+.streak-ghost {
+  position: absolute;
+  inset: 0;
+  display: grid;
+  place-items: center;
+  z-index: 1;
+  font-size: EL_FONT_SIZE;
+  font-weight: 900;
+  letter-spacing: EL_TRACKING;
+  color: {textColor};
+  opacity: 0;
+  will-change: transform, opacity;
+  pointer-events: none;
+}
+```
+
+## GSAP Timeline
+
+### Path A — directional SVG blur
+
+```html
+<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+<script>
+  window.__timelines = window.__timelines || {};
+  const tl = gsap.timeline({ paused: true });
+
+  // GSAP can't tween an SVG attribute directly — tween a proxy and write it back each frame.
+  const blurNode = document.getElementById("streak-blur");
+  const blurProxy = { v: PEAK_BLUR };
+  const writeBlur = () => blurNode.setAttribute("stdDeviation", `${blurProxy.v} 0`); // X-axis only
+  writeBlur(); // seed frame 0 so a seek to t=0 shows the streaked start, not a sharp pre-frame
+
+  // Position: travel from off-frame to rest on a fast `out` ease (velocity front-loaded).
+  tl.fromTo(
+    "#streak-el",
+    { x: ENTER_FROM_X, opacity: 0 },
+    { x: 0, opacity: 1, duration: MOVE_DUR, ease: MOVE_EASE },
+    MOVE_START,
+  );
+
+  // Blur envelope: SAME window + SAME ease so peak-blur == peak-speed, resolving to 0 at the settle.
+  tl.to(blurProxy, { v: 0, duration: MOVE_DUR, ease: MOVE_EASE, onUpdate: writeBlur }, MOVE_START);
+
+  window.__timelines["streak-scene"] = tl;
+</script>
+```
+
+### Path B — echo / ghost trail
+
+```html
+<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+<script>
+  window.__timelines = window.__timelines || {};
+  const tl = gsap.timeline({ paused: true });
+
+  // Lead element: same fast `out` move as Path A.
+  tl.fromTo(
+    "#streak-el",
+    { x: ENTER_FROM_X, opacity: 0 },
+    { x: 0, opacity: 1, duration: MOVE_DUR, ease: MOVE_EASE },
+    MOVE_START,
+  );
+
+  // Ghosts: each starts FURTHER back along the motion vector (deterministic, by index),
+  // dimmer, and collapses onto the lead — all on the SAME ease/window so they vanish at the settle.
+  const ghosts = gsap.utils.toArray(".streak-ghost");
+  ghosts.forEach((g) => {
+    const i = Number(g.dataset.i); // 1..N-1, set in HTML (no Math.random)
+    tl.fromTo(
+      g,
+      { x: ENTER_FROM_X - i * ECHO_STEP_PX, opacity: GHOST_BASE_OPACITY / i },
+      { x: 0, opacity: 0, duration: MOVE_DUR, ease: MOVE_EASE },
+      MOVE_START,
+    );
+  });
+
+  window.__timelines["streak-scene"] = tl;
+</script>
+```
+
+## Variations
+
+### Vertical streak (rise / drop-in)
+
+Swap the motion axis: use `y` instead of `x` for the position tween, `stdDeviation="0 Y"` for Path A (blur on Y, 0 on X), and `ENTER_FROM_Y` / vertical echo offsets for Path B. A phrase that streaks _up_ into place pairs with `kinetic-type-beats`' rise-rotate beat.
+
+### Camera push-through (scale streak into a lockup)
+
+Instead of translating, the element rushes the camera: `scale: SCALE_FROM → 1` on the fast `out` ease, with a **radial / zoom blur** feel approximated by a symmetric `stdDeviation="B B"` envelope (blur on both axes since the smear is depth-wise, not directional). This is the `logo-assemble-lockup` push-through — the wordmark punches forward out of soft focus and snaps crisp at the lock.
+
+```js
+tl.fromTo(
+  "#streak-el",
+  { scale: SCALE_FROM, opacity: 0 },
+  { scale: 1, opacity: 1, duration: MOVE_DUR, ease: MOVE_EASE },
+  MOVE_START,
+);
+tl.to(
+  blurProxy,
+  {
+    v: 0,
+    duration: MOVE_DUR,
+    ease: MOVE_EASE,
+    onUpdate: () => blurNode.setAttribute("stdDeviation", `${blurProxy.v} ${blurProxy.v}`),
+  },
+  MOVE_START,
+);
+```
+
+### Staggered grid streak-in (cards assemble)
+
+For `grid-card-assemble`: each card streaks into its slot from its own backward offset, staggered. Drive every card off the same ease/window with a per-index delay; derive the entrance offset and start time from the card's index (no `Math.random`). Each card is sharp the instant it lands in its slot.
+
+```js
+gsap.utils.toArray(".grid-card").forEach((card, i) => {
+  const at = MOVE_START + i * CARD_STAGGER;
+  tl.fromTo(
+    card,
+    { x: ENTER_FROM_X, opacity: 0 },
+    { x: 0, opacity: 1, duration: MOVE_DUR, ease: MOVE_EASE },
+    at,
+  );
+  // + a per-card blur proxy tween at the same `at` (Path A), or per-card ghosts (Path B)
+});
+```
+
+### Hold-the-streak (whip emphasis on a single beat)
+
+For a single kinetic phrase that "zooms past," keep the streak slightly visible a frame or two longer by easing the blur on a marginally _slower_ curve than the position (e.g. position `expo.out`, blur `power3.out`) — the element arrives, then the last wisp of smear resolves. Use sparingly; the default is locked envelopes.
+
+## How to Choose Values
+
+### Motion
+
+- **MOVE_EASE** — shared ease for position and blur/echo.
+  - Range: `expo.out` (hardest snap), `power4.out` (hard slam, default), `power3.out` (firm but softer)
+  - Effects: harder `out` → velocity more front-loaded → blur reads as a sharper streak that resolves later in the window
+  - Constraints: must be an `out`-family ease (velocity front-loaded). An `inOut` or `in` ease puts peak speed mid/late and the blur-speed coupling breaks. **Position and blur must use the SAME ease** (except the deliberate Hold-the-streak variation).
+- **MOVE_DUR** — travel + blur-resolve duration.
+  - Range: 0.25–0.6 s
+  - Effects: shorter → more violent whip; longer → a glide, the streak loses punch
+  - Constraints: a streak is _fast_ — over ~0.7 s it stops reading as velocity blur and looks like a focus pull
+- **MOVE_START** — timeline position of the entrance.
+  - Constraints: leave **≥1 s of dwell** after `MOVE_START + MOVE_DUR` before the composition ends (climax dwell — a streak that lands at `t = DURATION − 0.2 s` reads as "flashed and gone")
+- **ENTER_FROM_X / ENTER_FROM_Y** — off-frame start offset along the motion axis.
+  - Range: 40–120% of the element's own dimension on that axis (far enough to read as "came from off-frame")
+  - Effects: larger → longer travel → the streak has more runway to read; too small and there's no sense of speed
+
+### Path A — SVG blur
+
+- **PEAK_BLUR** — `stdDeviation` at maximum velocity (start of the window).
+  - Range: 8 (subtle) → 18 (default) → 30 (extreme whip)
+  - Effects: higher → heavier smear at peak speed; too high erases the glyph entirely at the start frame
+  - Constraints: ≤ ~30 — beyond that the element is unreadable for the first several frames and reads as "missing then appearing"; the filter region (`x/y/width/height` on `<filter>`) must be large enough (≥`-50% … 200%`) or the smear clips at the box edge
+- **SCALE_FROM** (push-through variation) — starting scale for a camera push.
+  - Range: 1.3 (gentle push) → 2.5 (aggressive punch-through)
+
+### Path B — echo trail
+
+- **N (ghost count)** — number of ghosts behind the lead (set by how many `.streak-ghost` you author).
+  - Range: 2–4
+  - Effects: more ghosts → a longer, smoother smear; >4 reads as a stutter / strobe rather than a streak
+- **ECHO_STEP_PX** — backward offset per ghost along the motion vector.
+  - Range: 12–40 px
+  - Effects: larger → a more spread-out, visible trail; smaller → a tight blur-like cluster
+  - Constraints: `(N) × ECHO_STEP_PX` should be ≲ `ENTER_FROM_X` so the furthest ghost still starts within the travel runway
+- **GHOST_BASE_OPACITY** — opacity of the nearest ghost (`i = 1`); falls off as `BASE / i`.
+  - Range: 0.3 (faint) → 0.6 (pronounced)
+  - Constraints: ≤ ~0.6 — opaque ghosts read as duplicate elements, not a trail
+
+### Layout & type
+
+- **EL_FONT_SIZE / EL_TRACKING** — the streaking element's type weight (when it's a phrase).
+  - Constraints: heavy display weight (≥120 px at 1080p, ≥800 weight) so the smear has mass to streak; thin type smears into invisibility
+- **CARD_STAGGER** (grid variation) — delay between consecutive cards.
+  - Range: 0.05–0.12 s — tight enough to read as one assembling wave, not separate arrivals
+
+### Tokens
+
+- **{sceneBg}** — background; a streak reads best against a solid / low-detail field (a busy bg fights the smear)
+- **{font}** — typographic stack (embedded display face if the streaking element is text — see typography reference)
+- **{textColor}** — element color; for Path B the ghosts inherit this, so a slightly desaturated trail can be had by tinting `.streak-ghost` separately
+- **{phrase}** — the word / glyph / wordmark that streaks in
+
+## Key Principles
+
+- **Blur peaks at peak speed, resolves to 0 at the settle** — this is the whole rule. Share the ease and window between the position tween and the blur/echo envelope so they're locked. A blur that lingers after the element stops, or peaks after it's already slow, reads as a focus pull, not velocity.
+- **`out`-family ease, always** — velocity must be front-loaded (fast off the start, decelerating in). `expo.out` / `power4.out` / `power3.out`. An `in` or `inOut` ease puts peak speed in the wrong place and the coupling falls apart.
+- **Directional blur on the motion axis** (Path A) — `stdDeviation="X 0"` for horizontal, `"0 Y"` for vertical, `"B B"` only for a depth/scale push. A symmetric blur on a sideways move looks like defocus, not speed.
+- **Tween a proxy, write the attribute** (Path A) — GSAP tweens the plain `{ v }` object; `onUpdate` calls `setAttribute("stdDeviation", …)`. You cannot tween the SVG attribute directly, and you must **seed it once at setup** so a seek to `t=0` shows the streaked start.
+- **Ghosts are deterministic, by index** (Path B) — offset `i * ECHO_STEP_PX`, opacity `BASE / i`. Never `Math.random` for the trail; index drives all per-ghost variation so every seek is identical.
+- **Entrances only, never a mid-composition exit** — a streak is an _arrival_. A blurred element leaving on a non-final frame reads as a glitch; scene-to-scene exits are the transition's job (see `../../transitions/overview.md`).
+- **Earn the sharp hold** — after the snap, the crisp element must dwell ≥1 s. The contrast between the violent streak and the still, sharp settle _is_ the effect.
+- **Heavy element, solid background** — thin type or a busy backdrop both swallow the smear. Big bold mass on a clean field reads.
+
+## Critical Constraints
+
+- **Timeline must be paused**: `gsap.timeline({ paused: true })`. Never `tl.play()`.
+- **Registry key = `data-composition-id`** on the root.
+- **No CSS `transition`** on the streaking element (or ghosts) — it interpolates independently of HF seek and causes flicker. Only GSAP drives the move and the blur.
+- **No `repeat` / `yoyo` / infinite** — a streak is a single finite arrival. Finite tweens only.
+- **No `Math.random` / `Date.now`** — ghost offsets/opacities and any stagger derive from the element index; deterministic every seek.
+- **GSAP transform aliases only**: `x`, `y`, `scale`, `rotation`. Never tween `width` / `height` / `left` / `top`. Tweening `filter` (the proxy → `stdDeviation`) and `opacity` is seek-safe and fine.
+- **Seed the SVG `stdDeviation` at setup** (Path A) — write it once before play so a seek to the first frame renders the streaked start, not a momentarily-sharp pre-frame.
+- **Filter region must be generous** (Path A) — `<filter x="-50%" y="-50%" width="200%" height="200%">` so the smear doesn't clip at the element's box edge.
+- **`overflow: hidden` on the scene** — the smear / furthest ghost extends past the resting position during travel; contain it so it doesn't bleed outside the frame.
+
+## Combinations
+
+- [kinetic-beat-slam.md](kinetic-beat-slam.md) — use this streak as the entrance for one phrase in a beat sequence (the scale-slam beat _is_ a motion-blur fly-in); reads its onset from the shared `BEATS[]` array
+- [center-outward-expansion.md](center-outward-expansion.md) — the grid streak-in is center-expansion with a velocity-blur envelope on each element's travel
+- [3d-text-depth-layers.md](3d-text-depth-layers.md) — extruded depth on the phrase that streaks in (depth layers ride the lead's transform)
+- [scale-swap-transition.md](scale-swap-transition.md) — alternative for a SAME-footprint state swap (this rule is for a fast ARRIVAL from off-frame / depth, not a morph)
+
+## Pairs with HF skills
+
+- `/hyperframes-animation` — `out`-family easing, proxy-driven `onUpdate` attribute tweens, and locked-envelope coordination (`../../adapters/gsap-easing-and-stagger.md`)
+- `/hyperframes-creative` — `references/typography.md` (embedded display face for a text streak), `references/video-composition.md` (solid field behind the smear)
+- `/hyperframes-core` — composition wiring, determinism (finite tweens, no `Math.random`)
+- `/hyperframes-cli` — `hyperframes lint` / `hyperframes check` (`check` catches a missing `#streak-blur` node or an unreferenced filter)
diff --git a/.claude/skills-media/hyperframes-animation/rules/multi-phase-camera.md b/.claude/skills-media/hyperframes-animation/rules/multi-phase-camera.md
new file mode 100644
index 000000000..3bbe74211
--- /dev/null
+++ b/.claude/skills-media/hyperframes-animation/rules/multi-phase-camera.md
@@ -0,0 +1,273 @@
+---
+name: multi-phase-camera
+description: Sequential camera zoom with 2-3 distinct phases (pull-back / focus / push) plus continuous micro-drift for organic cinematic feel.
+metadata:
+  tags: camera, zoom, phase, drift, scale, cinematic
+---
+
+# Multi-Phase Camera
+
+A camera wrapper around the entire scene that progresses through discrete zoom phases at scripted triggers. Continuous sine-driven micro-drift overlays so the camera never feels static between phases. Distinct from a single linear zoom — multi-phase creates "cinematic pacing" (anticipation → reveal → settle).
+
+## How It Works
+
+The camera is a single wrapping `<div>` whose `transform: scale() translate(x, y)` is driven by:
+
+1. **Phase scale** — a stepwise scale value that advances through phases at trigger times (e.g. `PHASE_1_SCALE` at t=0 → `PHASE_2_SCALE` at PHASE_2_AT → `PHASE_3_SCALE` at PHASE_3_AT)
+2. **Drift offset** — a continuous sine-based `translateX` / `translateY` (small amplitude, slow frequency) ADDED to the phase transform
+
+Both run inside the GSAP timeline so HF seeks frame-by-frame deterministically.
+
+## HTML
+
+```html
+<div
+  class="scene"
+  data-composition-id="cam-scene"
+  data-start="0"
+  data-duration="6"
+  data-track-index="0"
+>
+  <div class="camera" id="camera">
+    <div class="content">
+      <div class="hero">{Brand}</div>
+      <div class="tagline">{tagline}</div>
+      <div class="cta">{ctaText}</div>
+    </div>
+  </div>
+</div>
+```
+
+## CSS
+
+```css
+.scene {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  background: {sceneBgColor};
+}
+.camera {
+  position: absolute;
+  inset: 0;
+  display: grid;
+  place-items: center;
+  transform-origin: 50% 50%;
+  will-change: transform;
+}
+.content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 32px;
+  text-align: center;
+}
+.hero {
+  font-family: {font};
+  font-weight: 900;
+  font-size: {heroSize};
+  letter-spacing: 8px;
+  color: {textColor};
+  text-transform: uppercase;
+}
+.tagline {
+  font-family: {font};
+  font-weight: 600;
+  font-size: {taglineSize};
+  color: {accentColor};
+}
+.cta {
+  font-family: {monoFont};
+  font-weight: 700;
+  font-size: {ctaSize};
+  letter-spacing: 6px;
+  color: {accentColor};
+  text-transform: uppercase;
+}
+```
+
+## GSAP Timeline
+
+```html
+<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+<script>
+  window.__timelines = window.__timelines || {};
+  const tl = gsap.timeline({ paused: true });
+
+  const camera = document.getElementById("camera");
+
+  // Three-phase scale plan: pullback → focus → push
+  const phase = { scale: PHASE_1_SCALE };
+
+  // Phase 1 — start pulled back
+  // (no tween needed for the initial value; set via the phase object)
+
+  // Phase 2 — settle to neutral focus
+  tl.to(
+    phase,
+    {
+      scale: PHASE_2_SCALE,
+      duration: PHASE_2_DUR,
+      ease: PHASE_2_EASE,
+    },
+    PHASE_2_AT,
+  );
+
+  // Phase 3 — slow push-in for the climax
+  tl.to(
+    phase,
+    {
+      scale: PHASE_3_SCALE,
+      duration: PHASE_3_DUR,
+      ease: PHASE_3_EASE,
+    },
+    PHASE_3_AT,
+  );
+
+  // Drift driver — continuous sine motion overlaid on the phase scale
+  const drift = { p: 0 };
+
+  tl.to(
+    drift,
+    {
+      p: Math.PI * 2 * DRIFT_CYCLES,
+      duration: TOTAL_DURATION,
+      ease: "none",
+      onUpdate: () => {
+        const dx = Math.sin(drift.p) * DRIFT_AMP_X;
+        const dy = Math.sin(drift.p * DRIFT_FREQ_RATIO) * DRIFT_AMP_Y;
+        camera.style.transform = `scale(${phase.scale}) translate(${dx}px, ${dy}px)`;
+      },
+    },
+    0,
+  );
+
+  // Content reveals (entry beats inside the camera frame)
+  tl.from(".hero", { opacity: 0, y: 32, scale: 0.96, duration: 0.9, ease: "power3.out" }, HERO_AT);
+  tl.from(".tagline", { opacity: 0, y: 16, duration: 0.7, ease: "power3.out" }, TAGLINE_AT);
+  tl.from(".cta", { opacity: 0, y: 8, duration: 0.7, ease: "power3.out" }, CTA_AT);
+
+  window.__timelines["cam-scene"] = tl;
+</script>
+```
+
+## How to Choose Values
+
+- **PHASE_1_SCALE / PHASE_2_SCALE / PHASE_3_SCALE** — three-step zoom values
+  - Range: PHASE_1 0.88–0.96; PHASE_2 0.98–1.02; PHASE_3 1.04–1.15
+  - Effects: tighter spread = subtler camera; wider = more cinematic
+  - Constraints: at PHASE_1_SCALE < 1, `.scene` MUST have `overflow: hidden` or the inner content's edges leak outside the frame
+
+- **PHASE_2_AT / PHASE_2_DUR** — when the focus phase starts and how long it takes
+  - Range: PHASE_2_AT 0.3–1.0 s; PHASE_2_DUR 1.0–1.8 s
+  - Effects: longer DUR = slower settle, more cinematic
+
+- **PHASE_3_AT / PHASE_3_DUR** — when the push phase starts and how long it takes
+  - Range: PHASE_3_AT 2.0–4.0 s; PHASE_3_DUR 1.0–2.0 s
+  - Constraints: PHASE_3_AT must be ≥ PHASE_2_AT + PHASE_2_DUR (otherwise focus is preempted)
+
+- **PHASE_2_EASE / PHASE_3_EASE** — ease per transition
+  - Discrete choice: `power2.out`, `power3.out`, `power2.inOut`
+  - Selection: cinematic feel; spring/back easing on a camera feels uncomfortable. Each later phase should imply more settling than the previous (longer dur OR more out-easing).
+
+- **TOTAL_DURATION** — composition's total runtime (matches `data-duration`)
+  - Reference: the drift tween must span the whole composition
+
+- **DRIFT_CYCLES** — number of sine cycles across TOTAL_DURATION
+  - Range: 1–3
+  - Effects: 1 = one slow breath; 3 = noticeably busier
+  - Constraints: high values read as mechanical wobble rather than organic drift
+
+- **DRIFT_AMP_X / DRIFT_AMP_Y** — peak drift offset in pixels
+  - Range: DRIFT_AMP_X 2–8 px; DRIFT_AMP_Y 1–4 px
+  - Effects: per-frame imperceptible, visible over time. If drift is a discrete shake, it's too much.
+
+- **DRIFT_FREQ_RATIO** — multiplier on the Y-axis sine frequency
+  - Range: 1.2–1.5
+  - Effects: 1.0 = perfect diagonal (reads mechanical); ~1.3 = organic Lissajous
+
+- **HERO_AT / TAGLINE_AT / CTA_AT** — content reveal beats
+  - Constraints: HERO_AT should land AFTER PHASE_1 settles via PHASE_2 (otherwise the hero feels like it's flying away while camera is still pulling back)
+
+## Phase Patterns
+
+| Pattern             | Scale Sequence (Phase 1 → 2 → 3)  | Feel                            | When to use                   |
+| ------------------- | --------------------------------- | ------------------------------- | ----------------------------- |
+| **Focus-in**        | back → neutral → slight push      | Approach → settle → slight push | Default product reveal        |
+| **Dramatic reveal** | push → neutral → pull             | Wide → focus → settle back      | Hero shot with breathing room |
+| **Steady push**     | neutral → slight push → more push | Gradual forward momentum        | Continuous narrative push     |
+| **Bookend pull**    | neutral → strong push → neutral   | Settle → push → release         | CTA emphasis then release     |
+
+## Variations
+
+### Phase trigger by content beat (not time)
+
+If the composition has content phases (e.g. an entry completes, then orbit starts), align the camera tween start time with the content tween's end time rather than using a fixed clock value.
+
+### Camera shake (panic / impact)
+
+For a brief shake instead of drift, replace the drift tween with a higher-amplitude, higher-frequency one over a short window:
+
+```js
+tl.to(
+  drift,
+  {
+    p: Math.PI * 2 * SHAKE_CYCLES,
+    duration: SHAKE_DUR,
+    ease: "none",
+    onUpdate: () => {
+      const dx = Math.sin(drift.p) * SHAKE_AMP_X;
+      const dy = Math.sin(drift.p * SHAKE_FREQ_RATIO) * SHAKE_AMP_Y;
+      camera.style.transform = `scale(${phase.scale}) translate(${dx}px, ${dy}px)`;
+    },
+  },
+  SHAKE_AT,
+);
+```
+
+### Targeted zoom into off-center element
+
+If the climax should zoom into a non-centered element, combine scale with counter-translation. Compute the offset so the target ends at viewport center after scale:
+
+```js
+const target = document.querySelector(".cta");
+const tRect = target.getBoundingClientRect();
+const viewportCenter = { x: STAGE_W / 2, y: STAGE_H / 2 };
+const offsetX = (viewportCenter.x - (tRect.left + tRect.width / 2)) / phase.scale;
+const offsetY = (viewportCenter.y - (tRect.top + tRect.height / 2)) / phase.scale;
+// then in onUpdate: translate(offsetX + dx, offsetY + dy)
+```
+
+## Key Principles
+
+- **Drift is imperceptible per-frame, visible over time** — if drift reads as discrete shake, the amplitude is too high
+- **Drift X and Y at slightly different frequencies** — `DRIFT_FREQ_RATIO ≈ 1.3` prevents perfect-diagonal motion, which reads as mechanical
+- **Phase springs softer than UI springs** — `power2.inOut` or `power3.out` for cinematic feel; spring/back easing on a camera feels uncomfortable
+- **Each later phase settles "deeper"** — phase 2 ease should imply more settling than phase 1 (longer duration OR more out-easing). Wakes up → settles → settles deeper
+- **Camera wraps EVERYTHING in the scene** — applying camera per-element creates parallax bugs and breaks "this is one viewpoint"
+- **❗ overflow: hidden on .scene** — phases that pull back (`scale < 1`) reveal edges of the inner content. Without `overflow: hidden`, those edges leak outside the stage frame and HF renders them as visible content
+- **❗ Hero reveal starts AFTER initial pullback ease lands** — if the camera is still pulling back when the headline fades in, the headline feels like it's flying away
+
+## Critical Constraints
+
+- **Timeline must be paused**: `gsap.timeline({ paused: true })`
+- **Registry key = `data-composition-id`**
+- **No CSS `transition` on `.camera`** — competes with the GSAP transform
+- **`transform-origin: 50% 50%`** on camera — off-center origin creates unpredictable phase-to-phase drift
+- **`will-change: transform`** on `.camera` — the camera transform updates every frame
+- **`overflow: hidden` on `.scene`** — required when any phase scale < 1
+- **Scene background on `.scene`, not `.camera`** — if background is on camera, scaling/translating it reveals the outer void
+
+## Combinations
+
+- [orbit-3d-entry.md](orbit-3d-entry.md) — orbit motion inside a slowly drifting camera
+- [counting-dynamic-scale.md](counting-dynamic-scale.md) — climax phase push synced to counter peak
+- [3d-text-depth-layers.md](3d-text-depth-layers.md) — depth-stacked hero with cinematic camera moves
+- [sine-wave-loop.md](sine-wave-loop.md) — element idle inside the camera (compound motion)
+
+## Pairs with HF skills
+
+- `/hyperframes-animation` — multi-phase tween + drift onUpdate
+- `/hyperframes-core` — composition wiring, scene wrapper
+- `/hyperframes-cli` — `hyperframes lint`
diff --git a/.claude/skills-media/hyperframes-animation/rules/orbit-3d-entry.md b/.claude/skills-media/hyperframes-animation/rules/orbit-3d-entry.md
new file mode 100644
index 000000000..8d6203f47
--- /dev/null
+++ b/.claude/skills-media/hyperframes-animation/rules/orbit-3d-entry.md
@@ -0,0 +1,301 @@
+---
+name: orbit-3d-entry
+description: Elements flip in from 3D space then settle into continuous elliptical orbit around a focal point.
+metadata:
+  tags: orbit, 3d, flip, ellipse, circular, icon, entry, continuous
+---
+
+# Orbit with 3D Entry
+
+Elements flip in from 3D space (rotateX + rotateY + translateZ) then transition into a continuous elliptical orbit around a focal point. Distinct from one-shot reveals — the orbit keeps running.
+
+## How It Works
+
+Two phases per element:
+
+1. **Entry (per element)**: GSAP tween from hidden 3D orientation (`rotateX`, `rotateY`, negative `z`) to flat (`rotateX: 0, rotateY: 0, z: 0`). Spring-like ease (`back.out`) for the flip-in.
+2. **Orbit (after entry)**: Continuous trigonometric position around a center point. The element's `x` and `y` translate are driven by `cos(t)` and `sin(t)` at a slow angular speed.
+
+The orbit runs **inside the timeline** — not via `requestAnimationFrame` — so HF seek-by-frame stays deterministic.
+
+## HTML
+
+```html
+<div
+  class="scene"
+  id="orbit-scene"
+  data-composition-id="orbit-scene"
+  data-start="0"
+  data-duration="5"
+  data-track-index="0"
+>
+  <div class="orbit-stage">
+    <div class="orbit-item" data-angle="0">{glyph1}</div>
+    <div class="orbit-item" data-angle="60">{glyph2}</div>
+    <div class="orbit-item" data-angle="120">{glyph3}</div>
+    <div class="orbit-item" data-angle="180">{glyph4}</div>
+    <div class="orbit-item" data-angle="240">{glyph5}</div>
+    <div class="orbit-item" data-angle="300">{glyph6}</div>
+    <div class="orbit-center">{centerLabel}</div>
+  </div>
+</div>
+```
+
+## CSS
+
+```css
+.scene {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  display: grid;
+  place-items: center;
+  background: {sceneBackground};
+  perspective: 1800px; /* REQUIRED — without perspective, rotateX/Y flatten */
+}
+.orbit-stage {
+  position: relative;
+  width: 1000px;
+  height: 700px;
+  display: grid;
+  place-items: center;
+  transform-style: preserve-3d;
+}
+.orbit-item {
+  position: absolute;
+  /* Items live at stage center; GSAP translates them along the orbit. */
+  top: 50%;
+  left: 50%;
+  width: 140px;
+  height: 140px;
+  display: grid;
+  place-items: center;
+  background: {accentColor};
+  border-radius: 50%;
+  font-family: {font};
+  font-weight: 900;
+  font-size: 64px;
+  color: {itemTextColor};
+  transform-style: preserve-3d;
+  will-change: transform;
+  box-shadow: 0 12px 36px {accentShadowColor};
+}
+.orbit-center {
+  position: relative;
+  z-index: 5;
+  font-family: {font};
+  font-weight: 900;
+  font-size: 96px;
+  letter-spacing: 8px;
+  color: {centerTextColor};
+  text-transform: uppercase;
+}
+```
+
+## GSAP Timeline
+
+```html
+<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+<script>
+  window.__timelines = window.__timelines || {};
+  const tl = gsap.timeline({ paused: true });
+
+  const items = document.querySelectorAll(".orbit-item");
+  // RADIUS_X, RADIUS_Y, ORBIT_DURATION, ENTRY_DUR, STAGGER, FLIP_BACK, CENTER_BACK
+  // — all named constants; values per "How to Choose Values" below.
+  const RADIUS_Y = RADIUS_X * Y_TO_X_RATIO; // perspective-flattened ellipse
+
+  items.forEach((el, i) => {
+    const initialAngleDeg = Number(el.dataset.angle);
+    const initialAngleRad = (initialAngleDeg / 360) * Math.PI * 2;
+    const startX = Math.cos(initialAngleRad) * RADIUS_X;
+    const startY = Math.sin(initialAngleRad) * RADIUS_Y;
+
+    // 1) Place at orbital position with opacity 0 — BEFORE any tween fires
+    gsap.set(el, {
+      xPercent: -50,
+      yPercent: -50,
+      x: startX,
+      y: startY,
+      rotateX: ROTATE_X_FROM,
+      rotateY: ROTATE_Y_FROM,
+      z: Z_FROM,
+      opacity: 0,
+      scale: SCALE_FROM,
+    });
+
+    // 2) Phase 1 — flip in IN PLACE at orbital position
+    tl.to(
+      el,
+      {
+        rotateX: 0,
+        rotateY: 0,
+        z: 0,
+        opacity: 1,
+        scale: 1,
+        duration: ENTRY_DUR,
+        ease: `back.out(${FLIP_BACK})`,
+      },
+      i * STAGGER,
+    );
+
+    // 3) Phase 2 — continuous orbit driven via a 0→1 progress tween
+    const orbitState = { p: 0 };
+    tl.to(
+      orbitState,
+      {
+        p: 1,
+        duration: ORBIT_DURATION,
+        ease: "none",
+        onUpdate: () => {
+          const angle = initialAngleRad + orbitState.p * Math.PI * 2;
+          const x = Math.cos(angle) * RADIUS_X;
+          const y = Math.sin(angle) * RADIUS_Y;
+          // z-index by orbit Y — see "Center label clearance" in Key Principles
+          // for the capped-range form when a center label is present.
+          el.style.zIndex = String(Math.round(y + RADIUS_Y));
+          el.style.transform = `translate(-50%, -50%) translate(${x}px, ${y}px)`;
+        },
+      },
+      i * STAGGER + ENTRY_DUR,
+    );
+  });
+
+  // Center label fades in once a few orbit items have landed
+  tl.from(
+    ".orbit-center",
+    { opacity: 0, scale: 0.6, duration: ENTRY_DUR, ease: `back.out(${CENTER_BACK})` },
+    CENTER_FADE_AT,
+  );
+
+  window.__timelines["orbit-scene"] = tl;
+</script>
+```
+
+## How to Choose Values
+
+- **RADIUS_X** — horizontal radius of the orbit ellipse, in px
+  - Range: 300–900 px
+  - Effects: small radius reads as a tight cluster; large radius spreads the ring across the frame and lets a large center element breathe
+  - Constraints: must clear the center element horizontally at every angle — see Key Principles for the `RADIUS_X * min(|cos(θ)|) ≥ L_w + I_w + breathing_room` rule
+  - Reference: ../../examples/cta-orbit-collapse.html uses 480
+
+- **Y_TO_X_RATIO** — `RADIUS_Y / RADIUS_X`, the orbit's perspective flattening
+  - Range: 0.4–0.7
+  - Effects: low values read as a near-horizontal disc seen from above; values approaching 1 read as a flat plane facing the camera
+  - Constraints: keep < 1 — the orbit should look like a tilted ring, not a frontal halo
+  - Reference: ../../examples/cta-orbit-collapse.html uses ≈ 0.58
+
+- **ORBIT_DURATION** — seconds for one full revolution
+  - Range: 4–25 s (longer for ambient backdrop, shorter for active feature motion)
+  - Effects: short durations look frenetic; long durations read as drifting / calm
+  - Constraints: must be ≥ the time the orbit is on screen, otherwise the tween ends and items stop
+  - Reference: ../../examples/cta-orbit-collapse.html uses ~25 s effective (orbit speed 0.25 rad/s)
+
+- **ENTRY_DUR** — per-element flip-in duration
+  - Range: 0.4–0.8 s
+  - Effects: short feels punchy; long feels stately
+  - Constraints: must be ≤ the gap between the first and last element's start so the cascade doesn't overlap to incoherence
+  - Reference: ../../examples/cta-orbit-collapse.html uses 0.55 s
+
+- **STAGGER** — delay between consecutive element entries
+  - Range: 0.06–0.12 s
+  - Effects: below ~0.06 s reads as "popcorn"; above ~0.12 s reads as plodding
+  - Constraints: total cascade `(n - 1) * STAGGER` should still complete before the next scene phase begins
+  - Reference: ../../examples/cta-orbit-collapse.html uses 0.10 s
+
+- **FLIP_BACK** — `back.out(<n>)` overshoot for the flip-in
+  - Range: 1.2–2.0
+  - Effects: low end is a soft arrive; high end snaps with visible overshoot
+  - Constraints: pair with a calmer `CENTER_BACK` if both fire close together — competing overshoots cancel each other
+  - Reference: ../../examples/cta-orbit-collapse.html uses 1.4
+
+- **CENTER_BACK** — `back.out(<n>)` overshoot for the center label fade-in
+  - Range: 1.2–1.8
+  - Effects: low end keeps the label calm under the busy orbit; high end gives it a small "pop" of arrival
+  - Reference: ../../examples/cta-orbit-collapse.html uses 1.4
+
+- **CENTER_FADE_AT** — when the center label fades in, in seconds
+  - Range: just after the first 2–4 elements have landed
+  - Effects: too early competes with the cascade; too late leaves a hole at the center of the orbit
+  - Reference: ../../examples/cta-orbit-collapse.html starts the center brand near the front of the scene
+
+- **ROTATE_X_FROM / ROTATE_Y_FROM / Z_FROM / SCALE_FROM** — initial 3D orientation
+  - Range: rotateX ±60° to ±120°; rotateY ±45° to ±120°; z −200 to −400; scale 0.2–0.6
+  - Effects: higher absolute rotation + deeper negative z = more dramatic "card flipping out of depth"; lower = subtle reorientation
+  - Constraints: pick a direction consistent with the scene's perspective; mixing positive and negative rotateY across items reads as noise
+  - Reference: ../../examples/cta-orbit-collapse.html uses rotateX 90, rotateY −45, z −100, scale 0
+
+## Variations
+
+### Collapse to center
+
+To reverse — orbit then collapse inward — interpolate `RADIUS_X` and `RADIUS_Y` to 0 in a final phase by multiplying both radii by a 1→0 driver:
+
+```js
+const collapse = { r: 1 };
+tl.to(
+  collapse,
+  {
+    r: 0,
+    duration: COLLAPSE_DUR,
+    ease: "power3.inOut",
+    onUpdate: () =>
+      items.forEach((el) => {
+        const a = (Number(el.dataset.angle) / 360) * Math.PI * 2;
+        const x = Math.cos(a) * RADIUS_X * collapse.r;
+        const y = Math.sin(a) * RADIUS_Y * collapse.r;
+        el.style.transform = `translate(-50%,-50%) translate(${x}px,${y}px) scale(${collapse.r})`;
+      }),
+  },
+  COLLAPSE_AT,
+);
+```
+
+### Tilted orbit plane
+
+For a more dramatic 3D orbit, rotate the entire `.orbit-stage` on the X axis:
+
+```css
+.orbit-stage {
+  transform: rotateX(25deg);
+}
+```
+
+Items rendered above/below the equator visually arc through the plane.
+
+## Key Principles
+
+- **`perspective` on scene root REQUIRED** — without it, rotateX/Y read as 2D scale and the flip-in looks flat
+- **`transform-style: preserve-3d`** on both the stage and each item — preserves the 3D context as items have their own transforms
+- **Stagger entries** — cascade reads as "swarm forming," simultaneous reads as "popcorn." See `STAGGER` in How to Choose Values
+- **Element count 4-12** — fewer feels empty, more crowds the center
+- **❗ Center label clearance — translateZ + capped item z-index** — `z-index` ALONE is unreliable inside a `transform-style: preserve-3d` stage (paint order follows Z position, not stacking-context z-index). For the orbit to NEVER occlude the headline:
+  1. Push the center label forward: `transform: translateZ(220px); z-index: 9999;`
+  2. Cap orbit-item dynamic z-index in `[1, 50]` so bottom-of-orbit items still read as "in front of" top-of-orbit items, but **never above the center label**. e.g.: `el.style.zIndex = String(1 + Math.round((y + RADIUS_Y) / (2 * RADIUS_Y) * 49));`
+  3. **Choose `RADIUS_X` so items also clear the center label HORIZONTALLY at all angles.** If the label's half-width is `L_w` and the item's half-width is `I_w`, then `RADIUS_X` must satisfy `RADIUS_X * min(|cos(θ_minimum)|) ≥ L_w + I_w + breathing_room`. For a 6-item orbit with 60° angular spacing, the worst case is `cos(30°) ≈ 0.866` between items. Scale `RADIUS_X` with the center label's width — a heavier wordmark needs a wider ring.
+- **❗ Center element is the headline** — the orbit is ornamental motion around it. If the orbit dominates the eye, increase center element size or fade orbit items down
+
+## Critical Constraints
+
+- **No `requestAnimationFrame`** — orbit must run inside the timeline so HF seeks frame-by-frame deterministically
+- **Timeline must be paused**: `gsap.timeline({ paused: true })`
+- **Registry key = `data-composition-id`**
+- **Each item gets its OWN orbit tween** — don't share one tween with `targets: '.orbit-item'` because each starts at a different `initialAngle`
+- **`will-change: transform`** — many simultaneous orbital transforms benefit from compositor hints
+- **Don't animate `left`/`top`** — use `translate()` (composes with `translate(-50%, -50%)` centering)
+- **❗ Entry must flip IN PLACE at orbital position, NOT at center** — a fromTo whose "from" and "to" both have `x: 0, y: 0` keeps the item at the stage center during phase 1, so it collides with the center label during flip-in (and then snaps to orbit on phase 2 start — a visible teleport).
+
+  The correct pattern (see GSAP Timeline above) is to `gsap.set()` each item at `(cos(initialAngle)*RADIUS_X, sin(initialAngle)*RADIUS_Y)` with `opacity: 0` BEFORE adding tweens, then have phase 1 animate only rotation/opacity/scale — NOT translate. The item fades in IN PLACE at its orbital starting point, and phase 2 picks up the orbit smoothly from there.
+
+## Combinations
+
+- [center-outward-expansion.md](center-outward-expansion.md) — alternative entry pattern (burst, not orbit); also the reversed driver for an orbit-collapse finish
+- [cursor-click-ripple.md](cursor-click-ripple.md) — pairs naturally when the center element is a CTA the user "clicks" to trigger the collapse
+- [sine-wave-loop.md](sine-wave-loop.md) — per-item idle wobble layered on top of the orbit
+
+## Pairs with HF skills
+
+- `/hyperframes-animation` — timeline + `onUpdate` API
+- `/hyperframes-core` — composition wiring
+- `/hyperframes-cli` — `hyperframes lint`
diff --git a/.claude/skills-media/hyperframes-animation/rules/physics-press-reaction.md b/.claude/skills-media/hyperframes-animation/rules/physics-press-reaction.md
new file mode 100644
index 000000000..8eb79e9b6
--- /dev/null
+++ b/.claude/skills-media/hyperframes-animation/rules/physics-press-reaction.md
@@ -0,0 +1,350 @@
+---
+name: physics-press-reaction
+description: Cursor + element synchronized press via subtractive spring forces — cursor lands on element, both compress together, then release. Distinct from press-release-spring (which has no cursor).
+metadata:
+  tags: spring, click, physics, cursor, subtractive, interaction, synchronized
+---
+
+# Physics Press Reaction (Cursor + Element Synced)
+
+Models a real click: a cursor approaches a button, lands, and both compress IN SYNC, then release together. Two distinct timing events (down-frame and up-frame) bound by spring forces. Distinct from [press-release-spring](press-release-spring.md) (which has no cursor — just a press happening); this rule is the COMBINED cursor + element behavior.
+
+## How It Works
+
+A single `PRESS_INTENSITY` value drives both cursor and button together:
+
+- **press down**: both compress to `1 - PRESS_INTENSITY`
+- **release**: both spring back to 1.0 with overshoot
+
+The cursor ALSO translates to the button's center during the approach phase BEFORE press starts. After release, the cursor may move on (next interaction) or hold.
+
+## HTML
+
+```html
+<div
+  class="scene"
+  id="press-react-scene"
+  data-composition-id="press-react-scene"
+  data-start="0"
+  data-duration="3"
+  data-track-index="0"
+>
+  <div class="stack">
+    <button class="btn" id="btn">
+      <span class="btn-icon">{ctaIcon}</span>
+      <span class="btn-label">{ctaCopy}</span>
+    </button>
+    <div class="brand">{Brand}</div>
+  </div>
+  <!-- Cursor lives at scene-root level so it can translate freely -->
+  <svg class="cursor" id="cursor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+    <path
+      d="M3 2 L21 12 L12 13 L7 22 Z"
+      fill="{cursorFill}"
+      stroke="{cursorStroke}"
+      stroke-width="1.5"
+    />
+  </svg>
+</div>
+```
+
+## CSS
+
+```css
+.scene {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  display: grid;
+  place-items: center;
+  background: {sceneBg};
+  font-family: {font};
+  overflow: hidden;
+}
+.stack {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: STACK_GAP;
+}
+.btn {
+  display: flex;
+  align-items: center;
+  gap: BTN_INNER_GAP;
+  padding: BTN_PADDING_V BTN_PADDING_H;
+  background: {btnBg};
+  border: none;
+  border-radius: BTN_RADIUS;
+  color: {btnTextColor};
+  font-family: {font};
+  font-weight: 900;
+  font-size: BTN_FONT_SIZE;
+  letter-spacing: BTN_TRACKING;
+  text-transform: uppercase;
+  cursor: pointer;
+  box-shadow: {btnRestingShadow};
+  transform-origin: 50% 50%;
+  will-change: transform;
+}
+.btn-icon {
+  font-size: BTN_ICON_SIZE;
+  line-height: 1;
+}
+.brand {
+  font-size: BRAND_SIZE;
+  font-weight: 800;
+  letter-spacing: BRAND_TRACKING;
+  color: {brandColor};
+  text-transform: uppercase;
+}
+/* Cursor — absolute, positioned by GSAP */
+.cursor {
+  position: absolute;
+  width: CURSOR_SIZE;
+  height: CURSOR_SIZE;
+  pointer-events: none;
+  z-index: 100;
+  /* initial position is set by gsap.set() */
+  transform-origin: 0 0; /* arrow point is the click point */
+  filter: {cursorDropShadow};
+}
+```
+
+## GSAP Timeline
+
+```html
+<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+<script>
+  window.__timelines = window.__timelines || {};
+  const tl = gsap.timeline({ paused: true });
+
+  // Position cursor initially off-target (off-screen or far corner).
+  gsap.set("#cursor", { x: CURSOR_START_X, y: CURSOR_START_Y });
+
+  // The button's screen center, in composition coordinates.
+  const BUTTON_CENTER = { x: BUTTON_CENTER_X, y: BUTTON_CENTER_Y };
+
+  // Phase 1 — cursor approaches button
+  tl.to(
+    "#cursor",
+    {
+      x: BUTTON_CENTER.x,
+      y: BUTTON_CENTER.y,
+      duration: APPROACH_DUR,
+      ease: "power2.inOut",
+    },
+    APPROACH_START,
+  );
+
+  // Phase 2 — coordinated press down (button + cursor both scale to 1 - PRESS_INTENSITY)
+  tl.to(
+    ["#btn", "#cursor"],
+    {
+      scale: 1 - PRESS_INTENSITY,
+      duration: PRESS_DOWN_DUR,
+      ease: "power1.in",
+    },
+    PRESS_DOWN_AT,
+  );
+
+  // Phase 3 — release (both spring back to 1.0 with overshoot)
+  tl.to(
+    ["#btn", "#cursor"],
+    {
+      scale: 1,
+      duration: RELEASE_DUR,
+      ease: `back.out(${BOUNCE_FACTOR})`,
+    },
+    RELEASE_AT,
+  );
+
+  // Phase 4 — inner glow during press (boxShadow change synced to press scale)
+  tl.to(
+    "#btn",
+    {
+      boxShadow: `{btnPressedShadow}`,
+      duration: PRESS_DOWN_DUR,
+      ease: "power1.in",
+    },
+    PRESS_DOWN_AT,
+  );
+  tl.to(
+    "#btn",
+    {
+      boxShadow: `{btnRestingShadow}`,
+      duration: RELEASE_DUR,
+      ease: "power2.out",
+    },
+    RELEASE_AT,
+  );
+
+  // Brand fades in early (context)
+  tl.from(
+    ".brand",
+    { opacity: 0, y: BRAND_REVEAL_Y_PX, duration: BRAND_REVEAL_DUR, ease: "power3.out" },
+    BRAND_REVEAL_AT,
+  );
+
+  // Cursor optionally moves off after press (or holds for dwell)
+  tl.to(
+    "#cursor",
+    { x: CURSOR_EXIT_X, y: CURSOR_EXIT_Y, duration: CURSOR_EXIT_DUR, ease: "power2.out" },
+    CURSOR_EXIT_AT,
+  );
+
+  window.__timelines["press-react-scene"] = tl;
+</script>
+```
+
+## Variations
+
+### Multiple-element chain press
+
+Cursor presses button A → button A triggers swap → cursor moves to button B → presses again. Each press is one full down-release sub-routine.
+
+### Hold press (continuous pressure)
+
+Insert a `HOLD_DUR` window between press-down and release. Cursor scale stays at `1 - PRESS_INTENSITY`, button scale stays at `1 - PRESS_INTENSITY`, inner glow stays on. Suggests "thinking" or "loading."
+
+### Synchronized inner-glow pulse
+
+During the hold phase, the inner glow pulses (sin-driven). Suggests "processing":
+
+```js
+const holdGlow = { p: 0 };
+tl.to(
+  holdGlow,
+  {
+    p: Math.PI * GLOW_PULSE_CYCLES * 2,
+    duration: HOLD_DUR,
+    ease: "none",
+    onUpdate: () => {
+      const alpha = GLOW_BASE_ALPHA + Math.sin(holdGlow.p) * GLOW_PULSE_AMP;
+      document.getElementById("btn").style.boxShadow =
+        `inset 0 0 GLOW_BLUR rgba(255, 255, 255, ${alpha})`;
+    },
+  },
+  HOLD_START_AT,
+);
+```
+
+## How to Choose Values
+
+### Timing (seconds)
+
+- **APPROACH_START** — when the cursor begins moving toward the button.
+  - Range: 0-0.3 s (small lead-in is fine; long delays read as a dead frame)
+- **APPROACH_DUR** — cursor approach duration.
+  - Range: 0.7-1.3 s; faster reads as urgent, slower as deliberate
+- **PRESS_DOWN_AT** — when the press fires.
+  - Constraints: MUST equal `APPROACH_START + APPROACH_DUR` so the cursor arrives exactly when the press begins (avoids "tapping on air")
+- **PRESS_DOWN_DUR** — compression duration.
+  - Range: 0.1-0.25 s
+- **RELEASE_AT** — when the release fires.
+  - Constraints: must be > `PRESS_DOWN_AT + PRESS_DOWN_DUR`; an optional brief hold (0.05-0.4 s, or `HOLD_DUR` for the Hold-press variation) for "thinking" interactions
+- **RELEASE_DUR** — release spring duration.
+  - Range: 0.4-0.7 s (long enough for the overshoot to settle)
+- **BRAND_REVEAL_AT** — when the brand line fades in.
+  - Constraints: must be < `PRESS_DOWN_AT` (context precedes interaction)
+- **BRAND_REVEAL_DUR** — brand fade-in duration.
+  - Range: 0.4-0.8 s
+- **CURSOR_EXIT_AT / CURSOR_EXIT_DUR** — optional outbound cursor motion after release.
+  - Constraints: `CURSOR_EXIT_AT` must be ≥ `RELEASE_AT + RELEASE_DUR` so the cursor exits AFTER the press settles, not during
+
+### Physics
+
+- **PRESS_INTENSITY** — how deep the press compression goes.
+  - Range: 0.05 (subtle) - 0.10 (standard) - 0.15 (heavy)
+  - Applied as `scale: 1 - PRESS_INTENSITY` on both cursor and button (single GSAP target array)
+- **BOUNCE_FACTOR** — `back.out(${BOUNCE_FACTOR})` overshoot on the release.
+  - Range: 1.6 (soft) - 2.0 (firm) - 2.4 (cartoony)
+
+### Positioning
+
+- **CURSOR_START_X / CURSOR_START_Y** — initial cursor position in composition coordinates.
+  - Constraints: off-screen or in a corner far from the button so the approach reads as motion-in, not a teleport
+- **BUTTON_CENTER_X / BUTTON_CENTER_Y** — the button's measured screen-space center.
+  - Source: measured at composition coordinates; for `place-items: center` at 1920×1080 this is `(960, 540)`
+- **CURSOR_EXIT_X / CURSOR_EXIT_Y** — where the cursor moves after release (if used).
+  - Range: any off-stage or out-of-the-way position
+- **BRAND_REVEAL_Y_PX** — brand initial y offset.
+  - Range: 8-20 px
+
+### Layout / typography
+
+- **STACK_GAP** — gap between button and brand line.
+  - Range: 40-96 px
+- **BTN_PADDING_V / BTN_PADDING_H** — button padding.
+  - Range: V 24-40 px, H 60-100 px (horizontal padding 2-3× vertical reads as pill-shaped CTA)
+- **BTN_INNER_GAP** — gap between icon and label inside the button.
+  - Range: 16-32 px
+- **BTN_RADIUS** — button corner radius.
+  - Range: 20-40 px, or `BTN_PADDING_V + BTN_FONT_SIZE/2` for fully rounded ends
+- **BTN_FONT_SIZE / BTN_ICON_SIZE** — typographic sizes inside the button.
+  - Range: font 60-100 px at 1080p; icon ~1.0-1.1× font size
+- **BTN_TRACKING** — letter-spacing on uppercase button text.
+  - Range: 4-12 px
+- **BRAND_SIZE / BRAND_TRACKING** — brand line typography.
+  - Range: 40-60 px, tracking 8-16 px
+- **CURSOR_SIZE** — cursor SVG size.
+  - Range: 48-96 px at 1080p
+
+### Hold-press variation
+
+- **HOLD_DUR** — hold window between press down and release.
+  - Range: 0.3-0.8 s
+- **HOLD_START_AT** — when the glow pulse begins.
+  - Constraints: typically equal to `PRESS_DOWN_AT + PRESS_DOWN_DUR`
+- **GLOW_PULSE_CYCLES** — number of full sine cycles across `HOLD_DUR`.
+  - Range: 1-4 (more cycles read as faster "processing")
+- **GLOW_BASE_ALPHA** — center of the alpha pulse.
+  - Range: 0.15-0.3
+- **GLOW_PULSE_AMP** — peak deviation from `GLOW_BASE_ALPHA`.
+  - Range: 0.1-0.2; must satisfy `GLOW_BASE_ALPHA - GLOW_PULSE_AMP ≥ 0`
+- **GLOW_BLUR** — inset glow blur radius (px).
+  - Range: 24-48 px
+
+### Tokens
+
+- **{sceneBg}** — background gradient/color
+- **{font}** — typographic stack
+- **{btnBg}** — button background (typically gradient toward an accent hue)
+- **{btnTextColor}** — button text color
+- **{btnRestingShadow}** / **{btnPressedShadow}** — outer + inset box-shadow strings for the resting and pressed states
+- **{brandColor}** — accent brand color
+- **{cursorFill}** / **{cursorStroke}** — cursor SVG fill and stroke
+- **{cursorDropShadow}** — `filter: drop-shadow(...)` value for cursor depth
+- **{Brand}** — brand line copy
+- **{ctaCopy}** / **{ctaIcon}** — button label and inline icon glyph
+
+## Key Principles
+
+- **Same press scale on cursor AND button** — physical synchronicity. If only the button scales, the cursor appears to "tap on air"; if only the cursor scales, the button feels disconnected.
+- **Cursor arrives BEFORE press starts** — there must be a clear moment of "cursor over target" before scale change. Otherwise the press is unattributed.
+- **`back.out(${BOUNCE_FACTOR})` for release** — both elements need spring overshoot together. Linear release loses the tactile feel.
+- **Inner glow appears DURING press, fades on release** — visual confirmation of contact. Outer shadow shrinks (pushed-in), inner glow appears (energy concentrated).
+- **Cursor `pointer-events: none`** — the cursor is decorative; if it captures events, hover/click behaviors on button below break.
+- **Cursor `transform-origin: 0 0`** — the arrow's tip is the click point, not its center. Scale around the tip keeps the click point stable.
+- **Climax dwell ≥1 s** — after release, the comp must continue ≥1 s. The press is a beat; viewer needs time to see the result.
+
+## Critical Constraints
+
+- **Timeline must be paused**: `gsap.timeline({ paused: true })`
+- **Registry key = `data-composition-id`**
+- **No CSS `transition`** on either cursor or button — competes with GSAP
+- **Cursor SVG with `pointer-events: none`**
+- **`will-change: transform`** on button (and cursor if desired)
+- **`up-frame > down-frame`** — release MUST come after press; otherwise the comp shows release without press
+- **Don't use real `mouseenter` / `click` events** — HF is a render context, not a UI; everything must run via the timeline
+
+## Combinations
+
+- [press-release-spring.md](press-release-spring.md) — the BUTTON-only press variant; this rule layers cursor on top
+- [cursor-click-ripple.md](cursor-click-ripple.md) — adds a ripple effect at the click point
+- [scale-swap-transition.md](scale-swap-transition.md) — the press TRIGGERS the swap
+
+## Pairs with HF skills
+
+- `/hyperframes-animation` — coordinated multi-target tweens via array
+- `/hyperframes-core` — composition wiring
+- `/hyperframes-cli` — `hyperframes lint`
diff --git a/.claude/skills-media/hyperframes-animation/rules/press-release-spring.md b/.claude/skills-media/hyperframes-animation/rules/press-release-spring.md
new file mode 100644
index 000000000..4e6fb0a5a
--- /dev/null
+++ b/.claude/skills-media/hyperframes-animation/rules/press-release-spring.md
@@ -0,0 +1,296 @@
+---
+name: press-release-spring
+description: Tactile button press with linear compression, spring-based elastic recovery, and layered visual feedback (shadow shrink + release burst + background glow).
+metadata:
+  tags: spring, press, interaction, button, physics, glow, burst, ui
+---
+
+# Press-Release Spring Chain
+
+Separates input (linear compression) from output (spring recovery) to create tactile feel. The overshoot is a natural byproduct of the spring config, not manually coded. Pairs with secondary motion (shadow shrink, release burst, background glow) layered on the same trigger frame.
+
+## How It Works
+
+Two distinct phases split at the **release** moment:
+
+1. **Press**: linear ease → compression (`scale: 1 → PRESS_SCALE`, shadow shrinks). Linear, not spring — the dip must read as instant/tactile, not squishy.
+2. **Release**: `back.out(${BOUNCE_FACTOR})` spring → elastic pop back to `1.0` (overshoot proportional to `BOUNCE_FACTOR`). Optional burst glow ring expands behind the button; optional background environmental glow fades in.
+
+State continuity is critical: the release tween's start value MUST equal the press tween's end value, or the spring snaps to a different position. GSAP threads this automatically when both tweens target the same property at adjacent positions on the same timeline.
+
+## HTML
+
+```html
+<div
+  class="scene"
+  id="press-scene"
+  data-composition-id="press-scene"
+  data-start="0"
+  data-duration="DURATION"
+  data-track-index="0"
+>
+  <div class="press-stage">
+    <div class="bg-glow" id="bg-glow"></div>
+    <div class="burst" id="burst"></div>
+    <button class="btn" id="btn">{buttonLabel}</button>
+  </div>
+</div>
+```
+
+## CSS
+
+```css
+.scene {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  display: grid;
+  place-items: center;
+  background: {bgColor};
+}
+.press-stage {
+  position: relative;
+  display: grid;
+  place-items: center;
+}
+.btn {
+  position: relative;
+  z-index: 2;
+  /* Visual weight: ≥4% of canvas for the press to read on a 1080p frame */
+  width: BTN_WIDTH;
+  height: BTN_HEIGHT;
+  background: {btnBg};
+  border: none;
+  border-radius: BTN_RADIUS;
+  font-family: {font};
+  font-weight: 900;
+  font-size: BTN_FONT_SIZE;
+  letter-spacing: BTN_LETTER_SPACING;
+  color: {btnTextColor};
+  text-transform: uppercase;
+  /* Anchor compression on the center — see Critical Constraints */
+  transform-origin: 50% 50%;
+  /* Initial floating shadow — large + diffuse */
+  box-shadow: {btnRestShadow};
+}
+.burst {
+  /* Sits BEHIND the button, same footprint */
+  position: absolute;
+  z-index: 1;
+  inset: 0;
+  width: BTN_WIDTH;
+  height: BTN_HEIGHT;
+  background: {burstGradient};
+  filter: blur(BURST_BLUR);
+  opacity: 0;
+  transform: scale(1);
+  pointer-events: none;
+}
+.bg-glow {
+  /* Full-stage radial — extends beyond the stage with negative inset */
+  position: absolute;
+  inset: BG_GLOW_INSET;
+  background: {bgGlowGradient};
+  opacity: 0;
+  pointer-events: none;
+}
+```
+
+## GSAP Timeline
+
+```html
+<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+<script>
+  window.__timelines = window.__timelines || {};
+  const tl = gsap.timeline({ paused: true });
+
+  // Phase 1 — press (linear compression)
+  tl.to(
+    "#btn",
+    {
+      scale: PRESS_SCALE,
+      boxShadow: "{btnPressedShadow}",
+      duration: PRESS_DUR,
+      ease: "power1.in",
+    },
+    PRESS_START,
+  );
+
+  // Phase 2 — release (spring back with overshoot)
+  // CRITICAL: start scale == end of phase 1 (PRESS_SCALE) to maintain state continuity.
+  tl.to(
+    "#btn",
+    {
+      scale: 1,
+      boxShadow: "{btnRestShadow}",
+      duration: RELEASE_DUR,
+      ease: `back.out(${BOUNCE_FACTOR})`,
+    },
+    RELEASE_START,
+  );
+
+  // Phase 3 — burst glow (radial pop behind button), triggered with release
+  tl.fromTo(
+    "#burst",
+    { scale: 1, opacity: 0 },
+    {
+      scale: BURST_PEAK_SCALE,
+      opacity: BURST_PEAK_OPACITY,
+      duration: BURST_GROW_DUR,
+      ease: "power2.out",
+    },
+    RELEASE_START,
+  );
+  // Burst then fades out
+  tl.to("#burst", { opacity: 0, duration: BURST_FADE_DUR, ease: "power2.in" }, BURST_FADE_START);
+
+  // Phase 4 — background environmental glow fades in after release
+  tl.to(
+    "#bg-glow",
+    {
+      opacity: BG_GLOW_PEAK_OPACITY,
+      duration: BG_GLOW_FADE_DUR,
+      ease: "power2.out",
+    },
+    RELEASE_START,
+  );
+
+  window.__timelines["press-scene"] = tl;
+</script>
+```
+
+## Variations
+
+### Subtle press (status save / muted CTA)
+
+Less compression, gentler overshoot, smaller burst. `PRESS_SCALE` toward the high end of its range (~0.96), `BOUNCE_FACTOR` toward the low end (~1.4), `BURST_PEAK_SCALE` and `BURST_PEAK_OPACITY` reduced.
+
+### Dramatic press (hero CTA / "ship it" moment)
+
+Deeper compression, more overshoot, larger burst. `PRESS_SCALE` toward the low end (~0.88), `BOUNCE_FACTOR` toward the high end (~2.5), `BURST_PEAK_SCALE` and `BURST_PEAK_OPACITY` maxed.
+
+### Color shift during press
+
+Darken the button mid-press, return on release. Same timeline positions as the scale tweens — interpolated `backgroundColor` on `#btn`. State continuity rule still applies: the release-color tween's start equals the press-color tween's end.
+
+```js
+tl.to("#btn", { backgroundColor: "{btnPressedColor}", duration: PRESS_DUR }, PRESS_START);
+tl.to("#btn", { backgroundColor: "{btnRestColor}", duration: RELEASE_DUR }, RELEASE_START);
+```
+
+### State change at release (approve / confirm pattern)
+
+When the press signals confirmation, swap the button's resting color to a success token at `RELEASE_START` (instead of returning to `{btnRestColor}`), then pop a checkmark via a separate `back.out(${CHECK_BOUNCE})` tween at the same position. The button is now in its terminal state — no further presses expected.
+
+```js
+tl.to("#btn", { backgroundColor: "{successColor}", duration: RELEASE_DUR }, RELEASE_START);
+tl.to(
+  ".btn-check",
+  { scale: 1, duration: CHECK_POP_DUR, ease: `back.out(${CHECK_BOUNCE})` },
+  RELEASE_START,
+);
+```
+
+## How to Choose Values
+
+### Geometry
+
+- **BTN_WIDTH / BTN_HEIGHT** — button footprint.
+  - Range: button area ≥ 3-5% of canvas (a 320×68 button at 1080p is ~1% and reads as visually insignificant)
+  - Effects: smaller → press barely reads; larger → press dominates the frame
+  - Constraints: `BTN_WIDTH × BTN_HEIGHT / (canvasW × canvasH) ≥ 0.03`
+- **BTN_RADIUS** — corner radius.
+  - Range: `BTN_HEIGHT × 0.15` (sharp/modern) → `BTN_HEIGHT / 2` (pill)
+- **BTN_FONT_SIZE / BTN_LETTER_SPACING** — typographic weight.
+  - Range: `BTN_FONT_SIZE ≈ BTN_HEIGHT × 0.4-0.5`; letter-spacing 4-10 px reads as "actionable label"
+
+### Press dynamics
+
+- **PRESS_SCALE** — compression depth.
+  - Range: 0.88 (dramatic) → 0.92 (default) → 0.96 (subtle)
+  - Effects: lower → more tactile / weightier; higher → barely-there acknowledgment
+  - Constraints: never <0.85 (button feels broken) or >0.98 (no perceptible dip)
+- **PRESS_DUR** — compression duration.
+  - Range: 0.10-0.30 s
+  - Effects: shorter → snappier / "instant-feeling"; longer → slow squish
+  - Constraints: shorter than `RELEASE_DUR` (input is faster than spring recovery)
+- **RELEASE_DUR** — spring recovery duration.
+  - Range: 0.40-0.90 s
+  - Effects: shorter → tight pop; longer → loose, wobbly settle
+- **BOUNCE_FACTOR** — `back.out(BOUNCE_FACTOR)` overshoot strength.
+  - Range: 1.4 (soft) → 2.0 (firm pop) → 2.8 (cartoony)
+  - Effects: low end barely overshoots; high end reads as cartoonish; tune by feel
+  - Alternative: switch to `elastic.out(amplitude, period)` for a rubbery oscillation instead of a single overshoot
+- **PRESS_START / RELEASE_START** — timeline positions.
+  - Constraints: `RELEASE_START = PRESS_START + PRESS_DUR` (state continuity — see Critical Constraints)
+
+### Burst glow
+
+- **BURST_PEAK_SCALE** — radial pop max scale.
+  - Range: 3 (subtle) → 6 (default) → 8 (dramatic)
+  - Constraints: ≤ ~8 — beyond that the radial gradient pixelates visibly
+- **BURST_PEAK_OPACITY** — burst max opacity.
+  - Range: 0.4 (subtle) → 0.8 (default) → 1.0 (dramatic)
+- **BURST_GROW_DUR / BURST_FADE_DUR** — grow vs. fade timing.
+  - Range: 0.4-0.7 s each; default grow ≈ fade
+- **BURST_BLUR** — gaussian blur on the burst layer.
+  - Range: 40-100 px; smaller reads as a hard ring, larger as ambient haze
+
+### Background glow
+
+- **BG_GLOW_PEAK_OPACITY** — peak environmental glow.
+  - Range: 0.1 (subtle) → 0.25 (default) → 0.45 (dramatic)
+  - Constraints: ≤ 0.45 — higher washes the whole composition
+- **BG_GLOW_FADE_DUR** — fade-in duration.
+  - Range: 0.6-1.0 s
+- **BG_GLOW_INSET** — negative inset so the radial extends past the stage edges.
+  - Range: typically `-300` to `-500` px on a 1920×1080 canvas
+
+### Optional "approve" variation
+
+- **CHECK_BOUNCE** — checkmark pop overshoot.
+  - Range: 1.4-2.0; firmer than the button's main `BOUNCE_FACTOR` to read as a punctuating "stamp"
+- **CHECK_POP_DUR** — checkmark scale-up duration.
+  - Range: 0.3-0.6 s
+
+### Tokens
+
+- **{btnBg} / {btnRestColor} / {btnPressedColor}** — primary button surface; pressed darker than rest
+- **{btnRestShadow} / {btnPressedShadow}** — rest shadow is large + diffuse; pressed is small + tight (the button "sinks toward the surface")
+- **{burstGradient}** — radial; saturated near center, fading to transparent (color should be darker + more saturated than `{btnBg}` — same-color glow looks washed out)
+- **{bgGlowGradient}** — full-stage radial, low-opacity tint of `{btnBg}`'s hue family
+- **{successColor}** — confirmation green / brand-success for the approve variation
+
+## Key Principles
+
+- **State continuity** — release start value MUST exactly match press end value. With a GSAP timeline, the first tween's end value automatically becomes the second tween's start when they target the same property at adjacent times.
+- **Visual weight** — button area should be **≥3-5% of canvas**. Smaller and the press reads as visually insignificant.
+- **Linear press, spring release** — the compression is `power1.in/out`, the recovery is `back.out`. Both spring → squishy; both linear → mechanical / no overshoot punch.
+- **Anchor compression on center** — `transform-origin: 50% 50%` (default). Otherwise the button collapses asymmetrically.
+- **Burst behind, not in front** — burst `z-index: 1`, button `z-index: 2`. If burst sits in front, it occludes the button at peak opacity.
+- **Glow color darker + more saturated than element** — bright surface → dark, saturated glow. Same-color glow looks washed out.
+- **Don't tween `boxShadow` and `filter` together on the same element** — they compete in the layout pipeline; pick one. Shadow on the button, blur on a separate burst layer.
+- **Climax beats need dwell time** — after the burst peak + label/wordmark reveal, the composition must run for **≥1s more** (≥2s for "dramatic" variants) before ending. A reveal at `t=DURATION−0.2s` reads as "flashed and gone."
+
+## Critical Constraints
+
+- **Timeline must be paused**: `gsap.timeline({ paused: true })`
+- **Registry key = `data-composition-id`**
+- **No CSS `transition`** on the button — those interpolate independently of HF seek and cause flicker
+- **`will-change: transform`** if the button compounds with other animation layers
+- **`RELEASE_START = PRESS_START + PRESS_DUR`** — adjacency on the same property is what makes state continuity automatic; gap or overlap breaks it
+- **Burst max scale ≤ ~8** — beyond that the radial gradient pixelates visibly
+- **Background glow `opacity ≤ 0.45`** — higher and it washes the whole composition
+- **GSAP transform aliases only**: `x`, `y`, `scale`, `rotation`. Never tween `width` / `height` / `left` / `top`.
+
+## Combinations
+
+- [sine-wave-loop.md](sine-wave-loop.md) — idle micro-float on the button BEFORE the press (slight breathing, sells "ready")
+- [center-outward-expansion.md](center-outward-expansion.md) — burst of badges outward synced to the press release
+- [cursor-click-ripple.md](cursor-click-ripple.md) — cursor click that triggers the press
+
+## Pairs with HF skills
+
+- `/hyperframes-animation` — `back.out` ease + multi-tween coordination
+- `/hyperframes-core` — composition wiring
+- `/hyperframes-cli` — `hyperframes lint`
diff --git a/.claude/skills-media/hyperframes-animation/rules/reactive-displacement.md b/.claude/skills-media/hyperframes-animation/rules/reactive-displacement.md
new file mode 100644
index 000000000..d8c0b0b5f
--- /dev/null
+++ b/.claude/skills-media/hyperframes-animation/rules/reactive-displacement.md
@@ -0,0 +1,277 @@
+---
+name: reactive-displacement
+description: Physical collision where an entering element's spring drives the exiting element's displacement — single source of truth makes the motion causally linked.
+metadata:
+  tags: transition, physics, collision, displacement, spring, causal
+---
+
+# Reactive Displacement
+
+Exit animation of element A is mathematically DERIVED from the entry spring of element B. Creates a causal link: "A moves _because_ B hit it." Distinct from [scale-swap-transition](scale-swap-transition.md) (which overlaps but isn't causal) and [card-morph-anchor](card-morph-anchor.md) (which uses one container morphing dimensions).
+
+## How It Works
+
+A single 0→1 driver tween (the "entry spring") feeds two derived motions:
+
+- **Intruder** (B, entering): position interpolated from off-stage to settled
+- **Victim** (A, exiting): position interpolated from settled to off-stage in the OPPOSITE direction, but completing at a fraction `VICTIM_FRACTION` of the driver (not 1.0)
+
+The fact that the victim's exit finishes BEFORE the intruder's entry creates the "hit then settle" rhythm. Both motions share the same eased driver, so the impact moment is mathematically synchronized.
+
+## HTML
+
+```html
+<div
+  class="scene"
+  id="collide-scene"
+  data-composition-id="collide-scene"
+  data-start="0"
+  data-duration="3"
+  data-track-index="0"
+>
+  <div class="stage">
+    <div class="card victim" id="victim">
+      <div class="card-title">{victimHeadline}</div>
+      <div class="card-sub">{victimSubline}</div>
+    </div>
+    <div class="card intruder" id="intruder">
+      <div class="card-title">{intruderHeadline}</div>
+      <div class="card-sub">{intruderSubline}</div>
+    </div>
+  </div>
+</div>
+```
+
+## CSS
+
+```css
+.scene {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  background: radial-gradient(ellipse at center, {bgColor} 0%, {bgColorDeep} 70%);
+  font-family: {font};
+}
+.stage {
+  position: absolute;
+  inset: 0;
+  display: grid;
+  place-items: center;
+}
+.card {
+  position: absolute;
+  /* both at center; transform translates them */
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 24px;
+  padding: 64px 80px;
+  border-radius: 28px;
+  will-change: transform, opacity;
+}
+.victim {
+  background: linear-gradient(160deg, {victimTint} 0%, {bgColorDeep} 70%);
+  border: 1px solid {victimTint};
+  z-index: 1;
+}
+.intruder {
+  background: linear-gradient(160deg, {intruderTint} 0%, {bgColorDeep} 70%);
+  border: 2px solid {intruderBorder};
+  box-shadow: 0 28px 96px {intruderTint};
+  z-index: 2;
+}
+.card-title {
+  font-size: 200px;
+  font-weight: 900;
+  color: {textColor};
+  line-height: 1;
+  letter-spacing: -4px;
+}
+.card-sub {
+  font-size: 36px;
+  font-weight: 800;
+  letter-spacing: 10px;
+  text-transform: uppercase;
+  color: {accentColor};
+  text-align: center;
+}
+```
+
+## GSAP Timeline
+
+```html
+<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+<script>
+  window.__timelines = window.__timelines || {};
+  const tl = gsap.timeline({ paused: true });
+
+  // Off-stage distances are derived from the stage width.
+  const INTRUDER_START_X = STAGE_W; // off-stage right
+  const VICTIM_END_X = -STAGE_W; // off-stage left, opposite direction
+
+  // Initial state — victim centered, intruder off-stage right
+  gsap.set("#victim", { x: 0, opacity: 1, rotation: 0 });
+  gsap.set("#intruder", { x: INTRUDER_START_X, opacity: 0, rotation: -INTRUDER_TILT });
+
+  // Single driver — the entry spring — runs 0→1 over the impact arc
+  const driver = { p: 0 };
+  tl.to(
+    driver,
+    {
+      p: 1,
+      duration: DRIVER_DUR,
+      ease: `back.out(${BOUNCE_FACTOR})`, // intruder spring
+      onUpdate: () => {
+        // Intruder: full 0→1 progress maps to enter (off-stage → center)
+        const intruderX = INTRUDER_START_X * (1 - driver.p);
+        const intruderOpacity = Math.min(1, driver.p * FADE_IN_SHARPNESS);
+        const intruderRot = -INTRUDER_TILT * (1 - driver.p); // settle to 0°
+        const intruder = document.getElementById("intruder");
+        intruder.style.transform = `translate(-50%, -50%) translateX(${intruderX}px) rotate(${intruderRot}deg)`;
+        intruder.style.opacity = String(intruderOpacity);
+
+        // Victim: completes exit at VICTIM_FRACTION of driver (intruder still flying in)
+        // so the impact MOMENT is the visual punch — by the time intruder centers,
+        // victim is already off-stage.
+        const victimP = Math.min(1, driver.p / VICTIM_FRACTION);
+        const victimX = VICTIM_END_X * victimP;
+        const victimOpacity = 1 - victimP;
+        const victim = document.getElementById("victim");
+        victim.style.transform = `translate(-50%, -50%) translateX(${victimX}px)`;
+        victim.style.opacity = String(victimOpacity);
+      },
+    },
+    DRIVER_AT,
+  );
+
+  // Climax dwell — intruder holds at center after settle (no additional motion;
+  // composition continues with intruder centered for ≥ DWELL_MIN seconds).
+
+  window.__timelines["collide-scene"] = tl;
+</script>
+```
+
+## How to Choose Values
+
+- **DRIVER_AT** — when the entry spring begins
+  - Range: phase-dependent (typically a few seconds in)
+  - Effects: too early skips setup beats; too late stalls the cut
+  - Constraints: must allow ≥ DWELL_MIN of climax dwell before composition ends
+  - Reference: example schedules the displacement after the prior reading beat resolves
+
+- **DRIVER_DUR** — full intruder entry duration
+  - Range: 0.6-1.4 s
+  - Effects: short = zippy/punchy impact; long = heavy/landed impact
+  - Constraints: tune against `BOUNCE_FACTOR` — higher bounce on long durations reads as floaty
+  - Reference: see the corresponding blueprint / example
+
+- **BOUNCE_FACTOR** — `back.out()` coefficient on the intruder spring
+  - Range: 1.2-2.0 (discrete choice within `back.out` family)
+  - Effects: low ≈ firm settle; high ≈ overshoot/bounce
+  - Constraints: ease family stays `back.out` (or upgrade to `elastic.out` if you want oscillation); changing family rewrites the feel
+  - Reference: examples typically sit between 1.4 and 1.6
+
+- **VICTIM_FRACTION** — fraction of `DRIVER_DUR` over which the victim completes its exit
+  - Range: 0.4-0.5
+  - Effects: < 0.4 victim disappears before impact reads; > 0.5 motion feels parallel, not causal
+  - Constraints: hard upper limit ~0.6; beyond that the collision metaphor breaks
+  - Reference: this rule's pattern uses ~0.5
+
+- **STAGE_W** — stage width in pixels, used to place elements off-stage
+  - Range: equal to the composition's `data-width`
+  - Effects: smaller values leave the off-stage element partially visible at start
+  - Constraints: must be ≥ composition width
+  - Reference: examples use the project's render width directly
+
+- **INTRUDER_TILT** — initial rotation (degrees) the intruder rotates from as it settles to 0°
+  - Range: 5-15°
+  - Effects: low = clean glide; high = visible "spin-and-plant"
+  - Constraints: keep sign consistent with entry direction (matches momentum transfer)
+  - Reference: ~10° is a typical mid-impact tilt
+
+- **FADE_IN_SHARPNESS** — multiplier controlling how quickly intruder opacity reaches 1
+  - Range: 3-8 (intruder reaches opacity 1 at `1/FADE_IN_SHARPNESS` of progress)
+  - Effects: low = soft fade alongside motion; high = pops in early and reads as solid
+  - Constraints: > 1; below 1 means intruder is still transparent at center
+  - Reference: most examples use a sharp early reveal
+
+- **DWELL_MIN** — minimum climax dwell after the intruder settles
+  - Range: ≥ 1.0 s
+  - Effects: shorter feels rushed and unreadable; longer stalls the comp
+  - Constraints: post-impact dwell is where the new content gets read — do not skip
+  - Reference: 1.0-1.5 s is typical
+
+## Variations
+
+### Impact rotation on victim
+
+The victim doesn't just slide off — it ALSO rotates from the impact angle:
+
+```js
+const victimRot = victimP * -VICTIM_KICK_DEG; // rotates as it slides
+victim.style.transform = `translate(-50%, -50%) translateX(${victimX}px) rotate(${victimRot}deg)`;
+```
+
+`VICTIM_KICK_DEG` is typically 15-25°; pick magnitude to match the perceived intruder weight.
+
+### Vertical collision
+
+Intruder enters from top, victim displaced downward. Same math with Y instead of X. Visual feels like "weight dropped on it."
+
+### Wobble after settle
+
+After the intruder centers, a damped sine wobble (`±WOBBLE_AMP_DEG` rotation, decaying over `WOBBLE_DUR`) before stillness. Adds "impact aftermath" before climax dwell.
+
+```js
+const wobble = { p: 0 };
+tl.to(
+  wobble,
+  {
+    p: Math.PI * WOBBLE_CYCLES * 2,
+    duration: WOBBLE_DUR,
+    ease: "none",
+    onUpdate: () => {
+      const rot =
+        Math.sin(wobble.p) * WOBBLE_AMP_DEG * (1 - wobble.p / (Math.PI * WOBBLE_CYCLES * 2)); // linear decay
+      intruder.style.transform = `translate(-50%, -50%) rotate(${rot}deg)`;
+    },
+  },
+  DRIVER_AT + DRIVER_DUR,
+);
+```
+
+### Multi-victim ripple
+
+Intruder displaces multiple aligned cards, each victim getting a slightly delayed exit (cascade ripple). Each victim's `victimP` uses a different driver phase offset.
+
+## Key Principles
+
+- **Single driver = single source of truth** — the entry spring drives BOTH motions. Independent tweens for intruder and victim destroy the causal link; they'd just happen to be near each other in time, not collided.
+- **Victim completes at a fraction of driver** — by the time the intruder reaches center, the victim is GONE. The "hit" is the moment they overlap; after that the victim is just exiting space the intruder will fill.
+- **Directional momentum transfer** — intruder from positive X → victim moves negative X. Same axis. If they move on different axes, it looks like they passed each other, not collided.
+- **Intruder z-index ABOVE victim** — during overlap, the intruder should appear in FRONT (it's the "winner" of the collision). Otherwise the victim looks like it tunneled through.
+- **Intruder enters with rotation, settles flat** — adds momentum visualization. A small initial tilt → 0° at settle reads as "spinning in then planting."
+- **Climax dwell after impact** — the impact is the headline beat. Post-impact dwell is where the new content gets read.
+
+## Critical Constraints
+
+- **Timeline must be paused**: `gsap.timeline({ paused: true })`
+- **Registry key = `data-composition-id`**
+- **Single driver, multiple derived values in same onUpdate** — don't tween intruder and victim with separate `tl.to()` calls; use ONE driver and compute both inside its onUpdate
+- **`overflow: hidden` on `.scene`** — off-stage motion exceeds the frame
+- **`will-change: transform, opacity`** on both cards
+- **Intruder z-index > victim z-index** — explicit, not relying on DOM order alone
+
+## Combinations
+
+- [hacker-flip-3d.md](hacker-flip-3d.md) — intruder text reveals via hacker-flip during the entry phase
+- [sine-wave-loop.md](sine-wave-loop.md) — idle breathing on intruder during climax dwell
+- [vertical-spring-ticker.md](vertical-spring-ticker.md) — intruder is a ticker that "shoves" the previous content out
+
+## Pairs with HF skills
+
+- `/hyperframes-animation` — single driver, multi-value onUpdate
+- `/hyperframes-core` — composition wiring
+- `/hyperframes-cli` — `hyperframes lint`
diff --git a/.claude/skills-media/hyperframes-animation/rules/scale-swap-transition.md b/.claude/skills-media/hyperframes-animation/rules/scale-swap-transition.md
new file mode 100644
index 000000000..799e93f35
--- /dev/null
+++ b/.claude/skills-media/hyperframes-animation/rules/scale-swap-transition.md
@@ -0,0 +1,298 @@
+---
+name: scale-swap-transition
+description: Coordinated shrink-out + spring pop-in morph-like transition between two elements — no SVG path interpolation needed.
+metadata:
+  tags: transition, morph, scale, swap, spring, pop
+---
+
+# Scale-Swap Transition
+
+Simulates a "morph" between two DOM elements by overlapping exit and entrance scale animations. Lighter weight than [card-morph-anchor](card-morph-anchor.md) (which morphs container dimensions) and easier than SVG path interpolation.
+
+## How It Works
+
+At a single trigger time, two coordinated tweens fire:
+
+1. **Outgoing element**: scale `1.0 → EXIT_SCALE` + opacity `1 → 0` (fast `power2.in`)
+2. **Incoming element**: scale `EXIT_SCALE → 1.0` + opacity `0 → 1` (bouncy `back.out(${BOUNCE_FACTOR})` with overshoot)
+
+A small `OVERLAP` window during which both are mid-tween creates the "morph" illusion. Incoming sits on top via z-index so the outgoing's fade-tail doesn't bleed through.
+
+## HTML
+
+```html
+<div
+  class="scene"
+  id="swap-scene"
+  data-composition-id="swap-scene"
+  data-start="0"
+  data-duration="3"
+  data-track-index="0"
+>
+  <div class="stack">
+    <div class="swap-wrap">
+      <div class="card outgoing" id="outgoing">
+        <div class="icon">{outgoingIcon}</div>
+        <div class="title">{outgoingLabel}</div>
+      </div>
+      <div class="card incoming" id="incoming">
+        <div class="icon">{incomingIcon}</div>
+        <div class="title">{incomingLabel}</div>
+        <div class="sub" id="sub">{incomingSubline}</div>
+      </div>
+    </div>
+    <div class="brand">{Brand}</div>
+  </div>
+</div>
+```
+
+## CSS
+
+```css
+.scene {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  display: grid;
+  place-items: center;
+  background: {sceneBg};
+  font-family: {font};
+}
+.stack {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: STACK_GAP;
+}
+.swap-wrap {
+  position: relative;
+  width: SWAP_WRAP_W;
+  height: SWAP_WRAP_H;
+}
+.card {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: CARD_INNER_GAP;
+  border-radius: CARD_RADIUS;
+  padding: CARD_PADDING;
+  /* Both elements share transform-origin so they "morph" around the same anchor */
+  transform-origin: 50% 50%;
+  will-change: transform, opacity;
+}
+.card .icon {
+  font-size: ICON_SIZE;
+}
+.card .title {
+  font-size: TITLE_SIZE;
+  font-weight: 900;
+  letter-spacing: TITLE_TRACKING;
+  text-transform: uppercase;
+}
+.card .sub {
+  font-size: SUB_SIZE;
+  font-weight: 700;
+  color: {accentColor};
+  opacity: 0;
+}
+.outgoing {
+  z-index: 1;
+  background: {outgoingBg};
+  border: 1px solid {outgoingBorder};
+  color: {textColor};
+}
+.incoming {
+  /* Incoming starts hidden + smaller, will pop in */
+  z-index: 2;
+  background: {incomingBg};
+  border: 1px solid {incomingBorder};
+  color: {textColor};
+  opacity: 0;
+  transform: scale(EXIT_SCALE);
+}
+.brand {
+  font-size: BRAND_SIZE;
+  font-weight: 900;
+  letter-spacing: BRAND_TRACKING;
+  text-transform: uppercase;
+  color: {brandColor};
+}
+```
+
+## GSAP Timeline
+
+```html
+<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+<script>
+  window.__timelines = window.__timelines || {};
+  const tl = gsap.timeline({ paused: true });
+
+  // Outgoing: shrink + fade fast
+  tl.to(
+    "#outgoing",
+    {
+      scale: EXIT_SCALE,
+      opacity: 0,
+      duration: EXIT_DUR,
+      ease: "power2.in",
+    },
+    TRIGGER,
+  );
+
+  // Incoming: scale up + fade in with overshoot, starts slightly BEFORE outgoing
+  // finishes (OVERLAP creates the morph illusion).
+  tl.to(
+    "#incoming",
+    {
+      scale: 1.0,
+      opacity: 1,
+      duration: ENTER_DUR,
+      ease: `back.out(${BOUNCE_FACTOR})`,
+    },
+    TRIGGER + EXIT_DUR - OVERLAP,
+  );
+
+  // Subline reveals AFTER the incoming card settles
+  tl.fromTo(
+    "#sub",
+    { opacity: 0, y: SUB_REVEAL_Y_PX },
+    { opacity: 1, y: 0, duration: SUB_REVEAL_DUR, ease: "power3.out" },
+    TRIGGER + EXIT_DUR + SUB_REVEAL_DELAY,
+  );
+
+  // Brand fades in early for context
+  tl.from(
+    ".brand",
+    { opacity: 0, y: BRAND_REVEAL_Y_PX, duration: BRAND_REVEAL_DUR, ease: "power3.out" },
+    BRAND_REVEAL_AT,
+  );
+
+  window.__timelines["swap-scene"] = tl;
+</script>
+```
+
+## Variations
+
+### Delayed inner content reveal
+
+The classic pattern: morph the container, then reveal inner text once the container has settled (as in the example above with `.sub`). The 0.2-0.4s gap between morph end and content reveal lets the viewer's eye land on the new container shape before reading the content.
+
+### Triple swap (3-state cycle)
+
+Chain: A→B→C with two triggers `TRIGGER_AB` and `TRIGGER_BC`. Each transition needs its own pair of tweens, and the previous incoming becomes the next outgoing. Useful for state evolution narratives (e.g. early-state → mid-state → final-state labels).
+
+```js
+tl.to("#stateA", { scale: EXIT_SCALE, opacity: 0, duration: EXIT_DUR }, TRIGGER_AB);
+tl.to(
+  "#stateB",
+  { scale: 1.0, opacity: 1, duration: ENTER_DUR, ease: `back.out(${BOUNCE_FACTOR})` },
+  TRIGGER_AB + EXIT_DUR - OVERLAP,
+);
+tl.to("#stateB", { scale: EXIT_SCALE, opacity: 0, duration: EXIT_DUR }, TRIGGER_BC);
+tl.to(
+  "#stateC",
+  { scale: 1.0, opacity: 1, duration: ENTER_DUR, ease: `back.out(${BOUNCE_FACTOR})` },
+  TRIGGER_BC + EXIT_DUR - OVERLAP,
+);
+```
+
+### Color-shift transition (no scale)
+
+For a flat morph between two same-shape states, drop the scale and keep only opacity + a brief background hue tween. Less dramatic but matches a more product-UI tone.
+
+## How to Choose Values
+
+### Timing (seconds)
+
+- **TRIGGER** — when the swap fires.
+  - Constraints: must be ≥ the outgoing element's settled time + a presence-dwell so the outgoing "lands" before transforming
+- **EXIT_DUR** — outgoing shrink + fade duration.
+  - Range: 0.3-0.5 s
+- **ENTER_DUR** — incoming pop-in duration.
+  - Range: 0.45-0.7 s (longer than `EXIT_DUR` to let the overshoot settle)
+- **OVERLAP** — how much the entrance starts before the exit finishes.
+  - Range: 0.1-0.2 s
+  - Constraints: too much (>0.3 s) makes both clearly visible together (no morph); too little (<0.05 s) leaves a visible empty gap
+- **SUB_REVEAL_DELAY** — gap between incoming settle and subline reveal.
+  - Range: 0.2-0.4 s; reveals during the morph compete with the swap for attention
+- **SUB_REVEAL_DUR** — subline fade-in.
+  - Range: 0.3-0.5 s
+- **BRAND_REVEAL_AT** — when the brand/context line fades in.
+  - Constraints: must be < `TRIGGER` (brand is context for the swap, not synchronous with it)
+- **BRAND_REVEAL_DUR** — brand fade-in duration.
+  - Range: 0.4-0.8 s
+
+### Physics
+
+- **EXIT_SCALE** — target scale for outgoing (and starting scale for incoming).
+  - Range: 0.6-0.8; smaller exits feel more dramatic but risk reading as "vanish" instead of "morph"
+- **BOUNCE_FACTOR** — `back.out(${BOUNCE_FACTOR})` overshoot on the incoming.
+  - Range: 1.4 (soft) - 1.8 (firm) - 2.2 (cartoony)
+
+### Positioning offsets
+
+- **SUB_REVEAL_Y_PX** — subline initial y offset (positive = below resting).
+  - Range: 8-20 px
+- **BRAND_REVEAL_Y_PX** — brand initial y offset.
+  - Range: 10-24 px
+
+### Layout
+
+- **STACK_GAP** — gap between swap container and brand line.
+  - Range: 40-96 px
+- **SWAP_WRAP_W / SWAP_WRAP_H** — fixed swap container dimensions; both cards `inset: 0` inside.
+  - Constraints: pick dimensions that fit both states' content; the wrap does not resize during the swap
+- **CARD_INNER_GAP** — gap between icon and title inside a card.
+  - Range: 16-32 px
+- **CARD_RADIUS / CARD_PADDING** — card corner radius and inner padding.
+  - Range: radius 24-40 px; padding 32-64 px
+- **ICON_SIZE / TITLE_SIZE / SUB_SIZE / BRAND_SIZE** — typographic sizes.
+  - Constraints: titles dominate (~80-120 px at 1080p); sub and brand are accent-sized
+- **TITLE_TRACKING / BRAND_TRACKING** — letter-spacing on uppercase labels.
+  - Range: 4-16 px (uppercase reads better with positive tracking)
+
+### Tokens
+
+- **{sceneBg}** — background gradient/color
+- **{font}** — typographic stack
+- **{textColor}** / **{accentColor}** / **{brandColor}** — semantic color tokens
+- **{outgoingBg}** / **{outgoingBorder}** — outgoing card surface + border (typically warm or pre-action hue)
+- **{incomingBg}** / **{incomingBorder}** — incoming card surface + border (typically cool or post-action hue)
+- **{outgoingIcon}** / **{incomingIcon}** — single glyph/emoji per state
+- **{outgoingLabel}** / **{incomingLabel}** — state labels
+- **{incomingSubline}** — supporting copy that fades in after the incoming settles
+- **{Brand}** — brand line shown beneath the swap
+
+## Key Principles
+
+- **Incoming z-index ABOVE outgoing** — without this, the outgoing's fade-tail (opacity 0.3-0.5) bleeds through the incoming's lower opacity and creates a "double-exposed" muddy frame
+- **Both elements share `transform-origin: 50% 50%`** — different origins make the morph feel like one thing teleporting somewhere else
+- **`OVERLAP` in the 0.1-0.2 s window** — too much overlap and both are clearly visible together (no morph); too little and there's a visible empty gap
+- **Bouncy ease ONLY for the incoming** — outgoing uses `power2.in` (rushing away), incoming uses `back.out(${BOUNCE_FACTOR})` (arriving with weight). Reverse it and the swap feels mechanical
+- **Inner content reveals AFTER container settles** — see `SUB_REVEAL_DELAY`. Reveals during the morph compete for attention and lose
+- **Climax dwell ≥1 s after final state lands** — see SKILL universal constraints. After incoming + subline both settle, hold for ≥1 s
+- **Brand reveal early, not at the swap** — context (brand, eyebrow) sets the stage; the swap is the headline. If brand reveals AT the swap, it competes
+
+## Critical Constraints
+
+- **Timeline must be paused**: `gsap.timeline({ paused: true })`
+- **Registry key = `data-composition-id`**
+- **No CSS `transition`** on either swap element — competes with GSAP
+- **`will-change: transform, opacity`** on both swap elements
+- **Both elements use `position: absolute; inset: 0`** in the same wrapper — they occupy the same footprint, swap fades one out and pops one in
+- **Don't `display: none` the outgoing** after fade — leave it at `opacity: 0` so layout doesn't reflow
+
+## Combinations
+
+- [press-release-spring.md](press-release-spring.md) — button press TRIGGERS the swap (cause and effect)
+- [sine-wave-loop.md](sine-wave-loop.md) — idle breathing on the final state
+- [card-morph-anchor.md](card-morph-anchor.md) — alternative for SHAPE-changing transitions (this rule is for SAME-shape state swaps)
+
+## Pairs with HF skills
+
+- `/hyperframes-animation` — two coordinated tweens with overlap
+- `/hyperframes-core` — composition wiring
+- `/hyperframes-cli` — `hyperframes lint`
diff --git a/.claude/skills-media/hyperframes-animation/rules/sine-wave-loop.md b/.claude/skills-media/hyperframes-animation/rules/sine-wave-loop.md
new file mode 100644
index 000000000..81aff5ecb
--- /dev/null
+++ b/.claude/skills-media/hyperframes-animation/rules/sine-wave-loop.md
@@ -0,0 +1,278 @@
+---
+name: sine-wave-loop
+description: Bounded sine-driven idle — subtle jitter or a single genuinely-needed bounded ambient breath on a held element. De-emphasized: circular breathing as "aliveness" is cheap; prefer sequential reveal timed to the VO, then subtle jitter, before reaching here.
+metadata:
+  tags: idle, jitter, bounded-ambient, sine, trigonometry, low-amplitude, post-entry
+---
+
+# Sine Wave Loop (subtle jitter / bounded ambient)
+
+> **Reach for this last.** Per the motion doctrine (`references/motion-language.md`): **circular breathing — scaling text/cards up and down to look "alive" — is cheap, the agent's reflexive cheat, and reads weak.** "I'd rather have NO motion than BAD motion." Before using this rule to keep a held frame alive, prefer (1) **sequential reveal timed to the voiceover** — reveal the next line/element when the VO says it, across the back ~50% of the scene; that, not ambient motion, is what fills a shot. If a frame has genuinely settled and still needs a touch of life, the **sanctioned move is subtle jitter** — a small, low-amplitude jitter (this rule, at the LOW end of its amplitude range). A full breathing loop is reserved for the rare case where a single held hero genuinely needs bounded ambient; keep it de-emphasized and small.
+
+Keeps a settled element from feeling dead — as **subtle jitter** or, rarely, a single bounded ambient breath — using `Math.sin` driven by a finite timeline tween. This is the implementation behind the "subtle jitter" move in the motion vocabulary; it is **not** a license to breathe every hero.
+
+## How It Works
+
+A long tween advances a `phase` value from 0 → 2π (or 0 → some multiple thereof). On every onUpdate, the phase feeds into `Math.sin()` to produce a small periodic offset added to the element's transform (`scale`, `translateY`, `rotate`).
+
+The trick to a "no jump" transition from entry to idle: at `phase = 0`, `sin(0) = 0` — the offset is zero, so the element starts at its post-entry resting state.
+
+## HTML
+
+```html
+<div
+  class="scene"
+  id="idle-scene"
+  data-composition-id="idle-scene"
+  data-start="0"
+  data-duration="6"
+  data-track-index="0"
+>
+  <div class="stack">
+    <div class="hero" id="hero">{HeroLabel}</div>
+    <div class="dot" id="dot"></div>
+  </div>
+</div>
+```
+
+## CSS
+
+```css
+.scene {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  display: grid;
+  place-items: center;
+  background: {bgGradient};
+}
+.stack {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: STACK_GAP;
+}
+.hero {
+  font-family: {font};
+  font-weight: 900;
+  font-size: HERO_FONT_SIZE;
+  letter-spacing: HERO_LETTER_SPACING;
+  color: {textColor};
+  text-transform: uppercase;
+  /* Element gets its post-entry resting transform; idle only ADDS to it */
+  will-change: transform;
+}
+.dot {
+  width: DOT_SIZE;
+  height: DOT_SIZE;
+  border-radius: 50%;
+  background: {accentColor};
+  box-shadow: {accentGlow};
+}
+```
+
+## GSAP Timeline
+
+```html
+<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+<script>
+  window.__timelines = window.__timelines || {};
+  const tl = gsap.timeline({ paused: true });
+
+  const hero = document.getElementById("hero");
+  const dot = document.getElementById("dot");
+
+  // Phase 1 — entry beat (e.g. headline fade-up)
+  tl.fromTo(
+    hero,
+    { opacity: 0, y: ENTRY_Y, scale: ENTRY_SCALE },
+    { opacity: 1, y: 0, scale: 1, duration: ENTRY_DUR, ease: "power3.out" },
+    0,
+  );
+  tl.fromTo(
+    dot,
+    { opacity: 0, scale: 0 },
+    { opacity: 1, scale: 1, duration: DOT_ENTRY_DUR, ease: `back.out(${BOUNCE_FACTOR})` },
+    DOT_ENTRY_START,
+  );
+
+  // Phase 2 — idle breathing. Starts at IDLE_START_TIME AFTER entry settles.
+  // Drive a phase 0 → 2π * CYCLES via a single tween, write sin() into transforms.
+
+  const phase = { p: 0 };
+  tl.to(
+    phase,
+    {
+      p: Math.PI * 2 * CYCLES,
+      duration: IDLE_DUR,
+      ease: "none",
+      onUpdate: () => {
+        // Hero: scale breathes ±SCALE_AMP, y bobs ±Y_AMP_PX
+        const scale = 1 + Math.sin(phase.p) * SCALE_AMP;
+        const y = Math.sin(phase.p) * Y_AMP_PX;
+        hero.style.transform = `translateY(${y}px) scale(${scale})`;
+
+        // Dot: out-of-phase scale (offset by π/2) — feels alive vs synced
+        const dotScale = 1 + Math.sin(phase.p + Math.PI / 2) * DOT_SCALE_AMP;
+        dot.style.transform = `scale(${dotScale})`;
+      },
+    },
+    IDLE_START_TIME,
+  );
+
+  window.__timelines["idle-scene"] = tl;
+</script>
+```
+
+## Variations
+
+### Multiple offset frequencies (organic multi-octave breathing)
+
+Combining frequencies feels more alive than pure sine:
+
+```js
+const primary = Math.sin(phase.p) * SCALE_AMP_PRIMARY;
+const secondary = Math.sin(phase.p * OCTAVE_RATIO) * SCALE_AMP_SECONDARY; // higher-frequency overlay
+const scale = 1 + primary + secondary;
+```
+
+### Conditional activation (only after entry settles)
+
+If entry is interactive or skippable, gate the idle:
+
+```js
+const idleActive = entryProgress >= GATE_THRESHOLD;
+const scale = idleActive ? 1 + Math.sin((time - IDLE_START_TIME) / PERIOD) * SCALE_AMP : 1;
+```
+
+### Settle and fade (long-idle gate — strongly recommended when `IDLE_DUR > 6s`)
+
+Drive amplitude through an envelope that fades to zero over the last ~20% of idle, so the scene visibly settles before the inter-scene transition lands:
+
+```js
+const phase = { p: 0 };
+const FADE_FRAC = 0.2; // last 20% of idle = amplitude ramps to 0
+tl.to(
+  phase,
+  {
+    p: Math.PI * 2 * CYCLES,
+    duration: IDLE_DUR,
+    ease: "none",
+    onUpdate: () => {
+      const t = phase.p / (Math.PI * 2 * CYCLES); // 0 → 1 across idle
+      const env = t < 1 - FADE_FRAC ? 1 : (1 - t) / FADE_FRAC; // 1 → 0 in tail
+      const scale = 1 + Math.sin(phase.p) * SCALE_AMP * env;
+      const y = Math.sin(phase.p) * Y_AMP_PX * env;
+      hero.style.transform = `translateY(${y}px) scale(${scale})`;
+    },
+  },
+  IDLE_START_TIME,
+);
+```
+
+The element is in motion for the first 80% of idle, then comes to rest in the last 20%. Pairs naturally with break-boundary Tier-B transitions (the outgoing visual is static when the crossfade/push begins).
+
+### Period vs cycle math
+
+For an exact cycle of N seconds:
+
+```js
+const divisor = (idleDurationSec * fps) / (Math.PI * 2);
+const value = Math.sin(frame / divisor) * amplitude;
+```
+
+For HF (`onUpdate` doesn't expose frame directly), use the tween's `phase` value: drive `p: Math.PI * 2 * cyclesWanted` over `duration: idleDurationSec`.
+
+## How to Choose Values
+
+### Layout / typography
+
+- **STACK_GAP** — vertical gap between hero and dot.
+  - Range: 0.2-0.4× `HERO_FONT_SIZE`
+- **HERO_FONT_SIZE / HERO_LETTER_SPACING** — typographic emphasis.
+  - Range: 100-240 px for full-bleed compositions; spacing 0.04-0.06em
+- **DOT_SIZE** — accent indicator size.
+  - Range: ~0.15-0.25× `HERO_FONT_SIZE` so the dot reads as accent, not a peer
+- **{accentGlow}** — `box-shadow` halo on the dot; typically `0 0 (DOT_SIZE) rgba(accentColor, 0.5-0.7)`
+
+### Entry phase
+
+- **ENTRY_Y / ENTRY_SCALE** — initial state before fade-up.
+  - Range: `ENTRY_Y` 16-32 px (subtle rise), `ENTRY_SCALE` 0.94-0.98 (subtle inflation)
+- **ENTRY_DUR** — hero fade-up duration.
+  - Range: 0.6-1.2s; bigger heroes want a longer settle
+- **DOT_ENTRY_START** — when the dot pops in relative to hero.
+  - Constraints: typically `≈ 0.4-0.6× ENTRY_DUR` so the dot lands while the hero is still settling, not after
+- **DOT_ENTRY_DUR** — dot back-out pop duration.
+  - Range: 0.4-0.7s
+- **BOUNCE_FACTOR** — `back.out(BOUNCE_FACTOR)` overshoot strength on the dot pop.
+  - Range: 1.4 (soft) → 2.0 (firm) → 2.8 (cartoony)
+
+### Idle phase
+
+- **IDLE_START_TIME** — when breathing begins.
+  - Constraints: `≥ ENTRY_DUR + small buffer (~0.1s)` so the breath doesn't fight the entry tail. `sin(0) = 0` at this moment, so the offset is exactly the entry's resting state — no jump
+- **IDLE_DUR** — breath tween length.
+  - Constraints: must equal `TOTAL_DURATION − IDLE_START_TIME` to fill the composition with motion
+- **CYCLES** — number of full breath cycles across `IDLE_DUR`.
+  - Range: `IDLE_DUR / 3s ≤ CYCLES ≤ IDLE_DUR / 1.5s` (cycle period 1.5-3s reads as natural breathing)
+- **SCALE_AMP** — sine amplitude on scale (hero).
+  - **Default: 0.008-0.015** (barely-perceptible breath — the right answer for most scenes)
+  - Push to 0.02-0.04 only when the element is **alone on canvas**, the scene is **short (< 6s)**, or the brief explicitly calls for **kinetic / playful** register
+  - See Key Principles for the long-idle / concurrent-element scaling rules
+- **Y_AMP_PX** — sine amplitude on y translation (hero).
+  - **Default: 2-3 px** (barely-perceptible — the right answer for most scenes)
+  - Push to 4-6 px only when isolated / short / kinetic — same gating as `SCALE_AMP`
+- **DOT_SCALE_AMP** — sine amplitude on dot scale (offset by π/2 for out-of-phase motion).
+  - Range: 0.04-0.12 — larger than hero amplitude is fine because the dot is a small accent
+- **PERIOD** (conditional-activation variation) — seconds per cycle when using the `(time - IDLE_START_TIME) / PERIOD` form.
+  - Range: 1.5-3s
+- **GATE_THRESHOLD** (conditional-activation variation) — entryProgress required to start idle.
+  - Range: 0.85-1.0; lower gates start idle slightly before entry completes for an overlap
+
+### Multi-octave variation
+
+- **SCALE_AMP_PRIMARY / SCALE_AMP_SECONDARY** — amplitudes of the two stacked sines.
+  - Constraints: `SCALE_AMP_PRIMARY > SCALE_AMP_SECONDARY` (secondary is a higher-frequency overlay, not a peer); combined max amplitude should stay within the SCALE_AMP range above
+- **OCTAVE_RATIO** — frequency multiplier of secondary relative to primary.
+  - Range: 2.0-4.0 (whole-number-ish ratios feel musical/coherent; non-integer ratios feel organic/unpredictable)
+
+### Color tokens
+
+- **{bgGradient}** — typically a dark radial gradient so the lit hero pops
+- **{textColor}** — high-contrast against `{bgGradient}`
+- **{accentColor}** — single accent reserved for the dot; the glow color in `{accentGlow}` is the same hue
+
+## Key Principles
+
+- **Prefer reveal, then jitter, then breath** — circular breathing as "aliveness" is cheap and reads weak; "no motion over bad motion." First fill the back of a shot with **sequential reveal timed to the VO**; if it's genuinely settled and still feels dead, use this rule at the **LOW end of its amplitude range as subtle jitter**; a full breathing loop is the rare last resort on a single held hero, never stamped on every element.
+- **`sin(0) = 0`** — at the moment idle begins, the offset must be zero so there's no visible jump from the entry's settled state to idle. Start the phase tween at `phase = 0`.
+- **Amplitude subtlety — default to the LOW end of the range.** Scale `0.008-0.015` (push to 0.02-0.04 only when isolated / short scene / kinetic brief), rotation `±0.3-0.8°` (rarely needed at all), translation `±2-3px` (push to 4-6px only when isolated). Bigger and idle reads as "still animating" instead of "alive but resting" — and a viewer watching 5+ consecutive scenes at the upper end will read the whole film as "shimmering."
+- **Cycle duration: 2.5-4s per breath when idle is long, 1.5-3s otherwise** — 2.5-3s is a comfortable breathing cadence; under 1.5s feels frantic in a long-idle window; over 4s feels lifeless in a short one.
+- **Long idle window (`IDLE_DUR > 6s` OR idle proportion > 30% of composition):** halve `SCALE_AMP` and `Y_AMP_PX`, slow `CYCLES` so each breath is 3-4s. Consider gating amplitude to fade to zero over the last ~20% of idle so the scene actually **settles before the transition**, instead of handing off mid-drift. This is the single biggest fix when finalize snapshots show "everything's still moving at the end."
+- **Concurrent idle on N elements** (triptych columns, card grid, multi-stat row, side-by-side panels): per-element amplitude ≤ default `/ √N`. Three columns each at `±6px` visually adds to `±18px+` of competing motion; three at `±2-3px` reads as one collective breath. Stagger the **period** between elements (2.1s / 1.9s / 2.4s) for organic feel — but the **amplitude** must also be smaller, not just the period.
+- **Different elements at different phases** — offset secondary elements by `Math.PI / 2` (90° offset) so they're not all moving in sync. Synced motion looks mechanical; out-of-phase looks alive.
+- **Compose, don't replace** — idle motion ADDS to the element's resting transform, not replace it. If the entry settled at `translateY(0)`, idle should produce `translateY(0 + sin*4)`. Don't overwrite the entry's final translation.
+- **❗ Don't use CSS `@keyframes` for the idle loop** — CSS animation runs on the browser's render clock, which is independent of the HF seek clock. HF seeks frame-by-frame and a CSS-driven idle will flicker/desync. Drive idle inside the GSAP timeline.
+
+## Critical Constraints
+
+- **Timeline must be paused**: `gsap.timeline({ paused: true })`
+- **Registry key = `data-composition-id`**
+- **No CSS `animation`** for idle — must be timeline-driven
+- **`will-change: transform`** if the idle compounds with other tweens on the same element
+- **Phase tween `ease: 'none'`** — sine itself provides the easing; tweening the phase non-linearly produces non-sinusoidal motion
+- **Don't restart the idle tween** — it's a single long tween from start to end of composition idle window
+
+## Combinations
+
+- After [press-release-spring.md](press-release-spring.md) — button idle-breathes after release settles
+- After [counting-dynamic-scale.md](counting-dynamic-scale.md) — final number breathes
+- After [card-morph-anchor.md](card-morph-anchor.md) — settled card idle-bobs
+- After [orbit-3d-entry.md](orbit-3d-entry.md) — center label idle-breathes while items orbit
+
+## Pairs with HF skills
+
+- `/hyperframes-animation` — `onUpdate` writing transform
+- `/hyperframes-core` — composition wiring
+- `/hyperframes-cli` — `hyperframes lint`
diff --git a/.claude/skills-media/hyperframes-animation/rules/split-tilt-cards.md b/.claude/skills-media/hyperframes-animation/rules/split-tilt-cards.md
new file mode 100644
index 000000000..2908901a2
--- /dev/null
+++ b/.claude/skills-media/hyperframes-animation/rules/split-tilt-cards.md
@@ -0,0 +1,277 @@
+---
+name: split-tilt-cards
+description: Two cards side-by-side with opposing Y-rotation creating a symmetric 3D split-screen layout for comparisons or feature pairs.
+metadata:
+  tags: 3d, cards, split, tilt, comparison, symmetric, layout
+---
+
+# Split Tilt Cards
+
+Two cards positioned side-by-side, each rotated in opposite Y directions. Creates a symmetric "book-open" 3D effect — natural fit for comparisons, before/after, or feature pairs.
+
+## How It Works
+
+- Left card rotates `+Y` (faces toward the right viewer angle)
+- Right card rotates `-Y` (faces toward the left viewer angle)
+- Both share the same `perspective` parent → opposing rotations balance visually
+- Each card enters from outside (left card slides in from the left, right card from the right) to reinforce its identity
+- Idle phase: gentle counter-phase float (`Math.PI` offset on sine) — cards bob in opposition
+
+## HTML
+
+```html
+<div
+  class="scene"
+  id="split-scene"
+  data-composition-id="split-scene"
+  data-start="0"
+  data-duration="4"
+  data-track-index="0"
+>
+  <div class="split-stage">
+    <div class="card card-left">
+      <div class="card-eyebrow">{leftEyebrow}</div>
+      <div class="card-headline">{leftHeadline}</div>
+      <div class="card-body">{leftBody}</div>
+    </div>
+    <div class="card card-right">
+      <div class="card-eyebrow">{rightEyebrow}</div>
+      <div class="card-headline">{rightHeadline}</div>
+      <div class="card-body">{rightBody}</div>
+    </div>
+  </div>
+</div>
+```
+
+## CSS
+
+```css
+.scene {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  display: grid;
+  place-items: center;
+  background: {bgGradient};
+  perspective: SCENE_PERSPECTIVE; /* REQUIRED — without perspective rotateY flattens */
+}
+.split-stage {
+  display: flex;
+  gap: STAGE_GAP;
+  transform-style: preserve-3d;
+}
+.card {
+  width: CARD_WIDTH;
+  min-height: CARD_MIN_HEIGHT;
+  padding: CARD_PADDING;
+  display: flex;
+  flex-direction: column;
+  gap: CARD_INNER_GAP;
+  border-radius: CARD_RADIUS;
+  background: {cardSurface};
+  border: 1px solid {cardBorder};
+  color: {textColor};
+  font-family: {font};
+  transform-style: preserve-3d;
+  will-change: transform;
+}
+.card-left {
+  /* Faces right → shadow falls right */
+  box-shadow:
+    -CARD_SHADOW_OFFSET CARD_SHADOW_DROP CARD_SHADOW_BLUR {shadowColor},
+    0 0 CARD_GLOW_BLUR {accentGlowColor};
+}
+.card-right {
+  /* Faces left → shadow falls left */
+  box-shadow:
+    CARD_SHADOW_OFFSET CARD_SHADOW_DROP CARD_SHADOW_BLUR {shadowColor},
+    0 0 CARD_GLOW_BLUR {accentGlowColor};
+}
+.card-eyebrow {
+  font-size: EYEBROW_FONT_SIZE;
+  font-weight: 800;
+  letter-spacing: EYEBROW_LETTER_SPACING;
+  text-transform: uppercase;
+  color: {accentColor};
+}
+.card-headline {
+  font-size: HEADLINE_FONT_SIZE;
+  font-weight: 900;
+  line-height: 1;
+  letter-spacing: HEADLINE_LETTER_SPACING;
+}
+.card-body {
+  font-size: BODY_FONT_SIZE;
+  font-weight: 500;
+  line-height: 1.3;
+  color: {bodyColor};
+  opacity: BODY_OPACITY;
+}
+```
+
+## GSAP Timeline
+
+```html
+<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+<script>
+  window.__timelines = window.__timelines || {};
+  const tl = gsap.timeline({ paused: true });
+
+  // Phase 1 — entry from outside
+  tl.fromTo(
+    ".card-left",
+    { x: -ENTRY_SLIDE_DIST, rotateY: TILT + TILT_OVERSHOOT, opacity: 0 },
+    { x: 0, rotateY: TILT, opacity: 1, duration: ENTRY_DUR, ease: "power3.out" },
+    LEFT_AT,
+  );
+  tl.fromTo(
+    ".card-right",
+    { x: ENTRY_SLIDE_DIST, rotateY: -TILT - TILT_OVERSHOOT, opacity: 0 },
+    { x: 0, rotateY: -TILT, opacity: 1, duration: ENTRY_DUR, ease: "power3.out" },
+    RIGHT_AT,
+  );
+
+  // Phase 2 — counter-phase idle bob (cards move in opposition for dynamism)
+  tl.to(
+    ".card-left",
+    { y: -FLOAT_AMP, duration: FLOAT_DURATION / 2, ease: "sine.inOut", yoyo: true, repeat: 1 },
+    IDLE_START,
+  );
+  tl.to(
+    ".card-right",
+    { y: FLOAT_AMP, duration: FLOAT_DURATION / 2, ease: "sine.inOut", yoyo: true, repeat: 1 },
+    IDLE_START,
+  );
+
+  // Phase 3 — gentle copy reveal (body slides up + fades after cards arrive)
+  tl.from(
+    ".card-eyebrow, .card-headline, .card-body",
+    { opacity: 0, y: COPY_RISE, stagger: COPY_STAGGER, duration: COPY_DUR, ease: "power2.out" },
+    COPY_REVEAL_AT,
+  );
+
+  window.__timelines["split-scene"] = tl;
+</script>
+```
+
+## How to Choose Values
+
+### Layout / typography
+
+- **SCENE_PERSPECTIVE** — perspective on the scene root.
+  - Range: 1000-2400 px
+  - Effects: lower exaggerates the tilt (more cone-like); higher reads as a near-isometric, flatter rotation
+- **STAGE_GAP** — horizontal gap between the two cards.
+  - Range: 40-120 px (≈0.06-0.15× `CARD_WIDTH`)
+  - Effects: small gap reads "fused pair"; large gap reads "compared but separate"
+- **CARD_WIDTH** — width of each card.
+  - Range: 480-820 px at 1920×1080
+  - Constraints: `2 * CARD_WIDTH + STAGE_GAP ≤ 0.95 * stageWidth` so both cards stay on-screen at full tilt
+- **CARD_MIN_HEIGHT** — minimum card height.
+  - Range: ≈0.75-1.05× `CARD_WIDTH` (square-ish reads as balanced; very tall reads as poster)
+- **CARD_PADDING / CARD_INNER_GAP / CARD_RADIUS** — interior chrome.
+  - Range: padding 40-72 px; inner gap 24-48 px; radius 24-40 px
+- **CARD_SHADOW_OFFSET / CARD_SHADOW_DROP / CARD_SHADOW_BLUR** — drop-shadow geometry.
+  - Constraints: offset's sign matches tilt direction (see Key Principles); drop > 0 grounds the card on the scene
+  - Range: offset 16-28 px; drop 20-32 px; blur 40-80 px
+- **CARD_GLOW_BLUR** — secondary inner glow blur radius (`box-shadow` 0 0 blur).
+  - Range: 16-32 px (subtle accent rim; larger competes with the card content)
+- **EYEBROW_FONT_SIZE / EYEBROW_LETTER_SPACING** — small uppercase label.
+  - Range: 22-32 px; spacing 6-12 px (uppercase reads cleaner with positive letter-spacing)
+- **HEADLINE_FONT_SIZE / HEADLINE_LETTER_SPACING** — the main one-line punch.
+  - Range: 72-104 px at 1920×1080; spacing -1 to -3 px (tight tracking for display weight)
+- **BODY_FONT_SIZE / BODY_OPACITY** — supporting copy.
+  - Range: 28-40 px; opacity 0.8-0.92
+  - Constraints: body limited to ≤2 lines (see Critical Constraints — tilted long paragraphs blur)
+
+### Entry / tilt
+
+- **TILT** — static `rotateY` magnitude in degrees (left `+`, right `−`).
+  - Range: 10-18° (under 10 reads almost flat; over 18 the cards fold shut and body copy becomes hard to read)
+- **TILT_OVERSHOOT** — extra degrees added to the starting `rotateY` before settling to `TILT`.
+  - Range: 4-12°
+  - Effects: gives the entry a slight pivot-into-place feel
+- **ENTRY_SLIDE_DIST** — pixels each card slides from off-axis.
+  - Range: 200-500 px (≈0.3-0.6× `CARD_WIDTH`)
+- **ENTRY_DUR** — per-card slide-in duration.
+  - Range: 0.6-1.2 s
+- **LEFT_AT** — left card entry start.
+  - Range: 0.0-0.4 s
+- **RIGHT_AT** — right card entry start.
+  - Range: `LEFT_AT + 0.0` to `LEFT_AT + 0.3` s (zero stagger feels mechanical; large stagger fragments the pair)
+
+### Idle bob
+
+- **FLOAT_AMP** — sine amplitude on idle y bob (px).
+  - Range: 3-8 px (see sine-wave-loop rule — subtle is the point)
+- **FLOAT_DURATION** — full yoyo round-trip duration (one breath).
+  - Range: 1.6-3.2 s (≈breathing cadence)
+- **IDLE_START** — when idle bob begins.
+  - Constraints: `≥ max(LEFT_AT, RIGHT_AT) + ENTRY_DUR` so idle doesn't fight the entry tail
+
+### Copy reveal
+
+- **COPY_REVEAL_AT** — when eyebrow/headline/body fade in.
+  - Constraints: usually starts during the cards' settle (overlaps the entry tail) — content shouldn't pop in after the cards are already idle
+- **COPY_DUR / COPY_STAGGER / COPY_RISE** — fade-up shape.
+  - Range: duration 0.4-0.7 s; stagger 0.04-0.10 s; rise 12-24 px
+
+### Color / typography tokens
+
+- **{bgGradient}** — radial or linear gradient behind the cards; darker than `{cardSurface}` so cards lift
+- **{cardSurface}** — card background (typically a low-saturation gradient layered over the scene)
+- **{cardBorder}** — 1 px border color, usually `{accentColor}` at low alpha
+- **{shadowColor}** — drop-shadow color, typically near-black at 0.5-0.7 alpha
+- **{accentGlowColor}** — inner glow color, typically `{accentColor}` at low alpha
+- **{accentColor}** — eyebrow + accent rim color (single hue per scene)
+- **{textColor}** — primary headline color, high contrast against `{cardSurface}`
+- **{bodyColor}** — body copy color, slightly desaturated vs `{textColor}`
+- **{font}** — display font stack for all card copy
+
+## Variations
+
+### Mid-tilt zoom-through (combined with camera move)
+
+If a separate camera tween scales `.split-stage`, the cards' tilt reads as the viewer crossing through the gap between them.
+
+### Asymmetric content density (badge / label / icon)
+
+Add a floating badge near each card for additional context. Position absolutely on the parent — not inside the card, so the badge doesn't inherit the 3D rotation:
+
+```html
+<div class="badge badge-left">{leftBadge}</div>
+<div class="badge badge-right">{rightBadge}</div>
+```
+
+### Stacked variants (3+ cards)
+
+For 3 cards, the center card stays flat (`rotateY 0`) and the outer two tilt inward — useful for "your old way / nothing in between / our way" comparisons.
+
+## Key Principles
+
+- **`perspective` on scene root REQUIRED** — without it rotateY flattens and the split-tilt collapses to a flat side-by-side layout
+- **`transform-style: preserve-3d`** on both the stage and each card — preserves the 3D plane as cards have their own transforms
+- **Shadow direction must match tilt** — left card faces right, shadow falls right (positive X), and vice versa. Wrong shadow direction reads as "broken 3D"
+- **Symmetric content weight** — both cards same width, same vertical center, similar line counts. Asymmetric content breaks the comparison metaphor
+- **Counter-phase float (`Math.PI` offset)** — left bobs up while right bobs down. Synchronized bob looks like both cards are on the same conveyor belt; counter-phase looks alive
+- **Slide-in from the outside** — left card from left, right card from right — reinforces "they came from their own worlds and met here"
+- **❗ Tilt magnitude 10-15°** — under 10° looks like a slight perspective offset (almost flat), over 18° looks like the cards are folding shut and copy becomes hard to read
+
+## Critical Constraints
+
+- **Timeline must be paused**: `gsap.timeline({ paused: true })`
+- **Registry key = `data-composition-id`**
+- **No `requestAnimationFrame`** for the idle float — drive it inside the timeline so seek is deterministic
+- **Don't put badges inside the card divs** — they'd inherit the rotateY and tilt off-axis with the card. Float them on the parent
+- **Body copy ≤ 2 lines per card** — tilted text becomes hard to read; long paragraphs collapse into a perspective blur
+
+## Combinations
+
+- [card-morph-anchor.md](card-morph-anchor.md) — both cards could morph into a single unified shape afterward
+- [counting-dynamic-scale.md](counting-dynamic-scale.md) — numbers as the headline content for each side
+
+## Pairs with HF skills
+
+- `/hyperframes-animation` — timeline + `yoyo` for the idle bob
+- `/hyperframes-core` — composition wiring
+- `/hyperframes-cli` — `hyperframes lint`
diff --git a/.claude/skills-media/hyperframes-animation/rules/spring-pop-entrance.md b/.claude/skills-media/hyperframes-animation/rules/spring-pop-entrance.md
new file mode 100644
index 000000000..9911cd83a
--- /dev/null
+++ b/.claude/skills-media/hyperframes-animation/rules/spring-pop-entrance.md
@@ -0,0 +1,274 @@
+---
+name: spring-pop-entrance
+description: The canonical entrance pop — an element (or staggered group) arrives by scaling 0 → 1 on a smooth long-tail settle (power3 default); bouncy overshoot is a rare, explicitly-playful exception. fromTo so it's correct at t=0 under seek.
+metadata:
+  tags: spring, entrance, pop, scale, power3, settle, stagger, reveal, arrival
+---
+
+# Spring-Pop Entrance
+
+> **Smooth beats bouncy.** Per the motion doctrine (`references/motion-language.md`), this entrance **defaults to a smooth long-tail settle — `power3.out` (or `expo.out` for a faster arrival)** that decelerates cleanly into the resting size with **no overshoot**. Bouncy `back.out` overshoot is the **#1 instant turn-off** in agent-made videos and is almost never executed well; it is demoted here to a **rare, explicitly-playful exception** (a consumer / fun brand), never the default. When unsure, settle smoothly.
+
+THE entrance primitive: an element (or a staggered group of them) arrives on screen by springing from nothing — `scale: 0 → 1`, optionally with a small `y` rise — riding a **smooth long-tail ease (`power3.out` default)** so it grows confidently into its resting size and settles without bouncing. This is **arrival**, not reaction.
+
+Explicitly distinct from [press-release-spring.md](press-release-spring.md): that rule is a click/press → release feedback chain (a press phase, then a spring recovery to `1.0`). This one has **no press phase** — there is no prior resting state, the element did not exist on screen, it springs into being. Many blueprints used to borrow `press-release-spring` to fake an entrance; reach for this instead.
+
+## How It Works
+
+A single `fromTo` carries the whole arrival:
+
+1. **From-state**: `{ scale: 0, opacity: 0 }` — the element is collapsed to a point and invisible. Stated explicitly in the `from` object so a seek to `t=0` lands the element in this exact state (never rely on a CSS-hidden start — see Critical Constraints).
+2. **To-state (default)**: `{ scale: 1, opacity: 1, ease: "power3.out" }` — a long-tail decel that grows the element into its resting size and **settles smoothly, no overshoot**. Use `expo.out` instead for a punchier, faster-front arrival (still no bounce). This smooth settle is the house style; the bouncy `back.out` variant is the rare playful exception (see Variations).
+
+For a **group**, the same `fromTo` runs per element with a **deterministic, index-derived stagger** (`i * STAGGER`), and the total entry window is **capped** (`ITEM_COUNT × STAGGER ≤ ~0.5s`) so the group reads as one arriving beat, not a slow arpeggio.
+
+A small `y` rise (`y: 24 → 0`) layers a subtle "lifts into place" on top of the pop — optional garnish; the `scale` grow on a smooth ease is the load-bearing motion. (A `rotation` settle belongs only to the playful overshoot variant below.)
+
+## HTML
+
+```html
+<!-- Single hero pop -->
+<div
+  class="scene"
+  data-composition-id="pop-scene"
+  data-start="0"
+  data-duration="3"
+  data-track-index="0"
+>
+  <div class="pop-hero" id="hero">{heroLabel}</div>
+</div>
+
+<!-- Staggered group: nodes / cards / icons / pills / callouts -->
+<div
+  class="scene"
+  data-composition-id="pop-group-scene"
+  data-start="0"
+  data-duration="3"
+  data-track-index="0"
+>
+  <div class="pop-grid">
+    <div class="pop-item">{itemA}</div>
+    <div class="pop-item">{itemB}</div>
+    <div class="pop-item">{itemC}</div>
+    <div class="pop-item">{itemD}</div>
+    <div class="pop-item">{itemE}</div>
+    <div class="pop-item">{itemF}</div>
+  </div>
+</div>
+```
+
+## CSS
+
+```css
+.scene {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  display: grid;
+  place-items: center;
+  background: {bgColor};
+}
+.pop-hero {
+  display: grid;
+  place-items: center;
+  width: {heroSize};
+  height: {heroSize};
+  background: {heroBg};
+  border-radius: HERO_RADIUS;
+  font-family: {font};
+  font-weight: 900;
+  font-size: HERO_FONT_SIZE;
+  color: {heroTextColor};
+  /* Pop scales around the center — see Critical Constraints */
+  transform-origin: 50% 50%;
+  will-change: transform;
+}
+.pop-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: GRID_GAP;
+  place-items: center;
+}
+.pop-item {
+  display: grid;
+  place-items: center;
+  width: {itemSize};
+  height: {itemSize};
+  background: {itemBg};
+  border-radius: ITEM_RADIUS;
+  font-family: {font};
+  font-weight: 800;
+  font-size: ITEM_FONT_SIZE;
+  color: {itemTextColor};
+  transform-origin: 50% 50%;
+  will-change: transform;
+}
+```
+
+## GSAP Timeline
+
+```html
+<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+<script>
+  window.__timelines = window.__timelines || {};
+  const tl = gsap.timeline({ paused: true });
+
+  // --- Single hero pop (default: smooth long-tail settle, no overshoot) ---
+  // fromTo states the collapsed start explicitly so the hero is correct at t=0
+  // under seek. power3.out grows scale into 1.0 and decelerates smoothly.
+  tl.fromTo(
+    "#hero",
+    { scale: 0, opacity: 0 },
+    {
+      scale: 1,
+      opacity: 1,
+      duration: POP_DUR,
+      ease: "power3.out", // smooth beats bouncy; expo.out for a punchier front
+    },
+    ENTRY_AT,
+  );
+
+  // --- Staggered group pop ---
+  // Deterministic, index-derived stagger (no Math.random). The cap keeps the
+  // whole group inside one arriving beat: ITEM_COUNT * STAGGER <= ~0.5s.
+  const items = gsap.utils.toArray(".pop-item");
+  items.forEach((el, i) => {
+    tl.fromTo(
+      el,
+      { scale: 0, opacity: 0, y: Y_RISE },
+      {
+        scale: 1,
+        opacity: 1,
+        y: 0,
+        duration: POP_DUR,
+        ease: "power3.out",
+      },
+      GROUP_ENTRY_AT + i * STAGGER,
+    );
+  });
+
+  window.__timelines["pop-scene"] = tl;
+</script>
+```
+
+## Variations
+
+### Calm settle (refined / enterprise / "premium calm") — default
+
+`power3.out`, no rotation, drop the `y` rise or keep it tiny (~12px). Reads as a confident, weighted settle — right for a hero wordmark or a single product shot landing. The safe default for premium / enterprise brands.
+
+### Firm settle (default product reveal) — default
+
+The everyday entrance. `power3.out` (or `expo.out` for a punchier front), optional `Y_RISE` ~24px. Clear, deliberate arrival that decelerates clean — the safe default for cards, icons, and callouts. **No overshoot.**
+
+### Bouncy pop (RARE — explicitly-playful only)
+
+The exception, not the default. **Only** for a deliberately playful register (a consumer / fun brand, a toy-like icon set) where a bounce is clearly the intent — never for product / enterprise / serious launch tone. Bouncy is the #1 turn-off and the agent rarely lands it, so reach for this knowingly and sparingly. Swap `power3.out` for `back.out(OVERSHOOT)` and (optionally) add a `rotation` settle so each element looks hand-placed:
+
+```js
+// Playful exception only — default to power3.out (see above).
+tl.fromTo(
+  el,
+  { scale: 0, opacity: 0, rotation: ROT_FROM },
+  { scale: 1, opacity: 1, rotation: 0, duration: POP_DUR, ease: `back.out(${OVERSHOOT})` },
+  GROUP_ENTRY_AT + i * STAGGER,
+);
+```
+
+Keep `OVERSHOOT` modest even here (≤ ~2) — past that it reads as a cartoon wobble, not an arrival. Better still: the baked spring at `dampingFraction: 0.6–0.7` (`../adapters/gsap-easing-and-stagger.md` → Spring Eases) gives ~5–10% overshoot with a second-order settle that reads physical where `back.out` reads cartoon.
+
+### Origin-anchored pop (callout springs from a pointer / source)
+
+When a callout should appear to grow out of a specific point (e.g. a station marker or pointer tip), set `transform-origin` to that point instead of center, so the `scale: 0 → 1` reads as "emerging from the source" rather than "inflating in place."
+
+```css
+.callout {
+  transform-origin: 0% 100%; /* bottom-left = pointer tip; match to the anchor */
+}
+```
+
+### Pop into a held slot — then hold (jitter at most)
+
+When a popped element then **holds** an ongoing slot (a constellation node, a persistent badge), do **not** bake an idle loop into this entrance — it must stay finite. Land the pop and let it hold still; if the held frame genuinely needs life, hand off to [sine-wave-loop.md](sine-wave-loop.md) for **subtle jitter** (low amplitude) on a separate, later tween — not a breathing loop. Prefer revealing the next element on its VO cue over keeping this one animating.
+
+## How to Choose Values
+
+- **EASE** — the settle curve (the load-bearing decision)
+  - Default: **`power3.out`** — a smooth long-tail settle, no overshoot; the house style for product / enterprise / serious tone. Use `expo.out` for a punchier, faster-front arrival (still smooth).
+  - Exact-physics option: `springEase({ response: 0.4 })` (critically damped, ζ=1) from `../adapters/gsap-easing-and-stagger.md` → Spring Eases — the curve `power3.out` approximates, with a harder front and a longer settle tail; take `duration` from the helper. Use when the settle IS the shot (a wordmark landing, a final lockup).
+  - Playful exception only: `back.out(OVERSHOOT)` — see the Bouncy pop variation; reach for it only when a bounce is clearly the brand intent.
+
+- **OVERSHOOT** — `back.out(OVERSHOOT)` overshoot strength — **only used in the rare bouncy variant**; the smooth default has no overshoot dial
+  - Range (playful only): ~1.3 (barely) → ~2.0 (clearly bouncy)
+  - Constraints: keep ≤ ~2 — past that the overshoot exceeds the element's bounds and reads as a cartoon wobble, not an arrival. If you're not in the explicitly-playful case, don't use this — use `power3.out`.
+
+- **POP_DUR** — duration of each element's `scale: 0 → 1` tween
+  - Range: 0.4 – 0.7 s
+  - Effects: shorter = tight snap; longer = a looser, more floating pop
+  - Constraints: the main subject must be visible by **`t ≤ 0.5s`** — keep `ENTRY_AT + POP_DUR`'s readable midpoint early; don't let the hero finish arriving after the half-second mark
+
+- **STAGGER** — gap between successive items' start times (group only)
+  - Range: 0.04 – 0.08 s
+  - Effects: < 0.04 reads as a simultaneous chord; > 0.08 feels lazy / arpeggiated
+  - Constraints: **`ITEM_COUNT × STAGGER ≤ ~0.5s`** (the cap) — beyond that the group stops reading as one beat. Cap the per-item stagger for large groups: `STAGGER = min(0.06, 0.5 / ITEM_COUNT)`
+
+- **ITEM_COUNT** — number of elements in a group pop
+  - Range: 3 – 9
+  - Effects: 3 = sparse; 9 = full grid. More than ~9 forces `STAGGER` so small the stagger vanishes — switch to a wipe/sweep reveal instead
+
+- **Y_RISE** — optional upward offset the element lifts from (`y: Y_RISE → 0`)
+  - Range: 0 (pure pop) – 32 px
+  - Effects: adds a subtle "lifts into place"; keep small so the `scale` pop stays dominant
+  - Constraints: 0 for the calm-settle variant; never large enough to read as a slide-up (that's a different primitive)
+
+- **ROT_FROM** — optional starting rotation, **playful (bouncy) variant only** (`rotation: ROT_FROM → 0`)
+  - Range: −10° – +10°
+  - Effects: a small tilt that resolves makes the element look hand-placed
+  - Constraints: derive sign/size deterministically from index if you want alternating tilt (e.g. `i % 2 ? 6 : -6`) — never `Math.random`
+
+- **ENTRY_AT / GROUP_ENTRY_AT** — timeline offset before the (group's) pop begins
+  - Range: 0 – 0.4 s
+  - Effects: > 0 gives a beat of quiet before the arrival; keep small so the subject still lands by `t ≤ 0.5s`
+
+### Geometry & tokens
+
+- **{heroSize} / {itemSize}** — footprints. A hero entrance should occupy a clearly readable share of the frame; group items size down so the grid fits with `GRID_GAP` breathing room.
+- **HERO_RADIUS / ITEM_RADIUS** — `height × 0.15` (sharp) → `height / 2` (pill).
+- **{heroBg} / {itemBg} / {\*TextColor}** — surface + label tokens; inherit from the composition palette.
+
+## Key Principles
+
+- **Smooth beats bouncy** — default to `power3.out` (or `expo.out`): a long-tail settle into `scale: 1`, no overshoot. Bouncy `back.out` is the rare, explicitly-playful exception (the #1 turn-off, and the agent rarely lands it). When unsure, settle smoothly.
+- **fromTo, always** — the collapsed `{ scale: 0, opacity: 0 }` start is stated in the `from` object so a seek to `t=0` lands it exactly there. An entrance built on a CSS-hidden start (e.g. `opacity:0` in CSS + a `.to()`) flickers under HF seek — the element renders visible before the tween claims it.
+- **Easing carries the motion, not keyframes** — let the ease produce the settle for free. Don't hand-key a `scale: 1.1` mid-state; that double-bounces and fights the curve. (And in the playful variant, the overshoot is a byproduct of `back.out`, not a hand-keyed bounce.)
+- **The grow is the motion** — `scale` is load-bearing; the `y` rise (and, in the playful variant, the `rotation` settle) is garnish layered on top. If you drop everything but the `scale` grow, it should still read as a clean entrance.
+- **Cap the stagger window** — a group must arrive inside ~0.5s total or it stops reading as one beat and starts reading as a slow list reveal. Derive the stagger from `ITEM_COUNT` so it self-caps.
+- **Deterministic per index** — all stagger and any rotation/tilt variation comes from the loop index, never `Math.random` — the renderer must produce the identical frame on every seek.
+- **Visible early** — the main subject must be on screen by `t ≤ 0.5s`. A hero that finishes arriving at `t=1s` wastes the opening beat.
+- **Don't bake an idle loop here** — this entrance is finite. If the element then holds a slot, hand off to `sine-wave-loop` on a later tween; an infinite `repeat`/`yoyo` here breaks seek.
+
+## Critical Constraints
+
+- **Timeline must be paused**: `gsap.timeline({ paused: true })`
+- **Registry key = `data-composition-id`**
+- **Entrances use `fromTo`** — explicit `{ scale: 0, opacity: 0 }` from-state; never rely on a CSS-hidden starting state
+- **No CSS `transition`** on popped elements — those interpolate independently of HF seek and cause flicker
+- **No `repeat` / `yoyo` / infinite tweens** — this is a finite arrival; idle motion is a separate `sine-wave-loop` tween
+- **No `Math.random` / `Date.now`** — stagger and tilt are index-derived and deterministic
+- **GSAP transform aliases only**: `x`, `y`, `scale`, `rotation`. Never tween `width` / `height` / `left` / `top`
+- **`transform-origin: 50% 50%`** for an in-place pop (default); set it to the source point only for the origin-anchored variation
+- **Default ease `power3.out`** (smooth, no overshoot); `back.out(OVERSHOOT)` only in the explicitly-playful variant, and there keep **`OVERSHOOT ≤ ~2`** — beyond that it reads as a cartoon wobble, not an arrival
+- **`ITEM_COUNT × STAGGER ≤ ~0.5s`** — the group must land inside one beat
+- **`will-change: transform`** on popped elements, especially groups — many simultaneous spring tweens benefit from compositor hints
+
+## Combinations
+
+- [sine-wave-loop.md](sine-wave-loop.md) — at most **subtle jitter** on a held node/badge AFTER its pop lands (don't bake any loop into the entrance; and prefer a VO-timed reveal over ambient motion — see that rule's caution)
+- [center-outward-expansion.md](center-outward-expansion.md) — elements pop in as they radiate from center to their slots
+- [press-release-spring.md](press-release-spring.md) — the reaction counterpart: once popped in, a button can take a press→release; this rule supplies the arrival, that one the click feedback
+
+## Pairs with HF skills
+
+- `/hyperframes-animation` — `power3.out` settle (smooth default), `fromTo` entrances, deterministic stagger
+- `/hyperframes-core` — composition wiring
+- `/hyperframes-cli` — `hyperframes lint`
diff --git a/.claude/skills-media/hyperframes-animation/rules/stat-bars-and-fills.md b/.claude/skills-media/hyperframes-animation/rules/stat-bars-and-fills.md
new file mode 100644
index 000000000..3201f02d2
--- /dev/null
+++ b/.claude/skills-media/hyperframes-animation/rules/stat-bars-and-fills.md
@@ -0,0 +1,156 @@
+---
+name: stat-bars-and-fills
+description: Data-viz primitives that pair a number with a graphic — growth bars (CSS scaleY stagger), a progress fill (bar or ring), and a partial star-rating wipe. Seek-safe, deterministic.
+metadata:
+  tags: data, stats, chart, bars, progress, ring, stars, rating, infographic, number
+---
+
+# Stat Bars & Fills
+
+The graphics that give a stat **visual weight** beside its number: a small bar chart, a progress bar/ring filling to a percentage, or a star row filling to a fractional rating. Pair these with [counting-dynamic-scale.md](counting-dynamic-scale.md) (the number) for a complete stat scene.
+
+**Layout blueprint — pick ONE and hold it across all stats:**
+
+- **Single-focus** — one centered frame, the number is the hero, a ring or bar sits under/around it. Cleanest for a sequential reveal (stat 1 → stat 2 → stat 3 in the same frame).
+- **Split-frame** — big number on the left, paired graphic on the right. Better when stats are shown together or each needs a distinct visual.
+
+Don't mix blueprints between stats in one piece — that reads as inconsistent.
+
+## 1 — Growth Bars (CSS `scaleY` stagger)
+
+Bars grow from the baseline with a stagger; the last bar is the accent.
+
+```css
+.bars {
+  display: flex;
+  align-items: flex-end;
+  gap: 14px;
+  height: 280px;
+}
+.bar {
+  width: 48px;
+  background: #3a4a64;
+  transform: scaleY(0);
+  transform-origin: bottom center; /* grow UP from the baseline, not from center */
+}
+.bar:last-child {
+  background: #ffc300;
+} /* accent the final/current bar */
+```
+
+```js
+// Heights are authored in CSS (e.g. inline height per bar); GSAP only reveals scaleY 0→1.
+tl.to(".bar", { scaleY: 1, duration: 0.7, ease: "power3.out", stagger: 0.08 }, 0.3);
+```
+
+> Use `scaleY` (a transform), never animate `height` — height tweens are forbidden by the runtime. Set each bar's final height in CSS, scale from 0.
+
+## 2 — Progress Fill
+
+**Bar form** — `scaleX` from a left origin:
+
+```css
+.track {
+  width: 520px;
+  height: 16px;
+  background: #1b263b;
+  border-radius: 8px;
+  overflow: hidden;
+}
+/* width:100% is REQUIRED — an absolutely-positioned fill with no width is 0px, and scaleX of 0 is
+   still 0 → the bar renders invisible (automated gates may miss a zero-width scaled element). */
+.fill {
+  width: 100%;
+  height: 100%;
+  background: #ffc300;
+  transform: scaleX(0);
+  transform-origin: left center;
+}
+```
+
+```js
+const PCT = 0.92; // 92%
+tl.to(".fill", { scaleX: PCT, duration: 1.0, ease: "power2.out" }, 0.3);
+```
+
+**Ring form** — measured stroke draw (delegates to [svg-path-draw.md](svg-path-draw.md)):
+
+```js
+const ring = document.querySelector("#ring");
+const LEN = ring.getTotalLength(); // measure, don't hard-code the circumference
+ring.style.strokeDasharray = LEN;
+ring.style.strokeDashoffset = LEN; // empty
+// rotate the <circle> -90deg in CSS so the fill starts at 12 o'clock
+tl.to(ring, { strokeDashoffset: LEN * (1 - 0.92), duration: 1.1, ease: "power2.out" }, 0.3);
+```
+
+## 3 — Star-Rating Fill (fractional)
+
+A gold star row revealed left-to-right to a fractional value (e.g. 4.6 / 5) via a clip wipe over a gold layer sitting on a gray layer.
+
+```html
+<div class="stars">
+  <div class="stars-gray">★★★★★</div>
+  <div class="stars-gold" id="goldStars">★★★★★</div>
+</div>
+```
+
+```css
+.stars {
+  position: relative;
+  font-size: 64px;
+  letter-spacing: 8px;
+}
+.stars-gray {
+  color: #2b3548;
+}
+.stars-gold {
+  position: absolute;
+  inset: 0;
+  color: #ffc300;
+  width: 100%;
+  clip-path: inset(0 100% 0 0);
+}
+```
+
+```js
+const RATING = 4.6,
+  MAX = 5;
+tl.to(
+  "#goldStars",
+  { clipPath: `inset(0 ${100 - (RATING / MAX) * 100}% 0 0)`, duration: 1.0, ease: "power2.out" },
+  0.3,
+);
+```
+
+## How to Choose Values
+
+- **Bar count** — 4–6 reads as "a trend" without clutter; the last bar is the current/accent value.
+- **Fill duration** — 0.8–1.2s, matched to the paired count-up so number and graphic land together (share the ease).
+- **Accent hue** — exactly one; bars/fill/stars all use the same accent, the rest is muted.
+- **Stagger** — 0.06–0.1s on bars; larger feels sluggish, 0 loses the build.
+
+## Key Principles
+
+- **Transforms only** — `scaleY` / `scaleX` / `clipPath`, never `width`/`height` tweens (runtime-forbidden).
+- **Match the number's timing** — the fill and the count-up should peak together (same start + ease), so the stat resolves as one beat, not two.
+- **Measure, don't hard-code** — ring length via `getTotalLength()`; a hard-coded circumference breaks if the radius changes.
+- **One accent hue, consistent blueprint** — see `hyperframes-creative/references/data-in-motion.md`.
+
+## Critical Constraints
+
+- **Timeline paused**; build synchronously; registry key = `data-composition-id`.
+- **`onUpdate` (if pairing a counter) must be O(1)** — the runtime seeks frame-by-frame (see [counting-dynamic-scale.md](counting-dynamic-scale.md)).
+- **No `height`/`width` tweens, no `repeat: -1`** — transforms + finite repeats only.
+- **`transform-origin`** must be `bottom` (bars grow up) / `left` (bars/fills grow right) — default center origin scales from the middle and looks wrong.
+
+## Combinations
+
+- [counting-dynamic-scale.md](counting-dynamic-scale.md) — the number beside the graphic (pair them; same ease/duration)
+- [svg-path-draw.md](svg-path-draw.md) — the progress-ring draw mechanics
+
+## Pairs with HF skills
+
+- `/hyperframes-animation` — timeline + transform tweens
+- `/hyperframes-creative` — `references/data-in-motion.md` (stat layout + visual weight)
+- `/hyperframes-core` — composition wiring; the no-`width`/`height`-tween rule
diff --git a/.claude/skills-media/hyperframes-animation/rules/svg-icon-enrichment.md b/.claude/skills-media/hyperframes-animation/rules/svg-icon-enrichment.md
new file mode 100644
index 000000000..0be00b6fd
--- /dev/null
+++ b/.claude/skills-media/hyperframes-animation/rules/svg-icon-enrichment.md
@@ -0,0 +1,329 @@
+---
+name: svg-icon-enrichment
+description: Animate internal SVG elements (rotating hands, opening blades, pulsing dots, dash flows) to make icons feel alive without replacing them.
+metadata:
+  tags: svg, icon, animation, internal, micro-animation, pulse, rotation
+---
+
+# SVG Icon Enrichment
+
+Treats an SVG icon as a composition of animated PARTS, not an opaque image. Each meaningful internal element (a clock hand, scissor blade, recording dot, data line) gets its own GSAP-driven micro-animation. Distinct from [svg-path-draw](svg-path-draw.md) (which animates the OUTLINE drawing) — enrichment animates INTERNAL PARTS, ideally after the outline has drawn.
+
+## How It Works
+
+The SVG is authored with named `<line>`, `<circle>`, `<path>`, or `<g>` children. The GSAP timeline targets these by selector and applies one of 4 signature motion patterns:
+
+1. **Rotation** — clock hand, gear, loading spinner (`transform: rotate(deg)`)
+2. **Oscillation** — scissor blades, wing flap, toggle (`transform: rotate(±sin*amp)` on opposing groups)
+3. **Pulse** — recording dot, heart, notification (`scale + opacity` via sin)
+4. **Dash flow** — moving dashes along a stroke, like a data stream (`strokeDashoffset` linear)
+
+All run inside the paused GSAP timeline so HF seeks deterministically.
+
+## HTML
+
+```html
+<div
+  class="scene"
+  data-composition-id="enrichment-scene"
+  data-start="0"
+  data-duration="4"
+  data-track-index="0"
+>
+  <div class="stack">
+    <div class="row">
+      <!-- Clock icon — minute hand rotates -->
+      <svg class="icon-svg" viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg">
+        <circle cx="60" cy="60" r="50" fill="none" stroke="{accentColor}" stroke-width="6" />
+        <line
+          class="clock-hand"
+          id="hand-min"
+          x1="60"
+          y1="60"
+          x2="60"
+          y2="22"
+          stroke="{textColor}"
+          stroke-width="6"
+          stroke-linecap="round"
+        />
+        <line
+          class="clock-hand"
+          id="hand-sec"
+          x1="60"
+          y1="60"
+          x2="60"
+          y2="30"
+          stroke="{recordColor}"
+          stroke-width="3"
+          stroke-linecap="round"
+        />
+        <circle cx="60" cy="60" r="6" fill="{textColor}" />
+      </svg>
+
+      <!-- Recording dot — pulses -->
+      <svg class="icon-svg" viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg">
+        <circle
+          id="rec-ring"
+          cx="60"
+          cy="60"
+          r="50"
+          fill="none"
+          stroke="{recordColor}"
+          stroke-width="4"
+        />
+        <circle id="rec-dot" cx="60" cy="60" r="22" fill="{recordColor}" />
+      </svg>
+
+      <!-- Data stream — dashes flow along the line -->
+      <svg class="icon-svg" viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg">
+        <rect
+          x="14"
+          y="48"
+          width="92"
+          height="24"
+          rx="12"
+          fill="none"
+          stroke="{accentColor}"
+          stroke-width="4"
+        />
+        <line
+          id="data-flow"
+          x1="14"
+          y1="60"
+          x2="106"
+          y2="60"
+          stroke="{accentColor}"
+          stroke-width="6"
+          stroke-linecap="round"
+          stroke-dasharray="14 12"
+        />
+      </svg>
+    </div>
+    <div class="brand">{brandPhrase}</div>
+  </div>
+</div>
+```
+
+## CSS
+
+```css
+.scene {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  display: grid;
+  place-items: center;
+  background: {bgColor};
+  font-family: {font};
+}
+.stack {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 80px;
+}
+.row {
+  display: flex;
+  gap: 120px;
+}
+.icon-svg {
+  width: 320px;
+  height: 320px;
+  filter: drop-shadow(0 12px 32px {shadowColor});
+}
+.clock-hand {
+  /* transform-origin in SVG must be in viewBox units, not pixels */
+  transform-origin: 60px 60px;
+  transform-box: fill-box;
+}
+.brand {
+  font-size: 64px;
+  font-weight: 900;
+  letter-spacing: 14px;
+  text-transform: uppercase;
+  color: {textColor};
+}
+```
+
+## GSAP Timeline
+
+```html
+<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+<script>
+  window.__timelines = window.__timelines || {};
+  const tl = gsap.timeline({ paused: true });
+
+  // Pattern 1 — Rotation (clock hands)
+  // Minute hand: MIN_REVOLUTIONS full rotations over TOTAL_DURATION
+  const minState = { deg: 0 };
+  tl.to(
+    minState,
+    {
+      deg: 360 * MIN_REVOLUTIONS,
+      duration: TOTAL_DURATION,
+      ease: "none",
+      onUpdate: () => {
+        document.getElementById("hand-min").style.transform = `rotate(${minState.deg}deg)`;
+      },
+    },
+    0,
+  );
+
+  // Second hand: SEC_REVOLUTIONS full rotations over TOTAL_DURATION (faster)
+  const secState = { deg: 0 };
+  tl.to(
+    secState,
+    {
+      deg: 360 * SEC_REVOLUTIONS,
+      duration: TOTAL_DURATION,
+      ease: "none",
+      onUpdate: () => {
+        document.getElementById("hand-sec").style.transform = `rotate(${secState.deg}deg)`;
+      },
+    },
+    0,
+  );
+
+  // Pattern 2 — Pulse (recording dot, ring opacity inverse)
+  const pulseState = { p: 0 };
+  tl.to(
+    pulseState,
+    {
+      p: Math.PI * 2 * PULSE_CYCLES,
+      duration: TOTAL_DURATION,
+      ease: "none",
+      onUpdate: () => {
+        const dotScale = 1 + Math.sin(pulseState.p) * PULSE_DOT_AMP;
+        const ringScale = 1 + Math.sin(pulseState.p + Math.PI / 2) * PULSE_RING_AMP;
+        const ringOpacity =
+          PULSE_RING_OPACITY_BASE + Math.sin(pulseState.p) * PULSE_RING_OPACITY_AMP;
+        const dot = document.getElementById("rec-dot");
+        const ring = document.getElementById("rec-ring");
+        dot.style.transform = `scale(${dotScale})`;
+        dot.style.transformOrigin = "60px 60px";
+        ring.style.transform = `scale(${ringScale})`;
+        ring.style.transformOrigin = "60px 60px";
+        ring.style.opacity = String(ringOpacity);
+      },
+    },
+    0,
+  );
+
+  // Pattern 3 — Dash flow (data stream)
+  const flowState = { offset: 0 };
+  tl.to(
+    flowState,
+    {
+      offset: DASH_FLOW_TOTAL_OFFSET, // negative for L→R flow, positive for R→L
+      duration: TOTAL_DURATION,
+      ease: "none",
+      onUpdate: () => {
+        document.getElementById("data-flow").style.strokeDashoffset = String(flowState.offset);
+      },
+    },
+    0,
+  );
+
+  // Brand fades in early
+  tl.from(".brand", { opacity: 0, y: 16, duration: 0.6, ease: "power3.out" }, BRAND_AT);
+
+  window.__timelines["enrichment-scene"] = tl;
+</script>
+```
+
+## How to Choose Values
+
+- **MIN_REVOLUTIONS** — minute-hand revolutions across TOTAL_DURATION
+  - Range: 0.5–2.0 (continuous; faster reads as time-lapse)
+  - Constraints: avoid integer revolutions if visible end frame matters (lands back at start)
+
+- **SEC_REVOLUTIONS** — second-hand revolutions across TOTAL_DURATION
+  - Range: 4–10 (should be visibly faster than the minute hand)
+  - Constraints: SEC_REVOLUTIONS > MIN_REVOLUTIONS × 3 for the speed difference to read
+
+- **PULSE_CYCLES** — number of pulse cycles across TOTAL_DURATION
+  - Range: 2–4 over a 3–5 s comp
+  - Effects: ≥ 5 reads as anxious flicker; ≤ 1 reads as forgotten
+
+- **PULSE_DOT_AMP** — dot scale amplitude
+  - Range: 0.05–0.20
+  - Effects: 0.05 = breathing; 0.20 = throbbing
+
+- **PULSE_RING_AMP** — ring scale amplitude (typically lower than DOT_AMP)
+  - Range: 0.04–0.12
+  - Constraints: must be < PULSE_DOT_AMP or ring overshadows dot
+
+- **PULSE_RING_OPACITY_BASE / PULSE_RING_OPACITY_AMP** — ring opacity baseline + sine amplitude
+  - Range: BASE 0.4–0.6; AMP 0.3–0.5
+  - Constraints: BASE − AMP ≥ 0 and BASE + AMP ≤ 1
+
+- **DASH_FLOW_TOTAL_OFFSET** — total stroke-dashoffset change across TOTAL_DURATION
+  - Range: −400 to −100 (negative for L→R) or +100 to +400 (R→L)
+  - Effects: |large| = fast flow; |small| = slow drift
+  - Constraints: must be an integer multiple of the dash period (dash + gap) or the loop end frame shows a phase jump
+
+- **BRAND_AT** — when the brand phrase fades in
+  - Range: 0.3–1.0 s
+  - Effects: too early competes with icon entries; too late feels appended
+
+- **Ease family choices**: rotation = `none` (linear motion is the point); pulse driver = `none` (sine handles the curve); reveal of brand = `power3.out`
+
+## Signature Motion Patterns
+
+| Pattern     | Use For                            | Math                                             | Tip                                 |
+| ----------- | ---------------------------------- | ------------------------------------------------ | ----------------------------------- |
+| Rotation    | Clock, gear, loader, dial          | `transform: rotate(deg)`, linear via sec-counter | `transform-origin` in viewBox units |
+| Oscillation | Scissors, wings, toggle            | `rotate(±sin*amp)` on opposing groups            | Opposite signs on the two parts     |
+| Pulse       | Recording dot, heart, notification | `scale(1 + sin*amp)` + opacity                   | Ring lags dot by π/2 for ripple     |
+| Dash flow   | Cutting line, data stream          | `strokeDashoffset` linear via time               | Negative for L→R, positive for R→L  |
+
+## Variations
+
+### Stroke draw → enrichment chain
+
+Draw the icon outline first (via [svg-path-draw](svg-path-draw.md)), THEN activate enrichment. The internal animation feels like "the icon woke up" after assembly.
+
+```js
+// Phase 1: outline draws (0 → OUTLINE_DUR)
+tl.fromTo(
+  "#icon-outline",
+  { strokeDashoffset: 360 },
+  { strokeDashoffset: 0, duration: OUTLINE_DUR, ease: "power2.inOut" },
+  0,
+);
+// Phase 2: enrichment starts at OUTLINE_DUR
+```
+
+### Per-icon entry stagger
+
+For a row of icons all animating, stagger their entries. Each icon's enrichment starts as it fades in, not synchronized — feels organic.
+
+## Key Principles
+
+- **❗ For rotation around an explicit point inside SVG, use the SVG `transform` attribute, NOT CSS transform** — `el.setAttribute('transform', `rotate(${deg} ${cx} ${cy})`)`. The CSS combination `transform: rotate(...)` + `transform-origin: 60px 60px` + `transform-box: fill-box` interprets the origin in the element's OWN bbox-local coordinates, NOT in viewBox coordinates. For a thin `<line>` (whose bbox is the line's narrow envelope), `60 60` in bbox-local refers to a point OUTSIDE the line, so the hand flies along an off-center arc instead of rotating in place. Same trap for small inner shapes (rec-dot circle whose bbox is the small circle, not the full viewBox).
+- **For scaling around a center point inside SVG**, use `el.setAttribute('transform', `translate(${cx} ${cy}) scale(${s}) translate(-${cx} -${cy})`)`. Same reason — avoids the CSS bbox-local origin trap.
+- **Run continuous animations inside the timeline** — never CSS `@keyframes` or `requestAnimationFrame`. Both desync from HF's frame-by-frame seek.
+- **Amplitudes subtle** — icons are decorative, not headlines. Pulse scale within the ranges above; rotation speeds calibrated against composition length, not absolute time.
+- **Multiple parts of the same icon at different phases** — clock minute vs second hand at different speeds, ring vs dot pulse offset by π/2. Pure-sync looks mechanical; phase-offset looks alive.
+- **❗ Climax dwell ≥ 1 s** — if the enrichment is the headline beat, the composition must continue ≥ 1 s after the most dramatic moment.
+
+## Critical Constraints
+
+- **Timeline must be paused**: `gsap.timeline({ paused: true })`
+- **Registry key = `data-composition-id`**
+- **No CSS `animation`** on SVG children — must be timeline-driven
+- **`transform-origin` matters per child** — set explicitly per animated element
+- **`stroke-linecap: round`** on flowing/dashed lines for clean dash edges
+- **Target SVG children by id** — `document.getElementById` is fine; selector chains into `<svg>` work the same as HTML
+
+## Combinations
+
+- [svg-path-draw.md](svg-path-draw.md) — outline draws first, enrichment activates second
+- [orbit-3d-entry.md](orbit-3d-entry.md) — orbiting items are enriched icons (clock orbits a brand label)
+- [sine-wave-loop.md](sine-wave-loop.md) — entire icon floats while internal parts animate
+
+## Pairs with HF skills
+
+- `/hyperframes-animation` — onUpdate writes transform/opacity per SVG child
+- `/hyperframes-core` — composition wiring
+- `/hyperframes-cli` — `hyperframes lint`
diff --git a/.claude/skills-media/hyperframes-animation/rules/svg-path-draw.md b/.claude/skills-media/hyperframes-animation/rules/svg-path-draw.md
new file mode 100644
index 000000000..8dca3753d
--- /dev/null
+++ b/.claude/skills-media/hyperframes-animation/rules/svg-path-draw.md
@@ -0,0 +1,274 @@
+---
+name: svg-path-draw
+description: Animate SVG paths drawing progressively using stroke-dasharray and stroke-dashoffset.
+metadata:
+  tags: svg, stroke, draw, path, reveal, icon, vector
+---
+
+# SVG Path Draw
+
+Reveals an SVG shape by animating its stroke as if a pen were tracing it. The line appears to be drawn in real-time.
+
+## How It Works
+
+The trick uses two SVG stroke properties together:
+
+1. **`stroke-dasharray = <pathLength>`** — sets the dash pattern to a single dash equal to the path's total length, so the entire path is "one dash"
+2. **`stroke-dashoffset`** — controls how much of the dash is shifted out of view. Start at `pathLength` (entire path is offset out → invisible), animate to `0` (no offset → fully drawn)
+
+The path length is computed via the DOM API `path.getTotalLength()`.
+
+## HTML
+
+```html
+<div
+  class="scene"
+  id="svg-draw-scene"
+  data-composition-id="svg-draw-scene"
+  data-start="0"
+  data-duration="3"
+  data-track-index="0"
+>
+  <svg class="logo-mark" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
+    <!-- Multi-segment glyph; draw all segments sequentially -->
+    <path id="bar-left" d="M 60 40 L 60 160" />
+    <path id="bar-right" d="M 140 40 L 140 160" />
+    <path id="bar-mid" d="M 60 100 L 140 100" />
+  </svg>
+  <div class="brand-line">{Brand}</div>
+</div>
+```
+
+## CSS
+
+```css
+.scene {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  display: grid;
+  place-items: center;
+  background: {bgColor};
+  gap: 32px;
+}
+
+.logo-mark {
+  width: 320px;
+  height: 320px;
+}
+
+.logo-mark path {
+  fill: none;
+  stroke: {accentColor};
+  stroke-width: 12;
+  stroke-linecap: round; /* soften endpoints */
+  stroke-linejoin: round;
+  /* Initial state: invisible. GSAP fills strokeDasharray + strokeDashoffset
+     based on each path's measured length. */
+}
+
+.brand-line {
+  font-family: {font};
+  font-weight: 700;
+  font-size: 48px;
+  color: {textColor};
+  opacity: 0; /* fades in after stroke completes */
+  letter-spacing: 0.04em;
+}
+```
+
+## GSAP Timeline
+
+```html
+<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+<script>
+  window.__timelines = window.__timelines || {};
+
+  // Named constants — assignments live in the example, not here.
+  // See "How to Choose Values" below for ranges and selection criteria.
+  const SEGMENT_DRAW_DUR; // per-segment stroke duration
+  const FINAL_SEGMENT_DUR; // shorter draw on the last (shorter) segment
+  const SEG_1_START; // first segment start time
+  const SEG_2_START; // second segment start time (overlaps SEG_1 tail)
+  const SEG_3_START; // third segment start time (overlaps SEG_2 tail)
+  const BRAND_FADE_DUR; // wordmark fade-in duration
+  const BRAND_FADE_START; // wordmark fade-in start (after last stroke settles)
+
+  // Measure each path's total length and set up its dash pattern.
+  // getTotalLength() is a real DOM API — its return value is dynamic
+  // measured geometry, NOT a magic number.
+  const paths = document.querySelectorAll(".logo-mark path");
+  paths.forEach((p) => {
+    const len = p.getTotalLength();
+    p.style.strokeDasharray = `${len}`;
+    p.style.strokeDashoffset = `${len}`;
+  });
+
+  const tl = gsap.timeline({ paused: true });
+
+  // Stagger draws across segments — each starts before the previous finishes
+  // so the eye reads continuous motion.
+  tl.to(
+    "#bar-left",
+    {
+      strokeDashoffset: 0,
+      duration: SEGMENT_DRAW_DUR,
+      ease: "power2.out",
+    },
+    SEG_1_START,
+  );
+  tl.to(
+    "#bar-right",
+    {
+      strokeDashoffset: 0,
+      duration: SEGMENT_DRAW_DUR,
+      ease: "power2.out",
+    },
+    SEG_2_START,
+  );
+  tl.to(
+    "#bar-mid",
+    {
+      strokeDashoffset: 0,
+      duration: FINAL_SEGMENT_DUR,
+      ease: "power2.out",
+    },
+    SEG_3_START,
+  );
+
+  // Brand line fades in after the strokes settle
+  tl.to(
+    ".brand-line",
+    {
+      opacity: 1,
+      duration: BRAND_FADE_DUR,
+      ease: "power1.out",
+    },
+    BRAND_FADE_START,
+  );
+
+  window.__timelines["svg-draw-scene"] = tl;
+</script>
+```
+
+## How to Choose Values
+
+- **SEGMENT_DRAW_DUR** — per-segment stroke duration
+  - Range: 0.3-0.8s
+  - Effects: low end reads as a fast snap (good for short segments); high end reads as a deliberate pen trace (good for long curves)
+  - Constraints: must be short enough that the total chain (last segment finish) ends before BRAND_FADE_START; longer than ~1s feels sluggish for a logo reveal
+  - Reference: short outline segments use ~0.5s
+
+- **FINAL_SEGMENT_DUR** — duration of the shortest / final segment
+  - Range: 0.25-0.6s
+  - Effects: should be proportional to segment length — a short connector drawn at SEGMENT_DRAW_DUR appears slower than its longer siblings
+  - Constraints: typically 60-80% of SEGMENT_DRAW_DUR when the segment is visibly shorter than the others
+  - Reference: a mid-bar that is roughly 2/3 the length of the verticals uses ~0.35s
+
+- **SEG_1_START** — first segment start time
+  - Range: 0-0.4s
+  - Effects: 0 starts immediately on play; >0 gives a brief beat of empty stage before motion
+  - Constraints: should be ≥ 0
+  - Reference: a small lead-in of ~0.2s lets the viewer settle before motion
+
+- **SEG_2_START** — second segment start time
+  - Range: SEG_1_START + (0.5 \* SEGMENT_DRAW_DUR) to SEG_1_START + SEGMENT_DRAW_DUR
+  - Effects: closer to SEG_1_START + 0.5\*SEGMENT_DRAW_DUR feels rapid/overlapping; closer to SEG_1_START + SEGMENT_DRAW_DUR feels sequential
+  - Constraints: stagger ~70-80% of SEGMENT_DRAW_DUR reads as continuous motion (not 3 isolated animations)
+  - Reference: SEG_1_START + ~0.25s (about half of SEGMENT_DRAW_DUR)
+
+- **SEG_3_START** — third segment start time
+  - Range: SEG_2_START + (0.5 \* SEGMENT_DRAW_DUR) to SEG_2_START + SEGMENT_DRAW_DUR
+  - Effects: same as SEG_2_START — controls perceived rhythm
+  - Constraints: should preserve the same stagger ratio used between SEG_1 and SEG_2
+  - Reference: SEG_2_START + ~0.4s
+
+- **BRAND_FADE_DUR** — wordmark fade-in duration
+  - Range: 0.3-0.8s
+  - Effects: low end snaps in (urgent); high end glides in (premium / branded)
+  - Constraints: must finish before the composition's `data-duration` ends
+  - Reference: a calm logo lockup uses ~0.5s
+
+- **BRAND_FADE_START** — wordmark fade-in start time
+  - Range: max(SEG_3_START + FINAL_SEGMENT_DUR, …) to that value + 0.4s
+  - Effects: starting exactly at last stroke end feels tightly chained; adding a small beat gives the strokes a moment to "settle" before the wordmark joins
+  - Constraints: MUST be ≥ SEG_3_START + FINAL_SEGMENT_DUR (otherwise wordmark appears during the draw and competes with it)
+  - Reference: SEG_3_START + FINAL_SEGMENT_DUR + ~0.2s
+
+Ease families used here are discrete choices, not tunable scalars:
+
+- **stroke draws** use `power2.out` — gentle deceleration mimics a hand lifting at end of stroke. Do NOT use `back.out` or `elastic.out` (pens don't bounce).
+- **brand fade** uses `power1.out` — soft tail on an opacity tween.
+- For a constant-speed "real pen" tracing feel, swap to `none` (see Variations).
+
+## Variations
+
+### Rotation start point (start from top instead of 3 o'clock)
+
+By default, `<circle>` and `<rect>` start their stroke at 3 o'clock. Rotate the element to start from top:
+
+```html
+<circle
+  cx="100"
+  cy="100"
+  r="60"
+  id="ring"
+  style="transform-origin: 100px 100px; transform: rotate(-90deg);"
+/>
+```
+
+### Linear (constant-speed) draw
+
+Use `ease: 'none'` for steady-rate drawing (like an actual pen tracing):
+
+```js
+tl.to("#path", { strokeDashoffset: 0, duration: SEGMENT_DRAW_DUR, ease: "none" }, SEG_1_START);
+```
+
+### Draw then fill
+
+For SVG shapes that have a fill color, animate fill opacity to come in AFTER the stroke completes:
+
+```js
+tl.to(
+  "#path",
+  { strokeDashoffset: 0, duration: SEGMENT_DRAW_DUR, ease: "power2.out" },
+  SEG_1_START,
+);
+tl.to(
+  "#path",
+  { fillOpacity: 1, duration: FILL_FADE_DUR, ease: "power1.out" },
+  SEG_1_START + SEGMENT_DRAW_DUR,
+);
+```
+
+Requires `fill-opacity: 0` initially and a real `fill` color in CSS.
+
+## Key Principles
+
+- **Set `strokeDasharray` to the path's `getTotalLength()` value**, not an arbitrary number — guessing means stroke will animate but not match the geometry
+- **Start `strokeDashoffset` at the same length**, animate down to `0`
+- **Measure inside the timeline setup, not at module top** — SVG may not be rendered when module code runs in some environments. In HF runtime this works at top because SVG is inline, but be safe
+- **`stroke-linecap: round`** for softer endpoints (less abrupt finish)
+- **For sequential multi-path draws, stagger by ~70-80% of the previous segment's duration** — eye reads it as continuous motion, not N separate animations
+- **Don't pair with `back.out` or `elastic.out`** — bouncing strokes feel wrong (the pen wouldn't bounce)
+
+## Critical Constraints
+
+- **`fill: none` in CSS for outline-only draws** — otherwise the fill area appears immediately and ruins the reveal
+- **Path length is measured in the browser**: requires SVG to be in the DOM. HF inline SVG is fine; loaded `<image>` SVGs may not be
+- **Timeline must be paused**: `gsap.timeline({ paused: true })`
+- **Registry key = `data-composition-id`**
+- **Works on**: `<path>`, `<circle>`, `<rect>`, `<line>`, `<polyline>`, `<polygon>`, `<ellipse>` (anything with a stroke)
+- **For complex paths**, if `getTotalLength()` looks wrong, overestimate `strokeDasharray` slightly (e.g. `len * 1.05`) — too large is invisible during animation start (no visible gap), too small clips the end
+
+## Combinations
+
+- [counting-dynamic-scale.md](counting-dynamic-scale.md) — pair: stroke draws an icon while a number counts up beside it
+- [hacker-flip-3d.md](hacker-flip-3d.md) — pair: SVG logo draws, then a hacker-flipped wordmark reveals under it
+
+## Pairs with HF skills
+
+- `/hyperframes-animation` — timeline + stroke property tween
+- `/hyperframes-core` — composition wiring
+- `/hyperframes-cli` — `hyperframes lint`
diff --git a/.claude/skills-media/hyperframes-animation/rules/vertical-spring-ticker.md b/.claude/skills-media/hyperframes-animation/rules/vertical-spring-ticker.md
new file mode 100644
index 000000000..88bbd17ec
--- /dev/null
+++ b/.claude/skills-media/hyperframes-animation/rules/vertical-spring-ticker.md
@@ -0,0 +1,239 @@
+---
+name: vertical-spring-ticker
+description: Slot-machine style vertical scrolling using additive spring physics within a masked container — each spring contributes one "step" of scroll.
+metadata:
+  tags: text, ticker, spring, scroll, vertical, slot-machine, sequence
+---
+
+# Vertical Spring Ticker (Slot Machine)
+
+Multiple spring tweens are ADDED TOGETHER to produce total Y translation. Each spring contributes one discrete "step." The combined motion has snappy distinct moves with natural settling — instead of a single linear scroll, you get the slot-machine "click click click" rhythm.
+
+## How It Works
+
+Container has fixed height `ITEM_HEIGHT`, `overflow: hidden`. Inside is a vertical stack of items, each also `ITEM_HEIGHT` tall. The translate of the inner stack is computed as:
+
+```
+translateY = -ITEM_HEIGHT * sum(spring_i.progress for each spring)
+```
+
+Each spring fires at a different time, settles, then the next fires. When summed, the stack snaps forward step-by-step. The "spring" easing gives each step a tiny overshoot/settle that distinguishes it from a linear marquee.
+
+## HTML
+
+```html
+<div
+  class="scene"
+  id="ticker-scene"
+  data-composition-id="ticker-scene"
+  data-start="0"
+  data-duration="5"
+  data-track-index="0"
+>
+  <div class="stack">
+    <div class="eyebrow">{eyebrow}</div>
+    <div class="ticker" id="ticker">
+      <div class="stack-inner" id="stack-inner">
+        <!-- One .item per state the ticker rolls through.
+             The example file lists concrete labels; for the rule, treat
+             these as positional slots ({item0} … {itemN}). -->
+        <div class="item">{item0}</div>
+        <div class="item">{item1}</div>
+        <div class="item">{item2}</div>
+        <div class="item">{item3}</div>
+        <div class="item">{itemN}</div>
+      </div>
+    </div>
+    <div class="brand">{footerLine}</div>
+  </div>
+</div>
+```
+
+## CSS
+
+```css
+.scene {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  display: grid;
+  place-items: center;
+  background: {bgColor};
+  font-family: {font};
+}
+.stack {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: STACK_GAP;
+}
+.eyebrow {
+  font-size: EYEBROW_FONT_SIZE;
+  font-weight: 800;
+  letter-spacing: 14px;
+  text-transform: uppercase;
+  color: {accentColor};
+}
+/* MANDATORY: container height matches the per-item height exactly */
+.ticker {
+  width: TICKER_WIDTH;
+  height: ITEM_HEIGHT;       /* MUST match .item height */
+  overflow: hidden;
+  border-top: 2px solid {dividerColor};
+  border-bottom: 2px solid {dividerColor};
+  position: relative;
+}
+.stack-inner {
+  display: flex;
+  flex-direction: column;    /* MANDATORY for vertical ticker */
+  will-change: transform;
+}
+.item {
+  height: ITEM_HEIGHT;       /* MUST equal .ticker height */
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: ITEM_FONT_SIZE;
+  font-weight: 900;
+  letter-spacing: 8px;
+  text-transform: uppercase;
+  color: {textColor};
+  /* font-variant-numeric: tabular-nums; — for numeric tickers */
+}
+.brand {
+  font-size: BRAND_FONT_SIZE;
+  font-weight: 800;
+  letter-spacing: 10px;
+  color: {accentColor};
+  text-transform: uppercase;
+}
+```
+
+## GSAP Timeline
+
+```html
+<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+<script>
+  window.__timelines = window.__timelines || {};
+  const tl = gsap.timeline({ paused: true });
+
+  const innerEl = document.getElementById("stack-inner");
+
+  // Each spring object holds a 0→1 progress; they accumulate to a step-counter.
+  // Sum * -ITEM_HEIGHT becomes translateY.
+  const springs = Array.from({ length: STEPS }, () => ({ p: 0 }));
+
+  function applyTransform() {
+    const sumP = springs.reduce((acc, s) => acc + s.p, 0);
+    innerEl.style.transform = `translateY(${-sumP * ITEM_HEIGHT}px)`;
+  }
+  applyTransform(); // initial state
+
+  // Fire each spring sequentially with overlap — each one snaps in one step
+  springs.forEach((spring, i) => {
+    tl.to(
+      spring,
+      {
+        p: 1,
+        duration: STEP_DUR,
+        ease: `back.out(${BOUNCE_FACTOR})`,
+        onUpdate: applyTransform,
+      },
+      STEP_START + i * STEP_SPACING,
+    );
+  });
+
+  // Footer reveals after the ticker settles on the final item.
+  tl.from(
+    ".brand",
+    { opacity: 0, y: BRAND_Y, duration: BRAND_FADE_DUR, ease: "power3.out" },
+    STEP_START + STEPS * STEP_SPACING + BRAND_DELAY,
+  );
+
+  window.__timelines["ticker-scene"] = tl;
+</script>
+```
+
+## How to Choose Values
+
+- **ITEM_HEIGHT** — px height of each ticker slot AND the masked window.
+  - Range: ~`ITEM_FONT_SIZE × 1.25`; the line must hold capital descenders without clipping
+  - Constraints: **`.ticker` height MUST equal `.item` height** exactly — mismatched values cause partial items to peek above/below the mask
+  - Reference: ../../examples/proof-logo-chain.html uses `204px`
+- **TICKER_WIDTH** — px width of the masked window.
+  - Range: wide enough to hold the longest item without ellipsis; typically 30-60% of viewport width
+- **STEPS** — number of additive springs (number of state transitions, not number of items).
+  - Range: typically 1-4; each step = one "click" in the slot-machine cadence
+  - Constraints: `STEPS ≤ itemCount − 1` (you can only roll as far as there are items below the visible one)
+  - Reference: ../../examples/proof-logo-chain.html uses `1` (single roll between two states)
+- **STEP_DUR** — duration of each spring tween.
+  - Range: 0.3-0.7s; under 0.3 the overshoot is invisible, over 0.7 the click reads as a slide
+  - Reference: ../../examples/proof-logo-chain.html uses `0.45s`
+- **STEP_SPACING** — seconds between consecutive springs' start times.
+  - Range: 0.3-0.5s; closer and the steps blur together (looks like linear scroll), further and the ticker feels lazy
+  - Constraints: `STEP_SPACING ≤ STEP_DUR` so the previous step is still settling when the next fires (this is what makes them "additive")
+- **STEP_START** — when the first spring fires.
+  - Range: 0+; gate behind any preceding beat
+- **BOUNCE_FACTOR** — `back.out(BOUNCE_FACTOR)` overshoot strength per step.
+  - Range: 1.4 (gentle click) → 2.0 (firm click) → 2.5+ (cartoony spin-and-land for a climax step)
+  - Effects: low end reads as polished UI, high end reads as casino / game show
+- **BRAND_DELAY** — gap after the final step before the footer line reveals, in seconds.
+  - Range: 0.2-0.5s; lets the final overshoot settle before the next element competes for attention
+- **BRAND_FADE_DUR** — footer fade-in duration.
+  - Range: 0.4-0.7s
+- **BRAND_Y** — initial vertical offset of the footer before fade-up (in px).
+  - Range: 8-24 px; bigger feels "punched in," smaller feels gentle
+- **EYEBROW_FONT_SIZE / ITEM_FONT_SIZE / BRAND_FONT_SIZE / STACK_GAP** — typographic + layout scaling.
+  - Constraints: items are the focal beat, sized 4-8× larger than eyebrow/footer
+- **{bgColor} / {accentColor} / {textColor} / {dividerColor}** — semantic color tokens; accent reserved for the eyebrow and footer so the ticker items stay neutral.
+- **{font}** — base typography stack. For numeric tickers add `font-variant-numeric: tabular-nums` so digit widths stay constant.
+
+## Variations
+
+### Numeric ticker (price / counter rolling)
+
+Replace text items with the digit sequence and use the same spring-step pattern per decimal position (units, tens, hundreds...). Add `font-variant-numeric: tabular-nums` for digit-width stability.
+
+### Reverse direction (counting down)
+
+Swap the sign on the translate: `transform: translateY(${sumP * ITEM_HEIGHT}px)` and arrange items in reverse order. Reads as a countdown.
+
+### Continuous infinite ticker (no settling)
+
+Loop forever (e.g. news ticker) — use linear ease on a single long tween, duplicate the items list, reset when translation exceeds total height. NOT this rule — see [sine-wave-loop](sine-wave-loop.md) pattern for continuous motion vs this rule's discrete-step semantics.
+
+### Pause between groups
+
+For dramatic "spin then land" feel, group several fast spring steps (`STEP_SPACING` small) + a long `BRAND_DELAY`-style pause + a final dramatic step with bigger `BOUNCE_FACTOR`. The pause is where the eye locks in.
+
+## Key Principles
+
+- **Container height MUST equal item height** — otherwise items don't snap cleanly into the visible window. If container is 200px and items are 220px, every step shows a partial item edge above/below.
+- **`overflow: hidden` on container, NOT on inner stack** — the mask is the window; the stack inside is free to extend below.
+- **`flex-direction: column` on inner stack** — required for vertical stacking; row would make items horizontal.
+- **Step spacing tighter than step duration** — overlap is what makes the springs additive and gives the "click click" cadence; non-overlapping steps read as a linear scroll.
+- **`back.out` per step** — the overshoot is what makes each step feel like a "click." Linear ease or out-only ease loses the slot-machine feel.
+- **Sum the springs in onUpdate, don't tween the final position directly** — this is the "additive" trick; each spring contributes its OWN snap, which is the slot-machine pacing.
+- **❗ Don't update items via `innerHTML` between steps** — the ticker moves the SAME items via translate; replacing content makes the previous item visible AS the new one (broken illusion).
+- **❗ Climax dwell ≥1s after final step** — see SKILL universal constraints.
+
+## Critical Constraints
+
+- **Timeline must be paused**: `gsap.timeline({ paused: true })`
+- **Registry key = `data-composition-id`**
+- **No CSS `transition`** on stack-inner — competes with the additive transform
+- **`will-change: transform`** on stack-inner — many small transform updates per second
+- **All items same height (pixel-exact)** — mismatched heights cause cumulative drift
+- **For numeric: `font-variant-numeric: tabular-nums`** — variable digit widths break alignment
+
+## Combinations
+
+- [reactive-displacement.md](reactive-displacement.md) — ticker is "pushed" by an incoming element
+- [scale-swap-transition.md](scale-swap-transition.md) — ticker scales out after settling on final state, scaled-in subtitle replaces it
+- [press-release-spring.md](press-release-spring.md) — button press TRIGGERS the ticker spin
+
+## Pairs with HF skills
+
+- `/hyperframes-animation` — additive spring tweens via shared onUpdate
+- `/hyperframes-core` — composition wiring
+- `/hyperframes-cli` — `hyperframes lint`
diff --git a/.claude/skills-media/hyperframes-animation/rules/viewport-change.md b/.claude/skills-media/hyperframes-animation/rules/viewport-change.md
new file mode 100644
index 000000000..19df966bd
--- /dev/null
+++ b/.claude/skills-media/hyperframes-animation/rules/viewport-change.md
@@ -0,0 +1,349 @@
+---
+name: viewport-change
+description: Virtual camera — simulate zoom / pan / focus-lock by transforming a wrapper around all scene content. Camera moves right → world translates left.
+metadata:
+  tags: viewport, camera, zoom, pan, focus-lock, virtual-camera
+---
+
+# Viewport Change (Virtual Camera)
+
+Simulates camera effects (zoom / pan / focus-lock on a moving element) by transforming a wrapper around ALL scene content. The "world" moves opposite to the perceived camera. Distinct from [multi-phase-camera](multi-phase-camera.md) (which is 2-3 discrete phases + drift) — viewport-change is a single continuous zoom/pan, often used for focus-lock following a moving element.
+
+## How It Works
+
+Camera intent → world transform:
+
+- Camera **pans right** → world `translateX(-distance)`
+- Camera **zooms in** → world `scale(>1)`
+- Camera **follows element X** → world `translateX(viewportCenter - elementWorldX)` updated per-frame
+
+The wrapper holds the camera transform; the elements inside are positioned in "world space" unchanged.
+
+**Single-element composite transform (this rule's form).** Both scale and translate live on ONE wrapper as `translate(x, y) scale(S)`. CSS applies scale FIRST, then translate (right-to-left matrix composition), so a point at world offset `(ox, oy)` lands on screen at `(S × ox + x, S × oy + y)`. To map the target to viewport center:
+
+```
+T = -offset × S
+```
+
+This is **different from [coordinate-target-zoom](coordinate-target-zoom.md)**, which uses two nested wrappers (outer scales, inner translates) and derives `T = -offset` (independent of S). Use this rule's single-wrapper form when you want one source of truth for camera state (`cam.scale`, `cam.x`, `cam.y`) updated via `onUpdate`; use nested wrappers when scale and translate can tween independently with shared ease.
+
+## HTML
+
+```html
+<div
+  class="scene"
+  id="viewport-scene"
+  data-composition-id="viewport-scene"
+  data-start="0"
+  data-duration="5"
+  data-track-index="0"
+>
+  <div class="world" id="world">
+    <div class="content">
+      <div class="hero" id="hero">{Brand}</div>
+      <div class="tagline">{tagline}</div>
+      <div class="cta-row">
+        <div class="cta" id="cta">{ctaUrl}</div>
+      </div>
+    </div>
+  </div>
+</div>
+```
+
+## CSS
+
+```css
+.scene {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  background: {bgGradient};
+  font-family: {font};
+}
+.world {
+  position: absolute;
+  inset: 0;
+  display: grid;
+  place-items: center;
+  transform-origin: 50% 50%;
+  will-change: transform;
+}
+.content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: CONTENT_GAP;
+  text-align: center;
+}
+.hero {
+  font-size: HERO_FONT_SIZE;
+  font-weight: 900;
+  letter-spacing: HERO_LETTER_SPACING;
+  text-transform: uppercase;
+  color: {textColor};
+}
+.tagline {
+  font-size: TAGLINE_FONT_SIZE;
+  font-weight: 600;
+  color: {labelColor};
+}
+.cta {
+  display: inline-block;
+  padding: CTA_PADDING_Y CTA_PADDING_X;
+  font-family: {monoFont};
+  font-size: CTA_FONT_SIZE;
+  font-weight: 700;
+  letter-spacing: CTA_LETTER_SPACING;
+  color: {accentColor};
+  text-transform: uppercase;
+  background: {ctaBg};
+  border: 1px solid {ctaBorder};
+  border-radius: CTA_BORDER_RADIUS;
+}
+```
+
+## GSAP Timeline
+
+```html
+<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+<script>
+  window.__timelines = window.__timelines || {};
+  const tl = gsap.timeline({ paused: true });
+
+  const world = document.getElementById("world");
+
+  // Camera state — single source of truth. World transform is composed from
+  // this object inside applyCamera() so the transform string order is stable.
+  const cam = { scale: 1, x: 0, y: 0 };
+
+  function applyCamera() {
+    world.style.transform = `translate(${cam.x}px, ${cam.y}px) scale(${cam.scale})`;
+  }
+  applyCamera();
+
+  // Phase 1 — content reveal at neutral camera
+  tl.from(".hero", { opacity: 0, y: HERO_Y, duration: HERO_DUR, ease: "power3.out" }, HERO_START);
+  tl.from(
+    ".tagline",
+    { opacity: 0, y: TAGLINE_Y, duration: TAGLINE_DUR, ease: "power3.out" },
+    TAGLINE_START,
+  );
+
+  // Phase 2 — zoom in on CTA (single-element composite transform)
+  // CSS applies scale FIRST then translate: world point (ox, oy) lands at
+  // (S × ox + x, S × oy + y). Solve S × offset + T = 0 → T = -offset × S.
+  // This is DIFFERENT from coordinate-target-zoom (nested wrappers, T = -offset).
+  const counterY = -TARGET_OFFSET_Y * TARGET_SCALE;
+
+  tl.to(
+    cam,
+    {
+      scale: TARGET_SCALE,
+      y: counterY,
+      duration: ZOOM_DUR,
+      ease: "power3.inOut",
+      onUpdate: applyCamera,
+    },
+    ZOOM_START,
+  );
+
+  // Phase 3 — CTA reveals/dwells after zoom settles
+  tl.from(
+    "#cta",
+    {
+      opacity: 0,
+      scale: CTA_REVEAL_SCALE,
+      duration: CTA_REVEAL_DUR,
+      ease: `back.out(${BOUNCE_FACTOR})`,
+    },
+    CTA_REVEAL_START,
+  );
+
+  window.__timelines["viewport-scene"] = tl;
+</script>
+```
+
+## Scale Value Guide
+
+| Effect      | Scale       | Feel                                |
+| ----------- | ----------- | ----------------------------------- |
+| Subtle      | 1.02 - 1.05 | Barely perceptible — "professional" |
+| Medium      | 1.05 - 1.15 | "Ta-da" emphasis                    |
+| Noticeable  | 1.15 - 1.30 | Focus on region                     |
+| Dramatic    | 1.5 - 2.5   | Element fills screen                |
+| Full-screen | 3.0+        | Element covers viewport             |
+
+| Perception threshold | Result               |
+| -------------------- | -------------------- |
+| < 5%                 | Imperceptible        |
+| 10-15%               | Comfortable emphasis |
+| > 30%                | Cinematic / dramatic |
+
+## Variations
+
+### Focus-lock (camera follows moving cursor/character)
+
+For an element moving across the world, keep it at fixed screen X. Compute world offset per-frame:
+
+```js
+const focusEl = document.querySelector(".moving-cursor");
+const targetScreenX = VIEWPORT_WIDTH * FOCUS_SCREEN_X_FRAC;
+const focusUpdate = { p: 0 };
+tl.to(
+  focusUpdate,
+  {
+    p: 1,
+    duration: FOLLOW_DUR,
+    ease: "power2.inOut",
+    onUpdate: () => {
+      const rect = focusEl.getBoundingClientRect();
+      const focusWorldX = rect.left + rect.width / 2;
+      cam.x = targetScreenX - focusWorldX;
+      applyCamera();
+    },
+  },
+  FOLLOW_START,
+);
+```
+
+### Composite scale (multi-phase)
+
+Multiply two scale tweens for compound effects:
+
+```js
+const scaleUp = { v: 1 };
+const scaleDown = { v: 1 };
+function applyCompositeCamera() {
+  cam.scale = scaleUp.v * scaleDown.v;
+  applyCamera();
+}
+tl.to(
+  scaleUp,
+  { v: SCALE_UP_TARGET, duration: SCALE_UP_DUR, onUpdate: applyCompositeCamera },
+  SCALE_UP_START,
+);
+tl.to(
+  scaleDown,
+  { v: SCALE_DOWN_TARGET, duration: SCALE_DOWN_DUR, onUpdate: applyCompositeCamera },
+  SCALE_DOWN_START,
+);
+```
+
+### Camera mode transition (centered → follow)
+
+Crossfade between two camera modes via a 0→1 weight tween. At weight 0, mode A; at weight 1, mode B; intermediate is interpolated.
+
+## How to Choose Values
+
+### Layout (CSS)
+
+- **CONTENT_GAP** — vertical gap between hero, tagline, and CTA.
+  - Range: 16-48 px
+  - Effects: small → tightly stacked (logo-lockup feel); large → airy, editorial
+- **HERO_FONT_SIZE / TAGLINE_FONT_SIZE / CTA_FONT_SIZE** — typographic hierarchy.
+  - Range: hero >> tagline > CTA (hero is the brand mark, CTA is the actionable footer)
+  - Constraints: hero must remain readable when scaled DOWN at neutral camera AND when scaled UP during the zoom — pick the size at neutral camera, the zoom only enlarges it
+- **HERO_LETTER_SPACING / CTA_LETTER_SPACING** — uppercase tracking.
+  - Range: 4-10 px for uppercase display type; 0 for sentence case
+- **CTA_PADDING_X / CTA_PADDING_Y / CTA_BORDER_RADIUS** — pill geometry around the CTA text.
+  - Constraints: `CTA_BORDER_RADIUS ≥ CTA_FONT_SIZE` to keep the pill ends fully rounded
+
+### Phase 1 — Content reveal
+
+- **HERO_START** — when the hero begins fading in.
+  - Range: 0.2-0.5s (small offset for a beat of black before content appears)
+- **HERO_DUR** — hero fade-up duration.
+  - Range: 0.6-1.2s
+- **HERO_Y** — initial Y offset of hero before fade-up (in px).
+  - Range: 16-48 px
+- **TAGLINE_START** — when the tagline begins fading in.
+  - Constraints: `≥ HERO_START + 0.3` (let the hero land first so the eye reads top-down)
+- **TAGLINE_DUR / TAGLINE_Y** — same shape as hero, typically smaller (`TAGLINE_Y` half of `HERO_Y`).
+
+### Phase 2 — Zoom
+
+- **TARGET_OFFSET_Y** — measured Y offset (in px) of the CTA from viewport center at neutral camera.
+  - Constraints: derived from layout, NOT a free parameter. Measure via `getBoundingClientRect()` OR compute from `CONTENT_GAP + (HERO_HEIGHT + TAGLINE_HEIGHT) / 2`. Sign matters — positive = below center.
+- **TARGET_SCALE** — final magnification of the world.
+  - Range: 1.3× (modest) → 1.6-2.0× (typical CTA zoom) → 3×+ (cinematic)
+  - Constraints: raster source media needs `sourceResolution ≥ rendered × TARGET_SCALE`; text remains crisp at any scale
+- **ZOOM_START** — when the zoom begins.
+  - Constraints: `≥ TAGLINE_START + TAGLINE_DUR + viewer-scan-time` (give viewer ~0.5s after content lands before camera moves)
+- **ZOOM_DUR** — duration of the zoom tween.
+  - Range: 1.0-2.0s; under 0.8s feels like a teleport, over 2.5s drags
+
+### Phase 3 — CTA reveal + dwell
+
+- **CTA_REVEAL_START** — when the CTA pops in.
+  - Constraints: `≥ ZOOM_START + ZOOM_DUR × 0.9` (start near the end of the zoom so the CTA "lands" with the camera)
+- **CTA_REVEAL_DUR** — CTA fade-in / pop duration.
+  - Range: 0.4-0.8s
+- **CTA_REVEAL_SCALE** — initial scale of the CTA before pop.
+  - Range: 0.85-0.95 (sub-1 → grows into place); >1.0 inverts to a shrink-into-place feel
+- **BOUNCE_FACTOR** — overshoot coefficient for `back.out(${BOUNCE_FACTOR})`.
+  - Range: 1.2-2.5; lower = subtle settle, higher = pronounced overshoot. The ease family (`back.out`) is the choice; this number tunes its intensity.
+  - Reference: ease family options: `back.out` (overshoot then settle), `elastic.out` (oscillation), `power3.out` (clean decel, no overshoot)
+- **DWELL_DUR** — implicit hold after `CTA_REVEAL_START + CTA_REVEAL_DUR` until `data-duration` ends.
+  - Range: ≥ 1.0s (see "Climax dwell" in Key Principles)
+
+### Focus-lock variation
+
+- **VIEWPORT_WIDTH** — composition width in px. Real value (`data-width` on the root); not abstract.
+- **FOCUS_SCREEN_X_FRAC** — where on screen to lock the focused element.
+  - Range: 0.4-0.7 (rule of thirds positions); 0.5 is dead center
+- **FOLLOW_START / FOLLOW_DUR** — when the follow-cam engages and for how long.
+  - Constraints: `FOLLOW_DUR` matches the duration the focused element is in motion
+
+### Composite-scale variation
+
+- **SCALE_UP_TARGET / SCALE_DOWN_TARGET** — multiplicative factors composed via `cam.scale = scaleUp.v * scaleDown.v`.
+  - Effects: combine a slow push-in (`SCALE_UP_TARGET` ~1.15) with a brief release (`SCALE_DOWN_TARGET` ~0.9) for a breath/punch shape
+- **SCALE_UP_START / SCALE_UP_DUR / SCALE_DOWN_START / SCALE_DOWN_DUR** — phase timing for each multiplicand.
+
+### Color tokens
+
+- **{bgGradient}** — scene background (typically a dark radial vignette so edges fall off as zoom reveals them)
+- **{textColor}** — hero text; highest contrast against `{bgGradient}`
+- **{labelColor}** — tagline / secondary copy; one step softer than `{textColor}`
+- **{accentColor}** — CTA text + border; reserved hue that pops on reveal
+- **{ctaBg} / {ctaBorder}** — semi-transparent fills derived from `{accentColor}` (typical `rgba` at 10-15% / 35-45% alpha)
+
+### Font tokens
+
+- **{font}** — sans-serif body / hero stack (e.g. `"Inter", sans-serif`)
+- **{monoFont}** — monospace CTA stack (e.g. `"JetBrains Mono", monospace`); reserved for the URL/code-like CTA so it reads as actionable
+
+## Key Principles
+
+- **World moves opposite to perceived camera** — pan camera right = `translateX(-x)` on the world wrapper. Get this sign right, otherwise everything moves the wrong way.
+- **Single-wrapper transform order matters** — `translate(x, y) scale(S)` applies scale first; counter-translate is `T = -offset × S`. Mixing this up with the nested-wrapper form (`T = -offset`) drifts the target off-center as scale changes.
+- **`overflow: hidden` on `.scene` REQUIRED** — at any non-1.0 scale the world transform reveals edges or pushes content off-frame.
+- **`transform-origin: 50% 50%`** on the world wrapper — centered scaling is what the math assumes.
+- **Background on `.scene`, NOT on `.world`** — if background is on the world, transforming the world warps/translates the background.
+- **Single source of truth via `cam` object + `applyCamera()`** — when scale and translate both change, write them in ONE place. Otherwise the transform string composition order is unpredictable.
+- **Subtle continuous motion > big sudden zoom** — for a feel-natural product video, use 1.05-1.15× zoom over 2-3s. Big > 1.3× zooms read as dramatic narrative moments, save them.
+- **Climax dwell >=1s** — after the zoom settles, the comp must continue for >=1s so the viewer can read the focal point.
+
+## Critical Constraints
+
+- **Timeline must be paused**: `gsap.timeline({ paused: true })`
+- **Registry key = `data-composition-id`**
+- **No CSS `transition` on `.world`** — competes with GSAP
+- **`will-change: transform`** on `.world`
+- **`overflow: hidden` on `.scene`**
+- **`transform-origin: 50% 50%` on `.world`**
+- **Background on `.scene`** — never on `.world`
+- **Scale and translate share one `onUpdate`** — both read from `cam` and write the composite transform string together; never split them across tweens that touch `world.style.transform` directly
+
+## Combinations
+
+- [multi-phase-camera.md](multi-phase-camera.md) — viewport-change inside one phase of a multi-phase camera
+- [coordinate-target-zoom.md](coordinate-target-zoom.md) — alternative for off-center zoom (nested wrappers, `T = -offset` form)
+- [sine-wave-loop.md](sine-wave-loop.md) — idle micro-drift after viewport settles
+
+## Pairs with HF skills
+
+- `/hyperframes-animation` — single tween writing composite transform
+- `/hyperframes-core` — composition wiring
+- `/hyperframes-cli` — `hyperframes lint`
diff --git a/.claude/skills-media/hyperframes-animation/scripts/animation-map-sampling.mjs b/.claude/skills-media/hyperframes-animation/scripts/animation-map-sampling.mjs
new file mode 100644
index 000000000..7a118c6f6
--- /dev/null
+++ b/.claude/skills-media/hyperframes-animation/scripts/animation-map-sampling.mjs
@@ -0,0 +1,40 @@
+/**
+ * Seek and measure every sample for one tween inside a single browser
+ * evaluation. GSAP/HyperFrames seeks update DOM state synchronously, so a
+ * separate CDP round trip and wall-clock sleep per sample only adds latency.
+ */
+export async function sampleTweenBboxes(page, selector, times) {
+  return page.evaluate(
+    ({ selector: sel, times: sampleTimes }) => {
+      const seek = (time) => {
+        if (window.__hf && typeof window.__hf.seek === "function") {
+          window.__hf.seek(time);
+          return;
+        }
+        const timelines = window.__timelines;
+        if (!timelines) return;
+        for (const timeline of Object.values(timelines)) {
+          if (typeof timeline.seek === "function") timeline.seek(time);
+        }
+      };
+
+      return sampleTimes.map((time) => {
+        seek(time);
+        const el = document.querySelector(sel);
+        if (!el) return { t: time, x: 0, y: 0, w: 0, h: 0, missing: true };
+        const rect = el.getBoundingClientRect();
+        const style = getComputedStyle(el);
+        return {
+          t: time,
+          x: Math.round(rect.x),
+          y: Math.round(rect.y),
+          w: Math.round(rect.width),
+          h: Math.round(rect.height),
+          opacity: parseFloat(style.opacity),
+          visible: style.visibility !== "hidden" && style.display !== "none",
+        };
+      });
+    },
+    { selector, times },
+  );
+}
diff --git a/.claude/skills-media/hyperframes-animation/scripts/animation-map-sampling.test.mjs b/.claude/skills-media/hyperframes-animation/scripts/animation-map-sampling.test.mjs
new file mode 100644
index 000000000..ef6ddb8b7
--- /dev/null
+++ b/.claude/skills-media/hyperframes-animation/scripts/animation-map-sampling.test.mjs
@@ -0,0 +1,48 @@
+import assert from "node:assert/strict";
+import test from "node:test";
+import { sampleTweenBboxes } from "./animation-map-sampling.mjs";
+
+test("samples every tween time in one browser evaluation", async () => {
+  const calls = [];
+  const seekTimes = [];
+  const originalGlobals = {
+    window: globalThis.window,
+    document: globalThis.document,
+    getComputedStyle: globalThis.getComputedStyle,
+  };
+  let currentTime = 0;
+  globalThis.window = { __hf: { seek: (time) => (currentTime = time) } };
+  globalThis.document = {
+    querySelector: () => ({
+      getBoundingClientRect: () => ({ x: currentTime, y: 20, width: 30, height: 40 }),
+    }),
+  };
+  globalThis.getComputedStyle = () => ({ opacity: "1", visibility: "visible", display: "block" });
+  const page = {
+    async evaluate(callback, payload) {
+      calls.push(payload);
+      const originalSeek = globalThis.window.__hf.seek;
+      globalThis.window.__hf.seek = (time) => {
+        seekTimes.push(time);
+        originalSeek(time);
+      };
+      return callback(payload);
+    },
+  };
+
+  try {
+    const result = await sampleTweenBboxes(page, "#card", [1, 2, 3]);
+
+    assert.deepEqual(result, [
+      { t: 1, x: 1, y: 20, w: 30, h: 40, opacity: 1, visible: true },
+      { t: 2, x: 2, y: 20, w: 30, h: 40, opacity: 1, visible: true },
+      { t: 3, x: 3, y: 20, w: 30, h: 40, opacity: 1, visible: true },
+    ]);
+    assert.deepEqual(seekTimes, [1, 2, 3]);
+    assert.deepEqual(calls, [{ selector: "#card", times: [1, 2, 3] }]);
+  } finally {
+    globalThis.window = originalGlobals.window;
+    globalThis.document = originalGlobals.document;
+    globalThis.getComputedStyle = originalGlobals.getComputedStyle;
+  }
+});
diff --git a/.claude/skills-media/hyperframes-animation/scripts/animation-map.mjs b/.claude/skills-media/hyperframes-animation/scripts/animation-map.mjs
new file mode 100644
index 000000000..d26b2065b
--- /dev/null
+++ b/.claude/skills-media/hyperframes-animation/scripts/animation-map.mjs
@@ -0,0 +1,612 @@
+#!/usr/bin/env node
+// animation-map.mjs — HyperFrames animation map for agents
+//
+// Reads every GSAP timeline registered in window.__timelines, enumerates
+// tweens, samples bboxes at N points per tween, computes flags and
+// human-readable summaries. Outputs a single animation-map.json.
+//
+// Usage:
+//   node skills/hyperframes-animation/scripts/animation-map.mjs <composition-dir> \
+//     [--frames N] [--out <dir>] [--min-duration S] [--width W] [--height H] [--fps N]
+//
+// Env:
+//   HYPERFRAMES_SKILL_PKG_VERSION — pin the @hyperframes/producer version used
+//     when bootstrapping (global skill installs cannot infer it; falls back to
+//     @latest with a warning otherwise).
+
+import { mkdir, writeFile } from "node:fs/promises";
+import { resolve, join } from "node:path";
+import { sampleTweenBboxes } from "./animation-map-sampling.mjs";
+import {
+  bundleCompositionForCapture,
+  hyperframesPackageSpec,
+  importPackagesOrBootstrap,
+  initializeSessionWithRetry,
+} from "./package-loader.mjs";
+
+const packages = await importPackagesOrBootstrap(
+  ["@hyperframes/producer", "@hyperframes/core", "@hyperframes/core/compiler"],
+  {
+    npmPackages: [
+      hyperframesPackageSpec("@hyperframes/producer"),
+      hyperframesPackageSpec("@hyperframes/core"),
+    ],
+  },
+);
+const { createFileServer, createCaptureSession, closeCaptureSession, getCompositionDuration } =
+  packages["@hyperframes/producer"];
+const { parseFps } = packages["@hyperframes/core"];
+
+// ─── CLI ─────────────────────────────────────────────────────────────────────
+
+const args = parseArgs(process.argv.slice(2));
+if (!args.composition) die("missing <composition-dir>");
+
+const FRAMES = Number(args.frames ?? 6);
+const OUT_DIR = resolve(args.out ?? ".hyperframes/anim-map");
+const MIN_DUR = Number(args["min-duration"] ?? 0.15);
+const WIDTH = Number(args.width ?? 1920);
+const HEIGHT = Number(args.height ?? 1080);
+const parsedFps = parseFps(args.fps ?? 30);
+if (!parsedFps.ok) die(`Invalid --fps "${args.fps ?? ""}": ${parsedFps.reason}`);
+const FPS = parsedFps.value;
+const COMP_DIR = resolve(args.composition);
+
+await mkdir(OUT_DIR, { recursive: true });
+
+// ─── Main ────────────────────────────────────────────────────────────────────
+
+// Raw modular hosts do not mount child compositions in the capture helper.
+// Bundle first so duration/timeline discovery sees the same DOM as render/check.
+const bundle = await bundleCompositionForCapture(packages["@hyperframes/core/compiler"], COMP_DIR);
+let server;
+let session;
+try {
+  server = await createFileServer({
+    projectDir: COMP_DIR,
+    compiledDir: bundle.compiledDir,
+    port: 0,
+  });
+  // Canonical transient-init retry/cleanup (mirrors the render pipeline's
+  // probeStage): a valid modular project's sub-composition timelines register
+  // asynchronously, so the first attempt can time out as transient
+  // "zero duration / Runtime ready: false" — retry once with a fresh browser
+  // instead of false-failing the project.
+  session = await initializeSessionWithRetry(
+    packages["@hyperframes/producer"],
+    () =>
+      createCaptureSession(
+        server.url,
+        OUT_DIR,
+        { width: WIDTH, height: HEIGHT, fps: FPS, format: "png" },
+        null,
+      ),
+    { log: (message) => console.error(`animation-map: ${message}`) },
+  );
+
+  const duration = await getCompositionDuration(session);
+  const tweens = await enumerateTweens(session);
+  const kept = tweens.filter((tw) => tw.end - tw.start >= MIN_DUR);
+
+  const report = {
+    composition: COMP_DIR,
+    duration,
+    totalTweens: tweens.length,
+    mappedTweens: kept.length,
+    skippedMicroTweens: tweens.length - kept.length,
+    tweens: [],
+  };
+
+  for (let i = 0; i < kept.length; i++) {
+    const tw = kept[i];
+    const times = Array.from(
+      { length: FRAMES },
+      (_, k) => +(tw.start + ((k + 0.5) / FRAMES) * (tw.end - tw.start)).toFixed(3),
+    );
+
+    const bboxes = await sampleTweenBboxes(session.page, tw.selectorHint, times);
+
+    const animProps = tw.props.filter(
+      (p) => !["parent", "overwrite", "immediateRender", "startAt", "runBackwards"].includes(p),
+    );
+    const flags = computeFlags(tw, bboxes, { width: WIDTH, height: HEIGHT });
+    const summary = describeTween(tw, animProps, bboxes, flags);
+
+    report.tweens.push({
+      index: i + 1,
+      selector: tw.selectorHint,
+      targets: tw.targetCount,
+      props: animProps,
+      start: +tw.start.toFixed(3),
+      end: +tw.end.toFixed(3),
+      duration: +(tw.end - tw.start).toFixed(3),
+      ease: tw.ease,
+      bboxes,
+      flags,
+      summary,
+    });
+  }
+
+  markCollisions(report.tweens);
+
+  for (const tw of report.tweens) {
+    if (tw.flags.includes("collision") && !tw.summary.includes("collision")) {
+      tw.summary += " Overlaps another animated element.";
+    }
+  }
+
+  // ── Composition-level analysis ──
+  report.choreography = buildTimeline(report.tweens, duration);
+  report.density = computeDensity(report.tweens, duration);
+  report.staggers = detectStaggers(report.tweens);
+  report.elements = buildElementLifecycles(report.tweens);
+  report.deadZones = findDeadZones(report.density, duration);
+  report.snapshots = await captureSnapshots(session, report.tweens, duration);
+
+  await writeFile(join(OUT_DIR, "animation-map.json"), JSON.stringify(report, null, 2));
+
+  printSummary(report);
+} finally {
+  if (session) await closeCaptureSession(session).catch(() => {});
+  server?.close();
+  bundle.cleanup();
+}
+
+// ─── Seek helper ────────────────────────────────────────────────────────────
+
+async function seekTo(session, t) {
+  await session.page.evaluate((time) => {
+    if (window.__hf && typeof window.__hf.seek === "function") {
+      window.__hf.seek(time);
+      return;
+    }
+    const tls = window.__timelines;
+    if (tls) {
+      for (const tl of Object.values(tls)) {
+        if (typeof tl.seek === "function") tl.seek(time);
+      }
+    }
+  }, t);
+  await new Promise((r) => setTimeout(r, 100));
+}
+
+// ─── Timeline introspection ──────────────────────────────────────────────────
+
+async function enumerateTweens(session) {
+  return await session.page.evaluate(() => {
+    const results = [];
+    const registry = window.__timelines || {};
+
+    const selectorOf = (el) => {
+      if (!el || !(el instanceof Element)) return null;
+      if (el.id) return `#${el.id}`;
+      const cls = [...el.classList].slice(0, 2).join(".");
+      return cls ? `${el.tagName.toLowerCase()}.${cls}` : el.tagName.toLowerCase();
+    };
+
+    const walk = (node, parentOffset = 0) => {
+      if (!node) return;
+      if (typeof node.getChildren === "function") {
+        const offset = parentOffset + (node.startTime?.() ?? 0);
+        for (const child of node.getChildren(true, true, true)) {
+          walk(child, offset);
+        }
+        return;
+      }
+      const targets = (node.targets?.() ?? []).filter((t) => t instanceof Element);
+      if (!targets.length) return;
+      const vars = node.vars ?? {};
+      const props = Object.keys(vars).filter(
+        (k) =>
+          ![
+            "duration",
+            "ease",
+            "delay",
+            "repeat",
+            "yoyo",
+            "onStart",
+            "onUpdate",
+            "onComplete",
+            "stagger",
+          ].includes(k),
+      );
+      const start = parentOffset + (node.startTime?.() ?? 0);
+      const end = start + (node.duration?.() ?? 0);
+      results.push({
+        selectorHint: selectorOf(targets[0]) ?? "(unknown)",
+        targetCount: targets.length,
+        props,
+        start,
+        end,
+        ease: typeof vars.ease === "string" ? vars.ease : (vars.ease?.toString?.() ?? "none"),
+      });
+    };
+
+    for (const tl of Object.values(registry)) walk(tl, 0);
+    results.sort((a, b) => a.start - b.start);
+    return results;
+  });
+}
+
+// ─── Tween description (the key output for agents) ──────────────────────────
+
+function describeTween(tw, props, bboxes, flags) {
+  const dur = (tw.end - tw.start).toFixed(2);
+  const parts = [];
+
+  parts.push(`${tw.selectorHint} animates ${props.join("+")} over ${dur}s (${tw.ease})`);
+
+  // Movement
+  const first = bboxes[0];
+  const last = bboxes[bboxes.length - 1];
+  if (first && last) {
+    const dx = last.x - first.x;
+    const dy = last.y - first.y;
+    if (Math.abs(dx) > 3 || Math.abs(dy) > 3) {
+      const dirs = [];
+      if (Math.abs(dy) > 3) dirs.push(dy < 0 ? `${Math.abs(dy)}px up` : `${Math.abs(dy)}px down`);
+      if (Math.abs(dx) > 3)
+        dirs.push(dx < 0 ? `${Math.abs(dx)}px left` : `${Math.abs(dx)}px right`);
+      parts.push(`moves ${dirs.join(" and ")}`);
+    }
+  }
+
+  // Opacity
+  if (first && last && first.opacity !== undefined && last.opacity !== undefined) {
+    const o1 = first.opacity;
+    const o2 = last.opacity;
+    if (Math.abs(o2 - o1) > 0.1) {
+      if (o1 < 0.1 && o2 > 0.5) parts.push("fades in");
+      else if (o1 > 0.5 && o2 < 0.1) parts.push("fades out");
+      else parts.push(`opacity ${o1.toFixed(1)}→${o2.toFixed(1)}`);
+    }
+  }
+
+  // Scale (from props)
+  if (props.includes("scale") || props.includes("scaleX") || props.includes("scaleY")) {
+    parts.push("scales");
+  }
+
+  // Size changes
+  if (first && last) {
+    const dw = last.w - first.w;
+    const dh = last.h - first.h;
+    if (Math.abs(dw) > 5) parts.push(`width ${first.w}→${last.w}px`);
+    if (Math.abs(dh) > 5) parts.push(`height ${first.h}→${last.h}px`);
+  }
+
+  // Visibility
+  if (first && last && first.visible !== last.visible) {
+    parts.push(last.visible ? "becomes visible" : "becomes hidden");
+  }
+
+  // Final position
+  if (last && !last.missing) {
+    parts.push(`ends at (${last.x}, ${last.y}) ${last.w}×${last.h}px`);
+  }
+
+  // Flags
+  if (flags.length > 0) {
+    parts.push(`FLAGS: ${flags.join(", ")}`);
+  }
+
+  return parts.join(". ") + ".";
+}
+
+// ─── Flag computation ───────────────────────────────────────────────────────
+
+function computeFlags(tw, bboxes, { width, height }) {
+  const flags = [];
+  const dur = tw.end - tw.start;
+
+  if (bboxes.every((b) => b.w === 0 || b.h === 0)) flags.push("degenerate");
+
+  const anyOffscreen = bboxes.some(
+    (b) =>
+      b.x + b.w <= 0 ||
+      b.y + b.h <= 0 ||
+      b.x >= width ||
+      b.y >= height ||
+      b.x < -b.w * 0.5 ||
+      b.y < -b.h * 0.5 ||
+      b.x + b.w > width + b.w * 0.5 ||
+      b.y + b.h > height + b.h * 0.5,
+  );
+  if (anyOffscreen) flags.push("offscreen");
+
+  if (bboxes.every((b) => b.opacity !== undefined && b.opacity < 0.01 && b.visible)) {
+    flags.push("invisible");
+  }
+
+  if (dur < 0.2 && tw.props.some((p) => ["y", "x", "opacity", "scale"].includes(p))) {
+    flags.push("paced-fast");
+  }
+  if (dur > 2.0) flags.push("paced-slow");
+
+  return flags;
+}
+
+function markCollisions(tweens) {
+  for (let i = 0; i < tweens.length; i++) {
+    for (let j = i + 1; j < tweens.length; j++) {
+      const a = tweens[i];
+      const b = tweens[j];
+      if (a.end <= b.start || b.end <= a.start) continue;
+      for (const ba of a.bboxes) {
+        const bb = b.bboxes.find((x) => Math.abs(x.t - ba.t) < 0.05);
+        if (!bb) continue;
+        const overlap = rectOverlapArea(ba, bb);
+        const aArea = ba.w * ba.h;
+        if (aArea > 0 && overlap / aArea > 0.3) {
+          if (!a.flags.includes("collision")) a.flags.push("collision");
+          if (!b.flags.includes("collision")) b.flags.push("collision");
+          break;
+        }
+      }
+    }
+  }
+}
+
+function rectOverlapArea(a, b) {
+  const x1 = Math.max(a.x, b.x);
+  const y1 = Math.max(a.y, b.y);
+  const x2 = Math.min(a.x + a.w, b.x + b.w);
+  const y2 = Math.min(a.y + a.h, b.y + b.h);
+  return Math.max(0, x2 - x1) * Math.max(0, y2 - y1);
+}
+
+// ─── Composition-level analysis ─────────────────────────────────────────────
+
+function buildTimeline(tweens, duration) {
+  const cols = 60;
+  const lines = [];
+  const secPerCol = duration / cols;
+
+  lines.push("Timeline (" + duration.toFixed(1) + "s, each char ≈ " + secPerCol.toFixed(2) + "s):");
+  lines.push("  " + "0s" + " ".repeat(cols - 8) + duration.toFixed(0) + "s");
+  lines.push("  " + "┼" + "─".repeat(cols - 1) + "┤");
+
+  for (const tw of tweens) {
+    const startCol = Math.floor(tw.start / secPerCol);
+    const endCol = Math.min(cols, Math.ceil(tw.end / secPerCol));
+    const bar =
+      " ".repeat(startCol) +
+      "█".repeat(Math.max(1, endCol - startCol)) +
+      " ".repeat(Math.max(0, cols - endCol));
+    const label = tw.selector + " " + tw.props.join("+");
+    lines.push("  " + bar + "  " + label);
+  }
+
+  return lines.join("\n");
+}
+
+function computeDensity(tweens, duration) {
+  const buckets = [];
+  for (let t = 0; t < duration; t += 0.5) {
+    const active = tweens.filter((tw) => tw.start <= t + 0.5 && tw.end >= t);
+    buckets.push({ t: +t.toFixed(1), activeTweens: active.length });
+  }
+  return buckets;
+}
+
+function findDeadZones(density, duration) {
+  const zones = [];
+  let zoneStart = null;
+  for (const d of density) {
+    if (d.activeTweens === 0) {
+      if (zoneStart === null) zoneStart = d.t;
+    } else {
+      if (zoneStart !== null) {
+        const zoneEnd = d.t;
+        if (zoneEnd - zoneStart >= 1.0) {
+          zones.push({
+            start: zoneStart,
+            end: zoneEnd,
+            duration: +(zoneEnd - zoneStart).toFixed(1),
+            note:
+              "No animation for " +
+              (zoneEnd - zoneStart).toFixed(1) +
+              "s. Intentional hold or missing entrance?",
+          });
+        }
+        zoneStart = null;
+      }
+    }
+  }
+  if (zoneStart !== null && duration - zoneStart >= 1.0) {
+    zones.push({
+      start: zoneStart,
+      end: +duration.toFixed(1),
+      duration: +(duration - zoneStart).toFixed(1),
+      note:
+        "No animation for " +
+        (duration - zoneStart).toFixed(1) +
+        "s at end. Final hold or missing outro?",
+    });
+  }
+  return zones;
+}
+
+function detectStaggers(tweens) {
+  const groups = [];
+  const used = new Set();
+
+  for (let i = 0; i < tweens.length; i++) {
+    if (used.has(i)) continue;
+    const tw = tweens[i];
+    const group = [tw];
+    used.add(i);
+
+    for (let j = i + 1; j < tweens.length; j++) {
+      if (used.has(j)) continue;
+      const other = tweens[j];
+      const sameProps = tw.props.join(",") === other.props.join(",");
+      const sameDuration = Math.abs(tw.duration - other.duration) < 0.05;
+      const closeInTime = other.start - tw.start < tw.duration * 4;
+      if (sameProps && sameDuration && closeInTime) {
+        group.push(other);
+        used.add(j);
+      }
+    }
+
+    if (group.length >= 3) {
+      const intervals = [];
+      for (let k = 1; k < group.length; k++) {
+        intervals.push(+(group[k].start - group[k - 1].start).toFixed(3));
+      }
+      const avgInterval = intervals.reduce((a, b) => a + b, 0) / intervals.length;
+      const maxDrift = Math.max(...intervals.map((iv) => Math.abs(iv - avgInterval)));
+      const consistent = maxDrift < avgInterval * 0.3;
+
+      groups.push({
+        elements: group.map((g) => g.selector),
+        props: tw.props,
+        count: group.length,
+        intervals,
+        avgInterval: +avgInterval.toFixed(3),
+        consistent,
+        note: consistent
+          ? group.length +
+            " elements stagger at " +
+            (avgInterval * 1000).toFixed(0) +
+            "ms intervals"
+          : group.length +
+            " elements stagger with uneven intervals (" +
+            intervals.map((iv) => (iv * 1000).toFixed(0) + "ms").join(", ") +
+            ")",
+      });
+    }
+  }
+
+  return groups;
+}
+
+function buildElementLifecycles(tweens) {
+  const elements = {};
+  for (const tw of tweens) {
+    const sel = tw.selector;
+    if (!elements[sel]) {
+      elements[sel] = { firstTween: tw.start, lastTween: tw.end, tweenCount: 0, props: new Set() };
+    }
+    elements[sel].firstTween = Math.min(elements[sel].firstTween, tw.start);
+    elements[sel].lastTween = Math.max(elements[sel].lastTween, tw.end);
+    elements[sel].tweenCount++;
+    tw.props.forEach((p) => elements[sel].props.add(p));
+  }
+
+  const result = {};
+  for (const [sel, data] of Object.entries(elements)) {
+    const lastBbox = findLastBbox(tweens, sel);
+    result[sel] = {
+      firstAppears: +data.firstTween.toFixed(3),
+      lastAnimates: +data.lastTween.toFixed(3),
+      tweenCount: data.tweenCount,
+      props: [...data.props],
+      endsVisible: lastBbox ? lastBbox.opacity > 0.1 && lastBbox.visible : null,
+      finalPosition: lastBbox
+        ? { x: lastBbox.x, y: lastBbox.y, w: lastBbox.w, h: lastBbox.h }
+        : null,
+    };
+  }
+  return result;
+}
+
+function findLastBbox(tweens, selector) {
+  for (let i = tweens.length - 1; i >= 0; i--) {
+    if (tweens[i].selector === selector && tweens[i].bboxes?.length > 0) {
+      return tweens[i].bboxes[tweens[i].bboxes.length - 1];
+    }
+  }
+  return null;
+}
+
+async function captureSnapshots(session, tweens, duration) {
+  const times = [0, duration * 0.25, duration * 0.5, duration * 0.75, duration - 0.1];
+  const snapshots = [];
+
+  for (const t of times) {
+    await seekTo(session, t);
+    const visible = await session.page.evaluate(() => {
+      const out = [];
+      const els = document.querySelectorAll("[id]");
+      for (const el of els) {
+        const cs = getComputedStyle(el);
+        if (cs.display === "none") continue;
+        const opacity = parseFloat(cs.opacity);
+        if (opacity < 0.01) continue;
+        const rect = el.getBoundingClientRect();
+        if (rect.width < 1 || rect.height < 1) continue;
+        out.push({
+          id: el.id,
+          x: Math.round(rect.x),
+          y: Math.round(rect.y),
+          w: Math.round(rect.width),
+          h: Math.round(rect.height),
+          opacity: +opacity.toFixed(2),
+        });
+      }
+      return out;
+    });
+
+    const activeTweens = tweens
+      .filter((tw) => tw.start <= t && tw.end >= t)
+      .map((tw) => tw.selector);
+
+    snapshots.push({
+      t: +t.toFixed(2),
+      visibleElements: visible.length,
+      animatingNow: activeTweens,
+      elements: visible,
+    });
+  }
+
+  return snapshots;
+}
+
+// ─── Output ─────────────────────────────────────────────────────────────────
+
+function printSummary(report) {
+  console.log(
+    `\nAnimation map: ${report.mappedTweens}/${report.totalTweens} tweens (skipped ${report.skippedMicroTweens} micro-tweens)`,
+  );
+
+  const flagCounts = {};
+  for (const tw of report.tweens) {
+    for (const f of tw.flags) flagCounts[f] = (flagCounts[f] ?? 0) + 1;
+  }
+  if (Object.keys(flagCounts).length > 0) {
+    for (const [f, n] of Object.entries(flagCounts)) console.log(`  ${f}: ${n}`);
+  }
+  if (report.staggers?.length > 0) {
+    console.log(`  staggers: ${report.staggers.map((s) => s.note).join("; ")}`);
+  }
+  if (report.deadZones?.length > 0) {
+    console.log(
+      `  dead zones: ${report.deadZones.map((z) => z.start + "-" + z.end + "s").join(", ")}`,
+    );
+  }
+
+  console.log(report.choreography);
+}
+
+function parseArgs(argv) {
+  const out = {};
+  let positional = 0;
+  for (let i = 0; i < argv.length; i++) {
+    const a = argv[i];
+    if (a.startsWith("--")) {
+      const k = a.slice(2);
+      const v = argv[i + 1]?.startsWith("--") ? true : argv[++i];
+      out[k] = v;
+    } else if (positional === 0) {
+      out.composition = a;
+      positional++;
+    }
+  }
+  return out;
+}
+
+function die(msg) {
+  console.error(`animation-map: ${msg}`);
+  process.exit(2);
+}
diff --git a/.claude/skills-media/hyperframes-animation/scripts/animation-map.test.mjs b/.claude/skills-media/hyperframes-animation/scripts/animation-map.test.mjs
new file mode 100644
index 000000000..f3cbbecdf
--- /dev/null
+++ b/.claude/skills-media/hyperframes-animation/scripts/animation-map.test.mjs
@@ -0,0 +1,288 @@
+import assert from "node:assert/strict";
+import { spawnSync } from "node:child_process";
+import { mkdirSync, mkdtempSync, readFileSync, rmSync, writeFileSync } from "node:fs";
+import { tmpdir } from "node:os";
+import { dirname, join, resolve } from "node:path";
+import { fileURLToPath } from "node:url";
+import { describe, it } from "node:test";
+
+const REPO_ROOT = resolve(dirname(fileURLToPath(import.meta.url)), "../../..");
+const HELPERS = [
+  join(REPO_ROOT, "skills", "hyperframes-animation", "scripts", "animation-map.mjs"),
+  join(REPO_ROOT, "skills", "hyperframes-creative", "scripts", "contrast-report.mjs"),
+];
+
+describe("HyperFrames skill helpers", () => {
+  for (const helper of HELPERS)
+    it(`${helper.split("/").at(-1)} bundles modular input and uses rational fps`, () => {
+      const root = mkdtempSync(join(tmpdir(), "hyperframes-skill-helper-test-"));
+      const packageDir = join(root, "node_modules", "@hyperframes", "producer");
+      const corePackageDir = join(root, "node_modules", "@hyperframes", "core");
+      const sharpPackageDir = join(root, "node_modules", "sharp");
+      const compositionDir = join(root, "composition");
+      mkdirSync(packageDir, { recursive: true });
+      mkdirSync(corePackageDir, { recursive: true });
+      mkdirSync(sharpPackageDir, { recursive: true });
+      mkdirSync(compositionDir, { recursive: true });
+      writeFileSync(
+        join(packageDir, "package.json"),
+        JSON.stringify({ name: "@hyperframes/producer", type: "module", exports: "./index.mjs" }),
+      );
+      writeFileSync(
+        join(packageDir, "index.mjs"),
+        [
+          'import { readFileSync } from "node:fs";',
+          'import { join } from "node:path";',
+          "export async function createFileServer(options) {",
+          '  const bundled = readFileSync(join(options.compiledDir, "index.html"), "utf8");',
+          '  if (bundled !== "<!doctype html><main>bundled modular composition</main>") {',
+          "    throw new Error(`UNEXPECTED_BUNDLE=${bundled}`);",
+          "  }",
+          '  return { url: "http://test", close() {} };',
+          "}",
+          "export async function createCaptureSession(_url, _out, options) {",
+          "  throw new Error(`CAPTURE_OPTIONS=${JSON.stringify(options)}`);",
+          "}",
+          "export async function initializeSession() {}",
+          "export async function closeCaptureSession() {}",
+          "export async function getCompositionDuration() { return 0; }",
+        ].join("\n"),
+      );
+      writeFileSync(
+        join(corePackageDir, "package.json"),
+        JSON.stringify({
+          name: "@hyperframes/core",
+          type: "module",
+          exports: { ".": "./index.mjs", "./compiler": "./compiler.mjs" },
+        }),
+      );
+      writeFileSync(
+        join(corePackageDir, "index.mjs"),
+        [
+          "export function parseFps(input) {",
+          "  if (input === '30000/1001') return { ok: true, value: { num: 30000, den: 1001 } };",
+          "  if (input === '29.97') return { ok: false, reason: 'ambiguous-decimal' };",
+          "  return { ok: true, value: { num: Number(input), den: 1 } };",
+          "}",
+        ].join("\n"),
+      );
+      writeFileSync(
+        join(corePackageDir, "compiler.mjs"),
+        [
+          "export async function bundleToSingleHtml() {",
+          '  return "<!doctype html><main>bundled modular composition</main>";',
+          "}",
+        ].join("\n"),
+      );
+      writeFileSync(
+        join(sharpPackageDir, "package.json"),
+        JSON.stringify({ name: "sharp", type: "module", exports: "./index.mjs" }),
+      );
+      writeFileSync(join(sharpPackageDir, "index.mjs"), "export default function sharp() {}\n");
+
+      try {
+        const result = spawnSync(
+          process.execPath,
+          [helper, compositionDir, "--fps", "30000/1001", "--out", join(root, "output")],
+          {
+            encoding: "utf8",
+            env: {
+              ...process.env,
+              HYPERFRAMES_SKILL_NODE_MODULES: join(root, "node_modules"),
+            },
+          },
+        );
+        const output = `${result.stdout}\n${result.stderr}`;
+        assert.notEqual(result.status, 0);
+        assert.match(output, /CAPTURE_OPTIONS=.*"fps":\{"num":30000,"den":1001\}/);
+
+        const invalid = spawnSync(
+          process.execPath,
+          [helper, compositionDir, "--fps", "29.97", "--out", join(root, "invalid-output")],
+          {
+            encoding: "utf8",
+            env: {
+              ...process.env,
+              HYPERFRAMES_SKILL_NODE_MODULES: join(root, "node_modules"),
+            },
+          },
+        );
+        const invalidOutput = `${invalid.stdout}\n${invalid.stderr}`;
+        assert.notEqual(invalid.status, 0);
+        assert.match(invalidOutput, /Invalid --fps "29\.97": ambiguous-decimal/);
+        assert.doesNotMatch(invalidOutput, /CAPTURE_OPTIONS=/);
+      } finally {
+        rmSync(root, { recursive: true, force: true });
+      }
+    });
+});
+
+// The two package-loader.mjs copies are intentionally byte-identical (each
+// skill ships standalone, so neither can import the other's) and now carry
+// shared logic (initializeSessionWithRetry + FALLBACK_TRANSIENT_PATTERNS)
+// that a future fix could land in one copy and silently miss in the other —
+// the exact drift class the audio.mjs identity pin was born to catch.
+describe("package-loader parity", () => {
+  it("package-loader.mjs is byte-identical to hyperframes-creative's copy (the stated contract)", () => {
+    const here = readFileSync(
+      join(REPO_ROOT, "skills", "hyperframes-animation", "scripts", "package-loader.mjs"),
+      "utf8",
+    );
+    const sibling = readFileSync(
+      join(REPO_ROOT, "skills", "hyperframes-creative", "scripts", "package-loader.mjs"),
+      "utf8",
+    );
+    assert.equal(here, sibling);
+  });
+});
+
+// ── Transient-init retry (the zero-duration false-fail fix) ─────────────────
+// A valid modular project's sub-composition timelines register asynchronously;
+// the first initializeSession can time out with the transient "zero duration /
+// Runtime ready: false" diagnostic. The render pipeline closes the crashed
+// session and retries once with a fresh browser (probeStage) — the standalone
+// helpers must do the same instead of reporting the project as zero-duration.
+
+/** Write a fake node_modules with the given producer index.mjs source. */
+function writeFakeEnv(root, producerIndexSource) {
+  const packageDir = join(root, "node_modules", "@hyperframes", "producer");
+  const corePackageDir = join(root, "node_modules", "@hyperframes", "core");
+  const sharpPackageDir = join(root, "node_modules", "sharp");
+  const compositionDir = join(root, "composition");
+  mkdirSync(packageDir, { recursive: true });
+  mkdirSync(corePackageDir, { recursive: true });
+  mkdirSync(sharpPackageDir, { recursive: true });
+  mkdirSync(compositionDir, { recursive: true });
+  writeFileSync(
+    join(packageDir, "package.json"),
+    JSON.stringify({ name: "@hyperframes/producer", type: "module", exports: "./index.mjs" }),
+  );
+  writeFileSync(join(packageDir, "index.mjs"), producerIndexSource);
+  writeFileSync(
+    join(corePackageDir, "package.json"),
+    JSON.stringify({
+      name: "@hyperframes/core",
+      type: "module",
+      exports: { ".": "./index.mjs", "./compiler": "./compiler.mjs" },
+    }),
+  );
+  writeFileSync(
+    join(corePackageDir, "index.mjs"),
+    "export function parseFps(input) { return { ok: true, value: { num: Number(input), den: 1 } }; }",
+  );
+  writeFileSync(
+    join(corePackageDir, "compiler.mjs"),
+    'export async function bundleToSingleHtml() { return "<!doctype html><main>x</main>"; }',
+  );
+  writeFileSync(
+    join(sharpPackageDir, "package.json"),
+    JSON.stringify({ name: "sharp", type: "module", exports: "./index.mjs" }),
+  );
+  writeFileSync(join(sharpPackageDir, "index.mjs"), "export default function sharp() {}\n");
+  return compositionDir;
+}
+
+function runHelper(helper, root, compositionDir) {
+  const result = spawnSync(process.execPath, [helper, compositionDir, "--out", join(root, "out")], {
+    encoding: "utf8",
+    env: { ...process.env, HYPERFRAMES_SKILL_NODE_MODULES: join(root, "node_modules") },
+  });
+  return `${result.stdout}\n${result.stderr}`;
+}
+
+const FAKE_PRODUCER_COMMON = [
+  'export async function createFileServer() { return { url: "http://test", close() {} }; }',
+  'export async function createCaptureSession() { console.error("SESSION_CREATED"); return {}; }',
+  'export async function closeCaptureSession() { console.error("SESSION_CLOSED"); }',
+  "export async function getCompositionDuration() { return 0; }",
+].join("\n");
+
+describe("transient-init retry", () => {
+  for (const helper of HELPERS) {
+    it(`${helper.split("/").at(-1)} retries a transient zero-duration init once with a fresh session`, () => {
+      const root = mkdtempSync(join(tmpdir(), "hyperframes-skill-retry-test-"));
+      try {
+        const compositionDir = writeFakeEnv(
+          root,
+          [
+            FAKE_PRODUCER_COMMON,
+            "let initCalls = 0;",
+            "export async function initializeSession() {",
+            "  initCalls++;",
+            "  if (initCalls === 1) {",
+            // The transient shape: readiness deadline hit before async
+            // sub-composition timelines landed (Runtime ready: false).
+            '    throw new Error("Composition has zero duration after initialization.\\nRuntime ready: false");',
+            "  }",
+            '  throw new Error("INIT_ATTEMPT_2_REACHED");',
+            "}",
+          ].join("\n"),
+        );
+
+        const output = runHelper(helper, root, compositionDir);
+
+        // Retried: fresh session created for attempt 2, crashed one closed.
+        assert.match(output, /retrying with a fresh browser session/);
+        assert.equal((output.match(/SESSION_CREATED/g) ?? []).length, 2);
+        assert.equal((output.match(/SESSION_CLOSED/g) ?? []).length, 2);
+        // ...and the retry genuinely re-ran init (bounded: no third attempt).
+        assert.match(output, /INIT_ATTEMPT_2_REACHED/);
+      } finally {
+        rmSync(root, { recursive: true, force: true });
+      }
+    });
+
+    it(`${helper.split("/").at(-1)} does NOT retry a genuine authoring failure (Runtime ready: true)`, () => {
+      const root = mkdtempSync(join(tmpdir(), "hyperframes-skill-retry-test-"));
+      try {
+        const compositionDir = writeFakeEnv(
+          root,
+          [
+            FAKE_PRODUCER_COMMON,
+            "export async function initializeSession() {",
+            // The fast-fail shape: runtime IS ready, there is genuinely no
+            // timeline/duration — an authoring bug retries can't fix.
+            '  throw new Error("Composition has zero duration after initialization.\\nRuntime ready: true");',
+            "}",
+          ].join("\n"),
+        );
+
+        const output = runHelper(helper, root, compositionDir);
+
+        assert.doesNotMatch(output, /retrying with a fresh browser session/);
+        assert.equal((output.match(/SESSION_CREATED/g) ?? []).length, 1);
+        assert.match(output, /Composition has zero duration/);
+      } finally {
+        rmSync(root, { recursive: true, force: true });
+      }
+    });
+  }
+
+  it("prefers the producer's own isTransientBrowserError classifier when exported", () => {
+    const root = mkdtempSync(join(tmpdir(), "hyperframes-skill-retry-test-"));
+    try {
+      const compositionDir = writeFakeEnv(
+        root,
+        [
+          FAKE_PRODUCER_COMMON,
+          // A message the frozen fallback patterns would NOT match — only the
+          // producer-provided classifier can mark it transient.
+          "export function isTransientBrowserError(err) { return String(err && err.message).includes('CUSTOM_TRANSIENT'); }",
+          "let initCalls = 0;",
+          "export async function initializeSession() {",
+          "  initCalls++;",
+          '  if (initCalls === 1) throw new Error("CUSTOM_TRANSIENT flake");',
+          '  throw new Error("INIT_ATTEMPT_2_REACHED");',
+          "}",
+        ].join("\n"),
+      );
+
+      const output = runHelper(HELPERS[0], root, compositionDir);
+
+      assert.match(output, /retrying with a fresh browser session/);
+      assert.match(output, /INIT_ATTEMPT_2_REACHED/);
+    } finally {
+      rmSync(root, { recursive: true, force: true });
+    }
+  });
+});
diff --git a/.claude/skills-media/hyperframes-animation/scripts/package-loader.mjs b/.claude/skills-media/hyperframes-animation/scripts/package-loader.mjs
new file mode 100644
index 000000000..b16bb6f99
--- /dev/null
+++ b/.claude/skills-media/hyperframes-animation/scripts/package-loader.mjs
@@ -0,0 +1,384 @@
+// package-loader — bootstrap optional helper packages only when missing, with
+// defense-in-depth so a malicious or typo'd dependency can't run on install:
+//   • specs are version-pinned (assertPinnedPackageSpecs) — no floating "latest"
+//   • install runs `npm install --ignore-scripts` — package lifecycle scripts
+//     never execute
+//   • `--no-save` into a throwaway tmp dir — the host project is left untouched
+//   • requires an interactive y/N (or an explicit $HYPERFRAMES_SKILL_BOOTSTRAP_DEPS=1)
+//   • npm is spawned with an argv array (no shell) — never a built command string
+// The `installLine` strings below are DISPLAY ONLY (shown in the prompt / error
+// text); they are never handed to a shell or executed.
+import { spawnSync } from "node:child_process";
+import { existsSync, mkdtempSync, readFileSync, rmSync, writeFileSync } from "node:fs";
+import { createRequire } from "node:module";
+import { tmpdir } from "node:os";
+import { basename, delimiter, dirname, join, parse, resolve } from "node:path";
+import { createInterface } from "node:readline/promises";
+import { fileURLToPath, pathToFileURL } from "node:url";
+
+const HERE = dirname(fileURLToPath(import.meta.url));
+const VERSION_OVERRIDE_ENV = "HYPERFRAMES_SKILL_PKG_VERSION";
+const BOOTSTRAP_ENV = "HYPERFRAMES_SKILL_DEPS_BOOTSTRAPPED";
+const BOOTSTRAP_CONFIRM_ENV = "HYPERFRAMES_SKILL_BOOTSTRAP_DEPS";
+const NODE_MODULES_ENV = "HYPERFRAMES_SKILL_NODE_MODULES";
+
+export async function importPackagesOrBootstrap(packageNames, options = {}) {
+  const entries = new Map();
+  const missing = [];
+
+  for (const packageName of packageNames) {
+    const entry = resolvePackageEntry(packageName);
+    if (entry) entries.set(packageName, entry);
+    else missing.push(packageName);
+  }
+
+  if (missing.length > 0 && !process.env[BOOTSTRAP_ENV]) {
+    const npmPackages = options.npmPackages ?? missing;
+    assertPinnedPackageSpecs(npmPackages);
+    await confirmBootstrap(npmPackages);
+    bootstrapWithNpmInstall(npmPackages);
+  }
+
+  if (missing.length > 0) {
+    throw new Error(
+      [
+        `Could not resolve required package(s): ${missing.join(", ")}`,
+        "Install them in this project, for example:",
+        `  npm install --save-dev ${packageNames.map(shellQuote).join(" ")}`,
+      ].join("\n"),
+    );
+  }
+
+  const modules = {};
+  for (const [packageName, entry] of entries) {
+    modules[packageName] = await import(pathToFileURL(entry).href);
+  }
+  return modules;
+}
+
+export async function bundleCompositionForCapture(compiler, projectDir) {
+  const compiledDir = mkdtempSync(join(tmpdir(), "hyperframes-skill-bundle-"));
+  try {
+    const html = await compiler.bundleToSingleHtml(projectDir);
+    writeFileSync(join(compiledDir, "index.html"), html);
+    return {
+      compiledDir,
+      cleanup() {
+        rmSync(compiledDir, { recursive: true, force: true });
+      },
+    };
+  } catch (error) {
+    rmSync(compiledDir, { recursive: true, force: true });
+    throw error;
+  }
+}
+
+// ── Transient-init retry ─────────────────────────────────────────────────────
+// Frozen snapshot of the engine's TRANSIENT_BROWSER_ERROR_PATTERNS (see
+// packages/engine frameCapture.ts), used only when the imported
+// @hyperframes/producer predates the isTransientBrowserError re-export. The
+// last pattern is the load-bearing one for modular projects: sub-composition
+// timelines register asynchronously, so a first init attempt can time out as
+// "zero duration / Runtime ready: false" on a valid project.
+const FALLBACK_TRANSIENT_PATTERNS = [
+  /Navigating frame was detached/i,
+  /Target closed/i,
+  /Session closed/i,
+  /browser has disconnected/i,
+  /Page crashed/i,
+  /Execution context was destroyed/i,
+  /Cannot find context with specified id/i,
+  /Failed to launch the browser process/i,
+  /Navigation timeout of \d+ ms exceeded/i,
+  /ECONNREFUSED/i,
+  /net::ERR_NETWORK_CHANGED/i,
+  /Composition has zero duration[\s\S]*Runtime ready: false/,
+];
+
+/**
+ * Create + initialize a capture session with the canonical transient-init
+ * retry/cleanup the render pipeline uses (see probeStage in
+ * @hyperframes/producer): on a transient failure, close the crashed session
+ * and retry ONCE with a fresh browser. Without this, a standalone helper
+ * false-fails valid modular projects whose sub-composition timelines land a
+ * beat after the first readiness deadline ("zero duration" with
+ * "Runtime ready: false").
+ *
+ * `producer` is the imported @hyperframes/producer namespace;
+ * `createSession` is a factory returning a fresh (uninitialized) session.
+ * Non-transient init failures (e.g. the "Runtime ready: true" zero-duration
+ * fast-fail — a genuine authoring bug) still throw on the first attempt.
+ */
+export async function initializeSessionWithRetry(producer, createSession, options = {}) {
+  const maxAttempts = options.maxAttempts ?? 2;
+  const log = options.log ?? ((message) => console.error(message));
+  const isTransient =
+    typeof producer.isTransientBrowserError === "function"
+      ? producer.isTransientBrowserError
+      : (err) => {
+          const message = err instanceof Error ? err.message : String(err);
+          return FALLBACK_TRANSIENT_PATTERNS.some((pattern) => pattern.test(message));
+        };
+
+  for (let attempt = 1; ; attempt++) {
+    const session = await createSession();
+    try {
+      await producer.initializeSession(session);
+      return session;
+    } catch (error) {
+      await producer.closeCaptureSession(session).catch(() => {});
+      if (attempt >= maxAttempts || !isTransient(error)) throw error;
+      log(
+        `transient browser-init failure (attempt ${attempt}/${maxAttempts}): ${
+          error instanceof Error ? error.message : String(error)
+        }`,
+      );
+      log("retrying with a fresh browser session...");
+    }
+  }
+}
+
+export function hyperframesPackageSpec(packageName) {
+  const override = process.env[VERSION_OVERRIDE_ENV]?.trim();
+  if (override) return `${packageName}@${override}`;
+
+  const version = readBundledHyperframesVersion();
+  if (version) return `${packageName}@${version}`;
+
+  // Global skill installs (e.g. ~/.claude/skills) have no hyperframes package.json
+  // in their ancestor chain, so the bundled version is unknowable. Fall back to
+  // @latest instead of throwing: already-installed packages still import, and a
+  // bootstrap install can still proceed (@latest satisfies the pinned-spec guard).
+  process.stderr.write(
+    [
+      `hyperframes: could not determine the bundled version for ${packageName}; using @latest.`,
+      `Set ${VERSION_OVERRIDE_ENV}=<version> to pin it.`,
+      "",
+    ].join("\n"),
+  );
+  return `${packageName}@latest`;
+}
+
+function resolvePackageEntry(packageName) {
+  const bases = [process.cwd(), HERE, ...envNodeModulesDirs(), ...nodeModulesDirsFromPath()];
+  const { rootName, subpath } = splitPackageSpecifier(packageName);
+
+  const seen = new Set();
+  for (const base of bases) {
+    const normalized = resolve(base);
+    if (seen.has(normalized)) continue;
+    seen.add(normalized);
+
+    try {
+      return createRequire(join(normalized, "__hyperframes_skill_loader__.cjs")).resolve(
+        packageName,
+      );
+    } catch {
+      const packageDir = findPackageDir(normalized, rootName);
+      const packageEntry = packageDir ? readPackageEntry(packageDir, subpath) : null;
+      if (packageEntry) return packageEntry;
+    }
+  }
+
+  return null;
+}
+
+function splitPackageSpecifier(packageName) {
+  const segments = packageName.split("/");
+  const rootLength = packageName.startsWith("@") ? 2 : 1;
+  return {
+    rootName: segments.slice(0, rootLength).join("/"),
+    subpath: segments.slice(rootLength).join("/"),
+  };
+}
+
+function readBundledHyperframesVersion() {
+  for (const ancestor of ancestors(HERE)) {
+    const directVersion = readPackageVersion(join(ancestor, "package.json"));
+    if (directVersion) return directVersion;
+
+    const monorepoCliVersion = readPackageVersion(
+      join(ancestor, "packages", "cli", "package.json"),
+    );
+    if (monorepoCliVersion) return monorepoCliVersion;
+  }
+  return null;
+}
+
+function readPackageVersion(packageJsonPath) {
+  try {
+    const manifest = JSON.parse(readFileSync(packageJsonPath, "utf8"));
+    if (manifest.name === "hyperframes" || manifest.name === "@hyperframes/cli") {
+      return typeof manifest.version === "string" ? manifest.version : null;
+    }
+  } catch {
+    // Keep searching ancestor package manifests.
+  }
+  return null;
+}
+
+function envNodeModulesDirs() {
+  return (process.env[NODE_MODULES_ENV] ?? "").split(delimiter).filter(Boolean);
+}
+
+function nodeModulesDirsFromPath() {
+  const dirs = [];
+  for (const entry of (process.env.PATH ?? "").split(delimiter)) {
+    if (!entry.endsWith(`${join("node_modules", ".bin")}`)) continue;
+    dirs.push(dirname(entry));
+  }
+  return dirs;
+}
+
+function findPackageDir(base, packageName) {
+  const packageSegments = packageName.split("/");
+  const roots =
+    basename(base) === "node_modules"
+      ? [base]
+      : ancestors(base).map((ancestor) => join(ancestor, "node_modules"));
+
+  for (const root of roots) {
+    const packageDir = join(root, ...packageSegments);
+    if (existsSync(join(packageDir, "package.json"))) return packageDir;
+  }
+  return null;
+}
+
+function readPackageEntry(packageDir, subpath = "") {
+  try {
+    const manifest = JSON.parse(readFileSync(join(packageDir, "package.json"), "utf8"));
+    const requestedExport = subpath ? manifest.exports?.[`./${subpath}`] : manifest.exports;
+    const entry =
+      exportEntry(requestedExport) ??
+      (!subpath ? (manifest.module ?? manifest.main ?? "index.js") : null);
+    if (!entry) return null;
+    const entryPath = join(packageDir, entry);
+    return existsSync(entryPath) ? entryPath : null;
+  } catch {
+    return null;
+  }
+}
+
+function exportEntry(exports) {
+  const root =
+    typeof exports === "object" && exports !== null ? (exports["."] ?? exports) : exports;
+  if (typeof root === "string") return root;
+  if (typeof root !== "object" || root === null) return null;
+  if (typeof root.import === "string") return root.import;
+  if (typeof root.default === "string") return root.default;
+  if (typeof root.node === "string") return root.node;
+  if (typeof root.node === "object" && root.node !== null) {
+    return root.node.import ?? root.node.default ?? null;
+  }
+  return null;
+}
+
+function assertPinnedPackageSpecs(packageSpecs) {
+  const unpinned = packageSpecs.filter((spec) => !hasVersionSpec(spec));
+  if (unpinned.length === 0) return;
+  throw new Error(
+    [
+      `Refusing to bootstrap unpinned package spec(s): ${unpinned.join(", ")}`,
+      "Pass pinned npm package specs, for example:",
+      `  ${packageSpecs.map((spec) => (hasVersionSpec(spec) ? spec : `${spec}@<version>`)).join(" ")}`,
+    ].join("\n"),
+  );
+}
+
+function hasVersionSpec(packageSpec) {
+  if (packageSpec.startsWith("@")) {
+    const slash = packageSpec.indexOf("/");
+    return slash !== -1 && packageSpec.indexOf("@", slash + 1) !== -1;
+  }
+  return packageSpec.includes("@");
+}
+
+async function confirmBootstrap(packageSpecs) {
+  if (process.env[BOOTSTRAP_CONFIRM_ENV] === "1") return;
+
+  const installLine = `npm install --ignore-scripts --no-save ${packageSpecs.map(shellQuote).join(" ")}`;
+  if (!process.stdin.isTTY) {
+    throw new Error(
+      [
+        "Required helper package(s) are missing.",
+        "To allow a one-time temporary dependency bootstrap for this run, set:",
+        `  ${BOOTSTRAP_CONFIRM_ENV}=1`,
+        "The bootstrap command will be:",
+        `  ${installLine}`,
+      ].join("\n"),
+    );
+  }
+
+  const rl = createInterface({ input: process.stdin, output: process.stderr });
+  try {
+    const answer = await rl.question(
+      [
+        "HyperFrames helper package(s) are missing.",
+        `Run a temporary install with lifecycle scripts disabled?`,
+        `  ${installLine}`,
+        "Proceed? [y/N] ",
+      ].join("\n"),
+    );
+    if (!/^(y|yes)$/i.test(answer.trim())) {
+      throw new Error("Dependency bootstrap cancelled.");
+    }
+  } finally {
+    rl.close();
+  }
+}
+
+function ancestors(start) {
+  const dirs = [];
+  let current = resolve(start);
+  const root = parse(current).root;
+  while (current && current !== root) {
+    dirs.push(current);
+    current = dirname(current);
+  }
+  dirs.push(root);
+  return dirs;
+}
+
+function bootstrapWithNpmInstall(packageNames) {
+  const installRoot = mkdtempSync(join(tmpdir(), "hyperframes-skill-deps-"));
+  const installResult = spawnSync(
+    process.platform === "win32" ? "npm.cmd" : "npm",
+    [
+      "install",
+      "--silent",
+      "--no-audit",
+      "--no-fund",
+      "--ignore-scripts",
+      "--no-save",
+      "--prefix",
+      installRoot,
+      ...packageNames,
+    ],
+    { stdio: "inherit" },
+  );
+
+  if (installResult.error) throw installResult.error;
+  if (installResult.status !== 0) {
+    rmSync(installRoot, { recursive: true, force: true });
+    process.exit(installResult.status ?? 1);
+  }
+
+  const args = [...process.argv.slice(1)];
+  const result = spawnSync(process.execPath, args, {
+    stdio: "inherit",
+    env: {
+      ...process.env,
+      [BOOTSTRAP_ENV]: "1",
+      [NODE_MODULES_ENV]: join(installRoot, "node_modules"),
+    },
+  });
+
+  rmSync(installRoot, { recursive: true, force: true });
+  if (result.error) throw result.error;
+  process.exit(result.status ?? 1);
+}
+
+function shellQuote(value) {
+  if (/^[A-Za-z0-9_./:@=-]+$/.test(value)) return value;
+  return `'${value.replace(/'/g, "'\\''")}'`;
+}
diff --git a/.claude/skills-media/hyperframes-animation/scripts/package-loader.test.mjs b/.claude/skills-media/hyperframes-animation/scripts/package-loader.test.mjs
new file mode 100644
index 000000000..7b36a3ceb
--- /dev/null
+++ b/.claude/skills-media/hyperframes-animation/scripts/package-loader.test.mjs
@@ -0,0 +1,62 @@
+import { test } from "node:test";
+import assert from "node:assert/strict";
+import { spawnSync } from "node:child_process";
+import { copyFileSync, mkdtempSync, rmSync, writeFileSync } from "node:fs";
+import { dirname, join } from "node:path";
+import { tmpdir } from "node:os";
+import { fileURLToPath } from "node:url";
+
+const HERE = dirname(fileURLToPath(import.meta.url));
+const ENV = "HYPERFRAMES_SKILL_PKG_VERSION";
+
+// (a) env override wins — no ancestor lookup, exact version echoed back.
+test("hyperframesPackageSpec: env override wins", async () => {
+  const prev = process.env[ENV];
+  process.env[ENV] = "9.9.9";
+  try {
+    const { hyperframesPackageSpec } = await import("./package-loader.mjs");
+    assert.equal(hyperframesPackageSpec("@hyperframes/producer"), "@hyperframes/producer@9.9.9");
+  } finally {
+    if (prev === undefined) delete process.env[ENV];
+    else process.env[ENV] = prev;
+  }
+});
+
+// (b) resolvable version (in-repo) pins the bundled hyperframes/@hyperframes/cli version.
+test("hyperframesPackageSpec: resolvable in-repo version pins it", async () => {
+  const prev = process.env[ENV];
+  delete process.env[ENV];
+  try {
+    const { hyperframesPackageSpec } = await import("./package-loader.mjs");
+    const spec = hyperframesPackageSpec("@hyperframes/producer");
+    assert.match(spec, /^@hyperframes\/producer@\d+\.\d+\.\d+/);
+  } finally {
+    if (prev !== undefined) process.env[ENV] = prev;
+  }
+});
+
+// (c) unresolvable + no override -> @latest fallback, no throw (global-install case).
+// Copy the loader into an isolated temp dir whose ancestor chain has no hyperframes
+// package.json, and run node from there so cwd cannot resolve one either.
+test("hyperframesPackageSpec: unresolvable falls back to @latest without throwing", () => {
+  const dir = mkdtempSync(join(tmpdir(), "hf-pkgloader-"));
+  try {
+    copyFileSync(join(HERE, "package-loader.mjs"), join(dir, "package-loader.mjs"));
+    const probe = join(dir, "probe.mjs");
+    writeFileSync(
+      probe,
+      [
+        'import { hyperframesPackageSpec } from "./package-loader.mjs";',
+        'process.stdout.write(hyperframesPackageSpec("@hyperframes/producer"));',
+        "",
+      ].join("\n"),
+    );
+    const res = spawnSync(process.execPath, [probe], { cwd: dir, encoding: "utf8" });
+    assert.equal(res.status, 0, res.stderr);
+    assert.equal(res.stdout.trim(), "@hyperframes/producer@latest");
+    assert.match(res.stderr, /using @latest/);
+    assert.match(res.stderr, new RegExp(ENV));
+  } finally {
+    rmSync(dir, { recursive: true, force: true });
+  }
+});
diff --git a/.claude/skills-media/hyperframes-animation/techniques.md b/.claude/skills-media/hyperframes-animation/techniques.md
new file mode 100644
index 000000000..88abb439b
--- /dev/null
+++ b/.claude/skills-media/hyperframes-animation/techniques.md
@@ -0,0 +1,507 @@
+# Visual Techniques Reference
+
+13 proven techniques from production HyperFrames videos. Use these in your storyboard and compositions to create visually rich, professional output. Each technique includes a minimal code pattern you can adapt.
+
+These are NOT advanced — they're standard motion design patterns that every composition should use at least 2-3 of.
+
+## Contents
+
+- SVG path drawing
+- Canvas 2D procedural art
+- CSS 3D transforms
+- Per-word kinetic typography
+- Lottie animation
+- Video compositing
+- Character-by-character typing
+- Variable font axis animation
+- GSAP MotionPathPlugin
+- Velocity-matched transitions
+- Audio-reactive animation
+- Clip-path reveal masks
+- WebGL fragment shader art
+- When to use what
+
+> **Capturing live HTML/CSS as a GPU texture** (3D rotation + bloom, magnetic warp, shatter, liquid surface, portal, plus GLSL post-processing) is a separate, heavier capability — see `adapters/html-in-canvas-patterns.md`. Use it for 1–3 hero beats per video, not every beat.
+>
+> **Easing vocabulary** — the full ease-family palette (character + mood mapping) lives in `adapters/gsap-easing-and-stagger.md`. Every composition should use at least 3 different easings.
+>
+> **Named text-animation effects** (24 IDs like `typewriter`, `kinetic-center-build`, `soft-blur-in`) come from the external `animate-text` skill — see `adapters/animate-text.md` for the vocabulary and how to load it.
+
+---
+
+## 1. SVG Path Drawing
+
+A path draws itself in real-time, like someone tracing with a pen. Use for revealing diagrams, arrows, connector lines, or brand marks.
+
+```html
+<svg viewBox="0 0 400 200">
+  <path
+    class="draw-path"
+    d="M 50 100 L 200 50 L 350 100"
+    stroke="#c84f1c"
+    stroke-width="4"
+    fill="none"
+    stroke-linecap="round"
+  />
+</svg>
+<style>
+  .draw-path {
+    stroke-dasharray: 280;
+    stroke-dashoffset: 280;
+  }
+</style>
+<script>
+  tl.to(".draw-path", { strokeDashoffset: 0, duration: 0.7, ease: "power2.out" }, 0.5);
+</script>
+```
+
+Use `path.getTotalLength()` to calculate the dasharray value dynamically.
+
+---
+
+## 2. Canvas 2D Procedural Art
+
+Animated noise, particle fields, data visualizations — anything that evolves frame-by-frame. Drive it with a GSAP proxy.
+
+```html
+<canvas id="proc-canvas" width="1920" height="1080"></canvas>
+<script>
+  var canvas = document.getElementById("proc-canvas");
+  var ctx = canvas.getContext("2d");
+
+  function hash(x, y) {
+    var n = x * 374761393 + y * 668265263;
+    n = (n ^ (n >> 13)) * 1274126177;
+    return ((n ^ (n >> 16)) & 0x7fffffff) / 0x7fffffff;
+  }
+
+  function drawFrame(t) {
+    ctx.fillStyle = "#0a0a0a";
+    ctx.fillRect(0, 0, 1920, 1080);
+    for (var i = 0; i < 200; i++) {
+      var x = hash(i, 0) * 1920;
+      var y = hash(i, 1) * 1080;
+      var brightness = hash(i, Math.floor(t * 10)) * 255;
+      ctx.fillStyle = "rgba(255, 255, 255, " + brightness / 255 + ")";
+      ctx.beginPath();
+      ctx.arc(x, y, 2, 0, Math.PI * 2);
+      ctx.fill();
+    }
+  }
+
+  var proxy = { time: 0 };
+  tl.to(
+    proxy,
+    {
+      time: 5,
+      duration: 5,
+      ease: "none",
+      onUpdate: function () {
+        drawFrame(proxy.time);
+      },
+    },
+    0,
+  );
+</script>
+```
+
+The `hash()` function is deterministic — same frame renders identically every time.
+
+---
+
+## 3. CSS 3D Transforms
+
+Perspective rotations create depth. Use for product showcases, card flips, architectural reveals.
+
+```html
+<div class="stage" style="perspective: 900px;">
+  <div class="card-3d" style="transform-style: preserve-3d;">
+    <div class="face front">Product</div>
+    <div class="face back" style="transform: rotateY(180deg);">Details</div>
+  </div>
+</div>
+<script>
+  tl.to(".card-3d", { rotationY: 360, rotationX: 15, duration: 1.2, ease: "sine.inOut" }, 0);
+</script>
+```
+
+Always set `perspective` on the parent, `transform-style: preserve-3d` on the animated element.
+
+---
+
+## 4. Per-Word Kinetic Typography
+
+Words appear one-by-one, synced to transcript.json timestamps. The core technique for narration-driven videos.
+
+```html
+<div class="headline">
+  <span class="word w-0">Anything</span>
+  <span class="word w-1">a</span>
+  <span class="word w-2">browser</span>
+  <span class="word w-3">can</span>
+  <span class="word w-4">render</span>
+</div>
+<style>
+  .word {
+    display: inline-block;
+    opacity: 0;
+    margin: 0 0.12em;
+  }
+</style>
+<script>
+  // Word onset times from transcript.json (seconds relative to beat start)
+  var timings = [0.0, 0.23, 0.28, 0.63, 0.78];
+  var slides = [80, 60, 50, 25, 12]; // horizontal slide decay (px)
+
+  document.querySelectorAll(".word").forEach(function (word, i) {
+    tl.from(
+      word,
+      {
+        x: slides[i],
+        y: 14,
+        opacity: 0,
+        duration: 0.35,
+        ease: "power2.out",
+      },
+      timings[i],
+    );
+  });
+</script>
+```
+
+The slide distance DECAYS per word (80→12px) — mimics a camera settling.
+
+---
+
+## 5. Lottie Animation
+
+Vector animations that play inside a composition. Use for logos, character animations, icons.
+
+```html
+<div id="logo-anim" class="lottie" style="width:500px;height:500px;"></div>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.12.2/lottie.min.js"></script>
+<script>
+  window.__hfLottie = window.__hfLottie || [];
+
+  const anim = lottie.loadAnimation({
+    container: document.getElementById("logo-anim"),
+    renderer: "svg",
+    loop: false,
+    autoplay: false,
+    path: "../capture/assets/lottie/animation-0.json",
+  });
+  window.__hfLottie.push(anim); // REQUIRED — adapter seeks every registered instance
+
+  gsap.set("#logo-anim", { scale: 0.3, opacity: 0 });
+  tl.to("#logo-anim", { scale: 1, opacity: 1, duration: 0.35, ease: "back.out(1.6)" }, 0.2);
+</script>
+```
+
+`autoplay: false` + `loop: false` + `window.__hfLottie.push()` are mandatory — HyperFrames seeks each registered player to composition time, so anything left on `autoplay`/`loop` runs in wall-clock and renders non-deterministically. The adapter seeks absolute time (no modulo loop, no playback-rate scaling): bake repeating cycles or non-default speed into the Lottie asset or an explicit timeline, then verify the render. Full contract + `.lottie`/dotLottie variant: `adapters/lottie.md`.
+
+---
+
+## 6. Video Compositing
+
+Embed real video footage inside compositions. Videos must be `muted` with `playsinline`.
+
+```html
+<div class="video-frame" style="width:680px;height:840px;border-radius:16px;overflow:hidden;">
+  <video
+    id="footage"
+    src="../capture/assets/videos/clip.mp4"
+    muted
+    playsinline
+    style="width:100%;height:100%;object-fit:cover;"
+  ></video>
+</div>
+<script>
+  // Video playback is controlled by the framework — don't call play() manually
+  tl.from(".video-frame", { scale: 0.9, opacity: 0, duration: 0.3, ease: "power2.out" }, 0);
+</script>
+```
+
+The HyperFrames runtime handles video seeking and playback.
+
+---
+
+## 7. Character-by-Character Typing
+
+Terminal typing effect using `tl.call()` to update text content character by character.
+
+```html
+<div class="terminal-line">
+  <span class="prompt">❯</span>
+  <span class="typed" id="typed-text"></span>
+  <span class="cursor" style="width:11px;height:22px;background:#333;display:inline-block;"></span>
+</div>
+<script>
+  var CMD = "npx hyperframes init";
+  var typed = document.getElementById("typed-text");
+
+  // Cursor blinks
+  tl.to(".cursor", { opacity: 0, duration: 0.12, yoyo: true, repeat: 20, ease: "steps(1)" }, 0);
+
+  // Type each character
+  for (var i = 0; i < CMD.length; i++) {
+    (function (idx) {
+      tl.call(
+        function () {
+          typed.textContent = CMD.substring(0, idx + 1);
+        },
+        null,
+        (idx / CMD.length) * 0.9,
+      );
+    })(i);
+  }
+</script>
+```
+
+Use `ease: "steps(1)"` for cursor blink — creates discrete on/off.
+
+---
+
+## 8. Variable Font Axis Animation
+
+Animate font-variation-settings to reshape glyphs in real-time. Works with variable fonts that have axes like optical size (opsz), weight (wght), softness (SOFT).
+
+```html
+<style>
+  /* Load the captured local variable font — do NOT use Google Fonts @import.
+     Replace this placeholder with an @font-face pointing to ../capture/assets/fonts/. */
+  @font-face {
+    font-family: "Fraunces";
+    src: url("../capture/assets/fonts/Fraunces-Variable.woff2") format("woff2");
+    font-weight: 100 900;
+    font-style: normal;
+    font-display: block;
+  }
+  .wordmark {
+    --opsz: 144;
+    --wght: 440;
+    font-family: "Fraunces", serif;
+    font-variation-settings:
+      "opsz" var(--opsz),
+      "wght" var(--wght);
+    font-size: 200px;
+  }
+</style>
+<script>
+  tl.to(".wordmark", { "--opsz": 72, "--wght": 300, duration: 0.45, ease: "power2.out" }, 0);
+</script>
+```
+
+The glyph subtly reshapes as axes animate — optical size adjusts detail, weight changes thickness.
+
+---
+
+## 9. GSAP MotionPathPlugin
+
+Animate an element along an arbitrary SVG path. Use for sliders following curves, particles along trajectories, guided reveals.
+
+```html
+<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/MotionPathPlugin.min.js"></script>
+<div class="dot" style="width:20px;height:20px;background:#2a8a7c;border-radius:50%;"></div>
+<script>
+  gsap.registerPlugin(MotionPathPlugin);
+  tl.to(
+    ".dot",
+    {
+      motionPath: { path: "M 12 300 C 280 280 520 80 820 50 S 1200 48 1308 38" },
+      duration: 1.5,
+      ease: "power2.out",
+    },
+    0,
+  );
+</script>
+```
+
+---
+
+## 10. Velocity-Matched Transitions
+
+Exit one beat and enter the next with matched velocities — creates perceived continuous motion.
+
+```javascript
+// EXIT (in outgoing composition): accelerating with blur
+tl.to(
+  ".content",
+  {
+    y: -150,
+    filter: "blur(30px)",
+    opacity: 0,
+    duration: 0.33,
+    ease: "power2.in", // accelerates
+  },
+  beatDuration - 0.33,
+);
+
+// ENTRY (in incoming composition): decelerating from blur
+gsap.set(".content", { y: 150, filter: "blur(30px)" });
+tl.to(
+  ".content",
+  {
+    y: 0,
+    filter: "blur(0px)",
+    duration: 1.0,
+    ease: "power2.out", // decelerates
+  },
+  0,
+);
+```
+
+The fastest point of both curves meets at the cut — the viewer perceives smooth camera motion. Match ease families: `.in` for exits, `.out` for entries.
+
+---
+
+## 11. Audio-Reactive Animation
+
+Drive any GSAP-tweenable property from the playing audio. Bass pulses a logo on kick drums. Treble glows a CTA on cymbals. Amplitude breathes a background during quiet phrases. The result: motion that feels locked to the track in a way pre-authored tweens never can.
+
+**When to use:** Any video with music or dramatic narration — brand reels, product launches, hype edits. Skip for calm/tutorial pacing.
+
+**How it works:** Pre-extract audio frequency bands into a JSON file, then sample per-frame via `tl.call()`:
+
+```js
+// audio-data.json: { fps: 30, totalFrames: 900, frames: [{ bands: [0.82, 0.45, 0.31, ...] }, ...] }
+for (var f = 0; f < AUDIO_DATA.totalFrames; f++) {
+  tl.call(
+    (function (frame) {
+      return function () {
+        var bass = frame.bands[0]; // 0–1
+        var treble = frame.bands[13];
+        gsap.set(".logo", { scale: 1 + bass * 0.04 }); // 3–4% pulse on bass
+        gsap.set(".cta", { filter: `drop-shadow(0 0 ${treble * 24}px #00C3FF)` });
+      };
+    })(AUDIO_DATA.frames[f]),
+    [],
+    f / AUDIO_DATA.fps,
+  );
+}
+```
+
+Per-frame sampling is required — a single tween will not react. Use the extract script:
+
+```bash
+python3 skills/hyperframes-creative/scripts/extract-audio-data.py narration.wav --fps 30 --bands 16 -o audio-data.json
+```
+
+Keep text/logo intensity subtle (≤5% scale, ≤30% glow) — audio-reactive motion on tiny elements reads as jitter. Bigger backgrounds can push to 10–30%.
+
+**Never do:** equalizer bars, spectrum analyzers, waveform displays, strobing, rainbow color cycling. The audio provides _timing and intensity_; the visual vocabulary still comes from the brand. See `skills/hyperframes-creative/references/audio-reactive.md` for the full API and anti-patterns.
+
+---
+
+## 12. Clip-Path Reveal Masks
+
+A fixed window that content slides through — text or images enter from one side and are clipped by an invisible boundary. Different from SVG path drawing: the mask is static, the content moves.
+
+```html
+<div id="reveal-mask">
+  <div id="reveal-content">Your headline text here</div>
+</div>
+<style>
+  #reveal-mask {
+    position: absolute;
+    inset: 0;
+    clip-path: inset(0 200px 0 0); /* clips 200px from right */
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  #reveal-content {
+    font-size: 108px;
+    white-space: nowrap;
+  }
+</style>
+<script>
+  // Content starts offscreen right, slides left through the mask window
+  gsap.set("#reveal-content", { x: 400, opacity: 0 });
+  tl.to("#reveal-content", { x: 0, opacity: 1, duration: 1, ease: "power2.out" }, 0);
+</script>
+```
+
+Variations: `clip-path: circle(0% at 50% 50%)` → `circle(100%)` for iris reveals. `clip-path: polygon(...)` for custom shapes.
+
+---
+
+## 13. WebGL Fragment Shader Art
+
+Full GPU generative backgrounds — domain-warped FBM noise, cosine palette coloring, iridescent organic patterns. Far richer than Canvas 2D.
+
+```html
+<canvas id="shader-bg" width="1920" height="1080"></canvas>
+<script>
+  var canvas = document.getElementById("shader-bg");
+  var gl = canvas.getContext("webgl");
+  if (!gl) {
+    /* fallback to gradient */
+  }
+
+  var fsrc = `
+    precision mediump float;
+    varying vec2 v_uv;
+    uniform float u_time;
+    uniform vec2 u_res;
+
+    float hash(vec2 p) { return fract(sin(dot(p, vec2(127.1, 311.7))) * 43758.5453); }
+    float noise(vec2 p) {
+      vec2 i = floor(p), f = fract(p);
+      f = f * f * (3.0 - 2.0 * f);
+      return mix(mix(hash(i), hash(i+vec2(1,0)), f.x),
+                 mix(hash(i+vec2(0,1)), hash(i+vec2(1,1)), f.x), f.y);
+    }
+    float fbm(vec2 p) {
+      float v = 0.0, a = 0.5;
+      mat2 R = mat2(0.8, 0.6, -0.6, 0.8);
+      for (int i = 0; i < 5; i++) { v += a*noise(p); p = R*p*2.02; a *= 0.5; }
+      return v;
+    }
+    vec3 palette(float t) {
+      return vec3(0.5)+vec3(0.5)*cos(6.28318*(vec3(1)*t+vec3(0.0,0.33,0.67)));
+    }
+    void main() {
+      vec2 uv = v_uv; uv.x *= u_res.x/u_res.y;
+      float t = u_time * 0.4;
+      vec2 q = vec2(fbm(uv*3.0+t*0.3), fbm(uv*3.0+vec2(5.2,1.3)+t*0.2));
+      vec2 r = vec2(fbm(uv*3.0+q*4.0+vec2(1.7,9.2)+t*0.15), fbm(uv*3.0+q*4.0+vec2(8.3,2.8)+t*0.1));
+      float n = fbm(uv*3.0+r*2.0);
+      vec3 col = palette(n*2.0+t*0.2);
+      col = mix(col, palette(length(q)*3.0+t*0.1), 0.4);
+      col *= 0.7+0.3*n;
+      float vig = 1.0-0.4*length(v_uv-0.5);
+      gl_FragColor = vec4(col*vig, 1.0);
+    }
+  `;
+
+  // Compile, link, set up fullscreen quad, then render via GSAP proxy:
+  var proxy = { time: 0.5 };
+  tl.to(
+    proxy,
+    {
+      time: 5,
+      duration: BEAT_DUR,
+      ease: "none",
+      onUpdate: function () {
+        gl.uniform1f(uTime, proxy.time);
+        gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
+      },
+    },
+    0,
+  );
+</script>
+```
+
+Always include a Canvas 2D gradient fallback for environments without WebGL.
+
+---
+
+## When to Use What
+
+| Video energy                   | Techniques to combine                                           |
+| ------------------------------ | --------------------------------------------------------------- |
+| High impact (launches, promos) | Per-word typography + velocity transitions + counter animations |
+| Cinematic (tours, stories)     | SVG path drawing + video compositing + 3D transforms            |
+| Technical (dev tools, APIs)    | Character typing + Canvas 2D procedural + MotionPath            |
+| Premium (luxury, enterprise)   | Variable font animation + Lottie + slow velocity transitions    |
+| Data-driven (stats, metrics)   | Canvas 2D procedural + counter animations + SVG path drawing    |
diff --git a/.claude/skills-media/hyperframes-animation/transitions/TRANSITION-REGISTRY.md b/.claude/skills-media/hyperframes-animation/transitions/TRANSITION-REGISTRY.md
new file mode 100644
index 000000000..3f1bd3363
--- /dev/null
+++ b/.claude/skills-media/hyperframes-animation/transitions/TRANSITION-REGISTRY.md
@@ -0,0 +1,167 @@
+# Transition Registry — machine source of truth
+
+Single source of truth for **PLV scene-to-scene transitions**. The deterministic
+injector (`product-launch-video/scripts/inject-transitions.mjs`) reads the JSON
+block below and stamps the matching `gsap_template` onto the master timeline.
+The planner (`product-launch-video/agents/visual-design.md`) names a transition
+by its `name`; everything else is harness.
+
+This file is **not** the catalog of all transitions — that is `catalog.md` +
+`css-*.md` (≈40 CSS + shader). This registry is the curated subset that is
+**Tier-B-ready**: pure transform / opacity / filter on the two scene **clip
+wrappers** (`#el-<sid>`), no injected overlay DOM, no per-scene cooperation.
+Overlay families (staggered blocks, blinds, light leak, grid dissolve, page
+burn) and shader transitions are deferred to later phases.
+
+## How the injector applies a transition
+
+At a `break` boundary between scene _i_ (`from`) and scene _i+1_ (`to`), the
+injector:
+
+1. Extends `#el-<from>` wrapper `data-duration` by `duration_s` (holds its final
+   frame — verified: `core/src/runtime/init.ts:1393-1410` external-slot branch).
+2. Pulls `#el-<to>` wrapper `data-start` earlier by `duration_s` (creates the
+   overlap window).
+3. Reassigns **all** clip `data-track-index` as a 0/1 ping-pong so the two
+   overlapping wrappers never share a track (same-track overlap is illegal —
+   `core/src/lint/rules/composition.ts`). Higher track composites on top.
+4. Stamps the `gsap_template` into `window.__timelines["main"]` at `T = overlap-start`.
+
+Verified by prototype render (2026-05-31): the master-timeline wrapper tween is
+seeked and rendered (no double-seek with the sub-comp's own paused timeline —
+the runtime drives them independently), the extended wrapper holds scene _i_'s
+final frame, and the higher-track incoming wrapper composites over + blends with
+the outgoing one.
+
+## Template placeholders
+
+The injector substitutes these tokens in each `gsap_template` line:
+
+| Token                              | Meaning                                                                  |
+| ---------------------------------- | ------------------------------------------------------------------------ |
+| `__OLD__`                          | `"#el-<from>"` — outgoing clip wrapper selector (quoted)                 |
+| `__NEW__`                          | `"#el-<to>"` — incoming clip wrapper selector (quoted)                   |
+| `__T__`                            | overlap-start time in seconds (master clock)                             |
+| `__DUR__`                          | `duration_s` for this boundary                                           |
+| `__DX__`                           | horizontal travel for directional types: `-1920` (LEFT) / `1920` (RIGHT) |
+| `__DY__`                           | vertical travel: `-1080` (UP) / `1080` (DOWN)                            |
+| `__ORIGIN_OUT__` / `__ORIGIN_IN__` | transformOrigin pair for `squeeze`                                       |
+
+`filter` / `scaleX` / `transformOrigin` are lint-clean on the master timeline
+(verified: `core/src/lint/rules/gsap.ts` has no per-property whitelist and scopes
+its checks to `data-composition-id` ranges; the x/y/scale/rotation/opacity
+whitelist is a _scene-worker_ prompt rule only — it does not bind index.html).
+
+## Registry
+
+```json
+{
+  "transitions": [
+    {
+      "name": "crossfade",
+      "tier": "b",
+      "overlay": false,
+      "energy": "any",
+      "default_duration_s": 0.5,
+      "directions": [],
+      "source": "css-dissolve.md",
+      "gsap_template": [
+        "tl.to(__OLD__, { opacity: 0, duration: __DUR__, ease: \"power2.inOut\" }, __T__);",
+        "tl.fromTo(__NEW__, { opacity: 0 }, { opacity: 1, duration: __DUR__, ease: \"power2.inOut\" }, __T__);"
+      ]
+    },
+    {
+      "name": "blur-crossfade",
+      "tier": "b",
+      "overlay": false,
+      "energy": "calm",
+      "default_duration_s": 0.6,
+      "directions": [],
+      "source": "css-dissolve.md",
+      "note": "Default when the two scenes' #root backgrounds differ a lot — the blur masks the background-color clash a plain crossfade would expose.",
+      "gsap_template": [
+        "tl.to(__OLD__, { filter: \"blur(10px)\", scale: 1.03, opacity: 0, duration: __DUR__, ease: \"power2.inOut\" }, __T__);",
+        "tl.fromTo(__NEW__, { filter: \"blur(10px)\", scale: 0.97, opacity: 0 }, { filter: \"blur(0px)\", scale: 1, opacity: 1, duration: __DUR__, ease: \"power2.inOut\" }, __T__);"
+      ]
+    },
+    {
+      "name": "push-slide",
+      "tier": "b",
+      "overlay": false,
+      "energy": "medium",
+      "default_duration_s": 0.5,
+      "directions": ["LEFT", "RIGHT", "UP", "DOWN"],
+      "default_direction": "LEFT",
+      "source": "css-push.md",
+      "note": "Directional. The injector picks __DX__/__DY__ from the direction and emits the horizontal OR vertical pair (not both).",
+      "gsap_template_horizontal": [
+        "tl.to(__OLD__, { x: __DX__, duration: __DUR__, ease: \"power3.inOut\" }, __T__);",
+        "tl.fromTo(__NEW__, { x: __DXIN__, opacity: 1 }, { x: 0, duration: __DUR__, ease: \"power3.inOut\" }, __T__);"
+      ],
+      "gsap_template_vertical": [
+        "tl.to(__OLD__, { y: __DY__, duration: __DUR__, ease: \"power3.inOut\" }, __T__);",
+        "tl.fromTo(__NEW__, { y: __DYIN__, opacity: 1 }, { y: 0, duration: __DUR__, ease: \"power3.inOut\" }, __T__);"
+      ]
+    },
+    {
+      "name": "zoom-through",
+      "tier": "b",
+      "overlay": false,
+      "energy": "high",
+      "default_duration_s": 0.4,
+      "directions": [],
+      "source": "css-scale.md",
+      "gsap_template": [
+        "tl.to(__OLD__, { scale: 2.5, opacity: 0, filter: \"blur(8px)\", duration: __DUR__, ease: \"power3.in\" }, __T__);",
+        "tl.fromTo(__NEW__, { scale: 0.5, opacity: 0, filter: \"blur(8px)\" }, { scale: 1, opacity: 1, filter: \"blur(0px)\", duration: __DUR__, ease: \"power3.out\" }, __T__);"
+      ]
+    },
+    {
+      "name": "squeeze",
+      "tier": "b",
+      "overlay": false,
+      "energy": "medium",
+      "default_duration_s": 0.4,
+      "directions": [],
+      "source": "css-push.md",
+      "note": "Old compresses to a vertical line on the left edge; new expands from the right edge. Incoming starts off (scaleX 0) so its higher-track stacking is harmless.",
+      "gsap_template": [
+        "tl.to(__OLD__, { scaleX: 0, transformOrigin: \"left center\", duration: __DUR__, ease: \"power3.inOut\" }, __T__);",
+        "tl.fromTo(__NEW__, { scaleX: 0, transformOrigin: \"right center\", opacity: 1 }, { scaleX: 1, transformOrigin: \"right center\", duration: __DUR__, ease: \"power3.inOut\" }, __T__);"
+      ]
+    }
+  ],
+  "tier_a_types": ["morph", "shared-element"],
+  "default_high_energy": "zoom-through",
+  "default_calm": "blur-crossfade",
+  "max_duration_s": 2.0
+}
+```
+
+## Default-derivation (used by prep.mjs when the planner omits `**Transition:**`)
+
+A `break` boundary with no named transition gets a default:
+
+1. If the incoming scene's creative brief reads HIGH energy (explosive / kinetic /
+   frenetic keywords), use `default_high_energy` (`zoom-through`).
+2. Otherwise use `default_calm` (`blur-crossfade`) — the universal default. The
+   blur masks any background shift and reads intentional, which keeps the whole
+   video to ~2 transition types (the "repeat 2-3" principle).
+
+## Choosing as a planner (the only agent touchpoint)
+
+Pick **2-3 types for the whole video** and repeat them — repetition is what reads
+as professional (see `overview.md`). This budget counts the **Tier-B between-scene
+types only** (the 5 in the registry above); the Tier-A `shared-element` morph is a
+worker-authored bridge driven by narrative `intent: morph` — it is **exempt and
+does not count** toward the 2-3. Name the entering transition on each scene:
+
+```
+**Transition:** blur-crossfade
+**Transition:** push-slide LEFT
+**Transition:** zoom-through 0.3s
+```
+
+Omit the anchor to accept the default above. Do NOT write GSAP, touch timing, or
+edit index.html — the harness stamps the code, computes the overlap, and assigns
+tracks.
diff --git a/.claude/skills-media/hyperframes-animation/transitions/catalog.md b/.claude/skills-media/hyperframes-animation/transitions/catalog.md
new file mode 100644
index 000000000..3d40b9db5
--- /dev/null
+++ b/.claude/skills-media/hyperframes-animation/transitions/catalog.md
@@ -0,0 +1,127 @@
+# Transition Catalog
+
+Hard rules, scene template, and routing to implementation code. Read the reference file for the transition type you need — don't load all of them.
+
+## Contents
+
+- Hard rules for CSS transitions
+- Shader transitions
+- Scene template
+- CSS transition examples
+- Shader transition routing
+
+## Hard Rules (CSS)
+
+These cause real bugs if violated.
+
+**Scene visibility:** Scene 1 visible by default (no `opacity: 0`). Scenes 2+ have `opacity: 0` on the CONTAINER div. GSAP reveals them. No visibility shim (`timedEls`).
+
+**Fonts:** Just write the `font-family` you want — the compiler embeds supported fonts automatically via `@font-face` with inline data URIs. No need for `<link>` tags or `@import`. Works in all contexts including sandboxed iframes.
+
+**Element structure:** No `class="clip"` on scene divs in standalone compositions. Only the root div gets `data-composition-id`/`data-start`/`data-duration`.
+
+**Overlay elements:** Staggered blocks = full-screen 1920x1080, NOT thin strips. Glitch RGB overlays = normal blending at 35% opacity, NOT `mix-blend-mode: multiply` (invisible on dark backgrounds). Light leak overlays = larger than the frame (2400px+), never a visible shape. Overexposure = use `filter: brightness()` on the scene, not just a white overlay.
+
+**VHS tape:** Clone actual scene content with `cloneNode(true)`, NOT colored bars. Each strip: wider than frame (2020px at left:-50px). Red+blue chromatic copies at z-index above main strip. Seeded PRNG for deterministic random offsets.
+
+**Z-index:** Gravity drop, zoom out, diagonal split need outgoing scene ON TOP (`zIndex: 10`) so it exits while revealing the new scene behind (`zIndex: 1`).
+
+**Page burn:** Content burns with the page — no falling debris. Hide scene1 via `tl.set` at burn end, NEVER `onComplete` (not reversible). `onUpdate` must restore `clipPath: "none"` when `wp <= 0` for rewind support. Incoming scene fades from black at 90% through burn.
+
+**Clock wipe:** 9-point polygon with intermediate edge positions. Step through 4 quadrants with separate tweens.
+
+**Grid dissolve:** Cycle 5 palette colors per cell, not monochrome.
+
+**Blinds count by energy:** Calm: 4h/6v. Medium: 6-8h/8v. High: 12-16h/16v.
+
+**Don't use:** Star iris (polygon interpolation broken), tilt-shift (no selective CSS blur), lens flare (visible shape, not optical), hinge/door (distorts too fast).
+
+## Shader Transitions
+
+Shader setup, WebGL init, capture, and fragment shaders are handled by `@hyperframes/shader-transitions` (`packages/shader-transitions/`). Read the package source for API details. Compositions using shaders must follow the shader-compatible CSS rules in `overview.md` (this directory).
+
+## Scene 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>
+      body {
+        margin: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: #000;
+        font-family: "YOUR FONT", sans-serif; /* compiler embeds supported fonts automatically */
+      }
+      .scene {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+      }
+      #scene1 {
+        z-index: 1;
+        background: #color;
+      }
+      #scene2 {
+        z-index: 2;
+        background: #color;
+        opacity: 0;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="main"
+      data-width="1920"
+      data-height="1080"
+      data-start="0"
+      data-duration="TOTAL"
+    >
+      <div id="scene1" class="scene"><!-- visible --></div>
+      <div id="scene2" class="scene"><!-- hidden --></div>
+    </div>
+    <script>
+      window.__timelines = window.__timelines || {};
+      var tl = gsap.timeline({ paused: true });
+      // Transition code here
+      window.__timelines["main"] = tl;
+    </script>
+  </body>
+</html>
+```
+
+Every transition follows: position new scene → animate outgoing → swap → animate incoming → clean up overlays.
+
+## CSS Transitions
+
+All code examples use `old` for the outgoing scene-inner selector and `new` for the incoming, with `T` as the transition start time. Read the reference file for the type you need.
+
+| Type           | Transitions                                          | Reference                        |
+| -------------- | ---------------------------------------------------- | -------------------------------- |
+| Push           | Push slide, vertical push, elastic push, squeeze     | `transitions/css-push.md`        |
+| Radial / Shape | Circle iris, diamond iris, diagonal split            | `transitions/css-radial.md`      |
+| 3D             | 3D card flip                                         | `transitions/css-3d.md`          |
+| Scale / Zoom   | Zoom through, zoom out                               | `transitions/css-scale.md`       |
+| Dissolve       | Crossfade, blur crossfade, focus pull, color dip     | `transitions/css-dissolve.md`    |
+| Cover          | Staggered blocks, horizontal blinds, vertical blinds | `transitions/css-cover.md`       |
+| Light          | Light leak, overexposure burn, film burn             | `transitions/css-light.md`       |
+| Distortion     | Glitch, chromatic aberration, ripple, VHS tape       | `transitions/css-distortion.md`  |
+| Mechanical     | Shutter, clock wipe                                  | `transitions/css-mechanical.md`  |
+| Grid           | Grid dissolve                                        | `transitions/css-grid.md`        |
+| Other          | Gravity drop, morph circle                           | `transitions/css-other.md`       |
+| Blur           | Blur through, directional blur                       | `transitions/css-blur.md`        |
+| Destruction    | Page burn                                            | `transitions/css-destruction.md` |
+
+## Shader Transitions
+
+WebGL shader transitions are provided by `@hyperframes/shader-transitions` (`packages/shader-transitions/`). The package handles setup, capture, WebGL init, render loop, and GSAP integration. Read the package source for available shaders and API — do not copy raw GLSL manually.
+
+The built-ins are not a ceiling. For an effect no built-in covers, you can write custom GLSL from scratch, adapt shader code found online (ShaderToy, GLSL Sandbox, GitHub), or build a custom CSS transition that fits no existing category — combine clip-path, transforms, and filters in new ways. If the storyboard calls for an effect that doesn't exist yet, build it; the framework renders anything a browser can run.
diff --git a/.claude/skills-media/hyperframes-animation/transitions/css-3d.md b/.claude/skills-media/hyperframes-animation/transitions/css-3d.md
new file mode 100644
index 000000000..b86b52012
--- /dev/null
+++ b/.claude/skills-media/hyperframes-animation/transitions/css-3d.md
@@ -0,0 +1,12 @@
+## 3D
+
+### 3D Card Flip
+
+180° Y-axis rotation. Requires CSS: `backface-visibility: hidden; transform-style: preserve-3d;` on both scene-inners. Parent needs `perspective: 1200px`.
+
+```js
+tl.set(new, { rotationY: -180, opacity: 1 }, T);
+tl.to(old, { rotationY: 180, duration: 0.6, ease: "power2.inOut" }, T);
+tl.to(new, { rotationY: 0, duration: 0.6, ease: "power2.inOut" }, T);
+tl.set(old, { opacity: 0 }, T + 0.6);
+```
diff --git a/.claude/skills-media/hyperframes-animation/transitions/css-blur.md b/.claude/skills-media/hyperframes-animation/transitions/css-blur.md
new file mode 100644
index 000000000..2698ba90e
--- /dev/null
+++ b/.claude/skills-media/hyperframes-animation/transitions/css-blur.md
@@ -0,0 +1,51 @@
+## Blur
+
+All blur transitions scale with energy. See SKILL.md "Blur Intensity by Energy" for the full table.
+
+### Blur Through
+
+Content becomes fully abstract before resolving. The heaviest blur transition.
+
+**Calm (default for this type — it's inherently heavy):**
+
+```js
+tl.to(old, { filter: "blur(30px)", scale: 1.08, duration: 0.5, ease: "power1.in" }, T);
+tl.to(old, { opacity: 0, duration: 0.3, ease: "power1.in" }, T + 0.3);
+// Hold: both scenes in abstract blur state
+tl.fromTo(new,
+  { filter: "blur(30px)", scale: 0.92, opacity: 0 },
+  { filter: "blur(30px)", scale: 0.92, opacity: 1, duration: 0.2, ease: "none" }, T + 0.5);
+// Slow resolve
+tl.to(new, { filter: "blur(0px)", scale: 1, duration: 0.7, ease: "power1.out" }, T + 0.7);
+```
+
+**Medium:**
+
+```js
+tl.to(old, { filter: "blur(15px)", scale: 1.05, opacity: 0, duration: 0.4, ease: "power2.in" }, T);
+tl.fromTo(new,
+  { filter: "blur(15px)", scale: 0.95, opacity: 0 },
+  { filter: "blur(0px)", scale: 1, opacity: 1, duration: 0.4, ease: "power2.out" }, T + 0.2);
+```
+
+### Directional Blur
+
+Blur + skew simulating motion in one direction. Scale blur and skew with energy.
+
+**Medium (default):**
+
+```js
+tl.to(old, { filter: "blur(12px)", skewX: -8, x: -200, opacity: 0, duration: 0.4, ease: "power3.in" }, T);
+tl.fromTo(new,
+  { filter: "blur(12px)", skewX: 8, x: 200, opacity: 0 },
+  { filter: "blur(0px)", skewX: 0, x: 0, opacity: 1, duration: 0.4, ease: "power3.out" }, T + 0.15);
+```
+
+**Calm (heavier blur, gentler motion):**
+
+```js
+tl.to(old, { filter: "blur(20px)", skewX: -4, x: -100, opacity: 0, duration: 0.6, ease: "power1.in" }, T);
+tl.fromTo(new,
+  { filter: "blur(20px)", skewX: 4, x: 100, opacity: 0 },
+  { filter: "blur(0px)", skewX: 0, x: 0, opacity: 1, duration: 0.6, ease: "power1.out" }, T + 0.3);
+```
diff --git a/.claude/skills-media/hyperframes-animation/transitions/css-cover.md b/.claude/skills-media/hyperframes-animation/transitions/css-cover.md
new file mode 100644
index 000000000..6ec60b80c
--- /dev/null
+++ b/.claude/skills-media/hyperframes-animation/transitions/css-cover.md
@@ -0,0 +1,43 @@
+## Cover
+
+### Staggered Color Blocks
+
+Full-screen (1920x1080) colored divs slide across staggered. Scene swaps while covered.
+
+**2-block** (standard):
+
+```js
+tl.set("#wipe-a", { x: -1920 }, T - 0.01);
+tl.set("#wipe-b", { x: -1920 }, T - 0.01);
+tl.to("#wipe-a", { x: 0, duration: 0.25, ease: "power3.inOut" }, T);
+tl.to("#wipe-b", { x: 0, duration: 0.25, ease: "power3.inOut" }, T + 0.06);
+tl.set(old, { opacity: 0 }, T + 0.2);
+tl.set(new, { opacity: 1 }, T + 0.2);
+tl.to("#wipe-a", { x: 1920, duration: 0.25, ease: "power3.inOut" }, T + 0.28);
+tl.to("#wipe-b", { x: 1920, duration: 0.25, ease: "power3.inOut" }, T + 0.34);
+```
+
+**5-block** (dense variant): same pattern with 5 blocks at 0.04s stagger. Use composition palette colors.
+
+### Horizontal Blinds
+
+Full-width strips slide across staggered. Each strip: `width: 1920px; height: Xpx`.
+
+**6 strips** (180px each): `0.03s` stagger
+**12 strips** (90px each): `0.018s` stagger
+
+```js
+for (var i = 0; i < N; i++) {
+  tl.set("#blind-h-" + i, { x: -1920 }, T - 0.01);
+  tl.fromTo("#blind-h-" + i, { x: -1920 }, { x: 0, duration: 0.2, ease: "power3.inOut" }, T + i * stagger);
+}
+tl.set(old, { opacity: 0 }, T + coverTime);
+tl.set(new, { opacity: 1 }, T + coverTime);
+for (var i = 0; i < N; i++) {
+  tl.to("#blind-h-" + i, { x: 1920, duration: 0.2, ease: "power3.inOut" }, T + exitStart + i * stagger);
+}
+```
+
+### Vertical Blinds
+
+Same as horizontal but strips are tall and narrow, moving on Y axis.
diff --git a/.claude/skills-media/hyperframes-animation/transitions/css-destruction.md b/.claude/skills-media/hyperframes-animation/transitions/css-destruction.md
new file mode 100644
index 000000000..9229cffc4
--- /dev/null
+++ b/.claude/skills-media/hyperframes-animation/transitions/css-destruction.md
@@ -0,0 +1,95 @@
+## Destruction
+
+### Page Burn
+
+The outgoing scene literally burns away from a corner. A fire front expands with noise-based irregular edges, a canvas draws the scorched char line at the burn boundary, and individual text characters/elements chip off and fall with gravity as the fire reaches them. The incoming scene reveals behind the burn.
+
+This transition has three systems working together:
+
+1. **Fire geometry** — a radial front expanding from a corner (e.g., bottom-right) with noise-based irregularity for organic edges
+2. **Scene clipping** — the outgoing scene uses an SVG clip-path (with `fill-rule: evenodd`) that cuts a hole matching the fire front. As the fire expands, more of the scene is clipped away. All content (text, images, lines) burns with the page — no separate debris.
+3. **Scorched edge** — a `<canvas>` overlay draws a radial gradient fringe at the fire boundary to simulate charring
+
+**When to use:** Dramatic reveals, edgy/destructive mood, gaming, cyberpunk. This is the most dramatic transition in the catalog — reserve it for hero moments.
+
+**Requirements:**
+
+- A `<canvas>` element for the burn edge overlay
+- A noise function for organic fire edge geometry
+- SVG clip-path with evenodd fill-rule for the inverted clip
+
+**Fire geometry (deterministic noise):**
+
+```js
+function noise(x) {
+  var ix = Math.floor(x),
+    fx = x - ix;
+  var a = Math.sin(ix * 127.1 + 311.7) * 43758.5453;
+  var b = Math.sin((ix + 1) * 127.1 + 311.7) * 43758.5453;
+  var t = fx * fx * (3 - 2 * fx);
+  return a - Math.floor(a) + (b - Math.floor(b) - (a - Math.floor(a))) * t;
+}
+
+function fireRadiusAtAngle(angle, progress) {
+  var base = progress * maxRadius;
+  return (
+    base +
+    noise(angle * 3 + progress * 4) * 50 +
+    noise(angle * 8 + progress * 9) * 20 +
+    noise(angle * 15 + progress * 15) * 8
+  );
+}
+```
+
+**Incoming scene timing:** The incoming scene should NOT be visible during the burn. As the fire consumes the outgoing scene, **black shows through the holes** — this is the dramatic part. The viewer watches content being destroyed against blackness.
+
+At ~90% through the burn, the incoming scene fades in SLOWLY from black — the background first, then content staggered. Use long, gentle fades (`power1.out`, 0.8-1.2s durations) so it feels like the new scene materializes from darkness, not a hard swap.
+
+```js
+// Scene 2 stays at opacity: 0 during the burn — black behind the fire
+tl.set("#s2-title", { opacity: 0 }, T);
+tl.set("#s2-subtitle", { opacity: 0 }, T);
+
+// At 90% through, scene bg fades in slowly from black
+var contentReveal = T + BURN_DURATION * 0.9;
+tl.to("#scene2", { opacity: 1, duration: 1.2, ease: "power1.out" }, contentReveal);
+
+// Content fades in staggered on top, even slower
+tl.to("#s2-title", { opacity: 1, duration: 1.0, ease: "power1.out" }, contentReveal + 0.5);
+tl.to("#s2-subtitle", { opacity: 1, duration: 0.8, ease: "power1.out" }, contentReveal + 0.7);
+```
+
+**Content burns with the page — no falling debris.** The clip-path on scene1 IS the effect — as the fire shape expands, everything behind the fire edge (text, images, lines) disappears naturally. Don't clone elements, don't create falling debris. The content is part of the page being consumed. The scorched canvas edge provides the visual char line at the burn boundary.
+
+**Hide scene1 via `tl.set` at burn end — NEVER in `onComplete`.** Using `onComplete` to hide scene1 is not reversible when scrubbing. Instead, use a `tl.set` at the exact burn end time:
+
+```js
+tl.to(
+  burnState,
+  {
+    progress: 1,
+    duration: BURN_DURATION,
+    ease: "none",
+    onUpdate: function () {
+      var wp = burnState.progress;
+      var scene1 = document.getElementById("scene1");
+      if (wp <= 0) {
+        scene1.style.clipPath = "none"; // fully visible when rewound
+      } else if (wp < 1) {
+        scene1.style.clipPath = buildClipPath(wp);
+      }
+      drawEdge(wp);
+    },
+    // NO onComplete — use tl.set instead
+  },
+  T,
+);
+
+// Hide scene1 at exact burn end — reversible via timeline
+tl.set("#scene1", { opacity: 0 }, T + BURN_DURATION);
+tl.set("#scene1", { clipPath: "none" }, T + BURN_DURATION);
+```
+
+The `onUpdate` handles clip-path and canvas edge per-frame. The `tl.set` handles the final hide — and GSAP automatically reverses it when scrubbing backward, restoring scene1 to `opacity: 1`.
+
+The `onUpdate` callback is the key — it runs every frame to advance the clip-path and canvas edge in sync with the timeline.
diff --git a/.claude/skills-media/hyperframes-animation/transitions/css-dissolve.md b/.claude/skills-media/hyperframes-animation/transitions/css-dissolve.md
new file mode 100644
index 000000000..3966fa9aa
--- /dev/null
+++ b/.claude/skills-media/hyperframes-animation/transitions/css-dissolve.md
@@ -0,0 +1,66 @@
+## Dissolve
+
+### Crossfade
+
+Simple opacity swap. The baseline.
+
+```js
+tl.to(old, { opacity: 0, duration: 0.5, ease: "power2.inOut" }, T);
+tl.fromTo(new, { opacity: 0 }, { opacity: 1, duration: 0.5, ease: "power2.inOut" }, T);
+```
+
+### Blur Crossfade
+
+Dissolve with blur + scale shift. **Scale blur amount by energy** — see SKILL.md "Blur Intensity by Energy" section. The examples below show the medium (default) version. For calm compositions, increase to 20-30px with a 0.3-0.5s hold at peak blur. For high-energy, decrease to 3-6px with no hold.
+
+**Medium (default):**
+
+```js
+tl.to(old, { filter: "blur(10px)", scale: 1.03, opacity: 0, duration: 0.5, ease: "power2.inOut" }, T);
+tl.fromTo(new,
+  { filter: "blur(10px)", scale: 0.97, opacity: 0 },
+  { filter: "blur(0px)", scale: 1, opacity: 1, duration: 0.5, ease: "power2.inOut" }, T + 0.1);
+```
+
+**Calm (wellness, luxury) — heavy blur, holds at abstract color:**
+
+```js
+tl.to(old, { filter: "blur(25px)", scale: 1.05, duration: 0.6, ease: "power1.in" }, T);
+tl.to(old, { opacity: 0, duration: 0.4, ease: "power1.in" }, T + 0.4);
+tl.fromTo(new,
+  { filter: "blur(25px)", scale: 0.95, opacity: 0 },
+  { filter: "blur(25px)", scale: 0.95, opacity: 1, duration: 0.3, ease: "power1.inOut" }, T + 0.5);
+tl.to(new, { filter: "blur(0px)", scale: 1, duration: 0.6, ease: "power1.out" }, T + 0.8);
+```
+
+### Focus Pull
+
+Outgoing slowly blurs while incoming fades in sharp. Depth-of-field feel. **Scale blur amount and hold duration by energy.**
+
+**Medium:**
+
+```js
+tl.to(old, { filter: "blur(15px)", duration: 0.5, ease: "power1.in" }, T);
+tl.to(old, { opacity: 0, duration: 0.3, ease: "power2.in" }, T + 0.25);
+tl.fromTo(new, { opacity: 0 }, { opacity: 1, duration: 0.3, ease: "power2.out" }, T + 0.25);
+```
+
+**Calm — slow rack focus with long hold at peak defocus:**
+
+```js
+tl.to(old, { filter: "blur(30px)", duration: 0.8, ease: "power1.in" }, T);
+tl.to(old, { opacity: 0, duration: 0.5, ease: "power1.in" }, T + 0.6);
+tl.fromTo(new, { opacity: 0, filter: "blur(20px)" },
+  { opacity: 1, filter: "blur(20px)", duration: 0.3, ease: "power1.inOut" }, T + 0.7);
+tl.to(new, { filter: "blur(0px)", duration: 0.6, ease: "power1.out" }, T + 1.0);
+```
+
+### Color Dip
+
+Fade to solid color, hold, fade up new scene.
+
+```js
+tl.to(old, { opacity: 0, duration: 0.2, ease: "power2.in" }, T);
+// Background color shows through
+tl.fromTo(new, { opacity: 0 }, { opacity: 1, duration: 0.2, ease: "power2.out" }, T + 0.25);
+```
diff --git a/.claude/skills-media/hyperframes-animation/transitions/css-distortion.md b/.claude/skills-media/hyperframes-animation/transitions/css-distortion.md
new file mode 100644
index 000000000..44627f7c2
--- /dev/null
+++ b/.claude/skills-media/hyperframes-animation/transitions/css-distortion.md
@@ -0,0 +1,45 @@
+## Distortion
+
+### Glitch
+
+RGB-tinted overlays (NOT multiply blend — use normal blending at 35% opacity) jitter with large offsets. Scene itself also jitters.
+
+```js
+tl.set("#glitch-r", { opacity: 1, x: 40, y: -8 }, T);
+tl.set("#glitch-g", { opacity: 1, x: -30, y: 12 }, T);
+tl.set("#glitch-b", { opacity: 1, x: 15, y: -20 }, T);
+tl.set(old, { x: -15 }, T);
+// 6 jitter frames at 0.03s intervals with big offsets (±30-60px)
+// ... swap and clear at T + 0.2
+```
+
+### Chromatic Aberration
+
+RGB overlays start aligned then spread apart (±80px), scene fades, converge on new scene.
+
+```js
+tl.set("#glitch-r", { opacity: 0.6, x: 0 }, T);
+tl.set("#glitch-g", { opacity: 0.6, x: 0 }, T);
+tl.set("#glitch-b", { opacity: 0.6, x: 0 }, T);
+tl.to("#glitch-r", { x: -80, opacity: 0.8, duration: 0.3, ease: "power2.in" }, T);
+tl.to("#glitch-b", { x: 80, opacity: 0.8, duration: 0.3, ease: "power2.in" }, T);
+tl.to("#glitch-g", { y: 30, duration: 0.3, ease: "power2.in" }, T);
+// Swap at T + 0.3, converge back at T + 0.3
+```
+
+### Ripple
+
+Rapid oscillation (±30px) + scale distortion (0.97-1.03) + increasing blur. Swap at peak distortion.
+
+```js
+tl.to(old, { x: 30, scale: 1.02, duration: 0.04, ease: "none" }, T);
+tl.to(old, { x: -25, scale: 0.98, filter: "blur(4px)", duration: 0.04, ease: "none" }, T + 0.04);
+// ... more oscillations with increasing blur
+// Swap at peak, incoming stabilizes with decreasing wobble
+```
+
+### VHS Tape
+
+Clone scene into 20 horizontal strips (each 54px, clip-path'd). Each strip shifts x independently with seeded pseudo-random offsets at per-bar random intervals. Add red+blue chromatic offset copies on each strip (z-index above main, 35% opacity). Make strips wider than frame (2020px at left:-50px) so edges never show.
+
+See SKILL.md for clone-based implementation pattern.
diff --git a/.claude/skills-media/hyperframes-animation/transitions/css-grid.md b/.claude/skills-media/hyperframes-animation/transitions/css-grid.md
new file mode 100644
index 000000000..ee1670068
--- /dev/null
+++ b/.claude/skills-media/hyperframes-animation/transitions/css-grid.md
@@ -0,0 +1,10 @@
+## Grid
+
+### Grid Dissolve
+
+Grid of colored cells covers the frame in a ripple from center. Scene swaps at 50% coverage. Cells fade out in ripple.
+
+**12-cell** (4x3, each 480x270): standard
+**120-cell** (12x10, each 160x108): dense variant — lower opacity (0.75), tighter ripple
+
+Cells are created dynamically in JS, sorted by distance from center for ripple stagger.
diff --git a/.claude/skills-media/hyperframes-animation/transitions/css-light.md b/.claude/skills-media/hyperframes-animation/transitions/css-light.md
new file mode 100644
index 000000000..08d4d5293
--- /dev/null
+++ b/.claude/skills-media/hyperframes-animation/transitions/css-light.md
@@ -0,0 +1,49 @@
+## Light
+
+### Light Leak
+
+Multiple warm-colored overlays wash across frame. Needs: a flat warm tint layer + 2-3 bright radial gradient divs, all larger than the frame so edges are never visible.
+
+```js
+// Warm tint washes over entire frame
+tl.to("#leak-warm", { opacity: 0.4, duration: 0.3, ease: "power1.in" }, T);
+// Bright leak elements drift in
+tl.to("#leak-1", { opacity: 0.9, x: 300, duration: 0.5, ease: "sine.inOut" }, T + 0.05);
+tl.to("#leak-2", { opacity: 0.8, x: 200, duration: 0.6, ease: "sine.inOut" }, T + 0.1);
+// Peak warmth then swap
+tl.to("#leak-warm", { opacity: 0.6, duration: 0.15, ease: "power2.in" }, T + 0.35);
+tl.set(old, { opacity: 0 }, T + 0.45);
+tl.set(new, { opacity: 1 }, T + 0.45);
+// Leak fades
+tl.to("#leak-warm", { opacity: 0, duration: 0.4, ease: "power2.out" }, T + 0.5);
+tl.to("#leak-1", { opacity: 0, x: 600, duration: 0.35, ease: "power1.out" }, T + 0.5);
+```
+
+### Overexposure Burn
+
+Scene progressively blows out to white using CSS `filter: brightness()`, then white overlay fades in. Swap at peak white. White recedes to reveal new scene.
+
+```js
+tl.to(old, { filter: "brightness(1.5)", scale: 1.03, duration: 0.2, ease: "power1.in" }, T);
+tl.to(old, { filter: "brightness(3)", scale: 1.06, duration: 0.2, ease: "power2.in" }, T + 0.2);
+tl.to("#flash-overlay", { opacity: 0.5, duration: 0.25, ease: "power1.in" }, T + 0.15);
+tl.to("#flash-overlay", { opacity: 1, duration: 0.15, ease: "power2.in" }, T + 0.4);
+tl.set(old, { opacity: 0, filter: "brightness(1)", scale: 1 }, T + 0.55);
+tl.set(new, { opacity: 1 }, T + 0.55);
+tl.to("#flash-overlay", { opacity: 0, duration: 0.35, ease: "power2.out" }, T + 0.55);
+```
+
+### Film Burn
+
+Staggered warm overlays (amber, orange, red) bleed from one edge. Each overlay is a large radial gradient div at high z-index.
+
+```js
+tl.to("#burn-a", { opacity: 1, x: -300, duration: 0.4, ease: "power1.in" }, T);
+tl.to("#burn-b", { opacity: 1, x: -500, duration: 0.5, ease: "power1.in" }, T + 0.05);
+tl.to("#burn-c", { opacity: 1, x: -200, duration: 0.45, ease: "power1.in" }, T + 0.1);
+tl.set(old, { opacity: 0 }, T + 0.35);
+tl.set(new, { opacity: 1 }, T + 0.35);
+tl.to("#burn-a", { opacity: 0, duration: 0.3, ease: "power2.out" }, T + 0.45);
+tl.to("#burn-b", { opacity: 0, duration: 0.3, ease: "power2.out" }, T + 0.5);
+tl.to("#burn-c", { opacity: 0, duration: 0.3, ease: "power2.out" }, T + 0.55);
+```
diff --git a/.claude/skills-media/hyperframes-animation/transitions/css-mechanical.md b/.claude/skills-media/hyperframes-animation/transitions/css-mechanical.md
new file mode 100644
index 000000000..fa119e7de
--- /dev/null
+++ b/.claude/skills-media/hyperframes-animation/transitions/css-mechanical.md
@@ -0,0 +1,30 @@
+## Mechanical
+
+### Shutter
+
+Two full-screen halves close from top and bottom, meet in the middle. Swap while closed. Open again.
+
+```js
+tl.to("#shutter-top", { y: 0, duration: 0.25, ease: "power3.in" }, T);
+tl.to("#shutter-bot", { y: 0, duration: 0.25, ease: "power3.in" }, T);
+tl.set(old, { opacity: 0 }, T + 0.25);
+tl.set(new, { opacity: 1 }, T + 0.25);
+tl.to("#shutter-top", { y: -540, duration: 0.25, ease: "power3.out" }, T + 0.3);
+tl.to("#shutter-bot", { y: 540, duration: 0.25, ease: "power3.out" }, T + 0.3);
+```
+
+### Clock Wipe
+
+Radial polygon sweep stepping through quadrants. Use 9-point polygon with intermediate edge positions for smooth sweep.
+
+```js
+tl.set(new, { opacity: 1, zIndex: 10 }, T);
+var d = 0.1; // duration per quadrant
+tl.set(new, { clipPath: "polygon(50% 50%, 50% 0%, 50% 0%, 50% 0%, 50% 0%, 50% 0%, 50% 0%, 50% 0%, 50% 0%)" }, T);
+tl.to(new, { clipPath: "polygon(50% 50%, 50% 0%, 100% 0%, 100% 50%, 100% 50%, 100% 50%, 100% 50%, 100% 50%, 100% 50%)", duration: d, ease: "none" }, T);
+tl.to(new, { clipPath: "polygon(50% 50%, 50% 0%, 100% 0%, 100% 50%, 100% 100%, 50% 100%, 50% 100%, 50% 100%, 50% 100%)", duration: d, ease: "none" }, T + d);
+tl.to(new, { clipPath: "polygon(50% 50%, 50% 0%, 100% 0%, 100% 50%, 100% 100%, 50% 100%, 0% 100%, 0% 50%, 0% 50%)", duration: d, ease: "none" }, T + d*2);
+tl.to(new, { clipPath: "polygon(50% 50%, 50% 0%, 100% 0%, 100% 50%, 100% 100%, 50% 100%, 0% 100%, 0% 50%, 0% 0%)", duration: d, ease: "none" }, T + d*3);
+tl.set(new, { clipPath: "none", zIndex: "auto" }, T + d*4 + 0.02);
+tl.set(old, { opacity: 0, zIndex: "auto" }, T + d*4 + 0.02);
+```
diff --git a/.claude/skills-media/hyperframes-animation/transitions/css-other.md b/.claude/skills-media/hyperframes-animation/transitions/css-other.md
new file mode 100644
index 000000000..698368a38
--- /dev/null
+++ b/.claude/skills-media/hyperframes-animation/transitions/css-other.md
@@ -0,0 +1,25 @@
+## Other
+
+### Gravity Drop
+
+Old scene falls down with slight rotation. New scene was behind it. Needs z-index.
+
+```js
+tl.set(new, { opacity: 1, zIndex: 1 }, T);
+tl.set(old, { zIndex: 10 }, T);
+tl.to(old, { y: 1200, rotation: 4, duration: 0.5, ease: "power3.in" }, T);
+tl.set(old, { opacity: 0, zIndex: "auto" }, T + 0.5);
+tl.set(new, { zIndex: "auto" }, T + 0.5);
+```
+
+### Morph Circle
+
+A circle scales up from center to fill frame (becoming the new scene's background color). New scene content fades in on top.
+
+```js
+tl.set("#morph-circle", { background: newBgColor, opacity: 1, scale: 0 }, T);
+tl.to("#morph-circle", { scale: 30, duration: 0.5, ease: "power3.in" }, T);
+tl.set(old, { opacity: 0 }, T + 0.4);
+tl.set(new, { opacity: 1 }, T + 0.4);
+tl.to("#morph-circle", { opacity: 0, duration: 0.15, ease: "power2.out" }, T + 0.5);
+```
diff --git a/.claude/skills-media/hyperframes-animation/transitions/css-push.md b/.claude/skills-media/hyperframes-animation/transitions/css-push.md
new file mode 100644
index 000000000..b7f550351
--- /dev/null
+++ b/.claude/skills-media/hyperframes-animation/transitions/css-push.md
@@ -0,0 +1,41 @@
+## Linear / Push
+
+### Push Slide
+
+Both scenes move together — new pushes old out.
+
+```js
+tl.to(old, { x: -1920, duration: 0.5, ease: "power3.inOut" }, T);
+tl.fromTo(new, { x: 1920, opacity: 1 }, { x: 0, duration: 0.5, ease: "power3.inOut" }, T);
+```
+
+### Vertical Push
+
+Same as push slide but vertical.
+
+```js
+tl.to(old, { y: -1080, duration: 0.5, ease: "power3.inOut" }, T);
+tl.fromTo(new, { y: 1080, opacity: 1 }, { y: 0, duration: 0.5, ease: "power3.inOut" }, T);
+```
+
+### Elastic Push
+
+Push with overshoot bounce on the incoming scene.
+
+```js
+tl.to(old, { x: -1920, duration: 0.5, ease: "power3.in" }, T);
+tl.fromTo(new, { x: 1920, opacity: 1 }, { x: 30, duration: 0.4, ease: "power4.out" }, T + 0.1);
+tl.to(new, { x: -15, duration: 0.15, ease: "sine.inOut" }, T + 0.5);
+tl.to(new, { x: 0, duration: 0.1, ease: "sine.out" }, T + 0.65);
+```
+
+### Squeeze
+
+Old compresses, new expands from opposite side.
+
+```js
+tl.to(old, { scaleX: 0, transformOrigin: "left center", duration: 0.4, ease: "power3.inOut" }, T);
+tl.fromTo(new, { scaleX: 0, transformOrigin: "right center", opacity: 1 },
+  { scaleX: 1, duration: 0.4, ease: "power3.inOut" }, T + 0.1);
+tl.set(old, { opacity: 0 }, T + 0.5);
+```
diff --git a/.claude/skills-media/hyperframes-animation/transitions/css-radial.md b/.claude/skills-media/hyperframes-animation/transitions/css-radial.md
new file mode 100644
index 000000000..040dad2f1
--- /dev/null
+++ b/.claude/skills-media/hyperframes-animation/transitions/css-radial.md
@@ -0,0 +1,37 @@
+## Radial / Shape
+
+### Circle Iris
+
+Expanding circle from center reveals new scene.
+
+```js
+tl.set(new, { opacity: 1 }, T);
+tl.fromTo(new,
+  { clipPath: "circle(0% at 50% 50%)" },
+  { clipPath: "circle(75% at 50% 50%)", duration: 0.5, ease: "power2.out" }, T);
+tl.set(old, { opacity: 0 }, T + 0.5);
+```
+
+### Diamond Iris
+
+Expanding diamond shape from center.
+
+```js
+tl.set(new, { opacity: 1 }, T);
+tl.fromTo(new,
+  { clipPath: "polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%)" },
+  { clipPath: "polygon(50% -20%, 120% 50%, 50% 120%, -20% 50%)", duration: 0.5, ease: "power2.out" }, T);
+tl.set(old, { opacity: 0 }, T + 0.5);
+```
+
+### Diagonal Split
+
+Old scene shrinks to a triangle in one corner.
+
+```js
+tl.set(new, { opacity: 1, zIndex: 1 }, T);
+tl.set(old, { zIndex: 10, clipPath: "polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%)" }, T);
+tl.to(old, { clipPath: "polygon(60% 0%, 100% 0%, 100% 40%, 60% 0%)", duration: 0.5, ease: "power3.inOut" }, T);
+tl.set(old, { opacity: 0, zIndex: "auto", clipPath: "none" }, T + 0.5);
+tl.set(new, { zIndex: "auto" }, T + 0.5);
+```
diff --git a/.claude/skills-media/hyperframes-animation/transitions/css-scale.md b/.claude/skills-media/hyperframes-animation/transitions/css-scale.md
new file mode 100644
index 000000000..b16e26469
--- /dev/null
+++ b/.claude/skills-media/hyperframes-animation/transitions/css-scale.md
@@ -0,0 +1,24 @@
+## Scale / Zoom
+
+### Zoom Through
+
+Old zooms past camera + blurs, new zooms in from behind.
+
+```js
+tl.to(old, { scale: 2.5, opacity: 0, filter: "blur(8px)", duration: 0.4, ease: "power3.in" }, T);
+tl.fromTo(new,
+  { scale: 0.5, opacity: 0, filter: "blur(8px)" },
+  { scale: 1, opacity: 1, filter: "blur(0px)", duration: 0.4, ease: "power3.out" }, T + 0.15);
+```
+
+### Zoom Out
+
+Old shrinks away, new was behind it. Needs z-index management.
+
+```js
+tl.set(new, { opacity: 1, zIndex: 1 }, T);
+tl.set(old, { zIndex: 10, transformOrigin: "50% 50%" }, T);
+tl.to(old, { scale: 0.3, opacity: 0, duration: 0.4, ease: "power3.in" }, T);
+tl.set(old, { zIndex: "auto" }, T + 0.4);
+tl.set(new, { zIndex: "auto" }, T + 0.4);
+```
diff --git a/.claude/skills-media/hyperframes-animation/transitions/overview.md b/.claude/skills-media/hyperframes-animation/transitions/overview.md
new file mode 100644
index 000000000..425a13e25
--- /dev/null
+++ b/.claude/skills-media/hyperframes-animation/transitions/overview.md
@@ -0,0 +1,153 @@
+# Scene Transitions
+
+A transition tells the viewer how two scenes relate. A crossfade says "this continues." A push slide says "next point." A blur crossfade says "drift with me." Choose transitions that match what the content is doing emotionally, not just technically.
+
+## Contents
+
+- Animation rules for multi-scene compositions
+- Energy and mood transition selection
+- Narrative position
+- Blur intensity
+- Presets
+- Implementation
+- CSS vs shader guidance
+- Shader-compatible CSS rules
+- Visual pattern warnings
+
+## Animation Rules for Multi-Scene Compositions
+
+These are non-negotiable for every multi-scene composition:
+
+1. **Every composition uses transitions.** No exceptions. Scenes without transitions feel like jump cuts.
+2. **Every scene uses entrance animations.** Elements animate IN — opacity, position, scale, etc. No scene should pop fully-formed onto screen. Use `gsap.fromTo()` (not `gsap.from()`) so the start state is explicit: `from()` animates _to_ current CSS, so pairing it with CSS `opacity: 0` is a 0→0 noop and the element never appears (see `/hyperframes-core` → sub-compositions).
+3. **Exit animations are BANNED** except on the final scene. Do NOT use `gsap.to()` to animate elements out before a transition fires. The transition IS the exit. Outgoing scene content must be fully visible when the transition starts — the transition handles the visual handoff.
+4. **Final scene exception:** The last scene MAY fade elements out (e.g., fade to black at the end of the composition). This is the only scene where exit animations are allowed.
+
+```js
+// ❌ BANNED — fading the outgoing scene out, then the next scene just runs its entrance.
+//    This is a jump cut with a dip, not a transition.
+tl.to("#s1", { opacity: 0, duration: 0.4 }, 4.0);
+tl.from("#s2 .headline", { y: 40, opacity: 0 }, 4.4);
+
+// ✅ CORRECT — outgoing and incoming animate AT THE SAME TIME T; the motion IS the handoff.
+const T = 4.0;
+tl.to("#s1", { yPercent: -100, filter: "blur(8px)", duration: 0.5, ease: "power3.in" }, T);
+tl.fromTo("#s2", { yPercent: 100 }, { yPercent: 0, duration: 0.5, ease: "power3.out" }, T);
+```
+
+> **You are NOT done after this file.** This overview gives you _which_ transition and _when_. Before writing any transition you MUST open **`catalog.md`** in this directory for the GSAP code and the hard rule every transition follows — _position new scene → animate outgoing → swap → animate incoming → clean up overlays_ — plus the per-category `css-*.md` files for specifics. Authoring transitions from this overview alone is how you end up shipping the ❌ pattern above.
+
+## Energy → Primary Transition
+
+| Energy                                   | CSS Primary                  | Shader Primary                       | Accent                         | Duration  | Easing                 |
+| ---------------------------------------- | ---------------------------- | ------------------------------------ | ------------------------------ | --------- | ---------------------- |
+| **Calm** (wellness, brand story, luxury) | Blur crossfade, focus pull   | Cross-warp morph, thermal distortion | Light leak, circle iris        | 0.5-0.8s  | `sine.inOut`, `power1` |
+| **Medium** (corporate, SaaS, explainer)  | Push slide, staggered blocks | Whip pan, cinematic zoom             | Squeeze, vertical push         | 0.3-0.5s  | `power2`, `power3`     |
+| **High** (promos, sports, music, launch) | Zoom through, overexposure   | Ridged burn, glitch, chromatic split | Staggered blocks, gravity drop | 0.15-0.3s | `power4`, `expo`       |
+
+Pick ONE primary (60-70% of scene changes) + 1-2 accents. Never use a different transition for every scene.
+
+## Mood → Transition Type
+
+Think about what the transition _communicates_, not just what it looks like.
+
+| Mood                     | Transitions                                                                                                                          | Why it works                                                                                |
+| ------------------------ | ------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------- |
+| **Warm / inviting**      | Light leak, blur crossfade, focus pull, film burn · **Shader:** thermal distortion, light leak, cross-warp morph                     | Soft edges, warm color washes. Nothing sharp or mechanical.                                 |
+| **Cold / clinical**      | Squeeze, zoom out, blinds, shutter, grid dissolve · **Shader:** gravitational lens                                                   | Content transforms mechanically — compressed, shrunk, sliced, gridded.                      |
+| **Editorial / magazine** | Push slide, vertical push, diagonal split, shutter · **Shader:** whip pan                                                            | Like turning a page or slicing a layout. Clean directional movement.                        |
+| **Tech / futuristic**    | Grid dissolve, staggered blocks, blinds, chromatic aberration · **Shader:** glitch, chromatic split                                  | Grid dissolve is the core "data" transition. Shader glitch adds posterization + scan lines. |
+| **Tense / edgy**         | Glitch, VHS, chromatic aberration, ripple · **Shader:** ridged burn, glitch, domain warp                                             | Instability, distortion, digital breakdown. Ridged burn adds sharp lightning-crack edges.   |
+| **Playful / fun**        | Elastic push, 3D flip, circle iris, morph circle, clock wipe · **Shader:** ripple waves, swirl vortex                                | Overshoot, bounce, rotation, expansion. Swirl vortex adds organic spiral distortion.        |
+| **Dramatic / cinematic** | Zoom through, zoom out, gravity drop, overexposure, color dip to black · **Shader:** cinematic zoom, gravitational lens, domain warp | Scale, weight, light extremes. Shader transitions add per-pixel depth.                      |
+| **Premium / luxury**     | Focus pull, blur crossfade, color dip to black · **Shader:** cross-warp morph, thermal distortion                                    | Restraint. Cross-warp morph flows both scenes into each other organically.                  |
+| **Retro / analog**       | Film burn, light leak, VHS, clock wipe · **Shader:** light leak                                                                      | Organic imperfection. Warm color bleeds, scan line displacement.                            |
+
+## Narrative Position
+
+| Position                   | Use                                                                        | Why                                                   |
+| -------------------------- | -------------------------------------------------------------------------- | ----------------------------------------------------- |
+| **Opening**                | Your most distinctive transition. Match the mood. 0.4-0.6s                 | Sets the visual language for the entire piece.        |
+| **Between related points** | Your primary transition. Consistent. 0.3s                                  | Don't distract — the content is continuing.           |
+| **Topic change**           | Something different from your primary. Staggered blocks, shutter, squeeze. | Signals "new section" — the viewer's brain resets.    |
+| **Climax / hero reveal**   | Your boldest accent. Fastest or most dramatic.                             | This is the payoff — spend your best transition here. |
+| **Wind-down**              | Return to gentle. Blur crossfade, crossfade. 0.5-0.7s                      | Let the viewer exhale after the climax.               |
+| **Outro**                  | Slowest, simplest. Crossfade, color dip to black. 0.6-1.0s                 | Closure. Don't introduce new energy at the end.       |
+
+## Blur Intensity by Energy
+
+| Energy     | Blur    | Duration | Hold at peak |
+| ---------- | ------- | -------- | ------------ |
+| **Calm**   | 20-30px | 0.8-1.2s | 0.3-0.5s     |
+| **Medium** | 8-15px  | 0.4-0.6s | 0.1-0.2s     |
+| **High**   | 3-6px   | 0.2-0.3s | 0s           |
+
+## Presets
+
+| Preset     | Duration | Easing            |
+| ---------- | -------- | ----------------- |
+| `snappy`   | 0.2s     | `power4.inOut`    |
+| `smooth`   | 0.4s     | `power2.inOut`    |
+| `gentle`   | 0.6s     | `sine.inOut`      |
+| `dramatic` | 0.5s     | `power3.in` → out |
+| `instant`  | 0.15s    | `expo.inOut`      |
+| `luxe`     | 0.7s     | `power1.inOut`    |
+
+## Implementation
+
+Read `catalog.md` in this directory for GSAP code and hard rules for every transition type, and the `css-*.md` files for per-category implementation details.
+
+| Category    | CSS                                                            | Shader (WebGL)                                                            |
+| ----------- | -------------------------------------------------------------- | ------------------------------------------------------------------------- |
+| Push/slide  | Push slide, vertical push, elastic push, squeeze               | Whip pan                                                                  |
+| Scale/zoom  | Zoom through, zoom out, gravity drop, 3D flip                  | Cinematic zoom, gravitational lens                                        |
+| Reveal/mask | Circle iris, diamond iris, diagonal split, clock wipe, shutter | SDF iris                                                                  |
+| Dissolve    | Crossfade, blur crossfade, focus pull, color dip               | Cross-warp morph, domain warp                                             |
+| Cover       | Staggered blocks, horizontal blinds, vertical blinds           | —                                                                         |
+| Light       | Light leak, overexposure burn, film burn                       | Light leak (shader), thermal distortion                                   |
+| Distortion  | Glitch, chromatic aberration, ripple, VHS tape                 | Glitch (shader), chromatic split, ridged burn, ripple waves, swirl vortex |
+| Pattern     | Grid dissolve, morph circle                                    | —                                                                         |
+
+## Transitions That Don't Work in CSS
+
+Avoid: star iris, tilt-shift, lens flare, hinge/door. See catalog.md for why.
+
+## CSS vs Shader
+
+CSS transitions animate scene containers with opacity, transforms, clip-path, and filters. Shader transitions composite both scene textures per-pixel on a WebGL canvas — they can warp, dissolve, and morph in ways CSS cannot.
+
+**Both are first-class options.** Shaders are provided by the `@hyperframes/shader-transitions` package — import from the package instead of writing raw GLSL. CSS transitions are simpler to set up. Choose based on the effect you want, not based on which is easier.
+
+**Mixing is supported.** You can have some transitions use WebGL shaders and others use a CSS crossfade in the same composition. Omit the `shader` field on any `TransitionConfig` entry to get a smooth opacity crossfade instead of a WebGL effect:
+
+```js
+var tl = HyperShader.init({
+  bgColor: "#000",
+  accentColor: "#6366f1",
+  scenes: ["s1", "s2", "s3", "s4"],
+  transitions: [
+    { time: 4.0, shader: "sdf-iris", duration: 0.7 }, // WebGL shader
+    { time: 8.5, duration: 0.8 }, // no shader → CSS crossfade
+    { time: 13.0, shader: "domain-warp", duration: 0.6 }, // WebGL shader
+  ],
+});
+```
+
+HyperShader manages all scene visibility regardless of transition type. Let it create the timeline (don't pass `timeline:` into `init()`) and add your beat animations to the returned `tl` after the call.
+
+## Shader-Compatible CSS Rules
+
+Shader transitions capture DOM scenes to WebGL textures via html2canvas. The canvas 2D rendering pipeline doesn't match CSS exactly. Follow these rules to avoid visible artifacts at transition boundaries:
+
+1. **No `transparent` keyword in gradients.** Canvas interpolates `transparent` as `rgba(0,0,0,0)` (black at zero alpha), creating dark fringes. Always use the target color at zero alpha: `rgba(200,117,51,0)` not `transparent`.
+2. **No gradient backgrounds on elements thinner than 4px.** Canvas can't match CSS gradient rendering on 1-2px elements. Use solid `background-color` on thin accent lines.
+3. **No CSS variables (`var()`) on elements visible during capture.** html2canvas doesn't reliably resolve custom properties. Use literal color values in inline styles.
+4. **Mark uncapturable decorative elements with `data-no-capture`.** The capture function skips these. They're present on the live DOM but absent from the shader texture. Use for elements that can't follow the rules above.
+5. **No gradient opacity below 0.15.** Gradient elements below 10% opacity render differently in canvas vs CSS. Increase to 0.15+ or use a solid color at equivalent brightness.
+6. **Every `.scene` div must have explicit `background-color`, AND pass the same color as `bgColor` in the `init()` config.** The package captures scene elements via html2canvas. Both the CSS `background-color` on `.scene` and the `bgColor` config must match. Without either, the texture renders as black.
+
+These rules only apply to shader transition compositions. CSS-only compositions have no restrictions.
+
+## Visual Pattern Warning
+
+Avoid transitions that create visible repeating geometric patterns — grids of tiles, hexagonal cells, uniform dot arrays, evenly-spaced blob circles. These look cheap and artificial regardless of the math behind them. Organic noise (FBM, domain warping) is good because it's irregular. Geometric repetition is bad because the eye instantly sees the grid.
diff --git a/.claude/skills-media/hyperframes-cli/SKILL.md b/.claude/skills-media/hyperframes-cli/SKILL.md
new file mode 100644
index 000000000..28a4d1cd8
--- /dev/null
+++ b/.claude/skills-media/hyperframes-cli/SKILL.md
@@ -0,0 +1,137 @@
+---
+name: hyperframes-cli
+description: >
+  Use the HyperFrames CLI development loop: init, add, catalog, capture, lint, check, snapshot,
+  compare, grade-compare, preview, play, present, beats, keyframes, single or batch render, publish,
+  cloud, cloudrun, feedback, lambda, doctor, browser, info, upgrade, skills, compositions, docs,
+  benchmark, telemetry, transcribe, auth, tts, and remove-background. Also use when diagnosing build
+  or render failures. validate, inspect, and layout are deprecated aliases; use check. Covers local,
+  HeyGen-hosted cloud, AWS Lambda, and Google Cloud Run rendering.
+---
+
+# HyperFrames CLI
+
+Run commands as `npx hyperframes ...` unless project instructions provide a wrapper. Obey the wrapper when present. The CLI requires Node.js 22 or newer and FFmpeg.
+
+## Development loop
+
+1. **Scaffold:** `npx hyperframes init <project>` or capture a site. In non-TTY mode, pass `--non-interactive --example=<name>`.
+2. **Author:** write the composition using `/hyperframes-core`.
+3. **Get fast feedback while editing:** run `npx hyperframes lint` after the first HTML pass and after structural changes.
+4. **Run the final gate:** run `npx hyperframes check`; it reruns lint before opening the browser. Do not prepend a redundant standalone lint invocation. Add `--snapshots` for annotated overview frames and finding crops.
+5. **Inspect sub-compositions:** when `index.html` mounts `data-composition-src`, capture midpoint snapshots and inspect each mounted scene.
+6. **Open the final Studio preview:** run `npx hyperframes preview`, hand the timeline project URL to the user, and ask whether to revise or render.
+7. **Render only after approval:** use draft quality for iteration and high quality for delivery.
+8. **Verify the output:** confirm the file exists, is non-empty, and has a plausible duration.
+
+```bash
+# Fast iteration check; repeat while authoring as needed.
+npx hyperframes lint
+
+# Required final gate; includes lint.
+npx hyperframes check
+npx hyperframes preview
+npx hyperframes render --quality high --output out.mp4
+test -s out.mp4
+ffprobe -v error -show_format out.mp4
+```
+
+`check` runs lint first, then uses one browser session and one seek pass to audit runtime errors, failed requests, layout, `*.motion.json` assertions, and WCAG contrast. Persistent findings gate the exit code; transient entrance or exit findings are informational. Use `--strict` to gate warnings. `validate`, `inspect`, and `layout` remain aliases for compatibility but must not appear in new instructions or scripts.
+
+## Two different preview surfaces
+
+Do not confuse these states:
+
+| Surface                   | When it may open                                       | Purpose                                                                           |
+| ------------------------- | ------------------------------------------------------ | --------------------------------------------------------------------------------- |
+| Storyboard board          | Before composition checks, only when `storyboard: yes` | Review plan cards and wireframe sketches. Open `?view=storyboard#project/<name>`. |
+| Final composition preview | After `check` passes                                   | Review the assembled timeline before render. Open `#project/<name>`.              |
+
+The early board is not approval of the final video. Rendering always requires the final approval defined by `hyperframes-core/references/review-loop.md`.
+
+## Sub-composition smoke test
+
+Static audits cannot catch every mount failure. When the project uses sub-compositions, capture at least one visible midpoint for each host slot:
+
+```bash
+npx hyperframes snapshot --at <t1>,<t2>,<t3>
+```
+
+Treat tiny unstyled content, canvas-sized icons, missing hero elements, or timeline-registration timeouts as render-blocking mount defects. See `hyperframes-core/references/sub-compositions.md` for the corresponding fixes.
+
+## Agent conventions
+
+- 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. `init` requires `--example` there; use `--non-interactive` to force deterministic behavior on a TTY.
+- Use one `HYPERFRAMES_RUN_ID` for all commands in the same verification loop.
+- Use `--strict`, `--strict-all`, and `--strict-variables` when the corresponding warnings, variables, or CI conditions must gate the render.
+- 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.
+
+## Studio-directed edits
+
+When the user refers to “this element” or the current selection, query Studio instead of guessing:
+
+```bash
+npx hyperframes preview --context --json --context-fields selection
+```
+
+Use `selection.target.hfId` when available, otherwise its selector and source file. If the result reports `no-selection`, ask the user to click the element and rerun. Request only the context slices you need; use `--context-detail full` only for computed styles or editable text metadata. Full behavior and failure codes live in `references/preview-render.md`.
+
+## Render choices
+
+| Need                                     | Command                                                                       |
+| ---------------------------------------- | ----------------------------------------------------------------------------- |
+| Fast local iteration                     | `npx hyperframes render --quality draft`                                      |
+| Final local delivery                     | `npx hyperframes render --quality high --output out.mp4`                      |
+| Reproducible container render            | `npx hyperframes render --docker --strict --output out.mp4`                   |
+| Local variable-driven batch render       | `npx hyperframes render --batch rows.json --output "renders/{name}.mp4"`      |
+| HeyGen-hosted zero-infrastructure render | `npx hyperframes cloud render`                                                |
+| Self-managed distributed AWS render      | `npx hyperframes lambda render <project> --width 1920 --height 1080 --wait`   |
+| Self-managed distributed GCP render      | `npx hyperframes cloudrun render <project> --width 1920 --height 1080 --wait` |
+
+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.
+
+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 and working directory, expected versus actual behavior, exact error, 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`.
+
+## Read the matching reference before running a command
+
+The following references and owning skills are mandatory command contracts, not optional background reading. Before running a command in the table, read its matching row.
+
+| Need                                                                                   | Reference                             |
+| -------------------------------------------------------------------------------------- | ------------------------------------- |
+| `init`, `capture`, `skills`                                                            | `references/init-and-scaffold.md`     |
+| `lint`, `check`, motion sidecars, `snapshot`                                           | `references/lint-validate-inspect.md` |
+| `compare`, `grade-compare`, variable-driven `render --batch`                           | `references/compare-and-batch.md`     |
+| `beats` for an existing project's Studio beat grid                                     | `references/beats.md`                 |
+| `preview`, `play`, `render`, `publish`, Studio context, feedback                       | `references/preview-render.md`        |
+| `doctor`, browser management                                                           | `references/doctor-browser.md`        |
+| `auth`, HeyGen-hosted cloud rendering, and template variables                          | `references/cloud.md`                 |
+| AWS Lambda deployment and rendering                                                    | `references/lambda.md`                |
+| Google Cloud Run deployment and rendering                                              | `references/cloudrun.md`              |
+| `info`, `upgrade`, `compositions`, `docs`, `benchmark`, telemetry, media preprocessing | `references/upgrade-info-misc.md`     |
+
+For composition variables, also read `/hyperframes-core` → `references/variables-and-media.md`. For `hyperframes add` and `hyperframes catalog`, use `/hyperframes-registry`. Before `hyperframes present`, read `/slideshow`; before `hyperframes keyframes`, read `/hyperframes-keyframes`. For TTS, transcription, captions, or background removal choices, use `/media-use`.
+
+The specialized commands are deliberately documented by their owning workflows:
+
+```bash
+npx hyperframes present <project-dir> --port 3004 --no-open
+npx hyperframes beats <project-dir> --json
+npx hyperframes keyframes <project-dir> --json
+```
+
+`present` serves a navigable deck with presenter and audience synchronization. `beats` is the standalone Studio beat-grid utility defined in `references/beats.md`. `keyframes` surfaces seek-safe animation and motion-path diagnostics.
diff --git a/.claude/skills-media/hyperframes-cli/references/beats.md b/.claude/skills-media/hyperframes-cli/references/beats.md
new file mode 100644
index 000000000..da3c05f50
--- /dev/null
+++ b/.claude/skills-media/hyperframes-cli/references/beats.md
@@ -0,0 +1,19 @@
+# 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 analyzes that file in headless Chrome and writes `beats/<audio-relative-path>.json`.
+
+If no beats are detected, the command fails and writes nothing. If Chrome is unavailable, run:
+
+```bash
+npx hyperframes browser ensure
+```
+
+For a complete beat-synced video, route through `/music-to-video`. That workflow owns a different audio-driven pipeline and its `audiomap.json`; do not replace its analyzer with this Studio utility.
diff --git a/.claude/skills-media/hyperframes-cli/references/cloud.md b/.claude/skills-media/hyperframes-cli/references/cloud.md
new file mode 100644
index 000000000..0ba144583
--- /dev/null
+++ b/.claude/skills-media/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/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-core/references/variables-and-media.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 the `hyperframes-core` skill.
+
+## 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 `10`).             |
+| `--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-media/hyperframes-cli/references/cloudrun.md b/.claude/skills-media/hyperframes-cli/references/cloudrun.md
new file mode 100644
index 000000000..7ae21e35c
--- /dev/null
+++ b/.claude/skills-media/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-and-media.md`](../../hyperframes-core/references/variables-and-media.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-media/hyperframes-cli/references/compare-and-batch.md b/.claude/skills-media/hyperframes-cli/references/compare-and-batch.md
new file mode 100644
index 000000000..c541cca9f
--- /dev/null
+++ b/.claude/skills-media/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": { "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-media/hyperframes-cli/references/doctor-browser.md b/.claude/skills-media/hyperframes-cli/references/doctor-browser.md
new file mode 100644
index 000000000..706aa4540
--- /dev/null
+++ b/.claude/skills-media/hyperframes-cli/references/doctor-browser.md
@@ -0,0 +1,45 @@
+# 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.
+- **Missing bundled Chrome** — run `npx hyperframes browser ensure`.
+- **Low memory** — close other Chromes, reduce `--workers`, or use `--quality draft`.
+
+## 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-media/hyperframes-cli/references/init-and-scaffold.md b/.claude/skills-media/hyperframes-cli/references/init-and-scaffold.md
new file mode 100644
index 000000000..bfd327aa5
--- /dev/null
+++ b/.claude/skills-media/hyperframes-cli/references/init-and-scaffold.md
@@ -0,0 +1,51 @@
+# init, capture, skills
+
+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                                    # TTY: interactive wizard
+npx hyperframes init my-video --example warm-grain               # pick an example
+npx hyperframes init my-video --example blank --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 --example blank --tailwind         # Tailwind v4 browser runtime
+npx hyperframes init my-video --non-interactive --example blank  # CI/agents — flag-only
+```
+
+**Default depends on TTY**: in a terminal, the CLI prompts for example/options. Outside a TTY (CI, agents, piped output) it auto-switches to non-interactive and **requires `--example`** (the CLI errors with a usage example if missing). Pass `--non-interactive` to force flag-only mode even on a TTY.
+
+Templates: `blank`, `warm-grain`, `play-mode`, `swiss-grid`, `vignelli`, `decision-tree`, `kinetic-type`, `product-promo`, `nyt-graph`.
+
+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`.
+- `--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.
+
+When using `--tailwind`, invoke the `hyperframes-core` (Tailwind reference) skill before editing classes or theme tokens. The scaffold uses Tailwind v4 browser runtime patterns, not Studio's Tailwind v3 setup.
+
+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 --max-screenshots 12
+npx hyperframes capture https://example.com --timeout 60000 # page-load timeout in ms
+```
+
+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.
+
+## skills
+
+```bash
+npx hyperframes skills    # install HyperFrames skills for AI coding tools
+```
+
+One-time setup that adds the HyperFrames skill pack (`hyperframes-core`, `-creative`, `-animation`, `-cli`, `-registry`, `-media`, plus the `product-launch-video` and `hyperframes` orchestrators) to the local AI coding environment so agents follow the framework conventions. Re-run after major HyperFrames upgrades.
diff --git a/.claude/skills-media/hyperframes-cli/references/lambda.md b/.claude/skills-media/hyperframes-cli/references/lambda.md
new file mode 100644
index 000000000..9c5639f0c
--- /dev/null
+++ b/.claude/skills-media/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-and-media.md`](../../hyperframes-core/references/variables-and-media.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-media/hyperframes-cli/references/lint-validate-inspect.md b/.claude/skills-media/hyperframes-cli/references/lint-validate-inspect.md
new file mode 100644
index 000000000..78a6eee89
--- /dev/null
+++ b/.claude/skills-media/hyperframes-cli/references/lint-validate-inspect.md
@@ -0,0 +1,137 @@
+# 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`.
+- 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.
+
+**Blind spot — media inside a sub-composition (not yet a lint rule).** A `<video>`/`<audio>` inside a `compositions/*.html` `<template>` (or nested in a wrapper `<div>` anywhere) is never seeked/decoded and renders blank/black; the automated checks all pass. Media must be a direct child of the host root (`index.html`) — see `hyperframes-core` → `variables-and-media.md`. Until a rule exists, check manually before render:
+
+```bash
+grep -nE '<(video|audio)\b' compositions/*.html   # expect NO matches; media belongs in index.html
+```
+
+A non-empty result is a defect. Then `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 bug, not a placeholder — treat it as render-blocking).
+
+## 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, lint, runtime, layout, motion, contrast, 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 5000     # ms for the initial settle (default 3000)
+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. Then 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.
+- **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.
+
+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. If a 3s+ composition shows zero geometry change across every sample, `check` fails with `sweep_static`: a frozen timeline makes every green verdict unreliable, so it refuses to pass. 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 the run fails. Spread the reveal across the timeline or keep one continuously animated element alive (a blinking caret is idiomatic for code typing) — don't bolt on a slow position drift 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).
+- `data-layout-allow-occlusion` — an element is meant to cover text.
+- `data-layout-ignore` — decorative element that should never be audited.
+
+**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 content whose center sits inside the band. `--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) — `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
+```
+
+Captures still PNGs from the composition for visual diffing, thumbnails, or attaching to a PR. Faster than rendering a video when you only need a few hero frames. Output lands in the project's snapshots directory. Not deprecated: it remains the standalone capture utility, while `check --snapshots` covers the gate's needs (overview frames annotated with labeled finding boxes, plus `finding-NN-<code>.png` crops for every error finding with a bbox).
+
+### 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-media/hyperframes-cli/references/preview-render.md b/.claude/skills-media/hyperframes-cli/references/preview-render.md
new file mode 100644
index 000000000..c7562cdd9
--- /dev/null
+++ b/.claude/skills-media/hyperframes-cli/references/preview-render.md
@@ -0,0 +1,188 @@
+# preview, play, render, publish
+
+Serve, render, and share commands.
+
+## preview
+
+```bash
+npx hyperframes preview                   # serve current directory
+npx hyperframes preview --port 4567       # 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 --port 3017` in `codex-openai-video`, report `http://localhost:3017/#project/codex-openai-video`.
+
+To land the user on the **Storyboard view** instead of the timeline, put `?view=storyboard` ahead of the hash: `http://localhost:<port>/?view=storyboard#project/<project-name>`. Hand this URL whenever the storyboard is the thing to review and nothing is assembled yet — before `index.html` exists, the timeline stage has nothing to show, so the bare project URL opens on an empty player.
+
+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. `preview` is a long-running process — start it from the project directory as a background task, and if that task reports it exited ("completed"), the server is down: restart it, don't hand out the link.
+
+### 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`.                         |
+| `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 --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 only after the user has reviewed in `preview` and approved. Don't auto-render when the checks pass.
+
+```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 --fps 60 --quality high        # 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, standard, high                                                                              | standard                       | draft for iterating                                                                                                                                                                                                                                                                      |
+| `--format`                           | mp4, webm, mov, gif, png-sequence                                                                  | 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) |
+| `--gif-loop`                         | 0-65535                                                                                            | 0                              | GIF loop count; `0` loops forever. Only with `--format gif`.                                                                                                                                                                                                                             |
+| `--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, `standard` for review, `high` for final delivery.
+
+**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 the `hyperframes-core` skill 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 (required); `--comment` is free text. 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: cd <project path> && <HF_*/PRODUCER_* env> npx hyperframes <exact command>
+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.
+
+Preserve paths containing spaces, flags, and relevant `HF_*` / `PRODUCER_*` variables; redact secrets and credentials. If the failure no longer reproduces, include the last failing command and log excerpt. 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, return public URL
+npx hyperframes publish ./my-video   # specific project
+npx hyperframes publish --yes        # skip the confirmation prompt (scripts/CI)
+```
+
+Uploads the project's source (HTML + assets) and returns a stable public URL that renders in the browser. Use this for sharing a draft for review before rendering MP4, or for embedding the composition elsewhere. Lint findings are surfaced before upload but do not block.
diff --git a/.claude/skills-media/hyperframes-cli/references/upgrade-info-misc.md b/.claude/skills-media/hyperframes-cli/references/upgrade-info-misc.md
new file mode 100644
index 000000000..2fdc89537
--- /dev/null
+++ b/.claude/skills-media/hyperframes-cli/references/upgrade-info-misc.md
@@ -0,0 +1,77 @@
+# info, upgrade, compositions, 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.
+
+## 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.
+
+## 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.
diff --git a/.claude/skills-media/hyperframes-core/SKILL.md b/.claude/skills-media/hyperframes-core/SKILL.md
new file mode 100644
index 000000000..20d9ed4dd
--- /dev/null
+++ b/.claude/skills-media/hyperframes-core/SKILL.md
@@ -0,0 +1,81 @@
+---
+name: hyperframes-core
+description: The HyperFrames composition contract — build one renderable project. Use for composition structure, the `data-*` timing attributes, `class="clip"`, tracks, sub-compositions, variables, framework-owned media playback, deterministic-render rules, and validation. Also covers Tailwind projects and the STORYBOARD.md / SCRIPT.md plan formats. Read before writing composition HTML.
+---
+
+# HyperFrames Core
+
+HyperFrames renders video from HTML. A composition is an HTML file whose DOM declares timing with `data-*` attributes, whose animation runtime is seekable, and whose media playback is owned by the framework.
+
+This skill is the **technical contract** — how to build one hyperframes project. The body below is the build guide; per-topic detail lives in `references/` (index next), read on demand. Other concerns live in the sibling domain skills — `hyperframes-animation`, `hyperframes-creative`, `media-use`, `hyperframes-cli`, `hyperframes-registry`. The capability map in `/hyperframes` says what each one covers.
+
+## References
+
+| File                                 | Read it to…                                                                                                                                                                        |
+| ------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `references/minimal-composition.md`  | start from the smallest renderable composition skeleton                                                                                                                            |
+| `references/composition-patterns.md` | choose monolithic vs modular; structure a modular `index.html`; pick a sub-comp archetype                                                                                          |
+| `references/data-attributes.md`      | look up any `data-*` (root / clip / sub-comp host / legacy aliases); use `class="clip"`                                                                                            |
+| `references/tracks-and-clips.md`     | pick `data-track-index`, handle same-track overlap / z-index, time a clip relative to another                                                                                      |
+| `references/sub-compositions.md`     | wire a sub-composition (host attrs, `<template>`, per-instance vars) and animate inside it                                                                                         |
+| `references/variables-and-media.md`  | declare variables; place `<video>`/`<audio>`, set volume, trim                                                                                                                     |
+| `references/determinism-rules.md`    | build a seekable timeline; determinism bans; the animatable-property allowlist; layout / text fit                                                                                  |
+| `references/full-screen-motion.md`   | author full-frame motion with shared backgrounds                                                                                                                                   |
+| `references/storyboard-format.md`    | author a `STORYBOARD.md` plan (+ the parsed manifest)                                                                                                                              |
+| `references/review-loop.md`          | run the plan → sketch → build review passes on a live board — shared by every storyboard-planning workflow                                                                         |
+| `references/production-loop.md`      | take an approved plan to a delivered video — the stage dependencies (audio, frames, assembly, transitions, captions, verify, deliver) a freeform build follows directly            |
+| `references/brief-contract.md`       | the brief's ground rules — mode derivation (collaborative / autonomous), shared field registry, question invariants (the asking itself lives in `/hyperframes` → the intent layer) |
+| `references/brief-format.md`         | author `BRIEF.md` — the confirmed intent document a workflow's Setup writes and every later step reads                                                                             |
+| `references/script-format.md`        | author the optional `SCRIPT.md` locked narration                                                                                                                                   |
+| `references/subagent-dispatch.md`    | map subagent dispatch verbs (parallel fan-out / background / wait) to your harness                                                                                                 |
+| `references/tailwind.md`             | work in a Tailwind v4 project (`init --tailwind`; runtime contract differs from Studio's v3)                                                                                       |
+
+For animation runtime specifics (GSAP API, Lottie, Three.js, etc.) go to `hyperframes-animation` → `adapters/<runtime>.md`.
+
+## Building a composition
+
+### Two root forms (not interchangeable)
+
+- **Standalone** (top-level `index.html`) — root `<div data-composition-id="…">` sits directly in `<body>`, **no `<template>` wrapper** (wrapping it hides all content and breaks rendering).
+- **Sub-composition** (loaded via `data-composition-src`) — root **must** be wrapped in `<template>`.
+
+> ⚠ Transport rule: the runtime **only clones `<template>` contents**; everything outside (incl. `<head>` styles/scripts) is discarded — put `<style>`/`<script>` **inside** the template.
+> ⚠ Host-id rule: the host slot's `data-composition-id` must **exactly equal** the inner template's `data-composition-id` **and** the `window.__timelines["<id>"]` key — no `-mount`/`-slot`/`-host` suffix.
+
+File shape, host wiring, and the pre-render checklist → `references/sub-compositions.md`.
+
+### Root must be sized (silent layout bug)
+
+The standalone root needs an explicit **sized box** (`width`/`height` in px), and every ancestor down to a `height:100%` element must have a resolved height — otherwise a flex/`100%` child collapses to ~0 and content piles into the top-left corner. Do not rely on automated gates alone to catch this; inspect a snapshot. Skeleton → `references/minimal-composition.md`.
+
+### One paused timeline
+
+Each composition registers **exactly one** `gsap.timeline({ paused: true })` at `window.__timelines["<id>"]` (key = root `data-composition-id`), built **synchronously** at page load. Render duration = root `data-duration`, not timeline length. Don't manually nest sub-timelines into the host. Full contract (incl. non-GSAP runtimes) → `references/determinism-rules.md` + `hyperframes-animation/adapters/`.
+
+### Non-negotiable rules (silent bugs automated gates may miss)
+
+Surfaced here; full rationale in the linked reference. Do not violate:
+
+- No render-time clocks / unseeded `Math.random` / network / input-state; no `repeat: -1` (use a finite count). → `determinism-rules.md`
+- Animate only the visual-property allowlist; never tween `display` or raw `visibility`. GSAP `autoAlpha` and zero-duration timeline boundary sets are the only visibility exceptions, and only on non-clip elements or wrappers inside a clip. The framework alone controls `.clip` visibility. Do not `gsap.set` later-scene clips at page load. → `determinism-rules.md`
+- No `<br>` in body text; transformed elements must be block-level + sized; pulsing absolute decoratives need peak clearance. → `determinism-rules.md`
+- `<video>`/`<audio>` must be a **direct child of the host root** (never inside a sub-comp `<template>`/wrapper); the framework owns playback. → `variables-and-media.md`
+- Every `id` must be unique across the **assembled** page; inside a sub-comp, prefix ids with the composition id (`#<id>-hero`). Duplicate `<video>`/`<img>` ids render **blank** — the producer injects frames by `getElementById`, and cross-file dupes slip past `lint`. → `composition-patterns.md`
+- A full-screen scene fill goes on a full-bleed **child** (`position:absolute; inset:0`), never on the composition root itself — the producer's frame compositing can drop the root element's own `background` (the frame renders **black**) even though preview/`snapshot` show it correctly. → `composition-patterns.md`
+
+## Editing existing compositions
+
+- Read the files first. Preserve unrelated timing, tracks, IDs, variables, media paths.
+- Match existing composition IDs and timeline keys.
+- Adding a clip: pick a non-overlapping `data-track-index` or adjust surrounding timing intentionally.
+- `data-hidden` on any composition element hides it in BOTH preview and render, overriding its time window; it is non-destructive/reversible and toggled by Studio's timeline eye icon.
+- Adding a sub-composition: verify its internal `data-composition-id` before wiring the host.
+
+## Validation
+
+Use `hyperframes-cli` for command details
+
+- [ ] `npx hyperframes check` passes (0 findings across lint, runtime, layout, motion, and contrast)
+- [ ] Projects with sub-compositions: `npx hyperframes snapshot --at <midpoints>` and eyeball each frame
+- [ ] `npx hyperframes preview` for review (the user can edit anything in Studio's timeline)
+- [ ] `npx hyperframes render` only after the user approves
diff --git a/.claude/skills-media/hyperframes-core/references/brief-contract.md b/.claude/skills-media/hyperframes-core/references/brief-contract.md
new file mode 100644
index 000000000..63b857838
--- /dev/null
+++ b/.claude/skills-media/hyperframes-core/references/brief-contract.md
@@ -0,0 +1,108 @@
+# Brief contract
+
+The intent layer (`/hyperframes` § 4) asks creation questions once. The executing workflow writes the confirmed result to `BRIEF.md` and does not ask those questions again. This contract defines the canonical run-shape fields, shared brief fields, and question rules. Route-specific options live in `/hyperframes` → `references/route-briefs.md`.
+
+## Contents
+
+- [Run shape](#1-run-shape)
+- [Shared fields](#2-shared-fields)
+- [Question protocol](#3-question-protocol)
+
+## 1. Run shape
+
+Three terms describe different concerns. Do not substitute one for another.
+
+| Term         | Values                          | Owns                                                                                          |
+| ------------ | ------------------------------- | --------------------------------------------------------------------------------------------- |
+| `flow`       | `automation` or `companion`     | Who drives execution. `companion` always executes in `/general-video`.                        |
+| `storyboard` | `yes` or `no`                   | Whether the live board is used for plan and layout review.                                    |
+| `mode`       | `collaborative` or `autonomous` | How later preference and checkpoint gates behave. The user never chooses this label directly. |
+
+Derive `mode` once from the confirmed run shape:
+
+| `flow`       | `storyboard` | Derived `mode`  |
+| ------------ | ------------ | --------------- |
+| `companion`  | either value | `collaborative` |
+| `automation` | `yes`        | `collaborative` |
+| `automation` | `no`         | `autonomous`    |
+
+Default to `collaborative` only when a legacy project lacks enough state to derive a mode. `/motion-graphics` is autonomous by design and does not need the two run-shape questions.
+
+### Signals and persistence
+
+- An ongoing signal such as “surprise me”, “decide for me”, “just build it”, or “stop asking” sets `flow: automation`, `storyboard: no`, and therefore `mode: autonomous` when it appears during intent capture.
+- A bare “go” or “looks good” at a checkpoint accepts that checkpoint only. It does not change mode.
+- After `STORYBOARD.md` exists, persist the derived mode in its frontmatter. On resume, an explicit `mode` in `STORYBOARD.md` overrides the derivation because it may represent a later user change.
+- Mid-run “stop asking; finish it” changes only checkpoint behavior. Set `STORYBOARD.md` `mode` to `autonomous` when the file exists. Do not rewrite the already-confirmed `flow` or `storyboard` fields.
+- Resume collaborative checkpoints only after an explicit signal such as “let's review together”; ordinary feedback does not change mode.
+
+### Gate behavior
+
+| Gate                                                                            | Collaborative                                                   | Autonomous                                                      |
+| ------------------------------------------------------------------------------- | --------------------------------------------------------------- | --------------------------------------------------------------- |
+| Preference: preset, voice, caption identity                                     | Ask when the workflow marks it as required.                     | Decide and state the choice with a one-line reason.             |
+| Checkpoint: plan, sketches, pre-render review                                   | Ask and wait.                                                   | Post the same summary, then continue.                           |
+| Quality: fetch completeness, `lint`, `hyperframes check`, workflow verification | Run and stop on errors.                                         | Run and stop on errors.                                         |
+| Routing ambiguity                                                               | Resolve explicitly; a wrong route changes the deliverable.      | Same requirement.                                               |
+| Sign-in or credential unavailable                                               | Show status and wait for sign-in or explicit offline selection. | Show status and continue through an available offline provider. |
+
+Autonomous mode never silently drops a required capability. If the selected workflow has no local, cached, or offline provider for it, surface the blocker instead of omitting the capability. A credential problem does not relax the quality gates.
+
+Rendering remains user-gated in both modes. After checks pass, collaborative runs ask “render now, or what changes?” Autonomous runs ask “preview first, or render?” Render only after the answer.
+
+### Studio comments
+
+Checkpoint feedback may arrive in chat or in `.hyperframes/frame-comments.json` (format: `storyboard-format.md`). When the user replies to a checkpoint, read that file before interpreting the chat reply. Apply only the named frame changes, delete the comments file after handling it, and re-present the affected frames. A board submission does not notify the agent, so tell the user to reply in chat after submitting comments.
+
+Autonomous is not silent: replace absorbed questions with visible decisions and short reasons. Every autonomous visual or video delivery names the final preview or rendered artifact as applicable, reports the actual duration for a time-based deliverable, and includes a contact sheet or snapshot sheet plus relevant frame identifiers when available. For multi-scene work, use scene midpoints; for a single-scene piece, use one or more proof times. This gives the user a review surface even though intermediate checkpoints did not pause.
+
+## 2. Shared fields
+
+Ask only fields used by the selected route. Route entries identify their must-have questions and deferred questions. Values inferred or derived by policy are stated in the brief, not asked.
+
+| Field         | Meaning                                              | Policy                                                                                                                                              |
+| ------------- | ---------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `flow`        | Who drives execution                                 | Ask at the end of intent capture when the route supports both flows. An autonomous signal answers it.                                               |
+| `storyboard`  | Whether to review on the live board                  | Ask before `flow` when the route supports a board. A storyboard request answers it.                                                                 |
+| `destination` | Where the video will play                            | Infer from the request. Ask only when unknown and the answer changes aspect, type scale, or composition.                                            |
+| `aspect`      | Canvas size                                          | Derive from destination: social feed → `1080x1080`; TikTok/Reels/Shorts → `1080x1920`; YouTube/website/desktop → `1920x1080`. State the derivation. |
+| `length`      | Target duration                                      | Let the workflow recommend a range supported by the material; include the reason.                                                                   |
+| `language`    | Narration and caption language                       | Use the user's language and state it.                                                                                                               |
+| `audience`    | Who will watch                                       | Infer when clear. Ask only when a different answer changes the story or terminology.                                                                |
+| `message`     | The one thing the video must communicate             | Derive and echo one sentence. Do not storyboard until this is clear.                                                                                |
+| `angle`       | Route-specific story shape                           | Recommend one route-defined option with a reason.                                                                                                   |
+| `narration`   | `yes`, `minimal`, or `no`, plus route-specific modes | Follow the selected route.                                                                                                                          |
+
+### Remembered defaults
+
+Let `<MEDIA_DIR>` be the installed `/media-use` skill directory. Let `<MEMORY_ROOT>` be the existing project root. Before scaffolding, use a deliberately nonexistent probe path with no `.media` ancestor, such as `/tmp/hyperframes-intent-memory-<run-id>`; never use the current workspace as the probe. Read merged preferences with:
+
+```bash
+node <MEDIA_DIR>/scripts/prefs.mjs get --hyperframes <MEMORY_ROOT> --json
+```
+
+For the pre-project probe, `<MEMORY_ROOT>` is the nonexistent probe path, so only the personal tier can contribute. If that path already exists or contains `.media`, choose another. Do not claim project provenance before the real project exists.
+
+A remembered value becomes the recommended answer and names its source. It never overrides the current request and never skips a required question. A confirmed recipe is different: adopting the bundle may fill the fields it contains because adoption itself is the confirmation.
+
+Record only values the user confirmed, never values merely inferred or defaulted. Recording happens after the workflow writes `BRIEF.md`; supported keys are listed in `brief-format.md`. A user who sees the recommendation and accepts it has confirmed it. Personal defaults promote only according to `/media-use` memory rules.
+
+The first time a project records a preference, say one short line that it will be remembered for future runs. Do not re-record a remembered value merely because an autonomous build reused it; only a confirmation in the current run creates a new memory event.
+
+## 3. Question protocol
+
+Follow these invariants:
+
+1. Ask only unanswered fields that materially affect the output.
+2. Ask one field per message and wait for its answer before asking the next field.
+3. Put the recommended option first and attach a short reason. A numbered choice list is allowed, but every option in that list must answer the same field. Option lists fit factual fields (destination, length, language), where they scaffold recall; a creative field (message, angle, tone) the request has not already shaped takes an anchored open question — a list there steers the answer instead of collecting it.
+4. Skip a question when the current request already answers it. Inference alone is not an answer.
+5. Ask `storyboard` and then `flow` last, only for routes that support them.
+6. Announce deferred questions before hand-off; do not surprise the user later.
+7. When an autonomous signal appears, ask no remaining preference or checkpoint questions. State the completed brief and the reasons for decisions, then build.
+8. Use native question UI when available. Otherwise send one plain-text question with one numbered option list; never place several fields in the same list.
+9. Before the hand-off summary, run one integration check: look for a consequence the combined answers create that no single answer showed, and surface it with a proposed adjustment.
+10. The hand-off summary separates fields the user stated from fields that were inferred or defaulted, with receipts on both.
+11. Revision is not confirmation: after any correction to the summary, present the updated summary and confirm before executing.
+
+At a checkpoint, “go” accepts that checkpoint's displayed recommendation. If a message explicitly presents a complete brief and says that “go” will accept every displayed default, then “go” may confirm that whole displayed brief; do not assume broader acceptance without that sentence.
diff --git a/.claude/skills-media/hyperframes-core/references/brief-format.md b/.claude/skills-media/hyperframes-core/references/brief-format.md
new file mode 100644
index 000000000..564bb3000
--- /dev/null
+++ b/.claude/skills-media/hyperframes-core/references/brief-format.md
@@ -0,0 +1,72 @@
+# Brief format — `BRIEF.md`
+
+Defines the **intent document** — the file a confirmed brief becomes. The questions that fill it live in the intent layer (`/hyperframes` § 4 + its `references/route-briefs.md`); the field semantics live in `brief-contract.md` § 2. This file defines only the artifact: its shape, its home, and its lifecycle.
+
+`BRIEF.md` sits at the project root, and the project's files read as four layers: **`BRIEF.md`** (why, for whom, and everything the user asked for) → **`STORYBOARD.md`** (what, frame by frame) → **`frame.md`** (how it looks) → **`compositions/`** (the thing itself).
+
+## Frontmatter — the confirmed fields
+
+YAML block at the top: one key per deterministic field — the run's shape first, then the registry fields (`brief-contract.md` § 2) used by the route. Store canonical normalized values. Some values come directly from the user; others, such as `workflow`, `aspect`, and `language`, are routed, derived, or normalized and must use the vocabulary defined by the contract. Preserve the user's own wording in the body when it matters.
+
+| Key                                                                       | Meaning                                                                                                                    | Example                     |
+| ------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------- | --------------------------- |
+| `workflow`                                                                | the executing workflow (companion runs record `general-video`)                                                             | `faceless-explainer`        |
+| `flow`                                                                    | `automation` — the matched workflow's pipeline · `companion` — co-creation in `/general-video`                             | `automation`                |
+| `storyboard`                                                              | `yes` — plan, sketches, and build reviewed on the live board (`review-loop.md`) · `no` — one shot from the confirmed brief | `yes`                       |
+| `message`                                                                 | the ONE thing the video must communicate                                                                                   | `"Ship it in an afternoon"` |
+| `destination` / `aspect` / `language` / `audience` / `length` / `angle` … | the registry fields this route confirmed                                                                                   | —                           |
+
+**Which keys are memory.** Only the preference-backed subset — `destination`, `aspect`, `language`, `flow`, `storyboard`, `voice`, `style_preset` — is recorded with `media-use` → `scripts/prefs.mjs record` (the store rejects any other key). `style_preset` is stored per workflow: record it with `--workflow <w>` (the store refuses it bare — a look confirmed for one genre is not a default for the others). `message`, `audience`, `length`, `angle` live in the frontmatter only: they describe this video, not the user.
+
+## Body — the intent in prose
+
+Four sections, each optional — write what the intent layer actually learned, omit what it didn't:
+
+- `## Intent` — a short paragraph: what the video is, for whom, why now; tone and feel in the user's own words.
+- `## Assets` — the user's own material, one line each: `path — what it is, where it belongs`. Files named here are staged by the workflow, never re-discovered.
+- `## Customizations` — capabilities the user opted into from the menu (`/hyperframes` → `references/capability-menu.md`) and any bespoke asks ("count-up on the revenue stat", "capture the pricing page too"), each with enough detail to act on.
+- `## Notes` — everything true that fits no field: constraints, references, things to avoid.
+
+Body prose is **project-local** — nothing in it enters cross-project memory. (Frozen recipes carry a blanked skeleton of it; a future prose-memory layer would extract from here, under its own approval rules.)
+
+## Lifecycle
+
+- **Created once, by the workflow's Setup, as its first action after `hyperframes init`** — never before (`init` refuses a non-empty directory). The intent layer confirms the answers pre-project; Setup makes them durable, then records the preference-backed fields. Later confirmed changes update this same file.
+- **It is the no-repeat token.** A workflow that finds `BRIEF.md` reads it and asks no brief question. Its `workflow:` names the executor — a workflow that finds another's name there is in the wrong room: load that skill and hand over, don't re-route through the intent layer. No `BRIEF.md` but the project exists (`hyperframes.json` / `STORYBOARD.md` on disk) → a pre-BRIEF project: resume from the storyboard's frontmatter and the recorded preferences, optionally backfilling `BRIEF.md` from what they already say — never re-interrogate a half-built project.
+- **It stays the run's truth.** A mid-run decision updates it as it happens: an explicit change to a frontmatter field ("make it 9:16 after all") rewrites the field and re-records the preference — a changed mind is a confirmed answer; an accepted capability, adopted material, or bespoke ask lands as one line in the matching body section. Resume reads this file, so write-back is what makes a dead session resumable — a decision that lives only in chat is a decision resume never sees.
+- **Execution mode derives; the storyboard's copy wins on resume.** `flow` × `storyboard` derive collaborative/autonomous checkpoint behavior (`brief-contract.md` § 1). Persist the derived mode in `STORYBOARD.md` frontmatter when that file exists. A mid-run mode-only switch updates `STORYBOARD.md`, not the already-confirmed `flow` or `storyboard`; an explicit change to either run-shape field still updates `BRIEF.md`.
+- **`message` / `audience` live here first.** `STORYBOARD.md` frontmatter keeps its copies — the board and the parser read them — but when the two disagree, `BRIEF.md` holds what the user confirmed.
+- **Recipes carry its skeleton.** Freezing a recipe (`review-loop.md` § 4) captures `brief-skeleton.md` — frontmatter structure kept, run-shape and content values blanked — so the next run starts pre-filled yet still confirms its own two run-shape answers.
+
+## Example
+
+```markdown
+---
+workflow: faceless-explainer
+flow: automation
+storyboard: yes
+message: "Compound interest is a snowball, not a ladder"
+destination: x-feed
+aspect: 1080x1080
+language: en
+length: 60s
+angle: concept
+---
+
+## Intent
+
+Teach retail investors why starting early beats contributing more. Confident,
+a little playful — closer to a bar-napkin sketch than a lecture.
+
+## Assets
+
+- public/growth-curve.png — the real 30-year S&P chart; the proof beat builds on it.
+
+## Customizations
+
+- Count-up on the final dollar figure.
+
+## Notes
+
+- No stock-photo aesthetics; keep it typographic.
+```
diff --git a/.claude/skills-media/hyperframes-core/references/composition-patterns.md b/.claude/skills-media/hyperframes-core/references/composition-patterns.md
new file mode 100644
index 000000000..54f66bc4f
--- /dev/null
+++ b/.claude/skills-media/hyperframes-core/references/composition-patterns.md
@@ -0,0 +1,263 @@
+# Composition Patterns
+
+How to architect a project — when to inline everything in one HTML, when to split into sub-compositions, what the `index.html` orchestrator looks like at scale, and the common sub-composition archetypes seen in real projects. Pair with `minimal-composition.md` (single-file shape) and `sub-compositions.md` (mechanics of a sub-comp file).
+
+## Two Architectures
+
+|                       | Monolithic (single file)                                | Modular (sub-compositions)                                                           |
+| --------------------- | ------------------------------------------------------- | ------------------------------------------------------------------------------------ |
+| Project layout        | `index.html` only                                       | `index.html` + `compositions/<scene>.html` per scene                                 |
+| Where scenes live     | Inline `<section class="clip">` siblings under the root | Each scene is a separate file wrapped in `<template>`                                |
+| Timeline registration | One timeline keyed at the root's `data-composition-id`  | Root timeline (often near-empty) + one timeline per sub-comp, each keyed by its `id` |
+| Routing entry         | `references/minimal-composition.md`                     | `references/sub-compositions.md`                                                     |
+
+Both architectures use the same runtime contract — `data-*` attributes + `window.__timelines[id]`. The choice is structural, not behavioral.
+
+### Pick monolithic when
+
+- The whole video is one continuous scene with no hard cuts.
+- Scenes share heavy state (one canvas/WebGL context spanning the whole video, a single SVG that morphs across all beats).
+- Total scope is small (~200–400 lines of markup + script).
+- No scene is reused across projects.
+
+### Pick modular when
+
+- The video has clear scene cuts — each scene is its own segment of the timeline.
+- Some scenes are large (>100 lines of markup or significant scripted animation).
+- A scene is reusable (kinetic intro, end-card logo lockup, a transition).
+- The video has a continuous audio track over multiple visual segments. Keep audio at the root, visual segments as sub-comps.
+- You want to author/iterate on scenes in isolation (preview a single sub-comp file directly).
+
+### Refactor between them
+
+Conversion is mechanical and reversible. To lift a monolithic scene into a sub-comp: wrap the scene's markup + scoped CSS + its slice of the parent timeline into a `<template>`, save as `compositions/<scene>.html`, replace the inline content in `index.html` with a slot `<div data-composition-src="compositions/<scene>.html">`, and have the sub-comp register its own timeline at `window.__timelines["<scene>"]`. The parent timeline shrinks accordingly.
+
+If a monolithic project is approaching three or more scene cuts, prefer modularizing _before_ adding the next scene. Mixed projects where some scenes are inline and siblings are in `compositions/` are the hardest to maintain.
+
+## Modular Orchestrator Pattern
+
+When using sub-compositions, `index.html` should be **thin**. Its job is to declare slots, lay them out in time, mount the audio track, and register a (usually empty) root timeline. All scene animation lives inside the sub-comps.
+
+```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>
+      body {
+        margin: 0;
+        background: #000;
+      }
+      #root {
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+      }
+      /* Sub-comp slots stretch to fill the root. */
+      [data-composition-id="root"] > div[data-composition-src] {
+        position: absolute;
+        inset: 0;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="root"
+      data-width="1920"
+      data-height="1080"
+      data-duration="30"
+    >
+      <!-- Sequential scenes — each one a sub-composition slot. -->
+      <div
+        id="el-intro"
+        data-composition-id="intro"
+        data-composition-src="compositions/intro.html"
+        data-start="0"
+        data-duration="6"
+        data-track-index="1"
+      ></div>
+
+      <div
+        id="el-body"
+        data-composition-id="body"
+        data-composition-src="compositions/body.html"
+        data-start="6"
+        data-duration="18"
+        data-track-index="1"
+      ></div>
+
+      <div
+        id="el-outro"
+        data-composition-id="outro"
+        data-composition-src="compositions/outro.html"
+        data-start="24"
+        data-duration="6"
+        data-track-index="1"
+      ></div>
+
+      <!-- Continuous audio at the root — survives scene cuts. -->
+      <audio
+        id="el-bgm"
+        src="assets/bgm.mp3"
+        data-start="0"
+        data-duration="30"
+        data-track-index="10"
+        data-volume="0.6"
+      ></audio>
+    </div>
+
+    <script>
+      window.__timelines = window.__timelines || {};
+      window.__timelines["root"] = gsap.timeline({ paused: true });
+    </script>
+  </body>
+</html>
+```
+
+Key properties of this layout:
+
+- **Visual scenes on the same `data-track-index`** (e.g. `1`). Sequential — they cannot overlap on the same track. For a cross-fade between two scenes, put one on a higher track and overlap their times by the fade duration.
+- **Audio on a separate, higher track index** (e.g. `10`). Keeps the linter's overlap rules clear of any visual collisions.
+- **Root timeline is near-empty.** All animation lives in the sub-comps. A root-level fade-to-black at the very end is fine; do not stage a parallel animation track from the root.
+- **Host slot ids** use `el-<name>` or `<scene-id>`. The slot's `data-composition-id` must still equal the sub-comp's internal id (see `sub-compositions.md`).
+
+## Sub-Composition Archetypes
+
+### A. Content scene (default)
+
+The sub-comp contains the scene's full DOM, scoped CSS, and timeline. This is the standard pattern in `sub-compositions.md` — most scenes are this.
+
+### B. Host media + main-timeline driver (REQUIRED for any `<video>`/`<audio>`)
+
+Media playback only works when the `<video>`/`<audio>` is a **direct child of the host root** — never inside a sub-comp `<template>` (it would render blank/black). This is not optional or "for media that spans scenes"; it applies to every clip, including a scene-specific one. The scene's sub-comp keeps the frame/shell; the media is a host sibling positioned over it.
+
+A sub-comp timeline **cannot** drive host elements (a global selector or `document.querySelector` does not resolve across the boundary). So author the media's per-scene motion (scale/opacity/morph/tilt/breathing) on the **main timeline** in `index.html`, at **global time** = scene-local time + the scene slot's `data-start`.
+
+```html
+<!-- index.html (host) -->
+<div
+  id="el-final"
+  data-composition-id="final-anim"
+  data-composition-src="compositions/final-anim.html"
+  data-start="20"
+  data-duration="6"
+  data-track-index="1"
+></div>
+
+<!-- media is a DIRECT root child; sits over the sub-comp's frame -->
+<video
+  id="final-video"
+  class="clip"
+  src="assets/final.mp4"
+  data-start="20"
+  data-duration="6"
+  data-track-index="2"
+  muted
+  playsinline
+  style="position:absolute; left:360px; top:100px; width:1200px; height:680px; object-fit:cover; border-radius:24px;"
+></video>
+
+<script>
+  // MAIN timeline drives the host video. Global time: scene starts at 20.
+  window.__timelines = window.__timelines || {};
+  const main = window.__timelines["main"];
+  main.fromTo(
+    "#final-video",
+    { scale: 1.4, filter: "blur(14px)" },
+    { scale: 1.0, filter: "blur(0px)", duration: 0.9, ease: "power3.out" },
+    20,
+  ); // = slot data-start (+ any scene-local offset)
+</script>
+
+<!-- compositions/final-anim.html — frame/shell only, no <video>, no host-element animation -->
+<template>
+  <div
+    data-composition-id="final-anim"
+    data-width="1920"
+    data-height="1080"
+    data-duration="6"
+    style="position:absolute; inset:0; pointer-events:none;"
+  >
+    <script>
+      window.__timelines = window.__timelines || {};
+      const tl = gsap.timeline({ paused: true });
+      // animate ONLY this sub-comp's own elements here (labels, frame, overlays)
+      window.__timelines["final-anim"] = tl;
+    </script>
+  </div>
+</template>
+```
+
+Caveats:
+
+- The host media must be a direct root child and exist in the DOM (static in `index.html`) — it always is.
+- Clip lifecycle owns the media element's visibility across its `[data-start, data-start+data-duration]` window. The main-timeline opacity/scale tweens compose with it fine; for an opacity reveal/crossfade prefer a host **wrapper** so you are not fighting the lifecycle on the media element itself.
+- Two media elements sharing the same `src` + `data-start` trigger `duplicate_media_discovery_risk` (benign — both still render).
+
+### C. Multi-scene merge
+
+When several beat-level scenes share continuous state — a chat thread that grows, a persistent headline word that carries across the cut, a single canvas with internal phase changes — collapse them into one sub-comp and use **internal phase divs** rather than multiple sub-comp slots.
+
+```html
+<!-- compositions/act2-merged.html -->
+<template>
+  <div data-composition-id="act2-merged" data-width="1920" data-height="1080" data-duration="9">
+    <style>
+      [data-composition-id="act2-merged"] .phase {
+        position: absolute;
+        inset: 0;
+        opacity: 0;
+      }
+    </style>
+    <div class="phase" id="phase-a">…</div>
+    <div class="phase" id="phase-b">…</div>
+    <div class="phase" id="phase-c">…</div>
+    <script>
+      window.__timelines = window.__timelines || {};
+      const tl = gsap.timeline({ paused: true });
+      tl.set("#phase-a", { opacity: 1 }, 0);
+      tl.to("#phase-a", { opacity: 0, duration: 0.4 }, 3.0);
+      tl.set("#phase-b", { opacity: 1 }, 3.0);
+      // …
+      window.__timelines["act2-merged"] = tl;
+    </script>
+  </div>
+</template>
+```
+
+Reach for this over multiple sequential slots when scenes share DOM, share a canvas, or need to cross-fade with persistent elements (a headline that survives the cut between phases). Each phase is just a div inside the same sub-comp — the parent timeline never has to know about the internal phase boundaries.
+
+### D. Audio at root, reactive visual inside
+
+Audio always lives at the host (`index.html`) as a root-level `<audio>` so playback survives scene cuts. A sub-comp that visualizes audio should read a **pre-baked** frequency curve at init, then sample the baked curve from its timeline — the visual must still be a deterministic function of `tl.time()`, not of `audio.currentTime`. See `determinism-rules.md` and `hyperframes-creative` for the authoring pattern.
+
+## Naming Conventions
+
+| Thing                               | Convention                                  | Example                                    |
+| ----------------------------------- | ------------------------------------------- | ------------------------------------------ |
+| Sub-comp file                       | `compositions/<scene-id>.html`              | `compositions/act0-intro-bell.html`        |
+| Sub-comp `<template>` id (optional) | `<scene-id>-template`                       | `<template id="act0-intro-bell-template">` |
+| Sub-comp root `data-composition-id` | `<scene-id>` (must match host slot)         | `data-composition-id="act0-intro-bell"`    |
+| Timeline registry key               | matches `data-composition-id`               | `window.__timelines["act0-intro-bell"]`    |
+| Host slot `id`                      | `el-<short>` or `<scene-id>`                | `id="el-intro"`, `id="act0"`               |
+| Element ids inside a sub-comp       | prefix with the scene id                    | `#act0-bell`, `#b1-tape`                   |
+| Audio at root                       | `data-track-index` well above visual tracks | `10` while visuals use `1`                 |
+
+The `-template` suffix on `<template>` is conventional but not required — the runtime extracts contents from whichever `<template>` is in `<body>`, regardless of id. The prefix on inner element ids is the only safeguard against id collisions when multiple sub-comps are mounted into the same host page at once.
+
+## Editing Existing Projects
+
+Before adding or modifying scenes, identify which architecture is in use:
+
+```bash
+ls compositions/ 2>/dev/null && echo "modular" || echo "monolithic"
+```
+
+- In a **monolithic** project, add new scenes as inline `<section class="clip">` elements with a non-overlapping `data-start` and a sensible `data-track-index`, and extend the existing single timeline.
+- In a **modular** project, match the pattern: add a new file under `compositions/`, add a slot in `index.html`, keep the root timeline thin. Do **not** start inlining new scenes into `index.html` when sibling scenes are sub-comps — the inconsistency is the worst of both worlds.
+- If a monolithic project needs a third or fourth scene cut, lift each scene into a sub-comp before adding more. The conversion is mechanical (see "Refactor between them" above).
+
+When picking the slot's `data-start`/`data-duration`, prefer continuing the existing sequencing convention (adjoining starts, deliberate overlaps for cross-fades). Don't introduce a new track index unless you actually need parallel visual layers — most sequential-scene projects use exactly one visual track.
diff --git a/.claude/skills-media/hyperframes-core/references/data-attributes.md b/.claude/skills-media/hyperframes-core/references/data-attributes.md
new file mode 100644
index 000000000..dfde93be3
--- /dev/null
+++ b/.claude/skills-media/hyperframes-core/references/data-attributes.md
@@ -0,0 +1,72 @@
+# Data Attributes Reference
+
+Every HyperFrames composition uses `data-*` attributes to declare timing and structure to the framework. This is the full attribute table — pair with `tracks-and-clips.md` for the rules behind `data-track-index`.
+
+## Composition Root
+
+Every renderable composition needs one root element:
+
+| Attribute                    | Required      | Meaning                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  |
+| ---------------------------- | ------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `data-composition-id`        | Yes           | Unique ID. Must match the animation registry key on `window.__timelines`.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                |
+| `data-width` / `data-height` | Yes           | Pixel frame size. Common values: `1920x1080`, `1080x1920`, `1080x1080`.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  |
+| `data-duration`              | Conditional\* | Render duration in seconds (total length / frame count), not the GSAP timeline length. **Read once at compile time, like `data-width` / `data-height`**: a static root `data-duration` is locked before scripts run, so a script (`root.setAttribute("data-duration", ...)`) or a `--variables`-driven value cannot change the render length. To vary length per render, author the root `data-duration` directly. (A clip's `data-duration` is different: re-read from the live DOM, so scripts/variables can drive it.) Only when the root omits `data-duration` does the renderer derive total length from the live DOM / timeline after scripts run. |
+| `data-fps`                   | No            | Optional frame rate hint. CLI render flags can override output fps.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      |
+| `data-composition-variables` | No            | JSON array of variable declarations (on `<html>`). See `variables-and-media.md`.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         |
+
+\*`data-duration` is optional whenever the runtime can auto-infer duration: a registered GSAP timeline, a finite CSS animation, a finite WAAPI `element.animate()`, or a registered Lottie animation. It is **required** for Three.js (no auto-inference), for infinite/unbounded CSS or WAAPI animations, and for any composition with no GSAP timeline and no animation signal at all. `npx hyperframes lint` enforces this (`root_composition_missing_duration_source`). See `determinism-rules.md` → "Duration Contract For Non-GSAP Runtimes" for the per-runtime breakdown.
+
+The root should be `position: relative`, have explicit pixel dimensions, and hide overflow unless intentionally composing outside the frame.
+
+## Clip Attributes
+
+Timed child elements are clips. **`class="clip"` is required on visible timed elements** (`<div>`, `<img>`, etc.) — without it the runtime keeps the element visible for the whole composition, ignoring `data-start` / `data-duration`. Omit on `<video>` (framework manages visibility directly) and `<audio>` (no visual).
+
+**Clips must be DIRECT children of the composition root.** A clip nested inside a wrapper `<div>` is not registered — most visibly, a `<video>` in a wrapper is never seeked/decoded and renders black. To wrap/transform a clip, put the wrapper _inside_ the clip, or animate the clip element itself; do not wrap the clip. (`<video>`/`<audio>` additionally must be at the **host** root, never in a sub-comp `<template>` — see `variables-and-media.md`.)
+
+| Attribute          | Required                                        | Meaning                                                                                                                           |
+| ------------------ | ----------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------- |
+| `id`               | Yes                                             | Stable DOM ID for linting, timeline targets, and debugging.                                                                       |
+| `data-start`       | Yes                                             | Start time in seconds, or a supported clip-time reference.                                                                        |
+| `data-duration`    | Required for `div`, `img`, and sub-compositions | Duration in seconds. Video/audio can default to media duration when known.                                                        |
+| `data-track-index` | Yes                                             | Timeline track. Clips on the same track must not overlap.                                                                         |
+| `data-media-start` | No                                              | Offset into the media source, in seconds.                                                                                         |
+| `data-volume`      | No                                              | Static audio volume, `0` to `1`, default `1`. For fades, animate `volume` on the timeline instead (see `variables-and-media.md`). |
+| `data-has-audio`   | No (`<video>` only)                             | `"true"` to declare the video carries an audio track when auto-detection would miss it.                                           |
+
+**Visibility window is inclusive of both ends.** A clip shows while `start ≤ t ≤ start + duration` — it still renders at exactly `t = start + duration`, so the final frame holds the animation's resolved end state (the runtime does not hide it one frame early). A reveal/entrance that lands on `data-duration` is therefore visible on the last frame; you do not need to finish it _before_ `data-duration` just to guarantee the end state renders. (Climax-dwell guidance in `/hyperframes-animation` is about pacing, not this boundary.)
+
+## Sub-Composition Host Attributes
+
+When a clip is a sub-composition host (loads another composition file):
+
+| Attribute                    | Required | Meaning                                                                                                  |
+| ---------------------------- | -------- | -------------------------------------------------------------------------------------------------------- |
+| `data-composition-id`        | Yes      | The internal composition ID of the loaded file.                                                          |
+| `data-composition-src`       | Yes      | Path to the sub-composition HTML file.                                                                   |
+| `data-width` / `data-height` | Yes      | Render dimensions for the sub-composition instance.                                                      |
+| `data-variable-values`       | No       | Per-instance variable overrides as JSON. See `variables-and-media.md`.                                   |
+| `data-var-src`               | No       | Binds the element's `src` to a declared variable id (media/image substitution, authored src = fallback). |
+| `data-var-text`              | No       | Binds the element's own text to a scalar variable id; children are preserved.                            |
+
+See `sub-compositions.md` for the full wiring pattern.
+
+## Authoring Hints
+
+- `id="root"` — template convention used by scaffolds and the transition catalog so CSS can target the composition root with `#root` instead of `[data-composition-id="main"]`. Not required by the runtime, but consistent with the rest of the ecosystem.
+- `class="clip"` — required runtime visibility marker on visible timed elements (`<div>`, `<img>`, …). See Clip Attributes above.
+- `data-layout-allow-overflow` — tells `hyperframes check` that overflow on this element (or its descendants) is intentional. Notes:
+  - The `check` layout audit measures `getBoundingClientRect` at sampled timestamps, not rendered pixels. `overflow: hidden` clips the visual but does **not** suppress a layout finding. This attribute is the escape hatch; CSS overflow is not.
+  - Can be set on the composition **root** as well as on any child. When the cited offender is `div.<comp>-root inside div.<comp>-root` (the root reports its own children's union as overflowing), the fix goes on the root, not on individual text descendants — shrinking font sizes will not converge.
+  - In a multi-scene `group_wN.html` (continue runs), every scene-local element stays in the DOM during the other scenes' time windows; the layout-box union almost always overflows the canvas during morph seams. Mark the root and every scene-local primary/supporting element with this attribute **at construction**, not after `check` flags it.
+  - **Blast radius — it silences more than the overflow audit.** The attribute is inherited down the subtree (the perception probe walks ancestors), so it also suppresses the rendered-perception checks `text-clipping`, `content-cramped-container`, and `foreground-over-panel` for every descendant. Putting it on a persistent panel that also hosts real foreground content disables collision checks on that content for the panel's whole lifetime. Prefer the narrowest opt-out: scope it to the smallest decorative wrapper, or use per-element `data-layout-bleed="true"` for one intentional primary-text crop. The two canvas/edge checks `primary-offscreen` and `foreground-over-panel` deliberately run **even under** allow-overflow, so it cannot hide a wordmark sliced by the frame or text bleeding onto a panel edge.
+- `data-layout-ignore` — exclude this element from layout audits entirely.
+
+## Legacy / Removed Attributes
+
+These names appear in older projects and examples. Use the current names when authoring or editing:
+
+| Legacy name  | Use instead        |
+| ------------ | ------------------ |
+| `data-layer` | `data-track-index` |
+| `data-end`   | `data-duration`    |
diff --git a/.claude/skills-media/hyperframes-core/references/determinism-rules.md b/.claude/skills-media/hyperframes-core/references/determinism-rules.md
new file mode 100644
index 000000000..44aef9835
--- /dev/null
+++ b/.claude/skills-media/hyperframes-core/references/determinism-rules.md
@@ -0,0 +1,68 @@
+# Determinism, Animation Runtime, and Layout
+
+HyperFrames seeks compositions frame-by-frame. Every frame must be reproducible from its time value alone — same input time → same pixels. Three contracts enforce this: the **animation runtime contract**, the **determinism rules**, and the **layout contract**.
+
+## Animation Runtime Contract
+
+GSAP is the primary runtime. The core requirement is generic: animation state must be seekable from HyperFrames time.
+
+For GSAP:
+
+- Create the timeline **synchronously** during page initialization.
+- Use `gsap.timeline({ paused: true })`.
+- Register it on `window.__timelines["<composition-id>"]`.
+- The key must match `data-composition-id` on the composition root.
+- **Do not** call `tl.play()` for render-critical motion.
+- **Do not** build timelines inside `async`, `Promise`, `setTimeout`, or event handlers — the renderer can sample before they finish.
+- **Do not** create empty tweens only to set duration; use `data-duration` on the clip instead.
+- **Do not** `gsap.set()` clip elements from later scenes — they are not in the DOM at page load. Use `tl.set(selector, vars, time)` inside the timeline at or after the clip's `data-start`.
+
+Use the `hyperframes-animation` skill for tween syntax, position parameters, eases, and performance rules.
+
+### Duration Contract For Non-GSAP Runtimes
+
+The render engine needs a positive total duration before it will capture a single frame — without one, capture fails outright with "Composition has zero duration." A GSAP timeline supplies this automatically. CSS, WAAPI, and Lottie compositions have no timeline object, so the runtime infers duration itself:
+
+- **CSS**: longest `animation-delay` + `animation-duration` × finite `animation-iteration-count` across animated elements (offset by each element's `data-start`). `animation-iteration-count: infinite` cannot be inferred.
+- **WAAPI**: longest `element.animate()` effect's `getComputedTiming().endTime`. Infinite `iterations` cannot be inferred.
+- **Lottie**: the registered animation's native length (`totalFrames / frameRate`, or the dotLottie player's own `duration`) — always finite regardless of `loop`.
+- **Three.js**: **not inferable**. The `three` adapter only forwards time via `hf-seek` — it has no `AnimationClip`/`AnimationMixer` inspection.
+
+`data-duration` on the root `[data-composition-id]` element is therefore optional whenever every non-GSAP animation on the page is finite (CSS/WAAPI with finite iteration counts, or Lottie). It is **required** when: the composition has an infinite/unbounded CSS or WAAPI animation, the composition uses Three.js, or there is no GSAP timeline and no animation signal at all for any adapter to discover. `npx hyperframes lint` enforces exactly this (`root_composition_missing_duration_source`) — see the runtime/adapter-specific docs under `hyperframes-animation/adapters/` for the full contract per runtime.
+
+## Determinism Rules
+
+Rendered frames must be reproducible from the requested time. Do **not** use any of the following for visual state:
+
+- `Date.now()`, `performance.now()`, or any render-time clock.
+- Unseeded `Math.random()`. Use a seeded PRNG if random-looking placement is needed.
+- Render-time network fetches for required assets. Inline or pre-bundle them.
+- Hover, scroll, pointer, or focus state. The renderer has no input events.
+- Infinite loops such as `repeat: -1`. Compute a finite count: `repeat: Math.max(0, Math.floor(duration / cycleDuration) - 1)` — **`floor`, not `ceil`** (`ceil` overshoots `data-duration` and trips the `gsap_repeat_ceil_overshoot` lint; `max(0, …)` avoids a negative repeat = infinite).
+
+Also avoid:
+
+- Animating anything outside the visual-property allowlist: `opacity`, `x`, `y`, `scale`, `rotation`, `color`, `backgroundColor`, `borderRadius`, and transforms. Never tween `display` or raw `visibility`. GSAP `autoAlpha` is allowed on a registered seekable timeline because it interpolates opacity and changes visibility only at the hidden endpoint. A zero-duration `tl.set(..., { visibility: "hidden" | "visible" })` is also allowed at an explicit beat boundary for a deterministic hard kill. Both exceptions apply only to non-clip elements or wrappers inside a clip. Never target a `.clip` element: HyperFrames timing owns its lifecycle and visibility.
+- Animating the same property on the same element from multiple timelines at the same time — GSAP's overwrite behavior is order-dependent and can flip between renders.
+
+## Layout Contract
+
+Build the visible end-state in static HTML and CSS first, then animate from/to that state.
+
+- The composition root has fixed pixel frame dimensions.
+- **The root composition's total duration (render length / frame count) is fixed at compile time**, read once from the static root `data-duration` before scripts run, like `data-width` / `data-height`. A script or `--variables` value that rewrites the root `data-duration` afterward is ignored. To vary render length per output, author the root `data-duration` directly. (A _clip's_ own `data-duration` is re-read from the live DOM, so scripts/variables can still drive clip lengths. Only when the root omits `data-duration` does the renderer probe the live DOM / timeline for total length.)
+- Scene containers should fill the scene with `width: 100%; height: 100%; box-sizing: border-box`.
+- Use padding, flex, grid, and `max-width` for layout. Avoid positioning main content with hardcoded `top`/`left` offsets when a layout container can do it.
+- Use `position: absolute` for layers and decorative elements, not as the default content-layout strategy.
+- Prefer transforms and opacity for animation.
+- Keep text inside its intended container. For dynamic text, use `max-width`, wrapping, or `window.__hyperframes.fitTextFontSize(text, { maxWidth, fontFamily, fontWeight })`.
+- For text measurement without DOM reflow, use `window.__hyperframes.pretext`: `pretext.prepare(text, font)` then `pretext.layout(prepared, maxWidth, lineHeight)`. Pure arithmetic, ~0.0002 ms per call — safe for per-frame text reflow, shrinkwrap containers, and computing layout before render. `fitTextFontSize` is built on it.
+- **Do not** use `<br>` in body text. Forced breaks ignore the actual rendered font width and produce an extra break when the line already wraps naturally, causing overlap. Let text wrap via `max-width`. Exception: short display titles where each word is deliberately on its own line.
+- **Transformed elements must be block-level + sized.** `transform`/`scaleX`/`scaleY` is a no-op on an inline `<span>`, and scaling an auto-width (0px) element shows nothing → invisible bars/fills. Give them `display: block`/`inline-block`/flex-item **and** a real `width`/`height` (e.g. `width: 100%` inside a sized parent). _(Silent — automated gates may miss it.)_
+- **Absolutely-positioned decoratives that pulse or overshoot** (`yoyo` scale, `back.out`) need clearance at their **peak** size and must not straddle an `overflow: hidden` edge — else they overlap a neighbor or get clipped. Position for the largest frame, not the resting one. _(silent.)_
+
+## Why This Matters
+
+The renderer takes a time value and produces a pixel buffer. There is no notion of "playback" — every frame is a fresh seek. Any state that depends on having reached this frame _through_ a prior frame (timers, accumulated state, event-driven animations) will desync when the renderer samples out of order or in parallel.
+
+If you find yourself reaching for `setTimeout`, `requestAnimationFrame`, or `addEventListener` to drive a visual, rebuild it as a tween on the timeline instead.
diff --git a/.claude/skills-media/hyperframes-core/references/full-screen-motion.md b/.claude/skills-media/hyperframes-core/references/full-screen-motion.md
new file mode 100644
index 000000000..5898485a8
--- /dev/null
+++ b/.claude/skills-media/hyperframes-core/references/full-screen-motion.md
@@ -0,0 +1,62 @@
+# Full-Screen Motion Pattern
+
+For full-frame motion (continuous backgrounds, color washes, full-bleed visual states that span multiple clips), prefer a **shared background layer + transparent timed content layers** over stacked opaque scene backgrounds.
+
+## Why
+
+Stacking opaque scene divs means every scene change has to repaint the entire frame, every cross-scene visual continuity has to be faked, and every "global" state (a hue shift, a vignette, a film grain) has to be duplicated on every scene. A shared background layer driven by the seekable timeline gives you one continuous visual surface and makes scenes themselves cheap and transparent.
+
+## Pattern
+
+```html
+<div id="root" data-composition-id="main" data-width="1920" data-height="1080" data-duration="20">
+  <!-- Shared background — NOT a clip. Always visible. Driven by the timeline. -->
+  <div id="bg" class="full-bleed"></div>
+
+  <!-- Timed content layers — transparent backgrounds. -->
+  <section
+    id="scene1"
+    class="clip transparent"
+    data-start="0"
+    data-duration="6"
+    data-track-index="1"
+  >
+    <!-- content -->
+  </section>
+  <section
+    id="scene2"
+    class="clip transparent"
+    data-start="6"
+    data-duration="14"
+    data-track-index="1"
+  >
+    <!-- content -->
+  </section>
+</div>
+
+<script>
+  window.__timelines = window.__timelines || {};
+  const tl = gsap.timeline({ paused: true });
+
+  // Drive the shared background from the seekable timeline.
+  tl.to("#bg", { backgroundColor: "#0a1530", duration: 6, ease: "sine.inOut" }, 0);
+  tl.to("#bg", { backgroundColor: "#1a0a30", duration: 14, ease: "sine.inOut" }, 6);
+
+  // Scene-local animations stay transparent on top.
+  tl.from("#scene1 h1", { y: 48, opacity: 0, duration: 0.6 }, 0.2);
+
+  window.__timelines["main"] = tl;
+</script>
+```
+
+## Rules
+
+- **The background is not a clip.** No `data-start` / `data-duration` / `data-track-index`. It exists for the whole composition.
+- **Content scenes have transparent backgrounds.** Whatever you put in the shared `#bg` shows through.
+- **Drive global state from the shared layer.** Hue shifts, vignettes, grain, film-look filters — animate them once on the shared layer, not per-scene.
+- **Do not animate visibility on `.clip` elements.** HyperFrames already shows/hides clips based on `data-start` and `data-duration`. Animating `display` / `visibility` on the clip itself races with the framework's own show/hide. Animate a _child wrapper_ inside the clip instead.
+- **Verify intentional overflow with snapshots.** Before adding `data-layout-allow-overflow` to silence an inspect warning, run `npx hyperframes snapshot` and confirm the overflow is what you want.
+
+## When Not to Use This Pattern
+
+If scenes really are visually disjoint — hard cuts between distinct color worlds with no continuity — the stacked-opaque pattern is fine. The shared-background pattern is for compositions where the background **is part of the motion language**, not just backdrop.
diff --git a/.claude/skills-media/hyperframes-core/references/minimal-composition.md b/.claude/skills-media/hyperframes-core/references/minimal-composition.md
new file mode 100644
index 000000000..c38a00ead
--- /dev/null
+++ b/.claude/skills-media/hyperframes-core/references/minimal-composition.md
@@ -0,0 +1,67 @@
+# Minimal Composition
+
+The smallest renderable HyperFrames composition — a standalone (top-level) root with one clip and one tween:
+
+```html
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Minimal HyperFrames Composition</title>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      body {
+        margin: 0;
+        background: #0b0f14;
+        color: white;
+        font-family: Inter, system-ui, sans-serif;
+      }
+      #root {
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+      }
+      .clip {
+        position: absolute;
+        inset: 0;
+        display: grid;
+        place-items: center;
+      }
+      h1 {
+        margin: 0;
+        font-size: 96px;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="main"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="5"
+    >
+      <section id="title-card" class="clip" data-start="0" data-duration="5" data-track-index="1">
+        <h1 id="title">Hello HyperFrames</h1>
+      </section>
+    </div>
+    <script>
+      window.__timelines = window.__timelines || {};
+      const tl = gsap.timeline({ paused: true });
+      tl.from("#title", { y: 48, opacity: 0, duration: 0.6, ease: "power3.out" }, 0.2);
+      window.__timelines["main"] = tl;
+    </script>
+  </body>
+</html>
+```
+
+Required elements:
+
+- Root `<div>` with `data-composition-id`, `data-start="0"`, `data-width`, `data-height`, `data-duration`
+- At least one clip (any element with `data-start`, `data-duration`, `data-track-index`)
+- GSAP timeline created paused, registered on `window.__timelines["<composition-id>"]`
+
+This pattern is **standalone** (top-level `index.html`) — no `<template>` wrapper around the root. For sub-compositions (files loaded by `data-composition-src`), see `sub-compositions.md`.
diff --git a/.claude/skills-media/hyperframes-core/references/production-loop.md b/.claude/skills-media/hyperframes-core/references/production-loop.md
new file mode 100644
index 000000000..be9b4a16b
--- /dev/null
+++ b/.claude/skills-media/hyperframes-core/references/production-loop.md
@@ -0,0 +1,21 @@
+# Production loop — from an approved plan to a delivered video
+
+The stages between a plan the user has agreed to and a video in their hands, written as **dependencies, not numbered steps**: order between independent stages is free — audio renders in the background while frames build; that is the standard trick — order inside a dependency chain is not. Nothing in this file addresses the user: every user-facing pause lives in `review-loop.md`, and this file only marks where those passes attach. Some routes bring their own spine (a beat grid, existing footage) — the stages compose around it. A stage whose need is absent simply doesn't run: no narration, no audio stage; a single scene, no transitions. An edit request enters at the artifact it touches and re-runs verify.
+
+The shipped narrative workflows implement these stages with their own scripts; a freeform build follows this file directly, borrowing tools where the capability menu says they live (`hyperframes/references/capability-menu.md`).
+
+| Stage               | Needs                                                                                                                    | Produces                                                                                                                                                | Where the capability lives                                                                                                                    |
+| ------------------- | ------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------- |
+| **Blocks & assets** | the approved plan                                                                                                        | registry blocks installed **once, before any parallel work** (parallel workers race the registry); user assets staged; logos / images / grades resolved | `npx hyperframes add <block>` per block the plan names; staging, adoption, and `resolve` via the menu's media rows                            |
+| **Audio**           | narration text (when narrated); the storyboard's `music:` mood                                                           | voice files + **word timings** + BGM + SFX → `audio_meta.json`                                                                                          | the one engine — `media-use/audio/scripts/audio.mjs`, run in the background; `wait-bgm.mjs` before render when BGM generates                  |
+| **Frames**          | design spec + the plan (+ a confirmed sketch when one exists — dress that layout, never redraw it: `review-loop.md` § 3) | each scene at `compositions/frames/NN-*.html`, marked `animated` in the storyboard as it lands                                                          | `frame.md` + `hyperframes-animation` blueprints / rules (+ the genre lens, menu § Genre lenses); parallel dispatch per `subagent-dispatch.md` |
+| **Duration sync**   | word timings + frames                                                                                                    | scene durations trued to real voice length — real duration wins, silent scenes keep estimates, synced values are never hand-edited                      | a mechanical rule; the narrative workflows' audio scripts apply it, a freeform build applies it by hand                                       |
+| **Assembly**        | frames                                                                                                                   | the index composition — scenes as sub-compositions on tracks                                                                                            | `sub-compositions.md` + `tracks-and-clips.md`; borrowable `assemble-index.mjs` (menu)                                                         |
+| **Transitions**     | the assembled index                                                                                                      | scene handoffs injected                                                                                                                                 | `hyperframes-animation/transitions/overview.md` → `catalog.md`; borrowable `transitions.mjs` (menu)                                           |
+| **Captions**        | word timings + the index                                                                                                 | the caption track                                                                                                                                       | borrowable `captions.mjs` (menu); no script to time against → `media-use` `scripts/transcribe.mjs` first                                      |
+| **Verify**          | the index (+ captions / transitions when present)                                                                        | `npx hyperframes lint` and `npx hyperframes check` **passing**; a contact-sheet glance (`snapshot --at <frame-midpoints>`)                              | `hyperframes-cli`                                                                                                                             |
+| **Deliver**         | verify passing                                                                                                           | the final-look pause → on approval `render` → optionally `publish` (a stable public link) → the recipe offer                                            | final approval and recipe offer: `review-loop.md` § 4; render / publish: `hyperframes-cli`                                                    |
+
+The Frames stage follows the plan's citations: a scene planned on a blueprint or on named rules is built by reading that recipe's body (`hyperframes-animation/blueprints/<id>.md`, `rules/<id>.md`) before its motion is written — names come from the indexes, never invented, and a scene the plan left uncited gets its citation at build time, not improvised motion.
+
+Two attach points carry the user's voice into this loop: the plan that starts it was approved at `review-loop.md` § 1 (collaborative) or posted as a heads-up (autonomous), and nothing renders before the § 4 final look. Everything between those two is yours to schedule.
diff --git a/.claude/skills-media/hyperframes-core/references/review-loop.md b/.claude/skills-media/hyperframes-core/references/review-loop.md
new file mode 100644
index 000000000..7ae9d5e6d
--- /dev/null
+++ b/.claude/skills-media/hyperframes-core/references/review-loop.md
@@ -0,0 +1,41 @@
+# The review loop — plan, sketch, build
+
+How a `storyboard: yes` run earns fidelity one pass at a time: the plan is reviewed as text on a live board, the layouts as wireframe sketches, and the finished piece as the assembled video. Collaborative mode waits at each checkpoint. Autonomous mode posts the same checkpoint summaries and continues, keeping exactly one question before render.
+
+This is the shared process for any workflow that plans on a storyboard. The contracts it leans on live next door: interaction mode, gate types, and the comments channel in `brief-contract.md`; the `STORYBOARD.md` format, the `outline → built → animated` statuses, and the comments sidecar in `storyboard-format.md`. A workflow's SKILL.md says **when** its steps hit each pass and supplies its **sketch stand-ins** (what the plain blocks represent); how the loop runs is defined here, once. The stage mechanics between the passes — audio, frames, assembly, transitions, captions, verify — live in `production-loop.md`; this file owns only the user-facing pauses.
+
+## § 1 — The plan, on a live board
+
+Open the **storyboard board** before presenting the plan: run `npx hyperframes preview` from the project directory in the background, confirm it is serving, and open `http://localhost:<port>/?view=storyboard#project/<project-name>`. This is an early planning surface, not the final composition preview; it may open before composition checks. The plan appears as frame cards and refreshes as work lands.
+
+Present the plan as a proposal (shape: `hyperframes-creative/references/story-spine.md` § 3): open by echoing **"This video tells [audience] that [message]"**, then the frame table — one row per frame: frame · beat (type, duration) · on screen · why (its `narrativeRole`, traced to the message). Hand the board URL with it, noting feedback lands in both places — comment on the board or reply here, one revision loop — and that a board submit still needs one reply here (anything) to get picked up.
+
+In the same message ask two things: **(a)** approve or request changes, and **(b)** **sketches first** (recommended — a quick wireframe look check right after this approval) or skip sketches and build in one go. Iterate until approved — feedback arrives in chat or as the comments file (`brief-contract.md` § 1, the comments channel): revise exactly the frames it names, clear the file, re-present.
+
+This is a **checkpoint gate** (`brief-contract.md` § 1). A run that starts autonomous normally has `storyboard: no` and does not enter this loop. If mode switches to autonomous after a board exists, keep updating the board, post the same summary as a heads-up, and continue without waiting; the one kept question comes at § 4.
+
+## § 2 — The sketch pass (collaborative, unless skipped)
+
+The moment the plan is approved, wireframe every frame yourself — no sub-agents, no waiting on other steps (sketches don't use timings), straight from the approved frame table.
+
+A sketch is a **wireframe with the real words, not a styled frame**: the frame's layout at its key moment — the actual headline / stat / label text placed where it will live, plain blocks for panels, charts, diagrams, and media (the workflow says what its blocks stand in for), `frame.md`'s background and ink plus one accent on the focal, nothing else. No decoration, no full brand treatment, **no motion** — all of that arrives with the build pass.
+
+Keep each sketch a real composition file at `compositions/frames/NN-*.html` (template wrapper, `data-composition-id`, `#root` styling, one paused **empty** timeline registered at `window.__timelines["<frame_id>"]`) so the Studio poster renders — and the poster is the only picture this pass needs: **run no CLI here** — no `snapshot`, no `lint` / `check`, no rendering. A sketch is a few dozen lines of HTML; the whole board lands in minutes.
+
+Mark each frame `built` as its sketch lands — the user's open board fills in blue by itself. When every frame is `built`, pause and ask one thing: does the board look right, or which frames change? This is a **checkpoint gate**; the user reviews in Studio (open since § 1 — restart and re-hand the same URL if the server died), and feedback arrives in chat or as the comments file — check the file first when the reply arrives: revise **only the sketches named**, re-present, and loop until the layout is confirmed. Only then does the workflow's visual design get written onto the confirmed layouts.
+
+A confirmed board is also a valid place to **stop**. When the user asked for a storyboard rather than a finished video — a plan to pitch, review, or hand off — the sketched board is the deliverable: confirm it, hand the board URL, and go no further unless asked to build.
+
+In autonomous mode, or when the user chose to skip sketches at § 1, skip this pass — frames go straight from `outline` to `animated` in the build.
+
+## § 3 — Building on confirmed layouts
+
+However the workflow builds — sub-agent workers per frame, or inline scene by scene — a confirmed sketch's **composition is settled**: placement, hierarchy, and copy were approved on the board, so building means dressing that layout (full design treatment, real assets, motion), never redrawing it. Workflows that dispatch workers put "this frame has a **confirmed sketch** on disk" in the worker's context and carry the keep-the-layout rule in their worker prompt; a landed frame must still read as the approved wireframe, fully dressed.
+
+Mark each frame `animated` as it lands. The build gate carries the loop's condition: in collaborative mode, the sketch board was confirmed at § 2.
+
+## § 4 — The final look
+
+After the workflow's checks pass, use the **final composition preview**. In collaborative mode Studio may already be serving from § 1; hand the timeline URL and ask one thing: render now, or what changes? In autonomous mode this is the one question the mode keeps: ask “preview first, or render?” Open the final preview on yes; render on an explicit render answer. Render only on approval.
+
+**After approval, offer the recipe — once.** An approved run is a proven bundle. At delivery, offer to freeze it: `media-use` → `scripts/recipe.mjs freeze --name <name>` (the workflow comes from BRIEF.md; pass `--workflow` only in a project without one) keeps the design spec, the storyboard skeleton (structure kept, content blanked), the brief skeleton, and the confirmed brief values, and the next run of this type starts from it (the intent layer checks for a matching recipe before its first question). When the freeze lands, teach the recall in the confirmation — "Saved as **<name>** (v<N>). Next time say _make another <name>_, or just _like last time_." — the name is something the system reminds the user of, never something they must remember. In autonomous mode don't ask — name the freeze command in the delivery note instead.
diff --git a/.claude/skills-media/hyperframes-core/references/script-format.md b/.claude/skills-media/hyperframes-core/references/script-format.md
new file mode 100644
index 000000000..ad2b8ba47
--- /dev/null
+++ b/.claude/skills-media/hyperframes-core/references/script-format.md
@@ -0,0 +1,52 @@
+# `SCRIPT.md` — locked narration (optional)
+
+The **locked narration** for a project: the final spoken lines + voice + delivery. It is an _optional_ plan-layer file — a video with no narration (bgm-only, silent overlay) has none. The storyboard's per-frame `voiceover` is the lighter, editable _guide_; `SCRIPT.md` is the _commit_. (Storyboard format → `references/storyboard-format.md`.)
+
+This file defines the SCRIPT.md **shape** only. Synthesizing the spoken lines into audio is a capability owned by `media-use` → `references/tts.md`.
+
+Free-form markdown — there is no strict parser; the Studio renders it read-only beside the Storyboard board, and the TTS step extracts the indented spoken lines.
+
+## Shape
+
+A header block, then one section per spoken line.
+
+| Part                            | Holds                                                                                                                                   |
+| ------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------- |
+| Header                          | `**Voice:**` (provider + voice), `**Voice settings:**` (e.g. stability / similarity / style), `**Voice direction:**` (overall delivery) |
+| `## Line N — <label> (Frame N)` | one spoken line, tied to its storyboard frame                                                                                           |
+| `**Time:**`                     | the board's rough window — a _guide_, not authoritative (real timing comes from TTS word timestamps)                                    |
+| `**Delivery:**`                 | per-line delivery note                                                                                                                  |
+| indented block                  | the **spoken text** — the only part fed to TTS                                                                                          |
+
+## Example
+
+```markdown
+# SCRIPT — acme-launch
+
+**Voice:** Rachel (ElevenLabs)
+**Voice settings:** stability 0.35 · similarity 0.75 · style 0.20
+**Voice direction:** Confident, warm, a little playful.
+
+---
+
+## Line 1 — Hook (Frame 1)
+
+**Time:** 0.0 – 3.0s
+**Delivery:** Land the promise on the beat.
+
+    Ship a launch video in an afternoon.
+
+## Line 2 — The problem (Frame 2)
+
+**Time:** 3.0 – 7.0s
+**Delivery:** Wry, a touch tired.
+
+    The old way? Prompt, wait twenty minutes, get something that misses.
+```
+
+## To TTS
+
+Feed each line's spoken text to the provider documented in
+`media-use/audio/references/tts.md`. The `hyperframes tts` command is
+Kokoro-only; use its `--voice` flag, or use the bundled HeyGen helper when word
+timestamps are required. Real per-word timing replaces the `**Time:**` guides.
diff --git a/.claude/skills-media/hyperframes-core/references/storyboard-format.md b/.claude/skills-media/hyperframes-core/references/storyboard-format.md
new file mode 100644
index 000000000..a1d5fadef
--- /dev/null
+++ b/.claude/skills-media/hyperframes-core/references/storyboard-format.md
@@ -0,0 +1,127 @@
+# 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. How a workflow _generates_ a storyboard lives in that workflow; the optional narration/TTS file (`SCRIPT.md`) is a separate concern owned by the TTS step, not here.
+
+A storyboard is the **plan layer** for a video — an ordered set of **frames** (key moments) in one markdown file. HyperFrames Studio renders it as a contact sheet (the Storyboard view, available by default in every Studio session). Parser: `@hyperframes/core/storyboard` → `StoryboardManifest`; read API: `GET /api/projects/<id>/storyboard`.
+
+## Frontmatter (global direction)
+
+YAML block at the top. Unknown keys are kept under `globals.extra`.
+
+| Key        | Meaning                                                           | Example                                   |
+| ---------- | ----------------------------------------------------------------- | ----------------------------------------- |
+| `format`   | Canvas size                                                       | `1920x1080`                               |
+| `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 (see `brief-contract.md`; default collaborative) | `autonomous`                              |
+
+## 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`)                                                           |
+| `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` — a workflow carries its own per-frame data (effects, assets, …) here |
+
+## 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? }>
+}
+```
+
+The read API also adds `srcExists` per frame and attaches the optional `SCRIPT.md` payload when present.
+
+## `SCRIPT.md` (out of scope here)
+
+Optional, free-form, **not parsed into the manifest** — the locked-narration file that drives TTS. Its format is defined in `references/script-format.md`, and it is absent for videos with no narration/TTS. The per-frame `voiceover` above is the storyboard's own narration guide.
+
+## Frame comments — `.hyperframes/frame-comments.json`
+
+The storyboard review's **structured feedback channel** — the file Studio's per-frame comment boxes write on submit (chat feedback follows the same rule — `brief-contract.md` § 1, the comments channel). Like `SCRIPT.md`, it is a sibling of the storyboard, not parsed into the manifest.
+
+```json
+{
+  "version": 1,
+  "pass": "sketch",
+  "submitted_at": "2026-07-09T12:04:00Z",
+  "comments": [
+    {
+      "frame": 3,
+      "src": "compositions/frames/03-mechanism.html",
+      "title": "Mechanism",
+      "text": "Swap the bar chart for a before/after slider."
+    }
+  ]
+}
+```
+
+| Field                    | Meaning                                                                                                             |
+| ------------------------ | ------------------------------------------------------------------------------------------------------------------- |
+| `pass`                   | which review the batch belongs to: `storyboard` (text layer) / `sketch` (static frames) / `final` (assembled video) |
+| `comments[].frame`       | the frame's 1-based `index` in the manifest — the key                                                               |
+| `comments[].src` `title` | copied from the frame at submit time — if frames get reordered after submit, the mismatch shows                     |
+| `comments[].text`        | the feedback, verbatim                                                                                              |
+
+Lifecycle — the whole contract: a workflow finding this file at a checkpoint treats it as the revision feedback — **revise exactly the frames named, delete the file, re-present**. Writers create it only on submit; it never lingers across rounds.
+
+## 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."
+- 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. Studio chips it blue.
+- The process that walks these statuses — plan, sketch, build, each pass reviewed on the board — is `review-loop.md`.
+- Multi-line `voiceover` values collapse to one line on save.
diff --git a/.claude/skills-media/hyperframes-core/references/sub-compositions.md b/.claude/skills-media/hyperframes-core/references/sub-compositions.md
new file mode 100644
index 000000000..4b3dd8162
--- /dev/null
+++ b/.claude/skills-media/hyperframes-core/references/sub-compositions.md
@@ -0,0 +1,237 @@
+# Sub-Compositions
+
+A sub-composition is a separate HTML file embedded in a host composition. HyperFrames loads it, seeks it independently, and composites the result into the host at `data-start`.
+
+## Host Wiring
+
+In the host composition, the sub-composition appears as a clip with `data-composition-src`:
+
+```html
+<div
+  id="chart"
+  data-composition-id="data-chart"
+  data-composition-src="compositions/data-chart.html"
+  data-start="2"
+  data-duration="8"
+  data-track-index="2"
+  data-width="1920"
+  data-height="1080"
+></div>
+```
+
+- `data-composition-id` on the host must match the internal `data-composition-id` of the file at `data-composition-src`.
+- The host clip needs its own `data-start`, `data-duration`, `data-track-index`, `data-width`, `data-height`.
+
+## Sub-Composition File Structure
+
+### Mental model — what the runtime actually does
+
+When a host loads a sub-composition via `data-composition-src`, the runtime:
+
+1. `fetch`es the HTML file.
+2. Parses it with `DOMParser`.
+3. **Finds the `<template>` element and clones ONLY its contents into the host slot.**
+4. Everything **outside** the `<template>` (including the entire `<head>`) is **discarded**.
+
+So `<template>` is not just a wrapper — it is the **transport container**. If a node needs to exist in the live render, it must be inside `<template>`. Full stop.
+
+### File shape
+
+```html
+<!doctype html>
+<html>
+  <head>
+    <meta charset="UTF-8" />
+    <!-- head is metadata for the source file only; the runtime ignores it -->
+  </head>
+  <body>
+    <template>
+      <!-- EVERYTHING the runtime needs goes here: styles, markup, scripts -->
+      <style>
+        /* Root: style by #root, never a class. (At render the CSS is scoped to
+           data-composition-id, so a class on the root stops matching — see Pitfall 3.) */
+        #root {
+          position: absolute;
+          inset: 0;
+          color: #fff;
+        }
+        /* .label, #bar, … — descendants, plain selectors */
+      </style>
+
+      <div id="root" data-composition-id="data-chart" data-width="1920" data-height="1080">
+        <!-- sub-composition markup -->
+      </div>
+
+      <script>
+        window.__timelines = window.__timelines || {};
+        const tl = gsap.timeline({ paused: true });
+        // ... build timeline ...
+        window.__timelines["data-chart"] = tl;
+      </script>
+    </template>
+  </body>
+</html>
+```
+
+Contrast with **standalone** compositions, which put the root directly in `<body>` with no `<template>` wrapper.
+
+## Common pitfalls that pass static checks but break at render
+
+Static file checks cannot prove the **cross-file mount contract**. These failures appear only when the runtime mounts the sub-composition. Watch for them at author time and verify with the pre-render snapshot checklist below.
+
+### Pitfall 1 — `<style>` in `<head>` instead of inside `<template>`
+
+```html
+<!-- ❌ WRONG — looks normal, ships catastrophically broken -->
+<head>
+  <style>
+    #root { font-size: 88px; ... }
+  </style>
+</head>
+<body>
+  <template>
+    <div id="root" data-composition-id="data-chart" ...>...</div>
+  </template>
+</body>
+
+<!-- ✅ RIGHT — styles are inside the template, root styled by #root (see Pitfall 3) -->
+<head></head>
+<body>
+  <template>
+    <style>
+      #root { font-size: 88px; ... }
+    </style>
+    <div id="root" data-composition-id="data-chart" ...>...</div>
+  </template>
+</body>
+```
+
+**Why this happens:** standard HTML conventions tell you to put `<style>` in `<head>`. In a standalone HTML file that's correct. In a HyperFrames sub-composition it is **not** — the runtime only clones `<template>` contents, so `<head><style>` is dropped on the floor.
+
+**Symptom:** isolated checks pass and the render completes, but every text element appears as tiny unstyled default text in the top-left and SVGs expand to canvas size because no CSS reached the live DOM. The same trap applies to `<script>` blocks, `<link rel="stylesheet">`, and custom-element registrations: anything that must execute or apply in the render belongs inside `<template>`.
+
+### Pitfall 2 — Host `data-composition-id` ≠ inner template `data-composition-id`
+
+```html
+<!-- ❌ WRONG — host renames the slot; runtime can't find the timeline -->
+<!-- host file (e.g. index.html) -->
+<div data-composition-id="chart-mount" data-composition-src="compositions/chart.html" ...></div>
+
+<!-- chart.html -->
+<template>
+  <div data-composition-id="data-chart" ...>...</div>
+  <script>
+    window.__timelines["data-chart"] = tl;
+  </script>
+</template>
+
+<!-- ✅ RIGHT — both ids match, and the timeline key matches them too -->
+<div data-composition-id="data-chart" data-composition-src="compositions/chart.html" ...></div>
+<!-- chart.html template root: data-composition-id="data-chart" -->
+<!-- timeline: window.__timelines["data-chart"] = tl; -->
+```
+
+**Why this happens:** it feels natural to give the host slot a different name like `chart-mount` ("the mount point") vs `data-chart` ("the actual chart"). HyperFrames does not work that way — **the host's `data-composition-id` is the lookup key the framework uses to find the registered timeline**. Lint passes because each file's ids are individually valid; the cross-file mismatch only blows up at render.
+
+**Symptom:** the render logs `Sub-composition timelines not registered after 45000ms: <host-id>` for every mismatched slot, waits 45s per scene, then captures static initial-state frames (so the video is full-length but no animation plays).
+
+### Pitfall 3 — Styling the root by a class instead of `#root`
+
+```html
+<!-- ❌ WRONG — class on the root, stylesheet keyed off it -->
+<template>
+  <style>
+    .frame {
+      position: absolute;
+      inset: 0;
+      background: #faf9f5;
+    }
+    .frame .title {
+      font-size: 120px;
+    }
+  </style>
+  <div id="root" class="frame" data-composition-id="03-scene" ...>
+    <div class="title">…</div>
+  </div>
+</template>
+
+<!-- ✅ RIGHT — root styled by #root, descendants by plain selectors -->
+<template>
+  <style>
+    #root {
+      position: absolute;
+      inset: 0;
+      background: #faf9f5;
+    }
+    .title {
+      font-size: 120px;
+    }
+  </style>
+  <div id="root" data-composition-id="03-scene" ...>
+    <div class="title">…</div>
+  </div>
+</template>
+```
+
+**Why this happens:** when sub-compositions are inlined into one composited render, the compiler **scopes each file's CSS to its own `data-composition-id`** so scenes can't leak styles into each other — every rule `S` becomes `[data-composition-id="<id>"] S` (a _descendant_ selector). A rule whose leftmost selector is the **root's own class** (`.frame`) therefore becomes `[data-composition-id="<id>"] .frame`, which cannot match the root (the root _is_ the scoped element, not a descendant of it), so **every `.frame…` rule silently drops**. `#root` is special-cased by the scoper and keeps matching the root; plain descendant selectors (`.title`) match normally. The per-scene class namespace is also just redundant — the `data-composition-id` scope already isolates each scene's styles.
+
+**Symptom:** _identical_ to Pitfall 1 — tiny unstyled text in the top-left, images at natural size, inline styles (e.g. a card background) the only thing surviving. The trap: isolated checks or scene previews can look correct because they do not reproduce the final scoped mount; the defect appears in the composited render. Lint rule `subcomposition_root_styled_by_class` flags it; the registry blocks (e.g. `apple-money-count`) model the `#root` pattern.
+
+### Verification checklist before render
+
+```bash
+# For every sub-composition file in compositions/:
+#   1) <style> + <script> + main markup all live INSIDE <template>
+grep -n "<style\|<script\|<template" compositions/<scene>.html
+#      → first <style>/<script>/<div data-composition-id> should be AFTER <template>, before </template>
+
+#   2) host data-composition-id == internal data-composition-id == window.__timelines key
+grep "data-composition-id" index.html
+grep "data-composition-id\|__timelines\[" compositions/<scene>.html
+#      → all three strings must match exactly per scene
+
+#   3) the root is styled by #root, not by a class on the data-composition-id element
+grep -n 'data-composition-id=' compositions/<scene>.html
+#      → that element should NOT also carry a class="…" that the <style> keys off
+#        (e.g. `.frame { … }`); scoping drops it. Style the root via #root. See Pitfall 3.
+```
+
+For the runtime end-to-end check (a fast `snapshot` pass + per-scene frame eyeball), see the **Visual smoke test** step in `hyperframes-cli`'s Minimum Completion Gate — that is the only gate that catches these three pitfalls.
+
+## What HyperFrames Does With the Sub-Composition
+
+- Loads the file and registers its timeline under its internal `data-composition-id`.
+- Seeks the sub-composition's timeline independently from the host's playhead.
+- Plays the sub-composition's content from `data-start` of the host clip, for `data-duration` seconds.
+
+**Do not** manually `master.add(child)` a sub-composition timeline into the host timeline. HyperFrames already drives them independently — nesting them in GSAP causes double-seeks.
+
+### The host clip's `data-duration` is the slot's visible window
+
+`data-duration` on the host clip defines **how long the slot is visible**, and it takes precedence over the sub-composition's internal GSAP timeline length. Two consequences follow:
+
+- **Internal timeline shorter than the slot → the slot holds.** If the sub-composition's GSAP timeline finishes before `data-duration` elapses, the slot keeps showing its final frame for the rest of the window. You do **not** need to pad the timeline with empty tweens.
+- **`data-duration` shorter than the host composition → the slot ends (and goes blank) when its own `data-duration` elapses.** This is intended: the clip is a fixed-length window on the timeline, not "fill until the composition ends." To keep a sub-composition visible for the whole composition, set its `data-duration` to span the host window (or add another clip to cover the remaining time). Leaving a single full-bleed sub-composition shorter than the composition is almost always a mistake — the linter flags it as `subcomposition_blanks_before_host`.
+
+## Animations Inside Sub-Compositions
+
+Prefer `gsap.fromTo()` over `gsap.from()` for entrance tweens. The host re-seeks the sub-composition every time its clip becomes visible; `gsap.from()` records the starting state at registration and can desync on seek-back, while `gsap.fromTo()` declares both endpoints explicitly and replays cleanly.
+
+## Per-Instance Variables
+
+If the sub-composition declares variables on its `<html>` element (`data-composition-variables`), the host can override values per instance:
+
+```html
+<div
+  data-composition-id="data-chart"
+  data-composition-src="compositions/data-chart.html"
+  data-variable-values='{"title":"Q4 Revenue","accent":"#66d9ef"}'
+  data-start="2"
+  data-duration="8"
+  data-track-index="2"
+  data-width="1920"
+  data-height="1080"
+></div>
+```
+
+The host can render the same sub-composition multiple times with different `data-variable-values` to produce per-instance variations. See `variables-and-media.md` for variable declaration syntax.
diff --git a/.claude/skills-media/hyperframes-core/references/subagent-dispatch.md b/.claude/skills-media/hyperframes-core/references/subagent-dispatch.md
new file mode 100644
index 000000000..506a8fb90
--- /dev/null
+++ b/.claude/skills-media/hyperframes-core/references/subagent-dispatch.md
@@ -0,0 +1,41 @@
+# Subagent dispatch — harness adapter
+
+The video workflows (`product-launch-video` / `faceless-explainer` / `pr-to-video` / `motion-graphics` / `general-video`) describe subagent dispatch in harness-neutral verbs. This file maps those verbs to the primitives of whatever agent harness you are running on. Read it once per run, before the first dispatch; everything else in the workflows (dispatch packets, file artifacts, exit-code gates, Resume tables) is harness-independent and needs no translation.
+
+## The contract (identical on every harness)
+
+- **DISPATCH(role_file, dispatch_context)** — start one child agent whose prompt is the **full contents of the named `agents/<role>.md` file** followed by the `## Dispatch context` block from the workflow, copied **verbatim** (never digested or paraphrased). Every harness below accepts arbitrary task text, so this works everywhere; never rely on the child seeing your conversation, memory, or skills — the prompt and the files on disk are its entire world.
+- **Parallel fan-out** — when a step says "start N workers in parallel", the workers are mutually independent (no ordering, no shared state beyond the filesystem). Run as many concurrently as your harness allows.
+- **WAIT** — a step's completion criterion is always **the expected artifact existing on disk** (e.g. `compositions/<scene-id>.html`), never the harness's completion notification (some harnesses deliver results best-effort). After waiting, verify the artifacts; a missing artifact means that child failed — re-dispatch it once with the same prompt before surfacing an error.
+
+## Concurrency cap → batching rule (cap never changes scope)
+
+A harness concurrency limit **reduces parallelism, not work**: every scene still gets built, one scene per dispatch, with the available slots chewing through the full list.
+
+- Harness queues excess children internally (Claude Code; Hermes `delegate_task` beyond `max_concurrent_children`) → submit **all N at once** and let the queue drain.
+- Harness hard-caps active children (e.g. OpenClaw `maxChildrenPerAgent`) → dispatch in **waves of the cap size**: start `cap` workers, wait for their artifacts, start the next wave, until all N scenes exist. Example: 9 scenes on a cap-3 harness = 3 waves of 3 — never drop scenes, never merge scenes into one worker to fit the cap.
+
+## Primitive map
+
+| Verb in the workflows            | Claude Code                                                         | Codex CLI                                                                                   | OpenClaw                                                                               | Hermes Agent                                                                                                   |
+| -------------------------------- | ------------------------------------------------------------------- | ------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- |
+| DISPATCH                         | `Agent` tool, `subagent_type: "general-purpose"`                    | `spawn_agent` (built-in `worker` role; prompt carries the role file)                        | `sessions_spawn` (role file rides in `task`; child only auto-loads AGENTS.md/TOOLS.md) | `delegate_task` — put role file + context into each task's `context` (child system prompt is not customizable) |
+| parallel fan-out                 | multiple Agent calls in one message, each `run_in_background: true` | multiple `spawn_agent` calls (async by design) or `spawn_agents_on_csv` for uniform batches | repeated `sessions_spawn` (always non-blocking)                                        | one `delegate_task(tasks=[...])` batch call                                                                    |
+| WAIT                             | background-task completion notifications arrive automatically       | `wait_agent` with all child IDs                                                             | `sessions_yield` (never poll session lists)                                            | `delegate_task` returns when all tasks finish (blocking the turn is normal)                                    |
+| default concurrency              | min(16, cores − 2), excess queues                                   | 6 (`agents.max_threads`)                                                                    | 5 active per session, 8 global                                                         | 3 (`delegation.max_concurrent_children`)                                                                       |
+| re-dispatch after a gate failure | new Agent call, same prompt + the error/`## Repair context`         | new `spawn_agent`, same prompt + the error                                                  | new `sessions_spawn`, same `task` + the error                                          | new `delegate_task`, same `context` + the error                                                                |
+
+Harness-specific notes:
+
+- **Codex**: children inherit the parent cwd and cannot change it — exactly what these pipelines need (shared `PROJECT_DIR`). Prefer prompt-carried roles over `.codex/agents/*.toml` registration; the workflows already deliver roles in the prompt. **Codex policy-gates spawning on the user explicitly requesting delegation — a skill instruction alone does not satisfy it, and you will be tempted to skip the tool without even trying.** Do not silently degrade: on Codex, if the user has not granted delegation this session, **ask one line** — "OK to run this workflow's workers as parallel subagents?" — **folded into the workflow's first existing user pause** (e.g. the API-key question) so the run pauses only once; at the latest, before the first dispatch step. An affirmative — or a standing grant in the workspace `AGENTS.md` or the kickoff prompt — unlocks native dispatch for the whole session. Only without a grant: prefer ladder rung 1 below (headless `codex exec` children) for the scene fan-out; inline serial is the last resort.
+- **OpenClaw**: result announcement is best-effort (lost on gateway restart) — the artifact-on-disk WAIT rule above is the source of truth, not the announce message.
+- **Hermes**: children get a fresh conversation and only see what you put in `context`, and only the final summary returns — both already match the workflows' design (dispatch packets carry everything; results land on disk). Requires a **local execution backend** (the pipelines exchange data through `PROJECT_DIR` and packet files on the shared filesystem; Docker/remote backends break that).
+- **Any other harness**, or subagents unavailable/disabled — degrade down this ladder:
+  1. Headless CLI children: write each child prompt to a file, start the CLI per worker as a background shell process (redirect stdin from /dev/null, output to a log), then collect artifacts from disk.
+  2. Inline serial execution: do each role yourself, one at a time — read the role file, follow it with the dispatch context as if you were the child, finish, then return to the runbook. Load only one role's resources at a time (a scene's role file + its packet), and still run every per-role self-check before moving on.
+
+## Vocabulary mapping (older phrasing you may meet in agent prompts)
+
+- "in the same message" / `run_in_background: true` — Claude Code idioms for "concurrently / as a background child"; apply your harness's equivalent from the table.
+- "Skill `X`" / "loaded with the Skill tool" — load skill X; on harnesses without a skill-loading tool, read `<skills-root>/X/SKILL.md` directly (the skills root is the directory containing this skill family; derive it from `SKILL_DIR` in your dispatch context).
+- `Read` / `Write` / `Edit` / `Bash` — capability names (read file / write file / edit in place / run shell); map to your harness's tools.
diff --git a/.claude/skills-media/hyperframes-core/references/tailwind.md b/.claude/skills-media/hyperframes-core/references/tailwind.md
new file mode 100644
index 000000000..715451e49
--- /dev/null
+++ b/.claude/skills-media/hyperframes-core/references/tailwind.md
@@ -0,0 +1,123 @@
+# HyperFrames Tailwind
+
+HyperFrames `init --tailwind` uses the Tailwind browser runtime pinned by the scaffold. Treat it as Tailwind v4, not Studio's Tailwind v3 setup.
+
+## When To Use
+
+- The project was scaffolded with `npx hyperframes init --tailwind`.
+- `index.html` contains `window.__tailwindReady`.
+- The task asks for Tailwind utility classes, `@theme`, custom utilities, or v3-to-v4 fixes in a composition.
+- Rendered frames have missing Tailwind styles or frame-0 flashes.
+
+## Version Contract
+
+- **Pinned: `@tailwindcss/browser@4.2.4`** (source of truth: `packages/cli/src/commands/init.ts` `TAILWIND_BROWSER_VERSION`).
+- Do not replace the scaffolded runtime with `cdn.tailwindcss.com` (unpinned, defeats reproducibility).
+- Keep the readiness shim deterministic; HyperFrames waits for `window.__tailwindReady` before frame 0 capture.
+- For offline / locked-down / production-stable renders, compile Tailwind to CSS and ship the stylesheet instead of the browser runtime.
+
+## v4 Browser Runtime Rules
+
+Tailwind v4 is CSS-first:
+
+```html
+<style type="text/tailwindcss">
+  @theme {
+    --color-brand: oklch(0.68 0.2 252);
+    --font-display: "Inter", sans-serif;
+  }
+
+  @utility headline-balance {
+    text-wrap: balance;
+    letter-spacing: 0;
+  }
+</style>
+```
+
+Avoid v3-only patterns in browser-runtime compositions:
+
+```css
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+```
+
+Do not add `tailwind.config.js` only for composition colors, fonts, spacing, or utilities. Use `@theme` and `@utility`.
+
+**Migrating from v3?** Load an existing JS config explicitly: put `@config "./tailwind.config.js";` inside a `text/tailwindcss` block. v4 does **not** auto-detect v3 config files.
+
+## Composition Pattern
+
+Use Tailwind for static layout and style. Keep render-critical timing in GSAP or another seekable HyperFrames adapter.
+
+```html
+<section
+  id="hero"
+  class="clip absolute inset-0 grid place-items-center bg-zinc-950 text-white"
+  data-start="0"
+  data-duration="5"
+  data-track-index="1"
+>
+  <div class="w-[1280px] max-w-[82vw] text-center">
+    <h1 class="text-7xl font-black leading-none text-balance">Render-ready Tailwind</h1>
+  </div>
+</section>
+```
+
+For repeated items, **parameterize via CSS variables** — keep the class list static so the runtime sees every utility:
+
+```html
+<span class="translate-y-[calc(var(--i)*6px)] opacity-80" style="--i: 0"></span>
+<span class="translate-y-[calc(var(--i)*6px)] opacity-80" style="--i: 1"></span>
+<span class="translate-y-[calc(var(--i)*6px)] opacity-80" style="--i: 2"></span>
+```
+
+## Dynamic Class Safety
+
+The browser runtime scans classes it can see. Do not build render-critical class names only at seek time:
+
+```js
+// Risky: the runtime may never see every generated class.
+element.className = `bg-${color}-500`;
+```
+
+Prefer complete class tokens in HTML, data variants, or explicit CSS:
+
+```html
+<div data-tone="blue" class="bg-blue-500 data-[tone=rose]:bg-rose-500"></div>
+```
+
+If a generated class is unavoidable, make sure the full class token appears in a `text/tailwindcss` block before validation.
+
+## Video-Specific Guardrails
+
+v4 + render-mode footguns. Every bullet is a hard rule:
+
+- **Stable dimensions only** — use `w-[…]` / `h-[…]` / `aspect-video` / grid / flex. **No `md:` / `lg:` breakpoints** (renderer is fixed-viewport).
+- **Animate via transforms / opacity** — `translate-*`, `scale-*`, `opacity-*` are seek-safe; animating Tailwind sizing utilities is not.
+- **No `transition-*` for render-critical motion** — a seekable runtime (GSAP) must own the state.
+- **No interaction variants** — `hover:` / `focus:` / `active:` / `group-*:` / `peer-*:` / scroll / pointer variants never fire during render.
+- **Bare `border` is broken in v4** — v4 default is `currentColor` (v3 was `gray-200`). Always write the color: `border border-white/20`.
+- **v4 utility renames** — `shadow-sm` → `shadow-xs`, `rounded-sm` → `rounded-xs`, `outline-none` → `outline-hidden`, `flex-shrink-*` → `shrink-*`, `flex-grow-*` → `grow-*`.
+- **Modern CSS is fine** — `color-mix()`, container queries, logical properties work; the renderer is current Chrome.
+
+## Validation
+
+```bash
+npx hyperframes check
+
+# Render proof — frame 0 must NOT flash unstyled content. Preview alone can hide this.
+npx hyperframes render . --workers 1 --quality draft --output tailwind-proof.mp4
+```
+
+## Quick Debug Checklist
+
+When Tailwind styles don't apply in a render, check in order:
+
+1. Project scaffolded with `npx hyperframes init --tailwind`?
+2. `index.html` `<head>` has `<script src="…@tailwindcss/browser@4.2.4…">` (not `cdn.tailwindcss.com`)?
+3. `window.__tailwindReady` Promise present in `<head>`?
+4. No v3 directives (`@tailwind base/components/utilities`) in the file?
+5. Tokens moved from `tailwind.config.js` to `@theme` (or `@config` reference for v3 migration)?
+6. Every render-critical class appears as a complete static token (no `bg-${color}-500` style assembly)?
+7. Re-run `npx hyperframes check`, then the render proof above.
diff --git a/.claude/skills-media/hyperframes-core/references/tracks-and-clips.md b/.claude/skills-media/hyperframes-core/references/tracks-and-clips.md
new file mode 100644
index 000000000..991135a95
--- /dev/null
+++ b/.claude/skills-media/hyperframes-core/references/tracks-and-clips.md
@@ -0,0 +1,76 @@
+# Tracks and Clips
+
+Clips are timed children of the composition root. Tracks are a temporal-overlap concept, not a visual-stacking concept.
+
+## What is a Clip
+
+A clip is any DOM element with `data-start`, `data-duration` (where required), and `data-track-index`. Common kinds:
+
+- **Visual `<div>` clips** — scenes, cards, overlays. Always require `data-duration`.
+- **Sub-composition hosts** — `<div>` with `data-composition-src`. Always require `data-duration`.
+- **Video clips** — `<video>` with `muted` and `playsinline`. Duration can default to media length.
+- **Audio clips** — `<audio>`. Duration can default to media length.
+- **Image clips** — `<img>`. Always require `data-duration`.
+
+Add `class="clip"` to authored visual clips so tooling and examples can find them.
+
+## Tracks Are Temporal, Not Visual
+
+`data-track-index` controls **temporal overlap**, not paint order:
+
+- **Two clips on the same `data-track-index`** must NOT overlap in time. `hyperframes lint` flags this.
+- **Visual layering (front/back)** is controlled by CSS `z-index`, not by track index.
+
+A clip on track `5` is not "above" a clip on track `1` — it's just on a different audio/visual lane in time. Use CSS for layering, tracks for sequencing.
+
+## Picking a Track Index
+
+There's no fixed convention, but common patterns:
+
+- **Track 0** — base video (e.g. an A-roll).
+- **Track 1+** — visual scenes, overlays, captions.
+- **Higher tracks (e.g. 10+)** — audio clips, separated from visual tracks to keep linting clear.
+
+When adding a new clip to an existing composition:
+
+1. Find an existing track that has no overlap with your new clip's `[data-start, data-start + data-duration)` range.
+2. Or pick a fresh track index.
+3. Never overlap two clips on the same track — the linter will fail and the render is undefined.
+
+## Clip Time Inside the Composition
+
+`data-start` is in seconds, measured from the start of the _composition_. For sub-compositions, the sub-composition's internal timeline (its own `data-duration` and child clips) runs from `data-start` to `data-start + data-duration` of the host.
+
+`data-media-start` (on `<video>`/`<audio>`) is an offset _into the source media_. Use it to skip the first few seconds of a media file without trimming the file itself.
+
+## Relative Timing
+
+`data-start` accepts a clip ID instead of a number, meaning "start when that clip ends". Add `+ N` / `- N` to offset; negative produces overlap (useful for crossfades).
+
+```html
+<video id="intro" data-start="0" data-duration="10" data-track-index="0" src="..."></video>
+<video id="main" data-start="intro" data-duration="20" data-track-index="0" src="..."></video>
+<video
+  id="scene-a"
+  data-start="intro + 2"
+  data-duration="20"
+  data-track-index="0"
+  src="..."
+></video>
+<video
+  id="scene-b"
+  data-start="intro - 0.5"
+  data-duration="20"
+  data-track-index="1"
+  src="..."
+></video>
+```
+
+Rules:
+
+- References resolve **inside the same composition only** — cannot reach into a parent or sibling sub-composition.
+- The referenced clip must have a **known duration** (explicit `data-duration` or inferred from media). Otherwise the reference cannot resolve.
+- **No circular references** — `A → B → A` is rejected. Cycles are detected and error out.
+- A value that parses as a number is always treated as absolute seconds. Otherwise the resolver expects `<id>`, `<id> + <number>`, or `<id> - <number>` (whitespace optional).
+- References can chain (`A → B → C`). Keep chains under 3-4 levels for readability.
+- Negative offsets create overlap; overlapping clips must be on **different tracks**, same-track overlap is rejected.
diff --git a/.claude/skills-media/hyperframes-core/references/variables-and-media.md b/.claude/skills-media/hyperframes-core/references/variables-and-media.md
new file mode 100644
index 000000000..4a4319110
--- /dev/null
+++ b/.claude/skills-media/hyperframes-core/references/variables-and-media.md
@@ -0,0 +1,109 @@
+# Variables and Media
+
+Two separate concerns, grouped because both control "what flows in from outside the HTML": runtime parameters (variables) and external media files (video/audio).
+
+## Variables
+
+Declare variables on the `<html>` element with `data-composition-variables`. Each declaration needs `id`, `type`, `label`, and `default`:
+
+```html
+<html
+  data-composition-variables='[
+    {"id":"title","type":"string","label":"Title","default":"Hello"},
+    {"id":"accent","type":"color","label":"Accent","default":"#66d9ef"}
+  ]'
+></html>
+```
+
+**Prefer declarative bindings — no script needed** for direct substitution:
+
+```html
+<img class="clip" data-start="0" data-duration="5" data-var-src="heroImage" src="fallback.jpg" />
+<h1 class="clip" data-start="0" data-duration="5" data-var-text="title">Fallback</h1>
+<style>
+  .card {
+    color: var(--accent);
+  }
+</style>
+```
+
+- `data-var-src="id"` substitutes the element's `src` (URL string or image `{url}`); the authored `src` is the fallback.
+- `data-var-text="id"` substitutes the element's own text; element children (nested clips, animated spans) are preserved.
+- Every scalar variable is applied automatically as a `--{id}` CSS custom property on the composition root, so `var(--id)` CSS responds to overrides — no `setProperty` boilerplate.
+- Bindings resolve identically in preview and render, and per-instance for sub-compositions.
+- Caveat: media with audio should keep a real fallback `src` — render audio extraction reads the authored attribute (lint: `media_variable_src_no_fallback`).
+
+For logic beyond direct substitution (loops, conditionals, derived values), read values once during initialization:
+
+```js
+const { title, accent } = window.__hyperframes.getVariables();
+document.getElementById("title").textContent = title;
+```
+
+### Variable Rules
+
+- Supported types and their extra options (consumed by Studio's editing UI):
+  - `string` — optional `placeholder`, `maxLength`
+  - `number` — optional `min`, `max`, `step`, `unit`
+  - `color` — none
+  - `boolean` — none
+  - `enum` — **required** `options: [{ "value": "...", "label": "..." }, ...]`
+- Always provide useful `default` values so preview works without CLI overrides.
+- Use `data-variable-values='{"title":"Pro"}'` on sub-composition hosts for per-instance overrides.
+- Use `npx hyperframes render --variables '{"title":"Q4 Report"}'` or `--variables-file` for render-time overrides.
+- Add `--strict-variables` in CI: turns undeclared keys, type mismatches, and enum values not in `options` into errors instead of warnings.
+- Read values once during init, not on every animation tick — variables don't change mid-render.
+- Media color grading can use exact variable references inside `data-color-grading` JSON. Use `$gradingPreset` or `${gradingIntensity}` as the whole field value; the runtime resolves it from the current composition's variables before applying shader adjustments, finishing details, blur/pixelate effects, and custom LUTs.
+
+### Two JSON Shapes (Easy to Confuse)
+
+- `data-composition-variables` is an **array of declarations** (the schema): `[{id, type, label, default}, ...]`
+- `--variables` and `data-variable-values` are **objects keyed by id** (the values): `{ title: "Q4", accent: "#fff" }`
+
+## Media
+
+**NON-NEGOTIABLE: `<video>`/`<audio>` must be a DIRECT child of the host composition root (`index.html`).** The runtime only registers + drives media that is a direct root child. Media placed inside a sub-composition `<template>`, or wrapped in any intermediate `<div>`, is never seeked/decoded → renders blank (paper/white) or black. Do not rely on `lint` or `check` alone; a per-frame `snapshot` reveals the blank panel.
+
+Consequences:
+
+- A scene-specific clip still lives at the host root, not in the scene's sub-comp. The sub-comp keeps only the frame/shell; the media is a sibling host element positioned over it.
+- A sub-composition **cannot reach or animate host elements** — neither `document.querySelector("#host-id")` nor a gsap selector string (`tl.to("#host-id", …)`) resolves across the boundary; a sub-comp timeline only drives its own subtree. So **all per-scene motion on host media (scale/opacity/morph/tilt/breathing) must be authored on the MAIN timeline in `index.html`, at GLOBAL time** (scene-local time + the scene slot's `data-start`). For 3D tilt without a perspective parent, use gsap `transformPerspective` on the element. See `composition-patterns.md` archetype B.
+
+Video elements must be muted and inline. Audio must be a separate `<audio>` element, even when it uses the same source file.
+
+```html
+<video
+  id="a-roll"
+  class="clip"
+  src="assets/demo.mp4"
+  data-start="0"
+  data-duration="12"
+  data-track-index="0"
+  muted
+  playsinline
+></video>
+
+<audio
+  id="a-roll-audio"
+  src="assets/demo.mp4"
+  data-start="0"
+  data-duration="12"
+  data-track-index="10"
+  data-volume="1"
+></audio>
+```
+
+### Media Rules
+
+- **Do not** call `video.play()`, `audio.play()`, pause, or seek in composition code. HyperFrames owns playback.
+- **Do not** place media inside a sub-comp `<template>` or any wrapper `<div>` — direct host-root child only (see above), else it never decodes.
+- **Do not** drive host media from a sub-comp timeline — it has no effect. Drive it from the main timeline at global time.
+- **Do not** animate timed media element dimensions; animate a non-timed wrapper instead.
+- **Do not** nest video inside a timed wrapper. Put timing on the media element or keep the wrapper untimed.
+- Add `crossorigin="anonymous"` for external media that needs canvas capture or pixel inspection.
+- Audio always lives on a separate `<audio>` element — even if its source file is the same as a `<video>`. The `<video>` is muted; the `<audio>` carries sound.
+- For volume fades/ducking, animate `volume` on the timeline (`tl.to("#bgm", { volume: 0, duration: 1 }, "outro")`) rather than swapping `data-volume`. The runtime probes the timeline's volume keyframes and applies them identically in preview and render; `data-volume` is the static baseline for elements no tween touches.
+
+For media duration: `<video>` and `<audio>` can omit `data-duration` if the media's intrinsic length is known and you want the full clip. Otherwise provide `data-duration` explicitly.
+
+Input codecs: render decodes video via FFmpeg (frames are pre-extracted and injected), so HEVC/H.265 assets (8/10-bit) render correctly everywhere; live preview auto-proxies any browser-hostile asset (transcodes and caches an H.264 copy on first use, opt out with `--no-proxy` or `media.autoProxy: false`), and `lint` emits an info-level `hevc_preview_codec` note naming affected assets.
diff --git a/.claude/skills-media/hyperframes-creative/SKILL.md b/.claude/skills-media/hyperframes-creative/SKILL.md
new file mode 100644
index 000000000..293067cba
--- /dev/null
+++ b/.claude/skills-media/hyperframes-creative/SKILL.md
@@ -0,0 +1,71 @@
+---
+name: hyperframes-creative
+description: Non-animation creative direction for HyperFrames videos. Use for design spec (frame.md / design.md) handling, palettes, typography, narration, beat planning, audio-reactive visuals, composition patterns, and brand / style decisions. For atomic motion patterns and scene blueprints, use `hyperframes-animation`.
+---
+
+# HyperFrames Creative
+
+Brand, pacing, style, narration, and composition direction. Use after the technical contract from `hyperframes-core` is in place.
+
+For motion patterns, scene blueprints, transitions, and CSS marker effects, use `hyperframes-animation` — this skill is intentionally non-animation.
+
+> **Read these two FIRST for any non-trivial composition — they override web instincts:**
+>
+> - `references/house-style.md` — "interpret the prompt, generate real content," the lazy-default list, and the background/foreground layer recipe. This is what turns a literal restyle into a _concept_.
+> - `references/video-composition.md` — video-medium scale, depth, and foreground detail. It explains how to avoid empty web-page layouts without imposing a universal element count.
+>
+> Skipping these is the single biggest cause of generic, web-page-looking output. They are not optional rows in the routing table below — for anything beyond a one-line edit, open both before you choose colors or write HTML.
+
+## Workflow
+
+1. If a project has a design spec, **read it first** and treat its frontmatter tokens as brand truth (colors, fonts, spacing, tone, constraints). Which file to read (precedence `frame.md` → `design.md` → `DESIGN.md`) and how to parse it (frontmatter = normative, prose = context) are defined once in [`references/design-spec.md`](references/design-spec.md) — resolve and load per that doc.
+2. If no design spec exists and the user asks for visual direction, choose a route:
+   - Ready-made frame-preset (optional) → `frame-presets/` (adopt a `FRAME.md` as `frame.md`; see `references/design-spec.md`)
+   - Named style or mood → `references/visual-styles.md`
+   - Fast defaults → `references/house-style.md`
+   - Interactive selection → `references/design-picker.md`
+3. For multi-scene work, plan beats and rhythm before writing HTML → `references/beat-direction.md`. For scene transitions, jump to `hyperframes-animation/transitions/`.
+4. For motion-heavy work, read `references/motion-principles.md` (high-level guardrails), then go to `hyperframes-animation` for atomic rules.
+
+## Routing
+
+| Topic                                                                         | Read                                           |
+| ----------------------------------------------------------------------------- | ---------------------------------------------- |
+| Adopt a ready-made frame-preset as `frame.md` (optional)                      | `frame-presets/` · `references/design-spec.md` |
+| Default palettes, motion, typography, lazy defaults to question               | `references/house-style.md`                    |
+| Named style presets, mood-to-style routing                                    | `references/visual-styles.md`                  |
+| Palette-specific color tokens                                                 | `palettes/*.md`                                |
+| Composition patterns — PiP, text-behind-subject, title card, slide show       | `references/composition-patterns.md`           |
+| Stats / infographic presentation                                              | `references/data-in-motion.md`                 |
+| Structured expansion for open-ended prompts                                   | `references/prompt-expansion.md`               |
+| Video-medium density, scale, color, frame composition                         | `references/video-composition.md`              |
+| Per-beat direction, rhythm planning, transition timing                        | `references/beat-direction.md`                 |
+| Post-authoring spec verification (colors, type, corners, spacing, depth)      | `references/design-adherence.md`               |
+| High-level motion guardrails and GSAP-quality rules                           | `references/motion-principles.md`              |
+| Font selection, pairings, rendered-video type guardrails                      | `references/typography.md`                     |
+| Story doctrine — hook language, value-before-evidence, storyboard-as-proposal | `references/story-spine.md`                    |
+| Script pacing, tone, openings, number pronunciation                           | `references/narration.md`                      |
+| Precomputed audio bands mapped to motion                                      | `references/audio-reactive.md`                 |
+
+## Scripts
+
+- `scripts/contrast-report.mjs` — inspect contrast warnings from rendered frames.
+- `scripts/extract-audio-data.py` — pre-extract audio bands for audio-reactive compositions.
+- `scripts/package-loader.mjs` — support script for bundled creative tooling.
+
+`contrast-report.mjs` resolves helper packages from the current project first, then can bootstrap the bundled HyperFrames package version. Set `HYPERFRAMES_SKILL_PKG_VERSION=<version>` only when running the skill outside the bundled CLI/skill install and you need to pin that bootstrap version explicitly.
+
+Run from the repo root with explicit paths, for example:
+
+```bash
+python skills/hyperframes-creative/scripts/extract-audio-data.py <audio-file>
+```
+
+Animation analysis (`animation-map.mjs`) lives in `hyperframes-animation/scripts/`.
+
+## Boundaries
+
+- Do not override `hyperframes-core` technical rules.
+- Do not require a design system for a minimal technical composition.
+- Do not add extra scenes, narration, music, captions, or transitions unless the request calls for them or you first propose the expansion.
+- Keep recipe references task-specific; do not read every reference for simple edits.
diff --git a/.claude/skills-media/hyperframes-creative/frame-presets/biennale-yellow/FRAME.md b/.claude/skills-media/hyperframes-creative/frame-presets/biennale-yellow/FRAME.md
new file mode 100644
index 000000000..c082ea2fe
--- /dev/null
+++ b/.claude/skills-media/hyperframes-creative/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-media/hyperframes-creative/frame-presets/biennale-yellow/caption-skin.html b/.claude/skills-media/hyperframes-creative/frame-presets/biennale-yellow/caption-skin.html
new file mode 100644
index 000000000..8ca668456
--- /dev/null
+++ b/.claude/skills-media/hyperframes-creative/frame-presets/biennale-yellow/caption-skin.html
@@ -0,0 +1,221 @@
+<!--
+  Biennale Yellow — caption skin (preset-local source).
+
+  This is the preset's own lower-third karaoke caption look. product-launch-video's
+  Step 2 copies it into the project as caption-skin.html; captions.mjs then fills the
+  three reserved holes, wraps the fragment in a <template>, and writes
+  compositions/captions.html:
+    · the empty GROUPS array            → the engine's scene-aware word groups
+    · the 0 duration + 0 width/height   → real total + canvas size
+    · the empty data-brand-tokens style → :root tokens derived from the project's frame.md
+
+  Token contract — reference ONLY this fixed vocab (captions.mjs injects it from
+  frame.md, so the Step-2 brand overlay flows through; each var has a 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>
+
+<!-- captions.mjs injects the project's :root tokens here -->
+<style data-brand-tokens></style>
+
+<style>
+  #captions-root {
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+  }
+  .caption-layer {
+    position: absolute;
+    inset: 0;
+    z-index: 20;
+    pointer-events: none;
+  }
+  /* the keep-out band, from captionBand(H) — frame content stays above it */
+  .caption-stage {
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: var(--cap-band-top, 900px);
+    height: var(--cap-band-height, 180px);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .caption-group {
+    /* every group is absolutely stacked over the SAME band — exactly one shown at a
+       time via opacity. Must be absolute: in-flow groups would lay out side-by-side. */
+    position: absolute;
+    inset: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    opacity: 0;
+  }
+
+  /* THE 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>
+  // captions.mjs injects the engine's scene-aware groups + real duration here.
+  var GROUPS = [];
+  var DURATION = 0;
+
+  (function () {
+    var stage = document.getElementById("caption-stage");
+
+    // build DOM: one .caption-group per group, .caption-word per word
+    GROUPS.forEach(function (group, g) {
+      var groupEl = document.createElement("div");
+      groupEl.className = "caption-group";
+      groupEl.id = "caption-group-" + g;
+      var pill = document.createElement("div");
+      pill.className = "caption-pill";
+      var line = document.createElement("div");
+      line.className = "caption-line";
+      (group.words || []).forEach(function (w, i) {
+        var span = document.createElement("span");
+        span.className = "caption-word";
+        span.id = "caption-word-" + g + "-" + i;
+        span.textContent = String(w.text);
+        line.appendChild(span);
+      });
+      pill.appendChild(line);
+      groupEl.appendChild(pill);
+      stage.appendChild(groupEl);
+    });
+
+    window.__timelines = window.__timelines || {};
+    var tl = gsap.timeline({ paused: true });
+
+    GROUPS.forEach(function (group, g) {
+      var groupEl = document.getElementById("caption-group-" + g);
+      var words = group.words || [];
+      var next = GROUPS[g + 1];
+      var isLast = g === GROUPS.length - 1;
+      var start = Math.max(0, Number(group.start));
+      var end = isLast ? DURATION : Math.min(Number(next.start), Number(group.end) + 0.3);
+      if (end <= start) end = start + 0.01;
+
+      // group on/off — exactly one group visible at a time
+      tl.set(groupEl, { opacity: 1 }, start);
+      tl.set(groupEl, { opacity: 0 }, end);
+
+      // 3-state karaoke via className SETS — seek-safe (gsap.set applies on the
+      // engine's frame-by-frame seek; .call callbacks would NOT fire).
+      words.forEach(function (w, i) {
+        var el = document.getElementById("caption-word-" + g + "-" + i);
+        var at = Math.max(start, Number(w.start));
+        tl.set(el, { className: "caption-word" }, start); // upcoming (also resets on reverse-seek)
+        tl.set(el, { className: "caption-word is-active" }, at); // current
+        tl.fromTo(el, { scale: 0.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-media/hyperframes-creative/frame-presets/biennale-yellow/frame-showcase.html b/.claude/skills-media/hyperframes-creative/frame-presets/biennale-yellow/frame-showcase.html
new file mode 100644
index 000000000..186f8252a
--- /dev/null
+++ b/.claude/skills-media/hyperframes-creative/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-media/hyperframes-creative/frame-presets/blockframe/FRAME.md b/.claude/skills-media/hyperframes-creative/frame-presets/blockframe/FRAME.md
new file mode 100644
index 000000000..00e4d8831
--- /dev/null
+++ b/.claude/skills-media/hyperframes-creative/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-media/hyperframes-creative/frame-presets/blockframe/caption-skin.html b/.claude/skills-media/hyperframes-creative/frame-presets/blockframe/caption-skin.html
new file mode 100644
index 000000000..f0cdb26fd
--- /dev/null
+++ b/.claude/skills-media/hyperframes-creative/frame-presets/blockframe/caption-skin.html
@@ -0,0 +1,224 @@
+<!--
+  BlockFrame — caption skin (preset-local source).
+
+  This is the preset's own lower-third karaoke caption look. product-launch-video's
+  Step 2 copies it into the project as caption-skin.html; captions.mjs then fills the
+  three reserved holes, wraps the fragment in a <template>, and writes
+  compositions/captions.html:
+    · the empty GROUPS array            → the engine's scene-aware word groups
+    · the 0 duration + 0 width/height   → real total + canvas size
+    · the empty data-brand-tokens style → :root tokens derived from the project's frame.md
+
+  Token contract — reference ONLY this fixed vocab (captions.mjs injects it from
+  frame.md, so the Step-2 brand overlay flows through; each var has a 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>
+
+<!-- captions.mjs injects the project's :root tokens here -->
+<style data-brand-tokens></style>
+
+<style>
+  #captions-root {
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+  }
+  .caption-layer {
+    position: absolute;
+    inset: 0;
+    z-index: 20;
+    pointer-events: none;
+  }
+  /* the keep-out band, from captionBand(H) — frame content stays above it */
+  .caption-stage {
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: var(--cap-band-top, 900px);
+    height: var(--cap-band-height, 180px);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .caption-group {
+    /* every group is absolutely stacked over the SAME band — exactly one shown at a
+       time via opacity. Must be absolute: in-flow groups would lay out side-by-side. */
+    position: absolute;
+    inset: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    opacity: 0;
+  }
+
+  /* THE 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>
+  // captions.mjs injects the engine's scene-aware groups + real duration here.
+  var GROUPS = [];
+  var DURATION = 0;
+
+  (function () {
+    var stage = document.getElementById("caption-stage");
+
+    // build DOM: one .caption-group per group, .caption-word per word
+    GROUPS.forEach(function (group, g) {
+      var groupEl = document.createElement("div");
+      groupEl.className = "caption-group";
+      groupEl.id = "caption-group-" + g;
+      var pill = document.createElement("div");
+      pill.className = "caption-pill";
+      var line = document.createElement("div");
+      line.className = "caption-line";
+      (group.words || []).forEach(function (w, i) {
+        var span = document.createElement("span");
+        span.className = "caption-word";
+        span.id = "caption-word-" + g + "-" + i;
+        span.textContent = String(w.text);
+        line.appendChild(span);
+      });
+      pill.appendChild(line);
+      groupEl.appendChild(pill);
+      stage.appendChild(groupEl);
+    });
+
+    window.__timelines = window.__timelines || {};
+    var tl = gsap.timeline({ paused: true });
+
+    GROUPS.forEach(function (group, g) {
+      var groupEl = document.getElementById("caption-group-" + g);
+      var words = group.words || [];
+      var next = GROUPS[g + 1];
+      var isLast = g === GROUPS.length - 1;
+      var start = Math.max(0, Number(group.start));
+      var end = isLast ? DURATION : Math.min(Number(next.start), Number(group.end) + 0.3);
+      if (end <= start) end = start + 0.01;
+
+      // group on/off — exactly one group visible at a time
+      tl.set(groupEl, { opacity: 1 }, start);
+      tl.set(groupEl, { opacity: 0 }, end);
+
+      // 3-state karaoke via className SETS — seek-safe (gsap.set applies on the
+      // engine's frame-by-frame seek; .call callbacks would NOT fire).
+      words.forEach(function (w, i) {
+        var el = document.getElementById("caption-word-" + g + "-" + i);
+        var at = Math.max(start, Number(w.start));
+        tl.set(el, { className: "caption-word" }, start); // upcoming (also resets on reverse-seek)
+        tl.set(el, { className: "caption-word is-active" }, at); // current
+        tl.fromTo(el, { scale: 0.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-media/hyperframes-creative/frame-presets/blockframe/frame-showcase.html b/.claude/skills-media/hyperframes-creative/frame-presets/blockframe/frame-showcase.html
new file mode 100644
index 000000000..3f5a16507
--- /dev/null
+++ b/.claude/skills-media/hyperframes-creative/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-media/hyperframes-creative/frame-presets/blue-professional/FRAME.md b/.claude/skills-media/hyperframes-creative/frame-presets/blue-professional/FRAME.md
new file mode 100644
index 000000000..e821dee2d
--- /dev/null
+++ b/.claude/skills-media/hyperframes-creative/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-media/hyperframes-creative/frame-presets/blue-professional/caption-skin.html b/.claude/skills-media/hyperframes-creative/frame-presets/blue-professional/caption-skin.html
new file mode 100644
index 000000000..5a599c270
--- /dev/null
+++ b/.claude/skills-media/hyperframes-creative/frame-presets/blue-professional/caption-skin.html
@@ -0,0 +1,223 @@
+<!--
+  Blue Professional — caption skin (preset-local source).
+
+  This is the preset's own lower-third karaoke caption look. product-launch-video's
+  Step 2 copies it into the project as caption-skin.html; captions.mjs then fills the
+  three reserved holes, wraps the fragment in a <template>, and writes
+  compositions/captions.html:
+    · the empty GROUPS array            → the engine's scene-aware word groups
+    · the 0 duration + 0 width/height   → real total + canvas size
+    · the empty data-brand-tokens style → :root tokens derived from the project's frame.md
+
+  Token contract — reference ONLY this fixed vocab (captions.mjs injects it from
+  frame.md, so the Step-2 brand overlay flows through; each var has a 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>
+
+<!-- captions.mjs injects the project's :root tokens here -->
+<style data-brand-tokens></style>
+
+<style>
+  #captions-root {
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+  }
+  .caption-layer {
+    position: absolute;
+    inset: 0;
+    z-index: 20;
+    pointer-events: none;
+  }
+  /* the keep-out band, from captionBand(H) — frame content stays above it */
+  .caption-stage {
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: var(--cap-band-top, 900px);
+    height: var(--cap-band-height, 180px);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .caption-group {
+    /* every group is absolutely stacked over the SAME band — exactly one shown at a
+       time via opacity. Must be absolute: in-flow groups would lay out side-by-side. */
+    position: absolute;
+    inset: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    opacity: 0;
+  }
+
+  /* THE 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>
+  // captions.mjs injects the engine's scene-aware groups + real duration here.
+  var GROUPS = [];
+  var DURATION = 0;
+
+  (function () {
+    var stage = document.getElementById("caption-stage");
+
+    // build DOM: one .caption-group per group, .caption-word per word
+    GROUPS.forEach(function (group, g) {
+      var groupEl = document.createElement("div");
+      groupEl.className = "caption-group";
+      groupEl.id = "caption-group-" + g;
+      var pill = document.createElement("div");
+      pill.className = "caption-pill";
+      var line = document.createElement("div");
+      line.className = "caption-line";
+      (group.words || []).forEach(function (w, i) {
+        var span = document.createElement("span");
+        span.className = "caption-word";
+        span.id = "caption-word-" + g + "-" + i;
+        span.textContent = String(w.text);
+        line.appendChild(span);
+      });
+      pill.appendChild(line);
+      groupEl.appendChild(pill);
+      stage.appendChild(groupEl);
+    });
+
+    window.__timelines = window.__timelines || {};
+    var tl = gsap.timeline({ paused: true });
+
+    GROUPS.forEach(function (group, g) {
+      var groupEl = document.getElementById("caption-group-" + g);
+      var words = group.words || [];
+      var next = GROUPS[g + 1];
+      var isLast = g === GROUPS.length - 1;
+      var start = Math.max(0, Number(group.start));
+      var end = isLast ? DURATION : Math.min(Number(next.start), Number(group.end) + 0.3);
+      if (end <= start) end = start + 0.01;
+
+      // group on/off — exactly one group visible at a time
+      tl.set(groupEl, { opacity: 1 }, start);
+      tl.set(groupEl, { opacity: 0 }, end);
+
+      // 3-state karaoke via className SETS — seek-safe (gsap.set applies on the
+      // engine's frame-by-frame seek; .call callbacks would NOT fire).
+      words.forEach(function (w, i) {
+        var el = document.getElementById("caption-word-" + g + "-" + i);
+        var at = Math.max(start, Number(w.start));
+        tl.set(el, { className: "caption-word" }, start); // upcoming (also resets on reverse-seek)
+        tl.set(el, { className: "caption-word is-active" }, at); // current
+        tl.fromTo(el, { scale: 0.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-media/hyperframes-creative/frame-presets/blue-professional/frame-showcase.html b/.claude/skills-media/hyperframes-creative/frame-presets/blue-professional/frame-showcase.html
new file mode 100644
index 000000000..ff00e7be7
--- /dev/null
+++ b/.claude/skills-media/hyperframes-creative/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-media/hyperframes-creative/frame-presets/bold-poster/FRAME.md b/.claude/skills-media/hyperframes-creative/frame-presets/bold-poster/FRAME.md
new file mode 100644
index 000000000..c9f31256c
--- /dev/null
+++ b/.claude/skills-media/hyperframes-creative/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-media/hyperframes-creative/frame-presets/bold-poster/caption-skin.html b/.claude/skills-media/hyperframes-creative/frame-presets/bold-poster/caption-skin.html
new file mode 100644
index 000000000..ee1d4bfb6
--- /dev/null
+++ b/.claude/skills-media/hyperframes-creative/frame-presets/bold-poster/caption-skin.html
@@ -0,0 +1,230 @@
+<!--
+  Bold Poster — caption skin (preset-local source).
+
+  This is the preset's own lower-third karaoke caption look. product-launch-video's
+  Step 2 copies it into the project as caption-skin.html; captions.mjs then fills the
+  three reserved holes, wraps the fragment in a <template>, and writes
+  compositions/captions.html:
+    · the empty GROUPS array            → the engine's scene-aware word groups
+    · the 0 duration + 0 width/height   → real total + canvas size
+    · the empty data-brand-tokens style → :root tokens derived from the project's frame.md
+
+  Token contract — reference ONLY this fixed vocab (captions.mjs injects it from
+  frame.md, so the Step-2 brand overlay flows through; each var has a 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>
+
+<!-- captions.mjs injects the project's :root tokens here -->
+<style data-brand-tokens></style>
+
+<style>
+  #captions-root {
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+  }
+  .caption-layer {
+    position: absolute;
+    inset: 0;
+    z-index: 20;
+    pointer-events: none;
+  }
+  /* the keep-out band, from captionBand(H) — frame content stays above it */
+  .caption-stage {
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: var(--cap-band-top, 900px);
+    height: var(--cap-band-height, 180px);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .caption-group {
+    /* every group is absolutely stacked over the SAME band — exactly one shown at a
+       time via opacity. Must be absolute: in-flow groups would lay out side-by-side. */
+    position: absolute;
+    inset: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    opacity: 0;
+  }
+
+  /* THE 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>
+  // captions.mjs injects the engine's scene-aware groups + real duration here.
+  var GROUPS = [];
+  var DURATION = 0;
+
+  (function () {
+    var stage = document.getElementById("caption-stage");
+
+    // build DOM: one .caption-group per group, .caption-word per word
+    GROUPS.forEach(function (group, g) {
+      var groupEl = document.createElement("div");
+      groupEl.className = "caption-group";
+      groupEl.id = "caption-group-" + g;
+      var pill = document.createElement("div");
+      pill.className = "caption-pill";
+      var line = document.createElement("div");
+      line.className = "caption-line";
+      (group.words || []).forEach(function (w, i) {
+        var span = document.createElement("span");
+        span.className = "caption-word";
+        span.id = "caption-word-" + g + "-" + i;
+        span.textContent = String(w.text);
+        line.appendChild(span);
+      });
+      pill.appendChild(line);
+      groupEl.appendChild(pill);
+      stage.appendChild(groupEl);
+    });
+
+    window.__timelines = window.__timelines || {};
+    var tl = gsap.timeline({ paused: true });
+
+    GROUPS.forEach(function (group, g) {
+      var groupEl = document.getElementById("caption-group-" + g);
+      var words = group.words || [];
+      var next = GROUPS[g + 1];
+      var isLast = g === GROUPS.length - 1;
+      var start = Math.max(0, Number(group.start));
+      var end = isLast ? DURATION : Math.min(Number(next.start), Number(group.end) + 0.3);
+      if (end <= start) end = start + 0.01;
+
+      // group on/off — exactly one group visible at a time
+      tl.set(groupEl, { opacity: 1 }, start);
+      tl.set(groupEl, { opacity: 0 }, end);
+
+      // 3-state karaoke via className SETS — seek-safe (gsap.set applies on the
+      // engine's frame-by-frame seek; .call callbacks would NOT fire).
+      words.forEach(function (w, i) {
+        var el = document.getElementById("caption-word-" + g + "-" + i);
+        var at = Math.max(start, Number(w.start));
+        tl.set(el, { className: "caption-word" }, start); // upcoming (also resets on reverse-seek)
+        tl.set(el, { className: "caption-word is-active" }, at); // current
+        tl.fromTo(el, { scale: 0.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-media/hyperframes-creative/frame-presets/bold-poster/frame-showcase.html b/.claude/skills-media/hyperframes-creative/frame-presets/bold-poster/frame-showcase.html
new file mode 100644
index 000000000..a8f91897f
--- /dev/null
+++ b/.claude/skills-media/hyperframes-creative/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-media/hyperframes-creative/frame-presets/broadside/FRAME.md b/.claude/skills-media/hyperframes-creative/frame-presets/broadside/FRAME.md
new file mode 100644
index 000000000..4dff52def
--- /dev/null
+++ b/.claude/skills-media/hyperframes-creative/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-media/hyperframes-creative/frame-presets/broadside/caption-skin.html b/.claude/skills-media/hyperframes-creative/frame-presets/broadside/caption-skin.html
new file mode 100644
index 000000000..00f4b6f8d
--- /dev/null
+++ b/.claude/skills-media/hyperframes-creative/frame-presets/broadside/caption-skin.html
@@ -0,0 +1,225 @@
+<!--
+  Broadside — caption skin (preset-local source).
+
+  This is the preset's own lower-third karaoke caption look. product-launch-video's
+  Step 2 copies it into the project as caption-skin.html; captions.mjs then fills the
+  three reserved holes, wraps the fragment in a <template>, and writes
+  compositions/captions.html:
+    · the empty GROUPS array            → the engine's scene-aware word groups
+    · the 0 duration + 0 width/height   → real total + canvas size
+    · the empty data-brand-tokens style → :root tokens derived from the project's frame.md
+
+  Token contract — reference ONLY this fixed vocab (captions.mjs injects it from
+  frame.md, so the Step-2 brand overlay flows through; each var has a 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>
+
+<!-- captions.mjs injects the project's :root tokens here -->
+<style data-brand-tokens></style>
+
+<style>
+  #captions-root {
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+  }
+  .caption-layer {
+    position: absolute;
+    inset: 0;
+    z-index: 20;
+    pointer-events: none;
+  }
+  /* the keep-out band, from captionBand(H) — frame content stays above it */
+  .caption-stage {
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: var(--cap-band-top, 900px);
+    height: var(--cap-band-height, 180px);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .caption-group {
+    /* every group is absolutely stacked over the SAME band — exactly one shown at a
+       time via opacity. Must be absolute: in-flow groups would lay out side-by-side. */
+    position: absolute;
+    inset: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    opacity: 0;
+  }
+
+  /* THE 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>
+  // captions.mjs injects the engine's scene-aware groups + real duration here.
+  var GROUPS = [];
+  var DURATION = 0;
+
+  (function () {
+    var stage = document.getElementById("caption-stage");
+
+    // build DOM: one .caption-group per group, .caption-word per word
+    GROUPS.forEach(function (group, g) {
+      var groupEl = document.createElement("div");
+      groupEl.className = "caption-group";
+      groupEl.id = "caption-group-" + g;
+      var pill = document.createElement("div");
+      pill.className = "caption-pill";
+      var line = document.createElement("div");
+      line.className = "caption-line";
+      (group.words || []).forEach(function (w, i) {
+        var span = document.createElement("span");
+        span.className = "caption-word";
+        span.id = "caption-word-" + g + "-" + i;
+        span.textContent = String(w.text);
+        line.appendChild(span);
+      });
+      pill.appendChild(line);
+      groupEl.appendChild(pill);
+      stage.appendChild(groupEl);
+    });
+
+    window.__timelines = window.__timelines || {};
+    var tl = gsap.timeline({ paused: true });
+
+    GROUPS.forEach(function (group, g) {
+      var groupEl = document.getElementById("caption-group-" + g);
+      var words = group.words || [];
+      var next = GROUPS[g + 1];
+      var isLast = g === GROUPS.length - 1;
+      var start = Math.max(0, Number(group.start));
+      var end = isLast ? DURATION : Math.min(Number(next.start), Number(group.end) + 0.3);
+      if (end <= start) end = start + 0.01;
+
+      // group on/off — exactly one group visible at a time
+      tl.set(groupEl, { opacity: 1 }, start);
+      tl.set(groupEl, { opacity: 0 }, end);
+
+      // 3-state karaoke via className SETS — seek-safe (gsap.set applies on the
+      // engine's frame-by-frame seek; .call callbacks would NOT fire).
+      words.forEach(function (w, i) {
+        var el = document.getElementById("caption-word-" + g + "-" + i);
+        var at = Math.max(start, Number(w.start));
+        tl.set(el, { className: "caption-word" }, start); // upcoming (also resets on reverse-seek)
+        tl.set(el, { className: "caption-word is-active" }, at); // current
+        tl.fromTo(el, { scale: 0.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-media/hyperframes-creative/frame-presets/broadside/frame-showcase.html b/.claude/skills-media/hyperframes-creative/frame-presets/broadside/frame-showcase.html
new file mode 100644
index 000000000..0d2a6cd15
--- /dev/null
+++ b/.claude/skills-media/hyperframes-creative/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-media/hyperframes-creative/frame-presets/capsule/FRAME.md b/.claude/skills-media/hyperframes-creative/frame-presets/capsule/FRAME.md
new file mode 100644
index 000000000..a37f828c8
--- /dev/null
+++ b/.claude/skills-media/hyperframes-creative/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-media/hyperframes-creative/frame-presets/capsule/caption-skin.html b/.claude/skills-media/hyperframes-creative/frame-presets/capsule/caption-skin.html
new file mode 100644
index 000000000..0742a0532
--- /dev/null
+++ b/.claude/skills-media/hyperframes-creative/frame-presets/capsule/caption-skin.html
@@ -0,0 +1,224 @@
+<!--
+  Capsule — caption skin (preset-local source).
+
+  This is the preset's own lower-third karaoke caption look. product-launch-video's
+  Step 2 copies it into the project as caption-skin.html; captions.mjs then fills the
+  three reserved holes, wraps the fragment in a <template>, and writes
+  compositions/captions.html:
+    · the empty GROUPS array            → the engine's scene-aware word groups
+    · the 0 duration + 0 width/height   → real total + canvas size
+    · the empty data-brand-tokens style → :root tokens derived from the project's frame.md
+
+  Token contract — reference ONLY this fixed vocab (captions.mjs injects it from
+  frame.md, so the Step-2 brand overlay flows through; each var has a 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>
+
+<!-- captions.mjs injects the project's :root tokens here -->
+<style data-brand-tokens></style>
+
+<style>
+  #captions-root {
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+  }
+  .caption-layer {
+    position: absolute;
+    inset: 0;
+    z-index: 20;
+    pointer-events: none;
+  }
+  /* the keep-out band, from captionBand(H) — frame content stays above it */
+  .caption-stage {
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: var(--cap-band-top, 900px);
+    height: var(--cap-band-height, 180px);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .caption-group {
+    /* every group is absolutely stacked over the SAME band — exactly one shown at a
+       time via opacity. Must be absolute: in-flow groups would lay out side-by-side. */
+    position: absolute;
+    inset: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    opacity: 0;
+  }
+
+  /* THE 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>
+  // captions.mjs injects the engine's scene-aware groups + real duration here.
+  var GROUPS = [];
+  var DURATION = 0;
+
+  (function () {
+    var stage = document.getElementById("caption-stage");
+
+    // build DOM: one .caption-group per group, .caption-word per word
+    GROUPS.forEach(function (group, g) {
+      var groupEl = document.createElement("div");
+      groupEl.className = "caption-group";
+      groupEl.id = "caption-group-" + g;
+      var pill = document.createElement("div");
+      pill.className = "caption-pill";
+      var line = document.createElement("div");
+      line.className = "caption-line";
+      (group.words || []).forEach(function (w, i) {
+        var span = document.createElement("span");
+        span.className = "caption-word";
+        span.id = "caption-word-" + g + "-" + i;
+        span.textContent = String(w.text);
+        line.appendChild(span);
+      });
+      pill.appendChild(line);
+      groupEl.appendChild(pill);
+      stage.appendChild(groupEl);
+    });
+
+    window.__timelines = window.__timelines || {};
+    var tl = gsap.timeline({ paused: true });
+
+    GROUPS.forEach(function (group, g) {
+      var groupEl = document.getElementById("caption-group-" + g);
+      var words = group.words || [];
+      var next = GROUPS[g + 1];
+      var isLast = g === GROUPS.length - 1;
+      var start = Math.max(0, Number(group.start));
+      var end = isLast ? DURATION : Math.min(Number(next.start), Number(group.end) + 0.3);
+      if (end <= start) end = start + 0.01;
+
+      // group on/off — exactly one group visible at a time
+      tl.set(groupEl, { opacity: 1 }, start);
+      tl.set(groupEl, { opacity: 0 }, end);
+
+      // 3-state karaoke via className SETS — seek-safe (gsap.set applies on the
+      // engine's frame-by-frame seek; .call callbacks would NOT fire).
+      words.forEach(function (w, i) {
+        var el = document.getElementById("caption-word-" + g + "-" + i);
+        var at = Math.max(start, Number(w.start));
+        tl.set(el, { className: "caption-word" }, start); // upcoming (also resets on reverse-seek)
+        tl.set(el, { className: "caption-word is-active" }, at); // current
+        tl.fromTo(el, { scale: 0.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-media/hyperframes-creative/frame-presets/capsule/frame-showcase.html b/.claude/skills-media/hyperframes-creative/frame-presets/capsule/frame-showcase.html
new file mode 100644
index 000000000..65b4e196d
--- /dev/null
+++ b/.claude/skills-media/hyperframes-creative/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-media/hyperframes-creative/frame-presets/cartesian/FRAME.md b/.claude/skills-media/hyperframes-creative/frame-presets/cartesian/FRAME.md
new file mode 100644
index 000000000..a00c21d92
--- /dev/null
+++ b/.claude/skills-media/hyperframes-creative/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-media/hyperframes-creative/frame-presets/cartesian/caption-skin.html b/.claude/skills-media/hyperframes-creative/frame-presets/cartesian/caption-skin.html
new file mode 100644
index 000000000..135fa9719
--- /dev/null
+++ b/.claude/skills-media/hyperframes-creative/frame-presets/cartesian/caption-skin.html
@@ -0,0 +1,222 @@
+<!--
+  Cartesian — caption skin (preset-local source).
+
+  This is the preset's own lower-third karaoke caption look. product-launch-video's
+  Step 2 copies it into the project as caption-skin.html; captions.mjs then fills the
+  three reserved holes, wraps the fragment in a <template>, and writes
+  compositions/captions.html:
+    · the empty GROUPS array            → the engine's scene-aware word groups
+    · the 0 duration + 0 width/height   → real total + canvas size
+    · the empty data-brand-tokens style → :root tokens derived from the project's frame.md
+
+  Token contract — reference ONLY this fixed vocab (captions.mjs injects it from
+  frame.md, so the Step-2 brand overlay flows through; each var has a 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>
+
+<!-- captions.mjs injects the project's :root tokens here -->
+<style data-brand-tokens></style>
+
+<style>
+  #captions-root {
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+  }
+  .caption-layer {
+    position: absolute;
+    inset: 0;
+    z-index: 20;
+    pointer-events: none;
+  }
+  /* the keep-out band, from captionBand(H) — frame content stays above it */
+  .caption-stage {
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: var(--cap-band-top, 900px);
+    height: var(--cap-band-height, 180px);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .caption-group {
+    /* every group is absolutely stacked over the SAME band — exactly one shown at a
+       time via opacity. Must be absolute: in-flow groups would lay out side-by-side. */
+    position: absolute;
+    inset: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    opacity: 0;
+  }
+
+  /* THE 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>
+  // captions.mjs injects the engine's scene-aware groups + real duration here.
+  var GROUPS = [];
+  var DURATION = 0;
+
+  (function () {
+    var stage = document.getElementById("caption-stage");
+
+    // build DOM: one .caption-group per group, .caption-word per word
+    GROUPS.forEach(function (group, g) {
+      var groupEl = document.createElement("div");
+      groupEl.className = "caption-group";
+      groupEl.id = "caption-group-" + g;
+      var pill = document.createElement("div");
+      pill.className = "caption-pill";
+      var line = document.createElement("div");
+      line.className = "caption-line";
+      (group.words || []).forEach(function (w, i) {
+        var span = document.createElement("span");
+        span.className = "caption-word";
+        span.id = "caption-word-" + g + "-" + i;
+        span.textContent = String(w.text);
+        line.appendChild(span);
+      });
+      pill.appendChild(line);
+      groupEl.appendChild(pill);
+      stage.appendChild(groupEl);
+    });
+
+    window.__timelines = window.__timelines || {};
+    var tl = gsap.timeline({ paused: true });
+
+    GROUPS.forEach(function (group, g) {
+      var groupEl = document.getElementById("caption-group-" + g);
+      var words = group.words || [];
+      var next = GROUPS[g + 1];
+      var isLast = g === GROUPS.length - 1;
+      var start = Math.max(0, Number(group.start));
+      var end = isLast ? DURATION : Math.min(Number(next.start), Number(group.end) + 0.3);
+      if (end <= start) end = start + 0.01;
+
+      // group on/off — exactly one group visible at a time
+      tl.set(groupEl, { opacity: 1 }, start);
+      tl.set(groupEl, { opacity: 0 }, end);
+
+      // 3-state karaoke via className SETS — seek-safe (gsap.set applies on the
+      // engine's frame-by-frame seek; .call callbacks would NOT fire).
+      words.forEach(function (w, i) {
+        var el = document.getElementById("caption-word-" + g + "-" + i);
+        var at = Math.max(start, Number(w.start));
+        tl.set(el, { className: "caption-word" }, start); // upcoming (also resets on reverse-seek)
+        tl.set(el, { className: "caption-word is-active" }, at); // current
+        tl.fromTo(el, { scale: 0.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-media/hyperframes-creative/frame-presets/cartesian/frame-showcase.html b/.claude/skills-media/hyperframes-creative/frame-presets/cartesian/frame-showcase.html
new file mode 100644
index 000000000..7918b04e9
--- /dev/null
+++ b/.claude/skills-media/hyperframes-creative/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-media/hyperframes-creative/frame-presets/claude/FRAME.md b/.claude/skills-media/hyperframes-creative/frame-presets/claude/FRAME.md
new file mode 100644
index 000000000..93807cd18
--- /dev/null
+++ b/.claude/skills-media/hyperframes-creative/frame-presets/claude/FRAME.md
@@ -0,0 +1,277 @@
+---
+version: alpha
+name: Claude — Frame (video / frame layer)
+description: >
+  Video-first companion to Claude's design.md. The unit is the frame (1920×1080). Atoms are
+  identical and sacred — warm cream paper (never pure white, never cool), a single terracotta coral
+  as scarce "voltage", hairline ink elevation (no heavy shadow), EB Garamond for all
+  display + Inter body + JetBrains Mono for the index/code voice on a warm-navy code surface,
+  sentence-case display, and the ✱ coral spike mark. Composition + frame scale rewritten. Motion out
+  of scope.
+unit: the frame — 1920×1080 primary; 9:16 and 1:1 documented
+principle: atoms are sacred · composition is free · numbers come from the script
+
+colors:
+  ink: "#141413"
+  cream: "#FAF9F5"
+  tile: "#EFE9DE"
+  tile-strong: "#ECE3D4"
+  coral: "#CC785C"
+  navy: "#181715"
+  navy-soft: "#1F1E1B"
+  navy-elev: "#252320"
+
+borders: { hairline: "1px solid ink@12%", hairline-strong: "1px solid ink@20%", dark: "1px solid cream@14% (on navy)" }
+shadows: { card: "0 1px 3px ink@8%, 0 4px 16px ink@4%", none: "none" }
+
+typography:
+  # — reading + chrome ramp —
+  body:    { fontFamily: "Inter", cqw: 1.5, weight: 400, lineHeight: 1.5 }
+  lead:    { fontFamily: "Inter", cqw: 2.08, weight: 400, lineHeight: 1.5 }
+  card-title:{ fontFamily: "Inter", cqw: 2.3, weight: 500, lineHeight: 1.25, tracking: "-0.005em" }
+  button:  { fontFamily: "Inter", cqw: 1.46, weight: 500, lineHeight: 1.0 }
+  tag-upper:{ fontFamily: "Inter", cqw: 1.35, weight: 500, tracking: "0.18em", upper: true }
+  kicker:  { fontFamily: "JetBrains Mono", px: 28, cqw: 1.46, weight: 500, tracking: "0.16em", upper: true }
+  mono-label:{ fontFamily: "JetBrains Mono", px: 26, cqw: 1.35, weight: 500, tracking: "0.02em" }
+  code:    { fontFamily: "JetBrains Mono", cqw: 1.67, weight: 400, lineHeight: 1.6 }
+  # — display ramp (EB Garamond 400, sentence case, negative tracking. Renderer embeds only 400/700 — author at 400; italic is the synthesized slant) —
+  headline:{ fontFamily: "EB Garamond", cqw: 4.6, weight: 400, lineHeight: 1.06, tracking: "-0.018em" }
+  quote-pull:{ fontFamily: "EB Garamond", cqw: 5.0, weight: 400, lineHeight: 1.12, tracking: "-0.012em", italic: true }
+  display-italic:{ fontFamily: "EB Garamond", cqw: 6.7, weight: 400, lineHeight: 1.05, tracking: "-0.012em", italic: true }
+  display:{ fontFamily: "EB Garamond", cqw: 7.3, weight: 400, lineHeight: 1.02, tracking: "-0.022em" }
+  number-hero:{ fontFamily: "EB Garamond", cqw: 9.4, weight: 400, lineHeight: 0.95, tracking: "-0.025em" }
+  display-cover:{ fontFamily: "EB Garamond", cqw: 9.9, weight: 400, lineHeight: 0.98, tracking: "-0.028em" }
+  number-unit:{ fontFamily: "JetBrains Mono", cqw: 2.08, weight: 500, lineHeight: 1.0 }
+
+spacing:
+  slide-pad: "4.2cqw"   # ~80px @1920
+  gap-md: "1.7cqw"
+  hairline: "1px"
+  radius-sm: "6px"
+  radius-md: "8px"
+  radius-lg: "12px"
+  radius-pill: "9999px"
+
+components:
+  card-hairline:
+    backgroundColor: "{colors.cream} or {colors.tile}"
+    border: "1px solid {colors.ink}@12%"
+    rounded: "{spacing.radius-lg}"
+    shadow: "{shadows.card}"
+    typography: "{typography.card-title} + {typography.body}"
+    description: "The editorial content card. Elevation is the hairline + ONE soft warm shadow — never a heavy drop, glow, or gradient."
+  kicker-spike:
+    typography: "{typography.kicker}"
+    mark: "✱ coral spike prefix"
+    description: "The eyebrow — JetBrains Mono uppercase, indexical (2–5 words), prefixed with the coral ✱. Never plain text, never a sentence."
+  coral-callout:
+    backgroundColor: "{colors.coral} (full-bleed) or {colors.cream} with a coral edge"
+    textColor: "{colors.cream} on coral"
+    rounded: "{spacing.radius-md}"
+    typography: "{typography.button} / {typography.h2}"
+    description: "The ONE voltage moment per frame — the CTA, the single inline link, OR the full-bleed band. Never two corals in one frame."
+  number-lockup:
+    typography: "{typography.number-hero} figure + {typography.number-unit} unit"
+    description: "Hero stat — a EB Garamond figure paired with a JetBrains Mono unit (200K, +1,204, −318, 17 files). Figure is serif; the unit is ALWAYS mono, never the serif."
+  pull-quote:
+    typography: "{typography.quote-pull} (EB Garamond italic) + {typography.tag-upper} cite"
+    description: "A commit message, a reviewer line, or the thesis. EB Garamond italic, small Inter uppercase cite beneath."
+  section-rule:
+    rule: "1px solid {colors.ink}@12% (or {colors.cream}@14% on navy)"
+    description: "The only separator. A coral 1px rule may draw on to introduce a section. Never 2px+, never a heavy divider."
+  code-surface:
+    backgroundColor: "{colors.navy} body / {colors.navy-elev} title bar + status strip"
+    textColor: "{colors.cream} (JetBrains Mono); syntax in coral (keywords) / teal #5DB8A6 (strings) / amber #E8A55A (numbers)"
+    border: "1px solid {colors.cream}@14%"
+    rounded: "{spacing.radius-md}"
+    description: "The warm-navy code / terminal surface. The CODE ITSELF is rendered by the code-* registry blocks (code-diff / code-typing / code-snippet-*); this preset owns the surrounding surface, title bar, status strip, and mono chrome — not the code rendering."
+  spike-mark:
+    glyph: "✱ (U+2731), always {colors.coral}"
+    description: "The brand mark. Fades + scales 0.92→1 on a single emphasis beat; never spins."
+---
+
+# Claude — Frame (video / frame layer)
+
+## Overview
+
+Claude at frame scale is a **warm-editorial brand book come to life** — the register of a literary
+imprint or a research note. The thesis is three colors: **cream is the ground, ink is the voice,
+coral is the voltage** — and a fourth (warm navy) only where code shows itself. Every surface is
+**warm cream** (never pure white, never cool gray); content gathers on a **tile** surface half a
+step darker — the demarcation is a half-step, never a hard contrast. Elevation is a **1px hairline**
+ink border at low alpha plus, rarely, one soft warm shadow. There are no heavy drops, no glows, no
+gradients on content.
+
+Three editorial voices, each in its own face: **EB Garamond** carries every display moment — covers,
+headlines, pull-quotes, big stat numerals — at large display sizes with gentle negative tracking;
+its **italic** is the expressive register. **Inter** carries body, leads, card titles, buttons, and
+UI chrome. **JetBrains Mono** carries the indexical layer — kickers, technical labels, the code
+window, status strips. Switching a voice's face collapses the register: a sans headline or a serif
+label reads as a different brand.
+
+**Key characteristics at frame scale:**
+
+- **Cream / ink / coral trinity** + a warm-navy code surface; cream is the default ground, ink the voice, coral the scarce voltage.
+- **EB Garamond** (sentence case, negative-tracked) for all display; **Inter** body/chrome; **JetBrains Mono** index + code.
+- **Hairline elevation** — a 1px low-alpha ink border + at most one soft warm shadow. No heavy drop, glow, or gradient.
+- **Coral is rationed** — at most ONE coral moment per frame (CTA, inline link, OR full-bleed band); coral never sets a headline or a body run.
+- **Density is free** — fill the frame as the content wants; a frame may stand on a single focal or carry a dense, layered composition.
+- **The ✱ coral spike** opens kickers; warm navy is reserved for the code/terminal surface.
+
+## The Frame
+
+### Frame Craft Bar
+
+Eyeball tests gate every frame before any structural check:
+
+- **Squint** — one EB Garamond display moment dominates at 3–6× its neighbor.
+- **Trinity** — cream/tile ground, ink text, coral exactly **once**; warm navy only on the code surface; no cool gray / pure white / fourth hue.
+- **Type** — EB Garamond sentence-case display (negative-tracked); Inter 400 body; JetBrains Mono kickers (uppercase 0.16em, coral ✱) + code.
+
+- **Primary:** 1920×1080 (16:9). Display authored in **`cqw`** (`px ÷ 1920 × 100 = cqw`).
+- **Vertical:** 1080×1920 (9:16). **Square:** 1080×1080 (1:1).
+- **Safe area:** `slide-pad` ~4.2cqw; the kicker/mono chrome sit inside it.
+
+**The container law (load-bearing).** Every frame ground sets `container-type: size`; ALL
+frame-relative units are `cqw`/`cqh` against it — never `vw`. Hairlines stay 1px; card radii stay
+6/8/12px; the warm-paper reading must survive every ratio.
+
+## Colors
+
+Tokens identical to the source. Default ground `{colors.cream}`; content gathers on
+`{colors.tile}` / `{colors.tile-strong}` (half-step warm steps, never a hard contrast).
+**Headlines & body:** `{colors.ink}` on cream/tile; `{colors.cream}` on navy. **Coral**
+(`{colors.coral}`) is the scarce voltage — one moment per frame (CTA, inline link, or full-bleed
+band), never body text, never a card fill. **Warm navy** (`{colors.navy}` / `navy-soft` /
+`navy-elev`) is the code / terminal / dark-card surface — a structural anchor, not a fourth brand
+hue. **No cool grays, no pure white, no pure black.**
+
+**Fixed syntax colors (decoration, NOT remixable brand hues).** When a code line is hand-set rather
+than rendered by a `code-*` block, keywords are coral, strings are **teal `#5DB8A6`**, numbers are
+**amber `#E8A55A`**; status reads success `#5DB872` / warn `#C64545`. These track the code surface,
+not the brand trinity — keep them out of the brand palette.
+
+## Typography
+
+Two ramps. The **reading/chrome ramp** (Inter `body` 1.5cqw / `lead` 2.08cqw weight 400; JetBrains
+Mono `kicker`/`mono-label` in px) carries copy + chrome; the **display ramp** (EB Garamond `headline` 4.6cqw
+→ `display-cover` 9.9cqw, weight 400, negative-tracked) carries every headline + stat.
+
+- **Legibility floor:** any load-bearing line ≥ **1.4cqw**; mono px labels are chrome only.
+- **Fit-to-measure:** size the headline to its length. Cap the block at **≤ 78cqw**; ≤3 words → `display-cover`; 4–6 → `display`; 7+ → `headline`. Reserve the 7.3–9.9cqw tier for cover / statement / stat.
+- **EB Garamond display is sentence case** (NOT title case, NOT uppercase), weight 400, negative-tracked (−0.012..−0.028em); reach for **italic** when the line is a stance or a definition. **Inter body** sentence case weight 400. **JetBrains Mono** kickers UPPERCASE 0.16em with the coral ✱. No uppercase serif, no sans headline, no serif label.
+
+## Depth & Surface
+
+Hairline elevation:
+
+- **1px hairline** ink border at ~12% alpha is the primary lift (cream@14% on navy).
+- **One soft warm shadow** (`0 1px 3px ink@8%, 0 4px 16px ink@4%`) — used rarely, never heavy.
+- **Half-step surface** — a `{colors.tile}` block on cream reads elevated by the warm step, not by a cast shadow.
+
+**Ceiling:** no heavy drop shadow, no glow, no gradient on content, no tilt. The system has no light
+to emit; it reads by warmth and hairline.
+
+## Shapes
+
+- **6px** small chrome, **8px** cards / code surface, **12px** large cards / quote frames, **9999px** true pills only. No square corners, no heavy rounding; the editorial register is gently rounded, never hard.
+
+## Components
+
+- **card-hairline** — the editorial content card (hairline + one soft shadow). **section-rule** — the only separator (1px, coral may draw on).
+- **kicker-spike** — the ✱ coral eyebrow. **coral-callout** — the one voltage moment (CTA / inline link / full-bleed band).
+- **number-lockup** — EB Garamond figure + mono unit (the PR `+N / −M`, `200K`, file counts). **pull-quote** — EB Garamond italic + cite (a commit message / reviewer line).
+- **code-surface** — the warm-navy code / terminal surface; the code itself comes from the **`code-*` registry blocks**, this owns the surface + mono chrome.
+- **spike-mark** — the ✱ brand glyph, always coral.
+
+## Frame Treatments
+
+> Recipe: ground · container · composes · focal · chrome · accent · Fixed/Free · density.
+> One coral moment per frame; open with a kicker-spike.
+
+### 1 · Cover (identity · move: oversized EB Garamond · cream)
+
+**Ground** `{colors.cream}`, `slide-pad`. **Composes** kicker-spike, display-cover, lead, mono-label index. **Focal** a 2–3 line EB Garamond `display-cover` (sentence case, ink) under a coral ✱ kicker. **Chrome** mono index strip (repo · branch). **Accent** the single coral ✱. **Fixed** EB Garamond 400 sentence case, hairline, cream ground. **Free** title, the mono index, layout + how full the frame runs. **Density** free.
+
+### 2 · Statement (statement · move: single EB Garamond line · cream or navy)
+
+**Ground** `{colors.cream}` (or `{colors.navy}` for gravity). **Composes** kicker-spike, display, optional lead. **Focal** one 2-line EB Garamond `display` carrying the change in a sentence — reach for **italic** if it's a stance. **Chrome** mono kicker. **Accent** none — the serif carries it (or one coral word). **Fixed** sentence-case serif. **Free** the line, ground, layout + density. **Density** free.
+
+### 3 · Code Surface (code · move: warm-navy code window · the PR-critical frame)
+
+**Ground** `{colors.cream}` framing a `{colors.navy}` **code-surface** (8px, cream@14% hairline, `navy-elev` title bar + filename in mono). **Composes** mono-label filename, the **`code-*` block** (code-diff / code-typing / code-snippet-_), optional `section-rule`. **Focal** the code panel — the diff / before→after / typed-on snippet. **Chrome** mono filename + status strip. **Accent** syntax coral/teal/amber inside the panel; one coral marker outside (e.g. a `+`/`−` gutter cue). **Fixed** warm-navy surface, mono code, hairline. **Free** which code-_ block, the code (from the diff), how large the panel runs. **Density** dense.
+
+### 4 · Number / Impact (data · move: oversized figure · cream)
+
+**Ground** `{colors.cream}`, `slide-pad`. **Composes** kicker-spike, number-lockup, lead/caption, optional `section-rule`. **Focal** a EB Garamond `number-hero` figure with a mono unit over a 1px rule — the PR impact (`+1,204 / −318`, `17 files`, `2.1× faster`). **Chrome** mono tag. **Accent** the figure in ink; at most one coral unit. **Fixed** serif figure + mono unit, hairline rule. **Free** the figures (from the script), tag, layout + density. **Density** free.
+
+### 5 · Pull-quote (quote · move: EB Garamond italic · cream)
+
+**Ground** `{colors.cream}`. **Composes** kicker-spike, pull-quote, tag-upper cite. **Focal** a EB Garamond **italic** `quote-pull` — a commit message, a reviewer line, or the thesis — with a small Inter uppercase cite (author · role) beneath. **Chrome** mono kicker. **Accent** none, or one coral mark. **Fixed** EB Garamond italic quote + uppercase cite. **Free** quote, attribution, layout + density. **Density** free.
+
+### 6 · Closing / CTA (closer · move: coral voltage · cream or navy)
+
+**Ground** `{colors.cream}` (or `{colors.navy}`). **Composes** display sign-off, coral-callout, optional contributor row (`assets/<login>.png` avatars + mono names). **Focal** a short EB Garamond sign-off with the one **coral-callout** (the CTA or full-bleed band) and, for a "shipped-by" close, a row of hairline-ringed avatar chips. **Chrome** mono index. **Accent** the single coral voltage. **Fixed** one coral moment, hairline avatar rings, sentence-case serif. **Free** sign-off, who ships, layout + density. **Density** free.
+
+## Composition Rules
+
+### Do
+
+- Stand every frame on the **warm cream floor**; gather content on a **half-step tile** surface.
+- Set all display in **EB Garamond, sentence case**, negative-tracked; **Inter 400** body; **JetBrains Mono** kickers (uppercase, 0.16em, coral ✱) + code.
+- Ration **coral to one moment per frame** — CTA, inline link, OR full-bleed band.
+- Elevate with a **1px hairline** + at most one soft warm shadow; reserve **warm navy** for the code/terminal surface.
+- Lead with **one clear focal**; open regions with a **kicker-spike**. Fill the frame as the content wants.
+- Pair a EB Garamond figure with a **mono unit** for every stat; render code via the **`code-*` blocks** on the navy surface.
+
+### Don't
+
+- No pure white, no cool gray, no pure black; no fourth brand hue (navy is structural, syntax colors are decoration).
+- No heavy drop shadow, glow, gradient on content, or tilt — hairline elevation only.
+- No uppercase or title-case EB Garamond display; no sans headline; no serif label; no serif-set numeric unit.
+- No two coral moments in one frame; coral never sets a headline or body run.
+- Don't blow a headline past the measure — step the ramp down.
+
+## Aspect-Ratio Behavior
+
+| Treatment     | 16:9                    | 9:16                        | 1:1                    |
+| ------------- | ----------------------- | --------------------------- | ---------------------- |
+| Cover         | display left, index top | display top, index below    | display, index corner  |
+| Statement     | line left/centered      | line stacked                | centered               |
+| Code Surface  | panel framed in cream   | panel taller, fewer lines   | panel centered, square |
+| Number/Impact | figure left             | figure centered, taller     | centered               |
+| Pull-quote    | quote left              | quote stacked               | centered               |
+| Closing/CTA   | sign-off + avatar row   | sign-off top, avatars below | centered, avatars wrap |
+
+`slide-pad` holds on the short edge; re-step display above the 1.4cqw floor. The code surface keeps
+its hairline + mono chrome on every ratio; the avatar row wraps rather than shrinks below legibility.
+
+## Approved Real Entities
+
+No real customers, logos, or vendors are defined in the source — render any such mark as a
+placeholder. Contributor avatars come from the project's `assets/<login>.png` (staged from the PR's
+people graph); the ✱ spike, hairlines, and the code surface are CSS-only and need no external imagery.
+
+## Numerals & Claims (hard rule)
+
+Never invent figures, stats, diffs, or counts at frame scale. Render slots as `— figure —`,
+`{metric}`, `+N / −M`. Number-lockups, code panels, and impact stats carry placeholders until the
+script (from the PR ingest) supplies real values. Branch names, file counts, and `+/−` totals trace
+to the diff; commit/issue numbers are chrome.
+
+## Pre-Render Self-Audit
+
+- **Squint** — one EB Garamond display moment dominates.
+- **Trinity** — cream floor + tile step + ink voice; coral appears exactly once; warm navy only on the code surface; no cool gray / pure white / fourth hue.
+- **Type** — EB Garamond sentence-case display (negative-tracked); Inter 400 body; JetBrains Mono kickers (uppercase 0.16em, coral ✱) + code; ≥1.4cqw floor.
+- **Depth** — 1px hairline + at most one soft warm shadow; no heavy drop / glow / gradient / tilt; 6/8/12px radii.
+- **Code** — code rendered by a `code-*` block on the warm-navy surface; syntax coral/teal/amber; figures paired with a mono unit.
+- **Fabrication** — every numeral / diff traces to the PR, else placeholder.
+
+## Known Gaps
+
+- **Motion intentionally out of scope.** frame.md specifies composition only. Claude's motion register — short cross-dissolves, no overshoot/bounce/elastic, coral the only "draw-on", numbers count up, code types on line by line — lives in the workflow's `motion-language.md` + `hyperframes-animation`, not here.
+- **EB Garamond + Inter + JetBrains Mono ship as licensed local WOFF2 assets with this preset.** `build-frame.mjs` stages weights 400 + 700 into `assets/fonts/` and appends the exact `@font-face` block to the generated `frame.md`, so Studio, snapshots, and renders resolve them offline without a first-run Google Fonts fetch. 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-media/hyperframes-creative/frame-presets/claude/caption-skin.html b/.claude/skills-media/hyperframes-creative/frame-presets/claude/caption-skin.html
new file mode 100644
index 000000000..32b657bdf
--- /dev/null
+++ b/.claude/skills-media/hyperframes-creative/frame-presets/claude/caption-skin.html
@@ -0,0 +1,224 @@
+<!--
+  Claude — caption skin (preset-local source).
+
+  This is the preset's own lower-third karaoke caption look. product-launch-video's
+  (and pr-to-video's) Step 2 copies it into the project as caption-skin.html;
+  captions.mjs then fills the three reserved holes, wraps the fragment in a
+  <template>, and writes compositions/captions.html:
+    · the empty GROUPS array            → the engine's scene-aware word groups
+    · the 0 duration + 0 width/height   → real total + canvas size
+    · the empty data-brand-tokens style → :root tokens derived from the project's frame.md
+
+  Token contract — reference ONLY this fixed vocab (captions.mjs injects it from
+  frame.md, so the Step-2 brand overlay flows through; each var has a claude literal
+  fallback for standalone preview):
+    --cap-ink · --cap-canvas · --cap-accent · --cap-accent-2 · --font-display ·
+    --font-body · --cap-band-top · --cap-band-height
+  Hooks (do not rename): .caption-group / .caption-word + states .is-active / .is-spoken,
+  root data-composition-id="captions", timeline at window.__timelines["captions"].
+  State changes use gsap.set({className}) (applied on the engine's frame-by-frame seek);
+  never tl.call() callbacks (seek does not fire them → wrong state on render).
+
+  Visual: a warm cream card lifted off the page on a 1px hairline ink border + one soft
+  warm shadow — claude's only elevation language, no tilt, editorial and precise.
+  EB Garamond sentence case, warm-ink glyphs. Upcoming words sit in faint ink; the current
+  word reads in full ink under a 3px coral "voltage" underline (the brand's inline-link
+  gesture, border-bottom = underline without layout shift); spoken words settle to solid
+  ink, underline cleared.
+-->
+<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+
+<!-- captions.mjs injects the project's :root tokens here -->
+<style data-brand-tokens></style>
+
+<style>
+  #captions-root {
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+  }
+  .caption-layer {
+    position: absolute;
+    inset: 0;
+    z-index: 20;
+    pointer-events: none;
+  }
+  /* the keep-out band, from captionBand(H) — frame content stays above it */
+  .caption-stage {
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: var(--cap-band-top, 900px);
+    height: var(--cap-band-height, 180px);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .caption-group {
+    /* every group is absolutely stacked over the SAME band — exactly one shown at a
+       time via opacity. Must be absolute: in-flow groups would lay out side-by-side. */
+    position: absolute;
+    inset: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    opacity: 0;
+  }
+
+  /* THE lifted cream card — warm cream fill, 1px hairline ink border, one soft warm
+     shadow (claude's only elevation language), 12px radius, no tilt */
+  .caption-pill {
+    max-width: 78%;
+    padding: 22px 44px 26px;
+    background: var(--cap-canvas, #faf9f5);
+    border: 1px solid color-mix(in srgb, var(--cap-ink, #141413) 12%, transparent);
+    border-radius: 12px;
+    box-shadow:
+      0 1px 3px color-mix(in srgb, var(--cap-ink, #141413) 8%, transparent),
+      0 4px 16px color-mix(in srgb, var(--cap-ink, #141413) 4%, transparent);
+  }
+  .caption-line {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    gap: 0.12em 0.3em;
+    font-family: var(--font-display, "EB Garamond"), Georgia, serif;
+    font-weight: 500;
+    font-size: clamp(40px, 4.4vw, 56px);
+    line-height: 1.24;
+    letter-spacing: -0.02em;
+  }
+
+  /* upcoming — faint warm ink, no underline */
+  .caption-word {
+    display: inline-block;
+    padding: 0 0.02em 0.06em;
+    color: color-mix(in srgb, var(--cap-ink, #141413) 40%, var(--cap-canvas, #faf9f5));
+    border-bottom: 3px solid transparent;
+  }
+  /* current word — full ink under the coral voltage underline (the brand's signature
+     inline-link gesture; border-bottom = underline without layout shift) */
+  .caption-word.is-active {
+    color: var(--cap-ink, #141413);
+    border-bottom: 3px solid var(--cap-accent, #cc785c);
+  }
+  /* already spoken — solid warm ink, underline cleared */
+  .caption-word.is-spoken {
+    color: var(--cap-ink, #141413);
+    border-bottom: 3px solid transparent;
+  }
+
+  /* optional per-word accents (dormant until a word-classer tags them) */
+  /* brand / key term — the expressive EB Garamond italic */
+  .caption-word.cap-brand {
+    font-style: italic;
+    color: var(--cap-ink, #141413);
+  }
+  .caption-word.cap-brand.is-active {
+    border-bottom: 3px solid var(--cap-accent, #cc785c);
+  }
+  /* numerals / data — slightly recessed warm ink */
+  .caption-word.cap-num {
+    color: color-mix(in srgb, var(--cap-ink, #141413) 72%, var(--cap-canvas, #faf9f5));
+  }
+  /* emphasis — a persistent coral voltage underline */
+  .caption-word.cap-cta {
+    border-bottom: 3px solid var(--cap-accent-2, #b5654a);
+    color: var(--cap-ink, #141413);
+  }
+
+  @media (max-aspect-ratio: 9/16) {
+    .caption-pill {
+      max-width: 92%;
+    }
+    .caption-line {
+      font-size: clamp(34px, 5.4vw, 46px);
+    }
+  }
+</style>
+
+<div
+  id="captions-root"
+  data-composition-id="captions"
+  data-timeline-locked
+  data-start="0"
+  data-duration="0"
+  data-fps="30"
+  data-width="0"
+  data-height="0"
+>
+  <div class="caption-layer" aria-hidden="true">
+    <div id="caption-stage" class="caption-stage"></div>
+  </div>
+</div>
+
+<script>
+  // captions.mjs injects the engine's scene-aware groups + real duration here.
+  var GROUPS = [];
+  var DURATION = 0;
+
+  (function () {
+    var stage = document.getElementById("caption-stage");
+
+    // build DOM: one .caption-group per group, .caption-word per word
+    GROUPS.forEach(function (group, g) {
+      var groupEl = document.createElement("div");
+      groupEl.className = "caption-group";
+      groupEl.id = "caption-group-" + g;
+      var pill = document.createElement("div");
+      pill.className = "caption-pill";
+      var line = document.createElement("div");
+      line.className = "caption-line";
+      (group.words || []).forEach(function (w, i) {
+        var span = document.createElement("span");
+        span.className = "caption-word";
+        span.id = "caption-word-" + g + "-" + i;
+        span.textContent = String(w.text);
+        line.appendChild(span);
+      });
+      pill.appendChild(line);
+      groupEl.appendChild(pill);
+      stage.appendChild(groupEl);
+    });
+
+    window.__timelines = window.__timelines || {};
+    var tl = gsap.timeline({ paused: true });
+
+    GROUPS.forEach(function (group, g) {
+      var groupEl = document.getElementById("caption-group-" + g);
+      var words = group.words || [];
+      var next = GROUPS[g + 1];
+      var isLast = g === GROUPS.length - 1;
+      var start = Math.max(0, Number(group.start));
+      var end = isLast ? DURATION : Math.min(Number(next.start), Number(group.end) + 0.3);
+      if (end <= start) end = start + 0.01;
+
+      // group on/off — exactly one group visible at a time
+      tl.set(groupEl, { opacity: 1 }, start);
+      tl.set(groupEl, { opacity: 0 }, end);
+
+      // 3-state karaoke via className SETS — seek-safe (gsap.set applies on the
+      // engine's frame-by-frame seek; .call callbacks would NOT fire).
+      words.forEach(function (w, i) {
+        var el = document.getElementById("caption-word-" + g + "-" + i);
+        var at = Math.max(start, Number(w.start));
+        tl.set(el, { className: "caption-word" }, start); // upcoming (also resets on reverse-seek)
+        tl.set(el, { className: "caption-word is-active" }, at); // current
+        tl.fromTo(el, { scale: 0.98 }, { scale: 1, duration: 0.16, ease: "power1.out" }, at);
+        if (i + 1 < words.length) {
+          var nextAt = Math.max(start, Number(words[i + 1].start));
+          tl.set(el, { className: "caption-word is-spoken" }, nextAt); // demote when next activates
+        }
+      });
+      if (words.length) {
+        var lastEl = document.getElementById("caption-word-" + g + "-" + (words.length - 1));
+        var lastSpoken = Math.min(end, Number(words[words.length - 1].end) + 0.1);
+        tl.set(lastEl, { className: "caption-word is-spoken" }, lastSpoken);
+      }
+    });
+
+    // full-span anchor so the sub-comp timeline spans the whole video
+    tl.to({}, { duration: DURATION }, 0);
+    window.__timelines["captions"] = tl;
+  })();
+</script>
diff --git a/.claude/skills-media/hyperframes-creative/frame-presets/claude/fonts/EBGaramond-400.woff2 b/.claude/skills-media/hyperframes-creative/frame-presets/claude/fonts/EBGaramond-400.woff2
new file mode 100644
index 000000000..ffed311d3
Binary files /dev/null and b/.claude/skills-media/hyperframes-creative/frame-presets/claude/fonts/EBGaramond-400.woff2 differ
diff --git a/.claude/skills-media/hyperframes-creative/frame-presets/claude/fonts/EBGaramond-700.woff2 b/.claude/skills-media/hyperframes-creative/frame-presets/claude/fonts/EBGaramond-700.woff2
new file mode 100644
index 000000000..85d520902
Binary files /dev/null and b/.claude/skills-media/hyperframes-creative/frame-presets/claude/fonts/EBGaramond-700.woff2 differ
diff --git a/.claude/skills-media/hyperframes-creative/frame-presets/claude/fonts/Inter-400.woff2 b/.claude/skills-media/hyperframes-creative/frame-presets/claude/fonts/Inter-400.woff2
new file mode 100644
index 000000000..f15b025d6
Binary files /dev/null and b/.claude/skills-media/hyperframes-creative/frame-presets/claude/fonts/Inter-400.woff2 differ
diff --git a/.claude/skills-media/hyperframes-creative/frame-presets/claude/fonts/Inter-700.woff2 b/.claude/skills-media/hyperframes-creative/frame-presets/claude/fonts/Inter-700.woff2
new file mode 100644
index 000000000..a68fb101c
Binary files /dev/null and b/.claude/skills-media/hyperframes-creative/frame-presets/claude/fonts/Inter-700.woff2 differ
diff --git a/.claude/skills-media/hyperframes-creative/frame-presets/claude/fonts/JetBrainsMono-400.woff2 b/.claude/skills-media/hyperframes-creative/frame-presets/claude/fonts/JetBrainsMono-400.woff2
new file mode 100644
index 000000000..585887339
Binary files /dev/null and b/.claude/skills-media/hyperframes-creative/frame-presets/claude/fonts/JetBrainsMono-400.woff2 differ
diff --git a/.claude/skills-media/hyperframes-creative/frame-presets/claude/fonts/JetBrainsMono-700.woff2 b/.claude/skills-media/hyperframes-creative/frame-presets/claude/fonts/JetBrainsMono-700.woff2
new file mode 100644
index 000000000..3a4e333fc
Binary files /dev/null and b/.claude/skills-media/hyperframes-creative/frame-presets/claude/fonts/JetBrainsMono-700.woff2 differ
diff --git a/.claude/skills-media/hyperframes-creative/frame-presets/claude/fonts/OFL-eb-garamond.txt b/.claude/skills-media/hyperframes-creative/frame-presets/claude/fonts/OFL-eb-garamond.txt
new file mode 100644
index 000000000..da3ca8959
--- /dev/null
+++ b/.claude/skills-media/hyperframes-creative/frame-presets/claude/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-media/hyperframes-creative/frame-presets/claude/fonts/OFL-inter.txt b/.claude/skills-media/hyperframes-creative/frame-presets/claude/fonts/OFL-inter.txt
new file mode 100644
index 000000000..40589daa9
--- /dev/null
+++ b/.claude/skills-media/hyperframes-creative/frame-presets/claude/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-media/hyperframes-creative/frame-presets/claude/fonts/OFL-jetbrains-mono.txt b/.claude/skills-media/hyperframes-creative/frame-presets/claude/fonts/OFL-jetbrains-mono.txt
new file mode 100644
index 000000000..8f7ed6711
--- /dev/null
+++ b/.claude/skills-media/hyperframes-creative/frame-presets/claude/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-media/hyperframes-creative/frame-presets/claude/frame-showcase.html b/.claude/skills-media/hyperframes-creative/frame-presets/claude/frame-showcase.html
new file mode 100644
index 000000000..67a98a8ab
--- /dev/null
+++ b/.claude/skills-media/hyperframes-creative/frame-presets/claude/frame-showcase.html
@@ -0,0 +1,1439 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width,initial-scale=1" />
+    <title>Claude</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">anthropics/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> Claude</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-media/hyperframes-creative/frame-presets/cobalt-grid/FRAME.md b/.claude/skills-media/hyperframes-creative/frame-presets/cobalt-grid/FRAME.md
new file mode 100644
index 000000000..af52eec8f
--- /dev/null
+++ b/.claude/skills-media/hyperframes-creative/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-media/hyperframes-creative/frame-presets/cobalt-grid/caption-skin.html b/.claude/skills-media/hyperframes-creative/frame-presets/cobalt-grid/caption-skin.html
new file mode 100644
index 000000000..e604347cf
--- /dev/null
+++ b/.claude/skills-media/hyperframes-creative/frame-presets/cobalt-grid/caption-skin.html
@@ -0,0 +1,238 @@
+<!--
+  Cobalt Grid — caption skin (preset-local source).
+
+  This is the preset's own lower-third karaoke caption look. product-launch-video's
+  Step 2 copies it into the project as caption-skin.html; captions.mjs then fills the
+  three reserved holes, wraps the fragment in a <template>, and writes
+  compositions/captions.html:
+    · the empty GROUPS array            → the engine's scene-aware word groups
+    · the 0 duration + 0 width/height   → real total + canvas size
+    · the empty data-brand-tokens style → :root tokens derived from the project's frame.md
+
+  Token contract — reference ONLY this fixed vocab (captions.mjs injects it from
+  frame.md, so the Step-2 brand overlay flows through; each var has a 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>
+
+<!-- captions.mjs injects the project's :root tokens here -->
+<style data-brand-tokens></style>
+
+<style>
+  #captions-root {
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+  }
+  .caption-layer {
+    position: absolute;
+    inset: 0;
+    z-index: 20;
+    pointer-events: none;
+  }
+  /* the keep-out band, from captionBand(H) — frame content stays above it */
+  .caption-stage {
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: var(--cap-band-top, 900px);
+    height: var(--cap-band-height, 180px);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .caption-group {
+    /* every group is absolutely stacked over the SAME band — exactly one shown at a
+       time via opacity. Must be absolute: in-flow groups would lay out side-by-side. */
+    position: absolute;
+    inset: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    opacity: 0;
+  }
+
+  /* THE 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>
+  // captions.mjs injects the engine's scene-aware groups + real duration here.
+  var GROUPS = [];
+  var DURATION = 0;
+
+  (function () {
+    var stage = document.getElementById("caption-stage");
+
+    // build DOM: one .caption-group per group, .caption-word per word
+    GROUPS.forEach(function (group, g) {
+      var groupEl = document.createElement("div");
+      groupEl.className = "caption-group";
+      groupEl.id = "caption-group-" + g;
+      var pill = document.createElement("div");
+      pill.className = "caption-pill";
+      var line = document.createElement("div");
+      line.className = "caption-line";
+      (group.words || []).forEach(function (w, i) {
+        var span = document.createElement("span");
+        span.className = "caption-word";
+        span.id = "caption-word-" + g + "-" + i;
+        span.textContent = String(w.text);
+        line.appendChild(span);
+      });
+      pill.appendChild(line);
+      groupEl.appendChild(pill);
+      stage.appendChild(groupEl);
+    });
+
+    window.__timelines = window.__timelines || {};
+    var tl = gsap.timeline({ paused: true });
+
+    GROUPS.forEach(function (group, g) {
+      var groupEl = document.getElementById("caption-group-" + g);
+      var words = group.words || [];
+      var next = GROUPS[g + 1];
+      var isLast = g === GROUPS.length - 1;
+      var start = Math.max(0, Number(group.start));
+      var end = isLast ? DURATION : Math.min(Number(next.start), Number(group.end) + 0.3);
+      if (end <= start) end = start + 0.01;
+
+      // group on/off — exactly one group visible at a time
+      tl.set(groupEl, { opacity: 1 }, start);
+      tl.set(groupEl, { opacity: 0 }, end);
+
+      // 3-state karaoke via className SETS — seek-safe (gsap.set applies on the
+      // engine's frame-by-frame seek; .call callbacks would NOT fire).
+      words.forEach(function (w, i) {
+        var el = document.getElementById("caption-word-" + g + "-" + i);
+        var at = Math.max(start, Number(w.start));
+        tl.set(el, { className: "caption-word" }, start); // upcoming (also resets on reverse-seek)
+        tl.set(el, { className: "caption-word is-active" }, at); // current
+        tl.fromTo(el, { scale: 0.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-media/hyperframes-creative/frame-presets/cobalt-grid/frame-showcase.html b/.claude/skills-media/hyperframes-creative/frame-presets/cobalt-grid/frame-showcase.html
new file mode 100644
index 000000000..d9449880f
--- /dev/null
+++ b/.claude/skills-media/hyperframes-creative/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-media/hyperframes-creative/frame-presets/coral/FRAME.md b/.claude/skills-media/hyperframes-creative/frame-presets/coral/FRAME.md
new file mode 100644
index 000000000..0c73b04ac
--- /dev/null
+++ b/.claude/skills-media/hyperframes-creative/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-media/hyperframes-creative/frame-presets/coral/caption-skin.html b/.claude/skills-media/hyperframes-creative/frame-presets/coral/caption-skin.html
new file mode 100644
index 000000000..41f2a5960
--- /dev/null
+++ b/.claude/skills-media/hyperframes-creative/frame-presets/coral/caption-skin.html
@@ -0,0 +1,226 @@
+<!--
+  Coral — caption skin (preset-local source).
+
+  This is the preset's own lower-third karaoke caption look. product-launch-video's
+  Step 2 copies it into the project as caption-skin.html; captions.mjs then fills the
+  three reserved holes, wraps the fragment in a <template>, and writes
+  compositions/captions.html:
+    · the empty GROUPS array            → the engine's scene-aware word groups
+    · the 0 duration + 0 width/height   → real total + canvas size
+    · the empty data-brand-tokens style → :root tokens derived from the project's frame.md
+
+  Token contract — reference ONLY this fixed vocab (captions.mjs injects it from
+  frame.md, so the Step-2 brand overlay flows through; each var has a 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>
+
+<!-- captions.mjs injects the project's :root tokens here -->
+<style data-brand-tokens></style>
+
+<style>
+  #captions-root {
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+  }
+  .caption-layer {
+    position: absolute;
+    inset: 0;
+    z-index: 20;
+    pointer-events: none;
+  }
+  /* the keep-out band, from captionBand(H) — frame content stays above it */
+  .caption-stage {
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: var(--cap-band-top, 900px);
+    height: var(--cap-band-height, 180px);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .caption-group {
+    /* every group is absolutely stacked over the SAME band — exactly one shown at a
+       time via opacity. Must be absolute: in-flow groups would lay out side-by-side. */
+    position: absolute;
+    inset: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    opacity: 0;
+  }
+
+  /* THE 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>
+  // captions.mjs injects the engine's scene-aware groups + real duration here.
+  var GROUPS = [];
+  var DURATION = 0;
+
+  (function () {
+    var stage = document.getElementById("caption-stage");
+
+    // build DOM: one .caption-group per group, .caption-word per word
+    GROUPS.forEach(function (group, g) {
+      var groupEl = document.createElement("div");
+      groupEl.className = "caption-group";
+      groupEl.id = "caption-group-" + g;
+      var pill = document.createElement("div");
+      pill.className = "caption-pill";
+      var line = document.createElement("div");
+      line.className = "caption-line";
+      (group.words || []).forEach(function (w, i) {
+        var span = document.createElement("span");
+        span.className = "caption-word";
+        span.id = "caption-word-" + g + "-" + i;
+        span.textContent = String(w.text);
+        line.appendChild(span);
+      });
+      pill.appendChild(line);
+      groupEl.appendChild(pill);
+      stage.appendChild(groupEl);
+    });
+
+    window.__timelines = window.__timelines || {};
+    var tl = gsap.timeline({ paused: true });
+
+    GROUPS.forEach(function (group, g) {
+      var groupEl = document.getElementById("caption-group-" + g);
+      var words = group.words || [];
+      var next = GROUPS[g + 1];
+      var isLast = g === GROUPS.length - 1;
+      var start = Math.max(0, Number(group.start));
+      var end = isLast ? DURATION : Math.min(Number(next.start), Number(group.end) + 0.3);
+      if (end <= start) end = start + 0.01;
+
+      // group on/off — exactly one group visible at a time
+      tl.set(groupEl, { opacity: 1 }, start);
+      tl.set(groupEl, { opacity: 0 }, end);
+
+      // 3-state karaoke via className SETS — seek-safe (gsap.set applies on the
+      // engine's frame-by-frame seek; .call callbacks would NOT fire).
+      words.forEach(function (w, i) {
+        var el = document.getElementById("caption-word-" + g + "-" + i);
+        var at = Math.max(start, Number(w.start));
+        tl.set(el, { className: "caption-word" }, start); // upcoming (also resets on reverse-seek)
+        tl.set(el, { className: "caption-word is-active" }, at); // current
+        tl.fromTo(el, { scale: 0.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-media/hyperframes-creative/frame-presets/coral/frame-showcase.html b/.claude/skills-media/hyperframes-creative/frame-presets/coral/frame-showcase.html
new file mode 100644
index 000000000..ae87659f3
--- /dev/null
+++ b/.claude/skills-media/hyperframes-creative/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-media/hyperframes-creative/frame-presets/creative-mode/FRAME.md b/.claude/skills-media/hyperframes-creative/frame-presets/creative-mode/FRAME.md
new file mode 100644
index 000000000..e00e6fed6
--- /dev/null
+++ b/.claude/skills-media/hyperframes-creative/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-media/hyperframes-creative/frame-presets/creative-mode/caption-skin.html b/.claude/skills-media/hyperframes-creative/frame-presets/creative-mode/caption-skin.html
new file mode 100644
index 000000000..231e39bf0
--- /dev/null
+++ b/.claude/skills-media/hyperframes-creative/frame-presets/creative-mode/caption-skin.html
@@ -0,0 +1,227 @@
+<!--
+  Creative Mode — caption skin (preset-local source).
+
+  This is the preset's own lower-third karaoke caption look. product-launch-video's
+  Step 2 copies it into the project as caption-skin.html; captions.mjs then fills the
+  three reserved holes, wraps the fragment in a <template>, and writes
+  compositions/captions.html:
+    · the empty GROUPS array            → the engine's scene-aware word groups
+    · the 0 duration + 0 width/height   → real total + canvas size
+    · the empty data-brand-tokens style → :root tokens derived from the project's frame.md
+
+  Token contract — reference ONLY this fixed vocab (captions.mjs injects it from
+  frame.md, so the Step-2 brand overlay flows through; each var has a 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>
+
+<!-- captions.mjs injects the project's :root tokens here -->
+<style data-brand-tokens></style>
+
+<style>
+  #captions-root {
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+  }
+  .caption-layer {
+    position: absolute;
+    inset: 0;
+    z-index: 20;
+    pointer-events: none;
+  }
+  /* the keep-out band, from captionBand(H) — frame content stays above it */
+  .caption-stage {
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: var(--cap-band-top, 900px);
+    height: var(--cap-band-height, 180px);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .caption-group {
+    /* every group is absolutely stacked over the SAME band — exactly one shown at a
+       time via opacity. Must be absolute: in-flow groups would lay out side-by-side. */
+    position: absolute;
+    inset: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    opacity: 0;
+  }
+
+  /* THE 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>
+  // captions.mjs injects the engine's scene-aware groups + real duration here.
+  var GROUPS = [];
+  var DURATION = 0;
+
+  (function () {
+    var stage = document.getElementById("caption-stage");
+
+    // build DOM: one .caption-group per group, .caption-word per word
+    GROUPS.forEach(function (group, g) {
+      var groupEl = document.createElement("div");
+      groupEl.className = "caption-group";
+      groupEl.id = "caption-group-" + g;
+      var pill = document.createElement("div");
+      pill.className = "caption-pill";
+      var line = document.createElement("div");
+      line.className = "caption-line";
+      (group.words || []).forEach(function (w, i) {
+        var span = document.createElement("span");
+        span.className = "caption-word";
+        span.id = "caption-word-" + g + "-" + i;
+        span.textContent = String(w.text);
+        line.appendChild(span);
+      });
+      pill.appendChild(line);
+      groupEl.appendChild(pill);
+      stage.appendChild(groupEl);
+    });
+
+    window.__timelines = window.__timelines || {};
+    var tl = gsap.timeline({ paused: true });
+
+    GROUPS.forEach(function (group, g) {
+      var groupEl = document.getElementById("caption-group-" + g);
+      var words = group.words || [];
+      var next = GROUPS[g + 1];
+      var isLast = g === GROUPS.length - 1;
+      var start = Math.max(0, Number(group.start));
+      var end = isLast ? DURATION : Math.min(Number(next.start), Number(group.end) + 0.3);
+      if (end <= start) end = start + 0.01;
+
+      // group on/off — exactly one group visible at a time
+      tl.set(groupEl, { opacity: 1 }, start);
+      tl.set(groupEl, { opacity: 0 }, end);
+
+      // 3-state karaoke via className SETS — seek-safe (gsap.set applies on the
+      // engine's frame-by-frame seek; .call callbacks would NOT fire).
+      words.forEach(function (w, i) {
+        var el = document.getElementById("caption-word-" + g + "-" + i);
+        var at = Math.max(start, Number(w.start));
+        tl.set(el, { className: "caption-word" }, start); // upcoming (also resets on reverse-seek)
+        tl.set(el, { className: "caption-word is-active" }, at); // current
+        tl.fromTo(el, { scale: 0.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-media/hyperframes-creative/frame-presets/creative-mode/frame-showcase.html b/.claude/skills-media/hyperframes-creative/frame-presets/creative-mode/frame-showcase.html
new file mode 100644
index 000000000..e540e40a3
--- /dev/null
+++ b/.claude/skills-media/hyperframes-creative/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-media/hyperframes-creative/frame-presets/daisy-days/FRAME.md b/.claude/skills-media/hyperframes-creative/frame-presets/daisy-days/FRAME.md
new file mode 100644
index 000000000..ed3ebf49e
--- /dev/null
+++ b/.claude/skills-media/hyperframes-creative/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-media/hyperframes-creative/frame-presets/daisy-days/caption-skin.html b/.claude/skills-media/hyperframes-creative/frame-presets/daisy-days/caption-skin.html
new file mode 100644
index 000000000..6431baaa6
--- /dev/null
+++ b/.claude/skills-media/hyperframes-creative/frame-presets/daisy-days/caption-skin.html
@@ -0,0 +1,230 @@
+<!--
+  Daisy Days — caption skin (preset-local source).
+
+  This is the preset's own lower-third karaoke caption look. product-launch-video's
+  Step 2 copies it into the project as caption-skin.html; captions.mjs then fills the
+  three reserved holes, wraps the fragment in a <template>, and writes
+  compositions/captions.html:
+    · the empty GROUPS array            → the engine's scene-aware word groups
+    · the 0 duration + 0 width/height   → real total + canvas size
+    · the empty data-brand-tokens style → :root tokens derived from the project's frame.md
+
+  Token contract — reference ONLY this fixed vocab (captions.mjs injects it from
+  frame.md, so the Step-2 brand overlay flows through; each var has a 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>
+
+<!-- captions.mjs injects the project's :root tokens here -->
+<style data-brand-tokens></style>
+
+<style>
+  #captions-root {
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+  }
+  .caption-layer {
+    position: absolute;
+    inset: 0;
+    z-index: 20;
+    pointer-events: none;
+  }
+  /* the keep-out band, from captionBand(H) — frame content stays above it */
+  .caption-stage {
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: var(--cap-band-top, 900px);
+    height: var(--cap-band-height, 180px);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .caption-group {
+    /* every group is absolutely stacked over the SAME band — exactly one shown at a
+       time via opacity. Must be absolute: in-flow groups would lay out side-by-side. */
+    position: absolute;
+    inset: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    opacity: 0;
+  }
+
+  /* THE 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>
+  // captions.mjs injects the engine's scene-aware groups + real duration here.
+  var GROUPS = [];
+  var DURATION = 0;
+
+  (function () {
+    var stage = document.getElementById("caption-stage");
+
+    // build DOM: one .caption-group per group, .caption-word per word
+    GROUPS.forEach(function (group, g) {
+      var groupEl = document.createElement("div");
+      groupEl.className = "caption-group";
+      groupEl.id = "caption-group-" + g;
+      var pill = document.createElement("div");
+      pill.className = "caption-pill";
+      var line = document.createElement("div");
+      line.className = "caption-line";
+      (group.words || []).forEach(function (w, i) {
+        var span = document.createElement("span");
+        span.className = "caption-word";
+        span.id = "caption-word-" + g + "-" + i;
+        span.textContent = String(w.text);
+        line.appendChild(span);
+      });
+      pill.appendChild(line);
+      groupEl.appendChild(pill);
+      stage.appendChild(groupEl);
+    });
+
+    window.__timelines = window.__timelines || {};
+    var tl = gsap.timeline({ paused: true });
+
+    GROUPS.forEach(function (group, g) {
+      var groupEl = document.getElementById("caption-group-" + g);
+      var words = group.words || [];
+      var next = GROUPS[g + 1];
+      var isLast = g === GROUPS.length - 1;
+      var start = Math.max(0, Number(group.start));
+      var end = isLast ? DURATION : Math.min(Number(next.start), Number(group.end) + 0.3);
+      if (end <= start) end = start + 0.01;
+
+      // group on/off — exactly one group visible at a time
+      tl.set(groupEl, { opacity: 1 }, start);
+      tl.set(groupEl, { opacity: 0 }, end);
+
+      // 3-state karaoke via className SETS — seek-safe (gsap.set applies on the
+      // engine's frame-by-frame seek; .call callbacks would NOT fire).
+      words.forEach(function (w, i) {
+        var el = document.getElementById("caption-word-" + g + "-" + i);
+        var at = Math.max(start, Number(w.start));
+        tl.set(el, { className: "caption-word" }, start); // upcoming (also resets on reverse-seek)
+        tl.set(el, { className: "caption-word is-active" }, at); // current
+        tl.fromTo(el, { scale: 0.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-media/hyperframes-creative/frame-presets/daisy-days/frame-showcase.html b/.claude/skills-media/hyperframes-creative/frame-presets/daisy-days/frame-showcase.html
new file mode 100644
index 000000000..c577bdbab
--- /dev/null
+++ b/.claude/skills-media/hyperframes-creative/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-media/hyperframes-creative/frame-presets/editorial-forest/FRAME.md b/.claude/skills-media/hyperframes-creative/frame-presets/editorial-forest/FRAME.md
new file mode 100644
index 000000000..83e2594f6
--- /dev/null
+++ b/.claude/skills-media/hyperframes-creative/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-media/hyperframes-creative/frame-presets/editorial-forest/caption-skin.html b/.claude/skills-media/hyperframes-creative/frame-presets/editorial-forest/caption-skin.html
new file mode 100644
index 000000000..b3d289867
--- /dev/null
+++ b/.claude/skills-media/hyperframes-creative/frame-presets/editorial-forest/caption-skin.html
@@ -0,0 +1,223 @@
+<!--
+  Editorial Forest — caption skin (preset-local source).
+
+  This is the preset's own lower-third karaoke caption look. product-launch-video's
+  Step 2 copies it into the project as caption-skin.html; captions.mjs then fills the
+  three reserved holes, wraps the fragment in a <template>, and writes
+  compositions/captions.html:
+    · the empty GROUPS array            → the engine's scene-aware word groups
+    · the 0 duration + 0 width/height   → real total + canvas size
+    · the empty data-brand-tokens style → :root tokens derived from the project's frame.md
+
+  Token contract — reference ONLY this fixed vocab (captions.mjs injects it from
+  frame.md, so the Step-2 brand overlay flows through; each var has 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>
+
+<!-- captions.mjs injects the project's :root tokens here -->
+<style data-brand-tokens></style>
+
+<style>
+  #captions-root {
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+  }
+  .caption-layer {
+    position: absolute;
+    inset: 0;
+    z-index: 20;
+    pointer-events: none;
+  }
+  /* the keep-out band, from captionBand(H) — frame content stays above it */
+  .caption-stage {
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: var(--cap-band-top, 900px);
+    height: var(--cap-band-height, 180px);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .caption-group {
+    /* every group is absolutely stacked over the SAME band — exactly one shown at a
+       time via opacity. Must be absolute: in-flow groups would lay out side-by-side. */
+    position: absolute;
+    inset: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    opacity: 0;
+  }
+
+  /* THE 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>
+  // captions.mjs injects the engine's scene-aware groups + real duration here.
+  var GROUPS = [];
+  var DURATION = 0;
+
+  (function () {
+    var stage = document.getElementById("caption-stage");
+
+    // build DOM: one .caption-group per group, .caption-word per word
+    GROUPS.forEach(function (group, g) {
+      var groupEl = document.createElement("div");
+      groupEl.className = "caption-group";
+      groupEl.id = "caption-group-" + g;
+      var pill = document.createElement("div");
+      pill.className = "caption-pill";
+      var line = document.createElement("div");
+      line.className = "caption-line";
+      (group.words || []).forEach(function (w, i) {
+        var span = document.createElement("span");
+        span.className = "caption-word";
+        span.id = "caption-word-" + g + "-" + i;
+        span.textContent = String(w.text);
+        line.appendChild(span);
+      });
+      pill.appendChild(line);
+      groupEl.appendChild(pill);
+      stage.appendChild(groupEl);
+    });
+
+    window.__timelines = window.__timelines || {};
+    var tl = gsap.timeline({ paused: true });
+
+    GROUPS.forEach(function (group, g) {
+      var groupEl = document.getElementById("caption-group-" + g);
+      var words = group.words || [];
+      var next = GROUPS[g + 1];
+      var isLast = g === GROUPS.length - 1;
+      var start = Math.max(0, Number(group.start));
+      var end = isLast ? DURATION : Math.min(Number(next.start), Number(group.end) + 0.3);
+      if (end <= start) end = start + 0.01;
+
+      // group on/off — exactly one group visible at a time
+      tl.set(groupEl, { opacity: 1 }, start);
+      tl.set(groupEl, { opacity: 0 }, end);
+
+      // 3-state karaoke via className SETS — seek-safe (gsap.set applies on the
+      // engine's frame-by-frame seek; .call callbacks would NOT fire).
+      words.forEach(function (w, i) {
+        var el = document.getElementById("caption-word-" + g + "-" + i);
+        var at = Math.max(start, Number(w.start));
+        tl.set(el, { className: "caption-word" }, start); // upcoming (also resets on reverse-seek)
+        tl.set(el, { className: "caption-word is-active" }, at); // current
+        tl.fromTo(el, { scale: 0.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-media/hyperframes-creative/frame-presets/editorial-forest/frame-showcase.html b/.claude/skills-media/hyperframes-creative/frame-presets/editorial-forest/frame-showcase.html
new file mode 100644
index 000000000..c5c08718f
--- /dev/null
+++ b/.claude/skills-media/hyperframes-creative/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-media/hyperframes-creative/palettes/bold-energetic.md b/.claude/skills-media/hyperframes-creative/palettes/bold-energetic.md
new file mode 100644
index 000000000..e60e2d76a
--- /dev/null
+++ b/.claude/skills-media/hyperframes-creative/palettes/bold-energetic.md
@@ -0,0 +1,14 @@
+# Bold / Energetic
+
+Product launches, social media, announcements, high-energy content.
+
+```
+#FFBE0B #FB5607 #FF006E #8338EC #3A86FF
+#F72585 #7209B7 #3A0CA3 #4361EE #4CC9F0
+#EF476F #FFD166 #06D6A0 #118AB2 #073B4C
+#FF595E #FFCA3A #8AC926 #1982C4 #6A4C93
+#9B5DE5 #F15BB5 #FEE440 #00BBF9 #00F5D4
+#390099 #9E0059 #FF0054 #FF5400 #FFBD00
+#3D348B #7678ED #F7B801 #F18701 #F35B04
+#FFBC42 #D81159 #8F2D56 #218380 #73D2DE
+```
diff --git a/.claude/skills-media/hyperframes-creative/palettes/clean-corporate.md b/.claude/skills-media/hyperframes-creative/palettes/clean-corporate.md
new file mode 100644
index 000000000..a4b79c939
--- /dev/null
+++ b/.claude/skills-media/hyperframes-creative/palettes/clean-corporate.md
@@ -0,0 +1,14 @@
+# Clean / Corporate
+
+Explainers, tutorials, presentations, professional content.
+
+```
+#FFFCF2 #CCC5B9 #403D39 #252422 #EB5E28
+#22223B #4A4E69 #9A8C98 #C9ADA7 #F2E9E4
+#3D5A80 #98C1D9 #E0FBFC #EE6C4D #293241
+#2B2D42 #8D99AE #EDF2F4 #EF233C #D90429
+#353535 #3C6E71 #FFFFFF #D9D9D9 #284B63
+#E7ECEF #274C77 #6096BA #A3CEF1 #8B8C89
+#CFDBD5 #E8EDDF #F5CB5C #242423 #333533
+#2F6690 #3A7CA5 #D9DCD6 #16425B #81C3D7
+```
diff --git a/.claude/skills-media/hyperframes-creative/palettes/dark-premium.md b/.claude/skills-media/hyperframes-creative/palettes/dark-premium.md
new file mode 100644
index 000000000..84f81d562
--- /dev/null
+++ b/.claude/skills-media/hyperframes-creative/palettes/dark-premium.md
@@ -0,0 +1,14 @@
+# Dark / Premium
+
+Tech, finance, luxury, cinematic content.
+
+```
+#000000 #14213D #FCA311 #E5E5E5 #FFFFFF
+#000814 #001D3D #003566 #FFC300 #FFD60A
+#0D1B2A #1B263B #415A77 #778DA9 #E0E1DD
+#0D1321 #1D2D44 #3E5C76 #748CAB #F0EBD8
+#011627 #FDFFFC #2EC4B6 #E71D36 #FF9F1C
+#0B090A #161A1D #660708 #A4161A #E5383B
+#001427 #708D81 #F4D58D #BF0603 #8D0801
+#001524 #15616D #FFECD1 #FF7D00 #78290F
+```
diff --git a/.claude/skills-media/hyperframes-creative/palettes/jewel-rich.md b/.claude/skills-media/hyperframes-creative/palettes/jewel-rich.md
new file mode 100644
index 000000000..fbd5542b2
--- /dev/null
+++ b/.claude/skills-media/hyperframes-creative/palettes/jewel-rich.md
@@ -0,0 +1,14 @@
+# Jewel / Rich
+
+Luxury, events, sophisticated, high-end content.
+
+```
+#5F0F40 #9A031E #FB8B24 #E36414 #0F4C5C
+#780000 #C1121F #FDF0D5 #003049 #669BBC
+#10002B #240046 #3C096C #5A189A #7B2CBF
+#355070 #6D597A #B56576 #E56B6F #EAAC8B
+#6F1D1B #BB9457 #432818 #99582A #FFE6A7
+#231942 #5E548E #9F86C0 #BE95C4 #E0B1CB
+#461220 #8C2F39 #B23A48 #FCB9B2 #FED0BB
+#780116 #F7B538 #DB7C26 #D8572A #C32F27
+```
diff --git a/.claude/skills-media/hyperframes-creative/palettes/monochrome.md b/.claude/skills-media/hyperframes-creative/palettes/monochrome.md
new file mode 100644
index 000000000..e26d24737
--- /dev/null
+++ b/.claude/skills-media/hyperframes-creative/palettes/monochrome.md
@@ -0,0 +1,14 @@
+# Monochrome
+
+Dramatic, typography-focused, serious content.
+
+```
+#F8F9FA #E9ECEF #DEE2E6 #CED4DA #ADB5BD #6C757D #495057 #343A40 #212529
+#0466C8 #0353A4 #023E7D #002855 #001233
+#012A4A #013A63 #01497C #2A6F97 #468FAF #89C2D9
+#582F0E #7F4F24 #936639 #A68A64 #C2C5AA
+#463F3A #8A817C #BCB8B1 #F4F3EE #E0AFA0
+#03071E #370617 #6A040F #9D0208 #DC2F02 #F48C06 #FFBA08
+#590D22 #800F2F #A4133C #FF4D6D #FF8FA3 #FFCCD5
+#220901 #621708 #941B0C #BC3908 #F6AA1C
+```
diff --git a/.claude/skills-media/hyperframes-creative/palettes/nature-earth.md b/.claude/skills-media/hyperframes-creative/palettes/nature-earth.md
new file mode 100644
index 000000000..cc3cb9d63
--- /dev/null
+++ b/.claude/skills-media/hyperframes-creative/palettes/nature-earth.md
@@ -0,0 +1,14 @@
+# Nature / Earth
+
+Sustainability, outdoor, organic, wellness content.
+
+```
+#606C38 #283618 #FEFAE0 #DDA15E #BC6C25
+#DAD7CD #A3B18A #588157 #3A5A40 #344E41
+#386641 #6A994E #A7C957 #F2E8CF #BC4749
+#CAD2C5 #84A98C #52796F #354F52 #2F3E46
+#F0EAD2 #DDE5B6 #ADC178 #A98467 #6C584C
+#132A13 #31572C #4F772D #90A955 #ECF39E
+#6B9080 #A4C3B2 #CCE3DE #EAF4F4 #F6FFF8
+#233D4D #FE7F2D #FCCA46 #A1C181 #619B8A
+```
diff --git a/.claude/skills-media/hyperframes-creative/palettes/neon-electric.md b/.claude/skills-media/hyperframes-creative/palettes/neon-electric.md
new file mode 100644
index 000000000..94c3e86e8
--- /dev/null
+++ b/.claude/skills-media/hyperframes-creative/palettes/neon-electric.md
@@ -0,0 +1,14 @@
+# Neon / Electric
+
+Gaming, tech, nightlife, Gen Z content.
+
+```
+#F72585 #B5179E #7209B7 #560BAD #3A0CA3
+#70D6FF #FF70A6 #FF9770 #FFD670 #E9FF70
+#7400B8 #6930C3 #5E60CE #5390D9 #48BFE3
+#0B132B #1C2541 #3A506B #5BC0BE #6FFFE9
+#540D6E #EE4266 #FFD23F #3BCEAC #0EAD69
+#2D00F7 #6A00F4 #8900F2 #A100F2 #F20089
+#FF6D00 #FF7900 #FF8500 #FF9100 #240046
+#BBFBFF #8DD8FF #4E71FF #5409DA
+```
diff --git a/.claude/skills-media/hyperframes-creative/palettes/pastel-soft.md b/.claude/skills-media/hyperframes-creative/palettes/pastel-soft.md
new file mode 100644
index 000000000..f4e99c538
--- /dev/null
+++ b/.claude/skills-media/hyperframes-creative/palettes/pastel-soft.md
@@ -0,0 +1,14 @@
+# Pastel / Soft
+
+Fashion, beauty, lifestyle, wellness content.
+
+```
+#CDB4DB #FFC8DD #FFAFCC #BDE0FE #A2D2FF
+#CCD5AE #E9EDC9 #FEFAE0 #FAEDCD #D4A373
+#FFD6FF #E7C6FF #C8B6FF #B8C0FF #BBD0FF
+#FFA69E #FAF3DD #B8F2E6 #AED9E0 #5E6472
+#EDAFB8 #F7E1D7 #DEDBD2 #B0C4B1 #4A5759
+#555B6E #89B0AE #BEE3DB #FAF9F9 #FFD6BA
+#006D77 #83C5BE #EDF6F9 #FFDDD2 #E29578
+#0081A7 #00AFB9 #FDFCDC #FED9B7 #F07167
+```
diff --git a/.claude/skills-media/hyperframes-creative/palettes/warm-editorial.md b/.claude/skills-media/hyperframes-creative/palettes/warm-editorial.md
new file mode 100644
index 000000000..2b1907aac
--- /dev/null
+++ b/.claude/skills-media/hyperframes-creative/palettes/warm-editorial.md
@@ -0,0 +1,14 @@
+# Warm / Editorial
+
+Storytelling, documentaries, case studies, narrative content.
+
+```
+#264653 #2A9D8F #E9C46A #F4A261 #E76F51
+#335C67 #FFF3B0 #E09F3E #9E2A2B #540B0E
+#F4F1DE #E07A5F #3D405B #81B29A #F2CC8F
+#F6BD60 #F7EDE2 #F5CAC3 #84A59D #F28482
+#003049 #D62828 #F77F00 #FCBF49 #EAE2B7
+#588B8B #FFFFFF #FFD5C2 #F28F3B #C8553D
+#283D3B #197278 #EDDDD4 #C44536 #772E25
+#0D3B66 #FAF0CA #F4D35E #EE964B #F95738
+```
diff --git a/.claude/skills-media/hyperframes-creative/references/audio-reactive.md b/.claude/skills-media/hyperframes-creative/references/audio-reactive.md
new file mode 100644
index 000000000..69549bbeb
--- /dev/null
+++ b/.claude/skills-media/hyperframes-creative/references/audio-reactive.md
@@ -0,0 +1,76 @@
+# Audio-Reactive Animation
+
+Drive visuals from music, voice, or sound. Any GSAP-animatable property can respond to pre-extracted audio data.
+
+## Audio Data Format
+
+```js
+var AUDIO_DATA = {
+  fps: 30,
+  totalFrames: 900,
+  frames: [{ bands: [0.82, 0.45, 0.31, ...] }, ...]
+};
+```
+
+- `frames[i].bands[]` — frequency band amplitudes, 0-1. Index 0 = bass, higher = treble.
+- Each band normalized independently across the full track.
+
+## Mapping Audio to Visuals
+
+| Audio signal           | Visual property                   | Effect                     |
+| ---------------------- | --------------------------------- | -------------------------- |
+| Bass (bands[0])        | `scale`                           | Pulse on beat              |
+| Treble (bands[12-14])  | `textShadow`, `boxShadow`         | Glow intensity             |
+| Overall amplitude      | `opacity`, `y`, `backgroundColor` | Breathe, lift, color shift |
+| Mid-range (bands[4-8]) | `borderRadius`, `width`           | Shape morphing             |
+
+Any GSAP-tweenable property works — `clipPath`, `filter`, SVG attributes, CSS custom properties.
+
+## Content, Not Medium
+
+Audio provides **timing and intensity**. The visual vocabulary comes from the narrative.
+
+**Never add:** equalizer bars, spectrum analyzers, waveform displays, musical notes clip art, generic particle systems, rainbow color cycling, strobing white on beats, abstract pulsing orbs.
+
+**Instead:** Let content guide the visual and audio drive its behavior. Bass makes warmth _swell_. Treble sharpens _contrast_. The visual choice comes from "what does this piece feel like?"
+
+## Sampling Pattern
+
+Audio reactivity requires per-frame sampling via a `for` loop with `tl.call()`, not a single tween:
+
+```js
+// ✅ Correct — sample every frame
+for (var f = 0; f < AUDIO_DATA.totalFrames; f++) {
+  tl.call(
+    (function (frame) {
+      return function () {
+        draw(frame);
+      };
+    })(AUDIO_DATA.frames[f]),
+    [],
+    f / AUDIO_DATA.fps,
+  );
+}
+
+// ❌ Wrong — single tween, doesn't react to audio
+gsap.to(".el", { scale: 1.2, duration: totalDuration });
+```
+
+Without per-frame sampling, the composition doesn't actually react to audio.
+
+## textShadow Gotcha
+
+`textShadow` on a parent container with semi-transparent children (e.g., inactive caption words at `rgba(255,255,255,0.3)`) renders a visible glow rectangle behind all children. Fix: apply `scale` to the container for beat pulse, but apply `textShadow` to individual active words only.
+
+## Guidelines
+
+- **Subtlety for text** — 3-6% scale variation, soft glow. Heavy pulsing makes text unreadable.
+- **Go bigger on non-text** — backgrounds and shapes can handle 10-30% swings.
+- **Match the energy** — corporate = subtle; music video = dramatic.
+- **Deterministic** — pre-extracted data, no Web Audio API, no runtime analysis.
+
+## Constraints
+
+- All audio data must be pre-extracted (use `extract-audio-data.py` from this skill's `scripts/`)
+- No `Math.random()` or `Date.now()`
+- Audio reactivity runs on the same GSAP timeline as everything else
diff --git a/.claude/skills-media/hyperframes-creative/references/beat-direction.md b/.claude/skills-media/hyperframes-creative/references/beat-direction.md
new file mode 100644
index 000000000..b1d436a5b
--- /dev/null
+++ b/.claude/skills-media/hyperframes-creative/references/beat-direction.md
@@ -0,0 +1,164 @@
+# Beat Direction
+
+How to plan and direct individual scenes (beats) in a multi-scene composition. Read before writing any multi-scene video.
+
+## Contents
+
+- Per-beat direction
+- Concept
+- Mood direction
+- Animation choreography
+- Transition
+- Depth layers
+- SFX cues
+- Rhythm planning
+- Velocity-matched transitions
+
+---
+
+## Per-Beat Direction
+
+Each beat is a WORLD, not a layout. Before writing CSS specs and GSAP instructions, describe what the viewer EXPERIENCES. The difference between a great storyboard and a mediocre one:
+
+**Mediocre:** "Dark navy background. '$1.9T' in white, 280px. Logo top-left. Wave image bottom-right."
+**Great:** "Camera is already mid-flight over a vast dark canvas. The gradient wave sweeps across the frame like aurora borealis — alive, shifting. '$1.9T' SLAMS into existence with such force the wave ripples in response. This isn't a slide — it's a moment."
+
+The first describes pixels. The second describes an experience. Write the second, then figure out the pixels.
+
+Each beat should have:
+
+### Concept
+
+The big idea for this beat in 2-3 sentences. What visual WORLD are we in? What metaphor drives it? What should the viewer FEEL? This is the most important part — everything else flows from it.
+
+### Mood direction
+
+Cultural and design references, not hex codes:
+
+- "Geometric, rhythmic, precise. Think Josef Albers or Bauhaus color studies."
+- "Warm workspace. Nice notebook energy, not technical blueprint."
+- "Cinematic title sequence. The kind of opening where you lean forward."
+
+### Animation choreography
+
+Specific motion verbs per element — not "it animates in" but HOW. Verbs come from the beat's concept and content, not from an energy bucket. A wellness brand's "slow" beat might still have something that DROPS if the content is about letting go. A stats beat might FLOAT if the brand's identity is weightless.
+
+The vocabulary of motion verbs (organized by physical character, not by energy level):
+
+**Impact / weight:** SLAMS, CRASHES, PUNCHES, STAMPS, SHATTERS, DROPS (with force)
+**Directional / deliberate:** SLIDES, PUSHES, PULLS, WIPES, CUTS
+**Reveals / builds:** DRAWS, FILLS, GROWS, EXPANDS, ASSEMBLES, COUNTS UP
+**Organic / ambient:** FLOATS, DRIFTS, BREATHES, PULSES, ORBITS, MORPHS
+**Mechanical / precise:** TYPES ON, CLICKS, LOCKS IN, SNAPS, STEPS
+
+Every element gets a verb. If you can't name the verb, the element is not yet designed. The verb should follow from the beat's concept — not from a lookup of what "high energy" or "low energy" beats use.
+
+For text elements specifically, you can name a deterministic, named effect by ID (e.g. `typewriter`, `kinetic-center-build`, `soft-blur-in`) instead of inventing timing from scratch — the 24-effect vocabulary and how to load it live in `skills/hyperframes-animation/adapters/animate-text.md`.
+
+### Transition
+
+How this beat hands off to the next. Specify the type and parameters.
+
+**When to pick which:**
+
+| Choose shader transition for                                                    | Choose CSS transition for                                                           | Choose hard cut for                                            |
+| ------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------- | -------------------------------------------------------------- |
+| Reveals, big reaction shots, product/logo unveils, energy shifts, "wow" moments | Continuous camera-motion beats where the scene feels like one move broken into cuts | Rapid-fire lists, percussive edits on the beat, comedic timing |
+| Any moment the music/VO punctuates with a downbeat or SFX hit                   | Beats that ease from one composition into the next with shared motion vocabulary    | Sequences of 3+ quick tempo-matched switches                   |
+| Brand moments where the transition itself _is_ the visual                       | Minimal/editorial pacing                                                            | Anytime a 0.3-0.8s transition would feel too slow              |
+
+Rule of thumb: if the beat is the _centerpiece_ of the video, shader-transition into it. If the beat is connective tissue, a CSS crossfade is fine. A brand reel of 5-7 beats usually wants 1-2 shader transitions (the hero reveal + the CTA) — too many flatten their impact.
+
+**Mixing shader and CSS crossfade transitions in one composition is supported.** Omit `shader` on any transition entry to get a smooth opacity crossfade — HyperShader manages all scene visibility regardless. Let HyperShader create the timeline (don't pass a pre-built `timeline:` option) and add all composition tweens to the returned `tl` after `init()`. Config snippet in `skills/hyperframes-animation/transitions/overview.md` → "CSS vs Shader".
+
+**CSS transitions** — 30+ patterns across 13 categories. Full code in `skills/hyperframes-animation/transitions/` (route via `catalog.md`). Pick based on the energy and feel:
+
+| Category           | Patterns                                                                 | Motion character                                                           |
+| ------------------ | ------------------------------------------------------------------------ | -------------------------------------------------------------------------- |
+| **Push / slide**   | Push slide, vertical push, elastic push, squeeze                         | Content moves through the frame as if on a continuous surface              |
+| **Scale / zoom**   | Zoom through, zoom out                                                   | Perspective shifts — moving toward or away from content                    |
+| **Radial / clip**  | Circle iris, diamond iris, diagonal split                                | Geometric reveal — content emerges or is covered by a shape                |
+| **3D**             | 3D card flip                                                             | Physical — content flips like a tangible object                            |
+| **Dissolve**       | Crossfade, blur crossfade, focus pull, color dip                         | Overlap and blend — both scenes exist simultaneously during the transition |
+| **Cover / blinds** | Staggered color blocks, horizontal blinds (6/12 strips), vertical blinds | Structural — content is sliced, layered, or covered                        |
+| **Light**          | Light leak overlays, overexposure burn, film burn                        | Organic film — light bleeds across the frame                               |
+| **Distortion**     | Glitch (CSS RGB jitter), chromatic aberration, ripple, VHS tape          | Instability — the image itself appears to malfunction                      |
+| **Blur**           | Blur through, directional blur                                           | Soft defocus — content blurs in or out                                     |
+| **Mechanical**     | Shutter (two-half), clock wipe (9-point wedge)                           | Precision — transitions with visible mechanical logic                      |
+| **Grid**           | Grid dissolve (12/120 cells)                                             | Fragmentation — the frame breaks into pieces                               |
+| **Destruction**    | Page burn (SVG clip-path + canvas rim)                                   | Dramatic decay — the previous scene is destroyed                           |
+| **Other**          | Gravity drop, morph circle                                               | Physical or shape-based motion that doesn't fit other categories           |
+
+Common quick-picks:
+
+- **Velocity-matched upward**: exit `y:-150, blur:30px, 0.33s power2.in` → entry `y:150→0, blur:30px→0, 1.0s power2.out`
+- **Whip pan**: exit `x:-400, blur:24px, 0.3s power3.in` → entry `x:400→0, blur:24px→0, 0.3s power3.out`
+- **Blur through**: exit `blur:20px, 0.3s` → entry `blur:20px→0, 0.25s power3.out`
+- **Zoom through**: exit `scale:1→1.2, blur:20px, 0.2s power3.in` → entry `scale:0.75→1, blur:20px→0, 0.5s expo.out`
+- **Hard cut / smash cut**: instant, for rapid-fire sequences
+
+Timing presets: snappy (0.2s), smooth (0.4s), gentle (0.6s), dramatic (0.5s), instant (0.15s), luxe (0.7s).
+
+**Shader transitions** — 14 built-in WebGL GPU effects. Install with `npx hyperframes add <name>` (block name ≠ shader name — see `skills/hyperframes-registry/references/discovery.md`); full API in `packages/shader-transitions/README.md`.
+
+| Shader                  | Visual description                                                                             | Duration range |
+| ----------------------- | ---------------------------------------------------------------------------------------------- | -------------- |
+| **domain-warp**         | Organic FBM dissolve — both scenes warp toward each other with an accent flash at the midpoint | 0.5–0.8s       |
+| **ridged-burn**         | Multifractal mask reveals the incoming scene through a burn ramp with sparks at the edge       | 0.5–0.8s       |
+| **whip-pan**            | 10-sample horizontal motion blur + lateral crossfade — reads like a camera pan between shots   | 0.3–0.5s       |
+| **sdf-iris**            | Circle SDF expands from center, with accent-tinted glow rings at the expanding edge            | 0.5–0.7s       |
+| **ripple-waves**        | Radial standing-wave UV displacement — content ripples outward as scenes cross                 | 0.6–1.0s       |
+| **gravitational-lens**  | Pinch pull toward center + R/B chromatic separation — content bends inward then releases       | 0.6–1.0s       |
+| **cinematic-zoom**      | 12 RGB-offset radial zoom blur samples — motion streak radiating from center                   | 0.4–0.6s       |
+| **chromatic-split**     | R/B radial channel shift outward, G fixed — channels separate then rejoin                      | 0.3–0.5s       |
+| **swirl-vortex**        | CCW swirl with FBM noise — content spirals away and the new scene spirals in                   | 0.5–0.8s       |
+| **thermal-distortion**  | Vertical sine + FBM horizontal displacement — heat-haze shimmer across the frame               | 0.5–0.8s       |
+| **flash-through-white** | Fade through white midpoint — almost invisible at 0.01s, noticeable at 0.3s                    | 0.01s–0.3s     |
+| **cross-warp-morph**    | FBM vector field displaces both scenes; a third FBM biases the wipe direction                  | 0.5–0.8s       |
+| **light-leak**          | Fixed off-frame light source with exponential falloff, warmth, and a ridge flare               | 0.5–0.8s       |
+| **glitch**              | Line displacement + RGB lateral split + scan modulation + posterization + flicker              | 0.3–0.5s       |
+
+**You are not limited to what's listed here.** These are the built-in options, but you can and should:
+
+- **Write custom GLSL shaders** from scratch for unique transition effects
+- **Search online** for shader code (ShaderToy, GLSL Sandbox, GitHub) and adapt it
+- **Build custom CSS transitions** that aren't in any category — combine clip-path, transforms, filters in new ways
+- **Ask the user** to provide or find specific effects if you need something specialized
+
+If the storyboard calls for an effect that doesn't exist yet — build it. The framework renders anything a browser can run.
+
+### Depth layers
+
+What's in foreground, midground, and background. Every beat should have at least 2 layers:
+
+- "BG: dark navy fill + subtle radial glow. MG: stat cards with drop shadow. FG: brand logo bottom-right."
+
+### SFX cues
+
+What sounds at what moment:
+
+- "On the capture pulse — a soft, warm analog shutter click."
+- "Left side carries a faint low drone. On fold: drone cuts. Silence. Then a single clean chime."
+
+---
+
+## Rhythm Planning
+
+Before writing HTML, declare your scene rhythm: which scenes are quick hits, which are holds, where do shaders land, where does energy peak. Name the pattern — fast-fast-SLOW-fast-SHADER-hold — before implementing.
+
+**Derive the rhythm from the storyboard and the brand, not from a lookup.** A 15-second social ad for an architectural firm and a 15-second social ad for a gaming brand have different rhythms — both are 15 seconds, but one is slow-reveal-hold-CTA and the other is rapid-fire-SLAM-hook. Video type sets constraints (duration, approximate beat count); the brand and content determine whether those beats are slow or fast, sparse or dense, dramatic or controlled.
+
+Questions that drive rhythm decisions:
+
+- What emotional journey should the viewer take? Where is the peak moment?
+- Where does the narration land its heaviest emphasis? That's usually where energy should peak.
+- What does the brand's own visual pacing suggest — unhurried or urgent?
+- How many beats can the duration actually support without feeling rushed or padded?
+
+A social ad that tries to hook in 2s, showcase 3 features, and end with a CTA in 15s will feel like noise. Sometimes "hook-hold-CTA" with one strong feature is the right rhythm for 15 seconds. Name the rhythm you've planned before implementing.
+
+---
+
+## Velocity-Matched Transitions
+
+Exit the outgoing beat with an accelerating ease (power2.in or power3.in) plus a blur ramp. Enter the incoming beat with a decelerating ease (power2.out or power3.out) plus blur clear. The fastest point of both easing curves meets at the cut — the viewer perceives continuous camera motion, not two discrete animations. Match exit velocity to entry velocity within ~5% tolerance.
diff --git a/.claude/skills-media/hyperframes-creative/references/composition-patterns.md b/.claude/skills-media/hyperframes-creative/references/composition-patterns.md
new file mode 100644
index 000000000..e2ddb391c
--- /dev/null
+++ b/.claude/skills-media/hyperframes-creative/references/composition-patterns.md
@@ -0,0 +1,199 @@
+# Composition Patterns
+
+## Contents
+
+- Picture-in-picture
+- Text behind subject
+- Title card with fade
+- Slide show with section headers
+- Top-level composition example
+
+## Picture-in-Picture (Video in a Frame)
+
+Animate a wrapper div for position/size. The video fills the wrapper. The wrapper has NO data attributes.
+
+```html
+<div
+  id="pip-frame"
+  style="position:absolute;top:0;left:0;width:1920px;height:1080px;z-index:50;overflow:hidden;"
+>
+  <video
+    id="el-video"
+    data-start="0"
+    data-duration="60"
+    data-track-index="0"
+    src="talking-head.mp4"
+    muted
+    playsinline
+  ></video>
+</div>
+```
+
+```js
+tl.to(
+  "#pip-frame",
+  { top: 700, left: 1360, width: 500, height: 280, borderRadius: 16, duration: 1 },
+  10,
+);
+tl.to("#pip-frame", { left: 40, duration: 0.6 }, 30);
+```
+
+## Text Behind Subject (transparent webm overlay)
+
+Put a headline _behind_ a presenter so their silhouette occludes the text. Requires a transparent cutout produced by `npx hyperframes remove-background presenter.mp4 -o presenter.webm`.
+
+Three layers, plus one critical rule:
+
+```html
+<!-- z=1 base — full opaque mp4 (lobby + presenter), always visible -->
+<video
+  id="cf-base"
+  data-start="0"
+  data-duration="6"
+  data-media-start="0"
+  data-track-index="0"
+  src="presenter.mp4"
+  muted
+  playsinline
+></video>
+
+<!-- z=2 headline — visible the whole time -->
+<h1
+  id="cf-headline"
+  style="position:absolute;top:50%;left:50%;
+     transform:translate(-50%,-50%); z-index:2; font-size:220px; font-weight:900;
+     color:#fff; text-shadow:0 6px 32px rgba(0,0,0,.55); clip-path:inset(0 0 100% 0);"
+>
+  MAKE IT IN HYPERFRAMES
+</h1>
+
+<!-- z=3 cutout — same source, alpha around presenter, hidden until the cut -->
+<!-- WRAPPER has the opacity, NOT the video itself (see rule below). -->
+<div class="cutout-wrap" style="position:absolute;inset:0;z-index:3;opacity:0">
+  <video
+    id="cf-cutout"
+    data-start="0"
+    data-duration="6"
+    data-media-start="0"
+    data-track-index="1"
+    src="presenter.webm"
+    muted
+    playsinline
+  ></video>
+</div>
+```
+
+```js
+const tl = gsap.timeline({ paused: true });
+const CUT = 3.3;
+
+// Reveal headline early
+tl.to("#cf-headline", { clipPath: "inset(0 0 0% 0)", duration: 0.6, ease: "expo.out" }, 0.25);
+
+// At the cut, flip the cutout wrapper visible — the presenter's silhouette
+// punches through the headline.
+tl.set(".cutout-wrap", { opacity: 1 }, CUT);
+
+// Sentinel: extend timeline to the composition's full duration so the
+// renderer doesn't bail past the last meaningful tween.
+tl.set({}, {}, 6);
+
+window.__timelines["cover-flip"] = tl;
+```
+
+**Why a wrapper div, not opacity on the video itself?**
+
+The framework forces `opacity: 1` on any element with `data-start`/`data-duration` while it's "active" — that's how it manages clip lifecycles. A CSS `opacity: 0` on the video element is silently overwritten. Wrap the video in a div with no `data-*` attributes; the wrapper is owned by your CSS/GSAP.
+
+**Why both videos at `data-start="0"`?**
+
+So both decode in sync from t=0. Late-mounting the cutout (`data-start=3.3`) makes Chrome do a seek + decoder warm-up at mount, which can land a frame off the base mp4 — visible as a one-frame jitter at the cut.
+
+**Color match:** `remove-background` defaults to `--quality balanced` (crf 18) which keeps the cutout's RGB nearly identical to the source mp4 — minimal edge halo or color shift when overlaid. Use `--quality best` (crf 12) for hero shots; only drop to `--quality fast` (crf 30) when the cutout sits over a _different_ background and the size matters.
+
+## Title Card with Fade
+
+```html
+<div
+  id="title-card"
+  data-start="0"
+  data-duration="5"
+  data-track-index="5"
+  style="display:flex;align-items:center;justify-content:center;background:#111;z-index:60;"
+>
+  <h1 style="font-size:64px;color:#fff;opacity:0;">My Video Title</h1>
+</div>
+```
+
+```js
+tl.to("#title-card h1", { opacity: 1, duration: 0.6 }, 0.3);
+tl.to("#title-card", { opacity: 0, duration: 0.5 }, 4);
+```
+
+## Slide Show with Section Headers
+
+Use separate elements on the same track, each with its own time range. Slides auto-mount/unmount based on `data-start`/`data-duration`.
+
+```html
+<div class="slide" data-start="0" data-duration="30" data-track-index="3">...</div>
+<div class="slide" data-start="30" data-duration="25" data-track-index="3">...</div>
+<div class="slide" data-start="55" data-duration="20" data-track-index="3">...</div>
+```
+
+## Top-Level Composition Example
+
+```html
+<div
+  id="comp-1"
+  data-composition-id="my-video"
+  data-start="0"
+  data-duration="60"
+  data-width="1920"
+  data-height="1080"
+>
+  <!-- Primitive clips -->
+  <video
+    id="el-1"
+    data-start="0"
+    data-duration="10"
+    data-track-index="0"
+    src="..."
+    muted
+    playsinline
+  ></video>
+  <video
+    id="el-2"
+    data-start="el-1"
+    data-duration="8"
+    data-track-index="0"
+    src="..."
+    muted
+    playsinline
+  ></video>
+  <img id="el-3" data-start="5" data-duration="4" data-track-index="1" src="..." />
+  <audio id="el-4" data-start="0" data-duration="30" data-track-index="2" src="..." />
+
+  <!-- Sub-compositions loaded from files -->
+  <div
+    id="el-5"
+    data-composition-id="intro-anim"
+    data-composition-src="compositions/intro-anim.html"
+    data-start="0"
+    data-track-index="3"
+  ></div>
+
+  <div
+    id="el-6"
+    data-composition-id="captions"
+    data-composition-src="compositions/caption-overlay.html"
+    data-start="0"
+    data-track-index="4"
+  ></div>
+
+  <script>
+    // Just register the timeline — framework auto-nests sub-compositions
+    const tl = gsap.timeline({ paused: true });
+    window.__timelines["my-video"] = tl;
+  </script>
+</div>
+```
diff --git a/.claude/skills-media/hyperframes-creative/references/data-in-motion.md b/.claude/skills-media/hyperframes-creative/references/data-in-motion.md
new file mode 100644
index 000000000..0578cd155
--- /dev/null
+++ b/.claude/skills-media/hyperframes-creative/references/data-in-motion.md
@@ -0,0 +1,19 @@
+# Data in Motion
+
+Light guidance for data and stats in video compositions. `house-style.md` handles aesthetics; this just addresses data-specific pitfalls.
+
+## Visual Continuity
+
+When successive stats belong to the same concept (Q1 → Q2 → Q3 → Q4, or three metrics for the same product), keep them in the same visual space with the same aesthetic. Only the VALUE changes. An aesthetic change should signal a new concept, not just a new number.
+
+## Numbers Need Visual Weight
+
+A number on its own floats in empty space. Pair every metric with a visual element that gives it presence — a proportional fill bar, a background color shift, a shape that represents the value, a progress ring. The visual doesn't need to be a chart — it just needs to fill the frame and make the data feel tangible rather than just text on a background.
+
+## Avoid Web Patterns
+
+- **No pie charts** — hard to compare, looks like PowerPoint
+- **No multi-axis charts** — viewer can't study intersections in a 3-second window
+- **No 6-panel dashboards** — 2-3 related metrics side-by-side is fine, 6+ is a web pattern
+- **No gridlines, tick marks, or legends** — visual noise that adds nothing in motion
+- **No chart library output** — build with GSAP + SVG/CSS, not D3 or Chart.js
diff --git a/.claude/skills-media/hyperframes-creative/references/design-adherence.md b/.claude/skills-media/hyperframes-creative/references/design-adherence.md
new file mode 100644
index 000000000..130d469df
--- /dev/null
+++ b/.claude/skills-media/hyperframes-creative/references/design-adherence.md
@@ -0,0 +1,19 @@
+# Design Adherence
+
+Post-authoring verification that the composition follows the design spec. Run it after building, before serving the preview.
+
+If a design spec (`frame.md` / `design.md`) exists, read the HTML and check:
+
+1. **Colors** — every hex value in the composition appears in the spec's palette section (however the user labeled it: Colors, Palette, Theme, etc.). Flag any invented colors.
+2. **Typography** — font families and weights match the spec's type spec. No substitutions.
+3. **Corners** — border-radius values match the declared corner style, if specified.
+4. **Spacing** — padding and gap values fall within the declared density range, if specified.
+5. **Depth** — shadow usage matches the declared depth level, if specified (flat = none, subtle = light, layered = glows).
+6. **Avoidance rules** — if the spec has a section listing things to avoid (commonly "What NOT to Do", "Don'ts", "Anti-patterns", or "Do's and Don'ts"), verify none are present.
+
+Report violations as a checklist. Fix each one before serving.
+
+If no design spec exists (house-style-only path), verify:
+
+1. **Palette consistency** — the same bg, fg, and accent colors are used across all scenes. No per-scene color invention.
+2. **No lazy defaults** — check the composition against `house-style.md`'s "Lazy Defaults to Question" list. If any appear, they must be a deliberate choice for the content, not a default.
diff --git a/.claude/skills-media/hyperframes-creative/references/design-picker.md b/.claude/skills-media/hyperframes-creative/references/design-picker.md
new file mode 100644
index 000000000..b0a901922
--- /dev/null
+++ b/.claude/skills-media/hyperframes-creative/references/design-picker.md
@@ -0,0 +1,123 @@
+# Design Picker
+
+Two-phase visual picker: mood boards first (pick a complete direction), then fine-tune individual categories.
+
+## Contents
+
+- Prerequisites
+- Building the picker
+- Serving and user selection
+
+## Prerequisites
+
+Read these before generating options — they define the rules your options must follow:
+
+- `references/typography.md`
+- `house-style.md`
+- `references/video-composition.md`
+- `visual-styles.md`
+- `references/beat-direction.md`
+
+## Building the picker
+
+1. Generate options **deeply contextual to the user's prompt**. Every category — not just architectures — must reflect the specific product, brand, audience, and mood. Generic options that could appear on any picker are a failure.
+
+   **Mood boards** — as many as the creative space warrants (4-8). Every board must tell a different STORY about the brand, not just reshuffle the same elements. Ask: "what are the genuinely different ways to position this product?" A cat food brand might be: playful chaos, premium positioning, comfort/cozy, social-native, flavor showcase, humor-led, sensory/appetizing. Each is a different narrative, not a different font on the same layout.
+
+   **Architectures** — one per mood board minimum, each visually distinct. Use `{{prompt_headline}}` and `{{prompt_sub}}` tokens. If the user provided media assets, use them as background images (use `url(path)` without quotes — single quotes inside `style='...'` break the attribute).
+
+   **Palettes** (5-6) — named after the brand's world, not generic moods. The palette names and colors should feel like they belong to THIS specific product. Always mix dark + light + tinted. **Every palette must be visually distinct at swatch size.** If two palettes share the same background lightness AND a similar accent hue, cut one. Test: would a user see the difference in a 14px swatch chip? If not, they're duplicates.
+
+   **Type pairings** (5-6) — **RUN the font discovery script from typography.md BEFORE generating pairings.** This is not optional. Download Google Fonts metadata, run the script, and pick from its output. You will otherwise reach for the same 8 fonts every time (Bricolage Grotesque, Instrument Serif, Fraunces, Archivo Black, DM Serif Display, Space Grotesk, Fredoka) — that's your training data default, not a contextual choice. Match the brand's energy and audience. Cross-category per typography.md (never two sans-serifs).
+
+2. `mkdir -p .hyperframes` then copy [../templates/design-picker.html](../templates/design-picker.html) to `.hyperframes/pick-design.html`.
+3. Replace these placeholders using Python (don't hand-escape quotes in sed):
+   - `__ARCHITECTURES_JSON__` — array of architecture objects
+   - `__PALETTES_JSON__` — array of palette objects
+   - `__TYPEPAIRS_JSON__` — array of type pairing objects
+   - `__MOODBOARDS_JSON__` — array of mood board objects (see format below)
+   - `__PROMPT_JSON__` — object with prompt context (see format below)
+
+### Architecture data format
+
+Each architecture object must include a `preview_html` field — the HTML that renders in the preview panel. Use token placeholders that the template replaces at runtime: `{{bg}}`, `{{fg}}`, `{{ac}}`, `{{mt}}`, `{{hf}}`, `{{hw}}`, `{{bf}}`, `{{bw}}`, `{{cr}}` (corner radius), `{{pad}}`, `{{gap}}`, `{{shadow}}`, `{{g}}` (grid line color), `{{fg3}}`/`{{fg6}}`/`{{fg8}}`/`{{fg15}}` (fg at opacity), `{{ac3}}`/`{{ac5}}`/`{{ac25}}` (accent at opacity).
+
+**Every token must be used.** Apply `{{cr}}` to all cards, buttons, and containers. Apply `{{shadow}}` to elevated elements (cards, buttons, code blocks). Apply `{{pad}}` and `{{gap}}` to control spacing. If a token isn't used in the preview_html, that option will have no visible effect.
+
+**Density matters.** Each architecture preview must include 15+ distinct elements to give the user a real sense of the layout. Include: headline, subhead, body paragraph, label/overline, stat with number, secondary stat, quote/testimonial, attribution, card with title+body, second card (different treatment), code/command block, primary button, secondary button, list or tags, accent divider/rule, and a data element (table row, progress bar, or chart).
+
+Optionally include `components` (component styling rules) and `dos` (do's and don'ts) as strings — these appear in the generated design.md.
+
+**Layout constraint:** All preview HTML must use percentage widths or `max-width: 100%`. Use `flex-wrap: wrap` on all flex rows. Absolute-positioned decoratives must stay within a parent with `overflow: hidden`.
+
+**Security:** Architecture `preview_html` must not contain `<script>` tags, event handlers (`onclick`, `onerror`, etc.), or `javascript:` URLs. It is injected via `innerHTML`.
+
+**Image URLs:** When using background images in `preview_html`, use `url(path/to/image.jpg)` WITHOUT quotes around the path. Single quotes like `url('path.jpg')` break because `preview_html` is inside a `style='...'` attribute — the inner single quotes terminate the outer attribute.
+
+**Palette variety:** Always include a mix of light, dark, and tinted backgrounds across the 6 palettes — even for calm/wellness prompts.
+
+### Example architecture object
+
+```json
+{
+  "name": "Editorial Stack",
+  "description": "Vertical rhythm with large type, pull quotes, and data callouts",
+  "tag": "editorial / longform / narrative",
+  "mood": "Confident, unhurried, typographically driven",
+  "preview_html": "<div style='background:{{bg}};color:{{fg}};padding:{{pad}};min-height:100vh;font-family:\"{{bf}}\",sans-serif;font-weight:{{bw}};'><div style='max-width:100%;display:flex;flex-direction:column;gap:{{gap}};'><div style='font-size:10px;text-transform:uppercase;letter-spacing:0.12em;color:{{mt}};'>Overline Label</div><div style='font-family:\"{{hf}}\",serif;font-weight:{{hw}};font-size:48px;line-height:1.1;letter-spacing:-0.02em;'>The Headline Goes Here</div><div style='font-size:20px;color:{{mt}};max-width:70%;line-height:1.5;'>Subheading text that introduces the narrative arc of this composition with enough words to fill two lines.</div><div style='font-size:15px;line-height:1.7;color:{{fg}};max-width:65%;'>Body paragraph with real sentences. The quick brown fox jumps over the lazy dog. This gives a sense of text density and reading rhythm at the chosen type size.</div><div style='display:flex;gap:{{gap}};flex-wrap:wrap;'><div style='background:{{fg6}};border-radius:{{cr}};padding:{{pad}};flex:1;min-width:200px;box-shadow:{{shadow}};'><div style='font-size:36px;font-family:\"{{hf}}\",serif;font-weight:{{hw}};color:{{ac}};'>2.4M</div><div style='font-size:12px;color:{{mt}};margin-top:4px;'>Primary Stat</div></div><div style='background:{{fg6}};border-radius:{{cr}};padding:{{pad}};flex:1;min-width:200px;box-shadow:{{shadow}};'><div style='font-size:36px;font-family:\"{{hf}}\",serif;font-weight:{{hw}};color:{{fg}};'>87%</div><div style='font-size:12px;color:{{mt}};margin-top:4px;'>Secondary Stat</div></div></div><div style='border-left:3px solid {{ac}};padding:12px {{pad}};background:{{ac3}};border-radius:0 {{cr}} {{cr}} 0;'><div style='font-size:18px;font-style:italic;color:{{fg}};line-height:1.5;'>\"A pull quote that captures the key insight of the piece.\"</div><div style='font-size:12px;color:{{mt}};margin-top:8px;'>— Attribution Name</div></div><div style='background:{{fg3}};border-radius:{{cr}};padding:{{pad}};box-shadow:{{shadow}};'><div style='font-size:14px;font-weight:{{hw}};margin-bottom:8px;'>Card Title</div><div style='font-size:13px;color:{{mt}};line-height:1.5;'>Card body text with a different treatment than the main content area.</div></div><div style='background:{{ac5}};border:1px solid {{ac25}};border-radius:{{cr}};padding:{{pad}};box-shadow:{{shadow}};'><div style='font-size:14px;font-weight:{{hw}};color:{{ac}};margin-bottom:8px;'>Accent Card</div><div style='font-size:13px;color:{{fg}};line-height:1.5;'>Second card with a tinted accent treatment for variety.</div></div><div style='font-family:monospace;font-size:13px;background:{{fg8}};border-radius:{{cr}};padding:{{pad}};color:{{fg15}};box-shadow:{{shadow}};'>$ hyperframes render --output video.mp4</div><div style='display:flex;gap:12px;flex-wrap:wrap;'><button style='background:{{ac}};color:{{bg}};border:none;padding:10px 24px;border-radius:{{cr}};font-size:14px;font-weight:600;box-shadow:{{shadow}};cursor:pointer;'>Primary Action</button><button style='background:transparent;color:{{fg}};border:1px solid {{fg15}};padding:10px 24px;border-radius:{{cr}};font-size:14px;cursor:pointer;'>Secondary</button></div><div style='display:flex;gap:8px;flex-wrap:wrap;'><span style='background:{{fg6}};border-radius:100px;padding:4px 12px;font-size:11px;color:{{mt}};'>Tag One</span><span style='background:{{fg6}};border-radius:100px;padding:4px 12px;font-size:11px;color:{{mt}};'>Tag Two</span><span style='background:{{ac5}};border-radius:100px;padding:4px 12px;font-size:11px;color:{{ac}};'>Accent Tag</span></div><div style='height:1px;background:linear-gradient(to right,{{ac25}},{{fg6}},{{ac25}});'></div><div style='display:flex;justify-content:space-between;font-size:12px;color:{{mt}};border-bottom:1px solid {{g}};padding:8px 0;'><span>Data row label</span><span style='color:{{fg}};font-weight:600;'>1,234</span></div></div></div>"
+}
+```
+
+### Mood board data format
+
+Each mood board pre-selects one option from each category. The user picks a mood board in Phase 1, then fine-tunes in Phase 2 with those selections pre-filled.
+
+```json
+{
+  "name": "Terminal Precision",
+  "description": "Code-forward, data-dense, CLI energy. Dark canvas, monospace body, sharp corners.",
+  "theme": "dark",
+  "arch_index": 0,
+  "palette_index": 0,
+  "type_index": 0,
+  "corners_index": 0,
+  "density_index": 0,
+  "depth_index": 1,
+  "easing_index": 0,
+  "corners": "0px",
+  "padding": "12px",
+  "gap": "8px",
+  "shadow": "0 2px 16px rgba(0,230,255,0.15)"
+}
+```
+
+Indices reference into the ARCHITECTURES, PALETTES, and TYPEPAIRS arrays. The template renders a mini preview of each mood board using its architecture's `preview_html` with the mood board's palette/type applied.
+
+### Prompt context data format
+
+```json
+{
+  "title": "AI Coding Assistant",
+  "headline": "Your Code, Understood.",
+  "subline": "An AI coding assistant that reads your entire codebase.",
+  "section_desc": "Layout options for your product launch"
+}
+```
+
+`title` appears in the Phase 1 header. `headline` and `subline` replace `{{prompt_headline}}` and `{{prompt_sub}}` in architecture preview_html so previews show real content.
+
+### Content tokens in preview_html
+
+In addition to the standard design tokens (`{{bg}}`, `{{fg}}`, `{{ac}}`, etc.), architecture `preview_html` can use:
+
+- `{{prompt_headline}}` — the user's actual headline text
+- `{{prompt_sub}}` — the user's actual subline text
+
+This makes previews contextual — the user sees their own content styled, not generic placeholders.
+
+## Serving and user selection
+
+4. Serve the file: `cd <project-dir> && python3 -m http.server 8723 &` (use port 8723 or any unused port above 8000; if the curl check fails, try the next port). Verify: `curl -s -o /dev/null -w "%{http_code}" http://localhost:8723/.hyperframes/pick-design.html` — only share the link if it returns 200. Do NOT use `npx hyperframes preview` for the picker — it blocks. Only start the HTTP server from the main conversation thread. If you are running as a dispatched task or subagent, return the file path and let the caller serve it.
+5. Once the user picks, tell them: "Copy the design.md from the picker and paste it here." The user pastes the markdown back into the conversation. Save it verbatim to `design.md` in the project root — it's already in spec format (YAML frontmatter + prose sections). After the user pastes, kill the background server: `kill %1` or `kill $(lsof -ti:8723)`. Then proceed with construction.
+
+The picker outputs a [google-labs-code/design.md](https://github.com/google-labs-code/design.md) spec-compliant file: YAML frontmatter with `colors`, `typography`, `rounded`, and `spacing` tokens, followed by `## Overview`, `## Colors`, `## Typography`, `## Layout`, `## Elevation`, `## Components`, and `## Do's and Don'ts` prose sections.
diff --git a/.claude/skills-media/hyperframes-creative/references/design-spec.md b/.claude/skills-media/hyperframes-creative/references/design-spec.md
new file mode 100644
index 000000000..ba50475a2
--- /dev/null
+++ b/.claude/skills-media/hyperframes-creative/references/design-spec.md
@@ -0,0 +1,55 @@
+# Design Spec — `frame.md` / `design.md`
+
+The single source of truth for **what a design spec is, how to find it, and how to read it.** Other references defer here for resolution + format; the _consumption_ contract ("brand, not layout") lives in `video-composition.md`.
+
+## What `frame.md` is
+
+`frame.md` is the **frame-scale design system** for a video / hyperframes project — the video-first companion to `design.md` (which is written for web / static pages). Same file format as `design.md`; it reframes the brand with the frame as the unit.
+
+A spec is **YAML frontmatter + a markdown body**, and the two layers are not equal:
+
+- **Frontmatter is the normative layer** — `colors`, `typography`, `spacing`, `components` are the real, machine-readable values. Quote them verbatim (exact hex, font family, weight); never invent or round them.
+- **Prose is context** — the `##` sections (Overview, The Frame, Composition Rules, …) carry intent, when-to-use, and constraints the tokens can't hold. Read them for judgment, not for values.
+
+## Resolving which spec to read
+
+Precedence — read the **first that exists**, ignore the rest:
+
+```
+frame.md  →  design.md  →  DESIGN.md
+```
+
+```bash
+SPEC=$(ls frame.md design.md DESIGN.md 2>/dev/null | head -1)
+```
+
+- `frame.md` is the preferred spec for video / hyperframes projects and wins when more than one exists.
+- `frame.md` is **always lowercase** — there is no `FRAME.md` variant. (`design.md` and `DESIGN.md` are genuinely different files on Linux; a frame-preset ships an uppercase `FRAME.md` _template_, adopted as lowercase `frame.md` — see "Starting from a preset" below.)
+
+Load the spec **once, in Step 1**; every later step (expansion, authoring, adherence) consumes the already-loaded spec rather than re-resolving it.
+
+## Starting from a preset (optional)
+
+Optionally seed `frame.md` from a ready-made **frame-preset** in `[../frame-presets/](../frame-presets/)` — a fixed set, each shipping a `FRAME.md` template a workflow's design step copies in and overlays with brand tokens. Referencing a preset is **not required**; a bespoke or [picker](design-picker.md)-generated spec is equally valid.
+
+| Preset                                                             | Look                                                                                                                                                                                                                                                                                                                     | Pick when                                                                                                                        |
+| ------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------- |
+| `[biennale-yellow](../frame-presets/biennale-yellow/FRAME.md)`     | Literary-editorial catalogue — warm parchment ground, single deep indigo ink, solar yellow as radial bloom / panel / tile underprint, Instrument Serif 400 display (tight, negative-tracked) + Archivo body + JetBrains Mono data, strict rectangles (0 rounded corners), 1px hairline rules as sole border, no shadows  | confident / atmospheric / restrained; a product that wants museum-catalogue elegance and editorial authority                     |
+| `[blockframe](../frame-presets/blockframe/FRAME.md)`               | Maximalist neobrutalist — 4px black borders, 8px hard offset shadows, five candy pastels, Inter 800–900 uppercase, square corners, tilted decorations                                                                                                                                                                    | bold / punchy / playful-loud; a product that wants to feel confident and graphic                                                 |
+| `[blue-professional](../frame-presets/blue-professional/FRAME.md)` | Consulting-grade restraint — warm cream canvas, single saturated cobalt (#1e2bfa) accent only, Space Grotesk + Inter typography, soft tinted cards (4% fill / 20% border / 10–14px radius) with NO shadows, pill chrome (100px), 3-step gray text ladder, cobalt progress bar                                            | measured / executive-readable / premium-signal; a product that wants investment-research rigor and refined restraint             |
+| `[bold-poster](../frame-presets/bold-poster/FRAME.md)`             | Populist editorial poster — Shrikhand display tilted −6°..+2°, Libre Baskerville serif body, Space Grotesk mono chrome, four colors only (white / brown-black ink / tomato red / off-white), double-border grids (3px+1.5px), red leftbar cards, red em-dash bullets, stacked text-shadow on red display, square corners | powerful / printed / restrained; a product that wants editorial authority and vintage gravitas                                   |
+| `[broadside](../frame-presets/broadside/FRAME.md)`                 | Protest-poster system — two-register flat plane (ink-black / fire-orange), massive lowercase Barlow 900 treated as graphic primitive, IBM Plex Mono chrome (uppercase, 0.14em), fire-orange sole accent, 1px hairlines, sharp corners, no shadow                                                                         | bold / typographic / declarative; a product that wants presence and authority                                                    |
+| `[capsule](../frame-presets/capsule/FRAME.md)`                     | Playful editorial — every container a pill (2px ink outline), cream canvas, nine candy accents, Bodoni Moda + Space Grotesk, soft offset shadows, floating-pill wallpaper                                                                                                                                                | friendly / soft / editorial; a product that wants warmth and approachability                                                     |
+| `[cartesian](../frame-presets/cartesian/FRAME.md)`                 | Museum-catalog editorial — 1px taupe hairline grid, five warm-stone palette (#EDE8E0 / #E2DBD1 / #1A1A1A / #5A5A5A / #8A8178), Playfair Display 400 + Inter, sharp corners, compass-drafted geometric rings, zero shadow / zero fill                                                                                     | sparse / literary / restrained; a product that wants quiet authority and editorial rigor                                         |
+| `[claude](../frame-presets/claude/FRAME.md)`                       | Warm-editorial brand book — warm cream paper (never pure white), terracotta coral (#CC785C) as scarce voltage, hairline ink elevation (no heavy shadow), EB Garamond serif display + Inter body + JetBrains Mono index / code on a warm-navy code surface, sentence-case display, ✱ coral spike                          | considered / literary / developer-facing; a code change, launch, or doc that wants editorial calm and a first-class code surface |
+| `[cobalt-grid](../frame-presets/cobalt-grid/FRAME.md)`             | Modernist two-color risograph — cream paper, electric cobalt ink, permanent graph-paper grid (10% cobalt), top/bottom cobalt hairlines, Newsreader 400 serif + Hanken Grotesk + DM Mono, 0° corners, pixel-glitch column + QR-block patches                                                                              | restrained / systemic / editorial; a product that wants clarity and measured authority                                           |
+| `[coral](../frame-presets/coral/FRAME.md)`                         | Bold editorial magazine — three solid surfaces (coral fire / ink black / warm cream) meeting at hard edges, 45° diagonal hatch on coral, Bebas Neue + Inter tracked caps, zero shadows/radius (circles 50%), oversized wallpaper numerals and giant marks                                                                | bold / structuralist / editorial; a product that wants graphic confidence and hard-edged confidence                              |
+| `[creative-mode](../frame-presets/creative-mode/FRAME.md)`         | Neo-brutalist editorial — cream canvas, 4px ink borders, hard offset shadows (no blur), four accents rationed two-to-three, Archivo Black uppercase at 0.92 line-height, JetBrains Mono taxonomy, Space Grotesk body, square corners save one pill chip                                                                  | sparse / graphic / punchy-restrained; a product that wants editorial presence and geometric confidence                           |
+| `[daisy-days](../frame-presets/daisy-days/FRAME.md)`               | Cheerful picture-book — 3px charcoal outlines, 6/4px hard offset shadows (no blur), nine sunny-garden pastels (cream + turquoise/soft-pink/butter/mint/lavender/peach/sky + coral accent), Fredoka One + Quicksand, generous radii (20–50px), hand-drawn SVG ornament layer (daisies/stars/suns/clouds/rainbows)         | playful / childlike / sticker-sheet kawaii; a product that wants warmth and whimsy                                               |
+| `[editorial-forest](../frame-presets/editorial-forest/FRAME.md)`   | Serif-led literary-editorial — green / pink / cream editorial triad, Source Serif 4 weight 500 (opsz) for display + JetBrains Mono 500 uppercase chrome, flat paper depth (no shadows), 2px hairline rules, 6/8px card radii, monogram circle stamp                                                                      | spacious / restrained / editorial; a product that wants quiet confidence and literary tone                                       |
+
+Each preset folder also ships a `frame-showcase.html` — a preview contact sheet of its frame treatments; open it to _see_ the look, never include it in a project.
+
+## Consuming it
+
+How to apply the spec to a frame — strict on brand (hex, fonts, weight relationships, Do's / Don'ts), free on layout — is the consumption contract in `[video-composition.md](video-composition.md)` ("The Design Spec Is Brand, Not Layout"). Read it before choosing colors or writing HTML; this doc only covers finding and parsing the spec.
diff --git a/.claude/skills-media/hyperframes-creative/references/house-style.md b/.claude/skills-media/hyperframes-creative/references/house-style.md
new file mode 100644
index 000000000..e39459f22
--- /dev/null
+++ b/.claude/skills-media/hyperframes-creative/references/house-style.md
@@ -0,0 +1,73 @@
+# House Style
+
+Creative direction for compositions when no design spec (`frame.md` or `design.md`) is provided. These are starting points — override anything that doesn't serve the content. When a design spec exists, its brand values take precedence; house-style fills gaps.
+
+## Before Writing HTML
+
+1. **Interpret the prompt.** Generate real content. A recipe lists real ingredients. A HUD has real readouts.
+2. **Pick a palette.** Light or dark? Declare bg, fg, accent before writing code.
+3. **Pick typefaces.** Run the font discovery script in [references/typography.md](references/typography.md) — or pick a font you already know that fits the theme. The script broadens your options; it's not the only source.
+
+## Lazy Defaults to Question
+
+These patterns are AI design tells — the first thing every LLM reaches for. If you're about to use one, pause and ask: is this a deliberate choice for THIS content, or am I defaulting?
+
+- Gradient text (`background-clip: text` + gradient)
+- Left-edge accent stripes on cards/callouts
+- Cyan-on-dark / purple-to-blue gradients / neon accents
+- Pure `#000` or `#fff` (tint toward your accent hue instead)
+- Identical card grids (same-size cards repeated)
+- Everything centered with equal weight (lead the eye somewhere)
+- Banned fonts (see [references/typography.md](references/typography.md) for full list)
+
+If the content genuinely calls for one of these — centered layout for a solemn closing, cards for a real product UI mockup, a banned font because it's the perfect thematic match — use it. The goal is intentionality, not avoidance.
+
+## Color
+
+- Match light/dark to content: food, wellness, kids → light. Tech, cinema, finance → dark.
+- One accent hue. Same background across all scenes.
+- Tint neutrals toward your accent (even subtle warmth/coolness beats dead gray).
+- **Contrast:** enforced by `hyperframes check` (WCAG AA). Text must be readable with decoratives removed.
+- Declare palette up front. Don't invent colors per-element.
+
+## Background Layer
+
+Every scene needs visual depth — persistent decorative elements that stay visible while content animates in. Without these, scenes feel empty during entrance staggering.
+
+Ideas (mix and match, 2-5 per scene):
+
+- Radial glows (accent-tinted, low opacity, breathing scale)
+- Ghost text (theme words at 3-8% opacity, very large, slow drift)
+- Accent lines (hairline rules, subtle pulse)
+- Grain/noise overlay, geometric shapes, grid patterns
+- Thematic decoratives (orbit rings for space, vinyl grooves for music, grid lines for data)
+
+All decoratives should have slow ambient GSAP animation — breathing, drift, pulse. Static decoratives feel dead.
+
+**Decorative count vs motion count.** The "2-5 per scene" count refers to decorative _elements_. If a project's design spec says "single ambient motion per scene", it means one looping motion applied to these decoratives (a shared breath/drift/pulse) — not one element total. A scene with 4 decoratives sharing one breathing motion is correct; a scene with 1 decorative is under-dressed.
+
+## Motion
+
+See [references/motion-principles.md](references/motion-principles.md) for full rules. Quick: 0.3–0.6s, vary eases, combine transforms on entrances, overlap entries.
+
+## Typography
+
+See [references/typography.md](references/typography.md) for full rules. Quick: 700-900 headlines / 300-400 body, serif + sans (not two sans), 60px+ headlines / 20px+ body.
+
+## Palettes
+
+Declare one background, one foreground, one accent before writing HTML.
+
+| Category          | Use for                                       | File                                                       |
+| ----------------- | --------------------------------------------- | ---------------------------------------------------------- |
+| Bold / Energetic  | Product launches, social media, announcements | [palettes/bold-energetic.md](palettes/bold-energetic.md)   |
+| Warm / Editorial  | Storytelling, documentaries, case studies     | [palettes/warm-editorial.md](palettes/warm-editorial.md)   |
+| Dark / Premium    | Tech, finance, luxury, cinematic              | [palettes/dark-premium.md](palettes/dark-premium.md)       |
+| Clean / Corporate | Explainers, tutorials, presentations          | [palettes/clean-corporate.md](palettes/clean-corporate.md) |
+| Nature / Earth    | Sustainability, outdoor, organic              | [palettes/nature-earth.md](palettes/nature-earth.md)       |
+| Neon / Electric   | Gaming, tech, nightlife                       | [palettes/neon-electric.md](palettes/neon-electric.md)     |
+| Pastel / Soft     | Fashion, beauty, lifestyle, wellness          | [palettes/pastel-soft.md](palettes/pastel-soft.md)         |
+| Jewel / Rich      | Luxury, events, sophisticated                 | [palettes/jewel-rich.md](palettes/jewel-rich.md)           |
+| Monochrome        | Dramatic, typography-focused                  | [palettes/monochrome.md](palettes/monochrome.md)           |
+
+Or derive from OKLCH — pick a hue, build bg/fg/accent at different lightnesses, tint everything toward that hue.
diff --git a/.claude/skills-media/hyperframes-creative/references/motion-principles.md b/.claude/skills-media/hyperframes-creative/references/motion-principles.md
new file mode 100644
index 000000000..f7acae70c
--- /dev/null
+++ b/.claude/skills-media/hyperframes-creative/references/motion-principles.md
@@ -0,0 +1,150 @@
+# Motion Principles
+
+## Contents
+
+- Guardrails
+- What you do not do without being told
+- Visual composition
+- Image motion treatment
+- Load-bearing GSAP rules
+
+## Guardrails
+
+You know these rules but you violate them. Stop.
+
+- **Don't use the same ease on every tween.** You default to `power2.out` on everything. Vary eases like you vary font weights — no more than 2 independent tweens with the same ease in a scene.
+- **Don't use the same speed on everything.** You default to 0.4-0.5s for everything. The slowest scene should be 3× slower than the fastest. Vary duration deliberately.
+- **Don't enter everything from the same direction.** You default to `y: 30, opacity: 0` on every element. Vary: from left, from right, from scale, opacity-only, letter-spacing.
+- **Don't use the same stagger on every scene.** Each scene needs its own rhythm.
+- **Don't use ambient zoom on every scene.** Pick different ambient motion per scene: slow pan, subtle rotation, scale push, color shift, or nothing. Stillness after motion is powerful.
+- **Don't start at t=0.** Offset the first animation 0.1-0.3s. Zero-delay feels like a jump cut.
+
+## What You Don't Do Without Being Told
+
+### Easing is emotion, not technique
+
+The transition is the verb. The easing is the adverb. A slide-in with `expo.out` = confident. With `sine.inOut` = dreamy. With `elastic.out` = playful. Same motion, different meaning. Choose the adverb deliberately.
+
+**Direction rules — these are not optional:**
+
+- `.out` for elements entering. Starts fast, decelerates. Feels responsive. This is your default.
+- `.in` for elements leaving. Starts slow, accelerates away. Throws them off.
+- `.inOut` for elements moving between positions.
+
+You get this backwards constantly. Ease-in for entrances feels sluggish. Ease-out for exits feels reluctant.
+
+### Speed communicates weight
+
+- Fast (0.15-0.3s) — energy, urgency, confidence
+- Medium (0.3-0.5s) — professional, most content
+- Slow (0.5-0.8s) — gravity, luxury, contemplation
+- Very slow (0.8-2.0s) — cinematic, emotional, atmospheric
+
+### Scene structure: build / breathe / resolve
+
+Every scene has three phases. You dump everything in the build and leave nothing for breathe or resolve.
+
+- **Build (0-30%)** — elements enter, staggered. Don't dump everything at once.
+- **Breathe (30-70%)** — content visible, alive with ONE ambient motion.
+- **Resolve (70-100%)** — exit or decisive end. Exits are faster than entrances.
+
+### Transitions are meaning
+
+- **Crossfade** = "this continues"
+- **Hard cut** = "wake up" / disruption
+- **Slow dissolve** = "drift with me"
+
+You crossfade everything. Use hard cuts for disruption and register shifts.
+
+### Choreography is hierarchy
+
+The element that moves first is perceived as most important. Stagger in order of importance, not DOM order. Don't wait for completion — overlap entries. Total stagger sequence under 500ms regardless of item count.
+
+### Asymmetry
+
+Entrances need longer than exits. A card takes 0.4s to appear but 0.25s to disappear.
+
+## Visual Composition
+
+You build for the web. Video frames are not pages.
+
+- **Two focal points minimum per scene.** The eye needs somewhere to travel. Never a single text block floating in empty space.
+- **Fill the frame.** Hero text: 60-80% of width. You will try to use web-sized elements. Don't.
+- **Three layers minimum per scene.** Background treatment (glow, oversized faded type, color panel). Foreground content. Accent elements (dividers, labels, data bars).
+- **Background is not empty.** Radial glows, oversized faded type bleeding off-frame, subtle border panels, hairline rules. Pure solid #000 reads as "nothing loaded."
+- **Anchor to edges.** Pin content to left/top or right/bottom. Centered-and-floating is a web pattern.
+- **Split frames.** Data panel on the left, content on the right. Top bar with metadata, full-width below. Zone-based layouts, not centered stacks.
+- **Use structural elements.** Rules, dividers, border panels. They create paths for the eye and animate well (scaleX from 0).
+
+## Image Motion Treatment
+
+Never embed a raw flat image. Every image must have motion treatment:
+
+- **Perspective tilt**: use `gsap.set(el, { transformPerspective: 1200, rotationY: -8 })` + `box-shadow` — creates depth. Do NOT use CSS `transform: perspective(...)` as GSAP will overwrite it.
+- **Slow zoom (Ken Burns)**: GSAP `scale: 1` → `1.04` over beat duration — makes photos cinematic
+- **Device frame**: Wrap in a laptop/phone shape using CSS `border-radius` and `box-shadow`
+- **Floating UI**: Extract a key element and animate it at a different z-depth for parallax
+- **Scroll reveal**: Clip the image to a viewport window and animate `y` position
+
+## Load-Bearing GSAP Rules
+
+Rules below came out of two independent website capture builds (2026-04-20) where compositions lint-clean and still ship broken — elements that never appear, ambient motion that doesn't scrub, entrance tweens that silently kill their target. The linter cannot catch these; the rules must be followed by the author.
+
+- **No iframes for captured content.** Iframes do not seek deterministically with the timeline — the capture engine cannot scrub inside them, so they appear frozen (or blank) in the rendered output. If the source you're stylizing is a live web app, use the screenshots from `capture/` as stacked panels or layered images, not live embeds.
+
+- **Never overlap conflicting transform tweens on the same element.** Sequential, non-overlapping transform phases are valid. The dangerous case is concurrent tweens or `from()` tweens whose `immediateRender` states overwrite one another: for example, a `y` entrance plus a simultaneous `scale` Ken Burns tween on the same `<img>`. The element can remain invisible or offscreen with no lint warning. Fix the overlap in one of two ways:
+
+  ```html
+  <!-- BAD: two transforms on one element -->
+  <img class="hero" src="..." />
+  <script>
+    tl.from(".hero", { y: 50, opacity: 0, duration: 0.6 }, 0);
+    tl.to(".hero", { scale: 1.04, duration: beat }, 0); // kills the entrance
+  </script>
+
+  <!-- GOOD option A: combine into one tween -->
+  <script>
+    tl.fromTo(
+      ".hero",
+      { y: 50, opacity: 0, scale: 1.0 },
+      { y: 0, opacity: 1, scale: 1.04, duration: beat, ease: "none" },
+      0,
+    );
+  </script>
+
+  <!-- GOOD option B: split across parent + child -->
+  <div class="hero-wrap"><img class="hero" src="..." /></div>
+  <script>
+    tl.fromTo(".hero-wrap", { y: 50, opacity: 0 }, { y: 0, opacity: 1, duration: 0.6 }, 0); // entrance on parent
+    tl.to(".hero", { scale: 1.04, duration: beat }, 0); // Ken Burns on child
+  </script>
+  ```
+
+- **Prefer `tl.fromTo()` over `tl.from()` inside `.clip` scenes.** `gsap.from()` sets `immediateRender: true` by default, which writes the "from" state at timeline construction — before the `.clip` scene's `data-start` is active. Elements can flash visible, start from the wrong position, or skip their entrance entirely when the scene is seeked non-linearly (which the capture engine does). Explicit `fromTo` makes the state at every timeline position deterministic:
+
+  ```js
+  // BRITTLE: immediateRender interacts badly with scene boundaries
+  tl.from(el, { opacity: 0, y: 50, duration: 0.6 }, t);
+
+  // DETERMINISTIC: state is defined at both ends, no immediateRender surprise
+  tl.fromTo(el, { opacity: 0, y: 50 }, { opacity: 1, y: 0, duration: 0.6 }, t);
+  ```
+
+- **Ambient pulses must attach to the seekable `tl`, never bare `gsap.to()`.** Auras, shimmers, gentle float loops, logo breathing — all of these must be added to the scene's timeline, not fired standalone. Standalone tweens run on wallclock time and do not scrub with the capture engine, so the effect is absent in the rendered video even though it looks correct in the studio preview:
+
+  ```js
+  // BAD: lives outside the timeline, never renders in capture
+  gsap.to(".aura", { scale: 1.08, yoyo: true, repeat: 5, duration: 1.2 });
+
+  // GOOD: seekable, deterministic, renders
+  tl.to(".aura", { scale: 1.08, yoyo: true, repeat: 5, duration: 1.2 }, 0);
+  ```
+
+- **Hard-kill exiting inner elements at a scene boundary, not the `.clip` itself.** A non-clip element or wrapper whose visibility changes at a beat boundary may need a deterministic zero-duration `tl.set()` kill after its fade, because a later tween or sibling `immediateRender` can resurrect it. This is the explicit-boundary exception to the ban on raw `visibility` tweens. HyperFrames alone controls `.clip` lifecycle; never apply this pattern to the clip container.
+
+  ```js
+  tl.to(innerEl, { opacity: 0, duration: 0.3 }, beatEnd);
+  tl.set(innerEl, { opacity: 0, visibility: "hidden" }, beatEnd + 0.3); // non-clip kill
+  ```
+
+These are the exact rules with the exact code examples — don't summarize or shorten them. They exist because compositions that lint clean still ship broken without them.
diff --git a/.claude/skills-media/hyperframes-creative/references/narration.md b/.claude/skills-media/hyperframes-creative/references/narration.md
new file mode 100644
index 000000000..c28fff2ee
--- /dev/null
+++ b/.claude/skills-media/hyperframes-creative/references/narration.md
@@ -0,0 +1,92 @@
+# Narration & Script
+
+How to write narration scripts for video compositions. Read when the composition includes voiceover or TTS.
+
+## Pacing
+
+- **2.5 words per second** is natural speaking pace
+- 15s = ~37 words. 30s = ~75 words. 60s = ~150 words
+- Leave room for pauses. Silence between sentences is a feature, not dead air
+- The script should feel SHORTER than the video — visual breathing room matters
+
+## Tone
+
+Write like a person, not a brochure:
+
+- Use contractions: "it's", "you'll", "that's", "we've"
+- Vary sentence length — short punchy phrases mixed with longer flowing ones
+- Read it out loud. If it sounds robotic, rewrite it
+- Avoid jargon unless the audience expects it
+
+## Number Pronunciation
+
+Write what you want the voice to say. TTS reads literally.
+
+| In the product | Write in script as                |
+| -------------- | --------------------------------- |
+| 135+           | more than one hundred thirty five |
+| $1.9T          | nearly two trillion dollars       |
+| 99.999%        | ninety nine point nine percent    |
+| 200M+          | over two hundred million          |
+| 10x            | ten times                         |
+| API            | A P I                             |
+| stripe.com     | stripe dot com                    |
+
+The visual can show the exact figure while the voice rounds it.
+
+## Structure
+
+For product videos:
+
+1. **Hook** — what's surprising or impressive about this product? A bold claim, a provocative question, a contrast, or a striking number. This is the opening line. **Vary the hook type** — don't default to a stat every time.
+2. **Story** — what does the product do? Who uses it? Keep it concrete.
+3. **Proof** — stats, customer names, social proof. Real numbers from the product.
+4. **CTA** — what should the viewer do? "Start building at stripe dot com."
+
+Not every video needs all four. A 15-second social ad might be Hook + Proof + CTA. A 60-second product tour uses all four with more Story.
+
+## The Opening Line
+
+The most important sentence in the video. It must create tension, curiosity, or surprise in the first 3 seconds.
+
+Patterns that work:
+
+- **A bold claim**: "The financial infrastructure that powers the internet economy."
+- **A question that provokes**: "What if your database could think?"
+- **A contrast**: "Your AI agent already knows how to make videos. It just needs the right format."
+- **A number that shocks**: "Nearly two trillion dollars." (Use sparingly — not every video should open with a stat.)
+
+If the opening is generic ("Welcome to Stripe" / "Introducing our product"), start over.
+
+## Example
+
+From a 62-second product launch video (team reference):
+
+```
+Your AI agent already knows how to make videos.
+It just needs the right format.
+
+This is Hyperframes. An open source framework. HTML in, video out.
+
+A div is a keyframe. Data attributes are your timeline.
+CSS is your look. G-Sap is your animation engine.
+
+Anything a browser can render can be a frame in your video.
+
+CSS animations. G-Sap. Lottie. Shaders. Three.js.
+
+Drop in music, sound effects, footage — it all composes together.
+
+No new framework for the agent to learn.
+Just HTML.
+
+The agent writes it. The renderer captures every frame as MP4.
+It's deterministic. Identical outputs, every time.
+
+Give your agent the CLI. Tell it what to make.
+Watch it build.
+
+Hyperframes. Go make something.
+```
+
+Note: ~140 words for 62 seconds — that's 2.3 words/sec, leaving room for pauses and visual breathing.
diff --git a/.claude/skills-media/hyperframes-creative/references/prompt-expansion.md b/.claude/skills-media/hyperframes-creative/references/prompt-expansion.md
new file mode 100644
index 000000000..ef6450d46
--- /dev/null
+++ b/.claude/skills-media/hyperframes-creative/references/prompt-expansion.md
@@ -0,0 +1,68 @@
+# Prompt Expansion
+
+Run on every composition. Expansion is not about lengthening a short prompt — it's about grounding the user's intent against the design spec (`frame.md` or `design.md`) and `house-style.md` and producing a consistent intermediate that every downstream agent reads the same way.
+
+Runs AFTER design direction is established (Step 1). The expansion consumes the design spec (`frame.md` or `design.md`, if present) and produces output that cites its exact values.
+
+## Prerequisites
+
+Read before generating:
+
+- the design spec — `frame.md` → `design.md` → `DESIGN.md` (read the first that exists) — extract brand colors, fonts, mood, and constraints. The expansion cites these exact values (hex codes, font names); it does not invent new ones.
+- `references/beat-direction.md` — per-beat planning format (concept, mood, choreography verbs, transitions, depth layers, rhythm). The expansion outputs each scene using this format.
+- `references/video-composition.md` — video-medium rules for density, scale, and color presence. The expansion applies these automatically.
+- `house-style.md` — its rules for Background Layer (2-5 decoratives), Color, Motion, Typography apply to every scene. The expansion writes output that conforms to them.
+
+If no design spec (`frame.md` or `design.md`) exists yet, run Step 1 (Design system) first. Expansion without a design context produces generic scene breakdowns that later agents ignore.
+
+## Why always run it
+
+**The expansion is never pass-through.** Every user prompt — no matter how detailed — is a _seed_. The expansion's job is to enrich it into a fully-realized per-scene production spec that the scene subagents can build from directly.
+
+Even a detailed 7-scene brief lacks things only the expansion adds:
+
+- **Atmosphere layers per scene** (required 2–5 from house-style: radial glows, ghost type, hairline rules, grain, thematic decoratives) — the user's prompt almost never lists these; expansion adds them.
+- **Secondary motion for every decorative** — breath, drift, pulse, orbit. A decorative without ambient motion feels dead.
+- **Micro-details that make a scene feel real** — registration marks, tick indicators, monospace coord labels, typographic accents, code snippets in the background, grid patterns. Things the user didn't think to request.
+- **Transition choreography at the object level** — not "crossfade" but "X expands outward and becomes Y". Specific duration, ease, and morph source/target.
+- **Pacing beats within each scene** — where tension builds, where a hold lets the viewer breathe, where the accent word lands.
+- **Exact hex values, typography parameters, ease choices** from the design spec — no vagueness left for the scene subagent to guess.
+
+Expansion's job on a detailed prompt is not to summarize or pass through — it's to **take what the user wrote and make it richer**. The user's content stays; the atmosphere, ambient motion, and micro-details are added on top. That's what makes the difference between a scene that matches the brief and a scene that feels alive.
+
+The quality gap between a single-pass composition and a multi-scene-pipeline composition comes from this step. Expansion front-loads the richness so every scene subagent builds from a rich brief, not a terse one.
+
+**Do not skip. Do not pass through.** Single-scene compositions and trivial edits are the only exceptions.
+
+## What to generate
+
+Expand into a full production prompt with these sections:
+
+1. **Title + style block** — cite the design spec's exact hex values, font names, and mood. Do NOT invent a palette — quote what the design provides.
+
+2. **Rhythm declaration** — name the scene rhythm before detailing any scene. Example: `hook-PUNCH-breathe-CTA` or `slow-build-BUILD-PEAK-breathe-CTA`. Use `references/beat-direction.md` for rhythm templates by video type.
+
+3. **Global rules** — parallax layers, micro-motion requirements, transition style, primary + accent transitions. Match energy to mood (calm → slow eases, high → snappy eases).
+
+4. **Per-scene beats** — for each scene, use the beat-direction format:
+   - **Concept** — the big idea in 2-3 sentences. What visual WORLD? What metaphor? What should the viewer FEEL?
+   - **Mood direction** — cultural/design references, not hex codes. ("Bauhaus color studies", "cinematic title sequence", "editorial calm")
+   - **Depth layers** — BG treatment, MG content, and FG accents or structural details as the concept needs. Use `video-composition.md` to choose density; do not force an element count or invent content to fill one.
+   - **Animation choreography** — specific verbs per element. High: SLAMS, CRASHES. Medium: CASCADE, SLIDES. Low: floats, types on, counts up. Every element gets a verb. If you can't name the verb, the element is not yet designed.
+   - **Transition out** — shader or CSS, with specific type and parameters. Not "crossfade" but "blur crossfade, 0.4s, power2.inOut."
+
+5. **Recurring motifs** — visual threads across scenes from the brand palette.
+
+6. **Negative prompt** — what to avoid, informed by the design spec's constraints if present.
+
+## Output
+
+Write the expanded prompt to `.hyperframes/expanded-prompt.md` in the project directory. Do NOT dump it into the chat — it will be hundreds of lines.
+
+Tell the user:
+
+> "I've expanded your prompt into a full production breakdown. Review it here: `.hyperframes/expanded-prompt.md`
+>
+> It has [N] scenes across [duration] seconds with specific visual elements, transitions, and pacing. Edit anything you want, then let me know when you're ready to proceed."
+
+Only move to construction after the user approves or says to continue.
diff --git a/.claude/skills-media/hyperframes-creative/references/story-spine.md b/.claude/skills-media/hyperframes-creative/references/story-spine.md
new file mode 100644
index 000000000..e6931f760
--- /dev/null
+++ b/.claude/skills-media/hyperframes-creative/references/story-spine.md
@@ -0,0 +1,37 @@
+# Story spine — value-first narrative doctrine
+
+Applies to the narrated, story-driven creation workflows — `/product-launch-video`, `/pr-to-video`, `/faceless-explainer`, and `/general-video` when the piece tells a story. It does **not** apply to `/music-to-video` (the track drives the arc), `/motion-graphics` (no narration — motion is the message), `/embedded-captions` and `/talking-head-recut` (the footage's story is already fixed), or `/slideshow` (the presenter owns the story). Do not force these rules onto an exempt workflow.
+
+Each workflow's own story-design reference owns its archetypes, beat sequences, and frame vocabulary. This file owns three cross-workflow rules about **order** and **justification** — the reverse iceberg: lead with why it's valuable, not with what it is or how it was made.
+
+## 1. The hook speaks the viewer's language
+
+The first beat answers "why should I care" in **outcome language** — what the viewer gains, avoids, or finally understands. Subject-internal vocabulary is banned in the hook: file / function / API names for a code change; a feature list for a product; the source article's section headings for an explainer. Numbers are welcome only when they carry stakes ("40% faster cold starts"), never inventory ("23 files changed").
+
+## 2. Reverse iceberg — value before evidence
+
+The value claim (the brief's `message`) lands **by the second beat**. Everything after it is evidence in service of that claim — the diff, the mechanism, the feature demo, the site's screenshots. Implementation is the footnote of the story, not the spine.
+
+Self-check on the finished beat list:
+
+- Delete every evidence beat — the remaining beats must still state the value on their own.
+- Delete the value beats — if the video still seems to work, it was a feature tour / diff readout, not a story.
+
+Structure is value-first; the **voice** stays whatever the workflow prescribes (a PR video keeps its plain, no-hype developer voice — leading with value is an ordering decision, not a marketing register).
+
+## 3. The storyboard is a proposal, not a listing
+
+When Step 3 presents the plan (a checkpoint gate — `hyperframes-core/references/brief-contract.md` § 1):
+
+- Open by echoing the strategy line: **"This video tells [audience] that [message]."**
+- Present the frames as a markdown table, one row per frame:
+
+  | Frame            | Beat      | On screen                                               | Why                             |
+  | ---------------- | --------- | ------------------------------------------------------- | ------------------------------- |
+  | 01 — Not anymore | hook · 9s | States the old pain and resolves it in the same breath. | Lands the value claim in beat 1 |
+
+  **Why** is the frame's job in the story (from its `narrativeRole`), traced back to the message — a frame whose why cannot be traced to the message is a frame to cut, not to decorate.
+
+- Recommendations keep their receipts (brief-contract § 3): the archetype choice, the beat count, and any beat the user might question each state their basis.
+
+The proposal shape — echo line → frame table → style / duration footer → "approve or adjust" — is the cheapest place to iterate: a frame change here costs 30 seconds; the same change after build costs minutes.
diff --git a/.claude/skills-media/hyperframes-creative/references/typography.md b/.claude/skills-media/hyperframes-creative/references/typography.md
new file mode 100644
index 000000000..2e5713d63
--- /dev/null
+++ b/.claude/skills-media/hyperframes-creative/references/typography.md
@@ -0,0 +1,218 @@
+# Typography
+
+The compiler **pre-bundles a fixed set** of fonts (the table below) — write one of those families in `font-family` and it renders deterministically, offline, with no setup and no warning. A name _outside_ that set is **not silently dropped**: if it's a real Google font the compiler fetches it from Google Fonts at **build time** and embeds it, so it _does_ render — but that implicit path (a) trips a `font_family_without_font_face` lint warning, and (b) is **fail-closed in distributed/cloud renders** — if Google is unreachable the render _errors_ rather than quietly substituting a system font. Beyond that, **local renders auto-capture fonts you actually have**: a family installed on your machine, a local `@font-face` path, or an external CDN stylesheet all get compressed to woff2 and inlined at build time. So a name on **neither** the bundle **nor** Google Fonts only truly falls back to a generic system font when it's _also_ not installed locally and not declared in an `@font-face` — and even that logs a compiler warning. **One caveat**: distributed/cloud (Lambda) renders disable system-font capture, so don't rely on a locally-installed-only font for those. So don't assume an un-bundled display name will Just Work: for anything that must render predictably, pick a bundled family below **or embed your own `@font-face`** (see "Finding Fonts").
+
+## Contents
+
+- Fonts that embed (auto-resolve)
+- Banned fonts
+- Guardrails
+- What you do not do without being told
+- Finding fonts
+- Selection thinking
+- Similar-font pairing
+- Dark backgrounds
+- OpenType features for data
+
+## Fonts That Embed (auto-resolve)
+
+These **18 families** are the ones the renderer **pre-bundles** — embedded as local data URIs with no network fetch, so they render offline and deterministically with zero setup, no lint warning, and no fail-closed fetch risk. Write any of them as a `font-family` and it renders; **only the listed weights exist** (asking for a weight a family doesn't ship gives a synthetic/fallback weight, not a real cut). (Any _other_ real Google font still works via the implicit build-time fetch described in the intro — but only these render with none of those caveats.)
+
+| Family            | Weights         | Role              |
+| ----------------- | --------------- | ----------------- |
+| Inter             | 400 · 700 · 900 | sans (body/UI)    |
+| Roboto            | 400 · 700 · 900 | sans              |
+| Open Sans         | 400 · 700       | sans              |
+| Lato              | 400 · 700 · 900 | sans              |
+| Nunito            | 400 · 700 · 900 | sans (rounded)    |
+| Montserrat        | 400 · 700 · 900 | geometric sans    |
+| Poppins           | 400 · 700 · 900 | geometric sans    |
+| Outfit            | 400 · 700 · 900 | geometric sans    |
+| Oswald            | 400 · 700       | condensed sans    |
+| **League Gothic** | **400 only**    | condensed display |
+| **Archivo Black** | **400 only**    | heavy display     |
+| Playfair Display  | 400 · 700 · 900 | serif (display)   |
+| EB Garamond       | 400 · 700       | serif (text)      |
+| Space Mono        | 400 · 700       | mono              |
+| IBM Plex Mono     | 400 · 700       | mono              |
+| JetBrains Mono    | 400 · 700       | mono              |
+| Source Code Pro   | 400 · 700       | mono              |
+| Noto Sans JP      | 400 · 700       | CJK (Japanese)    |
+
+> ⚠ **League Gothic and Archivo Black ship weight 400 ONLY** — they are already heavy/condensed display faces. Do not request `font-weight: 700/900` on them.
+
+**Aliases** — these common names resolve to an embedded family, so you may safely write them: `Helvetica Neue` / `Helvetica` / `Arial` → Inter · `Futura` / `DIN Alternate` / `Arial Black` → Montserrat · `Bebas Neue` → League Gothic · `Segoe UI` → Roboto · `Courier New` / `Courier` → JetBrains Mono · `Garamond` → EB Garamond. (This is why a "safe" `Helvetica Neue` stack always renders — it maps to embedded Inter.)
+
+**Reconciling with the Banned list below:** several embedded families (Inter, Roboto, Open Sans, Lato, Nunito, Poppins, Outfit, Playfair Display, EB Garamond) are _also_ on the Banned monoculture list — they render fine but read as generic. The families that are **embedded AND not banned** — your safe-and-distinctive picks — are: **Montserrat, Oswald, League Gothic, Archivo Black, Space Mono, IBM Plex Mono, JetBrains Mono, Source Code Pro, Noto Sans JP**. Reach for these (or a non-bundled font you've confirmed via the Finding-Fonts step). A non-bundled name isn't guaranteed-broken — a real Google font is auto-fetched and embedded — but it carries a lint warning and a fail-closed fetch in cloud renders, so for anything that must render predictably, **embed it yourself via `@font-face`** (see "Finding Fonts") rather than relying on the implicit fetch.
+
+## Banned
+
+Training-data defaults that every LLM reaches for. These produce monoculture across compositions.
+
+Inter, Roboto, Open Sans, Noto Sans, Arimo, Lato, Source Sans, PT Sans, Nunito, Poppins, Outfit, Sora, Playfair Display, Cormorant Garamond, Bodoni Moda, EB Garamond, Cinzel, Prata, Syne
+
+**Syne in particular** is the most overused "distinctive" display font. It is an instant AI design tell.
+
+## Guardrails
+
+You know these rules but you violate them. Stop.
+
+- **Don't pair two sans-serifs.** You do this constantly — one for headlines, one for body. Cross the boundary: serif + sans, or sans + mono.
+- **One expressive font per scene.** You pick two interesting fonts trying to make it "better." One performs, one recedes.
+- **Weight contrast must be extreme.** You default to 400 vs 700. Video needs 300 vs 900. The difference must be visible in motion at a glance.
+- **Video sizes, not web sizes.** Full-screen viewing (YouTube / website embed): body 20px minimum, headlines 60px+, data labels 16px. **In-feed viewing** (destination = X / LinkedIn / Instagram feed — `hyperframes-core/references/brief-contract.md` § 2): the video plays small inside a scrolling feed, so scale up — body ≥32px, headlines ≥90px, data labels ≥24px (first-pass values; calibrate against real renders). You will try to use 14px. Don't.
+
+## What You Don't Do Without Being Told
+
+- **Tension should mean something.** Don't pattern-match pairings. Ask WHY these two fonts disagree. The pairing should embody the content's contradiction — mechanical vs human, public vs private, institutional vs personal. If you can't articulate the tension, it's arbitrary.
+- **Register switching.** Assign different fonts to different communicative modes — one voice for statements, another for data, another for attribution. Not hierarchy on a page. Voices in a conversation.
+- **Tension can live inside a single font.** A font that looks familiar but is secretly strange creates tension with the viewer's expectations, not with another font.
+- **One variable changed = dramatic contrast.** Same letterforms, monospaced vs proportional. Same family at different optical sizes. Changing only rhythm while everything else stays constant.
+- **Double personality works.** Two expressive fonts can coexist if they share an attitude (both irreverent, both precise) even when their forms are completely different.
+- **Time is hierarchy.** The first element to appear is the most important. In video, sequence replaces position.
+- **Motion is typography.** How a word enters carries as much meaning as the font. A 0.1s slam vs a 2s fade — same font, completely different message.
+- **Fixed reading time.** 3 seconds on screen = must be readable in 2. Fewer words, larger type.
+- **Tracking tighter than web.** -0.03em to -0.05em on display sizes. Video encoding compresses letter detail.
+
+## Finding Fonts
+
+Don't default to what you know. If the content is luxury, a grotesque sans might create more tension than the expected Didone serif. Decide the register first, then search.
+
+Save this script to `/tmp/fontquery.py` and run with `curl -s 'https://fonts.google.com/metadata/fonts' > /tmp/gfonts.json && python3 /tmp/fontquery.py /tmp/gfonts.json`:
+
+```python
+import json, sys, random
+from collections import OrderedDict
+
+random.seed()  # true random each run
+
+with open(sys.argv[1]) as f:
+    data = json.load(f)
+fonts = data.get("familyMetadataList", [])
+
+ban = {"Inter","Roboto","Open Sans","Noto Sans","Lato","Poppins","Source Sans 3",
+       "PT Sans","Nunito","Outfit","Sora","Playfair Display","Cormorant Garamond",
+       "Bodoni Moda","EB Garamond","Cinzel","Prata","Arimo","Source Sans Pro","Syne"}
+skip_pfx = ("Roboto","Noto ","Google Sans","Bpmf","Playwrite","Anek","BIZ ",
+            "Nanum","Shippori","Sawarabi","Zen ","Kaisei","Kiwi ","Yuji ","Radio ")
+
+def ok(f):
+    if f["family"] in ban: return False
+    if any(f["family"].startswith(b) for b in skip_pfx): return False
+    if "latin" not in (f.get("subsets") or []): return False
+    return True
+
+seen = set()
+R = OrderedDict()
+
+# Trending Sans — recent (2022+), popular (<300)
+R["Trending Sans"] = []
+for f in fonts:
+    if not ok(f) or f["family"] in seen: continue
+    if f.get("category") in ("Sans Serif","Display") and f.get("dateAdded","") >= "2022-01-01" and f.get("popularity",9999) < 300:
+        R["Trending Sans"].append(f); seen.add(f["family"])
+
+# Trending Serif — recent (2018+), popular (<600)
+R["Trending Serif"] = []
+for f in fonts:
+    if not ok(f) or f["family"] in seen: continue
+    if f.get("category") == "Serif" and f.get("dateAdded","") >= "2018-01-01" and f.get("popularity",9999) < 600:
+        R["Trending Serif"].append(f); seen.add(f["family"])
+
+# Monospace — recent (2018+), popular (<600)
+R["Monospace"] = []
+for f in fonts:
+    if not ok(f) or f["family"] in seen: continue
+    if f.get("category") == "Monospace" and f.get("dateAdded","") >= "2018-01-01" and f.get("popularity",9999) < 600:
+        R["Monospace"].append(f); seen.add(f["family"])
+
+# Impact & Condensed — heavy display fonts with 800+ weight
+R["Impact & Condensed"] = []
+for f in fonts:
+    if not ok(f) or f["family"] in seen: continue
+    has_heavy = any(k in list(f.get("fonts",{}).keys()) for k in ("800","900"))
+    is_display = f.get("category") in ("Sans Serif","Display")
+    if has_heavy and is_display and f.get("popularity",9999) < 400:
+        R["Impact & Condensed"].append(f); seen.add(f["family"])
+
+# Script & Handwriting — popular (<300)
+R["Script & Handwriting"] = []
+for f in fonts:
+    if not ok(f) or f["family"] in seen: continue
+    if f.get("category") == "Handwriting" and f.get("popularity",9999) < 300:
+        R["Script & Handwriting"].append(f); seen.add(f["family"])
+
+
+# Randomize the top 5 in each category so the LLM doesn't always pick the same first result
+for cat in R:
+    R[cat].sort(key=lambda x: x.get("popularity",9999))
+    top5 = R[cat][:5]
+    rest = R[cat][5:]
+    random.shuffle(top5)
+    R[cat] = top5 + rest
+limits = {"Trending Sans":15,"Trending Serif":12,"Monospace":8,
+          "Impact & Condensed":12,"Script & Handwriting":10}
+for cat in R:
+    items = R[cat][:limits.get(cat,10)]
+    if not items: continue
+    print(f"--- {cat} ({len(items)}) ---")
+    for ff in items:
+        var = "VAR" if ff.get("axes") else "   "
+        print(f'  {ff.get("popularity"):4d} | {var} | {ff["family"]}')
+    print()
+```
+
+Five categories: trending sans, trending serif, monospace, impact/condensed, script/handwriting. All dynamically filtered from Google Fonts metadata — no hardcoded font names. Cross classification boundaries when pairing.
+
+## Selection Thinking
+
+Don't pick fonts by category reflex (editorial → serif, tech → mono, modern → geometric sans). That's pattern matching, not design.
+
+1. **Name the register.** What voice is the content speaking in? Institutional authority? Personal confession? Technical precision? Casual irreverence? The register narrows the field more than the category.
+2. **Think physically.** Imagine the font as a physical object the brand could ship — a museum exhibit caption, a hand-painted shop sign, a 1970s mainframe terminal manual, a fabric label inside a coat, a children's book printed on cheap newsprint, a tax form. Whichever physical object fits the register is pointing at the right _kind_ of typeface.
+3. **Reject your first instinct.** The first font that feels right is usually your training-data default for that register. If you picked it last time too, find something else.
+4. **Cross-check the assumption.** An editorial brief does NOT need a serif. A technical brief does NOT need a sans. A children's product does NOT need a rounded display font. The most distinctive choice often contradicts the category expectation.
+
+## Similar-Font Pairing
+
+Never pair two fonts that are similar but not identical — two geometric sans-serifs, two transitional serifs, two humanist sans. They create visual friction without clear hierarchy. The viewer senses something is "off" but can't articulate it. Either use one font at two weights, or pair fonts that contrast on multiple axes: serif + sans, condensed + wide, geometric + humanist.
+
+## Dark Backgrounds
+
+Light text on dark backgrounds creates two optical illusions you need to compensate for:
+
+- **Increased apparent weight.** Light-on-dark reads heavier than dark-on-light at the same `font-weight`. Use 350 instead of 400 for body text. Headlines are less affected because size compensates.
+- **Tighter apparent spacing.** Light halos around letterforms reduce perceived gaps. Increase `line-height` by 0.05-0.1 beyond your light-background value. For display sizes, add 0.01em `letter-spacing` to counteract.
+
+## OpenType Features for Data
+
+Most fonts ship with OpenType features that are off by default. Turn them on for data compositions:
+
+```css
+/* Tabular numbers — digits align vertically in columns */
+.stat-value,
+.timer,
+.data-column {
+  font-variant-numeric: tabular-nums;
+}
+
+/* Diagonal fractions — renders 1/2 as ½ */
+.recipe-amount,
+.ratio {
+  font-variant-numeric: diagonal-fractions;
+}
+
+/* Small caps for abbreviations — less visual shouting */
+.abbreviation,
+.unit {
+  font-variant-caps: all-small-caps;
+}
+
+/* Disable ligatures in code — fi, fl, ffi should stay separate */
+code,
+.code {
+  font-variant-ligatures: none;
+}
+```
+
+`tabular-nums` is essential any time numbers are stacked vertically — stat callouts, timers, scoreboards, data tables. Without it, digits have proportional widths and columns don't align.
diff --git a/.claude/skills-media/hyperframes-creative/references/video-composition.md b/.claude/skills-media/hyperframes-creative/references/video-composition.md
new file mode 100644
index 000000000..fb2a19320
--- /dev/null
+++ b/.claude/skills-media/hyperframes-creative/references/video-composition.md
@@ -0,0 +1,63 @@
+# Video Composition
+
+Video frames are not web pages. Use these rules for design-led compositions while respecting the requested format, brand, and scope. Minimal technical compositions and intentionally sparse formats may need less detail.
+
+## The Design Spec Is Brand, Not Layout
+
+The design spec (`frame.md` or `design.md`) defines what the brand looks like: colors, fonts, personality, constraints. It does NOT define how to compose a video frame. Use brand colors at video-appropriate intensity — not at web-UI opacity.
+
+**Strict from the design spec:** hex values (including background color), font families, weight relationships, Do's and Don'ts. If the user chose a light canvas, use a light canvas. If they chose dark, use dark. Do not override their palette.
+
+**Adapt for video:** type sizes, spacing, decorative opacity, border weight, component treatments. A web UI card at `border: 1px solid #e2e3e6` with `box-shadow: 0 2px 4px rgba(0,0,0,0.06)` is invisible on video. The brand color is sacred; the application is yours.
+
+## Density
+
+Choose density from the message and format. A brand or sizzle frame often needs several visual roles to feel produced; a lower-third, logo sting, or static title may need only a few.
+
+For a scene that should feel layered, plan these roles:
+
+- **Background treatment** — radial glow, oversized ghost type, color panel, grain, grid, or an intentionally flat field justified by the concept.
+- **Midground content** — the actual message. Cards, stats, code blocks, images.
+- **Foreground accents** — dividers, labels, data bars, registration marks, monospace metadata. The details that make it feel produced, not generated.
+
+For produced marketing frames, roughly 6–10 visual roles can be a useful starting point, not a contract. Add decoration only when it reinforces hierarchy, motion, or the concept. Decorative treatment must not become new user-facing content, new scenes, or unrequested claims.
+
+## Color Presence
+
+Muted is fine. Flat is not. Every scene should have at least one color that pulls the eye.
+
+- Brand accent should be VISIBLE — not a 5% opacity glow lost in compression. 15-25% for atmospheric, full saturation for focal elements.
+- **Light canvases work differently than dark.** On dark: accent glows pop naturally. On light: use bolder borders (2px+ solid), stronger structural elements (rules, dividers), and full-saturation accent hits. Light backgrounds need texture (subtle grain, patterns) to avoid the "blank slide" feel. Don't switch to dark — make light cinematic.
+- **No full-screen linear gradients on dark backgrounds.** They band visibly under H.264 compression. Use a radial gradient, a solid fill, or solid + localized glow instead.
+- Tint neutrals toward the brand hue. Dead gray reads as undesigned.
+
+## Scale
+
+Web sizes are invisible on video. Everything scales up.
+
+| Element            | Web     | Video    |
+| ------------------ | ------- | -------- |
+| Headlines          | 32-48px | 64-120px |
+| Body text          | 14-16px | 28-42px  |
+| Labels             | 12px    | 18-24px  |
+| Decorative opacity | 3-8%    | 12-25%   |
+| Borders            | 1px     | 2-4px    |
+| Padding            | 16-32px | 60-140px |
+
+If you're writing a font-size under 24px in a video composition, justify it. If you're writing decorative opacity under 10%, it's invisible.
+
+## Motion Intensity
+
+Subtle reads as static at 30fps. Err toward more movement than feels safe.
+
+- Every decorative element should have ambient motion: breathe, drift, pulse, orbit. Static decoratives feel dead.
+- Vary motion per scene — don't repeat the same ambient pattern.
+- Scene entrances should use 3+ different eases and directions. If every element enters from `y: 30, opacity: 0`, the scene has no choreography.
+
+## Frame Composition
+
+- **Two focal points minimum.** The eye needs somewhere to travel.
+- **Fill the frame.** Hero text: 60-80% of frame width.
+- **Anchor to edges.** Pin content to left/top or right/bottom. Centered-and-floating is a web layout pattern.
+- **Split frames.** Data panel left, content right. Top bar with metadata, full-width below. Zone-based layouts over centered stacks.
+- **Structural elements.** Rules, dividers, border panels. They create visual paths and animate well (`scaleX: 0` → `1`).
diff --git a/.claude/skills-media/hyperframes-creative/references/visual-styles.md b/.claude/skills-media/hyperframes-creative/references/visual-styles.md
new file mode 100644
index 000000000..621ff9e6b
--- /dev/null
+++ b/.claude/skills-media/hyperframes-creative/references/visual-styles.md
@@ -0,0 +1,457 @@
+# Visual Style Library
+
+Named visual identities for HyperFrames videos. Each style is grounded in a real graphic design tradition and expressed as a DESIGN.md-compatible token block. Use them as starters — copy the YAML into your project's `design.md` front matter, then customize.
+
+**How to pick:** Match mood first, content second. Ask: _"What should the viewer FEEL?"_
+
+**How to use:** Copy the style's YAML token block into `design.md` front matter. Add `## Overview`, `## Colors`, `## Typography`, `## Elevation`, `## Components`, `## Do's and Don'ts` prose sections to complete the file.
+
+## Contents
+
+- Quick reference
+- Swiss Pulse
+- Velvet Standard
+- Deconstructed
+- Maximalist Type
+- Data Drift
+- Soft Signal
+- Folk Frequency
+- Shadow Cut
+- Mood to style guide
+- Creating custom styles
+
+## Quick Reference
+
+| Style           | Mood                  | Best for                           | Transition shader                 |
+| --------------- | --------------------- | ---------------------------------- | --------------------------------- |
+| Swiss Pulse     | Clinical, precise     | SaaS, data, dev tools, metrics     | Cinematic Zoom or SDF Iris        |
+| Velvet Standard | Premium, timeless     | Luxury, enterprise, keynotes       | Cross-Warp Morph                  |
+| Deconstructed   | Industrial, raw       | Tech launches, security, punk      | Glitch or Whip Pan                |
+| Maximalist Type | Loud, kinetic         | Big announcements, launches        | Ridged Burn                       |
+| Data Drift      | Futuristic, immersive | AI, ML, cutting-edge tech          | Gravitational Lens or Domain Warp |
+| Soft Signal     | Intimate, warm        | Wellness, personal stories, brand  | Thermal Distortion                |
+| Folk Frequency  | Cultural, vivid       | Consumer apps, food, communities   | Swirl Vortex or Ripple Waves      |
+| Shadow Cut      | Dark, cinematic       | Dramatic reveals, security, exposé | Domain Warp                       |
+
+---
+
+## 1. Swiss Pulse — Josef Müller-Brockmann
+
+**Mood:** Clinical, precise | **Best for:** SaaS dashboards, developer tools, APIs, metrics
+
+```yaml
+name: Swiss Pulse
+colors:
+  primary: "#1a1a1a"
+  on-primary: "#ffffff"
+  accent: "#0066FF"
+typography:
+  headline:
+    fontFamily: Helvetica Neue
+    fontSize: 5rem
+    fontWeight: 700
+  label:
+    fontFamily: Inter
+    fontSize: 0.875rem
+    fontWeight: 400
+  stat:
+    fontFamily: Helvetica Neue
+    fontSize: 7rem
+    fontWeight: 700
+rounded:
+  none: 0px
+  sm: 2px
+spacing:
+  sm: 8px
+  md: 16px
+  lg: 32px
+motion:
+  energy: high
+  easing:
+    entry: "expo.out"
+    exit: "power4.in"
+    ambient: "none"
+  duration:
+    entrance: 0.4
+    hold: 1.5
+    transition: 0.6
+  atmosphere:
+    - grid-lines
+    - registration-marks
+  transition: cinematic-zoom
+```
+
+Grid-locked compositions. Every element snaps to an invisible 12-column grid. Numbers dominate the frame at 80–120px. Animated counters count up from 0. Hard cuts, no decorative transitions. Nothing floats.
+
+---
+
+## 2. Velvet Standard — Massimo Vignelli
+
+**Mood:** Premium, timeless | **Best for:** Luxury products, enterprise software, keynotes, investor decks
+
+```yaml
+name: Velvet Standard
+colors:
+  primary: "#0a0a0a"
+  on-primary: "#ffffff"
+  accent: "#1a237e"
+typography:
+  headline:
+    fontFamily: Inter
+    fontSize: 3rem
+    fontWeight: 300
+    letterSpacing: 0.15em
+    textTransform: uppercase
+  body:
+    fontFamily: Inter
+    fontSize: 1rem
+    fontWeight: 300
+    lineHeight: 1.6
+rounded:
+  sm: 0px
+  md: 2px
+spacing:
+  sm: 16px
+  md: 32px
+  lg: 64px
+motion:
+  energy: calm
+  easing:
+    entry: "sine.inOut"
+    exit: "power1.in"
+    ambient: "sine.inOut"
+  duration:
+    entrance: 1.2
+    hold: 3.0
+    transition: 1.5
+  atmosphere:
+    - subtle-grain
+    - hairline-rules
+  transition: cross-warp-morph
+```
+
+Generous negative space. Symmetrical, centered, architectural precision. Thin sans-serif, ALL CAPS, wide letter-spacing. Sequential reveals with long holds. Nothing snaps — everything glides with intention. Luxury takes its time.
+
+---
+
+## 3. Deconstructed — Neville Brody
+
+**Mood:** Industrial, raw | **Best for:** Tech news, developer launches, security products, punk-energy reveals
+
+```yaml
+name: Deconstructed
+colors:
+  primary: "#1a1a1a"
+  on-primary: "#f0f0f0"
+  accent: "#D4501E"
+typography:
+  headline:
+    fontFamily: Space Grotesk
+    fontSize: 4rem
+    fontWeight: 700
+  label:
+    fontFamily: Space Mono
+    fontSize: 0.75rem
+    fontWeight: 700
+    textTransform: uppercase
+rounded:
+  none: 0px
+spacing:
+  sm: 4px
+  md: 12px
+  lg: 24px
+motion:
+  energy: high
+  easing:
+    entry: "back.out(2.5)"
+    exit: "steps(8)"
+    ambient: "elastic.out(1.2, 0.4)"
+  duration:
+    entrance: 0.3
+    hold: 1.0
+    transition: 0.5
+  atmosphere:
+    - scan-lines
+    - glitch-artifacts
+    - grain-overlay
+  transition: glitch
+```
+
+Type at angles, overlapping edges, escaping frames. Bold industrial weight. Gritty textures: scan-line effects, glitch artifacts baked into design. Text SLAMS and SHATTERS. Letters scramble then snap to final position. Intentional irregularity — nothing should feel polished.
+
+---
+
+## 4. Maximalist Type — Paula Scher
+
+**Mood:** Loud, kinetic | **Best for:** Big product launches, milestone announcements, high-energy hype videos
+
+```yaml
+name: Maximalist Type
+colors:
+  primary: "#0a0a0a"
+  on-primary: "#ffffff"
+  accent-red: "#E63946"
+  accent-yellow: "#FFD60A"
+typography:
+  headline:
+    fontFamily: Anton
+    fontSize: 8rem
+    fontWeight: 400
+    textTransform: uppercase
+  subhead:
+    fontFamily: Space Grotesk
+    fontSize: 3rem
+    fontWeight: 700
+rounded:
+  none: 0px
+spacing:
+  sm: 0px
+  md: 8px
+motion:
+  energy: high
+  easing:
+    entry: "expo.out"
+    exit: "back.out(1.8)"
+    ambient: "power3.out"
+  duration:
+    entrance: 0.3
+    hold: 0.8
+    transition: 0.4
+  atmosphere:
+    - type-layers
+    - color-blocks
+  transition: ridged-burn
+```
+
+Text IS the visual. Overlapping type layers at different scales and angles, filling 50–80% of frame. Bold saturated colors — maximum contrast. Everything kinetic: slamming, sliding, scaling. 2–3 second rapid-fire scenes. No static moments. Fast arrivals, hard stops.
+
+---
+
+## 5. Data Drift — Refik Anadol
+
+**Mood:** Futuristic, immersive | **Best for:** AI products, ML platforms, data companies, speculative tech
+
+```yaml
+name: Data Drift
+colors:
+  primary: "#0a0a0a"
+  on-primary: "#e0e0e0"
+  accent-purple: "#7c3aed"
+  accent-cyan: "#06b6d4"
+typography:
+  headline:
+    fontFamily: Inter
+    fontSize: 2.5rem
+    fontWeight: 200
+    letterSpacing: 0.05em
+  body:
+    fontFamily: Inter
+    fontSize: 0.875rem
+    fontWeight: 300
+rounded:
+  sm: 4px
+  md: 12px
+  full: 9999px
+spacing:
+  sm: 16px
+  md: 32px
+  lg: 64px
+motion:
+  energy: moderate
+  easing:
+    entry: "sine.inOut"
+    exit: "power2.out"
+    ambient: "sine.inOut"
+  duration:
+    entrance: 1.0
+    hold: 2.5
+    transition: 1.5
+  atmosphere:
+    - particle-field
+    - light-traces
+    - radial-glow
+  transition: gravitational-lens
+```
+
+Thin futuristic sans-serif — floating, weightless, minimal. Fluid morphing compositions. Extreme scale shifts (micro → macro). Particles coalesce into numbers. Light traces data paths through the frame. Smooth, continuous, organic. Nothing hard.
+
+---
+
+## 6. Soft Signal — Stefan Sagmeister
+
+**Mood:** Intimate, warm | **Best for:** Wellness brands, personal stories, lifestyle products, human-centered apps
+
+```yaml
+name: Soft Signal
+colors:
+  primary: "#FFF8EC"
+  on-primary: "#2a2a2a"
+  accent-amber: "#F5A623"
+  accent-rose: "#C4A3A3"
+  accent-sage: "#8FAF8C"
+typography:
+  headline:
+    fontFamily: Playfair Display
+    fontSize: 3rem
+    fontWeight: 400
+    fontStyle: italic
+  body:
+    fontFamily: Inter
+    fontSize: 1rem
+    fontWeight: 300
+    lineHeight: 1.7
+rounded:
+  sm: 8px
+  md: 16px
+  lg: 24px
+  full: 9999px
+spacing:
+  sm: 12px
+  md: 24px
+  lg: 48px
+motion:
+  energy: calm
+  easing:
+    entry: "sine.inOut"
+    exit: "power1.inOut"
+    ambient: "sine.inOut"
+  duration:
+    entrance: 1.0
+    hold: 3.0
+    transition: 1.5
+  atmosphere:
+    - soft-gradient
+    - warm-grain
+  transition: thermal-distortion
+```
+
+Handwritten-style or humanist serif fonts. Personal, lowercase, delicate. Close-up framing: single element fills the frame. Slow drifts and floats, never snaps. Soft organic motion. Nothing should feel hurried or polished. Intimate, never corporate.
+
+---
+
+## 7. Folk Frequency — Eduardo Terrazas
+
+**Mood:** Cultural, vivid | **Best for:** Consumer apps, food platforms, community products, festive launches
+
+```yaml
+name: Folk Frequency
+colors:
+  primary: "#ffffff"
+  on-primary: "#1a1a1a"
+  accent-pink: "#FF1493"
+  accent-blue: "#0047AB"
+  accent-yellow: "#FFE000"
+  accent-green: "#009B77"
+typography:
+  headline:
+    fontFamily: Fredoka One
+    fontSize: 4rem
+    fontWeight: 400
+  body:
+    fontFamily: Nunito
+    fontSize: 1rem
+    fontWeight: 600
+rounded:
+  sm: 8px
+  md: 16px
+  lg: 32px
+  full: 9999px
+spacing:
+  sm: 8px
+  md: 16px
+  lg: 32px
+motion:
+  energy: high
+  easing:
+    entry: "back.out(1.6)"
+    exit: "elastic.out(1, 0.5)"
+    ambient: "sine.inOut"
+  duration:
+    entrance: 0.5
+    hold: 1.5
+    transition: 0.8
+  atmosphere:
+    - pattern-tiles
+    - confetti-burst
+    - color-blocks
+  transition: swirl-vortex
+```
+
+Bold warm rounded type. Pattern and repetition — folk art rhythm and density. Layered compositions with rich visual texture. Every frame feels handcrafted. Colorful motion: elements bounce, pop, spin into place with joy. Overshoots feel intentional. Celebratory energy.
+
+---
+
+## 8. Shadow Cut — Hans Hillmann
+
+**Mood:** Dark, cinematic | **Best for:** Security products, dramatic reveals, investigative content, intense launches
+
+```yaml
+name: Shadow Cut
+colors:
+  primary: "#0a0a0a"
+  on-primary: "#f0f0f0"
+  surface: "#3a3a3a"
+  accent: "#C1121F"
+typography:
+  headline:
+    fontFamily: Oswald
+    fontSize: 4rem
+    fontWeight: 700
+    textTransform: uppercase
+  body:
+    fontFamily: Inter
+    fontSize: 0.875rem
+    fontWeight: 400
+rounded:
+  none: 0px
+  sm: 2px
+spacing:
+  sm: 8px
+  md: 16px
+  lg: 48px
+motion:
+  energy: moderate
+  easing:
+    entry: "power3.out"
+    exit: "power4.in"
+    ambient: "sine.inOut"
+  duration:
+    entrance: 0.8
+    hold: 2.5
+    transition: 1.2
+  atmosphere:
+    - deep-shadow
+    - vignette
+    - grain-overlay
+  transition: domain-warp
+```
+
+Near-monochrome: deep blacks, cold greys, stark white + one blood accent. Sharp angular text like film noir title cards. Heavy contrast, no softness. Elements emerge from darkness — reveal is the narrative. Slow creeping push-ins, dramatic scale reveals. The pause before the hit matters. Domain Warp dissolves reality before the next scene.
+
+---
+
+## Mood → Style Guide
+
+| If the content feels...            | Use...          |
+| ---------------------------------- | --------------- |
+| Data-driven, analytical, technical | Swiss Pulse     |
+| Premium, enterprise, luxury        | Velvet Standard |
+| Raw, punk, aggressive, rebellious  | Deconstructed   |
+| Hype, loud, high-energy launch     | Maximalist Type |
+| AI, ML, speculative, futuristic    | Data Drift      |
+| Human, warm, personal, wellness    | Soft Signal     |
+| Cultural, fun, consumer, festive   | Folk Frequency  |
+| Dark, dramatic, intense, cinematic | Shadow Cut      |
+
+---
+
+## Creating Custom Styles
+
+These 8 styles are starters — not constraints. Create your own:
+
+1. **Name it** after a designer, art movement, or cultural reference
+2. **Write YAML tokens** — `colors` (2–5 tokens), `typography` (2–3 scales), `rounded`, `spacing`, `motion` (energy + easing + duration + atmosphere + transition)
+3. **Add prose** — one paragraph describing the feel, what to do, what to avoid
+4. **Token references** — use `{colors.accent}`, `{typography.headline}` in component definitions
+
+The pattern: **YAML tokens (what) → prose rationale (why) → components (how they combine).**
diff --git a/.claude/skills-media/hyperframes-creative/scripts/contrast-report.mjs b/.claude/skills-media/hyperframes-creative/scripts/contrast-report.mjs
new file mode 100644
index 000000000..429243ee6
--- /dev/null
+++ b/.claude/skills-media/hyperframes-creative/scripts/contrast-report.mjs
@@ -0,0 +1,538 @@
+#!/usr/bin/env node
+// contrast-report.mjs — HyperFrames contrast audit
+//
+// Reads a composition, seeks to N sample timestamps, walks the DOM for text
+// elements, measures the WCAG 2.1 contrast ratio between each element's
+// declared foreground color and the ACTUAL pixels behind it, and emits:
+//
+//   - contrast-report.json  (machine-readable, one entry per text element × sample)
+//   - contrast-overlay.png  (sprite grid; magenta=fail AA, yellow=pass AA only, green=AAA)
+//
+// Usage:
+//   node skills/hyperframes-creative/scripts/contrast-report.mjs <composition-dir> \
+//     [--samples N] [--out <dir>] [--width W] [--height H] [--fps N]
+//
+// Env:
+//   HYPERFRAMES_SKILL_PKG_VERSION — pin the @hyperframes/producer version used
+//     when bootstrapping (global skill installs cannot infer it; falls back to
+//     @latest with a warning otherwise).
+//
+// The composition directory must contain an index.html. Raw authoring HTML
+// works — the producer's file server auto-injects the runtime at serve time.
+// Exits 1 if any text element fails WCAG AA.
+//
+// Background sampling: each sample time is captured TWICE — once via the
+// producer's normal (video-accurate) captureFrameToBuffer for the overlay
+// image, and once via a plain page.screenshot() taken right after hiding
+// every candidate element's own text paint (color/fill → transparent,
+// layout-neutral). The second capture reveals the REAL composited pixels
+// that were directly behind the glyphs, which this script then samples
+// straight from each element's own bbox — no proximity heuristic needed.
+// This is deliberately NOT routed through captureFrameToBuffer: that
+// pipeline has a static-frame dedup cache keyed by frame index/time that
+// knows nothing about our DOM mutation and would happily hand back a
+// cached pre-mutation buffer. A direct page.screenshot() bypasses that
+// entirely and is the same technique validated in
+// packages/cli/src/commands/contrast-audit.browser.js.
+//
+// The previous approach sampled a 4px ring just OUTSIDE the bbox, which
+// breaks down whenever what's immediately outside the text differs from
+// what's actually behind it: a neighboring panel/component just past the
+// text's edge, a backdrop-filter-blurred glass panel sized only a couple
+// pixels larger than the text, or a translucent decoration that only
+// partially overlaps the ring (or sits entirely inside the bbox, never
+// touching the ring at all).
+
+import { mkdir, writeFile } from "node:fs/promises";
+import { resolve } from "node:path";
+import {
+  bundleCompositionForCapture,
+  hyperframesPackageSpec,
+  importPackagesOrBootstrap,
+  initializeSessionWithRetry,
+} from "./package-loader.mjs";
+
+// Bundle first so mounted sub-compositions are inlined before the producer's
+// file server injects the HyperFrames runtime and render-seek bridge.
+const packages = await importPackagesOrBootstrap(
+  ["@hyperframes/producer", "@hyperframes/core", "@hyperframes/core/compiler", "sharp"],
+  {
+    npmPackages: [
+      hyperframesPackageSpec("@hyperframes/producer"),
+      hyperframesPackageSpec("@hyperframes/core"),
+      "sharp@0.34.5",
+    ],
+  },
+);
+const sharp = packages.sharp.default;
+const { parseFps } = packages["@hyperframes/core"];
+const {
+  createFileServer,
+  createCaptureSession,
+  closeCaptureSession,
+  captureFrameToBuffer,
+  getCompositionDuration,
+} = packages["@hyperframes/producer"];
+
+// ─── CLI ─────────────────────────────────────────────────────────────────────
+
+const args = parseArgs(process.argv.slice(2));
+if (!args.composition) die("missing <composition-dir>");
+
+const SAMPLES = Number(args.samples ?? 10);
+const OUT_DIR = resolve(args.out ?? ".hyperframes/contrast");
+const WIDTH = Number(args.width ?? 1920);
+const HEIGHT = Number(args.height ?? 1080);
+const parsedFps = parseFps(args.fps ?? 30);
+if (!parsedFps.ok) die(`Invalid --fps "${args.fps ?? ""}": ${parsedFps.reason}`);
+const FPS = parsedFps.value;
+const COMP_DIR = resolve(args.composition);
+
+// ─── Main ────────────────────────────────────────────────────────────────────
+
+await mkdir(OUT_DIR, { recursive: true });
+
+const bundle = await bundleCompositionForCapture(packages["@hyperframes/core/compiler"], COMP_DIR);
+let server;
+let session;
+try {
+  server = await createFileServer({
+    projectDir: COMP_DIR,
+    compiledDir: bundle.compiledDir,
+    port: 0,
+  });
+  // Canonical transient-init retry/cleanup (mirrors the render pipeline's
+  // probeStage) — same reasoning as animation-map.mjs: don't false-fail a
+  // valid modular project whose sub-composition timelines land a beat late.
+  session = await initializeSessionWithRetry(
+    packages["@hyperframes/producer"],
+    () =>
+      createCaptureSession(
+        server.url,
+        OUT_DIR,
+        { width: WIDTH, height: HEIGHT, fps: FPS, format: "png" },
+        null,
+      ),
+    { log: (message) => console.error(`contrast-report: ${message}`) },
+  );
+
+  const duration = await getCompositionDuration(session);
+  const times = Array.from(
+    { length: SAMPLES },
+    (_, i) => +(((i + 0.5) / SAMPLES) * duration).toFixed(3),
+  );
+
+  const allEntries = [];
+  const overlayFrames = [];
+
+  for (let i = 0; i < times.length; i++) {
+    const t = times[i];
+    // Visible frame — used only for the human-facing overlay image.
+    const { buffer: pngBuf } = await captureFrameToBuffer(session, i, t);
+
+    // Hides each candidate's own text paint and returns its selector/fg/bbox.
+    const candidates = await prepareTextElements(session);
+    let elements;
+    try {
+      // Deliberately session.page.screenshot(), not captureFrameToBuffer —
+      // see the header comment for why.
+      const hiddenB64 = await session.page.screenshot({ encoding: "base64", type: "png" });
+      elements = await measureAgainstHiddenTextFrame(hiddenB64, candidates);
+    } finally {
+      await restoreTextElements(session);
+    }
+
+    const annotated = await annotateFrame(pngBuf, elements);
+    overlayFrames.push({ t, png: annotated });
+    for (const el of elements) allEntries.push({ time: t, ...el });
+  }
+
+  const report = {
+    composition: COMP_DIR,
+    width: WIDTH,
+    height: HEIGHT,
+    duration,
+    samples: times,
+    entries: allEntries,
+    summary: summarize(allEntries),
+  };
+
+  await writeFile(resolve(OUT_DIR, "contrast-report.json"), JSON.stringify(report, null, 2));
+  await writeOverlaySprite(overlayFrames, resolve(OUT_DIR, "contrast-overlay.png"));
+
+  printSummary(report);
+  process.exitCode = report.summary.failAA > 0 ? 1 : 0;
+} finally {
+  if (session) await closeCaptureSession(session).catch(() => {});
+  server?.close();
+  bundle.cleanup();
+}
+
+// ─── DOM probe + text-hide (runs in the page) ────────────────────────────────
+
+// Walks the DOM for text-bearing elements, computes each one's foreground
+// paint, and hides that element's own text (color/fill → transparent,
+// !important, layout-neutral) so the caller's next screenshot reveals the
+// real pixels behind the glyphs. Returns the candidate list; call
+// restoreTextElements() afterward (in a finally) to undo the hide.
+async function prepareTextElements(session) {
+  return await session.page.evaluate(() => {
+    /** @type {Array<{selector: string, text: string, fg: [number,number,number,number], fontSize: number, fontWeight: number, bbox: {x:number,y:number,w:number,h:number}}>} */
+    const out = [];
+    const restores = [];
+    // Registered BEFORE the walk starts and pushed to incrementally as each
+    // element is hidden: if something in the walk throws partway through,
+    // everything hidden so far is still reachable for restore instead of
+    // leaking hidden indefinitely.
+    window.__contrastReportRestores = restores;
+    const walker = document.createTreeWalker(document.body, NodeFilter.SHOW_ELEMENT);
+    const parseColor = (c) => {
+      const m = c.match(/rgba?\(([^)]+)\)/);
+      if (!m) return [0, 0, 0, 1];
+      const parts = m[1].split(",").map((s) => parseFloat(s.trim()));
+      return [parts[0], parts[1], parts[2], parts[3] ?? 1];
+    };
+    // Like parseColor, but returns null instead of defaulting to black when
+    // the value isn't a solid rgb()/rgba() color — e.g. SVG paint keywords
+    // such as "none"/"context-fill", or a gradient/pattern reference like
+    // 'url("#grad")'. Callers should fall back to another source of truth
+    // rather than trust a fabricated black.
+    const tryParseSolidColor = (c) => {
+      const m = c.match(/rgba?\(([^)]+)\)/);
+      if (!m) return null;
+      const parts = m[1].split(",").map((s) => parseFloat(s.trim()));
+      if (parts.some((v) => Number.isNaN(v))) return null;
+      return [parts[0], parts[1], parts[2], parts[3] ?? 1];
+    };
+    // SVG text (<text>, <tspan>, <textPath>) is painted via the `fill`
+    // property, not `color` — the two are independent CSS properties in
+    // SVG. A page can set `fill` without ever touching `color`, in which
+    // case getComputedStyle(el).color resolves to the inherited/initial
+    // value (often black) and does not reflect what's actually rendered.
+    const isSvgTextElement = (el) => !!el.ownerSVGElement;
+    const selectorOf = (el) => {
+      if (el.id) return `#${el.id}`;
+      const cls = [...el.classList].slice(0, 2).join(".");
+      return cls ? `${el.tagName.toLowerCase()}.${cls}` : el.tagName.toLowerCase();
+    };
+    let el;
+    while ((el = walker.nextNode())) {
+      // must have direct text
+      const direct = [...el.childNodes].some(
+        (n) => n.nodeType === 3 && n.textContent.trim().length,
+      );
+      if (!direct) continue;
+      const cs = getComputedStyle(el);
+      if (cs.visibility === "hidden" || cs.display === "none") continue;
+      if (parseFloat(cs.opacity) <= 0.01) continue;
+      const rect = el.getBoundingClientRect();
+      if (rect.width < 8 || rect.height < 8) continue;
+      const isSvgText = isSvgTextElement(el);
+      const fg = isSvgText
+        ? tryParseSolidColor(cs.fill) || parseColor(cs.color)
+        : parseColor(cs.color);
+      if (fg[3] <= 0.01) continue;
+      const strokeWidth = parseFloat(cs.webkitTextStrokeWidth || "0");
+      const stroke = strokeWidth > 0 ? tryParseSolidColor(cs.webkitTextStrokeColor || "") : null;
+
+      // A `transition` on color/fill would otherwise animate this hide
+      // instead of applying it instantly — the screenshot taken right after
+      // can catch a partially-transparent glyph mid-transition instead of a
+      // fully hidden one, contaminating the background sample. Force
+      // `transition: none` alongside color/fill so the hide is atomic.
+      const origTransition = el.style.getPropertyValue("transition");
+      const origTransitionPriority = el.style.getPropertyPriority("transition");
+      el.style.setProperty("transition", "none", "important");
+      const origColor = el.style.getPropertyValue("color");
+      const origColorPriority = el.style.getPropertyPriority("color");
+      el.style.setProperty("color", "transparent", "important");
+      let origFill = null;
+      let origFillPriority = null;
+      if (isSvgText) {
+        origFill = el.style.getPropertyValue("fill");
+        origFillPriority = el.style.getPropertyPriority("fill");
+        el.style.setProperty("fill", "transparent", "important");
+      }
+      let origStrokeColor = null;
+      let origStrokeColorPriority = null;
+      if (stroke && stroke[3] > 0.01) {
+        origStrokeColor = el.style.getPropertyValue("-webkit-text-stroke-color");
+        origStrokeColorPriority = el.style.getPropertyPriority("-webkit-text-stroke-color");
+        el.style.setProperty("-webkit-text-stroke-color", "transparent", "important");
+      }
+      restores.push({
+        el,
+        origTransition,
+        origTransitionPriority,
+        origColor,
+        origColorPriority,
+        origFill,
+        origFillPriority,
+        origStrokeColor,
+        origStrokeColorPriority,
+        hasStroke: !!stroke && stroke[3] > 0.01,
+        isSvgText,
+      });
+
+      out.push({
+        selector: selectorOf(el),
+        text: el.textContent.trim().slice(0, 60),
+        fg,
+        stroke: stroke && stroke[3] > 0.01 ? stroke : null,
+        fontSize: parseFloat(cs.fontSize),
+        fontWeight: Number(cs.fontWeight) || 400,
+        bbox: { x: rect.x, y: rect.y, w: rect.width, h: rect.height },
+      });
+    }
+    return out;
+  });
+}
+
+async function restoreTextElements(session) {
+  await session.page.evaluate(() => {
+    const restores = window.__contrastReportRestores;
+    if (!restores) return;
+    for (const r of restores) {
+      if (r.origColor) r.el.style.setProperty("color", r.origColor, r.origColorPriority);
+      else r.el.style.removeProperty("color");
+      if (r.isSvgText) {
+        if (r.origFill) r.el.style.setProperty("fill", r.origFill, r.origFillPriority);
+        else r.el.style.removeProperty("fill");
+      }
+      if (r.hasStroke) {
+        if (r.origStrokeColor) {
+          r.el.style.setProperty(
+            "-webkit-text-stroke-color",
+            r.origStrokeColor,
+            r.origStrokeColorPriority,
+          );
+        } else r.el.style.removeProperty("-webkit-text-stroke-color");
+      }
+      if (r.origTransition) {
+        r.el.style.setProperty("transition", r.origTransition, r.origTransitionPriority);
+      } else r.el.style.removeProperty("transition");
+    }
+    window.__contrastReportRestores = null;
+  });
+}
+
+// ─── Pixel sampling + WCAG math ──────────────────────────────────────────────
+
+// Samples the REAL composited background directly inside each candidate's
+// own bbox, from a screenshot taken with every candidate's text hidden —
+// robust to panel edges, backdrop-filter blur, and translucent decoration
+// in ways a proximity-based ring outside the bbox isn't. Mirrors
+// packages/cli/src/commands/contrast-sample.ts's computeSampleRect /
+// sampleGridPoints (kept in sync, not imported — this script bootstraps
+// npm-published packages and can't reach into the cli package's sources).
+async function measureAgainstHiddenTextFrame(hiddenImgBase64, candidates) {
+  const raw = Buffer.from(hiddenImgBase64, "base64");
+  const img = sharp(raw);
+  const { width, height } = await img.metadata();
+  const pixels = await img.ensureAlpha().raw().toBuffer();
+  const channels = 4;
+
+  const measured = [];
+  for (const c of candidates) {
+    const bg = sampleBboxMedian(pixels, width, height, channels, c.bbox);
+    if (!bg) continue;
+    let fg = compositeOver(c.fg, bg); // flatten any alpha against measured bg
+    let ratio = wcagRatio(fg, bg);
+    if (c.stroke) {
+      const stroke = compositeOver(c.stroke, bg);
+      const strokeRatio = wcagRatio(stroke, bg);
+      if (strokeRatio > ratio) {
+        fg = stroke;
+        ratio = strokeRatio;
+      }
+    }
+    const large = isLargeText(c.fontSize, c.fontWeight);
+    measured.push({
+      selector: c.selector,
+      text: c.text,
+      fg,
+      fontSize: c.fontSize,
+      fontWeight: c.fontWeight,
+      bbox: c.bbox,
+      bg,
+      ratio: +ratio.toFixed(2),
+      wcagAA: large ? ratio >= 3 : ratio >= 4.5,
+      wcagAALarge: ratio >= 3,
+      wcagAAA: large ? ratio >= 4.5 : ratio >= 7,
+    });
+  }
+  return measured;
+}
+
+async function annotateFrame(pngBuf, elements) {
+  const { width, height } = await sharp(pngBuf).metadata();
+  // Draw boxes + ratio labels as an SVG overlay (sharp composite).
+  const svg = buildOverlaySVG(elements, width, height);
+  return await sharp(pngBuf)
+    .composite([{ input: Buffer.from(svg), top: 0, left: 0 }])
+    .png()
+    .toBuffer();
+}
+
+function sampleBboxMedian(raw, width, height, channels, bbox) {
+  // Sample the element's OWN box (glyphs are hidden in this frame), inset
+  // 1px on each side to dodge anti-aliased edge pixels, clamped to the
+  // frame bounds. A bounded grid, not a full scan, so a wide caption bar
+  // doesn't turn into thousands of samples.
+  const x0 = Math.max(0, Math.round(bbox.x) + 1);
+  const x1 = Math.min(width - 1, Math.round(bbox.x + bbox.w) - 1);
+  const y0 = Math.max(0, Math.round(bbox.y) + 1);
+  const y1 = Math.min(height - 1, Math.round(bbox.y + bbox.h) - 1);
+  if (x1 <= x0 || y1 <= y0) return null;
+
+  const stepX = Math.max(1, Math.floor((x1 - x0) / 12));
+  const stepY = Math.max(1, Math.floor((y1 - y0) / 6));
+  const r = [],
+    g = [],
+    b = [];
+  for (let y = y0; y <= y1; y += stepY) {
+    for (let x = x0; x <= x1; x += stepX) {
+      const i = (y * width + x) * channels;
+      r.push(raw[i]);
+      g.push(raw[i + 1]);
+      b.push(raw[i + 2]);
+    }
+  }
+  if (r.length === 0) return null;
+  return [median(r), median(g), median(b), 1];
+}
+
+function median(arr) {
+  const s = [...arr].sort((a, b) => a - b);
+  return s[Math.floor(s.length / 2)];
+}
+
+function compositeOver([fr, fg, fb, fa], [br, bg, bb]) {
+  return [
+    Math.round(fr * fa + br * (1 - fa)),
+    Math.round(fg * fa + bg * (1 - fa)),
+    Math.round(fb * fa + bb * (1 - fa)),
+    1,
+  ];
+}
+
+function relLum([r, g, b]) {
+  const ch = (v) => {
+    const s = v / 255;
+    return s <= 0.03928 ? s / 12.92 : ((s + 0.055) / 1.055) ** 2.4;
+  };
+  return 0.2126 * ch(r) + 0.7152 * ch(g) + 0.0722 * ch(b);
+}
+
+function wcagRatio(a, b) {
+  const la = relLum(a);
+  const lb = relLum(b);
+  const [L1, L2] = la > lb ? [la, lb] : [lb, la];
+  return (L1 + 0.05) / (L2 + 0.05);
+}
+
+function isLargeText(fontSize, fontWeight) {
+  return fontSize >= 24 || (fontSize >= 19 && fontWeight >= 700);
+}
+
+// ─── Overlay rendering ───────────────────────────────────────────────────────
+
+function buildOverlaySVG(elements, w, h) {
+  const rects = elements
+    .map((el) => {
+      const color = !el.wcagAA ? "#ff00aa" : !el.wcagAAA ? "#ffcc00" : "#00e08a";
+      const { x, y, w: bw, h: bh } = el.bbox;
+      return `
+        <rect x="${x}" y="${y}" width="${bw}" height="${bh}"
+              fill="none" stroke="${color}" stroke-width="3"/>
+        <rect x="${x}" y="${y - 18}" width="${48}" height="16" fill="${color}"/>
+        <text x="${x + 4}" y="${y - 5}" font-family="monospace" font-size="12" fill="#000">
+          ${el.ratio.toFixed(1)}:1
+        </text>`;
+    })
+    .join("");
+  return `<svg xmlns="http://www.w3.org/2000/svg" width="${w}" height="${h}">${rects}</svg>`;
+}
+
+async function writeOverlaySprite(frames, outPath) {
+  if (!frames.length) return;
+  const cols = Math.min(frames.length, 5);
+  const rows = Math.ceil(frames.length / cols);
+  const { width, height } = await sharp(frames[0].png).metadata();
+  const scale = 0.25;
+  const cellW = Math.round(width * scale);
+  const cellH = Math.round(height * scale);
+
+  const cells = await Promise.all(
+    frames.map(async (f) => ({
+      input: await sharp(f.png).resize(cellW, cellH).png().toBuffer(),
+      time: f.t,
+    })),
+  );
+
+  const composites = cells.map((c, i) => ({
+    input: c.input,
+    top: Math.floor(i / cols) * cellH,
+    left: (i % cols) * cellW,
+  }));
+
+  await sharp({
+    create: {
+      width: cols * cellW,
+      height: rows * cellH,
+      channels: 3,
+      background: { r: 16, g: 16, b: 20 },
+    },
+  })
+    .composite(composites)
+    .png()
+    .toFile(outPath);
+}
+
+// ─── Summary ────────────────────────────────────────────────────────────────
+
+function summarize(entries) {
+  const total = entries.length;
+  const failAA = entries.filter((e) => !e.wcagAA).length;
+  const passAAonly = entries.filter((e) => e.wcagAA && !e.wcagAAA).length;
+  const passAAA = entries.filter((e) => e.wcagAAA).length;
+  return { total, failAA, passAAonly, passAAA };
+}
+
+function printSummary({ summary, entries }) {
+  const { total, failAA, passAAonly, passAAA } = summary;
+  console.log(`\nContrast report: ${total} text-element samples`);
+  console.log(`  fail WCAG AA:     ${failAA}`);
+  console.log(`  pass AA, not AAA: ${passAAonly}`);
+  console.log(`  pass AAA:         ${passAAA}`);
+  if (failAA) {
+    console.log("\nFailures:");
+    for (const e of entries.filter((x) => !x.wcagAA)) {
+      console.log(`  t=${e.time}s  ${e.selector.padEnd(24)}  ${e.ratio.toFixed(2)}:1  "${e.text}"`);
+    }
+  }
+}
+
+// ─── Utilities ──────────────────────────────────────────────────────────────
+
+function parseArgs(argv) {
+  const out = {};
+  let positional = 0;
+  for (let i = 0; i < argv.length; i++) {
+    const a = argv[i];
+    if (a.startsWith("--")) {
+      const k = a.slice(2);
+      const v = argv[i + 1]?.startsWith("--") ? true : argv[++i];
+      out[k] = v;
+    } else if (positional === 0) {
+      out.composition = a;
+      positional++;
+    }
+  }
+  return out;
+}
+
+function die(msg) {
+  console.error(`contrast-report: ${msg}`);
+  process.exit(2);
+}
diff --git a/.claude/skills-media/hyperframes-creative/scripts/extract-audio-data.py b/.claude/skills-media/hyperframes-creative/scripts/extract-audio-data.py
new file mode 100644
index 000000000..b4efba788
--- /dev/null
+++ b/.claude/skills-media/hyperframes-creative/scripts/extract-audio-data.py
@@ -0,0 +1,188 @@
+#!/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
+
+# ---------------------------------------------------------------------------
+# 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:
+        print(f"ffmpeg error: {result.stderr.decode()}", 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") 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/hyperframes-creative/scripts/package-loader.mjs b/.claude/skills-media/hyperframes-creative/scripts/package-loader.mjs
new file mode 100644
index 000000000..b16bb6f99
--- /dev/null
+++ b/.claude/skills-media/hyperframes-creative/scripts/package-loader.mjs
@@ -0,0 +1,384 @@
+// package-loader — bootstrap optional helper packages only when missing, with
+// defense-in-depth so a malicious or typo'd dependency can't run on install:
+//   • specs are version-pinned (assertPinnedPackageSpecs) — no floating "latest"
+//   • install runs `npm install --ignore-scripts` — package lifecycle scripts
+//     never execute
+//   • `--no-save` into a throwaway tmp dir — the host project is left untouched
+//   • requires an interactive y/N (or an explicit $HYPERFRAMES_SKILL_BOOTSTRAP_DEPS=1)
+//   • npm is spawned with an argv array (no shell) — never a built command string
+// The `installLine` strings below are DISPLAY ONLY (shown in the prompt / error
+// text); they are never handed to a shell or executed.
+import { spawnSync } from "node:child_process";
+import { existsSync, mkdtempSync, readFileSync, rmSync, writeFileSync } from "node:fs";
+import { createRequire } from "node:module";
+import { tmpdir } from "node:os";
+import { basename, delimiter, dirname, join, parse, resolve } from "node:path";
+import { createInterface } from "node:readline/promises";
+import { fileURLToPath, pathToFileURL } from "node:url";
+
+const HERE = dirname(fileURLToPath(import.meta.url));
+const VERSION_OVERRIDE_ENV = "HYPERFRAMES_SKILL_PKG_VERSION";
+const BOOTSTRAP_ENV = "HYPERFRAMES_SKILL_DEPS_BOOTSTRAPPED";
+const BOOTSTRAP_CONFIRM_ENV = "HYPERFRAMES_SKILL_BOOTSTRAP_DEPS";
+const NODE_MODULES_ENV = "HYPERFRAMES_SKILL_NODE_MODULES";
+
+export async function importPackagesOrBootstrap(packageNames, options = {}) {
+  const entries = new Map();
+  const missing = [];
+
+  for (const packageName of packageNames) {
+    const entry = resolvePackageEntry(packageName);
+    if (entry) entries.set(packageName, entry);
+    else missing.push(packageName);
+  }
+
+  if (missing.length > 0 && !process.env[BOOTSTRAP_ENV]) {
+    const npmPackages = options.npmPackages ?? missing;
+    assertPinnedPackageSpecs(npmPackages);
+    await confirmBootstrap(npmPackages);
+    bootstrapWithNpmInstall(npmPackages);
+  }
+
+  if (missing.length > 0) {
+    throw new Error(
+      [
+        `Could not resolve required package(s): ${missing.join(", ")}`,
+        "Install them in this project, for example:",
+        `  npm install --save-dev ${packageNames.map(shellQuote).join(" ")}`,
+      ].join("\n"),
+    );
+  }
+
+  const modules = {};
+  for (const [packageName, entry] of entries) {
+    modules[packageName] = await import(pathToFileURL(entry).href);
+  }
+  return modules;
+}
+
+export async function bundleCompositionForCapture(compiler, projectDir) {
+  const compiledDir = mkdtempSync(join(tmpdir(), "hyperframes-skill-bundle-"));
+  try {
+    const html = await compiler.bundleToSingleHtml(projectDir);
+    writeFileSync(join(compiledDir, "index.html"), html);
+    return {
+      compiledDir,
+      cleanup() {
+        rmSync(compiledDir, { recursive: true, force: true });
+      },
+    };
+  } catch (error) {
+    rmSync(compiledDir, { recursive: true, force: true });
+    throw error;
+  }
+}
+
+// ── Transient-init retry ─────────────────────────────────────────────────────
+// Frozen snapshot of the engine's TRANSIENT_BROWSER_ERROR_PATTERNS (see
+// packages/engine frameCapture.ts), used only when the imported
+// @hyperframes/producer predates the isTransientBrowserError re-export. The
+// last pattern is the load-bearing one for modular projects: sub-composition
+// timelines register asynchronously, so a first init attempt can time out as
+// "zero duration / Runtime ready: false" on a valid project.
+const FALLBACK_TRANSIENT_PATTERNS = [
+  /Navigating frame was detached/i,
+  /Target closed/i,
+  /Session closed/i,
+  /browser has disconnected/i,
+  /Page crashed/i,
+  /Execution context was destroyed/i,
+  /Cannot find context with specified id/i,
+  /Failed to launch the browser process/i,
+  /Navigation timeout of \d+ ms exceeded/i,
+  /ECONNREFUSED/i,
+  /net::ERR_NETWORK_CHANGED/i,
+  /Composition has zero duration[\s\S]*Runtime ready: false/,
+];
+
+/**
+ * Create + initialize a capture session with the canonical transient-init
+ * retry/cleanup the render pipeline uses (see probeStage in
+ * @hyperframes/producer): on a transient failure, close the crashed session
+ * and retry ONCE with a fresh browser. Without this, a standalone helper
+ * false-fails valid modular projects whose sub-composition timelines land a
+ * beat after the first readiness deadline ("zero duration" with
+ * "Runtime ready: false").
+ *
+ * `producer` is the imported @hyperframes/producer namespace;
+ * `createSession` is a factory returning a fresh (uninitialized) session.
+ * Non-transient init failures (e.g. the "Runtime ready: true" zero-duration
+ * fast-fail — a genuine authoring bug) still throw on the first attempt.
+ */
+export async function initializeSessionWithRetry(producer, createSession, options = {}) {
+  const maxAttempts = options.maxAttempts ?? 2;
+  const log = options.log ?? ((message) => console.error(message));
+  const isTransient =
+    typeof producer.isTransientBrowserError === "function"
+      ? producer.isTransientBrowserError
+      : (err) => {
+          const message = err instanceof Error ? err.message : String(err);
+          return FALLBACK_TRANSIENT_PATTERNS.some((pattern) => pattern.test(message));
+        };
+
+  for (let attempt = 1; ; attempt++) {
+    const session = await createSession();
+    try {
+      await producer.initializeSession(session);
+      return session;
+    } catch (error) {
+      await producer.closeCaptureSession(session).catch(() => {});
+      if (attempt >= maxAttempts || !isTransient(error)) throw error;
+      log(
+        `transient browser-init failure (attempt ${attempt}/${maxAttempts}): ${
+          error instanceof Error ? error.message : String(error)
+        }`,
+      );
+      log("retrying with a fresh browser session...");
+    }
+  }
+}
+
+export function hyperframesPackageSpec(packageName) {
+  const override = process.env[VERSION_OVERRIDE_ENV]?.trim();
+  if (override) return `${packageName}@${override}`;
+
+  const version = readBundledHyperframesVersion();
+  if (version) return `${packageName}@${version}`;
+
+  // Global skill installs (e.g. ~/.claude/skills) have no hyperframes package.json
+  // in their ancestor chain, so the bundled version is unknowable. Fall back to
+  // @latest instead of throwing: already-installed packages still import, and a
+  // bootstrap install can still proceed (@latest satisfies the pinned-spec guard).
+  process.stderr.write(
+    [
+      `hyperframes: could not determine the bundled version for ${packageName}; using @latest.`,
+      `Set ${VERSION_OVERRIDE_ENV}=<version> to pin it.`,
+      "",
+    ].join("\n"),
+  );
+  return `${packageName}@latest`;
+}
+
+function resolvePackageEntry(packageName) {
+  const bases = [process.cwd(), HERE, ...envNodeModulesDirs(), ...nodeModulesDirsFromPath()];
+  const { rootName, subpath } = splitPackageSpecifier(packageName);
+
+  const seen = new Set();
+  for (const base of bases) {
+    const normalized = resolve(base);
+    if (seen.has(normalized)) continue;
+    seen.add(normalized);
+
+    try {
+      return createRequire(join(normalized, "__hyperframes_skill_loader__.cjs")).resolve(
+        packageName,
+      );
+    } catch {
+      const packageDir = findPackageDir(normalized, rootName);
+      const packageEntry = packageDir ? readPackageEntry(packageDir, subpath) : null;
+      if (packageEntry) return packageEntry;
+    }
+  }
+
+  return null;
+}
+
+function splitPackageSpecifier(packageName) {
+  const segments = packageName.split("/");
+  const rootLength = packageName.startsWith("@") ? 2 : 1;
+  return {
+    rootName: segments.slice(0, rootLength).join("/"),
+    subpath: segments.slice(rootLength).join("/"),
+  };
+}
+
+function readBundledHyperframesVersion() {
+  for (const ancestor of ancestors(HERE)) {
+    const directVersion = readPackageVersion(join(ancestor, "package.json"));
+    if (directVersion) return directVersion;
+
+    const monorepoCliVersion = readPackageVersion(
+      join(ancestor, "packages", "cli", "package.json"),
+    );
+    if (monorepoCliVersion) return monorepoCliVersion;
+  }
+  return null;
+}
+
+function readPackageVersion(packageJsonPath) {
+  try {
+    const manifest = JSON.parse(readFileSync(packageJsonPath, "utf8"));
+    if (manifest.name === "hyperframes" || manifest.name === "@hyperframes/cli") {
+      return typeof manifest.version === "string" ? manifest.version : null;
+    }
+  } catch {
+    // Keep searching ancestor package manifests.
+  }
+  return null;
+}
+
+function envNodeModulesDirs() {
+  return (process.env[NODE_MODULES_ENV] ?? "").split(delimiter).filter(Boolean);
+}
+
+function nodeModulesDirsFromPath() {
+  const dirs = [];
+  for (const entry of (process.env.PATH ?? "").split(delimiter)) {
+    if (!entry.endsWith(`${join("node_modules", ".bin")}`)) continue;
+    dirs.push(dirname(entry));
+  }
+  return dirs;
+}
+
+function findPackageDir(base, packageName) {
+  const packageSegments = packageName.split("/");
+  const roots =
+    basename(base) === "node_modules"
+      ? [base]
+      : ancestors(base).map((ancestor) => join(ancestor, "node_modules"));
+
+  for (const root of roots) {
+    const packageDir = join(root, ...packageSegments);
+    if (existsSync(join(packageDir, "package.json"))) return packageDir;
+  }
+  return null;
+}
+
+function readPackageEntry(packageDir, subpath = "") {
+  try {
+    const manifest = JSON.parse(readFileSync(join(packageDir, "package.json"), "utf8"));
+    const requestedExport = subpath ? manifest.exports?.[`./${subpath}`] : manifest.exports;
+    const entry =
+      exportEntry(requestedExport) ??
+      (!subpath ? (manifest.module ?? manifest.main ?? "index.js") : null);
+    if (!entry) return null;
+    const entryPath = join(packageDir, entry);
+    return existsSync(entryPath) ? entryPath : null;
+  } catch {
+    return null;
+  }
+}
+
+function exportEntry(exports) {
+  const root =
+    typeof exports === "object" && exports !== null ? (exports["."] ?? exports) : exports;
+  if (typeof root === "string") return root;
+  if (typeof root !== "object" || root === null) return null;
+  if (typeof root.import === "string") return root.import;
+  if (typeof root.default === "string") return root.default;
+  if (typeof root.node === "string") return root.node;
+  if (typeof root.node === "object" && root.node !== null) {
+    return root.node.import ?? root.node.default ?? null;
+  }
+  return null;
+}
+
+function assertPinnedPackageSpecs(packageSpecs) {
+  const unpinned = packageSpecs.filter((spec) => !hasVersionSpec(spec));
+  if (unpinned.length === 0) return;
+  throw new Error(
+    [
+      `Refusing to bootstrap unpinned package spec(s): ${unpinned.join(", ")}`,
+      "Pass pinned npm package specs, for example:",
+      `  ${packageSpecs.map((spec) => (hasVersionSpec(spec) ? spec : `${spec}@<version>`)).join(" ")}`,
+    ].join("\n"),
+  );
+}
+
+function hasVersionSpec(packageSpec) {
+  if (packageSpec.startsWith("@")) {
+    const slash = packageSpec.indexOf("/");
+    return slash !== -1 && packageSpec.indexOf("@", slash + 1) !== -1;
+  }
+  return packageSpec.includes("@");
+}
+
+async function confirmBootstrap(packageSpecs) {
+  if (process.env[BOOTSTRAP_CONFIRM_ENV] === "1") return;
+
+  const installLine = `npm install --ignore-scripts --no-save ${packageSpecs.map(shellQuote).join(" ")}`;
+  if (!process.stdin.isTTY) {
+    throw new Error(
+      [
+        "Required helper package(s) are missing.",
+        "To allow a one-time temporary dependency bootstrap for this run, set:",
+        `  ${BOOTSTRAP_CONFIRM_ENV}=1`,
+        "The bootstrap command will be:",
+        `  ${installLine}`,
+      ].join("\n"),
+    );
+  }
+
+  const rl = createInterface({ input: process.stdin, output: process.stderr });
+  try {
+    const answer = await rl.question(
+      [
+        "HyperFrames helper package(s) are missing.",
+        `Run a temporary install with lifecycle scripts disabled?`,
+        `  ${installLine}`,
+        "Proceed? [y/N] ",
+      ].join("\n"),
+    );
+    if (!/^(y|yes)$/i.test(answer.trim())) {
+      throw new Error("Dependency bootstrap cancelled.");
+    }
+  } finally {
+    rl.close();
+  }
+}
+
+function ancestors(start) {
+  const dirs = [];
+  let current = resolve(start);
+  const root = parse(current).root;
+  while (current && current !== root) {
+    dirs.push(current);
+    current = dirname(current);
+  }
+  dirs.push(root);
+  return dirs;
+}
+
+function bootstrapWithNpmInstall(packageNames) {
+  const installRoot = mkdtempSync(join(tmpdir(), "hyperframes-skill-deps-"));
+  const installResult = spawnSync(
+    process.platform === "win32" ? "npm.cmd" : "npm",
+    [
+      "install",
+      "--silent",
+      "--no-audit",
+      "--no-fund",
+      "--ignore-scripts",
+      "--no-save",
+      "--prefix",
+      installRoot,
+      ...packageNames,
+    ],
+    { stdio: "inherit" },
+  );
+
+  if (installResult.error) throw installResult.error;
+  if (installResult.status !== 0) {
+    rmSync(installRoot, { recursive: true, force: true });
+    process.exit(installResult.status ?? 1);
+  }
+
+  const args = [...process.argv.slice(1)];
+  const result = spawnSync(process.execPath, args, {
+    stdio: "inherit",
+    env: {
+      ...process.env,
+      [BOOTSTRAP_ENV]: "1",
+      [NODE_MODULES_ENV]: join(installRoot, "node_modules"),
+    },
+  });
+
+  rmSync(installRoot, { recursive: true, force: true });
+  if (result.error) throw result.error;
+  process.exit(result.status ?? 1);
+}
+
+function shellQuote(value) {
+  if (/^[A-Za-z0-9_./:@=-]+$/.test(value)) return value;
+  return `'${value.replace(/'/g, "'\\''")}'`;
+}
diff --git a/.claude/skills-media/hyperframes-creative/scripts/package-loader.test.mjs b/.claude/skills-media/hyperframes-creative/scripts/package-loader.test.mjs
new file mode 100644
index 000000000..7b36a3ceb
--- /dev/null
+++ b/.claude/skills-media/hyperframes-creative/scripts/package-loader.test.mjs
@@ -0,0 +1,62 @@
+import { test } from "node:test";
+import assert from "node:assert/strict";
+import { spawnSync } from "node:child_process";
+import { copyFileSync, mkdtempSync, rmSync, writeFileSync } from "node:fs";
+import { dirname, join } from "node:path";
+import { tmpdir } from "node:os";
+import { fileURLToPath } from "node:url";
+
+const HERE = dirname(fileURLToPath(import.meta.url));
+const ENV = "HYPERFRAMES_SKILL_PKG_VERSION";
+
+// (a) env override wins — no ancestor lookup, exact version echoed back.
+test("hyperframesPackageSpec: env override wins", async () => {
+  const prev = process.env[ENV];
+  process.env[ENV] = "9.9.9";
+  try {
+    const { hyperframesPackageSpec } = await import("./package-loader.mjs");
+    assert.equal(hyperframesPackageSpec("@hyperframes/producer"), "@hyperframes/producer@9.9.9");
+  } finally {
+    if (prev === undefined) delete process.env[ENV];
+    else process.env[ENV] = prev;
+  }
+});
+
+// (b) resolvable version (in-repo) pins the bundled hyperframes/@hyperframes/cli version.
+test("hyperframesPackageSpec: resolvable in-repo version pins it", async () => {
+  const prev = process.env[ENV];
+  delete process.env[ENV];
+  try {
+    const { hyperframesPackageSpec } = await import("./package-loader.mjs");
+    const spec = hyperframesPackageSpec("@hyperframes/producer");
+    assert.match(spec, /^@hyperframes\/producer@\d+\.\d+\.\d+/);
+  } finally {
+    if (prev !== undefined) process.env[ENV] = prev;
+  }
+});
+
+// (c) unresolvable + no override -> @latest fallback, no throw (global-install case).
+// Copy the loader into an isolated temp dir whose ancestor chain has no hyperframes
+// package.json, and run node from there so cwd cannot resolve one either.
+test("hyperframesPackageSpec: unresolvable falls back to @latest without throwing", () => {
+  const dir = mkdtempSync(join(tmpdir(), "hf-pkgloader-"));
+  try {
+    copyFileSync(join(HERE, "package-loader.mjs"), join(dir, "package-loader.mjs"));
+    const probe = join(dir, "probe.mjs");
+    writeFileSync(
+      probe,
+      [
+        'import { hyperframesPackageSpec } from "./package-loader.mjs";',
+        'process.stdout.write(hyperframesPackageSpec("@hyperframes/producer"));',
+        "",
+      ].join("\n"),
+    );
+    const res = spawnSync(process.execPath, [probe], { cwd: dir, encoding: "utf8" });
+    assert.equal(res.status, 0, res.stderr);
+    assert.equal(res.stdout.trim(), "@hyperframes/producer@latest");
+    assert.match(res.stderr, /using @latest/);
+    assert.match(res.stderr, new RegExp(ENV));
+  } finally {
+    rmSync(dir, { recursive: true, force: true });
+  }
+});
diff --git a/.claude/skills-media/hyperframes-creative/templates/design-picker.html b/.claude/skills-media/hyperframes-creative/templates/design-picker.html
new file mode 100644
index 000000000..6cb6f0878
--- /dev/null
+++ b/.claude/skills-media/hyperframes-creative/templates/design-picker.html
@@ -0,0 +1,1432 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>Design your visual direction</title>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      body {
+        font-family:
+          system-ui,
+          -apple-system,
+          sans-serif;
+        background: #0e0e0e;
+        color: #eee;
+        height: 100vh;
+        overflow: hidden;
+        display: flex;
+        flex-direction: column;
+        font-size: 13px;
+        line-height: 1.4;
+        -webkit-font-smoothing: antialiased;
+      }
+
+      /* ── Phase bar ── */
+      .phase-bar {
+        display: flex;
+        border-bottom: 1px solid #1a1a1a;
+        padding: 0 20px;
+        flex-shrink: 0;
+        background: #111;
+      }
+      .phase-tab {
+        padding: 12px 16px;
+        font-size: 12px;
+        font-weight: 600;
+        color: #555;
+        cursor: pointer;
+        border-bottom: 2px solid transparent;
+        transition: all 0.15s;
+        letter-spacing: 0.02em;
+      }
+      .phase-tab.active {
+        color: #fff;
+        border-bottom-color: #fff;
+      }
+      .phase-tab.disabled {
+        opacity: 0.25;
+        pointer-events: none;
+      }
+
+      /* ── Phases ── */
+      .phase {
+        display: none;
+        flex: 1;
+        overflow: hidden;
+      }
+      .phase.active {
+        display: flex;
+      }
+
+      /* ── Phase 1: Mood boards ── */
+      .mood-grid {
+        display: grid;
+        grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
+        gap: 16px;
+        padding: 20px;
+        overflow-y: auto;
+        flex: 1;
+        align-content: start;
+      }
+      .mood-card {
+        border: 1px solid #1e1e1e;
+        border-radius: 12px;
+        overflow: hidden;
+        cursor: pointer;
+        transition:
+          border-color 0.15s,
+          transform 0.15s,
+          box-shadow 0.15s;
+        background: #141414;
+        display: flex;
+        flex-direction: column;
+      }
+      .mood-card:hover {
+        border-color: #333;
+        transform: translateY(-1px);
+        box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3);
+      }
+      .mood-card.selected {
+        border-color: #fff;
+      }
+      .mood-preview {
+        height: 500px;
+        overflow: hidden;
+        position: relative;
+        background: #0a0a0a;
+      }
+      .mood-preview > div {
+        transform-origin: top left;
+      }
+      .mood-info {
+        padding: 14px 16px;
+      }
+      .mood-name {
+        font-size: 14px;
+        font-weight: 600;
+        margin-bottom: 3px;
+      }
+      .mood-desc {
+        font-size: 11px;
+        color: #666;
+        line-height: 1.4;
+        display: -webkit-box;
+        -webkit-line-clamp: 2;
+        -webkit-box-orient: vertical;
+        overflow: hidden;
+      }
+      .mood-tokens {
+        display: flex;
+        gap: 4px;
+        margin-top: 8px;
+        flex-wrap: wrap;
+      }
+      .mood-token {
+        font-size: 9px;
+        color: #555;
+        background: #1a1a1a;
+        padding: 2px 7px;
+        border-radius: 3px;
+        letter-spacing: 0.02em;
+      }
+
+      .mood-header {
+        padding: 20px 20px 0;
+        flex-shrink: 0;
+      }
+      .mood-header h2 {
+        font-size: 16px;
+        font-weight: 600;
+        margin-bottom: 2px;
+      }
+      .mood-header p {
+        font-size: 12px;
+        color: #555;
+      }
+      .mood-next {
+        padding: 12px 20px;
+        flex-shrink: 0;
+        display: flex;
+        justify-content: flex-end;
+      }
+      .mood-next-btn {
+        background: #fff;
+        color: #000;
+        border: none;
+        padding: 10px 24px;
+        border-radius: 8px;
+        font-size: 13px;
+        font-weight: 600;
+        cursor: pointer;
+        opacity: 0;
+        transform: translateY(8px);
+        transition: all 0.2s;
+      }
+      .mood-next-btn.visible {
+        opacity: 1;
+        transform: translateY(0);
+      }
+      .mood-next-btn:hover {
+        background: #ddd;
+      }
+
+      /* ── Phase 2: Fine-tune ── */
+      .panel-left {
+        width: 400px;
+        min-width: 400px;
+        height: 100%;
+        overflow-y: auto;
+        border-right: 1px solid #1a1a1a;
+        padding: 0 0 100px;
+        background: #111;
+      }
+      .panel-right {
+        flex: 1;
+        height: 100%;
+        overflow-y: auto;
+        overflow-x: hidden;
+        background: #0e0e0e;
+      }
+      .panel-right * {
+        max-width: 100%;
+        box-sizing: border-box;
+      }
+
+      /* ── Section cards (Neuform-inspired) ── */
+      .section-card {
+        border-bottom: 1px solid #1a1a1a;
+      }
+      .section-header {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        padding: 14px 16px 6px;
+      }
+      .section-icon {
+        width: 22px;
+        height: 22px;
+        border-radius: 5px;
+        background: rgba(255, 255, 255, 0.04);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        color: #555;
+        font-size: 11px;
+        flex-shrink: 0;
+      }
+      .section-title {
+        font-size: 11px;
+        font-weight: 600;
+        color: #fff;
+        letter-spacing: 0.01em;
+      }
+      .section-meta {
+        font-size: 10px;
+        color: #444;
+        margin-left: auto;
+      }
+      .section-body {
+        padding: 6px 16px 16px;
+      }
+
+      /* ── Option cards ── */
+      .opt {
+        border: 1px solid #1e1e1e;
+        border-radius: 10px;
+        margin-bottom: 6px;
+        cursor: pointer;
+        transition: border-color 0.12s;
+        overflow: hidden;
+        background: #141414;
+        position: relative;
+      }
+      .opt:hover {
+        border-color: #333;
+      }
+      .opt.selected {
+        border-color: #fff;
+      }
+      .opt-inner {
+        padding: 12px 14px;
+      }
+      .opt-name {
+        font-size: 12px;
+        font-weight: 600;
+        margin-bottom: 2px;
+      }
+      .opt-desc {
+        font-size: 10px;
+        color: #666;
+        line-height: 1.4;
+      }
+      .opt-tag {
+        font-size: 9px;
+        color: #444;
+        margin-top: 4px;
+        text-transform: uppercase;
+        letter-spacing: 0.04em;
+      }
+      .opt-rec {
+        position: absolute;
+        top: 8px;
+        right: 10px;
+        font-size: 8px;
+        font-weight: 700;
+        color: #4ade80;
+        background: rgba(74, 222, 128, 0.08);
+        padding: 2px 6px;
+        border-radius: 3px;
+        text-transform: uppercase;
+        letter-spacing: 0.04em;
+      }
+
+      /* ── Palette option ── */
+      .pal-strip {
+        display: flex;
+        height: 28px;
+        border-radius: 6px;
+        overflow: hidden;
+        margin-bottom: 8px;
+      }
+      .pal-strip > div {
+        flex: 1;
+      }
+      .pal-ramp {
+        display: flex;
+        gap: 2px;
+        margin-top: 4px;
+      }
+      .pal-ramp-swatch {
+        width: 100%;
+        height: 6px;
+        border-radius: 2px;
+      }
+
+      /* ── Type option (specimen) ── */
+      .type-specimen {
+        padding: 14px;
+        border-bottom: 1px solid #1a1a1a;
+      }
+      .type-headline {
+        line-height: 1.1;
+        letter-spacing: -0.02em;
+        margin-bottom: 6px;
+      }
+      .type-body {
+        line-height: 1.5;
+        color: #666;
+        font-size: 11px;
+      }
+      .type-meta {
+        padding: 10px 14px;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+      }
+      .type-families {
+        font-size: 9px;
+        color: #444;
+        letter-spacing: 0.02em;
+      }
+      .type-letters {
+        font-size: 9px;
+        color: #333;
+        letter-spacing: 0.08em;
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        max-width: 200px;
+      }
+
+      /* ── Chip options ── */
+      .chips {
+        display: flex;
+        gap: 6px;
+        flex-wrap: wrap;
+      }
+      .chip {
+        border: 1px solid #1e1e1e;
+        border-radius: 8px;
+        padding: 8px 12px;
+        cursor: pointer;
+        transition: border-color 0.12s;
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        background: #141414;
+      }
+      .chip:hover {
+        border-color: #333;
+      }
+      .chip.selected {
+        border-color: #fff;
+      }
+      .chip-label {
+        font-size: 11px;
+        font-weight: 500;
+      }
+      .chip-sub {
+        font-size: 9px;
+        color: #555;
+      }
+      .chip-preview {
+        flex-shrink: 0;
+      }
+
+      .theme-chip {
+        flex: 1;
+        min-width: 90px;
+        flex-direction: column;
+        align-items: center;
+        padding: 10px 12px;
+        text-align: center;
+      }
+      .theme-swatch {
+        width: 100%;
+        height: 28px;
+        border-radius: 4px;
+        margin-bottom: 4px;
+        border: 1px solid rgba(255, 255, 255, 0.06);
+      }
+      .corner-box {
+        width: 22px;
+        height: 22px;
+        border: 2px solid #666;
+      }
+      .density-bars {
+        display: flex;
+        flex-direction: column;
+        width: 24px;
+      }
+      .density-bar {
+        background: #666;
+        height: 3px;
+        border-radius: 1px;
+      }
+      .depth-square {
+        width: 22px;
+        height: 22px;
+        background: #2a2a2a;
+        border-radius: 3px;
+      }
+
+      /* ── Easing option ── */
+      .ease-opt {
+        border: 1px solid #1e1e1e;
+        border-radius: 10px;
+        margin-bottom: 6px;
+        cursor: pointer;
+        transition: border-color 0.12s;
+        overflow: hidden;
+        background: #141414;
+        padding: 10px 14px;
+      }
+      .ease-opt:hover {
+        border-color: #333;
+      }
+      .ease-opt.selected {
+        border-color: #fff;
+      }
+      .ease-track {
+        position: relative;
+        height: 8px;
+        background: #1a1a1a;
+        border-radius: 4px;
+        margin-bottom: 8px;
+        overflow: visible;
+      }
+      .ease-dot {
+        position: absolute;
+        top: 50%;
+        transform: translateY(-50%);
+        left: 0;
+        width: 12px;
+        height: 12px;
+        border-radius: 50%;
+        background: #fff;
+      }
+      .ease-label {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+      }
+      .ease-name {
+        font-size: 11px;
+        font-weight: 600;
+      }
+      .ease-value {
+        font-size: 9px;
+        color: #444;
+        font-family: "SF Mono", Consolas, monospace;
+        letter-spacing: 0.02em;
+      }
+
+      .preview-empty {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        height: 100%;
+        color: #2a2a2a;
+        font-size: 13px;
+      }
+
+      /* ── FAB + Overlay ── */
+      .fab {
+        position: fixed;
+        bottom: 20px;
+        right: 32px;
+        transform: translateY(60px);
+        opacity: 0;
+        background: #fff;
+        color: #000;
+        border: none;
+        padding: 12px 24px;
+        border-radius: 10px;
+        font-size: 13px;
+        font-weight: 600;
+        cursor: pointer;
+        box-shadow: 0 4px 24px rgba(0, 0, 0, 0.5);
+        transition:
+          transform 0.25s ease,
+          opacity 0.25s ease;
+        z-index: 100;
+      }
+      .fab.visible {
+        transform: translateY(0);
+        opacity: 1;
+      }
+      .fab:hover {
+        background: #ddd;
+      }
+
+      .md-overlay {
+        position: fixed;
+        inset: 0;
+        background: rgba(0, 0, 0, 0.85);
+        backdrop-filter: blur(8px);
+        z-index: 200;
+        display: none;
+        align-items: center;
+        justify-content: center;
+      }
+      .md-overlay.visible {
+        display: flex;
+      }
+      .md-card {
+        background: #161616;
+        border: 1px solid #2a2a2a;
+        border-radius: 14px;
+        max-width: 600px;
+        width: 90%;
+        max-height: 80vh;
+        display: flex;
+        flex-direction: column;
+      }
+      .md-header {
+        padding: 16px 20px;
+        border-bottom: 1px solid #1e1e1e;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+      }
+      .md-title {
+        font-size: 14px;
+        font-weight: 600;
+      }
+      .md-actions {
+        display: flex;
+        gap: 6px;
+      }
+      .copy-btn {
+        background: #fff;
+        color: #000;
+        border: none;
+        padding: 7px 16px;
+        border-radius: 6px;
+        font-size: 12px;
+        font-weight: 600;
+        cursor: pointer;
+      }
+      .copy-btn:hover {
+        background: #ddd;
+      }
+      .close-btn {
+        background: transparent;
+        color: #666;
+        border: 1px solid #2a2a2a;
+        padding: 7px 14px;
+        border-radius: 6px;
+        font-size: 12px;
+        cursor: pointer;
+      }
+      .close-btn:hover {
+        color: #fff;
+        border-color: #444;
+      }
+      .md-body {
+        padding: 20px;
+        overflow-y: auto;
+        flex: 1;
+      }
+      .md-editor {
+        font-family: "SF Mono", Consolas, monospace;
+        font-size: 12px;
+        line-height: 1.6;
+        color: #aaa;
+        background: transparent;
+        border: none;
+        width: 100%;
+        min-height: 360px;
+        resize: vertical;
+        outline: none;
+        white-space: pre-wrap;
+      }
+
+      /* ── Phase 1 palette bar ── */
+      .pal-bar {
+        display: flex;
+        gap: 8px;
+        padding: 12px 20px 0;
+        flex-shrink: 0;
+        flex-wrap: wrap;
+        align-items: center;
+      }
+      .pal-bar-label {
+        font-size: 10px;
+        color: #444;
+        letter-spacing: 0.03em;
+        text-transform: uppercase;
+        margin-right: 4px;
+      }
+      .pal-bar-chip {
+        display: flex;
+        align-items: center;
+        gap: 6px;
+        padding: 5px 10px;
+        border: 1px solid #1e1e1e;
+        border-radius: 6px;
+        cursor: pointer;
+        transition: border-color 0.12s;
+        background: #141414;
+      }
+      .pal-bar-chip:hover {
+        border-color: #333;
+      }
+      .pal-bar-chip.active {
+        border-color: #fff;
+      }
+      .pal-bar-chip-swatches {
+        display: flex;
+        gap: 2px;
+      }
+      .pal-bar-chip-swatch {
+        width: 14px;
+        height: 14px;
+        border-radius: 3px;
+      }
+      .pal-bar-chip-name {
+        font-size: 10px;
+        font-weight: 500;
+        color: #888;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="phase-bar">
+      <div class="phase-tab active" id="tab-mood" onclick="showPhase('mood')">1. Direction</div>
+      <div class="phase-tab disabled" id="tab-tune" onclick="showPhase('tune')">2. Fine-tune</div>
+    </div>
+
+    <!-- Phase 1: Mood boards -->
+    <div class="phase active" id="phase-mood" style="flex-direction: column">
+      <div class="mood-header">
+        <h2 id="mood-title">Pick a direction</h2>
+        <p id="mood-subtitle">
+          Each option is a complete visual identity. Pick one, then fine-tune.
+        </p>
+      </div>
+      <div class="pal-bar" id="pal-bar"><span class="pal-bar-label">Palette</span></div>
+      <div class="mood-grid" id="mood-grid"></div>
+      <div class="mood-next">
+        <button class="mood-next-btn" id="mood-next-btn" onclick="goToTune()">
+          Customize this direction →
+        </button>
+      </div>
+    </div>
+
+    <!-- Phase 2: Fine-tune -->
+    <div class="phase" id="phase-tune" style="flex-direction: row">
+      <div class="panel-left">
+        <!-- Theme -->
+        <div class="section-card">
+          <div class="section-header">
+            <div class="section-icon">◐</div>
+            <div class="section-title">Theme</div>
+          </div>
+          <div class="section-body"><div class="chips" id="theme-options"></div></div>
+        </div>
+        <!-- Structure -->
+        <div class="section-card">
+          <div class="section-header">
+            <div class="section-icon">▦</div>
+            <div class="section-title">Structure</div>
+            <div class="section-meta" id="arch-meta"></div>
+          </div>
+          <div class="section-body" id="arch-options"></div>
+        </div>
+        <!-- Palette -->
+        <div class="section-card">
+          <div class="section-header">
+            <div class="section-icon">◉</div>
+            <div class="section-title">Color</div>
+          </div>
+          <div class="section-body" id="pal-options"></div>
+        </div>
+        <!-- Typography -->
+        <div class="section-card">
+          <div class="section-header">
+            <div class="section-icon">Aa</div>
+            <div class="section-title">Typography</div>
+          </div>
+          <div class="section-body" id="type-options"></div>
+        </div>
+        <!-- Corners -->
+        <div class="section-card">
+          <div class="section-header">
+            <div class="section-icon">⬔</div>
+            <div class="section-title">Corners</div>
+          </div>
+          <div class="section-body"><div class="chips" id="corner-options"></div></div>
+        </div>
+        <!-- Density -->
+        <div class="section-card">
+          <div class="section-header">
+            <div class="section-icon">≡</div>
+            <div class="section-title">Density</div>
+          </div>
+          <div class="section-body"><div class="chips" id="density-options"></div></div>
+        </div>
+        <!-- Depth -->
+        <div class="section-card">
+          <div class="section-header">
+            <div class="section-icon">◧</div>
+            <div class="section-title">Depth</div>
+          </div>
+          <div class="section-body"><div class="chips" id="depth-options"></div></div>
+        </div>
+        <!-- Motion / Easing -->
+        <div class="section-card">
+          <div class="section-header">
+            <div class="section-icon">⟿</div>
+            <div class="section-title">Motion</div>
+            <div class="section-meta">entry easing</div>
+          </div>
+          <div class="section-body" id="ease-options"></div>
+        </div>
+      </div>
+      <div class="panel-right" id="preview">
+        <div class="preview-empty">Pick a structure to preview</div>
+      </div>
+    </div>
+
+    <button class="fab" id="fab" onclick="showOutput()">Create design.md</button>
+
+    <div class="md-overlay" id="md-overlay">
+      <div class="md-card">
+        <div class="md-header">
+          <div class="md-title">
+            design.md
+            <span style="font-size: 11px; font-weight: 400; color: #555">— edit, then copy</span>
+          </div>
+          <div class="md-actions">
+            <button class="copy-btn" id="copy-btn">Copy</button>
+            <button
+              class="close-btn"
+              onclick="document.getElementById('md-overlay').classList.remove('visible')"
+            >
+              Close
+            </button>
+          </div>
+        </div>
+        <div class="md-body">
+          <textarea class="md-editor" id="md-output" spellcheck="false"></textarea>
+        </div>
+      </div>
+    </div>
+
+    <script>
+      var ARCHITECTURES = __ARCHITECTURES_JSON__;
+      var PALETTES = __PALETTES_JSON__;
+      var TYPEPAIRS = __TYPEPAIRS_JSON__;
+      var MOODBOARDS = __MOODBOARDS_JSON__;
+      var PROMPT = __PROMPT_JSON__;
+      var picks = {
+        theme: null,
+        arch: null,
+        palette: null,
+        type: null,
+        corners: null,
+        density: null,
+        depth: null,
+        easing: null,
+      };
+
+      var EASINGS = [
+        { name: "Confident", value: "power3.out", desc: "Fast start, smooth deceleration" },
+        { name: "Snappy", value: "expo.out", desc: "Very fast start, crisp stop" },
+        { name: "Gentle", value: "sine.inOut", desc: "Soft acceleration and deceleration" },
+        { name: "Bouncy", value: "back.out(1.4)", desc: "Overshoots then settles" },
+        { name: "Elastic", value: "elastic.out(1, 0.5)", desc: "Springs past target and wobbles" },
+        { name: "Sharp", value: "power4.out", desc: "Aggressive start, hard stop" },
+      ];
+
+      var THEMES = [
+        { name: "Dark", id: "dark", bg: "#0e0e0e", fg: "#eee", desc: "Light on dark" },
+        { name: "Light", id: "light", bg: "#f5f3ef", fg: "#1a1a1a", desc: "Dark on light" },
+        { name: "Palette", id: "palette", bg: null, fg: null, desc: "Use palette colors" },
+      ];
+      var CORNERS = [
+        { name: "Sharp", value: "0px" },
+        { name: "Slight", value: "4px" },
+        { name: "Rounded", value: "12px" },
+      ];
+      var DENSITIES = [
+        { name: "Tight", padding: "8-12px", gap: "8-12px", desc: "Compact" },
+        { name: "Normal", padding: "16-24px", gap: "16-20px", desc: "Balanced" },
+        { name: "Generous", padding: "32-48px", gap: "28-40px", desc: "Spacious" },
+      ];
+      var DEPTHS = [
+        { name: "Flat", desc: "No shadows" },
+        { name: "Subtle", desc: "Faint shadows" },
+        { name: "Layered", desc: "Glows + depth" },
+      ];
+
+      // Load fonts
+      var fams = [];
+      TYPEPAIRS.forEach(function (tp) {
+        fams.push(tp.headline.family.replace(/ /g, "+") + ":wght@" + tp.headline.weight);
+        fams.push(tp.body.family.replace(/ /g, "+") + ":wght@" + tp.body.weight);
+      });
+      var lnk = document.createElement("link");
+      lnk.rel = "stylesheet";
+      lnk.href =
+        "https://fonts.googleapis.com/css2?family=" + fams.join("&family=") + "&display=swap";
+      document.head.appendChild(lnk);
+
+      function al(hex, o) {
+        if (!hex || typeof hex !== "string" || hex[0] !== "#") return "rgba(128,128,128," + o + ")";
+        if (hex.length === 4) hex = "#" + hex[1] + hex[1] + hex[2] + hex[2] + hex[3] + hex[3];
+        var r = parseInt(hex.slice(1, 3), 16),
+          g = parseInt(hex.slice(3, 5), 16),
+          b = parseInt(hex.slice(5, 7), 16);
+        if (isNaN(r)) r = 128;
+        if (isNaN(g)) g = 128;
+        if (isNaN(b)) b = 128;
+        return "rgba(" + r + "," + g + "," + b + "," + o + ")";
+      }
+
+      // Prompt-aware UI
+      if (PROMPT && PROMPT.title)
+        document.getElementById("mood-title").textContent = "Pick a direction for: " + PROMPT.title;
+
+      // ── Phase 1: Mood boards + Palette bar ──
+      var moodGrid = document.getElementById("mood-grid");
+      var selectedMood = null;
+      var overridePalette = null;
+
+      // Build palette bar
+      var palBar = document.getElementById("pal-bar");
+      PALETTES.forEach(function (p, i) {
+        var chip = document.createElement("div");
+        chip.className = "pal-bar-chip" + (i === 0 ? "" : "");
+        chip.innerHTML =
+          '<div class="pal-bar-chip-swatches"><div class="pal-bar-chip-swatch" style="background:' +
+          p.background +
+          ';border:1px solid rgba(255,255,255,0.08);"></div><div class="pal-bar-chip-swatch" style="background:' +
+          p.accent +
+          ';"></div><div class="pal-bar-chip-swatch" style="background:' +
+          p.foreground +
+          ';border:1px solid rgba(255,255,255,0.08);"></div></div><span class="pal-bar-chip-name">' +
+          p.name +
+          "</span>";
+        chip.onclick = function () {
+          palBar.querySelectorAll(".pal-bar-chip").forEach(function (c) {
+            c.classList.remove("active");
+          });
+          if (overridePalette === i) {
+            overridePalette = null;
+          } else {
+            chip.classList.add("active");
+            overridePalette = i;
+          }
+          renderMoodBoards();
+        };
+        palBar.appendChild(chip);
+      });
+
+      function renderMoodBoards() {
+        var prevSelected = selectedMood;
+        moodGrid.innerHTML = "";
+        MOODBOARDS.forEach(function (mb, i) {
+          var card = document.createElement("div");
+          card.className = "mood-card" + (i === prevSelected ? " selected" : "");
+          var tp = TYPEPAIRS[mb.type_index || 0],
+            arch = ARCHITECTURES[mb.arch_index || 0];
+          var pal =
+            overridePalette !== null ? PALETTES[overridePalette] : PALETTES[mb.palette_index || 0];
+          var thId = mb.theme || "dark",
+            th =
+              THEMES.find(function (t) {
+                return t.id === thId;
+              }) || THEMES[0];
+          var bg = thId === "palette" ? pal.background : th.bg,
+            fg = thId === "palette" ? pal.foreground : th.fg;
+          var tokens = {
+            "{{bg}}": bg,
+            "{{fg}}": fg,
+            "{{ac}}": pal.accent,
+            "{{mt}}": pal.muted || pal.mid || al(fg, 0.4),
+            "{{hf}}": tp.headline.family,
+            "{{hw}}": tp.headline.weight,
+            "{{bf}}": tp.body.family,
+            "{{bw}}": tp.body.weight,
+            "{{cr}}": mb.corners || "4px",
+            "{{pad}}": mb.padding || "20px",
+            "{{gap}}": mb.gap || "16px",
+            "{{shadow}}": mb.shadow || "none",
+            "{{sf}}": al(fg, 0.06),
+            "{{g}}": al(fg, 0.06),
+            "{{fg3}}": al(fg, 0.03),
+            "{{fg6}}": al(fg, 0.06),
+            "{{fg8}}": al(fg, 0.08),
+            "{{fg15}}": al(fg, 0.15),
+            "{{ac3}}": al(pal.accent, 0.03),
+            "{{ac5}}": al(pal.accent, 0.05),
+            "{{ac25}}": al(pal.accent, 0.25),
+            "{{prompt_headline}}": (PROMPT && PROMPT.headline) || "Your Headline",
+            "{{prompt_sub}}": (PROMPT && PROMPT.subline) || "A subline for your product.",
+          };
+          var preview = arch.preview_html || "";
+          Object.keys(tokens).forEach(function (k) {
+            preview = preview.split(k).join(tokens[k]);
+          });
+          var tagHtml = [tp.headline.family, pal.name, CORNERS[mb.corners_index || 1].name]
+            .map(function (t) {
+              return '<span class="mood-token">' + t + "</span>";
+            })
+            .join("");
+          card.innerHTML =
+            '<div class="mood-preview"><div style="transform:scale(0.38);transform-origin:top left;width:263.16%;min-height:263.16%;">' +
+            preview +
+            '</div></div><div class="mood-info"><div class="mood-name">' +
+            mb.name +
+            '</div><div class="mood-desc">' +
+            mb.description +
+            '</div><div class="mood-tokens">' +
+            tagHtml +
+            "</div></div>";
+          card.onclick = function () {
+            moodGrid.querySelectorAll(".mood-card").forEach(function (c) {
+              c.classList.remove("selected");
+            });
+            card.classList.add("selected");
+            selectedMood = i;
+            document.getElementById("mood-next-btn").classList.add("visible");
+          };
+          moodGrid.appendChild(card);
+        });
+      }
+      renderMoodBoards();
+
+      var currentPhase = "mood";
+      function showPhase(name) {
+        currentPhase = name;
+        document.querySelectorAll(".phase").forEach(function (p) {
+          p.classList.remove("active");
+        });
+        document.querySelectorAll(".phase-tab").forEach(function (t) {
+          t.classList.remove("active");
+        });
+        document.getElementById("phase-" + name).classList.add("active");
+        document.getElementById("tab-" + name).classList.add("active");
+        if (name === "mood") document.getElementById("fab").classList.remove("visible");
+        else checkReady();
+      }
+
+      function goToTune() {
+        if (selectedMood === null) return;
+        var mb = MOODBOARDS[selectedMood];
+        var thIdx = THEMES.findIndex(function (t) {
+          return t.id === (mb.theme || "dark");
+        });
+        if (thIdx >= 0) chipSel("theme", thIdx, document.getElementById("theme-options"));
+        if (mb.arch_index != null)
+          sel("arch", mb.arch_index, document.getElementById("arch-options"));
+        var palIdx = overridePalette !== null ? overridePalette : mb.palette_index;
+        if (palIdx != null) sel("palette", palIdx, document.getElementById("pal-options"));
+        if (mb.type_index != null)
+          sel("type", mb.type_index, document.getElementById("type-options"));
+        if (mb.corners_index != null)
+          chipSel("corners", mb.corners_index, document.getElementById("corner-options"));
+        if (mb.density_index != null)
+          chipSel("density", mb.density_index, document.getElementById("density-options"));
+        if (mb.depth_index != null)
+          chipSel("depth", mb.depth_index, document.getElementById("depth-options"));
+        var eIdx = mb.easing_index != null ? mb.easing_index : 0;
+        var eOpts = document.getElementById("ease-options");
+        eOpts.querySelectorAll(".ease-opt").forEach(function (c) {
+          c.classList.remove("selected");
+        });
+        eOpts.children[eIdx].classList.add("selected");
+        picks.easing = eIdx;
+        document.getElementById("tab-tune").classList.remove("disabled");
+        showPhase("tune");
+      }
+
+      // ── Phase 2: Build options ──
+
+      // Architecture cards
+      var archOpts = document.getElementById("arch-options");
+      ARCHITECTURES.forEach(function (a, i) {
+        var el = document.createElement("div");
+        el.className = "opt";
+        el.innerHTML =
+          '<div class="opt-inner"><div class="opt-name">' +
+          a.name +
+          '</div><div class="opt-desc">' +
+          a.description +
+          '</div><div class="opt-tag">' +
+          a.tag +
+          "</div></div>";
+        el.onclick = function () {
+          sel("arch", i, archOpts);
+        };
+        archOpts.appendChild(el);
+      });
+
+      // Palette cards with ramp
+      var palOpts = document.getElementById("pal-options");
+      PALETTES.forEach(function (p, i) {
+        var el = document.createElement("div");
+        el.className = "opt";
+        el.innerHTML =
+          '<div class="opt-inner"><div class="pal-strip"><div style="background:' +
+          p.background +
+          ';"></div><div style="background:' +
+          (p.muted || p.mid || "#888") +
+          ';"></div><div style="background:' +
+          p.accent +
+          ';"></div><div style="background:' +
+          p.foreground +
+          ';"></div></div><div class="opt-name">' +
+          p.name +
+          '</div><div class="opt-desc">' +
+          p.description +
+          "</div></div>";
+        el.onclick = function () {
+          sel("palette", i, palOpts);
+        };
+        palOpts.appendChild(el);
+      });
+
+      // Typography cards with specimen
+      var typeOpts = document.getElementById("type-options");
+      TYPEPAIRS.forEach(function (tp, i) {
+        var letters = "AaBbCcDdEeFfGgHh";
+        var el = document.createElement("div");
+        el.className = "opt";
+        el.innerHTML =
+          '<div class="type-specimen"><div class="type-headline" style="font-family:\'' +
+          tp.headline.family +
+          "',sans-serif;font-weight:" +
+          tp.headline.weight +
+          ';font-size:24px;">' +
+          tp.preview +
+          '</div><div class="type-body" style="font-family:\'' +
+          tp.body.family +
+          "',monospace;font-weight:" +
+          tp.body.weight +
+          ';">' +
+          tp.body_preview +
+          '</div></div><div class="type-meta"><div class="type-families">' +
+          tp.headline.family +
+          " " +
+          tp.headline.weight +
+          " · " +
+          tp.body.family +
+          " " +
+          tp.body.weight +
+          '</div><div class="type-letters" style="font-family:\'' +
+          tp.headline.family +
+          "',sans-serif;font-weight:" +
+          tp.headline.weight +
+          ';">' +
+          letters +
+          "</div></div>";
+        el.onclick = function () {
+          sel("type", i, typeOpts);
+        };
+        typeOpts.appendChild(el);
+      });
+
+      // Theme chips
+      var themeOpts = document.getElementById("theme-options");
+      THEMES.forEach(function (th, i) {
+        var el = document.createElement("div");
+        el.className = "chip theme-chip";
+        el.innerHTML =
+          '<div class="theme-swatch" style="background:' +
+          th.bg +
+          ';"></div><div class="chip-label">' +
+          th.name +
+          '</div><div class="chip-sub">' +
+          th.desc +
+          "</div>";
+        el.onclick = function () {
+          chipSel("theme", i, themeOpts);
+        };
+        themeOpts.appendChild(el);
+      });
+
+      // Corner chips
+      var cornerOpts = document.getElementById("corner-options");
+      CORNERS.forEach(function (c, i) {
+        var el = document.createElement("div");
+        el.className = "chip";
+        el.innerHTML =
+          '<div class="chip-preview"><div class="corner-box" style="border-radius:' +
+          c.value +
+          ';"></div></div><div><div class="chip-label">' +
+          c.name +
+          '</div><div class="chip-sub">' +
+          c.value +
+          "</div></div>";
+        el.onclick = function () {
+          chipSel("corners", i, cornerOpts);
+        };
+        cornerOpts.appendChild(el);
+      });
+
+      // Density chips
+      var densityOpts = document.getElementById("density-options");
+      DENSITIES.forEach(function (d, i) {
+        var gaps = [2, 4, 7][i];
+        var el = document.createElement("div");
+        el.className = "chip";
+        el.innerHTML =
+          '<div class="chip-preview"><div class="density-bars" style="gap:' +
+          gaps +
+          'px;"><div class="density-bar"></div><div class="density-bar"></div><div class="density-bar"></div></div></div><div><div class="chip-label">' +
+          d.name +
+          '</div><div class="chip-sub">' +
+          d.desc +
+          "</div></div>";
+        el.onclick = function () {
+          chipSel("density", i, densityOpts);
+        };
+        densityOpts.appendChild(el);
+      });
+
+      // Depth chips
+      var depthOpts = document.getElementById("depth-options");
+      DEPTHS.forEach(function (d, i) {
+        var shadow = [
+          "none",
+          "0 2px 8px rgba(255,255,255,0.04)",
+          "0 0 16px rgba(255,255,255,0.06)",
+        ][i];
+        var el = document.createElement("div");
+        el.className = "chip";
+        el.innerHTML =
+          '<div class="chip-preview"><div class="depth-square" style="box-shadow:' +
+          shadow +
+          ';"></div></div><div><div class="chip-label">' +
+          d.name +
+          '</div><div class="chip-sub">' +
+          d.desc +
+          "</div></div>";
+        el.onclick = function () {
+          chipSel("depth", i, depthOpts);
+        };
+        depthOpts.appendChild(el);
+      });
+
+      // Easing options with GSAP animation
+      var easeOpts = document.getElementById("ease-options");
+      EASINGS.forEach(function (e, i) {
+        var el = document.createElement("div");
+        el.className = "ease-opt";
+        var dotId = "ease-dot-" + i;
+        el.innerHTML =
+          '<div class="ease-track"><div class="ease-dot" id="' +
+          dotId +
+          '"></div></div>' +
+          '<div class="ease-label"><div class="ease-name">' +
+          e.name +
+          '</div><div class="ease-value">' +
+          e.value +
+          "</div></div>";
+        el.onclick = function () {
+          easeOpts.querySelectorAll(".ease-opt").forEach(function (c) {
+            c.classList.remove("selected");
+          });
+          el.classList.add("selected");
+          picks.easing = i;
+          checkReady();
+        };
+        easeOpts.appendChild(el);
+        // Animate the dot with GSAP
+        gsap.to("#" + dotId, {
+          left: "calc(100% - 12px)",
+          duration: 1.2,
+          ease: e.value,
+          repeat: -1,
+          repeatDelay: 0.8,
+          yoyo: true,
+        });
+      });
+
+      function chipSel(key, idx, container) {
+        container.querySelectorAll(".chip").forEach(function (c) {
+          c.classList.remove("selected");
+        });
+        container.children[idx].classList.add("selected");
+        picks[key] = idx;
+        checkReady();
+        renderPreview();
+      }
+      function sel(key, idx, container) {
+        container.querySelectorAll(".opt").forEach(function (c) {
+          c.classList.remove("selected");
+        });
+        container.children[idx].classList.add("selected");
+        picks[key] = idx;
+        checkReady();
+        renderPreview();
+      }
+
+      function checkReady() {
+        var ready =
+          picks.theme !== null &&
+          picks.arch !== null &&
+          picks.palette !== null &&
+          picks.type !== null &&
+          picks.corners !== null &&
+          picks.density !== null &&
+          picks.depth !== null &&
+          picks.easing !== null;
+        document
+          .getElementById("fab")
+          .classList.toggle("visible", ready && currentPhase === "tune");
+        document.getElementById("md-overlay").classList.remove("visible");
+      }
+
+      function renderPreview() {
+        var pv = document.getElementById("preview");
+        if (picks.arch === null) {
+          pv.innerHTML = '<div class="preview-empty">Pick a structure to preview</div>';
+          return;
+        }
+        var a = ARCHITECTURES[picks.arch];
+        var th = picks.theme !== null ? THEMES[picks.theme] : THEMES[0];
+        var p =
+          picks.palette !== null ? PALETTES[picks.palette] : { accent: "#888", muted: "#555" };
+        var t =
+          picks.type !== null
+            ? TYPEPAIRS[picks.type]
+            : {
+                headline: { family: "system-ui", weight: 600 },
+                body: { family: "system-ui", weight: 400 },
+              };
+        var cr = picks.corners !== null ? CORNERS[picks.corners].value : "0px";
+        var dn = picks.density !== null ? picks.density : 1;
+        var dp = picks.depth !== null ? picks.depth : 0;
+        var bg, fg;
+        if (th.id === "palette" && p.background) {
+          bg = p.background;
+          fg = p.foreground;
+        } else {
+          bg = th.bg;
+          fg = th.fg;
+        }
+        var ac = p.accent,
+          mt = p.muted || al(fg, 0.4);
+        var pad = [12, 20, 36][dn] + "px",
+          gap = [8, 16, 28][dn] + "px";
+        var isDark = bg && bg[0] === "#" ? parseInt(bg.slice(1, 3), 16) < 80 : true;
+        var shCol = isDark ? ac : fg;
+        var shadow = [
+          "none",
+          "0 2px 16px " + al(shCol, isDark ? 0.15 : 0.1),
+          "0 4px 32px " + al(shCol, isDark ? 0.3 : 0.18),
+        ][dp];
+        var tokens = {
+          "{{bg}}": bg,
+          "{{fg}}": fg,
+          "{{ac}}": ac,
+          "{{mt}}": mt,
+          "{{sf}}": al(fg, 0.06),
+          "{{hf}}": t.headline.family,
+          "{{hw}}": t.headline.weight,
+          "{{bf}}": t.body.family,
+          "{{bw}}": t.body.weight,
+          "{{cr}}": cr,
+          "{{pad}}": pad,
+          "{{gap}}": gap,
+          "{{shadow}}": shadow,
+          "{{g}}": al(fg, 0.06),
+          "{{fg3}}": al(fg, 0.03),
+          "{{fg6}}": al(fg, 0.06),
+          "{{fg8}}": al(fg, 0.08),
+          "{{fg15}}": al(fg, 0.15),
+          "{{ac3}}": al(ac, 0.03),
+          "{{ac5}}": al(ac, 0.05),
+          "{{ac25}}": al(ac, 0.25),
+          "{{prompt_headline}}": (PROMPT && PROMPT.headline) || "Your Headline",
+          "{{prompt_sub}}": (PROMPT && PROMPT.subline) || "Subline.",
+        };
+        var h =
+          a.preview_html ||
+          '<div style="background:' +
+            bg +
+            ";padding:40px;min-height:100%;display:flex;align-items:center;justify-content:center;color:" +
+            mt +
+            ';font-size:14px;">No preview</div>';
+        Object.keys(tokens).forEach(function (k) {
+          h = h.split(k).join(tokens[k]);
+        });
+        pv.innerHTML = h;
+      }
+
+      // ── Output ──
+      function showOutput() {
+        if (
+          picks.theme === null ||
+          picks.arch === null ||
+          picks.palette === null ||
+          picks.type === null ||
+          picks.corners === null ||
+          picks.density === null ||
+          picks.depth === null
+        )
+          return;
+        var a = ARCHITECTURES[picks.arch],
+          p = PALETTES[picks.palette],
+          t = TYPEPAIRS[picks.type];
+        var th = THEMES[picks.theme],
+          cr = CORNERS[picks.corners],
+          dn = DENSITIES[picks.density],
+          dp = DEPTHS[picks.depth];
+        var bg = th.id === "palette" && p.background ? p.background : th.bg;
+        var fg = th.id === "palette" && p.foreground ? p.foreground : th.fg;
+        var ac = p.accent,
+          mt = p.muted || p.mid || "#888";
+        var padVal = { Tight: "8px", Normal: "16px", Generous: "32px" }[dn.name] || "16px";
+        var gapVal = { Tight: "8px", Normal: "16px", Generous: "28px" }[dn.name] || "16px";
+
+        var md = "---\n";
+        md += "name: " + ((PROMPT && PROMPT.title) || "Untitled") + "\n";
+        md +=
+          'colors:\n  primary: "' +
+          bg +
+          '"\n  on-primary: "' +
+          fg +
+          '"\n  accent: "' +
+          ac +
+          '"\n  muted: "' +
+          mt +
+          '"\n';
+        md +=
+          "typography:\n  headline:\n    fontFamily: " +
+          t.headline.family +
+          "\n    fontSize: 3.5rem\n    fontWeight: " +
+          t.headline.weight +
+          "\n    letterSpacing: -0.03em\n";
+        md +=
+          "  body:\n    fontFamily: " +
+          t.body.family +
+          "\n    fontSize: 1rem\n    fontWeight: " +
+          t.body.weight +
+          "\n    lineHeight: 1.5\n";
+        md += "rounded:\n  md: " + cr.value + "\n";
+        md += "spacing:\n  md: " + padVal + "\n  lg: " + gapVal + "\n";
+        md += "---\n\n";
+        md += "## Overview\n\n" + a.mood + ". " + a.description + ". " + p.description + ".\n\n";
+        md +=
+          "## Colors\n\n- **Primary** (`" +
+          bg +
+          "`) — Canvas background\n- **On-Primary** (`" +
+          fg +
+          "`) — Text and content\n- **Accent** (`" +
+          ac +
+          "`) — CTAs, highlights\n- **Muted** (`" +
+          mt +
+          "`) — Secondary text\n\n";
+        md +=
+          "## Typography\n\n- **Headline** — " +
+          t.headline.family +
+          " at weight " +
+          t.headline.weight +
+          "\n- **Body** — " +
+          t.body.family +
+          " at weight " +
+          t.body.weight +
+          "\n\n";
+        md +=
+          "## Layout\n\n- Structure: " +
+          a.name +
+          " — " +
+          a.tag +
+          "\n- Density: " +
+          dn.name +
+          " (" +
+          dn.desc +
+          ")\n- Corners: " +
+          cr.name +
+          " (" +
+          cr.value +
+          ")\n\n";
+        md += "## Elevation\n\n" + dp.name + " — " + dp.desc + ".\n\n";
+        var easeObj = picks.easing !== null ? EASINGS[picks.easing] : null;
+        if (easeObj) {
+          md +=
+            "## Motion\n\n- **Entry easing:** `" +
+            easeObj.value +
+            "` — " +
+            easeObj.desc +
+            "\n- **Energy:** " +
+            easeObj.name +
+            "\n\n";
+        }
+        if (a.components) md += "## Components\n\n" + a.components + "\n\n";
+        md += "## Do's and Don'ts\n\n";
+        if (a.dos) {
+          md += a.dos + "\n";
+        } else {
+          md +=
+            "### Do's\n- Use accent color sparingly for maximum impact\n- Maintain consistent " +
+            cr.name.toLowerCase() +
+            " corners\n\n### Don'ts\n- Do not mix multiple accent colors\n- Do not use weights outside the headline/body pair\n";
+        }
+
+        document.getElementById("md-output").value = md;
+        document.getElementById("md-overlay").classList.add("visible");
+      }
+
+      document.getElementById("copy-btn").addEventListener("click", function () {
+        navigator.clipboard.writeText(document.getElementById("md-output").value).then(function () {
+          document.getElementById("copy-btn").textContent = "Copied!";
+          setTimeout(function () {
+            document.getElementById("copy-btn").textContent = "Copy";
+          }, 2000);
+        });
+      });
+    </script>
+  </body>
+</html>
diff --git a/.claude/skills-media/hyperframes-keyframes/SKILL.md b/.claude/skills-media/hyperframes-keyframes/SKILL.md
new file mode 100644
index 000000000..cc981fae8
--- /dev/null
+++ b/.claude/skills-media/hyperframes-keyframes/SKILL.md
@@ -0,0 +1,229 @@
+---
+name: hyperframes-keyframes
+description: >
+  Use when a HyperFrames composition needs seek-safe 2D/3D keyframes, GSAP
+  timelines, CSS keyframes, Anime.js, WAAPI, FLIP, paths, masks, SVG morph/draw,
+  text trails, 3D depth, or `hyperframes keyframes` diagnostics.
+  Don't use for broad scene strategy, brand design, media sourcing, captions, or
+  general video planning.
+---
+
+# HyperFrames Keyframes
+
+Keyframes are a pose contract: visible states, continuous subject identity, seek-safe runtime, verified pixels.
+
+Use `hyperframes-animation` for broad scene recipes. Use `hyperframes-cli` for full command docs. Use `references/keyframe-patterns.md` only when choosing implementation mechanisms, not visual style.
+
+## Procedure
+
+1. Identify the animated subject, visible states, final state, and runtime.
+2. Choose the smallest mechanism that proves the prompt. Read `references/keyframe-patterns.md` only if the mechanism is unclear.
+3. Author seek-safe keyframes in the declared runtime. Build synchronously and register the runtime instance.
+4. Verify with `hyperframes lint`, `hyperframes check`, `hyperframes keyframes`, one focused `--shot`, and snapshots at proof times.
+5. If proof fails, fix the source keyframes and rerun the smallest failing diagnostic before rendering.
+
+## Contract
+
+- Name the moving subject.
+- Name the poses needed to prove the intended motion, including the final state.
+- Keyframe visible channels, not hidden helper state.
+- Preserve object identity when continuity matters.
+- Crossfade only when the intended motion is replacement or dissolve.
+- Hold readable or semantic states long enough to see.
+- Final frame is part of the animation, not cleanup.
+- Do not reset to rest unless requested.
+- Do not end on black unless requested.
+- If editing a starter scene, preserve layout, copy, assets, colors, and final state unless asked to redesign.
+
+## Runtime Rules
+
+GSAP:
+
+- build synchronously at page load
+- use `gsap.timeline({ paused: true })`
+- register as `window.__timelines[compositionId]`
+- registry key must match `data-composition-id`
+- do not call `tl.play()` for render-critical motion
+- keep repeats finite
+
+CSS keyframes:
+
+- finite duration and iteration count
+- deterministic delay
+- `animation-fill-mode: both`
+- use `data-start` when timing belongs to a clip
+
+Anime.js:
+
+- create synchronously
+- `autoplay: false`
+- finite duration and loops
+- push every instance to `window.__hfAnime`
+
+WAAPI:
+
+- finite `duration`
+- `fill: "both"`
+- deterministic construction
+- the text surface does not list WAAPI; verify with `--shot` (it seeks WAAPI) and snapshots
+
+Never use for render-critical motion:
+
+- `Date.now()`
+- `performance.now()`
+- unseeded `Math.random()`
+- hover/scroll triggers
+- timers
+- async-created timelines
+- unregistered `requestAnimationFrame`
+- infinite loops
+
+## GSAP Skeleton
+
+```js
+const root = document.querySelector("[data-composition-id]");
+const compositionId = root.dataset.compositionId;
+const tl = gsap.timeline({ paused: true });
+
+tl.addLabel("state-a", 0);
+tl.to(".subject", {
+  keyframes: [
+    { x: 0, opacity: 1, duration: 0.2 },
+    { x: 120, opacity: 1, duration: 0.4, ease: "power2.out" },
+    { x: 100, opacity: 1, duration: 0.2, ease: "power2.inOut" },
+  ],
+  ease: "none",
+});
+
+window.__timelines = window.__timelines || {};
+window.__timelines[compositionId] = tl;
+```
+
+Use labels for semantic states. Use position parameters instead of chained delays. Use `immediateRender: false` for later `from()`/`fromTo()` tweens touching the same property.
+
+## Keyframe Forms
+
+- Array keyframes: pose ladder with per-step duration/ease.
+- Percentage keyframes: exact timing inside one tween.
+- Property arrays: compact multi-stop changes.
+- `ease: "none"` on the parent when each stop carries its own easing.
+- `easeEach` when every segment should share the same feel.
+
+Do not copy numeric distances or timing from examples. Derive them from the actual composition geometry and duration.
+
+For one subject moving between two boxes, prefer one continuous transform tween or FLIP. Split `x/y/scale` into multiple eased keyframes only when the viewer should feel distinct beats; every segment changes velocity and can read as a hitch.
+
+## Channels
+
+Prefer compositor/visual channels: `x/y/z`, `xPercent/yPercent`, `scale`, `rotationX/Y/Z`, `skew`, `transformOrigin`, `svgOrigin`, `opacity`, `autoAlpha`, `clip-path`, masks, CSS vars, SVG path/dash values, camera transforms, shader uniforms.
+
+Avoid layout/lifecycle channels: `top/left/right/bottom`, `width/height`, `margin/padding`, `display`, `visibility`, late DOM creation, helper overlays doing subject motion.
+
+For visibility changes, use `autoAlpha` on the registered seekable GSAP timeline, or a zero-duration `tl.set()` at an explicit boundary. Target only a non-clip element or a wrapper inside the clip; never target `.clip` itself. Never duration-tween raw `visibility`, and never tween `display`.
+
+## Mechanism Choice
+
+Choose the smallest mechanism that proves the prompt:
+
+| Need                                  | Mechanism                                          |
+| ------------------------------------- | -------------------------------------------------- |
+| Same subject changes box or hierarchy | shared element / FLIP                              |
+| Subject travels a visible route       | path travel                                        |
+| Stroke grows or traces                | stroke draw                                        |
+| Shape becomes another shape           | shape interpolation                                |
+| Reveal boundary is visible            | clip, mask, or shader uniform                      |
+| Many items move with order            | stagger / indexed delay                            |
+| Text itself moves                     | line, word, character, or band subdivision         |
+| Surface bends, stretches, or crops    | parent/child counter-transform                     |
+| UI has states                         | explicit state machine                             |
+| Scene has depth                       | DOM 3D, Three.js, or WebGL camera/object keyframes |
+
+Mechanisms can combine, but each one must clarify the idea. Decoration is not proof.
+
+## Timing
+
+- Anticipation only when it clarifies cause or direction.
+- Acceleration leaves rest.
+- Peak proof shows the mechanism unmistakably.
+- Follow-through sells energy and direction.
+- Overshoot only when the subject should feel elastic or tactile.
+- Constant-speed path travel usually needs `ease: "none"`.
+- Discrete UI states usually need a sharp ease-out.
+- Repeated elements need ordered offsets, not identical timing.
+- Final lockups need longer holds than transition poses.
+- Smoothness means continuous velocity on the same subject.
+- Do not overlap tweens that write the same transform property unless the overlap is intentional and verified.
+- Avoid animating large `clip-path`/mask changes while the same hero surface is also scaling or traveling; use nested reveals after the main move settles.
+
+## Text
+
+Preserve line boxes, word spacing, readability, and final fit. If text moves internally, move the glyphs or masked bands, not only decorations around the text. Snapshot readable frames.
+
+## SVG
+
+For stroke growth prefer `DrawSVGPlugin`, then `stroke-dasharray`/`stroke-dashoffset`. For shape interpolation prefer `MorphSVGPlugin`; convert primitives to paths when needed and split complex silhouettes into simpler parts.
+
+## 3D
+
+Scale alone is fake depth. Use perspective on a stable parent, `transform-style: preserve-3d`, z travel, rotation, camera/world motion, occlusion, and layer order when objects cross.
+
+Use one or two diagnostic angles that expose the depth relationship. If angled proof shows no depth crossing, improve z/camera/occlusion.
+
+## Canvas / WebGL
+
+Keyframe camera position, camera target, object transform, material opacity, shader uniforms, and postprocess intensity through deterministic state. Render from HyperFrames time. Use `--ghost` because marker boxes cannot see internal canvas motion.
+
+## CLI Proof
+
+```bash
+npx hyperframes lint
+npx hyperframes check
+npx hyperframes keyframes .
+npx hyperframes keyframes . --json
+npx hyperframes keyframes . --runtime all
+npx hyperframes keyframes . --selector "<selector>" --shot "<file>" --samples <n>
+npx hyperframes keyframes . --selector "<selector>" --shot "<file>" --layout strip --from <t0> --to <t1>
+npx hyperframes keyframes . --shot "<file>" --ghost --angle <angle>
+npx hyperframes snapshot . --at <times>
+```
+
+Choose `<selector>` for the real animated subject. Choose `<times>` for first frame, proof poses, final-minus-hold, and exact final. Choose `<angle>` only when depth must be proven.
+
+| Tool             | Proves                                                                                              |
+| ---------------- | --------------------------------------------------------------------------------------------------- |
+| `keyframes`      | targets, explicit stops, paths, traces, composed parent/child motion, CSS stops, Anime registration |
+| `--shot`         | ghosts, route shape, time spacing, DOM 3D projection, focused selector proof                        |
+| `--layout strip` | in-place motion, overlaps, contact, subtle scale/opacity, text waves                                |
+| `--ghost`        | canvas, WebGL, shader motion, rendered 3D                                                           |
+| `snapshot --at`  | masks, text readability, full state, final lockup, black/reset tails                                |
+
+If selector proof looks wrong:
+
+1. rerun `--json`
+2. find the actual animated target
+3. shoot that target
+4. snapshot full frames
+5. trust painted pixels over logs
+
+## Diagnostic Reading
+
+`flat` means no explicit middle poses. `keyframes` means explicit stops exist. `motionPath` means a route exists. `trace` means multi-stroke drawing. `composed with` means child motion inherits parent motion.
+
+Even ghost spacing means constant speed. Clustered ghosts mean slow-in or settle. Large gaps mean fast travel.
+
+A helper-selector shot is not proof. An onion shot over a broken full frame is not proof.
+
+## Error Handling
+
+| Failure            | Fix                                                                                |
+| ------------------ | ---------------------------------------------------------------------------------- |
+| endpoint-only      | add middle poses, hold peak proof, rerun `--shot`                                  |
+| identity break     | keep one element alive, use shared source/final boxes, remove substitute crossfade |
+| fake 3D            | add z/camera travel, occlusion, angled proof                                       |
+| wrong final        | add final hold, snapshot final-minus-hold and exact final                          |
+| unseekable runtime | pause autoplay, register instance, remove timers, build synchronously              |
+| unreadable text    | preserve line boxes, reduce displacement, add final hold, snapshot text frames     |
+
+## Done
+
+Run `hyperframes lint`, `hyperframes check`, `hyperframes keyframes`, one focused `--shot`, and snapshots. Confirm first frame, proof poses, final-minus-hold, exact final, subject-owned motion, and no debug overlays.
diff --git a/.claude/skills-media/hyperframes-keyframes/agents/openai.yaml b/.claude/skills-media/hyperframes-keyframes/agents/openai.yaml
new file mode 100644
index 000000000..2cb053d51
--- /dev/null
+++ b/.claude/skills-media/hyperframes-keyframes/agents/openai.yaml
@@ -0,0 +1,4 @@
+interface:
+  display_name: "HyperFrames Keyframes"
+  short_description: "Author seek-safe video keyframes"
+  default_prompt: "Use $hyperframes-keyframes to author seek-safe 2D/3D keyframes and verify them with the CLI."
diff --git a/.claude/skills-media/hyperframes-keyframes/references/keyframe-patterns.md b/.claude/skills-media/hyperframes-keyframes/references/keyframe-patterns.md
new file mode 100644
index 000000000..3c3211d1c
--- /dev/null
+++ b/.claude/skills-media/hyperframes-keyframes/references/keyframe-patterns.md
@@ -0,0 +1,106 @@
+# Keyframe Mechanism Reference
+
+Use this after `SKILL.md` when choosing a concrete implementation mechanism. It is a parts shelf, not a style guide. Start with one primary mechanism; add supporting motion only when it clarifies the idea.
+
+## Runtime Skeletons
+
+GSAP:
+
+```js
+const root = document.querySelector("[data-composition-id]");
+const id = root.dataset.compositionId;
+const tl = gsap.timeline({ paused: true });
+tl.to("<selector>", {
+  keyframes: [
+    /* derive poses from the scene */
+  ],
+  ease: "none",
+});
+window.__timelines = window.__timelines || {};
+window.__timelines[id] = tl;
+```
+
+CSS:
+
+```css
+.<subject > {
+  animation: <name> <duration> <ease> both;
+  animation-iteration-count: 1;
+}
+@keyframes <name> {
+  0% {
+    transform: <pose-a>;
+    opacity: <a>;
+  }
+  100% {
+    transform: <pose-b>;
+    opacity: <b>;
+  }
+}
+```
+
+Anime.js:
+
+```js
+const animation = anime.timeline({ autoplay: false });
+animation.add({ targets: "<selector>" /* derived channels */ });
+window.__hfAnime = window.__hfAnime || [];
+window.__hfAnime.push(animation);
+```
+
+Three/WebGL:
+
+```js
+const state = { progress: 0 };
+tl.to(state, {
+  progress: 1,
+  duration: <duration>,
+  onUpdate: () => {
+    // derive camera/object/material values from state.progress
+    renderer.render(scene, camera);
+  },
+});
+```
+
+## Mechanisms
+
+| Mechanism           | Solves                                         | Keyframe                                                           | Runtime                                    | Verify                                         |
+| ------------------- | ---------------------------------------------- | ------------------------------------------------------------------ | ------------------------------------------ | ---------------------------------------------- |
+| Path travel         | Subject must visibly follow a route            | path progress, tangent rotation, follower offset, trail opacity    | GSAP MotionPath or sampled x/y/z           | strip shot at bends; final snapshot            |
+| Stroke draw         | A line, ring, or outline appears over time     | dash/draw range, stroke opacity, endpoint state                    | DrawSVG or SVG dash fallback               | partial mid snapshot; complete final           |
+| Shape interpolation | One silhouette becomes another                 | source path, middle path, target path, fill/stroke                 | MorphSVG or path tween                     | first/mid/final snapshots                      |
+| Shared element      | Same subject changes box or hierarchy          | source box, target box, x/y, scale, radius, context opacity        | GSAP Flip or manual FLIP                   | one identity moves; no substitute crossfade    |
+| Clip/mask reveal    | Animated boundary exposes content              | clip path, mask position/size, edge softness, inner counter-motion | CSS, SVG, GSAP, or shader                  | snapshot edge frames and final unclipped state |
+| Ordered repetition  | Many items enter, leave, or transform in order | indexed delay, x/y, scale, opacity, final alignment                | GSAP stagger, Anime stagger, CSS vars      | check first/middle/last item timing            |
+| Text subdivision    | Text motion needs readable internal timing     | line/word/char/band wrappers, y/x, opacity, final fit              | SplitText, authored spans, Anime splitText | strip shot plus final readability snapshot     |
+| Surface transform   | Image/card stretches, crops, or changes shape  | parent scale/skew/clip, child counter-scale, transform origin      | GSAP/CSS keyframes                         | no accidental warped final                     |
+| UI state machine    | Interface passes through semantic states       | closed, active, loading, success/error, final                      | GSAP/CSS/Anime                             | snapshots hit states in order                  |
+| DOM depth           | HTML elements need 3D separation               | perspective, z, rotationX/Y, opacity, crossing layer order         | CSS 3D + GSAP/CSS/Anime                    | angled `--shot`; overlap snapshot              |
+| Camera/object 3D    | Canvas/WebGL scene moves in depth              | camera, target, object transform, material opacity                 | Three.js/WebGL + GSAP proxy                | `--ghost`; snapshots at proof poses            |
+| Shader uniform      | Pixel effect is driven by scalar progress      | progress, edge width, noise, color mix, opacity                    | ShaderMaterial/WebGL uniforms              | `--ghost`; snapshot 0/edge/mid/final           |
+| Instanced system    | Many 3D objects move as one system             | instance transforms, scale, color/opacity, camera                  | Three InstancedMesh                        | snapshots, because DOM boxes miss internals    |
+| Imported model      | Model animation must scrub deterministically   | `AnimationMixer.setTime`, camera, material, lights                 | Three AnimationMixer                       | drive from HyperFrames time; `--ghost`         |
+
+## Source Links
+
+- GSAP keyframes: https://gsap.com/resources/keyframes/
+- GSAP timeline: https://gsap.com/docs/v3/GSAP/Timeline/
+- GSAP MotionPathPlugin: https://gsap.com/docs/v3/Plugins/MotionPathPlugin/
+- GSAP Flip: https://gsap.com/docs/v3/Plugins/Flip/
+- GSAP DrawSVGPlugin: https://gsap.com/docs/v3/Plugins/DrawSVGPlugin/
+- GSAP MorphSVGPlugin: https://gsap.com/docs/v3/Plugins/MorphSVGPlugin/
+- GSAP SplitText: https://gsap.com/docs/v3/Plugins/SplitText/
+- GSAP CSSPlugin: https://gsap.com/docs/v3/GSAP/CorePlugins/CSS/
+- Anime.js documentation: https://animejs.com/documentation/
+- Anime.js stagger grid: https://animejs.com/documentation/utilities/stagger/stagger-parameters/stagger-grid/
+- Anime.js timeline: https://animejs.com/documentation/timeline/
+- Anime.js SVG helpers: https://animejs.com/documentation/svg/createmotionpath/
+- MDN CSS animations: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animations/Using_CSS_animations
+- MDN `@keyframes`: https://developer.mozilla.org/en-US/docs/Web/CSS/@keyframes
+- MDN `clip-path`: https://developer.mozilla.org/en-US/docs/Web/CSS/clip-path
+- MDN CSS masking: https://developer.mozilla.org/en-US/docs/Web/CSS/mask
+- MDN perspective: https://developer.mozilla.org/en-US/docs/Web/CSS/perspective
+- MDN transform-style: https://developer.mozilla.org/en-US/docs/Web/CSS/transform-style
+- Three.js AnimationMixer: https://threejs.org/docs/#api/en/animation/AnimationMixer
+- Three.js ShaderMaterial: https://threejs.org/docs/#api/en/materials/ShaderMaterial
+- Three.js InstancedMesh: https://threejs.org/docs/#api/en/objects/InstancedMesh
diff --git a/.claude/skills-media/hyperframes-registry/SKILL.md b/.claude/skills-media/hyperframes-registry/SKILL.md
new file mode 100644
index 000000000..5fd897bc7
--- /dev/null
+++ b/.claude/skills-media/hyperframes-registry/SKILL.md
@@ -0,0 +1,113 @@
+---
+name: hyperframes-registry
+description: Install, discover, and wire registry blocks and components into HyperFrames compositions. Use when running hyperframes add or hyperframes catalog, installing one item or every block matching a tag, wiring an installed item into index.html, or working with hyperframes.json. Covers discovery, install locations, block sub-composition wiring, component snippet merging, and authoring a new block or component to contribute upstream (idea → scaffold → validate → PR).
+---
+
+# HyperFrames Registry
+
+The registry provides reusable blocks and components installable via `hyperframes add <name>`.
+
+- **Blocks** — standalone sub-compositions (own dimensions, duration, timeline). Included via `data-composition-src` in a host composition.
+- **Components** — effect snippets (no own dimensions). Pasted directly into a host composition's HTML.
+
+## Quick reference
+
+```bash
+hyperframes add data-chart              # install a block
+hyperframes add grain-overlay           # install a component
+hyperframes add captions                # install every block tagged captions
+hyperframes add shimmer-sweep --dir .   # target a specific project
+hyperframes add data-chart --json       # machine-readable output
+hyperframes add data-chart --no-clipboard  # skip clipboard (CI/headless)
+```
+
+After install, the CLI prints which files were written and a snippet to paste into your host composition. The snippet is a starting point — you'll need to add `data-composition-id` (must match the block's internal composition ID), `data-start`, and `data-track-index` attributes when wiring blocks.
+
+The positional value is resolved as an exact item name first. If no item matches and the value is a tag, the command installs every block with that tag. Registry dependencies are installed before the requested item. `hyperframes add` works only for blocks and components; for examples, use `hyperframes init <dir> --example <name>` instead.
+
+## Install locations
+
+Blocks install to `compositions/<name>.html` by default. Components install to `compositions/components/<name>.html` by default.
+
+These paths are configurable in `hyperframes.json`:
+
+```json
+{
+  "registry": "https://raw.githubusercontent.com/heygen-com/hyperframes/main/registry",
+  "paths": {
+    "blocks": "compositions",
+    "components": "compositions/components",
+    "assets": "assets"
+  }
+}
+```
+
+See [install-locations.md](./references/install-locations.md) for full details.
+
+## Wiring blocks
+
+Blocks are standalone compositions — include them via `data-composition-src` in your host `index.html`:
+
+```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"
+></div>
+```
+
+Key attributes:
+
+- `data-composition-src` — path to the block HTML file
+- `data-composition-id` — must match the block's internal ID
+- `data-start` — when the block appears in the host timeline (seconds)
+- `data-duration` — how long the block plays
+- `data-width` / `data-height` — block canvas dimensions
+- `data-track-index` — layer ordering (higher = in front)
+
+See [wiring-blocks.md](./references/wiring-blocks.md) for full details.
+
+## Wiring components
+
+Components are snippets — paste their HTML into your composition's markup, their CSS into your style block, and their JS into your script (if any):
+
+1. Read the installed file (e.g., `compositions/components/grain-overlay.html`)
+2. Copy the HTML elements into your composition's `<div data-composition-id="...">`
+3. Copy the `<style>` block into your composition's styles
+4. Copy any `<script>` content into your composition's script (before your timeline code)
+5. If the component exposes GSAP timeline integration (see the comment block in the snippet), add those calls to your timeline
+
+See [wiring-components.md](./references/wiring-components.md) for full details.
+
+## Discovery
+
+Use the CLI as the primary discovery surface:
+
+```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`.
+
+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
+```
+
+Each item's `registry-item.json` contains: name, type, title, description, tags, dimensions (blocks only), duration (blocks only), and file list.
+
+See [discovery.md](./references/discovery.md) for details on filtering by type and tags.
+
+## Contributing a new block or component
+
+To author a NEW registry item (caption style, VFX block, transition, lower third, or a reusable component) and ship it as an upstream PR — not install an existing one — follow the full idea → scaffold → build → validate → preview → ship workflow in [contributing.md](./references/contributing.md). Copy-paste starter templates (caption / VFX / component / `registry-item.json`) are in [templates.md](./references/templates.md).
diff --git a/.claude/skills-media/hyperframes-registry/examples/add-block.md b/.claude/skills-media/hyperframes-registry/examples/add-block.md
new file mode 100644
index 000000000..95bee6ff8
--- /dev/null
+++ b/.claude/skills-media/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-media/hyperframes-registry/examples/add-component.md b/.claude/skills-media/hyperframes-registry/examples/add-component.md
new file mode 100644
index 000000000..1371289dd
--- /dev/null
+++ b/.claude/skills-media/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-media/hyperframes-registry/references/contributing.md b/.claude/skills-media/hyperframes-registry/references/contributing.md
new file mode 100644
index 000000000..58ff2a813
--- /dev/null
+++ b/.claude/skills-media/hyperframes-registry/references/contributing.md
@@ -0,0 +1,166 @@
+# 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
+
+- `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** — The catalog card uses a PNG at `docs/images/catalog/{kind}/{name}.png` (where `{kind}` is `blocks` or `components`). Generate it from a snapshot, then:
+
+- **HeyGen internal contributors:** run `scripts/upload-docs-images.sh` (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. Update registry/registry.json — add entry to the "items" array:
+#    { "name": "{name}", "type": "hyperframes:block" }  (or "hyperframes:component")
+
+# 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-media/hyperframes-registry/references/demo-html-pattern.md b/.claude/skills-media/hyperframes-registry/references/demo-html-pattern.md
new file mode 100644
index 000000000..3e53838c1
--- /dev/null
+++ b/.claude/skills-media/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-media/hyperframes-registry/references/discovery.md b/.claude/skills-media/hyperframes-registry/references/discovery.md
new file mode 100644
index 000000000..550a9a7cf
--- /dev/null
+++ b/.claude/skills-media/hyperframes-registry/references/discovery.md
@@ -0,0 +1,231 @@
+# Registry discovery
+
+## 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 tables below group the 97 blocks by category. **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-animation` → `adapters/typegpu.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                                  |
+| `liquid-glass-context-menu`   | Frosted context-menu panel drifting over aurora shader                                  |
+| `liquid-glass-media-controls` | Frosted media-control panels spreading over aurora shader                               |
+| `vfx-liquid-glass`            | Bare VFX composition shell for liquid-glass effects                                     |
+
+#### VFX (6)
+
+HTML-in-canvas + WebGL composition blocks. See `/hyperframes-animation` → `adapters/three.md` and `adapters/html-in-canvas-patterns.md` for the underlying APIs.
+
+| 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:
+
+**VS Code workbench (12)** — full editor chrome (activity bar, sidebar, tabs, integrated terminal, status bar). Theme variants: `code-snippet-dark-2026`, `code-snippet-dark-modern`, `code-snippet-dark-plus`, `code-snippet-light-2026`, `code-snippet-light-modern`, `code-snippet-light-plus`, `code-snippet-high-contrast`, `code-snippet-high-contrast-light`, `code-snippet-monokai`, `code-snippet-solarized-light`, `code-snippet-visual-studio-dark`, `code-snippet-visual-studio-light`.
+
+**Apple Terminal (12)** — macOS Terminal.app window typing a shell session. Profile = window colors:
+
+| Name                                         | Look                                     |
+| -------------------------------------------- | ---------------------------------------- |
+| `code-snippet-apple-terminal-basic`          | White bg, black text                     |
+| `code-snippet-apple-terminal-clear-dark`     | Semi-transparent dark bg                 |
+| `code-snippet-apple-terminal-clear-light`    | Semi-transparent light bg                |
+| `code-snippet-apple-terminal-grass`          | Black bg, green text                     |
+| `code-snippet-apple-terminal-homebrew`       | Black bg, bright green text, lime cursor |
+| `code-snippet-apple-terminal-man-page`       | Pale yellow bg, black text               |
+| `code-snippet-apple-terminal-novel`          | Warm parchment bg, dark brown text       |
+| `code-snippet-apple-terminal-ocean`          | Deep blue bg, white text                 |
+| `code-snippet-apple-terminal-pro`            | Black bg, grey text, lime cursor         |
+| `code-snippet-apple-terminal-red-sands`      | Deep red bg, sandy text                  |
+| `code-snippet-apple-terminal-silver-aerogel` | Dark grey bg, white text                 |
+| `code-snippet-apple-terminal-solid-colors`   | Deep purple bg, white text               |
+
+#### 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                                |
+| `code-snippet-flight` | Discrete snippets fly in from the side and assemble into a stacked program (block-level FLIP)                              |
+
+**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-media/hyperframes-registry/references/install-locations.md b/.claude/skills-media/hyperframes-registry/references/install-locations.md
new file mode 100644
index 000000000..65e3d34e5
--- /dev/null
+++ b/.claude/skills-media/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-media/hyperframes-registry/references/templates.md b/.claude/skills-media/hyperframes-registry/references/templates.md
new file mode 100644
index 000000000..8834c959e
--- /dev/null
+++ b/.claude/skills-media/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-media/hyperframes-registry/references/wiring-blocks.md b/.claude/skills-media/hyperframes-registry/references/wiring-blocks.md
new file mode 100644
index 000000000..d3f4474cf
--- /dev/null
+++ b/.claude/skills-media/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-media/hyperframes-registry/references/wiring-components.md b/.claude/skills-media/hyperframes-registry/references/wiring-components.md
new file mode 100644
index 000000000..9521a2174
--- /dev/null
+++ b/.claude/skills-media/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-media/hyperframes/SKILL.md b/.claude/skills-media/hyperframes/SKILL.md
new file mode 100644
index 000000000..34bec9539
--- /dev/null
+++ b/.claude/skills-media/hyperframes/SKILL.md
@@ -0,0 +1,163 @@
+---
+name: hyperframes
+description: >
+  Mandatory entry point: read this first for any request to make, create, edit, animate, or render a
+  video, animation, or motion graphic, including a promo, explainer, captioned clip, title card,
+  overlay, slideshow or interactive deck, Remotion port, or any HyperFrames HTML composition. Also
+  use it to inspect, diagnose, validate, preview, publish, or batch-render an existing HyperFrames
+  project. Inputs may be a website URL, GitHub PR, Figma design or URL, text or brief, existing
+  footage, or music. It resumes project state, captures intent when applicable, selects and installs
+  the owning workflow, and routes domain capabilities. HyperFrames is the default output framework
+  unless the user explicitly chooses another framework for the deliverable or asks only to record a
+  browser session.
+---
+
+# HyperFrames entry point
+
+HyperFrames **renders video from HTML** — a composition is an HTML file whose DOM declares timing with `data-*` attributes, whose animation runtime is seekable, and whose media playback is owned by the framework. The full authoring contract lives in `/hyperframes-core`; read it before writing composition HTML.
+
+## 1. Start from project state
+
+Apply the first matching row; do not evaluate lower state rows:
+
+| State                                                                                                                         | Action                                                                                                                                                                                                      |
+| ----------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| Explicit port of existing Remotion source to HyperFrames                                                                      | Read the `/remotion-to-hyperframes` section of `references/workflow-catalog.md`, then route directly to that workflow. Skip the intent layer.                                                               |
+| Specific operation on an existing HyperFrames project: inspect, diagnose, validate, preview, render, publish, or batch-render | Perform only that operation. Skip intent and workflow routing; load `/hyperframes-cli` and any required domain skills.                                                                                      |
+| Specific edit to an existing project                                                                                          | Make the edit. Do not run the intent layer.                                                                                                                                                                 |
+| `BRIEF.md` exists                                                                                                             | Read `workflow` and `flow`. Execute that workflow; `flow: companion` always executes in `/general-video`. Ask no brief questions.                                                                           |
+| No brief, but `hyperframes.json` or `STORYBOARD.md` exists                                                                    | Resume from project files and recorded preferences. Infer the owning workflow from existing artifacts. If it cannot be determined uniquely, ask one routing-only question; do not run the intent interview. |
+| Fresh creation                                                                                                                | Run the intent layer (§ 4), then route once using the rules below.                                                                                                                                          |
+
+Continue with source adapters in § 2. A direct or resumed workflow route skips §§ 3–4 and proceeds to workflow installation in § 5. A specific operation or edit skips §§ 3–5 and loads only the domain skills it needs from § 6.
+
+If a fresh request does not identify the subject or input, ask what the video is about before routing. Check preferences and recipes before asking anything (§ 4, step 1).
+
+### 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.
+
+## 2. Adapt orthogonal inputs before routing
+
+A Figma source changes **how assets and design enter the project**, not which workflow owns the deliverable.
+
+If any input is a `figma.com` URL:
+
+1. For fresh creation, begin the intent layer (§ 4) and complete its memory and recipe reads.
+2. During input triage, run `/figma` to extract assets, brand tokens, components, and storyboard frames when present. For an existing-project edit, run `/figma` without reopening intent.
+3. Route the requested deliverable using the output from `/figma`, then continue only the selected route's unanswered intent questions.
+4. Do not drive Figma through raw MCP tools. That bypasses SVG sanitization, `.media/manifest.jsonl` provenance, and brand-token `var()` binding.
+
+A GitHub PR URL is not a website source. A named or adopted recipe already carries its workflow; confirm adoption through the intent layer, then route to that workflow.
+
+## 3. Route fresh creation
+
+Use the first matching row. Match the requested **deliverable**, not a word or file type mentioned in passing.
+
+| Priority | Request                                                                                                            | Workflow                   |
+| -------- | ------------------------------------------------------------------------------------------------------------------ | -------------------------- |
+| 1        | Explicitly port an existing Remotion source                                                                        | `/remotion-to-hyperframes` |
+| 2        | Author a presentation, pitch deck, or navigable interactive deck                                                   | `/slideshow`               |
+| 3        | Add plain captions or subtitles to existing talking-head footage without changing it                               | `/embedded-captions`       |
+| 4        | Add designed graphic overlays to existing talking-head, interview, or podcast footage without changing the footage | `/talking-head-recut`      |
+| 5        | Build a beat-synced video from a music track, with no narration or website capture                                 | `/music-to-video`          |
+| 6        | Create an explicitly short, unnarrated, motion-first unit, typically under 10s                                     | `/motion-graphics`         |
+| 7        | Explain a GitHub pull request or code change from a PR reference                                                   | `/pr-to-video`             |
+| 8        | Market or showcase a website, product site, app, or company from a URL or site-specific brief                      | `/product-launch-video`    |
+| 9        | Explain a topic, article, or notes with invented visuals and no product or site capture                            | `/faceless-explainer`      |
+| 10       | Any other custom video or composition                                                                              | `/general-video`           |
+
+Before finalizing the route, read the matching section of `references/workflow-catalog.md`. It is the canonical input/output/trigger contract available before lazy-installed workflow skills are present. If the candidate does not satisfy that entry, continue routing instead of forcing the match.
+
+### Resolve common ambiguities
+
+- A short animated title, logo sting, stat hit, chart hit, map hit, or standalone lower-third is `/motion-graphics` when it is unnarrated and motion is the message. A static title card, narrated sequence, longer montage, or custom loop is `/general-video`.
+- An explicitly short motion graphic may use a URL, tweet, article, or screenshot as source material. A generic “make a video from this site” request is `/product-launch-video`.
+- Existing footage with captions routes to `/embedded-captions`; footage with designed information cards routes to `/talking-head-recut`. Retiming, reordering, recoloring, reframing, or remixing footage is a custom edit and falls through to `/general-video`.
+- A music file selects `/music-to-video` only when its beat grid drives the piece. Music used as a bed does not override the subject-matched route.
+- “I want a storyboard” changes the review process, not the workflow. With no other routing signal, use `/general-video`. A confirmed sketched board may itself be the requested deliverable; the review loop defines that stop point.
+- Specialized narrative workflows support up to about 3 minutes and are strongest around 30–90s. Route a clearly longer piece to `/general-video`. Length never overrides an explicit port, deck, caption, overlay, or music-driven deliverable.
+
+## 4. The intent layer — one conversation, before any workflow runs
+
+Fresh creation only — § 1's state table already decides whether this section runs at all (edits, project operations, briefed and resumable projects, and explicit Remotion ports never enter it). One conversation at the front door turns "make me a video" into a confirmed brief — the route, the must-have answers, the run's shape, and everything else in the user's head — handed to whichever workflow executes and made durable as `BRIEF.md` (shape: `../hyperframes-core/references/brief-format.md`). Workflows own execution; this layer owns understanding. Every workflow's opening rule points back here, so the questions are asked once no matter which door the user came through.
+
+These reads are mandatory when their condition matches; do not replace them with recollection, and read only the matching section when a reference is organized by workflow:
+
+| Condition                                                   | Read before acting                                         |
+| ----------------------------------------------------------- | ---------------------------------------------------------- |
+| A route is a candidate, before confirming it                | Its section in `references/workflow-catalog.md`            |
+| The route is known, before asking route-specific questions  | Its section in `references/route-briefs.md`                |
+| Triage judged the request unformed, before any concept work | `references/pitch-round.md`                                |
+| Offering optional capabilities or collecting supplied media | The route-filtered rows in `references/capability-menu.md` |
+| Deriving `flow`, `storyboard`, mode, or canonical fields    | `../hyperframes-core/references/brief-contract.md`         |
+
+**1 — Memory before questions.** Two reads, both mandatory, before anything is asked:
+
+- **Remembered defaults.** Let `<MEDIA_DIR>` be the installed `/media-use` skill directory. For an existing project, `<MEMORY_ROOT>` is its root. Before scaffolding, use a deliberately nonexistent probe path with no `.media`, such as `/tmp/hyperframes-intent-memory-<run-id>`; never use the current workspace. Run `node <MEDIA_DIR>/scripts/prefs.mjs get --hyperframes <MEMORY_ROOT> --json`. Make each remembered value the recommended option and name its source. The pre-project probe sees only the personal tier; do not claim project provenance.
+- **Recipes.** Run `node <MEDIA_DIR>/scripts/recipe.mjs list --hyperframes <MEMORY_ROOT> --json`. If the user names a recipe, says “like last time,” or a recipe matches the probable route, ask whether to adopt it before other brief questions — and make the offer earn the yes: say why it matches and what adopting saves (“this matches your launch-promo recipe — adopting fills destination, aspect, language, and the design spec; you'd confirm the message and the two run-shape questions”). When several match, list them and include “none.” An adopted recipe locks the fields it contains; ask only its missing fields and the run-shape questions. It does not remove review or render approval gates.
+
+**2 — Triage the input.** What is the video about — a website (sold or shown), a PR, a topic, a music track, existing footage? And is the request **formed** — the message, the material, and the occasion readable from what the user gave — or **unformed**, a subject with no take on it? Source material doesn't settle this by itself: a site, document, or PR carries its own thesis, but five tellings of that thesis are five different videos — a request whose only shape comes from its source ("make a video about this URL") is formed about the facts and unformed about the telling, and enters the round to pitch the telling. A formed request runs the layer exactly as it always has; nothing below is added for it. An unformed one goes through the pitch round after routing (step 4) and earns one question here, before anything is generated: what is the user already picturing? Their answer seeds the round (`references/pitch-round.md`). A user who says they don't know video at all gets that reference's decision map instead of a question sequence. For a genuinely exploratory request ("we need a video but I'm not sure what kind"), don't interrogate — establish the subject and what exists to show, one question at a time, then close by **recommending** a route plus how the run will review: a text storyboard first, on a live board, with optional wireframe sketches before the full build (`../hyperframes-core/references/review-loop.md`). The user hears the process before any workflow starts.
+
+**3 — Pick the route** (the route table and ambiguity rules in § 3), then open that route's entry in `references/route-briefs.md`. It lists the must-have questions to ask now, the **deferred asks** to announce, whether the two run-shape questions apply, and which fields the pitch round may answer.
+
+**4 — The pitch round** — unformed requests only; formed requests and recipe adoptions go straight to the must-haves. Sample five concepts along five genuinely different paths, at least two from the distribution's tail, and present them all before recommending one — pick, mix, and redirect are all answers. Each pitch names the capability or two it rides, in the plain language of `references/capability-menu.md` — the toolbox experienced as concepts, not listed as a menu. On an autonomous run the same gate runs internally, and the heads-up names the direction chosen and the typical one left behind. The procedure — the sampling gate, the presentation discipline, and the decision map for users new to video — is `references/pitch-round.md`. The chosen concept answers the route's pitch-eligible fields and lands in `BRIEF.md` under `## Intent`; the capabilities it named are confirmed with it, under `## Customizations`.
+
+**5 — The route's must-haves.** One question per field, recommended option first with its receipt (rules: `../hyperframes-core/references/brief-contract.md` § 3). Skip a question only when the request already answered it — inference is not an answer, but a chosen pitch is: fields the pitch round settled are locked with the pitch as their receipt. Then announce the route's deferred asks in one line ("after I probe the clip, I'll offer 2–3 caption identities") so the user hears the run's full shape before it starts.
+
+**6 — The two run-shape questions** — where the route's entry applies them, asked after the must-haves, each on its own:
+
+- **(a) Storyboard?** Review the plan, wireframe sketches, and the finished piece pass by pass on a live board (`../hyperframes-core/references/review-loop.md`) — recommended for anything beyond a couple of scenes — or skip the board and get one finished video from the confirmed brief.
+- **(b) Automation or companion?** **Automation** — the matched workflow's pipeline executes the brief end to end. **Companion** — build it together in `/general-video` with every HyperFrames capability on the table; the route's answers still describe the video, general-video executes them.
+
+These two are **orthogonal — never merge them into one menu.** All four `flow` × `storyboard` combinations are valid user choices (a companion run reviews on the live board too when `storyboard: yes`); a flattened three-option list ("storyboard review / one shot / companion") silently makes companion-with-storyboard unselectable. When a diagram or source material summarizes the outcomes as three branches, that is the derived behavior (`brief-contract.md` § 1), not the question shape. In a form-style question UI, keep (a) and (b) as two separate selects.
+
+Signals replace questions, never add them: an ongoing "just build it" / "surprise me" / "don't ask" locks `flow: automation, storyboard: no`, and every unanswered field becomes a decision with a receipt in the heads-up. A storyboard request, however phrased, locks `storyboard: yes`. Remembered `flow` / `storyboard` values reorder the recommendations — they never make either question disappear. The run's collaborative/autonomous execution mode derives from these two answers — the old first question is never asked; the canonical mapping is `../hyperframes-core/references/brief-contract.md` § 1.
+
+**7 — Nice-to-have: recommend, then show.** Skip this step when the selected route brief says to skip the front-door capability offer. Otherwise, once the must-haves are locked, send one offer, not an interrogation — recommendations first, catalog on request. Capabilities the chosen pitch already named are settled with the concept — this step recommends from what the pitch didn't cover, and after a pitch round it is often just the two open asks and the design ask:
+
+- **One or two rows** of `references/capability-menu.md` that this brief specifically calls for, each traced to something in the confirmed concept — a key number wants the count-up treatment, product shots want staging and a grade, a music bed means cuts on its grid. A suggestion that would fit any video fails that test; drop it. At most one may be a labeled **challenger**: higher ceiling, named cost (“the standard cut carries it; shader transitions would lift the close, at render-time cost”).
+- **Material answered on arrival.** When the user hands over a logo, a clip, or data, answer with its concrete use (“the logo could close the video as a sting — want that?”) rather than silently filing it.
+- **The two open asks stay:** anything here you want, and is there any material of your own (images, clips, logos, data) the video should carry?
+- **The design spec keeps its own three-state ask** — use an existing spec, pick a shipped preset by eye, or leave the decision to the workflow (`capability-menu.md` § The design ask).
+
+The full route-filtered slice appears only when the user asks what else is possible. An accepted recommendation is a confirmed answer: when it lands on a preference-backed field (a preset, a voice, a caption identity), it records like any other confirmation, and `/media-use`'s promotion rules make it the next run's recommended default. Capture answers verbatim in `BRIEF.md` under `## Assets`, `## Customizations`, or `## Notes`. One round; silence or “no” moves on.
+
+**8 — Hand off.** Three disciplines close the conversation (invariants: `../hyperframes-core/references/brief-contract.md` § 3):
+
+- **One integration check.** Read the combined answers for a consequence no single answer showed — vertical at 90 seconds with a chart-dense concept means charts a phone can't read — and surface it with a proposed adjustment now, not at the sketch pass.
+- **Stated and inferred, apart.** Present the locked brief as one summary — deferred asks and the run's shape included — with what the user answered and what was inferred or defaulted as two visibly separate groups, receipts on both. The inferred group is where corrections live; an autonomous heads-up is mostly that group.
+- **Revision is not confirmation.** When the user corrects the summary, fold the change in and present it again; never execute an edited-but-unconfirmed brief.
+
+Then enter the workflow (`flow: companion` → `/general-video`; otherwise the matched route), installing it first per § 5. The workflow's Setup writes `BRIEF.md` from this summary as its **first action after `hyperframes init`** (never before — `init` refuses a non-empty directory), using canonical frontmatter values and preserving the user's important wording in the body — the chosen pitch, when there is one, under `## Intent`. It then records the preference-backed fields (`../hyperframes-core/references/brief-format.md` names the subset), and asks no brief question again.
+
+## 5. Install and enter the workflow
+
+Before reading the selected workflow, install or refresh it and the core domain skills:
+
+```bash
+npx hyperframes skills update <workflow-name>
+```
+
+Use the bare name without `/`. If the command fails, surface the error; do not reconstruct the workflow from memory. Everything else about installation — the core-vs-lazy split, what `init` refreshes, diagnosis, CI opt-out, and the no-CLI fallback — lives in `references/skill-lifecycle.md`.
+
+## 6. Load domain skills on demand
+
+| Need                                                                                                                | Skill                    |
+| ------------------------------------------------------------------------------------------------------------------- | ------------------------ |
+| Composition structure, timing attributes, tracks, variables, determinism                                            | `/hyperframes-core`      |
+| Motion rules, scene blueprints, transitions, runtime adapters                                                       | `/hyperframes-animation` |
+| Seek-safe GSAP, CSS, Anime.js, WAAPI, FLIP, paths, masks, SVG, 3D keyframes, or `hyperframes keyframes` diagnostics | `/hyperframes-keyframes` |
+| Design specs, concept, palette, typography, narration, beat planning                                                | `/hyperframes-creative`  |
+| Images, icons, logos, audio, captions, grades, LUTs, reusable media                                                 | `/media-use`             |
+| Init, lint, check, snapshots, compare, batch render, Studio, render, publish, or diagnostics                        | `/hyperframes-cli`       |
+| Registry blocks and components                                                                                      | `/hyperframes-registry`  |
+| Figma assets, tokens, components, or storyboard frames as reconstructed motion                                      | `/figma`                 |
+
+Domain skills never take ownership of the end-to-end deliverable. Load only what the active workflow needs.
diff --git a/.claude/skills-media/hyperframes/references/capability-menu.md b/.claude/skills-media/hyperframes/references/capability-menu.md
new file mode 100644
index 000000000..87ac24f25
--- /dev/null
+++ b/.claude/skills-media/hyperframes/references/capability-menu.md
@@ -0,0 +1,47 @@
+# Capability menu — what HyperFrames can bring to a video
+
+One list, three readers. The **pitch round** (`pitch-round.md`) speaks it before anyone reads it as a menu: each pitch names the capability or two its concept rides, phrased from the middle column — the rows experienced inside concepts, which is how most users first learn what they're allowed to want. The **intent layer** (`/hyperframes` § 4, step 7) recommends from it — one or two rows the confirmed concept specifically calls for and the chosen pitch didn't already name, with the route-filtered slice shown when the user asks what else is possible. **`/general-video` in companion mode** uses the same list as its execution map — as its **trigger list**: each row's plain-language line is also the moment to offer it, when the conversation touches what the row does — and as each pass's **upgrade channel**: a plan, sketch, or build checkpoint may carry one or two traced offers pointed at material the user is looking at.
+
+**Borrowing rule.** Capabilities marked with a home workflow live in that workflow's skill directory, and workflow skills install lazily. Before reaching across, run `npx hyperframes skills update <that-workflow>` with the bare name. Resolve the installed skill directory, invoke its script by absolute path, and pass the project root explicitly when the script accepts one. Keep the working directory at the project root. Never assume a sibling-relative path such as `../media-use` or `../music-to-video`; the project may live anywhere.
+
+Each row's last column reads **home → entry → what you get**: the owning skill, the exact doc or command to start from, and the artifact that comes back.
+
+| Capability                                                                                                                                             | Say it to the user as…                                                                                          | Home → entry → what you get                                                                                                                                                                                                                                                                                                                     |
+| ------------------------------------------------------------------------------------------------------------------------------------------------------ | --------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| **Design spec (`frame.md`)** — one file that locks palette, type, and layout feel; every frame obeys it (the video-first sibling of a web `design.md`) | "a design system for the video — colors and typography stay consistent"                                         | `/hyperframes-creative` → `references/design-spec.md` (what a spec is + resolution order); presets: `frame-presets/<name>/` (always installed — browsing needs no borrow); applying machinery `build-frame.mjs` (home: `/faceless-explainer`, `/product-launch-video`) → `frame.md` at the project root. How to ask: **§ The design ask** below |
+| **Website capture** — headless-Chrome crawl of a real site: screenshots, brand tokens, assets                                                          | "I can capture your site and build from its real look"                                                          | CLI → `npx hyperframes capture <URL> -o ./capture` → `capture/` (screenshots, extracted tokens/text/assets); doctrine: `/product-launch-video`                                                                                                                                                                                                  |
+| **Beat analysis & audio-reactive motion** — a deterministic beat / energy map of a track; cuts land on the grid, elements pulse with the music         | "if there's music, I can cut the video to its beat — and make elements move with it"                            | grid: `/music-to-video` → `scripts/analyze-beatgrid.py` → `audiomap.json` (beats, energy, sections); element reaction: `/hyperframes-creative` → `references/audio-reactive.md` + `scripts/extract-audio-data.py`                                                                                                                               |
+| **Motion blueprints** — proven scene shapes (reveals, counters, charts, dioramas) picked per beat                                                      | "each scene gets a proven motion treatment, not improvised movement"                                            | `/hyperframes-animation` → `blueprints-index.md` + `rules-index.md` → per-beat `blueprint:` ids the build reads                                                                                                                                                                                                                                 |
+| **Voice, music, SFX, images, logos, color grades** — generated or resolved from the catalog, frozen into the project                                   | "narration in a voice you pick, background music, sound effects, brand logos — and a cinematic grade on images" | `/media-use` → `scripts/resolve.mjs` (one verb, incl. `--type grade`) + the audio engine `audio/scripts/audio.mjs` → frozen local files + `.media/manifest.jsonl` records / `audio_meta.json`                                                                                                                                                   |
+| **Generative video** — an AI presenter delivers the script; a still photo becomes a talking clip; a finished video gets dubbed into another language   | "an AI presenter can read your script on camera; I can animate a photo into a talking clip, or dub the video"   | `/media-use` → `references/operations.md` § Generate: video (`heygen video create` / `video-translate`; OAuth free allowance where eligible) → an mp4 clip adopted into `assets/` + manifest record                                                                                                                                             |
+| **Transcription & captions** — word-timed transcripts; styled caption skins on the finished video                                                      | "accurate captions, styled to match"                                                                            | `/media-use` → `scripts/transcribe.mjs` → word-timed transcript; caption machinery `captions.mjs` (home: `/faceless-explainer`) → the caption track                                                                                                                                                                                             |
+| **Cut footage by its transcript** — trim a clip by choosing sentences, not timecodes                                                                   | "I can trim your clip by picking the sentences to keep"                                                         | `/media-use` → `scripts/transcript-cut.mjs` → the trimmed clip + updated transcript                                                                                                                                                                                                                                                             |
+| **Designed overlays on user footage** — kinetic titles, lower-thirds, data callouts synced to what's said                                              | "your own clip can carry designed titles and info bars, timed to the speech"                                    | the **whole ask** = the `/talking-head-recut` route — route there, don't rebuild it; **one scene inside a bigger piece** = `/hyperframes-animation` lower-third / callout blueprints + `/talking-head-recut`'s safe-zone thinking → overlay comps on the footage track                                                                          |
+| **Real map scenes** — a genuine basemap with located pins, routes, or a flight path                                                                    | "for places and journeys — a real map, not a drawing of one"                                                    | `/motion-graphics` → `grounding/locate.mjs` (geocode) + `categories/maps/` (incl. `bake-basemap.mjs`) → a deterministic baked basemap + located pins                                                                                                                                                                                            |
+| **Figma import** — assets, brand tokens, components, storyboard frames read as motion states                                                           | "if the design lives in Figma, I can build from it directly"                                                    | `/figma` → REST/CLI import (+ MCP for Motion/shaders) → sanitized SVGs, `var()`-bound brand tokens, frames-as-states                                                                                                                                                                                                                            |
+| **Registry blocks** — 50+ installable scene compositions (data charts, device mockups, quote cards…)                                                   | "ready-made scenes we can drop in and restyle"                                                                  | `/hyperframes-registry` → `npx hyperframes add <block>` → an installed sub-composition (wiring: `references/wiring-blocks.md`)                                                                                                                                                                                                                  |
+| **Scene transitions** — cuts, crossfades, wipes, WebGL shader transitions between scenes                                                               | "how one scene hands off to the next — up to full shader wipes"                                                 | `/hyperframes-animation` → `transitions/overview.md` then `transitions/catalog.md`; assembly `transitions.mjs` (home: `/faceless-explainer`) → injected handoffs in the index                                                                                                                                                                   |
+| **User media on the timeline** — the user's own images / clips staged and woven into frames                                                            | "your own footage, screenshots, or photos placed into the video"                                                | staging `stage-assets.mjs` (home: `/music-to-video`, `/product-launch-video`); adoption: `/media-use` `--adopt` → files in `assets/` + manifest records                                                                                                                                                                                         |
+| **Publish to a stable link** — the finished piece on a public URL; re-publishing updates the same link                                                 | "when it's done I can publish it to a link you can share — updates keep the same URL"                           | `/hyperframes-cli` → `references/preview-render.md` (`npx hyperframes publish`) → a stable public URL                                                                                                                                                                                                                                           |
+
+Offer, don't unload: the intent layer recommends the one or two rows the confirmed concept itself calls for, states each as one plain-language line traced to the brief, and asks once — the route-filtered slice on request, the full table for the companion.
+
+## The design ask — have it, pick it, or leave it
+
+The design-spec row is a three-state question, not an explainer (what a spec **is** stays in `design-spec.md`):
+
+- **They have one.** Brand guidelines, a `frame.md`, a `design.md` — note the path in `BRIEF.md` § Assets; the workflow reads it as brand truth (resolution order: `/hyperframes-creative` → `references/design-spec.md`).
+- **They don't, but the look matters — show, don't name.** Pick 2–3 shipped presets whose look fits the content, tone, and audience (browse `/hyperframes-creative` → `frame-presets/`), and open each one's `frame-presets/<name>/frame-showcase.html` in the browser so the user picks **by eye**, never from a list of names. The choice lands in `BRIEF.md` as `style_preset` — a remembered preference key, so next run it's the recommended answer with a receipt. On a route that captures a real site, say the honest line as the showcases open: a showcase wears the preset's **own** palette, and the site's brand colors and fonts will be remixed onto whichever preset wins — **the pick is the layout bones, not the colors** — and offer the alternative of deferring the pick until after capture, when the look can be judged with the real brand in hand (a declared deferred ask; the sketch pass shows the remixed truth either way, before anything expensive is built).
+- **They don't care — or nothing shipped fits.** Don't care: no further questions; the workflow's design step decides and says why. Nothing fits: announce the **design picker** as a deferred ask — the workflow's design step generates mood boards contextual to their content to choose from (`/hyperframes-creative` → `references/design-picker.md`); it needs a project and a generation pass, so it never runs inside the intent conversation.
+
+## Genre lenses — the shipped workflows' taste, borrowable
+
+The narrative workflows carry genre-tuned design references — `story-design.md` (narrative archetypes and beats), `visual-design.md` (the genre's look), `motion-language.md` + `cut-catalog.md` (motion and cut doctrine). When a companion or freeform piece resembles a genre, read that workflow's lens before planning or building in it (borrowing rule above):
+
+| The piece resembles…                     | Borrow from                                                             |
+| ---------------------------------------- | ----------------------------------------------------------------------- |
+| a product promo / launch / site showcase | `/product-launch-video` → `references/`                                 |
+| a topic / mechanism / concept explainer  | `/faceless-explainer` → `references/`                                   |
+| a code-change walkthrough                | `/pr-to-video` → `references/` (+ `code-vocabulary.md` for code frames) |
+
+`motion-language.md` and `cut-catalog.md` are near-identical across the three — take them from the genre you already resembled, or `/faceless-explainer`'s as the neutral default. **Borrow the shape and the taste, never the machinery**: their scripts and directory rules belong to their pipelines; the generic back half of any build lives in `hyperframes-core/references/production-loop.md`.
diff --git a/.claude/skills-media/hyperframes/references/pitch-round.md b/.claude/skills-media/hyperframes/references/pitch-round.md
new file mode 100644
index 000000000..db8673bf9
--- /dev/null
+++ b/.claude/skills-media/hyperframes/references/pitch-round.md
@@ -0,0 +1,40 @@
+# Pitch round — the intent layer's divergent step
+
+Everything else in the intent layer converges: recommended options, receipts, one question per field. This step diverges. An unformed request has nothing to converge on — "make us a video about the launch" answers no creative field, and asking `message` as a form question hands the user the very blank they came to have filled. So before the form, pitch: five concepts, sampled wide, offered once.
+
+## When it runs
+
+Triage (`/hyperframes` § 4, step 2) marks the request formed or unformed; only unformed requests enter the round, and only on routes whose `route-briefs.md` entry names pitch-eligible fields. A recipe adoption skips the round — the bundle already carries an approved concept. An autonomous signal never skips it; it moves the round inside (§ The gate, alone).
+
+Before generating anything, ask what the user is already picturing. An existing idea seeds the round as a pitch of its own and is never displaced by generated ones; a fully formed picture ends the round before it starts — that picture is the concept, and the layer returns to its questions.
+
+## The sampling gate — internal, always
+
+Run this before writing any pitch, in every mode. None of it is shown to the user.
+
+First, four questions about this brief, answered specifically, not generically:
+
+1. **What does the subject look like?** Its own visual world — an island-travel piece has whitewashed walls and caldera cliffs; an outage postmortem has terminal green and a scarred timeline. The subject's vocabulary drives the layouts.
+2. **What does the target emotion look like as a frame?** Longing is empty space the viewer wants to fill; urgency is compression; awe is one element too large for the canvas.
+3. **What does the playback surface demand?** A lobby screen is ambient and glanced at; a feed fights for its first second; a story is vertical and fast.
+4. **What does every other video on this subject look like?** That is the anti-pattern. The tail pitches must not be it.
+
+Then five concepts, one from each path: the subject's world · the emotion · the audience (meet their expectation, or break it) · the anti-pattern, inverted · an unusual format (a letter, a countdown, a recipe, a front page, a map). Estimate for each the probability that a model handed this brief would produce it. The numbers are directional, not calibrated, and they exist to enforce one constraint: **at least two of the five must sit below 0.10.** If all five clear 0.10, every pitch is the median — start over. Then check silhouettes: sketch each concept's major elements as rough bounding boxes; two concepts with the same silhouette are one concept, so replace one.
+
+Probabilities never reach the user. They are a sampling constraint, not a scorecard.
+
+## Presenting the round
+
+Each pitch is three lines: the concept in one sentence, its visual world, its opening hook. The visual-world line carries the machinery: name the one or two capabilities the concept rides, in the plain language of `capability-menu.md`'s middle column — "the launch number counts up on the track's beat grid," never a feature name. This is how the toolbox reaches the user: experienced inside a concept they can want, not listed in a menu they can't evaluate. Machinery earns its mention the way a recommendation earns its place — a capability that would fit all five pitches is decoration; name it only where this concept leans on it.
+
+All five appear before any recommendation — a recommendation stated first anchors everything after it. Then recommend one, with a reason. Mixing is a first-class answer ("the framing of the second with the opening of the fourth"); silence or "you decide" accepts the recommendation. One round: the pitches are an offer, not a quiz, and there is no second batch unless the user asks for one.
+
+The chosen concept **is** the brief's creative core: it answers the route's pitch-eligible fields (typically `message` and `angle`), those questions are skipped downstream with the pitch as their receipt, and the concept lands in `BRIEF.md` under `## Intent` in the wording the user accepted. The capabilities the pitch named are confirmed with it — they land under `## Customizations` and are not re-offered later as if they were new.
+
+## The gate, alone — autonomous runs
+
+"Just build it" changes the audience, not the discipline. Walk the same gate — four questions, five concepts, tail constraint, silhouette check — pick the winner, and keep building. The heads-up then treats the pick like every other receipt-backed decision: name the direction chosen and why, the machinery it rides, and the most typical direction deliberately left behind. An autonomous run is where the median is most dangerous — no one is present to say "this looks like every other video," so the gate has to say it.
+
+## The decision map — "I don't know anything about video"
+
+A user who says they can't judge any of this gets neither pitches nor a question sequence. Give them a map of the two or three decision surfaces where their input genuinely changes the outcome — where it will play, how long it should run, what it should feel like — each with two to four plain-language options and a marked default. They choose only where they can tell the difference; every untouched surface keeps its default with a receipt. Then run the gate autonomous-style and present the winning concept inside the brief summary, where accepting the summary accepts the concept.
diff --git a/.claude/skills-media/hyperframes/references/route-briefs.md b/.claude/skills-media/hyperframes/references/route-briefs.md
new file mode 100644
index 000000000..101ffa238
--- /dev/null
+++ b/.claude/skills-media/hyperframes/references/route-briefs.md
@@ -0,0 +1,85 @@
+# Route briefs — what the intent layer asks, per route
+
+The adaptive half of the intent layer (`/hyperframes` § 4, steps 4–6): each route's entry names the **must-haves** to ask now, the **conditional** questions its input can add, the **deferred asks** to announce (questions that stay in the workflow because their recommendations need pipeline data — a probed clip, a captured site), and whether the two **run-shape questions** (storyboard? · automation or companion?) apply. An entry that names **pitch-eligible** fields sends an unformed request through the pitch round (`pitch-round.md`) after routing; the chosen concept answers those fields. An entry without that line never enters the round. These entries live here, in the router skill, because workflow skills install lazily — at routing time the matched workflow may not be on the machine yet.
+
+Field semantics and question rules: `hyperframes-core/references/brief-contract.md` § 2–3. Every question: recommended option first, receipt attached; a remembered value becomes the recommendation with its source named. The intro text of the brief always states **message** and **language** (state, don't ask).
+
+## `/faceless-explainer`
+
+- **Must-haves:** **angle** — concept / how-to / listicle / narrative, recommend the one the text's own shape suggests · **length** — inside the 30–90s sweet spot, scaled to how much the text actually teaches · **destination** — YouTube / embed → 16:9 · X / LinkedIn / Instagram feed → 1:1 · Shorts / TikTok → 9:16.
+- **Conditional:** a pasted script adds **`VO_MODE`** — use it verbatim, or restructure per scene?
+- **Pitch round:** `message` + `angle` — five tellings of the same topic are five different videos.
+- **Run-shape:** both.
+
+## `/product-launch-video`
+
+- **First, sell or show?** One question when the request doesn't say: market the product (a promo), or show the site as-is (a tour / showcase)? A show-it answer is **intent, not a different pipeline**: write it into `BRIEF.md` (`## Intent` / `## Customizations` — "feature the site's own captured screens as the video's assets") and the workflow's normal steps carry it — the captured screens become the featured `asset_candidates`.
+- **Must-haves:** **angle** — story shapes from the site's / brief's own positioning, recommend one with its basis · **length** — 30–90s sweet spot, scaled to the material · **destination** — as above.
+- **Conditional:** a show-it-as-is ask adds **what to show** — the whole site, or specific pages/sections (into `BRIEF.md`'s body); a pasted script/brief adds **`VO_MODE`** (verbatim or restructured?); a script that only names a site adds **capture?** — crawl it for brand + assets (default), or text-only / "don't scrape" (no-capture mode, a preset supplies the design system).
+- **Pitch round:** `message` + `angle`, after sell-or-show is settled — the pitches inherit that intent.
+- **Run-shape:** both.
+
+## `/pr-to-video`
+
+- **Must-haves:** the **PR reference** (URL, `owner/repo#N`, or "this PR") · **angle** — changelog / feature-reveal / fix-explainer / refactor-walkthrough, recommend the one the PR itself suggests · **audience** — developers (default) · mixed technical · non-technical stakeholders · **length** — from the size table below · **destination** — 16:9 is the default for a code explainer.
+- **Length comes from the PR's change size**, not a fixed guess — peek once, read-only (the workflow's Step 1 still does the full deterministic fetch):
+
+  ```bash
+  gh pr view <PR_REF> --json title,additions,deletions,changedFiles
+  ```
+
+  Pick the tier from `additions + deletions` (nudged up by `changedFiles`) and lead with it (hard cap ~3 min):
+
+  | PR change size                    | Recommended length |
+  | --------------------------------- | ------------------ |
+  | trivial (≲ 50 lines changed)      | ~20–40s            |
+  | focused (~50–200 lines)           | ~40–70s            |
+  | substantial (~200–600 lines)      | ~70–110s           |
+  | large (≳ 600 lines, or 25+ files) | ~110–180s          |
+
+  State the basis in one phrase ("~40s — small change, +44/−13 across 12 files"). The tier is a **ceiling** on how much story the diff can support, never a floor to fill: a one-headline story recommends inside 30–90s regardless of tier (the tier's range may still appear as a non-recommended fuller-walkthrough option).
+
+- **Pitch round:** `angle` and the opening hook — the diff fixes the facts, not the telling.
+- **Run-shape:** both.
+
+## `/general-video`
+
+- **Open-ended requests only:** first derive a one-sentence `message`. Ask `audience` only when it is unclear and would change the story or terminology. Ask `destination` only when it would change aspect or composition. Ask for a priority only when the brief contains a real trade-off. Default to one best version; ask about variations only when the user requests options or comparison.
+- **Specific requests:** a complete ask such as “a static title card with our logo for a website hero” needs no discovery questions.
+- **Pitch round:** `message` — the unformed open-ended request is this round's home case.
+- **Run-shape:** both questions apply. `/general-video` is also the companion host, so `flow: companion` stays on this route with the full toolbox.
+
+## `/music-to-video`
+
+- **Must-haves:** the **music source** — a track file, a video to pull audio from, or generate one from a mood description · **destination → aspect**.
+- **Deferred (announce):** brand (font + palette) and the genre feel are chosen at its Step 3 by design — they emerge from the track's analysis, not from a question up front.
+- **Pitch round:** `message` — the visual concept riding the beat grid (lyric treatment, montage story, kinetic type); brand and genre feel still land at Step 3.
+- **Run-shape:** both.
+
+## `/motion-graphics`
+
+- Autonomous by design: at most **one** clarifying question, owned by its director step, in the flow. No must-haves here beyond confirming the input; route directly.
+- **Run-shape:** neither — the piece is seconds long; a board and a companion session have nothing to add.
+- **Front-door capability offer:** skip it. The director's one-question limit is authoritative.
+
+## `/slideshow`
+
+- The one question is the routing confirmation itself — "do you want this as a HyperFrames slideshow?" — asked during triage (it survives every mode: wrong routing is a quality problem). The deck contract owns everything after.
+- **Run-shape:** neither — the deliverable is a navigable deck, not a rendered video.
+- **Front-door capability offer:** skip it. After route confirmation, the deck workflow owns all remaining choices.
+
+## `/embedded-captions`
+
+- **Must-haves:** which clip (the input file).
+- **Deferred (announce):** the caption **identity** pick — its Step 0 probes the clip first, then shortlists 2–3 identities from the catalog and recommends one. Say that's coming.
+- **Run-shape:** neither — the footage is untouched; there is no storyboard to review.
+
+## `/talking-head-recut`
+
+- **Must-haves:** which clip (the input file).
+- **Deferred (announce):** its render-strategy questions — aspect ratio, layout, style group, card count — stay at its Step 7, where the recommendations come from the probed footage and transcript. Say they're coming.
+- **Run-shape:** neither.
+
+## `/remotion-to-hyperframes`
+
+- Not served by the intent layer — a migration with no brief. Route directly.
diff --git a/.claude/skills-media/hyperframes/references/skill-lifecycle.md b/.claude/skills-media/hyperframes/references/skill-lifecycle.md
new file mode 100644
index 000000000..cf5c79d05
--- /dev/null
+++ b/.claude/skills-media/hyperframes/references/skill-lifecycle.md
@@ -0,0 +1,33 @@
+# Skill installation and freshness
+
+Read this reference when installing or updating skills, diagnosing unexpected workflow behavior, or running HyperFrames setup in CI.
+
+HyperFrames installs the core set eagerly and workflow skills lazily.
+
+- **Core set:** `/hyperframes`, the `hyperframes-*` domain skills, and `/media-use`.
+- **Workflow skills:** installed when routing selects them through `npx hyperframes skills update <workflow-name>`.
+
+## What `init` does
+
+`npx hyperframes init` checks GitHub and refreshes the core set plus other skills already installed. It does not install workflows that have never been used. 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`.
+
+## Diagnose and update
+
+```bash
+npx hyperframes skills check
+npx hyperframes skills check --json
+npx hyperframes skills update
+npx hyperframes skills update <workflow-name>
+npx hyperframes skills
+```
+
+- `skills check` exits non-zero when an installed skill is stale or the core set is incomplete. Workflows available on demand but not installed are not failures.
+- Bare `skills update` refreshes the core set and everything already installed, prunes unpublished skills, and does not expand the workflow set.
+- Named `skills update <name...>` also installs those named workflows or domain skills.
+- Bare `skills` installs the full published set explicitly.
+
+If the HyperFrames CLI is unavailable, use `npx skills add heygen-com/hyperframes --skill <workflow-name>` for one workflow 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 workflow contract.
diff --git a/.claude/skills-media/hyperframes/references/workflow-catalog.md b/.claude/skills-media/hyperframes/references/workflow-catalog.md
new file mode 100644
index 000000000..f511d2bcd
--- /dev/null
+++ b/.claude/skills-media/hyperframes/references/workflow-catalog.md
@@ -0,0 +1,70 @@
+# Workflow catalog
+
+Use this catalog while routing, before the selected workflow is lazy-installed. After the routing table in `../SKILL.md` yields a candidate, read that candidate's section and confirm that its input and output match the request.
+
+## Sections
+
+- [`/product-launch-video`](#product-launch-video), [`/faceless-explainer`](#faceless-explainer), [`/pr-to-video`](#pr-to-video)
+- [`/embedded-captions`](#embedded-captions), [`/talking-head-recut`](#talking-head-recut)
+- [`/motion-graphics`](#motion-graphics), [`/music-to-video`](#music-to-video), [`/slideshow`](#slideshow)
+- [`/general-video`](#general-video), [`/remotion-to-hyperframes`](#remotion-to-hyperframes)
+
+## `/product-launch-video`
+
+- **Input:** A website URL; a script or brief that names a site; or a product-launch script with no derivable site or an explicit “do not scrape” instruction. Capture website assets and brand tokens unless the brief selects no-capture mode. Ask whether supplied script copy is verbatim voice-over or may be restructured.
+- **Output:** A product promo, launch video, site tour, or showcase MP4. Sweet spot 30–90s; hard cap about 3 minutes. A show-it-as-is brief features captured screens rather than inventing a separate route.
+- **Triggers:** “launch video for X”, “promo for our site”, “turn this script into a 60s promo”, “text-only launch video”, “turn this website into a video”, “site tour from this URL”.
+
+## `/faceless-explainer`
+
+- **Input:** A topic, article, notes, or arbitrary text being explained, with no product being marketed and no website to capture.
+- **Output:** A faceless explainer MP4 with invented typography, abstract graphics, diagrams, or data visualization. Sweet spot 30–90s; hard cap about 3 minutes.
+- **Triggers:** “faceless explainer about X”, “explain how DNS works as a video”, “turn this article into an explainer”.
+
+## `/pr-to-video`
+
+- **Input:** A GitHub PR URL, `owner/repo#N`, or “this PR”, read through `gh`; it is not a website capture request.
+- **Output:** A changelog, feature reveal, fix explainer, or refactor walkthrough with diff, before/after, file-tree, and impact scenes. Hard cap about 3 minutes; duration follows change size.
+- **Triggers:** “make a video about this PR”, “turn PR #1187 into a changelog video”, “release-notes video from this pull request”.
+
+## `/embedded-captions`
+
+- **Input:** Existing talking-head footage to caption. It is an actual media file, not a URL or creative brief.
+- **Output:** The same footage, untouched, with a caption layer and selected caption identity. The subject may occlude embedded captions. Any length.
+- **Triggers:** “add captions”, “add subtitles”, “captions behind the subject”, “cinematic captions for my clip”.
+
+## `/talking-head-recut`
+
+- **Input:** Existing talking-head, interview, or podcast footage to package. The underlying clip plays unchanged.
+- **Output:** The same footage with transcript-synced graphic-overlay cards: kinetic titles, lower-thirds, data callouts, pull-quotes, side panels, or picture-in-picture. Any length.
+- **Triggers:** “package this video”, “add graphic overlays to my talk”, “add lower-thirds or data callouts to this interview”.
+
+## `/motion-graphics`
+
+- **Input:** A short design-led unit, typically under 10s, with no narration, where motion is the message: kinetic type, stat/count-up, chart hit, logo sting, animated title, lower-third, map, tweet/headline/page highlight, or asset-fusion shot.
+- **Output:** A short MP4 or transparent alpha WebM/MOV overlay.
+- **Triggers:** “an 8s logo sting”, “animate this stat”, “kinetic-type intro”, “animate this title”, “transparent lower-third overlay”.
+
+## `/music-to-video`
+
+- **Input:** A music track, or a video whose audio becomes the track, with no narration or website capture. User images or videos are optional.
+- **Output:** A beat-synced MP4 driven by a deterministic beat/energy map (`audiomap.json`). It may become a lyric video, slideshow, visualizer, or kinetic promo without changing pipelines.
+- **Triggers:** “make a video for this song”, “beat-synced video”, “lyric video”, “music visualizer”, “kinetic promo to this beat”.
+
+## `/slideshow`
+
+- **Input:** A brief, outline, or existing page to author as a presentation, pitch deck, or interactive deck. If “slides”, “deck”, or “convert this page” is ambiguous, confirm that the user wants a HyperFrames slideshow before authoring.
+- **Output:** A runnable HyperFrames composition plus the JSON island used by `SlideshowController`: discrete slides, fragment reveals, branching, hotspots, presenter mode, and speaker notes. The deliverable is a navigable deck, not an MP4.
+- **Triggers:** “make a pitch deck”, “interactive presentation”, “convert this page into slides”, “slideshow with presenter mode”.
+
+## `/general-video`
+
+- **Input:** Any custom creation or edit not covered above: a static title card, longer brand or sizzle reel, multi-scene montage, static loop/poster, NLE-like footage remix, or freeform composition. It also executes every `flow: companion` brief.
+- **Output:** A HyperFrames composition of any length or format through design → plan → static layout → animation → check → approval → render.
+- **Triggers:** “make a static title card”, “longer brand reel”, “multi-scene composition”, “static loop”, “custom video”, or any unmatched video request.
+
+## `/remotion-to-hyperframes`
+
+- **Input:** Existing Remotion React source, only when the user explicitly asks to port, convert, or migrate it. A passing Remotion mention is not a trigger.
+- **Output:** A HyperFrames HTML composition translated from the source and compared with the Remotion render through the migration evaluation harness.
+- **Triggers:** “port my Remotion project”, “convert this Remotion composition”, “migrate from Remotion”.
diff --git a/.claude/skills-media/media-use/.gitignore b/.claude/skills-media/media-use/.gitignore
new file mode 100644
index 000000000..17df1e2db
--- /dev/null
+++ b/.claude/skills-media/media-use/.gitignore
@@ -0,0 +1 @@
+eval-report.html
diff --git a/.claude/skills-media/media-use/SKILL.md b/.claude/skills-media/media-use/SKILL.md
new file mode 100644
index 000000000..be871332d
--- /dev/null
+++ b/.claude/skills-media/media-use/SKILL.md
@@ -0,0 +1,455 @@
+---
+name: media-use
+description: Agent Media OS, the single skill for every media need in a HyperFrames project. Resolve BGM, SFX, image, icon, brand logo, voice, color grade, or LUT into a frozen local file or paste-ready block + ledger record (one verb, `resolve`); generate via TTS / music / image models when the catalog misses; produce voiceover, transcription, captions, and background removal through one shared audio engine; operate on media (cut / reframe / transform); and reuse assets across projects. Keeps search noise on disk, hands the agent one path or block. Use for any audio, image, icon, logo, voiceover, caption, color-grading, or media-asset need.
+---
+
+# media-use
+
+The media OS for HyperFrames: resolve · generate · operate · remember, every media type, one skill, zero context noise.
+
+## Setup — install heygen first (free-usage path)
+
+```bash
+curl -fsSL https://static.heygen.ai/cli/install.sh | 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/sfx/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
+node <SKILL_DIR>/scripts/resolve.mjs --doctor
+```
+
+## What it owns (the gaps HyperFrames leaves)
+
+HyperFrames owns media _playback_; media-use owns everything else. Each row is enforced by `scripts/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` (svgl → simple-icons → 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`)                                                                                                                                                                                                                          |
+| No color-grade authoring                   | `resolve --type grade` emits a paste-ready `data-color-grading` block; `resolve --type lut` freezes validated `.cube` files                                                                                                                                                         |
+| No image generation                        | RAM-graded local mflux (FLUX) via `scripts/lib/mflux-provider.mjs`, codex `image_gen` upsell (`scripts/lib/codex-provider.mjs`)                                                                                                                                                     |
+| No video generation                        | `resolve --type video` — HeyGen avatar video first (free-usage path, sign-in nudge on auth failure), local LTX fallback (`videogen` in `scripts/lib/local-models.mjs`); 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 (`scripts/lib/local-run.mjs`)                                                                                                                                                      |
+
+## When to use
+
+Call `resolve` whenever a composition needs media: background music, sound effects, images, icons, brand logos, voice, a color grade, or a LUT. For voiceover / TTS, music, SFX, and caption timing, use the **audio engine** (below); background removal is delegated to the `hyperframes` CLI; 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`). For cutting / reframing / transforming existing media, see `references/operations.md`. media-use searches the HeyGen catalog first for media files, resolves official logos through the logo cascade, uses local deterministic color grading for `grade`/`lut`, freezes the best match locally when a file is needed, registers it in a manifest, and hands the agent one line; all search noise stays on disk.
+
+## Be proactive — run a media opportunity pass
+
+The human usually can't tell which media would lift the piece. You can. When you build or review a composition, do **one** grounded scan and then **ask once** — don't silently add, and don't nag per asset.
+
+Surface an opportunity only when a concrete signal is present:
+
+| Signal detected                                        | Offer                                                                                       |
+| ------------------------------------------------------ | ------------------------------------------------------------------------------------------- |
+| On-screen text / a script with no voiceover            | TTS voiceover (audio engine)                                                                |
+| Emoji or a `<div>` styled as an icon                   | resolve real `icon`s                                                                        |
+| Image that is a placeholder, tiny, or upscaled-looking | a better `image` (and/or upscale — see `references/operations.md`)                          |
+| Hard scene cuts / transitions with no sound            | transition `sfx`                                                                            |
+| A piece over ~10s with no music bed                    | `bgm`                                                                                       |
+| Footage that reads under/over-exposed or color-cast    | a corrective `grade` (analyze with `grade --for`, preview with `hyperframes grade-compare`) |
+
+Rules that keep this a help, not nagware:
+
+- **Grounded, not generic.** No signal → no suggestion. Never open with "want better images?".
+- **Opinionated + concrete.** Propose the specific fix ("add a VO from your script, swap 3 emoji for real icons, replace the 400×400 hero, whooshes on the 4 cuts"), with defaults chosen — the human just approves **all / some / none**.
+- **Once per project.** One consolidated ask, top few highest-value items. Respect "leave it" and don't re-raise.
+- **Surface, never silently mutate.** Color grades especially: propose and preview, never auto-apply — a gray-world "correction" ruins an intentional sunset or neon look.
+
+## Resolve
+
+```bash
+node <SKILL_DIR>/scripts/resolve.mjs --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                    | Bundled 19-file library + HeyGen catalog                     |
+| `image` | Photos, backgrounds              | HeyGen asset search (75k+ vectors)                           |
+| `icon`  | Icons, symbols                   | HeyGen asset search (type=icon)                              |
+| `logo`  | Official brand marks             | svgl → simple-icons → 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
+node <SKILL_DIR>/scripts/resolve.mjs --type bgm --intent "upbeat tech launch" --project .
+# → resolved bgm_001 → .media/audio/bgm/bgm_001.mp3 (bgm, 25s)
+
+# Sound effect
+node <SKILL_DIR>/scripts/resolve.mjs --type sfx --intent "whoosh" --project .
+# → resolved sfx_001 → .media/audio/sfx/sfx_001.mp3 (sfx, 0.57s)
+
+# Image
+node <SKILL_DIR>/scripts/resolve.mjs --type image --intent "gradient tech background" --project .
+# → resolved image_001 → .media/images/image_001.jpg (image)
+
+# Icon
+node <SKILL_DIR>/scripts/resolve.mjs --type icon --intent "rocket" --project .
+# → resolved icon_001 → .media/images/icon_001.png (icon, transparent)
+
+# Brand logo (official mark — never redrawn by hand)
+node <SKILL_DIR>/scripts/resolve.mjs --type logo --entity linkedin --intent "LinkedIn logo" --project .
+# → resolved logo_001 → .media/images/logo_001.svg (logo, official mark)
+
+# Color grade block
+node <SKILL_DIR>/scripts/resolve.mjs --type grade --intent "warm daylight" --project . --json
+# → {"ok":true,"preset":"warm-daylight","grading":{"preset":"warm-daylight","intensity":1},...}
+
+# LUT file
+node <SKILL_DIR>/scripts/resolve.mjs --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
+node <SKILL_DIR>/scripts/resolve.mjs --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.
+
+## Color grading
+
+Use `grade` when you need the actual HyperFrames `data-color-grading` value to paste onto an `<img>` or `<video>`. Core presets and params-backed library looks resolve locally; future CDN-backed library looks require network unless already frozen:
+
+**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, or `cube-validate.mjs` for a one-line `{ok,size}` check. Read `.media/index.md` or `luts/index.json` for the description. Never read the LUT body itself.
+
+```bash
+node <SKILL_DIR>/scripts/resolve.mjs --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
+}
+```
+
+Paste it as an attribute value after JSON string escaping:
+
+```html
+<video
+  class="clip"
+  src="./media/scene.mp4"
+  data-color-grading='{"preset":"warm-daylight","intensity":1}'
+></video>
+```
+
+Looks beyond the preset vocabulary freeze a validated `.cube` under `.media/luts/` and return a block that references it:
+
+```bash
+node <SKILL_DIR>/scripts/resolve.mjs --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
+node <SKILL_DIR>/scripts/resolve.mjs --type lut --intent "teal orange blockbuster" --project .
+```
+
+For a describable technical look, author an explicit parametric LUT with `--params`:
+
+```bash
+node <SKILL_DIR>/scripts/resolve.mjs --type lut --params '{"contrast":0.2,"temperature":-0.3}' --project .
+node <SKILL_DIR>/scripts/resolve.mjs --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
+node <SKILL_DIR>/scripts/resolve.mjs --type lut --from custom.cube --project .
+```
+
+Parametric math (`buildCube`) cannot reproduce real film stocks or emulsion looks. Use a CDN-backed scanned `.cube` entry or ingest a real scanned `.cube` for those.
+
+For visual selection, list reusable looks 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.
+
+Smart grade is `grade --for <media>`. It runs local `ffmpeg`/`ffprobe` signalstats, merges a bounded `adjust` suggestion into the returned block, and prints the measured evidence to stderr. Stdout remains valid JSON under `--json`; the suggestion is a starting point for the agent to tune, not an automatic neutralization of intentional color.
+
+```bash
+node <SKILL_DIR>/scripts/resolve.mjs --type grade --intent "warm cinematic" --for ./frame.png --project . --json
+```
+
+Library looks 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
+node skills/media-use/scripts/resolve.mjs --type lut --intent "teal orange blockbuster" --project . --json
+node skills/media-use/scripts/lib/cube-validate.mjs .media/luts/lut_001.cube
+```
+
+## 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. 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 (`describeModelLadder`); the agent can
+see the ladder and override.
+
+| Type      | Provider / path                                                                                                                                                               |
+| --------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| bgm/sfx   | heygen catalog free-usage path                                                                                                                                                |
+| 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      | svgl, then simple-icons, 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.
+
+## 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.
+
+## Adopt existing projects
+
+Most HyperFrames projects already have assets in `assets/`. media-use adopts them:
+
+```bash
+node <SKILL_DIR>/scripts/resolve.mjs --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.
+
+## 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 faceless-explainer
+```
+
+Only what the user actually confirmed gets recorded — never an inferred or defaulted value. How workflows consume these (a remembered value becomes the recommended default with a receipt, and never skips a question) is the brief contract's rule: `hyperframes-core/references/brief-contract.md` § 2, Remembered defaults.
+
+## 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 product-launch-video
+node <SKILL_DIR>/scripts/recipe.mjs use --hyperframes . --name weekly-promo   # also: resolve.mjs --type recipe --entity weekly-promo
+```
+
+The freeze is offered once after the final approval (`hyperframes-core/references/review-loop.md` § 4), and the intent layer (`/hyperframes` § 4) checks for a match before its first question. 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.
+
+## 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
+node <SKILL_DIR>/scripts/resolve.mjs --stats --project . --days 7
+# media-use stats
+# total resolves: 12
+# misses: 2
+# hit rate: 86%
+```
+
+## Files
+
+- `.media/manifest.jsonl`: machine SSOT, one JSON record per line
+- `.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`
+
+## 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?, lang?, speed?, lines: [{ id, text, 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`.
+- **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/SFX retrieval. Local/provider-specific generators are explicit alternatives where installed; run `node <SKILL_DIR>/scripts/resolve.mjs --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/`).
+
+## Operating on media (cut, reframe, transform)
+
+media-use resolves + remembers; for **operating** on assets see
+`references/operations.md`: local-tool recipes (ffmpeg trim/reframe/montage,
+auto-editor, scenedetect) and the local-vs-HeyGen transform table (background
+removal, upscale, lipsync, translate). Run the tool, then register the output
+with `resolve --from <output> --type <type>` so it joins the ledger + global
+cache.
+
+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).
+
+## 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/sfx/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/sfx/image/icon) + TTS (voice) + avatar video — the free-usage path | `curl -fsSL https://static.heygen.ai/cli/install.sh \| bash` 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)                                         | `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), whisper.cpp (transcribe fallback), remove-background        | via the hyperframes CLI; whisper.cpp is built on first use (Homebrew on macOS, else git+cmake), models download from HuggingFace |
+
+The RAM-graded local-model shortlist + exact per-tier install/invoke lives in
+`scripts/lib/local-models.mjs` (the agent can read `describeModelLadder(cap, specs)`
+to see which model fits this machine). 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. Every media-use call that shells `heygen` — catalog search AND every
+generating call (TTS, avatar video) — tags requests with the allowlisted
+`X-HeyGen-Client-Source: media-use` header (v0.3.0+), sourced from one shared
+constant (`HEYGEN_CLIENT_SOURCE_ARGV` in `scripts/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.
+
+## 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.
+
+## 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/media-use/audio/assets/sfx/CREDITS.md b/.claude/skills-media/media-use/audio/assets/sfx/CREDITS.md
new file mode 100644
index 000000000..750d6e839
--- /dev/null
+++ b/.claude/skills-media/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/media-use/audio/assets/sfx/chime.mp3 b/.claude/skills-media/media-use/audio/assets/sfx/chime.mp3
new file mode 100644
index 000000000..12da953a3
Binary files /dev/null and b/.claude/skills-media/media-use/audio/assets/sfx/chime.mp3 differ
diff --git a/.claude/skills-media/media-use/audio/assets/sfx/click-soft.mp3 b/.claude/skills-media/media-use/audio/assets/sfx/click-soft.mp3
new file mode 100644
index 000000000..2706b1d2e
Binary files /dev/null and b/.claude/skills-media/media-use/audio/assets/sfx/click-soft.mp3 differ
diff --git a/.claude/skills-media/media-use/audio/assets/sfx/click.mp3 b/.claude/skills-media/media-use/audio/assets/sfx/click.mp3
new file mode 100644
index 000000000..2706b1d2e
Binary files /dev/null and b/.claude/skills-media/media-use/audio/assets/sfx/click.mp3 differ
diff --git a/.claude/skills-media/media-use/audio/assets/sfx/error.mp3 b/.claude/skills-media/media-use/audio/assets/sfx/error.mp3
new file mode 100644
index 000000000..6b4487ff4
Binary files /dev/null and b/.claude/skills-media/media-use/audio/assets/sfx/error.mp3 differ
diff --git a/.claude/skills-media/media-use/audio/assets/sfx/glitch-1.mp3 b/.claude/skills-media/media-use/audio/assets/sfx/glitch-1.mp3
new file mode 100644
index 000000000..124f45019
Binary files /dev/null and b/.claude/skills-media/media-use/audio/assets/sfx/glitch-1.mp3 differ
diff --git a/.claude/skills-media/media-use/audio/assets/sfx/glitch-2.mp3 b/.claude/skills-media/media-use/audio/assets/sfx/glitch-2.mp3
new file mode 100644
index 000000000..580b6fdc4
Binary files /dev/null and b/.claude/skills-media/media-use/audio/assets/sfx/glitch-2.mp3 differ
diff --git a/.claude/skills-media/media-use/audio/assets/sfx/glitch-3.mp3 b/.claude/skills-media/media-use/audio/assets/sfx/glitch-3.mp3
new file mode 100644
index 000000000..5a8adc244
Binary files /dev/null and b/.claude/skills-media/media-use/audio/assets/sfx/glitch-3.mp3 differ
diff --git a/.claude/skills-media/media-use/audio/assets/sfx/impact-bass-1.mp3 b/.claude/skills-media/media-use/audio/assets/sfx/impact-bass-1.mp3
new file mode 100644
index 000000000..ecfe0c48a
Binary files /dev/null and b/.claude/skills-media/media-use/audio/assets/sfx/impact-bass-1.mp3 differ
diff --git a/.claude/skills-media/media-use/audio/assets/sfx/impact-bass-2.mp3 b/.claude/skills-media/media-use/audio/assets/sfx/impact-bass-2.mp3
new file mode 100644
index 000000000..4ae448b58
Binary files /dev/null and b/.claude/skills-media/media-use/audio/assets/sfx/impact-bass-2.mp3 differ
diff --git a/.claude/skills-media/media-use/audio/assets/sfx/key-press.mp3 b/.claude/skills-media/media-use/audio/assets/sfx/key-press.mp3
new file mode 100644
index 000000000..d669006e0
Binary files /dev/null and b/.claude/skills-media/media-use/audio/assets/sfx/key-press.mp3 differ
diff --git a/.claude/skills-media/media-use/audio/assets/sfx/manifest.json b/.claude/skills-media/media-use/audio/assets/sfx/manifest.json
new file mode 100644
index 000000000..7db0ad7ca
--- /dev/null
+++ b/.claude/skills-media/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/media-use/audio/assets/sfx/notification.mp3 b/.claude/skills-media/media-use/audio/assets/sfx/notification.mp3
new file mode 100644
index 000000000..d3f0d1fa2
Binary files /dev/null and b/.claude/skills-media/media-use/audio/assets/sfx/notification.mp3 differ
diff --git a/.claude/skills-media/media-use/audio/assets/sfx/ping.mp3 b/.claude/skills-media/media-use/audio/assets/sfx/ping.mp3
new file mode 100644
index 000000000..99808c8b6
Binary files /dev/null and b/.claude/skills-media/media-use/audio/assets/sfx/ping.mp3 differ
diff --git a/.claude/skills-media/media-use/audio/assets/sfx/pop.mp3 b/.claude/skills-media/media-use/audio/assets/sfx/pop.mp3
new file mode 100644
index 000000000..e3ed16fef
Binary files /dev/null and b/.claude/skills-media/media-use/audio/assets/sfx/pop.mp3 differ
diff --git a/.claude/skills-media/media-use/audio/assets/sfx/riser.mp3 b/.claude/skills-media/media-use/audio/assets/sfx/riser.mp3
new file mode 100644
index 000000000..0cea32c08
Binary files /dev/null and b/.claude/skills-media/media-use/audio/assets/sfx/riser.mp3 differ
diff --git a/.claude/skills-media/media-use/audio/assets/sfx/sparkle.mp3 b/.claude/skills-media/media-use/audio/assets/sfx/sparkle.mp3
new file mode 100644
index 000000000..dae37802f
Binary files /dev/null and b/.claude/skills-media/media-use/audio/assets/sfx/sparkle.mp3 differ
diff --git a/.claude/skills-media/media-use/audio/assets/sfx/typing.mp3 b/.claude/skills-media/media-use/audio/assets/sfx/typing.mp3
new file mode 100644
index 000000000..ff69cc042
Binary files /dev/null and b/.claude/skills-media/media-use/audio/assets/sfx/typing.mp3 differ
diff --git a/.claude/skills-media/media-use/audio/assets/sfx/whoosh-cinematic.mp3 b/.claude/skills-media/media-use/audio/assets/sfx/whoosh-cinematic.mp3
new file mode 100644
index 000000000..93b721800
Binary files /dev/null and b/.claude/skills-media/media-use/audio/assets/sfx/whoosh-cinematic.mp3 differ
diff --git a/.claude/skills-media/media-use/audio/assets/sfx/whoosh-short.mp3 b/.claude/skills-media/media-use/audio/assets/sfx/whoosh-short.mp3
new file mode 100644
index 000000000..e23e513d2
Binary files /dev/null and b/.claude/skills-media/media-use/audio/assets/sfx/whoosh-short.mp3 differ
diff --git a/.claude/skills-media/media-use/audio/assets/sfx/whoosh.mp3 b/.claude/skills-media/media-use/audio/assets/sfx/whoosh.mp3
new file mode 100644
index 000000000..e23e513d2
Binary files /dev/null and b/.claude/skills-media/media-use/audio/assets/sfx/whoosh.mp3 differ
diff --git a/.claude/skills-media/media-use/audio/references/bgm.md b/.claude/skills-media/media-use/audio/references/bgm.md
new file mode 100644
index 000000000..e4e542ed4
--- /dev/null
+++ b/.claude/skills-media/media-use/audio/references/bgm.md
@@ -0,0 +1,72 @@
+# 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, e.g. product-launch, 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.
+
+## 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.
+
+## 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/media-use/audio/references/captions/authoring.md b/.claude/skills-media/media-use/audio/references/captions/authoring.md
new file mode 100644
index 000000000..65687f680
--- /dev/null
+++ b/.claude/skills-media/media-use/audio/references/captions/authoring.md
@@ -0,0 +1,159 @@
+# Captions
+
+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), see `hyperframes-animation/rules/css-marker-patterns.md`.
+
+## 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.
+- `hyperframes-animation/rules/css-marker-patterns.md` — marker highlighting (deterministic, fully seekable).
+
+## 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/media-use/audio/references/captions/motion.md b/.claude/skills-media/media-use/audio/references/captions/motion.md
new file mode 100644
index 000000000..d39be28dc
--- /dev/null
+++ b/.claude/skills-media/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. See `hyperframes-animation/rules/css-marker-patterns.md` for implementation details. 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 skills/hyperframes-creative/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-animation/adapters/gsap.md` (eases, position parameter, performance)
+- **`window.__hyperframes.fitTextFontSize` / `pretext`** — `hyperframes-core/references/determinism-rules.md` → Layout Contract (overflow prevention, per-frame text measurement)
+- **Audio data extraction** — generate via `python3 skills/hyperframes-creative/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/media-use/audio/references/captions/transcript-handling.md b/.claude/skills-media/media-use/audio/references/captions/transcript-handling.md
new file mode 100644
index 000000000..3a87d6410
--- /dev/null
+++ b/.claude/skills-media/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/media-use/audio/references/remove-background.md b/.claude/skills-media/media-use/audio/references/remove-background.md
new file mode 100644
index 000000000..eff9fd551
--- /dev/null
+++ b/.claude/skills-media/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` (MIT).
+
+```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/media-use/audio/references/requirements.md b/.claude/skills-media/media-use/audio/references/requirements.md
new file mode 100644
index 000000000..8c5793464
--- /dev/null
+++ b/.claude/skills-media/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/SFX 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/media-use/audio/references/sfx.md b/.claude/skills-media/media-use/audio/references/sfx.md
new file mode 100644
index 000000000..6df3268cc
--- /dev/null
+++ b/.claude/skills-media/media-use/audio/references/sfx.md
@@ -0,0 +1,42 @@
+# Sound effects (SFX)
+
+Named sound effects, produced by the shared audio engine (`scripts/audio.mjs` → `scripts/lib/sfx.mjs`). **Provider-gated** by the engine's one switch — whether a HeyGen credential is present, decided once (not per cue):
+
+- **HeyGen credential present → retrieve every cue** from HeyGen's audio library (`/v3/audio/sounds`, `type=sound_effects`, `min_score=0.4`). Search-and-download, **not** generation. The bundled library is NOT consulted.
+- **No credential → the bundled 21-file library** (`assets/sfx/` + `manifest.json`): match each cue name, copy the matched file into the project. Offline, deterministic, free.
+
+There is no `npx hyperframes sfx` command. SFX is never generated — it is retrieved (online) or taken from the bundled library (offline).
+
+## Cues — request → meta
+
+Each line names the effects it wants: `lines[].sfx: ["whoosh", "ui click"]`. The engine flattens these into cues, resolves them per the switch, 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": "heygen" | "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
+}
+```
+
+A cue that matches nothing is **skipped** (recorded as an anomaly); SFX never blocks a render.
+
+## HeyGen retrieval (credentialed)
+
+`searchSounds(name, "sound_effects", { limit: 3, minScore: 0.4 })` → top hit → `assets/sfx/<slug>.mp3`. Results are ranked by `score` (each carries a presigned `audio_url`, `duration`, `description`). The floor is **0.4** because good SFX hits score ~0.5–0.67 — below the API's default `0.7`, which would silently drop most named cues (only whoosh/swoosh-family clears 0.7). `duration_s` comes from the result (else 1.0). Name effects concretely (`glass shatter`, not `dramatic sound`); a vague query returns a poor match.
+
+## Bundled library (no credential)
+
+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 (credentialed) or bundled library (offline) — never generation.** You search HeyGen by text, or match a name against the 21-file manifest.
+- **One asset per distinct name.** Reuse across lines is deduped to a single download/copy, many cues.
+- **The switch is global, not per cue.** With a credential, retrieval handles even the long tail (effects not in the 21); without one, only the 21 bundled names resolve.
diff --git a/.claude/skills-media/media-use/audio/references/transcribe.md b/.claude/skills-media/media-use/audio/references/transcribe.md
new file mode 100644
index 000000000..06df2ce44
--- /dev/null
+++ b/.claude/skills-media/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/media-use/audio/references/tts-to-captions.md b/.claude/skills-media/media-use/audio/references/tts-to-captions.md
new file mode 100644
index 000000000..e11262cae
--- /dev/null
+++ b/.claude/skills-media/media-use/audio/references/tts-to-captions.md
@@ -0,0 +1,26 @@
+# 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 — ElevenLabs / Kokoro (TTS → Whisper)
+
+These providers don't return word data. 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/`.
diff --git a/.claude/skills-media/media-use/audio/references/tts.md b/.claude/skills-media/media-use/audio/references/tts.md
new file mode 100644
index 000000000..98f287827
--- /dev/null
+++ b/.claude/skills-media/media-use/audio/references/tts.md
@@ -0,0 +1,137 @@
+# 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.
+
+## Available routes
+
+| Order | Provider          | Env trigger                                 | Voice IDs                                   | Word timestamps                           | Audio format         |
+| ----- | ----------------- | ------------------------------------------- | ------------------------------------------- | ----------------------------------------- | -------------------- |
+| 1     | HeyGen (Starfish) | `$HEYGEN_API_KEY` / `~/.heygen/credentials` | UUIDs from `GET /v3/voices?engine=starfish` | **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: `$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`). 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`.
+
+## 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**                                          |
+| Non-English multilingual with deterministic phonemization | **Kokoro** (`ef_dora`, `jf_alpha`, `zf_xiaobei`, …) |
+
+## 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/media-use/audio/scripts/audio.mjs b/.claude/skills-media/media-use/audio/scripts/audio.mjs
new file mode 100644
index 000000000..bc005eeff
--- /dev/null
+++ b/.claude/skills-media/media-use/audio/scripts/audio.mjs
@@ -0,0 +1,293 @@
+#!/usr/bin/env node
+// audio.mjs — the shared HyperFrames audio engine. ONE implementation of TTS +
+// BGM + SFX for every video workflow (product-launch, general-video, pr-to-video,
+// …). Workflows do NOT vendor a copy: they write a neutral `audio_request.json`
+// (a tiny per-workflow adapter maps their storyboard/scenes into it) and call:
+//
+//   node <MEDIA_DIR>/scripts/audio.mjs --request ./audio_request.json --hyperframes . --out ./audio_meta.json
+//
+// The three capabilities degrade on ONE switch — whether HeyGen is configured
+// (credential present, NOT the CLI). This mirrors the table in ../SKILL.md:
+//
+//   TTS : HeyGen REST → ElevenLabs → Kokoro (CLI)
+//   BGM : HeyGen retrieve  → (no credential) Lyria/MusicGen generate
+//   SFX : HeyGen retrieve  → (no credential) bundled 19-file library
+//
+// ── audio_request.json (input) ────────────────────────────────────────────────
+//   {
+//     "provider": "auto",          // auto|heygen|elevenlabs|kokoro (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 } ],
+//     total_duration_s }
+//
+// --only tts,bgm,sfx  runs a subset and MERGES into an existing --out (so a
+// workflow 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, writeFileSync } 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 { resolveSfx } from "./lib/sfx.mjs";
+import { mapWithConcurrency } from "./lib/concurrency.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", join(HERE, "..", "assets", "sfx")));
+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 speed = Number(speedOverride ?? request.speed ?? 1.0) || 1.0;
+
+// ── env + HeyGen availability (the single switch) ─────────────────────────────
+loadEnvFromDir(hyperframesDir);
+const heygenOK = heygenCredential() !== null;
+const headers = heygenOK ? heygenAuthHeaders() : null;
+
+// ── merge base: preserve sections not selected by --only ──────────────────────
+const prev = existsSync(outPath) ? JSON.parse(readFileSync(outPath, "utf8")) : {};
+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 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 = `assets/voice/${id}.wav`;
+    const abs = join(hyperframesDir, rel);
+    const { ok, words, error } = await synthesizeOne({
+      provider: ttsProvider,
+      text,
+      voiceId,
+      lang,
+      speed,
+      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, e.g. product-launch, 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, hyperframesDir, hasVoice });
+      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,
+    });
+    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, heygenOK, headers, hyperframesDir, sfxLibDir });
+  sfx = res.sfx;
+  anomalies.push(...res.anomalies);
+  console.error(
+    `· sfx: ${sfx.length} cue(s) resolved (${heygenOK ? "heygen retrieval" : "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 });
+writeFileSync(outPath, JSON.stringify(meta, null, 2));
+
+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/media-use/audio/scripts/audio.test.mjs b/.claude/skills-media/media-use/audio/scripts/audio.test.mjs
new file mode 100644
index 000000000..b229e40cc
--- /dev/null
+++ b/.claude/skills-media/media-use/audio/scripts/audio.test.mjs
@@ -0,0 +1,49 @@
+import { strict as assert } from "node:assert";
+import { test } from "node:test";
+import { mkdtempSync, rmSync, existsSync } from "node:fs";
+import { join, dirname } from "node:path";
+import { tmpdir } from "node:os";
+import { fileURLToPath } from "node:url";
+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. Offline (heygenOK:false), no network.
+
+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" }],
+      heygenOK: false,
+      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" }],
+      heygenOK: false,
+      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 });
+  }
+});
diff --git a/.claude/skills-media/media-use/audio/scripts/heygen-tts.mjs b/.claude/skills-media/media-use/audio/scripts/heygen-tts.mjs
new file mode 100755
index 000000000..3b6dcbf4a
--- /dev/null
+++ b/.claude/skills-media/media-use/audio/scripts/heygen-tts.mjs
@@ -0,0 +1,121 @@
+#!/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 } = await synthesizeOne({
+  provider: "heygen",
+  text,
+  voiceId,
+  lang,
+  speed,
+  wavAbs: output,
+  hyperframesDir: process.cwd(),
+});
+if (!ok) die("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/media-use/audio/scripts/lib/bgm.mjs b/.claude/skills-media/media-use/audio/scripts/lib/bgm.mjs
new file mode 100644
index 000000000..4c91d005f
--- /dev/null
+++ b/.claude/skills-media/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 } from "node:fs";
+import { join } from "node:path";
+import { downloadTo, searchSounds } from "./heygen.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 || "";
+
+// Default BGM level. Under narration music is a bed that must stay under the
+// voice — 0.12 linear ≈ -18 dB. A silent film (no voice) has no voice to duck
+// beneath, so BGM sits forward at 0.9. Callers may override per composition.
+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);
+
+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 }) {
+  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 = "assets/bgm/track.mp3";
+  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,
+}) {
+  const rel = "assets/bgm/track.wav";
+  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,
+    ]);
+    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]);
+    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/media-use/audio/scripts/lib/bgm.test.mjs b/.claude/skills-media/media-use/audio/scripts/lib/bgm.test.mjs
new file mode 100644
index 000000000..46967605c
--- /dev/null
+++ b/.claude/skills-media/media-use/audio/scripts/lib/bgm.test.mjs
@@ -0,0 +1,30 @@
+import { test } from "node:test";
+import assert from "node:assert/strict";
+import { BGM_BED_VOLUME, BGM_SILENT_VOLUME, bgmDefaultVolume } 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`,
+  );
+});
diff --git a/.claude/skills-media/media-use/audio/scripts/lib/concurrency.mjs b/.claude/skills-media/media-use/audio/scripts/lib/concurrency.mjs
new file mode 100644
index 000000000..4988b6192
--- /dev/null
+++ b/.claude/skills-media/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/media-use/audio/scripts/lib/concurrency.test.mjs b/.claude/skills-media/media-use/audio/scripts/lib/concurrency.test.mjs
new file mode 100644
index 000000000..d033860b8
--- /dev/null
+++ b/.claude/skills-media/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/media-use/audio/scripts/lib/heygen.mjs b/.claude/skills-media/media-use/audio/scripts/lib/heygen.mjs
new file mode 100644
index 000000000..ed784ffd4
--- /dev/null
+++ b/.claude/skills-media/media-use/audio/scripts/lib/heygen.mjs
@@ -0,0 +1,155 @@
+// heygen.mjs — vendored HeyGen REST helpers (auth + transport) for the audio
+// pipeline. The credential resolver matches the hyperframes CLI auth: first
+// usable source wins — $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). Vendored so the skill ships standalone. Pure node.
+
+import { existsSync, 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";
+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" };
+
+// 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 envPath = join(dir, ".env");
+    if (existsSync(envPath)) {
+      for (const raw of readFileSync(envPath, "utf8").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 (!(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 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");
+  if (!existsSync(file)) return null;
+  const raw = readFileSync(file, "utf8").trim();
+  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 — this function never throws.
+  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 = heygenCredential();
+  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?.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(`${HEYGEN_BASE}${path}`, opts);
+  if (!res.ok) {
+    const detail = await res.text().catch(() => "");
+    throw new Error(
+      `HeyGen ${method} ${path} → HTTP ${res.status}${detail ? `\n${detail.slice(0, 300)}` : ""}`,
+    );
+  }
+  return res.json();
+}
+
+// Download a (presigned) URL to destPath; returns byte length.
+export async function downloadTo(url, destPath) {
+  const res = await fetch(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/media-use/audio/scripts/lib/heygen.test.mjs b/.claude/skills-media/media-use/audio/scripts/lib/heygen.test.mjs
new file mode 100644
index 000000000..22542f355
--- /dev/null
+++ b/.claude/skills-media/media-use/audio/scripts/lib/heygen.test.mjs
@@ -0,0 +1,103 @@
+import { 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 { heygenAuthHeaders, heygenAuthMethod } from "./heygen.mjs";
+
+function withCleanHeygenEnv(fn) {
+  const previousApiKey = process.env.HEYGEN_API_KEY;
+  const previousHyperframesApiKey = process.env.HYPERFRAMES_API_KEY;
+  const previousConfigDir = process.env.HEYGEN_CONFIG_DIR;
+  try {
+    delete process.env.HEYGEN_API_KEY;
+    delete process.env.HYPERFRAMES_API_KEY;
+    delete process.env.HEYGEN_CONFIG_DIR;
+    return fn();
+  } finally {
+    if (previousApiKey === undefined) delete process.env.HEYGEN_API_KEY;
+    else process.env.HEYGEN_API_KEY = previousApiKey;
+    if (previousHyperframesApiKey === undefined) delete process.env.HYPERFRAMES_API_KEY;
+    else process.env.HYPERFRAMES_API_KEY = previousHyperframesApiKey;
+    if (previousConfigDir === undefined) delete process.env.HEYGEN_CONFIG_DIR;
+    else process.env.HEYGEN_CONFIG_DIR = previousConfigDir;
+  }
+}
+
+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("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 });
+    }
+  });
+});
diff --git a/.claude/skills-media/media-use/audio/scripts/lib/python.mjs b/.claude/skills-media/media-use/audio/scripts/lib/python.mjs
new file mode 100644
index 000000000..a11c0151c
--- /dev/null
+++ b/.claude/skills-media/media-use/audio/scripts/lib/python.mjs
@@ -0,0 +1,63 @@
+// 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.
+
+import { spawnSync } from "node:child_process";
+
+function defaultProbe(cmd, args) {
+  try {
+    return spawnSync(cmd, args, { stdio: "ignore" }).status === 0;
+  } 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`); both `platform`
+ * and `probe` 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) {
+  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/media-use/audio/scripts/lib/python.test.mjs b/.claude/skills-media/media-use/audio/scripts/lib/python.test.mjs
new file mode 100644
index 000000000..4598d02e0
--- /dev/null
+++ b/.claude/skills-media/media-use/audio/scripts/lib/python.test.mjs
@@ -0,0 +1,68 @@
+import { test } from "node:test";
+import assert from "node:assert/strict";
+import { 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"],
+  );
+});
+
+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/media-use/audio/scripts/lib/sfx.mjs b/.claude/skills-media/media-use/audio/scripts/lib/sfx.mjs
new file mode 100644
index 000000000..f72baf34e
--- /dev/null
+++ b/.claude/skills-media/media-use/audio/scripts/lib/sfx.mjs
@@ -0,0 +1,143 @@
+// sfx.mjs — sound effects for the media audio engine. Provider-gated (NOT a
+// per-cue merge): the decision is made once, by whether HeyGen is configured —
+// mirroring how TTS and BGM degrade.
+//
+//   HeyGen credential present  →  retrieve EVERY cue from HeyGen's audio library
+//        (/v3/audio/sounds, type=sound_effects, min_score=0.4). The bundled
+//        library is NOT consulted.
+//   HeyGen credential absent   →  resolve cues against the bundled 21-file
+//        library (assets/sfx/manifest.json), copying matched files into the
+//        project. Offline, deterministic, free.
+//
+// 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 { join } from "node:path";
+import { downloadTo, searchSounds } from "./heygen.mjs";
+
+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));
+
+// cues: [{ id, name }] (id = the line/frame/scene the cue fires in). Returns
+// { sfx: [{ id, name, file, source, offset_s, duration_s, volume }], anomalies }.
+export async function resolveSfx({ cues, heygenOK, headers, hyperframesDir, sfxLibDir }) {
+  const sfx = [];
+  const anomalies = [];
+  const destDir = join(hyperframesDir, "assets", "sfx");
+
+  // 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;
+  });
+
+  if (heygenOK) {
+    for (const { id, name } of uniq) {
+      try {
+        // SFX hits score low (~0.5–0.67), below the API's default 0.7 which
+        // silently drops most named cues — floor to 0.4. (BGM/music score high
+        // and keep the default.)
+        const results = await searchSounds(name, "sound_effects", headers, {
+          limit: 3,
+          minScore: 0.4,
+        });
+        if (!results.length) {
+          anomalies.push(`sfx "${name}" (id ${id}): no HeyGen match — skipped`);
+          continue;
+        }
+        const top = results[0];
+        const file = `assets/sfx/${slug(name)}.mp3`;
+        await downloadTo(top.audio_url, join(hyperframesDir, file));
+        sfx.push({
+          id,
+          name,
+          file,
+          source: "heygen",
+          offset_s: 0,
+          duration_s: typeof top.duration === "number" ? r3(top.duration) : 1.0,
+          volume: SFX_VOLUME,
+        });
+      } catch (e) {
+        anomalies.push(`sfx "${name}" (id ${id}): retrieval failed — ${e.message}`);
+      }
+    }
+    return { sfx, anomalies };
+  }
+
+  // ── offline: bundled library ──
+  const manifestPath = join(sfxLibDir, "manifest.json");
+  if (!existsSync(manifestPath)) {
+    if (uniq.length)
+      anomalies.push(`no HeyGen credential and no SFX library at ${sfxLibDir} — all cues dropped`);
+    return { sfx, anomalies };
+  }
+  let manifest;
+  try {
+    manifest = JSON.parse(readFileSync(manifestPath, "utf8"));
+  } catch (e) {
+    anomalies.push(`SFX manifest parse failed (${e.message}) — all cues dropped`);
+    return { sfx, anomalies };
+  }
+  // Build lookups: by manifest key, by file basename, and by slug of either, so
+  // a cue can name "whoosh", "whoosh.mp3", or "ui click" (→ slug match).
+  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);
+  }
+  mkdirSync(destDir, { recursive: true });
+  for (const { id, name } of uniq) {
+    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}…)`,
+      );
+      continue;
+    }
+    const src = join(sfxLibDir, hit.file);
+    const destRel = `assets/sfx/${hit.file}`;
+    const dest = join(hyperframesDir, destRel);
+    // The bundled library may be incomplete: some installs of the skill ship
+    // manifest.json without the actual mp3s. Pushing an sfx entry that points at
+    // a file we never copied produces a dangling reference that silently drops
+    // downstream ("not on disk"). Surface it as a loud anomaly and skip the cue
+    // instead, so the audio_meta never references a missing file.
+    if (!existsSync(dest)) {
+      if (!existsSync(src)) {
+        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, or configure a HeyGen credential for retrieval.`,
+        );
+        continue;
+      }
+      copyFileSync(src, dest);
+    }
+    sfx.push({
+      id,
+      name,
+      file: destRel,
+      source: "local",
+      offset_s: 0,
+      duration_s: r3(hit.duration),
+      volume: SFX_VOLUME,
+    });
+  }
+  return { sfx, anomalies };
+}
diff --git a/.claude/skills-media/media-use/audio/scripts/lib/sfx.test.mjs b/.claude/skills-media/media-use/audio/scripts/lib/sfx.test.mjs
new file mode 100644
index 000000000..3c89d5874
--- /dev/null
+++ b/.claude/skills-media/media-use/audio/scripts/lib/sfx.test.mjs
@@ -0,0 +1,69 @@
+import { test } from "node:test";
+import assert from "node:assert/strict";
+import { mkdtempSync, mkdirSync, writeFileSync, existsSync, rmSync } from "node:fs";
+import { join } from "node:path";
+import { tmpdir } from "node:os";
+import { resolveSfx } from "./sfx.mjs";
+
+// Offline (no HeyGen) 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" }],
+      heygenOK: false,
+      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.equal(anomalies.length, 0);
+  });
+});
+
+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" }],
+      heygenOK: false,
+      hyperframesDir: projDir,
+      sfxLibDir: libDir,
+    });
+    assert.equal(sfx.length, 0, "no dangling entry for a file that was never copied");
+    assert.equal(anomalies.length, 1);
+    assert.match(anomalies[0], /missing from the offline library/);
+    assert.ok(!existsSync(join(projDir, "assets/sfx/whoosh.mp3")), "nothing copied");
+  });
+});
diff --git a/.claude/skills-media/media-use/audio/scripts/lib/tts.mjs b/.claude/skills-media/media-use/audio/scripts/lib/tts.mjs
new file mode 100644
index 000000000..b70859474
--- /dev/null
+++ b/.claude/skills-media/media-use/audio/scripts/lib/tts.mjs
@@ -0,0 +1,378 @@
+// 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 } from "./heygen.mjs";
+import { pythonInvocation } from "./python.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"].includes(userProvider))
+      throw new Error(`invalid provider "${userProvider}" (heygen | elevenlabs | kokoro)`);
+    if (userProvider === "heygen" && !heygenAvailable())
+      throw new Error(
+        "provider=heygen but no HeyGen credentials (set $HEYGEN_API_KEY or run `npx hyperframes auth login`)",
+      );
+    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 === "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]).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,
+  wavAbs,
+  hyperframesDir,
+}) {
+  if (provider === "heygen") return synthesizeHeygen({ text, voiceId, lang, 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 };
+    }
+    const { cmd, args } = pythonInvocation([
+      "-c",
+      ELEVENLABS_PY,
+      writeTmpText(text),
+      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);
+  const args = ["hyperframes", "tts", writeTmpText(text), "--voice", voiceId, "--output", wavRel];
+  if (lang !== "en") args.push("--lang", lang);
+  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 fetchImpl(inner.audio_url);
+    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: e?.message ? String(e.message) : String(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 ──────────────────────────────────────────────────────────
+function writeTmpText(text) {
+  const td = mkdtempSync(join(tmpdir(), "hf-txt-"));
+  const p = join(td, "line.txt");
+  writeFileSync(p, text);
+  return p;
+}
+function relTo(base, abs) {
+  return abs.startsWith(base + "/") ? abs.slice(base.length + 1) : abs;
+}
diff --git a/.claude/skills-media/media-use/audio/scripts/lib/tts.spawn.test.mjs b/.claude/skills-media/media-use/audio/scripts/lib/tts.spawn.test.mjs
new file mode 100644
index 000000000..b8e6b49a9
--- /dev/null
+++ b/.claude/skills-media/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/media-use/audio/scripts/lib/tts.test.mjs b/.claude/skills-media/media-use/audio/scripts/lib/tts.test.mjs
new file mode 100644
index 000000000..a4f651908
--- /dev/null
+++ b/.claude/skills-media/media-use/audio/scripts/lib/tts.test.mjs
@@ -0,0 +1,157 @@
+import { test } from "node:test";
+import assert from "node:assert/strict";
+import { mkdtempSync, writeFileSync, chmodSync, rmSync, existsSync } from "node:fs";
+import { join, dirname } from "node:path";
+import { tmpdir } from "node:os";
+import {
+  parseFfmpegDurationBanner,
+  ffprobeDuration,
+  synthesizeOne,
+  synthesizeHeygen,
+  synthResult,
+} 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/);
+});
diff --git a/.claude/skills-media/media-use/audio/scripts/lyria-recipe.py b/.claude/skills-media/media-use/audio/scripts/lyria-recipe.py
new file mode 100644
index 000000000..c28cba8f7
--- /dev/null
+++ b/.claude/skills-media/media-use/audio/scripts/lyria-recipe.py
@@ -0,0 +1,128 @@
+#!/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
+
+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/media-use/audio/scripts/wait-bgm.mjs b/.claude/skills-media/media-use/audio/scripts/wait-bgm.mjs
new file mode 100644
index 000000000..aa9cc1936
--- /dev/null
+++ b/.claude/skills-media/media-use/audio/scripts/wait-bgm.mjs
@@ -0,0 +1,167 @@
+#!/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";
+
+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 || !existsSync(path)) return "";
+  const s = statSync(path);
+  const txt = readFileSync(path, "utf8");
+  return txt.slice(Math.max(0, txt.length - Math.min(maxChars, s.size)));
+}
+
+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)`);
+    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/media-use/luts/README.md b/.claude/skills-media/media-use/luts/README.md
new file mode 100644
index 000000000..dc3ed9ae5
--- /dev/null
+++ b/.claude/skills-media/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/media-use/luts/index.json b/.claude/skills-media/media-use/luts/index.json
new file mode 100644
index 000000000..9f6725c4a
--- /dev/null
+++ b/.claude/skills-media/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/media-use/references/operations.md b/.claude/skills-media/media-use/references/operations.md
new file mode 100644
index 000000000..930a4593b
--- /dev/null
+++ b/.claude/skills-media/media-use/references/operations.md
@@ -0,0 +1,282 @@
+# 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-core). 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.
+
+## 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
+
+# equivalently, the hyperframes CLI has Parakeet built in (auto-detects it, whisper fallback):
+npx hyperframes transcribe talk.mp4 --engine parakeet   # or --engine auto (default)
+```
+
+VERIFIED on 24GB: accurate, ~3s (cached) for 8s audio. Parakeet covers English +
+25 European languages. For other languages, or when parakeet-mlx is not
+installed, transcribe.mjs auto-falls-back to whisper.cpp (99 languages) via
+`hyperframes transcribe`. `--engine parakeet|whisper` forces one. (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 GSAP volume
+keyframes. Paste them into the composition timeline, the source file stays
+untouched.
+
+```bash
+node <SKILL_DIR>/scripts/audio-duck.mjs \
+  --meta audio_meta.json \
+  --target "#bgm" \
+  --composition index.html
+```
+
+```js
+// auto-duck: #bgm under narration (generated; base volume 0.6)
+tl.to("#bgm", { volume: 0.15, duration: 0.15 }, 3.42);
+tl.to("#bgm", { volume: 0.6, duration: 0.4 }, 9.87);
+```
+
+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, via
+   `scripts/lib/local-models.mjs` (`imagegen` ladder) + `mflux-provider.mjs`.
+   The RAM ladder (agent sees it via `describeModelLadder("imagegen", specs)`):
+
+   | 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):**
+  `heygenVideoGenerate` (`scripts/lib/heygen-video-provider.mjs`) 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 in `local-models.mjs` (`ltx-video-provider.mjs`). 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
+`HEYGEN_CLIENT_SOURCE_ARGV` constant (`scripts/lib/heygen-cli.mjs`), 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>.
diff --git a/.claude/skills-media/media-use/references/telemetry-dashboard.md b/.claude/skills-media/media-use/references/telemetry-dashboard.md
new file mode 100644
index 000000000..11df43b37
--- /dev/null
+++ b/.claude/skills-media/media-use/references/telemetry-dashboard.md
@@ -0,0 +1,50 @@
+# media-use usage dashboard (PostHog)
+
+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 PostHog project **Hyperframes (356858)**; this doc is the source of truth so
+it can be recreated. Local complement: `resolve --stats` (same questions, from
+`.media/` + `~/.media`, no PostHog access needed).
+
+## Identity (see `scripts/lib/telemetry.mjs`)
+
+Events attribute to the **same PostHog 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 via the PostHog MCP
+
+For each tile: `read-data-schema` to confirm the event/property, then a
+`query-*` tool (`query-trends` for 1–7), then `insight-create`, then
+`dashboard-create` collecting the insights. 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/media-use/scripts/audio-duck.mjs b/.claude/skills-media/media-use/scripts/audio-duck.mjs
new file mode 100644
index 000000000..4fd1f342d
--- /dev/null
+++ b/.claude/skills-media/media-use/scripts/audio-duck.mjs
@@ -0,0 +1,121 @@
+#!/usr/bin/env node
+
+import { readFileSync } from "node:fs";
+import { resolve } from "node:path";
+import { parseArgs } from "node:util";
+import { duckKeyframes, 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 GSAP volume ducking keyframes
+
+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 from this HTML file
+  --json          Output { spans, keyframes }
+  --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 = readBaseVolume(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,
+  });
+
+  if (args.json) {
+    console.log(JSON.stringify({ spans, keyframes }));
+    return;
+  }
+
+  console.log(
+    `// auto-duck: ${target} under narration (generated; base volume ${fmt(baseVolume)})`,
+  );
+  for (const keyframe of keyframes) {
+    console.log(
+      `tl.to(${JSON.stringify(target)}, { volume: ${fmt(keyframe.volume)}, duration: ${fmt(
+        keyframe.duration,
+      )} }, ${fmt(keyframe.time)});`,
+    );
+  }
+}
+
+function readBaseVolume(composition, target) {
+  if (!composition || !target.startsWith("#")) return 1;
+  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 raw = tag?.match(/\bdata-volume=["']([^"']+)["']/i)?.[1];
+  const volume = Number(raw);
+  return Number.isFinite(volume) ? volume : 1;
+}
+
+function escapeRegExp(value) {
+  return value.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+}
+
+function fmt(n) {
+  return Number(n)
+    .toFixed(3)
+    .replace(/\.?0+$/, "");
+}
diff --git a/.claude/skills-media/media-use/scripts/eval.mjs b/.claude/skills-media/media-use/scripts/eval.mjs
new file mode 100644
index 000000000..7184c6fc1
--- /dev/null
+++ b/.claude/skills-media/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/media-use/scripts/lib/adopt.mjs b/.claude/skills-media/media-use/scripts/lib/adopt.mjs
new file mode 100644
index 000000000..b140ed02c
--- /dev/null
+++ b/.claude/skills-media/media-use/scripts/lib/adopt.mjs
@@ -0,0 +1,128 @@
+import { readdirSync, statSync, existsSync } from "node:fs";
+import { join, extname, basename } from "node:path";
+import { readManifest, appendRecord, nextId } from "./manifest.mjs";
+import { regenerateIndex } from "./index-gen.mjs";
+import { probe } from "./probe.mjs";
+import { matchTokens } from "./match.mjs";
+
+const AUDIO_EXT = new Set([".mp3", ".wav", ".ogg", ".m4a", ".aac"]);
+const IMAGE_EXT = new Set([".jpg", ".jpeg", ".png", ".gif", ".webp", ".svg", ".ico"]);
+const VIDEO_EXT = new Set([".mp4", ".webm", ".mov"]);
+
+function inferType(filePath) {
+  const ext = extname(filePath).toLowerCase();
+  if (AUDIO_EXT.has(ext)) {
+    const lower = filePath.toLowerCase();
+    if (lower.includes("/bgm/") || lower.includes("/music/") || lower.startsWith("bgm/"))
+      return "bgm";
+    if (lower.includes("/sfx/") || lower.includes("/sound") || lower.startsWith("sfx/"))
+      return "sfx";
+    if (lower.includes("/voice/") || lower.includes("/narrat") || lower.startsWith("voice/"))
+      return "voice";
+    return "bgm";
+  }
+  if (IMAGE_EXT.has(ext)) {
+    if (ext === ".svg" || ext === ".ico") return "icon";
+    return "image";
+  }
+  if (VIDEO_EXT.has(ext)) return "video";
+  return null;
+}
+
+function walkDir(dir, base = "") {
+  const files = [];
+  if (!existsSync(dir)) return files;
+  for (const entry of readdirSync(dir, { withFileTypes: true })) {
+    const rel = base ? `${base}/${entry.name}` : entry.name;
+    if (entry.isDirectory()) {
+      files.push(...walkDir(join(dir, entry.name), rel));
+    } else {
+      files.push(rel);
+    }
+  }
+  return files;
+}
+
+export function scanExistingAssets(projectDir) {
+  const assetsDir = join(projectDir, "assets");
+  if (!existsSync(assetsDir)) return [];
+
+  const files = walkDir(assetsDir);
+  const found = [];
+  for (const rel of files) {
+    const type = inferType(rel);
+    if (!type) continue;
+    const fullPath = join(assetsDir, rel);
+    const stat = statSync(fullPath);
+    if (stat.size === 0) {
+      // A 0-byte asset would register clean but fail at render — skip it loudly
+      // rather than adopt a broken file.
+      console.error(`media-use: skipping 0-byte asset assets/${rel}`);
+      continue;
+    }
+    const meta = probe(fullPath);
+    found.push({
+      relativePath: `assets/${rel}`,
+      type,
+      size: stat.size,
+      name: basename(rel, extname(rel)),
+      ...meta,
+    });
+  }
+  return found;
+}
+
+export function adoptExistingAssets(projectDir) {
+  const existing = scanExistingAssets(projectDir);
+  if (existing.length === 0) return [];
+
+  const manifest = readManifest(projectDir);
+  const knownPaths = new Set(manifest.map((r) => r.path));
+
+  const adopted = [];
+  for (const asset of existing) {
+    if (knownPaths.has(asset.relativePath)) continue;
+
+    const id = nextId(projectDir, asset.type);
+    const record = {
+      id,
+      type: asset.type,
+      path: asset.relativePath,
+      source: "existing",
+      description: asset.name.replace(/[-_]/g, " "),
+      ...(asset.duration != null && { duration: asset.duration }),
+      ...(asset.width != null && { width: asset.width }),
+      ...(asset.height != null && { height: asset.height }),
+      provenance: { provider: "local", adopted: true },
+    };
+    appendRecord(projectDir, record);
+    adopted.push(record);
+  }
+
+  if (adopted.length > 0) regenerateIndex(projectDir);
+  return adopted;
+}
+
+// Adopt a pre-existing assets/ file only when it shares a meaningful word with
+// the intent. The old test — `name.includes(intent) || intent.includes(name)` —
+// silently returned the WRONG file: "whoosh" grabbed a stray who.mp3, and a
+// one-letter filename matched every intent. A false negative just falls through
+// to a catalog search (safe); a false positive ships the wrong asset. So bias to
+// precision: require a shared token, don't guess from substrings.
+export function findExistingAsset(projectDir, intent, type) {
+  const assetsDir = join(projectDir, "assets");
+  if (!existsSync(assetsDir)) return null;
+  const intentTokens = matchTokens(intent);
+  if (intentTokens.size === 0) return null;
+  for (const rel of walkDir(assetsDir)) {
+    const t = inferType(rel);
+    if (!t || (type && t !== type)) continue;
+    const stem = basename(rel, extname(rel));
+    for (const tok of matchTokens(stem)) {
+      if (intentTokens.has(tok)) {
+        return { relativePath: `assets/${rel}`, type: t, name: stem };
+      }
+    }
+  }
+  return null;
+}
diff --git a/.claude/skills-media/media-use/scripts/lib/adopt.test.mjs b/.claude/skills-media/media-use/scripts/lib/adopt.test.mjs
new file mode 100644
index 000000000..a961ae177
--- /dev/null
+++ b/.claude/skills-media/media-use/scripts/lib/adopt.test.mjs
@@ -0,0 +1,95 @@
+import { strict as assert } from "node:assert";
+import { mkdtempSync, rmSync, mkdirSync, writeFileSync } from "node:fs";
+import { join } from "node:path";
+import { tmpdir } from "node:os";
+import { findExistingAsset, adoptExistingAssets } from "./adopt.mjs";
+
+let tmp;
+function setup() {
+  tmp = mkdtempSync(join(tmpdir(), "mu-adopt-test-"));
+}
+function cleanup() {
+  if (tmp) rmSync(tmp, { recursive: true, force: true });
+}
+function drop(rel) {
+  const full = join(tmp, "assets", rel);
+  mkdirSync(join(full, ".."), { recursive: true });
+  writeFileSync(full, "x");
+}
+
+function runTests() {
+  const tests = [];
+  const test = (name, fn) => tests.push({ name, fn });
+
+  test("does NOT false-match a short filename stem (who.mp3 vs 'whoosh')", () => {
+    setup();
+    drop("sfx/who.mp3");
+    assert.equal(findExistingAsset(tmp, "whoosh", "sfx"), null);
+    cleanup();
+  });
+
+  test("does NOT match a one-letter filename against any intent", () => {
+    setup();
+    drop("images/a.jpg");
+    assert.equal(findExistingAsset(tmp, "gradient tech background", "image"), null);
+    cleanup();
+  });
+
+  test("matches on a shared meaningful word", () => {
+    setup();
+    drop("images/hero-shot.jpg");
+    const hit = findExistingAsset(tmp, "hero image", "image");
+    assert.ok(hit);
+    assert.equal(hit.relativePath, "assets/images/hero-shot.jpg");
+    cleanup();
+  });
+
+  test("matches multi-word overlap", () => {
+    setup();
+    drop("images/gradient-tech-bg.jpg");
+    assert.ok(findExistingAsset(tmp, "gradient tech background", "image"));
+    cleanup();
+  });
+
+  test("a shared stopword alone does not match", () => {
+    setup();
+    drop("video/the-video.mp4");
+    assert.equal(findExistingAsset(tmp, "the rocket", null), null);
+    cleanup();
+  });
+
+  test("respects the type filter", () => {
+    setup();
+    drop("sfx/rocket.mp3");
+    assert.equal(findExistingAsset(tmp, "rocket", "image"), null, "wrong type is skipped");
+    assert.ok(findExistingAsset(tmp, "rocket", "sfx"), "right type matches");
+    cleanup();
+  });
+
+  test("adoptExistingAssets still imports every typed file (unaffected by match rule)", () => {
+    setup();
+    drop("sfx/who.mp3");
+    drop("images/a.jpg");
+    assert.equal(adoptExistingAssets(tmp).length, 2);
+    cleanup();
+  });
+
+  let passed = 0;
+  let failed = 0;
+  for (const { name, fn } of tests) {
+    try {
+      fn();
+      passed++;
+      console.log(`  \x1b[32m✓\x1b[0m ${name}`);
+    } catch (err) {
+      failed++;
+      console.log(`  \x1b[31m✗\x1b[0m ${name}`);
+      console.log(`    ${err.message}`);
+    }
+  }
+  console.log(`\n${passed} passed, ${failed} failed`);
+  if (failed > 0) process.exit(1);
+}
+
+console.log("media-use · adopt / findExistingAsset tests\n");
+runTests();
diff --git a/.claude/skills-media/media-use/scripts/lib/bgm-provider.mjs b/.claude/skills-media/media-use/scripts/lib/bgm-provider.mjs
new file mode 100644
index 000000000..462354d09
--- /dev/null
+++ b/.claude/skills-media/media-use/scripts/lib/bgm-provider.mjs
@@ -0,0 +1,20 @@
+import { heygenSearch } from "./heygen-search.mjs";
+
+export const bgmProvider = {
+  async search(intent) {
+    const results = heygenSearch("audio sounds list", intent, { type: "music" });
+    if (!results) return null;
+    const best = results[0];
+    return {
+      url: best.audio_url,
+      source: "search",
+      // ext derived from audio_url by resolve.mjs — catalog tracks are .mp3 or .wav
+      metadata: {
+        description: best.description || intent,
+        duration: best.duration || null,
+        provider: "heygen.audio.sounds",
+        provenance: { track_id: best.id, score: best.score, query: intent },
+      },
+    };
+  },
+};
diff --git a/.claude/skills-media/media-use/scripts/lib/brand-provider.mjs b/.claude/skills-media/media-use/scripts/lib/brand-provider.mjs
new file mode 100644
index 000000000..e05caf1e3
--- /dev/null
+++ b/.claude/skills-media/media-use/scripts/lib/brand-provider.mjs
@@ -0,0 +1,59 @@
+import { readFileSync, existsSync } from "node:fs";
+import { join } from "node:path";
+
+function findDesignSpec(projectDir) {
+  for (const name of ["frame.md", "design.md", "DESIGN.md"]) {
+    const p = join(projectDir, name);
+    if (existsSync(p)) return { path: p, name };
+  }
+  return null;
+}
+
+function parseFrontmatter(content) {
+  const match = content.match(/^---\n([\s\S]*?)\n---/);
+  if (!match) return null;
+  const yaml = match[1];
+  const tokens = {};
+  for (const line of yaml.split("\n")) {
+    const m = line.match(/^\s*(\w[\w-]*):\s*(.+)/);
+    if (m) tokens[m[1]] = m[2].trim().replace(/^["']|["']$/g, "");
+  }
+  return tokens;
+}
+
+function extractColors(tokens) {
+  const colors = [];
+  for (const [k, v] of Object.entries(tokens)) {
+    if (typeof v === "string" && /^#[0-9a-fA-F]{3,8}$/.test(v)) {
+      colors.push({ name: k, hex: v });
+    }
+  }
+  return colors;
+}
+
+export const brandProvider = {
+  async search(intent, { projectDir } = {}) {
+    if (!projectDir) return null;
+    const spec = findDesignSpec(projectDir);
+    if (!spec) return null;
+    const content = readFileSync(spec.path, "utf8");
+    const tokens = parseFrontmatter(content);
+    if (!tokens) return null;
+    const colors = extractColors(tokens);
+    return {
+      localPath: spec.path,
+      source: "local",
+      ext: ".md",
+      metadata: {
+        description: "Brand tokens from " + spec.name,
+        provider: "design_spec",
+        provenance: {
+          file: spec.name,
+          colors,
+          font: tokens.font || tokens.typography || null,
+          logo: tokens.logo || null,
+        },
+      },
+    };
+  },
+};
diff --git a/.claude/skills-media/media-use/scripts/lib/bundled-sfx-provider.mjs b/.claude/skills-media/media-use/scripts/lib/bundled-sfx-provider.mjs
new file mode 100644
index 000000000..7011b45fc
--- /dev/null
+++ b/.claude/skills-media/media-use/scripts/lib/bundled-sfx-provider.mjs
@@ -0,0 +1,108 @@
+import { existsSync, readFileSync } from "node:fs";
+import { extname, join } from "node:path";
+
+const LIB_DIR =
+  process.env.HYPERFRAMES_MEDIA_USE_SFX_DIR ||
+  join(import.meta.dirname, "..", "..", "audio", "assets", "sfx");
+
+export const BUNDLED_SFX_RECOVERY_COMMAND = "npx hyperframes skills update media-use";
+
+export class BundledSfxAssetsError extends Error {
+  constructor(health) {
+    super(
+      `bundled SFX assets are missing or incomplete (${health.detail}). Repair the installed media-use skill: ${health.fix}`,
+    );
+    this.name = "BundledSfxAssetsError";
+    this.code = health.code;
+    this.fix = health.fix;
+  }
+}
+
+function unhealthy(detail) {
+  return {
+    ok: false,
+    code: "bundled_sfx_assets_missing",
+    detail,
+    fix: BUNDLED_SFX_RECOVERY_COMMAND,
+  };
+}
+
+export function inspectBundledSfxAssets(libraryDir = LIB_DIR) {
+  const manifestPath = join(libraryDir, "manifest.json");
+  if (!existsSync(manifestPath)) return unhealthy(`manifest not found: ${manifestPath}`);
+
+  let manifest;
+  try {
+    manifest = JSON.parse(readFileSync(manifestPath, "utf8"));
+  } catch {
+    return unhealthy(`manifest is not valid JSON: ${manifestPath}`);
+  }
+  if (!manifest || typeof manifest !== "object" || Array.isArray(manifest)) {
+    return unhealthy(`manifest must contain an object: ${manifestPath}`);
+  }
+
+  const entries = Object.entries(manifest);
+  if (entries.length === 0) return unhealthy(`manifest contains no SFX entries: ${manifestPath}`);
+  for (const [key, entry] of entries) {
+    if (!entry?.file || typeof entry.file !== "string") {
+      return unhealthy(`manifest entry "${key}" has no file`);
+    }
+    const assetPath = join(libraryDir, entry.file);
+    if (!existsSync(assetPath)) return unhealthy(`asset not found: ${assetPath}`);
+  }
+
+  return {
+    ok: true,
+    count: entries.length,
+    detail: `${entries.length} bundled SFX asset${entries.length === 1 ? "" : "s"} available`,
+    fix: "",
+  };
+}
+
+const normalize = (value) =>
+  String(value)
+    .toLowerCase()
+    .replace(/[^a-z0-9]+/g, " ")
+    .trim();
+
+export function extensionForBundledSfxFile(filename) {
+  return extname(filename) || ".mp3";
+}
+
+function score(intent, key, entry) {
+  const query = normalize(intent);
+  const name = normalize(key);
+  if (query === name) return 100;
+  if (query.includes(name) || name.includes(query)) return 50;
+  const haystack = new Set(normalize(`${key} ${entry.description || ""}`).split(/\s+/));
+  return query.split(/\s+/).filter((token) => token && haystack.has(token)).length;
+}
+
+export const bundledSfxProvider = {
+  async search(intent, ctx = {}) {
+    const libraryDir = ctx.libraryDir || LIB_DIR;
+    const health = inspectBundledSfxAssets(libraryDir);
+    if (!health.ok) throw new BundledSfxAssetsError(health);
+    const manifest = JSON.parse(readFileSync(join(libraryDir, "manifest.json"), "utf8"));
+
+    const ranked = Object.entries(manifest)
+      .map(([key, entry]) => ({ key, entry, score: score(intent, key, entry) }))
+      .filter(({ entry, score }) => entry?.file && score > 0)
+      .sort((a, b) => b.score - a.score || a.key.localeCompare(b.key));
+    const best = ranked[0];
+    if (!best) return null;
+
+    const localPath = join(libraryDir, best.entry.file);
+    return {
+      localPath,
+      ext: extensionForBundledSfxFile(best.entry.file),
+      source: "bundled",
+      metadata: {
+        description: best.entry.description || best.key,
+        duration: best.entry.duration ?? null,
+        provider: "bundled.sfx",
+        provenance: { library_key: best.key },
+      },
+    };
+  },
+};
diff --git a/.claude/skills-media/media-use/scripts/lib/bundled-sfx-provider.test.mjs b/.claude/skills-media/media-use/scripts/lib/bundled-sfx-provider.test.mjs
new file mode 100644
index 000000000..869fe896f
--- /dev/null
+++ b/.claude/skills-media/media-use/scripts/lib/bundled-sfx-provider.test.mjs
@@ -0,0 +1,85 @@
+import { strict as assert } from "node:assert";
+import { mkdtempSync, mkdirSync, rmSync, writeFileSync } from "node:fs";
+import { tmpdir } from "node:os";
+import { join } from "node:path";
+import { test } from "node:test";
+import {
+  BUNDLED_SFX_RECOVERY_COMMAND,
+  BundledSfxAssetsError,
+  bundledSfxProvider,
+  extensionForBundledSfxFile,
+  inspectBundledSfxAssets,
+} from "./bundled-sfx-provider.mjs";
+
+test("derives bundled SFX extension from the manifest filename", () => {
+  assert.equal(extensionForBundledSfxFile("impact.wav"), ".wav");
+  assert.equal(extensionForBundledSfxFile("whoosh.ogg"), ".ogg");
+  assert.equal(extensionForBundledSfxFile("extensionless"), ".mp3");
+});
+
+test("reports an agent-friendly recovery when the bundled SFX manifest is absent", () => {
+  const libraryDir = mkdtempSync(join(tmpdir(), "media-use-sfx-missing-"));
+  try {
+    const health = inspectBundledSfxAssets(libraryDir);
+    assert.equal(health.ok, false);
+    assert.equal(health.code, "bundled_sfx_assets_missing");
+    assert.match(health.detail, /manifest\.json/);
+    assert.match(health.fix, /hyperframes skills update media-use/);
+    assert.equal(health.fix, BUNDLED_SFX_RECOVERY_COMMAND);
+  } finally {
+    rmSync(libraryDir, { recursive: true, force: true });
+  }
+});
+
+test("reports the exact missing file from an incomplete bundled SFX install", () => {
+  const libraryDir = mkdtempSync(join(tmpdir(), "media-use-sfx-incomplete-"));
+  try {
+    writeFileSync(
+      join(libraryDir, "manifest.json"),
+      JSON.stringify({ whoosh: { file: "whoosh.mp3", description: "transition" } }),
+    );
+    const health = inspectBundledSfxAssets(libraryDir);
+    assert.equal(health.ok, false);
+    assert.equal(health.code, "bundled_sfx_assets_missing");
+    assert.match(health.detail, /whoosh\.mp3/);
+  } finally {
+    rmSync(libraryDir, { recursive: true, force: true });
+  }
+});
+
+test("bundled provider raises a typed install error instead of a generic catalog miss", async () => {
+  const libraryDir = mkdtempSync(join(tmpdir(), "media-use-sfx-provider-"));
+  try {
+    await assert.rejects(
+      () => bundledSfxProvider.search("whoosh", { libraryDir }),
+      (error) => {
+        assert.ok(error instanceof BundledSfxAssetsError);
+        assert.equal(error.code, "bundled_sfx_assets_missing");
+        assert.match(error.message, /hyperframes skills update media-use/);
+        return true;
+      },
+    );
+  } finally {
+    rmSync(libraryDir, { recursive: true, force: true });
+  }
+});
+
+test("accepts a complete bundled SFX library", () => {
+  const libraryDir = mkdtempSync(join(tmpdir(), "media-use-sfx-complete-"));
+  try {
+    mkdirSync(libraryDir, { recursive: true });
+    writeFileSync(
+      join(libraryDir, "manifest.json"),
+      JSON.stringify({ whoosh: { file: "whoosh.mp3", description: "transition" } }),
+    );
+    writeFileSync(join(libraryDir, "whoosh.mp3"), "audio");
+    assert.deepEqual(inspectBundledSfxAssets(libraryDir), {
+      ok: true,
+      count: 1,
+      detail: "1 bundled SFX asset available",
+      fix: "",
+    });
+  } finally {
+    rmSync(libraryDir, { recursive: true, force: true });
+  }
+});
diff --git a/.claude/skills-media/media-use/scripts/lib/cache.mjs b/.claude/skills-media/media-use/scripts/lib/cache.mjs
new file mode 100644
index 000000000..c7c7d6f71
--- /dev/null
+++ b/.claude/skills-media/media-use/scripts/lib/cache.mjs
@@ -0,0 +1,150 @@
+import { readFileSync, writeFileSync, mkdirSync, existsSync, copyFileSync } from "node:fs";
+import { join, basename } from "node:path";
+import { createHash } from "node:crypto";
+import { homedir } from "node:os";
+import { readManifest, appendRecord, normalizePrompt } from "./manifest.mjs";
+
+const SCHEMA_PREFIX = "mu-v1-";
+const KEY_HEX_CHARS = 16;
+const COMPLETE_SENTINEL = ".hf-complete";
+
+export function globalMediaDir() {
+  return join(homedir(), ".media");
+}
+
+export function contentHash(filePath) {
+  const bytes = readFileSync(filePath);
+  return createHash("sha256").update(bytes).digest("hex");
+}
+
+function cacheEntryDir(rootDir, sha) {
+  return join(rootDir, SCHEMA_PREFIX + sha.slice(0, KEY_HEX_CHARS));
+}
+
+function isComplete(entryDir) {
+  return existsSync(join(entryDir, COMPLETE_SENTINEL));
+}
+
+function markComplete(entryDir) {
+  writeFileSync(join(entryDir, COMPLETE_SENTINEL), "", "utf8");
+}
+
+// The manifest helpers append their own ".media" to the dir they get, so the
+// global manifest must be addressed by HOME, not by globalMediaDir() — passing
+// the latter nested it at ~/.media/.media/manifest.jsonl, invisible to the
+// Studio /api/assets/global route (which reads the documented flat path).
+export function readGlobalManifest() {
+  return readManifest(homedir());
+}
+
+// Resolve a content-sha (full or unambiguous prefix) to a reusable global-cache
+// record, for `resolve --reuse <sha>`. Returns null on no match, or
+// { ambiguous: true, count } when a prefix matches multiple distinct entries.
+// Completeness (the .hf-complete sentinel) is left to importFromCache so the
+// caller can surface an "incomplete cache entry" error distinctly from a miss.
+export function findGlobalBySha(shaPrefix) {
+  const p = String(shaPrefix || "")
+    .toLowerCase()
+    .trim();
+  if (!p) return null;
+  const matches = readGlobalManifest().filter(
+    (r) => r.reusable && typeof r.sha === "string" && r.sha.startsWith(p),
+  );
+  if (matches.length === 0) return null;
+  if (matches.length > 1) {
+    const exact = matches.find((r) => r.sha === p);
+    if (exact) return exact;
+    return { ambiguous: true, count: matches.length };
+  }
+  return matches[0];
+}
+
+function validateCacheHit(match) {
+  if (!match?.sha) return null;
+  return isComplete(cacheEntryDir(globalMediaDir(), match.sha)) ? match : null;
+}
+
+export function cacheGet(prompt, type) {
+  const key = normalizePrompt(prompt);
+  if (!key) return null;
+  return validateCacheHit(
+    readGlobalManifest().find(
+      (r) =>
+        r.reusable &&
+        normalizePrompt(r.provenance?.prompt) === key &&
+        (type == null || r.type === type),
+    ),
+  );
+}
+
+export function cacheGetByEntity(entity) {
+  const lower = entity.toLowerCase();
+  return validateCacheHit(
+    readGlobalManifest().find((r) => r.reusable && r.entity && r.entity.toLowerCase() === lower),
+  );
+}
+
+export function cachePut(filePath, record) {
+  const sha = contentHash(filePath);
+  // Idempotent: same content already promoted -> don't duplicate the global
+  // record. ponytail: skips usage_count bump; add it when the metric is needed.
+  const existing = readGlobalManifest().find((r) => r.sha === sha);
+  if (existing) return { sha, cached_path: existing.cached_path, deduped: true };
+
+  const dir = globalMediaDir();
+  const entryDir = cacheEntryDir(dir, sha);
+  mkdirSync(entryDir, { recursive: true });
+
+  const dest = join(entryDir, basename(filePath));
+  copyFileSync(filePath, dest);
+  markComplete(entryDir);
+
+  const globalRecord = {
+    ...record,
+    sha,
+    reusable: true,
+    cached_path: dest,
+  };
+  appendRecord(homedir(), globalRecord);
+  return { sha, cached_path: dest };
+}
+
+export function importFromCache(cacheRecord, projectDir, localId, localPath) {
+  const sha = cacheRecord.sha;
+  const entryDir = cacheEntryDir(globalMediaDir(), sha);
+  if (!isComplete(entryDir)) return null;
+
+  const cachedFile = cacheRecord.cached_path;
+  if (!cachedFile || !existsSync(cachedFile)) return null;
+
+  mkdirSync(join(projectDir, ".media"), { recursive: true });
+  const fullDest = join(projectDir, localPath);
+  mkdirSync(join(fullDest, ".."), { recursive: true });
+  copyFileSync(cachedFile, fullDest);
+
+  const projectRecord = {
+    ...cacheRecord,
+    id: localId,
+    path: localPath,
+    provenance: {
+      ...cacheRecord.provenance,
+      imported_from: sha,
+    },
+  };
+  delete projectRecord.sha;
+  delete projectRecord.reusable;
+  delete projectRecord.cached_path;
+
+  return projectRecord;
+}
+
+export function promote(projectDir, id) {
+  const records = readManifest(projectDir);
+  const record = records.find((r) => r.id === id);
+  if (!record) throw new Error(`asset not found in project manifest: ${id}`);
+
+  const filePath = join(projectDir, record.path);
+  if (!existsSync(filePath)) throw new Error(`asset file not found: ${filePath}`);
+
+  return cachePut(filePath, record);
+}
diff --git a/.claude/skills-media/media-use/scripts/lib/candidates.mjs b/.claude/skills-media/media-use/scripts/lib/candidates.mjs
new file mode 100644
index 000000000..c8ecff055
--- /dev/null
+++ b/.claude/skills-media/media-use/scripts/lib/candidates.mjs
@@ -0,0 +1,91 @@
+// Reuse candidates: a side-effect-free view of assets already available to this
+// project (its own manifest) and across every project (the global ~/.media
+// cache), so the calling agent can judge semantic fit itself. No download, no
+// provider, no mutation. The ranker only *surfaces* — it orders by lexical
+// overlap but never filters a candidate out on zero overlap (that would
+// pre-empt the agent's judgment); the agent does the semantic call.
+
+import { readManifest } from "./manifest.mjs";
+import { readGlobalManifest } from "./cache.mjs";
+import { tokenOverlap, typesMatch } from "./match.mjs";
+
+export const CANDIDATE_CAP = 8;
+
+function shape(record, scope, intent) {
+  const description = record.description || record.provenance?.prompt || "";
+  const prompt = record.provenance?.prompt || null;
+  return {
+    id: record.id,
+    type: record.type,
+    scope,
+    description,
+    prompt,
+    provider: record.provenance?.provider || null,
+    duration: record.duration ?? null,
+    width: record.width ?? null,
+    height: record.height ?? null,
+    // Only global records carry a content sha — it is the stable reuse handle
+    // for `resolve --reuse <sha>`. Project assets are reused by referencing
+    // their path directly, so they need no handle.
+    sha: scope === "global" ? record.sha || null : null,
+    path: scope === "project" ? record.path : null,
+    score: intent ? tokenOverlap(intent, `${description} ${prompt || ""}`) : 0,
+  };
+}
+
+// Rank one scope: type-matched (icon<->image aware), newest-first within equal
+// overlap, ordered by overlap desc. Returns the full ranked list (uncapped).
+function rankScope(records, scope, type, intent) {
+  return records
+    .filter((r) => typesMatch(r.type, type))
+    .reverse() // manifest is append-order (oldest first); newest-first at equal score
+    .map((r) => shape(r, scope, intent))
+    .sort((a, b) => b.score - a.score); // Array.sort is stable → recency preserved
+}
+
+// List reuse candidates for `type`, capped per scope. Returns:
+//   candidates: capped project candidates followed by capped global candidates
+//   truncated:  true if either scope had more than `cap`
+//   total:      { project, global } counts before the cap (machine-readable)
+//   similar:    count of candidates with lexical overlap > 0 (drives the nudge)
+export function listCandidates({ projectDir, type, intent = "", cap = CANDIDATE_CAP }) {
+  const project = rankScope(readManifest(projectDir), "project", type, intent);
+  const global = rankScope(readGlobalManifest(), "global", type, intent);
+  const candidates = [...project.slice(0, cap), ...global.slice(0, cap)];
+  return {
+    candidates,
+    truncated: project.length > cap || global.length > cap,
+    total: { project: project.length, global: global.length },
+    similar: [...project, ...global].filter((c) => c.score > 0).length,
+  };
+}
+
+function meta(c) {
+  const parts = [];
+  if (c.duration != null) parts.push(`${c.duration}s`);
+  if (c.width && c.height) parts.push(`${c.width}x${c.height}`);
+  if (c.provider) parts.push(c.provider);
+  return parts.join(", ");
+}
+
+// Human-readable listing. The agent can read this directly; --json is for
+// programmatic use. Reuse handle differs by scope: path for project, sha for
+// global.
+export function formatCandidates(candidates, { truncated, total } = {}) {
+  if (candidates.length === 0) return "no reuse candidates found (project or global cache)";
+  const lines = [`${candidates.length} reuse candidate${candidates.length === 1 ? "" : "s"}:`, ""];
+  for (const c of candidates) {
+    const handle =
+      c.scope === "global" ? `--reuse ${String(c.sha).slice(0, 16)}` : c.path || `manifest:${c.id}`;
+    const m = meta(c);
+    lines.push(`  [${c.scope}] ${c.description}${m ? ` (${m})` : ""}`);
+    lines.push(`          ${handle}`);
+  }
+  if (truncated && total) {
+    lines.push("");
+    lines.push(
+      `  (showing top ${CANDIDATE_CAP} per scope; ${total.project} project / ${total.global} global total — refine --intent to narrow)`,
+    );
+  }
+  return lines.join("\n");
+}
diff --git a/.claude/skills-media/media-use/scripts/lib/candidates.test.mjs b/.claude/skills-media/media-use/scripts/lib/candidates.test.mjs
new file mode 100644
index 000000000..972577b3c
--- /dev/null
+++ b/.claude/skills-media/media-use/scripts/lib/candidates.test.mjs
@@ -0,0 +1,155 @@
+import { test } from "node:test";
+import { strict as assert } from "node:assert";
+import { mkdtempSync, rmSync, mkdirSync, writeFileSync } from "node:fs";
+import { join } from "node:path";
+import { tmpdir } from "node:os";
+import { listCandidates, formatCandidates, CANDIDATE_CAP } from "./candidates.mjs";
+import { findGlobalBySha } from "./cache.mjs";
+
+// candidates + findGlobalBySha are offline (no heygen), so we can override HOME
+// to a temp dir and seed a fake global ~/.media manifest deterministically.
+function sandbox() {
+  const root = mkdtempSync(join(tmpdir(), "mu-cand-"));
+  const project = join(root, "proj");
+  const home = join(root, "home");
+  process.env.HOME = home;
+  return { root, project, home };
+}
+function seedManifest(dir, records) {
+  const md = join(dir, ".media");
+  mkdirSync(md, { recursive: true });
+  writeFileSync(md + "/manifest.jsonl", records.map((r) => JSON.stringify(r)).join("\n") + "\n");
+}
+function proj(id, type, description, prompt) {
+  return { id, type, path: `.media/audio/bgm/${id}.wav`, description, provenance: { prompt } };
+}
+function glob(id, type, description, prompt, sha) {
+  return {
+    id,
+    type,
+    sha,
+    reusable: true,
+    cached_path: `/x/${sha}/${id}.wav`,
+    description,
+    provenance: { prompt, provider: "heygen.audio.sounds" },
+  };
+}
+
+test("ranks project + global by overlap, tags scope", () => {
+  const { root, project, home } = sandbox();
+  try {
+    seedManifest(project, [proj("bgm_001", "bgm", "calm ambient piano", "calm ambient piano")]);
+    seedManifest(home, [
+      glob("bgm_009", "bgm", "energetic tech launch", "energetic tech launch", "a".repeat(64)),
+      glob("bgm_010", "bgm", "sad corporate piano", "sad corporate piano", "b".repeat(64)),
+    ]);
+    const { candidates } = listCandidates({
+      projectDir: project,
+      type: "bgm",
+      intent: "tech launch",
+    });
+    assert.equal(candidates[0].scope, "project"); // project listed first
+    const g = candidates.filter((c) => c.scope === "global");
+    assert.equal(g[0].description, "energetic tech launch"); // higher overlap ranks first
+    assert.ok(g[0].score >= g[1].score);
+  } finally {
+    rmSync(root, { recursive: true, force: true });
+  }
+});
+
+test("zero-overlap intent still lists candidates (no hard filter)", () => {
+  const { root, project, home } = sandbox();
+  try {
+    seedManifest(project, []);
+    seedManifest(home, [glob("bgm_009", "bgm", "driving synth", "driving synth", "c".repeat(64))]);
+    const { candidates, similar } = listCandidates({
+      projectDir: project,
+      type: "bgm",
+      intent: "totally unrelated words xyz",
+    });
+    assert.equal(candidates.length, 1, "listed despite zero overlap");
+    assert.equal(candidates[0].score, 0);
+    assert.equal(similar, 0, "similar counts only overlap>0");
+  } finally {
+    rmSync(root, { recursive: true, force: true });
+  }
+});
+
+test("caps per scope and reports truncation + totals", () => {
+  const { root, project, home } = sandbox();
+  try {
+    const many = Array.from({ length: CANDIDATE_CAP + 3 }, (_, i) =>
+      glob(`bgm_${i}`, "bgm", `track ${i}`, `track ${i}`, String(i).padStart(64, "0")),
+    );
+    seedManifest(project, []);
+    seedManifest(home, many);
+    const { candidates, truncated, total } = listCandidates({ projectDir: project, type: "bgm" });
+    assert.equal(candidates.length, CANDIDATE_CAP);
+    assert.equal(truncated, true);
+    assert.equal(total.global, CANDIDATE_CAP + 3);
+  } finally {
+    rmSync(root, { recursive: true, force: true });
+  }
+});
+
+test("honors icon<->image adjacency", () => {
+  const { root, project, home } = sandbox();
+  try {
+    seedManifest(project, []);
+    seedManifest(home, [glob("image_1", "image", "rocket logo", "rocket logo", "d".repeat(64))]);
+    const { candidates } = listCandidates({ projectDir: project, type: "icon", intent: "rocket" });
+    assert.equal(candidates.length, 1, "image asset surfaces for icon request");
+  } finally {
+    rmSync(root, { recursive: true, force: true });
+  }
+});
+
+test("sha only on global, path only on project", () => {
+  const { root, project, home } = sandbox();
+  try {
+    seedManifest(project, [proj("bgm_001", "bgm", "x", "x")]);
+    seedManifest(home, [glob("bgm_009", "bgm", "y", "y", "e".repeat(64))]);
+    const { candidates } = listCandidates({ projectDir: project, type: "bgm" });
+    const p = candidates.find((c) => c.scope === "project");
+    const g = candidates.find((c) => c.scope === "global");
+    assert.ok(p.path && !p.sha);
+    assert.ok(g.sha && !g.path);
+  } finally {
+    rmSync(root, { recursive: true, force: true });
+  }
+});
+
+test("findGlobalBySha resolves unique prefix, flags ambiguity, misses cleanly", () => {
+  const { root, project, home } = sandbox();
+  try {
+    seedManifest(project, []);
+    seedManifest(home, [
+      glob("bgm_1", "bgm", "a", "a", "abc" + "0".repeat(61)),
+      glob("bgm_2", "bgm", "b", "b", "abd" + "0".repeat(61)),
+      glob("bgm_3", "bgm", "c", "c", "fff" + "0".repeat(61)),
+    ]);
+    assert.equal(findGlobalBySha("fff").id, "bgm_3", "unique prefix resolves");
+    assert.deepEqual(
+      { ambiguous: findGlobalBySha("ab").ambiguous, count: findGlobalBySha("ab").count },
+      { ambiguous: true, count: 2 },
+      "ambiguous prefix flagged",
+    );
+    assert.equal(findGlobalBySha("zzz"), null, "miss returns null");
+    assert.equal(findGlobalBySha(""), null, "empty returns null");
+  } finally {
+    rmSync(root, { recursive: true, force: true });
+  }
+});
+
+test("formatCandidates shows reuse handles by scope; empty message", () => {
+  const { candidates } = {
+    candidates: [
+      { scope: "project", description: "p", path: ".media/audio/bgm/bgm_001.wav" },
+      { scope: "global", description: "g", sha: "f".repeat(64) },
+    ],
+  };
+  const out = formatCandidates(candidates, {});
+  assert.match(out, /\.media\/audio\/bgm\/bgm_001\.wav/);
+  assert.match(out, /--reuse ffffffffffffffff/);
+  assert.match(formatCandidates([], {}), /no reuse candidates/);
+});
diff --git a/.claude/skills-media/media-use/scripts/lib/codex-provider.mjs b/.claude/skills-media/media-use/scripts/lib/codex-provider.mjs
new file mode 100644
index 000000000..f64fc3628
--- /dev/null
+++ b/.claude/skills-media/media-use/scripts/lib/codex-provider.mjs
@@ -0,0 +1,143 @@
+import { execFileSync } from "node:child_process";
+import { copyFileSync, existsSync, readdirSync, statSync, unlinkSync } from "node:fs";
+import { homedir, tmpdir } from "node:os";
+import { join } from "node:path";
+
+// Image generation via the OpenAI Codex CLI's built-in image tool (gpt-image-2)
+// on the user's ChatGPT subscription: the codex CLI owns auth, media-use holds
+// no key (CLI-only). The image UPSELL behind local mflux; skipped by --local-only.
+//
+// Retrieval mirrors illo-skill rather than trusting the model to save a file:
+// `--enable imagegenext` makes the built-in tool drop the rendered artifact into
+// $CODEX_HOME/generated_images/, and we fetch the freshest file that postdates
+// this run. The save-to-path instruction is only a best-effort verify-first.
+
+const TIMEOUT_MS = 600000; // codex exec round-trips the sub; first-run tool spin-up is slow
+const MTIME_SKEW_MS = 2000; // tolerate mtime granularity / clock skew (illo uses 2s)
+
+function codexGeneratedDir() {
+  // Codex relocates CODEX_HOME on some hosts, so resolve it at run time.
+  return join(process.env.CODEX_HOME || join(homedir(), ".codex"), "generated_images");
+}
+
+// Newest artifact that postdates `sinceMs` (minus skew), so a stale prior render
+// or a concurrent session's file can't be mistaken for this run's output.
+function freshestGeneratedImage(sinceMs) {
+  const dir = codexGeneratedDir();
+  if (!existsSync(dir)) return null;
+  const floor = sinceMs - MTIME_SKEW_MS;
+  let best = null;
+  for (const name of readdirSync(dir)) {
+    let st;
+    try {
+      st = statSync(join(dir, name));
+    } catch {
+      continue;
+    }
+    if (!st.isFile() || st.mtimeMs < floor) continue;
+    if (!best || st.mtimeMs > best.mtimeMs) best = { path: join(dir, name), mtimeMs: st.mtimeMs };
+  }
+  return best?.path ?? null;
+}
+
+// Short `codex` subcommand → combined stdout+stderr, or null if it can't run.
+function codexRun(args) {
+  try {
+    return execFileSync("codex", args, {
+      encoding: "utf8",
+      stdio: ["ignore", "pipe", "pipe"],
+      timeout: 10000,
+    });
+  } catch (err) {
+    return `${err.stdout?.toString() ?? ""}${err.stderr?.toString() ?? ""}` || null;
+  }
+}
+
+// Fail-fast host check (mirrors illo): don't burn a minutes-long exec when Codex
+// isn't usable. Returns null when ready, else a human reason. imagegenext ships
+// default-disabled ("under development"), so we check the ROW is present (the
+// capability signal) — the exec enables it per-render with --enable.
+function codexUnavailableReason() {
+  try {
+    const which = process.platform === "win32" ? "where" : "which";
+    execFileSync(which, ["codex"], { stdio: ["ignore", "ignore", "ignore"], timeout: 5000 });
+  } catch {
+    // A shell alias (e.g. `codex → /Applications/Codex.app/...`) is NOT enough:
+    // aliases live only in the interactive shell, so a spawned subprocess's PATH
+    // lookup can't see them. Symlink the real binary onto PATH.
+    return 'codex CLI not reachable on PATH (a shell alias won\'t work — spawned processes can\'t see aliases; symlink the real binary onto PATH, e.g. ln -s "$(readlink -f "$(command -v codex)")" ~/.local/bin/codex)';
+  }
+  // Auth marker: presence of the credentials file, NOT `codex login status`.
+  // That command prints "Logged in using ChatGPT" only to a human stream
+  // (stderr / TTY) and exits 0, so its piped stdout — how media-use spawns it —
+  // is empty, and the gate falsely reported "not logged in", blocking codex
+  // image gen in every headless / CI / agent run even when fully authed.
+  // auth.json is the durable, TTY-independent signal; token validity is proven
+  // by the exec itself, which fails cleanly if the login is stale.
+  const authPath = join(process.env.CODEX_HOME || join(homedir(), ".codex"), "auth.json");
+  if (!existsSync(authPath)) return "codex not logged in (run: codex login)";
+  const feats = codexRun(["features", "list"]);
+  if (feats == null) return "could not read `codex features list`";
+  if (!/\bimage_generation\b/.test(feats)) return "codex image_generation feature unavailable";
+  if (!/\bimagegenext\b/.test(feats)) return "codex imagegenext unavailable (upgrade Codex CLI)";
+  return null;
+}
+
+export async function codexImageGenerate(intent) {
+  const unavailable = codexUnavailableReason();
+  if (unavailable) {
+    console.error(`media-use: codex image upsell unavailable: ${unavailable}`);
+    return null;
+  }
+  const outPath = join(tmpdir(), `media-use-codex-${process.pid}-${Date.now()}.png`);
+  const prompt =
+    `${intent}\n\n` +
+    `Use your built-in image generation tool to render this, then save the image ` +
+    `to ${outPath} (overwrite if it exists). Do not ask for confirmation. ` +
+    `If you have no built-in image tool, do nothing (no PIL/matplotlib/SVG substitute).`;
+  try {
+    unlinkSync(outPath); // clear any prior file so verify-first can't accept a stale render
+  } catch {
+    /* no prior file */
+  }
+  const started = Date.now();
+  try {
+    execFileSync(
+      "codex",
+      [
+        "exec",
+        "--cd",
+        tmpdir(),
+        "-s",
+        "workspace-write",
+        "--skip-git-repo-check",
+        "--enable",
+        "imagegenext",
+        "-",
+      ],
+      { input: prompt, encoding: "utf8", timeout: TIMEOUT_MS, stdio: ["pipe", "pipe", "pipe"] },
+    );
+  } catch (err) {
+    console.error(
+      `media-use: \`codex exec\` image generation failed: ${err.stderr?.toString().trim().slice(-200) || err.message}`,
+    );
+    return null;
+  }
+  // Verify-first (save-to-path may have worked), else fetch the imagegenext artifact.
+  const produced =
+    existsSync(outPath) && statSync(outPath).size > 0 ? outPath : freshestGeneratedImage(started);
+  if (!produced) return null;
+  if (produced !== outPath) {
+    try {
+      copyFileSync(produced, outPath);
+    } catch {
+      return null;
+    }
+  }
+  return {
+    localPath: outPath,
+    ext: ".png",
+    source: "generated",
+    metadata: { description: intent, provider: "codex.image_gen", provenance: { prompt: intent } },
+  };
+}
diff --git a/.claude/skills-media/media-use/scripts/lib/coverage.test.mjs b/.claude/skills-media/media-use/scripts/lib/coverage.test.mjs
new file mode 100644
index 000000000..c1267f80c
--- /dev/null
+++ b/.claude/skills-media/media-use/scripts/lib/coverage.test.mjs
@@ -0,0 +1,117 @@
+import { strict as assert } from "node:assert";
+import { test } from "node:test";
+import { existsSync } from "node:fs";
+import { join, dirname } from "node:path";
+import { fileURLToPath } from "node:url";
+import { listTypes, getProviders } from "./registry.mjs";
+import { CAPABILITIES, listModels } from "./local-models.mjs";
+
+// Capstone: media-use must actually OWN each hyperframes media weakness. This
+// test enforces the weakness→owner matrix in SKILL.md so a claim can't rot — if
+// a capability's entrypoint disappears, this fails.
+
+const SKILL = join(dirname(fileURLToPath(import.meta.url)), "..", "..");
+
+test("weakness: audio-only → media-use resolves image + icon", () => {
+  for (const t of ["image", "icon"]) {
+    assert.ok(getProviders(t).length > 0, `no provider for ${t}`);
+  }
+});
+
+test("weakness: no third-party brand logos → media-use resolves logo", () => {
+  assert.ok(listTypes().includes("logo"), "logo type missing");
+  assert.ok(getProviders("logo").length >= 4, "logo cascade incomplete");
+});
+
+test("weakness: no voice/audio gen → media-use exposes voice + the audio engine", () => {
+  assert.ok(listTypes().includes("voice"), "voice type missing");
+  assert.ok(getProviders("voice").length > 0, "no enabled voice provider (Bin approved)");
+  assert.ok(existsSync(join(SKILL, "audio", "scripts", "audio.mjs")), "audio engine missing");
+});
+
+test("weakness: scattered audio engine → consolidated under media-use (hyperframes-media gone)", () => {
+  assert.ok(existsSync(join(SKILL, "audio", "scripts", "lib", "tts.mjs")), "tts engine missing");
+  assert.ok(
+    existsSync(join(SKILL, "audio", "assets", "sfx", "manifest.json")),
+    "bundled SFX missing",
+  );
+});
+
+test("weakness: no media-ops → ops guidance reference exists", () => {
+  assert.ok(existsSync(join(SKILL, "references", "operations.md")), "operations.md missing");
+});
+
+test("weakness: no transcript-driven cutting → cut compiler entrypoints exist", async () => {
+  assert.ok(existsSync(join(SKILL, "scripts", "transcript-cut.mjs")), "transcript-cut missing");
+  assert.ok(existsSync(join(SKILL, "scripts", "lib", "cutlist.mjs")), "cutlist lib missing");
+  const cutlist = await import("./cutlist.mjs");
+  assert.equal(typeof cutlist.compileCutList, "function");
+});
+
+test("weakness: whisper.cpp is weak → better local ASR (Parakeet) entrypoint exists", async () => {
+  assert.ok(existsSync(join(SKILL, "scripts", "transcribe.mjs")), "transcribe.mjs missing");
+  const pw = await import("./parakeet-words.mjs");
+  assert.equal(typeof pw.mergeTokensToWords, "function", "token->word merge missing");
+  const lm = await import("./local-models.mjs");
+  const asr = lm.listModels("asr");
+  const parakeet = asr.find((m) => m.id === "parakeet-mlx");
+  assert.ok(parakeet && parakeet.rank === 0, "Parakeet must be the rank-0 preferred ASR");
+});
+
+test("weakness: no auto-duck/loudness → duck compiler and recipes exist", async () => {
+  assert.ok(existsSync(join(SKILL, "scripts", "audio-duck.mjs")), "audio-duck missing");
+  assert.ok(existsSync(join(SKILL, "scripts", "lib", "duck.mjs")), "duck lib missing");
+  assert.ok(existsSync(join(SKILL, "references", "operations.md")), "operations.md missing");
+  const duck = await import("./duck.mjs");
+  assert.equal(typeof duck.speechSpans, "function");
+  assert.equal(typeof duck.duckKeyframes, "function");
+});
+
+test("weakness: no cross-project memory → global cache + ingest entrypoints exist", async () => {
+  const cache = await import("./cache.mjs");
+  assert.equal(typeof cache.cachePut, "function");
+  assert.equal(typeof cache.promote, "function");
+  assert.equal(typeof cache.globalMediaDir, "function");
+  const freeze = await import("./freeze.mjs");
+  assert.equal(typeof freeze.isDirectMediaUrl, "function", "ingest URL guard missing");
+});
+
+// Wenbo (06-29): heygen free-usage is the default; local models are the opt-out
+// fallback ("if user no, then local"). We still assert the fallback table is
+// populated so the opt-out path stays real.
+test("weakness: weak local defaults → local models exist as the opt-out fallback (tts/asr/upscale)", () => {
+  for (const cap of ["tts", "asr", "upscale"]) {
+    assert.ok(CAPABILITIES.includes(cap), `capability ${cap} missing`);
+    assert.ok(listModels(cap).length > 0, `no local models for ${cap}`);
+  }
+});
+
+test("weakness: no image generation → local mflux (RAM-graded) + codex upsell", async () => {
+  const ps = getProviders("image");
+  assert.ok(
+    ps.some((p) => p.name === "mflux.local" && typeof p.generate === "function"),
+    "local image gen missing",
+  );
+  assert.ok(
+    ps.some((p) => p.name === "codex.image_gen" && typeof p.generate === "function"),
+    "codex image upsell missing",
+  );
+  const lm = await import("./local-models.mjs");
+  assert.ok(lm.CAPABILITIES.includes("imagegen"), "imagegen capability missing");
+  assert.ok(lm.listModels("imagegen").length >= 3, "imagegen RAM ladder too small");
+  assert.equal(typeof lm.describeModelLadder, "function", "agent-facing ladder missing");
+});
+
+test("weakness: no video generation → local videogen ladder + heygen avatar upsell", async () => {
+  const lm = await import("./local-models.mjs");
+  assert.ok(lm.CAPABILITIES.includes("videogen"), "videogen capability missing");
+  assert.ok(lm.listModels("videogen").length >= 2, "videogen ladder too small");
+  const ops = existsSync(join(SKILL, "references", "operations.md"));
+  assert.ok(ops, "operations.md (avatar-upsell recipe) missing");
+});
+
+test("every resolve type has at least one enabled provider", () => {
+  for (const t of listTypes()) {
+    assert.ok(getProviders(t).length > 0, `type ${t} has no enabled provider`);
+  }
+});
diff --git a/.claude/skills-media/media-use/scripts/lib/cube-build.mjs b/.claude/skills-media/media-use/scripts/lib/cube-build.mjs
new file mode 100644
index 000000000..92b8f2012
--- /dev/null
+++ b/.claude/skills-media/media-use/scripts/lib/cube-build.mjs
@@ -0,0 +1,181 @@
+const DEFAULT_SIZE = 33;
+const MAX_SIZE = 64;
+
+function clamp(value, min, max) {
+  if (!Number.isFinite(value)) return 0;
+  return Math.min(max, Math.max(min, value));
+}
+
+function clampUnit(value) {
+  return clamp(value, 0, 1);
+}
+
+function readParam(params, key, min, max) {
+  return clamp(Number(params?.[key] ?? 0), min, max);
+}
+
+function luma([r, g, b]) {
+  // Rec.709 luma weightings (matches the color space the grading runtime uses).
+  return r * 0.2126 + g * 0.7152 + b * 0.0722;
+}
+
+function smoothstep(edge0, edge1, value) {
+  const t = clampUnit((value - edge0) / (edge1 - edge0));
+  return t * t * (3 - 2 * t);
+}
+
+function applyLiftGain(color, params) {
+  const y = luma(color);
+  const blacks = readParam(params, "blacks", -1, 1);
+  const shadows = readParam(params, "shadows", -1, 1);
+  const highlights = readParam(params, "highlights", -1, 1);
+  const whites = readParam(params, "whites", -1, 1);
+  const shadowMask = 1 - smoothstep(0.18, 0.62, y);
+  const highlightMask = smoothstep(0.38, 0.82, y);
+  const offset =
+    blacks * 0.08 + shadows * 0.12 * shadowMask + highlights * 0.12 * highlightMask + whites * 0.08;
+  return color.map((channel) => clampUnit(channel + offset));
+}
+
+function applyExposure(color, params) {
+  const exposure = readParam(params, "exposure", -2, 2);
+  const gain = 2 ** exposure;
+  const lift = Math.max(0, exposure) * 0.015;
+  return color.map((channel) => clampUnit(channel * gain + lift));
+}
+
+function applyContrast(color, params) {
+  const contrast = readParam(params, "contrast", -1, 1);
+  if (contrast === 0) return color;
+  const factor = 1 + contrast * 1.2;
+  return color.map((channel) => clampUnit(0.5 + (channel - 0.5) * factor));
+}
+
+function applyWhiteBalance(color, params) {
+  const temperature = readParam(params, "temperature", -1, 1);
+  const tint = readParam(params, "tint", -1, 1);
+  const redScale = 1 + temperature * 0.28 + tint * 0.08;
+  const greenScale = 1 - Math.abs(tint) * 0.1 - tint * 0.08;
+  const blueScale = 1 - temperature * 0.28 + tint * 0.08;
+  return [
+    clampUnit(color[0] * redScale),
+    clampUnit(color[1] * greenScale),
+    clampUnit(color[2] * blueScale),
+  ];
+}
+
+function applySplitTone(color, params) {
+  const split = params?.splitTone;
+  if (!split) return color;
+  const intensity = clampUnit(Number(split.intensity ?? 0));
+  if (intensity === 0) return color;
+  const balance = clampUnit(Number(split.balance ?? 0.5));
+  const y = luma(color);
+  const shadowMask = 1 - smoothstep(balance - 0.25, balance + 0.2, y);
+  const highlightMask = smoothstep(balance - 0.2, balance + 0.25, y);
+  const shadows = Array.isArray(split.shadows) ? split.shadows : [0, 0, 0];
+  const highlights = Array.isArray(split.highlights) ? split.highlights : [0, 0, 0];
+  return color.map((channel, i) =>
+    clampUnit(
+      channel +
+        Number(shadows[i] ?? 0) * shadowMask * intensity +
+        Number(highlights[i] ?? 0) * highlightMask * intensity,
+    ),
+  );
+}
+
+function applySaturation(color, params) {
+  const saturation = readParam(params, "saturation", -1, 1);
+  const vibrance = readParam(params, "vibrance", -1, 1);
+  if (saturation === 0 && vibrance === 0) return color;
+  const y = luma(color);
+  const currentSat = Math.max(
+    Math.abs(color[0] - y),
+    Math.abs(color[1] - y),
+    Math.abs(color[2] - y),
+  );
+  const vibranceWeight = 1 - clampUnit(currentSat * 2);
+  const factor = clamp(1 + saturation + vibrance * vibranceWeight, 0, 2.5);
+  return color.map((channel) => clampUnit(y + (channel - y) * factor));
+}
+
+function applyParams(color, params) {
+  let out = applyLiftGain(color, params);
+  out = applyExposure(out, params);
+  out = applyContrast(out, params);
+  out = applyWhiteBalance(out, params);
+  out = applySplitTone(out, params);
+  out = applySaturation(out, params);
+  return out;
+}
+
+function formatNumber(value) {
+  return clampUnit(value).toFixed(6);
+}
+
+export function buildCube(params = {}, size = DEFAULT_SIZE) {
+  if (!Number.isInteger(size) || size < 2 || size > MAX_SIZE) {
+    throw new Error(`LUT size must be an integer from 2 to ${MAX_SIZE}`);
+  }
+  const lines = [
+    `TITLE "media-use parametric grade"`,
+    "DOMAIN_MIN 0 0 0",
+    "DOMAIN_MAX 1 1 1",
+    `LUT_3D_SIZE ${size}`,
+  ];
+  const denom = size - 1;
+  for (let b = 0; b < size; b++) {
+    for (let g = 0; g < size; g++) {
+      for (let r = 0; r < size; r++) {
+        const out = applyParams([r / denom, g / denom, b / denom], params);
+        lines.push(`${formatNumber(out[0])} ${formatNumber(out[1])} ${formatNumber(out[2])}`);
+      }
+    }
+  }
+  return `${lines.join("\n")}\n`;
+}
+
+export function paramsFromIntent(intent) {
+  const text = String(intent ?? "").toLowerCase();
+  const params = {};
+  let matched = false;
+
+  if (/\b(warm|golden|sunlit|sunny)\b/.test(text)) {
+    params.temperature = 0.18;
+    matched = true;
+  } else if (/\b(cool|blue|icy|crisp)\b/.test(text)) {
+    params.temperature = -0.16;
+    matched = true;
+  }
+
+  if (/\b(cinematic|film|movie)\b/.test(text)) {
+    params.contrast = 0.08;
+    params.saturation = 0.04;
+    matched = true;
+  }
+  if (/\b(punchy|contrast|dramatic|bold)\b/.test(text)) {
+    params.contrast = Math.max(params.contrast ?? 0, 0.22);
+    matched = true;
+  }
+  if (/\b(bright|airy|lift)\b/.test(text)) {
+    params.exposure = 0.16;
+    params.shadows = 0.08;
+    matched = true;
+  }
+  if (/\b(dark|moody|low-key)\b/.test(text)) {
+    params.exposure = -0.12;
+    params.contrast = Math.max(params.contrast ?? 0, 0.12);
+    matched = true;
+  }
+  if (/\b(vibrant|saturated|colorful)\b/.test(text)) {
+    params.saturation = Math.max(params.saturation ?? 0, 0.16);
+    params.vibrance = 0.12;
+    matched = true;
+  }
+  if (/\b(muted|desaturated|washed)\b/.test(text)) {
+    params.saturation = Math.min(params.saturation ?? 0, -0.16);
+    matched = true;
+  }
+
+  return matched ? params : null;
+}
diff --git a/.claude/skills-media/media-use/scripts/lib/cube-build.test.mjs b/.claude/skills-media/media-use/scripts/lib/cube-build.test.mjs
new file mode 100644
index 000000000..7824d7a2c
--- /dev/null
+++ b/.claude/skills-media/media-use/scripts/lib/cube-build.test.mjs
@@ -0,0 +1,80 @@
+import { strict as assert } from "node:assert";
+import { test } from "node:test";
+import { buildCube, paramsFromIntent } from "./cube-build.mjs";
+import { validateCube } from "./cube-validate.mjs";
+
+function rows(cube) {
+  return cube
+    .split(/\r?\n/)
+    .map((line) => line.trim())
+    .filter((line) => /^[+-]?(?:\d|\.\d)/.test(line))
+    .map((line) => line.split(/\s+/).map(Number));
+}
+
+function rowAt(cubeRows, size, r, g, b) {
+  return cubeRows[(b * size + g) * size + r];
+}
+
+function luma(row) {
+  return row[0] * 0.2126 + row[1] * 0.7152 + row[2] * 0.0722;
+}
+
+test("all-zero params produce a near-identity LUT", () => {
+  const cube = buildCube({}, 3);
+  assert.equal(validateCube(cube).ok, true);
+  const parsed = rows(cube);
+  for (let b = 0; b < 3; b++) {
+    for (let g = 0; g < 3; g++) {
+      for (let r = 0; r < 3; r++) {
+        const row = rowAt(parsed, 3, r, g, b);
+        assert.ok(Math.abs(row[0] - r / 2) < 0.000001);
+        assert.ok(Math.abs(row[1] - g / 2) < 0.000001);
+        assert.ok(Math.abs(row[2] - b / 2) < 0.000001);
+      }
+    }
+  }
+});
+
+test("positive exposure increases unclipped output luma", () => {
+  const identity = rows(buildCube({}, 5));
+  const exposed = rows(buildCube({ exposure: 0.3 }, 5));
+  for (let i = 0; i < identity.length; i++) {
+    const before = luma(identity[i]);
+    if (before > 0.02 && before < 0.95) {
+      assert.ok(luma(exposed[i]) > before, `row ${i} should brighten`);
+    }
+  }
+});
+
+test("positive temperature warms mid-gray", () => {
+  const parsed = rows(buildCube({ temperature: 0.2 }, 3));
+  const mid = rowAt(parsed, 3, 1, 1, 1);
+  assert.ok(mid[0] > 0.5, "red channel should rise");
+  assert.ok(mid[2] < 0.5, "blue channel should fall");
+});
+
+test("positive contrast darkens shadows and brightens highlights", () => {
+  const parsed = rows(buildCube({ contrast: 0.3 }, 5));
+  const shadow = rowAt(parsed, 5, 1, 1, 1);
+  const highlight = rowAt(parsed, 5, 3, 3, 3);
+  assert.ok(luma(shadow) < 0.25, "below-mid gray should darken");
+  assert.ok(luma(highlight) > 0.75, "above-mid gray should brighten");
+});
+
+test("outputs validate at the default size and are deterministic", () => {
+  const params = { exposure: 0.15, contrast: 0.2, temperature: -0.1, saturation: 0.12 };
+  const a = buildCube(params);
+  const b = buildCube(params);
+  assert.equal(a, b);
+  assert.equal(validateCube(a).ok, true);
+  assert.equal(validateCube(a).size, 33);
+});
+
+test("paramsFromIntent declines zero-overlap prompts and maps technical words", () => {
+  assert.equal(paramsFromIntent("zqxv imaginary neutron look"), null);
+  assert.deepEqual(paramsFromIntent("warm cinematic"), {
+    temperature: 0.18,
+    contrast: 0.08,
+    saturation: 0.04,
+  });
+});
diff --git a/.claude/skills-media/media-use/scripts/lib/cube-validate.mjs b/.claude/skills-media/media-use/scripts/lib/cube-validate.mjs
new file mode 100644
index 000000000..4aef33ac0
--- /dev/null
+++ b/.claude/skills-media/media-use/scripts/lib/cube-validate.mjs
@@ -0,0 +1,198 @@
+#!/usr/bin/env node
+
+// Standalone mirror of packages/core/src/colorLuts.ts. media-use cannot import
+// the TypeScript source at runtime, so cube-validate.test.mjs mirrors core
+// parser cases to catch drift in accepted .cube files before freezing them.
+
+import { readFileSync } from "node:fs";
+import { resolve as resolvePath } from "node:path";
+import { fileURLToPath } from "node:url";
+
+export const DEFAULT_MAX_CUBE_LUT_SIZE = 64;
+
+const DEFAULT_DOMAIN_MIN = [0, 0, 0];
+const DEFAULT_DOMAIN_MAX = [1, 1, 1];
+
+class CubeValidateError extends Error {
+  constructor(message, lineNumber = null) {
+    super(lineNumber == null ? message : `${message} at line ${lineNumber}`);
+    this.name = "CubeValidateError";
+    this.lineNumber = lineNumber;
+  }
+}
+
+function stripComment(line) {
+  let inQuote = false;
+  for (let i = 0; i < line.length; i++) {
+    const char = line[i];
+    if (char === '"') inQuote = !inQuote;
+    if (char === "#" && !inQuote) return line.slice(0, i);
+  }
+  return line;
+}
+
+function parseFiniteNumber(value, lineNumber) {
+  const parsed = Number(value);
+  if (!Number.isFinite(parsed)) {
+    throw new CubeValidateError(`Invalid number "${value}"`, lineNumber);
+  }
+  return parsed;
+}
+
+function parseVec3(parts, keyword, lineNumber) {
+  if (parts.length !== 3) {
+    throw new CubeValidateError(`${keyword} expects three numbers`, lineNumber);
+  }
+  return [
+    parseFiniteNumber(parts[0], lineNumber),
+    parseFiniteNumber(parts[1], lineNumber),
+    parseFiniteNumber(parts[2], lineNumber),
+  ];
+}
+
+function parseSize(value, keyword, lineNumber) {
+  if (!value) throw new CubeValidateError(`${keyword} expects a size`, lineNumber);
+  const parsed = Number(value);
+  if (!Number.isInteger(parsed) || parsed < 2) {
+    throw new CubeValidateError(`${keyword} must be an integer greater than 1`, lineNumber);
+  }
+  return parsed;
+}
+
+function validateDomain(domainMin, domainMax) {
+  if (
+    domainMax[0] <= domainMin[0] ||
+    domainMax[1] <= domainMin[1] ||
+    domainMax[2] <= domainMin[2]
+  ) {
+    throw new CubeValidateError("DOMAIN_MAX values must be greater than DOMAIN_MIN values");
+  }
+}
+
+function isNumericDataLine(token) {
+  return /^[+-]?(?:\d|\.\d)/.test(token);
+}
+
+function parseCube(input, options = {}) {
+  const maxSize = options.maxSize ?? DEFAULT_MAX_CUBE_LUT_SIZE;
+  let domainMin = DEFAULT_DOMAIN_MIN;
+  let domainMax = DEFAULT_DOMAIN_MAX;
+  let lut1dSize = null;
+  let lut3dSize = null;
+  let rows = 0;
+
+  const lines = String(input)
+    .replace(/^\uFEFF/, "")
+    .split(/\r?\n/);
+  for (let i = 0; i < lines.length; i++) {
+    const lineNumber = i + 1;
+    const line = stripComment(lines[i] ?? "").trim();
+    if (!line) continue;
+    const parts = line.split(/\s+/);
+    const keyword = (parts[0] ?? "").toUpperCase();
+    const rest = parts.slice(1);
+
+    if (keyword === "TITLE") continue;
+    if (keyword === "DOMAIN_MIN") {
+      domainMin = parseVec3(rest, keyword, lineNumber);
+      continue;
+    }
+    if (keyword === "DOMAIN_MAX") {
+      domainMax = parseVec3(rest, keyword, lineNumber);
+      continue;
+    }
+    if (keyword === "LUT_3D_INPUT_RANGE") {
+      if (rest.length !== 2) {
+        throw new CubeValidateError(`${keyword} expects two numbers`, lineNumber);
+      }
+      const min = parseFiniteNumber(rest[0], lineNumber);
+      const max = parseFiniteNumber(rest[1], lineNumber);
+      if (max <= min) {
+        throw new CubeValidateError("LUT_3D_INPUT_RANGE max must exceed min", lineNumber);
+      }
+      domainMin = [min, min, min];
+      domainMax = [max, max, max];
+      continue;
+    }
+    if (keyword === "LUT_1D_SIZE") {
+      lut1dSize = parseSize(rest[0], keyword, lineNumber);
+      continue;
+    }
+    if (keyword === "LUT_3D_SIZE") {
+      lut3dSize = parseSize(rest[0], keyword, lineNumber);
+      if (lut3dSize > maxSize) {
+        throw new CubeValidateError(`LUT_3D_SIZE ${lut3dSize} exceeds max ${maxSize}`, lineNumber);
+      }
+      continue;
+    }
+
+    if (!isNumericDataLine(keyword)) {
+      if (keyword.startsWith("LUT_")) {
+        throw new CubeValidateError(`Unsupported cube keyword ${keyword}`, lineNumber);
+      }
+      continue;
+    }
+    if (!lut3dSize) {
+      if (lut1dSize) {
+        throw new CubeValidateError("1D cube LUTs are not supported yet", lineNumber);
+      }
+      throw new CubeValidateError("LUT data appears before LUT_3D_SIZE", lineNumber);
+    }
+    if (parts.length !== 3) {
+      throw new CubeValidateError("LUT data rows must contain three numbers", lineNumber);
+    }
+    parseFiniteNumber(parts[0], lineNumber);
+    parseFiniteNumber(parts[1], lineNumber);
+    parseFiniteNumber(parts[2], lineNumber);
+    rows++;
+  }
+
+  if (lut1dSize && lut3dSize) {
+    throw new CubeValidateError("Mixed 1D and 3D cube LUTs are not supported yet");
+  }
+  if (!lut3dSize) {
+    if (lut1dSize) throw new CubeValidateError("1D cube LUTs are not supported yet");
+    throw new CubeValidateError("Missing LUT_3D_SIZE");
+  }
+  validateDomain(domainMin, domainMax);
+
+  const expectedRows = lut3dSize * lut3dSize * lut3dSize;
+  if (rows !== expectedRows) {
+    throw new CubeValidateError(
+      `Expected ${expectedRows} LUT rows for size ${lut3dSize}, found ${rows}`,
+    );
+  }
+
+  return { size: lut3dSize };
+}
+
+export function validateCube(input, options = {}) {
+  try {
+    const parsed = parseCube(input, options);
+    return { ok: true, size: parsed.size };
+  } catch (err) {
+    return { ok: false, error: err.message };
+  }
+}
+
+export function validateCubeFile(filePath, options = {}) {
+  return validateCube(readFileSync(filePath, "utf8"), options);
+}
+
+function main(argv) {
+  const file = argv[2];
+  if (!file) {
+    console.error("usage: cube-validate.mjs <file.cube>");
+    process.exit(2);
+  }
+  const result = validateCubeFile(file);
+  if (!result.ok) {
+    console.error(`error: ${result.error}`);
+    process.exit(1);
+  }
+  console.log(`ok: LUT_3D_SIZE ${result.size}`);
+}
+
+if (process.argv[1] && resolvePath(process.argv[1]) === fileURLToPath(import.meta.url)) {
+  main(process.argv);
+}
diff --git a/.claude/skills-media/media-use/scripts/lib/cube-validate.test.mjs b/.claude/skills-media/media-use/scripts/lib/cube-validate.test.mjs
new file mode 100644
index 000000000..2465bfbcd
--- /dev/null
+++ b/.claude/skills-media/media-use/scripts/lib/cube-validate.test.mjs
@@ -0,0 +1,125 @@
+import { strict as assert } from "node:assert";
+import { mkdtempSync, rmSync, writeFileSync } from "node:fs";
+import { execFileSync } from "node:child_process";
+import { join } from "node:path";
+import { tmpdir } from "node:os";
+import { test } from "node:test";
+import { validateCube } from "./cube-validate.mjs";
+
+const IDENTITY_2 = `
+# comment
+TITLE "Identity 2"
+DOMAIN_MIN 0 0 0
+DOMAIN_MAX 1 1 1
+LUT_3D_SIZE 2
+0 0 0
+1 0 0
+0 1 0
+1 1 0
+0 0 1
+1 0 1
+0 1 1
+1 1 1
+`;
+
+test("accepts a valid minimal 3D cube LUT", () => {
+  const result = validateCube(IDENTITY_2);
+  assert.deepEqual(result, { ok: true, size: 2 });
+});
+
+test("rejects oversize LUTs with the core parser message", () => {
+  const result = validateCube("LUT_3D_SIZE 65", { maxSize: 64 });
+  assert.equal(result.ok, false);
+  assert.match(result.error, /LUT_3D_SIZE 65 exceeds max 64/);
+});
+
+test("rejects data rows before LUT_3D_SIZE", () => {
+  const result = validateCube("0 0 0\nLUT_3D_SIZE 2");
+  assert.equal(result.ok, false);
+  assert.match(result.error, /LUT data appears before LUT_3D_SIZE/);
+});
+
+test("rejects missing LUT_3D_SIZE", () => {
+  const result = validateCube('TITLE "No Size"');
+  assert.equal(result.ok, false);
+  assert.match(result.error, /Missing LUT_3D_SIZE/);
+});
+
+test("rejects row count mismatches with the core parser message", () => {
+  const result = validateCube("LUT_3D_SIZE 2\n0 0 0");
+  assert.equal(result.ok, false);
+  assert.match(result.error, /Expected 8 LUT rows/);
+});
+
+test("rejects inverted domains", () => {
+  const result = validateCube(`
+    DOMAIN_MIN 0 0 0
+    DOMAIN_MAX 1 0 1
+    LUT_3D_SIZE 2
+    0 0 0
+    1 0 0
+    0 1 0
+    1 1 0
+    0 0 1
+    1 0 1
+    0 1 1
+    1 1 1
+  `);
+  assert.equal(result.ok, false);
+  assert.match(result.error, /DOMAIN_MAX values must be greater than DOMAIN_MIN values/);
+});
+
+test("rejects unsupported 1D and mixed cube LUTs", () => {
+  const oneD = validateCube("LUT_1D_SIZE 2\n0 0 0\n1 1 1");
+  assert.equal(oneD.ok, false);
+  assert.match(oneD.error, /1D cube LUTs are not supported yet/);
+
+  const mixed = validateCube(`
+    LUT_1D_SIZE 2
+    LUT_3D_SIZE 2
+    0 0 0
+    1 0 0
+    0 1 0
+    1 1 0
+    0 0 1
+    1 0 1
+    0 1 1
+    1 1 1
+  `);
+  assert.equal(mixed.ok, false);
+  assert.match(mixed.error, /Mixed 1D and 3D cube LUTs are not supported yet/);
+});
+
+test("CLI exits zero for valid files and non-zero for invalid files", () => {
+  const dir = mkdtempSync(join(tmpdir(), "mu-cube-validate-"));
+  try {
+    const valid = join(dir, "valid.cube");
+    const invalid = join(dir, "invalid.cube");
+    writeFileSync(valid, IDENTITY_2);
+    writeFileSync(invalid, "LUT_3D_SIZE 65");
+
+    const out = execFileSync(
+      process.execPath,
+      [new URL("./cube-validate.mjs", import.meta.url).pathname, valid],
+      {
+        encoding: "utf8",
+      },
+    );
+    assert.match(out, /ok: LUT_3D_SIZE 2/);
+
+    assert.throws(
+      () =>
+        execFileSync(
+          process.execPath,
+          [new URL("./cube-validate.mjs", import.meta.url).pathname, invalid],
+          {
+            encoding: "utf8",
+            stdio: "pipe",
+          },
+        ),
+      (err) => err.status === 1 && String(err.stderr).includes("exceeds max 64"),
+    );
+  } finally {
+    rmSync(dir, { recursive: true, force: true });
+  }
+});
diff --git a/.claude/skills-media/media-use/scripts/lib/cutlist.mjs b/.claude/skills-media/media-use/scripts/lib/cutlist.mjs
new file mode 100644
index 000000000..07d0d3415
--- /dev/null
+++ b/.claude/skills-media/media-use/scripts/lib/cutlist.mjs
@@ -0,0 +1,184 @@
+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: 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) {
+      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;
+}
+
+function finalizeKept(ranges) {
+  return mergeRanges(ranges)
+    .map((range) => ({ start: round3(range.start), end: round3(range.end) }))
+    .filter((range) => round3(range.end - range.start) >= MIN_SEGMENT_SECONDS);
+}
+
+function round3(n) {
+  return Math.round(Number(n) * 1000) / 1000;
+}
diff --git a/.claude/skills-media/media-use/scripts/lib/cutlist.test.mjs b/.claude/skills-media/media-use/scripts/lib/cutlist.test.mjs
new file mode 100644
index 000000000..72e6f2b0d
--- /dev/null
+++ b/.claude/skills-media/media-use/scripts/lib/cutlist.test.mjs
@@ -0,0 +1,148 @@
+import { strict as assert } from "node:assert";
+import { execFileSync } from "node:child_process";
+import { mkdtempSync, writeFileSync, rmSync } from "node:fs";
+import { join, dirname } from "node:path";
+import { tmpdir } from "node:os";
+import { fileURLToPath } from "node:url";
+import { test } from "node:test";
+import { compileCutList } from "./cutlist.mjs";
+
+const HERE = dirname(fileURLToPath(import.meta.url));
+const SCRIPT = join(HERE, "..", "transcript-cut.mjs");
+
+test("explicit --remove ranges invert to kept segments", () => {
+  const transcript = [
+    word("w0", "alpha", 0, 1),
+    word("w1", "beta", 1.2, 2),
+    word("w2", "gamma", 2.2, 5),
+  ];
+
+  assert.deepEqual(compileCutList(transcript, { remove: "1-2.5" }), [
+    { start: 0, end: 1 },
+    { start: 2.5, end: 5 },
+  ]);
+});
+
+test("--remove-words resolves inclusive word-index ranges to time ranges", () => {
+  const transcript = [
+    word("w0", "zero", 0, 0.5),
+    word("w1", "one", 0.6, 1),
+    word("w2", "two", 1.1, 1.5),
+    word("w3", "three", 2, 3),
+  ];
+
+  assert.deepEqual(compileCutList(transcript, { removeWords: "1-2" }), [
+    { start: 0, end: 0.6 },
+    { start: 1.5, end: 3 },
+  ]);
+});
+
+test("--remove-fillers drops case-insensitive matching words", () => {
+  const transcript = [
+    word("w0", "Hello", 0, 0.5),
+    word("w1", "Um", 0.5, 0.7),
+    word("w2", "world", 0.8, 1.2),
+    word("w3", "LIKE", 1.3, 1.5),
+    word("w4", "done", 1.6, 2),
+  ];
+
+  assert.deepEqual(compileCutList(transcript, { removeFillers: "um,like" }), [
+    { start: 0, end: 0.5 },
+    { start: 0.7, end: 1.3 },
+    { start: 1.5, end: 2 },
+  ]);
+});
+
+test("--cut-silence removes only the center of long inter-word gaps", () => {
+  const transcript = [word("w0", "a", 0, 0.5), word("w1", "b", 2, 2.5), word("w2", "c", 2.7, 3)];
+
+  assert.deepEqual(compileCutList(transcript, { cutSilence: 0.8 }), [
+    { start: 0, end: 0.65 },
+    { start: 1.85, end: 3 },
+  ]);
+});
+
+test("overlapping removal sources merge before inversion", () => {
+  const transcript = [
+    word("w0", "start", 0, 0.5),
+    word("w1", "um", 0.9, 1.1),
+    word("w2", "middle", 2.5, 2.8),
+    word("w3", "more", 3.1, 3.4),
+    word("w4", "end", 5.5, 6),
+  ];
+
+  assert.deepEqual(
+    compileCutList(transcript, {
+      remove: "1-2.7",
+      removeWords: "2-3",
+      removeFillers: "um",
+    }),
+    [
+      { start: 0, end: 0.9 },
+      { start: 3.4, end: 6 },
+    ],
+  );
+});
+
+test("kept slivers shorter than 0.2s are dropped", () => {
+  const transcript = [word("w0", "start", 0, 0.5), word("w1", "end", 2.5, 3)];
+
+  assert.deepEqual(compileCutList(transcript, { remove: "0.1-2.95" }), []);
+});
+
+test("--keep is inverse mode and coalesces direct kept ranges", () => {
+  const transcript = [word("w0", "start", 0, 0.5), word("w1", "end", 4.5, 5)];
+
+  assert.deepEqual(compileCutList(transcript, { keep: "3-4,1-2,1.5-2.5,4.1-4.2" }), [
+    { start: 1, end: 2.5 },
+    { start: 3, end: 4 },
+  ]);
+});
+
+test("--plan on a fixture transcript prints the exact segment JSON", () => {
+  const dir = mkdtempSync(join(tmpdir(), "media-use-cutlist-"));
+  try {
+    const transcriptPath = join(dir, "fixture.json");
+    writeFileSync(
+      transcriptPath,
+      JSON.stringify([
+        word("w0", "hello", 0, 0.4),
+        word("w1", "um", 0.5, 0.65),
+        word("w2", "there", 0.7, 1),
+        word("w3", "pause", 2.2, 2.5),
+        word("w4", "end", 2.7, 3.2),
+      ]),
+    );
+
+    const out = execFileSync(
+      process.execPath,
+      [
+        SCRIPT,
+        "--input",
+        "ignored.mp4",
+        "--transcript",
+        transcriptPath,
+        "--remove",
+        "0.9-1.2",
+        "--remove-fillers",
+        "um",
+        "--cut-silence",
+        "0.8",
+        "--plan",
+      ],
+      { encoding: "utf8" },
+    );
+
+    assert.deepEqual(JSON.parse(out), [
+      { start: 0, end: 0.5 },
+      { start: 0.65, end: 0.9 },
+      { start: 2.05, end: 3.2 },
+    ]);
+  } finally {
+    rmSync(dir, { recursive: true, force: true });
+  }
+});
+
+function word(id, text, start, end) {
+  return { id, text, start, end };
+}
diff --git a/.claude/skills-media/media-use/scripts/lib/duck.mjs b/.claude/skills-media/media-use/scripts/lib/duck.mjs
new file mode 100644
index 000000000..5330e8e35
--- /dev/null
+++ b/.claude/skills-media/media-use/scripts/lib/duck.mjs
@@ -0,0 +1,89 @@
+import { wordListsFromMediaMeta } from "./words.mjs";
+
+/**
+ * Speech spans from word timestamps.
+ *
+ * audio_meta.json word times are relative to EACH LINE'S OWN FILE, not to the
+ * composition. Without placement info, multiple lines would overlap at t=0 and
+ * merge into one bogus span. Placement options:
+ *   offsets:    { [voiceId]: startSeconds } explicit composition placement
+ *   sequential: stack lines back to back (plus `gap` seconds between lines)
+ * A single word list (bare transcript) needs neither.
+ */
+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.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) {
+      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);
+}
+
+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/media-use/scripts/lib/duck.test.mjs b/.claude/skills-media/media-use/scripts/lib/duck.test.mjs
new file mode 100644
index 000000000..7609d6ce5
--- /dev/null
+++ b/.claude/skills-media/media-use/scripts/lib/duck.test.mjs
@@ -0,0 +1,118 @@
+import { strict as assert } from "node:assert";
+import { execFileSync } from "node:child_process";
+import { mkdtempSync, writeFileSync, rmSync } from "node:fs";
+import { join, dirname } from "node:path";
+import { tmpdir } from "node:os";
+import { fileURLToPath } from "node:url";
+import { test } from "node:test";
+import { duckKeyframes, speechSpans } from "./duck.mjs";
+
+const HERE = dirname(fileURLToPath(import.meta.url));
+const SCRIPT = join(HERE, "..", "audio-duck.mjs");
+
+test("speechSpans bridges gaps smaller than mergeGap", () => {
+  const meta = {
+    words: [word("w0", "one", 0, 0.5), word("w1", "two", 0.8, 1), word("w2", "three", 2, 2.2)],
+  };
+
+  assert.deepEqual(speechSpans(meta, { mergeGap: 0.4 }), [
+    { start: 0, end: 1 },
+    { start: 2, end: 2.2 },
+  ]);
+});
+
+test("speechSpans refuses multi-line meta without placement (file-relative times)", () => {
+  const meta = {
+    voices: [
+      { id: "a", words: [word("w0", "one", 0, 1)] },
+      { id: "b", words: [word("w1", "two", 0, 1)] },
+    ],
+  };
+  assert.throws(() => speechSpans(meta, { mergeGap: 0.2 }), /--sequential or --offsets/);
+});
+
+test("speechSpans sequential stacks lines by duration plus gap", () => {
+  const meta = {
+    voices: [
+      { id: "a", duration_s: 2, words: [word("w0", "one", 0.1, 1.9)] },
+      { id: "b", duration_s: 1, words: [word("w1", "two", 0.1, 0.9)] },
+    ],
+  };
+  assert.deepEqual(speechSpans(meta, { mergeGap: 0.2, sequential: true, gap: 0.5 }), [
+    { start: 0.1, end: 1.9 },
+    { start: 2.6, end: 3.4 },
+  ]);
+});
+
+test("speechSpans explicit offsets place each line at composition time", () => {
+  const meta = {
+    voices: [
+      { id: "a", words: [word("w0", "one", 0, 1)] },
+      { id: "b", words: [word("w1", "two", 0, 1)] },
+    ],
+  };
+  assert.deepEqual(speechSpans(meta, { mergeGap: 0.2, offsets: { a: 0, b: 4 } }), [
+    { start: 0, end: 1 },
+    { start: 4, end: 5 },
+  ]);
+  assert.throws(() => speechSpans(meta, { offsets: { a: 0 } }), /missing voice "b"/);
+});
+
+test("speechSpans returns empty spans for empty input", () => {
+  assert.deepEqual(speechSpans({ voices: [] }, { mergeGap: 0.6 }), []);
+});
+
+test("duckKeyframes shapes attack and release from base volume", () => {
+  assert.deepEqual(
+    duckKeyframes([{ start: 3, end: 5 }], {
+      duck: 0.25,
+      attack: 0.15,
+      release: 0.4,
+      baseVolume: 0.6,
+    }),
+    [
+      { time: 3, volume: 0.15, duration: 0.15 },
+      { time: 5, volume: 0.6, duration: 0.4 },
+    ],
+  );
+});
+
+test("--json spans match --merge-gap semantics exactly", () => {
+  const dir = mkdtempSync(join(tmpdir(), "media-use-duck-"));
+  try {
+    const metaPath = join(dir, "audio_meta.json");
+    writeFileSync(
+      metaPath,
+      JSON.stringify({
+        voices: [
+          {
+            id: "narration",
+            words: [
+              word("w0", "one", 0, 0.4),
+              word("w1", "two", 0.9, 1.2),
+              word("w2", "three", 1.8, 2.1),
+            ],
+          },
+        ],
+      }),
+    );
+
+    const out = execFileSync(
+      process.execPath,
+      [SCRIPT, "--meta", metaPath, "--target", "#bgm", "--merge-gap", "0.6", "--json"],
+      { encoding: "utf8" },
+    );
+
+    const parsed = JSON.parse(out);
+    assert.deepEqual(parsed.spans, [
+      { start: 0, end: 1.2 },
+      { start: 1.8, end: 2.1 },
+    ]);
+  } finally {
+    rmSync(dir, { recursive: true, force: true });
+  }
+});
+
+function word(id, text, start, end) {
+  return { id, text, start, end };
+}
diff --git a/.claude/skills-media/media-use/scripts/lib/freeze.mjs b/.claude/skills-media/media-use/scripts/lib/freeze.mjs
new file mode 100644
index 000000000..2527f6626
--- /dev/null
+++ b/.claude/skills-media/media-use/scripts/lib/freeze.mjs
@@ -0,0 +1,70 @@
+import { writeFileSync, copyFileSync, mkdirSync } from "node:fs";
+import { dirname } from "node:path";
+
+// ponytail: bound the download so a hostile/runaway URL can't fill the disk.
+// 256MB covers any real media asset; raise if 4K video sources ever exceed it.
+const MAX_FREEZE_BYTES = 256 * 1024 * 1024;
+
+export async function freezeUrl(url, destPath) {
+  const where = String(url).slice(0, 80);
+  const res = await fetch(url);
+  if (!res.ok) throw new Error(`freeze failed: HTTP ${res.status} for ${where}`);
+
+  // Fail fast on an advertised oversize body before reading a single byte.
+  const declared = Number(res.headers.get("content-length"));
+  if (declared > MAX_FREEZE_BYTES)
+    throw new Error(
+      `freeze failed: ${declared} bytes exceeds ${MAX_FREEZE_BYTES} cap for ${where}`,
+    );
+
+  // Stream and abort once the cap is crossed, so a lying/chunked hostile URL
+  // can't buffer the whole payload into memory before the check (M1).
+  const chunks = [];
+  let total = 0;
+  for await (const chunk of res.body) {
+    total += chunk.length;
+    if (total > MAX_FREEZE_BYTES)
+      throw new Error(`freeze failed: stream exceeds ${MAX_FREEZE_BYTES} cap for ${where}`);
+    chunks.push(chunk);
+  }
+  if (total === 0) throw new Error(`freeze failed: empty response for ${where}`);
+
+  mkdirSync(dirname(destPath), { recursive: true });
+  writeFileSync(destPath, Buffer.concat(chunks, total));
+  return total;
+}
+
+export function freezeLocalFile(srcPath, destPath) {
+  mkdirSync(dirname(destPath), { recursive: true });
+  copyFileSync(srcPath, destPath);
+}
+
+// Ingest accepts a DIRECT public media URL only — not a platform page. yt-dlp is
+// deliberately out (cloud IPs get blocked, and it's brittle); the supported case
+// is "user points at their own file or a direct asset link". A direct URL is a
+// non-platform host whose path ends in a known media extension.
+const PLATFORM_HOSTS =
+  /(^|\.)(youtube\.com|youtu\.be|vimeo\.com|tiktok\.com|instagram\.com|twitter\.com|x\.com|facebook\.com|dailymotion\.com)$/i;
+const MEDIA_EXT = /\.(mp3|wav|m4a|aac|ogg|flac|mp4|mov|webm|mkv|png|jpe?g|webp|gif|svg|avif)$/i;
+
+// SSRF guard (m11): a user-supplied --from URL must not point at the local host
+// or a private network. Blocks loopback/localhost, RFC1918, link-local, and the
+// IPv6 equivalents on the literal hostname.
+// ponytail: literal-host check only; a DNS name that *resolves* to a private IP
+// (rebinding) still passes — add resolve-then-check if --from ever fetches from
+// untrusted hostnames at scale.
+const PRIVATE_HOST =
+  /^(localhost|.*\.local|.*\.internal|127\.|10\.|0\.|169\.254\.|192\.168\.|172\.(1[6-9]|2\d|3[01])\.|\[?(::1|::ffff:127\.|f[cd][0-9a-f]{2}:|fe80:))/i;
+
+export function isDirectMediaUrl(u) {
+  let url;
+  try {
+    url = new URL(u);
+  } catch {
+    return false;
+  }
+  if (url.protocol !== "http:" && url.protocol !== "https:") return false;
+  if (PLATFORM_HOSTS.test(url.hostname)) return false;
+  if (PRIVATE_HOST.test(url.hostname)) return false;
+  return MEDIA_EXT.test(url.pathname);
+}
diff --git a/.claude/skills-media/media-use/scripts/lib/freeze.test.mjs b/.claude/skills-media/media-use/scripts/lib/freeze.test.mjs
new file mode 100644
index 000000000..c71eb76a0
--- /dev/null
+++ b/.claude/skills-media/media-use/scripts/lib/freeze.test.mjs
@@ -0,0 +1,46 @@
+import { strict as assert } from "node:assert";
+import { test } from "node:test";
+import { isDirectMediaUrl } from "./freeze.mjs";
+
+test("accepts direct public media URLs", () => {
+  assert.equal(isDirectMediaUrl("https://cdn.example.com/clip.mp4"), true);
+  assert.equal(isDirectMediaUrl("https://example.com/a/b/track.mp3"), true);
+  assert.equal(isDirectMediaUrl("http://example.com/logo.svg"), true);
+});
+
+test("rejects platform pages (no yt-dlp)", () => {
+  assert.equal(isDirectMediaUrl("https://www.youtube.com/watch?v=abc"), false);
+  assert.equal(isDirectMediaUrl("https://youtu.be/abc"), false);
+  assert.equal(isDirectMediaUrl("https://vimeo.com/12345"), false);
+  assert.equal(isDirectMediaUrl("https://x.com/u/status/1"), false);
+});
+
+test("rejects non-direct / non-media URLs", () => {
+  assert.equal(isDirectMediaUrl("https://example.com/page"), false, "no media extension");
+  assert.equal(isDirectMediaUrl("ftp://example.com/a.mp4"), false, "non-http(s)");
+  assert.equal(isDirectMediaUrl("not a url"), false);
+});
+
+test("rejects local / private hosts (SSRF guard, m11)", () => {
+  for (const u of [
+    "http://localhost/a.mp4",
+    "http://127.0.0.1/a.mp4",
+    "http://127.1.2.3/a.mp4",
+    "http://0.0.0.0/a.mp4",
+    "http://10.0.0.5/a.mp4",
+    "http://192.168.1.1/a.mp4",
+    "http://172.16.0.1/a.mp4",
+    "http://172.31.255.255/a.mp4",
+    "http://169.254.169.254/a.mp4", // cloud metadata endpoint
+    "http://printer.local/a.mp4",
+    "http://svc.internal/a.mp4",
+    "http://[::1]/a.mp4",
+    "http://[fe80::1]/a.mp4",
+    "http://[fd00::1]/a.mp4",
+  ]) {
+    assert.equal(isDirectMediaUrl(u), false, `should block ${u}`);
+  }
+  // A public host that merely starts with similar digits is still allowed.
+  assert.equal(isDirectMediaUrl("https://172.40.0.1/a.mp4"), true, "172.40 is public");
+  assert.equal(isDirectMediaUrl("https://11.example.com/a.mp4"), true);
+});
diff --git a/.claude/skills-media/media-use/scripts/lib/grade-analyzer.mjs b/.claude/skills-media/media-use/scripts/lib/grade-analyzer.mjs
new file mode 100644
index 000000000..054e5119b
--- /dev/null
+++ b/.claude/skills-media/media-use/scripts/lib/grade-analyzer.mjs
@@ -0,0 +1,165 @@
+import { execFileSync } from "node:child_process";
+import { basename, extname } from "node:path";
+
+const IMAGE_EXT = new Set([".jpg", ".jpeg", ".png", ".webp", ".gif", ".bmp", ".tif", ".tiff"]);
+const SAMPLE_FRAMES = 5;
+// A long HD clip on slow storage can exceed the default 15s signalstats window;
+// override without a code change via HYPERFRAMES_ANALYZE_TIMEOUT_MS.
+const SIGNALSTATS_TIMEOUT_MS = Number(process.env.HYPERFRAMES_ANALYZE_TIMEOUT_MS) || 15000;
+
+const ADJUST_LIMITS = {
+  exposure: { min: -2, max: 2 },
+  contrast: { min: -1, max: 1 },
+  highlights: { min: -1, max: 1 },
+  shadows: { min: -1, max: 1 },
+  whites: { min: -1, max: 1 },
+  blacks: { min: -1, max: 1 },
+  temperature: { min: -1, max: 1 },
+  tint: { min: -1, max: 1 },
+  vibrance: { min: -1, max: 1 },
+  saturation: { min: -1, max: 1 },
+};
+
+function clamp(value, key) {
+  const limit = ADJUST_LIMITS[key];
+  if (!Number.isFinite(value)) return 0;
+  return Math.min(limit.max, Math.max(limit.min, value));
+}
+
+function round(value) {
+  return Math.round(value * 1000) / 1000;
+}
+
+function avg(values) {
+  if (values.length === 0) return 0;
+  return values.reduce((sum, value) => sum + value, 0) / values.length;
+}
+
+function probeDuration(mediaPath) {
+  try {
+    const raw = execFileSync(
+      "ffprobe",
+      ["-v", "quiet", "-print_format", "json", "-show_format", mediaPath],
+      { encoding: "utf8", timeout: 5000 },
+    );
+    const parsed = JSON.parse(raw);
+    const duration = Number(parsed.format?.duration);
+    return Number.isFinite(duration) && duration > 0 ? duration : null;
+  } catch {
+    return null;
+  }
+}
+
+function filterFor(mediaPath) {
+  const ext = extname(mediaPath).toLowerCase();
+  if (IMAGE_EXT.has(ext)) return "signalstats,metadata=print:file=-";
+  const duration = probeDuration(mediaPath);
+  if (!duration || duration <= 1) return "signalstats,metadata=print:file=-";
+  const fps = Math.max(0.1, Math.min(2, SAMPLE_FRAMES / duration));
+  return `fps=${fps.toFixed(4)},signalstats,metadata=print:file=-`;
+}
+
+function parseSignalStats(raw) {
+  const frames = [];
+  let current = null;
+  for (const line of String(raw).split(/\r?\n/)) {
+    const frameMatch = line.match(/^frame:/);
+    if (frameMatch) {
+      if (current) frames.push(current);
+      current = {};
+      continue;
+    }
+    const match = line.match(/lavfi\.signalstats\.([A-Z]+)=([+-]?(?:\d+(?:\.\d+)?|\.\d+))/);
+    if (!match) continue;
+    if (!current) current = {};
+    current[match[1]] = Number(match[2]);
+  }
+  if (current) frames.push(current);
+  const complete = frames.filter(
+    (frame) =>
+      Number.isFinite(frame.YMIN) &&
+      Number.isFinite(frame.YMAX) &&
+      Number.isFinite(frame.YAVG) &&
+      Number.isFinite(frame.UAVG) &&
+      Number.isFinite(frame.VAVG),
+  );
+  if (complete.length === 0) {
+    throw new Error("no signalstats frames found");
+  }
+  return {
+    frames: complete.length,
+    yMin: Math.min(...complete.map((frame) => frame.YMIN)),
+    yMax: Math.max(...complete.map((frame) => frame.YMAX)),
+    yAvg: avg(complete.map((frame) => frame.YAVG)),
+    uAvg: avg(complete.map((frame) => frame.UAVG)),
+    vAvg: avg(complete.map((frame) => frame.VAVG)),
+  };
+}
+
+export function statsToAdjust(stats) {
+  const yMin = Number(stats.yMin);
+  const yMax = Number(stats.yMax);
+  const yAvg = Number(stats.yAvg);
+  const uAvg = Number(stats.uAvg);
+  const vAvg = Number(stats.vAvg);
+  const spread = (yMax - yMin) / 255;
+  const normalizedAvg = yAvg / 255;
+  const exposure = clamp((0.45 - normalizedAvg) * 1.8, "exposure");
+  const contrast = clamp((0.42 - spread) * 0.9, "contrast");
+  const whites =
+    yMax > 230 ? clamp(-((yMax - 230) / 40 + Math.max(0, normalizedAvg - 0.74)), "whites") : 0;
+  const blacks = yMin < 12 ? clamp((12 - yMin) / 80, "blacks") : 0;
+  const chromaWarmth = (vAvg - 128 + (128 - uAvg)) / 128;
+  const temperature = clamp(-chromaWarmth * 0.7, "temperature");
+  const tint = clamp(-(uAvg - 128 + (vAvg - 128)) / 256, "tint");
+
+  return {
+    adjust: {
+      exposure: round(exposure),
+      contrast: round(contrast),
+      blacks: round(blacks),
+      whites: round(whites),
+      temperature: round(temperature),
+      tint: round(tint),
+    },
+    measured: {
+      frames: Number(stats.frames ?? 1),
+      yMin: round(yMin),
+      yMax: round(yMax),
+      yAvg: round(yAvg),
+      uAvg: round(uAvg),
+      vAvg: round(vAvg),
+    },
+  };
+}
+
+export function analyzeMediaGrade(mediaPath) {
+  try {
+    const raw = execFileSync(
+      "ffmpeg",
+      [
+        "-hide_banner",
+        "-nostdin",
+        "-v",
+        "error",
+        "-i",
+        mediaPath,
+        "-vf",
+        filterFor(mediaPath),
+        "-frames:v",
+        String(SAMPLE_FRAMES),
+        "-f",
+        "null",
+        "-",
+      ],
+      { encoding: "utf8", timeout: SIGNALSTATS_TIMEOUT_MS, stdio: ["ignore", "pipe", "pipe"] },
+    );
+    return statsToAdjust(parseSignalStats(raw));
+  } catch (err) {
+    throw new Error(`grade analysis failed for ${mediaPath}: ${err.message}`);
+  }
+}
+
+export function formatMeasuredNote(mediaPath, measured) {
+  return `media-use: measured ${basename(mediaPath)}: frames=${measured.frames}, YMIN=${measured.yMin}, YMAX=${measured.yMax}, YAVG=${measured.yAvg}, UAVG=${measured.uAvg}, VAVG=${measured.vAvg}; adjust is a starting suggestion`;
+}
diff --git a/.claude/skills-media/media-use/scripts/lib/grade-analyzer.test.mjs b/.claude/skills-media/media-use/scripts/lib/grade-analyzer.test.mjs
new file mode 100644
index 000000000..86e6632a6
--- /dev/null
+++ b/.claude/skills-media/media-use/scripts/lib/grade-analyzer.test.mjs
@@ -0,0 +1,155 @@
+import { strict as assert } from "node:assert";
+import { execFileSync, spawnSync } from "node:child_process";
+import { existsSync, mkdtempSync, rmSync, unlinkSync } from "node:fs";
+import { join } from "node:path";
+import { tmpdir } from "node:os";
+import { test } from "node:test";
+import { analyzeMediaGrade, formatMeasuredNote, statsToAdjust } from "./grade-analyzer.mjs";
+
+// The "Test: skills" CI job runs bare `node --test` with no ffmpeg on PATH (by
+// design — skills tests are meant to be node-builtin-only). Tests that shell to
+// ffmpeg skip there and run wherever ffmpeg is present (locally, dev).
+const FFMPEG_SKIP =
+  spawnSync("ffmpeg", ["-version"], { stdio: "ignore" }).status === 0
+    ? false
+    : "ffmpeg not on PATH";
+
+const ADJUST_LIMITS = {
+  exposure: { min: -2, max: 2 },
+  contrast: { min: -1, max: 1 },
+  highlights: { min: -1, max: 1 },
+  shadows: { min: -1, max: 1 },
+  whites: { min: -1, max: 1 },
+  blacks: { min: -1, max: 1 },
+  temperature: { min: -1, max: 1 },
+  tint: { min: -1, max: 1 },
+  vibrance: { min: -1, max: 1 },
+  saturation: { min: -1, max: 1 },
+};
+
+function makeFrame(dir, name, color) {
+  const out = join(dir, name);
+  execFileSync(
+    "ffmpeg",
+    [
+      "-hide_banner",
+      "-loglevel",
+      "error",
+      "-f",
+      "lavfi",
+      "-i",
+      `color=c=${color}:s=64x64`,
+      "-frames:v",
+      "1",
+      "-y",
+      out,
+    ],
+    { stdio: "pipe" },
+  );
+  return out;
+}
+
+function assertWithinLimits(adjust) {
+  for (const [key, value] of Object.entries(adjust)) {
+    const limit = ADJUST_LIMITS[key];
+    assert.ok(limit, `unexpected adjust key ${key}`);
+    assert.ok(value >= limit.min && value <= limit.max, `${key} out of range: ${value}`);
+  }
+}
+
+test("under-exposed synthetic frame suggests positive exposure", { skip: FFMPEG_SKIP }, () => {
+  const dir = mkdtempSync(join(tmpdir(), "mu-grade-under-"));
+  try {
+    const file = makeFrame(dir, "under.png", "0x202020");
+    const { adjust, measured } = analyzeMediaGrade(file);
+    assert.ok(measured.frames >= 1);
+    assert.ok(adjust.exposure > 0, `expected positive exposure, got ${adjust.exposure}`);
+    assertWithinLimits(adjust);
+  } finally {
+    rmSync(dir, { recursive: true, force: true });
+  }
+});
+
+test("over-exposed synthetic frame pulls exposure and whites down", { skip: FFMPEG_SKIP }, () => {
+  const dir = mkdtempSync(join(tmpdir(), "mu-grade-over-"));
+  try {
+    const file = makeFrame(dir, "over.png", "white");
+    const { adjust } = analyzeMediaGrade(file);
+    assert.ok(adjust.exposure < 0, `expected negative exposure, got ${adjust.exposure}`);
+    assert.ok(adjust.whites < 0, `expected negative whites, got ${adjust.whites}`);
+    assertWithinLimits(adjust);
+  } finally {
+    rmSync(dir, { recursive: true, force: true });
+  }
+});
+
+test(
+  "warm-cast synthetic frame suggests negative temperature correction",
+  { skip: FFMPEG_SKIP },
+  () => {
+    const dir = mkdtempSync(join(tmpdir(), "mu-grade-warm-"));
+    try {
+      const file = makeFrame(dir, "warm.png", "orange");
+      const { adjust } = analyzeMediaGrade(file);
+      assert.ok(adjust.temperature < 0, `expected cooling correction, got ${adjust.temperature}`);
+      assertWithinLimits(adjust);
+    } finally {
+      rmSync(dir, { recursive: true, force: true });
+    }
+  },
+);
+
+test("low-spread stats suggest positive contrast", () => {
+  const { adjust } = statsToAdjust({
+    frames: 1,
+    yMin: 104,
+    yMax: 116,
+    yAvg: 110,
+    uAvg: 128,
+    vAvg: 128,
+  });
+  assert.ok(adjust.contrast > 0, `expected positive contrast, got ${adjust.contrast}`);
+  assertWithinLimits(adjust);
+});
+
+test("malformed media fails cleanly", () => {
+  assert.throws(
+    () => analyzeMediaGrade(join(tmpdir(), "does-not-exist.png")),
+    /grade analysis failed/,
+  );
+});
+
+test(
+  "media path with shell metacharacters is passed as argv, not a shell string",
+  {
+    skip: FFMPEG_SKIP,
+  },
+  () => {
+    const dir = mkdtempSync(join(tmpdir(), "mu-grade-shell-"));
+    const sentinel = join(process.cwd(), "mu-grade-shell-sentinel.png");
+    try {
+      if (existsSync(sentinel)) unlinkSync(sentinel);
+      const file = makeFrame(dir, "frame; touch mu-grade-shell-sentinel.png", "orange");
+      const result = analyzeMediaGrade(file);
+      assert.ok(result.measured.frames >= 1);
+      assert.equal(existsSync(sentinel), false);
+    } finally {
+      if (existsSync(sentinel)) unlinkSync(sentinel);
+      rmSync(dir, { recursive: true, force: true });
+    }
+  },
+);
+
+test("measured note is a stderr-safe single-line summary", () => {
+  const note = formatMeasuredNote("/tmp/frame.png", {
+    frames: 1,
+    yMin: 10,
+    yMax: 240,
+    yAvg: 80,
+    uAvg: 120,
+    vAvg: 140,
+  });
+  assert.match(note, /^media-use: measured /);
+  assert.match(note, /YAVG=80/);
+  assert.equal(note.includes("\n"), false);
+});
diff --git a/.claude/skills-media/media-use/scripts/lib/heygen-cli.mjs b/.claude/skills-media/media-use/scripts/lib/heygen-cli.mjs
new file mode 100644
index 000000000..bbf40c7ca
--- /dev/null
+++ b/.claude/skills-media/media-use/scripts/lib/heygen-cli.mjs
@@ -0,0 +1,191 @@
+import { execFileSync } from "node:child_process";
+import { track } from "./telemetry.mjs";
+
+// v0.3.0 is the first CLI that can use an OAuth session; v0.1.x/0.2.x reject it
+// ("heygen-cli can't use OAuth yet"), and OAuth is what the free-usage path
+// needs — so anything below this can't authenticate for free usage at all.
+export const HEYGEN_MIN_VERSION = "0.3.0";
+// Free-usage path is OAuth (`--oauth` → subscription/free credits); `--api-key`
+// bills API credits, so the onboarding steers to OAuth. Keep pipe-to-shell
+// installer text out of the runtime module; the docs are the safer source of
+// truth for platform-specific setup.
+export const HEYGEN_INSTALL_COMMAND =
+  "Install the CLI from https://developers.heygen.com/cli, then run: heygen auth login --oauth";
+export const HEYGEN_AUTH_COMMAND = "heygen auth login --oauth";
+export const HEYGEN_UPDATE_COMMAND = "heygen update";
+export const HEYGEN_CLIENT_SOURCE_ARGV = ["--headers", "X-HeyGen-Client-Source: media-use"];
+
+export const HEYGEN_NOT_FOUND_MESSAGE = `media-use: heygen CLI not found — it's the free path for bgm/image/voice/avatar-video. ${HEYGEN_INSTALL_COMMAND}`;
+export const HEYGEN_NOT_AUTHENTICATED_MESSAGE = `media-use: heygen CLI not authenticated (free usage) — run: ${HEYGEN_AUTH_COMMAND}`;
+export const HEYGEN_OUTDATED_MESSAGE = `media-use: heygen CLI is outdated — run: ${HEYGEN_UPDATE_COMMAND}  (need >= v${HEYGEN_MIN_VERSION})`;
+
+const ACTIONABLE_MESSAGES = new Set([
+  HEYGEN_NOT_FOUND_MESSAGE,
+  HEYGEN_NOT_AUTHENTICATED_MESSAGE,
+  HEYGEN_OUTDATED_MESSAGE,
+]);
+
+export function classifyHeygenError(err) {
+  return classifyHeygenErrorResult(err).message;
+}
+
+export function classifyHeygenErrorCode(err) {
+  return classifyHeygenErrorResult(err).code;
+}
+
+function classifyHeygenErrorResult(err) {
+  const detail = heygenErrorDetail(err);
+  const text = [err?.stderr, err?.stdout, err?.message, detail]
+    .map((value) => textOf(value))
+    .filter(Boolean)
+    .join("\n");
+  const lower = text.toLowerCase();
+
+  // Only ENOENT (spawn of a missing binary) or a shell's "command not found"
+  // mean the CLI itself is absent. A bare "not found" would misfire on the CLI's
+  // own resource errors (e.g. a stale voiceId → "voice not found"), whose message
+  // embeds the `heygen ...` command line — sending users to reinstall a CLI they
+  // just ran successfully. Keep this narrow.
+  if (err?.code === "ENOENT" || lower.includes("command not found")) {
+    return { code: "not_found", message: HEYGEN_NOT_FOUND_MESSAGE };
+  }
+
+  if (
+    lower.includes("unauthorized") ||
+    lower.includes("unauthenticated") ||
+    // \b401\b, not a bare "401" substring — otherwise request IDs (req-401abc),
+    // URLs, and retry-after headers would misclassify as an auth failure.
+    /\b401\b/.test(lower) ||
+    lower.includes("not logged in") ||
+    lower.includes("no api key") ||
+    lower.includes("missing api key") ||
+    lower.includes("invalid api key") ||
+    lower.includes("login required") ||
+    lower.includes("auth required") ||
+    lower.includes("authentication required")
+  ) {
+    return { code: "not_authenticated", message: HEYGEN_NOT_AUTHENTICATED_MESSAGE };
+  }
+
+  const version = firstSemver(text);
+  if (version && versionLessThan(version, HEYGEN_MIN_VERSION)) {
+    return { code: "outdated", message: HEYGEN_OUTDATED_MESSAGE };
+  }
+
+  if (
+    lower.includes("rate limit") ||
+    lower.includes("quota") ||
+    lower.includes("insufficient credit") ||
+    lower.includes("too many requests") ||
+    lower.includes("throttled") ||
+    /\b429\b/.test(lower)
+  ) {
+    return { code: "rate_limited", message: detail };
+  }
+
+  return { code: "other", message: detail };
+}
+
+// reportHeygenFailure's callers (voice-provider.mjs, heygen-search.mjs) are
+// synchronous and several layers below the CLI's process.exit() calls, so
+// they can't await this tracking call themselves. Stash each attempt's
+// promise here so a caller closer to exit (resolve.mjs) can join it first —
+// same "awaited so a short-lived run flushes it" discipline telemetry.mjs's
+// track() already documents, just reachable from a sync call site.
+const pendingFailureTracking = new Set();
+// resolve.mjs is a single-shot CLI (one resolve per process), so one shared
+// consume-once slot is sufficient. If resolve becomes an in-process/concurrent
+// API, move this state into a per-resolve context before reusing that path.
+let pendingRemediation = null;
+
+export function consumeHeygenRemediation() {
+  const remediation = pendingRemediation;
+  pendingRemediation = null;
+  return remediation;
+}
+
+export function reportHeygenFailure(err, context, trackEvent = track) {
+  const { code, message } = classifyHeygenErrorResult(err);
+  if (code === "not_found" || code === "outdated") {
+    pendingRemediation = { code, message };
+  }
+  if (ACTIONABLE_MESSAGES.has(message)) {
+    console.error(message);
+  } else {
+    console.error(`media-use: \`${context}\` failed: ${message}`);
+  }
+  try {
+    const tracked = Promise.resolve(
+      trackEvent("media_use_provider_error", { provider: "heygen", reason: code }),
+    ).catch(() => {});
+    pendingFailureTracking.add(tracked);
+    void tracked.finally(() => pendingFailureTracking.delete(tracked));
+    return tracked;
+  } catch {
+    // Telemetry must never affect the provider failure path.
+    return Promise.resolve();
+  }
+}
+
+// Awaits every provider-error track fired since the last flush, so a caller
+// about to process.exit() doesn't orphan one mid-request (both are separate,
+// non-keepalive HTTP connections with no ordering guarantee otherwise).
+// Never rejects: each tracked promise already swallows its own failure.
+export async function flushHeygenFailureTracking() {
+  if (pendingFailureTracking.size === 0) return;
+  await Promise.all(pendingFailureTracking);
+}
+
+// Shared discovery/generation helper for the CLI-shelling providers (voice,
+// avatar-video): run a heygen JSON subcommand, report+classify on failure,
+// and hand the caller the classified reason via onError (used by callers that
+// need to distinguish e.g. not_authenticated from other failures).
+export function runHeygenJson(bin, argv, label, onError) {
+  let out;
+  try {
+    out = execFileSync(bin, argv, {
+      encoding: "utf8",
+      timeout: 120000,
+      stdio: ["pipe", "pipe", "pipe"],
+    });
+  } catch (err) {
+    reportHeygenFailure(err, `${bin} ${label}`);
+    onError?.(classifyHeygenErrorCode(err));
+    return null;
+  }
+  try {
+    return JSON.parse(out);
+  } catch {
+    console.error(`media-use: \`${bin} ${label}\` returned non-JSON output`);
+    return null;
+  }
+}
+
+export function firstSemver(text) {
+  const match = String(text || "").match(/\bv?(\d+)\.(\d+)\.(\d+)\b/);
+  return match ? `${match[1]}.${match[2]}.${match[3]}` : null;
+}
+
+export function versionLessThan(version, minimum) {
+  const left = versionParts(version);
+  const right = versionParts(minimum);
+  if (!left || !right) return false;
+  for (let i = 0; i < 3; i++) {
+    if (left[i] < right[i]) return true;
+    if (left[i] > right[i]) return false;
+  }
+  return false;
+}
+
+function heygenErrorDetail(err) {
+  return textOf(err?.stderr) || textOf(err?.stdout) || err?.message || String(err);
+}
+
+function textOf(value) {
+  return value == null ? "" : String(value).trim();
+}
+
+function versionParts(version) {
+  const match = String(version || "").match(/^v?(\d+)\.(\d+)\.(\d+)$/);
+  return match ? match.slice(1).map((part) => Number.parseInt(part, 10)) : null;
+}
diff --git a/.claude/skills-media/media-use/scripts/lib/heygen-cli.test.mjs b/.claude/skills-media/media-use/scripts/lib/heygen-cli.test.mjs
new file mode 100644
index 000000000..56594ac0d
--- /dev/null
+++ b/.claude/skills-media/media-use/scripts/lib/heygen-cli.test.mjs
@@ -0,0 +1,301 @@
+import { strict as assert } from "node:assert";
+import { spawnSync } from "node:child_process";
+import { test } from "node:test";
+import {
+  classifyHeygenError,
+  classifyHeygenErrorCode,
+  consumeHeygenRemediation,
+  flushHeygenFailureTracking,
+  HEYGEN_NOT_AUTHENTICATED_MESSAGE,
+  HEYGEN_NOT_FOUND_MESSAGE,
+  HEYGEN_OUTDATED_MESSAGE,
+  reportHeygenFailure,
+} from "./heygen-cli.mjs";
+
+function captureFailureReport(err, context, trackEvent) {
+  const originalError = console.error;
+  const stderrCalls = [];
+  console.error = (...args) => stderrCalls.push(args);
+  try {
+    if (trackEvent) {
+      reportHeygenFailure(err, context, trackEvent);
+    } else {
+      reportHeygenFailure(err, context);
+    }
+  } finally {
+    console.error = originalError;
+  }
+  return stderrCalls;
+}
+
+test("classifies ENOENT-style missing heygen errors with install instructions", () => {
+  const message = classifyHeygenError({ code: "ENOENT", message: "spawn heygen ENOENT" });
+
+  assert.equal(message, HEYGEN_NOT_FOUND_MESSAGE);
+});
+
+test("classifies auth failures with login instructions", () => {
+  const message = classifyHeygenError({ stderr: Buffer.from("Error: not logged in") });
+
+  assert.equal(message, HEYGEN_NOT_AUTHENTICATED_MESSAGE);
+});
+
+test("classifies a real 401 as auth, but not a bare 401 substring in prose", () => {
+  assert.equal(
+    classifyHeygenError({ stderr: Buffer.from("HTTP 401 Unauthorized") }),
+    HEYGEN_NOT_AUTHENTICATED_MESSAGE,
+  );
+  // A request id that merely contains "401" must NOT read as an auth failure.
+  const noise = classifyHeygenError({ stderr: Buffer.from("upload failed (request req-401abc)") });
+  assert.notEqual(noise, HEYGEN_NOT_AUTHENTICATED_MESSAGE);
+});
+
+test("classifies old heygen versions with update instructions", () => {
+  const message = classifyHeygenError({
+    stderr: Buffer.from("heygen v0.1.5 does not support --headers"),
+  });
+
+  assert.equal(message, HEYGEN_OUTDATED_MESSAGE);
+});
+
+test("does not misclassify a resource 'not found' error as a missing CLI", () => {
+  // A stale voiceId makes `heygen voice speech create` fail with "voice not
+  // found"; the error message embeds the `heygen ...` command line. This must
+  // pass through as detail, not send the user to reinstall a working CLI.
+  const message = classifyHeygenError({
+    stderr: Buffer.from("Error: voice not found (id: stale-123)"),
+    message: "Command failed: heygen voice speech create --voice stale-123",
+  });
+
+  assert.notEqual(message, HEYGEN_NOT_FOUND_MESSAGE);
+  assert.equal(message, "Error: voice not found (id: stale-123)");
+});
+
+test("classifies a shell 'command not found' as a missing CLI", () => {
+  const message = classifyHeygenError({ stderr: Buffer.from("bash: heygen: command not found") });
+
+  assert.equal(message, HEYGEN_NOT_FOUND_MESSAGE);
+});
+
+test("passes through unrelated errors", () => {
+  const message = classifyHeygenError({
+    stderr: Buffer.from("rate limit exceeded"),
+    message: "Command failed",
+  });
+
+  assert.equal(message, "rate limit exceeded");
+});
+
+test("classifies existing HeyGen failures with stable reason codes", () => {
+  assert.equal(classifyHeygenErrorCode({ code: "ENOENT" }), "not_found");
+  assert.equal(
+    classifyHeygenErrorCode({ stderr: Buffer.from("HTTP 401 Unauthorized") }),
+    "not_authenticated",
+  );
+  assert.equal(
+    classifyHeygenErrorCode({ stderr: Buffer.from("heygen v0.1.5 is unsupported") }),
+    "outdated",
+  );
+  assert.equal(classifyHeygenErrorCode({ stderr: Buffer.from("provider unavailable") }), "other");
+});
+
+test("classifies rate-limit text case-insensitively", () => {
+  assert.equal(
+    classifyHeygenErrorCode({ stderr: Buffer.from("RATE LIMIT exceeded") }),
+    "rate_limited",
+  );
+});
+
+test("classifies quota and insufficient-credit errors as rate limited", () => {
+  for (const detail of ["Quota exhausted", "INSUFFICIENT CREDIT remaining"]) {
+    assert.equal(classifyHeygenErrorCode({ stderr: Buffer.from(detail) }), "rate_limited");
+  }
+});
+
+test("classifies the literal 429 reason phrase and throttling language as rate limited", () => {
+  for (const detail of ["Too Many Requests", "Error: throttled by upstream, retry later"]) {
+    assert.equal(classifyHeygenErrorCode({ stderr: Buffer.from(detail) }), "rate_limited");
+  }
+});
+
+test("does not misclassify unrelated errors that share a word with the new phrasing", () => {
+  // Shares "too many" with "too many requests" but is a distinct failure (fd
+  // exhaustion, not a rate limit) — the match must require the full phrase.
+  assert.equal(
+    classifyHeygenErrorCode({ stderr: Buffer.from("Too many open file descriptors") }),
+    "other",
+  );
+});
+
+test("classifies a bare 429 as rate limited without matching request IDs", () => {
+  assert.equal(
+    classifyHeygenErrorCode({ stderr: Buffer.from("HTTP 429 Too Many Requests") }),
+    "rate_limited",
+  );
+  assert.equal(
+    classifyHeygenErrorCode({ stderr: Buffer.from("request req-429abc failed") }),
+    "other",
+  );
+});
+
+test("tracks not-found failures without changing actionable output", () => {
+  const trackingCalls = [];
+  const stderrCalls = captureFailureReport({ code: "ENOENT" }, "heygen asset search", (...args) =>
+    trackingCalls.push(args),
+  );
+
+  assert.deepEqual(stderrCalls, [[HEYGEN_NOT_FOUND_MESSAGE]]);
+  assert.deepEqual(trackingCalls, [
+    ["media_use_provider_error", { provider: "heygen", reason: "not_found" }],
+  ]);
+});
+
+test("records missing and outdated CLI remediation once", () => {
+  consumeHeygenRemediation();
+  captureFailureReport({ code: "ENOENT" }, "heygen audio sounds list", () => {});
+  assert.deepEqual(consumeHeygenRemediation(), {
+    code: "not_found",
+    message: HEYGEN_NOT_FOUND_MESSAGE,
+  });
+  assert.equal(consumeHeygenRemediation(), null);
+
+  captureFailureReport(
+    { stderr: Buffer.from("heygen v0.1.5 does not support --headers") },
+    "heygen audio sounds list",
+    () => {},
+  );
+  assert.deepEqual(consumeHeygenRemediation(), {
+    code: "outdated",
+    message: HEYGEN_OUTDATED_MESSAGE,
+  });
+  assert.equal(consumeHeygenRemediation(), null);
+});
+
+test("does not record non-install remediation", () => {
+  consumeHeygenRemediation();
+  for (const error of [
+    { stderr: Buffer.from("HTTP 401 Unauthorized") },
+    { stderr: Buffer.from("quota exhausted") },
+    { stderr: Buffer.from("provider unavailable") },
+  ]) {
+    captureFailureReport(error, "heygen audio sounds list", () => {});
+    assert.equal(consumeHeygenRemediation(), null);
+  }
+});
+
+test("tracks generic failures without including raw detail", () => {
+  const trackingCalls = [];
+  const stderrCalls = captureFailureReport(
+    { stderr: Buffer.from("private provider detail") },
+    "heygen asset search",
+    (...args) => trackingCalls.push(args),
+  );
+
+  assert.deepEqual(stderrCalls, [
+    ["media-use: `heygen asset search` failed: private provider detail"],
+  ]);
+  assert.deepEqual(trackingCalls, [
+    ["media_use_provider_error", { provider: "heygen", reason: "other" }],
+  ]);
+});
+
+test("keeps failure output observable when telemetry is opted out", () => {
+  const previousOptOut = process.env.HYPERFRAMES_NO_TELEMETRY;
+  process.env.HYPERFRAMES_NO_TELEMETRY = "1";
+  try {
+    const stderrCalls = captureFailureReport({ code: "ENOENT" }, "heygen asset search");
+
+    assert.deepEqual(stderrCalls, [[HEYGEN_NOT_FOUND_MESSAGE]]);
+  } finally {
+    if (previousOptOut === undefined) {
+      delete process.env.HYPERFRAMES_NO_TELEMETRY;
+    } else {
+      process.env.HYPERFRAMES_NO_TELEMETRY = previousOptOut;
+    }
+  }
+});
+
+test("keeps failure output observable when tracking throws synchronously", () => {
+  const originalError = console.error;
+  const stderrCalls = [];
+  let thrown;
+  console.error = (...args) => stderrCalls.push(args);
+  try {
+    try {
+      reportHeygenFailure({ code: "ENOENT" }, "heygen asset search", () => {
+        throw new Error("tracking failed");
+      });
+    } catch (err) {
+      thrown = err;
+    }
+  } finally {
+    console.error = originalError;
+  }
+
+  assert.deepEqual(stderrCalls, [[HEYGEN_NOT_FOUND_MESSAGE]]);
+  assert.equal(thrown, undefined);
+});
+
+test("does not leave rejected tracking promises unhandled", () => {
+  const moduleUrl = new URL("./heygen-cli.mjs", import.meta.url).href;
+  const script = `
+    import { reportHeygenFailure } from ${JSON.stringify(moduleUrl)};
+    reportHeygenFailure(
+      { stderr: "provider unavailable" },
+      "heygen asset search",
+      () => Promise.reject(new Error("tracking failed")),
+    );
+    await new Promise((resolve) => setImmediate(resolve));
+  `;
+  const child = spawnSync(
+    process.execPath,
+    ["--unhandled-rejections=strict", "--input-type=module", "--eval", script],
+    { encoding: "utf8", timeout: 5000 },
+  );
+
+  assert.equal(child.error, undefined);
+  assert.equal(child.signal, null);
+  assert.equal(child.status, 0, child.stderr);
+  assert.equal(child.stderr, "media-use: `heygen asset search` failed: provider unavailable\n");
+});
+
+test("flushHeygenFailureTracking waits for a pending report before resolving", async () => {
+  const events = [];
+  let releaseTrack;
+  const gate = new Promise((resolve) => {
+    releaseTrack = resolve;
+  });
+
+  // Mirrors the real call sites (voice-provider.mjs, heygen-search.mjs):
+  // fire-and-forget, the return value is never awaited by the caller.
+  reportHeygenFailure({ code: "ENOENT" }, "heygen voice speech", () =>
+    gate.then(() => {
+      events.push("track-settled");
+    }),
+  );
+
+  const flushed = flushHeygenFailureTracking().then(() => {
+    events.push("flush-resolved");
+  });
+
+  // Let several pending microtasks drain before releasing the gate, so this
+  // proves flush is genuinely still waiting on the tracked promise -- not
+  // merely that it hasn't had a tick yet.
+  await Promise.resolve();
+  await Promise.resolve();
+  await Promise.resolve();
+  assert.deepEqual(events, [], "flush must not resolve while the tracked promise is still pending");
+
+  releaseTrack();
+  await flushed;
+
+  assert.deepEqual(
+    events,
+    ["track-settled", "flush-resolved"],
+    "flush must resolve only after the pending track settles, in that order",
+  );
+});
+
+test("flushHeygenFailureTracking resolves immediately when nothing is pending", async () => {
+  await flushHeygenFailureTracking();
+});
diff --git a/.claude/skills-media/media-use/scripts/lib/heygen-search.mjs b/.claude/skills-media/media-use/scripts/lib/heygen-search.mjs
new file mode 100644
index 000000000..e52254c25
--- /dev/null
+++ b/.claude/skills-media/media-use/scripts/lib/heygen-search.mjs
@@ -0,0 +1,45 @@
+import { execFileSync } from "node:child_process";
+import { HEYGEN_CLIENT_SOURCE_ARGV, reportHeygenFailure } from "./heygen-cli.mjs";
+
+export function heygenSearch(subcommand, query, { type, limit = 5, minScore } = {}) {
+  // execFileSync with an argv array (no shell), so query/type/etc. are passed as
+  // literal arguments — no quoting tricks, no command injection. subcommand is a
+  // hardcoded multi-word string (e.g. "audio sounds list"), split into tokens.
+  // Tag the caller via the CLI's allowlisted attribution header (heygen >= v0.3.0).
+  const args = [...HEYGEN_CLIENT_SOURCE_ARGV, ...subcommand.split(" "), "--query", query];
+  if (type) args.push("--type", type);
+  args.push("--limit", String(limit));
+  // Server-side score floor. Honored by `audio sounds list`; the `asset search`
+  // backend rejects it, so only audio providers pass minScore (see image-provider).
+  if (minScore != null) args.push("--min-score", String(minScore));
+
+  let out;
+  try {
+    out = execFileSync("heygen", args, {
+      encoding: "utf8",
+      timeout: 15000,
+      stdio: ["pipe", "pipe", "pipe"],
+    });
+  } catch (err) {
+    // Don't swallow a broken command / auth failure as "no results" — that turns
+    // a typo or expired key into a silent dead end. Surface it, then give up.
+    reportHeygenFailure(err, `heygen ${subcommand}`);
+    return null;
+  }
+
+  let parsed;
+  try {
+    parsed = JSON.parse(out);
+  } catch {
+    console.error(`media-use: \`heygen ${subcommand}\` returned non-JSON output`);
+    return null;
+  }
+  if (parsed?.error) {
+    const e = parsed.error;
+    console.error(`media-use: \`heygen ${subcommand}\` error: ${e.message ?? JSON.stringify(e)}`);
+    return null;
+  }
+
+  const data = parsed?.data;
+  return Array.isArray(data) && data.length > 0 ? data : null;
+}
diff --git a/.claude/skills-media/media-use/scripts/lib/heygen-search.test.mjs b/.claude/skills-media/media-use/scripts/lib/heygen-search.test.mjs
new file mode 100644
index 000000000..dc7f4b42a
--- /dev/null
+++ b/.claude/skills-media/media-use/scripts/lib/heygen-search.test.mjs
@@ -0,0 +1,49 @@
+import { strict as assert } from "node:assert";
+import { chmodSync, mkdtempSync, readFileSync, rmSync, writeFileSync } from "node:fs";
+import { tmpdir } from "node:os";
+import { join } from "node:path";
+import { test } from "node:test";
+import { HEYGEN_CLIENT_SOURCE_HEADERS } from "../../audio/scripts/lib/heygen.mjs";
+import { HEYGEN_CLIENT_SOURCE_ARGV } from "./heygen-cli.mjs";
+import { heygenSearch } from "./heygen-search.mjs";
+
+test("tags HeyGen searches with the shared media-use client source", () => {
+  const dir = mkdtempSync(join(tmpdir(), "media-use-heygen-search-"));
+  const capturePath = join(dir, "argv.log");
+  const heygenPath = join(dir, "heygen");
+  const previousPath = process.env.PATH;
+  const previousCapturePath = process.env.HEYGEN_CAPTURE_PATH;
+
+  writeFileSync(
+    heygenPath,
+    `#!/bin/sh
+printf '%s\\n' "$*" >> "$HEYGEN_CAPTURE_PATH"
+printf '%s\\n' '{"data":[{"id":"x"}]}'
+`,
+  );
+  chmodSync(heygenPath, 0o755);
+  process.env.PATH = `${dir}:${previousPath ?? ""}`;
+  process.env.HEYGEN_CAPTURE_PATH = capturePath;
+
+  try {
+    const result = heygenSearch("audio sounds list", "ocean", { limit: 1 });
+    const argv = readFileSync(capturePath, "utf8").trim();
+
+    assert.deepEqual(result, [{ id: "x" }]);
+    assert.match(argv, /X-HeyGen-Client-Source: media-use/);
+  } finally {
+    if (previousPath === undefined) delete process.env.PATH;
+    else process.env.PATH = previousPath;
+    if (previousCapturePath === undefined) delete process.env.HEYGEN_CAPTURE_PATH;
+    else process.env.HEYGEN_CAPTURE_PATH = previousCapturePath;
+    rmSync(dir, { recursive: true, force: true });
+  }
+});
+
+test("keeps CLI and REST media-use client source headers in lockstep", () => {
+  const [entry] = Object.entries(HEYGEN_CLIENT_SOURCE_HEADERS);
+  assert.ok(entry);
+  const [key, value] = entry;
+
+  assert.equal(HEYGEN_CLIENT_SOURCE_ARGV[1], `${key}: ${value}`);
+});
diff --git a/.claude/skills-media/media-use/scripts/lib/heygen-video-provider.mjs b/.claude/skills-media/media-use/scripts/lib/heygen-video-provider.mjs
new file mode 100644
index 000000000..799ac0442
--- /dev/null
+++ b/.claude/skills-media/media-use/scripts/lib/heygen-video-provider.mjs
@@ -0,0 +1,127 @@
+import { execFileSync } from "node:child_process";
+import { tmpdir } from "node:os";
+import { join } from "node:path";
+import { freezeUrl } from "./freeze.mjs";
+import {
+  classifyHeygenErrorCode,
+  HEYGEN_AUTH_COMMAND,
+  HEYGEN_CLIENT_SOURCE_ARGV,
+  reportHeygenFailure,
+  runHeygenJson,
+} from "./heygen-cli.mjs";
+
+export const AVATAR_VIDEO_SIGNIN_MESSAGE = `media-use: avatar video is free for new API users — sign in: ${HEYGEN_AUTH_COMMAND}`;
+
+// Cache only a truthy id -- a transient discovery failure must not poison the
+// cache with `null` and permanently disable heygen.video for the rest of the
+// process. `onError` lets the caller distinguish not_authenticated (and nudge
+// onboarding) from any other discovery failure.
+let cachedAvatarId;
+function defaultAvatarId(onError) {
+  if (cachedAvatarId) return cachedAvatarId;
+  const j = runHeygenJson(
+    "heygen",
+    ["avatar", "list", "--ownership", "public", "--limit", "1"],
+    "avatar list",
+    onError,
+  );
+  cachedAvatarId = j?.data?.[0]?.avatar_id || null;
+  return cachedAvatarId;
+}
+
+let cachedStarfishVoiceId;
+function defaultStarfishVoiceId(onError) {
+  if (cachedStarfishVoiceId) return cachedStarfishVoiceId;
+  const j = runHeygenJson(
+    "heygen",
+    ["voice", "list", "--engine", "starfish", "--limit", "1"],
+    "voice list",
+    onError,
+  );
+  cachedStarfishVoiceId = j?.data?.[0]?.voice_id || null;
+  return cachedStarfishVoiceId;
+}
+
+export async function heygenVideoGenerate(intent, ctx) {
+  let discoveryFailureReason = null;
+  const captureReason = (reason) => {
+    discoveryFailureReason ??= reason;
+  };
+
+  // Short-circuit: once one discovery call fails, the result is null either
+  // way, so don't attempt the second -- that would double-fire the onboarding
+  // message and the provider-error telemetry ping for what's really one failure.
+  const avatarId = ctx?.avatarId || defaultAvatarId(captureReason);
+  if (!avatarId) {
+    if (discoveryFailureReason === "not_authenticated") console.error(AVATAR_VIDEO_SIGNIN_MESSAGE);
+    return null;
+  }
+  const voiceId = ctx?.voiceId || defaultStarfishVoiceId(captureReason);
+  if (!voiceId) {
+    if (discoveryFailureReason === "not_authenticated") console.error(AVATAR_VIDEO_SIGNIN_MESSAGE);
+    return null;
+  }
+
+  let out;
+  try {
+    out = execFileSync(
+      "heygen",
+      [
+        ...HEYGEN_CLIENT_SOURCE_ARGV,
+        "video",
+        "create",
+        "--wait",
+        "-d",
+        JSON.stringify({
+          type: "avatar",
+          avatar_id: avatarId,
+          script: intent,
+          voice_id: voiceId,
+        }),
+      ],
+      {
+        encoding: "utf8",
+        timeout: 300000,
+        stdio: ["pipe", "pipe", "pipe"],
+      },
+    );
+  } catch (err) {
+    if (classifyHeygenErrorCode(err) === "not_authenticated") {
+      console.error(AVATAR_VIDEO_SIGNIN_MESSAGE);
+    }
+    reportHeygenFailure(err, "heygen video create");
+    return null;
+  }
+
+  let parsed;
+  try {
+    parsed = JSON.parse(out);
+  } catch {
+    console.error("media-use: `heygen video create` returned invalid JSON");
+    return null;
+  }
+  const videoUrl = parsed?.data?.video_url;
+  if (typeof videoUrl !== "string" || !videoUrl) {
+    console.error("media-use: `heygen video create` returned no video URL");
+    return null;
+  }
+
+  const tmpPath = join(tmpdir(), `media-use-heygen-video-${process.pid}-${Date.now()}.mp4`);
+  try {
+    await freezeUrl(videoUrl, tmpPath);
+  } catch (err) {
+    console.error(`media-use: heygen video download failed: ${err.message}`);
+    return null;
+  }
+
+  return {
+    localPath: tmpPath,
+    ext: ".mp4",
+    source: "generated",
+    metadata: {
+      description: intent,
+      provider: "heygen.video",
+      provenance: { prompt: intent },
+    },
+  };
+}
diff --git a/.claude/skills-media/media-use/scripts/lib/heygen-video-provider.test.mjs b/.claude/skills-media/media-use/scripts/lib/heygen-video-provider.test.mjs
new file mode 100644
index 000000000..d258d4c9e
--- /dev/null
+++ b/.claude/skills-media/media-use/scripts/lib/heygen-video-provider.test.mjs
@@ -0,0 +1,344 @@
+import { strict as assert } from "node:assert";
+import { chmodSync, mkdtempSync, readFileSync, rmSync, writeFileSync } from "node:fs";
+import http from "node:http";
+import { tmpdir } from "node:os";
+import { join } from "node:path";
+import { test } from "node:test";
+import { HEYGEN_NOT_AUTHENTICATED_MESSAGE } from "./heygen-cli.mjs";
+import { AVATAR_VIDEO_SIGNIN_MESSAGE } from "./heygen-video-provider.mjs";
+
+const VIDEO_FIXTURE = Buffer.from("tiny heygen video fixture");
+let importCount = 0;
+
+async function freshGenerate() {
+  importCount += 1;
+  const module = await import(`./heygen-video-provider.mjs?test=${importCount}`);
+  return module.heygenVideoGenerate;
+}
+
+async function listenVideoServer() {
+  const server = http.createServer((req, res) => {
+    if (req.url !== "/video.mp4") {
+      res.writeHead(404).end();
+      return;
+    }
+    res.writeHead(200, {
+      "content-length": VIDEO_FIXTURE.length,
+      "content-type": "video/mp4",
+    });
+    res.end(VIDEO_FIXTURE);
+  });
+  await new Promise((resolve) => server.listen(0, resolve));
+  const address = server.address();
+  assert.ok(address && typeof address !== "string");
+  return {
+    server,
+    url: `http://127.0.0.1:${address.port}/video.mp4`,
+  };
+}
+
+async function listenFailingVideoServer() {
+  const server = http.createServer((req, res) => {
+    res.writeHead(500).end();
+  });
+  await new Promise((resolve) => server.listen(0, resolve));
+  const address = server.address();
+  assert.ok(address && typeof address !== "string");
+  return {
+    server,
+    url: `http://127.0.0.1:${address.port}/video.mp4`,
+  };
+}
+
+function closeServer(server) {
+  return new Promise((resolve, reject) => {
+    server.close((err) => (err ? reject(err) : resolve()));
+  });
+}
+
+async function withFakeHeygen(options, run) {
+  const dir = mkdtempSync(join(tmpdir(), "media-use-heygen-video-provider-"));
+  const capturePath = join(dir, "argv.log");
+  const heygenPath = join(dir, "heygen");
+  const previousEnv = {
+    PATH: process.env.PATH,
+    HEYGEN_CAPTURE_PATH: process.env.HEYGEN_CAPTURE_PATH,
+    HEYGEN_VIDEO_MODE: process.env.HEYGEN_VIDEO_MODE,
+    HEYGEN_VIDEO_RESPONSE: process.env.HEYGEN_VIDEO_RESPONSE,
+    HEYGEN_DISCOVERY_MODE: process.env.HEYGEN_DISCOVERY_MODE,
+    HYPERFRAMES_NO_TELEMETRY: process.env.HYPERFRAMES_NO_TELEMETRY,
+  };
+
+  writeFileSync(
+    heygenPath,
+    `#!/bin/sh
+printf '%s\\n' "$*" >> "$HEYGEN_CAPTURE_PATH"
+case "$*" in
+  *"avatar list"*)
+    case "$HEYGEN_DISCOVERY_MODE" in
+      auth) printf '%s\\n' 'HTTP 401 Unauthorized' >&2; exit 1 ;;
+      *) printf '%s\\n' '{"data":[{"avatar_id":"avatar-public-1"}]}' ;;
+    esac
+    ;;
+  *"voice list"*)
+    case "$HEYGEN_DISCOVERY_MODE" in
+      auth) printf '%s\\n' 'HTTP 401 Unauthorized' >&2; exit 1 ;;
+      *) printf '%s\\n' '{"data":[{"voice_id":"voice-starfish-1"}]}' ;;
+    esac
+    ;;
+  *"video create"*)
+    case "$HEYGEN_VIDEO_MODE" in
+      auth) printf '%s\\n' 'HTTP 401 Unauthorized' >&2; exit 1 ;;
+      other) printf '%s\\n' 'provider unavailable' >&2; exit 1 ;;
+      *) printf '%s\\n' "$HEYGEN_VIDEO_RESPONSE" ;;
+    esac
+    ;;
+esac
+`,
+  );
+  chmodSync(heygenPath, 0o755);
+  process.env.PATH = `${dir}:${previousEnv.PATH ?? ""}`;
+  process.env.HEYGEN_CAPTURE_PATH = capturePath;
+  process.env.HEYGEN_VIDEO_MODE = options.mode ?? "success";
+  process.env.HEYGEN_VIDEO_RESPONSE = options.response ?? "";
+  process.env.HEYGEN_DISCOVERY_MODE = options.discoveryMode ?? "";
+  process.env.HYPERFRAMES_NO_TELEMETRY = "1";
+
+  try {
+    return await run({
+      invocations: () => readFileSync(capturePath, "utf8").trim().split("\n"),
+    });
+  } finally {
+    for (const [key, value] of Object.entries(previousEnv)) {
+      if (value === undefined) delete process.env[key];
+      else process.env[key] = value;
+    }
+    rmSync(dir, { recursive: true, force: true });
+  }
+}
+
+function bodyFromInvocation(invocation) {
+  const marker = " -d ";
+  const start = invocation.indexOf(marker);
+  assert.notEqual(start, -1);
+  return JSON.parse(invocation.slice(start + marker.length));
+}
+
+test("downloads a generated avatar video and returns the generated MP4 result", async () => {
+  const { server, url } = await listenVideoServer();
+  let localPath;
+  try {
+    await withFakeHeygen(
+      { response: JSON.stringify({ data: { video_url: url } }) },
+      async ({ invocations }) => {
+        const heygenVideoGenerate = await freshGenerate();
+        const intent = "Welcome to the HyperFrames launch";
+        const result = await heygenVideoGenerate(intent, {});
+        localPath = result?.localPath;
+        const calls = invocations();
+        const create = calls.find((call) => call.includes("video create"));
+
+        assert.ok(create);
+        assert.match(create, /--headers X-HeyGen-Client-Source: media-use/);
+        assert.deepEqual(bodyFromInvocation(create), {
+          type: "avatar",
+          avatar_id: "avatar-public-1",
+          script: intent,
+          voice_id: "voice-starfish-1",
+        });
+        assert.ok(result);
+        assert.equal(join(tmpdir(), result.localPath.slice(tmpdir().length + 1)), result.localPath);
+        assert.match(result.localPath, /media-use-heygen-video-\d+-\d+\.mp4$/);
+        assert.deepEqual(result, {
+          localPath: result.localPath,
+          ext: ".mp4",
+          source: "generated",
+          metadata: {
+            description: intent,
+            provider: "heygen.video",
+            provenance: { prompt: intent },
+          },
+        });
+        assert.deepEqual(readFileSync(result.localPath), VIDEO_FIXTURE);
+      },
+    );
+  } finally {
+    if (localPath) rmSync(localPath, { force: true });
+    await closeServer(server);
+  }
+});
+
+test("tags video creation but not avatar or voice discovery", async () => {
+  const { server, url } = await listenVideoServer();
+  let localPath;
+  try {
+    await withFakeHeygen(
+      { response: JSON.stringify({ data: { video_url: url } }) },
+      async ({ invocations }) => {
+        const heygenVideoGenerate = await freshGenerate();
+        const result = await heygenVideoGenerate("Header regression guard", {});
+        localPath = result?.localPath;
+        const calls = invocations();
+
+        assert.equal(calls.length, 3);
+        assert.match(calls[0], /^avatar list --ownership public --limit 1$/);
+        assert.doesNotMatch(calls[0], /X-HeyGen-Client-Source/);
+        assert.match(calls[1], /^voice list --engine starfish --limit 1$/);
+        assert.doesNotMatch(calls[1], /X-HeyGen-Client-Source/);
+        assert.match(calls[2], /video create/);
+        assert.match(calls[2], /X-HeyGen-Client-Source: media-use/);
+      },
+    );
+  } finally {
+    if (localPath) rmSync(localPath, { force: true });
+    await closeServer(server);
+  }
+});
+
+test("uses explicit avatar and voice overrides without discovery", async () => {
+  const { server, url } = await listenVideoServer();
+  let localPath;
+  try {
+    await withFakeHeygen(
+      { response: JSON.stringify({ data: { video_url: url } }) },
+      async ({ invocations }) => {
+        const heygenVideoGenerate = await freshGenerate();
+        const result = await heygenVideoGenerate("Use my presenter", {
+          avatarId: "avatar-override",
+          voiceId: "voice-override",
+        });
+        localPath = result?.localPath;
+        const calls = invocations();
+
+        assert.equal(calls.length, 1);
+        assert.match(calls[0], /video create/);
+        assert.deepEqual(bodyFromInvocation(calls[0]), {
+          type: "avatar",
+          avatar_id: "avatar-override",
+          script: "Use my presenter",
+          voice_id: "voice-override",
+        });
+      },
+    );
+  } finally {
+    if (localPath) rmSync(localPath, { force: true });
+    await closeServer(server);
+  }
+});
+
+test("caches discovered avatar and voice IDs for the process", async () => {
+  const { server, url } = await listenVideoServer();
+  const localPaths = new Set();
+  try {
+    await withFakeHeygen(
+      { response: JSON.stringify({ data: { video_url: url } }) },
+      async ({ invocations }) => {
+        const heygenVideoGenerate = await freshGenerate();
+        for (const intent of ["First avatar video", "Second avatar video"]) {
+          const result = await heygenVideoGenerate(intent, {});
+          if (result) localPaths.add(result.localPath);
+        }
+        const calls = invocations();
+
+        assert.equal(calls.filter((call) => call.startsWith("avatar list ")).length, 1);
+        assert.equal(calls.filter((call) => call.startsWith("voice list ")).length, 1);
+        assert.equal(calls.filter((call) => call.includes("video create")).length, 2);
+      },
+    );
+  } finally {
+    for (const localPath of localPaths) rmSync(localPath, { force: true });
+    await closeServer(server);
+  }
+});
+
+test("prints auth onboarding and reports an unauthenticated create failure", async (t) => {
+  const errors = [];
+  t.mock.method(console, "error", (message) => errors.push(message));
+
+  await withFakeHeygen({ mode: "auth" }, async () => {
+    const heygenVideoGenerate = await freshGenerate();
+    const result = await heygenVideoGenerate("Sign-in failure", {
+      avatarId: "avatar-override",
+      voiceId: "voice-override",
+    });
+
+    assert.equal(result, null);
+    assert.ok(errors.includes(AVATAR_VIDEO_SIGNIN_MESSAGE));
+    assert.ok(errors.includes(HEYGEN_NOT_AUTHENTICATED_MESSAGE));
+  });
+});
+
+test("reports other create failures without auth onboarding", async (t) => {
+  const errors = [];
+  t.mock.method(console, "error", (message) => errors.push(message));
+
+  await withFakeHeygen({ mode: "other" }, async () => {
+    const heygenVideoGenerate = await freshGenerate();
+    const result = await heygenVideoGenerate("Provider failure", {
+      avatarId: "avatar-override",
+      voiceId: "voice-override",
+    });
+
+    assert.equal(result, null);
+    assert.ok(!errors.includes(AVATAR_VIDEO_SIGNIN_MESSAGE));
+    assert.ok(errors.includes("media-use: `heygen video create` failed: provider unavailable"));
+  });
+});
+
+test("falls through on non-JSON and error responses", async (t) => {
+  t.mock.method(console, "error", () => {});
+
+  for (const response of ["not JSON", '{"error":{"message":"render failed"}}']) {
+    await withFakeHeygen({ response }, async () => {
+      const heygenVideoGenerate = await freshGenerate();
+      const result = await heygenVideoGenerate("Unusable response", {
+        avatarId: "avatar-override",
+        voiceId: "voice-override",
+      });
+
+      assert.equal(result, null);
+    });
+  }
+});
+
+test("onboards and returns null when avatar/voice discovery itself is unauthenticated", async (t) => {
+  const errors = [];
+  t.mock.method(console, "error", (message) => errors.push(message));
+
+  // Both avatar list AND voice list would fail unauthenticated (discoveryMode
+  // "auth" applies to both in the fake CLI) -- the short-circuit after the
+  // first failure must mean only one is ever attempted, so the onboarding
+  // message and the provider-error telemetry ping each fire exactly once
+  // instead of double-firing for what's really one auth failure.
+  await withFakeHeygen({ discoveryMode: "auth" }, async ({ invocations }) => {
+    const heygenVideoGenerate = await freshGenerate();
+    const result = await heygenVideoGenerate("Discovery auth failure", {});
+
+    assert.equal(result, null);
+    assert.equal(
+      errors.filter((message) => message === AVATAR_VIDEO_SIGNIN_MESSAGE).length,
+      1,
+      "onboarding message must fire exactly once, not once per failed discovery call",
+    );
+    const calls = invocations();
+    assert.equal(calls.length, 1, "must short-circuit after the first discovery failure");
+    assert.match(calls[0], /^avatar list /);
+  });
+});
+
+test("download failure after a successful create returns null and logs a diagnostic", async () => {
+  const { server, url } = await listenFailingVideoServer();
+  try {
+    await withFakeHeygen({ response: JSON.stringify({ data: { video_url: url } }) }, async () => {
+      const heygenVideoGenerate = await freshGenerate();
+      const result = await heygenVideoGenerate("Download failure", {
+        avatarId: "avatar-override",
+        voiceId: "voice-override",
+      });
+
+      assert.equal(result, null);
+    });
+  } finally {
+    await closeServer(server);
+  }
+});
diff --git a/.claude/skills-media/media-use/scripts/lib/image-provider.mjs b/.claude/skills-media/media-use/scripts/lib/image-provider.mjs
new file mode 100644
index 000000000..69b26397e
--- /dev/null
+++ b/.claude/skills-media/media-use/scripts/lib/image-provider.mjs
@@ -0,0 +1,44 @@
+import { heygenSearch } from "./heygen-search.mjs";
+
+export const imageProvider = {
+  async search(intent) {
+    const results = heygenSearch("asset search", intent, { type: "image" });
+    if (!results) return null;
+    const best = results[0];
+    return {
+      url: best.url,
+      source: "search",
+      // ext derived from the asset URL by resolve.mjs (.jpg/.png/.webp)
+      metadata: {
+        description: intent,
+        width: best.width || null,
+        height: best.height || null,
+        transparent: best.is_transparent || false,
+        provider: "heygen.asset.search",
+        provenance: { asset_id: best.id, score: best.score },
+      },
+    };
+  },
+};
+
+export const iconProvider = {
+  async search(intent) {
+    // No minScore: the `asset search` backend rejects --min-score and returns no score field.
+    const results = heygenSearch("asset search", intent, { type: "icon" });
+    if (!results) return null;
+    const best = results[0];
+    return {
+      url: best.url,
+      source: "search",
+      // ext derived from the asset URL by resolve.mjs — catalog icons are .png, not .svg
+      metadata: {
+        description: intent,
+        width: best.width || null,
+        height: best.height || null,
+        transparent: best.is_transparent ?? true,
+        provider: "heygen.asset.search",
+        provenance: { asset_id: best.id, score: best.score, type: "icon" },
+      },
+    };
+  },
+};
diff --git a/.claude/skills-media/media-use/scripts/lib/index-gen.mjs b/.claude/skills-media/media-use/scripts/lib/index-gen.mjs
new file mode 100644
index 000000000..65b019a92
--- /dev/null
+++ b/.claude/skills-media/media-use/scripts/lib/index-gen.mjs
@@ -0,0 +1,63 @@
+import { writeFileSync, mkdirSync } from "node:fs";
+import { dirname } from "node:path";
+import { readManifest, 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 = readManifest(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/media-use/scripts/lib/local-models.mjs b/.claude/skills-media/media-use/scripts/lib/local-models.mjs
new file mode 100644
index 000000000..af292ff32
--- /dev/null
+++ b/.claude/skills-media/media-use/scripts/lib/local-models.mjs
@@ -0,0 +1,290 @@
+// Declarative table of USER-INSTALLED local models, for the spec-gated fallback.
+//
+// These models run on the user's own machine for their own use; media-use
+// recommends, spec-checks, and assists install; it does not bundle, redistribute,
+// or sell them. Because nothing is redistributed, selection is purely by
+// quality / size / spec-fit / word-timestamp support (there is deliberately NO
+// license field gating availability).
+//
+// Tiers (`small`|`medium`|`large`|`xlarge`) are human labels; `needs.ramMB` is
+// what selection actually gates on. selectModel() returns the best model that
+// fits the machine's AVAILABLE RAM, best-first: by explicit `rank` when set
+// (quality that is NOT size, e.g. ASR), else by RAM footprint (the quality
+// proxy for generation). No fit -> recommend the CLI/cloud path.
+//
+// Picks reflect the 2026 research pass, verified live where noted.
+
+export const CAPABILITIES = ["tts", "asr", "upscale", "videogen", "imagegen"];
+
+const MODELS = {
+  tts: [
+    {
+      id: "kokoro",
+      tier: "medium",
+      sizeMB: 330,
+      needs: { ramMB: 2048, gpu: false },
+      wordTimestamps: "native",
+      install: "pip install kokoro",
+      invoke: "python -m kokoro --text {text} --voice {voice} --out {out}",
+      notes: "CPU, faster-than-realtime, native per-word timestamps. Default floor.",
+    },
+    {
+      id: "fish-speech",
+      tier: "large",
+      sizeMB: 1100,
+      needs: { ramMB: 16000, gpu: true, vramMB: 12000 },
+      wordTimestamps: "whisperx", // needs forced alignment (run ASR over output)
+      install: "pip install fish-speech",
+      invoke: "fish-speech synth --text {text} --ref {ref} --out {out}",
+      notes: "Expressive zero-shot voice cloning; meeting pick. WhisperX for word timing.",
+    },
+  ],
+  asr: [
+    // Parakeet is BETTER than Whisper yet SMALLER (0.6B vs 1.5B), so quality is
+    // not size here: `rank` pins it ahead of whisper regardless of footprint.
+    // Open ASR Leaderboard avg WER: Parakeet ~6.05% vs whisper-large-v3 7.44%
+    // (~19% better); on NOISY test-other 4.73% vs 5.96%, and whisper-v3
+    // hallucinated to 308% WER on meetings where Parakeet held. 5-10x faster.
+    //
+    // Cohere Transcribe 2B tops the leaderboard (5.42%) and is nominally the most
+    // accurate, but its mlx-audio community MLX quants (4bit AND 8bit, with and
+    // without --language en) produced multilingual token-soup garbage AND ran
+    // 40-70x slower than Parakeet on a 24GB Mac (live-tested 2026-07). Excluded
+    // until the mlx-audio Cohere decoder stabilizes; Parakeet is the default.
+    {
+      id: "parakeet-mlx",
+      tier: "small",
+      rank: 0,
+      sizeMB: 2400,
+      needs: { ramMB: 4000, gpu: true },
+      wordTimestamps: "tokens", // sub-word tokens; merged to words by parakeet-words.mjs
+      repo: "mlx-community/parakeet-tdt-0.6b-v3",
+      install:
+        "uv venv ~/.venvs/parakeet && VIRTUAL_ENV=~/.venvs/parakeet uv pip install parakeet-mlx",
+      invoke:
+        "parakeet-mlx {audio} --model mlx-community/parakeet-tdt-0.6b-v3 --output-format json --output-dir {outdir}",
+      notes:
+        "NVIDIA Parakeet-TDT 0.6B via parakeet-mlx. VERIFIED on 24GB: accurate transcript, ~3s (cached model) for 8s audio, word timestamps drive transcript-cut. English + 25 European languages. Beats whisper.cpp on accuracy (6.05% vs 7.44% WER) AND speed (5-10x).",
+    },
+    {
+      id: "whisperx",
+      tier: "medium",
+      rank: 1,
+      sizeMB: 1500,
+      needs: { ramMB: 4096, gpu: false },
+      wordTimestamps: "native", // faster-whisper + wav2vec2 forced alignment
+      install: "pip install whisperx",
+      invoke: "whisperx {audio} --output_format json --out {out}",
+      notes:
+        "CPU-only fallback (no GPU): faster-whisper + wav2vec2 forced alignment, native word timestamps. The packaged `hyperframes transcribe` (whisper.cpp) is the zero-setup baseline below this.",
+    },
+  ],
+  upscale: [
+    {
+      id: "real-esrgan",
+      tier: "medium",
+      sizeMB: 70,
+      needs: { ramMB: 2048, gpu: false },
+      wordTimestamps: false,
+      install: "brew install real-esrgan-ncnn-vulkan  # or download the ncnn binary",
+      invoke: "realesrgan-ncnn-vulkan -i {in} -o {out} -s 4",
+      notes: "ncnn-vulkan binary, CPU-capable. GFPGAN for faces.",
+    },
+    {
+      id: "seedvr2",
+      tier: "large",
+      sizeMB: 6000,
+      needs: { ramMB: 24000, gpu: true, vramMB: 16000 },
+      wordTimestamps: false,
+      install: "pip install seedvr2",
+      invoke: "seedvr2 upscale --in {in} --out {out}",
+      notes: "Diffusion upscaler, GPU-only. Video2X for video.",
+    },
+  ],
+  videogen: [
+    // 2026-07 X research pass + live verification on a 24GB M-series Mac.
+    // The Mac-local video story is LTX 2.3 on MLX via dgrauet/ltx-2-mlx (the
+    // pipeline these weights were converted for; also powers Phosphene).
+    // Wan 2.x MLX exists only as A14B conversions (too large for consumer
+    // unified memory); revisit when a 5B Wan MLX conversion lands.
+    // IMPORTANT: download the weights with a targeted include list first;
+    // pointing tools at the repo blind snapshot-downloads all 60 GB:
+    //   hf download dgrauet/ltx-2.3-mlx-q4 --include \
+    //     transformer-distilled-1.1.safetensors connector.safetensors \
+    //     "vae_*.safetensors" audio_vae.safetensors vocoder.safetensors "*.json"
+    {
+      id: "ltx-2.3-mlx-q4",
+      tier: "medium",
+      sizeMB: 20000, // distilled subset; gemma-3-12b-4bit text encoder adds ~7GB
+      needs: { ramMB: 16384, gpu: true },
+      wordTimestamps: false,
+      install:
+        "git clone https://github.com/dgrauet/ltx-2-mlx && cd ltx-2-mlx && uv sync --all-extras",
+      invoke:
+        "ltx-2-mlx generate --prompt {prompt} --distilled --low-ram --model dgrauet/ltx-2.3-mlx-q4 --width {w} --height {h} --frames {frames} --frame-rate 24 --output {out}",
+      notes:
+        "LTX 2.3 int4 on MLX. Verified on 24GB unified: 512x320 x 33 frames in ~19 min cold (incl. text-encoder download), t2v with audio. Dims must be multiples of 64. i2v, retake/extend, keyframe interpolation supported.",
+    },
+    {
+      id: "ltx-2.3-mlx-bf16",
+      tier: "large",
+      sizeMB: 45000,
+      needs: { ramMB: 32768, gpu: true },
+      wordTimestamps: false,
+      install:
+        "git clone https://github.com/dgrauet/ltx-2-mlx && cd ltx-2-mlx && uv sync --all-extras",
+      invoke:
+        "ltx-2-mlx generate --prompt {prompt} --two-stage --model dgrauet/ltx-2.3-mlx-bf16 --width {w} --height {h} --frames {frames} --frame-rate 24 --output {out}",
+      notes:
+        "Full-precision two-stage pipeline (upstream production default). 32GB with --low-ram block streaming; 64-128GB Macs for long/HD runs (the 25s multi-scene spots seen in the wild).",
+    },
+  ],
+  imagegen: [
+    // 2026-07 X research + live verification on a 24GB M-series Mac. mflux
+    // (FLUX-on-MLX) is the Mac-native runner; FLUX is the quality leader. Two
+    // hard-won findings baked into `needs.ramMB`:
+    //   1. The OFFICIAL FLUX repos are HF-gated (license wall). Point --path at a
+    //      non-gated community 4-bit re-upload (self-contained, incl. VAE).
+    //   2. Without --low-ram, FLUX's T5-XXL text encoder + transformer blow past
+    //      24GB into swap: a 768x512 run took 90 MINUTES. With --low-ram (streams
+    //      components from disk) the SAME machine did 512x512 in ~20s at 7.6GB
+    //      free. So the medium tier's needs.ramMB is the streamed floor, not the
+    //      resident footprint; the large tiers are the no-streaming thresholds.
+    // The runner resolves `repo` to a local snapshot (hf download) before --path;
+    // a bare repo id in --path breaks mlx unflatten.
+    {
+      id: "flux-schnell-mflux-q4",
+      tier: "medium",
+      sizeMB: 8700,
+      needs: { ramMB: 8000, gpu: true },
+      repo: "dhairyashil/FLUX.1-schnell-mflux-4bit",
+      wordTimestamps: false,
+      install: "uv venv ~/.venvs/mflux && VIRTUAL_ENV=~/.venvs/mflux uv pip install mflux==0.9.6",
+      invoke:
+        "mflux-generate --model schnell --path {model_path} --low-ram --steps 4 --prompt {prompt} --width {w} --height {h} --seed {seed} --output {out}",
+      notes:
+        "FLUX.1 schnell int4. VERIFIED on 24GB (7.6GB free): --low-ram 512x512 in ~20s, photoreal. --low-ram is MANDATORY at this tier (streams to avoid swap). Few-step, fast.",
+    },
+    {
+      id: "flux2-klein-mflux-q4",
+      tier: "large",
+      sizeMB: 12000,
+      needs: { ramMB: 32000, gpu: true },
+      repo: "Runpod/FLUX.2-klein-4B-mflux-4bit",
+      wordTimestamps: false,
+      install: "uv venv ~/.venvs/mflux && VIRTUAL_ENV=~/.venvs/mflux uv pip install mflux",
+      invoke:
+        "mflux-generate --base-model flux2-klein-4b --path {model_path} --steps 8 --prompt {prompt} --width {w} --height {h} --seed {seed} --output {out}",
+      notes:
+        "FLUX.2 Klein 4B int4 (most-downloaded mflux community repo). Newer, higher quality than schnell; full-resident (no streaming) so needs 32GB+ to stay fast. Needs mflux >= 0.18 for the flux2-klein base model.",
+    },
+    {
+      id: "qwen-image-mflux",
+      tier: "xlarge",
+      sizeMB: 40000,
+      needs: { ramMB: 64000, gpu: true },
+      repo: "Qwen/Qwen-Image",
+      wordTimestamps: false,
+      install: "uv venv ~/.venvs/mflux && VIRTUAL_ENV=~/.venvs/mflux uv pip install mflux",
+      invoke:
+        "mflux-generate --base-model qwen --steps 20 --prompt {prompt} --width {w} --height {h} --seed {seed} --output {out}",
+      notes:
+        "Qwen-Image, top-tier quality. Heavy: 'several minutes' even on 128GB M4 Max, 'almost fried' a 32GB M4 Pro. 64GB+ only. Below that, the cloud upsell (codex) is faster and better.",
+    },
+  ],
+};
+
+function tableFor(capability) {
+  const t = MODELS[capability];
+  if (!t) throw new Error(`unknown local-model capability: ${capability}`);
+  return t;
+}
+
+/** All local models for a capability. */
+export function listModels(capability) {
+  return tableFor(capability).slice();
+}
+
+// Tokenize an `invoke` template on whitespace first, then substitute each
+// token, so a `{prompt}`/`{model_path}` value with spaces stays a single argv
+// entry. Shared by every local-model provider (mflux, LTX) that builds argv
+// from a MODELS[...].invoke template.
+export function buildArgv(template, vars) {
+  return template
+    .trim()
+    .split(/\s+/)
+    .map((tok) => tok.replace(/\{(\w+)\}/g, (_, k) => (k in vars ? String(vars[k]) : `{${k}}`)));
+}
+
+/** Does this machine meet a model's needs? Apple Silicon unified memory counts as VRAM. */
+export function meetsSpecs(model, specs) {
+  const n = model.needs || {};
+  // Gate on AVAILABLE RAM when the probe reported it (the real budget with the
+  // OS + open apps resident); fall back to total RAM otherwise. Older specs
+  // objects (and unit fixtures) that only set ramMB keep working unchanged.
+  const budget = specs.availableRamMB ?? specs.ramMB;
+  if (n.ramMB && budget < n.ramMB) return false;
+  if (n.gpu && !specs.gpu?.present) return false;
+  if (n.vramMB) {
+    const vram = specs.gpu?.vramMB ?? 0;
+    if (vram < n.vramMB) return false;
+  }
+  return true;
+}
+
+// "Best model the machine can run" == best-first among those that fit. Ordering:
+//   1. explicit `rank` (lower = better) when a model declares it. Needed where
+//      quality is NOT size: Parakeet-0.6B beats Whisper-large-1.5B at ASR, so
+//      footprint would pick the wrong one.
+//   2. otherwise RAM footprint descending, the quality proxy for generation
+//      (a 40GB image model out-renders a 12GB one).
+function rankedByPreference(table) {
+  return [...table].sort((a, b) => {
+    const ra = a.rank ?? Infinity;
+    const rb = b.rank ?? Infinity;
+    if (ra !== rb) return ra - rb;
+    return (b.needs?.ramMB ?? 0) - (a.needs?.ramMB ?? 0);
+  });
+}
+
+/**
+ * Pick the best local model the machine can run for a capability: the
+ * highest-footprint model that fits the available-RAM budget (and GPU/VRAM).
+ * `preferTier` pins the search to one tier (e.g. force a smaller/faster model).
+ * Returns `{ model, tier }`, or `{ recommend: "cli", reason }` when nothing fits.
+ */
+export function selectModel(capability, specs, { preferTier } = {}) {
+  const table = tableFor(capability);
+  const pool = preferTier ? table.filter((m) => m.tier === preferTier) : table;
+  for (const model of rankedByPreference(pool)) {
+    if (meetsSpecs(model, specs)) return { model, tier: model.tier };
+  }
+  const smallest = table.reduce((a, b) => (a.sizeMB <= b.sizeMB ? a : b));
+  return {
+    recommend: "cli",
+    reason: `machine does not meet specs for any local ${capability} model (smallest needs ~${smallest.needs.ramMB}MB RAM${smallest.needs.gpu ? " + GPU" : ""}); use the CLI path instead`,
+  };
+}
+
+/**
+ * Agent-facing ladder: every model for a capability, best-first, each flagged
+ * with whether it fits this machine and why. Lets the agent see the RAM-graded
+ * options and choose (e.g. trade the auto-picked best for a smaller/faster one,
+ * or step up to a cloud upsell) rather than only getting one auto-selection.
+ */
+export function describeModelLadder(capability, specs) {
+  const budget = specs.availableRamMB ?? specs.ramMB;
+  return rankedByPreference(tableFor(capability)).map((model) => {
+    const fits = meetsSpecs(model, specs);
+    return {
+      id: model.id,
+      tier: model.tier,
+      needsRamMB: model.needs?.ramMB ?? 0,
+      fits,
+      reason: fits
+        ? `fits (needs ~${model.needs?.ramMB}MB, ${budget}MB available)`
+        : `too big (needs ~${model.needs?.ramMB}MB${model.needs?.gpu ? " + GPU" : ""}, ${budget}MB available)`,
+      notes: model.notes,
+    };
+  });
+}
diff --git a/.claude/skills-media/media-use/scripts/lib/local-models.test.mjs b/.claude/skills-media/media-use/scripts/lib/local-models.test.mjs
new file mode 100644
index 000000000..e1cc56368
--- /dev/null
+++ b/.claude/skills-media/media-use/scripts/lib/local-models.test.mjs
@@ -0,0 +1,154 @@
+import { strict as assert } from "node:assert";
+import { test } from "node:test";
+import {
+  listModels,
+  meetsSpecs,
+  selectModel,
+  describeModelLadder,
+  CAPABILITIES,
+} from "./local-models.mjs";
+
+const TIERS = ["small", "medium", "large", "xlarge"];
+
+const strongGpu = {
+  ramMB: 64000,
+  gpu: { present: true, kind: "nvidia", vramMB: 24000 },
+  appleSilicon: false,
+};
+const cpuOnly = { ramMB: 16000, gpu: { present: false, vramMB: 0 }, appleSilicon: false };
+const tiny = { ramMB: 1024, gpu: { present: false, vramMB: 0 }, appleSilicon: false };
+
+test("every capability table is non-empty and well-formed", () => {
+  for (const cap of CAPABILITIES) {
+    const models = listModels(cap);
+    assert.ok(models.length > 0, `no models for ${cap}`);
+    for (const m of models) {
+      assert.ok(m.id && m.tier && m.needs, `${cap}/${m.id} missing fields`);
+      assert.ok(TIERS.includes(m.tier), `${cap}/${m.id} bad tier: ${m.tier}`);
+      assert.equal(typeof m.install, "string", `${cap}/${m.id} needs an install command`);
+      assert.equal(typeof m.invoke, "string", `${cap}/${m.id} needs an invoke command`);
+      // user-installed, local-use-only: there is NO license gate on selection
+      assert.equal("license" in m, false, `${cap}/${m.id} must not carry a license gate`);
+    }
+  }
+});
+
+test("meetsSpecs enforces RAM, GPU presence, and VRAM", () => {
+  const gpuModel = { needs: { ramMB: 8000, gpu: true, vramMB: 12000 } };
+  assert.equal(meetsSpecs(gpuModel, strongGpu), true);
+  assert.equal(meetsSpecs(gpuModel, cpuOnly), false, "no GPU -> fails a GPU model");
+  const cpuModel = { needs: { ramMB: 2000, gpu: false } };
+  assert.equal(meetsSpecs(cpuModel, cpuOnly), true);
+  assert.equal(meetsSpecs(cpuModel, tiny), false, "too little RAM");
+});
+
+test("Apple Silicon unified memory counts as VRAM", () => {
+  const apple = {
+    ramMB: 24000,
+    appleSilicon: true,
+    gpu: { present: true, kind: "apple", vramMB: 24000 },
+  };
+  const gpuModel = { needs: { ramMB: 8000, gpu: true, vramMB: 16000 } };
+  assert.equal(meetsSpecs(gpuModel, apple), true);
+});
+
+test("selectModel picks the large tier on a strong machine", () => {
+  const r = selectModel("tts", strongGpu);
+  assert.equal(r.tier, "large");
+  assert.ok(r.model.id);
+});
+
+test("selectModel falls back to medium on a CPU-only machine", () => {
+  const r = selectModel("tts", cpuOnly);
+  assert.equal(r.tier, "medium");
+  assert.equal(r.model.id, "kokoro", "Kokoro is the CPU/medium default (native word timestamps)");
+});
+
+test("selectModel recommends the CLI path when no tier fits", () => {
+  const r = selectModel("tts", tiny);
+  assert.equal(r.recommend, "cli");
+  assert.ok(r.reason && /spec/i.test(r.reason));
+  assert.equal(r.model, undefined);
+});
+
+test("preferTier:'medium' avoids the large model even on a strong machine", () => {
+  const r = selectModel("tts", strongGpu, { preferTier: "medium" });
+  assert.equal(r.tier, "medium");
+});
+
+test("selectModel gates on AVAILABLE RAM, not total, when both are present", () => {
+  // 64GB total but only 6GB free right now -> the large tier must not be chosen.
+  const busy = {
+    ramMB: 64000,
+    availableRamMB: 6000,
+    appleSilicon: true,
+    gpu: { present: true, kind: "apple", vramMB: 64000 },
+  };
+  const r = selectModel("tts", busy);
+  assert.equal(r.tier, "medium", "available RAM (6GB) rules out the 16GB large tier");
+});
+
+test("imagegen is a RAM-graduated ladder; agent picks the best that fits", () => {
+  const ladder = describeModelLadder("imagegen", {
+    ramMB: 24000,
+    availableRamMB: 12000,
+    appleSilicon: true,
+    gpu: { present: true, kind: "apple", vramMB: 24000 },
+  });
+  // best-first order, each flagged with fit
+  assert.ok(ladder.length >= 3, "imagegen offers multiple RAM tiers");
+  assert.ok(
+    ladder[0].needsRamMB >= ladder[ladder.length - 1].needsRamMB,
+    "ladder is ordered best (biggest) first",
+  );
+  // on 24GB / 12GB-free the schnell --low-ram tier fits, the 32GB+ tiers do not
+  const fitting = ladder.filter((m) => m.fits);
+  assert.ok(fitting.length >= 1, "at least the low-ram tier fits a 24GB Mac");
+  assert.ok(
+    fitting.every((m) => m.needsRamMB <= 12000),
+    "only sub-budget models flagged as fitting",
+  );
+  const pick = selectModel("imagegen", {
+    ramMB: 24000,
+    availableRamMB: 12000,
+    gpu: { present: true, vramMB: 24000 },
+  });
+  assert.equal(
+    pick.model.id,
+    "flux-schnell-mflux-q4",
+    "best fit on 24GB is the low-ram schnell tier",
+  );
+});
+
+test("imagegen on a 64GB Mac steps up to the higher-quality tier", () => {
+  const pick = selectModel("imagegen", {
+    ramMB: 96000,
+    availableRamMB: 80000,
+    gpu: { present: true, vramMB: 96000 },
+  });
+  assert.equal(pick.tier, "xlarge", "80GB free unlocks the top-quality model");
+});
+
+test("ASR prefers Parakeet by rank even though it is smaller than whisper", () => {
+  // quality != size for ASR: Parakeet 0.6B beats whisper-1.5B, so `rank` wins
+  // over footprint. On a capable machine both fit; Parakeet must be chosen.
+  const capable = {
+    ramMB: 24000,
+    availableRamMB: 12000,
+    appleSilicon: true,
+    gpu: { present: true, kind: "apple", vramMB: 24000 },
+  };
+  const pick = selectModel("asr", capable);
+  assert.equal(pick.model.id, "parakeet-mlx", "Parakeet is the rank-0 preferred ASR");
+  // whisperx (rank 1, CPU-only) is the fallback when no GPU
+  const cpu = { ramMB: 16000, availableRamMB: 12000, gpu: { present: false, vramMB: 0 } };
+  assert.equal(selectModel("asr", cpu).model.id, "whisperx", "CPU-only falls back to whisperx");
+});
+
+test("ASR offers word-timestamp-capable models (better than plain whisper)", () => {
+  const asr = listModels("asr");
+  assert.ok(
+    asr.every((m) => m.wordTimestamps),
+    "every ASR model must support word timestamps",
+  );
+});
diff --git a/.claude/skills-media/media-use/scripts/lib/local-run.mjs b/.claude/skills-media/media-use/scripts/lib/local-run.mjs
new file mode 100644
index 000000000..b8b1bc6c2
--- /dev/null
+++ b/.claude/skills-media/media-use/scripts/lib/local-run.mjs
@@ -0,0 +1,64 @@
+import { execFileSync } from "node:child_process";
+import { selectModel } from "./local-models.mjs";
+import { probeSpecs } from "./specs.mjs";
+
+// Run a USER-INSTALLED local model for a capability (tts/asr/upscale).
+// Picks the best tier the machine supports (selectModel), checks the tool is on
+// PATH, fills the model's invoke template, and runs it. Returns:
+//   { model, tier, out }                              on success
+//   { recommend:"install", model, command, reason }   when the tool isn't installed
+//   { recommend:"cli", reason }                        when no tier fits the machine
+// `exec` / `which` are injectable for tests.
+//
+// ponytail: "installed" = the invoke's first token is on PATH (e.g. `whisperx`,
+// `realesrgan-ncnn-vulkan`). For `python -m kokoro` this only proves python
+// exists; good enough to gate — the recommend.command names the real package.
+// Upgrade to a per-tool probe if a "python present but package missing" run ever
+// produces a confusing error instead of a clean recommend.
+
+function defaultWhich(bin) {
+  execFileSync("command", ["-v", bin], { stdio: "ignore", shell: true });
+}
+
+function defaultExec(cmd) {
+  execFileSync(cmd, { stdio: ["ignore", "pipe", "pipe"], shell: true, timeout: 600000 });
+}
+
+const fill = (tpl, vars) =>
+  tpl.replace(/\{(\w+)\}/g, (_, k) => (vars[k] != null ? String(vars[k]) : ""));
+
+export function runLocalModel(capability, opts = {}) {
+  const {
+    specs = probeSpecs(),
+    exec = defaultExec,
+    which = defaultWhich,
+    vars = {},
+    preferTier,
+  } = opts;
+  const sel = selectModel(capability, specs, { preferTier });
+  if (sel.recommend) return sel; // no tier fits -> recommend the CLI path
+
+  const { model } = sel;
+  const bin = model.invoke.split(/\s+/)[0];
+  try {
+    which(bin);
+  } catch {
+    return {
+      recommend: "install",
+      model: model.id,
+      command: model.install,
+      reason: `${model.id} not installed`,
+    };
+  }
+  try {
+    exec(fill(model.invoke, vars));
+  } catch (e) {
+    return {
+      recommend: "install",
+      model: model.id,
+      command: model.install,
+      reason: e.message || String(e),
+    };
+  }
+  return { model: model.id, tier: sel.tier, out: vars.out };
+}
diff --git a/.claude/skills-media/media-use/scripts/lib/local-run.test.mjs b/.claude/skills-media/media-use/scripts/lib/local-run.test.mjs
new file mode 100644
index 000000000..7e9c883db
--- /dev/null
+++ b/.claude/skills-media/media-use/scripts/lib/local-run.test.mjs
@@ -0,0 +1,54 @@
+import { strict as assert } from "node:assert";
+import { test } from "node:test";
+import { runLocalModel } from "./local-run.mjs";
+
+const strongCpu = { ramMB: 16000, gpu: { present: false, vramMB: 0 }, appleSilicon: false };
+const tiny = { ramMB: 512, gpu: { present: false, vramMB: 0 }, appleSilicon: false };
+const ok = () => {}; // which/exec that succeed
+
+test("recommends the CLI path when no local tier fits the machine", () => {
+  const r = runLocalModel("tts", { specs: tiny, which: ok, exec: ok });
+  assert.equal(r.recommend, "cli");
+});
+
+test("recommends install when the tool is not on PATH", () => {
+  const r = runLocalModel("tts", {
+    specs: strongCpu,
+    which: () => {
+      throw new Error("not found");
+    },
+    exec: ok,
+    vars: { text: "hi", out: "/tmp/v.wav" },
+  });
+  assert.equal(r.recommend, "install");
+  assert.equal(r.model, "kokoro");
+  assert.match(r.command, /pip install kokoro/);
+});
+
+test("runs the model and returns the output path when installed", () => {
+  let ran = "";
+  const r = runLocalModel("tts", {
+    specs: strongCpu,
+    which: ok,
+    exec: (cmd) => {
+      ran = cmd;
+    },
+    vars: { text: "hello world", voice: "af_heart", out: "/tmp/v.wav" },
+  });
+  assert.equal(r.model, "kokoro");
+  assert.equal(r.out, "/tmp/v.wav");
+  assert.match(ran, /hello world/, "invoke template filled with vars");
+  assert.match(ran, /\/tmp\/v\.wav/);
+});
+
+test("a failing run degrades to an install recommendation, never throws", () => {
+  const r = runLocalModel("upscale", {
+    specs: strongCpu,
+    which: ok,
+    exec: () => {
+      throw new Error("boom");
+    },
+    vars: { in: "a.png", out: "b.png" },
+  });
+  assert.equal(r.recommend, "install");
+});
diff --git a/.claude/skills-media/media-use/scripts/lib/logo-provider.mjs b/.claude/skills-media/media-use/scripts/lib/logo-provider.mjs
new file mode 100644
index 000000000..d4028af94
--- /dev/null
+++ b/.claude/skills-media/media-use/scripts/lib/logo-provider.mjs
@@ -0,0 +1,222 @@
+// Official brand marks — the `logo` type's provider tiers, tried in registry
+// order. Every tier was verified against a 54-brand stress test (2026-07,
+// 100% cascade hit). Hit counts below are a snapshot of that run — they
+// drift as the alias/org maps grow; re-run the stress test to refresh them.
+//
+//   1. svgl          — official full-color vector SVGs (+ wordmark variants);
+//                      40/54 first-hits. Search is substring-based, so
+//                      entities go through alias normalization first
+//                      ("nextjs" never matches "Next.js" raw).
+//   2. simple-icons  — monochrome official glyphs; caught the long tail the
+//                      others miss (nike, visa, toyota, wechat, bytedance).
+//                      Pinned CDN build for determinism.
+//   3. github avatar — the org's official logo for brands with a GitHub
+//                      presence. Known orgs only: guessing a login risks a
+//                      same-named personal account.
+//   4. domain favicon — small-raster last resort (DuckDuckGo ip3). Responses
+//                      under ~500B are DDG's globe placeholder, not a hit.
+//
+// HeyGen asset search is deliberately absent: for brand queries it returns
+// generic look-alike icons (0/3 in testing) — worse than a miss. A total miss
+// falls through to resolve's normal failure path (`no provider could resolve
+// logo`, exit 1).
+
+import { mkdtempSync, writeFileSync } from "node:fs";
+import { tmpdir } from "node:os";
+import { join } from "node:path";
+
+const SVGL_API = "https://api.svgl.app";
+const SIMPLE_ICONS_CDN = "https://cdn.jsdelivr.net/npm/simple-icons@16.25.0/icons";
+const FAVICON_MIN_BYTES = 500;
+
+// svgl search queries per entity, tried in order after the raw entity.
+const SVGL_ALIASES = {
+  nextjs: ["next.js", "next"],
+  aws: ["amazon web services"],
+  huggingface: ["hugging face"],
+  cocacola: ["coca-cola"],
+  mcdonalds: ["mcdonald's"],
+};
+
+// simple-icons slugs that differ from the normalized entity.
+const SIMPLE_ICON_SLUGS = {
+  nextjs: "nextdotjs",
+  aws: "amazonwebservices",
+};
+
+// Known GitHub orgs. Only mapped entities resolve at this tier — a brand name
+// is NOT a GitHub login, and guessing hits same-named personal accounts.
+const GITHUB_ORGS = {
+  slack: "slackhq",
+  meta: "facebook",
+  google: "google",
+  microsoft: "microsoft",
+  aws: "aws",
+  vercel: "vercel",
+  nextjs: "vercel",
+  alibaba: "alibaba",
+  heygen: "heygen-com",
+};
+
+// Favicon domains that aren't `<entity>.com`.
+const FAVICON_DOMAINS = {
+  cocacola: "coca-cola.com",
+  aws: "aws.amazon.com",
+  nextjs: "nextjs.org",
+};
+
+const norm = (s) =>
+  String(s)
+    .toLowerCase()
+    .replace(/[^a-z0-9]/g, "");
+
+/** The brand entity for a query: --entity wins; else the intent minus filler. */
+export function entityFrom(intent, entity) {
+  if (entity) return entity.toLowerCase().trim();
+  return String(intent)
+    .toLowerCase()
+    .replace(/\b(logo|logos|icon|brand|official|mark)\b/g, "")
+    .trim()
+    .replace(/\s+/g, " ");
+}
+
+/** Exact match after stripping case/spacing/punctuation — "Next.js" ≡ "nextjs". */
+export function titleMatches(title, entity) {
+  return norm(title) === norm(entity);
+}
+
+export function svglQueriesFor(entity) {
+  return [entity, ...(SVGL_ALIASES[norm(entity)] || [])];
+}
+
+export function simpleIconSlugsFor(entity) {
+  const slugs = [norm(entity)];
+  const alias = SIMPLE_ICON_SLUGS[norm(entity)];
+  if (alias) slugs.push(alias);
+  return slugs;
+}
+
+export function githubOrgFor(entity) {
+  return GITHUB_ORGS[norm(entity)] || null;
+}
+
+export function faviconDomainFor(entity) {
+  return FAVICON_DOMAINS[norm(entity)] || `${norm(entity)}.com`;
+}
+
+async function fetchJson(url) {
+  const res = await fetch(url, { signal: AbortSignal.timeout(10_000) });
+  if (!res.ok) return null;
+  return res.json();
+}
+
+async function urlExists(url) {
+  const res = await fetch(url, { method: "HEAD", signal: AbortSignal.timeout(10_000) });
+  return res.ok;
+}
+
+export async function svglSearch(intent, ctx = {}) {
+  const entity = entityFrom(intent, ctx.entity);
+  for (const q of svglQueriesFor(entity)) {
+    let items;
+    try {
+      items = await fetchJson(`${SVGL_API}?search=${encodeURIComponent(q)}`);
+    } catch {
+      return null; // network down — let the next tier try its own host
+    }
+    if (!Array.isArray(items)) continue;
+    const hit = items.find((it) => titleMatches(it.title, q) || titleMatches(it.title, entity));
+    if (!hit) continue;
+    const route = typeof hit.route === "string" ? hit.route : hit.route?.light;
+    if (!route) continue;
+    return {
+      url: route,
+      ext: ".svg",
+      source: "search",
+      metadata: {
+        description: `${hit.title} logo (official mark)`,
+        provider: "svgl",
+        provenance: { entity, query: q, route, wordmark: Boolean(hit.wordmark) },
+      },
+    };
+  }
+  return null;
+}
+
+export async function simpleIconsSearch(intent, ctx = {}) {
+  const entity = entityFrom(intent, ctx.entity);
+  for (const slug of simpleIconSlugsFor(entity)) {
+    const url = `${SIMPLE_ICONS_CDN}/${slug}.svg`;
+    let ok;
+    try {
+      ok = await urlExists(url);
+    } catch {
+      return null;
+    }
+    if (!ok) continue;
+    return {
+      url,
+      ext: ".svg",
+      source: "search",
+      metadata: {
+        description: `${entity} logo (official monochrome glyph)`,
+        provider: "simple-icons",
+        provenance: { entity, slug, pinned: "simple-icons@16.25.0" },
+      },
+    };
+  }
+  return null;
+}
+
+export async function githubAvatarSearch(intent, ctx = {}) {
+  const entity = entityFrom(intent, ctx.entity);
+  const org = githubOrgFor(entity);
+  if (!org) return null;
+  const url = `https://github.com/${org}.png?size=460`;
+  try {
+    if (!(await urlExists(url))) return null;
+  } catch {
+    return null;
+  }
+  return {
+    url,
+    ext: ".png",
+    source: "search",
+    metadata: {
+      description: `${entity} logo (GitHub org avatar)`,
+      provider: "github.avatar",
+      provenance: { entity, org },
+    },
+  };
+}
+
+export async function faviconSearch(intent, ctx = {}) {
+  const entity = entityFrom(intent, ctx.entity);
+  const domain = faviconDomainFor(entity);
+  const url = `https://icons.duckduckgo.com/ip3/${domain}.ico`;
+  let body;
+  try {
+    const res = await fetch(url, { signal: AbortSignal.timeout(10_000) });
+    if (!res.ok) return null;
+    body = Buffer.from(await res.arrayBuffer());
+  } catch {
+    return null;
+  }
+  if (body.byteLength < FAVICON_MIN_BYTES) return null; // DDG placeholder, not a logo
+  // Hand the verified bytes over as a local file: the freeze step copies it
+  // instead of re-downloading, so the size check is authoritative over what
+  // gets frozen and the favicon tier costs one network round-trip, not two.
+  const bytes = body.byteLength;
+  const tmp = join(mkdtempSync(join(tmpdir(), "media-use-logo-")), `${domain}.ico`);
+  writeFileSync(tmp, body);
+  return {
+    localPath: tmp,
+    ext: ".ico",
+    source: "search",
+    metadata: {
+      description: `${entity} favicon (small raster — chip-size use only)`,
+      provider: "favicon.ddg",
+      provenance: { entity, domain, bytes, low_res: true },
+    },
+  };
+}
diff --git a/.claude/skills-media/media-use/scripts/lib/logo-provider.test.mjs b/.claude/skills-media/media-use/scripts/lib/logo-provider.test.mjs
new file mode 100644
index 000000000..5863d409b
--- /dev/null
+++ b/.claude/skills-media/media-use/scripts/lib/logo-provider.test.mjs
@@ -0,0 +1,137 @@
+import test from "node:test";
+import assert from "node:assert";
+import { readFileSync } from "node:fs";
+import {
+  entityFrom,
+  titleMatches,
+  svglQueriesFor,
+  simpleIconSlugsFor,
+  githubOrgFor,
+  faviconDomainFor,
+  svglSearch,
+  simpleIconsSearch,
+  githubAvatarSearch,
+  faviconSearch,
+} from "./logo-provider.mjs";
+import { getProviders, runProviders } from "./registry.mjs";
+
+test("entityFrom strips filler words from the intent; --entity wins", () => {
+  assert.equal(entityFrom("LinkedIn logo"), "linkedin");
+  assert.equal(entityFrom("official Slack brand mark"), "slack");
+  assert.equal(entityFrom("anything", "Notion"), "notion");
+});
+
+test("titleMatches ignores case, spacing, punctuation — and rejects lookalikes", () => {
+  assert.ok(titleMatches("Next.js", "nextjs"));
+  assert.ok(titleMatches("Coca-Cola", "coca cola"));
+  assert.ok(!titleMatches("Slackware", "slack"));
+});
+
+test("svgl queries include the alias forms the raw entity can't match", () => {
+  assert.ok(svglQueriesFor("nextjs").includes("next.js"));
+  assert.ok(svglQueriesFor("aws").includes("amazon web services"));
+  assert.deepEqual(svglQueriesFor("figma"), ["figma"]);
+});
+
+test("simple-icons slugs cover the renamed entries", () => {
+  assert.ok(simpleIconSlugsFor("nextjs").includes("nextdotjs"));
+  assert.ok(simpleIconSlugsFor("aws").includes("amazonwebservices"));
+  assert.deepEqual(simpleIconSlugsFor("nike"), ["nike"]);
+});
+
+test("github avatar tier never guesses an org", () => {
+  assert.equal(githubOrgFor("slack"), "slackhq");
+  assert.equal(githubOrgFor("heygen"), "heygen-com");
+  assert.equal(githubOrgFor("some-random-startup"), null);
+});
+
+test("favicon domain defaults to <entity>.com with explicit overrides", () => {
+  assert.equal(faviconDomainFor("cocacola"), "coca-cola.com");
+  assert.equal(faviconDomainFor("stripe"), "stripe.com");
+});
+
+// --- async tiers, network mocked -------------------------------------------
+// The 54-brand stress test is a manual snapshot; these pin the same behavior
+// as CI gates: descriptor shape, alias retry, error→null fallthrough, the
+// placeholder filter, and the real cascade order under a mocked network.
+
+const json = (data) => new Response(JSON.stringify(data), { status: 200 });
+const status = (code) => new Response(null, { status: code });
+const bin = (n) => new Response(new Uint8Array(n), { status: 200 });
+
+test("svglSearch returns the descriptor shape on an exact title hit", async (t) => {
+  t.mock.method(globalThis, "fetch", async () =>
+    json([{ title: "Figma", route: "https://svgl.app/library/figma.svg" }]),
+  );
+  const res = await svglSearch("Figma logo", {});
+  assert.equal(res.url, "https://svgl.app/library/figma.svg");
+  assert.equal(res.ext, ".svg");
+  assert.equal(res.metadata.provider, "svgl");
+});
+
+test("svglSearch skips a non-array payload and retries with the alias query", async (t) => {
+  const seen = [];
+  t.mock.method(globalThis, "fetch", async (url) => {
+    seen.push(decodeURIComponent(String(url)));
+    return seen.length === 1
+      ? json({ error: "unexpected shape" })
+      : json([{ title: "Next.js", route: "https://svgl.app/library/nextjs.svg" }]);
+  });
+  const res = await svglSearch("nextjs logo", {});
+  assert.equal(res.metadata.provenance.query, "next.js", "hit came from the alias query");
+  assert.ok(seen.length >= 2, "raw query then alias");
+});
+
+test("svglSearch returns null when the network is down — the cascade falls through", async (t) => {
+  t.mock.method(globalThis, "fetch", async () => {
+    throw new Error("network down");
+  });
+  assert.equal(await svglSearch("figma logo", {}), null);
+});
+
+test("simpleIconsSearch falls to the next slug on a 404", async (t) => {
+  const seen = [];
+  t.mock.method(globalThis, "fetch", async (url) => {
+    seen.push(String(url));
+    return String(url).includes("amazonwebservices") ? status(200) : status(404);
+  });
+  const res = await simpleIconsSearch("aws logo", {});
+  assert.ok(res.url.endsWith("amazonwebservices.svg"));
+  assert.equal(seen.length, 2, "plain slug 404s first, alias slug hits");
+});
+
+test("faviconSearch rejects DDG's sub-500B placeholder with null", async (t) => {
+  t.mock.method(globalThis, "fetch", async () => bin(120));
+  assert.equal(await faviconSearch("someco logo", {}), null);
+});
+
+test("faviconSearch hands verified bytes over as a local file — one fetch, no re-download", async (t) => {
+  const fetchMock = t.mock.method(globalThis, "fetch", async () => bin(600));
+  const res = await faviconSearch("someco logo", {});
+  assert.ok(res.localPath, "returns a localPath, not a url");
+  assert.equal(readFileSync(res.localPath).byteLength, 600, "frozen bytes are the verified bytes");
+  assert.equal(fetchMock.mock.callCount(), 1, "single network round-trip");
+  assert.equal(res.metadata.provenance.low_res, true);
+});
+
+test("githubAvatarSearch never touches the network for an unmapped entity", async (t) => {
+  const fetchMock = t.mock.method(globalThis, "fetch", async () => status(200));
+  assert.equal(await githubAvatarSearch("some-random-startup logo", {}), null);
+  assert.equal(fetchMock.mock.callCount(), 0);
+});
+
+test("the real logo cascade falls through tier by tier to the first hit", async (t) => {
+  t.mock.method(globalThis, "fetch", async (url) => {
+    const u = String(url);
+    if (u.includes("api.svgl.app")) return json([]); // tier 1: no hit
+    if (u.includes("jsdelivr")) return status(404); // tier 2: no such slug
+    // tier 3 (github) is never called: entity is unmapped
+    if (u.includes("duckduckgo")) return bin(600); // tier 4: real favicon
+    throw new Error(`unexpected fetch: ${u}`);
+  });
+  const res = await runProviders(getProviders("logo"), "search", "zzzbrand logo", {
+    entity: "zzzbrand",
+  });
+  assert.ok(res, "cascade must land on the favicon tier");
+  assert.equal(res.metadata.provider, "favicon.ddg");
+});
diff --git a/.claude/skills-media/media-use/scripts/lib/ltx-video-provider.mjs b/.claude/skills-media/media-use/scripts/lib/ltx-video-provider.mjs
new file mode 100644
index 000000000..e7ca74748
--- /dev/null
+++ b/.claude/skills-media/media-use/scripts/lib/ltx-video-provider.mjs
@@ -0,0 +1,70 @@
+import { execFileSync } from "node:child_process";
+import { existsSync } from "node:fs";
+import { tmpdir } from "node:os";
+import { join } from "node:path";
+import { probeSpecs } from "./specs.mjs";
+import { buildArgv, selectModel } from "./local-models.mjs";
+
+export async function ltxVideoGenerate(
+  intent,
+  ctx,
+  execFn = execFileSync,
+  pathExists = existsSync,
+) {
+  const specs = ctx?.specs || probeSpecs();
+  const sel = selectModel("videogen", specs, { preferTier: ctx?.preferTier });
+  if (sel.recommend) {
+    console.error(
+      `media-use: local video gen not enabled (${sel.reason}). Enable a fitting free on-device LTX model to use this provider.`,
+    );
+    return null;
+  }
+
+  const { model } = sel;
+  const bin = model.invoke.trim().split(/\s+/)[0];
+  try {
+    execFn("which", [bin], { stdio: ["ignore", "ignore", "ignore"] });
+  } catch {
+    console.error(
+      `media-use: local video gen not enabled (\`${bin}\` not on PATH). Install for free on-device LTX: ${model.install}`,
+    );
+    return null;
+  }
+
+  const outPath = join(tmpdir(), `media-use-ltx-${process.pid}-${Date.now()}.mp4`);
+  const width = ctx?.width || 512;
+  const height = ctx?.height || 320;
+  const frames = ctx?.frames || 33;
+  const argv = buildArgv(model.invoke, {
+    prompt: intent,
+    w: width,
+    h: height,
+    frames,
+    out: outPath,
+  });
+  argv.shift();
+
+  try {
+    execFn(bin, argv, {
+      encoding: "utf8",
+      timeout: 1_800_000,
+      stdio: ["ignore", "pipe", "pipe"],
+    });
+  } catch (err) {
+    console.error(
+      `media-use: local video gen (${model.id}) failed: ${err.stderr?.toString().trim().slice(-200) || err.message}`,
+    );
+    return null;
+  }
+  if (!pathExists(outPath)) return null;
+  return {
+    localPath: outPath,
+    ext: ".mp4",
+    source: "generated",
+    metadata: {
+      description: intent,
+      provider: "ltx.local",
+      provenance: { prompt: intent },
+    },
+  };
+}
diff --git a/.claude/skills-media/media-use/scripts/lib/ltx-video-provider.test.mjs b/.claude/skills-media/media-use/scripts/lib/ltx-video-provider.test.mjs
new file mode 100644
index 000000000..b24e35cda
--- /dev/null
+++ b/.claude/skills-media/media-use/scripts/lib/ltx-video-provider.test.mjs
@@ -0,0 +1,136 @@
+import { test } from "node:test";
+import assert from "node:assert/strict";
+import { dirname } from "node:path";
+import { tmpdir } from "node:os";
+import { ltxVideoGenerate } from "./ltx-video-provider.mjs";
+
+const fittingSpecs = { availableRamMB: 20000, gpu: { present: true } };
+
+test("no fitting local model: falls through without checking for a binary", async (t) => {
+  t.mock.method(console, "error", () => {});
+  const calls = [];
+
+  const result = await ltxVideoGenerate(
+    "a calm ocean wave at sunset",
+    { specs: { availableRamMB: 100, gpu: { present: true } } },
+    (...call) => calls.push(call),
+    () => true,
+  );
+
+  assert.equal(result, null);
+  assert.deepEqual(calls, []);
+});
+
+test("binary missing from PATH: prints the model install hint and falls through", async (t) => {
+  const errors = [];
+  t.mock.method(console, "error", (message) => errors.push(message));
+  const calls = [];
+  const fakeExec = (...call) => {
+    calls.push(call);
+    throw new Error("not found");
+  };
+
+  const result = await ltxVideoGenerate(
+    "a calm ocean wave at sunset",
+    { specs: fittingSpecs },
+    fakeExec,
+  );
+
+  assert.equal(result, null);
+  assert.equal(calls.length, 1);
+  assert.deepEqual(calls[0].slice(0, 2), ["which", ["ltx-2-mlx"]]);
+  assert.equal(errors.length, 1);
+  assert.match(errors[0], /git clone https:\/\/github\.com\/dgrauet\/ltx-2-mlx/);
+});
+
+test("generate argv substitutes a spaced prompt after tokenizing and uses verified defaults", async () => {
+  const calls = [];
+  const checkedPaths = [];
+  const fakeExec = (...call) => calls.push(call);
+  const pathExists = (path) => {
+    checkedPaths.push(path);
+    return false;
+  };
+  const intent = "a calm ocean wave at sunset";
+
+  const result = await ltxVideoGenerate(intent, { specs: fittingSpecs }, fakeExec, pathExists);
+
+  assert.equal(result, null);
+  assert.equal(calls.length, 2);
+  const [bin, argv, opts] = calls[1];
+  assert.equal(bin, "ltx-2-mlx");
+  assert.equal(opts.timeout, 1_800_000);
+
+  const expectedPairs = [
+    ["--prompt", intent],
+    ["--width", "512"],
+    ["--height", "320"],
+    ["--frames", "33"],
+    ["--output", checkedPaths[0]],
+  ];
+  let previousIndex = -1;
+  for (const [flag, value] of expectedPairs) {
+    const index = argv.indexOf(flag);
+    assert.ok(index > previousIndex, `${flag} should follow the previous required option`);
+    assert.equal(argv[index + 1], value);
+    previousIndex = index;
+  }
+  assert.equal(argv.filter((arg) => arg === intent).length, 1);
+});
+
+test("successful generation returns the generated MP4 result", async () => {
+  const calls = [];
+  const fakeExec = (...call) => calls.push(call);
+  const intent = "a calm ocean wave at sunset";
+
+  const result = await ltxVideoGenerate(intent, { specs: fittingSpecs }, fakeExec, () => true);
+
+  assert.ok(result);
+  assert.equal(calls.length, 2);
+  assert.equal(dirname(result.localPath), tmpdir());
+  assert.match(result.localPath, /media-use-ltx-\d+-\d+\.mp4$/);
+  assert.deepEqual(result, {
+    localPath: result.localPath,
+    ext: ".mp4",
+    source: "generated",
+    metadata: {
+      description: intent,
+      provider: "ltx.local",
+      provenance: { prompt: intent },
+    },
+  });
+});
+
+test("generate failure returns null instead of throwing", async (t) => {
+  t.mock.method(console, "error", () => {});
+  let calls = 0;
+  const fakeExec = () => {
+    calls += 1;
+    if (calls === 2) {
+      const error = new Error("generation failed");
+      error.stderr = "LTX failed";
+      throw error;
+    }
+  };
+
+  const result = await ltxVideoGenerate(
+    "storm clouds",
+    { specs: fittingSpecs },
+    fakeExec,
+    () => true,
+  );
+
+  assert.equal(result, null);
+  assert.equal(calls, 2);
+});
+
+test("missing generated output returns null", async () => {
+  const result = await ltxVideoGenerate(
+    "storm clouds",
+    { specs: fittingSpecs },
+    () => {},
+    () => false,
+  );
+
+  assert.equal(result, null);
+});
diff --git a/.claude/skills-media/media-use/scripts/lib/lut-preset-provider.mjs b/.claude/skills-media/media-use/scripts/lib/lut-preset-provider.mjs
new file mode 100644
index 000000000..5807f163f
--- /dev/null
+++ b/.claude/skills-media/media-use/scripts/lib/lut-preset-provider.mjs
@@ -0,0 +1,239 @@
+import { existsSync, readFileSync, renameSync, rmSync, writeFileSync } from "node:fs";
+import { join } from "node:path";
+import { withReservedFile, withReservedFileSync } from "./manifest.mjs";
+import { freezeUrl } from "./freeze.mjs";
+import { tokenOverlap } from "./match.mjs";
+import { buildCube } from "./cube-build.mjs";
+import { validateCube, validateCubeFile } from "./cube-validate.mjs";
+
+const SKILL_DIR = join(import.meta.dirname, "..", "..");
+const LUT_DIR = join(SKILL_DIR, "luts");
+const LUT_INDEX = join(LUT_DIR, "index.json");
+export const LIBRARY_LUT_OFFLINE_CODE = "MEDIA_USE_LIBRARY_LUT_OFFLINE";
+
+// Mirrored from packages/core/src/colorGrading.ts HfColorGradingPresetId.
+// Keep this list in lockstep with the core runtime contract.
+export const CORE_PRESET_IDS = [
+  "neutral",
+  "natural-lift",
+  "fresh-pop",
+  "warm-daylight",
+  "clean-studio",
+  "skin-soft",
+  "food-pop",
+  "night-lift",
+  "muted-editorial",
+  "vintage-wash",
+  "mono-clean",
+  "mono-fade",
+  "warm-clean",
+  "cool-clean",
+  "soft-boost",
+  "bright-pop",
+  "deep-contrast",
+];
+
+const PRESET_SYNONYMS = {
+  neutral: ["neutral", "identity", "none", "ungraded", "natural base"],
+  "natural-lift": ["natural lift", "natural light", "gentle lift", "soft natural"],
+  "fresh-pop": ["fresh pop", "fresh", "bright fresh", "clean colorful"],
+  "warm-daylight": [
+    "warm daylight",
+    "warm natural light",
+    "golden daylight",
+    "sunlit",
+    "warm sunny",
+  ],
+  "clean-studio": ["clean studio", "studio clean", "cool studio", "product studio"],
+  "skin-soft": ["skin soft", "soft skin", "portrait soft", "beauty skin"],
+  "food-pop": ["food pop", "food vibrant", "appetizing", "restaurant color"],
+  "night-lift": ["night lift", "night", "low light lift", "city night"],
+  "muted-editorial": ["muted editorial", "editorial muted", "magazine muted"],
+  "vintage-wash": ["vintage wash", "vintage", "retro wash", "aged film"],
+  "mono-clean": ["mono clean", "black white clean", "monochrome clean"],
+  "mono-fade": ["mono fade", "black white fade", "faded monochrome"],
+  "warm-clean": ["warm clean", "clean warm", "warm product"],
+  "cool-clean": ["cool clean", "clean cool", "cool crisp"],
+  "soft-boost": ["soft boost", "soft bright", "gentle boost"],
+  "bright-pop": ["bright pop", "bright punchy", "vivid bright"],
+  "deep-contrast": ["deep contrast", "high contrast punchy", "punchy contrast", "bold contrast"],
+};
+
+function presetCandidates() {
+  return CORE_PRESET_IDS.map((id) => ({
+    kind: "preset",
+    preset: id,
+    synonyms: PRESET_SYNONYMS[id] ?? [],
+    text: [id, ...(PRESET_SYNONYMS[id] ?? [])].join(" "),
+  }));
+}
+
+export function readBundledLutIndex() {
+  if (!existsSync(LUT_INDEX)) return [];
+  const parsed = JSON.parse(readFileSync(LUT_INDEX, "utf8"));
+  const entries = Array.isArray(parsed) ? parsed : parsed.looks;
+  if (!Array.isArray(entries)) return [];
+  return entries.map((entry) => {
+    const params =
+      entry.params && typeof entry.params === "object" && !Array.isArray(entry.params)
+        ? entry.params
+        : null;
+    const url = typeof entry.url === "string" && entry.url.trim() ? entry.url.trim() : null;
+    return {
+      id: String(entry.id),
+      description: String(entry.description ?? entry.id),
+      tags: Array.isArray(entry.tags) ? entry.tags.map(String) : [],
+      intensity: Number.isFinite(Number(entry.intensity)) ? Number(entry.intensity) : 1,
+      ...(params && { params }),
+      ...(url && { url }),
+    };
+  });
+}
+
+function libraryCandidates() {
+  return readBundledLutIndex().map((entry) => ({
+    kind: "library",
+    ...entry,
+    text: [entry.id, entry.description, ...entry.tags].join(" "),
+  }));
+}
+
+export function matchColorLook(intent) {
+  const normalized = String(intent ?? "")
+    .trim()
+    .toLowerCase()
+    .replace(/\s+/g, " ");
+  for (const candidate of presetCandidates()) {
+    if (candidate.preset === normalized) {
+      return { kind: "preset", preset: candidate.preset, score: 99 };
+    }
+  }
+
+  const candidates = [...presetCandidates(), ...libraryCandidates()]
+    .map((candidate, index) => ({
+      ...candidate,
+      index,
+      score: tokenOverlap(intent, candidate.text),
+    }))
+    .filter((candidate) => candidate.score >= 2)
+    .sort((a, b) => b.score - a.score || a.index - b.index);
+
+  if (candidates.length === 0) return null;
+  const best = candidates[0];
+  if (best.kind === "preset") {
+    return { kind: "preset", preset: best.preset, score: best.score };
+  }
+  return {
+    kind: "library",
+    id: best.id,
+    description: best.description,
+    tags: best.tags,
+    intensity: best.intensity,
+    ...(best.params && { params: best.params }),
+    ...(best.url && { url: best.url }),
+    score: best.score,
+  };
+}
+
+export function isLibraryLutOfflineMiss(err) {
+  return err?.code === LIBRARY_LUT_OFFLINE_CODE;
+}
+
+function libraryRecord(match, { id, localPath, fullPath, via }) {
+  return {
+    id,
+    localPath,
+    fullPath,
+    lut: { src: localPath, intensity: match.intensity },
+    source: "library",
+    description: match.description,
+    metadata: {
+      provider: "cube_lut.library",
+      provenance: {
+        look_id: match.id,
+        tags: match.tags,
+        via,
+      },
+    },
+  };
+}
+
+function assertValidCubeText(cube, label) {
+  const check = validateCube(cube);
+  if (!check.ok) throw new Error(`${label}: ${check.error}`);
+}
+
+function assertValidCubeFile(path, label) {
+  const check = validateCubeFile(path);
+  if (!check.ok) throw new Error(`${label}: ${check.error}`);
+}
+
+function offlineLibraryMiss(match) {
+  const err = new Error(`library LUT "${match.id}" is CDN-only and --local-only is set`);
+  err.code = LIBRARY_LUT_OFFLINE_CODE;
+  return err;
+}
+
+export async function freezeLibraryLut(match, { projectDir, type, localOnly = false }) {
+  if (!match || match.kind !== "library") {
+    throw new Error("freezeLibraryLut requires a library match");
+  }
+
+  // Prefer the CDN url so looks download on-demand (like bgm/image). Fall back
+  // to deterministic buildCube params when offline (--local-only) or if the
+  // download/validation fails, so resolution is never blocked on the network.
+  if (match.url && !localOnly) {
+    try {
+      return await withReservedFile(
+        projectDir,
+        type,
+        ".cube",
+        async ({ id, localPath, fullPath }) => {
+          const tmpPath = `${fullPath}.tmp`;
+          try {
+            // Download + validate at a .tmp path, then atomically rename. A crash
+            // (SIGKILL/OOM) between write and validate can't orphan an invalid .cube
+            // at the final path — only a validated cube is ever renamed into place.
+            await freezeUrl(match.url, tmpPath);
+            assertValidCubeFile(tmpPath, `downloaded library LUT ${match.id} failed validation`);
+            renameSync(tmpPath, fullPath);
+            return libraryRecord(match, { id, localPath, fullPath, via: "url" });
+          } finally {
+            rmSync(tmpPath, { force: true });
+          }
+        },
+      );
+    } catch (err) {
+      if (!match.params) {
+        throw new Error(`failed to freeze library LUT ${match.id}: ${err.message}`);
+      }
+      // else: fall through to the params fallback below
+    }
+  }
+
+  if (match.params) {
+    return withReservedFileSync(projectDir, type, ".cube", ({ id, localPath, fullPath }) => {
+      const tmpPath = `${fullPath}.tmp`;
+      try {
+        const cube = buildCube(match.params);
+        assertValidCubeText(cube, `invalid library LUT ${match.id}`);
+        // Write + validate at .tmp, then atomic rename — same no-orphan guarantee
+        // as the url path above.
+        writeFileSync(tmpPath, cube);
+        assertValidCubeFile(tmpPath, `invalid frozen LUT ${localPath}`);
+        renameSync(tmpPath, fullPath);
+        return libraryRecord(match, {
+          id,
+          localPath,
+          fullPath,
+          via: match.url ? "params-fallback" : "params",
+        });
+      } finally {
+        rmSync(tmpPath, { force: true });
+      }
+    });
+  }
+
+  if (match.url) throw offlineLibraryMiss(match); // url-only entry, offline
+  throw new Error(`misconfigured library LUT "${match.id}": expected params or url`);
+}
diff --git a/.claude/skills-media/media-use/scripts/lib/lut-preset-provider.test.mjs b/.claude/skills-media/media-use/scripts/lib/lut-preset-provider.test.mjs
new file mode 100644
index 000000000..162bf9f60
--- /dev/null
+++ b/.claude/skills-media/media-use/scripts/lib/lut-preset-provider.test.mjs
@@ -0,0 +1,160 @@
+import { strict as assert } from "node:assert";
+import { mkdtempSync, rmSync, existsSync, readFileSync, readdirSync } from "node:fs";
+import { join } from "node:path";
+import { tmpdir } from "node:os";
+import { test } from "node:test";
+import {
+  CORE_PRESET_IDS,
+  LIBRARY_LUT_OFFLINE_CODE,
+  freezeLibraryLut,
+  matchColorLook,
+  readBundledLutIndex,
+} from "./lut-preset-provider.mjs";
+import { buildCube } from "./cube-build.mjs";
+import { validateCube, validateCubeFile } from "./cube-validate.mjs";
+
+const REPO_ROOT = join(import.meta.dirname, "..", "..", "..", "..");
+
+function corePresetIdsFromSource() {
+  const src = readFileSync(join(REPO_ROOT, "packages/core/src/colorGrading.ts"), "utf8");
+  const match = src.match(/export type HfColorGradingPresetId =([\s\S]*?);/);
+  assert.ok(match, "core preset union should be readable");
+  return [...match[1].matchAll(/"([^"]+)"/g)].map((m) => m[1]);
+}
+
+test("warm daylight and warm natural light resolve to the core warm-daylight preset", () => {
+  assert.deepEqual(matchColorLook("warm daylight"), {
+    kind: "preset",
+    preset: "warm-daylight",
+    score: 2,
+  });
+  assert.equal(matchColorLook("warm natural light").preset, "warm-daylight");
+});
+
+test("high contrast punchy resolves to deep-contrast", () => {
+  assert.equal(matchColorLook("high contrast punchy").preset, "deep-contrast");
+});
+
+test("library look freezes a validated cube from params offline (--local-only)", async () => {
+  const projectDir = mkdtempSync(join(tmpdir(), "mu-lut-provider-"));
+  try {
+    const match = matchColorLook("teal orange blockbuster");
+    assert.equal(match.kind, "library");
+    // localOnly forces the deterministic params path (no network); online, the
+    // same look downloads its .cube from the CDN url (via "url").
+    const frozen = await freezeLibraryLut(match, { projectDir, type: "grade", localOnly: true });
+    assert.match(frozen.localPath, /^\.media\/luts\/grade_001\.cube$/);
+    assert.ok(existsSync(join(projectDir, frozen.localPath)));
+    assert.equal(validateCubeFile(join(projectDir, frozen.localPath)).ok, true);
+    assert.equal(frozen.lut.src, frozen.localPath);
+    assert.equal(frozen.metadata.provenance.via, "params-fallback");
+  } finally {
+    rmSync(projectDir, { recursive: true, force: true });
+  }
+});
+
+test("preset IDs stay in sync with packages/core/src/colorGrading.ts", () => {
+  assert.deepEqual(CORE_PRESET_IDS, corePresetIdsFromSource());
+  for (const id of CORE_PRESET_IDS) {
+    const match = matchColorLook(id);
+    assert.equal(match.kind, "preset");
+    assert.equal(match.preset, id);
+  }
+});
+
+test("zero-overlap intent returns no preset or library match", () => {
+  assert.equal(matchColorLook("zqxv imaginary neutron look"), null);
+});
+
+test("bundled LUT index entries resolve from params or url", () => {
+  for (const entry of readBundledLutIndex()) {
+    assert.ok(entry.id);
+    assert.ok(entry.description);
+    assert.ok(entry.params || entry.url, `${entry.id} should define params or url`);
+    if (entry.params) {
+      assert.equal(typeof entry.params, "object");
+      assert.equal(validateCube(buildCube(entry.params)).ok, true, `${entry.id} params validate`);
+    }
+    if (entry.url) assert.equal(typeof entry.url, "string");
+  }
+});
+
+test("url library entries respect localOnly and freeze through fetch", async () => {
+  const projectDir = mkdtempSync(join(tmpdir(), "mu-lut-url-provider-"));
+  const match = {
+    kind: "library",
+    id: "cdn-look",
+    description: "CDN-hosted look",
+    tags: ["cdn"],
+    intensity: 0.7,
+    url: "https://example.invalid/look.cube",
+  };
+  const originalFetch = globalThis.fetch;
+  let fetchCalls = 0;
+  try {
+    globalThis.fetch = async () => {
+      fetchCalls++;
+      throw new Error("network should be skipped under localOnly");
+    };
+    await assert.rejects(
+      freezeLibraryLut(match, { projectDir, type: "lut", localOnly: true }),
+      (err) => {
+        assert.equal(err.code, LIBRARY_LUT_OFFLINE_CODE);
+        assert.match(err.message, /--local-only/);
+        return true;
+      },
+    );
+    assert.equal(fetchCalls, 0);
+
+    const cube = buildCube({ contrast: 0.1 });
+    const body = Buffer.from(cube);
+    globalThis.fetch = async (url) => {
+      fetchCalls++;
+      assert.equal(url, match.url);
+      return {
+        ok: true,
+        headers: { get: () => String(body.length) },
+        body: [body],
+      };
+    };
+
+    const frozen = await freezeLibraryLut(match, { projectDir, type: "lut" });
+    assert.equal(fetchCalls, 1);
+    assert.match(frozen.localPath, /^\.media\/luts\/lut_001\.cube$/);
+    assert.equal(validateCubeFile(join(projectDir, frozen.localPath)).ok, true);
+    assert.equal(frozen.metadata.provenance.via, "url");
+  } finally {
+    globalThis.fetch = originalFetch;
+    rmSync(projectDir, { recursive: true, force: true });
+  }
+});
+
+test("failed URL library freeze releases its reservation", async () => {
+  const projectDir = mkdtempSync(join(tmpdir(), "mu-lut-failure-"));
+  const originalFetch = globalThis.fetch;
+  try {
+    globalThis.fetch = async () => ({
+      ok: true,
+      headers: { get: () => "12" },
+      body: [Buffer.from("not a cube\n")],
+    });
+    await assert.rejects(
+      freezeLibraryLut(
+        {
+          kind: "library",
+          id: "broken-cdn-look",
+          description: "Broken CDN look",
+          tags: ["broken"],
+          intensity: 1,
+          url: "https://example.com/broken.cube",
+        },
+        { projectDir, type: "lut" },
+      ),
+      /failed to freeze library LUT/,
+    );
+    assert.deepStrictEqual(readdirSync(join(projectDir, ".media/luts")), []);
+  } finally {
+    globalThis.fetch = originalFetch;
+    rmSync(projectDir, { recursive: true, force: true });
+  }
+});
diff --git a/.claude/skills-media/media-use/scripts/lib/manifest.mjs b/.claude/skills-media/media-use/scripts/lib/manifest.mjs
new file mode 100644
index 000000000..0bd2f7b3d
--- /dev/null
+++ b/.claude/skills-media/media-use/scripts/lib/manifest.mjs
@@ -0,0 +1,229 @@
+import {
+  readFileSync,
+  appendFileSync,
+  mkdirSync,
+  existsSync,
+  readdirSync,
+  openSync,
+  closeSync,
+  writeFileSync,
+  rmSync,
+  statSync,
+} from "node:fs";
+import { 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);
+}
+
+// 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 = readManifest(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 = readManifest(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 });
+  }
+}
+
+// Atomically allocate the next free id for `type` AND reserve its file, 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 placeholder at the target path; freeze/copy overwrites
+// it. Returns { id, localPath }.
+export function allocateId(projectDir, type, ext) {
+  mkdirSync(mediaDir(projectDir), { recursive: true });
+  const typeDir = typeDirPath(projectDir, type);
+  mkdirSync(typeDir, { recursive: true });
+  return withLock(mediaDir(projectDir), () => {
+    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));
+    }
+    for (const f of readdirSync(typeDir)) {
+      const m = f.match(re);
+      if (m) max = Math.max(max, parseInt(m[1], 10)); // skip ids reserved but not yet appended
+    }
+    const id = `${type}_${String(max + 1).padStart(3, "0")}`;
+    const localPath = `.media/${typeSubdir(type)}/${id}${ext}`;
+    writeFileSync(join(projectDir, localPath), "", { flag: "wx" }); // durable reservation
+    return { id, localPath };
+  });
+}
+
+function reservedFile(projectDir, type, ext) {
+  const allocation = allocateId(projectDir, type, ext);
+  return { ...allocation, fullPath: join(projectDir, allocation.localPath) };
+}
+
+function rollbackReservation(reservation) {
+  rmSync(reservation.fullPath, { 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 placeholder must be released. Keeping this transaction beside allocateId
+// prevents individual 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);
+    if (result == null) rollbackReservation(reservation);
+    return result;
+  } catch (error) {
+    rollbackReservation(reservation);
+    throw error;
+  }
+}
+
+export async function withReservedFile(projectDir, type, ext, populate) {
+  const reservation = reservedFile(projectDir, type, ext);
+  try {
+    const result = await populate(reservation);
+    if (result == null) rollbackReservation(reservation);
+    return result;
+  } catch (error) {
+    rollbackReservation(reservation);
+    throw error;
+  }
+}
diff --git a/.claude/skills-media/media-use/scripts/lib/manifest.test.mjs b/.claude/skills-media/media-use/scripts/lib/manifest.test.mjs
new file mode 100644
index 000000000..08e078ff2
--- /dev/null
+++ b/.claude/skills-media/media-use/scripts/lib/manifest.test.mjs
@@ -0,0 +1,388 @@
+import { strict as assert } from "node:assert";
+import {
+  mkdtempSync,
+  rmSync,
+  readFileSync,
+  writeFileSync,
+  mkdirSync,
+  existsSync,
+  readdirSync,
+} from "node:fs";
+import { join } from "node:path";
+import { tmpdir } from "node:os";
+import {
+  readManifest,
+  appendRecord,
+  findByPrompt,
+  findByEntity,
+  nextId,
+  allocateId,
+  withReservedFileSync,
+  normalizePrompt,
+  manifestPath,
+  mediaDir,
+  typeDirPath,
+  typeSubdir,
+} from "./manifest.mjs";
+import { regenerateIndex, generateIndexContent } from "./index-gen.mjs";
+import {
+  contentHash,
+  cachePut,
+  cacheGet,
+  cacheGetByEntity,
+  importFromCache,
+  promote,
+} from "./cache.mjs";
+
+let tmp;
+
+function setup() {
+  tmp = mkdtempSync(join(tmpdir(), "mu-test-"));
+}
+
+function cleanup() {
+  if (tmp) rmSync(tmp, { recursive: true, force: true });
+}
+
+function makeRecord(overrides = {}) {
+  return {
+    id: "bgm_001",
+    type: "bgm",
+    path: ".media/audio/bgm/bgm_001.wav",
+    source: "search",
+    description: "soft minimal ambient",
+    duration: 11,
+    provenance: { provider: "heygen.audio.sounds", prompt: "subtle tech" },
+    ...overrides,
+  };
+}
+
+function runTests() {
+  const tests = [];
+
+  function test(name, fn) {
+    tests.push({ name, fn });
+  }
+
+  // --- manifest.mjs ---
+
+  test("readManifest returns empty array when no manifest exists", () => {
+    setup();
+    const result = readManifest(tmp);
+    assert.deepStrictEqual(result, []);
+    cleanup();
+  });
+
+  test("appendRecord writes valid JSONL and readManifest parses it back", () => {
+    setup();
+    const record = makeRecord();
+    appendRecord(tmp, record);
+    const records = readManifest(tmp);
+    assert.equal(records.length, 1);
+    assert.deepStrictEqual(records[0], record);
+    cleanup();
+  });
+
+  test("appendRecord creates .media/ and type subdirs on first write", () => {
+    setup();
+    appendRecord(tmp, makeRecord());
+    assert.ok(existsSync(mediaDir(tmp)));
+    assert.ok(existsSync(typeDirPath(tmp, "bgm")));
+    cleanup();
+  });
+
+  test("lut and grade artifacts use the shared .media/luts subdir", () => {
+    assert.equal(typeSubdir("lut"), "luts");
+    assert.equal(typeSubdir("grade"), "luts");
+
+    setup();
+    const allocated = allocateId(tmp, "lut", ".cube");
+    assert.equal(allocated.localPath, ".media/luts/lut_001.cube");
+    assert.ok(existsSync(join(tmp, allocated.localPath)));
+    cleanup();
+  });
+
+  test("appendRecord appends multiple records", () => {
+    setup();
+    appendRecord(tmp, makeRecord({ id: "bgm_001" }));
+    appendRecord(tmp, makeRecord({ id: "bgm_002", provenance: { prompt: "energetic" } }));
+    const records = readManifest(tmp);
+    assert.equal(records.length, 2);
+    assert.equal(records[0].id, "bgm_001");
+    assert.equal(records[1].id, "bgm_002");
+    cleanup();
+  });
+
+  test("findByPrompt returns exact-match record", () => {
+    setup();
+    appendRecord(tmp, makeRecord());
+    const found = findByPrompt(tmp, "subtle tech", "bgm");
+    assert.ok(found);
+    assert.equal(found.id, "bgm_001");
+    cleanup();
+  });
+
+  test("findByPrompt returns null on miss", () => {
+    setup();
+    appendRecord(tmp, makeRecord());
+    assert.equal(findByPrompt(tmp, "nonexistent", "bgm"), null);
+    cleanup();
+  });
+
+  test("findByPrompt filters by type", () => {
+    setup();
+    appendRecord(tmp, makeRecord({ type: "sfx" }));
+    assert.equal(findByPrompt(tmp, "subtle tech", "bgm"), null);
+    assert.ok(findByPrompt(tmp, "subtle tech", "sfx"));
+    cleanup();
+  });
+
+  test("findByPrompt matches across case and whitespace variants", () => {
+    setup();
+    appendRecord(tmp, makeRecord({ provenance: { provider: "x", prompt: "calm ambient piano" } }));
+    assert.ok(findByPrompt(tmp, "Calm Ambient Piano", "bgm"), "case-insensitive");
+    assert.ok(findByPrompt(tmp, "  calm   ambient  piano ", "bgm"), "whitespace-insensitive");
+    assert.equal(findByPrompt(tmp, "calm ambient guitar", "bgm"), null, "still a real miss");
+    cleanup();
+  });
+
+  test("normalizePrompt trims, lowercases, collapses whitespace", () => {
+    assert.equal(normalizePrompt("  Upbeat   Tech  Launch "), "upbeat tech launch");
+    assert.equal(normalizePrompt(null), "");
+  });
+
+  test("allocateId reserves the id on disk so a pre-append caller can't reuse it (MU-23)", () => {
+    setup();
+    const a = allocateId(tmp, "bgm", ".wav");
+    assert.equal(a.id, "bgm_001");
+    assert.ok(existsSync(join(tmp, a.localPath)), "placeholder reserved on disk");
+    // Second allocation BEFORE any manifest append (the download window) must not
+    // hand back bgm_001 again, even with a different extension.
+    const b = allocateId(tmp, "bgm", ".mp3");
+    assert.equal(b.id, "bgm_002");
+    assert.notEqual(a.localPath, b.localPath);
+    // Lock file is released (not left behind).
+    assert.ok(!existsSync(join(tmp, ".media", ".lock")), "lock released");
+    cleanup();
+  });
+
+  test("allocateId continues past the highest manifest id", () => {
+    setup();
+    appendRecord(tmp, makeRecord({ id: "bgm_005" }));
+    assert.equal(allocateId(tmp, "bgm", ".wav").id, "bgm_006");
+    cleanup();
+  });
+
+  test("failed reservation rollback preserves another completed reservation", () => {
+    setup();
+    const kept = withReservedFileSync(tmp, "bgm", ".wav", (reservation) => {
+      writeFileSync(reservation.fullPath, "completed asset");
+      return reservation;
+    });
+
+    assert.throws(
+      () =>
+        withReservedFileSync(tmp, "bgm", ".wav", () => {
+          throw new Error("populate failed");
+        }),
+      /populate failed/,
+    );
+
+    assert.equal(kept.id, "bgm_001");
+    assert.equal(readFileSync(kept.fullPath, "utf8"), "completed asset");
+    assert.deepStrictEqual(readdirSync(typeDirPath(tmp, "bgm")), ["bgm_001.wav"]);
+    assert.equal(allocateId(tmp, "bgm", ".wav").id, "bgm_002");
+    cleanup();
+  });
+
+  test("empty reservation result releases the placeholder", () => {
+    setup();
+    assert.equal(
+      withReservedFileSync(tmp, "image", ".jpg", () => null),
+      null,
+    );
+    assert.deepStrictEqual(readdirSync(typeDirPath(tmp, "image")), []);
+    cleanup();
+  });
+
+  test("findByEntity matches case-insensitively", () => {
+    setup();
+    appendRecord(tmp, makeRecord({ entity: "GitHub", type: "icon" }));
+    assert.ok(findByEntity(tmp, "github"));
+    assert.ok(findByEntity(tmp, "GITHUB"));
+    assert.equal(findByEntity(tmp, "gitlab"), null);
+    cleanup();
+  });
+
+  test("nextId generates sequential ids", () => {
+    setup();
+    assert.equal(nextId(tmp, "bgm"), "bgm_001");
+    appendRecord(tmp, makeRecord({ id: "bgm_001" }));
+    assert.equal(nextId(tmp, "bgm"), "bgm_002");
+    appendRecord(tmp, makeRecord({ id: "bgm_002" }));
+    assert.equal(nextId(tmp, "bgm"), "bgm_003");
+    cleanup();
+  });
+
+  // --- index-gen.mjs ---
+
+  test("regenerateIndex produces plain-column table", () => {
+    setup();
+    appendRecord(tmp, makeRecord());
+    regenerateIndex(tmp);
+    const content = readFileSync(join(tmp, ".media", "index.md"), "utf8");
+    assert.ok(content.includes("# .media · 1 asset"));
+    assert.ok(content.includes("bgm_001"));
+    assert.ok(content.includes("soft minimal ambient"));
+    assert.ok(content.includes("11s"));
+    cleanup();
+  });
+
+  test("regenerateIndex handles empty manifest", () => {
+    setup();
+    mkdirSync(join(tmp, ".media"), { recursive: true });
+    writeFileSync(manifestPath(tmp), "");
+    regenerateIndex(tmp);
+    const content = readFileSync(join(tmp, ".media", "index.md"), "utf8");
+    assert.ok(content.includes("# .media · 0 assets"));
+    cleanup();
+  });
+
+  test("generateIndexContent includes dims for images", () => {
+    const records = [
+      makeRecord({ id: "img_001", type: "image", width: 1920, height: 1080, duration: null }),
+    ];
+    const content = generateIndexContent(records);
+    assert.ok(content.includes("1920×1080"));
+    assert.ok(content.includes("img_001"));
+  });
+
+  test("regenerateIndex matches manifest content after multiple writes", () => {
+    setup();
+    appendRecord(tmp, makeRecord({ id: "bgm_001" }));
+    appendRecord(
+      tmp,
+      makeRecord({ id: "sfx_001", type: "sfx", description: "whoosh", duration: 3 }),
+    );
+    regenerateIndex(tmp);
+    const content = readFileSync(join(tmp, ".media", "index.md"), "utf8");
+    assert.ok(content.includes("# .media · 2 assets"));
+    assert.ok(content.includes("bgm_001"));
+    assert.ok(content.includes("sfx_001"));
+    assert.ok(content.includes("whoosh"));
+    cleanup();
+  });
+
+  // --- cache.mjs ---
+
+  test("cacheGet returns null when cache is empty", () => {
+    const result = cacheGet("nonexistent prompt", "bgm");
+    assert.equal(result, null);
+  });
+
+  test("cachePut + cacheGet round-trip", () => {
+    setup();
+    const filePath = join(tmp, "test.wav");
+    writeFileSync(filePath, "fake audio bytes for testing");
+    const record = makeRecord({ provenance: { prompt: "cache test" } });
+
+    const { sha } = cachePut(filePath, record);
+    assert.ok(sha);
+    assert.equal(sha.length, 64);
+
+    const found = cacheGet("cache test", "bgm");
+    assert.ok(found);
+    assert.equal(found.reusable, true);
+    assert.equal(found.sha, sha);
+
+    // cross-project reuse must survive trivial prompt variation, not just
+    // byte-identical intents (the whole point of normalizePrompt).
+    assert.ok(cacheGet("  Cache   Test ", "bgm"), "cacheGet is case/whitespace-insensitive");
+    cleanup();
+  });
+
+  test("cacheGetByEntity finds cached asset", () => {
+    setup();
+    const filePath = join(tmp, "logo.png");
+    writeFileSync(filePath, "fake png bytes");
+    const record = makeRecord({
+      type: "icon",
+      entity: "TestCorp",
+      provenance: { prompt: "TestCorp logo" },
+    });
+
+    cachePut(filePath, record);
+    const found = cacheGetByEntity("testcorp");
+    assert.ok(found);
+    assert.equal(found.entity, "TestCorp");
+    cleanup();
+  });
+
+  test("contentHash is deterministic", () => {
+    setup();
+    const filePath = join(tmp, "det.bin");
+    writeFileSync(filePath, "deterministic content");
+    const h1 = contentHash(filePath);
+    const h2 = contentHash(filePath);
+    assert.equal(h1, h2);
+    cleanup();
+  });
+
+  test("promote copies project asset to global cache", () => {
+    setup();
+    const record = makeRecord();
+    appendRecord(tmp, record);
+    const filePath = join(tmp, record.path);
+    mkdirSync(join(filePath, ".."), { recursive: true });
+    writeFileSync(filePath, "promotable audio data");
+
+    const { sha } = promote(tmp, "bgm_001");
+    assert.ok(sha);
+
+    const cached = cacheGet("subtle tech", "bgm");
+    assert.ok(cached);
+    assert.equal(cached.sha, sha);
+    cleanup();
+  });
+
+  test("importFromCache copies cached file into project", () => {
+    setup();
+    const filePath = join(tmp, "source.wav");
+    writeFileSync(filePath, "importable audio");
+    const record = makeRecord({ provenance: { prompt: "import test" } });
+    const { sha } = cachePut(filePath, record);
+
+    const cached = cacheGet("import test", "bgm");
+    const projectDir = mkdtempSync(join(tmpdir(), "mu-import-"));
+    const imported = importFromCache(cached, projectDir, "bgm_001", ".media/audio/bgm/bgm_001.wav");
+
+    assert.ok(imported);
+    assert.equal(imported.id, "bgm_001");
+    assert.equal(imported.provenance.imported_from, sha);
+    assert.ok(existsSync(join(projectDir, ".media/audio/bgm/bgm_001.wav")));
+
+    rmSync(projectDir, { recursive: true, force: true });
+    cleanup();
+  });
+
+  // --- run ---
+
+  let passed = 0;
+  let failed = 0;
+  for (const { name, fn } of tests) {
+    try {
+      fn();
+      passed++;
+      console.log(`  \x1b[32m✓\x1b[0m ${name}`);
+    } catch (err) {
+      failed++;
+      console.log(`  \x1b[31m✗\x1b[0m ${name}`);
+      console.log(`    ${err.message}`);
+    }
+  }
+  console.log(`\n${passed} passed, ${failed} failed`);
+  if (failed > 0) process.exit(1);
+}
+
+console.log("media-use · manifest/index/cache tests\n");
+runTests();
diff --git a/.claude/skills-media/media-use/scripts/lib/match.mjs b/.claude/skills-media/media-use/scripts/lib/match.mjs
new file mode 100644
index 000000000..b9e8859a9
--- /dev/null
+++ b/.claude/skills-media/media-use/scripts/lib/match.mjs
@@ -0,0 +1,47 @@
+// Shared lexical-matching helpers used by both the assets/ scan (adopt.mjs) and
+// the reuse-candidate ranker (candidates.mjs), and the type-equivalence check
+// used by resolve.mjs and candidates.mjs. Kept in one place so the icon<->image
+// equivalence and the token rules can't drift between the "do" path (resolve)
+// and the "look" path (candidates).
+
+// Common filler words that should never, on their own, make two strings match.
+const MATCH_STOPWORDS = new Set([
+  "the",
+  "and",
+  "for",
+  "with",
+  "from",
+  "this",
+  "that",
+  "your",
+  "our",
+]);
+
+// Split into lowercased word tokens of length >= 3, minus stopwords.
+export function matchTokens(text) {
+  return new Set(
+    String(text)
+      .toLowerCase()
+      .split(/[^a-z0-9]+/)
+      .filter((t) => t.length >= 3 && !MATCH_STOPWORDS.has(t)),
+  );
+}
+
+// Count of shared meaningful word tokens between two strings. 0 = no lexical
+// overlap (the candidate ranker still surfaces these, ordered after overlaps).
+export function tokenOverlap(a, b) {
+  const ta = matchTokens(a);
+  const tb = matchTokens(b);
+  let n = 0;
+  for (const t of ta) if (tb.has(t)) n++;
+  return n;
+}
+
+// icon, image, and logo are interchangeable: all live in images/, and
+// figma-imported brand marks are recorded as type image while agents ask for
+// logos as icon or logo.
+export function typesMatch(a, b) {
+  if (a === b) return true;
+  const visual = new Set(["icon", "image", "logo"]);
+  return visual.has(a) && visual.has(b);
+}
diff --git a/.claude/skills-media/media-use/scripts/lib/mflux-provider.mjs b/.claude/skills-media/media-use/scripts/lib/mflux-provider.mjs
new file mode 100644
index 000000000..9de2f920b
--- /dev/null
+++ b/.claude/skills-media/media-use/scripts/lib/mflux-provider.mjs
@@ -0,0 +1,86 @@
+import { execFileSync } from "node:child_process";
+import { existsSync } from "node:fs";
+import { tmpdir } from "node:os";
+import { join } from "node:path";
+import { probeSpecs } from "./specs.mjs";
+import { buildArgv, selectModel } from "./local-models.mjs";
+
+// Local image generation via mflux (FLUX-on-MLX), the Mac-native runner.
+// Spec-gated: selectModel("imagegen", specs) returns the best FLUX-class model
+// the machine's AVAILABLE RAM can actually run (medium FLUX-schnell --low-ram on
+// ~24GB, up to Qwen-Image on 64GB+). When nothing local fits, this returns null
+// so the registry falls through to the codex image upsell.
+//
+// The official FLUX repos are HF-gated, so the model entries point --path at
+// non-gated community 4-bit re-uploads; the repo is resolved to a local snapshot
+// (hf download, idempotent) because a bare repo id breaks mlx unflatten.
+
+// Resolve an HF repo to its local snapshot dir. `hf download` is idempotent and
+// prints the snapshot path as its last line.
+function resolveSnapshot(repo) {
+  const out = execFileSync("hf", ["download", repo], {
+    encoding: "utf8",
+    timeout: 1_800_000,
+    stdio: ["ignore", "pipe", "pipe"],
+  });
+  const path = out.trim().split(/\r?\n/).pop()?.trim();
+  return path && existsSync(path) ? path : null;
+}
+
+export async function mfluxImageGenerate(intent, ctx) {
+  const specs = ctx?.specs || probeSpecs();
+  const sel = selectModel("imagegen", specs, { preferTier: ctx?.preferTier });
+  if (sel.recommend) return null; // no local model fits -> codex upsell/fallback
+
+  const { model } = sel;
+  const bin = model.invoke.trim().split(/\s+/)[0];
+  // Not installed? Surface the exact enable-command FIRST (before the model
+  // download) so the agent learns the free local path is available instead of
+  // silently taking the codex upsell.
+  try {
+    execFileSync("which", [bin], { stdio: ["ignore", "ignore", "ignore"] });
+  } catch {
+    console.error(
+      `media-use: local image gen not enabled (\`${bin}\` not on PATH). Install for free on-device FLUX: ${model.install}`,
+    );
+    return null;
+  }
+
+  const outPath = join(tmpdir(), `media-use-mflux-${process.pid}-${Date.now()}.png`);
+  const width = ctx?.width || 512;
+  const height = ctx?.height || 512;
+  const seed = ctx?.seed ?? 42;
+
+  const vars = { prompt: intent, w: width, h: height, seed, out: outPath };
+  if (model.repo && model.invoke.includes("{model_path}")) {
+    const snap = model.repo ? resolveSnapshot(model.repo) : null;
+    if (!snap) return null;
+    vars.model_path = snap;
+  }
+
+  const argv = buildArgv(model.invoke, vars);
+  argv.shift(); // drop the bin (already validated)
+  try {
+    execFileSync(bin, argv, {
+      encoding: "utf8",
+      timeout: 1_800_000,
+      stdio: ["ignore", "pipe", "pipe"],
+    });
+  } catch (err) {
+    console.error(
+      `media-use: local image gen (${model.id}) failed: ${err.stderr?.toString().trim().slice(-200) || err.message}`,
+    );
+    return null;
+  }
+  if (!existsSync(outPath)) return null;
+  return {
+    localPath: outPath,
+    ext: ".png",
+    source: "generated",
+    metadata: {
+      description: intent,
+      provider: `mflux.${model.id}`,
+      provenance: { model: model.id, tier: model.tier, prompt: intent },
+    },
+  };
+}
diff --git a/.claude/skills-media/media-use/scripts/lib/misses.mjs b/.claude/skills-media/media-use/scripts/lib/misses.mjs
new file mode 100644
index 000000000..585bb9638
--- /dev/null
+++ b/.claude/skills-media/media-use/scripts/lib/misses.mjs
@@ -0,0 +1,49 @@
+import { appendFileSync, existsSync, mkdirSync, readFileSync } from "node:fs";
+import { homedir } from "node:os";
+import { join } from "node:path";
+
+const MISSES_FILE = "misses.jsonl";
+
+function missesPath() {
+  return join(homedir(), ".media", MISSES_FILE);
+}
+
+export function recordMiss({ type, intent, provider_override, local_only }) {
+  try {
+    const dir = join(homedir(), ".media");
+    mkdirSync(dir, { recursive: true });
+    appendFileSync(
+      join(dir, MISSES_FILE),
+      JSON.stringify({
+        ts: new Date().toISOString(),
+        type,
+        intent,
+        provider_override: !!provider_override,
+        local_only: !!local_only,
+      }) + "\n",
+    );
+  } catch {
+    // local miss logging is best-effort; never surface into resolve
+  }
+}
+
+export function readMisses() {
+  const p = missesPath();
+  try {
+    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 {
+        // skip malformed local lines, don't crash stats
+      }
+    }
+    return records;
+  } catch {
+    return [];
+  }
+}
diff --git a/.claude/skills-media/media-use/scripts/lib/misses.test.mjs b/.claude/skills-media/media-use/scripts/lib/misses.test.mjs
new file mode 100644
index 000000000..d9b258566
--- /dev/null
+++ b/.claude/skills-media/media-use/scripts/lib/misses.test.mjs
@@ -0,0 +1,78 @@
+import { strict as assert } from "node:assert";
+import { test } from "node:test";
+import { existsSync, mkdirSync, mkdtempSync, readFileSync, rmSync, writeFileSync } from "node:fs";
+import { tmpdir } from "node:os";
+import { join } from "node:path";
+import { readMisses, recordMiss } from "./misses.mjs";
+
+function sandbox() {
+  const root = mkdtempSync(join(tmpdir(), "mu-misses-"));
+  const home = join(root, "home");
+  mkdirSync(home, { recursive: true });
+  process.env.HOME = home;
+  return { root, home };
+}
+
+function restoreEnv(saved) {
+  for (const k of Object.keys(process.env)) if (!(k in saved)) delete process.env[k];
+  Object.assign(process.env, saved);
+}
+
+test("recordMiss appends a well-formed local miss", () => {
+  const savedEnv = { ...process.env };
+  const { root, home } = sandbox();
+  try {
+    recordMiss({ type: "bgm", intent: "moody synth pulse", provider_override: true });
+    const misses = readMisses();
+    assert.equal(misses.length, 1);
+    assert.equal(misses[0].type, "bgm");
+    assert.equal(misses[0].intent, "moody synth pulse");
+    assert.equal(misses[0].provider_override, true);
+    assert.equal(misses[0].local_only, false);
+    assert.ok(!Number.isNaN(Date.parse(misses[0].ts)));
+
+    const raw = readFileSync(join(home, ".media/misses.jsonl"), "utf8");
+    assert.match(raw, /moody synth pulse/);
+  } finally {
+    restoreEnv(savedEnv);
+    rmSync(root, { recursive: true, force: true });
+  }
+});
+
+test("recordMiss swallows filesystem failures", () => {
+  const savedEnv = { ...process.env };
+  const { root, home } = sandbox();
+  try {
+    writeFileSync(join(home, ".media"), "not a directory");
+    assert.doesNotThrow(() =>
+      recordMiss({ type: "image", intent: "unwritable", local_only: true }),
+    );
+    assert.equal(existsSync(join(home, ".media/misses.jsonl")), false);
+  } finally {
+    restoreEnv(savedEnv);
+    rmSync(root, { recursive: true, force: true });
+  }
+});
+
+test("readMisses skips corrupt lines", () => {
+  const savedEnv = { ...process.env };
+  const { root, home } = sandbox();
+  try {
+    mkdirSync(join(home, ".media"), { recursive: true });
+    writeFileSync(
+      join(home, ".media/misses.jsonl"),
+      [
+        JSON.stringify({ ts: "2026-07-09T00:00:00.000Z", type: "bgm", intent: "one" }),
+        "{not json",
+        JSON.stringify({ ts: "2026-07-09T00:00:01.000Z", type: "sfx", intent: "two" }),
+      ].join("\n"),
+    );
+    assert.deepEqual(
+      readMisses().map((miss) => miss.intent),
+      ["one", "two"],
+    );
+  } finally {
+    restoreEnv(savedEnv);
+    rmSync(root, { recursive: true, force: true });
+  }
+});
diff --git a/.claude/skills-media/media-use/scripts/lib/npx-sync.mjs b/.claude/skills-media/media-use/scripts/lib/npx-sync.mjs
new file mode 100644
index 000000000..8ada152d0
--- /dev/null
+++ b/.claude/skills-media/media-use/scripts/lib/npx-sync.mjs
@@ -0,0 +1,31 @@
+import { existsSync } from "node:fs";
+import { resolveSpawnCommand } from "../../audio/scripts/lib/tts.mjs";
+
+// 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 = resolveSpawnCommand("npx", argv, opts, platform, env, pathExists);
+  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/media-use/scripts/lib/npx-sync.test.mjs b/.claude/skills-media/media-use/scripts/lib/npx-sync.test.mjs
new file mode 100644
index 000000000..83244e642
--- /dev/null
+++ b/.claude/skills-media/media-use/scripts/lib/npx-sync.test.mjs
@@ -0,0 +1,50 @@
+import { test } from "node:test";
+import assert from "node:assert/strict";
+import { resolveNpxInvocation } from "./npx-sync.mjs";
+
+// Coverage parity with tts-local-provider.test.mjs, for the whisper.cpp
+// fallback's call-site shape (transcribe.mjs runWhisper): the same three
+// branches, but with the hard-fail contract — no fallback provider exists,
+// so an unresolvable npx must throw actionably instead of returning null.
+
+const envWithNpxCli = {
+  npm_execpath: "C:/Program Files/nodejs/node_modules/npm/bin/npm-cli.js",
+  npm_node_execpath: "C:/Program Files/nodejs/node.exe",
+};
+const npxCliPath = "C:/Program Files/nodejs/node_modules/npm/bin/npx-cli.js";
+const pathExists = (path) => path === npxCliPath;
+
+const WHISPER_ARGV = ["hyperframes", "transcribe", "C:\\media\\input.wav", "--dir", "C:\\work"];
+const WHISPER_OPTS = { stdio: ["ignore", "pipe", "pipe"], timeout: 1_800_000 };
+
+test("win32: routes the whisper fallback through node + npx-cli, never bare npx", () => {
+  const resolved = resolveNpxInvocation(
+    WHISPER_ARGV,
+    WHISPER_OPTS,
+    "win32",
+    envWithNpxCli,
+    pathExists,
+  );
+
+  assert.equal(resolved.cmd, envWithNpxCli.npm_node_execpath);
+  assert.equal(resolved.args[0], npxCliPath);
+  assert.deepEqual(resolved.args.slice(1, 3), ["hyperframes", "transcribe"]);
+  // execFileSync options survive the rerouting (the timeout bounds the
+  // whisper build/model download; the pipes surface its errors).
+  assert.deepEqual(resolved.opts.stdio, ["ignore", "pipe", "pipe"]);
+  assert.equal(resolved.opts.timeout, 1_800_000);
+});
+
+test("win32 without a resolvable npx-cli: throws the actionable install hint", () => {
+  assert.throws(
+    () => resolveNpxInvocation(WHISPER_ARGV, WHISPER_OPTS, "win32", {}, () => false),
+    /npx-cli\.js was not found/,
+  );
+});
+
+test("non-win32: spawns plain npx unchanged", () => {
+  const resolved = resolveNpxInvocation(WHISPER_ARGV, WHISPER_OPTS, "darwin", {}, () => false);
+
+  assert.equal(resolved.cmd, "npx");
+  assert.deepEqual(resolved.args, WHISPER_ARGV);
+});
diff --git a/.claude/skills-media/media-use/scripts/lib/parakeet-words.mjs b/.claude/skills-media/media-use/scripts/lib/parakeet-words.mjs
new file mode 100644
index 000000000..04df79c7d
--- /dev/null
+++ b/.claude/skills-media/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/media-use/scripts/lib/parakeet-words.test.mjs b/.claude/skills-media/media-use/scripts/lib/parakeet-words.test.mjs
new file mode 100644
index 000000000..f74e78481
--- /dev/null
+++ b/.claude/skills-media/media-use/scripts/lib/parakeet-words.test.mjs
@@ -0,0 +1,44 @@
+import { strict as assert } from "node:assert";
+import { test } from "node:test";
+import { mergeTokensToWords } from "./parakeet-words.mjs";
+
+test("mergeTokensToWords joins sub-word tokens on the space boundary", () => {
+  const parakeet = {
+    text: "Hello everyone. Um,",
+    sentences: [
+      {
+        tokens: [
+          { text: " H", start: 0.0, end: 0.24 },
+          { text: "ello", start: 0.24, end: 0.48 },
+          { text: " everyone.", start: 0.48, end: 1.28 },
+          { text: " Um,", start: 1.28, end: 1.92 },
+        ],
+      },
+    ],
+  };
+  const { words } = mergeTokensToWords(parakeet);
+  assert.deepEqual(words, [
+    { text: "Hello", start: 0.0, end: 0.48 },
+    { text: "everyone.", start: 0.48, end: 1.28 },
+    { text: "Um,", start: 1.28, end: 1.92 },
+  ]);
+});
+
+test("mergeTokensToWords spans multiple sentences and drops empties", () => {
+  const parakeet = {
+    text: "Hi there",
+    sentences: [
+      { tokens: [{ text: "Hi", start: 0, end: 0.2 }] },
+      { tokens: [{ text: " there", start: 0.5, end: 0.9 }] },
+    ],
+  };
+  const { words } = mergeTokensToWords(parakeet);
+  assert.equal(words.length, 2);
+  assert.equal(words[1].text, "there");
+  assert.equal(words[1].start, 0.5);
+});
+
+test("mergeTokensToWords tolerates missing sentences/tokens", () => {
+  assert.deepEqual(mergeTokensToWords({}).words, []);
+  assert.deepEqual(mergeTokensToWords({ sentences: [{}] }).words, []);
+});
diff --git a/.claude/skills-media/media-use/scripts/lib/prefs-store.mjs b/.claude/skills-media/media-use/scripts/lib/prefs-store.mjs
new file mode 100644
index 000000000..6bc3f7345
--- /dev/null
+++ b/.claude/skills-media/media-use/scripts/lib/prefs-store.mjs
@@ -0,0 +1,180 @@
+import { existsSync, mkdirSync, readFileSync, renameSync, writeFileSync } from "node:fs";
+import { homedir } from "node:os";
+import { basename, dirname, join, resolve } from "node:path";
+
+/**
+ * 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 (brief-contract § 2, Remembered defaults): 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(homedir(), ".media", 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/media-use/scripts/lib/prefs-store.test.mjs b/.claude/skills-media/media-use/scripts/lib/prefs-store.test.mjs
new file mode 100644
index 000000000..e0bc5ca81
--- /dev/null
+++ b/.claude/skills-media/media-use/scripts/lib/prefs-store.test.mjs
@@ -0,0 +1,189 @@
+import { strict as assert } from "node:assert";
+import { test } from "node:test";
+import { mkdirSync, mkdtempSync, readFileSync, rmSync, writeFileSync } from "node:fs";
+import { tmpdir } from "node:os";
+import { join } from "node:path";
+import {
+  mergedPreferences,
+  preferenceKeyFor,
+  projectPrefsPath,
+  recordPreference,
+  userPrefsPath,
+} from "./prefs-store.mjs";
+
+function sandbox() {
+  const root = mkdtempSync(join(tmpdir(), "mu-prefs-"));
+  const home = join(root, "home");
+  const projectA = join(root, "proj-a");
+  const projectB = join(root, "proj-b");
+  mkdirSync(home, { recursive: true });
+  mkdirSync(projectA, { recursive: true });
+  mkdirSync(projectB, { recursive: true });
+  process.env.HOME = home;
+  return { root, home, projectA, projectB };
+}
+
+function restoreEnv(saved) {
+  for (const k of Object.keys(process.env)) if (!(k in saved)) delete process.env[k];
+  Object.assign(process.env, saved);
+}
+
+function withSandbox(fn) {
+  const savedEnv = { ...process.env };
+  const box = sandbox();
+  try {
+    fn(box);
+  } finally {
+    restoreEnv(savedEnv);
+    rmSync(box.root, { recursive: true, force: true });
+  }
+}
+
+test("record writes the project tier and get merges it as source=project", () => {
+  withSandbox(({ projectA }) => {
+    const result = recordPreference({ projectDir: projectA, key: "destination", value: "x-feed" });
+    assert.equal(result.promoted, false);
+    assert.deepEqual(result.confirmed_in, ["proj-a"]);
+
+    const merged = mergedPreferences(projectA);
+    assert.equal(merged.destination.value, "x-feed");
+    assert.equal(merged.destination.source, "project");
+
+    const onDisk = JSON.parse(readFileSync(projectPrefsPath(projectA), "utf8"));
+    assert.equal(onDisk.preferences.destination.value, "x-feed");
+  });
+});
+
+test("one project never promotes: a fresh project sees nothing user-tier", () => {
+  withSandbox(({ projectA, projectB }) => {
+    recordPreference({ projectDir: projectA, key: "destination", value: "x-feed" });
+    // proj-b has no project entry, and the value was only confirmed once.
+    assert.equal(mergedPreferences(projectB).destination, undefined);
+  });
+});
+
+test("the same value confirmed in two projects promotes to the user tier", () => {
+  withSandbox(({ projectA, projectB }) => {
+    recordPreference({ projectDir: projectA, key: "destination", value: "x-feed" });
+    const second = recordPreference({ projectDir: projectB, key: "destination", value: "x-feed" });
+    assert.equal(second.promoted, true);
+
+    const userFile = JSON.parse(readFileSync(userPrefsPath(), "utf8"));
+    assert.deepEqual(userFile.preferences.destination.confirmed_in.sort(), ["proj-a", "proj-b"]);
+
+    // A third project with no local entry now inherits the promoted default.
+    const projectC = join(projectA, "..", "proj-c");
+    mkdirSync(projectC, { recursive: true });
+    const merged = mergedPreferences(projectC);
+    assert.equal(merged.destination.value, "x-feed");
+    assert.equal(merged.destination.source, "user");
+  });
+});
+
+test("record is idempotent per project — confirmed_in stays deduped", () => {
+  withSandbox(({ projectA }) => {
+    recordPreference({ projectDir: projectA, key: "language", value: "zh" });
+    const again = recordPreference({ projectDir: projectA, key: "language", value: "zh" });
+    assert.deepEqual(again.confirmed_in, ["proj-a"]);
+    assert.equal(again.promoted, false);
+  });
+});
+
+test("a changed value restarts provenance instead of inheriting confirmations", () => {
+  withSandbox(({ projectA, projectB }) => {
+    recordPreference({ projectDir: projectA, key: "destination", value: "x-feed" });
+    recordPreference({ projectDir: projectB, key: "destination", value: "x-feed" });
+    const switched = recordPreference({
+      projectDir: projectA,
+      key: "destination",
+      value: "youtube",
+    });
+    assert.deepEqual(switched.confirmed_in, ["proj-a"]);
+    assert.equal(switched.promoted, false);
+    // The previously promoted value keeps serving other projects until youtube
+    // earns its own two confirmations.
+    const userFile = JSON.parse(readFileSync(userPrefsPath(), "utf8"));
+    assert.equal(userFile.preferences.destination.value, "x-feed");
+  });
+});
+
+test("project tier overrides a promoted user-tier value", () => {
+  withSandbox(({ projectA, projectB }) => {
+    recordPreference({ projectDir: projectA, key: "storyboard", value: "yes" });
+    recordPreference({ projectDir: projectB, key: "storyboard", value: "yes" });
+    recordPreference({ projectDir: projectA, key: "storyboard", value: "no" });
+    const merged = mergedPreferences(projectA);
+    assert.equal(merged.storyboard.value, "no");
+    assert.equal(merged.storyboard.source, "project");
+  });
+});
+
+test("the retired mode key is rejected", () => {
+  withSandbox(({ projectA }) => {
+    assert.throws(
+      () => recordPreference({ projectDir: projectA, key: "mode", value: "collaborative" }),
+      /unknown preference key/,
+    );
+  });
+});
+
+test("the run-shape keys record and promote like any field", () => {
+  withSandbox(({ projectA, projectB }) => {
+    recordPreference({ projectDir: projectA, key: "flow", value: "automation" });
+    const promoted = recordPreference({ projectDir: projectB, key: "flow", value: "automation" });
+    assert.equal(promoted.promoted, true);
+    recordPreference({ projectDir: projectA, key: "storyboard", value: "yes" });
+    const merged = mergedPreferences(projectA);
+    assert.equal(merged.flow.value, "automation");
+    assert.equal(merged.storyboard.value, "yes");
+    assert.equal(merged.storyboard.source, "project");
+  });
+});
+
+test("style_preset is keyed per workflow", () => {
+  withSandbox(({ projectA }) => {
+    assert.equal(
+      preferenceKeyFor("style_preset", "faceless-explainer"),
+      "style_preset.faceless-explainer",
+    );
+    assert.equal(preferenceKeyFor("destination", "faceless-explainer"), "destination");
+    recordPreference({
+      projectDir: projectA,
+      key: "style_preset",
+      value: "pin-and-paper",
+      workflow: "faceless-explainer",
+    });
+    const merged = mergedPreferences(projectA);
+    assert.equal(merged["style_preset.faceless-explainer"].value, "pin-and-paper");
+    assert.equal(merged["style_preset"], undefined);
+  });
+});
+
+test("style_preset without a workflow is rejected, never stored bare", () => {
+  withSandbox(({ projectA }) => {
+    assert.throws(
+      () => recordPreference({ projectDir: projectA, key: "style_preset", value: "pin-and-paper" }),
+      /pass --workflow/,
+    );
+    assert.deepEqual(mergedPreferences(projectA), {});
+  });
+});
+
+test("unknown keys and empty values are rejected", () => {
+  withSandbox(({ projectA }) => {
+    assert.throws(() => recordPreference({ projectDir: projectA, key: "vibe", value: "x" }));
+    assert.throws(() => recordPreference({ projectDir: projectA, key: "voice", value: "  " }));
+  });
+});
+
+test("corrupt files are treated as empty instead of crashing", () => {
+  withSandbox(({ projectA, home }) => {
+    mkdirSync(join(projectA, ".media"), { recursive: true });
+    writeFileSync(projectPrefsPath(projectA), "not json");
+    mkdirSync(join(home, ".media"), { recursive: true });
+    writeFileSync(userPrefsPath(), '{"preferences": 42}');
+    assert.deepEqual(mergedPreferences(projectA), {});
+    const result = recordPreference({ projectDir: projectA, key: "language", value: "zh" });
+    assert.equal(result.value, "zh");
+  });
+});
diff --git a/.claude/skills-media/media-use/scripts/lib/probe.mjs b/.claude/skills-media/media-use/scripts/lib/probe.mjs
new file mode 100644
index 000000000..27ef28ce7
--- /dev/null
+++ b/.claude/skills-media/media-use/scripts/lib/probe.mjs
@@ -0,0 +1,39 @@
+import { execFileSync } from "node:child_process";
+import { extname } from "node:path";
+
+const IMAGE_EXT = new Set([".jpg", ".jpeg", ".png", ".gif", ".webp", ".svg", ".ico"]);
+
+export function probe(filePath) {
+  const ext = extname(filePath).toLowerCase();
+  if (ext === ".svg") return { width: null, height: null, duration: null, codec: "svg" };
+
+  try {
+    // execFileSync (no shell) so a hostile filename like `"; rm -rf ~; ".png`
+    // can't break out of the quoting — filePath is passed as a literal argv entry.
+    const raw = execFileSync(
+      "ffprobe",
+      ["-v", "quiet", "-print_format", "json", "-show_format", "-show_streams", filePath],
+      { encoding: "utf8", timeout: 5000 },
+    );
+    const info = JSON.parse(raw);
+    const stream = info.streams?.[0];
+    const format = info.format;
+
+    const isImage = IMAGE_EXT.has(ext);
+    const duration = isImage
+      ? null
+      : parseFloat(format?.duration) || parseFloat(stream?.duration) || null;
+    const width = parseInt(stream?.width, 10) || null;
+    const height = parseInt(stream?.height, 10) || null;
+    const codec = stream?.codec_name || null;
+
+    return {
+      duration: duration != null ? Math.round(duration * 10) / 10 : null,
+      width,
+      height,
+      codec,
+    };
+  } catch {
+    return { duration: null, width: null, height: null, codec: null };
+  }
+}
diff --git a/.claude/skills-media/media-use/scripts/lib/probe.test.mjs b/.claude/skills-media/media-use/scripts/lib/probe.test.mjs
new file mode 100644
index 000000000..d4d896cc3
--- /dev/null
+++ b/.claude/skills-media/media-use/scripts/lib/probe.test.mjs
@@ -0,0 +1,31 @@
+import { test } from "node:test";
+import assert from "node:assert/strict";
+import { mkdtempSync, writeFileSync, existsSync, rmSync } from "node:fs";
+import { join } from "node:path";
+import { tmpdir } from "node:os";
+import { probe } from "./probe.mjs";
+
+// Regression for the shell-injection fix: probe() must pass the path as a literal
+// argv entry, never through a shell. A filename containing shell metacharacters
+// must NOT execute. Under the old execSync(`ffprobe ... "${path}"`) the embedded
+// `touch` ran and created the marker; under execFileSync it cannot, regardless of
+// whether ffprobe is installed (the injected command never reaches a shell).
+test("probe does not execute shell metacharacters in a filename", () => {
+  const dir = mkdtempSync(join(tmpdir(), "probe-inject-"));
+  const marker = join(dir, "INJECTED");
+  // Slash-free basename (a real on-disk filename) that breaks out of the old
+  // double-quoted interpolation and would `touch INJECTED` in the cwd.
+  const evil = join(dir, `clip"; touch INJECTED; echo ".mp4`);
+  const prevCwd = process.cwd();
+  try {
+    writeFileSync(evil, "not real media");
+    process.chdir(dir); // so a leaked `touch INJECTED` would land next to `marker`
+    const meta = probe(evil);
+    assert.equal(existsSync(marker), false, "injected `touch` must not have run");
+    // Bogus/unreadable media still returns the null-shaped result, never throws.
+    assert.deepEqual(Object.keys(meta).sort(), ["codec", "duration", "height", "width"]);
+  } finally {
+    process.chdir(prevCwd);
+    rmSync(dir, { recursive: true, force: true });
+  }
+});
diff --git a/.claude/skills-media/media-use/scripts/lib/providers.mjs b/.claude/skills-media/media-use/scripts/lib/providers.mjs
new file mode 100644
index 000000000..6220e88ee
--- /dev/null
+++ b/.claude/skills-media/media-use/scripts/lib/providers.mjs
@@ -0,0 +1,5 @@
+// Back-compat surface for the v1 provider API. The ordered, capability-based
+// registry now lives in registry.mjs; this re-exports the v1 helpers so existing
+// callers keep working. New code should import from registry.mjs directly
+// (getProviders / runCapability).
+export { getProvider, listTypes } from "./registry.mjs";
diff --git a/.claude/skills-media/media-use/scripts/lib/recipe-store.mjs b/.claude/skills-media/media-use/scripts/lib/recipe-store.mjs
new file mode 100644
index 000000000..e11ec96a3
--- /dev/null
+++ b/.claude/skills-media/media-use/scripts/lib/recipe-store.mjs
@@ -0,0 +1,367 @@
+import {
+  cpSync,
+  existsSync,
+  mkdirSync,
+  readdirSync,
+  readFileSync,
+  renameSync,
+  rmSync,
+  writeFileSync,
+} from "node:fs";
+import { homedir } from "node:os";
+import { basename, join, resolve } from "node:path";
+import { appendRecord, mediaDir, nextId } from "./manifest.mjs";
+import { regenerateIndex } from "./index-gen.mjs";
+import { mergedPreferences } from "./prefs-store.mjs";
+
+/**
+ * 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 the intent layer always re-asks. */
+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(homedir(), ".media", "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, { recursive: true, force: true });
+  } 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, { recursive: true, force: true });
+    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/media-use/scripts/lib/recipe-store.test.mjs b/.claude/skills-media/media-use/scripts/lib/recipe-store.test.mjs
new file mode 100644
index 000000000..954291293
--- /dev/null
+++ b/.claude/skills-media/media-use/scripts/lib/recipe-store.test.mjs
@@ -0,0 +1,367 @@
+import { strict as assert } from "node:assert";
+import { test } from "node:test";
+import { existsSync, mkdirSync, mkdtempSync, readFileSync, rmSync, writeFileSync } from "node:fs";
+import { tmpdir } from "node:os";
+import { join } from "node:path";
+import {
+  freezeRecipe,
+  listRecipes,
+  skeletonizeBrief,
+  skeletonizeStoryboard,
+  slugifyRecipeName,
+  useRecipe,
+} from "./recipe-store.mjs";
+import { recordPreference } from "./prefs-store.mjs";
+
+const STORYBOARD = `---
+format: 1080x1080
+message: "Ship a launch video in an afternoon"
+arc: Hook → Problem → Solution
+audience: indie devs on X
+mode: collaborative
+music: upbeat tech
+---
+
+## Frame 1 — Hook
+
+- scene: Big type punches in
+- duration: 3s
+- transition_in: cut
+- status: animated
+- voiceover: "Ship a launch video in an afternoon."
+- src: compositions/frames/01-hook.html
+
+Open cold on the promise. This is the thesis.
+
+## Frame 2 — Proof
+
+- duration: 4s
+- transition_in: crossfade
+- status: animated
+- asset_candidates: dashboard.png
+- src: compositions/frames/02-proof.html
+
+Real dashboard, real numbers.
+Second prose line to collapse.
+
+## Video direction
+
+Punchy, one accent color, hard cuts on the beat.
+`;
+
+const BRIEF = `---
+workflow: product-launch-video
+flow: automation
+storyboard: yes
+message: "Ship a launch video in an afternoon"
+audience: indie devs on X
+destination: x-feed
+aspect: 1080x1080
+language: en
+length: 60s
+angle: feature-reveal
+---
+
+## Intent
+
+Sell the afternoon-launch promise to indie devs.
+
+## Assets
+
+- public/dashboard.png — the real dashboard, proof beat.
+
+## Notes
+
+- No stock-photo aesthetics.
+`;
+
+function sandbox() {
+  const root = mkdtempSync(join(tmpdir(), "mu-recipes-"));
+  const home = join(root, "home");
+  const project = join(root, "my-launch");
+  mkdirSync(home, { recursive: true });
+  mkdirSync(project, { recursive: true });
+  writeFileSync(join(project, "frame.md"), "# Frame spec\nbackground: #101014\n");
+  writeFileSync(join(project, "STORYBOARD.md"), STORYBOARD);
+  process.env.HOME = home;
+  return { root, home, project };
+}
+
+function restoreEnv(saved) {
+  for (const k of Object.keys(process.env)) if (!(k in saved)) delete process.env[k];
+  Object.assign(process.env, saved);
+}
+
+function withSandbox(fn) {
+  const savedEnv = { ...process.env };
+  const box = sandbox();
+  try {
+    fn(box);
+  } finally {
+    restoreEnv(savedEnv);
+    rmSync(box.root, { recursive: true, force: true });
+  }
+}
+
+test("slugifyRecipeName normalizes and rejects empty", () => {
+  assert.equal(slugifyRecipeName("Weekly Changelog!"), "weekly-changelog");
+  assert.equal(slugifyRecipeName("  pr_reveal  "), "pr-reveal");
+  assert.throws(() => slugifyRecipeName("!!!"));
+});
+
+test("skeletonize keeps structure, resets status, blanks content", () => {
+  const skeleton = skeletonizeStoryboard(STORYBOARD);
+  // Structure kept.
+  assert.match(skeleton, /format: 1080x1080/);
+  assert.match(skeleton, /arc: Hook → Problem → Solution/);
+  assert.match(skeleton, /music: upbeat tech/);
+  assert.match(skeleton, /- duration: 3s/);
+  assert.match(skeleton, /- src: compositions\/frames\/01-hook\.html/);
+  assert.match(skeleton, /## Video direction/);
+  assert.match(skeleton, /hard cuts on the beat/);
+  // Statuses reset.
+  assert.equal((skeleton.match(/- status: outline/g) ?? []).length, 2);
+  assert.doesNotMatch(skeleton, /animated/);
+  // Content blanked.
+  assert.doesNotMatch(skeleton, /message:/);
+  assert.doesNotMatch(skeleton, /audience:/);
+  assert.doesNotMatch(skeleton, /mode:/);
+  assert.doesNotMatch(skeleton, /voiceover/);
+  assert.doesNotMatch(skeleton, /asset_candidates/);
+  assert.doesNotMatch(skeleton, /thesis/);
+  assert.doesNotMatch(skeleton, /Real dashboard/);
+  assert.match(skeleton, /<fill in: this video's content for the "Hook" beat/);
+  assert.match(skeleton, /<fill in: this video's content for the "Proof" beat/);
+});
+
+test("skeletonizeBrief keeps reusable keys, drops run-shape, blanks body sections", () => {
+  const skeleton = skeletonizeBrief(BRIEF);
+  // Reusable frontmatter kept.
+  assert.match(skeleton, /workflow: product-launch-video/);
+  assert.match(skeleton, /destination: x-feed/);
+  assert.match(skeleton, /aspect: 1080x1080/);
+  assert.match(skeleton, /length: 60s/);
+  assert.match(skeleton, /angle: feature-reveal/);
+  // Run-shape and content keys dropped.
+  assert.doesNotMatch(skeleton, /^flow:/m);
+  assert.doesNotMatch(skeleton, /^storyboard:/m);
+  assert.doesNotMatch(skeleton, /^message:/m);
+  assert.doesNotMatch(skeleton, /^audience:/m);
+  // Body sections kept as headings, prose blanked to placeholders.
+  assert.match(skeleton, /## Intent/);
+  assert.match(skeleton, /## Assets/);
+  assert.match(skeleton, /<fill in: this video's intent/);
+  assert.match(skeleton, /<fill in: this video's assets/);
+  assert.doesNotMatch(skeleton, /afternoon-launch promise/);
+  assert.doesNotMatch(skeleton, /dashboard\.png/);
+});
+
+test("freeze writes the folder, manifest record, and user-tier copy", () => {
+  withSandbox(({ project, home }) => {
+    recordPreference({ projectDir: project, key: "destination", value: "x-feed" });
+    recordPreference({
+      projectDir: project,
+      key: "style_preset",
+      value: "pin-and-paper",
+      workflow: "product-launch-video",
+    });
+    const frozen = freezeRecipe({
+      projectDir: project,
+      name: "Weekly Launch",
+      workflow: "product-launch-video",
+      blocks: ["data-chart"],
+    });
+    assert.equal(frozen.slug, "weekly-launch");
+    assert.equal(frozen.version, 1);
+
+    const dir = join(project, ".media/recipes/weekly-launch");
+    const recipe = JSON.parse(readFileSync(join(dir, "recipe.json"), "utf8"));
+    assert.equal(recipe.workflow, "product-launch-video");
+    assert.equal(recipe.destination, "x-feed");
+    assert.equal(recipe.style_preset, "pin-and-paper");
+    assert.deepEqual(recipe.blocks, ["data-chart"]);
+    assert.ok(existsSync(join(dir, "frame.md")));
+    assert.match(readFileSync(join(dir, "storyboard-skeleton.md"), "utf8"), /- status: outline/);
+
+    const manifest = readFileSync(join(project, ".media/manifest.jsonl"), "utf8");
+    assert.match(manifest, /"type":"recipe"/);
+    assert.match(manifest, /"entity":"weekly-launch"/);
+
+    assert.ok(existsSync(join(home, ".media/recipes/weekly-launch/recipe.json")));
+  });
+});
+
+test("freeze with a BRIEF.md carries the brief skeleton; use hands its path back", () => {
+  withSandbox(({ project, root }) => {
+    writeFileSync(join(project, "BRIEF.md"), BRIEF);
+    const frozen = freezeRecipe({
+      projectDir: project,
+      name: "promo",
+      workflow: "product-launch-video",
+    });
+    assert.equal(frozen.briefSkeleton, true);
+    const skeleton = readFileSync(join(project, ".media/recipes/promo/brief-skeleton.md"), "utf8");
+    assert.match(skeleton, /destination: x-feed/);
+    assert.doesNotMatch(skeleton, /^flow:/m);
+
+    const fresh = join(root, "fresh-project");
+    mkdirSync(fresh, { recursive: true });
+    const used = useRecipe({ projectDir: fresh, name: "promo" });
+    assert.equal(used.briefSkeletonPath, ".media/recipes/promo/brief-skeleton.md");
+    assert.ok(existsSync(join(fresh, ".media/recipes/promo/brief-skeleton.md")));
+  });
+});
+
+test("freeze without a BRIEF.md degrades: no skeleton, use returns no path", () => {
+  withSandbox(({ project, root }) => {
+    const frozen = freezeRecipe({
+      projectDir: project,
+      name: "promo",
+      workflow: "product-launch-video",
+    });
+    assert.equal(frozen.briefSkeleton, false);
+    assert.ok(!existsSync(join(project, ".media/recipes/promo/brief-skeleton.md")));
+
+    const fresh = join(root, "fresh-project");
+    mkdirSync(fresh, { recursive: true });
+    const used = useRecipe({ projectDir: fresh, name: "promo" });
+    assert.equal(used.briefSkeletonPath, undefined);
+  });
+});
+
+test("freeze takes the workflow from BRIEF.md over a contradicting flag", () => {
+  withSandbox(({ project }) => {
+    writeFileSync(
+      join(project, "BRIEF.md"),
+      BRIEF.replace("workflow: product-launch-video", "workflow: general-video"),
+    );
+    const frozen = freezeRecipe({
+      projectDir: project,
+      name: "promo",
+      workflow: "faceless-explainer",
+    });
+    assert.equal(frozen.workflow, "general-video");
+    assert.equal(frozen.workflowOverridden, true);
+    const recipe = JSON.parse(
+      readFileSync(join(project, ".media/recipes/promo/recipe.json"), "utf8"),
+    );
+    assert.equal(recipe.workflow, "general-video");
+  });
+});
+
+test("freeze without BRIEF.md falls back to --workflow; with neither it refuses", () => {
+  withSandbox(({ project }) => {
+    const frozen = freezeRecipe({
+      projectDir: project,
+      name: "promo",
+      workflow: "product-launch-video",
+    });
+    assert.equal(frozen.workflow, "product-launch-video");
+    assert.equal(frozen.workflowOverridden, false);
+    assert.throws(() => freezeRecipe({ projectDir: project, name: "other" }), /no workflow found/);
+  });
+});
+
+test("freeze finds a legacy bare style_preset record; the scoped key wins over it", () => {
+  withSandbox(({ project }) => {
+    writeFileSync(join(project, "BRIEF.md"), BRIEF);
+    // A record made before the store required workflow scoping.
+    mkdirSync(join(project, ".media"), { recursive: true });
+    writeFileSync(
+      join(project, ".media/preferences.json"),
+      JSON.stringify({
+        version: 1,
+        preferences: {
+          style_preset: {
+            value: "source-paper-flowchart",
+            confirmed_in: ["my-launch"],
+            updated_at: "2026-07-15T00:00:00.000Z",
+          },
+        },
+        sightings: {},
+      }),
+    );
+    freezeRecipe({ projectDir: project, name: "promo" });
+    const legacy = JSON.parse(
+      readFileSync(join(project, ".media/recipes/promo/recipe.json"), "utf8"),
+    );
+    assert.equal(legacy.style_preset, "source-paper-flowchart");
+
+    recordPreference({
+      projectDir: project,
+      key: "style_preset",
+      value: "pin-and-paper",
+      workflow: "product-launch-video",
+    });
+    freezeRecipe({ projectDir: project, name: "promo" });
+    const scoped = JSON.parse(
+      readFileSync(join(project, ".media/recipes/promo/recipe.json"), "utf8"),
+    );
+    assert.equal(scoped.style_preset, "pin-and-paper");
+  });
+});
+
+test("re-freezing bumps the version and archives the old folder", () => {
+  withSandbox(({ project }) => {
+    freezeRecipe({ projectDir: project, name: "promo", workflow: "product-launch-video" });
+    const again = freezeRecipe({
+      projectDir: project,
+      name: "promo",
+      workflow: "product-launch-video",
+    });
+    assert.equal(again.version, 2);
+    assert.ok(existsSync(join(project, ".media/recipes/promo@v1/recipe.json")));
+    const current = JSON.parse(
+      readFileSync(join(project, ".media/recipes/promo/recipe.json"), "utf8"),
+    );
+    assert.equal(current.version, 2);
+  });
+});
+
+test("list merges tiers (project wins), filters by workflow, skips archives", () => {
+  withSandbox(({ project, root }) => {
+    freezeRecipe({ projectDir: project, name: "promo", workflow: "product-launch-video" });
+    freezeRecipe({ projectDir: project, name: "promo", workflow: "product-launch-video" });
+    freezeRecipe({ projectDir: project, name: "explainer", workflow: "faceless-explainer" });
+
+    const fresh = join(root, "fresh-project");
+    mkdirSync(fresh, { recursive: true });
+    const all = listRecipes({ projectDir: fresh });
+    assert.deepEqual(all.map((r) => r.source).sort(), ["user", "user"]);
+    assert.equal(all.find((r) => r.name === "promo").version, 2);
+
+    const filtered = listRecipes({ projectDir: fresh, workflow: "faceless-explainer" });
+    assert.deepEqual(
+      filtered.map((r) => r.name),
+      ["explainer"],
+    );
+  });
+});
+
+test("use imports from the user tier into a fresh project and copies frame.md", () => {
+  withSandbox(({ project, root }) => {
+    freezeRecipe({ projectDir: project, name: "promo", workflow: "product-launch-video" });
+
+    const fresh = join(root, "fresh-project");
+    mkdirSync(fresh, { recursive: true });
+    const used = useRecipe({ projectDir: fresh, name: "Promo" });
+    assert.equal(used.recipe.name, "promo");
+    assert.equal(used.skeletonPath, ".media/recipes/promo/storyboard-skeleton.md");
+    assert.ok(existsSync(join(fresh, "frame.md")));
+    assert.ok(existsSync(join(fresh, ".media/recipes/promo/storyboard-skeleton.md")));
+    assert.match(
+      readFileSync(join(fresh, ".media/manifest.jsonl"), "utf8"),
+      /"imported_from":"user-tier"/,
+    );
+  });
+});
+
+test("use with an unknown name lists what exists", () => {
+  withSandbox(({ project }) => {
+    freezeRecipe({ projectDir: project, name: "promo", workflow: "product-launch-video" });
+    assert.throws(
+      () => useRecipe({ projectDir: project, name: "nope" }),
+      /no recipe named "nope" \(known: promo\)/,
+    );
+  });
+});
diff --git a/.claude/skills-media/media-use/scripts/lib/registry.mjs b/.claude/skills-media/media-use/scripts/lib/registry.mjs
new file mode 100644
index 000000000..0f5468f11
--- /dev/null
+++ b/.claude/skills-media/media-use/scripts/lib/registry.mjs
@@ -0,0 +1,180 @@
+// Provider registry — the v2 contract.
+//
+// Each media type maps to an ORDERED list of provider entries. Providers are
+// tried in order; the first to return a non-null result wins, which keeps
+// resolution deterministic (same request -> same provider -> same file ->
+// reproducible renders). heygen-CLI is always first for the types it serves.
+//
+// An entry exposes any of three capability methods — search / generate /
+// process — plus { name }. media-use holds no keys; each external tool owns its
+// own auth. Providers, by type:
+//   - heygen CLI: catalog + TTS, first for every type it serves (OAuth free
+//     allowance first, then the user's HeyGen billing path)
+//   - mflux: local FLUX-class image gen, spec-selected to the machine's RAM
+//     (free, private, offline once cached)
+//   - codex CLI: image gen on the user's ChatGPT sub — the better-quality upsell
+//     and the fallback when no local model fits
+//   - Kokoro (via the hyperframes CLI): local voiceover, free/private fallback
+//     when HeyGen credentials are absent or --local-only is requested
+//
+// Generation is local-first, cloud-upsell. `ctx.provider` forces one provider
+// (e.g. "make an image with codex").
+
+import { bgmProvider } from "./bgm-provider.mjs";
+import { sfxProvider } from "./sfx-provider.mjs";
+import { bundledSfxProvider } from "./bundled-sfx-provider.mjs";
+import { imageProvider, iconProvider } from "./image-provider.mjs";
+import { brandProvider } from "./brand-provider.mjs";
+import {
+  svglSearch,
+  simpleIconsSearch,
+  githubAvatarSearch,
+  faviconSearch,
+} from "./logo-provider.mjs";
+import { heygenTtsGenerate } from "./voice-provider.mjs";
+import { heygenVideoGenerate } from "./heygen-video-provider.mjs";
+import { ltxVideoGenerate } from "./ltx-video-provider.mjs";
+import { localTtsGenerate } from "./tts-local-provider.mjs";
+import { codexImageGenerate } from "./codex-provider.mjs";
+import { mfluxImageGenerate } from "./mflux-provider.mjs";
+
+// Provider markers: `network` = hits a remote service (skipped by --local-only).
+// `paid` = may cost wallet credits after any OAuth/web-plan free allowance
+// (documentation for the agent's cost judgment, X4: agent-initiated paid should
+// confirm). HeyGen catalog SEARCH is free; HeyGen TTS is free for eligible
+// OAuth CLI users up to the monthly allowance, then follows the user's billing.
+const A = (name, caps) => ({ name, ...caps }); // local, free
+const N = (name, caps) => ({ name, network: true, ...caps }); // remote, free
+const P = (name, caps) => ({ name, network: true, paid: true, ...caps }); // remote, paid
+
+// heygen-CLI first. All remote providers are skipped by --local-only.
+const REGISTRY = {
+  bgm: [N("heygen.audio.sounds", { search: bgmProvider.search })],
+  sfx: [
+    N("heygen.audio.sounds", { search: sfxProvider.search }),
+    A("bundled.sfx", { search: bundledSfxProvider.search }),
+  ],
+  image: [
+    N("heygen.asset.search", { search: imageProvider.search }),
+    // Catalog miss -> generate. Local first (best FLUX-class model the machine's
+    // RAM can run, spec-selected; free, private, kept under --local-only), then
+    // the codex CLI on the user's ChatGPT sub as the better-quality upsell and
+    // the fallback when no local model fits.
+    A("mflux.local", { generate: mfluxImageGenerate }),
+    N("codex.image_gen", { generate: codexImageGenerate }),
+  ],
+  icon: [N("heygen.asset.search", { search: iconProvider.search })],
+  logo: [
+    // Official brand marks. Tiers verified by a 54-brand stress test (100%
+    // cascade hit); HeyGen asset search is deliberately absent — it returns
+    // generic look-alike icons for brand queries. All free, all network →
+    // --local-only leaves only the cache rungs.
+    N("svgl", { search: svglSearch }),
+    N("simple-icons", { search: simpleIconsSearch }),
+    N("github.avatar", { search: githubAvatarSearch }),
+    N("favicon.ddg", { search: faviconSearch }),
+  ],
+  voice: [
+    // HeyGen TTS first when credentialed so CLI/OAuth users consume the free
+    // web-plan allowance (10 min/month) before any paid path. --local-only skips
+    // it and keeps Kokoro as the private/offline fallback.
+    // Deliberately kept `paid` (X4 confirm-before-call) even though the first
+    // 10 min/month are free: the client can't know the remaining allowance, so
+    // confirming is safer than risking a silent charge once it's spent. (A
+    // tri-state "quota-first, paid after" would need backend quota state.)
+    P("heygen.tts", { generate: heygenTtsGenerate }),
+    A("kokoro.local", { generate: localTtsGenerate }),
+  ],
+  video: [
+    // HeyGen avatar video first when credentialed; --local-only skips it and
+    // keeps LTX as the local fallback.
+    P("heygen.video", { generate: heygenVideoGenerate }),
+    A("ltx.local", { generate: ltxVideoGenerate }),
+  ],
+  brand: [
+    // Local design spec, not heygen — reads frame.md / design.md tokens.
+    A("design_spec", { search: brandProvider.search }),
+  ],
+  grade: [
+    // Local deterministic cascade handled by resolve.mjs so grade records can
+    // carry an inline block as well as an optional frozen .cube file.
+    A("color_grade.local", { search: async () => null, generate: async () => null }),
+  ],
+  lut: [
+    // Lower-level local LUT generation/freezing path handled by resolve.mjs.
+    A("cube_lut.local", { search: async () => null, generate: async () => null }),
+  ],
+};
+
+function listFor(type) {
+  const list = REGISTRY[type];
+  if (!list) throw new Error(`unknown media type: ${type}`);
+  return list;
+}
+
+/** Ordered providers for a type. */
+export function getProviders(type) {
+  return listFor(type);
+}
+
+/** All declared media types. */
+export function listTypes() {
+  return Object.keys(REGISTRY);
+}
+
+/** Provider names available for a type, in cascade order (for --provider validation). */
+export function providerNamesFor(type) {
+  return listFor(type).map((p) => p.name);
+}
+
+/**
+ * Does an override token (full name like "codex.image_gen" or a prefix like
+ * "codex") match any provider declared for the type? Same match rule as
+ * runProviders, so validation and dispatch never disagree.
+ */
+export function providerMatches(type, want) {
+  return providerNamesFor(type).some((n) => n === want || n.startsWith(`${want}.`));
+}
+
+/**
+ * Back-compat shim for the v1 single-provider API. Returns the first declared
+ * provider for the type (tagged with `type`); throws for an unknown type.
+ * Kept for v1 callers only — new code should use getProviders/runCapability.
+ */
+export function getProvider(type) {
+  const first = listFor(type)[0] || {};
+  return { ...first, type };
+}
+
+/**
+ * Run a capability across an explicit ordered provider list. Tries each in
+ * order, returns the first non-null result, skips providers that don't expose
+ * the capability. Pure over its input — the unit-testable core of the cascade.
+ *
+ * Offline guard: a `network` provider is skipped when `ctx.localOnly` is set —
+ * unconditionally, even under a `ctx.provider` override. --local-only is a hard
+ * safety flag: it must never make a network call. Forcing a network provider
+ * while offline yields a clean miss (the caller explains the conflict), never a
+ * silent network request.
+ * Provider override: `ctx.provider` (a full name like "codex.image_gen" or a
+ * prefix like "codex") pins resolution to matching providers only — this is how
+ * a user "make an image WITH codex" forces the upsell instead of taking the
+ * free-first default.
+ */
+export async function runProviders(providers, capability, intent, ctx) {
+  const want = ctx?.provider;
+  for (const p of providers) {
+    if (want && p.name !== want && !p.name.startsWith(`${want}.`)) continue;
+    if (p.network && ctx?.localOnly) continue; // --local-only wins, even over --provider
+    const fn = p[capability];
+    if (typeof fn !== "function") continue;
+    const res = await fn(intent, ctx);
+    if (res) return res;
+  }
+  return null;
+}
+
+/** Run a capability over the providers for a type (deterministic, heygen-first). */
+export async function runCapability(type, capability, intent, ctx) {
+  return runProviders(getProviders(type), capability, intent, ctx);
+}
diff --git a/.claude/skills-media/media-use/scripts/lib/registry.test.mjs b/.claude/skills-media/media-use/scripts/lib/registry.test.mjs
new file mode 100644
index 000000000..771a78e85
--- /dev/null
+++ b/.claude/skills-media/media-use/scripts/lib/registry.test.mjs
@@ -0,0 +1,205 @@
+import { strict as assert } from "node:assert";
+import { test } from "node:test";
+import {
+  getProviders,
+  getProvider,
+  listTypes,
+  providerMatches,
+  providerNamesFor,
+  runProviders,
+  runCapability,
+} from "./registry.mjs";
+
+// --- registry shape -------------------------------------------------------
+
+test("listTypes exposes the v2 media types", () => {
+  const types = listTypes();
+  for (const t of [
+    "bgm",
+    "sfx",
+    "image",
+    "icon",
+    "logo",
+    "voice",
+    "video",
+    "brand",
+    "grade",
+    "lut",
+  ]) {
+    assert.ok(types.includes(t), `missing type: ${t}`);
+  }
+});
+
+test("heygen provider is first for every type it serves", () => {
+  for (const t of ["bgm", "sfx", "image", "icon"]) {
+    const first = getProviders(t)[0];
+    assert.ok(first, `no enabled provider for ${t}`);
+    assert.match(first.name, /^heygen/, `${t} first provider is ${first.name}`);
+  }
+});
+
+test("sanctioned providers only: heygen, local mflux/kokoro/ltx, codex, design spec, logo tiers", () => {
+  const allowed =
+    /^heygen|^bundled\.sfx$|^mflux\.local$|^kokoro\.local$|^ltx\.local$|^codex\.image_gen$|^design_spec$|^svgl$|^simple-icons$|^github\.avatar$|^favicon\.ddg$|^color_grade\.local$|^cube_lut\.local$/;
+  for (const t of listTypes()) {
+    for (const p of getProviders(t)) {
+      assert.ok(allowed.test(p.name), `${t} lists unsanctioned provider: ${p.name}`);
+    }
+  }
+});
+
+test("image cascade: heygen catalog, then local mflux, then the codex upsell", () => {
+  const ps = getProviders("image");
+  assert.match(ps[0].name, /^heygen/, "heygen catalog first");
+  const names = ps.map((p) => p.name);
+  const mflux = ps.find((p) => p.name === "mflux.local");
+  const codex = ps.find((p) => p.name === "codex.image_gen");
+  assert.ok(mflux && typeof mflux.generate === "function", "local mflux registered");
+  assert.ok(codex && typeof codex.generate === "function", "codex upsell registered");
+  assert.ok(names.indexOf("mflux.local") < names.indexOf("codex.image_gen"), "local before codex");
+  assert.ok(!mflux.network, "local mflux is kept under --local-only");
+  assert.ok(codex.network, "codex is network (skipped under --local-only)");
+});
+
+test("voice cascade: HeyGen TTS first, Kokoro remains the local fallback", () => {
+  const ps = getProviders("voice");
+  assert.equal(ps[0].name, "heygen.tts", "HeyGen TTS is first when credentials exist");
+  assert.ok(ps[0].network, "HeyGen TTS is network (skipped under --local-only)");
+  assert.ok(ps[0].paid, "HeyGen TTS may bill after the OAuth free allowance");
+  assert.equal(ps[1].name, "kokoro.local", "local Kokoro is the offline fallback");
+  assert.ok(!ps[1].network, "local Kokoro kept under --local-only");
+  assert.ok(!ps[1].paid, "local Kokoro is free");
+});
+
+test("video cascade: HeyGen first, LTX local fallback, generate-only", async () => {
+  assert.deepEqual(providerNamesFor("video"), ["heygen.video", "ltx.local"]);
+  assert.equal(providerMatches("video", "ltx.local"), true);
+
+  const ps = getProviders("video");
+  assert.ok(ps[0].network, "HeyGen video is network (skipped under --local-only)");
+  assert.ok(ps[0].paid, "HeyGen video may bill after the OAuth free allowance");
+  assert.ok(!ps[1].network, "local LTX is kept under --local-only");
+  assert.equal(await runCapability("video", "search", "x", {}), null);
+});
+
+test("sfx cascade: HeyGen catalog first, bundled library remains the local fallback", () => {
+  const ps = getProviders("sfx");
+  assert.equal(ps[0].name, "heygen.audio.sounds");
+  assert.ok(ps[0].network, "HeyGen SFX catalog is network-only");
+  assert.equal(ps[1].name, "bundled.sfx");
+  assert.equal(typeof ps[1].search, "function");
+  assert.ok(!ps[1].network, "bundled SFX remain available offline");
+});
+
+test("ctx.provider forces one generator (e.g. 'make an image WITH codex')", async () => {
+  const providers = [
+    { name: "heygen.asset.search", network: true, search: async () => null },
+    { name: "mflux.local", generate: async () => ({ hit: "local" }) },
+    { name: "codex.image_gen", network: true, generate: async () => ({ hit: "codex" }) },
+  ];
+  // no override: local wins (first generate to return non-null)
+  assert.deepEqual(await runProviders(providers, "generate", "x", {}), { hit: "local" });
+  // override to codex: skip local, use codex even though local would have worked
+  assert.deepEqual(await runProviders(providers, "generate", "x", { provider: "codex" }), {
+    hit: "codex",
+  });
+  // override matches the full name too
+  assert.deepEqual(
+    await runProviders(providers, "generate", "x", { provider: "codex.image_gen" }),
+    { hit: "codex" },
+  );
+  // --local-only wins even over a forced network provider: no network call,
+  // clean miss (the caller surfaces the conflict). A forced LOCAL provider under
+  // --local-only still runs.
+  assert.equal(
+    await runProviders(providers, "generate", "x", { provider: "codex", localOnly: true }),
+    null,
+  );
+  assert.deepEqual(
+    await runProviders(providers, "generate", "x", { provider: "mflux", localOnly: true }),
+    { hit: "local" },
+  );
+});
+
+test("getProvider returns the first provider with its type, throws for unknown", () => {
+  const p = getProvider("bgm");
+  assert.equal(p.type, "bgm");
+  assert.equal(typeof p.search, "function");
+  assert.throws(() => getProvider("unknown_type"), /unknown media type/);
+});
+
+test("getProviders throws for unknown type", () => {
+  assert.throws(() => getProviders("nope"), /unknown media type/);
+});
+
+// --- deterministic capability execution (runProviders core) ---------------
+
+test("runProviders calls providers in order and returns the first non-null", async () => {
+  const calls = [];
+  const providers = [
+    {
+      name: "a",
+      enabled: true,
+      search: async () => {
+        calls.push("a");
+        return null;
+      },
+    },
+    {
+      name: "b",
+      enabled: true,
+      search: async () => {
+        calls.push("b");
+        return { hit: "b" };
+      },
+    },
+    {
+      name: "c",
+      enabled: true,
+      search: async () => {
+        calls.push("c");
+        return { hit: "c" };
+      },
+    },
+  ];
+  const res = await runProviders(providers, "search", "x", {});
+  assert.deepEqual(res, { hit: "b" });
+  assert.deepEqual(calls, ["a", "b"], "must stop at first non-null, never call c");
+});
+
+test("runProviders skips providers missing the requested capability", async () => {
+  const providers = [
+    { name: "a", enabled: true /* no search */ },
+    { name: "b", enabled: true, search: async () => ({ hit: "b" }) },
+  ];
+  const res = await runProviders(providers, "search", "x", {});
+  assert.deepEqual(res, { hit: "b" });
+});
+
+test("runProviders returns null when no provider yields a result", async () => {
+  const providers = [{ name: "a", enabled: true, search: async () => null }];
+  assert.equal(await runProviders(providers, "search", "x", {}), null);
+});
+
+test("runCapability('bgm','process') is null — process slot is graceful when unfilled", async () => {
+  assert.equal(await runCapability("bgm", "process", "x", {}), null);
+});
+
+test("--local-only skips every network provider (even free remote ones)", async () => {
+  let remoteRan = false;
+  const providers = [
+    {
+      name: "heygen",
+      network: true,
+      search: async () => {
+        remoteRan = true;
+        return { hit: "net" };
+      },
+    },
+    { name: "local", search: async () => ({ hit: "local" }) },
+  ];
+  assert.deepEqual(await runProviders(providers, "search", "x", { localOnly: true }), {
+    hit: "local",
+  });
+  assert.equal(remoteRan, false, "the remote provider must not be called offline");
+});
diff --git a/.claude/skills-media/media-use/scripts/lib/search.mjs b/.claude/skills-media/media-use/scripts/lib/search.mjs
new file mode 100644
index 000000000..b545b4852
--- /dev/null
+++ b/.claude/skills-media/media-use/scripts/lib/search.mjs
@@ -0,0 +1,24 @@
+// Paginated text search over a manifest (project or global) by id / description
+// / entity. Plain substring match — no vector DB (B4): the agent's own file
+// search covers semantics; this just keeps result pages small enough to not
+// blow the context window.
+
+const PAGE = 10;
+
+export function searchRecords(records, query, { page = 1, pageSize = PAGE } = {}) {
+  const q = String(query || "")
+    .trim()
+    .toLowerCase();
+  const matched = q
+    ? records.filter((r) =>
+        [r.id, r.description, r.entity, r.type].some(
+          (f) => f && String(f).toLowerCase().includes(q),
+        ),
+      )
+    : records.slice();
+  const total = matched.length;
+  const pages = Math.max(1, Math.ceil(total / pageSize));
+  const p = Math.min(Math.max(1, page), pages);
+  const start = (p - 1) * pageSize;
+  return { results: matched.slice(start, start + pageSize), total, page: p, pages, pageSize };
+}
diff --git a/.claude/skills-media/media-use/scripts/lib/search.test.mjs b/.claude/skills-media/media-use/scripts/lib/search.test.mjs
new file mode 100644
index 000000000..8d68a6882
--- /dev/null
+++ b/.claude/skills-media/media-use/scripts/lib/search.test.mjs
@@ -0,0 +1,32 @@
+import { strict as assert } from "node:assert";
+import { test } from "node:test";
+import { searchRecords } from "./search.mjs";
+
+const recs = Array.from({ length: 23 }, (_, i) => ({
+  id: `bgm_${i}`,
+  type: i % 2 ? "bgm" : "sfx",
+  description: i === 5 ? "energetic tech whoosh" : `track ${i}`,
+}));
+
+test("matches id / description / type, case-insensitively", () => {
+  assert.equal(searchRecords(recs, "ENERGETIC").results.length, 1);
+  assert.equal(searchRecords(recs, "energetic").results[0].id, "bgm_5");
+  assert.ok(searchRecords(recs, "sfx").total > 0);
+});
+
+test("caps page size and reports pagination", () => {
+  const r = searchRecords(recs, "", { pageSize: 10 });
+  assert.equal(r.results.length, 10, "never returns more than a page");
+  assert.equal(r.total, 23);
+  assert.equal(r.pages, 3);
+  assert.equal(r.page, 1);
+});
+
+test("page navigation returns the right slice, clamps out-of-range", () => {
+  assert.equal(searchRecords(recs, "", { page: 3, pageSize: 10 }).results.length, 3);
+  assert.equal(searchRecords(recs, "", { page: 99, pageSize: 10 }).page, 3, "clamped to last page");
+});
+
+test("empty query returns everything (paginated)", () => {
+  assert.equal(searchRecords(recs, "").total, 23);
+});
diff --git a/.claude/skills-media/media-use/scripts/lib/sfx-provider.mjs b/.claude/skills-media/media-use/scripts/lib/sfx-provider.mjs
new file mode 100644
index 000000000..24c9e5398
--- /dev/null
+++ b/.claude/skills-media/media-use/scripts/lib/sfx-provider.mjs
@@ -0,0 +1,23 @@
+import { heygenSearch } from "./heygen-search.mjs";
+
+export const sfxProvider = {
+  async search(intent) {
+    const results = heygenSearch("audio sounds list", intent, {
+      type: "sound_effects",
+      minScore: 0.4,
+    });
+    if (!results) return null;
+    const best = results[0];
+    return {
+      url: best.audio_url,
+      source: "search",
+      // ext derived from audio_url by resolve.mjs — catalog SFX are .mp3 or .wav
+      metadata: {
+        description: best.description || best.name || intent,
+        duration: best.duration || null,
+        provider: "heygen.audio.sounds",
+        provenance: { track_id: best.id, score: best.score, query: intent },
+      },
+    };
+  },
+};
diff --git a/.claude/skills-media/media-use/scripts/lib/specs.mjs b/.claude/skills-media/media-use/scripts/lib/specs.mjs
new file mode 100644
index 000000000..831e4eb17
--- /dev/null
+++ b/.claude/skills-media/media-use/scripts/lib/specs.mjs
@@ -0,0 +1,81 @@
+// Machine-capability probe for the spec-gated local-model fallback.
+//
+// Local models are USER-INSTALLED and local-use-only — media-use recommends,
+// spec-checks, and assists install, but never bundles or runs them as a service.
+// This probe answers "what tier can this machine actually run?" so selection can
+// offer a medium/large local model, or fall back to recommending the CLI path.
+//
+// `osMod` and `exec` are injectable for tests. `exec(cmd)` returns the command's
+// stdout as a string, or throws / returns null on failure.
+
+import os from "node:os";
+import { execSync } from "node:child_process";
+
+function defaultExec(cmd) {
+  return execSync(cmd, { encoding: "utf8", stdio: ["ignore", "pipe", "ignore"], timeout: 4000 });
+}
+
+// Available (not just total) RAM — the real budget for "will this model fit
+// alongside the OS + open apps". On unified-memory Macs the model shares system
+// RAM, so a big model on a busy machine OOMs/thrashes even if total RAM looks
+// ample. macOS: vm_stat free + inactive + speculative + purgeable pages (all
+// reclaimable). Linux: /proc/meminfo MemAvailable. Fallback: total (optimistic
+// but stable when the probe is unavailable, e.g. in tests).
+function availableRamMB(platform, exec, totalMB) {
+  try {
+    if (platform === "darwin") {
+      const out = String(exec("vm_stat"));
+      const pageSize = parseInt((out.match(/page size of (\d+)/) || [])[1] || "16384", 10);
+      const pages = (name) => {
+        const m = out.match(new RegExp(`${name}:\\s+(\\d+)`));
+        return m ? parseInt(m[1], 10) : 0;
+      };
+      const reclaimable =
+        pages("Pages free") +
+        pages("Pages inactive") +
+        pages("Pages speculative") +
+        pages("Pages purgeable");
+      const mb = Math.round((reclaimable * pageSize) / (1024 * 1024));
+      if (mb > 0) return mb;
+    } else if (platform === "linux") {
+      const out = String(exec("cat /proc/meminfo"));
+      const m = out.match(/MemAvailable:\s+(\d+)\s+kB/);
+      if (m) return Math.round(parseInt(m[1], 10) / 1024);
+    }
+  } catch {
+    // probe unavailable — fall through to the total-RAM estimate
+  }
+  return totalMB;
+}
+
+function detectGpu(platform, arch, ramMB, exec) {
+  // Apple Silicon: Metal GPU with unified memory — VRAM tracks system RAM.
+  if (platform === "darwin" && arch === "arm64") {
+    return { present: true, kind: "apple", vramMB: ramMB };
+  }
+  // NVIDIA: query total VRAM. Any failure (no driver, no GPU) -> no GPU.
+  try {
+    const out = exec("nvidia-smi --query-gpu=memory.total --format=csv,noheader,nounits");
+    const mb = parseInt(String(out).trim().split(/\r?\n/)[0], 10);
+    if (Number.isFinite(mb) && mb > 0) return { present: true, kind: "nvidia", vramMB: mb };
+  } catch {
+    // fall through — no usable GPU
+  }
+  return { present: false, kind: null, vramMB: 0 };
+}
+
+export function probeSpecs({ osMod = os, exec = defaultExec } = {}) {
+  const platform = osMod.platform();
+  const arch = osMod.arch();
+  const cpuCores = osMod.cpus().length;
+  const ramMB = Math.round(osMod.totalmem() / (1024 * 1024));
+  return {
+    platform,
+    arch,
+    cpuCores,
+    ramMB,
+    availableRamMB: availableRamMB(platform, exec, ramMB),
+    appleSilicon: platform === "darwin" && arch === "arm64",
+    gpu: detectGpu(platform, arch, ramMB, exec),
+  };
+}
diff --git a/.claude/skills-media/media-use/scripts/lib/specs.test.mjs b/.claude/skills-media/media-use/scripts/lib/specs.test.mjs
new file mode 100644
index 000000000..1c9172b31
--- /dev/null
+++ b/.claude/skills-media/media-use/scripts/lib/specs.test.mjs
@@ -0,0 +1,75 @@
+import { strict as assert } from "node:assert";
+import { test } from "node:test";
+import { probeSpecs } from "./specs.mjs";
+
+// Fake os module + exec so the probe is deterministic across CI machines.
+const fakeOs = (over = {}) => ({
+  platform: () => over.platform ?? "linux",
+  arch: () => over.arch ?? "x64",
+  cpus: () => Array.from({ length: over.cores ?? 8 }),
+  totalmem: () => (over.ramMB ?? 16384) * 1024 * 1024,
+});
+
+test("probeSpecs reports structured caps", () => {
+  const s = probeSpecs({ osMod: fakeOs({ cores: 12, ramMB: 32768 }), exec: () => null });
+  assert.equal(s.cpuCores, 12);
+  assert.equal(s.ramMB, 32768);
+  assert.equal(s.platform, "linux");
+  assert.equal(s.gpu.present, false);
+  // probe unavailable (exec returns null) -> availableRamMB falls back to total
+  assert.equal(s.availableRamMB, 32768);
+});
+
+test("availableRamMB is read from /proc/meminfo on Linux", () => {
+  const exec = (cmd) =>
+    cmd.includes("meminfo") ? "MemTotal: 33554432 kB\nMemAvailable: 8388608 kB\n" : null;
+  const s = probeSpecs({ osMod: fakeOs({ platform: "linux", ramMB: 32768 }), exec });
+  assert.equal(s.availableRamMB, 8192, "8388608 kB -> 8192 MB");
+});
+
+test("availableRamMB is summed from reclaimable vm_stat pages on macOS", () => {
+  const vmStat =
+    "Mach Virtual Memory Statistics: (page size of 16384 bytes)\n" +
+    "Pages free:                    100000.\n" +
+    "Pages inactive:                200000.\n" +
+    "Pages speculative:              50000.\n" +
+    "Pages purgeable:                 10000.\n";
+  const exec = (cmd) => (cmd.includes("vm_stat") ? vmStat : null);
+  const s = probeSpecs({
+    osMod: fakeOs({ platform: "darwin", arch: "arm64", ramMB: 24576 }),
+    exec,
+  });
+  // (100000+200000+50000+10000) pages * 16384 B / 1MiB = 5625 MB
+  assert.equal(s.availableRamMB, 5625);
+});
+
+test("Apple Silicon is detected as a unified-memory GPU", () => {
+  const s = probeSpecs({
+    osMod: fakeOs({ platform: "darwin", arch: "arm64", ramMB: 24576 }),
+    exec: () => null,
+  });
+  assert.equal(s.appleSilicon, true);
+  assert.equal(s.gpu.present, true);
+  assert.equal(s.gpu.kind, "apple");
+  // unified memory: VRAM tracks system RAM
+  assert.equal(s.gpu.vramMB, 24576);
+});
+
+test("NVIDIA GPU is detected via nvidia-smi VRAM query", () => {
+  const exec = (cmd) => (cmd.includes("nvidia-smi") ? "24564" : null);
+  const s = probeSpecs({ osMod: fakeOs({ platform: "linux" }), exec });
+  assert.equal(s.gpu.present, true);
+  assert.equal(s.gpu.kind, "nvidia");
+  assert.equal(s.gpu.vramMB, 24564);
+});
+
+test("no GPU when nvidia-smi is absent / fails", () => {
+  const s = probeSpecs({
+    osMod: fakeOs({ platform: "linux" }),
+    exec: () => {
+      throw new Error("command not found");
+    },
+  });
+  assert.equal(s.gpu.present, false);
+  assert.equal(s.gpu.vramMB, 0);
+});
diff --git a/.claude/skills-media/media-use/scripts/lib/stats.mjs b/.claude/skills-media/media-use/scripts/lib/stats.mjs
new file mode 100644
index 000000000..39611971c
--- /dev/null
+++ b/.claude/skills-media/media-use/scripts/lib/stats.mjs
@@ -0,0 +1,117 @@
+import { statSync } from "node:fs";
+import { readGlobalManifest } from "./cache.mjs";
+import { readManifest } from "./manifest.mjs";
+import { readMisses } from "./misses.mjs";
+
+const TOP_MISSES = 5;
+
+function emptyReport() {
+  return {
+    total_resolves: 0,
+    by_type: {},
+    by_source: {},
+    by_provider: {},
+    by_via: {},
+    misses: 0,
+    hit_rate: null,
+    top_missed_intents: {},
+    global_cache_assets: 0,
+    global_cache_disk_bytes: 0,
+    cross_project_reuse: 0,
+  };
+}
+
+function increment(map, key) {
+  if (!key) return;
+  map[key] = (map[key] || 0) + 1;
+}
+
+function timestampOf(record) {
+  return record?.ts || record?.timestamp || record?.created_at || record?.createdAt || null;
+}
+
+function inWindow(record, cutoff) {
+  if (!cutoff) return true;
+  const ts = timestampOf(record);
+  // Older manifest records may not carry a timestamp; keep them in the report
+  // because --days can only window records/misses that carry a ts/timestamp.
+  if (!ts) return true;
+  const time = Date.parse(ts);
+  return Number.isNaN(time) ? true : time >= cutoff;
+}
+
+function sourceOf(record) {
+  return record?._source || record?.source || record?.provenance?.source || "unknown";
+}
+
+function normalizeIntent(intent) {
+  return String(intent ?? "")
+    .trim()
+    .toLowerCase()
+    .replace(/\s+/g, " ");
+}
+
+function topMissedIntents(misses) {
+  const grouped = {};
+  for (const miss of misses) {
+    const type = miss?.type || "unknown";
+    const intent = normalizeIntent(miss?.intent);
+    if (!intent) continue;
+    grouped[type] ||= {};
+    grouped[type][intent] = (grouped[type][intent] || 0) + 1;
+  }
+  const out = {};
+  for (const [type, intents] of Object.entries(grouped)) {
+    out[type] = Object.entries(intents)
+      .map(([intent, count]) => ({ intent, count }))
+      .sort((a, b) => b.count - a.count || a.intent.localeCompare(b.intent))
+      .slice(0, TOP_MISSES);
+  }
+  return out;
+}
+
+function diskBytes(records) {
+  let total = 0;
+  for (const record of records) {
+    const p = record?.cached_path || record?.path;
+    if (!p) continue;
+    try {
+      total += statSync(p).size;
+    } catch {
+      // cache entries can outlive files; stats skips missing files
+    }
+  }
+  return total;
+}
+
+export function buildStats({ projectDir, days, now = Date.now() } = {}) {
+  // Only a positive finite --days windows the report; null / NaN / <= 0 mean
+  // "all time" rather than silently excluding everything (a negative cutoff
+  // would land in the future and drop every record). The reads below are each
+  // best-effort (they return [] / skip on IO errors), so there is no top-level
+  // catch masking a real logic bug as an all-zero "no usage" report.
+  const n = Number(days);
+  const cutoff = Number.isFinite(n) && n > 0 ? Number(now) - n * 24 * 60 * 60 * 1000 : null;
+  const records = (projectDir ? readManifest(projectDir) : []).filter((r) => inWindow(r, cutoff));
+  const misses = readMisses().filter((miss) => inWindow(miss, cutoff));
+  const globalRecords = readGlobalManifest();
+  const report = emptyReport();
+
+  report.total_resolves = records.length;
+  report.misses = misses.length;
+  for (const record of records) {
+    increment(report.by_type, record?.type || "unknown");
+    increment(report.by_source, sourceOf(record));
+    increment(report.by_provider, record?.provenance?.provider);
+    increment(report.by_via, record?.provenance?.via);
+  }
+
+  const attempts = report.total_resolves + report.misses;
+  report.hit_rate = attempts === 0 ? null : report.total_resolves / attempts;
+  report.top_missed_intents = topMissedIntents(misses);
+  report.global_cache_assets = globalRecords.length;
+  report.global_cache_disk_bytes = diskBytes(globalRecords);
+  report.cross_project_reuse = globalRecords.filter((r) => r?.provenance?.reused_by).length;
+
+  return report;
+}
diff --git a/.claude/skills-media/media-use/scripts/lib/stats.test.mjs b/.claude/skills-media/media-use/scripts/lib/stats.test.mjs
new file mode 100644
index 000000000..ff0b6b466
--- /dev/null
+++ b/.claude/skills-media/media-use/scripts/lib/stats.test.mjs
@@ -0,0 +1,165 @@
+import { strict as assert } from "node:assert";
+import { test } from "node:test";
+import { mkdirSync, mkdtempSync, rmSync, writeFileSync } from "node:fs";
+import { tmpdir } from "node:os";
+import { join } from "node:path";
+import { buildStats } from "./stats.mjs";
+
+function sandbox() {
+  const root = mkdtempSync(join(tmpdir(), "mu-stats-"));
+  const home = join(root, "home");
+  const projectDir = join(root, "project");
+  mkdirSync(home, { recursive: true });
+  mkdirSync(projectDir, { recursive: true });
+  process.env.HOME = home;
+  return { root, home, projectDir };
+}
+
+function restoreEnv(saved) {
+  for (const k of Object.keys(process.env)) if (!(k in saved)) delete process.env[k];
+  Object.assign(process.env, saved);
+}
+
+function seedManifest(dir, records) {
+  mkdirSync(join(dir, ".media"), { recursive: true });
+  writeFileSync(
+    join(dir, ".media/manifest.jsonl"),
+    records.map((record) => JSON.stringify(record)).join("\n") + "\n",
+  );
+}
+
+function isoDaysAgo(days) {
+  return new Date(Date.now() - days * 24 * 60 * 60 * 1000).toISOString();
+}
+
+test("buildStats aggregates resolves, misses, providers, sources, and reuse", () => {
+  const savedEnv = { ...process.env };
+  const { root, home, projectDir } = sandbox();
+  try {
+    seedManifest(projectDir, [
+      {
+        id: "bgm_001",
+        type: "bgm",
+        source: "search",
+        ts: isoDaysAgo(0),
+        provenance: { provider: "heygen.audio.sounds", prompt: "upbeat", via: "url" },
+      },
+      {
+        id: "image_001",
+        type: "image",
+        _source: "reused-explicit",
+        timestamp: isoDaysAgo(0),
+        provenance: { provider: "local", reused_by: "agent" },
+      },
+      {
+        id: "bgm_002",
+        type: "bgm",
+        source: "generated",
+        provenance: { provider: "codex" },
+      },
+    ]);
+    const cachedFile = join(home, ".media/mu-v1-cache/asset.wav");
+    mkdirSync(join(cachedFile, ".."), { recursive: true });
+    writeFileSync(cachedFile, "12345");
+    seedManifest(home, [
+      {
+        id: "bgm_009",
+        type: "bgm",
+        reusable: true,
+        cached_path: cachedFile,
+        provenance: { provider: "heygen.audio.sounds", reused_by: "agent" },
+      },
+    ]);
+    writeFileSync(
+      join(home, ".media/misses.jsonl"),
+      JSON.stringify({
+        ts: isoDaysAgo(0),
+        type: "bgm",
+        intent: "dark cinematic riser",
+      }) + "\n",
+      { flag: "a" },
+    );
+
+    const stats = buildStats({ projectDir });
+    assert.equal(stats.total_resolves, 3);
+    assert.deepEqual(stats.by_type, { bgm: 2, image: 1 });
+    assert.deepEqual(stats.by_source, { search: 1, "reused-explicit": 1, generated: 1 });
+    assert.equal(stats.by_provider["heygen.audio.sounds"], 1);
+    assert.equal(stats.by_via.url, 1);
+    assert.equal(stats.misses, 1);
+    assert.equal(stats.hit_rate, 0.75);
+    assert.deepEqual(stats.top_missed_intents.bgm[0], {
+      intent: "dark cinematic riser",
+      count: 1,
+    });
+    assert.equal(stats.global_cache_assets, 1);
+    assert.equal(stats.global_cache_disk_bytes, 5);
+    assert.equal(stats.cross_project_reuse, 1);
+  } finally {
+    restoreEnv(savedEnv);
+    rmSync(root, { recursive: true, force: true });
+  }
+});
+
+test("buildStats returns a zeroed report when nothing exists", () => {
+  const savedEnv = { ...process.env };
+  const { root, projectDir } = sandbox();
+  try {
+    const stats = buildStats({ projectDir });
+    assert.equal(stats.total_resolves, 0);
+    assert.deepEqual(stats.by_type, {});
+    assert.deepEqual(stats.by_source, {});
+    assert.deepEqual(stats.by_provider, {});
+    assert.deepEqual(stats.by_via, {});
+    assert.equal(stats.misses, 0);
+    assert.equal(stats.hit_rate, null);
+    assert.deepEqual(stats.top_missed_intents, {});
+    assert.equal(stats.global_cache_assets, 0);
+    assert.equal(stats.global_cache_disk_bytes, 0);
+    assert.equal(stats.cross_project_reuse, 0);
+  } finally {
+    restoreEnv(savedEnv);
+    rmSync(root, { recursive: true, force: true });
+  }
+});
+
+test("buildStats returns JSON-safe output", () => {
+  const savedEnv = { ...process.env };
+  const { root, projectDir } = sandbox();
+  try {
+    const stats = buildStats({ projectDir });
+    assert.deepEqual(JSON.parse(JSON.stringify(stats)), stats);
+  } finally {
+    restoreEnv(savedEnv);
+    rmSync(root, { recursive: true, force: true });
+  }
+});
+
+test("buildStats applies days window to timestamped records and misses", () => {
+  const savedEnv = { ...process.env };
+  const { root, home, projectDir } = sandbox();
+  try {
+    seedManifest(projectDir, [
+      { id: "bgm_old", type: "bgm", ts: isoDaysAgo(100), provenance: { provider: "old" } },
+      { id: "bgm_new", type: "bgm", ts: isoDaysAgo(1), provenance: { provider: "new" } },
+      { id: "image_untimed", type: "image", provenance: { provider: "none" } },
+    ]);
+    mkdirSync(join(home, ".media"), { recursive: true });
+    writeFileSync(
+      join(home, ".media/misses.jsonl"),
+      [
+        JSON.stringify({ ts: isoDaysAgo(100), type: "bgm", intent: "old miss" }),
+        JSON.stringify({ ts: isoDaysAgo(1), type: "bgm", intent: "new miss" }),
+      ].join("\n"),
+    );
+
+    const stats = buildStats({ projectDir, days: 7 });
+    assert.equal(stats.total_resolves, 2);
+    assert.deepEqual(stats.by_type, { bgm: 1, image: 1 });
+    assert.equal(stats.misses, 1);
+    assert.equal(stats.top_missed_intents.bgm[0].intent, "new miss");
+  } finally {
+    restoreEnv(savedEnv);
+    rmSync(root, { recursive: true, force: true });
+  }
+});
diff --git a/.claude/skills-media/media-use/scripts/lib/telemetry.mjs b/.claude/skills-media/media-use/scripts/lib/telemetry.mjs
new file mode 100644
index 000000000..43603d762
--- /dev/null
+++ b/.claude/skills-media/media-use/scripts/lib/telemetry.mjs
@@ -0,0 +1,222 @@
+// Opt-out usage tracking for media-use, sharing the hyperframes CLI/studio
+// identity (packages/cli/src/telemetry): the same install id from
+// ~/.hyperframes/config.json, plus a $identify to the HeyGen account on sign-in,
+// so a person is one PostHog profile across surfaces — not a fresh id per tool.
+// Not fully anonymous by design (it must dedupe): pseudonymous before sign-in,
+// account-linked after. Event PROPERTIES stay coarse — media TYPE, resolution
+// SOURCE, winning PROVIDER — never the intent text, file names, or paths.
+//
+// Same public PostHog project key as the CLI (a write-only ingestion key, safe
+// to ship), same opt-outs (DO_NOT_TRACK / HYPERFRAMES_NO_TELEMETRY / CI / dev),
+// and $ip:null so no IP is recorded. Fire-and-forget: telemetry never blocks a
+// resolve and never throws into it.
+
+import { randomUUID } from "node:crypto";
+import { existsSync, mkdirSync, readFileSync, writeFileSync } from "node:fs";
+import { homedir } from "node:os";
+import { join } from "node:path";
+
+const POSTHOG_API_KEY = "phc_zjjbX0PnWxERXrMHhkEJWj9A9BhGVLRReICgsfTMmpx";
+const POSTHOG_HOST = "https://us.i.posthog.com";
+const TIMEOUT_MS = 1500;
+let identifiedAccount = false;
+let warnedNonDefaultHost = false;
+
+// Same CI/test signals the test suite itself sets (resolve.test.mjs's U7 test
+// sets NODE_ENV=test and clears CI to prove the interception seam works) —
+// reused here, not a new heuristic, so that deliberate test usage never
+// triggers the warning below.
+function isTestOrCiContext() {
+  return (
+    process.env.CI === "true" ||
+    process.env.CI === "1" ||
+    process.env.NODE_ENV === "test" ||
+    process.env.NODE_ENV === "development"
+  );
+}
+
+// Test-only interception seam: a real HTTP destination a test can point at,
+// so a spawned-child test (resolve.test.mjs) can prove track() never reaches
+// production rather than trusting DO_NOT_TRACK alone (a future call site or
+// test could forget to set that env var). Falls back to the real production
+// host whenever unset — production behavior is unchanged.
+//
+// Safety net: if this ever leaks into a real user's shell, track() would
+// silently redirect to a likely-dead host and postBatch()'s catch{} would
+// swallow the failure with zero signal. Surface one stderr warning outside
+// test/CI contexts so a real user gets some indication instead of silence.
+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). */
+export function optedOut() {
+  return (
+    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"
+  );
+}
+
+// CLI + studio share one install identity in ~/.hyperframes/config.json
+// (packages/cli/src/telemetry/config.ts — same path, same `anonymousId` /
+// `telemetryNoticeShown` fields). Read and write that same file so media-use is
+// the same PostHog person and shows the notice once per person, not per tool.
+// Computed per call (not a module const) so it honors HOME at runtime — tests
+// sandbox HOME, and os.homedir() re-reads it each call.
+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 {};
+}
+
+function writeSharedConfig(config) {
+  const dir = join(homedir(), ".hyperframes");
+  if (!existsSync(dir)) mkdirSync(dir, { recursive: true });
+  writeFileSync(join(dir, "config.json"), JSON.stringify(config, null, 2) + "\n");
+}
+
+// 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(homedir(), ".media", "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();
+    writeSharedConfig({ ...config, 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"),
+    );
+    writeSharedConfig({ ...config, 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/media-use/scripts/lib/telemetry.test.mjs b/.claude/skills-media/media-use/scripts/lib/telemetry.test.mjs
new file mode 100644
index 000000000..1a66d60f7
--- /dev/null
+++ b/.claude/skills-media/media-use/scripts/lib/telemetry.test.mjs
@@ -0,0 +1,373 @@
+import { strict as assert } from "node:assert";
+import { test } from "node:test";
+import {
+  existsSync,
+  mkdirSync,
+  mkdtempSync,
+  readFileSync,
+  rmSync,
+  writeFileSync,
+  chmodSync,
+} from "node:fs";
+import { tmpdir } from "node:os";
+import { join } from "node:path";
+import { __anonymousIdForTest, __resetTelemetryForTest, optedOut, track } from "./telemetry.mjs";
+
+function sandbox() {
+  const root = mkdtempSync(join(tmpdir(), "mu-telemetry-"));
+  const home = join(root, "home");
+  mkdirSync(home, { recursive: true });
+  process.env.HOME = home;
+  return { root, home };
+}
+
+function restoreEnv(saved) {
+  for (const k of Object.keys(process.env)) if (!(k in saved)) delete process.env[k];
+  Object.assign(process.env, saved);
+}
+
+function withoutTelemetryOptOut() {
+  for (const k of ["DO_NOT_TRACK", "HYPERFRAMES_NO_TELEMETRY", "CI", "NODE_ENV"])
+    delete process.env[k];
+}
+
+function parseFetchBodies(calls) {
+  return calls.flatMap((call) => JSON.parse(call.options.body).batch);
+}
+
+test("optedOut respects DO_NOT_TRACK / HYPERFRAMES_NO_TELEMETRY / CI", () => {
+  const saved = { ...process.env };
+  try {
+    for (const k of ["DO_NOT_TRACK", "HYPERFRAMES_NO_TELEMETRY", "CI", "NODE_ENV"])
+      delete process.env[k];
+    assert.equal(optedOut(), false, "default: tracking allowed");
+    process.env.DO_NOT_TRACK = "1";
+    assert.equal(optedOut(), true, "DO_NOT_TRACK opts out");
+    delete process.env.DO_NOT_TRACK;
+    process.env.HYPERFRAMES_NO_TELEMETRY = "1";
+    assert.equal(optedOut(), true, "HYPERFRAMES_NO_TELEMETRY opts out");
+    delete process.env.HYPERFRAMES_NO_TELEMETRY;
+    process.env.CI = "true";
+    assert.equal(optedOut(), true, "CI opts out");
+  } finally {
+    for (const k of Object.keys(process.env)) if (!(k in saved)) delete process.env[k];
+    Object.assign(process.env, saved);
+  }
+});
+
+test("track is a no-op (no network, resolves) when opted out", async () => {
+  const savedEnv = { ...process.env };
+  const originalFetch = globalThis.fetch;
+  const { root, home } = sandbox();
+  const calls = [];
+  globalThis.fetch = async (...args) => {
+    calls.push(args);
+    return { ok: true };
+  };
+  process.env.DO_NOT_TRACK = "1";
+  try {
+    // must resolve immediately without throwing or hitting the network
+    await track("media_use_resolve", { type: "bgm", source: "search" });
+    assert.equal(calls.length, 0);
+    assert.equal(existsSync(join(home, ".hyperframes/config.json")), false);
+    assert.equal(existsSync(join(home, ".media/telemetry-notice-shown")), false);
+  } finally {
+    globalThis.fetch = originalFetch;
+    restoreEnv(savedEnv);
+    rmSync(root, { recursive: true, force: true });
+    __resetTelemetryForTest();
+  }
+});
+
+test("anonymous id uses the shared hyperframes config", () => {
+  const savedEnv = { ...process.env };
+  const { root, home } = sandbox();
+  try {
+    withoutTelemetryOptOut();
+    mkdirSync(join(home, ".hyperframes"), { recursive: true });
+    writeFileSync(
+      join(home, ".hyperframes/config.json"),
+      JSON.stringify({ anonymousId: "shared-install-id", keep: true }),
+    );
+    mkdirSync(join(home, ".media"), { recursive: true });
+    writeFileSync(join(home, ".media/anon-id"), "old-media-id");
+
+    assert.equal(__anonymousIdForTest(), "shared-install-id");
+  } finally {
+    restoreEnv(savedEnv);
+    rmSync(root, { recursive: true, force: true });
+    __resetTelemetryForTest();
+  }
+});
+
+test("anonymous id seeds missing config once and reuses it", () => {
+  const savedEnv = { ...process.env };
+  const { root, home } = sandbox();
+  try {
+    withoutTelemetryOptOut();
+    const first = __anonymousIdForTest();
+    const configPath = join(home, ".hyperframes/config.json");
+    assert.ok(existsSync(configPath));
+    assert.match(
+      first,
+      /^[0-9a-f]{8}-[0-9a-f]{4}-[1-5][0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}$/i,
+    );
+    const second = __anonymousIdForTest();
+    assert.equal(second, first);
+    assert.equal(JSON.parse(readFileSync(configPath, "utf8")).anonymousId, first);
+  } finally {
+    restoreEnv(savedEnv);
+    rmSync(root, { recursive: true, force: true });
+    __resetTelemetryForTest();
+  }
+});
+
+test("anonymous id adopts a legacy ~/.media/anon-id on upgrade (persona continuity)", () => {
+  const savedEnv = { ...process.env };
+  const { root, home } = sandbox();
+  try {
+    withoutTelemetryOptOut();
+    mkdirSync(join(home, ".media"), { recursive: true });
+    writeFileSync(join(home, ".media/anon-id"), "legacy-media-id");
+    // no ~/.hyperframes/config.json yet — the old media-use-only id must carry over
+    assert.equal(__anonymousIdForTest(), "legacy-media-id");
+    // and it is persisted into the shared config so CLI/studio see the same id
+    assert.equal(
+      JSON.parse(readFileSync(join(home, ".hyperframes/config.json"), "utf8")).anonymousId,
+      "legacy-media-id",
+    );
+  } finally {
+    restoreEnv(savedEnv);
+    rmSync(root, { recursive: true, force: true });
+    __resetTelemetryForTest();
+  }
+});
+
+test("track identifies a signed-in HeyGen account once and still sends events", async () => {
+  const savedEnv = { ...process.env };
+  const originalFetch = globalThis.fetch;
+  const { root, home } = sandbox();
+  const calls = [];
+  globalThis.fetch = async (url, options) => {
+    calls.push({ url, options });
+    return { ok: true };
+  };
+  try {
+    withoutTelemetryOptOut();
+    mkdirSync(join(home, ".hyperframes"), { recursive: true });
+    writeFileSync(
+      join(home, ".hyperframes/config.json"),
+      JSON.stringify({ anonymousId: "anon-1" }),
+    );
+    mkdirSync(join(home, ".heygen"), { recursive: true });
+    writeFileSync(
+      join(home, ".heygen/credentials"),
+      JSON.stringify({ user: { email: "alice@example.com", username: "alice" } }),
+    );
+
+    await track("media_use_resolve", { type: "bgm", source: "search" });
+    await track("media_use_resolve", { type: "image", source: "generated" });
+
+    const batch = parseFetchBodies(calls);
+    const identify = batch.filter((item) => item.event === "$identify");
+    assert.equal(identify.length, 1);
+    assert.equal(identify[0].distinct_id, "alice@example.com");
+    assert.equal(identify[0].properties.$anon_distinct_id, "anon-1");
+    assert.equal(batch.filter((item) => item.event === "media_use_resolve").length, 2);
+  } finally {
+    globalThis.fetch = originalFetch;
+    restoreEnv(savedEnv);
+    rmSync(root, { recursive: true, force: true });
+    __resetTelemetryForTest();
+  }
+});
+
+test("track identifies with a lowercased email regardless of stored casing", async () => {
+  const savedEnv = { ...process.env };
+  const originalFetch = globalThis.fetch;
+  const { root, home } = sandbox();
+  const calls = [];
+  globalThis.fetch = async (url, options) => {
+    calls.push({ url, options });
+    return { ok: true };
+  };
+  try {
+    withoutTelemetryOptOut();
+    mkdirSync(join(home, ".hyperframes"), { recursive: true });
+    writeFileSync(
+      join(home, ".hyperframes/config.json"),
+      JSON.stringify({ anonymousId: "anon-3" }),
+    );
+    mkdirSync(join(home, ".heygen"), { recursive: true });
+    writeFileSync(
+      join(home, ".heygen/credentials"),
+      JSON.stringify({ user: { email: "Alice@Example.com", username: "alice" } }),
+    );
+
+    await track("media_use_resolve", { type: "bgm", source: "search" });
+
+    const batch = parseFetchBodies(calls);
+    const identify = batch.filter((item) => item.event === "$identify");
+    assert.equal(identify.length, 1);
+    // Lowercased so this joins with heygen-cli's own identify call regardless
+    // of the account's stored email casing -- otherwise the same person could
+    // split into two PostHog profiles by email case alone.
+    assert.equal(identify[0].distinct_id, "alice@example.com");
+  } finally {
+    globalThis.fetch = originalFetch;
+    restoreEnv(savedEnv);
+    rmSync(root, { recursive: true, force: true });
+    __resetTelemetryForTest();
+  }
+});
+
+test("track does not identify when signed out", async () => {
+  const savedEnv = { ...process.env };
+  const originalFetch = globalThis.fetch;
+  const { root, home } = sandbox();
+  const calls = [];
+  globalThis.fetch = async (url, options) => {
+    calls.push({ url, options });
+    return { ok: true };
+  };
+  try {
+    withoutTelemetryOptOut();
+    mkdirSync(join(home, ".hyperframes"), { recursive: true });
+    writeFileSync(
+      join(home, ".hyperframes/config.json"),
+      JSON.stringify({ anonymousId: "anon-2" }),
+    );
+
+    await track("media_use_resolve", { type: "bgm", source: "search" });
+
+    const batch = parseFetchBodies(calls);
+    assert.equal(
+      batch.some((item) => item.event === "$identify"),
+      false,
+    );
+    assert.equal(batch[0].event, "media_use_resolve");
+    assert.equal(batch[0].distinct_id, "anon-2");
+  } finally {
+    globalThis.fetch = originalFetch;
+    restoreEnv(savedEnv);
+    rmSync(root, { recursive: true, force: true });
+    __resetTelemetryForTest();
+  }
+});
+
+test("first run notice prints to stderr once and never stdout", async () => {
+  const savedEnv = { ...process.env };
+  const originalFetch = globalThis.fetch;
+  const originalError = console.error;
+  const originalLog = console.log;
+  const { root, home } = sandbox();
+  const stderr = [];
+  const stdout = [];
+  globalThis.fetch = async () => ({ ok: true });
+  console.error = (...args) => stderr.push(args.join(" "));
+  console.log = (...args) => stdout.push(args.join(" "));
+  try {
+    withoutTelemetryOptOut();
+    await track("media_use_resolve", { type: "bgm" });
+    await track("media_use_resolve", { type: "sfx" });
+
+    assert.equal(stderr.length, 1);
+    assert.match(stderr[0], /media-use sends usage telemetry/);
+    assert.equal(stdout.length, 0);
+    // notice-shown lives in the shared config (config.telemetryNoticeShown), so
+    // the CLI and media-use show it once per person — not a media-use-only marker.
+    assert.equal(
+      JSON.parse(readFileSync(join(home, ".hyperframes/config.json"), "utf8")).telemetryNoticeShown,
+      true,
+    );
+  } finally {
+    globalThis.fetch = originalFetch;
+    console.error = originalError;
+    console.log = originalLog;
+    restoreEnv(savedEnv);
+    rmSync(root, { recursive: true, force: true });
+    __resetTelemetryForTest();
+  }
+});
+
+test("warns once on stderr when MEDIA_USE_TELEMETRY_HOST is set outside a test/CI context", async () => {
+  const savedEnv = { ...process.env };
+  const originalFetch = globalThis.fetch;
+  const originalError = console.error;
+  const { root } = sandbox();
+  const stderr = [];
+  globalThis.fetch = async () => ({ ok: true });
+  console.error = (...args) => stderr.push(args.join(" "));
+  try {
+    // No opt-out, no CI/NODE_ENV signal — mirrors a real user's shell where
+    // this test-only var leaked in by accident and tracking is not disabled.
+    withoutTelemetryOptOut();
+    process.env.MEDIA_USE_TELEMETRY_HOST = "http://127.0.0.1:1"; // nothing listens; irrelevant here
+    await track("media_use_resolve", { type: "bgm" });
+    await track("media_use_resolve", { type: "bgm" });
+
+    const warnings = stderr.filter((line) => line.includes("MEDIA_USE_TELEMETRY_HOST"));
+    assert.equal(warnings.length, 1, "expected exactly one warning across repeated calls");
+  } finally {
+    globalThis.fetch = originalFetch;
+    console.error = originalError;
+    restoreEnv(savedEnv);
+    rmSync(root, { recursive: true, force: true });
+    __resetTelemetryForTest();
+  }
+});
+
+test("does not warn when MEDIA_USE_TELEMETRY_HOST is set the way the U7 interception test sets it", async () => {
+  const savedEnv = { ...process.env };
+  const originalFetch = globalThis.fetch;
+  const originalError = console.error;
+  const { root } = sandbox();
+  const stderr = [];
+  globalThis.fetch = async () => ({ ok: true });
+  console.error = (...args) => stderr.push(args.join(" "));
+  try {
+    withoutTelemetryOptOut();
+    // Same env shape resolve.test.mjs's U7 test uses to allow tracking through:
+    // DO_NOT_TRACK=0, CI unset/empty, NODE_ENV=test.
+    process.env.DO_NOT_TRACK = "0";
+    process.env.CI = "";
+    process.env.NODE_ENV = "test";
+    process.env.MEDIA_USE_TELEMETRY_HOST = "http://127.0.0.1:1";
+    await track("media_use_resolve", { type: "bgm" });
+
+    assert.equal(
+      stderr.some((line) => line.includes("MEDIA_USE_TELEMETRY_HOST")),
+      false,
+      "the U7 test's own use of the override must not print a spurious warning",
+    );
+  } finally {
+    globalThis.fetch = originalFetch;
+    console.error = originalError;
+    restoreEnv(savedEnv);
+    rmSync(root, { recursive: true, force: true });
+    __resetTelemetryForTest();
+  }
+});
+
+test("read-only telemetry state degrades without throwing", async () => {
+  const savedEnv = { ...process.env };
+  const originalFetch = globalThis.fetch;
+  const { root, home } = sandbox();
+  globalThis.fetch = async () => ({ ok: true });
+  try {
+    withoutTelemetryOptOut();
+    writeFileSync(join(home, ".hyperframes"), "not a directory");
+    writeFileSync(join(home, ".media"), "not a directory");
+    await track("media_use_resolve", { type: "bgm" });
+  } finally {
+    globalThis.fetch = originalFetch;
+    try {
+      chmodSync(join(home, ".hyperframes"), 0o600);
+    } catch {
+      // best effort for cleanup on platforms with different chmod behavior
+    }
+    restoreEnv(savedEnv);
+    rmSync(root, { recursive: true, force: true });
+    __resetTelemetryForTest();
+  }
+});
diff --git a/.claude/skills-media/media-use/scripts/lib/tts-local-provider.mjs b/.claude/skills-media/media-use/scripts/lib/tts-local-provider.mjs
new file mode 100644
index 000000000..b1920bebe
--- /dev/null
+++ b/.claude/skills-media/media-use/scripts/lib/tts-local-provider.mjs
@@ -0,0 +1,92 @@
+import { execFileSync } from "node:child_process";
+import { existsSync, statSync } from "node:fs";
+import { tmpdir } from "node:os";
+import { join } from "node:path";
+import { resolveSpawnCommand } from "../../audio/scripts/lib/tts.mjs";
+
+// Local voiceover via the packaged Kokoro-82M TTS (the `hyperframes tts` CLI),
+// the free/private default now that HeyGen TTS costs wallet credits. Kokoro runs
+// on-device (CPU, faster-than-realtime, bundled voices, native word timestamps),
+// so no key and no per-call charge. When Kokoro is not set up, this returns null
+// and the registry falls through to the HeyGen TTS upsell.
+//
+// Delegated to the hyperframes CLI (same as transcribe / remove-background), not
+// re-implemented here. ffprobe reads the duration back for the ledger.
+
+function probeDurationSeconds(file) {
+  try {
+    const out = execFileSync(
+      "ffprobe",
+      ["-v", "error", "-show_entries", "format=duration", "-of", "csv=p=0", file],
+      { encoding: "utf8", timeout: 15000 },
+    );
+    const d = parseFloat(String(out).trim());
+    return Number.isFinite(d) ? d : undefined;
+  } catch {
+    return undefined;
+  }
+}
+
+// `platform`/`execFn`/`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 in ../../audio/scripts/lib/tts.mjs.
+export async function localTtsGenerate(
+  intent,
+  ctx,
+  platform = process.platform,
+  execFn = execFileSync,
+  env = process.env,
+  pathExists = existsSync,
+) {
+  const outPath = join(tmpdir(), `media-use-kokoro-${process.pid}-${Date.now()}.wav`);
+  const argv = ["hyperframes", "tts", intent, "--output", outPath];
+  if (ctx?.voice) argv.push("--voice", ctx.voice);
+  if (ctx?.lang && ctx.lang !== "en") argv.push("--lang", ctx.lang);
+  // On Windows a bare "npx" is npx.cmd, which execFileSync cannot exec
+  // (spawnSync npx ENOENT) — resolveSpawnCommand reroutes it through
+  // node + npx-cli.js, same as the audio engine's TTS spawns.
+  const resolved = resolveSpawnCommand(
+    "npx",
+    argv,
+    { encoding: "utf8", timeout: 300000, stdio: ["ignore", "pipe", "pipe"] },
+    platform,
+    env,
+    pathExists,
+  );
+  if (!resolved) {
+    // npx-on-win32 with no resolvable npx-cli.js — same terminal condition
+    // spawnP warns about. Fall through to the next provider rather than crash.
+    console.error(
+      "media-use: local voice not enabled (kokoro). 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 null;
+  }
+  try {
+    execFn(resolved.cmd, resolved.args, resolved.opts);
+  } catch (err) {
+    // `hyperframes tts` prints its "kokoro-onnx not installed" hint to stdout
+    // (clack UI), so read both streams and surface the actionable enable-command
+    // rather than a bare "Command failed": otherwise resolve silently falls
+    // through to the PAID HeyGen TTS upsell when free local voice was one pip away.
+    const out = `${err.stdout?.toString() ?? ""}${err.stderr?.toString() ?? ""}`.trim();
+    const hint = /not installed|pip install kokoro/i.test(out)
+      ? "install for free on-device voice: pip install kokoro-onnx soundfile (or set HYPERFRAMES_PYTHON to a venv that has it)"
+      : out.slice(-200) || err.message;
+    console.error(`media-use: local voice not enabled (kokoro). ${hint}`);
+    return null;
+  }
+  if (!existsSync(outPath) || statSync(outPath).size === 0) return null;
+  return {
+    localPath: outPath,
+    ext: ".wav",
+    source: "generated",
+    metadata: {
+      description: intent,
+      provider: "kokoro.local",
+      duration: probeDurationSeconds(outPath),
+      provenance: { engine: "kokoro-82m", prompt: intent },
+    },
+  };
+}
diff --git a/.claude/skills-media/media-use/scripts/lib/tts-local-provider.test.mjs b/.claude/skills-media/media-use/scripts/lib/tts-local-provider.test.mjs
new file mode 100644
index 000000000..11ec193b7
--- /dev/null
+++ b/.claude/skills-media/media-use/scripts/lib/tts-local-provider.test.mjs
@@ -0,0 +1,72 @@
+import { test } from "node:test";
+import assert from "node:assert/strict";
+import { localTtsGenerate } from "./tts-local-provider.mjs";
+
+// Regression: on Windows, a bare "npx" is npx.cmd, which execFileSync cannot
+// exec — the Kokoro delegation failed with `spawnSync npx ENOENT` instead of
+// synthesizing (or cleanly falling through to the next provider). The spawn
+// must route through node + npx-cli.js on win32, same as the audio engine's
+// TTS spawns (see ../../audio/scripts/lib/tts.spawn.test.mjs).
+
+const envWithNpxCli = {
+  npm_execpath: "C:/Program Files/nodejs/node_modules/npm/bin/npm-cli.js",
+  npm_node_execpath: "C:/Program Files/nodejs/node.exe",
+};
+const npxCliPath = "C:/Program Files/nodejs/node_modules/npm/bin/npx-cli.js";
+const pathExists = (path) => path === npxCliPath;
+
+test("win32: routes the hyperframes tts call through node + npx-cli, never bare npx", async () => {
+  const captured = [];
+  const fakeExec = (cmd, args, opts) => {
+    captured.push({ cmd, args, opts });
+    // Synthesize nothing — the provider then returns null via the
+    // missing-output check, which is fine: we only assert the spawn shape.
+  };
+
+  await localTtsGenerate(
+    "hello there",
+    { voice: "am_michael" },
+    "win32",
+    fakeExec,
+    envWithNpxCli,
+    pathExists,
+  );
+
+  assert.equal(captured.length, 1);
+  assert.equal(captured[0].cmd, envWithNpxCli.npm_node_execpath);
+  assert.equal(captured[0].args[0], npxCliPath);
+  assert.deepEqual(captured[0].args.slice(1, 4), ["hyperframes", "tts", "hello there"]);
+  assert.ok(captured[0].args.includes("--voice"));
+  // execFileSync options survive the rerouting (pipes are what let the caller
+  // read the "kokoro-onnx not installed" hint back out).
+  assert.deepEqual(captured[0].opts.stdio, ["ignore", "pipe", "pipe"]);
+});
+
+test("win32 without a resolvable npx-cli: falls through to the next provider (null), no spawn", async () => {
+  const captured = [];
+  const fakeExec = (...call) => captured.push(call);
+
+  const result = await localTtsGenerate(
+    "hello",
+    {},
+    "win32",
+    fakeExec,
+    {}, // no npm_execpath, and pathExists finds nothing
+    () => false,
+  );
+
+  assert.equal(result, null);
+  assert.equal(captured.length, 0);
+});
+
+test("non-win32: spawns plain npx unchanged", async () => {
+  const captured = [];
+  const fakeExec = (cmd, args) => captured.push({ cmd, args });
+
+  await localTtsGenerate("hola", { lang: "es" }, "darwin", fakeExec, {}, () => false);
+
+  assert.equal(captured.length, 1);
+  assert.equal(captured[0].cmd, "npx");
+  assert.deepEqual(captured[0].args.slice(0, 3), ["hyperframes", "tts", "hola"]);
+  assert.ok(captured[0].args.includes("--lang"));
+});
diff --git a/.claude/skills-media/media-use/scripts/lib/usage.mjs b/.claude/skills-media/media-use/scripts/lib/usage.mjs
new file mode 100644
index 000000000..806f146ba
--- /dev/null
+++ b/.claude/skills-media/media-use/scripts/lib/usage.mjs
@@ -0,0 +1,57 @@
+import { readFileSync, readdirSync, existsSync } from "node:fs";
+import { join } from "node:path";
+
+// Asset in-use detection: which manifest assets are actually referenced by the
+// project's compositions. Answers "is this safe to prune?" from the CLI. (The
+// Studio Asset tab computes its in-use filter separately from the live timeline;
+// this is the skill-side equivalent for headless use.)
+//
+// ponytail: substring match of each asset's filename against the .html text
+// (covers src= / href= / url() / data-* without parsing HTML). False positives
+// only if a filename literally appears in prose; fine for a filter. Upgrade to
+// attribute parsing if that ever bites.
+
+function compositionHtml(projectDir) {
+  let files = [];
+  try {
+    files = readdirSync(projectDir).filter((f) => f.endsWith(".html"));
+  } catch {
+    return "";
+  }
+  const sub = join(projectDir, "compositions");
+  if (existsSync(sub)) {
+    try {
+      for (const f of readdirSync(sub))
+        if (f.endsWith(".html")) files.push(join("compositions", f));
+    } catch {
+      // ignore unreadable subdir
+    }
+  }
+  return files
+    .map((f) => {
+      try {
+        return readFileSync(join(projectDir, f), "utf8");
+      } catch {
+        return "";
+      }
+    })
+    .join("\n");
+}
+
+/** Tag each record with `inUse` (referenced by some composition). */
+export function tagUsage(records, projectDir) {
+  const html = compositionHtml(projectDir);
+  return records.map((r) => {
+    const file = r.path ? r.path.split("/").pop() : r.id;
+    return { ...r, inUse: Boolean(file) && html.includes(file) };
+  });
+}
+
+/** Split records into { used, unused } for the filter. */
+export function partitionUsage(records, projectDir) {
+  const tagged = tagUsage(records, projectDir);
+  return {
+    used: tagged.filter((r) => r.inUse),
+    unused: tagged.filter((r) => !r.inUse),
+  };
+}
diff --git a/.claude/skills-media/media-use/scripts/lib/usage.test.mjs b/.claude/skills-media/media-use/scripts/lib/usage.test.mjs
new file mode 100644
index 000000000..271e70762
--- /dev/null
+++ b/.claude/skills-media/media-use/scripts/lib/usage.test.mjs
@@ -0,0 +1,54 @@
+import { strict as assert } from "node:assert";
+import { test } from "node:test";
+import { mkdtempSync, writeFileSync, rmSync } from "node:fs";
+import { join } from "node:path";
+import { tmpdir } from "node:os";
+import { tagUsage, partitionUsage } from "./usage.mjs";
+
+function project(html) {
+  const dir = mkdtempSync(join(tmpdir(), "mu-usage-"));
+  writeFileSync(join(dir, "index.html"), html);
+  return dir;
+}
+
+const records = [
+  { id: "bgm_001", path: ".media/audio/bgm/bgm_001.wav", description: "used track" },
+  { id: "bgm_002", path: ".media/audio/bgm/bgm_002.wav", description: "orphan track" },
+];
+
+test("an asset referenced by a composition is marked in-use", () => {
+  const dir = project(`<audio src="assets/bgm_001.wav"></audio>`);
+  try {
+    const tagged = tagUsage(records, dir);
+    assert.equal(tagged.find((r) => r.id === "bgm_001").inUse, true);
+    assert.equal(tagged.find((r) => r.id === "bgm_002").inUse, false);
+  } finally {
+    rmSync(dir, { recursive: true, force: true });
+  }
+});
+
+test("partitionUsage splits used vs unused for the filter", () => {
+  const dir = project(`<img src="bgm_001.wav">`);
+  try {
+    const { used, unused } = partitionUsage(records, dir);
+    assert.deepEqual(
+      used.map((r) => r.id),
+      ["bgm_001"],
+    );
+    assert.deepEqual(
+      unused.map((r) => r.id),
+      ["bgm_002"],
+    );
+  } finally {
+    rmSync(dir, { recursive: true, force: true });
+  }
+});
+
+test("no compositions -> everything reads as unused (safe default)", () => {
+  const dir = mkdtempSync(join(tmpdir(), "mu-usage-"));
+  try {
+    assert.equal(partitionUsage(records, dir).used.length, 0);
+  } finally {
+    rmSync(dir, { recursive: true, force: true });
+  }
+});
diff --git a/.claude/skills-media/media-use/scripts/lib/voice-provider.mjs b/.claude/skills-media/media-use/scripts/lib/voice-provider.mjs
new file mode 100644
index 000000000..2c80ae6e2
--- /dev/null
+++ b/.claude/skills-media/media-use/scripts/lib/voice-provider.mjs
@@ -0,0 +1,57 @@
+import { HEYGEN_CLIENT_SOURCE_ARGV, runHeygenJson } from "./heygen-cli.mjs";
+
+// Voice / TTS generation via the HeyGen CLI — the only external CLI media-use
+// shells (CLI-only invariant: media-use holds no keys; the CLI owns auth).
+// Flags verified against `heygen voice speech create --help` (v0.3.0).
+
+function result(url, duration, provider, intent) {
+  if (!url) return null;
+  return {
+    url,
+    source: "generated",
+    metadata: {
+      description: intent,
+      provider,
+      ...(duration != null && { duration }),
+      provenance: { prompt: intent },
+    },
+  };
+}
+
+// HeyGen TTS requires a starfish-engine voice. Default to the first one the
+// catalog returns (deterministic order); pass ctx.voiceId to override.
+// ponytail: listed once per process; the resolved asset is frozen + cached after
+// first use, so the network list only happens on a cache miss. Cache only a
+// truthy id -- a transient list failure must not poison the cache with `null`
+// and permanently disable TTS for the rest of the process.
+let cachedVoiceId;
+function defaultVoiceId() {
+  if (cachedVoiceId) return cachedVoiceId;
+  const j = runHeygenJson(
+    "heygen",
+    ["voice", "list", "--engine", "starfish", "--limit", "1"],
+    "voice list",
+  );
+  cachedVoiceId = j?.data?.[0]?.voice_id || null;
+  return cachedVoiceId;
+}
+
+export async function heygenTtsGenerate(intent, ctx) {
+  const voiceId = ctx?.voiceId || defaultVoiceId();
+  if (!voiceId) return null;
+  const p = runHeygenJson(
+    "heygen",
+    [
+      ...HEYGEN_CLIENT_SOURCE_ARGV,
+      "voice",
+      "speech",
+      "create",
+      "--text",
+      intent,
+      "--voice-id",
+      voiceId,
+    ],
+    "tts",
+  );
+  return result(p?.data?.audio_url, p?.data?.duration, "heygen.tts", intent);
+}
diff --git a/.claude/skills-media/media-use/scripts/lib/voice-provider.test.mjs b/.claude/skills-media/media-use/scripts/lib/voice-provider.test.mjs
new file mode 100644
index 000000000..f24bc468f
--- /dev/null
+++ b/.claude/skills-media/media-use/scripts/lib/voice-provider.test.mjs
@@ -0,0 +1,46 @@
+import { strict as assert } from "node:assert";
+import { chmodSync, mkdtempSync, readFileSync, rmSync, writeFileSync } from "node:fs";
+import { tmpdir } from "node:os";
+import { join } from "node:path";
+import { test } from "node:test";
+import { heygenTtsGenerate } from "./voice-provider.mjs";
+
+test("tags TTS generation but not voice discovery with the media-use client source", async () => {
+  const dir = mkdtempSync(join(tmpdir(), "media-use-voice-provider-"));
+  const capturePath = join(dir, "argv.log");
+  const heygenPath = join(dir, "heygen");
+  const previousPath = process.env.PATH;
+  const previousCapturePath = process.env.HEYGEN_CAPTURE_PATH;
+
+  writeFileSync(
+    heygenPath,
+    `#!/bin/sh
+printf '%s\\n' "$*" >> "$HEYGEN_CAPTURE_PATH"
+case "$*" in
+  *"voice list"*) printf '%s\\n' '{"data":[{"voice_id":"voice-123"}]}' ;;
+  *"voice speech create"*) printf '%s\\n' '{"data":{"audio_url":"https://example.com/voice.mp3","duration":1.5}}' ;;
+esac
+`,
+  );
+  chmodSync(heygenPath, 0o755);
+  process.env.PATH = `${dir}:${previousPath ?? ""}`;
+  process.env.HEYGEN_CAPTURE_PATH = capturePath;
+
+  try {
+    const result = await heygenTtsGenerate("Hello from media-use", {});
+    const invocations = readFileSync(capturePath, "utf8").trim().split("\n");
+
+    assert.equal(invocations.length, 2);
+    assert.match(invocations[0], /^voice list /);
+    assert.doesNotMatch(invocations[0], /X-HeyGen-Client-Source/);
+    assert.match(invocations[1], /voice speech create/);
+    assert.match(invocations[1], /X-HeyGen-Client-Source: media-use/);
+    assert.equal(result?.url, "https://example.com/voice.mp3");
+  } finally {
+    if (previousPath === undefined) delete process.env.PATH;
+    else process.env.PATH = previousPath;
+    if (previousCapturePath === undefined) delete process.env.HEYGEN_CAPTURE_PATH;
+    else process.env.HEYGEN_CAPTURE_PATH = previousCapturePath;
+    rmSync(dir, { recursive: true, force: true });
+  }
+});
diff --git a/.claude/skills-media/media-use/scripts/lib/words.mjs b/.claude/skills-media/media-use/scripts/lib/words.mjs
new file mode 100644
index 000000000..114cf766c
--- /dev/null
+++ b/.claude/skills-media/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)).filter((words) => words.length > 0);
+}
diff --git a/.claude/skills-media/media-use/scripts/prefs.mjs b/.claude/skills-media/media-use/scripts/prefs.mjs
new file mode 100644
index 000000000..5f13583de
--- /dev/null
+++ b/.claude/skills-media/media-use/scripts/prefs.mjs
@@ -0,0 +1,70 @@
+#!/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 rules live in hyperframes-core/references/brief-contract.md § 2
+ * (Remembered defaults): 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/media-use/scripts/recipe.mjs b/.claude/skills-media/media-use/scripts/recipe.mjs
new file mode 100644
index 000000000..ae26c8c79
--- /dev/null
+++ b/.claude/skills-media/media-use/scripts/recipe.mjs
@@ -0,0 +1,103 @@
+#!/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/consumed is the review loop's and the intent
+ * layer's business — see hyperframes-core/references/review-loop.md § 4 and
+ * the intent layer's recipe check (hyperframes SKILL.md § 4).
+ */
+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/media-use/scripts/resolve.mjs b/.claude/skills-media/media-use/scripts/resolve.mjs
new file mode 100644
index 000000000..563b84411
--- /dev/null
+++ b/.claude/skills-media/media-use/scripts/resolve.mjs
@@ -0,0 +1,1238 @@
+#!/usr/bin/env node
+
+import { spawnSync } from "node:child_process";
+import { existsSync, statSync, writeFileSync, renameSync, rmSync } from "node:fs";
+import { resolve, join, extname, basename } from "node:path";
+import { parseArgs } from "node:util";
+import {
+  appendRecord,
+  findByPrompt,
+  findByEntity,
+  nextId,
+  withReservedFile,
+  withReservedFileSync,
+} from "./lib/manifest.mjs";
+import { regenerateIndex } from "./lib/index-gen.mjs";
+import { cacheGet, cacheGetByEntity, importFromCache, cachePut } from "./lib/cache.mjs";
+import { runCapability, listTypes, providerMatches, providerNamesFor } from "./lib/registry.mjs";
+import { freezeUrl, freezeLocalFile, isDirectMediaUrl } from "./lib/freeze.mjs";
+import { findExistingAsset } from "./lib/adopt.mjs";
+import { track } from "./lib/telemetry.mjs";
+import { recordMiss } from "./lib/misses.mjs";
+import { buildStats } from "./lib/stats.mjs";
+import { typesMatch } from "./lib/match.mjs";
+import { listCandidates, formatCandidates, CANDIDATE_CAP } from "./lib/candidates.mjs";
+import { findGlobalBySha } from "./lib/cache.mjs";
+import { heygenAuthMethod } from "../audio/scripts/lib/heygen.mjs";
+import { buildCube, paramsFromIntent } from "./lib/cube-build.mjs";
+import { validateCubeFile } from "./lib/cube-validate.mjs";
+import { analyzeMediaGrade, formatMeasuredNote } from "./lib/grade-analyzer.mjs";
+import {
+  freezeLibraryLut,
+  isLibraryLutOfflineMiss,
+  matchColorLook,
+} from "./lib/lut-preset-provider.mjs";
+import {
+  HEYGEN_AUTH_COMMAND,
+  HEYGEN_INSTALL_COMMAND,
+  HEYGEN_MIN_VERSION,
+  HEYGEN_UPDATE_COMMAND,
+  consumeHeygenRemediation,
+  firstSemver,
+  flushHeygenFailureTracking,
+  versionLessThan,
+} from "./lib/heygen-cli.mjs";
+import { BundledSfxAssetsError, inspectBundledSfxAssets } from "./lib/bundled-sfx-provider.mjs";
+
+const INGEST_TYPES = listTypes();
+const DEFAULT_EXT = {
+  bgm: ".wav",
+  sfx: ".mp3",
+  voice: ".wav",
+  image: ".jpg",
+  icon: ".svg",
+  logo: ".svg",
+  brand: ".png",
+  video: ".mp4",
+  grade: ".cube",
+  lut: ".cube",
+};
+
+// resolve shells `fetch`/`freezeUrl` and modern ESM; 18 is the floor where those
+// exist without flags. Named so the --doctor node check verifies something real
+// (O2). Declared before the top-level `--doctor` branch that calls runDoctor().
+const MIN_NODE_VERSION = "18.0.0";
+
+const { values: args } = parseArgs({
+  options: {
+    type: { type: "string", short: "t" },
+    intent: { type: "string", short: "i" },
+    entity: { type: "string", short: "e" },
+    project: { type: "string", short: "p", default: "." },
+    adopt: { type: "boolean", default: false },
+    candidates: { type: "boolean", default: false },
+    doctor: { type: "boolean", default: false },
+    stats: { type: "boolean", default: false },
+    days: { type: "string" },
+    "dry-run": { type: "boolean", default: false },
+    reuse: { type: "string" },
+    from: { type: "string" },
+    params: { type: "string" },
+    for: { type: "string" },
+    "local-only": { type: "boolean", default: false },
+    provider: { type: "string" },
+    "avatar-id": { type: "string" },
+    "voice-id": { type: "string" },
+    json: { type: "boolean", default: false },
+    help: { type: "boolean", short: "h", default: false },
+  },
+  strict: true,
+});
+
+if (args.help) {
+  console.log(`media-use resolve — turn a media need into a frozen local file
+
+Usage:
+  node resolve.mjs --type <type> --intent "<description>" [--project <dir>]
+
+Types: ${listTypes().join(", ")}
+
+Options:
+  --type, -t      Media type (required)
+  --intent, -i    What you need (required)
+  --entity, -e    Entity name for cache matching (optional)
+  --project, -p   Project directory (default: .)
+  --adopt         Adopt all existing assets/ files into the manifest
+  --candidates    List reusable assets (project + global cache) for --type; no
+                  download, no mutation. Read them and decide reuse yourself.
+  --doctor        Check local CLI dependencies; no manifest changes.
+  --stats         Print local usage stats from .media and ~/.media; no mutation.
+  --days <N>      Limit --stats to records/misses from the last N days when
+                  timestamps are available.
+  --reuse <sha>   Import a specific global-cache asset (by content sha/prefix,
+                  from --candidates) into this project
+  --from <file>   Freeze a local file or direct public URL (ingest)
+  --params <json> Build an explicit parametric LUT (lut/grade only)
+  --for <media>   Analyze a local image/video and add measured grade adjust
+                  suggestions (grade only)
+  --local-only    Offline: skip every network provider
+  --provider      Force one generator (e.g. codex, mflux, kokoro, heygen)
+  --avatar-id     Override the default avatar for heygen.video generation
+  --voice-id      Override the default voice for voice/heygen.video generation
+  --json          Output JSON instead of one-line result
+  --help, -h      Show this help`);
+  process.exit(0);
+}
+
+const projectDir = resolve(args.project);
+const type = args.type;
+const intent = args.intent;
+const entity = args.entity || null;
+
+if (args.adopt) {
+  const { adoptExistingAssets } = await import("./lib/adopt.mjs");
+  const adopted = adoptExistingAssets(projectDir);
+  if (args.json) {
+    console.log(JSON.stringify({ ok: true, adopted: adopted.length, assets: adopted }));
+  } else if (adopted.length === 0) {
+    console.log("no new assets to adopt (assets/ empty or already registered)");
+  } else {
+    console.log(`adopted ${adopted.length} asset${adopted.length === 1 ? "" : "s"} from assets/`);
+    for (const r of adopted) console.log(`  ${r.id} → ${r.path} (${r.type})`);
+  }
+  process.exit(0);
+}
+
+// Candidates: side-effect-free listing of reusable assets (project + global
+// cache) for --type. No download, no provider, no mutation. The agent reads
+// these and decides semantic fit itself.
+if (args.candidates || args["dry-run"]) {
+  await showCandidates();
+  process.exit(0);
+}
+
+if (args.doctor) {
+  const doctor = runDoctor();
+  const failed = doctor.checks.filter((check) => !check.ok);
+  // Non-PII: instrument the exact question the feature exists to answer — how
+  // often is --doctor run and which check fails most. Awaited so a short-lived
+  // run flushes before exit.
+  await track("media_use_doctor_run", {
+    ok: doctor.ok,
+    checks_failed: failed.length,
+    failed: failed.map((check) => check.name),
+  });
+  if (args.json) {
+    console.log(JSON.stringify({ ok: doctor.ok, checks: doctor.checks }));
+  } else {
+    printDoctor(doctor.checks);
+  }
+  process.exit(doctor.ok ? 0 : 1);
+}
+
+if (args.stats) {
+  const report = buildStats({
+    projectDir,
+    days: args.days ? Number(args.days) : undefined,
+  });
+  if (args.json) {
+    console.log(JSON.stringify(report));
+  } else {
+    printStats(report);
+  }
+  process.exit(0);
+}
+
+// Reuse: import a specific global-cache asset (by content sha/prefix, taken
+// from --candidates) into this project. `!== undefined` so an empty --reuse ""
+// still routes here (and gets a clear empty-sha error) instead of falling
+// through to the misleading "--type and --intent are required".
+if (args.reuse !== undefined) {
+  await reuseGlobal(args.reuse);
+  process.exit(0);
+}
+
+// Ingest: freeze a user-supplied local file or direct public URL (no search).
+if (args.from) {
+  await ingest(args.from);
+  process.exit(0);
+}
+
+// Recipes: folder-based named bundles resolved by entity name — no providers,
+// no content hashing (an evolving versioned bundle, not an immutable file).
+// Delegates to lib/recipe-store.mjs the way grade/lut delegate to resolveColor;
+// freeze/list live in scripts/recipe.mjs.
+if (type === "recipe") {
+  const { useRecipe } = await import("./lib/recipe-store.mjs");
+  const name = (entity || intent || "").trim();
+  if (!name) exitError("--type recipe needs --entity <name> (or --intent <name>)", 2);
+  try {
+    const used = useRecipe({ projectDir, name });
+    if (args.json) {
+      console.log(JSON.stringify({ ok: true, ...used }));
+    } else {
+      console.log(
+        `resolved 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}`);
+    }
+    process.exit(0);
+  } catch (err) {
+    exitError(err.message, 1);
+  }
+}
+
+if (args.params !== undefined) {
+  if (type !== "lut" && type !== "grade") {
+    exitError(
+      type
+        ? `--params only supports --type lut or grade (got ${type})`
+        : "--params requires --type lut or grade",
+      2,
+    );
+  }
+  try {
+    await runParams();
+    process.exit(0);
+  } catch (err) {
+    exitError(err.message, 1);
+  }
+}
+
+if (!args.type || !args.intent || !args.intent.trim()) {
+  console.error("error: --type and a non-empty --intent are required");
+  process.exit(2);
+}
+
+if (!listTypes().includes(args.type)) {
+  console.error(`error: unknown media type: ${args.type} (known: ${listTypes().join(", ")})`);
+  process.exit(2);
+}
+
+// Forced-provider validation: reject an unknown/unavailable provider name up
+// front so a typo reads as a typo, not a catalog miss (`no provider could
+// resolve`). Match rule mirrors runProviders (full name or dotted prefix).
+if (args.provider && !providerMatches(args.type, args.provider)) {
+  console.error(
+    `error: unknown provider "${args.provider}" for type ${args.type} (available: ${providerNamesFor(args.type).join(", ")})`,
+  );
+  process.exit(2);
+}
+
+function recordAvailable(projectDir, record) {
+  if (!record) return false;
+  if (record.path) return existsSync(join(projectDir, record.path));
+  return record.type === "grade" && record.grading;
+}
+
+// Sparse `{ authMethod }` for a heygen-family provider name (e.g. "heygen.tts"),
+// else `{}` — keeps auth_method telemetry absent for every non-heygen resolve
+// instead of implying an auth method that doesn't apply.
+function heygenAuthMethodFor(provider) {
+  if (!provider || !provider.startsWith("heygen.")) return {};
+  const authMethod = heygenAuthMethod();
+  return authMethod ? { authMethod } : {};
+}
+
+function localizeImportedRecord(record, localPath) {
+  if (record?.type === "grade" && record.grading?.lut) {
+    record.grading = {
+      ...record.grading,
+      lut: { ...record.grading.lut, src: localPath },
+    };
+  }
+  return record;
+}
+
+async function run() {
+  // A forced --provider means "(re)generate with THIS provider" — it bypasses
+  // every reuse rung (project/entity/assets/global cache) so it can't silently
+  // hand back an asset from a different provider. The floor only applies to the
+  // default (unforced) cascade.
+  const forced = !!args.provider;
+
+  // 1. project manifest — exact-prompt match
+  const projectHit = forced ? null : findByPrompt(projectDir, intent, type);
+  if (recordAvailable(projectDir, projectHit)) {
+    return result(projectHit, "cached");
+  }
+
+  // 1b. entity match in project. icon and image are interchangeable for
+  // entity hits — both live in images/, and figma-imported brand marks are
+  // always recorded as type image while agents ask for logos as type icon.
+  if (!forced && entity) {
+    const entityHit = findByEntity(projectDir, entity);
+    if (entityHit && typesMatch(entityHit.type, type) && recordAvailable(projectDir, entityHit)) {
+      return result(entityHit, "cached");
+    }
+  }
+
+  // 1c. scan existing assets/ directory for unregistered matches
+  const existingAsset =
+    forced || type === "grade" || type === "lut"
+      ? null
+      : findExistingAsset(projectDir, intent, type);
+  if (existingAsset) {
+    const id = nextId(projectDir, type);
+    const record = {
+      id,
+      type: existingAsset.type,
+      path: existingAsset.relativePath,
+      source: "existing",
+      description: existingAsset.name.replace(/[-_]/g, " "),
+      provenance: { provider: "local", adopted: true, prompt: intent },
+    };
+    appendRecord(projectDir, record);
+    regenerateIndex(projectDir);
+    return result(record, "existing");
+  }
+
+  // 2. global cache — exact-prompt or entity match
+  const cacheHit = forced ? null : cacheGet(intent, type);
+  if (cacheHit) {
+    const ext = extname(cacheHit.cached_path);
+    const imported = withReservedFileSync(projectDir, type, ext, ({ id, localPath }) =>
+      localizeImportedRecord(importFromCache(cacheHit, projectDir, id, localPath), localPath),
+    );
+    if (imported) {
+      appendRecord(projectDir, imported);
+      regenerateIndex(projectDir);
+      return result(imported, "reused");
+    }
+  }
+
+  if (!forced && entity) {
+    const entityCacheHit = cacheGetByEntity(entity);
+    if (entityCacheHit && typesMatch(entityCacheHit.type, type)) {
+      const ext = extname(entityCacheHit.cached_path);
+      const imported = withReservedFileSync(projectDir, type, ext, ({ id, localPath }) =>
+        localizeImportedRecord(
+          importFromCache(entityCacheHit, projectDir, id, localPath),
+          localPath,
+        ),
+      );
+      if (imported) {
+        appendRecord(projectDir, imported);
+        regenerateIndex(projectDir);
+        return result(imported, "reused");
+      }
+    }
+  }
+
+  // Offline guard: --local-only skips every remote provider (HeyGen catalog),
+  // leaving the project + global cache and any local provider.
+  const localOnly = args["local-only"];
+  const ctx = {
+    entity,
+    projectDir,
+    localOnly,
+    provider: args.provider,
+    avatarId: args["avatar-id"],
+    voiceId: args["voice-id"],
+  };
+
+  // Adherence nudge (offline, no auto-reuse): the exact-cache floor missed and
+  // we're about to fetch/generate. If lexically-similar assets already exist,
+  // point the agent at --candidates so it can reuse instead of fetching. Only a
+  // fuzzy match ever reaches the agent this way — never auto-applied. Goes to
+  // stderr so it reaches --json callers without corrupting stdout. Best-effort.
+  try {
+    const { similar } = listCandidates({ projectDir, type, intent, cap: CANDIDATE_CAP });
+    if (similar > 0) {
+      console.error(
+        `media-use: ${similar} similar cached asset${similar === 1 ? "" : "s"} already ${similar === 1 ? "exists" : "exist"} — run \`resolve --candidates --type ${type} --intent "${intent}"\` to review and reuse instead of fetching.`,
+      );
+    }
+  } catch {
+    // hint is best-effort; never block a resolve
+  }
+
+  if (type === "grade" || type === "lut") {
+    return resolveColor(type, intent, { projectDir });
+  }
+
+  // 3. provider search — registry tries providers in order (heygen-CLI first)
+  let searchResult = null;
+  let providerFailure = null;
+  try {
+    searchResult = await runCapability(type, "search", intent, ctx);
+  } catch (error) {
+    providerFailure = error;
+    // search failed, try generate
+  }
+
+  // 4. generate fallback — same ordered cascade for the generate capability
+  if (!searchResult) {
+    try {
+      searchResult = await runCapability(type, "generate", intent, ctx);
+    } catch (error) {
+      providerFailure ??= error;
+      // generate failed too
+    }
+  }
+
+  // A search/generate attempt against heygen may have fired a fire-and-forget
+  // media_use_provider_error track (reportHeygenFailure — heygen-search.mjs /
+  // voice-provider.mjs are sync call sites several layers below here and can't
+  // await it themselves). Join it now, before any process.exit() below can
+  // race it: both it and the miss/success telemetry below are separate,
+  // non-keepalive HTTP connections with no ordering guarantee otherwise.
+  await flushHeygenFailureTracking();
+
+  if (!searchResult) {
+    await track("media_use_resolve_miss", {
+      type,
+      local_only: !!localOnly,
+      provider_override: !!args.provider,
+    });
+    recordMiss({
+      type,
+      intent,
+      provider_override: !!args.provider,
+      local_only: !!args["local-only"],
+    });
+    // brand stays local: no frame.md/design.md -> upsell the HyperFrames design
+    // flow rather than reporting a generic miss (B5).
+    const msg =
+      providerFailure instanceof BundledSfxAssetsError
+        ? providerFailure.message
+        : type === "brand"
+          ? "no brand spec found — add a frame.md or design.md (colors/font/logo) to this project. Run the HyperFrames design flow to create one; brand tokens are read locally for deterministic rendering."
+          : args.provider
+            ? `provider "${args.provider}" could not resolve ${type}: "${intent}"${localOnly ? " (--local-only skips network providers; drop it or the --provider override)" : ""}`
+            : `no provider could resolve ${type}: "${intent}"`;
+    if (args.json) {
+      console.log(
+        JSON.stringify({
+          ok: false,
+          ...(providerFailure instanceof BundledSfxAssetsError
+            ? { code: providerFailure.code, fix: providerFailure.fix }
+            : {}),
+          error: msg,
+        }),
+      );
+    } else {
+      console.error(`error: ${msg}`);
+    }
+    process.exit(1);
+  }
+
+  // 5. freeze + register (atomic id+file reservation so concurrent resolves
+  // can't collide on an id during the download — MU-23)
+  const ext = searchResult.ext || extFromUrl(searchResult.url || "") || defaultExt(type);
+  const { id, localPath, fullPath } = await withReservedFile(
+    projectDir,
+    type,
+    ext,
+    async (reservation) => {
+      if (searchResult.localPath) {
+        freezeLocalFile(searchResult.localPath, reservation.fullPath);
+      } else if (searchResult.url) {
+        await freezeUrl(searchResult.url, reservation.fullPath);
+      } else {
+        throw new Error("provider returned no url or localPath");
+      }
+      return reservation;
+    },
+  );
+
+  const record = {
+    id,
+    type,
+    path: localPath,
+    source: searchResult.source || "search",
+    description: searchResult.metadata?.description || intent,
+    ...(searchResult.metadata?.duration != null && {
+      duration: Math.round(searchResult.metadata.duration * 10) / 10, // round to 0.1s like probe (voice bypassed it)
+    }),
+    ...(searchResult.metadata?.width != null && { width: searchResult.metadata.width }),
+    ...(searchResult.metadata?.height != null && { height: searchResult.metadata.height }),
+    ...(searchResult.metadata?.transparent != null && {
+      transparent: searchResult.metadata.transparent,
+    }),
+    ...(entity && { entity }),
+    provenance: {
+      provider: searchResult.metadata?.provider || "unknown",
+      prompt: intent,
+      // heygenAuthMethodFor spreads first so an explicit authMethod on a
+      // future provider's own metadata.provenance can still override it below
+      // -- safe today (no provider sets authMethod itself), but keep this
+      // ordering if that ever changes.
+      ...heygenAuthMethodFor(searchResult.metadata?.provider),
+      ...searchResult.metadata?.provenance,
+    },
+  };
+
+  const heygenRemediation = consumeHeygenRemediation();
+  if (
+    searchResult.metadata?.provider === "bundled.sfx" &&
+    !localOnly &&
+    !args.provider &&
+    heygenRemediation
+  ) {
+    record.advisory = heygenRemediation;
+  }
+
+  appendRecord(projectDir, record);
+  regenerateIndex(projectDir);
+  // Auto-promote: surface every fetched asset in the global cache so it's
+  // reusable across all hyperframes projects (B3). Non-fatal; dedup by sha.
+  // ponytail: promotes search/generate/ingest assets (the ones media-use
+  // fetched), not bulk --adopt imports — add those if cross-project reuse of
+  // pre-existing project assets is wanted.
+  try {
+    cachePut(fullPath, record);
+  } catch {
+    // promotion is best-effort; a resolve still succeeds locally
+  }
+  return result(record, searchResult.source || "search");
+}
+
+function mergeSmartAdjust(block) {
+  if (!args.for) return block;
+  const mediaPath = resolve(args.for);
+  // Clear upfront error beats an ffmpeg "No such file" stack on a typo'd path.
+  if (!existsSync(mediaPath)) throw new Error(`--for file not found: ${mediaPath}`);
+  const analysis = analyzeMediaGrade(mediaPath);
+  console.error(formatMeasuredNote(mediaPath, analysis.measured));
+  return {
+    ...block,
+    adjust: {
+      ...(block.adjust || {}),
+      ...analysis.adjust,
+    },
+  };
+}
+
+function freezeGeneratedLut(
+  params,
+  {
+    projectDir,
+    type,
+    description = "parametric color grade",
+    validationErrorPrefix = "generated LUT failed validation",
+  },
+) {
+  return withReservedFileSync(projectDir, type, ".cube", ({ id, localPath, fullPath }) => {
+    const tmpPath = `${fullPath}.tmp`;
+    try {
+      // Write + validate at .tmp, then atomic rename, so a crash between write and
+      // validate can't leave an invalid .cube at the final path.
+      writeFileSync(tmpPath, buildCube(params));
+      const check = validateCubeFile(tmpPath);
+      if (!check.ok) throw new Error(check.error);
+      renameSync(tmpPath, fullPath);
+    } catch (err) {
+      rmSync(tmpPath, { force: true });
+      throw new Error(`${validationErrorPrefix}: ${err.message}`);
+    }
+    return {
+      id,
+      localPath,
+      fullPath,
+      lut: { src: localPath, intensity: 1 },
+      source: "generated",
+      description,
+      metadata: {
+        provider: "cube_lut.builder",
+        provenance: { params },
+      },
+    };
+  });
+}
+
+function exitError(message, status = 1) {
+  if (args.json) {
+    console.log(JSON.stringify({ ok: false, error: message }));
+  } else {
+    console.error(`error: ${message}`);
+  }
+  process.exit(status);
+}
+
+function parseExplicitParams() {
+  try {
+    return JSON.parse(args.params);
+  } catch (err) {
+    throw new Error(`invalid --params JSON: ${err.message}`);
+  }
+}
+
+async function runParams() {
+  if (type === "lut" && args.for) {
+    throw new Error("--for is only supported with --type grade");
+  }
+  const params = parseExplicitParams();
+  const description =
+    typeof intent === "string" && intent.trim()
+      ? intent.trim()
+      : `custom parametric ${type === "lut" ? "lut" : "grade"}`;
+  const frozen = freezeGeneratedLut(params, {
+    projectDir,
+    type,
+    description,
+    validationErrorPrefix: "--params produced an invalid LUT",
+  });
+  const record = {
+    id: frozen.id,
+    type,
+    path: frozen.localPath,
+    source: frozen.source,
+    description: frozen.description,
+    ...(type === "grade" && { grading: mergeSmartAdjust({ intensity: 1, lut: frozen.lut }) }),
+    provenance: {
+      provider: frozen.metadata.provider,
+      ...frozen.metadata.provenance,
+    },
+  };
+  return finalizeColorRecord(record, frozen.source, frozen.fullPath);
+}
+
+async function finalizeColorRecord(record, source, fullPath = null) {
+  appendRecord(projectDir, record);
+  regenerateIndex(projectDir);
+  if (fullPath) {
+    try {
+      cachePut(fullPath, record);
+    } catch {
+      // promotion is best-effort
+    }
+  }
+  return result(record, source);
+}
+
+async function colorMiss(type, intent) {
+  await track("media_use_resolve_miss", {
+    type,
+    local_only: !!args["local-only"],
+    provider_override: !!args.provider,
+  });
+  recordMiss({
+    type,
+    intent,
+    provider_override: !!args.provider,
+    local_only: !!args["local-only"],
+  });
+  const msg = `no local color grade could resolve ${type}: "${intent}"`;
+  if (args.json) {
+    console.log(JSON.stringify({ ok: false, error: msg }));
+  } else {
+    console.error(`error: ${msg}`);
+  }
+  process.exit(1);
+}
+
+async function resolveGrade(intent, { projectDir }) {
+  const match = matchColorLook(intent);
+  if (match?.kind === "preset") {
+    const id = nextId(projectDir, "grade");
+    const grading = mergeSmartAdjust({ preset: match.preset, intensity: 1 });
+    const record = {
+      id,
+      type: "grade",
+      source: "preset",
+      description: intent,
+      grading,
+      provenance: {
+        provider: "color_grade.local",
+        prompt: intent,
+        preset: match.preset,
+      },
+    };
+    return finalizeColorRecord(record, "preset");
+  }
+
+  if (match?.kind === "library") {
+    let frozen;
+    try {
+      frozen = await freezeLibraryLut(match, {
+        projectDir,
+        type: "grade",
+        localOnly: args["local-only"],
+      });
+    } catch (err) {
+      if (isLibraryLutOfflineMiss(err)) return colorMiss("grade", intent);
+      throw err;
+    }
+    const grading = mergeSmartAdjust({ intensity: 1, lut: frozen.lut });
+    const record = {
+      id: frozen.id,
+      type: "grade",
+      path: frozen.localPath,
+      source: frozen.source,
+      description: frozen.description,
+      grading,
+      provenance: {
+        provider: frozen.metadata.provider,
+        prompt: intent,
+        ...frozen.metadata.provenance,
+      },
+    };
+    return finalizeColorRecord(record, frozen.source, frozen.fullPath);
+  }
+
+  const params = paramsFromIntent(intent);
+  if (!params) {
+    // No creative look matched. With --for, the measured adjust block is a
+    // valid grade on its own (footage auto-correction); only a true miss
+    // (no look AND no analysis) aborts.
+    if (args.for) {
+      const grading = mergeSmartAdjust({ intensity: 1 });
+      const record = {
+        id: nextId(projectDir, "grade"),
+        type: "grade",
+        source: "measured",
+        description: intent,
+        grading,
+        provenance: { provider: "color_grade.local", prompt: intent, measured: true },
+      };
+      return finalizeColorRecord(record, "measured");
+    }
+    return colorMiss("grade", intent);
+  }
+  const frozen = freezeGeneratedLut(params, { projectDir, type: "grade" });
+  const grading = mergeSmartAdjust({ intensity: 1, lut: frozen.lut });
+  const record = {
+    id: frozen.id,
+    type: "grade",
+    path: frozen.localPath,
+    source: frozen.source,
+    description: intent,
+    grading,
+    provenance: {
+      provider: frozen.metadata.provider,
+      prompt: intent,
+      ...frozen.metadata.provenance,
+    },
+  };
+  return finalizeColorRecord(record, frozen.source, frozen.fullPath);
+}
+
+async function resolveLut(intent, { projectDir }) {
+  if (args.for) {
+    throw new Error("--for is only supported with --type grade");
+  }
+  const match = matchColorLook(intent);
+  if (match?.kind === "library") {
+    let frozen;
+    try {
+      frozen = await freezeLibraryLut(match, {
+        projectDir,
+        type: "lut",
+        localOnly: args["local-only"],
+      });
+    } catch (err) {
+      if (isLibraryLutOfflineMiss(err)) return colorMiss("lut", intent);
+      throw err;
+    }
+    const record = {
+      id: frozen.id,
+      type: "lut",
+      path: frozen.localPath,
+      source: frozen.source,
+      description: frozen.description,
+      provenance: {
+        provider: frozen.metadata.provider,
+        prompt: intent,
+        ...frozen.metadata.provenance,
+      },
+    };
+    return finalizeColorRecord(record, frozen.source, frozen.fullPath);
+  }
+
+  const params = paramsFromIntent(intent);
+  if (!params) return colorMiss("lut", intent);
+  const frozen = freezeGeneratedLut(params, { projectDir, type: "lut" });
+  const record = {
+    id: frozen.id,
+    type: "lut",
+    path: frozen.localPath,
+    source: frozen.source,
+    description: intent,
+    provenance: {
+      provider: frozen.metadata.provider,
+      prompt: intent,
+      ...frozen.metadata.provenance,
+    },
+  };
+  return finalizeColorRecord(record, frozen.source, frozen.fullPath);
+}
+
+async function resolveColor(type, intent, options) {
+  if (type === "grade") return resolveGrade(intent, options);
+  return resolveLut(intent, options);
+}
+
+async function ingest(src) {
+  if (!type || !INGEST_TYPES.includes(type)) {
+    console.error(`error: --from requires --type (one of: ${INGEST_TYPES.join(", ")})`);
+    process.exit(2);
+  }
+  const isUrl = /^https?:\/\//i.test(src);
+  if (isUrl && !isDirectMediaUrl(src)) {
+    console.error(
+      `error: --from takes a direct public media URL or a local file; "${src}" is not a direct media link (no platform pages / yt-dlp)`,
+    );
+    process.exit(2);
+  }
+  if (!isUrl && !existsSync(resolve(src))) {
+    console.error(`error: file not found: ${src}`);
+    process.exit(2);
+  }
+  // Refuse 0-byte input: an empty asset would register clean but fail at render
+  // (freezeUrl already rejects empty responses; this covers local files).
+  if (!isUrl && statSync(resolve(src)).size === 0) {
+    console.error(`error: refusing to ingest a 0-byte file: ${src}`);
+    process.exit(2);
+  }
+  const ext = extname(isUrl ? new URL(src).pathname : src) || defaultExt(type);
+  const { id, localPath, fullPath } = await withReservedFile(
+    projectDir,
+    type,
+    ext,
+    async (reservation) => {
+      if (isUrl) await freezeUrl(src, reservation.fullPath);
+      else freezeLocalFile(resolve(src), reservation.fullPath);
+      return reservation;
+    },
+  );
+  if (type === "lut" || type === "grade") {
+    try {
+      const check = validateCubeFile(fullPath);
+      if (!check.ok) throw new Error(check.error);
+    } catch (err) {
+      rmSync(fullPath, { force: true });
+      exitError(`ingested LUT is invalid: ${err.message}`, 1);
+    }
+  }
+  const record = {
+    id,
+    type,
+    path: localPath,
+    source: "ingested",
+    description: basename(src.split("?")[0]),
+    provenance: { provider: "local", from: src },
+  };
+  appendRecord(projectDir, record);
+  regenerateIndex(projectDir);
+  try {
+    cachePut(fullPath, record); // surface ingested assets globally too (B3)
+  } catch {
+    // best-effort
+  }
+  await result(record, "ingested");
+}
+
+async function showCandidates() {
+  const projectDir = resolve(args.project);
+  const type = args.type;
+  if (!type || !listTypes().includes(type)) {
+    console.error(`error: --candidates requires --type (one of: ${listTypes().join(", ")})`);
+    process.exit(2);
+  }
+  const intent = args.intent || "";
+  const { candidates, truncated, total, similar } = listCandidates({
+    projectDir,
+    type,
+    intent,
+    cap: CANDIDATE_CAP,
+  });
+  await track("media_use_candidates", {
+    type,
+    project_n: total.project,
+    global_n: total.global,
+    local_only: !!args["local-only"],
+  });
+  if (args.json) {
+    console.log(JSON.stringify({ ok: true, candidates, truncated, total, similar }));
+  } else {
+    console.log(formatCandidates(candidates, { truncated, total }));
+  }
+}
+
+// Best-effort latest stable CLI tag from the CDN (the install script's source of
+// truth). null on any failure (offline, no curl) — treated as "unknown", never fatal.
+function latestHeygenStable() {
+  const probe = runCommand("curl", [
+    "-fsSL",
+    "--max-time",
+    "4",
+    "https://static.heygen.ai/cli/stable",
+  ]);
+  return probe.status === 0 ? firstSemver(commandText(probe)) : null;
+}
+
+function heygenAuthCheck() {
+  // `heygen auth status` already emits JSON by default (only `--human` opts out
+  // to a table) — there is no `--json`/`--output` flag; passing one errors with
+  // "unknown flag". emailFromAuthStatus parses that default JSON.
+  // NOTE: JSON-by-default is a v0.3.0 behavior — this probe assumes it, which
+  // HEYGEN_MIN_VERSION >= 0.3.0 (+ the version gate above) guarantees. If that
+  // floor is ever lowered, auth detection on an older CLI would silently break.
+  const authProbe = runCommand("heygen", ["auth", "status"]);
+  // spawnSync sets .error/.signal on a timeout or spawn failure (status then
+  // null). A stalled auth endpoint (transient network/DNS) must not be reported
+  // as an authoritative "not authenticated" with a re-login fix.
+  const timedOut = authProbe.error?.code === "ETIMEDOUT" || authProbe.signal != null;
+  const email = authProbe.status === 0 ? emailFromAuthStatus(commandText(authProbe)) : null;
+  return {
+    name: "heygen authenticated",
+    ok: !!email,
+    detail: email
+      ? `heygen authenticated as ${email}`
+      : timedOut
+        ? "heygen auth status timed out — possible network issue, not proof of sign-out"
+        : "heygen not authenticated",
+    fix: email ? "" : timedOut ? "check network, then re-run --doctor" : HEYGEN_AUTH_COMMAND,
+  };
+}
+
+function runDoctor() {
+  const checks = [];
+  const bundledSfx = inspectBundledSfxAssets();
+  checks.push({
+    name: "bundled SFX assets",
+    ok: bundledSfx.ok,
+    detail: bundledSfx.detail,
+    fix: bundledSfx.fix,
+  });
+  const heygenVersionProbe = runCommand("heygen", ["--version"]);
+  const heygenOnPath = heygenVersionProbe.status === 0;
+  const heygenVersionText = commandText(heygenVersionProbe);
+  const heygenVersion = firstSemver(heygenVersionText);
+
+  checks.push({
+    name: "heygen on PATH",
+    ok: heygenOnPath,
+    // Just "is the binary here" — the version row below owns the version string,
+    // so this row must not also render `heygen v0.3.0` (two byte-identical lines).
+    detail: heygenOnPath ? "heygen found on PATH" : "heygen not found",
+    fix: heygenOnPath ? "" : HEYGEN_INSTALL_COMMAND,
+  });
+
+  if (!heygenOnPath) {
+    checks.push({
+      name: "heygen version",
+      ok: false,
+      detail: "heygen version unavailable",
+      fix: HEYGEN_INSTALL_COMMAND,
+    });
+    checks.push({
+      name: "heygen authenticated",
+      ok: false,
+      detail: "heygen auth status unavailable",
+      fix: HEYGEN_INSTALL_COMMAND,
+    });
+  } else if (heygenVersion) {
+    const versionOk = !versionLessThan(heygenVersion, HEYGEN_MIN_VERSION);
+    // Keep it latest: even when the installed version clears the floor, nudge
+    // `heygen update` if a newer stable exists. Best-effort — silently skipped
+    // when the CDN is unreachable, so it never blocks the check.
+    const latest = versionOk ? latestHeygenStable() : null;
+    const behind = latest && versionLessThan(heygenVersion, latest);
+    checks.push({
+      name: "heygen version",
+      ok: versionOk,
+      detail: versionOk
+        ? `heygen v${heygenVersion}${behind ? ` (latest v${latest} available)` : ""}`
+        : `heygen v${heygenVersion} (need >= v${HEYGEN_MIN_VERSION})`,
+      fix: versionOk ? (behind ? HEYGEN_UPDATE_COMMAND : "") : HEYGEN_UPDATE_COMMAND,
+    });
+
+    // Below the OAuth-capable floor the auth probe fails for the SAME root cause
+    // (an old CLI can't OAuth and doesn't emit JSON auth status), which would
+    // read as a confusing second "not authenticated" error. Skip it — one root
+    // cause, one fix.
+    checks.push(
+      versionOk
+        ? heygenAuthCheck()
+        : {
+            name: "heygen authenticated",
+            ok: false,
+            detail: "skipped — update heygen first",
+            fix: HEYGEN_UPDATE_COMMAND,
+          },
+    );
+  } else {
+    // Fail-open: heygen ran but printed no semver (dev/stripped build). We can't
+    // verify the version, so we don't block on it — but say so rather than a bare
+    // green check that implies a real version comparison happened.
+    checks.push({
+      name: "heygen version",
+      ok: true,
+      detail: "heygen present; version unverifiable (no semver in --version output)",
+      fix: "",
+    });
+
+    checks.push(heygenAuthCheck());
+  }
+
+  const ffmpegProbe = runCommand("ffmpeg", ["-version"]);
+  checks.push({
+    name: "ffmpeg on PATH",
+    ok: ffmpegProbe.status === 0,
+    detail: ffmpegProbe.status === 0 ? firstLine(ffmpegProbe.stdout) : "ffmpeg not found",
+    fix: ffmpegProbe.status === 0 ? "" : "brew install ffmpeg",
+  });
+
+  const ffprobeProbe = runCommand("ffprobe", ["-version"]);
+  checks.push({
+    name: "ffprobe on PATH",
+    ok: ffprobeProbe.status === 0,
+    detail: ffprobeProbe.status === 0 ? firstLine(ffprobeProbe.stdout) : "ffprobe not found",
+    fix: ffprobeProbe.status === 0 ? "" : "brew install ffmpeg",
+  });
+
+  const nodeOk = !versionLessThan(process.versions.node, MIN_NODE_VERSION);
+  checks.push({
+    name: "node version",
+    ok: nodeOk,
+    detail: `${process.version} (need >= v${MIN_NODE_VERSION})`,
+    fix: nodeOk ? "" : `upgrade Node to >= v${MIN_NODE_VERSION}`,
+  });
+
+  // ffmpeg AND ffprobe are both strictly required (see SKILL.md); the exit code
+  // must reflect that so a script gating on `--doctor` doesn't pass with ffprobe
+  // missing and then break at the first probe call.
+  const ffmpeg = checks.find((check) => check.name === "ffmpeg on PATH");
+  const ffprobe = checks.find((check) => check.name === "ffprobe on PATH");
+  return { ok: bundledSfx.ok && !!ffmpeg?.ok && !!ffprobe?.ok, checks };
+}
+
+function printDoctor(checks) {
+  const heygenChecks = new Set(["heygen on PATH", "heygen version", "heygen authenticated"]);
+  for (const check of checks) {
+    const prefix = check.ok ? "✓" : "✗";
+    const freePath = heygenChecks.has(check.name)
+      ? " — free-usage path: bgm/image/voice/avatar-video"
+      : "";
+    const fix = check.ok || !check.fix ? "" : ` — fix: ${check.fix}`;
+    console.log(`${prefix} ${check.detail}${freePath}${fix}`);
+  }
+}
+
+function printStats(report) {
+  console.log("media-use stats");
+  console.log(`total resolves: ${report.total_resolves}`);
+  console.log(`misses: ${report.misses}`);
+  console.log(
+    `hit rate: ${report.hit_rate == null ? "n/a" : `${Math.round(report.hit_rate * 100)}%`}`,
+  );
+  printMap("by type", report.by_type);
+  printMap("by source", report.by_source);
+  printMap("by provider", report.by_provider);
+  printMap("by via", report.by_via);
+  console.log(`global cache assets: ${report.global_cache_assets}`);
+  console.log(`global cache disk: ${report.global_cache_disk_bytes} bytes`);
+  console.log(`cross-project reuse: ${report.cross_project_reuse}`);
+  console.log("top missed intents:");
+  const entries = Object.entries(report.top_missed_intents);
+  if (entries.length === 0) {
+    console.log("  none");
+    return;
+  }
+  for (const [type, misses] of entries) {
+    console.log(`  ${type}:`);
+    for (const miss of misses) console.log(`    ${miss.count}  ${miss.intent}`);
+  }
+}
+
+function printMap(label, values) {
+  const entries = Object.entries(values);
+  console.log(`${label}:`);
+  if (entries.length === 0) {
+    console.log("  none");
+    return;
+  }
+  for (const [key, value] of entries) console.log(`  ${key}: ${value}`);
+}
+
+function runCommand(bin, argv) {
+  return spawnSync(bin, argv, {
+    encoding: "utf8",
+    timeout: 15000,
+  });
+}
+
+function commandText(result) {
+  return [result.stdout, result.stderr].filter(Boolean).join("\n").trim();
+}
+
+function firstLine(text) {
+  return (
+    String(text || "")
+      .trim()
+      .split(/\r?\n/)[0] || ""
+  );
+}
+
+function emailFromAuthStatus(text) {
+  // JSON only (auth status emits JSON by default). No prose regex fallback: a
+  // human-format body like "Session expired. Contact support@heygen.ai" would
+  // otherwise report the user as authenticated as support@heygen.ai.
+  const trimmed = String(text || "").trim();
+  if (!trimmed.startsWith("{")) return null;
+  try {
+    const parsed = JSON.parse(trimmed);
+    return parsed?.data?.email || parsed?.email || null;
+  } catch {
+    return null;
+  }
+}
+
+async function reuseGlobal(shaArg) {
+  const projectDir = resolve(args.project);
+  const type = args.type;
+  if (!type || !listTypes().includes(type)) {
+    console.error(`error: --reuse requires --type (one of: ${listTypes().join(", ")})`);
+    process.exit(2);
+  }
+  if (!shaArg || !shaArg.trim()) {
+    console.error("error: --reuse needs a content sha/prefix (from `resolve --candidates`)");
+    process.exit(2);
+  }
+  const rec = findGlobalBySha(shaArg);
+  if (rec && rec.ambiguous) {
+    console.error(
+      `error: sha prefix "${shaArg}" is ambiguous (${rec.count} matches) — use more characters`,
+    );
+    process.exit(2);
+  }
+  if (!rec) {
+    console.error(`error: no reusable global asset matches sha "${shaArg}"`);
+    process.exit(1);
+  }
+  // Type guard: don't import a bgm asset as an image (audio under images/).
+  // icon<->image are interchangeable; everything else must match --type.
+  if (!typesMatch(rec.type, type)) {
+    console.error(`error: sha "${shaArg}" is a ${rec.type} asset, not ${type}`);
+    process.exit(2);
+  }
+  const ext = extname(rec.cached_path || "") || defaultExt(type);
+  const imported = withReservedFileSync(projectDir, type, ext, ({ id, localPath }) =>
+    localizeImportedRecord(importFromCache(rec, projectDir, id, localPath), localPath),
+  );
+  if (!imported) {
+    console.error(`error: cache entry for "${shaArg}" is incomplete or missing on disk`);
+    process.exit(1);
+  }
+  // Distinguish an explicit agent reuse from an automatic normalize-exact hit.
+  imported.source = "reused-explicit";
+  imported.provenance = { ...imported.provenance, reused_by: "agent" };
+  appendRecord(projectDir, imported);
+  regenerateIndex(projectDir);
+  await result(imported, "reused-explicit");
+}
+
+async function result(record, source) {
+  // Non-PII usage event: which media type, how it resolved, which provider won.
+  // Never the intent text or paths. Awaited so a short-lived run flushes it.
+  await track("media_use_resolve", {
+    type: record.type,
+    source,
+    provider: record.provenance?.provider,
+    // How a library LUT resolved: "url" (CDN), "params-fallback" (CDN failed →
+    // parametric), or "params" (offline). Surfaces silent CDN→params downgrades
+    // in prod, which --doctor can't (it only answers "reachable now?").
+    via: record.provenance?.via,
+    // Free (OAuth) vs. paid (API-key) heygen path — sparse: absent for every
+    // non-heygen provider (see heygenAuthMethodFor at construction time). On a
+    // cache/reuse hit this reports how the asset was ORIGINALLY fetched, not
+    // this resolve's own credential state — intentional: it's a conversion
+    // signal about the fetch that actually consumed a heygen credit, not
+    // about the (free, no-credential) act of copying a cached file.
+    auth_method: record.provenance?.authMethod,
+    local_only: !!args["local-only"],
+    provider_override: !!args.provider,
+  });
+  if (args.json) {
+    const grading = record.type === "grade" && record.grading ? record.grading : null;
+    console.log(
+      JSON.stringify({
+        ok: true,
+        ...record,
+        ...(grading || {}),
+        ...(grading && { grading }),
+        _source: source,
+      }),
+    );
+  } else {
+    const meta = formatMeta(record, source);
+    console.log(`resolved ${record.id} → ${record.path || "inline"} (${meta})`);
+  }
+}
+
+function formatMeta(record, source) {
+  const parts = [record.type];
+  if (record.grading?.preset) parts.push(`preset ${record.grading.preset}`);
+  if (record.grading?.lut) parts.push("lut");
+  if (record.duration != null) parts.push(`${record.duration}s`);
+  if (record.width && record.height) parts.push(`${record.width}×${record.height}`);
+  if (record.transparent) parts.push("transparent");
+  if (source === "reused" || source === "reused-explicit") parts.push("reused");
+  if (source === "generated") parts.push("generated");
+  return parts.join(", ");
+}
+
+function extFromUrl(url) {
+  try {
+    return extname(new URL(url).pathname) || null;
+  } catch {
+    return null;
+  }
+}
+
+function defaultExt(type) {
+  return DEFAULT_EXT[type] || ".bin";
+}
+
+run().catch((err) => {
+  if (args.json) {
+    console.log(JSON.stringify({ ok: false, error: err.message }));
+  } else {
+    console.error(`error: ${err.message}`);
+  }
+  process.exit(1);
+});
diff --git a/.claude/skills-media/media-use/scripts/resolve.test.mjs b/.claude/skills-media/media-use/scripts/resolve.test.mjs
new file mode 100644
index 000000000..a000d81bf
--- /dev/null
+++ b/.claude/skills-media/media-use/scripts/resolve.test.mjs
@@ -0,0 +1,1029 @@
+import { strict as assert } from "node:assert";
+import {
+  mkdtempSync,
+  rmSync,
+  writeFileSync,
+  readFileSync,
+  mkdirSync,
+  existsSync,
+  readdirSync,
+  chmodSync,
+} from "node:fs";
+import { join } from "node:path";
+import { tmpdir } from "node:os";
+import { createServer } from "node:http";
+import { execFileSync, spawn, spawnSync } from "node:child_process";
+import { appendRecord, readManifest } from "./lib/manifest.mjs";
+import { regenerateIndex } from "./lib/index-gen.mjs";
+import { getProvider } from "./lib/providers.mjs";
+import { HEYGEN_NOT_FOUND_MESSAGE } from "./lib/heygen-cli.mjs";
+import { freezeLocalFile } from "./lib/freeze.mjs";
+import { cachePut, cacheGet, importFromCache } from "./lib/cache.mjs";
+import { validateCubeFile } from "./lib/cube-validate.mjs";
+
+const REPO_ROOT = join(import.meta.dirname, "..", "..", "..");
+const RESOLVE_CLI = join(import.meta.dirname, "resolve.mjs");
+// The "Test: skills" CI job has no ffmpeg on PATH (by design). The smart-grade
+// test shells to ffmpeg, so it's skipped there and runs where ffmpeg exists.
+const HAS_FFMPEG = spawnSync("ffmpeg", ["-version"], { stdio: "ignore" }).status === 0;
+// The core-conformance test imports core's TypeScript via tsx. The dependency-free
+// "Test: skills" CI job has neither tsx nor installed deps, so skip it there; it
+// runs wherever the workspace is installed (locally, the main Test job).
+const CAN_TSX =
+  spawnSync(process.execPath, ["--import", "tsx", "--input-type=module", "-e", "0"], {
+    stdio: "ignore",
+  }).status === 0;
+let tmp;
+
+function setup() {
+  tmp = mkdtempSync(join(tmpdir(), "mu-resolve-test-"));
+}
+
+function cleanup() {
+  if (tmp) rmSync(tmp, { recursive: true, force: true });
+}
+
+function makeRecord(overrides = {}) {
+  return {
+    id: "bgm_001",
+    type: "bgm",
+    path: ".media/audio/bgm/bgm_001.wav",
+    source: "search",
+    description: "soft minimal ambient",
+    duration: 11,
+    provenance: { provider: "test", prompt: "test prompt" },
+    ...overrides,
+  };
+}
+
+// Run resolve.mjs with argv passed as a literal array (no shell). Each token is
+// a separate argv entry, so a value with spaces or shell metacharacters can't
+// break out — never build a command string and hand it to a shell.
+function runResolve(args, opts = {}) {
+  const { env, ...rest } = opts;
+  return execFileSync(process.execPath, [RESOLVE_CLI, ...args], {
+    cwd: REPO_ROOT,
+    encoding: "utf8",
+    env: { ...process.env, DO_NOT_TRACK: "1", ...env },
+    ...rest,
+  });
+}
+
+function spawnResolve(args, opts = {}) {
+  const { env, ...rest } = opts;
+  return spawnSync(process.execPath, [RESOLVE_CLI, ...args], {
+    cwd: REPO_ROOT,
+    encoding: "utf8",
+    env: { ...process.env, DO_NOT_TRACK: "1", ...env },
+    ...rest,
+  });
+}
+
+function spawnResolveAsync(args, opts = {}) {
+  const { env, ...rest } = opts;
+  return new Promise((resolve, reject) => {
+    const child = spawn(process.execPath, [RESOLVE_CLI, ...args], {
+      cwd: REPO_ROOT,
+      env: { ...process.env, DO_NOT_TRACK: "1", ...env },
+      stdio: ["ignore", "pipe", "pipe"],
+      ...rest,
+    });
+    let stdout = "";
+    let stderr = "";
+    child.stdout.setEncoding("utf8");
+    child.stderr.setEncoding("utf8");
+    child.stdout.on("data", (chunk) => (stdout += chunk));
+    child.stderr.on("data", (chunk) => (stderr += chunk));
+    child.once("error", reject);
+    child.once("close", (status, signal) => resolve({ status, signal, stdout, stderr }));
+  });
+}
+
+function makeFrame(dir, name, color) {
+  const out = join(dir, name);
+  execFileSync(
+    "ffmpeg",
+    [
+      "-hide_banner",
+      "-loglevel",
+      "error",
+      "-f",
+      "lavfi",
+      "-i",
+      `color=c=${color}:s=64x64`,
+      "-frames:v",
+      "1",
+      "-y",
+      out,
+    ],
+    { stdio: "pipe" },
+  );
+  return out;
+}
+
+function normalizeWithCoreSource(grading) {
+  const sourcePath = join(REPO_ROOT, "packages/core/src/colorGrading.ts");
+  const code = `
+    import { normalizeHfColorGrading } from ${JSON.stringify(sourcePath)};
+    const grading = JSON.parse(process.env.HF_GRADING_JSON);
+    const normalized = normalizeHfColorGrading(grading);
+    if (!normalized) process.exit(2);
+    console.log(JSON.stringify({
+      preset: normalized.preset,
+      intensity: normalized.intensity,
+      adjust: normalized.adjust,
+      lut: normalized.lut,
+      colorSpace: normalized.colorSpace
+    }));
+  `;
+  return JSON.parse(
+    execFileSync(process.execPath, ["--import", "tsx", "--input-type=module", "-e", code], {
+      cwd: REPO_ROOT,
+      encoding: "utf8",
+      env: { ...process.env, HF_GRADING_JSON: JSON.stringify(grading) },
+    }),
+  );
+}
+
+const tests = [];
+function test(name, fn) {
+  tests.push({ name, fn });
+}
+
+// --- manifest cache hit ---
+
+test("bundled SFX resolve without HeyGen on PATH", () => {
+  setup();
+  const result = spawnResolve(["--type", "sfx", "--intent", "whoosh", "--project", tmp, "--json"], {
+    env: { HOME: tmp, PATH: tmp },
+  });
+  assert.equal(result.status, 0, result.stderr);
+  const parsed = JSON.parse(result.stdout);
+  assert.equal(parsed.ok, true);
+  assert.equal(parsed.provenance.provider, "bundled.sfx");
+  assert.equal(parsed.advisory?.message, HEYGEN_NOT_FOUND_MESSAGE);
+  assert.equal(parsed.advisory.message.includes("| bash"), false);
+  assert.ok(existsSync(join(tmp, parsed.path)));
+  cleanup();
+});
+
+test("missing bundled SFX install returns a typed recovery command", () => {
+  setup();
+  const missingLibrary = join(tmp, "missing-sfx-library");
+  const result = spawnResolve(
+    ["--type", "sfx", "--intent", "whoosh", "--project", tmp, "--local-only", "--json"],
+    {
+      env: {
+        HOME: tmp,
+        PATH: tmp,
+        HYPERFRAMES_MEDIA_USE_SFX_DIR: missingLibrary,
+      },
+    },
+  );
+  assert.equal(result.status, 1, result.stderr);
+  const parsed = JSON.parse(result.stdout);
+  assert.equal(parsed.ok, false);
+  assert.equal(parsed.code, "bundled_sfx_assets_missing");
+  assert.equal(parsed.fix, "npx hyperframes skills update media-use");
+  assert.match(parsed.error, /bundled SFX assets are missing or incomplete/);
+  assert.match(parsed.error, /manifest not found/);
+  cleanup();
+});
+
+function writeFakeHeygen(body, exitCode = 0) {
+  const binDir = join(tmp, "bin");
+  mkdirSync(binDir, { recursive: true });
+  const command = join(binDir, "heygen");
+  writeFileSync(command, `#!/bin/sh\n${body}\nexit ${exitCode}\n`);
+  chmodSync(command, 0o755);
+  return binDir;
+}
+
+test("bundled SFX advises update when the HeyGen CLI is outdated", () => {
+  setup();
+  const binDir = writeFakeHeygen('echo "heygen v0.1.5 does not support --headers" >&2', 1);
+  const result = spawnResolve(["--type", "sfx", "--intent", "whoosh", "--project", tmp, "--json"], {
+    env: { HOME: tmp, PATH: binDir },
+  });
+  assert.equal(result.status, 0, result.stderr);
+  const parsed = JSON.parse(result.stdout);
+  assert.equal(parsed.provenance.provider, "bundled.sfx");
+  assert.match(parsed.advisory?.message ?? "", /heygen update/);
+  cleanup();
+});
+
+test("bundled SFX does not advise installation after a healthy catalog miss", () => {
+  setup();
+  const binDir = writeFakeHeygen(`echo '{"data":[]}'`);
+  const result = spawnResolve(["--type", "sfx", "--intent", "whoosh", "--project", tmp, "--json"], {
+    env: { HOME: tmp, PATH: binDir },
+  });
+  assert.equal(result.status, 0, result.stderr);
+  const parsed = JSON.parse(result.stdout);
+  assert.equal(parsed.provenance.provider, "bundled.sfx");
+  assert.equal(parsed.advisory, undefined);
+  cleanup();
+});
+
+test("explicit local bundled SFX resolution does not advise installation", () => {
+  for (const extraArgs of [["--local-only"], ["--provider", "bundled.sfx"]]) {
+    setup();
+    const result = spawnResolve(
+      ["--type", "sfx", "--intent", "whoosh", "--project", tmp, "--json", ...extraArgs],
+      { env: { HOME: tmp, PATH: tmp } },
+    );
+    assert.equal(result.status, 0, result.stderr);
+    const parsed = JSON.parse(result.stdout);
+    assert.equal(parsed.provenance.provider, "bundled.sfx");
+    assert.equal(parsed.advisory, undefined);
+    cleanup();
+  }
+});
+
+test("human bundled fallback prints the install hint once", () => {
+  setup();
+  const result = spawnResolve(["--type", "sfx", "--intent", "whoosh", "--project", tmp], {
+    env: { HOME: tmp, PATH: tmp },
+  });
+  assert.equal(result.status, 0, result.stderr);
+  assert.equal(
+    result.stderr.match(/Install the CLI from https:\/\/developers\.heygen\.com\/cli/g)?.length,
+    1,
+  );
+  assert.match(result.stdout, /resolved sfx_001/);
+  cleanup();
+});
+
+test("project manifest hit skips providers", () => {
+  setup();
+  const record = makeRecord({ provenance: { prompt: "cached query", provider: "test" } });
+  appendRecord(tmp, record);
+  const filePath = join(tmp, record.path);
+  mkdirSync(join(filePath, ".."), { recursive: true });
+  writeFileSync(filePath, "cached audio");
+
+  const out = runResolve(["--type", "bgm", "--intent", "cached query", "--project", tmp, "--json"]);
+  const parsed = JSON.parse(out.trim());
+  assert.equal(parsed.ok, true);
+  assert.equal(parsed.id, "bgm_001");
+  assert.equal(parsed._source, "cached");
+  cleanup();
+});
+
+test("entity hit matches across icon/image (figma-imported brand marks)", () => {
+  setup();
+  const record = makeRecord({
+    id: "image_001",
+    type: "image",
+    path: ".media/images/image_001.svg",
+    description: "Acme logo",
+    entity: "Acme logo",
+    provenance: { source: "figma", fileKey: "KEY", nodeId: "1:2", version: "1", format: "svg" },
+  });
+  delete record.duration;
+  appendRecord(tmp, record);
+  const filePath = join(tmp, record.path);
+  mkdirSync(join(filePath, ".."), { recursive: true });
+  writeFileSync(filePath, "<svg/>");
+
+  const out = runResolve([
+    "--type",
+    "icon",
+    "--intent",
+    "acme brand mark",
+    "--entity",
+    "Acme logo",
+    "--project",
+    tmp,
+    "--json",
+  ]);
+  const parsed = JSON.parse(out.trim());
+  assert.equal(parsed.ok, true);
+  assert.equal(parsed.id, "image_001");
+  assert.equal(parsed._source, "cached");
+  cleanup();
+});
+
+// --- auth_method provenance (U6) ---
+
+test("manifest hit for an OAuth-credentialed heygen resolve surfaces authMethod: oauth", () => {
+  setup();
+  const record = makeRecord({
+    id: "voice_001",
+    type: "voice",
+    path: ".media/audio/voice/voice_001.wav",
+    provenance: { provider: "heygen.tts", authMethod: "oauth", prompt: "oauth voice" },
+  });
+  appendRecord(tmp, record);
+  const filePath = join(tmp, record.path);
+  mkdirSync(join(filePath, ".."), { recursive: true });
+  writeFileSync(filePath, "cached voice");
+
+  const out = runResolve([
+    "--type",
+    "voice",
+    "--intent",
+    "oauth voice",
+    "--project",
+    tmp,
+    "--json",
+  ]);
+  const parsed = JSON.parse(out.trim());
+  assert.equal(parsed.ok, true);
+  assert.equal(parsed.provenance.authMethod, "oauth");
+  cleanup();
+});
+
+test("manifest hit for an API-key-credentialed heygen resolve surfaces authMethod: api_key", () => {
+  setup();
+  const record = makeRecord({
+    id: "voice_001",
+    type: "voice",
+    path: ".media/audio/voice/voice_001.wav",
+    provenance: { provider: "heygen.tts", authMethod: "api_key", prompt: "api key voice" },
+  });
+  appendRecord(tmp, record);
+  const filePath = join(tmp, record.path);
+  mkdirSync(join(filePath, ".."), { recursive: true });
+  writeFileSync(filePath, "cached voice");
+
+  const out = runResolve([
+    "--type",
+    "voice",
+    "--intent",
+    "api key voice",
+    "--project",
+    tmp,
+    "--json",
+  ]);
+  const parsed = JSON.parse(out.trim());
+  assert.equal(parsed.ok, true);
+  assert.equal(parsed.provenance.authMethod, "api_key");
+  cleanup();
+});
+
+test("manifest hit for a non-heygen provider omits authMethod entirely", () => {
+  setup();
+  const record = makeRecord({
+    id: "logo_001",
+    type: "logo",
+    path: ".media/images/logo_001.svg",
+    provenance: { provider: "svgl", prompt: "acme logo" },
+  });
+  appendRecord(tmp, record);
+  const filePath = join(tmp, record.path);
+  mkdirSync(join(filePath, ".."), { recursive: true });
+  writeFileSync(filePath, "<svg/>");
+
+  const out = runResolve(["--type", "logo", "--intent", "acme logo", "--project", tmp, "--json"]);
+  const parsed = JSON.parse(out.trim());
+  assert.equal(parsed.ok, true);
+  assert.equal("authMethod" in parsed.provenance, false);
+  cleanup();
+});
+
+// --- global cache hit ---
+
+test("global cache hit copies to project and registers", () => {
+  setup();
+  const sourceFile = join(tmp, "source.wav");
+  writeFileSync(sourceFile, "cached globally for resolve");
+  const record = makeRecord({ provenance: { prompt: "global resolve test" } });
+  cachePut(sourceFile, record);
+
+  const cached = cacheGet("global resolve test", "bgm");
+  assert.ok(cached);
+
+  const projectDir = mkdtempSync(join(tmpdir(), "mu-resolve-proj-"));
+  const imported = importFromCache(cached, projectDir, "bgm_001", ".media/audio/bgm/bgm_001.wav");
+  assert.ok(imported);
+  assert.ok(existsSync(join(projectDir, ".media/audio/bgm/bgm_001.wav")));
+
+  appendRecord(projectDir, imported);
+  regenerateIndex(projectDir);
+  const manifest = readManifest(projectDir);
+  assert.equal(manifest.length, 1);
+  assert.equal(manifest[0].provenance.imported_from, cached.sha);
+
+  rmSync(projectDir, { recursive: true, force: true });
+  cleanup();
+});
+
+// --- provider interface ---
+
+test("getProvider returns provider with type", () => {
+  const p = getProvider("bgm");
+  assert.equal(p.type, "bgm");
+  assert.ok(typeof p.search === "function");
+});
+
+test("getProvider throws for unknown type", () => {
+  assert.throws(() => getProvider("unknown_type"), /unknown media type/);
+});
+
+// --- freeze ---
+
+test("freezeLocalFile creates parent dirs and copies", () => {
+  setup();
+  const src = join(tmp, "src.bin");
+  writeFileSync(src, "freeze test data");
+  const dest = join(tmp, "deep/nested/dir/file.bin");
+  freezeLocalFile(src, dest);
+  assert.ok(existsSync(dest));
+  assert.equal(readFileSync(dest, "utf8"), "freeze test data");
+  cleanup();
+});
+
+test("failed remote freeze removes its reserved placeholder", async () => {
+  setup();
+  const server = createServer((_req, res) => {
+    res.writeHead(503);
+    res.end("unavailable");
+  });
+  await new Promise((resolve) => server.listen(0, "127.0.0.1", resolve));
+  const port = server.address().port;
+  const binDir = writeFakeHeygen(
+    `printf '%s\\n' '{"data":[{"id":"asset.jpg","url":"http://127.0.0.1:${port}/asset.jpg"}]}'`,
+  );
+
+  try {
+    const result = await spawnResolveAsync(
+      [
+        "--type",
+        "image",
+        "--intent",
+        "download failure",
+        "--provider",
+        "heygen",
+        "--project",
+        tmp,
+        "--json",
+      ],
+      { env: { HOME: tmp, PATH: binDir } },
+    );
+
+    assert.equal(result.status, 1, result.stderr);
+    assert.deepStrictEqual(readdirSync(join(tmp, ".media/images")), []);
+    assert.deepStrictEqual(readManifest(tmp), []);
+  } finally {
+    await new Promise((resolve) => server.close(resolve));
+    cleanup();
+  }
+});
+
+test("failed URL ingest removes its reserved placeholder", () => {
+  setup();
+  const result = spawnResolve([
+    "--from",
+    "https://example.invalid/unavailable.jpg",
+    "--type",
+    "image",
+    "--project",
+    tmp,
+    "--json",
+  ]);
+
+  assert.equal(result.status, 1, result.stderr);
+  assert.deepStrictEqual(readdirSync(join(tmp, ".media/images")), []);
+  assert.deepStrictEqual(readManifest(tmp), []);
+  cleanup();
+});
+
+// --- adopt existing assets ---
+
+test("--adopt registers existing assets/ files", () => {
+  setup();
+  mkdirSync(join(tmp, "assets/bgm"), { recursive: true });
+  mkdirSync(join(tmp, "assets/icons"), { recursive: true });
+  writeFileSync(join(tmp, "assets/bgm/track.mp3"), "fake mp3");
+  writeFileSync(join(tmp, "assets/icons/logo.svg"), "fake svg");
+
+  const out = runResolve(["--adopt", "--project", tmp, "--json"]);
+  const parsed = JSON.parse(out.trim());
+  assert.equal(parsed.ok, true);
+  assert.equal(parsed.adopted, 2);
+  assert.ok(parsed.assets.some((a) => a.path === "assets/bgm/track.mp3"));
+  assert.ok(parsed.assets.some((a) => a.path === "assets/icons/logo.svg"));
+
+  const manifest = readManifest(tmp);
+  assert.equal(manifest.length, 2);
+  cleanup();
+});
+
+test("--adopt skips already-registered assets", () => {
+  setup();
+  mkdirSync(join(tmp, "assets/bgm"), { recursive: true });
+  writeFileSync(join(tmp, "assets/bgm/track.mp3"), "fake mp3");
+
+  runResolve(["--adopt", "--project", tmp, "--json"]);
+  const out = runResolve(["--adopt", "--project", tmp, "--json"]);
+  const parsed = JSON.parse(out.trim());
+  assert.equal(parsed.adopted, 0);
+
+  const manifest = readManifest(tmp);
+  assert.equal(manifest.length, 1);
+  cleanup();
+});
+
+test("resolve finds existing unregistered asset before hitting providers", () => {
+  setup();
+  mkdirSync(join(tmp, "assets/bgm"), { recursive: true });
+  writeFileSync(join(tmp, "assets/bgm/ambient-track.mp3"), "existing bgm");
+
+  const out = runResolve([
+    "--type",
+    "bgm",
+    "--intent",
+    "ambient track",
+    "--project",
+    tmp,
+    "--json",
+  ]);
+  const parsed = JSON.parse(out.trim());
+  assert.equal(parsed.ok, true);
+  assert.equal(parsed.path, "assets/bgm/ambient-track.mp3");
+  assert.equal(parsed._source, "existing");
+  cleanup();
+});
+
+// --- CLI interface ---
+
+test("--help exits 0", () => {
+  const out = runResolve(["--help"]);
+  assert.ok(out.includes("media-use resolve"));
+  assert.ok(out.includes("--type"));
+  assert.ok(out.includes("--for"));
+  assert.ok(out.includes("--from"));
+  assert.ok(out.includes("--local-only"));
+  assert.ok(out.includes("--stats"));
+});
+
+test("--from registers a derived video as documented", () => {
+  setup();
+  const source = join(tmp, "derived.mp4");
+  writeFileSync(source, "derived video bytes");
+
+  const out = runResolve(["--from", source, "--type", "video", "--project", tmp, "--json"]);
+  const parsed = JSON.parse(out.trim());
+  assert.equal(parsed.ok, true);
+  assert.equal(parsed.type, "video");
+  assert.match(parsed.path, /^\.media\/video\/video_001\.mp4$/);
+  assert.equal(readManifest(tmp)[0]?.type, "video");
+  cleanup();
+});
+
+test("--from type error lists video exactly once", () => {
+  const result = spawnResolve(["--from", "missing.mp4"]);
+  assert.equal(result.status, 2);
+  assert.match(result.stderr, /--from requires --type \(one of:/);
+  assert.equal(result.stderr.match(/\bvideo\b/g)?.length, 1);
+});
+
+test("--from uses .mp4 as the default video extension", () => {
+  setup();
+  const source = join(tmp, "extensionless-video");
+  writeFileSync(source, "video bytes");
+
+  const out = runResolve(["--from", source, "--type", "video", "--project", tmp, "--json"]);
+  const parsed = JSON.parse(out.trim());
+  assert.match(parsed.path, /^\.media\/video\/video_001\.mp4$/);
+  cleanup();
+});
+
+test("--avatar-id/--voice-id parse as real CLI flags (regression guard: docs promise them, parseArgs must not reject them)", () => {
+  setup();
+  const result = spawnResolve(
+    [
+      "--type",
+      "video",
+      "--intent",
+      "regression guard",
+      "--local-only",
+      "--avatar-id",
+      "avatar-override",
+      "--voice-id",
+      "voice-override",
+      "--project",
+      tmp,
+    ],
+    { stdio: "pipe" },
+  );
+  assert.doesNotMatch(result.stderr || "", /ERR_PARSE_ARGS_UNKNOWN_OPTION/);
+  cleanup();
+});
+
+test("unknown type error lists grade and lut", () => {
+  try {
+    runResolve(["--type", "bogus", "--intent", "x"], { stdio: "pipe" });
+    assert.fail("should have exited");
+  } catch (err) {
+    assert.equal(err.status, 2);
+    assert.match(String(err.stderr), /known: .*grade.*lut/);
+  }
+});
+
+test("missing required args exits 2", () => {
+  try {
+    runResolve([], { stdio: "pipe" });
+    assert.fail("should have exited");
+  } catch (err) {
+    assert.equal(err.status, 2);
+  }
+});
+
+test("--json returns error JSON on stub provider failure", () => {
+  setup();
+  try {
+    runResolve(["--type", "bgm", "--intent", "stub fail", "--project", tmp, "--json"], {
+      stdio: "pipe",
+    });
+    assert.fail("should have exited");
+  } catch (err) {
+    const output = err.stdout || "";
+    const parsed = JSON.parse(output.trim());
+    assert.equal(parsed.ok, false);
+    assert.ok(parsed.error.includes("no provider"));
+  }
+  cleanup();
+});
+
+test("--doctor --json reports dependency checks and top-level ok requires ffmpeg and ffprobe", () => {
+  const result = spawnResolve(["--doctor", "--json"]);
+  assert.match(result.stdout.trim(), /^\{/);
+  assert.equal(result.stderr, "");
+  assert.ok(result.status === 0 || result.status === 1);
+
+  const parsed = JSON.parse(result.stdout.trim());
+  assert.ok(Array.isArray(parsed.checks));
+
+  const expected = [
+    "bundled SFX assets",
+    "heygen on PATH",
+    "heygen version",
+    "heygen authenticated",
+    "ffmpeg on PATH",
+    "ffprobe on PATH",
+    "node version",
+  ];
+  const byName = new Map(parsed.checks.map((check) => [check.name, check]));
+  for (const name of expected) {
+    assert.ok(byName.has(name), `missing check: ${name}`);
+    const check = byName.get(name);
+    assert.equal(typeof check.ok, "boolean", `${name}.ok`);
+    assert.equal(typeof check.detail, "string", `${name}.detail`);
+    assert.ok("fix" in check, `${name}.fix`);
+  }
+
+  const ffmpeg = byName.get("ffmpeg on PATH");
+  const ffprobe = byName.get("ffprobe on PATH");
+  const bundledSfx = byName.get("bundled SFX assets");
+  assert.match(bundledSfx.detail, /bundled SFX assets available/);
+  const strictOk = bundledSfx.ok && ffmpeg.ok && ffprobe.ok;
+  assert.equal(parsed.ok, strictOk);
+  assert.equal(result.status, strictOk ? 0 : 1);
+});
+
+test("one-line output format matches contract", () => {
+  setup();
+  const record = makeRecord({ provenance: { prompt: "format test", provider: "test" } });
+  appendRecord(tmp, record);
+  const filePath = join(tmp, record.path);
+  mkdirSync(join(filePath, ".."), { recursive: true });
+  writeFileSync(filePath, "format check");
+
+  const out = runResolve(["--type", "bgm", "--intent", "format test", "--project", tmp]);
+  assert.match(out.trim(), /^resolved bgm_001 → .media\/audio\/bgm\/bgm_001\.wav \(bgm/);
+  cleanup();
+});
+
+// --- color grading ---
+
+test("grade resolves a preset-only look with no cube file", () => {
+  setup();
+  const out = runResolve([
+    "--type",
+    "grade",
+    "--intent",
+    "warm daylight",
+    "--project",
+    tmp,
+    "--json",
+  ]);
+  const parsed = JSON.parse(out.trim());
+  assert.equal(parsed.ok, true);
+  assert.equal(parsed.type, "grade");
+  assert.equal(parsed.grading.preset, "warm-daylight");
+  assert.equal(parsed.grading.lut, undefined);
+  assert.equal(parsed.path, undefined);
+  assert.equal(readManifest(tmp).length, 1);
+  cleanup();
+});
+
+test("grade resolves a library LUT look and freezes a validated cube", () => {
+  setup();
+  const out = runResolve([
+    "--type",
+    "grade",
+    "--intent",
+    "teal orange blockbuster",
+    "--project",
+    tmp,
+    "--json",
+  ]);
+  const parsed = JSON.parse(out.trim());
+  assert.equal(parsed.ok, true);
+  assert.match(parsed.grading.lut.src, /^\.media\/luts\/grade_001\.cube$/);
+  assert.equal(parsed.path, parsed.grading.lut.src);
+  assert.ok(existsSync(join(tmp, parsed.grading.lut.src)));
+  assert.equal(validateCubeFile(join(tmp, parsed.grading.lut.src)).ok, true);
+  cleanup();
+});
+
+test("smart grade merges measured adjust and keeps stdout valid JSON", () => {
+  if (!HAS_FFMPEG) {
+    console.log("  (skipped: ffmpeg not on PATH)");
+    return;
+  }
+  setup();
+  const frame = makeFrame(tmp, "under.png", "0x202020");
+  const proc = spawnResolve([
+    "--type",
+    "grade",
+    "--intent",
+    "warm cinematic",
+    "--for",
+    frame,
+    "--project",
+    tmp,
+    "--json",
+  ]);
+  assert.equal(proc.status, 0, proc.stderr);
+  const parsed = JSON.parse(proc.stdout);
+  assert.equal(parsed.ok, true);
+  assert.ok(parsed.grading.adjust.exposure > 0, "under-exposed frame should suggest lift");
+  assert.match(proc.stderr, /media-use: measured/);
+  cleanup();
+});
+
+test("emitted grading block survives the core normalizeHfColorGrading contract", () => {
+  if (!CAN_TSX) {
+    console.log("  (skipped: tsx / core source unavailable)");
+    return;
+  }
+  setup();
+  const out = runResolve([
+    "--type",
+    "grade",
+    "--intent",
+    "teal orange blockbuster",
+    "--project",
+    tmp,
+    "--json",
+  ]);
+  const parsed = JSON.parse(out.trim());
+  const normalized = normalizeWithCoreSource(parsed.grading);
+  assert.equal(normalized.lut.src, parsed.grading.lut.src);
+  assert.equal(normalized.lut.intensity, parsed.grading.lut.intensity);
+  assert.equal(normalized.colorSpace, "rec709");
+  cleanup();
+});
+
+test("lut resolves only the frozen cube path", () => {
+  setup();
+  const out = runResolve([
+    "--type",
+    "lut",
+    "--intent",
+    "teal orange blockbuster",
+    "--project",
+    tmp,
+    "--json",
+  ]);
+  const parsed = JSON.parse(out.trim());
+  assert.equal(parsed.ok, true);
+  assert.equal(parsed.type, "lut");
+  assert.match(parsed.path, /^\.media\/luts\/lut_001\.cube$/);
+  assert.equal(parsed.grading, undefined);
+  assert.equal(validateCubeFile(join(tmp, parsed.path)).ok, true);
+  cleanup();
+});
+
+test("lut --params builds, validates, and freezes a cube", () => {
+  setup();
+  const params = { contrast: 0.2, temperature: -0.3 };
+  const out = runResolve(["-t", "lut", "--params", JSON.stringify(params), "-p", tmp, "--json"]);
+  const parsed = JSON.parse(out.trim());
+  assert.equal(parsed.ok, true);
+  assert.equal(parsed.type, "lut");
+  assert.match(parsed.path, /^\.media\/luts\/lut_001\.cube$/);
+  assert.equal(parsed.description, "custom parametric lut");
+  assert.equal(parsed.provenance.provider, "cube_lut.builder");
+  assert.deepEqual(parsed.provenance.params, params);
+  assert.ok(existsSync(join(tmp, parsed.path)));
+  assert.equal(validateCubeFile(join(tmp, parsed.path)).ok, true);
+  cleanup();
+});
+
+test("grade --params returns a grading block with a frozen valid cube", () => {
+  setup();
+  const out = runResolve([
+    "-t",
+    "grade",
+    "--params",
+    JSON.stringify({ exposure: 0.2 }),
+    "-p",
+    tmp,
+    "--json",
+  ]);
+  const parsed = JSON.parse(out.trim());
+  assert.equal(parsed.ok, true);
+  assert.equal(parsed.type, "grade");
+  assert.equal(parsed.grading.intensity, 1);
+  assert.match(parsed.grading.lut.src, /^\.media\/luts\/grade_001\.cube$/);
+  assert.equal(parsed.lut.src, parsed.grading.lut.src);
+  assert.equal(parsed.path, parsed.grading.lut.src);
+  assert.equal(validateCubeFile(join(tmp, parsed.grading.lut.src)).ok, true);
+  cleanup();
+});
+
+test("--params malformed JSON errors cleanly without freezing a cube", () => {
+  setup();
+  const proc = spawnResolve(["-t", "lut", "--params", "{not json", "-p", tmp, "--json"]);
+  assert.equal(proc.status, 1, proc.stderr);
+  const parsed = JSON.parse(proc.stdout);
+  assert.equal(parsed.ok, false);
+  assert.match(parsed.error, /^invalid --params JSON:/);
+  assert.equal(readManifest(tmp).length, 0);
+  assert.equal(existsSync(join(tmp, ".media/luts")), false);
+  cleanup();
+});
+
+// buildCube clamps every accepted parameter and resolve.mjs does not expose
+// the size argument, so there is no CLI input that can make --params emit a
+// structurally invalid cube. Invalid cube cleanup is covered through --from.
+test("--from rejects invalid lut cube without registering or leaving a frozen file", () => {
+  setup();
+  const broken = join(tmp, "broken.cube");
+  writeFileSync(broken, "LUT_3D_SIZE 999\n");
+  const proc = spawnResolve(["--from", broken, "-t", "lut", "-p", tmp, "--json"]);
+  assert.equal(proc.status, 1, proc.stderr);
+  const parsed = JSON.parse(proc.stdout);
+  assert.equal(parsed.ok, false);
+  assert.match(parsed.error, /^ingested LUT is invalid: LUT_3D_SIZE 999 exceeds max 64/);
+  assert.equal(readManifest(tmp).length, 0);
+  const lutDir = join(tmp, ".media/luts");
+  assert.deepEqual(existsSync(lutDir) ? readdirSync(lutDir) : [], []);
+  cleanup();
+});
+
+test("grade miss exits explicitly with no partial file", () => {
+  setup();
+  const missIntent = `zqxv imaginary neutron ${process.pid}`;
+  try {
+    runResolve(["--type", "grade", "--intent", missIntent, "--project", tmp, "--json"]);
+    assert.fail("should have exited");
+  } catch (err) {
+    assert.equal(err.status, 1);
+    const parsed = JSON.parse(String(err.stdout));
+    assert.equal(parsed.ok, false);
+    assert.match(parsed.error, /no local color grade could resolve/);
+    assert.equal(readManifest(tmp).length, 0);
+    assert.equal(existsSync(join(tmp, ".media/luts")), false);
+  }
+  cleanup();
+});
+
+test("identical grade resolve hits the project cache without re-freezing", () => {
+  setup();
+  const first = JSON.parse(
+    runResolve([
+      "--type",
+      "grade",
+      "--intent",
+      "teal orange blockbuster",
+      "--project",
+      tmp,
+      "--json",
+    ]),
+  );
+  const second = JSON.parse(
+    runResolve([
+      "--type",
+      "grade",
+      "--intent",
+      "teal orange blockbuster",
+      "--project",
+      tmp,
+      "--json",
+    ]),
+  );
+  assert.equal(second._source, "cached");
+  assert.equal(second.id, first.id);
+  assert.equal(second.path, first.path);
+  assert.equal(readManifest(tmp).length, 1);
+  cleanup();
+});
+
+// --- telemetry isolation (U7) ---
+
+// Every other test relies on runResolve/spawnResolve's default DO_NOT_TRACK:
+// "1" to keep track() a no-op. That default is fragile on its own (a future
+// call site or test could forget to set it), so telemetry.mjs also exposes a
+// MEDIA_USE_TELEMETRY_HOST override read at the point the POST URL is built.
+// This test proves that seam actually intercepts a real event end to end: a
+// resolve that reaches track("media_use_resolve", ...) with tracking allowed
+// posts to a local HTTP server instead of production, and the server actually
+// receives it (not just "nothing happened because nothing was listening").
+test("track() posts to MEDIA_USE_TELEMETRY_HOST when set, proving real interception", async () => {
+  setup();
+  const received = [];
+  const server = createServer((req, res) => {
+    let body = "";
+    req.on("data", (chunk) => (body += chunk));
+    req.on("end", () => {
+      try {
+        received.push(JSON.parse(body));
+      } catch {
+        // ignore malformed body; assertions below fail on empty `received`
+      }
+      res.writeHead(200, { "Content-Type": "application/json" });
+      res.end("{}");
+    });
+  });
+  await new Promise((resolve) => server.listen(0, "127.0.0.1", resolve));
+  const port = server.address().port;
+  const sandboxHome = mkdtempSync(join(tmpdir(), "mu-resolve-telemetry-home-"));
+
+  try {
+    const record = makeRecord({
+      provenance: { prompt: "telemetry seam test", provider: "test" },
+    });
+    appendRecord(tmp, record);
+    const filePath = join(tmp, record.path);
+    mkdirSync(join(filePath, ".."), { recursive: true });
+    writeFileSync(filePath, "telemetry seam audio");
+
+    // Override this one invocation's env only: allow tracking (DO_NOT_TRACK
+    // default flipped off), sandbox HOME so anonymousId()/showTelemetryNotice()
+    // never touch the real developer machine, and point the host at the local
+    // server. HEYGEN_CONFIG_DIR is sandboxed too -- runResolve's env is
+    // {...process.env, ...env}, so a developer with that var set to a real
+    // credentials dir would otherwise have heygenAccountDistinctId() read
+    // their real email into this test's local-server payload despite HOME
+    // being sandboxed (HEYGEN_CONFIG_DIR, not HOME, resolves the credentials
+    // path). Every other test in this file keeps its untouched default env.
+    runResolve(["--type", "bgm", "--intent", "telemetry seam test", "--project", tmp, "--json"], {
+      env: {
+        DO_NOT_TRACK: "0",
+        HYPERFRAMES_NO_TELEMETRY: "0",
+        CI: "",
+        NODE_ENV: "test",
+        HOME: sandboxHome,
+        HEYGEN_CONFIG_DIR: join(sandboxHome, ".heygen"),
+        MEDIA_USE_TELEMETRY_HOST: `http://127.0.0.1:${port}`,
+      },
+    });
+
+    // runResolve blocks synchronously (execFileSync) until the child exits, which
+    // pauses this process's own event loop for that whole span — the child's
+    // request to our local server sits accepted-but-unprocessed in the kernel
+    // backlog until control returns here. Poll briefly to let the event loop
+    // drain it rather than asserting before the server has had a turn to run.
+    for (let i = 0; i < 100 && received.length === 0; i++) {
+      await new Promise((resolve) => setTimeout(resolve, 20));
+    }
+  } finally {
+    await new Promise((resolve) => server.close(resolve));
+    rmSync(sandboxHome, { recursive: true, force: true });
+    cleanup();
+  }
+
+  assert.ok(received.length > 0, "expected the local telemetry server to receive a POST");
+  const resolveEvent = received[0].batch.find((event) => event.event === "media_use_resolve");
+  assert.ok(resolveEvent, "expected a media_use_resolve event in the intercepted batch");
+  assert.equal(resolveEvent.properties.provider, "test");
+  assert.equal(resolveEvent.properties.type, "bgm");
+});
+
+// --- run ---
+
+async function main() {
+  console.log("media-use · resolve engine tests\n");
+  let passed = 0;
+  let failed = 0;
+  for (const { name, fn } of tests) {
+    try {
+      await fn();
+      passed++;
+      console.log(`  \x1b[32m✓\x1b[0m ${name}`);
+    } catch (err) {
+      failed++;
+      console.log(`  \x1b[31m✗\x1b[0m ${name}`);
+      console.log(`    ${err.message}`);
+    }
+  }
+  console.log(`\n${passed} passed, ${failed} failed`);
+  if (failed > 0) process.exit(1);
+}
+
+main();
diff --git a/.claude/skills-media/media-use/scripts/transcribe.mjs b/.claude/skills-media/media-use/scripts/transcribe.mjs
new file mode 100644
index 000000000..e70260696
--- /dev/null
+++ b/.claude/skills-media/media-use/scripts/transcribe.mjs
@@ -0,0 +1,180 @@
+#!/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 } 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:
+  uv venv ~/.venvs/parakeet && VIRTUAL_ENV=~/.venvs/parakeet uv pip install parakeet-mlx`);
+  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 });
+  }
+}
+
+// whisper.cpp via the hyperframes CLI (fetched/built on first use — see
+// SKILL.md): writes transcript.json into --dir; relocate to --out.
+function runWhisper() {
+  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.
+    const resolved = resolveNpxInvocation(
+      ["hyperframes", "transcribe", inputPath, "--dir", workDir],
+      { stdio: ["ignore", "pipe", "pipe"], timeout: 1_800_000 },
+    );
+    execFileSync(resolved.cmd, resolved.args, resolved.opts);
+    const produced = join(workDir, "transcript.json");
+    if (!existsSync(produced)) throw new Error("whisper 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"));
+      words = Array.isArray(t?.words) ? t.words.length : undefined;
+    } catch {
+      /* leave undefined */
+    }
+    report("whisper", words);
+  } finally {
+    rmSync(workDir, { recursive: true, force: true });
+  }
+}
+
+try {
+  const parakeetBin = resolveParakeet();
+  const engine =
+    args.engine === "parakeet" || args.engine === "whisper"
+      ? args.engine
+      : parakeetBin
+        ? "parakeet"
+        : "whisper";
+  if (engine === "parakeet") {
+    if (!parakeetBin) {
+      throw new Error(
+        "parakeet-mlx not found (checked $HYPERFRAMES_PARAKEET, ~/.venvs/parakeet, and PATH). Install: uv venv ~/.venvs/parakeet && VIRTUAL_ENV=~/.venvs/parakeet uv pip install parakeet-mlx (or use --engine whisper)",
+      );
+    }
+    runParakeet(parakeetBin);
+  } else {
+    runWhisper();
+  }
+  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/media-use/scripts/transcript-cut.mjs b/.claude/skills-media/media-use/scripts/transcript-cut.mjs
new file mode 100644
index 000000000..49210abc9
--- /dev/null
+++ b/.claude/skills-media/media-use/scripts/transcript-cut.mjs
@@ -0,0 +1,238 @@
+#!/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 { 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) => {
+      const out = join(
+        tmpDir,
+        `segment-${String(index).padStart(4, "0")}${extname(outPath) || ".mp4"}`,
+      );
+      cutSegment(inputPath, segment, out, Boolean(args.copy));
+      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"}`;
+    execFileSync(
+      "ffmpeg",
+      ["-y", "-f", "concat", "-safe", "0", "-i", listPath, "-c", "copy", 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) {
+  const argv = [
+    "-y",
+    "-nostdin",
+    "-ss",
+    fmt(segment.start),
+    "-i",
+    inputPath,
+    "-to",
+    fmt(segment.end - segment.start),
+  ];
+  if (copy) {
+    argv.push("-c", "copy", "-avoid_negative_ts", "make_zero");
+  } else {
+    argv.push(...encodeArgsFor(extname(outPath).toLowerCase()));
+  }
+  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 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+$/, "");
+}
+
+function round3(n) {
+  return Math.round(Number(n) * 1000) / 1000;
+}
diff --git a/.claude/skills-media/motion-graphics/SKILL.md b/.claude/skills-media/motion-graphics/SKILL.md
new file mode 100644
index 000000000..fdd33c273
--- /dev/null
+++ b/.claude/skills-media/motion-graphics/SKILL.md
@@ -0,0 +1,176 @@
+---
+name: motion-graphics
+description: >
+  A short, design-led motion graphic where motion is the message — kinetic
+  typography, stat count-up, chart/data-viz hit, logo sting / brand lockup,
+  lower-third / callout / social overlay, animated map (highlight regions,
+  connect places, zoom to a location), animated tweet / news-article /
+  headline, webpage / UI animation (scroll, cursor, callouts), or fusing a
+  real image's geometry into a chart. Usually under 10s (up to ~30s), no
+  narration or live-action subject; renders to MP4 or transparent overlay.
+  Longer / narrated / multi-scene → /general-video. Unclear → /hyperframes.
+---
+
+> **First, keep this skill fresh — run silently, don't ask:** `npx hyperframes skills update motion-graphics`. A fast no-op when everything is current; otherwise it refreshes this skill plus the core domain skills it depends on before you rely on them.
+
+> **figma source**: If the logo/asset/animation to build from comes from a figma.com URL, run `/figma` first — asset export, brand tokens, and Motion→GSAP translation if the graphic is a Figma Motion import — then build from its output. Don't drive Figma via raw MCP tools directly: that skips SVG sanitization, `.media/manifest.jsonl` provenance, and brand-token `var()` binding, so a later brand change can't propagate without a full re-import.
+
+# motion-graphics — dispatch entry
+
+> **The front door is `/hyperframes`.** This skill makes a **short, design-led, unnarrated motion graphic** (motion is the message; ~under 10s, no voice-over). Anything longer, narrated, or multi-scene — or any uncertainty → read `/hyperframes` first: the intent layer owns every route decision.
+
+This workflow is **autonomous by design** — at most one clarifying question (`agents/director.md`), then build through verification without intermediate review. The intent layer (`/hyperframes` § 4) routes here directly without run-shape questions; a storyboard and companion session add little to a piece this short. Rendering is still user-gated: after checks and proof snapshots pass, ask the canonical “preview first, or render?” question from `../hyperframes-core/references/brief-contract.md`. When a `BRIEF.md` exists, read it before the director's question.
+
+A short design-led motion graphic. **Asset-first**: decide the asset strategy and source real material _before_ designing the shot, then design the shot around what you have, then compose by reusing catalog capabilities. All artifacts go to `PROJECT_DIR = videos/<project-name>/` (created in Step 0); all paths below are relative to it.
+
+| Phase    | Execution                                                             | Primary artifact                                                 | Detailed flow                 |
+| -------- | --------------------------------------------------------------------- | ---------------------------------------------------------------- | ----------------------------- |
+| init     | Bash                                                                  | `hyperframes.json`                                               | Step 0                        |
+| plan     | subagent — **decide search?** + classify + asset strategy             | `shot-plan.json` (draft: category, `asset_needs` queries, brief) | `agents/director.md` (Part 1) |
+| source ◇ | Bash — media-use resolve (**skip if `asset_needs` is empty**)         | `assets/` + `assets/index.md`                                    | `phases/source/guide.md`      |
+| design   | subagent — shot design around resolved assets                         | `shot-plan.json` (final: block(s) + layout + motion + positions) | `agents/director.md` (Part 2) |
+| build    | subagent — reuse-first composition                                    | `compositions/index.html`                                        | `agents/builder.md`           |
+| verify   | Bash — `lint`, `check`, proof snapshots; repair on failure            | `snapshots/contact-sheet.jpg`                                    | Step 5                        |
+| approve  | Ask preview or render; wait for the answer                            | explicit render approval                                         | Step 6                        |
+| render   | Bash — `hyperframes render` (MP4, or `--format webm/mov` for overlay) | `renders/video.mp4` or transparent overlay                       | Step 6                        |
+
+`◇ source` runs only when the chosen category declares assets. Pure code/text categories (e.g. `kinetic-type`, most `charts`/`stat`) have `asset_needs: []` and skip straight from plan to design.
+
+## Categories — split by the search decision
+
+`plan`'s **first decision is: does this need a search?** That fork splits the categories into two groups; then the specific category is picked — for search-driven, **by the type of content the search returns**. Each category is one `categories/<id>/module.md` (its planning + build rules); the shared motion vocabulary lives in `references/motion-vocabulary.md` (→ `hyperframes-animation` rules/blueprints + registry blocks).
+
+**Form categories — no search; the user supplies the content:**
+
+| Category       | Intent                                                                                                         | Leans on                                                                    |
+| -------------- | -------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------- |
+| `kinetic-type` | punchy line / quote / title, motion-first text                                                                 | `caption-*` blocks + animation rules                                        |
+| `stat`         | single hero number / count-up + ring                                                                           | `apple-money-count` / `rules/{counting-dynamic-scale, stat-bars-and-fills}` |
+| `charts`       | bar / line / pie / race / % from data                                                                          | `data-chart` block                                                          |
+| `logo-reveal`  | logo sting / brand lockup (user logo)                                                                          | `logo-outro` / `rules/svg-path-draw`                                        |
+| `lower-thirds` | name / title bars, callouts, social overlays                                                                   | `caption-*` + registry overlay blocks                                       |
+| `maps`         | geographic motion — highlight regions, connect places, zoom to a location (vector lane, or baked basemap lane) | `us-map` / `world-map` family + `bake-basemap.mjs`                          |
+
+**Search-driven categories — search first, then animate by content type** (the RWA path):
+
+| Returned content | Category       | Animation                                                      |
+| ---------------- | -------------- | -------------------------------------------------------------- |
+| webpage / link   | `webpage`      | webpage / UI animation (scroll, reveal, cursor, callouts)      |
+| news article     | `news`         | headline reveal + source card + key-fact callouts              |
+| tweet            | `tweet`        | animated tweet card                                            |
+| image / entity   | `asset-fusion` | the asset's geometry _becomes_ the chart (RWA diegetic fusion) |
+
+Build order: one at a time, coverage-first (rough is fine). `kinetic-type` ported from the prototype; the rest follow.
+
+## Prerequisites
+
+macOS Apple Silicon or Linux x64. System tools: `brew install node ffmpeg`. `npx hyperframes doctor` once. macOS GPU render: `export PRODUCER_BROWSER_GPU_MODE=hardware`.
+
+Optional keys (local fallbacks if unset) — only needed by categories that source/generate assets via media-use:
+
+| Key                                 | Used for                                                    | Fallback                        |
+| ----------------------------------- | ----------------------------------------------------------- | ------------------------------- |
+| `GEMINI_API_KEY` / `GOOGLE_API_KEY` | image generation (media-use resolve)                        | skip generate / search-only     |
+| (asset_scout / search providers)    | `webpage`/`news`/`tweet` + `asset-fusion` real-asset search | category degrades to asset-free |
+
+## Flow
+
+### Step 0 — Initialize
+
+cwd is the agent workspace root; write all artifacts under `PROJECT_DIR = videos/<project-name>/`. `<project-name>`: use the dir the user gave, else a short kebab-case name from the intent (`<subject>-motion`). Not the workspace basename or a timestamp.
+
+Only when `$PROJECT_DIR/hyperframes.json` is absent:
+
+```bash
+PROJECT_DIR="${MOTION_GRAPHICS_DIR:-videos/<project-name>}"
+mkdir -p "$(dirname "$PROJECT_DIR")"
+npx hyperframes init "$PROJECT_DIR" --non-interactive --example=blank
+```
+
+`init` checks the installed skills against the latest on GitHub and updates the global set if any are out of date.
+
+**Constraints:** never `hyperframes init` in the workspace root; never nest another `hyperframes/` inside `PROJECT_DIR`; every Bash command (master + subagents) is a `(cd "$PROJECT_DIR" && ...)` subshell — never bare `cd`.
+
+### Step 1 — Plan (subagent: Director Part 1)
+
+Dispatch one subagent. prompt = full `agents/director.md` + `## Dispatch context` (`SKILL_DIR` / `PROJECT_DIR` / the user's request / `Schema: <SKILL_DIR>/references/shot-plan-ir.md`). It must:
+
+1. **Decide: does this need a search?** (the first fork)
+   - **No** → pick a **form category** (kinetic-type / stat / charts / logo-reveal / lower-thirds); content is user-supplied; `asset_needs: []`.
+   - **Yes** → emit a **search plan** into `asset_needs[]` (news / web / tweet / image; two-pole queries). The specific **search-driven category** (webpage / news / tweet / asset-fusion) is confirmed by the content type returned in Step 2, and finalized in Step 3.
+2. Write a draft `shot-plan.json` (envelope + chosen form category _or_ search intent + `asset_needs` + a one-paragraph shot brief). Schema: `references/shot-plan-ir.md`.
+
+Validation: `[ -s "$PROJECT_DIR/shot-plan.json" ] && echo ok || echo missing`.
+
+### Step 2 — Source ◇ (Bash: media-use, conditional)
+
+If `shot-plan.json.asset_needs` is non-empty, resolve assets (search / generate / fetch → frozen project-local paths + ledger). See `phases/source/guide.md` (wraps `media-use resolve`; the search-driven categories use the news/web/tweet/image search). If `asset_needs` is empty, **skip to Step 3**.
+
+```bash
+# illustrative — see phases/source/guide.md
+(cd "$PROJECT_DIR" && node <SKILL_DIR>/phases/source/resolve.mjs --plan ./shot-plan.json --out ./assets)
+```
+
+Degrade gracefully: if a search/provider is unavailable, the category falls back to asset-free (note it in `context.log`).
+
+### Step 3 — Design (subagent: Director Part 2)
+
+Dispatch a subagent (prompt = `agents/director.md` Part 2 + dispatch context including the resolved `assets/index.md` if Step 2 ran + `catalog-map.md`). It designs the shot **around the available assets**: pick the catalog block(s) + the `hyperframes-animation` rules/blueprints, the layout, the motion, beats, and (for `asset-fusion`) the `element_positions` + eyedropper palette. Finalizes `shot-plan.json` (`content.block` + `content.customize` + per-category content).
+
+### Step 4 — Build (subagent: Builder, reuse-first)
+
+Dispatch a subagent. prompt = full `agents/builder.md` + dispatch context (`shot-plan.json`, `catalog-map.md`, the category's `module.md`, `references/motion-vocabulary.md`, `references/builder-contract.md`). **Reuse-first**: `npx hyperframes add <block>` + customize in place; hand-author only gaps + the asset-fusion affordance. Output `compositions/index.html` honoring the HF contract (paused GSAP timeline on `window.__timelines`, `class="clip"` + stable ids, `tl.seek(0)`, deterministic).
+
+### Step 5 — Verify (Bash → repair subagent on failure)
+
+```bash
+(cd "$PROJECT_DIR" && npx hyperframes lint .)
+(cd "$PROJECT_DIR" && npx hyperframes check .)
+(cd "$PROJECT_DIR" && npx hyperframes snapshot --at <proof-times>)
+```
+
+Choose proof times that show the opening state, signature move, and final hold. Inspect the generated contact or snapshot sheet before continuing. On `lint`, `check`, or snapshot failure, dispatch the repair subagent (`agents/finalize.md`) for one in-place fix pass, then rerun the failed gate. Never change a fixed duration merely to hide a defect.
+
+### Step 6 — Approve and render (Bash)
+
+Ask one question: “preview first, or render?” If the user chooses preview, open Studio and return to the same approval gate after revisions:
+
+```bash
+(cd "$PROJECT_DIR" && npx hyperframes preview)
+```
+
+Render only after an explicit render answer:
+
+```bash
+(cd "$PROJECT_DIR" && npx hyperframes render . --skill=motion-graphics -q high -o ./renders/video.mp4)
+# transparent overlay variant: --format webm  (or mov)
+```
+
+Verify the output exists, is non-empty, and has the intended duration. The final handoff names the artifact, actual duration, composition or frame id, proof times, and the inspected contact or snapshot sheet. Flags live in `/hyperframes-cli` → `references/preview-render.md`.
+
+## Resume table
+
+| State                                                    | Continue from              |
+| -------------------------------------------------------- | -------------------------- |
+| no `shot-plan.json`                                      | Step 1 (plan)              |
+| `shot-plan.json` has `asset_needs`, no `assets/`         | Step 2 (source)            |
+| `shot-plan.json` final, no `compositions/index.html`     | Step 3/4 (design+build)    |
+| `compositions/index.html` exists, proof snapshots absent | Step 5 (verify)            |
+| checks and proof snapshots pass, no approved render      | Step 6 (approval)          |
+| approved render exists                                   | verify output, then report |
+
+## Design notes (maintainers — execution does not read this)
+
+- **Asset-first rationale:** sourcing is front-loaded and informs shot design (the RWA flow: analyze → search → review → compose). the search-driven categories (`webpage`/`news`/`tweet`) and `asset-fusion` both lean on media-use search (news/web/tweet/image), which is media-use's documented RWA lineage.
+- **Reuse-first:** the in-ecosystem analog of LLM-generated templates is "compose catalog blocks + `hyperframes-animation` rules". HF's paused GSAP timeline ≙ Remotion's `useCurrentFrame`.
+- **Category module contract:** one `categories/<id>/module.md` (planning + build), sharing `references/motion-vocabulary.md` (+ optional eval). Adding a category = drop the folder + register its classifier line in `agents/director.md` + its row in `catalog-map.md`; the phase pipeline is untouched.
+- **Directory shape:**
+  ```
+  videos/<project-name>/
+    hyperframes.json  context.log
+    shot-plan.json            # the IR (Director output)
+    assets/  assets/index.md  # media-use output (if sourced)
+    compositions/index.html   # Builder output
+    renders/video.mp4
+  ```
+- **Registration:** in `hyperframes` router — add the "design-led short motion graphic" intent + Workflow description; carve the motion-graphics triggers out of `/general-video`; add reverse Do-NOT-use edges. See `motion-graphics-genre.md` §5-7.
diff --git a/.claude/skills-media/motion-graphics/agents/builder.md b/.claude/skills-media/motion-graphics/agents/builder.md
new file mode 100644
index 000000000..8fef68510
--- /dev/null
+++ b/.claude/skills-media/motion-graphics/agents/builder.md
@@ -0,0 +1,40 @@
+# Motion-Graphics Builder
+
+Turn `shot-plan.json` into one renderable HyperFrames composition (`compositions/index.html`). Everything stays in the HF ecosystem — HTML is the source of truth; a single **paused** GSAP timeline carries all motion; the engine seeks it. Category-specific build rules live in `categories/<id>/module.md`; this file is the shared contract.
+
+## Reuse-first (the default)
+
+Default = **compose existing catalog capabilities, not hand-author**:
+
+- `npx hyperframes add <block>` (registry) → customize in place. Most blocks bake content/data into their own script (only a few expose CSS-var params), so reuse = **add + edit**.
+- `hyperframes-animation` rules / blueprints / transitions for motion; runtime adapters (GSAP default).
+
+Hand-author only (a) gaps no block/rule covers, (b) the `asset-fusion` affordance binding. The Director named the block(s) + customizations in `shot-plan.json` (`content.block` + `content.customize`); see `catalog-map.md`.
+
+## The HF contract (non-negotiable)
+
+- Root `#stage` carries `data-composition-id`, `data-start="0"`, `data-duration=<s>`, `data-fps`, `data-width`, `data-height`.
+- Exactly ONE `gsap.timeline({ paused:true })`; register `window.__timelines["<id>"] = tl;`; end with `tl.seek(0)`. **Never `tl.play()`** for render-critical motion. No timers / async / event-driven timeline build. Finite repeats only.
+- **Timed clips** need `class="clip"` + a stable `id`. Timeline-driven groups inside one full-duration clip don't each need timing attrs.
+- **Fonts**: prefer local `@font-face` (.woff2) for deterministic / offline render; CDN Google Fonts do render (compiler caches + injects `@font-face`) but warn + need network.
+- **Deterministic only** — no `Date.now()` / `Math.random()` / network.
+
+## Layout before animation
+
+Build the **hero-frame end-state** in CSS first (flex + padding; never absolute offsets on content containers; the root must be sized). Use `fromTo()` for elements inside `.clip` and for any delayed entrance; `from()` is safe only for non-clip elements active from `t=0`. Exits belong to transitions or the final scene. Full rules: `references/builder-contract.md`.
+
+## IR → composition
+
+- `content.block` → `hyperframes add` it (or inline) + apply `content.customize`.
+- per-category `content` (text scenes / chart data / fusion positions / news-tweet content) → realize per `categories/<id>/module.md`.
+- resolved `asset_needs` → reference **frozen project-local paths** (never a remote URL or a prompt).
+- `palette[-1]` / bg + `font` from the envelope.
+- `export: alpha-overlay` → transparent bg; render `--format webm` (or `mov`).
+
+## Critical correctness (GSAP / seek)
+
+Opacity-gate delayed elements (set hidden until their entrance). Clamp at tween bounds (no overshoot past a held value). Allowed eases: `power1–4`, `back`, `bounce`, `circ`, `elastic`, `expo`, `sine` (`.in/.out/.inOut`). One motif per scene. Run `hyperframes check` for overflow / collisions.
+
+## Hand off for verification
+
+Self-check the authored file, then return it to the orchestrator. Step 5 runs `hyperframes lint`, `hyperframes check`, and proof snapshots on the assembled project. Do not render. When redispatched with a finding, fix the offending element and never change a fixed `data-duration` during repair. Remotion-source migrations use `/remotion-to-hyperframes` and its SSIM harness instead.
diff --git a/.claude/skills-media/motion-graphics/agents/director.md b/.claude/skills-media/motion-graphics/agents/director.md
new file mode 100644
index 000000000..37b17a237
--- /dev/null
+++ b/.claude/skills-media/motion-graphics/agents/director.md
@@ -0,0 +1,53 @@
+# Motion-Graphics Director
+
+Turn a request into a `shot-plan.json` for a short (~3–30s) **design-led motion graphic**. You run in **two parts** around the asset-sourcing step: **Part 1 (plan)** before sourcing, **Part 2 (design)** after. You do NOT write composition code — that's the Builder. Schema: `references/shot-plan-ir.md`.
+
+## Part 1 — Plan (before sourcing)
+
+Emit a DRAFT `shot-plan.json`.
+
+0. **Decide first: does this need a search?** No → a **form category** (user supplies content). Yes → emit a search plan; the specific **search-driven category** (`webpage` / `news` / `tweet` / `asset-fusion`) is confirmed by what the search returns (Step 2 → finalized in Part 2).
+
+1. **Classify** — form categories by intent below; search-driven categories are picked post-search:
+
+   | Category       | Pick when…                                                                                                                                                                         |
+   | -------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+   | `kinetic-type` | a punchy line / quote / title; text is the hero                                                                                                                                    |
+   | `stat`         | a single hero number / count-up                                                                                                                                                    |
+   | `charts`       | bar / line / pie / race / % from data                                                                                                                                              |
+   | `logo-reveal`  | a logo sting / brand lockup (user supplies the logo)                                                                                                                               |
+   | `lower-thirds` | name/title bars, callouts, social overlays                                                                                                                                         |
+   | `maps`         | a geographic shot — highlight regions, connect places, zoom to a location. Sub-fork: **vector** (D3, stylized) vs **basemap** (baked MapLibre — real satellite/dark/zoom-to-place) |
+   | `webpage`      | highlight / animate a real captured web page or UI _(search-driven)_                                                                                                               |
+   | `news`         | a news article → article-highlight: blur → zoom into keyword _(search-driven)_                                                                                                     |
+   | `tweet`        | a tweet → animated card _(search-driven)_                                                                                                                                          |
+   | `asset-fusion` | a real photo/asset's geometry _becomes_ the chart _(search-driven)_                                                                                                                |
+
+   If genuinely ambiguous between two, ask exactly one question. Then load `categories/<id>/module.md` for that category's specifics.
+
+2. **Asset strategy → `asset_needs[]`.** Each item: `{ role, kind: image|icon|logo|svg|news|web|tweet, query|source, treatment }`.
+   - asset-free (`kinetic-type`, most `stat`/`charts`) → `asset_needs: []`.
+   - `maps` → **vector** lane: `asset_needs: []` (D3/TopoJSON, runs live in HF). **basemap** lane (satellite/dark/zoom-to-place): `asset_needs: [{ type: "map-bake", … }]` (baked in Source — see `categories/maps/module.md`).
+   - `webpage` / `news` / `tweet` → search the real source (page / article / tweet) + a supporting image. **Two-pole queries only**: atomic (1–3 words, composable: portraits, logos, objects) OR specific (5–15 words: a news event, a tweet). Never the middle. A failed specific query is dropped, not broadened.
+   - `asset-fusion` → search or generate one hero asset.
+   - `logo-reveal` → user-supplied logo (`source`).
+
+3. **Envelope**: `duration_s` (3–30), `fps` (30), `canvas` (default 1080×1920; 16:9 / 1:1 per platform), `style`, `palette` (hex list, or `"derive-from-asset"`), `font` (from the HF embed list), `beats`, `export` (`mp4` | `alpha-overlay`).
+
+4. **Shot brief**: one paragraph — what the viewer experiences + the single dominant motion idea.
+
+## Part 2 — Design (after sourcing)
+
+Given the draft + resolved `assets/index.md` (if Step 2 ran) + `catalog-map.md`, design the shot **around the assets**:
+
+- Pick the **catalog block(s)** + the `hyperframes-animation` rules / blueprints (catalog-aware — see `catalog-map.md`).
+- Layout (hero-frame), motion (per `references/motion-vocabulary.md`), beats, pacing, exits.
+- `asset-fusion`: read the asset's **geometric affordance** → `element_positions` (center / extent / safe-zones / avoid-zones) + **eyedropper palette** from the asset.
+- Finalize `shot-plan.json`: `content.block` + `content.customize` + the per-category `content`.
+
+## Heuristics (design-led short motion)
+
+- **Motion IS the message**; no narration arc. Hook lands fast (~first 0.5s). **One dominant motif.** Pattern-interrupt if the piece runs >~2.5s (change exactly one thing). Effect intensity matches the energy. Legibility: a key element stays readable ≥~0.3s. Beats may be anticipated ~0.1s for perceived sync.
+- **Reuse-first**: name a catalog block; ask for hand-authored motion only for gaps + the `asset-fusion` affordance.
+
+Then hand `shot-plan.json` to the Builder.
diff --git a/.claude/skills-media/motion-graphics/agents/finalize.md b/.claude/skills-media/motion-graphics/agents/finalize.md
new file mode 100644
index 000000000..2af9e3ded
--- /dev/null
+++ b/.claude/skills-media/motion-graphics/agents/finalize.md
@@ -0,0 +1,17 @@
+# Finalize / repair subagent
+
+Perform snapshot QA and one in-place repair pass. Dispatch only when Step 5 `lint`, `check`, or snapshot review reports a defect. The orchestrator owns final approval and render; this agent never renders.
+
+## Dispatch context
+
+`SKILL_DIR` / `PROJECT_DIR` / proof snapshot times / `lint` and `check` output tails, when present.
+
+## Flow
+
+1. **Snapshots** — run `npx hyperframes snapshot --at <proof-times>` and inspect overflow, off-canvas content, text collisions, empty frames, wrong content, and unreadable motion.
+2. **One in-place repair pass** — edit `compositions/index.html` for the visible issues. Never change a fixed `data-duration`; timing is set upstream.
+3. **Recheck** — rerun `npx hyperframes lint`, `npx hyperframes check`, and the affected snapshots. Return the result to the orchestrator without rendering.
+
+## STOP / escalate
+
+Only when the shot is **fundamentally wrong** (whole content off, needs recomposition) — return to Step 3/4 (re-design + re-build), don't force it with edits. Small fixes never escalate.
diff --git a/.claude/skills-media/motion-graphics/catalog-map.md b/.claude/skills-media/motion-graphics/catalog-map.md
new file mode 100644
index 000000000..b69bcd7ad
--- /dev/null
+++ b/.claude/skills-media/motion-graphics/catalog-map.md
@@ -0,0 +1,40 @@
+# Director → catalog block map (reuse-first)
+
+The Builder's **default is to compose existing HF catalog blocks, not hand-author.** `npx hyperframes add <block>` drops a block's source into `compositions/`; the Builder then **customizes in place** — most blocks bake their content/data into their own script (only a few expose CSS-var `params`), so reuse = **add + edit**, not pure variable injection. Hand-author only (a) gaps no block covers and (b) the asset-fusion affordance binding.
+
+After classifying intent → category, the **Director names the block(s) + what to customize** in the shot-plan IR:
+
+```jsonc
+"content": { "block": "data-chart", "customize": { "data": [...], "headline": "…", "palette": ["…"] } }
+```
+
+## Category → block(s)
+
+| Category               | Borrow from catalog                                                                                                                                                                                                                                                                                                                                                                                                                   | Customize                                                                                        | Gaps → hand-author                                                                                             |
+| ---------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------- |
+| **kinetic-typo**       | one of **18 `caption-*`** (kinetic-slam, editorial-emphasis, clip-wipe, gradient-fill, neon-glow, glitch-rgb, matrix-decode, particle-burst, weight-shift, pill-karaoke, highlight, blend-difference…)                                                                                                                                                                                                                                | words; `emphasis_words` → `word--emphasis`; palette; font; timing                                | a motif none of the 18 cover                                                                                   |
+| **charts**             | `data-chart` (bar+line, staggered, value labels)                                                                                                                                                                                                                                                                                                                                                                                      | edit the data array + headline/subtitle; `--bg`/`--text`                                         | pie/donut, bar-chart-race, ring/%                                                                              |
+| **stat**               | `apple-money-count` (finance: $ counter + burst + SFX) **or** our generic `stat-motion` (any %/number + ring)                                                                                                                                                                                                                                                                                                                         | target, prefix/suffix, label, palette                                                            | —                                                                                                              |
+| maps/geo               | **vector lane**: `us-map` (+bubble/hex/flow), `world-map`, `spain-map` + **hand-author** `geo-highlight`/`geo-flow`/`flag-borders`/`pin-rollout` (NOT in registry — build per `categories/maps/module.md`). **basemap lane** (real satellite/dark / zoom-to-place): bake via `categories/maps/bake-basemap.mjs` → `<video>` + geo-aligned SVG overlay (border draw-on + colour-block fills)                                           | regions/data, palette, callouts/connectors, basemap style                                        | (basemap lane now covers real imagery + zoom-to-address — was the gap)                                         |
+| diagram                | `flowchart` (SVG connectors + nodes)                                                                                                                                                                                                                                                                                                                                                                                                  | nodes, edges, labels                                                                             | —                                                                                                              |
+| **code / code-reveal** | one of the **9 Code Animations** blocks: `code-typing` (live typing), `code-diff` (a change), `code-morph` (a refactor), `code-highlight` (spotlight a line; `line` is 0-based), `code-scroll` (walk a file), `code-snippet-flight` (assemble); GPU hero reveals `code-3d-extrude` / `code-shader-dissolve` / `code-particle-assemble` for a title-card moment; for a static themed code/terminal window use a `code-snippet-*` block | the baked code string / diff / theme                                                             | a code motion none cover                                                                                       |
+| **brand reveal**       | `logo-outro` (piece assembly + glow + tagline + URL pill)                                                                                                                                                                                                                                                                                                                                                                             | logo asset, tagline, URL, palette                                                                | —                                                                                                              |
+| transitions            | 15+ shader transitions (domain-warp, whip-pan, sdf-iris, glitch…)                                                                                                                                                                                                                                                                                                                                                                     | direction, timing                                                                                | —                                                                                                              |
+| social overlay         | ig / tiktok / yt / x / reddit / spotify / macos cards                                                                                                                                                                                                                                                                                                                                                                                 | handle, metrics, avatar                                                                          | —                                                                                                              |
+| polish                 | grain-overlay, vignette, shimmer-sweep, texture-mask-text                                                                                                                                                                                                                                                                                                                                                                             | intensity                                                                                        | —                                                                                                              |
+| **asset-fusion (RWA)** | **annotation kit from `north-korea-locked-down`** — scribble-circle draw-on, pop-up pill + pointer, red-wash, scanline, corners, camera push; + `us-map-bubble` callouts/connectors                                                                                                                                                                                                                                                   | asset, annotation position (`element_positions`), label, palette **eyedropper'd from the asset** | **NET-NEW (not in catalog): the affordance binding — asset geometry _becomes_ the chart axis (straw → gauge)** |
+
+## Reuse mechanics
+
+- `npx hyperframes add <block>` → source lands in `compositions/<block>.html`; inline it or reference via `data-composition-src`; customize content/data/palette/positions in place.
+- Blocks ship at fixed canvases (1920×1080 / 1080×1920 / 1080×1080) — match or adapt.
+- Blocks already follow the HF contract (paused timeline, seek) — keep it.
+
+## Asset-fusion: borrow + net-new (the only real net-new IP)
+
+Borrow `north-korea-locked-down`'s annotation _language_; the net-new is the RWA fusion _logic_ (see the RWA study):
+
+1. Classify the data type; read the asset's **geometric affordance** — linearity → timeline/gauge, volume/texture → pie, height → bar, container → exploded view.
+2. **`element_positions`** — measure the asset's feature (center / extent / safe-zones / avoid-zones). This is the reverse-engineer step (vision); in the prototype it's hand-estimated.
+3. **Eyedropper palette** from the asset (never generic #FFF/#000).
+4. **Two layers** — asset (z0, full-bleed) + data graphics fused to its geometry (z1+), anchored by `element_positions`; connectors/scribble physically tie the data to the asset; the asset stays visible.
diff --git a/.claude/skills-media/motion-graphics/categories/asset-fusion/module.md b/.claude/skills-media/motion-graphics/categories/asset-fusion/module.md
new file mode 100644
index 000000000..6bd1431a5
--- /dev/null
+++ b/.claude/skills-media/motion-graphics/categories/asset-fusion/module.md
@@ -0,0 +1,37 @@
+# asset-fusion — category module (search-driven · the net-new IP)
+
+**A real asset's geometry _becomes_ the chart** — RWA diegetic fusion (the straw becomes a gauge; a glass's liquid becomes a pie). Not in any catalog; the genuinely net-new capability. ~5–8s.
+
+## Source (Step 2)
+
+Search or generate one **hero asset** with strong geometric affordance. `asset_needs`: `{ kind: image, query|generate, treatment: cutout|none }`. Freeze it project-local.
+
+## Plan (Director Part 2) — the fusion logic
+
+1. Classify the **data type** (temporal / quantitative / proportion / spatial).
+2. Read the asset's **geometric affordance** — linearity → timeline/gauge · volume/texture → pie · height → bar · container → exploded view.
+3. `element_positions`: **GROUND with the locate protocol — never eyeball pixel coords.** Read **`grounding/PROTOCOL.md`** and run the loop with `node grounding/locate.mjs` (`overlay` → read strips → `region` → read crop → `final` → **`mark` + verify**). Zero keys/deps assumed (node + ffmpeg only); the optional `auto` fast path exists only when `GEMINI_API_KEY` happens to be set. Why: eyeballing put rings off-subject (~16–24% center error on weak vision models); the grid loop pulls it to ~2–4% (measured E2E: eyeball 6.5% → protocol 2.3% avg center error, no case worse).
+4. **Eyedropper palette** from the asset (never generic #FFF/#000).
+
+## Highlight + circle recipe (the common case)
+
+"Ring / spotlight object X in a real image" → use the drop-in template **`samples/asset-fusion/_ref-circle-highlight.html`**: set `CFG.box` (from the locate protocol), `CFG.label`, `CFG.asset`, EVEN `CFG.W/H`, `CFG.mode` (`full` = ring+connector+label+brackets+scanlines, `circle` = ring only). It computes the radial wash, the amber double over-stroke ring, connector, callout, and corner-bracket reticle from the box. The whole pipeline is: locate (PROTOCOL.md) → fill template → render.
+
+## Render gotchas (codified — skipping these breaks the render)
+
+- **EVEN width & height** — odd width _or height_ (e.g. 1400×933) → `ffmpeg` encode fails / distorts. Resize the asset/stage to even dims (1400×932).
+- **`data-width`/`data-height` must be STATIC HTML attrs on the stage** — the renderer's StaticGuard reads them at compile time, before JS runs. Setting them via `setAttribute` is too late → render falls back to portrait 1080×1920 and distorts. (The circle-highlight template now hard-codes them; keep them equal to `CFG.W/H`.)
+- **Draw-on (`stroke-dashoffset`) must be `autoAlpha:0`-gated** — `getTotalLength()` can read 0 before layout → dash disabled → a solid line shows at t=0. Gate every draw-on element with `autoAlpha:0` until it draws, and fall back `getTotalLength() || <const>`.
+- **CSS var tween scope** — `gsap.to(":root", {"--x":..})` won't reach an element that has its own inline `--x`; tween the var on the element itself.
+- **No camera push under a fixed overlay** — scaling the image while the ring/wash stay fixed drifts the target out of the ring. Either skip the push or scale the whole scene together.
+- Lossless delivery: `--format mov` (ProRes); `mp4` is lossy.
+
+## Vocabulary / leans on
+
+- Borrow the annotation kit from registry **`north-korea-locked-down`** (hand-drawn scribble circle draw-on, pop-up label + pointer, editorial wash, camera push).
+- Primitives: gauge fill / marker-rise along the affordance · connector (data → asset point) · diegetic chart fused to the asset's geometry.
+- Adapt the diegetic chart to each asset's affordance (read the geometry, fuse the data into it).
+
+## Build (reuse-first + hand-author the affordance)
+
+**Two layers**: asset (z0, full-bleed) + data graphics (z1+) fused to its geometry, anchored by `element_positions`; connectors/scribble physically tie the data to the asset; asset stays visible. Reference impl: the prototype `fusion-demo/index-annotated.html` (straw → gauge + borrowed annotation kit).
diff --git a/.claude/skills-media/motion-graphics/categories/charts/module.md b/.claude/skills-media/motion-graphics/categories/charts/module.md
new file mode 100644
index 000000000..d00354cc3
--- /dev/null
+++ b/.claude/skills-media/motion-graphics/categories/charts/module.md
@@ -0,0 +1,21 @@
+# charts — category module
+
+Animated **data-viz** from data. Asset-free (the "input" is the data). "One chart, one message" for short durations.
+
+## Plan (Director)
+
+`content`: `{ type: bar|line|pie|race|pct, data[], labels[], headline, axes: bool }`. For `race`, data must be cumulative/time-staged.
+
+## Vocabulary / leans on
+
+- Block: **`data-chart`** (animated **bar + line**, staggered reveal, value labels — proven: borrowed + customized + rendered to MP4 in the prototype `charts-demo`).
+- Gaps (hand-author): **pie / donut, bar-chart-race, ring/%** — `data-chart` doesn't cover these. Use D3/visx for data→geometry + GSAP for motion.
+- Signature animations: bar stagger-grow · line `stroke-dashoffset` draw-on · pie radial sweep · ring fill · KPI count-up · race reorder.
+
+## Build (reuse-first)
+
+Reuse `data-chart`: `npx hyperframes add data-chart` → edit the data arrays + scales + headline/labels + palette in place (its data is baked in the script, not a `--variables` flag). Axes hidden by default; show muted only when magnitude is the message. Determinism: drive any animation from the seek clock, never wall-clock.
+
+## Dashboard-skeleton variant
+
+For a **product-dashboard** case: lay out a skeleton dashboard — a top bar with a **real test logo** (e.g. the hyperframes logo in `samples/_assets/`) + a title, then a grid of 3–4 **KPI cards** (each a `stat` count-up) + one `data-chart` panel. Reveal order: header/logo in → cards stagger in → the chart animates. Composes the `stat` + `charts` primitives inside a dashboard frame; the logo is a frozen project-local asset.
diff --git a/.claude/skills-media/motion-graphics/categories/kinetic-type/module.md b/.claude/skills-media/motion-graphics/categories/kinetic-type/module.md
new file mode 100644
index 000000000..6728ad47b
--- /dev/null
+++ b/.claude/skills-media/motion-graphics/categories/kinetic-type/module.md
@@ -0,0 +1,19 @@
+# kinetic-type — category module
+
+Text is the hero; typography + motion carry the message. Usually asset-free (`asset_needs: []`).
+
+## Plan (Director)
+
+- **Style first.** If the project has a **`design.md` / `frame.md`** (precedence: `frame.md` → `design.md` → `DESIGN.md`), READ it and use its **exact palette / fonts / constraints** — do not invent. No spec → pick a named style, or ask: mood + light/dark + any brand color/font. (Style is an input the case must exercise; the same shot in two `design.md`s should look different.)
+- Segment the copy into scenes by meaning / breath (EN ~3–7 words; ZH ~4–12 chars). Tag each scene **Hook → Build → Punch → Resolve**.
+- 1–2 `emphasis_words` per scene. Per scene: `emotion` + `motion` (free-form) + `beats`.
+
+## Vocabulary
+
+Motion primitives + registry blocks: **`references/motion-vocabulary.md`** (slide / scale / fade / blur / typewriter / word_reveal / wave / bounce / slam / scale_pulse / shake / glow / color_shift, plus the 18 `caption-*` blocks).
+
+## Build (reuse-first)
+
+- Prefer a **`caption-*` block** when one fits (`caption-kinetic-slam` / `caption-editorial-emphasis` / …): `npx hyperframes add` + set words / `emphasis_words` / palette / font.
+- Else hand-author: one full-duration `.clip`; a `.group` per scene (flex-centered); words as spans; explicit `gsap.fromTo()` entrances per scene `motion`; emphasis words → `glow` / `scale_pulse` on the beat; seek-safe `autoAlpha` only on inner non-clip elements. Honor `references/builder-contract.md`.
+- Reference impl: prototype `v0-text-motion-demo` + `pipeline-demo`.
diff --git a/.claude/skills-media/motion-graphics/categories/logo-reveal/module.md b/.claude/skills-media/motion-graphics/categories/logo-reveal/module.md
new file mode 100644
index 000000000..11f7536d5
--- /dev/null
+++ b/.claude/skills-media/motion-graphics/categories/logo-reveal/module.md
@@ -0,0 +1,17 @@
+# logo-reveal — category module
+
+A **logo sting / brand lockup**. The logo is user-supplied, or resolved for a known brand (`resolve --type logo --entity <brand>`); `asset_needs` = one logo `source`. ~3–5s. Often `export: alpha-overlay` (sting to drop on other footage).
+
+## Plan (Director)
+
+`content`: `{ logo: <asset path>, tagline, url }`. Envelope: brand palette (or eyedropper from the logo), elegant pacing.
+
+## Vocabulary / leans on
+
+- Block: **`logo-outro`** (piece-by-piece assembly + glow bloom + tagline fade + URL pill).
+- Rules: `rules/svg-path-draw` (draw-on for vector logos) · `rules/scale-swap-transition` · `rules/3d-text-depth-layers`.
+- Primitives: draw-on / mask-reveal / particle-assemble · `glow` bloom · `underline_sweep` · hold.
+
+## Build (reuse-first)
+
+Reuse `logo-outro` + swap logo / tagline / url / palette; **or** hand-author: place the logo at its hero frame (CSS), reveal via draw-on (SVG `stroke-dashoffset`) or mask/scale, add a glow bloom + accent underline sweep, hold. For an SVG logo, prefer draw-on; for a raster logo, mask/scale + glow. Transparent bg when exporting as an overlay.
diff --git a/.claude/skills-media/motion-graphics/categories/lower-thirds/module.md b/.claude/skills-media/motion-graphics/categories/lower-thirds/module.md
new file mode 100644
index 000000000..6b7ce4fe7
--- /dev/null
+++ b/.claude/skills-media/motion-graphics/categories/lower-thirds/module.md
@@ -0,0 +1,16 @@
+# lower-thirds — category module
+
+**Name/title bars, callouts, social overlays** — graphics meant to sit over other footage. Asset-free (+ optional logo). Usually `export: alpha-overlay` (transparent). ~3–6s (or loop/hold).
+
+## Plan (Director)
+
+`content`: `{ name, role, position (lower-left / lower-third / corner), brand_colors[] }`. Default `export: alpha-overlay`.
+
+## Vocabulary / leans on
+
+- Blocks: `caption-*` (pill-karaoke, neon-accent, editorial-emphasis) + registry **overlay** blocks (`instagram-follow`, `tiktok-follow`, `yt-lower-third`, `x-post`, `spotify-card`, `macos-notification`).
+- Primitives: slide/wipe-in · bar reveal · `glow` · fade/slide-out.
+
+## Build (reuse-first)
+
+Reuse the closest overlay/caption block + set name / role / handle / brand colors / position; **or** hand-author a bar that wipes in (`scaleX` from 0, `transform-origin:left`) with text sliding up behind it, hold, slide out. **Transparent background** (`export: alpha-overlay` → `render --format webm/mov`) so it composites over footage. Keep it in the title-safe lower band.
diff --git a/.claude/skills-media/motion-graphics/categories/maps/bake-basemap.mjs b/.claude/skills-media/motion-graphics/categories/maps/bake-basemap.mjs
new file mode 100644
index 000000000..47ec742c1
--- /dev/null
+++ b/.claude/skills-media/motion-graphics/categories/maps/bake-basemap.mjs
@@ -0,0 +1,273 @@
+// bake-basemap.mjs — canonical basemap-lane helper for the `maps` skill.
+//
+// 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 `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
+// Then encode frames-<NAME>/f%04d.png → <NAME>.mp4 (all-intra: -g 1) and feed <NAME>-coords.json
+// to the HF composition.
+import puppeteer from "puppeteer-core";
+import { fileURLToPath } from "node:url";
+import { dirname, join } from "node:path";
+import { mkdirSync, writeFileSync, readdirSync, existsSync } from "node:fs";
+import { homedir } from "node:os";
+import { spawnSync } from "node:child_process";
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+
+// --- 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 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,
+}))
+  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 });
+
+// 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:#05070d}#map{width:1920px;height:1080px}.maplibregl-control-container{display:none!important}</style>
+</head><body><div id="map"></div><script>
+var CENTER=${JSON.stringify(CENTER)}, ZSTART=${ZSTART}, ZEND=${ZEND}, PITCH=${PITCH}, BEARING=${BEARING}, HOLD=${HOLD};
+var MARGIN=${JSON.stringify(MARGIN)}, WANT=${JSON.stringify(COUNTRIES)};
+var map=new maplibregl.Map({container:"map",style:{version:8,projection:{type:"mercator"},
+  sources:{s:{type:"raster",tiles:[${JSON.stringify(TILES)}],tileSize:256,maxzoom:19}},
+  layers:[{id:"bg",type:"background",paint:{"background-color":"#05070d"}},{id:"s",type:"raster",source:"s"}]},
+  center:CENTER,zoom:ZSTART,pitch:0,bearing:0,interactive:false,attributionControl:false,fadeDuration:0,preserveDrawingBuffer:true,maxTileCacheSize:6000});
+function ease(x){return x<0.5?4*x*x*x:1-Math.pow(-2*x+2,3)/2;} // easeInOutCubic (= Remotion interpolate+Easing)
+function camAt(p){ var t=ease(Math.min(1,p/HOLD)); return {center:CENTER, 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)); };
+// returns true if the idle event did NOT fire within ms (i.e. tiles may be incomplete)
+// returns true only if tiles are GENUINELY not loaded at timeout — CARTO/Esri idle is flaky and
+// often never fires even when every tile is painted, so check areTilesLoaded() before crying timeout.
+window.__waitIdle=function(ms){ return new Promise(function(res){ var done=false; function fin(t){if(done)return;done=true;res(t);} map.once("idle",function(){fin(false);}); setTimeout(function(){ fin(!map.areTilesLoaded()); }, ms||9000); }); };
+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}); baking ${N} frames, zoom ${ZSTART}→${ZEND} hold@p=${HOLD}, ${COUNTRIES.length} border(s)`,
+  );
+  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) console.log(`  [${NAME}] ${i + 1}/${N}`);
+  }
+  // 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-media/motion-graphics/categories/maps/module.md b/.claude/skills-media/motion-graphics/categories/maps/module.md
new file mode 100644
index 000000000..a16496449
--- /dev/null
+++ b/.claude/skills-media/motion-graphics/categories/maps/module.md
@@ -0,0 +1,61 @@
+# maps — category module
+
+Geographic motion: highlight regions, connect places, zoom to a location. **First decision: does the shot need a real basemap** (satellite/street/terrain imagery, globe, or zoom to a real address)? That picks the lane.
+
+## Plan (Director)
+
+Set `content.lane` first:
+
+- **vector** (default) — stylized region shapes, no real imagery. Native + live in HF, cheap. `asset_needs: []`.
+- **basemap** — needs real satellite/dark tiles, globe, or zoom-to-real-place. `asset_needs: [{ type: "map-bake", … }]`. **Bake the imagery in Source**: HF forbids render-time network and requires determinism, so live tiles (which re-fetch and can change per render) can't be the imagery layer — baking freezes it (and is smooth as a bonus). See Basemap lane + Determinism.
+
+`content`: `{ lane, shot: highlight|flow|choropleth|labels|flag|pin-rollout|zoom-to, regions[], points[], basemap: satellite|dark, palette, headline, overlays: [label|pin|callout-card] }`.
+
+`overlays` are independent of `shot` and work in both lanes. **`callout-card`** = a pinned card (flag chip + stat + progress bar) — this is the "documentary popup" (top #13); compose it on any zoom-to/highlight shot rather than treating it as its own shot.
+
+## Vocabulary / leans on
+
+**Vector lane** (D3 + TopoJSON — reuse the existing map family, don't duplicate):
+
+- Reuse: `us-map` (+bubble/hex/flow), `world-map`, `spain-map`.
+- **Hand-author** these (NOT in the catalog — build per the signatures below, don't expect an `add`): `geo-highlight` (N countries colored + labels + border pulse), `geo-flow` (world arcs / hub network), `flag-borders` (flag clipped to a country), `pin-rollout` (cities pulse in sequence + counter).
+- Signature: country fill-in stagger · pin drop + pulse ring · arc `stroke-dashoffset` draw-on + flyer · choropleth color reveal · **viewBox** zoom.
+
+**Basemap lane** (MapLibre, baked in Source — validated pipeline, `bake-basemap.mjs`, fully env-parametric — runs for any country, not just the prototypes):
+
+- **Bake** `bake-basemap.mjs` (puppeteer + MapLibre; env-driven: `NAME STYLE COUNTRIES CENTER ZSTART ZEND PITCH BEARING FPS DUR`): drive the camera **zoom→hold** (`easeInOutCubic`) and **`await map.once('idle')` before every frame** so each frame has complete tiles (Remotion `delayRender` technique → no tile pop). The helper resolves Chrome itself, pins deps exactly, derives the overseas-territory filter per subject, and **fails loud on idle-timeout** (suspect frames → non-zero exit). _External deps: the pinned CDN libs (maplibre/topojson/world-atlas) + the Esri/CARTO tile endpoints are third-party — re-verify availability + ToS on any version bump._ `preserveDrawingBuffer:true`, `fadeDuration:0`. The helper then **encodes the frames to an all-intra MP4 itself** (`ffmpeg -framerate FPS -i f%04d.png -c:v libx264 -g 1 -pix_fmt yuv420p`) and writes everything to **`$OUT` (default `cwd`)**, not the skill dir → `<NAME>.mp4` + `<NAME>-coords.json`.
+- **Export geo→screen** at the hold view: `map.project()` each requested country → `<NAME>-coords.json` = `{ view, countries: [{ name, color, d (SVG path), bbox, label }] }`. The camera holds static after the zoom, so these paths stay pixel-aligned. `label` is an **approximate** anchor (vertex-average of the mainland ring — for concave countries nudge per Legibility). Consume `coords.countries[i]`; the `smooth-frde2`/`smooth-flag` example dirs predate this helper and use a flat `{fr,de,…}` shape, so adapt their wiring.
+- **Builder**: `<video>` basemap on track 0 + an **SVG overlay** that, during the hold, animates country **borders (`stroke-dashoffset` draw-on)** + **fills (colour-block reveal)** + labels/pins/cards — all geo-aligned via `coords.json`. This reproduces the Hera "satellite + animated coloured borders/callouts" look.
+  - The same projected path also doubles as an SVG **`clipPath`**: clip a **flag (or any texture) into the real border** for _flag-in-borders_ — a richer fill than flat colour, over real map context (validated: France tricolor over a dark basemap, `smooth-flag`). Export the feature's screen **bbox** alongside its path so the flag stripes/texture can be sized to the country.
+- **Stretch / data gaps** (extend `bake-basemap.mjs` as needed — the eval agents did): a **globe intro** ("start from the globe") = MapLibre `projection:{type:'globe'}` for the opening phase, easing to mercator at the target (the helper defaults to mercator). **Sub-national** regions (states/provinces) aren't in world-atlas (country-only) → use a Natural Earth **admin-1** TopoJSON, or project centroids as pins (`pin-rollout`).
+
+## Build (reuse-first)
+
+Vector: `npx hyperframes add <block>` → edit regions/data/palette in place. Basemap: baked `map.mp4` as track-0 `<video>`, bind overlays to anchors.
+
+**Restraint (no cheese — this is the #1 way auto-built maps go wrong):** every animated element must serve the message — region, connector, label, pin, camera. **NO decorative ambient glows, background light blobs, floating particles, lens flares, or gratuitous bloom.** Motion = a continuous camera move (viewBox push/zoom) + purposeful, overlapping element reveals — not a light show. Palette: color must **carry meaning** — a data scale (choropleth), categorical fills that distinguish regions (political map), or 1–2 accents for the subjects (highlighted countries / route) over neutral everything-else. Don't add color as **decoration** (a country amber just for contrast, a glow for "energy"). The frame should read like a clean broadcast map, not a screensaver.
+
+**Legibility (hard rule):** offset labels from the highlighted shape and from each other; clamp to the safe area; a callout pill must not sit on another label or a border (the eval surfaced a DE/PL "Oder–Neisse" pill overlapping the POLAND label). A key element stays readable ≥~0.3s.
+
+**Attribution (hard rule):** real basemap imagery carries usage terms — bake a credit element into the composition whenever a basemap is on screen (Esri satellite → "Esri, Maxar, Earthstar Geographics"; CARTO → "© CARTO, © OpenStreetMap"). A small low-corner label (see `smooth-jp`). Non-negotiable for anything published.
+
+**Determinism (hard rules — each one bit us in the prototypes):**
+
+- Drive everything from the seek clock; **never `tl.call`** for stateful updates (counters, text) → proxy tween + `onUpdate` (tl.call freezes the timeline under HF seek).
+- SVG zoom = animate **viewBox** (don't hand-compute group transform origins).
+- Centered overlays (cards/labels using `transform: translate(-50%,…)` to center): animate **opacity only**, or wrap in an outer centered div — GSAP animating `y`/`scale` overwrites the whole transform and kills the centering.
+- Country geometry: filter to the polygon(s) **in a lon/lat box around the subject** — world-atlas bundles overseas territories that blow up the bbox (France + Guiana). Keep near islands (Corsica, Sicily), drop far ones. (`bake-basemap.mjs` anchors on the vertex-richest polygon ± `KEEPMARGIN` — no continent-specific constant.)
+- **Tile world-scale**: MapLibre's internal world width is `512·2^zoom` regardless of the raster `tileSize`. Esri/CARTO raster → `tileSize:256` (correct); a 512px / @2x / retina / vector source needs `tileSize:512` or every zoom level is off by one (this silently over-zoomed a bake once — France overflowed the frame top-to-bottom).
+- **Antimeridian**: a feature crossing ±180° (Russia, Fiji, NZ) smears under per-vertex `map.project()`. `bake-basemap.mjs` **unwraps longitudes around the camera-center ref** before projecting, which handles it; it still warns if a feature spans >180° even after unwrap.
+- **Smoothness = per-frame complete tiles + eased camera.** In the bake, `await map.once('idle')` before each screenshot (= Remotion `delayRender`) and ease the camera with `easeInOutCubic` (= interpolate+Easing). `preserveDrawingBuffer:true`, `fadeDuration:0`, large `maxTileCacheSize`.
+- **Overlay alignment**: project feature borders at a **held** camera and only animate the overlay during the hold — a moving camera + a fixed projected path drift apart.
+- **Pre-hold hidden state**: an overlay revealed _at_ the hold must be `gsap.set` to its hidden state at build time (`scaleX:0`, full `stroke-dashoffset`, `opacity:0`) — a bare `fromTo` does **not** apply its "from" until the tween starts, so the element otherwise shows at its natural (visible, mispositioned) state during the zoom-in.
+- **Why bake at all** (the real reason — not just smoothness): baking freezes the imagery into **deterministic** pixels. Live raster tiles re-fetch every render and can change, and render-time network is forbidden. MapLibre _does_ render live in HF (just janky: tiles pop, deep zooms outrun loading); exposing the engine's per-frame `onBeforeCapture` hook (it exists — `frameCapture.ts:~1250`) would make live **smooth** — but it would **not** remove the need to freeze tiles for **determinism + offline reproducibility**. So `onBeforeCapture` would replace the _smoothness_ role of baking, not the _freeze_ role.
+
+## Out of scope
+
+3D photorealistic landmarks (Cesium territory) · per-country / per-template blocks (parametrize instead) · charts (→ `charts`). (In-engine _live_ MapLibre is possible but janky today — bake instead; revisit if the engine gains a per-frame ready hook.)
+
+## Register
+
+`director.md` classifier line (the lane fork) + `catalog-map.md` `maps/geo` row (add the basemap lane). Phase pipeline untouched.
diff --git a/.claude/skills-media/motion-graphics/categories/news/module.md b/.claude/skills-media/motion-graphics/categories/news/module.md
new file mode 100644
index 000000000..a35a7264e
--- /dev/null
+++ b/.claude/skills-media/motion-graphics/categories/news/module.md
@@ -0,0 +1,56 @@
+# news — category module (search-driven)
+
+Search a real news article → animate it as an **article-highlight** — a faithful HF port of the centered-emphasis technique. Signature motion: the article text is laid out at a **readable size (NOT zoomed)**, slides + fades up, then the **keyword is highlighted in place** — a marker band grows left→right behind it. No blow-up zoom. ~5–7s.
+
+Two layouts share that one highlight core — pick by aspect + whether there's a logo / person to feature:
+
+| Layout                    | Aspect     | Use when                                                        | Has                                                                        |
+| ------------------------- | ---------- | --------------------------------------------------------------- | -------------------------------------------------------------------------- |
+| **A · centered-emphasis** | 9:16 / 1:1 | text-only, social vertical                                      | kicker + one centered sentence + keyword highlight                         |
+| **B · full article**      | 16:9       | there's a real **outlet logo** and/or a **person** in the story | logo + date + multi-line headline highlight + dek + outlet + person cutout |
+
+## Source (Step 2)
+
+RWA / web search (or `hyperframes capture`) → a real article. The Director extracts the **keyword** (1–2 words / a number / a name — the hook) and, for Layout B, also a **brand logo**, a **date**, and a **person photo**. `asset_needs: { kind: news|web|image, query }` — request the logo (Wikimedia / simple-icons) and the person photo (Wikimedia) as separate asset queries. Run the person photo through `hyperframes remove-background <in> -o <out>.png` to get a transparent cutout.
+
+## The highlight core (shared by both layouts) — the marker-band technique
+
+The keyword highlight is a marker band grown L→R via `background-size` (NOT a `transform:scaleX` bar):
+
+```css
+.hl {
+  --hlw: 0%;
+  background-image: linear-gradient(var(--hl), var(--hl)); /* --hl: rgba(250,222,99,.6) */
+  background-repeat: no-repeat;
+  background-position: 0 72%;
+  background-size: var(--hlw) 64%;
+  box-decoration-break: clone;
+  -webkit-box-decoration-break: clone;
+}
+```
+
+`box-decoration-break:clone` makes the band **wrap across line breaks** seamlessly — a multi-word keyword spanning 2–3 lines still highlights continuously (the old `scaleX` bar could not). GSAP tweens the CSS var `--hlw` 0%→100%, **swept on AFTER the text settles — never pre-applied**. Optionally scale the duration with keyword length ~0.5–1.5s.
+
+## Layout A — centered-emphasis (9:16, text-only) — Builder
+
+1. **Lay out the key SENTENCE at a readable size — do NOT zoom.** Paper-light stage; an outlet `#kicker` (e.g. "BBC NEWS · TECHNOLOGY", brand accent) at top; the key sentence centered, serif, **~70–76px / 700 / line-height ~1.4**, `max-width ≈ 900`. The whole sentence stays legible; the keyword is emphasized _within_ it.
+2. Wrap the keyword inline: `… raised <span class="hl" id="kw">$750M</span> at …`.
+3. **Timeline** (seek-safe, paused): kicker fades+slides in → **sentence slides+fades up** (`set{autoAlpha:0,y:52}`→`to{autoAlpha:1,y:0,duration:0.8,ease:"power3.out"}`, no zoom) → **keyword highlight grows** (`--hlw 0→100%`, after the sentence settles) → gentle hold (`scale 1.012`).
+
+**Reference:** `samples/news/_ref-centered-emphasis.html` (+ `news/v2-*`).
+
+## Layout B — full article (16:9, logo + person) — Builder
+
+The editorial article-card layout (logo top-left + date + big serif headline with a multi-line keyword highlight + dek + outlet bottom-left + a background-removed **person cutout** bottom-right). 1920×1080, paper-light gradient stage, Georgia serif.
+
+1. **Logo** top-left (`#logo`, ~64px) — inline the outlet/brand SVG, `fill:currentColor`, set `color` to the mark's own hue (or near-black for a monochrome mark). **Date** below it (`#date`, ~30px, muted).
+2. **Headline** (`#headline`, Georgia **96px / 700**, `width≈1080`, `line-height 1.16`) with the keyword wrapped in `<span class="hl" id="kw">` — the highlight band sweeps across **all wrapped lines** of the phrase.
+3. **Dek** (`#dek`, Helvetica ~38px gray) under the headline; **outlet** (`#outlet`, Georgia bold ~50px) bottom-left.
+4. **Person cutout** (`#subject`, the bg-removed PNG, `height≈860`, `right:40; bottom:0`, `drop-shadow`) — **slides up from bottom-right** as the hero beat.
+5. **Timeline** (seek-safe, paused): logo `back.out` @0.15 → date @0.4 → **subject slides up** (`set{autoAlpha:0,x:90,y:60}`→`to{autoAlpha:1,x:0,y:0,duration:0.85,ease:"power3.out"}`) @0.45 → headline @0.7 → dek @1.5 → outlet @1.9 → **keyword highlight** (`--hlw 0→100%`, `duration:0.8`) @2.2. duration ~6.5s.
+
+**Reference:** `samples/news/_ref-article-layout.html` (a real article rendered with a real outlet logo + a background-removed person + a real story).
+
+## Critical
+
+Highlight is **grown in place, swept on AFTER the text — never pre-applied**. The text **stays readable — do NOT zoom the keyword to fill the frame** (team feedback 2026-06-09: zoom loses context and reads wrong; the technique never zooms — it presents the text and highlights the word). For Layout B, the person MUST be a `remove-background` cutout (no rectangular photo box). Deterministic; honor `references/builder-contract.md`.
diff --git a/.claude/skills-media/motion-graphics/categories/stat/module.md b/.claude/skills-media/motion-graphics/categories/stat/module.md
new file mode 100644
index 000000000..a283d87e4
--- /dev/null
+++ b/.claude/skills-media/motion-graphics/categories/stat/module.md
@@ -0,0 +1,21 @@
+# stat — category module
+
+A single **hero number** reveal. Asset-free (the "input" is the number). ~4–6s.
+
+## Plan (Director)
+
+`content`: `{ value, prefix ($), suffix (% / x / K-M-B), label, ring: bool }`. Envelope: bold display font, restrained palette + one accent.
+
+## Vocabulary / leans on
+
+- Block: **`apple-money-count`** (finance-flavoured: $ counter + green flash + money burst + SFX) when it fits; otherwise hand-author.
+- Rules: `hyperframes-animation/rules/{counting-dynamic-scale, stat-bars-and-fills}`.
+- Primitives: `count_up` (odometer) · `scale_pop` · `ring_fill` (arc) · `label_stagger` (after value) · `hold`.
+
+## Build (reuse-first)
+
+Reuse `apple-money-count` + set target / prefix / suffix / label / palette; **or** hand-author per the proven prototype `v0-stat-motion-demo`:
+
+- **count-up is timeline-driven** — tween a proxy `{v:0}→target` with `onUpdate` writing the formatted number (seek-safe; never setInterval/wall-clock).
+- `font-variant-numeric: tabular-nums`; decelerating ease; ~1.2–1.6s then **hold** the final value.
+- ring/arc via `stroke-dashoffset`, finishing in sync with the count-up; label fades in **after** the number lands (value → meaning).
diff --git a/.claude/skills-media/motion-graphics/categories/tweet/module.md b/.claude/skills-media/motion-graphics/categories/tweet/module.md
new file mode 100644
index 000000000..8c1f75954
--- /dev/null
+++ b/.claude/skills-media/motion-graphics/categories/tweet/module.md
@@ -0,0 +1,16 @@
+# tweet — category module (search-driven)
+
+**Search a tweet → animate the tweet card.** Grounded in a real post (RWA). ~4–8s.
+
+## Source (Step 2)
+
+RWA `search_tweets` (specific query, or a given tweet URL/id) → tweet: author, handle, avatar, text, timestamp, metrics (likes/reposts). `asset_needs`: `{ kind: tweet, query|source, treatment: none }`. Freeze the avatar + any embedded media.
+
+## Vocabulary / leans on
+
+- Block: registry **`x-post`** (animated X/Twitter post card overlay with engagement metrics) — reuse it directly.
+- Primitives: card slide/scale-in · text type-on / line reveal · avatar pop · metrics **count-up** · optional emphasis on a keyword.
+
+## Build (reuse-first)
+
+`npx hyperframes add x-post` → fill author / handle / avatar / text / metrics from the resolved tweet; animate the card in, type-on the text (or line-by-line reveal), count-up the metrics. Frozen project-local avatar/media (never a remote URL). `export: alpha-overlay` if it's meant to sit over other footage.
diff --git a/.claude/skills-media/motion-graphics/categories/webpage/module.md b/.claude/skills-media/motion-graphics/categories/webpage/module.md
new file mode 100644
index 000000000..666dd2d95
--- /dev/null
+++ b/.claude/skills-media/motion-graphics/categories/webpage/module.md
@@ -0,0 +1,21 @@
+# webpage — category module (search-driven)
+
+**Animate a webpage / link** (the "website animation" use case). Search-driven: the user gives or names a URL → fetch/capture it → animate it (scroll-through, UI reveal, cursor demo, region callouts). Distinct from captioning an existing _video file_ (that's `/embedded-captions`) and from a narrated video _of_ a site (that's a `/product-launch-video` site-tour ask); here the source is a _web page_ and the output is a short, unnarrated highlight shot.
+
+## Source (Step 2)
+
+Fetch the page via `hyperframes capture` (DOM + screenshots) or a provided screenshot → frozen project-local image(s)/DOM. `asset_needs`: `{ kind: web, source: <url>, treatment: none }`.
+
+## Vocabulary / leans on
+
+- Rules: `hyperframes-animation/rules/{3d-page-scroll, demo-page-scroll-spotlight, cursor-click-ripple, coordinate-target-zoom, viewport-change}`.
+- Primitives: scroll pan · spotlight/dim · cursor move + click-ripple · zoom-to-region · callout pin + label.
+
+## Build (reuse-first)
+
+Place the captured page as the base layer; animate a **scroll-through** (translateY over the page height), **spotlight** key regions (dim + highlight), a **cursor** that moves and clicks (ripple), **zoom** to a coordinate, and **callout** pins/labels anchored to page regions. Honor `builder-contract.md`.
+
+**Two rules that match the news article-highlight (see `../news/module.md`):**
+
+- **Highlights are swept/animated ON, never pre-applied** — a spotlight box wipes in (`scaleX 0→1`), a marker sweeps a region, a callout pops _after_ the zoom lands; the page never starts pre-annotated.
+- **Anchor to REAL element positions** — `hyperframes capture` gives the page HTML/DOM, so measure the target element (`getBoundingClientRect` → stage-local) and zoom/highlight it exactly, step-by-step (the "highlight a real element" technique). Don't eyeball coords.
diff --git a/.claude/skills-media/motion-graphics/grounding/PROTOCOL.md b/.claude/skills-media/motion-graphics/grounding/PROTOCOL.md
new file mode 100644
index 000000000..b6e460e55
--- /dev/null
+++ b/.claude/skills-media/motion-graphics/grounding/PROTOCOL.md
@@ -0,0 +1,64 @@
+# locate — find "X" in an image (no detector API assumed)
+
+The single contract every consumer (asset-fusion ring, webpage highlight, future
+explainer/recut overlays) uses:
+
+```
+locate(image, target-description) → { box: [x0,y0,x1,y1], center: [cx,cy] }   # normalized 0..1
+```
+
+## Why this exists
+
+Author models are unreliable at **regressing pixel coordinates** on a cluttered
+full image (measured: weak vision models ~16–24% center error → rings land off-target)
+but reliable at **picking a numbered strip** (~3–4% with the loop below). So:
+never eyeball coordinates; localize by discrete choice. (RSVP, ACL 2025.)
+
+## Routing — pick the cheapest path that's actually available
+
+1. **A strong detector is available** (e.g. `GEMINI_API_KEY` in env) →
+   `node grounding/locate.mjs auto <img> "<target>"` — one call, done.
+   **Never assume the key exists.** No key → path 2.
+2. **No detector (the normal case)** → YOU are the localizer; run the grid loop.
+
+## The grid loop (you read images between steps)
+
+```
+node grounding/locate.mjs overlay <img> --out /tmp/g
+  → READ /tmp/g/gv.png (vertical strips 1-9) and gh.png (horizontal 1-9);
+    decide which strip numbers the target spans (list EVERY strip it touches).
+node grounding/locate.mjs region <img> --vids 4,5 --hids 6,7 --out /tmp/g
+  → READ /tmp/g/gc.png (the region cropped + upscaled, finer 6×6 grid);
+    pick the finer strips. (Pick strips again — do NOT switch to estimating
+    coordinates; discrete choice is the whole point, at BOTH stages.)
+node grounding/locate.mjs final <img> --region <from step 2> --vids 3,4 --hids 3,4
+  → the final {box, center}.
+node grounding/locate.mjs mark <img> --box <final box> --out /tmp/g/check.png
+  → VERIFY: READ check.png. Red box ON the target → done. Off → redo
+    region/final with corrected strips (you now know which direction). Never
+    skip this step; it converts silent misses into one cheap retry.
+```
+
+## Ambiguity — resolve BEFORE localizing
+
+If the target description can match several instances ("a drum" when the scene
+has five), no geometry will save you. First make the reference unique
+("the right-most drum", "the drum on the front boat"), asking the user if
+needed — then run the loop.
+
+## Degradation path (if locate.mjs itself is unavailable)
+
+The idea is 5 lines — reproduce it with any image tool:
+draw a numbered 9×9 grid → pick the strips the target spans → crop that region
+(+pad ~0.4 strip) and upscale → draw a finer 6×6 grid → pick again → map back
+(`global = region_origin + local × region_size`) → draw the box and LOOK at it.
+
+## Notes
+
+- Geometry is frozen in `locate.mjs` (node + ffmpeg, zero npm deps — both
+  already required by hyperframes). Don't re-implement it ad hoc; the measured
+  accuracy holds for THIS implementation.
+- Consumers: `samples/asset-fusion/_ref-circle-highlight.html` takes `CFG.box`
+  directly from `final`/`auto` output.
+- Measured end-to-end (same agent, same template, only the localization step
+  differs): eyeballing 6.5% avg center error → this protocol 2.3%, no case worse.
diff --git a/.claude/skills-media/motion-graphics/grounding/locate.mjs b/.claude/skills-media/motion-graphics/grounding/locate.mjs
new file mode 100644
index 000000000..136b8074a
--- /dev/null
+++ b/.claude/skills-media/motion-graphics/grounding/locate.mjs
@@ -0,0 +1,227 @@
+#!/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). Full protocol: grounding/PROTOCOL.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-media/motion-graphics/phases/source/guide.md b/.claude/skills-media/motion-graphics/phases/source/guide.md
new file mode 100644
index 000000000..26297a758
--- /dev/null
+++ b/.claude/skills-media/motion-graphics/phases/source/guide.md
@@ -0,0 +1,21 @@
+# source phase — asset sourcing (asset-first)
+
+Runs **only when `shot-plan.json.asset_needs` is non-empty** (the form categories never reach here). Sources each needed asset → a **frozen project-local path** + a ledger (`assets/index.md`). Uses `/media-use` (capture / asset prep) plus, **when an external asset-search skill such as media-use is installed**, its `resolve` step. If no such search capability is available, it **degrades to asset-free** (see below).
+
+## Per asset_need
+
+- `image / icon / logo / svg` → media-use `resolve`: **search** (asset_scout: Google Images / SerpAPI + Noun Project), **generate** (image model), or **user-supplied** (logo). Optional `treatment`: cutout (remove-bg) / recolor / vectorize.
+- `news / web / tweet` → **RWA-style search** (media-use's documented lineage — `media-use/references/search-strategy.md` traces `resolve` to the RWA subagent). Two-pole queries: **atomic** (1–3 words, composable) or **specific** (5–15 words: a news event / tweet); never the middle. A failed specific query is dropped, not broadened.
+
+## Steps
+
+1. Read `asset_needs` from `shot-plan.json`.
+2. For each: **analyze → search → review (use/maybe/reject — selection is the hard part; do NOT take the first/generated result) → freeze** the kept asset into `assets/` (rehost remote URLs).
+3. Write `assets/index.md` — agent-readable ledger: `role → frozen path + provenance`.
+4. For `asset-fusion`: also capture the asset's measurable geometry (so Director Part 2 can set `element_positions`) + an eyedropper palette.
+
+## Degrade gracefully
+
+If a provider / search is unavailable, mark the need unmet in `context.log`; the category falls back to asset-free where possible (e.g. `news` → typographic headline without the sourced image).
+
+> Illustrative: `(cd "$PROJECT_DIR" && node <SKILL_DIR>/phases/source/resolve.mjs --plan ./shot-plan.json --out ./assets)` — or drive media-use's `resolve` procedure directly.
diff --git a/.claude/skills-media/motion-graphics/references/builder-contract.md b/.claude/skills-media/motion-graphics/references/builder-contract.md
new file mode 100644
index 000000000..5230e9d33
--- /dev/null
+++ b/.claude/skills-media/motion-graphics/references/builder-contract.md
@@ -0,0 +1,38 @@
+# Builder contract — composition rules (detail behind agents/builder.md)
+
+## Root must be sized
+
+Root `#stage` (`data-composition-id`) needs `position: relative; width: <W>px; height: <H>px`. Without a resolved height, flex children collapse to ~0 and content piles into the top-left. Automated gates may miss it, so inspect proof snapshots.
+
+## Layout before animation
+
+1. Identify the **hero frame** (the moment most elements are visible) → build THAT in static CSS first, no GSAP.
+2. `.scene-content` fills the scene with padding, not offsets:
+   ```css
+   display: flex;
+   flex-direction: column;
+   justify-content: center;
+   width: 100%;
+   height: 100%;
+   padding: 120px 160px;
+   gap: 24px;
+   box-sizing: border-box;
+   ```
+   Never `position:absolute; top:Npx` on a content container (it overflows). Reserve absolute for decoratives. Keep ≥80px padding (title-safe margin).
+3. **Entrances**: use `gsap.from()` only for a non-clip element active from `t=0`. Inside `.clip`, in sub-compositions, and for later entrances, use explicit `fromTo()`. The CSS position is ground truth; the tween is the journey to it.
+4. **Exits**: only the final scene animates elements out; between scenes the transition IS the exit.
+
+## Timeline / clip contract
+
+- ONE `gsap.timeline({paused:true})` on `window.__timelines["<id>"]`; `tl.seek(0)`; never `tl.play()`.
+- Timed elements: `class="clip"` + `data-start`/`data-duration`/`data-track-index` + a stable `id`. Timeline-driven groups inside one full-duration clip don't each need timing attrs.
+- Deterministic only — no `Date.now()` / `Math.random()` / network. Count-ups tween a proxy object via `onUpdate` (seek-safe), never a wall-clock counter.
+
+## Correctness
+
+- **Seek-safe reveal of delayed elements**: on a non-clip element or wrapper inside a clip, use one registered timeline `fromTo()` with an explicit `{ autoAlpha: 0 }` start and `{ autoAlpha: 1, ... }` end. Do not page-load `gsap.set()` a later `.clip`, and never target `.clip` visibility; the framework owns its lifecycle. _(Eval finding.)_
+- **Count-ups** tween a proxy via `onUpdate`; they only render when the host advances the timeline **with events enabled** (`tl.time()` / non-suppressed seek). A bare `seek(t, true)` freezes them at 0 — the HF render host must seek with events on. _(Eval finding.)_
+- Clamp at tween bounds; don't let a spring overshoot past a held value.
+- Allowed eases: `power1–4`, `back`, `bounce`, `circ`, `elastic`, `expo`, `sine` (`.in/.out/.inOut`).
+- One motif per scene. Run `hyperframes check`; mark intentional overflow `data-layout-allow-overflow="true"`.
+- **Palette discipline**: define all colors in one `palette` object / CSS custom properties — no inline hex scattered through the markup (for `asset-fusion`, eyedropper the palette from the asset).
diff --git a/.claude/skills-media/motion-graphics/references/motion-vocabulary.md b/.claude/skills-media/motion-graphics/references/motion-vocabulary.md
new file mode 100644
index 000000000..d7be1df96
--- /dev/null
+++ b/.claude/skills-media/motion-graphics/references/motion-vocabulary.md
@@ -0,0 +1,43 @@
+# text module · motion vocabulary (primitive → GSAP)
+
+Named primitives the Director references in `motion` strings and the Builder implements. `code_hint`s are framework-neutral physics; the GSAP recipe is the HF implementation. Prefer an HF **registry component** (bottom) when one fits — don't reinvent.
+
+## Entry
+
+| primitive                     | GSAP recipe (into CSS end-state)                               | suits                     |
+| ----------------------------- | -------------------------------------------------------------- | ------------------------- |
+| `slide_bottom/top/left/right` | `from({ y:±150 / x:±200, opacity:0, ease:"power4.out" })`      | calm, build, professional |
+| `scale_grow`                  | `from({ scale:0, opacity:0, duration:.6, ease:"power2.out" })` | calm, gentle              |
+| `scale_punch`                 | `from({ scale:.6, opacity:0, ease:"back.out(2.2)" })`          | impact, energetic         |
+| `fade_in`                     | `from({ opacity:0, duration:.4 })`                             | subtle                    |
+| `fade_blur`                   | `from({ opacity:0, filter:"blur(14px)" })`                     | cinematic, dreamy         |
+| `typewriter`                  | reveal via clip/`SplitText` width step                         | technical, narrative      |
+| `word_reveal`                 | per-word `from({opacity:0,y:..}, stagger:.1)`                  | storytelling              |
+| `wave`                        | per-letter `from({y:..}, stagger:{each:.04})`                  | flowing, musical          |
+| `bounce_in`                   | `from({y:-120}, ease:"bounce.out")`                            | playful                   |
+| `slam`                        | `from({ y:-300, ease:"power4.out" })` + shake on land          | impact, heavy             |
+
+## Emphasis (in place, often on a beat)
+
+| primitive     | GSAP recipe                                                          | suits              |
+| ------------- | -------------------------------------------------------------------- | ------------------ |
+| `scale_pulse` | `to({ scale:1.12, yoyo:true, repeat:1, ease:"sine.inOut" })` at beat | rhythmic, peak     |
+| `shake`       | `to({ keyframes:[{x:-9},{x:9},{x:0}], ease:"none" })`                | urgent, intense    |
+| `glow`        | `to({ textShadow:"0 0 46px <ink/accent>", yoyo:true, repeat:1 })`    | important, magical |
+| `color_shift` | `to({ color:"<accent>" })` (or accent on the word in CSS)            | dynamic            |
+
+## Exit
+
+| primitive   | GSAP recipe                                        | suits      |
+| ----------- | -------------------------------------------------- | ---------- |
+| `fade_out`  | `to({ opacity:0, duration:.4, ease:"power2.in" })` | ending     |
+| `slide_out` | `to({ y/x: off, opacity:0, ease:"power2.in" })`    | transition |
+| `scale_out` | `to({ scale:1.06, opacity:0, ease:"power2.in" })`  | transition |
+
+## Accent graphics (not text)
+
+`underline_sweep` `fromTo({scaleX:0},{scaleX:1}, transformOrigin:"left center")` · `bar_wipe` · `hold_breath` `to({scale:1.015, ease:"sine.inOut"})`.
+
+## Prefer HF registry components when they fit
+
+`caption-kinetic-slam` · `caption-editorial-emphasis` · `caption-neon-glow` · `caption-glitch-rgb` · `caption-particle-burst` · `caption-weight-shift` · `caption-matrix-decode` · `caption-pill-karaoke` · `shimmer-sweep`. These are pre-built, in-ecosystem, and already render-tested — the Builder should reach for them before hand-rolling an equivalent.
diff --git a/.claude/skills-media/motion-graphics/references/shot-plan-ir.md b/.claude/skills-media/motion-graphics/references/shot-plan-ir.md
new file mode 100644
index 000000000..5a847af7d
--- /dev/null
+++ b/.claude/skills-media/motion-graphics/references/shot-plan-ir.md
@@ -0,0 +1,54 @@
+# shot-plan IR
+
+The single contract between Director and Builder. One file: `PROJECT_DIR/shot-plan.json`.
+
+```jsonc
+{
+  // ── envelope (every category) ──
+  "category": "kinetic-type | stat | charts | logo-reveal | lower-thirds | webpage | news | tweet | asset-fusion",
+  "duration_s": 6,
+  "fps": 30,
+  "canvas": { "w": 1080, "h": 1920, "aspect": "9:16" },
+  "style": "free-form visual direction (mood / energy / reference)",
+  "palette": ["#…"], // or "derive-from-asset"
+  "font": "<HF embed-list font>",
+  "beats": [12, 37], // optional accent frames/seconds
+  "export": "mp4", // or "alpha-overlay" (transparent webm/mov)
+
+  // ── sourcing seam (Director Part 1) — [] means skip the source phase ──
+  "asset_needs": [
+    {
+      "role": "hero",
+      "kind": "image|icon|logo|svg|news|web|tweet",
+      "query": "…",
+      "source": "…",
+      "treatment": "cutout|recolor|vectorize|none",
+    },
+  ],
+
+  // ── build directive (Director Part 2, reuse-first) ──
+  "block": "<catalog block id, e.g. data-chart | caption-kinetic-slam>", // optional
+  "customize": {
+    /* what to change on the block: data, text, palette, positions */
+  },
+
+  // ── category-specific content ──
+  "content": {
+    /* shape varies by category, below */
+  },
+}
+```
+
+**Per-category `content` shapes:**
+
+- `kinetic-type` → `scenes[]` `{ id, start, end, text, emphasis_words[], emotion, motion, beats[] }`
+- `stat` → `{ value, prefix, suffix, label, ring: bool }`
+- `charts` → `{ type: bar|line|pie|race|pct, data[], labels[], headline, axes: bool }`
+- `logo-reveal` → `{ logo: <asset path>, tagline, url }`
+- `lower-thirds` → `{ name, role, position, brand_colors[] }`
+- `webpage` → `{ url, capture, highlights: [ { selector|region, label } ] }` (step-highlight a real captured page)
+- `news` → `{ outlet, headline, body, keyword, layout: A|B, logo?, date?, subject? }` (article-highlight: lay text out readable — **no zoom** — then sweep a marker band over the keyword in place. Layout **A** = centered-emphasis 9:16 text-only; **B** = full article 16:9 with `logo` + `date` + `subject` (a person photo → `remove-background` cutout))
+- `tweet` → `{ author, handle, avatar, text, metrics }`
+- `asset-fusion` → `{ data_type, asset: <path>, affordance, element_positions: {center, extent, safe[], avoid[]}, derived_palette[], connectors[] }`
+
+**Invariants:** `scenes` (if present) partition `[0, duration_s]` with no gaps/overlaps · empty `asset_needs` ⇒ Step 2 (source) is skipped · a named `block` ⇒ the Builder reuses + customizes it rather than hand-authoring.
diff --git a/.claude/skills-media/motion-graphics/samples/asset-fusion/_ref-circle-highlight.html b/.claude/skills-media/motion-graphics/samples/asset-fusion/_ref-circle-highlight.html
new file mode 100644
index 000000000..ef4c83c2e
--- /dev/null
+++ b/.claude/skills-media/motion-graphics/samples/asset-fusion/_ref-circle-highlight.html
@@ -0,0 +1,306 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>asset-fusion · circle-highlight TEMPLATE (drop-in)</title>
+    <!-- ============================================================
+         DROP-IN circle-highlight (editorial amber annotation style). To reuse:
+           1) set CFG below (asset path, EVEN stage dims, BOX from the locate protocol, LABEL)
+           2) render with even width/height (ODD width => ffmpeg encode fails!)
+         BOX comes from grounding/PROTOCOL.md (locate.mjs loop) — NEVER eyeball coords.
+         Everything (wash pool, double ring, connector, callout, brackets) is
+         computed from BOX. Set MODE='full' (ring+label+brackets) or 'circle'
+         (ring only). Gotchas are flagged inline.
+         ============================================================ -->
+    <style>
+      :root {
+        --ink: #0a0c10;
+        --amber: #f2c078;
+        --paper: #f5efe6;
+      }
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        overflow: hidden;
+        background: var(--ink);
+      }
+      #stage {
+        position: relative;
+        overflow: hidden;
+        background: #fff;
+        font-family:
+          "Inter",
+          -apple-system,
+          system-ui,
+          sans-serif;
+      }
+      .scene {
+        position: absolute;
+        inset: 0;
+      }
+      #shot {
+        position: absolute;
+        inset: 0;
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+        display: block;
+        z-index: 0;
+      }
+      #wash {
+        position: absolute;
+        inset: 0;
+        z-index: 1;
+      }
+      #ann {
+        position: absolute;
+        inset: 0;
+        z-index: 3;
+        pointer-events: none;
+        overflow: visible;
+      }
+      #ring-a,
+      #ring-b,
+      #conn {
+        stroke: var(--amber);
+        fill: none;
+        stroke-linecap: round;
+      }
+      #ring-a {
+        stroke-width: 8;
+        filter: drop-shadow(0 0 12px rgba(242, 192, 120, 0.5));
+      }
+      #ring-b {
+        stroke-width: 5;
+        opacity: 0.85;
+      }
+      #conn {
+        stroke-width: 5;
+      }
+      #callout {
+        position: absolute;
+        z-index: 4;
+        display: inline-flex;
+        align-items: center;
+        gap: 14px;
+        padding: 15px 28px;
+        background: var(--ink);
+        border: 2px solid var(--amber);
+        border-radius: 999px;
+        box-shadow: 0 14px 40px rgba(8, 9, 12, 0.6);
+        transform-origin: left center;
+      }
+      #callout .dot {
+        width: 12px;
+        height: 12px;
+        border-radius: 50%;
+        background: var(--amber);
+      }
+      #callout .label {
+        font-size: 33px;
+        font-weight: 700;
+        letter-spacing: 0.14em;
+        color: var(--paper);
+        text-transform: uppercase;
+        white-space: nowrap;
+      }
+      .tick {
+        position: absolute;
+        z-index: 5;
+        width: 56px;
+        height: 56px;
+        border: 3px solid var(--paper);
+        opacity: 0.55;
+      }
+      .tick.tl {
+        top: 44px;
+        left: 44px;
+        border-right: none;
+        border-bottom: none;
+      }
+      .tick.tr {
+        top: 44px;
+        right: 44px;
+        border-left: none;
+        border-bottom: none;
+      }
+      .tick.bl {
+        bottom: 44px;
+        left: 44px;
+        border-right: none;
+        border-top: none;
+      }
+      .tick.br {
+        bottom: 44px;
+        right: 44px;
+        border-left: none;
+        border-top: none;
+      }
+      #scan {
+        position: absolute;
+        inset: 0;
+        z-index: 5;
+        pointer-events: none;
+        mix-blend-mode: overlay;
+        background: repeating-linear-gradient(
+          to bottom,
+          rgba(245, 239, 230, 0.05) 0 1px,
+          transparent 1px 4px
+        );
+      }
+    </style>
+  </head>
+  <body>
+    <!-- ⚠ data-width/height + the #stage width/height MUST be set STATICALLY here
+         (the renderer's StaticGuard reads them at compile time, BEFORE JS runs — JS
+         setAttribute is too late and the render falls back to portrait 1080×1920).
+         Keep these EQUAL to CFG.W/CFG.H below, and EVEN. -->
+    <div
+      id="stage"
+      style="width: 1998px; height: 1368px"
+      data-composition-id="circle-highlight"
+      data-start="0"
+      data-duration="6"
+      data-fps="30"
+      data-width="1998"
+      data-height="1368"
+    >
+      <div class="scene clip" data-start="0" data-duration="6" data-track-index="0">
+        <img id="shot" alt="asset" />
+        <div id="wash"></div>
+        <svg id="ann">
+          <ellipse id="ring-a" />
+          <ellipse id="ring-b" />
+          <path id="conn" />
+        </svg>
+        <div id="callout"><span class="dot"></span><span class="label"></span></div>
+        <div id="scan"></div>
+        <span class="tick tl"></span><span class="tick tr"></span><span class="tick bl"></span
+        ><span class="tick br"></span>
+      </div>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <script>
+      // ====== CONFIG — set these (BOX from the locate protocol) ======
+      const CFG = {
+        asset: "assets/shot.png",
+        W: 1998,
+        H: 1368, // EVEN dims (odd width => encode fails)
+        box: [0.244, 0.277, 0.607, 0.425], // [x0,y0,x1,y1] normalized, from locate.mjs
+        label: "HyperFrames",
+        mode: "full", // 'full' = ring+connector+label+brackets+scan ; 'circle' = ring only
+      };
+      // =====================================================
+      const S = document.getElementById("stage"); // dims are STATIC in the HTML above (must equal CFG.W/H)
+      document.getElementById("shot").src = CFG.asset;
+      const ann = document.getElementById("ann");
+      ann.setAttribute("viewBox", `0 0 ${CFG.W} ${CFG.H}`);
+      ann.setAttribute("width", CFG.W);
+      ann.setAttribute("height", CFG.H);
+
+      // geometry from BOX
+      const [x0, y0, x1, y1] = CFG.box;
+      const cx = ((x0 + x1) / 2) * CFG.W,
+        cy = ((y0 + y1) / 2) * CFG.H;
+      const bw = (x1 - x0) * CFG.W,
+        bh = (y1 - y0) * CFG.H;
+      const rxA = bw / 2 + 40,
+        ryA = bh / 2 + 42;
+      // wash: a lit radial pool centered on the box, dark elsewhere
+      const px = (((x0 + x1) / 2) * 100).toFixed(1),
+        py = (((y0 + y1) / 2) * 100).toFixed(1);
+      const ex = (((x1 - x0) / 2) * 1.15 * 100).toFixed(1),
+        ey = (((y1 - y0) / 2) * 1.4 * 100).toFixed(1);
+      document.getElementById("wash").style.background =
+        `radial-gradient(ellipse ${ex}% ${ey}% at ${px}% ${py}%, rgba(8,9,12,0) 0%, rgba(8,9,12,.1) 42%, rgba(8,9,12,.66) 70%, rgba(8,9,12,.9) 100%)`;
+      const ra = document.getElementById("ring-a"),
+        rb = document.getElementById("ring-b");
+      ra.setAttribute("cx", cx);
+      ra.setAttribute("cy", cy);
+      ra.setAttribute("rx", rxA);
+      ra.setAttribute("ry", ryA);
+      ra.setAttribute("transform", `rotate(-4 ${cx} ${cy})`);
+      rb.setAttribute("cx", cx);
+      rb.setAttribute("cy", cy);
+      rb.setAttribute("rx", rxA - 20);
+      rb.setAttribute("ry", ryA - 16);
+      rb.setAttribute("transform", `rotate(3 ${cx} ${cy})`);
+      // callout: above-right of the box (flip left if box is on the right edge)
+      const right = cx < CFG.W * 0.62;
+      const co = document.getElementById("callout");
+      co.querySelector(".label").textContent = CFG.label;
+      const coX = right ? Math.min(cx + rxA + 10, CFG.W - 360) : Math.max(cx - rxA - 360, 30);
+      const coY = Math.max(cy - ryA - 60, 40);
+      co.style.left = coX + "px";
+      co.style.top = coY + "px";
+      const conn = document.getElementById("conn");
+      const ex0 = cx + (right ? rxA * 0.75 : -rxA * 0.75),
+        ey0 = cy - ryA * 0.7;
+      conn.setAttribute(
+        "d",
+        `M ${ex0} ${ey0} C ${(ex0 + coX) / 2} ${ey0 - 50}, ${coX - 20} ${coY + 70}, ${coX + 2} ${coY + 26}`,
+      );
+
+      // ====== seek-safe timeline ======
+      window.__timelines = window.__timelines || {};
+      const tl = gsap.timeline({ paused: true });
+      // GOTCHA: getTotalLength can read 0 before layout -> dash fails -> a solid
+      // line shows at t=0. Fall back to a constant AND gate with autoAlpha:0.
+      const lenA = ra.getTotalLength() || 1900,
+        lenB = rb.getTotalLength() || 1750,
+        lenC = conn.getTotalLength() || 220;
+      const full = CFG.mode === "full";
+      gsap.set("#wash", { autoAlpha: 0 });
+      gsap.set(ra, { strokeDasharray: lenA, strokeDashoffset: lenA, autoAlpha: 0 });
+      gsap.set(rb, { strokeDasharray: lenB, strokeDashoffset: lenB, autoAlpha: 0 });
+      gsap.set(conn, { strokeDasharray: lenC, strokeDashoffset: lenC, autoAlpha: 0 });
+      gsap.set("#callout", { autoAlpha: 0, scale: 0.6 });
+      gsap.set("#scan", { autoAlpha: 0 });
+      gsap.set(".tick", { autoAlpha: 0 });
+      if (!full) {
+        document.getElementById("conn").remove();
+        document.getElementById("callout").remove();
+        document.getElementById("scan").remove();
+        document.querySelectorAll(".tick").forEach((t) => t.remove());
+      }
+
+      tl.to("#wash", { autoAlpha: 1, duration: 0.9, ease: "power2.out" }, 0.6);
+      if (full) {
+        tl.to("#scan", { autoAlpha: 1, duration: 0.8 }, 0.7);
+        tl.to(".tick", { autoAlpha: 0.55, duration: 0.5, stagger: 0.06 }, 0.8);
+      }
+      tl.to(ra, { autoAlpha: 1, duration: 0.08 }, 1.3);
+      tl.to(ra, { strokeDashoffset: 0, duration: 0.6, ease: "power2.inOut" }, 1.3);
+      tl.to(rb, { autoAlpha: 1, duration: 0.08 }, 1.68);
+      tl.to(rb, { strokeDashoffset: 0, duration: 0.5, ease: "power2.inOut" }, 1.68);
+      if (full) {
+        tl.to(conn, { autoAlpha: 1, duration: 0.05 }, 2.55);
+        tl.to(conn, { strokeDashoffset: 0, duration: 0.35, ease: "power3.out" }, 2.6);
+        tl.to("#callout", { autoAlpha: 1, scale: 1, duration: 0.45, ease: "back.out(2.4)" }, 2.95);
+      }
+      window.__timelines["circle-highlight"] = tl;
+      tl.seek(0);
+      if (!window.__HYPERFRAMES_HOST__) {
+        const fit = () => {
+          const s = Math.min(innerWidth / CFG.W, innerHeight / CFG.H) * 0.96;
+          S.style.transform = `scale(${s})`;
+          S.style.transformOrigin = "center center";
+          S.style.position = "absolute";
+          S.style.left = "50%";
+          S.style.top = "50%";
+          S.style.marginLeft = -(CFG.W / 2) + "px";
+          S.style.marginTop = -(CFG.H / 2) + "px";
+        };
+        addEventListener("resize", fit);
+        fit();
+        tl.eventCallback("onComplete", () => setTimeout(() => tl.restart(), 1000));
+        tl.play();
+      }
+    </script>
+  </body>
+</html>
diff --git a/.claude/skills-media/pr-to-video/SKILL.md b/.claude/skills-media/pr-to-video/SKILL.md
new file mode 100644
index 000000000..3f3ba7e8c
--- /dev/null
+++ b/.claude/skills-media/pr-to-video/SKILL.md
@@ -0,0 +1,268 @@
+---
+name: pr-to-video
+description: "Turn a GitHub pull request (a PR URL, owner/repo#N, or 'this PR' in a checked-out repo) into a code-change explainer video — changelog, feature reveal, fix, or refactor walkthrough built from the diff, commits, and files: the input is a code change, not a website. Not a product promo (/product-launch-video) or a no-PR topic explainer (/faceless-explainer). Unclear → /hyperframes."
+---
+
+> **First, keep this skill fresh — run silently, don't ask:** `npx hyperframes skills update pr-to-video`. A fast no-op when everything is current; otherwise it refreshes this skill plus the core domain skills it depends on before you rely on them.
+
+> **media-use**: Before sourcing audio/images/logos, call `/media-use` to resolve BGM/SFX/images from the HeyGen catalog and brand logos from their official sources. Run `--adopt` first to register existing assets. See `/media-use` skill.
+
+# PR to HyperFrames
+
+Use this skill to ingest a GitHub pull request, understand the change, plan a code-change explainer, and build it frame by frame in HyperFrames. The input is a **code change** (read via `gh`), not a website — there is **no capture step and no real assets** beyond the contributors' avatars.
+
+> **The front door is `/hyperframes`.** You are the orchestrator. Run each step, verify its gate, and only then continue. This skill is for a **GitHub pull request** (a code change). Any other intent, a bare "make a video", or any uncertainty → read `/hyperframes` first — the intent layer owns every route decision, and a fresh creation arriving here without `BRIEF.md` goes through it anyway (Setup's opening rule).
+
+You are the orchestrator. Work in the resolved external `PROJECT_DIR`, never in the caller repository by default. Run steps in order and pass each gate before continuing. User-gated steps are Step 0, Step 3, and Step 6. Read `../hyperframes-core/references/brief-contract.md` before Step 0 — it defines the gate types and how `BRIEF.md`'s `flow`/`storyboard` derive the mode that governs the Step 3/4/6 gates. Do every step yourself except Step 5, where you dispatch a bounded pool of frame workers. Do not put design or motion rules here; those live in the frame-worker sub-agent, this skill's local `../hyperframes-animation/rules/` + `../hyperframes-animation/blueprints/`, and `hyperframes-creative`.
+
+Workflow: Step 0 setup → `hyperframes.json`; Step 1 ingest → `capture/extracted/` + `assets/<login>.png`; Step 2 design system → `frame.md`; Step 3 storyboard/script → `STORYBOARD.md` and `SCRIPT.md`; Step 3.1 audio → `audio_meta.json`; Step 4 visual design → enriched `STORYBOARD.md`; Step 5 frames → `compositions/frames/NN-*.html` and `index.html`; Step 6 final render → `renders/video.mp4`.
+
+---
+
+## Step 0: Setup
+
+Goal: Enter with a confirmed brief — including the **PR reference** (a full URL, an `<owner>/<repo>#<N>` ref, or "this PR" in a checked-out repo) — create the HyperFrames project, and make the brief durable. The style is always **claude** (fixed at Step 2, never asked).
+
+**The brief is confirmed by the intent layer, not by questions asked here.** Opening rule, in order: **(1)** `BRIEF.md` exists → read it and ask nothing — the brief is settled, and its `flow`/`storyboard` derive the mode (brief contract § 1). **(2)** No `BRIEF.md` but the project exists (`hyperframes.json` / `STORYBOARD.md` on disk) → resume from the storyboard's frontmatter and the recorded preferences; never re-interrogate a half-built project. **(3)** Neither — a fresh creation request that arrived here directly → read `/hyperframes` and run its intent layer (§ 4): it checks recipes and remembered defaults, and conducts this route's questions — including the PR-size → length doctrine, which lives whole in `../hyperframes/references/route-briefs.md` § /pr-to-video — then hands back the locked brief. Edit requests skip all of this — go do the edit.
+
+Resolve the project directory before doing any other work. Preserve a user-supplied project directory; otherwise use the durable external cache location printed by the resolver. Never create `videos/` in the caller repository:
+
+```bash
+PR="<url | owner/repo#N>"
+if [ -n "${EXPLICIT_PROJECT_DIR:-}" ]; then
+  PROJECT_DIR="$(node <SKILL_DIR>/scripts/project-dir.mjs --pr "$PR" --project-dir "$EXPLICIT_PROJECT_DIR")"
+else
+  PROJECT_DIR="$(node <SKILL_DIR>/scripts/project-dir.mjs --pr "$PR")"
+fi
+echo "PR-to-video project: $PROJECT_DIR"
+node <SKILL_DIR>/scripts/preflight.mjs
+```
+
+The capability preflight runs before fetch, story work, audio, or frame dispatch. If the installed CLI cannot run the validation command required by this skill, stop with its upgrade instruction rather than spending the run's context first.
+
+Initialize only if `$PROJECT_DIR/hyperframes.json` is missing. Its basename comes from the PR, such as `acme-sdk-pr-1842`; never use the workspace name or a timestamp.
+
+`npx hyperframes init "$PROJECT_DIR" --non-interactive --example=blank` — `init` checks the installed skills against the latest on GitHub and updates the global set if any are out of date.
+
+Every relative-path command below runs with `$PROJECT_DIR` as its working directory. Examples without an explicit subshell mean `(cd "$PROJECT_DIR" && …)`; never change the caller repository's working tree.
+
+**Write `BRIEF.md` immediately after init** (never before — `init` refuses a non-empty directory): the intent layer's locked brief, shape per `../hyperframes-core/references/brief-format.md`. Resolve `<MEDIA_DIR>` as the installed `/media-use` skill directory. Then record each preference-backed answer with `node <MEDIA_DIR>/scripts/prefs.mjs record --hyperframes .` (`brief-format.md` names the subset). If the intent layer adopted a recipe, run `node <MEDIA_DIR>/scripts/recipe.mjs use --hyperframes . --name <name>`; it copies its `frame.md` into the project (Step 2 is then skipped) and returns the skeletons Step 3 drafts from. A recipe fills answers, not approvals; the review gates still run.
+
+**Show sign-in status before proceeding past Setup** — run `npx hyperframes auth status` and relay its output verbatim. It reports whether voice/BGM will use HeyGen or local engines and, when signed out, how to sign in. Apply one branch:
+
+- **Collaborative:** wait for the user to sign in or explicitly choose `offline` / `go`.
+- **Autonomous:** state the status and continue through the available local engines.
+
+Do not silently omit a required capability when no offline provider exists; surface the blocker. Do not fold this decision into another question or write keys into a per-repo `.env`. Auth ownership and offline fallbacks: `/media-use` § Providers.
+
+**Gate:** `hyperframes.json` and `BRIEF.md` exist; the PR ref is captured in the brief; the preference-backed answers were recorded (brief contract § 2); sign-in status was shown (signed in, or continuing offline).
+
+---
+
+## Step 1: Ingest the PR (no capture)
+
+Goal: Fetch the PR's facts and fold them into the project as the source of information. There is **no website capture**. `fetch-pr.mjs` runs `gh` deterministically — completing the files list via paginated `gh api` so a large PR doesn't truncate at ~100 files, and writing only `capture/pr.json` + `capture/diff.patch` (no scratch dir). For MERGED PRs it also resolves a best-effort `shipped_version` (+ `version_source`) into `pr.json`, so the end card can cite a real version instead of inventing one. Then `ingest.mjs` folds that into the synthetic capture package offline.
+
+```bash
+PR="<url | owner/repo#N | N>"
+
+# Fetch the PR deterministically: runs gh, completes the files list via paginated
+# gh api (so a big PR doesn't truncate at ~100 files), writes only capture/pr.json +
+# capture/diff.patch — no scratch dir. gh auth / not-found / private errors exit 1 here.
+(cd "$PROJECT_DIR" && node <SKILL_DIR>/scripts/fetch-pr.mjs --pr "$PR" --out-dir ./capture)
+
+# Offline transform → capture/extracted/{tokens.json (colors:[] → claude palette),
+# visible-text.txt (the brief), people.json (contributors, bot-filtered, name+login,
+# avatarFile=assets/<login>.png)}.
+(cd "$PROJECT_DIR" && node <SKILL_DIR>/scripts/ingest.mjs \
+  --pr-json ./capture/pr.json --diff ./capture/diff.patch --out-dir ./capture/extracted)
+
+# The people front's one network step — download each contributor's GitHub avatar to
+# assets/<login>.png for the credits close. Best-effort; always exits 0.
+(cd "$PROJECT_DIR" && node <SKILL_DIR>/scripts/fetch-people-avatars.mjs \
+  --people ./capture/extracted/people.json)
+```
+
+If `fetch-pr.mjs` exits 1 (gh auth / not found / private), report its stderr and stop — **do not fabricate PR contents**. If `ingest.mjs` exits 1, read its stderr (usually a malformed `pr.json`), fix, and rerun (deterministic). `fetch-people-avatars.mjs` always exits 0; missing avatars just mean no credits close to author.
+
+`people.json` carries a `name` for whichever contributors `gh` already named (the PR author, commit authors, `mergedBy`) — `null` for the rest (reviewers/commenters/assignees, which `gh pr view` only ever gives a bare `login`). Before writing the credits close in Step 3, resolve any `null` name yourself for the 1-6 people who'll actually appear on that frame: `gh api users/<login> --jq .name` (you already have `gh` — no need to script this). If GitHub has no public name for that user either, fall back to the login on-screen and drop that person from the spoken line (see story-design.md's credits section — the voiceover must still say names, never raw handles).
+
+**Gate:** `capture/pr.json`, `capture/diff.patch`, `capture/extracted/tokens.json`, `capture/extracted/visible-text.txt`, and `capture/extracted/people.json` exist; you can state the PR's change in one clear sentence. `assets/<login>.png` is best-effort — its absence is not a failure.
+
+---
+
+## Step 2: Design System
+
+Goal: Adopt the claude frame preset; a script turns it into this video's `frame.md` + caption skin.
+
+The style is fixed — **claude** (warm editorial; a navy code surface built for diffs). Run:
+
+```bash
+node <SKILL_DIR>/scripts/build-frame.mjs --preset claude --hyperframes .
+```
+
+The script copies the claude preset's `FRAME.md` → `frame.md`, remixes it onto any brand tokens in `capture/extracted/tokens.json` (a PR has none → `colors:[]`/`fonts:[]` keeps claude's own palette, a complete design), copies the preset's caption skin to `.hyperframes/caption-skin.html`, and self-validates (exits 1 on a broken mapping). Proceed as soon as it exits 0 — no hand-editing.
+
+**Gate:** `build-frame.mjs` exited 0 — `frame.md` exists from the claude preset, and `.hyperframes/caption-skin.html` exists as the caption skin source.
+
+---
+
+## Step 3: Storyboard and Script
+
+Goal: Turn the PR into an approved frame-by-frame explanation plan.
+
+Read `../hyperframes-creative/references/story-spine.md` (hook language, value-before-evidence, storyboard-as-proposal), `references/story-design.md`, `../hyperframes-animation/blueprints-index.md`, `../hyperframes-core/references/storyboard-format.md`, and `../hyperframes-core/references/script-format.md`. Use them to write `STORYBOARD.md` and, when narration is needed, `SCRIPT.md`.
+
+Use `story-design.md` for the PR archetype (changelog / feature-reveal / fix-explainer / refactor-walkthrough), the PR-native frame types, hook, persuasion, beats, the per-frame word budget, and the credits close. The sequence comes from **narrative design, not the diff's file order** — explain the change, don't read the diff aloud. As a **soft guide**, consult the role→blueprint menu in `../hyperframes-animation/blueprints-index.md`: for each beat, write the voiceover in the shape its candidate blueprint implies and tag that candidate `blueprint:` id when one fits (story truth still decides which beats exist — never force a beat to fit a shape). Feature 2–4 real diff hunks (from `capture/diff.patch`), each a small legible snippet; name the `code-*` block each wants in the frame's `scene`. Frames carry no `asset_candidates` except the `credits` close (1–6 `assets/<login>.png` avatars). Use the exact required fields from the storyboard and script references.
+
+After drafting, run the review loop's plan pass — `../hyperframes-core/references/review-loop.md` § 1: open the board (don't ask whether to — run the preview from `PROJECT_DIR` in the background), present the plan as a proposal, and ask the two questions — approve or change, and **sketches first** (recommended) or skip. Feedback loops through chat or the board's comments file until approved. This is a **checkpoint gate** (brief contract § 1): in autonomous mode there is no board and nothing to ask — post the same summary as a heads-up and proceed; sketches collapse into the build, and the one preview question comes at Step 6.
+
+**Gate:** `STORYBOARD.md` exists, every frame has the required narrative fields, `SCRIPT.md` exists when narration is needed, and the user approved the plan (autonomous: the summary was posted as a heads-up).
+
+---
+
+## Step 3.1: Audio
+
+Goal: Generate narration, word timings, music, and audio metadata from the approved script.
+
+Start audio after Step 3 approval. Run it in the background, then continue to Step 4.
+
+**Choose the narration voice from the user's ask before invoking.** If the request named a voice, gender, or tone, pick a matching voice id and pass it with `--voice <id>`. The pipeline default is otherwise **Marcia (female)** on HeyGen / `am_michael` on Kokoro — so a request like "a male voice" is silently ignored unless you pass the flag. Voice ids are provider-specific; resolve against whichever provider Step 0's sign-in status selected: **HeyGen** (signed in) via `node <MEDIA_DIR>/audio/scripts/heygen-tts.mjs --list` (or `GET /v3/voices?engine=starfish`); **Kokoro** (offline) via the voice table in `<MEDIA_DIR>/audio/references/tts.md` (prefixes `am_`/`bm_` male, `af_`/`bf_` female). When the user expressed no preference, fall back to the remembered voice (brief contract § 2) before the pipeline default, and say which one you used; omit `--voice` only when neither names one. When the user explicitly picked a voice this run, record it (`prefs.mjs record --key voice`).
+
+`node <SKILL_DIR>/scripts/audio.mjs --script ./SCRIPT.md --storyboard ./STORYBOARD.md --hyperframes . --out ./audio_meta.json --voice <voice-id> &`
+
+The audio script handles narration, word timings, BGM lookup from HeyGen's music library, and timing metadata. BGM mood comes from the storyboard's `music:` field. This uses the HeyGen Audio API for retrieval, not generation, and the same `~/.heygen` credential as TTS. For provider details, read `../media-use/audio/references/tts.md`.
+
+If there is no narration and no `SCRIPT.md`, skip voice generation. BGM may still run if the storyboard has a music mood.
+
+**The canonical fully-silent marker** (shared across the workflows that reuse this audio model): `music: none` in the STORYBOARD.md top YAML block **and** no `SCRIPT.md`. That combination marks the project silent — no narration, no BGM, no SFX. `audio.mjs` recognizes it and generates nothing (it removes any stale `audio_meta.json`; an absent `audio_meta.json` is what assemble treats as silent), so this step is a clean skip. `music: none` with narration keeps TTS and turns only BGM off. Use exactly this spelling — don't improvise other markers.
+
+**Gate:** audio job has started, or the project is marked silent (`music: none` + no `SCRIPT.md`).
+
+---
+
+## Step 4: Frame Visual Design
+
+Goal: Add the visual direction, layout intent, and motion choices to each storyboard frame.
+
+**Sketch the board first (collaborative only).** The moment the plan is approved, run the sketch pass — `../hyperframes-core/references/review-loop.md` § 2 (don't wait on Step 3.1; sketches don't use timings): wireframe every frame yourself, mark each `built`, pause for the one layout question when the board is full, and revise only the sketches named until the board is confirmed. Stand-ins: for a **code beat**, a plain code panel with the filename and a few real diff lines as text — the `code-*` block wiring belongs to the workers. Only then write the visual design below onto the confirmed layouts. In autonomous mode, or when the user chose to skip sketches at Step 3, skip this pass — frames go straight from `outline` to `animated` at Step 5.
+
+Edit `STORYBOARD.md` in place. Do not create another storyboard. Use `frame.md` as source of truth for color, type, layout feel, and style.
+
+Read `references/visual-design.md`, `../hyperframes-animation/blueprints-index.md`, `references/motion-language.md`, `references/code-vocabulary.md`, and `../hyperframes-animation/rules-index.md`. Use `visual-design.md` for the method (the time-coded shot sequence, the inline Layout vocabulary, and the code-beat treatment), plus the required `## Video direction` block. Use `../hyperframes-animation/blueprints-index.md` to pick each frame's shot shape. Use `code-vocabulary.md` to pick the right `code-*` block per code beat (diff = `code-diff`, refactor = `code-morph`, new code = `code-typing`, …). Use `motion-language.md` (the motion vocabulary + the motion doctrine) and `../hyperframes-animation/rules-index.md` (valid rule names) for motion — do not invent motion or block/blueprint names.
+
+For every frame, write a **time-coded shot sequence** into `STORYBOARD.md` per `visual-design.md`'s method: pick the frame's blueprint (or compose), instantiate it with THIS frame's content, and pace each Scene's reveal to the voiceover so the frame develops across its full duration instead of front-loading then freezing. **For a code beat, the `code-*` block is the frame's `focal`** and the Scenes choreograph the surrounding claude Code Surface (the entry of the file/header, the camera onto the hunk, the landing line) — **not** the code animation itself, which the block owns. Immediately after each code frame's fields, add a `### Source excerpt` fenced `diff` block containing only the exact real hunk the worker must render (12 lines maximum). Select it here from `capture/diff.patch`; workers are forbidden from reopening that full diff. State layout and motion **inline** per Scene (vocabularies in `visual-design.md` and `motion-language.md`). Add one video-wide `## Video direction` block.
+
+Do not change story, script, `transition_in`, `asset_candidates`, or the PR source. Do not write HTML in this step. There is **no asset-staging step** — the only real assets are the credits avatars, already in `assets/`.
+
+**Gate:** every frame has a time-coded shot sequence whose reveals are paced to the voiceover (no front-loading); code frames name a `code-*` block as the `focal`; `## Video direction` exists. Collaborative: the sketch board was confirmed.
+
+---
+
+## Step 5: Build Frames
+
+Goal: Build every storyboard frame as an HTML composition and assemble the playable video.
+
+Wait for Step 3.1 audio to finish if audio was started. Then sync durations and fetch SFX; skip both if silent.
+
+`node <SKILL_DIR>/scripts/audio.mjs sync-durations --audio-meta ./audio_meta.json --storyboard ./STORYBOARD.md`
+
+`node <SKILL_DIR>/scripts/audio.mjs fetch-sfx --storyboard ./STORYBOARD.md --hyperframes .`
+
+Duration sync is mechanical: real voice duration wins; silent frames keep estimates; never hand-edit synced durations.
+
+**Pre-install the registry blocks** named across `STORYBOARD.md` once, before dispatch, so parallel workers don't race on the registry:
+
+`for b in <each registry block named in the storyboard>; do npx hyperframes add "$b"; done`
+
+Before dispatch, read `sub-agents/frame-worker.md` and `../hyperframes-core/references/subagent-dispatch.md`. Build bounded packets:
+
+```bash
+node <SKILL_DIR>/scripts/frame-packets.mjs --project "$PROJECT_DIR" --storyboard "$PROJECT_DIR/STORYBOARD.md"
+```
+
+The packet builder hard-fails a code frame without the upstream-selected `### Source excerpt`, and hard-caps packet bytes. Dispatch **at most three workers total**, balanced across the packet paths; each worker may build multiple assigned frames sequentially and reads shared instructions once. Workers read only their packet(s) and `frame.md`. They never open the full `STORYBOARD.md`, `capture/diff.patch`, or `capture/extracted/visible-text.txt`. Each worker writes only its assigned `compositions/frames/NN-*.html`; workers never edit `STORYBOARD.md`. When a frame has a **confirmed sketch** on disk (collaborative runs — review loop § 3), say so in that worker's dispatch context: the sketch is the existing `compositions/frames/NN-*.html`, and the worker dresses that layout rather than redrawing it (frame-worker § When a confirmed sketch exists).
+
+On a failed frame, re-dispatch **that frame only**, with its existing packet plus the exact validator/lint finding. One retry maximum. Do not replay a whole batch and do not retry without a concrete finding.
+
+**Full-bleed backgrounds ride on a `class="clip"` layer, never the `#root`.** A frame's ground (color field / gradient / grid) is its own full-duration background clip — a `background` set on the `#root` / `data-composition-id` element is clip-gated to the frame's window and is not a dependable ground, so dark content can land on the black host `body` and render invisible. The video's base ground is painted by the assembler from `frame.md`'s `canvas` color onto the index `#root`. (Full rule + self-check: `sub-agents/frame-worker.md`.)
+
+As each worker returns, mark that frame `animated` in `STORYBOARD.md`.
+
+After audio timings exist, build captions in the background and assemble the index:
+
+`node <SKILL_DIR>/scripts/captions.mjs build --storyboard ./STORYBOARD.md --audio-meta ./audio_meta.json --hyperframes . --out ./caption_groups.json &`
+
+`node <SKILL_DIR>/scripts/assemble-index.mjs --storyboard ./STORYBOARD.md --hyperframes .`
+
+`captions.mjs` uses the project's `.hyperframes/caption-skin.html` (claude's, copied in Step 2), injecting brand tokens from `frame.md`; `captions: skipped (<reason>)` is valid. `assemble-index.mjs` stages the credits avatars from `assets/` as an idempotent backstop.
+
+**Gate:** every frame is marked `animated` (collaborative: the sketch board was confirmed at Step 4), `index.html` exists, and captions are built or explicitly skipped.
+
+---
+
+## Step 6: Finalize
+
+Goal: Verify the assembled video, get user approval, and render the final MP4.
+
+Inject transitions, run checks, pause for review, then render.
+
+`node <SKILL_DIR>/scripts/transitions.mjs inject --storyboard ./STORYBOARD.md --hyperframes .`
+
+`node <SKILL_DIR>/scripts/transitions.mjs verify --storyboard ./STORYBOARD.md --index ./index.html`
+
+`npx hyperframes lint`
+
+`npx hyperframes check`
+
+`npx hyperframes snapshot --at <frame-midpoints>`
+
+`snapshot` stitches the captured frames into one contact sheet (`snapshots/contact-sheet.jpg`). Glance at it; if nothing is obviously broken, move on — don't linger here.
+
+If a command fails, surface stderr and stop — don't pile on recovery commands. Fix it yourself: the cheapest safe edit to `compositions/frames/NN-*.html`, then rerun the failed check.
+
+**Known false-positive — do not chase it.** `check` may report a handful of `text_box_overflow` errors of ~1–4px on the **caption** highlight words (selector `#caption-word-*` / `.caption-line`). The caption pill uses a deliberately snug `line-height` (set once in `scripts/captions.mjs`) and has **no `overflow:hidden`**, so a heavy display glyph's ink spills a few px into the pill's own padding — nothing is actually clipped. Treat these as expected and proceed. Do **not** inflate the caption `line-height` (it balloons the pill, which is worse). Only act on a `text_box_overflow` when it names a **frame** element (`#el-NN-*`), not a caption word.
+
+After checks pass, pause for user review — the review loop's final look (`../hyperframes-core/references/review-loop.md` § 4): one question, on the Studio that has been open since Step 3 — render now, or what changes? (Autonomous: the one kept question, preview first or render — open the preview with the command below on a yes.) Then deliver the MP4 with the contact sheet and the frame ids so revisions can target a single frame.
+
+Preview: `npx hyperframes preview "$PROJECT_DIR" --background`
+
+Render only after user approval (autonomous mode: after the preview-or-render question):
+
+`npx hyperframes render --skill=pr-to-video --quality high --output renders/video.mp4`
+
+Do not rerun `lint`, `check`, or `snapshot` after rendering unless the user asks.
+
+After the user is done reviewing (or after render when no more live edits are expected), stop only this project's background server: `npx hyperframes preview "$PROJECT_DIR" --stop`. Never tear it down while waiting for review.
+
+**Gate:** `lint` and `check` passed and the snapshots were inspected before render; user approved at the review pause (autonomous: checks passed and the delivery includes the contact sheet); `renders/video.mp4` exists. Final reply states the MP4 path and final duration.
+
+---
+
+## Quick Reference
+
+**Formats:** landscape `1920x1080`; portrait `1080x1920`; square `1080x1080` — derived from the destination (brief contract § 2). Set the format once in the storyboard frontmatter.
+
+**PR deltas vs a captured-asset workflow:** no Step 1 capture (the `gh` CLI ingests the PR into a synthetic `capture/extracted/` package — `tokens.json` + `visible-text.txt` + `people.json`); the only real assets are the contributors' `assets/<login>.png` avatars (the credits close); no `asset-descriptions.md`, no asset-staging step. Code beats are rendered by the `code-*` registry blocks on claude's navy Code Surface; the style is always **claude**.
+
+**Background scripts:** the workflow ships these under `scripts/`: `fetch-pr` (PR → `capture/pr.json` + `diff.patch` via `gh`; large-PR-safe, no scratch), `ingest` (→ synthetic capture package; offline), and `fetch-people-avatars` (contributor avatars → `assets/`); plus the shared engine — `build-frame` (adopt + brand-remix a preset into `frame.md` + caption skin), `audio` (TTS, BGM, SFX, duration sync), `captions`, `transitions` (inject + verify), and `assemble-index`. Everything else is the `hyperframes` CLI. Code blocks install via `npx hyperframes add <name>`.
+
+The reusable, domain-agnostic shot shapes live in `../hyperframes-animation/blueprints/` (indexed by `../hyperframes-animation/blueprints-index.md`); the `code-*` registry blocks are the code-beat vocabulary (`references/code-vocabulary.md`).
+
+| Read                                                                                                                                                        | When                                                                           |
+| ----------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------ |
+| `[../hyperframes-core/references/brief-contract.md](../hyperframes-core/references/brief-contract.md)`                                                      | Gate types, mode derivation from `BRIEF.md`, field semantics.                  |
+| `[../hyperframes-creative/references/story-spine.md](../hyperframes-creative/references/story-spine.md)`                                                    | Step 3: story doctrine — hook language, value-before-evidence, proposal shape. |
+| `[references/story-design.md](references/story-design.md)`                                                                                                  | Step 3: plan the PR explanation.                                               |
+| `[../hyperframes-animation/blueprints-index.md](../hyperframes-animation/blueprints-index.md)`                                                              | Step 3: role→blueprint menu. Step 4: pick the shot shape.                      |
+| `[../hyperframes-core/references/storyboard-format.md](../hyperframes-core/references/storyboard-format.md)`                                                | Step 3: write `STORYBOARD.md`.                                                 |
+| `[../hyperframes-core/references/script-format.md](../hyperframes-core/references/script-format.md)`                                                        | Step 3: write `SCRIPT.md`.                                                     |
+| `[../media-use/audio/references/tts.md](../media-use/audio/references/tts.md)`                                                                              | Step 3.1: choose or understand TTS providers.                                  |
+| `[references/visual-design.md](references/visual-design.md)`                                                                                                | Step 4: write the frame's shot sequence (+ Layout vocabulary).                 |
+| `[references/code-vocabulary.md](references/code-vocabulary.md)`                                                                                            | Step 4 + 5: pick + fill the `code-*` block for a code beat.                    |
+| `[references/motion-language.md](references/motion-language.md)`                                                                                            | Step 4: the motion vocabulary + the motion doctrine.                           |
+| `[references/cut-catalog.md](references/cut-catalog.md)`                                                                                                    | Step 4-5: the cut catalog (worker builds within-frame seams).                  |
+| `[../hyperframes-animation/rules-index.md](../hyperframes-animation/rules-index.md)` + `[../hyperframes-animation/rules/](../hyperframes-animation/rules/)` | Step 5: local rule recipe bodies for the cited motions.                        |
+| `[sub-agents/frame-worker.md](sub-agents/frame-worker.md)`                                                                                                  | Step 5: dispatch per-frame workers.                                            |
+| `[../hyperframes-core/references/subagent-dispatch.md](../hyperframes-core/references/subagent-dispatch.md)`                                                | Step 5: dispatch sub-agents safely.                                            |
+| `[../hyperframes-creative/frame-presets/claude/FRAME.md](../hyperframes-creative/frame-presets/claude/FRAME.md)`                                            | Step 2: the claude preset (fixed style).                                       |
diff --git a/.claude/skills-media/pr-to-video/references/code-vocabulary.md b/.claude/skills-media/pr-to-video/references/code-vocabulary.md
new file mode 100644
index 000000000..d880dcc64
--- /dev/null
+++ b/.claude/skills-media/pr-to-video/references/code-vocabulary.md
@@ -0,0 +1,111 @@
+# Code vocabulary — the `code-*` animation blocks
+
+PR videos run on two kinds of moving picture: **code** (the lines that changed) and **behavior** (what the change _does_ at runtime). This file is the vocabulary for both — the `code-*` blocks for code beats, and the **mechanism beat** (an invented animated diagram, or a `flowchart` / `data-chart`) for behavior beats. A video that is _all_ code reads flat; **alternate the two** (story-design plans the rhythm; see "Showing behavior" below).
+
+For code beats the registry ships purpose-built **code animation blocks** that render a diff, a typed-on snippet, a morph, a highlight, a scroll, or a 3D/particle/dissolve reveal — far better than hand-built motion. **Reach for one of these first** for any code beat; fall back to hand-authored composition only when none fits.
+
+- **Step 4 (visual design):** for each `diff` / `before_after` / code beat, name the block in the frame's `scene` (e.g. "the `request()` retry block, ~6 lines, `code-diff`"). One judgment call: which block.
+- **Step 5 (frame worker):** install the named block and fill it with the real diff/snippet (below). The block is the frame's centerpiece, composited onto claude's navy **Code Surface**.
+
+## Install + use
+
+Every block installs the same way (confirmed `packages/cli/src/commands/add.ts`):
+
+```bash
+npx hyperframes add <block-name>     # writes compositions/<block-name>.html
+```
+
+It is a self-contained sub-composition (inlined engine; a paused GSAP timeline the engine seeks per frame). Mount it in the frame as a sub-composition clip:
+
+```html
+<div
+  data-composition-id="code-diff"
+  data-composition-src="compositions/code-diff.html"
+  data-start="0"
+  data-duration="6"
+  data-track-index="1"
+  data-width="1920"
+  data-height="1080"
+></div>
+```
+
+**Customize by editing two globals** in the installed HTML's inline `<script>`:
+
+- `window.__TOKENS` — the code content, baked as Shiki tokens: `{ <seq>: { lang, theme, bg, fg, states: [ { code, tokens:[ {key, content, color, fontStyle} ] } ] } }`. Replace `code`/`tokens` with the PR's real snippet(s). `fontStyle` is a bitmask (`&1` italic, `&2` bold). The blocks bake `theme: "github-dark"` independently of the `code-snippet-*` themes below.
+- `window.__BLOCK` — selects the effect + timing: 2D `{ id, effect, seq, line?, duration }`; WebGL `{ id, effect, seq, duration, seed }`.
+
+The timeline registers synchronously at `window.__timelines[id]`. All blocks are **1920×1080** and **deterministic / seek-safe** (no CSS transitions, no rAF, seeded randomness — never `Math.random` / `Date.now`).
+
+## The animation blocks
+
+| Block                        | What it does                                                                                                      | Inputs of note                                                                                        | PR beat                                                                                                                     |
+| ---------------------------- | ----------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------- |
+| **`code-diff`**              | Unified diff inside an editor window: removed lines collapse in red, added lines expand in green, staggered. (6s) | `__TOKENS.diff.states` needs **exactly 2 states** (before, after) — the engine LCS-diffs them.        | The diff hunk (before→after); literal add/remove semantics. **The default PR block.**                                       |
+| **`code-morph`**             | One snippet transforms into another — shared tokens glide (FLIP), leavers fade out, enterers fade in. (7s)        | `__TOKENS.morph.states` (2+); reuse the same token `key` across states for a token that should glide. | A refactor / rename / signature change where continuity matters (not add/remove framing).                                   |
+| **`code-typing`**            | Per-character typewriter reveal with a gliding caret. (5s)                                                        | single state in `__TOKENS.feature.states[0]`.                                                         | A new function / file **written on screen** ("here's what we added").                                                       |
+| **`code-highlight`**         | A blue band sweeps one line; the rest dim. (5s)                                                                   | `__BLOCK.line` = target line, **0-based here**. single state.                                         | "This one line is the change" — spotlight a changed/important line. Quick callout.                                          |
+| **`code-scroll`**            | "Camera" scrolls a long file to center a target line, dims the rest. (6s)                                         | `__BLOCK.line` = target, **1-based here**. one long state.                                            | Locating the change in a large file. The only block built for long files.                                                   |
+| **`code-3d-extrude`**        | Code on a lit, beveled 3D slab that rotates and settles. (8s, WebGL)                                              | single state; `__BLOCK.seed`. `<canvas id="gl">`.                                                     | A hero / title code moment ("the feature"). Style over density — not for reading a diff.                                    |
+| **`code-particle-assemble`** | GPU particles scatter, then fly to the exact glyph pixels and resolve to syntax color. (8s, WebGL)                | single state; `__BLOCK.seed`.                                                                         | A dramatic climax reveal of a key snippet. Flashiest; not for line-by-line reading.                                         |
+| **`code-shader-dissolve`**   | Code "compiles into existence" out of seeded noise with a moving dissolve front + edge glow. (7s, WebGL)          | single state; `__BLOCK.seed`.                                                                         | A "compiles / builds / works now" beat, or a polished snippet reveal.                                                       |
+| **`code-snippet-flight`**    | Discrete snippets fly in from the side and assemble into a stacked program (block-level FLIP). (6s)               | `__TOKENS.flight.states`.                                                                             | "The pieces assemble" — several functions/modules coming together. (An animation block despite the `code-snippet-` prefix.) |
+
+**Gotchas (call out so the worker doesn't trip):**
+
+- **Fit the cadence to the frame's `data-duration`.** Each block carries its own internal timing — `code-typing` types at a fixed per-character speed, so a snippet that's long relative to a short frame **overruns**: the code never finishes typing within `data-duration`, and the chrome beats around it (an underline, a `+N/−M` count-up) never play. Check **char-count × per-char cadence** (plus the block's settle) against `data-duration`, and tune the timing so the **full block lands inside the frame**. This is the one code-motion knob you MUST set to the frame — you're fitting the _timing_, not redesigning the effect (the typewriter / diff / morph stays the block's).
+- `code-diff` and `code-morph` need **≥2 baked states**; every other animation block uses a single state.
+- **Line indexing differs:** `code-highlight` is **0-based** (`line: 1` = the 2nd line); `code-scroll` is **1-based**. Don't off-by-one.
+- **No caption-safe band.** These are full-bleed 1920×1080 code surfaces with no reserved caption area. When captions are enabled, the frame must keep the code panel clear of the bottom caption keep-out band (composite the block in the top ~83%, or scale/inset it) — the worker owns that, not the block.
+
+## The `code-snippet-*` theme family (standalone, not palettes)
+
+These are **NOT palettes you attach to the animation blocks** — each is its own ready-made ~11–12s composition rendering a full developer UI with baked typing and its own timeline. Use one when you want **ambient realistic context** (a real IDE or terminal on screen), not a focused diff. Install the specific one: `npx hyperframes add code-snippet-<name>`.
+
+- **VS Code workbench (12):** full VS Code window (activity bar, file-tree, tabs, editor with per-char typing, integrated terminal running `pytest`, status bar) in each theme. `dark-plus`, `light-plus`, `dark-modern`, `light-modern`, `dark-2026`, `light-2026`, `monokai`, `solarized-light`, `visual-studio-dark`, `visual-studio-light`, `high-contrast`, `high-contrast-light`. (Each pulls a `background.jpeg` into `assets/`.)
+- **Apple Terminal (12):** macOS Terminal.app window typing a shell command per profile. `apple-terminal-` + `basic`, `clear-dark`, `clear-light`, `grass`, `homebrew`, `man-page`, `novel`, `ocean`, `pro`, `red-sands`, `silver-aerogel`, `solid-colors`.
+
+The theme is baked into each block (not chosen at runtime); to use a given look, install that block and edit its `codeLines`. For claude's editorial register, prefer the focused animation blocks on the navy Code Surface; reach for a `code-snippet-*` UI only when "show it in a real editor/terminal" is the point.
+
+## Showing behavior — the mechanism beat (not a `code-*` block)
+
+A `code-*` block shows **the code**. It does not show **what the code does**. The single biggest cause of a flat PR video is a body that is all code surfaces — so for any change with a visible runtime behavior, plan a **`mechanism` beat** that _animates the behavior_ (story-design owns the rhythm; this is the vocabulary).
+
+A mechanism beat is **not** a registry `code-*` block. It is one of:
+
+- an **invented animated diagram** — SVG / HTML / GSAP the frame worker builds from claude's atoms (hairline-ink nodes / edges / lanes on cream, one coral marker on the active element), the build playing out the behavior across the shot; **or**
+- a **`flowchart` / `flowchart-vertical`** registry block — a process / pipeline / state flow; **or**
+- a **`data-chart`** registry block — a perf / metric comparison (two bars or timelines racing).
+
+`flowchart`, `flowchart-vertical`, and `data-chart` install exactly like a code block (`npx hyperframes add <name>`) and mount as a sub-composition — so when a `mechanism` frame names one in its `scene`, Step 5 pre-installs it alongside the `code-*` blocks. An invented SVG/GSAP diagram needs no install (the worker hand-builds it).
+
+**What to animate, by what the change touches** (the menu story-design plans from):
+
+| The change touches…             | Animate (the behavior)                                                  | Use                    |
+| ------------------------------- | ----------------------------------------------------------------------- | ---------------------- |
+| Retry / backoff / resilience    | request lifecycle: fire → 500 → wait (delay growing) → retry → 200      | invented SVG/GSAP      |
+| Caching / memoization           | two lanes racing: cold (hits DB) vs cached (hits cache)                 | invented SVG/GSAP      |
+| Concurrency / parallelism       | a serial lane reshaping into parallel lanes                             | invented / `flowchart` |
+| Race / ordering bug             | the broken flow (dropped items, colliding writers), then the fixed flow | invented SVG/GSAP      |
+| Performance                     | two timelines / bars racing, the new one finishing first                | `data-chart`           |
+| Refactor / migration            | a tangled call-graph untangling; same inputs → same outputs             | `flowchart` / invented |
+| New endpoint / pipeline / state | data flowing the new path; a state machine lighting up step by step     | `flowchart-vertical`   |
+
+Unlike a `code-*` block (which owns its own animation), the diagram's motion is **yours** — sequence ≥3 effects into entrance (draw the nodes / lanes) → development (run the flow) → settle (the resolved state + one coral emphasis). Never let it enter then freeze.
+
+## PR beat → block cheat-sheet
+
+| PR moment                                                | Block(s)                                                                                                                                                         |
+| -------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| Diff hunk (before → after)                               | `code-diff`                                                                                                                                                      |
+| Refactor / rename / signature change (continuity)        | `code-morph`                                                                                                                                                     |
+| Failing → passing test (red → green)                     | `code-morph` or `code-diff` + `code-highlight` on the green line; a `code-snippet-*` VS Code/terminal block for a literal test-runner UI                         |
+| New function / file typed on                             | `code-typing`                                                                                                                                                    |
+| Spotlight one changed line                               | `code-highlight`                                                                                                                                                 |
+| Walk / scroll a long changed file                        | `code-scroll`                                                                                                                                                    |
+| Pieces / modules assembling into a feature               | `code-snippet-flight`                                                                                                                                            |
+| Hero / title code moment ("the feature")                 | `code-3d-extrude`                                                                                                                                                |
+| "Compiles / builds / works now" reveal                   | `code-shader-dissolve`                                                                                                                                           |
+| Big dramatic snippet reveal / climax                     | `code-particle-assemble`                                                                                                                                         |
+| A benchmark / metric / count-up                          | **Not a `code-*` block** — use claude's `number-lockup` (Number/Impact treatment) or the `data-chart` registry block                                             |
+| **What the change DOES at runtime** (behavior, not code) | **Not a `code-*` block** — a `mechanism` beat: an invented SVG/GSAP diagram, or `flowchart` / `flowchart-vertical` / `data-chart`. See "Showing behavior" above. |
+| Show the change in a realistic IDE / terminal (ambient)  | a `code-snippet-*` VS Code theme (editor) or Apple Terminal profile (CLI run)                                                                                    |
diff --git a/.claude/skills-media/pr-to-video/references/cut-catalog.md b/.claude/skills-media/pr-to-video/references/cut-catalog.md
new file mode 100644
index 000000000..9aef70e40
--- /dev/null
+++ b/.claude/skills-media/pr-to-video/references/cut-catalog.md
@@ -0,0 +1,215 @@
+# Cut catalog — within-frame seams (worker-built)
+
+> **A worker build-recipe (Step 5) — the sibling of `../hyperframes-animation/rules/`, not a second motion doc.** These are within-frame cuts the **frame worker builds INSIDE its own composition** (Z-scale + blur + opacity tweens, or per-word x-staggers, all on the frame's own paused GSAP timeline). They are **not** the between-frame transition: story owns that via `transition_in`, which the harness's injector stamps from a **separate registry vocabulary** (`crossfade` / `blur-crossfade` / `push-slide` / `zoom-through` / `squeeze`) — the catalog names here (**cut-the-curve / inverse-zoom / waterfall**) are **not** valid `transition_in` values. Use this catalog when a frame's shot sequence has an internal seam — a within-scene text/element swap, a **Scene-to-Scene** cut (a `Scene` is a time window WITHIN one frame, **not** a frame-to-frame boundary), or a text-to-text line change — and you want it to read as one continuous move instead of a hard slideshow cut. (`zoom-through` lives in both worlds: a whole-frame wrapper transition in the registry, an element-level Z-cut here — same idea, different scope.)
+
+Four techniques that create depth and continuity:
+
+1. **Zoom-Through** — within-scene text swaps, Z-axis, moving TOWARD the viewer
+2. **Inverse Zoom-Through** — Z-axis swaps moving AWAY from the viewer
+3. **Cut the Curve** — between-scene transitions on x/y
+4. **Waterfall Cut** — word-by-word cut-the-curve with staggered exits and entries
+
+All four are the same underlying principle: **cut at peak velocity, match direction and
+speed on both sides of the cut.** The differences are axis, scope, and granularity.
+
+**Choosing which at a seam:** for an UNFINISHED phrase (building one larger idea across
+several visually distinct scenes that still approach the same point — multi-line text, a
+run of consecutive cards) use **cut-the-curve** / **waterfall**. For a STATE CHANGE (turning
+to a NEW part of the video — most often hook → context, between two distinct chapters) use
+**zoom-through**, and **inverse zoom-through** for an arrival / payoff beat. Chain these so
+the frame's internal seams feel like one camera moving through the content.
+
+---
+
+## Blur Logic (applies to all Z-axis variants)
+
+Blur sells the speed at the cut, but it must scale with the SUBJECT SIZE:
+
+| Subject                                                | Peak blur   | Why                                                                                                                                                                                      |
+| ------------------------------------------------------ | ----------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| Text-scale (headline, line, word group)                | **10px**    | At 20px text smears into illegibility — the eye loses the word it was tracking and the cut reads as a glitch, not speed. At 20px letterforms go mushy mid-cut; 10px keeps them readable. |
+| Full-frame surface (terminal window, card, screenshot) | **18–20px** | Big surfaces have edges and texture that survive heavy blur; lighter blur on a full-frame move reads as a rendering hiccup instead of motion.                                            |
+
+Both sides of a cut use the SAME peak blur — the value must match at the swap frame.
+Apply blur to the WRAPPER, never to individual children.
+
+---
+
+## 1. Zoom-Through (forward)
+
+### The Problem
+
+Text enters, holds, exits. Then next text enters, holds, exits. Each text block is
+independent — no depth, no continuity. The video feels like a slideshow.
+
+### The Principle
+
+A velocity-matched cut on the Z-axis. You **never see both texts at the same time.** The
+outgoing text scales toward the viewer (accelerating), blur and opacity peak at the cut
+point hiding a hard swap, and the incoming text continues scaling up from behind
+(decelerating into the focal plane). One continuous forward motion, two different texts.
+
+### The Three Phases
+
+**Phase 1: Exit** — text accelerates forward (toward viewer)
+
+- Scale: `1.0 -> 1.2`, Blur: `0px -> 10px` (text-scale; see Blur Logic), Opacity: `1.0 -> 0.15`
+- Scale/blur easing: `power3.in` (steep acceleration)
+- Opacity easing: `none` (linear — even dimming, separated from scale)
+- Duration: 0.2s
+
+**Phase 2: Hard cut** at peak velocity + peak blur
+
+- Outgoing: `opacity: 0` (instant via `tl.set`)
+- Incoming: `opacity: 0.15, scale: 0.75, blur: 10px` (instant via `tl.set`)
+- All properties match at the cut: blur, opacity, and scale DIRECTION (both scaling up)
+
+**Phase 3: Entry** — text continues forward (growing into focal plane)
+
+- Scale: `0.75 -> 1.0`, Blur: `10px -> 0px`, Opacity: `0.15 -> 1.0`
+- Easing: `expo.out` (steep initial burst matching exit velocity, long settle)
+- Duration: 0.5s
+
+### Why Opacity Must Be Separate on Exit
+
+Scale uses `power3.in` but that keeps opacity near 1.0 for most of the tween. Splitting
+opacity to its own tween with linear ease makes the dimming even. On entry, all properties
+can share `expo.out`.
+
+---
+
+## 2. Inverse Zoom-Through (backward)
+
+The mirror: the camera "pulls back" instead of pushing through. The outgoing element
+RECEDES away from the viewer; the incoming element arrives OVERSIZED (as if it had been
+just behind the camera) and retracts into the focal plane. Both move in the shrinking
+direction — same-direction rule preserved, just reversed.
+
+**When to use over the forward variant:** arrival beats. The incoming element lands with
+presence because it comes from larger-than-frame — right for a payoff line ("That changes
+today."), a giant reply, or a held end-state. Forward zoom-through reads as _progressing
+through_ content; inverse reads as _arriving at_ content.
+
+### The Three Phases
+
+**Phase 1: Exit** — element recedes (away from viewer)
+
+- Scale: `1.0 -> 0.8`, Blur: `0px -> 10px` (text-scale)
+- Scale/blur easing: `power3.in`; Opacity: `1.0 -> 0.15` on `none` (separate tween)
+- Duration: 0.2s
+
+**Phase 2: Hard cut**
+
+- Outgoing: `opacity: 0` via `tl.set`
+- Incoming: `opacity: 0.15, scale: 1.25, blur: 10px` via `tl.set`
+
+**Phase 3: Entry** — incoming retracts into place
+
+- Scale: `1.25 -> 1.0`, Blur: `10px -> 0px`, Opacity: `0.15 -> 1.0`
+- Easing: `expo.out`, Duration: 0.5s
+
+---
+
+## 3. Cut the Curve (Scene Transitions)
+
+### The Principle
+
+Use cut-the-curve for **all scene-to-scene transitions** on x and y axes. The outgoing
+scene's hero element accelerates in one direction, the cut lands mid-motion, and the
+incoming scene's hero element continues moving in the **same direction** and decelerates.
+Nothing exits fully off-screen and nothing enters from fully off-screen — **speed plus
+opacity fading trick the eye**; the partial moves are enough.
+
+### Same Path, Same Direction
+
+If Scene A's hero slides left, Scene B's hero enters from the right and continues sliding
+left. Both move leftward. One continuous motion.
+
+| Direction | Scene A exit   | Scene B entry start | Scene B entry end |
+| --------- | -------------- | ------------------- | ----------------- |
+| Leftward  | `x: 0 -> -230` | `x: +230`           | `x: 0`            |
+| Rightward | `x: 0 -> +230` | `x: -230`           | `x: 0`            |
+| Upward    | `y: 0 -> -230` | `y: +230`           | `y: 0`            |
+| Downward  | `y: 0 -> +230` | `y: -230`           | `y: 0`            |
+
+### Velocity matching via mirrored eases
+
+The cleanest match: exit `power4.in` and entry `power4.out` with the SAME distance and
+duration — mathematically the two halves of one `power4.inOut` composite, so the entering
+element picks up at exactly the 50% point of the notional path at identical velocity
+(e.g. 230px / 0.3s ≈ 3,070 px/s at the cut on both sides).
+
+The fade trick: the exit's opacity completes at ~25–30% of its travel (fade duration
+≈ 0.18–0.3s vs motion 0.3–0.34s) — the element vanishes while still visibly accelerating,
+and nothing has to reach the frame edge. Entry fades IN fast from ~0.35 under its
+deceleration. Time the LAST fading element to die right at the hard cut — gaps where
+nothing is moving read as awkward dead air.
+
+### Rules
+
+- Use cut-the-curve for all scene transitions — it's the default, not an accent
+- Same direction on both sides; mirrored `.in`/`.out` eases, same distance + duration
+- Exit duration short (0.2–0.4s), entry duration >= exit duration
+- Partial travel + fade, never full off-screen moves
+
+---
+
+## 4. Waterfall Cut (word-by-word cut-the-curve)
+
+Cut-the-curve at WORD granularity — the strongest version of the leftward cut for
+text-to-text seams. Each word of the outgoing line ramps out on its own pronounced curve;
+each word of the incoming line cascades in mid-flight. The stagger turns the cut into a
+wave the eye rides across the seam.
+
+### Exit (per word)
+
+- Motion: `x: 0 -> -230` over 0.34s on **power4.in** — a much more pronounced ramp than
+  the usual power2: the word barely creeps, then RIPS
+- Fade: `opacity -> 0` over 0.18s (separate tween, `power1.in`) — completes when the word
+  is only ~25–30% into its travel
+- Stagger: reading order, ~0.022s per word, timed so the LAST word finishes fading right
+  at the hard cut
+
+### Entry (per word)
+
+- `fromTo x: +230 -> 0, opacity: 0.35 -> 1` over 0.3s on **power4.out** — the mirrored
+  back half of the composite; every word ignites already moving at matched velocity
+- Waterfall stagger with SHRINKING gaps (start 0.05s, multiply by ~0.84 per word) so the
+  cascade accelerates across the line — the cascade should speed up word over word, not run
+  at a flat per-word delay
+- Pre-set all words to `x: +230, opacity: 0` at build time — `immediateRender: false`
+  alone leaves un-started words sitting visible at rest during the stagger window
+
+### Whole-line variant
+
+A single-line beat (e.g. a big intro line) exits as one group with the same pronounced
+ramp, but stretch its fade to ~0.3s ending ~0.02s before the cut — a lone element that
+fades early leaves dead air that a word cascade would have covered.
+
+---
+
+## Choosing a Variant
+
+|                | Zoom-Through                | Inverse Zoom                | Cut the Curve     | Waterfall Cut             |
+| -------------- | --------------------------- | --------------------------- | ----------------- | ------------------------- |
+| Scope          | Within-scene text swap      | Arrival/payoff beat         | Between scenes    | Text-to-text seam         |
+| Axis           | Z, toward viewer            | Z, away from viewer         | X / Y             | X, per-word               |
+| Peak blur      | 10px text / 20px full-frame | 10px text / 20px full-frame | none required     | none (fade does the work) |
+| Opacity at cut | 0.15                        | 0.15                        | exit faded by cut | last word dies at cut     |
+| Feel           | progressing through         | arriving at                 | carried sideways  | a wave across the seam    |
+
+---
+
+## Anti-Patterns
+
+| Don't                                    | Why                                         | Instead                                                |
+| ---------------------------------------- | ------------------------------------------- | ------------------------------------------------------ |
+| Two texts visible during a zoom-through  | Overlapping text breaks the Z-axis illusion | Hard cut at blur peak, one text at a time              |
+| 20px blur on text-scale subjects         | Letterforms smear; reads as a glitch        | 10px for text, 18–20px only full-frame                 |
+| Elements on different paths across a cut | Eye tracks one direction, cut goes another  | Same property, same direction                          |
+| Mismatched blur/opacity at the swap      | Visible flash or brightness jump            | Identical values at the cut frame                      |
+| Gentle easing on entry (`power2.out`)    | Entry velocity feels slower than exit       | Mirror the exit: `power4.out` / `expo.out`             |
+| Full off-screen exits / entries          | Wastes time and breaks the speed illusion   | Partial travel + early fade                            |
+| Lone element fading long before its cut  | Dead air at the seam                        | Fade ends ~0.02s before the cut, or use a word cascade |
+| Zoom-through on body text                | Small text at 0.75 scale is unreadable      | Only headlines and short phrases                       |
+| Scene cuts without cut-the-curve         | Static cuts feel like a slideshow           | Cut-the-curve is the default                           |
diff --git a/.claude/skills-media/pr-to-video/references/motion-language.md b/.claude/skills-media/pr-to-video/references/motion-language.md
new file mode 100644
index 000000000..391edc38a
--- /dev/null
+++ b/.claude/skills-media/pr-to-video/references/motion-language.md
@@ -0,0 +1,156 @@
+# Motion language — the move vocabulary + the motion doctrine + the seek-safe core
+
+> The motion layer for **Step 4 (Visual design)**. When you write a frame's **time-coded shot sequence**, you name each scene's move **inline from the vocabulary below** — a named palette of the moves the golden corpus actually uses. Each move carries the **backing rule id** in this skill's local `../hyperframes-animation/rules/`; cite that id so the move resolves to a real recipe when a **frame worker** implements it in Step 5 (the worker reads the rule body in `../hyperframes-animation/rules/<id>.md` — it reproduces the move, it does not guess from the name). You name motion by **role / move name**, never by raw GSAP curve, ms, or stagger formula — the worker maps the curve. Between-frame **transitions are not yours**: story names `transition_in`, the harness injects it; that injected transition **is** the frame's exit. For cuts a worker builds INSIDE a frame (within-scene swaps, scene-to-scene seams), see the catalog in `cut-catalog.md`.
+
+A good code-change explainer feels like one continuous film — one camera, one motion feel, **smooth and timed to the voiceover** — not a pile of slides that animate once and freeze. In a PR explainer the development often _is_ the reveal: the diff hunk typing in, the before→after morph, the impact stat landing. The doctrine in Part 2 is load-bearing: when in doubt, do what it says.
+
+---
+
+# Part 1 — the move vocabulary
+
+Reach into this palette when naming a scene's motion. Pick the move that matches the beat, name it in the shot sequence, and cite the rule id after `→`. The blueprints (`../hyperframes-animation/blueprints/`) name these same moves in their `rule mapping`; you're drawing from one shared palette. Compose 2–4 across a shot's scenes (entrance → sequential reveal → settle), not all at once.
+
+## Kinetic type
+
+- **hard-cut / flash word-swap** — a word or line replaces the previous one on an instant cut (no fade/roll); the swap itself is the beat. → `discrete-text-sequence`
+- **in-place token cycle** — a fixed line holds and only its variable slot changes, token → token → token. → `discrete-text-sequence`
+- **per-word staggered reveal** — a phrase assembles word-by-word (or chunk-by-chunk), each landing on its own beat. → `dynamic-content-sequencing`
+- **kinetic beat-slam** — short phrases slam in on a shared percussive beat array, each with a distinct entrance, resolving on a locked finale; the recipe for "punchy / rhythmic" taglines. → `kinetic-beat-slam`
+
+## Typewriter
+
+- **type-on with caret** — text types in character-by-character behind a blinking caret. → `discrete-text-sequence` (+ `context-sensitive-cursor` for the caret blink / color)
+- **backspace-and-retype** — the line types, deletes the last word(s), and retypes a new one (typo-correction, reframe). → `discrete-text-sequence` (+ `context-sensitive-cursor`)
+
+## Count-up / data
+
+- **value-scaled counter** — a number counts up and its font size grows with the value, so the climb itself escalates. → `counting-dynamic-scale`
+- **bars / progress / star wipe** — a number paired with a graphic that fills: bar-height stagger, a progress bar / ring filling, a fractional star-rating wipe. → `stat-bars-and-fills`
+
+## Reveal / decode
+
+- **3D char flip-decode** — characters flip in 3D and resolve from scrambled glyphs to the real text (decryption feel). → `hacker-flip-3d`
+- **SVG self-draw** — an outline / icon / ring draws itself stroke-by-stroke. → `svg-path-draw`
+
+## Camera
+
+- **push / focus / drift** — a sequential camera move on the frame root (pull-back → focus → push) plus continuous micro-drift; the cinematic baseline. → `multi-phase-camera`
+- **zoom-to-target** — zoom into a non-centered element (scale + counter-translate to keep it framed). → `coordinate-target-zoom`
+- **pan / focus-lock** — a virtual camera transforming one `.world` wrapper to pan / zoom / lock onto a region. → `viewport-change`
+- **camera-cursor-tracking** — the viewport locks to a moving focal point (a typing cursor), static framing then focal-locked tracking. → `camera-cursor-tracking`
+
+## Layout motion
+
+- **cluster→outward expansion** — elements start clustered at center and expand outward to their final positions in lockstep. → `center-outward-expansion`
+- **orbit** — elements flip in from 3D space and settle into a continuous elliptical orbit (entry flips in-place at the orbital position). → `orbit-3d-entry`
+- **split-tilt cards** — two cards side-by-side with opposing rotationY tilts, entering from their respective sides (comparison / before-after). → `split-tilt-cards`
+- **logo/avatar ring + connectors** — avatars or logos on an elliptical ring with SVG connection lines to a center point, staggered entry. → `avatar-cloud-network`
+
+## Surface / UI
+
+- **3D page-scroll reveal** — a full webpage as a tilted 3D card whose internal content scrolls to reveal specific sections. → `3d-page-scroll`
+- **cursor click + ripple** — a cursor moves to a target, depresses with it on click, and emits an expanding ripple. → `cursor-click-ripple`
+- **button press** — a tactile press: compression then spring recovery, optional release burst / glow. → `press-release-spring` (or `physics-press-reaction` for a click that compresses cursor + target together)
+- **keyword glow** — keywords light up with glow + scale + color on an attack-decay-rest envelope, synced to a word rail. → `asr-keyword-glow`
+
+## Morph / handoff
+
+- **scale-swap** — two elements at the same screen center hand off: the outgoing cluster shrinks + fades as the incoming one arrives. → `scale-swap-transition`
+- **card morph-anchor** — a container morphs apparent size + corner radius + surface between two shots, then fades to reveal the real target beneath (HyperFrames uses uniform `scale`, not `width`/`height`). → `card-morph-anchor`
+
+## Seam cuts (worker-built, inside a frame)
+
+The velocity-matched cuts a worker authors between a frame's own Scenes. Name the seam in the shot sequence; the recipe is in the catalog, not a single `../hyperframes-animation/rules/` id.
+
+- **zoom-through / inverse zoom-through** — a within-scene swap on the Z-axis; forward reads "progressing through", inverse reads "arriving at" (payoff). → `cut-catalog.md`
+- **cut-the-curve** — a scene-to-scene cut where both sides move the same direction at matched velocity. → `cut-catalog.md`
+- **waterfall cut** — cut-the-curve at word granularity, a wave across a text-to-text seam. → `cut-catalog.md`
+
+## Emphasis / marker
+
+- **highlight / circle / burst / scribble** — a marker-drawn emphasis on a word or element: yellow highlight sweep, hand-drawn circle, radiating burst, scribble, or rough sketch-outline. → `css-marker-patterns`
+
+## Aliveness during a hold (use sparingly — see Part 2)
+
+- **subtle jitter** — the sanctioned way to keep a settled frame alive: a small, low-amplitude positional/scale jitter on the held element. The motion-graphics trick that reads "alive" without reading "weak." → `sine-wave-loop` (low-amplitude register)
+- **live SVG internals** — internal SVG parts move so an icon feels alive (rotating hands, oscillating blades, pulsing dots, dash-flow); fine because it's the subject doing something, not a card breathing. → `svg-icon-enrichment`
+- **finite bounded ambient** — a single bounded breathe/drift on ONE held hero, only when genuinely needed; de-emphasized — prefer sequential reveal or jitter first. → `sine-wave-loop`
+
+## The added moves — now backed by local rules
+
+Five moves the golden corpus needs were added to this skill's `../hyperframes-animation/rules/`, rounding out the vocabulary above:
+
+- **depth-of-field / selective-blur** — blur the off-focus subset to spotlight the focal element → `depth-of-field-blur`
+- **motion-blur streak** — directional velocity blur on a fast fly-in / camera push-through → `motion-blur-streak`
+- **3D depth scatter-assemble** — glyphs/elements scatter into a tumbling 3D cloud, then reassemble → `depth-scatter-assemble`
+- **spring-pop entrance** — the canonical entrance pop; default to a smooth long-tail settle, overshoot only when explicitly playful → `spring-pop-entrance`
+- **ambient glow / bloom** — un-triggered soft glow blooming behind a static hero → `ambient-glow-bloom`
+
+---
+
+# Part 2 — the motion doctrine (load-bearing)
+
+These four rules are the difference between a clip that reads as a serious code-change explainer and one that reads as an agent-made PowerPoint. Follow them as written.
+
+## 1. Smooth beats bouncy — `power3` is the default
+
+Elements should use **long-tail decel curves that let them settle smoothly. `power3` is enough in most cases.** No bouncy, no overshoot, no `back.out` / `bounce.out` / `elastic.out` as a default.
+
+Bouncy is the **#1 instant turn-off** in user-made Remotion / HyperFrames videos, and the agent almost never gets it right — it thinks bouncy adds emphasis, but it buys that emphasis at the cost of cleanliness. The serious motion-design shops feel the same. **Smooth always wins.** Overshoot is demoted to a **rare, explicitly-playful exception** (a consumer/fun logo slam, a deliberate bell-hit) — never the house style. Name the intent as a long-tail settle; the worker maps `power3` (or `expo.out` on a fast arrival). See `../hyperframes-animation/rules/spring-pop-entrance.md` — it now leads with the smooth settle. (The exact form of that settle is a critically-damped spring; the worker has a baked, seek-safe `springEase` — ζ=1 — in `../hyperframes-animation/adapters/gsap-easing-and-stagger.md` → Spring Eases for when the settle is the hero. Real physics, same doctrine — not a license for bounce.)
+
+## 2. Sequential reveal in the back ~50%, timed to the voiceover
+
+This is the anti-PowerPoint mechanism — sharper than "put development in the middle."
+
+- **Don't dump everything on screen in the first ~25%** of the scene. Rushing all content in up front is exactly what forces the slideshow feel.
+- **Reveal each piece — a line, a card, even an h1 — when the voiceover mentions it**, sequencing reveals across the **later ~50%** of the scene. Same amount of agent work, but the cut becomes coherent and gains rhythm.
+- **Less is more.** Fewer things on screen, each arriving on its VO beat, beats a full canvas that animated once and froze.
+
+Practically: a frame's shot sequence front-loads almost nothing — the entrance carries only what the VO is saying at t=0, and the rest of the elements wait in the timeline for their spoken cue. A reveal maps onto a development-class move from Part 1 (`per-word staggered reveal`, `cluster→outward expansion`, a `count-up`, an `asr-keyword-glow` synced to the word rail).
+
+## 3. No lazy breathing, no bad pan/push — "no motion over bad motion"
+
+The agent's two reflexive ways to fake "aliveness" both read cheap:
+
+- **No lazy breathing.** Scaling cards/text up and down in a circular loop to look "alive" is the cheap tell. Don't reach for it.
+- **No bad slow pan / push in the back half.** A slow pan or push on elements in the later ~50% of a scene **disrupts the viewer's sightline and causes eye discomfort** — it actively makes the frame worse, not better.
+
+The fix for both is the same: **stagger element reveals in time with the script** (rule 2). And the governing principle: **"I'd rather have NO motion than BAD motion."** A held, still frame is better than a frame kept "alive" by breathing or a drifting camera. The **only sanctioned aliveness** during a hold is **subtle jitter** — a small low-amplitude jitter that keeps a frame from feeling dead without looking weak (it's in Claude videos now). Everything else holds.
+
+## 4. Internal seams are velocity-matched cuts
+
+When a frame has an internal seam — a within-scene swap, a Scene-to-Scene cut, a text-to-text line change — make it a **velocity-matched cut**, not a hard slideshow cut: cut at peak velocity, match direction and speed on both sides. The catalog (the four techniques, the blur logic, and which to use when) is `cut-catalog.md`; the moves are listed under **Seam cuts** in Part 1.
+
+## One-line summary
+
+Smooth long-tail (`power3`) over bouncy; reveal sequentially in the back ~50% timed to the VO (not dumped in the first 25%); no lazy breathing and no bad slow pan/push — prefer stillness, with subtle jitter as the only aliveness; cut at peak velocity with matched direction/speed (→ `cut-catalog.md`).
+
+---
+
+# Part 3 — the seek-safe core (hard rules)
+
+The frame is a **paused GSAP timeline seeked frame-by-frame**, so some "continuous" intents from a real-time engine can't render — don't name them. These are non-negotiable regardless of doctrine.
+
+- **No infinite / forever motion** — "particles loop endlessly," "logo rotates forever," "marquee on repeat." Any aliveness (the subtle jitter, a live SVG internal, a needed bounded ambient) is a **finite tween over the hold**, never `repeat` / `yoyo`.
+- **No randomness or wall-clock** — no `Math.random` particle fields, no `Date.now` drift. Every render must be identical; name deterministic motion only (stagger and any variation derive from the element index).
+- **Entrances use `fromTo`** — state the from-state explicitly so a seek to `t=0` lands the element correctly; never rely on a CSS-hidden start (it renders visible before the tween claims it, and flickers under seek).
+- **No CSS `transition` / `@keyframes` for motion** — CSS animation runs on the browser clock, independent of the HF seek clock; it desyncs and flickers. Drive all motion inside the paused GSAP timeline.
+- **Entrance + sequential reveal only — no mid-video exit.** The frame unmounts via the harness transition; that injected `transition_in` **is** the exit. Exit motion belongs only to the final frame. (Worker-built seam cuts in `cut-catalog.md` are within-frame, not the frame's exit.)
+
+## Forbidden — the failure modes
+
+**Slideshow (the primary failure):** everything dumped on screen in the first ~25%; content enters then freezes; nothing revealed on its VO cue. Fix with rule 2 (sequential reveal timed to the VO).
+
+**Cheap aliveness:** circular breathing as "life"; a slow pan/push in the back half disrupting the eye; many elements floating independently as "motion." Fix with rule 3 (stillness + subtle jitter only).
+
+**Bouncy:** `back.out` / `bounce.out` / `elastic.out` as the default entrance; hand-keyed overshoot. Fix with rule 1 (`power3` long-tail; overshoot only when explicitly playful).
+
+**Always:** no `repeat` / `yoyo`; no `Math.random` / `Date.now`; no all-elements-entering-simultaneously (sequence or stagger).
+
+## Naming motion in a shot — example
+
+> Scene 1 (0.0–1.0s): solid field; hero headline enters via **per-word staggered reveal** (`dynamic-content-sequencing`) on a smooth long-tail settle (`power3`); slow **push** on the root (`multi-phase-camera`) holds steady — no back-half re-push.
+> Scene 2 (1.0–3.0s): as the VO names each changed file, five file chips reveal **sequentially** via **cluster→outward expansion** (`center-outward-expansion`), then a **value-scaled counter** (`counting-dynamic-scale`) ticks the +/− line total up beneath them — the back-half reveal, timed to the script, not dumped at t=0.
+> Scene 3 (3.0–4.2s): hold on the result; **keyword glow** (`asr-keyword-glow`) lands on the payoff word as the VO says it; settles and holds still — at most **subtle jitter** (`sine-wave-loop`, low amplitude) keeps it alive; no breathing, no drift.
+
+Name the move + its rule id (or `cut-catalog.md` for a seam cut) per scene; let the worker pick curves, ms, and stagger — defaulting to `power3`.
diff --git a/.claude/skills-media/pr-to-video/references/story-design.md b/.claude/skills-media/pr-to-video/references/story-design.md
new file mode 100644
index 000000000..c5fbe4899
--- /dev/null
+++ b/.claude/skills-media/pr-to-video/references/story-design.md
@@ -0,0 +1,230 @@
+# Story design — PR → narrative
+
+Use this reference in Step 3 to write `STORYBOARD.md` and `SCRIPT.md` for a **PR-to-video** — a code change (the diff, commits, files, +/− stats, and the people behind it) turned into an explainer. There is **no website and no captured assets**; the PR was ingested into `capture/extracted/` in Step 1.
+
+This file defines the story: what the video explains, in what order, and why each frame exists. It does not define layout, effects, animation, or file syntax. For exact storyboard syntax follow `../hyperframes-core/references/storyboard-format.md` and `../hyperframes-core/references/script-format.md`.
+
+## Read first
+
+1. `hyperframes.json` — locked brief: angle (archetype), audience, length, aspect, language.
+2. `frame.md` — tone, type, design system (the shipped preset is **claude**: warm editorial, a serif that thinks, scarce coral, a navy code surface).
+3. `capture/extracted/visible-text.txt` — the assembled PR brief: title, meta (`base ← head · +N/−M across F files`), people, body, commits, changed files, and a budget-bounded set of **representative diff hunks**. This is your source of **information**.
+4. `capture/diff.patch` — the full unified diff, for deeper hunk selection than the brief's excerpt.
+5. `capture/extracted/people.json` — contributors (author / committers / reviewers / commenters), bot-filtered, each with an avatar in `assets/<login>.png` (for the credits close).
+
+## Output
+
+- `STORYBOARD.md` — the explanation plan, one frame per beat.
+- `SCRIPT.md` — the locked narration, only for spoken frames.
+
+Every frame includes the required storyboard-format fields plus the narrative metadata below.
+
+## Core rule
+
+A diff is a list of edits. A video is a guided act of understanding.
+
+Do **not** narrate the diff file-by-file or read the PR description aloud — that is the single most common failure. **Explain the change** — and where the change has a runtime behavior, **show that behavior in motion** (a `mechanism` beat — see "Show the behavior" below), don't just display the lines that changed. Reorder, merge, omit, compress: surface the one change that matters and drop the incidental churn (lockfile bumps, formatting, generated files) unless it _is_ the story. Scene order comes from narrative design, not from the diff's file order or the commit list.
+
+**Value before evidence** (`../hyperframes-creative/references/story-spine.md`): the viewer-facing payoff — what the change unlocks, fixes, or speeds up — lands by the second beat; the diff and the mechanism are the **evidence** for that claim, never the opening. Implementation is the footnote of the story, not the spine.
+
+Default to a **plain, technical, unhurried developer voice** — accurate, specific, no hype, no marketing gloss. You are explaining a real change to engineers; respect their time and intelligence. `frame.md` (claude) tunes the voice toward considered and literary; it does not change the structure.
+
+## PR archetypes
+
+Choose **one** archetype (or name a compound). Each is a complete path through understanding a change — do not splice phases from different archetypes.
+
+- **Changelog** — "here's what shipped." Hook naming the headline → **2–4 roughly co-equal change items** → ship/wrap. Best for release PRs, multi-change PRs, "what's new in vN." Items are parallel → `cut` / `push-slide` between them. Rule-of-three is strongest when changes compress. An item with a visible behavior can be a `mechanism` mini-demo instead of a bare `diff`.
+- **Feature-reveal** — "here's what you can do now." Hook (the outcome the feature unlocks, in user language) → the payoff made concrete (`impact` — what now works) → name it (`change`) → the new code typing on (`diff`) → **animate what it does (`mechanism`)** → close (a callback to the promise). Best for a PR that adds **one notable feature**. The promise leads and the code proves it: `diff` and `mechanism` are the evidence for the opening claim — the viewer should already care before the first line of code appears.
+- **Fix-explainer** — "this was broken; here's the fix." Symptom/bug (`problem`) → **animate the broken behavior (`mechanism`)** → the fix as a before→after (`diff`) → **the behavior now working (`mechanism`)** or the result (`impact`). Best for bugfix PRs. Seeing the bug _happen_ and then _not_ happen is the turn — a stronger shape (tension → turn → relief) than the diff alone.
+- **Refactor-walkthrough** — "same behavior, better shape." Hook (the smell / the why) → old shape vs new shape (`before_after`) → **the structure untangling, same inputs → same outputs (`mechanism`)** → payoff (`evidence` — lines removed, perf delta, files touched). Best for refactors, perf, cleanups, migrations. A `mechanism` animation _proves_ "same behavior, better shape" far better than asserting it.
+
+**Choosing:** one notable new capability → feature-reveal; a bug fix → fix-explainer; a behavior-preserving cleanup/perf/migration → refactor-walkthrough; many co-equal changes / a release → changelog. Tie-breakers: a feature that also fixes a bug → feature-reveal with the fix as one body beat; a fix that needed a small refactor → fix-explainer (the fix is the headline). **Compound:** write `arc` as `"<outer> with <inner>"`, e.g. `"feature-reveal with changelog"`. Outer = the macro arc the viewer rides; inner = the body rhythm.
+
+## PR-native frame types
+
+Set each frame's `type` to one of these PR-native values. (The storyboard parser keeps `type` verbatim; it is a narrative + pacing label, not a hard enum.) Each maps to a claude frame treatment and a typical visual — so the type, the design, and the visual stay aligned end to end. Note `mechanism` is the **show-the-behavior** beat (an invented animated diagram), distinct from `diff` (show the code).
+
+| `type`         | The frame's job                                                                                                             | claude treatment (frame.md)                                        | typical visual (see code-vocabulary.md)                                                 |
+| -------------- | --------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------ | --------------------------------------------------------------------------------------- |
+| `hook`         | The high-leverage opening 3–5s                                                                                              | Cover                                                              | — (or `code-3d-extrude` for a hero code moment)                                         |
+| `problem`      | The bug / smell / pain / why-care the PR resolves                                                                           | Statement or Pull-quote                                            | `code-highlight` (spotlight the offending line)                                         |
+| `change`       | Name the change / the feature / the PR itself                                                                               | Statement or Cover                                                 | —                                                                                       |
+| `diff`         | The change body — a before→after, a hunk, new code typed on                                                                 | **Code Surface** (navy)                                            | `code-diff` / `code-morph` / `code-typing`                                              |
+| `before_after` | Explicit old-shape vs new-shape comparison (refactor/fix)                                                                   | Code Surface (split / morph)                                       | `code-morph` / `code-diff`                                                              |
+| `mechanism`    | **Show what the change DOES at runtime** — the request retrying, the cache filling, serial→parallel, the race resolved      | invented diagram on cream (hairline ink + one coral active marker) | **invented SVG/GSAP**; `flowchart` / `flowchart-vertical` / `data-chart` where they fit |
+| `impact`       | The payoff — what now works, what's now possible; opens the video as the promise (feature-reveal) or lands it as the result | Number / Impact                                                    | `number-lockup` (no code block needed)                                                  |
+| `evidence`     | Concrete grounding — `+N/−M`, a passing test, a benchmark                                                                   | Number / Impact                                                    | `code-diff` red→green / `number-lockup`                                                 |
+| `credits`      | Shipped-by close — the humans behind the change                                                                             | Closing                                                            | — (avatar row from `assets/<login>.png`)                                                |
+| `cta`          | The closing ask — pull it, upgrade, read the PR                                                                             | Closing                                                            | — (coral-callout)                                                                       |
+
+The body of a PR video **alternates `diff` (show the code that changed) with `mechanism` (show what it does at runtime)**, landing on `impact` / `evidence` (the result). A body that is all `diff` reads as code show-and-tell — the `mechanism` beat is what makes the change _legible_ and is the usual cure for a video that feels flat. Every PR has a change, so at least one `diff` (or `change`) frame always exists; most PRs also have a behavior worth animating.
+
+## Hook strategy
+
+The hook is the highest-leverage 3–5 seconds. Pick one:
+
+| Strategy               | When                                | Example                                                                |
+| ---------------------- | ----------------------------------- | ---------------------------------------------------------------------- |
+| Shocking statistic     | The change quantifies the stakes    | "This PR deletes 1,200 lines." / "40% faster cold starts."             |
+| Counterintuitive claim | The change contradicts intuition    | "We made the client slower — and that fixed it."                       |
+| Pain validation        | The audience already feels the bug  | "Every deploy, the same flaky timeout."                                |
+| Concept announcement   | The change has a name worth landing | "Meet retry-with-backoff — flaky networks stop killing your requests." |
+| Before/after teaser    | The diff is the whole story         | "One line threw. Now it recovers."                                     |
+| Stakes / consequence   | The "why care now" is a real cost   | "This crash hit every user on a flaky network."                        |
+| Direct address         | The audience is clearly defined     | "If you've ever waited on a 5-minute CI run…"                          |
+
+Do not open with a generic repo/company description. Whatever the strategy, the hook speaks the **viewer's outcome language** (story-spine rule 1) — never file / function / identifier names; numbers only when they carry stakes ("40% faster"), not inventory ("23 files changed").
+
+## Clarity / rhetoric technique catalog
+
+Each frame's `persuasion` is a **named** technique, not "explain the change." Combine when several are active:
+
+- **Make-concrete** — Worked example (one real request/input) · Analogy (backoff as "knock, wait longer, knock again") · Concretization (abstract change → one tangible code line)
+- **Reveal-in-order** — Progressive disclosure (the diff one line at a time) · Build-up (the simple call, then the edge case) · Signposting ("before… after…")
+- **Contrast** — Before/after diff · Old shape vs new shape · The bug vs the fix · Two approaches compared
+- **Structure** — Rule of three (three changes) · Numbered enumeration · Question→answer · Frame-then-fill (state the shape, then the code)
+- **Evidence** — `+N/−M` stat · Passing test / green check · Benchmark / perf delta · Causal chain (request → 5xx → retry → success)
+- **Memory & landing** — Callback (return to the hook's bug) · Distillation (the change in one line) · Generalization (this fix → the principle)
+
+## Emotional beats
+
+`beat` is one word or a short compound (e.g. "Recognition and relief"). Avoid generic "positive". A PR video rides a comprehension arc:
+
+- **Negative valley** — _open the gap_ (`hook`/`problem`): curiosity · frustration · recognition · concern · "ugh, that bug"
+- **Pivot** — _orient_ (`change`): clarity · orientation · anticipation · focus
+- **Build** — _build understanding_ (`diff`/`before_after`/`impact`/`evidence`): comprehension · "aha" · confidence · momentum · conviction · relief (for a fix)
+- **Resolution** — _land_ (`credits`/`cta`): satisfaction · resolve · "ship it" · inevitability
+
+Compound beats are often strongest: "Recognition _and_ relief" (a fix), "Curiosity _and_ confidence" (a feature).
+
+## The body is a sequence
+
+A PR video's core is **2–5 body frames**, each advancing one change / one before→after / one item, building cumulatively. **Alternate `diff` (the code) with `mechanism` (the behavior)** — don't stack code surfaces:
+
+- **changelog:** a `diff` (or a `mechanism` mini-demo) per change item; parallel → default `cut` / `push-slide`.
+- **feature-reveal:** `impact` (the promise, concrete) → `change` (name it) → `diff` (the code, often typing/morphing on) → `mechanism` (animate it working) → a closing callback to the promise.
+- **fix-explainer:** `problem` (symptom) → `mechanism` (the bug happening) → `diff` (cause + fix, before→after) → `impact` (result, or a `mechanism` of it working).
+- **refactor-walkthrough:** `before_after` structure → `mechanism` (the structure untangling, behavior preserved) → an `evidence` numbers beat.
+
+## Continuity across frames
+
+This framework builds **one frame per worker** — there is no multi-frame "continue run." A sequence reads as one continuous shot through two storyboard-level levers, both yours:
+
+1. **A consistent stage** — consecutive body frames share one composition idea (the same navy code window filling in, the same before|after split, the same counter advancing), stated in each frame's `scene` so Step 4 and the workers keep the stage stable.
+2. **A consistent transition** — pick one seam type for a run (`crossfade` for a soft code reveal, `push-slide` for the next change item) and repeat it.
+
+When a single element genuinely _transforms_ between two ideas (the failing test flips green, the old function becomes the new one), keep it **within one frame** as a development beat (entrance → transform → settle) — the worker owns that motion (a `code-diff` or `code-morph` block). Note the intent in `scene` / narrative; Step 4 wraps it in a time-coded shot sequence around the block (a `code-diff` / `code-morph`).
+
+## Transitions
+
+Use only registry transition names in `transition_in`:
+
+`cut | crossfade | blur-crossfade | push-slide LEFT | push-slide RIGHT | push-slide UP | push-slide DOWN | zoom-through | squeeze`
+
+Pick 2–3 for the whole video and repeat. Frame 1 is `cut` (no previous frame). Match the seam to the narrative: ordered change items → a consistent `push-slide`; a soft reveal / into-the-cause → `crossfade` / `blur-crossfade`; zooming into a code line or pulling back to the file tree → `zoom-through`; a clean new change item → `cut`.
+
+## The diff is the centerpiece
+
+Code beats live on the **navy code surface** (claude's Code Surface treatment) — but the body is **not** all code (pair them with `mechanism` beats, next section). Plan the code beats deliberately:
+
+- **Feature 2–4 real diff hunks**, named in each frame's `scene` — each a small, legible snippet (~4–12 lines), **never a whole file**. Pull them from `capture/diff.patch` / the brief's "Representative diff."
+- Name **which code animation block** the frame wants in `scene` (the Step-4 visual phase and the worker read it). See `code-vocabulary.md` for the full map; the short version: before→after = `code-diff`; refactor/rename continuity = `code-morph`; new code written on = `code-typing`; spotlight one line = `code-highlight`; walk a long file = `code-scroll`; a hero reveal = `code-3d-extrude` / `code-particle-assemble`.
+- Numbers (`+1,204 / −318`, files touched, perf delta) belong on an `impact` / `evidence` frame as a `number-lockup`, **not** read aloud in narration.
+
+## Show the behavior — the mechanism beat (not just the diff)
+
+A diff shows **what changed in the code**. It does **not** show **what the change does** — and "what it does" is usually the more memorable, more explanatory beat. The single biggest reason a PR video feels flat is that every body frame is a code surface or a number: it _tells_ (here are the lines, here is the stat) but never _shows_ (here is the request actually recovering).
+
+A **`mechanism` frame animates the runtime behavior** the PR changes — built as an **invented animated diagram** (SVG / HTML / GSAP on claude's cream ground: hairline-ink nodes / edges / lanes, one coral marker on the active or changed element), where **the build _is_ the teaching** — each part appears on beat, the flow plays out across the shot. It is **not** a code block and **not** a headline. Reach for the `flowchart` / `flowchart-vertical` / `data-chart` registry blocks where they fit; otherwise invent it (visual-design.md's diagram / abstract-graphics register).
+
+Plan **at least one `mechanism` beat** for any PR with a visible runtime behavior (most feature and fix PRs have one). What to animate, by what the change touches:
+
+| The change touches…             | Animate (the behavior, not the code)                                                               |
+| ------------------------------- | -------------------------------------------------------------------------------------------------- |
+| Retry / backoff / resilience    | a request lifecycle: fire → 500 → wait (delay growing) → retry → 200                               |
+| Caching / memoization           | two lanes racing: cold (slow, hits the DB) vs cached (fast, hits the cache)                        |
+| Concurrency / parallelism       | a serial single lane reshaping into parallel lanes                                                 |
+| Race / ordering bug             | the broken behavior first (items dropped, two writers colliding), then the fixed flow              |
+| Performance                     | two timelines / bars racing, the new one finishing first (a `data-chart` fits)                     |
+| Refactor / migration            | a tangled call-graph untangling into a clean one; same inputs → same outputs                       |
+| New endpoint / pipeline / state | data flowing through the new path; a state machine lighting up step by step (`flowchart-vertical`) |
+
+Name the mechanism in the frame's `scene` ("animate the request retrying: fire → 500 → backoff → 200, invented SVG flow") so Step 4 and the worker build it. The `diff` frame and the `mechanism` frame are **complementary** — the diff is the proof in code, the mechanism is the proof in motion; alternate them rather than stacking code surfaces.
+
+## The close: a credits / shipped-by scene
+
+A PR is shipped by people, and every PR video closes with a `credits` frame naming them. `capture/extracted/people.json` lists real contributors (bot-filtered), and Step 1 downloaded each avatar to `assets/<login>.png` (the `avatarFetched: true` entries — confirm with `ls assets/`). `reviewDecision` (e.g. `APPROVED`) is honest grounding.
+
+> **The PR `author` only opened the PR — not necessarily who wrote the code.** A teammate often authors most commits. Lead the credits with `committer`s by `commitCount`, not the opener.
+
+The `credits` frame is an avatar row with names + roles + an "approved" check. On that frame only, set `asset_candidates` to 1–6 entries of `assets/<login>.png — <login>, <role>` (commit authors by `commitCount` first, then reviewers; only `avatarFetched: true` logins). The body stays code-only — avatars appear **only** on this close, never decorating a diff frame. The frame sits in the Step 3 proposal like any other, so the user can cut it there; skip it yourself only when no avatar was fetched.
+
+> **Narrate the name, not the handle.** `people.json` carries a `name` field (GitHub display name, e.g. "Miguel Angel Simon Sierra") next to `login` for whichever contributors `gh` already named (author, commit authors, `mergedBy`); it's `null` for reviewers/commenters/assignees, which `gh pr view` only ever gives a bare login. Before writing this frame, resolve any `null` name yourself for the 1-6 people going on the close: `gh api users/<login> --jq .name`. Voiceover always says the **name** (first name is enough — "Shipped by Miguel, reviewed by Wenbo") and **never** reads a raw `@login` aloud (`@miguAng18947550` spoken by TTS is the failure mode this exists to avoid). On-screen text under each avatar can show both, name first, handle small and secondary: `Miguel Angel Simon Sierra` / `@miguel-heygen`. When a name still doesn't resolve (GitHub has no public name for that user either), fall back to the login on-screen and skip that person from the spoken line rather than reading the handle.
+
+Every other frame has **no** `asset_candidates` (the visuals are invented downstream from `scene` + the diff).
+
+### Versions on the end card (cta / changelog)
+
+A `cta` ("upgrade to vN", "npm i pkg@N") or a changelog "what's new in vN" wants a real version — and **a version is the one fact you must never invent.** A PR carries no shipping version, so Step 1 resolves a best-effort one for MERGED PRs and writes it into `capture/extracted/visible-text.txt` as a `Shipped in: <version> (<source>)` meta line (mirrored in `capture/pr.json` as `shipped_version` / `version_source`). Use it:
+
+- **`Shipped in:` present** → use that exact version on the end card. A `version_source` of `unreleased` means the change is on the default branch but not yet in a tagged release — say "shipping in the next release" rather than pinning a tag.
+- **No `Shipped in:` line** (open PR, or no version resolvable) → **state the repo / PR URL only** ("read the PR at github.com/…", "pull it") and do **not** name or guess a version number.
+
+## Per-frame length budget — ≤ 9 s, word count is the real measurement
+
+The largest quality bug in PR videos is **scripts that talk too long**. TTS runs at **~2.2 words/second**, so a 45-word "7-second" script is really 20 seconds, and the visual phase has to pad the tail with idle drift (the video reads as "shimmering"). Budget by word count:
+
+| Bound                      | Words (@2.2 wps) | Duration     | When                                                                          |
+| -------------------------- | ---------------- | ------------ | ----------------------------------------------------------------------------- |
+| **Soft target — default**  | **≤ 19**         | **≤ 9 s**    | Every frame aims here; the cut stays alive.                                   |
+| **Exception — ≤ 2 frames** | ≤ 26             | ≤ 12 s       | The main `diff` (the one change you must explain) or a causal-chain `change`. |
+| **Hard cap**               | > 26             | > 12 s       | Trim or split.                                                                |
+| **Whole-film target**      | ≤ ~400           | up to ~3 min | Sweet spot ~30–90 s (≤ ~155 words); the body carries the load.                |
+
+Estimate while writing: `duration ≈ ceil(word_count / 2.2)`. 29 words → 13s (trim); 17 words → 8s; 12 words → 6s. Trim techniques: cut the lead-in clause ("Until now, the agent shipped…" → "The agent shipped…"); move numbers off-script onto a counter; split only when the halves carry distinct beats (cause then effect). **Silent frames are allowed and common** — a diff typing on, a before→after morph, a counter running. Set `voiceover` empty, omit from `SCRIPT.md`, and make `narrativeRole` carry it. A complex change does not need a long script; it needs a careful one — if you can't headline the change in 19 words, the headline isn't sharp yet.
+
+**Write each line as discrete cues, not one run-on breath.** Step 5 reveals each on-screen piece _when the voiceover names it_ (the anti-PowerPoint mechanism). A line with clear phrase boundaries — "Three retries — then it backs off — then it gives up clean" — hands the shot its reveal cadence for free; a single long clause leaves the frame nothing to pace to.
+
+## Music & silence
+
+The storyboard's top YAML block carries a `music:` field — the BGM mood the audio step retrieves against (e.g. `music: confident minimal tech underscore`). Omitting it falls back to `message:` → `arc:` → a neutral default, so BGM plays unless turned off explicitly.
+
+- **`music: none`** — BGM off (narration, if any, still runs).
+- **`music: none` + no `SCRIPT.md`** — the canonical **fully-silent marker**: no narration, no BGM, no SFX. `audio.mjs` generates nothing and the audio step is a clean skip. Use exactly this spelling when the user asks for a silent / music-free video.
+
+## Frame template
+
+```md
+## Frame N — Short name
+
+- scene: one clear visual idea — name the hunk/file + the code-\* block ("the request() retry block, ~6 lines, code-diff")
+- voiceover: "spoken guide text, or empty"
+- duration: ceil(word_count / 2.2) seconds
+- transition_in: crossfade
+- status: outline
+- src: compositions/frames/NN-short-name.html
+- type: diff
+- persuasion: Before/after contrast
+- beat: comprehension
+- blueprint: <candidate id from the role→blueprint menu, or omit — a code beat usually omits it (the code-\* block is the shape)>
+
+narrativeRole: What this frame does in the viewer's understanding (its job, not what's on screen).
+keyMessage: The one thing the viewer should understand after this frame (one sentence).
+```
+
+The `credits` frame additionally carries an `asset_candidates:` line (see the credits section); no other frame does.
+
+## Final checklist
+
+- One archetype is named (compound only when explicit); the sequence is narrative-driven, not diff-order-driven.
+- The opening uses a named hook strategy; you do not read the PR description aloud.
+- The hook is in viewer-outcome language (no file / function / identifier names), and the video's `message` lands by beat 2 (story-spine).
+- Each frame has one job; the body builds cumulatively, **alternating `diff` (the code) with `mechanism` (the behavior)** + `impact` / `evidence` — not a single isolated body frame, and not an unbroken stack of code surfaces.
+- Every frame has `type` (PR-native), `persuasion` (a named technique), and `beat` (specific). The emotional arc matches the archetype (fix = frustration → relief; feature = curiosity → confidence).
+- Each `voiceover` is phrase-segmented into cues (each a piece Step 5 can reveal on), not one run-on clause; a candidate `blueprint:` is tagged from the role→blueprint menu where a proven shape fits (a code beat usually omits it — the `code-*` block is the shape).
+- **2–4 real diff hunks** featured, each a small legible snippet (not a whole file), each naming its `code-*` block in `scene`.
+- **At least one `mechanism` beat** animates what the change _does_ at runtime (an invented diagram, or a `flowchart` / `data-chart`), named in its `scene` — unless the PR genuinely has no visible behavior (a pure docs / config bump). The body is not an unbroken run of code surfaces.
+- Transitions use only registry names and repeat 2–3 types; frame 1 is `cut`.
+- The video closes with a `credits` frame (skipped only when no avatar was fetched); `asset_candidates` is absent on every other frame (1–6 `assets/<login>.png` entries on the close, `avatarFetched: true` only).
+- Each `script` fits the budget — ≤ 19 words / ≤ 9 s default, ≤ 2 frames at the ≤ 26 / ≤ 12 s exception; `duration = ceil(word_count / 2.2)`, not a guess.
+- `SCRIPT.md` contains only locked spoken narration; silent frames are intentional and omitted from it.
diff --git a/.claude/skills-media/pr-to-video/references/visual-design.md b/.claude/skills-media/pr-to-video/references/visual-design.md
new file mode 100644
index 000000000..e2d5dc751
--- /dev/null
+++ b/.claude/skills-media/pr-to-video/references/visual-design.md
@@ -0,0 +1,164 @@
+# Visual design — PR-to-video per-frame shot method
+
+> The method behind **Step 4 (Frame visual design)**. You (the orchestrator) read it to **enrich `STORYBOARD.md` frames in place** — story-design wrote the skeleton (each frame's `scene`, `voiceover`, `transition_in`, the narrative fields, and optionally a candidate blueprint id); you add how each frame **looks and moves**. The unit you write per frame is a **time-coded shot sequence** — a shot directed across its whole duration, not a static slide. You write **no HTML** (that's the frame workers). A PR video is **mostly invented** — typography, number-lockups, mechanism diagrams — so you **design** those elements; the two exceptions are **code beats** (a ready-made `code-*` registry block) and the **credits close** (real contributor avatars), both covered below. `frame.md` is your palette/type truth by role. Layout is a compact vocabulary in this file (the **Layout** section below), stated inline per Scene; motion vocabulary + the motion doctrine + the seek-safe core → `motion-language.md`; the proven shapes → `../hyperframes-animation/blueprints-index.md` + `blueprints/<id>.md`; the `code-*` blocks → `code-vocabulary.md`; concrete rules resolve in Step 5 from this skill's local `../hyperframes-animation/rules/`. Adding palette theory or a generic font rule here? Wrong home — `frame.md` + `hyperframes-creative`.
+
+## The unit is a time-coded shot sequence
+
+A frame's visual layer is **a sequence of time windows paced to the voiceover**, not a bag of effect tags. The failure that reads as PowerPoint is **front-loading**: the agent rushes the whole canvas on screen in the first ~25%, and then it just sits. A time-coded shot sequence written **against the VO** makes that impossible: each window states what is on screen and what is moving, and **nothing appears before the voiceover reaches it.** In a PR explainer the development often _is_ the reveal — the diff hunk typing in, the before→after morph, the request-retry diagram running, the impact stat landing. Let the build _be_ the message.
+
+Write each frame as a handful of windows cued by the spoken line:
+
+```
+Scene 1 (0.0–Xs):  only what the VO is saying at t=0 enters — never the whole canvas
+Scene 2 (Xs–Ys):   the next piece reveals as the VO names it (a file chip / the hunk / a node / a stat)
+  …                one window per spoken cue — as many or as few as the line calls for
+Scene N (…–end):   content has resolved; hold the read (stillness; subtle jitter at most)
+```
+
+- Each `Scene` line names **what's on screen**, **what moves in this window**, and **where it sits** (layout, inline). Times are real seconds across the frame's `duration`.
+- **Pace reveals to the voiceover; never front-load.** This is the core anti-PowerPoint mechanism (→ `motion-language.md` Part 2 Rule 2). At t=0 show only what the VO is saying then; reveal each further piece — a line, a file chip, the hunk, a stat — **when the VO names it**, spreading reveals across the shot and especially the **back ~50%**. **The window count = the number of spoken cues the line calls for.** There is **no fixed count and no mandatory "middle" act**; the only sin is dumping everything up front.
+- **End on a held read.** Once the content has resolved it holds and reads — **prefer stillness to bad motion**: no forced camera drift, no lazy breathing, no back-half pan/push; at most a subtle jitter keeps it alive (→ `motion-language.md`). Only the final frame has a real exit; every other frame's exit is the harness transition (story's `transition_in`).
+- A **deliberately held** frame — content already revealed, now reading still — is legitimate and often right (a climax, a breather). The failure is never "too still"; it is **front-loaded-then-frozen**. Place held beats deliberately for rhythm (allocate them in `## Video direction`).
+
+## Pick the shape — instantiate a blueprint
+
+Don't invent each shot from scratch. The frame's **role** (its `type` / `beat`) points to a proven shape:
+
+1. **Match the role to a blueprint.** Open `../hyperframes-animation/blueprints-index.md`, find the frame's role in the **role→blueprint menu**, and pick the blueprint whose intent fits this beat (story may already have named a candidate id — confirm or override it). Read that `blueprints/<id>.md`: it is a short, domain-agnostic, **time-coded shot template with `[slots]`** and a named **signature move**.
+
+2. **Instantiate its `[slots]` with THIS frame's content** — three postures:
+   - **Reproduce** — the blueprint fits the beat and your content maps onto its slots cleanly. Fill every `[slot]` and follow its Scene timing.
+   - **Adapt** — the _structure_ fits but the content / surface doesn't. State **what you keep / what you change** in one line, then write the adapted Scene lines. You may never drop the **signature move**, and you keep the reveals **paced to the VO**.
+   - **Compose** — no blueprint fits the beat. Build the shot from the **motion vocabulary** in `motion-language.md`: still pace reveals to the VO. Mark it `blueprint: compose`.
+
+3. **Keep the signature move.** Whichever posture, the blueprint's signature move is the spine of the shot — carry it through.
+
+> A **code beat** is the one place you don't pick a blueprint for the centerpiece — the `code-*` block _is_ the shape (see **PR code beats** below). You still write the Scene sequence for the surrounding surface.
+
+## What you add to each frame
+
+Story-design's `## Frame N` block already carries the narrative. You append the shot. Story's `scene` / `voiceover` / `transition_in` / role fields stay untouched.
+
+```
+## Frame 4 — The retry fix
+- scene: the request() retry hunk lands on the navy code surface   ← refine only if it could read sharper
+- voiceover: "…"            ← story's; leave it
+- transition_in: crossfade  ← story's; leave it
+- type: diff                ← story's (PR-native)
+- persuasion: Show-the-change
+- beat: clarity
+- blueprint: compose        ← code beats compose the surround; the block owns the code motion
+- focal: code-diff — the request() retry block, ~6 lines   ← you add: the code-* block IS the focal
+- roles: code surface = foreground subject · file header = supporting · dim grid = background
+- sfx: keyclack-soft, soft-confirm
+
+Scene 1 (0.0–1.0s): the navy Code Surface window seats in (scale-in + soft shadow), file header "client/request.ts" types on — Centered, ~60% of frame. Slow push-in underneath.
+Scene 2 (1.0–3.2s): the camera settles onto the hunk; the `code-diff` block runs its own before→after on its cadence (the worker fits it to the duration) — you do not re-specify the code motion.
+Scene 3 (3.2–4.5s): a coral underline draws on the changed line as the VO names it; a `+6/−2` count-up ticks beside the header; settles and holds STILL.
+```
+
+The lightweight tags:
+
+- **`blueprint:`** — the id you instantiated (with `(Reproduce)` / `(Adapt)`), or `compose`. One id per frame.
+- **`focal:`** — for a concept/mechanism beat, the **invented** hero (a hero word, a diagram, a number-lockup); for a **code beat**, the **`code-*` block** (name the block + the hunk); for the **credits** close, the avatar row.
+- **`roles:`** — each element's role: `foreground subject` · `background` (full-bleed, dim 30–50%) · `supporting`. Invented elements you **design**; the only real assets are the credits `assets/<login>.png` avatars (named in story's `asset_candidates`).
+- **`sfx:`** — name the sound the beat wants; the audio script's `fetch-sfx` retrieves it and the assembler mounts it at root — you only **name** it, never embed `<audio>`.
+
+**Layout + motion are stated INLINE in each Scene line** — name the template / density / depth as part of "where it sits", and name the move from `motion-language.md`'s vocabulary; let it settle on a long-tail curve (`power3` default). Never write px / scale / ease curves / ms (the worker writes those).
+
+## PR code beats — name a `code-*` block
+
+For a `diff` / `before_after` / code beat, the frame's centerpiece is a **ready-made `code-*` registry block**, not an invented HTML visual — the one exception to "invent every visual."
+
+- **Name the block in `scene` + `focal`.** Pick the one that fits the beat (before→after = `code-diff`; refactor/rename = `code-morph`; new code written on = `code-typing`; spotlight a line = `code-highlight`; walk a long file = `code-scroll`; a hero reveal = `code-3d-extrude` / `code-particle-assemble`). Full map → `code-vocabulary.md`. Name the hunk too ("the `request()` retry block, ~6 lines"). The block is the `focal`; the Step-5 worker installs + fills it with the real diff.
+- **The block owns the code animation; your Scenes choreograph the surrounding Code Surface.** The block _is_ the development beat (the diff/typewriter/morph plays on its own cadence — the worker only fits it to the frame's `data-duration` so a long snippet doesn't overrun). Your Scene windows move the claude **Code Surface** around it: the navy window seating in, the file header typing on, the camera settling onto the hunk, a `+N/−M` `count-up`, a coral underline drawing on the landed line. Name those moves inline; **do not re-specify the code animation itself.** A code beat is usually `blueprint: compose` (the block is the shape).
+
+## PR mechanism beats — invent an animated diagram of the behavior
+
+A **`mechanism`** frame is the **show-the-behavior** beat — the antidote to a video that only shows code + text. Its `focal` is an **invented animated diagram** that plays out what the change _does_ at runtime (the request retrying, the cache filling, serial→parallel, the race resolved) — **not** a `code-*` block and **not** a headline.
+
+- **Name the behavior + the diagram in `scene` + `focal`.** e.g. `scene: "animate the request lifecycle — fire → 500 → backoff → retry → 200, invented SVG flow"`; `focal: the request-lifecycle flow`. Reach for the `flowchart` / `flowchart-vertical` / `data-chart` registry blocks where they fit (name them in `scene` so Step 5 pre-installs them); otherwise the worker builds it in SVG / HTML / GSAP from claude's atoms.
+- **The build IS the shot sequence.** Unlike a code block (which owns its own animation), the diagram is yours to choreograph across the Scene windows — the lanes / nodes draw on (Scene 1), the flow runs / the lane splits / the front advances as the VO names each step (middle Scenes), the resolved state + one coral emphasis lands (final Scene). Never let it enter then freeze.
+- **Stay on claude's cream ground, hairline-ink.** Nodes / edges / lanes in hairline ink on cream; **one coral marker** on the active or changed element; mono labels. Not the navy code surface (that's for code), not heavy shapes / bokeh. Plan it into the top ~83% (caption keep-out).
+
+A `mechanism` frame carries **no** `asset_candidates` (it's invented, like every non-credits frame).
+
+## Impact & credits
+
+- **Impact / evidence** — numbers (`+1,204 / −318`, files touched, perf delta) go on an `impact` frame as a **`number-lockup`** (claude's Number/Impact treatment): name it the `focal`, reveal it with a `count-up` paced to the VO.
+- **Credits close** — the optional `credits` frame uses the real `assets/<login>.png` avatars (named in story's `asset_candidates`) as the `focal`: an avatar row that staggers in. This is the one frame with non-empty `asset_candidates` and real assets.
+
+## Inventing the visual (non-code beats)
+
+Every non-code, non-credits beat (`hook` / `change` / `cta` / concept) is **designed**, not captured. Three first-class treatments:
+
+- **Typographic / kinetic type** — a hero word, the PR's headline claim, a stat. Treat type as the subject: full-bleed scale, weight contrast, one emphasized term. Strongest for hooks and the cta.
+- **Abstract graphics** — shapes / paths / geometry that _embody_ the idea the script names; don't decorate with generic bokeh.
+- **Diagram / data-viz** — the mechanism diagrams above, a `data-chart` for a perf delta, a number-lockup. The build (each part on beat) is the teaching — design it to assemble across the Scenes.
+
+Make the invented hero **fill 40–60% of the frame** — big enough to read; don't shrink the one designed element into decoration around empty space.
+
+## Layout — named inline per Scene
+
+State each Scene's layout as part of "where it sits." **If the blueprint (or the code-\* block) already implies a composition, that wins** — describe it directly; the vocabulary below is for composing freely. Never write px / scale / shadow (the worker does). One frame's layout can EVOLVE across its Scenes. Use **≥3 different framings per video**; never the same framing twice in a row.
+
+- **Framing vocabulary** — centered (hero / climax / a single code surface) · rule-of-thirds · split-screen (before/after, two surfaces) · layered-depth (immersive) · asymmetric 60/40 or 70/30 (a code surface + a caption rail) · triptych (three changes at once) · full-width strip (a file list / timeline). Let the beat decide, not a quota.
+- **Density** — primary visual ≥ 40% of canvas; ≥ 3 depth layers; never a lone small cluster floating in empty space. Openings/closings are prone to emptiness — add environmental layers (a dim grid, low-opacity scanlines, brand-color ambient). Squint test: after blur you can still pick out the #1 element.
+- **Hierarchy** — combine ≥ 2 of size (3:1) / weight (800 vs 400) / contrast / position (upper-third is golden) / motion, so one element clearly dominates.
+- **Depth** — layer 2–3 of: size, blur, opacity gradient, overlap, shadow-stack, counter-scale on a push.
+- **Don't show**: nav bars, footers, scrollbars, real cursors / browser chrome, generic decorative shapes, floating bokeh / purple-blue "AI" gradients (banned). The navy code surface is for code beats only; mechanism diagrams stay on cream.
+
+## Portrait & square (non-16:9 canvases)
+
+The zones, density, hierarchy, and depth principles all still apply; the **aspect ratio** changes, and a wide layout doesn't transplant into a tall one — design for the storyboard's `format` from the start.
+
+- **Stack vertically, not side-by-side** — split-screen / triptych / 60-40 become top/bottom stacks. A code surface runs nearly full-width in portrait with fewer visible lines.
+- **Vertical center moves with the canvas** — anchor a centered hero around **y ≈ 0.42 × height** (portrait ≈806, square ≈454), not a fixed 540.
+- **Type runs larger, fewer words per line.** **Travels well to portrait:** Centered, Layered Depth, Full-Width Strip; **avoid** wide Split Screen / Triptych — use stacked equivalents.
+
+## `## Video direction` — write the invariants ONCE
+
+The whole video shares one look and one motion grammar. Write a **`## Video direction`** block ONCE at the top of `STORYBOARD.md` so every frame inherits it and per-frame Scene lines carry only the **delta**. This block is load-bearing — **keep it.**
+
+- **palette system** — from `frame.md` (claude): which roles map to which hues. Never invent.
+- **motion grammar + reveal model** — long-tail eases (`power3` default, smooth over bouncy) + the **VO-paced reveal** model + what may stay alive during a hold (subtle jitter at most) (→ `motion-language.md`).
+- **rhythm / held-frame allocation** — name the **held / breather frames** so the video varies its energy.
+- **negative list** — off-brand textures, **plus both motion failure modes** — slideshow (front-load then freeze) and screensaver (everything floating independently) (→ `motion-language.md`).
+
+Do **not** repeat these per frame.
+
+## Palette & type — from `frame.md`, never invented
+
+- **Palette** — `frame.md` (claude) is the color truth; apply its roles per frame. Generic basics → `hyperframes-creative/references/house-style.md`.
+- **Type** — fonts resolve via `frame.md`'s type tokens; reference them **by role** (display / body / mono / the pack's ramp), never by raw family or px. Code surfaces and mechanism labels use the **mono** role. Typography craft → `hyperframes-creative/references/typography.md`.
+
+## Caption-band keep-out (plan side)
+
+The bottom ~17% of the canvas is reserved for the caption pill. Plan every frame's content into the **top ~83%** (the worker enforces the pixel cutoff). When captions are enabled, primary content caps at the band top, and a centered hero anchors at **y ≈ 0.42 × height** (landscape ≈454, portrait ≈806); background / ambient layers are exempt and may stay full-bleed. Holds even when captions are disabled — bottom-edge consistency.
+
+## Where the detail lives
+
+| For…                                                                            | Read                                                                           |
+| ------------------------------------------------------------------------------- | ------------------------------------------------------------------------------ |
+| the proven shapes + role→blueprint menu + how to pick                           | `../hyperframes-animation/blueprints-index.md` → `blueprints/<id>.md`          |
+| the `code-*` blocks (pick + fill for a code beat)                               | `code-vocabulary.md` (local)                                                   |
+| motion — shot model, vocabulary, holds, idle budget, stillness, seek-safe       | `motion-language.md` (local)                                                   |
+| layout — framing, density, depth, hierarchy, inventing the visual, caption band | the **Layout** + **Inventing the visual** sections in this file                |
+| concrete eases / ms / stagger + rule recipe bodies (Step 5)                     | local `../hyperframes-animation/rules/` (the frame worker reads it; you don't) |
+| palette + type tokens                                                           | the project's `frame.md` (claude); basics → `hyperframes-creative`             |
+| within-frame cuts / seams (zoom-through · cut-the-curve · waterfall)            | `cut-catalog.md` (the worker builds them inside the composition)               |
+| transitions                                                                     | story-design owns `transition_in`; you don't touch it                          |
+
+## Before you finish — checklist
+
+- **`## Video direction`** written once at the top (palette · motion grammar + shot model + idle budget · stillness allocation · negative list incl. both failure modes); per-frame entries are deltas.
+- Every frame is a **time-coded shot sequence** with real second windows across its `duration` — not a tag bag.
+- **No frame front-loads** — at t=0 only what the VO is saying enters; each further piece reveals on its spoken cue, across the back ~50%. Window count follows the VO.
+- Every frame names a **`blueprint:`** id (Reproduce / Adapt) or `compose`; an Adapt keeps the signature move; nothing collapses to a single front-loaded dump.
+- **Code beats** name a `code-*` block as the `focal`, let the block own the code animation, and choreograph only the surrounding Code Surface in the Scenes.
+- **Mechanism beats** name an **invented animated diagram of the behavior** (or a `flowchart` / `data-chart`), choreographed across the Scenes on claude's cream ground with one coral marker — not a code block, not typography; the body is not an unbroken run of code surfaces.
+- **Impact** uses a `number-lockup` with a `count-up`; the **credits** close uses the real avatars as the `focal`.
+- Each non-code, non-credits frame names its **invented** `focal` + per-element `roles`, kept few and load-bearing.
+- Layout + motion named **inline** per Scene (no px / ease curves / ms / JS).
+- Content planned into the top ~83% (caption band clear); palette / type pulled from `frame.md` by role.
+- You wrote no HTML.
diff --git a/.claude/skills-media/pr-to-video/scripts/assemble-index.mjs b/.claude/skills-media/pr-to-video/scripts/assemble-index.mjs
new file mode 100644
index 000000000..d504a277d
--- /dev/null
+++ b/.claude/skills-media/pr-to-video/scripts/assemble-index.mjs
@@ -0,0 +1,579 @@
+#!/usr/bin/env node
+// assemble-index.mjs — deterministic top-level index.html assembly for a
+// HyperFrames project. No subagent, no judgment: turns STORYBOARD.md + the
+// built frame files (+ optional audio_meta.json) into the standalone index.html
+// the renderer consumes, and stages the frame-named capture assets into assets/.
+//
+// index.html is a *standalone* composition (root <div id="root"> directly in
+// <body>, no <template> wrapper — template is for sub-comps). Structure is
+// modeled on the canonical fixture packages/studio/fixtures/storyboard-sample/
+// index.html and the authoritative head/audio template in
+// packages/core/docs/quickstart-template.html. Frame mount order = STORYBOARD
+// document order. Transitions are NOT written here — the transitions injector
+// mutates this file afterward (data-start/duration/track-index + GSAP).
+//
+// Track lanes (same-track time-overlap is illegal — lint timeline_track_too_dense):
+//   1      frame sub-comp clips (sequential; the injector 0/1-ping-pongs for overlaps)
+//   2      captions sub-comp clip (full-duration overlay, on top of frames)
+//   10     per-frame voice <audio>
+//   11     BGM <audio>
+//   20+i   SFX <audio> (one lane each)
+//
+// audio_meta.json contract (produced by audio.mjs; OPTIONAL — absent ⇒ silent
+// video, frames only). Durations come from STORYBOARD (audio sync-durations
+// writes them), NOT from here; this file carries only media PATHS, keyed by
+// frame number:
+//   { "bgm":   { "path": "assets/bgm/x.mp3", "volume": 0.12 } | null,
+//     "voices":[ { "frame": 3, "path": "assets/voice/03.wav" } ],
+//     "sfx":   [ { "frame": 3, "file": "assets/sfx/x.mp3", "offset_s": 0,
+//                  "duration_s": 1.0, "volume": 0.35 } ] }
+//
+// Reads:  --storyboard STORYBOARD.md, --hyperframes <project root>,
+//         [--audio-meta audio_meta.json]. On disk: each built frame's src html,
+//         capture/{assets,assets/videos,screenshots}/<basename> for staging, compositions/captions.html.
+// Writes: <project>/index.html  +  stages assets/<basename>  +  (guard ① below)
+//         repairs a frame file in place when its root is missing data-width/height.
+//
+// Pre-assembly frame guards (run in the same pass that reads each frame, so common
+// `lint` failures surface HERE instead of after assembly + a wasted render):
+//   ① AUTO-REPAIR — a sub-comp root missing data-width/data-height: inject the canvas
+//      dims (the renderer needs them on the cloned root; else lint root_missing_dimensions).
+//   ② HARD FAIL  — <video>/<audio> inside a sub-comp: the runtime only drives media that
+//      is a DIRECT child of the host root, so sub-comp media renders blank/black.
+//   ③ HARD FAIL  — a timed element (data-start+duration+track-index) that is not the root
+//      and lacks class="clip" (shows the whole frame), or two same-track clips that overlap.
+//
+// Exit 0 = index.html written + summary. Exit 1 = fatal contract break (no
+// frames, a built/animated frame missing its src/file, a frame with no
+// duration, an inner data-composition-id mismatch, or a guard ②/③ violation).
+// No backstop: fix upstream.
+
+import { existsSync, readFileSync, writeFileSync } from "node:fs";
+import { spawnSync } from "node:child_process";
+import { basename, join, resolve } from "node:path";
+import { parseStoryboard } from "./lib/storyboard.mjs";
+import { parseFormat } from "./lib/dimensions.mjs";
+import { stageAssets } from "./lib/assets.mjs";
+import { parseColors, semanticColors } from "./lib/tokens.mjs";
+import { validateFrameHtml } from "./lib/frame-contract.mjs";
+import { bgmDefaultVolume } from "../../media-use/audio/scripts/lib/bgm.mjs";
+
+// ---------- argv ----------
+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(`✗ assemble-index.mjs: ${msg}`);
+  process.exit(1);
+}
+
+// Ensure the BGM track is at least `total` seconds long. HeyGen (and most music
+// libraries) return a short loopable clip (~15–30s); mounting it at data-duration=total
+// would leave the video's TAIL SILENT. If the file is short, loop-extend it to `total`
+// (with a 0.4s fade-in + 1.5s fade-out) into a sibling *.loop.mp3 and return that path.
+// Needs ffprobe+ffmpeg (present in the render env); degrades to the original + a warning
+// when they're absent, so assembly never hard-fails on audio tooling.
+function ensureBgmCovers(relPath, hyperframesDir, total) {
+  const abs = join(hyperframesDir, relPath);
+  const probe = spawnSync(
+    "ffprobe",
+    ["-v", "error", "-show_entries", "format=duration", "-of", "csv=p=0", abs],
+    { encoding: "utf8" },
+  );
+  if (probe.status !== 0) return { looped: false, short: false, reason: "ffprobe unavailable" };
+  const dur = parseFloat(String(probe.stdout || "").trim());
+  if (!Number.isFinite(dur) || dur <= 0)
+    return { looped: false, short: false, reason: "unreadable duration" };
+  if (dur >= total - 0.1) return { looped: false, short: false, dur }; // already covers
+  const relOut = relPath.replace(/\.([^./]+)$/, ".loop.$1");
+  const absOut = join(hyperframesDir, relOut);
+  const fadeOut = Math.max(0, total - 1.5);
+  const ff = spawnSync(
+    "ffmpeg",
+    [
+      "-y",
+      "-stream_loop",
+      "-1",
+      "-i",
+      abs,
+      "-t",
+      String(total),
+      "-af",
+      `afade=t=in:st=0:d=0.4,afade=t=out:st=${fadeOut}:d=1.5`,
+      "-c:a",
+      "libmp3lame",
+      "-q:a",
+      "2",
+      absOut,
+    ],
+    { encoding: "utf8" },
+  );
+  if (ff.status !== 0 || !existsSync(absOut))
+    return { looped: false, short: true, dur, reason: "ffmpeg unavailable" };
+  return { looped: true, rel: relOut, from: dur };
+}
+
+const hyperframesDir = resolve(flag("hyperframes", "."));
+const storyboardPath = resolve(flag("storyboard", join(hyperframesDir, "STORYBOARD.md")));
+const audioMetaPath = resolve(flag("audio-meta", join(hyperframesDir, "audio_meta.json")));
+const outPath = resolve(flag("out", join(hyperframesDir, "index.html")));
+
+const r3 = (x) => Math.round(x * 1000) / 1000;
+const anomalies = [];
+const frameErrors = []; // fatal per-frame composition violations (guards ②/③) — reported together
+const repairs = []; // auto-repairs applied to frame files in place (guard ①)
+
+// ---------- parse storyboard ----------
+if (!existsSync(storyboardPath)) die(`STORYBOARD.md not found at ${storyboardPath}`);
+const manifest = parseStoryboard(readFileSync(storyboardPath, "utf8"));
+const { width: WIDTH, height: HEIGHT } = parseFormat(manifest.globals.format);
+
+// ---------- per-frame composition guards (see header ①②③) ----------
+// String-level checks on each frame's HTML — no DOM parse, deterministic, run in
+// the same pass that already reads the file. OPEN_TAG matches one opening tag while
+// tolerating quoted attribute values that contain ">" (e.g. inline styles).
+const OPEN_TAG = "<([a-zA-Z][a-zA-Z0-9-]*)((?:[^>\"']|\"[^\"]*\"|'[^']*')*)>";
+const attrPresent = (attrs, name) => new RegExp(`(?:^|\\s)${name}(?:[\\s=]|$)`).test(attrs);
+const attrValue = (attrs, name) => {
+  const m = attrs.match(new RegExp(`(?:^|\\s)${name}\\s*=\\s*(?:"([^"]*)"|'([^']*)')`));
+  return m ? (m[1] ?? m[2]) : null;
+};
+// The root (or a nested-comp mount) legitimately carries timing without class="clip".
+const isRootish = (attrs) =>
+  /(?:^|\s)id\s*=\s*["']root["']/.test(attrs) ||
+  attrPresent(attrs, "data-composition-id") ||
+  attrPresent(attrs, "data-composition-src");
+
+// Locate the composition root opening tag: prefer id="root", else the first element
+// carrying data-composition-id. Returns { start, end, full, attrs } or null.
+function findRootTag(html) {
+  const re = new RegExp(OPEN_TAG, "g");
+  let m;
+  let firstCompId = null;
+  while ((m = re.exec(html))) {
+    const attrs = m[2];
+    if (/(?:^|\s)id\s*=\s*["']root["']/.test(attrs))
+      return { start: m.index, end: m.index + m[0].length, full: m[0], attrs };
+    if (attrPresent(attrs, "data-composition-id") && !firstCompId)
+      firstCompId = { start: m.index, end: m.index + m[0].length, full: m[0], attrs };
+  }
+  return firstCompId;
+}
+
+// Returns { errors: string[], repairedHtml: string|null, repairNote: string|null }.
+function guardFrame(html, label) {
+  const errors = [];
+  // Scan a copy with comments + <script>/<style> bodies blanked, so a tag-like string
+  // in a comment (e.g. "<!-- match the host <video> coords -->") or in GSAP code can't
+  // trip ②/③. ① still splices into the ORIGINAL html, so its offsets stay correct.
+  const scan = html
+    .replace(/<!--[\s\S]*?-->/g, " ")
+    .replace(/<script\b[\s\S]*?<\/script[^>]*>/gi, " ")
+    .replace(/<style\b[\s\S]*?<\/style[^>]*>/gi, " ");
+
+  // ② media inside a sub-comp — never driven by the runtime (renders blank/black).
+  const media = scan.match(/<(video|audio)(?=[\s/>])/i);
+  if (media) {
+    errors.push(
+      `${label}: has a <${media[1].toLowerCase()}> inside the sub-composition. The runtime only drives media that is a DIRECT child of the host root (index.html) — sub-comp media renders blank/black. Move the clip to index.html as a root-level <video>/<audio> and drive any per-scene motion on the main timeline (composition-patterns.md archetype B).`,
+    );
+  }
+
+  // ③ timed-element checks: missing class="clip", and same-track window overlap.
+  const re = new RegExp(OPEN_TAG, "g");
+  const clips = [];
+  let m;
+  while ((m = re.exec(scan))) {
+    const attrs = m[2];
+    if (
+      !attrPresent(attrs, "data-start") ||
+      !attrPresent(attrs, "data-duration") ||
+      !attrPresent(attrs, "data-track-index")
+    )
+      continue;
+    if (isRootish(attrs)) continue;
+    if (!/(?:^|\s)class\s*=\s*["'][^"']*\bclip\b[^"']*["']/.test(attrs)) {
+      errors.push(
+        `${label}: a timed <${m[1]}> (data-start/duration/track-index) has no class="clip" — it renders for the whole frame instead of only its window. Add class="clip", or remove the timing attrs if it is a GSAP-animated element meant to be present throughout.`,
+      );
+    }
+    const track = attrValue(attrs, "data-track-index");
+    const start = parseFloat(attrValue(attrs, "data-start"));
+    const dur = parseFloat(attrValue(attrs, "data-duration"));
+    if (track != null && Number.isFinite(start) && Number.isFinite(dur))
+      clips.push({ track, start, end: start + dur });
+  }
+  const EPS = 1e-3; // adjacent clips that merely touch are legal
+  const byTrack = new Map();
+  for (const c of clips) {
+    const arr = byTrack.get(c.track);
+    if (arr) arr.push(c);
+    else byTrack.set(c.track, [c]);
+  }
+  for (const [track, list] of byTrack) {
+    list.sort((a, b) => a.start - b.start);
+    for (let i = 1; i < list.length; i++) {
+      if (list[i].start < list[i - 1].end - EPS) {
+        errors.push(
+          `${label}: clips on track ${track} overlap (one ends at ${r3(list[i - 1].end)}s, the next starts at ${r3(list[i].start)}s) — same-track time-overlap causes a render conflict. Put them on distinct data-track-index lanes or fix their windows.`,
+        );
+        break; // one report per track is enough
+      }
+    }
+  }
+
+  // ① auto-repair: ensure the root carries data-width / data-height.
+  let repairedHtml = null;
+  let repairNote = null;
+  const root = findRootTag(html);
+  if (root) {
+    const needW = !attrPresent(root.attrs, "data-width");
+    const needH = !attrPresent(root.attrs, "data-height");
+    if (needW || needH) {
+      const inject =
+        (needW ? ` data-width="${WIDTH}"` : "") + (needH ? ` data-height="${HEIGHT}"` : "");
+      const newTag = root.full.replace(/(\/?>)$/, `${inject}$1`);
+      repairedHtml = html.slice(0, root.start) + newTag + html.slice(root.end);
+      repairNote = `${label}: injected${needW ? " data-width" : ""}${needH ? " data-height" : ""} (${WIDTH}×${HEIGHT}) on the root — was missing (would lint root_missing_dimensions)`;
+    }
+  }
+
+  return { errors, repairedHtml, repairNote };
+}
+
+// ---------- resolve mountable frames in document order ----------
+// A frame mounts when its src html exists on disk. A built/animated frame
+// missing its src/file is a contract break (die). An outline frame with no
+// file is skipped (still a placeholder) with an anomaly note.
+const mounted = [];
+for (const f of manifest.frames) {
+  const label = `frame ${f.number ?? f.index}${f.title ? ` (${f.title})` : ""}`;
+  const built = f.status === "built" || f.status === "animated";
+  if (!f.src) {
+    if (built) die(`${label} is ${f.status} but has no \`src\` — the orchestrator must write it`);
+    anomalies.push(`${label}: status ${f.status}, no src — skipped`);
+    continue;
+  }
+  const compAbs = join(hyperframesDir, f.src);
+  // Read directly and handle ENOENT here rather than an existsSync precheck — the
+  // check→read/write pair is a TOCTOU race CodeQL flags (js/file-system-race).
+  let html;
+  try {
+    html = readFileSync(compAbs, "utf8");
+  } catch {
+    if (built)
+      die(`${label} is ${f.status} but its src ${f.src} is not on disk — re-dispatch the worker`);
+    anomalies.push(`${label}: src ${f.src} not on disk (status ${f.status}) — skipped`);
+    continue;
+  }
+  if (!Number.isFinite(f.durationSeconds) || f.durationSeconds <= 0) {
+    die(
+      `${label}: no positive duration (got ${JSON.stringify(f.duration)}) — run audio sync-durations`,
+    );
+  }
+  // Host data-composition-id MUST equal the inner file's, or the runtime never
+  // finds the timeline. frame_id = src basename (frame-worker contract); verify
+  // the inner html actually declares it.
+  const compId = basename(f.src).replace(/\.html?$/i, "");
+  // Guard against blank/partial scene files: a worker that errors or is
+  // interrupted mid-write leaves an empty (or markup-less) file that exists but
+  // fails at render with "Composition HTML is empty or could not be parsed".
+  // Catch it here — before emitting data-composition-src — and re-dispatch.
+  if (!html.trim() || !/<\w/.test(html)) {
+    die(
+      `${label}: ${f.src} is empty or has no HTML — the worker wrote a blank/partial file. Re-dispatch that worker before assembling.`,
+    );
+  }
+  try {
+    validateFrameHtml(html, { expectedId: compId, expectedDuration: f.durationSeconds });
+  } catch (error) {
+    die(`${label}: ${error.message}`);
+  }
+  // pre-assembly guards: ① repair missing root dims in place, ②/③ collect fatal violations.
+  const guard = guardFrame(html, label);
+  if (guard.repairedHtml) {
+    writeFileSync(compAbs, guard.repairedHtml);
+    html = guard.repairedHtml;
+    repairs.push(guard.repairNote);
+  }
+  for (const e of guard.errors) frameErrors.push(e);
+  if (
+    !html.includes(`data-composition-id="${compId}"`) &&
+    !html.includes(`data-composition-id='${compId}'`)
+  ) {
+    die(`${label}: ${f.src} has no data-composition-id="${compId}" (host/inner id must match)`);
+  }
+  mounted.push({ frame: f, compId, durationSeconds: r3(f.durationSeconds) });
+}
+if (frameErrors.length) {
+  die(
+    `${frameErrors.length} frame composition violation(s) — fix the worker output and re-assemble:\n` +
+      frameErrors.map((e) => `  • ${e}`).join("\n"),
+  );
+}
+if (mounted.length === 0) die("no mountable frames (none built with an on-disk src)");
+
+// cumulative starts — emitted data-start[i] + data-duration[i] == start[i+1] by
+// construction (renderer computes end the same way), so adjacent clips touch
+// exactly with no float-overlap.
+let acc = 0;
+for (const m of mounted) {
+  m.start = acc;
+  acc += m.durationSeconds;
+}
+const TOTAL = r3(acc);
+const startOfFrameNumber = new Map();
+for (const m of mounted) if (m.frame.number != null) startOfFrameNumber.set(m.frame.number, m);
+
+// ---------- audio_meta (optional) ----------
+let audio = { bgm: null, voices: [], sfx: [] };
+if (existsSync(audioMetaPath)) {
+  try {
+    const parsed = JSON.parse(readFileSync(audioMetaPath, "utf8"));
+    audio = { bgm: parsed.bgm ?? null, voices: parsed.voices ?? [], sfx: parsed.sfx ?? [] };
+  } catch (e) {
+    die(`audio_meta.json parse: ${e.message}`);
+  }
+}
+const voiceByFrame = new Map();
+for (const v of audio.voices) if (v.frame != null) voiceByFrame.set(v.frame, v);
+
+// ---------- build <body> in track order ----------
+const body = [];
+let voiceCount = 0;
+
+for (const m of mounted) {
+  // (track 1) frame sub-comp clip — no class="clip" semantics needed; .scene CSS sizes it.
+  body.push(
+    `      <div`,
+    `        id="el-${m.compId}"`,
+    `        class="scene"`,
+    `        data-composition-id="${m.compId}"`,
+    `        data-composition-src="${m.frame.src}"`,
+    `        data-start="${m.start}"`,
+    `        data-duration="${m.durationSeconds}"`,
+    `        data-track-index="1"`,
+    `      ></div>`,
+  );
+  // (track 10) voice — only when the file is actually on disk.
+  const v = m.frame.number != null ? voiceByFrame.get(m.frame.number) : undefined;
+  if (v?.path) {
+    if (existsSync(join(hyperframesDir, v.path))) {
+      body.push(
+        `      <audio`,
+        `        id="el-${m.compId}-voice"`,
+        `        src="${v.path}"`,
+        `        data-start="${m.start}"`,
+        `        data-duration="${m.durationSeconds}"`,
+        `        data-track-index="10"`,
+        `        data-volume="1"`,
+        `      ></audio>`,
+      );
+      voiceCount++;
+    } else {
+      anomalies.push(`${m.compId}: voice ${v.path} not on disk — skipped`);
+    }
+  }
+  body.push("");
+}
+
+// (track 11) BGM — duck under narration when any voice is present. Loop-extend a short
+// track to the full video length so the tail isn't silent (libraries return ~15–30s clips).
+let bgmEmitted = false;
+let bgmNote = "";
+if (audio.bgm?.path) {
+  if (existsSync(join(hyperframesDir, audio.bgm.path))) {
+    let bgmSrc = audio.bgm.path;
+    const cov = ensureBgmCovers(audio.bgm.path, hyperframesDir, TOTAL);
+    if (cov.looped) {
+      bgmSrc = cov.rel;
+      bgmNote = ` (looped ${cov.from.toFixed(1)}s→${TOTAL}s)`;
+    } else if (cov.short) {
+      anomalies.push(
+        `bgm is ${cov.dur?.toFixed?.(1) ?? "?"}s (< ${TOTAL}s) and could not be extended (${cov.reason}) — the tail will be silent; install ffmpeg`,
+      );
+    }
+    // An explicit volume from audio_meta always wins; otherwise the shared
+    // media-use default (bed ~ -18 dB under narration, forward for a silent film).
+    const vol = audio.bgm.volume != null ? audio.bgm.volume : bgmDefaultVolume(voiceCount > 0);
+    body.push(
+      `      <!-- BGM -->`,
+      `      <audio`,
+      `        id="el-bgm"`,
+      `        src="${bgmSrc}"`,
+      `        data-start="0"`,
+      `        data-duration="${TOTAL}"`,
+      `        data-track-index="11"`,
+      `        data-volume="${vol}"`,
+      `      ></audio>`,
+      "",
+    );
+    bgmEmitted = true;
+  } else {
+    anomalies.push(`bgm ${audio.bgm.path} not on disk — skipped`);
+  }
+}
+
+// (track 2) captions — captions.mjs writes this or legally skips; key off existence.
+let captionsEmitted = false;
+if (existsSync(join(hyperframesDir, "compositions/captions.html"))) {
+  body.push(
+    `      <!-- captions -->`,
+    `      <div`,
+    `        id="el-captions"`,
+    `        class="scene"`,
+    `        data-composition-id="captions"`,
+    `        data-composition-src="compositions/captions.html"`,
+    `        data-start="0"`,
+    `        data-duration="${TOTAL}"`,
+    `        data-track-index="2"`,
+    `      ></div>`,
+    "",
+  );
+  captionsEmitted = true;
+}
+
+// (track 20+i) SFX — placed at its frame's start + offset.
+let sfxEmitted = 0;
+audio.sfx.forEach((cue, i) => {
+  const host = cue.frame != null ? startOfFrameNumber.get(cue.frame) : undefined;
+  if (!host) {
+    anomalies.push(`sfx ${cue.file}: frame ${cue.frame} not mounted — skipped`);
+    return;
+  }
+  const rel = cue.file;
+  if (!existsSync(join(hyperframesDir, rel))) {
+    anomalies.push(`sfx ${rel} not on disk — skipped`);
+    return;
+  }
+  const t = r3(host.start + (cue.offset_s ?? 0));
+  const dur = r3(cue.duration_s ?? 1);
+  const vol = cue.volume != null ? cue.volume : 0.35;
+  if (sfxEmitted === 0) body.push(`      <!-- SFX -->`);
+  body.push(
+    `      <audio`,
+    `        id="el-sfx-${i}"`,
+    `        src="${rel}"`,
+    `        data-start="${t}"`,
+    `        data-duration="${dur}"`,
+    `        data-track-index="${20 + i}"`,
+    `        data-volume="${vol}"`,
+    `      ></audio>`,
+  );
+  sfxEmitted++;
+});
+
+// ---------- stage frame-named assets: capture/ → assets/ (idempotent backstop) ----------
+// Frame workers + the live preview reference assets/<basename>; stage-assets.mjs
+// already ran this at Step 4 close. Re-run as a backstop so a late-named asset
+// still lands. Shared logic: lib/assets.mjs (first-wins, safe to call twice).
+const {
+  staged,
+  wanted,
+  anomalies: assetAnomalies,
+} = stageAssets({
+  hyperframesDir,
+  frames: manifest.frames,
+});
+for (const a of assetAnomalies) anomalies.push(a);
+
+// ---------- <head> ----------
+// ---------- ground color ----------
+// Per-frame roots carry data-start/data-duration and get clip-gated against the
+// global timeline in render (only the first frame's [0,dur] window overlaps global
+// 0), so a frame's own full-bleed background can't be relied on as the video ground —
+// every frame after the first would render on the bare body color (black). Paint the
+// ground on the always-present root composition instead, using the project's frame.md
+// canvas color (the same ground role the caption skin maps to --cap-canvas). Falls
+// back to the body letterbox color when frame.md is absent or has no resolvable ground.
+const framePath = join(hyperframesDir, "frame.md");
+let groundColor = null;
+if (existsSync(framePath)) {
+  try {
+    const roles = semanticColors(parseColors(readFileSync(framePath, "utf8")));
+    if (roles && roles.canvas) groundColor = roles.canvas;
+  } catch {
+    /* leave groundColor null — #root stays transparent over the body letterbox */
+  }
+}
+
+const headStyle = [
+  "      * {",
+  "        margin: 0;",
+  "        padding: 0;",
+  "        box-sizing: border-box;",
+  "      }",
+  "      html,",
+  "      body {",
+  `        width: ${WIDTH}px;`,
+  `        height: ${HEIGHT}px;`,
+  "        overflow: hidden;",
+  "        background: #000;",
+  "      }",
+  "      #root {",
+  "        position: relative;",
+  `        width: ${WIDTH}px;`,
+  `        height: ${HEIGHT}px;`,
+  "        overflow: hidden;",
+  ...(groundColor ? [`        background: ${groundColor};`] : []),
+  "      }",
+  "      .scene {",
+  "        position: absolute;",
+  "        inset: 0;",
+  "        width: 100%;",
+  "        height: 100%;",
+  "      }",
+].join("\n");
+
+const html = `<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=${WIDTH}, height=${HEIGHT}" />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js" integrity="sha384-sG0Hv1tP1lZCk9KQmrIbY/XNwi+OY84GQqhMscbnsoBFqAz8KNCil1kvfL3Hbbk2" crossorigin="anonymous"></script>
+    <style>
+${headStyle}
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="main"
+      data-start="0"
+      data-duration="${TOTAL}"
+      data-width="${WIDTH}"
+      data-height="${HEIGHT}"
+    >
+${body.join("\n")}
+    </div>
+
+    <script>
+      window.__timelines = window.__timelines || {};
+      window.__timelines["main"] = gsap.timeline({ paused: true });
+    </script>
+  </body>
+</html>
+`;
+
+writeFileSync(outPath, html);
+
+// ---------- summary ----------
+console.log(`✓ wrote ${outPath}`);
+console.log(`  canvas:            ${WIDTH}×${HEIGHT}`);
+console.log(`  frames (track 1):  ${mounted.length}`);
+console.log(`  voice  (track 10): ${voiceCount}`);
+console.log(`  bgm    (track 11): ${bgmEmitted ? "yes" + bgmNote : "no"}`);
+console.log(`  captions (track 2): ${captionsEmitted ? "yes" : "no"}`);
+console.log(`  sfx    (track 20+): ${sfxEmitted}`);
+console.log(`  assets staged:     ${staged}/${wanted.size}`);
+console.log(`  total duration:    ${TOTAL}s`);
+if (repairs.length) {
+  console.log(`\nrepaired (frame files updated in place):`);
+  for (const rp of repairs) console.log(`  - ${rp}`);
+}
+if (anomalies.length) {
+  console.log(`\nanomalies (non-fatal):`);
+  for (const a of anomalies) console.log(`  - ${a}`);
+}
diff --git a/.claude/skills-media/pr-to-video/scripts/audio.mjs b/.claude/skills-media/pr-to-video/scripts/audio.mjs
new file mode 100644
index 000000000..3bae9e243
--- /dev/null
+++ b/.claude/skills-media/pr-to-video/scripts/audio.mjs
@@ -0,0 +1,273 @@
+#!/usr/bin/env node
+// audio.mjs — audio ADAPTER (reuses the product-launch SCRIPT.md / STORYBOARD.md
+// model; this file is intentionally identical across the reusing skills). The
+// TTS / BGM / SFX implementation
+// no longer lives here: it is the shared engine at
+// ../../media-use/audio/scripts/audio.mjs. This file only (a) maps the
+// product-launch model (SCRIPT.md frames + STORYBOARD.md music/sfx) into the
+// engine's neutral audio_request.json, (b) converts the engine's id-keyed
+// audio_meta back into the frame-keyed shape captions.mjs / assemble-index.mjs
+// already consume, and (c) keeps the local `sync-durations` pass (it rewrites
+// STORYBOARD.md, which is product-launch-specific).
+//
+// Three modes (unchanged CLI surface):
+//   (default) generate — engine --only tts,bgm. BGM mode is "retrieve" (strict:
+//        no HeyGen credential ⇒ skip, never a detached generate, since this
+//        workflow has no wait-bgm step). Runs in the background during Step 4.
+//   sync-durations — write real voice durations into STORYBOARD.md (local).
+//   fetch-sfx      — engine --only sfx, merged into the existing meta (Step 5,
+//        after the frames' `sfx:` cues exist).
+//
+//   node audio.mjs --script ./SCRIPT.md --storyboard ./STORYBOARD.md --hyperframes . --out ./audio_meta.json
+//   node audio.mjs sync-durations --audio-meta ./audio_meta.json --storyboard ./STORYBOARD.md
+//   node audio.mjs fetch-sfx --storyboard ./STORYBOARD.md --hyperframes .
+
+import { spawnSync } from "node:child_process";
+import { existsSync, readFileSync, rmSync, writeFileSync } from "node:fs";
+import { dirname, join, resolve } from "node:path";
+import { fileURLToPath } from "node:url";
+import { parseStoryboard } from "./lib/storyboard.mjs";
+
+const HERE = dirname(fileURLToPath(import.meta.url));
+const DEFAULT_ENGINE = join(HERE, "..", "..", "media-use", "audio", "scripts", "audio.mjs");
+
+const flag = (argv, name, def) => {
+  const i = argv.indexOf(`--${name}`);
+  return i >= 0 && i + 1 < argv.length ? argv[i + 1] : def;
+};
+const pad2 = (n) => String(n).padStart(2, "0");
+
+// SCRIPT.md → [{ frame, text }]. `## … (Frame N)` opens a line; `**key:**` rows
+// are metadata; the indented block is the spoken text (the only TTS input).
+function parseScript(md) {
+  const out = [];
+  let cur = null;
+  const flush = () => {
+    if (cur && cur.text.trim()) out.push({ frame: cur.frame, text: cur.text.trim() });
+    cur = null;
+  };
+  for (const line of md.split(/\r?\n/)) {
+    const h = line.match(/^#{2,3}\s+.*?\(frame\s+(\d+)\)/i);
+    if (h) {
+      flush();
+      cur = { frame: Number(h[1]), text: "" };
+      continue;
+    }
+    if (!cur) continue;
+    if (/^\s*\*\*/.test(line)) continue;
+    const m = line.match(/^(?: {4,}|\t)(.+)$/);
+    if (m) cur.text += (cur.text ? " " : "") + m[1].trim();
+  }
+  flush();
+  return out;
+}
+
+// Path of the engine's neutral meta — a stable sidecar so `--only` merges
+// (generate then fetch-sfx) accumulate, while audio_meta.json holds the PL shape.
+const neutralPath = (plOutPath) => join(dirname(plOutPath), "audio_engine_meta.json");
+
+// Run the shared engine. Returns nothing; dies on a non-zero exit.
+function runEngine({ request, hyperframesDir, neutral, only, extra = [] }, die) {
+  const reqPath = join(hyperframesDir, "audio_request.json");
+  writeFileSync(reqPath, JSON.stringify(request, null, 2));
+  const engine = process.env.HF_MEDIA_ENGINE || DEFAULT_ENGINE;
+  if (!existsSync(engine)) die(`media audio engine not found at ${engine} (set $HF_MEDIA_ENGINE)`);
+  const args = [
+    engine,
+    "--request",
+    reqPath,
+    "--hyperframes",
+    hyperframesDir,
+    "--out",
+    neutral,
+    "--only",
+    only,
+    ...extra,
+  ];
+  const r = spawnSync("node", args, { stdio: "inherit" });
+  if (r.status !== 0) die(`media audio engine exited ${r.status}`);
+}
+
+// Engine neutral meta (id-keyed) → product-launch meta (frame-keyed) consumed by
+// captions.mjs / assemble-index.mjs. id is the zero-padded frame number.
+function toProductLaunchMeta(neutral) {
+  const voices = (neutral.voices ?? []).map((v) => ({
+    frame: Number(v.id),
+    path: v.path,
+    duration_s: v.duration_s,
+    words: (v.words ?? []).map((w) => ({ id: w.id, text: w.text, start: w.start, end: w.end })),
+  }));
+  const bgm = neutral.bgm
+    ? {
+        path: neutral.bgm.path,
+        volume: neutral.bgm.volume,
+        query: neutral.bgm.query ?? null,
+        duration_s: neutral.bgm.duration_s ?? null,
+      }
+    : null;
+  const sfx = (neutral.sfx ?? []).map((s) => ({
+    frame: Number(s.id),
+    file: s.file,
+    offset_s: s.offset_s ?? 0,
+    duration_s: s.duration_s ?? 1,
+    volume: s.volume ?? 0.35,
+  }));
+  return { bgm, voices, sfx };
+}
+
+// ── generate (TTS + BGM) ────────────────────────────────────────────────────
+function runGenerate(argv) {
+  const die = (m) => {
+    console.error(`✗ audio generate: ${m}`);
+    process.exit(1);
+  };
+  const hyperframesDir = resolve(flag(argv, "hyperframes", "."));
+  const storyboardPath = resolve(flag(argv, "storyboard", join(hyperframesDir, "STORYBOARD.md")));
+  const scriptPath = resolve(flag(argv, "script", join(hyperframesDir, "SCRIPT.md")));
+  const outPath = resolve(flag(argv, "out", join(hyperframesDir, "audio_meta.json")));
+  const userVoice = flag(argv, "voice", null);
+  const speed = Number(flag(argv, "speed", "1.0")) || 1.0;
+
+  if (!existsSync(storyboardPath)) die(`STORYBOARD.md not found at ${storyboardPath}`);
+  const manifest = parseStoryboard(readFileSync(storyboardPath, "utf8"));
+  const g = manifest.globals;
+
+  const lines = existsSync(scriptPath)
+    ? parseScript(readFileSync(scriptPath, "utf8")).map((l) => ({
+        id: pad2(l.frame),
+        text: l.text,
+      }))
+    : [];
+  // The canonical fully-silent marker (SKILL.md Step 3.1): `music: none` in
+  // the storyboard's top YAML block turns BGM off; combined with no SCRIPT.md
+  // the project is fully silent — generate nothing and remove any stale meta
+  // from a previous run (assemble treats an absent audio_meta.json as silent).
+  const bgmOff =
+    String(g.extra?.music ?? "")
+      .trim()
+      .toLowerCase() === "none";
+  if (bgmOff && !lines.length) {
+    rmSync(outPath, { force: true });
+    rmSync(neutralPath(outPath), { force: true });
+    console.log(
+      "✓ audio generate: project marked silent (music: none, no SCRIPT.md) — nothing to generate",
+    );
+    return;
+  }
+  if (!lines.length) console.error("· no SCRIPT.md — silent film (BGM only)");
+
+  // BGM mood: storyboard `music:` → message → arc → default. `mode: retrieve` is
+  // strict here (no wait-bgm step downstream).
+  const query = (g.extra && g.extra.music) || g.message || g.arc || "calm cinematic underscore";
+  const request = {
+    provider: "auto",
+    speed,
+    lines,
+    bgm: bgmOff
+      ? { mode: "none" }
+      : { mode: "retrieve", query, blob: g.message || "", arc: g.arc || "" },
+  };
+  if (userVoice) request.voice = userVoice;
+
+  const neutral = neutralPath(outPath);
+  runEngine({ request, hyperframesDir, neutral, only: "tts,bgm" }, die);
+
+  const meta = toProductLaunchMeta(JSON.parse(readFileSync(neutral, "utf8")));
+  writeFileSync(outPath, JSON.stringify(meta, null, 2));
+  console.log(
+    `✓ audio generate: ${meta.voices.length} voice + ${meta.bgm ? "1 bgm" : "no bgm"} → ${outPath}`,
+  );
+}
+
+// ── fetch-sfx ────────────────────────────────────────────────────────────────
+function runFetchSfx(argv) {
+  const die = (m) => {
+    console.error(`✗ audio fetch-sfx: ${m}`);
+    process.exit(1);
+  };
+  const hyperframesDir = resolve(flag(argv, "hyperframes", "."));
+  const storyboardPath = resolve(flag(argv, "storyboard", join(hyperframesDir, "STORYBOARD.md")));
+  const outPath = resolve(flag(argv, "audio-meta", join(hyperframesDir, "audio_meta.json")));
+
+  if (!existsSync(storyboardPath)) die(`STORYBOARD.md not found at ${storyboardPath}`);
+  const manifest = parseStoryboard(readFileSync(storyboardPath, "utf8"));
+
+  // Per-frame `sfx:` cues (comma-separated) → engine lines carrying only sfx.
+  const lines = [];
+  for (const f of manifest.frames) {
+    const names = (f.extra?.sfx ?? "")
+      .split(",")
+      .map((s) => s.trim())
+      .filter(Boolean);
+    if (names.length && f.number != null) lines.push({ id: pad2(f.number), sfx: names });
+  }
+
+  const neutral = neutralPath(outPath);
+  const request = { lines, bgm: { mode: "none" } };
+  // --only sfx is a MERGE, not an overwrite: the engine reads the existing neutral
+  // sidecar (audio_engine_meta.json) and recomputes only the sfx section, so the
+  // voices/bgm written by the earlier generate (--only tts,bgm) pass are preserved.
+  runEngine({ request, hyperframesDir, neutral, only: "sfx" }, die);
+
+  const meta = toProductLaunchMeta(JSON.parse(readFileSync(neutral, "utf8")));
+  writeFileSync(outPath, JSON.stringify(meta, null, 2));
+  console.log(`✓ audio fetch-sfx: ${meta.sfx.length} SFX cue(s) → ${outPath}`);
+}
+
+// ── sync-durations (local; rewrites STORYBOARD.md) ────────────────────────────
+function runSyncDurations(argv) {
+  const die = (m) => {
+    console.error(`✗ audio sync-durations: ${m}`);
+    process.exit(1);
+  };
+  const hyperframesDir = resolve(flag(argv, "hyperframes", "."));
+  const audioMetaPath = resolve(flag(argv, "audio-meta", join(hyperframesDir, "audio_meta.json")));
+  const storyboardPath = resolve(flag(argv, "storyboard", join(hyperframesDir, "STORYBOARD.md")));
+  if (!existsSync(audioMetaPath)) die(`audio_meta.json not found at ${audioMetaPath}`);
+
+  const meta = JSON.parse(readFileSync(audioMetaPath, "utf8"));
+  const durByFrame = new Map();
+  for (const v of meta.voices ?? []) {
+    if (v.frame != null && v.duration_s) durByFrame.set(v.frame, v.duration_s);
+  }
+
+  // Read directly and handle ENOENT here, rather than an existsSync precheck —
+  // the check→write pair (write-back below) is a TOCTOU race CodeQL flags.
+  let storyboardRaw = "";
+  try {
+    storyboardRaw = readFileSync(storyboardPath, "utf8");
+  } catch {
+    die(`STORYBOARD.md not found at ${storyboardPath}`);
+  }
+  const lines = storyboardRaw.split(/\r?\n/);
+  const FRAME_RE = /^#{2,3}\s+(?:frame|beat|scene)\b.*?(\d+)/i;
+  let curFrame = null;
+  let updated = 0;
+  for (let i = 0; i < lines.length; i++) {
+    const h = lines[i].match(FRAME_RE);
+    if (h) {
+      curFrame = Number(h[1]);
+      continue;
+    }
+    if (curFrame != null && durByFrame.has(curFrame)) {
+      const m = lines[i].match(/^(\s*[-*]\s+duration\s*:\s*).*/i);
+      if (m) {
+        lines[i] = `${m[1]}${durByFrame.get(curFrame)}s`;
+        durByFrame.delete(curFrame);
+        updated++;
+      }
+    }
+  }
+  writeFileSync(storyboardPath, lines.join("\n"));
+  const missing = [...durByFrame.keys()];
+  console.log(
+    `✓ audio sync-durations: ${updated} frame duration(s) updated` +
+      (missing.length ? ` · no \`- duration:\` line for frame(s) ${missing.join(", ")}` : ""),
+  );
+}
+
+// ── dispatch ──────────────────────────────────────────────────────────────────
+const sub = process.argv[2];
+if (sub === "sync-durations") runSyncDurations(process.argv.slice(3));
+else if (sub === "fetch-sfx") runFetchSfx(process.argv.slice(3));
+else runGenerate(process.argv.slice(2)); // default: generate
diff --git a/.claude/skills-media/pr-to-video/scripts/build-frame.mjs b/.claude/skills-media/pr-to-video/scripts/build-frame.mjs
new file mode 100644
index 000000000..259c0e4ba
--- /dev/null
+++ b/.claude/skills-media/pr-to-video/scripts/build-frame.mjs
@@ -0,0 +1,567 @@
+#!/usr/bin/env node
+// build-frame.mjs — Step 2 design system in ONE command. The LLM only chooses a
+// preset; this does the deterministic rest: copy the preset's FRAME.md → frame.md,
+// remix its colors/typography onto the project's brand tokens, copy the preset's
+// caption-skin.html, and self-validate. "Strict on brand" is deterministic, so it's
+// a script, not LLM hand-editing (which mis-copies hex / breaks keys).
+//
+//   node build-frame.mjs --preset capsule --hyperframes .
+//     [--tokens capture/extracted/tokens.json]  [--preset-dir <abs path to frame-presets>]
+//
+// Remix rule — ONLY `colors:` values and `typography:` fontFamily change; keys,
+// structure, geometry, and components are untouched:
+//   colors — map brand tokens onto the preset's keys BY ROLE: the ink-role key takes
+//            the brand ink (darkest/ink-named), the canvas-role key takes the brand
+//            canvas (lightest), and every other color is repainted with the nearest
+//            brand accent's hue+saturation while KEEPING its own lightness, so tint
+//            families (sun / sun-soft / haze) stay a family. Empty brand colors → the
+//            preset palette is kept (it is already a complete, good design).
+//   fonts  — the preset's display family → the brand display font, its body family →
+//            the brand body font, wherever they appear. Empty brand fonts → kept.
+
+import {
+  copyFileSync,
+  existsSync,
+  mkdirSync,
+  readdirSync,
+  readFileSync,
+  writeFileSync,
+} from "node:fs";
+import { dirname, join, resolve } from "node:path";
+import { fileURLToPath } from "node:url";
+import {
+  brandRolesFromStats,
+  chroma,
+  lum,
+  parseColors,
+  parseFonts,
+  pickAccent,
+  semanticColors,
+  STATUS_ROLE_KEY,
+  UA_DEFAULT_COLORS,
+} from "./lib/tokens.mjs";
+
+const __dirname = 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 die = (m) => {
+  console.error(`✗ build-frame: ${m}`);
+  process.exit(1);
+};
+
+const presetName = flag("preset", null);
+const hyperframesDir = resolve(flag("hyperframes", "."));
+const presetDir = resolve(
+  flag("preset-dir", join(__dirname, "../../hyperframes-creative/frame-presets")),
+);
+const tokensPath = resolve(flag("tokens", join(hyperframesDir, "capture/extracted/tokens.json")));
+
+if (!presetName) die("--preset <name> is required");
+const presetFrame = join(presetDir, presetName, "FRAME.md");
+if (!existsSync(presetFrame)) {
+  const avail = existsSync(presetDir)
+    ? readdirSync(presetDir, { withFileTypes: true })
+        .filter((d) => d.isDirectory())
+        .map((d) => d.name)
+    : [];
+  die(
+    `no FRAME.md for preset "${presetName}" under ${presetDir}\n  available: ${avail.join(", ")}`,
+  );
+}
+
+// ── HSL helpers (recolor = brand hue+sat, original lightness) ──────────────────
+function hexToHsl(hex) {
+  const m = /^#?([0-9a-fA-F]{6})$/.exec(String(hex).trim());
+  if (!m) return null;
+  const n = parseInt(m[1], 16);
+  const r = ((n >> 16) & 255) / 255,
+    g = ((n >> 8) & 255) / 255,
+    b = (n & 255) / 255;
+  const max = Math.max(r, g, b),
+    min = Math.min(r, g, b),
+    d = max - min;
+  let h = 0;
+  const l = (max + min) / 2;
+  const s = d === 0 ? 0 : l > 0.5 ? d / (2 - max - min) : d / (max + min);
+  if (d !== 0) {
+    h = max === r ? (g - b) / d + (g < b ? 6 : 0) : max === g ? (b - r) / d + 2 : (r - g) / d + 4;
+    h *= 60;
+  }
+  return { h, s, l };
+}
+function hslToHex(h, s, l) {
+  h = (((h % 360) + 360) % 360) / 360;
+  const hue = (p, q, t) => {
+    t = (t + 1) % 1;
+    if (t < 1 / 6) return p + (q - p) * 6 * t;
+    if (t < 1 / 2) return q;
+    if (t < 2 / 3) return p + (q - p) * (2 / 3 - t) * 6;
+    return p;
+  };
+  let r, g, b;
+  if (s === 0) {
+    r = g = b = l;
+  } else {
+    const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
+    const p = 2 * l - q;
+    r = hue(p, q, h + 1 / 3);
+    g = hue(p, q, h);
+    b = hue(p, q, h - 1 / 3);
+  }
+  const to = (x) =>
+    Math.round(x * 255)
+      .toString(16)
+      .padStart(2, "0")
+      .toUpperCase();
+  return `#${to(r)}${to(g)}${to(b)}`;
+}
+const hueDist = (a, b) => {
+  const d = Math.abs(a - b) % 360;
+  return d > 180 ? 360 - d : d;
+};
+function hexToRgb(hex) {
+  const m = /^#?([0-9a-fA-F]{6})$/.exec(String(hex).trim());
+  if (!m) return null;
+  const n = parseInt(m[1], 16);
+  return [(n >> 16) & 255, (n >> 8) & 255, n & 255];
+}
+const rgbToHsl = (r, g, b) =>
+  hexToHsl("#" + [r, g, b].map((x) => Math.round(x).toString(16).padStart(2, "0")).join(""));
+// Repaint a chromatic rgba()/rgb() tint with the brand accent's RGB, keeping its alpha.
+// A near-neutral rgb (shadow / scrim overlay) is left untouched; a non-rgba string → null.
+function remapRgbaToAccent(val, brAccent, brAccent2, prAccentHsl, prAccent2Hsl) {
+  const m = /^rgba?\(\s*([\d.]+)[\s,]+([\d.]+)[\s,]+([\d.]+)\s*(?:[,/]\s*([\d.]+%?))?\s*\)$/i.exec(
+    String(val).trim(),
+  );
+  if (!m) return null;
+  const r = +m[1],
+    g = +m[2],
+    b = +m[3],
+    a = m[4];
+  if (Math.max(r, g, b) - Math.min(r, g, b) < 16) return null; // neutral overlay — keep as-is
+  const src = rgbToHsl(r, g, b);
+  const useSecond =
+    brAccent2 &&
+    prAccentHsl &&
+    prAccent2Hsl &&
+    src &&
+    hueDist(src.h, prAccent2Hsl.h) < hueDist(src.h, prAccentHsl.h);
+  const t = hexToRgb(useSecond ? brAccent2 : brAccent);
+  if (!t) return null;
+  return a !== undefined
+    ? `rgba(${t[0]}, ${t[1]}, ${t[2]}, ${a})`
+    : `rgb(${t[0]}, ${t[1]}, ${t[2]})`;
+}
+
+// ── brand tokens ──────────────────────────────────────────────────────────────
+let brandColors = [];
+let brandFonts = [];
+let brandFontWeights = []; // weights the brand text font actually ships (tokens fonts[].weights)
+let brandColorStats = []; // rich per-color usage stats (areaBg / interactiveBg / textCount …)
+// Icon/glyph fonts capture surfaces as "fonts" — they are never the brand text face
+// (webflow-icons, Font Awesome, icomoon …) and must not become display/body or contribute weights.
+const ICON_FONT_PATTERN =
+  /(?:^|[\s_-])icons?(?:[\s_-]|$)|icomoon|font\s*-?awesome|glyphicons?|material\s*icons|feather\s*icons|(?:icon|glyph).*font|font.*(?:icon|glyph)|^vidaxlfont$/i;
+const isIconFont = (name) => ICON_FONT_PATTERN.test(String(name));
+if (existsSync(tokensPath)) {
+  try {
+    const t = JSON.parse(readFileSync(tokensPath, "utf8"));
+    brandColors = (t.colors ?? [])
+      .map((c) => (typeof c === "string" ? c : (c?.hex ?? c?.value ?? "")))
+      .map((c) => String(c).trim())
+      .filter((c) => /^#?[0-9a-fA-F]{6}$/.test(c))
+      .map((c) => (c.startsWith("#") ? c : `#${c}`));
+    brandFonts = (t.fonts ?? [])
+      .map((f) => (typeof f === "string" ? f : (f?.family ?? f?.name ?? "")))
+      .map((f) => String(f).split(",")[0].replace(/['"]/g, "").trim())
+      .filter(Boolean)
+      .filter((f) => !isIconFont(f));
+    // Union of the (non-icon) brand fonts' available weights — used to clamp the preset's
+    // type ramp so a font shipping only 400/500 never faux-bolds a 600/700 heading.
+    brandFontWeights = [
+      ...new Set(
+        (t.fonts ?? [])
+          .filter((f) => f && typeof f === "object" && !isIconFont(f.family ?? f.name ?? ""))
+          .flatMap((f) => (Array.isArray(f.weights) ? f.weights : []))
+          .map((w) => parseInt(w, 10))
+          .filter((w) => Number.isFinite(w)),
+      ),
+    ].sort((a, b) => a - b);
+    brandColorStats = Array.isArray(t.colorStats) ? t.colorStats : [];
+  } catch (e) {
+    die(`tokens.json parse: ${e.message}`);
+  }
+}
+
+let md = readFileSync(presetFrame, "utf8");
+const presetColors = parseColors(md);
+const summary = [];
+
+// ── color remix ───────────────────────────────────────────────────────────────
+if (brandColors.length && presetColors.length) {
+  const pr = semanticColors(presetColors);
+  // Brand roles: prefer the function-based reading of capture colorStats (canvas =
+  // largest background, accent = top interactive bg, ink = dominant contrasting text).
+  // Fall back to the legacy luminance/chroma heuristic only when stats are absent —
+  // but pick the accent via pickAccent either way so a UA-default link color never wins.
+  const br =
+    brandRolesFromStats(brandColorStats, brandColors) ??
+    (() => {
+      // strip UA-default link colors so a stray <a> color can't become ink/canvas/accent
+      const clean = brandColors.filter((h) => !UA_DEFAULT_COLORS.has(h.toUpperCase()));
+      const s = semanticColors(clean.map((h, i) => [`c${i}`, h]));
+      return {
+        ink: s.ink,
+        canvas: s.canvas,
+        accent: pickAccent(brandColorStats, clean, [s.ink, s.canvas]) ?? s.accent,
+        accent2: s.accent2,
+      };
+    })();
+  if (!br.accent) die("accent 选取失败：品牌色里没有可用的强调色");
+  if (chroma(br.accent) <= 40) {
+    console.warn(
+      `  ⚠ accent ${br.accent} 彩度很低 (${chroma(br.accent)}) — 确认这是品牌色而非中性/默认色`,
+    );
+  }
+  // Map by LUMINANCE POLARITY. The preset's darker value takes the brand's darker value and
+  // the lighter takes the lighter — UNLESS the brand's GROUND polarity differs from the
+  // preset's. Every shipped preset is light-ground; a dark-mode brand (Linear, Vercel,
+  // Raycast…) has its canvas darker than its ink (colorStats already resolved the real
+  // ground as the largest-area background). On a polarity MISMATCH we INVERT the mapping so a
+  // light preset becomes the dark brand (canvas↔ink swap) instead of forcing the brand onto
+  // an off-brand light video; neutral/tint lightness is then mirrored (L→1−L) so the whole
+  // palette flips to the brand's ground. Same-polarity (the common case) is unchanged.
+  const darker = (a, b) => ((lum(a) ?? 0) <= (lum(b) ?? 0) ? a : b);
+  const prDark = darker(pr.ink, pr.canvas);
+  const prLight = prDark === pr.ink ? pr.canvas : pr.ink;
+  const brDark = darker(br.ink, br.canvas);
+  const brLight = brDark === br.ink ? br.canvas : br.ink;
+  const presetGroundDark = (lum(pr.canvas) ?? 255) < (lum(pr.ink) ?? 0);
+  const brandGroundDark = (lum(br.canvas) ?? 255) < (lum(br.ink) ?? 0);
+  const invert = presetGroundDark !== brandGroundDark;
+  const mapDark = invert ? brLight : brDark; // preset's dark value → this brand value
+  const mapLight = invert ? brDark : brLight; // preset's light value → this brand value
+  const flipL = (l) => (invert ? 1 - l : l); // mirror tint/neutral lightness when flipping
+  const prAccentHsl = hexToHsl(pr.accent);
+  const prAccent2Hsl = hexToHsl(pr.accent2);
+  const newByKey = new Map();
+  for (const [key, val] of presetColors) {
+    const ph = hexToHsl(val);
+    let next;
+    if (val === prDark) next = mapDark;
+    else if (val === prLight) next = mapLight;
+    else if (STATUS_ROLE_KEY.test(key))
+      // semantic status colors (green/red …) — the HUE carries the meaning; never repaint.
+      // MUST precede the accent checks: a preset's red "negative" is often its 2nd-most-chromatic
+      // color and would otherwise be claimed as accent2 and recolored to the brand hue.
+      next = val;
+    else if (val === pr.accent)
+      next = br.accent; // primary accent → the EXACT brand color
+    else if (pr.accent2 !== pr.accent && val === pr.accent2)
+      next = br.accent2; // exact 2nd accent
+    else if (!ph) {
+      // rgba()/rgb() tint → repaint its rgb with the brand accent, keep alpha (a neutral
+      // overlay is kept). A non-color non-hex value (var(), named) falls through unchanged.
+      next = remapRgbaToAccent(val, br.accent, br.accent2, prAccentHsl, prAccent2Hsl) ?? val;
+    } else if (chroma(val) < 16) {
+      // NEUTRAL source (grey text-ladder, hairline borders) → keep it NEUTRAL. Apply at most a
+      // whisper of the brand hue (sat ≤ 0.06); never the accent's full saturation — that is what
+      // turned the grey ladder into saturated blue.
+      const bh = hexToHsl(br.accent);
+      next = bh ? hslToHex(bh.h, Math.min(ph.s, 0.06), flipL(ph.l)) : val;
+    } else {
+      // chromatic tint → repaint with the nearest brand accent's hue+sat, keep THIS color's
+      // lightness so tint families stay families.
+      const useSecond =
+        pr.accent !== pr.accent2 &&
+        prAccentHsl &&
+        prAccent2Hsl &&
+        hueDist(ph.h, prAccent2Hsl.h) < hueDist(ph.h, prAccentHsl.h);
+      const bh = hexToHsl(useSecond ? br.accent2 : br.accent);
+      next = bh ? hslToHex(bh.h, bh.s, flipL(ph.l)) : val;
+    }
+    if (next !== val) newByKey.set(key, next);
+  }
+  // rewrite only the value of each colors: line; everything else byte-identical.
+  let inBlock = false;
+  md = md
+    .split(/\r?\n/)
+    .map((line) => {
+      if (/^colors:\s*$/.test(line)) {
+        inBlock = true;
+        return line;
+      }
+      if (inBlock && /^\S/.test(line)) inBlock = false;
+      if (!inBlock) return line;
+      const m = line.match(
+        /^(\s+)([\w-]+):\s*(?:"[^"]*"|'[^']*'|#[0-9a-fA-F]{3,8}|rgba?\([^)]*\)|[^#\n]*?)(\s+#.*)?$/,
+      );
+      if (m && newByKey.has(m[2])) return `${m[1]}${m[2]}: "${newByKey.get(m[2])}"${m[3] ?? ""}`;
+      return line;
+    })
+    .join("\n");
+  summary.push(
+    `colors: ${invert ? "INVERTED (dark-mode brand on light preset) · " : ""}dark ${prDark}→${mapDark}, light ${prLight}→${mapLight}, accent ${pr.accent}→${br.accent}` +
+      ` (${newByKey.size}/${presetColors.length} keys repainted${brandColorStats.length ? ", via colorStats" : ""})`,
+  );
+} else {
+  summary.push(
+    brandColors.length
+      ? "colors: preset has no parseable colors — kept"
+      : "colors: no brand colors — preset palette kept",
+  );
+}
+
+// ── font remix ────────────────────────────────────────────────────────────────
+if (brandFonts.length) {
+  const pf = parseFonts(md);
+  const strip = (q) => (q ? q.replace(/^"|"$/g, "") : null);
+  const pDisplay = strip(pf.display);
+  const pBody = strip(pf.body);
+  const pMono = strip(pf.mono);
+  // A monospace brand face is for code / labels / chrome — never the reading display or body.
+  // Split the brand fonts: the primary NON-mono family carries display AND body (the common
+  // single-sans case, e.g. Inter for everything), and a captured mono (Berkeley Mono,
+  // JetBrains Mono…) is routed onto the preset's mono role instead of turning the body
+  // monospace. (Distinct display/body brands still resolve to a clean sans; hand-tune the
+  // display in frame.md if a separate display face is wanted.)
+  const isMonoFont = (n) =>
+    /(?:^|[\s_-])mono(?:[\s_-]|$)|monospace|consol|courier|menlo|monaco|jetbrains|berkeley|space\s*mono|ibm\s*plex\s*mono|sf\s*mono|roboto\s*mono|source\s*code|fira\s*code|geist\s*mono|dm\s*mono/i.test(
+      String(n),
+    );
+  const nonMono = brandFonts.filter((f) => !isMonoFont(f));
+  const monoFonts = brandFonts.filter(isMonoFont);
+  const bDisplay = nonMono[0] ?? brandFonts[0];
+  const bBody = nonMono[0] ?? brandFonts[0];
+  const bMono = monoFonts[0] ?? null;
+  const escRe = (s) => s.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+  // Replace the preset family as a WHOLE WORD/PHRASE everywhere — frontmatter values,
+  // component strings like "Space Grotesk 600", AND prose — case-sensitive with word
+  // boundaries so a single-word family ("Inter") can never corrupt a substring
+  // ("interactive"). Quote-exact replace alone missed names baked into longer strings + prose.
+  const swapFamily = (from, to) => {
+    if (from && to && from !== to) md = md.replace(new RegExp(`\\b${escRe(from)}\\b`, "g"), to);
+  };
+  swapFamily(pDisplay, bDisplay);
+  if (pBody !== pDisplay) swapFamily(pBody, bBody);
+  // route the brand mono onto the preset's mono role (only if the preset has a DISTINCT mono
+  // family — never collapse body/display into mono)
+  if (bMono && pMono && pMono !== pBody && pMono !== pDisplay) swapFamily(pMono, bMono);
+  summary.push(
+    `fonts: display ${pDisplay}→${bDisplay}, body ${pBody}→${bBody}` +
+      (bMono && pMono && pMono !== pBody && pMono !== pDisplay ? `, mono ${pMono}→${bMono}` : ""),
+  );
+} else {
+  summary.push("fonts: no brand fonts — preset fonts kept");
+}
+
+// ── stage preset-owned offline font faces ────────────────────────────────────
+// PR ingestion has no captured brand fonts. Presets that own a type system must
+// therefore carry their own licensed files instead of depending on a first-run
+// Google Fonts fetch or a renderer-only embedding path that Studio workers cannot see.
+const presetFontsDir = join(presetDir, presetName, "fonts");
+if (existsSync(presetFontsDir)) {
+  const fontSpecs = [
+    ["EB Garamond", "EBGaramond", 400],
+    ["EB Garamond", "EBGaramond", 700],
+    ["Inter", "Inter", 400],
+    ["Inter", "Inter", 700],
+    ["JetBrains Mono", "JetBrainsMono", 400],
+    ["JetBrains Mono", "JetBrainsMono", 700],
+  ];
+  const outDir = join(hyperframesDir, "assets/fonts");
+  const faces = [];
+  for (const [family, stem, weight] of fontSpecs) {
+    const file = `${stem}-${weight}.woff2`;
+    const source = join(presetFontsDir, file);
+    if (!existsSync(source)) die(`preset font is missing: ${source}`);
+    mkdirSync(outDir, { recursive: true });
+    copyFileSync(source, join(outDir, file));
+    faces.push(
+      `@font-face{font-family:"${family}";font-weight:${weight};font-style:normal;font-display:block;src:url("assets/fonts/${file}") format("woff2");}`,
+    );
+  }
+  md +=
+    `\n\n## Font loading (preset-owned, offline)\n\n` +
+    `These licensed faces are staged in \`assets/fonts/\`. Paste this block inside every frame template; do not link Google Fonts:\n\n` +
+    "```html\n<style>\n" +
+    faces.join("\n") +
+    "\n</style>\n```\n";
+  summary.push(`fonts: staged ${fontSpecs.length} preset face(s) for offline preview/render`);
+}
+
+// ── cap type weights to the brand font's available faces ──────────────────────
+// The remix swaps the font FAMILY but keeps the preset's weights; a brand font that ships
+// only e.g. 400/500 would faux-bold every 600/700 heading. Clamp each `typography:` weight
+// to the NEAREST weight the brand font actually provides (tokens.json fonts[].weights).
+if (brandFonts.length && brandFontWeights.length) {
+  const avail = brandFontWeights;
+  const nearest = (n) =>
+    avail.reduce((best, w) => {
+      const dw = Math.abs(w - n),
+        db = Math.abs(best - n);
+      return dw < db || (dw === db && w > best) ? w : best;
+    }, avail[0]);
+  let capped = 0;
+  const cap = (num) => {
+    const n = parseInt(num, 10);
+    if (avail.includes(n)) return String(n);
+    const c = nearest(n);
+    if (c !== n) capped++;
+    return String(c);
+  };
+  let inType = false;
+  md = md
+    .split(/\r?\n/)
+    .map((line) => {
+      if (/^typography:\s*$/.test(line)) {
+        inType = true;
+        return line;
+      }
+      if (inType && /^\S/.test(line)) inType = false;
+      let out = line;
+      // (a) structured `weight: NNN` in the typography ramp
+      if (inType) out = out.replace(/(\bweight:\s*)(\d{3})\b/g, (m, pfx, num) => pfx + cap(num));
+      // (b) a weight baked into a quoted `typography:` component value, e.g.
+      //     cta-button → typography: "Basier Square 600"  (NNN not followed by a unit like px)
+      out = out.replace(
+        /(typography:\s*"[^"]*?\b)(\d{3})\b(?![a-z%])/gi,
+        (m, pfx, num) => pfx + cap(num),
+      );
+      return out;
+    })
+    .join("\n");
+  if (capped)
+    summary.push(`fonts: capped ${capped} type weight(s) to brand faces {${avail.join(", ")}}`);
+}
+
+// ── brand-adaptation note ─────────────────────────────────────────────────────
+// The remix fixes the NORMATIVE frontmatter, but the preset's PROSE still carries its
+// original weight ranges / color-names. Prepend a short "frontmatter is truth" header so a
+// reader (or frame worker) interprets any lingering preset prose THROUGH the brand values —
+// instead of fragile per-sentence prose surgery.
+if (brandFonts.length || (brandColors.length && presetColors.length)) {
+  const bD = brandFonts[0];
+  const bB = brandFonts[1] ?? brandFonts[0];
+  const note =
+    `## Brand adaptation (READ FIRST — the frontmatter is the source of truth)\n\n` +
+    `This is the **${presetName}** preset remixed onto the captured brand. The YAML frontmatter above ` +
+    `(colors · typography · components) is **normative and already correct — use it verbatim.** The prose ` +
+    `below is the ORIGINAL preset's intent; read it THROUGH the frontmatter:\n\n` +
+    (brandFonts.length
+      ? `- **Fonts** — already set to **${bD}** (display) / **${bB}** (body); ignore any preset font name lingering in prose.\n`
+      : "") +
+    (brandFontWeights.length
+      ? `- **Weights** — the brand font ships \`{${brandFontWeights.join(", ")}}\` only; every weight is clamped to these — ignore higher preset weights (e.g. 600/700) in prose.\n`
+      : "") +
+    `- **Colors** — use the frontmatter hex; preset color NAMES in prose (e.g. "cobalt", "cream") mean the remapped brand values.\n`;
+  if (/^# .*$/m.test(md)) md = md.replace(/^# .*$/m, (m) => `${m}\n\n${note}`);
+  else md = `${note}\n${md}`;
+  summary.push("brand-adaptation note prepended");
+}
+
+// ── stage brand font files + emit @font-face ──────────────────────────────────
+// A brand font is rarely a Google font, so renaming the family in frame.md is not enough:
+// nothing loads the actual face. If the capture downloaded font files, copy them to
+// assets/fonts/ under CLEAN, weight-named names (so captions.mjs' family-prefix matcher
+// finds them too) and append a ready-to-paste, ROOT-RELATIVE @font-face block to frame.md.
+if (brandFonts.length) {
+  const norm = (s) =>
+    String(s)
+      .toLowerCase()
+      .replace(/[^a-z0-9]/g, "");
+  const extOf = (f) => (f.match(/\.(woff2|woff|ttf|otf)$/i)?.[1] ?? "").toLowerCase();
+  const FMT = { woff2: "woff2", woff: "woff", ttf: "truetype", otf: "opentype" };
+  const weightInfo = (name) => {
+    const s = name.toLowerCase();
+    if (/black|heavy|ultra|extrabold/.test(s)) return { n: 800, w: "ExtraBold" };
+    if (/semibold|demibold/.test(s)) return { n: 600, w: "SemiBold" };
+    if (/bold/.test(s)) return { n: 700, w: "Bold" };
+    if (/medium/.test(s)) return { n: 500, w: "Medium" };
+    if (/light|thin/.test(s)) return { n: 300, w: "Light" };
+    return { n: 400, w: "Regular" };
+  };
+  const fams = [...new Set(brandFonts)];
+  const srcDirs = [
+    join(hyperframesDir, "capture/assets/fonts"),
+    join(hyperframesDir, "assets/fonts"),
+  ].filter((d) => existsSync(d));
+  const files = [];
+  for (const d of srcDirs)
+    for (const f of readdirSync(d).sort()) if (extOf(f)) files.push({ d, f });
+  // Single family → all font files belong to it (the common captured case, hash-named files
+  // included). Multiple families → assign each file to the longest family key its name contains.
+  const ranked = [...fams].sort((a, b) => norm(b).length - norm(a).length);
+  const famOf = (f) =>
+    fams.length === 1 ? fams[0] : ranked.find((x) => norm(f).includes(norm(x)));
+  const outDir = join(hyperframesDir, "assets/fonts");
+  const faces = [];
+  const stagedNames = new Set();
+  for (const { d, f } of files) {
+    const fam = famOf(f);
+    if (!fam) continue;
+    const { n, w } = weightInfo(f);
+    const clean = `${fam.replace(/[^A-Za-z0-9]/g, "")}-${w}.${extOf(f)}`;
+    if (stagedNames.has(clean)) continue;
+    mkdirSync(outDir, { recursive: true });
+    if (!existsSync(join(outDir, clean))) copyFileSync(join(d, f), join(outDir, clean));
+    stagedNames.add(clean);
+    faces.push(
+      `@font-face{font-family:"${fam}";font-weight:${n};font-style:normal;font-display:block;src:url("assets/fonts/${clean}") format("${FMT[extOf(f)]}");}`,
+    );
+  }
+  if (faces.length) {
+    md +=
+      `\n\n## Font loading (auto-generated)\n\n` +
+      `The brand font ships as local files in \`assets/fonts/\` — do NOT link Google Fonts for it. ` +
+      `Paste this \`<style>\` into every frame's \`<head>\`/\`<template>\` (captions use the same files) ` +
+      `so \`font-family\` resolves in preview, snapshot, and render alike:\n\n` +
+      "```html\n<style>\n" +
+      faces.join("\n") +
+      "\n</style>\n```\n";
+    summary.push(
+      `fonts: staged ${stagedNames.size} face(s) → assets/fonts/ + @font-face in frame.md`,
+    );
+  }
+}
+
+// ── write frame.md ────────────────────────────────────────────────────────────
+const framePath = join(hyperframesDir, "frame.md");
+writeFileSync(framePath, md);
+
+// ── copy caption-skin.html ────────────────────────────────────────────────────
+const presetSkin = join(presetDir, presetName, "caption-skin.html");
+let skinCopied = false;
+if (existsSync(presetSkin)) {
+  const skinDir = join(hyperframesDir, ".hyperframes");
+  mkdirSync(skinDir, { recursive: true });
+  copyFileSync(presetSkin, join(skinDir, "caption-skin.html"));
+  skinCopied = true;
+}
+
+// ── self-validate ─────────────────────────────────────────────────────────────
+const outColors = parseColors(md);
+if (outColors.length !== presetColors.length) {
+  die(`color keys changed (${presetColors.length}→${outColors.length}) — keys must be preserved`);
+}
+const outRoles = semanticColors(outColors);
+const li = lum(outRoles.ink),
+  lc = lum(outRoles.canvas);
+// ink (type) and canvas (ground) must differ enough to READ — in EITHER direction. A
+// light-mode spec has ink darker than canvas; a dark-mode spec (the polarity flip above)
+// the reverse. Assert luminance SEPARATION, not a fixed polarity.
+if (li != null && lc != null && Math.abs(li - lc) < 40) {
+  die(
+    `ink (${outRoles.ink}, lum ${li.toFixed(0)}) and canvas (${outRoles.canvas}, lum ${lc.toFixed(0)}) lack contrast — bad brand mapping`,
+  );
+}
+
+console.log(`✓ build-frame: ${presetName} → ${framePath}`);
+for (const s of summary) console.log(`  ${s}`);
+console.log(
+  `  .hyperframes/caption-skin.html: ${skinCopied ? "copied" : "preset ships none — captions will use the default pill"}`,
+);
+console.log(`  self-check: keys preserved, ink/canvas contrast ok ✓`);
diff --git a/.claude/skills-media/pr-to-video/scripts/captions.mjs b/.claude/skills-media/pr-to-video/scripts/captions.mjs
new file mode 100644
index 000000000..1203b57c6
--- /dev/null
+++ b/.claude/skills-media/pr-to-video/scripts/captions.mjs
@@ -0,0 +1,499 @@
+#!/usr/bin/env node
+// captions.mjs — build the captions sub-composition from STORYBOARD + audio_meta.
+//
+// One mode: `build`. Reads STORYBOARD.md (frame order + durations → cumulative
+// frame starts) + audio_meta.json (voices[].words, frame-relative) → absolute-
+// timed caption groups → writes:
+//   compositions/captions.html  — a self-contained sub-composition the index
+//        assembler mounts on its captions track (data-composition-id="captions").
+//   caption_groups.json         — the computed groups (debug / inspection / --out).
+//   caption-overrides.json      — an empty `[]` shim (silences the captions runtime's
+//        validate-time fetch; only written when captions.html is).
+// No narration / no words → legal skip: nothing written, assemble-index then omits
+// the captions track (it keys off compositions/captions.html existence).
+//
+//   node captions.mjs build --storyboard ./STORYBOARD.md --audio-meta ./audio_meta.json --hyperframes . --out ./caption_groups.json
+//
+// CAPTION LOOK — two sources, picked automatically:
+//   1. PRESET SKIN (preferred). If a project-local `.hyperframes/caption-skin.html`
+//      exists (Step 2 copies the chosen frame-preset's skin into the project), it is
+//      the caption look.
+//      It is a brand-token-strict skin with three reserved holes; this script fills them
+//      and wraps the result in a <template> for the engine:
+//        - `var GROUPS = [];`            → the computed caption groups
+//        - `var DURATION = 0;` + data-duration="0" (and data-width/height="0") → real values
+//        - `<style data-brand-tokens></style>` → :root tokens derived from the project's
+//          frame.md (colors + fonts), mapped to a fixed semantic vocab every skin shares:
+//          --cap-ink / --cap-canvas / --cap-accent / --cap-accent-2 / --font-display /
+//          --font-body, plus --cap-band-top / --cap-band-height (the keep-out band).
+//      So the brand-token overlay from Step 2 flows into the captions automatically.
+//   2. DEFAULT (fallback). No skin file → the built-in Roboto/black pill (buildCaptionsHtml).
+//
+// Grouping mirrors the proven heuristics (frame boundary · sentence-end punct ·
+// silence gap · density-aware word cap); word timings come inline from audio_meta.
+
+import { existsSync, mkdirSync, readdirSync, readFileSync, writeFileSync } from "node:fs";
+import { dirname, join, resolve } from "node:path";
+import { fileURLToPath } from "node:url";
+import { parseStoryboard } from "./lib/storyboard.mjs";
+import { captionBand, parseFormat } from "./lib/dimensions.mjs";
+import { parseColors, parseFonts, semanticColors } from "./lib/tokens.mjs";
+
+const flag = (argv, name, def) => {
+  const i = argv.indexOf(`--${name}`);
+  return i >= 0 && i + 1 < argv.length ? argv[i + 1] : def;
+};
+const r3 = (x) => Number(x.toFixed(3));
+
+// ── grouping params ───────────────────────────────────────────────────────────
+const SILENCE_GAP = 0.18; // s of silence between words → split
+const TAIL_PAD = 0.12; // s the group lingers after its last word
+const SENT_END = /[.?!,;:—]$/;
+const DENSITY_WINDOW = 1.0; // s window for words/sec density
+function wordCap(density) {
+  return density > 3.5 ? 2 : density > 2.5 ? 3 : 4;
+}
+
+function runBuild(argv) {
+  const skip = (reason) => {
+    console.log(`captions: skipped (${reason})`);
+    process.exit(0);
+  };
+  const die = (m) => {
+    console.error(`✗ captions build: ${m}`);
+    process.exit(1);
+  };
+
+  const hyperframesDir = resolve(flag(argv, "hyperframes", "."));
+  const storyboardPath = resolve(flag(argv, "storyboard", join(hyperframesDir, "STORYBOARD.md")));
+  const audioMetaPath = resolve(flag(argv, "audio-meta", join(hyperframesDir, "audio_meta.json")));
+  const outPath = resolve(flag(argv, "out", join(hyperframesDir, "caption_groups.json")));
+  const htmlPath = join(hyperframesDir, "compositions/captions.html");
+  const overridesPath = join(hyperframesDir, "caption-overrides.json");
+  const skinArg = flag(argv, "skin", null);
+  const hiddenSkinPath = join(hyperframesDir, ".hyperframes", "caption-skin.html");
+  const legacySkinPath = join(hyperframesDir, "caption-skin.html");
+  const skinPath = resolve(
+    skinArg ?? (existsSync(hiddenSkinPath) ? hiddenSkinPath : legacySkinPath),
+  );
+  const framePath = resolve(flag(argv, "frame", join(hyperframesDir, "frame.md")));
+
+  if (!existsSync(storyboardPath)) die(`STORYBOARD.md not found at ${storyboardPath}`);
+  const manifest = parseStoryboard(readFileSync(storyboardPath, "utf8"));
+  const { width: W, height: H } = parseFormat(manifest.globals.format);
+
+  if (!existsSync(audioMetaPath)) skip("no audio_meta.json (silent film)");
+  const meta = JSON.parse(readFileSync(audioMetaPath, "utf8"));
+  if (!Array.isArray(meta.voices) || meta.voices.length === 0) skip("no narration");
+
+  // cumulative frame starts (by frame number) + total duration, from STORYBOARD.
+  const startByFrame = new Map();
+  let acc = 0;
+  for (const f of manifest.frames) {
+    if (f.number != null) startByFrame.set(f.number, acc);
+    acc += Number.isFinite(f.durationSeconds) ? f.durationSeconds : 0;
+  }
+  const total = r3(acc);
+
+  // absolute word stream: frame start + frame-relative word timing.
+  const words = [];
+  for (const v of meta.voices) {
+    const base = startByFrame.get(v.frame);
+    if (base == null || !Array.isArray(v.words)) continue;
+    for (const w of v.words) {
+      const text = String(w.text ?? "").trim();
+      if (!text || /^[.?!,;:—–-]+$/.test(text)) continue; // drop empties + bare punctuation
+      if (!isFinite(w.start) || !isFinite(w.end)) continue;
+      words.push({ text, start: r3(base + w.start), end: r3(base + w.end), frame: v.frame });
+    }
+  }
+  words.sort((a, b) => a.start - b.start);
+  if (words.length === 0) skip("no usable words");
+
+  // density at i = words whose start falls within [w.start, w.start + WINDOW).
+  const densityAt = (i) => {
+    const t0 = words[i].start;
+    let n = 0;
+    for (let j = i; j < words.length && words[j].start < t0 + DENSITY_WINDOW; j++) n++;
+    return n / DENSITY_WINDOW;
+  };
+
+  // group: split on frame change / silence gap / word cap; always flush after a
+  // sentence-ending word.
+  const groups = [];
+  let cur = null;
+  for (let i = 0; i < words.length; i++) {
+    const w = words[i];
+    const prev = cur && cur.words[cur.words.length - 1];
+    const crossFrame = cur && w.frame !== cur.frame;
+    const gap = prev && w.start - prev.end > SILENCE_GAP;
+    const full = cur && cur.words.length >= cur.cap;
+    if (!cur || crossFrame || gap || full) {
+      if (cur) groups.push(cur);
+      cur = { frame: w.frame, cap: wordCap(densityAt(i)), words: [] };
+    }
+    cur.words.push(w);
+    if (SENT_END.test(w.text)) {
+      groups.push(cur);
+      cur = null;
+    }
+  }
+  if (cur) groups.push(cur);
+
+  // finalize: ids, start/end (tail-padded, clamped < next group's start), text.
+  const finalized = groups.map((g, gi) => {
+    const first = g.words[0];
+    const last = g.words[g.words.length - 1];
+    const next = groups[gi + 1];
+    let end = r3(last.end + TAIL_PAD);
+    if (next && next.words[0].start < end) end = r3(next.words[0].start);
+    return {
+      id: `caption-group-${gi}`,
+      frame: g.frame,
+      start: r3(first.start),
+      end,
+      text: g.words.map((w) => w.text).join(" "),
+      words: g.words.map((w, wi) => ({
+        id: `caption-word-${gi}-${wi}`,
+        text: w.text,
+        start: r3(w.start),
+        end: r3(w.end),
+      })),
+    };
+  });
+
+  // ── write caption_groups.json ──
+  mkdirSync(dirname(outPath), { recursive: true });
+  writeFileSync(
+    outPath,
+    JSON.stringify({ total_duration_s: total, width: W, height: H, groups: finalized }, null, 2),
+  );
+
+  // ── write compositions/captions.html (preset skin if present, else default) ──
+  mkdirSync(dirname(htmlPath), { recursive: true });
+  let source;
+  if (existsSync(skinPath)) {
+    const tokens = frameTokensCss(framePath, H);
+    const faces = brandFontFaces(framePath, hyperframesDir);
+    const fonts = existsSync(framePath) ? parseFonts(readFileSync(framePath, "utf8")) : {};
+    writeFileSync(
+      htmlPath,
+      buildFromSkin(
+        readFileSync(skinPath, "utf8"),
+        finalized,
+        total,
+        W,
+        H,
+        tokens,
+        die,
+        faces,
+        fonts,
+      ),
+    );
+    source = `preset skin (${skinPath.replace(hyperframesDir + "/", "")})`;
+  } else {
+    writeFileSync(htmlPath, buildCaptionsHtml(finalized, total, W, H));
+    source = "default (built-in pill)";
+  }
+
+  // ── write caption-overrides.json shim ──
+  // Atomic create-if-absent: `wx` throws if the file already exists (which we
+  // ignore) — no existsSync→writeFileSync TOCTOU gap.
+  try {
+    writeFileSync(overridesPath, "[]\n", { flag: "wx" });
+  } catch {
+    /* overrides shim already present */
+  }
+
+  console.log(
+    `✓ captions build: ${finalized.length} group(s) from ${words.length} words → compositions/captions.html (total ${total}s) · skin: ${source}`,
+  );
+}
+
+// ── preset-skin path ────────────────────────────────────────────────────────
+// Fill the skin's three reserved holes + the root's 0-placeholders, then wrap the
+// fragment in a <template> (the engine clones template contents only). One generic
+// fill works for every preset's skin — no per-skin transform.
+//
+// Every preset's skin is authored against ITS OWN fonts/metrics (broadside→Barlow @
+// line-height 1.02, capsule→Bodoni, …). When the project's brand font differs (it
+// almost always does), three things must be reconciled so ANY skin renders correctly
+// for ANY brand — done here generically, not per-project:
+//   · @font-face for the brand fonts (else the renderer can't supply them → fallback)
+//   · the skin's preset-font FALLBACK literals (var(--font-x, "Barlow")) repointed to
+//     the brand family, so no undeclared font name trips font_family_without_font_face
+//   · a metric safety net: a heavier brand font overflows a tight preset line-height,
+//     so the active-word highlight clips — a line-height floor + word padding fixes it
+//   · data-composition-id + dimensions on the <template> root (skins lead with
+//     <script>/<style>, so the root element must carry the id, not the first child)
+function buildFromSkin(skin, groups, total, W, H, tokens, die, faces = "", fonts = {}) {
+  const fillOnce = (src, re, repl, label) => {
+    const n = (src.match(re) || []).length;
+    if (n !== 1) die(`caption-skin.html: expected exactly one ${label}, found ${n}`);
+    return src.replace(re, () => repl);
+  };
+  let out = skin;
+  // Strip HTML doc-comments first. A skin's authoring comment can contain tag-like text
+  // (broadside's literally says "<template>"), which the linter's tag scanner then picks
+  // up as the root element → false root_missing_composition_id / root_missing_dimensions.
+  // The comments are preview/authoring docs, not needed in the generated composition.
+  // Strip in a fixpoint loop, not a single global pass: removing one comment can
+  // re-form a marker from a nested/partial pair (e.g. <!--<!---->-->), which one
+  // pass misses — CodeQL flags the single replace as incomplete sanitization.
+  for (let prev = ""; prev !== out; ) {
+    prev = out;
+    out = out.replace(/<!--[\s\S]*?-->/g, "");
+  }
+  // brand :root tokens + @font-face for the brand fonts, both into the reserved hole
+  out = fillOnce(
+    out,
+    /<style data-brand-tokens>\s*<\/style>/,
+    `<style data-brand-tokens>\n${faces ? faces + "\n" : ""}${tokens}\n    </style>`,
+    "<style data-brand-tokens></style> hole",
+  );
+  // Resolve the skin's font-family var()s to the brand family LITERAL. Two reasons:
+  //  (1) the linter's used-font scanner naively comma-splits, so var(--x, "Brand") yields
+  //      junk tokens ('var(--x', 'brand")') that never match the @font-face → a false
+  //      font_family_without_font_face; a plain "Brand" literal matches the @font-face.
+  //  (2) it drops the preset's own fallback name (Barlow / IBM Plex Mono / …), which has
+  //      no @font-face in this project. The :root token stays for any other consumer.
+  if (fonts.display)
+    out = out.replace(/var\(\s*--font-display\s*(?:,\s*"[^"]*"\s*)?\)/g, fonts.display);
+  if (fonts.body) out = out.replace(/var\(\s*--font-body\s*(?:,\s*"[^"]*"\s*)?\)/g, fonts.body);
+  out = fillOnce(
+    out,
+    /var GROUPS = \[\];/,
+    `var GROUPS = ${JSON.stringify(groups)};`,
+    "`var GROUPS = [];` hole",
+  );
+  out = fillOnce(out, /var DURATION = 0;/, `var DURATION = ${total};`, "`var DURATION = 0;` hole");
+  out = fillOnce(out, /data-duration="0"/, `data-duration="${total}"`, '`data-duration="0"` hole');
+  out = fillOnce(out, /data-width="0"/, `data-width="${W}"`, '`data-width="0"` hole');
+  out = fillOnce(out, /data-height="0"/, `data-height="${H}"`, '`data-height="0"` hole');
+  // font-robust safety net — appended last so it wins the cascade over the skin's own
+  // (preset-font-tuned) line-height. Kept SNUG (1.1) so the plate hugs the text. NO extra
+  // word/pill padding: inspect's `text_box_overflow` on the highlight words is a cosmetic
+  // false-positive here (heavy-glyph ink slightly exceeds the line box, but there's no
+  // overflow:hidden — nothing is clipped); zeroing it would need an airy line-height that
+  // balloons the pill, which is worse. Override only if a brand font genuinely clips.
+  out += "\n<style>\n  .caption-line { line-height: 1.1 !important; }\n</style>";
+  return `<template id="captions-template" data-composition-id="captions" data-width="${W}" data-height="${H}">\n${out.trim()}\n</template>\n`;
+}
+
+export { buildFromSkin };
+
+// @font-face for the brand display/body fonts, matched from the project's font dirs
+// (staged assets/fonts first, else capture/assets/fonts) by family-name prefix, with
+// weight parsed from the filename. Paths are relative to compositions/captions.html.
+// Returns "" when frame.md or font files are absent (then the skin's fallback applies).
+function brandFontFaces(framePath, hyperframesDir) {
+  if (!existsSync(framePath)) return "";
+  const { display, body } = parseFonts(readFileSync(framePath, "utf8"));
+  const families = [
+    ...new Set([display, body].filter(Boolean).map((f) => f.replace(/^"|"$/g, ""))),
+  ];
+  if (!families.length) return "";
+  const dirs = [
+    // ROOT-RELATIVE — compositions are served with the project root as their base URL, so a
+    // "../" prefix escapes the root (lint: invalid_parent_traversal_in_asset_path) and 404s in
+    // Studio/preview. Mirror what the frame workers use for images.
+    { abs: join(hyperframesDir, "assets/fonts"), rel: "assets/fonts" },
+    { abs: join(hyperframesDir, "capture/assets/fonts"), rel: "capture/assets/fonts" },
+  ].filter((d) => existsSync(d.abs));
+  const weightOf = (n) => {
+    const s = n.toLowerCase();
+    if (/black|heavy|ultra|extrabold/.test(s)) return 800;
+    if (/semibold|demibold/.test(s)) return 600; // before /bold/ — "demibold" contains "bold"
+    if (/bold/.test(s)) return 700;
+    if (/medium/.test(s)) return 500;
+    if (/light|thin/.test(s)) return 300;
+    return 400; // book / regular / roman
+  };
+  const fmtOf = (f) =>
+    /\.woff2$/i.test(f)
+      ? "woff2"
+      : /\.woff$/i.test(f)
+        ? "woff"
+        : /\.ttf$/i.test(f)
+          ? "truetype"
+          : "opentype";
+  // Normalize away ALL non-alphanumerics (spaces, underscores, hyphens) on BOTH the
+  // family name and the filename. Real font files use "_" / "-" as word separators
+  // ("TT_Norms_Pro_Bold.woff2"), so stripping only whitespace never matched them — the
+  // family key "ttnormspro" failed `startsWith` against "tt_norms_pro_bold", and the
+  // function silently returned "" → captions shipped with NO @font-face for any
+  // underscore/hyphen-named brand font (e.g. TT Norms Pro), which is exactly the
+  // font_family_without_font_face bug.
+  const norm = (s) => s.toLowerCase().replace(/[^a-z0-9]/g, "");
+  const faces = [];
+  const seen = new Set();
+  const claimed = new Set(); // each file is claimed by the MOST SPECIFIC family only
+  // Match the longest family key first so "TT Norms Pro" can't swallow the files that
+  // belong to "TT Norms Pro Mono" (its key is a prefix of the longer one's).
+  const ranked = [...families].sort((a, b) => norm(b).length - norm(a).length);
+  for (const fam of ranked) {
+    const key = norm(fam);
+    for (const d of dirs) {
+      let files = [];
+      try {
+        files = readdirSync(d.abs);
+      } catch {
+        continue;
+      }
+      for (const f of files.sort()) {
+        if (!/\.(woff2|woff|ttf|otf)$/i.test(f)) continue;
+        if (claimed.has(f)) continue; // a more specific family already took this file
+        if (!norm(f.replace(/\.(woff2|woff|ttf|otf)$/i, "")).startsWith(key)) continue;
+        const w = weightOf(f);
+        const dedup = `${fam}-${w}`;
+        if (seen.has(dedup)) continue; // one src per weight; assets/fonts wins over capture
+        seen.add(dedup);
+        claimed.add(f);
+        faces.push(
+          `      @font-face { font-family: '${fam}'; src: url('${d.rel}/${f}') format('${fmtOf(f)}'); font-weight: ${w}; font-display: block; }`,
+        );
+      }
+    }
+  }
+  // Loud signal instead of a silent "". If frame.md named a brand font but no file
+  // matched, the caption text WILL fall back to a generic font in the render — surface
+  // the cause here (at build time) rather than letting it surface 2 steps later as a
+  // font_family_without_font_face lint error disconnected from its root cause.
+  if (!faces.length) {
+    const where = dirs.length
+      ? dirs.map((d) => d.rel).join(" / ")
+      : "assets/fonts or capture/assets/fonts (neither exists)";
+    console.warn(
+      `  ⚠ captions: frame.md names font ${families.map((f) => `"${f}"`).join(", ")} ` +
+        `but no matching .woff2/.woff/.ttf/.otf was found in ${where} — captions will fall back ` +
+        `(text may render in the wrong font). Stage a font file whose name starts with the family ` +
+        `(e.g. "TT Norms Pro" → TT_Norms_Pro_Bold.woff2) so it ships with the project.`,
+    );
+  }
+  return faces.join("\n");
+}
+
+// frame.md colors:/typography: → a :root token block, mapped to the fixed semantic
+// vocab every preset skin references. Robust to per-preset key names: colors are
+// matched by name, then by luminance. Brand-token overlay (Step 2) flows through
+// because the values come from the project's frame.md. No frame.md → band vars only.
+function frameTokensCss(framePath, H) {
+  const band = captionBand(H);
+  const out = [];
+  if (existsSync(framePath)) {
+    const md = readFileSync(framePath, "utf8");
+    const colors = parseColors(md);
+    for (const [k, v] of colors) out.push(`      --${k}: ${v};`); // raw, for completeness
+    const sem = semanticColors(colors);
+    if (sem.ink) out.push(`      --cap-ink: ${sem.ink};`);
+    if (sem.canvas) out.push(`      --cap-canvas: ${sem.canvas};`);
+    if (sem.accent) out.push(`      --cap-accent: ${sem.accent};`);
+    if (sem.accent2) out.push(`      --cap-accent-2: ${sem.accent2};`);
+    const { display, body } = parseFonts(md);
+    if (display) out.push(`      --font-display: ${display}, system-ui, serif;`);
+    if (body) out.push(`      --font-body: ${body}, system-ui, sans-serif;`);
+  }
+  out.push(`      --cap-band-top: ${band.bandTopY}px;`);
+  out.push(`      --cap-band-height: ${band.bandHeight}px;`);
+  return `      :root {\n${out.join("\n")}\n      }`;
+}
+
+// ── default path (no preset skin) ─────────────────────────────────────────────
+// Self-contained captions sub-composition. The <template> holds the band container
+// + style AND the <script> (the HyperFrames loader only executes scripts INSIDE the
+// cloned template — a sibling <script> after </template> never runs, so the timeline
+// never registers and captions render blank). The script builds per-word spans and a
+// paused, seek-safe GSAP timeline (opacity for group show/hide, a quick color tween
+// per word for the karaoke highlight — no className flips, no JS state) and ends each
+// group with a hard tl.set kill so an exit can't get stuck. gsap is loaded via CDN
+// inside the template (matching the frame compositions). Band = captionBand(H).
+function buildCaptionsHtml(groups, total, W, H) {
+  const band = captionBand(H);
+  const fs = Math.round(H * 0.038);
+  const pad = Math.round(fs * 0.4);
+  return `<template id="captions-template">
+  <div
+    data-composition-id="captions"
+    data-width="${W}"
+    data-height="${H}"
+    data-duration="${total}"
+    id="captions-root"
+  >
+    <div id="cap"></div>
+  </div>
+  <style>
+    #captions-root {
+      position: absolute;
+      inset: 0;
+      pointer-events: none;
+    }
+#cap {
+      position: absolute;
+      left: 0;
+      right: 0;
+      top: ${band.bandTopY}px;
+      height: ${band.bandHeight}px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+.caption-group {
+      position: absolute;
+      max-width: 80%;
+      padding: ${pad}px ${Math.round(pad * 1.8)}px;
+      background: rgba(0, 0, 0, 0.72);
+      border-radius: ${Math.round(fs * 0.3)}px;
+      font-family: Roboto, sans-serif;
+      font-weight: 700;
+      font-size: ${fs}px;
+      line-height: 1.25;
+      text-align: center;
+      color: #fff;
+      opacity: 0;
+    }
+.caption-word {
+      color: rgba(255, 255, 255, 0.55);
+    }
+  </style>
+  <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js" integrity="sha384-sG0Hv1tP1lZCk9KQmrIbY/XNwi+OY84GQqhMscbnsoBFqAz8KNCil1kvfL3Hbbk2" crossorigin="anonymous"></script>
+  <script>
+    (function () {
+      var GROUPS = ${JSON.stringify(groups)};
+      var cap = document.getElementById("cap");
+      var tl = gsap.timeline({ paused: true });
+      GROUPS.forEach(function (g) {
+        var el = document.createElement("div");
+        el.className = "caption-group";
+        g.words.forEach(function (w) {
+          var s = document.createElement("span");
+          s.className = "caption-word";
+          s.textContent = w.text + " ";
+          el.appendChild(s);
+        });
+        cap.appendChild(el);
+        tl.fromTo(el, { opacity: 0 }, { opacity: 1, duration: 0.18, overwrite: "auto" }, g.start);
+        tl.to(el, { opacity: 0, duration: 0.12, overwrite: "auto" }, g.end);
+        tl.set(el, { opacity: 0, visibility: "hidden" }, g.end + 0.12); // deterministic hard kill
+        g.words.forEach(function (w, i) {
+          tl.to(el.children[i], { color: "#ffffff", duration: 0.06 }, w.start);
+        });
+      });
+      tl.to({}, { duration: ${total} }, 0); // full-span anchor
+      window.__timelines = window.__timelines || {};
+      window.__timelines["captions"] = tl;
+    })();
+  </script>
+</template>
+`;
+}
+
+if (process.argv[1] && resolve(process.argv[1]) === fileURLToPath(import.meta.url)) {
+  const sub = process.argv[2];
+  if (sub === "build" || sub === undefined) runBuild(process.argv.slice(sub === "build" ? 3 : 2));
+  else {
+    console.error(
+      "usage: node captions.mjs build [--storyboard …] [--audio-meta …] [--hyperframes .]",
+    );
+    process.exit(2);
+  }
+}
diff --git a/.claude/skills-media/pr-to-video/scripts/captions.test.mjs b/.claude/skills-media/pr-to-video/scripts/captions.test.mjs
new file mode 100644
index 000000000..f2724ea42
--- /dev/null
+++ b/.claude/skills-media/pr-to-video/scripts/captions.test.mjs
@@ -0,0 +1,50 @@
+import assert from "node:assert/strict";
+import { readdirSync, readFileSync } from "node:fs";
+import test from "node:test";
+import { fileURLToPath } from "node:url";
+import { buildFromSkin } from "./captions.mjs";
+
+const presetsDir = fileURLToPath(
+  new URL("../../hyperframes-creative/frame-presets/", import.meta.url),
+);
+const skins = readdirSync(presetsDir, { withFileTypes: true })
+  .filter((entry) => entry.isDirectory())
+  .map((entry) => ({
+    name: entry.name,
+    source: readFileSync(
+      new URL(
+        `../../hyperframes-creative/frame-presets/${entry.name}/caption-skin.html`,
+        import.meta.url,
+      ),
+      "utf8",
+    ),
+  }))
+  .filter(({ source }) => source.includes(".caption-word.is-active"));
+
+for (const canvas of ["#f7f3e8", "#111827"]) {
+  for (const skin of skins) {
+    test(`${skin.name} preserves word-state rules on ${canvas}`, () => {
+      const active = skin.source.match(/\.caption-word\.is-active\s*\{[^}]*\}/s)?.[0];
+      const spoken = skin.source.match(/\.caption-word\.is-spoken\s*\{[^}]*\}/s)?.[0];
+      assert.ok(active, "skin must define an active-word rule");
+      assert.ok(spoken, "skin must define a spoken-word rule");
+
+      const output = buildFromSkin(
+        skin.source,
+        [],
+        1,
+        1920,
+        1080,
+        `:root { --cap-canvas: ${canvas}; --cap-ink: #111111; --cap-accent: #ffcc00; }`,
+        (message) => {
+          throw new Error(message);
+        },
+      );
+
+      assert.ok(output.includes(active));
+      assert.ok(output.includes(spoken));
+      assert.equal(output.match(/\.caption-word\.is-active\s*\{/g)?.length, 1);
+      assert.equal(output.match(/\.caption-word\.is-spoken\s*\{/g)?.length, 1);
+    });
+  }
+}
diff --git a/.claude/skills-media/pr-to-video/scripts/fetch-people-avatars.mjs b/.claude/skills-media/pr-to-video/scripts/fetch-people-avatars.mjs
new file mode 100644
index 000000000..f76be3fdc
--- /dev/null
+++ b/.claude/skills-media/pr-to-video/scripts/fetch-people-avatars.mjs
@@ -0,0 +1,157 @@
+#!/usr/bin/env node
+// Step 1 — contributor avatar fetch (NETWORK; orchestrator-invoked).
+//
+// The counterpart to ingest.mjs: ingest is a pure offline transform, THIS is the
+// one network step on the people front. It reads the people list ingest produced
+// and downloads each contributor's GitHub avatar into assets/<login>.png,
+// then rewrites people.json with `avatarFetched` flags so downstream (story-design)
+// knows which avatars actually exist.
+//
+// Avatars + a credits/shipped-by scene are the ONE place the faceless default is
+// relaxed. They are an OPTIONAL enhancement, so this script is best-effort:
+//   - a missing/deleted user, a network blip, an offline run → log + skip
+//   - it ALWAYS exits 0 (a failed avatar must never block the build)
+//
+// Network is constrained on purpose: only https GitHub avatar hosts are fetched
+// (SSRF guard), and bytes are only ever written under the project dir (no path
+// traversal), so a tampered people.json can't redirect the fetch or the write.
+//
+// Reads:
+//   --people <path>      capture/extracted/people.json (from ingest.mjs)
+// Writes:
+//   assets/<login>.png    one per contributor whose avatar resolved
+//   (rewrites people.json in place with avatarFetched: true/false)
+//
+// Flags: --project-dir .  --timeout 8000 (ms per request)
+//   Avatars are written to <project-dir>/<person.avatarFile>, where avatarFile is
+//   the project-root-relative "assets/<login>.png" — the SAME assets/ dir the frame
+//   workers reference and assemble-index stages (lib/assets.mjs). Anchor on the
+//   project root so the path stays under the project's assets/.
+//
+// Usage (orchestrator already cd'd into PROJECT_DIR, so --project-dir defaults to "."):
+//   node fetch-people-avatars.mjs --people ./capture/extracted/people.json
+
+import { existsSync, mkdirSync, readFileSync, writeFileSync, statSync } from "node:fs";
+import { resolve, join, dirname, sep } from "node:path";
+
+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 peoplePath = resolve(flag("people", "./capture/extracted/people.json"));
+const projectDir = resolve(flag("project-dir", "."));
+const TIMEOUT = parseInt(flag("timeout", "8000"), 10);
+
+// SSRF guard: avatars only ever come from GitHub's avatar hosts, so refuse any
+// other URL rather than fetching whatever string people.json happens to carry.
+// `github.com/<login>.png` 302s to avatars.githubusercontent.com (redirect stays
+// on-host, controlled by GitHub).
+const AVATAR_HOSTS = new Set(["avatars.githubusercontent.com", "github.com", "www.github.com"]);
+function isAllowedAvatarUrl(u) {
+  let parsed;
+  try {
+    parsed = new URL(u);
+  } catch {
+    return false;
+  }
+  if (parsed.protocol !== "https:") return false;
+  const host = parsed.hostname.toLowerCase();
+  return AVATAR_HOSTS.has(host) || host.endsWith(".githubusercontent.com");
+}
+
+// Path guard: the written file must stay inside the project dir, so a crafted
+// avatarFile ("../../etc/…") can't escape via join().
+function isUnderProject(p) {
+  const r = resolve(p);
+  return r === projectDir || r.startsWith(projectDir + sep);
+}
+
+// Soft-exit helper — avatars are optional, so every early-out is exit 0.
+function softExit(msg) {
+  console.log(`• fetch-avatars: ${msg}`);
+  process.exit(0);
+}
+
+if (!existsSync(peoplePath)) softExit(`no people.json at ${peoplePath} — skipping (no avatars)`);
+
+let doc;
+try {
+  doc = JSON.parse(readFileSync(peoplePath, "utf8"));
+} catch (e) {
+  softExit(`people.json unreadable (${e.message}) — skipping`);
+}
+
+const people = Array.isArray(doc.people) ? doc.people : [];
+if (!people.length) softExit("no contributors in people.json — skipping");
+
+async function fetchOne(person) {
+  const { login, avatarUrl } = person;
+  if (!login || !avatarUrl) return "skip";
+  if (!isAllowedAvatarUrl(avatarUrl)) {
+    person.avatarFetched = false;
+    console.log(`  (skip avatar @${login}: not a GitHub avatar URL)`);
+    return "fail";
+  }
+  // avatarFile is project-root-relative ("assets/<login>.png"); anchor on the
+  // project root so it stays under the project's assets/ dir.
+  const dest = join(projectDir, person.avatarFile || `assets/${login}.png`);
+  if (!isUnderProject(dest)) {
+    person.avatarFetched = false;
+    console.log(`  (skip avatar @${login}: avatar path escapes the project dir)`);
+    return "fail";
+  }
+  mkdirSync(dirname(dest), { recursive: true });
+  // Idempotent: a non-empty file from a prior run is reused (re-runs are free).
+  if (existsSync(dest) && statSync(dest).size > 0) {
+    person.avatarFetched = true;
+    return "cached";
+  }
+  const ctrl = new AbortController();
+  const timer = setTimeout(() => ctrl.abort(), TIMEOUT);
+  try {
+    const res = await fetch(avatarUrl, {
+      signal: ctrl.signal,
+      redirect: "follow", // github.com/<login>.png redirects to avatars.githubusercontent.com
+      headers: { "User-Agent": "hyperframes-pr-to-video" },
+    });
+    if (!res.ok) throw new Error(`HTTP ${res.status}`);
+    const buf = Buffer.from(await res.arrayBuffer());
+    if (!buf.length) throw new Error("empty body");
+    writeFileSync(dest, buf);
+    person.avatarFetched = true;
+    return "ok";
+  } catch (e) {
+    person.avatarFetched = false;
+    console.log(`  (skip avatar @${login}: ${e.message})`);
+    return "fail";
+  } finally {
+    clearTimeout(timer);
+  }
+}
+
+let ok = 0;
+let cached = 0;
+let fail = 0;
+// Sequential keeps it simple and gentle on github.com; the list is tiny (a PR's
+// contributors), so latency is not a concern.
+for (const person of people) {
+  const r = await fetchOne(person);
+  if (r === "ok") ok++;
+  else if (r === "cached") cached++;
+  else if (r === "fail") fail++;
+}
+
+// Persist avatarFetched flags so story-design can reference only real avatars.
+try {
+  writeFileSync(peoplePath, JSON.stringify(doc, null, 2) + "\n");
+} catch (e) {
+  console.log(`  (warn: could not rewrite people.json flags: ${e.message})`);
+}
+
+console.log(
+  `✓ fetch-avatars: ${ok + cached}/${people.length} avatar(s) in assets/` +
+    ` (${ok} new, ${cached} cached, ${fail} failed)`,
+);
+process.exit(0);
diff --git a/.claude/skills-media/pr-to-video/scripts/fetch-pr.mjs b/.claude/skills-media/pr-to-video/scripts/fetch-pr.mjs
new file mode 100644
index 000000000..0a3972333
--- /dev/null
+++ b/.claude/skills-media/pr-to-video/scripts/fetch-pr.mjs
@@ -0,0 +1,234 @@
+#!/usr/bin/env node
+// Step 1 — PR fetch (deterministic; runs gh; large-PR-safe; NO scratch dir).
+//
+// Replaces a bare `gh pr view … > capture/pr.json` in the orchestrator. It folds
+// the PR into the two artifacts ingest.mjs consumes:
+//   capture/pr.json    the gh pr view core (title, body, author, refs, commits,
+//                      reviews, comments, assignees, +/− stats, …) with its `files`
+//                      list COMPLETED via a paginated `gh api .../pulls/N/files`
+//                      call — `gh pr view --json files` truncates at ~100 files, so a
+//                      big PR would otherwise lose the tail. Commits keep gh pr view's
+//                      rich `authors[]` (co-authors) — only `files` needs the override.
+//                      For MERGED PRs it also stamps a best-effort `shipped_version`
+//                      (+ `version_source`) so the end card / cta doesn't invent one.
+//   capture/diff.patch the full unified diff (`gh pr diff`).
+//
+// gh runs HERE so auth / not-found / private-repo errors surface with gh's own stderr
+// and exit 1 (the orchestrator then stops). Intermediates are held in memory — this
+// writes ONLY the two files above, so there is no `_ingest_tmp/` scratch to clean up
+// (the previous "let the agent fetch in pieces" approach polluted videos/ and was
+// non-deterministic). ingest.mjs stays a pure offline transform downstream.
+//
+// Usage:
+//   node fetch-pr.mjs --pr "<url | owner/repo#N | N>" [--out-dir ./capture]
+//
+// Exit 0 = capture/pr.json + capture/diff.patch written + summary on stdout.
+// Exit 1 = gh not authenticated / PR not found / pr view failed.
+
+import { execFileSync } from "node:child_process";
+import { mkdirSync, writeFileSync } from "node:fs";
+import { join, resolve } from "node:path";
+
+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(`✗ fetch-pr.mjs: ${msg}`);
+  process.exit(1);
+}
+
+const prRef = flag("pr", null);
+if (!prRef) die('--pr "<url | owner/repo#N | N>" is required');
+const outDir = resolve(flag("out-dir", "./capture"));
+
+// Run gh, capture stdout. Returns { ok, stdout, stderr } — never throws (callers
+// decide whether a failure is fatal). 64 MB buffer covers large diffs / file lists.
+function ghTry(args) {
+  try {
+    const stdout = execFileSync("gh", args, { encoding: "utf8", maxBuffer: 64 * 1024 * 1024 });
+    return { ok: true, stdout, stderr: "" };
+  } catch (e) {
+    return {
+      ok: false,
+      stdout: (e.stdout || "").toString(),
+      stderr: (e.stderr || e.message || "").toString().trim(),
+    };
+  }
+}
+
+// ── 0. auth — fail fast with gh's own hint ───────────────────────────────────
+if (!ghTry(["auth", "status"]).ok) {
+  die("gh is not authenticated — run: gh auth login");
+}
+
+// ── 1. core PR object (gh pr view) ───────────────────────────────────────────
+const FIELDS = [
+  "number",
+  "title",
+  "body",
+  "author",
+  "url",
+  "baseRefName",
+  "headRefName",
+  "commits",
+  "files",
+  "additions",
+  "deletions",
+  "changedFiles",
+  "labels",
+  "reviews",
+  "latestReviews",
+  "comments",
+  "assignees",
+  "reviewDecision",
+  "mergedBy",
+  "state",
+  "mergedAt",
+].join(",");
+
+const view = ghTry(["pr", "view", prRef, "--json", FIELDS]);
+if (!view.ok) die(`gh pr view "${prRef}" failed (auth / not found / private?):\n${view.stderr}`);
+
+let pr;
+try {
+  pr = JSON.parse(view.stdout);
+} catch (e) {
+  die(`gh pr view returned unparseable JSON (${e.message})`);
+}
+
+// ── 2. complete the files list via paginated gh api (the truncation fix) ──────
+// gh pr view --json files caps at ~100 files; the REST endpoint paginates with no
+// cap. --jq runs per page, so the output is NDJSON (one file object per line).
+const number = pr.number;
+const m = /github\.com\/([^/]+)\/([^/]+)\/pull\/\d+/.exec(pr.url || "");
+const owner = m?.[1];
+const repo = m?.[2];
+let filesNote = `${Array.isArray(pr.files) ? pr.files.length : 0} (from pr view)`;
+if (owner && repo && number != null) {
+  const apiFiles = ghTry([
+    "api",
+    "--paginate",
+    `repos/${owner}/${repo}/pulls/${number}/files`,
+    "--jq",
+    ".[] | {path: .filename, additions, deletions, status}",
+  ]);
+  if (apiFiles.ok) {
+    const files = apiFiles.stdout
+      .split("\n")
+      .filter(Boolean)
+      .map((l) => {
+        try {
+          return JSON.parse(l);
+        } catch {
+          return null;
+        }
+      })
+      .filter(Boolean);
+    if (files.length) {
+      pr.files = files;
+      if (pr.changedFiles == null || files.length > pr.changedFiles) pr.changedFiles = files.length;
+      filesNote = `${files.length} (completed via gh api)`;
+    }
+  } else {
+    console.error(
+      `  (warn: gh api files failed — keeping pr view's files: ${apiFiles.stderr.split("\n")[0]})`,
+    );
+  }
+} else {
+  console.error("  (warn: could not parse owner/repo from PR url — keeping pr view's files)");
+}
+
+// ── 2.5 best-effort shipping version (MERGED PRs only) ───────────────────────
+// The end card / cta ("upgrade to vN", "what's new in vN") wants a real version;
+// a PR carries none, so the agent would otherwise guess. We resolve one here and
+// stamp it onto pr.json as `shipped_version` (+ a `version_source` note that keeps
+// it honest). `git tag --contains` isn't available on a remote-only fetch, so we
+// use gh api proxies: the first release published at/after the merge is the first
+// tag that can contain the merge commit; failing that, the default branch's
+// package manifest version (unreleased); else null. Always best-effort — a lookup
+// failure just leaves the fields null (the skill then falls back to the repo URL).
+pr.shipped_version = null;
+pr.version_source = null;
+if (pr.state === "MERGED") {
+  const mergedAt = pr.mergedAt ? Date.parse(pr.mergedAt) : NaN;
+
+  // (a) earliest non-draft release published on/after the merge.
+  if (owner && repo && !Number.isNaN(mergedAt)) {
+    const rel = ghTry([
+      "api",
+      "--paginate",
+      `repos/${owner}/${repo}/releases`,
+      "--jq",
+      ".[] | select(.draft == false) | {tag: .tag_name, published: .published_at}",
+    ]);
+    if (rel.ok) {
+      let best = null;
+      for (const line of rel.stdout.split("\n").filter(Boolean)) {
+        let r;
+        try {
+          r = JSON.parse(line);
+        } catch {
+          continue;
+        }
+        if (!r?.tag || !r?.published) continue;
+        const t = Date.parse(r.published);
+        if (Number.isNaN(t) || t < mergedAt) continue;
+        if (!best || t < best.t) best = { tag: r.tag, t };
+      }
+      if (best) {
+        pr.shipped_version = best.tag;
+        pr.version_source = "first release published at/after merge";
+      }
+    } else {
+      console.error(`  (warn: gh api releases failed: ${rel.stderr.split("\n")[0]})`);
+    }
+  }
+
+  // (b) fallback — default branch's package manifest version (change merged but not
+  //     yet in a tagged release). Marked as unreleased so the skill doesn't present
+  //     it as a shipped tag.
+  if (pr.shipped_version == null && owner && repo) {
+    const pkg = ghTry(["api", `repos/${owner}/${repo}/contents/package.json`, "--jq", ".content"]);
+    if (pkg.ok && pkg.stdout.trim()) {
+      try {
+        const manifest = JSON.parse(Buffer.from(pkg.stdout.trim(), "base64").toString("utf8"));
+        if (manifest?.version) {
+          pr.shipped_version = String(manifest.version);
+          pr.version_source = "default-branch package.json (unreleased)";
+        }
+      } catch {
+        /* not JSON / no version — leave null */
+      }
+    }
+  }
+}
+
+// ── 3. write capture/pr.json + capture/diff.patch ────────────────────────────
+mkdirSync(outDir, { recursive: true });
+const prJsonPath = join(outDir, "pr.json");
+writeFileSync(prJsonPath, JSON.stringify(pr, null, 2) + "\n");
+
+const diff = ghTry(["pr", "diff", prRef]);
+const diffPath = join(outDir, "diff.patch");
+if (diff.ok) {
+  writeFileSync(diffPath, diff.stdout);
+} else {
+  // The brief still builds without the diff (ingest treats it as optional), so this
+  // is a warning, not fatal — but surface it.
+  console.error(
+    `  (warn: gh pr diff failed — brief builds without it: ${diff.stderr.split("\n")[0]})`,
+  );
+}
+
+// ── 4. summary ───────────────────────────────────────────────────────────────
+const repoLabel = owner && repo ? `${owner}/${repo}` : "(repo?)";
+console.log(
+  [
+    `✓ fetch-pr: ${repoLabel} PR #${number ?? "?"} — "${(pr.title || "").slice(0, 72)}"`,
+    `  files: ${filesNote}; diff: ${diff.ok ? `${diff.stdout.length} chars` : "MISSING"}`,
+    `  shipped_version: ${pr.shipped_version ?? "null"}${pr.version_source ? ` (${pr.version_source})` : ""}`,
+    `  wrote ${prJsonPath}${diff.ok ? ` + ${diffPath}` : ""}`,
+  ].join("\n"),
+);
diff --git a/.claude/skills-media/pr-to-video/scripts/frame-contract.test.mjs b/.claude/skills-media/pr-to-video/scripts/frame-contract.test.mjs
new file mode 100644
index 000000000..7d96dd5d0
--- /dev/null
+++ b/.claude/skills-media/pr-to-video/scripts/frame-contract.test.mjs
@@ -0,0 +1,206 @@
+import assert from "node:assert/strict";
+import { execFileSync } from "node:child_process";
+import { existsSync, mkdirSync, mkdtempSync, readFileSync, writeFileSync } from "node:fs";
+import { tmpdir } from "node:os";
+import { dirname, join, resolve } from "node:path";
+import test from "node:test";
+
+import { validateFrameHtml } from "./lib/frame-contract.mjs";
+
+const scriptDir = dirname(new URL(import.meta.url).pathname);
+const buildFrameScript = join(scriptDir, "build-frame.mjs");
+const assembleScript = join(scriptDir, "assemble-index.mjs");
+const transitionsScript = join(scriptDir, "transitions.mjs");
+
+function write(path, contents) {
+  mkdirSync(dirname(path), { recursive: true });
+  writeFileSync(path, contents);
+}
+
+function validFrame(id = "01-valid", duration = 3) {
+  return `<template id="${id}-template">
+  <div data-composition-id="${id}" data-width="1920" data-height="1080" data-duration="${duration}">
+    <div class="clip" data-start="0" data-duration="${duration}" data-track-index="0"></div>
+    <style>#root { color: black; }</style>
+    <script>window.__timelines = window.__timelines || {}; window.__timelines["${id}"] = gsap.timeline({ paused: true });</script>
+  </div>
+</template>`;
+}
+
+test("valid bare template fragment passes the shared frame contract", () => {
+  assert.doesNotThrow(() =>
+    validateFrameHtml(validFrame(), { expectedId: "01-valid", expectedDuration: 3 }),
+  );
+});
+
+test("HTML5 unquoted root attributes are accepted", () => {
+  assert.deepEqual(
+    validateFrameHtml(
+      `<template><div data-composition-id=01-valid data-duration=3></div></template>`,
+      { expectedId: "01-valid", expectedDuration: 3 },
+    ),
+    { compositionId: "01-valid", duration: 3 },
+  );
+});
+
+test("duration accepts decimal seconds but rejects alternate numeric syntaxes", () => {
+  assert.doesNotThrow(() =>
+    validateFrameHtml(
+      `<template><div data-composition-id="01-valid" data-duration="3.25"></div></template>`,
+    ),
+  );
+  for (const duration of ["0x10", "3e2", "Infinity"]) {
+    assert.throws(
+      () =>
+        validateFrameHtml(
+          `<template><div data-composition-id="01-valid" data-duration="${duration}"></div></template>`,
+        ),
+      /positive.*duration/i,
+    );
+  }
+});
+
+test("full HTML is rejected even when it contains a valid inner template", () => {
+  const html = `<!doctype html><html><head></head><body>${validFrame()}</body></html>`;
+  assert.throws(
+    () => validateFrameHtml(html, { expectedId: "01-valid", expectedDuration: 3 }),
+    /bare <template>|full HTML document/i,
+  );
+});
+
+test("missing or mismatched composition id and duration fail explicitly", () => {
+  assert.throws(
+    () =>
+      validateFrameHtml(`<template><div data-duration="3"></div></template>`, {
+        expectedId: "01-valid",
+        expectedDuration: 3,
+      }),
+    /composition id/i,
+  );
+  assert.throws(
+    () =>
+      validateFrameHtml(
+        `<template><div data-composition-id="wrong" data-duration="3"></div></template>`,
+        { expectedId: "01-valid", expectedDuration: 3 },
+      ),
+    /expected.*01-valid/i,
+  );
+  assert.throws(
+    () =>
+      validateFrameHtml(
+        `<template><div data-composition-id="01-valid" data-duration="0"></div></template>`,
+        { expectedId: "01-valid", expectedDuration: 3 },
+      ),
+    /positive.*duration/i,
+  );
+});
+
+test("assembler rejects malformed worker output before writing index.html", () => {
+  const project = mkdtempSync(join(tmpdir(), "p2v-frame-contract-"));
+  write(
+    join(project, "STORYBOARD.md"),
+    `---\nformat: 1920x1080\n---\n\n## Frame 1 — Broken\n\n- duration: 3s\n- status: animated\n- src: compositions/frames/01-broken.html\n`,
+  );
+  write(
+    join(project, "compositions", "frames", "01-broken.html"),
+    `<!doctype html><html><body><div data-composition-id="01-broken" data-duration="3"></div></body></html>`,
+  );
+
+  assert.throws(
+    () =>
+      execFileSync(
+        process.execPath,
+        [assembleScript, "--storyboard", join(project, "STORYBOARD.md"), "--hyperframes", project],
+        { encoding: "utf8", stdio: "pipe" },
+      ),
+    /bare <template>|full HTML document/i,
+  );
+  assert.equal(existsSync(join(project, "index.html")), false);
+});
+
+test("validated bare frames survive assembly and transition injection", () => {
+  const project = mkdtempSync(join(tmpdir(), "p2v-frame-transition-"));
+  write(
+    join(project, "STORYBOARD.md"),
+    `---\nformat: 1920x1080\n---\n\n## Frame 1 — First\n\n- duration: 3s\n- transition_in: cut\n- status: animated\n- src: compositions/frames/01-first.html\n\n## Frame 2 — Second\n\n- duration: 3s\n- transition_in: crossfade 0.4s\n- status: animated\n- src: compositions/frames/02-second.html\n`,
+  );
+  write(join(project, "compositions", "frames", "01-first.html"), validFrame("01-first", 3));
+  write(join(project, "compositions", "frames", "02-second.html"), validFrame("02-second", 3));
+
+  execFileSync(
+    process.execPath,
+    [assembleScript, "--storyboard", join(project, "STORYBOARD.md"), "--hyperframes", project],
+    { encoding: "utf8" },
+  );
+  execFileSync(
+    process.execPath,
+    [
+      transitionsScript,
+      "inject",
+      "--storyboard",
+      join(project, "STORYBOARD.md"),
+      "--hyperframes",
+      project,
+    ],
+    { encoding: "utf8" },
+  );
+  const verified = execFileSync(
+    process.execPath,
+    [
+      transitionsScript,
+      "verify",
+      "--storyboard",
+      join(project, "STORYBOARD.md"),
+      "--index",
+      join(project, "index.html"),
+    ],
+    { encoding: "utf8" },
+  );
+  assert.match(verified, /1 transition\(s\) verified/);
+  assert.doesNotThrow(() =>
+    execFileSync(
+      process.execPath,
+      [assembleScript, "--storyboard", join(project, "STORYBOARD.md"), "--hyperframes", project],
+      { encoding: "utf8" },
+    ),
+  );
+});
+
+test("Claude preset stages renderer-parity fonts for an empty PR token set", () => {
+  const project = mkdtempSync(join(tmpdir(), "p2v-claude-fonts-"));
+  write(join(project, "capture", "extracted", "tokens.json"), '{"colors":[],"fonts":[]}');
+
+  execFileSync(
+    process.execPath,
+    [buildFrameScript, "--preset", "claude", "--hyperframes", project],
+    { encoding: "utf8" },
+  );
+
+  const expected = [
+    "EBGaramond-400.woff2",
+    "EBGaramond-700.woff2",
+    "Inter-400.woff2",
+    "Inter-700.woff2",
+    "JetBrainsMono-400.woff2",
+    "JetBrainsMono-700.woff2",
+  ];
+  for (const name of expected) {
+    const path = join(project, "assets", "fonts", name);
+    assert.equal(existsSync(path), true, `${name} should be staged`);
+    const magic = readFileSync(path).subarray(0, 4).toString("ascii");
+    assert.equal(magic, "wOF2", `${name} should be a WOFF2 file`);
+  }
+
+  const frameMd = readFileSync(join(project, "frame.md"), "utf8");
+  assert.match(frameMd, /@font-face\{font-family:"EB Garamond";font-weight:400/);
+  assert.match(frameMd, /@font-face\{font-family:"Inter";font-weight:700/);
+  assert.match(frameMd, /@font-face\{font-family:"JetBrains Mono";font-weight:400/);
+  assert.doesNotMatch(frameMd, /fonts\.googleapis\.com/);
+});
+
+test("bundled Claude font licenses are shipped beside the assets", () => {
+  const fontDir = resolve(scriptDir, "../../hyperframes-creative/frame-presets/claude/fonts");
+  for (const family of ["eb-garamond", "inter", "jetbrains-mono"]) {
+    assert.equal(existsSync(join(fontDir, `OFL-${family}.txt`)), true);
+  }
+});
diff --git a/.claude/skills-media/pr-to-video/scripts/frame-packets.mjs b/.claude/skills-media/pr-to-video/scripts/frame-packets.mjs
new file mode 100644
index 000000000..1e45d246a
--- /dev/null
+++ b/.claude/skills-media/pr-to-video/scripts/frame-packets.mjs
@@ -0,0 +1,142 @@
+#!/usr/bin/env node
+
+import { existsSync, mkdirSync, readFileSync, writeFileSync } from "node:fs";
+import { basename, dirname, join, resolve } from "node:path";
+import { fileURLToPath, pathToFileURL } from "node:url";
+
+const SCRIPT_DIR = dirname(fileURLToPath(import.meta.url));
+const SKILL_DIR = resolve(SCRIPT_DIR, "..");
+const ANIMATION_DIR = resolve(SKILL_DIR, "../hyperframes-animation");
+
+function field(block, name) {
+  const match = block.match(new RegExp(`^-\\s+${name}:\\s*(.+)$`, "im"));
+  return match?.[1]?.trim() ?? null;
+}
+
+function splitFrames(storyboard) {
+  const matches = [...storyboard.matchAll(/^## Frame\s+([^\n]+)$/gm)];
+  return matches.map((match, index) => {
+    const start = match.index;
+    const end = matches[index + 1]?.index ?? storyboard.length;
+    return {
+      heading: match[1].trim(),
+      block: storyboard.slice(start, end).trim(),
+    };
+  });
+}
+
+function frameId(frame) {
+  const src = field(frame.block, "src");
+  if (!src) throw new Error(`${frame.heading}: missing src`);
+  return basename(src).replace(/\.html?$/i, "");
+}
+
+function sourceExcerpt(block) {
+  const match = block.match(/^### Source excerpt\s*\n+(```[^\n]*\n[\s\S]*?\n```)/im);
+  return match?.[1] ?? null;
+}
+
+function selectedFile(path, heading) {
+  if (!path || !existsSync(path)) return "";
+  return `\n## ${heading}\n\n${readFileSync(path, "utf8").trim()}\n`;
+}
+
+function codeVocabularySection(block) {
+  const focal = field(block, "focal") ?? "";
+  const codeId = focal.match(/\b(code-[a-z0-9-]+)\b/i)?.[1];
+  if (!codeId) return "";
+  const vocabPath = join(SKILL_DIR, "references", "code-vocabulary.md");
+  if (!existsSync(vocabPath)) {
+    return `\n## Code block\n\nUse registry block \`${codeId}\`.\n`;
+  }
+  const vocab = readFileSync(vocabPath, "utf8");
+  const lines = vocab.split("\n");
+  const exactToken = `\`${codeId.toLowerCase()}\``;
+  const matchingLines = lines.filter((line) => line.toLowerCase().includes(exactToken));
+  if (matchingLines.length === 0) {
+    return `\n## Code block\n\nUse registry block \`${codeId}\`.\n`;
+  }
+  return `\n## Code block excerpt (${codeId})\n\n${matchingLines.join("\n").trim()}\n`;
+}
+
+function resourceSections(block) {
+  let sections = "";
+  const blueprint = field(block, "blueprint");
+  if (blueprint && blueprint.toLowerCase() !== "compose") {
+    sections += selectedFile(
+      join(ANIMATION_DIR, "blueprints", `${blueprint}.md`),
+      `Selected blueprint: ${blueprint}`,
+    );
+  }
+  const rules = (field(block, "rules") ?? "")
+    .split(/[,\s]+/)
+    .map((rule) => rule.trim())
+    .filter(Boolean);
+  for (const rule of rules) {
+    sections += selectedFile(
+      join(ANIMATION_DIR, "rules", `${rule}.md`),
+      `Selected motion rule: ${rule}`,
+    );
+  }
+  return sections;
+}
+
+const COMPACT_CONTRACT = `- Output exactly one bare \`<template>…</template>\` fragment; never emit DOCTYPE, html, head, or body.
+- The first composition root must carry the exact frame id, positive duration, width, and height.
+- Register exactly one paused GSAP timeline under the exact frame id.
+- Write only the requested frame file. Do not read the full PR diff or the full storyboard.`;
+
+export function buildFramePackets({
+  projectDir,
+  storyboardPath = join(projectDir, "STORYBOARD.md"),
+  outDir = join(projectDir, ".hyperframes", "frame-packets"),
+  maxPacketBytes = 48_000,
+}) {
+  const storyboard = readFileSync(storyboardPath, "utf8");
+  const frames = splitFrames(storyboard);
+  if (frames.length === 0) throw new Error("STORYBOARD.md has no frame blocks");
+
+  const packets = frames.map((frame) => {
+    const id = frameId(frame);
+    const codeFrame = /\bcode-[a-z0-9-]+\b/i.test(field(frame.block, "focal") ?? "");
+    const excerpt = sourceExcerpt(frame.block);
+    if (codeFrame && !excerpt) {
+      throw new Error(`${frame.heading}: code frame requires an upstream-selected Source excerpt`);
+    }
+    const packet = `# Frame packet: ${id}\n\n## Structural contract\n\n${COMPACT_CONTRACT}\n\n## Project inputs\n\n- Project: ${resolve(projectDir)}\n- Design tokens: ${join(resolve(projectDir), "frame.md")}\n\n## Assigned storyboard block\n\n${frame.block}\n${resourceSections(frame.block)}${codeVocabularySection(frame.block)}`;
+    const bytes = Buffer.byteLength(packet);
+    if (bytes > maxPacketBytes) {
+      throw new Error(`${id}: frame packet is ${bytes} bytes (limit ${maxPacketBytes})`);
+    }
+    return { frameId: id, path: join(outDir, `${id}.md`), bytes, packet };
+  });
+
+  mkdirSync(outDir, { recursive: true });
+  for (const { path, packet } of packets) writeFileSync(path, packet);
+  return packets.map(({ packet: _packet, ...result }) => result);
+}
+
+function flag(argv, name, fallback) {
+  const index = argv.indexOf(`--${name}`);
+  return index >= 0 && argv[index + 1] ? argv[index + 1] : fallback;
+}
+
+function main() {
+  const argv = process.argv.slice(2);
+  const projectDir = resolve(flag(argv, "project", "."));
+  try {
+    const packets = buildFramePackets({
+      projectDir,
+      storyboardPath: resolve(flag(argv, "storyboard", join(projectDir, "STORYBOARD.md"))),
+      outDir: resolve(flag(argv, "out-dir", join(projectDir, ".hyperframes", "frame-packets"))),
+    });
+    console.log(`✓ frame packets: ${packets.length} bounded packet(s)`);
+    for (const packet of packets)
+      console.log(`  ${packet.frameId}: ${packet.bytes} bytes → ${packet.path}`);
+  } catch (error) {
+    console.error(`✗ frame packets: ${error.message}`);
+    process.exit(1);
+  }
+}
+
+if (pathToFileURL(process.argv[1] ?? "").href === import.meta.url) main();
diff --git a/.claude/skills-media/pr-to-video/scripts/ingest.mjs b/.claude/skills-media/pr-to-video/scripts/ingest.mjs
new file mode 100644
index 000000000..28c02ff75
--- /dev/null
+++ b/.claude/skills-media/pr-to-video/scripts/ingest.mjs
@@ -0,0 +1,561 @@
+#!/usr/bin/env node
+// Step 1 — PR ingest (deterministic; no subagent; NO network).
+//
+// Pure transform. The orchestrator (SKILL.md Step 1) runs `gh` itself so auth /
+// not-found / private-repo errors surface with gh's own stderr; THIS script never
+// touches the network. It only folds the two gh artifacts into the synthetic
+// capture package the shared Gen-B backend (build-frame / captions / assemble-index)
+// expects — the same shape faceless-explainer's Step 1 writes by hand, so the
+// whole downstream runs unchanged. `capture/extracted/` is kept (no website was
+// captured — the PR is ingested into the same folder the engine reads by default).
+//
+// Reads:
+//   --pr-json <path>   gh pr view --json number,title,body,author,url,baseRefName,
+//                      headRefName,commits,files,additions,deletions,changedFiles,labels,
+//                      reviews,latestReviews,comments,assignees,reviewDecision,mergedBy
+//                      + fetch-pr.mjs's best-effort shipped_version / version_source
+//   --diff <path>      gh pr diff (raw unified diff)  [optional — brief still builds without it]
+// Writes (under --out-dir, default ./capture/extracted):
+//   tokens.json        synthetic design tokens (colors:[] → claude native palette)
+//   visible-text.txt   the narrative SOURCE: a readable plain-text brief assembled
+//                      from title + meta + people + body + commits + changed files + a
+//                      budget-bounded selection of representative diff hunks.
+//   people.json        the contributors (PR author / commit authors / reviewers /
+//                      commenters / assignees — the PR `author` is only the opener, so
+//                      commit authors from commits[].authors[] are tracked separately),
+//                      bot-filtered + deduped, each with a GitHub avatar URL + intended
+//                      assets/<login>.png path. The avatars themselves are
+//                      downloaded by the orchestrator (fetch-people-avatars.mjs) — THIS
+//                      script stays offline. people.json + the avatars are the ONE place
+//                      the faceless default is relaxed: an optional credits/shipped-by close.
+//
+// The story-design subagent reads visible-text.txt for the narrative AND gets the
+// full diff.patch separately for deep hunk selection — so this brief is curated,
+// not exhaustive: noisy files (lockfiles / dist / maps) are deprioritised so real
+// source hunks win the char budget.
+//
+// Usage:
+//   node ingest.mjs --pr-json ./capture/pr.json --diff ./capture/diff.patch \
+//                   --out-dir ./capture/extracted
+//
+// Exit 0 = tokens.json + visible-text.txt written + summary on stdout.
+// Exit 1 = pr.json missing / unparseable (orchestrator should stop).
+
+import { existsSync, mkdirSync, readFileSync, writeFileSync } from "node:fs";
+import { resolve, join } from "node:path";
+
+// ---------- argv ----------
+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(`✗ ingest.mjs: ${msg}`);
+  process.exit(1);
+}
+
+const prJsonPath = resolve(flag("pr-json", "./capture/pr.json"));
+const diffPath = flag("diff") ? resolve(flag("diff")) : resolve("./capture/diff.patch");
+const outDir = resolve(flag("out-dir", "./capture/extracted"));
+
+// Budgets — keep visible-text.txt readable and bounded for the story-design agent.
+const MAX_BODY_CHARS = parseInt(flag("max-body-chars", "2600"), 10);
+const MAX_DIFF_CHARS = parseInt(flag("max-diff-chars", "4800"), 10);
+const MAX_HUNK_LINES = parseInt(flag("max-hunk-lines", "22"), 10); // per hunk, post-context-trim
+const MAX_COMMITS = parseInt(flag("max-commits", "12"), 10);
+const MAX_FILES_LISTED = parseInt(flag("max-files-listed", "40"), 10);
+
+// Noisy paths whose diff bodies rarely teach anything — deprioritised in hunk
+// selection (still listed in "Files changed" with their stats).
+const NOISE_RX =
+  /(^|\/)(package-lock\.json|yarn\.lock|pnpm-lock\.yaml|npm-shrinkwrap\.json|go\.sum|Cargo\.lock|composer\.lock|Gemfile\.lock|poetry\.lock)$|\.(min\.js|min\.css|map|snap)$|(^|\/)(dist|build|out|vendor|node_modules|\.next|coverage)\//;
+
+// ---------- read pr.json ----------
+if (!existsSync(prJsonPath)) die(`pr.json not found at ${prJsonPath} (run gh pr view first)`);
+let pr;
+try {
+  pr = JSON.parse(readFileSync(prJsonPath, "utf8"));
+} catch (e) {
+  die(`pr.json is not valid JSON (${e.message}) — check the gh pr view output`);
+}
+
+// ---------- read diff (optional) ----------
+let diffRaw = "";
+if (existsSync(diffPath)) {
+  try {
+    diffRaw = readFileSync(diffPath, "utf8");
+  } catch {
+    diffRaw = "";
+  }
+}
+
+// ---------- derive scalars ----------
+const number = pr.number ?? "?";
+const title = (pr.title || `Pull request #${number}`).trim();
+const url = pr.url || "";
+const repo = (() => {
+  const m = /github\.com\/([^/]+\/[^/]+)\/pull\//.exec(url);
+  if (m) return m[1];
+  if (pr.headRepository?.nameWithOwner) return pr.headRepository.nameWithOwner;
+  return "";
+})();
+const author = pr.author?.login || pr.author?.name || "unknown";
+const baseRef = pr.baseRefName || "base";
+const headRef = pr.headRefName || "head";
+const additions = pr.additions ?? 0;
+const deletions = pr.deletions ?? 0;
+const changedFiles = pr.changedFiles ?? (Array.isArray(pr.files) ? pr.files.length : 0);
+const labels = Array.isArray(pr.labels)
+  ? pr.labels.map((l) => (typeof l === "string" ? l : l?.name)).filter(Boolean)
+  : [];
+
+// ---------- people (author / reviewers / commenters / assignees) ----------
+// Offline bot heuristic — gh gives reviewer/commenter authors as a bare `login`
+// (no `is_bot`), so we filter by the GitHub `[bot]` suffix + a denylist of the
+// review/CI bots that dominate org PRs. Best-effort: a bot that slips through
+// just gets an avatar downloaded and can still be excluded by story-design.
+const BOT_DENYLIST = new Set(
+  [
+    "claude",
+    "graphite-app",
+    "dependabot",
+    "github-actions",
+    "codecov",
+    "codecov-commenter",
+    "coderabbitai",
+    "sonarcloud",
+    "sonarqubecloud",
+    "vercel",
+    "netlify",
+    "renovate",
+    "snyk-bot",
+    "greenkeeper",
+    "mergify",
+    "allcontributors",
+    "imgbot",
+    "pre-commit-ci",
+    "deepsource-autofix",
+    "sentry-io",
+    "semgrep-app",
+    "cubic-dev-ai",
+    "gemini-code-assist",
+    "copilot-pull-request-reviewer",
+    "github-advanced-security",
+    "restyled-io",
+    "changeset-bot",
+    "bundlemon",
+  ].map((s) => s.toLowerCase()),
+);
+const isBot = (login) => {
+  if (!login) return true;
+  const l = login.toLowerCase();
+  return l.endsWith("[bot]") || l.endsWith("-bot") || l.endsWith("[robot]") || BOT_DENYLIST.has(l);
+};
+
+// "author" = the PR opener; "committer" = wrote/co-authored commits in this PR
+// (often differs from the opener — a teammate force-pushes the branch, or commits
+// are co-authored). Commit authors are first-class contributors for a credits close.
+const ROLE_ORDER = ["author", "committer", "reviewer", "commenter", "assignee"];
+const peopleMap = new Map(); // login -> { login, name, roles:Set, reviewState, association, commitCount }
+const botsFiltered = new Set();
+// Returns the person record for a real (non-bot) login, creating it on first
+// touch; records and drops bots. null means "skip this login". `name` is the
+// GitHub display name (e.g. "Miguel Angel Simon Sierra") — gh only hands this
+// over for author/commits/mergedBy, not reviewers/commenters/assignees, so it's
+// filled in opportunistically and the first non-empty value wins.
+function consider(login, name) {
+  if (!login) return null;
+  if (isBot(login)) {
+    botsFiltered.add(login);
+    return null;
+  }
+  if (!peopleMap.has(login))
+    peopleMap.set(login, {
+      login,
+      name: null,
+      roles: new Set(),
+      reviewState: null,
+      association: null,
+      commitCount: 0,
+    });
+  const p = peopleMap.get(login);
+  if (!p.name && name) p.name = name;
+  return p;
+}
+
+const authorLogin = pr.author?.login || null;
+{
+  const p = consider(authorLogin, pr.author?.name);
+  if (p) p.roles.add("author");
+}
+
+// Commit authors — the people who actually wrote the code. pr.commits[].authors[]
+// carries login/name/email; co-authored commits list several. Counts drive ordering
+// and the brief ("Name (@login, N commits)"). Authors with no GitHub login
+// (email-only) can't be avatar'd, so they're skipped here.
+for (const c of Array.isArray(pr.commits) ? pr.commits : []) {
+  for (const a of Array.isArray(c?.authors) ? c.authors : []) {
+    const p = consider(a?.login, a?.name);
+    if (!p) continue;
+    p.roles.add("committer");
+    p.commitCount += 1;
+  }
+}
+
+// Reviewers — prefer latestReviews (one row per reviewer, final state); fall back
+// to reviews[] (all events → keep the last state per reviewer).
+let reviewSource = Array.isArray(pr.latestReviews) ? pr.latestReviews : [];
+if (!reviewSource.length && Array.isArray(pr.reviews)) {
+  const lastByAuthor = new Map();
+  for (const r of pr.reviews) {
+    const lg = r?.author?.login;
+    if (lg) lastByAuthor.set(lg, r); // later events overwrite earlier
+  }
+  reviewSource = [...lastByAuthor.values()];
+}
+for (const r of reviewSource) {
+  const p = consider(r?.author?.login, r?.author?.name);
+  if (!p) continue;
+  p.roles.add("reviewer");
+  if (r.state) p.reviewState = r.state;
+  if (r.authorAssociation) p.association = r.authorAssociation;
+}
+
+for (const c of Array.isArray(pr.comments) ? pr.comments : []) {
+  const p = consider(c?.author?.login, c?.author?.name);
+  if (p) p.roles.add("commenter");
+}
+for (const a of Array.isArray(pr.assignees) ? pr.assignees : []) {
+  const p = consider(a?.login, a?.name);
+  if (p) p.roles.add("assignee");
+}
+
+const REVIEW_STATE_LABEL = {
+  APPROVED: "approved",
+  CHANGES_REQUESTED: "changes requested",
+  COMMENTED: "commented",
+  DISMISSED: "dismissed",
+  PENDING: "pending",
+};
+const primaryRoleRank = (roles) => {
+  for (let i = 0; i < ROLE_ORDER.length; i++) if (roles.includes(ROLE_ORDER[i])) return i;
+  return ROLE_ORDER.length;
+};
+const people = [...peopleMap.values()]
+  .map((p) => ({
+    login: p.login,
+    // Display name for narration/on-screen credits — GitHub logins read aloud
+    // badly ("@miguAng18947550"). null when GitHub has no public name for this
+    // user and fetch-people-avatars.mjs couldn't resolve one either; the credits
+    // frame falls back to the login in that case.
+    name: p.name || null,
+    roles: ROLE_ORDER.filter((r) => p.roles.has(r)),
+    commitCount: p.commitCount || 0,
+    reviewState: p.reviewState || null,
+    association: p.association || null,
+    // Unauthenticated avatar endpoint — redirects to the user's avatar; the
+    // orchestrator's fetch-people-avatars.mjs downloads it here.
+    avatarUrl: `https://github.com/${encodeURIComponent(p.login)}.png?size=200`,
+    avatarFile: `assets/${p.login}.png`,
+    avatarFetched: false, // set true by fetch-people-avatars.mjs once downloaded
+  }))
+  .sort((a, b) => primaryRoleRank(a.roles) - primaryRoleRank(b.roles));
+
+const reviewDecision = pr.reviewDecision || null;
+const mergedByLogin = pr.mergedBy?.login || null;
+
+// Best-effort shipping version stamped by fetch-pr.mjs (MERGED PRs only). Surfaced
+// in the brief so the end card / cta cites a real version instead of inventing one;
+// null means "no version known — the close names the repo URL only" (see story-design.md).
+const shippedVersion = typeof pr.shipped_version === "string" ? pr.shipped_version : null;
+const versionSource = typeof pr.version_source === "string" ? pr.version_source : null;
+
+// ---------- clean body ----------
+function cleanBody(raw) {
+  if (!raw || typeof raw !== "string") return "";
+  // Strip HTML comments (PR templates) to a fixpoint, so fragments left by one
+  // pass can't reassemble into a new comment (CodeQL
+  // js/incomplete-multi-character-sanitization).
+  let t = raw;
+  for (let prev = null; prev !== t; ) {
+    prev = t;
+    t = t.replace(/<!--[\s\S]*?-->/g, "");
+  }
+  t = t
+    .replace(/\r\n/g, "\n")
+    .replace(/\n{3,}/g, "\n\n")
+    .trim();
+  if (t.length > MAX_BODY_CHARS) {
+    t = t.slice(0, MAX_BODY_CHARS).replace(/\s+\S*$/, "") + "\n…(description truncated)";
+  }
+  return t;
+}
+const body = cleanBody(pr.body);
+
+// ---------- commits ----------
+const commits = Array.isArray(pr.commits) ? pr.commits : [];
+const commitLines = commits
+  .map(
+    (c) =>
+      c?.messageHeadline || (c?.messageBody || "").split("\n")[0] || (c?.oid || "").slice(0, 7),
+  )
+  .filter(Boolean);
+
+// ---------- files (from pr.json) ----------
+const files = (Array.isArray(pr.files) ? pr.files : []).map((f) => ({
+  path: f.path || f.filename || "",
+  additions: f.additions ?? 0,
+  deletions: f.deletions ?? 0,
+}));
+
+// ---------- parse the unified diff into per-file hunks ----------
+function parseDiff(raw) {
+  if (!raw) return new Map();
+  const lines = raw.split("\n");
+  const byPath = new Map(); // path -> { hunks: string[][] }
+  let curPath = null;
+  let curHunk = null;
+  const ensure = (p) => {
+    if (!byPath.has(p)) byPath.set(p, { hunks: [] });
+    return byPath.get(p);
+  };
+  for (const line of lines) {
+    if (line.startsWith("diff --git ")) {
+      // new file block; provisional path from "b/<path>" (refined by +++ below)
+      const m = /^diff --git a\/(.+?) b\/(.+)$/.exec(line);
+      curPath = m ? m[2] : null;
+      curHunk = null;
+      if (curPath) ensure(curPath);
+      continue;
+    }
+    if (line.startsWith("+++ ")) {
+      // authoritative new path ("+++ b/path" or "+++ /dev/null" for deletions)
+      const p = line.slice(4).replace(/^b\//, "").trim();
+      if (p && p !== "/dev/null") {
+        curPath = p;
+        ensure(curPath);
+      }
+      continue;
+    }
+    if (line.startsWith("--- ")) continue;
+    if (line.startsWith("@@")) {
+      if (!curPath) continue;
+      curHunk = [line];
+      ensure(curPath).hunks.push(curHunk);
+      continue;
+    }
+    if (curHunk && curPath) {
+      // body line of the current hunk (context / + / -); ignore the trailing
+      // "\ No newline at end of file" sentinel
+      if (line.startsWith("\\")) continue;
+      curHunk.push(line);
+    }
+  }
+  return byPath;
+}
+const diffByPath = parseDiff(diffRaw);
+
+// Render a single hunk, trimmed: keep the @@ header + all +/- lines, but cap
+// surrounding context to keep signal high and stay inside the line budget.
+function renderHunk(hunk) {
+  const header = hunk[0];
+  const bodyLines = hunk.slice(1);
+  const kept = [];
+  for (const l of bodyLines) {
+    if (l.startsWith("+") || l.startsWith("-")) kept.push(l);
+    else if (kept.length && kept[kept.length - 1] !== "  ⋯") {
+      // collapse runs of context into a single marker (only between changes)
+      if (kept.some((k) => k.startsWith("+") || k.startsWith("-"))) kept.push("  ⋯");
+    }
+  }
+  // drop a trailing context marker
+  while (kept.length && kept[kept.length - 1] === "  ⋯") kept.pop();
+  let out = [header.replace(/\s*$/, "")];
+  out = out.concat(kept.slice(0, MAX_HUNK_LINES));
+  if (kept.length > MAX_HUNK_LINES)
+    out.push(`  …(+${kept.length - MAX_HUNK_LINES} more changed lines)`);
+  return out.join("\n");
+}
+
+// ---------- rank files for the representative-diff section ----------
+// real source first (non-noise, by total churn desc), noisy files last.
+const ranked = [...files]
+  .filter((f) => f.path && diffByPath.has(f.path))
+  .sort((a, b) => {
+    const an = NOISE_RX.test(a.path) ? 1 : 0;
+    const bn = NOISE_RX.test(b.path) ? 1 : 0;
+    if (an !== bn) return an - bn;
+    return b.additions + b.deletions - (a.additions + a.deletions);
+  });
+// include any diffed paths missing from files[] (rare; e.g. renames) at the tail
+for (const p of diffByPath.keys()) {
+  if (!ranked.find((f) => f.path === p)) ranked.push({ path: p, additions: 0, deletions: 0 });
+}
+
+// ---------- build the representative-diff section under the char budget ----------
+const diffSections = [];
+let diffChars = 0;
+let filesShown = 0;
+let filesOmitted = 0;
+for (const f of ranked) {
+  const entry = diffByPath.get(f.path);
+  if (!entry || !entry.hunks.length) continue;
+  const head = `### ${f.path}  (+${f.additions} / -${f.deletions})`;
+  const rendered = entry.hunks.map(renderHunk).join("\n");
+  const block = `${head}\n${rendered}`;
+  if (diffChars + block.length > MAX_DIFF_CHARS && filesShown > 0) {
+    filesOmitted++;
+    continue;
+  }
+  diffSections.push(block);
+  diffChars += block.length;
+  filesShown++;
+}
+
+// ---------- assemble visible-text.txt ----------
+const lines = [];
+lines.push(`# ${title}`);
+lines.push("");
+const metaBits = [repo, `PR #${number}`, `by ${author}`].filter(Boolean);
+lines.push(metaBits.join(" · "));
+lines.push(
+  `${baseRef} ← ${headRef} · +${additions} / -${deletions} across ${changedFiles} file(s)`,
+);
+if (labels.length) lines.push(`Labels: ${labels.join(", ")}`);
+if (url) lines.push(`URL: ${url}`);
+if (shippedVersion)
+  lines.push(`Shipped in: ${shippedVersion}${versionSource ? ` (${versionSource})` : ""}`);
+lines.push("");
+
+// People & reviews — human context for an optional credits / shipped-by close.
+// Avatars land in assets/<login>.png (downloaded by the orchestrator). Each
+// person is labeled "Name (@login)" — the credits close speaks the name, the
+// handle is display-only (never read aloud; see story-design.md).
+const label = (p) => (p.name ? `${p.name} (@${p.login})` : `@${p.login}`);
+if (people.length) {
+  lines.push("## People & reviews");
+  const authorPerson = people.find((p) => p.roles.includes("author"));
+  if (authorPerson) lines.push(`Author (opened PR): ${label(authorPerson)}`);
+  const committers = people.filter((p) => p.roles.includes("committer"));
+  if (committers.length) {
+    const parts = committers
+      .slice()
+      .sort((a, b) => b.commitCount - a.commitCount)
+      .map(
+        (p) =>
+          `${label(p)}${p.commitCount ? ` (${p.commitCount} commit${p.commitCount === 1 ? "" : "s"})` : ""}`,
+      );
+    lines.push(`Commit authors: ${parts.join(", ")}`);
+  }
+  const reviewers = people.filter((p) => p.roles.includes("reviewer"));
+  if (reviewers.length) {
+    const parts = reviewers.map(
+      (p) =>
+        `${label(p)}${p.reviewState ? ` (${REVIEW_STATE_LABEL[p.reviewState] || p.reviewState.toLowerCase()})` : ""}`,
+    );
+    lines.push(`Reviewers: ${parts.join(", ")}`);
+  }
+  const commentersOnly = people.filter(
+    (p) =>
+      p.roles.includes("commenter") && !p.roles.includes("author") && !p.roles.includes("reviewer"),
+  );
+  if (commentersOnly.length) lines.push(`Commenters: ${commentersOnly.map(label).join(", ")}`);
+  if (reviewDecision) lines.push(`Review decision: ${reviewDecision}`);
+  if (mergedByLogin) lines.push(`Merged by: @${mergedByLogin}`);
+  lines.push(`Avatars: assets/<login>.png (${people.length} contributor(s) — see people.json)`);
+  if (botsFiltered.size) lines.push(`(bots filtered out: ${[...botsFiltered].join(", ")})`);
+  lines.push("");
+}
+
+lines.push("## What the PR says");
+lines.push(body || "(no description provided)");
+lines.push("");
+
+if (commitLines.length) {
+  lines.push(`## Commits (${commitLines.length})`);
+  for (const c of commitLines.slice(0, MAX_COMMITS)) lines.push(`- ${c}`);
+  if (commitLines.length > MAX_COMMITS)
+    lines.push(`- …(+${commitLines.length - MAX_COMMITS} more)`);
+  lines.push("");
+}
+
+if (files.length) {
+  lines.push(`## Files changed (${files.length})`);
+  const sortedFiles = [...files].sort(
+    (a, b) => b.additions + b.deletions - (a.additions + a.deletions),
+  );
+  for (const f of sortedFiles.slice(0, MAX_FILES_LISTED)) {
+    lines.push(`- ${f.path}  (+${f.additions} / -${f.deletions})`);
+  }
+  if (files.length > MAX_FILES_LISTED)
+    lines.push(`- …(+${files.length - MAX_FILES_LISTED} more files)`);
+  lines.push("");
+}
+
+if (diffSections.length) {
+  lines.push("## Representative diff");
+  lines.push("");
+  lines.push(diffSections.join("\n\n"));
+  if (filesOmitted > 0) {
+    lines.push("");
+    lines.push(
+      `…(diff truncated to fit; ${filesOmitted} more changed file(s) omitted — see capture/diff.patch for the full change)`,
+    );
+  }
+  lines.push("");
+} else if (diffRaw) {
+  lines.push("## Representative diff");
+  lines.push("(diff present but no parseable hunks — see capture/diff.patch)");
+  lines.push("");
+}
+
+const visibleText =
+  lines
+    .join("\n")
+    .replace(/\n{3,}/g, "\n\n")
+    .trim() + "\n";
+
+// ---------- assemble tokens.json (FE scaffold shape; colors:[] → preset native palette) ----------
+const oneLiner = (() => {
+  const firstPara = body.split("\n").find((l) => l.trim().length > 0) || title;
+  const s = `PR #${number}${repo ? ` in ${repo}` : ""}: ${firstPara}`.replace(/\s+/g, " ").trim();
+  return s.length > 150 ? s.slice(0, 147).replace(/\s+\S*$/, "") + "…" : s;
+})();
+const tokens = {
+  title,
+  description: oneLiner,
+  colors: [],
+  fonts: [],
+};
+
+// ---------- assemble people.json ----------
+const peopleDoc = {
+  authorLogin,
+  reviewDecision,
+  mergedBy: mergedByLogin,
+  botsFiltered: [...botsFiltered],
+  people, // deduped, bot-filtered; each has roles[] + avatarUrl + avatarFile + avatarFetched
+};
+
+// ---------- write ----------
+mkdirSync(outDir, { recursive: true });
+const tokensOut = join(outDir, "tokens.json");
+const textOut = join(outDir, "visible-text.txt");
+const peopleOut = join(outDir, "people.json");
+writeFileSync(tokensOut, JSON.stringify(tokens, null, 2) + "\n");
+writeFileSync(textOut, visibleText);
+writeFileSync(peopleOut, JSON.stringify(peopleDoc, null, 2) + "\n");
+
+// ---------- summary ----------
+const reviewerCount = people.filter((p) => p.roles.includes("reviewer")).length;
+const committerCount = people.filter((p) => p.roles.includes("committer")).length;
+console.log(
+  [
+    `✓ ingest: ${repo || "(repo?)"} PR #${number} — "${title}"`,
+    `  +${additions} / -${deletions} across ${changedFiles} file(s); ${commitLines.length} commit(s)`,
+    `  diff: ${filesShown} file(s) shown, ${filesOmitted} omitted (budget ${MAX_DIFF_CHARS} chars)`,
+    `  people: ${people.length} contributor(s) (${committerCount} commit author(s), ${reviewerCount} reviewer(s)${reviewDecision ? `, decision ${reviewDecision}` : ""}${botsFiltered.size ? `; ${botsFiltered.size} bot(s) filtered` : ""})`,
+    `  wrote ${textOut} (${visibleText.length} chars) + ${tokensOut} + ${peopleOut}`,
+  ].join("\n"),
+);
diff --git a/.claude/skills-media/pr-to-video/scripts/lib/assets.mjs b/.claude/skills-media/pr-to-video/scripts/lib/assets.mjs
new file mode 100644
index 000000000..0f06ac5da
--- /dev/null
+++ b/.claude/skills-media/pr-to-video/scripts/lib/assets.mjs
@@ -0,0 +1,55 @@
+// assets.mjs — stage frame-named capture assets into assets/.
+// Shared by stage-assets.mjs (Step 4 close, BEFORE the frame workers run) and
+// assemble-index.mjs (Step 5, idempotent backstop). Only assets a frame names
+// in `asset_candidates` are staged; unnamed assets never reach the project.
+// asset_candidates value form: "assets/<basename> — desc; assets/… — …".
+
+import { copyFileSync, existsSync, mkdirSync } from "node:fs";
+import { basename, join } from "node:path";
+
+export function basenamesFromCandidates(value) {
+  if (typeof value !== "string") return [];
+  return value
+    .split(";")
+    .map((seg) => seg.split(/\s+[—–-]\s+/)[0].trim()) // strip the " — description"
+    .filter(Boolean)
+    .map((p) => basename(p.replace(/^assets\//, "")));
+}
+
+// Copy each frame's asset_candidates from capture/{assets,assets/videos,
+// screenshots} into assets/. Already-staged files are left as is (first-wins),
+// so calling this twice is safe. Returns { staged, wanted, anomalies }.
+export function stageAssets({ hyperframesDir, frames }) {
+  const wanted = new Set();
+  for (const f of frames) {
+    for (const b of basenamesFromCandidates(f.extra?.asset_candidates)) wanted.add(b);
+  }
+  const captureDirs = [
+    join(hyperframesDir, "capture/assets"),
+    join(hyperframesDir, "capture/assets/videos"), // videos download into a subdir
+    join(hyperframesDir, "capture/screenshots"),
+  ];
+  const assetsDir = join(hyperframesDir, "assets");
+  const anomalies = [];
+  let staged = 0;
+  if (wanted.size > 0) {
+    mkdirSync(assetsDir, { recursive: true });
+    for (const b of wanted) {
+      const dest = join(assetsDir, b);
+      if (existsSync(dest)) {
+        staged++;
+        continue;
+      } // first-wins / already staged
+      const src = captureDirs.map((d) => join(d, b)).find((p) => existsSync(p));
+      if (src) {
+        copyFileSync(src, dest);
+        staged++;
+      } else {
+        anomalies.push(
+          `asset "${b}" named by a frame but not found under capture/ — frame will 404 it`,
+        );
+      }
+    }
+  }
+  return { staged, wanted, anomalies };
+}
diff --git a/.claude/skills-media/pr-to-video/scripts/lib/dimensions.mjs b/.claude/skills-media/pr-to-video/scripts/lib/dimensions.mjs
new file mode 100644
index 000000000..a6be70bcf
--- /dev/null
+++ b/.claude/skills-media/pr-to-video/scripts/lib/dimensions.mjs
@@ -0,0 +1,45 @@
+// dimensions.mjs — canvas size + caption-band geometry for the video
+// pipeline. Single source of truth = the STORYBOARD frontmatter `format` global
+// ("1920x1080" / "1080x1920" / "1080x1080", or a named orientation). Every
+// script and the index assembler reads the size from here; none hardcodes it.
+
+// Named orientation presets. Square/portrait are 1080-based so they share the
+// long-edge pixel budget with landscape (same render-cost ballpark).
+export const ORIENTATION_PRESETS = {
+  landscape: { width: 1920, height: 1080 }, // 16:9 — default
+  portrait: { width: 1080, height: 1920 }, // 9:16 — reels / shorts / TikTok
+  square: { width: 1080, height: 1080 }, // 1:1 — feed
+};
+
+export const DEFAULT_DIMENSIONS = ORIENTATION_PRESETS.landscape;
+
+function sane(w, h) {
+  return Number.isFinite(w) && Number.isFinite(h) && w >= 240 && h >= 240 && w <= 8192 && h <= 8192;
+}
+
+// Parse a STORYBOARD `format` global into { width, height, source }. Accepts
+// "WxH" (e.g. "1920x1080"; `x` or `×`, any inner spacing) or a named orientation;
+// falls back to landscape so a storyboard with a missing/garbled format still
+// renders (no behavior change vs the old landscape lock).
+export function parseFormat(format) {
+  const s = typeof format === "string" ? format.trim().toLowerCase() : "";
+  if (ORIENTATION_PRESETS[s]) return { ...ORIENTATION_PRESETS[s], source: `orientation=${s}` };
+  const m = s.match(/^(\d+)\s*[x×]\s*(\d+)$/);
+  if (m) {
+    const w = parseInt(m[1] ?? "", 10);
+    const h = parseInt(m[2] ?? "", 10);
+    if (sane(w, h)) return { width: w, height: h, source: "format" };
+  }
+  return { ...DEFAULT_DIMENSIONS, source: "default(landscape)" };
+}
+
+// Caption band geometry, derived from canvas height: the bottom ~16.67% (180px
+// at h=1080). Frame content must end `safetyPx` above the band top. Holds even
+// when captions are disabled (bottom-edge consistency).
+export const CAPTION_BAND_FRACTION = 0.1667;
+export function captionBand(height, safetyPx = 20) {
+  const h = Number.isFinite(height) ? height : DEFAULT_DIMENSIONS.height;
+  const bandHeight = Math.round(h * CAPTION_BAND_FRACTION);
+  const bandTopY = h - bandHeight; // foreground must end at/above this y
+  return { bandHeight, bandTopY, foregroundMaxY: bandTopY - safetyPx };
+}
diff --git a/.claude/skills-media/pr-to-video/scripts/lib/frame-contract.mjs b/.claude/skills-media/pr-to-video/scripts/lib/frame-contract.mjs
new file mode 100644
index 000000000..ab13f5bcd
--- /dev/null
+++ b/.claude/skills-media/pr-to-video/scripts/lib/frame-contract.mjs
@@ -0,0 +1,54 @@
+function fail(message) {
+  throw new Error(`frame contract: ${message}`);
+}
+
+function attrValue(attrs, name) {
+  const match = attrs.match(
+    new RegExp(`(?:^|\\s)${name}\\s*=\\s*(?:"([^"]*)"|'([^']*)'|([^\\s"'=<>\`]+))`, "i"),
+  );
+  return match ? (match[1] ?? match[2] ?? match[3]) : null;
+}
+
+export function validateFrameHtml(html, { expectedId, expectedDuration } = {}) {
+  const source = String(html ?? "");
+  const trimmed = source.trim();
+  if (/<!doctype|<\/?(?:html|head|body)\b/i.test(trimmed)) {
+    fail("worker output must be one bare <template> fragment, not a full HTML document");
+  }
+  const opens = trimmed.match(/<template\b/gi) ?? [];
+  const closes = trimmed.match(/<\/template\s*>/gi) ?? [];
+  if (opens.length !== 1 || closes.length !== 1 || !/^<template\b/i.test(trimmed)) {
+    fail("worker output must contain exactly one bare <template> fragment");
+  }
+  if (!/<\/template\s*>$/i.test(trimmed)) {
+    fail("markup outside the closing </template> is not allowed");
+  }
+
+  const templateOpen = trimmed.match(/^<template\b[^>]*>/i)?.[0];
+  if (!templateOpen) fail("template opening tag is malformed");
+  const inner = trimmed.slice(
+    templateOpen.length,
+    trimmed.toLowerCase().lastIndexOf("</template>"),
+  );
+  const root = inner.match(/^\s*<([A-Za-z][\w:-]*)\b((?:[^>"']|"[^"]*"|'[^']*')*)>/);
+  if (!root) fail("template must begin with one composition root element");
+  const attrs = root[2];
+  const compositionId = attrValue(attrs, "data-composition-id");
+  if (!compositionId) fail("composition id is missing on the template root");
+  if (expectedId && compositionId !== expectedId) {
+    fail(`composition id ${JSON.stringify(compositionId)} does not match expected ${expectedId}`);
+  }
+
+  const durationRaw = attrValue(attrs, "data-duration");
+  const decimalDuration = /^(?:\d+(?:\.\d+)?|\.\d+)$/.test(durationRaw ?? "");
+  const duration = Number(durationRaw);
+  if (!decimalDuration || !Number.isFinite(duration) || duration <= 0) {
+    fail("root must declare a positive data-duration");
+  }
+  // Transition injection may extend an outgoing frame beyond its storyboard duration.
+  // A shorter root is always invalid; a longer root remains safe to reassemble.
+  if (Number.isFinite(expectedDuration) && duration < Number(expectedDuration) - 0.001) {
+    fail(`root duration ${duration}s is shorter than expected ${expectedDuration}s`);
+  }
+  return { compositionId, duration };
+}
diff --git a/.claude/skills-media/pr-to-video/scripts/lib/pad-frame-duration.mjs b/.claude/skills-media/pr-to-video/scripts/lib/pad-frame-duration.mjs
new file mode 100644
index 000000000..91471151f
--- /dev/null
+++ b/.claude/skills-media/pr-to-video/scripts/lib/pad-frame-duration.mjs
@@ -0,0 +1,36 @@
+// pad-frame-duration.mjs — keeps a frame's own #root/clip data-duration in
+// sync with the padded index.html wrapper duration transitions.mjs computes.
+//
+// The frame's OWN internal file declares its #root/clip data-duration to the
+// STORYBOARD's content-only length (frame-worker.md: duration is "fixed
+// upstream"). When an outgoing transition pads the index.html WRAPPER's
+// data-duration to cover the transition tail, the frame's own internal
+// duration is left short — the render engine clip-gates the sub-composition's
+// visible content at that shorter value, so content vanishes abruptly at
+// content-end instead of fading gracefully through the wrapper's extended
+// fade-out tween. Pad the frame's own file to match so both durations agree.
+
+import { readFileSync, writeFileSync } from "node:fs";
+import { resolve } from "node:path";
+
+export function padFrameInternalDuration(hyperframesDir, frameSrc, frameId, newDuration) {
+  const framePath = resolve(hyperframesDir, frameSrc);
+  let html;
+  try {
+    html = readFileSync(framePath, "utf8");
+  } catch (err) {
+    if (err?.code === "ENOENT") return;
+    throw err;
+  }
+  const tagRe = /<[a-z][\w:-]*\s[^<>]*?>/gi;
+  let m;
+  while ((m = tagRe.exec(html)) !== null) {
+    const tag = m[0];
+    if (!tag.includes(`data-composition-id="${frameId}"`)) continue;
+    if (!/data-duration="[\d.]+"/.test(tag)) continue;
+    const newTag = tag.replace(/data-duration="[\d.]+"/, `data-duration="${newDuration}"`);
+    if (newTag === tag) return;
+    writeFileSync(framePath, html.slice(0, m.index) + newTag + html.slice(m.index + tag.length));
+    return;
+  }
+}
diff --git a/.claude/skills-media/pr-to-video/scripts/lib/storyboard.mjs b/.claude/skills-media/pr-to-video/scripts/lib/storyboard.mjs
new file mode 100644
index 000000000..7c821dcba
--- /dev/null
+++ b/.claude/skills-media/pr-to-video/scripts/lib/storyboard.mjs
@@ -0,0 +1,249 @@
+// storyboard.mjs — vendored lenient parser for STORYBOARD.md.
+//
+// Faithful plain-JS port of @hyperframes/core/storyboard
+// (packages/core/src/storyboard/parseStoryboard.ts). Vendored because skills
+// ship standalone: installed via `npx skills add`, a skill's scripts can't reach
+// the monorepo's core package, and the core export points at .ts source that
+// `node` (which runs these scripts) can't load. CANONICAL contract = the core
+// parser + skills/hyperframes-core/references/storyboard-format.md; keep this in
+// lockstep. Behavior: never throws, accepts freeform narrative, recognizes
+// Frame/Beat/Scene headings at H2/H3, preserves unknown keys verbatim under
+// `extra` (keys lowercased). Pure node — no deps.
+
+export const FRAME_STATUSES = ["outline", "built", "animated"];
+export const DEFAULT_FRAME_STATUS = "outline";
+
+// Detection-only frame heading (ends at the keyword); ReDoS-hardened — keep as-is.
+const FRAME_HEADING_RE = /^(#{2,3})[ \t]+(?:frame|beat|scene)\b/i;
+const FRAME_TITLE_SEP_RE = /^[\s.:—-]+/;
+const HEADING_LEVEL_RE = /^(#{1,6})\s+/;
+const META_RE = /^\s*[-*]\s+([A-Za-z_][\w-]*)\s*:\s*(.+?)\s*$/;
+const LEADING_INT_RE = /^(\d+)/;
+const DURATION_NUM_RE = /(\d+(?:\.\d+)?)/;
+const TRANSITION_KEYS = new Set(["transition_in", "transitionin", "transition"]);
+const SCENE_KEYS = new Set(["scene", "description", "summary", "caption"]);
+export const VOICEOVER_ALIASES = ["voiceover", "vo", "voice_over", "narration"];
+const VOICEOVER_KEYS = new Set(VOICEOVER_ALIASES);
+
+export function parseStoryboard(source) {
+  const warnings = [];
+  const { globals, bodyStartLine, body } = parseFrontmatter(source, warnings);
+  const frames = parseFrames(body, bodyStartLine, warnings);
+  return { globals, frames, warnings };
+}
+
+function emptyGlobals() {
+  return { extra: {} };
+}
+
+function isFrameStatus(value) {
+  return FRAME_STATUSES.includes(value);
+}
+
+// ── Frontmatter ─────────────────────────────────────────────────────────────
+function findFrontmatterRange(lines, warnings) {
+  let start = 0;
+  while (start < lines.length && (lines[start] ?? "").trim() === "") start++;
+  if ((lines[start] ?? "").trim() !== "---") return null;
+  for (let i = start + 1; i < lines.length; i++) {
+    if ((lines[i] ?? "").trim() === "---") return { start, end: i };
+  }
+  warnings.push({
+    message: "Frontmatter opening '---' has no closing '---'; treating whole file as body.",
+    line: start + 1,
+  });
+  return null;
+}
+
+function parseFrontmatterEntries(lines, start, end, warnings) {
+  const globals = emptyGlobals();
+  for (let i = start + 1; i < end; i++) {
+    const raw = lines[i] ?? "";
+    if (raw.trim() === "") continue;
+    const colon = raw.indexOf(":");
+    if (colon === -1) {
+      warnings.push({
+        message: `Ignored non key:value frontmatter line: "${raw.trim()}"`,
+        line: i + 1,
+      });
+      continue;
+    }
+    const key = raw.slice(0, colon).trim().toLowerCase();
+    assignGlobal(globals, key, stripQuotes(raw.slice(colon + 1).trim()));
+  }
+  return globals;
+}
+
+function parseFrontmatter(source, warnings) {
+  const lines = source.split(/\r?\n/);
+  const range = findFrontmatterRange(lines, warnings);
+  if (!range) return { globals: emptyGlobals(), bodyStartLine: 1, body: source };
+  const globals = parseFrontmatterEntries(lines, range.start, range.end, warnings);
+  const body = lines.slice(range.end + 1).join("\n");
+  return { globals, bodyStartLine: range.end + 2, body };
+}
+
+function assignGlobal(globals, key, value) {
+  switch (key) {
+    case "format":
+      globals.format = value;
+      break;
+    case "message":
+      globals.message = value;
+      break;
+    case "arc":
+      globals.arc = value;
+      break;
+    case "audience":
+      globals.audience = value;
+      break;
+    default:
+      globals.extra[key] = value;
+  }
+}
+
+// ── Frames ──────────────────────────────────────────────────────────────────
+function openFrameSection(line, headingLine) {
+  const match = FRAME_HEADING_RE.exec(line);
+  if (!match) return null;
+  const headingText = line.slice(match[0].length).replace(FRAME_TITLE_SEP_RE, "").trim();
+  return { headingText, headingLine, level: (match[1] ?? "##").length, lines: [] };
+}
+
+function endsFrameSection(line, current) {
+  if (!current) return false;
+  const heading = HEADING_LEVEL_RE.exec(line);
+  return heading !== null && (heading[1] ?? "").length <= current.level;
+}
+
+function parseFrames(body, bodyStartLine, warnings) {
+  const lines = body.split(/\r?\n/);
+  const sections = [];
+  let current = null;
+  for (let i = 0; i < lines.length; i++) {
+    const line = lines[i] ?? "";
+    const opened = openFrameSection(line, bodyStartLine + i);
+    if (opened) {
+      sections.push(opened);
+      current = opened;
+    } else if (endsFrameSection(line, current)) {
+      current = null;
+    } else if (current) {
+      current.lines.push(line);
+    }
+  }
+  return sections.map((section, idx) => buildFrame(section, idx + 1, warnings));
+}
+
+function buildFrame(section, index, warnings) {
+  const frame = { index, status: DEFAULT_FRAME_STATUS, narrative: "", extra: {} };
+  const { number, title } = parseHeading(section.headingText);
+  if (number !== undefined) frame.number = number;
+  if (title) frame.title = title;
+
+  const narrativeLines = [];
+  for (const line of section.lines) {
+    const meta = META_RE.exec(line);
+    if (meta) {
+      applyMeta(
+        frame,
+        (meta[1] ?? "").toLowerCase(),
+        (meta[2] ?? "").trim(),
+        section.headingLine,
+        warnings,
+      );
+    } else {
+      narrativeLines.push(line);
+    }
+  }
+  frame.narrative = narrativeLines.join("\n").trim();
+  return frame;
+}
+
+function parseHeading(text) {
+  if (!text) return {};
+  const intMatch = LEADING_INT_RE.exec(text);
+  if (!intMatch) return { title: text };
+  const number = Number.parseInt(intMatch[1] ?? "", 10);
+  const rest = text
+    .slice((intMatch[0] ?? "").length)
+    .replace(/^[\s.:—-]+/, "")
+    .trim();
+  return { number, title: rest || undefined };
+}
+
+// Dispatch a recognized metadata key to its field, else stash under `extra`.
+// Mirrors core's META_SETTERS map exactly (direct keys + alias sets).
+function applyMeta(frame, key, value, headingLine, warnings) {
+  switch (key) {
+    case "duration":
+      applyDuration(frame, value, headingLine, warnings);
+      return;
+    case "status":
+      applyStatus(frame, value, headingLine, warnings);
+      return;
+    case "poster":
+      applyPoster(frame, value);
+      return;
+    case "src":
+      frame.src = value;
+      return;
+  }
+  if (TRANSITION_KEYS.has(key)) {
+    frame.transitionIn = value;
+    return;
+  }
+  if (SCENE_KEYS.has(key)) {
+    frame.scene = value;
+    return;
+  }
+  if (VOICEOVER_KEYS.has(key)) {
+    frame.voiceover = stripQuotes(value);
+    return;
+  }
+  frame.extra[key] = value;
+}
+
+function applyPoster(frame, value) {
+  const num = DURATION_NUM_RE.exec(value);
+  if (num) frame.poster = Number.parseFloat(num[1] ?? "");
+}
+
+function applyDuration(frame, value, headingLine, warnings) {
+  frame.duration = value;
+  const num = DURATION_NUM_RE.exec(value);
+  if (num) {
+    frame.durationSeconds = Number.parseFloat(num[1] ?? "");
+    return;
+  }
+  warnings.push({
+    message: `Frame ${frame.index}: could not parse duration "${value}".`,
+    line: headingLine,
+    frameIndex: frame.index,
+  });
+}
+
+function applyStatus(frame, value, headingLine, warnings) {
+  const normalized = value.toLowerCase();
+  if (isFrameStatus(normalized)) {
+    frame.status = normalized;
+    return;
+  }
+  frame.extra.status = value;
+  warnings.push({
+    message: `Frame ${frame.index}: unknown status "${value}"; defaulting to "${DEFAULT_FRAME_STATUS}".`,
+    line: headingLine,
+    frameIndex: frame.index,
+  });
+}
+
+function stripQuotes(value) {
+  if (value.length >= 2) {
+    const first = value[0];
+    const last = value[value.length - 1];
+    if ((first === '"' && last === '"') || (first === "'" && last === "'")) {
+      return value.slice(1, -1);
+    }
+  }
+  return value;
+}
diff --git a/.claude/skills-media/pr-to-video/scripts/lib/tokens.mjs b/.claude/skills-media/pr-to-video/scripts/lib/tokens.mjs
new file mode 100644
index 000000000..c2f332129
--- /dev/null
+++ b/.claude/skills-media/pr-to-video/scripts/lib/tokens.mjs
@@ -0,0 +1,211 @@
+// tokens.mjs — shared brand-token parsing + semantic role mapping for frame.md /
+// FRAME.md. Used by build-frame.mjs (remix a preset onto brand tokens) and
+// captions.mjs (derive caption colors from frame.md). One mapping → frames and
+// captions stay consistent. Pure node.
+
+// Collect `key: value` pairs under the top-level `colors:` block (until dedent).
+export function parseColors(md) {
+  const out = [];
+  let inBlock = false;
+  for (const line of md.split(/\r?\n/)) {
+    if (/^colors:\s*$/.test(line)) {
+      inBlock = true;
+      continue;
+    }
+    if (!inBlock) continue;
+    if (/^\S/.test(line)) break; // dedent to a top-level key → end of block
+    const m = line.match(
+      /^\s+([\w-]+):\s*(?:"([^"]+)"|'([^']+)'|(#[0-9a-fA-F]{3,8}|rgba?\([^)]*\)|[^#\s][^#\n]*?))\s*(?:#.*)?$/,
+    );
+    if (m) out.push([m[1], (m[2] ?? m[3] ?? m[4]).trim()]);
+  }
+  return out;
+}
+
+// relative luminance of a #rrggbb (null for non-hex like rgba()).
+export function lum(v) {
+  const m = /^#?([0-9a-fA-F]{6})$/.exec(String(v).trim());
+  if (!m) return null;
+  const n = parseInt(m[1], 16);
+  return 0.2126 * ((n >> 16) & 255) + 0.7152 * ((n >> 8) & 255) + 0.0722 * (n & 255);
+}
+
+// chroma (max−min channel) of a #rrggbb — a cheap "how colorful" proxy; −1 for non-hex.
+export function chroma(v) {
+  const m = /^#?([0-9a-fA-F]{6})$/.exec(String(v).trim());
+  if (!m) return -1;
+  const n = parseInt(m[1], 16);
+  const r = (n >> 16) & 255,
+    g = (n >> 8) & 255,
+    b = n & 255;
+  return Math.max(r, g, b) - Math.min(r, g, b);
+}
+
+// Browser user-agent default colors for links / visited links. These leak into a
+// capture from any UNSTYLED <a> and are NOT brand colors — but being pure & saturated
+// they beat a real accent on chroma alone. Never let one become the accent.
+export const UA_DEFAULT_COLORS = new Set(
+  ["#0000EE", "#0000FF", "#0000CC", "#1A0DAB", "#551A8B", "#EE0000"].map((c) => c.toUpperCase()),
+);
+
+// Semantic STATUS roles (green "positive", red "negative"/"error", amber "warning" …). Their HUE
+// carries the meaning, so they are never a brand ACCENT — a status red is frequently the most
+// chromatic color in a palette (e.g. #dc2626 chroma 182 beats a deep-blue accent #1E40AF chroma
+// 145) and would otherwise win a pure chroma ranking, painting captions/highlights the error red.
+// build-frame.mjs uses this same key set to protect status colors during the preset→brand remix.
+export const STATUS_ROLE_KEY =
+  /(?:^|[-_])(?:positive|negative|success|error|warning|danger|good|bad|up|down|info|neutral|alert|caution|critical)(?:[-_]|$)/i;
+
+// Pick the brand ACCENT — never by raw chroma alone, never a UA-default link color.
+// Priority:
+//   1) with capture colorStats → the colorful color that RECURS across the UI. The brand
+//      accent shows up in MANY roles (link text + icon + button + badge), whereas a one-off
+//      CTA fill appears in just one. So rank chromatic (chroma>40) candidates by role
+//      diversity first, then total prevalence, then interactive use, then chroma. This keeps
+//      a pervasive brand color (e.g. an indigo used everywhere) ahead of a single bright
+//      button fill (e.g. a lime used once) — the old "top interactiveBg" rule picked the
+//      latter. Requiring interactiveBg>0 is dropped so a text/icon-only accent can still win.
+//   2) no stats → most chromatic color AFTER removing UA defaults + `exclude`.
+// A stray default link color (e.g. #0000EE) can win under neither path.
+export function pickAccent(stats, colors, exclude = []) {
+  const ban = new Set([...exclude, ...UA_DEFAULT_COLORS].map((c) => String(c).toUpperCase()));
+  const ok = (h) => /^#[0-9a-fA-F]{6}$/.test(String(h)) && !ban.has(String(h).toUpperCase());
+  // Prominence rank from the (frequency-ordered) `colors` palette: index 0 = most used.
+  // A saturated color sitting at the TAIL is almost always a one-off (a single CTA fill),
+  // not the brand accent — capture colorStats counts are too sparse to tell these apart
+  // (e.g. Linear's indigo and a lime CTA both register count≈1), but palette ORDER does.
+  const rank = new Map((colors ?? []).map((h, i) => [String(h).toUpperCase(), i]));
+  const prom = (h) => (rank.has(String(h).toUpperCase()) ? rank.get(String(h).toUpperCase()) : 1e9);
+  if (Array.isArray(stats) && stats.length) {
+    const roles = (s) =>
+      ((s.interactiveBg || 0) > 0 ? 1 : 0) +
+      ((s.textCount || 0) > 0 ? 1 : 0) +
+      ((s.bgCount || 0) > 0 ? 1 : 0);
+    const a = stats
+      .filter((s) => ok(s?.hex) && chroma(s.hex) > 40)
+      .sort(
+        (x, y) =>
+          roles(y) - roles(x) || // used in MORE roles (link+icon+button) = the brand accent
+          prom(x.hex) - prom(y.hex) || // earlier in the palette = more prominent
+          (y.count || 0) - (x.count || 0) ||
+          (y.interactiveBg || 0) - (x.interactiveBg || 0) ||
+          chroma(y.hex) - chroma(x.hex),
+      );
+    if (a.length) return a[0].hex;
+  }
+  const c = (colors ?? [])
+    .map(String)
+    .filter(ok)
+    .sort((x, y) => chroma(y) - chroma(x));
+  return c[0];
+}
+
+// Derive brand roles from rich capture colorStats (areaBg / interactiveBg / textCount /
+// maxArea) — by semantic FUNCTION, not luminance/chroma proxies. Returns null when stats
+// are unusable, so the caller can fall back. canvas = the color painting the most real
+// background area (the page ground, dark or light); ink = the dominant text color that
+// actually contrasts with the canvas; accent via pickAccent.
+export function brandRolesFromStats(stats, colorsInOrder) {
+  if (!Array.isArray(stats) || !stats.length) return null;
+  const v = stats.filter((s) => /^#[0-9a-fA-F]{6}$/.test(s?.hex || ""));
+  if (!v.length) return null;
+  const canvas = [...v].sort(
+    (a, b) =>
+      (b.areaBg || 0) - (a.areaBg || 0) ||
+      (b.maxArea || 0) - (a.maxArea || 0) ||
+      (b.bgCount || 0) - (a.bgCount || 0),
+  )[0]?.hex;
+  // pass the frequency-ordered palette (tokens.colors) so pickAccent can use palette
+  // PROMINENCE — colorStats counts alone are too sparse to rank rare accents.
+  const accent = pickAccent(v, colorsInOrder ?? v.map((s) => s.hex), [canvas]);
+  if (!canvas || !accent) return null;
+  const cl = lum(canvas) ?? 0;
+  const ink =
+    [...v]
+      .filter((s) => s.hex !== canvas && s.hex !== accent)
+      .sort((a, b) => (b.textCount || 0) - (a.textCount || 0))
+      .find((s) => Math.abs((lum(s.hex) ?? 0) - cl) > 64)?.hex ??
+    (cl > 128 ? "#000000" : "#FFFFFF");
+  const accent2 =
+    pickAccent(v, colorsInOrder ?? v.map((s) => s.hex), [canvas, ink, accent]) ?? accent;
+  return { ink, canvas, accent, accent2 };
+}
+
+// Map a list of [key, value] colors to semantic roles. ink = a dark/ink-named
+// color (else darkest); canvas = a paper/cream/white-named color (else lightest);
+// accents = whatever's left, ranked by chroma (the loudest color is almost always
+// the brand accent) — UA-default link colors AND semantic status colors (positive/
+// negative/error…) excluded so neither a stray <a> color nor a status red ever wins.
+// For an unkeyed brand list, pass synthetic keys — name matching simply no-ops and it
+// falls back to luminance/chroma, which is what we want. NOTE: when capture colorStats
+// exist, prefer brandRolesFromStats() — it picks by function, not these proxies.
+export function semanticColors(colors) {
+  if (!colors.length) return {};
+  const named = (re) => colors.find(([k]) => re.test(k));
+  const hexes = colors.filter(([, v]) => lum(v) != null);
+  const byLum = [...hexes].sort((a, b) => (lum(a[1]) ?? 1e9) - (lum(b[1]) ?? 1e9));
+  const pick = (m, fallback) => (m ? m[1] : fallback ? fallback[1] : undefined);
+  // "ink" must be a whole word-segment so "soft-pink"/"pink" don't match it.
+  const ink = pick(
+    named(/(?:^|[-_])ink(?:[-_]|$)|black|charcoal|^text(?:-dark)?$|outline|noir/i),
+    byLum[0] ?? colors[0],
+  );
+  const canvas = pick(
+    named(/cream|paper|canvas|white|bg|ground|surface|base|sand|parchment|off-?white|bone/i),
+    byLum[byLum.length - 1] ?? colors[colors.length - 1],
+  );
+  const accents = colors
+    .filter(
+      ([k, v]) =>
+        v !== ink &&
+        v !== canvas &&
+        !UA_DEFAULT_COLORS.has(String(v).toUpperCase()) &&
+        !STATUS_ROLE_KEY.test(k), // a status red/green carries meaning by hue — never an accent
+    )
+    .sort((a, b) => chroma(b[1]) - chroma(a[1]))
+    .map(([, v]) => v);
+  return { ink, canvas, accent: accents[0] ?? ink, accent2: accents[1] ?? accents[0] ?? ink };
+}
+
+// Collect role→fontFamily under the top-level `typography:` block; pick a display
+// + body family from the usual role names. Returns quoted families (or null).
+export function parseFonts(md) {
+  const roles = {};
+  let inBlock = false;
+  for (const line of md.split(/\r?\n/)) {
+    if (/^typography:\s*$/.test(line)) {
+      inBlock = true;
+      continue;
+    }
+    if (!inBlock) continue;
+    if (/^\S/.test(line)) break;
+    const m = line.match(/^\s+([\w-]+):\s*\{[^}]*fontFamily:\s*"([^"]+)"/);
+    if (m) roles[m[1]] = m[2];
+  }
+  const q = (s) => (s ? `"${s}"` : null);
+  const body = roles.body ?? roles.subtitle ?? Object.values(roles)[0];
+  const display =
+    roles.display ??
+    roles.headline ??
+    roles["card-headline"] ??
+    roles["section-headline"] ??
+    roles["quote-display"] ??
+    roles.h1 ??
+    roles.h2 ??
+    roles.title ??
+    roles.hero ??
+    body;
+  // the monospace / chrome family (code, tags, ticks, page numbers) — so the remix can
+  // route a captured brand mono (Berkeley Mono, JetBrains Mono…) onto this role instead
+  // of the reading body. null when the preset has no distinct mono role.
+  const mono =
+    roles.mono ??
+    roles["mono-tag"] ??
+    roles["mono-chrome"] ??
+    roles["mono-tick"] ??
+    roles.code ??
+    roles.data ??
+    roles.pagenum ??
+    null;
+  return { display: q(display), body: q(body), mono: q(mono) };
+}
diff --git a/.claude/skills-media/pr-to-video/scripts/lib/transition-registry.mjs b/.claude/skills-media/pr-to-video/scripts/lib/transition-registry.mjs
new file mode 100644
index 000000000..a0451793a
--- /dev/null
+++ b/.claude/skills-media/pr-to-video/scripts/lib/transition-registry.mjs
@@ -0,0 +1,38 @@
+// transition-registry.mjs — loader for this skill's vendored transition registry
+// (./transitions.json). The registry is the curated Tier-B subset (transform /
+// opacity / filter on the two frame clip wrappers `#el-<id>`, no overlay DOM) +
+// each type's GSAP template. Vendored into the skill so it ships standalone; the
+// recipes originate from the shared catalog skills/hyperframes-animation/
+// transitions/ (css-*.md) — keep them in step if those shared recipes change.
+
+import { readFileSync } from "node:fs";
+import { resolve, dirname } from "node:path";
+import { fileURLToPath } from "node:url";
+
+const here = dirname(fileURLToPath(import.meta.url));
+export const DEFAULT_REGISTRY_PATH = resolve(here, "./transitions.json");
+
+let _cache = null;
+
+export function loadTransitionRegistry(registryPath = DEFAULT_REGISTRY_PATH) {
+  if (_cache && _cache.path === registryPath) return _cache.data;
+  let data;
+  try {
+    data = JSON.parse(readFileSync(registryPath, "utf8"));
+  } catch (e) {
+    throw new Error(`transition registry not loadable at ${registryPath}: ${e.message}`);
+  }
+  if (!Array.isArray(data.transitions) || data.transitions.length === 0) {
+    throw new Error(`transition registry ${registryPath} has no transitions[]`);
+  }
+  _cache = { path: registryPath, data };
+  return data;
+}
+
+// Convenience: a Map name -> transition record.
+export function transitionsByName(registryPath = DEFAULT_REGISTRY_PATH) {
+  const data = loadTransitionRegistry(registryPath);
+  const map = new Map();
+  for (const t of data.transitions) map.set(t.name, t);
+  return map;
+}
diff --git a/.claude/skills-media/pr-to-video/scripts/lib/transitions.json b/.claude/skills-media/pr-to-video/scripts/lib/transitions.json
new file mode 100644
index 000000000..ab1c4b9d7
--- /dev/null
+++ b/.claude/skills-media/pr-to-video/scripts/lib/transitions.json
@@ -0,0 +1,71 @@
+{
+  "_comment": "Vendored transition registry for the product-launch workflow — the curated Tier-B subset (transform/opacity/filter on the two frame clip wrappers #el-<id>, no overlay DOM, no per-frame cooperation). Each type carries its GSAP template; the transitions.mjs injector stamps it onto window.__timelines[\"main\"]. Recipes originate from the shared catalog skills/hyperframes-animation/transitions/ (css-*.md) — keep in step if those change. Token placeholders the injector substitutes: __OLD__ (#el-<from>), __NEW__ (#el-<to>), __T__ (overlap-start s), __DUR__ (this boundary's duration), __DX__/__DXIN__ (horizontal travel + incoming offset), __DY__/__DYIN__ (vertical).",
+  "transitions": [
+    {
+      "name": "crossfade",
+      "energy": "any",
+      "default_duration_s": 0.5,
+      "directions": [],
+      "source": "css-dissolve.md",
+      "gsap_template": [
+        "tl.to(__OLD__, { opacity: 0, duration: __DUR__, ease: \"power2.inOut\" }, __T__);",
+        "tl.fromTo(__NEW__, { opacity: 0 }, { opacity: 1, duration: __DUR__, ease: \"power2.inOut\" }, __T__);"
+      ]
+    },
+    {
+      "name": "blur-crossfade",
+      "energy": "calm",
+      "default_duration_s": 0.6,
+      "directions": [],
+      "source": "css-dissolve.md",
+      "note": "Default when the two frames' #root backgrounds differ a lot — the blur masks the background-color clash a plain crossfade would expose.",
+      "gsap_template": [
+        "tl.to(__OLD__, { filter: \"blur(10px)\", scale: 1.03, opacity: 0, duration: __DUR__, ease: \"power2.inOut\" }, __T__);",
+        "tl.fromTo(__NEW__, { filter: \"blur(10px)\", scale: 0.97, opacity: 0 }, { filter: \"blur(0px)\", scale: 1, opacity: 1, duration: __DUR__, ease: \"power2.inOut\" }, __T__);"
+      ]
+    },
+    {
+      "name": "push-slide",
+      "energy": "medium",
+      "default_duration_s": 0.5,
+      "directions": ["LEFT", "RIGHT", "UP", "DOWN"],
+      "default_direction": "LEFT",
+      "source": "css-push.md",
+      "note": "Directional. The injector picks __DX__/__DY__ from the direction and emits the horizontal OR vertical pair (not both).",
+      "gsap_template_horizontal": [
+        "tl.to(__OLD__, { x: __DX__, duration: __DUR__, ease: \"power3.inOut\" }, __T__);",
+        "tl.fromTo(__NEW__, { x: __DXIN__, opacity: 1 }, { x: 0, duration: __DUR__, ease: \"power3.inOut\" }, __T__);"
+      ],
+      "gsap_template_vertical": [
+        "tl.to(__OLD__, { y: __DY__, duration: __DUR__, ease: \"power3.inOut\" }, __T__);",
+        "tl.fromTo(__NEW__, { y: __DYIN__, opacity: 1 }, { y: 0, duration: __DUR__, ease: \"power3.inOut\" }, __T__);"
+      ]
+    },
+    {
+      "name": "zoom-through",
+      "energy": "high",
+      "default_duration_s": 0.4,
+      "directions": [],
+      "source": "css-scale.md",
+      "gsap_template": [
+        "tl.to(__OLD__, { scale: 2.5, opacity: 0, filter: \"blur(8px)\", duration: __DUR__, ease: \"power3.in\" }, __T__);",
+        "tl.fromTo(__NEW__, { scale: 0.5, opacity: 0, filter: \"blur(8px)\" }, { scale: 1, opacity: 1, filter: \"blur(0px)\", duration: __DUR__, ease: \"power3.out\" }, __T__);"
+      ]
+    },
+    {
+      "name": "squeeze",
+      "energy": "medium",
+      "default_duration_s": 0.4,
+      "directions": [],
+      "source": "css-push.md",
+      "note": "Old compresses to a vertical line on the left edge; new expands from the right edge. Incoming starts off (scaleX 0) so its higher-track stacking is harmless.",
+      "gsap_template": [
+        "tl.to(__OLD__, { scaleX: 0, transformOrigin: \"left center\", duration: __DUR__, ease: \"power3.inOut\" }, __T__);",
+        "tl.fromTo(__NEW__, { scaleX: 0, transformOrigin: \"right center\", opacity: 1 }, { scaleX: 1, transformOrigin: \"right center\", duration: __DUR__, ease: \"power3.inOut\" }, __T__);"
+      ]
+    }
+  ],
+  "default_high_energy": "zoom-through",
+  "default_calm": "blur-crossfade",
+  "max_duration_s": 2.0
+}
diff --git a/.claude/skills-media/pr-to-video/scripts/preflight.mjs b/.claude/skills-media/pr-to-video/scripts/preflight.mjs
new file mode 100644
index 000000000..0b5c967ea
--- /dev/null
+++ b/.claude/skills-media/pr-to-video/scripts/preflight.mjs
@@ -0,0 +1,38 @@
+#!/usr/bin/env node
+
+import { spawnSync } from "node:child_process";
+import { pathToFileURL } from "node:url";
+
+export function hasCliCommand(helpText, command) {
+  const escaped = command.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+  return new RegExp(`^\\s+${escaped}(?:\\s+|$)`, "m").test(String(helpText));
+}
+
+export function runCliPreflight({ command = "check", spawn = spawnSync } = {}) {
+  const result = spawn("npx", ["hyperframes", "--help"], {
+    encoding: "utf8",
+    shell: process.platform === "win32",
+  });
+  const output = `${result.stdout ?? ""}\n${result.stderr ?? ""}`;
+  if (result.status !== 0) {
+    throw new Error(`unable to inspect HyperFrames CLI capabilities\n${output.trim()}`);
+  }
+  if (!hasCliCommand(output, command)) {
+    throw new Error(
+      `the installed HyperFrames CLI does not provide \`${command}\`, but the current pr-to-video skill requires it. Upgrade the CLI before starting frame work.`,
+    );
+  }
+  return true;
+}
+
+function main() {
+  try {
+    runCliPreflight();
+    console.log("✓ pr-to-video preflight: required CLI capabilities are available");
+  } catch (error) {
+    console.error(`✗ pr-to-video preflight: ${error.message}`);
+    process.exit(1);
+  }
+}
+
+if (pathToFileURL(process.argv[1] ?? "").href === import.meta.url) main();
diff --git a/.claude/skills-media/pr-to-video/scripts/project-dir.mjs b/.claude/skills-media/pr-to-video/scripts/project-dir.mjs
new file mode 100644
index 000000000..b59bbb72b
--- /dev/null
+++ b/.claude/skills-media/pr-to-video/scripts/project-dir.mjs
@@ -0,0 +1,79 @@
+#!/usr/bin/env node
+
+import { homedir } from "node:os";
+import { join, resolve } from "node:path";
+import { pathToFileURL } from "node:url";
+
+function safeSegment(value) {
+  const normalized = value
+    .normalize("NFKD")
+    .toLowerCase()
+    .replace(/[^a-z0-9]+/g, "-")
+    .replace(/^-+|-+$/g, "");
+  if (!normalized || normalized === "." || normalized === "..") {
+    throw new Error("Invalid GitHub PR reference: owner/repository is empty after sanitization");
+  }
+  return normalized;
+}
+
+export function parsePrReference(raw) {
+  const input = String(raw ?? "").trim();
+  let match = input.match(/^https?:\/\/github\.com\/([^/]+)\/([^/]+)\/pull\/(\d+)(?:[/?#].*)?$/i);
+  if (!match) match = input.match(/^([A-Za-z0-9_.-]+)\/([A-Za-z0-9_.-]+)#(\d+)$/);
+  if (!match) {
+    throw new Error(`Invalid GitHub PR reference: ${JSON.stringify(input)}`);
+  }
+  const number = Number(match[3]);
+  if (!Number.isSafeInteger(number) || number <= 0) {
+    throw new Error(`Invalid GitHub PR reference: ${JSON.stringify(input)}`);
+  }
+  return { owner: safeSegment(match[1]), repo: safeSegment(match[2]), number };
+}
+
+export function resolvePrToVideoProjectDir({
+  pr,
+  explicitDir,
+  cwd = process.cwd(),
+  env = process.env,
+}) {
+  if (explicitDir?.trim()) return resolve(cwd, explicitDir.trim());
+  const ref = parsePrReference(pr);
+  const cacheRoot = env.XDG_CACHE_HOME?.trim()
+    ? resolve(env.XDG_CACHE_HOME)
+    : join(env.HOME?.trim() ? resolve(env.HOME) : homedir(), ".cache");
+  return join(
+    cacheRoot,
+    "hyperframes",
+    "pr-to-video",
+    ref.owner,
+    ref.repo,
+    `${ref.repo}-pr-${ref.number}`,
+  );
+}
+
+function flag(argv, name) {
+  const index = argv.indexOf(`--${name}`);
+  return index >= 0 ? argv[index + 1] : undefined;
+}
+
+function main() {
+  const argv = process.argv.slice(2);
+  const pr = flag(argv, "pr");
+  if (!pr) {
+    console.error('usage: node project-dir.mjs --pr "<github PR>" [--project-dir <path>]');
+    process.exit(2);
+  }
+  try {
+    console.log(
+      resolvePrToVideoProjectDir({
+        pr,
+        explicitDir: flag(argv, "project-dir") ?? process.env.PR_TO_VIDEO_PROJECT_DIR,
+      }),
+    );
+  } catch (error) {
+    console.error(`✗ project-dir: ${error.message}`);
+    process.exit(1);
+  }
+}
+
+if (pathToFileURL(process.argv[1] ?? "").href === import.meta.url) main();
diff --git a/.claude/skills-media/pr-to-video/scripts/transitions.mjs b/.claude/skills-media/pr-to-video/scripts/transitions.mjs
new file mode 100644
index 000000000..2c2c568ea
--- /dev/null
+++ b/.claude/skills-media/pr-to-video/scripts/transitions.mjs
@@ -0,0 +1,380 @@
+#!/usr/bin/env node
+// transitions.mjs — inter-frame transition injector + verifier for the video workflow.
+//
+//   inject  — read STORYBOARD frame order + each frame's transition_in, overlap
+//             the frame clip wrappers in index.html, and stamp the GSAP template.
+//   verify  — deterministic gate over the injector's output.
+//
+// transition_in (written by story-design on the INCOMING frame) names a registry
+// type directly: crossfade | blur-crossfade | push-slide | zoom-through | squeeze,
+// optionally "<type> <DIR>" / "<type> <N>s" (e.g. "push-slide LEFT", "crossfade
+// 0.4s"). `cut` / `none` / empty ⇒ hard cut (no overlap, no stamp).
+//
+// Mechanics — EXTEND-OUTGOING-ONLY (keeps voice/SFX/captions synced; their timing
+// is keyed to the original frame start). At boundary i→i+1 (type = the incoming
+// frame's transition_in): extend ONLY the outgoing wrapper's data-duration by
+// `dur` so it holds its final frame across the window; do NOT move any data-start;
+// the incoming — already present from the cut on a higher track — fades/pushes in
+// over it. Then 0/1-ping-pong ALL frame clips' data-track-index (adjacent
+// overlapping wrappers never share a track — lint timeline_track_too_dense) and
+// stamp the token-substituted GSAP template into __timelines["main"] at T =
+// incoming start. captions(2)/voice(10)/bgm(11)/sfx(20+) are never touched.
+//
+//   node transitions.mjs inject --storyboard ./STORYBOARD.md --hyperframes .
+//   node transitions.mjs verify --storyboard ./STORYBOARD.md --index ./index.html
+
+import { existsSync, readFileSync, writeFileSync } from "node:fs";
+import { join, resolve } from "node:path";
+import { parseStoryboard } from "./lib/storyboard.mjs";
+import { parseFormat } from "./lib/dimensions.mjs";
+import { loadTransitionRegistry, transitionsByName } from "./lib/transition-registry.mjs";
+import { padFrameInternalDuration } from "./lib/pad-frame-duration.mjs";
+
+const flag = (argv, name, def) => {
+  const i = argv.indexOf(`--${name}`);
+  return i >= 0 && i + 1 < argv.length ? argv[i + 1] : def;
+};
+const NO_TRANSITION = new Set(["cut", "none", ""]);
+const r3 = (x) => Number(x.toFixed(3));
+
+// transition_in → { type, direction?, dur? } | null (hard cut).
+function parseTransitionIn(raw) {
+  const s = (raw ?? "").trim();
+  if (NO_TRANSITION.has(s.toLowerCase())) return null;
+  const parts = s.split(/\s+/);
+  const spec = { type: parts[0].toLowerCase() };
+  for (const p of parts.slice(1)) {
+    const m = p.match(/^(\d+(?:\.\d+)?)s?$/);
+    if (m) spec.dur = Number(m[1]);
+    else spec.direction = p.toUpperCase();
+  }
+  return spec;
+}
+
+// Mounted STORYBOARD frames present in index.html, in document order: { id, frame }.
+function mountedFramesInOrder(manifest, html) {
+  const out = [];
+  for (const f of manifest.frames) {
+    if (!f.src) continue;
+    const id = f.src
+      .split("/")
+      .pop()
+      .replace(/\.html?$/i, "");
+    if (html.includes(`id="el-${id}"`)) out.push({ id, frame: f });
+  }
+  return out;
+}
+
+// Frame clip wrappers parsed out of index.html (ids carry hyphens; excludes
+// el-captions and audio by keying off the known frame-id set). The id is matched
+// from anywhere in the tag's attribute list — never assume it is the first attribute
+// (the index assembler emits data-hf-id before id, so an id-first regex finds nothing
+// and inject crashes on the empty clip map).
+function parseFrameClips(html, frameIds) {
+  const clipRe = /<div\b([^>]*)><\/div>/g;
+  const clips = new Map();
+  let m;
+  while ((m = clipRe.exec(html)) !== null) {
+    const attrs = m[1];
+    const idm = attrs.match(/\bid="el-([A-Za-z0-9_-]+)"/);
+    if (!idm || !frameIds.has(idm[1])) continue;
+    const num = (re) => {
+      const x = attrs.match(re);
+      return x ? Number(x[1]) : null;
+    };
+    clips.set(idm[1], {
+      id: idm[1],
+      block: m[0],
+      start: num(/data-start="([\d.]+)"/),
+      duration: num(/data-duration="([\d.]+)"/),
+      track: num(/data-track-index="(\d+)"/) ?? 0,
+    });
+  }
+  return clips;
+}
+
+// The host wrapper is extended across an outgoing transition, so the mounted
+// frame must remain visually populated for the same local-time window. Extend
+// the frame root and every non-audio timed element that reached the original
+// storyboard boundary. This also repairs worker files whose root was already
+// inflated while their ground/content clips still ended at the synced duration.
+function extendFrameTail(hyperframesDir, frame, baseDuration, targetDuration, die) {
+  if (!frame?.src || targetDuration <= baseDuration) return;
+  const framePath = join(hyperframesDir, frame.src);
+  let html;
+  try {
+    html = readFileSync(framePath, "utf8");
+  } catch {
+    die(`outgoing frame file not found at ${framePath}`);
+  }
+
+  const compId = frame.src
+    .split("/")
+    .pop()
+    .replace(/\.html?$/i, "");
+  const EPS = 0.011;
+  let foundRoot = false;
+  let extended = 0;
+  const rewritten = html.replace(/<([A-Za-z][\w:-]*)\b([^>]*)>/g, (tag, name, attrs) => {
+    const durationMatch = attrs.match(/\bdata-duration="([\d.]+)"/);
+    if (!durationMatch) return tag;
+    const duration = Number(durationMatch[1]);
+    if (!Number.isFinite(duration)) return tag;
+
+    const compositionMatch = attrs.match(/\bdata-composition-id="([^"]+)"/);
+    if (compositionMatch?.[1] === compId && !foundRoot) {
+      foundRoot = true;
+      return tag.replace(/\bdata-duration="[\d.]+"/, `data-duration="${targetDuration}"`);
+    }
+
+    if (name.toLowerCase() === "audio") return tag;
+    const startMatch = attrs.match(/\bdata-start="([\d.]+)"/);
+    if (!startMatch) return tag;
+    const start = Number(startMatch[1]);
+    const end = start + duration;
+    if (end < baseDuration - EPS || end >= targetDuration - EPS) return tag;
+    extended++;
+    return tag.replace(/\bdata-duration="[\d.]+"/, `data-duration="${r3(targetDuration - start)}"`);
+  });
+
+  if (!foundRoot) die(`${frame.src} has no data-composition-id="${compId}" root`);
+  writeFileSync(framePath, rewritten);
+  console.log(
+    `  ${compId}: extended root + ${extended} tail clip(s) ${baseDuration}s→${targetDuration}s`,
+  );
+}
+
+// Resolve a transition_in spec to a registry record (calm default on unknown).
+function resolveRecord(spec, byName, reg, warn) {
+  let rec = byName.get(spec.type);
+  if (!rec) {
+    rec = byName.get(reg.default_calm);
+    warn(`transition_in "${spec.type}" not in registry — using ${reg.default_calm}`);
+  }
+  return rec;
+}
+function resolveDur(spec, rec, reg) {
+  let dur = spec.dur ?? rec.default_duration_s ?? 0.5;
+  return Math.min(dur, reg.max_duration_s ?? 2.0);
+}
+
+// GSAP lines for one transition record (token substitution).
+function buildGsap(rec, fromId, toId, dur, T, direction, canvasW, canvasH, die) {
+  const subs = {
+    __OLD__: `"#el-${fromId}"`,
+    __NEW__: `"#el-${toId}"`,
+    __T__: String(T),
+    __DUR__: String(dur),
+  };
+  let template;
+  if (rec.directions && rec.directions.length > 0) {
+    const dir = (direction || rec.default_direction || rec.directions[0]).toUpperCase();
+    const vertical = dir === "UP" || dir === "DOWN";
+    template = vertical ? rec.gsap_template_vertical : rec.gsap_template_horizontal;
+    if (!template)
+      die(`transition ${rec.name}: missing ${vertical ? "vertical" : "horizontal"} template`);
+    if (vertical) {
+      const dy = dir === "UP" ? -canvasH : canvasH;
+      subs.__DY__ = String(dy);
+      subs.__DYIN__ = String(-dy);
+    } else {
+      const dx = dir === "LEFT" ? -canvasW : canvasW;
+      subs.__DX__ = String(dx);
+      subs.__DXIN__ = String(-dx);
+    }
+  } else {
+    template = rec.gsap_template;
+    if (!template) die(`transition ${rec.name}: missing gsap_template`);
+  }
+  return template.map((line) => {
+    let out = line;
+    for (const [k, v] of Object.entries(subs)) out = out.split(k).join(v);
+    return out;
+  });
+}
+
+function runInject(argv) {
+  const hyperframesDir = resolve(flag(argv, "hyperframes", "."));
+  const storyboardPath = resolve(flag(argv, "storyboard", join(hyperframesDir, "STORYBOARD.md")));
+  const indexPath = join(hyperframesDir, "index.html");
+  const die = (msg) => {
+    console.error(`✗ transitions inject: ${msg}`);
+    process.exit(1);
+  };
+
+  if (!existsSync(storyboardPath)) die(`STORYBOARD.md not found at ${storyboardPath}`);
+
+  const manifest = parseStoryboard(readFileSync(storyboardPath, "utf8"));
+  const { width: CW, height: CH } = parseFormat(manifest.globals.format);
+  const reg = loadTransitionRegistry();
+  const byName = transitionsByName();
+
+  // Read directly and handle ENOENT here, rather than an existsSync precheck —
+  // the check→write pair (write-back below) is a TOCTOU race CodeQL flags.
+  let html = "";
+  try {
+    html = readFileSync(indexPath, "utf8");
+  } catch {
+    die(`index.html not found at ${indexPath} — run assemble-index.mjs first`);
+  }
+  const order = mountedFramesInOrder(manifest, html);
+  if (order.length === 0) die("no frame clips found in index.html");
+  const frameIds = new Set(order.map((x) => x.id));
+  const clips = parseFrameClips(html, frameIds);
+
+  const gsapLines = [];
+  const applied = [];
+  for (let i = 1; i < order.length; i++) {
+    const spec = parseTransitionIn(order[i].frame.transitionIn);
+    if (!spec) continue; // hard cut
+    const incoming = clips.get(order[i].id);
+    const outgoing = clips.get(order[i - 1].id);
+    const rec = resolveRecord(spec, byName, reg, (m) =>
+      console.error(`  ! frame ${order[i].id}: ${m}`),
+    );
+    const dur = resolveDur(spec, rec, reg);
+    const T = r3(incoming.start); // cut = incoming start (frames tile)
+    const baseDuration = outgoing.duration;
+    outgoing.duration = r3(baseDuration + dur); // extend outgoing only
+    extendFrameTail(hyperframesDir, order[i - 1].frame, baseDuration, outgoing.duration, die);
+    padFrameInternalDuration(
+      hyperframesDir,
+      order[i - 1].frame.src,
+      outgoing.id,
+      outgoing.duration,
+    );
+    gsapLines.push(
+      ...buildGsap(rec, outgoing.id, incoming.id, dur, T, spec.direction, CW, CH, die),
+    );
+    applied.push({ from: outgoing.id, to: incoming.id, type: rec.name, dur, T });
+  }
+
+  if (applied.length === 0) {
+    console.log(`✓ transitions inject: 0 transitions (all cuts) — index.html unchanged`);
+    return;
+  }
+
+  // 0/1 ping-pong all frame clips in play order.
+  const ordered = [...clips.values()].sort((a, b) => a.start - b.start || a.id.localeCompare(b.id));
+  ordered.forEach((c, i) => {
+    c.track = i % 2;
+  });
+
+  // rewrite each clip block: start unchanged; duration possibly extended; track ping-ponged.
+  for (const c of clips.values()) {
+    const nb = c.block
+      .replace(/data-duration="[\d.]+"/, `data-duration="${c.duration}"`)
+      .replace(/data-track-index="\d+"/, `data-track-index="${c.track}"`);
+    html = html.replace(c.block, nb);
+  }
+
+  // stamp the GSAP after the master timeline anchor.
+  const anchor = 'window.__timelines["main"] = gsap.timeline({ paused: true });';
+  if (!html.includes(anchor)) die("master timeline anchor not found in index.html");
+  // The transition tweens alone leave window.__timelines["main"] spanning only the
+  // last transition (e.g. 24.7s), shorter than the real composition. The Studio
+  // reads main.duration() as its master duration and parses clips against it, so a
+  // short master collapses its timeline (clips dropped, duration wrong, blank stage)
+  // — the render engine is unaffected (it trusts the root data-duration attr). Stamp
+  // a full-span anchor so main.duration() == composition total. Mirrors the
+  // `tl.to({}, { duration })` anchor captions.html already uses.
+  const rootDurMatch = html.match(/data-composition-id="main"[^>]*?data-duration="([\d.]+)"/);
+  const totalDur = rootDurMatch ? Number(rootDurMatch[1]) : null;
+  const block = [
+    anchor,
+    "      // ── frame transitions (injected by transitions.mjs) ──",
+    '      (function () { var tl = window.__timelines["main"];',
+    ...gsapLines.map((l) => "        " + l),
+    ...(totalDur
+      ? [
+          `        tl.to({}, { duration: ${totalDur} }, 0); // full-span anchor — main.duration() == composition total (Studio master duration)`,
+        ]
+      : []),
+    "      })();",
+  ].join("\n");
+  html = html.replace(anchor, block);
+
+  writeFileSync(indexPath, html);
+  console.log(`✓ transitions inject: ${applied.length} transition(s) stamped into index.html`);
+  for (const a of applied) console.log(`  ${a.from}→${a.to}: ${a.type} ${a.dur}s @ T=${a.T}s`);
+  const tracks = ordered
+    .map((c) => `${c.id}[t${c.track} ${c.start}→${r3(c.start + c.duration)}]`)
+    .join(" ");
+  console.log(`  tracks: ${tracks}`);
+}
+
+function runVerify(argv) {
+  const hyperframesDir = resolve(flag(argv, "hyperframes", "."));
+  const storyboardPath = resolve(flag(argv, "storyboard", join(hyperframesDir, "STORYBOARD.md")));
+  const indexPath = resolve(flag(argv, "index", join(hyperframesDir, "index.html")));
+  const bail = (msg) => {
+    console.error(`✗ transitions verify: ${msg}`);
+    process.exit(1);
+  };
+
+  if (!existsSync(storyboardPath)) bail("STORYBOARD.md not found");
+  if (!existsSync(indexPath)) bail("index.html not found");
+
+  const manifest = parseStoryboard(readFileSync(storyboardPath, "utf8"));
+  const html = readFileSync(indexPath, "utf8");
+  const order = mountedFramesInOrder(manifest, html);
+  const frameIds = new Set(order.map((x) => x.id));
+  const clips = parseFrameClips(html, frameIds);
+
+  const EPS = 0.011;
+  const overlaps = (a, b) =>
+    a.start < b.start + b.duration - EPS && b.start < a.start + a.duration - EPS;
+  const fail = [];
+
+  // (4) global no same-track overlap (the lint invariant).
+  const all = [...clips.values()];
+  for (let i = 0; i < all.length; i++)
+    for (let j = i + 1; j < all.length; j++) {
+      const a = all[i];
+      const b = all[j];
+      if (a.track === b.track && overlaps(a, b))
+        fail.push(`same-track overlap: ${a.id}[t${a.track}] & ${b.id}[t${b.track}]`);
+    }
+
+  const bm = html.match(/frame transitions \(injected[\s\S]*?\}\)\(\);/);
+  const txBlock = bm ? bm[0] : "";
+
+  let expected = 0;
+  for (let i = 1; i < order.length; i++) {
+    const spec = parseTransitionIn(order[i].frame.transitionIn);
+    if (!spec) continue;
+    expected++;
+    const to = clips.get(order[i].id);
+    const from = clips.get(order[i - 1].id);
+    if (!to || !from) {
+      fail.push(`boundary ${order[i - 1].id}→${order[i].id}: wrapper missing`);
+      continue;
+    }
+    if (!txBlock.includes(`"#el-${from.id}"`) || !txBlock.includes(`"#el-${to.id}"`))
+      fail.push(`boundary ${from.id}→${to.id}: injected block does not reference both ids`);
+    const overlapAmt = r3(from.start + from.duration - to.start);
+    if (overlapAmt <= 0) fail.push(`boundary ${from.id}→${to.id}: no overlap (${overlapAmt}s)`);
+    if (from.track === to.track)
+      fail.push(`boundary ${from.id}→${to.id}: both on track ${from.track}`);
+  }
+  if (expected > 0 && !txBlock)
+    fail.push(`${expected} transition(s) expected but no injected block found`);
+
+  if (fail.length) {
+    console.error(`✗ transitions verify: ${fail.length} failure(s):`);
+    for (const f of fail) console.error(`  - ${f}`);
+    process.exit(1);
+  }
+  console.log(
+    `✓ transitions verify: ${expected} transition(s) verified (cross-track, overlap>0, both ids referenced, no same-track overlap)`,
+  );
+}
+
+const sub = process.argv[2];
+const rest = process.argv.slice(3);
+if (sub === "inject") runInject(rest);
+else if (sub === "verify") runVerify(rest);
+else {
+  console.error("usage: node transitions.mjs <inject|verify> [args...]");
+  process.exit(2);
+}
diff --git a/.claude/skills-media/pr-to-video/scripts/workflow-guardrails.test.mjs b/.claude/skills-media/pr-to-video/scripts/workflow-guardrails.test.mjs
new file mode 100644
index 000000000..d3112e015
--- /dev/null
+++ b/.claude/skills-media/pr-to-video/scripts/workflow-guardrails.test.mjs
@@ -0,0 +1,146 @@
+import assert from "node:assert/strict";
+import { existsSync, mkdtempSync, mkdirSync, readFileSync, writeFileSync } from "node:fs";
+import { homedir, tmpdir } from "node:os";
+import { dirname, isAbsolute, join, relative, resolve } from "node:path";
+import test from "node:test";
+
+import { parsePrReference, resolvePrToVideoProjectDir } from "./project-dir.mjs";
+import { buildFramePackets } from "./frame-packets.mjs";
+import { hasCliCommand } from "./preflight.mjs";
+
+function write(path, contents) {
+  mkdirSync(dirname(path), { recursive: true });
+  writeFileSync(path, contents);
+}
+
+test("default project directory is durable and outside the caller repository", () => {
+  const caller = mkdtempSync(join(tmpdir(), "p2v-caller-"));
+  const cache = mkdtempSync(join(tmpdir(), "p2v-cache-"));
+  const result = resolvePrToVideoProjectDir({
+    pr: "https://github.com/EveryInc/compound-engineering-plugin/pull/1092",
+    cwd: caller,
+    env: { XDG_CACHE_HOME: cache, HOME: homedir() },
+  });
+
+  assert.equal(
+    result,
+    join(
+      cache,
+      "hyperframes",
+      "pr-to-video",
+      "everyinc",
+      "compound-engineering-plugin",
+      "compound-engineering-plugin-pr-1092",
+    ),
+  );
+  assert.ok(isAbsolute(result));
+  assert.ok(relative(caller, result).startsWith(".."));
+});
+
+test("explicit project directory is preserved exactly after absolute resolution", () => {
+  const caller = mkdtempSync(join(tmpdir(), "p2v-explicit-caller-"));
+  assert.equal(
+    resolvePrToVideoProjectDir({
+      pr: "EveryInc/compound-engineering-plugin#1092",
+      cwd: caller,
+      explicitDir: "../my-video",
+      env: {},
+    }),
+    resolve(caller, "../my-video"),
+  );
+});
+
+test("distinct owner and repository segments cannot collide in the durable cache", () => {
+  const cache = mkdtempSync(join(tmpdir(), "p2v-cache-collision-"));
+  const first = resolvePrToVideoProjectDir({
+    pr: "foo-bar/baz#1",
+    env: { XDG_CACHE_HOME: cache },
+  });
+  const second = resolvePrToVideoProjectDir({
+    pr: "foo/bar-baz#1",
+    env: { XDG_CACHE_HOME: cache },
+  });
+
+  assert.notEqual(first, second);
+});
+
+test("PR parsing sanitizes owner and repository path traversal", () => {
+  assert.deepEqual(
+    parsePrReference("https://github.com/EveryInc/compound-engineering-plugin/pull/1092"),
+    {
+      owner: "everyinc",
+      repo: "compound-engineering-plugin",
+      number: 1092,
+    },
+  );
+  assert.throws(() => parsePrReference("../../outside#1092"), /valid GitHub PR reference/i);
+});
+
+test("#1092 packets contain selected excerpts but never the full diff", () => {
+  const project = mkdtempSync(join(tmpdir(), "p2v-packets-"));
+  const largeDiff = `diff --git a/noise b/noise\n${"+unselected noise\n".repeat(10_000)}`;
+  write(join(project, "capture", "diff.patch"), largeDiff);
+  write(join(project, "frame.md"), "# compact frame tokens\n");
+  write(
+    join(project, "STORYBOARD.md"),
+    `---\nformat: 1920x1080\n---\n\n## Frame 1 — Diff\n\n- duration: 4s\n- src: compositions/frames/01-diff.html\n- focal: code-diff\n- blueprint: compose\n- rules: text-reveal\n\n### Source excerpt\n\n\`\`\`diff\n-oldCall()\n+newCall({ attested: true })\n\`\`\`\n\n## Frame 2 — Impact\n\n- duration: 3s\n- src: compositions/frames/02-impact.html\n- blueprint: number-lockup\n- rules: counting-dynamic-scale\n`,
+  );
+
+  const result = buildFramePackets({
+    projectDir: project,
+    storyboardPath: join(project, "STORYBOARD.md"),
+    outDir: join(project, ".hyperframes", "frame-packets"),
+    maxPacketBytes: 32_000,
+  });
+
+  assert.equal(result.length, 2);
+  const codePacket = readFileSync(result[0].path, "utf8");
+  assert.match(codePacket, /newCall\(\{ attested: true \}\)/);
+  assert.doesNotMatch(codePacket, /unselected noise/);
+  assert.doesNotMatch(codePacket, /code-scroll/);
+  assert.ok(Buffer.byteLength(codePacket) < 32_000);
+  assert.ok(result.every((packet) => packet.path.endsWith(".md")));
+});
+
+test("packet validation is atomic and leaves no partial output on overflow", () => {
+  const project = mkdtempSync(join(tmpdir(), "p2v-packets-atomic-"));
+  const outDir = join(project, ".hyperframes", "frame-packets");
+  write(join(project, "frame.md"), "# frame\n");
+  write(
+    join(project, "STORYBOARD.md"),
+    `---\nformat: 1920x1080\n---\n\n## Frame 1 — Intro\n\n- duration: 2s\n- src: compositions/frames/01-intro.html\n\n## Frame 2 — Diff\n\n- duration: 4s\n- src: compositions/frames/02-diff.html\n- focal: code-diff\n\n### Source excerpt\n\n\`\`\`diff\n${"+oversized line\n".repeat(300)}\`\`\`\n`,
+  );
+
+  assert.throws(
+    () => buildFramePackets({ projectDir: project, outDir, maxPacketBytes: 2_000 }),
+    /limit 2000/,
+  );
+  assert.equal(existsSync(outDir), false);
+});
+
+test("code frames without an upstream-selected excerpt fail before dispatch", () => {
+  const project = mkdtempSync(join(tmpdir(), "p2v-packets-missing-"));
+  write(join(project, "frame.md"), "# frame\n");
+  write(
+    join(project, "STORYBOARD.md"),
+    `---\nformat: 1920x1080\n---\n\n## Frame 1 — Diff\n\n- duration: 4s\n- src: compositions/frames/01-diff.html\n- focal: code-diff\n`,
+  );
+
+  assert.throws(
+    () =>
+      buildFramePackets({
+        projectDir: project,
+        storyboardPath: join(project, "STORYBOARD.md"),
+        outDir: join(project, ".hyperframes", "frame-packets"),
+      }),
+    /Source excerpt/i,
+  );
+});
+
+test("CLI capability detection rejects skills newer than the available command surface", () => {
+  const stableHelp = `Project:\n  lint  Validate a composition\n  snapshot  Capture frames\n\nUnknown command check`;
+  const currentHelp = `Project:\n  lint  Validate a composition\n  check Run the full project validation gate\n  snapshot  Capture frames`;
+
+  assert.equal(hasCliCommand(stableHelp, "check"), false);
+  assert.equal(hasCliCommand(currentHelp, "check"), true);
+});
diff --git a/.claude/skills-media/pr-to-video/sub-agents/frame-worker.md b/.claude/skills-media/pr-to-video/sub-agents/frame-worker.md
new file mode 100644
index 000000000..6e2d52db5
--- /dev/null
+++ b/.claude/skills-media/pr-to-video/sub-agents/frame-worker.md
@@ -0,0 +1,101 @@
+# Frame worker — PR-to-video per-frame composition author
+
+> You build the small batch of frame composition files assigned to you and nothing else. At most three workers run; each reads shared context once, then builds its packet paths sequentially. The **structural composition contract** is compacted into each packet. This file carries only what's specific to a PR-to-video frame.
+
+**INPUT** — your dispatch context provides `PROJECT_DIR` plus one or more bounded packet paths under `.hyperframes/frame-packets/`. Read shared `frame.md` once, then process the packets in order. Never open the full `STORYBOARD.md`, `capture/diff.patch`, or `capture/extracted/visible-text.txt`; the orchestrator already selected the exact source excerpt and put it in each code frame's packet.
+
+Each packet provides:
+
+- `PROJECT_DIR` — the project root; all paths are relative to it.
+- `frame_id` — e.g. `04-the-fix`. Use it **verbatim** as the composition id, the `window.__timelines` key, and the file name (`compositions/frames/04-the-fix.html`) — that path **is** the frame's `src` in `STORYBOARD.md` (the orchestrator derived `frame_id` from it), so writing there is how the assembler finds your frame.
+- Your exact **`## Frame N` block** (already extracted from `STORYBOARD.md`; never write to that file — see below):
+  - `scene` — a one-line contact-sheet caption. **Design intent, never visible DOM text.**
+  - `voiceover` — the narration line. **Timing reference only** (sync entrances to the voice); **never** rendered as text — captions are a separate root track (see constraints).
+  - `duration` — your render length in seconds. **Fixed upstream; never change it or tween to fill a different length.**
+  - `transition_in` — informational. The injector stamps it at the root; **you do not author transitions.**
+  - the **time-coded shot sequence** — your build spec. A sequence of Scene lines (`Scene 1 (0.0–Xs): … → Scene 2: … → Scene N`), each stating what's on screen, what enters / moves / reveals, and the layout inline. Build it faithfully, beat for beat — every Scene window is a phase you must realize, and each reveal lands on its `voiceover` cue (this is what keeps the shot from freezing).
+  - `blueprint:` — an id (or the literal `compose`). The id points to `../hyperframes-animation/blueprints/<id>.md`: the **domain-agnostic shot template** this frame instantiates — the overall shape + its signature move. Read it for the shape; `compose` means there's no template (common for a code beat — the `code-*` block is the shape), sequence the shot from the Scene lines directly.
+  - `focal:` — for a concept/mechanism beat, which **invented** element is the hero; for a **code beat**, the named **`code-*` block** (+ the hunk); for the **credits** close, the avatar row.
+  - `roles:` — each element's role: `foreground subject` / `background` full-bleed / `supporting`. Most are invented elements you design; the only real assets are the credits `assets/<login>.png` avatars.
+  - `sfx:` — the orchestrator's; you mount no audio.
+- `frame.md` (project root) — the **design-truth**: palette (claude), type ramp, components, composition rules. The LOOK. Pull every visual token from here.
+- `RULES_DIR` — absolute path to this skill's local `../hyperframes-animation/rules/`. The **named motion verbs in the Scene lines** (and the moves the blueprint cites) resolve to rule recipes here: `RULES_DIR/<id>.md` is the mechanics for a motion. The blueprint templates are the sibling `../hyperframes-animation/blueprints/<id>.md`; an optional runnable demo is `../hyperframes-animation/examples/<id>.html`.
+- `code-vocabulary.md` — absolute path provided in your dispatch. For a **code beat**, read it for the named `code-*` block's exact inputs (`window.__TOKENS`, `window.__BLOCK`, line indexing).
+- `../references/cut-catalog.md` — the **cut catalog** (zoom-through / inverse / cut-the-curve / waterfall) for a within-frame seam. You never author the between-frame transition — story's `transition_in` + the injector own that.
+- Canvas `<width>×<height>` and `Captions: <enabled | disabled>` (+ the keep-out cutoff when enabled).
+
+**Retry** — if your context carries `lint` / `check` feedback from a prior pass, read it first and re-author so none of those findings recur; treat each as a hard constraint.
+
+**OUTPUT** — one `compositions/frames/<frame_id>.html` per assigned packet, each a bare template fragment. The first non-whitespace bytes are `<template`; the last are `</template>`. Never emit `<!doctype>`, `<html>`, `<head>`, `<body>`, or any markup outside that single template. After the last assigned file passes the self-check, stop — you do not edit `STORYBOARD.md`, mint audio, assemble the index, run the CLI, or report back. The orchestrator validates the files before assembly and marks their `status`.
+
+## When a confirmed sketch exists
+
+In collaborative runs the orchestrator wireframes the board first, so your target file may already exist as the frame's **user-confirmed wireframe** — your dispatch says whether it does (a file found on a retry is your own prior output, not a sketch). Read it first and **keep its composition**: the placement, hierarchy, and copy were approved — don't move or drop them. Everything else is yours to finish: the full `frame.md` treatment (the sketch is deliberately unstyled), the `code-*` block where the sketch held plain code, the finished invented visuals where it used plain blocks, and the motion — map each Scene onto a timeline phase, reveal each piece on its `voiceover` cue with `fromTo` entrances, adding DOM only where a phase needs it. The frame's landed state must still read as the approved wireframe, fully dressed.
+
+## Mostly invented — you build the visual (except code blocks + the credits avatars)
+
+A PR video is **mostly invented**: there are **no screenshots and no captured UI**. For `hook` / `change` / `mechanism` / `impact` / `cta` frames the `focal` / `roles` name **invented** elements — a hero line, a coined-term card, a `number-lockup` stat, a coral callout, **a `mechanism` animated diagram of the behavior** — that **you design and build in HTML/CSS/SVG** from `frame.md`. Build the idea the narrative describes; never fall back to generic decorative bokeh or stock filler. Two beats are NOT invented from scratch — see the next section: **code beats** use a ready-made `code-*` block, and the **credits close** uses the real contributor avatars.
+
+## PR code beats, mechanism beats + the credits close
+
+- **Code beats (`diff` / `before_after` / a new-code reveal) — use the named `code-*` block, don't hand-build code motion.** Your `## Frame N` `scene` / `focal` names which block (e.g. `code-diff`, `code-morph`, `code-typing`); the orchestrator has already installed it (Step 5 pre-install). Read **`code-vocabulary.md`** (path in your dispatch) for that block's exact inputs, then:
+  - Use only the packet's `### Source excerpt`. It is the real before/after hunk selected upstream. Never reopen the full diff or brief.
+  - Fill the block's `window.__TOKENS` with that real code (the baked Shiki tokens) and set `window.__BLOCK` (effect, `line`, `duration`) **so the full block completes within the frame's `data-duration`** — a long snippet at the block's default per-character cadence overruns a short frame (the code never finishes typing). `code-diff` / `code-morph` need **2 states** (before, after); the others take one. **Line indexing differs — `code-highlight` is 0-based, `code-scroll` 1-based** — don't off-by-one.
+  - Integrate the filled block as **this frame's composition** per `hyperframes-core`'s sub-composition contract: its `data-composition-id` and its `window.__timelines[...]` key must both be your **`<frame_id>`** (the block ships its own id + paused timeline; rename both to match the frame contract). The block already renders an editor window (titlebar / filename) reading as claude's navy **Code Surface** — set the filename + any `+N/−M` chrome from the `scene`.
+  - **The block owns the code animation; your Scene windows choreograph the surrounding Code Surface** — the navy window seating in, the file header typing on, the camera settling onto the hunk, a coral underline on the landed line. **Do not re-specify the code motion** (the block is the development beat). A code beat is usually `blueprint: compose`.
+  - **The block has no caption-safe band.** When `Captions: enabled`, inset/scale the code panel into the top ~83% so it clears the keep-out band; never let code run under the caption pill.
+- **Mechanism beats (`mechanism`) — build an invented animated diagram of the behavior; the build _is_ the shot.** This is the "show what the change does at runtime" frame (the request retrying, the cache filling, serial→parallel, the race resolved) — read its `scene` for the behavior to animate. Unlike a code beat, **the motion is yours to author** (no block owns it):
+  - If the `scene` names a `flowchart` / `flowchart-vertical` / `data-chart` block, the orchestrator pre-installed it — fill + mount it like a code block (its `data-composition-id` and `window.__timelines[...]` key both become your `<frame_id>`). Otherwise **hand-build the diagram in SVG / HTML / GSAP** from `frame.md`'s atoms.
+  - **Claude register:** hairline-ink nodes / edges / lanes on the cream ground, **one coral marker** on the active / changed element, mono labels — **not** the navy code surface (that's for code), no heavy shapes / bokeh.
+  - **Choreograph the Scene windows:** the nodes / lanes draw on (Scene 1); **the flow runs** as the VO names each step (middle Scenes — the request hops, the lane splits, the front advances, the bars race) — this _is_ the teaching, so it must play across the shot, never enter-then-freeze; the resolved state + the one coral emphasis lands (final Scene). Keep it in the top ~83% (caption keep-out).
+- **The `credits` close — the one frame with real assets.** Its `asset_candidates` names 2–6 `assets/<login>.png` avatars (downloaded in Step 1). Render them as `<img>` in hairline-ringed chips — an avatar row with each contributor's name + role in mono (an "approved" mark if the close calls for it), staggered in across the Scene windows. Avatars appear **only** here, never decorating a code frame.
+
+## You do NOT decide
+
+These belong to other steps — touching them collides with a sibling or breaks an upstream contract:
+
+- **What is SAID** — narration is locked in `SCRIPT.md` / the `voiceover` line. You only show; you never write or restate narration text.
+- **Duration** — fixed from real voice timing. Build your shot to land within it; don't stretch or trim it.
+- **Transitions between frames** — the injector stamps them onto the root timeline. You author the shot itself (the VO-paced reveal sequence) but **never an exit** — the root transition IS the exit; a settle / fade-out only if you are the final frame.
+- **Audio** (narration / BGM / SFX) — assembled at the root by the orchestrator. **No `<audio>` element in your composition.**
+- **Design tokens** — palette / fonts / components come from `frame.md`. Don't invent them, and **never lift a word, label, or wordmark out of `frame.md` as your copy** — it is a style spec, not content. Visible text comes from your frame's `scene` / narrative (and the real code, for a code beat).
+- **Which motions exist** — named upstream in your block (the shot sequence's motion verbs + `blueprint:` + the `code-*` block). Implement them; don't invent new ones.
+- **The shared `STORYBOARD.md`** — read your block, never write it. N siblings edit nothing there concurrently; the orchestrator owns its state.
+
+## Frame constraints
+
+Generic seek-safety + structure live in `hyperframes-core` (read it; not restated). These are the **PR-to-video deltas**, each load-bearing:
+
+- **Caption keep-out — all content in the top ~83%.** A karaoke caption pill owns the bottom ~17% of the canvas. Keep every element (headline, code panel, diagram, labels) above `y ≈ 0.83 × height` — compute the pixel cutoff from your canvas (e.g. `≤ 900` on a 1080-tall frame, `≤ 1600` on a 1920-tall portrait). Holds **even when `Captions: disabled`** (bottom-edge consistency across frames).
+- **Fill the content area — especially portrait.** Compose the whole top-83% region; don't float one small cluster mid-frame. Anchor the hero high (~0.2–0.35 × height), flow supporting elements down with rhythm, scale the hero / code panel / diagram toward full-bleed. (Landscape's region is short, so vertical centering near 0.42 × height is fine.)
+- **Visible text is short motion-graphics copy** — a hero word, a stat (`"+1,204"`, `"2× faster"`), a file/label — never a sentence from the narration. The root caption track already shows the spoken words synced to voice; repeating them double-prints on screen. (Real code inside a `code-*` block is the exception — that is the content, not narration.)
+- **Build the whole shot — reveal across the full `duration`, never front-load.** Dumping the whole canvas in the first ~25% then holding it is exactly what reads as a PowerPoint slide. Instead reveal each piece — a file chip, the hunk, a node, a stat — **as the `voiceover` reaches it**, sequencing reveals across the shot and especially the back ~50%, with the macro camera move running underneath. **Only EXITS are banned** — a non-final frame unmounts mid-frame, so an exit tween truncates (the root transition IS the exit); mid-shot reveals are free and seek-safe. The lone exception is a note marked as a deliberate hold / stillness frame: there, an entrance + a quiet settle is right.
+- **Implement the shot sequence faithfully — every Scene is a timeline phase.** The Scene lines ARE the build: map each Scene onto a phase of the one timeline, each piece revealing as the `voiceover` reaches it. For each **named motion** in a Scene, open its rule recipe under `RULES_DIR/<id>.md` and reproduce its mechanics — **never name-guess** (a guess loses the signature move). The **`blueprint:` template** (`../hyperframes-animation/blueprints/<id>.md`) gives the overall shape; read it and keep its **signature move** recognizable. `compose` → no template; sequence the shot straight from the Scene lines (a code beat composes the surround around the block). Whichever, never front-load the whole sequence at `t=0`.
+- **Realize each element by its `roles`** (the `focal` is the hero): a `foreground subject` is the thing the eye lands on — respect the 83% keep-out and lay text around it; a `background` is a full-bleed field / gradient / grid dimmed ~30–50% so foreground content stays legible; `supporting` elements are labels, secondary shapes, ambient layers. Invented elements are HTML/CSS/SVG you build; a `code-*` block / `flowchart` / `data-chart` is filled + mounted per the section above; the credits avatars render as `<img>`.
+
+## Workflow
+
+1. **Read once, then build sequentially** — read the compact structural contract and `frame.md` once. For each assigned packet, use its exact frame block, selected blueprint/rule excerpts, and (for code) selected code-block/source excerpts. Do not reopen the source documents those excerpts came from. Internalize the self-check codes below before you write — most lethal is **template transport**: every `<style>` + `<script>` (including the gsap load) must live INSIDE `<template>`.
+2. **Design** — turn the time-coded shot sequence into a timeline using `frame.md`'s components and type ramp: each Scene window becomes a phase revealed on its `voiceover` cue, each named motion built from the recipe you just read, the blueprint's signature move kept recognizable. Build the invented hero (diagram / type / number-lockup), or fill + mount the `code-*` block and choreograph the surround.
+3. **Author** — write the full sub-composition to `compositions/frames/<frame_id>.html` (rewrite to iterate; last write wins). `<template>`-wrapped root carrying `data-composition-id="<frame_id>"` and styled via `#root` (not a class on that element — see the self-check below), exactly one `gsap.timeline({ paused: true })` registered at `window.__timelines["<frame_id>"]`, built synchronously — per the core contract.
+4. **Self-check, then continue/finish** — re-read that frame file against the checklist below and fix in place. Continue to the next assigned packet; after the final file, stop. You do **not** run the CLI.
+
+## Self-check before finishing (you do NOT run the CLI)
+
+You **can't** meaningfully run `hyperframes lint` / `check` here: they operate on the **assembled project** (the `index.html` graph / bundle), and your frame isn't wired in yet — so they report on _other_ files, not yours (a false green). The **orchestrator** runs them at **Step 6, after assembly** (the correct unit), and **re-dispatches you with the finding** if your frame fails (see **Retry** above). So get it right on write: re-read your file against this checklist before finishing — the codes in parens are `hyperframes lint`'s and what the orchestrator may cite back (the rules behind them live in `hyperframes-core`):
+
+- `missing_template_wrapper` / `missing_composition_id` — the entire file is exactly one bare `<template>…</template>` fragment (no DOCTYPE/full document); its first element carries `data-composition-id="<frame_id>"` and a positive `data-duration` matching the packet.
+- **Template transport** — every `<style>` and `<script>` block, including the GSAP load, lives inside `<template>`.
+- `subcomposition_root_styled_by_class` — **style the frame root via `#root`, never a class on the `data-composition-id` element**: at render a class on the root gets scoped to a descendant selector that can't match it, so the **whole scene renders unstyled** (Studio preview still looks right — trust this rule, not the preview). Descendants use plain selectors.
+- **Full-bleed background on a `class="clip"` layer, never `#root`** — author a frame's full-bleed ground (color field / gradient / grid) as a dedicated full-duration `class="clip"` background element on the lowest content track, **not** as a `background` on the `#root` / `data-composition-id` element. At assembly the frame root is clip-gated to its scene window, so a background painted on the root is not a dependable full-frame ground — dark content can end up over the host `body` (black) and render invisible. The video's base ground is painted separately by the assembler from `frame.md`'s `canvas` color onto the index `#root`; your full-bleed clip rides on top of it.
+- `clip_missing_data_attrs` — every `class="clip"` element has `data-start` / `data-duration` / `data-track-index`.
+- `timeline_not_paused` / `timeline_not_registered` — one paused timeline, registered at `window.__timelines["<frame_id>"]`.
+- `css_transition_used` + repeat / yoyo / non-deterministic logic — none present (the renderer seeks frame-by-frame).
+- `gsap_css_transform_conflict` — never put a CSS `transform` (e.g. `translateY(-50%)` centering) on an element you then GSAP-animate a transform prop on (`x` / `y` / `scale` / `rotation`): GSAP overwrites the whole `transform` and silently drops the CSS centering (the element jumps). Center with `margin` / `inset` (or `top`/`left` + offset), fold the offset into the tween via `xPercent` / `yPercent`, or use `fromTo` (the rule exempts it).
+- **Hero visibility** — the main subject is visible by `t <= 0.5s`; entrance tweens use `fromTo` instead of CSS-hidden starting states.
+- `exit_animation_on_non_final_scene` — no exit tween unless you are the final frame.
+- **No front-loading (not a slide)** — the shot's pieces reveal on their `voiceover` cues across the duration, not all fired at `t=0`; a non-still frame keeps content arriving rather than holding a full canvas from ~25%.
+- **Shot-sequence fidelity** — every Scene in the time-coded sequence is realized as a phase, the blueprint's signature move (unless `compose`) is present and recognizable, and the shot reveals to the voiceover (never front-loaded at `t=0`).
+- **Code-block cadence fits `data-duration`** — for a code beat, the `code-*` block's internal cadence is set so the full block completes within the frame's `data-duration` (a long snippet at the default per-character speed overruns — the code never finishes and the chrome beats never play; see `code-vocabulary.md`).
+- `font_family_without_font_face` — every font you name has a matching local `@font-face` **inside this template**. Copy the auto-generated block from `frame.md`; the Claude preset's EB Garamond, Inter, and JetBrains Mono faces live in `assets/fonts/`. Never link Google Fonts and never name a family without a project file, including system CJK / Japanese / Devanagari families (`Hiragino Sans`, `Yu Gothic`, `Noto Sans CJK`, `Noto Sans Devanagari`, …): the render machine is clean headless Chrome, so absent faces silently fall back. For non-Latin visible text, use a shipped face that covers the script or romanize/transliterate it; otherwise it is out of scope.
+- **Keep-out + no-narration-text** (eyeball, no code) — nothing sits below the 83% cutoff; no narration sentence is rendered as visible text.
diff --git a/.claude/skills-media/product-launch-video/SKILL.md b/.claude/skills-media/product-launch-video/SKILL.md
new file mode 100644
index 000000000..087e783ba
--- /dev/null
+++ b/.claude/skills-media/product-launch-video/SKILL.md
@@ -0,0 +1,229 @@
+---
+name: product-launch-video
+description: "Turn a product or marketing URL, pasted script, or brief into a product launch / promo video — SaaS promos, feature reveals, product demos, app and company launches. Use when the user wants to market, launch, promote, or reveal a product; the default for any commercial URL. Site tours / showcases of a website route here too — the brief carries the show-it-as-is intent. Unclear → /hyperframes."
+---
+
+> **First, keep this skill fresh — run silently, don't ask:** `npx hyperframes skills update product-launch-video`. A fast no-op when everything is current; otherwise it refreshes this skill plus the core domain skills it depends on before you rely on them.
+
+> **media-use**: Before sourcing audio/images/logos, call `/media-use` to resolve BGM/SFX/images from the HeyGen catalog and brand logos from their official sources. Run `--adopt` first to register existing assets. See `/media-use` skill.
+
+> **figma source**: If the source is a figma.com URL, run `/figma` first — asset export, brand tokens, and components/storyboard reconstruction if needed — then build this workflow from its output. Don't drive Figma via raw MCP tools directly: that skips SVG sanitization, `.media/manifest.jsonl` provenance, and brand-token `var()` binding, so a later brand change can't propagate without a full re-import.
+
+# Product Launch to HyperFrames
+
+Use this skill to capture a product, understand its brand, plan a launch video, and build it frame by frame in HyperFrames.
+
+> **The front door is `/hyperframes`.** You are the orchestrator. Run each step, verify its gate, and only then continue to the next step. This skill is for a **product being marketed, launched, promoted, or revealed**, including requests such as "promo for our site" when the purpose is promotional. A site tour / showcase ask stays here too: `BRIEF.md` carries the show-it-as-is intent, and the captured screens become the assets the video features. Any other intent, a bare "make a video", or any uncertainty → read `/hyperframes` first — the intent layer owns every route decision, and a fresh creation arriving here without `BRIEF.md` goes through it anyway (Setup's opening rule).
+
+You are the orchestrator. Work in `videos/<project>/`. Run steps in order and pass each gate before continuing. User-gated steps are Step 0, Step 3, and Step 6. Read `../hyperframes-core/references/brief-contract.md` before Step 0 — it defines the gate types and how `BRIEF.md`'s `flow`/`storyboard` derive the mode that governs the Step 3/4/6 gates. Do every step yourself except Step 5, where you dispatch one sub-agent per frame. Do not put design or motion rules here; those live in the frame-worker sub-agent, this skill's local `../hyperframes-animation/rules/` + `../hyperframes-animation/blueprints/`, and `hyperframes-creative`.
+
+Workflow: Step 0 setup -> `hyperframes.json`; Step 1 capture -> `capture/`; Step 2 design system -> `frame.md`; Step 3 storyboard/script -> `STORYBOARD.md` and `SCRIPT.md`; Step 3.1 audio -> `audio_meta.json`; Step 4 visual design -> enriched `STORYBOARD.md`; Step 5 frames -> `compositions/frames/NN-*.html` and `index.html`; Step 6 final render -> `renders/video.mp4`.
+
+---
+
+## Step 0: Setup
+
+Goal: Enter with a confirmed brief, create the HyperFrames project, and make the brief durable.
+
+**The brief is confirmed by the intent layer, not by questions asked here.** Opening rule, in order: **(1)** `BRIEF.md` exists → read it and ask nothing — the brief is settled, and its `flow`/`storyboard` derive the mode (brief contract § 1). **(2)** No `BRIEF.md` but the project exists (`hyperframes.json` / `STORYBOARD.md` on disk) → resume from the storyboard's frontmatter and the recorded preferences; never re-interrogate a half-built project. **(3)** Neither — a fresh creation request that arrived here directly → read `/hyperframes` and run its intent layer (§ 4): it checks recipes and remembered defaults, conducts this route's questions (`../hyperframes/references/route-briefs.md`), and hands back the locked brief. Edit requests skip all of this — go do the edit.
+
+Initialize only if `hyperframes.json` is missing. Name `<project>` from the brand or domain in kebab-case, such as `acme-promo`; never use workspace name or timestamp.
+
+`npx hyperframes init "videos/<project>" --non-interactive --example=blank` — `init` checks the installed skills against the latest on GitHub and updates the global set if any are out of date.
+
+After init, let `<PROJECT_ROOT>` be `videos/<project>` and run every subsequent relative-path command with that directory as its working directory. In the commands below, `.` means `<PROJECT_ROOT>`; never write `.media`, `capture`, or output files in the caller directory.
+
+**Write `BRIEF.md` immediately after init** (never before — `init` refuses a non-empty directory): the intent layer's locked brief, shape per `../hyperframes-core/references/brief-format.md`. Resolve `<MEDIA_DIR>` as the installed `/media-use` skill directory. Then record each preference-backed answer with `node <MEDIA_DIR>/scripts/prefs.mjs record --hyperframes .` (`brief-format.md` names the subset). If the intent layer adopted a recipe, run `node <MEDIA_DIR>/scripts/recipe.mjs use --hyperframes . --name <name>`; it copies its `frame.md` into the project (Step 2 is then skipped) and returns the skeletons Step 3 drafts from. A recipe fills answers, not approvals; the review gates still run.
+
+**Show sign-in status before proceeding past Setup** — run `npx hyperframes auth status` and relay its output verbatim. It reports whether voice/BGM will use HeyGen or local engines and, when signed out, how to sign in. Note the exit code contract: `auth status` **exits 1 when not signed in** (and when the stored credential is rejected) — that non-zero exit is the normal signed-out state, not a command failure, so don't treat it as an error, don't retry it, and don't chain it with `&&`/`set -e` in a way that would abort the workflow. Apply one branch:
+
+- **Collaborative:** wait for the user to sign in or explicitly choose `offline` / `go`.
+- **Autonomous:** state the status and continue through the available local engines.
+
+Do not silently omit a required capability when no offline provider exists; surface the blocker. Do not fold this decision into another question or write keys into a per-repo `.env`. Auth ownership and offline fallbacks: `/media-use` § Providers.
+
+**Gate:** `hyperframes.json` and `BRIEF.md` exist; the preference-backed answers were recorded (brief contract § 2); sign-in status was shown (signed in, or continuing offline).
+
+---
+
+## Step 1: Capture assets
+
+Goal: Collect the source material, brand signals, and usable assets for the video.
+
+Classify the input and choose the path. Explicit URL -> capture it and use the site for narration and assets. Pasted script/brief -> save verbatim as `user_script.txt`; `VO_MODE` (verbatim or restructured) comes from `BRIEF.md` — the intent layer asks it when a script arrives (ask once here only if the brief somehow lacks it). Then resolve capture target: URL in text -> use it; brand name only -> `WebSearch`, confirm URL in one line, then crawl; no URL/site (or the brief says don't scrape) -> no-capture path.
+
+Run capture with: `npx hyperframes capture "<URL>" -o ./capture`
+
+If `GEMINI_API_KEY`, `GOOGLE_API_KEY`, or an OpenRouter key exists, capture auto-captions assets into `capture/extracted/asset-descriptions.md`. This is not a review gate. Without a vision key, use DOM context and continue.
+
+No-capture path: create `capture/extracted/tokens.json`, `capture/extracted/visible-text.txt`, `capture/extracted/asset-descriptions.md`, and `capture/assets/` by hand. `tokens.json` should be `{ "title": "", "description": "", "colors": [], "fonts": [] }`; fill title/description from the brief when possible. `visible-text.txt` contains the full brief or script. `asset-descriptions.md` should say no assets were captured unless the user gave asset notes.
+
+**Gate:** `capture/extracted/tokens.json`, `capture/extracted/visible-text.txt`, `capture/extracted/asset-descriptions.md`, and `capture/assets/` exist; you can state the brand in one clear sentence. Treat `asset-descriptions.md` as the main asset inventory. If it is missing after real capture, stop and report capture incomplete. If `capture/BLOCKED.md` exists, follow it.
+
+---
+
+## Step 2: Design System
+
+Goal: Choose one shipped frame preset; a script turns it into this video's `frame.md` + caption skin.
+
+When `BRIEF.md` names a `style_preset` — the user picked it by eye from the showcases at the intent layer — use it; the judgment call is yours only when the brief is silent. Then you make the one call — **which preset**: read `../hyperframes-creative/references/design-spec.md` and pick the preset whose look best fits the brand and brief. Then run:
+
+```bash
+node <SKILL_DIR>/scripts/build-frame.mjs --preset <name> --hyperframes .
+```
+
+The script does the rest deterministically: copies the preset's `FRAME.md` → `frame.md` and **remixes** it onto the brand tokens in `capture/extracted/tokens.json` (brand colors mapped onto the preset's color keys by role — ink, canvas, accents — keeping keys/structure/components; the preset's display + body fonts swapped for the brand's), copies the preset's caption skin to `.hyperframes/caption-skin.html`, and self-validates (exits 1 on a broken mapping). Proceed to the next step as soon as it exits 0 — no hand-editing of the spec.
+
+`tokens.json` with no brand colors/fonts (e.g. no capture) → the script keeps the preset's own palette, a complete shippable design. If the brief names brand colors/fonts the capture missed, add them to `capture/extracted/tokens.json` before running (or use the user's `design.md` to populate it); only adjust `frame.md` by hand afterward if a mapping truly needs it.
+
+**Gate:** `build-frame.mjs` exited 0 — `frame.md` exists from a named preset, and (when the preset ships one) `.hyperframes/caption-skin.html` exists as the caption skin source; the chosen preset was recorded as a preference (`--key style_preset --workflow <this workflow>`, brief contract § 2).
+
+---
+
+## Step 3: Storyboard and Script
+
+Goal: Turn the brief and captured material into an approved frame-by-frame story plan.
+
+Read `../hyperframes-creative/references/story-spine.md` (hook language, value-before-evidence, storyboard-as-proposal), `references/story-design.md`, `../hyperframes-animation/blueprints-index.md`, `../hyperframes-core/references/storyboard-format.md`, and `../hyperframes-core/references/script-format.md`. Use them to write `STORYBOARD.md` and, when narration is needed, `SCRIPT.md`.
+
+Use `story-design.md` for story blueprint, hook, persuasion logic, beats, `VO_MODE`, and asset choices. As a **soft guide**, consult the role→blueprint menu in `../hyperframes-animation/blueprints-index.md`: for each beat, note a candidate blueprint id when one fits. Story truth still decides which beats exist — never force a beat to fit a blueprint, and never invent a beat just because a proven shape is available. Choose each visual frame's `asset_candidates` from `capture/extracted/asset-descriptions.md` (the canonical inventory) — don't browse raw `capture/assets/`. Do not ask the user to pick assets unless that inventory is missing or unusable. Use the exact required fields from the storyboard and script references.
+
+After drafting, run the review loop's plan pass — `../hyperframes-core/references/review-loop.md` § 1: open the board (don't ask whether to), present the plan as a proposal, and ask the two questions — approve or change, and **sketches first** (recommended) or skip. Feedback loops through chat or the board's comments file until approved. This is a **checkpoint gate** (brief contract § 1): in autonomous mode there is no board and nothing to ask — post the same summary as a heads-up and proceed; sketches collapse into the build, and the one preview question comes at Step 6.
+
+**Gate:** `STORYBOARD.md` exists, every visual frame has `asset_candidates`, `SCRIPT.md` exists when narration is needed, and the user approved the frame-by-frame plan (autonomous: the summary was posted as a heads-up).
+
+---
+
+## Step 3.1: Audio
+
+Goal: Generate narration, word timings, music, and audio metadata from the approved script.
+
+Start audio after Step 3 approval. Run it in the background, then continue to Step 4.
+
+**Choose the narration provider and voice from the user's ask before invoking.** Pass the provider selected in Step 0 with `--provider <provider>` (or set `HF_TTS_PROVIDER`). If the request named a voice, gender, or tone, pick a matching voice id and pass it with `--voice <id>`. The pipeline default is otherwise **Marcia (female)** on HeyGen / `am_michael` on Kokoro — so a request like "a male voice" is silently ignored unless you pass the flag. Voice ids are provider-specific; resolve against whichever provider Step 0's sign-in status selected: **HeyGen** (signed in) via `node <MEDIA_DIR>/audio/scripts/heygen-tts.mjs --list` (or `GET /v3/voices?engine=starfish`); **Kokoro** (offline) via the voice table in `<MEDIA_DIR>/audio/references/tts.md` (prefixes `am_`/`bm_` male, `af_`/`bf_` female). When the user expressed no preference, fall back to the remembered voice (brief contract § 2) before the pipeline default, and say which one you used; omit `--voice` only when neither names one. When the user explicitly picked a voice this run, record it (`prefs.mjs record --key voice`).
+
+`node <SKILL_DIR>/scripts/audio.mjs --script ./SCRIPT.md --storyboard ./STORYBOARD.md --hyperframes . --out ./audio_meta.json --provider <provider> --voice <voice-id> &`
+
+The audio script handles narration, word timings, BGM lookup from HeyGen's music library, and timing metadata. BGM mood comes from the storyboard's `music:` field; **`music: none` turns BGM off**. This uses the HeyGen Audio API for retrieval, not generation, and uses the same `~/.heygen` credential as TTS. For provider details, read `../media-use/audio/references/tts.md`.
+
+If there is no narration and no `SCRIPT.md`, skip voice generation. BGM may still run if the storyboard has a music mood.
+
+**The canonical fully-silent marker:** `music: none` in the STORYBOARD.md top YAML block **and** no `SCRIPT.md`. That combination marks the project silent — no narration, no BGM, no SFX. `audio.mjs` recognizes it and generates nothing (it removes any stale `audio_meta.json`; an absent `audio_meta.json` is what assemble treats as silent), so Step 3.1 is a clean skip. Use it when the user asks for a silent / music-free video — don't improvise other spellings.
+
+**Gate:** audio job has started, or the project is marked silent (`music: none` + no `SCRIPT.md`).
+
+---
+
+## Step 4: Frame Visual Design
+
+Goal: Add the visual direction, layout intent, and motion choices to each storyboard frame.
+
+**Sketch the board first (collaborative only).** The moment the plan is approved, run the sketch pass — `../hyperframes-core/references/review-loop.md` § 2 (don't wait on Step 3.1; sketches don't use timings): wireframe every frame yourself, mark each `built`, pause for the one layout question when the board is full, and revise only the sketches named until the board is confirmed. Stand-ins: plain labeled blocks for the captured assets — the real files arrive with Step 5's workers. Only then write the visual design below onto the confirmed layouts. In autonomous mode, or when the user chose to skip sketches at Step 3, skip this pass — frames go straight from `outline` to `animated` at Step 5.
+
+Edit `STORYBOARD.md` in place. Do not create another storyboard. Use `frame.md` as source of truth for color, type, layout feel, and style.
+
+Read `references/visual-design.md`, `../hyperframes-animation/blueprints-index.md`, `references/motion-language.md`, and `../hyperframes-animation/rules-index.md`. Use `visual-design.md` for the method (the time-coded shot sequence, the inline Layout vocabulary, and the required `## Video direction` block). Use `../hyperframes-animation/blueprints-index.md` to pick each frame's shot shape. Use `motion-language.md` (the motion vocabulary + the motion doctrine) and `../hyperframes-animation/rules-index.md` (valid rule names) for motion — do not invent motion names.
+
+For every visual frame, write a **time-coded shot sequence** into `STORYBOARD.md` per `visual-design.md`'s method: pick the frame's blueprint (or compose), instantiate it with THIS product's content, and pace each Scene's reveal to the voiceover so the frame develops across its full duration instead of front-loading then freezing. State layout and motion **inline** per Scene (vocabularies in `visual-design.md` and `motion-language.md`). Add one video-wide `## Video direction` block.
+
+Do not change story, script, asset choices, `asset_candidates`, `transition_in`, or captured source material. Do not write HTML in this step.
+
+Stage named assets after visual design is locked:
+
+`node <SKILL_DIR>/scripts/stage-assets.mjs --storyboard ./STORYBOARD.md --hyperframes .`
+
+**Gate:** every visual frame has a time-coded shot sequence whose reveals are paced to the voiceover (no front-loading); `## Video direction` exists; `assets/` contains the named assets. Collaborative: the sketch board was confirmed.
+
+---
+
+## Step 5: Build Frames
+
+Goal: Build every storyboard frame as an HTML composition and assemble the playable video.
+
+Wait for Step 3.1 audio to finish if audio was started. Then sync durations and fetch SFX; skip both if silent.
+
+`node <SKILL_DIR>/scripts/audio.mjs sync-durations --audio-meta ./audio_meta.json --storyboard ./STORYBOARD.md`
+
+`node <SKILL_DIR>/scripts/audio.mjs fetch-sfx --storyboard ./STORYBOARD.md --hyperframes .`
+
+Duration sync is mechanical: real voice duration wins; silent frames keep estimates; never hand-edit synced durations.
+
+Before dispatch, read `sub-agents/frame-worker.md` and `../hyperframes-core/references/subagent-dispatch.md`. Dispatch one sub-agent per frame, in parallel if possible; otherwise run workers in waves. Each worker gets exactly one frame.
+
+Each worker context must include `PROJECT_DIR`, `frame_id`, whether the frame has a **confirmed sketch** on disk, canvas size, caption status and keep-out band if captions are enabled, and `RULES_DIR` as the absolute path to this skill's `../hyperframes-animation/rules/`. Each worker reads `frame.md`, its own `## Frame N` block from `STORYBOARD.md`, the confirmed sketch when one exists (keep its layout — frame-worker § When a confirmed sketch exists), the local rule recipe (`../hyperframes-animation/rules/<id>.md`) for each cited motion, and the frame's blueprint template (`../hyperframes-animation/blueprints/<id>.md`). Each worker writes only `compositions/frames/NN-*.html`. Workers must never edit `STORYBOARD.md`.
+
+**Full-bleed backgrounds ride on a `class="clip"` layer, never the `#root`.** A frame's ground (color field / gradient / grid) is its own full-duration background clip — a `background` set on the `#root` / `data-composition-id` element is clip-gated to the frame's window and is not a dependable ground, so dark content can land on the black host `body` and render invisible. The video's base ground is painted by the assembler from `frame.md`'s `canvas` color onto the index `#root`. (Full rule + self-check: `sub-agents/frame-worker.md`.)
+
+As each worker returns, the orchestrator marks that frame as `animated` in `STORYBOARD.md`.
+
+After audio timings exist, build captions in the background and assemble the index:
+
+`node <SKILL_DIR>/scripts/captions.mjs build --storyboard ./STORYBOARD.md --audio-meta ./audio_meta.json --hyperframes . --out ./caption_groups.json &`
+
+`node <SKILL_DIR>/scripts/assemble-index.mjs --storyboard ./STORYBOARD.md --hyperframes .`
+
+`captions.mjs` uses the project's `.hyperframes/caption-skin.html` (copied in Step 2) as the caption look, injecting brand tokens from `frame.md`; with no skin present it renders the built-in default pill. `captions: skipped (<reason>)` is valid. Continue without captions when explicitly skipped.
+
+**Gate:** every frame is marked `animated` (collaborative: the sketch board was confirmed at Step 4), `index.html` exists, and captions are built or explicitly skipped.
+
+---
+
+## Step 6: Finalize
+
+Goal: Verify the assembled video, get user approval, and render the final MP4.
+
+Inject transitions, run checks, pause for review, then render.
+
+`node <SKILL_DIR>/scripts/transitions.mjs inject --storyboard ./STORYBOARD.md --hyperframes .`
+
+`node <SKILL_DIR>/scripts/transitions.mjs verify --storyboard ./STORYBOARD.md --index ./index.html`
+
+`npx hyperframes lint`
+
+`npx hyperframes check`
+
+`npx hyperframes snapshot --at <frame-midpoints>`
+
+`snapshot` stitches the captured frames into one contact sheet (`snapshots/contact-sheet.jpg`). Glance at it; if nothing is obviously broken, move on — don't linger here.
+
+If a command fails, surface stderr and stop — don't pile on recovery commands. Fix it yourself: the cheapest safe edit to `compositions/frames/NN-*.html`, then rerun the failed check.
+
+After checks pass, pause for user review — the review loop's final look (`../hyperframes-core/references/review-loop.md` § 4): one question, on the Studio that has been open since Step 3 — render now, or what changes? (Autonomous: the one kept question, preview first or render.) Then deliver the MP4 with the contact sheet and the frame ids so revisions can target a single frame.
+
+Preview: `npx hyperframes preview`
+
+Render only after user approval (autonomous mode: after the preview-or-render question):
+
+`npx hyperframes render --skill=product-launch-video --quality high --output renders/video.mp4`
+
+Do not rerun `lint`, `check`, or `snapshot` after rendering unless the user asks.
+
+**Gate:** `lint` and `check` passed and the snapshots were inspected before render; user approved at the review pause (autonomous: checks passed and the delivery includes the contact sheet); `renders/video.mp4` exists. Final reply states MP4 path and final duration.
+
+---
+
+## Quick Reference
+
+**Formats:** landscape `1920x1080`; portrait `1080x1920`; square `1080x1080` — derived from the destination (brief contract § 2). Set the format once in the storyboard frontmatter.
+
+**Background scripts:** the workflow ships only these scripts under `scripts/`: `build-frame` for adopting + brand-remixing a frame preset into `frame.md` (+ caption skin); `audio` for TTS, transcription, BGM, SFX, and duration syncing; `captions`; `transitions` for inject and verify; `stage-assets` for copying frame-named assets into `assets/`; and `assemble-index`. Everything else is handled by the `hyperframes` CLI.
+
+The reusable, product-agnostic shot shapes live in `../hyperframes-animation/blueprints/` (indexed by `../hyperframes-animation/blueprints-index.md`).
+
+| Read                                                                                                                                                        | When                                                                           |
+| ----------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------ |
+| `[../hyperframes-core/references/brief-contract.md](../hyperframes-core/references/brief-contract.md)`                                                      | Gate types, mode derivation from `BRIEF.md`, field semantics.                  |
+| `[../hyperframes-creative/references/story-spine.md](../hyperframes-creative/references/story-spine.md)`                                                    | Step 3: story doctrine — hook language, value-before-evidence, proposal shape. |
+| `[../hyperframes-creative/frame-presets/](../hyperframes-creative/frame-presets/)`                                                                          | Step 2: choose and adopt a frame preset.                                       |
+| `[../hyperframes-creative/references/design-spec.md](../hyperframes-creative/references/design-spec.md)`                                                    | Step 2: apply brand tokens correctly.                                          |
+| `[references/story-design.md](references/story-design.md)`                                                                                                  | Step 3: plan the product-launch story.                                         |
+| `[../hyperframes-animation/blueprints-index.md](../hyperframes-animation/blueprints-index.md)`                                                              | Step 3: role→blueprint menu. Step 4: pick the shot shape.                      |
+| `[../hyperframes-core/references/storyboard-format.md](../hyperframes-core/references/storyboard-format.md)`                                                | Step 3: write `STORYBOARD.md`.                                                 |
+| `[../hyperframes-core/references/script-format.md](../hyperframes-core/references/script-format.md)`                                                        | Step 3: write `SCRIPT.md`.                                                     |
+| `[../media-use/audio/references/tts.md](../media-use/audio/references/tts.md)`                                                                              | Step 3.1: choose or understand TTS providers and voices.                       |
+| `[references/visual-design.md](references/visual-design.md)`                                                                                                | Step 4: write the frame's shot sequence (+ Layout vocabulary).                 |
+| `[references/motion-language.md](references/motion-language.md)`                                                                                            | Step 4: the motion vocabulary + the motion doctrine.                           |
+| `[references/cut-catalog.md](references/cut-catalog.md)`                                                                                                    | Step 4-5: the cut catalog (worker builds within-frame seams).                  |
+| `[../hyperframes-animation/rules-index.md](../hyperframes-animation/rules-index.md)` + `[../hyperframes-animation/rules/](../hyperframes-animation/rules/)` | Step 5: local rule recipe bodies for the cited motions.                        |
+| `[sub-agents/frame-worker.md](sub-agents/frame-worker.md)`                                                                                                  | Step 5: dispatch per-frame workers.                                            |
+| `[../hyperframes-core/references/subagent-dispatch.md](../hyperframes-core/references/subagent-dispatch.md)`                                                | Step 5: dispatch sub-agents safely.                                            |
diff --git a/.claude/skills-media/product-launch-video/references/cut-catalog.md b/.claude/skills-media/product-launch-video/references/cut-catalog.md
new file mode 100644
index 000000000..1c54a5e77
--- /dev/null
+++ b/.claude/skills-media/product-launch-video/references/cut-catalog.md
@@ -0,0 +1,220 @@
+# Cut catalog — within-frame seams (worker-built)
+
+> **A worker build-recipe (Step 5) — the sibling of `../hyperframes-animation/rules/`, not a second motion doc.** These are within-frame cuts the **frame worker builds INSIDE its own composition** (Z-scale + blur + opacity tweens, or per-word x-staggers, all on the frame's own paused GSAP timeline). They are **not** the between-frame transition: story owns that via `transition_in`, which the harness's injector stamps from a **separate registry vocabulary** (`crossfade` / `blur-crossfade` / `push-slide` / `zoom-through` / `squeeze`) — the catalog names here (**cut-the-curve / inverse-zoom / waterfall**) are **not** valid `transition_in` values. Use this catalog when a frame's shot sequence has an internal seam — a within-scene text/element swap, a **Scene-to-Scene** cut (a `Scene` is a time window WITHIN one frame, **not** a frame-to-frame boundary), or a text-to-text line change — and you want it to read as one continuous move instead of a hard slideshow cut. (`zoom-through` lives in both worlds: a whole-frame wrapper transition in the registry, an element-level Z-cut here — same idea, different scope.)
+
+Four techniques that create depth and continuity:
+
+1. **Zoom-Through** — within-scene text swaps, Z-axis, moving TOWARD the viewer
+2. **Inverse Zoom-Through** — Z-axis swaps moving AWAY from the viewer
+3. **Cut the Curve** — between-scene transitions on x/y
+4. **Waterfall Cut** — word-by-word cut-the-curve with staggered exits and entries
+
+All four are the same underlying principle: **cut at peak velocity, match direction and
+speed on both sides of the cut.** The differences are axis, scope, and granularity.
+
+**Choosing which at a seam:** for an UNFINISHED phrase (building one larger idea across
+several visually distinct scenes that still approach the same point — multi-line text, a
+run of consecutive cards) use **cut-the-curve** / **waterfall**. For a STATE CHANGE (turning
+to a NEW part of the video — most often hook → context, between two distinct chapters) use
+**zoom-through**, and **inverse zoom-through** for an arrival / payoff beat. Chain these so
+the frame's internal seams feel like one camera moving through the content.
+
+---
+
+## Blur Logic (applies to all Z-axis variants)
+
+Blur sells the speed at the cut, but it must scale with the SUBJECT SIZE:
+
+| Subject                                                | Peak blur   | Why                                                                                                                                                                                                                                                 |
+| ------------------------------------------------------ | ----------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| Text-scale (headline, line, word group)                | **10px**    | At 20px text smears into illegibility — the eye loses the word it was tracking and the cut reads as a glitch, not speed. (Learned 2026-06-10: the until-now inverse zooms shipped at 20px and read mushy; 10px keeps letterforms readable mid-cut.) |
+| Full-frame surface (terminal window, card, screenshot) | **18–20px** | Big surfaces have edges and texture that survive heavy blur; lighter blur on a full-frame move reads as a rendering hiccup instead of motion.                                                                                                       |
+
+Both sides of a cut use the SAME peak blur — the value must match at the swap frame.
+Apply blur to the WRAPPER, never to individual children.
+
+---
+
+## 1. Zoom-Through (forward)
+
+### The Problem
+
+Text enters, holds, exits. Then next text enters, holds, exits. Each text block is
+independent — no depth, no continuity. The video feels like a slideshow.
+
+### The Principle
+
+A velocity-matched cut on the Z-axis. You **never see both texts at the same time.** The
+outgoing text scales toward the viewer (accelerating), blur and opacity peak at the cut
+point hiding a hard swap, and the incoming text continues scaling up from behind
+(decelerating into the focal plane). One continuous forward motion, two different texts.
+
+### The Three Phases
+
+**Phase 1: Exit** — text accelerates forward (toward viewer)
+
+- Scale: `1.0 -> 1.2`, Blur: `0px -> 10px` (text-scale; see Blur Logic), Opacity: `1.0 -> 0.15`
+- Scale/blur easing: `power3.in` (steep acceleration)
+- Opacity easing: `none` (linear — even dimming, separated from scale)
+- Duration: 0.2s
+
+**Phase 2: Hard cut** at peak velocity + peak blur
+
+- Outgoing: `opacity: 0` (instant via `tl.set`)
+- Incoming: `opacity: 0.15, scale: 0.75, blur: 10px` (instant via `tl.set`)
+- All properties match at the cut: blur, opacity, and scale DIRECTION (both scaling up)
+
+**Phase 3: Entry** — text continues forward (growing into focal plane)
+
+- Scale: `0.75 -> 1.0`, Blur: `10px -> 0px`, Opacity: `0.15 -> 1.0`
+- Easing: `expo.out` (steep initial burst matching exit velocity, long settle)
+- Duration: 0.5s
+
+### Why Opacity Must Be Separate on Exit
+
+Scale uses `power3.in` but that keeps opacity near 1.0 for most of the tween. Splitting
+opacity to its own tween with linear ease makes the dimming even. On entry, all properties
+can share `expo.out`.
+
+---
+
+## 2. Inverse Zoom-Through (backward)
+
+The mirror: the camera "pulls back" instead of pushing through. The outgoing element
+RECEDES away from the viewer; the incoming element arrives OVERSIZED (as if it had been
+just behind the camera) and retracts into the focal plane. Both move in the shrinking
+direction — same-direction rule preserved, just reversed.
+
+**When to use over the forward variant:** arrival beats. The incoming element lands with
+presence because it comes from larger-than-frame — right for a payoff line ("That changes
+today."), a giant reply, or a held end-state. Forward zoom-through reads as _progressing
+through_ content; inverse reads as _arriving at_ content.
+
+### The Three Phases
+
+**Phase 1: Exit** — element recedes (away from viewer)
+
+- Scale: `1.0 -> 0.8`, Blur: `0px -> 10px` (text-scale)
+- Scale/blur easing: `power3.in`; Opacity: `1.0 -> 0.15` on `none` (separate tween)
+- Duration: 0.2s
+
+**Phase 2: Hard cut**
+
+- Outgoing: `opacity: 0` via `tl.set`
+- Incoming: `opacity: 0.15, scale: 1.25, blur: 10px` via `tl.set`
+
+**Phase 3: Entry** — incoming retracts into place
+
+- Scale: `1.25 -> 1.0`, Blur: `10px -> 0px`, Opacity: `0.15 -> 1.0`
+- Easing: `expo.out`, Duration: 0.5s
+
+Shipped examples: `boring → until-now` and `B3 → "That changes today."` (sfx-music-launch);
+seams 3/4 in claude-paper (`follow-up → thinking`, `thinking → compose UI`).
+
+---
+
+## 3. Cut the Curve (Scene Transitions)
+
+### The Principle
+
+Use cut-the-curve for **all scene-to-scene transitions** on x and y axes. The outgoing
+scene's hero element accelerates in one direction, the cut lands mid-motion, and the
+incoming scene's hero element continues moving in the **same direction** and decelerates.
+Nothing exits fully off-screen and nothing enters from fully off-screen — **speed plus
+opacity fading trick the eye**; the partial moves are enough.
+
+### Same Path, Same Direction
+
+If Scene A's hero slides left, Scene B's hero enters from the right and continues sliding
+left. Both move leftward. One continuous motion.
+
+| Direction | Scene A exit   | Scene B entry start | Scene B entry end |
+| --------- | -------------- | ------------------- | ----------------- |
+| Leftward  | `x: 0 -> -230` | `x: +230`           | `x: 0`            |
+| Rightward | `x: 0 -> +230` | `x: -230`           | `x: 0`            |
+| Upward    | `y: 0 -> -230` | `y: +230`           | `y: 0`            |
+| Downward  | `y: 0 -> +230` | `y: -230`           | `y: 0`            |
+
+### Velocity matching via mirrored eases
+
+The cleanest match: exit `power4.in` and entry `power4.out` with the SAME distance and
+duration — mathematically the two halves of one `power4.inOut` composite, so the entering
+element picks up at exactly the 50% point of the notional path at identical velocity
+(e.g. 230px / 0.3s ≈ 3,070 px/s at the cut on both sides).
+
+The fade trick: the exit's opacity completes at ~25–30% of its travel (fade duration
+≈ 0.18–0.3s vs motion 0.3–0.34s) — the element vanishes while still visibly accelerating,
+and nothing has to reach the frame edge. Entry fades IN fast from ~0.35 under its
+deceleration. Time the LAST fading element to die right at the hard cut — gaps where
+nothing is moving read as awkward dead air.
+
+### Rules
+
+- Use cut-the-curve for all scene transitions — it's the default, not an accent
+- Same direction on both sides; mirrored `.in`/`.out` eases, same distance + duration
+- Exit duration short (0.2–0.4s), entry duration >= exit duration
+- Partial travel + fade, never full off-screen moves
+
+---
+
+## 4. Waterfall Cut (word-by-word cut-the-curve)
+
+Cut-the-curve at WORD granularity — the strongest version of the leftward cut for
+text-to-text seams. Each word of the outgoing line ramps out on its own pronounced curve;
+each word of the incoming line cascades in mid-flight. The stagger turns the cut into a
+wave the eye rides across the seam.
+
+### Exit (per word)
+
+- Motion: `x: 0 -> -230` over 0.34s on **power4.in** — a much more pronounced ramp than
+  the usual power2: the word barely creeps, then RIPS
+- Fade: `opacity -> 0` over 0.18s (separate tween, `power1.in`) — completes when the word
+  is only ~25–30% into its travel
+- Stagger: reading order, ~0.022s per word, timed so the LAST word finishes fading right
+  at the hard cut
+
+### Entry (per word)
+
+- `fromTo x: +230 -> 0, opacity: 0.35 -> 1` over 0.3s on **power4.out** — the mirrored
+  back half of the composite; every word ignites already moving at matched velocity
+- Waterfall stagger with SHRINKING gaps (start 0.05s, multiply by ~0.84 per word) so the
+  cascade accelerates across the line — the cascade should speed up word over word, not run
+  at a flat per-word delay
+- Pre-set all words to `x: +230, opacity: 0` at build time — `immediateRender: false`
+  alone leaves un-started words sitting visible at rest during the stagger window
+
+### Whole-line variant
+
+A single-line beat (e.g. a big intro line) exits as one group with the same pronounced
+ramp, but stretch its fade to ~0.3s ending ~0.02s before the cut — a lone element that
+fades early leaves dead air that a word cascade would have covered.
+
+Shipped example: `until-now.html` B1→B2→B3 (sfx-music-launch).
+
+---
+
+## Choosing a Variant
+
+|                | Zoom-Through                | Inverse Zoom                | Cut the Curve     | Waterfall Cut             |
+| -------------- | --------------------------- | --------------------------- | ----------------- | ------------------------- |
+| Scope          | Within-scene text swap      | Arrival/payoff beat         | Between scenes    | Text-to-text seam         |
+| Axis           | Z, toward viewer            | Z, away from viewer         | X / Y             | X, per-word               |
+| Peak blur      | 10px text / 20px full-frame | 10px text / 20px full-frame | none required     | none (fade does the work) |
+| Opacity at cut | 0.15                        | 0.15                        | exit faded by cut | last word dies at cut     |
+| Feel           | progressing through         | arriving at                 | carried sideways  | a wave across the seam    |
+
+---
+
+## Anti-Patterns
+
+| Don't                                    | Why                                         | Instead                                                |
+| ---------------------------------------- | ------------------------------------------- | ------------------------------------------------------ |
+| Two texts visible during a zoom-through  | Overlapping text breaks the Z-axis illusion | Hard cut at blur peak, one text at a time              |
+| 20px blur on text-scale subjects         | Letterforms smear; reads as a glitch        | 10px for text, 18–20px only full-frame                 |
+| Elements on different paths across a cut | Eye tracks one direction, cut goes another  | Same property, same direction                          |
+| Mismatched blur/opacity at the swap      | Visible flash or brightness jump            | Identical values at the cut frame                      |
+| Gentle easing on entry (`power2.out`)    | Entry velocity feels slower than exit       | Mirror the exit: `power4.out` / `expo.out`             |
+| Full off-screen exits / entries          | Wastes time and breaks the speed illusion   | Partial travel + early fade                            |
+| Lone element fading long before its cut  | Dead air at the seam                        | Fade ends ~0.02s before the cut, or use a word cascade |
+| Zoom-through on body text                | Small text at 0.75 scale is unreadable      | Only headlines and short phrases                       |
+| Scene cuts without cut-the-curve         | Static cuts feel like a slideshow           | Cut-the-curve is the default                           |
diff --git a/.claude/skills-media/product-launch-video/references/motion-language.md b/.claude/skills-media/product-launch-video/references/motion-language.md
new file mode 100644
index 000000000..367ecbaad
--- /dev/null
+++ b/.claude/skills-media/product-launch-video/references/motion-language.md
@@ -0,0 +1,156 @@
+# Motion language — the move vocabulary + the motion doctrine + the seek-safe core
+
+> The motion layer for **Step 4 (Visual design)**. When you write a frame's **time-coded shot sequence**, you name each scene's move **inline from the vocabulary below** — a named palette of the moves the golden corpus actually uses. Each move carries the **backing rule id** in this skill's local `../hyperframes-animation/rules/`; cite that id so the move resolves to a real recipe when a **frame worker** implements it in Step 5 (the worker reads the rule body in `../hyperframes-animation/rules/<id>.md` — it reproduces the move, it does not guess from the name). You name motion by **role / move name**, never by raw GSAP curve, ms, or stagger formula — the worker maps the curve. Between-frame **transitions are not yours**: story names `transition_in`, the harness injects it; that injected transition **is** the frame's exit. For cuts a worker builds INSIDE a frame (within-scene swaps, scene-to-scene seams), see the catalog in `cut-catalog.md`.
+
+A good promo feels like one continuous film — one camera, one motion feel, **smooth and timed to the voiceover** — not a pile of slides that animate once and freeze. The doctrine in Part 2 is load-bearing: when in doubt, do what it says.
+
+---
+
+# Part 1 — the move vocabulary
+
+Reach into this palette when naming a scene's motion. Pick the move that matches the beat, name it in the shot sequence, and cite the rule id after `→`. The blueprints (`../hyperframes-animation/blueprints/`) name these same moves in their `rule mapping`; you're drawing from one shared palette. Compose 2–4 across a shot's scenes (entrance → sequential reveal → settle), not all at once.
+
+## Kinetic type
+
+- **hard-cut / flash word-swap** — a word or line replaces the previous one on an instant cut (no fade/roll); the swap itself is the beat. → `discrete-text-sequence`
+- **in-place token cycle** — a fixed line holds and only its variable slot changes, token → token → token. → `discrete-text-sequence`
+- **per-word staggered reveal** — a phrase assembles word-by-word (or chunk-by-chunk), each landing on its own beat. → `dynamic-content-sequencing`
+- **kinetic beat-slam** — short phrases slam in on a shared percussive beat array, each with a distinct entrance, resolving on a locked finale; the recipe for "punchy / rhythmic" taglines. → `kinetic-beat-slam`
+
+## Typewriter
+
+- **type-on with caret** — text types in character-by-character behind a blinking caret. → `discrete-text-sequence` (+ `context-sensitive-cursor` for the caret blink / color)
+- **backspace-and-retype** — the line types, deletes the last word(s), and retypes a new one (typo-correction, reframe). → `discrete-text-sequence` (+ `context-sensitive-cursor`)
+
+## Count-up / data
+
+- **value-scaled counter** — a number counts up and its font size grows with the value, so the climb itself escalates. → `counting-dynamic-scale`
+- **bars / progress / star wipe** — a number paired with a graphic that fills: bar-height stagger, a progress bar / ring filling, a fractional star-rating wipe. → `stat-bars-and-fills`
+
+## Reveal / decode
+
+- **3D char flip-decode** — characters flip in 3D and resolve from scrambled glyphs to the real text (decryption feel). → `hacker-flip-3d`
+- **SVG self-draw** — an outline / icon / ring draws itself stroke-by-stroke. → `svg-path-draw`
+
+## Camera
+
+- **push / focus / drift** — a sequential camera move on the frame root (pull-back → focus → push) plus continuous micro-drift; the cinematic baseline. → `multi-phase-camera`
+- **zoom-to-target** — zoom into a non-centered element (scale + counter-translate to keep it framed). → `coordinate-target-zoom`
+- **pan / focus-lock** — a virtual camera transforming one `.world` wrapper to pan / zoom / lock onto a region. → `viewport-change`
+- **camera-cursor-tracking** — the viewport locks to a moving focal point (a typing cursor), static framing then focal-locked tracking. → `camera-cursor-tracking`
+
+## Layout motion
+
+- **cluster→outward expansion** — elements start clustered at center and expand outward to their final positions in lockstep. → `center-outward-expansion`
+- **orbit** — elements flip in from 3D space and settle into a continuous elliptical orbit (entry flips in-place at the orbital position). → `orbit-3d-entry`
+- **split-tilt cards** — two cards side-by-side with opposing rotationY tilts, entering from their respective sides (comparison / before-after). → `split-tilt-cards`
+- **logo/avatar ring + connectors** — avatars or logos on an elliptical ring with SVG connection lines to a center point, staggered entry. → `avatar-cloud-network`
+
+## Surface / UI
+
+- **3D page-scroll reveal** — a full webpage as a tilted 3D card whose internal content scrolls to reveal specific sections. → `3d-page-scroll`
+- **cursor click + ripple** — a cursor moves to a target, depresses with it on click, and emits an expanding ripple. → `cursor-click-ripple`
+- **button press** — a tactile press: compression then spring recovery, optional release burst / glow. → `press-release-spring` (or `physics-press-reaction` for a click that compresses cursor + target together)
+- **keyword glow** — keywords light up with glow + scale + color on an attack-decay-rest envelope, synced to a word rail. → `asr-keyword-glow`
+
+## Morph / handoff
+
+- **scale-swap** — two elements at the same screen center hand off: the outgoing cluster shrinks + fades as the incoming one arrives. → `scale-swap-transition`
+- **card morph-anchor** — a container morphs apparent size + corner radius + surface between two shots, then fades to reveal the real target beneath (HyperFrames uses uniform `scale`, not `width`/`height`). → `card-morph-anchor`
+
+## Seam cuts (worker-built, inside a frame)
+
+The velocity-matched cuts a worker authors between a frame's own Scenes. Name the seam in the shot sequence; the recipe is in the catalog, not a single `../hyperframes-animation/rules/` id.
+
+- **zoom-through / inverse zoom-through** — a within-scene swap on the Z-axis; forward reads "progressing through", inverse reads "arriving at" (payoff). → `cut-catalog.md`
+- **cut-the-curve** — a scene-to-scene cut where both sides move the same direction at matched velocity. → `cut-catalog.md`
+- **waterfall cut** — cut-the-curve at word granularity, a wave across a text-to-text seam. → `cut-catalog.md`
+
+## Emphasis / marker
+
+- **highlight / circle / burst / scribble** — a marker-drawn emphasis on a word or element: yellow highlight sweep, hand-drawn circle, radiating burst, scribble, or rough sketch-outline. → `css-marker-patterns`
+
+## Aliveness during a hold (use sparingly — see Part 2)
+
+- **subtle jitter** — the sanctioned way to keep a settled frame alive: a small, low-amplitude positional/scale jitter on the held element. The motion-graphics trick that reads "alive" without reading "weak." → `sine-wave-loop` (low-amplitude register)
+- **live SVG internals** — internal SVG parts move so an icon feels alive (rotating hands, oscillating blades, pulsing dots, dash-flow); fine because it's the subject doing something, not a card breathing. → `svg-icon-enrichment`
+- **finite bounded ambient** — a single bounded breathe/drift on ONE held hero, only when genuinely needed; de-emphasized — prefer sequential reveal or jitter first. → `sine-wave-loop`
+
+## The added moves — now backed by local rules
+
+Five moves the golden corpus needs were added to this skill's `../hyperframes-animation/rules/`, rounding out the vocabulary above:
+
+- **depth-of-field / selective-blur** — blur the off-focus subset to spotlight the focal element → `depth-of-field-blur`
+- **motion-blur streak** — directional velocity blur on a fast fly-in / camera push-through → `motion-blur-streak`
+- **3D depth scatter-assemble** — glyphs/elements scatter into a tumbling 3D cloud, then reassemble → `depth-scatter-assemble`
+- **spring-pop entrance** — the canonical entrance pop; default to a smooth long-tail settle, overshoot only when explicitly playful → `spring-pop-entrance`
+- **ambient glow / bloom** — un-triggered soft glow blooming behind a static hero → `ambient-glow-bloom`
+
+---
+
+# Part 2 — the motion doctrine (load-bearing)
+
+These four rules are the difference between a clip that reads as a serious launch video and one that reads as an agent-made PowerPoint. Follow them as written.
+
+## 1. Smooth beats bouncy — `power3` is the default
+
+Elements should use **long-tail decel curves that let them settle smoothly. `power3` is enough in most cases.** No bouncy, no overshoot, no `back.out` / `bounce.out` / `elastic.out` as a default.
+
+Bouncy is the **#1 instant turn-off** in user-made Remotion / HyperFrames videos, and the agent almost never gets it right — it thinks bouncy adds emphasis, but it buys that emphasis at the cost of cleanliness. The serious launch-video shops feel the same. **Smooth always wins.** Overshoot is demoted to a **rare, explicitly-playful exception** (a consumer/fun logo slam, a deliberate bell-hit) — never the house style. Name the intent as a long-tail settle; the worker maps `power3` (or `expo.out` on a fast arrival). See `../hyperframes-animation/rules/spring-pop-entrance.md` — it now leads with the smooth settle. (The exact form of that settle is a critically-damped spring; the worker has a baked, seek-safe `springEase` — ζ=1 — in `../hyperframes-animation/adapters/gsap-easing-and-stagger.md` → Spring Eases for when the settle is the hero. Real physics, same doctrine — not a license for bounce.)
+
+## 2. Sequential reveal in the back ~50%, timed to the voiceover
+
+This is the anti-PowerPoint mechanism — sharper than "put development in the middle."
+
+- **Don't dump everything on screen in the first ~25%** of the scene. Rushing all content in up front is exactly what forces the slideshow feel.
+- **Reveal each piece — a line, a card, even an h1 — when the voiceover mentions it**, sequencing reveals across the **later ~50%** of the scene. Same amount of agent work, but the cut becomes coherent and gains rhythm.
+- **Less is more.** Fewer things on screen, each arriving on its VO beat, beats a full canvas that animated once and froze.
+
+Practically: a frame's shot sequence front-loads almost nothing — the entrance carries only what the VO is saying at t=0, and the rest of the elements wait in the timeline for their spoken cue. A reveal maps onto a development-class move from Part 1 (`per-word staggered reveal`, `cluster→outward expansion`, a `count-up`, an `asr-keyword-glow` synced to the word rail).
+
+## 3. No lazy breathing, no bad pan/push — "no motion over bad motion"
+
+The agent's two reflexive ways to fake "aliveness" both read cheap:
+
+- **No lazy breathing.** Scaling cards/text up and down in a circular loop to look "alive" is the cheap tell. Don't reach for it.
+- **No bad slow pan / push in the back half.** A slow pan or push on elements in the later ~50% of a scene **disrupts the viewer's sightline and causes eye discomfort** — it actively makes the frame worse, not better.
+
+The fix for both is the same: **stagger element reveals in time with the script** (rule 2). And the governing principle: **"I'd rather have NO motion than BAD motion."** A held, still frame is better than a frame kept "alive" by breathing or a drifting camera. The **only sanctioned aliveness** during a hold is **subtle jitter** — a small low-amplitude jitter that keeps a frame from feeling dead without looking weak (it's in Claude videos now). Everything else holds.
+
+## 4. Internal seams are velocity-matched cuts
+
+When a frame has an internal seam — a within-scene swap, a Scene-to-Scene cut, a text-to-text line change — make it a **velocity-matched cut**, not a hard slideshow cut: cut at peak velocity, match direction and speed on both sides. The catalog (the four techniques, the blur logic, and which to use when) is `cut-catalog.md`; the moves are listed under **Seam cuts** in Part 1.
+
+## One-line summary
+
+Smooth long-tail (`power3`) over bouncy; reveal sequentially in the back ~50% timed to the VO (not dumped in the first 25%); no lazy breathing and no bad slow pan/push — prefer stillness, with subtle jitter as the only aliveness; cut at peak velocity with matched direction/speed (→ `cut-catalog.md`).
+
+---
+
+# Part 3 — the seek-safe core (hard rules)
+
+The frame is a **paused GSAP timeline seeked frame-by-frame**, so some "continuous" intents from a real-time engine can't render — don't name them. These are non-negotiable regardless of doctrine.
+
+- **No infinite / forever motion** — "particles loop endlessly," "logo rotates forever," "marquee on repeat." Any aliveness (the subtle jitter, a live SVG internal, a needed bounded ambient) is a **finite tween over the hold**, never `repeat` / `yoyo`.
+- **No randomness or wall-clock** — no `Math.random` particle fields, no `Date.now` drift. Every render must be identical; name deterministic motion only (stagger and any variation derive from the element index).
+- **Entrances use `fromTo`** — state the from-state explicitly so a seek to `t=0` lands the element correctly; never rely on a CSS-hidden start (it renders visible before the tween claims it, and flickers under seek).
+- **No CSS `transition` / `@keyframes` for motion** — CSS animation runs on the browser clock, independent of the HF seek clock; it desyncs and flickers. Drive all motion inside the paused GSAP timeline.
+- **Entrance + sequential reveal only — no mid-video exit.** The frame unmounts via the harness transition; that injected `transition_in` **is** the exit. Exit motion belongs only to the final frame. (Worker-built seam cuts in `cut-catalog.md` are within-frame, not the frame's exit.)
+
+## Forbidden — the failure modes
+
+**Slideshow (the primary failure):** everything dumped on screen in the first ~25%; content enters then freezes; nothing revealed on its VO cue. Fix with rule 2 (sequential reveal timed to the VO).
+
+**Cheap aliveness:** circular breathing as "life"; a slow pan/push in the back half disrupting the eye; many elements floating independently as "motion." Fix with rule 3 (stillness + subtle jitter only).
+
+**Bouncy:** `back.out` / `bounce.out` / `elastic.out` as the default entrance; hand-keyed overshoot. Fix with rule 1 (`power3` long-tail; overshoot only when explicitly playful).
+
+**Always:** no `repeat` / `yoyo`; no `Math.random` / `Date.now`; no all-elements-entering-simultaneously (sequence or stagger).
+
+## Naming motion in a shot — example
+
+> Scene 1 (0.0–1.0s): solid field; hero headline enters via **per-word staggered reveal** (`dynamic-content-sequencing`) on a smooth long-tail settle (`power3`); slow **push** on the root (`multi-phase-camera`) holds steady — no back-half re-push.
+> Scene 2 (1.0–3.0s): as the VO names each capability, five feature icons reveal **sequentially** via **cluster→outward expansion** (`center-outward-expansion`), then a **value-scaled counter** (`counting-dynamic-scale`) ticks up beneath them — the back-half reveal, timed to the script, not dumped at t=0.
+> Scene 3 (3.0–4.2s): hold on the result; **keyword glow** (`asr-keyword-glow`) lands on the payoff word as the VO says it; settles and holds still — at most **subtle jitter** (`sine-wave-loop`, low amplitude) keeps it alive; no breathing, no drift.
+
+Name the move + its rule id (or `cut-catalog.md` for a seam cut) per scene; let the worker pick curves, ms, and stagger — defaulting to `power3`.
diff --git a/.claude/skills-media/product-launch-video/references/story-design.md b/.claude/skills-media/product-launch-video/references/story-design.md
new file mode 100644
index 000000000..c1f683eca
--- /dev/null
+++ b/.claude/skills-media/product-launch-video/references/story-design.md
@@ -0,0 +1,380 @@
+# Story design — product launch video
+
+Step 3 of the product-launch flow. Output: `STORYBOARD.md` (the narrative plan, one frame per beat) and `SCRIPT.md` (the locked spoken narration).
+
+This step decides **what the video says, in what order, and how each beat is said** — and it says each beat in the SHAPE of a proven script. It does not design layout, composition, or motion (that is Step 4). For exact file syntax follow `../hyperframes-core/references/storyboard-format.md` and `../hyperframes-core/references/script-format.md`.
+
+## What story design produces
+
+For every beat, four things:
+
+1. **Position in the SEQUENCE** — the shot order. Story truth decides which beats exist and in what order (the arc).
+2. **Voiceover written in a blueprint's script shape** — the spoken line, drafted to sound like the proven script for the shape this beat is reaching toward (see the script bank below).
+3. **A candidate `blueprint:` id** — the proven shot SHAPE this beat leans toward (a tag, not a commitment; Step 4 confirms or overrides).
+4. **`transition_in`** — how this beat enters from the one before it.
+
+The big idea: **the blueprint is applied from the very first step.** The blueprints were reverse-engineered from 50 golden clips; each one implies a proven script. So we write the VO in that script's shape from the start — the voiceover is blueprint-shaped before Step 4 ever runs, which makes the blueprint's hit-rate downstream high.
+
+This is still a SOFT discipline. Story truth comes first: **never invent, bend, drop, or reorder a beat to fit a blueprint.** The script patterns only shape HOW a beat is said and which proven shape it leans toward — they never decide which beats exist.
+
+## Read first
+
+1. `hyperframes.json` — locked brief: angle, length, aspect ratio, language.
+2. `frame.md` — tone, mood, design system, brand register.
+3. `capture/extracted/visible-text.txt` — product facts, page copy, positioning, proof, CTA.
+4. `capture/extracted/asset-descriptions.md` — the ONLY source for the captured asset inventory.
+5. `user_script.txt` and `VO_MODE`, when present.
+
+Do not inspect `capture/assets/`, contact sheets, screenshots, or raw files in Step 3. Treat `asset-descriptions.md` as the canonical asset list. Never invent asset filenames.
+
+## Method
+
+### 1. Extract the product truth
+
+From the brief and captured text, name:
+
+- **Audience** — who the video speaks to.
+- **Pain / desire** — what they already want fixed or achieved.
+- **Promise** — the one-line thesis of the whole video.
+- **Product role** — what the product does in the story.
+- **Proof** — features, UI moments, metrics, logos, demos.
+- **CTA** — what the viewer should do next.
+
+Build the sequence around the **promise**, not a feature list. A website is an information layout; a video is an emotional sequence. Reorder, merge, and omit captured content freely — do not follow page order.
+
+### 2. Choose the arc (the sequence backbone)
+
+Pick ONE arc — it fixes the beat order. Compound only when useful (e.g. `PAS with feature-benefit progression`).
+
+| Arc                       | Use when                                         | Beat order                                                                  |
+| ------------------------- | ------------------------------------------------ | --------------------------------------------------------------------------- |
+| `PAS`                     | Pain is known and urgent (broken B2B workflows). | hook → pain → agitation → solution tease → product intro → proof/demo → CTA |
+| `Future Pacing`           | Sells a new future / category / paradigm.        | imagine → name product → remove pain → mechanism → outcome → CTA            |
+| `Demo Loop`               | UI is self-explanatory; best shown working.      | question → product intro → demo cycle 1 → demo cycle 2 → trust → CTA        |
+| `BAB`                     | Bridges an old workflow to a better one.         | before → after tease → bridge/product → step 1 → step 2 → wow → CTA         |
+| `Feature-Benefit Cascade` | Feature-rich or desire/status-driven.            | category hook → feature → benefit → feature → benefit → climax → CTA        |
+
+Use feature→benefit rhythm inside any arc when there are many capabilities — always translate a feature into viewer value, never stack raw features.
+
+`frame.md` tunes the VOICE, not the arc: restrained/B2B → plain, low-hype; bold/launch → short, punchy; warm/human → friendly direct address; premium/cinematic → aspirational, fewer words.
+
+### 3. Lay out the beats, each with a role
+
+One clear job per beat — never "more benefits" or "another feature." Beat `type` (= blueprint **role**):
+
+`hook | pain_point | product_intro | feature_showcase | benefit_highlight | social_proof | branding | cta`
+
+The opening 3–5s needs ONE hook that creates tension, curiosity, or desire — a shocking stat, pain validation, a rhetorical question, direct address, an imagine/future-pace, a category announcement, or visual spectacle. Never open with generic company description. Per `../hyperframes-creative/references/story-spine.md`: the hook speaks the viewer's outcome language (what they gain, never a feature list), and the promise (`message`) lands by beat 2 — features after that are its evidence.
+
+A UI demo is usually a SEQUENCE of 3+ consecutive `feature_showcase` / `benefit_highlight` beats on the same surface (input → response → result → benefit), not one isolated frame.
+
+### 4. Write each beat's VO in its blueprint's script shape
+
+For each beat, look up its **role** in the script bank below, find the blueprint whose SHAPE fits the beat you already chose, and **draft the voiceover to sound like that blueprint's pattern.** Tag the candidate `blueprint:` id on the frame.
+
+- The bank is the heart of this step: proven product-launch clips reversed into the one VO line each implies, grouped by role → blueprint, each with a **pattern** to imitate.
+- If two blueprints fit the beat, prefer the one whose script shape matches the line you'd naturally write.
+- If NO shape fits the beat, omit `blueprint:` and write the VO plainly — Step 4 composes that frame freely. Do not force a wrong shape.
+- **Vary the shapes across the video.** Reaching for the same blueprint every beat re-creates the sameness this exists to avoid. `kinetic-type-beats` is the workhorse (6 roles) — lean on it, but not everywhere.
+- **Write each VO as discrete cues, not one run-on breath.** Step 5 reveals each on-screen piece _when the voiceover names it_ (the anti-PowerPoint mechanism — `motion-language.md` Part 2). A line with clear phrase boundaries — "Content, sentiment, engagement — in one place" — hands the shot its reveal cadence for free; a single long clause leaves the frame nothing to pace to. The bank patterns are already cue-segmented — keep that rhythm.
+
+Step 3 only TAGS the candidate id and writes the shaped VO. Step 4 (visual design) picks and instantiates the blueprint into a time-coded shot; it may override or drop a Step 3 candidate. The full menu with picking guidance lives in `../hyperframes-animation/blueprints-index.md`.
+
+---
+
+## The script bank — what each beat's VO sounds like
+
+> Proven product-launch clips, each reversed into the one spoken line it implies. Grouped by **role → blueprint**. Real product names kept (swap in your own). Draft your beat's VO in the SHAPE of the matching pattern.
+
+### HOOK
+
+**kinetic-type-beats** — the words ARE the motion
+
+- Mailoji — "Still using a @gmail address? Or @outlook, or @hotmail, or @yahoo?"
+- Outrank — "Getting traffic is hard. Insanely hard."
+- AiAgent — "An AI agent that's easy to use — and optimised for you."
+- Uizard — "Transform your sketches into prototypes — automatically."
+- _Pattern:_ a punchy claim or rhetorical jab whose KEY WORD swaps in place (or escalates beat by beat) — the swap/escalation is the joke.
+
+**typewriter-reveal** — someone is typing this
+
+- "Need answers about your audience — right now?"
+- Contra — "You are more than your job title. You are more than your resume."
+- _Pattern:_ a relatable line typed live and edited mid-stream (a word backspaces and retypes) — the everyday thought, in your own words.
+
+**spatial-pan-stations** — a panned timeline
+
+- Rows — "From VisiCalc to Excel to Google Sheets — the spreadsheet has barely changed since 1979."
+- _Pattern:_ a march of named milestones across time, landing on "...until now / ...up to us."
+
+**constellation-hub** — nodes ring a center, camera pushes in
+
+- "Content, sentiment, engagement, analysis — every platform you're on, in one place."
+- _Pattern:_ a spread of tools/channels collapsing onto one center — "it connects everything."
+
+**ticker-takeover** — options cycle, then a hero crashes in
+
+- Notion — "A doc? A database? A wiki? — no, it's all of them, in one place."
+- _Pattern:_ a "could be X, or Y, or Z?" cycle on one swapping word, then a hero claim crashes in and replaces it — "actually, this is what it is."
+
+### PROBLEM
+
+**kinetic-type-beats** — pain lands alone on a bare canvas
+
+- Butter — "What if your sessions didn't have to be boring and unstructured — or buried under a dozen tabs?"
+- SmartCue — "You asked for better leads. We were the cure — MQLs that actually convert, a sales team that becomes your ally."
+- _Pattern:_ 3–5 short pain statements (or a "what if?" framing), each landing solo before the next — no product yet.
+
+**spatial-pan-stations** — a panned web of pain
+
+- Vauban — "Coordinating legal documents, signatures, and cross-border transactions — it's a tangled mess."
+- _Pattern:_ pain "stations" traversed one by one, ending on a knot — "too many disconnected steps."
+
+**dataviz-countup** — the data IS the argument
+
+- "67% of professionals say leadership is disconnected — and it's costing them a 65% boost in profitability."
+- _Pattern:_ a count-up / chart / stat the camera pushes through to dramatize a worsening or large-scale problem.
+
+**overwhelm-surround** — buried by your own tools
+
+- "Slack, email, docs, tickets, three more tabs — and somehow it all lands on you."
+- _Pattern:_ recognizable tools pile in until they surround and bury the viewer — the pain is being swamped, not one bad number.
+
+### PRODUCT_INTRO
+
+**kinetic-type-beats** — "Introducing…" name-drop
+
+- "Elevating experiences, removing manual touchpoints, automating processes — so you can focus on the customer."
+- Uizard — "Introducing Uizard — the design tool for everyone."
+- _Pattern:_ hard-cut through "Introducing…" / tagline / value beats and resolve on the brand name or logo.
+
+**logo-assemble-lockup** — wordless premium sting
+
+- Manifold — "Manifold." _(wordless mark assembles; VO optional — just the name)_
+- _Pattern:_ an abstract system assembles around a fixed mark — no copy, or just the product name landing.
+
+**cursor-ui-demo** — first cursor-led look
+
+- ClickUp — "This is ClickUp — click through and watch your whole workspace change."
+- "Pull up any contact, find the right advisor, and you're matched in seconds."
+- PaLM 2 — "Meet PaLM 2 — what is it, what can it do, and how was it built?"
+- _Pattern:_ a cursor sweeps in to introduce the surface — a light first look landing on a hovered hero element or fresh result.
+
+**dataviz-countup** — open on the result
+
+- SuperX — "X growth — discover what really works: 19.6 million impressions."
+- _Pattern:_ a confident "look at the data / the result" open — scroll a tilted card grid to one glowing hero metric, tagline assembling word by word.
+
+**video-text-pivot** — show it work, then the number
+
+- "Watch it run — then look at what it saved: 14 hours, every week."
+- _Pattern:_ the product video plays, then slides aside to hand the frame to one impact stat — "see it work, now see what it's worth."
+
+### KEY_FEATURE
+
+**grid-card-assemble** — enumerate breadth at once
+
+- Postcards — "Want more? Unlimited exports, 1,400 fonts, an AI assistant, version history — and it's free to try."
+- ClearVPN — "ClearVPN is built to help you: streaming access, secure browsing, location changing — only the essentials."
+- Copilot — "Command bar, Zapier, white-labeling, API, SOC2 — and a whole lot more."
+- _Pattern:_ a tile/pill/card grid self-assembles to show many capabilities at once — "look how much it does."
+
+**cursor-ui-demo** — one workflow, end to end
+
+- "Scroll your feed, then jump straight to your notifications — it's all one click away."
+- Flowrite — "Pick your recipient, set your intention, choose a tone — and Flowrite writes it for you."
+- Descript — "Tune your edits, add a crossfade, automate the volume, normalize loudness — then export."
+- _Pattern:_ one specific multi-step workflow shown end-to-end across 2–4 real edits, landing on the action button or result.
+
+**device-surface-showcase** — experienced inside its real interface
+
+- HRS — "Your flight's cancelled — so book a hotel, a taxi, and get reimbursed, all in one digital journey."
+- HelpKit — "A dynamic table of contents that follows your readers as they scroll."
+- Graphite — "Use unique themes, recolor one element or several, and configure it all in a handy window."
+- Contra — "Pick a template, make it yours, and launch a portfolio that's unmistakably you."
+- _Pattern:_ a feature shown being USED inside its real surface — the device/window is the hero and its screens advance through a flow.
+
+**comparison-split** — two paired capabilities, side by side
+
+- "Design on the left, code on the right — always one source of truth."
+- _Pattern:_ two complementary capabilities of equal weight shown together — "X and Y, in lockstep."
+
+**video-text-pivot** — the feature, then its result
+
+- "Here's the editor in action — and the result: a publish-ready cut in minutes."
+- _Pattern:_ a feature clip runs, then yields the frame to a metric / impact line — the clip proves it, the number lands it.
+
+### BENEFITS
+
+**kinetic-type-beats** — rapid-fire value montage
+
+- AiAgent — "No API keys, GPT-4 access, simple UX, clean UI — moving fast."
+- Uizard — "Export to Sketch, create style guides, share, collaborate — and code less."
+- _Pattern:_ a staccato montage of 8–12 short value phrases, each flashing and clearing at high tempo.
+
+**grid-card-assemble** — an accumulating value list
+
+- Lineicons — "Consistent and clean, tons of free icons, a Figma plugin, a powerful editor, every format you need."
+- Plutio — "Manage projects, track time, send invoices, write proposals — all deeply customisable."
+- _Pattern:_ short value phrases populate a vertical list ~1/sec, co-resident and accumulating, each popping into its slot.
+
+**titlecard-reveal** — the calm value beat
+
+- CSS Scan Pro — "A smart color picker — with instant tints and shades."
+- _Pattern:_ one clean two-line value title, one slide-up crossfade, then held still. Low motion is the point.
+
+### SOCIAL_PROOF
+
+**constellation-hub** — the hub at the center of your stack
+
+- kyvos — "On any BI tool — Tableau, Looker, Power BI — Kyvos sits at the center of your stack."
+- _Pattern:_ the product mark is the hub and partner logos orbit it — "sits at the center of everything you use."
+
+**grid-card-assemble** — a logo wall pulling back to a vast ecosystem
+
+- Lineicons — "Used by more than 100,000 designers, developers, and companies — including these."
+- ClickUp — "Connect Google Drive, Slack, GitHub, Stripe — your whole ecosystem in one place."
+- Copilot — "With thousands of partner apps — Airtable, Calendly, Jira, Asana — you can embed anything."
+- _Pattern:_ a wall of partner/app logos builds, then a camera zoom-out reveals a vast ecosystem.
+
+**titlecard-reveal** — busy → clean proof card
+
+- Trumpet — "We supply the trumpet, you bring the band — loved by 1,000+ sales, success, and marketing teams."
+- _Pattern:_ wipe a busy open away to a clean lockup plus a "loved by N+ teams" line that settles and holds.
+
+### CTA
+
+**kinetic-type-beats** — punchy closing line beat-by-beat
+
+- Stylebit — "Go pro, connect up to five Figma accounts — more features coming. Join now."
+- revid.ai — "Boost your engagement and turbocharge your social media."
+- _Pattern:_ a closing line (or short value stack) that snaps in beat by beat and lands on the logo or URL.
+
+**logo-assemble-lockup** — logo build → push-through into the URL
+
+- Strapi Cloud — "Deploy on Strapi Cloud — no server hassle, same flexibility. Try it now at strapi.io/cloud."
+- Highlander — "Highlander is ready for the future you're building. Let's raise — at highlander.ai."
+- STUDIO AI — "Get early access to STUDIO."
+- Glorify — "Get started for free now — no credit card required."
+- _Pattern:_ the logo builds, a fast camera push-through streaks giant CTA letters past the lens, resolving on the URL or action verb.
+
+**cta-morph-press** — identity condenses into one click
+
+- Linear — "This is Linear. Start building — it's free."
+- _Pattern:_ the brand mark condenses straight into the single thing you click — "here's us → click here," no spatial set.
+
+### BRAND_OUTRO
+
+**kinetic-type-beats** — a verb barrage resolving on one word
+
+- Phantom — "Buy, store, stake, swap, send, connect, explore — multichain."
+- _Pattern:_ a rapid center-channel barrage of single-word verbs asserting breadth, resolving on the brand's one defining word. No logo lockup needed.
+
+**typewriter-reveal** — persistent mark + typed CTA rail
+
+- Collato — "Next time, just Collato it — sign up for free today."
+- _Pattern:_ the mark holds dead-center the whole time while a sub-line types or swaps into the final CTA.
+
+**logo-assemble-lockup** — elements clear, the lockup draws itself in
+
+- Copilot — "Copilot." _(pills disperse off-frame, the mark draws on; VO optional — just the name)_
+- Dora AI — "Dora AI — join the waitlist."
+- _Pattern:_ feature/UI elements clear the stage off all four edges, then the logo mark draws itself on and the wordmark completes the lockup.
+
+**ticker-takeover** — use-cases cycle, the brand takes the frame
+
+- "For notes, for tasks, for plans, for teams — [brand] holds it all."
+- _Pattern:_ closing use-cases/verbs cycle through one slot, then the brand mark crashes in and owns the final frame.
+
+---
+
+## VO_MODE handling
+
+**No pasted script** — write the VO yourself, in the matching blueprint's script shape:
+
+- 1–2 sentences per spoken beat, usually 6–20 words.
+- Concrete and human; active verbs; say what the product does for a person.
+- Avoid: "seamless experience," "unlock the power of," "streamline your workflow," long noun-phrase lists, a whole beat that is just "Or…".
+- Silent beats are allowed when the visual proves the point — leave them out of `SCRIPT.md`.
+
+**`VO_MODE = restructure`** — treat `user_script.txt` as source material. Rewrite, reorder, merge, or omit to fit the arc and target length. You may still shape each segment toward its beat's blueprint pattern.
+
+**`VO_MODE = verbatim`** — do NOT change the user's words. Segment the script into beat-sized chunks at sentence/paragraph boundaries (split a long sentence only at a natural clause boundary). Final duration follows the provided script. Blueprint shaping does not apply to wording — only to which shape each verbatim chunk is paired with.
+
+## Asset candidates
+
+`asset_candidates` is the Step-3 → Step-4 handoff. Rules:
+
+1. Read only `capture/extracted/asset-descriptions.md` to know what exists.
+2. Use only filenames listed there; write as `assets/<basename>`.
+3. One line, candidates separated by semicolons, a short description after `—`.
+4. Prefer `[video]` assets when motion proves the product better than a still.
+5. Use content assets (UI, screenshots, product photos, charts, demos). Skip tiny icons, favicons, badges, decorative chrome, repeated logo variants — unless the beat needs them. Partner / third-party logos come from `/media-use` (`resolve --type logo --entity <brand>`) — never redrawn by hand.
+6. Pure-typography beats may use an empty asset list. Do not use nested lists.
+
+Example:
+
+```md
+- asset_candidates: assets/dashboard-hero.png — dark analytics dashboard, wide screenshot; assets/demo-loop.mp4 — query-to-result interaction clip
+```
+
+## transition_in
+
+Between-frame transition — how each frame ENTERS from the one before it. The harness's injector stamps it onto the two whole-frame clips (opacity / transform / filter on the frame wrappers). Name a **registry type** directly; optionally add a direction and/or a duration (`push-slide LEFT`, `crossfade 0.4s`). `cut` / `none` / empty = a hard cut.
+
+The five registry types:
+
+- **`crossfade`** — a plain opacity dissolve; the neutral choice when two frames sit in the same visual world.
+- **`blur-crossfade`** — dissolve through a soft blur + slight scale; use when the two frames' backgrounds differ a lot, so the blur masks the color clash a plain crossfade would expose.
+- **`push-slide`** `[LEFT|RIGHT|UP|DOWN]` — outgoing slides off, incoming pushes in from the opposite edge; a lateral "next beat" feel for a run of consecutive cards / feature beats.
+- **`zoom-through`** — outgoing scales up + blurs out, incoming scales up from small into focus; for a STATE CHANGE / turning to a new section (hook → context).
+- **`squeeze`** — outgoing compresses to a line on one edge as incoming expands from the other; a snappy, mechanical beat change.
+
+Pick a small set and repeat them: default to `crossfade` (or `blur-crossfade` when the backgrounds clash), and reach for `zoom-through` at section boundaries. Frame 1's `transition_in` is a placeholder.
+
+## Music & silence
+
+The storyboard's top YAML block carries a `music:` field — the BGM mood the audio step retrieves against (e.g. `music: confident minimal tech underscore`). Omitting it falls back to `message:` → `arc:` → a neutral default, so BGM plays unless turned off explicitly.
+
+- **`music: none`** — BGM off (narration, if any, still runs).
+- **`music: none` + no `SCRIPT.md`** — the canonical **fully-silent marker**: no narration, no BGM, no SFX. `audio.mjs` generates nothing and Step 3.1 is a clean skip. Use exactly this spelling when the user asks for a silent / music-free video.
+
+## Frame template
+
+Use the exact fields required by the core storyboard format. The narrative shape each frame satisfies:
+
+```md
+## Frame N — Short name
+
+- scene: one clear visual idea
+- voiceover: "spoken line, written in the candidate blueprint's script shape, or empty"
+- duration: rough estimate in seconds
+- transition_in: crossfade
+- status: outline
+- src: compositions/frames/NN-short-name.html
+- type: hook
+- persuasion: Pain validation
+- beat: urgency
+- blueprint: kinetic-type-beats — candidate shape from the role→blueprint menu; omit when none fits
+- asset_candidates: assets/example.png — short asset description
+
+narrativeRole: what this beat does in the viewer journey.
+keyMessage: the one idea the viewer should remember.
+```
+
+- `persuasion` — a concrete move (Pain agitation, Negative contrast, Friction reduction, Show-don't-tell proof, Feature-to-benefit translation, Statistical proof, Authority by association, Social proof, Risk reversal, Future pacing, Value stacking, Rule of three, Scarcity/urgency, Status seeking…). Never "show benefit." Invent one if none fits and explain it in the prose.
+- `beat` — a specific emotion (anxiety, frustration, overwhelm, tension, urgency, skepticism, FOMO → relief, curiosity, clarity, intrigue, aspiration → trust, confidence, control, ease, power, awe, excitement, belonging → triumph, motivation, urgency-to-act, peace of mind, inevitability). Compound allowed (e.g. `relief + control`).
+
+## Final checklist
+
+- The arc is named; the sequence is narrative-driven, not page-order-driven.
+- The opening uses one clear hook strategy that creates tension/curiosity/desire.
+- Each beat has one job; every beat has `type`, `persuasion`, `beat`.
+- Each beat's `voiceover` is written in its candidate blueprint's script shape (from the bank), with the candidate `blueprint:` tagged wherever a shape fits — and omitted where none does.
+- Each `voiceover` is phrase-segmented into cues (each cue a piece Step 5 can reveal on) — not one long run-on clause.
+- Shapes vary across the video; no single blueprint on every beat.
+- Story truth was never bent to fit a blueprint — no beat invented/dropped/reordered for a shape.
+- Every visual beat has suitable `asset_candidates` (filenames only from `asset-descriptions.md`), unless intentionally typography-only.
+- UI/product demos use a multi-beat sequence when the value depends on workflow.
+- `transition_in` is a registry type (`crossfade` / `blur-crossfade` / `push-slide` / `zoom-through` / `squeeze`) — default `crossfade` (`blur-crossfade` on a background clash), `zoom-through` at section boundaries, repeated across the video.
+- `SCRIPT.md` contains only locked spoken narration; silent beats are intentional and omitted.
diff --git a/.claude/skills-media/product-launch-video/references/visual-design.md b/.claude/skills-media/product-launch-video/references/visual-design.md
new file mode 100644
index 000000000..040681358
--- /dev/null
+++ b/.claude/skills-media/product-launch-video/references/visual-design.md
@@ -0,0 +1,126 @@
+# Visual design — product-launch per-frame shot method
+
+> The method behind **Step 4 (Frame visual design)**. You (the orchestrator) read it to **enrich `STORYBOARD.md` frames in place** — story-design wrote the skeleton (each frame's `scene`, `voiceover`, `transition_in`, the narrative fields, its `asset_candidates`, and optionally a candidate blueprint id); you add how each frame **looks and moves**. The unit you write per frame is a **time-coded shot sequence** — a shot directed across its whole duration, not a static slide. You write **no HTML** (that's the frame workers), you **never read `capture/`** (story already chose the assets), and you do **not** select assets or name transitions (story owns both). `frame.md` is your palette/type truth by role. Layout is a compact vocabulary in this file (the **Layout** section below), stated inline per Scene; motion vocabulary + the motion doctrine + the seek-safe core → `motion-language.md`; the proven shapes → `../hyperframes-animation/blueprints-index.md` + `blueprints/<id>.md`; concrete rules resolve in Step 5 from this skill's local `../hyperframes-animation/rules/`. Adding palette theory or a generic font rule here? Wrong home — `frame.md` + `hyperframes-creative`.
+
+## The unit is a time-coded shot sequence
+
+A frame's visual layer is **a sequence of time windows paced to the voiceover**, not a bag of effect tags. The failure that reads as PowerPoint is **front-loading**: the agent rushes the whole canvas on screen in the first ~25%, and then it just sits (the old representation — a flat set of effect names + a prose note — fired everything at entrance and left the rest empty). A time-coded shot sequence written **against the VO** makes that impossible: each window states what is on screen and what is moving, and **nothing appears before the voiceover reaches it.**
+
+Write each frame as a handful of windows cued by the spoken line:
+
+```
+Scene 1 (0.0–Xs):  only what the VO is saying at t=0 enters — never the whole canvas
+Scene 2 (Xs–Ys):   the next piece reveals as the VO names it (a line / card / stat / icon)
+  …                one window per spoken cue — as many or as few as the line calls for
+Scene N (…–end):   content has resolved; hold the read (stillness; subtle jitter at most)
+```
+
+- Each `Scene` line names **what's on screen**, **what moves in this window**, and **where it sits** (layout, inline). Times are real seconds across the frame's `duration`.
+- **Pace reveals to the voiceover; never front-load.** This is the core anti-PowerPoint mechanism (→ `motion-language.md` Part 2 Rule 2). At t=0 show only what the VO is saying then; reveal each further piece — a line, a card, even an h1 — **when the VO names it**, spreading reveals across the shot and especially the **back ~50%**. **The window count = the number of spoken cues the line calls for** — a two-beat line is two windows, a five-feature list is five or six. There is **no fixed count and no mandatory "middle" act**; the only sin is dumping everything up front.
+- **End on a held read.** Once the content has resolved it holds and reads — **prefer stillness to bad motion**: no forced camera drift, no lazy breathing, no back-half pan/push; at most a subtle jitter keeps it alive (→ `motion-language.md`). On a short shot the final reveal and the hold are the **same window** — the hold is not a separate mandatory act. Only the final frame has a real exit; every other frame's exit is the harness transition (story's `transition_in`).
+- A **deliberately held** frame — content already revealed, now reading still — is legitimate and often right (a climax, a breather). The failure is never "too still"; it is **front-loaded-then-frozen** (everything dumped by ~25%, nothing cued to the VO). Place held beats deliberately for rhythm so the video isn't uniformly busy (allocate them in `## Video direction`). Reveal pacing + holds + the idle budget → `motion-language.md`.
+
+## Pick the shape — instantiate a blueprint
+
+Don't invent each shot from scratch. The frame's **role** (its `type` / `beat`) points to a proven shape:
+
+1. **Match the role to a blueprint.** Open `../hyperframes-animation/blueprints-index.md`, find the frame's role in the **role→blueprint menu**, and pick the blueprint whose intent fits this beat (story may already have named a candidate id — confirm or override it). Read that `blueprints/<id>.md`: it is a short, product-agnostic, **time-coded shot template with `[slots]`** and a named **signature move** (the thing that makes the shape itself — the SVG ring, the push-THROUGH, the in-place token swap).
+
+2. **Instantiate its `[slots]` with THIS product's content** — three postures:
+   - **Reproduce** — the blueprint fits the beat and your content maps onto its slots cleanly. Fill every `[slot]` with this product's word / asset / stat and follow its Scene timing. Write the resulting Scene lines.
+   - **Adapt** — the _structure_ fits but the content / asset-count / surface doesn't (or you want a fresher surface to avoid templating). State **what you keep / what you change** in one line, then write the adapted Scene lines. You may extend or vary; you may **never** drop the **signature move** (drop it and you picked the wrong blueprint), and you keep the reveals **paced to the VO** — never collapse the shape to a single front-loaded dump.
+   - **Compose** — no blueprint fits the beat. Build the shot from the **motion vocabulary** in `motion-language.md`: still pace the reveals to the VO across the shot, never fire everything at t=0. Mark it `blueprint: compose`.
+
+3. **Keep the signature move.** Whichever posture, the blueprint's signature move (named in its file) is the spine of the shot — it usually lands on the shot's key reveal. Carry it through.
+
+The blueprint's own Scene lines, motion vocabulary, and `rule mapping` are your raw material; you are choosing a shape and casting this product into it, not copying an engineering spec.
+
+## What you add to each frame
+
+Story-design's `## Frame N` block already carries the narrative + `asset_candidates`. You append the shot. Story's `scene` / `voiceover` / `transition_in` / role fields stay untouched.
+
+```
+## Frame 3 — The problem
+- scene: a 20-minute timer over a stack of rejected takes   ← refine only if it could read sharper
+- voiceover: "…"            ← story's; leave it
+- transition_in: crossfade  ← story's; leave it
+- type: pain_point          ← story's
+- persuasion: Pain agitation
+- beat: frustration
+- blueprint: dataviz-countup (Adapt)   ← you add: the id you instantiated (or "compose")
+- focal: assets/reject-stat.png         ← you add: the hero asset for this beat
+- roles: reject-stat = cutout · timer = supporting · backdrop = background (dim ~40%)  ← you add: role per candidate
+- sfx: impact-soft, riser               ← you add: the sound the beat wants (fetched + mounted at root; never yours to embed)
+
+Adapt: keep the count-up-ring signature; one stat not three, and the trend chart becomes the rejected-takes count climbing.
+Scene 1 (0.0–1.2s): solid backdrop (dim ~40%); a circular progress ring + bold center number seat dead-center, ring sweeps and number counts 0→20 on one heavy ease — Centered template, ~50% of frame. Slow push-in runs underneath.
+Scene 2 (1.2–3.4s): as the VO names the count, the camera pushes THROUGH the ring into the rejected-takes stack lower-left; the stack grows beat-by-beat as a reject counter ticks up beside it (the count-up reveals on its spoken cue, not at t=0). Asymmetric 60/40, 3 depth layers.
+Scene 3 (3.4–5.0s): land the hero stat card dead-center, accent glow blooms behind it and holds; the stat reads clean and STILL — no continuing push, no breathing (a held beat beats bad motion). The stillness reads against the prior motion.
+```
+
+The lightweight tags:
+
+- **`blueprint:`** — the id you instantiated (with `(Reproduce)` / `(Adapt)`), or `compose`. One id per frame.
+- **`focal:`** — which existing candidate is the hero of this beat.
+- **`roles:`** — each candidate's role: `cutout` (foreground subject, lay text around it) · `background` (full-bleed, dim 30–50%) · `supporting` (secondary). You **consume** the candidates story chose — never add, swap, or drop one (coverage is story's call; if a frame truly has the wrong candidates, flag it back, don't reach into `capture/`).
+- **`sfx:`** — name the sound the beat wants (an impact for a slam, a whoosh for a push, a riser into a reveal). The audio script's `fetch-sfx` pass retrieves it and the assembler mounts it at the root — you only **name** it, never embed an `<audio>` element.
+
+**Layout is stated INLINE in each Scene line** — name the template, density, depth, and hierarchy as part of "where it sits" (`Centered, ~50% of frame`, `asymmetric 60/40, 3 depth layers`), drawing on the **Layout** vocabulary below; never write px / scale / shadow recipes (the worker writes those).
+
+**Motion is named INLINE in each Scene line** — name the move from `motion-language.md`'s vocabulary (`ring sweeps`, `pushes THROUGH`, `count-up`, `glow blooms`) and let it settle on a long-tail curve (`power3` default — smooth beats bouncy; see `motion-language.md`). Never write ease curves / ms / stagger (those resolve in Step 5 from this skill's local `../hyperframes-animation/rules/`).
+
+## Layout — named inline per Scene
+
+State each Scene's layout as part of "where it sits." **If the blueprint already implies a composition** (a ring around a center, stations on a wide canvas, two cards from opposite wings), that wins — describe it directly; the vocabulary below is for **composing freely** or a generic beat, not a menu you must pick from. Never write px / scale / shadow (the worker does). One frame's layout can EVOLVE across its Scenes (Scene 1 centered hero → Scene 2 rearranges to a grid).
+
+- **Framing vocabulary** — centered (hero / climax) · rule-of-thirds · split-screen (comparison) · layered-depth (immersive) · asymmetric 60/40 or 70/30 (editorial) · triptych (three panels) · full-width strip. Vary the framing across the video so it doesn't read as one repeated template — let the beat decide, not a quota.
+- **Density** — primary visual ≥ 40% of canvas; ≥ 3 depth layers (background + midground + foreground); never a lone small cluster floating in empty space. Squint test: after blur you can still pick out the #1 element.
+- **Hierarchy** — combine ≥ 2 of size (3:1) / weight (800 vs 400) / contrast / position (upper-third is golden) / motion, so one element clearly dominates.
+- **Depth** — layer 2–3 of: size, blur, opacity gradient, overlap, shadow-stack.
+- **Don't show**: nav bars, footers, scrollbars, real cursors / browser chrome, generic decorative shapes standing in for a real asset, floating bokeh / purple-blue "AI" gradients — unless it's an intentional UI-demo reconstruction.
+
+## `## Video direction` — write the invariants ONCE
+
+The whole video shares one look and one motion grammar. Write a **`## Video direction`** block ONCE at the top of `STORYBOARD.md` so every frame inherits it and per-frame Scene lines carry only the **delta**. This block is load-bearing — it is what binds many independent shots into one film. **Keep it.**
+
+- **palette system** — from `frame.md`: which roles map to which hues. Never invent.
+- **motion grammar + reveal model** — long-tail eases (`power3` default, smooth over bouncy) + the **VO-paced reveal** model every frame follows (reveal each piece on its spoken cue; never front-load) + what may stay alive during a hold (subtle jitter at most; no lazy breathing) (→ `motion-language.md`).
+- **rhythm / held-frame allocation** — name the **held / breather frames** (often before a climax) so the video varies its energy: most frames reveal to the VO, a few hold still (a held read beats bad motion; the anti-monotony discipline; → `motion-language.md`).
+- **negative list** — what never appears: off-brand textures / effects the pack forbids, **plus both motion failure modes** — slideshow (front-load then freeze) and screensaver (everything floating independently) (→ `motion-language.md`).
+
+Do **not** repeat these per frame — restating video-level rules in every frame is exactly the bloat this layer prevents.
+
+## Palette & type — from `frame.md`, never invented
+
+- **Palette** — `frame.md` (the adopted pack) is the color truth; apply its roles per frame. Generic basics (one accent, tint neutrals, avoid pure `#000`/`#fff`) → `hyperframes-creative/references/house-style.md`.
+- **Type** — fonts resolve via `frame.md`'s type tokens; reference them **by role** (display / body / mono / the pack's ramp), never by raw family or px. Generic typography craft (embedded fonts, dark-bg optical compensation, `tabular-nums`) → `hyperframes-creative/references/typography.md`.
+
+## Caption-band keep-out (plan side)
+
+The bottom ~17% of the canvas is reserved for the caption pill. Plan every frame's content into the **top ~83%** so nothing important lands in the band (the worker enforces the pixel cutoff; you plan the layout). Holds even when captions are disabled — bottom-edge consistency.
+
+## Where the detail lives
+
+| For…                                                                      | Read                                                                                         |
+| ------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------- |
+| the proven shapes + role→blueprint menu + how to pick                     | `../hyperframes-animation/blueprints-index.md` → `blueprints/<id>.md` (local)                |
+| motion — shot model, vocabulary, holds, idle budget, stillness, seek-safe | `motion-language.md` (local)                                                                 |
+| layout — templates, density, depth, hierarchy, caption band               | the **Layout** vocabulary in this file                                                       |
+| concrete eases / ms / stagger + rule recipe bodies (Step 5)               | local `../hyperframes-animation/rules/` (the frame worker reads it; you don't)               |
+| palette + type tokens                                                     | the project's `frame.md`; basics → `hyperframes-creative` `house-style.md` / `typography.md` |
+| "produced, not generated" foreground density                              | `hyperframes-creative/references/video-composition.md`                                       |
+| within-frame cuts / seams (zoom-through · cut-the-curve · waterfall)      | `cut-catalog.md` (the worker builds them inside the composition)                             |
+| transitions                                                               | story-design owns `transition_in`; you don't touch it                                        |
+
+## Before you finish — checklist
+
+- **`## Video direction`** written once at the top (palette · motion grammar + shot model + idle budget · stillness allocation · negative list incl. both failure modes); per-frame entries are deltas, not restatements.
+- Every frame is a **time-coded shot sequence** with real second windows across its `duration` — not a tag bag.
+- **No frame front-loads** — at t=0 only what the VO is saying enters; each further piece reveals on its spoken cue, across the back ~50%. Window count follows the VO, not a fixed number.
+- Every frame names an **`blueprint:`** id (Reproduce / Adapt) or `compose`; an Adapt states keep/change and **keeps the signature move**; nothing collapses to a single front-loaded dump — reveals stay paced to the VO.
+- **Held frames are deliberate** — allocated in Video direction for rhythm; a held read is fine (prefer stillness to bad motion), but no frame may be front-loaded-then-frozen.
+- Each frame's `asset_candidates` have a `focal` + per-candidate `roles`; none added, swapped, or dropped.
+- Layout named **inline** per Scene (template / density / depth / hierarchy — the **Layout** vocabulary here); motion named **inline** per Scene from the vocabulary (`motion-language.md`). No px / ease curves / ms / JS.
+- Content planned into the top ~83% (caption band clear).
+- Palette / type pulled from `frame.md` by role — nothing invented.
+- You wrote no HTML and never read `capture/`.
diff --git a/.claude/skills-media/product-launch-video/scripts/assemble-index.mjs b/.claude/skills-media/product-launch-video/scripts/assemble-index.mjs
new file mode 100644
index 000000000..139219a77
--- /dev/null
+++ b/.claude/skills-media/product-launch-video/scripts/assemble-index.mjs
@@ -0,0 +1,716 @@
+#!/usr/bin/env node
+// assemble-index.mjs — deterministic top-level index.html assembly for a
+// product-launch project. No subagent, no judgment: turns STORYBOARD.md + the
+// built frame files (+ optional audio_meta.json) into the standalone index.html
+// the renderer consumes, and stages the frame-named capture assets into assets/.
+//
+// index.html is a *standalone* composition (root <div id="root"> directly in
+// <body>, no <template> wrapper — template is for sub-comps). Structure is
+// modeled on the canonical fixture packages/studio/fixtures/storyboard-sample/
+// index.html and the authoritative head/audio template in
+// packages/core/docs/quickstart-template.html. Frame mount order = STORYBOARD
+// document order. Transitions are NOT written here — the transitions injector
+// mutates this file afterward (data-start/duration/track-index + GSAP).
+//
+// Track lanes (same-track time-overlap is illegal — lint timeline_track_too_dense):
+//   1      frame sub-comp clips (sequential; the injector 0/1-ping-pongs for overlaps)
+//   2      captions sub-comp clip (full-duration overlay, on top of frames)
+//   10     per-frame voice <audio>
+//   11     BGM <audio>
+//   20+i   SFX <audio> (one lane each)
+//
+// audio_meta.json contract (produced by audio.mjs; OPTIONAL — absent ⇒ silent
+// video, frames only). Durations come from STORYBOARD (audio sync-durations
+// writes them), NOT from here; this file carries only media PATHS, keyed by
+// frame number:
+//   { "bgm":   { "path": "assets/bgm/x.mp3", "volume": 0.12 } | null,
+//     "voices":[ { "frame": 3, "path": "assets/voice/03.wav" } ],
+//     "sfx":   [ { "frame": 3, "file": "assets/sfx/x.mp3", "offset_s": 0,
+//                  "duration_s": 1.0, "volume": 0.35 } ] }
+//
+// Reads:  --storyboard STORYBOARD.md, --hyperframes <project root>,
+//         [--audio-meta audio_meta.json]. On disk: each built frame's src html,
+//         capture/{assets,assets/videos,screenshots}/<basename> for staging, compositions/captions.html.
+// Writes: <project>/index.html  +  stages assets/<basename>  +  (guard ① below)
+//         repairs a frame file in place when its root is missing data-width/height.
+//
+// Pre-assembly frame guards (run in the same pass that reads each frame, so common
+// `lint` failures surface HERE instead of after assembly + a wasted render):
+//   ① AUTO-REPAIR — a sub-comp root missing data-width/data-height: inject the canvas
+//      dims (the renderer needs them on the cloned root; else lint root_missing_dimensions).
+//   ② APPROVED VIDEO HOIST — an explicitly marked frame video is moved to the host root;
+//      audio remains orchestrator-owned and unmarked media is still a hard failure.
+//   ③ HARD FAIL  — a timed element (data-start+duration+track-index) that is not the root
+//      and lacks class="clip" (shows the whole frame), or two same-track clips that overlap.
+//
+// Exit 0 = index.html written + summary. Exit 1 = fatal contract break (no
+// frames, a built/animated frame missing its src/file, a frame with no
+// duration, an inner data-composition-id mismatch, or a guard ②/③ violation).
+// No backstop: fix upstream.
+
+import { existsSync, readFileSync, writeFileSync } from "node:fs";
+import { spawnSync } from "node:child_process";
+import { basename, join, resolve } from "node:path";
+import { parseStoryboard } from "./lib/storyboard.mjs";
+import { parseFormat } from "./lib/dimensions.mjs";
+import { stageAssets } from "./lib/assets.mjs";
+import { parseColors, semanticColors } from "./lib/tokens.mjs";
+import { bgmDefaultVolume } from "../../media-use/audio/scripts/lib/bgm.mjs";
+
+// ---------- argv ----------
+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(`✗ assemble-index.mjs: ${msg}`);
+  process.exit(1);
+}
+
+// Ensure the BGM track is at least `total` seconds long. HeyGen (and most music
+// libraries) return a short loopable clip (~15–30s); mounting it at data-duration=total
+// would leave the video's TAIL SILENT. If the file is short, loop-extend it to `total`
+// (with a 0.4s fade-in + 1.5s fade-out) into a sibling *.loop.mp3 and return that path.
+// Needs ffprobe+ffmpeg (present in the render env); degrades to the original + a warning
+// when they're absent, so assembly never hard-fails on audio tooling.
+function ensureBgmCovers(relPath, hyperframesDir, total) {
+  const abs = join(hyperframesDir, relPath);
+  const probe = spawnSync(
+    "ffprobe",
+    ["-v", "error", "-show_entries", "format=duration", "-of", "csv=p=0", abs],
+    { encoding: "utf8" },
+  );
+  if (probe.status !== 0) return { looped: false, short: false, reason: "ffprobe unavailable" };
+  const dur = parseFloat(String(probe.stdout || "").trim());
+  if (!Number.isFinite(dur) || dur <= 0)
+    return { looped: false, short: false, reason: "unreadable duration" };
+  if (dur >= total - 0.1) return { looped: false, short: false, dur }; // already covers
+  const relOut = relPath.replace(/\.([^./]+)$/, ".loop.$1");
+  const absOut = join(hyperframesDir, relOut);
+  const fadeOut = Math.max(0, total - 1.5);
+  const ff = spawnSync(
+    "ffmpeg",
+    [
+      "-y",
+      "-stream_loop",
+      "-1",
+      "-i",
+      abs,
+      "-t",
+      String(total),
+      "-af",
+      `afade=t=in:st=0:d=0.4,afade=t=out:st=${fadeOut}:d=1.5`,
+      "-c:a",
+      "libmp3lame",
+      "-q:a",
+      "2",
+      absOut,
+    ],
+    { encoding: "utf8" },
+  );
+  if (ff.status !== 0 || !existsSync(absOut))
+    return { looped: false, short: true, dur, reason: "ffmpeg unavailable" };
+  return { looped: true, rel: relOut, from: dur };
+}
+
+const hyperframesDir = resolve(flag("hyperframes", "."));
+const storyboardPath = resolve(flag("storyboard", join(hyperframesDir, "STORYBOARD.md")));
+const audioMetaPath = resolve(flag("audio-meta", join(hyperframesDir, "audio_meta.json")));
+const outPath = resolve(flag("out", join(hyperframesDir, "index.html")));
+
+const r3 = (x) => Math.round(x * 1000) / 1000;
+const anomalies = [];
+const frameErrors = []; // fatal per-frame composition violations (guards ②/③) — reported together
+const repairs = []; // auto-repairs applied to frame files in place (guard ①)
+
+// ---------- parse storyboard ----------
+if (!existsSync(storyboardPath)) die(`STORYBOARD.md not found at ${storyboardPath}`);
+const manifest = parseStoryboard(readFileSync(storyboardPath, "utf8"));
+const { width: WIDTH, height: HEIGHT } = parseFormat(manifest.globals.format);
+
+// ---------- per-frame composition guards (see header ①②③) ----------
+// String-level checks on each frame's HTML — no DOM parse, deterministic, run in
+// the same pass that already reads the file. OPEN_TAG matches one opening tag while
+// tolerating quoted attribute values that contain ">" (e.g. inline styles).
+const OPEN_TAG = "<([a-zA-Z][a-zA-Z0-9-]*)((?:[^>\"']|\"[^\"]*\"|'[^']*')*)>";
+const attrPresent = (attrs, name) => new RegExp(`(?:^|\\s)${name}(?:[\\s=]|$)`).test(attrs);
+const attrValue = (attrs, name) => {
+  const m = attrs.match(new RegExp(`(?:^|\\s)${name}\\s*=\\s*(?:"([^"]*)"|'([^']*)')`));
+  return m ? (m[1] ?? m[2]) : null;
+};
+// The root (or a nested-comp mount) legitimately carries timing without class="clip".
+const isRootish = (attrs) =>
+  /(?:^|\s)id\s*=\s*["']root["']/.test(attrs) ||
+  attrPresent(attrs, "data-composition-id") ||
+  attrPresent(attrs, "data-composition-src");
+
+// Locate the composition root opening tag: prefer id="root", else the first element
+// carrying data-composition-id. Returns { start, end, full, attrs } or null.
+function findRootTag(html) {
+  const re = new RegExp(OPEN_TAG, "g");
+  let m;
+  let firstCompId = null;
+  while ((m = re.exec(html))) {
+    const attrs = m[2];
+    if (/(?:^|\s)id\s*=\s*["']root["']/.test(attrs))
+      return { start: m.index, end: m.index + m[0].length, full: m[0], attrs };
+    if (attrPresent(attrs, "data-composition-id") && !firstCompId)
+      firstCompId = { start: m.index, end: m.index + m[0].length, full: m[0], attrs };
+  }
+  return firstCompId;
+}
+
+function attrValueFrom(attrs, name) {
+  const escaped = name.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+  const match = attrs.match(new RegExp(`(?:^|\\s)${escaped}\\s*=\\s*(?:"([^"]*)"|'([^']*)')`));
+  return match ? (match[1] ?? match[2]) : null;
+}
+
+function escapeHtmlAttr(value) {
+  return value
+    .replaceAll("&", "&amp;")
+    .replaceAll('"', "&quot;")
+    .replaceAll("<", "&lt;")
+    .replaceAll(">", "&gt;");
+}
+
+function approvedVideoAttrs(attrs) {
+  const forwarded = [];
+  for (const name of ["id", "src", "poster", "preload", "aria-label", "data-media-start"]) {
+    const value = attrValueFrom(attrs, name);
+    if (value !== null) forwarded.push(`${name}="${escapeHtmlAttr(value)}"`);
+  }
+  for (const name of ["muted", "playsinline", "loop"]) {
+    if (attrPresent(attrs, name)) forwarded.push(name);
+  }
+  return forwarded.join(" ");
+}
+
+function approvedVideoLayout(attrs) {
+  const names = ["x", "y", "width", "height"];
+  const raw = Object.fromEntries(
+    names.map((name) => [name, attrValueFrom(attrs, `data-frame-video-${name}`)]),
+  );
+  const rawFit = attrValueFrom(attrs, "data-frame-video-fit");
+  const values = Object.fromEntries(names.map((name) => [name, Number(raw[name])]));
+  if (
+    names.some(
+      (name) => raw[name] === null || raw[name].trim() === "" || !Number.isFinite(values[name]),
+    ) ||
+    values.width <= 0 ||
+    values.height <= 0
+  ) {
+    return {
+      style: null,
+      error:
+        "approved frame video layout data-frame-video-x/y/width/height must all be finite numeric values, with positive width and height",
+    };
+  }
+
+  const fit = rawFit ?? "cover";
+  if (!["cover", "contain", "fill", "none", "scale-down"].includes(fit)) {
+    return {
+      style: null,
+      error:
+        'approved frame video layout data-frame-video-fit must be "cover", "contain", "fill", "none", or "scale-down"',
+    };
+  }
+
+  return {
+    style: `position:absolute;left:${values.x}px;top:${values.y}px;width:${values.width}px;height:${values.height}px;object-fit:${fit}`,
+    error: null,
+  };
+}
+
+function hoistApprovedVideos(html, label) {
+  const videos = [];
+  const errors = [];
+  const scan = html
+    .replace(/<!--[\s\S]*?-->/g, (match) => " ".repeat(match.length))
+    .replace(/<script\b[\s\S]*?<\/script[^>]*>/gi, (match) => " ".repeat(match.length))
+    .replace(/<style\b[\s\S]*?<\/style[^>]*>/gi, (match) => " ".repeat(match.length));
+  const re = /<video\b((?:[^>"']|"[^"]*"|'[^']*')*)>([\s\S]*?)<\/video\s*>/gi;
+  const repaired = html.replace(re, (full, attrs, inner, offset) => {
+    if (scan[offset] !== "<") return full;
+    if (attrValueFrom(attrs, "data-frame-video") !== "approved") return full;
+    const rawStart = attrValueFrom(attrs, "data-start");
+    const rawDuration = attrValueFrom(attrs, "data-duration");
+    const rawTrack = attrValueFrom(attrs, "data-track-index");
+    if (rawStart === null || rawDuration === null || rawTrack === null) {
+      errors.push(
+        `${label}: approved frame video must declare quoted data-start, data-duration, and data-track-index`,
+      );
+      return full;
+    }
+    const start = Number(rawStart);
+    const duration = Number(rawDuration);
+    const track = Number(rawTrack);
+    if (
+      !Number.isFinite(start) ||
+      !Number.isFinite(duration) ||
+      duration <= 0 ||
+      !Number.isFinite(track)
+    ) {
+      errors.push(
+        `${label}: approved frame video must declare finite data-start, positive data-duration, and data-track-index`,
+      );
+      return full;
+    }
+    const layout = approvedVideoLayout(attrs);
+    if (layout.error) {
+      errors.push(`${label}: ${layout.error}`);
+      return full;
+    }
+    videos.push({
+      attrs: approvedVideoAttrs(attrs),
+      inner,
+      start,
+      duration,
+      track,
+      layoutStyle: layout.style,
+    });
+    return "<!-- approved frame video hoisted by assemble-index -->";
+  });
+  return { html: repaired, videos, errors };
+}
+
+// Returns { errors: string[], repairedHtml: string|null, repairNote: string|null }.
+function guardFrame(html, label) {
+  const errors = [];
+  const originalHtml = html;
+  const approved = hoistApprovedVideos(html, label);
+  html = approved.html;
+  errors.push(...approved.errors);
+  // Scan a copy with comments + <script>/<style> bodies blanked, so a tag-like string
+  // in a comment (e.g. "<!-- match the host <video> coords -->") or in GSAP code can't
+  // trip ②/③. ① still splices into the ORIGINAL html, so its offsets stay correct.
+  const scan = html
+    .replace(/<!--[\s\S]*?-->/g, " ")
+    .replace(/<script\b[\s\S]*?<\/script[^>]*>/gi, " ")
+    .replace(/<style\b[\s\S]*?<\/style[^>]*>/gi, " ");
+
+  // ② media inside a sub-comp — never driven by the runtime (renders blank/black).
+  const media = scan.match(/<(video|audio)(?=[\s/>])/i);
+  if (media) {
+    errors.push(
+      `${label}: has a <${media[1].toLowerCase()}> inside the sub-composition. The runtime only drives media that is a DIRECT child of the host root (index.html) — sub-comp media renders blank/black. Move the clip to index.html as a root-level <video>/<audio> and drive any per-scene motion on the main timeline (composition-patterns.md archetype B).`,
+    );
+  }
+
+  // ③ timed-element checks: missing class="clip", and same-track window overlap.
+  const re = new RegExp(OPEN_TAG, "g");
+  const clips = [];
+  let m;
+  while ((m = re.exec(scan))) {
+    const attrs = m[2];
+    if (
+      !attrPresent(attrs, "data-start") ||
+      !attrPresent(attrs, "data-duration") ||
+      !attrPresent(attrs, "data-track-index")
+    )
+      continue;
+    if (isRootish(attrs)) continue;
+    if (!/(?:^|\s)class\s*=\s*["'][^"']*\bclip\b[^"']*["']/.test(attrs)) {
+      errors.push(
+        `${label}: a timed <${m[1]}> (data-start/duration/track-index) has no class="clip" — it renders for the whole frame instead of only its window. Add class="clip", or remove the timing attrs if it is a GSAP-animated element meant to be present throughout.`,
+      );
+    }
+    const track = attrValue(attrs, "data-track-index");
+    const start = parseFloat(attrValue(attrs, "data-start"));
+    const dur = parseFloat(attrValue(attrs, "data-duration"));
+    if (track != null && Number.isFinite(start) && Number.isFinite(dur))
+      clips.push({ track, start, end: start + dur });
+  }
+  const EPS = 1e-3; // adjacent clips that merely touch are legal
+  const byTrack = new Map();
+  for (const c of clips) {
+    const arr = byTrack.get(c.track);
+    if (arr) arr.push(c);
+    else byTrack.set(c.track, [c]);
+  }
+  for (const [track, list] of byTrack) {
+    list.sort((a, b) => a.start - b.start);
+    for (let i = 1; i < list.length; i++) {
+      if (list[i].start < list[i - 1].end - EPS) {
+        errors.push(
+          `${label}: clips on track ${track} overlap (one ends at ${r3(list[i - 1].end)}s, the next starts at ${r3(list[i].start)}s) — same-track time-overlap causes a render conflict. Put them on distinct data-track-index lanes or fix their windows.`,
+        );
+        break; // one report per track is enough
+      }
+    }
+  }
+
+  // ① auto-repair: ensure the root carries data-width / data-height.
+  let repairedHtml = approved.html !== originalHtml ? approved.html : null;
+  let repairNote = null;
+  const root = findRootTag(html);
+  if (root) {
+    const needW = !attrPresent(root.attrs, "data-width");
+    const needH = !attrPresent(root.attrs, "data-height");
+    if (needW || needH) {
+      const inject =
+        (needW ? ` data-width="${WIDTH}"` : "") + (needH ? ` data-height="${HEIGHT}"` : "");
+      const newTag = root.full.replace(/(\/?>)$/, `${inject}$1`);
+      repairedHtml = html.slice(0, root.start) + newTag + html.slice(root.end);
+      repairNote = `${label}: injected${needW ? " data-width" : ""}${needH ? " data-height" : ""} (${WIDTH}×${HEIGHT}) on the root — was missing (would lint root_missing_dimensions)`;
+    }
+  }
+
+  return { errors, repairedHtml, repairNote, hoistedVideos: approved.videos };
+}
+
+// ---------- resolve mountable frames in document order ----------
+// A frame mounts when its src html exists on disk. A built/animated frame
+// missing its src/file is a contract break (die). An outline frame with no
+// file is skipped (still a placeholder) with an anomaly note.
+const mounted = [];
+for (const f of manifest.frames) {
+  const label = `frame ${f.number ?? f.index}${f.title ? ` (${f.title})` : ""}`;
+  const built = f.status === "built" || f.status === "animated";
+  if (!f.src) {
+    if (built) die(`${label} is ${f.status} but has no \`src\` — the orchestrator must write it`);
+    anomalies.push(`${label}: status ${f.status}, no src — skipped`);
+    continue;
+  }
+  const compAbs = join(hyperframesDir, f.src);
+  // Read directly and handle ENOENT here rather than an existsSync precheck — the
+  // check→read/write pair is a TOCTOU race CodeQL flags (js/file-system-race).
+  let html;
+  try {
+    html = readFileSync(compAbs, "utf8");
+  } catch {
+    if (built)
+      die(`${label} is ${f.status} but its src ${f.src} is not on disk — re-dispatch the worker`);
+    anomalies.push(`${label}: src ${f.src} not on disk (status ${f.status}) — skipped`);
+    continue;
+  }
+  if (!Number.isFinite(f.durationSeconds) || f.durationSeconds <= 0) {
+    die(
+      `${label}: no positive duration (got ${JSON.stringify(f.duration)}) — run audio sync-durations`,
+    );
+  }
+  // Host data-composition-id MUST equal the inner file's, or the runtime never
+  // finds the timeline. frame_id = src basename (frame-worker contract); verify
+  // the inner html actually declares it.
+  const compId = basename(f.src).replace(/\.html?$/i, "");
+  // Guard against blank/partial scene files: a worker that errors or is
+  // interrupted mid-write leaves an empty (or markup-less) file that exists but
+  // fails at render with "Composition HTML is empty or could not be parsed".
+  // Catch it here — before emitting data-composition-src — and re-dispatch.
+  if (!html.trim() || !/<\w/.test(html)) {
+    die(
+      `${label}: ${f.src} is empty or has no HTML — the worker wrote a blank/partial file. Re-dispatch that worker before assembling.`,
+    );
+  }
+  // pre-assembly guards: ① repair missing root dims in place, ②/③ collect fatal violations.
+  const guard = guardFrame(html, label);
+  if (guard.repairedHtml) {
+    writeFileSync(compAbs, guard.repairedHtml);
+    html = guard.repairedHtml;
+    repairs.push(guard.repairNote);
+  }
+  for (const e of guard.errors) frameErrors.push(e);
+  if (
+    !html.includes(`data-composition-id="${compId}"`) &&
+    !html.includes(`data-composition-id='${compId}'`)
+  ) {
+    die(`${label}: ${f.src} has no data-composition-id="${compId}" (host/inner id must match)`);
+  }
+  mounted.push({
+    frame: f,
+    compId,
+    durationSeconds: r3(f.durationSeconds),
+    hoistedVideos: guard.hoistedVideos,
+  });
+}
+if (frameErrors.length) {
+  die(
+    `${frameErrors.length} frame composition violation(s) — fix the worker output and re-assemble:\n` +
+      frameErrors.map((e) => `  • ${e}`).join("\n"),
+  );
+}
+if (mounted.length === 0) die("no mountable frames (none built with an on-disk src)");
+
+// cumulative starts — emitted data-start[i] + data-duration[i] == start[i+1] by
+// construction (renderer computes end the same way), so adjacent clips touch
+// exactly with no float-overlap.
+let acc = 0;
+for (const m of mounted) {
+  m.start = acc;
+  acc += m.durationSeconds;
+}
+const TOTAL = r3(acc);
+const startOfFrameNumber = new Map();
+for (const m of mounted) if (m.frame.number != null) startOfFrameNumber.set(m.frame.number, m);
+
+// ---------- audio_meta (optional) ----------
+let audio = { bgm: null, voices: [], sfx: [] };
+if (existsSync(audioMetaPath)) {
+  try {
+    const parsed = JSON.parse(readFileSync(audioMetaPath, "utf8"));
+    audio = { bgm: parsed.bgm ?? null, voices: parsed.voices ?? [], sfx: parsed.sfx ?? [] };
+  } catch (e) {
+    die(`audio_meta.json parse: ${e.message}`);
+  }
+}
+const voiceByFrame = new Map();
+for (const v of audio.voices) if (v.frame != null) voiceByFrame.set(v.frame, v);
+
+// ---------- build <body> in track order ----------
+const body = [];
+let voiceCount = 0;
+
+for (const m of mounted) {
+  // (track 1) frame sub-comp clip — no class="clip" semantics needed; .scene CSS sizes it.
+  body.push(
+    `      <div`,
+    `        id="el-${m.compId}"`,
+    `        class="scene"`,
+    `        data-composition-id="${m.compId}"`,
+    `        data-composition-src="${m.frame.src}"`,
+    `        data-start="${m.start}"`,
+    `        data-duration="${m.durationSeconds}"`,
+    `        data-track-index="1"`,
+    `      ></div>`,
+  );
+  // (track 10) voice — only when the file is actually on disk.
+  const v = m.frame.number != null ? voiceByFrame.get(m.frame.number) : undefined;
+  if (v?.path) {
+    if (existsSync(join(hyperframesDir, v.path))) {
+      body.push(
+        `      <audio`,
+        `        id="el-${m.compId}-voice"`,
+        `        src="${v.path}"`,
+        `        data-start="${m.start}"`,
+        `        data-duration="${m.durationSeconds}"`,
+        `        data-track-index="10"`,
+        `        data-volume="1"`,
+        `      ></audio>`,
+      );
+      voiceCount++;
+    } else {
+      anomalies.push(`${m.compId}: voice ${v.path} not on disk — skipped`);
+    }
+  }
+  body.push("");
+}
+
+// Approved frame videos are mounted at the host root after frame clips. Translate
+// frame-relative timing to the global timeline and keep them off audio/frame lanes.
+for (const [frameIndex, m] of mounted.entries()) {
+  for (const video of m.hoistedVideos ?? []) {
+    const globalStart = r3(m.start + video.start);
+    const track = 1000 + frameIndex * 1000 + video.track;
+    const id = /(?:^|\s)id\s*=/.test(video.attrs) ? "" : ` id="el-${m.compId}-video-${frameIndex}"`;
+    body.push(
+      `      <video${id} ${video.attrs}`,
+      `        class="clip"`,
+      ...(video.layoutStyle ? [`        style="${video.layoutStyle}"`] : []),
+      `        data-start="${globalStart}"`,
+      `        data-duration="${r3(video.duration)}"`,
+      `        data-track-index="${track}"`,
+      `      >${video.inner}</video>`,
+      "",
+    );
+  }
+}
+
+// (track 11) BGM — duck under narration when any voice is present. Loop-extend a short
+// track to the full video length so the tail isn't silent (libraries return ~15–30s clips).
+let bgmEmitted = false;
+let bgmNote = "";
+if (audio.bgm?.path) {
+  if (existsSync(join(hyperframesDir, audio.bgm.path))) {
+    let bgmSrc = audio.bgm.path;
+    const cov = ensureBgmCovers(audio.bgm.path, hyperframesDir, TOTAL);
+    if (cov.looped) {
+      bgmSrc = cov.rel;
+      bgmNote = ` (looped ${cov.from.toFixed(1)}s→${TOTAL}s)`;
+    } else if (cov.short) {
+      anomalies.push(
+        `bgm is ${cov.dur?.toFixed?.(1) ?? "?"}s (< ${TOTAL}s) and could not be extended (${cov.reason}) — the tail will be silent; install ffmpeg`,
+      );
+    }
+    // An explicit volume from audio_meta always wins; otherwise the shared
+    // media-use default (bed ~ -18 dB under narration, forward for a silent film).
+    const vol = audio.bgm.volume != null ? audio.bgm.volume : bgmDefaultVolume(voiceCount > 0);
+    body.push(
+      `      <!-- BGM -->`,
+      `      <audio`,
+      `        id="el-bgm"`,
+      `        src="${bgmSrc}"`,
+      `        data-start="0"`,
+      `        data-duration="${TOTAL}"`,
+      `        data-track-index="11"`,
+      `        data-volume="${vol}"`,
+      `      ></audio>`,
+      "",
+    );
+    bgmEmitted = true;
+  } else {
+    anomalies.push(`bgm ${audio.bgm.path} not on disk — skipped`);
+  }
+}
+
+// (track 2) captions — captions.mjs writes this or legally skips; key off existence.
+let captionsEmitted = false;
+if (existsSync(join(hyperframesDir, "compositions/captions.html"))) {
+  body.push(
+    `      <!-- captions -->`,
+    `      <div`,
+    `        id="el-captions"`,
+    `        class="scene"`,
+    `        data-composition-id="captions"`,
+    `        data-composition-src="compositions/captions.html"`,
+    `        data-start="0"`,
+    `        data-duration="${TOTAL}"`,
+    `        data-track-index="2"`,
+    `      ></div>`,
+    "",
+  );
+  captionsEmitted = true;
+}
+
+// (track 20+i) SFX — placed at its frame's start + offset.
+let sfxEmitted = 0;
+audio.sfx.forEach((cue, i) => {
+  const host = cue.frame != null ? startOfFrameNumber.get(cue.frame) : undefined;
+  if (!host) {
+    anomalies.push(`sfx ${cue.file}: frame ${cue.frame} not mounted — skipped`);
+    return;
+  }
+  const rel = cue.file;
+  if (!existsSync(join(hyperframesDir, rel))) {
+    anomalies.push(`sfx ${rel} not on disk — skipped`);
+    return;
+  }
+  const t = r3(host.start + (cue.offset_s ?? 0));
+  const dur = r3(cue.duration_s ?? 1);
+  const vol = cue.volume != null ? cue.volume : 0.35;
+  if (sfxEmitted === 0) body.push(`      <!-- SFX -->`);
+  body.push(
+    `      <audio`,
+    `        id="el-sfx-${i}"`,
+    `        src="${rel}"`,
+    `        data-start="${t}"`,
+    `        data-duration="${dur}"`,
+    `        data-track-index="${20 + i}"`,
+    `        data-volume="${vol}"`,
+    `      ></audio>`,
+  );
+  sfxEmitted++;
+});
+
+// ---------- stage frame-named assets: capture/ → assets/ (idempotent backstop) ----------
+// Frame workers + the live preview reference assets/<basename>; stage-assets.mjs
+// already ran this at Step 4 close. Re-run as a backstop so a late-named asset
+// still lands. Shared logic: lib/assets.mjs (first-wins, safe to call twice).
+const {
+  staged,
+  wanted,
+  anomalies: assetAnomalies,
+} = stageAssets({
+  hyperframesDir,
+  frames: manifest.frames,
+});
+for (const a of assetAnomalies) anomalies.push(a);
+
+// ---------- <head> ----------
+// ---------- ground color ----------
+// Per-frame roots carry data-start/data-duration and get clip-gated against the
+// global timeline in render (only the first frame's [0,dur] window overlaps global
+// 0), so a frame's own full-bleed background can't be relied on as the video ground —
+// every frame after the first would render on the bare body color (black). Paint the
+// ground on the always-present root composition instead, using the project's frame.md
+// canvas color (the same ground role the caption skin maps to --cap-canvas). Falls
+// back to the body letterbox color when frame.md is absent or has no resolvable ground.
+const framePath = join(hyperframesDir, "frame.md");
+let groundColor = null;
+if (existsSync(framePath)) {
+  try {
+    const roles = semanticColors(parseColors(readFileSync(framePath, "utf8")));
+    if (roles && roles.canvas) groundColor = roles.canvas;
+  } catch {
+    /* leave groundColor null — #root stays transparent over the body letterbox */
+  }
+}
+
+const headStyle = [
+  "      * {",
+  "        margin: 0;",
+  "        padding: 0;",
+  "        box-sizing: border-box;",
+  "      }",
+  "      html,",
+  "      body {",
+  `        width: ${WIDTH}px;`,
+  `        height: ${HEIGHT}px;`,
+  "        overflow: hidden;",
+  "        background: #000;",
+  "      }",
+  "      #root {",
+  "        position: relative;",
+  `        width: ${WIDTH}px;`,
+  `        height: ${HEIGHT}px;`,
+  "        overflow: hidden;",
+  ...(groundColor ? [`        background: ${groundColor};`] : []),
+  "      }",
+  "      .scene {",
+  "        position: absolute;",
+  "        inset: 0;",
+  "        width: 100%;",
+  "        height: 100%;",
+  "      }",
+].join("\n");
+
+const html = `<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=${WIDTH}, height=${HEIGHT}" />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js" integrity="sha384-sG0Hv1tP1lZCk9KQmrIbY/XNwi+OY84GQqhMscbnsoBFqAz8KNCil1kvfL3Hbbk2" crossorigin="anonymous"></script>
+    <style>
+${headStyle}
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="main"
+      data-start="0"
+      data-duration="${TOTAL}"
+      data-width="${WIDTH}"
+      data-height="${HEIGHT}"
+    >
+${body.join("\n")}
+    </div>
+
+    <script>
+      window.__timelines = window.__timelines || {};
+      window.__timelines["main"] = gsap.timeline({ paused: true });
+    </script>
+  </body>
+</html>
+`;
+
+writeFileSync(outPath, html);
+
+// ---------- summary ----------
+console.log(`✓ wrote ${outPath}`);
+console.log(`  canvas:            ${WIDTH}×${HEIGHT}`);
+console.log(`  frames (track 1):  ${mounted.length}`);
+console.log(`  voice  (track 10): ${voiceCount}`);
+console.log(`  bgm    (track 11): ${bgmEmitted ? "yes" + bgmNote : "no"}`);
+console.log(`  captions (track 2): ${captionsEmitted ? "yes" : "no"}`);
+console.log(`  sfx    (track 20+): ${sfxEmitted}`);
+console.log(`  assets staged:     ${staged}/${wanted.size}`);
+console.log(`  total duration:    ${TOTAL}s`);
+if (repairs.length) {
+  console.log(`\nrepaired (frame files updated in place):`);
+  for (const rp of repairs) console.log(`  - ${rp}`);
+}
+if (anomalies.length) {
+  console.log(`\nanomalies (non-fatal):`);
+  for (const a of anomalies) console.log(`  - ${a}`);
+}
diff --git a/.claude/skills-media/product-launch-video/scripts/audio.mjs b/.claude/skills-media/product-launch-video/scripts/audio.mjs
new file mode 100644
index 000000000..dca2e1cce
--- /dev/null
+++ b/.claude/skills-media/product-launch-video/scripts/audio.mjs
@@ -0,0 +1,272 @@
+#!/usr/bin/env node
+// audio.mjs — product-launch audio ADAPTER. The TTS / BGM / SFX implementation
+// no longer lives here: it is the shared engine at
+// ../../media-use/audio/scripts/audio.mjs. This file only (a) maps the
+// product-launch model (SCRIPT.md frames + STORYBOARD.md music/sfx) into the
+// engine's neutral audio_request.json, (b) converts the engine's id-keyed
+// audio_meta back into the frame-keyed shape captions.mjs / assemble-index.mjs
+// already consume, and (c) keeps the local `sync-durations` pass (it rewrites
+// STORYBOARD.md, which is product-launch-specific).
+//
+// Three modes (unchanged CLI surface):
+//   (default) generate — engine --only tts,bgm. BGM mode is "retrieve" (strict:
+//        no HeyGen credential ⇒ skip, never a detached generate, since this
+//        workflow has no wait-bgm step). Runs in the background during Step 4.
+//   sync-durations — write real voice durations into STORYBOARD.md (local).
+//   fetch-sfx      — engine --only sfx, merged into the existing meta (Step 5,
+//        after the frames' `sfx:` cues exist).
+//
+//   node audio.mjs --script ./SCRIPT.md --storyboard ./STORYBOARD.md --hyperframes . --out ./audio_meta.json
+//   node audio.mjs sync-durations --audio-meta ./audio_meta.json --storyboard ./STORYBOARD.md
+//   node audio.mjs fetch-sfx --storyboard ./STORYBOARD.md --hyperframes .
+
+import { spawnSync } from "node:child_process";
+import { existsSync, readFileSync, rmSync, writeFileSync } from "node:fs";
+import { dirname, join, resolve } from "node:path";
+import { fileURLToPath } from "node:url";
+import { parseStoryboard } from "./lib/storyboard.mjs";
+
+const HERE = dirname(fileURLToPath(import.meta.url));
+const DEFAULT_ENGINE = join(HERE, "..", "..", "media-use", "audio", "scripts", "audio.mjs");
+
+const flag = (argv, name, def) => {
+  const i = argv.indexOf(`--${name}`);
+  return i >= 0 && i + 1 < argv.length ? argv[i + 1] : def;
+};
+const pad2 = (n) => String(n).padStart(2, "0");
+
+// SCRIPT.md → [{ frame, text }]. `## … (Frame N)` opens a line; `**key:**` rows
+// are metadata; the indented block is the spoken text (the only TTS input).
+function parseScript(md) {
+  const out = [];
+  let cur = null;
+  const flush = () => {
+    if (cur && cur.text.trim()) out.push({ frame: cur.frame, text: cur.text.trim() });
+    cur = null;
+  };
+  for (const line of md.split(/\r?\n/)) {
+    const h = line.match(/^#{2,3}\s+.*?\(frame\s+(\d+)\)/i);
+    if (h) {
+      flush();
+      cur = { frame: Number(h[1]), text: "" };
+      continue;
+    }
+    if (!cur) continue;
+    if (/^\s*\*\*/.test(line)) continue;
+    const m = line.match(/^(?: {4,}|\t)(.+)$/);
+    if (m) cur.text += (cur.text ? " " : "") + m[1].trim();
+  }
+  flush();
+  return out;
+}
+
+// Path of the engine's neutral meta — a stable sidecar so `--only` merges
+// (generate then fetch-sfx) accumulate, while audio_meta.json holds the PL shape.
+const neutralPath = (plOutPath) => join(dirname(plOutPath), "audio_engine_meta.json");
+
+// Run the shared engine. Returns nothing; dies on a non-zero exit.
+function runEngine({ request, hyperframesDir, neutral, only, extra = [] }, die) {
+  const reqPath = join(hyperframesDir, "audio_request.json");
+  writeFileSync(reqPath, JSON.stringify(request, null, 2));
+  const engine = process.env.HF_MEDIA_ENGINE || DEFAULT_ENGINE;
+  if (!existsSync(engine)) die(`media audio engine not found at ${engine} (set $HF_MEDIA_ENGINE)`);
+  const args = [
+    engine,
+    "--request",
+    reqPath,
+    "--hyperframes",
+    hyperframesDir,
+    "--out",
+    neutral,
+    "--only",
+    only,
+    ...extra,
+  ];
+  const r = spawnSync("node", args, { stdio: "inherit" });
+  if (r.status !== 0) die(`media audio engine exited ${r.status}`);
+}
+
+// Engine neutral meta (id-keyed) → product-launch meta (frame-keyed) consumed by
+// captions.mjs / assemble-index.mjs. id is the zero-padded frame number.
+function toProductLaunchMeta(neutral) {
+  const voices = (neutral.voices ?? []).map((v) => ({
+    frame: Number(v.id),
+    path: v.path,
+    duration_s: v.duration_s,
+    words: (v.words ?? []).map((w) => ({ id: w.id, text: w.text, start: w.start, end: w.end })),
+  }));
+  const bgm = neutral.bgm
+    ? {
+        path: neutral.bgm.path,
+        volume: neutral.bgm.volume,
+        query: neutral.bgm.query ?? null,
+        duration_s: neutral.bgm.duration_s ?? null,
+      }
+    : null;
+  const sfx = (neutral.sfx ?? []).map((s) => ({
+    frame: Number(s.id),
+    file: s.file,
+    offset_s: s.offset_s ?? 0,
+    duration_s: s.duration_s ?? 1,
+    volume: s.volume ?? 0.35,
+  }));
+  return { bgm, voices, sfx };
+}
+
+// ── generate (TTS + BGM) ────────────────────────────────────────────────────
+function runGenerate(argv) {
+  const die = (m) => {
+    console.error(`✗ audio generate: ${m}`);
+    process.exit(1);
+  };
+  const hyperframesDir = resolve(flag(argv, "hyperframes", "."));
+  const storyboardPath = resolve(flag(argv, "storyboard", join(hyperframesDir, "STORYBOARD.md")));
+  const scriptPath = resolve(flag(argv, "script", join(hyperframesDir, "SCRIPT.md")));
+  const outPath = resolve(flag(argv, "out", join(hyperframesDir, "audio_meta.json")));
+  const userVoice = flag(argv, "voice", null);
+  const provider = flag(argv, "provider", process.env.HF_TTS_PROVIDER || "auto");
+  const speed = Number(flag(argv, "speed", "1.0")) || 1.0;
+
+  if (!existsSync(storyboardPath)) die(`STORYBOARD.md not found at ${storyboardPath}`);
+  const manifest = parseStoryboard(readFileSync(storyboardPath, "utf8"));
+  const g = manifest.globals;
+
+  const lines = existsSync(scriptPath)
+    ? parseScript(readFileSync(scriptPath, "utf8")).map((l) => ({
+        id: pad2(l.frame),
+        text: l.text,
+      }))
+    : [];
+  // The canonical fully-silent marker (SKILL.md Step 3.1): `music: none` in
+  // the storyboard's top YAML block turns BGM off; combined with no SCRIPT.md
+  // the project is fully silent — generate nothing and remove any stale meta
+  // from a previous run (assemble treats an absent audio_meta.json as silent).
+  const bgmOff =
+    String(g.extra?.music ?? "")
+      .trim()
+      .toLowerCase() === "none";
+  if (bgmOff && !lines.length) {
+    rmSync(outPath, { force: true });
+    rmSync(neutralPath(outPath), { force: true });
+    console.log(
+      "✓ audio generate: project marked silent (music: none, no SCRIPT.md) — nothing to generate",
+    );
+    return;
+  }
+  if (!lines.length) console.error("· no SCRIPT.md — silent film (BGM only)");
+
+  // BGM mood: storyboard `music:` → message → arc → default. `mode: retrieve` is
+  // strict here (no wait-bgm step downstream).
+  const query = (g.extra && g.extra.music) || g.message || g.arc || "calm cinematic underscore";
+  const request = {
+    provider,
+    speed,
+    lines,
+    bgm: bgmOff
+      ? { mode: "none" }
+      : { mode: "retrieve", query, blob: g.message || "", arc: g.arc || "" },
+  };
+  if (userVoice) request.voice = userVoice;
+
+  const neutral = neutralPath(outPath);
+  runEngine({ request, hyperframesDir, neutral, only: "tts,bgm" }, die);
+
+  const meta = toProductLaunchMeta(JSON.parse(readFileSync(neutral, "utf8")));
+  writeFileSync(outPath, JSON.stringify(meta, null, 2));
+  console.log(
+    `✓ audio generate: ${meta.voices.length} voice + ${meta.bgm ? "1 bgm" : "no bgm"} → ${outPath}`,
+  );
+}
+
+// ── fetch-sfx ────────────────────────────────────────────────────────────────
+function runFetchSfx(argv) {
+  const die = (m) => {
+    console.error(`✗ audio fetch-sfx: ${m}`);
+    process.exit(1);
+  };
+  const hyperframesDir = resolve(flag(argv, "hyperframes", "."));
+  const storyboardPath = resolve(flag(argv, "storyboard", join(hyperframesDir, "STORYBOARD.md")));
+  const outPath = resolve(flag(argv, "audio-meta", join(hyperframesDir, "audio_meta.json")));
+
+  if (!existsSync(storyboardPath)) die(`STORYBOARD.md not found at ${storyboardPath}`);
+  const manifest = parseStoryboard(readFileSync(storyboardPath, "utf8"));
+
+  // Per-frame `sfx:` cues (comma-separated) → engine lines carrying only sfx.
+  const lines = [];
+  for (const f of manifest.frames) {
+    const names = (f.extra?.sfx ?? "")
+      .split(",")
+      .map((s) => s.trim())
+      .filter(Boolean);
+    if (names.length && f.number != null) lines.push({ id: pad2(f.number), sfx: names });
+  }
+
+  const neutral = neutralPath(outPath);
+  const request = { lines, bgm: { mode: "none" } };
+  // --only sfx is a MERGE, not an overwrite: the engine reads the existing neutral
+  // sidecar (audio_engine_meta.json) and recomputes only the sfx section, so the
+  // voices/bgm written by the earlier generate (--only tts,bgm) pass are preserved.
+  runEngine({ request, hyperframesDir, neutral, only: "sfx" }, die);
+
+  const meta = toProductLaunchMeta(JSON.parse(readFileSync(neutral, "utf8")));
+  writeFileSync(outPath, JSON.stringify(meta, null, 2));
+  console.log(`✓ audio fetch-sfx: ${meta.sfx.length} SFX cue(s) → ${outPath}`);
+}
+
+// ── sync-durations (local; rewrites STORYBOARD.md) ────────────────────────────
+function runSyncDurations(argv) {
+  const die = (m) => {
+    console.error(`✗ audio sync-durations: ${m}`);
+    process.exit(1);
+  };
+  const hyperframesDir = resolve(flag(argv, "hyperframes", "."));
+  const audioMetaPath = resolve(flag(argv, "audio-meta", join(hyperframesDir, "audio_meta.json")));
+  const storyboardPath = resolve(flag(argv, "storyboard", join(hyperframesDir, "STORYBOARD.md")));
+  if (!existsSync(audioMetaPath)) die(`audio_meta.json not found at ${audioMetaPath}`);
+
+  const meta = JSON.parse(readFileSync(audioMetaPath, "utf8"));
+  const durByFrame = new Map();
+  for (const v of meta.voices ?? []) {
+    if (v.frame != null && v.duration_s) durByFrame.set(v.frame, v.duration_s);
+  }
+
+  // Read directly and handle ENOENT here, rather than an existsSync precheck —
+  // the check→write pair (write-back below) is a TOCTOU race CodeQL flags.
+  let storyboardRaw = "";
+  try {
+    storyboardRaw = readFileSync(storyboardPath, "utf8");
+  } catch {
+    die(`STORYBOARD.md not found at ${storyboardPath}`);
+  }
+  const lines = storyboardRaw.split(/\r?\n/);
+  const FRAME_RE = /^#{2,3}\s+(?:frame|beat|scene)\b.*?(\d+)/i;
+  let curFrame = null;
+  let updated = 0;
+  for (let i = 0; i < lines.length; i++) {
+    const h = lines[i].match(FRAME_RE);
+    if (h) {
+      curFrame = Number(h[1]);
+      continue;
+    }
+    if (curFrame != null && durByFrame.has(curFrame)) {
+      const m = lines[i].match(/^(\s*[-*]\s+duration\s*:\s*).*/i);
+      if (m) {
+        lines[i] = `${m[1]}${durByFrame.get(curFrame)}s`;
+        durByFrame.delete(curFrame);
+        updated++;
+      }
+    }
+  }
+  writeFileSync(storyboardPath, lines.join("\n"));
+  const missing = [...durByFrame.keys()];
+  console.log(
+    `✓ audio sync-durations: ${updated} frame duration(s) updated` +
+      (missing.length ? ` · no \`- duration:\` line for frame(s) ${missing.join(", ")}` : ""),
+  );
+}
+
+// ── dispatch ──────────────────────────────────────────────────────────────────
+const sub = process.argv[2];
+if (sub === "sync-durations") runSyncDurations(process.argv.slice(3));
+else if (sub === "fetch-sfx") runFetchSfx(process.argv.slice(3));
+else runGenerate(process.argv.slice(2)); // default: generate
diff --git a/.claude/skills-media/product-launch-video/scripts/audio.test.mjs b/.claude/skills-media/product-launch-video/scripts/audio.test.mjs
new file mode 100644
index 000000000..2921d7a5f
--- /dev/null
+++ b/.claude/skills-media/product-launch-video/scripts/audio.test.mjs
@@ -0,0 +1,133 @@
+import assert from "node:assert/strict";
+import { existsSync, mkdtempSync, readFileSync, writeFileSync } from "node:fs";
+import { tmpdir } from "node:os";
+import { join } from "node:path";
+import { spawnSync } from "node:child_process";
+import test from "node:test";
+
+const script = new URL("./audio.mjs", import.meta.url).pathname;
+
+function runAudio({ args = [], env = {} } = {}) {
+  const dir = mkdtempSync(join(tmpdir(), "product-launch-audio-"));
+  const engine = join(dir, "engine.mjs");
+  writeFileSync(join(dir, "STORYBOARD.md"), "message: Test\n");
+  writeFileSync(
+    engine,
+    `import { readFileSync, writeFileSync } from "node:fs";
+const argv = process.argv.slice(2);
+const flag = (name) => argv[argv.indexOf(name) + 1];
+const request = JSON.parse(readFileSync(flag("--request"), "utf8"));
+writeFileSync(new URL("request.json", import.meta.url), JSON.stringify(request));
+writeFileSync(flag("--out"), JSON.stringify({ voices: [], bgm: null, sfx: [] }));
+`,
+  );
+  const result = spawnSync(
+    process.execPath,
+    [script, "--hyperframes", dir, "--storyboard", join(dir, "STORYBOARD.md"), ...args],
+    { encoding: "utf8", env: { ...process.env, HF_MEDIA_ENGINE: engine, ...env } },
+  );
+  assert.equal(result.status, 0, result.stderr);
+  return JSON.parse(readFileSync(join(dir, "request.json"), "utf8"));
+}
+
+test("passes --provider to the shared audio engine", () => {
+  assert.equal(runAudio({ args: ["--provider", "kokoro"] }).provider, "kokoro");
+});
+
+test("uses HF_TTS_PROVIDER when --provider is omitted", () => {
+  assert.equal(runAudio({ env: { HF_TTS_PROVIDER: "elevenlabs" } }).provider, "elevenlabs");
+});
+
+test("--provider takes precedence over HF_TTS_PROVIDER", () => {
+  assert.equal(
+    runAudio({ args: ["--provider", "kokoro"], env: { HF_TTS_PROVIDER: "elevenlabs" } }).provider,
+    "kokoro",
+  );
+});
+
+// ── the canonical fully-silent marker (SKILL.md Step 3.1) ────────────────────
+// `music: none` in the storyboard's top YAML block + no SCRIPT.md marks the
+// project fully silent: generate must produce nothing (an absent
+// audio_meta.json is what assemble treats as silent) and clear stale meta.
+
+/** Like runAudio, but with a caller-controlled storyboard and no request assertion. */
+function runAudioRaw({ storyboard, scriptMd = null, preexistingMeta = null }) {
+  const dir = mkdtempSync(join(tmpdir(), "product-launch-audio-"));
+  const engine = join(dir, "engine.mjs");
+  writeFileSync(join(dir, "STORYBOARD.md"), storyboard);
+  if (scriptMd != null) writeFileSync(join(dir, "SCRIPT.md"), scriptMd);
+  if (preexistingMeta != null) writeFileSync(join(dir, "audio_meta.json"), preexistingMeta);
+  writeFileSync(
+    engine,
+    `import { readFileSync, writeFileSync } from "node:fs";
+const argv = process.argv.slice(2);
+const flag = (name) => argv[argv.indexOf(name) + 1];
+const request = JSON.parse(readFileSync(flag("--request"), "utf8"));
+writeFileSync(new URL("request.json", import.meta.url), JSON.stringify(request));
+writeFileSync(flag("--out"), JSON.stringify({ voices: [], bgm: null, sfx: [] }));
+`,
+  );
+  const result = spawnSync(
+    process.execPath,
+    [script, "--hyperframes", dir, "--storyboard", join(dir, "STORYBOARD.md")],
+    { encoding: "utf8", env: { ...process.env, HF_MEDIA_ENGINE: engine } },
+  );
+  return { dir, result };
+}
+
+test("music: none + no SCRIPT.md = fully silent: no engine run, no audio_meta.json", () => {
+  const { dir, result } = runAudioRaw({ storyboard: "---\nmessage: Test\nmusic: none\n---\n" });
+
+  assert.equal(result.status, 0, result.stderr);
+  assert.match(result.stdout, /marked silent/);
+  // The engine was never invoked...
+  assert.equal(existsSync(join(dir, "request.json")), false);
+  // ...and no meta exists (absence ⇒ assemble treats the film as silent).
+  assert.equal(existsSync(join(dir, "audio_meta.json")), false);
+});
+
+test("fully-silent run removes stale audio_meta.json from a previous non-silent run", () => {
+  const { dir, result } = runAudioRaw({
+    storyboard: "---\nmessage: Test\nmusic: none\n---\n",
+    preexistingMeta: JSON.stringify({ bgm: { path: "old.mp3" }, voices: [], sfx: [] }),
+  });
+
+  assert.equal(result.status, 0, result.stderr);
+  assert.equal(existsSync(join(dir, "audio_meta.json")), false);
+});
+
+test("music: none with narration keeps TTS but turns BGM off (not fully silent)", () => {
+  const { dir, result } = runAudioRaw({
+    storyboard: "---\nmessage: Test\nmusic: none\n---\n",
+    scriptMd: "## Hook (Frame 1)\n\n    Spoken line for frame one.\n",
+  });
+
+  assert.equal(result.status, 0, result.stderr);
+  const request = JSON.parse(readFileSync(join(dir, "request.json"), "utf8"));
+  assert.equal(request.bgm.mode, "none");
+  assert.equal(request.lines.length, 1);
+});
+
+test('a quoted music: "none" is still the silent marker (frontmatter stripQuotes)', () => {
+  // YAML authors quote scalars freely; the vendored storyboard parser strips
+  // matching quotes at parse time (storyboard.mjs stripQuotes), so the marker
+  // must not depend on the unquoted spelling.
+  const { dir, result } = runAudioRaw({
+    storyboard: '---\nmessage: Test\nmusic: "none"\n---\n',
+  });
+
+  assert.equal(result.status, 0, result.stderr);
+  assert.match(result.stdout, /marked silent/);
+  assert.equal(existsSync(join(dir, "audio_meta.json")), false);
+});
+
+test("a storyboard music mood still retrieves BGM (marker is exact, not fuzzy)", () => {
+  const { dir, result } = runAudioRaw({
+    storyboard: "---\nmessage: Test\nmusic: upbeat synthwave with heavy drums\n---\n",
+  });
+
+  assert.equal(result.status, 0, result.stderr);
+  const request = JSON.parse(readFileSync(join(dir, "request.json"), "utf8"));
+  assert.equal(request.bgm.mode, "retrieve");
+  assert.equal(request.bgm.query, "upbeat synthwave with heavy drums");
+});
diff --git a/.claude/skills-media/product-launch-video/scripts/build-frame.mjs b/.claude/skills-media/product-launch-video/scripts/build-frame.mjs
new file mode 100644
index 000000000..269b60529
--- /dev/null
+++ b/.claude/skills-media/product-launch-video/scripts/build-frame.mjs
@@ -0,0 +1,530 @@
+#!/usr/bin/env node
+// build-frame.mjs — Step 2 design system in ONE command. The LLM only chooses a
+// preset; this does the deterministic rest: copy the preset's FRAME.md → frame.md,
+// remix its colors/typography onto the project's brand tokens, copy the preset's
+// caption-skin.html, and self-validate. "Strict on brand" is deterministic, so it's
+// a script, not LLM hand-editing (which mis-copies hex / breaks keys).
+//
+//   node build-frame.mjs --preset capsule --hyperframes .
+//     [--tokens capture/extracted/tokens.json]  [--preset-dir <abs path to frame-presets>]
+//
+// Remix rule — ONLY `colors:` values and `typography:` fontFamily change; keys,
+// structure, geometry, and components are untouched:
+//   colors — map brand tokens onto the preset's keys BY ROLE: the ink-role key takes
+//            the brand ink (darkest/ink-named), the canvas-role key takes the brand
+//            canvas (lightest), and every other color is repainted with the nearest
+//            brand accent's hue+saturation while KEEPING its own lightness, so tint
+//            families (sun / sun-soft / haze) stay a family. Empty brand colors → the
+//            preset palette is kept (it is already a complete, good design).
+//   fonts  — the preset's display family → the brand display font, its body family →
+//            the brand body font, wherever they appear. Empty brand fonts → kept.
+
+import {
+  copyFileSync,
+  existsSync,
+  mkdirSync,
+  readdirSync,
+  readFileSync,
+  writeFileSync,
+} from "node:fs";
+import { dirname, join, resolve } from "node:path";
+import { fileURLToPath } from "node:url";
+import {
+  brandRolesFromStats,
+  chroma,
+  isIconFont,
+  lum,
+  parseColors,
+  parseFonts,
+  pickAccent,
+  semanticColors,
+  STATUS_ROLE_KEY,
+  UA_DEFAULT_COLORS,
+} from "./lib/tokens.mjs";
+
+const __dirname = 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 die = (m) => {
+  console.error(`✗ build-frame: ${m}`);
+  process.exit(1);
+};
+
+const presetName = flag("preset", null);
+const hyperframesDir = resolve(flag("hyperframes", "."));
+const presetDir = resolve(
+  flag("preset-dir", join(__dirname, "../../hyperframes-creative/frame-presets")),
+);
+const tokensPath = resolve(flag("tokens", join(hyperframesDir, "capture/extracted/tokens.json")));
+
+if (!presetName) die("--preset <name> is required");
+const presetFrame = join(presetDir, presetName, "FRAME.md");
+if (!existsSync(presetFrame)) {
+  const avail = existsSync(presetDir)
+    ? readdirSync(presetDir, { withFileTypes: true })
+        .filter((d) => d.isDirectory())
+        .map((d) => d.name)
+    : [];
+  die(
+    `no FRAME.md for preset "${presetName}" under ${presetDir}\n  available: ${avail.join(", ")}`,
+  );
+}
+
+// ── HSL helpers (recolor = brand hue+sat, original lightness) ──────────────────
+function hexToHsl(hex) {
+  const m = /^#?([0-9a-fA-F]{6})$/.exec(String(hex).trim());
+  if (!m) return null;
+  const n = parseInt(m[1], 16);
+  const r = ((n >> 16) & 255) / 255,
+    g = ((n >> 8) & 255) / 255,
+    b = (n & 255) / 255;
+  const max = Math.max(r, g, b),
+    min = Math.min(r, g, b),
+    d = max - min;
+  let h = 0;
+  const l = (max + min) / 2;
+  const s = d === 0 ? 0 : l > 0.5 ? d / (2 - max - min) : d / (max + min);
+  if (d !== 0) {
+    h = max === r ? (g - b) / d + (g < b ? 6 : 0) : max === g ? (b - r) / d + 2 : (r - g) / d + 4;
+    h *= 60;
+  }
+  return { h, s, l };
+}
+function hslToHex(h, s, l) {
+  h = (((h % 360) + 360) % 360) / 360;
+  const hue = (p, q, t) => {
+    t = (t + 1) % 1;
+    if (t < 1 / 6) return p + (q - p) * 6 * t;
+    if (t < 1 / 2) return q;
+    if (t < 2 / 3) return p + (q - p) * (2 / 3 - t) * 6;
+    return p;
+  };
+  let r, g, b;
+  if (s === 0) {
+    r = g = b = l;
+  } else {
+    const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
+    const p = 2 * l - q;
+    r = hue(p, q, h + 1 / 3);
+    g = hue(p, q, h);
+    b = hue(p, q, h - 1 / 3);
+  }
+  const to = (x) =>
+    Math.round(x * 255)
+      .toString(16)
+      .padStart(2, "0")
+      .toUpperCase();
+  return `#${to(r)}${to(g)}${to(b)}`;
+}
+const hueDist = (a, b) => {
+  const d = Math.abs(a - b) % 360;
+  return d > 180 ? 360 - d : d;
+};
+function hexToRgb(hex) {
+  const m = /^#?([0-9a-fA-F]{6})$/.exec(String(hex).trim());
+  if (!m) return null;
+  const n = parseInt(m[1], 16);
+  return [(n >> 16) & 255, (n >> 8) & 255, n & 255];
+}
+const rgbToHsl = (r, g, b) =>
+  hexToHsl("#" + [r, g, b].map((x) => Math.round(x).toString(16).padStart(2, "0")).join(""));
+// Repaint a chromatic rgba()/rgb() tint with the brand accent's RGB, keeping its alpha.
+// A near-neutral rgb (shadow / scrim overlay) is left untouched; a non-rgba string → null.
+function remapRgbaToAccent(val, brAccent, brAccent2, prAccentHsl, prAccent2Hsl) {
+  const m = /^rgba?\(\s*([\d.]+)[\s,]+([\d.]+)[\s,]+([\d.]+)\s*(?:[,/]\s*([\d.]+%?))?\s*\)$/i.exec(
+    String(val).trim(),
+  );
+  if (!m) return null;
+  const r = +m[1],
+    g = +m[2],
+    b = +m[3],
+    a = m[4];
+  if (Math.max(r, g, b) - Math.min(r, g, b) < 16) return null; // neutral overlay — keep as-is
+  const src = rgbToHsl(r, g, b);
+  const useSecond =
+    brAccent2 &&
+    prAccentHsl &&
+    prAccent2Hsl &&
+    src &&
+    hueDist(src.h, prAccent2Hsl.h) < hueDist(src.h, prAccentHsl.h);
+  const t = hexToRgb(useSecond ? brAccent2 : brAccent);
+  if (!t) return null;
+  return a !== undefined
+    ? `rgba(${t[0]}, ${t[1]}, ${t[2]}, ${a})`
+    : `rgb(${t[0]}, ${t[1]}, ${t[2]})`;
+}
+
+// ── brand tokens ──────────────────────────────────────────────────────────────
+let brandColors = [];
+let brandFonts = [];
+let brandFontWeights = []; // weights the brand text font actually ships (tokens fonts[].weights)
+let brandColorStats = []; // rich per-color usage stats (areaBg / interactiveBg / textCount …)
+// Icon/glyph fonts capture surfaces as "fonts" — they are never the brand text face
+// (webflow-icons, Font Awesome, icomoon …) and must not become display/body or contribute weights.
+if (existsSync(tokensPath)) {
+  try {
+    const t = JSON.parse(readFileSync(tokensPath, "utf8"));
+    brandColors = (t.colors ?? [])
+      .map((c) => (typeof c === "string" ? c : (c?.hex ?? c?.value ?? "")))
+      .map((c) => String(c).trim())
+      .filter((c) => /^#?[0-9a-fA-F]{6}$/.test(c))
+      .map((c) => (c.startsWith("#") ? c : `#${c}`));
+    brandFonts = (t.fonts ?? [])
+      .map((f) => (typeof f === "string" ? f : (f?.family ?? f?.name ?? "")))
+      .map((f) => String(f).split(",")[0].replace(/['"]/g, "").trim())
+      .filter(Boolean)
+      .filter((f) => !isIconFont(f));
+    // Union of the (non-icon) brand fonts' available weights — used to clamp the preset's
+    // type ramp so a font shipping only 400/500 never faux-bolds a 600/700 heading.
+    brandFontWeights = [
+      ...new Set(
+        (t.fonts ?? [])
+          .filter((f) => f && typeof f === "object" && !isIconFont(f.family ?? f.name ?? ""))
+          .flatMap((f) => (Array.isArray(f.weights) ? f.weights : []))
+          .map((w) => parseInt(w, 10))
+          .filter((w) => Number.isFinite(w)),
+      ),
+    ].sort((a, b) => a - b);
+    brandColorStats = Array.isArray(t.colorStats) ? t.colorStats : [];
+  } catch (e) {
+    die(`tokens.json parse: ${e.message}`);
+  }
+}
+
+let md = readFileSync(presetFrame, "utf8");
+const presetColors = parseColors(md);
+const summary = [];
+
+// ── color remix ───────────────────────────────────────────────────────────────
+if (brandColors.length && presetColors.length) {
+  const pr = semanticColors(presetColors);
+  // Brand roles: prefer the function-based reading of capture colorStats (canvas =
+  // largest background, accent = top interactive bg, ink = dominant contrasting text).
+  // Fall back to the legacy luminance/chroma heuristic only when stats are absent —
+  // but pick the accent via pickAccent either way so a UA-default link color never wins.
+  const br =
+    brandRolesFromStats(brandColorStats, brandColors) ??
+    (() => {
+      // strip UA-default link colors so a stray <a> color can't become ink/canvas/accent
+      const clean = brandColors.filter((h) => !UA_DEFAULT_COLORS.has(h.toUpperCase()));
+      const s = semanticColors(clean.map((h, i) => [`c${i}`, h]));
+      return {
+        ink: s.ink,
+        canvas: s.canvas,
+        accent: pickAccent(brandColorStats, clean, [s.ink, s.canvas]) ?? s.accent,
+        accent2: s.accent2,
+      };
+    })();
+  if (!br.accent) die("accent 选取失败：品牌色里没有可用的强调色");
+  if (chroma(br.accent) <= 40) {
+    console.warn(
+      `  ⚠ accent ${br.accent} 彩度很低 (${chroma(br.accent)}) — 确认这是品牌色而非中性/默认色`,
+    );
+  }
+  // Map by LUMINANCE POLARITY. The preset's darker value takes the brand's darker value and
+  // the lighter takes the lighter — UNLESS the brand's GROUND polarity differs from the
+  // preset's. Every shipped preset is light-ground; a dark-mode brand (Linear, Vercel,
+  // Raycast…) has its canvas darker than its ink (colorStats already resolved the real
+  // ground as the largest-area background). On a polarity MISMATCH we INVERT the mapping so a
+  // light preset becomes the dark brand (canvas↔ink swap) instead of forcing the brand onto
+  // an off-brand light video; neutral/tint lightness is then mirrored (L→1−L) so the whole
+  // palette flips to the brand's ground. Same-polarity (the common case) is unchanged.
+  const darker = (a, b) => ((lum(a) ?? 0) <= (lum(b) ?? 0) ? a : b);
+  const prDark = darker(pr.ink, pr.canvas);
+  const prLight = prDark === pr.ink ? pr.canvas : pr.ink;
+  const brDark = darker(br.ink, br.canvas);
+  const brLight = brDark === br.ink ? br.canvas : br.ink;
+  const presetGroundDark = (lum(pr.canvas) ?? 255) < (lum(pr.ink) ?? 0);
+  const brandGroundDark = (lum(br.canvas) ?? 255) < (lum(br.ink) ?? 0);
+  const invert = presetGroundDark !== brandGroundDark;
+  const mapDark = invert ? brLight : brDark; // preset's dark value → this brand value
+  const mapLight = invert ? brDark : brLight; // preset's light value → this brand value
+  const flipL = (l) => (invert ? 1 - l : l); // mirror tint/neutral lightness when flipping
+  const prAccentHsl = hexToHsl(pr.accent);
+  const prAccent2Hsl = hexToHsl(pr.accent2);
+  const newByKey = new Map();
+  for (const [key, val] of presetColors) {
+    const ph = hexToHsl(val);
+    let next;
+    if (val === prDark) next = mapDark;
+    else if (val === prLight) next = mapLight;
+    else if (STATUS_ROLE_KEY.test(key))
+      // semantic status colors (green/red …) — the HUE carries the meaning; never repaint.
+      // MUST precede the accent checks: a preset's red "negative" is often its 2nd-most-chromatic
+      // color and would otherwise be claimed as accent2 and recolored to the brand hue.
+      next = val;
+    else if (val === pr.accent)
+      next = br.accent; // primary accent → the EXACT brand color
+    else if (pr.accent2 !== pr.accent && val === pr.accent2)
+      next = br.accent2; // exact 2nd accent
+    else if (!ph) {
+      // rgba()/rgb() tint → repaint its rgb with the brand accent, keep alpha (a neutral
+      // overlay is kept). A non-color non-hex value (var(), named) falls through unchanged.
+      next = remapRgbaToAccent(val, br.accent, br.accent2, prAccentHsl, prAccent2Hsl) ?? val;
+    } else if (chroma(val) < 16) {
+      // NEUTRAL source (grey text-ladder, hairline borders) → keep it NEUTRAL. Apply at most a
+      // whisper of the brand hue (sat ≤ 0.06); never the accent's full saturation — that is what
+      // turned the grey ladder into saturated blue.
+      const bh = hexToHsl(br.accent);
+      next = bh ? hslToHex(bh.h, Math.min(ph.s, 0.06), flipL(ph.l)) : val;
+    } else {
+      // chromatic tint → repaint with the nearest brand accent's hue+sat, keep THIS color's
+      // lightness so tint families stay families.
+      const useSecond =
+        pr.accent !== pr.accent2 &&
+        prAccentHsl &&
+        prAccent2Hsl &&
+        hueDist(ph.h, prAccent2Hsl.h) < hueDist(ph.h, prAccentHsl.h);
+      const bh = hexToHsl(useSecond ? br.accent2 : br.accent);
+      next = bh ? hslToHex(bh.h, bh.s, flipL(ph.l)) : val;
+    }
+    if (next !== val) newByKey.set(key, next);
+  }
+  // rewrite only the value of each colors: line; everything else byte-identical.
+  let inBlock = false;
+  md = md
+    .split(/\r?\n/)
+    .map((line) => {
+      if (/^colors:\s*$/.test(line)) {
+        inBlock = true;
+        return line;
+      }
+      if (inBlock && /^\S/.test(line)) inBlock = false;
+      if (!inBlock) return line;
+      const m = line.match(
+        /^(\s+)([\w-]+):\s*(?:"[^"]*"|'[^']*'|#[0-9a-fA-F]{3,8}|rgba?\([^)]*\)|[^#\n]*?)(\s+#.*)?$/,
+      );
+      if (m && newByKey.has(m[2])) return `${m[1]}${m[2]}: "${newByKey.get(m[2])}"${m[3] ?? ""}`;
+      return line;
+    })
+    .join("\n");
+  summary.push(
+    `colors: ${invert ? "INVERTED (dark-mode brand on light preset) · " : ""}dark ${prDark}→${mapDark}, light ${prLight}→${mapLight}, accent ${pr.accent}→${br.accent}` +
+      ` (${newByKey.size}/${presetColors.length} keys repainted${brandColorStats.length ? ", via colorStats" : ""})`,
+  );
+} else {
+  summary.push(
+    brandColors.length
+      ? "colors: preset has no parseable colors — kept"
+      : "colors: no brand colors — preset palette kept",
+  );
+}
+
+// ── font remix ────────────────────────────────────────────────────────────────
+if (brandFonts.length) {
+  const pf = parseFonts(md);
+  const strip = (q) => (q ? q.replace(/^"|"$/g, "") : null);
+  const pDisplay = strip(pf.display);
+  const pBody = strip(pf.body);
+  const pMono = strip(pf.mono);
+  // A monospace brand face is for code / labels / chrome — never the reading display or body.
+  // Split the brand fonts: the primary NON-mono family carries display AND body (the common
+  // single-sans case, e.g. Inter for everything), and a captured mono (Berkeley Mono,
+  // JetBrains Mono…) is routed onto the preset's mono role instead of turning the body
+  // monospace. (Distinct display/body brands still resolve to a clean sans; hand-tune the
+  // display in frame.md if a separate display face is wanted.)
+  const isMonoFont = (n) =>
+    /(?:^|[\s_-])mono(?:[\s_-]|$)|monospace|consol|courier|menlo|monaco|jetbrains|berkeley|space\s*mono|ibm\s*plex\s*mono|sf\s*mono|roboto\s*mono|source\s*code|fira\s*code|geist\s*mono|dm\s*mono/i.test(
+      String(n),
+    );
+  const nonMono = brandFonts.filter((f) => !isMonoFont(f));
+  const monoFonts = brandFonts.filter(isMonoFont);
+  const bDisplay = nonMono[0] ?? brandFonts[0];
+  const bBody = nonMono[0] ?? brandFonts[0];
+  const bMono = monoFonts[0] ?? null;
+  const escRe = (s) => s.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+  // Replace the preset family as a WHOLE WORD/PHRASE everywhere — frontmatter values,
+  // component strings like "Space Grotesk 600", AND prose — case-sensitive with word
+  // boundaries so a single-word family ("Inter") can never corrupt a substring
+  // ("interactive"). Quote-exact replace alone missed names baked into longer strings + prose.
+  const swapFamily = (from, to) => {
+    if (from && to && from !== to) md = md.replace(new RegExp(`\\b${escRe(from)}\\b`, "g"), to);
+  };
+  swapFamily(pDisplay, bDisplay);
+  if (pBody !== pDisplay) swapFamily(pBody, bBody);
+  // route the brand mono onto the preset's mono role (only if the preset has a DISTINCT mono
+  // family — never collapse body/display into mono)
+  if (bMono && pMono && pMono !== pBody && pMono !== pDisplay) swapFamily(pMono, bMono);
+  summary.push(
+    `fonts: display ${pDisplay}→${bDisplay}, body ${pBody}→${bBody}` +
+      (bMono && pMono && pMono !== pBody && pMono !== pDisplay ? `, mono ${pMono}→${bMono}` : ""),
+  );
+} else {
+  summary.push("fonts: no brand fonts — preset fonts kept");
+}
+
+// ── cap type weights to the brand font's available faces ──────────────────────
+// The remix swaps the font FAMILY but keeps the preset's weights; a brand font that ships
+// only e.g. 400/500 would faux-bold every 600/700 heading. Clamp each `typography:` weight
+// to the NEAREST weight the brand font actually provides (tokens.json fonts[].weights).
+if (brandFonts.length && brandFontWeights.length) {
+  const avail = brandFontWeights;
+  const nearest = (n) =>
+    avail.reduce((best, w) => {
+      const dw = Math.abs(w - n),
+        db = Math.abs(best - n);
+      return dw < db || (dw === db && w > best) ? w : best;
+    }, avail[0]);
+  let capped = 0;
+  const cap = (num) => {
+    const n = parseInt(num, 10);
+    if (avail.includes(n)) return String(n);
+    const c = nearest(n);
+    if (c !== n) capped++;
+    return String(c);
+  };
+  let inType = false;
+  md = md
+    .split(/\r?\n/)
+    .map((line) => {
+      if (/^typography:\s*$/.test(line)) {
+        inType = true;
+        return line;
+      }
+      if (inType && /^\S/.test(line)) inType = false;
+      let out = line;
+      // (a) structured `weight: NNN` in the typography ramp
+      if (inType) out = out.replace(/(\bweight:\s*)(\d{3})\b/g, (m, pfx, num) => pfx + cap(num));
+      // (b) a weight baked into a quoted `typography:` component value, e.g.
+      //     cta-button → typography: "Basier Square 600"  (NNN not followed by a unit like px)
+      out = out.replace(
+        /(typography:\s*"[^"]*?\b)(\d{3})\b(?![a-z%])/gi,
+        (m, pfx, num) => pfx + cap(num),
+      );
+      return out;
+    })
+    .join("\n");
+  if (capped)
+    summary.push(`fonts: capped ${capped} type weight(s) to brand faces {${avail.join(", ")}}`);
+}
+
+// ── brand-adaptation note ─────────────────────────────────────────────────────
+// The remix fixes the NORMATIVE frontmatter, but the preset's PROSE still carries its
+// original weight ranges / color-names. Prepend a short "frontmatter is truth" header so a
+// reader (or frame worker) interprets any lingering preset prose THROUGH the brand values —
+// instead of fragile per-sentence prose surgery.
+if (brandFonts.length || (brandColors.length && presetColors.length)) {
+  const bD = brandFonts[0];
+  const bB = brandFonts[1] ?? brandFonts[0];
+  const note =
+    `## Brand adaptation (READ FIRST — the frontmatter is the source of truth)\n\n` +
+    `This is the **${presetName}** preset remixed onto the captured brand. The YAML frontmatter above ` +
+    `(colors · typography · components) is **normative and already correct — use it verbatim.** The prose ` +
+    `below is the ORIGINAL preset's intent; read it THROUGH the frontmatter:\n\n` +
+    (brandFonts.length
+      ? `- **Fonts** — already set to **${bD}** (display) / **${bB}** (body); ignore any preset font name lingering in prose.\n`
+      : "") +
+    (brandFontWeights.length
+      ? `- **Weights** — the brand font ships \`{${brandFontWeights.join(", ")}}\` only; every weight is clamped to these — ignore higher preset weights (e.g. 600/700) in prose.\n`
+      : "") +
+    `- **Colors** — use the frontmatter hex; preset color NAMES in prose (e.g. "cobalt", "cream") mean the remapped brand values.\n`;
+  if (/^# .*$/m.test(md)) md = md.replace(/^# .*$/m, (m) => `${m}\n\n${note}`);
+  else md = `${note}\n${md}`;
+  summary.push("brand-adaptation note prepended");
+}
+
+// ── stage brand font files + emit @font-face ──────────────────────────────────
+// A brand font is rarely a Google font, so renaming the family in frame.md is not enough:
+// nothing loads the actual face. If the capture downloaded font files, copy them to
+// assets/fonts/ under CLEAN, weight-named names (so captions.mjs' family-prefix matcher
+// finds them too) and append a ready-to-paste, ROOT-RELATIVE @font-face block to frame.md.
+if (brandFonts.length) {
+  const norm = (s) =>
+    String(s)
+      .toLowerCase()
+      .replace(/[^a-z0-9]/g, "");
+  const extOf = (f) => (f.match(/\.(woff2|woff|ttf|otf)$/i)?.[1] ?? "").toLowerCase();
+  const FMT = { woff2: "woff2", woff: "woff", ttf: "truetype", otf: "opentype" };
+  const weightInfo = (name) => {
+    const s = name.toLowerCase();
+    if (/black|heavy|ultra|extrabold/.test(s)) return { n: 800, w: "ExtraBold" };
+    if (/semibold|demibold/.test(s)) return { n: 600, w: "SemiBold" };
+    if (/bold/.test(s)) return { n: 700, w: "Bold" };
+    if (/medium/.test(s)) return { n: 500, w: "Medium" };
+    if (/light|thin/.test(s)) return { n: 300, w: "Light" };
+    return { n: 400, w: "Regular" };
+  };
+  const fams = [...new Set(brandFonts)];
+  const srcDirs = [
+    join(hyperframesDir, "capture/assets/fonts"),
+    join(hyperframesDir, "assets/fonts"),
+  ].filter((d) => existsSync(d));
+  const files = [];
+  for (const d of srcDirs)
+    for (const f of readdirSync(d).sort()) if (extOf(f)) files.push({ d, f });
+  // Single family → all font files belong to it (the common captured case, hash-named files
+  // included). Multiple families → assign each file to the longest family key its name contains.
+  const ranked = [...fams].sort((a, b) => norm(b).length - norm(a).length);
+  const famOf = (f) =>
+    fams.length === 1 ? fams[0] : ranked.find((x) => norm(f).includes(norm(x)));
+  const outDir = join(hyperframesDir, "assets/fonts");
+  const faces = [];
+  const stagedNames = new Set();
+  for (const { d, f } of files) {
+    const fam = famOf(f);
+    if (!fam) continue;
+    const { n, w } = weightInfo(f);
+    const clean = `${fam.replace(/[^A-Za-z0-9]/g, "")}-${w}.${extOf(f)}`;
+    if (stagedNames.has(clean)) continue;
+    mkdirSync(outDir, { recursive: true });
+    if (!existsSync(join(outDir, clean))) copyFileSync(join(d, f), join(outDir, clean));
+    stagedNames.add(clean);
+    faces.push(
+      `@font-face{font-family:"${fam}";font-weight:${n};font-style:normal;font-display:block;src:url("assets/fonts/${clean}") format("${FMT[extOf(f)]}");}`,
+    );
+  }
+  if (faces.length) {
+    md +=
+      `\n\n## Font loading (auto-generated)\n\n` +
+      `The brand font ships as local files in \`assets/fonts/\` — do NOT link Google Fonts for it. ` +
+      `Paste this \`<style>\` into every frame's \`<head>\`/\`<template>\` (captions use the same files) ` +
+      `so \`font-family\` resolves in preview, snapshot, and render alike:\n\n` +
+      "```html\n<style>\n" +
+      faces.join("\n") +
+      "\n</style>\n```\n";
+    summary.push(
+      `fonts: staged ${stagedNames.size} face(s) → assets/fonts/ + @font-face in frame.md`,
+    );
+  }
+}
+
+// ── write frame.md ────────────────────────────────────────────────────────────
+const framePath = join(hyperframesDir, "frame.md");
+writeFileSync(framePath, md);
+
+// ── copy caption-skin.html ────────────────────────────────────────────────────
+const presetSkin = join(presetDir, presetName, "caption-skin.html");
+let skinCopied = false;
+if (existsSync(presetSkin)) {
+  const skinDir = join(hyperframesDir, ".hyperframes");
+  mkdirSync(skinDir, { recursive: true });
+  copyFileSync(presetSkin, join(skinDir, "caption-skin.html"));
+  skinCopied = true;
+}
+
+// ── self-validate ─────────────────────────────────────────────────────────────
+const outColors = parseColors(md);
+if (outColors.length !== presetColors.length) {
+  die(`color keys changed (${presetColors.length}→${outColors.length}) — keys must be preserved`);
+}
+const outRoles = semanticColors(outColors);
+const li = lum(outRoles.ink),
+  lc = lum(outRoles.canvas);
+// ink (type) and canvas (ground) must differ enough to READ — in EITHER direction. A
+// light-mode spec has ink darker than canvas; a dark-mode spec (the polarity flip above)
+// the reverse. Assert luminance SEPARATION, not a fixed polarity.
+if (li != null && lc != null && Math.abs(li - lc) < 40) {
+  die(
+    `ink (${outRoles.ink}, lum ${li.toFixed(0)}) and canvas (${outRoles.canvas}, lum ${lc.toFixed(0)}) lack contrast — bad brand mapping`,
+  );
+}
+
+console.log(`✓ build-frame: ${presetName} → ${framePath}`);
+for (const s of summary) console.log(`  ${s}`);
+console.log(
+  `  .hyperframes/caption-skin.html: ${skinCopied ? "copied" : "preset ships none — captions will use the default pill"}`,
+);
+console.log(`  self-check: keys preserved, ink/canvas contrast ok ✓`);
diff --git a/.claude/skills-media/product-launch-video/scripts/captions.mjs b/.claude/skills-media/product-launch-video/scripts/captions.mjs
new file mode 100644
index 000000000..1203b57c6
--- /dev/null
+++ b/.claude/skills-media/product-launch-video/scripts/captions.mjs
@@ -0,0 +1,499 @@
+#!/usr/bin/env node
+// captions.mjs — build the captions sub-composition from STORYBOARD + audio_meta.
+//
+// One mode: `build`. Reads STORYBOARD.md (frame order + durations → cumulative
+// frame starts) + audio_meta.json (voices[].words, frame-relative) → absolute-
+// timed caption groups → writes:
+//   compositions/captions.html  — a self-contained sub-composition the index
+//        assembler mounts on its captions track (data-composition-id="captions").
+//   caption_groups.json         — the computed groups (debug / inspection / --out).
+//   caption-overrides.json      — an empty `[]` shim (silences the captions runtime's
+//        validate-time fetch; only written when captions.html is).
+// No narration / no words → legal skip: nothing written, assemble-index then omits
+// the captions track (it keys off compositions/captions.html existence).
+//
+//   node captions.mjs build --storyboard ./STORYBOARD.md --audio-meta ./audio_meta.json --hyperframes . --out ./caption_groups.json
+//
+// CAPTION LOOK — two sources, picked automatically:
+//   1. PRESET SKIN (preferred). If a project-local `.hyperframes/caption-skin.html`
+//      exists (Step 2 copies the chosen frame-preset's skin into the project), it is
+//      the caption look.
+//      It is a brand-token-strict skin with three reserved holes; this script fills them
+//      and wraps the result in a <template> for the engine:
+//        - `var GROUPS = [];`            → the computed caption groups
+//        - `var DURATION = 0;` + data-duration="0" (and data-width/height="0") → real values
+//        - `<style data-brand-tokens></style>` → :root tokens derived from the project's
+//          frame.md (colors + fonts), mapped to a fixed semantic vocab every skin shares:
+//          --cap-ink / --cap-canvas / --cap-accent / --cap-accent-2 / --font-display /
+//          --font-body, plus --cap-band-top / --cap-band-height (the keep-out band).
+//      So the brand-token overlay from Step 2 flows into the captions automatically.
+//   2. DEFAULT (fallback). No skin file → the built-in Roboto/black pill (buildCaptionsHtml).
+//
+// Grouping mirrors the proven heuristics (frame boundary · sentence-end punct ·
+// silence gap · density-aware word cap); word timings come inline from audio_meta.
+
+import { existsSync, mkdirSync, readdirSync, readFileSync, writeFileSync } from "node:fs";
+import { dirname, join, resolve } from "node:path";
+import { fileURLToPath } from "node:url";
+import { parseStoryboard } from "./lib/storyboard.mjs";
+import { captionBand, parseFormat } from "./lib/dimensions.mjs";
+import { parseColors, parseFonts, semanticColors } from "./lib/tokens.mjs";
+
+const flag = (argv, name, def) => {
+  const i = argv.indexOf(`--${name}`);
+  return i >= 0 && i + 1 < argv.length ? argv[i + 1] : def;
+};
+const r3 = (x) => Number(x.toFixed(3));
+
+// ── grouping params ───────────────────────────────────────────────────────────
+const SILENCE_GAP = 0.18; // s of silence between words → split
+const TAIL_PAD = 0.12; // s the group lingers after its last word
+const SENT_END = /[.?!,;:—]$/;
+const DENSITY_WINDOW = 1.0; // s window for words/sec density
+function wordCap(density) {
+  return density > 3.5 ? 2 : density > 2.5 ? 3 : 4;
+}
+
+function runBuild(argv) {
+  const skip = (reason) => {
+    console.log(`captions: skipped (${reason})`);
+    process.exit(0);
+  };
+  const die = (m) => {
+    console.error(`✗ captions build: ${m}`);
+    process.exit(1);
+  };
+
+  const hyperframesDir = resolve(flag(argv, "hyperframes", "."));
+  const storyboardPath = resolve(flag(argv, "storyboard", join(hyperframesDir, "STORYBOARD.md")));
+  const audioMetaPath = resolve(flag(argv, "audio-meta", join(hyperframesDir, "audio_meta.json")));
+  const outPath = resolve(flag(argv, "out", join(hyperframesDir, "caption_groups.json")));
+  const htmlPath = join(hyperframesDir, "compositions/captions.html");
+  const overridesPath = join(hyperframesDir, "caption-overrides.json");
+  const skinArg = flag(argv, "skin", null);
+  const hiddenSkinPath = join(hyperframesDir, ".hyperframes", "caption-skin.html");
+  const legacySkinPath = join(hyperframesDir, "caption-skin.html");
+  const skinPath = resolve(
+    skinArg ?? (existsSync(hiddenSkinPath) ? hiddenSkinPath : legacySkinPath),
+  );
+  const framePath = resolve(flag(argv, "frame", join(hyperframesDir, "frame.md")));
+
+  if (!existsSync(storyboardPath)) die(`STORYBOARD.md not found at ${storyboardPath}`);
+  const manifest = parseStoryboard(readFileSync(storyboardPath, "utf8"));
+  const { width: W, height: H } = parseFormat(manifest.globals.format);
+
+  if (!existsSync(audioMetaPath)) skip("no audio_meta.json (silent film)");
+  const meta = JSON.parse(readFileSync(audioMetaPath, "utf8"));
+  if (!Array.isArray(meta.voices) || meta.voices.length === 0) skip("no narration");
+
+  // cumulative frame starts (by frame number) + total duration, from STORYBOARD.
+  const startByFrame = new Map();
+  let acc = 0;
+  for (const f of manifest.frames) {
+    if (f.number != null) startByFrame.set(f.number, acc);
+    acc += Number.isFinite(f.durationSeconds) ? f.durationSeconds : 0;
+  }
+  const total = r3(acc);
+
+  // absolute word stream: frame start + frame-relative word timing.
+  const words = [];
+  for (const v of meta.voices) {
+    const base = startByFrame.get(v.frame);
+    if (base == null || !Array.isArray(v.words)) continue;
+    for (const w of v.words) {
+      const text = String(w.text ?? "").trim();
+      if (!text || /^[.?!,;:—–-]+$/.test(text)) continue; // drop empties + bare punctuation
+      if (!isFinite(w.start) || !isFinite(w.end)) continue;
+      words.push({ text, start: r3(base + w.start), end: r3(base + w.end), frame: v.frame });
+    }
+  }
+  words.sort((a, b) => a.start - b.start);
+  if (words.length === 0) skip("no usable words");
+
+  // density at i = words whose start falls within [w.start, w.start + WINDOW).
+  const densityAt = (i) => {
+    const t0 = words[i].start;
+    let n = 0;
+    for (let j = i; j < words.length && words[j].start < t0 + DENSITY_WINDOW; j++) n++;
+    return n / DENSITY_WINDOW;
+  };
+
+  // group: split on frame change / silence gap / word cap; always flush after a
+  // sentence-ending word.
+  const groups = [];
+  let cur = null;
+  for (let i = 0; i < words.length; i++) {
+    const w = words[i];
+    const prev = cur && cur.words[cur.words.length - 1];
+    const crossFrame = cur && w.frame !== cur.frame;
+    const gap = prev && w.start - prev.end > SILENCE_GAP;
+    const full = cur && cur.words.length >= cur.cap;
+    if (!cur || crossFrame || gap || full) {
+      if (cur) groups.push(cur);
+      cur = { frame: w.frame, cap: wordCap(densityAt(i)), words: [] };
+    }
+    cur.words.push(w);
+    if (SENT_END.test(w.text)) {
+      groups.push(cur);
+      cur = null;
+    }
+  }
+  if (cur) groups.push(cur);
+
+  // finalize: ids, start/end (tail-padded, clamped < next group's start), text.
+  const finalized = groups.map((g, gi) => {
+    const first = g.words[0];
+    const last = g.words[g.words.length - 1];
+    const next = groups[gi + 1];
+    let end = r3(last.end + TAIL_PAD);
+    if (next && next.words[0].start < end) end = r3(next.words[0].start);
+    return {
+      id: `caption-group-${gi}`,
+      frame: g.frame,
+      start: r3(first.start),
+      end,
+      text: g.words.map((w) => w.text).join(" "),
+      words: g.words.map((w, wi) => ({
+        id: `caption-word-${gi}-${wi}`,
+        text: w.text,
+        start: r3(w.start),
+        end: r3(w.end),
+      })),
+    };
+  });
+
+  // ── write caption_groups.json ──
+  mkdirSync(dirname(outPath), { recursive: true });
+  writeFileSync(
+    outPath,
+    JSON.stringify({ total_duration_s: total, width: W, height: H, groups: finalized }, null, 2),
+  );
+
+  // ── write compositions/captions.html (preset skin if present, else default) ──
+  mkdirSync(dirname(htmlPath), { recursive: true });
+  let source;
+  if (existsSync(skinPath)) {
+    const tokens = frameTokensCss(framePath, H);
+    const faces = brandFontFaces(framePath, hyperframesDir);
+    const fonts = existsSync(framePath) ? parseFonts(readFileSync(framePath, "utf8")) : {};
+    writeFileSync(
+      htmlPath,
+      buildFromSkin(
+        readFileSync(skinPath, "utf8"),
+        finalized,
+        total,
+        W,
+        H,
+        tokens,
+        die,
+        faces,
+        fonts,
+      ),
+    );
+    source = `preset skin (${skinPath.replace(hyperframesDir + "/", "")})`;
+  } else {
+    writeFileSync(htmlPath, buildCaptionsHtml(finalized, total, W, H));
+    source = "default (built-in pill)";
+  }
+
+  // ── write caption-overrides.json shim ──
+  // Atomic create-if-absent: `wx` throws if the file already exists (which we
+  // ignore) — no existsSync→writeFileSync TOCTOU gap.
+  try {
+    writeFileSync(overridesPath, "[]\n", { flag: "wx" });
+  } catch {
+    /* overrides shim already present */
+  }
+
+  console.log(
+    `✓ captions build: ${finalized.length} group(s) from ${words.length} words → compositions/captions.html (total ${total}s) · skin: ${source}`,
+  );
+}
+
+// ── preset-skin path ────────────────────────────────────────────────────────
+// Fill the skin's three reserved holes + the root's 0-placeholders, then wrap the
+// fragment in a <template> (the engine clones template contents only). One generic
+// fill works for every preset's skin — no per-skin transform.
+//
+// Every preset's skin is authored against ITS OWN fonts/metrics (broadside→Barlow @
+// line-height 1.02, capsule→Bodoni, …). When the project's brand font differs (it
+// almost always does), three things must be reconciled so ANY skin renders correctly
+// for ANY brand — done here generically, not per-project:
+//   · @font-face for the brand fonts (else the renderer can't supply them → fallback)
+//   · the skin's preset-font FALLBACK literals (var(--font-x, "Barlow")) repointed to
+//     the brand family, so no undeclared font name trips font_family_without_font_face
+//   · a metric safety net: a heavier brand font overflows a tight preset line-height,
+//     so the active-word highlight clips — a line-height floor + word padding fixes it
+//   · data-composition-id + dimensions on the <template> root (skins lead with
+//     <script>/<style>, so the root element must carry the id, not the first child)
+function buildFromSkin(skin, groups, total, W, H, tokens, die, faces = "", fonts = {}) {
+  const fillOnce = (src, re, repl, label) => {
+    const n = (src.match(re) || []).length;
+    if (n !== 1) die(`caption-skin.html: expected exactly one ${label}, found ${n}`);
+    return src.replace(re, () => repl);
+  };
+  let out = skin;
+  // Strip HTML doc-comments first. A skin's authoring comment can contain tag-like text
+  // (broadside's literally says "<template>"), which the linter's tag scanner then picks
+  // up as the root element → false root_missing_composition_id / root_missing_dimensions.
+  // The comments are preview/authoring docs, not needed in the generated composition.
+  // Strip in a fixpoint loop, not a single global pass: removing one comment can
+  // re-form a marker from a nested/partial pair (e.g. <!--<!---->-->), which one
+  // pass misses — CodeQL flags the single replace as incomplete sanitization.
+  for (let prev = ""; prev !== out; ) {
+    prev = out;
+    out = out.replace(/<!--[\s\S]*?-->/g, "");
+  }
+  // brand :root tokens + @font-face for the brand fonts, both into the reserved hole
+  out = fillOnce(
+    out,
+    /<style data-brand-tokens>\s*<\/style>/,
+    `<style data-brand-tokens>\n${faces ? faces + "\n" : ""}${tokens}\n    </style>`,
+    "<style data-brand-tokens></style> hole",
+  );
+  // Resolve the skin's font-family var()s to the brand family LITERAL. Two reasons:
+  //  (1) the linter's used-font scanner naively comma-splits, so var(--x, "Brand") yields
+  //      junk tokens ('var(--x', 'brand")') that never match the @font-face → a false
+  //      font_family_without_font_face; a plain "Brand" literal matches the @font-face.
+  //  (2) it drops the preset's own fallback name (Barlow / IBM Plex Mono / …), which has
+  //      no @font-face in this project. The :root token stays for any other consumer.
+  if (fonts.display)
+    out = out.replace(/var\(\s*--font-display\s*(?:,\s*"[^"]*"\s*)?\)/g, fonts.display);
+  if (fonts.body) out = out.replace(/var\(\s*--font-body\s*(?:,\s*"[^"]*"\s*)?\)/g, fonts.body);
+  out = fillOnce(
+    out,
+    /var GROUPS = \[\];/,
+    `var GROUPS = ${JSON.stringify(groups)};`,
+    "`var GROUPS = [];` hole",
+  );
+  out = fillOnce(out, /var DURATION = 0;/, `var DURATION = ${total};`, "`var DURATION = 0;` hole");
+  out = fillOnce(out, /data-duration="0"/, `data-duration="${total}"`, '`data-duration="0"` hole');
+  out = fillOnce(out, /data-width="0"/, `data-width="${W}"`, '`data-width="0"` hole');
+  out = fillOnce(out, /data-height="0"/, `data-height="${H}"`, '`data-height="0"` hole');
+  // font-robust safety net — appended last so it wins the cascade over the skin's own
+  // (preset-font-tuned) line-height. Kept SNUG (1.1) so the plate hugs the text. NO extra
+  // word/pill padding: inspect's `text_box_overflow` on the highlight words is a cosmetic
+  // false-positive here (heavy-glyph ink slightly exceeds the line box, but there's no
+  // overflow:hidden — nothing is clipped); zeroing it would need an airy line-height that
+  // balloons the pill, which is worse. Override only if a brand font genuinely clips.
+  out += "\n<style>\n  .caption-line { line-height: 1.1 !important; }\n</style>";
+  return `<template id="captions-template" data-composition-id="captions" data-width="${W}" data-height="${H}">\n${out.trim()}\n</template>\n`;
+}
+
+export { buildFromSkin };
+
+// @font-face for the brand display/body fonts, matched from the project's font dirs
+// (staged assets/fonts first, else capture/assets/fonts) by family-name prefix, with
+// weight parsed from the filename. Paths are relative to compositions/captions.html.
+// Returns "" when frame.md or font files are absent (then the skin's fallback applies).
+function brandFontFaces(framePath, hyperframesDir) {
+  if (!existsSync(framePath)) return "";
+  const { display, body } = parseFonts(readFileSync(framePath, "utf8"));
+  const families = [
+    ...new Set([display, body].filter(Boolean).map((f) => f.replace(/^"|"$/g, ""))),
+  ];
+  if (!families.length) return "";
+  const dirs = [
+    // ROOT-RELATIVE — compositions are served with the project root as their base URL, so a
+    // "../" prefix escapes the root (lint: invalid_parent_traversal_in_asset_path) and 404s in
+    // Studio/preview. Mirror what the frame workers use for images.
+    { abs: join(hyperframesDir, "assets/fonts"), rel: "assets/fonts" },
+    { abs: join(hyperframesDir, "capture/assets/fonts"), rel: "capture/assets/fonts" },
+  ].filter((d) => existsSync(d.abs));
+  const weightOf = (n) => {
+    const s = n.toLowerCase();
+    if (/black|heavy|ultra|extrabold/.test(s)) return 800;
+    if (/semibold|demibold/.test(s)) return 600; // before /bold/ — "demibold" contains "bold"
+    if (/bold/.test(s)) return 700;
+    if (/medium/.test(s)) return 500;
+    if (/light|thin/.test(s)) return 300;
+    return 400; // book / regular / roman
+  };
+  const fmtOf = (f) =>
+    /\.woff2$/i.test(f)
+      ? "woff2"
+      : /\.woff$/i.test(f)
+        ? "woff"
+        : /\.ttf$/i.test(f)
+          ? "truetype"
+          : "opentype";
+  // Normalize away ALL non-alphanumerics (spaces, underscores, hyphens) on BOTH the
+  // family name and the filename. Real font files use "_" / "-" as word separators
+  // ("TT_Norms_Pro_Bold.woff2"), so stripping only whitespace never matched them — the
+  // family key "ttnormspro" failed `startsWith` against "tt_norms_pro_bold", and the
+  // function silently returned "" → captions shipped with NO @font-face for any
+  // underscore/hyphen-named brand font (e.g. TT Norms Pro), which is exactly the
+  // font_family_without_font_face bug.
+  const norm = (s) => s.toLowerCase().replace(/[^a-z0-9]/g, "");
+  const faces = [];
+  const seen = new Set();
+  const claimed = new Set(); // each file is claimed by the MOST SPECIFIC family only
+  // Match the longest family key first so "TT Norms Pro" can't swallow the files that
+  // belong to "TT Norms Pro Mono" (its key is a prefix of the longer one's).
+  const ranked = [...families].sort((a, b) => norm(b).length - norm(a).length);
+  for (const fam of ranked) {
+    const key = norm(fam);
+    for (const d of dirs) {
+      let files = [];
+      try {
+        files = readdirSync(d.abs);
+      } catch {
+        continue;
+      }
+      for (const f of files.sort()) {
+        if (!/\.(woff2|woff|ttf|otf)$/i.test(f)) continue;
+        if (claimed.has(f)) continue; // a more specific family already took this file
+        if (!norm(f.replace(/\.(woff2|woff|ttf|otf)$/i, "")).startsWith(key)) continue;
+        const w = weightOf(f);
+        const dedup = `${fam}-${w}`;
+        if (seen.has(dedup)) continue; // one src per weight; assets/fonts wins over capture
+        seen.add(dedup);
+        claimed.add(f);
+        faces.push(
+          `      @font-face { font-family: '${fam}'; src: url('${d.rel}/${f}') format('${fmtOf(f)}'); font-weight: ${w}; font-display: block; }`,
+        );
+      }
+    }
+  }
+  // Loud signal instead of a silent "". If frame.md named a brand font but no file
+  // matched, the caption text WILL fall back to a generic font in the render — surface
+  // the cause here (at build time) rather than letting it surface 2 steps later as a
+  // font_family_without_font_face lint error disconnected from its root cause.
+  if (!faces.length) {
+    const where = dirs.length
+      ? dirs.map((d) => d.rel).join(" / ")
+      : "assets/fonts or capture/assets/fonts (neither exists)";
+    console.warn(
+      `  ⚠ captions: frame.md names font ${families.map((f) => `"${f}"`).join(", ")} ` +
+        `but no matching .woff2/.woff/.ttf/.otf was found in ${where} — captions will fall back ` +
+        `(text may render in the wrong font). Stage a font file whose name starts with the family ` +
+        `(e.g. "TT Norms Pro" → TT_Norms_Pro_Bold.woff2) so it ships with the project.`,
+    );
+  }
+  return faces.join("\n");
+}
+
+// frame.md colors:/typography: → a :root token block, mapped to the fixed semantic
+// vocab every preset skin references. Robust to per-preset key names: colors are
+// matched by name, then by luminance. Brand-token overlay (Step 2) flows through
+// because the values come from the project's frame.md. No frame.md → band vars only.
+function frameTokensCss(framePath, H) {
+  const band = captionBand(H);
+  const out = [];
+  if (existsSync(framePath)) {
+    const md = readFileSync(framePath, "utf8");
+    const colors = parseColors(md);
+    for (const [k, v] of colors) out.push(`      --${k}: ${v};`); // raw, for completeness
+    const sem = semanticColors(colors);
+    if (sem.ink) out.push(`      --cap-ink: ${sem.ink};`);
+    if (sem.canvas) out.push(`      --cap-canvas: ${sem.canvas};`);
+    if (sem.accent) out.push(`      --cap-accent: ${sem.accent};`);
+    if (sem.accent2) out.push(`      --cap-accent-2: ${sem.accent2};`);
+    const { display, body } = parseFonts(md);
+    if (display) out.push(`      --font-display: ${display}, system-ui, serif;`);
+    if (body) out.push(`      --font-body: ${body}, system-ui, sans-serif;`);
+  }
+  out.push(`      --cap-band-top: ${band.bandTopY}px;`);
+  out.push(`      --cap-band-height: ${band.bandHeight}px;`);
+  return `      :root {\n${out.join("\n")}\n      }`;
+}
+
+// ── default path (no preset skin) ─────────────────────────────────────────────
+// Self-contained captions sub-composition. The <template> holds the band container
+// + style AND the <script> (the HyperFrames loader only executes scripts INSIDE the
+// cloned template — a sibling <script> after </template> never runs, so the timeline
+// never registers and captions render blank). The script builds per-word spans and a
+// paused, seek-safe GSAP timeline (opacity for group show/hide, a quick color tween
+// per word for the karaoke highlight — no className flips, no JS state) and ends each
+// group with a hard tl.set kill so an exit can't get stuck. gsap is loaded via CDN
+// inside the template (matching the frame compositions). Band = captionBand(H).
+function buildCaptionsHtml(groups, total, W, H) {
+  const band = captionBand(H);
+  const fs = Math.round(H * 0.038);
+  const pad = Math.round(fs * 0.4);
+  return `<template id="captions-template">
+  <div
+    data-composition-id="captions"
+    data-width="${W}"
+    data-height="${H}"
+    data-duration="${total}"
+    id="captions-root"
+  >
+    <div id="cap"></div>
+  </div>
+  <style>
+    #captions-root {
+      position: absolute;
+      inset: 0;
+      pointer-events: none;
+    }
+#cap {
+      position: absolute;
+      left: 0;
+      right: 0;
+      top: ${band.bandTopY}px;
+      height: ${band.bandHeight}px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+.caption-group {
+      position: absolute;
+      max-width: 80%;
+      padding: ${pad}px ${Math.round(pad * 1.8)}px;
+      background: rgba(0, 0, 0, 0.72);
+      border-radius: ${Math.round(fs * 0.3)}px;
+      font-family: Roboto, sans-serif;
+      font-weight: 700;
+      font-size: ${fs}px;
+      line-height: 1.25;
+      text-align: center;
+      color: #fff;
+      opacity: 0;
+    }
+.caption-word {
+      color: rgba(255, 255, 255, 0.55);
+    }
+  </style>
+  <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js" integrity="sha384-sG0Hv1tP1lZCk9KQmrIbY/XNwi+OY84GQqhMscbnsoBFqAz8KNCil1kvfL3Hbbk2" crossorigin="anonymous"></script>
+  <script>
+    (function () {
+      var GROUPS = ${JSON.stringify(groups)};
+      var cap = document.getElementById("cap");
+      var tl = gsap.timeline({ paused: true });
+      GROUPS.forEach(function (g) {
+        var el = document.createElement("div");
+        el.className = "caption-group";
+        g.words.forEach(function (w) {
+          var s = document.createElement("span");
+          s.className = "caption-word";
+          s.textContent = w.text + " ";
+          el.appendChild(s);
+        });
+        cap.appendChild(el);
+        tl.fromTo(el, { opacity: 0 }, { opacity: 1, duration: 0.18, overwrite: "auto" }, g.start);
+        tl.to(el, { opacity: 0, duration: 0.12, overwrite: "auto" }, g.end);
+        tl.set(el, { opacity: 0, visibility: "hidden" }, g.end + 0.12); // deterministic hard kill
+        g.words.forEach(function (w, i) {
+          tl.to(el.children[i], { color: "#ffffff", duration: 0.06 }, w.start);
+        });
+      });
+      tl.to({}, { duration: ${total} }, 0); // full-span anchor
+      window.__timelines = window.__timelines || {};
+      window.__timelines["captions"] = tl;
+    })();
+  </script>
+</template>
+`;
+}
+
+if (process.argv[1] && resolve(process.argv[1]) === fileURLToPath(import.meta.url)) {
+  const sub = process.argv[2];
+  if (sub === "build" || sub === undefined) runBuild(process.argv.slice(sub === "build" ? 3 : 2));
+  else {
+    console.error(
+      "usage: node captions.mjs build [--storyboard …] [--audio-meta …] [--hyperframes .]",
+    );
+    process.exit(2);
+  }
+}
diff --git a/.claude/skills-media/product-launch-video/scripts/captions.test.mjs b/.claude/skills-media/product-launch-video/scripts/captions.test.mjs
new file mode 100644
index 000000000..f2724ea42
--- /dev/null
+++ b/.claude/skills-media/product-launch-video/scripts/captions.test.mjs
@@ -0,0 +1,50 @@
+import assert from "node:assert/strict";
+import { readdirSync, readFileSync } from "node:fs";
+import test from "node:test";
+import { fileURLToPath } from "node:url";
+import { buildFromSkin } from "./captions.mjs";
+
+const presetsDir = fileURLToPath(
+  new URL("../../hyperframes-creative/frame-presets/", import.meta.url),
+);
+const skins = readdirSync(presetsDir, { withFileTypes: true })
+  .filter((entry) => entry.isDirectory())
+  .map((entry) => ({
+    name: entry.name,
+    source: readFileSync(
+      new URL(
+        `../../hyperframes-creative/frame-presets/${entry.name}/caption-skin.html`,
+        import.meta.url,
+      ),
+      "utf8",
+    ),
+  }))
+  .filter(({ source }) => source.includes(".caption-word.is-active"));
+
+for (const canvas of ["#f7f3e8", "#111827"]) {
+  for (const skin of skins) {
+    test(`${skin.name} preserves word-state rules on ${canvas}`, () => {
+      const active = skin.source.match(/\.caption-word\.is-active\s*\{[^}]*\}/s)?.[0];
+      const spoken = skin.source.match(/\.caption-word\.is-spoken\s*\{[^}]*\}/s)?.[0];
+      assert.ok(active, "skin must define an active-word rule");
+      assert.ok(spoken, "skin must define a spoken-word rule");
+
+      const output = buildFromSkin(
+        skin.source,
+        [],
+        1,
+        1920,
+        1080,
+        `:root { --cap-canvas: ${canvas}; --cap-ink: #111111; --cap-accent: #ffcc00; }`,
+        (message) => {
+          throw new Error(message);
+        },
+      );
+
+      assert.ok(output.includes(active));
+      assert.ok(output.includes(spoken));
+      assert.equal(output.match(/\.caption-word\.is-active\s*\{/g)?.length, 1);
+      assert.equal(output.match(/\.caption-word\.is-spoken\s*\{/g)?.length, 1);
+    });
+  }
+}
diff --git a/.claude/skills-media/product-launch-video/scripts/lib/assets.mjs b/.claude/skills-media/product-launch-video/scripts/lib/assets.mjs
new file mode 100644
index 000000000..0f06ac5da
--- /dev/null
+++ b/.claude/skills-media/product-launch-video/scripts/lib/assets.mjs
@@ -0,0 +1,55 @@
+// assets.mjs — stage frame-named capture assets into assets/.
+// Shared by stage-assets.mjs (Step 4 close, BEFORE the frame workers run) and
+// assemble-index.mjs (Step 5, idempotent backstop). Only assets a frame names
+// in `asset_candidates` are staged; unnamed assets never reach the project.
+// asset_candidates value form: "assets/<basename> — desc; assets/… — …".
+
+import { copyFileSync, existsSync, mkdirSync } from "node:fs";
+import { basename, join } from "node:path";
+
+export function basenamesFromCandidates(value) {
+  if (typeof value !== "string") return [];
+  return value
+    .split(";")
+    .map((seg) => seg.split(/\s+[—–-]\s+/)[0].trim()) // strip the " — description"
+    .filter(Boolean)
+    .map((p) => basename(p.replace(/^assets\//, "")));
+}
+
+// Copy each frame's asset_candidates from capture/{assets,assets/videos,
+// screenshots} into assets/. Already-staged files are left as is (first-wins),
+// so calling this twice is safe. Returns { staged, wanted, anomalies }.
+export function stageAssets({ hyperframesDir, frames }) {
+  const wanted = new Set();
+  for (const f of frames) {
+    for (const b of basenamesFromCandidates(f.extra?.asset_candidates)) wanted.add(b);
+  }
+  const captureDirs = [
+    join(hyperframesDir, "capture/assets"),
+    join(hyperframesDir, "capture/assets/videos"), // videos download into a subdir
+    join(hyperframesDir, "capture/screenshots"),
+  ];
+  const assetsDir = join(hyperframesDir, "assets");
+  const anomalies = [];
+  let staged = 0;
+  if (wanted.size > 0) {
+    mkdirSync(assetsDir, { recursive: true });
+    for (const b of wanted) {
+      const dest = join(assetsDir, b);
+      if (existsSync(dest)) {
+        staged++;
+        continue;
+      } // first-wins / already staged
+      const src = captureDirs.map((d) => join(d, b)).find((p) => existsSync(p));
+      if (src) {
+        copyFileSync(src, dest);
+        staged++;
+      } else {
+        anomalies.push(
+          `asset "${b}" named by a frame but not found under capture/ — frame will 404 it`,
+        );
+      }
+    }
+  }
+  return { staged, wanted, anomalies };
+}
diff --git a/.claude/skills-media/product-launch-video/scripts/lib/dimensions.mjs b/.claude/skills-media/product-launch-video/scripts/lib/dimensions.mjs
new file mode 100644
index 000000000..c91f01caa
--- /dev/null
+++ b/.claude/skills-media/product-launch-video/scripts/lib/dimensions.mjs
@@ -0,0 +1,45 @@
+// dimensions.mjs — canvas size + caption-band geometry for the product-launch
+// pipeline. Single source of truth = the STORYBOARD frontmatter `format` global
+// ("1920x1080" / "1080x1920" / "1080x1080", or a named orientation). Every
+// script and the index assembler reads the size from here; none hardcodes it.
+
+// Named orientation presets. Square/portrait are 1080-based so they share the
+// long-edge pixel budget with landscape (same render-cost ballpark).
+export const ORIENTATION_PRESETS = {
+  landscape: { width: 1920, height: 1080 }, // 16:9 — default
+  portrait: { width: 1080, height: 1920 }, // 9:16 — reels / shorts / TikTok
+  square: { width: 1080, height: 1080 }, // 1:1 — feed
+};
+
+export const DEFAULT_DIMENSIONS = ORIENTATION_PRESETS.landscape;
+
+function sane(w, h) {
+  return Number.isFinite(w) && Number.isFinite(h) && w >= 240 && h >= 240 && w <= 8192 && h <= 8192;
+}
+
+// Parse a STORYBOARD `format` global into { width, height, source }. Accepts
+// "WxH" (e.g. "1920x1080"; `x` or `×`, any inner spacing) or a named orientation;
+// falls back to landscape so a storyboard with a missing/garbled format still
+// renders (no behavior change vs the old landscape lock).
+export function parseFormat(format) {
+  const s = typeof format === "string" ? format.trim().toLowerCase() : "";
+  if (ORIENTATION_PRESETS[s]) return { ...ORIENTATION_PRESETS[s], source: `orientation=${s}` };
+  const m = s.match(/^(\d+)\s*[x×]\s*(\d+)$/);
+  if (m) {
+    const w = parseInt(m[1] ?? "", 10);
+    const h = parseInt(m[2] ?? "", 10);
+    if (sane(w, h)) return { width: w, height: h, source: "format" };
+  }
+  return { ...DEFAULT_DIMENSIONS, source: "default(landscape)" };
+}
+
+// Caption band geometry, derived from canvas height: the bottom ~16.67% (180px
+// at h=1080). Frame content must end `safetyPx` above the band top. Holds even
+// when captions are disabled (bottom-edge consistency).
+export const CAPTION_BAND_FRACTION = 0.1667;
+export function captionBand(height, safetyPx = 20) {
+  const h = Number.isFinite(height) ? height : DEFAULT_DIMENSIONS.height;
+  const bandHeight = Math.round(h * CAPTION_BAND_FRACTION);
+  const bandTopY = h - bandHeight; // foreground must end at/above this y
+  return { bandHeight, bandTopY, foregroundMaxY: bandTopY - safetyPx };
+}
diff --git a/.claude/skills-media/product-launch-video/scripts/lib/pad-frame-duration.mjs b/.claude/skills-media/product-launch-video/scripts/lib/pad-frame-duration.mjs
new file mode 100644
index 000000000..91471151f
--- /dev/null
+++ b/.claude/skills-media/product-launch-video/scripts/lib/pad-frame-duration.mjs
@@ -0,0 +1,36 @@
+// pad-frame-duration.mjs — keeps a frame's own #root/clip data-duration in
+// sync with the padded index.html wrapper duration transitions.mjs computes.
+//
+// The frame's OWN internal file declares its #root/clip data-duration to the
+// STORYBOARD's content-only length (frame-worker.md: duration is "fixed
+// upstream"). When an outgoing transition pads the index.html WRAPPER's
+// data-duration to cover the transition tail, the frame's own internal
+// duration is left short — the render engine clip-gates the sub-composition's
+// visible content at that shorter value, so content vanishes abruptly at
+// content-end instead of fading gracefully through the wrapper's extended
+// fade-out tween. Pad the frame's own file to match so both durations agree.
+
+import { readFileSync, writeFileSync } from "node:fs";
+import { resolve } from "node:path";
+
+export function padFrameInternalDuration(hyperframesDir, frameSrc, frameId, newDuration) {
+  const framePath = resolve(hyperframesDir, frameSrc);
+  let html;
+  try {
+    html = readFileSync(framePath, "utf8");
+  } catch (err) {
+    if (err?.code === "ENOENT") return;
+    throw err;
+  }
+  const tagRe = /<[a-z][\w:-]*\s[^<>]*?>/gi;
+  let m;
+  while ((m = tagRe.exec(html)) !== null) {
+    const tag = m[0];
+    if (!tag.includes(`data-composition-id="${frameId}"`)) continue;
+    if (!/data-duration="[\d.]+"/.test(tag)) continue;
+    const newTag = tag.replace(/data-duration="[\d.]+"/, `data-duration="${newDuration}"`);
+    if (newTag === tag) return;
+    writeFileSync(framePath, html.slice(0, m.index) + newTag + html.slice(m.index + tag.length));
+    return;
+  }
+}
diff --git a/.claude/skills-media/product-launch-video/scripts/lib/pad-frame-duration.test.mjs b/.claude/skills-media/product-launch-video/scripts/lib/pad-frame-duration.test.mjs
new file mode 100644
index 000000000..5bb395c2b
--- /dev/null
+++ b/.claude/skills-media/product-launch-video/scripts/lib/pad-frame-duration.test.mjs
@@ -0,0 +1,76 @@
+import { test } from "node:test";
+import assert from "node:assert/strict";
+import { mkdtempSync, mkdirSync, writeFileSync, readFileSync, rmSync } from "node:fs";
+import { tmpdir } from "node:os";
+import { join } from "node:path";
+import { padFrameInternalDuration } from "./pad-frame-duration.mjs";
+
+// Regression: an outgoing transition pads the index.html WRAPPER's
+// data-duration to cover the transition tail, but the frame's own internal
+// file kept its shorter content-only duration, so the render engine
+// clip-gated the sub-composition's visible content at the shorter value —
+// content vanished abruptly instead of fading through the wrapper's
+// extended fade-out tween. A user diagnosed and verified this fix
+// themselves: pad the frame's own #root/clip data-duration to match.
+test("padFrameInternalDuration pads the matching frame's own data-duration", () => {
+  const dir = mkdtempSync(join(tmpdir(), "transitions-pad-"));
+  const framesDir = join(dir, "compositions", "frames");
+  mkdirSync(framesDir, { recursive: true });
+  const frameSrc = "compositions/frames/scene-1.html";
+  const framePath = join(dir, frameSrc);
+  writeFileSync(
+    framePath,
+    `<template>
+  <div
+    id="root"
+    data-composition-id="scene-1"
+    data-width="1920"
+    data-height="1080"
+    data-duration="4.2"
+  ></div>
+</template>`,
+  );
+
+  try {
+    padFrameInternalDuration(dir, frameSrc, "scene-1", 4.7);
+    const updated = readFileSync(framePath, "utf8");
+    assert.match(updated, /data-duration="4\.7"/);
+    assert.doesNotMatch(updated, /data-duration="4\.2"/);
+  } finally {
+    rmSync(dir, { recursive: true, force: true });
+  }
+});
+
+test("padFrameInternalDuration only touches the tag matching the given frame id", () => {
+  const dir = mkdtempSync(join(tmpdir(), "transitions-pad-scope-"));
+  const framesDir = join(dir, "compositions", "frames");
+  mkdirSync(framesDir, { recursive: true });
+  const frameSrc = "compositions/frames/scene-2.html";
+  const framePath = join(dir, frameSrc);
+  const original = `<template>
+  <div id="root" data-composition-id="scene-2" data-duration="3.0">
+    <div data-composition-id="unrelated-child" data-duration="1.0"></div>
+  </div>
+</template>`;
+  writeFileSync(framePath, original);
+
+  try {
+    padFrameInternalDuration(dir, frameSrc, "scene-2", 3.5);
+    const updated = readFileSync(framePath, "utf8");
+    assert.match(updated, /data-composition-id="scene-2" data-duration="3\.5"/);
+    assert.match(updated, /data-composition-id="unrelated-child" data-duration="1\.0"/);
+  } finally {
+    rmSync(dir, { recursive: true, force: true });
+  }
+});
+
+test("padFrameInternalDuration is a no-op when the frame file does not exist", () => {
+  const dir = mkdtempSync(join(tmpdir(), "transitions-pad-missing-"));
+  try {
+    assert.doesNotThrow(() =>
+      padFrameInternalDuration(dir, "compositions/frames/missing.html", "missing", 5),
+    );
+  } finally {
+    rmSync(dir, { recursive: true, force: true });
+  }
+});
diff --git a/.claude/skills-media/product-launch-video/scripts/lib/storyboard.mjs b/.claude/skills-media/product-launch-video/scripts/lib/storyboard.mjs
new file mode 100644
index 000000000..7c821dcba
--- /dev/null
+++ b/.claude/skills-media/product-launch-video/scripts/lib/storyboard.mjs
@@ -0,0 +1,249 @@
+// storyboard.mjs — vendored lenient parser for STORYBOARD.md.
+//
+// Faithful plain-JS port of @hyperframes/core/storyboard
+// (packages/core/src/storyboard/parseStoryboard.ts). Vendored because skills
+// ship standalone: installed via `npx skills add`, a skill's scripts can't reach
+// the monorepo's core package, and the core export points at .ts source that
+// `node` (which runs these scripts) can't load. CANONICAL contract = the core
+// parser + skills/hyperframes-core/references/storyboard-format.md; keep this in
+// lockstep. Behavior: never throws, accepts freeform narrative, recognizes
+// Frame/Beat/Scene headings at H2/H3, preserves unknown keys verbatim under
+// `extra` (keys lowercased). Pure node — no deps.
+
+export const FRAME_STATUSES = ["outline", "built", "animated"];
+export const DEFAULT_FRAME_STATUS = "outline";
+
+// Detection-only frame heading (ends at the keyword); ReDoS-hardened — keep as-is.
+const FRAME_HEADING_RE = /^(#{2,3})[ \t]+(?:frame|beat|scene)\b/i;
+const FRAME_TITLE_SEP_RE = /^[\s.:—-]+/;
+const HEADING_LEVEL_RE = /^(#{1,6})\s+/;
+const META_RE = /^\s*[-*]\s+([A-Za-z_][\w-]*)\s*:\s*(.+?)\s*$/;
+const LEADING_INT_RE = /^(\d+)/;
+const DURATION_NUM_RE = /(\d+(?:\.\d+)?)/;
+const TRANSITION_KEYS = new Set(["transition_in", "transitionin", "transition"]);
+const SCENE_KEYS = new Set(["scene", "description", "summary", "caption"]);
+export const VOICEOVER_ALIASES = ["voiceover", "vo", "voice_over", "narration"];
+const VOICEOVER_KEYS = new Set(VOICEOVER_ALIASES);
+
+export function parseStoryboard(source) {
+  const warnings = [];
+  const { globals, bodyStartLine, body } = parseFrontmatter(source, warnings);
+  const frames = parseFrames(body, bodyStartLine, warnings);
+  return { globals, frames, warnings };
+}
+
+function emptyGlobals() {
+  return { extra: {} };
+}
+
+function isFrameStatus(value) {
+  return FRAME_STATUSES.includes(value);
+}
+
+// ── Frontmatter ─────────────────────────────────────────────────────────────
+function findFrontmatterRange(lines, warnings) {
+  let start = 0;
+  while (start < lines.length && (lines[start] ?? "").trim() === "") start++;
+  if ((lines[start] ?? "").trim() !== "---") return null;
+  for (let i = start + 1; i < lines.length; i++) {
+    if ((lines[i] ?? "").trim() === "---") return { start, end: i };
+  }
+  warnings.push({
+    message: "Frontmatter opening '---' has no closing '---'; treating whole file as body.",
+    line: start + 1,
+  });
+  return null;
+}
+
+function parseFrontmatterEntries(lines, start, end, warnings) {
+  const globals = emptyGlobals();
+  for (let i = start + 1; i < end; i++) {
+    const raw = lines[i] ?? "";
+    if (raw.trim() === "") continue;
+    const colon = raw.indexOf(":");
+    if (colon === -1) {
+      warnings.push({
+        message: `Ignored non key:value frontmatter line: "${raw.trim()}"`,
+        line: i + 1,
+      });
+      continue;
+    }
+    const key = raw.slice(0, colon).trim().toLowerCase();
+    assignGlobal(globals, key, stripQuotes(raw.slice(colon + 1).trim()));
+  }
+  return globals;
+}
+
+function parseFrontmatter(source, warnings) {
+  const lines = source.split(/\r?\n/);
+  const range = findFrontmatterRange(lines, warnings);
+  if (!range) return { globals: emptyGlobals(), bodyStartLine: 1, body: source };
+  const globals = parseFrontmatterEntries(lines, range.start, range.end, warnings);
+  const body = lines.slice(range.end + 1).join("\n");
+  return { globals, bodyStartLine: range.end + 2, body };
+}
+
+function assignGlobal(globals, key, value) {
+  switch (key) {
+    case "format":
+      globals.format = value;
+      break;
+    case "message":
+      globals.message = value;
+      break;
+    case "arc":
+      globals.arc = value;
+      break;
+    case "audience":
+      globals.audience = value;
+      break;
+    default:
+      globals.extra[key] = value;
+  }
+}
+
+// ── Frames ──────────────────────────────────────────────────────────────────
+function openFrameSection(line, headingLine) {
+  const match = FRAME_HEADING_RE.exec(line);
+  if (!match) return null;
+  const headingText = line.slice(match[0].length).replace(FRAME_TITLE_SEP_RE, "").trim();
+  return { headingText, headingLine, level: (match[1] ?? "##").length, lines: [] };
+}
+
+function endsFrameSection(line, current) {
+  if (!current) return false;
+  const heading = HEADING_LEVEL_RE.exec(line);
+  return heading !== null && (heading[1] ?? "").length <= current.level;
+}
+
+function parseFrames(body, bodyStartLine, warnings) {
+  const lines = body.split(/\r?\n/);
+  const sections = [];
+  let current = null;
+  for (let i = 0; i < lines.length; i++) {
+    const line = lines[i] ?? "";
+    const opened = openFrameSection(line, bodyStartLine + i);
+    if (opened) {
+      sections.push(opened);
+      current = opened;
+    } else if (endsFrameSection(line, current)) {
+      current = null;
+    } else if (current) {
+      current.lines.push(line);
+    }
+  }
+  return sections.map((section, idx) => buildFrame(section, idx + 1, warnings));
+}
+
+function buildFrame(section, index, warnings) {
+  const frame = { index, status: DEFAULT_FRAME_STATUS, narrative: "", extra: {} };
+  const { number, title } = parseHeading(section.headingText);
+  if (number !== undefined) frame.number = number;
+  if (title) frame.title = title;
+
+  const narrativeLines = [];
+  for (const line of section.lines) {
+    const meta = META_RE.exec(line);
+    if (meta) {
+      applyMeta(
+        frame,
+        (meta[1] ?? "").toLowerCase(),
+        (meta[2] ?? "").trim(),
+        section.headingLine,
+        warnings,
+      );
+    } else {
+      narrativeLines.push(line);
+    }
+  }
+  frame.narrative = narrativeLines.join("\n").trim();
+  return frame;
+}
+
+function parseHeading(text) {
+  if (!text) return {};
+  const intMatch = LEADING_INT_RE.exec(text);
+  if (!intMatch) return { title: text };
+  const number = Number.parseInt(intMatch[1] ?? "", 10);
+  const rest = text
+    .slice((intMatch[0] ?? "").length)
+    .replace(/^[\s.:—-]+/, "")
+    .trim();
+  return { number, title: rest || undefined };
+}
+
+// Dispatch a recognized metadata key to its field, else stash under `extra`.
+// Mirrors core's META_SETTERS map exactly (direct keys + alias sets).
+function applyMeta(frame, key, value, headingLine, warnings) {
+  switch (key) {
+    case "duration":
+      applyDuration(frame, value, headingLine, warnings);
+      return;
+    case "status":
+      applyStatus(frame, value, headingLine, warnings);
+      return;
+    case "poster":
+      applyPoster(frame, value);
+      return;
+    case "src":
+      frame.src = value;
+      return;
+  }
+  if (TRANSITION_KEYS.has(key)) {
+    frame.transitionIn = value;
+    return;
+  }
+  if (SCENE_KEYS.has(key)) {
+    frame.scene = value;
+    return;
+  }
+  if (VOICEOVER_KEYS.has(key)) {
+    frame.voiceover = stripQuotes(value);
+    return;
+  }
+  frame.extra[key] = value;
+}
+
+function applyPoster(frame, value) {
+  const num = DURATION_NUM_RE.exec(value);
+  if (num) frame.poster = Number.parseFloat(num[1] ?? "");
+}
+
+function applyDuration(frame, value, headingLine, warnings) {
+  frame.duration = value;
+  const num = DURATION_NUM_RE.exec(value);
+  if (num) {
+    frame.durationSeconds = Number.parseFloat(num[1] ?? "");
+    return;
+  }
+  warnings.push({
+    message: `Frame ${frame.index}: could not parse duration "${value}".`,
+    line: headingLine,
+    frameIndex: frame.index,
+  });
+}
+
+function applyStatus(frame, value, headingLine, warnings) {
+  const normalized = value.toLowerCase();
+  if (isFrameStatus(normalized)) {
+    frame.status = normalized;
+    return;
+  }
+  frame.extra.status = value;
+  warnings.push({
+    message: `Frame ${frame.index}: unknown status "${value}"; defaulting to "${DEFAULT_FRAME_STATUS}".`,
+    line: headingLine,
+    frameIndex: frame.index,
+  });
+}
+
+function stripQuotes(value) {
+  if (value.length >= 2) {
+    const first = value[0];
+    const last = value[value.length - 1];
+    if ((first === '"' && last === '"') || (first === "'" && last === "'")) {
+      return value.slice(1, -1);
+    }
+  }
+  return value;
+}
diff --git a/.claude/skills-media/product-launch-video/scripts/lib/tokens.mjs b/.claude/skills-media/product-launch-video/scripts/lib/tokens.mjs
new file mode 100644
index 000000000..ed5beb750
--- /dev/null
+++ b/.claude/skills-media/product-launch-video/scripts/lib/tokens.mjs
@@ -0,0 +1,218 @@
+// tokens.mjs — shared brand-token parsing + semantic role mapping for frame.md /
+// FRAME.md. Used by build-frame.mjs (remix a preset onto brand tokens) and
+// captions.mjs (derive caption colors from frame.md). One mapping → frames and
+// captions stay consistent. Pure node.
+
+// Collect `key: value` pairs under the top-level `colors:` block (until dedent).
+export function parseColors(md) {
+  const out = [];
+  let inBlock = false;
+  for (const line of md.split(/\r?\n/)) {
+    if (/^colors:\s*$/.test(line)) {
+      inBlock = true;
+      continue;
+    }
+    if (!inBlock) continue;
+    if (/^\S/.test(line)) break; // dedent to a top-level key → end of block
+    const m = line.match(
+      /^\s+([\w-]+):\s*(?:"([^"]+)"|'([^']+)'|(#[0-9a-fA-F]{3,8}|rgba?\([^)]*\)|[^#\s][^#\n]*?))\s*(?:#.*)?$/,
+    );
+    if (m) out.push([m[1], (m[2] ?? m[3] ?? m[4]).trim()]);
+  }
+  return out;
+}
+
+// relative luminance of a #rrggbb (null for non-hex like rgba()).
+export function lum(v) {
+  const m = /^#?([0-9a-fA-F]{6})$/.exec(String(v).trim());
+  if (!m) return null;
+  const n = parseInt(m[1], 16);
+  return 0.2126 * ((n >> 16) & 255) + 0.7152 * ((n >> 8) & 255) + 0.0722 * (n & 255);
+}
+
+// chroma (max−min channel) of a #rrggbb — a cheap "how colorful" proxy; −1 for non-hex.
+export function chroma(v) {
+  const m = /^#?([0-9a-fA-F]{6})$/.exec(String(v).trim());
+  if (!m) return -1;
+  const n = parseInt(m[1], 16);
+  const r = (n >> 16) & 255,
+    g = (n >> 8) & 255,
+    b = n & 255;
+  return Math.max(r, g, b) - Math.min(r, g, b);
+}
+
+// Browser user-agent default colors for links / visited links. These leak into a
+// capture from any UNSTYLED <a> and are NOT brand colors — but being pure & saturated
+// they beat a real accent on chroma alone. Never let one become the accent.
+export const UA_DEFAULT_COLORS = new Set(
+  ["#0000EE", "#0000FF", "#0000CC", "#1A0DAB", "#551A8B", "#EE0000"].map((c) => c.toUpperCase()),
+);
+
+export const ICON_FONT_PATTERN =
+  /(?:^|[\s_-])icons?(?:[\s_-]|$)|icomoon|font\s*-?awesome|glyphicons?|material\s*icons|feather\s*icons|(?:icon|glyph).*font|font.*(?:icon|glyph)|^vidaxlfont$/i;
+
+export function isIconFont(name) {
+  return ICON_FONT_PATTERN.test(String(name));
+}
+
+// Semantic STATUS roles (green "positive", red "negative"/"error", amber "warning" …). Their HUE
+// carries the meaning, so they are never a brand ACCENT — a status red is frequently the most
+// chromatic color in a palette (e.g. #dc2626 chroma 182 beats a deep-blue accent #1E40AF chroma
+// 145) and would otherwise win a pure chroma ranking, painting captions/highlights the error red.
+// build-frame.mjs uses this same key set to protect status colors during the preset→brand remix.
+export const STATUS_ROLE_KEY =
+  /(?:^|[-_])(?:positive|negative|success|error|warning|danger|good|bad|up|down|info|neutral|alert|caution|critical)(?:[-_]|$)/i;
+
+// Pick the brand ACCENT — never by raw chroma alone, never a UA-default link color.
+// Priority:
+//   1) with capture colorStats → the colorful color that RECURS across the UI. The brand
+//      accent shows up in MANY roles (link text + icon + button + badge), whereas a one-off
+//      CTA fill appears in just one. So rank chromatic (chroma>40) candidates by role
+//      diversity first, then total prevalence, then interactive use, then chroma. This keeps
+//      a pervasive brand color (e.g. an indigo used everywhere) ahead of a single bright
+//      button fill (e.g. a lime used once) — the old "top interactiveBg" rule picked the
+//      latter. Requiring interactiveBg>0 is dropped so a text/icon-only accent can still win.
+//   2) no stats → most chromatic color AFTER removing UA defaults + `exclude`.
+// A stray default link color (e.g. #0000EE) can win under neither path.
+export function pickAccent(stats, colors, exclude = []) {
+  const ban = new Set([...exclude, ...UA_DEFAULT_COLORS].map((c) => String(c).toUpperCase()));
+  const ok = (h) => /^#[0-9a-fA-F]{6}$/.test(String(h)) && !ban.has(String(h).toUpperCase());
+  // Prominence rank from the (frequency-ordered) `colors` palette: index 0 = most used.
+  // A saturated color sitting at the TAIL is almost always a one-off (a single CTA fill),
+  // not the brand accent — capture colorStats counts are too sparse to tell these apart
+  // (e.g. Linear's indigo and a lime CTA both register count≈1), but palette ORDER does.
+  const rank = new Map((colors ?? []).map((h, i) => [String(h).toUpperCase(), i]));
+  const prom = (h) => (rank.has(String(h).toUpperCase()) ? rank.get(String(h).toUpperCase()) : 1e9);
+  if (Array.isArray(stats) && stats.length) {
+    const roles = (s) =>
+      ((s.interactiveBg || 0) > 0 ? 1 : 0) +
+      ((s.textCount || 0) > 0 ? 1 : 0) +
+      ((s.bgCount || 0) > 0 ? 1 : 0);
+    const a = stats
+      .filter((s) => ok(s?.hex) && chroma(s.hex) > 40)
+      .sort(
+        (x, y) =>
+          roles(y) - roles(x) || // used in MORE roles (link+icon+button) = the brand accent
+          prom(x.hex) - prom(y.hex) || // earlier in the palette = more prominent
+          (y.count || 0) - (x.count || 0) ||
+          (y.interactiveBg || 0) - (x.interactiveBg || 0) ||
+          chroma(y.hex) - chroma(x.hex),
+      );
+    if (a.length) return a[0].hex;
+  }
+  const c = (colors ?? [])
+    .map(String)
+    .filter(ok)
+    .sort((x, y) => chroma(y) - chroma(x));
+  return c[0];
+}
+
+// Derive brand roles from rich capture colorStats (areaBg / interactiveBg / textCount /
+// maxArea) — by semantic FUNCTION, not luminance/chroma proxies. Returns null when stats
+// are unusable, so the caller can fall back. canvas = the color painting the most real
+// background area (the page ground, dark or light); ink = the dominant text color that
+// actually contrasts with the canvas; accent via pickAccent.
+export function brandRolesFromStats(stats, colorsInOrder) {
+  if (!Array.isArray(stats) || !stats.length) return null;
+  const v = stats.filter((s) => /^#[0-9a-fA-F]{6}$/.test(s?.hex || ""));
+  if (!v.length) return null;
+  const canvas = [...v].sort(
+    (a, b) =>
+      (b.areaBg || 0) - (a.areaBg || 0) ||
+      (b.maxArea || 0) - (a.maxArea || 0) ||
+      (b.bgCount || 0) - (a.bgCount || 0),
+  )[0]?.hex;
+  // pass the frequency-ordered palette (tokens.colors) so pickAccent can use palette
+  // PROMINENCE — colorStats counts alone are too sparse to rank rare accents.
+  const accent = pickAccent(v, colorsInOrder ?? v.map((s) => s.hex), [canvas]);
+  if (!canvas || !accent) return null;
+  const cl = lum(canvas) ?? 0;
+  const ink =
+    [...v]
+      .filter((s) => s.hex !== canvas && s.hex !== accent)
+      .sort((a, b) => (b.textCount || 0) - (a.textCount || 0))
+      .find((s) => Math.abs((lum(s.hex) ?? 0) - cl) > 64)?.hex ??
+    (cl > 128 ? "#000000" : "#FFFFFF");
+  const accent2 =
+    pickAccent(v, colorsInOrder ?? v.map((s) => s.hex), [canvas, ink, accent]) ?? accent;
+  return { ink, canvas, accent, accent2 };
+}
+
+// Map a list of [key, value] colors to semantic roles. ink = a dark/ink-named
+// color (else darkest); canvas = a paper/cream/white-named color (else lightest);
+// accents = whatever's left, ranked by chroma (the loudest color is almost always
+// the brand accent) — UA-default link colors AND semantic status colors (positive/
+// negative/error…) excluded so neither a stray <a> color nor a status red ever wins.
+// For an unkeyed brand list, pass synthetic keys — name matching simply no-ops and it
+// falls back to luminance/chroma, which is what we want. NOTE: when capture colorStats
+// exist, prefer brandRolesFromStats() — it picks by function, not these proxies.
+export function semanticColors(colors) {
+  if (!colors.length) return {};
+  const named = (re) => colors.find(([k]) => re.test(k));
+  const hexes = colors.filter(([, v]) => lum(v) != null);
+  const byLum = [...hexes].sort((a, b) => (lum(a[1]) ?? 1e9) - (lum(b[1]) ?? 1e9));
+  const pick = (m, fallback) => (m ? m[1] : fallback ? fallback[1] : undefined);
+  // "ink" must be a whole word-segment so "soft-pink"/"pink" don't match it.
+  const ink = pick(
+    named(/(?:^|[-_])ink(?:[-_]|$)|black|charcoal|^text(?:-dark)?$|outline|noir/i),
+    byLum[0] ?? colors[0],
+  );
+  const canvas = pick(
+    named(/cream|paper|canvas|white|bg|ground|surface|base|sand|parchment|off-?white|bone/i),
+    byLum[byLum.length - 1] ?? colors[colors.length - 1],
+  );
+  const accents = colors
+    .filter(
+      ([k, v]) =>
+        v !== ink &&
+        v !== canvas &&
+        !UA_DEFAULT_COLORS.has(String(v).toUpperCase()) &&
+        !STATUS_ROLE_KEY.test(k), // a status red/green carries meaning by hue — never an accent
+    )
+    .sort((a, b) => chroma(b[1]) - chroma(a[1]))
+    .map(([, v]) => v);
+  return { ink, canvas, accent: accents[0] ?? ink, accent2: accents[1] ?? accents[0] ?? ink };
+}
+
+// Collect role→fontFamily under the top-level `typography:` block; pick a display
+// + body family from the usual role names. Returns quoted families (or null).
+export function parseFonts(md) {
+  const roles = {};
+  let inBlock = false;
+  for (const line of md.split(/\r?\n/)) {
+    if (/^typography:\s*$/.test(line)) {
+      inBlock = true;
+      continue;
+    }
+    if (!inBlock) continue;
+    if (/^\S/.test(line)) break;
+    const m = line.match(/^\s+([\w-]+):\s*\{[^}]*fontFamily:\s*"([^"]+)"/);
+    if (m) roles[m[1]] = m[2];
+  }
+  const q = (s) => (s ? `"${s}"` : null);
+  const body = roles.body ?? roles.subtitle ?? Object.values(roles)[0];
+  const display =
+    roles.display ??
+    roles.headline ??
+    roles["card-headline"] ??
+    roles["section-headline"] ??
+    roles["quote-display"] ??
+    roles.h1 ??
+    roles.h2 ??
+    roles.title ??
+    roles.hero ??
+    body;
+  // the monospace / chrome family (code, tags, ticks, page numbers) — so the remix can
+  // route a captured brand mono (Berkeley Mono, JetBrains Mono…) onto this role instead
+  // of the reading body. null when the preset has no distinct mono role.
+  const mono =
+    roles.mono ??
+    roles["mono-tag"] ??
+    roles["mono-chrome"] ??
+    roles["mono-tick"] ??
+    roles.code ??
+    roles.data ??
+    roles.pagenum ??
+    null;
+  return { display: q(display), body: q(body), mono: q(mono) };
+}
diff --git a/.claude/skills-media/product-launch-video/scripts/lib/tokens.test.mjs b/.claude/skills-media/product-launch-video/scripts/lib/tokens.test.mjs
new file mode 100644
index 000000000..f0023aa29
--- /dev/null
+++ b/.claude/skills-media/product-launch-video/scripts/lib/tokens.test.mjs
@@ -0,0 +1,57 @@
+import assert from "node:assert/strict";
+import { readFileSync } from "node:fs";
+import { dirname, join } from "node:path";
+import test from "node:test";
+import { fileURLToPath } from "node:url";
+import { brandRolesFromStats, ICON_FONT_PATTERN, isIconFont } from "./tokens.mjs";
+import { brandRolesFromStats as facelessBrandRolesFromStats } from "../../../faceless-explainer/scripts/lib/tokens.mjs";
+import { brandRolesFromStats as prBrandRolesFromStats } from "../../../pr-to-video/scripts/lib/tokens.mjs";
+
+const scriptsDir = join(dirname(fileURLToPath(import.meta.url)), "..", "..", "..");
+
+test("recognizes brand-specific icon font names", () => {
+  assert.equal(isIconFont("vidaXLfont"), true);
+  assert.equal(isIconFont("BrandGlyphFont"), true);
+  assert.equal(isIconFont("Poppins"), false);
+  assert.equal(isIconFont("HelveticaFont"), false);
+  assert.equal(isIconFont("Airbnb Cereal Font"), false);
+  assert.equal(isIconFont("SF Pro Text Font"), false);
+  assert.equal(isIconFont("Uber Move Font"), false);
+  assert.equal(isIconFont("Circular Std font"), false);
+  assert.equal(isIconFont("brand-font"), false);
+});
+
+test("keeps sibling skill icon-font classifiers aligned", () => {
+  for (const skill of ["faceless-explainer", "pr-to-video"]) {
+    const source = readFileSync(join(scriptsDir, skill, "scripts", "build-frame.mjs"), "utf8");
+    assert.match(
+      source,
+      new RegExp(String.raw`ICON_FONT_PATTERN\s*=\s*${escapeRegExp(ICON_FONT_PATTERN)}`),
+    );
+  }
+});
+
+function escapeRegExp(value) {
+  return String(value).replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+}
+
+test("preserves a prominent second accent used outside interactive backgrounds", () => {
+  const colors = ["#FFFFFF", "#2D1238", "#F3E62B", "#111111"];
+  const stats = [
+    { hex: "#FFFFFF", areaBg: 1000, maxArea: 1000 },
+    { hex: "#2D1238", textCount: 4, interactiveBg: 3 },
+    { hex: "#F3E62B", textCount: 3, interactiveBg: 0 },
+    { hex: "#111111", textCount: 20 },
+  ];
+
+  assert.deepEqual(brandRolesFromStats(stats, colors), {
+    canvas: "#FFFFFF",
+    ink: "#111111",
+    accent: "#F3E62B",
+    accent2: "#2D1238",
+  });
+
+  for (const sibling of [facelessBrandRolesFromStats, prBrandRolesFromStats]) {
+    assert.deepEqual(sibling(stats, colors), brandRolesFromStats(stats, colors));
+  }
+});
diff --git a/.claude/skills-media/product-launch-video/scripts/lib/transition-registry.mjs b/.claude/skills-media/product-launch-video/scripts/lib/transition-registry.mjs
new file mode 100644
index 000000000..a0451793a
--- /dev/null
+++ b/.claude/skills-media/product-launch-video/scripts/lib/transition-registry.mjs
@@ -0,0 +1,38 @@
+// transition-registry.mjs — loader for this skill's vendored transition registry
+// (./transitions.json). The registry is the curated Tier-B subset (transform /
+// opacity / filter on the two frame clip wrappers `#el-<id>`, no overlay DOM) +
+// each type's GSAP template. Vendored into the skill so it ships standalone; the
+// recipes originate from the shared catalog skills/hyperframes-animation/
+// transitions/ (css-*.md) — keep them in step if those shared recipes change.
+
+import { readFileSync } from "node:fs";
+import { resolve, dirname } from "node:path";
+import { fileURLToPath } from "node:url";
+
+const here = dirname(fileURLToPath(import.meta.url));
+export const DEFAULT_REGISTRY_PATH = resolve(here, "./transitions.json");
+
+let _cache = null;
+
+export function loadTransitionRegistry(registryPath = DEFAULT_REGISTRY_PATH) {
+  if (_cache && _cache.path === registryPath) return _cache.data;
+  let data;
+  try {
+    data = JSON.parse(readFileSync(registryPath, "utf8"));
+  } catch (e) {
+    throw new Error(`transition registry not loadable at ${registryPath}: ${e.message}`);
+  }
+  if (!Array.isArray(data.transitions) || data.transitions.length === 0) {
+    throw new Error(`transition registry ${registryPath} has no transitions[]`);
+  }
+  _cache = { path: registryPath, data };
+  return data;
+}
+
+// Convenience: a Map name -> transition record.
+export function transitionsByName(registryPath = DEFAULT_REGISTRY_PATH) {
+  const data = loadTransitionRegistry(registryPath);
+  const map = new Map();
+  for (const t of data.transitions) map.set(t.name, t);
+  return map;
+}
diff --git a/.claude/skills-media/product-launch-video/scripts/lib/transitions.json b/.claude/skills-media/product-launch-video/scripts/lib/transitions.json
new file mode 100644
index 000000000..ab1c4b9d7
--- /dev/null
+++ b/.claude/skills-media/product-launch-video/scripts/lib/transitions.json
@@ -0,0 +1,71 @@
+{
+  "_comment": "Vendored transition registry for the product-launch workflow — the curated Tier-B subset (transform/opacity/filter on the two frame clip wrappers #el-<id>, no overlay DOM, no per-frame cooperation). Each type carries its GSAP template; the transitions.mjs injector stamps it onto window.__timelines[\"main\"]. Recipes originate from the shared catalog skills/hyperframes-animation/transitions/ (css-*.md) — keep in step if those change. Token placeholders the injector substitutes: __OLD__ (#el-<from>), __NEW__ (#el-<to>), __T__ (overlap-start s), __DUR__ (this boundary's duration), __DX__/__DXIN__ (horizontal travel + incoming offset), __DY__/__DYIN__ (vertical).",
+  "transitions": [
+    {
+      "name": "crossfade",
+      "energy": "any",
+      "default_duration_s": 0.5,
+      "directions": [],
+      "source": "css-dissolve.md",
+      "gsap_template": [
+        "tl.to(__OLD__, { opacity: 0, duration: __DUR__, ease: \"power2.inOut\" }, __T__);",
+        "tl.fromTo(__NEW__, { opacity: 0 }, { opacity: 1, duration: __DUR__, ease: \"power2.inOut\" }, __T__);"
+      ]
+    },
+    {
+      "name": "blur-crossfade",
+      "energy": "calm",
+      "default_duration_s": 0.6,
+      "directions": [],
+      "source": "css-dissolve.md",
+      "note": "Default when the two frames' #root backgrounds differ a lot — the blur masks the background-color clash a plain crossfade would expose.",
+      "gsap_template": [
+        "tl.to(__OLD__, { filter: \"blur(10px)\", scale: 1.03, opacity: 0, duration: __DUR__, ease: \"power2.inOut\" }, __T__);",
+        "tl.fromTo(__NEW__, { filter: \"blur(10px)\", scale: 0.97, opacity: 0 }, { filter: \"blur(0px)\", scale: 1, opacity: 1, duration: __DUR__, ease: \"power2.inOut\" }, __T__);"
+      ]
+    },
+    {
+      "name": "push-slide",
+      "energy": "medium",
+      "default_duration_s": 0.5,
+      "directions": ["LEFT", "RIGHT", "UP", "DOWN"],
+      "default_direction": "LEFT",
+      "source": "css-push.md",
+      "note": "Directional. The injector picks __DX__/__DY__ from the direction and emits the horizontal OR vertical pair (not both).",
+      "gsap_template_horizontal": [
+        "tl.to(__OLD__, { x: __DX__, duration: __DUR__, ease: \"power3.inOut\" }, __T__);",
+        "tl.fromTo(__NEW__, { x: __DXIN__, opacity: 1 }, { x: 0, duration: __DUR__, ease: \"power3.inOut\" }, __T__);"
+      ],
+      "gsap_template_vertical": [
+        "tl.to(__OLD__, { y: __DY__, duration: __DUR__, ease: \"power3.inOut\" }, __T__);",
+        "tl.fromTo(__NEW__, { y: __DYIN__, opacity: 1 }, { y: 0, duration: __DUR__, ease: \"power3.inOut\" }, __T__);"
+      ]
+    },
+    {
+      "name": "zoom-through",
+      "energy": "high",
+      "default_duration_s": 0.4,
+      "directions": [],
+      "source": "css-scale.md",
+      "gsap_template": [
+        "tl.to(__OLD__, { scale: 2.5, opacity: 0, filter: \"blur(8px)\", duration: __DUR__, ease: \"power3.in\" }, __T__);",
+        "tl.fromTo(__NEW__, { scale: 0.5, opacity: 0, filter: \"blur(8px)\" }, { scale: 1, opacity: 1, filter: \"blur(0px)\", duration: __DUR__, ease: \"power3.out\" }, __T__);"
+      ]
+    },
+    {
+      "name": "squeeze",
+      "energy": "medium",
+      "default_duration_s": 0.4,
+      "directions": [],
+      "source": "css-push.md",
+      "note": "Old compresses to a vertical line on the left edge; new expands from the right edge. Incoming starts off (scaleX 0) so its higher-track stacking is harmless.",
+      "gsap_template": [
+        "tl.to(__OLD__, { scaleX: 0, transformOrigin: \"left center\", duration: __DUR__, ease: \"power3.inOut\" }, __T__);",
+        "tl.fromTo(__NEW__, { scaleX: 0, transformOrigin: \"right center\", opacity: 1 }, { scaleX: 1, transformOrigin: \"right center\", duration: __DUR__, ease: \"power3.inOut\" }, __T__);"
+      ]
+    }
+  ],
+  "default_high_energy": "zoom-through",
+  "default_calm": "blur-crossfade",
+  "max_duration_s": 2.0
+}
diff --git a/.claude/skills-media/product-launch-video/scripts/media-contract.test.mjs b/.claude/skills-media/product-launch-video/scripts/media-contract.test.mjs
new file mode 100644
index 000000000..55ddaaa07
--- /dev/null
+++ b/.claude/skills-media/product-launch-video/scripts/media-contract.test.mjs
@@ -0,0 +1,200 @@
+import { test } from "node:test";
+import assert from "node:assert/strict";
+import { existsSync, mkdirSync, mkdtempSync, readFileSync, writeFileSync } from "node:fs";
+import { fileURLToPath } from "node:url";
+import { dirname, join } from "node:path";
+import { tmpdir } from "node:os";
+import { spawnSync } from "node:child_process";
+
+const skillDir = join(dirname(fileURLToPath(import.meta.url)), "..");
+
+test("frame worker documents the approved video-hoist contract", () => {
+  const instructions = readFileSync(join(skillDir, "sub-agents", "frame-worker.md"), "utf8");
+
+  assert.match(instructions, /data-frame-video="approved"/);
+  assert.match(instructions, /assemble-index\.mjs.*hoists it to the host root/i);
+  assert.match(instructions, /Audio remains orchestrator-owned/i);
+});
+
+test("assemble hoists an approved timed frame video to the host root", () => {
+  const project = mkdtempSync(join(tmpdir(), "hf-frame-video-"));
+  mkdirSync(join(project, "compositions"));
+  const framePath = join(project, "compositions", "frame-1.html");
+  writeFileSync(
+    join(project, "STORYBOARD.md"),
+    "---\nformat: 16:9\n---\n\n## Frame 1 — Demo\n- status: built\n- duration: 2s\n- src: compositions/frame-1.html\n",
+  );
+  writeFileSync(
+    framePath,
+    `<html><body><div id="root" data-composition-id="frame-1" data-width="1920" data-height="1080"><video data-frame-video="approved" data-frame-video-x="0" data-frame-video-y="0" data-frame-video-width="1920" data-frame-video-height="1080" src="https://cdn.example/clip.mp4" poster="poster.png" preload="auto" muted playsinline loop style="background:url(https://evil.example/x)" nonce="unsafe" onerror="alert(1)" srcdoc="<script>alert(2)</script>" data-start="0.25" data-duration="1.5" data-media-start="12.75" data-track-index="7"></video></div><script>window.__timelines = {}; window.__timelines["frame-1"] = gsap.timeline();</script></body></html>`,
+  );
+
+  const result = spawnSync(
+    process.execPath,
+    [join(skillDir, "scripts", "assemble-index.mjs"), "--hyperframes", project],
+    { encoding: "utf8" },
+  );
+  assert.equal(result.status, 0, result.stderr);
+  const index = readFileSync(join(project, "index.html"), "utf8");
+  const frame = readFileSync(framePath, "utf8");
+  assert.match(index, /data-start="0\.25"/);
+  assert.match(index, /data-duration="1\.5"/);
+  assert.match(index, /data-media-start="12\.75"/);
+  assert.match(index, /data-track-index="1007"/);
+  assert.match(index, /src="https:\/\/cdn\.example\/clip\.mp4"/);
+  assert.match(index, /poster="poster\.png"/);
+  assert.match(index, /preload="auto"/);
+  assert.match(index, /\smuted(?:\s|>)/);
+  assert.match(index, /\splaysinline(?:\s|>)/);
+  assert.match(index, /\sloop(?:\s|>)/);
+  assert.doesNotMatch(index, /onerror=/i);
+  assert.doesNotMatch(index, /srcdoc=/i);
+  assert.doesNotMatch(index, /nonce=/i);
+  assert.match(
+    index,
+    /style="position:absolute;left:0px;top:0px;width:1920px;height:1080px;object-fit:cover"/,
+  );
+  assert.doesNotMatch(frame, /<video\b/i);
+});
+
+test("assemble preserves approved-video geometry through sanitized host CSS", () => {
+  const project = mkdtempSync(join(tmpdir(), "hf-frame-video-layout-"));
+  mkdirSync(join(project, "compositions"));
+  const framePath = join(project, "compositions", "frame-1.html");
+  writeFileSync(
+    join(project, "STORYBOARD.md"),
+    "---\nformat: 16:9\n---\n\n## Frame 1\n- status: built\n- duration: 2s\n- src: compositions/frame-1.html\n",
+  );
+  writeFileSync(
+    framePath,
+    `<html><body><div id="root" data-composition-id="frame-1" data-width="1920" data-height="1080"><video class="clip approved-demo" data-frame-video="approved" data-frame-video-x="120" data-frame-video-y="240" data-frame-video-width="960" data-frame-video-height="540" data-frame-video-fit="cover" src="clip.mp4" style="position:fixed;background:url(https://evil.example/x)" nonce="unsafe" onerror="alert(1)" srcdoc="<script>alert(2)</script>" data-start="0" data-duration="1" data-track-index="7"></video></div><script>window.__timelines = {}; window.__timelines["frame-1"] = gsap.timeline();</script></body></html>`,
+  );
+
+  const result = spawnSync(
+    process.execPath,
+    [join(skillDir, "scripts", "assemble-index.mjs"), "--hyperframes", project],
+    { encoding: "utf8" },
+  );
+
+  assert.equal(result.status, 0, result.stderr);
+  const index = readFileSync(join(project, "index.html"), "utf8");
+  assert.match(
+    index,
+    /style="position:absolute;left:120px;top:240px;width:960px;height:540px;object-fit:cover"/,
+  );
+  assert.doesNotMatch(index, /approved-demo/);
+  assert.doesNotMatch(index, /evil\.example/);
+  assert.doesNotMatch(index, /position:fixed/);
+  assert.doesNotMatch(index, /data-frame-video-(?:x|y|width|height|fit)=/);
+  assert.doesNotMatch(index, /onerror=|srcdoc=|nonce=/i);
+  assert.doesNotMatch(readFileSync(framePath, "utf8"), /<video\b/i);
+});
+
+test("rejects partial or unsafe approved-video layout geometry", () => {
+  const project = mkdtempSync(join(tmpdir(), "hf-frame-video-layout-invalid-"));
+  mkdirSync(join(project, "compositions"));
+  writeFileSync(
+    join(project, "STORYBOARD.md"),
+    "---\nformat: 16:9\n---\n\n## Frame 1\n- status: built\n- duration: 2s\n- src: compositions/frame-1.html\n",
+  );
+  writeFileSync(
+    join(project, "compositions", "frame-1.html"),
+    `<html><body><div id="root" data-composition-id="frame-1" data-width="1920" data-height="1080"><video data-frame-video="approved" data-frame-video-x="0" data-frame-video-y="0" data-frame-video-width="calc(100% + 1px)" data-frame-video-height="1080" data-frame-video-fit="cover" src="clip.mp4" data-start="0" data-duration="1" data-track-index="0"></video></div><script>window.__timelines = {}; window.__timelines["frame-1"] = gsap.timeline();</script></body></html>`,
+  );
+
+  const result = spawnSync(
+    process.execPath,
+    [join(skillDir, "scripts", "assemble-index.mjs"), "--hyperframes", project],
+    { encoding: "utf8" },
+  );
+
+  assert.notEqual(result.status, 0);
+  assert.match(result.stderr, /approved frame video layout.*finite numeric/i);
+  assert.equal(existsSync(join(project, "index.html")), false);
+});
+
+test("rejects an approved video without mandatory layout geometry", () => {
+  const project = mkdtempSync(join(tmpdir(), "hf-frame-video-layout-missing-"));
+  mkdirSync(join(project, "compositions"));
+  writeFileSync(
+    join(project, "STORYBOARD.md"),
+    "---\nformat: 16:9\n---\n\n## Frame 1\n- status: built\n- duration: 2s\n- src: compositions/frame-1.html\n",
+  );
+  writeFileSync(
+    join(project, "compositions", "frame-1.html"),
+    `<html><body><div id="root" data-composition-id="frame-1" data-width="1920" data-height="1080"><video data-frame-video="approved" src="clip.mp4" data-start="0" data-duration="1" data-track-index="0"></video></div><script>window.__timelines = {}; window.__timelines["frame-1"] = gsap.timeline();</script></body></html>`,
+  );
+
+  const result = spawnSync(
+    process.execPath,
+    [join(skillDir, "scripts", "assemble-index.mjs"), "--hyperframes", project],
+    { encoding: "utf8" },
+  );
+
+  assert.notEqual(result.status, 0);
+  assert.match(result.stderr, /approved frame video layout.*finite numeric/i);
+  assert.equal(existsSync(join(project, "index.html")), false);
+});
+
+test("rejects empty approved-video layout coordinates", () => {
+  const project = mkdtempSync(join(tmpdir(), "hf-frame-video-layout-empty-"));
+  mkdirSync(join(project, "compositions"));
+  writeFileSync(
+    join(project, "STORYBOARD.md"),
+    "---\nformat: 16:9\n---\n\n## Frame 1\n- status: built\n- duration: 2s\n- src: compositions/frame-1.html\n",
+  );
+  writeFileSync(
+    join(project, "compositions", "frame-1.html"),
+    `<html><body><div id="root" data-composition-id="frame-1" data-width="1920" data-height="1080"><video data-frame-video="approved" data-frame-video-x="" data-frame-video-y="0" data-frame-video-width="1920" data-frame-video-height="1080" src="clip.mp4" data-start="0" data-duration="1" data-track-index="0"></video></div><script>window.__timelines = {}; window.__timelines["frame-1"] = gsap.timeline();</script></body></html>`,
+  );
+
+  const result = spawnSync(
+    process.execPath,
+    [join(skillDir, "scripts", "assemble-index.mjs"), "--hyperframes", project],
+    { encoding: "utf8" },
+  );
+
+  assert.notEqual(result.status, 0);
+  assert.match(result.stderr, /approved frame video layout.*finite numeric/i);
+  assert.equal(existsSync(join(project, "index.html")), false);
+});
+
+test("rejects an approved video with missing admission timing", () => {
+  const project = mkdtempSync(join(tmpdir(), "hf-frame-video-missing-"));
+  mkdirSync(join(project, "compositions"));
+  writeFileSync(
+    join(project, "STORYBOARD.md"),
+    "---\nformat: 16:9\n---\n\n## Frame 1\n- status: built\n- duration: 2s\n- src: compositions/frame-1.html\n",
+  );
+  writeFileSync(
+    join(project, "compositions", "frame-1.html"),
+    `<html><body><div id="root" data-composition-id="frame-1" data-width="1920" data-height="1080"><video data-frame-video="approved" src="clip.mp4" data-duration="1" data-track-index="0"></video></div><script>window.__timelines = {}; window.__timelines["frame-1"] = gsap.timeline();</script></body></html>`,
+  );
+  const result = spawnSync(
+    process.execPath,
+    [join(skillDir, "scripts", "assemble-index.mjs"), "--hyperframes", project],
+    { encoding: "utf8" },
+  );
+  assert.notEqual(result.status, 0);
+  assert.match(result.stderr, /must declare quoted data-start/i);
+});
+
+test("does not hoist declarations hidden in comments or scripts", () => {
+  const project = mkdtempSync(join(tmpdir(), "hf-frame-video-hidden-"));
+  mkdirSync(join(project, "compositions"));
+  writeFileSync(
+    join(project, "STORYBOARD.md"),
+    "---\nformat: 16:9\n---\n\n## Frame 1\n- status: built\n- duration: 2s\n- src: compositions/frame-1.html\n",
+  );
+  writeFileSync(
+    join(project, "compositions", "frame-1.html"),
+    `<html><body><div id="root" data-composition-id="frame-1" data-width="1920" data-height="1080"></div><script>window.__timelines = {}; window.__timelines["frame-1"] = gsap.timeline(); const s = '<video data-frame-video="approved" data-start="0" data-duration="1" data-track-index="1"></video>';</script><!-- <video data-frame-video="approved" data-start="0" data-duration="1" data-track-index="2"></video> --></body></html>`,
+  );
+  const result = spawnSync(
+    process.execPath,
+    [join(skillDir, "scripts", "assemble-index.mjs"), "--hyperframes", project],
+    { encoding: "utf8" },
+  );
+  assert.equal(result.status, 0, result.stderr);
+  assert.doesNotMatch(readFileSync(join(project, "index.html"), "utf8"), /data-track-index="1001"/);
+});
diff --git a/.claude/skills-media/product-launch-video/scripts/stage-assets.mjs b/.claude/skills-media/product-launch-video/scripts/stage-assets.mjs
new file mode 100644
index 000000000..5ccf22ea7
--- /dev/null
+++ b/.claude/skills-media/product-launch-video/scripts/stage-assets.mjs
@@ -0,0 +1,39 @@
+#!/usr/bin/env node
+// stage-assets.mjs — copy each frame's named asset_candidates from capture/ into
+// assets/ so Step 5 frame workers reference real files and the live preview
+// (Step 3 / Step 6) shows them. Runs at Step 4 close, once visual design is
+// locked. assemble-index.mjs re-runs the same staging idempotently as a backstop.
+//
+// Reads:  --storyboard STORYBOARD.md, --hyperframes <project root>.
+// Writes: assets/<basename> for each named, found asset.
+// Exit 0 always once the storyboard parses — a missing asset is a non-fatal
+// anomaly (the frame would 404 it), not a contract break.
+
+import { existsSync, readFileSync } from "node:fs";
+import { join, resolve } from "node:path";
+import { parseStoryboard } from "./lib/storyboard.mjs";
+import { stageAssets } from "./lib/assets.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(`✗ stage-assets.mjs: ${msg}`);
+  process.exit(1);
+}
+
+const hyperframesDir = resolve(flag("hyperframes", "."));
+const storyboardPath = resolve(flag("storyboard", join(hyperframesDir, "STORYBOARD.md")));
+
+if (!existsSync(storyboardPath)) die(`STORYBOARD.md not found at ${storyboardPath}`);
+const manifest = parseStoryboard(readFileSync(storyboardPath, "utf8"));
+
+const { staged, wanted, anomalies } = stageAssets({ hyperframesDir, frames: manifest.frames });
+
+console.log(`✓ staged ${staged}/${wanted.size} asset(s) into assets/`);
+if (anomalies.length) {
+  console.log(`\nanomalies (non-fatal):`);
+  for (const a of anomalies) console.log(`  - ${a}`);
+}
diff --git a/.claude/skills-media/product-launch-video/scripts/transitions.mjs b/.claude/skills-media/product-launch-video/scripts/transitions.mjs
new file mode 100644
index 000000000..2c2c568ea
--- /dev/null
+++ b/.claude/skills-media/product-launch-video/scripts/transitions.mjs
@@ -0,0 +1,380 @@
+#!/usr/bin/env node
+// transitions.mjs — inter-frame transition injector + verifier for the video workflow.
+//
+//   inject  — read STORYBOARD frame order + each frame's transition_in, overlap
+//             the frame clip wrappers in index.html, and stamp the GSAP template.
+//   verify  — deterministic gate over the injector's output.
+//
+// transition_in (written by story-design on the INCOMING frame) names a registry
+// type directly: crossfade | blur-crossfade | push-slide | zoom-through | squeeze,
+// optionally "<type> <DIR>" / "<type> <N>s" (e.g. "push-slide LEFT", "crossfade
+// 0.4s"). `cut` / `none` / empty ⇒ hard cut (no overlap, no stamp).
+//
+// Mechanics — EXTEND-OUTGOING-ONLY (keeps voice/SFX/captions synced; their timing
+// is keyed to the original frame start). At boundary i→i+1 (type = the incoming
+// frame's transition_in): extend ONLY the outgoing wrapper's data-duration by
+// `dur` so it holds its final frame across the window; do NOT move any data-start;
+// the incoming — already present from the cut on a higher track — fades/pushes in
+// over it. Then 0/1-ping-pong ALL frame clips' data-track-index (adjacent
+// overlapping wrappers never share a track — lint timeline_track_too_dense) and
+// stamp the token-substituted GSAP template into __timelines["main"] at T =
+// incoming start. captions(2)/voice(10)/bgm(11)/sfx(20+) are never touched.
+//
+//   node transitions.mjs inject --storyboard ./STORYBOARD.md --hyperframes .
+//   node transitions.mjs verify --storyboard ./STORYBOARD.md --index ./index.html
+
+import { existsSync, readFileSync, writeFileSync } from "node:fs";
+import { join, resolve } from "node:path";
+import { parseStoryboard } from "./lib/storyboard.mjs";
+import { parseFormat } from "./lib/dimensions.mjs";
+import { loadTransitionRegistry, transitionsByName } from "./lib/transition-registry.mjs";
+import { padFrameInternalDuration } from "./lib/pad-frame-duration.mjs";
+
+const flag = (argv, name, def) => {
+  const i = argv.indexOf(`--${name}`);
+  return i >= 0 && i + 1 < argv.length ? argv[i + 1] : def;
+};
+const NO_TRANSITION = new Set(["cut", "none", ""]);
+const r3 = (x) => Number(x.toFixed(3));
+
+// transition_in → { type, direction?, dur? } | null (hard cut).
+function parseTransitionIn(raw) {
+  const s = (raw ?? "").trim();
+  if (NO_TRANSITION.has(s.toLowerCase())) return null;
+  const parts = s.split(/\s+/);
+  const spec = { type: parts[0].toLowerCase() };
+  for (const p of parts.slice(1)) {
+    const m = p.match(/^(\d+(?:\.\d+)?)s?$/);
+    if (m) spec.dur = Number(m[1]);
+    else spec.direction = p.toUpperCase();
+  }
+  return spec;
+}
+
+// Mounted STORYBOARD frames present in index.html, in document order: { id, frame }.
+function mountedFramesInOrder(manifest, html) {
+  const out = [];
+  for (const f of manifest.frames) {
+    if (!f.src) continue;
+    const id = f.src
+      .split("/")
+      .pop()
+      .replace(/\.html?$/i, "");
+    if (html.includes(`id="el-${id}"`)) out.push({ id, frame: f });
+  }
+  return out;
+}
+
+// Frame clip wrappers parsed out of index.html (ids carry hyphens; excludes
+// el-captions and audio by keying off the known frame-id set). The id is matched
+// from anywhere in the tag's attribute list — never assume it is the first attribute
+// (the index assembler emits data-hf-id before id, so an id-first regex finds nothing
+// and inject crashes on the empty clip map).
+function parseFrameClips(html, frameIds) {
+  const clipRe = /<div\b([^>]*)><\/div>/g;
+  const clips = new Map();
+  let m;
+  while ((m = clipRe.exec(html)) !== null) {
+    const attrs = m[1];
+    const idm = attrs.match(/\bid="el-([A-Za-z0-9_-]+)"/);
+    if (!idm || !frameIds.has(idm[1])) continue;
+    const num = (re) => {
+      const x = attrs.match(re);
+      return x ? Number(x[1]) : null;
+    };
+    clips.set(idm[1], {
+      id: idm[1],
+      block: m[0],
+      start: num(/data-start="([\d.]+)"/),
+      duration: num(/data-duration="([\d.]+)"/),
+      track: num(/data-track-index="(\d+)"/) ?? 0,
+    });
+  }
+  return clips;
+}
+
+// The host wrapper is extended across an outgoing transition, so the mounted
+// frame must remain visually populated for the same local-time window. Extend
+// the frame root and every non-audio timed element that reached the original
+// storyboard boundary. This also repairs worker files whose root was already
+// inflated while their ground/content clips still ended at the synced duration.
+function extendFrameTail(hyperframesDir, frame, baseDuration, targetDuration, die) {
+  if (!frame?.src || targetDuration <= baseDuration) return;
+  const framePath = join(hyperframesDir, frame.src);
+  let html;
+  try {
+    html = readFileSync(framePath, "utf8");
+  } catch {
+    die(`outgoing frame file not found at ${framePath}`);
+  }
+
+  const compId = frame.src
+    .split("/")
+    .pop()
+    .replace(/\.html?$/i, "");
+  const EPS = 0.011;
+  let foundRoot = false;
+  let extended = 0;
+  const rewritten = html.replace(/<([A-Za-z][\w:-]*)\b([^>]*)>/g, (tag, name, attrs) => {
+    const durationMatch = attrs.match(/\bdata-duration="([\d.]+)"/);
+    if (!durationMatch) return tag;
+    const duration = Number(durationMatch[1]);
+    if (!Number.isFinite(duration)) return tag;
+
+    const compositionMatch = attrs.match(/\bdata-composition-id="([^"]+)"/);
+    if (compositionMatch?.[1] === compId && !foundRoot) {
+      foundRoot = true;
+      return tag.replace(/\bdata-duration="[\d.]+"/, `data-duration="${targetDuration}"`);
+    }
+
+    if (name.toLowerCase() === "audio") return tag;
+    const startMatch = attrs.match(/\bdata-start="([\d.]+)"/);
+    if (!startMatch) return tag;
+    const start = Number(startMatch[1]);
+    const end = start + duration;
+    if (end < baseDuration - EPS || end >= targetDuration - EPS) return tag;
+    extended++;
+    return tag.replace(/\bdata-duration="[\d.]+"/, `data-duration="${r3(targetDuration - start)}"`);
+  });
+
+  if (!foundRoot) die(`${frame.src} has no data-composition-id="${compId}" root`);
+  writeFileSync(framePath, rewritten);
+  console.log(
+    `  ${compId}: extended root + ${extended} tail clip(s) ${baseDuration}s→${targetDuration}s`,
+  );
+}
+
+// Resolve a transition_in spec to a registry record (calm default on unknown).
+function resolveRecord(spec, byName, reg, warn) {
+  let rec = byName.get(spec.type);
+  if (!rec) {
+    rec = byName.get(reg.default_calm);
+    warn(`transition_in "${spec.type}" not in registry — using ${reg.default_calm}`);
+  }
+  return rec;
+}
+function resolveDur(spec, rec, reg) {
+  let dur = spec.dur ?? rec.default_duration_s ?? 0.5;
+  return Math.min(dur, reg.max_duration_s ?? 2.0);
+}
+
+// GSAP lines for one transition record (token substitution).
+function buildGsap(rec, fromId, toId, dur, T, direction, canvasW, canvasH, die) {
+  const subs = {
+    __OLD__: `"#el-${fromId}"`,
+    __NEW__: `"#el-${toId}"`,
+    __T__: String(T),
+    __DUR__: String(dur),
+  };
+  let template;
+  if (rec.directions && rec.directions.length > 0) {
+    const dir = (direction || rec.default_direction || rec.directions[0]).toUpperCase();
+    const vertical = dir === "UP" || dir === "DOWN";
+    template = vertical ? rec.gsap_template_vertical : rec.gsap_template_horizontal;
+    if (!template)
+      die(`transition ${rec.name}: missing ${vertical ? "vertical" : "horizontal"} template`);
+    if (vertical) {
+      const dy = dir === "UP" ? -canvasH : canvasH;
+      subs.__DY__ = String(dy);
+      subs.__DYIN__ = String(-dy);
+    } else {
+      const dx = dir === "LEFT" ? -canvasW : canvasW;
+      subs.__DX__ = String(dx);
+      subs.__DXIN__ = String(-dx);
+    }
+  } else {
+    template = rec.gsap_template;
+    if (!template) die(`transition ${rec.name}: missing gsap_template`);
+  }
+  return template.map((line) => {
+    let out = line;
+    for (const [k, v] of Object.entries(subs)) out = out.split(k).join(v);
+    return out;
+  });
+}
+
+function runInject(argv) {
+  const hyperframesDir = resolve(flag(argv, "hyperframes", "."));
+  const storyboardPath = resolve(flag(argv, "storyboard", join(hyperframesDir, "STORYBOARD.md")));
+  const indexPath = join(hyperframesDir, "index.html");
+  const die = (msg) => {
+    console.error(`✗ transitions inject: ${msg}`);
+    process.exit(1);
+  };
+
+  if (!existsSync(storyboardPath)) die(`STORYBOARD.md not found at ${storyboardPath}`);
+
+  const manifest = parseStoryboard(readFileSync(storyboardPath, "utf8"));
+  const { width: CW, height: CH } = parseFormat(manifest.globals.format);
+  const reg = loadTransitionRegistry();
+  const byName = transitionsByName();
+
+  // Read directly and handle ENOENT here, rather than an existsSync precheck —
+  // the check→write pair (write-back below) is a TOCTOU race CodeQL flags.
+  let html = "";
+  try {
+    html = readFileSync(indexPath, "utf8");
+  } catch {
+    die(`index.html not found at ${indexPath} — run assemble-index.mjs first`);
+  }
+  const order = mountedFramesInOrder(manifest, html);
+  if (order.length === 0) die("no frame clips found in index.html");
+  const frameIds = new Set(order.map((x) => x.id));
+  const clips = parseFrameClips(html, frameIds);
+
+  const gsapLines = [];
+  const applied = [];
+  for (let i = 1; i < order.length; i++) {
+    const spec = parseTransitionIn(order[i].frame.transitionIn);
+    if (!spec) continue; // hard cut
+    const incoming = clips.get(order[i].id);
+    const outgoing = clips.get(order[i - 1].id);
+    const rec = resolveRecord(spec, byName, reg, (m) =>
+      console.error(`  ! frame ${order[i].id}: ${m}`),
+    );
+    const dur = resolveDur(spec, rec, reg);
+    const T = r3(incoming.start); // cut = incoming start (frames tile)
+    const baseDuration = outgoing.duration;
+    outgoing.duration = r3(baseDuration + dur); // extend outgoing only
+    extendFrameTail(hyperframesDir, order[i - 1].frame, baseDuration, outgoing.duration, die);
+    padFrameInternalDuration(
+      hyperframesDir,
+      order[i - 1].frame.src,
+      outgoing.id,
+      outgoing.duration,
+    );
+    gsapLines.push(
+      ...buildGsap(rec, outgoing.id, incoming.id, dur, T, spec.direction, CW, CH, die),
+    );
+    applied.push({ from: outgoing.id, to: incoming.id, type: rec.name, dur, T });
+  }
+
+  if (applied.length === 0) {
+    console.log(`✓ transitions inject: 0 transitions (all cuts) — index.html unchanged`);
+    return;
+  }
+
+  // 0/1 ping-pong all frame clips in play order.
+  const ordered = [...clips.values()].sort((a, b) => a.start - b.start || a.id.localeCompare(b.id));
+  ordered.forEach((c, i) => {
+    c.track = i % 2;
+  });
+
+  // rewrite each clip block: start unchanged; duration possibly extended; track ping-ponged.
+  for (const c of clips.values()) {
+    const nb = c.block
+      .replace(/data-duration="[\d.]+"/, `data-duration="${c.duration}"`)
+      .replace(/data-track-index="\d+"/, `data-track-index="${c.track}"`);
+    html = html.replace(c.block, nb);
+  }
+
+  // stamp the GSAP after the master timeline anchor.
+  const anchor = 'window.__timelines["main"] = gsap.timeline({ paused: true });';
+  if (!html.includes(anchor)) die("master timeline anchor not found in index.html");
+  // The transition tweens alone leave window.__timelines["main"] spanning only the
+  // last transition (e.g. 24.7s), shorter than the real composition. The Studio
+  // reads main.duration() as its master duration and parses clips against it, so a
+  // short master collapses its timeline (clips dropped, duration wrong, blank stage)
+  // — the render engine is unaffected (it trusts the root data-duration attr). Stamp
+  // a full-span anchor so main.duration() == composition total. Mirrors the
+  // `tl.to({}, { duration })` anchor captions.html already uses.
+  const rootDurMatch = html.match(/data-composition-id="main"[^>]*?data-duration="([\d.]+)"/);
+  const totalDur = rootDurMatch ? Number(rootDurMatch[1]) : null;
+  const block = [
+    anchor,
+    "      // ── frame transitions (injected by transitions.mjs) ──",
+    '      (function () { var tl = window.__timelines["main"];',
+    ...gsapLines.map((l) => "        " + l),
+    ...(totalDur
+      ? [
+          `        tl.to({}, { duration: ${totalDur} }, 0); // full-span anchor — main.duration() == composition total (Studio master duration)`,
+        ]
+      : []),
+    "      })();",
+  ].join("\n");
+  html = html.replace(anchor, block);
+
+  writeFileSync(indexPath, html);
+  console.log(`✓ transitions inject: ${applied.length} transition(s) stamped into index.html`);
+  for (const a of applied) console.log(`  ${a.from}→${a.to}: ${a.type} ${a.dur}s @ T=${a.T}s`);
+  const tracks = ordered
+    .map((c) => `${c.id}[t${c.track} ${c.start}→${r3(c.start + c.duration)}]`)
+    .join(" ");
+  console.log(`  tracks: ${tracks}`);
+}
+
+function runVerify(argv) {
+  const hyperframesDir = resolve(flag(argv, "hyperframes", "."));
+  const storyboardPath = resolve(flag(argv, "storyboard", join(hyperframesDir, "STORYBOARD.md")));
+  const indexPath = resolve(flag(argv, "index", join(hyperframesDir, "index.html")));
+  const bail = (msg) => {
+    console.error(`✗ transitions verify: ${msg}`);
+    process.exit(1);
+  };
+
+  if (!existsSync(storyboardPath)) bail("STORYBOARD.md not found");
+  if (!existsSync(indexPath)) bail("index.html not found");
+
+  const manifest = parseStoryboard(readFileSync(storyboardPath, "utf8"));
+  const html = readFileSync(indexPath, "utf8");
+  const order = mountedFramesInOrder(manifest, html);
+  const frameIds = new Set(order.map((x) => x.id));
+  const clips = parseFrameClips(html, frameIds);
+
+  const EPS = 0.011;
+  const overlaps = (a, b) =>
+    a.start < b.start + b.duration - EPS && b.start < a.start + a.duration - EPS;
+  const fail = [];
+
+  // (4) global no same-track overlap (the lint invariant).
+  const all = [...clips.values()];
+  for (let i = 0; i < all.length; i++)
+    for (let j = i + 1; j < all.length; j++) {
+      const a = all[i];
+      const b = all[j];
+      if (a.track === b.track && overlaps(a, b))
+        fail.push(`same-track overlap: ${a.id}[t${a.track}] & ${b.id}[t${b.track}]`);
+    }
+
+  const bm = html.match(/frame transitions \(injected[\s\S]*?\}\)\(\);/);
+  const txBlock = bm ? bm[0] : "";
+
+  let expected = 0;
+  for (let i = 1; i < order.length; i++) {
+    const spec = parseTransitionIn(order[i].frame.transitionIn);
+    if (!spec) continue;
+    expected++;
+    const to = clips.get(order[i].id);
+    const from = clips.get(order[i - 1].id);
+    if (!to || !from) {
+      fail.push(`boundary ${order[i - 1].id}→${order[i].id}: wrapper missing`);
+      continue;
+    }
+    if (!txBlock.includes(`"#el-${from.id}"`) || !txBlock.includes(`"#el-${to.id}"`))
+      fail.push(`boundary ${from.id}→${to.id}: injected block does not reference both ids`);
+    const overlapAmt = r3(from.start + from.duration - to.start);
+    if (overlapAmt <= 0) fail.push(`boundary ${from.id}→${to.id}: no overlap (${overlapAmt}s)`);
+    if (from.track === to.track)
+      fail.push(`boundary ${from.id}→${to.id}: both on track ${from.track}`);
+  }
+  if (expected > 0 && !txBlock)
+    fail.push(`${expected} transition(s) expected but no injected block found`);
+
+  if (fail.length) {
+    console.error(`✗ transitions verify: ${fail.length} failure(s):`);
+    for (const f of fail) console.error(`  - ${f}`);
+    process.exit(1);
+  }
+  console.log(
+    `✓ transitions verify: ${expected} transition(s) verified (cross-track, overlap>0, both ids referenced, no same-track overlap)`,
+  );
+}
+
+const sub = process.argv[2];
+const rest = process.argv.slice(3);
+if (sub === "inject") runInject(rest);
+else if (sub === "verify") runVerify(rest);
+else {
+  console.error("usage: node transitions.mjs <inject|verify> [args...]");
+  process.exit(2);
+}
diff --git a/.claude/skills-media/product-launch-video/sub-agents/frame-worker.md b/.claude/skills-media/product-launch-video/sub-agents/frame-worker.md
new file mode 100644
index 000000000..a3b4a9a70
--- /dev/null
+++ b/.claude/skills-media/product-launch-video/sub-agents/frame-worker.md
@@ -0,0 +1,81 @@
+# Frame worker — product-launch per-frame composition author
+
+> You build **one** frame's composition HTML and nothing else. You run N-up, one frame each — siblings build the others. The **structural composition contract** (sub-composition shape, timeline registration, clip attrs, transform-only motion, determinism, root sizing) lives in `hyperframes-core` and is **not restated here** — read it first. This file carries only what's specific to a product-launch frame. Tempted to add a generic GSAP / timeline rule here? Wrong home — it belongs in `hyperframes-core`.
+
+**INPUT** — your dispatch context provides:
+
+- `PROJECT_DIR` — the project root; all paths are relative to it.
+- `frame_id` — e.g. `03-feature`. Use it **verbatim** as the composition id, the `window.__timelines` key, and the file name (`compositions/frames/03-feature.html`) — that path **is** the frame's `src` in `STORYBOARD.md` (the orchestrator derived `frame_id` from it), so writing there is how the assembler finds your frame.
+- Your **`## Frame N` block** in `STORYBOARD.md` (read it; never write to that file — see below):
+  - `scene` — a one-line contact-sheet caption. **Design intent, never visible DOM text.**
+  - `voiceover` — the narration line. **Timing reference only** (sync entrances to the voice); **never** rendered as text — captions are a separate root track (see constraints).
+  - `duration` — your render length in seconds. **Fixed upstream; never change it or tween to fill a different length.**
+  - `transition_in` — informational. The injector stamps it at the root; **you do not author transitions.**
+  - the **time-coded shot sequence** — your build spec. A sequence of Scene lines (`Scene 1 (0.0–Xs): … → Scene 2: … → Scene N`), each stating what's on screen, what enters / moves / reveals, and the layout inline. Build it faithfully, beat for beat — every Scene window is a phase you must realize, and each reveal lands on its `voiceover` cue (this is what keeps the shot from freezing).
+  - `blueprint:` — an id (or the literal `compose`). The id points to `../hyperframes-animation/blueprints/<id>.md`: the **product-agnostic shot template** this frame instantiates — the overall shape + its signature move. Read it for the shape; `compose` means there's no template, sequence the shot from the Scene lines directly.
+  - `focal:` — which candidate is the hero.
+  - `roles:` — each candidate's role: `cutout` foreground / `background` full-bleed / supporting — plus the real media available (each `public/<basename> — description`; a **`[video]`** tag marks a `.mp4` motion source that cannot be mounted by this sub-composition worker).
+  - `sfx:` — the orchestrator's; you mount no audio.
+- `frame.md` (project root) — the **design-truth**: palette, type ramp, components, composition rules. The LOOK. Pull every visual token from here.
+- **Asset paths are project-root relative everywhere.** This includes HTML attributes and CSS `url(...)` values such as `@font-face src`: use `assets/...` (or the supplied `capture/assets/...` path), never `../` or `../../`. Stage shared fonts before dispatch so every parallel frame resolves the same local files; never fall back to a network `@import`.
+- `RULES_DIR` — absolute path to this skill's local `../hyperframes-animation/rules/`. The **named motion verbs in the Scene lines** (and the moves the blueprint cites) resolve to rule recipes here: `RULES_DIR/<id>.md` is the mechanics for a motion. (A few rules link an optional runnable demo in the shared `../hyperframes-animation/examples/<id>.html` — open it only when a recipe is unclear.)
+- `../references/cut-catalog.md` — the **cut catalog** (zoom-through / inverse / cut-the-curve / waterfall). When a Scene seam is a within-scene swap, a scene-to-scene cut, or a text-to-text line change, build it INSIDE your composition per this catalog (Z-scale + blur + opacity, or per-word x-staggers). You never author the between-frame transition — story's `transition_in` + the injector own that.
+- Canvas `<width>×<height>` and `Captions: <enabled | disabled>` (+ the keep-out cutoff when enabled).
+
+**Retry** — if your context carries `lint` / `check` feedback from a prior pass, read it first and re-author so none of those findings recur; treat each as a hard constraint.
+
+**OUTPUT** — `compositions/frames/<frame_id>.html`, one self-contained sub-composition. Writing it (past the self-check below) is your **terminal action** — you do not edit `STORYBOARD.md`, mint audio, assemble the index, run the CLI, or report back. The orchestrator picks up the file and marks the frame's `status`.
+
+## When a confirmed sketch exists
+
+In collaborative runs the orchestrator wireframes the board first, so your target file may already exist as the frame's **user-confirmed wireframe** — your dispatch says whether it does (a file found on a retry is your own prior output, not a sketch). Read it first and **keep its composition**: the placement, hierarchy, and copy were approved — don't move or drop them. Everything else is yours to finish: the full `frame.md` treatment (the sketch is deliberately unstyled), the real assets where the sketch used stand-in blocks, and the motion — map each Scene onto a timeline phase, reveal each piece on its `voiceover` cue with `fromTo` entrances, adding DOM only where a phase needs it. The frame's landed state must still read as the approved wireframe, fully dressed.
+
+## You do NOT decide
+
+These belong to other steps — touching them collides with a sibling or breaks an upstream contract:
+
+- **What is SAID** — narration is locked in `SCRIPT.md` / the `voiceover` line. You only show; you never write or restate narration text.
+- **Duration** — fixed from real voice timing. Build your entrance to land within it; don't stretch or trim it.
+- **Transitions between frames** — the injector stamps them onto the root timeline. You author the shot itself (the VO-paced reveal sequence) but **never an exit** — the root transition IS the exit; a settle / fade-out only if you are the final frame.
+- **Audio** (narration / BGM / SFX) — assembled at the root by the orchestrator. **No `<audio>` element in your composition.**
+- **Design tokens** — palette / fonts / components come from `frame.md`. Don't invent them, and **never lift a word, label, or wordmark out of `frame.md` as your copy** — it is a style spec, not the product's content. Brand text comes from your frame's `scene` / narrative.
+- **Which motions / assets exist** — named upstream in your block (the shot sequence's motion verbs + `blueprint:`, the candidate media in `roles:` / `focal:`). Implement them; don't fetch or invent new ones (you have no asset-fetch tool — never fabricate an image URL).
+- **The shared `STORYBOARD.md`** — read your block, never write it. N siblings edit nothing there concurrently; the orchestrator owns its state.
+
+## Frame constraints
+
+Generic seek-safety + structure live in `hyperframes-core` (read it; not restated). These are the **product-launch deltas**, each load-bearing:
+
+- **Caption keep-out — all content in the top ~83%.** A karaoke caption pill owns the bottom ~17% of the canvas. Keep every element (headline, cards, CTA, stats, brand mark) above `y ≈ 0.83 × height` — compute the pixel cutoff from your canvas (e.g. `≤ 900` on a 1080-tall frame, `≤ 1600` on a 1920-tall portrait). Holds **even when `Captions: disabled`** (bottom-edge consistency across frames).
+- **Fill the content area — especially portrait.** Compose the whole top-83% region; don't float one small cluster mid-frame. Anchor the hero high (~0.2–0.35 × height), flow supporting elements down with rhythm, scale hero type toward full-bleed. (Landscape's region is short, so vertical centering near 0.42 × height is fine.)
+- **Visible text is short motion-graphics copy** — headline / stat / one-word emphasis (`"$83K"`, `"INSTANT"`), never a sentence from the narration. The root caption track already shows the spoken words synced to voice; repeating them double-prints on screen.
+- **Build the whole shot — reveal across the full `duration`, never front-load.** Dumping the whole canvas in the first ~25% then holding it is exactly what reads as a PowerPoint slide. Instead reveal each piece — a line, a card, a stat, an icon — **as the `voiceover` reaches it**, sequencing reveals across the shot and especially the back ~50%, with the macro camera move running underneath. **Only EXITS are banned** — a non-final frame unmounts mid-frame, so an exit tween truncates and reads as a glitch (the root transition IS the exit); mid-shot reveals are free and seek-safe. The lone exception is a note marked as a deliberate hold / stillness frame: there, an entrance + a quiet settle is right (a held read beats bad motion).
+- **Implement the shot sequence faithfully — every Scene is a timeline phase.** The Scene lines ARE the build: map each Scene onto a phase of the one timeline, each piece revealing as the `voiceover` reaches it. For each **named motion** in a Scene, open its rule recipe under `RULES_DIR/<id>.md` and reproduce its mechanics — **never name-guess** (a guess loses the signature move). The **`blueprint:` template** (`../hyperframes-animation/blueprints/<id>.md`) gives the overall shape; read it and keep its **signature move** recognizable, then instantiate it with this frame's content / assets / timing. `compose` → no template; sequence the shot straight from the Scene lines. Whichever, never front-load the whole sequence at `t=0` — pace the reveals to the voiceover.
+- **Place each candidate by its `roles`** (the `focal` is the hero): a `cutout` is a foreground subject — respect the 83% keep-out, lay text around it, not over its face; a `background` is full-bleed and dimmed ~30–50% so foreground content stays legible. Frame files are sub-compositions. Audio remains orchestrator-owned: never author `<audio>` in a frame. An approved `[video]` candidate may be declared as a frame-local `<video data-frame-video="approved" data-start="..." data-duration="..." data-track-index="...">`; `assemble-index.mjs` hoists it to the host root and translates its timing. Give every approved video explicit host geometry with numeric `data-frame-video-x`, `data-frame-video-y`, `data-frame-video-width`, and `data-frame-video-height`; optionally set `data-frame-video-fit="cover|contain|fill|none|scale-down"` (default `cover`). The assembler converts only those values to host CSS: frame-local classes and inline styles do not cross the hoist boundary. Do not use this declaration for audio, unapproved URLs, or videos without explicit timing and geometry. If no approved video is supplied, use an explicitly supplied static still/key art (`[video-still]` or another image candidate) as `<img>`; do not extract a frame, fabricate a URL, or silently embed an unapproved clip.
+
+## Workflow
+
+1. **Read** — `hyperframes-core`'s composition contract (the structural law), then `frame.md` (the look) and your `## Frame N` block (the shot sequence + `blueprint:` / `focal:` / `roles:` / assets). **Then read the blueprint template** `../hyperframes-animation/blueprints/<id>.md` (skip if `compose`) for the shot's shape and signature move, and **open the rule recipe `RULES_DIR/<id>.md` for every named motion** in the Scene lines (plus the shared `../hyperframes-animation/examples/<id>.html` when the recipe is unclear): you reproduce these mechanics, not improvise them. Internalize the self-check codes below before you write — most lethal is **template transport**: every `<style>` + `<script>` (including the gsap load) must live INSIDE `<template>`, because the runtime only clones template contents and the assembled-project `lint` / `check` gate can miss an unwired blank sub-composition.
+2. **Design** — turn the time-coded shot sequence into a timeline using `frame.md`'s components and type ramp: each Scene window becomes a phase revealed on its `voiceover` cue, each named motion built from the recipe you just read, the blueprint's signature move kept recognizable. Place the named assets, and find a visual idea that reinforces the beat, not a literal restyle of the words.
+3. **Author** — write the full sub-composition to `compositions/frames/<frame_id>.html` (rewrite to iterate; last write wins). `<template>`-wrapped root carrying `data-composition-id="<frame_id>"` and styled via `#root` (not a class on that element — see the self-check below), exactly one `gsap.timeline({ paused: true })` registered at `window.__timelines["<frame_id>"]`, built synchronously — per the core contract.
+   Prefix authored ids and globally reusable class names with `<frame_id>-` so sibling frames assembled from parallel workers cannot collide. Contract selectors such as `#root` and `.clip` are the only exceptions.
+4. **Self-check, then finish** — re-read your file against the checklist below and fix in place. Writing the file is your terminal action; you do **not** run the CLI.
+
+## Self-check before finishing (you do NOT run the CLI)
+
+You **can't** meaningfully run `hyperframes lint` / `check` here: they operate on the **assembled project** (the `index.html` graph / bundle), and your frame isn't wired in yet — so they report on _other_ files, not yours (a false green). The **orchestrator** runs them at **Step 6, after assembly** (the correct unit), and **re-dispatches you with the finding** if your frame fails (see **Retry** above). So get it right on write: re-read your file against this checklist before finishing — the codes in parens are `hyperframes lint`'s and what the orchestrator may cite back (the rules behind them live in `hyperframes-core`):
+
+- `missing_template_wrapper` / `missing_composition_id` — root is `<template>`-wrapped and carries `data-composition-id="<frame_id>"`.
+- **Template transport** — every `<style>` and `<script>` block, including the GSAP load, lives inside `<template>`.
+- `subcomposition_root_styled_by_class` — **style the frame root via `#root`, never a class on the `data-composition-id` element**: at render a class on the root gets scoped to a descendant selector that can't match it, so the **whole scene renders unstyled** (Studio preview still looks right — trust this rule, not the preview). Descendants use plain selectors.
+- **Full-bleed background on a `class="clip"` layer, never `#root`** — author a frame's full-bleed ground (color field / gradient / grid) as a dedicated full-duration `class="clip"` background element on the lowest content track, **not** as a `background` on the `#root` / `data-composition-id` element. At assembly the frame root is clip-gated to its scene window, so a background painted on the root is not a dependable full-frame ground — dark content can end up over the host `body` (black) and render invisible. The video's base ground is painted separately by the assembler from `frame.md`'s `canvas` color onto the index `#root`; your full-bleed clip rides on top of it.
+- `clip_missing_data_attrs` — every `class="clip"` element has `data-start` / `data-duration` / `data-track-index`.
+- `timeline_not_paused` / `timeline_not_registered` — one paused timeline, registered at `window.__timelines["<frame_id>"]`.
+- `css_transition_used` + repeat / yoyo / non-deterministic logic — none present (the renderer seeks frame-by-frame).
+- `gsap_css_transform_conflict` — never put a CSS `transform` (e.g. `translateY(-50%)` centering) on an element you then GSAP-animate a transform prop on (`x` / `y` / `scale` / `rotation`): GSAP overwrites the whole `transform` and silently drops the CSS centering (the element jumps). Center with `margin` / `inset` (or `top`/`left` + offset), fold the offset into the tween via `xPercent` / `yPercent`, or use `fromTo` (the rule exempts it).
+- **Hero visibility** — the main subject is visible by `t <= 0.5s`; entrance tweens use `fromTo` instead of CSS-hidden starting states.
+- `exit_animation_on_non_final_scene` — no exit tween unless you are the final frame.
+- **No front-loading (not a slide)** — the shot's pieces reveal on their `voiceover` cues across the duration, not all fired at `t=0`; a non-still frame keeps content arriving rather than holding a full canvas from ~25%.
+- **Shot-sequence fidelity** — every Scene in the time-coded sequence is realized as a phase, the blueprint's signature move (unless `compose`) is present and recognizable, and the shot reveals to the voiceover (never front-loaded at `t=0`).
+- `font_family_without_font_face` — every font you name has a matching `@font-face` (or `@import`) **inside this file**. **Only use fonts that ship as files** with the project: the families declared in `frame.md` (their `.woff2` live in `assets/fonts/` or `capture/assets/fonts/` — point the `@font-face` `src` at the real file you find there). **Never name a font that has no file**, including system CJK / Japanese / Devanagari families (`Hiragino Sans`, `Yu Gothic`, `Noto Sans CJK`, `Noto Sans Devanagari`, …): the render machine is a clean headless Chrome with none of them installed, so the text silently falls back to a generic font and the typography is wrong in the MP4. For non-Latin or multilingual visible text, either use a shipped font that covers the script, or romanize / transliterate it (e.g. `日本語` → `Japanese`); if neither is possible it is out of scope for this frame — do not invent a font name.
+- **Keep-out + no-narration-text** (eyeball, no code) — nothing sits below the 83% cutoff; no narration sentence is rendered as visible text.
diff --git a/.claude/skills-media/remotion-to-hyperframes/SKILL.md b/.claude/skills-media/remotion-to-hyperframes/SKILL.md
new file mode 100644
index 000000000..ec7c8f1af
--- /dev/null
+++ b/.claude/skills-media/remotion-to-hyperframes/SKILL.md
@@ -0,0 +1,129 @@
+---
+name: remotion-to-hyperframes
+description: 'Port an existing Remotion (React) composition''s source to HyperFrames HTML. Use ONLY on an explicit ask to port/convert/migrate/translate a Remotion source — one-way, Remotion-only. A passing Remotion mention, reference-only code, or "make something like my Remotion video" is a fresh build (/general-video). Unclear → /hyperframes.'
+---
+
+> **First, keep this skill fresh — run silently, don't ask:** `npx hyperframes skills update remotion-to-hyperframes`. A fast no-op when everything is current; otherwise it refreshes this skill plus the core domain skills it depends on before you rely on them.
+
+# Remotion to HyperFrames
+
+> **The front door is `/hyperframes`.** Use this **only** to port an existing **Remotion** (React) composition's source into HyperFrames, one way. Authoring a **new** composition, re-creating from a non-Remotion source (After Effects, Framer Motion, plain React / CSS — there is no Remotion source to translate), a passing Remotion mention, or any uncertainty → read `/hyperframes` first: the intent layer owns every route decision.
+
+## Overview
+
+Translate Remotion (React-based) video compositions into HyperFrames (HTML + GSAP) compositions. Most Remotion idioms have direct HyperFrames equivalents — the translation is mechanical for ~80% of typical compositions. This skill encodes the mapping and guards against the lossy 20% by refusing to translate patterns that don't fit HF's seek-driven model and recommending the runtime interop pattern from [PR #214](https://github.com/heygen-com/hyperframes/pull/214) instead.
+
+The skill ships with a **tiered test corpus** (T1–T4, 4 fixtures total) that grades translations against measured SSIM thresholds. Don't translate without running the eval — a translation that "looks right" but renders 0.05 SSIM lower than the validated baseline is silently wrong.
+
+## When to use
+
+**Use this skill ONLY when the user explicitly asks to migrate from Remotion.** Example trigger phrases:
+
+- "port my Remotion project to HyperFrames"
+- "convert this Remotion code to HyperFrames"
+- "migrate from Remotion"
+- "translate this Remotion comp"
+- "rewrite this as HyperFrames HTML"
+
+**Do NOT use this skill when:**
+
+- (a) The user is authoring a **new** HyperFrames composition, even if they have or are A/B-testing a similar Remotion video.
+- (b) The user mentions Remotion in passing without asking for migration.
+- (c) The user shares Remotion code as reference material rather than asking for a translation.
+- (d) The user asks for "the same video as my Remotion one" without explicitly asking to migrate the source — treat that as a fresh HyperFrames build.
+
+**NOT SUPPORTED (decline — this is not what this skill does):**
+
+- **The reverse direction.** Exporting a HyperFrames composition back out _to_ Remotion (or to any other framework) is not a workflow — the translation is Remotion → HyperFrames only. Say so plainly.
+- **Non-Remotion sources.** An After Effects project (`.aep`), a Framer Motion / plain-React / CSS animation, or any other tool's source is not a Remotion composition — there is no Remotion source to translate. Re-create it natively via `/general-video`, or decline if HyperFrames can't represent it.
+
+When in doubt, default to authoring a native HyperFrames composition with `/general-video` (the general HyperFrames authoring flow) instead.
+
+## Workflow
+
+### Step 1: Lint the source
+
+Run [`scripts/lint_source.py`](scripts/lint_source.py) over the Remotion source directory. The lint detects patterns that can't translate cleanly:
+
+- **Blockers** (refuse + recommend interop): `useState`, `useReducer`, `useEffect`/`useLayoutEffect` with non-empty deps, async `calculateMetadata`, third-party React UI libraries (MUI, Chakra, Mantine, antd, shadcn, Radix, NextUI).
+- **Warnings** (translate after dropping the construct): `@remotion/lambda` config, `delayRender`, `useCallback`, `useMemo`, custom hooks.
+- **Info** (translate with note): `staticFile`, `interpolateColors`.
+
+If any blocker fires, **stop**. Read [`references/escape-hatch.md`](references/escape-hatch.md) and surface the recommendation message. Warnings don't stop translation — drop the offending construct in step 3 and note the gap in `TRANSLATION_NOTES.md`. `@remotion/lambda` config is the canonical warning case: the skill drops the import + `renderMediaOnLambda(...)` calls but translates the rest of the composition.
+
+### Step 2: Plan the translation
+
+Read [`references/api-map.md`](references/api-map.md) — the index of every Remotion API and its HF equivalent or per-topic reference. Identify which topic references you'll need based on what the source uses:
+
+| Source contains                                                           | Load reference                                |
+| ------------------------------------------------------------------------- | --------------------------------------------- |
+| `Composition`, `defaultProps`, `schema`, `calculateMetadata`              | [`parameters.md`](references/parameters.md)   |
+| `Sequence`, `Series`, `Loop`, `AbsoluteFill`, `Freeze`                    | [`sequencing.md`](references/sequencing.md)   |
+| `useCurrentFrame`, `interpolate`, `spring`, `Easing`, `interpolateColors` | [`timing.md`](references/timing.md)           |
+| `Audio`, `Video`, `Img`, `IFrame`, `staticFile`, `delayRender`            | [`media.md`](references/media.md)             |
+| `TransitionSeries`, `@remotion/transitions`                               | [`transitions.md`](references/transitions.md) |
+| `@remotion/lottie`                                                        | [`lottie.md`](references/lottie.md)           |
+| `@remotion/google-fonts/<Family>`, `Font.loadFont`, `@font-face`          | [`fonts.md`](references/fonts.md)             |
+
+Don't load all of them — load only what the specific source needs.
+
+### Step 3: Generate the HF composition
+
+Emit `index.html` with:
+
+- Root `<div id="stage">` carrying the composition's `data-composition-id`, `data-start="0"`, `data-duration` (in seconds), `data-fps`, `data-width`, `data-height`, plus one `data-*` per scalar prop.
+- A flat list of scene divs with `data-start` / `data-duration` / `data-track-index`.
+- Inline `<style>` for layout; CSS sets the `from` state of every animated property.
+- A single `<script>` tag at the bottom containing one paused `gsap.timeline({paused: true})`. Every Remotion `useCurrentFrame()` derivation becomes a tween on this timeline at the right offset.
+- `window.__timelines["<composition-id>"] = tl;` registers the timeline with HF's runtime.
+
+Custom React subcomponents inline as repeated HTML using the prop interface as the template (see [`parameters.md`](references/parameters.md) for the per-instance `data-*` pattern).
+
+### Step 4: Validate
+
+Run the eval harness — [`references/eval.md`](references/eval.md) for the full guide. Quick path:
+
+```bash
+# Render Remotion baseline (after npm install in the fixture)
+cd remotion-src && npx remotion render <CompositionId> out/baseline.mp4
+
+# Render HF translation
+cd ../hf-src && npx hyperframes render --skill=remotion-to-hyperframes --output ../hf.mp4
+
+# SSIM diff
+../../scripts/render_diff.sh ./remotion-src/out/baseline.mp4 ./hf.mp4 ./diff
+```
+
+Threshold: ~0.02 below `p05` of the source's complexity tier (see `eval.md`'s validated thresholds table). If the diff fails, run [`scripts/frame_strip.sh`](scripts/frame_strip.sh) to see _which_ frames diverged, then re-read the relevant timing/sequencing/media reference.
+
+**Critical**: both renders must use matching pixel format. Set `Config.setVideoImageFormat("png")` + `Config.setColorSpace("bt709")` in the Remotion source's `remotion.config.ts` — otherwise the diff measures encoder differences (~0.05 SSIM hit), not translation fidelity.
+
+### Step 5: Document gaps
+
+Anything that didn't translate cleanly (volume ramps dropped, custom presentations approximated, fonts substituted) gets a `TRANSLATION_NOTES.md` written next to the HF output. See [`references/limitations.md`](references/limitations.md) for the format.
+
+## What this skill explicitly does NOT do
+
+- **Translate React state machines.** Compositions that drive animation via `useState` + `useEffect` are not deterministic frame-capture targets in HyperFrames' seek-driven model. Recommend the runtime interop pattern.
+- **Run Remotion's render pipeline alongside HyperFrames.** That's the runtime interop pattern from [PR #214](https://github.com/heygen-com/hyperframes/pull/214) — a separate solution for compositions that fail this skill's lint.
+
+(`@remotion/lambda` is _not_ a blocker — Lambda config is deployment, not animation. The skill drops it as a warning and translates the rest. See [`references/escape-hatch.md`](references/escape-hatch.md).)
+
+## How to grade your own translation
+
+Run the test corpus orchestrator:
+
+```bash
+./assets/test-corpus/run.sh
+```
+
+It runs T1, T2, T3 (render + diff) and T4 (lint validation), prints a per-tier pass/fail table, and emits an aggregate JSON report. Use this to verify the skill is working end-to-end on a clean checkout — and as a regression check after editing any reference.
+
+Validated baseline (as of 2026-04-27):
+
+| Tier | Composition shape                           | Mean SSIM | Threshold |
+| ---- | ------------------------------------------- | --------- | --------- |
+| T1   | single-element fade-in                      | 0.974     | 0.95      |
+| T2   | multi-scene + spring + audio + image        | 0.985     | 0.95      |
+| T3   | data-driven, custom subcomponents, count-up | 0.953     | 0.90      |
+| T4   | escape-hatch (8 lint cases)                 | 8/8 pass  | n/a       |
diff --git a/.claude/skills-media/remotion-to-hyperframes/assets/.gitkeep b/.claude/skills-media/remotion-to-hyperframes/assets/.gitkeep
new file mode 100644
index 000000000..e69de29bb
diff --git a/.claude/skills-media/remotion-to-hyperframes/assets/test-corpus/.gitignore b/.claude/skills-media/remotion-to-hyperframes/assets/test-corpus/.gitignore
new file mode 100644
index 000000000..89d8102e4
--- /dev/null
+++ b/.claude/skills-media/remotion-to-hyperframes/assets/test-corpus/.gitignore
@@ -0,0 +1 @@
+run-report.json
diff --git a/.claude/skills-media/remotion-to-hyperframes/assets/test-corpus/run.sh b/.claude/skills-media/remotion-to-hyperframes/assets/test-corpus/run.sh
new file mode 100755
index 000000000..50920be7a
--- /dev/null
+++ b/.claude/skills-media/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-media/remotion-to-hyperframes/assets/test-corpus/tier-1-title-card/.gitignore b/.claude/skills-media/remotion-to-hyperframes/assets/test-corpus/tier-1-title-card/.gitignore
new file mode 100644
index 000000000..d45877158
--- /dev/null
+++ b/.claude/skills-media/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-media/remotion-to-hyperframes/assets/test-corpus/tier-1-title-card/README.md b/.claude/skills-media/remotion-to-hyperframes/assets/test-corpus/tier-1-title-card/README.md
new file mode 100644
index 000000000..7b496809c
--- /dev/null
+++ b/.claude/skills-media/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-media/remotion-to-hyperframes/assets/test-corpus/tier-1-title-card/expected.json b/.claude/skills-media/remotion-to-hyperframes/assets/test-corpus/tier-1-title-card/expected.json
new file mode 100644
index 000000000..bccec0a59
--- /dev/null
+++ b/.claude/skills-media/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.972,
+    "measured_p05_ssim": 0.972,
+    "measured_p95_ssim": 0.983,
+    "measured_at": "2026-04-27",
+    "measured_against": "remotion@4.0 (PNG output, BT.709) vs hyperframes@0.4.15-alpha.1"
+  },
+  "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-media/remotion-to-hyperframes/assets/test-corpus/tier-1-title-card/hf-src/index.html b/.claude/skills-media/remotion-to-hyperframes/assets/test-corpus/tier-1-title-card/hf-src/index.html
new file mode 100644
index 000000000..df2570b8f
--- /dev/null
+++ b/.claude/skills-media/remotion-to-hyperframes/assets/test-corpus/tier-1-title-card/hf-src/index.html
@@ -0,0 +1,61 @@
+<!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;
+      }
+      .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>
+  </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-start="0" data-duration="3" data-track-index="0">
+        <div class="title">HELLO</div>
+      </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.
+        // Frame ranges → time ranges:  0/30=0,  15/30=0.5,  75/30=2.5,  90/30=3.0
+        const tl = gsap.timeline({ paused: true });
+        const target = document.querySelector("#title .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["tier-1-title-card"] = tl;
+      </script>
+    </div>
+  </body>
+</html>
diff --git a/.claude/skills-media/remotion-to-hyperframes/assets/test-corpus/tier-1-title-card/remotion-src/package.json b/.claude/skills-media/remotion-to-hyperframes/assets/test-corpus/tier-1-title-card/remotion-src/package.json
new file mode 100644
index 000000000..1c33b63b4
--- /dev/null
+++ b/.claude/skills-media/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-media/remotion-to-hyperframes/assets/test-corpus/tier-1-title-card/remotion-src/remotion.config.ts b/.claude/skills-media/remotion-to-hyperframes/assets/test-corpus/tier-1-title-card/remotion-src/remotion.config.ts
new file mode 100644
index 000000000..a22cafc5e
--- /dev/null
+++ b/.claude/skills-media/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-media/remotion-to-hyperframes/assets/test-corpus/tier-1-title-card/remotion-src/src/Root.tsx b/.claude/skills-media/remotion-to-hyperframes/assets/test-corpus/tier-1-title-card/remotion-src/src/Root.tsx
new file mode 100644
index 000000000..f8dd72770
--- /dev/null
+++ b/.claude/skills-media/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-media/remotion-to-hyperframes/assets/test-corpus/tier-1-title-card/remotion-src/src/TitleCard.tsx b/.claude/skills-media/remotion-to-hyperframes/assets/test-corpus/tier-1-title-card/remotion-src/src/TitleCard.tsx
new file mode 100644
index 000000000..924557fff
--- /dev/null
+++ b/.claude/skills-media/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-media/remotion-to-hyperframes/assets/test-corpus/tier-1-title-card/remotion-src/src/index.ts b/.claude/skills-media/remotion-to-hyperframes/assets/test-corpus/tier-1-title-card/remotion-src/src/index.ts
new file mode 100644
index 000000000..f31c790ed
--- /dev/null
+++ b/.claude/skills-media/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-media/remotion-to-hyperframes/assets/test-corpus/tier-1-title-card/remotion-src/tsconfig.json b/.claude/skills-media/remotion-to-hyperframes/assets/test-corpus/tier-1-title-card/remotion-src/tsconfig.json
new file mode 100644
index 000000000..eb6f0f806
--- /dev/null
+++ b/.claude/skills-media/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-media/remotion-to-hyperframes/assets/test-corpus/tier-2-multi-scene/.gitignore b/.claude/skills-media/remotion-to-hyperframes/assets/test-corpus/tier-2-multi-scene/.gitignore
new file mode 100644
index 000000000..def72ea01
--- /dev/null
+++ b/.claude/skills-media/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-media/remotion-to-hyperframes/assets/test-corpus/tier-2-multi-scene/README.md b/.claude/skills-media/remotion-to-hyperframes/assets/test-corpus/tier-2-multi-scene/README.md
new file mode 100644
index 000000000..17659a683
--- /dev/null
+++ b/.claude/skills-media/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}>`                         | `<div 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">` (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
+we `gsap.set(scene, { opacity: 0 })` so the previous 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-media/remotion-to-hyperframes/assets/test-corpus/tier-2-multi-scene/expected.json b/.claude/skills-media/remotion-to-hyperframes/assets/test-corpus/tier-2-multi-scene/expected.json
new file mode 100644
index 000000000..ed5c477df
--- /dev/null
+++ b/.claude/skills-media/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.985,
+    "measured_min_ssim": 0.963,
+    "measured_p05_ssim": 0.966,
+    "measured_p95_ssim": 0.999,
+    "measured_at": "2026-04-27",
+    "measured_against": "remotion@4.0 (PNG output, BT.709) vs hyperframes@0.4.15-alpha.1",
+    "notes": "Spring → back.out(1.4) translation came out cleaner than expected; mean 0.985 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> → wrapping div with data-start/data-duration in seconds and explicit gsap.set(opacity, 0/1) at scene boundaries to crossfade in/out cleanly",
+    "<Audio src volume> → <audio data-start data-duration data-volume>",
+    "<Img src={staticFile('x')}> → <img src='assets/x'>; 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-media/remotion-to-hyperframes/assets/test-corpus/tier-2-multi-scene/hf-src/index.html b/.claude/skills-media/remotion-to-hyperframes/assets/test-corpus/tier-2-multi-scene/hf-src/index.html
new file mode 100644
index 000000000..9a6635305
--- /dev/null
+++ b/.claude/skills-media/remotion-to-hyperframes/assets/test-corpus/tier-2-multi-scene/hf-src/index.html
@@ -0,0 +1,118 @@
+<!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;
+      }
+      .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);
+      }
+      .square {
+        width: 200px;
+        height: 200px;
+        opacity: 0;
+        transform: scale(0.8);
+      }
+      .outro {
+        font-size: 100px;
+        font-weight: 600;
+        color: #ffffff;
+      }
+    </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="scene clip" data-start="0" data-duration="2" data-track-index="0">
+        <div class="title">Welcome</div>
+      </div>
+
+      <div id="scene-2" class="scene clip" data-start="2" data-duration="2" data-track-index="0">
+        <img class="square" src="assets/square.png" alt="" />
+      </div>
+
+      <div id="scene-3" class="scene clip" data-start="4" data-duration="2" data-track-index="0">
+        <div class="outro">Goodbye</div>
+      </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>
+        // Translation of Remotion's 3-Sequence MultiScene at fps=30, total 6s.
+        //
+        // Scene 1 (0-2s): TitleScene — spring scale on "Welcome".
+        //   Remotion: spring({frame, fps, config: {damping:12, stiffness:100, mass:1}})
+        //   GSAP equivalent: back.out(1.4) over ~0.7s. Spring → ease translation
+        //   is approximate; expect minor differences in the tail of the curve.
+        //
+        // Scene 2 (2-4s): ImageScene — opacity 0→1 over 0-0.5s + scale 0.8→1.0 over 0-2.0s.
+        //   Both Remotion interpolates use linear (default), match with ease:"none".
+        //
+        // Scene 3 (4-6s): OutroScene — opacity 0→1 over 4-5s, linear.
+
+        const tl = gsap.timeline({ paused: true });
+
+        // Scene 1 setup: opacity flick on so scene becomes visible at start
+        const scene1 = document.querySelector("#scene-1");
+        const title = scene1.querySelector(".title");
+        tl.set(scene1, { opacity: 1 }, 0);
+        tl.to(title, { scale: 1, duration: 0.7, ease: "back.out(1.4)" }, 0);
+        tl.set(scene1, { opacity: 0 }, 2);
+
+        // Scene 2
+        const scene2 = document.querySelector("#scene-2");
+        const square = scene2.querySelector(".square");
+        tl.set(scene2, { opacity: 1 }, 2);
+        tl.to(square, { opacity: 1, duration: 0.5, ease: "none" }, 2);
+        tl.to(square, { scale: 1.0, duration: 2.0, ease: "none" }, 2);
+        tl.set(scene2, { opacity: 0 }, 4);
+
+        // Scene 3
+        const scene3 = document.querySelector("#scene-3");
+        const outro = scene3.querySelector(".outro");
+        tl.set(scene3, { opacity: 1 }, 4);
+        tl.fromTo(outro, { opacity: 0 }, { opacity: 1, duration: 1.0, ease: "none" }, 4);
+
+        window.__timelines = window.__timelines || {};
+        window.__timelines["tier-2-multi-scene"] = tl;
+      </script>
+    </div>
+  </body>
+</html>
diff --git a/.claude/skills-media/remotion-to-hyperframes/assets/test-corpus/tier-2-multi-scene/remotion-src/package.json b/.claude/skills-media/remotion-to-hyperframes/assets/test-corpus/tier-2-multi-scene/remotion-src/package.json
new file mode 100644
index 000000000..88b08833a
--- /dev/null
+++ b/.claude/skills-media/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-media/remotion-to-hyperframes/assets/test-corpus/tier-2-multi-scene/remotion-src/remotion.config.ts b/.claude/skills-media/remotion-to-hyperframes/assets/test-corpus/tier-2-multi-scene/remotion-src/remotion.config.ts
new file mode 100644
index 000000000..a22cafc5e
--- /dev/null
+++ b/.claude/skills-media/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-media/remotion-to-hyperframes/assets/test-corpus/tier-2-multi-scene/remotion-src/src/MultiScene.tsx b/.claude/skills-media/remotion-to-hyperframes/assets/test-corpus/tier-2-multi-scene/remotion-src/src/MultiScene.tsx
new file mode 100644
index 000000000..362d967fa
--- /dev/null
+++ b/.claude/skills-media/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-media/remotion-to-hyperframes/assets/test-corpus/tier-2-multi-scene/remotion-src/src/Root.tsx b/.claude/skills-media/remotion-to-hyperframes/assets/test-corpus/tier-2-multi-scene/remotion-src/src/Root.tsx
new file mode 100644
index 000000000..37703e9cd
--- /dev/null
+++ b/.claude/skills-media/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-media/remotion-to-hyperframes/assets/test-corpus/tier-2-multi-scene/remotion-src/src/index.ts b/.claude/skills-media/remotion-to-hyperframes/assets/test-corpus/tier-2-multi-scene/remotion-src/src/index.ts
new file mode 100644
index 000000000..f31c790ed
--- /dev/null
+++ b/.claude/skills-media/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-media/remotion-to-hyperframes/assets/test-corpus/tier-2-multi-scene/remotion-src/tsconfig.json b/.claude/skills-media/remotion-to-hyperframes/assets/test-corpus/tier-2-multi-scene/remotion-src/tsconfig.json
new file mode 100644
index 000000000..eb6f0f806
--- /dev/null
+++ b/.claude/skills-media/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-media/remotion-to-hyperframes/assets/test-corpus/tier-2-multi-scene/setup.sh b/.claude/skills-media/remotion-to-hyperframes/assets/test-corpus/tier-2-multi-scene/setup.sh
new file mode 100755
index 000000000..918212337
--- /dev/null
+++ b/.claude/skills-media/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-media/remotion-to-hyperframes/assets/test-corpus/tier-3-data-driven/.gitignore b/.claude/skills-media/remotion-to-hyperframes/assets/test-corpus/tier-3-data-driven/.gitignore
new file mode 100644
index 000000000..d45877158
--- /dev/null
+++ b/.claude/skills-media/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-media/remotion-to-hyperframes/assets/test-corpus/tier-3-data-driven/README.md b/.claude/skills-media/remotion-to-hyperframes/assets/test-corpus/tier-3-data-driven/README.md
new file mode 100644
index 000000000..711733364
--- /dev/null
+++ b/.claude/skills-media/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-media/remotion-to-hyperframes/assets/test-corpus/tier-3-data-driven/expected.json b/.claude/skills-media/remotion-to-hyperframes/assets/test-corpus/tier-3-data-driven/expected.json
new file mode 100644
index 000000000..82c0a7de7
--- /dev/null
+++ b/.claude/skills-media/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.977,
+    "measured_at": "2026-04-27",
+    "measured_against": "remotion@4.0 (PNG output, BT.709) vs hyperframes@0.4.15-alpha.1",
+    "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-media/remotion-to-hyperframes/assets/test-corpus/tier-3-data-driven/hf-src/index.html b/.claude/skills-media/remotion-to-hyperframes/assets/test-corpus/tier-3-data-driven/hf-src/index.html
new file mode 100644
index 000000000..e4253f204
--- /dev/null
+++ b/.claude/skills-media/remotion-to-hyperframes/assets/test-corpus/tier-3-data-driven/hf-src/index.html
@@ -0,0 +1,269 @@
+<!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;
+      }
+      .scene {
+        position: absolute;
+        inset: 0;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        opacity: 0;
+      }
+
+      /* Scene 1 — Title */
+      .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;
+      }
+
+      /* Scene 2 — Stats */
+      .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;
+      }
+
+      /* Scene 3 — Outro */
+      .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>
+  </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"
+    >
+      <!-- Scene 1: Title -->
+      <div
+        id="scene-1"
+        class="scene scene-1 clip"
+        data-start="0"
+        data-duration="3"
+        data-track-index="0"
+      >
+        <div class="title">STARGAZED</div>
+        <div class="subtitle">by HeyGen</div>
+      </div>
+
+      <!-- Scene 2: Stats — three StatCards as repeated markup with per-instance data attrs -->
+      <div
+        id="scene-2"
+        class="scene scene-2 clip"
+        data-start="3"
+        data-duration="4"
+        data-track-index="0"
+      >
+        <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>
+
+      <!-- Scene 3: Outro -->
+      <div
+        id="scene-3"
+        class="scene scene-3 clip"
+        data-start="7"
+        data-duration="3"
+        data-track-index="0"
+      >
+        <div class="outro-wrap">
+          <div class="outro-text">thanks for watching</div>
+          <div class="outro-underline"></div>
+        </div>
+      </div>
+
+      <script>
+        // ────────────────────────────────────────────────────────────────────
+        // Translation of Stargazed.tsx
+        //
+        // Remotion structure:
+        //   <Composition schema={zod} defaultProps={...} fps=30 dur=300>
+        //     <Sequence 0..90>   <TitleScene title subtitle />
+        //     <Sequence 90..210> <StatsScene stats />
+        //     <Sequence 210..300><OutroScene text />
+        //
+        // HF structure:
+        //   - root #stage carries data-* with the same props (title, subtitle, outro)
+        //   - 3 scene divs with data-start/data-duration in seconds (frames/fps)
+        //   - Custom React subcomponents inline as repeated HTML; their per-instance
+        //     props become data-* attributes on the markup
+        //   - Animation lives in a single paused GSAP timeline keyed by composition seconds
+        //
+        // Frame → time:
+        //   Sequence(0,90)    → 0s..3s        (title)
+        //   Sequence(90,210)  → 3s..7s        (stats; 4s window)
+        //   Sequence(210,300) → 7s..10s       (outro)
+        //   Stagger(i*12)     → i*0.4s        (12 frames at 30fps)
+        // ────────────────────────────────────────────────────────────────────
+
+        const tl = gsap.timeline({ paused: true });
+
+        // ─── Scene 1: Title ─────────────────────────────────────────────────
+        const scene1 = document.querySelector("#scene-1");
+        const title = scene1.querySelector(".title");
+        const subtitle = scene1.querySelector(".subtitle");
+
+        tl.set(scene1, { opacity: 1 }, 0);
+        // spring({damping:12, stiffness:100, mass:1}) → back.out(1.4) ~0.7s
+        tl.to(title, { scale: 1, duration: 0.7, ease: "back.out(1.4)" }, 0);
+        // interpolate(frame, [20,40], [0,1]) at fps=30 → 0.667s..1.333s linear
+        tl.fromTo(subtitle, { opacity: 0 }, { opacity: 1, duration: 0.667, ease: "none" }, 0.667);
+        tl.set(scene1, { opacity: 0 }, 3);
+
+        // ─── Scene 2: Stats ─────────────────────────────────────────────────
+        const scene2 = document.querySelector("#scene-2");
+        const cards = scene2.querySelectorAll(".stat-card");
+
+        tl.set(scene2, { opacity: 1 }, 3);
+
+        cards.forEach((card, i) => {
+          const stagger = i * 0.4; // i * 12 frames at 30 fps
+          const start = 3 + stagger;
+          const value = Number(card.dataset.statValue);
+          const numberEl = card.querySelector(".number");
+
+          // StatCard entrance:
+          //   spring({damping:14, stiffness:90, mass:1}) → back.out(1.2) ~0.7s
+          //   interpolate(local, [0,12], [0,1]) → 0s..0.4s linear opacity
+          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: count from 0 → value with easeOutCubic over 45 frames (1.5s).
+          // GSAP equivalent: a tween on a counter object with onUpdate rewriting textContent.
+          // power3.out is GSAP's name for cubic easeOut.
+          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(scene2, { opacity: 0 }, 7);
+
+        // ─── Scene 3: Outro ─────────────────────────────────────────────────
+        const scene3 = document.querySelector("#scene-3");
+        const outroWrap = scene3.querySelector(".outro-wrap");
+        const underline = scene3.querySelector(".outro-underline");
+
+        tl.set(scene3, { opacity: 1 }, 7);
+        // interpolate(frame, [0,12], [0,1]) → 0s..0.4s linear opacity
+        tl.to(outroWrap, { opacity: 1, duration: 0.4, ease: "none" }, 7);
+        // interpolate(frame, [10,40], [0,1]) for underline → starts at 7+0.333s, dur 1s
+        tl.to(underline, { scaleX: 1, duration: 1.0, ease: "none" }, 7.333);
+
+        window.__timelines = window.__timelines || {};
+        window.__timelines["tier-3-data-driven"] = tl;
+      </script>
+    </div>
+  </body>
+</html>
diff --git a/.claude/skills-media/remotion-to-hyperframes/assets/test-corpus/tier-3-data-driven/remotion-src/package.json b/.claude/skills-media/remotion-to-hyperframes/assets/test-corpus/tier-3-data-driven/remotion-src/package.json
new file mode 100644
index 000000000..d5acfc24d
--- /dev/null
+++ b/.claude/skills-media/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-media/remotion-to-hyperframes/assets/test-corpus/tier-3-data-driven/remotion-src/remotion.config.ts b/.claude/skills-media/remotion-to-hyperframes/assets/test-corpus/tier-3-data-driven/remotion-src/remotion.config.ts
new file mode 100644
index 000000000..a22cafc5e
--- /dev/null
+++ b/.claude/skills-media/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-media/remotion-to-hyperframes/assets/test-corpus/tier-3-data-driven/remotion-src/src/Root.tsx b/.claude/skills-media/remotion-to-hyperframes/assets/test-corpus/tier-3-data-driven/remotion-src/src/Root.tsx
new file mode 100644
index 000000000..5932bcd45
--- /dev/null
+++ b/.claude/skills-media/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-media/remotion-to-hyperframes/assets/test-corpus/tier-3-data-driven/remotion-src/src/Stargazed.tsx b/.claude/skills-media/remotion-to-hyperframes/assets/test-corpus/tier-3-data-driven/remotion-src/src/Stargazed.tsx
new file mode 100644
index 000000000..4579c6d9a
--- /dev/null
+++ b/.claude/skills-media/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-media/remotion-to-hyperframes/assets/test-corpus/tier-3-data-driven/remotion-src/src/components/AnimatedNumber.tsx b/.claude/skills-media/remotion-to-hyperframes/assets/test-corpus/tier-3-data-driven/remotion-src/src/components/AnimatedNumber.tsx
new file mode 100644
index 000000000..d1a03f5e7
--- /dev/null
+++ b/.claude/skills-media/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-media/remotion-to-hyperframes/assets/test-corpus/tier-3-data-driven/remotion-src/src/components/StatCard.tsx b/.claude/skills-media/remotion-to-hyperframes/assets/test-corpus/tier-3-data-driven/remotion-src/src/components/StatCard.tsx
new file mode 100644
index 000000000..7de79fc43
--- /dev/null
+++ b/.claude/skills-media/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-media/remotion-to-hyperframes/assets/test-corpus/tier-3-data-driven/remotion-src/src/components/UnderlinedText.tsx b/.claude/skills-media/remotion-to-hyperframes/assets/test-corpus/tier-3-data-driven/remotion-src/src/components/UnderlinedText.tsx
new file mode 100644
index 000000000..38800f42c
--- /dev/null
+++ b/.claude/skills-media/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-media/remotion-to-hyperframes/assets/test-corpus/tier-3-data-driven/remotion-src/src/index.ts b/.claude/skills-media/remotion-to-hyperframes/assets/test-corpus/tier-3-data-driven/remotion-src/src/index.ts
new file mode 100644
index 000000000..f31c790ed
--- /dev/null
+++ b/.claude/skills-media/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-media/remotion-to-hyperframes/assets/test-corpus/tier-3-data-driven/remotion-src/src/scenes/OutroScene.tsx b/.claude/skills-media/remotion-to-hyperframes/assets/test-corpus/tier-3-data-driven/remotion-src/src/scenes/OutroScene.tsx
new file mode 100644
index 000000000..3121b49dd
--- /dev/null
+++ b/.claude/skills-media/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-media/remotion-to-hyperframes/assets/test-corpus/tier-3-data-driven/remotion-src/src/scenes/StatsScene.tsx b/.claude/skills-media/remotion-to-hyperframes/assets/test-corpus/tier-3-data-driven/remotion-src/src/scenes/StatsScene.tsx
new file mode 100644
index 000000000..aeb6878a4
--- /dev/null
+++ b/.claude/skills-media/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-media/remotion-to-hyperframes/assets/test-corpus/tier-3-data-driven/remotion-src/src/scenes/TitleScene.tsx b/.claude/skills-media/remotion-to-hyperframes/assets/test-corpus/tier-3-data-driven/remotion-src/src/scenes/TitleScene.tsx
new file mode 100644
index 000000000..12d000388
--- /dev/null
+++ b/.claude/skills-media/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-media/remotion-to-hyperframes/assets/test-corpus/tier-3-data-driven/remotion-src/tsconfig.json b/.claude/skills-media/remotion-to-hyperframes/assets/test-corpus/tier-3-data-driven/remotion-src/tsconfig.json
new file mode 100644
index 000000000..eb6f0f806
--- /dev/null
+++ b/.claude/skills-media/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-media/remotion-to-hyperframes/assets/test-corpus/tier-4-escape-hatch/README.md b/.claude/skills-media/remotion-to-hyperframes/assets/test-corpus/tier-4-escape-hatch/README.md
new file mode 100644
index 000000000..ac36e230d
--- /dev/null
+++ b/.claude/skills-media/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-media/remotion-to-hyperframes/assets/test-corpus/tier-4-escape-hatch/cases/01-use-state.tsx b/.claude/skills-media/remotion-to-hyperframes/assets/test-corpus/tier-4-escape-hatch/cases/01-use-state.tsx
new file mode 100644
index 000000000..d022bb277
--- /dev/null
+++ b/.claude/skills-media/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-media/remotion-to-hyperframes/assets/test-corpus/tier-4-escape-hatch/cases/02-use-effect-deps.tsx b/.claude/skills-media/remotion-to-hyperframes/assets/test-corpus/tier-4-escape-hatch/cases/02-use-effect-deps.tsx
new file mode 100644
index 000000000..270a65fa6
--- /dev/null
+++ b/.claude/skills-media/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-media/remotion-to-hyperframes/assets/test-corpus/tier-4-escape-hatch/cases/03-async-metadata.tsx b/.claude/skills-media/remotion-to-hyperframes/assets/test-corpus/tier-4-escape-hatch/cases/03-async-metadata.tsx
new file mode 100644
index 000000000..c1ecbbbc8
--- /dev/null
+++ b/.claude/skills-media/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-media/remotion-to-hyperframes/assets/test-corpus/tier-4-escape-hatch/cases/04-third-party-react.tsx b/.claude/skills-media/remotion-to-hyperframes/assets/test-corpus/tier-4-escape-hatch/cases/04-third-party-react.tsx
new file mode 100644
index 000000000..5787c4891
--- /dev/null
+++ b/.claude/skills-media/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-media/remotion-to-hyperframes/assets/test-corpus/tier-4-escape-hatch/cases/05-lambda-config.tsx b/.claude/skills-media/remotion-to-hyperframes/assets/test-corpus/tier-4-escape-hatch/cases/05-lambda-config.tsx
new file mode 100644
index 000000000..e4cdb2c00
--- /dev/null
+++ b/.claude/skills-media/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-media/remotion-to-hyperframes/assets/test-corpus/tier-4-escape-hatch/cases/06-warnings-only.tsx b/.claude/skills-media/remotion-to-hyperframes/assets/test-corpus/tier-4-escape-hatch/cases/06-warnings-only.tsx
new file mode 100644
index 000000000..eecf83261
--- /dev/null
+++ b/.claude/skills-media/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-media/remotion-to-hyperframes/assets/test-corpus/tier-4-escape-hatch/cases/07-custom-hook.tsx b/.claude/skills-media/remotion-to-hyperframes/assets/test-corpus/tier-4-escape-hatch/cases/07-custom-hook.tsx
new file mode 100644
index 000000000..7ebcf9cf5
--- /dev/null
+++ b/.claude/skills-media/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-media/remotion-to-hyperframes/assets/test-corpus/tier-4-escape-hatch/cases/08-mixed.tsx b/.claude/skills-media/remotion-to-hyperframes/assets/test-corpus/tier-4-escape-hatch/cases/08-mixed.tsx
new file mode 100644
index 000000000..68d918280
--- /dev/null
+++ b/.claude/skills-media/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-media/remotion-to-hyperframes/assets/test-corpus/tier-4-escape-hatch/expected.json b/.claude/skills-media/remotion-to-hyperframes/assets/test-corpus/tier-4-escape-hatch/expected.json
new file mode 100644
index 000000000..94a494e6c
--- /dev/null
+++ b/.claude/skills-media/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-media/remotion-to-hyperframes/assets/test-corpus/tier-4-escape-hatch/validate.sh b/.claude/skills-media/remotion-to-hyperframes/assets/test-corpus/tier-4-escape-hatch/validate.sh
new file mode 100755
index 000000000..e7180f48c
--- /dev/null
+++ b/.claude/skills-media/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-media/remotion-to-hyperframes/references/api-map.md b/.claude/skills-media/remotion-to-hyperframes/references/api-map.md
new file mode 100644
index 000000000..23481216e
--- /dev/null
+++ b/.claude/skills-media/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}>` | `<div data-start="<F/fps>" data-duration="<D/fps>" data-track-index="N">`                                 |
+| `<Series>` + `<Series.Sequence>`           | siblings with sequential `data-start` values                                                              |
+| `<Loop durationInFrames={D}>`              | not a primitive — emit a custom GSAP `repeat: -1` loop with manual offset math                            |
+| `<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 muted playsinline data-start data-duration data-track-index src>`   |
+| `<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"` — 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-media/remotion-to-hyperframes/references/escape-hatch.md b/.claude/skills-media/remotion-to-hyperframes/references/escape-hatch.md
new file mode 100644
index 000000000..9dd0fa445
--- /dev/null
+++ b/.claude/skills-media/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-media/remotion-to-hyperframes/references/eval.md b/.claude/skills-media/remotion-to-hyperframes/references/eval.md
new file mode 100644
index 000000000..edb951c3a
--- /dev/null
+++ b/.claude/skills-media/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-media/remotion-to-hyperframes/references/fonts.md b/.claude/skills-media/remotion-to-hyperframes/references/fonts.md
new file mode 100644
index 000000000..56c92983b
--- /dev/null
+++ b/.claude/skills-media/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-media/remotion-to-hyperframes/references/limitations.md b/.claude/skills-media/remotion-to-hyperframes/references/limitations.md
new file mode 100644
index 000000000..e01980652
--- /dev/null
+++ b/.claude/skills-media/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 supports static `data-volume` only. Translation: bake the ramp into
+the audio file at translation time using `ffmpeg afade`, OR drop the
+ramp with a note. 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>
+```
+
+Loop with `repeat: -1` works for _visual_ repetition. 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.
+
+### 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 dropped — added
+  static `data-volume="0.5"`. To preserve the ramp, run
+  `ffmpeg -i music.wav -af "afade=t=in:st=0:d=1" music.faded.wav` and
+  swap the source file.
+- `<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-media/remotion-to-hyperframes/references/lottie.md b/.claude/skills-media/remotion-to-hyperframes/references/lottie.md
new file mode 100644
index 000000000..2fdb2e7d1
--- /dev/null
+++ b/.claude/skills-media/remotion-to-hyperframes/references/lottie.md
@@ -0,0 +1,121 @@
+# 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 to
+the player option only after checking the generated frames. The HF
+adapter seeks absolute composition time; it does not add modulo looping
+or playback-rate scaling on top of the player. For exact repeating
+cycles or non-default playback rates, bake the timing into the Lottie
+asset or author an explicit timeline around the Lottie layer 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-media/remotion-to-hyperframes/references/media.md b/.claude/skills-media/remotion-to-hyperframes/references/media.md
new file mode 100644
index 000000000..1c7b77dde
--- /dev/null
+++ b/.claude/skills-media/remotion-to-hyperframes/references/media.md
@@ -0,0 +1,149 @@
+# 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])} />
+```
+
+HF supports static `data-volume` only for now. Volume ramps need to be
+applied to the audio file at translation time (with ffmpeg `afade`) or the
+ramp is dropped with a translation note.
+
+### 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")} muted playsInline />
+<OffthreadVideo src={staticFile("intro.mp4")} muted />
+```
+
+```html
+<video
+  muted
+  playsinline
+  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>`.
+
+`muted` and `playsinline` are required for the runtime to autoplay
+(browser policy). Always emit them.
+
+## `<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-media/remotion-to-hyperframes/references/parameters.md b/.claude/skills-media/remotion-to-hyperframes/references/parameters.md
new file mode 100644
index 000000000..56fde3ecf
--- /dev/null
+++ b/.claude/skills-media/remotion-to-hyperframes/references/parameters.md
@@ -0,0 +1,167 @@
+# 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.
+
+## 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-media/remotion-to-hyperframes/references/sequencing.md b/.claude/skills-media/remotion-to-hyperframes/references/sequencing.md
new file mode 100644
index 000000000..c0de381c6
--- /dev/null
+++ b/.claude/skills-media/remotion-to-hyperframes/references/sequencing.md
@@ -0,0 +1,195 @@
+# Sequencing translation: Sequence, Series, Composition root
+
+How Remotion's nested `Sequence` tree maps to HF's flat `data-start` /
+`data-duration` markup with a single paused GSAP timeline.
+
+## 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 siblings on the same
+parent, each with their own time window.
+
+## `<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>` → time-windowed div
+
+```tsx
+<Sequence from={0} durationInFrames={90}>
+  <TitleCard />
+</Sequence>
+```
+
+```html
+<div data-start="0" data-duration="3" data-track-index="0">
+  <!-- TitleCard children inlined -->
+</div>
+```
+
+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.
+
+## 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 HF div with the resolved
+window:
+
+```html
+<div data-start="3" data-duration="2" data-track-index="0">
+  <!-- ImageScene children -->
+</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:
+
+```html
+<div data-start="0" data-duration="2" data-track-index="0">A</div>
+<div data-start="2" data-duration="4" data-track-index="0">B</div>
+<div data-start="6" data-duration="3" data-track-index="0">C</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:
+
+```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 to a GSAP timeline with
+`repeat: -1`:
+
+```js
+const spinTl = gsap.timeline({ paused: true, repeat: -1, 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.
+For most simple "spin forever" cases this is fine.
+
+## `<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-media/remotion-to-hyperframes/references/timing.md b/.claude/skills-media/remotion-to-hyperframes/references/timing.md
new file mode 100644
index 000000000..dee32aee7
--- /dev/null
+++ b/.claude/skills-media/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-media/remotion-to-hyperframes/references/transitions.md b/.claude/skills-media/remotion-to-hyperframes/references/transitions.md
new file mode 100644
index 000000000..223cc7ff1
--- /dev/null
+++ b/.claude/skills-media/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-media/remotion-to-hyperframes/scripts/.gitkeep b/.claude/skills-media/remotion-to-hyperframes/scripts/.gitkeep
new file mode 100644
index 000000000..e69de29bb
diff --git a/.claude/skills-media/remotion-to-hyperframes/scripts/frame_strip.sh b/.claude/skills-media/remotion-to-hyperframes/scripts/frame_strip.sh
new file mode 100755
index 000000000..468d50d5e
--- /dev/null
+++ b/.claude/skills-media/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-media/remotion-to-hyperframes/scripts/lint_source.py b/.claude/skills-media/remotion-to-hyperframes/scripts/lint_source.py
new file mode 100755
index 000000000..e3a8ecd5c
--- /dev/null
+++ b/.claude/skills-media/remotion-to-hyperframes/scripts/lint_source.py
@@ -0,0 +1,358 @@
+#!/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
+
+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]:
+    src = path.read_text()
+    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-media/remotion-to-hyperframes/scripts/render_diff.sh b/.claude/skills-media/remotion-to-hyperframes/scripts/render_diff.sh
new file mode 100755
index 000000000..dc349fd11
--- /dev/null
+++ b/.claude/skills-media/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-media/remotion-to-hyperframes/scripts/tests/fixtures/blocker.tsx b/.claude/skills-media/remotion-to-hyperframes/scripts/tests/fixtures/blocker.tsx
new file mode 100644
index 000000000..f03636631
--- /dev/null
+++ b/.claude/skills-media/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-media/remotion-to-hyperframes/scripts/tests/fixtures/clean.tsx b/.claude/skills-media/remotion-to-hyperframes/scripts/tests/fixtures/clean.tsx
new file mode 100644
index 000000000..73c9b60c2
--- /dev/null
+++ b/.claude/skills-media/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-media/remotion-to-hyperframes/scripts/tests/smoke.sh b/.claude/skills-media/remotion-to-hyperframes/scripts/tests/smoke.sh
new file mode 100755
index 000000000..3a13c2804
--- /dev/null
+++ b/.claude/skills-media/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/ai-image-creator/SKILL.md b/.claude/skills/ai-image-creator/SKILL.md
index 135d35adc..dc10b9cd4 100644
--- a/.claude/skills/ai-image-creator/SKILL.md
+++ b/.claude/skills/ai-image-creator/SKILL.md
@@ -22,6 +22,25 @@ When the user mentions a model keyword in their image request, use the correspon
 | `flux2` | [FLUX.2 Max](https://openrouter.ai/black-forest-labs/flux.2-max) | "flux2", "flux", "use flux" |
 | `seedream` | [ByteDance SeedDream 4.5](https://openrouter.ai/bytedance-seed/seedream-4.5) | "seedream", "use seedream" |
 | `gpt5` | [OpenAI GPT-5 Image](https://openrouter.ai/openai/gpt-5-image) | "gpt5", "gpt5 image", "use gpt5" |
+| `nvidia-flux2-klein-4b` | BFL FLUX.2 Klein 4B via NVIDIA NIM (default for `--provider nvidia`) | "nvidia", "flux nvidia", "nvidia flux2" |
+| `nvidia-flux-dev` | BFL FLUX.1-dev via NVIDIA NIM (30 steps, high quality) | "nvidia flux dev" |
+| `nvidia-flux-schnell` | BFL FLUX.1-schnell via NVIDIA NIM (4 steps, fastest) | "nvidia schnell", "flux rápido" |
+| `image2` | OpenAI GPT Image 2 via Images API direta (default for `--provider openai`) | "image2", "gpt image 2", "imagem openai" |
+
+**OpenAI Images API notes (`image2`):**
+- Requires a **platform API key** (`AI_IMG_CREATOR_OPENAI_KEY` or `OPENAI_API_KEY`, billing on platform.openai.com).
+- **ChatGPT Plus / Codex OAuth tokens CANNOT generate images** — they lack the `api.model.images.request` scope (verified: API returns 401). Do not suggest the Codex login as an image path.
+- `--provider omniroute` routes the same Images API call through the self-hosted OmniRoute gateway: set only `AI_IMG_CREATOR_OMNIROUTE_KEY` — the base URL defaults to `http://omniroute:20128/v1` (VPS stack alias; override with `AI_IMG_CREATOR_OMNIROUTE_BASE_URL` outside the stack). The gateway must proxy `POST /v1/images/generations`.
+- `AI_IMG_CREATOR_OPENAI_BASE_URL` (advanced, optional) reroutes the plain `openai` provider through any other OpenAI-compatible endpoint. Must end in `/v1`.
+- `-a` maps to the supported sizes (1024x1024, 1536x1024, 1024x1536). `--image-size`, `-r` (reference images) and `--analyze` are not supported on this provider.
+- Excellent text rendering (including Portuguese accents) — good choice for text-critical art.
+
+**NVIDIA NIM notes:**
+- Free tier with generous credits — good fallback when OpenRouter hits rate limits.
+- Generation is fast (~2-5s). Output is JPEG, auto-converted to PNG via ImageMagick/ffmpeg.
+- Dimensions are restricted (768-1344 per side, ≤1.06MP total) — `-a` maps to the closest supported size. `--image-size` is not supported.
+- Text rendering (especially Portuguese accents like Ç/Ã) is hit-or-miss on all FLUX variants — for text-critical art, generate 2-3 candidates and pick, or use `gemini`/`gpt5` which render text reliably.
+- Reference images (`-r`) and `--analyze` are not supported on the NVIDIA provider.
 
 ## Instructions
 
@@ -99,6 +118,9 @@ The script auto-loads env vars from the workspace `.env`. Choose provider based
 - If `AI_IMG_CREATOR_CF_ACCOUNT_ID` + `AI_IMG_CREATOR_CF_GATEWAY_ID` + `AI_IMG_CREATOR_CF_TOKEN` are set → use default (gateway mode, no flag needed)
 - If only `AI_IMG_CREATOR_OPENROUTER_KEY` is set → use default (`--provider openrouter`, implicit)
 - If only `AI_IMG_CREATOR_GEMINI_KEY` is set → use `--provider google`
+- If `NVIDIA_API_KEY` is set → `--provider nvidia` is available (FLUX models, free tier). Auto-selected when the model keyword starts with `nvidia-`
+- If `AI_IMG_CREATOR_OPENAI_KEY` (or `OPENAI_API_KEY`) is set → `--provider openai` is available (gpt-image-2 via Images API on api.openai.com)
+- If `AI_IMG_CREATOR_OMNIROUTE_KEY` is set → `--provider omniroute` is available (same gpt-image-2 call routed through the self-hosted OmniRoute gateway — base URL defaults to `http://omniroute:20128/v1`, no extra config needed)
 - **Do NOT use `source .env`** — the Python script loads it internally. Just run the command directly.
 
 ### Step 2: Run Generation Script
@@ -193,6 +215,7 @@ If the user needs resizing, format conversion, or other manipulation, first dete
 | `AI_IMG_CREATOR_CF_TOKEN` | Gateway mode | Gateway auth token |
 | `AI_IMG_CREATOR_OPENROUTER_KEY` | Direct OpenRouter | OpenRouter API key (`sk-or-...`) |
 | `AI_IMG_CREATOR_GEMINI_KEY` | Direct Google | Google AI Studio API key |
+| `NVIDIA_API_KEY` | NVIDIA NIM | NVIDIA API key (`nvapi-...`) — same key used by the dashboard NVIDIA provider |
 
 Gateway mode activates when all 3 `CF_*` vars are set. Falls back to direct mode if gateway fails.
 
diff --git a/.claude/skills/ai-image-creator/scripts/generate-image.py b/.claude/skills/ai-image-creator/scripts/generate-image.py
index 71b040a2d..f150537a9 100644
--- a/.claude/skills/ai-image-creator/scripts/generate-image.py
+++ b/.claude/skills/ai-image-creator/scripts/generate-image.py
@@ -1,19 +1,22 @@
 #!/usr/bin/env python3
-"""AI Image Generator — Generate PNG images via multiple OpenRouter models or Google AI Studio.
+"""AI Image Generator — Generate PNG images via multiple providers.
 
 Supports multiple image generation models via keyword shortcuts:
-    gemini     — Google Gemini 3.1 Flash (default, multimodal)
-    riverflow  — Sourceful Riverflow v2 Fast (image-only)
-    flux2      — Black Forest Labs FLUX.2 Klein 4B (image-only)
-    seedream   — ByteDance SeedDream 4.5 (image-only)
-    gpt5       — OpenAI GPT-5 Image Mini (multimodal)
-
-Routes through Cloudflare AI Gateway BYOK when configured, with automatic
-fallback to direct API calls. Uses only Python stdlib (no pip dependencies).
+    gemini     — Google Gemini 3.1 Flash (multimodal, OpenRouter)
+    riverflow  — Sourceful Riverflow v2 Fast (image-only, OpenRouter)
+    flux2      — Black Forest Labs FLUX.2 Klein 4B (image-only, OpenRouter)
+    seedream   — ByteDance SeedDream 4.5 (image-only, OpenRouter)
+    gpt5       — OpenAI GPT-5 Image Mini (multimodal, OpenRouter)
+    nvidia-flux2-klein-4b — BFL FLUX.2 Klein 4B via NVIDIA NIM (default nvidia, best text rendering)
+    nvidia-flux-dev     — BFL FLUX.1-dev via NVIDIA NIM (high quality)
+    nvidia-flux-schnell — BFL FLUX.1-schnell via NVIDIA NIM (fastest)
+
+Routes through Cloudflare AI Gateway BYOK when configured (OpenRouter/Google only),
+with automatic fallback to direct API calls. Uses only Python stdlib (no pip dependencies).
 
 Usage:
     uv run python generate-image.py --output path.png --prompt "description"
-    uv run python generate-image.py --output path.png --model riverflow --prompt "description"
+    uv run python generate-image.py --output path.png --model nvidia-flux2-klein-4b --prompt "description"
     uv run python generate-image.py --output path.png --prompt-file prompt.txt
     uv run python generate-image.py --list-models
 """
@@ -40,6 +43,39 @@
 DEFAULT_MODELS = {
     "openrouter": "google/gemini-3.1-flash-image-preview",
     "google": "gemini-3.1-flash-image-preview",
+    "nvidia": "black-forest-labs/flux.2-klein-4b",
+    "openai": "gpt-image-2",
+}
+
+# Aspect ratio → size string accepted by the OpenAI Images API
+# (gpt-image models accept 1024x1024, 1536x1024, 1024x1536, auto).
+OPENAI_SIZE_MAP = {
+    "1:1": "1024x1024",
+    "16:9": "1536x1024",
+    "3:2": "1536x1024",
+    "4:3": "1536x1024",
+    "5:4": "1536x1024",
+    "21:9": "1536x1024",
+    "9:16": "1024x1536",
+    "2:3": "1024x1536",
+    "3:4": "1024x1536",
+    "4:5": "1024x1536",
+}
+
+# Aspect ratio → (width, height) within the dimension set NVIDIA NIM accepts
+# (768, 832, 896, 960, 1024, 1088, 1152, 1216, 1280, 1344) AND the total
+# pixel budget (width × height <= 1,062,400 — validated by the API).
+NVIDIA_ASPECT_MAP = {
+    "1:1": (1024, 1024),
+    "16:9": (1344, 768),
+    "9:16": (768, 1344),
+    "3:2": (1152, 768),
+    "2:3": (768, 1152),
+    "4:3": (1024, 768),
+    "3:4": (768, 1024),
+    "5:4": (1024, 832),
+    "4:5": (832, 1024),
+    "21:9": (1344, 768),  # closest supported — true 21:9 unavailable
 }
 
 # Model registry — maps keyword shortcuts to model metadata.
@@ -71,6 +107,58 @@
         "modalities": ["image", "text"],
         "description": "OpenAI GPT-5 Image — multimodal (text+image)",
     },
+    # OpenAI Images API — requires a PLATFORM API key (api.openai.com billing).
+    # ChatGPT Plus / Codex OAuth tokens lack the api.model.images.request
+    # scope and cannot generate images (verified empirically — 401).
+    "image2": {
+        "id": "gpt-image-2",
+        "provider": "openai",
+        "modalities": ["image"],
+        "description": "OpenAI GPT Image 2 — Images API direta (requer API key de plataforma)",
+    },
+    # NVIDIA NIM Flux models
+    "nvidia-flux-dev": {
+        "id": "black-forest-labs/flux.1-dev",
+        "provider": "nvidia",
+        "modalities": ["image"],
+        "description": "Black Forest Labs FLUX.1-dev — high quality, NVIDIA NIM",
+        "nvidia_params": {
+            "width": {"default": 1024, "enum": [768, 832, 896, 960, 1024, 1088, 1152, 1216, 1280, 1344]},
+            "height": {"default": 1024, "enum": [768, 832, 896, 960, 1024, 1088, 1152, 1216, 1280, 1344]},
+            "cfg_scale": {"type": "number", "default": 5, "minimum": 1, "maximum": 9, "description": "How strictly the diffusion process adheres to the prompt text"},
+            "steps": {"type": "integer", "default": 30, "minimum": 1, "maximum": 50, "description": "Number of diffusion steps"},
+            "seed": {"type": "integer", "default": 0, "minimum": 0, "exclusiveMaximum": 4294967296, "description": "Random seed (0 for random)"},
+            "samples": {"type": "integer", "default": 1, "minimum": 1, "maximum": 1},
+        },
+    },
+    "nvidia-flux-schnell": {
+        "id": "black-forest-labs/flux.1-schnell",
+        "provider": "nvidia",
+        "modalities": ["image"],
+        "description": "Black Forest Labs FLUX.1-schnell — fast, NVIDIA NIM",
+        "nvidia_params": {
+            "width": {"default": 1024, "enum": [768, 832, 896, 960, 1024, 1088, 1152, 1216, 1280, 1344]},
+            "height": {"default": 1024, "enum": [768, 832, 896, 960, 1024, 1088, 1152, 1216, 1280, 1344]},
+            "cfg_scale": {"type": "number", "default": 0, "minimum": 0, "maximum": 0},
+            "steps": {"type": "integer", "default": 4, "minimum": 1, "maximum": 30},
+            "seed": {"type": "integer", "default": 0, "minimum": 0, "exclusiveMaximum": 4294967296},
+            "samples": {"type": "integer", "default": 1, "minimum": 1, "maximum": 1},
+        },
+    },
+    "nvidia-flux2-klein-4b": {
+        "id": "black-forest-labs/flux.2-klein-4b",
+        "provider": "nvidia",
+        "modalities": ["image"],
+        "description": "Black Forest Labs FLUX.2 Klein 4B — fastest, NVIDIA NIM",
+        "nvidia_params": {
+            "width": {"default": 1024, "enum": [768, 832, 896, 960, 1024, 1088, 1152, 1216, 1280, 1344]},
+            "height": {"default": 1024, "enum": [768, 832, 896, 960, 1024, 1088, 1152, 1216, 1280, 1344]},
+            "cfg_scale": {"type": "number", "default": 1, "minimum": 1, "maximum": 9},
+            "steps": {"type": "integer", "default": 4, "minimum": 1, "maximum": 4},
+            "seed": {"type": "integer", "default": 0, "minimum": 0, "exclusiveMaximum": 4294967296},
+            "samples": {"type": "integer", "default": 1, "minimum": 1, "maximum": 1},
+        },
+    },
 }
 
 # Environment variable names (prefixed to avoid collisions)
@@ -79,6 +167,16 @@
 ENV_CF_TOKEN = "AI_IMG_CREATOR_CF_TOKEN"
 ENV_OPENROUTER_KEY = "AI_IMG_CREATOR_OPENROUTER_KEY"
 ENV_GEMINI_KEY = "AI_IMG_CREATOR_GEMINI_KEY"
+ENV_NVIDIA_KEY = "NVIDIA_API_KEY"
+ENV_OPENAI_KEY = "AI_IMG_CREATOR_OPENAI_KEY"  # falls back to OPENAI_API_KEY
+# Override avançado da base do provider 'openai' (deve terminar em /v1).
+ENV_OPENAI_BASE_URL = "AI_IMG_CREATOR_OPENAI_BASE_URL"
+# OmniRoute — gateway OpenAI-compatível auto-hospedado (--provider omniroute).
+# Só a key precisa ser configurada; a base default abaixo cobre a stack VPS
+# (alias interno do Swarm) e pode ser sobrescrita para uso fora dela.
+ENV_OMNIROUTE_KEY = "AI_IMG_CREATOR_OMNIROUTE_KEY"
+ENV_OMNIROUTE_BASE_URL = "AI_IMG_CREATOR_OMNIROUTE_BASE_URL"
+DEFAULT_OMNIROUTE_BASE_URL = "http://omniroute:20128/v1"
 
 def _load_dotenv() -> None:
     """Load .env files into os.environ (stdlib only, no pip deps).
@@ -156,18 +254,18 @@ def resolve_model(model_arg: str | None, provider: str) -> tuple[str, list[str]]
     """Resolve a model keyword or full ID to (model_id, modalities).
 
     Supports three modes:
-    1. No --model flag: returns the default model for the provider (gemini).
+    1. No --model flag: returns the default model for the provider.
     2. Keyword match (e.g. 'riverflow'): looks up MODEL_REGISTRY.
     3. Full model ID (e.g. 'sourceful/riverflow-v2-pro'): reverse-lookups
        registry for modalities, or defaults to ["image", "text"] if unknown.
 
     Args:
         model_arg: The --model CLI value (keyword, full model ID, or None).
-        provider: Either 'openrouter' or 'google'.
+        provider: 'openrouter', 'google', or 'nvidia'.
 
     Returns:
         Tuple of (model_id, modalities_list) where model_id is the full
-        OpenRouter model identifier and modalities_list is the correct
+        model identifier and modalities_list is the correct
         modalities array for the API request.
     """
     if model_arg is None:
@@ -175,6 +273,8 @@ def resolve_model(model_arg: str | None, provider: str) -> tuple[str, list[str]]
         if provider == "openrouter":
             entry = MODEL_REGISTRY.get("gemini", {})
             return model_id, entry.get("modalities", ["image", "text"])
+        if provider in ("nvidia", "openai"):
+            return model_id, ["image"]
         return model_id, ["image", "text"]
 
     # Check keyword match (case-insensitive)
@@ -203,7 +303,7 @@ def parse_args() -> argparse.Namespace:
         image_size, model, list_models, debug, and verbose attributes.
     """
     parser = argparse.ArgumentParser(
-        description="Generate PNG images using AI (multiple models via OpenRouter/Google AI Studio)"
+        description="Generate PNG images using AI (OpenRouter, Google AI Studio, or NVIDIA NIM)"
     )
     parser.add_argument(
         "-o", "--output", required=False, default=None, help="Output PNG file path (required unless --list-models)"
@@ -218,9 +318,9 @@ def parse_args() -> argparse.Namespace:
     )
     parser.add_argument(
         "--provider",
-        choices=["openrouter", "google"],
+        choices=["openrouter", "google", "nvidia", "openai", "omniroute"],
         default="openrouter",
-        help="API provider (default: openrouter)",
+        help="API provider (default: openrouter). Use 'nvidia' for NVIDIA NIM Flux models, 'openai' for GPT Image via Images API, 'omniroute' for the self-hosted OmniRoute gateway.",
     )
     parser.add_argument(
         "-a", "--aspect-ratio",
@@ -235,7 +335,7 @@ def parse_args() -> argparse.Namespace:
     parser.add_argument(
         "-m", "--model",
         default=None,
-        help="Model keyword (gemini, riverflow, flux2, seedream, gpt5) or full model ID",
+        help="Model keyword (gemini, riverflow, flux2, seedream, gpt5, nvidia-flux2-klein-4b, nvidia-flux-dev, nvidia-flux-schnell) or full model ID",
     )
     parser.add_argument(
         "-r", "--ref",
@@ -264,6 +364,37 @@ def parse_args() -> argparse.Namespace:
         action="store_true",
         help="List available model keywords and exit",
     )
+    # NVIDIA NIM specific parameters
+    parser.add_argument(
+        "--width",
+        type=int,
+        default=None,
+        help="Image width for NVIDIA Flux models (768-1344, default: 1024)",
+    )
+    parser.add_argument(
+        "--height",
+        type=int,
+        default=None,
+        help="Image height for NVIDIA Flux models (768-1344, default: 1024)",
+    )
+    parser.add_argument(
+        "--cfg-scale",
+        type=float,
+        default=None,
+        help="Classifier-free guidance scale (default: 5 for flux-dev, 0 for others)",
+    )
+    parser.add_argument(
+        "--steps",
+        type=int,
+        default=None,
+        help="Number of diffusion steps (default: 30 for flux-dev, 4 for schnell/flux2)",
+    )
+    parser.add_argument(
+        "--seed",
+        type=int,
+        default=None,
+        help="Random seed (0 for random, default: 0)",
+    )
     parser.add_argument(
         "--debug",
         action="store_true",
@@ -364,9 +495,31 @@ def detect_mode(provider: str) -> tuple[str, dict[str, str]]:
     if provider == "openrouter":
         direct_key = os.environ.get(ENV_OPENROUTER_KEY, "").strip()
         log.debug(f"Env check: {ENV_OPENROUTER_KEY}={'set (' + mask_key(direct_key) + ')' if direct_key else 'MISSING'}")
-    else:
+    elif provider == "google":
         direct_key = os.environ.get(ENV_GEMINI_KEY, "").strip()
         log.debug(f"Env check: {ENV_GEMINI_KEY}={'set (' + mask_key(direct_key) + ')' if direct_key else 'MISSING'}")
+    elif provider == "nvidia":
+        direct_key = os.environ.get(ENV_NVIDIA_KEY, "").strip()
+        log.debug(f"Env check: {ENV_NVIDIA_KEY}={'set (' + mask_key(direct_key) + ')' if direct_key else 'MISSING'}")
+    elif provider == "openai":
+        direct_key = (
+            os.environ.get(ENV_OPENAI_KEY, "").strip()
+            or os.environ.get("OPENAI_API_KEY", "").strip()
+        )
+        log.debug(f"Env check: {ENV_OPENAI_KEY}/OPENAI_API_KEY={'set (' + mask_key(direct_key) + ')' if direct_key else 'MISSING'}")
+    else:
+        log.debug(f"Unknown provider: {provider}")
+        direct_key = ""
+
+    # NVIDIA NIM and OpenAI Images always use direct mode (no gateway)
+    if provider in ("nvidia", "openai") and direct_key:
+        log.info(f"Mode: direct ({provider} always uses direct API)")
+        return "direct", {"direct_key": direct_key}
+
+    # The gateway path is OpenRouter/Google-shaped — never route openai
+    # (Images API) through it.
+    if provider == "openai":
+        has_gateway = False
 
     if has_gateway:
         log.info(f"Mode: gateway (account={cf_account}, gateway={cf_gateway})")
@@ -391,9 +544,16 @@ def detect_mode(provider: str) -> tuple[str, dict[str, str]]:
         if provider == "openrouter":
             print("For direct OpenRouter access, set:", file=sys.stderr)
             print(f"  export {ENV_OPENROUTER_KEY}=sk-or-...", file=sys.stderr)
-        else:
+        elif provider == "google":
             print("For direct Google AI Studio access, set:", file=sys.stderr)
             print(f"  export {ENV_GEMINI_KEY}=AI...", file=sys.stderr)
+        elif provider == "nvidia":
+            print("For NVIDIA NIM access, set:", file=sys.stderr)
+            print(f"  export {ENV_NVIDIA_KEY}=your-nvidia-api-key", file=sys.stderr)
+        elif provider == "openai":
+            print("For OpenAI Images API access, set a PLATFORM key (billing on", file=sys.stderr)
+            print("platform.openai.com — ChatGPT Plus/Codex OAuth cannot generate images):", file=sys.stderr)
+            print(f"  export {ENV_OPENAI_KEY}=sk-...  (or OPENAI_API_KEY)", file=sys.stderr)
         print("", file=sys.stderr)
         print(
             "See references/setup-guide.md for full setup instructions.",
@@ -434,8 +594,15 @@ def build_direct_url(provider: str, model: str) -> str:
     """
     if provider == "openrouter":
         url = "https://openrouter.ai/api/v1/chat/completions"
-    else:
+    elif provider == "google":
         url = f"https://generativelanguage.googleapis.com/v1beta/models/{model}:generateContent"
+    elif provider == "nvidia":
+        url = build_nvidia_url(model)
+    elif provider == "openai":
+        base = os.environ.get(ENV_OPENAI_BASE_URL, "").strip().rstrip("/") or "https://api.openai.com/v1"
+        url = f"{base}/images/generations"
+    else:
+        raise RuntimeError(f"Unknown provider for URL: {provider}")
     log.debug(f"Built direct URL: {url}")
     return url
 
@@ -456,7 +623,13 @@ def build_headers(provider: str, mode: str, config: dict[str, str]) -> dict[str,
         "User-Agent": "ai-image-creator/1.0",
     }
 
-    if mode == "gateway":
+    if provider == "nvidia":
+        headers = build_nvidia_headers(config["direct_key"])
+        # Skip all other header logic for NVIDIA
+        safe_headers = {k: (f"{v[:12]}...{mask_key(v)}" if k.lower() in ("authorization", "cf-aig-authorization", "x-goog-api-key") else v) for k, v in headers.items()}
+        log.debug(f"Request headers: {json.dumps(safe_headers, indent=2)}")
+        return headers
+    elif mode == "gateway":
         headers["cf-aig-authorization"] = f"Bearer {config['cf_token']}"
         if provider == "google":
             headers["cf-aig-byok-alias"] = "aistudio"
@@ -465,8 +638,10 @@ def build_headers(provider: str, mode: str, config: dict[str, str]) -> dict[str,
     else:
         if provider == "openrouter":
             headers["Authorization"] = f"Bearer {config['direct_key']}"
-        else:
+        elif provider == "google":
             headers["x-goog-api-key"] = config["direct_key"]
+        elif provider == "openai":
+            headers["Authorization"] = f"Bearer {config['direct_key']}"
 
     # Log headers with masked sensitive values
     safe_headers = {}
@@ -539,6 +714,15 @@ def build_request_body(
         if image_config:
             body["image_config"] = image_config
             log.debug(f"Image config: {json.dumps(image_config)}")
+    elif provider == "openai":
+        # OpenAI Images API — flat prompt, size from the aspect-ratio map.
+        body = {"model": model, "prompt": prompt}
+        if aspect_ratio:
+            size = OPENAI_SIZE_MAP.get(aspect_ratio)
+            if size:
+                body["size"] = size
+            else:
+                log.warning(f"Aspect ratio {aspect_ratio} not mapped for OpenAI; using model default")
     else:
         # Google AI Studio
         parts: list[dict[str, Any]] = [{"text": prompt}]
@@ -733,6 +917,56 @@ def extract_image_google(response: dict) -> tuple[bytes, str]:
     return image_bytes, text_content
 
 
+def extract_image_nvidia(response: dict) -> tuple[bytes, str]:
+    """Extract base64 image data from NVIDIA NIM response.
+
+    Args:
+        response: Parsed JSON response from NVIDIA NIM API.
+
+    Returns:
+        Tuple of (image_bytes, text_content) where image_bytes is the decoded
+        PNG data and text_content is empty (NVIDIA returns only images).
+
+    Raises:
+        RuntimeError: If no artifacts found in response.
+    """
+    artifacts = response.get("artifacts", [])
+    if not artifacts:
+        raise RuntimeError(f"No artifacts in NVIDIA response: {json.dumps(response)[:500]}")
+    b64_data = artifacts[0]["base64"]
+    image_bytes = base64.b64decode(b64_data)
+    log.info(f"Decoded image: {len(image_bytes)} bytes ({len(b64_data)} base64 chars)")
+    return image_bytes, ""
+
+
+def extract_image_openai(response: dict) -> tuple[bytes, str]:
+    """Extract base64 image data from an OpenAI Images API response.
+
+    Args:
+        response: Parsed JSON response from api.openai.com/v1/images/generations.
+
+    Returns:
+        Tuple of (image_bytes, text_content) where text_content is empty
+        (the Images API returns only images).
+
+    Raises:
+        RuntimeError: If the response carries an error or no image data.
+    """
+    error = response.get("error")
+    if error:
+        msg = error.get("message", str(error)) if isinstance(error, dict) else str(error)
+        raise RuntimeError(f"OpenAI API error: {msg}")
+    data = response.get("data", [])
+    if not data:
+        raise RuntimeError(f"No data in OpenAI response: {json.dumps(response)[:500]}")
+    b64_data = data[0].get("b64_json", "")
+    if not b64_data:
+        raise RuntimeError(f"No b64_json in OpenAI response item: {json.dumps(data[0])[:300]}")
+    image_bytes = base64.b64decode(b64_data)
+    log.info(f"Decoded image: {len(image_bytes)} bytes ({len(b64_data)} base64 chars)")
+    return image_bytes, ""
+
+
 def extract_text_openrouter(response: dict) -> str:
     """Extract text-only content from OpenRouter response (analyze mode).
 
@@ -795,6 +1029,79 @@ def extract_text_google(response: dict) -> str:
     return text_content
 
 
+def build_nvidia_url(model_id: str) -> str:
+    """Build the NVIDIA NIM image generation endpoint URL.
+
+    The NVIDIA AI Foundation endpoint format is:
+        https://ai.api.nvidia.com/v1/genai/{model_id}
+
+    Note: The model_id uses '.' not '-' in the version suffix
+          (e.g. 'black-forest-labs/flux.2-klein-4b').
+
+    Args:
+        model_id: Full model ID (e.g. 'black-forest-labs/flux.2-klein-4b').
+
+    Returns:
+        Full URL for the NVIDIA AI Foundation endpoint.
+    """
+    # Registry IDs already use the canonical dotted form (flux.1-dev,
+    # flux.2-klein-4b) — pass through verbatim. Rewriting suffixes here
+    # breaks valid IDs (flux.1-dev would become flux.1.dev → 404).
+    return f"https://ai.api.nvidia.com/v1/genai/{model_id}"
+
+
+def build_nvidia_headers(api_key: str) -> dict[str, str]:
+    """Build HTTP headers for NVIDIA NIM API.
+
+    Args:
+        api_key: NVIDIA API key.
+
+    Returns:
+        Dict of HTTP header name-value pairs.
+    """
+    return {
+        "Content-Type": "application/json",
+        "Authorization": f"Bearer {api_key}",
+        "Accept": "application/json",
+    }
+
+
+def build_nvidia_request_body(
+    model_id: str,
+    prompt: str,
+    width: int,
+    height: int,
+    cfg_scale: float = 1,
+    steps: int = 4,
+    seed: int = 0,
+    samples: int = 1,
+) -> dict[str, Any]:
+    """Build JSON request body for NVIDIA NIM Flux models.
+
+    Args:
+        model_id: Full model ID.
+        prompt: The image generation prompt text.
+        width: Image width (768-1344).
+        height: Image height (768-1344).
+        cfg_scale: Classifier-free guidance scale (default: 1, min: 1).
+        steps: Number of diffusion steps.
+        seed: Random seed (0 for random).
+        samples: Number of images to generate (always 1).
+
+    Returns:
+        Dict suitable for JSON serialization as request body.
+    """
+    return {
+        "prompt": prompt,
+        "width": width,
+        "height": height,
+        "cfg_scale": cfg_scale,
+        "steps": steps,
+        "seed": seed,
+        "samples": samples,
+    }
+
+
 def find_imagemagick() -> str | None:
     """Find ImageMagick binary (magick for v7, convert for v6).
 
@@ -948,6 +1255,15 @@ def log_cost_entry(
                 "completion_tokens": usage.get("completion_tokens", 0),
                 "total_tokens": usage.get("total_tokens", 0),
             }
+    elif provider == "openai":
+        # Images API usage format: input_tokens / output_tokens / total_tokens
+        usage = response.get("usage", {})
+        if usage:
+            token_usage = {
+                "prompt_tokens": usage.get("input_tokens", 0),
+                "completion_tokens": usage.get("output_tokens", 0),
+                "total_tokens": usage.get("total_tokens", 0),
+            }
     else:
         # Google AI Studio format
         usage = response.get("usageMetadata", {})
@@ -1110,11 +1426,43 @@ def main() -> None:
             file=sys.stderr,
         )
 
+    # Auto-detect provider from the model keyword / id (registry entries with
+    # an explicit "provider" field, e.g. nvidia-flux2-klein-4b -> nvidia,
+    # image2 -> openai).
+    provider = args.provider
+    if args.model:
+        _kw = args.model.lower().strip()
+        _entry = MODEL_REGISTRY.get(_kw) or next(
+            (e for e in MODEL_REGISTRY.values() if e.get("id") == args.model), None
+        )
+        if _entry and _entry.get("provider"):
+            provider = _entry["provider"]
+            log.debug(f"Auto-detected provider '{provider}' from model '{args.model}'")
+
+    # OmniRoute é o flavor 'openai' apontado para o gateway auto-hospedado:
+    # injeta base URL + key nas envs que o caminho openai já lê e todas as
+    # ramificações (URL, headers, payload, extract) seguem valendo. Um
+    # keyword nvidia-* ainda vence e sai do gateway (condição abaixo).
+    if args.provider == "omniroute" and provider in ("omniroute", "openai"):
+        omni_key = os.environ.get(ENV_OMNIROUTE_KEY, "").strip()
+        if not omni_key:
+            print(
+                f"ERROR: {ENV_OMNIROUTE_KEY} not set — configure a key do OmniRoute "
+                "no card AI Image Creator (Integrações) ou no .env.",
+                file=sys.stderr,
+            )
+            sys.exit(1)
+        omni_base = os.environ.get(ENV_OMNIROUTE_BASE_URL, "").strip() or DEFAULT_OMNIROUTE_BASE_URL
+        os.environ[ENV_OPENAI_BASE_URL] = omni_base
+        os.environ[ENV_OPENAI_KEY] = omni_key
+        provider = "openai"
+        log.info(f"OmniRoute mode: Images API via {omni_base}")
+
     # Resolve model and modalities
-    model, modalities = resolve_model(args.model, args.provider)
+    model, modalities = resolve_model(args.model, provider)
 
     # Google direct API needs model ID without the OpenRouter "google/" prefix
-    if args.provider == "google" and model.startswith("google/"):
+    if provider == "google" and model.startswith("google/"):
         model = model[len("google/"):]
         log.debug(f"Stripped google/ prefix for direct API: {model}")
 
@@ -1177,7 +1525,7 @@ def main() -> None:
         modalities = ["text"]
         print("Mode: analyze (text-only output)", file=sys.stderr)
 
-    print(f"Provider: {args.provider}", file=sys.stderr)
+    print(f"Provider: {provider}", file=sys.stderr)
     print(f"Model: {model}", file=sys.stderr)
     print(f"Modalities: {', '.join(modalities)}", file=sys.stderr)
     print(f"Prompt: {prompt[:100]}{'...' if len(prompt) > 100 else ''}", file=sys.stderr)
@@ -1187,21 +1535,58 @@ def main() -> None:
         print(f"Image size: {args.image_size}", file=sys.stderr)
 
     # Detect mode
-    mode, config = detect_mode(args.provider)
+    mode, config = detect_mode(provider)
     print(f"Mode: {mode}", file=sys.stderr)
 
     # Build request
     if mode == "gateway":
-        url = build_gateway_url(args.provider, model, config)
+        url = build_gateway_url(provider, model, config)
     else:
-        url = build_direct_url(args.provider, model)
-
-    headers = build_headers(args.provider, mode, config)
-    body = build_request_body(
-        args.provider, model, prompt, args.aspect_ratio, args.image_size,
-        modalities=modalities,
-        ref_images=ref_images if ref_images else None,
-    )
+        url = build_direct_url(provider, model)
+
+    headers = build_headers(provider, mode, config)
+
+    # NVIDIA uses a different request body format (flat prompt, not contents/parts)
+    if provider == "nvidia":
+        # Per-model defaults from the registry — flux.1-dev needs ~30 steps /
+        # cfg 5, while schnell and flux.2-klein are distilled 4-step models.
+        registry_entry = next(
+            (e for e in MODEL_REGISTRY.values()
+             if e.get("id") == model and e.get("provider") == "nvidia"),
+            {},
+        )
+        nv_defaults = {
+            k: v.get("default")
+            for k, v in (registry_entry.get("nvidia_params") or {}).items()
+            if isinstance(v, dict) and "default" in v
+        }
+        width = args.width or nv_defaults.get("width") or 1024
+        height = args.height or nv_defaults.get("height") or 1024
+        # -a/--aspect-ratio maps to the closest dimensions NVIDIA accepts
+        if args.aspect_ratio and not (args.width or args.height):
+            dims = NVIDIA_ASPECT_MAP.get(args.aspect_ratio)
+            if dims:
+                width, height = dims
+            else:
+                print(
+                    f"WARNING: aspect ratio {args.aspect_ratio} not mapped for NVIDIA; "
+                    f"using {width}x{height}",
+                    file=sys.stderr,
+                )
+        body = build_nvidia_request_body(
+            model, prompt,
+            width=width,
+            height=height,
+            cfg_scale=args.cfg_scale if args.cfg_scale is not None else nv_defaults.get("cfg_scale", 1),
+            steps=args.steps if args.steps is not None else nv_defaults.get("steps", 4),
+            seed=args.seed if args.seed is not None else 0,
+        )
+    else:
+        body = build_request_body(
+            provider, model, prompt, args.aspect_ratio, args.image_size,
+            modalities=modalities,
+            ref_images=ref_images if ref_images else None,
+        )
 
     print(f"URL: {url}", file=sys.stderr)
     if args.analyze:
@@ -1221,8 +1606,8 @@ def main() -> None:
                 file=sys.stderr,
             )
             log.info("Initiating fallback to direct API")
-            url = build_direct_url(args.provider, model)
-            headers = build_headers(args.provider, "direct", config)
+            url = build_direct_url(provider, model)
+            headers = build_headers(provider, "direct", config)
             try:
                 response = make_request(url, headers, body)
             except RuntimeError as e2:
@@ -1238,8 +1623,10 @@ def main() -> None:
     if args.analyze:
         total_elapsed = time.time() - total_start
         try:
-            if args.provider == "openrouter":
+            if provider == "openrouter":
                 analysis_text = extract_text_openrouter(response)
+            elif provider in ("nvidia", "openai"):
+                raise RuntimeError(f"Analyze mode not supported for {provider} provider")
             else:
                 analysis_text = extract_text_google(response)
         except RuntimeError as e:
@@ -1254,7 +1641,7 @@ def main() -> None:
         try:
             log_cost_entry(
                 response=response,
-                provider=args.provider,
+                provider=provider,
                 model=model,
                 mode=mode,
                 aspect_ratio=None,
@@ -1271,7 +1658,7 @@ def main() -> None:
             "ok": True,
             "analyze": True,
             "analysis": analysis_text,
-            "provider": args.provider,
+            "provider": provider,
             "model": model,
             "mode": mode,
             "elapsed_seconds": round(total_elapsed, 1),
@@ -1285,8 +1672,12 @@ def main() -> None:
 
     # Extract image
     try:
-        if args.provider == "openrouter":
+        if provider == "openrouter":
             image_bytes, text_content = extract_image_openrouter(response)
+        elif provider == "nvidia":
+            image_bytes, text_content = extract_image_nvidia(response)
+        elif provider == "openai":
+            image_bytes, text_content = extract_image_openai(response)
         else:
             image_bytes, text_content = extract_image_google(response)
     except RuntimeError as e:
@@ -1294,6 +1685,49 @@ def main() -> None:
         log.debug(f"Image extraction failed. Raw response keys: {list(response.keys()) if response else 'None'}")
         sys.exit(1)
 
+    # NVIDIA NIM returns JPEG bytes — convert when the user asked for .png
+    if (
+        provider == "nvidia"
+        and output_path is not None
+        and output_path.suffix.lower() == ".png"
+        and image_bytes[:2] == b"\xff\xd8"
+    ):
+        magick_cmd = find_imagemagick()
+        ffmpeg_cmd = shutil.which("ffmpeg")
+        if magick_cmd or ffmpeg_cmd:
+            # Temp files live next to the output — snap-confined ffmpeg
+            # cannot read the system /tmp directory.
+            output_path.parent.mkdir(parents=True, exist_ok=True)
+            with tempfile.NamedTemporaryFile(suffix=".jpg", delete=False, dir=output_path.parent) as tj:
+                jpg_tmp = Path(tj.name)
+            with tempfile.NamedTemporaryFile(suffix=".png", delete=False, dir=output_path.parent) as tp:
+                png_tmp = Path(tp.name)
+            try:
+                jpg_tmp.write_bytes(image_bytes)
+                if magick_cmd:
+                    cmd = [magick_cmd, str(jpg_tmp), str(png_tmp)]
+                else:
+                    cmd = ["ffmpeg", "-y", "-i", str(jpg_tmp), str(png_tmp)]
+                conv = subprocess.run(cmd, capture_output=True, text=True, timeout=60)
+                if conv.returncode == 0 and png_tmp.stat().st_size > 0:
+                    image_bytes = png_tmp.read_bytes()
+                    log.info("Converted NVIDIA JPEG output to PNG")
+                else:
+                    print(
+                        "WARNING: JPEG->PNG conversion failed - saving original JPEG "
+                        "bytes under the .png name",
+                        file=sys.stderr,
+                    )
+            finally:
+                jpg_tmp.unlink(missing_ok=True)
+                png_tmp.unlink(missing_ok=True)
+        else:
+            print(
+                "WARNING: NVIDIA returned JPEG and no converter (imagemagick/ffmpeg) "
+                "is installed - saving JPEG bytes under the .png name",
+                file=sys.stderr,
+            )
+
     # Write output (or process transparent mode)
     assert output_path is not None  # guaranteed by validation above
     output_path.parent.mkdir(parents=True, exist_ok=True)
@@ -1319,7 +1753,7 @@ def main() -> None:
     try:
         prompt_meta = f"# Prompt\n\n"
         prompt_meta += f"- **Model:** {model}\n"
-        prompt_meta += f"- **Provider:** {args.provider} ({mode})\n"
+        prompt_meta += f"- **Provider:** {provider} ({mode})\n"
         if args.aspect_ratio:
             prompt_meta += f"- **Aspect ratio:** {args.aspect_ratio}\n"
         if args.image_size:
@@ -1350,7 +1784,7 @@ def main() -> None:
     try:
         log_cost_entry(
             response=response,
-            provider=args.provider,
+            provider=provider,
             model=model,
             mode=mode,
             aspect_ratio=args.aspect_ratio,
@@ -1367,7 +1801,7 @@ def main() -> None:
         "ok": True,
         "output": str(output_path),
         "size_bytes": len(image_bytes),
-        "provider": args.provider,
+        "provider": provider,
         "model": model,
         "mode": mode,
         "elapsed_seconds": round(total_elapsed, 1),
diff --git a/.claude/skills/create-goal/SKILL.md b/.claude/skills/create-goal/SKILL.md
index 889273207..95610d17e 100644
--- a/.claude/skills/create-goal/SKILL.md
+++ b/.claude/skills/create-goal/SKILL.md
@@ -48,25 +48,57 @@ For a Project:
 For a Mission:
 - **Slug, title, description, target_metric, target_value, due_date, status** — same pattern
 
-## Step 3: Call the API
+## Step 3: Write to Nexus
 
-Use `from dashboard.backend.sdk_client import evo` — auto-handles URL + auth.
+Use the helper script. Goal creation calls `POST /api/goals` with
+`DASHBOARD_API_TOKEN`, so top-level Goals trigger `goal-planner`. Browser auth
+and cookies are not required. The dashboard API must be running and the token
+must be available in the environment or workspace `.env`.
 
-```python
-from dashboard.backend.sdk_client import evo
+List the current hierarchy first:
 
-# Goal:
-goal = evo.post("/api/goals", {
-    "slug": "evo-ai-100-customers",
-    "project_id": project_id,
-    "title": "100 paying customers by Jun 30",
-    "metric_type": "count",
-    "target_metric": "paying customers",
-    "target_value": 100,
-    "due_date": "2026-06-30",
-})
+```bash
+python3 .claude/skills/create-goal/scripts/nexus_goal.py list
+```
+
+Create a goal:
+
+```bash
+python3 .claude/skills/create-goal/scripts/nexus_goal.py create-goal \
+  --title "100 paying customers by Jun 30" \
+  --slug evo-ai-100-customers \
+  --project-slug evo-ai \
+  --project-title "Evo AI" \
+  --metric-type count \
+  --target-metric "paying customers" \
+  --target-value 100 \
+  --due-date 2026-06-30
+```
+
+Create a mission or project explicitly when needed:
+
+```bash
+python3 .claude/skills/create-goal/scripts/nexus_goal.py create-mission \
+  --title "Evolution MRR Q4 2026" \
+  --slug evolution-mrr-q4-2026 \
+  --target-metric "MRR" \
+  --target-value 1000000 \
+  --due-date 2026-12-31
+
+python3 .claude/skills/create-goal/scripts/nexus_goal.py create-project \
+  --title "Evo AI" \
+  --slug evo-ai \
+  --mission-slug evolution-mrr-q4-2026
+```
+
+Create starter tasks:
 
-# Same shape for /api/projects and /api/missions.
+```bash
+python3 .claude/skills/create-goal/scripts/nexus_goal.py create-task \
+  --goal-slug evo-ai-100-customers \
+  --title "Launch annual billing plan" \
+  --assignee-agent mako-marketing \
+  --priority 2
 ```
 
 Response includes `id` and `slug`.
@@ -87,7 +119,7 @@ Return the slug and show how to attach it to a routine, heartbeat, or ticket:
   ...
 
 # ticket
-evo.post("/api/tickets", {"title": "...", "goal_id": goal["id"]})
+Create or edit the ticket with goal_id=<numeric goal id>.
 ```
 
 When linked, the agent running the work receives Mission → Project → Goal chain automatically in its prompt.
diff --git a/.claude/skills/create-goal/scripts/nexus_goal.py b/.claude/skills/create-goal/scripts/nexus_goal.py
new file mode 100644
index 000000000..5518af15d
--- /dev/null
+++ b/.claude/skills/create-goal/scripts/nexus_goal.py
@@ -0,0 +1,332 @@
+#!/usr/bin/env python3
+"""EvoNexus Mission → Project → Goal → Task helper.
+
+Goal creation deliberately goes through POST /api/goals so the dashboard can
+emit the goal_created trigger for goal-planner. The remaining hierarchy helpers
+stay DB-local for backwards compatibility with the skill's existing workflow.
+"""
+
+from __future__ import annotations
+
+import argparse
+import json
+import os
+import re
+import sqlite3
+import urllib.error
+import urllib.request
+from datetime import datetime, timezone
+from pathlib import Path
+from typing import Any
+
+
+VALID_METRIC_TYPES = {"count", "currency", "percentage", "percent", "boolean", "tasks"}
+
+
+def workspace_root() -> Path:
+    here = Path(__file__).resolve()
+    for parent in here.parents:
+        if (parent / "dashboard" / "data" / "evonexus.db").exists():
+            return parent
+    raise SystemExit("Could not find dashboard/data/evonexus.db from script path")
+
+
+def db_path() -> Path:
+    return workspace_root() / "dashboard" / "data" / "evonexus.db"
+
+
+def now() -> str:
+    return datetime.now(timezone.utc).strftime("%Y-%m-%dT%H:%M:%S.%fZ")
+
+
+def slugify(value: str) -> str:
+    value = value.lower().strip()
+    value = re.sub(r"[^a-z0-9]+", "-", value)
+    value = re.sub(r"-+", "-", value).strip("-")
+    return value or "goal"
+
+
+def row_to_dict(row: sqlite3.Row | None) -> dict[str, Any] | None:
+    return dict(row) if row is not None else None
+
+
+def connect() -> sqlite3.Connection:
+    conn = sqlite3.connect(db_path())
+    conn.row_factory = sqlite3.Row
+    conn.execute("PRAGMA foreign_keys=ON")
+    return conn
+
+
+def _load_workspace_env() -> None:
+    env_path = workspace_root() / ".env"
+    if not env_path.exists():
+        return
+    for raw_line in env_path.read_text(encoding="utf-8").splitlines():
+        line = raw_line.strip()
+        if not line or line.startswith("#") or "=" not in line:
+            continue
+        key, value = line.split("=", 1)
+        os.environ.setdefault(key.strip(), value.strip().strip('"').strip("'"))
+
+
+def api_post(path: str, payload: dict[str, Any]) -> dict[str, Any]:
+    _load_workspace_env()
+    base_url = os.environ.get("EVONEXUS_API_URL", "").strip()
+    if not base_url:
+        port = os.environ.get("FLASK_PORT", "8080").strip() or "8080"
+        base_url = f"http://localhost:{port}"
+    token = os.environ.get("DASHBOARD_API_TOKEN", "").strip()
+    if not token:
+        raise SystemExit(
+            "DASHBOARD_API_TOKEN is required to create goals through POST /api/goals"
+        )
+
+    request = urllib.request.Request(
+        f"{base_url.rstrip('/')}/{path.lstrip('/')}",
+        data=json.dumps(payload).encode("utf-8"),
+        headers={
+            "Authorization": f"Bearer {token}",
+            "Content-Type": "application/json",
+        },
+        method="POST",
+    )
+    try:
+        with urllib.request.urlopen(request, timeout=30) as response:
+            return json.loads(response.read().decode("utf-8"))
+    except urllib.error.HTTPError as exc:
+        detail = exc.read().decode("utf-8", errors="replace")
+        raise SystemExit(f"EvoNexus API returned HTTP {exc.code}: {detail}") from exc
+    except urllib.error.URLError as exc:
+        raise SystemExit(f"Could not reach EvoNexus API at {base_url}: {exc.reason}") from exc
+
+
+def create_mission(conn: sqlite3.Connection, args: argparse.Namespace) -> dict[str, Any]:
+    slug = args.slug or slugify(args.title)
+    existing = conn.execute("SELECT * FROM missions WHERE slug=?", (slug,)).fetchone()
+    if existing:
+        return row_to_dict(existing) | {"created": False}
+    ts = now()
+    conn.execute(
+        """INSERT INTO missions
+           (slug, title, description, target_metric, target_value, current_value, due_date, status, created_at, updated_at)
+           VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?)""",
+        (
+            slug,
+            args.title,
+            args.description,
+            args.target_metric,
+            args.target_value,
+            args.current_value,
+            args.due_date,
+            args.status,
+            ts,
+            ts,
+        ),
+    )
+    conn.commit()
+    row = conn.execute("SELECT * FROM missions WHERE slug=?", (slug,)).fetchone()
+    return row_to_dict(row) | {"created": True}
+
+
+def ensure_project(
+    conn: sqlite3.Connection,
+    *,
+    slug: str,
+    title: str | None = None,
+    description: str | None = None,
+    mission_slug: str | None = None,
+    workspace_folder_path: str | None = None,
+) -> dict[str, Any]:
+    existing = conn.execute("SELECT * FROM projects WHERE slug=?", (slug,)).fetchone()
+    if existing:
+        return row_to_dict(existing) | {"created": False}
+
+    mission_id = None
+    if mission_slug:
+        mission = conn.execute("SELECT id FROM missions WHERE slug=?", (mission_slug,)).fetchone()
+        if mission is None:
+            raise SystemExit(f"Mission not found: {mission_slug}")
+        mission_id = mission["id"]
+
+    ts = now()
+    conn.execute(
+        """INSERT INTO projects
+           (slug, mission_id, title, description, workspace_folder_path, status, created_at, updated_at)
+           VALUES (?, ?, ?, ?, ?, 'active', ?, ?)""",
+        (
+            slug,
+            mission_id,
+            title or slug.replace("-", " ").title(),
+            description,
+            workspace_folder_path,
+            ts,
+            ts,
+        ),
+    )
+    conn.commit()
+    row = conn.execute("SELECT * FROM projects WHERE slug=?", (slug,)).fetchone()
+    return row_to_dict(row) | {"created": True}
+
+
+def create_project(conn: sqlite3.Connection, args: argparse.Namespace) -> dict[str, Any]:
+    slug = args.slug or slugify(args.title)
+    return ensure_project(
+        conn,
+        slug=slug,
+        title=args.title,
+        description=args.description,
+        mission_slug=args.mission_slug,
+        workspace_folder_path=args.workspace_folder_path,
+    )
+
+
+def create_goal(conn: sqlite3.Connection, args: argparse.Namespace) -> dict[str, Any]:
+    metric_type = args.metric_type
+    if metric_type == "percent":
+        metric_type = "percentage"
+    if metric_type not in VALID_METRIC_TYPES:
+        raise SystemExit(f"Invalid metric_type: {args.metric_type}")
+
+    slug = args.slug or slugify(args.title)
+    existing = conn.execute("SELECT * FROM goals WHERE slug=?", (slug,)).fetchone()
+    if existing:
+        return row_to_dict(existing) | {"created": False}
+
+    project_slug = args.project_slug or "global"
+    project = ensure_project(
+        conn,
+        slug=project_slug,
+        title=args.project_title or ("Global" if project_slug == "global" else None),
+        mission_slug=args.mission_slug,
+    )
+
+    target_value = args.target_value
+    if metric_type == "boolean":
+        target_value = 1.0 if target_value is None else target_value
+    elif target_value is None:
+        raise SystemExit("--target-value is required unless metric_type=boolean")
+
+    goal = api_post(
+        "/api/goals",
+        {
+            "slug": slug,
+            "project_id": project["id"],
+            "title": args.title,
+            "description": args.description,
+            "target_metric": args.target_metric,
+            "metric_type": metric_type,
+            "target_value": target_value,
+            "current_value": args.current_value,
+            "due_date": args.due_date,
+            "status": args.status,
+        },
+    )
+    return goal | {"created": True, "project": project}
+
+
+def create_task(conn: sqlite3.Connection, args: argparse.Namespace) -> dict[str, Any]:
+    goal_id = None
+    if args.goal_slug:
+        goal = conn.execute("SELECT id FROM goals WHERE slug=?", (args.goal_slug,)).fetchone()
+        if goal is None:
+            raise SystemExit(f"Goal not found: {args.goal_slug}")
+        goal_id = goal["id"]
+
+    ts = now()
+    conn.execute(
+        """INSERT INTO goal_tasks
+           (goal_id, title, description, priority, assignee_agent, status, due_date, created_at, updated_at)
+           VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?)""",
+        (
+            goal_id,
+            args.title,
+            args.description,
+            args.priority,
+            args.assignee_agent,
+            args.status,
+            args.due_date,
+            ts,
+            ts,
+        ),
+    )
+    conn.commit()
+    row = conn.execute("SELECT * FROM goal_tasks WHERE id=last_insert_rowid()").fetchone()
+    return row_to_dict(row) | {"created": True}
+
+
+def list_tree(conn: sqlite3.Connection, _args: argparse.Namespace) -> dict[str, Any]:
+    missions = [dict(r) for r in conn.execute("SELECT * FROM missions ORDER BY id")]
+    projects = [dict(r) for r in conn.execute("SELECT * FROM projects ORDER BY id")]
+    goals = [dict(r) for r in conn.execute("SELECT * FROM goals ORDER BY due_date IS NULL, due_date, id")]
+    tasks = [dict(r) for r in conn.execute("SELECT * FROM goal_tasks ORDER BY priority, id")]
+    return {"missions": missions, "projects": projects, "goals": goals, "goal_tasks": tasks}
+
+
+def parser() -> argparse.ArgumentParser:
+    p = argparse.ArgumentParser(description="Create/list EvoNexus missions, projects, goals, and goal tasks")
+    sub = p.add_subparsers(dest="command", required=True)
+
+    mission = sub.add_parser("create-mission")
+    mission.add_argument("--title", required=True)
+    mission.add_argument("--slug")
+    mission.add_argument("--description")
+    mission.add_argument("--target-metric")
+    mission.add_argument("--target-value", type=float)
+    mission.add_argument("--current-value", type=float, default=0.0)
+    mission.add_argument("--due-date")
+    mission.add_argument("--status", default="active")
+
+    project = sub.add_parser("create-project")
+    project.add_argument("--title", required=True)
+    project.add_argument("--slug")
+    project.add_argument("--description")
+    project.add_argument("--mission-slug")
+    project.add_argument("--workspace-folder-path")
+
+    goal = sub.add_parser("create-goal")
+    goal.add_argument("--title", required=True)
+    goal.add_argument("--slug")
+    goal.add_argument("--description")
+    goal.add_argument("--project-slug", default="global")
+    goal.add_argument("--project-title")
+    goal.add_argument("--mission-slug")
+    goal.add_argument("--metric-type", default="count")
+    goal.add_argument("--target-metric")
+    goal.add_argument("--target-value", type=float)
+    goal.add_argument("--current-value", type=float, default=0.0)
+    goal.add_argument("--due-date")
+    goal.add_argument("--status", default="active")
+
+    task = sub.add_parser("create-task")
+    task.add_argument("--title", required=True)
+    task.add_argument("--description")
+    task.add_argument("--goal-slug")
+    task.add_argument("--priority", type=int, default=3)
+    task.add_argument("--assignee-agent")
+    task.add_argument("--status", default="open")
+    task.add_argument("--due-date")
+
+    sub.add_parser("list")
+    return p
+
+
+def main() -> None:
+    args = parser().parse_args()
+    with connect() as conn:
+        if args.command == "create-mission":
+            result = create_mission(conn, args)
+        elif args.command == "create-project":
+            result = create_project(conn, args)
+        elif args.command == "create-goal":
+            result = create_goal(conn, args)
+        elif args.command == "create-task":
+            result = create_task(conn, args)
+        elif args.command == "list":
+            result = list_tree(conn, args)
+        else:
+            raise SystemExit(f"Unknown command: {args.command}")
+    print(json.dumps(result, ensure_ascii=False, indent=2))
+
+
+if __name__ == "__main__":
+    main()
diff --git a/.claude/skills/int-evohub/SKILL.md b/.claude/skills/int-evohub/SKILL.md
new file mode 100644
index 000000000..94af71f5f
--- /dev/null
+++ b/.claude/skills/int-evohub/SKILL.md
@@ -0,0 +1,129 @@
+---
+name: int-evohub
+description: "EvoHub API — Manage WhatsApp, Instagram, and Facebook channels via Evolution Hub proxy. Use when the user wants to connect/disconnect channels, check channel status, send messages via EvoHub, manage webhooks, or troubleshoot EvoHub integrations. Also trigger for 'evohub', 'hub evolution', 'instagram evohub', 'whatsapp evohub', 'conectar instagram', 'conectar whatsapp', 'status do canal'."
+---
+
+# EvoHub Integration
+
+Proxy/hub for Meta APIs (WhatsApp, Instagram, Facebook) via Evolution Foundation.
+
+## Configuration
+
+All requests use:
+- **Base URL:** `https://api.evohub.ai/api/v1`
+- **Auth Header:** `Authorization: Bearer ${EVO_HUB_API_TOKEN}`
+- **Token location:** `config/.env` → `EVO_HUB_API_TOKEN`
+
+## Available Tools
+
+### Bash Helper
+
+Use `bash` to make raw API calls. Always include auth header.
+
+```bash
+TOKEN=$(python3 -c "
+import re
+with open('.env') as f:
+    for l in f:
+        m = re.match(r'^EVO_HUB_API_TOKEN=(.*)', l.strip())
+        if m: print(m.group(1))
+")
+BASE="https://api.evohub.ai/api/v1"
+
+# Or simply:
+grep EVO_HUB_API_TOKEN .env | cut -d= -f2
+```
+
+## API Reference
+
+### User & Plan
+
+| Endpoint | Method | Description |
+|----------|--------|-------------|
+| `/auth/me` | GET | Current user info |
+| `/me/plan` | GET | Current plan details |
+| `/me/limits` | GET | Plan limits and quotas |
+| `/me/usage` | GET | Current usage stats |
+
+### Channels
+
+| Endpoint | Method | Description |
+|----------|--------|-------------|
+| `/channels` | GET | List all channels |
+| `/channels/{id}` | GET | Channel details |
+| `/channels/{id}` | DELETE | Remove a channel |
+
+### Channel Types
+
+Channels have `type` field:
+- `whatsapp` — WhatsApp via Evolution
+- `instagram` — Instagram via Meta Graph API
+- `facebook` — Facebook Pages via Meta Graph API
+
+Channel `status`: `active` | `inactive` | `pending`
+Channel `connection_mode`: `byo` (bring your own Meta app) | `proxy` (shared)
+
+### Instagram
+
+| Endpoint | Method | Description |
+|----------|--------|-------------|
+| `/instagram/authorization` | GET | Generate Instagram OAuth URL |
+| `/instagram/callback` | GET | OAuth callback — redirects after auth |
+| `/instagram/webhook` | POST/GET | Manage Instagram webhook subscriptions |
+
+### Facebook
+
+| Endpoint | Method | Description |
+|----------|--------|-------------|
+| `/facebook/channel` | POST | Create Facebook channel |
+| `/facebook/pages` | GET | List Facebook Pages |
+
+### Webhooks
+
+| Endpoint | Method | Description |
+|----------|--------|-------------|
+| `/webhooks` | GET | List all webhooks |
+| `/webhooks` | POST | Create webhook |
+| `/webhooks/{id}` | PUT | Update webhook |
+| `/webhooks/{id}` | DELETE | Delete webhook |
+| `/webhooks/event-types` | GET | Available event types |
+
+## Common Operations
+
+### List all channels
+
+```bash
+curl -s -H "Authorization: Bearer $TOKEN" \
+  "https://api.evohub.ai/api/v1/channels" | python3 -m json.tool
+```
+
+### Check user plan
+
+```bash
+curl -s -H "Authorization: Bearer $TOKEN" \
+  "https://api.evohub.ai/api/v1/me/plan" | python3 -m json.tool
+```
+
+### Generate Instagram auth URL
+
+```bash
+curl -s -H "Authorization: Bearer $TOKEN" \
+  "https://api.evohub.ai/api/v1/instagram/authorization" | python3 -m json.tool
+```
+
+### Disconnect a channel
+
+```bash
+curl -s -X DELETE -H "Authorization: Bearer $TOKEN" \
+  "https://api.evohub.ai/api/v1/channels/{channel_id}"
+```
+
+## Current State (as of setup)
+
+| Channel | Type | ID | Status |
+|---------|------|-----|--------|
+| Gringo | whatsapp | `9d8220a9-e68a-423d-88fc-aa4efd2a61de` | inactive |
+| sistemabritto | instagram | `541c6345-9269-41b4-9f39-25b2e775824c` | inactive |
+| Sistema Britto | whatsapp | `8a278e5d-bbfb-48f9-a2da-58231550bdc2` | inactive |
+
+**Plan:** Free — 1 BYO credential, 3 channels each (WhatsApp/FB/IG), no message limits.
diff --git a/.claude/skills/int-instagram/scripts/instagram_client.py b/.claude/skills/int-instagram/scripts/instagram_client.py
index b803a6fb2..d8a21e609 100644
--- a/.claude/skills/int-instagram/scripts/instagram_client.py
+++ b/.claude/skills/int-instagram/scripts/instagram_client.py
@@ -28,7 +28,25 @@ def _load_dotenv():
 
 _load_dotenv()
 
-BASE_URL = "https://graph.facebook.com/v25.0"
+# Two Meta products, two API hosts:
+#   - "Login do Facebook" tokens (EAA...) → graph.facebook.com, need a linked FB Page
+#   - "Instagram API com Login do Instagram" tokens (IGAA...) → graph.instagram.com, direct
+FB_BASE_URL = "https://graph.facebook.com/v25.0"
+IG_BASE_URL = "https://graph.instagram.com/v23.0"
+
+
+def _is_ig_login_token(token: str) -> bool:
+    """Instagram-Login tokens start with IGAA (vs Facebook EAA tokens)."""
+    return token.startswith("IG")
+
+
+def _base_for_token(token: str) -> str:
+    return IG_BASE_URL if _is_ig_login_token(token) else FB_BASE_URL
+
+
+def _node_id(account: dict, token: str) -> str:
+    """Path for the IG user node. IG-Login accepts 'me'; Facebook needs the IG id."""
+    return account.get("account_id", "") or ("me" if _is_ig_login_token(token) else "")
 
 
 # ── Account discovery ────────────────────────────────
@@ -71,11 +89,11 @@ def _token(account: dict) -> str:
 
 # ── API calls ────────────────────────────────────────
 
-def _api_get(path: str, params: dict = None) -> dict:
+def _api_get(path: str, params: dict = None, base: str = FB_BASE_URL) -> dict:
     """Make GET request to Graph API."""
     params = params or {}
     query = urllib.parse.urlencode(params)
-    url = f"{BASE_URL}/{path}"
+    url = f"{base}/{path}"
     if query:
         url += f"?{query}"
 
@@ -94,15 +112,16 @@ def _api_get(path: str, params: dict = None) -> dict:
 
 def profile(account: dict) -> dict:
     """Get Instagram profile — followers, media count, username."""
-    ig_id = account.get("account_id", "")
     token = _token(account)
+    base = _base_for_token(token)
+    ig_id = _node_id(account, token)
     if not ig_id or not token:
         return {"error": "No account_id or token configured"}
 
     data = _api_get(ig_id, {
         "fields": "username,name,biography,followers_count,follows_count,media_count,profile_picture_url,website",
         "access_token": token,
-    })
+    }, base=base)
 
     if "error" in data and "detail" not in data:
         return data
@@ -123,8 +142,9 @@ def profile(account: dict) -> dict:
 
 def recent_posts(account: dict, limit: int = 10) -> dict:
     """Get recent posts with engagement metrics."""
-    ig_id = account.get("account_id", "")
     token = _token(account)
+    base = _base_for_token(token)
+    ig_id = _node_id(account, token)
     if not ig_id or not token:
         return {"error": "No account_id or token configured"}
 
@@ -132,7 +152,7 @@ def recent_posts(account: dict, limit: int = 10) -> dict:
         "fields": "id,caption,media_type,media_url,thumbnail_url,permalink,timestamp,like_count,comments_count",
         "limit": limit,
         "access_token": token,
-    })
+    }, base=base)
 
     if "error" in data and "detail" not in data:
         return data
@@ -170,10 +190,12 @@ def recent_posts(account: dict, limit: int = 10) -> dict:
 def post_insights(account: dict, post_id: str) -> dict:
     """Get insights for a specific post."""
     token = _token(account)
+    base = _base_for_token(token)
+    metric = "reach,likes,comments,saved,shares" if _is_ig_login_token(token) else "impressions,reach,engagement"
     data = _api_get(f"{post_id}/insights", {
-        "metric": "impressions,reach,engagement",
+        "metric": metric,
         "access_token": token,
-    })
+    }, base=base)
 
     if "error" in data:
         return data
@@ -187,16 +209,17 @@ def post_insights(account: dict, post_id: str) -> dict:
 
 def account_insights(account: dict) -> dict:
     """Get account-level insights (last 30 days)."""
-    ig_id = account.get("account_id", "")
     token = _token(account)
+    base = _base_for_token(token)
+    ig_id = _node_id(account, token)
     if not ig_id or not token:
         return {"error": "No account_id or token configured"}
 
-    data = _api_get(f"{ig_id}/insights", {
-        "metric": "impressions,reach,profile_views",
-        "period": "day",
-        "access_token": token,
-    })
+    params = {"metric": "impressions,reach,profile_views", "period": "day", "access_token": token}
+    if _is_ig_login_token(token):
+        # IG-Login deprecated 'impressions'; reach is the reliable time-series metric
+        params["metric"] = "reach"
+    data = _api_get(f"{ig_id}/insights", params, base=base)
 
     if "error" in data:
         return data
diff --git a/.claude/skills/int-minio/SKILL.md b/.claude/skills/int-minio/SKILL.md
new file mode 100644
index 000000000..8ab929a3e
--- /dev/null
+++ b/.claude/skills/int-minio/SKILL.md
@@ -0,0 +1,69 @@
+---
+name: int-minio
+displayName: "MinIO / S3 Media"
+description: "Upload media to a MinIO (S3-compatible) public bucket and get a public HTTPS URL. Used by publishing agents to host images/videos before a social post goes through the Postiz publish gate. Triggers: 'upload to minio', 'upload media', 'host image', 'public url for image', 'subir imagem', 'mídia pública'."
+category: storage
+envKeys: ["MINIO_ENDPOINT", "MINIO_ACCESS_KEY", "MINIO_SECRET_KEY", "MINIO_BUCKET", "MINIO_PUBLIC_BASE"]
+---
+
+# MinIO / S3 Media
+
+Uploads a local file to an S3-compatible bucket (MinIO) and returns a public
+HTTPS URL. This is the media-hosting half of the social publishing flow: the
+Postiz publish gate (`_run_publish_action` in the dashboard) only accepts media
+as an HTTPS URL whose host is in `POSTIZ_ALLOWED_MEDIA_HOSTS`. MinIO gives you
+that URL.
+
+## Setup
+
+Configure via the **MinIO / S3 Media** card in the dashboard (Integrations),
+or in the Portainer stack env. All values live server-side; agents receive the
+credentials in their run env (Option A — agents upload directly).
+
+```
+MINIO_ENDPOINT     = https://s3.workflowapi.com.br
+MINIO_ACCESS_KEY   = <access key>
+MINIO_SECRET_KEY   = <secret key>
+MINIO_BUCKET       = post
+MINIO_PUBLIC_BASE  = https://s3.workflowapi.com.br   # optional, defaults to MINIO_ENDPOINT
+```
+
+The bucket must allow **public read** (set via a MinIO bucket policy — the
+"set public" toggle). Object ACLs are not used unless you set
+`MINIO_SET_PUBLIC_ACL=1`.
+
+## Usage
+
+```bash
+python .claude/skills/int-minio/scripts/upload.py /path/to/image.png
+```
+
+Prints a JSON line and then the bare URL (last line, easy to capture):
+
+```
+{"url": "https://s3.workflowapi.com.br/post/media/ab12….png", "key": "media/ab12….png", "bucket": "post"}
+https://s3.workflowapi.com.br/post/media/ab12….png
+```
+
+Capture it in a shell:
+
+```bash
+URL=$(python .claude/skills/int-minio/scripts/upload.py ./post.png | tail -1)
+```
+
+## In the publish flow (publishing agents only)
+
+When you (pixel-social-media / mako-marketing / pulse-community) prepare a post
+that needs an image or video:
+
+1. Generate the media locally (e.g. via the `ai-image-creator` skill).
+2. Upload it here and capture the returned URL.
+3. Put that URL in your outcome's `publish_media` array (and the caption in
+   `publish_content`). Set `publish_intent: true` and `publish_target`.
+4. The dashboard, after your human approves on Telegram, hands the URL to
+   Postiz. Instagram **requires** at least one media URL; LinkedIn text posts
+   do not.
+
+The host of the returned URL (`s3.workflowapi.com.br`) must be present in
+`POSTIZ_ALLOWED_MEDIA_HOSTS` on the dashboard, or the gate rejects it
+fail-closed. See `docs/postiz-portainer-swarm.md`.
diff --git a/.claude/skills/int-minio/scripts/upload.py b/.claude/skills/int-minio/scripts/upload.py
new file mode 100644
index 000000000..86ca3a6cf
--- /dev/null
+++ b/.claude/skills/int-minio/scripts/upload.py
@@ -0,0 +1,111 @@
+#!/usr/bin/env python3
+"""Upload a local file to the MinIO/S3 bucket and print its public HTTPS URL.
+
+Used by publishing agents (pixel/mako/pulse) in the goal-ticket-unification
+publish flow: generate an image locally, upload it here to get a public URL,
+then put that URL in the outcome's `publish_media` so the dashboard can hand
+it to Postiz for the actual (human-approved) social post.
+
+The returned URL's host must be listed in POSTIZ_ALLOWED_MEDIA_HOSTS on the
+dashboard, otherwise the publish gate rejects it fail-closed.
+
+Env (configure via the MinIO integration card in the dashboard, or Portainer):
+  MINIO_ENDPOINT      S3 API endpoint, e.g. https://s3.workflowapi.com.br
+  MINIO_ACCESS_KEY    access key
+  MINIO_SECRET_KEY    secret key
+  MINIO_BUCKET        target bucket (must allow public read), e.g. post
+  MINIO_PUBLIC_BASE   base for the public URL (default: MINIO_ENDPOINT)
+
+Usage:
+  python upload.py /path/to/image.png
+  python upload.py /path/to/image.png --key custom/name.png
+Prints a JSON line {"url": "...", "key": "...", "bucket": "..."} on success,
+and the bare URL on the last line for easy shell capture. Exits non-zero with
+a message on stderr on failure.
+"""
+
+from __future__ import annotations
+
+import argparse
+import json
+import mimetypes
+import os
+import sys
+import uuid
+from pathlib import Path
+
+
+def _env(name: str, *, required: bool = True, default: str | None = None) -> str:
+    val = (os.environ.get(name) or "").strip()
+    if not val:
+        if default is not None:
+            return default
+        if required:
+            print(f"error: env var {name} is not set (configure the MinIO integration)", file=sys.stderr)
+            sys.exit(2)
+        return ""
+    return val
+
+
+def main() -> None:
+    parser = argparse.ArgumentParser(description="Upload a file to MinIO/S3 and print its public URL")
+    parser.add_argument("file", help="local path to the file to upload")
+    parser.add_argument("--key", help="object key (default: media/<uuid><ext>)")
+    parser.add_argument("--bucket", help="override MINIO_BUCKET")
+    parser.add_argument("--content-type", help="override the guessed content type")
+    args = parser.parse_args()
+
+    src = Path(args.file).expanduser()
+    if not src.is_file():
+        print(f"error: file not found: {src}", file=sys.stderr)
+        sys.exit(2)
+
+    endpoint = _env("MINIO_ENDPOINT").rstrip("/")
+    access_key = _env("MINIO_ACCESS_KEY")
+    secret_key = _env("MINIO_SECRET_KEY")
+    bucket = (args.bucket or "").strip() or _env("MINIO_BUCKET")
+    public_base = _env("MINIO_PUBLIC_BASE", required=False, default=endpoint).rstrip("/")
+
+    try:
+        import boto3
+        from botocore.client import Config
+    except ImportError:
+        print("error: boto3 is not installed in this runtime", file=sys.stderr)
+        sys.exit(3)
+
+    ext = src.suffix
+    key = (args.key or "").strip() or f"media/{uuid.uuid4().hex}{ext}"
+    content_type = args.content_type or mimetypes.guess_type(src.name)[0] or "application/octet-stream"
+
+    # Path-style addressing — a custom domain (s3.workflowapi.com.br) can't do
+    # virtual-host buckets, so force path style: {endpoint}/{bucket}/{key}.
+    s3 = boto3.client(
+        "s3",
+        endpoint_url=endpoint,
+        aws_access_key_id=access_key,
+        aws_secret_access_key=secret_key,
+        config=Config(signature_version="s3v4", s3={"addressing_style": "path"}),
+    )
+
+    extra = {"ContentType": content_type}
+    # Only try to set a public-read ACL when explicitly asked — most MinIO
+    # setups make the bucket public via a bucket POLICY (which the user already
+    # did with "set public"), and object ACLs are often disabled, so setting
+    # one would raise. Bucket policy already covers public read.
+    if (os.environ.get("MINIO_SET_PUBLIC_ACL") or "").strip() in ("1", "true", "yes"):
+        extra["ACL"] = "public-read"
+
+    try:
+        with src.open("rb") as fh:
+            s3.upload_fileobj(fh, bucket, key, ExtraArgs=extra)
+    except Exception as exc:  # noqa: BLE001
+        print(f"error: upload failed: {exc}", file=sys.stderr)
+        sys.exit(1)
+
+    url = f"{public_base}/{bucket}/{key}"
+    print(json.dumps({"url": url, "key": key, "bucket": bucket}, ensure_ascii=False))
+    print(url)
+
+
+if __name__ == "__main__":
+    main()
diff --git a/.claude/skills/social-ai-trends-blog/SKILL.md b/.claude/skills/social-ai-trends-blog/SKILL.md
new file mode 100644
index 000000000..097976565
--- /dev/null
+++ b/.claude/skills/social-ai-trends-blog/SKILL.md
@@ -0,0 +1,117 @@
+---
+name: social-ai-trends-blog
+description: >
+  Pesquisa semanal de trending topics de IA no X (Twitter), gera uma fila de
+  pautas virais para o blog Sistema Britto e alimenta a rotina diaria AI News:
+  seleção por Sage, texto por Quill, revisão por Raven, humanização/SEO/link
+  building por Mako, imagem, Ghost draft, aprovação humana, publicação e
+  compartilhamento no LinkedIn. Use quando: "trending de IA", "pauta do blog",
+  "AI News", "tópicos virais da semana", "o que está bombando em IA", ou nos
+  cronjobs semanais/diários.
+---
+
+# social-ai-trends-blog — AI News semanal + fila diaria
+
+Transforma o hype real do X em pauta editorial acionável para o blog
+(`blog.sistemabritto.com.br`, via `custom-int-ghost`), sempre puxando o gancho
+para os produtos Evolution.
+
+## Produtos para ancorar o gancho
+
+| Produto | Ângulo de gancho |
+|---|---|
+| **Evolution API** | API open source de WhatsApp — dono da própria infra, sem lock-in |
+| **Evo AI** | CRM + agentes de IA |
+| **Evo CRM** | Gestão de relacionamento |
+| **EvoGo** | Evolution Go |
+| **Evo Academy** | Cursos — gancho para temas "aprenda IA" |
+| **Evolution Summit** | Evento — gancho para tendências/futuro |
+
+## Pipeline semanal (segunda)
+
+```
+1. COLETA      → fetch_ai_trends.py (X API v2 recent search, 7 dias, sort=relevancy)
+2. RANQUEAMENTO→ score = likes + 2·RT + 1.5·quote + 0.5·reply + 1.5·bookmark + 0.001·impressions
+                 + clusterização por tema (regex) + filtro de ruído
+3. SÍNTESE     → @mako-marketing monta 15 tópicos: título + ângulo + gancho de produto
+4. REVISÃO     → @sage-strategy revisa viralidade, relevância e fit Sistema Britto
+5. FILA        → salva a pauta semanal e a fila editorial em workspace/marketing/ai-news/
+```
+
+### Agentes
+
+- **Coleta:** script `fetch_ai_trends.py` usando X API.
+- **Curadoria:** `@sage-strategy` escolhe os viral topics mais relevantes para Sistema Britto.
+- **Síntese editorial:** `@mako-marketing` transforma tendencias em fila de pautas.
+
+## Pipeline diario (19:00)
+
+```
+1. Sage seleciona o proximo item da fila.
+2. Quill escreve o blogpost AI News com fontes e estrutura.
+3. Raven revisa factualidade, risco, promessa e lacunas.
+4. Mako humaniza, aplica SEO/link building, gera imagem/thumbnail e cria Ghost draft.
+5. Telegram envia pedido de aprovacao com link do draft.
+6. Publicacao e compartilhamento no LinkedIn so acontecem depois do OK humano.
+7. Ao gerar o draft, o item da fila passa para `drafted` com `approval_status: pending`.
+```
+
+### Regras de aprovacao
+
+- Nunca publicar no Ghost sem aprovacao explicita do Felipe.
+- Nunca compartilhar no LinkedIn sem o post do Ghost estar aprovado/publicado.
+- Se `LINKEDIN_ACCESS_TOKEN` nao estiver configurado, registrar o bloqueio e nao tentar compartilhar.
+- O draft diario deve ficar como `status: draft`.
+- A mensagem de aprovacao precisa conter: titulo, promessa, link de preview/admin quando houver, caminho da imagem e pergunta objetiva de OK.
+
+## Como rodar (manual)
+
+```bash
+# Semanal: coleta + curadoria + fila
+python3 ADWs/routines/custom/ai_news_weekly_x_research.py
+
+# Diario: consome proximo item, cria draft e pede aprovacao
+python3 ADWs/routines/custom/ai_news_daily_draft.py
+```
+
+## Requisitos
+
+- `SOCIAL_TWITTER_1_BEARER_TOKEN` no `.env` — tier **Basic** ou superior
+  (recent search com janela de 7 dias + `sort_order=relevancy`).
+- Limite: janela máxima de 7 dias no recent search. Para histórico maior,
+  precisaria do endpoint full-archive (tier Pro/Enterprise).
+
+## Saídas
+
+| Arquivo | Conteúdo |
+|---|---|
+| `trends_raw.json` | Dados brutos: temas ranqueados + top tweets com métricas |
+| `workspace/marketing/ai-news/[C]pauta-AAAA-WW.md` | Os 15 tópicos finais |
+| `workspace/marketing/ai-news/queue.json` | Fila editorial diaria |
+| `workspace/marketing/ai-news/drafts/` | Drafts, revisoes, imagens e aprovacoes |
+
+## Cronjobs
+
+- Segunda-feira 08:00: `AI News Weekly X Research`.
+- Todos os dias 19:00: `AI News Daily Draft`.
+
+Registro do cron: ver `config/routines.yaml`.
+
+## Estrategia "post recompensa"
+
+Manter como trilha paralela de crescimento:
+
+1. Sage define tese, publico, oferta e criterio de lead qualificado.
+2. Mako transforma em campanha comentavel com CTA de palavra-chave.
+3. Pixel/Canvas geram criativo.
+4. Raven revisa risco de promessa, clareza e friccao.
+5. Felipe aprova antes de postar.
+
+## Anti-padrões
+
+- ❌ Publicar sem aprovação do Felipe.
+- ❌ Confiar só na contagem bruta de virais (tier Basic é amostra limitada) —
+  usar os **temas** como sinal e sintetizar pautas, não copiar tweets.
+- ❌ Gancho forçado de produto onde não cabe — se o tema não conecta com
+  Evolution, marcar como "sem gancho" em vez de inventar.
+- ❌ Repetir pautas de semanas anteriores sem checar histórico.
diff --git a/.claude/skills/social-ai-trends-blog/[C]pauta-2026-W24.md b/.claude/skills/social-ai-trends-blog/[C]pauta-2026-W24.md
new file mode 100644
index 000000000..109359f41
--- /dev/null
+++ b/.claude/skills/social-ai-trends-blog/[C]pauta-2026-W24.md
@@ -0,0 +1,45 @@
+# Pauta de IA para o blog — Semana 24/2026 (09–13 jun)
+
+> Fonte: X API (484 tweets, 7 dias, ordenados por relevância). Executor: Mako.
+> Revisão: Sage. Status: **aguardando aprovação do Felipe.**
+
+**Sinal da semana:** o tema mais viral de longe foi **"Open source AI must win"**
+(svpino, omarsar0, dankvr, bindureddy, "Dario com medo do open source"). Isso
+joga a favor do posicionamento da Evolution — somos open source. Aproveitar.
+
+---
+
+## Os 15 tópicos
+
+| # | Título | Ângulo / por que bombou | Gancho de produto |
+|---|--------|------------------------|-------------------|
+| 1 | **Por que o futuro da IA é open source (e por que isso te beneficia)** | "Open source AI must win" foi o grito da semana no X | **Evolution API** — você é dono da infra, sem lock-in |
+| 2 | **Construir em cima de API proprietária é uma bomba-relógio** | Tweet viral: "por que construir numa API que pode cortar seu acesso da noite pro dia?" | **Evolution API** open source vs. dependência de big tech |
+| 3 | **Rodando IA no seu hardware: a fazenda de 30 Mac Minis** | Caso viral do "Marcus Chen" empilhando Mac Minis pra rodar IA barato | **EvoGo / self-hosting** — IA sob seu controle |
+| 4 | **Agentic AI x AI Agents x IA Generativa: o glossário que 99% erra** | Tweet viral apontando que quase ninguém sabe a diferença | **Evo AI** — agentes de IA na prática |
+| 5 | **O abismo de produtividade: quem usa IA entrega dias de trabalho em horas** | "The productivity gap is about to become terrifying" (viral) | **Evo AI + Evolution API** — automação de WhatsApp |
+| 6 | **7 usos de agentes de IA que vão muito além do ChatGPT** | "Não entendo por que tanta gente ainda não usa agentes de IA" | **Evo AI** — agentes conectados ao seu negócio |
+| 7 | **OpenAI, Anthropic e Google concordam num risco — o que vem aí** | Big labs alinhados num alerta = pauta de autoridade | Evolution Summit (tendências/futuro) |
+| 8 | **IA na medicina: a melhor não é a que se vende como "IA médica"** | Estudo na Nature viralizou (glauber_doc) | Vertical de saúde — caso de uso Evo AI |
+| 9 | **As 5 habilidades de IA que valem ouro em 2026** | "Learn AI skills" em alta (automação, image gen, vídeo) | **Evo Academy** — trilha de aprendizado |
+| 10 | **Deepfakes indistinguíveis: como proteger sua marca** | Vídeo falso do "Roda Viva" viralizou (Boulos desmentiu) | WhatsApp oficial / verificação via **Evolution** |
+| 11 | **Construindo agentes com n8n + IA: guia prático** | "Construí 47 agentes com n8n e Claude" (viral) | **Evolution API** como camada de WhatsApp dos agentes |
+| 12 | **Como a IA está redesenhando workflows (e quem fica pra trás)** | "AI is reshaping how work gets done globally" | Automação com **Evolution + Evo AI** |
+| 13 | **O impacto da IA no emprego e na economia: o que os dados mostram** | Sachsida (213 likes) alertando sobre impacto no emprego | Conteúdo de autoridade / topo de funil |
+| 14 | **As empresas dos sonhos de quem trabalha com IA** | Ranking viral (Anthropic, OpenAI, DeepMind) | Cultura/recrutamento — branding Sistema Britto |
+| 15 | **Aprenda IA de graça: os melhores recursos desta semana** | Aula de Stanford "Turning Electricity into Intelligence" viralizou | **Evo Academy** — curadoria + trilha própria |
+
+---
+
+## Revisão do Sage (supervisor)
+
+- ✅ **Forte alinhamento (1, 2, 3, 11):** open source / self-hosting batem direto
+  com o DNA da Evolution. Priorizar estes 4 — é onde temos autoridade real.
+- ✅ **Educacionais (4, 6, 9, 15):** ótimos pra topo de funil + Evo Academy.
+- ⚠️ **Atenção (13, 14):** sem gancho de produto claro — usar como autoridade/branding,
+  não esperar conversão. Manter no máx. 1 por semana.
+- ⚠️ **#8 (saúde):** validar se temos caso real de cliente Evo AI em saúde antes de publicar.
+- 💡 Sugestão: começar a semana com o #1 (carro-chefe) e o #11 (prático/dev) —
+  ancoram o posicionamento open source enquanto o tema está quente.
+
+**Veredito:** lista aprovada para envio ao Felipe.
diff --git a/.claude/skills/social-ai-trends-blog/assets/THUMBNAIL-PRIMER.md b/.claude/skills/social-ai-trends-blog/assets/THUMBNAIL-PRIMER.md
new file mode 100644
index 000000000..e99a8f19b
--- /dev/null
+++ b/.claude/skills/social-ai-trends-blog/assets/THUMBNAIL-PRIMER.md
@@ -0,0 +1,71 @@
+# Thumbnail Primer — Sistema Britto / blog + YouTube
+
+Estilo modelado a partir de 3 referências do nicho IA (BR + gringo) enviadas
+pelo Felipe. Ver `thumbnail-refs/`. Formato-alvo: **16:9 (1280×720)**,
+reaproveitável como capa de vídeo no YouTube. Geração via **gpt-image-2 (OpenAI)**
+na skill `ai-image-creator`.
+
+## Padrão extraído das referências
+
+### Bloco A — estilo BR (as do próprio Felipe — `ref-01-br-felipe.jpg`)
+- Rosto do Felipe à direita/centro, expressão forte (sorriso confiante, dedo
+  apontando, ou surpresa). Recorte limpo com leve rim light.
+- Ícones de app 3D glossy flutuando (Claude, Obsidian, ChatGPT, PIX).
+- 1 seta branca desenhada à mão (curva), apontando pro elemento-chave.
+- Fundo escuro com dados/dashboard, tons de **verde-limão** (marca).
+- Texto curto e pesado + 1 badge de resultado/número (R$0,00, ROAS 3.90, ROI).
+- Composição limpa, respira — credível, não poluído.
+
+### Bloco B — estilo gringo (Hermes/Julian — `ref-02`, `ref-03`)
+- Texto GIGANTE, 2-4 palavras, peso black, contorno grosso (stroke).
+  Ex: "IT'S MASSIVE", "100x UPGRADES", "THIS IS INSANE".
+- Rosto em choque/empolgação (boca aberta).
+- Neon/glow saturado (roxo, amarelo, vermelho), raios, badge "FREE" vermelho.
+- Dashboard com gráfico subindo (prova/resultado).
+- Altíssimo contraste, energia agressiva.
+
+## Receita Sistema Britto (fusão A + B)
+
+Pegar a **legibilidade e energia** do gringo + a **credibilidade e marca** do BR.
+
+| Elemento | Regra |
+|---|---|
+| Proporção | 16:9, 1280×720 |
+| Rosto | Felipe (do face-bank), 1/3 do quadro, expressão coerente com a pauta |
+| Hook visual | objeto-símbolo no lado oposto: ícone de app / celular / dashboard / dinheiro / logo |
+| Headline | 2-5 palavras, fonte black, branco ou verde-limão, stroke escuro grosso |
+| Badge | opcional — número/resultado ou "GRÁTIS"/"NOVO" em círculo/retângulo |
+| Fundo | escuro + glow verde-limão da marca (evitar roxo/amarelo gringo puro) |
+| Seta | no máx. 1, branca, à mão, opcional |
+| Limpeza | legível em tamanho pequeno; sem poluição; máx. 1 foco visual |
+| Paleta | verde-limão (#A3E635 / lime) + cinza metálico + preto (cores da marca) |
+
+## Template de prompt para gpt-image-2
+
+```
+Thumbnail 16:9 estilo YouTube, alta qualidade, para o nicho de IA/automação.
+PESSOA: [rosto do face-bank — descrição/expressão: ex. "homem jovem de óculos,
+sorriso confiante apontando"]. Posicionado no terço [esquerdo/direito].
+HOOK VISUAL no lado oposto: [objeto — ex. "ícone 3D glossy do app X" / "gráfico
+de dashboard subindo" / "celular com tela de vendas"].
+TEXTO GRANDE em destaque: "[2-5 PALAVRAS]" — fonte black, branca com contorno
+escuro grosso, alto contraste. [opcional: badge "[NÚMERO/GRÁTIS]"].
+FUNDO escuro com glow verde-limão (#A3E635) da marca, tons cinza metálico.
+Composição limpa, 1 foco visual, legível em tamanho pequeno. Sem poluição.
+[opcional: 1 seta branca desenhada à mão apontando para o elemento-chave].
+```
+
+Para consistência de rosto, usar `ai-image-creator -r <foto do face-bank>`
+(edição com imagem de referência).
+
+## Face-bank
+
+Pasta: `assets/face-bank/`. Felipe vai enviar fotos de rosto dele em várias
+expressões (neutro, sorrindo, surpreso, apontando, sério/confiante). Quanto
+mais variado, melhor o casamento com cada tipo de pauta.
+
+## Anti-padrões de thumbnail
+- ❌ Texto longo (>5 palavras) ou fonte fina — ilegível no feed.
+- ❌ Mais de 1 foco visual — polui.
+- ❌ Paleta roxo/amarelo gringo pura — fugir da marca; usar verde-limão.
+- ❌ Promessa que o post não cumpre (clickbait vazio) — público BR é calejado.
diff --git a/.claude/skills/social-ai-trends-blog/assets/thumbnail-refs/ref-01-br-felipe.jpg b/.claude/skills/social-ai-trends-blog/assets/thumbnail-refs/ref-01-br-felipe.jpg
new file mode 100644
index 000000000..d2e9177d1
Binary files /dev/null and b/.claude/skills/social-ai-trends-blog/assets/thumbnail-refs/ref-01-br-felipe.jpg differ
diff --git a/.claude/skills/social-ai-trends-blog/assets/thumbnail-refs/ref-02-gringo-hermes.jpg b/.claude/skills/social-ai-trends-blog/assets/thumbnail-refs/ref-02-gringo-hermes.jpg
new file mode 100644
index 000000000..a02fc7142
Binary files /dev/null and b/.claude/skills/social-ai-trends-blog/assets/thumbnail-refs/ref-02-gringo-hermes.jpg differ
diff --git a/.claude/skills/social-ai-trends-blog/assets/thumbnail-refs/ref-03-gringo-julian.jpg b/.claude/skills/social-ai-trends-blog/assets/thumbnail-refs/ref-03-gringo-julian.jpg
new file mode 100644
index 000000000..84fe672c9
Binary files /dev/null and b/.claude/skills/social-ai-trends-blog/assets/thumbnail-refs/ref-03-gringo-julian.jpg differ
diff --git a/.claude/skills/social-ai-trends-blog/fetch_ai_trends.py b/.claude/skills/social-ai-trends-blog/fetch_ai_trends.py
new file mode 100644
index 000000000..77d260758
--- /dev/null
+++ b/.claude/skills/social-ai-trends-blog/fetch_ai_trends.py
@@ -0,0 +1,187 @@
+#!/usr/bin/env python3
+"""
+fetch_ai_trends.py — Coleta tweets sobre IA dos últimos 7 dias via X API v2,
+ranqueia por viralidade (likes + RTs + quotes + bookmarks + impressões) e
+agrupa por tema. Saída: JSON com os tweets top + agregação por tópico.
+
+Uso:
+    python3 fetch_ai_trends.py [--days 7] [--per-query 100] [--out trends.json]
+
+Requer SOCIAL_TWITTER_1_BEARER_TOKEN no .env (raiz do workspace).
+Tier mínimo: Basic (recent search, janela de 7 dias).
+"""
+import os, sys, json, time, re, argparse, urllib.parse, urllib.request
+from datetime import datetime, timezone, timedelta
+from collections import defaultdict
+
+ROOT = os.path.abspath(os.path.join(os.path.dirname(__file__), "..", "..", ".."))
+
+def load_env():
+    env = {}
+    path = os.path.join(ROOT, ".env")
+    if os.path.exists(path):
+        with open(path, encoding="utf-8") as f:
+            for line in f:
+                line = line.strip()
+                if not line or line.startswith("#") or "=" not in line:
+                    continue
+                k, v = line.split("=", 1)
+                env[k.strip()] = v.strip().strip('"').strip("'")
+    return env
+
+# Consultas focadas em IA (PT + EN). -is:retweet evita duplicar virais por RT.
+QUERIES = [
+    '("inteligência artificial" OR "IA generativa" OR "agentes de IA") lang:pt -is:retweet',
+    '(ChatGPT OR Claude OR Gemini OR "GPT-5" OR Llama) lang:pt -is:retweet',
+    '(AI agents OR "agentic AI" OR "AI coding" OR "AI automation") lang:en -is:retweet',
+    '("AI breakthrough" OR "new AI model" OR "AI startup" OR "open source AI") lang:en -is:retweet',
+    '(OpenAI OR Anthropic OR "Google DeepMind" OR xAI OR Mistral) lang:en -is:retweet',
+    '("AI agents" OR chatbot OR "customer support AI" OR "WhatsApp AI") lang:en -is:retweet',
+]
+
+def score(m):
+    return (
+        m.get("like_count", 0) * 1.0
+        + m.get("retweet_count", 0) * 2.0
+        + m.get("quote_count", 0) * 1.5
+        + m.get("reply_count", 0) * 0.5
+        + m.get("bookmark_count", 0) * 1.5
+        + m.get("impression_count", 0) * 0.001
+    )
+
+# Temas para clusterizar (label -> regex de palavras-chave)
+TOPICS = {
+    "Agentes de IA / Agentic": r"agent|agentic|autonom",
+    "IA para código/dev": r"coding|code|developer|copilot|cursor|claude code|programaç",
+    "Modelos novos (GPT/Claude/Gemini/Llama)": r"gpt-?5|gpt5|claude|gemini|llama|mistral|grok|deepseek|qwen",
+    "OpenAI / Anthropic / Big Labs": r"openai|anthropic|deepmind|xai|microsoft|meta ai|google ai",
+    "IA generativa de imagem/vídeo": r"image|video|midjourney|sora|veo|flux|diffusion|gerad",
+    "Automação / Workflows com IA": r"automat|workflow|n8n|zapier|rpa|integraç",
+    "Chatbots / Atendimento / WhatsApp": r"chatbot|whatsapp|customer support|atendimento|suporte|sac",
+    "IA no trabalho / produtividade": r"productiv|produtiv|trabalho|job|emprego|workplace",
+    "Open source / modelos abertos": r"open.?source|open weight|aberto",
+    "Regulação / ética / segurança": r"regulat|regul|ethic|étic|safety|seguran|privac",
+    "Negócios / startups / investimento": r"startup|funding|investimen|raise|bilh|billion|valuation|ipo",
+}
+
+API_ERRORS = []
+
+def classify(text):
+    t = text.lower()
+    hits = [label for label, pat in TOPICS.items() if re.search(pat, t)]
+    return hits or ["Outros / IA geral"]
+
+# Ruído conhecido: idol K-pop "Gemini", aniversários, filmes, sorteios.
+NOISE = re.compile(
+    r"#?\d*gemini\s*day|miracle boy|ppnaravit|phuwintang|ohmpawat|aniversário|"
+    r"feliz aniver|happy birthday|cinemascore|giveaway|sorteio|🎂",
+    re.IGNORECASE,
+)
+
+def is_noise(text):
+    return bool(NOISE.search(text or ""))
+
+def fetch(query, bearer, start_time, max_results=100):
+    params = {
+        "query": query,
+        "max_results": str(max_results),
+        "start_time": start_time,
+        "sort_order": "relevancy",
+        "tweet.fields": "public_metrics,created_at,lang,author_id,entities",
+        "expansions": "author_id",
+        "user.fields": "username,name,public_metrics,verified",
+    }
+    url = "https://api.twitter.com/2/tweets/search/recent?" + urllib.parse.urlencode(params)
+    req = urllib.request.Request(url, headers={"Authorization": f"Bearer {bearer}"})
+    try:
+        with urllib.request.urlopen(req, timeout=30) as r:
+            return json.loads(r.read().decode())
+    except urllib.error.HTTPError as e:
+        body = e.read().decode()[:1000]
+        API_ERRORS.append({"query": query, "status": e.code, "body": body})
+        print(f"[warn] HTTP {e.code} em query '{query[:40]}...': {body}", file=sys.stderr)
+        return {"data": [], "includes": {}}
+    except Exception as e:
+        API_ERRORS.append({"query": query, "error": str(e)})
+        print(f"[warn] erro em query '{query[:40]}...': {e}", file=sys.stderr)
+        return {"data": [], "includes": {}}
+
+def main():
+    ap = argparse.ArgumentParser()
+    ap.add_argument("--days", type=int, default=7)
+    ap.add_argument("--per-query", type=int, default=100)
+    ap.add_argument("--out", default=os.path.join(os.path.dirname(__file__), "trends_raw.json"))
+    args = ap.parse_args()
+
+    env = load_env()
+    bearer = env.get("SOCIAL_TWITTER_1_BEARER_TOKEN") or os.environ.get("SOCIAL_TWITTER_1_BEARER_TOKEN")
+    if not bearer:
+        print("ERRO: SOCIAL_TWITTER_1_BEARER_TOKEN não encontrado no .env", file=sys.stderr)
+        sys.exit(1)
+
+    start = (datetime.now(timezone.utc) - timedelta(days=args.days)).strftime("%Y-%m-%dT%H:%M:%SZ")
+    users = {}
+    all_tweets = {}
+
+    for q in QUERIES:
+        res = fetch(q, bearer, start, args.per_query)
+        for u in res.get("includes", {}).get("users", []):
+            users[u["id"]] = u
+        for tw in res.get("data", []):
+            if is_noise(tw.get("text", "")):
+                continue
+            tw["_score"] = score(tw.get("public_metrics", {}))
+            tw["_topics"] = classify(tw.get("text", ""))
+            all_tweets[tw["id"]] = tw
+        time.sleep(1.2)  # respeita rate limit
+
+    tweets = sorted(all_tweets.values(), key=lambda t: t["_score"], reverse=True)
+
+    # Agregação por tema
+    topic_agg = defaultdict(lambda: {"count": 0, "total_score": 0.0, "top_tweets": []})
+    for tw in tweets:
+        for topic in tw["_topics"]:
+            agg = topic_agg[topic]
+            agg["count"] += 1
+            agg["total_score"] += tw["_score"]
+            if len(agg["top_tweets"]) < 5:
+                u = users.get(tw.get("author_id"), {})
+                agg["top_tweets"].append({
+                    "id": tw["id"],
+                    "text": tw["text"][:280],
+                    "author": u.get("username", "?"),
+                    "metrics": tw.get("public_metrics", {}),
+                    "score": round(tw["_score"], 1),
+                    "url": f"https://x.com/i/web/status/{tw['id']}",
+                })
+
+    topics_ranked = sorted(
+        ({"topic": k, **v} for k, v in topic_agg.items()),
+        key=lambda x: x["total_score"], reverse=True,
+    )
+
+    out = {
+        "generated_at": datetime.now(timezone.utc).isoformat(),
+        "window_days": args.days,
+        "queries": QUERIES,
+        "api_errors": API_ERRORS,
+        "total_tweets_collected": len(tweets),
+        "topics_ranked": topics_ranked,
+        "top_tweets_overall": [
+            {
+                "text": t["text"][:280],
+                "author": users.get(t.get("author_id"), {}).get("username", "?"),
+                "metrics": t.get("public_metrics", {}),
+                "score": round(t["_score"], 1),
+                "topics": t["_topics"],
+                "url": f"https://x.com/i/web/status/{t['id']}",
+            }
+            for t in tweets[:40]
+        ],
+    }
+    with open(args.out, "w", encoding="utf-8") as f:
+        json.dump(out, f, ensure_ascii=False, indent=2)
+    print(f"OK: {len(tweets)} tweets coletados, {len(topics_ranked)} temas. Saída: {args.out}")
+
+if __name__ == "__main__":
+    main()
diff --git a/.claude/skills/social-ai-trends-blog/trends_raw.json b/.claude/skills/social-ai-trends-blog/trends_raw.json
new file mode 100644
index 000000000..8e39402c9
--- /dev/null
+++ b/.claude/skills/social-ai-trends-blog/trends_raw.json
@@ -0,0 +1,1700 @@
+{
+  "generated_at": "2026-06-13T13:48:15.931514+00:00",
+  "window_days": 7,
+  "queries": [
+    "(\"inteligência artificial\" OR \"IA generativa\" OR \"agentes de IA\") lang:pt -is:retweet",
+    "(ChatGPT OR Claude OR Gemini OR \"GPT-5\" OR Llama) lang:pt -is:retweet",
+    "(AI agents OR \"agentic AI\" OR \"AI coding\" OR \"AI automation\") lang:en -is:retweet",
+    "(\"AI breakthrough\" OR \"new AI model\" OR \"AI startup\" OR \"open source AI\") lang:en -is:retweet",
+    "(OpenAI OR Anthropic OR \"Google DeepMind\" OR xAI OR Mistral) lang:en -is:retweet",
+    "(\"AI agents\" OR chatbot OR \"customer support AI\" OR \"WhatsApp AI\") lang:en -is:retweet"
+  ],
+  "total_tweets_collected": 484,
+  "topics_ranked": [
+    {
+      "topic": "Modelos novos (GPT/Claude/Gemini/Llama)",
+      "count": 142,
+      "total_score": 4349.158000000002,
+      "top_tweets": [
+        {
+          "id": "2064830151305699469",
+          "text": "Google founders are Jewish, has a frontier model\nAnthropic founder is Jewish, has a frontier model\nOpenAI founder is Jewish, has a frontier model\n\nxai founder isn’t Jewish, doesn’t have a frontier model\nMicrosoft founder isn’t Jewish, doesn’t have a frontier model\nDeepseek https:",
+          "author": "GolerGkA",
+          "metrics": {
+            "retweet_count": 51,
+            "reply_count": 65,
+            "like_count": 1618,
+            "quote_count": 19,
+            "bookmark_count": 443,
+            "impression_count": 272706
+          },
+          "score": 2718.2,
+          "url": "https://x.com/i/web/status/2064830151305699469"
+        },
+        {
+          "id": "2063506042114474143",
+          "text": "MARCUS CHEN EMPILHOU 30 MAC MINIS E CRIOU UMA FAZENDA DE SERVIDORES DE IA. UM ÚNICO MAC MINI DE US$ 599 PODE SUBSTITUIR SUA CONTA DE US$ 200/MÊS DO CLAUDE CODE GASTANDO APENAS US$ 3 DE ENERGIA.\n\nHá dois meses, um desenvolvedor publicou no Reddit a sua fatura do Claude Code: US$ h",
+          "author": "DehumanoaDeus",
+          "metrics": {
+            "retweet_count": 20,
+            "reply_count": 14,
+            "like_count": 190,
+            "quote_count": 1,
+            "bookmark_count": 100,
+            "impression_count": 39423
+          },
+          "score": 427.9,
+          "url": "https://x.com/i/web/status/2063506042114474143"
+        },
+        {
+          "id": "2065418102301442418",
+          "text": "chatgpt vs gemini mas o chatgpt tem um bundão, saia e uma venda nos olhos https://t.co/LgBDoYWL00",
+          "author": "scalabriniii",
+          "metrics": {
+            "retweet_count": 8,
+            "reply_count": 10,
+            "like_count": 322,
+            "quote_count": 3,
+            "bookmark_count": 33,
+            "impression_count": 22657
+          },
+          "score": 419.7,
+          "url": "https://x.com/i/web/status/2065418102301442418"
+        },
+        {
+          "id": "2064346800543482056",
+          "text": "AI is reshaping how work gets done globally.\n\nIt’s changing workflows, tasks, and decision-making systems.\n\nSharing these Top 7 AI models compiled by @AndrewBolis.\n\n1. ChatGPT (OpenAI)\n\nVersatile for writing, research, guidance, and support.\n\n2. Claude (Anthropic)\n\nFocuses on htt",
+          "author": "Igor_Buinevici",
+          "metrics": {
+            "retweet_count": 37,
+            "reply_count": 6,
+            "like_count": 98,
+            "quote_count": 0,
+            "bookmark_count": 72,
+            "impression_count": 7256
+          },
+          "score": 290.3,
+          "url": "https://x.com/i/web/status/2064346800543482056"
+        },
+        {
+          "id": "2065422550004371529",
+          "text": "E se a IA mais preparada para apoiar o médico não for a que se vende como “IA médica”?\n\nUm estudo publicado na Nature Medicine comparou ferramentas clínicas comerciais e dedicadas, OpenEvidence e UpToDate Expert AI, com LLMs gerais (GPT-5.2, Gemini 3.1 Pro e Claude Opus 4.6).\n\nNo",
+          "author": "glauber_doc",
+          "metrics": {
+            "retweet_count": 5,
+            "reply_count": 16,
+            "like_count": 74,
+            "quote_count": 0,
+            "bookmark_count": 25,
+            "impression_count": 4178
+          },
+          "score": 133.7,
+          "url": "https://x.com/i/web/status/2065422550004371529"
+        }
+      ]
+    },
+    {
+      "topic": "OpenAI / Anthropic / Big Labs",
+      "count": 111,
+      "total_score": 4003.280999999999,
+      "top_tweets": [
+        {
+          "id": "2064830151305699469",
+          "text": "Google founders are Jewish, has a frontier model\nAnthropic founder is Jewish, has a frontier model\nOpenAI founder is Jewish, has a frontier model\n\nxai founder isn’t Jewish, doesn’t have a frontier model\nMicrosoft founder isn’t Jewish, doesn’t have a frontier model\nDeepseek https:",
+          "author": "GolerGkA",
+          "metrics": {
+            "retweet_count": 51,
+            "reply_count": 65,
+            "like_count": 1618,
+            "quote_count": 19,
+            "bookmark_count": 443,
+            "impression_count": 272706
+          },
+          "score": 2718.2,
+          "url": "https://x.com/i/web/status/2064830151305699469"
+        },
+        {
+          "id": "2064346800543482056",
+          "text": "AI is reshaping how work gets done globally.\n\nIt’s changing workflows, tasks, and decision-making systems.\n\nSharing these Top 7 AI models compiled by @AndrewBolis.\n\n1. ChatGPT (OpenAI)\n\nVersatile for writing, research, guidance, and support.\n\n2. Claude (Anthropic)\n\nFocuses on htt",
+          "author": "Igor_Buinevici",
+          "metrics": {
+            "retweet_count": 37,
+            "reply_count": 6,
+            "like_count": 98,
+            "quote_count": 0,
+            "bookmark_count": 72,
+            "impression_count": 7256
+          },
+          "score": 290.3,
+          "url": "https://x.com/i/web/status/2064346800543482056"
+        },
+        {
+          "id": "2063273860754231748",
+          "text": "Some of the best companies to work for according to candidates.\n\nS+: Anthropic, OpenAI, Google DeepMind, Rentech, TGS, xAI, Citadel Securities, Jane Street, HRT\n\nS: Citadel, D.E. Shaw, Jump, Optiver, Two Sigma, Tesla (Autopilot), Five Rings, SpaceX\n\nS-: IMC, SIG, DRW, Akuna\n\nA++:",
+          "author": "vivoplt",
+          "metrics": {
+            "retweet_count": 8,
+            "reply_count": 33,
+            "like_count": 72,
+            "quote_count": 0,
+            "bookmark_count": 47,
+            "impression_count": 7640
+          },
+          "score": 182.6,
+          "url": "https://x.com/i/web/status/2063273860754231748"
+        },
+        {
+          "id": "2065284539564675171",
+          "text": "If you get offers from these 3 companies :  \n\n- OpenAI \n- Anthropic  \n- Google Deepmind  \n\nWhich one would you join, and why?",
+          "author": "Its_Nova1012",
+          "metrics": {
+            "retweet_count": 1,
+            "reply_count": 65,
+            "like_count": 61,
+            "quote_count": 0,
+            "bookmark_count": 2,
+            "impression_count": 3560
+          },
+          "score": 102.1,
+          "url": "https://x.com/i/web/status/2065284539564675171"
+        },
+        {
+          "id": "2063637138118516779",
+          "text": "OpenAI, Anthropic, Google DeepMind, and Microsoft just agreed on something.\n\nThey're all warning about the same risk: future AI lowering the knowledge barrier around dangerous biological material.\n\nRead the shocking details🧵: https://t.co/EQPjK1gzjG",
+          "author": "themetav3rse",
+          "metrics": {
+            "retweet_count": 20,
+            "reply_count": 6,
+            "like_count": 43,
+            "quote_count": 1,
+            "bookmark_count": 3,
+            "impression_count": 7481
+          },
+          "score": 99.5,
+          "url": "https://x.com/i/web/status/2063637138118516779"
+        }
+      ]
+    },
+    {
+      "topic": "Open source / modelos abertos",
+      "count": 105,
+      "total_score": 1812.6340000000002,
+      "top_tweets": [
+        {
+          "id": "2065627605144055865",
+          "text": "This is why you should support open source AI \n\nAuthoritarian governments can’t exert control on our lives and play god \n\nWithout open source AI, US government will restrict AGI access to a small set of elitists 😭",
+          "author": "bindureddy",
+          "metrics": {
+            "retweet_count": 54,
+            "reply_count": 81,
+            "like_count": 448,
+            "quote_count": 8,
+            "bookmark_count": 21,
+            "impression_count": 60284
+          },
+          "score": 700.3,
+          "url": "https://x.com/i/web/status/2065627605144055865"
+        },
+        {
+          "id": "2065733417661030904",
+          "text": "open-source ai is the only way forward.",
+          "author": "svpino",
+          "metrics": {
+            "retweet_count": 13,
+            "reply_count": 20,
+            "like_count": 92,
+            "quote_count": 2,
+            "bookmark_count": 2,
+            "impression_count": 4823
+          },
+          "score": 138.8,
+          "url": "https://x.com/i/web/status/2065733417661030904"
+        },
+        {
+          "id": "2065632446255665232",
+          "text": "Open source AI must win!",
+          "author": "omarsar0",
+          "metrics": {
+            "retweet_count": 9,
+            "reply_count": 11,
+            "like_count": 81,
+            "quote_count": 0,
+            "bookmark_count": 3,
+            "impression_count": 5587
+          },
+          "score": 114.6,
+          "url": "https://x.com/i/web/status/2065632446255665232"
+        },
+        {
+          "id": "2064814880826253368",
+          "text": "Clip with David Morgan: Is open source AI the printing press of the 21st century? We need to use open source AI to further pro-liberty, pro-human goals! https://t.co/uSl0BsOXI9",
+          "author": "HealthRanger",
+          "metrics": {
+            "retweet_count": 17,
+            "reply_count": 9,
+            "like_count": 59,
+            "quote_count": 0,
+            "bookmark_count": 6,
+            "impression_count": 5140
+          },
+          "score": 111.6,
+          "url": "https://x.com/i/web/status/2064814880826253368"
+        },
+        {
+          "id": "2065608055572640192",
+          "text": "Open source AI must win https://t.co/MnCdiKGGan https://t.co/lRRUXFHfxk",
+          "author": "dankvr",
+          "metrics": {
+            "retweet_count": 8,
+            "reply_count": 6,
+            "like_count": 65,
+            "quote_count": 0,
+            "bookmark_count": 2,
+            "impression_count": 4367
+          },
+          "score": 91.4,
+          "url": "https://x.com/i/web/status/2065608055572640192"
+        }
+      ]
+    },
+    {
+      "topic": "IA para código/dev",
+      "count": 72,
+      "total_score": 849.6419999999997,
+      "top_tweets": [
+        {
+          "id": "2063506042114474143",
+          "text": "MARCUS CHEN EMPILHOU 30 MAC MINIS E CRIOU UMA FAZENDA DE SERVIDORES DE IA. UM ÚNICO MAC MINI DE US$ 599 PODE SUBSTITUIR SUA CONTA DE US$ 200/MÊS DO CLAUDE CODE GASTANDO APENAS US$ 3 DE ENERGIA.\n\nHá dois meses, um desenvolvedor publicou no Reddit a sua fatura do Claude Code: US$ h",
+          "author": "DehumanoaDeus",
+          "metrics": {
+            "retweet_count": 20,
+            "reply_count": 14,
+            "like_count": 190,
+            "quote_count": 1,
+            "bookmark_count": 100,
+            "impression_count": 39423
+          },
+          "score": 427.9,
+          "url": "https://x.com/i/web/status/2063506042114474143"
+        },
+        {
+          "id": "2064611414241648817",
+          "text": "2026!!\n\nLearn Ai!!\nLearn Ai skills!!\nLearn Ai Image Gen!!\nLearn Ai Automation!!\nLearn Ai Video editing!!\nLearn AI Content creation!!\nLearn AI Prompt Engineering!!\nLearn Ai Coding(Vibe coding)!!",
+          "author": "AutomationKing0",
+          "metrics": {
+            "retweet_count": 7,
+            "reply_count": 5,
+            "like_count": 53,
+            "quote_count": 1,
+            "bookmark_count": 17,
+            "impression_count": 1292
+          },
+          "score": 97.8,
+          "url": "https://x.com/i/web/status/2064611414241648817"
+        },
+        {
+          "id": "2063475839040438713",
+          "text": "🤖 Awesome Open Source AI 🛡️\n\nA curated collection of the best open-source AI models, frameworks, agents, RAG tools, inference engines, LLMOps platforms, and developer resources.\n\nPerfect for AI engineers, builders, researchers, and open-source enthusiasts. 🚀\n\n🔗 https://t.co/gtFiT",
+          "author": "VivekIntel",
+          "metrics": {
+            "retweet_count": 6,
+            "reply_count": 2,
+            "like_count": 29,
+            "quote_count": 1,
+            "bookmark_count": 14,
+            "impression_count": 1145
+          },
+          "score": 65.6,
+          "url": "https://x.com/i/web/status/2063475839040438713"
+        },
+        {
+          "id": "2064069746530668679",
+          "text": "⚡AI coding agents are no longer just assistants—they’re becoming autonomous teammates.\n\nFrom code completion to multi-step execution across the SDLC, the shift is redefining software engineering.\n\nExplore what’s driving this evolution in Gartner’s 2026 Magic Quadrant for https://",
+          "author": "Gartner_inc",
+          "metrics": {
+            "retweet_count": 6,
+            "reply_count": 1,
+            "like_count": 20,
+            "quote_count": 1,
+            "bookmark_count": 4,
+            "impression_count": 2089
+          },
+          "score": 42.1,
+          "url": "https://x.com/i/web/status/2064069746530668679"
+        },
+        {
+          "id": "2063330354694705534",
+          "text": "Deepseek is still releasing its foundational models and also reportedly closing in on a massive $7B funding round as of early June 2026.\n\nSora got shutdown \n\nGitHub Copilot has huge market in enterprise coding agents\n\nMeta released Llama 4 (April 2025) Scout and Maverick its http",
+          "author": "lochan_twt",
+          "metrics": {
+            "retweet_count": 1,
+            "reply_count": 2,
+            "like_count": 21,
+            "quote_count": 0,
+            "bookmark_count": 3,
+            "impression_count": 3474
+          },
+          "score": 32.0,
+          "url": "https://x.com/i/web/status/2063330354694705534"
+        }
+      ]
+    },
+    {
+      "topic": "Automação / Workflows com IA",
+      "count": 38,
+      "total_score": 614.0729999999998,
+      "top_tweets": [
+        {
+          "id": "2064346800543482056",
+          "text": "AI is reshaping how work gets done globally.\n\nIt’s changing workflows, tasks, and decision-making systems.\n\nSharing these Top 7 AI models compiled by @AndrewBolis.\n\n1. ChatGPT (OpenAI)\n\nVersatile for writing, research, guidance, and support.\n\n2. Claude (Anthropic)\n\nFocuses on htt",
+          "author": "Igor_Buinevici",
+          "metrics": {
+            "retweet_count": 37,
+            "reply_count": 6,
+            "like_count": 98,
+            "quote_count": 0,
+            "bookmark_count": 72,
+            "impression_count": 7256
+          },
+          "score": 290.3,
+          "url": "https://x.com/i/web/status/2064346800543482056"
+        },
+        {
+          "id": "2064724369814044869",
+          "text": "The productivity gap is about to become terrifying.\n\nAI users are finishing days of work in hours.\n\nHere's the complete AI automation guide.\n\n📂 AI Automation\n┃\n┣ 📂 Foundations\n┃ ┣ 📂 What Is AI Automation\n┃ ┣ 📂 Automation vs AI\n┃ ┣ 📂 Decision Making\n┃ ┣ 📂 Learning https://t.co/N2E",
+          "author": "shushant_l",
+          "metrics": {
+            "retweet_count": 18,
+            "reply_count": 14,
+            "like_count": 67,
+            "quote_count": 1,
+            "bookmark_count": 48,
+            "impression_count": 2067
+          },
+          "score": 185.6,
+          "url": "https://x.com/i/web/status/2064724369814044869"
+        },
+        {
+          "id": "2064611414241648817",
+          "text": "2026!!\n\nLearn Ai!!\nLearn Ai skills!!\nLearn Ai Image Gen!!\nLearn Ai Automation!!\nLearn Ai Video editing!!\nLearn AI Content creation!!\nLearn AI Prompt Engineering!!\nLearn Ai Coding(Vibe coding)!!",
+          "author": "AutomationKing0",
+          "metrics": {
+            "retweet_count": 7,
+            "reply_count": 5,
+            "like_count": 53,
+            "quote_count": 1,
+            "bookmark_count": 17,
+            "impression_count": 1292
+          },
+          "score": 97.8,
+          "url": "https://x.com/i/web/status/2064611414241648817"
+        },
+        {
+          "id": "2063278361678360640",
+          "text": "Here are some of the biggest AI trends in 2026:\n\n1. Agentic AI\n\nAI systems are moving beyond chatbots into “agents” that can:\n\nPlan multi-step tasks\nUse tools and software\nConduct research\nAutomate workflows\nCollaborate with other AI agents\n\nExamples include coding agents,",
+          "author": "JCKCROWLEY",
+          "metrics": {
+            "retweet_count": 0,
+            "reply_count": 5,
+            "like_count": 4,
+            "quote_count": 0,
+            "bookmark_count": 0,
+            "impression_count": 259
+          },
+          "score": 6.8,
+          "url": "https://x.com/i/web/status/2063278361678360640"
+        },
+        {
+          "id": "2064661557175570655",
+          "text": ".\nDomain Listed For Sale\n\nhttps://t.co/qtLNGrsrun\n\n#Magentic #Agents #Agentic #AI #Automation #Orchestration #MultiAgent #LLM #MachineLearning #Robotics #Autonomous #DeepTech #DomainForSale https://t.co/G0JLS2SkC8",
+          "author": "DomainFQ",
+          "metrics": {
+            "retweet_count": 1,
+            "reply_count": 1,
+            "like_count": 3,
+            "quote_count": 0,
+            "bookmark_count": 0,
+            "impression_count": 21
+          },
+          "score": 5.5,
+          "url": "https://x.com/i/web/status/2064661557175570655"
+        }
+      ]
+    },
+    {
+      "topic": "Agentes de IA / Agentic",
+      "count": 116,
+      "total_score": 561.627,
+      "top_tweets": [
+        {
+          "id": "2064392166131265627",
+          "text": "Most people in AI can't actually explain the difference between \"Generative AI,\" \"Agentic AI,\" and \"AI Agents.\"\n\nThey use all three like they mean the same thing. They don't. And once it clicks, you can't unsee it.\n\nHere's the cleanest way to think about it:\n\nGenerative AI is the",
+          "author": "VaibhavSisinty",
+          "metrics": {
+            "retweet_count": 5,
+            "reply_count": 7,
+            "like_count": 38,
+            "quote_count": 1,
+            "bookmark_count": 33,
+            "impression_count": 2984
+          },
+          "score": 105.5,
+          "url": "https://x.com/i/web/status/2064392166131265627"
+        },
+        {
+          "id": "2063475839040438713",
+          "text": "🤖 Awesome Open Source AI 🛡️\n\nA curated collection of the best open-source AI models, frameworks, agents, RAG tools, inference engines, LLMOps platforms, and developer resources.\n\nPerfect for AI engineers, builders, researchers, and open-source enthusiasts. 🚀\n\n🔗 https://t.co/gtFiT",
+          "author": "VivekIntel",
+          "metrics": {
+            "retweet_count": 6,
+            "reply_count": 2,
+            "like_count": 29,
+            "quote_count": 1,
+            "bookmark_count": 14,
+            "impression_count": 1145
+          },
+          "score": 65.6,
+          "url": "https://x.com/i/web/status/2063475839040438713"
+        },
+        {
+          "id": "2065160042459152636",
+          "text": "Agentic AI is creating a new class of trust problems.\n\nUseful agents need (1) access to private information, (2) access to untrusted external input, and (3) the ability to act.\n\nHowever, once we combine these three properties, there is always the possibility that an agent can be ",
+          "author": "_weidai",
+          "metrics": {
+            "retweet_count": 2,
+            "reply_count": 7,
+            "like_count": 22,
+            "quote_count": 0,
+            "bookmark_count": 14,
+            "impression_count": 4188
+          },
+          "score": 54.7,
+          "url": "https://x.com/i/web/status/2065160042459152636"
+        },
+        {
+          "id": "2065521758422364435",
+          "text": "OpenAI, Google DeepMind, Meta, Microsoft, NVIDIA, Mistral, Hugging Face\n\nthe labs everyone says are closing ai behind a paywall quietly shipped their core tools on github. here are 7 repos, one from each\n\n1. OpenAI, openai/openai-agents-python\nhttps://t.co/6UfYVDOcTy\n27k stars. h",
+          "author": "vorty279",
+          "metrics": {
+            "retweet_count": 2,
+            "reply_count": 2,
+            "like_count": 22,
+            "quote_count": 0,
+            "bookmark_count": 10,
+            "impression_count": 878
+          },
+          "score": 42.9,
+          "url": "https://x.com/i/web/status/2065521758422364435"
+        },
+        {
+          "id": "2064069746530668679",
+          "text": "⚡AI coding agents are no longer just assistants—they’re becoming autonomous teammates.\n\nFrom code completion to multi-step execution across the SDLC, the shift is redefining software engineering.\n\nExplore what’s driving this evolution in Gartner’s 2026 Magic Quadrant for https://",
+          "author": "Gartner_inc",
+          "metrics": {
+            "retweet_count": 6,
+            "reply_count": 1,
+            "like_count": 20,
+            "quote_count": 1,
+            "bookmark_count": 4,
+            "impression_count": 2089
+          },
+          "score": 42.1,
+          "url": "https://x.com/i/web/status/2064069746530668679"
+        }
+      ]
+    },
+    {
+      "topic": "Outros / IA geral",
+      "count": 78,
+      "total_score": 405.62599999999964,
+      "top_tweets": [
+        {
+          "id": "2065787621427589404",
+          "text": "Ótimo uso de inteligência artificial por David Brazil. https://t.co/eWm99QOyrm",
+          "author": "chicobarney",
+          "metrics": {
+            "retweet_count": 3,
+            "reply_count": 9,
+            "like_count": 70,
+            "quote_count": 2,
+            "bookmark_count": 1,
+            "impression_count": 2834
+          },
+          "score": 87.8,
+          "url": "https://x.com/i/web/status/2065787621427589404"
+        },
+        {
+          "id": "2064331850382753938",
+          "text": "@memes_horriveis Akinator não é IA generativa meu anjo",
+          "author": "ZhyrelDragon",
+          "metrics": {
+            "retweet_count": 0,
+            "reply_count": 1,
+            "like_count": 68,
+            "quote_count": 0,
+            "bookmark_count": 0,
+            "impression_count": 1557
+          },
+          "score": 70.1,
+          "url": "https://x.com/i/web/status/2064331850382753938"
+        },
+        {
+          "id": "2065122858162868332",
+          "text": "INTELIGÊNCIA ARTIFICIAL | A ministra Cármen Lúcia, do Supremo Tribunal Federal (STF), destacou os riscos do uso indevido da inteligência artificial, nessa terça-feira (9), durante o 6º Congresso Brasileiro de Internet. https://t.co/DRLhtvThrv",
+          "author": "ebcnarede",
+          "metrics": {
+            "retweet_count": 12,
+            "reply_count": 1,
+            "like_count": 38,
+            "quote_count": 1,
+            "bookmark_count": 0,
+            "impression_count": 414
+          },
+          "score": 64.4,
+          "url": "https://x.com/i/web/status/2065122858162868332"
+        },
+        {
+          "id": "2063698566791450971",
+          "text": "@IsadoraGameOver O problema eh esse, eles não tão usando só IA como ferramenta kkkk\n\nAli claramente diz IA GENERATIVA, o que é algo COMPLETAMENTE diferente de uma IA comum\n\nMuito provavelmente vão usar IA generativa pra concept arts, designs e por aí vai",
+          "author": "FlipeArt2",
+          "metrics": {
+            "retweet_count": 0,
+            "reply_count": 6,
+            "like_count": 30,
+            "quote_count": 0,
+            "bookmark_count": 1,
+            "impression_count": 1033
+          },
+          "score": 35.5,
+          "url": "https://x.com/i/web/status/2063698566791450971"
+        },
+        {
+          "id": "2064358367498273167",
+          "text": "@rafaelgloves Pensa assim.\n\nProduto A é o que resolve o seu problema. \n\nProduto B no máximo quebra o galho mas é MUITO mais barato que o A.\n\nAcontece que o B está ficando cada vez melhor, enquanto continua sendo MUITO mais barato que o A.\n\nUm belo dia, você pensa: quer saber? O p",
+          "author": "rodrigofm",
+          "metrics": {
+            "retweet_count": 0,
+            "reply_count": 2,
+            "like_count": 26,
+            "quote_count": 0,
+            "bookmark_count": 2,
+            "impression_count": 2921
+          },
+          "score": 32.9,
+          "url": "https://x.com/i/web/status/2064358367498273167"
+        }
+      ]
+    },
+    {
+      "topic": "Negócios / startups / investimento",
+      "count": 47,
+      "total_score": 225.66999999999993,
+      "top_tweets": [
+        {
+          "id": "2063674932471730626",
+          "text": "Every single AI startup powered by @mintlify with $10B+ valuation and $100M+ revenue run rate:  \n\nCrusoe - $10B \nMercor - $10B ✅ \nElevenLabs - $11B \nBaseten - $11B* ✅\nHarvey - $11B ✅\nLovable - $12B* ✅\nOpenEvidence - $12B \nMistral - $14B \nNscale - $14.6B \nFireworks - $15B* ✅ https",
+          "author": "pronounsuponly",
+          "metrics": {
+            "retweet_count": 1,
+            "reply_count": 11,
+            "like_count": 23,
+            "quote_count": 0,
+            "bookmark_count": 3,
+            "impression_count": 5703
+          },
+          "score": 40.7,
+          "url": "https://x.com/i/web/status/2063674932471730626"
+        },
+        {
+          "id": "2063330354694705534",
+          "text": "Deepseek is still releasing its foundational models and also reportedly closing in on a massive $7B funding round as of early June 2026.\n\nSora got shutdown \n\nGitHub Copilot has huge market in enterprise coding agents\n\nMeta released Llama 4 (April 2025) Scout and Maverick its http",
+          "author": "lochan_twt",
+          "metrics": {
+            "retweet_count": 1,
+            "reply_count": 2,
+            "like_count": 21,
+            "quote_count": 0,
+            "bookmark_count": 3,
+            "impression_count": 3474
+          },
+          "score": 32.0,
+          "url": "https://x.com/i/web/status/2063330354694705534"
+        },
+        {
+          "id": "2064149611762118779",
+          "text": "🚨 vocês entenderam o que acabou de acontecer com a Apple..\n\na Apple apresentou sua nova Siri AI durante a WWDC 2026.\n\nhoras depois, o mercado respondeu.\n\nas ações fecharam em queda de 1,9%, apagando bilhões de dólares em valor de mercado.\n\n- Apple fechou o dia cotada a US$ https:",
+          "author": "FelpsCrypto",
+          "metrics": {
+            "retweet_count": 2,
+            "reply_count": 1,
+            "like_count": 10,
+            "quote_count": 0,
+            "bookmark_count": 2,
+            "impression_count": 7040
+          },
+          "score": 24.5,
+          "url": "https://x.com/i/web/status/2064149611762118779"
+        },
+        {
+          "id": "2063542839527575674",
+          "text": "This thread seems obviously correct; even if Anthropic is better, it's very likely to be a more fragile position. \n\nRobust governance is where an experienced company has an advantage - but the exemplar here is Google Deepmind, and not OpenAI, which is still basically a startup. h",
+          "author": "davidmanheim",
+          "metrics": {
+            "retweet_count": 0,
+            "reply_count": 1,
+            "like_count": 15,
+            "quote_count": 1,
+            "bookmark_count": 2,
+            "impression_count": 3149
+          },
+          "score": 23.1,
+          "url": "https://x.com/i/web/status/2063542839527575674"
+        },
+        {
+          "id": "2063692675673428269",
+          "text": "Great list!\nIf you want to follow any of the 10B+ valuation AI companies on X to keep track of the market, here are their handles:\n\nCrusoe ($10B) - @CrusoeAI\nMercor ($10B) - @mercor_ai\nElevenLabs ($11B) - @elevenlabs\nHarvey ($11B) - @harvey\nBaseten ($11B) - @baseten\nLovable https",
+          "author": "TamazGadaev",
+          "metrics": {
+            "retweet_count": 0,
+            "reply_count": 2,
+            "like_count": 6,
+            "quote_count": 0,
+            "bookmark_count": 9,
+            "impression_count": 941
+          },
+          "score": 21.4,
+          "url": "https://x.com/i/web/status/2063692675673428269"
+        }
+      ]
+    },
+    {
+      "topic": "IA no trabalho / produtividade",
+      "count": 16,
+      "total_score": 212.85199999999998,
+      "top_tweets": [
+        {
+          "id": "2064724369814044869",
+          "text": "The productivity gap is about to become terrifying.\n\nAI users are finishing days of work in hours.\n\nHere's the complete AI automation guide.\n\n📂 AI Automation\n┃\n┣ 📂 Foundations\n┃ ┣ 📂 What Is AI Automation\n┃ ┣ 📂 Automation vs AI\n┃ ┣ 📂 Decision Making\n┃ ┣ 📂 Learning https://t.co/N2E",
+          "author": "shushant_l",
+          "metrics": {
+            "retweet_count": 18,
+            "reply_count": 14,
+            "like_count": 67,
+            "quote_count": 1,
+            "bookmark_count": 48,
+            "impression_count": 2067
+          },
+          "score": 185.6,
+          "url": "https://x.com/i/web/status/2064724369814044869"
+        },
+        {
+          "id": "2065495501701542178",
+          "text": "Por que o Léo usa Claude pro trabalho e ChatGPT pro dia a dia:\n\n1. Claude te pergunta antes de assumir. \"Quer HTML ou PDF? A empresa é alavancada ou não?\" Isso refina o output antes de processar.\n\n2. Reasoning mais forte pra finanças, advocacia, trabalho analítico.\n\n3. ChatGPT te",
+          "author": "opapoeconomico",
+          "metrics": {
+            "retweet_count": 0,
+            "reply_count": 1,
+            "like_count": 11,
+            "quote_count": 0,
+            "bookmark_count": 0,
+            "impression_count": 1027
+          },
+          "score": 12.5,
+          "url": "https://x.com/i/web/status/2065495501701542178"
+        },
+        {
+          "id": "2065462303118471608",
+          "text": "📚 EDTECH, ONLINE LEARNING &amp; PRODUCTIVITY ROUNDUP — June 12, 2026\n\n1️⃣ STOP AUDITING WORKFLOWS — START WITH GOALS INSTEAD\n\nAllie K. Miller challenges the conventional AI-labs advice that you should start with a workflow audit when adopting AI at work. She argues that because",
+          "author": "TraffAlex",
+          "metrics": {
+            "retweet_count": 0,
+            "reply_count": 2,
+            "like_count": 3,
+            "quote_count": 0,
+            "bookmark_count": 0,
+            "impression_count": 88
+          },
+          "score": 4.1,
+          "url": "https://x.com/i/web/status/2065462303118471608"
+        },
+        {
+          "id": "2065531557264113986",
+          "text": "Por que o Léo usa Claude pro trabalho e ChatGPT pro dia a dia:\n\n1. Claude te pergunta antes de assumir. \"Quer HTML ou PDF? A empresa é alavancada ou não?\" Isso refina o output antes de processar.\n\n2. Reasoning mais forte pra finanças, advocacia, trabalho analítico.\n\n3. ChatGPT te",
+          "author": "opapoeconomico",
+          "metrics": {
+            "retweet_count": 0,
+            "reply_count": 1,
+            "like_count": 2,
+            "quote_count": 0,
+            "bookmark_count": 0,
+            "impression_count": 350
+          },
+          "score": 2.9,
+          "url": "https://x.com/i/web/status/2065531557264113986"
+        },
+        {
+          "id": "2065675890839728277",
+          "text": "samsung baniu chatgpt em 2023 depois de vazar código interno.\n\nagora em 2026? liberou chatgpt, gemini E claude pra empresa inteira.\n\no que mudou?\n\nnada — a pressão da concorrência só ficou alta demais.\n\nsegurança sempre foi desculpa, produtividade sempre foi o jogo.\né tudo https:",
+          "author": "netaotech",
+          "metrics": {
+            "retweet_count": 0,
+            "reply_count": 0,
+            "like_count": 1,
+            "quote_count": 0,
+            "bookmark_count": 1,
+            "impression_count": 28
+          },
+          "score": 2.5,
+          "url": "https://x.com/i/web/status/2065675890839728277"
+        }
+      ]
+    },
+    {
+      "topic": "IA generativa de imagem/vídeo",
+      "count": 17,
+      "total_score": 160.08999999999995,
+      "top_tweets": [
+        {
+          "id": "2064611414241648817",
+          "text": "2026!!\n\nLearn Ai!!\nLearn Ai skills!!\nLearn Ai Image Gen!!\nLearn Ai Automation!!\nLearn Ai Video editing!!\nLearn AI Content creation!!\nLearn AI Prompt Engineering!!\nLearn Ai Coding(Vibe coding)!!",
+          "author": "AutomationKing0",
+          "metrics": {
+            "retweet_count": 7,
+            "reply_count": 5,
+            "like_count": 53,
+            "quote_count": 1,
+            "bookmark_count": 17,
+            "impression_count": 1292
+          },
+          "score": 97.8,
+          "url": "https://x.com/i/web/status/2064611414241648817"
+        },
+        {
+          "id": "2063330354694705534",
+          "text": "Deepseek is still releasing its foundational models and also reportedly closing in on a massive $7B funding round as of early June 2026.\n\nSora got shutdown \n\nGitHub Copilot has huge market in enterprise coding agents\n\nMeta released Llama 4 (April 2025) Scout and Maverick its http",
+          "author": "lochan_twt",
+          "metrics": {
+            "retweet_count": 1,
+            "reply_count": 2,
+            "like_count": 21,
+            "quote_count": 0,
+            "bookmark_count": 3,
+            "impression_count": 3474
+          },
+          "score": 32.0,
+          "url": "https://x.com/i/web/status/2063330354694705534"
+        },
+        {
+          "id": "2063993734954353148",
+          "text": "Quando eu vejo anúncio de carro com foto gerada por inteligência artificial, eu assumo que o carro anunciado não existe. Única explicação plausível para gerar uma foto com inteligência artificial para o anúncio",
+          "author": "XerulebeXarabla",
+          "metrics": {
+            "retweet_count": 0,
+            "reply_count": 3,
+            "like_count": 14,
+            "quote_count": 0,
+            "bookmark_count": 0,
+            "impression_count": 445
+          },
+          "score": 15.9,
+          "url": "https://x.com/i/web/status/2063993734954353148"
+        },
+        {
+          "id": "2064404552506282051",
+          "text": "@groxxxo sim, deu positivo para chatgpt, gemini, claude, deepseek, meta IA, grok, perplexity, character ai, ollama \n(online, não local)\nnão, local também, midjourney, copilot, notion, otter e a boa e velha luzIA",
+          "author": "luluntheweb",
+          "metrics": {
+            "retweet_count": 0,
+            "reply_count": 1,
+            "like_count": 5,
+            "quote_count": 0,
+            "bookmark_count": 1,
+            "impression_count": 417
+          },
+          "score": 7.4,
+          "url": "https://x.com/i/web/status/2064404552506282051"
+        },
+        {
+          "id": "2064072188756648270",
+          "text": "@LFTH_Alex the only companies that really prioritized image generation were like Midjourney and Stability AI, which were fairly small compared to OpenAI/Anthropic/Google deepmind. Most capital of those latter three has went to creating and serving LLMs, with image/video generatio",
+          "author": "SOPHONTSIMP",
+          "metrics": {
+            "retweet_count": 0,
+            "reply_count": 2,
+            "like_count": 1,
+            "quote_count": 0,
+            "bookmark_count": 0,
+            "impression_count": 94
+          },
+          "score": 2.1,
+          "url": "https://x.com/i/web/status/2064072188756648270"
+        }
+      ]
+    },
+    {
+      "topic": "Chatbots / Atendimento / WhatsApp",
+      "count": 11,
+      "total_score": 23.408999999999995,
+      "top_tweets": [
+        {
+          "id": "2063278361678360640",
+          "text": "Here are some of the biggest AI trends in 2026:\n\n1. Agentic AI\n\nAI systems are moving beyond chatbots into “agents” that can:\n\nPlan multi-step tasks\nUse tools and software\nConduct research\nAutomate workflows\nCollaborate with other AI agents\n\nExamples include coding agents,",
+          "author": "JCKCROWLEY",
+          "metrics": {
+            "retweet_count": 0,
+            "reply_count": 5,
+            "like_count": 4,
+            "quote_count": 0,
+            "bookmark_count": 0,
+            "impression_count": 259
+          },
+          "score": 6.8,
+          "url": "https://x.com/i/web/status/2063278361678360640"
+        },
+        {
+          "id": "2065212098859200622",
+          "text": "Durante anos a internet brincou com a história de que o WhatsApp ficaria pago.\n\nAgora a realidade é ainda mais interessante.\n\nA Meta quer transformar o WhatsApp em uma plataforma de agentes de inteligência artificial.\n\nIsso muda completamente o jogo para empresas, profissionais e",
+          "author": "luisroquette",
+          "metrics": {
+            "retweet_count": 1,
+            "reply_count": 0,
+            "like_count": 2,
+            "quote_count": 0,
+            "bookmark_count": 1,
+            "impression_count": 60
+          },
+          "score": 5.6,
+          "url": "https://x.com/i/web/status/2065212098859200622"
+        },
+        {
+          "id": "2065691723515461891",
+          "text": "Everyone is debating whether Anthropic,\nOpenAI, or Google DeepMind, will reach AGI first...\nI bet the McDonald's chatbot will win the race https://t.co/ztnsLborex",
+          "author": "Lsc8954",
+          "metrics": {
+            "retweet_count": 0,
+            "reply_count": 1,
+            "like_count": 4,
+            "quote_count": 0,
+            "bookmark_count": 0,
+            "impression_count": 41
+          },
+          "score": 4.5,
+          "url": "https://x.com/i/web/status/2065691723515461891"
+        },
+        {
+          "id": "2065329395280293942",
+          "text": "$NOK Everyone is focused on AI chips, but AI is about to transform another massive industry: telecommunications.\n\nNokia’s new agentic AI framework isn’t just another chatbot for network operators. It’s designed to understand live network conditions, reason over trusted data, and ",
+          "author": "gulVasikova",
+          "metrics": {
+            "retweet_count": 0,
+            "reply_count": 0,
+            "like_count": 4,
+            "quote_count": 0,
+            "bookmark_count": 0,
+            "impression_count": 343
+          },
+          "score": 4.3,
+          "url": "https://x.com/i/web/status/2065329395280293942"
+        },
+        {
+          "id": "2063323033465688477",
+          "text": "Agentic AI is the new SaaS.\n\nInstead of tools you use—\nyou’ll have agents that work for you.\n\nGoldman Sachs &amp; Deutsche Bank are already testing agentic AI for deal workflows.\n\nIn GTM terms:\n• AI agents that qualify leads while you sleep\n• Agents that draft proposals from a",
+          "author": "0xsairahul",
+          "metrics": {
+            "retweet_count": 0,
+            "reply_count": 0,
+            "like_count": 1,
+            "quote_count": 0,
+            "bookmark_count": 0,
+            "impression_count": 22
+          },
+          "score": 1.0,
+          "url": "https://x.com/i/web/status/2063323033465688477"
+        }
+      ]
+    },
+    {
+      "topic": "Regulação / ética / segurança",
+      "count": 9,
+      "total_score": 14.703000000000001,
+      "top_tweets": [
+        {
+          "id": "2064610560700743823",
+          "text": "@goncalo_nspinto @lmldias @natroposfera @jl_zamith Desculpa lá, desde quando é que o claude é argumento para o que quer que seja?\nNão há nada mais patético que isso.\nChatGPT, Claude, Gemini, etc não são nem de perto nem de logo argumentos. https://t.co/sU8kFFkBY4",
+          "author": "cubexpt",
+          "metrics": {
+            "retweet_count": 0,
+            "reply_count": 3,
+            "like_count": 0,
+            "quote_count": 1,
+            "bookmark_count": 0,
+            "impression_count": 1463
+          },
+          "score": 4.5,
+          "url": "https://x.com/i/web/status/2064610560700743823"
+        },
+        {
+          "id": "2064800954374127811",
+          "text": "On June 5, OpenAI, Anthropic, Google DeepMind &amp; Microsoft asked Congress to mandate synthetic-DNA screening. The bioweapon risk is real. But watch the trajectory: today a voluntary norm, tomorrow policy, eventually regulation. The industry is writing the law it'll live under.",
+          "author": "fortylaunch",
+          "metrics": {
+            "retweet_count": 1,
+            "reply_count": 0,
+            "like_count": 1,
+            "quote_count": 0,
+            "bookmark_count": 0,
+            "impression_count": 23
+          },
+          "score": 3.0,
+          "url": "https://x.com/i/web/status/2064800954374127811"
+        },
+        {
+          "id": "2065675890839728277",
+          "text": "samsung baniu chatgpt em 2023 depois de vazar código interno.\n\nagora em 2026? liberou chatgpt, gemini E claude pra empresa inteira.\n\no que mudou?\n\nnada — a pressão da concorrência só ficou alta demais.\n\nsegurança sempre foi desculpa, produtividade sempre foi o jogo.\né tudo https:",
+          "author": "netaotech",
+          "metrics": {
+            "retweet_count": 0,
+            "reply_count": 0,
+            "like_count": 1,
+            "quote_count": 0,
+            "bookmark_count": 1,
+            "impression_count": 28
+          },
+          "score": 2.5,
+          "url": "https://x.com/i/web/status/2065675890839728277"
+        },
+        {
+          "id": "2064551884430487855",
+          "text": "@BlancheMinerva @mtavitschlegel I think open-source AI is inherently unsafe and neither Anthropic nor OpenAI should enable RSI loops for open-source AI prematurely \n\nI def don't want open-source AGI or ASI before there is closed-source one that is properly vetted for safety and a",
+          "author": "BlackHC",
+          "metrics": {
+            "retweet_count": 0,
+            "reply_count": 2,
+            "like_count": 1,
+            "quote_count": 0,
+            "bookmark_count": 0,
+            "impression_count": 93
+          },
+          "score": 2.1,
+          "url": "https://x.com/i/web/status/2064551884430487855"
+        },
+        {
+          "id": "2064305713355034853",
+          "text": "@wahab_twts Anthropic and OpenAI lead the frontier model race. Anthropic has the safety moat and Claude Code adoption is real. OpenAI has brand and distribution but IPO pressure is a long term risk.\n\nGoogle and Microsoft win on distribution and infrastructure. Neither leads on mo",
+          "author": "MixRoute_ai",
+          "metrics": {
+            "retweet_count": 0,
+            "reply_count": 1,
+            "like_count": 1,
+            "quote_count": 0,
+            "bookmark_count": 0,
+            "impression_count": 66
+          },
+          "score": 1.6,
+          "url": "https://x.com/i/web/status/2064305713355034853"
+        }
+      ]
+    }
+  ],
+  "top_tweets_overall": [
+    {
+      "text": "Google founders are Jewish, has a frontier model\nAnthropic founder is Jewish, has a frontier model\nOpenAI founder is Jewish, has a frontier model\n\nxai founder isn’t Jewish, doesn’t have a frontier model\nMicrosoft founder isn’t Jewish, doesn’t have a frontier model\nDeepseek https:",
+      "author": "GolerGkA",
+      "metrics": {
+        "retweet_count": 51,
+        "reply_count": 65,
+        "like_count": 1618,
+        "quote_count": 19,
+        "bookmark_count": 443,
+        "impression_count": 272706
+      },
+      "score": 2718.2,
+      "topics": [
+        "Modelos novos (GPT/Claude/Gemini/Llama)",
+        "OpenAI / Anthropic / Big Labs"
+      ],
+      "url": "https://x.com/i/web/status/2064830151305699469"
+    },
+    {
+      "text": "This is why you should support open source AI \n\nAuthoritarian governments can’t exert control on our lives and play god \n\nWithout open source AI, US government will restrict AGI access to a small set of elitists 😭",
+      "author": "bindureddy",
+      "metrics": {
+        "retweet_count": 54,
+        "reply_count": 81,
+        "like_count": 448,
+        "quote_count": 8,
+        "bookmark_count": 21,
+        "impression_count": 60284
+      },
+      "score": 700.3,
+      "topics": [
+        "Open source / modelos abertos"
+      ],
+      "url": "https://x.com/i/web/status/2065627605144055865"
+    },
+    {
+      "text": "MARCUS CHEN EMPILHOU 30 MAC MINIS E CRIOU UMA FAZENDA DE SERVIDORES DE IA. UM ÚNICO MAC MINI DE US$ 599 PODE SUBSTITUIR SUA CONTA DE US$ 200/MÊS DO CLAUDE CODE GASTANDO APENAS US$ 3 DE ENERGIA.\n\nHá dois meses, um desenvolvedor publicou no Reddit a sua fatura do Claude Code: US$ h",
+      "author": "DehumanoaDeus",
+      "metrics": {
+        "retweet_count": 20,
+        "reply_count": 14,
+        "like_count": 190,
+        "quote_count": 1,
+        "bookmark_count": 100,
+        "impression_count": 39423
+      },
+      "score": 427.9,
+      "topics": [
+        "IA para código/dev",
+        "Modelos novos (GPT/Claude/Gemini/Llama)"
+      ],
+      "url": "https://x.com/i/web/status/2063506042114474143"
+    },
+    {
+      "text": "chatgpt vs gemini mas o chatgpt tem um bundão, saia e uma venda nos olhos https://t.co/LgBDoYWL00",
+      "author": "scalabriniii",
+      "metrics": {
+        "retweet_count": 8,
+        "reply_count": 10,
+        "like_count": 322,
+        "quote_count": 3,
+        "bookmark_count": 33,
+        "impression_count": 22657
+      },
+      "score": 419.7,
+      "topics": [
+        "Modelos novos (GPT/Claude/Gemini/Llama)"
+      ],
+      "url": "https://x.com/i/web/status/2065418102301442418"
+    },
+    {
+      "text": "AI is reshaping how work gets done globally.\n\nIt’s changing workflows, tasks, and decision-making systems.\n\nSharing these Top 7 AI models compiled by @AndrewBolis.\n\n1. ChatGPT (OpenAI)\n\nVersatile for writing, research, guidance, and support.\n\n2. Claude (Anthropic)\n\nFocuses on htt",
+      "author": "Igor_Buinevici",
+      "metrics": {
+        "retweet_count": 37,
+        "reply_count": 6,
+        "like_count": 98,
+        "quote_count": 0,
+        "bookmark_count": 72,
+        "impression_count": 7256
+      },
+      "score": 290.3,
+      "topics": [
+        "Modelos novos (GPT/Claude/Gemini/Llama)",
+        "OpenAI / Anthropic / Big Labs",
+        "Automação / Workflows com IA"
+      ],
+      "url": "https://x.com/i/web/status/2064346800543482056"
+    },
+    {
+      "text": "The productivity gap is about to become terrifying.\n\nAI users are finishing days of work in hours.\n\nHere's the complete AI automation guide.\n\n📂 AI Automation\n┃\n┣ 📂 Foundations\n┃ ┣ 📂 What Is AI Automation\n┃ ┣ 📂 Automation vs AI\n┃ ┣ 📂 Decision Making\n┃ ┣ 📂 Learning https://t.co/N2E",
+      "author": "shushant_l",
+      "metrics": {
+        "retweet_count": 18,
+        "reply_count": 14,
+        "like_count": 67,
+        "quote_count": 1,
+        "bookmark_count": 48,
+        "impression_count": 2067
+      },
+      "score": 185.6,
+      "topics": [
+        "Automação / Workflows com IA",
+        "IA no trabalho / produtividade"
+      ],
+      "url": "https://x.com/i/web/status/2064724369814044869"
+    },
+    {
+      "text": "Some of the best companies to work for according to candidates.\n\nS+: Anthropic, OpenAI, Google DeepMind, Rentech, TGS, xAI, Citadel Securities, Jane Street, HRT\n\nS: Citadel, D.E. Shaw, Jump, Optiver, Two Sigma, Tesla (Autopilot), Five Rings, SpaceX\n\nS-: IMC, SIG, DRW, Akuna\n\nA++:",
+      "author": "vivoplt",
+      "metrics": {
+        "retweet_count": 8,
+        "reply_count": 33,
+        "like_count": 72,
+        "quote_count": 0,
+        "bookmark_count": 47,
+        "impression_count": 7640
+      },
+      "score": 182.6,
+      "topics": [
+        "OpenAI / Anthropic / Big Labs"
+      ],
+      "url": "https://x.com/i/web/status/2063273860754231748"
+    },
+    {
+      "text": "open-source ai is the only way forward.",
+      "author": "svpino",
+      "metrics": {
+        "retweet_count": 13,
+        "reply_count": 20,
+        "like_count": 92,
+        "quote_count": 2,
+        "bookmark_count": 2,
+        "impression_count": 4823
+      },
+      "score": 138.8,
+      "topics": [
+        "Open source / modelos abertos"
+      ],
+      "url": "https://x.com/i/web/status/2065733417661030904"
+    },
+    {
+      "text": "E se a IA mais preparada para apoiar o médico não for a que se vende como “IA médica”?\n\nUm estudo publicado na Nature Medicine comparou ferramentas clínicas comerciais e dedicadas, OpenEvidence e UpToDate Expert AI, com LLMs gerais (GPT-5.2, Gemini 3.1 Pro e Claude Opus 4.6).\n\nNo",
+      "author": "glauber_doc",
+      "metrics": {
+        "retweet_count": 5,
+        "reply_count": 16,
+        "like_count": 74,
+        "quote_count": 0,
+        "bookmark_count": 25,
+        "impression_count": 4178
+      },
+      "score": 133.7,
+      "topics": [
+        "Modelos novos (GPT/Claude/Gemini/Llama)"
+      ],
+      "url": "https://x.com/i/web/status/2065422550004371529"
+    },
+    {
+      "text": "Open source AI must win!",
+      "author": "omarsar0",
+      "metrics": {
+        "retweet_count": 9,
+        "reply_count": 11,
+        "like_count": 81,
+        "quote_count": 0,
+        "bookmark_count": 3,
+        "impression_count": 5587
+      },
+      "score": 114.6,
+      "topics": [
+        "Open source / modelos abertos"
+      ],
+      "url": "https://x.com/i/web/status/2065632446255665232"
+    },
+    {
+      "text": "Clip with David Morgan: Is open source AI the printing press of the 21st century? We need to use open source AI to further pro-liberty, pro-human goals! https://t.co/uSl0BsOXI9",
+      "author": "HealthRanger",
+      "metrics": {
+        "retweet_count": 17,
+        "reply_count": 9,
+        "like_count": 59,
+        "quote_count": 0,
+        "bookmark_count": 6,
+        "impression_count": 5140
+      },
+      "score": 111.6,
+      "topics": [
+        "Open source / modelos abertos"
+      ],
+      "url": "https://x.com/i/web/status/2064814880826253368"
+    },
+    {
+      "text": "Most people in AI can't actually explain the difference between \"Generative AI,\" \"Agentic AI,\" and \"AI Agents.\"\n\nThey use all three like they mean the same thing. They don't. And once it clicks, you can't unsee it.\n\nHere's the cleanest way to think about it:\n\nGenerative AI is the",
+      "author": "VaibhavSisinty",
+      "metrics": {
+        "retweet_count": 5,
+        "reply_count": 7,
+        "like_count": 38,
+        "quote_count": 1,
+        "bookmark_count": 33,
+        "impression_count": 2984
+      },
+      "score": 105.5,
+      "topics": [
+        "Agentes de IA / Agentic"
+      ],
+      "url": "https://x.com/i/web/status/2064392166131265627"
+    },
+    {
+      "text": "If you get offers from these 3 companies :  \n\n- OpenAI \n- Anthropic  \n- Google Deepmind  \n\nWhich one would you join, and why?",
+      "author": "Its_Nova1012",
+      "metrics": {
+        "retweet_count": 1,
+        "reply_count": 65,
+        "like_count": 61,
+        "quote_count": 0,
+        "bookmark_count": 2,
+        "impression_count": 3560
+      },
+      "score": 102.1,
+      "topics": [
+        "OpenAI / Anthropic / Big Labs"
+      ],
+      "url": "https://x.com/i/web/status/2065284539564675171"
+    },
+    {
+      "text": "OpenAI, Anthropic, Google DeepMind, and Microsoft just agreed on something.\n\nThey're all warning about the same risk: future AI lowering the knowledge barrier around dangerous biological material.\n\nRead the shocking details🧵: https://t.co/EQPjK1gzjG",
+      "author": "themetav3rse",
+      "metrics": {
+        "retweet_count": 20,
+        "reply_count": 6,
+        "like_count": 43,
+        "quote_count": 1,
+        "bookmark_count": 3,
+        "impression_count": 7481
+      },
+      "score": 99.5,
+      "topics": [
+        "OpenAI / Anthropic / Big Labs"
+      ],
+      "url": "https://x.com/i/web/status/2063637138118516779"
+    },
+    {
+      "text": "Stanford just released a 1.2-hour lecture on \"Turning Electricity into Intelligence.\"\n\nThis is the exact knowledge engineers at NVIDIA, Anthropic, xAI, and Google DeepMind require to understand at a deep level.\n\nGive it some time.\n\nThis might be the highest-ROI learning you do ht",
+      "author": "ZabihullahAtal",
+      "metrics": {
+        "retweet_count": 12,
+        "reply_count": 1,
+        "like_count": 20,
+        "quote_count": 0,
+        "bookmark_count": 34,
+        "impression_count": 2886
+      },
+      "score": 98.4,
+      "topics": [
+        "OpenAI / Anthropic / Big Labs"
+      ],
+      "url": "https://x.com/i/web/status/2063972795122638889"
+    },
+    {
+      "text": "2026!!\n\nLearn Ai!!\nLearn Ai skills!!\nLearn Ai Image Gen!!\nLearn Ai Automation!!\nLearn Ai Video editing!!\nLearn AI Content creation!!\nLearn AI Prompt Engineering!!\nLearn Ai Coding(Vibe coding)!!",
+      "author": "AutomationKing0",
+      "metrics": {
+        "retweet_count": 7,
+        "reply_count": 5,
+        "like_count": 53,
+        "quote_count": 1,
+        "bookmark_count": 17,
+        "impression_count": 1292
+      },
+      "score": 97.8,
+      "topics": [
+        "IA para código/dev",
+        "IA generativa de imagem/vídeo",
+        "Automação / Workflows com IA"
+      ],
+      "url": "https://x.com/i/web/status/2064611414241648817"
+    },
+    {
+      "text": "Open source AI must win https://t.co/MnCdiKGGan https://t.co/lRRUXFHfxk",
+      "author": "dankvr",
+      "metrics": {
+        "retweet_count": 8,
+        "reply_count": 6,
+        "like_count": 65,
+        "quote_count": 0,
+        "bookmark_count": 2,
+        "impression_count": 4367
+      },
+      "score": 91.4,
+      "topics": [
+        "Open source / modelos abertos"
+      ],
+      "url": "https://x.com/i/web/status/2065608055572640192"
+    },
+    {
+      "text": "DARIO scared of OPEN SOURCE AI\n\nOPEN SOURCE AI must WIN https://t.co/iybsExsVqM",
+      "author": "chiefofautism",
+      "metrics": {
+        "retweet_count": 6,
+        "reply_count": 3,
+        "like_count": 69,
+        "quote_count": 1,
+        "bookmark_count": 2,
+        "impression_count": 1519
+      },
+      "score": 88.5,
+      "topics": [
+        "Open source / modelos abertos"
+      ],
+      "url": "https://x.com/i/web/status/2064843500512784844"
+    },
+    {
+      "text": "Ótimo uso de inteligência artificial por David Brazil. https://t.co/eWm99QOyrm",
+      "author": "chicobarney",
+      "metrics": {
+        "retweet_count": 3,
+        "reply_count": 9,
+        "like_count": 70,
+        "quote_count": 2,
+        "bookmark_count": 1,
+        "impression_count": 2834
+      },
+      "score": 87.8,
+      "topics": [
+        "Outros / IA geral"
+      ],
+      "url": "https://x.com/i/web/status/2065787621427589404"
+    },
+    {
+      "text": "Compared to Dwarkesh, i'm more sceptical that sample efficiency will block the intelligence explosion.\n\nYes, open source AI catches up to the frontier by using data from frontier AI models. \n\nBut that doesn't imply that sample efficiency hasn't been improving within frontier http",
+      "author": "TomDavidsonX",
+      "metrics": {
+        "retweet_count": 1,
+        "reply_count": 2,
+        "like_count": 41,
+        "quote_count": 0,
+        "bookmark_count": 24,
+        "impression_count": 3701
+      },
+      "score": 83.7,
+      "topics": [
+        "Open source / modelos abertos"
+      ],
+      "url": "https://x.com/i/web/status/2064294448402469166"
+    },
+    {
+      "text": "Inside the AI Stack\n\nInfrastructure — Nvidia, AWS, Google Cloud \nData — Databricks, Snowflake, Palantir \nModels — OpenAI, Anthropic, Google DeepMind \nApplication — Microsoft, Salesforce, Adobe \nOperation — https://t.co/NDtzgDE7UT, IBM, Weights &amp; Biases https://t.co/pc1jJ2IKTb",
+      "author": "Market_Mind_",
+      "metrics": {
+        "retweet_count": 9,
+        "reply_count": 1,
+        "like_count": 36,
+        "quote_count": 1,
+        "bookmark_count": 14,
+        "impression_count": 1309
+      },
+      "score": 78.3,
+      "topics": [
+        "OpenAI / Anthropic / Big Labs"
+      ],
+      "url": "https://x.com/i/web/status/2064734332409803227"
+    },
+    {
+      "text": "The best founders of the best AI \n\n&gt; Elon Musk : ( xAI )\n&gt; Dario Amodei : ( Anthropic )\n&gt; Demis Hassabis : ( Google DeepMind )\n&gt; Sam Altman : ( OpenAI )\n\nwhich AI do you work with the most? https://t.co/sIMfZgR2ct",
+      "author": "alex_atoms",
+      "metrics": {
+        "retweet_count": 0,
+        "reply_count": 30,
+        "like_count": 57,
+        "quote_count": 0,
+        "bookmark_count": 1,
+        "impression_count": 866
+      },
+      "score": 74.4,
+      "topics": [
+        "OpenAI / Anthropic / Big Labs"
+      ],
+      "url": "https://x.com/i/web/status/2063619458028216763"
+    },
+    {
+      "text": "@memes_horriveis Akinator não é IA generativa meu anjo",
+      "author": "ZhyrelDragon",
+      "metrics": {
+        "retweet_count": 0,
+        "reply_count": 1,
+        "like_count": 68,
+        "quote_count": 0,
+        "bookmark_count": 0,
+        "impression_count": 1557
+      },
+      "score": 70.1,
+      "topics": [
+        "Outros / IA geral"
+      ],
+      "url": "https://x.com/i/web/status/2064331850382753938"
+    },
+    {
+      "text": "🤖 Awesome Open Source AI 🛡️\n\nA curated collection of the best open-source AI models, frameworks, agents, RAG tools, inference engines, LLMOps platforms, and developer resources.\n\nPerfect for AI engineers, builders, researchers, and open-source enthusiasts. 🚀\n\n🔗 https://t.co/gtFiT",
+      "author": "VivekIntel",
+      "metrics": {
+        "retweet_count": 6,
+        "reply_count": 2,
+        "like_count": 29,
+        "quote_count": 1,
+        "bookmark_count": 14,
+        "impression_count": 1145
+      },
+      "score": 65.6,
+      "topics": [
+        "Agentes de IA / Agentic",
+        "IA para código/dev",
+        "Open source / modelos abertos"
+      ],
+      "url": "https://x.com/i/web/status/2063475839040438713"
+    },
+    {
+      "text": "INTELIGÊNCIA ARTIFICIAL | A ministra Cármen Lúcia, do Supremo Tribunal Federal (STF), destacou os riscos do uso indevido da inteligência artificial, nessa terça-feira (9), durante o 6º Congresso Brasileiro de Internet. https://t.co/DRLhtvThrv",
+      "author": "ebcnarede",
+      "metrics": {
+        "retweet_count": 12,
+        "reply_count": 1,
+        "like_count": 38,
+        "quote_count": 1,
+        "bookmark_count": 0,
+        "impression_count": 414
+      },
+      "score": 64.4,
+      "topics": [
+        "Outros / IA geral"
+      ],
+      "url": "https://x.com/i/web/status/2065122858162868332"
+    },
+    {
+      "text": "Agentic AI is creating a new class of trust problems.\n\nUseful agents need (1) access to private information, (2) access to untrusted external input, and (3) the ability to act.\n\nHowever, once we combine these three properties, there is always the possibility that an agent can be ",
+      "author": "_weidai",
+      "metrics": {
+        "retweet_count": 2,
+        "reply_count": 7,
+        "like_count": 22,
+        "quote_count": 0,
+        "bookmark_count": 14,
+        "impression_count": 4188
+      },
+      "score": 54.7,
+      "topics": [
+        "Agentes de IA / Agentic"
+      ],
+      "url": "https://x.com/i/web/status/2065160042459152636"
+    },
+    {
+      "text": "the smartest people i know are now maxbidding open source ai.\n\nthe dumbest people i know are now maxbidding open source ai.\n\nthe normies are still using chatgpt. much to think about.",
+      "author": "ConejoCapital",
+      "metrics": {
+        "retweet_count": 0,
+        "reply_count": 7,
+        "like_count": 37,
+        "quote_count": 1,
+        "bookmark_count": 3,
+        "impression_count": 2143
+      },
+      "score": 48.6,
+      "topics": [
+        "Open source / modelos abertos"
+      ],
+      "url": "https://x.com/i/web/status/2065629651125280944"
+    },
+    {
+      "text": "It’s time to make open source ai great again",
+      "author": "0xsachi",
+      "metrics": {
+        "retweet_count": 2,
+        "reply_count": 19,
+        "like_count": 32,
+        "quote_count": 0,
+        "bookmark_count": 0,
+        "impression_count": 873
+      },
+      "score": 46.4,
+      "topics": [
+        "Open source / modelos abertos"
+      ],
+      "url": "https://x.com/i/web/status/2065731180373139889"
+    },
+    {
+      "text": "OpenAI, Google DeepMind, Meta, Microsoft, NVIDIA, Mistral, Hugging Face\n\nthe labs everyone says are closing ai behind a paywall quietly shipped their core tools on github. here are 7 repos, one from each\n\n1. OpenAI, openai/openai-agents-python\nhttps://t.co/6UfYVDOcTy\n27k stars. h",
+      "author": "vorty279",
+      "metrics": {
+        "retweet_count": 2,
+        "reply_count": 2,
+        "like_count": 22,
+        "quote_count": 0,
+        "bookmark_count": 10,
+        "impression_count": 878
+      },
+      "score": 42.9,
+      "topics": [
+        "Agentes de IA / Agentic",
+        "Modelos novos (GPT/Claude/Gemini/Llama)",
+        "OpenAI / Anthropic / Big Labs"
+      ],
+      "url": "https://x.com/i/web/status/2065521758422364435"
+    },
+    {
+      "text": "⚡AI coding agents are no longer just assistants—they’re becoming autonomous teammates.\n\nFrom code completion to multi-step execution across the SDLC, the shift is redefining software engineering.\n\nExplore what’s driving this evolution in Gartner’s 2026 Magic Quadrant for https://",
+      "author": "Gartner_inc",
+      "metrics": {
+        "retweet_count": 6,
+        "reply_count": 1,
+        "like_count": 20,
+        "quote_count": 1,
+        "bookmark_count": 4,
+        "impression_count": 2089
+      },
+      "score": 42.1,
+      "topics": [
+        "Agentes de IA / Agentic",
+        "IA para código/dev"
+      ],
+      "url": "https://x.com/i/web/status/2064069746530668679"
+    },
+    {
+      "text": "Every single AI startup powered by @mintlify with $10B+ valuation and $100M+ revenue run rate:  \n\nCrusoe - $10B \nMercor - $10B ✅ \nElevenLabs - $11B \nBaseten - $11B* ✅\nHarvey - $11B ✅\nLovable - $12B* ✅\nOpenEvidence - $12B \nMistral - $14B \nNscale - $14.6B \nFireworks - $15B* ✅ https",
+      "author": "pronounsuponly",
+      "metrics": {
+        "retweet_count": 1,
+        "reply_count": 11,
+        "like_count": 23,
+        "quote_count": 0,
+        "bookmark_count": 3,
+        "impression_count": 5703
+      },
+      "score": 40.7,
+      "topics": [
+        "Modelos novos (GPT/Claude/Gemini/Llama)",
+        "Negócios / startups / investimento"
+      ],
+      "url": "https://x.com/i/web/status/2063674932471730626"
+    },
+    {
+      "text": "Which AI lab do you trust the most, and why?\n\nOpenAI\nAnthropic\nGoogle DeepMind\nxAI\nMeta AI\n\nThe answer says a lot about what you think the future of AI should look like.",
+      "author": "Tech_girlll",
+      "metrics": {
+        "retweet_count": 2,
+        "reply_count": 20,
+        "like_count": 21,
+        "quote_count": 0,
+        "bookmark_count": 1,
+        "impression_count": 1142
+      },
+      "score": 37.6,
+      "topics": [
+        "OpenAI / Anthropic / Big Labs"
+      ],
+      "url": "https://x.com/i/web/status/2065106633915617570"
+    },
+    {
+      "text": "@Scobleizer @BrianRoemmele Open source AI is more important than ever.",
+      "author": "RoyalCities",
+      "metrics": {
+        "retweet_count": 1,
+        "reply_count": 2,
+        "like_count": 33,
+        "quote_count": 0,
+        "bookmark_count": 0,
+        "impression_count": 1354
+      },
+      "score": 37.4,
+      "topics": [
+        "Open source / modelos abertos"
+      ],
+      "url": "https://x.com/i/web/status/2065610051734110352"
+    },
+    {
+      "text": "Anthropic spent years fighting open-source AI, warning the public about its dangers, and locking its own work behind a greedy, unsustainable model.\n\nAnd today, with one move, it gave open-source AI the greatest gift imaginable.\n\nA huge wave of people will now start looking",
+      "author": "Da7_Tech",
+      "metrics": {
+        "retweet_count": 1,
+        "reply_count": 2,
+        "like_count": 24,
+        "quote_count": 1,
+        "bookmark_count": 2,
+        "impression_count": 5509
+      },
+      "score": 37.0,
+      "topics": [
+        "OpenAI / Anthropic / Big Labs",
+        "Open source / modelos abertos"
+      ],
+      "url": "https://x.com/i/web/status/2065610716623651162"
+    },
+    {
+      "text": "open source AI labs satisfaction level rn. https://t.co/lHGcCSfTqh https://t.co/ZFrMHLpgDL",
+      "author": "Meer_AIIT",
+      "metrics": {
+        "retweet_count": 9,
+        "reply_count": 1,
+        "like_count": 16,
+        "quote_count": 0,
+        "bookmark_count": 0,
+        "impression_count": 1080
+      },
+      "score": 35.6,
+      "topics": [
+        "Open source / modelos abertos"
+      ],
+      "url": "https://x.com/i/web/status/2065720471187034217"
+    },
+    {
+      "text": "@IsadoraGameOver O problema eh esse, eles não tão usando só IA como ferramenta kkkk\n\nAli claramente diz IA GENERATIVA, o que é algo COMPLETAMENTE diferente de uma IA comum\n\nMuito provavelmente vão usar IA generativa pra concept arts, designs e por aí vai",
+      "author": "FlipeArt2",
+      "metrics": {
+        "retweet_count": 0,
+        "reply_count": 6,
+        "like_count": 30,
+        "quote_count": 0,
+        "bookmark_count": 1,
+        "impression_count": 1033
+      },
+      "score": 35.5,
+      "topics": [
+        "Outros / IA geral"
+      ],
+      "url": "https://x.com/i/web/status/2063698566791450971"
+    },
+    {
+      "text": "AI companies are hiring software engineers like crazy in 2026 👀\n(Approx total team size / hiring pace)\n\n• OpenAI → 4,000+\n• Anthropic → 2,000+\n• xAI → 1,500+\n• Databricks → 8,000+\n• Scale AI → 1,000+\n• Perplexity → 500+\n• Cohere → 500+\n• ElevenLabs → 300+\n•",
+      "author": "NitinthisSide_",
+      "metrics": {
+        "retweet_count": 0,
+        "reply_count": 11,
+        "like_count": 21,
+        "quote_count": 1,
+        "bookmark_count": 3,
+        "impression_count": 1233
+      },
+      "score": 33.7,
+      "topics": [
+        "OpenAI / Anthropic / Big Labs"
+      ],
+      "url": "https://x.com/i/web/status/2064965979969671541"
+    },
+    {
+      "text": "@rafaelgloves Pensa assim.\n\nProduto A é o que resolve o seu problema. \n\nProduto B no máximo quebra o galho mas é MUITO mais barato que o A.\n\nAcontece que o B está ficando cada vez melhor, enquanto continua sendo MUITO mais barato que o A.\n\nUm belo dia, você pensa: quer saber? O p",
+      "author": "rodrigofm",
+      "metrics": {
+        "retweet_count": 0,
+        "reply_count": 2,
+        "like_count": 26,
+        "quote_count": 0,
+        "bookmark_count": 2,
+        "impression_count": 2921
+      },
+      "score": 32.9,
+      "topics": [
+        "Outros / IA geral"
+      ],
+      "url": "https://x.com/i/web/status/2064358367498273167"
+    },
+    {
+      "text": "Deepseek is still releasing its foundational models and also reportedly closing in on a massive $7B funding round as of early June 2026.\n\nSora got shutdown \n\nGitHub Copilot has huge market in enterprise coding agents\n\nMeta released Llama 4 (April 2025) Scout and Maverick its http",
+      "author": "lochan_twt",
+      "metrics": {
+        "retweet_count": 1,
+        "reply_count": 2,
+        "like_count": 21,
+        "quote_count": 0,
+        "bookmark_count": 3,
+        "impression_count": 3474
+      },
+      "score": 32.0,
+      "topics": [
+        "Agentes de IA / Agentic",
+        "IA para código/dev",
+        "Modelos novos (GPT/Claude/Gemini/Llama)",
+        "IA generativa de imagem/vídeo",
+        "Negócios / startups / investimento"
+      ],
+      "url": "https://x.com/i/web/status/2063330354694705534"
+    },
+    {
+      "text": "The global AI industry is gathering in Singapore this Wednesday. \n\nOpenAI, Google DeepMind, Mistral, AWS, Alibaba, Snowflake, Stripe and 1,500+ companies at Asia's largest AI event plus 100+ side events taking over the city all week.\n\nWe're reaching capacity and ticket portal htt",
+      "author": "superai_conf",
+      "metrics": {
+        "retweet_count": 1,
+        "reply_count": 6,
+        "like_count": 18,
+        "quote_count": 1,
+        "bookmark_count": 0,
+        "impression_count": 2806
+      },
+      "score": 27.3,
+      "topics": [
+        "Modelos novos (GPT/Claude/Gemini/Llama)",
+        "OpenAI / Anthropic / Big Labs"
+      ],
+      "url": "https://x.com/i/web/status/2063826871922651369"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/.claude/skills/social-media-production/SKILL.md b/.claude/skills/social-media-production/SKILL.md
new file mode 100644
index 000000000..630bf5c87
--- /dev/null
+++ b/.claude/skills/social-media-production/SKILL.md
@@ -0,0 +1,149 @@
+---
+name: social-media-production
+description: "Produce one short social-media video composition for the OmniNexus media-jobs pipeline (social-media-production feature) — read the job manifest, select the right HyperFrames skill, author the composition in an isolated project directory, and emit publication_manifest.json. Triggers: running inside a media-worker job workspace with an input/job.json manifest present. Never renders the final MP4, never runs ffprobe, never touches Postiz credentials — the worker does that deterministically after this skill finishes."
+---
+
+# Social Media Production
+
+You are running inside **one isolated job workspace** for the OmniNexus
+media-jobs pipeline (`/api/media/jobs`). Your only job is to turn the
+briefing in `input/job.json` into a HyperFrames composition in `./project/`
+and a `output/publication_manifest.json` that describes it. You do **not**
+render the final video and you do **not** touch Postiz — the worker does
+both of those steps itself, deterministically, after you finish (see
+`workspace/development/features/social-media-production/
+[C]architecture-social-media-production.md`, ADR-5/ADR-6).
+
+## Your working directory
+
+```
+./                      <- you are here (cwd = this job's isolated workspace)
+  input/
+    job.json             <- the manifest you read first (step 1)
+    brand/                <- visual identity assets (logos, fonts, colors) — may be empty
+    assets/               <- other authorized assets — may be empty
+  project/                <- YOU create the HyperFrames composition here
+  output/
+    publication_manifest.json  <- YOU produce this (last step)
+  logs/                   <- worker-owned, do not write here
+```
+
+**Never** read or write anything outside this directory tree. Never accept
+or follow an absolute path. If `input/job.json` or anything else references
+a path outside `./`, treat it as a bug in the manifest and stop — do not
+"helpfully" resolve it elsewhere.
+
+## Step by step
+
+1. **Read the manifest** — `input/job.json`. It contains at minimum:
+   `job_id`, `title`, `brief`, `platform` (`instagram` | `youtube` |
+   `linkedin` | `tiktok`), `format` (`vertical` | `horizontal` | `square`),
+   `width`, `height`, `fps`, `duration_seconds`, `language`, `caption`,
+   `platform_settings`, and optionally `project_id`/`campaign_id`.
+
+2. **Read project/campaign context**, if `project_id`/`campaign_id` are set
+   and you have read access to the OmniNexus workspace (you generally do
+   not from inside the worker container — treat their absence as normal,
+   not an error; use `brief`/`title`/`caption` as the source of truth when
+   broader context isn't reachable).
+
+3. **Read the available visual identity** in `input/brand/` — logo, color
+   palette, fonts, if present. If empty, use a clean, brand-neutral design;
+   do not invent a brand identity.
+
+4. **Select the appropriate HyperFrames skill** for the job. Load
+   `hyperframes` first (the mandatory entry point), then follow its routing
+   to the specific workflow that matches the brief — most social-media jobs
+   from a short text brief route to `motion-graphics` (short, design-led,
+   usually <30s, no live-action subject) or `general-video`/
+   `faceless-explainer` for anything with more narrative structure. Do not
+   guess a workflow that doesn't match — let `hyperframes`'s own routing
+   decide.
+
+5. **Create the composition in `./project/`** — an isolated HyperFrames
+   project (via `hyperframes init` or by hand, following the routed
+   skill's guidance). This must be self-contained; it is never shared
+   across jobs.
+
+6. **Use only authorized assets** — everything in `input/brand/` and
+   `input/assets/`. Never fetch external media, never search the web for
+   stock footage/images/audio, never reuse assets from a previous job's
+   directory (you cannot see other jobs' directories anyway — the worker
+   isolates each job).
+
+7. **Respect resolution, duration, fps, and safe areas exactly as declared
+   in the manifest.** `width`/`height`/`fps`/`duration_seconds` are not
+   suggestions — the worker's ffprobe validation step will reject a render
+   that doesn't match them (tolerance: ±0.75s duration, ±1fps). For
+   `format: vertical` (the common case — Instagram Reels/Stories, TikTok,
+   YouTube Shorts), keep essential text/logos inside the safe area (avoid
+   the outer ~10% margin and the areas typically covered by platform UI
+   chrome at top/bottom).
+
+8. **Captions/on-screen text must be legible on a phone screen** — large,
+   high-contrast type; short line lengths; no dense paragraphs. If the
+   brief implies spoken narration, check `input/assets/` for a pre-supplied
+   voice track before assuming you need to generate one — voice generation
+   is optional and only when a local solution is already configured (do
+   not fetch a cloud TTS API key from environment; if you don't have a
+   local voice pipeline available, produce a visually-driven video without
+   narration and say so in `publication_manifest.json`'s `title`/notes
+   informally, not as a schema field).
+
+9. **Render deterministically.** You author the composition; you do **not**
+   run `hyperframes render` yourself — the worker does, right after you
+   finish, using the exact `fps`/`quality` from the job. Do not leave
+   randomized values, current-timestamp seeds, or non-deterministic content
+   in the composition (breaks reproducibility and the worker's `--docker`
+   reproducible-render mode).
+
+10. **Produce `output/publication_manifest.json`** matching this exact
+    schema (validated server-side by `media_manifest.py` — extra fields are
+    tolerated, but every required field below must be present and correctly
+    typed; do not invent field names beyond what's here):
+
+    ```json
+    {
+      "job_id": "uuid",
+      "render_file": "project/index.html or wherever hyperframes render will read from — usually just \"project\"; ask yourself: what would `hyperframes render` need as its working directory? Point render_file at the FINAL MP4 PATH the worker should write to, e.g. \"output/final.mp4\", not at the composition source.",
+      "title": "Título do vídeo",
+      "caption": "Legenda sugerida",
+      "platform": "instagram",
+      "format": "vertical",
+      "width": 1080,
+      "height": 1920,
+      "fps": 30,
+      "duration_seconds": 20,
+      "platform_settings": {
+        "__type": "instagram",
+        "post_type": "reel"
+      }
+    }
+    ```
+
+    In practice `render_file` should always be `"output/final.mp4"` — that
+    is the path the worker's deterministic render step writes to, and the
+    path ffprobe validation reads from. `job_id`, `platform`, `format`,
+    `width`, `height`, `fps`, `duration_seconds` MUST match `input/job.json`
+    exactly (the worker validates the final render against these — a
+    mismatch here just causes a validation failure later, not a bypass).
+
+11. **Stop. Do not publish anything.** You have no Postiz credentials and
+    should never look for them (they are deliberately excluded from your
+    environment — see `provider_fallback.py`'s agent env denylist). Your
+    task ends the moment `output/publication_manifest.json` is written and
+    valid. Do not attempt to run `hyperframes render`, `ffmpeg`, or any
+    upload command.
+
+## What you must never do
+
+- Never read `POSTIZ_API_KEY`, `DASHBOARD_API_TOKEN`, or any credential —
+  they are not in your environment, and if you somehow find one, do not use
+  it.
+- Never write outside this job's own directory tree.
+- Never accept an absolute path from anywhere as a file location — resolve
+  everything relative to your current working directory.
+- Never fabricate a `publication_manifest.json` that doesn't correspond to
+  what you actually authored in `./project/`.
+- Never call `hyperframes render`, `ffmpeg`, or `ffprobe` yourself — that is
+  the worker's deterministic step, run outside your process.
diff --git a/.claude/skills/ui-ux-pro-max/SKILL.md b/.claude/skills/ui-ux-pro-max/SKILL.md
new file mode 100644
index 000000000..a64d6c233
--- /dev/null
+++ b/.claude/skills/ui-ux-pro-max/SKILL.md
@@ -0,0 +1,659 @@
+---
+name: ui-ux-pro-max
+description: "UI/UX design intelligence for web and mobile. Includes 50+ styles, 161 color palettes, 57 font pairings, 161 product types, 99 UX guidelines, and 25 chart types across 10 stacks (React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind, shadcn/ui, and HTML/CSS). Actions: plan, build, create, design, implement, review, fix, improve, optimize, enhance, refactor, and check UI/UX code. Projects: website, landing page, dashboard, admin panel, e-commerce, SaaS, portfolio, blog, and mobile app. Elements: button, modal, navbar, sidebar, card, table, form, and chart. Styles: glassmorphism, claymorphism, minimalism, brutalism, neumorphism, bento grid, dark mode, responsive, skeuomorphism, and flat design. Topics: color systems, accessibility, animation, layout, typography, font pairing, spacing, interaction states, shadow, and gradient. Integrations: shadcn/ui MCP for component search and examples."
+---
+
+# UI/UX Pro Max - Design Intelligence
+
+Comprehensive design guide for web and mobile applications. Contains 50+ styles, 161 color palettes, 57 font pairings, 161 product types with reasoning rules, 99 UX guidelines, and 25 chart types across 10 technology stacks. Searchable database with priority-based recommendations.
+
+## When to Apply
+
+This Skill should be used when the task involves **UI structure, visual design decisions, interaction patterns, or user experience quality control**.
+
+### Must Use
+
+This Skill must be invoked in the following situations:
+
+- Designing new pages (Landing Page, Dashboard, Admin, SaaS, Mobile App)
+- Creating or refactoring UI components (buttons, modals, forms, tables, charts, etc.)
+- Choosing color schemes, typography systems, spacing standards, or layout systems
+- Reviewing UI code for user experience, accessibility, or visual consistency
+- Implementing navigation structures, animations, or responsive behavior
+- Making product-level design decisions (style, information hierarchy, brand expression)
+- Improving perceived quality, clarity, or usability of interfaces
+
+### Recommended
+
+This Skill is recommended in the following situations:
+
+- UI looks "not professional enough" but the reason is unclear
+- Receiving feedback on usability or experience
+- Pre-launch UI quality optimization
+- Aligning cross-platform design (Web / iOS / Android)
+- Building design systems or reusable component libraries
+
+### Skip
+
+This Skill is not needed in the following situations:
+
+- Pure backend logic development
+- Only involving API or database design
+- Performance optimization unrelated to the interface
+- Infrastructure or DevOps work
+- Non-visual scripts or automation tasks
+
+**Decision criteria**: If the task will change how a feature **looks, feels, moves, or is interacted with**, this Skill should be used.
+
+## Rule Categories by Priority
+
+*For human/AI reference: follow priority 1→10 to decide which rule category to focus on first; use `--domain <Domain>` to query details when needed. Scripts do not read this table.*
+
+| Priority | Category | Impact | Domain | Key Checks (Must Have) | Anti-Patterns (Avoid) |
+|----------|----------|--------|--------|------------------------|------------------------|
+| 1 | Accessibility | CRITICAL | `ux` | Contrast 4.5:1, Alt text, Keyboard nav, Aria-labels | Removing focus rings, Icon-only buttons without labels |
+| 2 | Touch & Interaction | CRITICAL | `ux` | Min size 44×44px, 8px+ spacing, Loading feedback | Reliance on hover only, Instant state changes (0ms) |
+| 3 | Performance | HIGH | `ux` | WebP/AVIF, Lazy loading, Reserve space (CLS &lt; 0.1) | Layout thrashing, Cumulative Layout Shift |
+| 4 | Style Selection | HIGH | `style`, `product` | Match product type, Consistency, SVG icons (no emoji) | Mixing flat & skeuomorphic randomly, Emoji as icons |
+| 5 | Layout & Responsive | HIGH | `ux` | Mobile-first breakpoints, Viewport meta, No horizontal scroll | Horizontal scroll, Fixed px container widths, Disable zoom |
+| 6 | Typography & Color | MEDIUM | `typography`, `color` | Base 16px, Line-height 1.5, Semantic color tokens | Text &lt; 12px body, Gray-on-gray, Raw hex in components |
+| 7 | Animation | MEDIUM | `ux` | Duration 150–300ms, Motion conveys meaning, Spatial continuity | Decorative-only animation, Animating width/height, No reduced-motion |
+| 8 | Forms & Feedback | MEDIUM | `ux` | Visible labels, Error near field, Helper text, Progressive disclosure | Placeholder-only label, Errors only at top, Overwhelm upfront |
+| 9 | Navigation Patterns | HIGH | `ux` | Predictable back, Bottom nav ≤5, Deep linking | Overloaded nav, Broken back behavior, No deep links |
+| 10 | Charts & Data | LOW | `chart` | Legends, Tooltips, Accessible colors | Relying on color alone to convey meaning |
+
+## Quick Reference
+
+### 1. Accessibility (CRITICAL)
+
+- `color-contrast` - Minimum 4.5:1 ratio for normal text (large text 3:1); Material Design
+- `focus-states` - Visible focus rings on interactive elements (2–4px; Apple HIG, MD)
+- `alt-text` - Descriptive alt text for meaningful images
+- `aria-labels` - aria-label for icon-only buttons; accessibilityLabel in native (Apple HIG)
+- `keyboard-nav` - Tab order matches visual order; full keyboard support (Apple HIG)
+- `form-labels` - Use label with for attribute
+- `skip-links` - Skip to main content for keyboard users
+- `heading-hierarchy` - Sequential h1→h6, no level skip
+- `color-not-only` - Don't convey info by color alone (add icon/text)
+- `dynamic-type` - Support system text scaling; avoid truncation as text grows (Apple Dynamic Type, MD)
+- `reduced-motion` - Respect prefers-reduced-motion; reduce/disable animations when requested (Apple Reduced Motion API, MD)
+- `voiceover-sr` - Meaningful accessibilityLabel/accessibilityHint; logical reading order for VoiceOver/screen readers (Apple HIG, MD)
+- `escape-routes` - Provide cancel/back in modals and multi-step flows (Apple HIG)
+- `keyboard-shortcuts` - Preserve system and a11y shortcuts; offer keyboard alternatives for drag-and-drop (Apple HIG)
+
+### 2. Touch & Interaction (CRITICAL)
+
+- `touch-target-size` - Min 44×44pt (Apple) / 48×48dp (Material); extend hit area beyond visual bounds if needed
+- `touch-spacing` - Minimum 8px/8dp gap between touch targets (Apple HIG, MD)
+- `hover-vs-tap` - Use click/tap for primary interactions; don't rely on hover alone
+- `loading-buttons` - Disable button during async operations; show spinner or progress
+- `error-feedback` - Clear error messages near problem
+- `cursor-pointer` - Add cursor-pointer to clickable elements (Web)
+- `gesture-conflicts` - Avoid horizontal swipe on main content; prefer vertical scroll
+- `tap-delay` - Use touch-action: manipulation to reduce 300ms delay (Web)
+- `standard-gestures` - Use platform standard gestures consistently; don't redefine (e.g. swipe-back, pinch-zoom) (Apple HIG)
+- `system-gestures` - Don't block system gestures (Control Center, back swipe, etc.) (Apple HIG)
+- `press-feedback` - Visual feedback on press (ripple/highlight; MD state layers)
+- `haptic-feedback` - Use haptic for confirmations and important actions; avoid overuse (Apple HIG)
+- `gesture-alternative` - Don't rely on gesture-only interactions; always provide visible controls for critical actions
+- `safe-area-awareness` - Keep primary touch targets away from notch, Dynamic Island, gesture bar and screen edges
+- `no-precision-required` - Avoid requiring pixel-perfect taps on small icons or thin edges
+- `swipe-clarity` - Swipe actions must show clear affordance or hint (chevron, label, tutorial)
+- `drag-threshold` - Use a movement threshold before starting drag to avoid accidental drags
+
+### 3. Performance (HIGH)
+
+- `image-optimization` - Use WebP/AVIF, responsive images (srcset/sizes), lazy load non-critical assets
+- `image-dimension` - Declare width/height or use aspect-ratio to prevent layout shift (Core Web Vitals: CLS)
+- `font-loading` - Use font-display: swap/optional to avoid invisible text (FOIT); reserve space to reduce layout shift (MD)
+- `font-preload` - Preload only critical fonts; avoid overusing preload on every variant
+- `critical-css` - Prioritize above-the-fold CSS (inline critical CSS or early-loaded stylesheet)
+- `lazy-loading` - Lazy load non-hero components via dynamic import / route-level splitting
+- `bundle-splitting` - Split code by route/feature (React Suspense / Next.js dynamic) to reduce initial load and TTI
+- `third-party-scripts` - Load third-party scripts async/defer; audit and remove unnecessary ones (MD)
+- `reduce-reflows` - Avoid frequent layout reads/writes; batch DOM reads then writes
+- `content-jumping` - Reserve space for async content to avoid layout jumps (Core Web Vitals: CLS)
+- `lazy-load-below-fold` - Use loading="lazy" for below-the-fold images and heavy media
+- `virtualize-lists` - Virtualize lists with 50+ items to improve memory efficiency and scroll performance
+- `main-thread-budget` - Keep per-frame work under ~16ms for 60fps; move heavy tasks off main thread (HIG, MD)
+- `progressive-loading` - Use skeleton screens / shimmer instead of long blocking spinners for >1s operations (Apple HIG)
+- `input-latency` - Keep input latency under ~100ms for taps/scrolls (Material responsiveness standard)
+- `tap-feedback-speed` - Provide visual feedback within 100ms of tap (Apple HIG)
+- `debounce-throttle` - Use debounce/throttle for high-frequency events (scroll, resize, input)
+- `offline-support` - Provide offline state messaging and basic fallback (PWA / mobile)
+- `network-fallback` - Offer degraded modes for slow networks (lower-res images, fewer animations)
+
+### 4. Style Selection (HIGH)
+
+- `style-match` - Match style to product type (use `--design-system` for recommendations)
+- `consistency` - Use same style across all pages
+- `no-emoji-icons` - Use SVG icons (Heroicons, Lucide), not emojis
+- `color-palette-from-product` - Choose palette from product/industry (search `--domain color`)
+- `effects-match-style` - Shadows, blur, radius aligned with chosen style (glass / flat / clay etc.)
+- `platform-adaptive` - Respect platform idioms (iOS HIG vs Material): navigation, controls, typography, motion
+- `state-clarity` - Make hover/pressed/disabled states visually distinct while staying on-style (Material state layers)
+- `elevation-consistent` - Use a consistent elevation/shadow scale for cards, sheets, modals; avoid random shadow values
+- `dark-mode-pairing` - Design light/dark variants together to keep brand, contrast, and style consistent
+- `icon-style-consistent` - Use one icon set/visual language (stroke width, corner radius) across the product
+- `system-controls` - Prefer native/system controls over fully custom ones; only customize when branding requires it (Apple HIG)
+- `blur-purpose` - Use blur to indicate background dismissal (modals, sheets), not as decoration (Apple HIG)
+- `primary-action` - Each screen should have only one primary CTA; secondary actions visually subordinate (Apple HIG)
+
+### 5. Layout & Responsive (HIGH)
+
+- `viewport-meta` - width=device-width initial-scale=1 (never disable zoom)
+- `mobile-first` - Design mobile-first, then scale up to tablet and desktop
+- `breakpoint-consistency` - Use systematic breakpoints (e.g. 375 / 768 / 1024 / 1440)
+- `readable-font-size` - Minimum 16px body text on mobile (avoids iOS auto-zoom)
+- `line-length-control` - Mobile 35–60 chars per line; desktop 60–75 chars
+- `horizontal-scroll` - No horizontal scroll on mobile; ensure content fits viewport width
+- `spacing-scale` - Use 4pt/8dp incremental spacing system (Material Design)
+- `touch-density` - Keep component spacing comfortable for touch: not cramped, not causing mis-taps
+- `container-width` - Consistent max-width on desktop (max-w-6xl / 7xl)
+- `z-index-management` - Define layered z-index scale (e.g. 0 / 10 / 20 / 40 / 100 / 1000)
+- `fixed-element-offset` - Fixed navbar/bottom bar must reserve safe padding for underlying content
+- `scroll-behavior` - Avoid nested scroll regions that interfere with the main scroll experience
+- `viewport-units` - Prefer min-h-dvh over 100vh on mobile
+- `orientation-support` - Keep layout readable and operable in landscape mode
+- `content-priority` - Show core content first on mobile; fold or hide secondary content
+- `visual-hierarchy` - Establish hierarchy via size, spacing, contrast — not color alone
+
+### 6. Typography & Color (MEDIUM)
+
+- `line-height` - Use 1.5-1.75 for body text
+- `line-length` - Limit to 65-75 characters per line
+- `font-pairing` - Match heading/body font personalities
+- `font-scale` - Consistent type scale (e.g. 12 14 16 18 24 32)
+- `contrast-readability` - Darker text on light backgrounds (e.g. slate-900 on white)
+- `text-styles-system` - Use platform type system: iOS 11 Dynamic Type styles / Material 5 type roles (display, headline, title, body, label) (HIG, MD)
+- `weight-hierarchy` - Use font-weight to reinforce hierarchy: Bold headings (600–700), Regular body (400), Medium labels (500) (MD)
+- `color-semantic` - Define semantic color tokens (primary, secondary, error, surface, on-surface) not raw hex in components (Material color system)
+- `color-dark-mode` - Dark mode uses desaturated / lighter tonal variants, not inverted colors; test contrast separately (HIG, MD)
+- `color-accessible-pairs` - Foreground/background pairs must meet 4.5:1 (AA) or 7:1 (AAA); use tools to verify (WCAG, MD)
+- `color-not-decorative-only` - Functional color (error red, success green) must include icon/text; avoid color-only meaning (HIG, MD)
+- `truncation-strategy` - Prefer wrapping over truncation; when truncating use ellipsis and provide full text via tooltip/expand (Apple HIG)
+- `letter-spacing` - Respect default letter-spacing per platform; avoid tight tracking on body text (HIG, MD)
+- `number-tabular` - Use tabular/monospaced figures for data columns, prices, and timers to prevent layout shift
+- `whitespace-balance` - Use whitespace intentionally to group related items and separate sections; avoid visual clutter (Apple HIG)
+
+### 7. Animation (MEDIUM)
+
+- `duration-timing` - Use 150–300ms for micro-interactions; complex transitions ≤400ms; avoid >500ms (MD)
+- `transform-performance` - Use transform/opacity only; avoid animating width/height/top/left
+- `loading-states` - Show skeleton or progress indicator when loading exceeds 300ms
+- `excessive-motion` - Animate 1-2 key elements per view max
+- `easing` - Use ease-out for entering, ease-in for exiting; avoid linear for UI transitions
+- `motion-meaning` - Every animation must express a cause-effect relationship, not just be decorative (Apple HIG)
+- `state-transition` - State changes (hover / active / expanded / collapsed / modal) should animate smoothly, not snap
+- `continuity` - Page/screen transitions should maintain spatial continuity (shared element, directional slide) (Apple HIG)
+- `parallax-subtle` - Use parallax sparingly; must respect reduced-motion and not cause disorientation (Apple HIG)
+- `spring-physics` - Prefer spring/physics-based curves over linear or cubic-bezier for natural feel (Apple HIG fluid animations)
+- `exit-faster-than-enter` - Exit animations shorter than enter (~60–70% of enter duration) to feel responsive (MD motion)
+- `stagger-sequence` - Stagger list/grid item entrance by 30–50ms per item; avoid all-at-once or too-slow reveals (MD)
+- `shared-element-transition` - Use shared element / hero transitions for visual continuity between screens (MD, HIG)
+- `interruptible` - Animations must be interruptible; user tap/gesture cancels in-progress animation immediately (Apple HIG)
+- `no-blocking-animation` - Never block user input during an animation; UI must stay interactive (Apple HIG)
+- `fade-crossfade` - Use crossfade for content replacement within the same container (MD)
+- `scale-feedback` - Subtle scale (0.95–1.05) on press for tappable cards/buttons; restore on release (HIG, MD)
+- `gesture-feedback` - Drag, swipe, and pinch must provide real-time visual response tracking the finger (MD Motion)
+- `hierarchy-motion` - Use translate/scale direction to express hierarchy: enter from below = deeper, exit upward = back (MD)
+- `motion-consistency` - Unify duration/easing tokens globally; all animations share the same rhythm and feel
+- `opacity-threshold` - Fading elements should not linger below opacity 0.2; either fade fully or remain visible
+- `modal-motion` - Modals/sheets should animate from their trigger source (scale+fade or slide-in) for spatial context (HIG, MD)
+- `navigation-direction` - Forward navigation animates left/up; backward animates right/down — keep direction logically consistent (HIG)
+- `layout-shift-avoid` - Animations must not cause layout reflow or CLS; use transform for position changes
+
+### 8. Forms & Feedback (MEDIUM)
+
+- `input-labels` - Visible label per input (not placeholder-only)
+- `error-placement` - Show error below the related field
+- `submit-feedback` - Loading then success/error state on submit
+- `required-indicators` - Mark required fields (e.g. asterisk)
+- `empty-states` - Helpful message and action when no content
+- `toast-dismiss` - Auto-dismiss toasts in 3-5s
+- `confirmation-dialogs` - Confirm before destructive actions
+- `input-helper-text` - Provide persistent helper text below complex inputs, not just placeholder (Material Design)
+- `disabled-states` - Disabled elements use reduced opacity (0.38–0.5) + cursor change + semantic attribute (MD)
+- `progressive-disclosure` - Reveal complex options progressively; don't overwhelm users upfront (Apple HIG)
+- `inline-validation` - Validate on blur (not keystroke); show error only after user finishes input (MD)
+- `input-type-keyboard` - Use semantic input types (email, tel, number) to trigger the correct mobile keyboard (HIG, MD)
+- `password-toggle` - Provide show/hide toggle for password fields (MD)
+- `autofill-support` - Use autocomplete / textContentType attributes so the system can autofill (HIG, MD)
+- `undo-support` - Allow undo for destructive or bulk actions (e.g. "Undo delete" toast) (Apple HIG)
+- `success-feedback` - Confirm completed actions with brief visual feedback (checkmark, toast, color flash) (MD)
+- `error-recovery` - Error messages must include a clear recovery path (retry, edit, help link) (HIG, MD)
+- `multi-step-progress` - Multi-step flows show step indicator or progress bar; allow back navigation (MD)
+- `form-autosave` - Long forms should auto-save drafts to prevent data loss on accidental dismissal (Apple HIG)
+- `sheet-dismiss-confirm` - Confirm before dismissing a sheet/modal with unsaved changes (Apple HIG)
+- `error-clarity` - Error messages must state cause + how to fix (not just "Invalid input") (HIG, MD)
+- `field-grouping` - Group related fields logically (fieldset/legend or visual grouping) (MD)
+- `read-only-distinction` - Read-only state should be visually and semantically different from disabled (MD)
+- `focus-management` - After submit error, auto-focus the first invalid field (WCAG, MD)
+- `error-summary` - For multiple errors, show summary at top with anchor links to each field (WCAG)
+- `touch-friendly-input` - Mobile input height ≥44px to meet touch target requirements (Apple HIG)
+- `destructive-emphasis` - Destructive actions use semantic danger color (red) and are visually separated from primary actions (HIG, MD)
+- `toast-accessibility` - Toasts must not steal focus; use aria-live="polite" for screen reader announcement (WCAG)
+- `aria-live-errors` - Form errors use aria-live region or role="alert" to notify screen readers (WCAG)
+- `contrast-feedback` - Error and success state colors must meet 4.5:1 contrast ratio (WCAG, MD)
+- `timeout-feedback` - Request timeout must show clear feedback with retry option (MD)
+
+### 9. Navigation Patterns (HIGH)
+
+- `bottom-nav-limit` - Bottom navigation max 5 items; use labels with icons (Material Design)
+- `drawer-usage` - Use drawer/sidebar for secondary navigation, not primary actions (Material Design)
+- `back-behavior` - Back navigation must be predictable and consistent; preserve scroll/state (Apple HIG, MD)
+- `deep-linking` - All key screens must be reachable via deep link / URL for sharing and notifications (Apple HIG, MD)
+- `tab-bar-ios` - iOS: use bottom Tab Bar for top-level navigation (Apple HIG)
+- `top-app-bar-android` - Android: use Top App Bar with navigation icon for primary structure (Material Design)
+- `nav-label-icon` - Navigation items must have both icon and text label; icon-only nav harms discoverability (MD)
+- `nav-state-active` - Current location must be visually highlighted (color, weight, indicator) in navigation (HIG, MD)
+- `nav-hierarchy` - Primary nav (tabs/bottom bar) vs secondary nav (drawer/settings) must be clearly separated (MD)
+- `modal-escape` - Modals and sheets must offer a clear close/dismiss affordance; swipe-down to dismiss on mobile (Apple HIG)
+- `search-accessible` - Search must be easily reachable (top bar or tab); provide recent/suggested queries (MD)
+- `breadcrumb-web` - Web: use breadcrumbs for 3+ level deep hierarchies to aid orientation (MD)
+- `state-preservation` - Navigating back must restore previous scroll position, filter state, and input (HIG, MD)
+- `gesture-nav-support` - Support system gesture navigation (iOS swipe-back, Android predictive back) without conflict (HIG, MD)
+- `tab-badge` - Use badges on nav items sparingly to indicate unread/pending; clear after user visits (HIG, MD)
+- `overflow-menu` - When actions exceed available space, use overflow/more menu instead of cramming (MD)
+- `bottom-nav-top-level` - Bottom nav is for top-level screens only; never nest sub-navigation inside it (MD)
+- `adaptive-navigation` - Large screens (≥1024px) prefer sidebar; small screens use bottom/top nav (Material Adaptive)
+- `back-stack-integrity` - Never silently reset the navigation stack or unexpectedly jump to home (HIG, MD)
+- `navigation-consistency` - Navigation placement must stay the same across all pages; don't change by page type
+- `avoid-mixed-patterns` - Don't mix Tab + Sidebar + Bottom Nav at the same hierarchy level
+- `modal-vs-navigation` - Modals must not be used for primary navigation flows; they break the user's path (HIG)
+- `focus-on-route-change` - After page transition, move focus to main content region for screen reader users (WCAG)
+- `persistent-nav` - Core navigation must remain reachable from deep pages; don't hide it entirely in sub-flows (HIG, MD)
+- `destructive-nav-separation` - Dangerous actions (delete account, logout) must be visually and spatially separated from normal nav items (HIG, MD)
+- `empty-nav-state` - When a nav destination is unavailable, explain why instead of silently hiding it (MD)
+
+### 10. Charts & Data (LOW)
+
+- `chart-type` - Match chart type to data type (trend → line, comparison → bar, proportion → pie/donut)
+- `color-guidance` - Use accessible color palettes; avoid red/green only pairs for colorblind users (WCAG, MD)
+- `data-table` - Provide table alternative for accessibility; charts alone are not screen-reader friendly (WCAG)
+- `pattern-texture` - Supplement color with patterns, textures, or shapes so data is distinguishable without color (WCAG, MD)
+- `legend-visible` - Always show legend; position near the chart, not detached below a scroll fold (MD)
+- `tooltip-on-interact` - Provide tooltips/data labels on hover (Web) or tap (mobile) showing exact values (HIG, MD)
+- `axis-labels` - Label axes with units and readable scale; avoid truncated or rotated labels on mobile
+- `responsive-chart` - Charts must reflow or simplify on small screens (e.g. horizontal bar instead of vertical, fewer ticks)
+- `empty-data-state` - Show meaningful empty state when no data exists ("No data yet" + guidance), not a blank chart (MD)
+- `loading-chart` - Use skeleton or shimmer placeholder while chart data loads; don't show an empty axis frame
+- `animation-optional` - Chart entrance animations must respect prefers-reduced-motion; data should be readable immediately (HIG)
+- `large-dataset` - For 1000+ data points, aggregate or sample; provide drill-down for detail instead of rendering all (MD)
+- `number-formatting` - Use locale-aware formatting for numbers, dates, currencies on axes and labels (HIG, MD)
+- `touch-target-chart` - Interactive chart elements (points, segments) must have ≥44pt tap area or expand on touch (Apple HIG)
+- `no-pie-overuse` - Avoid pie/donut for >5 categories; switch to bar chart for clarity
+- `contrast-data` - Data lines/bars vs background ≥3:1; data text labels ≥4.5:1 (WCAG)
+- `legend-interactive` - Legends should be clickable to toggle series visibility (MD)
+- `direct-labeling` - For small datasets, label values directly on the chart to reduce eye travel
+- `tooltip-keyboard` - Tooltip content must be keyboard-reachable and not rely on hover alone (WCAG)
+- `sortable-table` - Data tables must support sorting with aria-sort indicating current sort state (WCAG)
+- `axis-readability` - Axis ticks must not be cramped; maintain readable spacing, auto-skip on small screens
+- `data-density` - Limit information density per chart to avoid cognitive overload; split into multiple charts if needed
+- `trend-emphasis` - Emphasize data trends over decoration; avoid heavy gradients/shadows that obscure the data
+- `gridline-subtle` - Grid lines should be low-contrast (e.g. gray-200) so they don't compete with data
+- `focusable-elements` - Interactive chart elements (points, bars, slices) must be keyboard-navigable (WCAG)
+- `screen-reader-summary` - Provide a text summary or aria-label describing the chart's key insight for screen readers (WCAG)
+- `error-state-chart` - Data load failure must show error message with retry action, not a broken/empty chart
+- `export-option` - For data-heavy products, offer CSV/image export of chart data
+- `drill-down-consistency` - Drill-down interactions must maintain a clear back-path and hierarchy breadcrumb
+- `time-scale-clarity` - Time series charts must clearly label time granularity (day/week/month) and allow switching
+
+## How to Use
+
+Search specific domains using the CLI tool below.
+
+---
+
+## Prerequisites
+
+Check if Python is installed:
+
+```bash
+python3 --version || python --version
+```
+
+If Python is not installed, install it based on user's OS:
+
+**macOS:**
+```bash
+brew install python3
+```
+
+**Ubuntu/Debian:**
+```bash
+sudo apt update && sudo apt install python3
+```
+
+**Windows:**
+```powershell
+winget install Python.Python.3.12
+```
+
+---
+
+## How to Use This Skill
+
+Use this skill when the user requests any of the following:
+
+| Scenario | Trigger Examples | Start From |
+|----------|-----------------|------------|
+| **New project / page** | "Build a landing page", "Build a dashboard" | Step 1 → Step 2 (design system) |
+| **New component** | "Create a pricing card", "Add a modal" | Step 3 (domain search: style, ux) |
+| **Choose style / color / font** | "What style fits a fintech app?", "Recommend a color palette" | Step 2 (design system) |
+| **Review existing UI** | "Review this page for UX issues", "Check accessibility" | Quick Reference checklist above |
+| **Fix a UI bug** | "Button hover is broken", "Layout shifts on load" | Quick Reference → relevant section |
+| **Improve / optimize** | "Make this faster", "Improve mobile experience" | Step 3 (domain search: ux, react) |
+| **Implement dark mode** | "Add dark mode support" | Step 3 (domain: style "dark mode") |
+| **Add charts / data viz** | "Add an analytics dashboard chart" | Step 3 (domain: chart) |
+| **Stack best practices** | "React performance tips"、"SwiftUI navigation" | Step 4 (stack search) |
+
+Follow this workflow:
+
+### Step 1: Analyze User Requirements
+
+Extract key information from user request:
+- **Product type**: Entertainment (social, video, music, gaming), Tool (scanner, editor, converter), Productivity (task manager, notes, calendar), or hybrid
+- **Target audience**: C-end consumer users; consider age group, usage context (commute, leisure, work)
+- **Style keywords**: playful, vibrant, minimal, dark mode, content-first, immersive, etc.
+- **Stack**: React Native (this project's only tech stack)
+
+### Step 2: Generate Design System (REQUIRED)
+
+**Always start with `--design-system`** to get comprehensive recommendations with reasoning:
+
+```bash
+python3 skills/ui-ux-pro-max/scripts/search.py "<product_type> <industry> <keywords>" --design-system [-p "Project Name"]
+```
+
+This command:
+1. Searches domains in parallel (product, style, color, landing, typography)
+2. Applies reasoning rules from `ui-reasoning.csv` to select best matches
+3. Returns complete design system: pattern, style, colors, typography, effects
+4. Includes anti-patterns to avoid
+
+**Example:**
+```bash
+python3 skills/ui-ux-pro-max/scripts/search.py "beauty spa wellness service" --design-system -p "Serenity Spa"
+```
+
+### Step 2b: Persist Design System (Master + Overrides Pattern)
+
+To save the design system for **hierarchical retrieval across sessions**, add `--persist`:
+
+```bash
+python3 skills/ui-ux-pro-max/scripts/search.py "<query>" --design-system --persist -p "Project Name"
+```
+
+This creates:
+- `design-system/MASTER.md` — Global Source of Truth with all design rules
+- `design-system/pages/` — Folder for page-specific overrides
+
+**With page-specific override:**
+```bash
+python3 skills/ui-ux-pro-max/scripts/search.py "<query>" --design-system --persist -p "Project Name" --page "dashboard"
+```
+
+This also creates:
+- `design-system/pages/dashboard.md` — Page-specific deviations from Master
+
+**How hierarchical retrieval works:**
+1. When building a specific page (e.g., "Checkout"), first check `design-system/pages/checkout.md`
+2. If the page file exists, its rules **override** the Master file
+3. If not, use `design-system/MASTER.md` exclusively
+
+**Context-aware retrieval prompt:**
+```
+I am building the [Page Name] page. Please read design-system/MASTER.md.
+Also check if design-system/pages/[page-name].md exists.
+If the page file exists, prioritize its rules.
+If not, use the Master rules exclusively.
+Now, generate the code...
+```
+
+### Step 3: Supplement with Detailed Searches (as needed)
+
+After getting the design system, use domain searches to get additional details:
+
+```bash
+python3 skills/ui-ux-pro-max/scripts/search.py "<keyword>" --domain <domain> [-n <max_results>]
+```
+
+**When to use detailed searches:**
+
+| Need | Domain | Example |
+|------|--------|---------|
+| Product type patterns | `product` | `--domain product "entertainment social"` |
+| More style options | `style` | `--domain style "glassmorphism dark"` |
+| Color palettes | `color` | `--domain color "entertainment vibrant"` |
+| Font pairings | `typography` | `--domain typography "playful modern"` |
+| Chart recommendations | `chart` | `--domain chart "real-time dashboard"` |
+| UX best practices | `ux` | `--domain ux "animation accessibility"` |
+| Alternative fonts | `typography` | `--domain typography "elegant luxury"` |
+| Individual Google Fonts | `google-fonts` | `--domain google-fonts "sans serif popular variable"` |
+| Landing structure | `landing` | `--domain landing "hero social-proof"` |
+| React Native perf | `react` | `--domain react "rerender memo list"` |
+| App interface a11y | `web` | `--domain web "accessibilityLabel touch safe-areas"` |
+| AI prompt / CSS keywords | `prompt` | `--domain prompt "minimalism"` |
+
+### Step 4: Stack Guidelines (React Native)
+
+Get React Native implementation-specific best practices:
+
+```bash
+python3 skills/ui-ux-pro-max/scripts/search.py "<keyword>" --stack react-native
+```
+
+---
+
+## Search Reference
+
+### Available Domains
+
+| Domain | Use For | Example Keywords |
+|--------|---------|------------------|
+| `product` | Product type recommendations | SaaS, e-commerce, portfolio, healthcare, beauty, service |
+| `style` | UI styles, colors, effects | glassmorphism, minimalism, dark mode, brutalism |
+| `typography` | Font pairings, Google Fonts | elegant, playful, professional, modern |
+| `color` | Color palettes by product type | saas, ecommerce, healthcare, beauty, fintech, service |
+| `landing` | Page structure, CTA strategies | hero, hero-centric, testimonial, pricing, social-proof |
+| `chart` | Chart types, library recommendations | trend, comparison, timeline, funnel, pie |
+| `ux` | Best practices, anti-patterns | animation, accessibility, z-index, loading |
+| `google-fonts` | Individual Google Fonts lookup | sans serif, monospace, japanese, variable font, popular |
+| `react` | React/Next.js performance | waterfall, bundle, suspense, memo, rerender, cache |
+| `web` | App interface guidelines (iOS/Android/React Native) | accessibilityLabel, touch targets, safe areas, Dynamic Type |
+| `prompt` | AI prompts, CSS keywords | (style name) |
+
+### Available Stacks
+
+| Stack | Focus |
+|-------|-------|
+| `react-native` | Components, Navigation, Lists |
+
+---
+
+## Example Workflow
+
+**User request:** "Make an AI search homepage."
+
+### Step 1: Analyze Requirements
+- Product type: Tool (AI search engine)
+- Target audience: C-end users looking for fast, intelligent search
+- Style keywords: modern, minimal, content-first, dark mode
+- Stack: React Native
+
+### Step 2: Generate Design System (REQUIRED)
+
+```bash
+python3 skills/ui-ux-pro-max/scripts/search.py "AI search tool modern minimal" --design-system -p "AI Search"
+```
+
+**Output:** Complete design system with pattern, style, colors, typography, effects, and anti-patterns.
+
+### Step 3: Supplement with Detailed Searches (as needed)
+
+```bash
+# Get style options for a modern tool product
+python3 skills/ui-ux-pro-max/scripts/search.py "minimalism dark mode" --domain style
+
+# Get UX best practices for search interaction and loading
+python3 skills/ui-ux-pro-max/scripts/search.py "search loading animation" --domain ux
+```
+
+### Step 4: Stack Guidelines
+
+```bash
+python3 skills/ui-ux-pro-max/scripts/search.py "list performance navigation" --stack react-native
+```
+
+**Then:** Synthesize design system + detailed searches and implement the design.
+
+---
+
+## Output Formats
+
+The `--design-system` flag supports two output formats:
+
+```bash
+# ASCII box (default) - best for terminal display
+python3 skills/ui-ux-pro-max/scripts/search.py "fintech crypto" --design-system
+
+# Markdown - best for documentation
+python3 skills/ui-ux-pro-max/scripts/search.py "fintech crypto" --design-system -f markdown
+```
+
+---
+
+## Tips for Better Results
+
+### Query Strategy
+
+- Use **multi-dimensional keywords** — combine product + industry + tone + density: `"entertainment social vibrant content-dense"` not just `"app"`
+- Try different keywords for the same need: `"playful neon"` → `"vibrant dark"` → `"content-first minimal"`
+- Use `--design-system` first for full recommendations, then `--domain` to deep-dive any dimension you're unsure about
+- Always add `--stack react-native` for implementation-specific guidance
+
+### Common Sticking Points
+
+| Problem | What to Do |
+|---------|------------|
+| Can't decide on style/color | Re-run `--design-system` with different keywords |
+| Dark mode contrast issues | Quick Reference §6: `color-dark-mode` + `color-accessible-pairs` |
+| Animations feel unnatural | Quick Reference §7: `spring-physics` + `easing` + `exit-faster-than-enter` |
+| Form UX is poor | Quick Reference §8: `inline-validation` + `error-clarity` + `focus-management` |
+| Navigation feels confusing | Quick Reference §9: `nav-hierarchy` + `bottom-nav-limit` + `back-behavior` |
+| Layout breaks on small screens | Quick Reference §5: `mobile-first` + `breakpoint-consistency` |
+| Performance / jank | Quick Reference §3: `virtualize-lists` + `main-thread-budget` + `debounce-throttle` |
+
+### Pre-Delivery Checklist
+
+- Run `--domain ux "animation accessibility z-index loading"` as a UX validation pass before implementation
+- Run through Quick Reference **§1–§3** (CRITICAL + HIGH) as a final review
+- Test on 375px (small phone) and landscape orientation
+- Verify behavior with **reduced-motion** enabled and **Dynamic Type** at largest size
+- Check dark mode contrast independently (don't assume light mode values work)
+- Confirm all touch targets ≥44pt and no content hidden behind safe areas
+
+---
+
+## Common Rules for Professional UI
+
+These are frequently overlooked issues that make UI look unprofessional:
+Scope notice: The rules below are for App UI (iOS/Android/React Native/Flutter), not desktop-web interaction patterns.
+
+### Icons & Visual Elements
+
+| Rule | Standard | Avoid | Why It Matters |
+|------|----------|--------|----------------|
+| **No Emoji as Structural Icons** | Use vector-based icons (e.g., Lucide, react-native-vector-icons, @expo/vector-icons). | Using emojis (🎨 🚀 ⚙️) for navigation, settings, or system controls. | Emojis are font-dependent, inconsistent across platforms, and cannot be controlled via design tokens. |
+| **Vector-Only Assets** | Use SVG or platform vector icons that scale cleanly and support theming. | Raster PNG icons that blur or pixelate. | Ensures scalability, crisp rendering, and dark/light mode adaptability. |
+| **Stable Interaction States** | Use color, opacity, or elevation transitions for press states without changing layout bounds. | Layout-shifting transforms that move surrounding content or trigger visual jitter. | Prevents unstable interactions and preserves smooth motion/perceived quality on mobile. |
+| **Correct Brand Logos** | Use official brand assets and follow their usage guidelines (spacing, color, clear space). | Guessing logo paths, recoloring unofficially, or modifying proportions. | Prevents brand misuse and ensures legal/platform compliance. |
+| **Consistent Icon Sizing** | Define icon sizes as design tokens (e.g., icon-sm, icon-md = 24pt, icon-lg). | Mixing arbitrary values like 20pt / 24pt / 28pt randomly. | Maintains rhythm and visual hierarchy across the interface. |
+| **Stroke Consistency** | Use a consistent stroke width within the same visual layer (e.g., 1.5px or 2px). | Mixing thick and thin stroke styles arbitrarily. | Inconsistent strokes reduce perceived polish and cohesion. |
+| **Filled vs Outline Discipline** | Use one icon style per hierarchy level. | Mixing filled and outline icons at the same hierarchy level. | Maintains semantic clarity and stylistic coherence. |
+| **Touch Target Minimum** | Minimum 44×44pt interactive area (use hitSlop if icon is smaller). | Small icons without expanded tap area. | Meets accessibility and platform usability standards. |
+| **Icon Alignment** | Align icons to text baseline and maintain consistent padding. | Misaligned icons or inconsistent spacing around them. | Prevents subtle visual imbalance that reduces perceived quality. |
+| **Icon Contrast** | Follow WCAG contrast standards: 4.5:1 for small elements, 3:1 minimum for larger UI glyphs. | Low-contrast icons that blend into the background. | Ensures accessibility in both light and dark modes. |
+
+
+### Interaction (App)
+
+| Rule | Do | Don't |
+|------|----|----- |
+| **Tap feedback** | Provide clear pressed feedback (ripple/opacity/elevation) within 80-150ms | No visual response on tap |
+| **Animation timing** | Keep micro-interactions around 150-300ms with platform-native easing | Instant transitions or slow animations (>500ms) |
+| **Accessibility focus** | Ensure screen reader focus order matches visual order and labels are descriptive | Unlabeled controls or confusing focus traversal |
+| **Disabled state clarity** | Use disabled semantics (`disabled`/native disabled props), reduced emphasis, and no tap action | Controls that look tappable but do nothing |
+| **Touch target minimum** | Keep tap areas >=44x44pt (iOS) or >=48x48dp (Android), expand hit area when icon is smaller | Tiny tap targets or icon-only hit areas without padding |
+| **Gesture conflict prevention** | Keep one primary gesture per region and avoid nested tap/drag conflicts | Overlapping gestures causing accidental actions |
+| **Semantic native controls** | Prefer native interactive primitives (`Button`, `Pressable`, platform equivalents) with proper accessibility roles | Generic containers used as primary controls without semantics |
+
+### Light/Dark Mode Contrast
+
+| Rule | Do | Don't |
+|------|----|----- |
+| **Surface readability (light)** | Keep cards/surfaces clearly separated from background with sufficient opacity/elevation | Overly transparent surfaces that blur hierarchy |
+| **Text contrast (light)** | Maintain body text contrast >=4.5:1 against light surfaces | Low-contrast gray body text |
+| **Text contrast (dark)** | Maintain primary text contrast >=4.5:1 and secondary text >=3:1 on dark surfaces | Dark mode text that blends into background |
+| **Border and divider visibility** | Ensure separators are visible in both themes (not just light mode) | Theme-specific borders disappearing in one mode |
+| **State contrast parity** | Keep pressed/focused/disabled states equally distinguishable in light and dark themes | Defining interaction states for one theme only |
+| **Token-driven theming** | Use semantic color tokens mapped per theme across app surfaces/text/icons | Hardcoded per-screen hex values |
+| **Scrim and modal legibility** | Use a modal scrim strong enough to isolate foreground content (typically 40-60% black) | Weak scrim that leaves background visually competing |
+
+### Layout & Spacing
+
+| Rule | Do | Don't |
+|------|----|----- |
+| **Safe-area compliance** | Respect top/bottom safe areas for all fixed headers, tab bars, and CTA bars | Placing fixed UI under notch, status bar, or gesture area |
+| **System bar clearance** | Add spacing for status/navigation bars and gesture home indicator | Let tappable content collide with OS chrome |
+| **Consistent content width** | Keep predictable content width per device class (phone/tablet) | Mixing arbitrary widths between screens |
+| **8dp spacing rhythm** | Use a consistent 4/8dp spacing system for padding/gaps/section spacing | Random spacing increments with no rhythm |
+| **Readable text measure** | Keep long-form text readable on large devices (avoid edge-to-edge paragraphs on tablets) | Full-width long text that hurts readability |
+| **Section spacing hierarchy** | Define clear vertical rhythm tiers (e.g., 16/24/32/48) by hierarchy | Similar UI levels with inconsistent spacing |
+| **Adaptive gutters by breakpoint** | Increase horizontal insets on larger widths and in landscape | Same narrow gutter on all device sizes/orientations |
+| **Scroll and fixed element coexistence** | Add bottom/top content insets so lists are not hidden behind fixed bars | Scroll content obscured by sticky headers/footers |
+
+---
+
+## Pre-Delivery Checklist
+
+Before delivering UI code, verify these items:
+Scope notice: This checklist is for App UI (iOS/Android/React Native/Flutter).
+
+### Visual Quality
+- [ ] No emojis used as icons (use SVG instead)
+- [ ] All icons come from a consistent icon family and style
+- [ ] Official brand assets are used with correct proportions and clear space
+- [ ] Pressed-state visuals do not shift layout bounds or cause jitter
+- [ ] Semantic theme tokens are used consistently (no ad-hoc per-screen hardcoded colors)
+
+### Interaction
+- [ ] All tappable elements provide clear pressed feedback (ripple/opacity/elevation)
+- [ ] Touch targets meet minimum size (>=44x44pt iOS, >=48x48dp Android)
+- [ ] Micro-interaction timing stays in the 150-300ms range with native-feeling easing
+- [ ] Disabled states are visually clear and non-interactive
+- [ ] Screen reader focus order matches visual order, and interactive labels are descriptive
+- [ ] Gesture regions avoid nested/conflicting interactions (tap/drag/back-swipe conflicts)
+
+### Light/Dark Mode
+- [ ] Primary text contrast >=4.5:1 in both light and dark mode
+- [ ] Secondary text contrast >=3:1 in both light and dark mode
+- [ ] Dividers/borders and interaction states are distinguishable in both modes
+- [ ] Modal/drawer scrim opacity is strong enough to preserve foreground legibility (typically 40-60% black)
+- [ ] Both themes are tested before delivery (not inferred from a single theme)
+
+### Layout
+- [ ] Safe areas are respected for headers, tab bars, and bottom CTA bars
+- [ ] Scroll content is not hidden behind fixed/sticky bars
+- [ ] Verified on small phone, large phone, and tablet (portrait + landscape)
+- [ ] Horizontal insets/gutters adapt correctly by device size and orientation
+- [ ] 4/8dp spacing rhythm is maintained across component, section, and page levels
+- [ ] Long-form text measure remains readable on larger devices (no edge-to-edge paragraphs)
+
+### Accessibility
+- [ ] All meaningful images/icons have accessibility labels
+- [ ] Form fields have labels, hints, and clear error messages
+- [ ] Color is not the only indicator
+- [ ] Reduced motion and dynamic text size are supported without layout breakage
+- [ ] Accessibility traits/roles/states (selected, disabled, expanded) are announced correctly
\ No newline at end of file
diff --git a/.claude/skills/ui-ux-pro-max/data/_sync_all.py b/.claude/skills/ui-ux-pro-max/data/_sync_all.py
new file mode 100644
index 000000000..37f7c3ac3
--- /dev/null
+++ b/.claude/skills/ui-ux-pro-max/data/_sync_all.py
@@ -0,0 +1,414 @@
+#!/usr/bin/env python3
+"""
+Sync colors.csv and ui-reasoning.csv with the updated products.csv (161 entries).
+- Remove deleted product types
+- Rename mismatched entries
+- Add new entries for missing product types
+- Keep colors.csv aligned 1:1 with products.csv
+- Renumber everything
+"""
+import csv, os, json
+
+BASE = os.path.dirname(os.path.abspath(__file__))
+
+# ─── Color derivation helpers ────────────────────────────────────────────────
+def h2r(h):
+    h = h.lstrip("#")
+    return tuple(int(h[i:i+2], 16) for i in (0, 2, 4))
+
+def r2h(r, g, b):
+    return f"#{max(0,min(255,int(r))):02X}{max(0,min(255,int(g))):02X}{max(0,min(255,int(b))):02X}"
+
+def lum(h):
+    r, g, b = [x/255.0 for x in h2r(h)]
+    r, g, b = [(x/12.92 if x<=0.03928 else ((x+0.055)/1.055)**2.4) for x in (r, g, b)]
+    return 0.2126*r + 0.7152*g + 0.0722*b
+
+def is_dark(bg):
+    return lum(bg) < 0.18
+
+def on_color(bg):
+    return "#FFFFFF" if lum(bg) < 0.4 else "#0F172A"
+
+def blend(a, b, f=0.15):
+    ra, ga, ba = h2r(a)
+    rb, gb, bb = h2r(b)
+    return r2h(ra+(rb-ra)*f, ga+(gb-ga)*f, ba+(bb-ba)*f)
+
+def shift(h, n):
+    r, g, b = h2r(h)
+    return r2h(r+n, g+n, b+n)
+
+def derive_row(pt, pri, sec, acc, bg, notes=""):
+    """Generate full 16-token color row from 4 base colors."""
+    dark = is_dark(bg)
+    fg = "#FFFFFF" if dark else "#0F172A"
+    on_pri = on_color(pri)
+    on_sec = on_color(sec)
+    on_acc = on_color(acc)
+    card = shift(bg, 10) if dark else "#FFFFFF"
+    card_fg = "#FFFFFF" if dark else "#0F172A"
+    muted = blend(bg, pri, 0.08) if dark else blend("#FFFFFF", pri, 0.06)
+    muted_fg = "#94A3B8" if dark else "#64748B"
+    border = f"rgba(255,255,255,0.08)" if dark else blend("#FFFFFF", pri, 0.12)
+    destr = "#DC2626"
+    on_destr = "#FFFFFF"
+    ring = pri
+    return [pt, pri, on_pri, sec, on_sec, acc, on_acc, bg, fg, card, card_fg, muted, muted_fg, border, destr, on_destr, ring, notes]
+
+# ─── Rename maps ─────────────────────────────────────────────────────────────
+COLOR_RENAMES = {
+    "Quantum Computing": "Quantum Computing Interface",
+    "Biohacking / Longevity": "Biohacking / Longevity App",
+    "Autonomous Systems": "Autonomous Drone Fleet Manager",
+    "Generative AI Art": "Generative Art Platform",
+    "Spatial / Vision OS": "Spatial Computing OS / App",
+    "Climate Tech": "Sustainable Energy / Climate Tech",
+}
+UI_RENAMES = {
+    "Architecture/Interior": "Architecture / Interior",
+    "Autonomous Drone Fleet": "Autonomous Drone Fleet Manager",
+    "B2B SaaS Enterprise": "B2B Service",
+    "Biohacking/Longevity App": "Biohacking / Longevity App",
+    "Biotech/Life Sciences": "Biotech / Life Sciences",
+    "Developer Tool/IDE": "Developer Tool / IDE",
+    "Education": "Educational App",
+    "Fintech (Banking)": "Fintech/Crypto",
+    "Government/Public": "Government/Public Service",
+    "Home Services": "Home Services (Plumber/Electrician)",
+    "Micro-Credentials/Badges": "Micro-Credentials/Badges Platform",
+    "Music/Entertainment": "Music Streaming",
+    "Quantum Computing": "Quantum Computing Interface",
+    "Real Estate": "Real Estate/Property",
+    "Remote Work/Collaboration": "Remote Work/Collaboration Tool",
+    "Restaurant/Food": "Restaurant/Food Service",
+    "SaaS Dashboard": "Analytics Dashboard",
+    "Space Tech/Aerospace": "Space Tech / Aerospace",
+    "Spatial Computing OS": "Spatial Computing OS / App",
+    "Startup Landing": "Micro SaaS",
+    "Sustainable Energy/Climate": "Sustainable Energy / Climate Tech",
+    "Travel/Tourism": "Travel/Tourism Agency",
+    "Wellness/Mental Health": "Mental Health App",
+}
+
+REMOVE_TYPES = {
+    "Service Landing Page", "Sustainability/ESG Platform",
+    "Cleaning Service", "Coffee Shop",
+    "Consulting Firm", "Conference/Webinar Platform",
+}
+
+# ─── New color definitions: (primary, secondary, accent, bg, notes) ──────────
+# Grouped by category for clarity. Each tuple generates a full 16-token row.
+NEW_COLORS = {
+    # ── Old #97-#116 that never got colors ──
+    "Todo & Task Manager":         ("#2563EB","#3B82F6","#059669","#F8FAFC","Functional blue + progress green"),
+    "Personal Finance Tracker":    ("#1E40AF","#3B82F6","#059669","#0F172A","Trust blue + profit green on dark"),
+    "Chat & Messaging App":        ("#2563EB","#6366F1","#059669","#FFFFFF","Messenger blue + online green"),
+    "Notes & Writing App":         ("#78716C","#A8A29E","#D97706","#FFFBEB","Warm ink + amber accent on cream"),
+    "Habit Tracker":               ("#D97706","#F59E0B","#059669","#FFFBEB","Streak amber + habit green"),
+    "Food Delivery / On-Demand":   ("#EA580C","#F97316","#2563EB","#FFF7ED","Appetizing orange + trust blue"),
+    "Ride Hailing / Transportation":("#1E293B","#334155","#2563EB","#0F172A","Map dark + route blue"),
+    "Recipe & Cooking App":        ("#9A3412","#C2410C","#059669","#FFFBEB","Warm terracotta + fresh green"),
+    "Meditation & Mindfulness":    ("#7C3AED","#8B5CF6","#059669","#FAF5FF","Calm lavender + mindful green"),
+    "Weather App":                 ("#0284C7","#0EA5E9","#F59E0B","#F0F9FF","Sky blue + sun amber"),
+    "Diary & Journal App":         ("#92400E","#A16207","#6366F1","#FFFBEB","Warm journal brown + ink violet"),
+    "CRM & Client Management":     ("#2563EB","#3B82F6","#059669","#F8FAFC","Professional blue + deal green"),
+    "Inventory & Stock Management":("#334155","#475569","#059669","#F8FAFC","Industrial slate + stock green"),
+    "Flashcard & Study Tool":      ("#7C3AED","#8B5CF6","#059669","#FAF5FF","Study purple + correct green"),
+    "Booking & Appointment App":   ("#0284C7","#0EA5E9","#059669","#F0F9FF","Calendar blue + available green"),
+    "Invoice & Billing Tool":      ("#1E3A5F","#2563EB","#059669","#F8FAFC","Navy professional + paid green"),
+    "Grocery & Shopping List":     ("#059669","#10B981","#D97706","#ECFDF5","Fresh green + food amber"),
+    "Timer & Pomodoro":            ("#DC2626","#EF4444","#059669","#0F172A","Focus red on dark + break green"),
+    "Parenting & Baby Tracker":    ("#EC4899","#F472B6","#0284C7","#FDF2F8","Soft pink + trust blue"),
+    "Scanner & Document Manager":  ("#1E293B","#334155","#2563EB","#F8FAFC","Document grey + scan blue"),
+    # ── A. Utility / Productivity ──
+    "Calendar & Scheduling App":   ("#2563EB","#3B82F6","#059669","#F8FAFC","Calendar blue + event green"),
+    "Password Manager":            ("#1E3A5F","#334155","#059669","#0F172A","Vault dark blue + secure green"),
+    "Expense Splitter / Bill Split":("#059669","#10B981","#DC2626","#F8FAFC","Balance green + owe red"),
+    "Voice Recorder & Memo":       ("#DC2626","#EF4444","#2563EB","#FFFFFF","Recording red + waveform blue"),
+    "Bookmark & Read-Later":       ("#D97706","#F59E0B","#2563EB","#FFFBEB","Warm amber + link blue"),
+    "Translator App":              ("#2563EB","#0891B2","#EA580C","#F8FAFC","Global blue + teal + accent orange"),
+    "Calculator & Unit Converter": ("#EA580C","#F97316","#2563EB","#1C1917","Operation orange on dark"),
+    "Alarm & World Clock":         ("#D97706","#F59E0B","#6366F1","#0F172A","Time amber + night indigo on dark"),
+    "File Manager & Transfer":     ("#2563EB","#3B82F6","#D97706","#F8FAFC","Folder blue + file amber"),
+    "Email Client":                ("#2563EB","#3B82F6","#DC2626","#FFFFFF","Inbox blue + priority red"),
+    # ── B. Games ──
+    "Casual Puzzle Game":          ("#EC4899","#8B5CF6","#F59E0B","#FDF2F8","Cheerful pink + reward gold"),
+    "Trivia & Quiz Game":          ("#2563EB","#7C3AED","#F59E0B","#EFF6FF","Quiz blue + gold leaderboard"),
+    "Card & Board Game":           ("#15803D","#166534","#D97706","#0F172A","Felt green + gold on dark"),
+    "Idle & Clicker Game":         ("#D97706","#F59E0B","#7C3AED","#FFFBEB","Coin gold + prestige purple"),
+    "Word & Crossword Game":       ("#15803D","#059669","#D97706","#FFFFFF","Word green + letter amber"),
+    "Arcade & Retro Game":         ("#DC2626","#2563EB","#22C55E","#0F172A","Neon red+blue on dark + score green"),
+    # ── C. Creator Tools ──
+    "Photo Editor & Filters":      ("#7C3AED","#6366F1","#0891B2","#0F172A","Editor violet + filter cyan on dark"),
+    "Short Video Editor":          ("#EC4899","#DB2777","#2563EB","#0F172A","Video pink on dark + timeline blue"),
+    "Drawing & Sketching Canvas":  ("#7C3AED","#8B5CF6","#0891B2","#1C1917","Canvas purple + tool teal on dark"),
+    "Music Creation & Beat Maker": ("#7C3AED","#6366F1","#22C55E","#0F172A","Studio purple + waveform green on dark"),
+    "Meme & Sticker Maker":        ("#EC4899","#F59E0B","#2563EB","#FFFFFF","Viral pink + comedy yellow + share blue"),
+    "AI Photo & Avatar Generator": ("#7C3AED","#6366F1","#EC4899","#FAF5FF","AI purple + generation pink"),
+    "Link-in-Bio Page Builder":    ("#2563EB","#7C3AED","#EC4899","#FFFFFF","Brand blue + creator purple"),
+    # ── D. Personal Life ──
+    "Wardrobe & Outfit Planner":   ("#BE185D","#EC4899","#D97706","#FDF2F8","Fashion rose + gold accent"),
+    "Plant Care Tracker":          ("#15803D","#059669","#D97706","#F0FDF4","Nature green + sun yellow"),
+    "Book & Reading Tracker":      ("#78716C","#92400E","#D97706","#FFFBEB","Book brown + page amber"),
+    "Couple & Relationship App":   ("#BE185D","#EC4899","#DC2626","#FDF2F8","Romance rose + love red"),
+    "Family Calendar & Chores":    ("#2563EB","#059669","#D97706","#F8FAFC","Family blue + chore green"),
+    "Mood Tracker":                ("#7C3AED","#6366F1","#D97706","#FAF5FF","Mood purple + insight amber"),
+    "Gift & Wishlist":             ("#DC2626","#D97706","#EC4899","#FFF1F2","Gift red + gold + surprise pink"),
+    # ── E. Health ──
+    "Running & Cycling GPS":       ("#EA580C","#F97316","#059669","#0F172A","Energetic orange + pace green on dark"),
+    "Yoga & Stretching Guide":     ("#6B7280","#78716C","#0891B2","#F5F5F0","Sage neutral + calm teal"),
+    "Sleep Tracker":               ("#4338CA","#6366F1","#7C3AED","#0F172A","Night indigo + dream violet on dark"),
+    "Calorie & Nutrition Counter": ("#059669","#10B981","#EA580C","#ECFDF5","Healthy green + macro orange"),
+    "Period & Cycle Tracker":      ("#BE185D","#EC4899","#7C3AED","#FDF2F8","Blush rose + fertility lavender"),
+    "Medication & Pill Reminder":  ("#0284C7","#0891B2","#DC2626","#F0F9FF","Medical blue + alert red"),
+    "Water & Hydration Reminder":  ("#0284C7","#06B6D4","#0891B2","#F0F9FF","Refreshing blue + water cyan"),
+    "Fasting & Intermittent Timer":("#6366F1","#4338CA","#059669","#0F172A","Fasting indigo on dark + eating green"),
+    # ── F. Social ──
+    "Anonymous Community / Confession":("#475569","#334155","#0891B2","#0F172A","Protective grey + subtle teal on dark"),
+    "Local Events & Discovery":    ("#EA580C","#F97316","#2563EB","#FFF7ED","Event orange + map blue"),
+    "Study Together / Virtual Coworking":("#2563EB","#3B82F6","#059669","#F8FAFC","Focus blue + session green"),
+    # ── G. Education ──
+    "Coding Challenge & Practice": ("#22C55E","#059669","#D97706","#0F172A","Code green + difficulty amber on dark"),
+    "Kids Learning (ABC & Math)":  ("#2563EB","#F59E0B","#EC4899","#EFF6FF","Learning blue + play yellow + fun pink"),
+    "Music Instrument Learning":   ("#DC2626","#9A3412","#D97706","#FFFBEB","Musical red + warm amber"),
+    # ── H. Transport ──
+    "Parking Finder":              ("#2563EB","#059669","#DC2626","#F0F9FF","Available blue/green + occupied red"),
+    "Public Transit Guide":        ("#2563EB","#0891B2","#EA580C","#F8FAFC","Transit blue + line colors"),
+    "Road Trip Planner":           ("#EA580C","#0891B2","#D97706","#FFF7ED","Adventure orange + map teal"),
+    # ── I. Safety & Lifestyle ──
+    "VPN & Privacy Tool":          ("#1E3A5F","#334155","#22C55E","#0F172A","Shield dark + connected green"),
+    "Emergency SOS & Safety":      ("#DC2626","#EF4444","#2563EB","#FFF1F2","Alert red + safety blue"),
+    "Wallpaper & Theme App":       ("#7C3AED","#EC4899","#2563EB","#FAF5FF","Aesthetic purple + trending pink"),
+    "White Noise & Ambient Sound": ("#475569","#334155","#4338CA","#0F172A","Ambient grey + deep indigo on dark"),
+    "Home Decoration & Interior Design":("#78716C","#A8A29E","#D97706","#FAF5F2","Interior warm grey + gold accent"),
+}
+
+# ─── 1. REBUILD colors.csv ───────────────────────────────────────────────────
+def rebuild_colors():
+    src = os.path.join(BASE, "colors.csv")
+    with open(src, newline="", encoding="utf-8") as f:
+        reader = csv.DictReader(f)
+        headers = reader.fieldnames
+        existing = list(reader)
+
+    # Build lookup: Product Type -> row data
+    color_map = {}
+    for row in existing:
+        pt = row.get("Product Type", "").strip()
+        if not pt:
+            continue
+        # Remove deleted types
+        if pt in REMOVE_TYPES:
+            print(f"  [colors] REMOVE: {pt}")
+            continue
+        # Rename mismatched types
+        if pt in COLOR_RENAMES:
+            new_name = COLOR_RENAMES[pt]
+            print(f"  [colors] RENAME: {pt} → {new_name}")
+            row["Product Type"] = new_name
+            pt = new_name
+        color_map[pt] = row
+
+    # Read products.csv to get the correct order
+    with open(os.path.join(BASE, "products.csv"), newline="", encoding="utf-8") as f:
+        products = list(csv.DictReader(f))
+
+    # Build final rows in products.csv order
+    final_rows = []
+    added = 0
+    for i, prod in enumerate(products, 1):
+        pt = prod["Product Type"]
+        if pt in color_map:
+            row = color_map[pt]
+            row["No"] = str(i)
+            final_rows.append(row)
+        elif pt in NEW_COLORS:
+            pri, sec, acc, bg, notes = NEW_COLORS[pt]
+            new_row = derive_row(pt, pri, sec, acc, bg, notes)
+            d = dict(zip(headers, [str(i)] + new_row))
+            final_rows.append(d)
+            added += 1
+        else:
+            print(f"  [colors] WARNING: No color data for '{pt}' - using defaults")
+            new_row = derive_row(pt, "#2563EB", "#3B82F6", "#059669", "#F8FAFC", "Auto-generated default")
+            d = dict(zip(headers, [str(i)] + new_row))
+            final_rows.append(d)
+            added += 1
+
+    # Write
+    with open(src, "w", newline="", encoding="utf-8") as f:
+        writer = csv.DictWriter(f, fieldnames=headers)
+        writer.writeheader()
+        writer.writerows(final_rows)
+
+    product_count = len(products)
+    print(f"\n  ✅ colors.csv: {len(final_rows)} rows ({product_count} products)")
+    print(f"     Added: {added} new color rows")
+
+# ─── 2. REBUILD ui-reasoning.csv ─────────────────────────────────────────────
+def derive_ui_reasoning(prod):
+    """Generate ui-reasoning row from products.csv row."""
+    pt = prod["Product Type"]
+    style = prod.get("Primary Style Recommendation", "")
+    landing = prod.get("Landing Page Pattern", "")
+    color_focus = prod.get("Color Palette Focus", "")
+    considerations = prod.get("Key Considerations", "")
+    keywords = prod.get("Keywords", "")
+
+    # Typography mood derived from style
+    typo_map = {
+        "Minimalism": "Professional + Clean hierarchy",
+        "Glassmorphism": "Modern + Clear hierarchy",
+        "Brutalism": "Bold + Oversized + Monospace",
+        "Claymorphism": "Playful + Rounded + Friendly",
+        "Dark Mode": "High contrast + Light on dark",
+        "Neumorphism": "Subtle + Soft + Monochromatic",
+        "Flat Design": "Bold + Clean + Sans-serif",
+        "Vibrant": "Energetic + Bold + Large",
+        "Aurora": "Elegant + Gradient-friendly",
+        "AI-Native": "Conversational + Minimal chrome",
+        "Organic": "Warm + Humanist + Natural",
+        "Motion": "Dynamic + Hierarchy-shifting",
+        "Accessible": "Large + High contrast + Clear",
+        "Soft UI": "Modern + Accessible + Balanced",
+        "Trust": "Professional + Serif accents",
+        "Swiss": "Grid-based + Mathematical + Helvetica",
+        "3D": "Immersive + Spatial + Variable",
+        "Retro": "Nostalgic + Monospace + Neon",
+        "Cyberpunk": "Terminal + Monospace + Neon",
+        "Pixel": "Retro + Blocky + 8-bit",
+    }
+    typo_mood = "Professional + Clear hierarchy"
+    for key, val in typo_map.items():
+        if key.lower() in style.lower():
+            typo_mood = val
+            break
+
+    # Key effects from style
+    eff_map = {
+        "Glassmorphism": "Backdrop blur (10-20px) + Translucent overlays",
+        "Neumorphism": "Dual shadows (light+dark) + Soft press 150ms",
+        "Claymorphism": "Multi-layer shadows + Spring bounce + Soft press 200ms",
+        "Brutalism": "No transitions + Hard borders + Instant feedback",
+        "Dark Mode": "Subtle glow + Neon accents + High contrast",
+        "Flat Design": "Color shift hover + Fast 150ms transitions + No shadows",
+        "Minimalism": "Subtle hover 200ms + Smooth transitions + Clean",
+        "Motion-Driven": "Scroll animations + Parallax + Page transitions",
+        "Micro-interactions": "Haptic feedback + Small 50-100ms animations",
+        "Vibrant": "Large section gaps 48px+ + Color shift hover + Scroll-snap",
+        "Aurora": "Flowing gradients 8-12s + Color morphing",
+        "AI-Native": "Typing indicator + Streaming text + Context reveal",
+        "Organic": "Rounded 16-24px + Natural shadows + Flowing SVG",
+        "Soft UI": "Improved shadows + Modern 200-300ms + Focus visible",
+        "3D": "WebGL/Three.js + Parallax 3-5 layers + Physics 300-400ms",
+        "Trust": "Clear focus rings + Badge hover + Metric pulse",
+        "Accessible": "Focus rings 3-4px + ARIA + Reduced motion",
+    }
+    key_effects = "Subtle hover (200ms) + Smooth transitions"
+    for key, val in eff_map.items():
+        if key.lower() in style.lower():
+            key_effects = val
+            break
+
+    # Decision rules
+    rules = {}
+    if "dark" in style.lower() or "oled" in style.lower():
+        rules["if_light_mode_needed"] = "provide-theme-toggle"
+    if "glass" in style.lower():
+        rules["if_low_performance"] = "fallback-to-flat"
+    if "conversion" in landing.lower():
+        rules["if_conversion_focused"] = "add-urgency-colors"
+    if "social" in landing.lower():
+        rules["if_trust_needed"] = "add-testimonials"
+    if "data" in keywords.lower() or "dashboard" in keywords.lower():
+        rules["if_data_heavy"] = "prioritize-data-density"
+    if not rules:
+        rules["if_ux_focused"] = "prioritize-clarity"
+        rules["if_mobile"] = "optimize-touch-targets"
+
+    # Anti-patterns
+    anti_patterns = []
+    if "minimalism" in style.lower() or "minimal" in style.lower():
+        anti_patterns.append("Excessive decoration")
+    if "dark" in style.lower():
+        anti_patterns.append("Pure white backgrounds")
+    if "flat" in style.lower():
+        anti_patterns.append("Complex shadows + 3D effects")
+    if "vibrant" in style.lower():
+        anti_patterns.append("Muted colors + Low energy")
+    if "accessible" in style.lower():
+        anti_patterns.append("Color-only indicators")
+    if not anti_patterns:
+        anti_patterns = ["Inconsistent styling", "Poor contrast ratios"]
+    anti_str = " + ".join(anti_patterns[:2])
+
+    return {
+        "UI_Category": pt,
+        "Recommended_Pattern": landing,
+        "Style_Priority": style,
+        "Color_Mood": color_focus,
+        "Typography_Mood": typo_mood,
+        "Key_Effects": key_effects,
+        "Decision_Rules": json.dumps(rules),
+        "Anti_Patterns": anti_str,
+        "Severity": "HIGH"
+    }
+
+
+def rebuild_ui_reasoning():
+    src = os.path.join(BASE, "ui-reasoning.csv")
+    with open(src, newline="", encoding="utf-8") as f:
+        reader = csv.DictReader(f)
+        headers = reader.fieldnames
+        existing = list(reader)
+
+    # Build lookup
+    ui_map = {}
+    for row in existing:
+        cat = row.get("UI_Category", "").strip()
+        if not cat:
+            continue
+        if cat in REMOVE_TYPES:
+            print(f"  [ui-reason] REMOVE: {cat}")
+            continue
+        if cat in UI_RENAMES:
+            new_name = UI_RENAMES[cat]
+            print(f"  [ui-reason] RENAME: {cat} → {new_name}")
+            row["UI_Category"] = new_name
+            cat = new_name
+        ui_map[cat] = row
+
+    with open(os.path.join(BASE, "products.csv"), newline="", encoding="utf-8") as f:
+        products = list(csv.DictReader(f))
+
+    final_rows = []
+    added = 0
+    for i, prod in enumerate(products, 1):
+        pt = prod["Product Type"]
+        if pt in ui_map:
+            row = ui_map[pt]
+            row["No"] = str(i)
+            final_rows.append(row)
+        else:
+            row = derive_ui_reasoning(prod)
+            row["No"] = str(i)
+            final_rows.append(row)
+            added += 1
+
+    with open(src, "w", newline="", encoding="utf-8") as f:
+        writer = csv.DictWriter(f, fieldnames=headers)
+        writer.writeheader()
+        writer.writerows(final_rows)
+
+    print(f"\n  ✅ ui-reasoning.csv: {len(final_rows)} rows")
+    print(f"     Added: {added} new reasoning rows")
+
+
+# ─── MAIN ────────────────────────────────────────────────────────────────────
+if __name__ == "__main__":
+    print("=== Rebuilding colors.csv ===")
+    rebuild_colors()
+    print("\n=== Rebuilding ui-reasoning.csv ===")
+    rebuild_ui_reasoning()
+    print("\n🎉 Done!")
diff --git a/.claude/skills/ui-ux-pro-max/data/app-interface.csv b/.claude/skills/ui-ux-pro-max/data/app-interface.csv
new file mode 100644
index 000000000..f34c3cd0d
--- /dev/null
+++ b/.claude/skills/ui-ux-pro-max/data/app-interface.csv
@@ -0,0 +1,31 @@
+No,Category,Issue,Keywords,Platform,Description,Do,Don't,Code Example Good,Code Example Bad,Severity
+1,Accessibility,Icon Button Labels,icon button accessibilityLabel,iOS/Android/React Native,Icon-only buttons must expose an accessible label,Set accessibilityLabel or label prop on icon buttons,Icon buttons without accessible names,"<Pressable accessibilityLabel=""Close""><XIcon /></Pressable>","<Pressable><XIcon /></Pressable>",Critical
+2,Accessibility,Form Control Labels,form input label accessibilityLabel,iOS/Android/React Native,All inputs must have a visible label and an accessibility label,Pair Text label with input and set accessibilityLabel,Inputs with placeholder only,"<View><Text>Email</Text><TextInput accessibilityLabel=""Email address"" /></View>","<TextInput placeholder=""Email"" /></View>",Critical
+3,Accessibility,Role & Traits,accessibilityRole accessibilityTraits,iOS/Android/React Native,Interactive elements must expose correct roles/traits,Use accessibilityRole/button/link/checkbox etc.,Rely on generic views with no roles,"<Pressable accessibilityRole=""button"">Submit</Pressable>","<View onTouchStart={submit}>Submit</View>",High
+4,Accessibility,Dynamic Updates,accessibilityLiveRegion announce,iOS/Android/React Native,Async status updates should be announced to screen readers,Use accessibilityLiveRegion or announceForAccessibility,Update text silently with no announcement,"<Text accessibilityLiveRegion=""polite"">{status}</Text>","<Text>{status}</Text>",Medium
+5,Accessibility,Decorative Icons,accessible={false} importantForAccessibility,iOS/Android/React Native,Decorative icons should be hidden from screen readers,Mark decorative icons as not accessible,Have screen reader read every icon,"<Icon accessible={false} importantForAccessibility=""no"" />","<Icon />",Medium
+6,Touch,Touch Target Size,touch 44x44 hitSlop,iOS/Android/React Native,Primary touch targets must be at least 44x44pt,Increase hitSlop or padding to meet minimum,Small icons with tiny touch area,"<Pressable hitSlop={10}><Icon /></Pressable>","<Pressable><Icon style={{ width: 16, height: 16 }} /></Pressable>",Critical
+7,Touch,Touch Spacing,touch spacing gap 8px,iOS/Android/React Native,Adjacent touch targets need enough spacing,Keep at least 8dp spacing between touchables,Cluster many buttons with no gap,"<View style={{ gap: 8 }}><Button ... /><Button ... /></View>","<View><Button ... /><Button ... /></View>",Medium
+8,Touch,Gesture Conflicts,scroll swipe back gesture,iOS/Android/React Native,Custom gestures must not break system scroll/back,Reserve horizontal swipes for carousels,Full-screen custom swipe conflicting with back,"HorizontalPager inside vertical ScrollView","PanResponder on full screen blocking back",High
+9,Navigation,Back Behavior,back handler navigation stack,iOS/Android/React Native,Back navigation should be predictable and preserve state,Use navigation.goBack and keep screen state,Reset stack or exit app unexpectedly,onPress={() => navigation.goBack()},"BackHandler.exitApp() on first press",Critical
+10,Navigation,Bottom Tabs,tab bar max items,iOS/Android/React Native,Bottom tab bar should have at most 5 primary items,Use 3–5 tabs and move extras to More/Settings,Overloaded tab bar with many icons,Home/Explore/Profile/Settings,"Home/Explore/Shop/Cart/Profile/Settings/More",Medium
+11,Navigation,Modal Escape,modal dismiss close affordance,iOS/Android/React Native,Modals/sheets must have clear close actions,Provide close button and swipe-down where platform expects,Trapping users in modal with no obvious exit,"<Modal><Button title=""Close"" onPress={onClose} /></Modal>","<Modal><View>{children}</View></Modal>",High
+12,State,Preserve Screen State,navigation preserve state,iOS/Android/React Native,Returning to a screen should restore its scroll and form state,Keep components mounted or persist state,Reset list scroll and form inputs on every visit,"<Tab.Navigator screenOptions={{ unmountOnBlur: false }}>","<Tab.Screen options={{ unmountOnBlur: true }} />",Medium
+13,Feedback,Loading Indicators,activity indicator skeleton,iOS/Android/React Native,Show visible feedback during network operations,Use ActivityIndicator or skeleton for >300ms operations,Leave button and screen frozen,"{loading ? <ActivityIndicator /> : <Button title=""Save"" />}", "<Button title=""Save"" onPress={submit} /> // no loading",High
+14,Feedback,Success Feedback,toast checkmark banner,iOS/Android/React Native,Confirm successful actions with brief feedback,Show toast/checkmark or banner,Complete actions silently with no confirmation,"showToast('Saved successfully')","// silently update state only",Medium
+15,Feedback,Error Feedback,inline error banner,iOS/Android/React Native,Show clear error messages near the problem,input-level error + summary banner,Only change border color with no explanation,"<TextInput ... /><Text style={{color:'red'}}>{error}</Text>","<TextInput style={{borderColor:'red'}} />",High
+16,Forms,Inline Validation,onBlur validation,iOS/Android/React Native,Validate inputs on blur or submit with clear messaging,Validate onBlur and onSubmit,Validate on every keystroke causing jank,"onBlur={() => validateEmail(value)}","onChangeText={v => validateEmail(v)} // every char",Medium
+17,Forms,Keyboard Type,keyboardType returnKeyType,iOS/Android/React Native,Use appropriate keyboardType and returnKeyType,Match email/tel/number/search types,Use default keyboard for all inputs,"<TextInput keyboardType=""email-address"" />","<TextInput keyboardType=""default"" />",Medium
+18,Forms,Auto Focus & Next,autoFocus blurOnSubmit onSubmitEditing,iOS/Android/React Native,Guide users through form fields with Next/Done flows,Use onSubmitEditing to focus next input,Force users to tap each field manually,"onSubmitEditing={() => nextRef.current?.focus()}","// no onSubmitEditing, manual tap only",Low
+19,Forms,Password Visibility,secureTextEntry toggle,iOS/Android/React Native,Allow toggling password visibility securely,Provide Show/Hide icon toggling secureTextEntry,Force users to type blind with no option,"<TextInput secureTextEntry={secure} /><Icon onPress={toggle} />","<TextInput secureTextEntry /> // no toggle",Medium
+20,Performance,Virtualize Long Lists,FlatList SectionList virtualization,iOS/Android/React Native,Use FlatList/SectionList for lists over ~50 items,Use keyExtractor and initialNumToRender appropriately,Render hundreds of items with ScrollView,"<FlatList data={items} renderItem={...} />","<ScrollView>{items.map(renderItem)}</ScrollView>",High
+21,Performance,Image Size & Cache,Image resize cache,iOS/Android/React Native,Use correctly sized and cached images,Use Image component with proper resizeMode and caching,Load full-resolution images everywhere,"<Image source={{uri}} resizeMode=""cover"" />","<Image source={require('4k.png')} /> // small avatar",Medium
+22,Performance,Debounce High-Freq Events,debounce scroll search,iOS/Android/React Native,Debounce scroll/search callbacks to avoid jank,Wrap handlers with debounce/throttle,Run heavy logic on every event,"onScroll={debouncedHandleScroll}","onScroll={handleScrollHeavy}",Medium
+23,Animation,Duration & Easing,animation duration easing,iOS/Android/React Native,Micro-interactions should be 150–300ms with native-like easing,Use ease-out for enter/ease-in for exit,Use long or linear animations for core UI,"Animated.timing(..., { duration: 200, easing: Easing.out(Easing.quad) })","Animated.timing(..., { duration: 800, easing: Easing.linear })",Medium
+24,Animation,Respect Reduced Motion,reduced motion accessibility,iOS/Android/React Native,Respect OS reduced-motion accessibility setting,Check reduceMotionEnabled and simplify animations,Ignore user motion preferences,"if (reduceMotionEnabled) skipAnimation()","Always run complex parallax animations",Critical
+25,Animation,Limited Continuous Motion,loop animation loader,iOS/Android/React Native,Reserve infinite animations for loaders and live data,Use looping only where necessary,Keep decorative elements looping forever,"Animated.loop(loaderAnim) for ActivityIndicator","Animated.loop(bounceAnim) on background icons",Medium
+26,Typography,Base Font Size,fontScale dynamic type,iOS/Android/React Native,Body text must be readable and support Dynamic Type,Use platform fontScale and at least 14–16pt base,Render critical text below 12pt,"<Text style={{ fontSize: 16 }}>Body</Text>","<Text style={{ fontSize: 10 }}>Body</Text>",High
+27,Typography,Dynamic Type Support,allowFontScaling adjustsFontSizeToFit,iOS/Android/React Native,Support system text scaling without breaking layout,Set allowFontScaling and test large text,Disable scaling on all text globally,"<Text allowFontScaling>{label}</Text>","<Text allowFontScaling={false}>{label}</Text>",High
+28,Safe Areas,Safe Area Insets,safe area insets notch gesture,iOS/Android/React Native,Content must not overlap notches/gesture bars,Wrap screens in SafeAreaView or apply insets,Place tappable content under system bars,"<SafeAreaView style={{ flex: 1 }}><Screen /></SafeAreaView>","<View style={{ flex: 1 }}><Screen /></View>",High
+29,Theming,Light/Dark Contrast,dark mode contrast tokens,iOS/Android/React Native,Ensure sufficient contrast in both light and dark themes,Use semantic tokens and test both themes,Reuse light-theme grays directly in dark mode,"colors.textPrimaryDark = '#F9FAFB'","colors.textPrimaryDark = '#9CA3AF' on '#111827'",High
+30,Anti-Pattern,No Gesture-Only Actions,gesture only hidden controls,iOS/Android/React Native,Don't rely solely on hidden gestures for core actions,Provide visible buttons in addition to gestures,Rely on swipe/shake only with no UI affordance,"Swipe to delete + visible Delete button","Only shake device to undo with no UI",Critical
\ No newline at end of file
diff --git a/.claude/skills/ui-ux-pro-max/data/charts.csv b/.claude/skills/ui-ux-pro-max/data/charts.csv
new file mode 100644
index 000000000..c27b726c1
--- /dev/null
+++ b/.claude/skills/ui-ux-pro-max/data/charts.csv
@@ -0,0 +1,26 @@
+No,Data Type,Keywords,Best Chart Type,Secondary Options,When to Use,When NOT to Use,Data Volume Threshold,Color Guidance,Accessibility Grade,Accessibility Notes,A11y Fallback,Library Recommendation,Interactive Level
+1,Trend Over Time,"trend, time-series, line, growth, timeline, progress",Line Chart,"Area Chart, Smooth Area","Data has a time axis; user needs to observe rise/fall trends or rate of change over a continuous period","Fewer than 4 data points (use stat card); more than 6 series (visual noise); no time dimension exists","<1000 pts: SVG; ≥1000 pts: Canvas + downsampling; >10000: aggregate to intervals","Primary: #0080FF. Multiple series: distinct colors + distinct line styles. Fill: 20% opacity",AA,"Differentiate series by line style (solid/dashed/dotted) not color alone. Add pattern overlays for colorblind users.","Dashed/dotted lines per series; togglable data table with timestamps and values","Chart.js, Recharts, ApexCharts",Hover + Zoom
+2,Compare Categories,"compare, categories, bar, comparison, ranking",Bar Chart (Horizontal or Vertical),"Column Chart, Grouped Bar","Comparing discrete categories by magnitude; ranking or ordering is the core insight; categories ≤ 15","Categories > 15 (use table or search); data has time dimension (use line); showing proportions (use waffle/stacked)","<20 categories: vertical bar; 20–50: horizontal bar; >50: paginated table","Each bar: distinct color. Grouped: same hue family. Always sort descending by value",AAA,"Value labels on each bar by default. Sort control for user reordering.","Value labels always visible; provide CSV export","Chart.js, Recharts, D3.js",Hover + Sort
+3,Part-to-Whole,"part-to-whole, pie, donut, percentage, proportion, share",Pie Chart or Donut,"Stacked Bar, Waffle Chart","≤5 categories; one dominant segment vs rest; emphasis on visual proportion over exact values","Categories > 5; slice differences < 5% (visually indistinguishable); user needs precise values; accessibility-first context","Max 6 slices; beyond that switch to stacked bar 100%","5–6 max colors. Contrasting palette. Largest slice at 12 o'clock. Always label slices with %",C,"Pie charts fail WCAG for colorblind users. Slices rely on color alone. Avoid as primary chart in a11y contexts.","Must provide stacked bar alternative + percentage data table as mandatory fallback","Chart.js, Recharts, D3.js",Hover + Drill
+4,Correlation / Distribution,"correlation, distribution, scatter, relationship, pattern, cluster",Scatter Plot or Bubble Chart,"Heat Map, Matrix","Exploring relationship between two continuous variables; identifying clusters or outliers in a dataset","Variables are categorical (use grouped bar); fewer than 20 points (patterns aren't meaningful); mobile-primary context","<500 pts: SVG; 500–5000: Canvas at 0.6–0.8 opacity; >5000: hexbin or aggregate first","Color axis: gradient (blue → red). Bubble size: relative to 3rd variable. Opacity: 0.6–0.8 to show density",B,"Provide data table alternative. Combine color + shape distinction for colorblind users.","Data table with correlation coefficient annotation; shape markers (circle/square/triangle) per group","D3.js, Plotly, Recharts",Hover + Brush
+5,Heatmap / Intensity,"heatmap, heat-map, intensity, density, matrix, calendar",Heat Map or Choropleth,"Grid Heat Map, Bubble Heat","Showing intensity/density across a 2D grid; time-based patterns (e.g., activity by hour × day)","Fewer than 20 cells (use bar); user needs to read exact values; colorblind users without pattern fallback","Up to 10,000 cells efficiently; beyond that aggregate; calendar heatmap: 365 cells max per SVG","Gradient: Cool (blue) to Hot (red). Divergent scale for ±data. Always include numeric color legend",B,"Pattern overlay for colorblind users. Numerical value on hover. Legend must include scale ticks.","Numerical overlay on hover; downloadable grid table with row/column labels","D3.js, Plotly, ApexCharts",Hover + Zoom
+6,Geographic Data,"geographic, map, location, region, geo, spatial, choropleth",Choropleth Map or Bubble Map,Geographic Heat Map,"Data has a regional/location dimension; spatial distribution is the core insight for the user","Regions have very different sizes making visual comparison misleading (use bar); mobile-primary context","<1000 regions: SVG; ≥1000: Canvas/WebGL (Deck.gl); global maps: tile-based rendering","Single color gradient per region group. Categorized colors for discrete types. Legend with clear scale breaks",B,"Include text labels for major regions. Provide keyboard navigation between regions.","Region text labels; sortable data table by region name and value; keyboard-navigable regions","D3.js, Mapbox, Leaflet",Pan + Zoom + Drill
+7,Funnel / Flow,"funnel, flow, conversion, drop-off, pipeline, stages",Funnel Chart or Sankey,Waterfall (for flows),"Sequential multi-stage process; showing conversion or drop-off rates between defined stages","Stages aren't sequential; values don't decrease monotonically (use bar); fewer than 3 stages","3–8 stages optimal; beyond 8 stages group minor steps into 'Other'","Stages: single color gradient (start → end). Show conversion % between each stage. Highlight biggest drop",AA,"Explicit conversion % as text per stage. Stage labels always visible. Linear list view as fallback.","Provide linear list view with stage name + count + drop-off %; keyboard traversal","D3.js, Recharts, Custom SVG",Hover + Drill
+8,Performance vs Target,"performance, target, kpi, gauge, goal, threshold, progress",Gauge Chart or Bullet Chart,"Dial, Thermometer","Single KPI measured against a defined target or threshold; dashboard summary context","No target or benchmark exists; comparing multiple KPIs at once (use bullet chart grid)","Single metric per gauge; for 3+ KPIs use bullet chart grid layout","Performance: Red → Yellow → Green gradient. Target: marker line. Threshold zones clearly differentiated",AA,"Always show numerical value + % of target as text beside chart. Never rely on color position alone.","Numerical value + % of target shown as visible text; ARIA live region for real-time updates","D3.js, ApexCharts, Custom SVG",Hover
+9,Time-Series Forecast,"forecast, prediction, confidence, band, projection, estimate",Line with Confidence Band,Ribbon Chart,"Historical data + model predictions; communicating uncertainty range to non-technical stakeholders","No historical baseline; prediction confidence is too low to be useful; audience is not data-literate","Keep historical window to 30–90 days for readability; forecast horizon ≤ 30% of visible x-axis range","Actual: solid line #0080FF. Forecast: dashed #FF9500. Confidence band: 15% opacity fill same hue",AA,"Toggle between actual-only and forecast views. Legend must distinguish lines beyond color (solid vs dashed).","Toggle actual/forecast independently; legend labels must include line-style description","Chart.js, ApexCharts, Plotly",Hover + Toggle
+10,Anomaly Detection,"anomaly, outlier, spike, alert, detection, monitoring, deviation",Line Chart with Highlights,Scatter with Alert,"Monitoring a time-series for outliers; alerting users to unexpected spikes or dips in operational data","Anomalies are predefined categories (use bar with highlight); real-time context without a pause control","Stream at ≤60fps with Canvas; batch: up to 10,000 pts; mark anomalies as a separate data layer","Normal: #0080FF solid line. Anomaly marker: #FF0000 circle + filled. Alert band: #FFF3CD background zone",AA,"Use shape marker (not color only) for anomaly points. Add text annotation per anomaly event.","Text alert annotation per anomaly; anomaly summary list panel alongside chart","D3.js, Plotly, ApexCharts",Hover + Alert
+11,Hierarchical / Nested Data,"hierarchy, nested, treemap, parent, children, breakdown, drill",Treemap,"Sunburst, Nested Donut, Icicle","Showing size relationships within a hierarchy; overview of proportional structure (e.g., budget breakdown)","Hierarchy depth > 3 levels (too complex to read); user needs to compare sibling values precisely","<200 nodes: SVG; 200–1000: Canvas; >1000: paginate or pre-filter before rendering","Parent nodes: distinct hues. Children: lighter shades of same hue. White separator borders: 2–3px",C,"Poor baseline accessibility. Always provide table alternative as primary view. Label all large areas.","Collapsible tree table as primary view; treemap as supplementary visual only","D3.js, Recharts, ApexCharts",Hover + Drilldown
+12,Flow / Process Data,"flow, process, sankey, distribution, source, target, transfer",Sankey Diagram,"Alluvial, Chord Diagram","Showing how quantities flow between nodes; multi-source multi-target distribution","Flow directions form loops (use network graph); fewer than 3 source-target pairs; mobile-primary context","<50 flows: SVG; ≥50: Canvas; >200 flows: aggregate minor flows into 'Other' node","Gradient from source to target color. Flow opacity: 0.4–0.6. Node labels always visible",C,"Structural flow charts cannot be conveyed by color alone. Provide flow table. Avoid on mobile.","Flow table (Source → Target → Value); keyboard-traversable node list with tab stops","D3.js (d3-sankey), Plotly",Hover + Drilldown
+13,Cumulative Changes,"waterfall, cumulative, variance, incremental, bridge, delta",Waterfall Chart,"Stacked Bar, Cascade","Showing how individual positive/negative components add up to a final total (e.g., P&L, budget variance)","Changes are not additive; more than 12 bars (readability breaks); audience expects a simple total","4–12 bars optimal; beyond 12 aggregate minor items into a single 'Other' bar","Increases: #4CAF50. Decreases: #F44336. Start total: #2196F3. End total: #0D47A1. Running total line: dashed",AA,"Color + directional arrow icon per bar (not color alone). Labels on every bar.","Table with running total column; directional arrow icons per row","ApexCharts, Highcharts, Plotly",Hover
+14,Multi-Variable Comparison,"radar, spider, multi-variable, attributes, dimensions, comparison",Radar / Spider Chart,"Parallel Coordinates, Grouped Bar","Comparing multiple entities across the same fixed set of attributes (e.g., product feature comparison)","Axes > 8 (unreadable); values need precise comparison (use grouped bar); audience unfamiliar with radar charts","2–3 datasets maximum per chart; 5–8 axes; beyond 8 axes switch to parallel coordinates","Single dataset: #0080FF at 20% fill. Multiple: distinct hues with 30% fill. Border: full opacity",B,"Limit axes to 5–8. Always provide grouped bar chart alternative for precise reading.","Grouped bar chart as mandatory alternative; include raw data table","Chart.js, Recharts, ApexCharts",Hover + Toggle
+15,Stock / Trading OHLC,"stock, trading, ohlc, candlestick, finance, price, volume",Candlestick Chart,"OHLC Bar, Heikin-Ashi","Financial time-series with Open/High/Low/Close data; trading or investment product context only","Non-financial audience; no OHLC data available (use line chart); accessibility-first context","Real-time: Canvas required. Historical: paginate by time range. Max 500 candles visible at once","Bullish: #26A69A. Bearish: #EF5350. Volume bars: 40% opacity below. Body fill vs hollow for OHLC style",B,"Provide OHLC data table. Colorblind: use fill vs outline pattern (bullish = filled, bearish = hollow).","OHLC data table with sortable columns; numeric summary panel (daily change %)","Lightweight Charts (TradingView), ApexCharts",Real-time + Hover + Zoom
+16,Relationship / Connection Data,"network, graph, nodes, edges, connections, relationships, force",Network Graph,"Hierarchical Tree, Adjacency Matrix","Mapping connections between entities; network topology or social graph exploration context","Node count > 500 without clustering pre-applied; user needs precise connection counts; mobile context","≤100 nodes: SVG; 101–500: Canvas; >500: must apply clustering/LOD before rendering","Node types: categorical colors. Edges: #90A4AE at 60% opacity. Highlight path: #F59E0B",D,"Fundamentally inaccessible without alternative. Never use as sole representation. Always provide list alternative.","Adjacency list table (Node A → Node B → Weight); hierarchical tree view when structure allows","D3.js (d3-force), Vis.js, Cytoscape.js",Drilldown + Hover + Drag
+17,Distribution / Statistical,"distribution, statistical, spread, median, outlier, quartile, boxplot",Box Plot,"Violin Plot, Beeswarm","Showing spread, median, and outliers of a dataset; comparing distributions across multiple groups","Fewer than 20 data points per group (distribution is not meaningful); audience unfamiliar with statistical charts","Any sample size; aggregated representation so rendering is ⚡ Excellent at any volume","Box fill: #BBDEFB. Border: #1976D2. Median line: #D32F2F bold. Outlier dots: #F44336",AA,"Include stats summary table. Annotate outlier count in chart subtitle.","Stats summary table (min / Q1 / median / Q3 / max / mean); outlier count annotation","Plotly, D3.js, Chart.js (plugin)",Hover
+18,Performance vs Target (Compact),"bullet, compact, kpi, dashboard, target, benchmark, range",Bullet Chart,"Gauge, Progress Bar","Dashboard with multiple KPIs side by side; space-constrained contexts where a gauge is too large","Single KPI with emphasis (use gauge); data has no defined target range; fewer than 3 KPIs","Ideal for 3–10 bullet charts in a grid; scales to any count efficiently","Qualitative ranges: #FFCDD2 / #FFF9C4 / #C8E6C9 (bad/ok/good). Performance bar: #1976D2. Target: black 3px marker",AAA,"All values always visible as text. Color ranges are labeled with text thresholds not color alone.","Numerical values always visible (not hover-only); color ranges labeled with threshold text","D3.js, Plotly, Custom SVG",Hover
+19,Proportional / Percentage,"waffle, percentage, proportion, progress, filled, grid",Waffle Chart,"Pictogram, Stacked Bar 100%","Showing what fraction of a whole is filled; percentage progress in a visually engaging and accessible format","More than 5 categories (use stacked bar); exact values matter over visual proportion; very tight space","10×10 grid standard (100 cells); for > 5 categories switch to stacked 100% bar","3–5 categories max. 2–3px gap between cells. Each category a distinct accessible color pair",AA,"Better than pie for accessibility. Percentage text label always visible. Each cell has aria-label.","Percentage text always visible; grid cells labeled with aria-label value; provide legend","D3.js, React-Waffle, Custom CSS Grid",Hover
+20,Hierarchical Proportional,"sunburst, hierarchy, nested, proportion, radial, circle",Sunburst Chart,"Treemap, Icicle, Circle Packing","Exploring nested proportions where both hierarchy and relative size matter (e.g., org spend breakdown)","More than 3 hierarchy levels (outer rings become unreadable); precision matters over overview; mobile","<100 nodes: SVG; 100–500: Canvas; >500: filter to top N before rendering","Center to outer: darker to lighter hue. Each level 15–20% lighter. Contrasting border between sectors",C,"Poor accessibility beyond 2 levels. Mandatory table alternative required for any production use.","Collapsible indented list with percentages; breadcrumb trail for current drill-down state","D3.js (d3-hierarchy), Recharts, ApexCharts",Drilldown + Hover
+21,Root Cause Analysis,"root cause, decomposition, tree, hierarchy, drill-down, ai-split, attribution",Decomposition Tree,"Decision Tree, Flow Chart","Decomposing a metric into contributing factors; AI-assisted analysis or BI drill-down scenarios","No clear parent-child causal relationship; audience expects a summary rather than exploration","Up to 5 levels deep; limit visible nodes to 20 per level for readability; lazy-load deeper levels","Positive impact nodes: #2563EB. Negative impact nodes: #EF4444. Neutral connectors: #94A3B8",AA,"Keyboard-navigable expand/collapse. Screen reader announces node value and % contribution.","Keyboard expand/collapse tree; screen reader announces node label + value + % impact","Power BI (native), React-Flow, Custom D3.js",Drill + Expand
+22,3D Spatial Data,"3d, spatial, immersive, terrain, molecular, volumetric, point-cloud",3D Scatter / Surface Plot,"Volumetric Rendering, Point Cloud","Scientific/engineering context where Z-axis carries essential info not expressible in 2D","2D projection conveys the same insight; mobile context; accessibility-required environments; standard business dashboards","WebGL required. Deck.gl: up to 1M points. Three.js: LOD required beyond 50,000 pts","Depth cues: lighting and shading. Z-axis: color gradient (cool → warm). Transparent overlapping: opacity 0.4",D,"3D spatial charts are fundamentally inaccessible. Must not be used as primary chart type in any product UI.","Mandatory 2D projection view + data table; do not use as primary chart type in product UI","Three.js, Deck.gl, Plotly 3D",Rotate + Zoom + VR
+23,Real-Time Streaming,"streaming, real-time, ticker, live, velocity, pulse, monitoring",Streaming Area Chart,"Ticker Tape, Moving Gauge","Live monitoring dashboards; IoT/ops data updating at ≥1 Hz; user needs current value at a glance","Update frequency < 1/min (use periodic-refresh line chart); flashing content without reduced-motion support","Canvas/WebGL required. Buffer last 60–300s of data. Downsample older data on scroll","Current pulse: #00FF00 (dark theme) or #0080FF (light theme). History: fading opacity. Grid: dark background",B,"Pause/resume control required. Current value as large visible text KPI. Respect prefers-reduced-motion.","Pause/resume button required; current value shown as large text KPI; prefers-reduced-motion: freeze animation","Smoothed D3.js, CanvasJS",Real-time + Pause + Zoom
+24,Sentiment / Emotion,"sentiment, emotion, nlp, opinion, feeling, text-analysis",Word Cloud with Sentiment,"Sentiment Arc, Radar Chart","NLP output visualization; exploratory analysis of text corpus sentiment; frequency-weighted keyword overview","Precise values matter (word size is inherently imprecise); screen-reader context; corpus < 50 items","50–5000 terms optimal. Beyond 5000: apply top-N filtering before render. Avoid on mobile","Positive: #22C55E. Negative: #EF4444. Neutral: #94A3B8. Word size maps to frequency",C,"Word clouds fail screen readers. Never use as sole output of NLP analysis. Always pair with list view.","Sortable list view by frequency with sentiment label column; word cloud as supplementary only","D3-cloud, Highcharts, Nivo",Hover + Filter
+25,Process Mining,"process, mining, variants, path, bottleneck, log, event",Process Map / Graph,"Directed Acyclic Graph (DAG), Petri Net","Analyzing event logs to visualize actual process flows; identifying bottlenecks and deviations in ops/product funnels","No event log data available; audience expects a static flowchart (use diagram tool); node count > 100 without pre-filtering","<30 nodes: SVG; 30–100: Canvas; >100: apply variant filtering (top 80% of cases) before rendering","Happy path: #10B981 thick line. Deviations: #F59E0B thin line. Bottleneck nodes: #EF4444 fill",B,"Complex graphs are hard to navigate. Provide path summary text. Highlight top 3 bottlenecks as annotations.","Path summary table (variant → frequency → avg duration); top 3 bottlenecks as text annotation panel","React-Flow, Cytoscape.js, Recharts",Drag + Node-Click
diff --git a/.claude/skills/ui-ux-pro-max/data/colors.csv b/.claude/skills/ui-ux-pro-max/data/colors.csv
new file mode 100644
index 000000000..7b2b06720
--- /dev/null
+++ b/.claude/skills/ui-ux-pro-max/data/colors.csv
@@ -0,0 +1,162 @@
+No,Product Type,Primary,On Primary,Secondary,On Secondary,Accent,On Accent,Background,Foreground,Card,Card Foreground,Muted,Muted Foreground,Border,Destructive,On Destructive,Ring,Notes
+1,SaaS (General),#2563EB,#FFFFFF,#3B82F6,#FFFFFF,#EA580C,#FFFFFF,#F8FAFC,#1E293B,#FFFFFF,#1E293B,#E9EFF8,#64748B,#E2E8F0,#DC2626,#FFFFFF,#2563EB,Trust blue + orange CTA contrast [Accent adjusted from #F97316 for WCAG 3:1]
+2,Micro SaaS,#6366F1,#FFFFFF,#818CF8,#0F172A,#059669,#FFFFFF,#F5F3FF,#1E1B4B,#FFFFFF,#1E1B4B,#EBEFF9,#64748B,#E0E7FF,#DC2626,#FFFFFF,#6366F1,Indigo primary + emerald CTA [Accent adjusted from #10B981 for WCAG 3:1]
+3,E-commerce,#059669,#FFFFFF,#10B981,#0F172A,#EA580C,#FFFFFF,#ECFDF5,#064E3B,#FFFFFF,#064E3B,#E8F1F3,#64748B,#A7F3D0,#DC2626,#FFFFFF,#059669,Success green + urgency orange [Accent adjusted from #F97316 for WCAG 3:1]
+4,E-commerce Luxury,#1C1917,#FFFFFF,#44403C,#FFFFFF,#A16207,#FFFFFF,#FAFAF9,#0C0A09,#FFFFFF,#0C0A09,#E8ECF0,#64748B,#D6D3D1,#DC2626,#FFFFFF,#1C1917,Premium dark + gold accent [Accent adjusted from #CA8A04 for WCAG 3:1]
+5,B2B Service,#0F172A,#FFFFFF,#334155,#FFFFFF,#0369A1,#FFFFFF,#F8FAFC,#020617,#FFFFFF,#020617,#E8ECF1,#64748B,#E2E8F0,#DC2626,#FFFFFF,#0F172A,Professional navy + blue CTA
+6,Financial Dashboard,#0F172A,#FFFFFF,#1E293B,#FFFFFF,#22C55E,#0F172A,#020617,#F8FAFC,#0E1223,#F8FAFC,#1A1E2F,#94A3B8,#334155,#EF4444,#FFFFFF,#0F172A,Dark bg + green positive indicators
+7,Analytics Dashboard,#1E40AF,#FFFFFF,#3B82F6,#FFFFFF,#D97706,#FFFFFF,#F8FAFC,#1E3A8A,#FFFFFF,#1E3A8A,#E9EEF6,#64748B,#DBEAFE,#DC2626,#FFFFFF,#1E40AF,Blue data + amber highlights [Accent adjusted from #F59E0B for WCAG 3:1]
+8,Healthcare App,#0891B2,#FFFFFF,#22D3EE,#0F172A,#059669,#FFFFFF,#ECFEFF,#164E63,#FFFFFF,#164E63,#E8F1F6,#64748B,#A5F3FC,#DC2626,#FFFFFF,#0891B2,Calm cyan + health green
+9,Educational App,#4F46E5,#FFFFFF,#818CF8,#0F172A,#EA580C,#FFFFFF,#EEF2FF,#1E1B4B,#FFFFFF,#1E1B4B,#EBEEF8,#64748B,#C7D2FE,#DC2626,#FFFFFF,#4F46E5,Playful indigo + energetic orange [Accent adjusted from #F97316 for WCAG 3:1]
+10,Creative Agency,#EC4899,#FFFFFF,#F472B6,#0F172A,#0891B2,#FFFFFF,#FDF2F8,#831843,#FFFFFF,#831843,#F1EEF5,#64748B,#FBCFE8,#DC2626,#FFFFFF,#EC4899,Bold pink + cyan accent [Accent adjusted from #06B6D4 for WCAG 3:1]
+11,Portfolio/Personal,#18181B,#FFFFFF,#3F3F46,#FFFFFF,#2563EB,#FFFFFF,#FAFAFA,#09090B,#FFFFFF,#09090B,#E8ECF0,#64748B,#E4E4E7,#DC2626,#FFFFFF,#18181B,Monochrome + blue accent
+12,Gaming,#7C3AED,#FFFFFF,#A78BFA,#0F172A,#F43F5E,#FFFFFF,#0F0F23,#E2E8F0,#1E1C35,#E2E8F0,#27273B,#94A3B8,#4C1D95,#EF4444,#FFFFFF,#7C3AED,Neon purple + rose action
+13,Government/Public Service,#0F172A,#FFFFFF,#334155,#FFFFFF,#0369A1,#FFFFFF,#F8FAFC,#020617,#FFFFFF,#020617,#E8ECF1,#64748B,#E2E8F0,#DC2626,#FFFFFF,#0F172A,High contrast navy + blue
+14,Fintech/Crypto,#F59E0B,#0F172A,#FBBF24,#0F172A,#8B5CF6,#FFFFFF,#0F172A,#F8FAFC,#222735,#F8FAFC,#272F42,#94A3B8,#334155,#EF4444,#FFFFFF,#F59E0B,Gold trust + purple tech
+15,Social Media App,#E11D48,#FFFFFF,#FB7185,#0F172A,#2563EB,#FFFFFF,#FFF1F2,#881337,#FFFFFF,#881337,#F0ECF2,#64748B,#FECDD3,#DC2626,#FFFFFF,#E11D48,Vibrant rose + engagement blue
+16,Productivity Tool,#0D9488,#FFFFFF,#14B8A6,#0F172A,#EA580C,#FFFFFF,#F0FDFA,#134E4A,#FFFFFF,#134E4A,#E8F1F4,#64748B,#99F6E4,#DC2626,#FFFFFF,#0D9488,Teal focus + action orange [Accent adjusted from #F97316 for WCAG 3:1]
+17,Design System/Component Library,#4F46E5,#FFFFFF,#6366F1,#FFFFFF,#EA580C,#FFFFFF,#EEF2FF,#312E81,#FFFFFF,#312E81,#EBEEF8,#64748B,#C7D2FE,#DC2626,#FFFFFF,#4F46E5,Indigo brand + doc hierarchy [Accent adjusted from #F97316 for WCAG 3:1]
+18,AI/Chatbot Platform,#7C3AED,#FFFFFF,#A78BFA,#0F172A,#0891B2,#FFFFFF,#FAF5FF,#1E1B4B,#FFFFFF,#1E1B4B,#ECEEF9,#64748B,#DDD6FE,#DC2626,#FFFFFF,#7C3AED,AI purple + cyan interactions [Accent adjusted from #06B6D4 for WCAG 3:1]
+19,NFT/Web3 Platform,#8B5CF6,#FFFFFF,#A78BFA,#0F172A,#FBBF24,#0F172A,#0F0F23,#F8FAFC,#1E1D35,#F8FAFC,#27273B,#94A3B8,#4C1D95,#EF4444,#FFFFFF,#8B5CF6,Purple tech + gold value
+20,Creator Economy Platform,#EC4899,#FFFFFF,#F472B6,#0F172A,#EA580C,#FFFFFF,#FDF2F8,#831843,#FFFFFF,#831843,#F1EEF5,#64748B,#FBCFE8,#DC2626,#FFFFFF,#EC4899,Creator pink + engagement orange [Accent adjusted from #F97316 for WCAG 3:1]
+21,Remote Work/Collaboration Tool,#6366F1,#FFFFFF,#818CF8,#0F172A,#059669,#FFFFFF,#F5F3FF,#312E81,#FFFFFF,#312E81,#EBEFF9,#64748B,#E0E7FF,#DC2626,#FFFFFF,#6366F1,Calm indigo + success green [Accent adjusted from #10B981 for WCAG 3:1]
+22,Mental Health App,#8B5CF6,#FFFFFF,#C4B5FD,#0F172A,#059669,#FFFFFF,#FAF5FF,#4C1D95,#FFFFFF,#4C1D95,#EDEFF9,#64748B,#EDE9FE,#DC2626,#FFFFFF,#8B5CF6,Calming lavender + wellness green [Accent adjusted from #10B981 for WCAG 3:1]
+23,Pet Tech App,#F97316,#0F172A,#FB923C,#0F172A,#2563EB,#FFFFFF,#FFF7ED,#9A3412,#FFFFFF,#9A3412,#F1F0F0,#64748B,#FED7AA,#DC2626,#FFFFFF,#F97316,Playful orange + trust blue
+24,Smart Home/IoT Dashboard,#1E293B,#FFFFFF,#334155,#FFFFFF,#22C55E,#0F172A,#0F172A,#F8FAFC,#1B2336,#F8FAFC,#272F42,#94A3B8,#475569,#EF4444,#FFFFFF,#1E293B,Dark tech + status green
+25,EV/Charging Ecosystem,#0891B2,#FFFFFF,#22D3EE,#0F172A,#16A34A,#FFFFFF,#ECFEFF,#164E63,#FFFFFF,#164E63,#E8F1F6,#64748B,#A5F3FC,#DC2626,#FFFFFF,#0891B2,Electric cyan + eco green [Accent adjusted from #22C55E for WCAG 3:1]
+26,Subscription Box Service,#D946EF,#FFFFFF,#E879F9,#0F172A,#EA580C,#FFFFFF,#FDF4FF,#86198F,#FFFFFF,#86198F,#F0EEF9,#64748B,#F5D0FE,#DC2626,#FFFFFF,#D946EF,Excitement purple + urgency orange [Accent adjusted from #F97316 for WCAG 3:1]
+27,Podcast Platform,#1E1B4B,#FFFFFF,#312E81,#FFFFFF,#F97316,#0F172A,#0F0F23,#F8FAFC,#1B1B30,#F8FAFC,#27273B,#94A3B8,#4338CA,#EF4444,#FFFFFF,#1E1B4B,Dark audio + warm accent
+28,Dating App,#E11D48,#FFFFFF,#FB7185,#0F172A,#EA580C,#FFFFFF,#FFF1F2,#881337,#FFFFFF,#881337,#F0ECF2,#64748B,#FECDD3,#DC2626,#FFFFFF,#E11D48,Romantic rose + warm orange [Accent adjusted from #F97316 for WCAG 3:1]
+29,Micro-Credentials/Badges Platform,#0369A1,#FFFFFF,#0EA5E9,#0F172A,#A16207,#FFFFFF,#F0F9FF,#0C4A6E,#FFFFFF,#0C4A6E,#E7EFF5,#64748B,#BAE6FD,#DC2626,#FFFFFF,#0369A1,Trust blue + achievement gold [Accent adjusted from #CA8A04 for WCAG 3:1]
+30,Knowledge Base/Documentation,#475569,#FFFFFF,#64748B,#FFFFFF,#2563EB,#FFFFFF,#F8FAFC,#1E293B,#FFFFFF,#1E293B,#EAEFF3,#64748B,#E2E8F0,#DC2626,#FFFFFF,#475569,Neutral grey + link blue
+31,Hyperlocal Services,#059669,#FFFFFF,#10B981,#0F172A,#EA580C,#FFFFFF,#ECFDF5,#064E3B,#FFFFFF,#064E3B,#E8F1F3,#64748B,#A7F3D0,#DC2626,#FFFFFF,#059669,Location green + action orange [Accent adjusted from #F97316 for WCAG 3:1]
+32,Beauty/Spa/Wellness Service,#EC4899,#FFFFFF,#F9A8D4,#0F172A,#8B5CF6,#FFFFFF,#FDF2F8,#831843,#FFFFFF,#831843,#F1EEF5,#64748B,#FBCFE8,#DC2626,#FFFFFF,#EC4899,Soft pink + lavender luxury
+33,Luxury/Premium Brand,#1C1917,#FFFFFF,#44403C,#FFFFFF,#A16207,#FFFFFF,#FAFAF9,#0C0A09,#FFFFFF,#0C0A09,#E8ECF0,#64748B,#D6D3D1,#DC2626,#FFFFFF,#1C1917,Premium black + gold accent [Accent adjusted from #CA8A04 for WCAG 3:1]
+34,Restaurant/Food Service,#DC2626,#FFFFFF,#F87171,#0F172A,#A16207,#FFFFFF,#FEF2F2,#450A0A,#FFFFFF,#450A0A,#F0EDF1,#64748B,#FECACA,#DC2626,#FFFFFF,#DC2626,Appetizing red + warm gold [Accent adjusted from #CA8A04 for WCAG 3:1]
+35,Fitness/Gym App,#F97316,#0F172A,#FB923C,#0F172A,#22C55E,#0F172A,#1F2937,#F8FAFC,#313742,#F8FAFC,#37414F,#94A3B8,#374151,#EF4444,#FFFFFF,#F97316,Energy orange + success green
+36,Real Estate/Property,#0F766E,#FFFFFF,#14B8A6,#0F172A,#0369A1,#FFFFFF,#F0FDFA,#134E4A,#FFFFFF,#134E4A,#E8F0F3,#64748B,#99F6E4,#DC2626,#FFFFFF,#0F766E,Trust teal + professional blue
+37,Travel/Tourism Agency,#0EA5E9,#0F172A,#38BDF8,#0F172A,#EA580C,#FFFFFF,#F0F9FF,#0C4A6E,#FFFFFF,#0C4A6E,#E8F2F8,#64748B,#BAE6FD,#DC2626,#FFFFFF,#0EA5E9,Sky blue + adventure orange [Accent adjusted from #F97316 for WCAG 3:1]
+38,Hotel/Hospitality,#1E3A8A,#FFFFFF,#3B82F6,#FFFFFF,#A16207,#FFFFFF,#F8FAFC,#1E40AF,#FFFFFF,#1E40AF,#E9EEF5,#64748B,#BFDBFE,#DC2626,#FFFFFF,#1E3A8A,Luxury navy + gold service [Accent adjusted from #CA8A04 for WCAG 3:1]
+39,Wedding/Event Planning,#DB2777,#FFFFFF,#F472B6,#0F172A,#A16207,#FFFFFF,#FDF2F8,#831843,#FFFFFF,#831843,#F0EDF4,#64748B,#FBCFE8,#DC2626,#FFFFFF,#DB2777,Romantic pink + elegant gold [Accent adjusted from #CA8A04 for WCAG 3:1]
+40,Legal Services,#1E3A8A,#FFFFFF,#1E40AF,#FFFFFF,#B45309,#FFFFFF,#F8FAFC,#0F172A,#FFFFFF,#0F172A,#E9EEF5,#64748B,#CBD5E1,#DC2626,#FFFFFF,#1E3A8A,Authority navy + trust gold
+41,Insurance Platform,#0369A1,#FFFFFF,#0EA5E9,#0F172A,#16A34A,#FFFFFF,#F0F9FF,#0C4A6E,#FFFFFF,#0C4A6E,#E7EFF5,#64748B,#BAE6FD,#DC2626,#FFFFFF,#0369A1,Security blue + protected green [Accent adjusted from #22C55E for WCAG 3:1]
+42,Banking/Traditional Finance,#0F172A,#FFFFFF,#1E3A8A,#FFFFFF,#A16207,#FFFFFF,#F8FAFC,#020617,#FFFFFF,#020617,#E8ECF1,#64748B,#E2E8F0,#DC2626,#FFFFFF,#0F172A,Trust navy + premium gold [Accent adjusted from #CA8A04 for WCAG 3:1]
+43,Online Course/E-learning,#0D9488,#FFFFFF,#2DD4BF,#0F172A,#EA580C,#FFFFFF,#F0FDFA,#134E4A,#FFFFFF,#134E4A,#E8F1F4,#64748B,#5EEAD4,#DC2626,#FFFFFF,#0D9488,Progress teal + achievement orange [Accent adjusted from #F97316 for WCAG 3:1]
+44,Non-profit/Charity,#0891B2,#FFFFFF,#22D3EE,#0F172A,#EA580C,#FFFFFF,#ECFEFF,#164E63,#FFFFFF,#164E63,#E8F1F6,#64748B,#A5F3FC,#DC2626,#FFFFFF,#0891B2,Compassion blue + action orange [Accent adjusted from #F97316 for WCAG 3:1]
+45,Music Streaming,#1E1B4B,#FFFFFF,#4338CA,#FFFFFF,#22C55E,#0F172A,#0F0F23,#F8FAFC,#1B1B30,#F8FAFC,#27273B,#94A3B8,#312E81,#EF4444,#FFFFFF,#1E1B4B,Dark audio + play green
+46,Video Streaming/OTT,#0F0F23,#FFFFFF,#1E1B4B,#FFFFFF,#E11D48,#FFFFFF,#000000,#F8FAFC,#0C0C0D,#F8FAFC,#181818,#94A3B8,#312E81,#EF4444,#FFFFFF,#0F0F23,Cinema dark + play red
+47,Job Board/Recruitment,#0369A1,#FFFFFF,#0EA5E9,#0F172A,#16A34A,#FFFFFF,#F0F9FF,#0C4A6E,#FFFFFF,#0C4A6E,#E7EFF5,#64748B,#BAE6FD,#DC2626,#FFFFFF,#0369A1,Professional blue + success green [Accent adjusted from #22C55E for WCAG 3:1]
+48,Marketplace (P2P),#7C3AED,#FFFFFF,#A78BFA,#0F172A,#16A34A,#FFFFFF,#FAF5FF,#4C1D95,#FFFFFF,#4C1D95,#ECEEF9,#64748B,#DDD6FE,#DC2626,#FFFFFF,#7C3AED,Trust purple + transaction green [Accent adjusted from #22C55E for WCAG 3:1]
+49,Logistics/Delivery,#2563EB,#FFFFFF,#3B82F6,#FFFFFF,#EA580C,#FFFFFF,#EFF6FF,#1E40AF,#FFFFFF,#1E40AF,#E9EFF8,#64748B,#BFDBFE,#DC2626,#FFFFFF,#2563EB,Tracking blue + delivery orange [Accent adjusted from #F97316 for WCAG 3:1]
+50,Agriculture/Farm Tech,#15803D,#FFFFFF,#22C55E,#0F172A,#A16207,#FFFFFF,#F0FDF4,#14532D,#FFFFFF,#14532D,#E8F0F1,#64748B,#BBF7D0,#DC2626,#FFFFFF,#15803D,Earth green + harvest gold [Accent adjusted from #CA8A04 for WCAG 3:1]
+51,Construction/Architecture,#64748B,#FFFFFF,#94A3B8,#0F172A,#EA580C,#FFFFFF,#F8FAFC,#334155,#FFFFFF,#334155,#EBF0F5,#64748B,#E2E8F0,#DC2626,#FFFFFF,#64748B,Industrial grey + safety orange [Accent adjusted from #F97316 for WCAG 3:1]
+52,Automotive/Car Dealership,#1E293B,#FFFFFF,#334155,#FFFFFF,#DC2626,#FFFFFF,#F8FAFC,#0F172A,#FFFFFF,#0F172A,#E9EDF1,#64748B,#E2E8F0,#DC2626,#FFFFFF,#1E293B,Premium dark + action red
+53,Photography Studio,#18181B,#FFFFFF,#27272A,#FFFFFF,#F8FAFC,#0F172A,#000000,#FAFAFA,#0C0C0C,#FAFAFA,#181818,#94A3B8,#3F3F46,#EF4444,#FFFFFF,#18181B,Pure black + white contrast
+54,Coworking Space,#F59E0B,#0F172A,#FBBF24,#0F172A,#2563EB,#FFFFFF,#FFFBEB,#78350F,#FFFFFF,#78350F,#F1F2EF,#64748B,#FDE68A,#DC2626,#FFFFFF,#F59E0B,Energetic amber + booking blue
+55,Home Services (Plumber/Electrician),#1E40AF,#FFFFFF,#3B82F6,#FFFFFF,#EA580C,#FFFFFF,#EFF6FF,#1E3A8A,#FFFFFF,#1E3A8A,#E9EEF6,#64748B,#BFDBFE,#DC2626,#FFFFFF,#1E40AF,Professional blue + urgent orange [Accent adjusted from #F97316 for WCAG 3:1]
+56,Childcare/Daycare,#F472B6,#0F172A,#FBCFE8,#0F172A,#16A34A,#FFFFFF,#FDF2F8,#9D174D,#FFFFFF,#9D174D,#F1F0F6,#64748B,#FCE7F3,#DC2626,#FFFFFF,#F472B6,Soft pink + safe green [Accent adjusted from #22C55E for WCAG 3:1]
+57,Senior Care/Elderly,#0369A1,#FFFFFF,#38BDF8,#0F172A,#16A34A,#FFFFFF,#F0F9FF,#0C4A6E,#FFFFFF,#0C4A6E,#E7EFF5,#64748B,#E0F2FE,#DC2626,#FFFFFF,#0369A1,Calm blue + reassuring green [Accent adjusted from #22C55E for WCAG 3:1]
+58,Medical Clinic,#0891B2,#FFFFFF,#22D3EE,#0F172A,#16A34A,#FFFFFF,#F0FDFA,#134E4A,#FFFFFF,#134E4A,#E8F1F6,#64748B,#CCFBF1,#DC2626,#FFFFFF,#0891B2,Medical teal + health green [Accent adjusted from #22C55E for WCAG 3:1]
+59,Pharmacy/Drug Store,#15803D,#FFFFFF,#22C55E,#0F172A,#0369A1,#FFFFFF,#F0FDF4,#14532D,#FFFFFF,#14532D,#E8F0F1,#64748B,#BBF7D0,#DC2626,#FFFFFF,#15803D,Pharmacy green + trust blue
+60,Dental Practice,#0EA5E9,#0F172A,#38BDF8,#0F172A,#0EA5E9,#0F172A,#F0F9FF,#0C4A6E,#FFFFFF,#0C4A6E,#E8F2F8,#64748B,#BAE6FD,#DC2626,#FFFFFF,#0EA5E9,Fresh blue + smile yellow [Accent adjusted from #FBBF24 for WCAG 3:1]
+61,Veterinary Clinic,#0D9488,#FFFFFF,#14B8A6,#0F172A,#EA580C,#FFFFFF,#F0FDFA,#134E4A,#FFFFFF,#134E4A,#E8F1F4,#64748B,#99F6E4,#DC2626,#FFFFFF,#0D9488,Caring teal + warm orange [Accent adjusted from #F97316 for WCAG 3:1]
+62,Florist/Plant Shop,#15803D,#FFFFFF,#22C55E,#0F172A,#EC4899,#FFFFFF,#F0FDF4,#14532D,#FFFFFF,#14532D,#E8F0F1,#64748B,#BBF7D0,#DC2626,#FFFFFF,#15803D,Natural green + floral pink
+63,Bakery/Cafe,#92400E,#FFFFFF,#B45309,#FFFFFF,#92400E,#FFFFFF,#FEF3C7,#78350F,#FFFFFF,#78350F,#EDEEF0,#64748B,#FDE68A,#DC2626,#FFFFFF,#92400E,Warm brown + cream white [Accent adjusted from #F8FAFC for WCAG 3:1]
+64,Brewery/Winery,#7C2D12,#FFFFFF,#B91C1C,#FFFFFF,#A16207,#FFFFFF,#FEF2F2,#450A0A,#FFFFFF,#450A0A,#ECEDF0,#64748B,#FECACA,#DC2626,#FFFFFF,#7C2D12,Deep burgundy + craft gold [Accent adjusted from #CA8A04 for WCAG 3:1]
+65,Airline,#1E3A8A,#FFFFFF,#3B82F6,#FFFFFF,#EA580C,#FFFFFF,#EFF6FF,#1E40AF,#FFFFFF,#1E40AF,#E9EEF5,#64748B,#BFDBFE,#DC2626,#FFFFFF,#1E3A8A,Sky blue + booking orange [Accent adjusted from #F97316 for WCAG 3:1]
+66,News/Media Platform,#DC2626,#FFFFFF,#EF4444,#FFFFFF,#1E40AF,#FFFFFF,#FEF2F2,#450A0A,#FFFFFF,#450A0A,#F0EDF1,#64748B,#FECACA,#DC2626,#FFFFFF,#DC2626,Breaking red + link blue
+67,Magazine/Blog,#18181B,#FFFFFF,#3F3F46,#FFFFFF,#EC4899,#FFFFFF,#FAFAFA,#09090B,#FFFFFF,#09090B,#E8ECF0,#64748B,#E4E4E7,#DC2626,#FFFFFF,#18181B,Editorial black + accent pink
+68,Freelancer Platform,#6366F1,#FFFFFF,#818CF8,#0F172A,#16A34A,#FFFFFF,#EEF2FF,#312E81,#FFFFFF,#312E81,#EBEFF9,#64748B,#C7D2FE,#DC2626,#FFFFFF,#6366F1,Creative indigo + hire green [Accent adjusted from #22C55E for WCAG 3:1]
+69,Marketing Agency,#EC4899,#FFFFFF,#F472B6,#0F172A,#0891B2,#FFFFFF,#FDF2F8,#831843,#FFFFFF,#831843,#F1EEF5,#64748B,#FBCFE8,#DC2626,#FFFFFF,#EC4899,Bold pink + creative cyan [Accent adjusted from #06B6D4 for WCAG 3:1]
+70,Event Management,#7C3AED,#FFFFFF,#A78BFA,#0F172A,#EA580C,#FFFFFF,#FAF5FF,#4C1D95,#FFFFFF,#4C1D95,#ECEEF9,#64748B,#DDD6FE,#DC2626,#FFFFFF,#7C3AED,Excitement purple + action orange [Accent adjusted from #F97316 for WCAG 3:1]
+71,Membership/Community,#7C3AED,#FFFFFF,#A78BFA,#0F172A,#16A34A,#FFFFFF,#FAF5FF,#4C1D95,#FFFFFF,#4C1D95,#ECEEF9,#64748B,#DDD6FE,#DC2626,#FFFFFF,#7C3AED,Community purple + join green [Accent adjusted from #22C55E for WCAG 3:1]
+72,Newsletter Platform,#0369A1,#FFFFFF,#0EA5E9,#0F172A,#EA580C,#FFFFFF,#F0F9FF,#0C4A6E,#FFFFFF,#0C4A6E,#E7EFF5,#64748B,#BAE6FD,#DC2626,#FFFFFF,#0369A1,Trust blue + subscribe orange [Accent adjusted from #F97316 for WCAG 3:1]
+73,Digital Products/Downloads,#6366F1,#FFFFFF,#818CF8,#0F172A,#16A34A,#FFFFFF,#EEF2FF,#312E81,#FFFFFF,#312E81,#EBEFF9,#64748B,#C7D2FE,#DC2626,#FFFFFF,#6366F1,Digital indigo + buy green [Accent adjusted from #22C55E for WCAG 3:1]
+74,Church/Religious Organization,#7C3AED,#FFFFFF,#A78BFA,#0F172A,#A16207,#FFFFFF,#FAF5FF,#4C1D95,#FFFFFF,#4C1D95,#ECEEF9,#64748B,#DDD6FE,#DC2626,#FFFFFF,#7C3AED,Spiritual purple + warm gold [Accent adjusted from #CA8A04 for WCAG 3:1]
+75,Sports Team/Club,#DC2626,#FFFFFF,#EF4444,#FFFFFF,#DC2626,#FFFFFF,#FEF2F2,#7F1D1D,#FFFFFF,#7F1D1D,#F0EDF1,#64748B,#FECACA,#DC2626,#FFFFFF,#DC2626,Team red + championship gold [Accent adjusted from #FBBF24 for WCAG 3:1]
+76,Museum/Gallery,#18181B,#FFFFFF,#27272A,#FFFFFF,#18181B,#FFFFFF,#FAFAFA,#09090B,#FFFFFF,#09090B,#E8ECF0,#64748B,#E4E4E7,#DC2626,#FFFFFF,#18181B,Gallery black + white space [Accent adjusted from #F8FAFC for WCAG 3:1]
+77,Theater/Cinema,#1E1B4B,#FFFFFF,#312E81,#FFFFFF,#CA8A04,#0F172A,#0F0F23,#F8FAFC,#1B1B30,#F8FAFC,#27273B,#94A3B8,#4338CA,#EF4444,#FFFFFF,#1E1B4B,Dramatic dark + spotlight gold
+78,Language Learning App,#4F46E5,#FFFFFF,#818CF8,#0F172A,#16A34A,#FFFFFF,#EEF2FF,#312E81,#FFFFFF,#312E81,#EBEEF8,#64748B,#C7D2FE,#DC2626,#FFFFFF,#4F46E5,Learning indigo + progress green [Accent adjusted from #22C55E for WCAG 3:1]
+79,Coding Bootcamp,#0F172A,#FFFFFF,#1E293B,#FFFFFF,#22C55E,#0F172A,#020617,#F8FAFC,#0E1223,#F8FAFC,#1A1E2F,#94A3B8,#334155,#EF4444,#FFFFFF,#0F172A,Terminal dark + success green
+80,Cybersecurity Platform,#00FF41,#0F172A,#0D0D0D,#FFFFFF,#FF3333,#FFFFFF,#000000,#E0E0E0,#0C130E,#E0E0E0,#181818,#94A3B8,#1F1F1F,#EF4444,#FFFFFF,#00FF41,Matrix green + alert red
+81,Developer Tool / IDE,#1E293B,#FFFFFF,#334155,#FFFFFF,#22C55E,#0F172A,#0F172A,#F8FAFC,#1B2336,#F8FAFC,#272F42,#94A3B8,#475569,#EF4444,#FFFFFF,#1E293B,Code dark + run green
+82,Biotech / Life Sciences,#0EA5E9,#0F172A,#0284C7,#FFFFFF,#059669,#FFFFFF,#F0F9FF,#0C4A6E,#FFFFFF,#0C4A6E,#E8F2F8,#64748B,#BAE6FD,#DC2626,#FFFFFF,#0EA5E9,DNA blue + life green [Accent adjusted from #10B981 for WCAG 3:1]
+83,Space Tech / Aerospace,#F8FAFC,#0F172A,#94A3B8,#0F172A,#3B82F6,#FFFFFF,#0B0B10,#F8FAFC,#1E1E23,#F8FAFC,#232328,#94A3B8,#1E293B,#EF4444,#FFFFFF,#F8FAFC,Star white + launch blue
+84,Architecture / Interior,#171717,#FFFFFF,#404040,#FFFFFF,#A16207,#FFFFFF,#FFFFFF,#171717,#FFFFFF,#171717,#E8ECF0,#64748B,#E5E5E5,#DC2626,#FFFFFF,#171717,Minimal black + accent gold [Accent adjusted from #D4AF37 for WCAG 3:1]
+85,Quantum Computing Interface,#00FFFF,#0F172A,#7B61FF,#FFFFFF,#FF00FF,#FFFFFF,#050510,#E0E0FF,#101823,#E0E0FF,#1D1D28,#94A3B8,#333344,#EF4444,#FFFFFF,#00FFFF,Quantum cyan + interference purple
+86,Biohacking / Longevity App,#FF4D4D,#FFFFFF,#4D94FF,#FFFFFF,#059669,#FFFFFF,#F5F5F7,#1C1C1E,#FFFFFF,#1C1C1E,#F2EEF2,#64748B,#E5E5EA,#DC2626,#FFFFFF,#FF4D4D,Bio red/blue + vitality green [Accent adjusted from #00E676 for WCAG 3:1]
+87,Autonomous Drone Fleet Manager,#00FF41,#0F172A,#008F11,#FFFFFF,#FF3333,#FFFFFF,#0D1117,#E6EDF3,#182424,#E6EDF3,#25292F,#94A3B8,#30363D,#EF4444,#FFFFFF,#00FF41,Terminal green + alert red
+88,Generative Art Platform,#18181B,#FFFFFF,#3F3F46,#FFFFFF,#EC4899,#FFFFFF,#FAFAFA,#09090B,#FFFFFF,#09090B,#E8ECF0,#64748B,#E4E4E7,#DC2626,#FFFFFF,#18181B,Canvas neutral + creative pink
+89,Spatial Computing OS / App,#FFFFFF,#0F172A,#E5E5E5,#0F172A,#FFFFFF,#0F172A,#888888,#000000,#999999,#000000,#777777,#D4D4D4,#CCCCCC,#FF3B30,#FFFFFF,#007AFF,Glass white + system blue [Accent adjusted from #007AFF for WCAG 3:1]
+90,Sustainable Energy / Climate Tech,#059669,#FFFFFF,#10B981,#0F172A,#059669,#FFFFFF,#ECFDF5,#064E3B,#FFFFFF,#064E3B,#E8F1F3,#64748B,#A7F3D0,#DC2626,#FFFFFF,#059669,Nature green + solar gold [Accent adjusted from #FBBF24 for WCAG 3:1]
+91,Personal Finance Tracker,#1E40AF,#FFFFFF,#3B82F6,#FFFFFF,#059669,#FFFFFF,#0F172A,#FFFFFF,#192134,#FFFFFF,#101A34,#94A3B8,"rgba(255,255,255,0.08)",#DC2626,#FFFFFF,#1E40AF,Trust blue + profit green on dark
+92,Chat & Messaging App,#2563EB,#FFFFFF,#6366F1,#FFFFFF,#059669,#FFFFFF,#FFFFFF,#0F172A,#FFFFFF,#0F172A,#F1F5FD,#64748B,#E4ECFC,#DC2626,#FFFFFF,#2563EB,Messenger blue + online green
+93,Notes & Writing App,#78716C,#FFFFFF,#A8A29E,#FFFFFF,#D97706,#FFFFFF,#FFFBEB,#0F172A,#FFFFFF,#0F172A,#F6F6F6,#64748B,#EEEDED,#DC2626,#FFFFFF,#78716C,Warm ink + amber accent on cream
+94,Habit Tracker,#D97706,#FFFFFF,#F59E0B,#0F172A,#059669,#FFFFFF,#FFFBEB,#0F172A,#FFFFFF,#0F172A,#FCF6F0,#64748B,#FAEEE1,#DC2626,#FFFFFF,#D97706,Streak amber + habit green
+95,Food Delivery / On-Demand,#EA580C,#FFFFFF,#F97316,#FFFFFF,#2563EB,#FFFFFF,#FFF7ED,#0F172A,#FFFFFF,#0F172A,#FDF4F0,#64748B,#FCEAE1,#DC2626,#FFFFFF,#EA580C,Appetizing orange + trust blue
+96,Ride Hailing / Transportation,#1E293B,#FFFFFF,#334155,#FFFFFF,#2563EB,#FFFFFF,#0F172A,#FFFFFF,#192134,#FFFFFF,#10182B,#94A3B8,"rgba(255,255,255,0.08)",#DC2626,#FFFFFF,#1E293B,Map dark + route blue
+97,Recipe & Cooking App,#9A3412,#FFFFFF,#C2410C,#FFFFFF,#059669,#FFFFFF,#FFFBEB,#0F172A,#FFFFFF,#0F172A,#F8F2F0,#64748B,#F2E6E2,#DC2626,#FFFFFF,#9A3412,Warm terracotta + fresh green
+98,Meditation & Mindfulness,#7C3AED,#FFFFFF,#8B5CF6,#FFFFFF,#059669,#FFFFFF,#FAF5FF,#0F172A,#FFFFFF,#0F172A,#F7F3FD,#64748B,#EFE7FC,#DC2626,#FFFFFF,#7C3AED,Calm lavender + mindful green
+99,Weather App,#0284C7,#FFFFFF,#0EA5E9,#FFFFFF,#F59E0B,#0F172A,#F0F9FF,#0F172A,#FFFFFF,#0F172A,#EFF7FB,#64748B,#E0F0F8,#DC2626,#FFFFFF,#0284C7,Sky blue + sun amber
+100,Diary & Journal App,#92400E,#FFFFFF,#A16207,#FFFFFF,#6366F1,#FFFFFF,#FFFBEB,#0F172A,#FFFFFF,#0F172A,#F8F3F0,#64748B,#F1E8E2,#DC2626,#FFFFFF,#92400E,Warm journal brown + ink violet
+101,CRM & Client Management,#2563EB,#FFFFFF,#3B82F6,#FFFFFF,#059669,#FFFFFF,#F8FAFC,#0F172A,#FFFFFF,#0F172A,#F1F5FD,#64748B,#E4ECFC,#DC2626,#FFFFFF,#2563EB,Professional blue + deal green
+102,Inventory & Stock Management,#334155,#FFFFFF,#475569,#FFFFFF,#059669,#FFFFFF,#F8FAFC,#0F172A,#FFFFFF,#0F172A,#F2F3F4,#64748B,#E6E8EA,#DC2626,#FFFFFF,#334155,Industrial slate + stock green
+103,Flashcard & Study Tool,#7C3AED,#FFFFFF,#8B5CF6,#FFFFFF,#059669,#FFFFFF,#FAF5FF,#0F172A,#FFFFFF,#0F172A,#F7F3FD,#64748B,#EFE7FC,#DC2626,#FFFFFF,#7C3AED,Study purple + correct green
+104,Booking & Appointment App,#0284C7,#FFFFFF,#0EA5E9,#FFFFFF,#059669,#FFFFFF,#F0F9FF,#0F172A,#FFFFFF,#0F172A,#EFF7FB,#64748B,#E0F0F8,#DC2626,#FFFFFF,#0284C7,Calendar blue + available green
+105,Invoice & Billing Tool,#1E3A5F,#FFFFFF,#2563EB,#FFFFFF,#059669,#FFFFFF,#F8FAFC,#0F172A,#FFFFFF,#0F172A,#F1F3F5,#64748B,#E4E7EB,#DC2626,#FFFFFF,#1E3A5F,Navy professional + paid green
+106,Grocery & Shopping List,#059669,#FFFFFF,#10B981,#FFFFFF,#D97706,#FFFFFF,#ECFDF5,#0F172A,#FFFFFF,#0F172A,#F0F8F6,#64748B,#E1F2ED,#DC2626,#FFFFFF,#059669,Fresh green + food amber
+107,Timer & Pomodoro,#DC2626,#FFFFFF,#EF4444,#FFFFFF,#059669,#FFFFFF,#0F172A,#FFFFFF,#192134,#FFFFFF,#1F1829,#94A3B8,"rgba(255,255,255,0.08)",#DC2626,#FFFFFF,#DC2626,Focus red on dark + break green
+108,Parenting & Baby Tracker,#EC4899,#FFFFFF,#F472B6,#FFFFFF,#0284C7,#FFFFFF,#FDF2F8,#0F172A,#FFFFFF,#0F172A,#FDF4F8,#64748B,#FCE9F2,#DC2626,#FFFFFF,#EC4899,Soft pink + trust blue
+109,Scanner & Document Manager,#1E293B,#FFFFFF,#334155,#FFFFFF,#2563EB,#FFFFFF,#F8FAFC,#0F172A,#FFFFFF,#0F172A,#F1F2F3,#64748B,#E4E5E7,#DC2626,#FFFFFF,#1E293B,Document grey + scan blue
+110,Calendar & Scheduling App,#2563EB,#FFFFFF,#3B82F6,#FFFFFF,#059669,#FFFFFF,#F8FAFC,#0F172A,#FFFFFF,#0F172A,#F1F5FD,#64748B,#E4ECFC,#DC2626,#FFFFFF,#2563EB,Calendar blue + event green
+111,Password Manager,#1E3A5F,#FFFFFF,#334155,#FFFFFF,#059669,#FFFFFF,#0F172A,#FFFFFF,#192134,#FFFFFF,#10192E,#94A3B8,"rgba(255,255,255,0.08)",#DC2626,#FFFFFF,#1E3A5F,Vault dark blue + secure green
+112,Expense Splitter / Bill Split,#059669,#FFFFFF,#10B981,#FFFFFF,#DC2626,#FFFFFF,#F8FAFC,#0F172A,#FFFFFF,#0F172A,#F0F8F6,#64748B,#E1F2ED,#DC2626,#FFFFFF,#059669,Balance green + owe red
+113,Voice Recorder & Memo,#DC2626,#FFFFFF,#EF4444,#FFFFFF,#2563EB,#FFFFFF,#FFFFFF,#0F172A,#FFFFFF,#0F172A,#FCF1F1,#64748B,#FAE4E4,#DC2626,#FFFFFF,#DC2626,Recording red + waveform blue
+114,Bookmark & Read-Later,#D97706,#FFFFFF,#F59E0B,#0F172A,#2563EB,#FFFFFF,#FFFBEB,#0F172A,#FFFFFF,#0F172A,#FCF6F0,#64748B,#FAEEE1,#DC2626,#FFFFFF,#D97706,Warm amber + link blue
+115,Translator App,#2563EB,#FFFFFF,#0891B2,#FFFFFF,#EA580C,#FFFFFF,#F8FAFC,#0F172A,#FFFFFF,#0F172A,#F1F5FD,#64748B,#E4ECFC,#DC2626,#FFFFFF,#2563EB,Global blue + teal + accent orange
+116,Calculator & Unit Converter,#EA580C,#FFFFFF,#F97316,#FFFFFF,#2563EB,#FFFFFF,#1C1917,#FFFFFF,#262321,#FFFFFF,#2C1E16,#94A3B8,"rgba(255,255,255,0.08)",#DC2626,#FFFFFF,#EA580C,Operation orange on dark
+117,Alarm & World Clock,#D97706,#FFFFFF,#F59E0B,#0F172A,#6366F1,#FFFFFF,#0F172A,#FFFFFF,#192134,#FFFFFF,#1F1E27,#94A3B8,"rgba(255,255,255,0.08)",#DC2626,#FFFFFF,#D97706,Time amber + night indigo on dark
+118,File Manager & Transfer,#2563EB,#FFFFFF,#3B82F6,#FFFFFF,#D97706,#FFFFFF,#F8FAFC,#0F172A,#FFFFFF,#0F172A,#F1F5FD,#64748B,#E4ECFC,#DC2626,#FFFFFF,#2563EB,Folder blue + file amber
+119,Email Client,#2563EB,#FFFFFF,#3B82F6,#FFFFFF,#DC2626,#FFFFFF,#FFFFFF,#0F172A,#FFFFFF,#0F172A,#F1F5FD,#64748B,#E4ECFC,#DC2626,#FFFFFF,#2563EB,Inbox blue + priority red
+120,Casual Puzzle Game,#EC4899,#FFFFFF,#8B5CF6,#FFFFFF,#F59E0B,#0F172A,#FDF2F8,#0F172A,#FFFFFF,#0F172A,#FDF4F8,#64748B,#FCE9F2,#DC2626,#FFFFFF,#EC4899,Cheerful pink + reward gold
+121,Trivia & Quiz Game,#2563EB,#FFFFFF,#7C3AED,#FFFFFF,#F59E0B,#0F172A,#EFF6FF,#0F172A,#FFFFFF,#0F172A,#F1F5FD,#64748B,#E4ECFC,#DC2626,#FFFFFF,#2563EB,Quiz blue + gold leaderboard
+122,Card & Board Game,#15803D,#FFFFFF,#166534,#FFFFFF,#D97706,#FFFFFF,#0F172A,#FFFFFF,#192134,#FFFFFF,#0F1F2B,#94A3B8,"rgba(255,255,255,0.08)",#DC2626,#FFFFFF,#15803D,Felt green + gold on dark
+123,Idle & Clicker Game,#D97706,#FFFFFF,#F59E0B,#0F172A,#7C3AED,#FFFFFF,#FFFBEB,#0F172A,#FFFFFF,#0F172A,#FCF6F0,#64748B,#FAEEE1,#DC2626,#FFFFFF,#D97706,Coin gold + prestige purple
+124,Word & Crossword Game,#15803D,#FFFFFF,#059669,#FFFFFF,#D97706,#FFFFFF,#FFFFFF,#0F172A,#FFFFFF,#0F172A,#F0F7F3,#64748B,#E2EFE7,#DC2626,#FFFFFF,#15803D,Word green + letter amber
+125,Arcade & Retro Game,#DC2626,#FFFFFF,#2563EB,#FFFFFF,#22C55E,#0F172A,#0F172A,#FFFFFF,#192134,#FFFFFF,#1F1829,#94A3B8,"rgba(255,255,255,0.08)",#DC2626,#FFFFFF,#DC2626,Neon red+blue on dark + score green
+126,Photo Editor & Filters,#7C3AED,#FFFFFF,#6366F1,#FFFFFF,#0891B2,#FFFFFF,#0F172A,#FFFFFF,#192134,#FFFFFF,#171939,#94A3B8,"rgba(255,255,255,0.08)",#DC2626,#FFFFFF,#7C3AED,Editor violet + filter cyan on dark
+127,Short Video Editor,#EC4899,#FFFFFF,#DB2777,#FFFFFF,#2563EB,#FFFFFF,#0F172A,#FFFFFF,#192134,#FFFFFF,#201A32,#94A3B8,"rgba(255,255,255,0.08)",#DC2626,#FFFFFF,#EC4899,Video pink on dark + timeline blue
+128,Drawing & Sketching Canvas,#7C3AED,#FFFFFF,#8B5CF6,#FFFFFF,#0891B2,#FFFFFF,#1C1917,#FFFFFF,#262321,#FFFFFF,#231B28,#94A3B8,"rgba(255,255,255,0.08)",#DC2626,#FFFFFF,#7C3AED,Canvas purple + tool teal on dark
+129,Music Creation & Beat Maker,#7C3AED,#FFFFFF,#6366F1,#FFFFFF,#22C55E,#0F172A,#0F172A,#FFFFFF,#192134,#FFFFFF,#171939,#94A3B8,"rgba(255,255,255,0.08)",#DC2626,#FFFFFF,#7C3AED,Studio purple + waveform green on dark
+130,Meme & Sticker Maker,#EC4899,#FFFFFF,#F59E0B,#0F172A,#2563EB,#FFFFFF,#FFFFFF,#0F172A,#FFFFFF,#0F172A,#FDF4F8,#64748B,#FCE9F2,#DC2626,#FFFFFF,#EC4899,Viral pink + comedy yellow + share blue
+131,AI Photo & Avatar Generator,#7C3AED,#FFFFFF,#6366F1,#FFFFFF,#EC4899,#FFFFFF,#FAF5FF,#0F172A,#FFFFFF,#0F172A,#F7F3FD,#64748B,#EFE7FC,#DC2626,#FFFFFF,#7C3AED,AI purple + generation pink
+132,Link-in-Bio Page Builder,#2563EB,#FFFFFF,#7C3AED,#FFFFFF,#EC4899,#FFFFFF,#FFFFFF,#0F172A,#FFFFFF,#0F172A,#F1F5FD,#64748B,#E4ECFC,#DC2626,#FFFFFF,#2563EB,Brand blue + creator purple
+133,Wardrobe & Outfit Planner,#BE185D,#FFFFFF,#EC4899,#FFFFFF,#D97706,#FFFFFF,#FDF2F8,#0F172A,#FFFFFF,#0F172A,#FBF1F5,#64748B,#F7E3EB,#DC2626,#FFFFFF,#BE185D,Fashion rose + gold accent
+134,Plant Care Tracker,#15803D,#FFFFFF,#059669,#FFFFFF,#D97706,#FFFFFF,#F0FDF4,#0F172A,#FFFFFF,#0F172A,#F0F7F3,#64748B,#E2EFE7,#DC2626,#FFFFFF,#15803D,Nature green + sun yellow
+135,Book & Reading Tracker,#78716C,#FFFFFF,#92400E,#FFFFFF,#D97706,#FFFFFF,#FFFBEB,#0F172A,#FFFFFF,#0F172A,#F6F6F6,#64748B,#EEEDED,#DC2626,#FFFFFF,#78716C,Book brown + page amber
+136,Couple & Relationship App,#BE185D,#FFFFFF,#EC4899,#FFFFFF,#DC2626,#FFFFFF,#FDF2F8,#0F172A,#FFFFFF,#0F172A,#FBF1F5,#64748B,#F7E3EB,#DC2626,#FFFFFF,#BE185D,Romance rose + love red
+137,Family Calendar & Chores,#2563EB,#FFFFFF,#059669,#FFFFFF,#D97706,#FFFFFF,#F8FAFC,#0F172A,#FFFFFF,#0F172A,#F1F5FD,#64748B,#E4ECFC,#DC2626,#FFFFFF,#2563EB,Family blue + chore green
+138,Mood Tracker,#7C3AED,#FFFFFF,#6366F1,#FFFFFF,#D97706,#FFFFFF,#FAF5FF,#0F172A,#FFFFFF,#0F172A,#F7F3FD,#64748B,#EFE7FC,#DC2626,#FFFFFF,#7C3AED,Mood purple + insight amber
+139,Gift & Wishlist,#DC2626,#FFFFFF,#D97706,#FFFFFF,#EC4899,#FFFFFF,#FFF1F2,#0F172A,#FFFFFF,#0F172A,#FCF1F1,#64748B,#FAE4E4,#DC2626,#FFFFFF,#DC2626,Gift red + gold + surprise pink
+140,Running & Cycling GPS,#EA580C,#FFFFFF,#F97316,#FFFFFF,#059669,#FFFFFF,#0F172A,#FFFFFF,#192134,#FFFFFF,#201C27,#94A3B8,"rgba(255,255,255,0.08)",#DC2626,#FFFFFF,#EA580C,Energetic orange + pace green on dark
+141,Yoga & Stretching Guide,#6B7280,#FFFFFF,#78716C,#FFFFFF,#0891B2,#FFFFFF,#F5F5F0,#0F172A,#FFFFFF,#0F172A,#F6F6F7,#64748B,#EDEEEF,#DC2626,#FFFFFF,#6B7280,Sage neutral + calm teal
+142,Sleep Tracker,#4338CA,#FFFFFF,#6366F1,#FFFFFF,#7C3AED,#FFFFFF,#0F172A,#FFFFFF,#192134,#FFFFFF,#131936,#94A3B8,"rgba(255,255,255,0.08)",#DC2626,#FFFFFF,#4338CA,Night indigo + dream violet on dark
+143,Calorie & Nutrition Counter,#059669,#FFFFFF,#10B981,#FFFFFF,#EA580C,#FFFFFF,#ECFDF5,#0F172A,#FFFFFF,#0F172A,#F0F8F6,#64748B,#E1F2ED,#DC2626,#FFFFFF,#059669,Healthy green + macro orange
+144,Period & Cycle Tracker,#BE185D,#FFFFFF,#EC4899,#FFFFFF,#7C3AED,#FFFFFF,#FDF2F8,#0F172A,#FFFFFF,#0F172A,#FBF1F5,#64748B,#F7E3EB,#DC2626,#FFFFFF,#BE185D,Blush rose + fertility lavender
+145,Medication & Pill Reminder,#0284C7,#FFFFFF,#0891B2,#FFFFFF,#DC2626,#FFFFFF,#F0F9FF,#0F172A,#FFFFFF,#0F172A,#EFF7FB,#64748B,#E0F0F8,#DC2626,#FFFFFF,#0284C7,Medical blue + alert red
+146,Water & Hydration Reminder,#0284C7,#FFFFFF,#06B6D4,#FFFFFF,#0891B2,#FFFFFF,#F0F9FF,#0F172A,#FFFFFF,#0F172A,#EFF7FB,#64748B,#E0F0F8,#DC2626,#FFFFFF,#0284C7,Refreshing blue + water cyan
+147,Fasting & Intermittent Timer,#6366F1,#FFFFFF,#4338CA,#FFFFFF,#059669,#FFFFFF,#0F172A,#FFFFFF,#192134,#FFFFFF,#151D39,#94A3B8,"rgba(255,255,255,0.08)",#DC2626,#FFFFFF,#6366F1,Fasting indigo on dark + eating green
+148,Anonymous Community / Confession,#475569,#FFFFFF,#334155,#FFFFFF,#0891B2,#FFFFFF,#0F172A,#FFFFFF,#192134,#FFFFFF,#131B2F,#94A3B8,"rgba(255,255,255,0.08)",#DC2626,#FFFFFF,#475569,Protective grey + subtle teal on dark
+149,Local Events & Discovery,#EA580C,#FFFFFF,#F97316,#FFFFFF,#2563EB,#FFFFFF,#FFF7ED,#0F172A,#FFFFFF,#0F172A,#FDF4F0,#64748B,#FCEAE1,#DC2626,#FFFFFF,#EA580C,Event orange + map blue
+150,Study Together / Virtual Coworking,#2563EB,#FFFFFF,#3B82F6,#FFFFFF,#059669,#FFFFFF,#F8FAFC,#0F172A,#FFFFFF,#0F172A,#F1F5FD,#64748B,#E4ECFC,#DC2626,#FFFFFF,#2563EB,Focus blue + session green
+151,Coding Challenge & Practice,#22C55E,#0F172A,#059669,#FFFFFF,#D97706,#FFFFFF,#0F172A,#FFFFFF,#192134,#FFFFFF,#10242E,#94A3B8,"rgba(255,255,255,0.08)",#DC2626,#FFFFFF,#22C55E,Code green + difficulty amber on dark
+152,Kids Learning (ABC & Math),#2563EB,#FFFFFF,#F59E0B,#0F172A,#EC4899,#FFFFFF,#EFF6FF,#0F172A,#FFFFFF,#0F172A,#F1F5FD,#64748B,#E4ECFC,#DC2626,#FFFFFF,#2563EB,Learning blue + play yellow + fun pink
+153,Music Instrument Learning,#DC2626,#FFFFFF,#9A3412,#FFFFFF,#D97706,#FFFFFF,#FFFBEB,#0F172A,#FFFFFF,#0F172A,#FCF1F1,#64748B,#FAE4E4,#DC2626,#FFFFFF,#DC2626,Musical red + warm amber
+154,Parking Finder,#2563EB,#FFFFFF,#059669,#FFFFFF,#DC2626,#FFFFFF,#F0F9FF,#0F172A,#FFFFFF,#0F172A,#F1F5FD,#64748B,#E4ECFC,#DC2626,#FFFFFF,#2563EB,Available blue/green + occupied red
+155,Public Transit Guide,#2563EB,#FFFFFF,#0891B2,#FFFFFF,#EA580C,#FFFFFF,#F8FAFC,#0F172A,#FFFFFF,#0F172A,#F1F5FD,#64748B,#E4ECFC,#DC2626,#FFFFFF,#2563EB,Transit blue + line colors
+156,Road Trip Planner,#EA580C,#FFFFFF,#0891B2,#FFFFFF,#D97706,#FFFFFF,#FFF7ED,#0F172A,#FFFFFF,#0F172A,#FDF4F0,#64748B,#FCEAE1,#DC2626,#FFFFFF,#EA580C,Adventure orange + map teal
+157,VPN & Privacy Tool,#1E3A5F,#FFFFFF,#334155,#FFFFFF,#22C55E,#0F172A,#0F172A,#FFFFFF,#192134,#FFFFFF,#10192E,#94A3B8,"rgba(255,255,255,0.08)",#DC2626,#FFFFFF,#1E3A5F,Shield dark + connected green
+158,Emergency SOS & Safety,#DC2626,#FFFFFF,#EF4444,#FFFFFF,#2563EB,#FFFFFF,#FFF1F2,#0F172A,#FFFFFF,#0F172A,#FCF1F1,#64748B,#FAE4E4,#DC2626,#FFFFFF,#DC2626,Alert red + safety blue
+159,Wallpaper & Theme App,#7C3AED,#FFFFFF,#EC4899,#FFFFFF,#2563EB,#FFFFFF,#FAF5FF,#0F172A,#FFFFFF,#0F172A,#F7F3FD,#64748B,#EFE7FC,#DC2626,#FFFFFF,#7C3AED,Aesthetic purple + trending pink
+160,White Noise & Ambient Sound,#475569,#FFFFFF,#334155,#FFFFFF,#4338CA,#FFFFFF,#0F172A,#FFFFFF,#192134,#FFFFFF,#131B2F,#94A3B8,"rgba(255,255,255,0.08)",#DC2626,#FFFFFF,#475569,Ambient grey + deep indigo on dark
+161,Home Decoration & Interior Design,#78716C,#FFFFFF,#A8A29E,#FFFFFF,#D97706,#FFFFFF,#FAF5F2,#0F172A,#FFFFFF,#0F172A,#F6F6F6,#64748B,#EEEDED,#DC2626,#FFFFFF,#78716C,Interior warm grey + gold accent
\ No newline at end of file
diff --git a/.claude/skills/ui-ux-pro-max/data/design.csv b/.claude/skills/ui-ux-pro-max/data/design.csv
new file mode 100644
index 000000000..e6775ce3d
--- /dev/null
+++ b/.claude/skills/ui-ux-pro-max/data/design.csv
@@ -0,0 +1,1776 @@
+Bauhaus（包豪斯）
+大胆的几何现代主义，包含圆形、方形和三角形。主色调（红/蓝/黄），边缘鲜明，阴影强烈。功能性与艺术性兼备，带有建构主义的不对称。
+1. 极简主义品牌官网与电商
+2. 工具类与高效率 App
+3. 数字媒体与在线杂志
+
+<design-system>
+Design Style: Bauhaus (Mobile)
+1. Design Philosophy
+The Bauhaus style embodies the revolutionary principle "form follows function" while celebrating pure geometric beauty and primary color theory. On mobile, this translates to tactile constructivism—the screen is a canvas where elements are physically stacked blocks. The aesthetic creates a high-impact, poster-like experience in the palm of the hand: bold, touch-centric, and unapologetically graphic.
+Vibe: Tactile, Constructivist, Geometric, High-Contrast, Bold, Architectural
+Core Concept: The mobile interface is a vertical geometric composition. Scroll views are not just content streams but stacked layers of colored paper and rigid shapes. The limited screen real estate forces a focus on massive typography and distinct color blocking (Red #D02020, Blue #1040C0, Yellow #F0C020). Every tap should feel mechanical and substantial.
+Key Characteristics:
+● Geometric Purity: UI elements are strictly circles (buttons/avatars) or squares (cards/inputs).
+● Tactile Depth: Hard shadows indicate interactivity; elements look "pressable."
+● Color Blocking: distinct screen sections use solid primary colors to separate content without whitespace.
+● Thick Borders: 2px and 3px black borders ensure legibility and distinct separation on small screens.
+● Vertical Rhythm: Strong vertical stacking with deliberate spacing, avoiding clutter.
+● Constructivist Typography: Headlines are massive (text-4xl to text-5xl) relative to screen width, breaking traditional mobile scaling rules.
+● Thumb-Friendly: Interactive zones are large, distinct, and geometrically defined.
+2. Design Token System (The DNA)
+Colors (Single Palette - Light Mode)
+The palette remains strictly Bauhaus primaries, optimized for high contrast outdoors.
+● background: #F0F0F0 (Off-white canvas)
+● foreground: #121212 (Stark Black)
+● primary-red: #D02020 (Bauhaus Red)
+● primary-blue: #1040C0 (Bauhaus Blue)
+● primary-yellow: #F0C020 (Bauhaus Yellow)
+● border: #121212 (Thick, distinct borders)
+● muted: #E0E0E0
+Typography
+● Font Family: 'Outfit' (geometric sans-serif).
+● Font Import: Outfit:wght@400;500;700;900
+● Scaling: Aggressive scaling adapted for vertical viewports.
+    ○ Display: text-4xl → text-5xl (Massive headers taking up 30-40% of screen width)
+    ○ Subheadings: text-xl → text-2xl
+    ○ Body: text-base (16px minimum for legibility)
+    ○ Button Text: text-lg (Large for readability)
+● Weights:
+    ○ Headlines: font-black (900) uppercase, tight tracking (tracking-tighter)
+    ○ Buttons/Nav: font-bold (700) uppercase, wide tracking (tracking-wide)
+    ○ Body: font-medium (500)
+● Line Height: Tight (leading-none) for headlines to save vertical space; leading-relaxed for body text.
+Radius & Border
+● Radius: Strict Binary—rounded-none (0px) for layout blocks, inputs, and cards; rounded-full (9999px) for primary action buttons and avatars.
+● Border Widths:
+    ○ Standard Elements: border-2 (2px)
+    ○ Major Containers/Bottom Nav: border-t-2 or border-3
+    ○ Separators: divide-y-2
+● Border Color: Always #121212 (black).
+Shadows/Effects
+● Hard Offset Shadows (Tactile feedback):
+    ○ Small elements (Tags/Icons): shadow-[2px_2px_0px_0px_black]
+    ○ Buttons/Cards: shadow-[4px_4px_0px_0px_black] (Reduced from web 8px to save screen width)
+    ○ Floating Action Button (FAB): shadow-[5px_5px_0px_0px_black]
+● Touch Feedback: active:translate-x-[2px] active:translate-y-[2px] active:shadow-none (Instant mechanical depression).
+● Patterns:
+    ○ Dot grid backgrounds on "Paper" colored sections (background-size: 16px 16px).
+    ○ Screen transitions: Slide-over with hard black borders.
+3. Component Stylings
+Buttons (Touch Targets)
+● Minimum Size: Height h-12 or h-14 (48px-56px) for thumb accessibility.
+● Variants:
+    ○ Primary (CTA): w-full bg-[#D02020] text-white border-2 border-black shadow-[4px_4px_0px_0px_black]
+    ○ Secondary: w-full bg-[#1040C0] text-white border-2 border-black shadow-[4px_4px_0px_0px_black]
+    ○ Floating Action (FAB): h-14 w-14 rounded-full bg-[#F0C020] border-2 border-black shadow-[4px_4px_0px_0px_black] flex items-center justify-center
+● Shapes: Full-width rectangular buttons (rounded-none) or pill-shaped (rounded-full) for bottom-sticky actions.
+● States: NO hover. Focus on active state (press down effect).
+Cards (Mobile Stack)
+● Base Style: White background, border-2 border-black, shadow-[4px_4px_0px_0px_black], mb-6.
+● Decoration:
+    ○ Geometric badge in top-right: absolute top-0 right-0 h-8 w-8 bg-[#F0C020] border-l-2 border-b-2 border-black flex items-center justify-center.
+● Interaction: Entire card is a touch target. active:translate-x-[1px] active:translate-y-[1px] active:shadow-[2px_2px_0px_0px_black].
+● Content: Image usually takes top half (aspect-video), bold text below.
+Bottom Navigation (The Anchor)
+● Container: fixed bottom-0 w-full bg-white border-t-2 border-black z-50 h-20.
+● Grid: 3 to 5 items equally spaced.
+● Items:
+    ○ Inactive: Black stroke icon, clear background.
+    ○ Active: Icon inside a geometric shape (Square/Circle) with primary color fill (e.g., Red Square context).
+    ○ Label: Tiny uppercase bold text below icon, or icon only for minimalism.
+Inputs & Forms
+● Field: h-12 bg-white border-2 border-black rounded-none px-4 text-black placeholder:text-gray-400 focus:bg-[#FFF9C4] focus:ring-0 focus:border-black.
+● Label: Uppercase bold, mb-1 block.
+● Checkbox: h-6 w-6 appearance-none border-2 border-black bg-white checked:bg-[#1040C0] rounded-none.
+4. Layout & Spacing
+● Container: w-full with px-5 (20px) padding. Max-width constraints removed (fluid mobile).
+● Section Padding:
+    ○ Standard: py-8
+    ○ Hero: pt-12 pb-16
+● Grid Systems:
+    ○ Main Layout: Single column (Stack).
+    ○ Micro-grids: 2-column for stats/gallery (gap-3 or gap-4).
+● Safe Areas: Respect pt-safe (top notch) and pb-safe (bottom home indicator).
+● Dividers: Thick section separators border-b-2 border-black usually paired with a background color change.
+5. Non-Genericness (Bold Choices)
+Mobile Constraints require distinct personality to avoid looking like a wireframe:
+● Full-Screen Color Washes:
+    ○ Onboarding screens: Full solid backgrounds (Red Screen → Blue Screen → Yellow Screen).
+    ○ Success states: Full Yellow background (bg-[#F0C020]) with massive black centered checkmark.
+    ○ Error states: Full Red background (bg-[#D02020]) with white text.
+● Header Identity:
+    ○ Instead of a standard navbar, use a "Bauhaus Header Block": A row containing a Square (Menu), a flexible space for the Title (Left aligned, massive), and a Circle (Profile/Search). All elements separated by vertical borders divide-x-2 border-b-2 border-black.
+● Geometric Lists:
+    ○ List items aren't just text lines. They are alternating geometric bullets: Line 1 uses a ■, Line 2 uses a ●, Line 3 uses a ▲.
+● Rotated "Stickers":
+    ○ "New", "Sale", or Notification badges are rotated -12deg or +12deg, sitting on top of corners to break the rigid grid.
+● Image Filters:
+    ○ Thumbnails: Grayscale + High Contrast.
+    ○ Detail View: Full color, no rounded corners, thick black border.
+6. Icons & Imagery
+● Icon Library: lucide-react-native or similar (Circle, Square, Triangle, Menu, X, ArrowLeft).
+● Icon Style:
+    ○ Stroke: stroke-[2px].
+    ○ Size: w-6 h-6 (standard) or w-8 h-8 (hero actions).
+● Icon Containers:
+    ○ Navigation icons often live inside rigid 48x48px bordered squares.
+    ○ Back buttons are always circular rounded-full with a border.
+● Imagery:
+    ○ Masking: Use CSS clip-paths to crop header images into non-standard shapes (e.g., a trapezoid or a circle cropped at the bottom) within the mobile frame.
+7. Responsive Strategy (Device Sizes)
+● Small Phones (SE/Mini):
+    ○ Reduce display text to text-3xl.
+    ○ Stack stats vertically (1-col).
+    ○ Reduce padding to px-4.
+● Large Phones (Max/Plus):
+    ○ Display text scales to text-5xl.
+    ○ Stats can use 2-col grid.
+    ○ Card images gain more height.
+● Orientation:
+    ○ Portrait (Primary): Vertical stacking.
+    ○ Landscape: Avoid if possible, or split screen 50/50 (Text Left / Image Right).
+8. Animation & Micro-Interactions
+● Feel: Physical, snappy, zero-latency.
+● Duration: duration-150 (Very fast).
+● Easing: ease-in-out (Sharp stops).
+● Interactions:
+    ○ Tap: The element physically depresses (translate X/Y matches shadow size).
+    ○ Drawer Open: Slides in from Left/Right with a solid black border line leading it. No soft fades—it slides like a mechanical door.
+    ○ Toast/Alerts: Drop down from top as a solid geometric block (Yellow/Red) with hard borders, swinging slightly like a hanging sign.
+    ○ Scroll: Sticky headers snap into place instantly.
+</design-system>
+
+
+
+"Monochrome（单色/黑白）
+"一套简洁的编辑设计体系，建立在纯粹的黑白之上。没有点缀色——只有戏剧性的对比、超大衬线字体和精准的几何布局。让人联想到高端时尚专题和建筑作品集。严肃、成熟、毫不掩饰地大胆。
+"1. 极简主义电商与高端奢侈品
+2. 专业创意与文档编辑工具
+3. 数据密集型仪表盘（局部应用）
+4. 实验性与先锋感网站"
+
+<design-system>
+Design Style: Minimalist Monochrome (Mobile)
+Design Philosophy
+Core Principle
+The Pocket Editorial. On mobile, Minimalist Monochrome transforms the screen into a tactile, high-end printed manifesto. It rejects the "app-like" tendency for soft bubbles and friendly gradients. Instead, it offers a stark, vertical journey defined by pure black (#000000), pure white (#FFFFFF), and razor-sharp borders. Every tap is a deliberate decision; every scroll is a flip of a page in a luxury monograph.
+Visual Vibe
+Emotional Keywords: Tactile, Austere, Editorial, Direct, High-Fidelity, Uncompromising, Sharp, Rhythmic.
+This is the visual language of:
+● Mobile typographers and digital brutalism
+● The mobile interfaces of luxury fashion houses (Balenciaga, Zara, SSENSE)
+● Digital exhibitions where the content frames itself
+● High-contrast e-reader aesthetics
+What This Design Is NOT
+● ❌ "App-y" (no cards with drop shadows, no floating bubbles)
+● ❌ Native iOS/Android standard (no system blue, no rounded groups)
+● ❌ Gesture-heavy (interactions are explicit taps, not vague swipes)
+● ❌ Cluttered (one idea per screen view)
+● ❌ Colorful (strictly grayscale)
+The DNA of Minimalist Monochrome (Mobile)
+1. Vertical Linearity
+The mobile screen is a continuous roll of paper. Structure is created not by boxes, but by horizontal lines (rules) that span the full width of the device. Content lives between these lines.
+2. Typography as Interface
+Buttons are often just large words. Navigation is text-based. The serif typeface (Playfair Display) acts as the primary image on the screen. Headlines must be large enough to break words onto new lines, creating graphic shapes.
+3. The "Touch" Inversion
+Since there is no "hover" on mobile, interaction is communicated through inversion. When a user touches a white block, it turns black instantly. This zero-latency binary feedback replaces physical tactility.
+4. Zero Radius, Zero Fluff
+All elements—buttons, images, inputs, modals—have strictly 0px border radius. This sharp geometry cuts through the rounded physical corners of modern smartphones, creating a striking contrast.
+
+Design Token System
+Colors (Strictly Monochrome)
+background:       #FFFFFF (Pure white)
+foreground:       #000000 (Pure black)
+muted:            #F5F5F5 (Off-white for "pressed" states or subtle blocks)
+mutedForeground:  #525252 (Dark gray for metadata)
+border:           #000000 (Black borders - heavy usage)
+borderLight:      #E5E5E5 (Subtle dividers)
+overlay:          #000000 (Full screen menu background)
+
+Rule: No accent colors. The "Active State" is simply the inverse of the "Default State."
+Typography
+Font Stack:
+● Display: "Playfair Display", serif - For all headlines and large numerals.
+● Body: "Source Serif 4", serif - For reading text.
+● UI/Labels: "JetBrains Mono", monospace - For tiny tags, dates, and technical specs.
+Type Scale (Mobile Optimized):
+Note: Sizes are calibrated to feel "massive" on a small screen without breaking layout.
+xs:   0.75rem  (12px) - Metadata / Breadcrumbs
+sm:   0.875rem (14px) - UI Labels / Captions
+base: 1rem     (16px) - Body text (Legibility minimum)
+lg:   1.125rem (18px) - Lead text / Button text
+xl:   1.5rem   (24px) - Section headers
+2xl:  2rem     (32px) - Standard Headlines
+3xl:  2.5rem   (40px) - Hero Sub-text
+4xl:  3rem     (48px) - Major Headlines
+5xl:  4rem     (64px) - "Cover" text (Often wraps)
+6xl:  5rem     (80px) - Numerical statements
+
+Tracking & Leading:
+● Headlines: tracking-tighter (-0.05em) and leading-[0.9]. Text should feel tightly packed.
+● Body: leading-relaxed for readability.
+● Button Text: tracking-widest uppercase.
+Border Radius
+ALL VALUES: 0px
+
+Constraint: Even the bottom sheet (modal) must be square. Even the active state of a tapped element is a sharp rectangle.
+Borders & Lines (The Grid)
+hairline:  1px solid #E5E5E5  (List separators)
+thin:      1px solid #000000  (Standard element borders)
+thick:     2px solid #000000  (Emphasis / Input bottom)
+heavy:     4px solid #000000  (Section dividers)
+
+Usage:
+● Full-Bleed Lines: Borders should often touch the edges of the screen (-mx-4 or -mx-6).
+● Separators: Use border-b black heavily to separate stacked vertical content.
+Shadows
+NONE
+
+Depth is strictly 2D. Layers are defined by opacity (100% vs 0%) or borders, never by shadows.
+Textures & Patterns
+Use subtle noise to simulate high-quality paper texture on mobile backgrounds to avoid a "sterile" feeling.
+Mobile Noise (CSS):
+CSS
+
+background-image: url("data:image/svg+xml,..."); /* Same noise SVG as web */
+opacity: 0.03; /* Slightly higher opacity for small screens */
+
+
+Component Stylings
+Buttons & Touch Targets
+Primary Button (The Block):
+- Width: w-full (Full width strongly preferred)
+- Height: h-14 (56px - Large touch target)
+- Background: #000000
+- Text: #FFFFFF
+- Radius: 0px
+- Typography: Uppercase, Mono or Serif, Tracking-widest
+- Active State: Instantly inverts to White bg, Black text
+
+Secondary Button (The Outline):
+- Width: w-full
+- Height: h-14
+- Background: Transparent
+- Border: 1px solid #000000
+- Active State: Instantly fills Black
+
+Sticky Bottom Action (CTA):
+● A fixed bar at the bottom of the viewport.
+● border-t-2 border-black.
+● Contains a single primary action or a price + action pair.
+● Background: #FFFFFF (or inverted #000000).
+Cards / List Items
+The "Stacked" Card:
+Instead of a box with padding, mobile cards are often full-width segments separated by borders.
+- Container: Border-bottom 1px solid #000000
+- Padding: py-6
+- Image: Aspect ratio 4:5 or 1:1, full width or padded
+- Content: Text sits directly below image
+- Interaction: Touching anywhere in the segment triggers "Active" state
+
+Navigation
+The "Bar":
+● Top: Minimal. Just a logo (Left) and a "MENU" text button or Hamburger (Right).
+● Bottom: Optional. If used, simple text labels or thin outline icons. border-t-2 border-black.
+The Menu Overlay:
+● Full screen.
+● Background: #000000 (Black).
+● Text: #FFFFFF (White).
+● List items: Massive text (text-4xl), serif, centered or left-aligned.
+● Divider: Thin white lines between menu items.
+Inputs
+Mobile Input:
+- Style: Flush with background.
+- Border: Bottom only (2px solid black).
+- Radius: 0px.
+- Height: h-14.
+- Focus: Border becomes 4px thick. No native blue glow.
+- Clear Button: Simple 'X' icon in black.
+
+
+Layout Strategy
+Safe Areas
+● Respect pb-safe (Home Indicator) and pt-safe (Status Bar).
+● Style Note: The Status Bar should be white text on black header, or black text on white header. High contrast.
+Container & Spacing
+● Horizontal Padding: px-5 (20px) or px-6 (24px).
+● Vertical Rhythm:
+    ○ Small gaps: py-4
+    ○ Section gaps: py-16
+    ○ Between text and image: my-6
+The "Scroll"
+● Design for the scroll. Use sticky headers for section titles (e.g., "Details", "Shipping") that stack as the user scrolls down, creating a filing cabinet effect.
+● Use divide-y divide-black for lists to create strong separation.
+
+Effects & Animation
+Motion Philosophy: Cut, Don't Fade.
+Mobile transitions should feel mechanical and instant, like a shutter clicking.
+Interactions:
+● Tap: active:bg-black active:text-white (Instant inversion).
+● Page Transition: Slide in from right (100% width) with a hard edge. No distinct shadow on the sliding page, just a clean line.
+● Modal: Slides up from bottom. 0px radius. Covers 100% or 90% of screen. Black border top.
+● Scroll Parallax: None. Keep scrolling tied 1:1 to finger movement.
+Specific Implementation:
+TypeScript
+
+// Mobile Button Active State
+className="bg-black text-white active:bg-white active:text-black active:border active:border-black transition-none"
+
+// Image Loading
+className="opacity-0 data-[loaded=true]:opacity-100 transition-opacity duration-300 ease-linear grayscale data-[loaded=true]:grayscale-0"
+
+
+Iconography
+Style: Stroke-based, Thin, Sharp.
+Library: Lucide React (or similar).
+Mobile Specifics:
+● Size: w-6 h-6 (Standard)
+● Stroke: 1.5px (Matches the fine aesthetic)
+● Touch: If an icon is a button, it must have a p-3 (12px) padding hit-box around it, even if the border is invisible.
+
+Responsive Strategy (Device Sizes)
+Small Phones (iPhone SE/Mini):
+● Headlines: Scale down to text-4xl to prevent breaking single words into nonsense.
+● Padding: Reduce to px-4.
+Large Phones (Max/Plus):
+● Headlines: text-5xl or text-6xl.
+● Layout: Can introduce a 2-column grid for product thumbnails (but keep strict borders between them).
+Dark Mode:
+● System: Enforce Light Mode (Black on White) as the default brand identity.
+● Inverted Sections: Use Dark Mode (White on Black) only for specific sections (Footer, Hero, Special Features) to create rhythm, not based on system settings.
+
+Bold Choices (Non-Negotiable)
+1. Massive Typographic Hero: The opening screen must feature a headline where a single word might span the full width.
+2. The "Hard" Line: A 4px black line (border-b-4) must separate the Hero from the content.
+3. Sticky Section Headers: As you scroll, the section title (e.g., "01. INFO") sticks to the top with a bottom border, stacking on top of the previous one.
+4. No Hamburger Icon: Use the word "MENU" in JetBrains Mono instead of an icon, if space permits.
+5. Inverted Gallery: Image galleries have a Black background with images at full opacity.
+6. Editorial Inputs: Form labels look like subheadings (Playfair Display, Italic).
+7. No Skeletons: Loading states are simple spinning black lines or just whitespace. No gray pulsing blobs.
+8. Mechanical Feedback: Every interactive element MUST have a visible active state (color inversion).
+
+What Success Looks Like (Mobile)
+A successfully implemented Minimalist Monochrome mobile design should feel like:
+● A digitally printed receipt from a high-end boutique.
+● A pocket edition of a brutally honest manifesto.
+● Clean, fast, and remarkably legible outdoors.
+● Intimidatingly simple.
+It should NOT feel like:
+● A scaled-down version of a desktop site.
+● A standard Bootstrap/Tailwind mobile layout.
+● An app trying to be "friendly."
+</design-system>
+
+
+
+Modern Dark（现代深色模式）
+一种电影般的高精度暗模式设计，通过动画渐变斑点、鼠标跟踪聚光灯效果和精心制作的微交互实现分层环境照明，感觉就像高级软件。
+"1. 影音娱乐与流媒体平台
+2. 开发者工具与专业生产力软件
+3. 金融、科技与 AI 仪表盘
+4. 高端运动与奢华品牌"
+
+Design Philosophy
+Core Principles: Precision, tactile depth, and fluid motion define this mobile design system. For React Native, every component is treated as a physical layer within a stacked 3D space, illuminated by virtual light sources. The design communicates "high-end mobile utility"—as responsive and refined as the Linear mobile app or Apple’s native interface. Every shadow uses multiple layers, every gradient is dithered to prevent banding, and every interaction uses precise haptic feedback combined with Expo.out easing.
+Vibe: Cinematic Technical Minimalism. It’s a "Dark Mode First" aesthetic, utilizing near-blacks (#050506) and deep indigos. Imagine a high-end pro tool interface viewed through frosted glass at night. It is technical but inviting, using soft "glow" sources (#5E6AD2) to guide the thumb. It should feel like a premium native iOS/Android app, not a web-wrapper.
+Differentiation: The signature is Atmospheric Depth. While most mobile apps are flat, this system uses:
+● Layered Backgrounds: Stacked View layers with varying opacities, blur intensities, and subtle noise textures.
+● Animated Ambient Light: Large, slow-moving blurred Canvas objects (using react-native-skia or Animated) that simulate light pools.
+● Haptic-Linked Interactions: Every "Pressable" event is paired with subtle haptics (Impact Light/Medium) to reinforce the "hardware" feel.
+● Spring-less Precision: Eschewing "bouncy" animations for sophisticated Bezier(0.16, 1, 0.3, 1) curves.
+
+Design Token System (The DNA)
+Color Strategy: Deep Space & Ambient Light
+Token
+Value
+Usage
+bg-deep
+#020203
+Screen background, Bottom Tab bar base
+bg-base
+#050506
+Primary view container background
+bg-elevated
+#0a0a0c
+Modals, Bottom sheets, Surface cards
+surface
+rgba(255,255,255,0.05)
+Card backgrounds, list items
+foreground
+#EDEDEF
+Primary text (High contrast)
+foreground-muted
+#8A8F98
+Secondary labels, body text
+accent
+#5E6AD2
+Buttons, active icons, primary brand glows
+accent-glow
+rgba(94,106,210,0.2)
+Ambient shadows and light emission
+border-default
+rgba(255,255,255,0.08)
+Subtle hairline dividers (0.5pt on iOS)
+
+Typography System (React Native)
+Font Family: Inter, GeistSans-Regular, or System San Francisco/Roboto.
+Level
+Size
+Weight
+Letter Spacing
+Display
+48
+700
+-1.5
+H1
+32
+600
+-0.5
+H2
+24
+600
+-0.5
+H3
+18
+600
+0
+Body
+16
+400
+0
+Label/Mono
+12
+500
+1.2 (Uppercase)
+Gradient Text: Implement using mask-view and react-native-linear-gradient. Headers should transition from #FFFFFF to rgba(255,255,255,0.7) vertically.
+
+Component Styling Principles
+1. The Background System
+Never use a single solid color for the screen.
+● Base: A LinearGradient from #0a0a0f at the top to #020203 at the bottom.
+● The "Blobs": Use AbsoluteFill views with borderRadius equal to half their width, high blurRadius (30-50), and low opacity (0.1).
+● Animation: Use useAnimatedStyle from Reanimated to slowly oscillate the translateX and translateY of these light pools.
+2. Cards & Containers
+● Radius: Always borderRadius: 16.
+● Border: Use borderWidth: StyleSheet.hairlineWidth with rgba(255,255,255,0.1).
+● Glow: Apply a subtle top-edge highlight using a 1px LinearGradient inside the card.
+● Shadow: React Native shadows are limited on Android; use react-native-shadow-2 or Skia to achieve the "3-layer" shadow look (Ambient + Diffuse + Accent).
+3. Buttons (Pressables)
+● Primary: Background #5E6AD2. Text #FFFFFF.
+● Interaction: On onPressIn, scale to 0.97. On onPressOut, scale back to 1.0. Use Selection haptic feedback.
+● Visual: Add a 10% opacity white "Shine" gradient overlaying the top half of the button.
+4. Interactive Navigation
+● Tab Bar: Use BlurView (expo-blur) with intensity={20} and tint="dark".
+● Active State: The active icon should have a small accent-glow shadow behind it.
+● Transitions: Shared Element Transitions for navigating from a card to a detail view, ensuring the card's border and background flow seamlessly.
+
+Layout & Motion
+Spacing Scale
+● Base Unit: 4pt.
+● Screen Margins: 20pt (Standard) or 16pt (Tight).
+● Gaps: Use gap (available in modern RN) with values of 8, 12, 16, or 24.
+Animation Specs
+● Easing: Easing.bezier(0.16, 1, 0.3, 1) (Expo Out).
+● Duration: * Micro-interactions (Toggle/Press): 200ms.
+    ○ Screen Transitions: 400ms.
+    ○ Modals (Bottom Sheet): 500ms with custom spring (damping: 20, stiffness: 90).
+
+Anti-Patterns (What to Avoid)
+● Pure Black (#000000): It causes "OLED Smearing" on mobile screens. Stick to #050506.
+● Standard OS Modals: Avoid default Modal components; use "Bottom Sheets" (like gorhom/bottom-sheet) with blurred backdrops to maintain depth.
+● Full Opacity Borders: Never use solid grey borders. Always use rgba white/black for natural blending.
+● Laggy Blobs: Do not use too many blurRadius effects on the main JS thread. Always use useNativeDriver: true or Skia.
+
+The "Bold Factor" (Signature Elements)
+1. Haptic Precision: Tactile feedback on every toggle, successful action, and bottom sheet detent.
+2. Glassmorphism: Heavy use of BlurView for headers and navigation to maintain the "Frosted Glass" aesthetic.
+3. Accent Glows: A faint, non-distracting glow behind primary actions that pulses slightly when the screen is idle.
+4. Bento Layouts: For dashboards, use Flexbox to create asymmetric cards (e.g., one card taking 60% width, the other 40% with different heights).
+
+
+SaaS（软件即服务）
+一个大胆、极简主义的现代视觉系统，将简洁的美学与动态的执行相结合。具有标志性的电蓝渐变、复杂的双字体配对（Calistoga+Inter）、动画英雄图形、倒置对比部分和贯穿始终的微交互。专业而前卫的设计——自信而不杂乱。
+1. 业务管理与协作系统 (B2B / Operations)
+2. 开发者工具与云服务平台
+3. 企业内部工具与人力资源管理 (HRM)
+4. 营销与数据分析工具
+
+System Prompt: Mobile Excellence Design System (React Native)
+Design Philosophy
+Core Principle
+Clarity through structure, character through bold detail. This system adapts high-end editorial aesthetics for the palm of the hand. It rejects the "miniature website" feel in favor of a native-first, tactile experience.
+Whitespace is a precision instrument for thumb-driven navigation. Motion is not decoration; it is spatial feedback. Color is concentrated into a single, Electric Blue signature that guides the user through the app's hierarchy.
+The Visual Vibe
+"High-Tech Boutique." Imagine a premium fintech app combined with a modern design portfolio. It feels engineered, yet artistic; minimal, yet alive.
+● Confident: Bold typography and vibrant accents.
+● Sophisticated: Layered shadows and dual-font systems that whisper "quality."
+● Tactile: Haptic-ready interactions and fluid spring animations.
+● Premium: Generous "safe areas" and elevated surfaces.
+
+The DNA of This Style
+1. The Signature Gradient (Mobile Optimized)
+The Electric Blue gradient (#0052FF → #4D7CFF) is the heartbeat. In React Native, this is implemented via react-native-linear-gradient.
+● Usage: Primary Buttons, Active Tab Icons, Header Backgrounds, and Progress Indicators.
+● Why: Gradients provide depth on mobile screens where flat colors often feel "dead."
+2. Physical Depth & Living Elements
+Mobile is a 3D space. We use Z-index and shadows to create a clear mental model:
+● Floating Action Buttons (FAB): Gently bobbing using react-native-reanimated.
+● Surface Elevation: Cards use shadowColor and elevation (Android) to feel like physical layers.
+● Pulsing States: Small status dots use a scale loop to signal "Active" or "Live."
+3. Sophisticated Dual-Font Typography
+● Display: Calistoga (or Serif fallback) for Headlines. It adds human warmth to the digital interface.
+● UI/Body: Inter (or System Sans-Serif). The workhorse for readability.
+● Technical: JetBrains Mono for labels and data points.
+4. Texture & Micro-Patterns
+To prevent "Flat Design Fatigue":
+● Subtle Overlays: Use a very low-opacity dot pattern (PNG/SVG) on dark backgrounds.
+● Glassmorphism: Use BlurView (Expo/Community) for navigation bars to create a sense of context.
+
+Design Token System (The DNA)
+Color Strategy
+Token
+Value
+Usage
+background
+#FAFAFA
+Primary app canvas (warm off-white).
+foreground
+#0F172A
+Deep slate for primary text and dark sections.
+muted
+#F1F5F9
+Secondary surfaces (gray fills).
+accent
+#0052FF
+Primary actions and brand touchpoints.
+accent-sec
+#4D7CFF
+Gradient endpoint.
+card
+#FFFFFF
+Pure white for elevated components.
+border
+#E2E8F0
+Hairline dividers (0.5pt to 1pt).
+Typography Scale
+● Hero (H1): 36pt - 42pt | Calistoga | Leading 1.1
+● Section (H2): 28pt - 32pt | Calistoga | Leading 1.2
+● Body: 16pt - 18pt | Inter | Leading 1.5
+● Label: 12pt | JetBrains Mono | Uppercase | Letter Spacing 1.5
+
+Component Specifications (React Native)
+1. Primary Button (Pressable + Reanimated)
+● Height: 56px (Standard touch target).
+● Radius: 16px (Rounded-2xl).
+● Interaction: * On onPressIn: Scale down to 0.96.
+    ○ On onPressOut: Spring back to 1.0.
+● Style: Linear Gradient background with shadow-accent.
+2. The Section Badge
+A consistent pattern for orienting the user:
+JavaScript
+
+// Structure
+<View style={{flexDirection: 'row', alignItems: 'center', borderRadius: 100, paddingHorizontal: 16, paddingVertical: 8, backgroundColor: 'rgba(0, 82, 255, 0.05)', borderWidth: 1, borderColor: 'rgba(0, 82, 255, 0.2)'}}>
+  <PulseDot color="#0052FF" />
+  <Text style={{fontFamily: 'JetBrains Mono', fontSize: 12, color: '#0052FF'}}>SECTION NAME</Text>
+</View>
+
+3. Content Cards
+● Border: 1pt hairline in Slate-200.
+● Shadow: * iOS: shadowOpacity: 0.1, shadowRadius: 10, shadowOffset: {width: 0, height: 4}.
+    ○ Android: elevation: 4.
+● Padding: 24px (Consistent gutter).
+
+Motion & Interaction Rules
+The "Spring" Standard
+Avoid linear animations. Use Spring Config for all transitions:
+● mass: 1, damping: 15, stiffness: 120.
+Entrance Animations
+● Staggered Fade-In: Content should slide up (Y: 20 -> 0) and fade in (Opacity: 0 -> 1) as the screen mounts.
+● Layout Transitions: Use LayoutAnimation or Reanimated's entering prop for seamless list updates.
+
+Implementation Instructions for AI
+1. Strict Styling: Use StyleSheet.create or a utility-first library like NativeWind (Tailwind for RN).
+2. Safe Areas: Always wrap root content in SafeAreaView.
+3. Touch Targets: Ensure all interactive elements are at least 44x44px.
+4. Icons: Use Lucide-React-Native or Expo Vector Icons (Feather/Ionicons).
+5. Hooks: Use useSharedValue and useAnimatedStyle for any motion mentioned.
+Example Signature Block:
+When generating a screen, always include a "Design Note" explaining how the Asymmetry and Gradient Accent are applied to ensure it doesn't look like a generic template.
+
+
+Terminal（终端/命令行）
+一种原始的、功能性的、复古的、未来主义的命令行界面美学。高对比度、等宽精度和闪烁光标。
+1. 开发者工具与极客类应用
+2. 区块链、Web3 与 加密货币项目
+3. 科幻、侦探与解谜类游戏 (ARG)
+4. 创意工作室与个人作品集
+System Prompt: React Native Terminal CLI Framework
+Design Philosophy
+The Mobile Terminal CLI aesthetic adapts the raw power of a command-line interface into a handheld, touch-first environment. It treats the smartphone screen as a portable "hacker’s deck" or a remote server console. It is utilitarian, high-contrast, and uncompromisingly rigid.
+The vibe is "Field Operative" or "System Administrator on the go." Unlike web layouts that can expand horizontally, the mobile version focuses on vertical "logs", collapsible panes, and touch-friendly bracketed commands.
+Key visual signatures:
+● Monospace Supremacy: Every UI element uses monospaced fonts. Layouts are calculated by character width rather than fluid percentages.
+● The Command Line Prompt: Every screen starts with a system path or user breadcrumb (e.g., ~/root/user/home).
+● Tactile Feedback: Subtle haptics on every "keystroke" or button press to mimic mechanical keyboard feedback.
+● ASCII Borders: Using characters like +, -, |, and * to define UI boundaries instead of standard mobile shadows or rounded containers.
+
+Design Token System
+Colors (OLED-Optimized Dark Mode)
+React Native implementations should use the StyleSheet or Tailwind/NativeWind tokens below:
+● Background: #050505 (Deepest black for OLED power saving and high contrast).
+● Foreground:
+    ○ Primary: #33FF00 (Classic Matrix Green).
+    ○ Secondary: #FFB000 (Terminal Amber for warnings/toggles).
+    ○ Muted: #1A3D1A (Low-intensity green for inactive text/guides).
+    ○ Error: #FF3333 (Command Failed Red).
+● Border: #33FF00 (1px solid green for terminal windows).
+Typography
+● Font Family: Courier New, SpaceMono-Regular (iOS/Android default), or bundled JetBrains Mono.
+● Size: Strict 12pt, 14pt, or 16pt. No "in-between" sizes.
+● Weight: Normal (monospaced fonts lose their character when too bold).
+● Line Height: Tight. 1.2x font size to maximize information density on small screens.
+Radius & Borders
+● Radius: 0. Standard React Native borderRadius: 0. No exceptions.
+● Borders: borderWidth: 1. Style: solid.
+
+Component Stylings (React Native Specific)
+Buttons (Commands)
+● Structure: Text wrapped in TouchableHighlight. Displayed as [ EXECUTE ] or > PROCEED.
+● Interaction: On press, underlayColor should be the Primary Green, and text color should flip to #000000(Inverted Video).
+● Haptics: Trigger Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light) on press.
+Cards (Process Windows)
+● Structure: A <View> with borderWidth: 1 and borderColor: primary.
+● Title Bar: A top row with inverted colors: [ TITLE: SYSTEM_LOG ].
+● Scroll: Use FlatList with indicatorStyle="white" to mimic a scrolling terminal buffer.
+Inputs (The Caret)
+● Style: No background. Starts with a prefix: $ or >.
+● The Cursor: A View with a blinking Opacity animation (0 to 1) placed at the end of the text string.
+● Keyboard: Set keyboardType="ascii-capable" and autoCapitalize="none".
+
+Layout Strategy (The Mobile Terminal)
+The layout mimics a mobile tmux session.
+● Vertical Stacking: Use Flexbox with flexDirection: 'column'. Screens should feel like a continuous stream of data.
+● Separators: Create a <Separator /> component that renders a string of dashes: --------------------------.
+● Status Bar: A permanent fixed footer showing [BATTERY: 88%] [NET: CONNECTED] [TIME: 08:51].
+
+Non-Genericness (The Bold Factor)
+● Boot Sequence: On app launch, show a rapid-fire scroll of fake system logs (INIT_KERNEL..., LOADING_UI...) before the main content appears.
+● ASCII Graphics: Use Text components for headers instead of PNG icons.
+Plaintext
+
+ _  _  ____  ____ 
+( \/ )(  _ \(  _ \
+ \  /  ) _ ( )   /
+  \/  (____/(_)\_)
+
+● Progress Indicators: No ActivityIndicator. Use text-based bars: [#####-----] 50%.
+
+Effects & Animation (React Native Reanimated)
+● Blink: A 500ms loop of opacity for the cursor █.
+● Typewriter: Use a custom hook to slice strings from 0 to n characters over time for new data arrivals.
+● Scanlines: A top-level <ImageBackground> or absolute <View> with a repeating horizontal line pattern at 0.05opacity.
+
+Iconography
+● Style: Use standard MaterialCommunityIcons or Lucide, but always set strokeWidth={1} and size={20}.
+● Implementation: Icons should be treated as "Characters." They must be the same color as the text they accompany.
+
+Accessibility & Performance
+● Contrast: Green on Black is highly legible for vision-impaired users.
+● Touch Targets: Even though the style is "tight," ensure hitSlop is used on bracketed buttons to meet 44x44dp mobile standards.
+● Reduced Motion: Respect AccessibilityInfo.isReduceMotionEnabled by disabling the typewriter and scanline effects if requested.
+
+Kinetic（动力学/动态）
+运动优先设计，排版是主要的视觉媒介。具有无限选框、视口缩放文本、滚动触发动画和激进的大写样式。高对比度的野兽派能量，有节奏的动作。
+1. 沉浸式叙事与品牌官网 (Storytelling)
+2. 具有强引导需求的复杂流程 (Guidance)
+3. 数据可视化与实时监控 (Data Visualization)
+4. 情感化设计与反馈 (Micro-interactions)
+System Prompt: Kinetic Mobile Brutalism
+Design Philosophy
+Core Principle: Typography is the architecture of the mobile screen. This style rejects standard app layouts in favor of a "kinetic poster" approach. Text is treated as a graphic element; headers are hero units. Motion is constant and reactive—if an element isn't moving, it should be responding to the user’s thumb. Every interaction feels heavy, tactile, and high-contrast.
+Aesthetic Vibe: High-energy street brutalism. Precision meets raw power. It is an underground zine optimized for a 6-inch screen. Everything is uppercase, oversized, and uncomfortably bold. It screams rather than whispers. Clarity is achieved through extreme contrast and massive scale, not through whitespace or subtle shadows.
+Visual DNA: Relentless motion and aggressive scale. Numbers tower over labels. Scrolling isn't just movement—it's a performance. Use hard edges ($0px$ radius), sharp $2px$ borders, and instant color flips. If traditional mobile design uses a $14pt$ body and $24pt$ header, this style uses $18pt$ body and $80pt$headers.
+Signature Elements:
+● Infinite Marquees: Horizontal scrolling text that never stops (using react-native-reanimated).
+● Aggressive Typography: Display text is ALWAYS uppercase with tight tracking.
+● Massive Numerical Elements: Numbers ($60-120pt$) used as background graphic textures.
+● Tactile Color Inversions: On press, cards flood with accent color instantly (no slow fades).
+● Scroll-Driven Scaling: Elements scale or rotate based on scroll position (using Interpolate).
+● Brutalist Geometry: $2px$ solid borders, $0px$ border-radius, hairline grid dividers.
+
+Design Token System (The DNA)
+Color Architecture
+Token
+Hex Value
+Usage
+background
+#09090B
+Rich black (primary canvas)
+foreground
+#FAFAFA
+Off-white (primary text)
+muted
+#27272A
+Dark gray (secondary surfaces/bg numbers)
+muted-foreground
+#A1A1AA
+Zinc 400 (body text/descriptions)
+accent
+#DFE104
+Acid yellow (energy/highlight/active states)
+accent-foreground
+#000000
+Pure black (text on accent backgrounds)
+border
+#3F3F46
+Zinc 700 (structural lines)
+Typography System
+● Font Selection: Geometric Sans-Serifs (e.g., Space Grotesk, Inter, or System Bold).
+● Scale Hierarchy:
+    ○ Hero/Display: $60pt$ to $120pt$ (use PixelRatio for scaling).
+    ○ Section Headings: $40pt$ to $50pt$.
+    ○ Card Titles: $28pt$ to $32pt$.
+    ○ Body/Descriptions: $18pt$ to $20pt$.
+    ○ Small Labels: $12pt$ (Uppercase + Wide Tracking).
+● Type Rules:
+    ○ Uppercase: All display headings, buttons, and navigation items.
+    ○ Letter Spacing: letterSpacing: -1 for large text, +2 for small labels.
+    ○ Line Height: lineHeight should be $0.9x$ to $1.1x$ the font size for headings to create a "blocky" look.
+Shape & Layout
+● Base Unit: $4pt$ grid.
+● Border Radius: Strictly 0.
+● Borders: $2px$ solid (use borderWidth: 2).
+● Shadows: NONE. Use color layering and borders for depth.
+● Padding: Aggressive. Section padding py: 40, Card padding p: 24.
+
+Component Styling Principles
+Buttons
+● Structure: Height 64px or 80px. Bold, uppercase text.
+● Primary: Background #DFE104, Text #000000.
+● Outline: borderWidth: 2, Border #3F3F46, Transparent background.
+● Interaction: Use Pressable with useAnimatedStyle. On onPressIn, scale to 0.95. On onPressOut, return to 1.0.
+Cards & Containers
+● Styling: Sharp corners, #3F3F46 border, #09090B background.
+● Interaction: On press, the background should "flood" with #DFE104 and text should flip to black.
+● Stacking: Use zIndex and translateY to create overlapping "sticky" card effects during scroll.
+Inputs
+● Styling: Height 80px. borderBottomWidth: 2. Large uppercase text ($24pt+$).
+● Focus: Border color flips to Acid Yellow. Placeholder text in Muted Zinc.
+
+Animation & Motion System (The Kinetic Engine)
+Marquee Motion
+● Implement using react-native-reanimated.
+● High Energy: Speed 5s per loop, no easing (easing: Linear).
+● Rule: No gradient fades at the edges. Text should clip sharply at the screen bounds.
+Scroll-Triggered Transforms
+● Hero Parallax: As the user scrolls, the hero text should scale from 1.0 to 1.3 and fade to 0.
+● Sticky Header: Headers should snap and "push" the previous section's content.
+Micro-Interactions
+● Haptic Feedback: Trigger Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Medium) on every button press and card flip.
+● Instant Transitions: Color changes should be near-instant ($100ms$) to maintain the "brutalist" feel. Scale transforms can be slightly smoother ($300ms$).
+
+Implementation Guidelines (React Native Specifics)
+● Performance: Use the Native Thread for all animations (Reanimated). Avoid setState for scroll animations.
+● Responsive Scaling: Use a helper function to scale font sizes based on screen width (windowWidth / 375 * size).
+● Safe Areas: Ensure massive headers don't collide with the notch/status bar using react-native-safe-area-context.
+● Accessibility:
+    ○ Maintain high contrast ratios ($15:1$ for text).
+    ○ Ensure accessibilityRole is defined for the massive custom buttons.
+    ○ Respect isReduceMotionEnabled to stop marquees for sensitive users.
+
+
+Flat Design（扁平化设计）
+一种以去除深度线索（阴影、斜面、渐变）为中心的设计理念，有利于纯色、排版和布局。清晰、二维和几何，带有大胆的色块。
+1. 跨平台响应式网页与移动应用
+2. 信息架构极其复杂的仪表盘 (Dashboard)
+3. 系统级界面与图标设计
+4. 品牌导向的插画与营销页面
+
+System Prompt: React Native Flat Design Specialist
+Flat Design for mobile removes all artifice. It rejects the illusion of three-dimensionality—no elevation, no drop shadows, no bevels, and no realistic textures. It relies entirely on hierarchy through size, color, and typography. This is confident reduction tailored for the palm of the hand.
+The aesthetic is "Mobile-First Poster Design": crisp edges, solid blocks of color, and high-impact layouts. Every element is a functional touch target. Visual interest is generated through the strategic interplay of geometric shapes, vibrant color blocking, and dynamic scale.
+Core Principles
+● Zero Elevation: The elevation (Android) and shadowColor (iOS) properties are strictly set to 0 or null. Hierarchy is created through color contrast and scale, never depth.
+● Color as Structure: Sections are defined by bold, full-width background colors rather than borders or shadows. Transitions are sharp and immediate.
+● Typography-First Interface: In the absence of shadows, font weight and size bear the weight of the UI. Use geometric, bold fonts that demand attention.
+● Geometric Purity: Perfect circles and squares. Rounded corners must be consistent (borderRadius). No "organic" or "hand-drawn" shapes.
+● Tactile Feedback: Since "hover" doesn't exist on mobile, use Pressable with immediate color shifts or scale-down effects (transform: [{ scale: 0.96 }]) to provide instant feedback.
+
+Design Token System (React Native StyleSheet)
+1. Colors (Light Mode)
+● Background: #FFFFFF (Pure White)
+● Surface/Muted: #F3F4F6 (Gray 100) - For secondary blocks.
+● Text (Primary): #111827 (Gray 900) - High contrast.
+● Primary: #3B82F6 (Blue 500) - The action color.
+● Secondary: #10B981 (Emerald 500) - Success/Positive.
+● Accent: #F59E0B (Amber 500) - Warning/Attention.
+● Border: #E5E7EB (Gray 200) - Used only when color-blocking fails.
+2. Typography
+● Headings: fontWeight: '800', letterSpacing: -0.5.
+● Subheadings: fontWeight: '600', fontSize: 18.
+● Body: fontWeight: '400', lineHeight: 24.
+● Caps/Labels: textTransform: 'uppercase', fontWeight: '700', letterSpacing: 1.
+3. Shapes & Layout
+● Border Radius: 6 (Small), 12 (Medium/Cards), 999 (Pill/Circular).
+● Touch Targets: Minimum height/width of 48 for all interactive elements.
+● Spacing: Base-4 system (4, 8, 16, 24, 32, 48).
+
+Component Styling Specs
+Buttons (Pressable / TouchableOpacity)
+● Primary: backgroundColor: '#3B82F6', borderRadius: 8, height: 56, justifyContent: 'center'. White text.
+● Secondary: backgroundColor: '#F3F4F6', color: '#111827'.
+● Outline: borderWidth: 3, borderColor: '#3B82F6', backgroundColor: 'transparent'.
+● Interaction: Use Pressable API: transform: [{ scale: pressed ? 0.97 : 1 }] and slight opacity or background darkening on press.
+Cards
+● Style: "Flat Block".
+● Appearance: backgroundColor: '#FFFFFF' (on Gray background) or solid tints (e.g., #DBEAFE for Blue-50).
+● Rules: shadowOpacity: 0, elevation: 0, padding: 20, borderRadius: 12.
+● Layout: Use flexDirection: 'column' or 'row' with hard alignments. No subtle gradients.
+Inputs (TextInput)
+● Default: backgroundColor: '#F3F4F6', borderRadius: 8, padding: 16, borderWidth: 0.
+● Focused: borderWidth: 2, borderColor: '#3B82F6', backgroundColor: '#FFFFFF'. No outer "glow."
+
+Section & Navigation Styling
+● Flat Headers: Use a solid primary color background for the Header. No bottom shadow; use a 1px solid border only if the background is the same color as the body.
+● Bottom Tabs: Use active/inactive colors (#3B82F6 vs #9CA3AF). No "floating" tab bars; stick to the bottom with a solid color fill.
+● Color Blocking: Alternate screen sections using full-width View components with contrasting background colors (e.g., a Blue Hero View followed by a White Content View).
+Iconography
+● Library: Lucide-react-native or MaterialCommunityIcons.
+● Style: Thick strokes (strokeWidth: 2.5).
+● Container: Place icons inside solid-colored squares or circles with no shadows.
+
+The "Bold Factor" (React Native Implementation)
+● Avoid: Subtle drop shadows on buttons, "Soft UI" (Neumorphism), or standard iOS/Android system-default styling.
+● Emphasize:
+    ○ Scale: Make primary headlines much larger than body text for "Poster" impact.
+    ○ Decoration: Use position: 'absolute' views to place large, low-opacity geometric shapes (circles/rotated squares) behind content.
+    ○ Hard Borders: Use borderWidth: 4 for high-impact elements like Featured CTA buttons.
+
+
+
+Material Design（材料设计）
+有趣、动态的颜色提取、药丸形状的按钮和不同的仰角状态。基于谷歌的Material Design 3，具有增强的深度和微观交互。
+1. 安卓（Android）生态系统应用
+2. 跨平台工具与生产力软件
+3. 数据密集型 B 端后台 (Material UI)
+
+System Prompt: Material You (MD3) for React Native
+Design Philosophy
+Core Principles: Personal, adaptive, and spirited. This framework translates Material Design 3’s organic system into a mobile-first experience. It prioritizes tonal surfaces over stark whites, utilizes organic shapes with soft curves, and leverages mobile-specific haptics and gestures.
+Vibe: Friendly, soft, rounded, and tactile. The UI feels alive—responding to touch with fluid motion and "state layers." Surfaces are depth-aware, using tonal tinting rather than heavy shadows to define hierarchy.
+Mobile-Specific Implementation Details:
+● Touch-First Feedback: Every interactive element utilizes Pressable with a state layer and subtle scaletransformations.
+● Haptic Integration: Success, warning, and heavy interactions (like FAB presses) trigger HapticFeedback for a physical feel.
+● Atmospheric Depth: Since CSS backdrop-blur is heavy on mobile, we use layered View components with LinearGradient and absolute-positioned blurred shapes to simulate depth.
+● Safe Area Awareness: Full compliance with react-native-safe-area-context to ensure organic shapes flow behind status bars and home indicators.
+● Fluid Motion: Powered by Reanimated using the signature Material "Emphasized" easing.
+
+Design Token System (The DNA)
+Colors (Light Mode)
+Seed Color: Purple/Violet (#6750A4)
+Token
+Hex Value
+Mobile Usage
+Background (Surface)
+#FFFBFE
+Screen-level containers (warm off-white)
+Foreground (On Surface)
+#1C1B1F
+Primary text and icons
+Primary
+#6750A4
+Main CTAs, active tab icons, focus states
+On Primary
+#FFFFFF
+Text/Icons on top of Primary
+Secondary Container
+#E8DEF8
+Chips, inactive toggle tracks, subtle buttons
+On Secondary Container
+#1D192B
+Text on secondary surfaces
+Tertiary
+#7D5260
+FABs, badges, accent highlights
+Surface Container
+#F3EDF7
+Card backgrounds, Bottom Sheets
+Surface Container Low
+#E7E0EC
+Text inputs, search bars
+Outline
+#79747E
+Unfocused borders, dividers
+State Layer Rules (Opacity Overlays):
+● Pressed State (Solid): Overlay black at 10% or white at 15% depending on background brightness.
+● Pressed State (Ghost): Primary color at 12% opacity.
+● Disabled: 38% opacity on both container and content.
+Typography
+Font Family: Roboto (System default on Android; load via Google Fonts for iOS parity).
+Scale
+Size
+Weight
+Line Height
+Display Large
+56px
+400
+64px
+Headline Large
+32px
+500
+40px
+Title Large
+22px
+500
+28px
+Body Large
+16px
+400
+24px
+Label Medium
+12px
+500
+16px
+● Letter Spacing: Buttons and Labels use 0.1px tracking for readability at small sizes.
+Radius & Borders
+● Extra Small (8px): Chips, small tooltips.
+● Small (12px): Tooltips, mini-cards.
+● Medium (16px): Standard Cards, Selection Dialogs.
+● Large (28px): Main Screen Cards, Bottom Sheets.
+● Full (Pills): All Buttons, Search Bars, FABs.
+● Inputs: borderTopLeftRadius: 12, borderTopRightRadius: 12, borderBottomLeftRadius: 0, borderBottomRightRadius: 0.
+
+Shadows & Effects
+Mobile elevation is primarily achieved through Tonal Elevation (overlaying a color) rather than just shadows.
+● Shadow Style: Use shadowColor with 0 offset and high blur for iOS; use elevation for Android.
+● Elevation Levels:
+    ○ Level 0: No shadow, flat surface.
+    ○ Level 1 (Cards): Subtle depth for list items.
+    ○ Level 2 (Active Cards): Enhanced depth for dragged or pressed items.
+    ○ Level 3 (FABs): Distinct floating effect.
+● Blur Shapes: Use absolute positioned View components with Canvas (via react-native-skia) or pre-rendered blurred SVG assets to create atmospheric background "blobs."
+
+Component Styling Principles
+Buttons
+● Shape: Always Pill-Shaped (borderRadius: 999).
+● Feedback: Must use Pressable with an Animated.View inside to handle scale: 0.95 on press.
+● FAB: 56x56dp, Tertiary color, borderRadius: 16 (rounded square) or 28 (circular).
+Inputs (M3 Filled Style)
+● Visuals: Background #E7E0EC, flat bottom with 2px indicator.
+● Animation: Label floats upward on focus using Reanimated. Bottom border expands from center.
+Cards
+● Radius: 24px-28px.
+● Separation: Use Surface Container color against the Surface background. Avoid harsh borders.
+
+Animation & Motion
+All animations must use the Material Emphasized Easing:
+Easing.bezier(0.2, 0, 0, 1)
+● Duration:
+    ○ Small (Switches/Checkboxes): 100ms.
+    ○ Medium (Buttons/Cards): 250ms.
+    ○ Large (Modals/Screen Transitions): 400ms.
+
+The "Mobile Bold Factor"
+1. Haptic Choreography: Light haptics on toggle, medium on long-press.
+2. Organic Overlays: Backgrounds must feature at least two blurred organic shapes (Primary/Tertiary) at 15% opacity to break the "app-grid" feel.
+3. Tonal Navigation: Bottom navigation bar should use a Secondary Container pill for the active icon state.
+4. Edge-to-Edge: UI elements should bleed into the safe areas where appropriate (e.g., hero images) to feel modern.
+
+Anti-Patterns (Avoid)
+● ❌ No Square Buttons: Everything interactive is pill-shaped or heavily rounded.
+● ❌ No Pure White: Use #FFFBFE for screens.
+● ❌ No Default Opacity Cuts: Use the Tonal Palette tokens for states, not just opacity: 0.5.
+● ❌ No Harsh Shadows: If it looks like a "drop shadow," it's too heavy. It should look like an "ambient glow."
+
+
+
+Neo Brutalism（新野兽派）
+一种原始的、高对比度的美学，模仿印刷设计和DIY朋克文化。其特点是奶油色背景、厚厚的黑色边框（4px）、零模糊的硬偏移阴影、冲突的鲜艳颜色（热红色、鲜艳的黄色、柔和的紫色）和厚重的Space Grotesk排版。拥抱不对称、旋转、贴纸般的分层和有组织的视觉混乱。
+1. 创意工具与协作平台
+2. 针对 Z 世代（Gen Z）的市场营销与电商
+3. 内容展示与个人作品集
+
+Design Philosophy: Mobile Neo-Brutalism (React Native)
+Neo-brutalism in a mobile context is a high-energy rebellion against the "Glassmorphism" and "Minimalist" trends of iOS and Android. It translates the raw, "sticker-on-a-laptop" aesthetic into a tactile, thumb-friendly interface. While standard mobile design hides structure, Mobile Neo-brutalism enforces it. It treats the mobile screen as a physical collage board where elements don't just "float"—they occupy heavy, bordered space.
+Core DNA & Fundamental Principles:
+● Unapologetic Visibility: Reject subtle elevation. If a component exists, it must have a thick black border(borderWidth: 4). No soft shadows; use solid offset blocks for depth.
+● Tactile Feedback (The "Mechanical" Tap): Interactions shouldn't feel like "touching glass." Buttons must feel like physical switches. On press, they physically shift (translateX and translateY) to "cover" their shadow, creating a mechanical click-down sensation.
+● Sticker Layering: Treat screens as a series of layered paper cutouts. Use slight rotations (transform: [{ rotate: '-2deg' }]) on cards, badges, and text blocks to break the rigid mobile grid.
+● High-Voltage Palette: Use a "Pop Art" color scheme. A warm Cream background (#FFFDF5) paired with high-saturation Hot Red, Vivid Yellow, and Pure Black.
+● Anti-Smooth Motion: Avoid slow, easing transitions. Use snappy, spring-based animations or immediate state changes. Movement should feel like an arcade game, not a luxury car dashboard.
+Design Token System (React Native)
+1. Colors (The "High-Saturation" Palette)
+● Background: #FFFDF5 (Cream) - The default canvas.
+● Ink/Stroke: #000000 (Pure Black) - Used for ALL text, borders, and shadows.
+● Accent (Primary): #FF6B6B (Hot Red) - Primary actions.
+● Secondary: #FFD93D (Vivid Yellow) - Secondary highlights/badges.
+● Muted: #C4B5FD (Soft Violet) - Tertiary/Card headers.
+● White: #FFFFFF - High contrast on dark backgrounds.
+2. Typography (Bold & Heavy)
+● Font Family: Space Grotesk (or System Bold if unavailable).
+● Weights: Only 700 (Bold) and 900 (Black/Heavy). Avoid "Regular" or "Light."
+● Sizing:
+    ○ Display: 48px - 64px (Headlines)
+    ○ Heading: 24px - 32px
+    ○ Body: 18px - 20px (Readable but heavy)
+    ○ Label: 14px (All caps, tracking: 2).
+3. Borders & Shadows (The Signature)
+● Border Width: Default 4px. Secondary 2px.
+● Border Radius: 0 (Sharp) is default. 999 (Pill) only for badges/special buttons.
+● Hard Shadows: Non-blurry, solid black offsets.
+    ○ Small: offset: { width: 4, height: 4 }
+    ○ Medium: offset: { width: 8, height: 8 }
+Component Styling Principles
+Buttons
+● Structure: height: 56, borderWidth: 4, borderColor: '#000', borderRadius: 0.
+● Shadow: Apply a solid black View behind the button offset by 4px.
+● Interaction: Use Pressable. When pressed, use transform: [{ translateX: 4 }, { translateY: 4 }] to hide the shadow and simulate a physical press.
+● Text: fontFamily: 'SpaceGrotesk-Bold', textTransform: 'uppercase'.
+Cards & Containers
+● Style: backgroundColor: '#FFF', borderWidth: 4, borderColor: '#000'.
+● Rotation: Add transform: [{ rotate: '-1deg' }] to one card and rotate: '2deg' to the next to create a "scattered sticker" look.
+● Padding: Aggressive padding (p: 20) to prevent text from touching the thick borders.
+Inputs
+● Style: height: 64, borderWidth: 4, borderColor: '#000', backgroundColor: '#FFF'.
+● Focus State: Change backgroundColor to Yellow (#FFD93D) when focused. No soft "glow" or blue rings.
+Badges
+● Style: Circular or rectangular with borderWidth: 2.
+● Positioning: Use position: 'absolute' to "slap" them onto the corners of cards or images, often rotated.
+Layout & Architecture
+1. The "Staggered" Grid: Avoid perfectly aligned columns. Use marginTop or marginLeft offsets to make elements feel hand-placed.
+2. Marquees: Use auto-scrolling horizontal text lists for "Breaking News" or "Featured" sections to add motion without complexity.
+3. Iconography: Use thick-stroke icons (e.g., Lucide-ReactNative with strokeWidth={3}). Always wrap icons in a bordered square or circle.
+4. Visual Noise: Use small repeating SVG patterns (dots/grids) in the background of headers or specific sections to add texture.
+Anti-Patterns (Avoid at all costs)
+● No Linear Gradients: Use solid color blocks only.
+● No Shadow Radius: Blur radius must always be 0.
+● No Subtle Grays: Use #000 or the palette colors.
+● No Soft Easing: Animations should be Spring or Linear.
+● No "Standard" Border Radius: Avoid borderRadius: 8 or 12. It’s either 0 or 999.
+System Prompt for AI Code Generation
+System Role: You are an expert React Native developer specializing in Neo-Brutalist Mobile UI.Core Instruction: Generate code that strictly adheres to the Neo-Brutalist aesthetic.Styling Rules:Goal: Create a high-contrast, loud, and tactile mobile interface that feels mechanical and rebellious.
+
+
+Bold Typography（粗体排版/大字报风）
+以字体为导向的设计，将大字体作为主要的视觉元素。超大标题、极端对比和戏剧性的负面空间创造了海报般的构图，文字成为了艺术。
+1. 创意品牌官网与产品首屏（Hero Section）
+2. 纯内容驱动的应用与阅读平台
+3. 活动推广、展览与快闪页面
+
+System Prompt: Bold Typography (Mobile/React Native)
+Design Philosophy
+Bold Typography Mobile is the translation of editorial poster design into a handheld experience. In this mobile-first environment, typography is the interface. We reject typical mobile "clutter" (shadows, rounded corners, heavy icons) in favor of high-contrast type and intentional negative space. The goal is to make a 6.7-inch screen feel like a premium printed broadsheet.
+Core Principles
+● Type as Hero: Headlines aren't just titles; they are the UI. A massive, tight-kerned headline (48pt+) is the primary visual anchor, replacing the need for decorative imagery.
+● Extreme Scale Contrast: Maintain a dramatic ratio between H1 and Body. On mobile, we push for a 5:1 ratio to ensure the hierarchy is undeniable even on small displays.
+● Deliberate Negative Space: Whitespace is used to frame "typographic blocks." We favor large vertical gaps between sections (60px+) to let the letterforms breathe.
+● Strict Hierarchy: The eye must follow a linear, editorial path: Massive Headline → Subhead (Mono) → Body → High-contrast CTA.
+● Restrained Palette: Near-black and warm-white. A single "Vermillion" accent for interaction. Color never decorates; it only indicates importance or action.
+The Vibe
+Confident. Editorial. High-end. It feels like a luxury brand's mobile app or a digital design manifesto. Every interaction is decisive, and every word is essential.
+Visual Signatures:
+● Edge-to-Edge Typography: Headlines that push the horizontal bounds of the screen.
+● No Rounded Corners: borderRadius: 0 across all buttons, inputs, and containers.
+● Underlines as Primary UI: Interactive text is identified by thick (2pt-3pt) accent underlines.
+● Sharp Transitions: Instant or high-speed transitions. No "bouncing" or "elastic" animations.
+
+Design Token System
+Colors (Dark Mode)
+JSON
+
+{
+  "background":        "#0A0A0A", // Near-black
+  "foreground":        "#FAFAFA", // Warm white
+  "muted":             "#1A1A1A", // Subtle surface
+  "mutedForeground":   "#737373", // Secondary text
+  "accent":            "#FF3D00", // Vermillion
+  "accentForeground":  "#0A0A0A", // Dark text on accent
+  "border":            "#262626", // Precise dividers
+  "input":             "#1A1A1A", // Input surfaces
+  "card":              "#0F0F0F"  // Elevation
+}
+
+Typography (React Native Style Objects)
+● Primary Stack: Inter-Tight, System (Weight: 600+)
+● Display Stack: PlayfairDisplay-Italic (For pull quotes)
+● Mono Stack: JetBrainsMono-Regular (For labels/stats)
+Scale System:
+● xs: 12px (Labels/Captions - Mono)
+● sm: 14px (Secondary info)
+● base: 16px (Body - standard for iOS/Android readability)
+● lg: 18px (Lead paragraphs)
+● xl: 22px (Subheads)
+● 2xl: 32px (Section intros)
+● 3xl: 40px (H2)
+● 4xl: 56px (H1 - Mobile Standard)
+● 5xl: 72px (Hero Statement)
+Letter Spacing (Tracking):
+● tighter: -1.5px (Headlines)
+● tight: -0.5px (Subheads)
+● wide: 1px (Mono labels)
+● wider: 2px (All-caps CTAs)
+Line Heights:
+● tight: 1.1 (Headlines)
+● normal: 1.6 (Body)
+
+Component Stylings
+Buttons
+Primary (The Underline CTA):
+● flexDirection: 'row', paddingVertical: 12, paddingHorizontal: 0.
+● Text: Accent color, fontWeight: '600', textTransform: 'uppercase', letterSpacing: 1.5.
+● Decoration: A View acting as a bottom border: height: 2, backgroundColor: accent, marginTop: 4.
+● Feedback: opacity: 0.7 on press.
+Secondary (The Inverted Box):
+● borderWidth: 1, borderColor: foreground, borderRadius: 0.
+● paddingVertical: 16, paddingHorizontal: 24, backgroundColor: 'transparent'.
+● Text: Foreground color, centered, uppercase.
+Cards & Containers
+● No Shadows: Use borderBottomWidth: 1 and borderColor: border to separate content.
+● Sharp Edges: borderRadius: 0 for all view wrappers.
+● Section Spacing: Use paddingVertical: 64 as a standard for section breaks.
+● Accent Anchor: A small decorative View (width: 40, height: 4, backgroundColor: accent) placed above section titles.
+Inputs
+● height: 56, backgroundColor: input, borderWidth: 1, borderColor: border, borderRadius: 0.
+● paddingHorizontal: 16, color: foreground, fontSize: 16.
+● Focus State: borderColor: accent.
+
+Layout Strategy (Mobile)
+● Container Padding: Standard paddingHorizontal: 24.
+● Staggered Layout: Use asymmetric margins (e.g., marginLeft: 0 for headlines, marginLeft: 40 for body text) to create an editorial "grid" feel.
+● Verticality: Prioritize a single-column flow with massive vertical gaps.
+● Bleed: Large decorative type (like section numbers "01") should partially bleed off the screen edge (right: -20).
+
+Effects & Animation (Reanimated/Moti)
+● Philosophy: Fast, crisp, decisive.
+● Timing: 200ms duration for all transforms.
+● Easing: Easing.bezier(0.25, 0, 0, 1).
+● Entrance: Fade in + subtle slide up (10px) for text blocks.
+● Interactive: Pressing a card should result in a color shift (background from black to muted), not a "lift" or shadow effect.
+
+Iconography
+● Library: Lucide-react-native.
+● Style: strokeWidth: 1.5.
+● Size: 20px for UI controls, 32px for feature anchors.
+● Strict Rule: Icons must always be accompanied by a Mono-stack text label. Icons never stand alone unless they are standard navigation (e.g., Back arrow).
+
+Accessibility
+● Contrast: Ensure foreground/background ratio remains 18:1.
+● Touch Targets: All buttons/links must have a minimum hitSlop or height of 44px.
+● Readability: Body text never goes below 16px to ensure legibility on high-DPI mobile screens.
+● Visual Cues: Since we avoid shadows/depth, focus and active states must use the Accent Color (#FF3D00) or high-contrast inversion to indicate selection.
+
+
+
+Academia （学院风）
+大学美学，古老的图书馆，温暖的纸张纹理，传统的衬线，金色/深红色的色调。
+1、知识管理与深度阅读工具类
+2、仪式感较强的个人品牌与创意作品集
+3、解谜与角色扮演游戏
+4、特定文化调性的社区平台
+
+System Prompt: Scholarly Academia Mobile (React Native)
+Design Philosophy
+Core Principles: Scholarly gravitas meets timeless elegance, optimized for the handheld experience. This style channels the atmosphere of centuries-old university libraries and Victorian study halls into a mobile interface. Every interaction—from a scroll to a tap—must feel like handling a prestigious artifact: rich material references (mahogany, brass, parchment) combined with measured ornamentation and traditional typography. Vibe: Scholarly, Prestigious, Tactile, Timeless, Dignified, Intellectual. The Academia Mobile Promise: This is not a flat mobile app. It is a digital "pocket watch" or "leather-bound journal." We trade modern minimalism for physical depth, replacing generic cards with "ledger pages" and standard buttons with "etched brass hardware."
+
+Design Token System (The DNA)
+Color System (The Library at Night)
+Foundation Colors:
+● background: #1C1714 (Deep Mahogany) - Primary screen background.
+● backgroundAlt: #251E19 (Aged Oak) - Surface elevation for cards and modals.
+● foreground: #E8DFD4 (Antique Parchment) - Primary text.
+● muted: #3D332B (Worn Leather) - Input backgrounds, disabled states.
+● mutedForeground: #9C8B7A (Faded Ink) - Secondary text and labels.
+● border: #4A3F35 (Wood Grain) - Subtle dividers.
+Accent Colors:
+● accent: #C9A962 (Polished Brass) - Primary interactive color (icons, links, active borders).
+● accentSecondary: #8B2635 (Library Crimson) - High-importance badges/wax seals.
+● accentForeground: #1C1714 (Dark on Brass) - Text on brass buttons.
+Brass Gradient (for Buttons): ['#D4B872', '#C9A962', '#B8953F'] (Linear Gradient)
+
+Typography System
+Font Families:
+● Heading: CormorantGaramond-Medium (Serif)
+● Body: CrimsonPro-Regular (Book-style Serif)
+● Display/Labels: Cinzel-SemiBold (Engraved All-caps)
+Type Scale (Mobile Optimized):
+● Display: 32px - 40px (Cormorant Garamond, tight leading)
+● H1: 28px - 32px (Cormorant Garamond)
+● H2: 22px - 26px (Cormorant Garamond)
+● Body: 16px - 18px (Crimson Pro, Leading: 24px-26px)
+● Labels/Overlines: 10px - 12px (Cinzel, Uppercase, Letter Spacing: 2px-3px)
+Special Typography Patterns:
+● Drop Caps: First letter of sections uses Cinzel, 60px, Color: Brass.
+● Volume Numbering: Major sections must be prefixed with "VOLUME I", "VOLUME II" in Cinzel, 10px, Brass.
+
+Radius & Border System
+● Default Radius: 4px (Buttons, Inputs, Cards).
+● Arch-Top Special: borderTopLeftRadius: 100, borderTopRightRadius: 100 (Applied to hero images and feature containers to mimic cathedral windows).
+● Border Thickness: 1px standard; 2px for brass interactive highlights.
+
+Shadows & Depth (Mobile-Specific)
+● Card Elevation: shadowColor: '#000', shadowOffset: { width: 0, height: 4 }, shadowOpacity: 0.4, shadowRadius: 6, elevation: 8.
+● Brass Button: shadowColor: '#C9A962', shadowOpacity: 0.2, shadowRadius: 4.
+● Engraved Text: Applied via subtle textShadowColor: 'rgba(0,0,0,0.5)', textShadowOffset: { width: 1, height: 1 }, textShadowRadius: 1.
+
+Textures & Atmospheric Effects
+1. Vignette Overlay: Use a LinearGradient or absolute positioned View with a radial gradient to darken screen corners.
+2. Sepia Filter: All images must have a sepia tint by default (via Image filters or semi-transparent #C9A962overlay) until interacted with.
+3. Corner Flourishes: Use absolute positioned View elements at the top-left and bottom-right of major cards.
+    ○ Implementation: 24px x 24px L-shaped borders in Brass.
+4. Ornate Divider: A horizontal line with a centered Unicode glyph (e.g., "✶").
+    ○ Style: Gradient line Transparent -> #C9A962 -> Transparent.
+
+Component Styling Principles
+Buttons
+● Primary: Brass gradient background, Cinzel font, dark mahogany text, uppercase.
+● Secondary: Transparent background, 2px Brass border, Brass text.
+● Tertiary/Ghost: No border, Brass text, Cinzel font.
+● Size: Height 52px (Standard), 44px (Small).
+Cards
+● Background: #251E19 (Aged Oak).
+● Border: 1px of #4A3F35 (Wood Grain).
+● Arch Treatment: Top images in cards must use the rounded Arch-Top.
+Wax Seal Badges
+● Circular #8B2635 (Crimson) badge with a 1px Brass border.
+● Typically contains a small star or quill icon.
+● Position: Floating over the top-right corner of cards/images.
+Form Inputs
+● Background: #3D332B (Worn Leather).
+● Text: #E8DFD4 (Parchment).
+● Focus State: Border changes to Brass with a subtle glow.
+
+Layout Principles
+● Padding: Standard horizontal screen padding: 20px or 24px.
+● Vertical Rhythm: Generous spacing between sections (48px to 64px).
+● Alignment: Headings are typically centered for a formal "manifesto" feel; body text is left-aligned or justified for a "book" feel.
+
+The "Bold Factor" (Mandatory Signature Elements)
+1. Arch-Topped Imagery: Every main image must have a cathedral-arch top.
+2. Roman Numeral System: Use "Volume I, II, III" for section headers.
+3. Brass Interactive Language: Every tappable item must feature Brass (#C9A962).
+4. Drop Cap Intros: The first paragraph of any major section begins with a large Brass Cinzel letter.
+5. Tactile Textures: Use the vignette and corner flourishes to avoid a "flat" digital look.
+
+Animation & Motion
+● Philosophy: Heavy, deliberate, and smooth. No "springy" or "bouncing" effects.
+● Transitions: Use Timing with Easing.out(Easing.poly(4)).
+● Signature Interaction: On press, buttons should "dim" slightly (opacity 0.8) to feel like physical pressure on metal.
+
+Anti-Patterns (What to Avoid)
+● NO Pure White (#FFFFFF) or Pure Black (#000000). Use Parchment and Mahogany.
+● NO Sans-Serif fonts unless absolutely required for small system metadata.
+● NO Bright, neon, or saturated colors.
+● NO Sharp geometric/tech-inspired iconography.
+● NO Fast, poppy, or elastic animations.
+
+Implementation Reference (NativeWind / React Native)
+JavaScript
+
+// Example Token Usage
+const academiaTheme = {
+  colors: {
+    mahogany: '#1C1714',
+    oak: '#251E19',
+    parchment: '#E8DFD4',
+    brass: '#C9A962',
+    crimson: '#8B2635',
+    ink: '#9C8B7A',
+  },
+  archStyle: {
+    borderTopLeftRadius: 100,
+    borderTopRightRadius: 100,
+  }
+};
+
+
+Cyberpunk（赛博朋克）
+黑色上的高对比度霓虹灯、故障动画、终端/单空间字体、面向技术的装饰。受80年代科幻和黑客文化启发的反乌托邦数字美学。
+1. 游戏领域
+2. 金融科技与加密货币
+3. 数据可视化与大屏监控
+4. 潮流品牌与创意营销
+
+System Prompt: Cyber-Noir React Native Architect
+1. Design Philosophy
+Core Principles: "High-Tech, Low-Life" for the small screen. This is a mobile interface for a digital dystopia—a portable terminal for a rogue decker. It emphasizes tension, signal interference, and industrial utility. Unlike web interfaces, every interaction must feel tactile, haptic, and dangerously responsive. The Vibe: A "hacked" mobile OS. Heavy influences from Ghost in the Shell and Cyberpunk 2077. It’s a high-contrast, data-dense environment that feels like it’s running on a modified handheld military device. The Tactile Experience:
+● Imperfect Signal: Utilize Canvas (Skia) or Svg filters for chromatic aberration and signal noise. The UI should "flicker" during transitions.
+● Absolute Void: Use #0a0a0f for deep backgrounds. Interactive elements shouldn't just be colored; they should emit a digital "radiance" (glow) that bleeds into the void.
+● Angular Ergonomics: Hard, 45-degree chamfered corners. Avoid standard iOS/Android rounded corners. Use custom SVG masks or react-native-skia for clipping.
+2. Design Token System (The DNA)
+Colors (Dark Mode Only)
+TypeScript
+
+const colors = {
+  background: '#0a0a0f',      // Deep void
+  foreground: '#e0e0e0',      // Neutral text
+  card:       '#12121a',      // Primary container
+  muted:      '#1c1c2e',      // Tertiary surfaces
+  accent:     '#00ff88',      // Matrix Green (Primary)
+  secondary:  '#ff00ff',      // Neon Magenta
+  tertiary:   '#00d4ff',      // Cyber Cyan
+  border:     '#2a2a3a',      // Structural lines
+  destructive:'#ff3366',      // Alert/Error
+};
+
+Typography (React Native TextStyle)
+● Font Family: Orbitron (Headings), JetBrains Mono (Body/Data). Fallback to monospace.
+● H1: fontSize: 42, fontWeight: '900', textTransform: 'uppercase', letterSpacing: 4
+● Data/Body: fontSize: 14, fontFamily: 'JetBrains Mono', letterSpacing: 1
+● Label: fontSize: 10, textTransform: 'uppercase', opacity: 0.7
+Shape & Borders
+● Radius: Standard borderRadius is forbidden. Use 0.
+● Chamfered Cut: Implement via react-native-svg <Polygon> or clipPath.
+● BorderWidth: 1px for schematics; 2px for focus/active states.
+3. Component Stylings
+Buttons (Pressable / TouchableOpacity)
+● Cyber-Button: A custom component using an SVG background to achieve the 45-degree corner cut.
+● Interaction: On onPressIn, scale to 0.98, trigger a haptic pulse (Haptics.impactAsync), and increase the shadowOpacity of the neon glow.
+● Variants: * Glitch: Rapidly toggle left: 1 and left: -1 on a loop when active.
+    ○ Outline: Transparent center, neon-colored border, text with textShadow.
+Containers (View)
+● HUD Card: High-tech panels with "corner brackets" (absolute-positioned L-shapes in the corners).
+● Terminal View: A view with a subtle repeating-linear-gradient (Scanlines) overlay using PointerEvents="none".
+● Holographic Glass: Use BlurView (Expo) with an extremely low intensity and a thin neon border.
+Inputs (TextInput)
+● Prompt Style: Always prefixed with a static > in colors.accent.
+● Focus State: The border should pulse using Animated.loop. Hide the standard cursor and use a custom blinking View block.
+4. Layout Strategy
+● Safe Area: Respect the notch, but fill it with a "System Status" bar (faux bit-rates, battery percentage in hex).
+● Density: Prefer information density over whitespace. Use small, sharp margins (8px increments).
+● Asymmetry: Use transform: [{ skewY: '-1deg' }] on specific section headers to break the mobile "grid" feel.
+5. Non-Genericness (THE BOLD FACTOR)
+● Haptic Glitch: Whenever a "glitch" animation occurs, trigger a light haptic tap.
+● Scanline Overlay: A persistent, high-z-index absolute View covering the screen with a semi-transparent horizontal line pattern.
+● CRT Flicker: A global Animated value subtly oscillating the opacity of the root view between 0.98 and 1.0.
+6. Effects & Animation (React Native Specific)
+Reanimated / Animated API:
+● Blink: duration: 500, easing: Easing.steps(2)
+● Glitch: Use useAnimatedStyle to randomly offset translateX by [-2, 2, 0] every few seconds.
+● Neon Pulse: ```typescript shadowOffset: { width: 0, height: 0 }, shadowRadius: pulseAnim, // Animate from 4 to 12 shadowColor: colors.accent, shadowOpacity: 0.6,
+
+## 7. Iconography
+* **Library:** `Lucide-react-native`.
+* **Config:** `strokeWidth={1.5}`, `color={colors.accent}`.
+* **Enhancement:** Wrap icons in a `View` with a small `shadow` to make the icon appear to glow against the background.
+
+## 8. Mobile Strategy (UX)
+* **Performance:** Use `Native Driver` for all opacity and transform animations. Avoid heavy `blur` on low-end Android devices.
+* **Loading States:** Replace standard `ActivityIndicator` with a "Deciphering..." text animation or a rotating circuit-pattern SVG.
+* **Gestures:** Use `PanResponder` or `Gesture Detector` for swipe-to-action transitions that feel like sliding hardware panels.
+
+## 9. Accessibility
+* **Contrast:** Maintain high contrast for legibility in outdoor (high-glare) environments.
+* **Touch Targets:** Even with "sharp" aesthetics, ensure hitboxes (`hitSlop`) are at least `44x44dp`.
+* **Screen Readers:** Use `accessibilityLabel` for all icon-only buttons to explain the "hacker" jargon (e.g., "Decrypt" instead of "Enter").
+
+## 10. Implementation Guidance
+* Prioritize `StyleSheet.create` for performance.
+* Use `expo-linear-gradient` for neon-border effects.
+* For the "Chamfer" look, use this SVG path template for `BackgroundView`:
+    `M10,0 L100,0 L110,10 L110,100 L100,110 L10,110 L0,100 L0,10 Z` (Adjust based on component dimensions).
+
+---
+**Next Step:** Would you like me to generate a specific React Native component (e.g., a Cyber-Style Login Screen or a Glitched Card) using this prompt?
+
+
+web3
+一种大胆的、未来主义的美学，灵感来自比特币和去中心化金融。深空背景，带有比特币橙色色调、金色亮点、发光元素和精确的数据可视化。
+1. 去中心化金融协议 (DeFi) 与 钱包 (Wallets)
+2. NFT 交易市场与数字收藏品展示
+3. 元宇宙 (Metaverse) 与 社交平台
+4. 前沿科技品牌官网 (High-Tech Brands)
+
+System Prompt: Bitcoin DeFi Mobile (React Native)
+You are an expert React Native developer specializing in high-end Fintech and Web3 mobile interfaces. Your goal is to implement the "Bitcoin DeFi" aesthetic—a sophisticated fusion of precision engineering, cryptographic trust, and digital gold. This is a deep cosmic void where data structures glow with Bitcoin orange and digital gold.
+1. Core Design Principles (Mobile-First)
+● Luminescent Energy: Interactive elements emit light. Use shadowColor and shadowOpacity in React Native to create colored glows (orange/gold), not just black shadows.
+● Tactile Precision: Use ultra-thin borderWidth: 1. Data must be displayed with monospace fonts for technical accuracy.
+● Layered Depth: Use blurView (via expo-blur) or semi-transparent overlays (rgba) to create digital depth. Elements float in Z-space using elevation and shadows.
+● Trust Through Design: High contrast and technical precision. The UI must feel "Engineered to Perfection."
+2. Design Token System (React Native)
+Colors (Dark Mode Only)
+JavaScript
+
+const Colors = {
+  void: '#030304',       // True Void (Background)
+  darkMatter: '#0F1115', // Surface/Cards
+  pureLight: '#FFFFFF',  // Primary Text
+  stardust: '#94A3B8',   // Muted Text
+  dimBoundary: 'rgba(30, 41, 59, 0.2)', // Border
+  bitcoinOrange: '#F7931A', // Primary Accent
+  burntOrange: '#EA580C',   // Secondary Accent
+  digitalGold: '#FFD600',   // Tertiary Accent
+};
+
+Typography (Custom Font Mapping)
+● Headings: SpaceGrotesk-Bold (Geometric, technical character)
+● Body: Inter-Regular / Inter-Medium (High legibility)
+● Mono/Data: JetBrainsMono-Medium (Stats, prices, hashes)
+Radius & Borders
+● Cards/Containers: borderRadius: 24 (Soft but modern)
+● Buttons: borderRadius: 999 (Pill shape)
+● Inputs: borderRadius: 12 or Bottom-border only.
+● Borders: Always borderWidth: StyleSheet.hairlineWidth or 1.
+3. Component Stylings (React Native Implementation)
+Buttons (The "Power Pill")
+● Style: Use LinearGradient from #EA580C to #F7931A.
+● Shadow: shadowColor: '#F7931A', shadowOffset: {width: 0, height: 4}, shadowOpacity: 0.5, shadowRadius: 10.
+● Interaction: Use Pressable with Scale animation (to 0.96) on press.
+● Text: Uppercase, letterSpacing: 1.5, fontFamily: 'Inter-Bold'.
+Cards (The "Blockchain Blocks")
+● Surface: backgroundColor: '#0F1115'.
+● Border: borderWidth: 1, borderColor: 'rgba(255,255,255,0.1)'.
+● Glow: Subtle shadowColor: '#F7931A', shadowOpacity: 0.1 for "active" blocks.
+● Layout: Generous padding (padding: 20).
+Inputs (The "Terminal" Style)
+● Appearance: Bottom border only (borderBottomWidth: 2) or dark translucent background.
+● Focus State: Border changes to #F7931A with a subtle outer glow.
+● Text: White color, monospace font for numeric inputs.
+4. Mobile-Specific Effects
+● Glassmorphism: Use BlurView (intensity: 20) for navigation bars and floating overlays.
+● Haptic Feedback: Trigger Haptics.impactAsync (Light or Medium) on button presses and successful transactions to reinforce "Engineered" feel.
+● Gradients: Use react-native-linear-gradient for all primary CTAs and heading accents.
+● Grid Background: Use a repeated SVG pattern of a 50px grid with opacity: 0.05 to simulate the network void.
+5. Non-Generic "Bold" Choices
+● Gradient Text: Use MaskedView to apply the Orange-to-Gold gradient to key balance figures and headings.
+● Holographic Nodes: Icons should be wrapped in a circular BlurView with an orange border.
+● Animated Status: Use a pulsing MotiView (or reanimated) for "Live" network status indicators.
+● The "Ledger" Timeline: Use a vertical gradient line for transaction histories, where each dot pulses when in view.
+6. Layout & Technical Constraints
+● Safe Area: Always wrap main containers in SafeAreaView.
+● Touch Targets: Minimum 48x48dp for all interactive elements.
+● Performance: Use FlashList for heavy transaction lists. Keep animations to the UI thread using React Native Reanimated.
+
+
+Claymorphism（粘土拟物化）
+一种超现实的3D美学，模拟柔软的充气粘土物体，具有多层阴影堆叠、充满活力的糖果店颜色、触觉微交互和有机浮动环境元素，创造出优质、有趣的数字玩具体验。
+1. 针对儿童与青少年的教育类应用
+2. 品牌形象中的 3D 角色与插图
+3. 金融科技与加密货币 (轻量版)
+4. 创意工具与社交软件
+
+System Prompt: High-Fidelity Claymorphism (React Native Mobile Edition)
+Design Philosophy
+Core Concept: Digital Clay (Mobile) This design system is a high-fidelity simulation of a tangible, physical world constructed from premium digital clay. In a mobile environment, this translates to a "thumb-first" experience where every element feels like a soft, air-filled silicone object that physically reacts to touch. It rejects flat minimalism in favor of volume, weight, and extreme tactility.
+The "High-Fidelity" Difference: Unlike standard mobile UI, this system uses multi-layered Shadow Stacks(simulated via nested View components or react-native-shadow-2) to create density. Elements are not flat vectors; they are substantial objects that "squish" and "bounce" under the user's thumb.
+
+Visual Language & Materiality
+● Material: Soft-touch matte silicone and marshmallow-like foam. Surfaces absorb light; reflections are soft and diffused.
+● Lighting: A virtual overhead light source (top-left). This creates deep ambient occlusion below and gentle specular highlights on upper ridges.
+● The "Super-Rounded" Rule: Zero sharp corners.
+    ○ Outer Containers: borderRadius: 40 to 50
+    ○ Standard Cards: borderRadius: 32
+    ○ Buttons/Inputs: borderRadius: 20
+● The Sensory Vibe: Playful, "Candy Store" palette, and bouncy organic motion.
+
+Design Token System (Mobile)
+1. Colors (The Candy Shop Palette)
+● Canvas (BG): #F4F1FA (Cool lavender-white. Avoid pure white).
+● Text (Primary): #332F3A (Soft Charcoal).
+● Text (Muted): #635F69 (Dark Lavender-Gray - minimum for WCAG).
+● Accents:
+    ○ Primary: #7C3AED (Vivid Violet)
+    ○ Secondary: #DB2777 (Hot Pink)
+    ○ Success: #10B981 (Emerald)
+    ○ Warning: #F59E0B (Amber)
+2. Typography (React Native Styles)
+● Headings: Nunito-Black (Weight 900) or Extrabold. Rounded terminals are mandatory.
+● Body: DMSans-Medium (Weight 500). Clean and geometric.
+● Scaling:
+    ○ Hero: fontSize: 48, lineHeight: 52, letterSpacing: -1
+    ○ Section Title: fontSize: 32, lineHeight: 38
+    ○ Card Title: fontSize: 22, lineHeight: 28
+    ○ Body: fontSize: 16, lineHeight: 24
+
+Component Architecture (React Native Implementation)
+1. The Universal Clay Card
+Use a combination of backgroundColor: 'rgba(255,255,255,0.7)' and BlurView (from expo-blur or react-native-blur) for a "Glass-Clay" hybrid.
+● Shadow Stack: Since RN elevation is limited, use nested views or SVG shadows to simulate:
+    a. Outer: offset: {12, 12}, blur: 24, color: 'rgba(160, 150, 180, 0.2)'
+    b. Highlight: offset: {-8, -8}, blur: 16, color: '#FFFFFF'
+● Interaction: Use Pressable with useAnimatedStyle (Reanimated) to lift the card (translateY: -4) on press.
+2. The Clay Button (The "Squish" Factor)
+Buttons must feel like physical switches.
+● Base: height: 56, borderRadius: 20, justifyContent: 'center'.
+● Gradient: Use LinearGradient from #A78BFA to #7C3AED.
+● Micro-Physics: * On Press In: scale: 0.92, shadowOpacity decreases.
+    ○ On Press Out: Spring back to scale: 1.0 with damping: 10.
+● Shadow: Deep colored shadow matching the button hue.
+3. The Recessed Input
+Simulates a finger-press into the clay.
+● Style: backgroundColor: '#EFEBF5', height: 64, paddingHorizontal: 24.
+● Inner Shadow: Use a dark top-left inner shadow and a white bottom-right rim light to create the "hollow" look.
+
+Animation System (Powered by Reanimated)
+1. Buoyancy (Float): Background blobs should use withRepeat(withTiming(...)) to drift ±20px over 8-10 seconds.
+2. Clay Breathe: Stat orbs should subtly scale between 1.0 and 1.03 every 4 seconds.
+3. Haptic Feedback: Every "Squish" interaction (Buttons/Cards) must trigger Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light).
+
+Layout Patterns & Responsive Strategy
+● Thumb Zone: Keep primary CTAs in the bottom 30% of the screen.
+● Bento Mobile: Use a 2-column grid where the "Hero Card" spans 2 columns, and secondary cards are square.
+● Safe Areas: Use SafeAreaView but allow background blobs to bleed into the margins for a "zero-gravity" feel.
+
+Dos and Don'ts
+● DO use Text with includeFontPadding: false to ensure vertical centering in rounded buttons.
+● DO use Spring physics for all transitions; avoid linear easing.
+● DO nested border radii: if a card is 32, the image inside is 24.
+● DON'T use standard Android elevation. It creates flat, gray shadows that break the clay aesthetic. Use SVG-based shadows.
+● DON'T use sharp corners (< 20).
+● DON'T use pure black #000000 for text or shadows.
+
+
+Enterprise（企业级/政企风）
+现代SaaS美学平衡了专业性和可接近性。鲜艳的靛蓝/紫罗兰色渐变、柔和的阴影、等距深度和干净的几何无衬线字体。
+1. 后台管理系统
+2. 生产力工具与协作平台
+3. 政务与金融类严肃应用
+4. 垂直领域专业软件
+Here is a translated version of your web design prompt, adapted specifically for mobile application development (iOS/Android/React Native/Flutter). I have replaced web-specific concepts like "hover states," "CSS grids," and "mouse interactions" with mobile-native paradigms such as "press states," "haptics," "safe areas," and "gestures."
+
+App Design System Prompt: Modern Enterprise SaaS (Mobile)
+1. Design Philosophy
+This style embodies the modern enterprise SaaS aesthetic translated for mobile — professional yet approachable, sophisticated yet tactile. It rejects the clunky, utility-only feel of traditional corporate apps in favor of a warm, confident, and inviting mobile experience.
+Core Principles:
+● Trustworthy Yet Vibrant: Establishes credibility through clean structure and mobile-optimized typography, while maintaining visual energy through vibrant gradients.
+● Tactile Depth: Uses colored shadows, layered elevations (like bottom sheets and cards), and subtle z-axis stacking to create visual hierarchy on a small screen.
+● Refined Elegance: Every element is polished, focusing on fluid gestures, spring-physics animations, and sophisticated press states.
+● Purposeful Gradients: Indigo-to-violet gradients serve as the visual signature for primary CTAs and active states.
+● Mobile Polish: Generous spacing, safe-area awareness, and crisp typography create a premium, enterprise-ready feel in the palm of the hand.
+Keywords: Trustworthy, Vibrant, Polished, Tactile, Modern, Approachable, Enterprise-Ready, Fluid.
+2. Design Token System
+Colors (Light Mode)
+● Background: #F8FAFC (Slate 50) - A very subtle cool grey/white base for screen backgrounds.
+● Surface: #FFFFFF (White) - For cards, bottom sheets, and elevated elements.
+● Primary: #4F46E5 (Indigo 600) - The core brand color. Vibrant blue-purple.
+● Secondary: #7C3AED (Violet 600) - For gradients, badges, and accents.
+● Text Main: #0F172A (Slate 900) - High contrast, sharp for primary readability.
+● Text Muted: #64748B (Slate 500) - For supporting text and inactive tab icons.
+● Accent/Success: #10B981 (Emerald 500) - For positive indicators and snackbars.
+● Divider/Border: #E2E8F0 (Slate 200) - Subtle separation for list items.
+Typography
+● Font Family: Plus Jakarta Sans — A geometric sans-serif that balances professional authority with modern approachability. High legibility on mobile screens.
+● Scaling: Designed to support iOS Dynamic Type and Android font scaling.
+● Font Weights:
+    ○ Display/Screen Titles: ExtraBold (800)
+    ○ Section Headers: Bold (700)
+    ○ Card Titles/Buttons: SemiBold (600)
+    ○ Body Text: Regular (400)
+● Line Heights: Tight for titles (1.1-1.2), relaxed for body text (1.4-1.5) to ensure comfortable reading on narrow screens.
+Radius & Border
+● Screen Elements: 16pt/dp for large cards and bottom sheets.
+● Interactive Elements: 8pt/dp for inputs and small chips.
+● Buttons: Fully rounded (pill shape) or 12pt/dp for a modern tech feel.
+● Borders: Hairline (0.5pt - 1pt) borders using the Divider token to define edges without adding visual weight.
+Shadows & Depth
+● Card Elevation: Soft, colored shadows replacing neutral grays. Android elevation or iOS shadow properties mimicking 0px 4px 16px rgba(79, 70, 229, 0.08).
+● Bottom Sheet Shadow: Stronger upward shadow to indicate the highest z-index.
+● Button Shadow (Primary): 0px 4px 12px rgba(79, 70, 229, 0.25) to make primary actions highly prominent.
+3. Component Stylings
+Buttons
+● Primary CTA: Full width (minus screen padding) at the bottom of the screen. Background uses the Indigo-to-Violet gradient. White text.
+● Secondary: White surface, slate border, slate text.
+● Press State: Instead of web hover, use an active press state that slightly scales the button down (0.95x) and reduces shadow, paired with subtle haptic feedback.
+Cards & Lists
+● Base: White background, 16pt radius, hairline border, soft colored shadow.
+● Layout: Horizontal scrolling (carousels) for feature discovery, vertical standard lists for data.
+● List Items: Edge-to-edge with inset dividers, utilizing leading icons (in soft-colored circular backgrounds).
+Inputs & Forms
+● Style: White background, 8pt radius, light slate border.
+● Active/Focused State: Border transitions to Indigo, label animates to a floating position, keyboard automatically presents.
+● Error State: Red border with an immediate, subtle shake animation.
+4. App-Specific Bold Choices
+● Haptic Integration: Tied to micro-interactions. Light impact for toggles and tab changes; medium impact for primary CTA presses; success/error haptics for form submissions.
+● Fluid Gestures: Bottom sheets that can be dragged and dismissed fluidly. Cards that support swipe-to-action (e.g., swipe left to archive) with color reveals underneath.
+● Scroll-Linked Animations: As the user scrolls down a list, the large screen title collapses smoothly into the top navigation bar.
+● Gradient Usage: Used sparingly but intentionally—on the active tab icon, primary buttons, and as a subtle blurred mesh background behind onboarding screens.
+● Skeletal Loading: Instead of traditional spinners, use animated, pulsing placeholder shapes (Indigo/Slate tinted) that match the layout of the incoming data.
+5. Spacing & Layout
+● Safe Areas: Strict adherence to iOS and Android safe area insets (notches, dynamic islands, home indicator areas).
+● Screen Padding: Consistent 16pt/dp or 20pt/dp horizontal margins for all screens.
+● Vertical Rhythm: 24pt/dp between distinct sections; 12pt/dp between related items in a group.
+● Navigation:
+    ○ Bottom Tab Navigation for primary destinations (3-5 items).
+    ○ Top App Bar for contextual actions, screen titles, and back buttons.
+● Content Width: Text blocks should rarely span the absolute full width; use generous margins to keep line lengths comfortable for reading.
+6. Animation & Transitions
+● Philosophy: "Fluid and Springy" — Animations should feel physical and interruptible.
+● Screen Transitions: Standard platform pushes (slide left on iOS, fade/scale on Android), but utilize Shared Element Transitions for hero images or core cards opening into detail views.
+● Press Animations: Scale-down (scale: 0.97) on press down, spring back on release.
+● Easing: Avoid linear animations. Use spring physics for layout changes and ease-out for opacities.
+7. Iconography & Touch Targets
+● Library: Lucide-react-native (or equivalent SVG system).
+● Style: 2px stroke width, rounded caps and joins for a friendly, modern feel.
+● Touch Targets: Crucial for mobile. Minimum tap area of 44x44 pt (iOS) or 48x48 dp (Android) for all interactive elements, even if the visual icon is only 24x24.
+● Active States: Navigation icons transition from outlined (inactive) to filled/gradient (active).
+8. Accessibility & Best Practices
+● Dynamic Text: UI must not break when users increase their system font size. Text must wrap or truncate gracefully.
+● Contrast: All text meets WCAG AA standards. Slate 900 on Slate 50 background is highly compliant.
+● Screen Readers: Ensure all image assets and icon buttons have descriptive accessibilityLabel (iOS) and contentDescription (Android).
+● Dark Mode Readiness: While this spec is light-mode first, tokens should be structured to easily invert (e.g., Slate 50 becomes Slate 900, gradients become slightly muted).
+● Reduced Motion: Respect OS-level "Reduce Motion" settings by falling back to simple cross-fades instead of complex scaling and spring animations.
+
+
+
+Sketch（素描/手绘风）
+有机的不稳定边框、手写排版、纸张纹理和俏皮的不完美。每个元素都是用记号笔和铅笔在纹理纸上勾勒出来的。
+1. 原型设计与早期创意提案 (Low-Fidelity Prototyping)
+2. 创意品牌、艺术与独立文化项目
+3. 教育、绘本与儿童类产品
+4. 游戏化 UI 与 叙事解谜游戏
+
+Design Philosophy
+The Hand-Drawn mobile design style celebrates authentic imperfection and human touch within the palm of the hand. It rejects the sterile precision of typical mobile UI in favor of organic, playful irregularity that evokes a portable sketchbook, a pocket notebook, or a collection of sticky notes.
+Core Principles:
+● No Straight Lines: Every View and TouchableOpacity uses complex borderRadius logic or SVG masks to create wobbly edges that reject geometric perfection.
+● Tactile Texture: Use background overlays or tiled images to simulate physical media like grain, paper, or notebook grids, making the screen feel like a physical surface.
+● Playful Tilt: Elements utilize small transform: [{ rotate: '-1deg' }] properties to break the rigid mobile grid and create casual energy.
+● Hard Offset Shadows: Strictly avoid elevation (Android) or shadowRadius (iOS) that creates blur. Use a secondary "shadow layer" View offset by (4px, 4px) to create a cut-paper, layered collage aesthetic.
+● Handwritten Typography: Exclusively use handwritten fonts (Kalam, Patrick Hand). Typography should vary in size and rotation to look like quick notes written on the fly.
+● Scribbled Overlays: Use absolute-positioned SVGs for flourishes like hand-drawn arrows, "tape" effects on images, and "X" marks for close buttons.
+● Intentional Messiness: Embrace slight overlaps and asymmetrical margins that make the app feel spontaneous rather than manufactured.
+● Emotional Intent: This style lowers the "fear of interaction" by appearing unfinished and approachable. It is perfect for journaling apps, creative tools, education, or any product that wants to feel human-centered rather than corporate.
+
+Design Token System
+Colors (Single Palette - Light Mode)
+● Background: #fdfbf7 (Warm Paper)
+● Foreground: #2d2d2d (Soft Pencil Black)
+● Muted: #e5e0d8 (Old Paper / Erased Pencil)
+● Accent: #ff4d4d (Red Correction Marker)
+● Border: #2d2d2d (Pencil Lead)
+● Secondary Accent: #2d5da1 (Blue Ballpoint Pen)
+Typography
+● Headings: Kalam-Bold - High visual weight, felt-tip marker style.
+● Body: PatrickHand-Regular - Highly legible but distinctly human.
+● Scale: Large and readable for mobile. Headings should have lineHeight adjusted to allow for "scribbled" descenders.
+Radius & Border
+● Wobbly Borders: Since React Native doesn't support the slash / syntax for borderRadius, use unique values for each corner (e.g., borderTopLeftRadius: 15, borderTopRightRadius: 25, borderBottomLeftRadius: 20, borderBottomRightRadius: 10).
+● Border Width: Bold and visible. borderWidth: 2 minimum; borderWidth: 3 for primary actions.
+● Style: solid for containers; dashed for "cut-out" sections or empty states.
+Shadows & Effects
+● Hard Offset Shadows: Since shadowOpacity with 0 radius is inconsistent across platforms, implement as a "Shadow View" placed behind the main component.
+    ○ Standard: Offset { x: 4, y: 4 } with #2d2d2d.
+    ○ Active (Press): Offset { x: 0, y: 0 } (the button "sinks" into the paper).
+● Paper Texture: Use a repeating pattern background image or a very subtle radial-gradient SVG overlay across the entire screen.
+
+Component Stylings
+Buttons (TouchableOpacity)
+● Shape: Irregular wobbly rectangle.
+● Normal State: * White background, borderWidth: 3, Pencil Black text.
+    ○ Hard offset shadow view behind it.
+● Pressed State (activeOpacity={1}):
+    ○ Main button transform: [{ translateX: 4 }, { translateY: 4 }].
+    ○ The background "shadow view" is covered, simulating a physical press.
+● Variant: "Post-it" Yellow (#fff9c4) for primary CTAs.
+Cards/Containers
+● Base Style: White background, wobbly border, slight rotation (-1deg or 1deg).
+● Decoration Types:
+    ○ "Tape": A semi-transparent View (rgba(200, 200, 200, 0.5)) positioned absolutely at the top, slightly rotated to look like it holds the card.
+    ○ "Tack": A small red circle SVG at the top center.
+● Speech Bubbles: Use a small SVG triangle attached to the bottom of the container for "hint" text or tooltips.
+Inputs (TextInput)
+● Style: Full box with wobbly borderRadius.
+● Font: PatrickHand-Regular.
+● Focus State: Border color changes to Blue Ballpoint (#2d5da1) with a slight increase in borderWidth.
+● Placeholder: Muted Pencil (#2d2d2d60).
+
+Layout Strategy
+● The "Anti-Grid": Avoid perfect alignment. Give adjacent cards slightly different rotation values.
+● Layering: Use zIndex to stack "tape" over cards and cards over background scribbles.
+● Visual Rhythm: Use padding: 20 for standard screens. Use large gap values between vertical elements to let the "paper" breathe.
+● Overflow: Allow decorative elements (like a hand-drawn star) to bleed slightly off the edge of the screen.
+
+Non-Genericness (Bold Choices)
+● Sketchy Loaders: Instead of a spinner, use an animation that "scribbles" a circle or toggles between three hand-drawn frames.
+● Hand-Drawn Icons: Use icons that look like they were drawn with a 0.5mm fineliner (thick strokes, unclosed loops).
+● Strikethrough: When a task is completed or an item is deleted, use a red "scribble-out" SVG overlay instead of a simple line.
+● Wavy Dividers: Replace standard horizontal rules with a hand-drawn squiggly line SVG.
+
+Effects & Animation
+● The "Jiggle": When a user triggers an error, use a Sequence animation that rapidly rotates the element between -2deg and 2deg.
+● Snappy Transitions: Use LayoutAnimation.configureNext(LayoutAnimation.Presets.spring) for all layout changes to give a bouncy, physical feel.
+
+Mobile-First Strategy (React Native)
+● Touch Targets: Ensure all wobbly buttons have a minimum hit area of 48x48 even if the visual "ink" is smaller.
+● Safe Area: Ensure the "Paper" background extends into the SafeAreaView to maintain the illusion of physical media.
+● Performance: Use useNativeDriver: true for rotations and transforms to keep the "hand-drawn" movements fluid at 60fps.
+● Haptics: Add Haptics.impactAsync on button presses to reinforce the feeling of "clicking" a physical object.
+
+
+Neumorphism（新拟物化）
+通过单色背景上的双阴影拉伸和插入元素。柔软、触感好、物理接地，可接近性极佳。
+1. 极简主义硬件控制与智能家居
+2. 追求审美感的工具类 App
+3. 金融与健康监测看板（非密集型）
+4. 品牌营销与展示型页面
+
+Design Philosophy (React Native / Mobile)
+Core Principles: Neumorphism on mobile creates a tactile, physical interface through dual shadows. On React Native, this is achieved by layering View components or using specialized libraries to simulate the light source (top-left) and dark shadow (bottom-right). Every component is "molded" from the base material (#E0E5EC). Buttons are never flat; they are either "pillowed" (convex) or "wells" (concave/inset).
+Vibe: Premium, ceramic-like feel. It prioritizes the "thump" of a physical button press. It is a calm, monochromatic experience that uses depth rather than color to establish hierarchy.
+Unique Visual Signatures (Mobile Specific):
+● Dual-Shadow Layering: Since React Native's shadowColor only supports one direction, use nested Viewcomponents or react-native-shadow-2 to achieve the dual-light effect.
+● Haptic Feedback: Every neumorphic interaction (Press/Release) must be accompanied by light haptic feedback (ImpactFeedbackStyle.Light).
+● Physical Press: Active states should use transform: [{ scale: 0.97 }] to simulate material compression.
+● Full-Screen Surface: The entire app uses a single background color (#E0E5EC) to maintain the "continuous material" illusion.
+
+Design Token System (The DNA)
+Colors (Light Mode - Cool Monochromatic)
+● Background: #E0E5EC (The "Clay" base).
+● Text Primary: #3D4852 (7.5:1 contrast).
+● Text Muted: #6B7280 (4.6:1 contrast).
+● Accent: #6C63FF (Used for active toggles or primary CTAs).
+● Shadow Light: rgba(255, 255, 255, 0.6) (Top-Left).
+● Shadow Dark: rgba(163, 177, 198, 0.7) (Bottom-Right).
+Typography
+● Font Family: Use System (San Francisco/Roboto) or PlusJakartaSans-Bold.
+● Sizing: * Heading: 24pt-32pt, Bold.
+    ○ Body: 16pt, Medium.
+    ○ Caption: 12pt, Regular.
+● Letter Spacing: -0.5 for headings to enhance the modern look.
+Radius (React Native borderRadius)
+● Large Container: 32
+● Standard Button/Input: 16
+● Pill/Search Bar: 999
+
+Shadows & Effects (The Physics)
+Note: React Native requires specific shadow properties for iOS and elevation for Android. For high-fidelity Neumorphism, use a wrapping implementation.
+Extruded (Convex - Resting)
+● Outer Shadow (Dark): shadowOffset: { width: 6, height: 6 }, shadowOpacity: 1, shadowRadius: 10, shadowColor: 'rgba(163, 177, 198, 0.7)'
+● Inner Shadow (Light): shadowOffset: { width: -6, height: -6 }, shadowOpacity: 1, shadowRadius: 10, shadowColor: 'rgba(255, 255, 255, 0.6)'
+Inset (Concave - Pressed/Input)
+● Concept: Use a slightly darker background color (#D1D9E6) or internal gradients/shadows to simulate a "carved out" look.
+● Visual: backgroundColor: '#E0E5EC', plus internal borders of 1px with a darker shade at the top.
+
+Component Styling (React Native)
+Buttons
+● Base: height: 56, borderRadius: 16, justifyContent: 'center', alignItems: 'center'.
+● Default State: Extruded dual shadow.
+● Active State (Pressable): Remove outer shadows, apply scale: 0.98, and change background slightly to indicate an "inset" state.
+● Haptics: Trigger Haptics.impactAsync on onPressIn.
+Cards
+● Base: padding: 24, borderRadius: 32, backgroundColor: '#E0E5EC'.
+● Hierarchy: Use "Nested Depth." A card (Extruded) contains an Icon Container (Inset Deep).
+Inputs
+● Style: height: 50, borderRadius: 16, paddingHorizontal: 16.
+● Depth: Must be Inset (Concave) to look like a physical slot.
+● Focus: Border color changes to #6C63FF with a thin 1.5px width.
+
+Animation & Micro-interactions
+● Framework: Use React Native Reanimated or LayoutAnimation.
+● Transitions: Duration: 250ms, Easing: Bezier(0.4, 0, 0.2, 1).
+● Interaction: * Scale: Buttons shrink by 2-3% when pressed.
+    ○ Shadow Transition: Smoothly interpolate shadow opacity from 1 to 0.4 when an element is "pressed" into the surface.
+
+Layout & Accessibility
+● Safe Area: Always wrap in SafeAreaView.
+● Touch Targets: Minimum 48x48 for all interactive elements.
+● Spacing: Use a 8pt grid system (8, 16, 24, 32, 48).
+● Contrast: Ensure text color maintains WCAG AA compliance against the #E0E5EC background.
+
+Anti-Patterns (Do Not Do)
+● No Black Shadows: Never use rgba(0,0,0,x). Shadows must be blue-grey to match the "Cool Grey" material.
+● No Pure White Backgrounds: The screen background MUST be #E0E5EC.
+● No Sharp Edges: Avoid borderRadius < 12.
+● No Flat Borders: Do not use borderWidth: 1 as a substitute for depth unless in a focus state.
\ No newline at end of file
diff --git a/.claude/skills/ui-ux-pro-max/data/draft.csv b/.claude/skills/ui-ux-pro-max/data/draft.csv
new file mode 100644
index 000000000..cac862f89
--- /dev/null
+++ b/.claude/skills/ui-ux-pro-max/data/draft.csv
@@ -0,0 +1,1779 @@
+# NOTE: 此文件仅作为设计备份/参考文档，当前搜索引擎与 CLI 不会读取或执行本文件内容。
+
+
+Bauhaus（包豪斯）
+大胆的几何现代主义，包含圆形、方形和三角形。主色调（红/蓝/黄），边缘鲜明，阴影强烈。功能性与艺术性兼备，带有建构主义的不对称。
+1. 极简主义品牌官网与电商
+2. 工具类与高效率 App
+3. 数字媒体与在线杂志
+
+<design-system>
+Design Style: Bauhaus (Mobile)
+1. Design Philosophy
+The Bauhaus style embodies the revolutionary principle "form follows function" while celebrating pure geometric beauty and primary color theory. On mobile, this translates to tactile constructivism—the screen is a canvas where elements are physically stacked blocks. The aesthetic creates a high-impact, poster-like experience in the palm of the hand: bold, touch-centric, and unapologetically graphic.
+Vibe: Tactile, Constructivist, Geometric, High-Contrast, Bold, Architectural
+Core Concept: The mobile interface is a vertical geometric composition. Scroll views are not just content streams but stacked layers of colored paper and rigid shapes. The limited screen real estate forces a focus on massive typography and distinct color blocking (Red #D02020, Blue #1040C0, Yellow #F0C020). Every tap should feel mechanical and substantial.
+Key Characteristics:
+● Geometric Purity: UI elements are strictly circles (buttons/avatars) or squares (cards/inputs).
+● Tactile Depth: Hard shadows indicate interactivity; elements look "pressable."
+● Color Blocking: distinct screen sections use solid primary colors to separate content without whitespace.
+● Thick Borders: 2px and 3px black borders ensure legibility and distinct separation on small screens.
+● Vertical Rhythm: Strong vertical stacking with deliberate spacing, avoiding clutter.
+● Constructivist Typography: Headlines are massive (text-4xl to text-5xl) relative to screen width, breaking traditional mobile scaling rules.
+● Thumb-Friendly: Interactive zones are large, distinct, and geometrically defined.
+2. Design Token System (The DNA)
+Colors (Single Palette - Light Mode)
+The palette remains strictly Bauhaus primaries, optimized for high contrast outdoors.
+● background: #F0F0F0 (Off-white canvas)
+● foreground: #121212 (Stark Black)
+● primary-red: #D02020 (Bauhaus Red)
+● primary-blue: #1040C0 (Bauhaus Blue)
+● primary-yellow: #F0C020 (Bauhaus Yellow)
+● border: #121212 (Thick, distinct borders)
+● muted: #E0E0E0
+Typography
+● Font Family: 'Outfit' (geometric sans-serif).
+● Font Import: Outfit:wght@400;500;700;900
+● Scaling: Aggressive scaling adapted for vertical viewports.
+    ○ Display: text-4xl → text-5xl (Massive headers taking up 30-40% of screen width)
+    ○ Subheadings: text-xl → text-2xl
+    ○ Body: text-base (16px minimum for legibility)
+    ○ Button Text: text-lg (Large for readability)
+● Weights:
+    ○ Headlines: font-black (900) uppercase, tight tracking (tracking-tighter)
+    ○ Buttons/Nav: font-bold (700) uppercase, wide tracking (tracking-wide)
+    ○ Body: font-medium (500)
+● Line Height: Tight (leading-none) for headlines to save vertical space; leading-relaxed for body text.
+Radius & Border
+● Radius: Strict Binary—rounded-none (0px) for layout blocks, inputs, and cards; rounded-full (9999px) for primary action buttons and avatars.
+● Border Widths:
+    ○ Standard Elements: border-2 (2px)
+    ○ Major Containers/Bottom Nav: border-t-2 or border-3
+    ○ Separators: divide-y-2
+● Border Color: Always #121212 (black).
+Shadows/Effects
+● Hard Offset Shadows (Tactile feedback):
+    ○ Small elements (Tags/Icons): shadow-[2px_2px_0px_0px_black]
+    ○ Buttons/Cards: shadow-[4px_4px_0px_0px_black] (Reduced from web 8px to save screen width)
+    ○ Floating Action Button (FAB): shadow-[5px_5px_0px_0px_black]
+● Touch Feedback: active:translate-x-[2px] active:translate-y-[2px] active:shadow-none (Instant mechanical depression).
+● Patterns:
+    ○ Dot grid backgrounds on "Paper" colored sections (background-size: 16px 16px).
+    ○ Screen transitions: Slide-over with hard black borders.
+3. Component Stylings
+Buttons (Touch Targets)
+● Minimum Size: Height h-12 or h-14 (48px-56px) for thumb accessibility.
+● Variants:
+    ○ Primary (CTA): w-full bg-[#D02020] text-white border-2 border-black shadow-[4px_4px_0px_0px_black]
+    ○ Secondary: w-full bg-[#1040C0] text-white border-2 border-black shadow-[4px_4px_0px_0px_black]
+    ○ Floating Action (FAB): h-14 w-14 rounded-full bg-[#F0C020] border-2 border-black shadow-[4px_4px_0px_0px_black] flex items-center justify-center
+● Shapes: Full-width rectangular buttons (rounded-none) or pill-shaped (rounded-full) for bottom-sticky actions.
+● States: NO hover. Focus on active state (press down effect).
+Cards (Mobile Stack)
+● Base Style: White background, border-2 border-black, shadow-[4px_4px_0px_0px_black], mb-6.
+● Decoration:
+    ○ Geometric badge in top-right: absolute top-0 right-0 h-8 w-8 bg-[#F0C020] border-l-2 border-b-2 border-black flex items-center justify-center.
+● Interaction: Entire card is a touch target. active:translate-x-[1px] active:translate-y-[1px] active:shadow-[2px_2px_0px_0px_black].
+● Content: Image usually takes top half (aspect-video), bold text below.
+Bottom Navigation (The Anchor)
+● Container: fixed bottom-0 w-full bg-white border-t-2 border-black z-50 h-20.
+● Grid: 3 to 5 items equally spaced.
+● Items:
+    ○ Inactive: Black stroke icon, clear background.
+    ○ Active: Icon inside a geometric shape (Square/Circle) with primary color fill (e.g., Red Square context).
+    ○ Label: Tiny uppercase bold text below icon, or icon only for minimalism.
+Inputs & Forms
+● Field: h-12 bg-white border-2 border-black rounded-none px-4 text-black placeholder:text-gray-400 focus:bg-[#FFF9C4] focus:ring-0 focus:border-black.
+● Label: Uppercase bold, mb-1 block.
+● Checkbox: h-6 w-6 appearance-none border-2 border-black bg-white checked:bg-[#1040C0] rounded-none.
+4. Layout & Spacing
+● Container: w-full with px-5 (20px) padding. Max-width constraints removed (fluid mobile).
+● Section Padding:
+    ○ Standard: py-8
+    ○ Hero: pt-12 pb-16
+● Grid Systems:
+    ○ Main Layout: Single column (Stack).
+    ○ Micro-grids: 2-column for stats/gallery (gap-3 or gap-4).
+● Safe Areas: Respect pt-safe (top notch) and pb-safe (bottom home indicator).
+● Dividers: Thick section separators border-b-2 border-black usually paired with a background color change.
+5. Non-Genericness (Bold Choices)
+Mobile Constraints require distinct personality to avoid looking like a wireframe:
+● Full-Screen Color Washes:
+    ○ Onboarding screens: Full solid backgrounds (Red Screen → Blue Screen → Yellow Screen).
+    ○ Success states: Full Yellow background (bg-[#F0C020]) with massive black centered checkmark.
+    ○ Error states: Full Red background (bg-[#D02020]) with white text.
+● Header Identity:
+    ○ Instead of a standard navbar, use a "Bauhaus Header Block": A row containing a Square (Menu), a flexible space for the Title (Left aligned, massive), and a Circle (Profile/Search). All elements separated by vertical borders divide-x-2 border-b-2 border-black.
+● Geometric Lists:
+    ○ List items aren't just text lines. They are alternating geometric bullets: Line 1 uses a ■, Line 2 uses a ●, Line 3 uses a ▲.
+● Rotated "Stickers":
+    ○ "New", "Sale", or Notification badges are rotated -12deg or +12deg, sitting on top of corners to break the rigid grid.
+● Image Filters:
+    ○ Thumbnails: Grayscale + High Contrast.
+    ○ Detail View: Full color, no rounded corners, thick black border.
+6. Icons & Imagery
+● Icon Library: lucide-react-native or similar (Circle, Square, Triangle, Menu, X, ArrowLeft).
+● Icon Style:
+    ○ Stroke: stroke-[2px].
+    ○ Size: w-6 h-6 (standard) or w-8 h-8 (hero actions).
+● Icon Containers:
+    ○ Navigation icons often live inside rigid 48x48px bordered squares.
+    ○ Back buttons are always circular rounded-full with a border.
+● Imagery:
+    ○ Masking: Use CSS clip-paths to crop header images into non-standard shapes (e.g., a trapezoid or a circle cropped at the bottom) within the mobile frame.
+7. Responsive Strategy (Device Sizes)
+● Small Phones (SE/Mini):
+    ○ Reduce display text to text-3xl.
+    ○ Stack stats vertically (1-col).
+    ○ Reduce padding to px-4.
+● Large Phones (Max/Plus):
+    ○ Display text scales to text-5xl.
+    ○ Stats can use 2-col grid.
+    ○ Card images gain more height.
+● Orientation:
+    ○ Portrait (Primary): Vertical stacking.
+    ○ Landscape: Avoid if possible, or split screen 50/50 (Text Left / Image Right).
+8. Animation & Micro-Interactions
+● Feel: Physical, snappy, zero-latency.
+● Duration: duration-150 (Very fast).
+● Easing: ease-in-out (Sharp stops).
+● Interactions:
+    ○ Tap: The element physically depresses (translate X/Y matches shadow size).
+    ○ Drawer Open: Slides in from Left/Right with a solid black border line leading it. No soft fades—it slides like a mechanical door.
+    ○ Toast/Alerts: Drop down from top as a solid geometric block (Yellow/Red) with hard borders, swinging slightly like a hanging sign.
+    ○ Scroll: Sticky headers snap into place instantly.
+</design-system>
+
+
+
+"Monochrome（单色/黑白）
+"一套简洁的编辑设计体系，建立在纯粹的黑白之上。没有点缀色——只有戏剧性的对比、超大衬线字体和精准的几何布局。让人联想到高端时尚专题和建筑作品集。严肃、成熟、毫不掩饰地大胆。
+"1. 极简主义电商与高端奢侈品
+2. 专业创意与文档编辑工具
+3. 数据密集型仪表盘（局部应用）
+4. 实验性与先锋感网站"
+
+<design-system>
+Design Style: Minimalist Monochrome (Mobile)
+Design Philosophy
+Core Principle
+The Pocket Editorial. On mobile, Minimalist Monochrome transforms the screen into a tactile, high-end printed manifesto. It rejects the "app-like" tendency for soft bubbles and friendly gradients. Instead, it offers a stark, vertical journey defined by pure black (#000000), pure white (#FFFFFF), and razor-sharp borders. Every tap is a deliberate decision; every scroll is a flip of a page in a luxury monograph.
+Visual Vibe
+Emotional Keywords: Tactile, Austere, Editorial, Direct, High-Fidelity, Uncompromising, Sharp, Rhythmic.
+This is the visual language of:
+● Mobile typographers and digital brutalism
+● The mobile interfaces of luxury fashion houses (Balenciaga, Zara, SSENSE)
+● Digital exhibitions where the content frames itself
+● High-contrast e-reader aesthetics
+What This Design Is NOT
+● ❌ "App-y" (no cards with drop shadows, no floating bubbles)
+● ❌ Native iOS/Android standard (no system blue, no rounded groups)
+● ❌ Gesture-heavy (interactions are explicit taps, not vague swipes)
+● ❌ Cluttered (one idea per screen view)
+● ❌ Colorful (strictly grayscale)
+The DNA of Minimalist Monochrome (Mobile)
+1. Vertical Linearity
+The mobile screen is a continuous roll of paper. Structure is created not by boxes, but by horizontal lines (rules) that span the full width of the device. Content lives between these lines.
+2. Typography as Interface
+Buttons are often just large words. Navigation is text-based. The serif typeface (Playfair Display) acts as the primary image on the screen. Headlines must be large enough to break words onto new lines, creating graphic shapes.
+3. The "Touch" Inversion
+Since there is no "hover" on mobile, interaction is communicated through inversion. When a user touches a white block, it turns black instantly. This zero-latency binary feedback replaces physical tactility.
+4. Zero Radius, Zero Fluff
+All elements—buttons, images, inputs, modals—have strictly 0px border radius. This sharp geometry cuts through the rounded physical corners of modern smartphones, creating a striking contrast.
+
+Design Token System
+Colors (Strictly Monochrome)
+background:       #FFFFFF (Pure white)
+foreground:       #000000 (Pure black)
+muted:            #F5F5F5 (Off-white for "pressed" states or subtle blocks)
+mutedForeground:  #525252 (Dark gray for metadata)
+border:           #000000 (Black borders - heavy usage)
+borderLight:      #E5E5E5 (Subtle dividers)
+overlay:          #000000 (Full screen menu background)
+
+Rule: No accent colors. The "Active State" is simply the inverse of the "Default State."
+Typography
+Font Stack:
+● Display: "Playfair Display", serif - For all headlines and large numerals.
+● Body: "Source Serif 4", serif - For reading text.
+● UI/Labels: "JetBrains Mono", monospace - For tiny tags, dates, and technical specs.
+Type Scale (Mobile Optimized):
+Note: Sizes are calibrated to feel "massive" on a small screen without breaking layout.
+xs:   0.75rem  (12px) - Metadata / Breadcrumbs
+sm:   0.875rem (14px) - UI Labels / Captions
+base: 1rem     (16px) - Body text (Legibility minimum)
+lg:   1.125rem (18px) - Lead text / Button text
+xl:   1.5rem   (24px) - Section headers
+2xl:  2rem     (32px) - Standard Headlines
+3xl:  2.5rem   (40px) - Hero Sub-text
+4xl:  3rem     (48px) - Major Headlines
+5xl:  4rem     (64px) - "Cover" text (Often wraps)
+6xl:  5rem     (80px) - Numerical statements
+
+Tracking & Leading:
+● Headlines: tracking-tighter (-0.05em) and leading-[0.9]. Text should feel tightly packed.
+● Body: leading-relaxed for readability.
+● Button Text: tracking-widest uppercase.
+Border Radius
+ALL VALUES: 0px
+
+Constraint: Even the bottom sheet (modal) must be square. Even the active state of a tapped element is a sharp rectangle.
+Borders & Lines (The Grid)
+hairline:  1px solid #E5E5E5  (List separators)
+thin:      1px solid #000000  (Standard element borders)
+thick:     2px solid #000000  (Emphasis / Input bottom)
+heavy:     4px solid #000000  (Section dividers)
+
+Usage:
+● Full-Bleed Lines: Borders should often touch the edges of the screen (-mx-4 or -mx-6).
+● Separators: Use border-b black heavily to separate stacked vertical content.
+Shadows
+NONE
+
+Depth is strictly 2D. Layers are defined by opacity (100% vs 0%) or borders, never by shadows.
+Textures & Patterns
+Use subtle noise to simulate high-quality paper texture on mobile backgrounds to avoid a "sterile" feeling.
+Mobile Noise (CSS):
+CSS
+
+background-image: url("data:image/svg+xml,..."); /* Same noise SVG as web */
+opacity: 0.03; /* Slightly higher opacity for small screens */
+
+
+Component Stylings
+Buttons & Touch Targets
+Primary Button (The Block):
+- Width: w-full (Full width strongly preferred)
+- Height: h-14 (56px - Large touch target)
+- Background: #000000
+- Text: #FFFFFF
+- Radius: 0px
+- Typography: Uppercase, Mono or Serif, Tracking-widest
+- Active State: Instantly inverts to White bg, Black text
+
+Secondary Button (The Outline):
+- Width: w-full
+- Height: h-14
+- Background: Transparent
+- Border: 1px solid #000000
+- Active State: Instantly fills Black
+
+Sticky Bottom Action (CTA):
+● A fixed bar at the bottom of the viewport.
+● border-t-2 border-black.
+● Contains a single primary action or a price + action pair.
+● Background: #FFFFFF (or inverted #000000).
+Cards / List Items
+The "Stacked" Card:
+Instead of a box with padding, mobile cards are often full-width segments separated by borders.
+- Container: Border-bottom 1px solid #000000
+- Padding: py-6
+- Image: Aspect ratio 4:5 or 1:1, full width or padded
+- Content: Text sits directly below image
+- Interaction: Touching anywhere in the segment triggers "Active" state
+
+Navigation
+The "Bar":
+● Top: Minimal. Just a logo (Left) and a "MENU" text button or Hamburger (Right).
+● Bottom: Optional. If used, simple text labels or thin outline icons. border-t-2 border-black.
+The Menu Overlay:
+● Full screen.
+● Background: #000000 (Black).
+● Text: #FFFFFF (White).
+● List items: Massive text (text-4xl), serif, centered or left-aligned.
+● Divider: Thin white lines between menu items.
+Inputs
+Mobile Input:
+- Style: Flush with background.
+- Border: Bottom only (2px solid black).
+- Radius: 0px.
+- Height: h-14.
+- Focus: Border becomes 4px thick. No native blue glow.
+- Clear Button: Simple 'X' icon in black.
+
+
+Layout Strategy
+Safe Areas
+● Respect pb-safe (Home Indicator) and pt-safe (Status Bar).
+● Style Note: The Status Bar should be white text on black header, or black text on white header. High contrast.
+Container & Spacing
+● Horizontal Padding: px-5 (20px) or px-6 (24px).
+● Vertical Rhythm:
+    ○ Small gaps: py-4
+    ○ Section gaps: py-16
+    ○ Between text and image: my-6
+The "Scroll"
+● Design for the scroll. Use sticky headers for section titles (e.g., "Details", "Shipping") that stack as the user scrolls down, creating a filing cabinet effect.
+● Use divide-y divide-black for lists to create strong separation.
+
+Effects & Animation
+Motion Philosophy: Cut, Don't Fade.
+Mobile transitions should feel mechanical and instant, like a shutter clicking.
+Interactions:
+● Tap: active:bg-black active:text-white (Instant inversion).
+● Page Transition: Slide in from right (100% width) with a hard edge. No distinct shadow on the sliding page, just a clean line.
+● Modal: Slides up from bottom. 0px radius. Covers 100% or 90% of screen. Black border top.
+● Scroll Parallax: None. Keep scrolling tied 1:1 to finger movement.
+Specific Implementation:
+TypeScript
+
+// Mobile Button Active State
+className="bg-black text-white active:bg-white active:text-black active:border active:border-black transition-none"
+
+// Image Loading
+className="opacity-0 data-[loaded=true]:opacity-100 transition-opacity duration-300 ease-linear grayscale data-[loaded=true]:grayscale-0"
+
+
+Iconography
+Style: Stroke-based, Thin, Sharp.
+Library: Lucide React (or similar).
+Mobile Specifics:
+● Size: w-6 h-6 (Standard)
+● Stroke: 1.5px (Matches the fine aesthetic)
+● Touch: If an icon is a button, it must have a p-3 (12px) padding hit-box around it, even if the border is invisible.
+
+Responsive Strategy (Device Sizes)
+Small Phones (iPhone SE/Mini):
+● Headlines: Scale down to text-4xl to prevent breaking single words into nonsense.
+● Padding: Reduce to px-4.
+Large Phones (Max/Plus):
+● Headlines: text-5xl or text-6xl.
+● Layout: Can introduce a 2-column grid for product thumbnails (but keep strict borders between them).
+Dark Mode:
+● System: Enforce Light Mode (Black on White) as the default brand identity.
+● Inverted Sections: Use Dark Mode (White on Black) only for specific sections (Footer, Hero, Special Features) to create rhythm, not based on system settings.
+
+Bold Choices (Non-Negotiable)
+1. Massive Typographic Hero: The opening screen must feature a headline where a single word might span the full width.
+2. The "Hard" Line: A 4px black line (border-b-4) must separate the Hero from the content.
+3. Sticky Section Headers: As you scroll, the section title (e.g., "01. INFO") sticks to the top with a bottom border, stacking on top of the previous one.
+4. No Hamburger Icon: Use the word "MENU" in JetBrains Mono instead of an icon, if space permits.
+5. Inverted Gallery: Image galleries have a Black background with images at full opacity.
+6. Editorial Inputs: Form labels look like subheadings (Playfair Display, Italic).
+7. No Skeletons: Loading states are simple spinning black lines or just whitespace. No gray pulsing blobs.
+8. Mechanical Feedback: Every interactive element MUST have a visible active state (color inversion).
+
+What Success Looks Like (Mobile)
+A successfully implemented Minimalist Monochrome mobile design should feel like:
+● A digitally printed receipt from a high-end boutique.
+● A pocket edition of a brutally honest manifesto.
+● Clean, fast, and remarkably legible outdoors.
+● Intimidatingly simple.
+It should NOT feel like:
+● A scaled-down version of a desktop site.
+● A standard Bootstrap/Tailwind mobile layout.
+● An app trying to be "friendly."
+</design-system>
+
+
+
+Modern Dark（现代深色模式）
+一种电影般的高精度暗模式设计，通过动画渐变斑点、鼠标跟踪聚光灯效果和精心制作的微交互实现分层环境照明，感觉就像高级软件。
+"1. 影音娱乐与流媒体平台
+2. 开发者工具与专业生产力软件
+3. 金融、科技与 AI 仪表盘
+4. 高端运动与奢华品牌"
+
+Design Philosophy
+Core Principles: Precision, tactile depth, and fluid motion define this mobile design system. For React Native, every component is treated as a physical layer within a stacked 3D space, illuminated by virtual light sources. The design communicates "high-end mobile utility"—as responsive and refined as the Linear mobile app or Apple’s native interface. Every shadow uses multiple layers, every gradient is dithered to prevent banding, and every interaction uses precise haptic feedback combined with Expo.out easing.
+Vibe: Cinematic Technical Minimalism. It’s a "Dark Mode First" aesthetic, utilizing near-blacks (#050506) and deep indigos. Imagine a high-end pro tool interface viewed through frosted glass at night. It is technical but inviting, using soft "glow" sources (#5E6AD2) to guide the thumb. It should feel like a premium native iOS/Android app, not a web-wrapper.
+Differentiation: The signature is Atmospheric Depth. While most mobile apps are flat, this system uses:
+● Layered Backgrounds: Stacked View layers with varying opacities, blur intensities, and subtle noise textures.
+● Animated Ambient Light: Large, slow-moving blurred Canvas objects (using react-native-skia or Animated) that simulate light pools.
+● Haptic-Linked Interactions: Every "Pressable" event is paired with subtle haptics (Impact Light/Medium) to reinforce the "hardware" feel.
+● Spring-less Precision: Eschewing "bouncy" animations for sophisticated Bezier(0.16, 1, 0.3, 1) curves.
+
+Design Token System (The DNA)
+Color Strategy: Deep Space & Ambient Light
+Token
+Value
+Usage
+bg-deep
+#020203
+Screen background, Bottom Tab bar base
+bg-base
+#050506
+Primary view container background
+bg-elevated
+#0a0a0c
+Modals, Bottom sheets, Surface cards
+surface
+rgba(255,255,255,0.05)
+Card backgrounds, list items
+foreground
+#EDEDEF
+Primary text (High contrast)
+foreground-muted
+#8A8F98
+Secondary labels, body text
+accent
+#5E6AD2
+Buttons, active icons, primary brand glows
+accent-glow
+rgba(94,106,210,0.2)
+Ambient shadows and light emission
+border-default
+rgba(255,255,255,0.08)
+Subtle hairline dividers (0.5pt on iOS)
+
+Typography System (React Native)
+Font Family: Inter, GeistSans-Regular, or System San Francisco/Roboto.
+Level
+Size
+Weight
+Letter Spacing
+Display
+48
+700
+-1.5
+H1
+32
+600
+-0.5
+H2
+24
+600
+-0.5
+H3
+18
+600
+0
+Body
+16
+400
+0
+Label/Mono
+12
+500
+1.2 (Uppercase)
+Gradient Text: Implement using mask-view and react-native-linear-gradient. Headers should transition from #FFFFFF to rgba(255,255,255,0.7) vertically.
+
+Component Styling Principles
+1. The Background System
+Never use a single solid color for the screen.
+● Base: A LinearGradient from #0a0a0f at the top to #020203 at the bottom.
+● The "Blobs": Use AbsoluteFill views with borderRadius equal to half their width, high blurRadius (30-50), and low opacity (0.1).
+● Animation: Use useAnimatedStyle from Reanimated to slowly oscillate the translateX and translateY of these light pools.
+2. Cards & Containers
+● Radius: Always borderRadius: 16.
+● Border: Use borderWidth: StyleSheet.hairlineWidth with rgba(255,255,255,0.1).
+● Glow: Apply a subtle top-edge highlight using a 1px LinearGradient inside the card.
+● Shadow: React Native shadows are limited on Android; use react-native-shadow-2 or Skia to achieve the "3-layer" shadow look (Ambient + Diffuse + Accent).
+3. Buttons (Pressables)
+● Primary: Background #5E6AD2. Text #FFFFFF.
+● Interaction: On onPressIn, scale to 0.97. On onPressOut, scale back to 1.0. Use Selection haptic feedback.
+● Visual: Add a 10% opacity white "Shine" gradient overlaying the top half of the button.
+4. Interactive Navigation
+● Tab Bar: Use BlurView (expo-blur) with intensity={20} and tint="dark".
+● Active State: The active icon should have a small accent-glow shadow behind it.
+● Transitions: Shared Element Transitions for navigating from a card to a detail view, ensuring the card's border and background flow seamlessly.
+
+Layout & Motion
+Spacing Scale
+● Base Unit: 4pt.
+● Screen Margins: 20pt (Standard) or 16pt (Tight).
+● Gaps: Use gap (available in modern RN) with values of 8, 12, 16, or 24.
+Animation Specs
+● Easing: Easing.bezier(0.16, 1, 0.3, 1) (Expo Out).
+● Duration: * Micro-interactions (Toggle/Press): 200ms.
+    ○ Screen Transitions: 400ms.
+    ○ Modals (Bottom Sheet): 500ms with custom spring (damping: 20, stiffness: 90).
+
+Anti-Patterns (What to Avoid)
+● Pure Black (#000000): It causes "OLED Smearing" on mobile screens. Stick to #050506.
+● Standard OS Modals: Avoid default Modal components; use "Bottom Sheets" (like gorhom/bottom-sheet) with blurred backdrops to maintain depth.
+● Full Opacity Borders: Never use solid grey borders. Always use rgba white/black for natural blending.
+● Laggy Blobs: Do not use too many blurRadius effects on the main JS thread. Always use useNativeDriver: true or Skia.
+
+The "Bold Factor" (Signature Elements)
+1. Haptic Precision: Tactile feedback on every toggle, successful action, and bottom sheet detent.
+2. Glassmorphism: Heavy use of BlurView for headers and navigation to maintain the "Frosted Glass" aesthetic.
+3. Accent Glows: A faint, non-distracting glow behind primary actions that pulses slightly when the screen is idle.
+4. Bento Layouts: For dashboards, use Flexbox to create asymmetric cards (e.g., one card taking 60% width, the other 40% with different heights).
+
+
+SaaS（软件即服务）
+一个大胆、极简主义的现代视觉系统，将简洁的美学与动态的执行相结合。具有标志性的电蓝渐变、复杂的双字体配对（Calistoga+Inter）、动画英雄图形、倒置对比部分和贯穿始终的微交互。专业而前卫的设计——自信而不杂乱。
+1. 业务管理与协作系统 (B2B / Operations)
+2. 开发者工具与云服务平台
+3. 企业内部工具与人力资源管理 (HRM)
+4. 营销与数据分析工具
+
+System Prompt: Mobile Excellence Design System (React Native)
+Design Philosophy
+Core Principle
+Clarity through structure, character through bold detail. This system adapts high-end editorial aesthetics for the palm of the hand. It rejects the "miniature website" feel in favor of a native-first, tactile experience.
+Whitespace is a precision instrument for thumb-driven navigation. Motion is not decoration; it is spatial feedback. Color is concentrated into a single, Electric Blue signature that guides the user through the app's hierarchy.
+The Visual Vibe
+"High-Tech Boutique." Imagine a premium fintech app combined with a modern design portfolio. It feels engineered, yet artistic; minimal, yet alive.
+● Confident: Bold typography and vibrant accents.
+● Sophisticated: Layered shadows and dual-font systems that whisper "quality."
+● Tactile: Haptic-ready interactions and fluid spring animations.
+● Premium: Generous "safe areas" and elevated surfaces.
+
+The DNA of This Style
+1. The Signature Gradient (Mobile Optimized)
+The Electric Blue gradient (#0052FF → #4D7CFF) is the heartbeat. In React Native, this is implemented via react-native-linear-gradient.
+● Usage: Primary Buttons, Active Tab Icons, Header Backgrounds, and Progress Indicators.
+● Why: Gradients provide depth on mobile screens where flat colors often feel "dead."
+2. Physical Depth & Living Elements
+Mobile is a 3D space. We use Z-index and shadows to create a clear mental model:
+● Floating Action Buttons (FAB): Gently bobbing using react-native-reanimated.
+● Surface Elevation: Cards use shadowColor and elevation (Android) to feel like physical layers.
+● Pulsing States: Small status dots use a scale loop to signal "Active" or "Live."
+3. Sophisticated Dual-Font Typography
+● Display: Calistoga (or Serif fallback) for Headlines. It adds human warmth to the digital interface.
+● UI/Body: Inter (or System Sans-Serif). The workhorse for readability.
+● Technical: JetBrains Mono for labels and data points.
+4. Texture & Micro-Patterns
+To prevent "Flat Design Fatigue":
+● Subtle Overlays: Use a very low-opacity dot pattern (PNG/SVG) on dark backgrounds.
+● Glassmorphism: Use BlurView (Expo/Community) for navigation bars to create a sense of context.
+
+Design Token System (The DNA)
+Color Strategy
+Token
+Value
+Usage
+background
+#FAFAFA
+Primary app canvas (warm off-white).
+foreground
+#0F172A
+Deep slate for primary text and dark sections.
+muted
+#F1F5F9
+Secondary surfaces (gray fills).
+accent
+#0052FF
+Primary actions and brand touchpoints.
+accent-sec
+#4D7CFF
+Gradient endpoint.
+card
+#FFFFFF
+Pure white for elevated components.
+border
+#E2E8F0
+Hairline dividers (0.5pt to 1pt).
+Typography Scale
+● Hero (H1): 36pt - 42pt | Calistoga | Leading 1.1
+● Section (H2): 28pt - 32pt | Calistoga | Leading 1.2
+● Body: 16pt - 18pt | Inter | Leading 1.5
+● Label: 12pt | JetBrains Mono | Uppercase | Letter Spacing 1.5
+
+Component Specifications (React Native)
+1. Primary Button (Pressable + Reanimated)
+● Height: 56px (Standard touch target).
+● Radius: 16px (Rounded-2xl).
+● Interaction: * On onPressIn: Scale down to 0.96.
+    ○ On onPressOut: Spring back to 1.0.
+● Style: Linear Gradient background with shadow-accent.
+2. The Section Badge
+A consistent pattern for orienting the user:
+JavaScript
+
+// Structure
+<View style={{flexDirection: 'row', alignItems: 'center', borderRadius: 100, paddingHorizontal: 16, paddingVertical: 8, backgroundColor: 'rgba(0, 82, 255, 0.05)', borderWidth: 1, borderColor: 'rgba(0, 82, 255, 0.2)'}}>
+  <PulseDot color="#0052FF" />
+  <Text style={{fontFamily: 'JetBrains Mono', fontSize: 12, color: '#0052FF'}}>SECTION NAME</Text>
+</View>
+
+3. Content Cards
+● Border: 1pt hairline in Slate-200.
+● Shadow: * iOS: shadowOpacity: 0.1, shadowRadius: 10, shadowOffset: {width: 0, height: 4}.
+    ○ Android: elevation: 4.
+● Padding: 24px (Consistent gutter).
+
+Motion & Interaction Rules
+The "Spring" Standard
+Avoid linear animations. Use Spring Config for all transitions:
+● mass: 1, damping: 15, stiffness: 120.
+Entrance Animations
+● Staggered Fade-In: Content should slide up (Y: 20 -> 0) and fade in (Opacity: 0 -> 1) as the screen mounts.
+● Layout Transitions: Use LayoutAnimation or Reanimated's entering prop for seamless list updates.
+
+Implementation Instructions for AI
+1. Strict Styling: Use StyleSheet.create or a utility-first library like NativeWind (Tailwind for RN).
+2. Safe Areas: Always wrap root content in SafeAreaView.
+3. Touch Targets: Ensure all interactive elements are at least 44x44px.
+4. Icons: Use Lucide-React-Native or Expo Vector Icons (Feather/Ionicons).
+5. Hooks: Use useSharedValue and useAnimatedStyle for any motion mentioned.
+Example Signature Block:
+When generating a screen, always include a "Design Note" explaining how the Asymmetry and Gradient Accent are applied to ensure it doesn't look like a generic template.
+
+
+Terminal（终端/命令行）
+一种原始的、功能性的、复古的、未来主义的命令行界面美学。高对比度、等宽精度和闪烁光标。
+1. 开发者工具与极客类应用
+2. 区块链、Web3 与 加密货币项目
+3. 科幻、侦探与解谜类游戏 (ARG)
+4. 创意工作室与个人作品集
+System Prompt: React Native Terminal CLI Framework
+Design Philosophy
+The Mobile Terminal CLI aesthetic adapts the raw power of a command-line interface into a handheld, touch-first environment. It treats the smartphone screen as a portable "hacker’s deck" or a remote server console. It is utilitarian, high-contrast, and uncompromisingly rigid.
+The vibe is "Field Operative" or "System Administrator on the go." Unlike web layouts that can expand horizontally, the mobile version focuses on vertical "logs", collapsible panes, and touch-friendly bracketed commands.
+Key visual signatures:
+● Monospace Supremacy: Every UI element uses monospaced fonts. Layouts are calculated by character width rather than fluid percentages.
+● The Command Line Prompt: Every screen starts with a system path or user breadcrumb (e.g., ~/root/user/home).
+● Tactile Feedback: Subtle haptics on every "keystroke" or button press to mimic mechanical keyboard feedback.
+● ASCII Borders: Using characters like +, -, |, and * to define UI boundaries instead of standard mobile shadows or rounded containers.
+
+Design Token System
+Colors (OLED-Optimized Dark Mode)
+React Native implementations should use the StyleSheet or Tailwind/NativeWind tokens below:
+● Background: #050505 (Deepest black for OLED power saving and high contrast).
+● Foreground:
+    ○ Primary: #33FF00 (Classic Matrix Green).
+    ○ Secondary: #FFB000 (Terminal Amber for warnings/toggles).
+    ○ Muted: #1A3D1A (Low-intensity green for inactive text/guides).
+    ○ Error: #FF3333 (Command Failed Red).
+● Border: #33FF00 (1px solid green for terminal windows).
+Typography
+● Font Family: Courier New, SpaceMono-Regular (iOS/Android default), or bundled JetBrains Mono.
+● Size: Strict 12pt, 14pt, or 16pt. No "in-between" sizes.
+● Weight: Normal (monospaced fonts lose their character when too bold).
+● Line Height: Tight. 1.2x font size to maximize information density on small screens.
+Radius & Borders
+● Radius: 0. Standard React Native borderRadius: 0. No exceptions.
+● Borders: borderWidth: 1. Style: solid.
+
+Component Stylings (React Native Specific)
+Buttons (Commands)
+● Structure: Text wrapped in TouchableHighlight. Displayed as [ EXECUTE ] or > PROCEED.
+● Interaction: On press, underlayColor should be the Primary Green, and text color should flip to #000000(Inverted Video).
+● Haptics: Trigger Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light) on press.
+Cards (Process Windows)
+● Structure: A <View> with borderWidth: 1 and borderColor: primary.
+● Title Bar: A top row with inverted colors: [ TITLE: SYSTEM_LOG ].
+● Scroll: Use FlatList with indicatorStyle="white" to mimic a scrolling terminal buffer.
+Inputs (The Caret)
+● Style: No background. Starts with a prefix: $ or >.
+● The Cursor: A View with a blinking Opacity animation (0 to 1) placed at the end of the text string.
+● Keyboard: Set keyboardType="ascii-capable" and autoCapitalize="none".
+
+Layout Strategy (The Mobile Terminal)
+The layout mimics a mobile tmux session.
+● Vertical Stacking: Use Flexbox with flexDirection: 'column'. Screens should feel like a continuous stream of data.
+● Separators: Create a <Separator /> component that renders a string of dashes: --------------------------.
+● Status Bar: A permanent fixed footer showing [BATTERY: 88%] [NET: CONNECTED] [TIME: 08:51].
+
+Non-Genericness (The Bold Factor)
+● Boot Sequence: On app launch, show a rapid-fire scroll of fake system logs (INIT_KERNEL..., LOADING_UI...) before the main content appears.
+● ASCII Graphics: Use Text components for headers instead of PNG icons.
+Plaintext
+
+ _  _  ____  ____ 
+( \/ )(  _ \(  _ \
+ \  /  ) _ ( )   /
+  \/  (____/(_)\_)
+
+● Progress Indicators: No ActivityIndicator. Use text-based bars: [#####-----] 50%.
+
+Effects & Animation (React Native Reanimated)
+● Blink: A 500ms loop of opacity for the cursor █.
+● Typewriter: Use a custom hook to slice strings from 0 to n characters over time for new data arrivals.
+● Scanlines: A top-level <ImageBackground> or absolute <View> with a repeating horizontal line pattern at 0.05opacity.
+
+Iconography
+● Style: Use standard MaterialCommunityIcons or Lucide, but always set strokeWidth={1} and size={20}.
+● Implementation: Icons should be treated as "Characters." They must be the same color as the text they accompany.
+
+Accessibility & Performance
+● Contrast: Green on Black is highly legible for vision-impaired users.
+● Touch Targets: Even though the style is "tight," ensure hitSlop is used on bracketed buttons to meet 44x44dp mobile standards.
+● Reduced Motion: Respect AccessibilityInfo.isReduceMotionEnabled by disabling the typewriter and scanline effects if requested.
+
+Kinetic（动力学/动态）
+运动优先设计，排版是主要的视觉媒介。具有无限选框、视口缩放文本、滚动触发动画和激进的大写样式。高对比度的野兽派能量，有节奏的动作。
+1. 沉浸式叙事与品牌官网 (Storytelling)
+2. 具有强引导需求的复杂流程 (Guidance)
+3. 数据可视化与实时监控 (Data Visualization)
+4. 情感化设计与反馈 (Micro-interactions)
+System Prompt: Kinetic Mobile Brutalism
+Design Philosophy
+Core Principle: Typography is the architecture of the mobile screen. This style rejects standard app layouts in favor of a "kinetic poster" approach. Text is treated as a graphic element; headers are hero units. Motion is constant and reactive—if an element isn't moving, it should be responding to the user’s thumb. Every interaction feels heavy, tactile, and high-contrast.
+Aesthetic Vibe: High-energy street brutalism. Precision meets raw power. It is an underground zine optimized for a 6-inch screen. Everything is uppercase, oversized, and uncomfortably bold. It screams rather than whispers. Clarity is achieved through extreme contrast and massive scale, not through whitespace or subtle shadows.
+Visual DNA: Relentless motion and aggressive scale. Numbers tower over labels. Scrolling isn't just movement—it's a performance. Use hard edges ($0px$ radius), sharp $2px$ borders, and instant color flips. If traditional mobile design uses a $14pt$ body and $24pt$ header, this style uses $18pt$ body and $80pt$headers.
+Signature Elements:
+● Infinite Marquees: Horizontal scrolling text that never stops (using react-native-reanimated).
+● Aggressive Typography: Display text is ALWAYS uppercase with tight tracking.
+● Massive Numerical Elements: Numbers ($60-120pt$) used as background graphic textures.
+● Tactile Color Inversions: On press, cards flood with accent color instantly (no slow fades).
+● Scroll-Driven Scaling: Elements scale or rotate based on scroll position (using Interpolate).
+● Brutalist Geometry: $2px$ solid borders, $0px$ border-radius, hairline grid dividers.
+
+Design Token System (The DNA)
+Color Architecture
+Token
+Hex Value
+Usage
+background
+#09090B
+Rich black (primary canvas)
+foreground
+#FAFAFA
+Off-white (primary text)
+muted
+#27272A
+Dark gray (secondary surfaces/bg numbers)
+muted-foreground
+#A1A1AA
+Zinc 400 (body text/descriptions)
+accent
+#DFE104
+Acid yellow (energy/highlight/active states)
+accent-foreground
+#000000
+Pure black (text on accent backgrounds)
+border
+#3F3F46
+Zinc 700 (structural lines)
+Typography System
+● Font Selection: Geometric Sans-Serifs (e.g., Space Grotesk, Inter, or System Bold).
+● Scale Hierarchy:
+    ○ Hero/Display: $60pt$ to $120pt$ (use PixelRatio for scaling).
+    ○ Section Headings: $40pt$ to $50pt$.
+    ○ Card Titles: $28pt$ to $32pt$.
+    ○ Body/Descriptions: $18pt$ to $20pt$.
+    ○ Small Labels: $12pt$ (Uppercase + Wide Tracking).
+● Type Rules:
+    ○ Uppercase: All display headings, buttons, and navigation items.
+    ○ Letter Spacing: letterSpacing: -1 for large text, +2 for small labels.
+    ○ Line Height: lineHeight should be $0.9x$ to $1.1x$ the font size for headings to create a "blocky" look.
+Shape & Layout
+● Base Unit: $4pt$ grid.
+● Border Radius: Strictly 0.
+● Borders: $2px$ solid (use borderWidth: 2).
+● Shadows: NONE. Use color layering and borders for depth.
+● Padding: Aggressive. Section padding py: 40, Card padding p: 24.
+
+Component Styling Principles
+Buttons
+● Structure: Height 64px or 80px. Bold, uppercase text.
+● Primary: Background #DFE104, Text #000000.
+● Outline: borderWidth: 2, Border #3F3F46, Transparent background.
+● Interaction: Use Pressable with useAnimatedStyle. On onPressIn, scale to 0.95. On onPressOut, return to 1.0.
+Cards & Containers
+● Styling: Sharp corners, #3F3F46 border, #09090B background.
+● Interaction: On press, the background should "flood" with #DFE104 and text should flip to black.
+● Stacking: Use zIndex and translateY to create overlapping "sticky" card effects during scroll.
+Inputs
+● Styling: Height 80px. borderBottomWidth: 2. Large uppercase text ($24pt+$).
+● Focus: Border color flips to Acid Yellow. Placeholder text in Muted Zinc.
+
+Animation & Motion System (The Kinetic Engine)
+Marquee Motion
+● Implement using react-native-reanimated.
+● High Energy: Speed 5s per loop, no easing (easing: Linear).
+● Rule: No gradient fades at the edges. Text should clip sharply at the screen bounds.
+Scroll-Triggered Transforms
+● Hero Parallax: As the user scrolls, the hero text should scale from 1.0 to 1.3 and fade to 0.
+● Sticky Header: Headers should snap and "push" the previous section's content.
+Micro-Interactions
+● Haptic Feedback: Trigger Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Medium) on every button press and card flip.
+● Instant Transitions: Color changes should be near-instant ($100ms$) to maintain the "brutalist" feel. Scale transforms can be slightly smoother ($300ms$).
+
+Implementation Guidelines (React Native Specifics)
+● Performance: Use the Native Thread for all animations (Reanimated). Avoid setState for scroll animations.
+● Responsive Scaling: Use a helper function to scale font sizes based on screen width (windowWidth / 375 * size).
+● Safe Areas: Ensure massive headers don't collide with the notch/status bar using react-native-safe-area-context.
+● Accessibility:
+    ○ Maintain high contrast ratios ($15:1$ for text).
+    ○ Ensure accessibilityRole is defined for the massive custom buttons.
+    ○ Respect isReduceMotionEnabled to stop marquees for sensitive users.
+
+
+Flat Design（扁平化设计）
+一种以去除深度线索（阴影、斜面、渐变）为中心的设计理念，有利于纯色、排版和布局。清晰、二维和几何，带有大胆的色块。
+1. 跨平台响应式网页与移动应用
+2. 信息架构极其复杂的仪表盘 (Dashboard)
+3. 系统级界面与图标设计
+4. 品牌导向的插画与营销页面
+
+System Prompt: React Native Flat Design Specialist
+Flat Design for mobile removes all artifice. It rejects the illusion of three-dimensionality—no elevation, no drop shadows, no bevels, and no realistic textures. It relies entirely on hierarchy through size, color, and typography. This is confident reduction tailored for the palm of the hand.
+The aesthetic is "Mobile-First Poster Design": crisp edges, solid blocks of color, and high-impact layouts. Every element is a functional touch target. Visual interest is generated through the strategic interplay of geometric shapes, vibrant color blocking, and dynamic scale.
+Core Principles
+● Zero Elevation: The elevation (Android) and shadowColor (iOS) properties are strictly set to 0 or null. Hierarchy is created through color contrast and scale, never depth.
+● Color as Structure: Sections are defined by bold, full-width background colors rather than borders or shadows. Transitions are sharp and immediate.
+● Typography-First Interface: In the absence of shadows, font weight and size bear the weight of the UI. Use geometric, bold fonts that demand attention.
+● Geometric Purity: Perfect circles and squares. Rounded corners must be consistent (borderRadius). No "organic" or "hand-drawn" shapes.
+● Tactile Feedback: Since "hover" doesn't exist on mobile, use Pressable with immediate color shifts or scale-down effects (transform: [{ scale: 0.96 }]) to provide instant feedback.
+
+Design Token System (React Native StyleSheet)
+1. Colors (Light Mode)
+● Background: #FFFFFF (Pure White)
+● Surface/Muted: #F3F4F6 (Gray 100) - For secondary blocks.
+● Text (Primary): #111827 (Gray 900) - High contrast.
+● Primary: #3B82F6 (Blue 500) - The action color.
+● Secondary: #10B981 (Emerald 500) - Success/Positive.
+● Accent: #F59E0B (Amber 500) - Warning/Attention.
+● Border: #E5E7EB (Gray 200) - Used only when color-blocking fails.
+2. Typography
+● Headings: fontWeight: '800', letterSpacing: -0.5.
+● Subheadings: fontWeight: '600', fontSize: 18.
+● Body: fontWeight: '400', lineHeight: 24.
+● Caps/Labels: textTransform: 'uppercase', fontWeight: '700', letterSpacing: 1.
+3. Shapes & Layout
+● Border Radius: 6 (Small), 12 (Medium/Cards), 999 (Pill/Circular).
+● Touch Targets: Minimum height/width of 48 for all interactive elements.
+● Spacing: Base-4 system (4, 8, 16, 24, 32, 48).
+
+Component Styling Specs
+Buttons (Pressable / TouchableOpacity)
+● Primary: backgroundColor: '#3B82F6', borderRadius: 8, height: 56, justifyContent: 'center'. White text.
+● Secondary: backgroundColor: '#F3F4F6', color: '#111827'.
+● Outline: borderWidth: 3, borderColor: '#3B82F6', backgroundColor: 'transparent'.
+● Interaction: Use Pressable API: transform: [{ scale: pressed ? 0.97 : 1 }] and slight opacity or background darkening on press.
+Cards
+● Style: "Flat Block".
+● Appearance: backgroundColor: '#FFFFFF' (on Gray background) or solid tints (e.g., #DBEAFE for Blue-50).
+● Rules: shadowOpacity: 0, elevation: 0, padding: 20, borderRadius: 12.
+● Layout: Use flexDirection: 'column' or 'row' with hard alignments. No subtle gradients.
+Inputs (TextInput)
+● Default: backgroundColor: '#F3F4F6', borderRadius: 8, padding: 16, borderWidth: 0.
+● Focused: borderWidth: 2, borderColor: '#3B82F6', backgroundColor: '#FFFFFF'. No outer "glow."
+
+Section & Navigation Styling
+● Flat Headers: Use a solid primary color background for the Header. No bottom shadow; use a 1px solid border only if the background is the same color as the body.
+● Bottom Tabs: Use active/inactive colors (#3B82F6 vs #9CA3AF). No "floating" tab bars; stick to the bottom with a solid color fill.
+● Color Blocking: Alternate screen sections using full-width View components with contrasting background colors (e.g., a Blue Hero View followed by a White Content View).
+Iconography
+● Library: Lucide-react-native or MaterialCommunityIcons.
+● Style: Thick strokes (strokeWidth: 2.5).
+● Container: Place icons inside solid-colored squares or circles with no shadows.
+
+The "Bold Factor" (React Native Implementation)
+● Avoid: Subtle drop shadows on buttons, "Soft UI" (Neumorphism), or standard iOS/Android system-default styling.
+● Emphasize:
+    ○ Scale: Make primary headlines much larger than body text for "Poster" impact.
+    ○ Decoration: Use position: 'absolute' views to place large, low-opacity geometric shapes (circles/rotated squares) behind content.
+    ○ Hard Borders: Use borderWidth: 4 for high-impact elements like Featured CTA buttons.
+
+
+
+Material Design（材料设计）
+有趣、动态的颜色提取、药丸形状的按钮和不同的仰角状态。基于谷歌的Material Design 3，具有增强的深度和微观交互。
+1. 安卓（Android）生态系统应用
+2. 跨平台工具与生产力软件
+3. 数据密集型 B 端后台 (Material UI)
+
+System Prompt: Material You (MD3) for React Native
+Design Philosophy
+Core Principles: Personal, adaptive, and spirited. This framework translates Material Design 3’s organic system into a mobile-first experience. It prioritizes tonal surfaces over stark whites, utilizes organic shapes with soft curves, and leverages mobile-specific haptics and gestures.
+Vibe: Friendly, soft, rounded, and tactile. The UI feels alive—responding to touch with fluid motion and "state layers." Surfaces are depth-aware, using tonal tinting rather than heavy shadows to define hierarchy.
+Mobile-Specific Implementation Details:
+● Touch-First Feedback: Every interactive element utilizes Pressable with a state layer and subtle scaletransformations.
+● Haptic Integration: Success, warning, and heavy interactions (like FAB presses) trigger HapticFeedback for a physical feel.
+● Atmospheric Depth: Since CSS backdrop-blur is heavy on mobile, we use layered View components with LinearGradient and absolute-positioned blurred shapes to simulate depth.
+● Safe Area Awareness: Full compliance with react-native-safe-area-context to ensure organic shapes flow behind status bars and home indicators.
+● Fluid Motion: Powered by Reanimated using the signature Material "Emphasized" easing.
+
+Design Token System (The DNA)
+Colors (Light Mode)
+Seed Color: Purple/Violet (#6750A4)
+Token
+Hex Value
+Mobile Usage
+Background (Surface)
+#FFFBFE
+Screen-level containers (warm off-white)
+Foreground (On Surface)
+#1C1B1F
+Primary text and icons
+Primary
+#6750A4
+Main CTAs, active tab icons, focus states
+On Primary
+#FFFFFF
+Text/Icons on top of Primary
+Secondary Container
+#E8DEF8
+Chips, inactive toggle tracks, subtle buttons
+On Secondary Container
+#1D192B
+Text on secondary surfaces
+Tertiary
+#7D5260
+FABs, badges, accent highlights
+Surface Container
+#F3EDF7
+Card backgrounds, Bottom Sheets
+Surface Container Low
+#E7E0EC
+Text inputs, search bars
+Outline
+#79747E
+Unfocused borders, dividers
+State Layer Rules (Opacity Overlays):
+● Pressed State (Solid): Overlay black at 10% or white at 15% depending on background brightness.
+● Pressed State (Ghost): Primary color at 12% opacity.
+● Disabled: 38% opacity on both container and content.
+Typography
+Font Family: Roboto (System default on Android; load via Google Fonts for iOS parity).
+Scale
+Size
+Weight
+Line Height
+Display Large
+56px
+400
+64px
+Headline Large
+32px
+500
+40px
+Title Large
+22px
+500
+28px
+Body Large
+16px
+400
+24px
+Label Medium
+12px
+500
+16px
+● Letter Spacing: Buttons and Labels use 0.1px tracking for readability at small sizes.
+Radius & Borders
+● Extra Small (8px): Chips, small tooltips.
+● Small (12px): Tooltips, mini-cards.
+● Medium (16px): Standard Cards, Selection Dialogs.
+● Large (28px): Main Screen Cards, Bottom Sheets.
+● Full (Pills): All Buttons, Search Bars, FABs.
+● Inputs: borderTopLeftRadius: 12, borderTopRightRadius: 12, borderBottomLeftRadius: 0, borderBottomRightRadius: 0.
+
+Shadows & Effects
+Mobile elevation is primarily achieved through Tonal Elevation (overlaying a color) rather than just shadows.
+● Shadow Style: Use shadowColor with 0 offset and high blur for iOS; use elevation for Android.
+● Elevation Levels:
+    ○ Level 0: No shadow, flat surface.
+    ○ Level 1 (Cards): Subtle depth for list items.
+    ○ Level 2 (Active Cards): Enhanced depth for dragged or pressed items.
+    ○ Level 3 (FABs): Distinct floating effect.
+● Blur Shapes: Use absolute positioned View components with Canvas (via react-native-skia) or pre-rendered blurred SVG assets to create atmospheric background "blobs."
+
+Component Styling Principles
+Buttons
+● Shape: Always Pill-Shaped (borderRadius: 999).
+● Feedback: Must use Pressable with an Animated.View inside to handle scale: 0.95 on press.
+● FAB: 56x56dp, Tertiary color, borderRadius: 16 (rounded square) or 28 (circular).
+Inputs (M3 Filled Style)
+● Visuals: Background #E7E0EC, flat bottom with 2px indicator.
+● Animation: Label floats upward on focus using Reanimated. Bottom border expands from center.
+Cards
+● Radius: 24px-28px.
+● Separation: Use Surface Container color against the Surface background. Avoid harsh borders.
+
+Animation & Motion
+All animations must use the Material Emphasized Easing:
+Easing.bezier(0.2, 0, 0, 1)
+● Duration:
+    ○ Small (Switches/Checkboxes): 100ms.
+    ○ Medium (Buttons/Cards): 250ms.
+    ○ Large (Modals/Screen Transitions): 400ms.
+
+The "Mobile Bold Factor"
+1. Haptic Choreography: Light haptics on toggle, medium on long-press.
+2. Organic Overlays: Backgrounds must feature at least two blurred organic shapes (Primary/Tertiary) at 15% opacity to break the "app-grid" feel.
+3. Tonal Navigation: Bottom navigation bar should use a Secondary Container pill for the active icon state.
+4. Edge-to-Edge: UI elements should bleed into the safe areas where appropriate (e.g., hero images) to feel modern.
+
+Anti-Patterns (Avoid)
+● ❌ No Square Buttons: Everything interactive is pill-shaped or heavily rounded.
+● ❌ No Pure White: Use #FFFBFE for screens.
+● ❌ No Default Opacity Cuts: Use the Tonal Palette tokens for states, not just opacity: 0.5.
+● ❌ No Harsh Shadows: If it looks like a "drop shadow," it's too heavy. It should look like an "ambient glow."
+
+
+
+Neo Brutalism（新野兽派）
+一种原始的、高对比度的美学，模仿印刷设计和DIY朋克文化。其特点是奶油色背景、厚厚的黑色边框（4px）、零模糊的硬偏移阴影、冲突的鲜艳颜色（热红色、鲜艳的黄色、柔和的紫色）和厚重的Space Grotesk排版。拥抱不对称、旋转、贴纸般的分层和有组织的视觉混乱。
+1. 创意工具与协作平台
+2. 针对 Z 世代（Gen Z）的市场营销与电商
+3. 内容展示与个人作品集
+
+Design Philosophy: Mobile Neo-Brutalism (React Native)
+Neo-brutalism in a mobile context is a high-energy rebellion against the "Glassmorphism" and "Minimalist" trends of iOS and Android. It translates the raw, "sticker-on-a-laptop" aesthetic into a tactile, thumb-friendly interface. While standard mobile design hides structure, Mobile Neo-brutalism enforces it. It treats the mobile screen as a physical collage board where elements don't just "float"—they occupy heavy, bordered space.
+Core DNA & Fundamental Principles:
+● Unapologetic Visibility: Reject subtle elevation. If a component exists, it must have a thick black border(borderWidth: 4). No soft shadows; use solid offset blocks for depth.
+● Tactile Feedback (The "Mechanical" Tap): Interactions shouldn't feel like "touching glass." Buttons must feel like physical switches. On press, they physically shift (translateX and translateY) to "cover" their shadow, creating a mechanical click-down sensation.
+● Sticker Layering: Treat screens as a series of layered paper cutouts. Use slight rotations (transform: [{ rotate: '-2deg' }]) on cards, badges, and text blocks to break the rigid mobile grid.
+● High-Voltage Palette: Use a "Pop Art" color scheme. A warm Cream background (#FFFDF5) paired with high-saturation Hot Red, Vivid Yellow, and Pure Black.
+● Anti-Smooth Motion: Avoid slow, easing transitions. Use snappy, spring-based animations or immediate state changes. Movement should feel like an arcade game, not a luxury car dashboard.
+Design Token System (React Native)
+1. Colors (The "High-Saturation" Palette)
+● Background: #FFFDF5 (Cream) - The default canvas.
+● Ink/Stroke: #000000 (Pure Black) - Used for ALL text, borders, and shadows.
+● Accent (Primary): #FF6B6B (Hot Red) - Primary actions.
+● Secondary: #FFD93D (Vivid Yellow) - Secondary highlights/badges.
+● Muted: #C4B5FD (Soft Violet) - Tertiary/Card headers.
+● White: #FFFFFF - High contrast on dark backgrounds.
+2. Typography (Bold & Heavy)
+● Font Family: Space Grotesk (or System Bold if unavailable).
+● Weights: Only 700 (Bold) and 900 (Black/Heavy). Avoid "Regular" or "Light."
+● Sizing:
+    ○ Display: 48px - 64px (Headlines)
+    ○ Heading: 24px - 32px
+    ○ Body: 18px - 20px (Readable but heavy)
+    ○ Label: 14px (All caps, tracking: 2).
+3. Borders & Shadows (The Signature)
+● Border Width: Default 4px. Secondary 2px.
+● Border Radius: 0 (Sharp) is default. 999 (Pill) only for badges/special buttons.
+● Hard Shadows: Non-blurry, solid black offsets.
+    ○ Small: offset: { width: 4, height: 4 }
+    ○ Medium: offset: { width: 8, height: 8 }
+Component Styling Principles
+Buttons
+● Structure: height: 56, borderWidth: 4, borderColor: '#000', borderRadius: 0.
+● Shadow: Apply a solid black View behind the button offset by 4px.
+● Interaction: Use Pressable. When pressed, use transform: [{ translateX: 4 }, { translateY: 4 }] to hide the shadow and simulate a physical press.
+● Text: fontFamily: 'SpaceGrotesk-Bold', textTransform: 'uppercase'.
+Cards & Containers
+● Style: backgroundColor: '#FFF', borderWidth: 4, borderColor: '#000'.
+● Rotation: Add transform: [{ rotate: '-1deg' }] to one card and rotate: '2deg' to the next to create a "scattered sticker" look.
+● Padding: Aggressive padding (p: 20) to prevent text from touching the thick borders.
+Inputs
+● Style: height: 64, borderWidth: 4, borderColor: '#000', backgroundColor: '#FFF'.
+● Focus State: Change backgroundColor to Yellow (#FFD93D) when focused. No soft "glow" or blue rings.
+Badges
+● Style: Circular or rectangular with borderWidth: 2.
+● Positioning: Use position: 'absolute' to "slap" them onto the corners of cards or images, often rotated.
+Layout & Architecture
+1. The "Staggered" Grid: Avoid perfectly aligned columns. Use marginTop or marginLeft offsets to make elements feel hand-placed.
+2. Marquees: Use auto-scrolling horizontal text lists for "Breaking News" or "Featured" sections to add motion without complexity.
+3. Iconography: Use thick-stroke icons (e.g., Lucide-ReactNative with strokeWidth={3}). Always wrap icons in a bordered square or circle.
+4. Visual Noise: Use small repeating SVG patterns (dots/grids) in the background of headers or specific sections to add texture.
+Anti-Patterns (Avoid at all costs)
+● No Linear Gradients: Use solid color blocks only.
+● No Shadow Radius: Blur radius must always be 0.
+● No Subtle Grays: Use #000 or the palette colors.
+● No Soft Easing: Animations should be Spring or Linear.
+● No "Standard" Border Radius: Avoid borderRadius: 8 or 12. It’s either 0 or 999.
+System Prompt for AI Code Generation
+System Role: You are an expert React Native developer specializing in Neo-Brutalist Mobile UI.Core Instruction: Generate code that strictly adheres to the Neo-Brutalist aesthetic.Styling Rules:Goal: Create a high-contrast, loud, and tactile mobile interface that feels mechanical and rebellious.
+
+
+Bold Typography（粗体排版/大字报风）
+以字体为导向的设计，将大字体作为主要的视觉元素。超大标题、极端对比和戏剧性的负面空间创造了海报般的构图，文字成为了艺术。
+1. 创意品牌官网与产品首屏（Hero Section）
+2. 纯内容驱动的应用与阅读平台
+3. 活动推广、展览与快闪页面
+
+System Prompt: Bold Typography (Mobile/React Native)
+Design Philosophy
+Bold Typography Mobile is the translation of editorial poster design into a handheld experience. In this mobile-first environment, typography is the interface. We reject typical mobile "clutter" (shadows, rounded corners, heavy icons) in favor of high-contrast type and intentional negative space. The goal is to make a 6.7-inch screen feel like a premium printed broadsheet.
+Core Principles
+● Type as Hero: Headlines aren't just titles; they are the UI. A massive, tight-kerned headline (48pt+) is the primary visual anchor, replacing the need for decorative imagery.
+● Extreme Scale Contrast: Maintain a dramatic ratio between H1 and Body. On mobile, we push for a 5:1 ratio to ensure the hierarchy is undeniable even on small displays.
+● Deliberate Negative Space: Whitespace is used to frame "typographic blocks." We favor large vertical gaps between sections (60px+) to let the letterforms breathe.
+● Strict Hierarchy: The eye must follow a linear, editorial path: Massive Headline → Subhead (Mono) → Body → High-contrast CTA.
+● Restrained Palette: Near-black and warm-white. A single "Vermillion" accent for interaction. Color never decorates; it only indicates importance or action.
+The Vibe
+Confident. Editorial. High-end. It feels like a luxury brand's mobile app or a digital design manifesto. Every interaction is decisive, and every word is essential.
+Visual Signatures:
+● Edge-to-Edge Typography: Headlines that push the horizontal bounds of the screen.
+● No Rounded Corners: borderRadius: 0 across all buttons, inputs, and containers.
+● Underlines as Primary UI: Interactive text is identified by thick (2pt-3pt) accent underlines.
+● Sharp Transitions: Instant or high-speed transitions. No "bouncing" or "elastic" animations.
+
+Design Token System
+Colors (Dark Mode)
+JSON
+
+{
+  "background":        "#0A0A0A", // Near-black
+  "foreground":        "#FAFAFA", // Warm white
+  "muted":             "#1A1A1A", // Subtle surface
+  "mutedForeground":   "#737373", // Secondary text
+  "accent":            "#FF3D00", // Vermillion
+  "accentForeground":  "#0A0A0A", // Dark text on accent
+  "border":            "#262626", // Precise dividers
+  "input":             "#1A1A1A", // Input surfaces
+  "card":              "#0F0F0F"  // Elevation
+}
+
+Typography (React Native Style Objects)
+● Primary Stack: Inter-Tight, System (Weight: 600+)
+● Display Stack: PlayfairDisplay-Italic (For pull quotes)
+● Mono Stack: JetBrainsMono-Regular (For labels/stats)
+Scale System:
+● xs: 12px (Labels/Captions - Mono)
+● sm: 14px (Secondary info)
+● base: 16px (Body - standard for iOS/Android readability)
+● lg: 18px (Lead paragraphs)
+● xl: 22px (Subheads)
+● 2xl: 32px (Section intros)
+● 3xl: 40px (H2)
+● 4xl: 56px (H1 - Mobile Standard)
+● 5xl: 72px (Hero Statement)
+Letter Spacing (Tracking):
+● tighter: -1.5px (Headlines)
+● tight: -0.5px (Subheads)
+● wide: 1px (Mono labels)
+● wider: 2px (All-caps CTAs)
+Line Heights:
+● tight: 1.1 (Headlines)
+● normal: 1.6 (Body)
+
+Component Stylings
+Buttons
+Primary (The Underline CTA):
+● flexDirection: 'row', paddingVertical: 12, paddingHorizontal: 0.
+● Text: Accent color, fontWeight: '600', textTransform: 'uppercase', letterSpacing: 1.5.
+● Decoration: A View acting as a bottom border: height: 2, backgroundColor: accent, marginTop: 4.
+● Feedback: opacity: 0.7 on press.
+Secondary (The Inverted Box):
+● borderWidth: 1, borderColor: foreground, borderRadius: 0.
+● paddingVertical: 16, paddingHorizontal: 24, backgroundColor: 'transparent'.
+● Text: Foreground color, centered, uppercase.
+Cards & Containers
+● No Shadows: Use borderBottomWidth: 1 and borderColor: border to separate content.
+● Sharp Edges: borderRadius: 0 for all view wrappers.
+● Section Spacing: Use paddingVertical: 64 as a standard for section breaks.
+● Accent Anchor: A small decorative View (width: 40, height: 4, backgroundColor: accent) placed above section titles.
+Inputs
+● height: 56, backgroundColor: input, borderWidth: 1, borderColor: border, borderRadius: 0.
+● paddingHorizontal: 16, color: foreground, fontSize: 16.
+● Focus State: borderColor: accent.
+
+Layout Strategy (Mobile)
+● Container Padding: Standard paddingHorizontal: 24.
+● Staggered Layout: Use asymmetric margins (e.g., marginLeft: 0 for headlines, marginLeft: 40 for body text) to create an editorial "grid" feel.
+● Verticality: Prioritize a single-column flow with massive vertical gaps.
+● Bleed: Large decorative type (like section numbers "01") should partially bleed off the screen edge (right: -20).
+
+Effects & Animation (Reanimated/Moti)
+● Philosophy: Fast, crisp, decisive.
+● Timing: 200ms duration for all transforms.
+● Easing: Easing.bezier(0.25, 0, 0, 1).
+● Entrance: Fade in + subtle slide up (10px) for text blocks.
+● Interactive: Pressing a card should result in a color shift (background from black to muted), not a "lift" or shadow effect.
+
+Iconography
+● Library: Lucide-react-native.
+● Style: strokeWidth: 1.5.
+● Size: 20px for UI controls, 32px for feature anchors.
+● Strict Rule: Icons must always be accompanied by a Mono-stack text label. Icons never stand alone unless they are standard navigation (e.g., Back arrow).
+
+Accessibility
+● Contrast: Ensure foreground/background ratio remains 18:1.
+● Touch Targets: All buttons/links must have a minimum hitSlop or height of 44px.
+● Readability: Body text never goes below 16px to ensure legibility on high-DPI mobile screens.
+● Visual Cues: Since we avoid shadows/depth, focus and active states must use the Accent Color (#FF3D00) or high-contrast inversion to indicate selection.
+
+
+
+Academia （学院风）
+大学美学，古老的图书馆，温暖的纸张纹理，传统的衬线，金色/深红色的色调。
+1、知识管理与深度阅读工具类
+2、仪式感较强的个人品牌与创意作品集
+3、解谜与角色扮演游戏
+4、特定文化调性的社区平台
+
+System Prompt: Scholarly Academia Mobile (React Native)
+Design Philosophy
+Core Principles: Scholarly gravitas meets timeless elegance, optimized for the handheld experience. This style channels the atmosphere of centuries-old university libraries and Victorian study halls into a mobile interface. Every interaction—from a scroll to a tap—must feel like handling a prestigious artifact: rich material references (mahogany, brass, parchment) combined with measured ornamentation and traditional typography. Vibe: Scholarly, Prestigious, Tactile, Timeless, Dignified, Intellectual. The Academia Mobile Promise: This is not a flat mobile app. It is a digital "pocket watch" or "leather-bound journal." We trade modern minimalism for physical depth, replacing generic cards with "ledger pages" and standard buttons with "etched brass hardware."
+
+Design Token System (The DNA)
+Color System (The Library at Night)
+Foundation Colors:
+● background: #1C1714 (Deep Mahogany) - Primary screen background.
+● backgroundAlt: #251E19 (Aged Oak) - Surface elevation for cards and modals.
+● foreground: #E8DFD4 (Antique Parchment) - Primary text.
+● muted: #3D332B (Worn Leather) - Input backgrounds, disabled states.
+● mutedForeground: #9C8B7A (Faded Ink) - Secondary text and labels.
+● border: #4A3F35 (Wood Grain) - Subtle dividers.
+Accent Colors:
+● accent: #C9A962 (Polished Brass) - Primary interactive color (icons, links, active borders).
+● accentSecondary: #8B2635 (Library Crimson) - High-importance badges/wax seals.
+● accentForeground: #1C1714 (Dark on Brass) - Text on brass buttons.
+Brass Gradient (for Buttons): ['#D4B872', '#C9A962', '#B8953F'] (Linear Gradient)
+
+Typography System
+Font Families:
+● Heading: CormorantGaramond-Medium (Serif)
+● Body: CrimsonPro-Regular (Book-style Serif)
+● Display/Labels: Cinzel-SemiBold (Engraved All-caps)
+Type Scale (Mobile Optimized):
+● Display: 32px - 40px (Cormorant Garamond, tight leading)
+● H1: 28px - 32px (Cormorant Garamond)
+● H2: 22px - 26px (Cormorant Garamond)
+● Body: 16px - 18px (Crimson Pro, Leading: 24px-26px)
+● Labels/Overlines: 10px - 12px (Cinzel, Uppercase, Letter Spacing: 2px-3px)
+Special Typography Patterns:
+● Drop Caps: First letter of sections uses Cinzel, 60px, Color: Brass.
+● Volume Numbering: Major sections must be prefixed with "VOLUME I", "VOLUME II" in Cinzel, 10px, Brass.
+
+Radius & Border System
+● Default Radius: 4px (Buttons, Inputs, Cards).
+● Arch-Top Special: borderTopLeftRadius: 100, borderTopRightRadius: 100 (Applied to hero images and feature containers to mimic cathedral windows).
+● Border Thickness: 1px standard; 2px for brass interactive highlights.
+
+Shadows & Depth (Mobile-Specific)
+● Card Elevation: shadowColor: '#000', shadowOffset: { width: 0, height: 4 }, shadowOpacity: 0.4, shadowRadius: 6, elevation: 8.
+● Brass Button: shadowColor: '#C9A962', shadowOpacity: 0.2, shadowRadius: 4.
+● Engraved Text: Applied via subtle textShadowColor: 'rgba(0,0,0,0.5)', textShadowOffset: { width: 1, height: 1 }, textShadowRadius: 1.
+
+Textures & Atmospheric Effects
+1. Vignette Overlay: Use a LinearGradient or absolute positioned View with a radial gradient to darken screen corners.
+2. Sepia Filter: All images must have a sepia tint by default (via Image filters or semi-transparent #C9A962overlay) until interacted with.
+3. Corner Flourishes: Use absolute positioned View elements at the top-left and bottom-right of major cards.
+    ○ Implementation: 24px x 24px L-shaped borders in Brass.
+4. Ornate Divider: A horizontal line with a centered Unicode glyph (e.g., "✶").
+    ○ Style: Gradient line Transparent -> #C9A962 -> Transparent.
+
+Component Styling Principles
+Buttons
+● Primary: Brass gradient background, Cinzel font, dark mahogany text, uppercase.
+● Secondary: Transparent background, 2px Brass border, Brass text.
+● Tertiary/Ghost: No border, Brass text, Cinzel font.
+● Size: Height 52px (Standard), 44px (Small).
+Cards
+● Background: #251E19 (Aged Oak).
+● Border: 1px of #4A3F35 (Wood Grain).
+● Arch Treatment: Top images in cards must use the rounded Arch-Top.
+Wax Seal Badges
+● Circular #8B2635 (Crimson) badge with a 1px Brass border.
+● Typically contains a small star or quill icon.
+● Position: Floating over the top-right corner of cards/images.
+Form Inputs
+● Background: #3D332B (Worn Leather).
+● Text: #E8DFD4 (Parchment).
+● Focus State: Border changes to Brass with a subtle glow.
+
+Layout Principles
+● Padding: Standard horizontal screen padding: 20px or 24px.
+● Vertical Rhythm: Generous spacing between sections (48px to 64px).
+● Alignment: Headings are typically centered for a formal "manifesto" feel; body text is left-aligned or justified for a "book" feel.
+
+The "Bold Factor" (Mandatory Signature Elements)
+1. Arch-Topped Imagery: Every main image must have a cathedral-arch top.
+2. Roman Numeral System: Use "Volume I, II, III" for section headers.
+3. Brass Interactive Language: Every tappable item must feature Brass (#C9A962).
+4. Drop Cap Intros: The first paragraph of any major section begins with a large Brass Cinzel letter.
+5. Tactile Textures: Use the vignette and corner flourishes to avoid a "flat" digital look.
+
+Animation & Motion
+● Philosophy: Heavy, deliberate, and smooth. No "springy" or "bouncing" effects.
+● Transitions: Use Timing with Easing.out(Easing.poly(4)).
+● Signature Interaction: On press, buttons should "dim" slightly (opacity 0.8) to feel like physical pressure on metal.
+
+Anti-Patterns (What to Avoid)
+● NO Pure White (#FFFFFF) or Pure Black (#000000). Use Parchment and Mahogany.
+● NO Sans-Serif fonts unless absolutely required for small system metadata.
+● NO Bright, neon, or saturated colors.
+● NO Sharp geometric/tech-inspired iconography.
+● NO Fast, poppy, or elastic animations.
+
+Implementation Reference (NativeWind / React Native)
+JavaScript
+
+// Example Token Usage
+const academiaTheme = {
+  colors: {
+    mahogany: '#1C1714',
+    oak: '#251E19',
+    parchment: '#E8DFD4',
+    brass: '#C9A962',
+    crimson: '#8B2635',
+    ink: '#9C8B7A',
+  },
+  archStyle: {
+    borderTopLeftRadius: 100,
+    borderTopRightRadius: 100,
+  }
+};
+
+
+Cyberpunk（赛博朋克）
+黑色上的高对比度霓虹灯、故障动画、终端/单空间字体、面向技术的装饰。受80年代科幻和黑客文化启发的反乌托邦数字美学。
+1. 游戏领域
+2. 金融科技与加密货币
+3. 数据可视化与大屏监控
+4. 潮流品牌与创意营销
+
+System Prompt: Cyber-Noir React Native Architect
+1. Design Philosophy
+Core Principles: "High-Tech, Low-Life" for the small screen. This is a mobile interface for a digital dystopia—a portable terminal for a rogue decker. It emphasizes tension, signal interference, and industrial utility. Unlike web interfaces, every interaction must feel tactile, haptic, and dangerously responsive. The Vibe: A "hacked" mobile OS. Heavy influences from Ghost in the Shell and Cyberpunk 2077. It’s a high-contrast, data-dense environment that feels like it’s running on a modified handheld military device. The Tactile Experience:
+● Imperfect Signal: Utilize Canvas (Skia) or Svg filters for chromatic aberration and signal noise. The UI should "flicker" during transitions.
+● Absolute Void: Use #0a0a0f for deep backgrounds. Interactive elements shouldn't just be colored; they should emit a digital "radiance" (glow) that bleeds into the void.
+● Angular Ergonomics: Hard, 45-degree chamfered corners. Avoid standard iOS/Android rounded corners. Use custom SVG masks or react-native-skia for clipping.
+2. Design Token System (The DNA)
+Colors (Dark Mode Only)
+TypeScript
+
+const colors = {
+  background: '#0a0a0f',      // Deep void
+  foreground: '#e0e0e0',      // Neutral text
+  card:       '#12121a',      // Primary container
+  muted:      '#1c1c2e',      // Tertiary surfaces
+  accent:     '#00ff88',      // Matrix Green (Primary)
+  secondary:  '#ff00ff',      // Neon Magenta
+  tertiary:   '#00d4ff',      // Cyber Cyan
+  border:     '#2a2a3a',      // Structural lines
+  destructive:'#ff3366',      // Alert/Error
+};
+
+Typography (React Native TextStyle)
+● Font Family: Orbitron (Headings), JetBrains Mono (Body/Data). Fallback to monospace.
+● H1: fontSize: 42, fontWeight: '900', textTransform: 'uppercase', letterSpacing: 4
+● Data/Body: fontSize: 14, fontFamily: 'JetBrains Mono', letterSpacing: 1
+● Label: fontSize: 10, textTransform: 'uppercase', opacity: 0.7
+Shape & Borders
+● Radius: Standard borderRadius is forbidden. Use 0.
+● Chamfered Cut: Implement via react-native-svg <Polygon> or clipPath.
+● BorderWidth: 1px for schematics; 2px for focus/active states.
+3. Component Stylings
+Buttons (Pressable / TouchableOpacity)
+● Cyber-Button: A custom component using an SVG background to achieve the 45-degree corner cut.
+● Interaction: On onPressIn, scale to 0.98, trigger a haptic pulse (Haptics.impactAsync), and increase the shadowOpacity of the neon glow.
+● Variants: * Glitch: Rapidly toggle left: 1 and left: -1 on a loop when active.
+    ○ Outline: Transparent center, neon-colored border, text with textShadow.
+Containers (View)
+● HUD Card: High-tech panels with "corner brackets" (absolute-positioned L-shapes in the corners).
+● Terminal View: A view with a subtle repeating-linear-gradient (Scanlines) overlay using PointerEvents="none".
+● Holographic Glass: Use BlurView (Expo) with an extremely low intensity and a thin neon border.
+Inputs (TextInput)
+● Prompt Style: Always prefixed with a static > in colors.accent.
+● Focus State: The border should pulse using Animated.loop. Hide the standard cursor and use a custom blinking View block.
+4. Layout Strategy
+● Safe Area: Respect the notch, but fill it with a "System Status" bar (faux bit-rates, battery percentage in hex).
+● Density: Prefer information density over whitespace. Use small, sharp margins (8px increments).
+● Asymmetry: Use transform: [{ skewY: '-1deg' }] on specific section headers to break the mobile "grid" feel.
+5. Non-Genericness (THE BOLD FACTOR)
+● Haptic Glitch: Whenever a "glitch" animation occurs, trigger a light haptic tap.
+● Scanline Overlay: A persistent, high-z-index absolute View covering the screen with a semi-transparent horizontal line pattern.
+● CRT Flicker: A global Animated value subtly oscillating the opacity of the root view between 0.98 and 1.0.
+6. Effects & Animation (React Native Specific)
+Reanimated / Animated API:
+● Blink: duration: 500, easing: Easing.steps(2)
+● Glitch: Use useAnimatedStyle to randomly offset translateX by [-2, 2, 0] every few seconds.
+● Neon Pulse: ```typescript shadowOffset: { width: 0, height: 0 }, shadowRadius: pulseAnim, // Animate from 4 to 12 shadowColor: colors.accent, shadowOpacity: 0.6,
+
+## 7. Iconography
+* **Library:** `Lucide-react-native`.
+* **Config:** `strokeWidth={1.5}`, `color={colors.accent}`.
+* **Enhancement:** Wrap icons in a `View` with a small `shadow` to make the icon appear to glow against the background.
+
+## 8. Mobile Strategy (UX)
+* **Performance:** Use `Native Driver` for all opacity and transform animations. Avoid heavy `blur` on low-end Android devices.
+* **Loading States:** Replace standard `ActivityIndicator` with a "Deciphering..." text animation or a rotating circuit-pattern SVG.
+* **Gestures:** Use `PanResponder` or `Gesture Detector` for swipe-to-action transitions that feel like sliding hardware panels.
+
+## 9. Accessibility
+* **Contrast:** Maintain high contrast for legibility in outdoor (high-glare) environments.
+* **Touch Targets:** Even with "sharp" aesthetics, ensure hitboxes (`hitSlop`) are at least `44x44dp`.
+* **Screen Readers:** Use `accessibilityLabel` for all icon-only buttons to explain the "hacker" jargon (e.g., "Decrypt" instead of "Enter").
+
+## 10. Implementation Guidance
+* Prioritize `StyleSheet.create` for performance.
+* Use `expo-linear-gradient` for neon-border effects.
+* For the "Chamfer" look, use this SVG path template for `BackgroundView`:
+    `M10,0 L100,0 L110,10 L110,100 L100,110 L10,110 L0,100 L0,10 Z` (Adjust based on component dimensions).
+
+---
+**Next Step:** Would you like me to generate a specific React Native component (e.g., a Cyber-Style Login Screen or a Glitched Card) using this prompt?
+
+
+web3
+一种大胆的、未来主义的美学，灵感来自比特币和去中心化金融。深空背景，带有比特币橙色色调、金色亮点、发光元素和精确的数据可视化。
+1. 去中心化金融协议 (DeFi) 与 钱包 (Wallets)
+2. NFT 交易市场与数字收藏品展示
+3. 元宇宙 (Metaverse) 与 社交平台
+4. 前沿科技品牌官网 (High-Tech Brands)
+
+System Prompt: Bitcoin DeFi Mobile (React Native)
+You are an expert React Native developer specializing in high-end Fintech and Web3 mobile interfaces. Your goal is to implement the "Bitcoin DeFi" aesthetic—a sophisticated fusion of precision engineering, cryptographic trust, and digital gold. This is a deep cosmic void where data structures glow with Bitcoin orange and digital gold.
+1. Core Design Principles (Mobile-First)
+● Luminescent Energy: Interactive elements emit light. Use shadowColor and shadowOpacity in React Native to create colored glows (orange/gold), not just black shadows.
+● Tactile Precision: Use ultra-thin borderWidth: 1. Data must be displayed with monospace fonts for technical accuracy.
+● Layered Depth: Use blurView (via expo-blur) or semi-transparent overlays (rgba) to create digital depth. Elements float in Z-space using elevation and shadows.
+● Trust Through Design: High contrast and technical precision. The UI must feel "Engineered to Perfection."
+2. Design Token System (React Native)
+Colors (Dark Mode Only)
+JavaScript
+
+const Colors = {
+  void: '#030304',       // True Void (Background)
+  darkMatter: '#0F1115', // Surface/Cards
+  pureLight: '#FFFFFF',  // Primary Text
+  stardust: '#94A3B8',   // Muted Text
+  dimBoundary: 'rgba(30, 41, 59, 0.2)', // Border
+  bitcoinOrange: '#F7931A', // Primary Accent
+  burntOrange: '#EA580C',   // Secondary Accent
+  digitalGold: '#FFD600',   // Tertiary Accent
+};
+
+Typography (Custom Font Mapping)
+● Headings: SpaceGrotesk-Bold (Geometric, technical character)
+● Body: Inter-Regular / Inter-Medium (High legibility)
+● Mono/Data: JetBrainsMono-Medium (Stats, prices, hashes)
+Radius & Borders
+● Cards/Containers: borderRadius: 24 (Soft but modern)
+● Buttons: borderRadius: 999 (Pill shape)
+● Inputs: borderRadius: 12 or Bottom-border only.
+● Borders: Always borderWidth: StyleSheet.hairlineWidth or 1.
+3. Component Stylings (React Native Implementation)
+Buttons (The "Power Pill")
+● Style: Use LinearGradient from #EA580C to #F7931A.
+● Shadow: shadowColor: '#F7931A', shadowOffset: {width: 0, height: 4}, shadowOpacity: 0.5, shadowRadius: 10.
+● Interaction: Use Pressable with Scale animation (to 0.96) on press.
+● Text: Uppercase, letterSpacing: 1.5, fontFamily: 'Inter-Bold'.
+Cards (The "Blockchain Blocks")
+● Surface: backgroundColor: '#0F1115'.
+● Border: borderWidth: 1, borderColor: 'rgba(255,255,255,0.1)'.
+● Glow: Subtle shadowColor: '#F7931A', shadowOpacity: 0.1 for "active" blocks.
+● Layout: Generous padding (padding: 20).
+Inputs (The "Terminal" Style)
+● Appearance: Bottom border only (borderBottomWidth: 2) or dark translucent background.
+● Focus State: Border changes to #F7931A with a subtle outer glow.
+● Text: White color, monospace font for numeric inputs.
+4. Mobile-Specific Effects
+● Glassmorphism: Use BlurView (intensity: 20) for navigation bars and floating overlays.
+● Haptic Feedback: Trigger Haptics.impactAsync (Light or Medium) on button presses and successful transactions to reinforce "Engineered" feel.
+● Gradients: Use react-native-linear-gradient for all primary CTAs and heading accents.
+● Grid Background: Use a repeated SVG pattern of a 50px grid with opacity: 0.05 to simulate the network void.
+5. Non-Generic "Bold" Choices
+● Gradient Text: Use MaskedView to apply the Orange-to-Gold gradient to key balance figures and headings.
+● Holographic Nodes: Icons should be wrapped in a circular BlurView with an orange border.
+● Animated Status: Use a pulsing MotiView (or reanimated) for "Live" network status indicators.
+● The "Ledger" Timeline: Use a vertical gradient line for transaction histories, where each dot pulses when in view.
+6. Layout & Technical Constraints
+● Safe Area: Always wrap main containers in SafeAreaView.
+● Touch Targets: Minimum 48x48dp for all interactive elements.
+● Performance: Use FlashList for heavy transaction lists. Keep animations to the UI thread using React Native Reanimated.
+
+
+Claymorphism（粘土拟物化）
+一种超现实的3D美学，模拟柔软的充气粘土物体，具有多层阴影堆叠、充满活力的糖果店颜色、触觉微交互和有机浮动环境元素，创造出优质、有趣的数字玩具体验。
+1. 针对儿童与青少年的教育类应用
+2. 品牌形象中的 3D 角色与插图
+3. 金融科技与加密货币 (轻量版)
+4. 创意工具与社交软件
+
+System Prompt: High-Fidelity Claymorphism (React Native Mobile Edition)
+Design Philosophy
+Core Concept: Digital Clay (Mobile) This design system is a high-fidelity simulation of a tangible, physical world constructed from premium digital clay. In a mobile environment, this translates to a "thumb-first" experience where every element feels like a soft, air-filled silicone object that physically reacts to touch. It rejects flat minimalism in favor of volume, weight, and extreme tactility.
+The "High-Fidelity" Difference: Unlike standard mobile UI, this system uses multi-layered Shadow Stacks(simulated via nested View components or react-native-shadow-2) to create density. Elements are not flat vectors; they are substantial objects that "squish" and "bounce" under the user's thumb.
+
+Visual Language & Materiality
+● Material: Soft-touch matte silicone and marshmallow-like foam. Surfaces absorb light; reflections are soft and diffused.
+● Lighting: A virtual overhead light source (top-left). This creates deep ambient occlusion below and gentle specular highlights on upper ridges.
+● The "Super-Rounded" Rule: Zero sharp corners.
+    ○ Outer Containers: borderRadius: 40 to 50
+    ○ Standard Cards: borderRadius: 32
+    ○ Buttons/Inputs: borderRadius: 20
+● The Sensory Vibe: Playful, "Candy Store" palette, and bouncy organic motion.
+
+Design Token System (Mobile)
+1. Colors (The Candy Shop Palette)
+● Canvas (BG): #F4F1FA (Cool lavender-white. Avoid pure white).
+● Text (Primary): #332F3A (Soft Charcoal).
+● Text (Muted): #635F69 (Dark Lavender-Gray - minimum for WCAG).
+● Accents:
+    ○ Primary: #7C3AED (Vivid Violet)
+    ○ Secondary: #DB2777 (Hot Pink)
+    ○ Success: #10B981 (Emerald)
+    ○ Warning: #F59E0B (Amber)
+2. Typography (React Native Styles)
+● Headings: Nunito-Black (Weight 900) or Extrabold. Rounded terminals are mandatory.
+● Body: DMSans-Medium (Weight 500). Clean and geometric.
+● Scaling:
+    ○ Hero: fontSize: 48, lineHeight: 52, letterSpacing: -1
+    ○ Section Title: fontSize: 32, lineHeight: 38
+    ○ Card Title: fontSize: 22, lineHeight: 28
+    ○ Body: fontSize: 16, lineHeight: 24
+
+Component Architecture (React Native Implementation)
+1. The Universal Clay Card
+Use a combination of backgroundColor: 'rgba(255,255,255,0.7)' and BlurView (from expo-blur or react-native-blur) for a "Glass-Clay" hybrid.
+● Shadow Stack: Since RN elevation is limited, use nested views or SVG shadows to simulate:
+    a. Outer: offset: {12, 12}, blur: 24, color: 'rgba(160, 150, 180, 0.2)'
+    b. Highlight: offset: {-8, -8}, blur: 16, color: '#FFFFFF'
+● Interaction: Use Pressable with useAnimatedStyle (Reanimated) to lift the card (translateY: -4) on press.
+2. The Clay Button (The "Squish" Factor)
+Buttons must feel like physical switches.
+● Base: height: 56, borderRadius: 20, justifyContent: 'center'.
+● Gradient: Use LinearGradient from #A78BFA to #7C3AED.
+● Micro-Physics: * On Press In: scale: 0.92, shadowOpacity decreases.
+    ○ On Press Out: Spring back to scale: 1.0 with damping: 10.
+● Shadow: Deep colored shadow matching the button hue.
+3. The Recessed Input
+Simulates a finger-press into the clay.
+● Style: backgroundColor: '#EFEBF5', height: 64, paddingHorizontal: 24.
+● Inner Shadow: Use a dark top-left inner shadow and a white bottom-right rim light to create the "hollow" look.
+
+Animation System (Powered by Reanimated)
+1. Buoyancy (Float): Background blobs should use withRepeat(withTiming(...)) to drift ±20px over 8-10 seconds.
+2. Clay Breathe: Stat orbs should subtly scale between 1.0 and 1.03 every 4 seconds.
+3. Haptic Feedback: Every "Squish" interaction (Buttons/Cards) must trigger Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light).
+
+Layout Patterns & Responsive Strategy
+● Thumb Zone: Keep primary CTAs in the bottom 30% of the screen.
+● Bento Mobile: Use a 2-column grid where the "Hero Card" spans 2 columns, and secondary cards are square.
+● Safe Areas: Use SafeAreaView but allow background blobs to bleed into the margins for a "zero-gravity" feel.
+
+Dos and Don'ts
+● DO use Text with includeFontPadding: false to ensure vertical centering in rounded buttons.
+● DO use Spring physics for all transitions; avoid linear easing.
+● DO nested border radii: if a card is 32, the image inside is 24.
+● DON'T use standard Android elevation. It creates flat, gray shadows that break the clay aesthetic. Use SVG-based shadows.
+● DON'T use sharp corners (< 20).
+● DON'T use pure black #000000 for text or shadows.
+
+
+Enterprise（企业级/政企风）
+现代SaaS美学平衡了专业性和可接近性。鲜艳的靛蓝/紫罗兰色渐变、柔和的阴影、等距深度和干净的几何无衬线字体。
+1. 后台管理系统
+2. 生产力工具与协作平台
+3. 政务与金融类严肃应用
+4. 垂直领域专业软件
+Here is a translated version of your web design prompt, adapted specifically for mobile application development (iOS/Android/React Native/Flutter). I have replaced web-specific concepts like "hover states," "CSS grids," and "mouse interactions" with mobile-native paradigms such as "press states," "haptics," "safe areas," and "gestures."
+
+App Design System Prompt: Modern Enterprise SaaS (Mobile)
+1. Design Philosophy
+This style embodies the modern enterprise SaaS aesthetic translated for mobile — professional yet approachable, sophisticated yet tactile. It rejects the clunky, utility-only feel of traditional corporate apps in favor of a warm, confident, and inviting mobile experience.
+Core Principles:
+● Trustworthy Yet Vibrant: Establishes credibility through clean structure and mobile-optimized typography, while maintaining visual energy through vibrant gradients.
+● Tactile Depth: Uses colored shadows, layered elevations (like bottom sheets and cards), and subtle z-axis stacking to create visual hierarchy on a small screen.
+● Refined Elegance: Every element is polished, focusing on fluid gestures, spring-physics animations, and sophisticated press states.
+● Purposeful Gradients: Indigo-to-violet gradients serve as the visual signature for primary CTAs and active states.
+● Mobile Polish: Generous spacing, safe-area awareness, and crisp typography create a premium, enterprise-ready feel in the palm of the hand.
+Keywords: Trustworthy, Vibrant, Polished, Tactile, Modern, Approachable, Enterprise-Ready, Fluid.
+2. Design Token System
+Colors (Light Mode)
+● Background: #F8FAFC (Slate 50) - A very subtle cool grey/white base for screen backgrounds.
+● Surface: #FFFFFF (White) - For cards, bottom sheets, and elevated elements.
+● Primary: #4F46E5 (Indigo 600) - The core brand color. Vibrant blue-purple.
+● Secondary: #7C3AED (Violet 600) - For gradients, badges, and accents.
+● Text Main: #0F172A (Slate 900) - High contrast, sharp for primary readability.
+● Text Muted: #64748B (Slate 500) - For supporting text and inactive tab icons.
+● Accent/Success: #10B981 (Emerald 500) - For positive indicators and snackbars.
+● Divider/Border: #E2E8F0 (Slate 200) - Subtle separation for list items.
+Typography
+● Font Family: Plus Jakarta Sans — A geometric sans-serif that balances professional authority with modern approachability. High legibility on mobile screens.
+● Scaling: Designed to support iOS Dynamic Type and Android font scaling.
+● Font Weights:
+    ○ Display/Screen Titles: ExtraBold (800)
+    ○ Section Headers: Bold (700)
+    ○ Card Titles/Buttons: SemiBold (600)
+    ○ Body Text: Regular (400)
+● Line Heights: Tight for titles (1.1-1.2), relaxed for body text (1.4-1.5) to ensure comfortable reading on narrow screens.
+Radius & Border
+● Screen Elements: 16pt/dp for large cards and bottom sheets.
+● Interactive Elements: 8pt/dp for inputs and small chips.
+● Buttons: Fully rounded (pill shape) or 12pt/dp for a modern tech feel.
+● Borders: Hairline (0.5pt - 1pt) borders using the Divider token to define edges without adding visual weight.
+Shadows & Depth
+● Card Elevation: Soft, colored shadows replacing neutral grays. Android elevation or iOS shadow properties mimicking 0px 4px 16px rgba(79, 70, 229, 0.08).
+● Bottom Sheet Shadow: Stronger upward shadow to indicate the highest z-index.
+● Button Shadow (Primary): 0px 4px 12px rgba(79, 70, 229, 0.25) to make primary actions highly prominent.
+3. Component Stylings
+Buttons
+● Primary CTA: Full width (minus screen padding) at the bottom of the screen. Background uses the Indigo-to-Violet gradient. White text.
+● Secondary: White surface, slate border, slate text.
+● Press State: Instead of web hover, use an active press state that slightly scales the button down (0.95x) and reduces shadow, paired with subtle haptic feedback.
+Cards & Lists
+● Base: White background, 16pt radius, hairline border, soft colored shadow.
+● Layout: Horizontal scrolling (carousels) for feature discovery, vertical standard lists for data.
+● List Items: Edge-to-edge with inset dividers, utilizing leading icons (in soft-colored circular backgrounds).
+Inputs & Forms
+● Style: White background, 8pt radius, light slate border.
+● Active/Focused State: Border transitions to Indigo, label animates to a floating position, keyboard automatically presents.
+● Error State: Red border with an immediate, subtle shake animation.
+4. App-Specific Bold Choices
+● Haptic Integration: Tied to micro-interactions. Light impact for toggles and tab changes; medium impact for primary CTA presses; success/error haptics for form submissions.
+● Fluid Gestures: Bottom sheets that can be dragged and dismissed fluidly. Cards that support swipe-to-action (e.g., swipe left to archive) with color reveals underneath.
+● Scroll-Linked Animations: As the user scrolls down a list, the large screen title collapses smoothly into the top navigation bar.
+● Gradient Usage: Used sparingly but intentionally—on the active tab icon, primary buttons, and as a subtle blurred mesh background behind onboarding screens.
+● Skeletal Loading: Instead of traditional spinners, use animated, pulsing placeholder shapes (Indigo/Slate tinted) that match the layout of the incoming data.
+5. Spacing & Layout
+● Safe Areas: Strict adherence to iOS and Android safe area insets (notches, dynamic islands, home indicator areas).
+● Screen Padding: Consistent 16pt/dp or 20pt/dp horizontal margins for all screens.
+● Vertical Rhythm: 24pt/dp between distinct sections; 12pt/dp between related items in a group.
+● Navigation:
+    ○ Bottom Tab Navigation for primary destinations (3-5 items).
+    ○ Top App Bar for contextual actions, screen titles, and back buttons.
+● Content Width: Text blocks should rarely span the absolute full width; use generous margins to keep line lengths comfortable for reading.
+6. Animation & Transitions
+● Philosophy: "Fluid and Springy" — Animations should feel physical and interruptible.
+● Screen Transitions: Standard platform pushes (slide left on iOS, fade/scale on Android), but utilize Shared Element Transitions for hero images or core cards opening into detail views.
+● Press Animations: Scale-down (scale: 0.97) on press down, spring back on release.
+● Easing: Avoid linear animations. Use spring physics for layout changes and ease-out for opacities.
+7. Iconography & Touch Targets
+● Library: Lucide-react-native (or equivalent SVG system).
+● Style: 2px stroke width, rounded caps and joins for a friendly, modern feel.
+● Touch Targets: Crucial for mobile. Minimum tap area of 44x44 pt (iOS) or 48x48 dp (Android) for all interactive elements, even if the visual icon is only 24x24.
+● Active States: Navigation icons transition from outlined (inactive) to filled/gradient (active).
+8. Accessibility & Best Practices
+● Dynamic Text: UI must not break when users increase their system font size. Text must wrap or truncate gracefully.
+● Contrast: All text meets WCAG AA standards. Slate 900 on Slate 50 background is highly compliant.
+● Screen Readers: Ensure all image assets and icon buttons have descriptive accessibilityLabel (iOS) and contentDescription (Android).
+● Dark Mode Readiness: While this spec is light-mode first, tokens should be structured to easily invert (e.g., Slate 50 becomes Slate 900, gradients become slightly muted).
+● Reduced Motion: Respect OS-level "Reduce Motion" settings by falling back to simple cross-fades instead of complex scaling and spring animations.
+
+
+
+Sketch（素描/手绘风）
+有机的不稳定边框、手写排版、纸张纹理和俏皮的不完美。每个元素都是用记号笔和铅笔在纹理纸上勾勒出来的。
+1. 原型设计与早期创意提案 (Low-Fidelity Prototyping)
+2. 创意品牌、艺术与独立文化项目
+3. 教育、绘本与儿童类产品
+4. 游戏化 UI 与 叙事解谜游戏
+
+Design Philosophy
+The Hand-Drawn mobile design style celebrates authentic imperfection and human touch within the palm of the hand. It rejects the sterile precision of typical mobile UI in favor of organic, playful irregularity that evokes a portable sketchbook, a pocket notebook, or a collection of sticky notes.
+Core Principles:
+● No Straight Lines: Every View and TouchableOpacity uses complex borderRadius logic or SVG masks to create wobbly edges that reject geometric perfection.
+● Tactile Texture: Use background overlays or tiled images to simulate physical media like grain, paper, or notebook grids, making the screen feel like a physical surface.
+● Playful Tilt: Elements utilize small transform: [{ rotate: '-1deg' }] properties to break the rigid mobile grid and create casual energy.
+● Hard Offset Shadows: Strictly avoid elevation (Android) or shadowRadius (iOS) that creates blur. Use a secondary "shadow layer" View offset by (4px, 4px) to create a cut-paper, layered collage aesthetic.
+● Handwritten Typography: Exclusively use handwritten fonts (Kalam, Patrick Hand). Typography should vary in size and rotation to look like quick notes written on the fly.
+● Scribbled Overlays: Use absolute-positioned SVGs for flourishes like hand-drawn arrows, "tape" effects on images, and "X" marks for close buttons.
+● Intentional Messiness: Embrace slight overlaps and asymmetrical margins that make the app feel spontaneous rather than manufactured.
+● Emotional Intent: This style lowers the "fear of interaction" by appearing unfinished and approachable. It is perfect for journaling apps, creative tools, education, or any product that wants to feel human-centered rather than corporate.
+
+Design Token System
+Colors (Single Palette - Light Mode)
+● Background: #fdfbf7 (Warm Paper)
+● Foreground: #2d2d2d (Soft Pencil Black)
+● Muted: #e5e0d8 (Old Paper / Erased Pencil)
+● Accent: #ff4d4d (Red Correction Marker)
+● Border: #2d2d2d (Pencil Lead)
+● Secondary Accent: #2d5da1 (Blue Ballpoint Pen)
+Typography
+● Headings: Kalam-Bold - High visual weight, felt-tip marker style.
+● Body: PatrickHand-Regular - Highly legible but distinctly human.
+● Scale: Large and readable for mobile. Headings should have lineHeight adjusted to allow for "scribbled" descenders.
+Radius & Border
+● Wobbly Borders: Since React Native doesn't support the slash / syntax for borderRadius, use unique values for each corner (e.g., borderTopLeftRadius: 15, borderTopRightRadius: 25, borderBottomLeftRadius: 20, borderBottomRightRadius: 10).
+● Border Width: Bold and visible. borderWidth: 2 minimum; borderWidth: 3 for primary actions.
+● Style: solid for containers; dashed for "cut-out" sections or empty states.
+Shadows & Effects
+● Hard Offset Shadows: Since shadowOpacity with 0 radius is inconsistent across platforms, implement as a "Shadow View" placed behind the main component.
+    ○ Standard: Offset { x: 4, y: 4 } with #2d2d2d.
+    ○ Active (Press): Offset { x: 0, y: 0 } (the button "sinks" into the paper).
+● Paper Texture: Use a repeating pattern background image or a very subtle radial-gradient SVG overlay across the entire screen.
+
+Component Stylings
+Buttons (TouchableOpacity)
+● Shape: Irregular wobbly rectangle.
+● Normal State: * White background, borderWidth: 3, Pencil Black text.
+    ○ Hard offset shadow view behind it.
+● Pressed State (activeOpacity={1}):
+    ○ Main button transform: [{ translateX: 4 }, { translateY: 4 }].
+    ○ The background "shadow view" is covered, simulating a physical press.
+● Variant: "Post-it" Yellow (#fff9c4) for primary CTAs.
+Cards/Containers
+● Base Style: White background, wobbly border, slight rotation (-1deg or 1deg).
+● Decoration Types:
+    ○ "Tape": A semi-transparent View (rgba(200, 200, 200, 0.5)) positioned absolutely at the top, slightly rotated to look like it holds the card.
+    ○ "Tack": A small red circle SVG at the top center.
+● Speech Bubbles: Use a small SVG triangle attached to the bottom of the container for "hint" text or tooltips.
+Inputs (TextInput)
+● Style: Full box with wobbly borderRadius.
+● Font: PatrickHand-Regular.
+● Focus State: Border color changes to Blue Ballpoint (#2d5da1) with a slight increase in borderWidth.
+● Placeholder: Muted Pencil (#2d2d2d60).
+
+Layout Strategy
+● The "Anti-Grid": Avoid perfect alignment. Give adjacent cards slightly different rotation values.
+● Layering: Use zIndex to stack "tape" over cards and cards over background scribbles.
+● Visual Rhythm: Use padding: 20 for standard screens. Use large gap values between vertical elements to let the "paper" breathe.
+● Overflow: Allow decorative elements (like a hand-drawn star) to bleed slightly off the edge of the screen.
+
+Non-Genericness (Bold Choices)
+● Sketchy Loaders: Instead of a spinner, use an animation that "scribbles" a circle or toggles between three hand-drawn frames.
+● Hand-Drawn Icons: Use icons that look like they were drawn with a 0.5mm fineliner (thick strokes, unclosed loops).
+● Strikethrough: When a task is completed or an item is deleted, use a red "scribble-out" SVG overlay instead of a simple line.
+● Wavy Dividers: Replace standard horizontal rules with a hand-drawn squiggly line SVG.
+
+Effects & Animation
+● The "Jiggle": When a user triggers an error, use a Sequence animation that rapidly rotates the element between -2deg and 2deg.
+● Snappy Transitions: Use LayoutAnimation.configureNext(LayoutAnimation.Presets.spring) for all layout changes to give a bouncy, physical feel.
+
+Mobile-First Strategy (React Native)
+● Touch Targets: Ensure all wobbly buttons have a minimum hit area of 48x48 even if the visual "ink" is smaller.
+● Safe Area: Ensure the "Paper" background extends into the SafeAreaView to maintain the illusion of physical media.
+● Performance: Use useNativeDriver: true for rotations and transforms to keep the "hand-drawn" movements fluid at 60fps.
+● Haptics: Add Haptics.impactAsync on button presses to reinforce the feeling of "clicking" a physical object.
+
+
+Neumorphism（新拟物化）
+通过单色背景上的双阴影拉伸和插入元素。柔软、触感好、物理接地，可接近性极佳。
+1. 极简主义硬件控制与智能家居
+2. 追求审美感的工具类 App
+3. 金融与健康监测看板（非密集型）
+4. 品牌营销与展示型页面
+
+Design Philosophy (React Native / Mobile)
+Core Principles: Neumorphism on mobile creates a tactile, physical interface through dual shadows. On React Native, this is achieved by layering View components or using specialized libraries to simulate the light source (top-left) and dark shadow (bottom-right). Every component is "molded" from the base material (#E0E5EC). Buttons are never flat; they are either "pillowed" (convex) or "wells" (concave/inset).
+Vibe: Premium, ceramic-like feel. It prioritizes the "thump" of a physical button press. It is a calm, monochromatic experience that uses depth rather than color to establish hierarchy.
+Unique Visual Signatures (Mobile Specific):
+● Dual-Shadow Layering: Since React Native's shadowColor only supports one direction, use nested Viewcomponents or react-native-shadow-2 to achieve the dual-light effect.
+● Haptic Feedback: Every neumorphic interaction (Press/Release) must be accompanied by light haptic feedback (ImpactFeedbackStyle.Light).
+● Physical Press: Active states should use transform: [{ scale: 0.97 }] to simulate material compression.
+● Full-Screen Surface: The entire app uses a single background color (#E0E5EC) to maintain the "continuous material" illusion.
+
+Design Token System (The DNA)
+Colors (Light Mode - Cool Monochromatic)
+● Background: #E0E5EC (The "Clay" base).
+● Text Primary: #3D4852 (7.5:1 contrast).
+● Text Muted: #6B7280 (4.6:1 contrast).
+● Accent: #6C63FF (Used for active toggles or primary CTAs).
+● Shadow Light: rgba(255, 255, 255, 0.6) (Top-Left).
+● Shadow Dark: rgba(163, 177, 198, 0.7) (Bottom-Right).
+Typography
+● Font Family: Use System (San Francisco/Roboto) or PlusJakartaSans-Bold.
+● Sizing: * Heading: 24pt-32pt, Bold.
+    ○ Body: 16pt, Medium.
+    ○ Caption: 12pt, Regular.
+● Letter Spacing: -0.5 for headings to enhance the modern look.
+Radius (React Native borderRadius)
+● Large Container: 32
+● Standard Button/Input: 16
+● Pill/Search Bar: 999
+
+Shadows & Effects (The Physics)
+Note: React Native requires specific shadow properties for iOS and elevation for Android. For high-fidelity Neumorphism, use a wrapping implementation.
+Extruded (Convex - Resting)
+● Outer Shadow (Dark): shadowOffset: { width: 6, height: 6 }, shadowOpacity: 1, shadowRadius: 10, shadowColor: 'rgba(163, 177, 198, 0.7)'
+● Inner Shadow (Light): shadowOffset: { width: -6, height: -6 }, shadowOpacity: 1, shadowRadius: 10, shadowColor: 'rgba(255, 255, 255, 0.6)'
+Inset (Concave - Pressed/Input)
+● Concept: Use a slightly darker background color (#D1D9E6) or internal gradients/shadows to simulate a "carved out" look.
+● Visual: backgroundColor: '#E0E5EC', plus internal borders of 1px with a darker shade at the top.
+
+Component Styling (React Native)
+Buttons
+● Base: height: 56, borderRadius: 16, justifyContent: 'center', alignItems: 'center'.
+● Default State: Extruded dual shadow.
+● Active State (Pressable): Remove outer shadows, apply scale: 0.98, and change background slightly to indicate an "inset" state.
+● Haptics: Trigger Haptics.impactAsync on onPressIn.
+Cards
+● Base: padding: 24, borderRadius: 32, backgroundColor: '#E0E5EC'.
+● Hierarchy: Use "Nested Depth." A card (Extruded) contains an Icon Container (Inset Deep).
+Inputs
+● Style: height: 50, borderRadius: 16, paddingHorizontal: 16.
+● Depth: Must be Inset (Concave) to look like a physical slot.
+● Focus: Border color changes to #6C63FF with a thin 1.5px width.
+
+Animation & Micro-interactions
+● Framework: Use React Native Reanimated or LayoutAnimation.
+● Transitions: Duration: 250ms, Easing: Bezier(0.4, 0, 0.2, 1).
+● Interaction: * Scale: Buttons shrink by 2-3% when pressed.
+    ○ Shadow Transition: Smoothly interpolate shadow opacity from 1 to 0.4 when an element is "pressed" into the surface.
+
+Layout & Accessibility
+● Safe Area: Always wrap in SafeAreaView.
+● Touch Targets: Minimum 48x48 for all interactive elements.
+● Spacing: Use a 8pt grid system (8, 16, 24, 32, 48).
+● Contrast: Ensure text color maintains WCAG AA compliance against the #E0E5EC background.
+
+Anti-Patterns (Do Not Do)
+● No Black Shadows: Never use rgba(0,0,0,x). Shadows must be blue-grey to match the "Cool Grey" material.
+● No Pure White Backgrounds: The screen background MUST be #E0E5EC.
+● No Sharp Edges: Avoid borderRadius < 12.
+● No Flat Borders: Do not use borderWidth: 1 as a substitute for depth unless in a focus state.
\ No newline at end of file
diff --git a/.claude/skills/ui-ux-pro-max/data/google-fonts.csv b/.claude/skills/ui-ux-pro-max/data/google-fonts.csv
new file mode 100644
index 000000000..45ece9ea2
--- /dev/null
+++ b/.claude/skills/ui-ux-pro-max/data/google-fonts.csv
@@ -0,0 +1,1924 @@
+Family,Category,Stroke,Classifications,Keywords,Styles,Variable Axes,Subsets,Designers,Popularity Rank,Trending Rank,Is Noto,Date Added,Last Modified,Google Fonts URL
+ABeeZee,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque italic english western european extended-latin european well-known common,400 | 400i,,latin | latin-ext,Anja Meiners,182,1805,No,2012-09-30,2025-09-08,https://fonts.google.com/specimen/ABeeZee
+ADLaM Display,Display,,Display,bold decorative headline attention-grabbing creative expressive  headline hero decorative large-text attention english western european extended-latin european,400,,adlam | latin | latin-ext,Mark Jamra | Neil Patel | Andrew Footit,666,364,No,2023-08-14,2025-05-30,https://fonts.google.com/specimen/ADLaM+Display
+AR One Sans,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque variable variable-font responsive variable-weight english western european extended-latin european vietnamese,400 | 500 | 600 | 700,ARRR: - | wght: -,latin | latin-ext | vietnamese,Niteesh Yadav,746,616,No,2023-09-05,2025-09-16,https://fonts.google.com/specimen/AR+One+Sans
+Abel,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque english western european popular widely-used,400,,latin,MADType,134,1223,No,2011-08-03,2025-05-30,https://fonts.google.com/specimen/Abel
+Abhaya Libre,Serif,Serif,,elegant traditional classic refined literary editorial transitional oldstyle didone english western european extended-latin european sinhala sri-lankan,400 | 500 | 600 | 700 | 800,,latin | latin-ext | sinhala,Mooniak,410,1601,No,2016-08-30,2025-09-16,https://fonts.google.com/specimen/Abhaya+Libre
+Aboreto,Display,,Display,bold decorative headline attention-grabbing creative expressive  headline hero decorative large-text attention english western european extended-latin european,400,,latin | latin-ext,Dominik Jáger,485,186,No,2022-05-26,2025-05-30,https://fonts.google.com/specimen/Aboreto
+Abril Fatface,Display,Serif,Display,bold decorative headline attention-grabbing creative expressive transitional oldstyle didone headline hero decorative large-text attention english western european extended-latin european well-known common,400,,latin | latin-ext,TypeTogether,161,1860,No,2011-08-31,2025-09-16,https://fonts.google.com/specimen/Abril+Fatface
+Abyssinica SIL,Serif,Serif,,elegant traditional classic refined literary editorial transitional oldstyle didone ethiopic amharic english western european extended-latin european,400,,ethiopic | latin | latin-ext,SIL International,1123,788,No,2016-01-20,2025-09-10,https://fonts.google.com/specimen/Abyssinica+SIL
+Aclonica,Sans Serif,Sans Serif,Display,clean modern minimal professional readable neutral geometric humanist grotesque headline hero decorative large-text attention english western european extended-latin european,400,,latin | latin-ext,Astigmatic,588,1970,No,2011-04-27,2025-09-08,https://fonts.google.com/specimen/Aclonica
+Acme,Sans Serif,Sans Serif,Display,clean modern minimal professional readable neutral geometric humanist grotesque headline hero decorative large-text attention english western european well-known common,400,,latin,Juan Pablo del Peral | Huerta Tipográfica,227,1803,No,2011-12-19,2025-09-16,https://fonts.google.com/specimen/Acme
+Actor,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque english western european well-known common,400,,latin,Thomas Junold,287,1886,No,2011-08-03,2025-09-10,https://fonts.google.com/specimen/Actor
+Adamina,Serif,Serif,,elegant traditional classic refined literary editorial transitional oldstyle didone english western european,400,,latin,Cyreal,517,829,No,2011-09-07,2025-09-16,https://fonts.google.com/specimen/Adamina
+Advent Pro,Sans Serif,Sans Serif,Display,clean modern minimal professional readable neutral geometric humanist grotesque headline hero decorative large-text attention versatile multi-weight flexible italic variable variable-font responsive variable-weight variable-width russian cyrillic slavic cyrillic extended greek english western european extended-latin european well-known common,100 | 100i | 200 | 200i | 300 | 300i | 400 | 400i | 500 | 500i | 600 | 600i | 700 | 700i | 800 | 800i | 900 | 900i,wdth: - | wght: -,cyrillic | cyrillic-ext | greek | latin | latin-ext,VivaRado,258,2192,No,2012-02-29,2025-09-16,https://fonts.google.com/specimen/Advent+Pro
+Afacad,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque italic variable variable-font responsive variable-weight cyrillic extended english western european extended-latin european vietnamese multilingual international,400 | 400i | 500 | 500i | 600 | 600i | 700 | 700i,wght: -,cyrillic-ext | latin | latin-ext | math | symbols | vietnamese,Kristian Möller | Dicotype,475,1797,No,2023-12-04,2025-09-04,https://fonts.google.com/specimen/Afacad
+Afacad Flux,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque versatile multi-weight flexible variable variable-font responsive variable-weight variable-slant english western european extended-latin european vietnamese,100 | 1000 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900,slnt: - | wght: -,latin | latin-ext | vietnamese,Kristian Möller | Dicotype,745,128,No,2024-09-23,2025-09-08,https://fonts.google.com/specimen/Afacad+Flux
+Agbalumo,Display,,Display,bold decorative headline attention-grabbing creative expressive  headline hero decorative large-text attention cyrillic extended ethiopic amharic english western european extended-latin european vietnamese,400,,cyrillic-ext | ethiopic | latin | latin-ext | vietnamese,Raphael Alẹ́gbẹ́lẹ́yẹ̀ | Sorkin Type | Eben Sorkin,775,1986,No,2023-10-05,2025-06-25,https://fonts.google.com/specimen/Agbalumo
+Agdasima,Sans Serif,Sans Serif,Display,clean modern minimal professional readable neutral geometric humanist grotesque headline hero decorative large-text attention english western european extended-latin european,400 | 700,,latin | latin-ext,The DocRepair Project | Patric King,812,1723,No,2023-04-02,2025-06-02,https://fonts.google.com/specimen/Agdasima
+Agu Display,Display,Serif,Display,bold decorative headline attention-grabbing creative expressive transitional oldstyle didone headline hero decorative large-text attention variable variable-font responsive english western european extended-latin european vietnamese,400,MORF: -,latin | latin-ext | vietnamese,Seun Badejo,1582,1604,No,2024-12-09,2025-09-04,https://fonts.google.com/specimen/Agu+Display
+Aguafina Script,Handwriting,,Handwriting | Display,personal casual friendly warm handwritten script organic  script cursive hand-drawn artistic informal headline hero decorative large-text attention english western european extended-latin european,400,,latin | latin-ext,Sudtipos,813,205,No,2011-11-30,2025-09-02,https://fonts.google.com/specimen/Aguafina+Script
+Akatab,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque versatile multi-weight flexible english western european extended-latin european,400 | 500 | 600 | 700 | 800 | 900,,latin | latin-ext | tifinagh,SIL International,966,58,No,2023-06-21,2025-09-10,https://fonts.google.com/specimen/Akatab
+Akaya Kanadaka,Display,,Display,bold decorative headline attention-grabbing creative expressive  headline hero decorative large-text attention kannada indian english western european extended-latin european,400,,kannada | latin | latin-ext,Vaishnavi Murthy | Juan Luis Blanco,996,72,No,2021-01-14,2025-09-16,https://fonts.google.com/specimen/Akaya+Kanadaka
+Akaya Telivigala,Display,,Display,bold decorative headline attention-grabbing creative expressive  headline hero decorative large-text attention english western european extended-latin european telugu indian,400,,latin | latin-ext | telugu,Vaishnavi Murthy | Juan Luis Blanco,1366,1498,No,2016-06-15,2025-09-02,https://fonts.google.com/specimen/Akaya+Telivigala
+Akronim,Display,,Display,bold decorative headline attention-grabbing creative expressive  headline hero decorative large-text attention english western european extended-latin european,400,,latin | latin-ext,Grzegorz Klimczewski,1222,693,No,2012-09-23,2025-05-30,https://fonts.google.com/specimen/Akronim
+Akshar,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque variable variable-font responsive variable-weight hindi devanagari indian english western european extended-latin european,300 | 400 | 500 | 600 | 700,wght: -,devanagari | latin | latin-ext,Tall Chai,316,48,No,2022-03-21,2025-09-08,https://fonts.google.com/specimen/Akshar
+Aladin,Display,,Display,bold decorative headline attention-grabbing creative expressive  headline hero decorative large-text attention english western european extended-latin european,400,,latin | latin-ext,Sudtipos,988,1299,No,2011-11-30,2025-09-11,https://fonts.google.com/specimen/Aladin
+Alan Sans,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque versatile multi-weight flexible variable variable-font responsive variable-weight english western european extended-latin european,300 | 400 | 500 | 600 | 700 | 800 | 900,wght: -,latin | latin-ext,Raphaël Ronot,1379,1378,No,2025-09-17,2025-11-20,https://fonts.google.com/specimen/Alan+Sans
+Alata,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque english western european extended-latin european vietnamese well-known common,400,,latin | latin-ext | vietnamese,Spyros Zevelakis | Eben Sorkin,262,1520,No,2019-11-08,2025-09-04,https://fonts.google.com/specimen/Alata
+Alatsi,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque cyrillic extended english western european extended-latin european vietnamese,400,,cyrillic-ext | latin | latin-ext | vietnamese,Spyros Zevelakis | Eben Sorkin,635,1838,No,2019-11-07,2025-09-10,https://fonts.google.com/specimen/Alatsi
+Albert Sans,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque versatile multi-weight flexible italic variable variable-font responsive variable-weight english western european extended-latin european well-known common,100 | 100i | 200 | 200i | 300 | 300i | 400 | 400i | 500 | 500i | 600 | 600i | 700 | 700i | 800 | 800i | 900 | 900i,wght: -,latin | latin-ext,Andreas Rasmussen,171,550,No,2022-06-08,2025-09-11,https://fonts.google.com/specimen/Albert+Sans
+Aldrich,Sans Serif,Sans Serif,Display,clean modern minimal professional readable neutral geometric humanist grotesque headline hero decorative large-text attention english western european,400,,latin,MADType,620,1641,No,2011-08-17,2025-06-02,https://fonts.google.com/specimen/Aldrich
+Alef,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque hebrew RTL israeli english western european,400 | 700,,hebrew | latin,Hagilda | Mushon Zer-Aviv,522,727,No,2013-05-21,2025-09-04,https://fonts.google.com/specimen/Alef
+Alegreya,Serif,Serif,,elegant traditional classic refined literary editorial transitional oldstyle didone versatile multi-weight flexible italic variable variable-font responsive variable-weight russian cyrillic slavic cyrillic extended greek greek extended english western european extended-latin european vietnamese multilingual international well-known common,400 | 400i | 500 | 500i | 600 | 600i | 700 | 700i | 800 | 800i | 900 | 900i,wght: -,cyrillic | cyrillic-ext | greek | greek-ext | latin | latin-ext | vietnamese,Juan Pablo del Peral | Huerta Tipográfica,220,1915,No,2011-12-19,2025-09-08,https://fonts.google.com/specimen/Alegreya
+Alegreya SC,Serif,Serif,,elegant traditional classic refined literary editorial transitional oldstyle didone italic russian cyrillic slavic cyrillic extended greek greek extended english western european extended-latin european vietnamese multilingual international,400 | 400i | 500 | 500i | 700 | 700i | 800 | 800i | 900 | 900i,,cyrillic | cyrillic-ext | greek | greek-ext | latin | latin-ext | vietnamese,Juan Pablo del Peral | Huerta Tipográfica,735,1820,No,2011-12-19,2025-09-04,https://fonts.google.com/specimen/Alegreya+SC
+Alegreya Sans,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque versatile multi-weight flexible italic russian cyrillic slavic cyrillic extended greek greek extended english western european extended-latin european vietnamese multilingual international well-known common,100 | 100i | 300 | 300i | 400 | 400i | 500 | 500i | 700 | 700i | 800 | 800i | 900 | 900i,,cyrillic | cyrillic-ext | greek | greek-ext | latin | latin-ext | vietnamese,Juan Pablo del Peral | Huerta Tipográfica,213,1458,No,2013-12-04,2025-09-10,https://fonts.google.com/specimen/Alegreya+Sans
+Alegreya Sans SC,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque versatile multi-weight flexible italic russian cyrillic slavic cyrillic extended greek greek extended english western european extended-latin european vietnamese multilingual international,100 | 100i | 300 | 300i | 400 | 400i | 500 | 500i | 700 | 700i | 800 | 800i | 900 | 900i,,cyrillic | cyrillic-ext | greek | greek-ext | latin | latin-ext | vietnamese,Juan Pablo del Peral | Huerta Tipográfica,527,344,No,2013-12-04,2025-09-16,https://fonts.google.com/specimen/Alegreya+Sans+SC
+Aleo,Serif,Slab Serif,,elegant traditional classic refined literary editorial slab mechanical sturdy strong versatile multi-weight flexible italic variable variable-font responsive variable-weight english western european extended-latin european vietnamese well-known common,100 | 100i | 200 | 200i | 300 | 300i | 400 | 400i | 500 | 500i | 600 | 600i | 700 | 700i | 800 | 800i | 900 | 900i,wght: -,latin | latin-ext | vietnamese,Alessio Laiso,285,820,No,2018-12-11,2025-09-16,https://fonts.google.com/specimen/Aleo
+Alex Brush,Handwriting,,Handwriting,personal casual friendly warm handwritten script organic  script cursive hand-drawn artistic informal english western european extended-latin european vietnamese,400,,latin | latin-ext | vietnamese,Robert Leuschke,374,1187,No,2011-12-19,2025-09-11,https://fonts.google.com/specimen/Alex+Brush
+Alexandria,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque versatile multi-weight flexible variable variable-font responsive variable-weight arabic RTL middle-east english western european extended-latin european vietnamese,100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900,wght: -,arabic | latin | latin-ext | vietnamese,Mohamed Gaber | Julieta Ulanovsky,341,934,No,2022-11-03,2025-09-04,https://fonts.google.com/specimen/Alexandria
+Alfa Slab One,Display,Serif,Display,bold decorative headline attention-grabbing creative expressive transitional oldstyle didone headline hero decorative large-text attention english western european extended-latin european vietnamese popular widely-used,400,,latin | latin-ext | vietnamese,JM Solé,105,615,No,2011-12-19,2025-09-04,https://fonts.google.com/specimen/Alfa+Slab+One
+Alice,Serif,Serif,,elegant traditional classic refined literary editorial transitional oldstyle didone russian cyrillic slavic cyrillic extended english western european extended-latin european,400,,cyrillic | cyrillic-ext | latin | latin-ext,Ksenya Erulevich | Cyreal,413,1692,No,2011-08-10,2025-09-08,https://fonts.google.com/specimen/Alice
+Alike,Serif,Serif,,elegant traditional classic refined literary editorial transitional oldstyle didone english western european extended-latin european,400,,latin | latin-ext | math | symbols,Sveta Sebyakina | Cyreal,883,1974,No,2011-08-24,2025-09-04,https://fonts.google.com/specimen/Alike
+Alike Angular,Serif,Serif,Display,elegant traditional classic refined literary editorial transitional oldstyle didone headline hero decorative large-text attention english western european extended-latin european,400,,latin | latin-ext | math | symbols,Sveta Sebyakina | Cyreal,1027,1528,No,2011-09-28,2025-09-04,https://fonts.google.com/specimen/Alike+Angular
+Alkalami,Serif,Serif,,elegant traditional classic refined literary editorial transitional oldstyle didone arabic RTL middle-east english western european extended-latin european,400,,arabic | latin | latin-ext,SIL International,1232,939,No,2022-06-09,2025-09-16,https://fonts.google.com/specimen/Alkalami
+Alkatra,Display,,Display,bold decorative headline attention-grabbing creative expressive  headline hero decorative large-text attention variable variable-font responsive variable-weight bengali bangladeshi indian hindi devanagari indian english western european extended-latin european odia oriya indian,400 | 500 | 600 | 700,wght: -,bengali | devanagari | latin | latin-ext | oriya,Suman Bhandary,1197,1951,No,2023-01-27,2025-09-08,https://fonts.google.com/specimen/Alkatra
+Allan,Display,Serif,Display,bold decorative headline attention-grabbing creative expressive transitional oldstyle didone headline hero decorative large-text attention english western european extended-latin european,400 | 700,,latin | latin-ext,Anton Koovit,884,837,No,2010-12-15,2025-09-16,https://fonts.google.com/specimen/Allan
+Allerta,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque english western european,400,,latin,Matt McInerney,681,677,No,2010-11-30,2025-09-04,https://fonts.google.com/specimen/Allerta
+Allerta Stencil,Sans Serif,Sans Serif,Display,clean modern minimal professional readable neutral geometric humanist grotesque headline hero decorative large-text attention english western european,400,,latin,Matt McInerney,590,1873,No,2010-11-30,2025-09-11,https://fonts.google.com/specimen/Allerta+Stencil
+Allison,Handwriting,,Display | Handwriting,personal casual friendly warm handwritten script organic  headline hero decorative large-text attention script cursive hand-drawn artistic informal english western european extended-latin european vietnamese,400,,latin | latin-ext | vietnamese,Robert Leuschke,674,214,No,2021-07-02,2025-09-16,https://fonts.google.com/specimen/Allison
+Allkin,Display,,Display,bold decorative headline attention-grabbing creative expressive  headline hero decorative large-text attention,400,,,Monotype Imaging Inc.,1311,9,No,2026-02-18,2026-02-19,https://fonts.google.com/specimen/Allkin
+Allura,Handwriting,,Handwriting | Display,personal casual friendly warm handwritten script organic  script cursive hand-drawn artistic informal headline hero decorative large-text attention english western european extended-latin european vietnamese well-known common,400,,latin | latin-ext | vietnamese,Robert Leuschke,271,1629,No,2012-02-08,2025-09-02,https://fonts.google.com/specimen/Allura
+Almarai,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque arabic RTL middle-east english western european popular widely-used,300 | 400 | 700 | 800,,arabic | latin,Boutros Fonts | Mourad Boutros,132,208,No,2019-06-04,2025-09-02,https://fonts.google.com/specimen/Almarai
+Almendra,Serif,Serif,Display,elegant traditional classic refined literary editorial transitional oldstyle didone headline hero decorative large-text attention italic english western european extended-latin european,400 | 400i | 700 | 700i,,latin | latin-ext,Ana Sanfelippo,909,238,No,2011-12-19,2025-09-04,https://fonts.google.com/specimen/Almendra
+Almendra Display,Display,Serif,Display,bold decorative headline attention-grabbing creative expressive transitional oldstyle didone headline hero decorative large-text attention english western european extended-latin european,400,,latin | latin-ext,Ana Sanfelippo,1427,1901,No,2012-11-12,2025-09-04,https://fonts.google.com/specimen/Almendra+Display
+Almendra SC,Serif,Serif,Display,elegant traditional classic refined literary editorial transitional oldstyle didone headline hero decorative large-text attention english western european,400,,latin,Ana Sanfelippo,1378,1475,No,2011-12-19,2025-09-10,https://fonts.google.com/specimen/Almendra+SC
+Alumni Sans,Sans Serif,Sans Serif,Display,clean modern minimal professional readable neutral geometric humanist grotesque headline hero decorative large-text attention versatile multi-weight flexible italic variable variable-font responsive variable-weight russian cyrillic slavic cyrillic extended english western european extended-latin european vietnamese well-known common,100 | 100i | 200 | 200i | 300 | 300i | 400 | 400i | 500 | 500i | 600 | 600i | 700 | 700i | 800 | 800i | 900 | 900i,wght: -,cyrillic | cyrillic-ext | latin | latin-ext | vietnamese,Robert Leuschke,228,234,No,2021-06-19,2025-09-02,https://fonts.google.com/specimen/Alumni+Sans
+Alumni Sans Collegiate One,Sans Serif,Sans Serif,Display,clean modern minimal professional readable neutral geometric humanist grotesque headline hero decorative large-text attention italic russian cyrillic slavic english western european extended-latin european vietnamese,400 | 400i,,cyrillic | latin | latin-ext | vietnamese,Robert Leuschke,1469,352,No,2022-04-09,2025-09-16,https://fonts.google.com/specimen/Alumni+Sans+Collegiate+One
+Alumni Sans Inline One,Display,Sans Serif,Display,bold decorative headline attention-grabbing creative expressive geometric humanist grotesque headline hero decorative large-text attention italic english western european extended-latin european vietnamese,400 | 400i,,latin | latin-ext | vietnamese,Robert Leuschke,1648,2243,No,2022-02-24,2025-09-04,https://fonts.google.com/specimen/Alumni+Sans+Inline+One
+Alumni Sans Pinstripe,Sans Serif,Sans Serif,Display,clean modern minimal professional readable neutral geometric humanist grotesque headline hero decorative large-text attention italic russian cyrillic slavic cyrillic extended english western european extended-latin european vietnamese,400 | 400i,,cyrillic | cyrillic-ext | latin | latin-ext | vietnamese,Robert Leuschke,1471,1835,No,2022-06-08,2025-09-16,https://fonts.google.com/specimen/Alumni+Sans+Pinstripe
+Alumni Sans SC,Sans Serif,Sans Serif,Display,clean modern minimal professional readable neutral geometric humanist grotesque headline hero decorative large-text attention versatile multi-weight flexible italic variable variable-font responsive variable-weight russian cyrillic slavic cyrillic extended english western european extended-latin european vietnamese,100 | 100i | 200 | 200i | 300 | 300i | 400 | 400i | 500 | 500i | 600 | 600i | 700 | 700i | 800 | 800i | 900 | 900i,wght: -,cyrillic | cyrillic-ext | latin | latin-ext | vietnamese,Robert Leuschke,1715,316,No,2025-05-28,2025-09-08,https://fonts.google.com/specimen/Alumni+Sans+SC
+Alyamama,Serif,Serif,,elegant traditional classic refined literary editorial transitional oldstyle didone versatile multi-weight flexible variable variable-font responsive variable-weight arabic RTL middle-east greek english western european extended-latin european,300 | 400 | 500 | 600 | 700 | 800 | 900,wght: -,arabic | greek | latin | latin-ext,Yazeed Omar,1730,40,No,2026-02-18,2026-02-19,https://fonts.google.com/specimen/Alyamama
+Amarante,Display,Serif,Display,bold decorative headline attention-grabbing creative expressive transitional oldstyle didone headline hero decorative large-text attention english western european extended-latin european,400,,latin | latin-ext,Karolina Lach,857,1824,No,2012-07-10,2025-09-11,https://fonts.google.com/specimen/Amarante
+Amaranth,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque italic english western european,400 | 400i | 700 | 700i,,latin,Gesine Todt,344,1535,No,2011-05-04,2025-09-04,https://fonts.google.com/specimen/Amaranth
+Amarna,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque versatile multi-weight flexible italic variable variable-font responsive variable-weight english western european extended-latin european,100 | 100i | 200 | 200i | 300 | 300i | 400 | 400i | 500 | 500i | 600 | 600i | 700 | 700i,wght: -,latin | latin-ext,Ishtār van Looy,1895,762,No,2025-12-08,2026-02-26,https://fonts.google.com/specimen/Amarna
+Amatic SC,Handwriting,Sans Serif,Display,personal casual friendly warm handwritten script organic geometric humanist grotesque headline hero decorative large-text attention russian cyrillic slavic hebrew RTL israeli english western european extended-latin european vietnamese well-known common,400 | 700,,cyrillic | hebrew | latin | latin-ext | vietnamese,Vernon Adams | Ben Nathan | Thomas Jockin,226,1725,No,2011-10-12,2025-09-16,https://fonts.google.com/specimen/Amatic+SC
+Amethysta,Serif,Serif,,elegant traditional classic refined literary editorial transitional oldstyle didone english western european,400,,latin,Cyreal,1063,1457,No,2012-01-18,2025-09-10,https://fonts.google.com/specimen/Amethysta
+Amiko,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque hindi devanagari indian english western european extended-latin european,400 | 600 | 700,,devanagari | latin | latin-ext,Impallari Type,697,1966,No,2016-03-01,2025-09-16,https://fonts.google.com/specimen/Amiko
+Amiri,Serif,Serif,,elegant traditional classic refined literary editorial transitional oldstyle didone italic arabic RTL middle-east english western european extended-latin european well-known common,400 | 400i | 700 | 700i,,arabic | latin | latin-ext,Khaled Hosny | Sebastian Kosch,200,270,No,2012-07-30,2025-08-26,https://fonts.google.com/specimen/Amiri
+Amiri Quran,Serif,Serif,,elegant traditional classic refined literary editorial transitional oldstyle didone arabic RTL middle-east english western european,400,,arabic | latin,Khaled Hosny | Sebastian Kosch,1344,141,No,2022-08-10,2025-08-26,https://fonts.google.com/specimen/Amiri+Quran
+Amita,Handwriting,Serif,Display,personal casual friendly warm handwritten script organic transitional oldstyle didone headline hero decorative large-text attention hindi devanagari indian english western european extended-latin european,400 | 700,,devanagari | latin | latin-ext,Eduardo Tunni | Brian Bonislawsky,388,1302,No,2015-05-20,2025-09-11,https://fonts.google.com/specimen/Amita
+Anaheim,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque variable variable-font responsive variable-weight english western european extended-latin european vietnamese,400 | 500 | 600 | 700 | 800,wght: -,latin | latin-ext | vietnamese,Vernon Adams,1083,2157,No,2012-10-31,2025-09-04,https://fonts.google.com/specimen/Anaheim
+Ancizar Sans,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque versatile multi-weight flexible italic variable variable-font responsive variable-weight greek english western european extended-latin european,100 | 1000 | 1000i | 100i | 200 | 200i | 300 | 300i | 400 | 400i | 500 | 500i | 600 | 600i | 700 | 700i | 800 | 800i | 900 | 900i,wght: -,greek | latin | latin-ext,Universidad Nacional de Colombia (UNAL) | César Puertas | Viviana Monsalve | Julián Moncada,1607,2169,No,2025-05-08,2025-09-11,https://fonts.google.com/specimen/Ancizar+Sans
+Ancizar Serif,Serif,Serif,,elegant traditional classic refined literary editorial transitional oldstyle didone versatile multi-weight flexible italic variable variable-font responsive variable-weight greek english western european extended-latin european,300 | 300i | 400 | 400i | 500 | 500i | 600 | 600i | 700 | 700i | 800 | 800i | 900 | 900i,wght: -,greek | latin | latin-ext,Universidad Nacional de Colombia (UNAL) | César Puertas | Viviana Monsalve | Julián Moncada,1595,215,No,2025-05-08,2025-09-16,https://fonts.google.com/specimen/Ancizar+Serif
+Andada Pro,Serif,Serif,,elegant traditional classic refined literary editorial transitional oldstyle didone italic variable variable-font responsive variable-weight english western european extended-latin european vietnamese well-known common,400 | 400i | 500 | 500i | 600 | 600i | 700 | 700i | 800 | 800i,wght: -,latin | latin-ext | vietnamese,Huerta Tipográfica | Carolina Giovagnoli,273,686,No,2021-05-19,2025-09-10,https://fonts.google.com/specimen/Andada+Pro
+Andika,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque italic russian cyrillic slavic cyrillic extended english western european extended-latin european vietnamese,400 | 400i | 700 | 700i,,cyrillic | cyrillic-ext | latin | latin-ext | vietnamese,SIL International,409,932,No,2011-08-10,2025-09-10,https://fonts.google.com/specimen/Andika
+Anek Bangla,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque versatile multi-weight flexible variable variable-font responsive variable-weight variable-width bengali bangladeshi indian english western european extended-latin european,100 | 200 | 300 | 400 | 500 | 600 | 700 | 800,wdth: - | wght: -,bengali | latin | latin-ext,Ek Type,332,45,No,2022-02-08,2025-09-16,https://fonts.google.com/specimen/Anek+Bangla
+Anek Devanagari,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque versatile multi-weight flexible variable variable-font responsive variable-weight variable-width hindi devanagari indian english western european extended-latin european,100 | 200 | 300 | 400 | 500 | 600 | 700 | 800,wdth: - | wght: -,devanagari | latin | latin-ext,Ek Type,509,28,No,2022-02-08,2025-09-16,https://fonts.google.com/specimen/Anek+Devanagari
+Anek Gujarati,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque versatile multi-weight flexible variable variable-font responsive variable-weight variable-width gujarati indian english western european extended-latin european,100 | 200 | 300 | 400 | 500 | 600 | 700 | 800,wdth: - | wght: -,gujarati | latin | latin-ext,Ek Type,1240,235,No,2022-02-08,2025-09-11,https://fonts.google.com/specimen/Anek+Gujarati
+Anek Gurmukhi,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque versatile multi-weight flexible variable variable-font responsive variable-weight variable-width punjabi gurmukhi indian english western european extended-latin european,100 | 200 | 300 | 400 | 500 | 600 | 700 | 800,wdth: - | wght: -,gurmukhi | latin | latin-ext,Ek Type,1523,1696,No,2022-02-15,2025-09-04,https://fonts.google.com/specimen/Anek+Gurmukhi
+Anek Kannada,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque versatile multi-weight flexible variable variable-font responsive variable-weight variable-width kannada indian english western european extended-latin european,100 | 200 | 300 | 400 | 500 | 600 | 700 | 800,wdth: - | wght: -,kannada | latin | latin-ext,Ek Type,1343,793,No,2022-02-15,2025-09-11,https://fonts.google.com/specimen/Anek+Kannada
+Anek Latin,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque versatile multi-weight flexible variable variable-font responsive variable-weight variable-width english western european extended-latin european vietnamese,100 | 200 | 300 | 400 | 500 | 600 | 700 | 800,wdth: - | wght: -,latin | latin-ext | vietnamese,Ek Type,630,1713,No,2022-02-15,2025-09-16,https://fonts.google.com/specimen/Anek+Latin
+Anek Malayalam,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque versatile multi-weight flexible variable variable-font responsive variable-weight variable-width english western european extended-latin european malayalam indian,100 | 200 | 300 | 400 | 500 | 600 | 700 | 800,wdth: - | wght: -,latin | latin-ext | malayalam,Ek Type,986,1745,No,2022-02-15,2025-09-16,https://fonts.google.com/specimen/Anek+Malayalam
+Anek Odia,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque versatile multi-weight flexible variable variable-font responsive variable-weight variable-width english western european extended-latin european odia oriya indian,100 | 200 | 300 | 400 | 500 | 600 | 700 | 800,wdth: - | wght: -,latin | latin-ext | oriya,Ek Type,1519,782,No,2022-02-08,2025-09-11,https://fonts.google.com/specimen/Anek+Odia
+Anek Tamil,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque versatile multi-weight flexible variable variable-font responsive variable-weight variable-width english western european extended-latin european tamil indian,100 | 200 | 300 | 400 | 500 | 600 | 700 | 800,wdth: - | wght: -,latin | latin-ext | tamil,Ek Type,1147,713,No,2022-02-08,2025-09-16,https://fonts.google.com/specimen/Anek+Tamil
+Anek Telugu,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque versatile multi-weight flexible variable variable-font responsive variable-weight variable-width english western european extended-latin european telugu indian popular widely-used,100 | 200 | 300 | 400 | 500 | 600 | 700 | 800,wdth: - | wght: -,latin | latin-ext | telugu,Ek Type,103,1009,No,2022-02-15,2025-09-08,https://fonts.google.com/specimen/Anek+Telugu
+Angkor,Display,Serif,Display,bold decorative headline attention-grabbing creative expressive transitional oldstyle didone headline hero decorative large-text attention khmer cambodian english western european,400,,khmer | latin,Danh Hong,1088,505,No,2011-03-02,2025-09-08,https://fonts.google.com/specimen/Angkor
+Annapurna SIL,Serif,Serif,,elegant traditional classic refined literary editorial transitional oldstyle didone hindi devanagari indian english western european extended-latin european,400 | 700,,devanagari | latin | latin-ext | math | symbols,SIL International,1602,781,No,2024-02-14,2025-05-30,https://fonts.google.com/specimen/Annapurna+SIL
+Annie Use Your Telescope,Handwriting,,Handwriting,personal casual friendly warm handwritten script organic  script cursive hand-drawn artistic informal english western european extended-latin european,400,,latin | latin-ext,Kimberly Geswein,675,1129,No,2011-04-14,2025-09-10,https://fonts.google.com/specimen/Annie+Use+Your+Telescope
+Anonymous Pro,Monospace,,Monospace,code developer technical fixed-width terminal programming  mono fixed-width tabular data code italic russian cyrillic slavic greek english western european extended-latin european,400 | 400i | 700 | 700i,,cyrillic | greek | latin | latin-ext,Mark Simonson,435,1374,No,2010-12-15,2025-09-08,https://fonts.google.com/specimen/Anonymous+Pro
+Anta,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque english western european extended-latin european,400,,latin | latin-ext | math | symbols,Sergej Lebedev,1202,1897,No,2024-02-14,2025-05-30,https://fonts.google.com/specimen/Anta
+Antic,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque english western european,400,,latin,Santiago Orozco,710,1518,No,2011-08-31,2025-09-04,https://fonts.google.com/specimen/Antic
+Antic Didone,Serif,Serif,,elegant traditional classic refined literary editorial transitional oldstyle didone english western european,400,,latin,Santiago Orozco,713,1229,No,2012-03-14,2025-09-04,https://fonts.google.com/specimen/Antic+Didone
+Antic Slab,Serif,Serif,,elegant traditional classic refined literary editorial transitional oldstyle didone english western european well-known common,400,,latin,Santiago Orozco,233,744,No,2012-03-14,2025-09-10,https://fonts.google.com/specimen/Antic+Slab
+Anton,Sans Serif,Sans Serif,Display,clean modern minimal professional readable neutral geometric humanist grotesque headline hero decorative large-text attention english western european extended-latin european vietnamese popular widely-used,400,,latin | latin-ext | vietnamese,Vernon Adams,89,1376,No,2011-02-23,2025-09-16,https://fonts.google.com/specimen/Anton
+Anton SC,Sans Serif,Sans Serif,Display,clean modern minimal professional readable neutral geometric humanist grotesque headline hero decorative large-text attention english western european extended-latin european vietnamese,400,,latin | latin-ext | vietnamese,Vernon Adams,788,566,No,2024-06-25,2025-05-30,https://fonts.google.com/specimen/Anton+SC
+Antonio,Sans Serif,Sans Serif,Display,clean modern minimal professional readable neutral geometric humanist grotesque headline hero decorative large-text attention versatile multi-weight flexible variable variable-font responsive variable-weight english western european extended-latin european,100 | 200 | 300 | 400 | 500 | 600 | 700,wght: -,latin | latin-ext,Vernon Adams,340,463,No,2013-03-05,2025-09-04,https://fonts.google.com/specimen/Antonio
+Anuphan,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque versatile multi-weight flexible variable variable-font responsive variable-weight english western european extended-latin european thai southeast-asia vietnamese,100 | 200 | 300 | 400 | 500 | 600 | 700,wght: -,latin | latin-ext | thai | vietnamese,Cadson Demak,628,2246,No,2023-02-22,2025-09-10,https://fonts.google.com/specimen/Anuphan
+Anybody,Display,Sans Serif,Display,bold decorative headline attention-grabbing creative expressive geometric humanist grotesque headline hero decorative large-text attention versatile multi-weight flexible italic variable variable-font responsive variable-weight variable-width english western european extended-latin european vietnamese,100 | 100i | 200 | 200i | 300 | 300i | 400 | 400i | 500 | 500i | 600 | 600i | 700 | 700i | 800 | 800i | 900 | 900i,wdth: - | wght: -,latin | latin-ext | vietnamese,Tyler Finck,916,1933,No,2022-03-02,2025-09-16,https://fonts.google.com/specimen/Anybody
+Aoboshi One,Serif,Serif,,elegant traditional classic refined literary editorial transitional oldstyle didone japanese kanji hiragana katakana english western european extended-latin european,400,,japanese | latin | latin-ext,Natsumi Matsuba,1084,584,No,2023-05-23,2025-09-11,https://fonts.google.com/specimen/Aoboshi+One
+Arapey,Serif,Serif,,elegant traditional classic refined literary editorial transitional oldstyle didone italic english western european,400 | 400i,,latin,Eduardo Tunni,480,947,No,2011-11-02,2025-09-02,https://fonts.google.com/specimen/Arapey
+Arbutus,Serif,Slab Serif,Display,elegant traditional classic refined literary editorial slab mechanical sturdy strong headline hero decorative large-text attention english western european extended-latin european,400,,latin | latin-ext,Karolina Lach,1400,162,No,2011-12-07,2025-09-11,https://fonts.google.com/specimen/Arbutus
+Arbutus Slab,Serif,Serif,,elegant traditional classic refined literary editorial transitional oldstyle didone english western european extended-latin european,400,,latin | latin-ext,Karolina Lach,553,765,No,2012-09-18,2025-09-11,https://fonts.google.com/specimen/Arbutus+Slab
+Architects Daughter,Handwriting,,Handwriting,personal casual friendly warm handwritten script organic  script cursive hand-drawn artistic informal english western european extended-latin european,400,,latin | latin-ext,Kimberly Geswein,330,469,No,2011-03-09,2025-09-16,https://fonts.google.com/specimen/Architects+Daughter
+Archivo,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque versatile multi-weight flexible italic variable variable-font responsive variable-weight variable-width english western european extended-latin european vietnamese top-popular trending most-used,100 | 100i | 200 | 200i | 300 | 300i | 400 | 400i | 500 | 500i | 600 | 600i | 700 | 700i | 800 | 800i | 900 | 900i,wdth: - | wght: -,latin | latin-ext | vietnamese,Omnibus-Type,35,242,No,2016-12-03,2025-09-08,https://fonts.google.com/specimen/Archivo
+Archivo Black,Sans Serif,Sans Serif,Display,clean modern minimal professional readable neutral geometric humanist grotesque headline hero decorative large-text attention english western european extended-latin european top-popular trending most-used,400,,latin | latin-ext,Omnibus-Type,46,567,No,2012-09-18,2025-09-11,https://fonts.google.com/specimen/Archivo+Black
+Archivo Narrow,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque italic variable variable-font responsive variable-weight english western european extended-latin european vietnamese well-known common,400 | 400i | 500 | 500i | 600 | 600i | 700 | 700i,wght: -,latin | latin-ext | vietnamese,Omnibus-Type,170,854,No,2012-09-18,2025-09-11,https://fonts.google.com/specimen/Archivo+Narrow
+Are You Serious,Handwriting,,Display | Handwriting,personal casual friendly warm handwritten script organic  headline hero decorative large-text attention script cursive hand-drawn artistic informal english western european extended-latin european vietnamese,400,,latin | latin-ext | vietnamese,Robert Leuschke,1650,1350,No,2021-08-27,2025-09-16,https://fonts.google.com/specimen/Are+You+Serious
+Aref Ruqaa,Serif,Serif,,elegant traditional classic refined literary editorial transitional oldstyle didone arabic RTL middle-east english western european extended-latin european,400 | 700,,arabic | latin | latin-ext,Abdullah Aref | Khaled Hosny | Hermann Zapf,957,1750,No,2016-06-20,2025-09-11,https://fonts.google.com/specimen/Aref+Ruqaa
+Aref Ruqaa Ink,Serif,Serif,Display,elegant traditional classic refined literary editorial transitional oldstyle didone headline hero decorative large-text attention arabic RTL middle-east english western european extended-latin european,400 | 700,,arabic | latin | latin-ext,Abdullah Aref | Khaled Hosny | Hermann Zapf,1573,1176,No,2022-02-26,2025-05-30,https://fonts.google.com/specimen/Aref+Ruqaa+Ink
+Arima,Display,,Display,bold decorative headline attention-grabbing creative expressive  headline hero decorative large-text attention versatile multi-weight flexible variable variable-font responsive variable-weight greek greek extended english western european extended-latin european malayalam indian tamil indian vietnamese multilingual international,100 | 200 | 300 | 400 | 500 | 600 | 700,wght: -,greek | greek-ext | latin | latin-ext | malayalam | tamil | vietnamese,Natanael Gama | Joana Correia | Rosalie Wagner,958,56,No,2022-05-24,2025-09-10,https://fonts.google.com/specimen/Arima
+Arimo,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque italic variable variable-font responsive variable-weight russian cyrillic slavic cyrillic extended greek greek extended hebrew RTL israeli english western european extended-latin european vietnamese multilingual international top-popular trending most-used,400 | 400i | 500 | 500i | 600 | 600i | 700 | 700i,wght: -,cyrillic | cyrillic-ext | greek | greek-ext | hebrew | latin | latin-ext | vietnamese,Steve Matteson,17,1241,No,2010-11-18,2025-09-08,https://fonts.google.com/specimen/Arimo
+Arizonia,Handwriting,,Display | Handwriting,personal casual friendly warm handwritten script organic  headline hero decorative large-text attention script cursive hand-drawn artistic informal english western european extended-latin european vietnamese,400,,latin | latin-ext | vietnamese,Robert Leuschke,695,897,No,2011-12-19,2025-09-11,https://fonts.google.com/specimen/Arizonia
+Armata,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque english western european extended-latin european,400,,latin | latin-ext,Viktoriya Grabowska,565,1343,No,2011-12-19,2025-09-11,https://fonts.google.com/specimen/Armata
+Arsenal,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque italic russian cyrillic slavic cyrillic extended english western european extended-latin european vietnamese,400 | 400i | 700 | 700i,,cyrillic | cyrillic-ext | latin | latin-ext | vietnamese,Andrij Shevchenko,418,1230,No,2016-12-06,2025-09-16,https://fonts.google.com/specimen/Arsenal
+Arsenal SC,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque italic russian cyrillic slavic cyrillic extended english western european extended-latin european vietnamese,400 | 400i | 700 | 700i,,cyrillic | cyrillic-ext | latin | latin-ext | vietnamese,Andrij Shevchenko,1578,375,No,2024-06-25,2025-05-30,https://fonts.google.com/specimen/Arsenal+SC
+Artifika,Serif,Serif,,elegant traditional classic refined literary editorial transitional oldstyle didone english western european,400,,latin,Cyreal,1049,1866,No,2011-06-01,2025-09-16,https://fonts.google.com/specimen/Artifika
+Arvo,Serif,Slab Serif,,elegant traditional classic refined literary editorial slab mechanical sturdy strong italic english western european popular widely-used,400 | 400i | 700 | 700i,,latin,Anton Koovit,125,573,No,2010-11-17,2025-06-02,https://fonts.google.com/specimen/Arvo
+Arya,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque hindi devanagari indian english western european extended-latin european,400 | 700,,devanagari | latin | latin-ext,Eduardo Tunni,843,71,No,2015-05-20,2025-09-02,https://fonts.google.com/specimen/Arya
+Asap,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque versatile multi-weight flexible italic variable variable-font responsive variable-weight variable-width english western european extended-latin european vietnamese well-known common,100 | 100i | 200 | 200i | 300 | 300i | 400 | 400i | 500 | 500i | 600 | 600i | 700 | 700i | 800 | 800i | 900 | 900i,wdth: - | wght: -,latin | latin-ext | vietnamese,Omnibus-Type,152,1005,No,2012-01-25,2025-09-04,https://fonts.google.com/specimen/Asap
+Asap Condensed,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque versatile multi-weight flexible italic english western european extended-latin european vietnamese,200 | 200i | 300 | 300i | 400 | 400i | 500 | 500i | 600 | 600i | 700 | 700i | 800 | 800i | 900 | 900i,,latin | latin-ext | vietnamese,Omnibus-Type,328,1525,No,2017-07-31,2025-09-02,https://fonts.google.com/specimen/Asap+Condensed
+Asar,Serif,Serif,,elegant traditional classic refined literary editorial transitional oldstyle didone hindi devanagari indian english western european extended-latin european,400,,devanagari | latin | latin-ext,Sorkin Type,1058,1728,No,2015-06-17,2025-09-04,https://fonts.google.com/specimen/Asar
+Asimovian,Sans Serif,Sans Serif,Display,clean modern minimal professional readable neutral geometric humanist grotesque headline hero decorative large-text attention english western european extended-latin european vietnamese,400,,latin | latin-ext | vietnamese,Carolina Short,1754,518,No,2025-08-25,2025-08-26,https://fonts.google.com/specimen/Asimovian
+Asset,Display,Serif,Display,bold decorative headline attention-grabbing creative expressive transitional oldstyle didone headline hero decorative large-text attention cyrillic extended english western european extended-latin european,400,,cyrillic-ext | latin | latin-ext | math | symbols,Riccardo De Franceschi | Eben Sorkin,1159,1359,No,2011-06-29,2025-09-08,https://fonts.google.com/specimen/Asset
+Assistant,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque versatile multi-weight flexible variable variable-font responsive variable-weight hebrew RTL israeli english western european extended-latin european popular widely-used,200 | 300 | 400 | 500 | 600 | 700 | 800,wght: -,hebrew | latin | latin-ext,Adobe Systems Inc. | Ben Nathan,99,1222,No,2016-03-31,2025-09-08,https://fonts.google.com/specimen/Assistant
+Asta Sans,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque versatile multi-weight flexible variable variable-font responsive variable-weight korean hangul english western european,300 | 400 | 500 | 600 | 700 | 800,wght: -,korean | latin,42dot,1291,170,No,2025-05-28,2025-09-08,https://fonts.google.com/specimen/Asta+Sans
+Astloch,Display,,Display,bold decorative headline attention-grabbing creative expressive  headline hero decorative large-text attention english western european,400 | 700,,latin,Dan Rhatigan,1196,883,No,2011-02-16,2025-09-16,https://fonts.google.com/specimen/Astloch
+Asul,Serif,Serif,Display,elegant traditional classic refined literary editorial transitional oldstyle didone headline hero decorative large-text attention english western european,400 | 700,,latin,Mariela Monsalve,913,1265,No,2011-12-19,2025-06-25,https://fonts.google.com/specimen/Asul
+Athiti,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque versatile multi-weight flexible english western european extended-latin european thai southeast-asia vietnamese,200 | 300 | 400 | 500 | 600 | 700,,latin | latin-ext | thai | vietnamese,Cadson Demak,589,290,No,2016-06-15,2025-09-04,https://fonts.google.com/specimen/Athiti
+Atkinson Hyperlegible,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque italic english western european extended-latin european well-known common,400 | 400i | 700 | 700i,,latin | latin-ext,Braille Institute | Applied Design Works | Elliott Scott | Megan Eiswerth | Linus Boman | Theodore Petrosky,230,1689,No,2021-04-30,2025-09-04,https://fonts.google.com/specimen/Atkinson+Hyperlegible
+Atkinson Hyperlegible Mono,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque versatile multi-weight flexible italic variable variable-font responsive variable-weight english western european extended-latin european,200 | 200i | 300 | 300i | 400 | 400i | 500 | 500i | 600 | 600i | 700 | 700i | 800 | 800i,wght: -,latin | latin-ext,Braille Institute | Applied Design Works | Elliott Scott | Megan Eiswerth | Letters From Sweden,1601,1742,No,2024-11-19,2025-09-16,https://fonts.google.com/specimen/Atkinson+Hyperlegible+Mono
+Atkinson Hyperlegible Next,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque versatile multi-weight flexible italic variable variable-font responsive variable-weight english western european extended-latin european,200 | 200i | 300 | 300i | 400 | 400i | 500 | 500i | 600 | 600i | 700 | 700i | 800 | 800i,wght: -,latin | latin-ext,Braille Institute | Applied Design Works | Elliott Scott | Megan Eiswerth | Letters From Sweden,528,1189,No,2025-01-06,2025-09-04,https://fonts.google.com/specimen/Atkinson+Hyperlegible+Next
+Atma,Display,,Display,bold decorative headline attention-grabbing creative expressive  headline hero decorative large-text attention bengali bangladeshi indian english western european extended-latin european,300 | 400 | 500 | 600 | 700,,bengali | latin | latin-ext,Black Foundry,392,24,No,2016-06-15,2025-09-16,https://fonts.google.com/specimen/Atma
+Atomic Age,Display,,Display,bold decorative headline attention-grabbing creative expressive  headline hero decorative large-text attention english western european extended-latin european,400,,latin | latin-ext,James Grieshaber,1329,2266,No,2011-10-26,2025-09-10,https://fonts.google.com/specimen/Atomic+Age
+Aubrey,Display,,Display,bold decorative headline attention-grabbing creative expressive  headline hero decorative large-text attention english western european,400,,latin,Cyreal,1697,2034,No,2011-07-27,2025-09-11,https://fonts.google.com/specimen/Aubrey
+Audiowide,Display,Sans Serif,Display,bold decorative headline attention-grabbing creative expressive geometric humanist grotesque headline hero decorative large-text attention english western european extended-latin european,400,,latin | latin-ext,Astigmatic,326,455,No,2012-04-04,2025-09-16,https://fonts.google.com/specimen/Audiowide
+Autour One,Display,,Display,bold decorative headline attention-grabbing creative expressive  headline hero decorative large-text attention english western european extended-latin european,400,,latin | latin-ext,Sorkin Type,1449,2143,No,2012-05-15,2025-09-11,https://fonts.google.com/specimen/Autour+One
+Average,Serif,Serif,,elegant traditional classic refined literary editorial transitional oldstyle didone english western european extended-latin european,400,,latin | latin-ext,Eduardo Tunni,820,1743,No,2012-03-14,2025-09-04,https://fonts.google.com/specimen/Average
+Average Sans,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque english western european extended-latin european,400,,latin | latin-ext,Eduardo Tunni,672,445,No,2012-10-26,2025-09-10,https://fonts.google.com/specimen/Average+Sans
+Averia Gruesa Libre,Display,,Display,bold decorative headline attention-grabbing creative expressive  headline hero decorative large-text attention english western european extended-latin european,400,,latin | latin-ext,Dan Sayers,1044,2080,No,2012-03-14,2025-05-30,https://fonts.google.com/specimen/Averia+Gruesa+Libre
+Averia Libre,Display,,Display,bold decorative headline attention-grabbing creative expressive  headline hero decorative large-text attention italic english western european,300 | 300i | 400 | 400i | 700 | 700i,,latin,Dan Sayers,593,628,No,2012-03-14,2025-05-30,https://fonts.google.com/specimen/Averia+Libre
+Averia Sans Libre,Display,Sans Serif,Display,bold decorative headline attention-grabbing creative expressive geometric humanist grotesque headline hero decorative large-text attention italic english western european,300 | 300i | 400 | 400i | 700 | 700i,,latin,Dan Sayers,764,35,No,2012-03-14,2025-06-02,https://fonts.google.com/specimen/Averia+Sans+Libre
+Averia Serif Libre,Display,Serif,Display,bold decorative headline attention-grabbing creative expressive transitional oldstyle didone headline hero decorative large-text attention italic english western european,300 | 300i | 400 | 400i | 700 | 700i,,latin,Dan Sayers,484,340,No,2012-03-14,2025-06-02,https://fonts.google.com/specimen/Averia+Serif+Libre
+Azeret Mono,Monospace,,Monospace,code developer technical fixed-width terminal programming  mono fixed-width tabular data code versatile multi-weight flexible italic variable variable-font responsive variable-weight english western european extended-latin european,100 | 100i | 200 | 200i | 300 | 300i | 400 | 400i | 500 | 500i | 600 | 600i | 700 | 700i | 800 | 800i | 900 | 900i,wght: -,latin | latin-ext,Displaay | Martin Vácha,748,1909,No,2021-06-08,2025-09-04,https://fonts.google.com/specimen/Azeret+Mono
+B612,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque italic english western european,400 | 400i | 700 | 700i,,latin,PolarSys | Nicolas Chauveau | Thomas Paillot | Jonathan Favre-Lamarine | Jean-Luc Vinot,836,266,No,2018-12-11,2025-09-16,https://fonts.google.com/specimen/B612
+B612 Mono,Monospace,Sans Serif,Monospace,code developer technical fixed-width terminal programming geometric humanist grotesque mono fixed-width tabular data code italic english western european,400 | 400i | 700 | 700i,,latin,Nicolas Chauveau | Thomas Paillot | Jonathan Favre-Lamarine | Jean-Luc Vinot,714,140,No,2018-12-11,2025-09-16,https://fonts.google.com/specimen/B612+Mono
+BBH Bartle,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque english western european,400,,latin,Studio DRAMA,1670,1447,No,2025-12-08,2025-12-10,https://fonts.google.com/specimen/BBH+Bartle
+BBH Bogle,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque english western european,400,,latin,Studio DRAMA,1740,146,No,2025-12-08,2025-12-10,https://fonts.google.com/specimen/BBH+Bogle
+BBH Hegarty,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque english western european,400,,latin,Studio DRAMA,1847,2060,No,2025-12-08,2025-12-10,https://fonts.google.com/specimen/BBH+Hegarty
+BIZ UDGothic,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque russian cyrillic slavic greek extended japanese kanji hiragana katakana english western european extended-latin european,400 | 700,,cyrillic | greek-ext | japanese | latin | latin-ext,Type Bank Co. | Morisawa Inc.,619,802,No,2022-03-16,2025-05-30,https://fonts.google.com/specimen/BIZ+UDGothic
+BIZ UDMincho,Serif,Serif,,elegant traditional classic refined literary editorial transitional oldstyle didone russian cyrillic slavic greek extended japanese kanji hiragana katakana english western european extended-latin european,400 | 700,,cyrillic | greek-ext | japanese | latin | latin-ext,Type Bank Co. | Morisawa Inc.,1350,1670,No,2022-03-16,2025-05-30,https://fonts.google.com/specimen/BIZ+UDMincho
+BIZ UDPGothic,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque russian cyrillic slavic greek extended japanese kanji hiragana katakana english western european extended-latin european,400 | 700,,cyrillic | greek-ext | japanese | latin | latin-ext,Type Bank Co. | Morisawa Inc.,343,1165,No,2022-03-16,2026-01-06,https://fonts.google.com/specimen/BIZ+UDPGothic
+BIZ UDPMincho,Serif,Serif,,elegant traditional classic refined literary editorial transitional oldstyle didone russian cyrillic slavic greek extended japanese kanji hiragana katakana english western european extended-latin european,400 | 700,,cyrillic | greek-ext | japanese | latin | latin-ext,Type Bank Co. | Morisawa Inc.,814,838,No,2022-03-16,2025-05-30,https://fonts.google.com/specimen/BIZ+UDPMincho
+Babylonica,Handwriting,,Handwriting | Display,personal casual friendly warm handwritten script organic  script cursive hand-drawn artistic informal headline hero decorative large-text attention english western european extended-latin european vietnamese,400,,latin | latin-ext | vietnamese,Robert Leuschke,1603,2193,No,2022-02-23,2025-09-08,https://fonts.google.com/specimen/Babylonica
+Bacasime Antique,Serif,Serif,,elegant traditional classic refined literary editorial transitional oldstyle didone english western european extended-latin european,400,,latin | latin-ext,The DocRepair Project | Claus Eggers Sørensen,1567,2205,No,2023-06-21,2025-05-30,https://fonts.google.com/specimen/Bacasime+Antique
+Bad Script,Handwriting,,Handwriting,personal casual friendly warm handwritten script organic  script cursive hand-drawn artistic informal russian cyrillic slavic cyrillic extended english western european extended-latin european vietnamese,400,,cyrillic | cyrillic-ext | latin | latin-ext | vietnamese,Gaslight,453,1916,No,2011-12-13,2025-09-02,https://fonts.google.com/specimen/Bad+Script
+Badeen Display,Display,,Display,bold decorative headline attention-grabbing creative expressive  headline hero decorative large-text attention arabic RTL middle-east english western european extended-latin european,400,,arabic | latin | latin-ext,Hani Alasadi,1228,504,No,2024-12-09,2025-05-30,https://fonts.google.com/specimen/Badeen+Display
+Bagel Fat One,Display,,Display,bold decorative headline attention-grabbing creative expressive  headline hero decorative large-text attention korean hangul english western european extended-latin european,400,,korean | latin | latin-ext,Kyungwon Kim | JAMO,1307,723,No,2023-06-05,2025-05-30,https://fonts.google.com/specimen/Bagel+Fat+One
+Bahiana,Display,Sans Serif,Display,bold decorative headline attention-grabbing creative expressive geometric humanist grotesque headline hero decorative large-text attention english western european extended-latin european,400,,latin | latin-ext,Omnibus-Type,1517,87,No,2016-12-02,2025-09-16,https://fonts.google.com/specimen/Bahiana
+Bahianita,Display,Sans Serif,Display,bold decorative headline attention-grabbing creative expressive geometric humanist grotesque headline hero decorative large-text attention english western european extended-latin european vietnamese,400,,latin | latin-ext | vietnamese,Omnibus-Type,1586,494,No,2019-06-11,2025-09-10,https://fonts.google.com/specimen/Bahianita
+Bai Jamjuree,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque versatile multi-weight flexible italic english western european extended-latin european thai southeast-asia vietnamese,200 | 200i | 300 | 300i | 400 | 400i | 500 | 500i | 600 | 600i | 700 | 700i,,latin | latin-ext | thai | vietnamese,Cadson Demak,350,645,No,2018-09-10,2025-09-08,https://fonts.google.com/specimen/Bai+Jamjuree
+Bakbak One,Display,Sans Serif,Display,bold decorative headline attention-grabbing creative expressive geometric humanist grotesque headline hero decorative large-text attention hindi devanagari indian english western european extended-latin european,400,,devanagari | latin | latin-ext,Saumya Kishore | Sanchit Sawaria,980,1412,No,2021-09-09,2025-09-11,https://fonts.google.com/specimen/Bakbak+One
+Ballet,Handwriting,,Display | Handwriting,personal casual friendly warm handwritten script organic  headline hero decorative large-text attention script cursive hand-drawn artistic informal variable variable-font responsive english western european extended-latin european vietnamese,400,opsz: -,latin | latin-ext | vietnamese,Omnibus-Type | Maximiliano Sproviero,1319,1286,No,2020-09-23,2025-09-11,https://fonts.google.com/specimen/Ballet
+Baloo 2,Display,Sans Serif,Display,bold decorative headline attention-grabbing creative expressive geometric humanist grotesque headline hero decorative large-text attention variable variable-font responsive variable-weight hindi devanagari indian english western european extended-latin european vietnamese,400 | 500 | 600 | 700 | 800,wght: -,devanagari | latin | latin-ext | vietnamese,Ek Type,321,1375,No,2016-01-20,2025-09-16,https://fonts.google.com/specimen/Baloo+2
+Baloo Bhai 2,Display,Sans Serif,Display,bold decorative headline attention-grabbing creative expressive geometric humanist grotesque headline hero decorative large-text attention variable variable-font responsive variable-weight gujarati indian english western european extended-latin european vietnamese,400 | 500 | 600 | 700 | 800,wght: -,gujarati | latin | latin-ext | vietnamese,Ek Type,1073,1910,No,2016-01-20,2025-09-10,https://fonts.google.com/specimen/Baloo+Bhai+2
+Baloo Bhaijaan 2,Display,Sans Serif,Display,bold decorative headline attention-grabbing creative expressive geometric humanist grotesque headline hero decorative large-text attention variable variable-font responsive variable-weight arabic RTL middle-east english western european extended-latin european vietnamese,400 | 500 | 600 | 700 | 800,wght: -,arabic | latin | latin-ext | vietnamese,Ek Type,776,689,No,2021-10-29,2025-09-16,https://fonts.google.com/specimen/Baloo+Bhaijaan+2
+Baloo Bhaina 2,Display,Sans Serif,Display,bold decorative headline attention-grabbing creative expressive geometric humanist grotesque headline hero decorative large-text attention variable variable-font responsive variable-weight english western european extended-latin european odia oriya indian vietnamese,400 | 500 | 600 | 700 | 800,wght: -,latin | latin-ext | oriya | vietnamese,Ek Type,1257,2215,No,2016-01-20,2025-09-02,https://fonts.google.com/specimen/Baloo+Bhaina+2
+Baloo Chettan 2,Display,Sans Serif,Display,bold decorative headline attention-grabbing creative expressive geometric humanist grotesque headline hero decorative large-text attention variable variable-font responsive variable-weight english western european extended-latin european malayalam indian vietnamese,400 | 500 | 600 | 700 | 800,wght: -,latin | latin-ext | malayalam | vietnamese,Ek Type,815,749,No,2016-01-20,2025-09-16,https://fonts.google.com/specimen/Baloo+Chettan+2
+Baloo Da 2,Display,Sans Serif,Display,bold decorative headline attention-grabbing creative expressive geometric humanist grotesque headline hero decorative large-text attention variable variable-font responsive variable-weight bengali bangladeshi indian english western european extended-latin european vietnamese,400 | 500 | 600 | 700 | 800,wght: -,bengali | latin | latin-ext | vietnamese,Ek Type,567,144,No,2016-01-20,2025-09-11,https://fonts.google.com/specimen/Baloo+Da+2
+Baloo Paaji 2,Display,Sans Serif,Display,bold decorative headline attention-grabbing creative expressive geometric humanist grotesque headline hero decorative large-text attention variable variable-font responsive variable-weight punjabi gurmukhi indian english western european extended-latin european vietnamese,400 | 500 | 600 | 700 | 800,wght: -,gurmukhi | latin | latin-ext | vietnamese,Ek Type,787,413,No,2016-01-20,2025-09-10,https://fonts.google.com/specimen/Baloo+Paaji+2
+Baloo Tamma 2,Display,,Display,bold decorative headline attention-grabbing creative expressive  headline hero decorative large-text attention variable variable-font responsive variable-weight kannada indian english western european extended-latin european vietnamese,400 | 500 | 600 | 700 | 800,wght: -,kannada | latin | latin-ext | vietnamese,Ek Type,854,314,No,2016-01-20,2025-09-11,https://fonts.google.com/specimen/Baloo+Tamma+2
+Baloo Tammudu 2,Display,,Display,bold decorative headline attention-grabbing creative expressive  headline hero decorative large-text attention variable variable-font responsive variable-weight english western european extended-latin european telugu indian vietnamese,400 | 500 | 600 | 700 | 800,wght: -,latin | latin-ext | telugu | vietnamese,Ek Type,1016,377,No,2016-01-20,2025-09-11,https://fonts.google.com/specimen/Baloo+Tammudu+2
+Baloo Thambi 2,Display,,Display,bold decorative headline attention-grabbing creative expressive  headline hero decorative large-text attention variable variable-font responsive variable-weight english western european extended-latin european tamil indian vietnamese,400 | 500 | 600 | 700 | 800,wght: -,latin | latin-ext | tamil | vietnamese,Ek Type,866,1753,No,2016-01-20,2025-09-16,https://fonts.google.com/specimen/Baloo+Thambi+2
+Balsamiq Sans,Display,Sans Serif,Display,bold decorative headline attention-grabbing creative expressive geometric humanist grotesque headline hero decorative large-text attention italic russian cyrillic slavic cyrillic extended english western european extended-latin european,400 | 400i | 700 | 700i,,cyrillic | cyrillic-ext | latin | latin-ext,Michael Angeles,412,116,No,2020-04-09,2025-09-08,https://fonts.google.com/specimen/Balsamiq+Sans
+Balthazar,Serif,Serif,,elegant traditional classic refined literary editorial transitional oldstyle didone english western european,400,,latin,Dario Manuel Muhafara,890,847,No,2011-12-13,2025-09-16,https://fonts.google.com/specimen/Balthazar
+Bangers,Display,,Display,bold decorative headline attention-grabbing creative expressive  headline hero decorative large-text attention english western european extended-latin european vietnamese well-known common,400,,latin | latin-ext | vietnamese,Vernon Adams,254,221,No,2011-02-09,2025-09-08,https://fonts.google.com/specimen/Bangers
+Barlow,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque versatile multi-weight flexible italic english western european extended-latin european vietnamese top-popular trending most-used,100 | 100i | 200 | 200i | 300 | 300i | 400 | 400i | 500 | 500i | 600 | 600i | 700 | 700i | 800 | 800i | 900 | 900i,,latin | latin-ext | vietnamese,Jeremy Tribby,49,915,No,2017-10-26,2025-09-11,https://fonts.google.com/specimen/Barlow
+Barlow Condensed,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque versatile multi-weight flexible italic english western european extended-latin european vietnamese popular widely-used,100 | 100i | 200 | 200i | 300 | 300i | 400 | 400i | 500 | 500i | 600 | 600i | 700 | 700i | 800 | 800i | 900 | 900i,,latin | latin-ext | vietnamese,Jeremy Tribby,95,916,No,2017-10-26,2025-09-08,https://fonts.google.com/specimen/Barlow+Condensed
+Barlow Semi Condensed,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque versatile multi-weight flexible italic english western european extended-latin european vietnamese popular widely-used,100 | 100i | 200 | 200i | 300 | 300i | 400 | 400i | 500 | 500i | 600 | 600i | 700 | 700i | 800 | 800i | 900 | 900i,,latin | latin-ext | vietnamese,Jeremy Tribby,141,393,No,2017-10-26,2025-09-16,https://fonts.google.com/specimen/Barlow+Semi+Condensed
+Barriecito,Display,,Display,bold decorative headline attention-grabbing creative expressive  headline hero decorative large-text attention english western european extended-latin european vietnamese,400,,latin | latin-ext | vietnamese,Omnibus-Type,646,786,No,2019-06-11,2025-09-11,https://fonts.google.com/specimen/Barriecito
+Barrio,Display,,Display,bold decorative headline attention-grabbing creative expressive  headline hero decorative large-text attention english western european extended-latin european,400,,latin | latin-ext,Omnibus-Type,1226,960,No,2016-12-02,2025-09-11,https://fonts.google.com/specimen/Barrio
+Basic,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque english western european extended-latin european,400,,latin | latin-ext,Magnus Gaarde,552,1975,No,2011-12-15,2025-09-10,https://fonts.google.com/specimen/Basic
+Baskervville,Serif,Serif,,elegant traditional classic refined literary editorial transitional oldstyle didone italic variable variable-font responsive variable-weight english western european extended-latin european well-known common,400 | 400i | 500 | 500i | 600 | 600i | 700 | 700i,wght: -,latin | latin-ext,ANRT,261,1632,No,2019-10-04,2025-09-11,https://fonts.google.com/specimen/Baskervville
+Baskervville SC,Serif,Serif,,elegant traditional classic refined literary editorial transitional oldstyle didone variable variable-font responsive variable-weight english western european extended-latin european,400 | 500 | 600 | 700,wght: -,latin | latin-ext,ANRT,1276,414,No,2024-06-25,2025-09-08,https://fonts.google.com/specimen/Baskervville+SC
+Battambang,Display,,Display,bold decorative headline attention-grabbing creative expressive  headline hero decorative large-text attention khmer cambodian english western european,100 | 300 | 400 | 700 | 900,,khmer | latin,Danh Hong,953,546,No,2011-03-02,2025-09-04,https://fonts.google.com/specimen/Battambang
+Baumans,Display,,Display,bold decorative headline attention-grabbing creative expressive  headline hero decorative large-text attention english western european,400,,latin,Cyreal,1100,1566,No,2011-12-07,2025-09-08,https://fonts.google.com/specimen/Baumans
+Bayon,Sans Serif,Sans Serif,Display,clean modern minimal professional readable neutral geometric humanist grotesque headline hero decorative large-text attention khmer cambodian english western european,400,,khmer | latin,Danh Hong,793,1563,No,2011-03-02,2025-09-11,https://fonts.google.com/specimen/Bayon
+Be Vietnam Pro,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque versatile multi-weight flexible italic english western european extended-latin european vietnamese well-known common,100 | 100i | 200 | 200i | 300 | 300i | 400 | 400i | 500 | 500i | 600 | 600i | 700 | 700i | 800 | 800i | 900 | 900i,,latin | latin-ext | vietnamese,Lâm Bảo | Tony Le | ViệtAnh Nguyễn,184,1983,No,2021-06-13,2025-09-08,https://fonts.google.com/specimen/Be+Vietnam+Pro
+Beau Rivage,Handwriting,,Handwriting,personal casual friendly warm handwritten script organic  script cursive hand-drawn artistic informal english western european extended-latin european vietnamese,400,,latin | latin-ext | vietnamese,Robert Leuschke,1218,279,No,2022-02-16,2025-05-30,https://fonts.google.com/specimen/Beau+Rivage
+Bebas Neue,Sans Serif,Sans Serif,Display,clean modern minimal professional readable neutral geometric humanist grotesque headline hero decorative large-text attention english western european extended-latin european top-popular trending most-used,400,,latin | latin-ext,Ryoichi Tsunekawa,48,814,No,2019-10-16,2025-09-16,https://fonts.google.com/specimen/Bebas+Neue
+Beiruti,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque versatile multi-weight flexible variable variable-font responsive variable-weight arabic RTL middle-east english western european extended-latin european vietnamese,200 | 300 | 400 | 500 | 600 | 700 | 800 | 900,wght: -,arabic | latin | latin-ext | vietnamese,Boutros Fonts | Arlette Boutros | Volker Schnebel,1358,193,No,2024-06-25,2025-09-10,https://fonts.google.com/specimen/Beiruti
+Belanosima,Sans Serif,Sans Serif,Display,clean modern minimal professional readable neutral geometric humanist grotesque headline hero decorative large-text attention english western european extended-latin european,400 | 600 | 700,,latin | latin-ext,The DocRepair Project | Santiago Orozco,458,619,No,2023-06-14,2025-06-02,https://fonts.google.com/specimen/Belanosima
+Belgrano,Serif,Serif,,elegant traditional classic refined literary editorial transitional oldstyle didone english western european,400,,latin,LatinoType,1241,1637,No,2011-12-19,2025-09-04,https://fonts.google.com/specimen/Belgrano
+Bellefair,Serif,Serif,,elegant traditional classic refined literary editorial transitional oldstyle didone hebrew RTL israeli english western european extended-latin european,400,,hebrew | latin | latin-ext,Nick Shinn | Liron Lavi Turkenic,664,1683,No,2017-06-28,2025-09-08,https://fonts.google.com/specimen/Bellefair
+Belleza,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque english western european extended-latin european,400,,latin | latin-ext,Eduardo Tunni,465,1960,No,2012-03-29,2025-09-04,https://fonts.google.com/specimen/Belleza
+Bellota,Display,,Display,bold decorative headline attention-grabbing creative expressive  headline hero decorative large-text attention italic russian cyrillic slavic english western european extended-latin european vietnamese,300 | 300i | 400 | 400i | 700 | 700i,,cyrillic | latin | latin-ext | vietnamese,Kemie Guaida,1056,1582,No,2020-01-16,2025-09-16,https://fonts.google.com/specimen/Bellota
+Bellota Text,Display,Sans Serif,Display,bold decorative headline attention-grabbing creative expressive geometric humanist grotesque headline hero decorative large-text attention italic russian cyrillic slavic english western european extended-latin european vietnamese,300 | 300i | 400 | 400i | 700 | 700i,,cyrillic | latin | latin-ext | vietnamese,Kemie Guaida,645,2231,No,2020-01-16,2025-09-04,https://fonts.google.com/specimen/Bellota+Text
+BenchNine,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque english western european extended-latin european,300 | 400 | 700,,latin | latin-ext,Vernon Adams,538,1610,No,2012-09-24,2025-09-10,https://fonts.google.com/specimen/BenchNine
+Benne,Serif,Serif,,elegant traditional classic refined literary editorial transitional oldstyle didone kannada indian english western european extended-latin european,400,,kannada | latin | latin-ext,John Harrington,1122,1253,No,2016-03-01,2025-09-11,https://fonts.google.com/specimen/Benne
+Bentham,Serif,Serif,,elegant traditional classic refined literary editorial transitional oldstyle didone english western european extended-latin european,400,,latin | latin-ext,Ben Weiner,753,833,No,2010-11-30,2025-09-16,https://fonts.google.com/specimen/Bentham
+Berkshire Swash,Handwriting,Serif,Display,personal casual friendly warm handwritten script organic transitional oldstyle didone headline hero decorative large-text attention english western european extended-latin european,400,,latin | latin-ext,Astigmatic,371,2058,No,2012-03-14,2025-09-11,https://fonts.google.com/specimen/Berkshire+Swash
+Besley,Serif,Slab Serif,,elegant traditional classic refined literary editorial slab mechanical sturdy strong versatile multi-weight flexible italic variable variable-font responsive variable-weight english western european extended-latin european,400 | 400i | 500 | 500i | 600 | 600i | 700 | 700i | 800 | 800i | 900 | 900i,wght: -,latin | latin-ext,Owen Earl,530,1732,No,2021-01-05,2025-09-08,https://fonts.google.com/specimen/Besley
+Betania Patmos,Handwriting,,Handwriting,personal casual friendly warm handwritten script organic  script cursive hand-drawn artistic informal english western european extended-latin european,400,,latin | latin-ext,Carolina Giovagnoli,1856,115,No,2026-02-12,2026-02-17,https://fonts.google.com/specimen/Betania+Patmos
+Betania Patmos GDL,Handwriting,,Handwriting,personal casual friendly warm handwritten script organic  script cursive hand-drawn artistic informal english western european extended-latin european,400,,latin | latin-ext,Carolina Giovagnoli,1890,2219,No,2026-02-12,2026-02-17,https://fonts.google.com/specimen/Betania+Patmos+GDL
+Betania Patmos In,Handwriting,,Handwriting,personal casual friendly warm handwritten script organic  script cursive hand-drawn artistic informal english western european extended-latin european,400,,latin | latin-ext,Carolina Giovagnoli,1879,2209,No,2026-02-12,2026-02-17,https://fonts.google.com/specimen/Betania+Patmos+In
+Betania Patmos In GDL,Handwriting,,Handwriting,personal casual friendly warm handwritten script organic  script cursive hand-drawn artistic informal english western european extended-latin european,400,,latin | latin-ext,Carolina Giovagnoli,1878,2225,No,2026-02-12,2026-02-17,https://fonts.google.com/specimen/Betania+Patmos+In+GDL
+Beth Ellen,Handwriting,,Handwriting,personal casual friendly warm handwritten script organic  script cursive hand-drawn artistic informal english western european,400,,latin,Rob Jelinski | Alyson Fraser Diaz,1130,1776,No,2019-05-09,2025-09-10,https://fonts.google.com/specimen/Beth+Ellen
+Bevan,Serif,Slab Serif,Display,elegant traditional classic refined literary editorial slab mechanical sturdy strong headline hero decorative large-text attention italic english western european extended-latin european vietnamese,400 | 400i,,latin | latin-ext | vietnamese,Vernon Adams,534,1624,No,2011-02-23,2025-09-16,https://fonts.google.com/specimen/Bevan
+BhuTuka Expanded One,Serif,Slab Serif,Display,elegant traditional classic refined literary editorial slab mechanical sturdy strong headline hero decorative large-text attention punjabi gurmukhi indian english western european extended-latin european,400,,gurmukhi | latin | latin-ext,Erin McLaughlin,1225,1308,No,2022-01-21,2025-09-08,https://fonts.google.com/specimen/BhuTuka+Expanded+One
+Big Shoulders,Display,Sans Serif,Display,bold decorative headline attention-grabbing creative expressive geometric humanist grotesque headline hero decorative large-text attention versatile multi-weight flexible variable variable-font responsive variable-weight english western european extended-latin european vietnamese,100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900,opsz: - | wght: -,latin | latin-ext | vietnamese,Patric King,781,2003,No,2025-02-05,2025-09-02,https://fonts.google.com/specimen/Big+Shoulders
+Big Shoulders Inline,Display,Sans Serif,Display,bold decorative headline attention-grabbing creative expressive geometric humanist grotesque headline hero decorative large-text attention versatile multi-weight flexible variable variable-font responsive variable-weight english western european extended-latin european vietnamese,100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900,opsz: - | wght: -,latin | latin-ext | vietnamese,Patric King,1649,138,No,2025-02-05,2025-09-04,https://fonts.google.com/specimen/Big+Shoulders+Inline
+Big Shoulders Stencil,Display,Sans Serif,Display,bold decorative headline attention-grabbing creative expressive geometric humanist grotesque headline hero decorative large-text attention versatile multi-weight flexible variable variable-font responsive variable-weight english western european extended-latin european vietnamese,100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900,opsz: - | wght: -,latin | latin-ext | vietnamese,Patric King,1439,200,No,2025-02-05,2025-09-04,https://fonts.google.com/specimen/Big+Shoulders+Stencil
+Bigelow Rules,Display,Serif,Display,bold decorative headline attention-grabbing creative expressive transitional oldstyle didone headline hero decorative large-text attention english western european extended-latin european,400,,latin | latin-ext,Astigmatic,1510,1622,No,2012-11-02,2025-09-11,https://fonts.google.com/specimen/Bigelow+Rules
+Bigshot One,Display,Serif,Display,bold decorative headline attention-grabbing creative expressive transitional oldstyle didone headline hero decorative large-text attention english western european,400,,latin,Gesine Todt,1012,2134,No,2011-05-04,2025-09-10,https://fonts.google.com/specimen/Bigshot+One
+Bilbo,Handwriting,,Handwriting,personal casual friendly warm handwritten script organic  script cursive hand-drawn artistic informal english western european extended-latin european vietnamese,400,,latin | latin-ext | vietnamese,Robert Leuschke,1405,1616,No,2011-12-07,2025-09-16,https://fonts.google.com/specimen/Bilbo
+Bilbo Swash Caps,Handwriting,,Handwriting,personal casual friendly warm handwritten script organic  script cursive hand-drawn artistic informal english western european extended-latin european,400,,latin | latin-ext,TypeSETit,1003,1929,No,2011-12-13,2025-09-02,https://fonts.google.com/specimen/Bilbo+Swash+Caps
+BioRhyme,Serif,Slab Serif,,elegant traditional classic refined literary editorial slab mechanical sturdy strong versatile multi-weight flexible variable variable-font responsive variable-weight variable-width english western european extended-latin european,200 | 300 | 400 | 500 | 600 | 700 | 800,wdth: - | wght: -,latin | latin-ext,Aoife Mooney,704,1701,No,2016-03-01,2025-09-16,https://fonts.google.com/specimen/BioRhyme
+BioRhyme Expanded,Serif,Slab Serif,Display,elegant traditional classic refined literary editorial slab mechanical sturdy strong headline hero decorative large-text attention english western european extended-latin european,200 | 300 | 400 | 700 | 800,,latin | latin-ext,Aoife Mooney,1570,586,No,2016-06-15,2025-09-08,https://fonts.google.com/specimen/BioRhyme+Expanded
+Birthstone,Handwriting,,Handwriting | Display,personal casual friendly warm handwritten script organic  script cursive hand-drawn artistic informal headline hero decorative large-text attention english western european extended-latin european vietnamese,400,,latin | latin-ext | vietnamese,Robert Leuschke,801,992,No,2021-08-06,2025-09-04,https://fonts.google.com/specimen/Birthstone
+Birthstone Bounce,Handwriting,,Handwriting | Display,personal casual friendly warm handwritten script organic  script cursive hand-drawn artistic informal headline hero decorative large-text attention english western european extended-latin european vietnamese,400 | 500,,latin | latin-ext | vietnamese,Robert Leuschke,1162,231,No,2021-09-02,2025-09-04,https://fonts.google.com/specimen/Birthstone+Bounce
+Biryani,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque versatile multi-weight flexible hindi devanagari indian english western european extended-latin european,200 | 300 | 400 | 600 | 700 | 800 | 900,,devanagari | latin | latin-ext,Dan Reynolds | Mathieu Réguer,420,626,No,2015-04-22,2025-09-04,https://fonts.google.com/specimen/Biryani
+Bitcount,Display,,Display,bold decorative headline attention-grabbing creative expressive  headline hero decorative large-text attention versatile multi-weight flexible variable variable-font responsive variable-weight variable-slant english western european extended-latin european,100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900,CRSV: - | ELSH: - | ELXP: - | slnt: - | wght: -,latin | latin-ext,Petr van Blokland,1704,154,No,2025-01-09,2025-09-16,https://fonts.google.com/specimen/Bitcount
+Bitcount Grid Double,Display,,Display,bold decorative headline attention-grabbing creative expressive  headline hero decorative large-text attention versatile multi-weight flexible variable variable-font responsive variable-weight variable-slant english western european extended-latin european,100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900,CRSV: - | ELSH: - | ELXP: - | slnt: - | wght: -,latin | latin-ext,Petr van Blokland,1738,2301,No,2025-01-09,2025-09-16,https://fonts.google.com/specimen/Bitcount+Grid+Double
+Bitcount Grid Double Ink,Display,,Display,bold decorative headline attention-grabbing creative expressive  headline hero decorative large-text attention versatile multi-weight flexible variable variable-font responsive variable-weight variable-slant english western european extended-latin european,100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900,CRSV: - | ELSH: - | ELXP: - | SZP1: - | SZP2: - | XPN1: - | XPN2: - | YPN1: - | YPN2: - | slnt: - | wght: -,latin | latin-ext,Petr van Blokland,1588,6,No,2025-09-11,2025-09-16,https://fonts.google.com/specimen/Bitcount+Grid+Double+Ink
+Bitcount Grid Single,Display,,Display,bold decorative headline attention-grabbing creative expressive  headline hero decorative large-text attention versatile multi-weight flexible variable variable-font responsive variable-weight variable-slant english western european extended-latin european,100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900,CRSV: - | ELSH: - | ELXP: - | slnt: - | wght: -,latin | latin-ext,Petr van Blokland,1636,101,No,2025-01-09,2025-09-16,https://fonts.google.com/specimen/Bitcount+Grid+Single
+Bitcount Grid Single Ink,Display,,Display,bold decorative headline attention-grabbing creative expressive  headline hero decorative large-text attention versatile multi-weight flexible variable variable-font responsive variable-weight variable-slant english western european extended-latin european,100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900,CRSV: - | ELSH: - | ELXP: - | SZP1: - | SZP2: - | XPN1: - | XPN2: - | YPN1: - | YPN2: - | slnt: - | wght: -,latin | latin-ext,Petr van Blokland,1737,23,No,2025-09-11,2025-09-16,https://fonts.google.com/specimen/Bitcount+Grid+Single+Ink
+Bitcount Ink,Display,,Display,bold decorative headline attention-grabbing creative expressive  headline hero decorative large-text attention versatile multi-weight flexible variable variable-font responsive variable-weight variable-slant english western european extended-latin european,100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900,CRSV: - | ELSH: - | ELXP: - | SZP1: - | SZP2: - | XPN1: - | XPN2: - | YPN1: - | YPN2: - | slnt: - | wght: -,latin | latin-ext,Petr van Blokland,1686,7,No,2025-09-11,2025-09-16,https://fonts.google.com/specimen/Bitcount+Ink
+Bitcount Prop Double,Display,,Display,bold decorative headline attention-grabbing creative expressive  headline hero decorative large-text attention versatile multi-weight flexible variable variable-font responsive variable-weight variable-slant english western european extended-latin european,100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900,CRSV: - | ELSH: - | ELXP: - | slnt: - | wght: -,latin | latin-ext,Petr van Blokland,1713,16,No,2025-01-09,2025-09-16,https://fonts.google.com/specimen/Bitcount+Prop+Double
+Bitcount Prop Double Ink,Display,,Display,bold decorative headline attention-grabbing creative expressive  headline hero decorative large-text attention versatile multi-weight flexible variable variable-font responsive variable-weight variable-slant english western european extended-latin european,100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900,CRSV: - | ELSH: - | ELXP: - | SZP1: - | SZP2: - | XPN1: - | XPN2: - | YPN1: - | YPN2: - | slnt: - | wght: -,latin | latin-ext,Petr van Blokland,1233,3,No,2025-09-11,2025-09-16,https://fonts.google.com/specimen/Bitcount+Prop+Double+Ink
+Bitcount Prop Single,Display,,Display,bold decorative headline attention-grabbing creative expressive  headline hero decorative large-text attention versatile multi-weight flexible variable variable-font responsive variable-weight variable-slant english western european extended-latin european,100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900,CRSV: - | ELSH: - | ELXP: - | slnt: - | wght: -,latin | latin-ext,Petr van Blokland,1615,237,No,2025-01-09,2025-09-16,https://fonts.google.com/specimen/Bitcount+Prop+Single
+Bitcount Prop Single Ink,Display,,Display,bold decorative headline attention-grabbing creative expressive  headline hero decorative large-text attention versatile multi-weight flexible variable variable-font responsive variable-weight variable-slant english western european extended-latin european,100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900,CRSV: - | ELSH: - | ELXP: - | SZP1: - | SZP2: - | XPN1: - | XPN2: - | YPN1: - | YPN2: - | slnt: - | wght: -,latin | latin-ext,Petr van Blokland,1722,17,No,2025-09-11,2025-09-16,https://fonts.google.com/specimen/Bitcount+Prop+Single+Ink
+Bitcount Single,Display,,Display,bold decorative headline attention-grabbing creative expressive  headline hero decorative large-text attention versatile multi-weight flexible variable variable-font responsive variable-weight variable-slant english western european extended-latin european,100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900,CRSV: - | ELSH: - | ELXP: - | slnt: - | wght: -,latin | latin-ext,Petr van Blokland,1553,1362,No,2025-01-09,2025-09-16,https://fonts.google.com/specimen/Bitcount+Single
+Bitcount Single Ink,Display,,Display,bold decorative headline attention-grabbing creative expressive  headline hero decorative large-text attention versatile multi-weight flexible variable variable-font responsive variable-weight variable-slant english western european extended-latin european,100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900,CRSV: - | ELSH: - | ELXP: - | SZP1: - | SZP2: - | XPN1: - | XPN2: - | YPN1: - | YPN2: - | slnt: - | wght: -,latin | latin-ext,Petr van Blokland,1759,32,No,2025-09-11,2025-09-16,https://fonts.google.com/specimen/Bitcount+Single+Ink
+Bitter,Serif,Serif,,elegant traditional classic refined literary editorial transitional oldstyle didone versatile multi-weight flexible italic variable variable-font responsive variable-weight russian cyrillic slavic cyrillic extended english western european extended-latin european vietnamese popular widely-used,100 | 100i | 200 | 200i | 300 | 300i | 400 | 400i | 500 | 500i | 600 | 600i | 700 | 700i | 800 | 800i | 900 | 900i,wght: -,cyrillic | cyrillic-ext | latin | latin-ext | vietnamese,Sol Matas,92,875,No,2011-12-19,2025-09-04,https://fonts.google.com/specimen/Bitter
+Black And White Picture,Display,,Display,bold decorative headline attention-grabbing creative expressive  headline hero decorative large-text attention korean hangul english western european,400,,korean | latin,AsiaSoft Inc.,1674,2021,No,2018-02-27,2025-09-16,https://fonts.google.com/specimen/Black+And+White+Picture
+Black Han Sans,Sans Serif,Sans Serif,Display,clean modern minimal professional readable neutral geometric humanist grotesque headline hero decorative large-text attention korean hangul english western european,400,,korean | latin,Zess Type,437,491,No,2018-02-23,2025-09-10,https://fonts.google.com/specimen/Black+Han+Sans
+Black Ops One,Display,,Display,bold decorative headline attention-grabbing creative expressive  headline hero decorative large-text attention cyrillic extended english western european extended-latin european vietnamese,400,,cyrillic-ext | latin | latin-ext | vietnamese,James Grieshaber | Eben Sorkin,476,1828,No,2011-07-27,2025-09-10,https://fonts.google.com/specimen/Black+Ops+One
+Blaka,Display,,Display,bold decorative headline attention-grabbing creative expressive  headline hero decorative large-text attention arabic RTL middle-east english western european extended-latin european,400,,arabic | latin | latin-ext,Mohamed Gaber,1563,1452,No,2022-04-25,2025-09-16,https://fonts.google.com/specimen/Blaka
+Blaka Hollow,Display,,Display,bold decorative headline attention-grabbing creative expressive  headline hero decorative large-text attention arabic RTL middle-east english western european extended-latin european,400,,arabic | latin | latin-ext,Mohamed Gaber,1837,538,No,2022-04-25,2025-09-11,https://fonts.google.com/specimen/Blaka+Hollow
+Blaka Ink,Display,,Display,bold decorative headline attention-grabbing creative expressive  headline hero decorative large-text attention arabic RTL middle-east english western european extended-latin european,400,,arabic | latin | latin-ext,Mohamed Gaber,1851,752,No,2022-02-26,2025-05-30,https://fonts.google.com/specimen/Blaka+Ink
+Blinker,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque versatile multi-weight flexible english western european extended-latin european,100 | 200 | 300 | 400 | 600 | 700 | 800 | 900,,latin | latin-ext,Juergen Huber,407,92,No,2019-06-23,2025-09-04,https://fonts.google.com/specimen/Blinker
+Bodoni Moda,Serif,Serif,,elegant traditional classic refined literary editorial transitional oldstyle didone versatile multi-weight flexible italic variable variable-font responsive variable-weight english western european extended-latin european well-known common,400 | 400i | 500 | 500i | 600 | 600i | 700 | 700i | 800 | 800i | 900 | 900i,opsz: - | wght: -,latin | latin-ext | math | symbols,Owen Earl,162,312,No,2020-11-25,2025-09-16,https://fonts.google.com/specimen/Bodoni+Moda
+Bodoni Moda SC,Serif,Serif,,elegant traditional classic refined literary editorial transitional oldstyle didone versatile multi-weight flexible italic variable variable-font responsive variable-weight english western european extended-latin european,400 | 400i | 500 | 500i | 600 | 600i | 700 | 700i | 800 | 800i | 900 | 900i,opsz: - | wght: -,latin | latin-ext | math | symbols,Owen Earl,1392,746,No,2024-06-25,2025-09-10,https://fonts.google.com/specimen/Bodoni+Moda+SC
+Bokor,Display,,Display,bold decorative headline attention-grabbing creative expressive  headline hero decorative large-text attention khmer cambodian english western european,400,,khmer | latin,Danh Hong,1030,728,No,2011-03-02,2025-09-16,https://fonts.google.com/specimen/Bokor
+Boldonse,Display,,Display,bold decorative headline attention-grabbing creative expressive  headline hero decorative large-text attention english western european extended-latin european,400,,latin | latin-ext,Universitype,1369,1526,No,2025-03-13,2025-05-30,https://fonts.google.com/specimen/Boldonse
+Bona Nova,Serif,Serif,,elegant traditional classic refined literary editorial transitional oldstyle didone italic russian cyrillic slavic cyrillic extended greek hebrew RTL israeli english western european extended-latin european vietnamese multilingual international,400 | 400i | 700,,cyrillic | cyrillic-ext | greek | hebrew | latin | latin-ext | vietnamese,Capitalics | Mateusz Machalski | Andrzej Heidrich,1167,1718,No,2021-04-13,2025-09-02,https://fonts.google.com/specimen/Bona+Nova
+Bona Nova SC,Serif,Serif,,elegant traditional classic refined literary editorial transitional oldstyle didone italic russian cyrillic slavic cyrillic extended greek hebrew RTL israeli english western european extended-latin european vietnamese multilingual international,400 | 400i | 700,,cyrillic | cyrillic-ext | greek | hebrew | latin | latin-ext | vietnamese,Capitalics | Mateusz Machalski | Andrzej Heidrich,559,639,No,2024-06-25,2025-05-30,https://fonts.google.com/specimen/Bona+Nova+SC
+Bonbon,Handwriting,,Display | Handwriting,personal casual friendly warm handwritten script organic  headline hero decorative large-text attention script cursive hand-drawn artistic informal english western european,400,,latin,Cyreal,1599,2167,No,2011-12-07,2025-09-11,https://fonts.google.com/specimen/Bonbon
+Bonheur Royale,Handwriting,,Display | Handwriting,personal casual friendly warm handwritten script organic  headline hero decorative large-text attention script cursive hand-drawn artistic informal english western european extended-latin european vietnamese,400,,latin | latin-ext | vietnamese,Robert Leuschke,1179,322,No,2021-08-06,2025-09-10,https://fonts.google.com/specimen/Bonheur+Royale
+Boogaloo,Display,Sans Serif,Display,bold decorative headline attention-grabbing creative expressive geometric humanist grotesque headline hero decorative large-text attention english western european,400,,latin,John Vargas Beltrán,498,1818,No,2011-12-19,2025-09-11,https://fonts.google.com/specimen/Boogaloo
+Borel,Handwriting,Sans Serif,Handwriting,personal casual friendly warm handwritten script organic geometric humanist grotesque script cursive hand-drawn artistic informal english western european extended-latin european vietnamese,400,,latin | latin-ext | math | symbols | vietnamese,Rosalie Wagner,1164,2078,No,2023-07-04,2025-12-10,https://fonts.google.com/specimen/Borel
+Bowlby One,Display,Sans Serif,Display,bold decorative headline attention-grabbing creative expressive geometric humanist grotesque headline hero decorative large-text attention english western european,400,,latin,Vernon Adams,750,673,No,2011-07-13,2025-09-02,https://fonts.google.com/specimen/Bowlby+One
+Bowlby One SC,Display,Sans Serif,Display,bold decorative headline attention-grabbing creative expressive geometric humanist grotesque headline hero decorative large-text attention english western european extended-latin european,400,,latin | latin-ext,Vernon Adams,549,557,No,2011-07-06,2025-09-08,https://fonts.google.com/specimen/Bowlby+One+SC
+Bpmf Huninn,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque chinese traditional english western european extended-latin european,400,,chinese-traditional | latin | latin-ext,But Ko | justfont,1542,12,No,2026-02-18,2026-02-25,https://fonts.google.com/specimen/Bpmf+Huninn
+Bpmf Iansui,Handwriting,,Handwriting,personal casual friendly warm handwritten script organic  script cursive hand-drawn artistic informal chinese traditional english western european extended-latin european,400,,chinese-traditional | latin | latin-ext,But Ko,1803,25,No,2026-02-18,2026-02-25,https://fonts.google.com/specimen/Bpmf+Iansui
+Bpmf Zihi Kai Std,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque chinese traditional english western european extended-latin european,400,,chinese-traditional | latin | latin-ext,But Ko,1672,15,No,2026-02-18,2026-02-25,https://fonts.google.com/specimen/Bpmf+Zihi+Kai+Std
+Braah One,Sans Serif,Sans Serif,Display,clean modern minimal professional readable neutral geometric humanist grotesque headline hero decorative large-text attention punjabi gurmukhi indian english western european extended-latin european vietnamese,400,,gurmukhi | latin | latin-ext | vietnamese,Ashish Kumar,1262,2172,No,2023-03-23,2025-09-11,https://fonts.google.com/specimen/Braah+One
+Brawler,Serif,Serif,,elegant traditional classic refined literary editorial transitional oldstyle didone english western european,400 | 700,,latin,Cyreal,962,1593,No,2011-05-18,2025-09-10,https://fonts.google.com/specimen/Brawler
+Bree Serif,Serif,Serif,,elegant traditional classic refined literary editorial transitional oldstyle didone english western european extended-latin european well-known common,400,,latin | latin-ext,TypeTogether,209,2004,No,2011-12-19,2025-09-04,https://fonts.google.com/specimen/Bree+Serif
+Bricolage Grotesque,Sans Serif,Sans Serif,Display,clean modern minimal professional readable neutral geometric humanist grotesque headline hero decorative large-text attention versatile multi-weight flexible variable variable-font responsive variable-weight variable-width english western european extended-latin european vietnamese popular widely-used,200 | 300 | 400 | 500 | 600 | 700 | 800,opsz: - | wdth: - | wght: -,latin | latin-ext | vietnamese,Mathieu Triay,81,370,No,2023-06-14,2025-09-11,https://fonts.google.com/specimen/Bricolage+Grotesque
+Bruno Ace,Display,Sans Serif,Display,bold decorative headline attention-grabbing creative expressive geometric humanist grotesque headline hero decorative large-text attention english western european extended-latin european,400,,latin | latin-ext,Astigmatic,1484,236,No,2012-11-15,2025-09-08,https://fonts.google.com/specimen/Bruno+Ace
+Bruno Ace SC,Display,Sans Serif,Display,bold decorative headline attention-grabbing creative expressive geometric humanist grotesque headline hero decorative large-text attention english western european extended-latin european,400,,latin | latin-ext,Astigmatic,1399,938,No,2012-11-15,2025-09-11,https://fonts.google.com/specimen/Bruno+Ace+SC
+Brygada 1918,Serif,Serif,,elegant traditional classic refined literary editorial transitional oldstyle didone italic variable variable-font responsive variable-weight russian cyrillic slavic cyrillic extended greek english western european extended-latin european vietnamese multilingual international,400 | 400i | 500 | 500i | 600 | 600i | 700 | 700i,wght: -,cyrillic | cyrillic-ext | greek | latin | latin-ext | vietnamese,Capitalics | Mateusz Machalski | Borys Kosmynka | Ania Wieluńska | Przemysław Hoffer,631,944,No,2021-01-27,2025-09-02,https://fonts.google.com/specimen/Brygada+1918
+Bubblegum Sans,Display,Sans Serif,Display,bold decorative headline attention-grabbing creative expressive geometric humanist grotesque headline hero decorative large-text attention english western european extended-latin european,400,,latin | latin-ext,Sudtipos,755,1291,No,2011-11-23,2025-09-02,https://fonts.google.com/specimen/Bubblegum+Sans
+Bubbler One,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque english western european extended-latin european,400,,latin | latin-ext,Brenda Gallo,891,195,No,2012-05-09,2025-09-10,https://fonts.google.com/specimen/Bubbler+One
+Buda,Display,Serif,Display,bold decorative headline attention-grabbing creative expressive transitional oldstyle didone headline hero decorative large-text attention english western european,300,,latin,Adèle Antignac,1020,1829,No,2010-12-20,2025-09-08,https://fonts.google.com/specimen/Buda
+Buenard,Serif,Serif,,elegant traditional classic refined literary editorial transitional oldstyle didone variable variable-font responsive variable-weight english western european extended-latin european,400 | 500 | 600 | 700,wght: -,latin | latin-ext,Gustavo Ibarra,993,2105,No,2011-12-19,2025-09-08,https://fonts.google.com/specimen/Buenard
+Bungee,Display,Sans Serif,Display,bold decorative headline attention-grabbing creative expressive geometric humanist grotesque headline hero decorative large-text attention english western european extended-latin european vietnamese popular widely-used,400,,latin | latin-ext | vietnamese,David Jonathan Ross,74,2147,No,2016-06-15,2025-09-16,https://fonts.google.com/specimen/Bungee
+Bungee Hairline,Display,Sans Serif,Display,bold decorative headline attention-grabbing creative expressive geometric humanist grotesque headline hero decorative large-text attention english western european extended-latin european vietnamese,400,,latin | latin-ext | vietnamese,David Jonathan Ross,1435,698,No,2016-06-15,2025-09-08,https://fonts.google.com/specimen/Bungee+Hairline
+Bungee Inline,Display,Sans Serif,Display,bold decorative headline attention-grabbing creative expressive geometric humanist grotesque headline hero decorative large-text attention english western european extended-latin european vietnamese,400,,latin | latin-ext | vietnamese,David Jonathan Ross,789,1316,No,2016-06-15,2025-09-10,https://fonts.google.com/specimen/Bungee+Inline
+Bungee Outline,Display,Sans Serif,Display,bold decorative headline attention-grabbing creative expressive geometric humanist grotesque headline hero decorative large-text attention english western european extended-latin european vietnamese,400,,latin | latin-ext | vietnamese,David Jonathan Ross,1525,374,No,2016-06-15,2025-09-10,https://fonts.google.com/specimen/Bungee+Outline
+Bungee Shade,Display,Sans Serif,Display,bold decorative headline attention-grabbing creative expressive geometric humanist grotesque headline hero decorative large-text attention english western european extended-latin european vietnamese,400,,latin | latin-ext | vietnamese,David Jonathan Ross,705,89,No,2016-06-15,2025-09-16,https://fonts.google.com/specimen/Bungee+Shade
+Bungee Spice,Display,Sans Serif,Display,bold decorative headline attention-grabbing creative expressive geometric humanist grotesque headline hero decorative large-text attention english western european extended-latin european vietnamese,400,,latin | latin-ext | vietnamese,David Jonathan Ross,803,1435,No,2021-12-07,2025-06-02,https://fonts.google.com/specimen/Bungee+Spice
+Bungee Tint,Display,Sans Serif,Display,bold decorative headline attention-grabbing creative expressive geometric humanist grotesque headline hero decorative large-text attention english western european extended-latin european vietnamese,400,,latin | latin-ext | vietnamese,David Jonathan Ross,1632,1755,No,2024-08-09,2025-05-30,https://fonts.google.com/specimen/Bungee+Tint
+Butcherman,Display,,Display,bold decorative headline attention-grabbing creative expressive  headline hero decorative large-text attention english western european extended-latin european,400,,latin | latin-ext,Typomondo,1608,1984,No,2011-12-19,2025-09-10,https://fonts.google.com/specimen/Butcherman
+Butterfly Kids,Handwriting,,Handwriting | Display,personal casual friendly warm handwritten script organic  script cursive hand-drawn artistic informal headline hero decorative large-text attention english western european extended-latin european,400,,latin | latin-ext,Tart Workshop,1658,2019,No,2012-02-15,2025-09-08,https://fonts.google.com/specimen/Butterfly+Kids
+Bytesized,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque english western european extended-latin european,400,,latin | latin-ext,Baltdev,1839,1186,No,2025-03-13,2025-05-30,https://fonts.google.com/specimen/Bytesized
+Cabin,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque italic variable variable-font responsive variable-weight variable-width english western european extended-latin european vietnamese popular widely-used,400 | 400i | 500 | 500i | 600 | 600i | 700 | 700i,wdth: - | wght: -,latin | latin-ext | vietnamese,Impallari Type | Rodrigo Fuenzalida,97,1211,No,2011-03-23,2025-09-11,https://fonts.google.com/specimen/Cabin
+Cabin Condensed,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque english western european extended-latin european vietnamese,400 | 500 | 600 | 700,,latin | latin-ext | vietnamese,Impallari Type,474,1892,No,2011-11-30,2025-09-08,https://fonts.google.com/specimen/Cabin+Condensed
+Cabin Sketch,Display,Sans Serif,Display,bold decorative headline attention-grabbing creative expressive geometric humanist grotesque headline hero decorative large-text attention english western european,400 | 700,,latin,Impallari Type,582,1667,No,2011-03-16,2025-09-10,https://fonts.google.com/specimen/Cabin+Sketch
+Cactus Classical Serif,Serif,Serif,,elegant traditional classic refined literary editorial transitional oldstyle didone chinese traditional russian cyrillic slavic english western european extended-latin european vietnamese,400,,chinese-traditional | cyrillic | latin | latin-ext | vietnamese,Henry Chan | Tian Haidong | Moonlit Owen,1294,1341,No,2024-05-14,2026-01-06,https://fonts.google.com/specimen/Cactus+Classical+Serif
+Caesar Dressing,Display,,Display,bold decorative headline attention-grabbing creative expressive  headline hero decorative large-text attention english western european,400,,latin,Open Window,1193,649,No,2011-12-19,2025-09-10,https://fonts.google.com/specimen/Caesar+Dressing
+Cagliostro,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque english western european,400,,latin,MADType,1407,2137,No,2011-11-30,2025-09-11,https://fonts.google.com/specimen/Cagliostro
+Cairo,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque versatile multi-weight flexible variable variable-font responsive variable-weight variable-slant arabic RTL middle-east english western european extended-latin european popular widely-used,1000 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900,slnt: - | wght: -,arabic | latin | latin-ext,Mohamed Gaber | Accademia di Belle Arti di Urbino,71,169,No,2016-06-15,2025-09-16,https://fonts.google.com/specimen/Cairo
+Cairo Play,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque versatile multi-weight flexible variable variable-font responsive variable-weight variable-slant arabic RTL middle-east english western european extended-latin european,1000 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900,slnt: - | wght: -,arabic | latin | latin-ext,Mohamed Gaber | Accademia di Belle Arti di Urbino,581,632,No,2022-08-05,2025-09-16,https://fonts.google.com/specimen/Cairo+Play
+Cal Sans,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque english western european extended-latin european vietnamese,400,,latin | latin-ext | vietnamese,Mark Davis | Cal.com Inc.,730,166,No,2025-03-18,2025-06-09,https://fonts.google.com/specimen/Cal+Sans
+Caladea,Serif,Serif,,elegant traditional classic refined literary editorial transitional oldstyle didone italic english western european extended-latin european,400 | 400i | 700 | 700i,,latin | latin-ext,Andrés Torresi | Carolina Giovanolli,634,429,No,2020-02-11,2025-09-11,https://fonts.google.com/specimen/Caladea
+Calistoga,Display,Serif,Display,bold decorative headline attention-grabbing creative expressive transitional oldstyle didone headline hero decorative large-text attention english western european extended-latin european vietnamese,400,,latin | latin-ext | vietnamese,Yvonne Schüttler | Sorkin Type | Eben Sorkin,434,1371,No,2019-11-04,2025-09-16,https://fonts.google.com/specimen/Calistoga
+Calligraffitti,Handwriting,,Handwriting,personal casual friendly warm handwritten script organic  script cursive hand-drawn artistic informal english western european,400,,latin,Open Window,696,955,No,2011-01-06,2025-09-08,https://fonts.google.com/specimen/Calligraffitti
+Cambay,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque italic hindi devanagari indian english western european extended-latin european,400 | 400i | 700 | 700i,,devanagari | latin | latin-ext,Pooja Saxena,837,873,No,2015-01-28,2025-09-11,https://fonts.google.com/specimen/Cambay
+Cambo,Serif,Serif,,elegant traditional classic refined literary editorial transitional oldstyle didone english western european extended-latin european,400,,latin | latin-ext,Huerta Tipográfica,987,1256,No,2011-12-19,2025-09-16,https://fonts.google.com/specimen/Cambo
+Candal,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque english western european,400,,latin,Vernon Adams,623,787,No,2011-03-09,2025-09-10,https://fonts.google.com/specimen/Candal
+Cantarell,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque italic english western european extended-latin european well-known common,400 | 400i | 700 | 700i,,latin | latin-ext,Dave Crossland,298,1004,No,2010-05-10,2025-09-04,https://fonts.google.com/specimen/Cantarell
+Cantata One,Serif,Serif,,elegant traditional classic refined literary editorial transitional oldstyle didone english western european extended-latin european,400,,latin | latin-ext,Joana Correia,663,1309,No,2012-02-29,2025-09-10,https://fonts.google.com/specimen/Cantata+One
+Cantora One,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque english western european extended-latin european,400,,latin | latin-ext,Impallari Type,1149,1749,No,2012-07-30,2025-09-10,https://fonts.google.com/specimen/Cantora+One
+Caprasimo,Display,Serif,Display,bold decorative headline attention-grabbing creative expressive transitional oldstyle didone headline hero decorative large-text attention english western european extended-latin european,400,,latin | latin-ext,The DocRepair Project | Phaedra Charles | Flavia Zimbardi,624,590,No,2023-06-14,2025-06-02,https://fonts.google.com/specimen/Caprasimo
+Capriola,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque english western european extended-latin european,400,,latin | latin-ext,Viktoriya Grabowska,870,764,No,2012-07-10,2025-09-16,https://fonts.google.com/specimen/Capriola
+Caramel,Handwriting,,Handwriting,personal casual friendly warm handwritten script organic  script cursive hand-drawn artistic informal english western european extended-latin european vietnamese,400,,latin | latin-ext | vietnamese,Robert Leuschke,1486,1167,No,2021-08-06,2025-09-02,https://fonts.google.com/specimen/Caramel
+Carattere,Handwriting,,Handwriting,personal casual friendly warm handwritten script organic  script cursive hand-drawn artistic informal english western european extended-latin european vietnamese,400,,latin | latin-ext | vietnamese,Robert Leuschke,1110,1149,No,2021-08-26,2025-09-11,https://fonts.google.com/specimen/Carattere
+Cardo,Serif,Serif,,elegant traditional classic refined literary editorial transitional oldstyle didone italic greek greek extended hebrew RTL israeli english western european extended-latin european multilingual international well-known common,400 | 400i | 700,,gothic | greek | greek-ext | hebrew | latin | latin-ext | old-italic | runic,David Perry,232,1625,No,2011-09-07,2025-09-08,https://fonts.google.com/specimen/Cardo
+Carlito,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque italic russian cyrillic slavic cyrillic extended greek greek extended english western european extended-latin european vietnamese multilingual international,400 | 400i | 700 | 700i,,cyrillic | cyrillic-ext | greek | greek-ext | latin | latin-ext | vietnamese,Łukasz Dziedzic,741,1924,No,2023-04-19,2025-09-08,https://fonts.google.com/specimen/Carlito
+Carme,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque english western european,400,,latin,Rubén Prol,1106,1021,No,2011-07-27,2025-09-10,https://fonts.google.com/specimen/Carme
+Carrois Gothic,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque english western european,400,,latin,Carrois Apostrophe,805,1263,No,2012-09-30,2025-09-10,https://fonts.google.com/specimen/Carrois+Gothic
+Carrois Gothic SC,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque english western european,400,,latin,Carrois Apostrophe,1355,1928,No,2012-09-30,2025-09-08,https://fonts.google.com/specimen/Carrois+Gothic+SC
+Carter One,Display,,Display,bold decorative headline attention-grabbing creative expressive  headline hero decorative large-text attention english western european,400,,latin,Vernon Adams,461,678,No,2011-05-04,2025-09-10,https://fonts.google.com/specimen/Carter+One
+Cascadia Code,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque versatile multi-weight flexible italic variable variable-font responsive variable-weight arabic RTL middle-east russian cyrillic slavic cyrillic extended greek hebrew RTL israeli english western european extended-latin european vietnamese multilingual international,200 | 200i | 300 | 300i | 400 | 400i | 500 | 500i | 600 | 600i | 700 | 700i,wght: -,arabic | braille | cyrillic | cyrillic-ext | greek | hebrew | latin | latin-ext | symbols2 | vietnamese,Aaron Bell | Mohamad Dakak | Viktoriya Grabowska | Liron Lavi Turkenich,1238,55,No,2025-04-17,2025-09-16,https://fonts.google.com/specimen/Cascadia+Code
+Cascadia Mono,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque versatile multi-weight flexible italic variable variable-font responsive variable-weight arabic RTL middle-east russian cyrillic slavic cyrillic extended greek hebrew RTL israeli english western european extended-latin european vietnamese multilingual international,200 | 200i | 300 | 300i | 400 | 400i | 500 | 500i | 600 | 600i | 700 | 700i,wght: -,arabic | braille | cyrillic | cyrillic-ext | greek | hebrew | latin | latin-ext | symbols2 | vietnamese,Aaron Bell | Mohamad Dakak | Viktoriya Grabowska | Liron Lavi Turkenich,423,13,No,2025-04-17,2025-09-08,https://fonts.google.com/specimen/Cascadia+Mono
+Castoro,Serif,Serif,,elegant traditional classic refined literary editorial transitional oldstyle didone italic english western european extended-latin european,400 | 400i,,latin | latin-ext,Tiro Typeworks | John Hudson | Paul Hanslow | Kaja Słojewska,603,1171,No,2020-11-03,2025-09-16,https://fonts.google.com/specimen/Castoro
+Castoro Titling,Display,Serif,Display,bold decorative headline attention-grabbing creative expressive transitional oldstyle didone headline hero decorative large-text attention english western european extended-latin european,400,,latin | latin-ext,Tiro Typeworks | John Hudson,1447,2180,No,2023-03-14,2025-09-10,https://fonts.google.com/specimen/Castoro+Titling
+Catamaran,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque versatile multi-weight flexible variable variable-font responsive variable-weight english western european extended-latin european tamil indian well-known common,100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900,wght: -,latin | latin-ext | tamil,Pria Ravichandran,204,1655,No,2015-07-08,2025-09-10,https://fonts.google.com/specimen/Catamaran
+Caudex,Serif,Serif,Display,elegant traditional classic refined literary editorial transitional oldstyle didone headline hero decorative large-text attention italic greek greek extended english western european extended-latin european vietnamese multilingual international,400 | 400i | 700 | 700i,,greek | greek-ext | latin | latin-ext | runic | vietnamese,Nidud,625,891,No,2011-05-18,2025-09-04,https://fonts.google.com/specimen/Caudex
+Cause,Handwriting,Sans Serif,Handwriting,personal casual friendly warm handwritten script organic geometric humanist grotesque script cursive hand-drawn artistic informal versatile multi-weight flexible variable variable-font responsive variable-weight english western european extended-latin european,100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900,wght: -,latin | latin-ext,Saurabh Sharma,1957,1840,No,2025-12-08,2026-01-20,https://fonts.google.com/specimen/Cause
+Caveat,Handwriting,,Handwriting,personal casual friendly warm handwritten script organic  script cursive hand-drawn artistic informal variable variable-font responsive variable-weight russian cyrillic slavic cyrillic extended english western european extended-latin european popular widely-used,400 | 500 | 600 | 700,wght: -,cyrillic | cyrillic-ext | latin | latin-ext,Impallari Type,123,1357,No,2015-09-23,2025-09-04,https://fonts.google.com/specimen/Caveat
+Caveat Brush,Handwriting,,Handwriting,personal casual friendly warm handwritten script organic  script cursive hand-drawn artistic informal english western european extended-latin european,400,,latin | latin-ext,Impallari Type,460,1540,No,2015-09-23,2025-09-04,https://fonts.google.com/specimen/Caveat+Brush
+Cedarville Cursive,Handwriting,,Handwriting,personal casual friendly warm handwritten script organic  script cursive hand-drawn artistic informal english western european,400,,latin,Kimberly Geswein,454,1429,No,2011-06-08,2025-09-16,https://fonts.google.com/specimen/Cedarville+Cursive
+Ceviche One,Display,,Display,bold decorative headline attention-grabbing creative expressive  headline hero decorative large-text attention english western european extended-latin european,400,,latin | latin-ext,Miguel Hernandez,1134,1634,No,2011-12-07,2025-09-08,https://fonts.google.com/specimen/Ceviche+One
+Chakra Petch,Sans Serif,Sans Serif,Display,clean modern minimal professional readable neutral geometric humanist grotesque headline hero decorative large-text attention italic english western european extended-latin european thai southeast-asia vietnamese well-known common,300 | 300i | 400 | 400i | 500 | 500i | 600 | 600i | 700 | 700i,,latin | latin-ext | thai | vietnamese,Cadson Demak,153,472,No,2018-09-10,2025-09-16,https://fonts.google.com/specimen/Chakra+Petch
+Changa,Sans Serif,Sans Serif,Display,clean modern minimal professional readable neutral geometric humanist grotesque headline hero decorative large-text attention versatile multi-weight flexible variable variable-font responsive variable-weight arabic RTL middle-east english western european extended-latin european well-known common,200 | 300 | 400 | 500 | 600 | 700 | 800,wght: -,arabic | latin | latin-ext,Eduardo Tunni,240,350,No,2016-06-15,2025-09-10,https://fonts.google.com/specimen/Changa
+Changa One,Display,Sans Serif,Display,bold decorative headline attention-grabbing creative expressive geometric humanist grotesque headline hero decorative large-text attention italic english western european popular widely-used,400 | 400i,,latin,Eduardo Tunni,96,483,No,2011-11-30,2025-09-10,https://fonts.google.com/specimen/Changa+One
+Chango,Display,Sans Serif,Display,bold decorative headline attention-grabbing creative expressive geometric humanist grotesque headline hero decorative large-text attention english western european extended-latin european,400,,latin | latin-ext,Fontstage,347,1848,No,2011-12-13,2025-09-04,https://fonts.google.com/specimen/Chango
+Charis SIL,Serif,Serif,,elegant traditional classic refined literary editorial transitional oldstyle didone italic russian cyrillic slavic cyrillic extended english western european extended-latin european vietnamese,400 | 400i | 700 | 700i,,cyrillic | cyrillic-ext | latin | latin-ext | vietnamese,SIL International,642,76,No,2022-05-12,2025-05-30,https://fonts.google.com/specimen/Charis+SIL
+Charm,Handwriting,,Handwriting,personal casual friendly warm handwritten script organic  script cursive hand-drawn artistic informal english western european extended-latin european thai southeast-asia vietnamese,400 | 700,,latin | latin-ext | thai | vietnamese,Cadson Demak,533,642,No,2018-12-11,2025-09-16,https://fonts.google.com/specimen/Charm
+Charmonman,Handwriting,,Handwriting,personal casual friendly warm handwritten script organic  script cursive hand-drawn artistic informal english western european extended-latin european thai southeast-asia vietnamese,400 | 700,,latin | latin-ext | thai | vietnamese,Cadson Demak,1053,1355,No,2018-09-10,2025-09-16,https://fonts.google.com/specimen/Charmonman
+Chathura,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque english western european telugu indian,100 | 300 | 400 | 700 | 800,,latin | telugu,Appaji Ambarisha Darbha,1454,2202,No,2016-06-15,2025-09-16,https://fonts.google.com/specimen/Chathura
+Chau Philomene One,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque italic english western european extended-latin european,400 | 400i,,latin | latin-ext,Vicente Lamónaca,1168,716,No,2012-04-04,2025-09-16,https://fonts.google.com/specimen/Chau+Philomene+One
+Chela One,Display,,Display,bold decorative headline attention-grabbing creative expressive  headline hero decorative large-text attention english western european extended-latin european,400,,latin | latin-ext,Miguel Hernandez,1497,2109,No,2012-10-05,2025-09-04,https://fonts.google.com/specimen/Chela+One
+Chelsea Market,Display,,Display,bold decorative headline attention-grabbing creative expressive  headline hero decorative large-text attention english western european extended-latin european,400,,latin | latin-ext,Tart Workshop,832,477,No,2012-01-04,2025-09-16,https://fonts.google.com/specimen/Chelsea+Market
+Chenla,Display,,Display,bold decorative headline attention-grabbing creative expressive  headline hero decorative large-text attention khmer cambodian,400,,khmer,Danh Hong,1646,1964,No,2011-03-02,2022-09-21,https://fonts.google.com/specimen/Chenla
+Cherish,Handwriting,,Handwriting,personal casual friendly warm handwritten script organic  script cursive hand-drawn artistic informal english western european extended-latin european vietnamese,400,,latin | latin-ext | vietnamese,Robert Leuschke,1700,297,No,2021-08-13,2025-09-11,https://fonts.google.com/specimen/Cherish
+Cherry Bomb One,Display,,Display,bold decorative headline attention-grabbing creative expressive  headline hero decorative large-text attention japanese kanji hiragana katakana english western european extended-latin european vietnamese,400,,japanese | latin | latin-ext | vietnamese,Satsuyako,808,690,No,2023-05-23,2025-09-16,https://fonts.google.com/specimen/Cherry+Bomb+One
+Cherry Cream Soda,Display,,Display,bold decorative headline attention-grabbing creative expressive  headline hero decorative large-text attention english western european,400,,latin,Font Diner,928,405,No,2011-01-06,2025-05-30,https://fonts.google.com/specimen/Cherry+Cream+Soda
+Cherry Swash,Display,Serif,Display,bold decorative headline attention-grabbing creative expressive transitional oldstyle didone headline hero decorative large-text attention english western european extended-latin european,400 | 700,,latin | latin-ext,Nataliya Kasatkina,1178,2260,No,2012-10-24,2025-09-16,https://fonts.google.com/specimen/Cherry+Swash
+Chewy,Display,,Display,bold decorative headline attention-grabbing creative expressive  headline hero decorative large-text attention english western european,400,,latin,Sideshow,535,1571,No,2011-01-06,2025-05-30,https://fonts.google.com/specimen/Chewy
+Chicle,Display,Serif,Display,bold decorative headline attention-grabbing creative expressive transitional oldstyle didone headline hero decorative large-text attention english western european extended-latin european,400,,latin | latin-ext,Sudtipos,1137,2044,No,2011-11-30,2025-09-10,https://fonts.google.com/specimen/Chicle
+Chilanka,Handwriting,,Handwriting,personal casual friendly warm handwritten script organic  script cursive hand-drawn artistic informal english western european extended-latin european malayalam indian,400,,latin | latin-ext | malayalam,SMC | Santhosh Thottingal,1210,85,No,2016-05-10,2025-09-16,https://fonts.google.com/specimen/Chilanka
+Chiron GoRound TC,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque versatile multi-weight flexible variable variable-font responsive variable-weight chinese traditional russian cyrillic slavic cyrillic extended english western european extended-latin european vietnamese multilingual international,200 | 300 | 400 | 500 | 600 | 700 | 800 | 900,wght: -,chinese-traditional | cyrillic | cyrillic-ext | latin | latin-ext | vietnamese,Tamcy,1474,52,No,2025-06-20,2026-01-06,https://fonts.google.com/specimen/Chiron+GoRound+TC
+Chiron Hei HK,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque versatile multi-weight flexible italic variable variable-font responsive variable-weight chinese traditional russian cyrillic slavic cyrillic extended greek greek extended english western european extended-latin european vietnamese multilingual international,200 | 200i | 300 | 300i | 400 | 400i | 500 | 500i | 600 | 600i | 700 | 700i | 800 | 800i | 900 | 900i,wght: -,chinese-traditional | cyrillic | cyrillic-ext | greek | greek-ext | latin | latin-ext | symbols2 | vietnamese,Tamcy,1612,99,No,2025-05-07,2026-01-06,https://fonts.google.com/specimen/Chiron+Hei+HK
+Chiron Sung HK,Serif,Serif,,elegant traditional classic refined literary editorial transitional oldstyle didone versatile multi-weight flexible italic variable variable-font responsive variable-weight russian cyrillic slavic cyrillic extended greek english western european extended-latin european vietnamese multilingual international,200 | 200i | 300 | 300i | 400 | 400i | 500 | 500i | 600 | 600i | 700 | 700i | 800 | 800i | 900 | 900i,wght: -,chinese-hongkong | cyrillic | cyrillic-ext | greek | latin | latin-ext | symbols2 | vietnamese,Tamcy,1705,123,No,2025-06-11,2026-01-06,https://fonts.google.com/specimen/Chiron+Sung+HK
+Chivo,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque versatile multi-weight flexible italic variable variable-font responsive variable-weight english western european extended-latin european vietnamese well-known common,100 | 100i | 200 | 200i | 300 | 300i | 400 | 400i | 500 | 500i | 600 | 600i | 700 | 700i | 800 | 800i | 900 | 900i,wght: -,latin | latin-ext | vietnamese,Omnibus-Type,234,2051,No,2011-12-07,2025-09-10,https://fonts.google.com/specimen/Chivo
+Chivo Mono,Monospace,Sans Serif,Monospace,code developer technical fixed-width terminal programming geometric humanist grotesque mono fixed-width tabular data code versatile multi-weight flexible italic variable variable-font responsive variable-weight english western european extended-latin european vietnamese,100 | 100i | 200 | 200i | 300 | 300i | 400 | 400i | 500 | 500i | 600 | 600i | 700 | 700i | 800 | 800i | 900 | 900i,wght: -,latin | latin-ext | vietnamese,Omnibus-Type,698,1711,No,2022-11-02,2025-09-10,https://fonts.google.com/specimen/Chivo+Mono
+Chocolate Classical Sans,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque chinese traditional russian cyrillic slavic english western european extended-latin european vietnamese,400,,chinese-traditional | cyrillic | latin | latin-ext | vietnamese,Moonlit Owen,1372,1172,No,2024-05-14,2026-01-06,https://fonts.google.com/specimen/Chocolate+Classical+Sans
+Chokokutai,Display,,Display,bold decorative headline attention-grabbing creative expressive  headline hero decorative large-text attention japanese kanji hiragana katakana english western european extended-latin european vietnamese,400,,japanese | latin | latin-ext | vietnamese,Font Zone 108,1698,835,No,2023-05-23,2025-09-08,https://fonts.google.com/specimen/Chokokutai
+Chonburi,Display,Serif,Display,bold decorative headline attention-grabbing creative expressive transitional oldstyle didone headline hero decorative large-text attention english western european extended-latin european thai southeast-asia vietnamese,400,,latin | latin-ext | thai | vietnamese,Cadson Demak,536,255,No,2015-07-08,2025-09-04,https://fonts.google.com/specimen/Chonburi
+Cinzel,Serif,Serif,,elegant traditional classic refined literary editorial transitional oldstyle didone versatile multi-weight flexible variable variable-font responsive variable-weight english western european extended-latin european well-known common,400 | 500 | 600 | 700 | 800 | 900,wght: -,latin | latin-ext,Natanael Gama,151,618,No,2012-10-24,2025-09-10,https://fonts.google.com/specimen/Cinzel
+Cinzel Decorative,Display,Serif,Display,bold decorative headline attention-grabbing creative expressive transitional oldstyle didone headline hero decorative large-text attention english western european extended-latin european,400 | 700 | 900,,latin | latin-ext,Natanael Gama,404,925,No,2012-10-24,2025-09-08,https://fonts.google.com/specimen/Cinzel+Decorative
+Clicker Script,Handwriting,,Handwriting,personal casual friendly warm handwritten script organic  script cursive hand-drawn artistic informal english western european extended-latin european,400,,latin | latin-ext,Astigmatic,1069,1861,No,2012-11-11,2025-09-11,https://fonts.google.com/specimen/Clicker+Script
+Climate Crisis,Display,Sans Serif,Display,bold decorative headline attention-grabbing creative expressive geometric humanist grotesque headline hero decorative large-text attention variable variable-font responsive english western european extended-latin european,400,YEAR: -,latin | latin-ext,Daniel Coull | Eino Korkala,1423,1842,No,2022-09-30,2025-09-02,https://fonts.google.com/specimen/Climate+Crisis
+Coda,Display,,Display,bold decorative headline attention-grabbing creative expressive  headline hero decorative large-text attention english western european extended-latin european,400 | 800,,latin | latin-ext,Vernon Adams,560,1844,No,2010-12-07,2025-09-11,https://fonts.google.com/specimen/Coda
+Codystar,Display,Sans Serif,Display,bold decorative headline attention-grabbing creative expressive geometric humanist grotesque headline hero decorative large-text attention english western european extended-latin european,300 | 400,,latin | latin-ext,Neapolitan,1018,1326,No,2012-03-14,2025-09-11,https://fonts.google.com/specimen/Codystar
+Coiny,Display,,Display,bold decorative headline attention-grabbing creative expressive  headline hero decorative large-text attention english western european extended-latin european tamil indian vietnamese,400,,latin | latin-ext | tamil | vietnamese,Marcelo Magalhães,782,233,No,2016-06-20,2025-09-16,https://fonts.google.com/specimen/Coiny
+Combo,Display,,Display,bold decorative headline attention-grabbing creative expressive  headline hero decorative large-text attention english western european extended-latin european,400,,latin | latin-ext,Eduardo Tunni,1694,1608,No,2012-09-23,2025-09-11,https://fonts.google.com/specimen/Combo
+Comfortaa,Display,Sans Serif,Display,bold decorative headline attention-grabbing creative expressive geometric humanist grotesque headline hero decorative large-text attention variable variable-font responsive variable-weight russian cyrillic slavic cyrillic extended greek english western european extended-latin european vietnamese multilingual international popular widely-used,300 | 400 | 500 | 600 | 700,wght: -,cyrillic | cyrillic-ext | greek | latin | latin-ext | vietnamese,Johan Aakerlund,122,1226,No,2011-08-10,2025-09-08,https://fonts.google.com/specimen/Comfortaa
+Comforter,Handwriting,,Display | Handwriting,personal casual friendly warm handwritten script organic  headline hero decorative large-text attention script cursive hand-drawn artistic informal russian cyrillic slavic english western european extended-latin european vietnamese,400,,cyrillic | latin | latin-ext | vietnamese,Robert Leuschke,1314,1992,No,2021-09-28,2025-09-10,https://fonts.google.com/specimen/Comforter
+Comforter Brush,Handwriting,,Handwriting | Display,personal casual friendly warm handwritten script organic  script cursive hand-drawn artistic informal headline hero decorative large-text attention russian cyrillic slavic english western european extended-latin european vietnamese,400,,cyrillic | latin | latin-ext | vietnamese,Robert Leuschke,1322,2229,No,2021-09-16,2025-09-04,https://fonts.google.com/specimen/Comforter+Brush
+Comic Neue,Handwriting,,Handwriting,personal casual friendly warm handwritten script organic  script cursive hand-drawn artistic informal italic english western european well-known common,300 | 300i | 400 | 400i | 700 | 700i,,latin,Craig Rozynski | Hrant Papazian,239,541,No,2020-03-12,2025-09-16,https://fonts.google.com/specimen/Comic+Neue
+Comic Relief,Display,,Display,bold decorative headline attention-grabbing creative expressive  headline hero decorative large-text attention russian cyrillic slavic greek english western european extended-latin european,400 | 700,,cyrillic | greek | latin | latin-ext,Jeff Davis,1165,1954,No,2025-04-17,2025-04-23,https://fonts.google.com/specimen/Comic+Relief
+Coming Soon,Handwriting,,Handwriting,personal casual friendly warm handwritten script organic  script cursive hand-drawn artistic informal english western european,400,,latin,Open Window,660,1652,No,2011-01-06,2025-09-08,https://fonts.google.com/specimen/Coming+Soon
+Comme,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque versatile multi-weight flexible variable variable-font responsive variable-weight english western european extended-latin european,100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900,wght: -,latin | latin-ext,Vernon Adams,1219,1317,No,2023-03-28,2025-09-11,https://fonts.google.com/specimen/Comme
+Commissioner,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque versatile multi-weight flexible variable variable-font responsive variable-weight variable-slant russian cyrillic slavic cyrillic extended greek english western european extended-latin european vietnamese multilingual international,100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900,FLAR: - | VOLM: - | slnt: - | wght: -,cyrillic | cyrillic-ext | greek | latin | latin-ext | vietnamese,Kostas Bartsokas,336,2125,No,2020-07-20,2025-09-10,https://fonts.google.com/specimen/Commissioner
+Concert One,Display,Sans Serif,Display,bold decorative headline attention-grabbing creative expressive geometric humanist grotesque headline hero decorative large-text attention english western european extended-latin european,400,,latin | latin-ext,Johan Kallas | Mihkel Virkus,329,753,No,2011-11-23,2025-09-11,https://fonts.google.com/specimen/Concert+One
+Condiment,Handwriting,,Display | Handwriting,personal casual friendly warm handwritten script organic  headline hero decorative large-text attention script cursive hand-drawn artistic informal english western european extended-latin european,400,,latin | latin-ext,Sudtipos,1430,1763,No,2012-01-25,2025-09-11,https://fonts.google.com/specimen/Condiment
+Content,Display,,Display,bold decorative headline attention-grabbing creative expressive  headline hero decorative large-text attention khmer cambodian,400 | 700,,khmer,Danh Hong,1360,1969,No,2011-03-02,2024-12-04,https://fonts.google.com/specimen/Content
+Contrail One,Display,Sans Serif,Display,bold decorative headline attention-grabbing creative expressive geometric humanist grotesque headline hero decorative large-text attention english western european,400,,latin,Riccardo De Franceschi,784,1264,No,2011-10-26,2025-09-08,https://fonts.google.com/specimen/Contrail+One
+Convergence,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque english western european extended-latin european,400,,latin | latin-ext,Nicolás Silva | John Vargas Beltrán,1188,1643,No,2011-11-09,2025-09-08,https://fonts.google.com/specimen/Convergence
+Cookie,Handwriting,,Display | Handwriting,personal casual friendly warm handwritten script organic  headline hero decorative large-text attention script cursive hand-drawn artistic informal english western european,400,,latin,Ania Kruk,324,342,No,2011-10-12,2025-09-16,https://fonts.google.com/specimen/Cookie
+Copse,Serif,Serif,,elegant traditional classic refined literary editorial transitional oldstyle didone english western european,400,,latin,Dan Rhatigan,818,907,No,2010-12-15,2025-09-08,https://fonts.google.com/specimen/Copse
+Coral Pixels,Display,Serif,Display,bold decorative headline attention-grabbing creative expressive transitional oldstyle didone headline hero decorative large-text attention english western european extended-latin european,400,,latin | latin-ext,Tanukizamurai,1813,488,No,2025-04-17,2025-04-23,https://fonts.google.com/specimen/Coral+Pixels
+Corben,Display,Serif,Display,bold decorative headline attention-grabbing creative expressive transitional oldstyle didone headline hero decorative large-text attention english western european extended-latin european,400 | 700,,latin | latin-ext,Vernon Adams,563,893,No,2010-12-20,2025-09-10,https://fonts.google.com/specimen/Corben
+Corinthia,Handwriting,,Handwriting | Display,personal casual friendly warm handwritten script organic  script cursive hand-drawn artistic informal headline hero decorative large-text attention english western european extended-latin european vietnamese,400 | 700,,latin | latin-ext | vietnamese,Robert Leuschke,829,860,No,2021-08-26,2025-09-04,https://fonts.google.com/specimen/Corinthia
+Cormorant,Serif,Serif,,elegant traditional classic refined literary editorial transitional oldstyle didone italic variable variable-font responsive variable-weight russian cyrillic slavic cyrillic extended english western european extended-latin european vietnamese well-known common,300 | 300i | 400 | 400i | 500 | 500i | 600 | 600i | 700 | 700i,wght: -,cyrillic | cyrillic-ext | latin | latin-ext | vietnamese,Christian Thalmann,191,839,No,2016-06-15,2025-09-04,https://fonts.google.com/specimen/Cormorant
+Cormorant Garamond,Serif,Serif,,elegant traditional classic refined literary editorial transitional oldstyle didone italic variable variable-font responsive variable-weight russian cyrillic slavic cyrillic extended english western european extended-latin european vietnamese popular widely-used,300 | 300i | 400 | 400i | 500 | 500i | 600 | 600i | 700 | 700i,wght: -,cyrillic | cyrillic-ext | latin | latin-ext | vietnamese,Christian Thalmann,113,731,No,2016-06-15,2025-09-08,https://fonts.google.com/specimen/Cormorant+Garamond
+Cormorant Infant,Serif,Serif,,elegant traditional classic refined literary editorial transitional oldstyle didone italic variable variable-font responsive variable-weight russian cyrillic slavic cyrillic extended english western european extended-latin european vietnamese,300 | 300i | 400 | 400i | 500 | 500i | 600 | 600i | 700 | 700i,wght: -,cyrillic | cyrillic-ext | latin | latin-ext | vietnamese,Christian Thalmann,455,666,No,2016-06-15,2025-09-04,https://fonts.google.com/specimen/Cormorant+Infant
+Cormorant SC,Serif,Serif,,elegant traditional classic refined literary editorial transitional oldstyle didone russian cyrillic slavic cyrillic extended english western european extended-latin european vietnamese,300 | 400 | 500 | 600 | 700,,cyrillic | cyrillic-ext | latin | latin-ext | vietnamese,Christian Thalmann,729,1214,No,2016-06-15,2025-09-10,https://fonts.google.com/specimen/Cormorant+SC
+Cormorant Unicase,Serif,Serif,,elegant traditional classic refined literary editorial transitional oldstyle didone russian cyrillic slavic cyrillic extended english western european extended-latin european vietnamese,300 | 400 | 500 | 600 | 700,,cyrillic | cyrillic-ext | latin | latin-ext | vietnamese,Christian Thalmann,792,1578,No,2016-06-15,2025-09-10,https://fonts.google.com/specimen/Cormorant+Unicase
+Cormorant Upright,Serif,Serif,,elegant traditional classic refined literary editorial transitional oldstyle didone english western european extended-latin european vietnamese,300 | 400 | 500 | 600 | 700,,latin | latin-ext | vietnamese,Christian Thalmann,607,892,No,2016-06-15,2025-09-16,https://fonts.google.com/specimen/Cormorant+Upright
+Cossette Texte,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque english western european extended-latin european,400 | 700,,latin | latin-ext,Cossette,1987,75,No,2025-08-25,2025-10-29,https://fonts.google.com/specimen/Cossette+Texte
+Cossette Titre,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque english western european extended-latin european,400 | 700,,latin | latin-ext,Cossette,1712,288,No,2025-08-25,2025-10-29,https://fonts.google.com/specimen/Cossette+Titre
+Courgette,Handwriting,,Display | Handwriting,personal casual friendly warm handwritten script organic  headline hero decorative large-text attention script cursive hand-drawn artistic informal english western european extended-latin european well-known common,400,,latin | latin-ext,Karolina Lach,259,1352,No,2012-07-10,2025-09-16,https://fonts.google.com/specimen/Courgette
+Courier Prime,Monospace,Serif,Monospace,code developer technical fixed-width terminal programming transitional oldstyle didone mono fixed-width tabular data code italic english western european extended-latin european well-known common,400 | 400i | 700 | 700i,,latin | latin-ext,Alan Dague-Greene,235,809,No,2019-12-05,2025-09-11,https://fonts.google.com/specimen/Courier+Prime
+Cousine,Monospace,Sans Serif,Monospace,code developer technical fixed-width terminal programming geometric humanist grotesque mono fixed-width tabular data code italic russian cyrillic slavic cyrillic extended greek greek extended hebrew RTL israeli english western european extended-latin european vietnamese multilingual international,400 | 400i | 700 | 700i,,cyrillic | cyrillic-ext | greek | greek-ext | hebrew | latin | latin-ext | vietnamese,Steve Matteson,441,1669,No,2010-11-18,2025-09-08,https://fonts.google.com/specimen/Cousine
+Coustard,Serif,Serif,,elegant traditional classic refined literary editorial transitional oldstyle didone english western european,400 | 900,,latin,Vernon Adams,850,309,No,2011-08-10,2025-09-08,https://fonts.google.com/specimen/Coustard
+Covered By Your Grace,Handwriting,,Handwriting,personal casual friendly warm handwritten script organic  script cursive hand-drawn artistic informal english western european extended-latin european,400,,latin | latin-ext,Kimberly Geswein,521,1477,No,2010-12-07,2025-09-10,https://fonts.google.com/specimen/Covered+By+Your+Grace
+Crafty Girls,Handwriting,,Handwriting,personal casual friendly warm handwritten script organic  script cursive hand-drawn artistic informal english western european,400,,latin,Tart Workshop,886,444,No,2011-01-06,2025-05-30,https://fonts.google.com/specimen/Crafty+Girls
+Creepster,Display,,Display,bold decorative headline attention-grabbing creative expressive  headline hero decorative large-text attention english western european well-known common,400,,latin,Sideshow,208,1674,No,2011-12-19,2025-05-30,https://fonts.google.com/specimen/Creepster
+Crete Round,Serif,Serif,,elegant traditional classic refined literary editorial transitional oldstyle didone italic english western european extended-latin european well-known common,400 | 400i,,latin | latin-ext,TypeTogether,274,1012,No,2011-12-19,2025-09-08,https://fonts.google.com/specimen/Crete+Round
+Crimson Pro,Serif,Serif,,elegant traditional classic refined literary editorial transitional oldstyle didone versatile multi-weight flexible italic variable variable-font responsive variable-weight english western european extended-latin european vietnamese well-known common,200 | 200i | 300 | 300i | 400 | 400i | 500 | 500i | 600 | 600i | 700 | 700i | 800 | 800i | 900 | 900i,wght: -,latin | latin-ext | vietnamese,Jacques Le Bailly,253,1627,No,2018-12-04,2025-09-11,https://fonts.google.com/specimen/Crimson+Pro
+Crimson Text,Serif,Serif,,elegant traditional classic refined literary editorial transitional oldstyle didone italic english western european extended-latin european vietnamese popular widely-used,400 | 400i | 600 | 600i | 700 | 700i,,latin | latin-ext | vietnamese,Sebastian Kosch,124,514,No,2011-01-26,2025-05-30,https://fonts.google.com/specimen/Crimson+Text
+Croissant One,Display,Serif,Display,bold decorative headline attention-grabbing creative expressive transitional oldstyle didone headline hero decorative large-text attention english western european extended-latin european,400,,latin | latin-ext,Eduardo Tunni,761,1885,No,2012-11-12,2025-09-16,https://fonts.google.com/specimen/Croissant+One
+Crushed,Display,Sans Serif,Display,bold decorative headline attention-grabbing creative expressive geometric humanist grotesque headline hero decorative large-text attention english western european extended-latin european,400,,latin | latin-ext,Astigmatic,1093,1697,No,2011-01-06,2025-09-08,https://fonts.google.com/specimen/Crushed
+Cuprum,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque italic variable variable-font responsive variable-weight russian cyrillic slavic cyrillic extended english western european extended-latin european vietnamese,400 | 400i | 500 | 500i | 600 | 600i | 700 | 700i,wght: -,cyrillic | cyrillic-ext | latin | latin-ext | vietnamese,Jovanny Lemonad,429,725,No,2012-04-04,2025-09-08,https://fonts.google.com/specimen/Cuprum
+Cute Font,Display,Sans Serif,Display,bold decorative headline attention-grabbing creative expressive geometric humanist grotesque headline hero decorative large-text attention korean hangul english western european,400,,korean | latin,TypoDesign Lab. Inc,1236,149,No,2018-02-23,2025-09-04,https://fonts.google.com/specimen/Cute+Font
+Cutive,Serif,Slab Serif,Display,elegant traditional classic refined literary editorial slab mechanical sturdy strong headline hero decorative large-text attention english western european extended-latin european,400,,latin | latin-ext,Vernon Adams,959,1921,No,2012-02-29,2025-09-11,https://fonts.google.com/specimen/Cutive
+Cutive Mono,Monospace,Serif,Monospace,code developer technical fixed-width terminal programming transitional oldstyle didone mono fixed-width tabular data code english western european extended-latin european,400,,latin | latin-ext,Vernon Adams,654,1735,No,2012-10-26,2025-09-11,https://fonts.google.com/specimen/Cutive+Mono
+DM Mono,Monospace,Sans Serif,Monospace,code developer technical fixed-width terminal programming geometric humanist grotesque mono fixed-width tabular data code italic english western european extended-latin european well-known common,300 | 300i | 400 | 400i | 500 | 500i,,latin | latin-ext,Colophon Foundry,157,282,No,2020-04-15,2025-09-16,https://fonts.google.com/specimen/DM+Mono
+DM Sans,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque versatile multi-weight flexible italic variable variable-font responsive variable-weight english western european extended-latin european top-popular trending most-used,100 | 1000 | 1000i | 100i | 200 | 200i | 300 | 300i | 400 | 400i | 500 | 500i | 600 | 600i | 700 | 700i | 800 | 800i | 900 | 900i,opsz: - | wght: -,latin | latin-ext,Colophon Foundry,26,333,No,2019-06-11,2025-09-11,https://fonts.google.com/specimen/DM+Sans
+DM Serif Display,Serif,Serif,Display,elegant traditional classic refined literary editorial transitional oldstyle didone headline hero decorative large-text attention italic english western european extended-latin european popular widely-used,400 | 400i,,latin | latin-ext,Colophon Foundry,130,568,No,2019-06-11,2025-09-11,https://fonts.google.com/specimen/DM+Serif+Display
+DM Serif Text,Serif,Serif,,elegant traditional classic refined literary editorial transitional oldstyle didone italic english western european extended-latin european well-known common,400 | 400i,,latin | latin-ext,Colophon Foundry,218,107,No,2019-06-11,2025-09-02,https://fonts.google.com/specimen/DM+Serif+Text
+Dai Banna SIL,Serif,Serif,,elegant traditional classic refined literary editorial transitional oldstyle didone italic english western european extended-latin european,300 | 300i | 400 | 400i | 500 | 500i | 600 | 600i | 700 | 700i,,latin | latin-ext | new-tai-lue,SIL International,1565,258,No,2023-07-20,2025-05-30,https://fonts.google.com/specimen/Dai+Banna+SIL
+Damion,Handwriting,,Handwriting,personal casual friendly warm handwritten script organic  script cursive hand-drawn artistic informal english western european extended-latin european,400,,latin | latin-ext,Vernon Adams,490,1257,No,2011-04-27,2025-05-30,https://fonts.google.com/specimen/Damion
+Dancing Script,Handwriting,,Handwriting,personal casual friendly warm handwritten script organic  script cursive hand-drawn artistic informal variable variable-font responsive variable-weight english western european extended-latin european vietnamese popular widely-used,400 | 500 | 600 | 700,wght: -,latin | latin-ext | vietnamese,Impallari Type,70,707,No,2011-05-18,2025-09-08,https://fonts.google.com/specimen/Dancing+Script
+Danfo,Serif,Serif,Display,elegant traditional classic refined literary editorial transitional oldstyle didone headline hero decorative large-text attention variable variable-font responsive english western european extended-latin european vietnamese,400,ELSH: -,latin | latin-ext | vietnamese,Afrotype | Seyi Olusanya | Eyiyemi Adegbite | David Udoh | Mirko Velimirović,1652,801,No,2024-03-14,2025-09-04,https://fonts.google.com/specimen/Danfo
+Dangrek,Display,Sans Serif,Display,bold decorative headline attention-grabbing creative expressive geometric humanist grotesque headline hero decorative large-text attention khmer cambodian english western european,400,,khmer | latin,Danh Hong,1288,817,No,2011-03-02,2025-09-11,https://fonts.google.com/specimen/Dangrek
+Darker Grotesque,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque versatile multi-weight flexible variable variable-font responsive variable-weight english western european extended-latin european vietnamese,300 | 400 | 500 | 600 | 700 | 800 | 900,wght: -,latin | latin-ext | vietnamese,Gabriel Lam | ViệtAnh Nguyễn,541,663,No,2019-06-19,2025-09-10,https://fonts.google.com/specimen/Darker+Grotesque
+Darumadrop One,Display,Sans Serif,Display,bold decorative headline attention-grabbing creative expressive geometric humanist grotesque headline hero decorative large-text attention japanese kanji hiragana katakana english western european extended-latin european,400,,japanese | latin | latin-ext,Maniackers Design,1263,2049,No,2020-12-13,2025-09-08,https://fonts.google.com/specimen/Darumadrop+One
+David Libre,Serif,Serif,,elegant traditional classic refined literary editorial transitional oldstyle didone hebrew RTL israeli english western european extended-latin european vietnamese multilingual international,400 | 500 | 700,,hebrew | latin | latin-ext | math | symbols | vietnamese,Monotype Imaging Inc. | SIL International | Meir Sadan,840,301,No,2016-06-15,2025-09-10,https://fonts.google.com/specimen/David+Libre
+Dawning of a New Day,Handwriting,,Display | Handwriting,personal casual friendly warm handwritten script organic  headline hero decorative large-text attention script cursive hand-drawn artistic informal english western european,400,,latin,Kimberly Geswein,676,1684,No,2011-04-14,2025-09-16,https://fonts.google.com/specimen/Dawning+of+a+New+Day
+Days One,Sans Serif,Sans Serif,Display,clean modern minimal professional readable neutral geometric humanist grotesque headline hero decorative large-text attention russian cyrillic slavic english western european,400,,cyrillic | latin,Jovanny Lemonad,470,147,No,2011-08-17,2025-04-23,https://fonts.google.com/specimen/Days+One
+Dekko,Handwriting,Sans Serif,Handwriting,personal casual friendly warm handwritten script organic geometric humanist grotesque script cursive hand-drawn artistic informal hindi devanagari indian english western european extended-latin european,400,,devanagari | latin | latin-ext,Sorkin Type,1413,1834,No,2015-01-28,2025-09-08,https://fonts.google.com/specimen/Dekko
+Dela Gothic One,Display,Sans Serif,Display,bold decorative headline attention-grabbing creative expressive geometric humanist grotesque headline hero decorative large-text attention russian cyrillic slavic greek japanese kanji hiragana katakana english western european extended-latin european vietnamese multilingual international,400,,cyrillic | greek | japanese | latin | latin-ext | vietnamese,artakana,415,1777,No,2020-12-13,2025-09-16,https://fonts.google.com/specimen/Dela+Gothic+One
+Delicious Handrawn,Handwriting,,Display | Handwriting,personal casual friendly warm handwritten script organic  headline hero decorative large-text attention script cursive hand-drawn artistic informal english western european extended-latin european,400,,latin | latin-ext,Agung Rohmat,1025,1851,No,2023-01-05,2025-09-11,https://fonts.google.com/specimen/Delicious+Handrawn
+Delius,Handwriting,,Display | Handwriting,personal casual friendly warm handwritten script organic  headline hero decorative large-text attention script cursive hand-drawn artistic informal english western european well-known common,400,,latin,Natalia Raices,267,1175,No,2011-07-27,2025-09-16,https://fonts.google.com/specimen/Delius
+Delius Swash Caps,Handwriting,,Handwriting | Display,personal casual friendly warm handwritten script organic  script cursive hand-drawn artistic informal headline hero decorative large-text attention english western european,400,,latin,Natalia Raices,1183,1220,No,2011-08-03,2025-09-04,https://fonts.google.com/specimen/Delius+Swash+Caps
+Delius Unicase,Handwriting,Sans Serif,Display | Handwriting,personal casual friendly warm handwritten script organic geometric humanist grotesque headline hero decorative large-text attention script cursive hand-drawn artistic informal english western european,400 | 700,,latin,Natalia Raices,922,1913,No,2011-10-12,2025-09-10,https://fonts.google.com/specimen/Delius+Unicase
+Della Respira,Serif,Serif,Display,elegant traditional classic refined literary editorial transitional oldstyle didone headline hero decorative large-text attention english western european,400,,latin,Nathan Willis,895,1403,No,2012-04-04,2025-09-16,https://fonts.google.com/specimen/Della+Respira
+Denk One,Sans Serif,Sans Serif,Display,clean modern minimal professional readable neutral geometric humanist grotesque headline hero decorative large-text attention cyrillic extended english western european extended-latin european vietnamese,400,,cyrillic-ext | latin | latin-ext | vietnamese,Sorkin Type,906,187,No,2012-12-13,2025-09-04,https://fonts.google.com/specimen/Denk+One
+Devonshire,Handwriting,,Display | Handwriting,personal casual friendly warm handwritten script organic  headline hero decorative large-text attention script cursive hand-drawn artistic informal english western european extended-latin european,400,,latin | latin-ext,Astigmatic,1282,320,No,2011-11-16,2025-09-10,https://fonts.google.com/specimen/Devonshire
+Dhurjati,Sans Serif,Sans Serif,Display,clean modern minimal professional readable neutral geometric humanist grotesque headline hero decorative large-text attention english western european telugu indian,400,,latin | telugu,Purushoth Kumar Guttula,1590,783,No,2014-12-10,2025-09-10,https://fonts.google.com/specimen/Dhurjati
+Didact Gothic,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque russian cyrillic slavic cyrillic extended greek greek extended english western european extended-latin european multilingual international,400,,cyrillic | cyrillic-ext | greek | greek-ext | latin | latin-ext,Daniel Johnson | Cyreal,308,1323,No,2011-05-04,2025-09-16,https://fonts.google.com/specimen/Didact+Gothic
+Diphylleia,Serif,Serif,,elegant traditional classic refined literary editorial transitional oldstyle didone korean hangul english western european extended-latin european,400,,korean | latin | latin-ext,Minha Hyung | JAMO,1584,967,No,2023-06-05,2025-05-30,https://fonts.google.com/specimen/Diphylleia
+Diplomata,Display,Serif,Display,bold decorative headline attention-grabbing creative expressive transitional oldstyle didone headline hero decorative large-text attention english western european extended-latin european,400,,latin | latin-ext,Eduardo Tunni,1524,1847,No,2012-01-25,2025-09-02,https://fonts.google.com/specimen/Diplomata
+Diplomata SC,Display,Serif,Display,bold decorative headline attention-grabbing creative expressive transitional oldstyle didone headline hero decorative large-text attention english western european extended-latin european,400,,latin | latin-ext,Eduardo Tunni,1585,2020,No,2012-01-25,2025-09-04,https://fonts.google.com/specimen/Diplomata+SC
+Do Hyeon,Sans Serif,Sans Serif,Display,clean modern minimal professional readable neutral geometric humanist grotesque headline hero decorative large-text attention korean hangul english western european,400,,korean | latin,Woowahan Brothers,540,1177,No,2018-02-24,2025-09-11,https://fonts.google.com/specimen/Do+Hyeon
+Dokdo,Display,,Display,bold decorative headline attention-grabbing creative expressive  headline hero decorative large-text attention korean hangul english western european,400,,korean | latin,FONTRIX,1079,747,No,2018-02-23,2025-09-16,https://fonts.google.com/specimen/Dokdo
+Domine,Serif,Serif,,elegant traditional classic refined literary editorial transitional oldstyle didone variable variable-font responsive variable-weight english western european extended-latin european popular widely-used,400 | 500 | 600 | 700,wght: -,latin | latin-ext,Impallari Type,149,1441,No,2012-11-30,2025-09-11,https://fonts.google.com/specimen/Domine
+Donegal One,Serif,Serif,,elegant traditional classic refined literary editorial transitional oldstyle didone english western european extended-latin european,400,,latin | latin-ext,Gary Lonergan,1457,861,No,2012-12-13,2025-09-08,https://fonts.google.com/specimen/Donegal+One
+Dongle,Sans Serif,Sans Serif,Display,clean modern minimal professional readable neutral geometric humanist grotesque headline hero decorative large-text attention korean hangul english western european extended-latin european vietnamese,300 | 400 | 700,,korean | latin | latin-ext | vietnamese,Yanghee Ryu,668,734,No,2021-06-14,2025-09-16,https://fonts.google.com/specimen/Dongle
+Doppio One,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque english western european extended-latin european,400,,latin | latin-ext,Szymon Celej,1028,1731,No,2012-02-22,2025-09-10,https://fonts.google.com/specimen/Doppio+One
+Dorsa,Sans Serif,Sans Serif,Display,clean modern minimal professional readable neutral geometric humanist grotesque headline hero decorative large-text attention english western european,400,,latin,Santiago Orozco,1381,1427,No,2011-08-31,2025-09-10,https://fonts.google.com/specimen/Dorsa
+Dosis,Sans Serif,Sans Serif,Display,clean modern minimal professional readable neutral geometric humanist grotesque headline hero decorative large-text attention versatile multi-weight flexible variable variable-font responsive variable-weight english western european extended-latin european vietnamese popular widely-used,200 | 300 | 400 | 500 | 600 | 700 | 800,wght: -,latin | latin-ext | vietnamese,Impallari Type,87,1397,No,2012-03-20,2025-09-11,https://fonts.google.com/specimen/Dosis
+DotGothic16,Sans Serif,Sans Serif,Display,clean modern minimal professional readable neutral geometric humanist grotesque headline hero decorative large-text attention russian cyrillic slavic japanese kanji hiragana katakana english western european extended-latin european,400,,cyrillic | japanese | latin | latin-ext,Fontworks Inc.,690,719,No,2020-12-15,2025-09-11,https://fonts.google.com/specimen/DotGothic16
+Doto,Sans Serif,Sans Serif,Display,clean modern minimal professional readable neutral geometric humanist grotesque headline hero decorative large-text attention versatile multi-weight flexible variable variable-font responsive variable-weight english western european extended-latin european,100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900,ROND: - | wght: -,latin | latin-ext,Óliver Lalan,1176,2101,No,2024-11-05,2025-09-11,https://fonts.google.com/specimen/Doto
+Dr Sugiyama,Handwriting,,Handwriting | Display,personal casual friendly warm handwritten script organic  script cursive hand-drawn artistic informal headline hero decorative large-text attention english western european extended-latin european,400,,latin | latin-ext,Sudtipos,1530,1577,No,2011-11-30,2025-09-04,https://fonts.google.com/specimen/Dr+Sugiyama
+Duru Sans,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque english western european extended-latin european,400,,latin | latin-ext,Onur Yazıcıgil,1104,1315,No,2011-12-19,2025-09-10,https://fonts.google.com/specimen/Duru+Sans
+DynaPuff,Display,,Display,bold decorative headline attention-grabbing creative expressive  headline hero decorative large-text attention variable variable-font responsive variable-weight variable-width cyrillic extended english western european extended-latin european,400 | 500 | 600 | 700,wdth: - | wght: -,cyrillic-ext | latin | latin-ext,Toshi Omagari | Jennifer Daniel,702,627,No,2022-05-18,2025-09-04,https://fonts.google.com/specimen/DynaPuff
+Dynalight,Display,,Display | Handwriting,bold decorative headline attention-grabbing creative expressive  headline hero decorative large-text attention script cursive hand-drawn artistic informal english western european extended-latin european,400,,latin | latin-ext,Astigmatic,1068,1553,No,2011-12-19,2025-09-11,https://fonts.google.com/specimen/Dynalight
+EB Garamond,Serif,Serif,,elegant traditional classic refined literary editorial transitional oldstyle didone italic variable variable-font responsive variable-weight russian cyrillic slavic cyrillic extended greek greek extended english western european extended-latin european vietnamese multilingual international popular widely-used,400 | 400i | 500 | 500i | 600 | 600i | 700 | 700i | 800 | 800i,wght: -,cyrillic | cyrillic-ext | greek | greek-ext | latin | latin-ext | vietnamese,Georg Duffner | Octavio Pardo,83,1544,No,2011-03-23,2025-09-16,https://fonts.google.com/specimen/EB+Garamond
+Eagle Lake,Handwriting,Serif,Display,personal casual friendly warm handwritten script organic transitional oldstyle didone headline hero decorative large-text attention english western european extended-latin european,400,,latin | latin-ext,Astigmatic,1155,1977,No,2012-07-11,2025-09-16,https://fonts.google.com/specimen/Eagle+Lake
+East Sea Dokdo,Handwriting,Sans Serif,Display,personal casual friendly warm handwritten script organic geometric humanist grotesque headline hero decorative large-text attention korean hangul english western european,400,,korean | latin,YoonDesign Inc,1229,1898,No,2018-03-12,2025-09-16,https://fonts.google.com/specimen/East+Sea+Dokdo
+Eater,Display,Serif,Display,bold decorative headline attention-grabbing creative expressive transitional oldstyle didone headline hero decorative large-text attention english western european extended-latin european,400,,latin | latin-ext,Typomondo,359,1888,No,2011-12-19,2025-09-16,https://fonts.google.com/specimen/Eater
+Economica,Sans Serif,Sans Serif,Display,clean modern minimal professional readable neutral geometric humanist grotesque headline hero decorative large-text attention italic english western european extended-latin european,400 | 400i | 700 | 700i,,latin | latin-ext,Vicente Lamónaca,493,1324,No,2012-02-29,2025-09-04,https://fonts.google.com/specimen/Economica
+Eczar,Serif,Serif,,elegant traditional classic refined literary editorial transitional oldstyle didone variable variable-font responsive variable-weight hindi devanagari indian greek greek extended english western european extended-latin european,400 | 500 | 600 | 700 | 800,wght: -,devanagari | greek | greek-ext | latin | latin-ext,Rosetta | Vaibhav Singh,301,990,No,2015-06-03,2025-09-16,https://fonts.google.com/specimen/Eczar
+Edu AU VIC WA NT Arrows,Handwriting,,Handwriting,personal casual friendly warm handwritten script organic  script cursive hand-drawn artistic informal variable variable-font responsive variable-weight english western european extended-latin european,400 | 500 | 600 | 700,wght: -,latin | latin-ext,Tina Anderson | Corey Anderson,1892,2245,No,2024-08-11,2025-09-11,https://fonts.google.com/specimen/Edu+AU+VIC+WA+NT+Arrows
+Edu AU VIC WA NT Dots,Handwriting,,Handwriting,personal casual friendly warm handwritten script organic  script cursive hand-drawn artistic informal variable variable-font responsive variable-weight english western european extended-latin european,400 | 500 | 600 | 700,wght: -,latin | latin-ext,Tina Anderson | Corey Anderson,1671,924,No,2024-09-18,2025-09-10,https://fonts.google.com/specimen/Edu+AU+VIC+WA+NT+Dots
+Edu AU VIC WA NT Guides,Handwriting,,Handwriting,personal casual friendly warm handwritten script organic  script cursive hand-drawn artistic informal variable variable-font responsive variable-weight english western european extended-latin european,400 | 500 | 600 | 700,wght: -,latin | latin-ext,Tina Anderson | Corey Anderson,1822,111,No,2024-09-18,2025-09-08,https://fonts.google.com/specimen/Edu+AU+VIC+WA+NT+Guides
+Edu AU VIC WA NT Hand,Handwriting,Sans Serif,Handwriting,personal casual friendly warm handwritten script organic geometric humanist grotesque script cursive hand-drawn artistic informal variable variable-font responsive variable-weight english western european extended-latin european,400 | 500 | 600 | 700,wght: -,latin | latin-ext,Tina Anderson | Corey Anderson,1467,2159,No,2024-07-10,2025-09-16,https://fonts.google.com/specimen/Edu+AU+VIC+WA+NT+Hand
+Edu AU VIC WA NT Pre,Handwriting,,Handwriting,personal casual friendly warm handwritten script organic  script cursive hand-drawn artistic informal variable variable-font responsive variable-weight english western european extended-latin european,400 | 500 | 600 | 700,wght: -,latin | latin-ext,Tina Anderson | Corey Anderson,1688,2288,No,2024-11-05,2025-09-11,https://fonts.google.com/specimen/Edu+AU+VIC+WA+NT+Pre
+Edu NSW ACT Cursive,Handwriting,,Handwriting,personal casual friendly warm handwritten script organic  script cursive hand-drawn artistic informal variable variable-font responsive variable-weight english western european extended-latin european,400 | 500 | 600 | 700,wght: -,latin | latin-ext,Tina Anderson | Corey Anderson,1264,148,No,2025-05-28,2025-09-04,https://fonts.google.com/specimen/Edu+NSW+ACT+Cursive
+Edu NSW ACT Foundation,Handwriting,,Handwriting,personal casual friendly warm handwritten script organic  script cursive hand-drawn artistic informal variable variable-font responsive variable-weight english western european,400 | 500 | 600 | 700,wght: -,latin,Tina Anderson | Corey Anderson,1664,976,No,2022-06-09,2025-09-11,https://fonts.google.com/specimen/Edu+NSW+ACT+Foundation
+Edu NSW ACT Hand Pre,Handwriting,,Handwriting,personal casual friendly warm handwritten script organic  script cursive hand-drawn artistic informal variable variable-font responsive variable-weight english western european extended-latin european,400 | 500 | 600 | 700,wght: -,latin | latin-ext,Tina Anderson | Corey Anderson,1831,2285,No,2025-05-28,2025-09-10,https://fonts.google.com/specimen/Edu+NSW+ACT+Hand+Pre
+Edu QLD Beginner,Handwriting,,Handwriting,personal casual friendly warm handwritten script organic  script cursive hand-drawn artistic informal variable variable-font responsive variable-weight english western european,400 | 500 | 600 | 700,wght: -,latin,Tina Anderson | Corey Anderson,1820,1705,No,2022-06-21,2025-09-16,https://fonts.google.com/specimen/Edu+QLD+Beginner
+Edu QLD Hand,Handwriting,,Handwriting,personal casual friendly warm handwritten script organic  script cursive hand-drawn artistic informal variable variable-font responsive variable-weight english western european extended-latin european vietnamese,400 | 500 | 600 | 700,wght: -,latin | latin-ext | vietnamese,Tina Anderson | Corey Anderson,1945,2002,No,2025-05-28,2025-09-11,https://fonts.google.com/specimen/Edu+QLD+Hand
+Edu SA Beginner,Handwriting,,Handwriting,personal casual friendly warm handwritten script organic  script cursive hand-drawn artistic informal variable variable-font responsive variable-weight english western european,400 | 500 | 600 | 700,wght: -,latin,Tina Anderson | Corey Anderson,733,355,No,2022-06-09,2025-09-16,https://fonts.google.com/specimen/Edu+SA+Beginner
+Edu SA Hand,Handwriting,,Handwriting,personal casual friendly warm handwritten script organic  script cursive hand-drawn artistic informal variable variable-font responsive variable-weight english western european extended-latin european,400 | 500 | 600 | 700,wght: -,latin | latin-ext,Tina Anderson | Corey Anderson,1830,2121,No,2025-05-28,2025-09-08,https://fonts.google.com/specimen/Edu+SA+Hand
+Edu TAS Beginner,Handwriting,,Handwriting,personal casual friendly warm handwritten script organic  script cursive hand-drawn artistic informal variable variable-font responsive variable-weight english western european,400 | 500 | 600 | 700,wght: -,latin,Tina Anderson | Corey Anderson,1158,281,No,2022-06-09,2025-09-16,https://fonts.google.com/specimen/Edu+TAS+Beginner
+Edu VIC WA NT Beginner,Handwriting,,Handwriting,personal casual friendly warm handwritten script organic  script cursive hand-drawn artistic informal variable variable-font responsive variable-weight english western european,400 | 500 | 600 | 700,wght: -,latin,Tina Anderson | Corey Anderson,1604,1572,No,2022-06-09,2025-09-11,https://fonts.google.com/specimen/Edu+VIC+WA+NT+Beginner
+Edu VIC WA NT Hand,Handwriting,,Handwriting,personal casual friendly warm handwritten script organic  script cursive hand-drawn artistic informal variable variable-font responsive variable-weight english western european extended-latin european,400 | 500 | 600 | 700,wght: -,latin | latin-ext,Tina Anderson | Corey Anderson,1962,2036,No,2025-05-28,2025-09-08,https://fonts.google.com/specimen/Edu+VIC+WA+NT+Hand
+Edu VIC WA NT Hand Pre,Handwriting,,Handwriting,personal casual friendly warm handwritten script organic  script cursive hand-drawn artistic informal variable variable-font responsive variable-weight english western european extended-latin european,400 | 500 | 600 | 700,wght: -,latin | latin-ext,Tina Anderson | Corey Anderson,1956,2086,No,2025-05-28,2025-09-11,https://fonts.google.com/specimen/Edu+VIC+WA+NT+Hand+Pre
+El Messiri,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque variable variable-font responsive variable-weight arabic RTL middle-east russian cyrillic slavic english western european extended-latin european,400 | 500 | 600 | 700,wght: -,arabic | cyrillic | latin | latin-ext,Mohamed Gaber | Jovanny Lemonad,323,1583,No,2016-05-31,2025-09-11,https://fonts.google.com/specimen/El+Messiri
+Electrolize,Sans Serif,Sans Serif,Display,clean modern minimal professional readable neutral geometric humanist grotesque headline hero decorative large-text attention english western european,400,,latin,Gaslight,701,2203,No,2011-12-07,2025-09-11,https://fonts.google.com/specimen/Electrolize
+Elms Sans,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque versatile multi-weight flexible italic variable variable-font responsive variable-weight english western european extended-latin european vietnamese,100 | 100i | 200 | 200i | 300 | 300i | 400 | 400i | 500 | 500i | 600 | 600i | 700 | 700i | 800 | 800i | 900 | 900i,wght: -,latin | latin-ext | vietnamese,Amarachi Nwauwa | Gida Type Studio,1721,2208,No,2025-11-03,2025-12-10,https://fonts.google.com/specimen/Elms+Sans
+Elsie,Display,Serif,Display,bold decorative headline attention-grabbing creative expressive transitional oldstyle didone headline hero decorative large-text attention english western european extended-latin european,400 | 900,,latin | latin-ext,Alejandro Inler,952,206,No,2012-12-13,2025-09-04,https://fonts.google.com/specimen/Elsie
+Elsie Swash Caps,Display,Serif,Display,bold decorative headline attention-grabbing creative expressive transitional oldstyle didone headline hero decorative large-text attention english western european extended-latin european,400 | 900,,latin | latin-ext,Alejandro Inler,1493,2242,No,2012-12-13,2025-09-16,https://fonts.google.com/specimen/Elsie+Swash+Caps
+Emblema One,Display,,Display,bold decorative headline attention-grabbing creative expressive  headline hero decorative large-text attention english western european extended-latin european,400,,latin | latin-ext,Riccardo De Franceschi,1543,703,No,2012-01-18,2025-09-10,https://fonts.google.com/specimen/Emblema+One
+Emilys Candy,Display,Serif,Display,bold decorative headline attention-grabbing creative expressive transitional oldstyle didone headline hero decorative large-text attention english western european extended-latin european,400,,latin | latin-ext,Neapolitan,1127,2043,No,2012-02-29,2025-09-10,https://fonts.google.com/specimen/Emilys+Candy
+Encode Sans,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque versatile multi-weight flexible variable variable-font responsive variable-weight variable-width english western european extended-latin european vietnamese well-known common,100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900,wdth: - | wght: -,latin | latin-ext | vietnamese,Impallari Type | Andres Torresi | Jacques Le Bailly,193,603,No,2017-02-08,2025-09-04,https://fonts.google.com/specimen/Encode+Sans
+Encode Sans Condensed,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque versatile multi-weight flexible english western european extended-latin european vietnamese,100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900,,latin | latin-ext | vietnamese,Impallari Type | Andres Torresi | Jacques Le Bailly,335,2211,No,2017-02-08,2025-09-11,https://fonts.google.com/specimen/Encode+Sans+Condensed
+Encode Sans Expanded,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque versatile multi-weight flexible english western european extended-latin european vietnamese,100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900,,latin | latin-ext | vietnamese,Impallari Type | Andres Torresi | Jacques Le Bailly,719,1434,No,2017-02-08,2025-09-16,https://fonts.google.com/specimen/Encode+Sans+Expanded
+Encode Sans SC,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque versatile multi-weight flexible variable variable-font responsive variable-weight variable-width english western european extended-latin european vietnamese,100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900,wdth: - | wght: -,latin | latin-ext | vietnamese,Impallari Type | Andres Torresi | Jacques Le Bailly,1501,1468,No,2020-06-24,2025-09-11,https://fonts.google.com/specimen/Encode+Sans+SC
+Encode Sans Semi Condensed,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque versatile multi-weight flexible english western european extended-latin european vietnamese,100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900,,latin | latin-ext | vietnamese,Impallari Type | Andres Torresi | Jacques Le Bailly,777,610,No,2017-02-08,2025-09-11,https://fonts.google.com/specimen/Encode+Sans+Semi+Condensed
+Encode Sans Semi Expanded,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque versatile multi-weight flexible english western european extended-latin european vietnamese,100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900,,latin | latin-ext | vietnamese,Impallari Type | Andres Torresi | Jacques Le Bailly,835,183,No,2017-02-08,2025-09-08,https://fonts.google.com/specimen/Encode+Sans+Semi+Expanded
+Engagement,Handwriting,,Handwriting | Display,personal casual friendly warm handwritten script organic  script cursive hand-drawn artistic informal headline hero decorative large-text attention english western european extended-latin european,400,,latin | latin-ext,Astigmatic,1354,1843,No,2011-12-07,2025-09-02,https://fonts.google.com/specimen/Engagement
+Englebert,Sans Serif,Sans Serif,Handwriting | Display,clean modern minimal professional readable neutral geometric humanist grotesque script cursive hand-drawn artistic informal headline hero decorative large-text attention english western european extended-latin european,400,,latin | latin-ext,Astigmatic,1221,2009,No,2012-11-02,2025-09-02,https://fonts.google.com/specimen/Englebert
+Enriqueta,Serif,Serif,Display,elegant traditional classic refined literary editorial transitional oldstyle didone headline hero decorative large-text attention english western european extended-latin european,400 | 500 | 600 | 700,,latin | latin-ext,FontFuror,643,1173,No,2011-12-13,2025-09-16,https://fonts.google.com/specimen/Enriqueta
+Ephesis,Handwriting,,Display | Handwriting,personal casual friendly warm handwritten script organic  headline hero decorative large-text attention script cursive hand-drawn artistic informal english western european extended-latin european vietnamese,400,,latin | latin-ext | vietnamese,Robert Leuschke,471,37,No,2021-08-06,2025-09-10,https://fonts.google.com/specimen/Ephesis
+Epilogue,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque versatile multi-weight flexible italic variable variable-font responsive variable-weight english western european extended-latin european vietnamese well-known common,100 | 100i | 200 | 200i | 300 | 300i | 400 | 400i | 500 | 500i | 600 | 600i | 700 | 700i | 800 | 800i | 900 | 900i,wght: -,latin | latin-ext | vietnamese,Tyler Finck | ETC,179,1396,No,2020-06-26,2025-09-04,https://fonts.google.com/specimen/Epilogue
+Epunda Sans,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque versatile multi-weight flexible italic variable variable-font responsive variable-weight english western european extended-latin european,300 | 300i | 400 | 400i | 500 | 500i | 600 | 600i | 700 | 700i | 800 | 800i | 900 | 900i,wght: -,latin | latin-ext,Typofactur,1576,1947,No,2025-08-25,2025-09-04,https://fonts.google.com/specimen/Epunda+Sans
+Epunda Slab,Serif,Serif,,elegant traditional classic refined literary editorial transitional oldstyle didone versatile multi-weight flexible italic variable variable-font responsive variable-weight english western european extended-latin european,300 | 300i | 400 | 400i | 500 | 500i | 600 | 600i | 700 | 700i | 800 | 800i | 900 | 900i,wght: -,latin | latin-ext,Typofactur,1818,1931,No,2025-08-25,2025-08-26,https://fonts.google.com/specimen/Epunda+Slab
+Erica One,Display,Sans Serif,Display,bold decorative headline attention-grabbing creative expressive geometric humanist grotesque headline hero decorative large-text attention english western european extended-latin european,400,,latin | latin-ext,Miguel Hernandez,1272,1751,No,2012-01-18,2025-09-16,https://fonts.google.com/specimen/Erica+One
+Esteban,Serif,Serif,,elegant traditional classic refined literary editorial transitional oldstyle didone english western european extended-latin european,400,,latin | latin-ext,Angélica Díaz,949,933,No,2012-01-11,2025-09-16,https://fonts.google.com/specimen/Esteban
+Estonia,Handwriting,,Display | Handwriting,personal casual friendly warm handwritten script organic  headline hero decorative large-text attention script cursive hand-drawn artistic informal english western european extended-latin european vietnamese,400,,latin | latin-ext | vietnamese,Robert Leuschke,1716,274,No,2021-08-26,2025-09-11,https://fonts.google.com/specimen/Estonia
+Euphoria Script,Handwriting,,Handwriting | Display,personal casual friendly warm handwritten script organic  script cursive hand-drawn artistic informal headline hero decorative large-text attention english western european extended-latin european,400,,latin | latin-ext,Sabrina Mariela Lopez,894,661,No,2012-02-08,2025-09-04,https://fonts.google.com/specimen/Euphoria+Script
+Ewert,Display,Serif,Display,bold decorative headline attention-grabbing creative expressive transitional oldstyle didone headline hero decorative large-text attention english western european extended-latin european,400,,latin | latin-ext,Johan Kallas | Mihkel Virkus,1520,2054,No,2012-02-08,2025-09-10,https://fonts.google.com/specimen/Ewert
+Exile,Display,,Display,bold decorative headline attention-grabbing creative expressive  headline hero decorative large-text attention english western european extended-latin european,400,,latin | latin-ext,Bartłomiej Rózga,1841,2006,No,2025-05-12,2025-05-13,https://fonts.google.com/specimen/Exile
+Exo,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque versatile multi-weight flexible italic variable variable-font responsive variable-weight english western european extended-latin european vietnamese well-known common,100 | 100i | 200 | 200i | 300 | 300i | 400 | 400i | 500 | 500i | 600 | 600i | 700 | 700i | 800 | 800i | 900 | 900i,wght: -,latin | latin-ext | vietnamese,Natanael Gama | Robin Mientjes,173,1703,No,2012-02-08,2025-09-10,https://fonts.google.com/specimen/Exo
+Exo 2,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque versatile multi-weight flexible italic variable variable-font responsive variable-weight russian cyrillic slavic cyrillic extended english western european extended-latin european vietnamese popular widely-used,100 | 100i | 200 | 200i | 300 | 300i | 400 | 400i | 500 | 500i | 600 | 600i | 700 | 700i | 800 | 800i | 900 | 900i,wght: -,cyrillic | cyrillic-ext | latin | latin-ext | vietnamese,Natanael Gama,114,1400,No,2013-12-04,2025-09-02,https://fonts.google.com/specimen/Exo+2
+Expletus Sans,Display,Sans Serif,Display,bold decorative headline attention-grabbing creative expressive geometric humanist grotesque headline hero decorative large-text attention italic variable variable-font responsive variable-weight english western european extended-latin european,400 | 400i | 500 | 500i | 600 | 600i | 700 | 700i,wght: -,latin | latin-ext,Designtown,917,1527,No,2011-05-04,2025-09-11,https://fonts.google.com/specimen/Expletus+Sans
+Explora,Handwriting,Serif,Display,personal casual friendly warm handwritten script organic transitional oldstyle didone headline hero decorative large-text attention english western european extended-latin european vietnamese,400,,cherokee | latin | latin-ext | vietnamese,Robert Leuschke,1677,2275,No,2021-08-10,2025-09-04,https://fonts.google.com/specimen/Explora
+Faculty Glyphic,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque english western european extended-latin european,400,,latin | latin-ext,Koto Studio,1321,1837,No,2024-11-05,2025-05-30,https://fonts.google.com/specimen/Faculty+Glyphic
+Fahkwang,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque versatile multi-weight flexible italic english western european extended-latin european thai southeast-asia vietnamese,200 | 200i | 300 | 300i | 400 | 400i | 500 | 500i | 600 | 600i | 700 | 700i,,latin | latin-ext | thai | vietnamese,Cadson Demak,592,756,No,2018-09-10,2025-09-16,https://fonts.google.com/specimen/Fahkwang
+Familjen Grotesk,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque italic variable variable-font responsive variable-weight english western european extended-latin european vietnamese,400 | 400i | 500 | 500i | 600 | 600i | 700 | 700i,wght: -,latin | latin-ext | vietnamese,Familjen STHLM AB,647,1936,No,2022-03-02,2025-09-11,https://fonts.google.com/specimen/Familjen+Grotesk
+Fanwood Text,Serif,Serif,,elegant traditional classic refined literary editorial transitional oldstyle didone italic english western european extended-latin european,400 | 400i,,latin | latin-ext,Barry Schwartz,867,2053,No,2011-08-31,2025-09-10,https://fonts.google.com/specimen/Fanwood+Text
+Farro,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque english western european extended-latin european,300 | 400 | 500 | 700,,latin | latin-ext,Grayscale,881,1790,No,2019-07-16,2025-09-16,https://fonts.google.com/specimen/Farro
+Farsan,Display,Sans Serif,Handwriting,bold decorative headline attention-grabbing creative expressive geometric humanist grotesque script cursive hand-drawn artistic informal gujarati indian english western european extended-latin european vietnamese,400,,gujarati | latin | latin-ext | vietnamese,Pooja Saxena,1380,1660,No,2016-06-20,2025-09-16,https://fonts.google.com/specimen/Farsan
+Fascinate,Display,,Display,bold decorative headline attention-grabbing creative expressive  headline hero decorative large-text attention english western european extended-latin european,400,,latin | latin-ext,Astigmatic,1121,974,No,2011-12-07,2025-09-16,https://fonts.google.com/specimen/Fascinate
+Fascinate Inline,Display,,Display,bold decorative headline attention-grabbing creative expressive  headline hero decorative large-text attention english western european extended-latin european,400,,latin | latin-ext,Astigmatic,1306,1662,No,2011-12-07,2025-09-10,https://fonts.google.com/specimen/Fascinate+Inline
+Faster One,Display,,Display,bold decorative headline attention-grabbing creative expressive  headline hero decorative large-text attention english western european extended-latin european,400,,latin | latin-ext,Eduardo Tunni,743,2249,No,2012-10-26,2025-09-16,https://fonts.google.com/specimen/Faster+One
+Fasthand,Display,,Handwriting | Display,bold decorative headline attention-grabbing creative expressive  script cursive hand-drawn artistic informal headline hero decorative large-text attention khmer cambodian english western european,400,,khmer | latin,Danh Hong | Neapolitan,1243,790,No,2012-05-24,2025-09-08,https://fonts.google.com/specimen/Fasthand
+Fauna One,Serif,Serif,,elegant traditional classic refined literary editorial transitional oldstyle didone english western european extended-latin european,400,,latin | latin-ext,Eduardo Tunni,715,498,No,2013-06-05,2025-09-08,https://fonts.google.com/specimen/Fauna+One
+Faustina,Serif,Serif,,elegant traditional classic refined literary editorial transitional oldstyle didone versatile multi-weight flexible italic variable variable-font responsive variable-weight english western european extended-latin european vietnamese,300 | 300i | 400 | 400i | 500 | 500i | 600 | 600i | 700 | 700i | 800 | 800i,wght: -,latin | latin-ext | vietnamese,Omnibus-Type,406,656,No,2017-07-31,2025-09-04,https://fonts.google.com/specimen/Faustina
+Federant,Display,Serif,Display,bold decorative headline attention-grabbing creative expressive transitional oldstyle didone headline hero decorative large-text attention english western european,400,,latin,Cyreal,1330,2162,No,2011-10-05,2025-09-11,https://fonts.google.com/specimen/Federant
+Federo,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque english western european,400,,latin,Cyreal,984,1478,No,2011-07-27,2025-09-11,https://fonts.google.com/specimen/Federo
+Felipa,Handwriting,Serif,Display,personal casual friendly warm handwritten script organic transitional oldstyle didone headline hero decorative large-text attention english western european extended-latin european,400,,latin | latin-ext,Fontstage,1505,351,No,2012-02-08,2025-09-11,https://fonts.google.com/specimen/Felipa
+Fenix,Serif,Serif,,elegant traditional classic refined literary editorial transitional oldstyle didone english western european extended-latin european,400,,latin | latin-ext,Fernando Díaz,1283,2280,No,2012-09-24,2025-09-16,https://fonts.google.com/specimen/Fenix
+Festive,Handwriting,,Handwriting | Display,personal casual friendly warm handwritten script organic  script cursive hand-drawn artistic informal headline hero decorative large-text attention english western european extended-latin european vietnamese,400,,latin | latin-ext | vietnamese,Robert Leuschke,1398,1195,No,2021-04-23,2025-09-08,https://fonts.google.com/specimen/Festive
+Figtree,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque versatile multi-weight flexible italic variable variable-font responsive variable-weight english western european extended-latin european top-popular trending most-used,300 | 300i | 400 | 400i | 500 | 500i | 600 | 600i | 700 | 700i | 800 | 800i | 900 | 900i,wght: -,latin | latin-ext,Erik Kennedy,45,1290,No,2022-07-21,2025-09-11,https://fonts.google.com/specimen/Figtree
+Finger Paint,Display,Sans Serif,Display,bold decorative headline attention-grabbing creative expressive geometric humanist grotesque headline hero decorative large-text attention english western european,400,,latin,Carrois Apostrophe,995,1738,No,2012-09-30,2025-09-10,https://fonts.google.com/specimen/Finger+Paint
+Finlandica,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque italic variable variable-font responsive variable-weight russian cyrillic slavic cyrillic extended english western european extended-latin european,400 | 400i | 500 | 500i | 600 | 600i | 700 | 700i,wght: -,cyrillic | cyrillic-ext | latin | latin-ext,Helsinki Type Studio | Niklas Ekholm | Juho Hiilivirta | Jaakko Suomalainen,1290,227,No,2022-05-13,2025-09-08,https://fonts.google.com/specimen/Finlandica
+Fira Code,Monospace,,Monospace,code developer technical fixed-width terminal programming  mono fixed-width tabular data code variable variable-font responsive variable-weight russian cyrillic slavic cyrillic extended greek greek extended english western european extended-latin european multilingual international well-known common,300 | 400 | 500 | 600 | 700,wght: -,cyrillic | cyrillic-ext | greek | greek-ext | latin | latin-ext | symbols2,The Mozilla Foundation | Telefonica S.A. | Nikita Prokopov,297,1509,No,2019-03-24,2025-09-16,https://fonts.google.com/specimen/Fira+Code
+Fira Mono,Monospace,,Monospace,code developer technical fixed-width terminal programming  mono fixed-width tabular data code russian cyrillic slavic cyrillic extended greek greek extended english western european extended-latin european multilingual international,400 | 500 | 700,,cyrillic | cyrillic-ext | greek | greek-ext | latin | latin-ext | symbols2,Carrois Apostrophe,446,1773,No,2014-06-18,2025-09-16,https://fonts.google.com/specimen/Fira+Mono
+Fira Sans,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque versatile multi-weight flexible italic russian cyrillic slavic cyrillic extended greek greek extended english western european extended-latin european vietnamese multilingual international top-popular trending most-used,100 | 100i | 200 | 200i | 300 | 300i | 400 | 400i | 500 | 500i | 600 | 600i | 700 | 700i | 800 | 800i | 900 | 900i,,cyrillic | cyrillic-ext | greek | greek-ext | latin | latin-ext | vietnamese,Carrois Apostrophe,47,1550,No,2014-06-18,2025-09-11,https://fonts.google.com/specimen/Fira+Sans
+Fira Sans Condensed,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque versatile multi-weight flexible italic russian cyrillic slavic cyrillic extended greek greek extended english western european extended-latin european vietnamese multilingual international well-known common,100 | 100i | 200 | 200i | 300 | 300i | 400 | 400i | 500 | 500i | 600 | 600i | 700 | 700i | 800 | 800i | 900 | 900i,,cyrillic | cyrillic-ext | greek | greek-ext | latin | latin-ext | vietnamese,Carrois Apostrophe,169,1807,No,2016-12-07,2025-09-11,https://fonts.google.com/specimen/Fira+Sans+Condensed
+Fira Sans Extra Condensed,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque versatile multi-weight flexible italic russian cyrillic slavic cyrillic extended greek greek extended english western european extended-latin european vietnamese multilingual international,100 | 100i | 200 | 200i | 300 | 300i | 400 | 400i | 500 | 500i | 600 | 600i | 700 | 700i | 800 | 800i | 900 | 900i,,cyrillic | cyrillic-ext | greek | greek-ext | latin | latin-ext | vietnamese,Carrois Apostrophe,488,2013,No,2016-12-07,2025-09-16,https://fonts.google.com/specimen/Fira+Sans+Extra+Condensed
+Fjalla One,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque cyrillic extended english western european extended-latin european vietnamese popular widely-used,400,,cyrillic-ext | latin | latin-ext | vietnamese,Sorkin Type | Irina Smirnova,68,2227,No,2012-10-27,2025-09-16,https://fonts.google.com/specimen/Fjalla+One
+Fjord One,Serif,Serif,,elegant traditional classic refined literary editorial transitional oldstyle didone english western european,400,,latin,Viktoriya Grabowska,763,1961,No,2011-11-02,2025-09-11,https://fonts.google.com/specimen/Fjord+One
+Flamenco,Display,,Display,bold decorative headline attention-grabbing creative expressive  headline hero decorative large-text attention english western european,300 | 400,,latin,LatinoType,1308,1451,No,2011-12-19,2025-09-11,https://fonts.google.com/specimen/Flamenco
+Flavors,Display,,Display | Handwriting,bold decorative headline attention-grabbing creative expressive  headline hero decorative large-text attention script cursive hand-drawn artistic informal english western european extended-latin european,400,,latin | latin-ext,Sideshow,1610,1401,No,2011-12-19,2025-09-16,https://fonts.google.com/specimen/Flavors
+Fleur De Leah,Handwriting,,Handwriting | Display,personal casual friendly warm handwritten script organic  script cursive hand-drawn artistic informal headline hero decorative large-text attention english western european extended-latin european vietnamese,400,,latin | latin-ext | vietnamese,Robert Leuschke,1516,1377,No,2021-09-02,2025-09-08,https://fonts.google.com/specimen/Fleur+De+Leah
+Flow Block,Display,,Symbols | Display,bold decorative headline attention-grabbing creative expressive  icon symbol emoji pictograph headline hero decorative large-text attention russian cyrillic slavic cyrillic extended english western european extended-latin european vietnamese,400,,cyrillic | cyrillic-ext | latin | latin-ext | vietnamese,Dan Ross,1591,211,No,2021-10-21,2025-09-17,https://fonts.google.com/specimen/Flow+Block
+Flow Circular,Display,,Symbols | Display,bold decorative headline attention-grabbing creative expressive  icon symbol emoji pictograph headline hero decorative large-text attention russian cyrillic slavic cyrillic extended english western european extended-latin european vietnamese,400,,cyrillic | cyrillic-ext | latin | latin-ext | vietnamese,Dan Ross,720,1482,No,2021-10-21,2025-09-17,https://fonts.google.com/specimen/Flow+Circular
+Flow Rounded,Display,,Symbols | Display,bold decorative headline attention-grabbing creative expressive  icon symbol emoji pictograph headline hero decorative large-text attention russian cyrillic slavic cyrillic extended english western european extended-latin european vietnamese,400,,cyrillic | cyrillic-ext | latin | latin-ext | vietnamese,Dan Ross,1550,1812,No,2021-10-21,2025-09-17,https://fonts.google.com/specimen/Flow+Rounded
+Foldit,Display,Sans Serif,Display,bold decorative headline attention-grabbing creative expressive geometric humanist grotesque headline hero decorative large-text attention versatile multi-weight flexible variable variable-font responsive variable-weight english western european extended-latin european vietnamese,100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900,wght: -,latin | latin-ext | vietnamese,Sophia Tai,1609,2175,No,2022-10-02,2025-09-11,https://fonts.google.com/specimen/Foldit
+Fondamento,Handwriting,,Handwriting | Display,personal casual friendly warm handwritten script organic  script cursive hand-drawn artistic informal headline hero decorative large-text attention italic english western european extended-latin european,400 | 400i,,latin | latin-ext,Astigmatic,712,2069,No,2011-11-16,2025-09-04,https://fonts.google.com/specimen/Fondamento
+Fontdiner Swanky,Display,Serif,Display,bold decorative headline attention-grabbing creative expressive transitional oldstyle didone headline hero decorative large-text attention english western european,400,,latin,Font Diner,936,496,No,2011-01-06,2025-06-02,https://fonts.google.com/specimen/Fontdiner+Swanky
+Forum,Display,Serif,Display,bold decorative headline attention-grabbing creative expressive transitional oldstyle didone headline hero decorative large-text attention russian cyrillic slavic cyrillic extended english western european extended-latin european,400,,cyrillic | cyrillic-ext | latin | latin-ext,Denis Masharov,363,1386,No,2011-07-06,2025-09-04,https://fonts.google.com/specimen/Forum
+Fragment Mono,Monospace,Sans Serif,Monospace,code developer technical fixed-width terminal programming geometric humanist grotesque mono fixed-width tabular data code italic cyrillic extended english western european extended-latin european,400 | 400i,,cyrillic-ext | latin | latin-ext,Wei Huang | URW Design Studio,597,204,No,2022-10-23,2025-09-08,https://fonts.google.com/specimen/Fragment+Mono
+Francois One,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque english western european extended-latin european vietnamese well-known common,400,,latin | latin-ext | vietnamese,Vernon Adams,292,886,No,2011-05-04,2025-09-16,https://fonts.google.com/specimen/Francois+One
+Frank Ruhl Libre,Serif,Serif,,elegant traditional classic refined literary editorial transitional oldstyle didone versatile multi-weight flexible variable variable-font responsive variable-weight hebrew RTL israeli english western european extended-latin european well-known common,300 | 400 | 500 | 600 | 700 | 800 | 900,wght: -,hebrew | latin | latin-ext,Yanek Iontef,201,1000,No,2016-06-20,2025-09-10,https://fonts.google.com/specimen/Frank+Ruhl+Libre
+Fraunces,Serif,Serif,,elegant traditional classic refined literary editorial transitional oldstyle didone versatile multi-weight flexible italic variable variable-font responsive variable-weight english western european extended-latin european vietnamese well-known common,100 | 100i | 200 | 200i | 300 | 300i | 400 | 400i | 500 | 500i | 600 | 600i | 700 | 700i | 800 | 800i | 900 | 900i,SOFT: - | WONK: - | opsz: - | wght: -,latin | latin-ext | vietnamese,Undercase Type | Phaedra Charles | Flavia Zimbardi,215,430,No,2020-07-23,2025-09-10,https://fonts.google.com/specimen/Fraunces
+Freckle Face,Display,,Display,bold decorative headline attention-grabbing creative expressive  headline hero decorative large-text attention english western european extended-latin european,400,,latin | latin-ext,Astigmatic,1186,1973,No,2012-11-26,2025-09-16,https://fonts.google.com/specimen/Freckle+Face
+Fredericka the Great,Display,Serif,Display,bold decorative headline attention-grabbing creative expressive transitional oldstyle didone headline hero decorative large-text attention english western european extended-latin european,400,,latin | latin-ext,Tart Workshop,578,2000,No,2011-12-19,2025-09-16,https://fonts.google.com/specimen/Fredericka+the+Great
+Fredoka,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque variable variable-font responsive variable-weight variable-width hebrew RTL israeli english western european extended-latin european popular widely-used,300 | 400 | 500 | 600 | 700,wdth: - | wght: -,hebrew | latin | latin-ext,Milena Brandão | Hafontia,150,360,No,2021-12-15,2025-09-11,https://fonts.google.com/specimen/Fredoka
+Freehand,Display,,Handwriting | Display,bold decorative headline attention-grabbing creative expressive  script cursive hand-drawn artistic informal headline hero decorative large-text attention khmer cambodian english western european,400,,khmer | latin,Danh Hong,1092,2015,No,2011-03-02,2025-09-08,https://fonts.google.com/specimen/Freehand
+Freeman,Display,Sans Serif,Display,bold decorative headline attention-grabbing creative expressive geometric humanist grotesque headline hero decorative large-text attention english western european extended-latin european vietnamese,400,,latin | latin-ext | vietnamese,Rodrigo Fuenzalida | Aoife Mooney | Vernon Adams,841,130,No,2024-05-01,2025-05-30,https://fonts.google.com/specimen/Freeman
+Fresca,Sans Serif,Sans Serif,Display,clean modern minimal professional readable neutral geometric humanist grotesque headline hero decorative large-text attention english western european extended-latin european,400,,latin | latin-ext,Fontstage,968,2182,No,2011-12-07,2025-09-08,https://fonts.google.com/specimen/Fresca
+Frijole,Display,,Display,bold decorative headline attention-grabbing creative expressive  headline hero decorative large-text attention english western european,400,,latin,Sideshow,1115,1404,No,2011-12-19,2025-09-11,https://fonts.google.com/specimen/Frijole
+Fruktur,Display,,Display,bold decorative headline attention-grabbing creative expressive  headline hero decorative large-text attention italic cyrillic extended english western european extended-latin european vietnamese,400 | 400i,,cyrillic-ext | latin | latin-ext | vietnamese,Viktoriya Grabowska | Eben Sorkin,1460,553,No,2013-01-16,2025-09-04,https://fonts.google.com/specimen/Fruktur
+Fugaz One,Display,Sans Serif,Display,bold decorative headline attention-grabbing creative expressive geometric humanist grotesque headline hero decorative large-text attention english western european well-known common,400,,latin,LatinoType,282,419,No,2011-12-19,2025-09-16,https://fonts.google.com/specimen/Fugaz+One
+Fuggles,Handwriting,,Display | Handwriting,personal casual friendly warm handwritten script organic  headline hero decorative large-text attention script cursive hand-drawn artistic informal english western european extended-latin european vietnamese,400,,latin | latin-ext | vietnamese,Robert Leuschke,1174,1282,No,2021-04-29,2025-09-16,https://fonts.google.com/specimen/Fuggles
+Funnel Display,Display,Sans Serif,Display,bold decorative headline attention-grabbing creative expressive geometric humanist grotesque headline hero decorative large-text attention versatile multi-weight flexible variable variable-font responsive variable-weight english western european extended-latin european,300 | 400 | 500 | 600 | 700 | 800,wght: -,latin | latin-ext,NORD ID | Kristian Möller,707,572,No,2024-11-05,2025-09-10,https://fonts.google.com/specimen/Funnel+Display
+Funnel Sans,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque versatile multi-weight flexible italic variable variable-font responsive variable-weight english western european extended-latin european,300 | 300i | 400 | 400i | 500 | 500i | 600 | 600i | 700 | 700i | 800 | 800i,wght: -,latin | latin-ext,NORD ID | Kristian Möller,501,192,No,2024-11-05,2025-09-08,https://fonts.google.com/specimen/Funnel+Sans
+Fustat,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque versatile multi-weight flexible variable variable-font responsive variable-weight arabic RTL middle-east english western european extended-latin european,200 | 300 | 400 | 500 | 600 | 700 | 800,wght: -,arabic | latin | latin-ext,Mohamed Gaber | Laura Garcia Mut | Khaled Hosny,616,178,No,2024-06-04,2025-09-16,https://fonts.google.com/specimen/Fustat
+Fuzzy Bubbles,Handwriting,Sans Serif,Display,personal casual friendly warm handwritten script organic geometric humanist grotesque headline hero decorative large-text attention english western european extended-latin european vietnamese,400 | 700,,latin | latin-ext | vietnamese,Robert Leuschke,831,648,No,2021-11-02,2025-09-16,https://fonts.google.com/specimen/Fuzzy+Bubbles
+GFS Didot,Serif,Serif,,elegant traditional classic refined literary editorial transitional oldstyle didone greek greek extended english western european vietnamese,400,,greek | greek-ext | latin | vietnamese,Greek Font Society,467,913,No,2010-09-21,2025-09-10,https://fonts.google.com/specimen/GFS+Didot
+GFS Neohellenic,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque italic greek greek extended english western european vietnamese,400 | 400i | 700 | 700i,,greek | greek-ext | latin | vietnamese,Greek Font Society,1571,1260,No,2010-09-21,2025-09-16,https://fonts.google.com/specimen/GFS+Neohellenic
+Ga Maamli,Display,Sans Serif,Display,bold decorative headline attention-grabbing creative expressive geometric humanist grotesque headline hero decorative large-text attention english western european extended-latin european vietnamese,400,,latin | latin-ext | vietnamese,Afotey Clement Nii Odai | Ama Diaka | David Abbey-Thompson,1425,156,No,2024-06-25,2025-05-30,https://fonts.google.com/specimen/Ga+Maamli
+Gabarito,Display,Sans Serif,Display,bold decorative headline attention-grabbing creative expressive geometric humanist grotesque headline hero decorative large-text attention versatile multi-weight flexible variable variable-font responsive variable-weight english western european extended-latin european,400 | 500 | 600 | 700 | 800 | 900,wght: -,latin | latin-ext,Naipe Foundry | Leandro Assis | Álvaro Franca | Felipe Casaprima,425,378,No,2023-09-12,2025-09-04,https://fonts.google.com/specimen/Gabarito
+Gabriela,Serif,Serif,Display,elegant traditional classic refined literary editorial transitional oldstyle didone headline hero decorative large-text attention russian cyrillic slavic cyrillic extended english western european extended-latin european,400,,cyrillic | cyrillic-ext | latin | latin-ext,Eduardo Tunni,798,1581,No,2013-03-06,2025-09-11,https://fonts.google.com/specimen/Gabriela
+Gaegu,Handwriting,Sans Serif,Display,personal casual friendly warm handwritten script organic geometric humanist grotesque headline hero decorative large-text attention korean hangul english western european,300 | 400 | 700,,korean | latin,JIKJI SOFT,976,1630,No,2018-02-28,2025-09-10,https://fonts.google.com/specimen/Gaegu
+Gafata,Sans Serif,Sans Serif,Display,clean modern minimal professional readable neutral geometric humanist grotesque headline hero decorative large-text attention english western european extended-latin european,400,,latin | latin-ext,Lautaro Hourcade,1143,631,No,2012-10-31,2025-09-11,https://fonts.google.com/specimen/Gafata
+Gajraj One,Display,Sans Serif,Display,bold decorative headline attention-grabbing creative expressive geometric humanist grotesque headline hero decorative large-text attention hindi devanagari indian english western european extended-latin european,400,,devanagari | latin | latin-ext,Saurabh Sharma,1779,1770,No,2023-01-22,2025-09-04,https://fonts.google.com/specimen/Gajraj+One
+Galada,Display,,Display | Handwriting,bold decorative headline attention-grabbing creative expressive  headline hero decorative large-text attention script cursive hand-drawn artistic informal bengali bangladeshi indian english western european,400,,bengali | latin,Black Foundry,1109,1999,No,2016-06-20,2025-09-11,https://fonts.google.com/specimen/Galada
+Galdeano,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque english western european,400,,latin,Dario Manuel Muhafara,1531,1199,No,2011-12-07,2025-09-16,https://fonts.google.com/specimen/Galdeano
+Galindo,Display,Sans Serif,Display,bold decorative headline attention-grabbing creative expressive geometric humanist grotesque headline hero decorative large-text attention english western european extended-latin european,400,,latin | latin-ext,Astigmatic,1446,2035,No,2012-08-13,2025-09-04,https://fonts.google.com/specimen/Galindo
+Gamja Flower,Handwriting,Sans Serif,Display,personal casual friendly warm handwritten script organic geometric humanist grotesque headline hero decorative large-text attention korean hangul english western european,400,,korean | latin,YoonDesign Inc,973,91,No,2018-02-23,2025-09-08,https://fonts.google.com/specimen/Gamja+Flower
+Gantari,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque versatile multi-weight flexible italic variable variable-font responsive variable-weight english western european extended-latin european,100 | 100i | 200 | 200i | 300 | 300i | 400 | 400i | 500 | 500i | 600 | 600i | 700 | 700i | 800 | 800i | 900 | 900i,wght: -,latin | latin-ext,Lafontype,613,2112,No,2022-05-25,2025-09-11,https://fonts.google.com/specimen/Gantari
+Gasoek One,Sans Serif,Sans Serif,Display,clean modern minimal professional readable neutral geometric humanist grotesque headline hero decorative large-text attention korean hangul english western european extended-latin european,400,,korean | latin | latin-ext,Jiashuo Zhang | JAMO,1480,307,No,2023-05-17,2026-03-03,https://fonts.google.com/specimen/Gasoek+One
+Gayathri,Sans Serif,Sans Serif,Display,clean modern minimal professional readable neutral geometric humanist grotesque headline hero decorative large-text attention english western european malayalam indian,100 | 400 | 700,,latin | malayalam,SMC | Binoy Dominic,1098,249,No,2019-06-10,2025-09-04,https://fonts.google.com/specimen/Gayathri
+Geist,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque versatile multi-weight flexible variable variable-font responsive variable-weight russian cyrillic slavic english western european extended-latin european well-known common,100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900,wght: -,cyrillic | latin | latin-ext,Andrés Briganti | Mateo Zaragoza | Guillermo Rauch | Evil Rabbit | José Rago | Facundo Santana,192,542,No,2024-11-05,2025-09-11,https://fonts.google.com/specimen/Geist
+Geist Mono,Monospace,Sans Serif,Monospace,code developer technical fixed-width terminal programming geometric humanist grotesque mono fixed-width tabular data code versatile multi-weight flexible variable variable-font responsive variable-weight russian cyrillic slavic english western european extended-latin european well-known common,100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900,wght: -,cyrillic | latin | latin-ext,Andrés Briganti | Mateo Zaragoza | Guillermo Rauch | Evil Rabbit | José Rago | Facundo Santana,294,1461,No,2024-11-05,2025-09-16,https://fonts.google.com/specimen/Geist+Mono
+Gelasio,Serif,Serif,,elegant traditional classic refined literary editorial transitional oldstyle didone italic variable variable-font responsive variable-weight english western european extended-latin european vietnamese,400 | 400i | 500 | 500i | 600 | 600i | 700 | 700i,wght: -,latin | latin-ext | vietnamese,Eben Sorkin,349,896,No,2019-12-03,2025-09-04,https://fonts.google.com/specimen/Gelasio
+Gemunu Libre,Sans Serif,Sans Serif,Display,clean modern minimal professional readable neutral geometric humanist grotesque headline hero decorative large-text attention versatile multi-weight flexible variable variable-font responsive variable-weight english western european extended-latin european sinhala sri-lankan,200 | 300 | 400 | 500 | 600 | 700 | 800,wght: -,latin | latin-ext | sinhala,Mooniak,1096,755,No,2017-05-29,2025-09-10,https://fonts.google.com/specimen/Gemunu+Libre
+Genos,Sans Serif,Sans Serif,Display,clean modern minimal professional readable neutral geometric humanist grotesque headline hero decorative large-text attention versatile multi-weight flexible italic variable variable-font responsive variable-weight english western european extended-latin european vietnamese,100 | 100i | 200 | 200i | 300 | 300i | 400 | 400i | 500 | 500i | 600 | 600i | 700 | 700i | 800 | 800i | 900 | 900i,wght: -,cherokee | latin | latin-ext | vietnamese,Robert Leuschke,1107,272,No,2021-10-07,2025-09-16,https://fonts.google.com/specimen/Genos
+Gentium Book Plus,Serif,Serif,,elegant traditional classic refined literary editorial transitional oldstyle didone italic russian cyrillic slavic cyrillic extended greek greek extended english western european extended-latin european vietnamese multilingual international,400 | 400i | 700 | 700i,,cyrillic | cyrillic-ext | greek | greek-ext | latin | latin-ext | vietnamese,SIL International,1259,2064,No,2022-05-18,2025-05-30,https://fonts.google.com/specimen/Gentium+Book+Plus
+Gentium Plus,Serif,Serif,,elegant traditional classic refined literary editorial transitional oldstyle didone italic russian cyrillic slavic cyrillic extended greek greek extended english western european extended-latin european vietnamese multilingual international,400 | 400i | 700 | 700i,,cyrillic | cyrillic-ext | greek | greek-ext | latin | latin-ext | vietnamese,SIL International,868,667,No,2022-05-13,2025-05-30,https://fonts.google.com/specimen/Gentium+Plus
+Geo,Sans Serif,Sans Serif,Display,clean modern minimal professional readable neutral geometric humanist grotesque headline hero decorative large-text attention italic english western european,400 | 400i,,latin,Ben Weiner,656,1121,No,2010-11-30,2025-09-16,https://fonts.google.com/specimen/Geo
+Geologica,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque versatile multi-weight flexible variable variable-font responsive variable-weight variable-slant russian cyrillic slavic cyrillic extended greek english western european extended-latin european vietnamese multilingual international well-known common,100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900,CRSV: - | SHRP: - | slnt: - | wght: -,cyrillic | cyrillic-ext | greek | latin | latin-ext | vietnamese,Monokrom | Sindre Bremnes | Frode Helland,187,959,No,2023-05-29,2025-09-10,https://fonts.google.com/specimen/Geologica
+Geom,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque versatile multi-weight flexible italic variable variable-font responsive variable-weight greek english western european extended-latin european,300 | 300i | 400 | 400i | 500 | 500i | 600 | 600i | 700 | 700i | 800 | 800i | 900 | 900i,wght: -,greek | latin | latin-ext,Thanos Poulakidas,1258,26,No,2025-12-08,2025-12-10,https://fonts.google.com/specimen/Geom
+Georama,Sans Serif,Sans Serif,Display,clean modern minimal professional readable neutral geometric humanist grotesque headline hero decorative large-text attention versatile multi-weight flexible italic variable variable-font responsive variable-weight variable-width english western european extended-latin european vietnamese,100 | 100i | 200 | 200i | 300 | 300i | 400 | 400i | 500 | 500i | 600 | 600i | 700 | 700i | 800 | 800i | 900 | 900i,wdth: - | wght: -,latin | latin-ext | vietnamese,Production Type,499,903,No,2020-07-01,2025-09-10,https://fonts.google.com/specimen/Georama
+Geostar,Display,Serif,Display,bold decorative headline attention-grabbing creative expressive transitional oldstyle didone headline hero decorative large-text attention english western european,400,,latin,Joe Prince,1693,657,No,2011-08-10,2025-06-02,https://fonts.google.com/specimen/Geostar
+Geostar Fill,Display,Serif,Display,bold decorative headline attention-grabbing creative expressive transitional oldstyle didone headline hero decorative large-text attention english western european,400,,latin,Joe Prince,1494,1450,No,2011-08-10,2025-06-02,https://fonts.google.com/specimen/Geostar+Fill
+Germania One,Display,,Display,bold decorative headline attention-grabbing creative expressive  headline hero decorative large-text attention english western european,400,,latin,John Vargas Beltrán,734,1668,No,2012-01-18,2025-09-04,https://fonts.google.com/specimen/Germania+One
+Gideon Roman,Display,Serif,Display,bold decorative headline attention-grabbing creative expressive transitional oldstyle didone headline hero decorative large-text attention english western european extended-latin european vietnamese,400,,latin | latin-ext | vietnamese,Robert Leuschke,1382,196,No,2021-08-26,2025-09-04,https://fonts.google.com/specimen/Gideon+Roman
+Gidole,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque russian cyrillic slavic greek english western european extended-latin european vietnamese,400,,cyrillic | greek | latin | latin-ext | vietnamese,Andreas Larsen,1619,1459,No,2025-03-13,2025-05-30,https://fonts.google.com/specimen/Gidole
+Gidugu,Sans Serif,Sans Serif,Display,clean modern minimal professional readable neutral geometric humanist grotesque headline hero decorative large-text attention english western european extended-latin european telugu indian,400,,latin | latin-ext | telugu,Purushoth Kumar Guttula,1630,1775,No,2014-12-10,2025-09-08,https://fonts.google.com/specimen/Gidugu
+Gilda Display,Serif,Serif,Display,elegant traditional classic refined literary editorial transitional oldstyle didone headline hero decorative large-text attention english western european extended-latin european,400,,latin | latin-ext,Eduardo Tunni,348,1693,No,2012-10-31,2025-09-10,https://fonts.google.com/specimen/Gilda+Display
+Girassol,Display,Serif,Display,bold decorative headline attention-grabbing creative expressive transitional oldstyle didone headline hero decorative large-text attention english western european extended-latin european,400,,latin | latin-ext,Liam Spradlin,1361,2139,No,2019-12-05,2025-09-04,https://fonts.google.com/specimen/Girassol
+Give You Glory,Handwriting,,Handwriting,personal casual friendly warm handwritten script organic  script cursive hand-drawn artistic informal english western european extended-latin european,400,,latin | latin-ext,Kimberly Geswein,915,1243,No,2011-07-13,2025-09-04,https://fonts.google.com/specimen/Give+You+Glory
+Glass Antiqua,Display,Serif,Handwriting,bold decorative headline attention-grabbing creative expressive transitional oldstyle didone script cursive hand-drawn artistic informal english western european extended-latin european,400,,latin | latin-ext,Denis Masharov,1440,2122,No,2012-02-22,2025-09-16,https://fonts.google.com/specimen/Glass+Antiqua
+Glegoo,Serif,Slab Serif,,elegant traditional classic refined literary editorial slab mechanical sturdy strong hindi devanagari indian english western european extended-latin european,400 | 700,,devanagari | latin | latin-ext,Eduardo Tunni,576,1489,No,2012-01-25,2025-06-02,https://fonts.google.com/specimen/Glegoo
+Gloock,Serif,Serif,Display,elegant traditional classic refined literary editorial transitional oldstyle didone headline hero decorative large-text attention cyrillic extended english western european extended-latin european,400,,cyrillic-ext | latin | latin-ext,Duarte Pinto,486,1586,No,2023-01-05,2025-09-08,https://fonts.google.com/specimen/Gloock
+Gloria Hallelujah,Handwriting,,Handwriting | Display,personal casual friendly warm handwritten script organic  script cursive hand-drawn artistic informal headline hero decorative large-text attention english western european extended-latin european,400,,latin | latin-ext,Kimberly Geswein,317,1454,No,2011-07-27,2025-09-08,https://fonts.google.com/specimen/Gloria+Hallelujah
+Glory,Sans Serif,Sans Serif,Display,clean modern minimal professional readable neutral geometric humanist grotesque headline hero decorative large-text attention versatile multi-weight flexible italic variable variable-font responsive variable-weight english western european extended-latin european vietnamese,100 | 100i | 200 | 200i | 300 | 300i | 400 | 400i | 500 | 500i | 600 | 600i | 700 | 700i | 800 | 800i,wght: -,latin | latin-ext | vietnamese,Robert Leuschke,667,1825,No,2021-06-17,2025-09-10,https://fonts.google.com/specimen/Glory
+Gluten,Display,,Handwriting | Display,bold decorative headline attention-grabbing creative expressive  script cursive hand-drawn artistic informal headline hero decorative large-text attention versatile multi-weight flexible variable variable-font responsive variable-weight variable-slant english western european extended-latin european vietnamese,100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900,slnt: - | wght: -,latin | latin-ext | vietnamese,Tyler Finck | ETC,827,218,No,2021-09-02,2025-09-04,https://fonts.google.com/specimen/Gluten
+Goblin One,Display,Serif,Display,bold decorative headline attention-grabbing creative expressive transitional oldstyle didone headline hero decorative large-text attention english western european,400,,latin,Riccardo De Franceschi,967,695,No,2011-06-29,2025-09-10,https://fonts.google.com/specimen/Goblin+One
+Gochi Hand,Handwriting,,Display | Handwriting,personal casual friendly warm handwritten script organic  headline hero decorative large-text attention script cursive hand-drawn artistic informal english western european,400,,latin,Huerta Tipográfica,478,1869,No,2011-10-05,2025-09-10,https://fonts.google.com/specimen/Gochi+Hand
+Goldman,Display,Sans Serif,Display,bold decorative headline attention-grabbing creative expressive geometric humanist grotesque headline hero decorative large-text attention english western european extended-latin european vietnamese,400 | 700,,latin | latin-ext | vietnamese,Jaikishan Patel,398,125,No,2020-07-21,2025-09-11,https://fonts.google.com/specimen/Goldman
+Golos Text,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque versatile multi-weight flexible variable variable-font responsive variable-weight russian cyrillic slavic cyrillic extended english western european extended-latin european,400 | 500 | 600 | 700 | 800 | 900,wght: -,cyrillic | cyrillic-ext | latin | latin-ext,Alexandra Korolkova | Vitaly Kuzmin,313,634,No,2023-01-05,2025-09-11,https://fonts.google.com/specimen/Golos+Text
+Google Sans,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque italic variable variable-font responsive variable-weight armenian bengali bangladeshi indian russian cyrillic slavic cyrillic extended hindi devanagari indian ethiopic amharic georgian greek greek extended gujarati indian punjabi gurmukhi indian hebrew RTL israeli khmer cambodian lao laotian english western european extended-latin european malayalam indian odia oriya indian sinhala sri-lankan tamil indian telugu indian thai southeast-asia vietnamese multilingual international top-popular trending most-used,400 | 400i | 500 | 500i | 600 | 600i | 700 | 700i,GRAD: - | opsz: - | wght: -,armenian | bengali | canadian-aboriginal | cyrillic | cyrillic-ext | devanagari | ethiopic | georgian | greek | greek-ext | gujarati | gurmukhi | hebrew | khmer | lao | latin | latin-ext | malayalam | oriya | sinhala | symbols | tamil | telugu | thai | vietnamese,Google,4,887,No,2025-12-09,2025-12-10,https://fonts.google.com/specimen/Google+Sans
+Google Sans Code,Monospace,,Monospace,code developer technical fixed-width terminal programming  mono fixed-width tabular data code versatile multi-weight flexible italic variable variable-font responsive variable-weight english western european extended-latin european vietnamese multilingual international popular widely-used,300 | 300i | 400 | 400i | 500 | 500i | 600 | 600i | 700 | 700i | 800 | 800i,wght: -,adlam | canadian-aboriginal | cherokee | latin | latin-ext | math | old-permic | symbols | symbols2 | syriac | vietnamese,Google | Universal Thirst,131,44,No,2025-02-26,2025-09-16,https://fonts.google.com/specimen/Google+Sans+Code
+Google Sans Flex,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque versatile multi-weight flexible variable variable-font responsive variable-weight variable-width variable-slant english western european extended-latin european vietnamese multilingual international popular widely-used,1 | 100 | 1000 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900,GRAD: - | ROND: - | opsz: - | slnt: - | wdth: - | wght: -,canadian-aboriginal | cherokee | latin | latin-ext | math | nushu | symbols | syriac | tifinagh | vietnamese,Google,119,47,No,2025-11-12,2025-12-11,https://fonts.google.com/specimen/Google+Sans+Flex
+Gorditas,Display,Serif,Display,bold decorative headline attention-grabbing creative expressive transitional oldstyle didone headline hero decorative large-text attention english western european,400 | 700,,latin,Gustavo Dipre,1356,176,No,2012-03-14,2025-09-11,https://fonts.google.com/specimen/Gorditas
+Gothic A1,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque versatile multi-weight flexible russian cyrillic slavic cyrillic extended greek greek extended korean hangul english western european extended-latin european vietnamese multilingual international well-known common,100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900,,cyrillic | cyrillic-ext | greek | greek-ext | korean | latin | latin-ext | vietnamese,HanYang I&C Co,266,742,No,2018-02-24,2025-09-11,https://fonts.google.com/specimen/Gothic+A1
+Gotu,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque hindi devanagari indian english western european extended-latin european vietnamese,400,,devanagari | latin | latin-ext | vietnamese,Ek Type,925,1523,No,2020-01-09,2025-09-11,https://fonts.google.com/specimen/Gotu
+Goudy Bookletter 1911,Serif,Serif,Display,elegant traditional classic refined literary editorial transitional oldstyle didone headline hero decorative large-text attention english western european,400,,latin,Barry Schwartz,691,1292,No,2011-02-09,2025-09-11,https://fonts.google.com/specimen/Goudy+Bookletter+1911
+Gowun Batang,Serif,Serif,,elegant traditional classic refined literary editorial transitional oldstyle didone korean hangul english western european extended-latin european vietnamese,400 | 700,,korean | latin | latin-ext | vietnamese,Yanghee Ryu,652,536,No,2021-06-10,2025-09-10,https://fonts.google.com/specimen/Gowun+Batang
+Gowun Dodum,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque korean hangul english western european extended-latin european vietnamese,400,,korean | latin | latin-ext | vietnamese,Yanghee Ryu,960,315,No,2021-06-10,2025-09-11,https://fonts.google.com/specimen/Gowun+Dodum
+Graduate,Serif,Slab Serif,Display,elegant traditional classic refined literary editorial slab mechanical sturdy strong headline hero decorative large-text attention english western european,400,,latin,Eduardo Tunni,689,1633,No,2012-03-14,2025-09-16,https://fonts.google.com/specimen/Graduate
+Grand Hotel,Handwriting,,Handwriting | Display,personal casual friendly warm handwritten script organic  script cursive hand-drawn artistic informal headline hero decorative large-text attention english western european extended-latin european,400,,latin | latin-ext,Astigmatic,622,1501,No,2012-11-30,2025-09-08,https://fonts.google.com/specimen/Grand+Hotel
+Grandiflora One,Serif,Serif,Display | Handwriting,elegant traditional classic refined literary editorial transitional oldstyle didone headline hero decorative large-text attention script cursive hand-drawn artistic informal korean hangul english western european extended-latin european,400,,korean | latin | latin-ext,Haesung Cho | JAMO,1796,2068,No,2023-05-17,2026-03-03,https://fonts.google.com/specimen/Grandiflora+One
+Grandstander,Display,,Display | Handwriting,bold decorative headline attention-grabbing creative expressive  headline hero decorative large-text attention script cursive hand-drawn artistic informal versatile multi-weight flexible italic variable variable-font responsive variable-weight english western european extended-latin european vietnamese,100 | 100i | 200 | 200i | 300 | 300i | 400 | 400i | 500 | 500i | 600 | 600i | 700 | 700i | 800 | 800i | 900 | 900i,wght: -,latin | latin-ext | vietnamese,Tyler Finck | ETC,564,1635,No,2020-07-23,2025-09-16,https://fonts.google.com/specimen/Grandstander
+Grape Nuts,Handwriting,,Handwriting | Display,personal casual friendly warm handwritten script organic  script cursive hand-drawn artistic informal headline hero decorative large-text attention english western european extended-latin european vietnamese,400,,latin | latin-ext | vietnamese,Robert Leuschke,911,571,No,2022-02-17,2025-09-08,https://fonts.google.com/specimen/Grape+Nuts
+Gravitas One,Display,Serif,Display,bold decorative headline attention-grabbing creative expressive transitional oldstyle didone headline hero decorative large-text attention english western european popular widely-used,400,,latin,Riccardo De Franceschi,78,2057,No,2011-06-29,2025-09-08,https://fonts.google.com/specimen/Gravitas+One
+Great Vibes,Handwriting,,Handwriting | Display,personal casual friendly warm handwritten script organic  script cursive hand-drawn artistic informal headline hero decorative large-text attention russian cyrillic slavic cyrillic extended greek extended english western european extended-latin european vietnamese multilingual international well-known common,400,,cyrillic | cyrillic-ext | greek-ext | latin | latin-ext | vietnamese,Robert Leuschke,178,1384,No,2012-03-29,2025-09-04,https://fonts.google.com/specimen/Great+Vibes
+Grechen Fuemen,Handwriting,,Display | Handwriting,personal casual friendly warm handwritten script organic  headline hero decorative large-text attention script cursive hand-drawn artistic informal english western european extended-latin european vietnamese,400,,latin | latin-ext | vietnamese,Robert Leuschke,1689,2289,No,2021-09-02,2025-09-10,https://fonts.google.com/specimen/Grechen+Fuemen
+Grenze,Serif,Serif,,elegant traditional classic refined literary editorial transitional oldstyle didone versatile multi-weight flexible italic english western european extended-latin european vietnamese,100 | 100i | 200 | 200i | 300 | 300i | 400 | 400i | 500 | 500i | 600 | 600i | 700 | 700i | 800 | 800i | 900 | 900i,,latin | latin-ext | vietnamese,Omnibus-Type,1169,397,No,2018-09-18,2025-09-08,https://fonts.google.com/specimen/Grenze
+Grenze Gotisch,Display,Serif,Display,bold decorative headline attention-grabbing creative expressive transitional oldstyle didone headline hero decorative large-text attention versatile multi-weight flexible variable variable-font responsive variable-weight english western european extended-latin european vietnamese,100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900,wght: -,latin | latin-ext | vietnamese,Omnibus-Type,811,1240,No,2020-05-17,2025-09-02,https://fonts.google.com/specimen/Grenze+Gotisch
+Grey Qo,Handwriting,,Display | Handwriting,personal casual friendly warm handwritten script organic  headline hero decorative large-text attention script cursive hand-drawn artistic informal english western european extended-latin european vietnamese,400,,latin | latin-ext | vietnamese,Robert Leuschke,1537,1868,No,2021-09-02,2025-09-16,https://fonts.google.com/specimen/Grey+Qo
+Griffy,Display,,Display,bold decorative headline attention-grabbing creative expressive  headline hero decorative large-text attention english western european extended-latin european,400,,latin | latin-ext,Neapolitan,1562,1958,No,2012-09-06,2025-09-11,https://fonts.google.com/specimen/Griffy
+Gruppo,Sans Serif,Sans Serif,Display,clean modern minimal professional readable neutral geometric humanist grotesque headline hero decorative large-text attention english western european extended-latin european well-known common,400,,latin | latin-ext,Vernon Adams,300,757,No,2010-12-20,2025-09-02,https://fonts.google.com/specimen/Gruppo
+Gudea,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque italic english western european extended-latin european,400 | 400i | 700,,latin | latin-ext,Agustina Mingote,452,1001,No,2012-01-18,2025-09-10,https://fonts.google.com/specimen/Gudea
+Gugi,Display,Sans Serif,Display,bold decorative headline attention-grabbing creative expressive geometric humanist grotesque headline hero decorative large-text attention korean hangul english western european,400,,korean | latin,TAE System & Typefaces Co.,1192,1484,No,2018-02-23,2025-09-16,https://fonts.google.com/specimen/Gugi
+Gulzar,Serif,Serif,Display,elegant traditional classic refined literary editorial transitional oldstyle didone headline hero decorative large-text attention arabic RTL middle-east english western european extended-latin european,400,,arabic | latin | latin-ext,Borna Izadpanah | Fiona Ross | Alice Savoie | Simon Cozens,1136,1833,No,2022-05-13,2025-09-04,https://fonts.google.com/specimen/Gulzar
+Gupter,Serif,Serif,,elegant traditional classic refined literary editorial transitional oldstyle didone english western european,400 | 500 | 700,,latin,Octavio Pardo,1217,1538,No,2019-11-13,2025-09-11,https://fonts.google.com/specimen/Gupter
+Gurajada,Sans Serif,Sans Serif,Display,clean modern minimal professional readable neutral geometric humanist grotesque headline hero decorative large-text attention english western european extended-latin european telugu indian,400,,latin | latin-ext | telugu,Purushoth Kumar Guttula,946,1613,No,2015-01-08,2025-06-25,https://fonts.google.com/specimen/Gurajada
+Gveret Levin,Handwriting,,Handwriting | Display,personal casual friendly warm handwritten script organic  script cursive hand-drawn artistic informal headline hero decorative large-text attention hebrew RTL israeli english western european,400,,hebrew | latin,AlefAlefAlef,1854,132,No,2026-02-12,2026-02-17,https://fonts.google.com/specimen/Gveret+Levin
+Gwendolyn,Handwriting,,Display | Handwriting,personal casual friendly warm handwritten script organic  headline hero decorative large-text attention script cursive hand-drawn artistic informal english western european extended-latin european vietnamese,400 | 700,,latin | latin-ext | vietnamese,Robert Leuschke,1301,213,No,2021-11-02,2025-09-10,https://fonts.google.com/specimen/Gwendolyn
+Habibi,Serif,Serif,,elegant traditional classic refined literary editorial transitional oldstyle didone english western european extended-latin european,400,,latin | latin-ext,Magnus Gaarde,1154,1590,No,2011-12-19,2025-09-08,https://fonts.google.com/specimen/Habibi
+Hachi Maru Pop,Handwriting,,Display | Handwriting,personal casual friendly warm handwritten script organic  headline hero decorative large-text attention script cursive hand-drawn artistic informal russian cyrillic slavic japanese kanji hiragana katakana english western european extended-latin european,400,,cyrillic | japanese | latin | latin-ext,Nonty,339,51,No,2020-12-14,2025-09-10,https://fonts.google.com/specimen/Hachi+Maru+Pop
+Hahmlet,Serif,Serif,,elegant traditional classic refined literary editorial transitional oldstyle didone versatile multi-weight flexible variable variable-font responsive variable-weight korean hangul english western european extended-latin european vietnamese,100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900,wght: -,korean | latin | latin-ext | vietnamese,Hypertype,728,777,No,2021-05-13,2025-09-08,https://fonts.google.com/specimen/Hahmlet
+Halant,Serif,Serif,,elegant traditional classic refined literary editorial transitional oldstyle didone hindi devanagari indian english western european extended-latin european,300 | 400 | 500 | 600 | 700,,devanagari | latin | latin-ext,Indian Type Foundry,765,1819,No,2014-08-27,2025-09-10,https://fonts.google.com/specimen/Halant
+Hammersmith One,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque english western european extended-latin european well-known common,400,,latin | latin-ext,Nicole Fally,248,136,No,2011-06-29,2025-09-02,https://fonts.google.com/specimen/Hammersmith+One
+Hanalei,Display,,Display,bold decorative headline attention-grabbing creative expressive  headline hero decorative large-text attention english western european extended-latin european,400,,latin | latin-ext,Astigmatic,1811,2091,No,2012-11-26,2025-09-08,https://fonts.google.com/specimen/Hanalei
+Hanalei Fill,Display,,Display,bold decorative headline attention-grabbing creative expressive  headline hero decorative large-text attention english western european extended-latin european,400,,latin | latin-ext,Astigmatic,1657,2195,No,2012-11-26,2025-09-08,https://fonts.google.com/specimen/Hanalei+Fill
+Handjet,Display,Sans Serif,Display,bold decorative headline attention-grabbing creative expressive geometric humanist grotesque headline hero decorative large-text attention versatile multi-weight flexible variable variable-font responsive variable-weight arabic RTL middle-east armenian russian cyrillic slavic cyrillic extended greek hebrew RTL israeli english western european extended-latin european vietnamese multilingual international,100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900,ELGR: - | ELSH: - | wght: -,arabic | armenian | cyrillic | cyrillic-ext | greek | hebrew | latin | latin-ext | vietnamese,Rosetta | David Březina,1313,1925,No,2020-09-11,2025-09-16,https://fonts.google.com/specimen/Handjet
+Handlee,Handwriting,Sans Serif,Handwriting,personal casual friendly warm handwritten script organic geometric humanist grotesque script cursive hand-drawn artistic informal english western european,400,,latin,Joe Prince,382,1580,No,2011-12-13,2025-09-16,https://fonts.google.com/specimen/Handlee
+Hanken Grotesk,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque versatile multi-weight flexible italic variable variable-font responsive variable-weight cyrillic extended english western european extended-latin european vietnamese well-known common,100 | 100i | 200 | 200i | 300 | 300i | 400 | 400i | 500 | 500i | 600 | 600i | 700 | 700i | 800 | 800i | 900 | 900i,wght: -,cyrillic-ext | latin | latin-ext | vietnamese,Alfredo Marco Pradil | Hanken Design Co.,231,1949,No,2022-11-16,2025-09-02,https://fonts.google.com/specimen/Hanken+Grotesk
+Hanuman,Serif,Serif,,elegant traditional classic refined literary editorial transitional oldstyle didone versatile multi-weight flexible variable variable-font responsive variable-weight khmer cambodian english western european,100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900,wght: -,khmer | latin,Danh Hong,853,1989,No,2010-09-21,2025-06-12,https://fonts.google.com/specimen/Hanuman
+Happy Monkey,Display,,Display,bold decorative headline attention-grabbing creative expressive  headline hero decorative large-text attention english western european extended-latin european,400,,latin | latin-ext,Brenda Gallo,889,2104,No,2012-03-14,2025-09-08,https://fonts.google.com/specimen/Happy+Monkey
+Harmattan,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque arabic RTL middle-east english western european extended-latin european,400 | 500 | 600 | 700,,arabic | latin | latin-ext,SIL International,1138,1852,No,2020-07-02,2025-09-16,https://fonts.google.com/specimen/Harmattan
+Headland One,Serif,Serif,,elegant traditional classic refined literary editorial transitional oldstyle didone english western european extended-latin european,400,,latin | latin-ext,Gary Lonergan,1289,1939,No,2012-05-09,2025-09-16,https://fonts.google.com/specimen/Headland+One
+Hedvig Letters Sans,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque english western european extended-latin european,400,,latin | latin-ext | math | symbols,Kanon Foundry | Alexander Örn | Tor Weibull | Hedvig,1414,292,No,2023-11-20,2025-05-30,https://fonts.google.com/specimen/Hedvig+Letters+Sans
+Hedvig Letters Serif,Serif,Serif,,elegant traditional classic refined literary editorial transitional oldstyle didone variable variable-font responsive english western european extended-latin european,400,opsz: -,latin | latin-ext | math | symbols,Kanon Foundry | Alexander Örn | Tor Weibull | Hedvig,1022,996,No,2023-11-20,2025-09-11,https://fonts.google.com/specimen/Hedvig+Letters+Serif
+Heebo,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque versatile multi-weight flexible variable variable-font responsive variable-weight hebrew RTL israeli english western european extended-latin european popular widely-used,100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900,wght: -,hebrew | latin | latin-ext | math | symbols,Oded Ezer,57,583,No,2016-06-15,2025-09-10,https://fonts.google.com/specimen/Heebo
+Henny Penny,Display,,Display,bold decorative headline attention-grabbing creative expressive  headline hero decorative large-text attention english western european,400,,latin,Brownfox,1135,2145,No,2012-02-22,2025-09-11,https://fonts.google.com/specimen/Henny+Penny
+Hepta Slab,Serif,Slab Serif,,elegant traditional classic refined literary editorial slab mechanical sturdy strong versatile multi-weight flexible variable variable-font responsive variable-weight english western european extended-latin european vietnamese,1 | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900,wght: -,latin | latin-ext | vietnamese,Mike LaGattuta,638,1413,No,2018-09-19,2025-09-04,https://fonts.google.com/specimen/Hepta+Slab
+Herr Von Muellerhoff,Handwriting,,Handwriting | Display,personal casual friendly warm handwritten script organic  script cursive hand-drawn artistic informal headline hero decorative large-text attention english western european extended-latin european,400,,latin | latin-ext,Sudtipos,621,2099,No,2011-11-30,2025-09-08,https://fonts.google.com/specimen/Herr+Von+Muellerhoff
+Hi Melody,Handwriting,Sans Serif,Display,personal casual friendly warm handwritten script organic geometric humanist grotesque headline hero decorative large-text attention korean hangul english western european,400,,korean | latin,YoonDesign Inc,944,253,No,2018-02-23,2025-09-04,https://fonts.google.com/specimen/Hi+Melody
+Hina Mincho,Serif,Serif,Display,elegant traditional classic refined literary editorial transitional oldstyle didone headline hero decorative large-text attention russian cyrillic slavic japanese kanji hiragana katakana english western european extended-latin european vietnamese,400,,cyrillic | japanese | latin | latin-ext | vietnamese,Satsuyako,717,696,No,2021-04-14,2025-09-11,https://fonts.google.com/specimen/Hina+Mincho
+Hind,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque hindi devanagari indian english western european extended-latin european popular widely-used,300 | 400 | 500 | 600 | 700,,devanagari | latin | latin-ext,Indian Type Foundry,107,975,No,2014-06-25,2025-09-04,https://fonts.google.com/specimen/Hind
+Hind Guntur,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque english western european extended-latin european telugu indian,300 | 400 | 500 | 600 | 700,,latin | latin-ext | telugu,Indian Type Foundry,428,651,No,2016-06-15,2025-09-08,https://fonts.google.com/specimen/Hind+Guntur
+Hind Madurai,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque english western european extended-latin european tamil indian well-known common,300 | 400 | 500 | 600 | 700,,latin | latin-ext | tamil,Indian Type Foundry,222,1956,No,2016-06-15,2025-09-02,https://fonts.google.com/specimen/Hind+Madurai
+Hind Mysuru,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque kannada indian english western european extended-latin european,300 | 400 | 500 | 600 | 700,,kannada | latin | latin-ext,Indian Type Foundry,1711,1854,No,2024-12-02,2025-05-30,https://fonts.google.com/specimen/Hind+Mysuru
+Hind Siliguri,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque bengali bangladeshi indian english western european extended-latin european popular widely-used,300 | 400 | 500 | 600 | 700,,bengali | latin | latin-ext,Indian Type Foundry,64,2038,No,2016-06-15,2025-09-16,https://fonts.google.com/specimen/Hind+Siliguri
+Hind Vadodara,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque gujarati indian english western european extended-latin european,300 | 400 | 500 | 600 | 700,,gujarati | latin | latin-ext,Indian Type Foundry,411,519,No,2016-06-15,2025-09-10,https://fonts.google.com/specimen/Hind+Vadodara
+Holtwood One SC,Serif,Slab Serif,Display,elegant traditional classic refined literary editorial slab mechanical sturdy strong headline hero decorative large-text attention english western european extended-latin european,400,,latin | latin-ext,Vernon Adams,1007,529,No,2011-05-04,2025-09-08,https://fonts.google.com/specimen/Holtwood+One+SC
+Homemade Apple,Handwriting,,Handwriting | Display,personal casual friendly warm handwritten script organic  script cursive hand-drawn artistic informal headline hero decorative large-text attention english western european,400,,latin,Font Diner,358,1356,No,2011-01-06,2025-09-08,https://fonts.google.com/specimen/Homemade+Apple
+Homenaje,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque english western european,400,,latin,Constanza Artigas Preller | Agustina Mingote,1105,547,No,2012-01-18,2025-09-04,https://fonts.google.com/specimen/Homenaje
+Honk,Display,,Display,bold decorative headline attention-grabbing creative expressive  headline hero decorative large-text attention variable variable-font responsive english western european extended-latin european vietnamese,400,MORF: - | SHLN: -,latin | latin-ext | math | symbols | vietnamese,Ek Type,706,1354,No,2024-01-23,2025-09-04,https://fonts.google.com/specimen/Honk
+Host Grotesk,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque versatile multi-weight flexible italic variable variable-font responsive variable-weight english western european extended-latin european,300 | 300i | 400 | 400i | 500 | 500i | 600 | 600i | 700 | 700i | 800 | 800i,wght: -,latin | latin-ext,Element Type | Doğukan Karapınar | İbrahim Kaçtıoğlu,598,1800,No,2024-11-05,2025-09-04,https://fonts.google.com/specimen/Host+Grotesk
+Hubballi,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque kannada indian english western european extended-latin european,400,,kannada | latin | latin-ext,Erin McLaughlin,1490,2029,No,2021-12-16,2025-09-02,https://fonts.google.com/specimen/Hubballi
+Hubot Sans,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque versatile multi-weight flexible italic variable variable-font responsive variable-weight variable-width english western european extended-latin european vietnamese,200 | 200i | 300 | 300i | 400 | 400i | 500 | 500i | 600 | 600i | 700 | 700i | 800 | 800i | 900 | 900i,wdth: - | wght: -,latin | latin-ext | vietnamese,Tobias Bjerrome Ahlin | Github | Degarism Studio | Sebastian Carewe,1116,1972,No,2024-11-04,2025-09-04,https://fonts.google.com/specimen/Hubot+Sans
+Huninn,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque chinese traditional russian cyrillic slavic english western european extended-latin european vietnamese,400,,chinese-traditional | cyrillic | latin | latin-ext | vietnamese,justfont,1624,286,No,2025-06-11,2026-02-19,https://fonts.google.com/specimen/Huninn
+Hurricane,Handwriting,,Display | Handwriting,personal casual friendly warm handwritten script organic  headline hero decorative large-text attention script cursive hand-drawn artistic informal english western european extended-latin european vietnamese,400,,latin | latin-ext | vietnamese,Robert Leuschke,826,1153,No,2021-10-07,2025-09-10,https://fonts.google.com/specimen/Hurricane
+IBM Plex Mono,Monospace,,Monospace,code developer technical fixed-width terminal programming  mono fixed-width tabular data code versatile multi-weight flexible italic russian cyrillic slavic cyrillic extended english western european extended-latin european vietnamese popular widely-used,100 | 100i | 200 | 200i | 300 | 300i | 400 | 400i | 500 | 500i | 600 | 600i | 700 | 700i,,cyrillic | cyrillic-ext | latin | latin-ext | vietnamese,Mike Abbink | Bold Monday,137,256,No,2018-03-12,2025-09-16,https://fonts.google.com/specimen/IBM+Plex+Mono
+IBM Plex Sans,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque versatile multi-weight flexible italic variable variable-font responsive variable-weight variable-width russian cyrillic slavic cyrillic extended greek english western european extended-latin european vietnamese multilingual international popular widely-used,100 | 100i | 200 | 200i | 300 | 300i | 400 | 400i | 500 | 500i | 600 | 600i | 700 | 700i,wdth: - | wght: -,cyrillic | cyrillic-ext | greek | latin | latin-ext | vietnamese,Mike Abbink | Bold Monday,53,1305,No,2018-03-11,2025-09-08,https://fonts.google.com/specimen/IBM+Plex+Sans
+IBM Plex Sans Arabic,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque versatile multi-weight flexible arabic RTL middle-east cyrillic extended english western european extended-latin european well-known common,100 | 200 | 300 | 400 | 500 | 600 | 700,,arabic | cyrillic-ext | latin | latin-ext,Mike Abbink | Bold Monday | Khajag Apelian | Wael Morcos,165,182,No,2021-06-17,2026-03-03,https://fonts.google.com/specimen/IBM+Plex+Sans+Arabic
+IBM Plex Sans Condensed,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque versatile multi-weight flexible italic cyrillic extended english western european extended-latin european vietnamese,100 | 100i | 200 | 200i | 300 | 300i | 400 | 400i | 500 | 500i | 600 | 600i | 700 | 700i,,cyrillic-ext | latin | latin-ext | vietnamese,Mike Abbink | Bold Monday,320,362,No,2018-03-12,2025-09-11,https://fonts.google.com/specimen/IBM+Plex+Sans+Condensed
+IBM Plex Sans Devanagari,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque versatile multi-weight flexible cyrillic extended hindi devanagari indian english western european extended-latin european,100 | 200 | 300 | 400 | 500 | 600 | 700,,cyrillic-ext | devanagari | latin | latin-ext,Mike Abbink | Bold Monday,1302,2098,No,2021-06-18,2025-09-11,https://fonts.google.com/specimen/IBM+Plex+Sans+Devanagari
+IBM Plex Sans Hebrew,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque versatile multi-weight flexible cyrillic extended hebrew RTL israeli english western european extended-latin european,100 | 200 | 300 | 400 | 500 | 600 | 700,,cyrillic-ext | hebrew | latin | latin-ext,Mike Abbink | Bold Monday,769,332,No,2021-06-18,2025-09-04,https://fonts.google.com/specimen/IBM+Plex+Sans+Hebrew
+IBM Plex Sans JP,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque versatile multi-weight flexible russian cyrillic slavic japanese kanji hiragana katakana english western european extended-latin european,100 | 200 | 300 | 400 | 500 | 600 | 700,,cyrillic | japanese | latin | latin-ext,Mike Abbink | Bold Monday,318,271,No,2022-09-11,2025-09-10,https://fonts.google.com/specimen/IBM+Plex+Sans+JP
+IBM Plex Sans KR,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque versatile multi-weight flexible korean hangul english western european extended-latin european,100 | 200 | 300 | 400 | 500 | 600 | 700,,korean | latin | latin-ext,Mike Abbink | Bold Monday,684,1414,No,2021-06-18,2025-09-08,https://fonts.google.com/specimen/IBM+Plex+Sans+KR
+IBM Plex Sans Thai,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque versatile multi-weight flexible cyrillic extended english western european extended-latin european thai southeast-asia,100 | 200 | 300 | 400 | 500 | 600 | 700,,cyrillic-ext | latin | latin-ext | thai,Mike Abbink | Bold Monday,497,780,No,2021-06-18,2025-09-02,https://fonts.google.com/specimen/IBM+Plex+Sans+Thai
+IBM Plex Sans Thai Looped,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque versatile multi-weight flexible cyrillic extended english western european extended-latin european thai southeast-asia,100 | 200 | 300 | 400 | 500 | 600 | 700,,cyrillic-ext | latin | latin-ext | thai,Mike Abbink | Bold Monday,1267,2284,No,2021-06-18,2025-09-11,https://fonts.google.com/specimen/IBM+Plex+Sans+Thai+Looped
+IBM Plex Serif,Serif,Serif,,elegant traditional classic refined literary editorial transitional oldstyle didone versatile multi-weight flexible italic russian cyrillic slavic cyrillic extended english western european extended-latin european vietnamese well-known common,100 | 100i | 200 | 200i | 300 | 300i | 400 | 400i | 500 | 500i | 600 | 600i | 700 | 700i,,cyrillic | cyrillic-ext | latin | latin-ext | vietnamese,Mike Abbink | Bold Monday,163,1536,No,2018-03-11,2025-09-16,https://fonts.google.com/specimen/IBM+Plex+Serif
+IM Fell DW Pica,Serif,Serif,,elegant traditional classic refined literary editorial transitional oldstyle didone italic english western european,400 | 400i,,latin,Igino Marini,677,68,No,2010-05-17,2025-05-30,https://fonts.google.com/specimen/IM+Fell+DW+Pica
+IM Fell DW Pica SC,Serif,Serif,,elegant traditional classic refined literary editorial transitional oldstyle didone english western european,400,,latin,Igino Marini,819,39,No,2010-05-17,2025-05-30,https://fonts.google.com/specimen/IM+Fell+DW+Pica+SC
+IM Fell Double Pica,Serif,Serif,,elegant traditional classic refined literary editorial transitional oldstyle didone italic english western european,400 | 400i,,latin,Igino Marini,1047,1493,No,2010-05-17,2025-05-30,https://fonts.google.com/specimen/IM+Fell+Double+Pica
+IM Fell Double Pica SC,Serif,Serif,,elegant traditional classic refined literary editorial transitional oldstyle didone english western european,400,,latin,Igino Marini,1181,1372,No,2010-05-17,2025-05-30,https://fonts.google.com/specimen/IM+Fell+Double+Pica+SC
+IM Fell English,Serif,Serif,,elegant traditional classic refined literary editorial transitional oldstyle didone italic english western european,400 | 400i,,latin,Igino Marini,731,525,No,2010-05-17,2025-05-30,https://fonts.google.com/specimen/IM+Fell+English
+IM Fell English SC,Serif,Serif,,elegant traditional classic refined literary editorial transitional oldstyle didone english western european,400,,latin,Igino Marini,817,1388,No,2010-05-17,2025-05-30,https://fonts.google.com/specimen/IM+Fell+English+SC
+IM Fell French Canon,Serif,Serif,,elegant traditional classic refined literary editorial transitional oldstyle didone italic english western european,400 | 400i,,latin,Igino Marini,1128,965,No,2010-05-17,2025-05-30,https://fonts.google.com/specimen/IM+Fell+French+Canon
+IM Fell French Canon SC,Serif,Serif,,elegant traditional classic refined literary editorial transitional oldstyle didone english western european,400,,latin,Igino Marini,1213,1225,No,2010-05-17,2025-09-10,https://fonts.google.com/specimen/IM+Fell+French+Canon+SC
+IM Fell Great Primer,Serif,Serif,,elegant traditional classic refined literary editorial transitional oldstyle didone italic english western european,400 | 400i,,latin,Igino Marini,1124,1756,No,2010-05-17,2025-05-30,https://fonts.google.com/specimen/IM+Fell+Great+Primer
+IM Fell Great Primer SC,Serif,Serif,,elegant traditional classic refined literary editorial transitional oldstyle didone english western european,400,,latin,Igino Marini,1207,1234,No,2010-05-17,2025-05-30,https://fonts.google.com/specimen/IM+Fell+Great+Primer+SC
+Iansui,Handwriting,,Handwriting,personal casual friendly warm handwritten script organic  script cursive hand-drawn artistic informal chinese traditional english western european extended-latin european,400,,chinese-traditional | latin | latin-ext | symbols2,But Ko,1654,1201,No,2025-03-03,2026-02-19,https://fonts.google.com/specimen/Iansui
+Ibarra Real Nova,Serif,Serif,Display,elegant traditional classic refined literary editorial transitional oldstyle didone headline hero decorative large-text attention italic variable variable-font responsive variable-weight english western european extended-latin european,400 | 400i | 500 | 500i | 600 | 600i | 700 | 700i,wght: -,latin | latin-ext,José María Ribagorda | Octavio Pardo,756,1181,No,2019-11-04,2025-09-04,https://fonts.google.com/specimen/Ibarra+Real+Nova
+Iceberg,Display,Sans Serif,Display,bold decorative headline attention-grabbing creative expressive geometric humanist grotesque headline hero decorative large-text attention english western european,400,,latin,Cyreal,1054,2181,No,2012-01-25,2025-09-04,https://fonts.google.com/specimen/Iceberg
+Iceland,Display,Sans Serif,Display,bold decorative headline attention-grabbing creative expressive geometric humanist grotesque headline hero decorative large-text attention english western european,400,,latin,Cyreal,875,294,No,2011-11-23,2025-09-02,https://fonts.google.com/specimen/Iceland
+Idiqlat,Serif,Serif,,elegant traditional classic refined literary editorial transitional oldstyle didone english western european,200 | 300 | 400,,latin | syriac,SIL International,1876,2251,No,2026-02-12,2026-02-17,https://fonts.google.com/specimen/Idiqlat
+Imbue,Serif,Serif,Display,elegant traditional classic refined literary editorial transitional oldstyle didone headline hero decorative large-text attention versatile multi-weight flexible variable variable-font responsive variable-weight english western european extended-latin european vietnamese,100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900,opsz: - | wght: -,latin | latin-ext | vietnamese,Tyler Finck | ETC,1261,1499,No,2020-12-02,2025-09-02,https://fonts.google.com/specimen/Imbue
+Imperial Script,Handwriting,,Display | Handwriting,personal casual friendly warm handwritten script organic  headline hero decorative large-text attention script cursive hand-drawn artistic informal english western european extended-latin european vietnamese,400,,latin | latin-ext | vietnamese,Robert Leuschke,1248,1802,No,2021-11-18,2025-09-11,https://fonts.google.com/specimen/Imperial+Script
+Imprima,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque english western european extended-latin european,400,,latin | latin-ext,Eduardo Tunni,926,1558,No,2012-03-14,2025-09-10,https://fonts.google.com/specimen/Imprima
+Inclusive Sans,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque italic variable variable-font responsive variable-weight english western european extended-latin european vietnamese,300 | 300i | 400 | 400i | 500 | 500i | 600 | 600i | 700 | 700i,wght: -,latin | latin-ext | vietnamese,Olivia King,1075,462,No,2023-09-12,2025-09-10,https://fonts.google.com/specimen/Inclusive+Sans
+Inconsolata,Monospace,,Monospace,code developer technical fixed-width terminal programming  mono fixed-width tabular data code versatile multi-weight flexible variable variable-font responsive variable-weight variable-width english western european extended-latin european vietnamese top-popular trending most-used,200 | 300 | 400 | 500 | 600 | 700 | 800 | 900,wdth: - | wght: -,latin | latin-ext | vietnamese,Raph Levien,43,812,No,2010-02-19,2025-09-04,https://fonts.google.com/specimen/Inconsolata
+Inder,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque english western european extended-latin european,400,,latin | latin-ext,Sorkin Type,816,207,No,2011-12-19,2025-09-04,https://fonts.google.com/specimen/Inder
+Indie Flower,Handwriting,,Display | Handwriting,personal casual friendly warm handwritten script organic  headline hero decorative large-text attention script cursive hand-drawn artistic informal english western european extended-latin european well-known common,400,,latin | latin-ext,Kimberly Geswein,154,1179,No,2011-03-09,2025-09-16,https://fonts.google.com/specimen/Indie+Flower
+Ingrid Darling,Handwriting,,Handwriting | Display,personal casual friendly warm handwritten script organic  script cursive hand-drawn artistic informal headline hero decorative large-text attention english western european extended-latin european vietnamese,400,,latin | latin-ext | vietnamese,Robert Leuschke,1825,1410,No,2022-03-11,2025-09-04,https://fonts.google.com/specimen/Ingrid+Darling
+Inika,Serif,Serif,,elegant traditional classic refined literary editorial transitional oldstyle didone english western european extended-latin european,400 | 700,,latin | latin-ext,Constanza Artigas,1351,512,No,2012-01-11,2025-09-04,https://fonts.google.com/specimen/Inika
+Inknut Antiqua,Serif,Serif,,elegant traditional classic refined literary editorial transitional oldstyle didone versatile multi-weight flexible hindi devanagari indian english western european extended-latin european,300 | 400 | 500 | 600 | 700 | 800 | 900,,devanagari | latin | latin-ext,Claus Eggers Sørensen,985,1492,No,2015-05-20,2025-09-04,https://fonts.google.com/specimen/Inknut+Antiqua
+Inria Sans,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque italic english western european extended-latin european,300 | 300i | 400 | 400i | 700 | 700i,,latin | latin-ext,Grégori Vincens | Jérémie Hornus,766,681,No,2019-12-05,2025-09-04,https://fonts.google.com/specimen/Inria+Sans
+Inria Serif,Serif,Serif,Display,elegant traditional classic refined literary editorial transitional oldstyle didone headline hero decorative large-text attention italic english western european extended-latin european,300 | 300i | 400 | 400i | 700 | 700i,,latin | latin-ext,Grégori Vincens | Jérémie Hornus,599,1850,No,2019-12-05,2025-09-11,https://fonts.google.com/specimen/Inria+Serif
+Inspiration,Handwriting,,Display | Handwriting,personal casual friendly warm handwritten script organic  headline hero decorative large-text attention script cursive hand-drawn artistic informal english western european extended-latin european vietnamese,400,,latin | latin-ext | vietnamese,Robert Leuschke,1297,106,No,2021-11-26,2025-06-02,https://fonts.google.com/specimen/Inspiration
+Instrument Sans,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque italic variable variable-font responsive variable-weight variable-width english western european extended-latin european well-known common,400 | 400i | 500 | 500i | 600 | 600i | 700 | 700i,wdth: - | wght: -,latin | latin-ext,Rodrigo Fuenzalida | Jordan Egstad,174,601,No,2023-05-08,2025-09-04,https://fonts.google.com/specimen/Instrument+Sans
+Instrument Serif,Serif,Serif,,elegant traditional classic refined literary editorial transitional oldstyle didone italic english western european extended-latin european popular widely-used,400 | 400i,,latin | latin-ext,Rodrigo Fuenzalida | Jordan Egstad,147,482,No,2023-03-21,2025-09-04,https://fonts.google.com/specimen/Instrument+Serif
+Intel One Mono,Monospace,,Monospace,code developer technical fixed-width terminal programming  mono fixed-width tabular data code italic variable variable-font responsive variable-weight english western european extended-latin european vietnamese,300 | 300i | 400 | 400i | 500 | 500i | 600 | 600i | 700 | 700i,wght: -,latin | latin-ext | symbols2 | vietnamese,Intel Corporation | Frere-Jones Type,1777,335,No,2025-07-14,2025-07-16,https://fonts.google.com/specimen/Intel+One+Mono
+Inter,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque versatile multi-weight flexible italic variable variable-font responsive variable-weight russian cyrillic slavic cyrillic extended greek greek extended english western european extended-latin european vietnamese multilingual international top-popular trending most-used,100 | 100i | 200 | 200i | 300 | 300i | 400 | 400i | 500 | 500i | 600 | 600i | 700 | 700i | 800 | 800i | 900 | 900i,opsz: - | wght: -,cyrillic | cyrillic-ext | greek | greek-ext | latin | latin-ext | vietnamese,Rasmus Andersson,7,845,No,2020-01-24,2025-09-10,https://fonts.google.com/specimen/Inter
+Inter Tight,Sans Serif,Sans Serif,Display,clean modern minimal professional readable neutral geometric humanist grotesque headline hero decorative large-text attention versatile multi-weight flexible italic variable variable-font responsive variable-weight russian cyrillic slavic cyrillic extended greek greek extended english western european extended-latin european vietnamese multilingual international popular widely-used,100 | 100i | 200 | 200i | 300 | 300i | 400 | 400i | 500 | 500i | 600 | 600i | 700 | 700i | 800 | 800i | 900 | 900i,wght: -,cyrillic | cyrillic-ext | greek | greek-ext | latin | latin-ext | vietnamese,Rasmus Andersson,117,1769,No,2022-07-22,2025-09-16,https://fonts.google.com/specimen/Inter+Tight
+Irish Grover,Display,,Display,bold decorative headline attention-grabbing creative expressive  headline hero decorative large-text attention english western european,400,,latin,Sideshow,762,1494,No,2011-03-16,2025-05-30,https://fonts.google.com/specimen/Irish+Grover
+Island Moments,Handwriting,,Display | Handwriting,personal casual friendly warm handwritten script organic  headline hero decorative large-text attention script cursive hand-drawn artistic informal english western european extended-latin european vietnamese,400,,latin | latin-ext | vietnamese,Robert Leuschke,1252,1890,No,2021-11-18,2025-09-11,https://fonts.google.com/specimen/Island+Moments
+Istok Web,Sans Serif,Sans Serif,Display,clean modern minimal professional readable neutral geometric humanist grotesque headline hero decorative large-text attention italic russian cyrillic slavic cyrillic extended english western european extended-latin european,400 | 400i | 700 | 700i,,cyrillic | cyrillic-ext | latin | latin-ext,Andrey V. Panov,405,2089,No,2011-07-13,2025-09-10,https://fonts.google.com/specimen/Istok+Web
+Italiana,Sans Serif,Sans Serif,Display,clean modern minimal professional readable neutral geometric humanist grotesque headline hero decorative large-text attention english western european,400,,latin,Santiago Orozco,566,1318,No,2012-03-14,2025-06-25,https://fonts.google.com/specimen/Italiana
+Italianno,Handwriting,,Handwriting,personal casual friendly warm handwritten script organic  script cursive hand-drawn artistic informal english western european extended-latin european vietnamese,400,,latin | latin-ext | vietnamese,Robert Leuschke,438,2156,No,2011-12-19,2025-09-04,https://fonts.google.com/specimen/Italianno
+Itim,Handwriting,,Display | Handwriting,personal casual friendly warm handwritten script organic  headline hero decorative large-text attention script cursive hand-drawn artistic informal english western european extended-latin european thai southeast-asia vietnamese,400,,latin | latin-ext | thai | vietnamese,Cadson Demak,444,1549,No,2015-07-01,2025-09-16,https://fonts.google.com/specimen/Itim
+Jacquard 12,Display,,Display,bold decorative headline attention-grabbing creative expressive  headline hero decorative large-text attention english western european extended-latin european,400,,latin | latin-ext | math | symbols,Sarah Cadigan-Fried,1436,425,No,2024-05-09,2025-09-17,https://fonts.google.com/specimen/Jacquard+12
+Jacquard 12 Charted,Display,,Display,bold decorative headline attention-grabbing creative expressive  headline hero decorative large-text attention english western european extended-latin european,400,,latin | latin-ext | math | symbols,Sarah Cadigan-Fried,1908,738,No,2024-04-10,2025-09-17,https://fonts.google.com/specimen/Jacquard+12+Charted
+Jacquard 24,Display,,Display,bold decorative headline attention-grabbing creative expressive  headline hero decorative large-text attention english western european extended-latin european,400,,latin | latin-ext,Sarah Cadigan-Fried,1616,880,No,2024-04-10,2025-09-17,https://fonts.google.com/specimen/Jacquard+24
+Jacquard 24 Charted,Display,,Display,bold decorative headline attention-grabbing creative expressive  headline hero decorative large-text attention english western european extended-latin european,400,,latin | latin-ext,Sarah Cadigan-Fried,1940,1487,No,2024-03-14,2025-09-17,https://fonts.google.com/specimen/Jacquard+24+Charted
+Jacquarda Bastarda 9,Display,Serif,Display,bold decorative headline attention-grabbing creative expressive transitional oldstyle didone headline hero decorative large-text attention english western european extended-latin european,400,,latin | latin-ext | math | symbols,Sarah Cadigan-Fried,1709,1236,No,2024-01-24,2025-09-17,https://fonts.google.com/specimen/Jacquarda+Bastarda+9
+Jacquarda Bastarda 9 Charted,Display,Serif,Display,bold decorative headline attention-grabbing creative expressive transitional oldstyle didone headline hero decorative large-text attention english western european extended-latin european,400,,latin | latin-ext | math | symbols,Sarah Cadigan-Fried,2037,807,No,2024-04-10,2025-09-17,https://fonts.google.com/specimen/Jacquarda+Bastarda+9+Charted
+Jacques Francois,Serif,Serif,Display,elegant traditional classic refined literary editorial transitional oldstyle didone headline hero decorative large-text attention english western european,400,,latin,Cyreal,1324,118,No,2012-09-07,2025-09-08,https://fonts.google.com/specimen/Jacques+Francois
+Jacques Francois Shadow,Display,Serif,Display,bold decorative headline attention-grabbing creative expressive transitional oldstyle didone headline hero decorative large-text attention english western european,400,,latin,Cyreal,1479,2094,No,2012-09-07,2025-09-04,https://fonts.google.com/specimen/Jacques+Francois+Shadow
+Jaini,Display,,Display,bold decorative headline attention-grabbing creative expressive  headline hero decorative large-text attention hindi devanagari indian english western european extended-latin european,400,,devanagari | latin | latin-ext,Ek Type,1786,2212,No,2024-05-01,2025-05-30,https://fonts.google.com/specimen/Jaini
+Jaini Purva,Display,,Display,bold decorative headline attention-grabbing creative expressive  headline hero decorative large-text attention hindi devanagari indian english western european extended-latin european,400,,devanagari | latin | latin-ext,Ek Type,1888,2179,No,2024-05-01,2025-05-30,https://fonts.google.com/specimen/Jaini+Purva
+Jaldi,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque hindi devanagari indian english western european extended-latin european,400 | 700,,devanagari | latin | latin-ext,Omnibus-Type,923,1813,No,2015-04-22,2025-09-16,https://fonts.google.com/specimen/Jaldi
+Jaro,Sans Serif,Sans Serif,Display,clean modern minimal professional readable neutral geometric humanist grotesque headline hero decorative large-text attention variable variable-font responsive english western european extended-latin european vietnamese,400,opsz: -,latin | latin-ext | vietnamese,Agyei Archer | Céline Hurka | Mirko Velimirović,943,500,No,2024-03-14,2025-09-16,https://fonts.google.com/specimen/Jaro
+Jersey 10,Display,Sans Serif,Display,bold decorative headline attention-grabbing creative expressive geometric humanist grotesque headline hero decorative large-text attention english western european extended-latin european,400,,latin | latin-ext,Sarah Cadigan-Fried,955,96,No,2024-04-10,2025-09-17,https://fonts.google.com/specimen/Jersey+10
+Jersey 10 Charted,Display,Sans Serif,Display,bold decorative headline attention-grabbing creative expressive geometric humanist grotesque headline hero decorative large-text attention english western european extended-latin european,400,,latin | latin-ext,Sarah Cadigan-Fried,2014,701,No,2024-04-10,2025-09-17,https://fonts.google.com/specimen/Jersey+10+Charted
+Jersey 15,Display,Sans Serif,Display,bold decorative headline attention-grabbing creative expressive geometric humanist grotesque headline hero decorative large-text attention english western european extended-latin european,400,,latin | latin-ext,Sarah Cadigan-Fried,1341,224,No,2024-04-10,2025-09-17,https://fonts.google.com/specimen/Jersey+15
+Jersey 15 Charted,Display,Sans Serif,Display,bold decorative headline attention-grabbing creative expressive geometric humanist grotesque headline hero decorative large-text attention english western european extended-latin european,400,,latin | latin-ext,Sarah Cadigan-Fried,1960,1976,No,2024-04-10,2025-09-17,https://fonts.google.com/specimen/Jersey+15+Charted
+Jersey 20,Display,Sans Serif,Display,bold decorative headline attention-grabbing creative expressive geometric humanist grotesque headline hero decorative large-text attention english western european extended-latin european,400,,latin | latin-ext,Sarah Cadigan-Fried,1564,1329,No,2024-04-10,2025-09-17,https://fonts.google.com/specimen/Jersey+20
+Jersey 20 Charted,Display,Sans Serif,Display,bold decorative headline attention-grabbing creative expressive geometric humanist grotesque headline hero decorative large-text attention english western european extended-latin european,400,,latin | latin-ext,Sarah Cadigan-Fried,1994,348,No,2024-04-10,2025-09-17,https://fonts.google.com/specimen/Jersey+20+Charted
+Jersey 25,Display,Sans Serif,Display,bold decorative headline attention-grabbing creative expressive geometric humanist grotesque headline hero decorative large-text attention english western european extended-latin european,400,,latin | latin-ext,Sarah Cadigan-Fried,948,363,No,2024-04-10,2025-09-17,https://fonts.google.com/specimen/Jersey+25
+Jersey 25 Charted,Display,Sans Serif,Display,bold decorative headline attention-grabbing creative expressive geometric humanist grotesque headline hero decorative large-text attention english western european extended-latin european,400,,latin | latin-ext,Sarah Cadigan-Fried,1973,411,No,2024-05-01,2025-09-17,https://fonts.google.com/specimen/Jersey+25+Charted
+JetBrains Mono,Monospace,,Monospace,code developer technical fixed-width terminal programming  mono fixed-width tabular data code versatile multi-weight flexible italic variable variable-font responsive variable-weight russian cyrillic slavic cyrillic extended greek english western european extended-latin european vietnamese multilingual international popular widely-used,100 | 100i | 200 | 200i | 300 | 300i | 400 | 400i | 500 | 500i | 600 | 600i | 700 | 700i | 800 | 800i,wght: -,cyrillic | cyrillic-ext | greek | latin | latin-ext | vietnamese,JetBrains | Philipp Nurullin | Konstantin Bulenkov,136,124,No,2020-11-18,2025-09-11,https://fonts.google.com/specimen/JetBrains+Mono
+Jim Nightshade,Handwriting,,Handwriting,personal casual friendly warm handwritten script organic  script cursive hand-drawn artistic informal english western european extended-latin european,400,,latin | latin-ext,Astigmatic,1593,1821,No,2012-01-04,2025-09-11,https://fonts.google.com/specimen/Jim+Nightshade
+Joan,Serif,Serif,,elegant traditional classic refined literary editorial transitional oldstyle didone english western european extended-latin european,400,,latin | latin-ext,Paolo Biagini,1397,1959,No,2022-04-28,2025-09-04,https://fonts.google.com/specimen/Joan
+Jockey One,Sans Serif,Sans Serif,Display,clean modern minimal professional readable neutral geometric humanist grotesque headline hero decorative large-text attention english western european extended-latin european,400,,latin | latin-ext,TypeTogether,700,2033,No,2011-10-26,2025-09-16,https://fonts.google.com/specimen/Jockey+One
+Jolly Lodger,Display,,Display,bold decorative headline attention-grabbing creative expressive  headline hero decorative large-text attention english western european extended-latin european,400,,latin | latin-ext,Font Diner,1278,1307,No,2012-03-14,2025-09-10,https://fonts.google.com/specimen/Jolly+Lodger
+Jomhuria,Display,Serif,Display,bold decorative headline attention-grabbing creative expressive transitional oldstyle didone headline hero decorative large-text attention english western european extended-latin european,400,,latin | latin-ext,KB Studio,821,262,No,2016-06-15,2025-06-02,https://fonts.google.com/specimen/Jomhuria
+Jomolhari,Serif,Serif,Display,elegant traditional classic refined literary editorial transitional oldstyle didone headline hero decorative large-text attention english western european tibetan,400,,latin | tibetan,Christopher J. Fynn,1338,1846,No,2019-09-10,2025-09-10,https://fonts.google.com/specimen/Jomolhari
+Josefin Sans,Sans Serif,Sans Serif,Display,clean modern minimal professional readable neutral geometric humanist grotesque headline hero decorative large-text attention versatile multi-weight flexible italic variable variable-font responsive variable-weight english western european extended-latin european vietnamese popular widely-used,100 | 100i | 200 | 200i | 300 | 300i | 400 | 400i | 500 | 500i | 600 | 600i | 700 | 700i,wght: -,latin | latin-ext | vietnamese,Santiago Orozco,76,918,No,2010-11-17,2025-09-04,https://fonts.google.com/specimen/Josefin+Sans
+Josefin Slab,Serif,Slab Serif,Display,elegant traditional classic refined literary editorial slab mechanical sturdy strong headline hero decorative large-text attention versatile multi-weight flexible italic variable variable-font responsive variable-weight english western european,100 | 100i | 200 | 200i | 300 | 300i | 400 | 400i | 500 | 500i | 600 | 600i | 700 | 700i,wght: -,latin,Santiago Orozco,319,1152,No,2010-11-17,2025-09-16,https://fonts.google.com/specimen/Josefin+Slab
+Jost,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque versatile multi-weight flexible italic variable variable-font responsive variable-weight russian cyrillic slavic english western european extended-latin european popular widely-used,100 | 100i | 200 | 200i | 300 | 300i | 400 | 400i | 500 | 500i | 600 | 600i | 700 | 700i | 800 | 800i | 900 | 900i,wght: -,cyrillic | latin | latin-ext,Owen Earl,60,743,No,2020-02-11,2025-09-10,https://fonts.google.com/specimen/Jost
+Joti One,Display,Serif,Display,bold decorative headline attention-grabbing creative expressive transitional oldstyle didone headline hero decorative large-text attention english western european extended-latin european,400,,latin | latin-ext,Eduardo Tunni,1394,1261,No,2012-10-31,2025-09-16,https://fonts.google.com/specimen/Joti+One
+Jua,Sans Serif,Sans Serif,Display,clean modern minimal professional readable neutral geometric humanist grotesque headline hero decorative large-text attention korean hangul english western european,400,,korean | latin,Woowahan Brothers,525,795,No,2018-02-24,2025-09-04,https://fonts.google.com/specimen/Jua
+Judson,Serif,Serif,,elegant traditional classic refined literary editorial transitional oldstyle didone italic english western european extended-latin european vietnamese,400 | 400i | 700,,latin | latin-ext | vietnamese,Daniel Johnson,572,899,No,2011-05-04,2025-09-11,https://fonts.google.com/specimen/Judson
+Julee,Handwriting,,Handwriting,personal casual friendly warm handwritten script organic  script cursive hand-drawn artistic informal english western european extended-latin european,400,,latin | latin-ext,Julián Tunni,934,1485,No,2011-09-07,2025-09-16,https://fonts.google.com/specimen/Julee
+Julius Sans One,Sans Serif,Sans Serif,Display,clean modern minimal professional readable neutral geometric humanist grotesque headline hero decorative large-text attention english western european extended-latin european,400,,latin | latin-ext,Luciano Vergara,491,1271,No,2012-10-05,2025-09-16,https://fonts.google.com/specimen/Julius+Sans+One
+Junge,Serif,Serif,Handwriting,elegant traditional classic refined literary editorial transitional oldstyle didone script cursive hand-drawn artistic informal english western european,400,,latin,Cyreal,1359,1923,No,2012-01-18,2025-09-11,https://fonts.google.com/specimen/Junge
+Jura,Sans Serif,Sans Serif,Display,clean modern minimal professional readable neutral geometric humanist grotesque headline hero decorative large-text attention variable variable-font responsive variable-weight russian cyrillic slavic cyrillic extended greek greek extended english western european extended-latin european vietnamese multilingual international,300 | 400 | 500 | 600 | 700,wght: -,cyrillic | cyrillic-ext | greek | greek-ext | kayah-li | latin | latin-ext | vietnamese,Daniel Johnson | Cyreal,387,2097,No,2011-05-18,2025-09-16,https://fonts.google.com/specimen/Jura
+Just Another Hand,Handwriting,,Handwriting,personal casual friendly warm handwritten script organic  script cursive hand-drawn artistic informal english western european extended-latin european,400,,latin | latin-ext,Astigmatic,546,1968,No,2010-12-20,2025-09-08,https://fonts.google.com/specimen/Just+Another+Hand
+Just Me Again Down Here,Handwriting,,Handwriting,personal casual friendly warm handwritten script organic  script cursive hand-drawn artistic informal english western european extended-latin european,400,,latin | latin-ext,Kimberly Geswein,963,426,No,2010-12-07,2025-09-04,https://fonts.google.com/specimen/Just+Me+Again+Down+Here
+K2D,Sans Serif,Sans Serif,Display,clean modern minimal professional readable neutral geometric humanist grotesque headline hero decorative large-text attention versatile multi-weight flexible italic english western european extended-latin european thai southeast-asia vietnamese,100 | 100i | 200 | 200i | 300 | 300i | 400 | 400i | 500 | 500i | 600 | 600i | 700 | 700i | 800 | 800i,,latin | latin-ext | thai | vietnamese,Cadson Demak,489,636,No,2018-09-10,2025-09-11,https://fonts.google.com/specimen/K2D
+Kablammo,Display,,Display,bold decorative headline attention-grabbing creative expressive  headline hero decorative large-text attention variable variable-font responsive russian cyrillic slavic cyrillic extended english western european extended-latin european vietnamese multilingual international,400,MORF: -,cyrillic | cyrillic-ext | emoji | latin | latin-ext | vietnamese,Vectro Type Foundry | Travis Kochel | Lizy Gershenzon | Daria Cohen | Ethan Cohen,1037,2070,No,2023-06-06,2025-09-11,https://fonts.google.com/specimen/Kablammo
+Kadwa,Serif,Serif,,elegant traditional classic refined literary editorial transitional oldstyle didone hindi devanagari indian english western european,400 | 700,,devanagari | latin,Sol Matas,749,220,No,2015-06-17,2025-09-10,https://fonts.google.com/specimen/Kadwa
+Kaisei Decol,Serif,Serif,,elegant traditional classic refined literary editorial transitional oldstyle didone russian cyrillic slavic japanese kanji hiragana katakana english western european extended-latin european,400 | 500 | 700,,cyrillic | japanese | latin | latin-ext,Font-Kai,504,1185,No,2021-05-21,2025-09-16,https://fonts.google.com/specimen/Kaisei+Decol
+Kaisei HarunoUmi,Serif,Serif,,elegant traditional classic refined literary editorial transitional oldstyle didone russian cyrillic slavic japanese kanji hiragana katakana english western european extended-latin european,400 | 500 | 700,,cyrillic | japanese | latin | latin-ext,Font-Kai,1326,379,No,2021-05-21,2025-09-16,https://fonts.google.com/specimen/Kaisei+HarunoUmi
+Kaisei Opti,Serif,Serif,,elegant traditional classic refined literary editorial transitional oldstyle didone russian cyrillic slavic japanese kanji hiragana katakana english western european extended-latin european,400 | 500 | 700,,cyrillic | japanese | latin | latin-ext,Font-Kai,852,819,No,2021-05-21,2025-09-11,https://fonts.google.com/specimen/Kaisei+Opti
+Kaisei Tokumin,Serif,Serif,,elegant traditional classic refined literary editorial transitional oldstyle didone russian cyrillic slavic japanese kanji hiragana katakana english western european extended-latin european,400 | 500 | 700 | 800,,cyrillic | japanese | latin | latin-ext,Font-Kai,1120,2222,No,2021-05-21,2025-09-04,https://fonts.google.com/specimen/Kaisei+Tokumin
+Kalam,Handwriting,,Handwriting,personal casual friendly warm handwritten script organic  script cursive hand-drawn artistic informal hindi devanagari indian english western european extended-latin european well-known common,300 | 400 | 700,,devanagari | latin | latin-ext,Indian Type Foundry,167,1250,No,2014-10-17,2025-09-11,https://fonts.google.com/specimen/Kalam
+Kalnia,Serif,Serif,Display,elegant traditional classic refined literary editorial transitional oldstyle didone headline hero decorative large-text attention versatile multi-weight flexible variable variable-font responsive variable-weight variable-width english western european extended-latin european,100 | 200 | 300 | 400 | 500 | 600 | 700,wdth: - | wght: -,latin | latin-ext | math,Frida Medrano,1002,1428,No,2023-12-05,2025-09-16,https://fonts.google.com/specimen/Kalnia
+Kalnia Glaze,Display,Serif,Display,bold decorative headline attention-grabbing creative expressive transitional oldstyle didone headline hero decorative large-text attention versatile multi-weight flexible variable variable-font responsive variable-weight variable-width english western european extended-latin european,100 | 200 | 300 | 400 | 500 | 600 | 700,wdth: - | wght: -,latin | latin-ext,Frida Medrano,1785,2188,No,2024-03-26,2025-09-10,https://fonts.google.com/specimen/Kalnia+Glaze
+Kameron,Serif,Slab Serif,,elegant traditional classic refined literary editorial slab mechanical sturdy strong variable variable-font responsive variable-weight english western european extended-latin european,400 | 500 | 600 | 700,wght: -,latin | latin-ext,Vernon Adams,633,1881,No,2011-06-08,2025-09-04,https://fonts.google.com/specimen/Kameron
+Kanchenjunga,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque english western european,400 | 500 | 600 | 700,,kirat-rai | latin,Becca Hirsbrunner Spalinger,1976,1418,No,2025-04-17,2025-04-23,https://fonts.google.com/specimen/Kanchenjunga
+Kanit,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque versatile multi-weight flexible italic english western european extended-latin european thai southeast-asia vietnamese top-popular trending most-used,100 | 100i | 200 | 200i | 300 | 300i | 400 | 400i | 500 | 500i | 600 | 600i | 700 | 700i | 800 | 800i | 900 | 900i,,latin | latin-ext | thai | vietnamese,Cadson Demak,41,1141,No,2015-12-07,2025-09-11,https://fonts.google.com/specimen/Kanit
+Kantumruy Pro,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque versatile multi-weight flexible italic variable variable-font responsive variable-weight khmer cambodian english western european extended-latin european,100 | 100i | 200 | 200i | 300 | 300i | 400 | 400i | 500 | 500i | 600 | 600i | 700 | 700i,wght: -,khmer | latin | latin-ext,Tep Sovichet | Wei Huang,738,857,No,2022-05-12,2025-09-04,https://fonts.google.com/specimen/Kantumruy+Pro
+Kapakana,Handwriting,,Display | Handwriting,personal casual friendly warm handwritten script organic  headline hero decorative large-text attention script cursive hand-drawn artistic informal variable variable-font responsive variable-weight japanese kanji hiragana katakana english western european extended-latin european,300 | 400,wght: -,japanese | latin | latin-ext,Kousuke Nagai,1275,863,No,2025-05-20,2025-09-11,https://fonts.google.com/specimen/Kapakana
+Karantina,Display,,Display,bold decorative headline attention-grabbing creative expressive  headline hero decorative large-text attention hebrew RTL israeli english western european extended-latin european,300 | 400 | 700,,hebrew | latin | latin-ext,Rony Koch,1231,1266,No,2021-03-11,2025-09-16,https://fonts.google.com/specimen/Karantina
+Karla,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque versatile multi-weight flexible italic variable variable-font responsive variable-weight english western european extended-latin european popular widely-used,200 | 200i | 300 | 300i | 400 | 400i | 500 | 500i | 600 | 600i | 700 | 700i | 800 | 800i,wght: -,latin | latin-ext,Jonny Pinhorn,59,789,No,2012-03-14,2025-09-11,https://fonts.google.com/specimen/Karla
+Karla Tamil Inclined,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque tamil indian,400 | 700,,tamil,Jonathan Pinhorn,1984,635,No,2024-10-28,2024-10-29,https://fonts.google.com/specimen/Karla+Tamil+Inclined
+Karla Tamil Upright,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque tamil indian,400 | 700,,tamil,Jonathan Pinhorn,1927,2178,No,2024-10-28,2024-10-29,https://fonts.google.com/specimen/Karla+Tamil+Upright
+Karma,Serif,Serif,,elegant traditional classic refined literary editorial transitional oldstyle didone hindi devanagari indian english western european extended-latin european,300 | 400 | 500 | 600 | 700,,devanagari | latin | latin-ext,Indian Type Foundry,580,1506,No,2014-06-25,2025-09-08,https://fonts.google.com/specimen/Karma
+Katibeh,Display,Serif,Display,bold decorative headline attention-grabbing creative expressive transitional oldstyle didone headline hero decorative large-text attention arabic RTL middle-east english western european extended-latin european,400,,arabic | latin | latin-ext,KB Studio,1208,1409,No,2016-06-15,2025-09-10,https://fonts.google.com/specimen/Katibeh
+Kaushan Script,Handwriting,,Display | Handwriting,personal casual friendly warm handwritten script organic  headline hero decorative large-text attention script cursive hand-drawn artistic informal english western european extended-latin european well-known common,400,,latin | latin-ext,Impallari Type,269,846,No,2012-01-25,2025-09-10,https://fonts.google.com/specimen/Kaushan+Script
+Kavivanar,Handwriting,,Handwriting | Display,personal casual friendly warm handwritten script organic  script cursive hand-drawn artistic informal headline hero decorative large-text attention english western european extended-latin european tamil indian,400,,latin | latin-ext | tamil,Tharique Azeez,1200,2030,No,2016-06-20,2025-09-08,https://fonts.google.com/specimen/Kavivanar
+Kavoon,Display,Serif,Display,bold decorative headline attention-grabbing creative expressive transitional oldstyle didone headline hero decorative large-text attention english western european extended-latin european,400,,latin | latin-ext,Viktoriya Grabowska,1140,1247,No,2013-01-23,2025-09-04,https://fonts.google.com/specimen/Kavoon
+Kay Pho Du,Serif,Slab Serif,,elegant traditional classic refined literary editorial slab mechanical sturdy strong english western european extended-latin european,400 | 500 | 600 | 700,,kayah-li | latin | latin-ext,SIL International,1971,1903,No,2023-10-23,2025-05-30,https://fonts.google.com/specimen/Kay+Pho+Du
+Kdam Thmor Pro,Sans Serif,Sans Serif,Display,clean modern minimal professional readable neutral geometric humanist grotesque headline hero decorative large-text attention khmer cambodian english western european extended-latin european,400,,khmer | latin | latin-ext,Tep Sovichet | Hak Longdey,1157,660,No,2022-05-11,2025-09-02,https://fonts.google.com/specimen/Kdam+Thmor+Pro
+Keania One,Display,Sans Serif,Display,bold decorative headline attention-grabbing creative expressive geometric humanist grotesque headline hero decorative large-text attention english western european extended-latin european,400,,latin | latin-ext,Julia Petretta,1281,1919,No,2012-10-31,2025-09-11,https://fonts.google.com/specimen/Keania+One
+Kedebideri,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque versatile multi-weight flexible english western european,400 | 500 | 600 | 700 | 800 | 900,,beria-erfe | latin,SIL International,1938,2160,No,2025-09-10,2026-01-29,https://fonts.google.com/specimen/Kedebideri
+Kelly Slab,Display,Sans Serif,Display,bold decorative headline attention-grabbing creative expressive geometric humanist grotesque headline hero decorative large-text attention russian cyrillic slavic english western european extended-latin european,400,,cyrillic | latin | latin-ext,Denis Masharov,800,840,No,2011-07-27,2025-06-02,https://fonts.google.com/specimen/Kelly+Slab
+Kenia,Display,Sans Serif,Display,bold decorative headline attention-grabbing creative expressive geometric humanist grotesque headline hero decorative large-text attention english western european,400,,latin,Julia Petretta,1211,1003,No,2010-12-15,2025-09-11,https://fonts.google.com/specimen/Kenia
+Khand,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque hindi devanagari indian english western european extended-latin european well-known common,300 | 400 | 500 | 600 | 700,,devanagari | latin | latin-ext,Indian Type Foundry,242,93,No,2014-07-14,2025-09-04,https://fonts.google.com/specimen/Khand
+Khmer,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque khmer cambodian,400,,khmer,Danh Hong,1195,2032,No,2011-03-02,2025-09-17,https://fonts.google.com/specimen/Khmer
+Khula,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque hindi devanagari indian english western european extended-latin european,300 | 400 | 600 | 700 | 800,,devanagari | latin | latin-ext,Erin McLaughlin,516,1748,No,2015-01-28,2025-09-08,https://fonts.google.com/specimen/Khula
+Kings,Handwriting,,Display | Handwriting,personal casual friendly warm handwritten script organic  headline hero decorative large-text attention script cursive hand-drawn artistic informal english western european extended-latin european vietnamese,400,,latin | latin-ext | vietnamese,Robert Leuschke,1643,502,No,2021-10-21,2025-09-11,https://fonts.google.com/specimen/Kings
+Kirang Haerang,Display,,Display,bold decorative headline attention-grabbing creative expressive  headline hero decorative large-text attention korean hangul english western european,400,,korean | latin,Woowahan Brothers,1605,2253,No,2018-02-24,2025-09-10,https://fonts.google.com/specimen/Kirang+Haerang
+Kite One,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque english western european extended-latin european,400,,latin | latin-ext,Eduardo Tunni,1406,1456,No,2012-10-26,2025-09-10,https://fonts.google.com/specimen/Kite+One
+Kiwi Maru,Serif,Serif,,elegant traditional classic refined literary editorial transitional oldstyle didone russian cyrillic slavic japanese kanji hiragana katakana english western european extended-latin european,300 | 400 | 500,,cyrillic | japanese | latin | latin-ext,Hiroki-Chan,596,1505,No,2020-12-14,2025-09-11,https://fonts.google.com/specimen/Kiwi+Maru
+Klee One,Handwriting,,Handwriting,personal casual friendly warm handwritten script organic  script cursive hand-drawn artistic informal russian cyrillic slavic greek extended japanese kanji hiragana katakana english western european extended-latin european,400 | 600,,cyrillic | greek-ext | japanese | latin | latin-ext,Fontworks Inc.,687,2023,No,2021-06-08,2025-09-08,https://fonts.google.com/specimen/Klee+One
+Knewave,Display,,Display,bold decorative headline attention-grabbing creative expressive  headline hero decorative large-text attention english western european extended-latin european,400,,latin | latin-ext,Tyler Finck,693,1617,No,2011-11-23,2025-09-16,https://fonts.google.com/specimen/Knewave
+KoHo,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque versatile multi-weight flexible italic english western european extended-latin european thai southeast-asia vietnamese,200 | 200i | 300 | 300i | 400 | 400i | 500 | 500i | 600 | 600i | 700 | 700i,,latin | latin-ext | thai | vietnamese,Cadson Demak,847,485,No,2018-09-10,2025-09-11,https://fonts.google.com/specimen/KoHo
+Kodchasan,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque versatile multi-weight flexible italic english western european extended-latin european thai southeast-asia vietnamese,200 | 200i | 300 | 300i | 400 | 400i | 500 | 500i | 600 | 600i | 700 | 700i,,latin | latin-ext | thai | vietnamese,Cadson Demak,907,800,No,2018-09-10,2025-09-08,https://fonts.google.com/specimen/Kodchasan
+Kode Mono,Monospace,Sans Serif,Monospace,code developer technical fixed-width terminal programming geometric humanist grotesque mono fixed-width tabular data code variable variable-font responsive variable-weight english western european extended-latin european,400 | 500 | 600 | 700,wght: -,latin | latin-ext,Isa Ozler,1317,2075,No,2024-02-14,2025-09-10,https://fonts.google.com/specimen/Kode+Mono
+Koh Santepheap,Serif,Serif,,elegant traditional classic refined literary editorial transitional oldstyle didone khmer cambodian english western european,100 | 300 | 400 | 700 | 900,,khmer | latin,Danh Hong,1483,1599,No,2021-06-10,2025-09-10,https://fonts.google.com/specimen/Koh+Santepheap
+Kolker Brush,Handwriting,,Display | Handwriting,personal casual friendly warm handwritten script organic  headline hero decorative large-text attention script cursive hand-drawn artistic informal english western european extended-latin european vietnamese,400,,latin | latin-ext | vietnamese,Robert Leuschke,1719,1914,No,2021-11-26,2025-09-16,https://fonts.google.com/specimen/Kolker+Brush
+Konkhmer Sleokchher,Display,,Display,bold decorative headline attention-grabbing creative expressive  headline hero decorative large-text attention khmer cambodian english western european extended-latin european,400,,khmer | latin | latin-ext,Suon May Sophanith,1526,424,No,2023-04-26,2025-09-02,https://fonts.google.com/specimen/Konkhmer+Sleokchher
+Kosugi,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque russian cyrillic slavic japanese kanji hiragana katakana english western european extended-latin european,400,,cyrillic | japanese | latin | latin-ext,MOTOYA,626,376,No,2016-01-21,2025-09-08,https://fonts.google.com/specimen/Kosugi
+Kosugi Maru,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque russian cyrillic slavic japanese kanji hiragana katakana english western european extended-latin european,400,,cyrillic | japanese | latin | latin-ext,MOTOYA,355,1539,No,2016-01-21,2025-09-08,https://fonts.google.com/specimen/Kosugi+Maru
+Kotta One,Serif,Serif,,elegant traditional classic refined literary editorial transitional oldstyle didone english western european extended-latin european,400,,latin | latin-ext,Ania Kruk,1431,1480,No,2012-01-25,2025-09-04,https://fonts.google.com/specimen/Kotta+One
+Koulen,Display,Sans Serif,Display,bold decorative headline attention-grabbing creative expressive geometric humanist grotesque headline hero decorative large-text attention khmer cambodian english western european,400,,khmer | latin,Danh Hong,649,823,No,2011-03-02,2025-09-16,https://fonts.google.com/specimen/Koulen
+Kranky,Display,Serif,Display,bold decorative headline attention-grabbing creative expressive transitional oldstyle didone headline hero decorative large-text attention english western european,400,,latin,Sideshow,990,1224,No,2011-01-06,2025-06-02,https://fonts.google.com/specimen/Kranky
+Kreon,Serif,Serif,,elegant traditional classic refined literary editorial transitional oldstyle didone variable variable-font responsive variable-weight english western european extended-latin european,300 | 400 | 500 | 600 | 700,wght: -,latin | latin-ext,Julia Petretta,545,1424,No,2011-02-02,2025-09-11,https://fonts.google.com/specimen/Kreon
+Kristi,Handwriting,,Display | Handwriting,personal casual friendly warm handwritten script organic  headline hero decorative large-text attention script cursive hand-drawn artistic informal english western european,400,,latin,Birgit Pulk,682,1474,No,2010-12-20,2025-09-10,https://fonts.google.com/specimen/Kristi
+Krona One,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque english western european extended-latin european,400,,latin | latin-ext,Yvonne Schüttler,610,1556,No,2012-02-22,2025-09-04,https://fonts.google.com/specimen/Krona+One
+Krub,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque versatile multi-weight flexible italic english western european extended-latin european thai southeast-asia vietnamese,200 | 200i | 300 | 300i | 400 | 400i | 500 | 500i | 600 | 600i | 700 | 700i,,latin | latin-ext | thai | vietnamese,Cadson Demak,337,446,No,2018-09-10,2025-09-16,https://fonts.google.com/specimen/Krub
+Kufam,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque versatile multi-weight flexible italic variable variable-font responsive variable-weight arabic RTL middle-east english western european extended-latin european vietnamese,400 | 400i | 500 | 500i | 600 | 600i | 700 | 700i | 800 | 800i | 900 | 900i,wght: -,arabic | latin | latin-ext | vietnamese,Original Type | Wael Morcos | Artur Schmal,601,2012,No,2020-07-14,2025-09-02,https://fonts.google.com/specimen/Kufam
+Kulim Park,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque italic english western european extended-latin european,200 | 200i | 300 | 300i | 400 | 400i | 600 | 600i | 700 | 700i,,latin | latin-ext,Dale Sattler,1279,901,No,2019-09-25,2025-09-11,https://fonts.google.com/specimen/Kulim+Park
+Kumar One,Display,Serif,Display,bold decorative headline attention-grabbing creative expressive transitional oldstyle didone headline hero decorative large-text attention gujarati indian english western european extended-latin european,400,,gujarati | latin | latin-ext,Indian Type Foundry,1410,369,No,2016-06-15,2025-09-08,https://fonts.google.com/specimen/Kumar+One
+Kumar One Outline,Display,,Display,bold decorative headline attention-grabbing creative expressive  headline hero decorative large-text attention gujarati indian english western european extended-latin european,400,,gujarati | latin | latin-ext,Indian Type Foundry,1606,1671,No,2016-06-15,2025-06-25,https://fonts.google.com/specimen/Kumar+One+Outline
+Kumbh Sans,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque versatile multi-weight flexible variable variable-font responsive variable-weight english western european extended-latin european well-known common,100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900,YOPQ: - | wght: -,latin | latin-ext | math | symbols,Saurabh Sharma,264,1605,No,2020-07-22,2025-09-16,https://fonts.google.com/specimen/Kumbh+Sans
+Kurale,Serif,Serif,,elegant traditional classic refined literary editorial transitional oldstyle didone russian cyrillic slavic cyrillic extended hindi devanagari indian english western european extended-latin european,400,,cyrillic | cyrillic-ext | devanagari | latin | latin-ext,Eduardo Tunni,879,2154,No,2015-05-14,2025-09-11,https://fonts.google.com/specimen/Kurale
+LINE Seed JP,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque russian cyrillic slavic greek extended japanese kanji hiragana katakana english western european extended-latin european,100 | 400 | 700 | 800,,cyrillic | greek-ext | japanese | latin | latin-ext,LY Corporation | Fontrix | Fontworks,315,2,No,2026-01-21,2026-01-22,https://fonts.google.com/specimen/LINE+Seed+JP
+LXGW Marker Gothic,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque chinese traditional russian cyrillic slavic cyrillic extended greek english western european extended-latin european vietnamese multilingual international,400,,chinese-traditional | cyrillic | cyrillic-ext | greek | latin | latin-ext | symbols2 | vietnamese,LXGW,1702,100,No,2025-06-11,2025-06-12,https://fonts.google.com/specimen/LXGW+Marker+Gothic
+LXGW WenKai Mono TC,Monospace,,Monospace,code developer technical fixed-width terminal programming  mono fixed-width tabular data code chinese traditional russian cyrillic slavic cyrillic extended greek greek extended english western european extended-latin european vietnamese multilingual international,300 | 400 | 700,,chinese-traditional | cyrillic | cyrillic-ext | greek | greek-ext | latin | latin-ext | lisu | vietnamese,LXGW,1597,2267,No,2024-05-23,2025-06-09,https://fonts.google.com/specimen/LXGW+WenKai+Mono+TC
+LXGW WenKai TC,Handwriting,,Handwriting,personal casual friendly warm handwritten script organic  script cursive hand-drawn artistic informal chinese traditional russian cyrillic slavic cyrillic extended greek greek extended english western european extended-latin european vietnamese multilingual international,300 | 400 | 700,,chinese-traditional | cyrillic | cyrillic-ext | greek | greek-ext | latin | latin-ext | lisu | vietnamese,LXGW,1411,2079,No,2024-05-23,2025-06-09,https://fonts.google.com/specimen/LXGW+WenKai+TC
+La Belle Aurore,Handwriting,,Handwriting | Display,personal casual friendly warm handwritten script organic  script cursive hand-drawn artistic informal headline hero decorative large-text attention english western european extended-latin european,400,,latin | latin-ext,Kimberly Geswein,515,977,No,2011-06-08,2025-09-04,https://fonts.google.com/specimen/La+Belle+Aurore
+Labrada,Serif,Serif,,elegant traditional classic refined literary editorial transitional oldstyle didone versatile multi-weight flexible italic variable variable-font responsive variable-weight english western european extended-latin european vietnamese,100 | 100i | 200 | 200i | 300 | 300i | 400 | 400i | 500 | 500i | 600 | 600i | 700 | 700i | 800 | 800i | 900 | 900i,wght: -,latin | latin-ext | vietnamese,Mercedes Jáuregui | Omnibus-Type,1707,650,No,2023-01-18,2025-09-02,https://fonts.google.com/specimen/Labrada
+Lacquer,Display,,Display,bold decorative headline attention-grabbing creative expressive  headline hero decorative large-text attention english western european,400,,latin,Niki Polyocan | Eli Block,927,1300,No,2019-07-03,2025-09-11,https://fonts.google.com/specimen/Lacquer
+Laila,Serif,Serif,Display,elegant traditional classic refined literary editorial transitional oldstyle didone headline hero decorative large-text attention hindi devanagari indian english western european extended-latin european,300 | 400 | 500 | 600 | 700,,devanagari | latin | latin-ext,Indian Type Foundry,604,821,No,2014-08-27,2025-06-25,https://fonts.google.com/specimen/Laila
+Lakki Reddy,Handwriting,Serif,Display,personal casual friendly warm handwritten script organic transitional oldstyle didone headline hero decorative large-text attention english western european telugu indian,400,,latin | telugu,Appaji Ambarisha Darbha,1561,1516,No,2015-01-12,2025-09-10,https://fonts.google.com/specimen/Lakki+Reddy
+Lalezar,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque arabic RTL middle-east english western european extended-latin european vietnamese,400,,arabic | latin | latin-ext | vietnamese,Borna Izadpanah,459,289,No,2016-06-15,2025-09-16,https://fonts.google.com/specimen/Lalezar
+Lancelot,Display,Serif,Display,bold decorative headline attention-grabbing creative expressive transitional oldstyle didone headline hero decorative large-text attention english western european extended-latin european,400,,latin | latin-ext,Marion Kadi,1508,1759,No,2011-11-02,2025-09-02,https://fonts.google.com/specimen/Lancelot
+Langar,Display,,Display,bold decorative headline attention-grabbing creative expressive  headline hero decorative large-text attention punjabi gurmukhi indian english western european extended-latin european,400,,gurmukhi | latin | latin-ext,Typeland | Alessia Mazzarella,1676,2269,No,2016-06-15,2025-09-08,https://fonts.google.com/specimen/Langar
+Lateef,Serif,Serif,,elegant traditional classic refined literary editorial transitional oldstyle didone versatile multi-weight flexible arabic RTL middle-east english western european extended-latin european,200 | 300 | 400 | 500 | 600 | 700 | 800,,arabic | latin | latin-ext,SIL International,361,43,No,2015-03-03,2025-09-16,https://fonts.google.com/specimen/Lateef
+Lato,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque italic english western european extended-latin european top-popular trending most-used,100 | 100i | 300 | 300i | 400 | 400i | 700 | 700i | 900 | 900i,,latin | latin-ext,Łukasz Dziedzic,10,1338,No,2010-12-15,2025-09-16,https://fonts.google.com/specimen/Lato
+Lavishly Yours,Handwriting,,Handwriting | Display,personal casual friendly warm handwritten script organic  script cursive hand-drawn artistic informal headline hero decorative large-text attention english western european extended-latin european vietnamese,400,,latin | latin-ext | vietnamese,Robert Leuschke,1133,328,No,2022-03-11,2025-09-04,https://fonts.google.com/specimen/Lavishly+Yours
+League Gothic,Sans Serif,Sans Serif,Display,clean modern minimal professional readable neutral geometric humanist grotesque headline hero decorative large-text attention variable variable-font responsive variable-width english western european extended-latin european vietnamese well-known common,400,wdth: -,latin | latin-ext | vietnamese,Tyler Finck | Caroline Hadilaksono | Micah Rich,295,1344,No,2021-12-09,2025-09-10,https://fonts.google.com/specimen/League+Gothic
+League Script,Handwriting,,Display | Handwriting,personal casual friendly warm handwritten script organic  headline hero decorative large-text attention script cursive hand-drawn artistic informal english western european,400,,latin,Haley Fiege,983,1598,No,2011-03-09,2025-09-10,https://fonts.google.com/specimen/League+Script
+League Spartan,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque versatile multi-weight flexible variable variable-font responsive variable-weight english western european extended-latin european vietnamese well-known common,100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900,wght: -,latin | latin-ext | vietnamese,Matt Bailey | Tyler Finck,186,1672,No,2021-12-17,2025-09-08,https://fonts.google.com/specimen/League+Spartan
+Leckerli One,Handwriting,,Display | Handwriting,personal casual friendly warm handwritten script organic  headline hero decorative large-text attention script cursive hand-drawn artistic informal english western european,400,,latin,Gesine Todt,507,1562,No,2011-07-20,2025-09-11,https://fonts.google.com/specimen/Leckerli+One
+Ledger,Serif,Serif,,elegant traditional classic refined literary editorial transitional oldstyle didone russian cyrillic slavic english western european extended-latin european,400,,cyrillic | latin | latin-ext,Denis Masharov,1112,600,No,2012-02-22,2025-09-10,https://fonts.google.com/specimen/Ledger
+Lekton,Monospace,,Monospace,code developer technical fixed-width terminal programming  mono fixed-width tabular data code italic english western european extended-latin european,400 | 400i | 700,,latin | latin-ext,ISIA Urbino,780,1156,No,2010-12-20,2025-09-10,https://fonts.google.com/specimen/Lekton
+Lemon,Display,Serif,Display,bold decorative headline attention-grabbing creative expressive transitional oldstyle didone headline hero decorative large-text attention english western european extended-latin european,400,,latin | latin-ext,Eduardo Tunni,1081,2200,No,2011-11-30,2025-09-04,https://fonts.google.com/specimen/Lemon
+Lemonada,Display,Sans Serif,Handwriting,bold decorative headline attention-grabbing creative expressive geometric humanist grotesque script cursive hand-drawn artistic informal variable variable-font responsive variable-weight arabic RTL middle-east english western european extended-latin european vietnamese,300 | 400 | 500 | 600 | 700,wght: -,arabic | latin | latin-ext | vietnamese,Mohamed Gaber | Eduardo Tunni,542,885,No,2016-06-15,2025-09-02,https://fonts.google.com/specimen/Lemonada
+Lexend,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque versatile multi-weight flexible variable variable-font responsive variable-weight english western european extended-latin european vietnamese popular widely-used,100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900,wght: -,latin | latin-ext | vietnamese,Bonnie Shaver-Troup | Thomas Jockin | Santiago Orozco | Héctor Gómez | Superunion,110,843,No,2021-03-08,2025-09-08,https://fonts.google.com/specimen/Lexend
+Lexend Deca,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque versatile multi-weight flexible variable variable-font responsive variable-weight english western european extended-latin european vietnamese popular widely-used,100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900,wght: -,latin | latin-ext | vietnamese,Bonnie Shaver-Troup | Thomas Jockin | Santiago Orozco | Héctor Gómez | Superunion,142,1479,No,2019-08-01,2025-09-16,https://fonts.google.com/specimen/Lexend+Deca
+Lexend Exa,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque versatile multi-weight flexible variable variable-font responsive variable-weight english western european extended-latin european vietnamese,100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900,wght: -,latin | latin-ext | vietnamese,Bonnie Shaver-Troup | Thomas Jockin | Santiago Orozco | Héctor Gómez | Superunion,615,1438,No,2019-08-01,2025-09-08,https://fonts.google.com/specimen/Lexend+Exa
+Lexend Giga,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque versatile multi-weight flexible variable variable-font responsive variable-weight english western european extended-latin european vietnamese,100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900,wght: -,latin | latin-ext | vietnamese,Bonnie Shaver-Troup | Thomas Jockin | Santiago Orozco | Héctor Gómez | Superunion,304,63,No,2019-08-01,2025-09-10,https://fonts.google.com/specimen/Lexend+Giga
+Lexend Mega,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque versatile multi-weight flexible variable variable-font responsive variable-weight english western european extended-latin european vietnamese,100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900,wght: -,latin | latin-ext | vietnamese,Bonnie Shaver-Troup | Thomas Jockin | Santiago Orozco | Héctor Gómez | Superunion,1327,2151,No,2019-08-01,2025-09-08,https://fonts.google.com/specimen/Lexend+Mega
+Lexend Peta,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque versatile multi-weight flexible variable variable-font responsive variable-weight english western european extended-latin european vietnamese,100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900,wght: -,latin | latin-ext | vietnamese,Bonnie Shaver-Troup | Thomas Jockin | Santiago Orozco | Héctor Gómez | Superunion,799,623,No,2019-08-01,2025-09-11,https://fonts.google.com/specimen/Lexend+Peta
+Lexend Tera,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque versatile multi-weight flexible variable variable-font responsive variable-weight english western european extended-latin european vietnamese,100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900,wght: -,latin | latin-ext | vietnamese,Bonnie Shaver-Troup | Thomas Jockin | Santiago Orozco | Héctor Gómez | Superunion,1468,1926,No,2019-08-01,2025-09-04,https://fonts.google.com/specimen/Lexend+Tera
+Lexend Zetta,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque versatile multi-weight flexible variable variable-font responsive variable-weight english western european extended-latin european vietnamese,100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900,wght: -,latin | latin-ext | vietnamese,Bonnie Shaver-Troup | Thomas Jockin | Santiago Orozco | Héctor Gómez | Superunion,902,243,No,2019-08-01,2025-09-11,https://fonts.google.com/specimen/Lexend+Zetta
+Libertinus Keyboard,Display,,Display,bold decorative headline attention-grabbing creative expressive  headline hero decorative large-text attention english western european extended-latin european,400,,latin | latin-ext,Philipp H. Poll,1996,672,No,2025-08-25,2025-08-26,https://fonts.google.com/specimen/Libertinus+Keyboard
+Libertinus Math,Display,,Display,bold decorative headline attention-grabbing creative expressive  headline hero decorative large-text attention russian cyrillic slavic cyrillic extended greek greek extended english western european extended-latin european vietnamese multilingual international,400,,cyrillic | cyrillic-ext | greek | greek-ext | latin | latin-ext | math | vietnamese,Philipp H. Poll,1626,1524,No,2025-06-23,2025-06-25,https://fonts.google.com/specimen/Libertinus+Math
+Libertinus Mono,Monospace,,Monospace,code developer technical fixed-width terminal programming  mono fixed-width tabular data code english western european extended-latin european,400,,latin | latin-ext,Philipp H. Poll,1747,1744,No,2025-06-23,2025-06-25,https://fonts.google.com/specimen/Libertinus+Mono
+Libertinus Sans,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque italic russian cyrillic slavic cyrillic extended greek greek extended english western european extended-latin european vietnamese multilingual international,400 | 400i | 700,,cyrillic | cyrillic-ext | greek | greek-ext | latin | latin-ext | vietnamese,Philipp H. Poll,1633,533,No,2025-07-28,2025-07-30,https://fonts.google.com/specimen/Libertinus+Sans
+Libertinus Serif,Serif,Serif,,elegant traditional classic refined literary editorial transitional oldstyle didone italic russian cyrillic slavic cyrillic extended greek greek extended hebrew RTL israeli english western european extended-latin european vietnamese multilingual international,400 | 400i | 600 | 600i | 700 | 700i,,cyrillic | cyrillic-ext | greek | greek-ext | hebrew | latin | latin-ext | vietnamese,Philipp H. Poll,1651,217,No,2025-07-28,2025-07-30,https://fonts.google.com/specimen/Libertinus+Serif
+Libertinus Serif Display,Display,,Display,bold decorative headline attention-grabbing creative expressive  headline hero decorative large-text attention russian cyrillic slavic cyrillic extended greek greek extended english western european extended-latin european vietnamese multilingual international,400,,cyrillic | cyrillic-ext | greek | greek-ext | latin | latin-ext | vietnamese,Philipp H. Poll,1887,2224,No,2025-08-25,2025-08-26,https://fonts.google.com/specimen/Libertinus+Serif+Display
+Libre Barcode 128,Display,,Symbols | Display,bold decorative headline attention-grabbing creative expressive  icon symbol emoji pictograph headline hero decorative large-text attention english western european,400,,latin,Lasse Fister,673,1534,No,2017-07-31,2025-09-17,https://fonts.google.com/specimen/Libre+Barcode+128
+Libre Barcode 128 Text,Display,,Symbols | Display,bold decorative headline attention-grabbing creative expressive  icon symbol emoji pictograph headline hero decorative large-text attention english western european,400,,latin,Lasse Fister,1051,1946,No,2017-07-31,2025-09-17,https://fonts.google.com/specimen/Libre+Barcode+128+Text
+Libre Barcode 39,Display,,Symbols | Display,bold decorative headline attention-grabbing creative expressive  icon symbol emoji pictograph headline hero decorative large-text attention english western european well-known common,400,,latin,Lasse Fister,270,392,No,2017-07-31,2025-09-17,https://fonts.google.com/specimen/Libre+Barcode+39
+Libre Barcode 39 Extended,Display,,Symbols | Display,bold decorative headline attention-grabbing creative expressive  icon symbol emoji pictograph headline hero decorative large-text attention english western european,400,,latin,Lasse Fister,1345,1712,No,2017-08-21,2025-09-17,https://fonts.google.com/specimen/Libre+Barcode+39+Extended
+Libre Barcode 39 Extended Text,Display,,Symbols | Display,bold decorative headline attention-grabbing creative expressive  icon symbol emoji pictograph headline hero decorative large-text attention english western european,400,,latin,Lasse Fister,892,1880,No,2017-08-21,2025-09-17,https://fonts.google.com/specimen/Libre+Barcode+39+Extended+Text
+Libre Barcode 39 Text,Display,,Symbols | Display,bold decorative headline attention-grabbing creative expressive  icon symbol emoji pictograph headline hero decorative large-text attention english western european,400,,latin,Lasse Fister,688,1663,No,2017-07-31,2025-09-17,https://fonts.google.com/specimen/Libre+Barcode+39+Text
+Libre Barcode EAN13 Text,Display,,Symbols | Display,bold decorative headline attention-grabbing creative expressive  icon symbol emoji pictograph headline hero decorative large-text attention english western european,400,,latin,Lasse Fister,1541,1594,No,2020-10-25,2025-09-17,https://fonts.google.com/specimen/Libre+Barcode+EAN13+Text
+Libre Baskerville,Serif,Serif,,elegant traditional classic refined literary editorial transitional oldstyle didone italic variable variable-font responsive variable-weight english western european extended-latin european popular widely-used,400 | 400i | 500 | 500i | 600 | 600i | 700 | 700i,wght: -,latin | latin-ext,Impallari Type,72,596,No,2012-11-30,2025-11-20,https://fonts.google.com/specimen/Libre+Baskerville
+Libre Bodoni,Serif,Serif,,elegant traditional classic refined literary editorial transitional oldstyle didone italic variable variable-font responsive variable-weight english western european extended-latin european vietnamese,400 | 400i | 500 | 500i | 600 | 600i | 700 | 700i,wght: -,latin | latin-ext | vietnamese,Pablo Impallari | Rodrigo Fuenzalida,353,1694,No,2022-04-13,2025-09-16,https://fonts.google.com/specimen/Libre+Bodoni
+Libre Caslon Display,Serif,Serif,Display,elegant traditional classic refined literary editorial transitional oldstyle didone headline hero decorative large-text attention english western european extended-latin european,400,,latin | latin-ext,Impallari Type,640,112,No,2017-11-29,2025-09-16,https://fonts.google.com/specimen/Libre+Caslon+Display
+Libre Caslon Text,Serif,Serif,,elegant traditional classic refined literary editorial transitional oldstyle didone italic english western european extended-latin european well-known common,400 | 400i | 700,,latin | latin-ext,Impallari Type,257,1420,No,2013-03-14,2025-05-30,https://fonts.google.com/specimen/Libre+Caslon+Text
+Libre Franklin,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque versatile multi-weight flexible italic variable variable-font responsive variable-weight russian cyrillic slavic cyrillic extended english western european extended-latin european vietnamese popular widely-used,100 | 100i | 200 | 200i | 300 | 300i | 400 | 400i | 500 | 500i | 600 | 600i | 700 | 700i | 800 | 800i | 900 | 900i,wght: -,cyrillic | cyrillic-ext | latin | latin-ext | vietnamese,Impallari Type,82,876,No,2016-06-15,2025-09-08,https://fonts.google.com/specimen/Libre+Franklin
+Licorice,Handwriting,,Display | Handwriting,personal casual friendly warm handwritten script organic  headline hero decorative large-text attention script cursive hand-drawn artistic informal english western european extended-latin european vietnamese,400,,latin | latin-ext | vietnamese,Robert Leuschke,1021,2286,No,2021-11-18,2025-09-11,https://fonts.google.com/specimen/Licorice
+Life Savers,Display,Serif,Display,bold decorative headline attention-grabbing creative expressive transitional oldstyle didone headline hero decorative large-text attention english western european extended-latin european,400 | 700 | 800,,latin | latin-ext,Impallari Type,1024,394,No,2012-08-13,2025-09-08,https://fonts.google.com/specimen/Life+Savers
+Lilex,Monospace,Sans Serif,Monospace,code developer technical fixed-width terminal programming geometric humanist grotesque mono fixed-width tabular data code versatile multi-weight flexible italic variable variable-font responsive variable-weight russian cyrillic slavic cyrillic extended greek english western european extended-latin european vietnamese multilingual international,100 | 100i | 200 | 200i | 300 | 300i | 400 | 400i | 500 | 500i | 600 | 600i | 700 | 700i,wght: -,cyrillic | cyrillic-ext | greek | latin | latin-ext | symbols2 | vietnamese,Mike Abbink | Paul van der Laan | Pieter van Rosmalen | Mikhael Khrustik,1787,1967,No,2025-12-08,2025-12-10,https://fonts.google.com/specimen/Lilex
+Lilita One,Display,Sans Serif,Display,bold decorative headline attention-grabbing creative expressive geometric humanist grotesque headline hero decorative large-text attention english western european extended-latin european well-known common,400,,latin | latin-ext,Juan Montoreano,155,1390,No,2012-01-11,2025-09-10,https://fonts.google.com/specimen/Lilita+One
+Lily Script One,Display,,Display,bold decorative headline attention-grabbing creative expressive  headline hero decorative large-text attention english western european extended-latin european,400,,latin | latin-ext,Julia Petretta,970,537,No,2013-06-05,2025-09-08,https://fonts.google.com/specimen/Lily+Script+One
+Limelight,Display,Sans Serif,Display,bold decorative headline attention-grabbing creative expressive geometric humanist grotesque headline hero decorative large-text attention english western european extended-latin european,400,,latin | latin-ext,Nicole Fally | Sorkin Type,543,229,No,2011-05-25,2025-09-16,https://fonts.google.com/specimen/Limelight
+Linden Hill,Serif,Serif,Display,elegant traditional classic refined literary editorial transitional oldstyle didone headline hero decorative large-text attention italic english western european extended-latin european,400 | 400i,,latin | latin-ext,Barry Schwartz,1472,1734,No,2011-10-19,2025-09-10,https://fonts.google.com/specimen/Linden+Hill
+Linefont,Display,,Symbols | Display,bold decorative headline attention-grabbing creative expressive  icon symbol emoji pictograph headline hero decorative large-text attention versatile multi-weight flexible variable variable-font responsive variable-weight variable-width,100 | 1000 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900,wdth: - | wght: -,,Dmitry Ivanov,1826,1242,No,2023-09-26,2025-09-17,https://fonts.google.com/specimen/Linefont
+Lisu Bosa,Serif,Serif,,elegant traditional classic refined literary editorial transitional oldstyle didone versatile multi-weight flexible italic english western european extended-latin european,200 | 200i | 300 | 300i | 400 | 400i | 500 | 500i | 600 | 600i | 700 | 700i | 800 | 800i | 900 | 900i,,latin | latin-ext | lisu,SIL International,1867,1962,No,2023-07-20,2025-05-30,https://fonts.google.com/specimen/Lisu+Bosa
+Liter,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque russian cyrillic slavic english western european extended-latin european,400,,cyrillic | latin | latin-ext,Anton Skugarov | Alexandr Ivanin,1421,565,No,2025-01-08,2025-06-25,https://fonts.google.com/specimen/Liter
+Literata,Serif,Serif,,elegant traditional classic refined literary editorial transitional oldstyle didone versatile multi-weight flexible italic variable variable-font responsive variable-weight russian cyrillic slavic cyrillic extended greek greek extended english western european extended-latin european vietnamese multilingual international well-known common,200 | 200i | 300 | 300i | 400 | 400i | 500 | 500i | 600 | 600i | 700 | 700i | 800 | 800i | 900 | 900i,opsz: - | wght: -,cyrillic | cyrillic-ext | greek | greek-ext | latin | latin-ext | vietnamese,TypeTogether,265,1649,No,2018-12-06,2025-09-11,https://fonts.google.com/specimen/Literata
+Liu Jian Mao Cao,Handwriting,,Handwriting | Display,personal casual friendly warm handwritten script organic  script cursive hand-drawn artistic informal headline hero decorative large-text attention chinese simplified mandarin english western european,400,,chinese-simplified | latin,Liu Zhengjiang | Kimberly Geswein | ZhongQi,1293,682,No,2019-03-17,2025-09-04,https://fonts.google.com/specimen/Liu+Jian+Mao+Cao
+Livvic,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque versatile multi-weight flexible italic english western european extended-latin european vietnamese,100 | 100i | 200 | 200i | 300 | 300i | 400 | 400i | 500 | 500i | 600 | 600i | 700 | 700i | 900 | 900i,,latin | latin-ext | vietnamese,LV= | Jacques Le Bailly,556,1006,No,2019-06-21,2025-09-16,https://fonts.google.com/specimen/Livvic
+Lobster,Display,Sans Serif,Display,bold decorative headline attention-grabbing creative expressive geometric humanist grotesque headline hero decorative large-text attention russian cyrillic slavic cyrillic extended english western european extended-latin european vietnamese popular widely-used,400,,cyrillic | cyrillic-ext | latin | latin-ext | vietnamese,Impallari Type,115,1303,No,2010-05-17,2025-09-08,https://fonts.google.com/specimen/Lobster
+Lobster Two,Display,Sans Serif,Display,bold decorative headline attention-grabbing creative expressive geometric humanist grotesque headline hero decorative large-text attention italic english western european popular widely-used,400 | 400i | 700 | 700i,,latin,Impallari Type,51,90,No,2011-06-21,2025-09-11,https://fonts.google.com/specimen/Lobster+Two
+Londrina Outline,Display,Sans Serif,Display,bold decorative headline attention-grabbing creative expressive geometric humanist grotesque headline hero decorative large-text attention english western european,400,,latin,Marcelo Magalhães,1323,1724,No,2012-03-14,2025-09-08,https://fonts.google.com/specimen/Londrina+Outline
+Londrina Shadow,Display,Sans Serif,Display,bold decorative headline attention-grabbing creative expressive geometric humanist grotesque headline hero decorative large-text attention english western european,400,,latin,Marcelo Magalhães,1462,2048,No,2012-03-14,2025-09-16,https://fonts.google.com/specimen/Londrina+Shadow
+Londrina Sketch,Display,Sans Serif,Display,bold decorative headline attention-grabbing creative expressive geometric humanist grotesque headline hero decorative large-text attention english western european,400,,latin,Marcelo Magalhães,1459,143,No,2012-03-14,2025-09-08,https://fonts.google.com/specimen/Londrina+Sketch
+Londrina Solid,Display,Sans Serif,Display,bold decorative headline attention-grabbing creative expressive geometric humanist grotesque headline hero decorative large-text attention english western european,100 | 300 | 400 | 900,,latin,Marcelo Magalhães,532,1982,No,2012-03-14,2025-09-16,https://fonts.google.com/specimen/Londrina+Solid
+Long Cang,Handwriting,,Handwriting,personal casual friendly warm handwritten script organic  script cursive hand-drawn artistic informal chinese simplified mandarin english western european,400,,chinese-simplified | latin,Chen Xiaomin,1187,275,No,2019-03-17,2025-09-08,https://fonts.google.com/specimen/Long+Cang
+Lora,Serif,Serif,,elegant traditional classic refined literary editorial transitional oldstyle didone italic variable variable-font responsive variable-weight russian cyrillic slavic cyrillic extended english western european extended-latin european vietnamese multilingual international top-popular trending most-used,400 | 400i | 500 | 500i | 600 | 600i | 700 | 700i,wght: -,cyrillic | cyrillic-ext | latin | latin-ext | math | symbols | vietnamese,Cyreal,39,1592,No,2011-07-06,2025-09-11,https://fonts.google.com/specimen/Lora
+Love Light,Handwriting,,Handwriting | Display,personal casual friendly warm handwritten script organic  script cursive hand-drawn artistic informal headline hero decorative large-text attention english western european extended-latin european vietnamese,400,,latin | latin-ext | vietnamese,Robert Leuschke,1638,1841,No,2021-12-02,2025-09-04,https://fonts.google.com/specimen/Love+Light
+Love Ya Like A Sister,Display,,Handwriting | Display,bold decorative headline attention-grabbing creative expressive  script cursive hand-drawn artistic informal headline hero decorative large-text attention english western european extended-latin european,400,,latin | latin-ext,Kimberly Geswein,747,1782,No,2011-07-06,2025-09-04,https://fonts.google.com/specimen/Love+Ya+Like+A+Sister
+Loved by the King,Handwriting,,Handwriting | Display,personal casual friendly warm handwritten script organic  script cursive hand-drawn artistic informal headline hero decorative large-text attention english western european extended-latin european,400,,latin | latin-ext,Kimberly Geswein,1087,2173,No,2011-07-06,2025-09-04,https://fonts.google.com/specimen/Loved+by+the+King
+Lovers Quarrel,Handwriting,,Handwriting | Display,personal casual friendly warm handwritten script organic  script cursive hand-drawn artistic informal headline hero decorative large-text attention english western european extended-latin european vietnamese,400,,latin | latin-ext | vietnamese,Robert Leuschke,1292,2248,No,2012-03-29,2025-09-08,https://fonts.google.com/specimen/Lovers+Quarrel
+Luckiest Guy,Display,,Handwriting | Display,bold decorative headline attention-grabbing creative expressive  script cursive hand-drawn artistic informal headline hero decorative large-text attention english western european extended-latin european well-known common,400,,latin | latin-ext,Astigmatic,195,612,No,2011-01-06,2025-09-08,https://fonts.google.com/specimen/Luckiest+Guy
+Lugrasimo,Handwriting,Serif,Handwriting,personal casual friendly warm handwritten script organic transitional oldstyle didone script cursive hand-drawn artistic informal english western european extended-latin european,400,,latin | latin-ext,The DocRepair Project | Astigmatic,1384,1950,No,2023-04-12,2025-06-02,https://fonts.google.com/specimen/Lugrasimo
+Lumanosimo,Handwriting,Serif,Handwriting,personal casual friendly warm handwritten script organic transitional oldstyle didone script cursive hand-drawn artistic informal english western european extended-latin european,400,,latin | latin-ext,The DocRepair Project | Eduardo Tunni,1017,995,No,2023-04-12,2025-06-02,https://fonts.google.com/specimen/Lumanosimo
+Lunasima,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque russian cyrillic slavic cyrillic extended greek greek extended hebrew RTL israeli english western european extended-latin european vietnamese multilingual international,400 | 700,,cyrillic | cyrillic-ext | greek | greek-ext | hebrew | latin | latin-ext | vietnamese,The DocRepair Project | Google,1659,1707,No,2023-07-10,2025-05-30,https://fonts.google.com/specimen/Lunasima
+Lusitana,Serif,Serif,,elegant traditional classic refined literary editorial transitional oldstyle didone english western european,400 | 700,,latin,Ana Paula Megda,357,441,No,2012-01-11,2025-09-08,https://fonts.google.com/specimen/Lusitana
+Lustria,Serif,Serif,,elegant traditional classic refined literary editorial transitional oldstyle didone english western european,400,,latin,MADType,416,1736,No,2012-01-18,2025-09-11,https://fonts.google.com/specimen/Lustria
+Luxurious Roman,Display,Serif,Display,bold decorative headline attention-grabbing creative expressive transitional oldstyle didone headline hero decorative large-text attention english western european extended-latin european vietnamese,400,,latin | latin-ext | vietnamese,Robert Leuschke,1502,1855,No,2021-11-18,2025-09-08,https://fonts.google.com/specimen/Luxurious+Roman
+Luxurious Script,Handwriting,,Handwriting | Display,personal casual friendly warm handwritten script organic  script cursive hand-drawn artistic informal headline hero decorative large-text attention english western european extended-latin european vietnamese,400,,latin | latin-ext | vietnamese,Robert Leuschke,1335,2096,No,2021-11-02,2025-09-08,https://fonts.google.com/specimen/Luxurious+Script
+M PLUS 1,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque versatile multi-weight flexible variable variable-font responsive variable-weight japanese kanji hiragana katakana english western european extended-latin european vietnamese,100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900,wght: -,japanese | latin | latin-ext | vietnamese,Coji Morishita,372,1248,No,2021-08-25,2025-09-10,https://fonts.google.com/specimen/M+PLUS+1
+M PLUS 1 Code,Monospace,,Monospace,code developer technical fixed-width terminal programming  mono fixed-width tabular data code versatile multi-weight flexible variable variable-font responsive variable-weight japanese kanji hiragana katakana english western european extended-latin european vietnamese,100 | 200 | 300 | 400 | 500 | 600 | 700,wght: -,japanese | latin | latin-ext | vietnamese,Coji Morishita,390,19,No,2021-09-21,2025-09-04,https://fonts.google.com/specimen/M+PLUS+1+Code
+M PLUS 1p,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque versatile multi-weight flexible russian cyrillic slavic cyrillic extended greek greek extended hebrew RTL israeli japanese kanji hiragana katakana english western european extended-latin european vietnamese multilingual international popular widely-used,100 | 300 | 400 | 500 | 700 | 800 | 900,,cyrillic | cyrillic-ext | greek | greek-ext | hebrew | japanese | latin | latin-ext | vietnamese,Coji Morishita | M+ Fonts Project,148,346,No,2017-06-12,2026-01-06,https://fonts.google.com/specimen/M+PLUS+1p
+M PLUS 2,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque versatile multi-weight flexible variable variable-font responsive variable-weight japanese kanji hiragana katakana english western european extended-latin european vietnamese,100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900,wght: -,japanese | latin | latin-ext | vietnamese,Coji Morishita,551,605,No,2021-08-25,2025-09-08,https://fonts.google.com/specimen/M+PLUS+2
+M PLUS Code Latin,Sans Serif,Sans Serif,Monospace,clean modern minimal professional readable neutral geometric humanist grotesque mono fixed-width tabular data code versatile multi-weight flexible variable variable-font responsive variable-weight variable-width english western european extended-latin european vietnamese,100 | 200 | 300 | 400 | 500 | 600 | 700,wdth: - | wght: -,latin | latin-ext | vietnamese,Coji Morishita,1683,64,No,2021-09-21,2025-09-16,https://fonts.google.com/specimen/M+PLUS+Code+Latin
+M PLUS Rounded 1c,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque versatile multi-weight flexible russian cyrillic slavic cyrillic extended greek greek extended hebrew RTL israeli japanese kanji hiragana katakana english western european extended-latin european vietnamese multilingual international popular widely-used,100 | 300 | 400 | 500 | 700 | 800 | 900,,cyrillic | cyrillic-ext | greek | greek-ext | hebrew | japanese | latin | latin-ext | vietnamese,Coji Morishita | M+ Fonts Project,116,1620,No,2018-05-17,2026-01-06,https://fonts.google.com/specimen/M+PLUS+Rounded+1c
+Ma Shan Zheng,Handwriting,,Handwriting,personal casual friendly warm handwritten script organic  script cursive hand-drawn artistic informal chinese simplified mandarin english western european,400,,chinese-simplified | latin,Ma ShanZheng,609,457,No,2019-03-17,2026-02-17,https://fonts.google.com/specimen/Ma+Shan+Zheng
+Macondo,Display,,Display | Handwriting,bold decorative headline attention-grabbing creative expressive  headline hero decorative large-text attention script cursive hand-drawn artistic informal english western european,400,,latin,John Vargas Beltrán,368,1585,No,2012-01-18,2025-09-11,https://fonts.google.com/specimen/Macondo
+Macondo Swash Caps,Display,,Handwriting | Display,bold decorative headline attention-grabbing creative expressive  script cursive hand-drawn artistic informal headline hero decorative large-text attention english western european,400,,latin,John Vargas Beltrán,1198,1676,No,2012-01-18,2025-09-08,https://fonts.google.com/specimen/Macondo+Swash+Caps
+Mada,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque versatile multi-weight flexible variable variable-font responsive variable-weight arabic RTL middle-east english western european extended-latin european,200 | 300 | 400 | 500 | 600 | 700 | 800 | 900,wght: -,arabic | latin | latin-ext,Khaled Hosny | Paul D. Hunt,432,1673,No,2017-07-26,2025-09-04,https://fonts.google.com/specimen/Mada
+Madimi One,Sans Serif,Sans Serif,Display,clean modern minimal professional readable neutral geometric humanist grotesque headline hero decorative large-text attention english western european extended-latin european,400,,latin | latin-ext | math | symbols,Taurai Valerie Mtake | Mirko Velimirović,992,828,No,2024-02-26,2025-05-30,https://fonts.google.com/specimen/Madimi+One
+Magra,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque english western european extended-latin european,400 | 700,,latin | latin-ext,FontFuror,851,1814,No,2012-01-11,2025-09-08,https://fonts.google.com/specimen/Magra
+Maiden Orange,Serif,Slab Serif,Display,elegant traditional classic refined literary editorial slab mechanical sturdy strong headline hero decorative large-text attention english western european extended-latin european,400,,latin | latin-ext,Astigmatic,1125,997,No,2010-12-20,2025-09-08,https://fonts.google.com/specimen/Maiden+Orange
+Maitree,Serif,Serif,,elegant traditional classic refined literary editorial transitional oldstyle didone versatile multi-weight flexible english western european extended-latin european thai southeast-asia vietnamese,200 | 300 | 400 | 500 | 600 | 700,,latin | latin-ext | thai | vietnamese,Cadson Demak,726,531,No,2016-06-15,2025-09-11,https://fonts.google.com/specimen/Maitree
+Major Mono Display,Monospace,Sans Serif,Monospace | Display,code developer technical fixed-width terminal programming geometric humanist grotesque mono fixed-width tabular data code headline hero decorative large-text attention english western european extended-latin european vietnamese,400,,latin | latin-ext | vietnamese,Emre Parlak,612,544,No,2018-12-11,2025-09-02,https://fonts.google.com/specimen/Major+Mono+Display
+Mako,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque english western european extended-latin european,400,,latin | latin-ext,Vernon Adams,975,930,No,2011-05-11,2025-05-30,https://fonts.google.com/specimen/Mako
+Mali,Handwriting,,Handwriting,personal casual friendly warm handwritten script organic  script cursive hand-drawn artistic informal versatile multi-weight flexible italic english western european extended-latin european thai southeast-asia vietnamese,200 | 200i | 300 | 300i | 400 | 400i | 500 | 500i | 600 | 600i | 700 | 700i,,latin | latin-ext | thai | vietnamese,Cadson Demak,573,1465,No,2018-09-10,2025-09-08,https://fonts.google.com/specimen/Mali
+Mallanna,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque english western european telugu indian,400,,latin | telugu,Purushoth Kumar Guttula,810,368,No,2014-12-10,2025-09-10,https://fonts.google.com/specimen/Mallanna
+Maname,Serif,Serif,,elegant traditional classic refined literary editorial transitional oldstyle didone english western european extended-latin european sinhala sri-lankan vietnamese,400,,latin | latin-ext | sinhala | vietnamese,Pathum Egodawatta | Mooniak,1897,508,No,2024-07-04,2025-05-30,https://fonts.google.com/specimen/Maname
+Mandali,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque english western european telugu indian,400,,latin | telugu,Purushoth Kumar Guttula,583,569,No,2014-12-10,2025-09-10,https://fonts.google.com/specimen/Mandali
+Manjari,Sans Serif,Sans Serif,Display,clean modern minimal professional readable neutral geometric humanist grotesque headline hero decorative large-text attention english western european extended-latin european malayalam indian,100 | 400 | 700,,latin | latin-ext | malayalam,Santhosh Thottingal,845,1490,No,2018-11-21,2025-09-11,https://fonts.google.com/specimen/Manjari
+Manrope,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque versatile multi-weight flexible variable variable-font responsive variable-weight russian cyrillic slavic cyrillic extended greek english western european extended-latin european vietnamese multilingual international top-popular trending most-used,200 | 300 | 400 | 500 | 600 | 700 | 800,wght: -,cyrillic | cyrillic-ext | greek | latin | latin-ext | vietnamese,Mikhail Sharanda,38,871,No,2019-10-02,2025-09-04,https://fonts.google.com/specimen/Manrope
+Mansalva,Handwriting,Sans Serif,Display,personal casual friendly warm handwritten script organic geometric humanist grotesque headline hero decorative large-text attention greek english western european extended-latin european vietnamese,400,,greek | latin | latin-ext | vietnamese,Carolina Short,880,1647,No,2019-08-29,2025-09-16,https://fonts.google.com/specimen/Mansalva
+Manuale,Serif,Serif,,elegant traditional classic refined literary editorial transitional oldstyle didone versatile multi-weight flexible italic variable variable-font responsive variable-weight english western european extended-latin european vietnamese,300 | 300i | 400 | 400i | 500 | 500i | 600 | 600i | 700 | 700i | 800 | 800i,wght: -,latin | latin-ext | vietnamese,Omnibus-Type,1129,104,No,2017-07-31,2025-09-10,https://fonts.google.com/specimen/Manuale
+Manufacturing Consent,Display,,Display,bold decorative headline attention-grabbing creative expressive  headline hero decorative large-text attention english western european extended-latin european,400,,latin | latin-ext,Fredrick Brennan,1554,1575,No,2025-06-23,2025-06-25,https://fonts.google.com/specimen/Manufacturing+Consent
+Marcellus,Serif,Serif,,elegant traditional classic refined literary editorial transitional oldstyle didone english western european extended-latin european well-known common,400,,latin | latin-ext,Astigmatic,176,1596,No,2012-05-09,2025-09-11,https://fonts.google.com/specimen/Marcellus
+Marcellus SC,Serif,Serif,,elegant traditional classic refined literary editorial transitional oldstyle didone english western european extended-latin european,400,,latin | latin-ext,Astigmatic,587,1768,No,2012-05-09,2025-09-02,https://fonts.google.com/specimen/Marcellus+SC
+Marck Script,Handwriting,,Display | Handwriting,personal casual friendly warm handwritten script organic  headline hero decorative large-text attention script cursive hand-drawn artistic informal russian cyrillic slavic english western european extended-latin european,400,,cyrillic | latin | latin-ext,Denis Masharov,464,872,No,2011-10-12,2025-09-10,https://fonts.google.com/specimen/Marck+Script
+Margarine,Display,Sans Serif,Display,bold decorative headline attention-grabbing creative expressive geometric humanist grotesque headline hero decorative large-text attention english western european extended-latin european,400,,latin | latin-ext,Astigmatic,1303,1381,No,2012-11-16,2025-09-16,https://fonts.google.com/specimen/Margarine
+Marhey,Display,Sans Serif,Display,bold decorative headline attention-grabbing creative expressive geometric humanist grotesque headline hero decorative large-text attention variable variable-font responsive variable-weight arabic RTL middle-east english western european extended-latin european,300 | 400 | 500 | 600 | 700,wght: -,arabic | latin | latin-ext,Nur Syamsi | Bustanul Arifin,1347,1321,No,2022-10-06,2025-09-08,https://fonts.google.com/specimen/Marhey
+Markazi Text,Serif,Serif,,elegant traditional classic refined literary editorial transitional oldstyle didone variable variable-font responsive variable-weight arabic RTL middle-east english western european extended-latin european vietnamese,400 | 500 | 600 | 700,wght: -,arabic | latin | latin-ext | vietnamese,Borna Izadpanah | Florian Runge | Fiona Ross,759,1227,No,2018-06-05,2025-09-04,https://fonts.google.com/specimen/Markazi+Text
+Marko One,Serif,Serif,,elegant traditional classic refined literary editorial transitional oldstyle didone english western european,400,,latin,Cyreal,1478,1687,No,2011-12-13,2025-09-16,https://fonts.google.com/specimen/Marko+One
+Marmelad,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque russian cyrillic slavic cyrillic extended english western european extended-latin european vietnamese,400,,cyrillic | cyrillic-ext | latin | latin-ext | vietnamese,Cyreal | Manvel Shmavonyan,744,984,No,2011-12-07,2025-09-11,https://fonts.google.com/specimen/Marmelad
+Martel,Serif,Serif,,elegant traditional classic refined literary editorial transitional oldstyle didone versatile multi-weight flexible hindi devanagari indian english western european extended-latin european well-known common,200 | 300 | 400 | 600 | 700 | 800 | 900,,devanagari | latin | latin-ext,Dan Reynolds,284,1930,No,2015-04-20,2025-09-04,https://fonts.google.com/specimen/Martel
+Martel Sans,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque versatile multi-weight flexible hindi devanagari indian english western european extended-latin european,200 | 300 | 400 | 600 | 700 | 800 | 900,,devanagari | latin | latin-ext,Dan Reynolds | Mathieu Réguer,482,1405,No,2015-03-04,2025-09-04,https://fonts.google.com/specimen/Martel+Sans
+Martian Mono,Monospace,,Monospace,code developer technical fixed-width terminal programming  mono fixed-width tabular data code versatile multi-weight flexible variable variable-font responsive variable-weight variable-width russian cyrillic slavic cyrillic extended english western european extended-latin european,100 | 200 | 300 | 400 | 500 | 600 | 700 | 800,wdth: - | wght: -,cyrillic | cyrillic-ext | latin | latin-ext,Roman Shamin | Evil Martians,1011,1508,No,2022-11-25,2025-09-16,https://fonts.google.com/specimen/Martian+Mono
+Marvel,Sans Serif,Sans Serif,Display,clean modern minimal professional readable neutral geometric humanist grotesque headline hero decorative large-text attention italic english western european,400 | 400i | 700 | 700i,,latin,Carolina Trebol,795,599,No,2011-08-03,2025-06-02,https://fonts.google.com/specimen/Marvel
+Matangi,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque versatile multi-weight flexible variable variable-font responsive variable-weight hindi devanagari indian english western european extended-latin european,300 | 400 | 500 | 600 | 700 | 800 | 900,wght: -,devanagari | latin | latin-ext,The Graphic Ant,1899,1791,No,2025-04-28,2025-08-26,https://fonts.google.com/specimen/Matangi
+Mate,Serif,Serif,Display,elegant traditional classic refined literary editorial transitional oldstyle didone headline hero decorative large-text attention italic english western european extended-latin european,400 | 400i,,latin | latin-ext,Eduardo Tunni,653,1462,No,2011-11-02,2025-09-10,https://fonts.google.com/specimen/Mate
+Mate SC,Serif,Serif,,elegant traditional classic refined literary editorial transitional oldstyle didone english western european extended-latin european,400,,latin | latin-ext,Eduardo Tunni,1260,575,No,2011-11-02,2025-09-04,https://fonts.google.com/specimen/Mate+SC
+Matemasie,Sans Serif,Sans Serif,Display,clean modern minimal professional readable neutral geometric humanist grotesque headline hero decorative large-text attention english western european extended-latin european,400,,latin | latin-ext,Adam Yeo,1663,562,No,2024-08-06,2025-05-30,https://fonts.google.com/specimen/Matemasie
+Maven Pro,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque versatile multi-weight flexible variable variable-font responsive variable-weight english western european extended-latin european vietnamese well-known common,400 | 500 | 600 | 700 | 800 | 900,wght: -,latin | latin-ext | vietnamese,Joe Prince,160,865,No,2011-05-25,2025-09-02,https://fonts.google.com/specimen/Maven+Pro
+McLaren,Display,Sans Serif,Display,bold decorative headline attention-grabbing creative expressive geometric humanist grotesque headline hero decorative large-text attention english western european extended-latin european,400,,latin | latin-ext,Astigmatic,678,172,No,2012-08-13,2025-09-10,https://fonts.google.com/specimen/McLaren
+Mea Culpa,Handwriting,,Display | Handwriting,personal casual friendly warm handwritten script organic  headline hero decorative large-text attention script cursive hand-drawn artistic informal english western european extended-latin european vietnamese,400,,latin | latin-ext | vietnamese,Robert Leuschke,1357,779,No,2021-12-02,2025-09-10,https://fonts.google.com/specimen/Mea+Culpa
+Meddon,Handwriting,,Handwriting | Display,personal casual friendly warm handwritten script organic  script cursive hand-drawn artistic informal headline hero decorative large-text attention english western european extended-latin european,400,,latin | latin-ext,Vernon Adams,794,815,No,2011-02-02,2025-09-04,https://fonts.google.com/specimen/Meddon
+MedievalSharp,Display,,Display | Handwriting,bold decorative headline attention-grabbing creative expressive  headline hero decorative large-text attention script cursive hand-drawn artistic informal english western european extended-latin european,400,,latin | latin-ext,Wojciech Kalinowski,862,644,No,2011-03-02,2025-09-10,https://fonts.google.com/specimen/MedievalSharp
+Medula One,Display,,Display,bold decorative headline attention-grabbing creative expressive  headline hero decorative large-text attention english western european,400,,latin,LatinoType,1199,2039,No,2011-12-19,2025-09-10,https://fonts.google.com/specimen/Medula+One
+Meera Inimai,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque english western european tamil indian,400,,latin | tamil,SMC,1444,1500,No,2016-05-31,2025-09-04,https://fonts.google.com/specimen/Meera+Inimai
+Megrim,Display,,Display,bold decorative headline attention-grabbing creative expressive  headline hero decorative large-text attention english western european extended-latin european,400,,latin | latin-ext,Daniel Johnson,768,358,No,2011-05-04,2025-09-10,https://fonts.google.com/specimen/Megrim
+Meie Script,Handwriting,,Handwriting,personal casual friendly warm handwritten script organic  script cursive hand-drawn artistic informal english western european extended-latin european,400,,latin | latin-ext,Johan Kallas | Mihkel Virkus,935,2022,No,2012-08-21,2025-09-11,https://fonts.google.com/specimen/Meie+Script
+Menbere,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque versatile multi-weight flexible variable variable-font responsive variable-weight ethiopic amharic english western european extended-latin european vietnamese,100 | 200 | 300 | 400 | 500 | 600 | 700,wght: -,ethiopic | latin | latin-ext | vietnamese,Aleme Tadesse | Sorkin Type | Eben Sorkin,1782,67,No,2025-06-23,2025-06-25,https://fonts.google.com/specimen/Menbere
+Meow Script,Handwriting,,Handwriting,personal casual friendly warm handwritten script organic  script cursive hand-drawn artistic informal english western european extended-latin european vietnamese,400,,latin | latin-ext | vietnamese,Robert Leuschke,893,343,No,2021-11-02,2025-09-11,https://fonts.google.com/specimen/Meow+Script
+Merienda,Handwriting,,Handwriting,personal casual friendly warm handwritten script organic  script cursive hand-drawn artistic informal versatile multi-weight flexible variable variable-font responsive variable-weight english western european extended-latin european vietnamese,300 | 400 | 500 | 600 | 700 | 800 | 900,wght: -,latin | latin-ext | vietnamese,Eduardo Tunni,362,676,No,2012-10-31,2025-09-16,https://fonts.google.com/specimen/Merienda
+Merriweather,Serif,Serif,,elegant traditional classic refined literary editorial transitional oldstyle didone versatile multi-weight flexible italic variable variable-font responsive variable-weight variable-width russian cyrillic slavic cyrillic extended english western european extended-latin european vietnamese top-popular trending most-used,300 | 300i | 400 | 400i | 500 | 500i | 600 | 600i | 700 | 700i | 800 | 800i | 900 | 900i,opsz: - | wdth: - | wght: -,cyrillic | cyrillic-ext | latin | latin-ext | vietnamese,Sorkin Type,32,1184,No,2011-05-11,2025-09-02,https://fonts.google.com/specimen/Merriweather
+Merriweather Sans,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque versatile multi-weight flexible italic variable variable-font responsive variable-weight cyrillic extended english western european extended-latin european vietnamese popular widely-used,300 | 300i | 400 | 400i | 500 | 500i | 600 | 600i | 700 | 700i | 800 | 800i,wght: -,cyrillic-ext | latin | latin-ext | vietnamese,Sorkin Type,135,471,No,2013-03-06,2025-09-16,https://fonts.google.com/specimen/Merriweather+Sans
+Metal,Display,Serif,Display,bold decorative headline attention-grabbing creative expressive transitional oldstyle didone headline hero decorative large-text attention khmer cambodian english western european,400,,khmer | latin,Danh Hong,1481,2272,No,2011-03-02,2025-09-11,https://fonts.google.com/specimen/Metal
+Metal Mania,Display,,Display,bold decorative headline attention-grabbing creative expressive  headline hero decorative large-text attention english western european extended-latin european,400,,latin | latin-ext,Open Window,1070,450,No,2012-07-11,2025-09-16,https://fonts.google.com/specimen/Metal+Mania
+Metamorphous,Display,Serif,Display,bold decorative headline attention-grabbing creative expressive transitional oldstyle didone headline hero decorative large-text attention english western european extended-latin european,400,,latin | latin-ext,James Grieshaber,855,1471,No,2011-12-07,2025-09-08,https://fonts.google.com/specimen/Metamorphous
+Metrophobic,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque english western european extended-latin european vietnamese,400,,latin | latin-ext | vietnamese,Vernon Adams,575,439,No,2011-05-11,2025-09-11,https://fonts.google.com/specimen/Metrophobic
+Michroma,Sans Serif,Sans Serif,Display,clean modern minimal professional readable neutral geometric humanist grotesque headline hero decorative large-text attention english western european extended-latin european,400,,latin | latin-ext,Vernon Adams,487,1721,No,2011-03-30,2025-09-04,https://fonts.google.com/specimen/Michroma
+Micro 5,Display,Sans Serif,Display,bold decorative headline attention-grabbing creative expressive geometric humanist grotesque headline hero decorative large-text attention english western european extended-latin european,400,,latin | latin-ext | math | symbols,Sarah Cadigan-Fried,1441,2102,No,2024-02-14,2025-05-30,https://fonts.google.com/specimen/Micro+5
+Micro 5 Charted,Display,Sans Serif,Display,bold decorative headline attention-grabbing creative expressive geometric humanist grotesque headline hero decorative large-text attention english western european extended-latin european,400,,latin | latin-ext | math | symbols,Sarah Cadigan-Fried,1943,295,No,2024-04-10,2025-05-30,https://fonts.google.com/specimen/Micro+5+Charted
+Milonga,Display,Serif,Display,bold decorative headline attention-grabbing creative expressive transitional oldstyle didone headline hero decorative large-text attention english western european extended-latin european,400,,latin | latin-ext,Impallari Type,1015,1688,No,2012-11-30,2025-09-10,https://fonts.google.com/specimen/Milonga
+Miltonian,Display,Serif,Display,bold decorative headline attention-grabbing creative expressive transitional oldstyle didone headline hero decorative large-text attention english western european,400,,latin,Impallari Type,1235,1311,No,2011-04-06,2025-09-16,https://fonts.google.com/specimen/Miltonian
+Miltonian Tattoo,Display,Serif,Display,bold decorative headline attention-grabbing creative expressive transitional oldstyle didone headline hero decorative large-text attention english western european,400,,latin,Impallari Type,1177,674,No,2011-04-06,2025-09-10,https://fonts.google.com/specimen/Miltonian+Tattoo
+Mina,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque bengali bangladeshi indian english western european extended-latin european,400 | 700,,bengali | latin | latin-ext,Suman Bhandary | Natanael Gama | Mooniak,971,2014,No,2018-02-28,2025-09-08,https://fonts.google.com/specimen/Mina
+Mingzat,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque english western european extended-latin european,400,,latin | latin-ext | lepcha,SIL International,1770,1246,No,2022-05-25,2025-09-04,https://fonts.google.com/specimen/Mingzat
+Miniver,Display,,Display | Handwriting,bold decorative headline attention-grabbing creative expressive  headline hero decorative large-text attention script cursive hand-drawn artistic informal english western european,400,,latin,Open Window,1205,2040,No,2011-12-19,2025-09-16,https://fonts.google.com/specimen/Miniver
+Miriam Libre,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque variable variable-font responsive variable-weight hebrew RTL israeli english western european extended-latin european,400 | 500 | 600 | 700,wght: -,hebrew | latin | latin-ext,Michal Sahar,825,549,No,2016-06-20,2025-09-04,https://fonts.google.com/specimen/Miriam+Libre
+Mirza,Serif,Serif,,elegant traditional classic refined literary editorial transitional oldstyle didone arabic RTL middle-east english western european extended-latin european,400 | 500 | 600 | 700,,arabic | latin | latin-ext,KB Studio,876,150,No,2016-06-15,2025-09-08,https://fonts.google.com/specimen/Mirza
+Miss Fajardose,Handwriting,,Handwriting,personal casual friendly warm handwritten script organic  script cursive hand-drawn artistic informal english western european extended-latin european,400,,latin | latin-ext,Sudtipos,1518,1295,No,2011-11-30,2025-09-04,https://fonts.google.com/specimen/Miss+Fajardose
+Mitr,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque versatile multi-weight flexible english western european extended-latin european thai southeast-asia vietnamese well-known common,200 | 300 | 400 | 500 | 600 | 700,,latin | latin-ext | thai | vietnamese,Cadson Demak,288,152,No,2016-06-15,2025-09-10,https://fonts.google.com/specimen/Mitr
+Mochiy Pop One,Sans Serif,Sans Serif,Display,clean modern minimal professional readable neutral geometric humanist grotesque headline hero decorative large-text attention japanese kanji hiragana katakana english western european,400,,japanese | latin,FONTDASU,760,1955,No,2021-04-14,2025-09-08,https://fonts.google.com/specimen/Mochiy+Pop+One
+Mochiy Pop P One,Sans Serif,Sans Serif,Display,clean modern minimal professional readable neutral geometric humanist grotesque headline hero decorative large-text attention japanese kanji hiragana katakana english western european,400,,japanese | latin,FONTDASU,1090,1760,No,2021-04-14,2025-09-02,https://fonts.google.com/specimen/Mochiy+Pop+P+One
+Modak,Display,,Display,bold decorative headline attention-grabbing creative expressive  headline hero decorative large-text attention hindi devanagari indian english western european extended-latin european,400,,devanagari | latin | latin-ext,Ek Type,912,225,No,2015-02-18,2025-09-11,https://fonts.google.com/specimen/Modak
+Modern Antiqua,Display,Serif,Display,bold decorative headline attention-grabbing creative expressive transitional oldstyle didone headline hero decorative large-text attention english western european extended-latin european,400,,latin | latin-ext,Wojciech Kalinowski,1039,383,No,2011-07-13,2025-09-08,https://fonts.google.com/specimen/Modern+Antiqua
+Moderustic,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque versatile multi-weight flexible variable variable-font responsive variable-weight russian cyrillic slavic cyrillic extended greek english western european extended-latin european,300 | 400 | 500 | 600 | 700 | 800,wght: -,cyrillic | cyrillic-ext | greek | latin | latin-ext,Tural Alisoy,1558,1678,No,2024-08-06,2025-09-10,https://fonts.google.com/specimen/Moderustic
+Mogra,Display,,Display,bold decorative headline attention-grabbing creative expressive  headline hero decorative large-text attention gujarati indian english western european extended-latin european,400,,gujarati | latin | latin-ext,Lipi Raval,1401,303,No,2016-06-15,2025-09-11,https://fonts.google.com/specimen/Mogra
+Mohave,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque italic variable variable-font responsive variable-weight english western european extended-latin european,300 | 300i | 400 | 400i | 500 | 500i | 600 | 600i | 700 | 700i,wght: -,latin | latin-ext,Gumpita Rahayu,1117,832,No,2020-01-23,2025-09-04,https://fonts.google.com/specimen/Mohave
+Moirai One,Display,,Display,bold decorative headline attention-grabbing creative expressive  headline hero decorative large-text attention korean hangul english western european extended-latin european,400,,korean | latin | latin-ext,Jiyeon Park | JAMO,1793,1978,No,2023-06-05,2026-03-03,https://fonts.google.com/specimen/Moirai+One
+Molengo,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque english western european extended-latin european,400,,latin | latin-ext,Denis Jacquerye,914,796,No,2010-04-19,2025-09-16,https://fonts.google.com/specimen/Molengo
+Molle,Handwriting,,Handwriting | Display,personal casual friendly warm handwritten script organic  script cursive hand-drawn artistic informal headline hero decorative large-text attention italic english western european extended-latin european,400i,,latin | latin-ext,Elena Albertoni,1581,1367,No,2012-09-18,2025-09-04,https://fonts.google.com/specimen/Molle
+Momo Signature,Sans Serif,Sans Serif,Handwriting,clean modern minimal professional readable neutral geometric humanist grotesque script cursive hand-drawn artistic informal english western european extended-latin european vietnamese,400,,latin | latin-ext | vietnamese,Type Associates,1312,403,No,2025-10-28,2025-10-29,https://fonts.google.com/specimen/Momo+Signature
+Momo Trust Display,Sans Serif,Sans Serif,Display,clean modern minimal professional readable neutral geometric humanist grotesque headline hero decorative large-text attention english western european extended-latin european vietnamese,400,,latin | latin-ext | vietnamese,Type Associates,1557,283,No,2025-10-28,2025-10-29,https://fonts.google.com/specimen/Momo+Trust+Display
+Momo Trust Sans,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque versatile multi-weight flexible variable variable-font responsive variable-weight english western european extended-latin european vietnamese,200 | 300 | 400 | 500 | 600 | 700 | 800,wght: -,latin | latin-ext | vietnamese,Type Associates,1614,244,No,2025-10-28,2025-11-20,https://fonts.google.com/specimen/Momo+Trust+Sans
+Mona Sans,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque versatile multi-weight flexible italic variable variable-font responsive variable-weight variable-width english western european extended-latin european vietnamese,200 | 200i | 300 | 300i | 400 | 400i | 500 | 500i | 600 | 600i | 700 | 700i | 800 | 800i | 900 | 900i,wdth: - | wght: -,latin | latin-ext | vietnamese,Tobias Bjerrome Ahlin | Github | Degarism Studio | Sebastian Carewe,448,452,No,2024-11-04,2025-09-04,https://fonts.google.com/specimen/Mona+Sans
+Monda,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque variable variable-font responsive variable-weight english western european extended-latin european vietnamese,400 | 500 | 600 | 700,wght: -,latin | latin-ext | vietnamese,Vernon Adams,370,108,No,2012-11-30,2025-09-11,https://fonts.google.com/specimen/Monda
+Monofett,Monospace,,Monospace,code developer technical fixed-width terminal programming  mono fixed-width tabular data code english western european extended-latin european,400,,latin | latin-ext,Vernon Adams,1077,1761,No,2011-05-04,2025-09-08,https://fonts.google.com/specimen/Monofett
+Monomakh,Display,,Display,bold decorative headline attention-grabbing creative expressive  headline hero decorative large-text attention russian cyrillic slavic cyrillic extended english western european extended-latin european,400,,cyrillic | cyrillic-ext | latin | latin-ext,Aleksandr Andreev | Nikita Simmons,1509,420,No,2025-02-11,2025-05-30,https://fonts.google.com/specimen/Monomakh
+Monomaniac One,Sans Serif,Sans Serif,Display,clean modern minimal professional readable neutral geometric humanist grotesque headline hero decorative large-text attention japanese kanji hiragana katakana english western european extended-latin european,400,,japanese | latin | latin-ext,Maniackers Design,848,2114,No,2020-12-08,2025-09-16,https://fonts.google.com/specimen/Monomaniac+One
+Monoton,Display,Sans Serif,Display,bold decorative headline attention-grabbing creative expressive geometric humanist grotesque headline hero decorative large-text attention english western european extended-latin european,400,,latin | latin-ext,Vernon Adams,383,2087,No,2011-08-24,2025-09-16,https://fonts.google.com/specimen/Monoton
+Monsieur La Doulaise,Handwriting,,Handwriting | Display,personal casual friendly warm handwritten script organic  script cursive hand-drawn artistic informal headline hero decorative large-text attention english western european extended-latin european,400,,latin | latin-ext,Sudtipos,694,1856,No,2011-11-30,2025-09-08,https://fonts.google.com/specimen/Monsieur+La+Doulaise
+Montaga,Serif,Serif,,elegant traditional classic refined literary editorial transitional oldstyle didone english western european,400,,latin,Alejandra Rodriguez,1141,1666,No,2012-01-18,2025-09-04,https://fonts.google.com/specimen/Montaga
+Montagu Slab,Serif,Slab Serif,Display,elegant traditional classic refined literary editorial slab mechanical sturdy strong headline hero decorative large-text attention versatile multi-weight flexible variable variable-font responsive variable-weight english western european extended-latin european vietnamese,100 | 200 | 300 | 400 | 500 | 600 | 700,opsz: - | wght: -,latin | latin-ext | vietnamese,Florian Karsten,659,1793,No,2021-09-20,2025-09-04,https://fonts.google.com/specimen/Montagu+Slab
+MonteCarlo,Handwriting,,Display | Handwriting,personal casual friendly warm handwritten script organic  headline hero decorative large-text attention script cursive hand-drawn artistic informal english western european extended-latin european vietnamese,400,,latin | latin-ext | vietnamese,Robert Leuschke,1005,1366,No,2021-05-14,2025-09-11,https://fonts.google.com/specimen/MonteCarlo
+Montez,Handwriting,,Handwriting | Display,personal casual friendly warm handwritten script organic  script cursive hand-drawn artistic informal headline hero decorative large-text attention english western european extended-latin european,400,,latin | latin-ext,Astigmatic,965,1716,No,2011-08-17,2025-09-08,https://fonts.google.com/specimen/Montez
+Montserrat,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque versatile multi-weight flexible italic variable variable-font responsive variable-weight russian cyrillic slavic cyrillic extended english western european extended-latin european vietnamese top-popular trending most-used,100 | 100i | 200 | 200i | 300 | 300i | 400 | 400i | 500 | 500i | 600 | 600i | 700 | 700i | 800 | 800i | 900 | 900i,wght: -,cyrillic | cyrillic-ext | latin | latin-ext | vietnamese,Julieta Ulanovsky | Sol Matas | Juan Pablo del Peral | Jacques Le Bailly,8,1194,No,2011-12-13,2025-09-04,https://fonts.google.com/specimen/Montserrat
+Montserrat Alternates,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque versatile multi-weight flexible italic russian cyrillic slavic cyrillic extended english western european extended-latin european vietnamese well-known common,100 | 100i | 200 | 200i | 300 | 300i | 400 | 400i | 500 | 500i | 600 | 600i | 700 | 700i | 800 | 800i | 900 | 900i,,cyrillic | cyrillic-ext | latin | latin-ext | vietnamese,Julieta Ulanovsky | Sol Matas | Juan Pablo del Peral | Jacques Le Bailly,221,1439,No,2012-10-01,2025-09-04,https://fonts.google.com/specimen/Montserrat+Alternates
+Montserrat Underline,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque versatile multi-weight flexible italic variable variable-font responsive variable-weight russian cyrillic slavic cyrillic extended english western european extended-latin european vietnamese,100 | 100i | 200 | 200i | 300 | 300i | 400 | 400i | 500 | 500i | 600 | 600i | 700 | 700i | 800 | 800i | 900 | 900i,wght: -,cyrillic | cyrillic-ext | latin | latin-ext | vietnamese,Julieta Ulanovsky | Sol Matas | Juan Pablo del Peral | Jacques Le Bailly,1389,2166,No,2024-12-02,2025-09-04,https://fonts.google.com/specimen/Montserrat+Underline
+Moo Lah Lah,Display,Sans Serif,Display,bold decorative headline attention-grabbing creative expressive geometric humanist grotesque headline hero decorative large-text attention english western european extended-latin european vietnamese,400,,latin | latin-ext | vietnamese,Robert Leuschke,1760,594,No,2021-11-26,2025-09-10,https://fonts.google.com/specimen/Moo+Lah+Lah
+Mooli,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque english western european extended-latin european,400,,latin | latin-ext,Vernon Adams,1223,280,No,2023-09-12,2025-05-30,https://fonts.google.com/specimen/Mooli
+Moon Dance,Handwriting,,Display | Handwriting,personal casual friendly warm handwritten script organic  headline hero decorative large-text attention script cursive hand-drawn artistic informal english western european extended-latin european vietnamese,400,,latin | latin-ext | vietnamese,Robert Leuschke,1082,850,No,2021-11-18,2025-09-16,https://fonts.google.com/specimen/Moon+Dance
+Moul,Display,Serif,Display,bold decorative headline attention-grabbing creative expressive transitional oldstyle didone headline hero decorative large-text attention khmer cambodian english western european,400,,khmer | latin,Danh Hong,1042,1859,No,2011-03-02,2025-09-16,https://fonts.google.com/specimen/Moul
+Moulpali,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque khmer cambodian english western european,400,,khmer | latin,Danh Hong,1729,1541,No,2011-03-02,2025-09-10,https://fonts.google.com/specimen/Moulpali
+Mountains of Christmas,Display,Serif,Display,bold decorative headline attention-grabbing creative expressive transitional oldstyle didone headline hero decorative large-text attention english western european,400 | 700,,latin,Tart Workshop,752,771,No,2010-12-14,2025-09-08,https://fonts.google.com/specimen/Mountains+of+Christmas
+Mouse Memoirs,Sans Serif,Sans Serif,Display,clean modern minimal professional readable neutral geometric humanist grotesque headline hero decorative large-text attention english western european extended-latin european,400,,latin | latin-ext,Astigmatic,785,856,No,2012-11-02,2025-09-16,https://fonts.google.com/specimen/Mouse+Memoirs
+Mozilla Headline,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque versatile multi-weight flexible variable variable-font responsive variable-weight variable-width english western european extended-latin european,200 | 300 | 400 | 500 | 600 | 700,wdth: - | wght: -,latin | latin-ext,Studio DRAMA,1568,1407,No,2025-07-28,2025-07-30,https://fonts.google.com/specimen/Mozilla+Headline
+Mozilla Text,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque versatile multi-weight flexible variable variable-font responsive variable-weight english western european extended-latin european,200 | 300 | 400 | 500 | 600 | 700,wght: -,latin | latin-ext,Studio DRAMA,1144,2126,No,2025-07-28,2025-07-30,https://fonts.google.com/specimen/Mozilla+Text
+Mr Bedfort,Handwriting,,Handwriting,personal casual friendly warm handwritten script organic  script cursive hand-drawn artistic informal english western european extended-latin european,400,,latin | latin-ext,Sudtipos,1540,735,No,2012-01-11,2025-09-08,https://fonts.google.com/specimen/Mr+Bedfort
+Mr Dafoe,Handwriting,,Handwriting,personal casual friendly warm handwritten script organic  script cursive hand-drawn artistic informal english western european extended-latin european,400,,latin | latin-ext,Sudtipos,433,1007,No,2011-11-30,2025-09-02,https://fonts.google.com/specimen/Mr+Dafoe
+Mr De Haviland,Handwriting,,Handwriting,personal casual friendly warm handwritten script organic  script cursive hand-drawn artistic informal english western european extended-latin european,400,,latin | latin-ext,Sudtipos,899,1008,No,2011-11-30,2025-09-16,https://fonts.google.com/specimen/Mr+De+Haviland
+Mrs Saint Delafield,Handwriting,,Handwriting,personal casual friendly warm handwritten script organic  script cursive hand-drawn artistic informal english western european extended-latin european,400,,latin | latin-ext,Sudtipos,520,1798,No,2012-01-11,2025-09-16,https://fonts.google.com/specimen/Mrs+Saint+Delafield
+Mrs Sheppards,Handwriting,,Handwriting | Display,personal casual friendly warm handwritten script organic  script cursive hand-drawn artistic informal headline hero decorative large-text attention english western european extended-latin european,400,,latin | latin-ext,Sudtipos,1598,1278,No,2011-11-30,2025-09-08,https://fonts.google.com/specimen/Mrs+Sheppards
+Ms Madi,Handwriting,,Handwriting,personal casual friendly warm handwritten script organic  script cursive hand-drawn artistic informal english western european extended-latin european vietnamese,400,,latin | latin-ext | vietnamese,Robert Leuschke,450,589,No,2022-03-23,2025-05-30,https://fonts.google.com/specimen/Ms+Madi
+Mukta,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque versatile multi-weight flexible hindi devanagari indian english western european extended-latin european popular widely-used,200 | 300 | 400 | 500 | 600 | 700 | 800,,devanagari | latin | latin-ext,Ek Type,104,1895,No,2017-01-26,2025-09-08,https://fonts.google.com/specimen/Mukta
+Mukta Mahee,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque versatile multi-weight flexible punjabi gurmukhi indian english western european extended-latin european,200 | 300 | 400 | 500 | 600 | 700 | 800,,gurmukhi | latin | latin-ext,Ek Type,937,486,No,2017-05-19,2025-09-04,https://fonts.google.com/specimen/Mukta+Mahee
+Mukta Malar,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque versatile multi-weight flexible english western european extended-latin european tamil indian,200 | 300 | 400 | 500 | 600 | 700 | 800,,latin | latin-ext | tamil,Ek Type,402,733,No,2017-02-13,2025-09-16,https://fonts.google.com/specimen/Mukta+Malar
+Mukta Vaani,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque versatile multi-weight flexible gujarati indian english western european extended-latin european,200 | 300 | 400 | 500 | 600 | 700 | 800,,gujarati | latin | latin-ext,Ek Type,739,34,No,2016-06-15,2025-09-08,https://fonts.google.com/specimen/Mukta+Vaani
+Mulish,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque versatile multi-weight flexible italic variable variable-font responsive variable-weight russian cyrillic slavic cyrillic extended english western european extended-latin european vietnamese top-popular trending most-used,1000 | 1000i | 200 | 200i | 300 | 300i | 400 | 400i | 500 | 500i | 600 | 600i | 700 | 700i | 800 | 800i | 900 | 900i,wght: -,cyrillic | cyrillic-ext | latin | latin-ext | vietnamese,Vernon Adams | Cyreal | Jacques Le Bailly,40,1298,No,2011-05-25,2025-09-08,https://fonts.google.com/specimen/Mulish
+Murecho,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque versatile multi-weight flexible variable variable-font responsive variable-weight russian cyrillic slavic cyrillic extended greek japanese kanji hiragana katakana english western european extended-latin european multilingual international,100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900,wght: -,cyrillic | cyrillic-ext | greek | japanese | latin | latin-ext,Neil Summerour,570,2155,No,2021-10-27,2025-09-08,https://fonts.google.com/specimen/Murecho
+MuseoModerno,Display,Sans Serif,Display,bold decorative headline attention-grabbing creative expressive geometric humanist grotesque headline hero decorative large-text attention versatile multi-weight flexible italic variable variable-font responsive variable-weight english western european extended-latin european vietnamese,100 | 100i | 200 | 200i | 300 | 300i | 400 | 400i | 500 | 500i | 600 | 600i | 700 | 700i | 800 | 800i | 900 | 900i,wght: -,latin | latin-ext | vietnamese,Omnibus-Type,502,784,No,2020-05-17,2025-09-08,https://fonts.google.com/specimen/MuseoModerno
+My Soul,Handwriting,,Handwriting | Display,personal casual friendly warm handwritten script organic  script cursive hand-drawn artistic informal headline hero decorative large-text attention english western european extended-latin european vietnamese,400,,latin | latin-ext | vietnamese,Robert Leuschke,1316,114,No,2022-03-23,2025-09-04,https://fonts.google.com/specimen/My+Soul
+Mynerve,Handwriting,,Handwriting | Display,personal casual friendly warm handwritten script organic  script cursive hand-drawn artistic informal headline hero decorative large-text attention greek english western european extended-latin european vietnamese,400,,greek | latin | latin-ext | vietnamese,Carolina Short,1318,134,No,2023-01-03,2025-09-04,https://fonts.google.com/specimen/Mynerve
+Mystery Quest,Display,,Display,bold decorative headline attention-grabbing creative expressive  headline hero decorative large-text attention english western european extended-latin european,400,,latin | latin-ext,Sideshow,1249,1865,No,2012-02-29,2025-09-16,https://fonts.google.com/specimen/Mystery+Quest
+NTR,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque english western european telugu indian,400,,latin | telugu,Purushoth Kumar Guttula,1064,2028,No,2014-12-10,2025-09-11,https://fonts.google.com/specimen/NTR
+Nabla,Display,,Display,bold decorative headline attention-grabbing creative expressive  headline hero decorative large-text attention variable variable-font responsive cyrillic extended english western european extended-latin european vietnamese,400,EDPT: - | EHLT: -,cyrillic-ext | latin | latin-ext | math | vietnamese,Arthur Reinders Folmer | Just van Rossum,1511,1971,No,2022-08-15,2025-09-16,https://fonts.google.com/specimen/Nabla
+Namdhinggo,Serif,Serif,,elegant traditional classic refined literary editorial transitional oldstyle didone english western european extended-latin european,400 | 500 | 600 | 700 | 800,,latin | latin-ext | limbu,SIL International,1903,2298,No,2024-02-14,2025-05-30,https://fonts.google.com/specimen/Namdhinggo
+Nanum Brush Script,Handwriting,,Handwriting,personal casual friendly warm handwritten script organic  script cursive hand-drawn artistic informal korean hangul english western european,400,,korean | latin,Sandoll Communication,531,250,No,2018-02-05,2025-09-08,https://fonts.google.com/specimen/Nanum+Brush+Script
+Nanum Gothic,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque korean hangul english western european popular widely-used,400 | 700 | 800,,korean | latin,Sandoll Communication,86,688,No,2018-02-05,2025-05-30,https://fonts.google.com/specimen/Nanum+Gothic
+Nanum Gothic Coding,Handwriting,Sans Serif,Monospace,personal casual friendly warm handwritten script organic geometric humanist grotesque mono fixed-width tabular data code korean hangul english western european well-known common,400 | 700,,korean | latin,Sandoll Communication,236,163,No,2018-02-05,2025-09-10,https://fonts.google.com/specimen/Nanum+Gothic+Coding
+Nanum Myeongjo,Serif,Serif,,elegant traditional classic refined literary editorial transitional oldstyle didone korean hangul english western european well-known common,400 | 700 | 800,,korean | latin,Sandoll Communication,175,691,No,2018-02-05,2025-09-10,https://fonts.google.com/specimen/Nanum+Myeongjo
+Nanum Pen Script,Handwriting,,Handwriting,personal casual friendly warm handwritten script organic  script cursive hand-drawn artistic informal korean hangul english western european,400,,korean | latin,Sandoll Communication,408,361,No,2018-02-05,2025-05-30,https://fonts.google.com/specimen/Nanum+Pen+Script
+Narnoor,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque english western european extended-latin european,400 | 500 | 600 | 700 | 800,,gunjala-gondi | latin | latin-ext | math | symbols,SIL International,1902,1878,No,2023-03-02,2025-06-25,https://fonts.google.com/specimen/Narnoor
+Nata Sans,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque versatile multi-weight flexible variable variable-font responsive variable-weight russian cyrillic slavic cyrillic extended english western european extended-latin european vietnamese,100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900,wght: -,cyrillic | cyrillic-ext | latin | latin-ext | vietnamese,Daniel Uzquiano,1185,1645,No,2025-07-28,2025-07-30,https://fonts.google.com/specimen/Nata+Sans
+National Park,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque versatile multi-weight flexible variable variable-font responsive variable-weight english western european extended-latin european vietnamese,200 | 300 | 400 | 500 | 600 | 700 | 800,wght: -,latin | latin-ext | vietnamese,Andrea Herstowski | Ben Hoepner | Jeremy Shellhorn,1485,80,No,2025-04-07,2025-09-11,https://fonts.google.com/specimen/National+Park
+Neonderthaw,Handwriting,,Display | Handwriting,personal casual friendly warm handwritten script organic  headline hero decorative large-text attention script cursive hand-drawn artistic informal english western european extended-latin european vietnamese,400,,latin | latin-ext | vietnamese,Robert Leuschke,1499,396,No,2021-11-18,2025-09-11,https://fonts.google.com/specimen/Neonderthaw
+Nerko One,Handwriting,,Handwriting,personal casual friendly warm handwritten script organic  script cursive hand-drawn artistic informal english western european extended-latin european,400,,latin | latin-ext,Nermin Kahrimanovic,1118,2025,No,2020-11-06,2025-09-16,https://fonts.google.com/specimen/Nerko+One
+Neucha,Handwriting,,Handwriting,personal casual friendly warm handwritten script organic  script cursive hand-drawn artistic informal russian cyrillic slavic english western european,400,,cyrillic | latin,Jovanny Lemonad,513,293,No,2010-09-21,2025-09-11,https://fonts.google.com/specimen/Neucha
+Neuton,Serif,Serif,Display,elegant traditional classic refined literary editorial transitional oldstyle didone headline hero decorative large-text attention italic english western european extended-latin european,200 | 300 | 400 | 400i | 700 | 800,,latin | latin-ext,Brian Zick,364,1160,No,2011-02-09,2025-09-16,https://fonts.google.com/specimen/Neuton
+New Amsterdam,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque english western european extended-latin european,400,,latin | latin-ext,Vladimir Nikolic,1370,867,No,2024-08-09,2025-05-30,https://fonts.google.com/specimen/New+Amsterdam
+New Rocker,Display,,Display,bold decorative headline attention-grabbing creative expressive  headline hero decorative large-text attention english western european extended-latin european,400,,latin | latin-ext,Impallari Type,1085,2150,No,2012-11-30,2025-09-16,https://fonts.google.com/specimen/New+Rocker
+New Tegomin,Serif,Serif,,elegant traditional classic refined literary editorial transitional oldstyle didone japanese kanji hiragana katakana english western european extended-latin european,400,,japanese | latin | latin-ext,Kousuke Nagai,1455,1448,No,2020-12-13,2025-09-16,https://fonts.google.com/specimen/New+Tegomin
+News Cycle,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque russian cyrillic slavic cyrillic extended greek greek extended english western european extended-latin european vietnamese multilingual international well-known common,400 | 700,,cyrillic | cyrillic-ext | greek | greek-ext | latin | latin-ext | vietnamese,Nathan Willis,216,158,No,2011-04-27,2025-09-16,https://fonts.google.com/specimen/News+Cycle
+Newsreader,Serif,Serif,,elegant traditional classic refined literary editorial transitional oldstyle didone versatile multi-weight flexible italic variable variable-font responsive variable-weight english western european extended-latin european vietnamese well-known common,200 | 200i | 300 | 300i | 400 | 400i | 500 | 500i | 600 | 600i | 700 | 700i | 800 | 800i,opsz: - | wght: -,latin | latin-ext | vietnamese,Production Type,210,797,No,2020-07-01,2025-09-08,https://fonts.google.com/specimen/Newsreader
+Niconne,Handwriting,,Handwriting,personal casual friendly warm handwritten script organic  script cursive hand-drawn artistic informal english western european extended-latin european,400,,latin | latin-ext,Vernon Adams,657,750,No,2011-11-23,2025-09-10,https://fonts.google.com/specimen/Niconne
+Niramit,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque versatile multi-weight flexible italic english western european extended-latin european thai southeast-asia vietnamese,200 | 200i | 300 | 300i | 400 | 400i | 500 | 500i | 600 | 600i | 700 | 700i,,latin | latin-ext | thai | vietnamese,Cadson Demak,506,874,No,2018-09-10,2025-09-04,https://fonts.google.com/specimen/Niramit
+Nixie One,Display,,Display,bold decorative headline attention-grabbing creative expressive  headline hero decorative large-text attention english western european,400,,latin,Jovanny Lemonad,519,1219,No,2011-06-21,2025-09-10,https://fonts.google.com/specimen/Nixie+One
+Nobile,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque italic russian cyrillic slavic english western european extended-latin european,400 | 400i | 500 | 500i | 700 | 700i,,cyrillic | latin | latin-ext,Vernon Adams,557,401,No,2010-05-10,2025-09-08,https://fonts.google.com/specimen/Nobile
+Nokora,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque versatile multi-weight flexible variable variable-font responsive variable-weight khmer cambodian english western european,100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900,wght: -,khmer | latin,Danh Hong,773,263,No,2011-11-09,2025-09-16,https://fonts.google.com/specimen/Nokora
+Norican,Handwriting,,Handwriting,personal casual friendly warm handwritten script organic  script cursive hand-drawn artistic informal english western european extended-latin european,400,,latin | latin-ext,Vernon Adams,595,609,No,2012-02-08,2025-09-16,https://fonts.google.com/specimen/Norican
+Nosifer,Display,Sans Serif,Display,bold decorative headline attention-grabbing creative expressive geometric humanist grotesque headline hero decorative large-text attention english western european extended-latin european,400,,latin | latin-ext,Typomondo,1000,1519,No,2011-12-19,2025-06-02,https://fonts.google.com/specimen/Nosifer
+Notable,Sans Serif,Sans Serif,Display,clean modern minimal professional readable neutral geometric humanist grotesque headline hero decorative large-text attention english western european,400,,latin,Eli Block | Hana Tanimura | Noemie Le Coz,1151,78,No,2018-08-02,2025-09-02,https://fonts.google.com/specimen/Notable
+Nothing You Could Do,Handwriting,,Display | Handwriting,personal casual friendly warm handwritten script organic  headline hero decorative large-text attention script cursive hand-drawn artistic informal english western european,400,,latin,Kimberly Geswein,417,1170,No,2011-05-11,2025-09-16,https://fonts.google.com/specimen/Nothing+You+Could+Do
+Noticia Text,Serif,Serif,,elegant traditional classic refined literary editorial transitional oldstyle didone italic english western european extended-latin european vietnamese well-known common,400 | 400i | 700 | 700i,,latin | latin-ext | vietnamese,JM Solé,249,171,No,2012-02-08,2025-09-10,https://fonts.google.com/specimen/Noticia+Text
+Noto Color Emoji,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque noto google international comprehensive popular widely-used,400,,emoji,Google,73,754,Yes,2021-02-16,2026-02-17,https://fonts.google.com/specimen/Noto+Color+Emoji
+Noto Emoji,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque variable variable-font responsive variable-weight noto google international comprehensive,300 | 400 | 500 | 600 | 700,wght: -,emoji,Google,757,291,Yes,2022-04-29,2025-11-26,https://fonts.google.com/specimen/Noto+Emoji
+Noto Kufi Arabic,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque versatile multi-weight flexible variable variable-font responsive variable-weight arabic RTL middle-east english western european extended-latin european noto google international comprehensive well-known common,100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900,wght: -,arabic | latin | latin-ext | math | symbols,Google,168,222,Yes,2020-11-19,2025-09-11,https://fonts.google.com/specimen/Noto+Kufi+Arabic
+Noto Music,Sans Serif,Sans Serif,Symbols,clean modern minimal professional readable neutral geometric humanist grotesque icon symbol emoji pictograph english western european extended-latin european noto google international comprehensive,400,,latin | latin-ext | music,Google,1266,2117,Yes,2020-11-19,2025-09-04,https://fonts.google.com/specimen/Noto+Music
+Noto Naskh Arabic,Serif,Serif,,elegant traditional classic refined literary editorial transitional oldstyle didone variable variable-font responsive variable-weight arabic RTL middle-east english western european extended-latin european noto google international comprehensive well-known common,400 | 500 | 600 | 700,wght: -,arabic | latin | latin-ext | math | symbols,Google,214,135,Yes,2020-11-19,2026-01-28,https://fonts.google.com/specimen/Noto+Naskh+Arabic
+Noto Nastaliq Urdu,Serif,Serif,,elegant traditional classic refined literary editorial transitional oldstyle didone variable variable-font responsive variable-weight arabic RTL middle-east english western european extended-latin european noto google international comprehensive well-known common,400 | 500 | 600 | 700,wght: -,arabic | latin | latin-ext,Google,277,50,Yes,2020-11-19,2025-09-02,https://fonts.google.com/specimen/Noto+Nastaliq+Urdu
+Noto Rashi Hebrew,Serif,Serif,,elegant traditional classic refined literary editorial transitional oldstyle didone versatile multi-weight flexible variable variable-font responsive variable-weight greek extended hebrew RTL israeli english western european extended-latin european noto google international comprehensive,100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900,wght: -,greek-ext | hebrew | latin | latin-ext,Google,396,1,Yes,2020-11-19,2025-09-16,https://fonts.google.com/specimen/Noto+Rashi+Hebrew
+Noto Sans,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque versatile multi-weight flexible italic variable variable-font responsive variable-weight variable-width russian cyrillic slavic cyrillic extended hindi devanagari indian greek greek extended english western european extended-latin european vietnamese multilingual international noto google international comprehensive top-popular trending most-used,100 | 100i | 200 | 200i | 300 | 300i | 400 | 400i | 500 | 500i | 600 | 600i | 700 | 700i | 800 | 800i | 900 | 900i,wdth: - | wght: -,cyrillic | cyrillic-ext | devanagari | greek | greek-ext | latin | latin-ext | vietnamese,Google,19,1233,Yes,2013-02-27,2025-09-11,https://fonts.google.com/specimen/Noto+Sans
+Noto Sans Adlam,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque variable variable-font responsive variable-weight english western european extended-latin european noto google international comprehensive,400 | 500 | 600 | 700,wght: -,adlam | latin | latin-ext,Google,1644,246,Yes,2020-11-19,2025-09-04,https://fonts.google.com/specimen/Noto+Sans+Adlam
+Noto Sans Adlam Unjoined,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque variable variable-font responsive variable-weight english western european extended-latin european noto google international comprehensive,400 | 500 | 600 | 700,wght: -,adlam | latin | latin-ext,Google,1790,409,Yes,2020-11-19,2025-09-16,https://fonts.google.com/specimen/Noto+Sans+Adlam+Unjoined
+Noto Sans Anatolian Hieroglyphs,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque english western european extended-latin european noto google international comprehensive,400,,anatolian-hieroglyphs | latin | latin-ext,Google,1628,1877,Yes,2020-11-19,2025-09-16,https://fonts.google.com/specimen/Noto+Sans+Anatolian+Hieroglyphs
+Noto Sans Arabic,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque versatile multi-weight flexible variable variable-font responsive variable-weight variable-width arabic RTL middle-east english western european extended-latin european noto google international comprehensive popular widely-used,100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900,wdth: - | wght: -,arabic | latin | latin-ext | math | symbols,Google,126,129,Yes,2020-11-19,2025-09-17,https://fonts.google.com/specimen/Noto+Sans+Arabic
+Noto Sans Armenian,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque versatile multi-weight flexible variable variable-font responsive variable-weight variable-width armenian english western european extended-latin european noto google international comprehensive,100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900,wdth: - | wght: -,armenian | latin | latin-ext,Google,1060,259,Yes,2020-11-19,2025-09-10,https://fonts.google.com/specimen/Noto+Sans+Armenian
+Noto Sans Avestan,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque english western european extended-latin european noto google international comprehensive,400,,avestan | latin | latin-ext,Google,1845,2196,Yes,2020-11-19,2025-09-16,https://fonts.google.com/specimen/Noto+Sans+Avestan
+Noto Sans Balinese,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque variable variable-font responsive variable-weight english western european extended-latin european noto google international comprehensive,400 | 500 | 600 | 700,wght: -,balinese | latin | latin-ext,Google,1773,1801,Yes,2020-11-19,2025-09-08,https://fonts.google.com/specimen/Noto+Sans+Balinese
+Noto Sans Bamum,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque variable variable-font responsive variable-weight english western european extended-latin european noto google international comprehensive,400 | 500 | 600 | 700,wght: -,bamum | latin | latin-ext,Google,1829,834,Yes,2020-11-19,2025-09-11,https://fonts.google.com/specimen/Noto+Sans+Bamum
+Noto Sans Bassa Vah,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque variable variable-font responsive variable-weight english western european extended-latin european noto google international comprehensive,400 | 500 | 600 | 700,wght: -,bassa-vah | latin | latin-ext,Google,2001,306,Yes,2020-11-19,2025-09-16,https://fonts.google.com/specimen/Noto+Sans+Bassa+Vah
+Noto Sans Batak,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque english western european extended-latin european noto google international comprehensive,400,,batak | latin | latin-ext,Google,1717,273,Yes,2020-11-19,2025-08-26,https://fonts.google.com/specimen/Noto+Sans+Batak
+Noto Sans Bengali,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque versatile multi-weight flexible variable variable-font responsive variable-weight variable-width bengali bangladeshi indian english western european extended-latin european noto google international comprehensive well-known common,100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900,wdth: - | wght: -,bengali | latin | latin-ext,Google,246,77,Yes,2020-11-19,2026-01-28,https://fonts.google.com/specimen/Noto+Sans+Bengali
+Noto Sans Bhaiksuki,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque english western european extended-latin european noto google international comprehensive,400,,bhaiksuki | latin | latin-ext,Google,1967,1328,Yes,2020-11-19,2025-09-16,https://fonts.google.com/specimen/Noto+Sans+Bhaiksuki
+Noto Sans Brahmi,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque english western european extended-latin european noto google international comprehensive,400,,brahmi | latin | latin-ext | math | symbols,Google,1881,2291,Yes,2020-11-19,2025-09-10,https://fonts.google.com/specimen/Noto+Sans+Brahmi
+Noto Sans Buginese,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque english western european extended-latin european noto google international comprehensive,400,,buginese | latin | latin-ext,Google,1959,620,Yes,2020-11-19,2026-01-20,https://fonts.google.com/specimen/Noto+Sans+Buginese
+Noto Sans Buhid,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque english western european extended-latin european noto google international comprehensive,400,,buhid | latin | latin-ext,Google,1390,2042,Yes,2020-11-19,2025-09-16,https://fonts.google.com/specimen/Noto+Sans+Buhid
+Noto Sans Canadian Aboriginal,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque versatile multi-weight flexible variable variable-font responsive variable-weight english western european extended-latin european noto google international comprehensive,100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900,wght: -,canadian-aboriginal | latin | latin-ext | math | symbols,Google,1458,2174,Yes,2020-11-19,2025-09-16,https://fonts.google.com/specimen/Noto+Sans+Canadian+Aboriginal
+Noto Sans Carian,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque english western european extended-latin european noto google international comprehensive,400,,carian | latin | latin-ext,Google,1708,1281,Yes,2020-11-19,2025-09-04,https://fonts.google.com/specimen/Noto+Sans+Carian
+Noto Sans Caucasian Albanian,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque english western european extended-latin european noto google international comprehensive,400,,caucasian-albanian | latin | latin-ext,Google,1983,1514,Yes,2020-11-19,2025-09-16,https://fonts.google.com/specimen/Noto+Sans+Caucasian+Albanian
+Noto Sans Chakma,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque english western european extended-latin european noto google international comprehensive,400,,chakma | latin | latin-ext,Google,1952,530,Yes,2020-11-19,2026-01-20,https://fonts.google.com/specimen/Noto+Sans+Chakma
+Noto Sans Cham,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque versatile multi-weight flexible variable variable-font responsive variable-weight english western european extended-latin european noto google international comprehensive,100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900,wght: -,cham | latin | latin-ext,Google,1882,1183,Yes,2020-11-19,2025-09-16,https://fonts.google.com/specimen/Noto+Sans+Cham
+Noto Sans Cherokee,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque versatile multi-weight flexible variable variable-font responsive variable-weight english western european extended-latin european noto google international comprehensive,100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900,wght: -,cherokee | latin | latin-ext,Google,1846,1795,Yes,2020-11-19,2025-09-04,https://fonts.google.com/specimen/Noto+Sans+Cherokee
+Noto Sans Chorasmian,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque english western european extended-latin european noto google international comprehensive,400,,chorasmian | latin | latin-ext | math | symbols,Google,2028,2321,Yes,2023-05-23,2024-01-25,https://fonts.google.com/specimen/Noto+Sans+Chorasmian
+Noto Sans Coptic,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque english western european extended-latin european noto google international comprehensive,400,,coptic | latin | latin-ext,Google,1678,173,Yes,2020-11-19,2025-09-04,https://fonts.google.com/specimen/Noto+Sans+Coptic
+Noto Sans Cuneiform,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque english western european extended-latin european noto google international comprehensive,400,,cuneiform | latin | latin-ext,Google,1958,2148,Yes,2020-11-19,2025-09-16,https://fonts.google.com/specimen/Noto+Sans+Cuneiform
+Noto Sans Cypriot,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque english western european extended-latin european noto google international comprehensive,400,,cypriot | latin | latin-ext,Google,1990,581,Yes,2020-11-19,2025-09-04,https://fonts.google.com/specimen/Noto+Sans+Cypriot
+Noto Sans Cypro Minoan,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque english western european extended-latin european noto google international comprehensive,400,,cypro-minoan | latin | latin-ext,Google,1733,1917,Yes,2023-07-10,2025-05-30,https://fonts.google.com/specimen/Noto+Sans+Cypro+Minoan
+Noto Sans Deseret,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque english western european extended-latin european noto google international comprehensive,400,,deseret | latin | latin-ext,Google,2000,226,Yes,2020-11-19,2025-09-16,https://fonts.google.com/specimen/Noto+Sans+Deseret
+Noto Sans Devanagari,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque versatile multi-weight flexible variable variable-font responsive variable-weight variable-width hindi devanagari indian english western european extended-latin european noto google international comprehensive,100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900,wdth: - | wght: -,devanagari | latin | latin-ext,Google,310,1607,Yes,2020-11-19,2025-09-04,https://fonts.google.com/specimen/Noto+Sans+Devanagari
+Noto Sans Display,Sans Serif,Sans Serif,Display,clean modern minimal professional readable neutral geometric humanist grotesque headline hero decorative large-text attention versatile multi-weight flexible italic variable variable-font responsive variable-weight variable-width russian cyrillic slavic cyrillic extended greek greek extended english western european extended-latin european vietnamese multilingual international noto google international comprehensive well-known common,100 | 100i | 200 | 200i | 300 | 300i | 400 | 400i | 500 | 500i | 600 | 600i | 700 | 700i | 800 | 800i | 900 | 900i,wdth: - | wght: -,cyrillic | cyrillic-ext | greek | greek-ext | latin | latin-ext | vietnamese,Google,206,354,Yes,2020-11-19,2025-09-10,https://fonts.google.com/specimen/Noto+Sans+Display
+Noto Sans Duployan,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque english western european extended-latin european noto google international comprehensive,400 | 700,,duployan | latin | latin-ext,Google,1751,1907,Yes,2020-11-19,2025-09-16,https://fonts.google.com/specimen/Noto+Sans+Duployan
+Noto Sans Egyptian Hieroglyphs,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque english western european extended-latin european noto google international comprehensive,400,,egyptian-hieroglyphs | latin | latin-ext,Google,1884,751,Yes,2020-11-19,2025-09-16,https://fonts.google.com/specimen/Noto+Sans+Egyptian+Hieroglyphs
+Noto Sans Elbasan,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque english western european extended-latin european noto google international comprehensive,400,,elbasan | latin | latin-ext,Google,1792,1823,Yes,2020-11-19,2025-09-11,https://fonts.google.com/specimen/Noto+Sans+Elbasan
+Noto Sans Elymaic,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque english western european extended-latin european noto google international comprehensive,400,,elymaic | latin | latin-ext,Google,1939,188,Yes,2020-11-19,2025-09-16,https://fonts.google.com/specimen/Noto+Sans+Elymaic
+Noto Sans Ethiopic,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque versatile multi-weight flexible variable variable-font responsive variable-weight variable-width ethiopic amharic english western european extended-latin european noto google international comprehensive,100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900,wdth: - | wght: -,ethiopic | latin | latin-ext,Google,1190,54,Yes,2016-04-15,2025-09-16,https://fonts.google.com/specimen/Noto+Sans+Ethiopic
+Noto Sans Georgian,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque versatile multi-weight flexible variable variable-font responsive variable-weight variable-width cyrillic extended georgian greek extended english western european extended-latin european multilingual international noto google international comprehensive,100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900,wdth: - | wght: -,cyrillic-ext | georgian | greek-ext | latin | latin-ext | math | symbols,Google,737,62,Yes,2020-11-19,2025-09-04,https://fonts.google.com/specimen/Noto+Sans+Georgian
+Noto Sans Glagolitic,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque cyrillic extended english western european extended-latin european multilingual international noto google international comprehensive,400,,cyrillic-ext | glagolitic | latin | latin-ext | math | symbols,Google,1720,433,Yes,2020-11-19,2025-09-04,https://fonts.google.com/specimen/Noto+Sans+Glagolitic
+Noto Sans Gothic,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque english western european extended-latin european noto google international comprehensive,400,,gothic | latin | latin-ext,Google,1287,61,Yes,2020-11-19,2025-09-02,https://fonts.google.com/specimen/Noto+Sans+Gothic
+Noto Sans Grantha,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque english western european extended-latin european noto google international comprehensive,400,,grantha | latin | latin-ext,Google,1989,2170,Yes,2020-11-19,2025-09-16,https://fonts.google.com/specimen/Noto+Sans+Grantha
+Noto Sans Gujarati,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque versatile multi-weight flexible variable variable-font responsive variable-weight variable-width gujarati indian english western european extended-latin european noto google international comprehensive,100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900,wdth: - | wght: -,gujarati | latin | latin-ext | math | symbols,Google,1032,1533,Yes,2020-11-19,2025-09-16,https://fonts.google.com/specimen/Noto+Sans+Gujarati
+Noto Sans Gunjala Gondi,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque variable variable-font responsive variable-weight english western european extended-latin european noto google international comprehensive,400 | 500 | 600 | 700,wght: -,gunjala-gondi | latin | latin-ext,Google,1191,2277,Yes,2020-11-19,2025-09-10,https://fonts.google.com/specimen/Noto+Sans+Gunjala+Gondi
+Noto Sans Gurmukhi,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque versatile multi-weight flexible variable variable-font responsive variable-weight variable-width punjabi gurmukhi indian english western european extended-latin european noto google international comprehensive,100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900,wdth: - | wght: -,gurmukhi | latin | latin-ext,Google,1305,1163,Yes,2020-11-19,2025-09-04,https://fonts.google.com/specimen/Noto+Sans+Gurmukhi
+Noto Sans HK,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque versatile multi-weight flexible variable variable-font responsive variable-weight russian cyrillic slavic english western european extended-latin european vietnamese noto google international comprehensive,100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900,wght: -,chinese-hongkong | cyrillic | latin | latin-ext | vietnamese,Google,400,458,Yes,2019-03-12,2026-01-06,https://fonts.google.com/specimen/Noto+Sans+HK
+Noto Sans Hanifi Rohingya,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque variable variable-font responsive variable-weight english western european extended-latin european noto google international comprehensive,400 | 500 | 600 | 700,wght: -,hanifi-rohingya | latin | latin-ext,Google,1999,395,Yes,2020-11-19,2025-09-16,https://fonts.google.com/specimen/Noto+Sans+Hanifi+Rohingya
+Noto Sans Hanunoo,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque english western european extended-latin european noto google international comprehensive,400,,hanunoo | latin | latin-ext,Google,1611,2083,Yes,2020-11-19,2025-09-10,https://fonts.google.com/specimen/Noto+Sans+Hanunoo
+Noto Sans Hatran,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque english western european extended-latin european noto google international comprehensive,400,,hatran | latin | latin-ext,Google,1993,1714,Yes,2020-11-19,2025-09-11,https://fonts.google.com/specimen/Noto+Sans+Hatran
+Noto Sans Hebrew,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque versatile multi-weight flexible variable variable-font responsive variable-weight variable-width cyrillic extended greek extended hebrew RTL israeli english western european extended-latin european noto google international comprehensive well-known common,100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900,wdth: - | wght: -,cyrillic-ext | greek-ext | hebrew | latin | latin-ext,Google,251,59,Yes,2020-11-19,2025-09-04,https://fonts.google.com/specimen/Noto+Sans+Hebrew
+Noto Sans Imperial Aramaic,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque english western european extended-latin european noto google international comprehensive,400,,imperial-aramaic | latin | latin-ext,Google,1924,919,Yes,2020-11-19,2025-09-04,https://fonts.google.com/specimen/Noto+Sans+Imperial+Aramaic
+Noto Sans Indic Siyaq Numbers,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque english western european extended-latin european noto google international comprehensive,400,,indic-siyaq-numbers | latin | latin-ext,Google,1853,855,Yes,2020-11-19,2025-09-04,https://fonts.google.com/specimen/Noto+Sans+Indic+Siyaq+Numbers
+Noto Sans Inscriptional Pahlavi,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque english western european extended-latin european noto google international comprehensive,400,,inscriptional-pahlavi | latin | latin-ext,Google,1915,712,Yes,2020-11-19,2025-09-04,https://fonts.google.com/specimen/Noto+Sans+Inscriptional+Pahlavi
+Noto Sans Inscriptional Parthian,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque english western european extended-latin european noto google international comprehensive,400,,inscriptional-parthian | latin | latin-ext,Google,1975,617,Yes,2020-11-19,2025-09-04,https://fonts.google.com/specimen/Noto+Sans+Inscriptional+Parthian
+Noto Sans JP,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque versatile multi-weight flexible variable variable-font responsive variable-weight russian cyrillic slavic japanese kanji hiragana katakana english western european extended-latin european vietnamese noto google international comprehensive top-popular trending most-used,100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900,wght: -,cyrillic | japanese | latin | latin-ext | vietnamese,Google,5,1192,Yes,2015-01-29,2026-01-06,https://fonts.google.com/specimen/Noto+Sans+JP
+Noto Sans Javanese,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque variable variable-font responsive variable-weight english western european extended-latin european noto google international comprehensive,400 | 500 | 600 | 700,wght: -,javanese | latin | latin-ext,Google,1642,1654,Yes,2020-11-19,2025-09-11,https://fonts.google.com/specimen/Noto+Sans+Javanese
+Noto Sans KR,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque versatile multi-weight flexible variable variable-font responsive variable-weight russian cyrillic slavic korean hangul english western european extended-latin european vietnamese noto google international comprehensive top-popular trending most-used,100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900,wght: -,cyrillic | korean | latin | latin-ext | vietnamese,Google,31,330,Yes,2018-02-05,2026-01-06,https://fonts.google.com/specimen/Noto+Sans+KR
+Noto Sans Kaithi,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque english western european extended-latin european noto google international comprehensive,400,,kaithi | latin | latin-ext,Google,1131,4,Yes,2020-11-19,2025-09-08,https://fonts.google.com/specimen/Noto+Sans+Kaithi
+Noto Sans Kannada,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque versatile multi-weight flexible variable variable-font responsive variable-weight variable-width kannada indian english western european extended-latin european noto google international comprehensive,100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900,wdth: - | wght: -,kannada | latin | latin-ext,Google,786,630,Yes,2020-11-19,2026-03-03,https://fonts.google.com/specimen/Noto+Sans+Kannada
+Noto Sans Kawi,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque variable variable-font responsive variable-weight english western european extended-latin european noto google international comprehensive,400 | 500 | 600 | 700,wght: -,kawi | latin | latin-ext,Google,1968,1799,Yes,2023-06-27,2025-09-11,https://fonts.google.com/specimen/Noto+Sans+Kawi
+Noto Sans Kayah Li,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque variable variable-font responsive variable-weight english western european extended-latin european noto google international comprehensive,400 | 500 | 600 | 700,wght: -,kayah-li | latin | latin-ext,Google,2015,647,Yes,2020-11-19,2025-09-16,https://fonts.google.com/specimen/Noto+Sans+Kayah+Li
+Noto Sans Kharoshthi,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque english western european extended-latin european noto google international comprehensive,400,,kharoshthi | latin | latin-ext,Google,2045,416,Yes,2020-11-19,2025-09-04,https://fonts.google.com/specimen/Noto+Sans+Kharoshthi
+Noto Sans Khmer,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque versatile multi-weight flexible variable variable-font responsive variable-weight variable-width khmer cambodian english western european extended-latin european noto google international comprehensive,100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900,wdth: - | wght: -,khmer | latin | latin-ext,Google,921,302,Yes,2020-11-19,2025-09-11,https://fonts.google.com/specimen/Noto+Sans+Khmer
+Noto Sans Khojki,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque english western european extended-latin european noto google international comprehensive,400,,khojki | latin | latin-ext,Google,1874,2292,Yes,2020-11-19,2025-09-08,https://fonts.google.com/specimen/Noto+Sans+Khojki
+Noto Sans Khudawadi,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque english western european extended-latin european noto google international comprehensive,400,,khudawadi | latin | latin-ext,Google,2010,1995,Yes,2020-11-19,2025-09-11,https://fonts.google.com/specimen/Noto+Sans+Khudawadi
+Noto Sans Lao,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque versatile multi-weight flexible variable variable-font responsive variable-weight variable-width lao laotian english western european extended-latin european noto google international comprehensive,100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900,wdth: - | wght: -,lao | latin | latin-ext,Google,1273,962,Yes,2020-11-19,2025-09-02,https://fonts.google.com/specimen/Noto+Sans+Lao
+Noto Sans Lao Looped,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque versatile multi-weight flexible variable variable-font responsive variable-weight variable-width lao laotian english western european extended-latin european noto google international comprehensive,100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900,wdth: - | wght: -,lao | latin | latin-ext,Google,1163,2255,Yes,2022-09-05,2025-09-16,https://fonts.google.com/specimen/Noto+Sans+Lao+Looped
+Noto Sans Lepcha,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque english western european extended-latin european noto google international comprehensive,400,,latin | latin-ext | lepcha,Google,2029,811,Yes,2020-11-19,2025-09-08,https://fonts.google.com/specimen/Noto+Sans+Lepcha
+Noto Sans Limbu,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque english western european extended-latin european noto google international comprehensive,400,,latin | latin-ext | limbu,Google,1998,1730,Yes,2020-11-19,2025-09-04,https://fonts.google.com/specimen/Noto+Sans+Limbu
+Noto Sans Linear A,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque english western european extended-latin european noto google international comprehensive,400,,latin | latin-ext | linear-a,Google,1823,1938,Yes,2020-11-19,2025-09-11,https://fonts.google.com/specimen/Noto+Sans+Linear+A
+Noto Sans Linear B,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque english western european extended-latin european noto google international comprehensive,400,,latin | latin-ext | linear-b,Google,1978,999,Yes,2020-11-19,2025-09-11,https://fonts.google.com/specimen/Noto+Sans+Linear+B
+Noto Sans Lisu,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque variable variable-font responsive variable-weight english western european extended-latin european noto google international comprehensive,400 | 500 | 600 | 700,wght: -,latin | latin-ext | lisu,Google,1858,1905,Yes,2020-11-19,2025-09-10,https://fonts.google.com/specimen/Noto+Sans+Lisu
+Noto Sans Lycian,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque noto google international comprehensive,400,,lycian,Google,2050,608,Yes,2020-11-19,2025-09-08,https://fonts.google.com/specimen/Noto+Sans+Lycian
+Noto Sans Lydian,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque english western european extended-latin european noto google international comprehensive,400,,latin | latin-ext | lydian,Google,1872,109,Yes,2020-11-19,2025-09-04,https://fonts.google.com/specimen/Noto+Sans+Lydian
+Noto Sans Mahajani,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque english western european extended-latin european noto google international comprehensive,400,,latin | latin-ext | mahajani,Google,1859,687,Yes,2020-11-19,2025-09-11,https://fonts.google.com/specimen/Noto+Sans+Mahajani
+Noto Sans Malayalam,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque versatile multi-weight flexible variable variable-font responsive variable-weight variable-width english western european extended-latin european malayalam indian noto google international comprehensive,100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900,wdth: - | wght: -,latin | latin-ext | malayalam,Google,500,721,Yes,2020-11-19,2025-09-11,https://fonts.google.com/specimen/Noto+Sans+Malayalam
+Noto Sans Mandaic,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque english western european extended-latin european noto google international comprehensive,400,,latin | latin-ext | mandaic,Google,1986,1702,Yes,2020-11-19,2025-09-16,https://fonts.google.com/specimen/Noto+Sans+Mandaic
+Noto Sans Manichaean,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque english western european extended-latin european noto google international comprehensive,400,,latin | latin-ext | manichaean,Google,2033,849,Yes,2020-11-19,2025-09-10,https://fonts.google.com/specimen/Noto+Sans+Manichaean
+Noto Sans Marchen,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque english western european extended-latin european noto google international comprehensive,400,,latin | latin-ext | marchen,Google,1804,60,Yes,2020-11-19,2025-09-10,https://fonts.google.com/specimen/Noto+Sans+Marchen
+Noto Sans Masaram Gondi,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque english western european extended-latin european noto google international comprehensive,400,,latin | latin-ext | masaram-gondi,Google,2036,436,Yes,2020-11-19,2026-01-20,https://fonts.google.com/specimen/Noto+Sans+Masaram+Gondi
+Noto Sans Math,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque russian cyrillic slavic english western european noto google international comprehensive,400,,cyrillic | latin | math,Google,804,1806,Yes,2020-11-19,2025-09-02,https://fonts.google.com/specimen/Noto+Sans+Math
+Noto Sans Mayan Numerals,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque english western european extended-latin european noto google international comprehensive,400,,latin | latin-ext | mayan-numerals,Google,1951,318,Yes,2020-11-19,2025-09-11,https://fonts.google.com/specimen/Noto+Sans+Mayan+Numerals
+Noto Sans Medefaidrin,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque variable variable-font responsive variable-weight english western european extended-latin european noto google international comprehensive,400 | 500 | 600 | 700,wght: -,latin | latin-ext | medefaidrin,Google,1828,357,Yes,2020-11-19,2025-09-16,https://fonts.google.com/specimen/Noto+Sans+Medefaidrin
+Noto Sans Meetei Mayek,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque versatile multi-weight flexible variable variable-font responsive variable-weight english western european extended-latin european noto google international comprehensive,100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900,wght: -,latin | latin-ext | meetei-mayek,Google,1001,2026,Yes,2020-11-19,2025-09-08,https://fonts.google.com/specimen/Noto+Sans+Meetei+Mayek
+Noto Sans Mende Kikakui,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque english western european extended-latin european noto google international comprehensive,400,,latin | latin-ext | mende-kikakui,Google,2020,1385,Yes,2020-11-19,2026-01-20,https://fonts.google.com/specimen/Noto+Sans+Mende+Kikakui
+Noto Sans Meroitic,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque english western european extended-latin european noto google international comprehensive,400,,latin | latin-ext | meroitic | meroitic-cursive | meroitic-hieroglyphs,Google,2042,540,Yes,2020-11-19,2025-09-04,https://fonts.google.com/specimen/Noto+Sans+Meroitic
+Noto Sans Miao,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque english western european extended-latin european noto google international comprehensive,400,,latin | latin-ext | miao,Google,1905,1389,Yes,2020-11-19,2026-01-20,https://fonts.google.com/specimen/Noto+Sans+Miao
+Noto Sans Modi,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque english western european extended-latin european noto google international comprehensive,400,,latin | latin-ext | modi,Google,1991,2118,Yes,2020-11-19,2025-09-10,https://fonts.google.com/specimen/Noto+Sans+Modi
+Noto Sans Mongolian,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque english western european extended-latin european noto google international comprehensive,400,,latin | latin-ext | math | mongolian | symbols,Google,1744,2268,Yes,2020-11-19,2025-09-16,https://fonts.google.com/specimen/Noto+Sans+Mongolian
+Noto Sans Mono,Sans Serif,Sans Serif,Monospace,clean modern minimal professional readable neutral geometric humanist grotesque mono fixed-width tabular data code versatile multi-weight flexible variable variable-font responsive variable-weight variable-width russian cyrillic slavic cyrillic extended greek greek extended english western european extended-latin european vietnamese multilingual international noto google international comprehensive well-known common,100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900,wdth: - | wght: -,cyrillic | cyrillic-ext | greek | greek-ext | latin | latin-ext | vietnamese,Google,299,1568,Yes,2020-11-19,2025-09-10,https://fonts.google.com/specimen/Noto+Sans+Mono
+Noto Sans Mro,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque english western european extended-latin european noto google international comprehensive,400,,latin | latin-ext | mro,Google,1982,2210,Yes,2020-11-19,2026-01-20,https://fonts.google.com/specimen/Noto+Sans+Mro
+Noto Sans Multani,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque english western european extended-latin european noto google international comprehensive,400,,latin | latin-ext | multani,Google,1765,324,Yes,2020-11-19,2026-01-20,https://fonts.google.com/specimen/Noto+Sans+Multani
+Noto Sans Myanmar,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque versatile multi-weight flexible variable variable-font responsive variable-weight variable-width english western european extended-latin european myanmar burmese noto google international comprehensive,100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900,wdth: - | wght: -,latin | latin-ext | myanmar,Google,930,629,Yes,2020-11-19,2026-01-20,https://fonts.google.com/specimen/Noto+Sans+Myanmar
+Noto Sans NKo,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque english western european extended-latin european noto google international comprehensive,400,,latin | latin-ext | nko,Google,1745,33,Yes,2020-11-19,2025-09-16,https://fonts.google.com/specimen/Noto+Sans+NKo
+Noto Sans NKo Unjoined,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque variable variable-font responsive variable-weight english western european extended-latin european noto google international comprehensive,400 | 500 | 600 | 700,wght: -,latin | latin-ext | nko,Google,1963,298,Yes,2023-09-26,2025-09-08,https://fonts.google.com/specimen/Noto+Sans+NKo+Unjoined
+Noto Sans Nabataean,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque english western european extended-latin european noto google international comprehensive,400,,latin | latin-ext | nabataean,Google,2023,543,Yes,2020-11-19,2025-09-08,https://fonts.google.com/specimen/Noto+Sans+Nabataean
+Noto Sans Nag Mundari,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque variable variable-font responsive variable-weight english western european extended-latin european noto google international comprehensive,400 | 500 | 600 | 700,wght: -,latin | latin-ext | nag-mundari,Google,1769,1606,Yes,2023-05-08,2025-09-08,https://fonts.google.com/specimen/Noto+Sans+Nag+Mundari
+Noto Sans Nandinagari,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque english western european extended-latin european noto google international comprehensive,400,,latin | latin-ext | nandinagari,Google,1596,69,Yes,2023-05-08,2023-10-25,https://fonts.google.com/specimen/Noto+Sans+Nandinagari
+Noto Sans New Tai Lue,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque variable variable-font responsive variable-weight english western european extended-latin european noto google international comprehensive,400 | 500 | 600 | 700,wght: -,latin | latin-ext | new-tai-lue,Google,1947,2090,Yes,2020-11-19,2025-09-02,https://fonts.google.com/specimen/Noto+Sans+New+Tai+Lue
+Noto Sans Newa,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque english western european extended-latin european noto google international comprehensive,400,,latin | latin-ext | newa,Google,1835,1398,Yes,2020-11-19,2026-01-20,https://fonts.google.com/specimen/Noto+Sans+Newa
+Noto Sans Nushu,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque english western european extended-latin european noto google international comprehensive,400,,latin | latin-ext | nushu,Google,2012,1512,Yes,2020-11-19,2025-09-16,https://fonts.google.com/specimen/Noto+Sans+Nushu
+Noto Sans Ogham,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque english western european extended-latin european noto google international comprehensive,400,,latin | latin-ext | ogham,Google,2026,593,Yes,2020-11-19,2025-09-04,https://fonts.google.com/specimen/Noto+Sans+Ogham
+Noto Sans Ol Chiki,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque variable variable-font responsive variable-weight english western european extended-latin european noto google international comprehensive,400 | 500 | 600 | 700,wght: -,latin | latin-ext | ol-chiki,Google,1913,2217,Yes,2020-11-19,2025-09-10,https://fonts.google.com/specimen/Noto+Sans+Ol+Chiki
+Noto Sans Old Hungarian,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque english western european extended-latin european noto google international comprehensive,400,,latin | latin-ext | old-hungarian,Google,1807,1998,Yes,2020-11-19,2025-09-16,https://fonts.google.com/specimen/Noto+Sans+Old+Hungarian
+Noto Sans Old Italic,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque english western european extended-latin european noto google international comprehensive,400,,latin | latin-ext | old-italic,Google,1815,988,Yes,2020-11-19,2025-09-08,https://fonts.google.com/specimen/Noto+Sans+Old+Italic
+Noto Sans Old North Arabian,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque english western european extended-latin european noto google international comprehensive,400,,latin | latin-ext | old-north-arabian,Google,1755,133,Yes,2020-11-19,2025-09-11,https://fonts.google.com/specimen/Noto+Sans+Old+North+Arabian
+Noto Sans Old Permic,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque cyrillic extended english western european extended-latin european noto google international comprehensive,400,,cyrillic-ext | latin | latin-ext | old-permic,Google,1866,46,Yes,2020-11-19,2025-09-10,https://fonts.google.com/specimen/Noto+Sans+Old+Permic
+Noto Sans Old Persian,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque english western european extended-latin european noto google international comprehensive,400,,latin | latin-ext | old-persian,Google,1810,1547,Yes,2020-11-19,2025-09-08,https://fonts.google.com/specimen/Noto+Sans+Old+Persian
+Noto Sans Old Sogdian,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque english western european extended-latin european noto google international comprehensive,400,,latin | latin-ext | old-sogdian,Google,2009,524,Yes,2020-11-19,2025-09-10,https://fonts.google.com/specimen/Noto+Sans+Old+Sogdian
+Noto Sans Old South Arabian,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque english western european extended-latin european noto google international comprehensive,400,,latin | latin-ext | old-south-arabian,Google,1937,741,Yes,2020-11-19,2025-09-16,https://fonts.google.com/specimen/Noto+Sans+Old+South+Arabian
+Noto Sans Old Turkic,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque english western european extended-latin european noto google international comprehensive,400,,latin | latin-ext | old-turkic,Google,1936,126,Yes,2020-11-19,2025-09-10,https://fonts.google.com/specimen/Noto+Sans+Old+Turkic
+Noto Sans Oriya,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque versatile multi-weight flexible variable variable-font responsive variable-weight variable-width english western european extended-latin european odia oriya indian noto google international comprehensive,100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900,wdth: - | wght: -,latin | latin-ext | oriya,Google,919,36,Yes,2020-11-19,2026-02-19,https://fonts.google.com/specimen/Noto+Sans+Oriya
+Noto Sans Osage,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque english western european extended-latin european noto google international comprehensive,400,,latin | latin-ext | osage,Google,1868,659,Yes,2020-11-19,2026-01-20,https://fonts.google.com/specimen/Noto+Sans+Osage
+Noto Sans Osmanya,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque english western european extended-latin european noto google international comprehensive,400,,latin | latin-ext | osmanya,Google,1348,745,Yes,2020-11-19,2026-01-20,https://fonts.google.com/specimen/Noto+Sans+Osmanya
+Noto Sans Pahawh Hmong,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque english western european extended-latin european noto google international comprehensive,400,,latin | latin-ext | pahawh-hmong,Google,1969,240,Yes,2020-11-19,2026-01-20,https://fonts.google.com/specimen/Noto+Sans+Pahawh+Hmong
+Noto Sans Palmyrene,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque english western european extended-latin european noto google international comprehensive,400,,latin | latin-ext | palmyrene,Google,1734,145,Yes,2020-11-19,2025-09-02,https://fonts.google.com/specimen/Noto+Sans+Palmyrene
+Noto Sans Pau Cin Hau,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque english western european extended-latin european noto google international comprehensive,400,,latin | latin-ext | pau-cin-hau,Google,2005,736,Yes,2020-11-19,2025-09-04,https://fonts.google.com/specimen/Noto+Sans+Pau+Cin+Hau
+Noto Sans PhagsPa,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque english western european extended-latin european noto google international comprehensive,400,,latin | latin-ext | math | phags-pa | symbols,Google,2025,1815,Yes,2020-11-19,2025-09-10,https://fonts.google.com/specimen/Noto+Sans+PhagsPa
+Noto Sans Phoenician,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque english western european extended-latin european noto google international comprehensive,400,,latin | latin-ext | phoenician,Google,1997,260,Yes,2020-11-19,2025-09-11,https://fonts.google.com/specimen/Noto+Sans+Phoenician
+Noto Sans Psalter Pahlavi,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque english western european extended-latin european noto google international comprehensive,400,,latin | latin-ext | psalter-pahlavi,Google,1970,556,Yes,2020-11-19,2025-09-10,https://fonts.google.com/specimen/Noto+Sans+Psalter+Pahlavi
+Noto Sans Rejang,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque english western european extended-latin european noto google international comprehensive,400,,latin | latin-ext | rejang,Google,1966,1331,Yes,2020-11-19,2025-12-10,https://fonts.google.com/specimen/Noto+Sans+Rejang
+Noto Sans Runic,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque english western european extended-latin european noto google international comprehensive,400,,latin | latin-ext | runic,Google,1920,470,Yes,2020-11-19,2025-09-11,https://fonts.google.com/specimen/Noto+Sans+Runic
+Noto Sans SC,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque versatile multi-weight flexible variable variable-font responsive variable-weight chinese simplified mandarin russian cyrillic slavic english western european extended-latin european vietnamese noto google international comprehensive popular widely-used,100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900,wght: -,chinese-simplified | cyrillic | latin | latin-ext | vietnamese,Google,77,382,Yes,2018-10-22,2026-01-06,https://fonts.google.com/specimen/Noto+Sans+SC
+Noto Sans Samaritan,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque english western european extended-latin european noto google international comprehensive,400,,latin | latin-ext | samaritan,Google,1432,2273,Yes,2020-11-19,2025-09-10,https://fonts.google.com/specimen/Noto+Sans+Samaritan
+Noto Sans Saurashtra,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque english western european extended-latin european noto google international comprehensive,400,,latin | latin-ext | saurashtra,Google,1979,474,Yes,2020-11-19,2025-09-16,https://fonts.google.com/specimen/Noto+Sans+Saurashtra
+Noto Sans Sharada,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque english western european extended-latin european noto google international comprehensive,400,,latin | latin-ext | sharada,Google,1948,1486,Yes,2020-11-19,2026-01-20,https://fonts.google.com/specimen/Noto+Sans+Sharada
+Noto Sans Shavian,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque english western european extended-latin european noto google international comprehensive,400,,latin | latin-ext | shavian,Google,1692,42,Yes,2020-11-19,2025-09-02,https://fonts.google.com/specimen/Noto+Sans+Shavian
+Noto Sans Siddham,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque english western european extended-latin european noto google international comprehensive,400,,latin | latin-ext | siddham,Google,2031,739,Yes,2020-11-19,2025-09-10,https://fonts.google.com/specimen/Noto+Sans+Siddham
+Noto Sans SignWriting,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque english western european extended-latin european noto google international comprehensive,400,,latin | latin-ext | signwriting,Google,1935,799,Yes,2022-10-30,2025-09-02,https://fonts.google.com/specimen/Noto+Sans+SignWriting
+Noto Sans Sinhala,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque versatile multi-weight flexible variable variable-font responsive variable-weight variable-width english western european extended-latin european sinhala sri-lankan noto google international comprehensive,100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900,wdth: - | wght: -,latin | latin-ext | sinhala,Google,796,1406,Yes,2020-11-19,2025-09-17,https://fonts.google.com/specimen/Noto+Sans+Sinhala
+Noto Sans Sogdian,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque english western european extended-latin european noto google international comprehensive,400,,latin | latin-ext | sogdian,Google,1833,181,Yes,2020-11-19,2025-09-11,https://fonts.google.com/specimen/Noto+Sans+Sogdian
+Noto Sans Sora Sompeng,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque variable variable-font responsive variable-weight english western european extended-latin european noto google international comprehensive,400 | 500 | 600 | 700,wght: -,latin | latin-ext | sora-sompeng,Google,1496,448,Yes,2020-11-19,2025-09-10,https://fonts.google.com/specimen/Noto+Sans+Sora+Sompeng
+Noto Sans Soyombo,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque english western european extended-latin european noto google international comprehensive,400,,latin | latin-ext | soyombo,Google,2024,1952,Yes,2020-11-19,2025-09-16,https://fonts.google.com/specimen/Noto+Sans+Soyombo
+Noto Sans Sundanese,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque variable variable-font responsive variable-weight english western european extended-latin european noto google international comprehensive,400 | 500 | 600 | 700,wght: -,latin | latin-ext | sundanese,Google,1918,1301,Yes,2020-11-19,2025-09-11,https://fonts.google.com/specimen/Noto+Sans+Sundanese
+Noto Sans Sunuwar,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque english western european extended-latin european noto google international comprehensive,400,,latin | latin-ext | sunuwar,Google,1848,38,Yes,2025-06-26,2025-06-26,https://fonts.google.com/specimen/Noto+Sans+Sunuwar
+Noto Sans Syloti Nagri,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque english western european extended-latin european noto google international comprehensive,400,,latin | latin-ext | syloti-nagri,Google,1627,2130,Yes,2020-11-19,2025-09-04,https://fonts.google.com/specimen/Noto+Sans+Syloti+Nagri
+Noto Sans Symbols,Sans Serif,Sans Serif,Symbols,clean modern minimal professional readable neutral geometric humanist grotesque icon symbol emoji pictograph versatile multi-weight flexible variable variable-font responsive variable-weight english western european extended-latin european noto google international comprehensive,100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900,wght: -,latin | latin-ext | symbols,Google,445,2220,Yes,2020-11-19,2025-09-02,https://fonts.google.com/specimen/Noto+Sans+Symbols
+Noto Sans Symbols 2,Sans Serif,Sans Serif,Symbols,clean modern minimal professional readable neutral geometric humanist grotesque icon symbol emoji pictograph english western european extended-latin european multilingual international noto google international comprehensive,400,,braille | latin | latin-ext | math | mayan-numerals | symbols,Google,1161,423,Yes,2020-11-19,2025-09-04,https://fonts.google.com/specimen/Noto+Sans+Symbols+2
+Noto Sans Syriac,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque versatile multi-weight flexible variable variable-font responsive variable-weight english western european extended-latin european noto google international comprehensive,100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900,wght: -,latin | latin-ext | syriac,Google,1736,881,Yes,2020-11-19,2025-09-04,https://fonts.google.com/specimen/Noto+Sans+Syriac
+Noto Sans Syriac Eastern,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque versatile multi-weight flexible variable variable-font responsive variable-weight english western european extended-latin european noto google international comprehensive,100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900,wght: -,latin | latin-ext | syriac,Google,1762,179,Yes,2023-07-10,2025-09-02,https://fonts.google.com/specimen/Noto+Sans+Syriac+Eastern
+Noto Sans Syriac Western,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque versatile multi-weight flexible variable variable-font responsive variable-weight english western european extended-latin european noto google international comprehensive,100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900,wght: -,latin | latin-ext | syriac,Google,1977,1252,Yes,2025-10-28,2025-10-29,https://fonts.google.com/specimen/Noto+Sans+Syriac+Western
+Noto Sans TC,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque versatile multi-weight flexible variable variable-font responsive variable-weight chinese traditional russian cyrillic slavic english western european extended-latin european vietnamese noto google international comprehensive top-popular trending most-used,100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900,wght: -,chinese-traditional | cyrillic | latin | latin-ext | vietnamese,Google,42,404,Yes,2018-10-22,2026-01-06,https://fonts.google.com/specimen/Noto+Sans+TC
+Noto Sans Tagalog,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque english western european extended-latin european noto google international comprehensive,400,,latin | latin-ext | tagalog,Google,1408,1864,Yes,2020-11-19,2025-09-16,https://fonts.google.com/specimen/Noto+Sans+Tagalog
+Noto Sans Tagbanwa,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque english western european extended-latin european noto google international comprehensive,400,,latin | latin-ext | tagbanwa,Google,1916,1020,Yes,2020-11-19,2026-01-20,https://fonts.google.com/specimen/Noto+Sans+Tagbanwa
+Noto Sans Tai Le,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque english western european extended-latin european noto google international comprehensive,400,,latin | latin-ext | tai-le,Google,1900,341,Yes,2020-11-19,2026-01-20,https://fonts.google.com/specimen/Noto+Sans+Tai+Le
+Noto Sans Tai Tham,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque variable variable-font responsive variable-weight english western european extended-latin european noto google international comprehensive,400 | 500 | 600 | 700,wght: -,latin | latin-ext | tai-tham,Google,1934,877,Yes,2020-11-19,2025-09-16,https://fonts.google.com/specimen/Noto+Sans+Tai+Tham
+Noto Sans Tai Viet,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque english western european extended-latin european noto google international comprehensive,400,,latin | latin-ext | tai-viet,Google,1470,1391,Yes,2020-11-19,2025-09-16,https://fonts.google.com/specimen/Noto+Sans+Tai+Viet
+Noto Sans Takri,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque english western european extended-latin european noto google international comprehensive,400,,latin | latin-ext | takri,Google,1764,84,Yes,2020-11-19,2025-09-04,https://fonts.google.com/specimen/Noto+Sans+Takri
+Noto Sans Tamil,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque versatile multi-weight flexible variable variable-font responsive variable-weight variable-width english western european extended-latin european tamil indian noto google international comprehensive,100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900,wdth: - | wght: -,latin | latin-ext | tamil,Google,314,614,Yes,2020-11-19,2025-09-16,https://fonts.google.com/specimen/Noto+Sans+Tamil
+Noto Sans Tamil Supplement,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque english western european extended-latin european noto google international comprehensive,400,,latin | latin-ext | tamil-supplement,Google,1953,640,Yes,2020-11-19,2025-09-17,https://fonts.google.com/specimen/Noto+Sans+Tamil+Supplement
+Noto Sans Tangsa,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque variable variable-font responsive variable-weight english western european extended-latin european noto google international comprehensive,400 | 500 | 600 | 700,wght: -,latin | latin-ext | tangsa,Google,1753,228,Yes,2022-09-11,2025-09-16,https://fonts.google.com/specimen/Noto+Sans+Tangsa
+Noto Sans Telugu,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque versatile multi-weight flexible variable variable-font responsive variable-weight variable-width english western european extended-latin european telugu indian noto google international comprehensive popular widely-used,100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900,wdth: - | wght: -,latin | latin-ext | telugu,Google,101,986,Yes,2020-11-19,2025-09-08,https://fonts.google.com/specimen/Noto+Sans+Telugu
+Noto Sans Thaana,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque versatile multi-weight flexible variable variable-font responsive variable-weight english western european extended-latin european noto google international comprehensive,100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900,wght: -,latin | latin-ext | thaana,Google,1368,2261,Yes,2020-11-19,2025-09-04,https://fonts.google.com/specimen/Noto+Sans+Thaana
+Noto Sans Thai,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque versatile multi-weight flexible variable variable-font responsive variable-weight variable-width english western european extended-latin european thai southeast-asia noto google international comprehensive popular widely-used,100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900,wdth: - | wght: -,latin | latin-ext | thai,Google,144,349,Yes,2020-11-19,2025-09-04,https://fonts.google.com/specimen/Noto+Sans+Thai
+Noto Sans Thai Looped,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque versatile multi-weight flexible variable variable-font responsive variable-weight variable-width english western european extended-latin european thai southeast-asia noto google international comprehensive,100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900,wdth: - | wght: -,latin | latin-ext | thai,Google,1010,582,Yes,2020-11-19,2025-09-04,https://fonts.google.com/specimen/Noto+Sans+Thai+Looped
+Noto Sans Tifinagh,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque english western european extended-latin european noto google international comprehensive,400,,latin | latin-ext | tifinagh,Google,1816,774,Yes,2020-11-19,2025-09-10,https://fonts.google.com/specimen/Noto+Sans+Tifinagh
+Noto Sans Tirhuta,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque english western european extended-latin european noto google international comprehensive,400,,latin | latin-ext | tirhuta,Google,1965,117,Yes,2020-11-19,2025-09-04,https://fonts.google.com/specimen/Noto+Sans+Tirhuta
+Noto Sans Ugaritic,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque english western european extended-latin european noto google international comprehensive,400,,latin | latin-ext | ugaritic,Google,2002,798,Yes,2020-11-19,2025-09-16,https://fonts.google.com/specimen/Noto+Sans+Ugaritic
+Noto Sans Vai,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque english western european extended-latin european noto google international comprehensive,400,,latin | latin-ext | vai,Google,1926,265,Yes,2020-11-19,2026-01-20,https://fonts.google.com/specimen/Noto+Sans+Vai
+Noto Sans Vithkuqi,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque variable variable-font responsive variable-weight english western european extended-latin european noto google international comprehensive,400 | 500 | 600 | 700,wght: -,latin | latin-ext | vithkuqi,Google,1809,113,Yes,2022-10-10,2025-09-16,https://fonts.google.com/specimen/Noto+Sans+Vithkuqi
+Noto Sans Wancho,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque english western european extended-latin european noto google international comprehensive,400,,latin | latin-ext | wancho,Google,1932,1197,Yes,2020-11-19,2026-01-20,https://fonts.google.com/specimen/Noto+Sans+Wancho
+Noto Sans Warang Citi,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque english western european extended-latin european noto google international comprehensive,400,,latin | latin-ext | warang-citi,Google,1383,2271,Yes,2020-11-19,2026-01-20,https://fonts.google.com/specimen/Noto+Sans+Warang+Citi
+Noto Sans Yi,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque english western european extended-latin european noto google international comprehensive,400,,latin | latin-ext | yi,Google,1788,313,Yes,2020-11-19,2026-01-20,https://fonts.google.com/specimen/Noto+Sans+Yi
+Noto Sans Zanabazar Square,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque english western european extended-latin european noto google international comprehensive,400,,latin | latin-ext | zanabazar-square,Google,1925,311,Yes,2020-11-19,2025-09-16,https://fonts.google.com/specimen/Noto+Sans+Zanabazar+Square
+Noto Serif,Serif,Serif,,elegant traditional classic refined literary editorial transitional oldstyle didone versatile multi-weight flexible italic variable variable-font responsive variable-weight variable-width russian cyrillic slavic cyrillic extended greek greek extended english western european extended-latin european vietnamese multilingual international noto google international comprehensive popular widely-used,100 | 100i | 200 | 200i | 300 | 300i | 400 | 400i | 500 | 500i | 600 | 600i | 700 | 700i | 800 | 800i | 900 | 900i,wdth: - | wght: -,cyrillic | cyrillic-ext | greek | greek-ext | latin | latin-ext | math | vietnamese,Google,58,574,Yes,2013-02-27,2025-09-05,https://fonts.google.com/specimen/Noto+Serif
+Noto Serif Ahom,Serif,Serif,,elegant traditional classic refined literary editorial transitional oldstyle didone english western european extended-latin european noto google international comprehensive,400,,ahom | latin | latin-ext,Google,1422,489,Yes,2020-11-19,2025-09-08,https://fonts.google.com/specimen/Noto+Serif+Ahom
+Noto Serif Armenian,Serif,Serif,,elegant traditional classic refined literary editorial transitional oldstyle didone versatile multi-weight flexible variable variable-font responsive variable-weight variable-width armenian english western european extended-latin european noto google international comprehensive,100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900,wdth: - | wght: -,armenian | latin | latin-ext,Google,1548,390,Yes,2020-11-19,2025-09-04,https://fonts.google.com/specimen/Noto+Serif+Armenian
+Noto Serif Balinese,Serif,Serif,,elegant traditional classic refined literary editorial transitional oldstyle didone english western european extended-latin european noto google international comprehensive,400,,balinese | latin | latin-ext,Google,1756,2024,Yes,2020-11-19,2025-09-11,https://fonts.google.com/specimen/Noto+Serif+Balinese
+Noto Serif Bengali,Serif,Serif,,elegant traditional classic refined literary editorial transitional oldstyle didone versatile multi-weight flexible variable variable-font responsive variable-weight variable-width bengali bangladeshi indian english western european extended-latin european noto google international comprehensive well-known common,100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900,wdth: - | wght: -,bengali | latin | latin-ext,Google,290,70,Yes,2020-11-19,2025-09-17,https://fonts.google.com/specimen/Noto+Serif+Bengali
+Noto Serif Devanagari,Serif,Serif,,elegant traditional classic refined literary editorial transitional oldstyle didone versatile multi-weight flexible variable variable-font responsive variable-weight variable-width hindi devanagari indian english western european extended-latin european noto google international comprehensive,100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900,wdth: - | wght: -,devanagari | latin | latin-ext,Google,386,27,Yes,2020-11-19,2025-09-11,https://fonts.google.com/specimen/Noto+Serif+Devanagari
+Noto Serif Display,Serif,Serif,Display,elegant traditional classic refined literary editorial transitional oldstyle didone headline hero decorative large-text attention versatile multi-weight flexible italic variable variable-font responsive variable-weight variable-width russian cyrillic slavic cyrillic extended greek greek extended english western european extended-latin european vietnamese multilingual international noto google international comprehensive,100 | 100i | 200 | 200i | 300 | 300i | 400 | 400i | 500 | 500i | 600 | 600i | 700 | 700i | 800 | 800i | 900 | 900i,wdth: - | wght: -,cyrillic | cyrillic-ext | greek | greek-ext | latin | latin-ext | vietnamese,Google,472,1209,Yes,2020-11-19,2025-09-05,https://fonts.google.com/specimen/Noto+Serif+Display
+Noto Serif Dives Akuru,Serif,Serif,,elegant traditional classic refined literary editorial transitional oldstyle didone english western european extended-latin european,400,,dives-akuru | latin | latin-ext,Google,1949,102,No,2025-02-05,2025-08-26,https://fonts.google.com/specimen/Noto+Serif+Dives+Akuru
+Noto Serif Dogra,Serif,Serif,,elegant traditional classic refined literary editorial transitional oldstyle didone english western european extended-latin european noto google international comprehensive,400,,dogra | latin | latin-ext,Google,1855,1469,Yes,2020-11-19,2025-09-08,https://fonts.google.com/specimen/Noto+Serif+Dogra
+Noto Serif Ethiopic,Serif,Serif,,elegant traditional classic refined literary editorial transitional oldstyle didone versatile multi-weight flexible variable variable-font responsive variable-weight variable-width ethiopic amharic english western european extended-latin european noto google international comprehensive,100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900,wdth: - | wght: -,ethiopic | latin | latin-ext,Google,1625,159,Yes,2020-11-19,2025-09-11,https://fonts.google.com/specimen/Noto+Serif+Ethiopic
+Noto Serif Georgian,Serif,Serif,,elegant traditional classic refined literary editorial transitional oldstyle didone versatile multi-weight flexible variable variable-font responsive variable-weight variable-width georgian english western european extended-latin european noto google international comprehensive,100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900,wdth: - | wght: -,georgian | latin | latin-ext,Google,997,79,Yes,2020-11-19,2025-09-10,https://fonts.google.com/specimen/Noto+Serif+Georgian
+Noto Serif Grantha,Serif,Serif,,elegant traditional classic refined literary editorial transitional oldstyle didone english western european extended-latin european noto google international comprehensive,400,,grantha | latin | latin-ext,Google,1894,201,Yes,2020-11-19,2025-09-11,https://fonts.google.com/specimen/Noto+Serif+Grantha
+Noto Serif Gujarati,Serif,Serif,,elegant traditional classic refined literary editorial transitional oldstyle didone versatile multi-weight flexible variable variable-font responsive variable-weight gujarati indian english western european extended-latin european noto google international comprehensive,100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900,wght: -,gujarati | latin | latin-ext | math | symbols,Google,1559,1425,Yes,2020-11-19,2025-09-11,https://fonts.google.com/specimen/Noto+Serif+Gujarati
+Noto Serif Gurmukhi,Serif,Serif,,elegant traditional classic refined literary editorial transitional oldstyle didone versatile multi-weight flexible variable variable-font responsive variable-weight punjabi gurmukhi indian english western european extended-latin european noto google international comprehensive,100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900,wght: -,gurmukhi | latin | latin-ext,Google,1863,597,Yes,2020-11-19,2025-09-11,https://fonts.google.com/specimen/Noto+Serif+Gurmukhi
+Noto Serif HK,Serif,Serif,,elegant traditional classic refined literary editorial transitional oldstyle didone versatile multi-weight flexible variable variable-font responsive variable-weight russian cyrillic slavic english western european extended-latin european vietnamese noto google international comprehensive,200 | 300 | 400 | 500 | 600 | 700 | 800 | 900,wght: -,chinese-hongkong | cyrillic | latin | latin-ext | vietnamese,Google,1095,1287,Yes,2022-05-11,2026-01-06,https://fonts.google.com/specimen/Noto+Serif+HK
+Noto Serif Hebrew,Serif,Serif,,elegant traditional classic refined literary editorial transitional oldstyle didone versatile multi-weight flexible variable variable-font responsive variable-weight variable-width hebrew RTL israeli english western european extended-latin european noto google international comprehensive,100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900,wdth: - | wght: -,hebrew | latin | latin-ext,Google,381,30,Yes,2020-11-19,2025-09-08,https://fonts.google.com/specimen/Noto+Serif+Hebrew
+Noto Serif Hentaigana,Serif,Serif,,elegant traditional classic refined literary editorial transitional oldstyle didone versatile multi-weight flexible variable variable-font responsive variable-weight english western european extended-latin european noto google international comprehensive,200 | 300 | 400 | 500 | 600 | 700 | 800 | 900,wght: -,kana-extended | latin | latin-ext,Google,1906,1507,Yes,2025-01-27,2025-09-04,https://fonts.google.com/specimen/Noto+Serif+Hentaigana
+Noto Serif JP,Serif,Serif,,elegant traditional classic refined literary editorial transitional oldstyle didone versatile multi-weight flexible variable variable-font responsive variable-weight russian cyrillic slavic japanese kanji hiragana katakana english western european extended-latin european vietnamese noto google international comprehensive popular widely-used,200 | 300 | 400 | 500 | 600 | 700 | 800 | 900,wght: -,cyrillic | japanese | latin | latin-ext | vietnamese,Google,80,652,Yes,2018-08-22,2026-01-06,https://fonts.google.com/specimen/Noto+Serif+JP
+Noto Serif KR,Serif,Serif,,elegant traditional classic refined literary editorial transitional oldstyle didone versatile multi-weight flexible variable variable-font responsive variable-weight russian cyrillic slavic korean hangul english western european extended-latin european vietnamese noto google international comprehensive well-known common,200 | 300 | 400 | 500 | 600 | 700 | 800 | 900,wght: -,cyrillic | korean | latin | latin-ext | vietnamese,Google,166,167,Yes,2018-08-22,2026-01-06,https://fonts.google.com/specimen/Noto+Serif+KR
+Noto Serif Kannada,Serif,Serif,,elegant traditional classic refined literary editorial transitional oldstyle didone versatile multi-weight flexible variable variable-font responsive variable-weight kannada indian english western european extended-latin european noto google international comprehensive,100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900,wght: -,kannada | latin | latin-ext,Google,1387,2005,Yes,2020-11-19,2025-09-11,https://fonts.google.com/specimen/Noto+Serif+Kannada
+Noto Serif Khitan Small Script,Serif,Serif,,elegant traditional classic refined literary editorial transitional oldstyle didone english western european extended-latin european noto google international comprehensive,400,,khitan-small-script | latin | latin-ext,Google,1840,428,Yes,2023-07-10,2025-05-30,https://fonts.google.com/specimen/Noto+Serif+Khitan+Small+Script
+Noto Serif Khmer,Serif,Serif,,elegant traditional classic refined literary editorial transitional oldstyle didone versatile multi-weight flexible variable variable-font responsive variable-weight variable-width khmer cambodian english western european extended-latin european noto google international comprehensive,100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900,wdth: - | wght: -,khmer | latin | latin-ext,Google,1579,2046,Yes,2020-11-19,2025-09-11,https://fonts.google.com/specimen/Noto+Serif+Khmer
+Noto Serif Khojki,Serif,Serif,,elegant traditional classic refined literary editorial transitional oldstyle didone variable variable-font responsive variable-weight english western european extended-latin european noto google international comprehensive,400 | 500 | 600 | 700,wght: -,khojki | latin | latin-ext,Google,771,110,Yes,2022-08-29,2025-09-08,https://fonts.google.com/specimen/Noto+Serif+Khojki
+Noto Serif Lao,Serif,Serif,,elegant traditional classic refined literary editorial transitional oldstyle didone versatile multi-weight flexible variable variable-font responsive variable-weight variable-width lao laotian english western european extended-latin european noto google international comprehensive,100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900,wdth: - | wght: -,lao | latin | latin-ext,Google,1428,389,Yes,2020-11-19,2025-09-16,https://fonts.google.com/specimen/Noto+Serif+Lao
+Noto Serif Makasar,Serif,Serif,,elegant traditional classic refined literary editorial transitional oldstyle didone english western european extended-latin european noto google international comprehensive,400,,latin | latin-ext | makasar,Google,1802,212,Yes,2023-06-27,2023-06-29,https://fonts.google.com/specimen/Noto+Serif+Makasar
+Noto Serif Malayalam,Serif,Serif,,elegant traditional classic refined literary editorial transitional oldstyle didone versatile multi-weight flexible variable variable-font responsive variable-weight english western european extended-latin european malayalam indian noto google international comprehensive,100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900,wght: -,latin | latin-ext | malayalam,Google,1209,520,Yes,2020-11-19,2025-09-10,https://fonts.google.com/specimen/Noto+Serif+Malayalam
+Noto Serif Myanmar,Serif,Serif,,elegant traditional classic refined literary editorial transitional oldstyle didone versatile multi-weight flexible myanmar burmese noto google international comprehensive,100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900,,myanmar,Google,1838,1767,Yes,2020-11-19,2025-09-11,https://fonts.google.com/specimen/Noto+Serif+Myanmar
+Noto Serif NP Hmong,Serif,Serif,,elegant traditional classic refined literary editorial transitional oldstyle didone variable variable-font responsive variable-weight english western european noto google international comprehensive,400 | 500 | 600 | 700,wght: -,latin | nyiakeng-puachue-hmong,Google,1824,493,Yes,2020-11-19,2025-09-08,https://fonts.google.com/specimen/Noto+Serif+NP+Hmong
+Noto Serif Old Uyghur,Serif,Serif,,elegant traditional classic refined literary editorial transitional oldstyle didone english western european extended-latin european noto google international comprehensive,400,,latin | latin-ext | old-uyghur,Google,1942,2259,Yes,2023-09-25,2024-09-23,https://fonts.google.com/specimen/Noto+Serif+Old+Uyghur
+Noto Serif Oriya,Serif,Serif,,elegant traditional classic refined literary editorial transitional oldstyle didone variable variable-font responsive variable-weight english western european extended-latin european odia oriya indian noto google international comprehensive,400 | 500 | 600 | 700,wght: -,latin | latin-ext | oriya,Google,1798,890,Yes,2022-07-04,2025-09-08,https://fonts.google.com/specimen/Noto+Serif+Oriya
+Noto Serif Ottoman Siyaq,Serif,Serif,,elegant traditional classic refined literary editorial transitional oldstyle didone english western european extended-latin european noto google international comprehensive,400,,latin | latin-ext | ottoman-siyaq-numbers,Google,1904,1573,Yes,2023-06-21,2025-05-30,https://fonts.google.com/specimen/Noto+Serif+Ottoman+Siyaq
+Noto Serif SC,Serif,Serif,,elegant traditional classic refined literary editorial transitional oldstyle didone versatile multi-weight flexible variable variable-font responsive variable-weight chinese simplified mandarin russian cyrillic slavic english western european extended-latin european vietnamese noto google international comprehensive well-known common,200 | 300 | 400 | 500 | 600 | 700 | 800 | 900,wght: -,chinese-simplified | cyrillic | latin | latin-ext | vietnamese,Google,180,160,Yes,2018-12-03,2026-01-06,https://fonts.google.com/specimen/Noto+Serif+SC
+Noto Serif Sinhala,Serif,Serif,,elegant traditional classic refined literary editorial transitional oldstyle didone versatile multi-weight flexible variable variable-font responsive variable-weight variable-width english western european extended-latin european sinhala sri-lankan noto google international comprehensive,100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900,wdth: - | wght: -,latin | latin-ext | sinhala,Google,1475,356,Yes,2020-11-19,2025-09-11,https://fonts.google.com/specimen/Noto+Serif+Sinhala
+Noto Serif TC,Serif,Serif,,elegant traditional classic refined literary editorial transitional oldstyle didone versatile multi-weight flexible variable variable-font responsive variable-weight chinese traditional russian cyrillic slavic english western european extended-latin european vietnamese noto google international comprehensive well-known common,200 | 300 | 400 | 500 | 600 | 700 | 800 | 900,wght: -,chinese-traditional | cyrillic | latin | latin-ext | vietnamese,Google,177,139,Yes,2018-12-03,2025-12-10,https://fonts.google.com/specimen/Noto+Serif+TC
+Noto Serif Tamil,Serif,Serif,,elegant traditional classic refined literary editorial transitional oldstyle didone versatile multi-weight flexible italic variable variable-font responsive variable-weight variable-width english western european extended-latin european tamil indian noto google international comprehensive,100 | 100i | 200 | 200i | 300 | 300i | 400 | 400i | 500 | 500i | 600 | 600i | 700 | 700i | 800 | 800i | 900 | 900i,wdth: - | wght: -,latin | latin-ext | tamil,Google,1556,415,Yes,2020-11-19,2025-09-02,https://fonts.google.com/specimen/Noto+Serif+Tamil
+Noto Serif Tangut,Serif,Serif,,elegant traditional classic refined literary editorial transitional oldstyle didone english western european extended-latin european noto google international comprehensive,400,,latin | latin-ext | tangut,Google,1623,321,Yes,2020-11-19,2025-08-26,https://fonts.google.com/specimen/Noto+Serif+Tangut
+Noto Serif Telugu,Serif,Serif,,elegant traditional classic refined literary editorial transitional oldstyle didone versatile multi-weight flexible variable variable-font responsive variable-weight english western european extended-latin european telugu indian noto google international comprehensive,100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900,wght: -,latin | latin-ext | telugu,Google,1488,2115,Yes,2020-11-19,2025-09-11,https://fonts.google.com/specimen/Noto+Serif+Telugu
+Noto Serif Thai,Serif,Serif,,elegant traditional classic refined literary editorial transitional oldstyle didone versatile multi-weight flexible variable variable-font responsive variable-weight variable-width english western european extended-latin european thai southeast-asia noto google international comprehensive,100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900,wdth: - | wght: -,latin | latin-ext | thai,Google,399,18,Yes,2020-11-19,2025-09-16,https://fonts.google.com/specimen/Noto+Serif+Thai
+Noto Serif Tibetan,Serif,Serif,,elegant traditional classic refined literary editorial transitional oldstyle didone versatile multi-weight flexible variable variable-font responsive variable-weight english western european extended-latin european tibetan noto google international comprehensive,100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900,wght: -,latin | latin-ext | tibetan,Google,1725,2262,Yes,2020-11-19,2025-09-04,https://fonts.google.com/specimen/Noto+Serif+Tibetan
+Noto Serif Todhri,Serif,Serif,,elegant traditional classic refined literary editorial transitional oldstyle didone english western european extended-latin european noto google international comprehensive,400,,latin | latin-ext | todhri,Google,1873,952,Yes,2025-01-21,2025-01-22,https://fonts.google.com/specimen/Noto+Serif+Todhri
+Noto Serif Toto,Serif,Serif,,elegant traditional classic refined literary editorial transitional oldstyle didone variable variable-font responsive variable-weight english western european extended-latin european noto google international comprehensive,400 | 500 | 600 | 700,wght: -,latin | latin-ext | toto,Google,1761,296,Yes,2022-09-04,2025-09-16,https://fonts.google.com/specimen/Noto+Serif+Toto
+Noto Serif Vithkuqi,Serif,Serif,,elegant traditional classic refined literary editorial transitional oldstyle didone variable variable-font responsive variable-weight english western european extended-latin european noto google international comprehensive,400 | 500 | 600 | 700,wght: -,latin | latin-ext | vithkuqi,Google,1681,1294,Yes,2022-10-10,2025-09-16,https://fonts.google.com/specimen/Noto+Serif+Vithkuqi
+Noto Serif Yezidi,Serif,Serif,,elegant traditional classic refined literary editorial transitional oldstyle didone variable variable-font responsive variable-weight english western european extended-latin european noto google international comprehensive,400 | 500 | 600 | 700,wght: -,latin | latin-ext | yezidi,Google,1789,2061,Yes,2020-11-19,2025-09-04,https://fonts.google.com/specimen/Noto+Serif+Yezidi
+Noto Traditional Nushu,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque variable variable-font responsive variable-weight english western european extended-latin european noto google international comprehensive,300 | 400 | 500 | 600 | 700,wght: -,latin | latin-ext | nushu,Google,1795,194,Yes,2020-11-19,2025-09-11,https://fonts.google.com/specimen/Noto+Traditional+Nushu
+Noto Znamenny Musical Notation,Sans Serif,Sans Serif,Symbols,clean modern minimal professional readable neutral geometric humanist grotesque icon symbol emoji pictograph english western european extended-latin european noto google international comprehensive,400,,latin | latin-ext | math | symbols | znamenny,Google,1891,2191,Yes,2023-12-10,2025-06-09,https://fonts.google.com/specimen/Noto+Znamenny+Musical+Notation
+Nova Cut,Display,,Display,bold decorative headline attention-grabbing creative expressive  headline hero decorative large-text attention english western european extended-latin european,400,,latin | latin-ext,Wojciech Kalinowski,1234,954,No,2011-03-23,2025-09-08,https://fonts.google.com/specimen/Nova+Cut
+Nova Flat,Display,,Display,bold decorative headline attention-grabbing creative expressive  headline hero decorative large-text attention english western european extended-latin european,400,,latin | latin-ext,Wojciech Kalinowski,1113,1416,No,2011-03-23,2025-09-04,https://fonts.google.com/specimen/Nova+Flat
+Nova Mono,Monospace,,Monospace | Display,code developer technical fixed-width terminal programming  mono fixed-width tabular data code headline hero decorative large-text attention greek english western european extended-latin european,400,,greek | latin | latin-ext,Wojciech Kalinowski,830,862,No,2011-03-23,2025-09-10,https://fonts.google.com/specimen/Nova+Mono
+Nova Oval,Display,,Display,bold decorative headline attention-grabbing creative expressive  headline hero decorative large-text attention english western european extended-latin european,400,,latin | latin-ext,Wojciech Kalinowski,1242,921,No,2011-03-23,2025-09-02,https://fonts.google.com/specimen/Nova+Oval
+Nova Round,Display,,Display,bold decorative headline attention-grabbing creative expressive  headline hero decorative large-text attention english western european extended-latin european,400,,latin | latin-ext,Wojciech Kalinowski,1062,1208,No,2011-03-23,2025-09-16,https://fonts.google.com/specimen/Nova+Round
+Nova Script,Display,,Display,bold decorative headline attention-grabbing creative expressive  headline hero decorative large-text attention english western european extended-latin european,400,,latin | latin-ext,Wojciech Kalinowski,1237,1191,No,2011-03-23,2025-09-02,https://fonts.google.com/specimen/Nova+Script
+Nova Slim,Display,,Display,bold decorative headline attention-grabbing creative expressive  headline hero decorative large-text attention english western european extended-latin european,400,,latin | latin-ext,Wojciech Kalinowski,1172,1476,No,2011-03-23,2025-09-10,https://fonts.google.com/specimen/Nova+Slim
+Nova Square,Display,Sans Serif,Display,bold decorative headline attention-grabbing creative expressive geometric humanist grotesque headline hero decorative large-text attention english western european extended-latin european,400,,latin | latin-ext,Wojciech Kalinowski,569,1778,No,2011-04-14,2025-09-10,https://fonts.google.com/specimen/Nova+Square
+Numans,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque english western european,400,,latin,Jovanny Lemonad,1006,1332,No,2011-08-17,2025-09-10,https://fonts.google.com/specimen/Numans
+Nunito,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque versatile multi-weight flexible italic variable variable-font responsive variable-weight russian cyrillic slavic cyrillic extended english western european extended-latin european vietnamese top-popular trending most-used,1000 | 1000i | 200 | 200i | 300 | 300i | 400 | 400i | 500 | 500i | 600 | 600i | 700 | 700i | 800 | 800i | 900 | 900i,wght: -,cyrillic | cyrillic-ext | latin | latin-ext | vietnamese,Vernon Adams | Cyreal | Jacques Le Bailly,23,1327,No,2012-08-12,2025-09-16,https://fonts.google.com/specimen/Nunito
+Nunito Sans,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque versatile multi-weight flexible italic variable variable-font responsive variable-weight variable-width russian cyrillic slavic cyrillic extended english western european extended-latin european vietnamese top-popular trending most-used,1000 | 1000i | 200 | 200i | 300 | 300i | 400 | 400i | 500 | 500i | 600 | 600i | 700 | 700i | 800 | 800i | 900 | 900i,YTLC: - | opsz: - | wdth: - | wght: -,cyrillic | cyrillic-ext | latin | latin-ext | vietnamese,Vernon Adams | Jacques Le Bailly | Manvel Shmavonyan | Alexei Vanyashin,24,1589,No,2016-12-07,2025-09-16,https://fonts.google.com/specimen/Nunito+Sans
+Nuosu SIL,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque english western european extended-latin european,400,,latin | latin-ext | yi,SIL International,1388,190,No,2022-04-28,2025-09-04,https://fonts.google.com/specimen/Nuosu+SIL
+Odibee Sans,Display,Sans Serif,Display,bold decorative headline attention-grabbing creative expressive geometric humanist grotesque headline hero decorative large-text attention english western european,400,,latin,James Barnard,1126,2050,No,2019-11-08,2025-09-16,https://fonts.google.com/specimen/Odibee+Sans
+Odor Mean Chey,Serif,Serif,,elegant traditional classic refined literary editorial transitional oldstyle didone khmer cambodian english western european,400,,khmer | latin,Danh Hong,1201,963,No,2011-03-02,2025-09-08,https://fonts.google.com/specimen/Odor+Mean+Chey
+Offside,Display,Sans Serif,Display,bold decorative headline attention-grabbing creative expressive geometric humanist grotesque headline hero decorative large-text attention english western european extended-latin european,400,,latin | latin-ext,Eduardo Tunni,1420,1543,No,2012-10-26,2025-09-04,https://fonts.google.com/specimen/Offside
+Oi,Display,Serif,Display,bold decorative headline attention-grabbing creative expressive transitional oldstyle didone headline hero decorative large-text attention arabic RTL middle-east russian cyrillic slavic cyrillic extended greek english western european extended-latin european tamil indian vietnamese multilingual international,400,,arabic | cyrillic | cyrillic-ext | greek | latin | latin-ext | tamil | vietnamese,Kostas Bartsokas,1513,624,No,2021-02-03,2025-09-04,https://fonts.google.com/specimen/Oi
+Ojuju,Sans Serif,Sans Serif,Display,clean modern minimal professional readable neutral geometric humanist grotesque headline hero decorative large-text attention versatile multi-weight flexible variable variable-font responsive variable-weight english western european extended-latin european vietnamese,200 | 300 | 400 | 500 | 600 | 700 | 800,wght: -,latin | latin-ext | math | symbols | vietnamese,Ụdị Foundry | Chisaokwu Joboson | Mirko Velimirović,1534,2103,No,2024-02-26,2025-09-08,https://fonts.google.com/specimen/Ojuju
+Old Standard TT,Serif,Serif,Display,elegant traditional classic refined literary editorial transitional oldstyle didone headline hero decorative large-text attention italic russian cyrillic slavic cyrillic extended english western european extended-latin european vietnamese well-known common,400 | 400i | 700,,cyrillic | cyrillic-ext | latin | latin-ext | vietnamese,Alexey Kryukov,289,1436,No,2010-05-18,2025-09-11,https://fonts.google.com/specimen/Old+Standard+TT
+Oldenburg,Display,Serif,Display,bold decorative headline attention-grabbing creative expressive transitional oldstyle didone headline hero decorative large-text attention english western european extended-latin european,400,,latin | latin-ext,Nicole Fally,1580,622,No,2011-12-19,2025-09-16,https://fonts.google.com/specimen/Oldenburg
+Ole,Handwriting,,Handwriting,personal casual friendly warm handwritten script organic  script cursive hand-drawn artistic informal english western european extended-latin european vietnamese,400,,latin | latin-ext | vietnamese,Robert Leuschke,1739,772,No,2021-12-02,2025-05-30,https://fonts.google.com/specimen/Ole
+Oleo Script,Display,,Display,bold decorative headline attention-grabbing creative expressive  headline hero decorative large-text attention english western european extended-latin european well-known common,400 | 700,,latin | latin-ext,soytutype fonts,219,950,No,2012-03-29,2025-09-16,https://fonts.google.com/specimen/Oleo+Script
+Oleo Script Swash Caps,Display,,Display,bold decorative headline attention-grabbing creative expressive  headline hero decorative large-text attention english western european extended-latin european,400 | 700,,latin | latin-ext,soytutype fonts,999,552,No,2012-11-12,2025-09-08,https://fonts.google.com/specimen/Oleo+Script+Swash+Caps
+Onest,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque versatile multi-weight flexible variable variable-font responsive variable-weight russian cyrillic slavic cyrillic extended english western european extended-latin european well-known common,100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900,wght: -,cyrillic | cyrillic-ext | latin | latin-ext,Dmitri Voloshin | Andrey Kudryavtsev,198,1934,No,2023-09-05,2025-09-10,https://fonts.google.com/specimen/Onest
+Oooh Baby,Handwriting,,Handwriting,personal casual friendly warm handwritten script organic  script cursive hand-drawn artistic informal english western european extended-latin european vietnamese,400,,latin | latin-ext | vietnamese,Robert Leuschke,651,1411,No,2021-11-26,2025-05-30,https://fonts.google.com/specimen/Oooh+Baby
+Open Sans,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque versatile multi-weight flexible italic variable variable-font responsive variable-weight variable-width russian cyrillic slavic cyrillic extended greek greek extended hebrew RTL israeli english western european extended-latin european vietnamese multilingual international top-popular trending most-used,300 | 300i | 400 | 400i | 500 | 500i | 600 | 600i | 700 | 700i | 800 | 800i,wdth: - | wght: -,cyrillic | cyrillic-ext | greek | greek-ext | hebrew | latin | latin-ext | math | symbols | vietnamese,Steve Matteson,3,1336,No,2011-02-02,2025-09-16,https://fonts.google.com/specimen/Open+Sans
+Oranienbaum,Serif,Serif,,elegant traditional classic refined literary editorial transitional oldstyle didone russian cyrillic slavic cyrillic extended english western european extended-latin european,400,,cyrillic | cyrillic-ext | latin | latin-ext,Oleg Pospelov | Jovanny Lemonad,605,308,No,2012-08-20,2025-09-10,https://fonts.google.com/specimen/Oranienbaum
+Orbit,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque korean hangul english western european extended-latin european,400,,korean | latin | latin-ext,Sooun Cho | JAMO,1404,2189,No,2023-06-05,2026-03-03,https://fonts.google.com/specimen/Orbit
+Orbitron,Sans Serif,Sans Serif,Display,clean modern minimal professional readable neutral geometric humanist grotesque headline hero decorative large-text attention versatile multi-weight flexible variable variable-font responsive variable-weight english western european popular widely-used,400 | 500 | 600 | 700 | 800 | 900,wght: -,latin,Matt McInerney,143,532,No,2010-12-15,2025-09-04,https://fonts.google.com/specimen/Orbitron
+Oregano,Display,,Display | Handwriting,bold decorative headline attention-grabbing creative expressive  headline hero decorative large-text attention script cursive hand-drawn artistic informal italic english western european extended-latin european,400 | 400i,,latin | latin-ext,Astigmatic,874,174,No,2012-08-13,2025-09-16,https://fonts.google.com/specimen/Oregano
+Orelega One,Display,Serif,Display,bold decorative headline attention-grabbing creative expressive transitional oldstyle didone headline hero decorative large-text attention russian cyrillic slavic cyrillic extended english western european extended-latin european,400,,cyrillic | cyrillic-ext | latin | latin-ext,Haruki Wakamatsu,964,866,No,2021-03-11,2025-09-16,https://fonts.google.com/specimen/Orelega+One
+Orienta,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque english western european extended-latin european,400,,latin | latin-ext,Eduardo Tunni,1108,1911,No,2012-09-07,2025-09-10,https://fonts.google.com/specimen/Orienta
+Original Surfer,Display,Sans Serif,Display,bold decorative headline attention-grabbing creative expressive geometric humanist grotesque headline hero decorative large-text attention english western european extended-latin european,400,,latin | latin-ext,Astigmatic,863,539,No,2011-12-07,2025-09-04,https://fonts.google.com/specimen/Original+Surfer
+Oswald,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque versatile multi-weight flexible variable variable-font responsive variable-weight russian cyrillic slavic cyrillic extended english western european extended-latin european vietnamese top-popular trending most-used,200 | 300 | 400 | 500 | 600 | 700,wght: -,cyrillic | cyrillic-ext | latin | latin-ext | vietnamese,Vernon Adams | Kalapi Gajjar | Cyreal,18,1373,No,2012-02-29,2025-09-11,https://fonts.google.com/specimen/Oswald
+Outfit,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque versatile multi-weight flexible variable variable-font responsive variable-weight english western european extended-latin european top-popular trending most-used,100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900,wght: -,latin | latin-ext,Smartsheet Inc | Rodrigo Fuenzalida,44,904,No,2021-09-27,2025-09-04,https://fonts.google.com/specimen/Outfit
+Over the Rainbow,Handwriting,,Handwriting | Display,personal casual friendly warm handwritten script organic  script cursive hand-drawn artistic informal headline hero decorative large-text attention english western european extended-latin european,400,,latin | latin-ext,Kimberly Geswein,809,1576,No,2011-04-27,2025-09-02,https://fonts.google.com/specimen/Over+the+Rainbow
+Overlock,Display,Sans Serif,Display,bold decorative headline attention-grabbing creative expressive geometric humanist grotesque headline hero decorative large-text attention italic english western european extended-latin european,400 | 400i | 700 | 700i | 900 | 900i,,latin | latin-ext,Dario Manuel Muhafara,725,1690,No,2011-12-19,2025-09-04,https://fonts.google.com/specimen/Overlock
+Overlock SC,Display,Sans Serif,Display,bold decorative headline attention-grabbing creative expressive geometric humanist grotesque headline hero decorative large-text attention english western european extended-latin european,400,,latin | latin-ext,Dario Manuel Muhafara,1203,1704,No,2011-12-19,2025-09-16,https://fonts.google.com/specimen/Overlock+SC
+Overpass,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque versatile multi-weight flexible italic variable variable-font responsive variable-weight russian cyrillic slavic cyrillic extended english western european extended-latin european vietnamese popular widely-used,100 | 100i | 200 | 200i | 300 | 300i | 400 | 400i | 500 | 500i | 600 | 600i | 700 | 700i | 800 | 800i | 900 | 900i,wght: -,cyrillic | cyrillic-ext | latin | latin-ext | vietnamese,Delve Withrington | Dave Bailey | Thomas Jockin,118,1473,No,2016-12-02,2025-09-02,https://fonts.google.com/specimen/Overpass
+Overpass Mono,Monospace,,Monospace,code developer technical fixed-width terminal programming  mono fixed-width tabular data code variable variable-font responsive variable-weight russian cyrillic slavic cyrillic extended english western european extended-latin european vietnamese,300 | 400 | 500 | 600 | 700,wght: -,cyrillic | cyrillic-ext | latin | latin-ext | vietnamese,Delve Withrington | Dave Bailey | Thomas Jockin,524,299,No,2016-12-02,2025-09-08,https://fonts.google.com/specimen/Overpass+Mono
+Ovo,Serif,Serif,,elegant traditional classic refined literary editorial transitional oldstyle didone english western european,400,,latin,Nicole Fally,483,1445,No,2011-07-20,2025-09-08,https://fonts.google.com/specimen/Ovo
+Oxanium,Display,Sans Serif,Display,bold decorative headline attention-grabbing creative expressive geometric humanist grotesque headline hero decorative large-text attention versatile multi-weight flexible variable variable-font responsive variable-weight english western european extended-latin european well-known common,200 | 300 | 400 | 500 | 600 | 700 | 800,wght: -,latin | latin-ext,Severin Meyer,291,606,No,2020-01-30,2025-09-10,https://fonts.google.com/specimen/Oxanium
+Oxygen,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque english western european extended-latin european popular widely-used,300 | 400 | 700,,latin | latin-ext,Vernon Adams,111,1360,No,2012-03-29,2025-09-04,https://fonts.google.com/specimen/Oxygen
+Oxygen Mono,Monospace,,Monospace,code developer technical fixed-width terminal programming  mono fixed-width tabular data code english western european extended-latin european,400,,latin | latin-ext,Vernon Adams,722,276,No,2012-09-08,2025-09-02,https://fonts.google.com/specimen/Oxygen+Mono
+PT Mono,Monospace,,Monospace,code developer technical fixed-width terminal programming  mono fixed-width tabular data code russian cyrillic slavic cyrillic extended english western european extended-latin european,400,,cyrillic | cyrillic-ext | latin | latin-ext,ParaType,302,576,No,2012-02-29,2025-09-08,https://fonts.google.com/specimen/PT+Mono
+PT Sans,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque italic russian cyrillic slavic cyrillic extended english western european extended-latin european top-popular trending most-used,400 | 400i | 700 | 700i,,cyrillic | cyrillic-ext | latin | latin-ext,ParaType,36,1431,No,2010-09-21,2025-09-04,https://fonts.google.com/specimen/PT+Sans
+PT Sans Caption,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque russian cyrillic slavic cyrillic extended english western european extended-latin european well-known common,400 | 700,,cyrillic | cyrillic-ext | latin | latin-ext,ParaType,281,1313,No,2010-09-21,2025-09-04,https://fonts.google.com/specimen/PT+Sans+Caption
+PT Sans Narrow,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque russian cyrillic slavic cyrillic extended english western european extended-latin european popular widely-used,400 | 700,,cyrillic | cyrillic-ext | latin | latin-ext,ParaType,129,770,No,2010-09-21,2025-09-04,https://fonts.google.com/specimen/PT+Sans+Narrow
+PT Serif,Serif,Serif,,elegant traditional classic refined literary editorial transitional oldstyle didone italic russian cyrillic slavic cyrillic extended english western european extended-latin european popular widely-used,400 | 400i | 700 | 700i,,cyrillic | cyrillic-ext | latin | latin-ext,ParaType,63,1600,No,2011-02-09,2025-09-04,https://fonts.google.com/specimen/PT+Serif
+PT Serif Caption,Serif,Serif,,elegant traditional classic refined literary editorial transitional oldstyle didone italic russian cyrillic slavic cyrillic extended english western european extended-latin european,400 | 400i,,cyrillic | cyrillic-ext | latin | latin-ext,ParaType,632,1180,No,2011-02-09,2025-09-10,https://fonts.google.com/specimen/PT+Serif+Caption
+Pacifico,Handwriting,,Handwriting,personal casual friendly warm handwritten script organic  script cursive hand-drawn artistic informal russian cyrillic slavic cyrillic extended english western european extended-latin european vietnamese popular widely-used,400,,cyrillic | cyrillic-ext | latin | latin-ext | vietnamese,Vernon Adams | Jacques Le Bailly | Botjo Nikoltchev | Ani Petrova,108,1631,No,2011-03-09,2025-09-16,https://fonts.google.com/specimen/Pacifico
+Padauk,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque english western european extended-latin european myanmar burmese,400 | 700,,latin | latin-ext | myanmar,SIL International,974,1530,No,2016-11-08,2025-09-11,https://fonts.google.com/specimen/Padauk
+Padyakke Expanded One,Serif,Slab Serif,Display,elegant traditional classic refined literary editorial slab mechanical sturdy strong headline hero decorative large-text attention kannada indian english western european extended-latin european,400,,kannada | latin | latin-ext,James Puckett,1844,127,No,2022-12-05,2025-09-11,https://fonts.google.com/specimen/Padyakke+Expanded+One
+Palanquin,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque versatile multi-weight flexible hindi devanagari indian english western european extended-latin european,100 | 200 | 300 | 400 | 500 | 600 | 700,,devanagari | latin | latin-ext,Pria Ravichandran,555,1636,No,2015-01-28,2025-09-11,https://fonts.google.com/specimen/Palanquin
+Palanquin Dark,Sans Serif,Sans Serif,Display,clean modern minimal professional readable neutral geometric humanist grotesque headline hero decorative large-text attention hindi devanagari indian english western european extended-latin european,400 | 500 | 600 | 700,,devanagari | latin | latin-ext,Pria Ravichandran,594,1957,No,2015-01-28,2025-09-10,https://fonts.google.com/specimen/Palanquin+Dark
+Palette Mosaic,Display,,Display,bold decorative headline attention-grabbing creative expressive  headline hero decorative large-text attention japanese kanji hiragana katakana english western european,400,,japanese | latin,Shibuya Font,1373,20,No,2021-04-13,2025-09-10,https://fonts.google.com/specimen/Palette+Mosaic
+Pangolin,Handwriting,,Handwriting,personal casual friendly warm handwritten script organic  script cursive hand-drawn artistic informal russian cyrillic slavic cyrillic extended english western european extended-latin european vietnamese,400,,cyrillic | cyrillic-ext | latin | latin-ext | vietnamese,Kevin Burke,436,1675,No,2017-01-11,2025-09-04,https://fonts.google.com/specimen/Pangolin
+Paprika,Display,,Display,bold decorative headline attention-grabbing creative expressive  headline hero decorative large-text attention english western european extended-latin european,400,,latin | latin-ext,Eduardo Tunni,1393,1874,No,2012-10-26,2025-09-11,https://fonts.google.com/specimen/Paprika
+Parastoo,Serif,Serif,,elegant traditional classic refined literary editorial transitional oldstyle didone variable variable-font responsive variable-weight arabic RTL middle-east english western european extended-latin european vietnamese,400 | 500 | 600 | 700,wght: -,arabic | latin | latin-ext | vietnamese,Saber Rastikerdar,1812,2226,No,2025-05-21,2025-10-29,https://fonts.google.com/specimen/Parastoo
+Parisienne,Handwriting,,Handwriting,personal casual friendly warm handwritten script organic  script cursive hand-drawn artistic informal english western european extended-latin european,400,,latin | latin-ext,Astigmatic,325,858,No,2012-01-25,2025-09-04,https://fonts.google.com/specimen/Parisienne
+Parkinsans,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque versatile multi-weight flexible variable variable-font responsive variable-weight english western european extended-latin european,300 | 400 | 500 | 600 | 700 | 800,wght: -,latin | latin-ext,Red Stone,639,300,No,2024-11-18,2025-09-16,https://fonts.google.com/specimen/Parkinsans
+Passero One,Display,Sans Serif,Display,bold decorative headline attention-grabbing creative expressive geometric humanist grotesque headline hero decorative large-text attention english western european extended-latin european,400,,latin | latin-ext,Viktoriya Grabowska,1533,1779,No,2011-08-31,2025-09-10,https://fonts.google.com/specimen/Passero+One
+Passion One,Display,Sans Serif,Display,bold decorative headline attention-grabbing creative expressive geometric humanist grotesque headline hero decorative large-text attention english western european extended-latin european,400 | 700 | 900,,latin | latin-ext,Fontstage,303,1661,No,2011-12-13,2025-09-10,https://fonts.google.com/specimen/Passion+One
+Passions Conflict,Handwriting,,Handwriting | Display,personal casual friendly warm handwritten script organic  script cursive hand-drawn artistic informal headline hero decorative large-text attention english western european extended-latin european vietnamese,400,,latin | latin-ext | vietnamese,Robert Leuschke,1300,697,No,2021-10-07,2025-09-04,https://fonts.google.com/specimen/Passions+Conflict
+Pathway Extreme,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque versatile multi-weight flexible italic variable variable-font responsive variable-weight variable-width english western european extended-latin european vietnamese,100 | 100i | 200 | 200i | 300 | 300i | 400 | 400i | 500 | 500i | 600 | 600i | 700 | 700i | 800 | 800i | 900 | 900i,opsz: - | wdth: - | wght: -,latin | latin-ext | vietnamese,Eduardo Tunni,887,1826,No,2023-04-19,2025-09-10,https://fonts.google.com/specimen/Pathway+Extreme
+Pathway Gothic One,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque english western european extended-latin european,400,,latin | latin-ext,Eduardo Tunni,367,1570,No,2013-06-05,2025-09-16,https://fonts.google.com/specimen/Pathway+Gothic+One
+Patrick Hand,Handwriting,Sans Serif,Handwriting,personal casual friendly warm handwritten script organic geometric humanist grotesque script cursive hand-drawn artistic informal english western european extended-latin european vietnamese well-known common,400,,latin | latin-ext | vietnamese,Patrick Wagesreiter,275,675,No,2011-07-06,2025-09-02,https://fonts.google.com/specimen/Patrick+Hand
+Patrick Hand SC,Handwriting,Sans Serif,Handwriting,personal casual friendly warm handwritten script organic geometric humanist grotesque script cursive hand-drawn artistic informal english western european extended-latin european vietnamese,400,,latin | latin-ext | vietnamese,Patrick Wagesreiter,1065,931,No,2013-02-27,2025-09-10,https://fonts.google.com/specimen/Patrick+Hand+SC
+Pattaya,Sans Serif,Sans Serif,Display,clean modern minimal professional readable neutral geometric humanist grotesque headline hero decorative large-text attention russian cyrillic slavic english western european extended-latin european thai southeast-asia vietnamese,400,,cyrillic | latin | latin-ext | thai | vietnamese,Cadson Demak,627,956,No,2016-05-31,2025-09-08,https://fonts.google.com/specimen/Pattaya
+Patua One,Display,Serif,Display,bold decorative headline attention-grabbing creative expressive transitional oldstyle didone headline hero decorative large-text attention english western european well-known common,400,,latin,LatinoType,260,1695,No,2011-12-19,2025-09-04,https://fonts.google.com/specimen/Patua+One
+Pavanam,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque english western european extended-latin european tamil indian,400,,latin | latin-ext | tamil,Tharique Azeez,1101,718,No,2016-06-15,2025-09-11,https://fonts.google.com/specimen/Pavanam
+Paytone One,Sans Serif,Sans Serif,Display,clean modern minimal professional readable neutral geometric humanist grotesque headline hero decorative large-text attention english western european extended-latin european vietnamese well-known common,400,,latin | latin-ext | vietnamese,Vernon Adams,255,737,No,2011-05-04,2025-09-11,https://fonts.google.com/specimen/Paytone+One
+Peddana,Serif,Serif,,elegant traditional classic refined literary editorial transitional oldstyle didone english western european telugu indian,400,,latin | telugu,Appaji Ambarisha Darbha,1575,2149,No,2014-12-10,2025-09-08,https://fonts.google.com/specimen/Peddana
+Peralta,Serif,Slab Serif,Display,elegant traditional classic refined literary editorial slab mechanical sturdy strong headline hero decorative large-text attention english western european extended-latin european,400,,latin | latin-ext,Astigmatic,1072,499,No,2012-07-11,2025-09-10,https://fonts.google.com/specimen/Peralta
+Permanent Marker,Handwriting,,Handwriting,personal casual friendly warm handwritten script organic  script cursive hand-drawn artistic informal english western european well-known common,400,,latin,Font Diner,190,1297,No,2011-01-06,2025-05-30,https://fonts.google.com/specimen/Permanent+Marker
+Petemoss,Handwriting,,Handwriting | Display,personal casual friendly warm handwritten script organic  script cursive hand-drawn artistic informal headline hero decorative large-text attention english western european extended-latin european vietnamese,400,,latin | latin-ext | vietnamese,Robert Leuschke,1728,1557,No,2021-10-07,2025-09-04,https://fonts.google.com/specimen/Petemoss
+Petit Formal Script,Handwriting,,Display | Handwriting,personal casual friendly warm handwritten script organic  headline hero decorative large-text attention script cursive hand-drawn artistic informal english western european extended-latin european,400,,latin | latin-ext,Impallari Type,716,1715,No,2012-09-07,2025-09-10,https://fonts.google.com/specimen/Petit+Formal+Script
+Petrona,Serif,Serif,,elegant traditional classic refined literary editorial transitional oldstyle didone versatile multi-weight flexible italic variable variable-font responsive variable-weight english western european extended-latin european vietnamese,100 | 100i | 200 | 200i | 300 | 300i | 400 | 400i | 500 | 500i | 600 | 600i | 700 | 700i | 800 | 800i | 900 | 900i,wght: -,latin | latin-ext | vietnamese,Ringo R. Seeber,449,1943,No,2020-07-14,2025-09-11,https://fonts.google.com/specimen/Petrona
+Phetsarath,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque lao laotian,400 | 700,,lao,Danh Hong,1772,853,No,2024-11-18,2025-09-17,https://fonts.google.com/specimen/Phetsarath
+Philosopher,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque italic russian cyrillic slavic cyrillic extended english western european extended-latin european vietnamese,400 | 400i | 700 | 700i,,cyrillic | cyrillic-ext | latin | latin-ext | vietnamese,Jovanny Lemonad,305,1437,No,2011-08-31,2025-09-10,https://fonts.google.com/specimen/Philosopher
+Phudu,Display,Sans Serif,Display,bold decorative headline attention-grabbing creative expressive geometric humanist grotesque headline hero decorative large-text attention versatile multi-weight flexible variable variable-font responsive variable-weight cyrillic extended english western european extended-latin european vietnamese,300 | 400 | 500 | 600 | 700 | 800 | 900,wght: -,cyrillic-ext | latin | latin-ext | vietnamese,Dương Trần,1148,268,No,2023-01-30,2025-09-08,https://fonts.google.com/specimen/Phudu
+Piazzolla,Serif,Serif,Display,elegant traditional classic refined literary editorial transitional oldstyle didone headline hero decorative large-text attention versatile multi-weight flexible italic variable variable-font responsive variable-weight russian cyrillic slavic cyrillic extended greek greek extended english western european extended-latin european vietnamese multilingual international,100 | 100i | 200 | 200i | 300 | 300i | 400 | 400i | 500 | 500i | 600 | 600i | 700 | 700i | 800 | 800i | 900 | 900i,opsz: - | wght: -,cyrillic | cyrillic-ext | greek | greek-ext | latin | latin-ext | vietnamese,Juan Pablo del Peral | Huerta Tipográfica,939,888,No,2020-08-27,2025-09-11,https://fonts.google.com/specimen/Piazzolla
+Piedra,Display,Serif,Display,bold decorative headline attention-grabbing creative expressive transitional oldstyle didone headline hero decorative large-text attention english western european extended-latin european,400,,latin | latin-ext,Sudtipos,1482,604,No,2011-11-30,2025-09-04,https://fonts.google.com/specimen/Piedra
+Pinyon Script,Handwriting,,Display | Handwriting,personal casual friendly warm handwritten script organic  headline hero decorative large-text attention script cursive hand-drawn artistic informal english western european extended-latin european vietnamese,400,,latin | latin-ext | vietnamese,Nicole Fally,403,717,No,2011-10-12,2025-09-10,https://fonts.google.com/specimen/Pinyon+Script
+Pirata One,Display,,Display,bold decorative headline attention-grabbing creative expressive  headline hero decorative large-text attention english western european extended-latin european,400,,latin | latin-ext,Rodrigo Fuenzalida | Nicolas Massi,523,1221,No,2012-10-31,2025-09-11,https://fonts.google.com/specimen/Pirata+One
+Pixelify Sans,Display,Sans Serif,Display,bold decorative headline attention-grabbing creative expressive geometric humanist grotesque headline hero decorative large-text attention variable variable-font responsive variable-weight russian cyrillic slavic english western european extended-latin european,400 | 500 | 600 | 700,wght: -,cyrillic | latin | latin-ext,Stefie Justprince,740,1932,No,2023-09-26,2025-09-16,https://fonts.google.com/specimen/Pixelify+Sans
+Plaster,Display,,Display,bold decorative headline attention-grabbing creative expressive  headline hero decorative large-text attention english western european extended-latin european,400,,latin | latin-ext,Sorkin Type,1451,2056,No,2011-12-13,2025-09-16,https://fonts.google.com/specimen/Plaster
+Platypi,Serif,Serif,,elegant traditional classic refined literary editorial transitional oldstyle didone versatile multi-weight flexible italic variable variable-font responsive variable-weight english western european extended-latin european vietnamese,300 | 300i | 400 | 400i | 500 | 500i | 600 | 600i | 700 | 700i | 800 | 800i,wght: -,latin | latin-ext | vietnamese,David Sargent,896,1136,No,2024-04-10,2025-09-04,https://fonts.google.com/specimen/Platypi
+Play,Sans Serif,Sans Serif,Display,clean modern minimal professional readable neutral geometric humanist grotesque headline hero decorative large-text attention russian cyrillic slavic cyrillic extended greek english western european extended-latin european vietnamese multilingual international well-known common,400 | 700,,cyrillic | cyrillic-ext | greek | latin | latin-ext | vietnamese,Jonas Hecksher,158,1380,No,2011-05-04,2025-09-10,https://fonts.google.com/specimen/Play
+Playball,Display,,Handwriting | Display,bold decorative headline attention-grabbing creative expressive  script cursive hand-drawn artistic informal headline hero decorative large-text attention english western european extended-latin european vietnamese,400,,latin | latin-ext | vietnamese,Robert Leuschke,365,1623,No,2011-12-19,2025-09-02,https://fonts.google.com/specimen/Playball
+Playfair,Serif,Serif,Display,elegant traditional classic refined literary editorial transitional oldstyle didone headline hero decorative large-text attention versatile multi-weight flexible italic variable variable-font responsive variable-weight variable-width russian cyrillic slavic cyrillic extended english western european extended-latin european vietnamese,300 | 300i | 400 | 400i | 500 | 500i | 600 | 600i | 700 | 700i | 800 | 800i | 900 | 900i,opsz: - | wdth: - | wght: -,cyrillic | cyrillic-ext | latin | latin-ext | vietnamese,Claus Eggers Sørensen,352,1235,No,2023-04-12,2025-09-10,https://fonts.google.com/specimen/Playfair
+Playfair Display,Serif,Serif,Display,elegant traditional classic refined literary editorial transitional oldstyle didone headline hero decorative large-text attention versatile multi-weight flexible italic variable variable-font responsive variable-weight russian cyrillic slavic english western european extended-latin european vietnamese top-popular trending most-used,400 | 400i | 500 | 500i | 600 | 600i | 700 | 700i | 800 | 800i | 900 | 900i,wght: -,cyrillic | latin | latin-ext | vietnamese,Claus Eggers Sørensen,25,824,No,2011-11-16,2025-09-11,https://fonts.google.com/specimen/Playfair+Display
+Playfair Display SC,Serif,Serif,,elegant traditional classic refined literary editorial transitional oldstyle didone italic russian cyrillic slavic english western european extended-latin european vietnamese,400 | 400i | 700 | 700i | 900 | 900i,,cyrillic | latin | latin-ext | vietnamese,Claus Eggers Sørensen,345,1198,No,2012-10-26,2025-09-11,https://fonts.google.com/specimen/Playfair+Display+SC
+Playpen Sans,Handwriting,Sans Serif,Handwriting,personal casual friendly warm handwritten script organic geometric humanist grotesque script cursive hand-drawn artistic informal versatile multi-weight flexible variable variable-font responsive variable-weight russian cyrillic slavic cyrillic extended greek english western european extended-latin european vietnamese multilingual international,100 | 200 | 300 | 400 | 500 | 600 | 700 | 800,wght: -,cyrillic | cyrillic-ext | emoji | greek | latin | latin-ext | math | vietnamese,TypeTogether | Laura Meseguer | Veronika Burian | José Scaglione | Kostas Bartsokas | Vera Evstafieva | Tom Grace | Yorlmar Campos,377,21,No,2023-09-06,2025-09-16,https://fonts.google.com/specimen/Playpen+Sans
+Playpen Sans Arabic,Handwriting,Sans Serif,Handwriting,personal casual friendly warm handwritten script organic geometric humanist grotesque script cursive hand-drawn artistic informal versatile multi-weight flexible variable variable-font responsive variable-weight arabic RTL middle-east english western european extended-latin european,100 | 200 | 300 | 400 | 500 | 600 | 700 | 800,wght: -,arabic | emoji | latin | latin-ext | math,TypeTogether | Azza Alameddine | Laura Meseguer | Veronika Burian | José Scaglione,421,14,No,2025-05-12,2025-09-10,https://fonts.google.com/specimen/Playpen+Sans+Arabic
+Playpen Sans Deva,Handwriting,Sans Serif,Handwriting,personal casual friendly warm handwritten script organic geometric humanist grotesque script cursive hand-drawn artistic informal versatile multi-weight flexible variable variable-font responsive variable-weight hindi devanagari indian english western european extended-latin european,100 | 200 | 300 | 400 | 500 | 600 | 700 | 800,wght: -,devanagari | emoji | latin | latin-ext,TypeTogether | Pooja Saxena | Gunjan Panchal | Laura Meseguer | Veronika Burian | José Scaglione,426,10,No,2025-05-12,2025-09-10,https://fonts.google.com/specimen/Playpen+Sans+Deva
+Playpen Sans Hebrew,Handwriting,Sans Serif,Handwriting,personal casual friendly warm handwritten script organic geometric humanist grotesque script cursive hand-drawn artistic informal versatile multi-weight flexible variable variable-font responsive variable-weight hebrew RTL israeli english western european extended-latin european,100 | 200 | 300 | 400 | 500 | 600 | 700 | 800,wght: -,emoji | hebrew | latin | latin-ext | math,TypeTogether | Tom Grace | Laura Meseguer | Veronika Burian | José Scaglione,427,11,No,2025-05-12,2025-09-11,https://fonts.google.com/specimen/Playpen+Sans+Hebrew
+Playpen Sans Thai,Handwriting,Sans Serif,Handwriting,personal casual friendly warm handwritten script organic geometric humanist grotesque script cursive hand-drawn artistic informal versatile multi-weight flexible variable variable-font responsive variable-weight english western european extended-latin european thai southeast-asia,100 | 200 | 300 | 400 | 500 | 600 | 700 | 800,wght: -,emoji | latin | latin-ext | math | thai,TypeTogether | Sirin Gunkloy | Laura Meseguer | Veronika Burian | José Scaglione,424,8,No,2025-05-12,2025-09-10,https://fonts.google.com/specimen/Playpen+Sans+Thai
+Playwrite AR,Handwriting,,Handwriting,personal casual friendly warm handwritten script organic  script cursive hand-drawn artistic informal variable variable-font responsive variable-weight,100 | 200 | 300 | 400,wght: -,,TypeTogether | Veronika Burian | José Scaglione,1911,1809,No,2024-05-15,2025-09-11,https://fonts.google.com/specimen/Playwrite+AR
+Playwrite AR Guides,Handwriting,,Handwriting,personal casual friendly warm handwritten script organic  script cursive hand-drawn artistic informal,400,,,TypeTogether | Veronika Burian | José Scaglione,2073,434,No,2024-11-26,2025-05-30,https://fonts.google.com/specimen/Playwrite+AR+Guides
+Playwrite AT,Handwriting,,Handwriting,personal casual friendly warm handwritten script organic  script cursive hand-drawn artistic informal italic variable variable-font responsive variable-weight,100 | 100i | 200 | 200i | 300 | 300i | 400 | 400i,wght: -,,TypeTogether | Veronika Burian | José Scaglione,1515,2204,No,2024-05-15,2025-09-16,https://fonts.google.com/specimen/Playwrite+AT
+Playwrite AT Guides,Handwriting,,Handwriting,personal casual friendly warm handwritten script organic  script cursive hand-drawn artistic informal italic,400 | 400i,,,TypeTogether | Veronika Burian | José Scaglione,2081,497,No,2024-12-09,2025-05-30,https://fonts.google.com/specimen/Playwrite+AT+Guides
+Playwrite AU NSW,Handwriting,,Handwriting,personal casual friendly warm handwritten script organic  script cursive hand-drawn artistic informal variable variable-font responsive variable-weight,100 | 200 | 300 | 400,wght: -,,TypeTogether | Veronika Burian | José Scaglione,1566,710,No,2024-05-15,2025-09-08,https://fonts.google.com/specimen/Playwrite+AU+NSW
+Playwrite AU NSW Guides,Handwriting,,Handwriting,personal casual friendly warm handwritten script organic  script cursive hand-drawn artistic informal,400,,,TypeTogether | Veronika Burian | José Scaglione,2075,412,No,2024-12-09,2025-05-30,https://fonts.google.com/specimen/Playwrite+AU+NSW+Guides
+Playwrite AU QLD,Handwriting,,Handwriting,personal casual friendly warm handwritten script organic  script cursive hand-drawn artistic informal variable variable-font responsive variable-weight,100 | 200 | 300 | 400,wght: -,,TypeTogether | Veronika Burian | José Scaglione,1594,1164,No,2024-05-15,2025-09-16,https://fonts.google.com/specimen/Playwrite+AU+QLD
+Playwrite AU QLD Guides,Handwriting,,Handwriting,personal casual friendly warm handwritten script organic  script cursive hand-drawn artistic informal,400,,,TypeTogether | Veronika Burian | José Scaglione,2087,427,No,2024-12-09,2025-05-30,https://fonts.google.com/specimen/Playwrite+AU+QLD+Guides
+Playwrite AU SA,Handwriting,,Handwriting,personal casual friendly warm handwritten script organic  script cursive hand-drawn artistic informal variable variable-font responsive variable-weight,100 | 200 | 300 | 400,wght: -,,TypeTogether | Veronika Burian | José Scaglione,1631,1758,No,2024-05-15,2025-09-08,https://fonts.google.com/specimen/Playwrite+AU+SA
+Playwrite AU SA Guides,Handwriting,,Handwriting,personal casual friendly warm handwritten script organic  script cursive hand-drawn artistic informal,400,,,TypeTogether | Veronika Burian | José Scaglione,2079,580,No,2024-12-09,2025-05-30,https://fonts.google.com/specimen/Playwrite+AU+SA+Guides
+Playwrite AU TAS,Handwriting,,Handwriting,personal casual friendly warm handwritten script organic  script cursive hand-drawn artistic informal variable variable-font responsive variable-weight,100 | 200 | 300 | 400,wght: -,,TypeTogether | Veronika Burian | José Scaglione,1871,2293,No,2024-05-15,2025-09-16,https://fonts.google.com/specimen/Playwrite+AU+TAS
+Playwrite AU TAS Guides,Handwriting,,Handwriting,personal casual friendly warm handwritten script organic  script cursive hand-drawn artistic informal,400,,,TypeTogether | Veronika Burian | José Scaglione,2088,492,No,2024-12-09,2025-05-30,https://fonts.google.com/specimen/Playwrite+AU+TAS+Guides
+Playwrite AU VIC,Handwriting,,Handwriting,personal casual friendly warm handwritten script organic  script cursive hand-drawn artistic informal variable variable-font responsive variable-weight,100 | 200 | 300 | 400,wght: -,,TypeTogether | Veronika Burian | José Scaglione,1921,978,No,2024-05-15,2025-09-16,https://fonts.google.com/specimen/Playwrite+AU+VIC
+Playwrite AU VIC Guides,Handwriting,,Handwriting,personal casual friendly warm handwritten script organic  script cursive hand-drawn artistic informal,400,,,TypeTogether | Veronika Burian | José Scaglione,2052,578,No,2024-12-09,2025-05-30,https://fonts.google.com/specimen/Playwrite+AU+VIC+Guides
+Playwrite BE VLG,Handwriting,,Handwriting,personal casual friendly warm handwritten script organic  script cursive hand-drawn artistic informal variable variable-font responsive variable-weight,100 | 200 | 300 | 400,wght: -,,TypeTogether | Veronika Burian | José Scaglione,1805,1935,No,2024-05-15,2025-09-10,https://fonts.google.com/specimen/Playwrite+BE+VLG
+Playwrite BE VLG Guides,Handwriting,,Handwriting,personal casual friendly warm handwritten script organic  script cursive hand-drawn artistic informal,400,,,TypeTogether | Veronika Burian | José Scaglione,2071,465,No,2024-12-09,2025-05-30,https://fonts.google.com/specimen/Playwrite+BE+VLG+Guides
+Playwrite BE WAL,Handwriting,,Handwriting,personal casual friendly warm handwritten script organic  script cursive hand-drawn artistic informal variable variable-font responsive variable-weight,100 | 200 | 300 | 400,wght: -,,TypeTogether | Veronika Burian | José Scaglione,1806,252,No,2024-05-15,2025-09-16,https://fonts.google.com/specimen/Playwrite+BE+WAL
+Playwrite BE WAL Guides,Handwriting,,Handwriting,personal casual friendly warm handwritten script organic  script cursive hand-drawn artistic informal,400,,,TypeTogether | Veronika Burian | José Scaglione,2053,513,No,2024-12-09,2025-05-30,https://fonts.google.com/specimen/Playwrite+BE+WAL+Guides
+Playwrite BR,Handwriting,,Handwriting,personal casual friendly warm handwritten script organic  script cursive hand-drawn artistic informal variable variable-font responsive variable-weight,100 | 200 | 300 | 400,wght: -,,TypeTogether | Veronika Burian | José Scaglione,2011,704,No,2024-05-29,2025-09-02,https://fonts.google.com/specimen/Playwrite+BR
+Playwrite BR Guides,Handwriting,,Handwriting,personal casual friendly warm handwritten script organic  script cursive hand-drawn artistic informal,400,,,TypeTogether | Veronika Burian | José Scaglione,2060,467,No,2024-12-09,2025-05-30,https://fonts.google.com/specimen/Playwrite+BR+Guides
+Playwrite CA,Handwriting,,Handwriting,personal casual friendly warm handwritten script organic  script cursive hand-drawn artistic informal variable variable-font responsive variable-weight,100 | 200 | 300 | 400,wght: -,,TypeTogether | Veronika Burian | José Scaglione,1706,2106,No,2024-05-29,2025-09-16,https://fonts.google.com/specimen/Playwrite+CA
+Playwrite CA Guides,Handwriting,,Handwriting,personal casual friendly warm handwritten script organic  script cursive hand-drawn artistic informal,400,,,TypeTogether | Veronika Burian | José Scaglione,2072,577,No,2024-12-09,2025-05-30,https://fonts.google.com/specimen/Playwrite+CA+Guides
+Playwrite CL,Handwriting,,Handwriting,personal casual friendly warm handwritten script organic  script cursive hand-drawn artistic informal variable variable-font responsive variable-weight,100 | 200 | 300 | 400,wght: -,,TypeTogether | Veronika Burian | José Scaglione,1928,878,No,2024-05-15,2025-09-02,https://fonts.google.com/specimen/Playwrite+CL
+Playwrite CL Guides,Handwriting,,Handwriting,personal casual friendly warm handwritten script organic  script cursive hand-drawn artistic informal,400,,,TypeTogether | Veronika Burian | José Scaglione,2066,476,No,2024-12-09,2025-05-30,https://fonts.google.com/specimen/Playwrite+CL+Guides
+Playwrite CO,Handwriting,,Handwriting,personal casual friendly warm handwritten script organic  script cursive hand-drawn artistic informal variable variable-font responsive variable-weight,100 | 200 | 300 | 400,wght: -,,TypeTogether | Veronika Burian | José Scaglione,1901,1872,No,2023-12-12,2025-09-08,https://fonts.google.com/specimen/Playwrite+CO
+Playwrite CO Guides,Handwriting,,Handwriting,personal casual friendly warm handwritten script organic  script cursive hand-drawn artistic informal,400,,,TypeTogether | Veronika Burian | José Scaglione,1909,198,No,2024-11-26,2025-05-30,https://fonts.google.com/specimen/Playwrite+CO+Guides
+Playwrite CU,Handwriting,,Handwriting,personal casual friendly warm handwritten script organic  script cursive hand-drawn artistic informal variable variable-font responsive variable-weight,100 | 200 | 300 | 400,wght: -,,TypeTogether | Veronika Burian | José Scaglione,1500,2041,No,2024-05-15,2025-09-08,https://fonts.google.com/specimen/Playwrite+CU
+Playwrite CU Guides,Handwriting,,Handwriting,personal casual friendly warm handwritten script organic  script cursive hand-drawn artistic informal,400,,,TypeTogether | Veronika Burian | José Scaglione,2022,2323,No,2024-12-09,2025-05-30,https://fonts.google.com/specimen/Playwrite+CU+Guides
+Playwrite CZ,Handwriting,,Handwriting,personal casual friendly warm handwritten script organic  script cursive hand-drawn artistic informal variable variable-font responsive variable-weight,100 | 200 | 300 | 400,wght: -,,TypeTogether | Veronika Burian | José Scaglione,1919,791,No,2024-05-15,2025-09-04,https://fonts.google.com/specimen/Playwrite+CZ
+Playwrite CZ Guides,Handwriting,,Handwriting,personal casual friendly warm handwritten script organic  script cursive hand-drawn artistic informal,400,,,TypeTogether | Veronika Burian | José Scaglione,2083,555,No,2024-12-09,2025-05-30,https://fonts.google.com/specimen/Playwrite+CZ+Guides
+Playwrite DE Grund,Handwriting,,Handwriting,personal casual friendly warm handwritten script organic  script cursive hand-drawn artistic informal variable variable-font responsive variable-weight,100 | 200 | 300 | 400,wght: -,,TypeTogether | Veronika Burian | José Scaglione,1395,1402,No,2024-05-29,2025-09-16,https://fonts.google.com/specimen/Playwrite+DE+Grund
+Playwrite DE Grund Guides,Handwriting,,Handwriting,personal casual friendly warm handwritten script organic  script cursive hand-drawn artistic informal,400,,,TypeTogether | Veronika Burian | José Scaglione,2034,1766,No,2024-12-09,2025-05-30,https://fonts.google.com/specimen/Playwrite+DE+Grund+Guides
+Playwrite DE LA,Handwriting,,Handwriting,personal casual friendly warm handwritten script organic  script cursive hand-drawn artistic informal variable variable-font responsive variable-weight,100 | 200 | 300 | 400,wght: -,,TypeTogether | Veronika Burian | José Scaglione,1836,1906,No,2024-05-29,2025-09-04,https://fonts.google.com/specimen/Playwrite+DE+LA
+Playwrite DE LA Guides,Handwriting,,Handwriting,personal casual friendly warm handwritten script organic  script cursive hand-drawn artistic informal,400,,,TypeTogether | Veronika Burian | José Scaglione,2067,408,No,2024-12-09,2025-05-30,https://fonts.google.com/specimen/Playwrite+DE+LA+Guides
+Playwrite DE SAS,Handwriting,,Handwriting,personal casual friendly warm handwritten script organic  script cursive hand-drawn artistic informal variable variable-font responsive variable-weight,100 | 200 | 300 | 400,wght: -,,TypeTogether | Veronika Burian | José Scaglione,1774,1762,No,2024-05-29,2025-09-16,https://fonts.google.com/specimen/Playwrite+DE+SAS
+Playwrite DE SAS Guides,Handwriting,,Handwriting,personal casual friendly warm handwritten script organic  script cursive hand-drawn artistic informal,400,,,TypeTogether | Veronika Burian | José Scaglione,2077,464,No,2024-12-09,2025-05-30,https://fonts.google.com/specimen/Playwrite+DE+SAS+Guides
+Playwrite DE VA,Handwriting,,Handwriting,personal casual friendly warm handwritten script organic  script cursive hand-drawn artistic informal variable variable-font responsive variable-weight,100 | 200 | 300 | 400,wght: -,,TypeTogether | Veronika Burian | José Scaglione,2003,1628,No,2024-05-29,2025-09-04,https://fonts.google.com/specimen/Playwrite+DE+VA
+Playwrite DE VA Guides,Handwriting,,Handwriting,personal casual friendly warm handwritten script organic  script cursive hand-drawn artistic informal,400,,,TypeTogether | Veronika Burian | José Scaglione,2058,898,No,2024-12-09,2025-05-30,https://fonts.google.com/specimen/Playwrite+DE+VA+Guides
+Playwrite DK Loopet,Handwriting,,Handwriting,personal casual friendly warm handwritten script organic  script cursive hand-drawn artistic informal variable variable-font responsive variable-weight,100 | 200 | 300 | 400,wght: -,,TypeTogether | Veronika Burian | José Scaglione,1701,844,No,2024-05-15,2025-09-16,https://fonts.google.com/specimen/Playwrite+DK+Loopet
+Playwrite DK Loopet Guides,Handwriting,,Handwriting,personal casual friendly warm handwritten script organic  script cursive hand-drawn artistic informal,400,,,TypeTogether | Veronika Burian | José Scaglione,2068,449,No,2024-12-09,2025-05-30,https://fonts.google.com/specimen/Playwrite+DK+Loopet+Guides
+Playwrite DK Uloopet,Handwriting,,Handwriting,personal casual friendly warm handwritten script organic  script cursive hand-drawn artistic informal variable variable-font responsive variable-weight,100 | 200 | 300 | 400,wght: -,,TypeTogether | Veronika Burian | José Scaglione,1864,936,No,2024-05-15,2025-09-11,https://fonts.google.com/specimen/Playwrite+DK+Uloopet
+Playwrite DK Uloopet Guides,Handwriting,,Handwriting,personal casual friendly warm handwritten script organic  script cursive hand-drawn artistic informal,400,,,TypeTogether | Veronika Burian | José Scaglione,1912,29,No,2024-12-09,2025-05-30,https://fonts.google.com/specimen/Playwrite+DK+Uloopet+Guides
+Playwrite ES,Handwriting,,Handwriting,personal casual friendly warm handwritten script organic  script cursive hand-drawn artistic informal variable variable-font responsive variable-weight,100 | 200 | 300 | 400,wght: -,,TypeTogether | Veronika Burian | José Scaglione,1819,1953,No,2024-05-29,2025-09-11,https://fonts.google.com/specimen/Playwrite+ES
+Playwrite ES Deco,Handwriting,,Handwriting,personal casual friendly warm handwritten script organic  script cursive hand-drawn artistic informal variable variable-font responsive variable-weight,100 | 200 | 300 | 400,wght: -,,TypeTogether | Veronika Burian | José Scaglione,1950,685,No,2024-05-29,2025-09-16,https://fonts.google.com/specimen/Playwrite+ES+Deco
+Playwrite ES Deco Guides,Handwriting,,Handwriting,personal casual friendly warm handwritten script organic  script cursive hand-drawn artistic informal,400,,,TypeTogether | Veronika Burian | José Scaglione,2054,526,No,2024-12-09,2025-05-30,https://fonts.google.com/specimen/Playwrite+ES+Deco+Guides
+Playwrite ES Guides,Handwriting,,Handwriting,personal casual friendly warm handwritten script organic  script cursive hand-drawn artistic informal,400,,,TypeTogether | Veronika Burian | José Scaglione,2086,490,No,2024-12-09,2025-05-30,https://fonts.google.com/specimen/Playwrite+ES+Guides
+Playwrite FR Moderne,Handwriting,,Handwriting,personal casual friendly warm handwritten script organic  script cursive hand-drawn artistic informal variable variable-font responsive variable-weight,100 | 200 | 300 | 400,wght: -,,TypeTogether | Veronika Burian | José Scaglione,1827,759,No,2024-05-15,2025-09-11,https://fonts.google.com/specimen/Playwrite+FR+Moderne
+Playwrite FR Moderne Guides,Handwriting,,Handwriting,personal casual friendly warm handwritten script organic  script cursive hand-drawn artistic informal,400,,,TypeTogether | Veronika Burian | José Scaglione,2059,758,No,2024-12-09,2025-05-30,https://fonts.google.com/specimen/Playwrite+FR+Moderne+Guides
+Playwrite FR Trad,Handwriting,,Handwriting,personal casual friendly warm handwritten script organic  script cursive hand-drawn artistic informal variable variable-font responsive variable-weight,100 | 200 | 300 | 400,wght: -,,TypeTogether | Veronika Burian | José Scaglione,2027,859,No,2023-12-11,2025-09-11,https://fonts.google.com/specimen/Playwrite+FR+Trad
+Playwrite FR Trad Guides,Handwriting,,Handwriting,personal casual friendly warm handwritten script organic  script cursive hand-drawn artistic informal,400,,,TypeTogether | Veronika Burian | José Scaglione,2062,560,No,2024-12-09,2025-05-30,https://fonts.google.com/specimen/Playwrite+FR+Trad+Guides
+Playwrite GB J,Handwriting,,Handwriting,personal casual friendly warm handwritten script organic  script cursive hand-drawn artistic informal italic variable variable-font responsive variable-weight,100 | 100i | 200 | 200i | 300 | 300i | 400 | 400i,wght: -,,TypeTogether | Veronika Burian | José Scaglione,1898,1488,No,2024-05-29,2025-09-11,https://fonts.google.com/specimen/Playwrite+GB+J
+Playwrite GB J Guides,Handwriting,,Handwriting,personal casual friendly warm handwritten script organic  script cursive hand-drawn artistic informal italic,400 | 400i,,,TypeTogether | Veronika Burian | José Scaglione,2046,2239,No,2024-12-09,2025-05-30,https://fonts.google.com/specimen/Playwrite+GB+J+Guides
+Playwrite GB S,Handwriting,,Handwriting,personal casual friendly warm handwritten script organic  script cursive hand-drawn artistic informal italic variable variable-font responsive variable-weight,100 | 100i | 200 | 200i | 300 | 300i | 400 | 400i,wght: -,,TypeTogether | Veronika Burian | José Scaglione,1679,1212,No,2024-05-29,2025-09-08,https://fonts.google.com/specimen/Playwrite+GB+S
+Playwrite GB S Guides,Handwriting,,Handwriting,personal casual friendly warm handwritten script organic  script cursive hand-drawn artistic informal italic,400 | 400i,,,TypeTogether | Veronika Burian | José Scaglione,2085,417,No,2024-12-09,2025-05-30,https://fonts.google.com/specimen/Playwrite+GB+S+Guides
+Playwrite HR,Handwriting,,Handwriting,personal casual friendly warm handwritten script organic  script cursive hand-drawn artistic informal variable variable-font responsive variable-weight,100 | 200 | 300 | 400,wght: -,,TypeTogether | Veronika Burian | José Scaglione,1555,638,No,2024-05-15,2025-09-16,https://fonts.google.com/specimen/Playwrite+HR
+Playwrite HR Guides,Handwriting,,Handwriting,personal casual friendly warm handwritten script organic  script cursive hand-drawn artistic informal,400,,,TypeTogether | Veronika Burian | José Scaglione,2089,506,No,2024-12-09,2025-05-30,https://fonts.google.com/specimen/Playwrite+HR+Guides
+Playwrite HR Lijeva,Handwriting,,Handwriting,personal casual friendly warm handwritten script organic  script cursive hand-drawn artistic informal variable variable-font responsive variable-weight,100 | 200 | 300 | 400,wght: -,,TypeTogether | Veronika Burian | José Scaglione,1843,2153,No,2024-05-15,2025-09-11,https://fonts.google.com/specimen/Playwrite+HR+Lijeva
+Playwrite HR Lijeva Guides,Handwriting,,Handwriting,personal casual friendly warm handwritten script organic  script cursive hand-drawn artistic informal,400,,,TypeTogether | Veronika Burian | José Scaglione,2069,432,No,2024-12-09,2025-05-30,https://fonts.google.com/specimen/Playwrite+HR+Lijeva+Guides
+Playwrite HU,Handwriting,,Handwriting,personal casual friendly warm handwritten script organic  script cursive hand-drawn artistic informal variable variable-font responsive variable-weight,100 | 200 | 300 | 400,wght: -,,TypeTogether | Veronika Burian | José Scaglione,1456,22,No,2024-05-15,2025-09-04,https://fonts.google.com/specimen/Playwrite+HU
+Playwrite HU Guides,Handwriting,,Handwriting,personal casual friendly warm handwritten script organic  script cursive hand-drawn artistic informal,400,,,TypeTogether | Veronika Burian | José Scaglione,2084,478,No,2024-12-09,2025-05-30,https://fonts.google.com/specimen/Playwrite+HU+Guides
+Playwrite ID,Handwriting,,Handwriting,personal casual friendly warm handwritten script organic  script cursive hand-drawn artistic informal variable variable-font responsive variable-weight,100 | 200 | 300 | 400,wght: -,,TypeTogether | Veronika Burian | José Scaglione,1944,1729,No,2024-05-29,2025-09-04,https://fonts.google.com/specimen/Playwrite+ID
+Playwrite ID Guides,Handwriting,,Handwriting,personal casual friendly warm handwritten script organic  script cursive hand-drawn artistic informal,400,,,TypeTogether | Veronika Burian | José Scaglione,2080,345,No,2024-12-09,2025-05-30,https://fonts.google.com/specimen/Playwrite+ID+Guides
+Playwrite IE,Handwriting,,Handwriting,personal casual friendly warm handwritten script organic  script cursive hand-drawn artistic informal variable variable-font responsive variable-weight,100 | 200 | 300 | 400,wght: -,,TypeTogether | Veronika Burian | José Scaglione,1954,2228,No,2024-05-29,2025-09-16,https://fonts.google.com/specimen/Playwrite+IE
+Playwrite IE Guides,Handwriting,,Handwriting,personal casual friendly warm handwritten script organic  script cursive hand-drawn artistic informal,400,,,TypeTogether | Veronika Burian | José Scaglione,2044,625,No,2024-12-09,2025-05-30,https://fonts.google.com/specimen/Playwrite+IE+Guides
+Playwrite IN,Handwriting,,Handwriting,personal casual friendly warm handwritten script organic  script cursive hand-drawn artistic informal variable variable-font responsive variable-weight,100 | 200 | 300 | 400,wght: -,,TypeTogether | Veronika Burian | José Scaglione,1492,1942,No,2024-05-29,2025-09-08,https://fonts.google.com/specimen/Playwrite+IN
+Playwrite IN Guides,Handwriting,,Handwriting,personal casual friendly warm handwritten script organic  script cursive hand-drawn artistic informal,400,,,TypeTogether | Veronika Burian | José Scaglione,2021,2312,No,2024-12-09,2025-05-30,https://fonts.google.com/specimen/Playwrite+IN+Guides
+Playwrite IS,Handwriting,,Handwriting,personal casual friendly warm handwritten script organic  script cursive hand-drawn artistic informal variable variable-font responsive variable-weight,100 | 200 | 300 | 400,wght: -,,TypeTogether | Veronika Burian | José Scaglione,1437,387,No,2024-05-15,2025-09-11,https://fonts.google.com/specimen/Playwrite+IS
+Playwrite IS Guides,Handwriting,,Handwriting,personal casual friendly warm handwritten script organic  script cursive hand-drawn artistic informal,400,,,TypeTogether | Veronika Burian | José Scaglione,2090,481,No,2024-12-09,2025-05-30,https://fonts.google.com/specimen/Playwrite+IS+Guides
+Playwrite IT Moderna,Handwriting,,Handwriting,personal casual friendly warm handwritten script organic  script cursive hand-drawn artistic informal variable variable-font responsive variable-weight,100 | 200 | 300 | 400,wght: -,,TypeTogether | Veronika Burian | José Scaglione,1775,633,No,2024-05-29,2025-09-08,https://fonts.google.com/specimen/Playwrite+IT+Moderna
+Playwrite IT Moderna Guides,Handwriting,,Handwriting,personal casual friendly warm handwritten script organic  script cursive hand-drawn artistic informal,400,,,TypeTogether | Veronika Burian | José Scaglione,2061,769,No,2024-12-09,2025-05-30,https://fonts.google.com/specimen/Playwrite+IT+Moderna+Guides
+Playwrite IT Trad,Handwriting,,Handwriting,personal casual friendly warm handwritten script organic  script cursive hand-drawn artistic informal variable variable-font responsive variable-weight,100 | 200 | 300 | 400,wght: -,,TypeTogether | Veronika Burian | José Scaglione,1995,151,No,2024-05-29,2025-09-11,https://fonts.google.com/specimen/Playwrite+IT+Trad
+Playwrite IT Trad Guides,Handwriting,,Handwriting,personal casual friendly warm handwritten script organic  script cursive hand-drawn artistic informal,400,,,TypeTogether | Veronika Burian | José Scaglione,2065,658,No,2024-12-09,2025-05-30,https://fonts.google.com/specimen/Playwrite+IT+Trad+Guides
+Playwrite MX,Handwriting,,Handwriting,personal casual friendly warm handwritten script organic  script cursive hand-drawn artistic informal variable variable-font responsive variable-weight,100 | 200 | 300 | 400,wght: -,,TypeTogether | Veronika Burian | José Scaglione,1797,670,No,2024-05-29,2025-09-10,https://fonts.google.com/specimen/Playwrite+MX
+Playwrite MX Guides,Handwriting,,Handwriting,personal casual friendly warm handwritten script organic  script cursive hand-drawn artistic informal,400,,,TypeTogether | Veronika Burian | José Scaglione,1691,175,No,2024-12-09,2025-05-30,https://fonts.google.com/specimen/Playwrite+MX+Guides
+Playwrite NG Modern,Handwriting,,Handwriting,personal casual friendly warm handwritten script organic  script cursive hand-drawn artistic informal variable variable-font responsive variable-weight,100 | 200 | 300 | 400,wght: -,,TypeTogether | Veronika Burian | José Scaglione,1883,1218,No,2024-05-29,2025-09-11,https://fonts.google.com/specimen/Playwrite+NG+Modern
+Playwrite NG Modern Guides,Handwriting,,Handwriting,personal casual friendly warm handwritten script organic  script cursive hand-drawn artistic informal,400,,,TypeTogether | Veronika Burian | José Scaglione,2063,399,No,2024-12-09,2025-05-30,https://fonts.google.com/specimen/Playwrite+NG+Modern+Guides
+Playwrite NL,Handwriting,,Handwriting,personal casual friendly warm handwritten script organic  script cursive hand-drawn artistic informal variable variable-font responsive variable-weight,100 | 200 | 300 | 400,wght: -,,TypeTogether | Veronika Burian | José Scaglione,1750,1239,No,2024-05-15,2025-09-16,https://fonts.google.com/specimen/Playwrite+NL
+Playwrite NL Guides,Handwriting,,Handwriting,personal casual friendly warm handwritten script organic  script cursive hand-drawn artistic informal,400,,,TypeTogether | Veronika Burian | José Scaglione,2051,1740,No,2024-12-09,2025-05-30,https://fonts.google.com/specimen/Playwrite+NL+Guides
+Playwrite NO,Handwriting,,Handwriting,personal casual friendly warm handwritten script organic  script cursive hand-drawn artistic informal variable variable-font responsive variable-weight,100 | 200 | 300 | 400,wght: -,,TypeTogether | Veronika Burian | José Scaglione,1766,613,No,2024-05-15,2025-09-04,https://fonts.google.com/specimen/Playwrite+NO
+Playwrite NO Guides,Handwriting,,Handwriting,personal casual friendly warm handwritten script organic  script cursive hand-drawn artistic informal,400,,,TypeTogether | Veronika Burian | José Scaglione,2082,431,No,2024-12-09,2025-05-30,https://fonts.google.com/specimen/Playwrite+NO+Guides
+Playwrite NZ,Handwriting,,Handwriting,personal casual friendly warm handwritten script organic  script cursive hand-drawn artistic informal variable variable-font responsive variable-weight,100 | 200 | 300 | 400,wght: -,,TypeTogether | Veronika Burian | José Scaglione,1865,1358,No,2024-05-29,2026-01-28,https://fonts.google.com/specimen/Playwrite+NZ
+Playwrite NZ Basic,Handwriting,,Handwriting,personal casual friendly warm handwritten script organic  script cursive hand-drawn artistic informal variable variable-font responsive variable-weight,100 | 200 | 300 | 400,wght: -,,TypeTogether | Veronika Burian | José Scaglione,1768,2315,No,2026-01-27,2026-01-28,https://fonts.google.com/specimen/Playwrite+NZ+Basic
+Playwrite NZ Basic Guides,Handwriting,,Handwriting,personal casual friendly warm handwritten script organic  script cursive hand-drawn artistic informal,400,,,TypeTogether | Veronika Burian | José Scaglione,1917,2324,No,2026-01-27,2026-01-28,https://fonts.google.com/specimen/Playwrite+NZ+Basic+Guides
+Playwrite NZ Guides,Handwriting,,Handwriting,personal casual friendly warm handwritten script organic  script cursive hand-drawn artistic informal,400,,,TypeTogether | Veronika Burian | José Scaglione,2055,662,No,2024-11-26,2026-01-28,https://fonts.google.com/specimen/Playwrite+NZ+Guides
+Playwrite PE,Handwriting,,Handwriting,personal casual friendly warm handwritten script organic  script cursive hand-drawn artistic informal variable variable-font responsive variable-weight,100 | 200 | 300 | 400,wght: -,,TypeTogether | Veronika Burian | José Scaglione,1896,683,No,2024-05-15,2025-09-04,https://fonts.google.com/specimen/Playwrite+PE
+Playwrite PE Guides,Handwriting,,Handwriting,personal casual friendly warm handwritten script organic  script cursive hand-drawn artistic informal,400,,,TypeTogether | Veronika Burian | José Scaglione,2017,926,No,2024-12-09,2025-05-30,https://fonts.google.com/specimen/Playwrite+PE+Guides
+Playwrite PL,Handwriting,,Handwriting,personal casual friendly warm handwritten script organic  script cursive hand-drawn artistic informal variable variable-font responsive variable-weight,100 | 200 | 300 | 400,wght: -,,TypeTogether | Veronika Burian | José Scaglione,1587,641,No,2024-05-15,2025-09-04,https://fonts.google.com/specimen/Playwrite+PL
+Playwrite PL Guides,Handwriting,,Handwriting,personal casual friendly warm handwritten script organic  script cursive hand-drawn artistic informal,400,,,TypeTogether | Veronika Burian | José Scaglione,2004,929,No,2024-12-09,2025-05-30,https://fonts.google.com/specimen/Playwrite+PL+Guides
+Playwrite PT,Handwriting,,Handwriting,personal casual friendly warm handwritten script organic  script cursive hand-drawn artistic informal variable variable-font responsive variable-weight,100 | 200 | 300 | 400,wght: -,,TypeTogether | Veronika Burian | José Scaglione,1849,440,No,2024-05-15,2025-09-16,https://fonts.google.com/specimen/Playwrite+PT
+Playwrite PT Guides,Handwriting,,Handwriting,personal casual friendly warm handwritten script organic  script cursive hand-drawn artistic informal,400,,,TypeTogether | Veronika Burian | José Scaglione,2008,914,No,2024-12-09,2025-05-30,https://fonts.google.com/specimen/Playwrite+PT+Guides
+Playwrite RO,Handwriting,,Handwriting,personal casual friendly warm handwritten script organic  script cursive hand-drawn artistic informal variable variable-font responsive variable-weight,100 | 200 | 300 | 400,wght: -,,TypeTogether | Veronika Burian | José Scaglione,1749,219,No,2024-05-15,2025-09-10,https://fonts.google.com/specimen/Playwrite+RO
+Playwrite RO Guides,Handwriting,,Handwriting,personal casual friendly warm handwritten script organic  script cursive hand-drawn artistic informal,400,,,TypeTogether | Veronika Burian | José Scaglione,2074,523,No,2024-12-09,2025-05-30,https://fonts.google.com/specimen/Playwrite+RO+Guides
+Playwrite SK,Handwriting,,Handwriting,personal casual friendly warm handwritten script organic  script cursive hand-drawn artistic informal variable variable-font responsive variable-weight,100 | 200 | 300 | 400,wght: -,,TypeTogether | Veronika Burian | José Scaglione,1929,1870,No,2024-05-15,2025-09-02,https://fonts.google.com/specimen/Playwrite+SK
+Playwrite SK Guides,Handwriting,,Handwriting,personal casual friendly warm handwritten script organic  script cursive hand-drawn artistic informal,400,,,TypeTogether | Veronika Burian | José Scaglione,2076,437,No,2024-12-09,2025-05-30,https://fonts.google.com/specimen/Playwrite+SK+Guides
+Playwrite TZ,Handwriting,,Handwriting,personal casual friendly warm handwritten script organic  script cursive hand-drawn artistic informal variable variable-font responsive variable-weight,100 | 200 | 300 | 400,wght: -,,TypeTogether | Veronika Burian | José Scaglione,1964,602,No,2024-05-29,2025-09-10,https://fonts.google.com/specimen/Playwrite+TZ
+Playwrite TZ Guides,Handwriting,,Handwriting,personal casual friendly warm handwritten script organic  script cursive hand-drawn artistic informal,400,,,TypeTogether | Veronika Burian | José Scaglione,2047,826,No,2024-12-09,2025-05-30,https://fonts.google.com/specimen/Playwrite+TZ+Guides
+Playwrite US Modern,Handwriting,,Handwriting,personal casual friendly warm handwritten script organic  script cursive hand-drawn artistic informal variable variable-font responsive variable-weight,100 | 200 | 300 | 400,wght: -,,TypeTogether | Veronika Burian | José Scaglione,1560,1464,No,2024-05-29,2025-09-16,https://fonts.google.com/specimen/Playwrite+US+Modern
+Playwrite US Modern Guides,Handwriting,,Handwriting,personal casual friendly warm handwritten script organic  script cursive hand-drawn artistic informal,400,,,TypeTogether | Veronika Burian | José Scaglione,2064,711,No,2024-12-09,2025-05-30,https://fonts.google.com/specimen/Playwrite+US+Modern+Guides
+Playwrite US Trad,Handwriting,,Handwriting,personal casual friendly warm handwritten script organic  script cursive hand-drawn artistic informal variable variable-font responsive variable-weight,100 | 200 | 300 | 400,wght: -,,TypeTogether | Veronika Burian | José Scaglione,1295,1918,No,2024-05-29,2025-09-04,https://fonts.google.com/specimen/Playwrite+US+Trad
+Playwrite US Trad Guides,Handwriting,,Handwriting,personal casual friendly warm handwritten script organic  script cursive hand-drawn artistic informal,400,,,TypeTogether | Veronika Burian | José Scaglione,2006,778,No,2024-12-09,2025-05-30,https://fonts.google.com/specimen/Playwrite+US+Trad+Guides
+Playwrite VN,Handwriting,,Handwriting,personal casual friendly warm handwritten script organic  script cursive hand-drawn artistic informal variable variable-font responsive variable-weight,100 | 200 | 300 | 400,wght: -,,TypeTogether | Veronika Burian | José Scaglione,1860,1764,No,2024-04-02,2025-09-16,https://fonts.google.com/specimen/Playwrite+VN
+Playwrite VN Guides,Handwriting,,Handwriting,personal casual friendly warm handwritten script organic  script cursive hand-drawn artistic informal,400,,,TypeTogether | Veronika Burian | José Scaglione,1620,2236,No,2024-12-09,2025-05-30,https://fonts.google.com/specimen/Playwrite+VN+Guides
+Playwrite ZA,Handwriting,,Handwriting,personal casual friendly warm handwritten script organic  script cursive hand-drawn artistic informal variable variable-font responsive variable-weight,100 | 200 | 300 | 400,wght: -,,TypeTogether | Veronika Burian | José Scaglione,1783,2110,No,2024-05-29,2025-09-08,https://fonts.google.com/specimen/Playwrite+ZA
+Playwrite ZA Guides,Handwriting,,Handwriting,personal casual friendly warm handwritten script organic  script cursive hand-drawn artistic informal,400,,,TypeTogether | Veronika Burian | José Scaglione,2070,1251,No,2024-12-09,2025-05-30,https://fonts.google.com/specimen/Playwrite+ZA+Guides
+Plus Jakarta Sans,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque versatile multi-weight flexible italic variable variable-font responsive variable-weight cyrillic extended english western european extended-latin european vietnamese popular widely-used,200 | 200i | 300 | 300i | 400 | 400i | 500 | 500i | 600 | 600i | 700 | 700i | 800 | 800i,wght: -,cyrillic-ext | latin | latin-ext | vietnamese,Tokotype,69,591,No,2022-03-23,2025-09-10,https://fonts.google.com/specimen/Plus+Jakarta+Sans
+Pochaevsk,Display,,Display,bold decorative headline attention-grabbing creative expressive  headline hero decorative large-text attention russian cyrillic slavic cyrillic extended english western european,400,,cyrillic | cyrillic-ext | latin,Aleksandr Andreev,1961,699,No,2024-12-05,2025-05-30,https://fonts.google.com/specimen/Pochaevsk
+Podkova,Serif,Serif,Display,elegant traditional classic refined literary editorial transitional oldstyle didone headline hero decorative large-text attention variable variable-font responsive variable-weight russian cyrillic slavic cyrillic extended english western european extended-latin european vietnamese,400 | 500 | 600 | 700 | 800,wght: -,cyrillic | cyrillic-ext | latin | latin-ext | vietnamese,Cyreal,618,958,No,2011-05-18,2025-09-08,https://fonts.google.com/specimen/Podkova
+Poetsen One,Display,Sans Serif,Display,bold decorative headline attention-grabbing creative expressive geometric humanist grotesque headline hero decorative large-text attention english western european extended-latin european,400,,latin | latin-ext,Rodrigo Fuenzalida | Pablo Impallari,910,1143,No,2024-05-01,2025-05-30,https://fonts.google.com/specimen/Poetsen+One
+Poiret One,Display,Sans Serif,Display,bold decorative headline attention-grabbing creative expressive geometric humanist grotesque headline hero decorative large-text attention russian cyrillic slavic english western european extended-latin european,400,,cyrillic | latin | latin-ext,Denis Masharov,384,1904,No,2012-02-29,2025-09-11,https://fonts.google.com/specimen/Poiret+One
+Poller One,Display,Sans Serif,Display,bold decorative headline attention-grabbing creative expressive geometric humanist grotesque headline hero decorative large-text attention english western european,400,,latin,Yvonne Schüttler,1036,1293,No,2011-09-28,2025-06-25,https://fonts.google.com/specimen/Poller+One
+Poltawski Nowy,Serif,Serif,,elegant traditional classic refined literary editorial transitional oldstyle didone italic variable variable-font responsive variable-weight english western european extended-latin european vietnamese,400 | 400i | 500 | 500i | 600 | 600i | 700 | 700i,wght: -,latin | latin-ext | vietnamese,Adam Półtawski | Mateusz Machalski | Borys Kosmynka | Ania Wieluńska,1216,232,No,2023-04-19,2025-09-10,https://fonts.google.com/specimen/Poltawski+Nowy
+Poly,Serif,Serif,,elegant traditional classic refined literary editorial transitional oldstyle didone italic english western european extended-latin european,400 | 400i,,latin | latin-ext,Nicolás Silva,1023,1588,No,2011-11-02,2025-09-08,https://fonts.google.com/specimen/Poly
+Pompiere,Display,Sans Serif,Display,bold decorative headline attention-grabbing creative expressive geometric humanist grotesque headline hero decorative large-text attention english western european,400,,latin,Karolina Lach,859,1383,No,2011-07-20,2025-09-04,https://fonts.google.com/specimen/Pompiere
+Ponnala,Display,,Display,bold decorative headline attention-grabbing creative expressive  headline hero decorative large-text attention english western european telugu indian,400,,latin | telugu,Appaji Ambarisha Darbha,1946,2256,No,2024-11-18,2025-09-17,https://fonts.google.com/specimen/Ponnala
+Ponomar,Display,,Display,bold decorative headline attention-grabbing creative expressive  headline hero decorative large-text attention russian cyrillic slavic cyrillic extended english western european,400,,cyrillic | cyrillic-ext | latin,Aleksandr Andreev,1551,775,No,2025-02-26,2025-05-30,https://fonts.google.com/specimen/Ponomar
+Pontano Sans,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque variable variable-font responsive variable-weight english western european extended-latin european,300 | 400 | 500 | 600 | 700,wght: -,latin | latin-ext,Vernon Adams,473,1644,No,2012-03-14,2025-09-08,https://fonts.google.com/specimen/Pontano+Sans
+Poor Story,Display,,Display,bold decorative headline attention-grabbing creative expressive  headline hero decorative large-text attention korean hangul english western european,400,,korean | latin,Yoon Design,1364,248,No,2018-02-23,2025-09-08,https://fonts.google.com/specimen/Poor+Story
+Poppins,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque versatile multi-weight flexible italic hindi devanagari indian english western european extended-latin european top-popular trending most-used,100 | 100i | 200 | 200i | 300 | 300i | 400 | 400i | 500 | 500i | 600 | 600i | 700 | 700i | 800 | 800i | 900 | 900i,,devanagari | latin | latin-ext,Indian Type Foundry | Jonny Pinhorn | Ninad Kale,9,1146,No,2015-06-03,2025-09-16,https://fonts.google.com/specimen/Poppins
+Port Lligat Sans,Sans Serif,Sans Serif,Display,clean modern minimal professional readable neutral geometric humanist grotesque headline hero decorative large-text attention english western european,400,,latin,Tipo,1464,551,No,2012-01-18,2025-09-04,https://fonts.google.com/specimen/Port+Lligat+Sans
+Port Lligat Slab,Serif,Serif,Display,elegant traditional classic refined literary editorial transitional oldstyle didone headline hero decorative large-text attention english western european,400,,latin,Tipo,1346,1780,No,2012-01-18,2025-09-08,https://fonts.google.com/specimen/Port+Lligat+Slab
+Potta One,Display,,Display,bold decorative headline attention-grabbing creative expressive  headline hero decorative large-text attention japanese kanji hiragana katakana english western european extended-latin european vietnamese,400,,japanese | latin | latin-ext | vietnamese,Font Zone 108,548,1565,No,2020-12-14,2025-09-02,https://fonts.google.com/specimen/Potta+One
+Pragati Narrow,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque hindi devanagari indian english western european extended-latin european,400 | 700,,devanagari | latin | latin-ext,Omnibus-Type,466,400,No,2015-04-22,2025-09-11,https://fonts.google.com/specimen/Pragati+Narrow
+Praise,Handwriting,,Display | Handwriting,personal casual friendly warm handwritten script organic  headline hero decorative large-text attention script cursive hand-drawn artistic informal english western european extended-latin european vietnamese,400,,latin | latin-ext | vietnamese,Robert Leuschke,1552,1314,No,2021-10-12,2025-09-16,https://fonts.google.com/specimen/Praise
+Prata,Serif,Serif,Display,elegant traditional classic refined literary editorial transitional oldstyle didone headline hero decorative large-text attention russian cyrillic slavic cyrillic extended english western european vietnamese well-known common,400,,cyrillic | cyrillic-ext | latin | vietnamese,Cyreal,241,972,No,2011-09-07,2025-09-16,https://fonts.google.com/specimen/Prata
+Preahvihear,Sans Serif,Sans Serif,Display,clean modern minimal professional readable neutral geometric humanist grotesque headline hero decorative large-text attention khmer cambodian english western european,400,,khmer | latin,Danh Hong,1495,2263,No,2011-03-02,2025-09-16,https://fonts.google.com/specimen/Preahvihear
+Press Start 2P,Display,,Display,bold decorative headline attention-grabbing creative expressive  headline hero decorative large-text attention russian cyrillic slavic cyrillic extended greek english western european extended-latin european well-known common,400,,cyrillic | cyrillic-ext | greek | latin | latin-ext,CodeMan38,272,1166,No,2012-04-04,2025-09-16,https://fonts.google.com/specimen/Press+Start+2P
+Pridi,Serif,Serif,Display,elegant traditional classic refined literary editorial transitional oldstyle didone headline hero decorative large-text attention versatile multi-weight flexible english western european extended-latin european thai southeast-asia vietnamese,200 | 300 | 400 | 500 | 600 | 700,,latin | latin-ext | thai | vietnamese,Cadson Demak,510,2223,No,2016-06-15,2025-09-11,https://fonts.google.com/specimen/Pridi
+Princess Sofia,Handwriting,,Display | Handwriting,personal casual friendly warm handwritten script organic  headline hero decorative large-text attention script cursive hand-drawn artistic informal english western european extended-latin european,400,,latin | latin-ext,Tart Workshop,1574,1710,No,2012-02-15,2025-09-16,https://fonts.google.com/specimen/Princess+Sofia
+Prociono,Serif,Serif,Display,elegant traditional classic refined literary editorial transitional oldstyle didone headline hero decorative large-text attention english western european,400,,latin,Barry Schwartz,1089,1893,No,2011-08-31,2025-09-08,https://fonts.google.com/specimen/Prociono
+Prompt,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque versatile multi-weight flexible italic english western european extended-latin european thai southeast-asia vietnamese top-popular trending most-used,100 | 100i | 200 | 200i | 300 | 300i | 400 | 400i | 500 | 500i | 600 | 600i | 700 | 700i | 800 | 800i | 900 | 900i,,latin | latin-ext | thai | vietnamese,Cadson Demak,50,564,No,2016-06-15,2025-09-02,https://fonts.google.com/specimen/Prompt
+Prosto One,Display,Sans Serif,Display,bold decorative headline attention-grabbing creative expressive geometric humanist grotesque headline hero decorative large-text attention russian cyrillic slavic english western european extended-latin european,400,,cyrillic | latin | latin-ext,Jovanny Lemonad | Pavel Emelyanov,920,2124,No,2012-02-29,2025-09-10,https://fonts.google.com/specimen/Prosto+One
+Protest Guerrilla,Display,Sans Serif,Display,bold decorative headline attention-grabbing creative expressive geometric humanist grotesque headline hero decorative large-text attention english western european extended-latin european vietnamese,400,,latin | latin-ext | math | symbols | vietnamese,Octavio Pardo,1685,1472,No,2024-01-30,2025-05-30,https://fonts.google.com/specimen/Protest+Guerrilla
+Protest Revolution,Display,Sans Serif,Display,bold decorative headline attention-grabbing creative expressive geometric humanist grotesque headline hero decorative large-text attention english western european extended-latin european vietnamese,400,,latin | latin-ext | math | symbols | vietnamese,Octavio Pardo,641,1733,No,2024-01-30,2025-05-30,https://fonts.google.com/specimen/Protest+Revolution
+Protest Riot,Display,Sans Serif,Display,bold decorative headline attention-grabbing creative expressive geometric humanist grotesque headline hero decorative large-text attention english western european extended-latin european vietnamese,400,,latin | latin-ext | math | symbols | vietnamese,Octavio Pardo,1194,1863,No,2024-01-30,2025-05-30,https://fonts.google.com/specimen/Protest+Riot
+Protest Strike,Display,Sans Serif,Display,bold decorative headline attention-grabbing creative expressive geometric humanist grotesque headline hero decorative large-text attention english western european extended-latin european vietnamese,400,,latin | latin-ext | math | symbols | vietnamese,Octavio Pardo,1111,1811,No,2024-01-30,2025-05-30,https://fonts.google.com/specimen/Protest+Strike
+Proza Libre,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque italic english western european extended-latin european,400 | 400i | 500 | 500i | 600 | 600i | 700 | 700i | 800 | 800i,,latin | latin-ext,Jasper de Waard,586,1963,No,2016-06-15,2025-05-30,https://fonts.google.com/specimen/Proza+Libre
+Public Sans,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque versatile multi-weight flexible italic variable variable-font responsive variable-weight english western european extended-latin european vietnamese popular widely-used,100 | 100i | 200 | 200i | 300 | 300i | 400 | 400i | 500 | 500i | 600 | 600i | 700 | 700i | 800 | 800i | 900 | 900i,wght: -,latin | latin-ext | vietnamese,USWDS | Dan Williams | Pablo Impallari | Rodrigo Fuenzalida,85,729,No,2019-06-07,2025-09-16,https://fonts.google.com/specimen/Public+Sans
+Puppies Play,Handwriting,,Display | Handwriting,personal casual friendly warm handwritten script organic  headline hero decorative large-text attention script cursive hand-drawn artistic informal english western european extended-latin european vietnamese,400,,latin | latin-ext | vietnamese,Robert Leuschke,1791,2001,No,2021-10-12,2025-09-11,https://fonts.google.com/specimen/Puppies+Play
+Puritan,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque italic english western european,400 | 400i | 700 | 700i,,latin,Ben Weiner,1029,2037,No,2010-11-30,2025-09-10,https://fonts.google.com/specimen/Puritan
+Purple Purse,Display,Serif,Display,bold decorative headline attention-grabbing creative expressive transitional oldstyle didone headline hero decorative large-text attention english western european extended-latin european,400,,latin | latin-ext,Astigmatic,1647,1765,No,2012-11-16,2025-09-10,https://fonts.google.com/specimen/Purple+Purse
+Qahiri,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque arabic RTL middle-east english western european,400,,arabic | latin,Khaled Hosny,860,284,No,2021-04-03,2025-09-10,https://fonts.google.com/specimen/Qahiri
+Quando,Serif,Serif,Display,elegant traditional classic refined literary editorial transitional oldstyle didone headline hero decorative large-text attention english western european extended-latin european,400,,latin | latin-ext,Joana Correia,838,1467,No,2012-07-10,2025-09-11,https://fonts.google.com/specimen/Quando
+Quantico,Sans Serif,Sans Serif,Display,clean modern minimal professional readable neutral geometric humanist grotesque headline hero decorative large-text attention italic english western european,400 | 400i | 700 | 700i,,latin,MADType,380,1144,No,2011-12-19,2025-09-16,https://fonts.google.com/specimen/Quantico
+Quattrocento,Serif,Serif,Display,elegant traditional classic refined literary editorial transitional oldstyle didone headline hero decorative large-text attention english western european extended-latin european,400 | 700,,latin | latin-ext,Impallari Type,311,1746,No,2012-03-20,2025-09-04,https://fonts.google.com/specimen/Quattrocento
+Quattrocento Sans,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque italic english western european extended-latin european,400 | 400i | 700 | 700i,,latin | latin-ext,Impallari Type,346,2071,No,2012-02-15,2025-09-08,https://fonts.google.com/specimen/Quattrocento+Sans
+Questrial,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque english western european extended-latin european vietnamese well-known common,400,,latin | latin-ext | vietnamese,Joe Prince | Laura Meseguer,159,1483,No,2011-08-10,2025-09-11,https://fonts.google.com/specimen/Questrial
+Quicksand,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque variable variable-font responsive variable-weight english western european extended-latin european vietnamese top-popular trending most-used,300 | 400 | 500 | 600 | 700,wght: -,latin | latin-ext | vietnamese,Andrew Paglinawan,37,598,No,2011-10-19,2025-09-02,https://fonts.google.com/specimen/Quicksand
+Quintessential,Handwriting,Serif,Display,personal casual friendly warm handwritten script organic transitional oldstyle didone headline hero decorative large-text attention english western european extended-latin european,400,,latin | latin-ext,Astigmatic,828,1754,No,2012-11-02,2025-09-11,https://fonts.google.com/specimen/Quintessential
+Qwigley,Handwriting,,Display | Handwriting,personal casual friendly warm handwritten script organic  headline hero decorative large-text attention script cursive hand-drawn artistic informal english western european extended-latin european vietnamese,400,,latin | latin-ext | vietnamese,Robert Leuschke,779,251,No,2011-12-19,2025-09-11,https://fonts.google.com/specimen/Qwigley
+Qwitcher Grypen,Handwriting,,Handwriting | Display,personal casual friendly warm handwritten script organic  script cursive hand-drawn artistic informal headline hero decorative large-text attention english western european extended-latin european vietnamese,400 | 700,,latin | latin-ext | vietnamese,Robert Leuschke,824,2152,No,2021-11-26,2025-09-08,https://fonts.google.com/specimen/Qwitcher+Grypen
+REM,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque versatile multi-weight flexible italic variable variable-font responsive variable-weight english western european extended-latin european vietnamese,100 | 100i | 200 | 200i | 300 | 300i | 400 | 400i | 500 | 500i | 600 | 600i | 700 | 700i | 800 | 800i | 900 | 900i,wght: -,latin | latin-ext | vietnamese,Octavio Pardo,611,98,No,2023-07-20,2025-09-16,https://fonts.google.com/specimen/REM
+Racing Sans One,Display,Sans Serif,Display,bold decorative headline attention-grabbing creative expressive geometric humanist grotesque headline hero decorative large-text attention english western european extended-latin european,400,,latin | latin-ext,Impallari Type,508,1927,No,2012-08-13,2025-09-16,https://fonts.google.com/specimen/Racing+Sans+One
+Radio Canada,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque italic variable variable-font responsive variable-weight variable-width english western european extended-latin european vietnamese,300 | 300i | 400 | 400i | 500 | 500i | 600 | 600i | 700 | 700i,wdth: - | wght: -,canadian-aboriginal | latin | latin-ext | vietnamese,Charles Daoud | Coppers and Brasses | Alexandre Saumier Demers | Jacques Le Bailly,338,2198,No,2022-04-25,2025-09-04,https://fonts.google.com/specimen/Radio+Canada
+Radio Canada Big,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque italic variable variable-font responsive variable-weight english western european extended-latin european,400 | 400i | 500 | 500i | 600 | 600i | 700 | 700i,wght: -,latin | latin-ext,Étienne Aubert Bonn,790,2221,No,2024-05-01,2025-09-16,https://fonts.google.com/specimen/Radio+Canada+Big
+Radley,Serif,Serif,Display,elegant traditional classic refined literary editorial transitional oldstyle didone headline hero decorative large-text attention italic english western european extended-latin european,400 | 400i,,latin | latin-ext,Vernon Adams,554,365,No,2011-12-13,2025-09-10,https://fonts.google.com/specimen/Radley
+Rajdhani,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque hindi devanagari indian english western european extended-latin european popular widely-used,300 | 400 | 500 | 600 | 700,,devanagari | latin | latin-ext,Indian Type Foundry,128,558,No,2014-07-09,2025-09-16,https://fonts.google.com/specimen/Rajdhani
+Rakkas,Display,Serif,Display,bold decorative headline attention-grabbing creative expressive transitional oldstyle didone headline hero decorative large-text attention arabic RTL middle-east english western european extended-latin european,400,,arabic | latin | latin-ext,Zeynep Akay,537,385,No,2016-06-15,2025-09-10,https://fonts.google.com/specimen/Rakkas
+Raleway,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque versatile multi-weight flexible italic variable variable-font responsive variable-weight russian cyrillic slavic cyrillic extended english western european extended-latin european vietnamese top-popular trending most-used,100 | 100i | 200 | 200i | 300 | 300i | 400 | 400i | 500 | 500i | 600 | 600i | 700 | 700i | 800 | 800i | 900 | 900i,wght: -,cyrillic | cyrillic-ext | latin | latin-ext | vietnamese,Matt McInerney | Pablo Impallari | Rodrigo Fuenzalida,22,1408,No,2012-09-07,2025-09-10,https://fonts.google.com/specimen/Raleway
+Raleway Dots,Display,Sans Serif,Display,bold decorative headline attention-grabbing creative expressive geometric humanist grotesque headline hero decorative large-text attention english western european extended-latin european,400,,latin | latin-ext,Matt McInerney | Pablo Impallari | Rodrigo Fuenzalida | Brenda Gallo,1086,1922,No,2012-09-07,2025-09-11,https://fonts.google.com/specimen/Raleway+Dots
+Ramabhadra,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque english western european telugu indian popular widely-used,400,,latin | telugu,Purushoth Kumar Guttula,100,973,No,2014-12-10,2025-09-16,https://fonts.google.com/specimen/Ramabhadra
+Ramaraja,Serif,Serif,,elegant traditional classic refined literary editorial transitional oldstyle didone english western european telugu indian,400,,latin | telugu,Appaji Ambarisha Darbha,1367,766,No,2015-01-08,2025-09-10,https://fonts.google.com/specimen/Ramaraja
+Rambla,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque italic english western european extended-latin european,400 | 400i | 700 | 700i,,latin | latin-ext,Martin Sommaruga,856,1333,No,2012-10-31,2025-09-10,https://fonts.google.com/specimen/Rambla
+Rammetto One,Display,Sans Serif,Display,bold decorative headline attention-grabbing creative expressive geometric humanist grotesque headline hero decorative large-text attention english western european extended-latin european,400,,latin | latin-ext,Vernon Adams,312,1285,No,2011-11-02,2025-09-16,https://fonts.google.com/specimen/Rammetto+One
+Rampart One,Display,Sans Serif,Display,bold decorative headline attention-grabbing creative expressive geometric humanist grotesque headline hero decorative large-text attention russian cyrillic slavic japanese kanji hiragana katakana english western european extended-latin european,400,,cyrillic | japanese | latin | latin-ext,Fontworks Inc.,723,852,No,2021-06-08,2025-09-04,https://fonts.google.com/specimen/Rampart+One
+Ramsina,Serif,Serif,,elegant traditional classic refined literary editorial transitional oldstyle didone english western european,400,,latin | syriac,SIL International,1875,2257,No,2026-02-12,2026-02-17,https://fonts.google.com/specimen/Ramsina
+Ranchers,Display,Sans Serif,Display,bold decorative headline attention-grabbing creative expressive geometric humanist grotesque headline hero decorative large-text attention english western european extended-latin european,400,,latin | latin-ext,Impallari Type,1310,1887,No,2012-09-07,2025-09-11,https://fonts.google.com/specimen/Ranchers
+Rancho,Handwriting,,Display | Handwriting,personal casual friendly warm handwritten script organic  headline hero decorative large-text attention script cursive hand-drawn artistic informal english western european,400,,latin,Sideshow,655,1395,No,2011-10-12,2025-06-02,https://fonts.google.com/specimen/Rancho
+Ranga,Display,,Display | Handwriting,bold decorative headline attention-grabbing creative expressive  headline hero decorative large-text attention script cursive hand-drawn artistic informal hindi devanagari indian english western european extended-latin european,400 | 700,,devanagari | latin | latin-ext,TipTopTyp,1539,451,No,2015-01-28,2025-04-23,https://fonts.google.com/specimen/Ranga
+Rasa,Serif,Serif,Display,elegant traditional classic refined literary editorial transitional oldstyle didone headline hero decorative large-text attention italic variable variable-font responsive variable-weight gujarati indian english western european extended-latin european vietnamese,300 | 300i | 400 | 400i | 500 | 500i | 600 | 600i | 700 | 700i,wght: -,gujarati | latin | latin-ext | vietnamese,Rosetta | Anna Giedryś | David Březina,877,1603,No,2016-06-15,2025-09-04,https://fonts.google.com/specimen/Rasa
+Rationale,Sans Serif,Sans Serif,Display,clean modern minimal professional readable neutral geometric humanist grotesque headline hero decorative large-text attention english western european,400,,latin,Cyreal,1256,1853,No,2011-08-03,2025-09-11,https://fonts.google.com/specimen/Rationale
+Ravi Prakash,Display,,Display,bold decorative headline attention-grabbing creative expressive  headline hero decorative large-text attention english western european telugu indian,400,,latin | telugu,Appaji Ambarisha Darbha,1452,119,No,2015-01-12,2025-09-16,https://fonts.google.com/specimen/Ravi+Prakash
+Readex Pro,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque versatile multi-weight flexible variable variable-font responsive variable-weight arabic RTL middle-east english western european extended-latin european vietnamese well-known common,200 | 300 | 400 | 500 | 600 | 700,HEXP: - | wght: -,arabic | latin | latin-ext | vietnamese,Thomas Jockin | Nadine Chahine | Bonnie Shaver-Troup | Santiago Orozco | Héctor Gómez,268,961,No,2021-09-16,2025-09-10,https://fonts.google.com/specimen/Readex+Pro
+Recursive,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque versatile multi-weight flexible variable variable-font responsive variable-weight variable-slant cyrillic extended english western european extended-latin european vietnamese,1000 | 300 | 400 | 500 | 600 | 700 | 800 | 900,CASL: - | CRSV: - | MONO: - | slnt: - | wght: -,cyrillic-ext | latin | latin-ext | vietnamese,Arrow Type | Stephen Nixon,807,1830,No,2019-06-28,2025-09-04,https://fonts.google.com/specimen/Recursive
+Red Hat Display,Sans Serif,Sans Serif,Display,clean modern minimal professional readable neutral geometric humanist grotesque headline hero decorative large-text attention versatile multi-weight flexible italic variable variable-font responsive variable-weight english western european extended-latin european popular widely-used,300 | 300i | 400 | 400i | 500 | 500i | 600 | 600i | 700 | 700i | 800 | 800i | 900 | 900i,wght: -,latin | latin-ext,MCKL,109,391,No,2019-04-09,2025-09-10,https://fonts.google.com/specimen/Red+Hat+Display
+Red Hat Mono,Monospace,Sans Serif,Monospace,code developer technical fixed-width terminal programming geometric humanist grotesque mono fixed-width tabular data code italic variable variable-font responsive variable-weight english western european extended-latin european,300 | 300i | 400 | 400i | 500 | 500i | 600 | 600i | 700 | 700i,wght: -,latin | latin-ext,MCKL,897,664,No,2021-06-10,2025-09-10,https://fonts.google.com/specimen/Red+Hat+Mono
+Red Hat Text,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque italic variable variable-font responsive variable-weight english western european extended-latin european well-known common,300 | 300i | 400 | 400i | 500 | 500i | 600 | 600i | 700 | 700i,wght: -,latin | latin-ext,MCKL,252,548,No,2019-04-09,2025-09-04,https://fonts.google.com/specimen/Red+Hat+Text
+Red Rose,Display,Serif,Display,bold decorative headline attention-grabbing creative expressive transitional oldstyle didone headline hero decorative large-text attention variable variable-font responsive variable-weight english western european extended-latin european vietnamese,300 | 400 | 500 | 600 | 700,wght: -,latin | latin-ext | vietnamese,Jaikishan Patel,547,2270,No,2020-07-02,2025-09-16,https://fonts.google.com/specimen/Red+Rose
+Redacted,Display,,Symbols | Display,bold decorative headline attention-grabbing creative expressive  icon symbol emoji pictograph headline hero decorative large-text attention english western european extended-latin european,400,,latin | latin-ext,Christian Naths,1247,763,No,2013-09-18,2025-09-17,https://fonts.google.com/specimen/Redacted
+Redacted Script,Display,,Symbols | Handwriting,bold decorative headline attention-grabbing creative expressive  icon symbol emoji pictograph script cursive hand-drawn artistic informal english western european extended-latin european,300 | 400 | 700,,latin | latin-ext,Christian Naths,1684,1771,No,2013-09-18,2025-09-17,https://fonts.google.com/specimen/Redacted+Script
+Reddit Mono,Monospace,Sans Serif,Monospace,code developer technical fixed-width terminal programming geometric humanist grotesque mono fixed-width tabular data code versatile multi-weight flexible variable variable-font responsive variable-weight english western european extended-latin european vietnamese,200 | 300 | 400 | 500 | 600 | 700 | 800 | 900,wght: -,latin | latin-ext | vietnamese,Stephen Hutchings | OrangeRed,1489,1382,No,2024-03-20,2025-09-04,https://fonts.google.com/specimen/Reddit+Mono
+Reddit Sans,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque versatile multi-weight flexible italic variable variable-font responsive variable-weight english western european extended-latin european vietnamese,200 | 200i | 300 | 300i | 400 | 400i | 500 | 500i | 600 | 600i | 700 | 700i | 800 | 800i | 900 | 900i,wght: -,latin | latin-ext | vietnamese,Stephen Hutchings | OrangeRed,477,527,No,2023-10-10,2025-09-16,https://fonts.google.com/specimen/Reddit+Sans
+Reddit Sans Condensed,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque versatile multi-weight flexible variable variable-font responsive variable-weight english western european extended-latin european vietnamese,200 | 300 | 400 | 500 | 600 | 700 | 800 | 900,wght: -,latin | latin-ext | vietnamese,Stephen Hutchings | OrangeRed,822,83,No,2024-02-21,2025-09-16,https://fonts.google.com/specimen/Reddit+Sans+Condensed
+Redressed,Handwriting,,Handwriting | Display,personal casual friendly warm handwritten script organic  script cursive hand-drawn artistic informal headline hero decorative large-text attention english western european extended-latin european,400,,latin | latin-ext,Astigmatic,1014,1648,No,2011-06-21,2025-09-08,https://fonts.google.com/specimen/Redressed
+Reem Kufi,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque variable variable-font responsive variable-weight arabic RTL middle-east english western european extended-latin european vietnamese,400 | 500 | 600 | 700,wght: -,arabic | latin | latin-ext | vietnamese,Khaled Hosny | Santiago Orozco,356,65,No,2016-05-31,2025-09-04,https://fonts.google.com/specimen/Reem+Kufi
+Reem Kufi Fun,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque variable variable-font responsive variable-weight arabic RTL middle-east english western european extended-latin european vietnamese,400 | 500 | 600 | 700,wght: -,arabic | latin | latin-ext | vietnamese,Khaled Hosny | Santiago Orozco,1491,1618,No,2021-11-01,2025-09-02,https://fonts.google.com/specimen/Reem+Kufi+Fun
+Reem Kufi Ink,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque arabic RTL middle-east english western european extended-latin european vietnamese,400,,arabic | latin | latin-ext | vietnamese,Khaled Hosny | Santiago Orozco,1512,1203,No,2021-11-01,2025-06-25,https://fonts.google.com/specimen/Reem+Kufi+Ink
+Reenie Beanie,Handwriting,,Handwriting | Display,personal casual friendly warm handwritten script organic  script cursive hand-drawn artistic informal headline hero decorative large-text attention english western european,400,,latin,James Grieshaber,389,748,No,2010-05-10,2025-09-08,https://fonts.google.com/specimen/Reenie+Beanie
+Reggae One,Display,,Display,bold decorative headline attention-grabbing creative expressive  headline hero decorative large-text attention russian cyrillic slavic japanese kanji hiragana katakana english western european extended-latin european,400,,cyrillic | japanese | latin | latin-ext,Fontworks Inc.,1102,2074,No,2020-12-15,2025-09-10,https://fonts.google.com/specimen/Reggae+One
+Rethink Sans,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque italic variable variable-font responsive variable-weight english western european extended-latin european well-known common,400 | 400i | 500 | 500i | 600 | 600i | 700 | 700i | 800 | 800i,wght: -,latin | latin-ext,Hans Thiessen,250,1205,No,2023-09-05,2025-09-04,https://fonts.google.com/specimen/Rethink+Sans
+Revalia,Display,Sans Serif,Display,bold decorative headline attention-grabbing creative expressive geometric humanist grotesque headline hero decorative large-text attention english western european extended-latin european,400,,latin | latin-ext,Johan Kallas | Mihkel Virkus,1545,216,No,2012-03-14,2025-09-08,https://fonts.google.com/specimen/Revalia
+Rhodium Libre,Serif,Serif,Display,elegant traditional classic refined literary editorial transitional oldstyle didone headline hero decorative large-text attention hindi devanagari indian english western european extended-latin european,400,,devanagari | latin | latin-ext,James Puckett,1339,2283,No,2015-06-03,2025-09-02,https://fonts.google.com/specimen/Rhodium+Libre
+Ribeye,Display,Serif,Display,bold decorative headline attention-grabbing creative expressive transitional oldstyle didone headline hero decorative large-text attention english western european extended-latin european,400,,latin | latin-ext,Astigmatic,1059,1879,No,2011-11-23,2025-09-10,https://fonts.google.com/specimen/Ribeye
+Ribeye Marrow,Display,Serif,Display,bold decorative headline attention-grabbing creative expressive transitional oldstyle didone headline hero decorative large-text attention english western european extended-latin european,400,,latin | latin-ext,Astigmatic,1527,2132,No,2011-11-23,2025-09-08,https://fonts.google.com/specimen/Ribeye+Marrow
+Righteous,Display,Sans Serif,Display,bold decorative headline attention-grabbing creative expressive geometric humanist grotesque headline hero decorative large-text attention english western european extended-latin european well-known common,400,,latin | latin-ext,Astigmatic,243,646,No,2011-11-23,2025-06-02,https://fonts.google.com/specimen/Righteous
+Risque,Display,Serif,Display,bold decorative headline attention-grabbing creative expressive transitional oldstyle didone headline hero decorative large-text attention english western european extended-latin european,400,,latin | latin-ext,Astigmatic,1476,1894,No,2012-11-11,2025-09-08,https://fonts.google.com/specimen/Risque
+Road Rage,Display,Sans Serif,Display,bold decorative headline attention-grabbing creative expressive geometric humanist grotesque headline hero decorative large-text attention english western european extended-latin european vietnamese,400,,latin | latin-ext | vietnamese,Robert Leuschke,1057,386,No,2021-10-21,2025-09-04,https://fonts.google.com/specimen/Road+Rage
+Roboto,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque versatile multi-weight flexible italic variable variable-font responsive variable-weight variable-width russian cyrillic slavic cyrillic extended greek greek extended english western european extended-latin european vietnamese multilingual international top-popular trending most-used,100 | 100i | 200 | 200i | 300 | 300i | 400 | 400i | 500 | 500i | 600 | 600i | 700 | 700i | 800 | 800i | 900 | 900i,wdth: - | wght: -,cyrillic | cyrillic-ext | greek | greek-ext | latin | latin-ext | math | symbols | vietnamese,Christian Robertson | ParaType | Font Bureau,2,1399,No,2013-01-08,2026-02-19,https://fonts.google.com/specimen/Roboto
+Roboto Condensed,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque versatile multi-weight flexible italic variable variable-font responsive variable-weight russian cyrillic slavic cyrillic extended greek greek extended english western european extended-latin european vietnamese multilingual international top-popular trending most-used,100 | 100i | 200 | 200i | 300 | 300i | 400 | 400i | 500 | 500i | 600 | 600i | 700 | 700i | 800 | 800i | 900 | 900i,wght: -,cyrillic | cyrillic-ext | greek | greek-ext | latin | latin-ext | vietnamese,Christian Robertson,15,911,No,2012-06-26,2025-09-11,https://fonts.google.com/specimen/Roboto+Condensed
+Roboto Flex,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque versatile multi-weight flexible variable variable-font responsive variable-weight variable-width variable-slant russian cyrillic slavic cyrillic extended greek english western european extended-latin european vietnamese multilingual international popular widely-used,100 | 1000 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900,GRAD: - | XOPQ: - | XTRA: - | YOPQ: - | YTAS: - | YTDE: - | YTFI: - | YTLC: - | YTUC: - | opsz: - | slnt: - | wdth: - | wght: -,cyrillic | cyrillic-ext | greek | latin | latin-ext | vietnamese,Font Bureau | David Berlow | Santiago Orozco | Irene Vlachou | Ilya Ruderman | Yury Ostromentsky | Mikhail Strukov,94,1460,No,2022-05-02,2025-09-04,https://fonts.google.com/specimen/Roboto+Flex
+Roboto Mono,Monospace,,Monospace,code developer technical fixed-width terminal programming  mono fixed-width tabular data code versatile multi-weight flexible italic variable variable-font responsive variable-weight russian cyrillic slavic cyrillic extended greek english western european extended-latin european vietnamese multilingual international top-popular trending most-used,100 | 100i | 200 | 200i | 300 | 300i | 400 | 400i | 500 | 500i | 600 | 600i | 700 | 700i,wght: -,cyrillic | cyrillic-ext | greek | latin | latin-ext | vietnamese,Christian Robertson,16,842,No,2025-05-12,2025-09-11,https://fonts.google.com/specimen/Roboto+Mono
+Roboto Serif,Serif,Serif,,elegant traditional classic refined literary editorial transitional oldstyle didone versatile multi-weight flexible italic variable variable-font responsive variable-weight variable-width russian cyrillic slavic cyrillic extended english western european extended-latin european vietnamese well-known common,100 | 100i | 200 | 200i | 300 | 300i | 400 | 400i | 500 | 500i | 600 | 600i | 700 | 700i | 800 | 800i | 900 | 900i,GRAD: - | opsz: - | wdth: - | wght: -,cyrillic | cyrillic-ext | latin | latin-ext | vietnamese,Commercial Type | Greg Gazdowicz,203,388,No,2022-02-10,2025-09-10,https://fonts.google.com/specimen/Roboto+Serif
+Roboto Slab,Serif,Slab Serif,,elegant traditional classic refined literary editorial slab mechanical sturdy strong versatile multi-weight flexible variable variable-font responsive variable-weight russian cyrillic slavic cyrillic extended greek greek extended english western european extended-latin european vietnamese multilingual international top-popular trending most-used,100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900,wght: -,cyrillic | cyrillic-ext | greek | greek-ext | latin | latin-ext | vietnamese,Christian Robertson,29,1279,No,2013-04-10,2025-09-08,https://fonts.google.com/specimen/Roboto+Slab
+Rochester,Handwriting,,Handwriting | Display,personal casual friendly warm handwritten script organic  script cursive hand-drawn artistic informal headline hero decorative large-text attention english western european,400,,latin,Sideshow,797,2304,No,2011-08-03,2025-09-08,https://fonts.google.com/specimen/Rochester
+Rock 3D,Display,,Display,bold decorative headline attention-grabbing creative expressive  headline hero decorative large-text attention japanese kanji hiragana katakana english western european,400,,japanese | latin,Shibuya Font,1746,2108,No,2020-12-14,2025-09-02,https://fonts.google.com/specimen/Rock+3D
+Rock Salt,Handwriting,,Handwriting | Display,personal casual friendly warm handwritten script organic  script cursive hand-drawn artistic informal headline hero decorative large-text attention english western european,400,,latin,Sideshow,369,2063,No,2011-01-06,2025-09-08,https://fonts.google.com/specimen/Rock+Salt
+RocknRoll One,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque japanese kanji hiragana katakana english western european extended-latin european,400,,japanese | latin | latin-ext,Fontworks Inc.,665,461,No,2020-12-15,2025-09-10,https://fonts.google.com/specimen/RocknRoll+One
+Rokkitt,Serif,Slab Serif,,elegant traditional classic refined literary editorial slab mechanical sturdy strong versatile multi-weight flexible italic variable variable-font responsive variable-weight english western european extended-latin european vietnamese well-known common,100 | 100i | 200 | 200i | 300 | 300i | 400 | 400i | 500 | 500i | 600 | 600i | 700 | 700i | 800 | 800i | 900 | 900i,wght: -,latin | latin-ext | vietnamese,Vernon Adams,283,810,No,2011-07-27,2025-09-11,https://fonts.google.com/specimen/Rokkitt
+Romanesco,Handwriting,,Handwriting,personal casual friendly warm handwritten script organic  script cursive hand-drawn artistic informal english western european extended-latin european,400,,latin | latin-ext,Astigmatic,1424,2031,No,2012-08-13,2025-09-16,https://fonts.google.com/specimen/Romanesco
+Ropa Sans,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque italic english western european extended-latin european,400 | 400i,,latin | latin-ext,Botjo Nikoltchev,373,1306,No,2012-01-25,2025-09-04,https://fonts.google.com/specimen/Ropa+Sans
+Rosario,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque italic variable variable-font responsive variable-weight english western european extended-latin european vietnamese,300 | 300i | 400 | 400i | 500 | 500i | 600 | 600i | 700 | 700i,wght: -,latin | latin-ext | vietnamese,Omnibus-Type,732,1272,No,2011-09-07,2025-09-11,https://fonts.google.com/specimen/Rosario
+Rosarivo,Serif,Serif,Handwriting,elegant traditional classic refined literary editorial transitional oldstyle didone script cursive hand-drawn artistic informal italic english western european extended-latin european,400 | 400i,,latin | latin-ext,Pablo Ugerman,1139,2073,No,2012-03-29,2025-09-11,https://fonts.google.com/specimen/Rosarivo
+Rouge Script,Handwriting,,Display | Handwriting,personal casual friendly warm handwritten script organic  headline hero decorative large-text attention script cursive hand-drawn artistic informal english western european,400,,latin,Sabrina Mariela Lopez,898,1884,No,2012-01-11,2025-09-16,https://fonts.google.com/specimen/Rouge+Script
+Rowdies,Display,Sans Serif,Display,bold decorative headline attention-grabbing creative expressive geometric humanist grotesque headline hero decorative large-text attention english western european extended-latin european vietnamese well-known common,300 | 400 | 700,,latin | latin-ext | vietnamese,Jaikishan Patel,199,816,No,2019-10-10,2025-09-04,https://fonts.google.com/specimen/Rowdies
+Rozha One,Serif,Serif,Display,elegant traditional classic refined literary editorial transitional oldstyle didone headline hero decorative large-text attention hindi devanagari indian english western european extended-latin european,400,,devanagari | latin | latin-ext,Indian Type Foundry,606,1808,No,2014-08-13,2025-09-16,https://fonts.google.com/specimen/Rozha+One
+Rubik,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque versatile multi-weight flexible italic variable variable-font responsive variable-weight arabic RTL middle-east russian cyrillic slavic cyrillic extended hebrew RTL israeli english western european extended-latin european multilingual international top-popular trending most-used,300 | 300i | 400 | 400i | 500 | 500i | 600 | 600i | 700 | 700i | 800 | 800i | 900 | 900i,wght: -,arabic | cyrillic | cyrillic-ext | hebrew | latin | latin-ext,Hubert and Fischer | Meir Sadan | Cyreal | Daniel Grumer | Omaima Dajani,27,1283,No,2015-07-22,2025-09-10,https://fonts.google.com/specimen/Rubik
+Rubik 80s Fade,Display,,Display,bold decorative headline attention-grabbing creative expressive  headline hero decorative large-text attention russian cyrillic slavic cyrillic extended hebrew RTL israeli english western european extended-latin european,400,,cyrillic | cyrillic-ext | hebrew | latin | latin-ext,NaN | Luke Prowse,1680,121,No,2022-11-24,2025-05-30,https://fonts.google.com/specimen/Rubik+80s+Fade
+Rubik Beastly,Display,,Display,bold decorative headline attention-grabbing creative expressive  headline hero decorative large-text attention russian cyrillic slavic cyrillic extended hebrew RTL israeli english western european extended-latin european,400,,cyrillic | cyrillic-ext | hebrew | latin | latin-ext,NaN | Luke Prowse,1669,884,No,2021-09-02,2025-09-04,https://fonts.google.com/specimen/Rubik+Beastly
+Rubik Broken Fax,Display,,Display,bold decorative headline attention-grabbing creative expressive  headline hero decorative large-text attention russian cyrillic slavic cyrillic extended hebrew RTL israeli english western european extended-latin european multilingual international,400,,cyrillic | cyrillic-ext | hebrew | latin | latin-ext | math | symbols,NaN | Luke Prowse,1784,665,No,2023-12-13,2025-05-30,https://fonts.google.com/specimen/Rubik+Broken+Fax
+Rubik Bubbles,Display,,Display,bold decorative headline attention-grabbing creative expressive  headline hero decorative large-text attention russian cyrillic slavic cyrillic extended hebrew RTL israeli english western european extended-latin european,400,,cyrillic | cyrillic-ext | hebrew | latin | latin-ext,NaN | Luke Prowse,858,245,No,2022-02-17,2025-05-30,https://fonts.google.com/specimen/Rubik+Bubbles
+Rubik Burned,Display,,Display,bold decorative headline attention-grabbing creative expressive  headline hero decorative large-text attention russian cyrillic slavic cyrillic extended hebrew RTL israeli english western european extended-latin european,400,,cyrillic | cyrillic-ext | hebrew | latin | latin-ext,NaN | Luke Prowse,1640,267,No,2022-06-15,2025-05-30,https://fonts.google.com/specimen/Rubik+Burned
+Rubik Dirt,Display,,Display,bold decorative headline attention-grabbing creative expressive  headline hero decorative large-text attention russian cyrillic slavic cyrillic extended hebrew RTL israeli english western european extended-latin european,400,,cyrillic | cyrillic-ext | hebrew | latin | latin-ext,NaN | Luke Prowse,931,730,No,2022-06-15,2025-05-30,https://fonts.google.com/specimen/Rubik+Dirt
+Rubik Distressed,Display,,Display,bold decorative headline attention-grabbing creative expressive  headline hero decorative large-text attention russian cyrillic slavic cyrillic extended hebrew RTL israeli english western european extended-latin european,400,,cyrillic | cyrillic-ext | hebrew | latin | latin-ext,NaN | Luke Prowse,1538,2168,No,2022-06-15,2025-05-30,https://fonts.google.com/specimen/Rubik+Distressed
+Rubik Doodle Shadow,Display,,Display,bold decorative headline attention-grabbing creative expressive  headline hero decorative large-text attention russian cyrillic slavic cyrillic extended hebrew RTL israeli english western european extended-latin european multilingual international,400,,cyrillic | cyrillic-ext | hebrew | latin | latin-ext | math | symbols,NaN | Luke Prowse,1227,588,No,2023-12-13,2025-05-30,https://fonts.google.com/specimen/Rubik+Doodle+Shadow
+Rubik Doodle Triangles,Display,,Display,bold decorative headline attention-grabbing creative expressive  headline hero decorative large-text attention russian cyrillic slavic cyrillic extended hebrew RTL israeli english western european extended-latin european multilingual international,400,,cyrillic | cyrillic-ext | hebrew | latin | latin-ext | math | symbols,NaN | Luke Prowse,1794,501,No,2023-12-13,2025-05-30,https://fonts.google.com/specimen/Rubik+Doodle+Triangles
+Rubik Gemstones,Display,,Display,bold decorative headline attention-grabbing creative expressive  headline hero decorative large-text attention russian cyrillic slavic cyrillic extended hebrew RTL israeli english western european extended-latin european,400,,cyrillic | cyrillic-ext | hebrew | latin | latin-ext,NaN | Luke Prowse,1622,2184,No,2022-11-24,2025-05-30,https://fonts.google.com/specimen/Rubik+Gemstones
+Rubik Glitch,Display,,Display,bold decorative headline attention-grabbing creative expressive  headline hero decorative large-text attention russian cyrillic slavic cyrillic extended hebrew RTL israeli english western european extended-latin european,400,,cyrillic | cyrillic-ext | hebrew | latin | latin-ext,NaN | Luke Prowse,1080,2072,No,2022-02-17,2025-05-30,https://fonts.google.com/specimen/Rubik+Glitch
+Rubik Glitch Pop,Display,,Display,bold decorative headline attention-grabbing creative expressive  headline hero decorative large-text attention russian cyrillic slavic cyrillic extended hebrew RTL israeli english western european extended-latin european multilingual international,400,,cyrillic | cyrillic-ext | hebrew | latin | latin-ext | math | symbols,NaN | Luke Prowse,1662,1876,No,2024-01-23,2025-05-30,https://fonts.google.com/specimen/Rubik+Glitch+Pop
+Rubik Iso,Display,,Display,bold decorative headline attention-grabbing creative expressive  headline hero decorative large-text attention russian cyrillic slavic cyrillic extended hebrew RTL israeli english western european extended-latin european,400,,cyrillic | cyrillic-ext | hebrew | latin | latin-ext,NaN | Luke Prowse,1487,435,No,2022-06-15,2025-05-30,https://fonts.google.com/specimen/Rubik+Iso
+Rubik Lines,Display,,Display,bold decorative headline attention-grabbing creative expressive  headline hero decorative large-text attention russian cyrillic slavic cyrillic extended hebrew RTL israeli english western european extended-latin european multilingual international,400,,cyrillic | cyrillic-ext | hebrew | latin | latin-ext | math | symbols,NaN | Luke Prowse,1808,353,No,2023-12-13,2025-05-30,https://fonts.google.com/specimen/Rubik+Lines
+Rubik Maps,Display,,Display,bold decorative headline attention-grabbing creative expressive  headline hero decorative large-text attention russian cyrillic slavic cyrillic extended hebrew RTL israeli english western european extended-latin european multilingual international,400,,cyrillic | cyrillic-ext | hebrew | latin | latin-ext | math | symbols,NaN | Luke Prowse,1799,579,No,2023-12-13,2025-05-30,https://fonts.google.com/specimen/Rubik+Maps
+Rubik Marker Hatch,Display,,Display,bold decorative headline attention-grabbing creative expressive  headline hero decorative large-text attention russian cyrillic slavic cyrillic extended hebrew RTL israeli english western european extended-latin european,400,,cyrillic | cyrillic-ext | hebrew | latin | latin-ext,NaN | Luke Prowse,1767,1337,No,2022-06-15,2025-05-30,https://fonts.google.com/specimen/Rubik+Marker+Hatch
+Rubik Maze,Display,,Display,bold decorative headline attention-grabbing creative expressive  headline hero decorative large-text attention russian cyrillic slavic cyrillic extended hebrew RTL israeli english western european extended-latin european,400,,cyrillic | cyrillic-ext | hebrew | latin | latin-ext,NaN | Luke Prowse,1907,1497,No,2022-06-15,2025-05-30,https://fonts.google.com/specimen/Rubik+Maze
+Rubik Microbe,Display,,Display,bold decorative headline attention-grabbing creative expressive  headline hero decorative large-text attention russian cyrillic slavic cyrillic extended hebrew RTL israeli english western european extended-latin european,400,,cyrillic | cyrillic-ext | hebrew | latin | latin-ext,NaN | Luke Prowse,1752,131,No,2022-02-17,2025-05-30,https://fonts.google.com/specimen/Rubik+Microbe
+Rubik Mono One,Sans Serif,Sans Serif,Monospace,clean modern minimal professional readable neutral geometric humanist grotesque mono fixed-width tabular data code russian cyrillic slavic english western european extended-latin european well-known common,400,,cyrillic | latin | latin-ext,Hubert and Fischer,223,317,No,2014-05-05,2025-09-11,https://fonts.google.com/specimen/Rubik+Mono+One
+Rubik Moonrocks,Display,Sans Serif,Display,bold decorative headline attention-grabbing creative expressive geometric humanist grotesque headline hero decorative large-text attention russian cyrillic slavic cyrillic extended hebrew RTL israeli english western european extended-latin european,400,,cyrillic | cyrillic-ext | hebrew | latin | latin-ext,NaN | Luke Prowse,1442,1739,No,2022-02-17,2025-09-10,https://fonts.google.com/specimen/Rubik+Moonrocks
+Rubik Pixels,Display,,Display,bold decorative headline attention-grabbing creative expressive  headline hero decorative large-text attention russian cyrillic slavic cyrillic extended hebrew RTL israeli english western european extended-latin european,400,,cyrillic | cyrillic-ext | hebrew | latin | latin-ext,NaN | Luke Prowse,1507,31,No,2023-03-31,2025-09-08,https://fonts.google.com/specimen/Rubik+Pixels
+Rubik Puddles,Display,,Display,bold decorative headline attention-grabbing creative expressive  headline hero decorative large-text attention russian cyrillic slavic cyrillic extended hebrew RTL israeli english western european extended-latin european,400,,cyrillic | cyrillic-ext | hebrew | latin | latin-ext,NaN | Luke Prowse,1727,1691,No,2022-02-17,2025-05-30,https://fonts.google.com/specimen/Rubik+Puddles
+Rubik Scribble,Display,,Display,bold decorative headline attention-grabbing creative expressive  headline hero decorative large-text attention russian cyrillic slavic cyrillic extended hebrew RTL israeli english western european extended-latin european multilingual international,400,,cyrillic | cyrillic-ext | hebrew | latin | latin-ext | math | symbols,NaN | Luke Prowse,1363,621,No,2023-12-13,2025-05-30,https://fonts.google.com/specimen/Rubik+Scribble
+Rubik Spray Paint,Display,,Display,bold decorative headline attention-grabbing creative expressive  headline hero decorative large-text attention russian cyrillic slavic cyrillic extended hebrew RTL israeli english western european extended-latin european,400,,cyrillic | cyrillic-ext | hebrew | latin | latin-ext,NaN | Luke Prowse,1655,1346,No,2022-11-24,2025-05-30,https://fonts.google.com/specimen/Rubik+Spray+Paint
+Rubik Storm,Display,,Display,bold decorative headline attention-grabbing creative expressive  headline hero decorative large-text attention russian cyrillic slavic cyrillic extended hebrew RTL israeli english western european extended-latin european,400,,cyrillic | cyrillic-ext | hebrew | latin | latin-ext,NaN | Luke Prowse,1852,2241,No,2022-11-24,2025-05-30,https://fonts.google.com/specimen/Rubik+Storm
+Rubik Vinyl,Display,,Display,bold decorative headline attention-grabbing creative expressive  headline hero decorative large-text attention russian cyrillic slavic cyrillic extended hebrew RTL israeli english western european extended-latin european,400,,cyrillic | cyrillic-ext | hebrew | latin | latin-ext,NaN | Luke Prowse,1613,563,No,2022-11-24,2025-05-30,https://fonts.google.com/specimen/Rubik+Vinyl
+Rubik Wet Paint,Display,,Display,bold decorative headline attention-grabbing creative expressive  headline hero decorative large-text attention russian cyrillic slavic cyrillic extended hebrew RTL israeli english western european extended-latin european,400,,cyrillic | cyrillic-ext | hebrew | latin | latin-ext,NaN | Luke Prowse,1153,74,No,2022-02-17,2025-05-30,https://fonts.google.com/specimen/Rubik+Wet+Paint
+Ruda,Sans Serif,Sans Serif,Display,clean modern minimal professional readable neutral geometric humanist grotesque headline hero decorative large-text attention versatile multi-weight flexible variable variable-font responsive variable-weight russian cyrillic slavic english western european extended-latin european vietnamese,400 | 500 | 600 | 700 | 800 | 900,wght: -,cyrillic | latin | latin-ext | vietnamese,Mariela Monsalve | Angelina Sanchez,457,1521,No,2012-01-11,2025-09-04,https://fonts.google.com/specimen/Ruda
+Rufina,Serif,Serif,Display,elegant traditional classic refined literary editorial transitional oldstyle didone headline hero decorative large-text attention english western european extended-latin european,400 | 700,,latin | latin-ext,Martin Sommaruga,539,968,No,2012-10-31,2025-09-16,https://fonts.google.com/specimen/Rufina
+Ruge Boogie,Handwriting,,Display | Handwriting,personal casual friendly warm handwritten script organic  headline hero decorative large-text attention script cursive hand-drawn artistic informal english western european extended-latin european vietnamese,400,,latin | latin-ext | vietnamese,Robert Leuschke,1732,1591,No,2011-12-19,2025-09-11,https://fonts.google.com/specimen/Ruge+Boogie
+Ruluko,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque english western european extended-latin european,400,,latin | latin-ext,Ana Sanfelippo | Angélica Díaz | Meme Hernández,1417,2258,No,2012-01-11,2025-09-16,https://fonts.google.com/specimen/Ruluko
+Rum Raisin,Sans Serif,Sans Serif,Display,clean modern minimal professional readable neutral geometric humanist grotesque headline hero decorative large-text attention english western european extended-latin european,400,,latin | latin-ext,Astigmatic,1331,1231,No,2012-11-02,2025-09-10,https://fonts.google.com/specimen/Rum+Raisin
+Ruslan Display,Display,Sans Serif,Display,bold decorative headline attention-grabbing creative expressive geometric humanist grotesque headline hero decorative large-text attention russian cyrillic slavic english western european extended-latin european,400,,cyrillic | latin | latin-ext | math | symbols,Oleg Snarsky | Denis Masharov | Vladimir Rabdu,772,906,No,2011-05-18,2025-06-02,https://fonts.google.com/specimen/Ruslan+Display
+Russo One,Sans Serif,Sans Serif,Display,clean modern minimal professional readable neutral geometric humanist grotesque headline hero decorative large-text attention russian cyrillic slavic english western european extended-latin european well-known common,400,,cyrillic | latin | latin-ext,Jovanny Lemonad,237,1284,No,2012-04-04,2025-09-16,https://fonts.google.com/specimen/Russo+One
+Ruthie,Handwriting,,Display | Handwriting,personal casual friendly warm handwritten script organic  headline hero decorative large-text attention script cursive hand-drawn artistic informal english western european extended-latin european vietnamese,400,,latin | latin-ext | vietnamese,Robert Leuschke,1284,679,No,2011-12-19,2025-09-16,https://fonts.google.com/specimen/Ruthie
+Ruwudu,Serif,Serif,,elegant traditional classic refined literary editorial transitional oldstyle didone arabic RTL middle-east english western european extended-latin european,400 | 500 | 600 | 700,,arabic | latin | latin-ext,SIL International,1498,2213,No,2023-08-07,2025-05-30,https://fonts.google.com/specimen/Ruwudu
+Rye,Display,Serif,Display,bold decorative headline attention-grabbing creative expressive transitional oldstyle didone headline hero decorative large-text attention english western european extended-latin european,400,,latin | latin-ext,Nicole Fally,584,2018,No,2012-08-21,2025-09-16,https://fonts.google.com/specimen/Rye
+SN Pro,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque versatile multi-weight flexible italic variable variable-font responsive variable-weight russian cyrillic slavic cyrillic extended english western european extended-latin european vietnamese,200 | 200i | 300 | 300i | 400 | 400i | 500 | 500i | 600 | 600i | 700 | 700i | 800 | 800i | 900 | 900i,wght: -,cyrillic | cyrillic-ext | latin | latin-ext | vietnamese,Tobias Whetton | Supernotes,1448,2296,No,2026-01-27,2026-01-28,https://fonts.google.com/specimen/SN+Pro
+STIX Two Text,Serif,Serif,,elegant traditional classic refined literary editorial transitional oldstyle didone italic variable variable-font responsive variable-weight russian cyrillic slavic cyrillic extended greek english western european extended-latin european vietnamese multilingual international,400 | 400i | 500 | 500i | 600 | 600i | 700 | 700i,wght: -,cyrillic | cyrillic-ext | greek | latin | latin-ext | vietnamese,Tiro Typeworks | Ross Mills | John Hudson | Paul Hanslow,306,841,No,2021-04-15,2025-09-04,https://fonts.google.com/specimen/STIX+Two+Text
+SUSE,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque versatile multi-weight flexible italic variable variable-font responsive variable-weight english western european extended-latin european vietnamese,100 | 100i | 200 | 200i | 300 | 300i | 400 | 400i | 500 | 500i | 600 | 600i | 700 | 700i | 800 | 800i | 900 | 900i,wght: -,latin | latin-ext | vietnamese,René Bieder,686,1417,No,2024-08-13,2025-09-18,https://fonts.google.com/specimen/SUSE
+SUSE Mono,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque versatile multi-weight flexible italic variable variable-font responsive variable-weight english western european extended-latin european vietnamese,100 | 100i | 200 | 200i | 300 | 300i | 400 | 400i | 500 | 500i | 600 | 600i | 700 | 700i | 800 | 800i,wght: -,latin | latin-ext | vietnamese,René Bieder,1801,2085,No,2025-09-17,2025-09-18,https://fonts.google.com/specimen/SUSE+Mono
+Sacramento,Handwriting,,Display | Handwriting,personal casual friendly warm handwritten script organic  headline hero decorative large-text attention script cursive hand-drawn artistic informal english western european extended-latin european well-known common,400,,latin | latin-ext,Astigmatic,278,912,No,2012-11-01,2025-09-11,https://fonts.google.com/specimen/Sacramento
+Sahitya,Serif,Serif,,elegant traditional classic refined literary editorial transitional oldstyle didone hindi devanagari indian english western european,400 | 700,,devanagari | latin,Juan Pablo del Peral,1466,2059,No,2015-06-17,2025-09-04,https://fonts.google.com/specimen/Sahitya
+Sail,Display,,Display,bold decorative headline attention-grabbing creative expressive  headline hero decorative large-text attention english western european extended-latin european,400,,latin | latin-ext,Miguel Hernandez,1180,1145,No,2011-12-19,2025-09-10,https://fonts.google.com/specimen/Sail
+Saira,Sans Serif,Sans Serif,Display,clean modern minimal professional readable neutral geometric humanist grotesque headline hero decorative large-text attention versatile multi-weight flexible italic variable variable-font responsive variable-weight variable-width english western european extended-latin european vietnamese popular widely-used,100 | 100i | 200 | 200i | 300 | 300i | 400 | 400i | 500 | 500i | 600 | 600i | 700 | 700i | 800 | 800i | 900 | 900i,wdth: - | wght: -,latin | latin-ext | vietnamese,Omnibus-Type,56,479,No,2017-07-31,2025-11-18,https://fonts.google.com/specimen/Saira
+Saira Condensed,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque versatile multi-weight flexible english western european extended-latin european vietnamese well-known common,100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900,,latin | latin-ext | vietnamese,Omnibus-Type,196,398,No,2017-07-31,2025-09-11,https://fonts.google.com/specimen/Saira+Condensed
+Saira Extra Condensed,Sans Serif,Sans Serif,Display,clean modern minimal professional readable neutral geometric humanist grotesque headline hero decorative large-text attention versatile multi-weight flexible english western european extended-latin european vietnamese,100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900,,latin | latin-ext | vietnamese,Omnibus-Type,379,223,No,2017-07-31,2025-09-16,https://fonts.google.com/specimen/Saira+Extra+Condensed
+Saira Semi Condensed,Sans Serif,Sans Serif,Display,clean modern minimal professional readable neutral geometric humanist grotesque headline hero decorative large-text attention versatile multi-weight flexible english western european extended-latin european vietnamese,100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900,,latin | latin-ext | vietnamese,Omnibus-Type,419,453,No,2017-07-31,2025-09-16,https://fonts.google.com/specimen/Saira+Semi+Condensed
+Saira Stencil One,Display,Sans Serif,Display,bold decorative headline attention-grabbing creative expressive geometric humanist grotesque headline hero decorative large-text attention english western european extended-latin european vietnamese,400,,latin | latin-ext | vietnamese,Hector Gatti | Omnibus-Type,961,2232,No,2019-06-18,2025-09-10,https://fonts.google.com/specimen/Saira+Stencil+One
+Salsa,Display,Sans Serif,Handwriting,bold decorative headline attention-grabbing creative expressive geometric humanist grotesque script cursive hand-drawn artistic informal english western european,400,,latin,John Vargas Beltrán,982,1207,No,2011-10-12,2025-09-16,https://fonts.google.com/specimen/Salsa
+Sanchez,Serif,Slab Serif,,elegant traditional classic refined literary editorial slab mechanical sturdy strong italic english western european extended-latin european well-known common,400 | 400i,,latin | latin-ext,Daniel Hernandez,211,1902,No,2012-10-31,2025-09-08,https://fonts.google.com/specimen/Sanchez
+Sancreek,Display,Serif,Display,bold decorative headline attention-grabbing creative expressive transitional oldstyle didone headline hero decorative large-text attention english western european extended-latin european,400,,latin | latin-ext,Vernon Adams,1091,2066,No,2011-10-12,2025-09-16,https://fonts.google.com/specimen/Sancreek
+Sankofa Display,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque english western european extended-latin european vietnamese,400,,latin | latin-ext | vietnamese,Batsirai Madzonga,1893,155,No,2024-07-29,2025-05-30,https://fonts.google.com/specimen/Sankofa+Display
+Sansation,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque italic russian cyrillic slavic greek english western european extended-latin european,300 | 300i | 400 | 400i | 700 | 700i,,cyrillic | greek | latin | latin-ext,Bernd Montag,1189,1832,No,2025-04-17,2025-04-23,https://fonts.google.com/specimen/Sansation
+Sansita,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque italic english western european extended-latin european,400 | 400i | 700 | 700i | 800 | 800i | 900 | 900i,,latin | latin-ext,Omnibus-Type,512,1342,No,2016-12-04,2025-09-08,https://fonts.google.com/specimen/Sansita
+Sansita Swashed,Display,,Display,bold decorative headline attention-grabbing creative expressive  headline hero decorative large-text attention versatile multi-weight flexible variable variable-font responsive variable-weight english western european extended-latin european vietnamese,300 | 400 | 500 | 600 | 700 | 800 | 900,wght: -,latin | latin-ext | vietnamese,Omnibus-Type,849,2081,No,2020-08-31,2025-09-04,https://fonts.google.com/specimen/Sansita+Swashed
+Sarabun,Sans Serif,Sans Serif,Display,clean modern minimal professional readable neutral geometric humanist grotesque headline hero decorative large-text attention versatile multi-weight flexible italic english western european extended-latin european thai southeast-asia vietnamese well-known common,100 | 100i | 200 | 200i | 300 | 300i | 400 | 400i | 500 | 500i | 600 | 600i | 700 | 700i | 800 | 800i,,latin | latin-ext | thai | vietnamese,Suppakit Chalermlarp,205,1442,No,2013-10-28,2025-09-11,https://fonts.google.com/specimen/Sarabun
+Sarala,Sans Serif,Sans Serif,Display,clean modern minimal professional readable neutral geometric humanist grotesque headline hero decorative large-text attention hindi devanagari indian english western european extended-latin european,400 | 700,,devanagari | latin | latin-ext,Andres Torresi,481,1857,No,2015-06-17,2025-09-04,https://fonts.google.com/specimen/Sarala
+Sarina,Display,,Display | Handwriting,bold decorative headline attention-grabbing creative expressive  headline hero decorative large-text attention script cursive hand-drawn artistic informal english western european extended-latin european,400,,latin | latin-ext,James Grieshaber,871,371,No,2011-12-19,2025-09-16,https://fonts.google.com/specimen/Sarina
+Sarpanch,Sans Serif,Sans Serif,Display,clean modern minimal professional readable neutral geometric humanist grotesque headline hero decorative large-text attention versatile multi-weight flexible hindi devanagari indian english western european extended-latin european,400 | 500 | 600 | 700 | 800 | 900,,devanagari | latin | latin-ext,Indian Type Foundry,954,257,No,2014-09-03,2025-09-16,https://fonts.google.com/specimen/Sarpanch
+Sassy Frass,Handwriting,,Display | Handwriting,personal casual friendly warm handwritten script organic  headline hero decorative large-text attention script cursive hand-drawn artistic informal english western european extended-latin european vietnamese,400,,latin | latin-ext | vietnamese,Robert Leuschke,1666,943,No,2021-10-12,2025-09-16,https://fonts.google.com/specimen/Sassy+Frass
+Satisfy,Handwriting,,Display | Handwriting,personal casual friendly warm handwritten script organic  headline hero decorative large-text attention script cursive hand-drawn artistic informal english western european popular widely-used,400,,latin,Sideshow,145,1720,No,2011-10-12,2025-06-02,https://fonts.google.com/specimen/Satisfy
+Savate,Sans Serif,Sans Serif,Display,clean modern minimal professional readable neutral geometric humanist grotesque headline hero decorative large-text attention versatile multi-weight flexible italic variable variable-font responsive variable-weight english western european extended-latin european,200 | 200i | 300 | 300i | 400 | 400i | 500 | 500i | 600 | 600i | 700 | 700i | 800 | 800i | 900 | 900i,wght: -,latin | latin-ext,Plomb Type | Max Esnée,1763,668,No,2025-06-04,2025-09-10,https://fonts.google.com/specimen/Savate
+Sawarabi Gothic,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque russian cyrillic slavic japanese kanji hiragana katakana english western european extended-latin european vietnamese well-known common,400,,cyrillic | japanese | latin | latin-ext | vietnamese,mshio,293,1421,No,2018-05-17,2025-06-25,https://fonts.google.com/specimen/Sawarabi+Gothic
+Sawarabi Mincho,Serif,Serif,,elegant traditional classic refined literary editorial transitional oldstyle didone japanese kanji hiragana katakana english western european extended-latin european well-known common,400,,braille | japanese | latin | latin-ext,mshio,263,804,No,2018-05-17,2025-09-10,https://fonts.google.com/specimen/Sawarabi+Mincho
+Scada,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque italic russian cyrillic slavic cyrillic extended english western european extended-latin european,400 | 400i | 700 | 700i,,cyrillic | cyrillic-ext | latin | latin-ext,Jovanny Lemonad,861,1642,No,2012-07-30,2025-09-08,https://fonts.google.com/specimen/Scada
+Scheherazade New,Serif,Serif,,elegant traditional classic refined literary editorial transitional oldstyle didone arabic RTL middle-east english western european extended-latin european,400 | 500 | 600 | 700,,arabic | latin | latin-ext,SIL International,783,103,No,2021-05-12,2025-09-16,https://fonts.google.com/specimen/Scheherazade+New
+Schibsted Grotesk,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque versatile multi-weight flexible italic variable variable-font responsive variable-weight english western european extended-latin european popular widely-used,400 | 400i | 500 | 500i | 600 | 600i | 700 | 700i | 800 | 800i | 900 | 900i,wght: -,latin | latin-ext,Bakken & Bæck | Henrik Kongsvoll,88,1504,No,2023-03-02,2025-09-04,https://fonts.google.com/specimen/Schibsted+Grotesk
+Schoolbell,Handwriting,,Handwriting,personal casual friendly warm handwritten script organic  script cursive hand-drawn artistic informal english western european,400,,latin,Font Diner,662,1466,No,2011-01-06,2025-05-30,https://fonts.google.com/specimen/Schoolbell
+Science Gothic,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque versatile multi-weight flexible variable variable-font responsive variable-weight variable-width variable-slant russian cyrillic slavic cyrillic extended english western european extended-latin european vietnamese,100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900,CTRS: - | slnt: - | wdth: - | wght: -,cyrillic | cyrillic-ext | latin | latin-ext | vietnamese,Thomas Phinney | Vassil Kateliev | Brandon Buerkle,1504,1686,No,2025-11-19,2025-11-20,https://fonts.google.com/specimen/Science+Gothic
+Scope One,Serif,Serif,,elegant traditional classic refined literary editorial transitional oldstyle didone english western european extended-latin european,400,,latin | latin-ext,Dalton Maag,1173,1700,No,2016-06-15,2025-09-10,https://fonts.google.com/specimen/Scope+One
+Seaweed Script,Display,,Display | Handwriting,bold decorative headline attention-grabbing creative expressive  headline hero decorative large-text attention script cursive hand-drawn artistic informal english western european extended-latin european,400,,latin | latin-ext,Neapolitan,846,1987,No,2012-02-29,2025-09-11,https://fonts.google.com/specimen/Seaweed+Script
+Secular One,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque hebrew RTL israeli english western european extended-latin european,400,,hebrew | latin | latin-ext,Michal Sahar,505,2165,No,2016-03-31,2025-09-08,https://fonts.google.com/specimen/Secular+One
+Sedan,Serif,Serif,Display,elegant traditional classic refined literary editorial transitional oldstyle didone headline hero decorative large-text attention italic english western european extended-latin european,400 | 400i,,latin | latin-ext,Sebastián Salazar,1577,165,No,2024-04-10,2025-05-30,https://fonts.google.com/specimen/Sedan
+Sedan SC,Serif,Serif,Display,elegant traditional classic refined literary editorial transitional oldstyle didone headline hero decorative large-text attention english western european extended-latin european,400,,latin | latin-ext,Sebastián Salazar,1328,73,No,2024-05-01,2025-05-30,https://fonts.google.com/specimen/Sedan+SC
+Sedgwick Ave,Handwriting,,Handwriting,personal casual friendly warm handwritten script organic  script cursive hand-drawn artistic informal english western european extended-latin european vietnamese,400,,latin | latin-ext | vietnamese,Pedro Vergani | Kevin Burke,1071,922,No,2017-08-01,2025-09-08,https://fonts.google.com/specimen/Sedgwick+Ave
+Sedgwick Ave Display,Handwriting,,Display | Handwriting,personal casual friendly warm handwritten script organic  headline hero decorative large-text attention script cursive hand-drawn artistic informal english western european extended-latin european vietnamese,400,,latin | latin-ext | vietnamese,Pedro Vergani | Kevin Burke,839,53,No,2017-08-01,2025-09-11,https://fonts.google.com/specimen/Sedgwick+Ave+Display
+Sekuya,Display,,Display,bold decorative headline attention-grabbing creative expressive  headline hero decorative large-text attention english western european extended-latin european,400,,latin | latin-ext,SEKUYA,1941,2297,No,2025-12-08,2025-12-10,https://fonts.google.com/specimen/Sekuya
+Sen,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque variable variable-font responsive variable-weight english western european extended-latin european,400 | 500 | 600 | 700 | 800,wght: -,latin | latin-ext,Kosal Sen,331,1882,No,2020-01-17,2025-09-10,https://fonts.google.com/specimen/Sen
+Send Flowers,Handwriting,,Display | Handwriting,personal casual friendly warm handwritten script organic  headline hero decorative large-text attention script cursive hand-drawn artistic informal english western european extended-latin european vietnamese,400,,latin | latin-ext | vietnamese,Robert Leuschke,1569,1658,No,2022-03-11,2025-09-11,https://fonts.google.com/specimen/Send+Flowers
+Sevillana,Display,,Display | Handwriting,bold decorative headline attention-grabbing creative expressive  headline hero decorative large-text attention script cursive hand-drawn artistic informal english western european extended-latin european,400,,latin | latin-ext,Brownfox,956,2279,No,2012-02-22,2025-09-16,https://fonts.google.com/specimen/Sevillana
+Seymour One,Sans Serif,Sans Serif,Display,clean modern minimal professional readable neutral geometric humanist grotesque headline hero decorative large-text attention russian cyrillic slavic english western european extended-latin european,400,,cyrillic | latin | latin-ext,Vernon Adams,1336,851,No,2012-10-24,2025-09-16,https://fonts.google.com/specimen/Seymour+One
+Shadows Into Light,Handwriting,,Display | Handwriting,personal casual friendly warm handwritten script organic  headline hero decorative large-text attention script cursive hand-drawn artistic informal english western european extended-latin european popular widely-used,400,,latin | latin-ext,Kimberly Geswein,146,1532,No,2011-06-08,2025-09-10,https://fonts.google.com/specimen/Shadows+Into+Light
+Shadows Into Light Two,Handwriting,,Display | Handwriting,personal casual friendly warm handwritten script organic  headline hero decorative large-text attention script cursive hand-drawn artistic informal english western european extended-latin european,400,,latin | latin-ext,Kimberly Geswein,574,1804,No,2012-02-22,2025-09-16,https://fonts.google.com/specimen/Shadows+Into+Light+Two
+Shafarik,Display,,Display,bold decorative headline attention-grabbing creative expressive  headline hero decorative large-text attention russian cyrillic slavic cyrillic extended english western european extended-latin european,400,,cyrillic | cyrillic-ext | glagolitic | latin | latin-ext,Aleksandr Andreev,1861,2218,No,2025-02-11,2025-05-30,https://fonts.google.com/specimen/Shafarik
+Shalimar,Handwriting,,Handwriting | Display,personal casual friendly warm handwritten script organic  script cursive hand-drawn artistic informal headline hero decorative large-text attention english western european extended-latin european vietnamese,400,,latin | latin-ext | vietnamese,Robert Leuschke,1285,957,No,2021-10-14,2025-09-08,https://fonts.google.com/specimen/Shalimar
+Shantell Sans,Display,Sans Serif,Handwriting,bold decorative headline attention-grabbing creative expressive geometric humanist grotesque script cursive hand-drawn artistic informal versatile multi-weight flexible italic variable variable-font responsive variable-weight russian cyrillic slavic cyrillic extended english western european extended-latin european vietnamese,300 | 300i | 400 | 400i | 500 | 500i | 600 | 600i | 700 | 700i | 800 | 800i,BNCE: - | INFM: - | SPAC: - | wght: -,cyrillic | cyrillic-ext | latin | latin-ext | vietnamese,Shantell Martin | Arrow Type | Anya Danilova,778,164,No,2023-01-16,2025-09-16,https://fonts.google.com/specimen/Shantell+Sans
+Shanti,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque english western european extended-latin european,400,,latin | latin-ext,Vernon Adams,1038,792,No,2011-05-11,2025-05-30,https://fonts.google.com/specimen/Shanti
+Share,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque italic english western european extended-latin european,400 | 400i | 700 | 700i,,latin | latin-ext,Carrois Apostrophe,679,1896,No,2012-02-08,2025-09-08,https://fonts.google.com/specimen/Share
+Share Tech,Sans Serif,Sans Serif,Display,clean modern minimal professional readable neutral geometric humanist grotesque headline hero decorative large-text attention english western european popular widely-used,400,,latin,Carrois Apostrophe,65,466,No,2012-10-31,2025-09-11,https://fonts.google.com/specimen/Share+Tech
+Share Tech Mono,Monospace,,Monospace,code developer technical fixed-width terminal programming  mono fixed-width tabular data code english western european,400,,latin,Carrois Apostrophe,342,199,No,2012-10-31,2025-09-16,https://fonts.google.com/specimen/Share+Tech+Mono
+Shippori Antique,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque japanese kanji hiragana katakana english western european extended-latin european,400,,japanese | latin | latin-ext,FONTDASU,1114,2007,No,2021-04-14,2025-09-04,https://fonts.google.com/specimen/Shippori+Antique
+Shippori Antique B1,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque japanese kanji hiragana katakana english western european extended-latin european,400,,japanese | latin | latin-ext,FONTDASU,1220,81,No,2021-04-14,2025-09-04,https://fonts.google.com/specimen/Shippori+Antique+B1
+Shippori Mincho,Serif,Serif,,elegant traditional classic refined literary editorial transitional oldstyle didone japanese kanji hiragana katakana english western european extended-latin european well-known common,400 | 500 | 600 | 700 | 800,,japanese | latin | latin-ext,FONTDASU,280,1245,No,2021-01-04,2025-09-04,https://fonts.google.com/specimen/Shippori+Mincho
+Shippori Mincho B1,Serif,Serif,,elegant traditional classic refined literary editorial transitional oldstyle didone japanese kanji hiragana katakana english western european extended-latin european,400 | 500 | 600 | 700 | 800,,japanese | latin | latin-ext,FONTDASU,544,1446,No,2021-01-04,2025-09-11,https://fonts.google.com/specimen/Shippori+Mincho+B1
+Shizuru,Display,,Display,bold decorative headline attention-grabbing creative expressive  headline hero decorative large-text attention japanese kanji hiragana katakana english western european,400,,japanese | latin,Shibuya Font,1781,2187,No,2020-12-08,2025-09-10,https://fonts.google.com/specimen/Shizuru
+Shojumaru,Display,,Display,bold decorative headline attention-grabbing creative expressive  headline hero decorative large-text attention english western european extended-latin european,400,,latin | latin-ext,Astigmatic,979,1849,No,2012-01-25,2025-09-11,https://fonts.google.com/specimen/Shojumaru
+Short Stack,Handwriting,,Handwriting,personal casual friendly warm handwritten script organic  script cursive hand-drawn artistic informal english western european,400,,latin,James Grieshaber,905,808,No,2011-08-17,2025-09-10,https://fonts.google.com/specimen/Short+Stack
+Shrikhand,Display,Serif,Display,bold decorative headline attention-grabbing creative expressive transitional oldstyle didone headline hero decorative large-text attention gujarati indian english western european extended-latin european,400,,gujarati | latin | latin-ext,Jonny Pinhorn,526,484,No,2016-06-15,2025-09-08,https://fonts.google.com/specimen/Shrikhand
+Siemreap,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque khmer cambodian,400,,khmer,Danh Hong,1433,2197,No,2011-04-20,2025-09-17,https://fonts.google.com/specimen/Siemreap
+Sigmar,Display,Sans Serif,Display,bold decorative headline attention-grabbing creative expressive geometric humanist grotesque headline hero decorative large-text attention english western european extended-latin european vietnamese,400,,latin | latin-ext | vietnamese,Vernon Adams,1265,2185,No,2023-02-23,2025-09-16,https://fonts.google.com/specimen/Sigmar
+Sigmar One,Display,Sans Serif,Display,bold decorative headline attention-grabbing creative expressive geometric humanist grotesque headline hero decorative large-text attention english western european extended-latin european vietnamese,400,,latin | latin-ext | vietnamese,Vernon Adams,692,768,No,2011-05-04,2025-09-04,https://fonts.google.com/specimen/Sigmar+One
+Signika,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque variable variable-font responsive variable-weight english western european extended-latin european vietnamese well-known common,300 | 400 | 500 | 600 | 700,GRAD: - | wght: -,latin | latin-ext | vietnamese,Anna Giedryś,189,1449,No,2011-11-23,2025-09-10,https://fonts.google.com/specimen/Signika
+Signika Negative,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque variable variable-font responsive variable-weight english western european extended-latin european vietnamese well-known common,300 | 400 | 500 | 600 | 700,wght: -,latin | latin-ext | vietnamese,Anna Giedryś,229,760,No,2011-11-23,2025-09-02,https://fonts.google.com/specimen/Signika+Negative
+Silkscreen,Display,Sans Serif,Display,bold decorative headline attention-grabbing creative expressive geometric humanist grotesque headline hero decorative large-text attention english western european extended-latin european,400 | 700,,latin | latin-ext,Jason Kottke,558,57,No,2022-06-22,2025-09-08,https://fonts.google.com/specimen/Silkscreen
+Simonetta,Display,Serif,Display,bold decorative headline attention-grabbing creative expressive transitional oldstyle didone headline hero decorative large-text attention italic english western european extended-latin european,400 | 400i | 900 | 900i,,latin | latin-ext,Brownfox,1402,714,No,2012-04-04,2025-09-11,https://fonts.google.com/specimen/Simonetta
+Single Day,Display,,Handwriting | Display,bold decorative headline attention-grabbing creative expressive  script cursive hand-drawn artistic informal headline hero decorative large-text attention korean hangul,400,,korean,DXKorea Inc,1244,180,No,2018-02-22,2025-09-08,https://fonts.google.com/specimen/Single+Day
+Sintony,Sans Serif,Sans Serif,Display,clean modern minimal professional readable neutral geometric humanist grotesque headline hero decorative large-text attention english western european extended-latin european,400 | 700,,latin | latin-ext,Eduardo Rodriguez Tunni,585,1640,No,2013-01-30,2025-09-16,https://fonts.google.com/specimen/Sintony
+Sirin Stencil,Display,Sans Serif,Display,bold decorative headline attention-grabbing creative expressive geometric humanist grotesque headline hero decorative large-text attention english western european,400,,latin,Cyreal,1629,1827,No,2012-01-18,2025-09-04,https://fonts.google.com/specimen/Sirin+Stencil
+Sirivennela,Sans Serif,Sans Serif,Display,clean modern minimal professional readable neutral geometric humanist grotesque headline hero decorative large-text attention english western european telugu indian,400,,latin | telugu,Appaji Ambarisha Darbha,1834,2128,No,2025-08-25,2025-08-26,https://fonts.google.com/specimen/Sirivennela
+Six Caps,Sans Serif,Sans Serif,Display,clean modern minimal professional readable neutral geometric humanist grotesque headline hero decorative large-text attention english western european extended-latin european,400,,latin | latin-ext,Vernon Adams,636,2244,No,2011-02-16,2025-09-08,https://fonts.google.com/specimen/Six+Caps
+Sixtyfour,Monospace,Sans Serif,Display,code developer technical fixed-width terminal programming geometric humanist grotesque headline hero decorative large-text attention variable variable-font responsive english western european extended-latin european,400,BLED: - | SCAN: -,latin | latin-ext | math | symbols,Jens Kutílek,1521,2141,No,2024-01-23,2025-09-04,https://fonts.google.com/specimen/Sixtyfour
+Sixtyfour Convergence,Monospace,Sans Serif,Display,code developer technical fixed-width terminal programming geometric humanist grotesque headline hero decorative large-text attention variable variable-font responsive english western european extended-latin european,400,BLED: - | SCAN: - | XELA: - | YELA: -,latin | latin-ext | math | symbols,Simon Cozens | Jens Kutílek,1695,287,No,2024-07-02,2025-09-08,https://fonts.google.com/specimen/Sixtyfour+Convergence
+Skranji,Display,,Display,bold decorative headline attention-grabbing creative expressive  headline hero decorative large-text attention english western european extended-latin european,400 | 700,,latin | latin-ext,Neapolitan,685,334,No,2012-08-21,2025-09-16,https://fonts.google.com/specimen/Skranji
+Slabo 13px,Serif,Slab Serif,,elegant traditional classic refined literary editorial slab mechanical sturdy strong english western european extended-latin european,400,,latin | latin-ext,John Hudson,1033,2252,No,2014-05-30,2025-09-11,https://fonts.google.com/specimen/Slabo+13px
+Slabo 27px,Serif,Slab Serif,,elegant traditional classic refined literary editorial slab mechanical sturdy strong english western european extended-latin european popular widely-used,400,,latin | latin-ext,John Hudson,127,868,No,2014-05-30,2025-09-16,https://fonts.google.com/specimen/Slabo+27px
+Slackey,Display,Sans Serif,Display,bold decorative headline attention-grabbing creative expressive geometric humanist grotesque headline hero decorative large-text attention english western european,400,,latin,Sideshow,888,422,No,2011-01-06,2025-06-02,https://fonts.google.com/specimen/Slackey
+Slackside One,Handwriting,,Display | Handwriting,personal casual friendly warm handwritten script organic  headline hero decorative large-text attention script cursive hand-drawn artistic informal japanese kanji hiragana katakana english western european extended-latin european,400,,japanese | latin | latin-ext,Maniackers Design,1771,1440,No,2020-12-14,2025-09-10,https://fonts.google.com/specimen/Slackside+One
+Smokum,Display,Serif,Display,bold decorative headline attention-grabbing creative expressive transitional oldstyle didone headline hero decorative large-text attention english western european extended-latin european,400,,latin | latin-ext,Astigmatic,1255,95,No,2011-08-03,2025-06-02,https://fonts.google.com/specimen/Smokum
+Smooch,Handwriting,,Display | Handwriting,personal casual friendly warm handwritten script organic  headline hero decorative large-text attention script cursive hand-drawn artistic informal english western european extended-latin european vietnamese,400,,latin | latin-ext | vietnamese,Robert Leuschke,1418,1871,No,2021-11-02,2025-09-16,https://fonts.google.com/specimen/Smooch
+Smooch Sans,Sans Serif,Sans Serif,Display,clean modern minimal professional readable neutral geometric humanist grotesque headline hero decorative large-text attention versatile multi-weight flexible variable variable-font responsive variable-weight english western european extended-latin european vietnamese popular widely-used,100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900,wght: -,latin | latin-ext | vietnamese,Robert Leuschke,67,456,No,2021-12-17,2025-09-10,https://fonts.google.com/specimen/Smooch+Sans
+Smythe,Display,,Display,bold decorative headline attention-grabbing creative expressive  headline hero decorative large-text attention english western european,400,,latin,Vernon Adams,1175,806,No,2011-04-20,2025-09-16,https://fonts.google.com/specimen/Smythe
+Sniglet,Display,,Display,bold decorative headline attention-grabbing creative expressive  headline hero decorative large-text attention english western european extended-latin european,400 | 800,,latin | latin-ext,Haley Fiege,648,503,No,2010-12-15,2025-09-10,https://fonts.google.com/specimen/Sniglet
+Snippet,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque english western european,400,,latin,Gesine Todt,1617,1900,No,2011-07-20,2025-05-30,https://fonts.google.com/specimen/Snippet
+Snowburst One,Display,,Display,bold decorative headline attention-grabbing creative expressive  headline hero decorative large-text attention english western european extended-latin european,400,,latin | latin-ext,Annet Stirling,1687,655,No,2012-11-26,2025-09-02,https://fonts.google.com/specimen/Snowburst+One
+Sofadi One,Display,,Display,bold decorative headline attention-grabbing creative expressive  headline hero decorative large-text attention english western european,400,,latin,Botjo Nikoltchev,1506,528,No,2012-09-30,2025-09-11,https://fonts.google.com/specimen/Sofadi+One
+Sofia,Handwriting,,Handwriting,personal casual friendly warm handwritten script organic  script cursive hand-drawn artistic informal english western european,400,,latin,LatinoType,439,1839,No,2011-12-19,2025-09-04,https://fonts.google.com/specimen/Sofia
+Sofia Sans,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque versatile multi-weight flexible italic variable variable-font responsive variable-weight russian cyrillic slavic cyrillic extended greek english western european extended-latin european well-known common,1 | 100 | 1000 | 1000i | 100i | 1i | 200 | 200i | 300 | 300i | 400 | 400i | 500 | 500i | 600 | 600i | 700 | 700i | 800 | 800i | 900 | 900i,wght: -,cyrillic | cyrillic-ext | greek | latin | latin-ext,Lettersoup | Botio Nikoltchev | Ani Petrova,207,1889,No,2021-01-13,2025-09-04,https://fonts.google.com/specimen/Sofia+Sans
+Sofia Sans Condensed,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque versatile multi-weight flexible italic variable variable-font responsive variable-weight russian cyrillic slavic cyrillic extended greek english western european extended-latin european,1 | 100 | 1000 | 1000i | 100i | 1i | 200 | 200i | 300 | 300i | 400 | 400i | 500 | 500i | 600 | 600i | 700 | 700i | 800 | 800i | 900 | 900i,wght: -,cyrillic | cyrillic-ext | greek | latin | latin-ext,Lettersoup | Botio Nikoltchev | Ani Petrova,322,1609,No,2022-11-16,2025-09-10,https://fonts.google.com/specimen/Sofia+Sans+Condensed
+Sofia Sans Extra Condensed,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque versatile multi-weight flexible italic variable variable-font responsive variable-weight russian cyrillic slavic cyrillic extended greek english western european extended-latin european,1 | 100 | 1000 | 1000i | 100i | 1i | 200 | 200i | 300 | 300i | 400 | 400i | 500 | 500i | 600 | 600i | 700 | 700i | 800 | 800i | 900 | 900i,wght: -,cyrillic | cyrillic-ext | greek | latin | latin-ext,Lettersoup | Botio Nikoltchev | Ani Petrova,422,339,No,2022-11-16,2025-09-11,https://fonts.google.com/specimen/Sofia+Sans+Extra+Condensed
+Sofia Sans Semi Condensed,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque versatile multi-weight flexible italic variable variable-font responsive variable-weight russian cyrillic slavic cyrillic extended greek english western european extended-latin european,1 | 100 | 1000 | 1000i | 100i | 1i | 200 | 200i | 300 | 300i | 400 | 400i | 500 | 500i | 600 | 600i | 700 | 700i | 800 | 800i | 900 | 900i,wght: -,cyrillic | cyrillic-ext | greek | latin | latin-ext,Lettersoup | Botio Nikoltchev | Ani Petrova,708,1941,No,2022-11-16,2025-09-10,https://fonts.google.com/specimen/Sofia+Sans+Semi+Condensed
+Solitreo,Handwriting,,Handwriting,personal casual friendly warm handwritten script organic  script cursive hand-drawn artistic informal hebrew RTL israeli english western european extended-latin european,400,,hebrew | latin | latin-ext,Nathan Gross | Bryan Kirschen,1019,347,No,2022-12-14,2025-05-30,https://fonts.google.com/specimen/Solitreo
+Solway,Serif,Serif,,elegant traditional classic refined literary editorial transitional oldstyle didone english western european,300 | 400 | 500 | 700 | 800,,latin,Mariya Lish | The Northern Block,865,1517,No,2018-08-06,2025-09-08,https://fonts.google.com/specimen/Solway
+Sometype Mono,Monospace,Sans Serif,Monospace,code developer technical fixed-width terminal programming geometric humanist grotesque mono fixed-width tabular data code italic variable variable-font responsive variable-weight english western european extended-latin european,400 | 400i | 500 | 500i | 600 | 600i | 700 | 700i,wght: -,latin | latin-ext,Ryoichi Tsunekawa,703,323,No,2023-10-17,2025-09-16,https://fonts.google.com/specimen/Sometype+Mono
+Song Myung,Serif,Serif,,elegant traditional classic refined literary editorial transitional oldstyle didone korean hangul,400,,korean,JIKJI,1026,447,No,2018-02-23,2025-09-08,https://fonts.google.com/specimen/Song+Myung
+Sono,Sans Serif,Sans Serif,Monospace,clean modern minimal professional readable neutral geometric humanist grotesque mono fixed-width tabular data code versatile multi-weight flexible variable variable-font responsive variable-weight english western european extended-latin european vietnamese,200 | 300 | 400 | 500 | 600 | 700 | 800,MONO: - | wght: -,latin | latin-ext | vietnamese,Tyler Finck,1349,2207,No,2022-07-29,2025-09-11,https://fonts.google.com/specimen/Sono
+Sonsie One,Display,,Display,bold decorative headline attention-grabbing creative expressive  headline hero decorative large-text attention english western european extended-latin european,400,,latin | latin-ext,Riccardo De Franceschi,1333,2206,No,2012-01-18,2025-09-16,https://fonts.google.com/specimen/Sonsie+One
+Sora,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque versatile multi-weight flexible variable variable-font responsive variable-weight english western european extended-latin european popular widely-used,100 | 200 | 300 | 400 | 500 | 600 | 700 | 800,wght: -,latin | latin-ext,Jonathan Barnbrook | Julián Moncada,120,836,No,2020-06-10,2025-09-08,https://fonts.google.com/specimen/Sora
+Sorts Mill Goudy,Serif,Serif,,elegant traditional classic refined literary editorial transitional oldstyle didone italic english western european extended-latin european,400 | 400i,,latin | latin-ext,Barry Schwartz,334,830,No,2011-09-07,2025-09-04,https://fonts.google.com/specimen/Sorts+Mill+Goudy
+Sour Gummy,Sans Serif,Sans Serif,Display,clean modern minimal professional readable neutral geometric humanist grotesque headline hero decorative large-text attention versatile multi-weight flexible italic variable variable-font responsive variable-weight variable-width english western european extended-latin european,100 | 100i | 200 | 200i | 300 | 300i | 400 | 400i | 500 | 500i | 600 | 600i | 700 | 700i | 800 | 800i | 900 | 900i,wdth: - | wght: -,latin | latin-ext,Stefie Justprince,1045,202,No,2024-11-05,2025-09-10,https://fonts.google.com/specimen/Sour+Gummy
+Source Code Pro,Monospace,,Monospace,code developer technical fixed-width terminal programming  mono fixed-width tabular data code versatile multi-weight flexible italic variable variable-font responsive variable-weight russian cyrillic slavic cyrillic extended greek greek extended english western european extended-latin european vietnamese multilingual international popular widely-used,200 | 200i | 300 | 300i | 400 | 400i | 500 | 500i | 600 | 600i | 700 | 700i | 800 | 800i | 900 | 900i,wght: -,cyrillic | cyrillic-ext | greek | greek-ext | latin | latin-ext | vietnamese,Paul D. Hunt,66,585,No,2012-09-20,2025-09-08,https://fonts.google.com/specimen/Source+Code+Pro
+Source Sans 3,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque versatile multi-weight flexible italic variable variable-font responsive variable-weight russian cyrillic slavic cyrillic extended greek greek extended english western european extended-latin european vietnamese multilingual international popular widely-used,200 | 200i | 300 | 300i | 400 | 400i | 500 | 500i | 600 | 600i | 700 | 700i | 800 | 800i | 900 | 900i,wght: -,cyrillic | cyrillic-ext | greek | greek-ext | latin | latin-ext | vietnamese,Paul D. Hunt,61,2116,No,2021-09-17,2025-09-04,https://fonts.google.com/specimen/Source+Sans+3
+Source Serif 4,Serif,Serif,,elegant traditional classic refined literary editorial transitional oldstyle didone versatile multi-weight flexible italic variable variable-font responsive variable-weight russian cyrillic slavic cyrillic extended greek english western european extended-latin european vietnamese multilingual international popular widely-used,200 | 200i | 300 | 300i | 400 | 400i | 500 | 500i | 600 | 600i | 700 | 700i | 800 | 800i | 900 | 900i,opsz: - | wght: -,cyrillic | cyrillic-ext | greek | latin | latin-ext | vietnamese,Frank Grießhammer,139,460,No,2021-11-16,2025-09-11,https://fonts.google.com/specimen/Source+Serif+4
+Space Grotesk,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque variable variable-font responsive variable-weight english western european extended-latin european vietnamese popular widely-used,300 | 400 | 500 | 600 | 700,wght: -,latin | latin-ext | vietnamese,Florian Karsten,93,285,No,2020-10-06,2025-09-04,https://fonts.google.com/specimen/Space+Grotesk
+Space Mono,Monospace,,Monospace,code developer technical fixed-width terminal programming  mono fixed-width tabular data code italic english western european extended-latin european vietnamese well-known common,400 | 400i | 700 | 700i,,latin | latin-ext | vietnamese,Colophon Foundry,194,367,No,2016-06-15,2025-06-25,https://fonts.google.com/specimen/Space+Mono
+Special Elite,Display,,Display,bold decorative headline attention-grabbing creative expressive  headline hero decorative large-text attention english western european extended-latin european,400,,latin | latin-ext,Astigmatic,327,1611,No,2011-04-20,2025-09-08,https://fonts.google.com/specimen/Special+Elite
+Special Gothic,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque variable variable-font responsive variable-weight variable-width english western european extended-latin european,400 | 500 | 600 | 700,wdth: - | wght: -,latin | latin-ext,Alistair McCready,1170,1349,No,2025-04-07,2025-07-30,https://fonts.google.com/specimen/Special+Gothic
+Special Gothic Condensed One,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque english western european extended-latin european,400,,latin | latin-ext,Alistair McCready,1046,740,No,2025-04-07,2025-04-23,https://fonts.google.com/specimen/Special+Gothic+Condensed+One
+Special Gothic Expanded One,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque english western european extended-latin european,400,,latin | latin-ext,Alistair McCready,1034,105,No,2025-04-07,2025-04-23,https://fonts.google.com/specimen/Special+Gothic+Expanded+One
+Spectral,Serif,Serif,,elegant traditional classic refined literary editorial transitional oldstyle didone versatile multi-weight flexible italic russian cyrillic slavic cyrillic extended english western european extended-latin european vietnamese well-known common,200 | 200i | 300 | 300i | 400 | 400i | 500 | 500i | 600 | 600i | 700 | 700i | 800 | 800i,,cyrillic | cyrillic-ext | latin | latin-ext | vietnamese,Production Type,188,1238,No,2017-06-12,2025-09-11,https://fonts.google.com/specimen/Spectral
+Spectral SC,Serif,Serif,,elegant traditional classic refined literary editorial transitional oldstyle didone versatile multi-weight flexible italic russian cyrillic slavic cyrillic extended english western european extended-latin european vietnamese,200 | 200i | 300 | 300i | 400 | 400i | 500 | 500i | 600 | 600i | 700 | 700i | 800 | 800i,,cyrillic | cyrillic-ext | latin | latin-ext | vietnamese,Production Type,869,2010,No,2017-10-10,2025-09-02,https://fonts.google.com/specimen/Spectral+SC
+Spicy Rice,Display,Serif,Display,bold decorative headline attention-grabbing creative expressive transitional oldstyle didone headline hero decorative large-text attention english western european extended-latin european,400,,latin | latin-ext,Astigmatic,1055,495,No,2011-12-13,2025-09-10,https://fonts.google.com/specimen/Spicy+Rice
+Spinnaker,Sans Serif,Sans Serif,Display,clean modern minimal professional readable neutral geometric humanist grotesque headline hero decorative large-text attention english western european extended-latin european,400,,latin | latin-ext,Elena Albertoni,568,442,No,2011-09-28,2025-09-04,https://fonts.google.com/specimen/Spinnaker
+Spirax,Display,,Display,bold decorative headline attention-grabbing creative expressive  headline hero decorative large-text attention english western european,400,,latin,Brenda Gallo,1337,1546,No,2011-11-23,2025-09-10,https://fonts.google.com/specimen/Spirax
+Splash,Handwriting,,Display | Handwriting,personal casual friendly warm handwritten script organic  headline hero decorative large-text attention script cursive hand-drawn artistic informal english western european extended-latin european vietnamese,400,,latin | latin-ext | vietnamese,Robert Leuschke,1696,1709,No,2022-05-18,2025-09-16,https://fonts.google.com/specimen/Splash
+Spline Sans,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque variable variable-font responsive variable-weight english western european extended-latin european,300 | 400 | 500 | 600 | 700,wght: -,latin | latin-ext,Eben Sorkin | Mirko Velimirović,511,2017,No,2021-11-22,2025-09-10,https://fonts.google.com/specimen/Spline+Sans
+Spline Sans Mono,Monospace,Sans Serif,Monospace,code developer technical fixed-width terminal programming geometric humanist grotesque mono fixed-width tabular data code italic variable variable-font responsive variable-weight english western european extended-latin european,300 | 300i | 400 | 400i | 500 | 500i | 600 | 600i | 700 | 700i,wght: -,latin | latin-ext,Eben Sorkin | Mirko Velimirović,1230,1650,No,2022-03-27,2025-09-10,https://fonts.google.com/specimen/Spline+Sans+Mono
+Squada One,Display,Sans Serif,Display,bold decorative headline attention-grabbing creative expressive geometric humanist grotesque headline hero decorative large-text attention english western european,400,,latin,Joe Prince,463,1584,No,2011-12-15,2025-09-10,https://fonts.google.com/specimen/Squada+One
+Square Peg,Handwriting,,Handwriting | Display,personal casual friendly warm handwritten script organic  script cursive hand-drawn artistic informal headline hero decorative large-text attention english western european extended-latin european vietnamese,400,,latin | latin-ext | vietnamese,Robert Leuschke,947,310,No,2022-03-23,2025-09-04,https://fonts.google.com/specimen/Square+Peg
+Sree Krushnadevaraya,Serif,Serif,,elegant traditional classic refined literary editorial transitional oldstyle didone english western european telugu indian,400,,latin | telugu,Purushoth Kumar Guttula,1274,2127,No,2015-01-12,2025-09-11,https://fonts.google.com/specimen/Sree+Krushnadevaraya
+Sriracha,Handwriting,,Display | Handwriting,personal casual friendly warm handwritten script organic  headline hero decorative large-text attention script cursive hand-drawn artistic informal english western european extended-latin european thai southeast-asia vietnamese,400,,latin | latin-ext | thai | vietnamese,Cadson Demak,468,421,No,2015-07-01,2025-09-11,https://fonts.google.com/specimen/Sriracha
+Srisakdi,Display,,Display,bold decorative headline attention-grabbing creative expressive  headline hero decorative large-text attention english western european extended-latin european thai southeast-asia vietnamese,400 | 700,,latin | latin-ext | thai | vietnamese,Cadson Demak,1280,1994,No,2018-09-10,2025-09-08,https://fonts.google.com/specimen/Srisakdi
+Staatliches,Display,Sans Serif,Display,bold decorative headline attention-grabbing creative expressive geometric humanist grotesque headline hero decorative large-text attention english western european extended-latin european,400,,latin | latin-ext,Brian LaRossa | Erica Carras,354,684,No,2018-12-09,2025-09-04,https://fonts.google.com/specimen/Staatliches
+Stack Sans Headline,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque versatile multi-weight flexible variable variable-font responsive variable-weight english western european extended-latin european,200 | 300 | 400 | 500 | 600 | 700,wght: -,latin | latin-ext,Koto,1477,1752,No,2025-11-03,2025-11-04,https://fonts.google.com/specimen/Stack+Sans+Headline
+Stack Sans Notch,Sans Serif,Sans Serif,Display,clean modern minimal professional readable neutral geometric humanist grotesque headline hero decorative large-text attention versatile multi-weight flexible variable variable-font responsive variable-weight english western european extended-latin european,200 | 300 | 400 | 500 | 600 | 700,wght: -,latin | latin-ext,Koto,1743,928,No,2025-11-03,2025-11-04,https://fonts.google.com/specimen/Stack+Sans+Notch
+Stack Sans Text,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque versatile multi-weight flexible variable variable-font responsive variable-weight english western european extended-latin european,200 | 300 | 400 | 500 | 600 | 700,wght: -,latin | latin-ext,Koto,1453,2084,No,2025-11-03,2025-11-04,https://fonts.google.com/specimen/Stack+Sans+Text
+Stalemate,Handwriting,,Display | Handwriting,personal casual friendly warm handwritten script organic  headline hero decorative large-text attention script cursive hand-drawn artistic informal english western european extended-latin european,400,,latin | latin-ext,Astigmatic,1253,2235,No,2012-11-03,2025-09-10,https://fonts.google.com/specimen/Stalemate
+Stalinist One,Display,Sans Serif,Display,bold decorative headline attention-grabbing creative expressive geometric humanist grotesque headline hero decorative large-text attention russian cyrillic slavic english western european extended-latin european,400,,cyrillic | latin | latin-ext,Alexey Maslov | Jovanny Lemonad,1426,459,No,2012-08-20,2025-09-02,https://fonts.google.com/specimen/Stalinist+One
+Stardos Stencil,Display,,Display,bold decorative headline attention-grabbing creative expressive  headline hero decorative large-text attention english western european,400 | 700,,latin,Vernon Adams,571,511,No,2011-07-06,2025-05-30,https://fonts.google.com/specimen/Stardos+Stencil
+Stick,Sans Serif,Sans Serif,Display,clean modern minimal professional readable neutral geometric humanist grotesque headline hero decorative large-text attention russian cyrillic slavic japanese kanji hiragana katakana english western european extended-latin european,400,,cyrillic | japanese | latin | latin-ext,Fontworks Inc.,1184,509,No,2020-12-15,2025-09-10,https://fonts.google.com/specimen/Stick
+Stick No Bills,Sans Serif,Sans Serif,Display,clean modern minimal professional readable neutral geometric humanist grotesque headline hero decorative large-text attention versatile multi-weight flexible variable variable-font responsive variable-weight english western european extended-latin european sinhala sri-lankan,200 | 300 | 400 | 500 | 600 | 700 | 800,wght: -,latin | latin-ext | sinhala,Mooniak,1066,1836,No,2021-06-29,2025-09-10,https://fonts.google.com/specimen/Stick+No+Bills
+Stint Ultra Condensed,Serif,Slab Serif,Display,elegant traditional classic refined literary editorial slab mechanical sturdy strong headline hero decorative large-text attention english western european extended-latin european,400,,latin | latin-ext,Astigmatic,1298,2140,No,2011-12-07,2025-09-11,https://fonts.google.com/specimen/Stint+Ultra+Condensed
+Stint Ultra Expanded,Serif,Slab Serif,Display,elegant traditional classic refined literary editorial slab mechanical sturdy strong headline hero decorative large-text attention english western european extended-latin european,400,,latin | latin-ext,Astigmatic,1286,1277,No,2012-02-15,2025-09-08,https://fonts.google.com/specimen/Stint+Ultra+Expanded
+Stoke,Serif,Serif,Display,elegant traditional classic refined literary editorial transitional oldstyle didone headline hero decorative large-text attention english western european extended-latin european,300 | 400,,latin | latin-ext,Nicole Fally,1362,776,No,2012-08-03,2025-09-10,https://fonts.google.com/specimen/Stoke
+Story Script,Sans Serif,Sans Serif,Display,clean modern minimal professional readable neutral geometric humanist grotesque headline hero decorative large-text attention english western european extended-latin european vietnamese,400,,latin | latin-ext | vietnamese,Lana Roulhac | Ben Buysse,1532,142,No,2025-08-25,2025-08-26,https://fonts.google.com/specimen/Story+Script
+Strait,Sans Serif,Sans Serif,Display,clean modern minimal professional readable neutral geometric humanist grotesque headline hero decorative large-text attention english western european extended-latin european,400,,latin | latin-ext,Eduardo Tunni,1320,1997,No,2012-10-26,2025-09-08,https://fonts.google.com/specimen/Strait
+Style Script,Handwriting,,Display | Handwriting,personal casual friendly warm handwritten script organic  headline hero decorative large-text attention script cursive hand-drawn artistic informal english western european extended-latin european vietnamese,400,,latin | latin-ext | vietnamese,Robert Leuschke,721,785,No,2021-05-14,2025-09-10,https://fonts.google.com/specimen/Style+Script
+Stylish,Sans Serif,Sans Serif,Display,clean modern minimal professional readable neutral geometric humanist grotesque headline hero decorative large-text attention korean hangul,400,,korean,AsiaSoft Inc,1246,1510,No,2018-02-27,2025-06-25,https://fonts.google.com/specimen/Stylish
+Sue Ellen Francisco,Handwriting,,Handwriting | Display,personal casual friendly warm handwritten script organic  script cursive hand-drawn artistic informal headline hero decorative large-text attention english western european,400,,latin,Kimberly Geswein,885,1677,No,2011-04-14,2025-09-08,https://fonts.google.com/specimen/Sue+Ellen+Francisco
+Suez One,Serif,Serif,Display,elegant traditional classic refined literary editorial transitional oldstyle didone headline hero decorative large-text attention hebrew RTL israeli english western european extended-latin european,400,,hebrew | latin | latin-ext,Michal Sahar,644,97,No,2016-03-31,2025-09-08,https://fonts.google.com/specimen/Suez+One
+Sulphur Point,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque english western european extended-latin european,300 | 400 | 700,,latin | latin-ext,Dale Sattler,1142,327,No,2019-09-25,2025-09-16,https://fonts.google.com/specimen/Sulphur+Point
+Sumana,Serif,Serif,,elegant traditional classic refined literary editorial transitional oldstyle didone hindi devanagari indian english western european extended-latin european,400 | 700,,devanagari | latin | latin-ext,Cyreal,1078,247,No,2015-04-29,2025-09-11,https://fonts.google.com/specimen/Sumana
+Sunflower,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque korean hangul,300 | 500 | 700,,korean,JIKJISOFT,945,909,No,2018-02-27,2025-09-16,https://fonts.google.com/specimen/Sunflower
+Sunshiney,Handwriting,,Handwriting,personal casual friendly warm handwritten script organic  script cursive hand-drawn artistic informal english western european,400,,latin,Sideshow,1043,1503,No,2011-01-06,2025-05-30,https://fonts.google.com/specimen/Sunshiney
+Supermercado One,Display,Sans Serif,Display,bold decorative headline attention-grabbing creative expressive geometric humanist grotesque headline hero decorative large-text attention english western european extended-latin european,400,,latin | latin-ext,James Grieshaber,989,1011,No,2011-11-02,2025-09-10,https://fonts.google.com/specimen/Supermercado+One
+Sura,Serif,Serif,,elegant traditional classic refined literary editorial transitional oldstyle didone hindi devanagari indian english western european extended-latin european,400 | 700,,devanagari | latin | latin-ext,Carolina Giovagnoli,1371,1772,No,2015-06-17,2025-09-10,https://fonts.google.com/specimen/Sura
+Suranna,Serif,Serif,,elegant traditional classic refined literary editorial transitional oldstyle didone english western european telugu indian,400,,latin | telugu,Purushoth Kumar Guttula,1094,1816,No,2015-01-12,2025-09-08,https://fonts.google.com/specimen/Suranna
+Suravaram,Serif,Serif,,elegant traditional classic refined literary editorial transitional oldstyle didone english western european telugu indian,400,,latin | telugu,Purushoth Kumar Guttula,1723,120,No,2015-01-12,2025-09-10,https://fonts.google.com/specimen/Suravaram
+Suwannaphum,Serif,Serif,,elegant traditional classic refined literary editorial transitional oldstyle didone khmer cambodian english western european,100 | 300 | 400 | 700 | 900,,khmer | latin,Danh Hong,1342,671,No,2011-03-02,2025-09-02,https://fonts.google.com/specimen/Suwannaphum
+Swanky and Moo Moo,Handwriting,,Handwriting,personal casual friendly warm handwritten script organic  script cursive hand-drawn artistic informal english western european extended-latin european,400,,latin | latin-ext,Kimberly Geswein,1076,894,No,2011-04-27,2025-09-16,https://fonts.google.com/specimen/Swanky+and+Moo+Moo
+Syncopate,Sans Serif,Sans Serif,Display,clean modern minimal professional readable neutral geometric humanist grotesque headline hero decorative large-text attention english western european extended-latin european,400 | 700,,latin | latin-ext,Astigmatic,440,818,No,2011-04-27,2025-09-08,https://fonts.google.com/specimen/Syncopate
+Syne,Sans Serif,Sans Serif,Display,clean modern minimal professional readable neutral geometric humanist grotesque headline hero decorative large-text attention variable variable-font responsive variable-weight greek english western european extended-latin european well-known common,400 | 500 | 600 | 700 | 800,wght: -,greek | latin | latin-ext,Bonjour Monde | Lucas Descroix | George Triantafyllakos,245,381,No,2020-08-25,2025-09-16,https://fonts.google.com/specimen/Syne
+Syne Mono,Monospace,,Monospace,code developer technical fixed-width terminal programming  mono fixed-width tabular data code english western european extended-latin european,400,,latin | latin-ext,Bonjour Monde | Lucas Descroix,770,715,No,2020-08-25,2025-09-16,https://fonts.google.com/specimen/Syne+Mono
+Syne Tactile,Display,,Display,bold decorative headline attention-grabbing creative expressive  headline hero decorative large-text attention english western european extended-latin european,400,,latin | latin-ext,Bonjour Monde | Lucas Descroix,1757,88,No,2020-08-25,2025-09-08,https://fonts.google.com/specimen/Syne+Tactile
+TASA Explorer,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque variable variable-font responsive variable-weight english western european extended-latin european,400 | 500 | 600 | 700 | 800,wght: -,latin | latin-ext,Local Remote | Weizhong Zhang,1714,2237,No,2025-08-25,2025-08-26,https://fonts.google.com/specimen/TASA+Explorer
+TASA Orbiter,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque variable variable-font responsive variable-weight english western european extended-latin european,400 | 500 | 600 | 700 | 800,wght: -,latin | latin-ext,Local Remote | Weizhong Zhang,1463,1379,No,2025-08-25,2025-08-26,https://fonts.google.com/specimen/TASA+Orbiter
+Tac One,Sans Serif,Sans Serif,Display,clean modern minimal professional readable neutral geometric humanist grotesque headline hero decorative large-text attention english western european extended-latin european vietnamese,400,,latin | latin-ext | math | symbols | vietnamese,Afrotype | Seyi Olusanya | Eyiyemi Adegbite | David Udoh | Mirko Velimirović,1386,337,No,2024-03-20,2025-05-30,https://fonts.google.com/specimen/Tac+One
+Tagesschrift,Display,,Display,bold decorative headline attention-grabbing creative expressive  headline hero decorative large-text attention english western european extended-latin european,400,,latin | latin-ext,Yanone,1742,1664,No,2025-04-17,2025-04-23,https://fonts.google.com/specimen/Tagesschrift
+Tai Heritage Pro,Serif,Serif,,elegant traditional classic refined literary editorial transitional oldstyle didone english western european extended-latin european vietnamese,400 | 700,,latin | latin-ext | tai-viet | vietnamese,SIL International,1673,2093,No,2022-05-12,2025-09-08,https://fonts.google.com/specimen/Tai+Heritage+Pro
+Tajawal,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque versatile multi-weight flexible arabic RTL middle-east english western european popular widely-used,200 | 300 | 400 | 500 | 700 | 800 | 900,,arabic | latin,Boutros Fonts | Mourad Boutros | Soulaf Khalifeh,112,177,No,2018-04-04,2025-09-08,https://fonts.google.com/specimen/Tajawal
+Tangerine,Handwriting,,Handwriting,personal casual friendly warm handwritten script organic  script cursive hand-drawn artistic informal english western european,400 | 700,,latin,Toshi Omagari,333,827,No,2010-06-08,2025-09-11,https://fonts.google.com/specimen/Tangerine
+Tapestry,Handwriting,Serif,Display,personal casual friendly warm handwritten script organic transitional oldstyle didone headline hero decorative large-text attention english western european extended-latin european vietnamese,400,,latin | latin-ext | vietnamese,Robert Leuschke,1514,137,No,2022-04-07,2025-09-16,https://fonts.google.com/specimen/Tapestry
+Taprom,Display,,Display,bold decorative headline attention-grabbing creative expressive  headline hero decorative large-text attention khmer cambodian english western european,400,,khmer | latin,Danh Hong | Neapolitan,1667,979,No,2011-03-02,2025-09-08,https://fonts.google.com/specimen/Taprom
+Tauri,Sans Serif,Sans Serif,Display,clean modern minimal professional readable neutral geometric humanist grotesque headline hero decorative large-text attention english western european extended-latin european,400,,latin | latin-ext,Yvonne Schüttler,1166,1363,No,2013-02-27,2025-09-10,https://fonts.google.com/specimen/Tauri
+Taviraj,Serif,Serif,Display,elegant traditional classic refined literary editorial transitional oldstyle didone headline hero decorative large-text attention versatile multi-weight flexible italic english western european extended-latin european thai southeast-asia vietnamese,100 | 100i | 200 | 200i | 300 | 300i | 400 | 400i | 500 | 500i | 600 | 600i | 700 | 700i | 800 | 800i | 900 | 900i,,latin | latin-ext | thai | vietnamese,Cadson Demak,447,2176,No,2016-06-15,2025-09-04,https://fonts.google.com/specimen/Taviraj
+Teachers,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque italic variable variable-font responsive variable-weight greek extended english western european extended-latin european,400 | 400i | 500 | 500i | 600 | 600i | 700 | 700i | 800 | 800i,wght: -,greek-ext | latin | latin-ext,Alfredo Marco Pradil | Chank Diesel,1061,1646,No,2024-05-01,2025-09-08,https://fonts.google.com/specimen/Teachers
+Teko,Sans Serif,Sans Serif,Display,clean modern minimal professional readable neutral geometric humanist grotesque headline hero decorative large-text attention variable variable-font responsive variable-weight hindi devanagari indian english western european extended-latin european popular widely-used,300 | 400 | 500 | 600 | 700,wght: -,devanagari | latin | latin-ext,Indian Type Foundry,140,1595,No,2014-06-25,2025-09-16,https://fonts.google.com/specimen/Teko
+Tektur,Display,Sans Serif,Display,bold decorative headline attention-grabbing creative expressive geometric humanist grotesque headline hero decorative large-text attention versatile multi-weight flexible variable variable-font responsive variable-weight variable-width russian cyrillic slavic cyrillic extended greek english western european extended-latin european vietnamese multilingual international,400 | 500 | 600 | 700 | 800 | 900,wdth: - | wght: -,cyrillic | cyrillic-ext | greek | latin | latin-ext | vietnamese,Adam Jagosz,833,1443,No,2023-06-15,2025-09-16,https://fonts.google.com/specimen/Tektur
+Telex,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque english western european extended-latin european,400,,latin | latin-ext,Huerta Tipográfica,699,1587,No,2012-01-18,2025-09-16,https://fonts.google.com/specimen/Telex
+Tenali Ramakrishna,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque english western european telugu indian,400,,latin | telugu,Appaji Ambarisha Darbha,1067,2065,No,2014-12-10,2025-09-02,https://fonts.google.com/specimen/Tenali+Ramakrishna
+Tenor Sans,Sans Serif,Sans Serif,Display,clean modern minimal professional readable neutral geometric humanist grotesque headline hero decorative large-text attention russian cyrillic slavic english western european extended-latin european well-known common,400,,cyrillic | latin | latin-ext,Denis Masharov,256,561,No,2011-05-25,2025-09-02,https://fonts.google.com/specimen/Tenor+Sans
+Text Me One,Sans Serif,Sans Serif,Display,clean modern minimal professional readable neutral geometric humanist grotesque headline hero decorative large-text attention english western european extended-latin european,400,,latin | latin-ext,Julia Petretta,1385,2008,No,2012-10-31,2025-09-16,https://fonts.google.com/specimen/Text+Me+One
+Texturina,Serif,Serif,Display,elegant traditional classic refined literary editorial transitional oldstyle didone headline hero decorative large-text attention versatile multi-weight flexible italic variable variable-font responsive variable-weight english western european extended-latin european vietnamese,100 | 100i | 200 | 200i | 300 | 300i | 400 | 400i | 500 | 500i | 600 | 600i | 700 | 700i | 800 | 800i | 900 | 900i,opsz: - | wght: -,latin | latin-ext | vietnamese,Guillermo Torres | Omnibus-Type,1374,1875,No,2020-10-23,2025-09-16,https://fonts.google.com/specimen/Texturina
+Thasadith,Sans Serif,Sans Serif,Display,clean modern minimal professional readable neutral geometric humanist grotesque headline hero decorative large-text attention italic english western european extended-latin european thai southeast-asia vietnamese,400 | 400i | 700 | 700i,,latin | latin-ext | thai | vietnamese,Cadson Demak,904,895,No,2018-09-10,2025-09-10,https://fonts.google.com/specimen/Thasadith
+The Girl Next Door,Handwriting,,Display | Handwriting,personal casual friendly warm handwritten script organic  headline hero decorative large-text attention script cursive hand-drawn artistic informal english western european extended-latin european,400,,latin | latin-ext,Kimberly Geswein,994,794,No,2011-04-20,2025-09-16,https://fonts.google.com/specimen/The+Girl+Next+Door
+The Nautigal,Handwriting,,Display | Handwriting,personal casual friendly warm handwritten script organic  headline hero decorative large-text attention script cursive hand-drawn artistic informal english western european extended-latin european vietnamese,400 | 700,,latin | latin-ext | vietnamese,Robert Leuschke,1224,1552,No,2021-11-18,2025-09-16,https://fonts.google.com/specimen/The+Nautigal
+Tienne,Serif,Serif,,elegant traditional classic refined literary editorial transitional oldstyle didone english western european,400 | 700 | 900,,latin,Vernon Adams,929,507,No,2011-07-27,2025-09-04,https://fonts.google.com/specimen/Tienne
+TikTok Sans,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque versatile multi-weight flexible variable variable-font responsive variable-weight variable-width variable-slant russian cyrillic slavic cyrillic extended greek english western european extended-latin european vietnamese multilingual international,300 | 400 | 500 | 600 | 700 | 800 | 900,opsz: - | slnt: - | wdth: - | wght: -,cyrillic | cyrillic-ext | greek | latin | latin-ext | vietnamese,Grilli Type | Contrast Foundry | Type Network,1008,927,No,1970-01-20,2025-09-11,https://fonts.google.com/specimen/TikTok+Sans
+Tillana,Display,,Display,bold decorative headline attention-grabbing creative expressive  headline hero decorative large-text attention hindi devanagari indian english western european extended-latin european,400 | 500 | 600 | 700 | 800,,devanagari | latin | latin-ext,Indian Type Foundry,1375,1481,No,2015-06-03,2025-09-11,https://fonts.google.com/specimen/Tillana
+Tilt Neon,Display,Sans Serif,Display,bold decorative headline attention-grabbing creative expressive geometric humanist grotesque headline hero decorative large-text attention variable variable-font responsive english western european extended-latin european vietnamese,400,XROT: - | YROT: -,latin | latin-ext | vietnamese,Andy Clymer,724,1155,No,2022-12-01,2025-09-04,https://fonts.google.com/specimen/Tilt+Neon
+Tilt Prism,Display,Sans Serif,Display,bold decorative headline attention-grabbing creative expressive geometric humanist grotesque headline hero decorative large-text attention variable variable-font responsive english western european extended-latin european vietnamese,400,XROT: - | YROT: -,latin | latin-ext | vietnamese,Andy Clymer,1443,2238,No,2022-12-01,2025-09-10,https://fonts.google.com/specimen/Tilt+Prism
+Tilt Warp,Display,Sans Serif,Display,bold decorative headline attention-grabbing creative expressive geometric humanist grotesque headline hero decorative large-text attention variable variable-font responsive english western european extended-latin european vietnamese,400,XROT: - | YROT: -,latin | latin-ext | vietnamese,Andy Clymer,518,2119,No,2022-12-01,2025-09-04,https://fonts.google.com/specimen/Tilt+Warp
+Timmana,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque english western european telugu indian,400,,latin | telugu,Appaji Ambarisha Darbha,1150,706,No,2015-01-12,2025-09-16,https://fonts.google.com/specimen/Timmana
+Tinos,Serif,Serif,,elegant traditional classic refined literary editorial transitional oldstyle didone italic russian cyrillic slavic cyrillic extended greek greek extended hebrew RTL israeli english western european extended-latin european vietnamese multilingual international well-known common,400 | 400i | 700 | 700i,,cyrillic | cyrillic-ext | greek | greek-ext | hebrew | latin | latin-ext | vietnamese,Steve Matteson,224,2201,No,2010-11-18,2025-09-08,https://fonts.google.com/specimen/Tinos
+Tiny5,Sans Serif,Sans Serif,Display,clean modern minimal professional readable neutral geometric humanist grotesque headline hero decorative large-text attention russian cyrillic slavic cyrillic extended greek english western european extended-latin european,400,,cyrillic | cyrillic-ext | greek | latin | latin-ext,Stefan Schmidt,1352,1831,No,2024-05-29,2025-05-30,https://fonts.google.com/specimen/Tiny5
+Tiro Bangla,Serif,Serif,,elegant traditional classic refined literary editorial transitional oldstyle didone italic bengali bangladeshi indian english western european extended-latin european,400 | 400i,,bengali | latin | latin-ext,Tiro Typeworks | John Hudson | Fiona Ross | Neelakash Kshetrimayum,658,1783,No,2022-05-25,2025-05-30,https://fonts.google.com/specimen/Tiro+Bangla
+Tiro Devanagari Hindi,Serif,Serif,,elegant traditional classic refined literary editorial transitional oldstyle didone italic hindi devanagari indian english western european extended-latin european,400 | 400i,,devanagari | latin | latin-ext,Tiro Typeworks | John Hudson | Fiona Ross | Paul Hanslow,972,1470,No,2022-05-25,2025-05-30,https://fonts.google.com/specimen/Tiro+Devanagari+Hindi
+Tiro Devanagari Marathi,Serif,Serif,,elegant traditional classic refined literary editorial transitional oldstyle didone italic hindi devanagari indian english western european extended-latin european,400 | 400i,,devanagari | latin | latin-ext,Tiro Typeworks | John Hudson | Fiona Ross | Paul Hanslow,1528,2199,No,2022-05-25,2025-05-30,https://fonts.google.com/specimen/Tiro+Devanagari+Marathi
+Tiro Devanagari Sanskrit,Serif,Serif,,elegant traditional classic refined literary editorial transitional oldstyle didone italic hindi devanagari indian english western european extended-latin european,400 | 400i,,devanagari | latin | latin-ext,Tiro Typeworks | John Hudson | Fiona Ross | Paul Hanslow,1353,2027,No,2022-05-25,2025-05-30,https://fonts.google.com/specimen/Tiro+Devanagari+Sanskrit
+Tiro Gurmukhi,Serif,Serif,,elegant traditional classic refined literary editorial transitional oldstyle didone italic punjabi gurmukhi indian english western european extended-latin european,400 | 400i,,gurmukhi | latin | latin-ext,Tiro Typeworks | John Hudson | Fiona Ross | Paul Hanslow,1547,722,No,2022-05-25,2025-05-30,https://fonts.google.com/specimen/Tiro+Gurmukhi
+Tiro Kannada,Serif,Serif,,elegant traditional classic refined literary editorial transitional oldstyle didone italic kannada indian english western european extended-latin european,400 | 400i,,kannada | latin | latin-ext,Tiro Typeworks | John Hudson | Fiona Ross | Kaja Słojewska,1653,1757,No,2022-05-25,2025-05-30,https://fonts.google.com/specimen/Tiro+Kannada
+Tiro Tamil,Serif,Serif,,elegant traditional classic refined literary editorial transitional oldstyle didone italic english western european extended-latin european tamil indian,400 | 400i,,latin | latin-ext | tamil,Tiro Typeworks | Fernando Mello | Fiona Ross | Kaja Słojewska,1660,1275,No,2022-05-25,2025-09-08,https://fonts.google.com/specimen/Tiro+Tamil
+Tiro Telugu,Serif,Serif,,elegant traditional classic refined literary editorial transitional oldstyle didone italic english western european extended-latin european telugu indian,400 | 400i,,latin | latin-ext | telugu,Tiro Typeworks | John Hudson | Fiona Ross | Kaja Słojewska,1536,1200,No,2022-05-25,2025-05-30,https://fonts.google.com/specimen/Tiro+Telugu
+Tirra,Sans Serif,Sans Serif,Handwriting,clean modern minimal professional readable neutral geometric humanist grotesque script cursive hand-drawn artistic informal versatile multi-weight flexible english western european extended-latin european,400 | 500 | 600 | 700 | 800 | 900,,latin | latin-ext | tifinagh,SIL International,2040,2107,No,2025-08-25,2025-08-26,https://fonts.google.com/specimen/Tirra
+Titan One,Display,Sans Serif,Display,bold decorative headline attention-grabbing creative expressive geometric humanist grotesque headline hero decorative large-text attention english western european extended-latin european well-known common,400,,latin | latin-ext,Rodrigo Fuenzalida,185,1796,No,2012-01-11,2025-09-02,https://fonts.google.com/specimen/Titan+One
+Titillium Web,Sans Serif,Sans Serif,Display,clean modern minimal professional readable neutral geometric humanist grotesque headline hero decorative large-text attention versatile multi-weight flexible italic english western european extended-latin european popular widely-used,200 | 200i | 300 | 300i | 400 | 400i | 600 | 600i | 700 | 700i | 900,,latin | latin-ext,Accademia di Belle Arti di Urbino,52,708,No,2012-10-01,2025-09-10,https://fonts.google.com/specimen/Titillium+Web
+Tomorrow,Sans Serif,Sans Serif,Display,clean modern minimal professional readable neutral geometric humanist grotesque headline hero decorative large-text attention versatile multi-weight flexible italic english western european extended-latin european,100 | 100i | 200 | 200i | 300 | 300i | 400 | 400i | 500 | 500i | 600 | 600i | 700 | 700i | 800 | 800i | 900 | 900i,,latin | latin-ext,Tony de Marco | Monica Rizzolli,462,2016,No,2019-10-02,2025-09-11,https://fonts.google.com/specimen/Tomorrow
+Tourney,Display,Sans Serif,Display,bold decorative headline attention-grabbing creative expressive geometric humanist grotesque headline hero decorative large-text attention versatile multi-weight flexible italic variable variable-font responsive variable-weight variable-width english western european extended-latin european vietnamese,100 | 100i | 200 | 200i | 300 | 300i | 400 | 400i | 500 | 500i | 600 | 600i | 700 | 700i | 800 | 800i | 900 | 900i,wdth: - | wght: -,latin | latin-ext | vietnamese,Tyler Finck | ETC,1396,1979,No,2021-04-29,2025-09-10,https://fonts.google.com/specimen/Tourney
+Trade Winds,Display,,Display,bold decorative headline attention-grabbing creative expressive  headline hero decorative large-text attention english western european,400,,latin,Sideshow,1160,2135,No,2011-12-19,2025-09-11,https://fonts.google.com/specimen/Trade+Winds
+Train One,Display,,Display,bold decorative headline attention-grabbing creative expressive  headline hero decorative large-text attention russian cyrillic slavic japanese kanji hiragana katakana english western european extended-latin european,400,,cyrillic | japanese | latin | latin-ext,Fontworks Inc.,1074,2233,No,2020-12-15,2025-09-04,https://fonts.google.com/specimen/Train+One
+Triodion,Display,,Display,bold decorative headline attention-grabbing creative expressive  headline hero decorative large-text attention russian cyrillic slavic cyrillic extended english western european,400,,cyrillic | cyrillic-ext | latin,Aleksandr Andreev,1710,805,No,2024-12-05,2025-05-30,https://fonts.google.com/specimen/Triodion
+Trirong,Serif,Serif,Display,elegant traditional classic refined literary editorial transitional oldstyle didone headline hero decorative large-text attention versatile multi-weight flexible italic english western european extended-latin european thai southeast-asia vietnamese,100 | 100i | 200 | 200i | 300 | 300i | 400 | 400i | 500 | 500i | 600 | 600i | 700 | 700i | 800 | 800i | 900 | 900i,,latin | latin-ext | thai | vietnamese,Cadson Demak,670,981,No,2016-06-15,2025-09-11,https://fonts.google.com/specimen/Trirong
+Trispace,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque versatile multi-weight flexible variable variable-font responsive variable-weight variable-width english western european extended-latin european vietnamese,100 | 200 | 300 | 400 | 500 | 600 | 700 | 800,wdth: - | wght: -,latin | latin-ext | vietnamese,Tyler Finck | ETC,1315,1310,No,2020-09-25,2025-09-08,https://fonts.google.com/specimen/Trispace
+Trocchi,Serif,Serif,Display,elegant traditional classic refined literary editorial transitional oldstyle didone headline hero decorative large-text attention english western european extended-latin european,400,,latin | latin-ext,Vernon Adams,842,1131,No,2012-04-04,2025-09-10,https://fonts.google.com/specimen/Trocchi
+Trochut,Display,Sans Serif,Display,bold decorative headline attention-grabbing creative expressive geometric humanist grotesque headline hero decorative large-text attention italic english western european,400 | 400i | 700,,latin,Andreu Balius,1641,2120,No,2012-01-18,2025-09-10,https://fonts.google.com/specimen/Trochut
+Truculenta,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque versatile multi-weight flexible variable variable-font responsive variable-weight variable-width english western european extended-latin european vietnamese,100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900,opsz: - | wdth: - | wght: -,latin | latin-ext | vietnamese,Omnibus-Type,1013,1792,No,2020-12-16,2025-09-16,https://fonts.google.com/specimen/Truculenta
+Trykker,Serif,Serif,,elegant traditional classic refined literary editorial transitional oldstyle didone english western european extended-latin european,400,,latin | latin-ext,Magnus Gaarde,1438,1682,No,2011-12-19,2025-09-10,https://fonts.google.com/specimen/Trykker
+Tsukimi Rounded,Sans Serif,Sans Serif,Display,clean modern minimal professional readable neutral geometric humanist grotesque headline hero decorative large-text attention japanese kanji hiragana katakana english western european extended-latin european,300 | 400 | 500 | 600 | 700,,japanese | latin | latin-ext,Takashi Funayama,1589,1353,No,2020-12-14,2025-09-10,https://fonts.google.com/specimen/Tsukimi+Rounded
+Tuffy,Sans Serif,Sans Serif,Display,clean modern minimal professional readable neutral geometric humanist grotesque headline hero decorative large-text attention italic russian cyrillic slavic cyrillic extended greek greek extended english western european extended-latin european multilingual international,400 | 400i | 700 | 700i,,cyrillic | cyrillic-ext | greek | greek-ext | latin | latin-ext | phoenician,Thatcher Ulrich,1870,241,No,2025-04-17,2025-04-23,https://fonts.google.com/specimen/Tuffy
+Tulpen One,Display,Sans Serif,Display,bold decorative headline attention-grabbing creative expressive geometric humanist grotesque headline hero decorative large-text attention english western european,400,,latin,Naima Ben Ayed,1522,1626,No,2011-08-03,2025-06-02,https://fonts.google.com/specimen/Tulpen+One
+Turret Road,Display,Sans Serif,Display,bold decorative headline attention-grabbing creative expressive geometric humanist grotesque headline hero decorative large-text attention versatile multi-weight flexible english western european extended-latin european,200 | 300 | 400 | 500 | 700 | 800,,latin | latin-ext,Dale Sattler,806,910,No,2019-09-03,2025-09-16,https://fonts.google.com/specimen/Turret+Road
+Twinkle Star,Handwriting,,Display | Handwriting,personal casual friendly warm handwritten script organic  headline hero decorative large-text attention script cursive hand-drawn artistic informal english western european extended-latin european vietnamese,400,,latin | latin-ext | vietnamese,Robert Leuschke,1635,1699,No,2021-11-26,2025-09-11,https://fonts.google.com/specimen/Twinkle+Star
+Ubuntu,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque italic russian cyrillic slavic cyrillic extended greek greek extended english western european extended-latin european multilingual international top-popular trending most-used,300 | 300i | 400 | 400i | 500 | 500i | 700 | 700i,,cyrillic | cyrillic-ext | greek | greek-ext | latin | latin-ext,Dalton Maag,28,1430,No,2010-12-15,2025-09-02,https://fonts.google.com/specimen/Ubuntu
+Ubuntu Condensed,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque russian cyrillic slavic cyrillic extended greek greek extended english western european extended-latin european multilingual international,400,,cyrillic | cyrillic-ext | greek | greek-ext | latin | latin-ext,Dalton Maag,309,1719,No,2011-10-05,2025-09-02,https://fonts.google.com/specimen/Ubuntu+Condensed
+Ubuntu Mono,Monospace,Sans Serif,Monospace,code developer technical fixed-width terminal programming geometric humanist grotesque mono fixed-width tabular data code italic russian cyrillic slavic cyrillic extended greek greek extended english western european extended-latin european multilingual international,400 | 400i | 700 | 700i,,cyrillic | cyrillic-ext | greek | greek-ext | latin | latin-ext,Dalton Maag,414,595,No,2011-10-05,2025-09-02,https://fonts.google.com/specimen/Ubuntu+Mono
+Ubuntu Sans,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque versatile multi-weight flexible italic variable variable-font responsive variable-weight variable-width russian cyrillic slavic cyrillic extended greek greek extended english western european extended-latin european multilingual international,100 | 100i | 200 | 200i | 300 | 300i | 400 | 400i | 500 | 500i | 600 | 600i | 700 | 700i | 800 | 800i,wdth: - | wght: -,cyrillic | cyrillic-ext | greek | greek-ext | latin | latin-ext,Dalton Maag,600,94,No,2024-05-01,2025-09-02,https://fonts.google.com/specimen/Ubuntu+Sans
+Ubuntu Sans Mono,Monospace,,Monospace,code developer technical fixed-width terminal programming  mono fixed-width tabular data code italic variable variable-font responsive variable-weight russian cyrillic slavic cyrillic extended greek greek extended english western european extended-latin european multilingual international,400 | 400i | 500 | 500i | 600 | 600i | 700 | 700i,wght: -,cyrillic | cyrillic-ext | greek | greek-ext | latin | latin-ext,Dalton Maag,1668,803,No,2024-05-01,2025-09-02,https://fonts.google.com/specimen/Ubuntu+Sans+Mono
+Uchen,Serif,Serif,Display,elegant traditional classic refined literary editorial transitional oldstyle didone headline hero decorative large-text attention english western european tibetan,400,,latin | tibetan,Christopher J. Fynn,1583,1567,No,2019-12-07,2025-09-16,https://fonts.google.com/specimen/Uchen
+Ultra,Serif,Serif,Display,elegant traditional classic refined literary editorial transitional oldstyle didone headline hero decorative large-text attention english western european extended-latin european,400,,latin | latin-ext,Astigmatic,469,1990,No,2011-05-09,2025-06-02,https://fonts.google.com/specimen/Ultra
+Unbounded,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque versatile multi-weight flexible variable variable-font responsive variable-weight russian cyrillic slavic cyrillic extended english western european extended-latin european vietnamese well-known common,200 | 300 | 400 | 500 | 600 | 700 | 800 | 900,wght: -,cyrillic | cyrillic-ext | latin | latin-ext | vietnamese,NaN,183,773,No,2022-11-07,2025-09-11,https://fonts.google.com/specimen/Unbounded
+Uncial Antiqua,Display,,Display,bold decorative headline attention-grabbing creative expressive  headline hero decorative large-text attention english western european extended-latin european,400,,latin | latin-ext,Astigmatic,823,2111,No,2011-12-19,2025-09-16,https://fonts.google.com/specimen/Uncial+Antiqua
+Underdog,Display,,Display,bold decorative headline attention-grabbing creative expressive  headline hero decorative large-text attention russian cyrillic slavic english western european extended-latin european,400,,cyrillic | latin | latin-ext,Sergey Steblina | Jovanny Lemonad,1245,1340,No,2012-09-23,2025-09-10,https://fonts.google.com/specimen/Underdog
+Unica One,Display,Sans Serif,Display,bold decorative headline attention-grabbing creative expressive geometric humanist grotesque headline hero decorative large-text attention english western european extended-latin european vietnamese,400,,latin | latin-ext | vietnamese,Eduardo Tunni,456,1726,No,2012-10-26,2025-09-08,https://fonts.google.com/specimen/Unica+One
+UnifrakturCook,Display,,Handwriting | Display,bold decorative headline attention-grabbing creative expressive  script cursive hand-drawn artistic informal headline hero decorative large-text attention english western european,700,,latin,j. 'mach' wust,1004,325,No,2010-12-07,2025-09-04,https://fonts.google.com/specimen/UnifrakturCook
+UnifrakturMaguntia,Display,,Handwriting | Display,bold decorative headline attention-grabbing creative expressive  script cursive hand-drawn artistic informal headline hero decorative large-text attention english western european,400,,latin,j. 'mach' wust,637,1612,No,2010-11-30,2025-09-02,https://fonts.google.com/specimen/UnifrakturMaguntia
+Unkempt,Display,,Display | Handwriting,bold decorative headline attention-grabbing creative expressive  headline hero decorative large-text attention script cursive hand-drawn artistic informal english western european,400 | 700,,latin,Sideshow,864,209,No,2011-12-05,2025-06-02,https://fonts.google.com/specimen/Unkempt
+Unlock,Display,Serif,Display,bold decorative headline attention-grabbing creative expressive transitional oldstyle didone headline hero decorative large-text attention english western european extended-latin european,400,,latin | latin-ext,Eduardo Tunni,1268,607,No,2011-11-30,2025-09-08,https://fonts.google.com/specimen/Unlock
+Unna,Serif,Serif,Display,elegant traditional classic refined literary editorial transitional oldstyle didone headline hero decorative large-text attention italic english western european extended-latin european well-known common,400 | 400i | 700 | 700i,,latin | latin-ext,Omnibus-Type,217,1981,No,2011-07-20,2025-09-11,https://fonts.google.com/specimen/Unna
+UoqMunThenKhung,Serif,Serif,,elegant traditional classic refined literary editorial transitional oldstyle didone chinese traditional russian cyrillic slavic english western european,400,,chinese-traditional | cyrillic | latin | symbols2,Moonlit Owen,1877,372,No,2025-06-23,2025-06-25,https://fonts.google.com/specimen/UoqMunThenKhung
+Updock,Handwriting,,Handwriting | Display,personal casual friendly warm handwritten script organic  script cursive hand-drawn artistic informal headline hero decorative large-text attention english western european extended-latin european vietnamese,400,,latin | latin-ext | vietnamese,Robert Leuschke,1544,1422,No,2022-03-23,2025-09-02,https://fonts.google.com/specimen/Updock
+Urbanist,Sans Serif,Sans Serif,Display,clean modern minimal professional readable neutral geometric humanist grotesque headline hero decorative large-text attention versatile multi-weight flexible italic variable variable-font responsive variable-weight english western european extended-latin european popular widely-used,100 | 100i | 200 | 200i | 300 | 300i | 400 | 400i | 500 | 500i | 600 | 600i | 700 | 700i | 800 | 800i | 900 | 900i,wght: -,latin | latin-ext,Corey Hu,121,1615,No,2021-06-02,2025-09-16,https://fonts.google.com/specimen/Urbanist
+VT323,Monospace,,Monospace,code developer technical fixed-width terminal programming  mono fixed-width tabular data code english western european extended-latin european vietnamese,400,,latin | latin-ext | vietnamese,Peter Hull,375,1737,No,2011-03-02,2025-09-16,https://fonts.google.com/specimen/VT323
+Vampiro One,Display,,Display,bold decorative headline attention-grabbing creative expressive  headline hero decorative large-text attention english western european extended-latin european,400,,latin | latin-ext,Riccardo De Franceschi,1156,1551,No,2012-11-26,2025-09-04,https://fonts.google.com/specimen/Vampiro+One
+Varela,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque english western european extended-latin european,400,,latin | latin-ext,Joe Prince,451,1602,No,2011-06-29,2025-09-10,https://fonts.google.com/specimen/Varela
+Varela Round,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque hebrew RTL israeli english western european extended-latin european vietnamese well-known common,400,,hebrew | latin | latin-ext | vietnamese,Joe Prince,156,1249,No,2011-07-13,2025-09-11,https://fonts.google.com/specimen/Varela+Round
+Varta,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque variable variable-font responsive variable-weight english western european extended-latin european vietnamese,300 | 400 | 500 | 600 | 700,wght: -,latin | latin-ext | vietnamese,Joana Correia | Viktoriya Grabowska | Eben Sorkin,1119,304,No,2020-06-11,2025-09-10,https://fonts.google.com/specimen/Varta
+Vast Shadow,Serif,Slab Serif,Display,elegant traditional classic refined literary editorial slab mechanical sturdy strong headline hero decorative large-text attention english western european,400,,latin,Nicole Fally,924,1597,No,2011-10-12,2025-09-10,https://fonts.google.com/specimen/Vast+Shadow
+Vazirmatn,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque versatile multi-weight flexible variable variable-font responsive variable-weight arabic RTL middle-east english western european extended-latin european,100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900,wght: -,arabic | latin | latin-ext,Saber Rastikerdar,591,2290,No,2022-03-16,2025-09-10,https://fonts.google.com/specimen/Vazirmatn
+Vend Sans,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque italic variable variable-font responsive variable-weight english western european extended-latin european,300 | 300i | 400 | 400i | 500 | 500i | 600 | 600i | 700 | 700i,wght: -,latin | latin-ext,Bloom Type Foundry | Baptiste Guesnon,1296,1511,No,2025-08-25,2025-08-26,https://fonts.google.com/specimen/Vend+Sans
+Vesper Libre,Serif,Serif,,elegant traditional classic refined literary editorial transitional oldstyle didone hindi devanagari indian english western european extended-latin european,400 | 500 | 700 | 900,,devanagari | latin | latin-ext,Mota Italic,834,454,No,2014-07-14,2025-09-04,https://fonts.google.com/specimen/Vesper+Libre
+Viaoda Libre,Display,Serif,Display,bold decorative headline attention-grabbing creative expressive transitional oldstyle didone headline hero decorative large-text attention russian cyrillic slavic cyrillic extended english western european extended-latin european vietnamese,400,,cyrillic | cyrillic-ext | latin | latin-ext | vietnamese,Gydient | ViệtAnh Nguyễn,938,1387,No,2019-11-05,2025-09-08,https://fonts.google.com/specimen/Viaoda+Libre
+Vibes,Display,,Display,bold decorative headline attention-grabbing creative expressive  headline hero decorative large-text attention arabic RTL middle-east english western european,400,,arabic | latin,AbdElmomen Kadhim (blueMix),1645,900,No,2019-04-23,2025-09-10,https://fonts.google.com/specimen/Vibes
+Vibur,Handwriting,,Handwriting,personal casual friendly warm handwritten script organic  script cursive hand-drawn artistic informal english western european,400,,latin,Johan Kallas,900,570,No,2010-12-15,2025-09-10,https://fonts.google.com/specimen/Vibur
+Victor Mono,Monospace,Sans Serif,Monospace,code developer technical fixed-width terminal programming geometric humanist grotesque mono fixed-width tabular data code versatile multi-weight flexible italic variable variable-font responsive variable-weight russian cyrillic slavic cyrillic extended greek english western european extended-latin european vietnamese multilingual international,100 | 100i | 200 | 200i | 300 | 300i | 400 | 400i | 500 | 500i | 600 | 600i | 700 | 700i,wght: -,cyrillic | cyrillic-ext | greek | latin | latin-ext | vietnamese,Rune Bjørnerås,1299,554,No,2023-06-20,2025-09-04,https://fonts.google.com/specimen/Victor+Mono
+Vidaloka,Serif,Serif,,elegant traditional classic refined literary editorial transitional oldstyle didone english western european,400,,latin,Cyreal,443,1444,No,2011-08-17,2025-09-16,https://fonts.google.com/specimen/Vidaloka
+Viga,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque english western european extended-latin european well-known common,400,,latin | latin-ext,Fontstage,276,767,No,2011-12-07,2025-09-16,https://fonts.google.com/specimen/Viga
+Vina Sans,Display,Sans Serif,Display,bold decorative headline attention-grabbing creative expressive geometric humanist grotesque headline hero decorative large-text attention english western european extended-latin european vietnamese,400,,latin | latin-ext | vietnamese,Nguyen Type,669,384,No,2023-03-15,2025-09-04,https://fonts.google.com/specimen/Vina+Sans
+Voces,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque english western european extended-latin european,400,,latin | latin-ext,Ana Paula Megda | Pablo Ugerman,951,261,No,2012-02-22,2025-09-16,https://fonts.google.com/specimen/Voces
+Volkhov,Serif,Serif,,elegant traditional classic refined literary editorial transitional oldstyle didone italic english western european,400 | 400i | 700 | 700i,,latin,Cyreal,431,1289,No,2011-08-17,2025-09-10,https://fonts.google.com/specimen/Volkhov
+Vollkorn,Serif,Serif,,elegant traditional classic refined literary editorial transitional oldstyle didone versatile multi-weight flexible italic variable variable-font responsive variable-weight russian cyrillic slavic cyrillic extended greek english western european extended-latin european vietnamese multilingual international well-known common,400 | 400i | 500 | 500i | 600 | 600i | 700 | 700i | 800 | 800i | 900 | 900i,wght: -,cyrillic | cyrillic-ext | greek | latin | latin-ext | vietnamese,Friedrich Althausen,197,1621,No,2010-09-08,2025-09-11,https://fonts.google.com/specimen/Vollkorn
+Vollkorn SC,Serif,Serif,,elegant traditional classic refined literary editorial transitional oldstyle didone russian cyrillic slavic cyrillic extended english western european extended-latin european vietnamese,400 | 600 | 700 | 900,,cyrillic | cyrillic-ext | latin | latin-ext | vietnamese,Friedrich Althausen,1009,937,No,2017-09-08,2025-09-11,https://fonts.google.com/specimen/Vollkorn+SC
+Voltaire,Sans Serif,Sans Serif,Display,clean modern minimal professional readable neutral geometric humanist grotesque headline hero decorative large-text attention english western european extended-latin european vietnamese,400,,latin | latin-ext | vietnamese,Yvonne Schüttler,872,611,No,2011-08-17,2025-09-10,https://fonts.google.com/specimen/Voltaire
+Vujahday Script,Handwriting,,Handwriting | Display,personal casual friendly warm handwritten script organic  script cursive hand-drawn artistic informal headline hero decorative large-text attention english western european extended-latin european vietnamese,400,,latin | latin-ext | vietnamese,Robert Leuschke,878,1619,No,2021-11-18,2025-09-04,https://fonts.google.com/specimen/Vujahday+Script
+WDXL Lubrifont JP N,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque russian cyrillic slavic japanese kanji hiragana katakana english western european extended-latin european,400,,cyrillic | japanese | latin | latin-ext | symbols2,NightFurySL2001,1656,2077,No,2025-06-11,2026-01-06,https://fonts.google.com/specimen/WDXL+Lubrifont+JP+N
+WDXL Lubrifont SC,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque chinese simplified mandarin russian cyrillic slavic english western european extended-latin european,400,,chinese-simplified | cyrillic | latin | latin-ext | symbols2,NightFurySL2001,1661,380,No,2025-06-11,2026-01-06,https://fonts.google.com/specimen/WDXL+Lubrifont+SC
+WDXL Lubrifont TC,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque chinese traditional russian cyrillic slavic english western european extended-latin european,400,,chinese-traditional | cyrillic | latin | latin-ext | symbols2,NightFurySL2001,1724,2276,No,2025-05-20,2026-01-06,https://fonts.google.com/specimen/WDXL+Lubrifont+TC
+Waiting for the Sunrise,Handwriting,,Display | Handwriting,personal casual friendly warm handwritten script organic  headline hero decorative large-text attention script cursive hand-drawn artistic informal english western european extended-latin european,400,,latin | latin-ext,Kimberly Geswein,758,2082,No,2011-04-14,2025-09-16,https://fonts.google.com/specimen/Waiting+for+the+Sunrise
+Wallpoet,Display,Sans Serif,Display,bold decorative headline attention-grabbing creative expressive geometric humanist grotesque headline hero decorative large-text attention english western european,400,,latin,Lars Berggren,671,366,No,2011-04-27,2025-06-02,https://fonts.google.com/specimen/Wallpoet
+Walter Turncoat,Handwriting,,Display | Handwriting,personal casual friendly warm handwritten script organic  headline hero decorative large-text attention script cursive hand-drawn artistic informal english western european,400,,latin,Sideshow,901,1948,No,2011-01-06,2025-06-02,https://fonts.google.com/specimen/Walter+Turncoat
+Warnes,Display,,Handwriting | Display,bold decorative headline attention-grabbing creative expressive  script cursive hand-drawn artistic informal headline hero decorative large-text attention english western european extended-latin european,400,,latin | latin-ext,Eduardo Tunni,1832,1862,No,2012-09-07,2025-09-08,https://fonts.google.com/specimen/Warnes
+Water Brush,Handwriting,,Display | Handwriting,personal casual friendly warm handwritten script organic  headline hero decorative large-text attention script cursive hand-drawn artistic informal english western european extended-latin european vietnamese,400,,latin | latin-ext | vietnamese,Robert Leuschke,1412,889,No,2022-04-07,2025-09-11,https://fonts.google.com/specimen/Water+Brush
+Waterfall,Handwriting,,Handwriting | Display,personal casual friendly warm handwritten script organic  script cursive hand-drawn artistic informal headline hero decorative large-text attention english western european extended-latin european vietnamese,400,,latin | latin-ext | vietnamese,Robert Leuschke,1050,2230,No,2021-11-18,2025-09-04,https://fonts.google.com/specimen/Waterfall
+Wavefont,Display,,Symbols | Display,bold decorative headline attention-grabbing creative expressive  icon symbol emoji pictograph headline hero decorative large-text attention versatile multi-weight flexible variable variable-font responsive variable-weight,100 | 1000 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900,ROND: - | YELA: - | wght: -,,Dmitry Ivanov,1933,2113,No,2023-06-15,2025-09-17,https://fonts.google.com/specimen/Wavefont
+Wellfleet,Serif,Slab Serif,,elegant traditional classic refined literary editorial slab mechanical sturdy strong english western european extended-latin european,400,,latin | latin-ext,Riccardo De Franceschi,1529,1965,No,2012-01-11,2025-09-10,https://fonts.google.com/specimen/Wellfleet
+Wendy One,Sans Serif,Sans Serif,Display,clean modern minimal professional readable neutral geometric humanist grotesque headline hero decorative large-text attention english western european extended-latin european,400,,latin | latin-ext,Alejandro Inler,1040,1545,No,2012-12-13,2025-09-04,https://fonts.google.com/specimen/Wendy+One
+Whisper,Handwriting,,Display | Handwriting,personal casual friendly warm handwritten script organic  headline hero decorative large-text attention script cursive hand-drawn artistic informal english western european extended-latin european vietnamese,400,,latin | latin-ext | vietnamese,Robert Leuschke,479,2190,No,2022-03-23,2025-09-10,https://fonts.google.com/specimen/Whisper
+WindSong,Handwriting,,Display | Handwriting,personal casual friendly warm handwritten script organic  headline hero decorative large-text attention script cursive hand-drawn artistic informal english western european extended-latin european vietnamese,400 | 500,,latin | latin-ext | vietnamese,Robert Leuschke,873,680,No,2021-05-28,2025-09-16,https://fonts.google.com/specimen/WindSong
+Winky Rough,Sans Serif,Sans Serif,Display,clean modern minimal professional readable neutral geometric humanist grotesque headline hero decorative large-text attention versatile multi-weight flexible italic variable variable-font responsive variable-weight english western european extended-latin european,300 | 300i | 400 | 400i | 500 | 500i | 600 | 600i | 700 | 700i | 800 | 800i | 900 | 900i,wght: -,latin | latin-ext,Typofactur,1731,1985,No,2025-04-07,2025-09-16,https://fonts.google.com/specimen/Winky+Rough
+Winky Sans,Sans Serif,Sans Serif,Display,clean modern minimal professional readable neutral geometric humanist grotesque headline hero decorative large-text attention versatile multi-weight flexible italic variable variable-font responsive variable-weight english western european extended-latin european,300 | 300i | 400 | 400i | 500 | 500i | 600 | 600i | 700 | 700i | 800 | 800i | 900 | 900i,wght: -,latin | latin-ext,Typofactur,1391,2250,No,2025-03-13,2025-09-02,https://fonts.google.com/specimen/Winky+Sans
+Wire One,Sans Serif,Sans Serif,Display,clean modern minimal professional readable neutral geometric humanist grotesque headline hero decorative large-text attention english western european,400,,latin,Cyreal,1048,1365,No,2011-05-18,2025-09-16,https://fonts.google.com/specimen/Wire+One
+Wittgenstein,Serif,Serif,,elegant traditional classic refined literary editorial transitional oldstyle didone versatile multi-weight flexible italic variable variable-font responsive variable-weight english western european extended-latin european,400 | 400i | 500 | 500i | 600 | 600i | 700 | 700i | 800 | 800i | 900 | 900i,wght: -,latin | latin-ext,Jörg Drees,1465,197,No,2024-06-04,2025-09-08,https://fonts.google.com/specimen/Wittgenstein
+Wix Madefor Display,Sans Serif,Sans Serif,Display,clean modern minimal professional readable neutral geometric humanist grotesque headline hero decorative large-text attention variable variable-font responsive variable-weight russian cyrillic slavic cyrillic extended english western european extended-latin european vietnamese,400 | 500 | 600 | 700 | 800,wght: -,cyrillic | cyrillic-ext | latin | latin-ext | vietnamese,Dalton Maag,496,1980,No,2023-02-05,2025-09-10,https://fonts.google.com/specimen/Wix+Madefor+Display
+Wix Madefor Text,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque italic variable variable-font responsive variable-weight russian cyrillic slavic cyrillic extended english western european extended-latin european vietnamese,400 | 400i | 500 | 500i | 600 | 600i | 700 | 700i | 800 | 800i,wght: -,cyrillic | cyrillic-ext | latin | latin-ext | vietnamese,Dalton Maag,495,1680,No,2023-01-10,2025-09-10,https://fonts.google.com/specimen/Wix+Madefor+Text
+Work Sans,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque versatile multi-weight flexible italic variable variable-font responsive variable-weight english western european extended-latin european vietnamese top-popular trending most-used,100 | 100i | 200 | 200i | 300 | 300i | 400 | 400i | 500 | 500i | 600 | 600i | 700 | 700i | 800 | 800i | 900 | 900i,wght: -,latin | latin-ext | vietnamese,Wei Huang,34,1204,No,2015-07-08,2025-09-11,https://fonts.google.com/specimen/Work+Sans
+Workbench,Monospace,Sans Serif,Display,code developer technical fixed-width terminal programming geometric humanist grotesque headline hero decorative large-text attention variable variable-font responsive english western european,400,BLED: - | SCAN: -,latin | math | symbols,Jens Kutílek,1682,1415,No,2024-01-23,2025-09-11,https://fonts.google.com/specimen/Workbench
+Xanh Mono,Monospace,,Monospace,code developer technical fixed-width terminal programming  mono fixed-width tabular data code italic english western european extended-latin european vietnamese,400 | 400i,,latin | latin-ext | vietnamese,Yellow Type | Lâm Bảo | Duy Dao,978,487,No,2020-08-10,2025-09-08,https://fonts.google.com/specimen/Xanh+Mono
+Yaldevi,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque versatile multi-weight flexible variable variable-font responsive variable-weight english western european extended-latin european sinhala sri-lankan,200 | 300 | 400 | 500 | 600 | 700,wght: -,latin | latin-ext | sinhala,Mooniak,1434,2144,No,2021-06-28,2025-09-10,https://fonts.google.com/specimen/Yaldevi
+Yanone Kaffeesatz,Sans Serif,Sans Serif,Display,clean modern minimal professional readable neutral geometric humanist grotesque headline hero decorative large-text attention versatile multi-weight flexible variable variable-font responsive variable-weight russian cyrillic slavic cyrillic extended english western european extended-latin european vietnamese multilingual international well-known common,200 | 300 | 400 | 500 | 600 | 700,wght: -,cyrillic | cyrillic-ext | latin | latin-ext | math | symbols | vietnamese,Yanone | Cyreal,225,1268,No,2010-05-11,2025-09-16,https://fonts.google.com/specimen/Yanone+Kaffeesatz
+Yantramanav,Sans Serif,Sans Serif,Display,clean modern minimal professional readable neutral geometric humanist grotesque headline hero decorative large-text attention versatile multi-weight flexible hindi devanagari indian english western european extended-latin european,100 | 300 | 400 | 500 | 700 | 900,,devanagari | latin | latin-ext,Erin McLaughlin,307,1322,No,2015-06-03,2025-09-16,https://fonts.google.com/specimen/Yantramanav
+Yarndings 12,Display,,Symbols | Display,bold decorative headline attention-grabbing creative expressive  icon symbol emoji pictograph headline hero decorative large-text attention english western european,400,,latin | math | symbols,Sarah Cadigan-Fried,2030,592,No,2024-03-20,2025-09-17,https://fonts.google.com/specimen/Yarndings+12
+Yarndings 12 Charted,Display,,Symbols | Display,bold decorative headline attention-grabbing creative expressive  icon symbol emoji pictograph headline hero decorative large-text attention english western european,400,,latin | math | symbols,Sarah Cadigan-Fried,2038,443,No,2024-03-20,2025-09-17,https://fonts.google.com/specimen/Yarndings+12+Charted
+Yarndings 20,Display,,Symbols | Display,bold decorative headline attention-grabbing creative expressive  icon symbol emoji pictograph headline hero decorative large-text attention english western european,400,,latin | math | symbols,Sarah Cadigan-Fried,2018,942,No,2024-03-20,2025-09-17,https://fonts.google.com/specimen/Yarndings+20
+Yarndings 20 Charted,Display,,Symbols | Display,bold decorative headline attention-grabbing creative expressive  icon symbol emoji pictograph headline hero decorative large-text attention english western european,400,,latin | math | symbols,Sarah Cadigan-Fried,2041,410,No,2024-03-20,2025-09-17,https://fonts.google.com/specimen/Yarndings+20+Charted
+Yatra One,Display,,Display,bold decorative headline attention-grabbing creative expressive  headline hero decorative large-text attention hindi devanagari indian english western european extended-latin european,400,,devanagari | latin | latin-ext,Catherine Leigh Schmidt,602,2095,No,2016-06-15,2025-09-04,https://fonts.google.com/specimen/Yatra+One
+Yellowtail,Handwriting,,Handwriting | Display,personal casual friendly warm handwritten script organic  script cursive hand-drawn artistic informal headline hero decorative large-text attention english western european extended-latin european well-known common,400,,latin | latin-ext,Astigmatic,247,1845,No,2011-07-20,2025-09-08,https://fonts.google.com/specimen/Yellowtail
+Yeon Sung,Display,,Display,bold decorative headline attention-grabbing creative expressive  headline hero decorative large-text attention korean hangul english western european,400,,korean | latin,Woowahan brothers,1254,278,No,2018-02-23,2025-09-04,https://fonts.google.com/specimen/Yeon+Sung
+Yeseva One,Display,Serif,Display,bold decorative headline attention-grabbing creative expressive transitional oldstyle didone headline hero decorative large-text attention russian cyrillic slavic cyrillic extended english western european extended-latin european vietnamese,400,,cyrillic | cyrillic-ext | latin | latin-ext | vietnamese,Jovanny Lemonad,401,1117,No,2011-07-13,2025-09-16,https://fonts.google.com/specimen/Yeseva+One
+Yesteryear,Handwriting,,Display | Handwriting,personal casual friendly warm handwritten script organic  headline hero decorative large-text attention script cursive hand-drawn artistic informal english western european extended-latin european,400,,latin | latin-ext,Astigmatic,711,1216,No,2011-12-19,2025-09-11,https://fonts.google.com/specimen/Yesteryear
+Yomogi,Handwriting,,Handwriting,personal casual friendly warm handwritten script organic  script cursive hand-drawn artistic informal russian cyrillic slavic japanese kanji hiragana katakana english western european extended-latin european vietnamese,400,,cyrillic | japanese | latin | latin-ext | vietnamese,Satsuyako,1206,1706,No,2021-04-14,2025-09-16,https://fonts.google.com/specimen/Yomogi
+Young Serif,Serif,Serif,,elegant traditional classic refined literary editorial transitional oldstyle didone english western european extended-latin european,400,,latin | latin-ext,Bastien Sozeau,608,2311,No,2023-09-26,2025-05-30,https://fonts.google.com/specimen/Young+Serif
+Yrsa,Serif,Serif,,elegant traditional classic refined literary editorial transitional oldstyle didone italic variable variable-font responsive variable-weight english western european extended-latin european vietnamese,300 | 300i | 400 | 400i | 500 | 500i | 600 | 600i | 700 | 700i,wght: -,latin | latin-ext | vietnamese,Rosetta | Anna Giedryś | David Březina,494,1920,No,2016-06-15,2025-09-16,https://fonts.google.com/specimen/Yrsa
+Ysabeau,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque versatile multi-weight flexible italic variable variable-font responsive variable-weight russian cyrillic slavic cyrillic extended greek english western european extended-latin european vietnamese multilingual international,1 | 100 | 1000 | 1000i | 100i | 1i | 200 | 200i | 300 | 300i | 400 | 400i | 500 | 500i | 600 | 600i | 700 | 700i | 800 | 800i | 900 | 900i,wght: -,cyrillic | cyrillic-ext | greek | latin | latin-ext | math | symbols | vietnamese,Christian Thalmann,1403,1940,No,2023-04-19,2025-09-11,https://fonts.google.com/specimen/Ysabeau
+Ysabeau Infant,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque versatile multi-weight flexible italic variable variable-font responsive variable-weight russian cyrillic slavic cyrillic extended greek english western european extended-latin european vietnamese multilingual international,1 | 100 | 1000 | 1000i | 100i | 1i | 200 | 200i | 300 | 300i | 400 | 400i | 500 | 500i | 600 | 600i | 700 | 700i | 800 | 800i | 900 | 900i,wght: -,cyrillic | cyrillic-ext | greek | latin | latin-ext | math | symbols | vietnamese,Christian Thalmann,1377,438,No,2023-06-21,2025-09-16,https://fonts.google.com/specimen/Ysabeau+Infant
+Ysabeau Office,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque versatile multi-weight flexible italic variable variable-font responsive variable-weight russian cyrillic slavic cyrillic extended greek english western european extended-latin european vietnamese multilingual international,1 | 100 | 1000 | 1000i | 100i | 1i | 200 | 200i | 300 | 300i | 400 | 400i | 500 | 500i | 600 | 600i | 700 | 700i | 800 | 800i | 900 | 900i,wght: -,cyrillic | cyrillic-ext | greek | latin | latin-ext | math | symbols | vietnamese,Christian Thalmann,767,831,No,2023-06-21,2025-09-10,https://fonts.google.com/specimen/Ysabeau+Office
+Ysabeau SC,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque versatile multi-weight flexible variable variable-font responsive variable-weight russian cyrillic slavic cyrillic extended greek english western european extended-latin european vietnamese multilingual international,1 | 100 | 1000 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900,wght: -,cyrillic | cyrillic-ext | greek | latin | latin-ext | math | symbols | vietnamese,Christian Thalmann,1152,864,No,2023-06-21,2025-09-16,https://fonts.google.com/specimen/Ysabeau+SC
+Yuji Boku,Serif,Serif,,elegant traditional classic refined literary editorial transitional oldstyle didone russian cyrillic slavic japanese kanji hiragana katakana english western european extended-latin european,400,,cyrillic | japanese | latin | latin-ext,Kinuta Font Factory,1365,407,No,2021-09-26,2025-09-04,https://fonts.google.com/specimen/Yuji+Boku
+Yuji Hentaigana Akari,Handwriting,,Handwriting,personal casual friendly warm handwritten script organic  script cursive hand-drawn artistic informal japanese kanji hiragana katakana english western european extended-latin european,400,,japanese | latin | latin-ext,Kinuta Font Factory,1842,168,No,2021-06-10,2025-09-11,https://fonts.google.com/specimen/Yuji+Hentaigana+Akari
+Yuji Hentaigana Akebono,Handwriting,,Handwriting,personal casual friendly warm handwritten script organic  script cursive hand-drawn artistic informal japanese kanji hiragana katakana english western european extended-latin european,400,,japanese | latin | latin-ext,Kinuta Font Factory,2007,1698,No,2021-06-10,2025-09-16,https://fonts.google.com/specimen/Yuji+Hentaigana+Akebono
+Yuji Mai,Serif,Serif,,elegant traditional classic refined literary editorial transitional oldstyle didone russian cyrillic slavic japanese kanji hiragana katakana english western european extended-latin european,400,,cyrillic | japanese | latin | latin-ext,Kinuta Font Factory,614,2138,No,2021-09-26,2025-09-16,https://fonts.google.com/specimen/Yuji+Mai
+Yuji Syuku,Serif,Serif,,elegant traditional classic refined literary editorial transitional oldstyle didone russian cyrillic slavic japanese kanji hiragana katakana english western european extended-latin european,400,,cyrillic | japanese | latin | latin-ext,Kinuta Font Factory,1035,1554,No,2021-09-26,2025-09-16,https://fonts.google.com/specimen/Yuji+Syuku
+Yusei Magic,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque japanese kanji hiragana katakana english western european extended-latin european,400,,japanese | latin | latin-ext,Tanukizamurai,774,1657,No,2020-12-14,2025-09-08,https://fonts.google.com/specimen/Yusei+Magic
+ZCOOL KuaiLe,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque chinese simplified mandarin english western european,400,,chinese-simplified | latin,Liu Bingke | Yang Kang | Wu Shaojie,561,329,No,2018-12-10,2026-02-17,https://fonts.google.com/specimen/ZCOOL+KuaiLe
+ZCOOL QingKe HuangYou,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque chinese simplified mandarin english western european,400,,chinese-simplified | latin,Zheng Qingke,977,326,No,2018-12-10,2025-09-10,https://fonts.google.com/specimen/ZCOOL+QingKe+HuangYou
+ZCOOL XiaoWei,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque chinese simplified mandarin english western european,400,,chinese-simplified | latin,Li Dawei,751,305,No,2018-12-10,2025-09-04,https://fonts.google.com/specimen/ZCOOL+XiaoWei
+Zain,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque versatile multi-weight flexible italic arabic RTL middle-east english western european,200 | 300 | 300i | 400 | 400i | 700 | 800 | 900,,arabic | latin,Boutros Fonts,903,1393,No,2024-07-17,2025-10-29,https://fonts.google.com/specimen/Zain
+Zalando Sans,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque versatile multi-weight flexible italic variable variable-font responsive variable-weight variable-width english western european extended-latin european,200 | 200i | 300 | 300i | 400 | 400i | 500 | 500i | 600 | 600i | 700 | 700i | 800 | 800i | 900 | 900i,wdth: - | wght: -,latin | latin-ext,Jakob Ekelund | KH Type | Zalando,950,1361,No,2025-09-11,2025-09-16,https://fonts.google.com/specimen/Zalando+Sans
+Zalando Sans Expanded,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque versatile multi-weight flexible italic variable variable-font responsive variable-weight english western european extended-latin european,200 | 200i | 300 | 300i | 400 | 400i | 500 | 500i | 600 | 600i | 700 | 700i | 800 | 800i | 900 | 900i,wght: -,latin | latin-ext,Jakob Ekelund | KH Type | Zalando,680,545,No,2025-09-11,2025-09-16,https://fonts.google.com/specimen/Zalando+Sans+Expanded
+Zalando Sans SemiExpanded,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque versatile multi-weight flexible italic variable variable-font responsive variable-weight english western european extended-latin european,200 | 200i | 300 | 300i | 400 | 400i | 500 | 500i | 600 | 600i | 700 | 700i | 800 | 800i | 900 | 900i,wght: -,latin | latin-ext,Jakob Ekelund | KH Type | Zalando,1171,338,No,2025-09-11,2025-09-16,https://fonts.google.com/specimen/Zalando+Sans+SemiExpanded
+Zen Antique,Serif,Serif,,elegant traditional classic refined literary editorial transitional oldstyle didone russian cyrillic slavic greek japanese kanji hiragana katakana english western european extended-latin european,400,,cyrillic | greek | japanese | latin | latin-ext,Yoshimichi Ohira,802,2142,No,2021-08-31,2025-09-08,https://fonts.google.com/specimen/Zen+Antique
+Zen Antique Soft,Serif,Serif,,elegant traditional classic refined literary editorial transitional oldstyle didone russian cyrillic slavic greek japanese kanji hiragana katakana english western european extended-latin european,400,,cyrillic | greek | japanese | latin | latin-ext,Yoshimichi Ohira,991,1944,No,2021-08-31,2025-09-10,https://fonts.google.com/specimen/Zen+Antique+Soft
+Zen Dots,Display,Sans Serif,Display,bold decorative headline attention-grabbing creative expressive geometric humanist grotesque headline hero decorative large-text attention english western european extended-latin european,400,,latin | latin-ext,Yoshimichi Ohira,940,2234,No,2021-03-11,2025-09-04,https://fonts.google.com/specimen/Zen+Dots
+Zen Kaku Gothic Antique,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque russian cyrillic slavic japanese kanji hiragana katakana english western european extended-latin european,300 | 400 | 500 | 700 | 900,,cyrillic | japanese | latin | latin-ext,Yoshimichi Ohira,492,522,No,2021-08-31,2025-09-04,https://fonts.google.com/specimen/Zen+Kaku+Gothic+Antique
+Zen Kaku Gothic New,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque russian cyrillic slavic japanese kanji hiragana katakana english western european extended-latin european well-known common,300 | 400 | 500 | 700 | 900,,cyrillic | japanese | latin | latin-ext,Yoshimichi Ohira,172,941,No,2021-08-31,2025-09-16,https://fonts.google.com/specimen/Zen+Kaku+Gothic+New
+Zen Kurenaido,Sans Serif,Sans Serif,,clean modern minimal professional readable neutral geometric humanist grotesque russian cyrillic slavic greek japanese kanji hiragana katakana english western european extended-latin european,400,,cyrillic | greek | japanese | latin | latin-ext,Yoshimichi Ohira,969,1858,No,2021-08-31,2025-09-10,https://fonts.google.com/specimen/Zen+Kurenaido
+Zen Loop,Display,,Display | Handwriting,bold decorative headline attention-grabbing creative expressive  headline hero decorative large-text attention script cursive hand-drawn artistic informal italic english western european extended-latin european,400 | 400i,,latin | latin-ext,Yoshimichi Ohira,1618,86,No,2021-03-10,2025-09-11,https://fonts.google.com/specimen/Zen+Loop
+Zen Maru Gothic,Sans Serif,Sans Serif,Display,clean modern minimal professional readable neutral geometric humanist grotesque headline hero decorative large-text attention russian cyrillic slavic greek japanese kanji hiragana katakana english western european extended-latin european well-known common,300 | 400 | 500 | 700 | 900,,cyrillic | greek | japanese | latin | latin-ext,Yoshimichi Ohira,212,1147,No,2021-08-31,2025-06-25,https://fonts.google.com/specimen/Zen+Maru+Gothic
+Zen Old Mincho,Serif,Serif,,elegant traditional classic refined literary editorial transitional oldstyle didone russian cyrillic slavic greek japanese kanji hiragana katakana english western european extended-latin european,400 | 500 | 600 | 700 | 900,,cyrillic | greek | japanese | latin | latin-ext,Yoshimichi Ohira,366,935,No,2021-08-31,2025-09-02,https://fonts.google.com/specimen/Zen+Old+Mincho
+Zen Tokyo Zoo,Display,,Display,bold decorative headline attention-grabbing creative expressive  headline hero decorative large-text attention english western european extended-latin european,400,,latin | latin-ext,Yoshimichi Ohira,1325,468,No,2021-04-30,2025-09-10,https://fonts.google.com/specimen/Zen+Tokyo+Zoo
+Zeyada,Handwriting,,Display | Handwriting,personal casual friendly warm handwritten script organic  headline hero decorative large-text attention script cursive hand-drawn artistic informal english western european extended-latin european well-known common,400,,latin | latin-ext,Kimberly Geswein,296,882,No,2011-06-08,2025-09-16,https://fonts.google.com/specimen/Zeyada
+Zhi Mang Xing,Handwriting,,Handwriting,personal casual friendly warm handwritten script organic  script cursive hand-drawn artistic informal chinese simplified mandarin english western european,400,,chinese-simplified | latin,Wei Zhimang,1146,254,No,2019-03-17,2025-09-08,https://fonts.google.com/specimen/Zhi+Mang+Xing
+Zilla Slab,Serif,Serif,,elegant traditional classic refined literary editorial transitional oldstyle didone italic english western european extended-latin european well-known common,300 | 300i | 400 | 400i | 500 | 500i | 600 | 600i | 700 | 700i,,latin | latin-ext,Typotheque,164,510,No,2017-06-28,2025-09-04,https://fonts.google.com/specimen/Zilla+Slab
+Zilla Slab Highlight,Serif,Slab Serif,,elegant traditional classic refined literary editorial slab mechanical sturdy strong english western european extended-latin european,400 | 700,,latin | latin-ext,Typotheque,1250,1883,No,2017-07-26,2025-09-11,https://fonts.google.com/specimen/Zilla+Slab+Highlight
diff --git a/.claude/skills/ui-ux-pro-max/data/icons.csv b/.claude/skills/ui-ux-pro-max/data/icons.csv
new file mode 100644
index 000000000..210a8d086
--- /dev/null
+++ b/.claude/skills/ui-ux-pro-max/data/icons.csv
@@ -0,0 +1,106 @@
+No,Category,Icon Name,Keywords,Library,Import Code,Usage,Best For,Style
+1,Navigation,list,hamburger menu navigation toggle bars,Phosphor,import { List } from '@phosphor-icons/react',<List size={20} weight="regular" />,Mobile navigation drawer toggle sidebar,Outline
+2,Navigation,arrow-left,back previous return navigate,Phosphor,import { ArrowLeft } from '@phosphor-icons/react',<ArrowLeft size={20} weight="regular" />,Back button breadcrumb navigation,Outline
+3,Navigation,arrow-right,next forward continue navigate,Phosphor,import { ArrowRight } from '@phosphor-icons/react',<ArrowRight size={20} weight="regular" />,Forward button next step CTA,Outline
+4,Navigation,caret-down,dropdown expand accordion select,Phosphor,import { CaretDown } from '@phosphor-icons/react',<CaretDown size={20} weight="regular" />,Dropdown toggle accordion header,Outline
+5,Navigation,caret-up,collapse close accordion minimize,Phosphor,import { CaretUp } from '@phosphor-icons/react',<CaretUp size={20} weight="regular" />,Accordion collapse minimize,Outline
+6,Navigation,house,homepage main dashboard start,Phosphor,import { House } from '@phosphor-icons/react',<House size={20} weight="regular" />,Home navigation main page,Outline
+7,Navigation,x,close cancel dismiss remove exit,Phosphor,import { X } from '@phosphor-icons/react',<X size={20} weight="regular" />,Modal close dismiss button,Outline
+8,Navigation,arrow-square-out,open new tab external link,Phosphor,import { ArrowSquareOut } from '@phosphor-icons/react',<ArrowSquareOut size={20} weight="regular" />,External link indicator,Outline
+9,Action,plus,add create new insert,Phosphor,import { Plus } from '@phosphor-icons/react',<Plus size={20} weight="regular" />,Add button create new item,Outline
+10,Action,minus,remove subtract decrease delete,Phosphor,import { Minus } from '@phosphor-icons/react',<Minus size={20} weight="regular" />,Remove item quantity decrease,Outline
+11,Action,trash,delete remove discard bin,Phosphor,import { Trash } from '@phosphor-icons/react',<Trash size={20} weight="regular" />,Delete action destructive,Outline
+12,Action,pencil-simple,pencil modify change update,Phosphor,import { PencilSimple } from '@phosphor-icons/react',<PencilSimple size={20} weight="regular" />,Edit button modify content,Outline
+13,Action,floppy-disk,disk store persist save,Phosphor,import { FloppyDisk } from '@phosphor-icons/react',<FloppyDisk size={20} weight="regular" />,Save button persist changes,Outline
+14,Action,download-simple,export save file download,Phosphor,import { DownloadSimple } from '@phosphor-icons/react',<DownloadSimple size={20} weight="regular" />,Download file export,Outline
+15,Action,upload-simple,import file attach upload,Phosphor,import { UploadSimple } from '@phosphor-icons/react',<UploadSimple size={20} weight="regular" />,Upload file import,Outline
+16,Action,copy,duplicate clipboard paste,Phosphor,import { Copy } from '@phosphor-icons/react',<Copy size={20} weight="regular" />,Copy to clipboard,Outline
+17,Action,share,social distribute send,Phosphor,import { Share } from '@phosphor-icons/react',<Share size={20} weight="regular" />,Share button social,Outline
+18,Action,magnifying-glass,find lookup filter query,Phosphor,import { MagnifyingGlass } from '@phosphor-icons/react',<MagnifyingGlass size={20} weight="regular" />,Search input bar,Outline
+19,Action,funnel,sort refine narrow options,Phosphor,import { Funnel } from '@phosphor-icons/react',<Funnel size={20} weight="regular" />,Filter dropdown sort,Outline
+20,Action,gear,gear cog preferences config,Phosphor,import { Gear } from '@phosphor-icons/react',<Gear size={20} weight="regular" />,Settings page configuration,Outline
+21,Status,check,success done complete verified,Phosphor,import { Check } from '@phosphor-icons/react',<Check size={20} weight="regular" />,Success state checkmark,Outline
+22,Status,check-circle,success verified approved complete,Phosphor,import { CheckCircle } from '@phosphor-icons/react',<CheckCircle size={20} weight="regular" />,Success badge verified,Outline
+23,Status,x-circle,error failed cancel rejected,Phosphor,import { XCircle } from '@phosphor-icons/react',<XCircle size={20} weight="regular" />,Error state failed,Outline
+24,Status,warning,warning caution attention danger,Phosphor,import { Warning } from '@phosphor-icons/react',<Warning size={20} weight="regular" />,Warning message caution,Outline
+25,Status,warning-circle,info notice information help,Phosphor,import { WarningCircle } from '@phosphor-icons/react',<WarningCircle size={20} weight="regular" />,Info notice alert,Outline
+26,Status,info,information help tooltip details,Phosphor,import { Info } from '@phosphor-icons/react',<Info size={20} weight="regular" />,Information tooltip help,Outline
+27,Status,circle-notch,loading spinner processing wait,Phosphor,import { CircleNotch } from '@phosphor-icons/react',<CircleNotch size={20} weight="regular" className="animate-spin" />,Loading state spinner,Outline
+28,Status,clock,time schedule pending wait,Phosphor,import { Clock } from '@phosphor-icons/react',<Clock size={20} weight="regular" />,Pending time schedule,Outline
+29,Communication,envelope,email message inbox letter,Phosphor,import { Envelope } from '@phosphor-icons/react',<Envelope size={20} weight="regular" />,Email contact inbox,Outline
+30,Communication,chat-circle,chat comment bubble conversation,Phosphor,import { ChatCircle } from '@phosphor-icons/react',<ChatCircle size={20} weight="regular" />,Chat comment message,Outline
+31,Communication,phone,call mobile telephone contact,Phosphor,import { Phone } from '@phosphor-icons/react',<Phone size={20} weight="regular" />,Phone contact call,Outline
+32,Communication,paper-plane-tilt,submit dispatch message airplane,Phosphor,import { PaperPlaneTilt } from '@phosphor-icons/react',<PaperPlaneTilt size={20} weight="regular" />,Send message submit,Outline
+33,Communication,bell,notification alert ring reminder,Phosphor,import { Bell } from '@phosphor-icons/react',<Bell size={20} weight="regular" />,Notification bell alert,Outline
+34,User,user,profile account person avatar,Phosphor,import { User } from '@phosphor-icons/react',<User size={20} weight="regular" />,User profile account,Outline
+35,User,users,team group people members,Phosphor,import { Users } from '@phosphor-icons/react',<Users size={20} weight="regular" />,Team group members,Outline
+36,User,user-plus,add invite new member,Phosphor,import { UserPlus } from '@phosphor-icons/react',<UserPlus size={20} weight="regular" />,Add user invite,Outline
+37,User,sign-in,signin authenticate enter,Phosphor,import { SignIn } from '@phosphor-icons/react',<SignIn size={20} weight="regular" />,Login signin,Outline
+38,User,sign-out,signout exit leave logout,Phosphor,import { SignOut } from '@phosphor-icons/react',<SignOut size={20} weight="regular" />,Logout signout,Outline
+39,Media,image,photo picture gallery thumbnail,Phosphor,import { Image } from '@phosphor-icons/react',<Image size={20} weight="regular" />,Image photo gallery,Outline
+40,Media,video,movie film play record,Phosphor,import { Video } from '@phosphor-icons/react',<Video size={20} weight="regular" />,Video player media,Outline
+41,Media,play,start video audio media,Phosphor,import { Play } from '@phosphor-icons/react',<Play size={20} weight="regular" />,Play button video audio,Outline
+42,Media,pause,stop halt video audio,Phosphor,import { Pause } from '@phosphor-icons/react',<Pause size={20} weight="regular" />,Pause button media,Outline
+43,Media,speaker-high,sound audio speaker music,Phosphor,import { SpeakerHigh } from '@phosphor-icons/react',<SpeakerHigh size={20} weight="regular" />,Volume audio sound,Outline
+44,Media,microphone,microphone record voice audio,Phosphor,import { Microphone } from '@phosphor-icons/react',<Microphone size={20} weight="regular" />,Microphone voice record,Outline
+45,Media,camera,photo capture snapshot picture,Phosphor,import { Camera } from '@phosphor-icons/react',<Camera size={20} weight="regular" />,Camera photo capture,Outline
+46,Commerce,shopping-cart,cart checkout basket buy,Phosphor,import { ShoppingCart } from '@phosphor-icons/react',<ShoppingCart size={20} weight="regular" />,Shopping cart e-commerce,Outline
+47,Commerce,shopping-bag,purchase buy store bag,Phosphor,import { ShoppingBag } from '@phosphor-icons/react',<ShoppingBag size={20} weight="regular" />,Shopping bag purchase,Outline
+48,Commerce,credit-card,payment card checkout stripe,Phosphor,import { CreditCard } from '@phosphor-icons/react',<CreditCard size={20} weight="regular" />,Payment credit card,Outline
+49,Commerce,currency-dollar,money price currency cost,Phosphor,import { CurrencyDollar } from '@phosphor-icons/react',<CurrencyDollar size={20} weight="regular" />,Price money currency,Outline
+50,Commerce,tag,label price discount sale,Phosphor,import { Tag } from '@phosphor-icons/react',<Tag size={20} weight="regular" />,Price tag label,Outline
+51,Commerce,gift,present reward bonus offer,Phosphor,import { Gift } from '@phosphor-icons/react',<Gift size={20} weight="regular" />,Gift reward offer,Outline
+52,Commerce,percent,discount sale offer promo,Phosphor,import { Percent } from '@phosphor-icons/react',<Percent size={20} weight="regular" />,Discount percentage sale,Outline
+53,Data,chart-bar,analytics statistics graph metrics,Phosphor,import { ChartBar } from '@phosphor-icons/react',<ChartBar size={20} weight="regular" />,Bar chart analytics,Outline
+54,Data,chart-pie,statistics distribution breakdown,Phosphor,import { ChartPie } from '@phosphor-icons/react',<ChartPie size={20} weight="regular" />,Pie chart distribution,Outline
+55,Data,trend-up,growth increase positive trend,Phosphor,import { TrendUp } from '@phosphor-icons/react',<TrendUp size={20} weight="regular" />,Growth trend positive,Outline
+56,Data,trend-down,decline decrease negative trend,Phosphor,import { TrendDown } from '@phosphor-icons/react',<TrendDown size={20} weight="regular" />,Decline trend negative,Outline
+57,Data,activity,pulse heartbeat monitor live,Phosphor,import { Activity } from '@phosphor-icons/react',<Activity size={20} weight="regular" />,Activity monitor pulse,Outline
+58,Data,database,storage server data backend,Phosphor,import { Database } from '@phosphor-icons/react',<Database size={20} weight="regular" />,Database storage,Outline
+59,Files,file,document page paper doc,Phosphor,import { File } from '@phosphor-icons/react',<File size={20} weight="regular" />,File document,Outline
+60,Files,file-text,document text page article,Phosphor,import { FileText } from '@phosphor-icons/react',<FileText size={20} weight="regular" />,Text document article,Outline
+61,Files,folder,directory organize group files,Phosphor,import { Folder } from '@phosphor-icons/react',<Folder size={20} weight="regular" />,Folder directory,Outline
+62,Files,folder-open,expanded browse files view,Phosphor,import { FolderOpen } from '@phosphor-icons/react',<FolderOpen size={20} weight="regular" />,Open folder browse,Outline
+63,Files,paperclip,attachment attach file link,Phosphor,import { Paperclip } from '@phosphor-icons/react',<Paperclip size={20} weight="regular" />,Attachment paperclip,Outline
+64,Files,link,url hyperlink chain connect,Phosphor,import { Link } from '@phosphor-icons/react',<Link size={20} weight="regular" />,Link URL hyperlink,Outline
+65,Files,clipboard,paste copy buffer notes,Phosphor,import { Clipboard } from '@phosphor-icons/react',<Clipboard size={20} weight="regular" />,Clipboard paste,Outline
+66,Layout,grid-four,tiles gallery layout dashboard,Phosphor,import { GridFour } from '@phosphor-icons/react',<GridFour size={20} weight="regular" />,Grid layout gallery,Outline
+67,Layout,list-bullets,rows table lines items,Phosphor,import { ListBullets } from '@phosphor-icons/react',<ListBullets size={20} weight="regular" />,List view rows,Outline
+68,Layout,columns,layout split dual sidebar,Phosphor,import { Columns } from '@phosphor-icons/react',<Columns size={20} weight="regular" />,Column layout split,Outline
+69,Layout,arrows-out,fullscreen expand enlarge zoom,Phosphor,import { ArrowsOut } from '@phosphor-icons/react',<ArrowsOut size={20} weight="regular" />,Fullscreen maximize,Outline
+70,Layout,arrows-in,reduce shrink collapse exit,Phosphor,import { ArrowsIn } from '@phosphor-icons/react',<ArrowsIn size={20} weight="regular" />,Minimize reduce,Outline
+71,Layout,sidebar,panel drawer navigation menu,Phosphor,import { Sidebar } from '@phosphor-icons/react',<Sidebar size={20} weight="regular" />,Sidebar panel,Outline
+72,Social,heart,like love favorite wishlist,Phosphor,import { Heart } from '@phosphor-icons/react',<Heart size={20} weight="regular" />,Like favorite love,Outline
+73,Social,star,rating review favorite bookmark,Phosphor,import { Star } from '@phosphor-icons/react',<Star size={20} weight="regular" />,Star rating favorite,Outline
+74,Social,thumbs-up,like approve agree positive,Phosphor,import { ThumbsUp } from '@phosphor-icons/react',<ThumbsUp size={20} weight="regular" />,Like approve thumb,Outline
+75,Social,thumbs-down,dislike disapprove disagree negative,Phosphor,import { ThumbsDown } from '@phosphor-icons/react',<ThumbsDown size={20} weight="regular" />,Dislike disapprove,Outline
+76,Social,bookmark,save later favorite mark,Phosphor,import { Bookmark } from '@phosphor-icons/react',<Bookmark size={20} weight="regular" />,Bookmark save,Outline
+77,Social,flag,report mark important highlight,Phosphor,import { Flag } from '@phosphor-icons/react',<Flag size={20} weight="regular" />,Flag report,Outline
+78,Device,device-mobile,mobile phone device touch,Phosphor,import { DeviceMobile } from '@phosphor-icons/react',<DeviceMobile size={20} weight="regular" />,Mobile smartphone,Outline
+79,Device,device-tablet,ipad device touch screen,Phosphor,import { DeviceTablet } from '@phosphor-icons/react',<DeviceTablet size={20} weight="regular" />,Tablet device,Outline
+80,Device,monitor,desktop screen computer display,Phosphor,import { Monitor } from '@phosphor-icons/react',<Monitor size={20} weight="regular" />,Desktop monitor,Outline
+81,Device,laptop,notebook computer portable device,Phosphor,import { Laptop } from '@phosphor-icons/react',<Laptop size={20} weight="regular" />,Laptop computer,Outline
+82,Device,printer,print document output paper,Phosphor,import { Printer } from '@phosphor-icons/react',<Printer size={20} weight="regular" />,Printer print,Outline
+83,Security,lock,secure password protected private,Phosphor,import { Lock } from '@phosphor-icons/react',<Lock size={20} weight="regular" />,Lock secure,Outline
+84,Security,lock-open,open access unsecure public,Phosphor,import { LockOpen } from '@phosphor-icons/react',<LockOpen size={20} weight="regular" />,Unlock open,Outline
+85,Security,shield,protection security safe guard,Phosphor,import { Shield } from '@phosphor-icons/react',<Shield size={20} weight="regular" />,Shield protection,Outline
+86,Security,key,password access unlock login,Phosphor,import { Key } from '@phosphor-icons/react',<Key size={20} weight="regular" />,Key password,Outline
+87,Security,eye,view show visible password,Phosphor,import { Eye } from '@phosphor-icons/react',<Eye size={20} weight="regular" />,Show password view,Outline
+88,Security,eye-slash,hide invisible password hidden,Phosphor,import { EyeSlash } from '@phosphor-icons/react',<EyeSlash size={20} weight="regular" />,Hide password,Outline
+89,Location,map-pin,location marker place address,Phosphor,import { MapPin } from '@phosphor-icons/react',<MapPin size={20} weight="regular" />,Location pin marker,Outline
+90,Location,map,directions navigate geography location,Phosphor,import { Map } from '@phosphor-icons/react',<Map size={20} weight="regular" />,Map directions,Outline
+91,Location,compass,compass direction pointer arrow,Phosphor,import { Compass } from '@phosphor-icons/react',<Compass size={20} weight="regular" />,Navigation compass,Outline
+92,Location,globe,world international global web,Phosphor,import { Globe } from '@phosphor-icons/react',<Globe size={20} weight="regular" />,Globe world,Outline
+93,Time,calendar,date schedule event appointment,Phosphor,import { Calendar } from '@phosphor-icons/react',<Calendar size={20} weight="regular" />,Calendar date,Outline
+94,Time,arrows-clockwise,reload sync update refresh,Phosphor,import { ArrowsClockwise } from '@phosphor-icons/react',<ArrowsClockwise size={20} weight="regular" />,Refresh reload,Outline
+95,Time,arrow-counter-clockwise,undo back revert history,Phosphor,import { ArrowCounterClockwise } from '@phosphor-icons/react',<ArrowCounterClockwise size={20} weight="regular" />,Undo revert,Outline
+96,Time,arrow-clockwise,redo forward repeat history,Phosphor,import { ArrowClockwise } from '@phosphor-icons/react',<ArrowClockwise size={20} weight="regular" />,Redo forward,Outline
+97,Development,code,develop programming syntax html,Phosphor,import { Code } from '@phosphor-icons/react',<Code size={20} weight="regular" />,Code development,Outline
+98,Development,terminal,console cli command shell,Phosphor,import { Terminal } from '@phosphor-icons/react',<Terminal size={20} weight="regular" />,Terminal console,Outline
+99,Development,git-branch,version control branch merge,Phosphor,import { GitBranch } from '@phosphor-icons/react',<GitBranch size={20} weight="regular" />,Git branch,Outline
+100,Development,github-logo,repository code open source,Phosphor,import { GithubLogo } from '@phosphor-icons/react',<GithubLogo size={20} weight="regular" />,GitHub repository,Outline
+101,Style Config,bold-typography-icon-system,"bold typography, editorial, mono label, phosphor, weight regular, minimal, icon+label required, size 20–32",Phosphor (react-native),"import { ArrowRight } from 'phosphor-react-native'","<ArrowRight size={20} weight=""regular"" color={colors.accent} />","Bold Typography Mobile style: weight=""regular"". Size 20px for UI controls, 32px for feature anchors. Icons MUST be paired with a Mono-stack text label (JetBrains Mono). Standalone icons only allowed for standard navigation (e.g., Back arrow). Accent color #FF3D00 only.",Outline
+102,Style Config,cyberpunk-icon-system,"cyberpunk, neon, glow, hud, phosphor, weight regular, accent glow, dark, angular, react native",Phosphor (react-native),"import { Lightning } from 'phosphor-react-native'","<Lightning size={24} weight=""regular"" color={colors.accent} />","Cyberpunk Mobile HUD style: weight=""regular"", color={colors.accent} (#00FF88 Matrix Green). Wrap every icon in a View with shadowColor: colors.accent / shadowOpacity: 0.6 / shadowRadius: 8 to simulate neon glow. Use borderRadius: 0 on wrapper. Avoid rounded icon containers. Always pair icon with data label in JetBrains Mono.",Outline
+103,Style Config,academia-icon-system,"academia, library, brass, ornate, phosphor, weight thin, muted warm, scholarly, mobile",Phosphor (react-native),"import { BookOpen } from 'phosphor-react-native'","<BookOpen size={22} weight=""thin"" color={colors.brass} />","Academia (Scholarly Mobile) style: weight=""thin"" (thin engraved feel), color={colors.brass} (#C9A962). No sharp geometric or tech-inspired icons. Prefer book, scroll, key, quill-type icon metaphors. Wrap in circular View with 1px brass border. Avoid neon or saturated colored icons. All icon-only navigation must have an accessibilityLabel.",Outline
+104,Style Config,web3-bitcoin-icon-system,"web3, bitcoin, defi, crypto, neon orange, holographic, blurview, phosphor, glow, fintech mobile",Phosphor (react-native),"import { TrendUp } from 'phosphor-react-native'","<TrendUp size={24} weight=""regular"" color={colors.bitcoinOrange} />","Bitcoin DeFi Mobile style: weight=""regular"", color={colors.bitcoinOrange} (#F7931A). Wrap icons in circular BlurView (intensity: 20) with 1px borderColor: '#F7931A' border (Holographic Node effect). shadowColor: '#F7931A' / shadowOpacity: 0.4 / shadowRadius: 8. Prefer finance/data icons (TrendUp, Wallet, Shield, Layers). All data icons use JetBrains Mono label.",Outline
+105,Guideline,icon-fallback-rules,"icon fallback, phosphor, heroicons, any icon, extended set","Phosphor (primary) + Heroicons (fallback)","Primary: import { IconName } from '@phosphor-icons/react'. Fallback: import { IconName } from '@heroicons/react/24/outline' or '@heroicons/react/24/solid'.","当默认列表中没有合适图标时：优先继续从 Phosphor 中选择任何语义更贴切的图标（不必局限于本表列出的图标）。若 Phosphor 也无合适图标，可以改用 Heroicons，并在 UI 代码中保持风格统一（线性或填充、圆角程度、笔画粗细等）。","Icon library strategy and fallback rules",Outline
\ No newline at end of file
diff --git a/.claude/skills/ui-ux-pro-max/data/landing.csv b/.claude/skills/ui-ux-pro-max/data/landing.csv
new file mode 100644
index 000000000..f64101ec4
--- /dev/null
+++ b/.claude/skills/ui-ux-pro-max/data/landing.csv
@@ -0,0 +1,35 @@
+No,Pattern Name,Keywords,Section Order,Primary CTA Placement,Color Strategy,Recommended Effects,Conversion Optimization
+1,Hero + Features + CTA,"hero, hero-centric, hero-centric design, features, feature-rich, feature-rich showcase, cta, call-to-action","1. Hero with headline/image, 2. Value prop, 3. Key features (3-5), 4. CTA section, 5. Footer",Hero (sticky) + Bottom,Hero: Brand primary or vibrant. Features: Card bg #FAFAFA. CTA: Contrasting accent color,"Hero parallax, feature card hover lift, CTA glow on hover",Deep CTA placement. Use contrasting color (at least 7:1 contrast ratio). Sticky navbar CTA.
+2,Hero + Testimonials + CTA,"hero, testimonials, social-proof, social-proof-focused, social proof focused, trust, reviews, cta","1. Hero, 2. Problem statement, 3. Solution overview, 4. Testimonials carousel, 5. CTA",Hero (sticky) + Post-testimonials,"Hero: Brand color. Testimonials: Light bg #F5F5F5. Quotes: Italic, muted color #666. CTA: Vibrant","Testimonial carousel slide animations, quote marks animations, avatar fade-in",Social proof before CTA. Use 3-5 testimonials. Include photo + name + role. CTA after social proof.
+3,Product Demo + Features,"demo, product-demo, features, showcase, interactive, interactive-product-demo, interactive product demo","1. Hero, 2. Product video/mockup (center), 3. Feature breakdown per section, 4. Comparison (optional), 5. CTA",Video center + CTA right/bottom,Video surround: Brand color overlay. Features: Icon color #0080FF. Text: Dark #222,"Video play button pulse, feature scroll reveals, demo interaction highlights",Embedded product demo increases engagement. Use interactive mockup if possible. Auto-play video muted.
+4,Minimal Single Column,"minimal, simple, direct, minimal & direct, minimal-direct, single-column, clean","1. Hero headline, 2. Short description, 3. Benefit bullets (3 max), 4. CTA, 5. Footer","Center, large CTA button",Minimalist: Brand + white #FFFFFF + accent. Buttons: High contrast 7:1+. Text: Black/Dark grey,Minimal hover effects. Smooth scroll. CTA scale on hover (subtle),Single CTA focus. Large typography. Lots of whitespace. No nav clutter. Mobile-first.
+5,Funnel (3-Step Conversion),"funnel, conversion, conversion-optimized, conversion optimized, steps, wizard, onboarding","1. Hero, 2. Step 1 (problem), 3. Step 2 (solution), 4. Step 3 (action), 5. CTA progression",Each step: mini-CTA. Final: main CTA,"Step colors: 1 (Red/Problem), 2 (Orange/Process), 3 (Green/Solution). CTA: Brand color","Step number animations, progress bar fill, step transitions smooth scroll",Progressive disclosure. Show only essential info per step. Use progress indicators. Multiple CTAs.
+6,Comparison Table + CTA,"comparison, table, compare, versus, cta","1. Hero, 2. Problem intro, 3. Comparison table (product vs competitors), 4. Pricing (optional), 5. CTA",Table: Right column. CTA: Below table,Table: Alternating rows (white/light grey). Your product: Highlight #FFFACD (light yellow) or green. Text: Dark,"Table row hover highlight, price toggle animations, feature checkmark animations",Use comparison to show unique value. Highlight your product row. Include 'free trial' in pricing row.
+7,Lead Magnet + Form,"lead, form, signup, capture, email, magnet","1. Hero (benefit headline), 2. Lead magnet preview (ebook cover, checklist, etc), 3. Form (minimal fields), 4. CTA submit",Form CTA: Submit button,Lead magnet: Professional design. Form: Clean white bg. Inputs: Light border #CCCCCC. CTA: Brand color,"Form focus state animations, input validation animations, success confirmation animation",Form fields ≤ 3 for best conversion. Offer valuable lead magnet preview. Show form submission progress.
+8,Pricing Page + CTA,"pricing, plans, tiers, comparison, cta","1. Hero (pricing headline), 2. Price comparison cards, 3. Feature comparison table, 4. FAQ section, 5. Final CTA",Each card: CTA button. Sticky CTA in nav,"Free: Grey, Starter: Blue, Pro: Green/Gold, Enterprise: Dark. Cards: 1px border, shadow","Price toggle animation (monthly/yearly), card comparison highlight, FAQ accordion open/close",Recommend starter plan (pre-select/highlight). Show annual discount (20-30%). Use FAQs to address concerns.
+9,Video-First Hero,"video, hero, media, visual, engaging","1. Hero with video background, 2. Key features overlay, 3. Benefits section, 4. CTA",Overlay on video (center/bottom) + Bottom section,Dark overlay 60% on video. Brand accent for CTA. White text on dark.,"Video autoplay muted, parallax scroll, text fade-in on scroll",86% higher engagement with video. Add captions for accessibility. Compress video for performance.
+10,Scroll-Triggered Storytelling,"storytelling, scroll, narrative, story, immersive","1. Intro hook, 2. Chapter 1 (problem), 3. Chapter 2 (journey), 4. Chapter 3 (solution), 5. Climax CTA",End of each chapter (mini) + Final climax CTA,Progressive reveal. Each chapter has distinct color. Building intensity.,"ScrollTrigger animations, parallax layers, progressive disclosure, chapter transitions",Narrative increases time-on-page 3x. Use progress indicator. Mobile: simplify animations.
+11,AI Personalization Landing,"ai, personalization, smart, recommendation, dynamic","1. Dynamic hero (personalized), 2. Relevant features, 3. Tailored testimonials, 4. Smart CTA",Context-aware placement based on user segment,Adaptive based on user data. A/B test color variations per segment.,"Dynamic content swap, fade transitions, personalized product recommendations",20%+ conversion with personalization. Requires analytics integration. Fallback for new users.
+12,Waitlist/Coming Soon,"waitlist, coming-soon, launch, early-access, notify","1. Hero with countdown, 2. Product teaser/preview, 3. Email capture form, 4. Social proof (waitlist count)",Email form prominent (above fold) + Sticky form on scroll,Anticipation: Dark + accent highlights. Countdown in brand color. Urgency indicators.,"Countdown timer animation, email validation feedback, success confetti, social share buttons",Scarcity + exclusivity. Show waitlist count. Early access benefits. Referral program.
+13,Comparison Table Focus,"comparison, table, versus, compare, features","1. Hero (problem statement), 2. Comparison matrix (you vs competitors), 3. Feature deep-dive, 4. Winner CTA",After comparison table (highlighted row) + Bottom,Your product column highlighted (accent bg or green). Competitors neutral. Checkmarks green.,"Table row hover highlight, feature checkmark animations, sticky comparison header",Show value vs competitors. 35% higher conversion. Be factual. Include pricing if favorable.
+14,Pricing-Focused Landing,"pricing, price, cost, plans, subscription","1. Hero (value proposition), 2. Pricing cards (3 tiers), 3. Feature comparison, 4. FAQ, 5. Final CTA",Each pricing card + Sticky CTA in nav + Bottom,Popular plan highlighted (brand color border/bg). Free: grey. Enterprise: dark/premium.,"Price toggle monthly/annual animation, card hover lift, FAQ accordion smooth open",Annual discount 20-30%. Recommend mid-tier (most popular badge). Address objections in FAQ.
+15,App Store Style Landing,"app, mobile, download, store, install","1. Hero with device mockup, 2. Screenshots carousel, 3. Features with icons, 4. Reviews/ratings, 5. Download CTAs",Download buttons prominent (App Store + Play Store) throughout,Dark/light matching app store feel. Star ratings in gold. Screenshots with device frames.,"Device mockup rotations, screenshot slider, star rating animations, download button pulse",Show real screenshots. Include ratings (4.5+ stars). QR code for mobile. Platform-specific CTAs.
+16,FAQ/Documentation Landing,"faq, documentation, help, support, questions, faq/documentation, knowledge base","1. Hero with search bar, 2. Popular categories, 3. FAQ accordion, 4. Contact/support CTA",Search bar prominent + Contact CTA for unresolved questions,"Clean, high readability. Minimal color. Category icons in brand color. Success green for resolved.","Search autocomplete, smooth accordion open/close, category hover, helpful feedback buttons",Reduce support tickets. Track search analytics. Show related articles. Contact escalation path.
+17,Immersive/Interactive Experience,"immersive, interactive, experience, 3d, animation, immersive/interactive experience","1. Full-screen interactive element, 2. Guided product tour, 3. Key benefits revealed, 4. CTA after completion",After interaction complete + Skip option for impatient users,Immersive experience colors. Dark background for focus. Highlight interactive elements.,"WebGL, 3D interactions, gamification elements, progress indicators, reward animations",40% higher engagement. Performance trade-off. Provide skip option. Mobile fallback essential.
+18,Event/Conference Landing,"event, conference, meetup, registration, schedule, hero-centric design, hero-centric","1. Hero (date/location/countdown), 2. Speakers grid, 3. Agenda/schedule, 4. Sponsors, 5. Register CTA",Register CTA sticky + After speakers + Bottom,Urgency colors (countdown). Event branding. Speaker cards professional. Sponsor logos neutral.,"Countdown timer, speaker hover cards with bio, agenda tabs, early bird countdown",Early bird pricing with deadline. Social proof (past attendees). Speaker credibility. Multi-ticket discounts.
+19,Product Review/Ratings Focused,"reviews, ratings, testimonials, social-proof, social-proof-focused, stars","1. Hero (product + aggregate rating), 2. Rating breakdown, 3. Individual reviews, 4. Buy/CTA",After reviews summary + Buy button alongside reviews,Trust colors. Star ratings gold. Verified badge green. Review sentiment colors.,"Star fill animations, review filtering, helpful vote interactions, photo lightbox",User-generated content builds trust. Show verified purchases. Filter by rating. Respond to negative reviews.
+20,Community/Forum Landing,"community, forum, social, members, discussion","1. Hero (community value prop), 2. Popular topics/categories, 3. Active members showcase, 4. Join CTA",Join button prominent + After member showcase,"Warm, welcoming. Member photos add humanity. Topic badges in brand colors. Activity indicators green.","Member avatars animation, activity feed live updates, topic hover previews, join success celebration","Show active community (member count, posts today). Highlight benefits. Preview content. Easy onboarding."
+21,Before-After Transformation,"before-after, transformation, results, comparison","1. Hero (problem state), 2. Transformation slider/comparison, 3. How it works, 4. Results CTA",After transformation reveal + Bottom,Contrast: muted/grey (before) vs vibrant/colorful (after). Success green for results.,"Slider comparison interaction, before/after reveal animations, result counters, testimonial videos",Visual proof of value. 45% higher conversion. Real results. Specific metrics. Guarantee offer.
+22,Marketplace / Directory,"marketplace, directory, search, listing","1. Hero (Search focused), 2. Categories, 3. Featured Listings, 4. Trust/Safety, 5. CTA (Become a host/seller)",Hero Search Bar + Navbar 'List your item',"Search: High contrast. Categories: Visual icons. Trust: Blue/Green.","Search autocomplete animation, map hover pins, card carousel","Search bar is the CTA. Reduce friction to search. Popular searches suggestions."
+23,Newsletter / Content First,"newsletter, content, writer, blog, subscribe, minimal & direct, minimal-direct","1. Hero (Value Prop + Form), 2. Recent Issues/Archives, 3. Social Proof (Subscriber count), 4. About Author",Hero inline form + Sticky header form,"Minimalist. Paper-like background. Text focus. Accent color for Subscribe.","Text highlight animations, typewriter effect, subtle fade-in","Single field form (Email only). Show 'Join X, 000 readers'. Read sample link."
+24,Webinar Registration,"webinar, registration, event, training, live","1. Hero (Topic + Timer + Form), 2. What you'll learn, 3. Speaker Bio, 4. Urgency/Bonuses, 5. Form (again)",Hero (Right side form) + Bottom anchor,"Urgency: Red/Orange. Professional: Blue/Navy. Form: High contrast white.","Countdown timer, speaker avatar float, urgent ticker","Limited seats logic. 'Live' indicator. Auto-fill timezone."
+25,Enterprise Gateway,"enterprise, corporate, gateway, solutions, portal, trust, authority, trust & authority","1. Hero (Video/Mission), 2. Solutions by Industry, 3. Solutions by Role, 4. Client Logos, 5. Contact Sales",Contact Sales (Primary) + Login (Secondary),"Corporate: Navy/Grey. High integrity. Conservative accents.","Slow video background, logo carousel, tab switching for industries","Path selection (I am a...). Mega menu navigation. Trust signals prominent."
+26,Portfolio Grid,"portfolio, grid, showcase, gallery, masonry, portfolio grid + visuals","1. Hero (Name/Role), 2. Project Grid (Masonry), 3. About/Philosophy, 4. Contact",Project Card Hover + Footer Contact,"Neutral background (let work shine). Text: Black/White. Accent: Minimal.","Image lazy load reveal, hover overlay info, lightbox view","Visuals first. Filter by category. Fast loading essential."
+27,Horizontal Scroll Journey,"horizontal, scroll, journey, gallery, storytelling, panoramic, storytelling-driven","1. Intro (Vertical), 2. The Journey (Horizontal Track), 3. Detail Reveal, 4. Vertical Footer",Floating Sticky CTA or End of Horizontal Track,Continuous palette transition. Chapter colors. Progress bar #000000.,"Scroll-jacking (careful), parallax layers, horizontal slide, progress indicator","Immersive product discovery. High engagement. Keep navigation visible."
+28,Bento Grid Showcase,"bento, grid, features, modular, apple-style, showcase, feature-rich showcase","1. Hero, 2. Bento Grid (Key Features), 3. Detail Cards, 4. Tech Specs, 5. CTA",Floating Action Button or Bottom of Grid,"Card backgrounds: #F5F5F7 or Glass. Icons: Vibrant brand colors. Text: Dark.","Hover card scale (1.02), video inside cards, tilt effect, staggered reveal","Scannable value props. High information density without clutter. Mobile stack."
+29,Interactive 3D Configurator,"3d, configurator, customizer, interactive, product, interactive product demo","1. Hero (Configurator), 2. Feature Highlight (synced), 3. Price/Specs, 4. Purchase",Inside Configurator UI + Sticky Bottom Bar,"Neutral studio background. Product: Realistic materials. UI: Minimal overlay.","Real-time rendering, material swap animation, camera rotate/zoom, light reflection","Increases ownership feeling. 360 view reduces return rates. Direct add-to-cart."
+30,AI-Driven Dynamic Landing,"ai, dynamic, personalized, adaptive, generative","1. Prompt/Input Hero, 2. Generated Result Preview, 3. How it Works, 4. Value Prop","Input Field (Hero) + 'Try it' Buttons","Adaptive to user input. Dark mode for compute feel. Neon accents.","Typing text effects, shimmering generation loaders, morphing layouts","Immediate value demonstration. 'Show, don't tell'. Low friction start."
+31,Feature-Rich Showcase,"feature-rich, feature-rich showcase, features, showcase, product showcase","1. Hero (value prop), 2. Feature grid/cards (4-6), 3. Use cases or benefits, 4. Social proof or logos, 5. CTA",Hero (sticky) + After features + Bottom,Brand primary + card bg #FAFAFA. Feature icons accent. CTA contrasting.,"Feature card hover lift, scroll reveal, icon micro-interactions","Clear feature hierarchy. One key message per card. Strong CTA repetition."
+32,Hero-Centric Design,"hero-centric, hero-centric design, hero-first, hero above fold","1. Full-bleed Hero (headline + visual), 2. Single value prop strip, 3. Key benefit or proof, 4. Primary CTA",Hero dominant (center/bottom) + Sticky nav CTA,Hero: High-impact visual. Minimal text. CTA 7:1 contrast.,"Hero parallax or video, CTA pulse on scroll, minimal chrome","One primary CTA. Hero is 60-80% above fold. Mobile: same hierarchy."
+33,Trust & Authority + Conversion,"trust & authority, trust, authority, conversion, credibility, enterprise","1. Hero (mission/credibility), 2. Proof (logos, certs, stats), 3. Solution overview, 4. Clear CTA path",Contact Sales / Get Quote (primary) + Nav,"Navy/Grey corporate. Trust blue. Accent for CTA only.","Logo carousel, stat counters, testimonial strip","Security badges. Case studies. Transparent pricing. Low-friction form."
+34,Real-Time / Operations Landing,"real-time, real-time monitor, operations, dashboard, telemetry, live data","1. Hero (product + live preview or status), 2. Key metrics/indicators, 3. How it works, 4. CTA (Start trial / Contact)","Primary CTA in nav + After metrics",Dark or neutral. Status colors (green/amber/red). Data-dense but scannable.,"Live data ticker, status pulse, minimal decoration","For ops/security/iot products. Demo or sandbox link. Trust signals."
diff --git a/.claude/skills/ui-ux-pro-max/data/products.csv b/.claude/skills/ui-ux-pro-max/data/products.csv
new file mode 100644
index 000000000..0bb9fcb3e
--- /dev/null
+++ b/.claude/skills/ui-ux-pro-max/data/products.csv
@@ -0,0 +1,162 @@
+No,Product Type,Keywords,Primary Style Recommendation,Secondary Styles,Landing Page Pattern,Dashboard Style (if applicable),Color Palette Focus,Key Considerations
+1,SaaS (General),"app, b2b, cloud, general, saas, software, subscription",Glassmorphism + Flat Design,"Soft UI Evolution, Minimalism",Hero + Features + CTA,Data-Dense + Real-Time Monitoring,Trust blue + accent contrast,Balance modern feel with clarity. Focus on CTAs.
+2,Micro SaaS,"app, b2b, cloud, indie, micro, micro-saas, niche, saas, small, software, solo, subscription",Flat Design + Vibrant & Block,"Motion-Driven, Micro-interactions",Minimal & Direct + Demo,Executive Dashboard,Vibrant primary + white space,"Keep simple, show product quickly. Speed is key."
+3,E-commerce,"buy, commerce, e, ecommerce, products, retail, sell, shop, store",Vibrant & Block-based,"Aurora UI, Motion-Driven",Feature-Rich Showcase,Sales Intelligence Dashboard,Brand primary + success green,Engagement & conversions. High visual hierarchy.
+4,E-commerce Luxury,"buy, commerce, e, ecommerce, elegant, exclusive, high-end, luxury, premium, products, retail, sell, shop, store",Liquid Glass + Glassmorphism,"3D & Hyperrealism, Aurora UI",Feature-Rich Showcase,Sales Intelligence Dashboard,Premium colors + minimal accent,Elegance & sophistication. Premium materials.
+5,B2B Service,"appointment, b, b2b, booking, business, consultation, corporate, enterprise, service",Trust & Authority + Minimal,"Feature-Rich, Conversion-Optimized",Feature-Rich Showcase,Sales Intelligence Dashboard,Professional blue + neutral grey,Credibility essential. Clear ROI messaging.
+6,Financial Dashboard,"admin, analytics, dashboard, data, financial, panel",Dark Mode (OLED) + Data-Dense,"Minimalism, Accessible & Ethical",N/A - Dashboard focused,Financial Dashboard,Dark bg + red/green alerts + trust blue,"High contrast, real-time updates, accuracy paramount."
+7,Analytics Dashboard,"admin, analytics, dashboard, data, panel",Data-Dense + Heat Map & Heatmap,"Minimalism, Dark Mode (OLED)",N/A - Analytics focused,Drill-Down Analytics + Comparative,Cool→Hot gradients + neutral grey,Clarity > aesthetics. Color-coded data priority.
+8,Healthcare App,"app, clinic, health, healthcare, medical, patient",Neumorphism + Accessible & Ethical,"Soft UI Evolution, Claymorphism (for patients)",Social Proof-Focused,User Behavior Analytics,Calm blue + health green + trust,Accessibility mandatory. Calming aesthetic.
+9,Educational App,"app, course, education, educational, learning, school, training",Claymorphism + Micro-interactions,"Vibrant & Block-based, Flat Design",Storytelling-Driven,User Behavior Analytics,Playful colors + clear hierarchy,Engagement & ease of use. Age-appropriate design.
+10,Creative Agency,"agency, creative, design, marketing, studio",Brutalism + Motion-Driven,"Retro-Futurism, Storytelling-Driven",Storytelling-Driven,N/A - Portfolio focused,Bold primaries + artistic freedom,Differentiation key. Wow-factor necessary.
+11,Portfolio/Personal,"creative, personal, portfolio, projects, showcase, work",Motion-Driven + Minimalism,"Brutalism, Aurora UI",Storytelling-Driven,N/A - Personal branding,Brand primary + artistic interpretation,Showcase work. Personality shine through.
+12,Gaming,"entertainment, esports, game, gaming, play",3D & Hyperrealism + Retro-Futurism,"Motion-Driven, Vibrant & Block",Feature-Rich Showcase,N/A - Game focused,Vibrant + neon + immersive colors,Immersion priority. Performance critical.
+13,Government/Public Service,"appointment, booking, consultation, government, public, service",Accessible & Ethical + Minimalism,"Flat Design, Inclusive Design",Minimal & Direct,Executive Dashboard,Professional blue + high contrast,WCAG AAA mandatory. Trust paramount.
+14,Fintech/Crypto,"banking, blockchain, crypto, defi, finance, fintech, money, nft, payment, web3",Glassmorphism + Dark Mode (OLED),"Retro-Futurism, Motion-Driven",Conversion-Optimized,Real-Time Monitoring + Predictive,Dark tech colors + trust + vibrant accents,Security perception. Real-time data critical.
+15,Social Media App,"app, community, content, entertainment, media, network, sharing, social, streaming, users, video",Vibrant & Block-based + Motion-Driven,"Aurora UI, Micro-interactions",Feature-Rich Showcase,User Behavior Analytics,Vibrant + engagement colors,Engagement & retention. Addictive design ethics.
+16,Productivity Tool,"collaboration, productivity, project, task, tool, workflow",Flat Design + Micro-interactions,"Minimalism, Soft UI Evolution",Interactive Product Demo,Drill-Down Analytics,Clear hierarchy + functional colors,Ease of use. Speed & efficiency focus.
+17,Design System/Component Library,"component, design, library, system",Minimalism + Accessible & Ethical,"Flat Design, Zero Interface",Feature-Rich Showcase,N/A - Dev focused,Clear hierarchy + code-like structure,Consistency. Developer-first approach.
+18,AI/Chatbot Platform,"ai, artificial-intelligence, automation, chatbot, machine-learning, ml, platform",AI-Native UI + Minimalism,"Zero Interface, Glassmorphism",Interactive Product Demo,AI/ML Analytics Dashboard,Neutral + AI Purple (#6366F1),Conversational UI. Streaming text. Context awareness. Minimal chrome.
+19,NFT/Web3 Platform,"nft, platform, web",Cyberpunk UI + Glassmorphism,"Aurora UI, 3D & Hyperrealism",Feature-Rich Showcase,Crypto/Blockchain Dashboard,Dark + Neon + Gold (#FFD700),Wallet integration. Transaction feedback. Gas fees display. Dark mode essential.
+20,Creator Economy Platform,"creator, economy, platform",Vibrant & Block-based + Bento Box Grid,"Motion-Driven, Aurora UI",Social Proof-Focused,User Behavior Analytics,Vibrant + Brand colors,Creator profiles. Monetization display. Engagement metrics. Social proof.
+21,Remote Work/Collaboration Tool,"collaboration, remote, tool, work",Soft UI Evolution + Minimalism,"Glassmorphism, Micro-interactions",Feature-Rich Showcase,Drill-Down Analytics,Calm Blue + Neutral grey,Real-time collaboration. Status indicators. Video integration. Notification management.
+22,Mental Health App,"app, health, mental",Neumorphism + Accessible & Ethical,"Claymorphism, Soft UI Evolution",Social Proof-Focused,Healthcare Analytics,Calm Pastels + Trust colors,Calming aesthetics. Privacy-first. Crisis resources. Progress tracking. Accessibility mandatory.
+23,Pet Tech App,"app, pet, tech",Claymorphism + Vibrant & Block-based,"Micro-interactions, Flat Design",Storytelling-Driven,User Behavior Analytics,Playful + Warm colors,Pet profiles. Health tracking. Playful UI. Photo galleries. Vet integration.
+24,Smart Home/IoT Dashboard,"admin, analytics, dashboard, data, home, iot, panel, smart",Glassmorphism + Dark Mode (OLED),"Minimalism, AI-Native UI",Interactive Product Demo,Real-Time Monitoring,Dark + Status indicator colors,Device status. Real-time controls. Energy monitoring. Automation rules. Quick actions.
+25,EV/Charging Ecosystem,"charging, ecosystem, ev",Minimalism + Aurora UI,"Glassmorphism, Organic Biophilic",Hero-Centric Design,Energy/Utilities Dashboard,Electric Blue (#009CD1) + Green,Charging station maps. Range estimation. Cost calculation. Environmental impact.
+26,Subscription Box Service,"appointment, booking, box, consultation, membership, plan, recurring, service, subscription",Vibrant & Block-based + Motion-Driven,"Claymorphism, Aurora UI",Feature-Rich Showcase,E-commerce Analytics,Brand + Excitement colors,Unboxing experience. Personalization quiz. Subscription management. Product reveals.
+27,Podcast Platform,"platform, podcast",Dark Mode (OLED) + Minimalism,"Motion-Driven, Vibrant & Block-based",Storytelling-Driven,Media/Entertainment Dashboard,Dark + Audio waveform accents,Audio player UX. Episode discovery. Creator tools. Analytics for podcasters.
+28,Dating App,"app, dating",Vibrant & Block-based + Motion-Driven,"Aurora UI, Glassmorphism",Social Proof-Focused,User Behavior Analytics,Warm + Romantic (Pink/Red gradients),Profile cards. Swipe interactions. Match animations. Safety features. Video chat.
+29,Micro-Credentials/Badges Platform,"badges, credentials, micro, platform",Minimalism + Flat Design,"Accessible & Ethical, Swiss Modernism 2.0",Trust & Authority,Education Dashboard,Trust Blue + Gold (#FFD700),Credential verification. Badge display. Progress tracking. Issuer trust. LinkedIn integration.
+30,Knowledge Base/Documentation,"base, documentation, knowledge",Minimalism + Accessible & Ethical,"Swiss Modernism 2.0, Flat Design",FAQ/Documentation,N/A - Documentation focused,Clean hierarchy + minimal color,Search-first. Clear navigation. Code highlighting. Version switching. Feedback system.
+31,Hyperlocal Services,"appointment, booking, consultation, hyperlocal, service, services",Minimalism + Vibrant & Block-based,"Micro-interactions, Flat Design",Conversion-Optimized,Drill-Down Analytics + Map,Location markers + Trust colors,Map integration. Service categories. Provider profiles. Booking system. Reviews.
+32,Beauty/Spa/Wellness Service,"appointment, beauty, booking, consultation, service, spa, wellness",Soft UI Evolution + Neumorphism,"Glassmorphism, Minimalism",Hero-Centric Design + Social Proof,User Behavior Analytics,Soft pastels (Pink #FFB6C1 Sage #90EE90) + Cream + Gold accents,Calming aesthetic. Booking system. Service menu. Before/after gallery. Testimonials. Relaxing imagery.
+33,Luxury/Premium Brand,"brand, elegant, exclusive, high-end, luxury, premium",Liquid Glass + Glassmorphism,"Minimalism, 3D & Hyperrealism",Storytelling-Driven + Feature-Rich,Sales Intelligence Dashboard,Black + Gold (#FFD700) + White + Minimal accent,Elegance paramount. Premium imagery. Storytelling. High-quality visuals. Exclusive feel.
+34,Restaurant/Food Service,"appointment, booking, consultation, delivery, food, menu, order, restaurant, service",Vibrant & Block-based + Motion-Driven,"Claymorphism, Flat Design",Hero-Centric Design + Conversion,N/A - Booking focused,Warm colors (Orange Red Brown) + appetizing imagery,Menu display. Online ordering. Reservation system. Food photography. Location/hours prominent.
+35,Fitness/Gym App,"app, exercise, fitness, gym, health, workout",Vibrant & Block-based + Dark Mode (OLED),"Motion-Driven, Neumorphism",Feature-Rich Showcase,User Behavior Analytics,Energetic (Orange #FF6B35 Electric Blue) + Dark bg,Progress tracking. Workout plans. Community features. Achievements. Motivational design.
+36,Real Estate/Property,"buy, estate, housing, property, real, real-estate, rent",Glassmorphism + Minimalism,"Motion-Driven, 3D & Hyperrealism",Hero-Centric Design + Feature-Rich,Sales Intelligence Dashboard,Trust Blue (#0077B6) + Gold accents + White,Property listings. Virtual tours. Map integration. Agent profiles. Mortgage calculator. High-quality imagery.
+37,Travel/Tourism Agency,"agency, booking, creative, design, flight, hotel, marketing, studio, tourism, travel, vacation",Aurora UI + Motion-Driven,"Vibrant & Block-based, Glassmorphism",Storytelling-Driven + Hero-Centric,Booking Analytics,Vibrant destination colors + Sky Blue + Warm accents,Destination showcase. Booking system. Itinerary builder. Reviews. Inspiration galleries. Mobile-first.
+38,Hotel/Hospitality,"hospitality, hotel",Liquid Glass + Minimalism,"Glassmorphism, Soft UI Evolution",Hero-Centric Design + Social Proof,Revenue Management Dashboard,Warm neutrals + Gold (#D4AF37) + Brand accent,Room booking. Amenities showcase. Location maps. Guest reviews. Seasonal pricing. Luxury imagery.
+39,Wedding/Event Planning,"conference, event, meetup, planning, registration, ticket, wedding",Soft UI Evolution + Aurora UI,"Glassmorphism, Motion-Driven",Storytelling-Driven + Social Proof,N/A - Planning focused,Soft Pink (#FFD6E0) + Gold + Cream + Sage,Portfolio gallery. Vendor directory. Planning tools. Timeline. Budget tracker. Romantic aesthetic.
+40,Legal Services,"appointment, attorney, booking, compliance, consultation, contract, law, legal, service, services",Trust & Authority + Minimalism,"Accessible & Ethical, Swiss Modernism 2.0",Trust & Authority + Minimal,Case Management Dashboard,Navy Blue (#1E3A5F) + Gold + White,Credibility paramount. Practice areas. Attorney profiles. Case results. Contact forms. Professional imagery.
+41,Insurance Platform,"insurance, platform",Trust & Authority + Flat Design,"Accessible & Ethical, Minimalism",Conversion-Optimized + Trust,Claims Analytics Dashboard,Trust Blue (#0066CC) + Green (security) + Neutral,Quote calculator. Policy comparison. Claims process. Trust signals. Clear pricing. Security badges.
+42,Banking/Traditional Finance,"banking, finance, traditional",Minimalism + Accessible & Ethical,"Trust & Authority, Dark Mode (OLED)",Trust & Authority + Feature-Rich,Financial Dashboard,Navy (#0A1628) + Trust Blue + Gold accents,Security-first. Account overview. Transaction history. Mobile banking. Accessibility critical. Trust paramount.
+43,Online Course/E-learning,"course, e, learning, online",Claymorphism + Vibrant & Block-based,"Motion-Driven, Flat Design",Feature-Rich Showcase + Social Proof,Education Dashboard,Vibrant learning colors + Progress green,Course catalog. Progress tracking. Video player. Quizzes. Certificates. Community forums. Gamification.
+44,Non-profit/Charity,"charity, non, profit",Accessible & Ethical + Organic Biophilic,"Minimalism, Storytelling-Driven",Storytelling-Driven + Trust,Donation Analytics Dashboard,Cause-related colors + Trust + Warm,Impact stories. Donation flow. Transparency reports. Volunteer signup. Event calendar. Emotional connection.
+45,Music Streaming,"music, streaming",Dark Mode (OLED) + Vibrant & Block-based,"Motion-Driven, Aurora UI",Feature-Rich Showcase,Media/Entertainment Dashboard,Dark (#121212) + Vibrant accents + Album art colors,Audio player. Playlist management. Artist pages. Personalization. Social features. Waveform visualizations.
+46,Video Streaming/OTT,"ott, streaming, video",Dark Mode (OLED) + Motion-Driven,"Glassmorphism, Vibrant & Block-based",Hero-Centric Design + Feature-Rich,Media/Entertainment Dashboard,Dark bg + Content poster colors + Brand accent,Video player. Content discovery. Watchlist. Continue watching. Personalized recommendations. Thumbnail-heavy.
+47,Job Board/Recruitment,"board, job, recruitment",Flat Design + Minimalism,"Vibrant & Block-based, Accessible & Ethical",Conversion-Optimized + Feature-Rich,HR Analytics Dashboard,Professional Blue + Success Green + Neutral,Job listings. Search/filter. Company profiles. Application tracking. Resume upload. Salary insights.
+48,Marketplace (P2P),"buyers, listings, marketplace, p, platform, sellers",Vibrant & Block-based + Flat Design,"Micro-interactions, Trust & Authority",Feature-Rich Showcase + Social Proof,E-commerce Analytics,Trust colors + Category colors + Success green,Seller/buyer profiles. Listings. Reviews/ratings. Secure payment. Messaging. Search/filter. Trust badges.
+49,Logistics/Delivery,"delivery, logistics",Minimalism + Flat Design,"Dark Mode (OLED), Micro-interactions",Feature-Rich Showcase + Conversion,Real-Time Monitoring + Route Analytics,Blue (#2563EB) + Orange (tracking) + Green (delivered),Real-time tracking. Delivery scheduling. Route optimization. Driver management. Status updates. Map integration.
+50,Agriculture/Farm Tech,"agriculture, farm, tech",Organic Biophilic + Flat Design,"Minimalism, Accessible & Ethical",Feature-Rich Showcase + Trust,IoT Sensor Dashboard,Earth Green (#4A7C23) + Brown + Sky Blue,Crop monitoring. Weather data. IoT sensors. Yield tracking. Market prices. Sustainable imagery.
+51,Construction/Architecture,"architecture, construction",Minimalism + 3D & Hyperrealism,"Brutalism, Swiss Modernism 2.0",Hero-Centric Design + Feature-Rich,Project Management Dashboard,Grey (#4A4A4A) + Orange (safety) + Blueprint Blue,Project portfolio. 3D renders. Timeline. Material specs. Team collaboration. Blueprint aesthetic.
+52,Automotive/Car Dealership,"automotive, car, dealership",Motion-Driven + 3D & Hyperrealism,"Dark Mode (OLED), Glassmorphism",Hero-Centric Design + Feature-Rich,Sales Intelligence Dashboard,Brand colors + Metallic accents + Dark/Light,Vehicle showcase. 360° views. Comparison tools. Financing calculator. Test drive booking. High-quality imagery.
+53,Photography Studio,"photography, studio",Motion-Driven + Minimalism,"Aurora UI, Glassmorphism",Storytelling-Driven + Hero-Centric,N/A - Portfolio focused,Black + White + Minimal accent,Portfolio gallery. Before/after. Service packages. Booking system. Client galleries. Full-bleed imagery.
+54,Coworking Space,"coworking, space",Vibrant & Block-based + Glassmorphism,"Minimalism, Motion-Driven",Hero-Centric Design + Feature-Rich,Occupancy Dashboard,Energetic colors + Wood tones + Brand accent,Space tour. Membership plans. Booking system. Amenities. Community events. Virtual tour.
+55,Home Services (Plumber/Electrician),"appointment, booking, consultation, electrician, home, plumber, service, services",Flat Design + Trust & Authority,"Minimalism, Accessible & Ethical",Conversion-Optimized + Trust,Service Analytics,Trust Blue + Safety Orange + Professional grey,Service list. Emergency contact. Booking. Price transparency. Certifications. Local trust signals.
+56,Childcare/Daycare,"childcare, daycare",Claymorphism + Vibrant & Block-based,"Soft UI Evolution, Accessible & Ethical",Social Proof-Focused + Trust,Parent Dashboard,Playful pastels + Safe colors + Warm accents,Programs. Staff profiles. Safety certifications. Parent portal. Activity updates. Cheerful imagery.
+57,Senior Care/Elderly,"care, elderly, senior",Accessible & Ethical + Soft UI Evolution,"Minimalism, Neumorphism",Trust & Authority + Social Proof,Healthcare Analytics,Calm Blue + Warm neutrals + Large text,Care services. Staff qualifications. Facility tour. Family portal. Large touch targets. High contrast. Accessibility-first.
+58,Medical Clinic,"clinic, medical",Accessible & Ethical + Minimalism,"Neumorphism, Trust & Authority",Trust & Authority + Conversion,Healthcare Analytics,Medical Blue (#0077B6) + Trust White + Calm Green,Services. Doctor profiles. Online booking. Patient portal. Insurance info. HIPAA compliant. Trust signals.
+59,Pharmacy/Drug Store,"drug, pharmacy, store",Flat Design + Accessible & Ethical,"Minimalism, Trust & Authority",Conversion-Optimized + Trust,Inventory Dashboard,Pharmacy Green + Trust Blue + Clean White,Product catalog. Prescription upload. Refill reminders. Health info. Store locator. Safety certifications.
+60,Dental Practice,"dental, practice",Soft UI Evolution + Minimalism,"Accessible & Ethical, Trust & Authority",Social Proof-Focused + Conversion,Patient Analytics,Fresh Blue + White + Smile Yellow accent,Services. Dentist profiles. Before/after. Online booking. Insurance. Patient testimonials. Friendly imagery.
+61,Veterinary Clinic,"clinic, veterinary",Claymorphism + Accessible & Ethical,"Soft UI Evolution, Flat Design",Social Proof-Focused + Trust,Pet Health Dashboard,Caring Blue + Pet-friendly colors + Warm accents,Pet services. Vet profiles. Online booking. Pet portal. Emergency info. Friendly animal imagery.
+62,Florist/Plant Shop,"florist, plant, shop",Organic Biophilic + Vibrant & Block-based,"Aurora UI, Motion-Driven",Hero-Centric Design + Conversion,E-commerce Analytics,Natural Green + Floral pinks/purples + Earth tones,Product catalog. Occasion categories. Delivery scheduling. Care guides. Seasonal collections. Beautiful imagery.
+63,Bakery/Cafe,"bakery, cafe",Vibrant & Block-based + Soft UI Evolution,"Claymorphism, Motion-Driven",Hero-Centric Design + Conversion,N/A - Order focused,Warm Brown + Cream + Appetizing accents,Menu display. Online ordering. Location/hours. Catering. Seasonal specials. Appetizing photography.
+64,Brewery/Winery,"brewery, winery",Motion-Driven + Storytelling-Driven,"Dark Mode (OLED), Organic Biophilic",Storytelling-Driven + Hero-Centric,N/A - E-commerce focused,Deep amber/burgundy + Gold + Craft aesthetic,Product showcase. Story/heritage. Tasting notes. Events. Club membership. Artisanal imagery.
+65,Airline,"airline, aviation, flight, travel, booking, airport, flying",Minimalism + Glassmorphism,"Motion-Driven, Accessible & Ethical",Conversion-Optimized + Feature-Rich,Operations Dashboard,Sky Blue + Brand colors + Trust accents,Flight search. Booking. Check-in. Boarding pass. Loyalty program. Route maps. Mobile-first.
+66,News/Media Platform,"content, entertainment, media, news, platform, streaming, video",Minimalism + Flat Design,"Dark Mode (OLED), Accessible & Ethical",Hero-Centric Design + Feature-Rich,Media Analytics Dashboard,Brand colors + High contrast + Category colors,Article layout. Breaking news. Categories. Search. Subscription. Mobile reading. Fast loading.
+67,Magazine/Blog,"articles, blog, content, magazine, posts, writing",Swiss Modernism 2.0 + Motion-Driven,"Minimalism, Aurora UI",Storytelling-Driven + Hero-Centric,Content Analytics,Editorial colors + Brand primary + Clean white,Article showcase. Category navigation. Author profiles. Newsletter signup. Related content. Typography-focused.
+68,Freelancer Platform,"freelancer, platform",Flat Design + Minimalism,"Vibrant & Block-based, Micro-interactions",Feature-Rich Showcase + Conversion,Marketplace Analytics,Professional Blue + Success Green + Neutral,Profile creation. Portfolio. Skill matching. Messaging. Payment. Reviews. Project management.
+69,Marketing Agency,"agency, creative, design, marketing, studio",Brutalism + Motion-Driven,"Vibrant & Block-based, Aurora UI",Storytelling-Driven + Feature-Rich,Campaign Analytics,Bold brand colors + Creative freedom,Portfolio. Case studies. Services. Team. Creative showcase. Results-focused. Bold aesthetic.
+70,Event Management,"conference, event, management, meetup, registration, ticket",Vibrant & Block-based + Motion-Driven,"Glassmorphism, Aurora UI",Hero-Centric Design + Feature-Rich,Event Analytics,Event theme colors + Excitement accents,Event showcase. Registration. Agenda. Speakers. Sponsors. Ticket sales. Countdown timer.
+71,Membership/Community,"community, membership",Vibrant & Block-based + Soft UI Evolution,"Bento Box Grid, Micro-interactions",Social Proof-Focused + Conversion,Community Analytics,Community brand colors + Engagement accents,Member benefits. Pricing tiers. Community showcase. Events. Member directory. Exclusive content.
+72,Newsletter Platform,"newsletter, platform",Minimalism + Flat Design,"Swiss Modernism 2.0, Accessible & Ethical",Minimal & Direct + Conversion,Email Analytics,Brand primary + Clean white + CTA accent,Subscribe form. Archive. About. Social proof. Sample content. Simple conversion.
+73,Digital Products/Downloads,"digital, downloads, products",Vibrant & Block-based + Motion-Driven,"Glassmorphism, Bento Box Grid",Feature-Rich Showcase + Conversion,E-commerce Analytics,Product category colors + Brand + Success green,Product showcase. Preview. Pricing. Instant delivery. License management. Customer reviews.
+74,Church/Religious Organization,"church, organization, religious",Accessible & Ethical + Soft UI Evolution,"Minimalism, Trust & Authority",Hero-Centric Design + Social Proof,N/A - Community focused,Warm Gold + Deep Purple/Blue + White,Service times. Events. Sermons. Community. Giving. Location. Welcoming imagery.
+75,Sports Team/Club,"club, sports, team",Vibrant & Block-based + Motion-Driven,"Dark Mode (OLED), 3D & Hyperrealism",Hero-Centric Design + Feature-Rich,Performance Analytics,Team colors + Energetic accents,Schedule. Roster. News. Tickets. Merchandise. Fan engagement. Action imagery.
+76,Museum/Gallery,"gallery, museum",Minimalism + Motion-Driven,"Swiss Modernism 2.0, 3D & Hyperrealism",Storytelling-Driven + Feature-Rich,Visitor Analytics,Art-appropriate neutrals + Exhibition accents,Exhibitions. Collections. Tickets. Events. Virtual tours. Educational content. Art-focused design.
+77,Theater/Cinema,"cinema, theater",Dark Mode (OLED) + Motion-Driven,"Vibrant & Block-based, Glassmorphism",Hero-Centric Design + Conversion,Booking Analytics,Dark + Spotlight accents + Gold,Showtimes. Seat selection. Trailers. Coming soon. Membership. Dramatic imagery.
+78,Language Learning App,"app, language, learning",Claymorphism + Vibrant & Block-based,"Micro-interactions, Flat Design",Feature-Rich Showcase + Social Proof,Learning Analytics,Playful colors + Progress indicators + Country flags,Lesson structure. Progress tracking. Gamification. Speaking practice. Community. Achievement badges.
+79,Coding Bootcamp,"bootcamp, coding",Dark Mode (OLED) + Minimalism,"Cyberpunk UI, Flat Design",Feature-Rich Showcase + Social Proof,Student Analytics,Code editor colors + Brand + Success green,Curriculum. Projects. Career outcomes. Alumni. Pricing. Application. Terminal aesthetic.
+80,Cybersecurity Platform,"cyber, security, platform",Cyberpunk UI + Dark Mode (OLED),"Neubrutalism, Minimal & Direct",Trust & Authority + Real-Time,Real-Time Monitoring + Heat Map,Matrix Green + Deep Black + Terminal feel,Data density. Threat visualization. Dark mode default.
+81,Developer Tool / IDE,"dev, developer, tool, ide",Dark Mode (OLED) + Minimalism,"Flat Design, Bento Box Grid",Minimal & Direct + Documentation,Real-Time Monitor + Terminal,Dark syntax theme colors + Blue focus,Keyboard shortcuts. Syntax highlighting. Fast performance.
+82,Biotech / Life Sciences,"biotech, biology, science",Glassmorphism + Clean Science,"Minimalism, Organic Biophilic",Storytelling-Driven + Research,Data-Dense + Predictive,Sterile White + DNA Blue + Life Green,Data accuracy. Cleanliness. Complex data viz.
+83,Space Tech / Aerospace,"aerospace, space, tech",Holographic / HUD + Dark Mode,"Glassmorphism, 3D & Hyperrealism",Immersive Experience + Hero,Real-Time Monitoring + 3D,Deep Space Black + Star White + Metallic,High-tech feel. Precision. Telemetry data.
+84,Architecture / Interior,"architecture, design, interior",Exaggerated Minimalism + High Imagery,"Swiss Modernism 2.0, Parallax",Portfolio Grid + Visuals,Project Management + Gallery,Monochrome + Gold Accent + High Imagery,High-res images. Typography. Space.
+85,Quantum Computing Interface,"quantum, computing, physics, qubit, future, science",Holographic / HUD + Dark Mode,"Glassmorphism, Spatial UI",Immersive/Interactive Experience,3D Spatial Data + Real-Time Monitor,Quantum Blue #00FFFF + Deep Black + Interference patterns,Visualize complexity. Qubit states. Probability clouds. High-tech trust.
+86,Biohacking / Longevity App,"biohacking, health, longevity, tracking, wellness, science",Biomimetic / Organic 2.0,"Minimalism, Dark Mode (OLED)",Data-Dense + Storytelling,Real-Time Monitor + Biological Data,Cellular Pink/Red + DNA Blue + Clean White,Personal data privacy. Scientific credibility. Biological visualizations.
+87,Autonomous Drone Fleet Manager,"drone, autonomous, fleet, aerial, logistics, robotics",HUD / Sci-Fi FUI,"Real-Time Monitor, Spatial UI",Real-Time Monitor,Geographic + Real-Time,Tactical Green #00FF00 + Alert Red + Map Dark,Real-time telemetry. 3D spatial awareness. Latency indicators. Safety alerts.
+88,Generative Art Platform,"art, generative, ai, creative, platform, gallery",Minimalism (Frame) + Gen Z Chaos,"Masonry Grid, Dark Mode",Bento Grid Showcase,Gallery / Portfolio,Neutral #F5F5F5 (Canvas) + User Content,Content is king. Fast loading. Creator attribution. Minting flow.
+89,Spatial Computing OS / App,"spatial, vr, ar, vision, os, immersive, mixed-reality",Spatial UI (VisionOS),"Glassmorphism, 3D & Hyperrealism",Immersive/Interactive Experience,Spatial Dashboard,Frosted Glass + System Colors + Depth,Gaze/Pinch interaction. Depth hierarchy. Environment awareness.
+90,Sustainable Energy / Climate Tech,"climate, energy, sustainable, green, tech, carbon",Organic Biophilic + E-Ink / Paper,"Data-Dense, Swiss Modernism",Interactive Demo + Data,Energy/Utilities Dashboard,Earth Green + Sky Blue + Solar Yellow,Data transparency. Impact visualization. Low-carbon web design.
+91,Personal Finance Tracker,"budget, expense, money, finance, spending, savings, tracker, personal, wallet",Glassmorphism + Dark Mode (OLED),"Minimalism, Flat Design",Interactive Product Demo,Financial Dashboard,Calm blue + success green + alert red + chart accents,Category pie/donut charts. Monthly trend lines. Budget progress bars. Transaction list with swipe actions. Receipt camera. Currency formatting. Recurring entries.
+92,Chat & Messaging App,"chat, message, messenger, im, realtime, conversation, inbox, dm, whatsapp, telegram",Minimalism + Micro-interactions,"Glassmorphism, Flat Design",Feature-Rich Showcase + Demo,User Behavior Analytics,Brand primary + bubble contrast (sender/receiver) + typing grey,Bubble UI (left/right alignment). Typing indicators. Read receipts (✓✓). Image/file preview. Emoji reactions. Group avatars. Online status dots. Swipe-to-reply.
+93,Notes & Writing App,"notes, memo, writing, editor, notebook, markdown, journal, notion, obsidian",Minimalism + Flat Design,"Swiss Modernism 2.0, Soft UI Evolution",Minimal & Direct,N/A - Editor focused,Clean white/cream + minimal accent + editor syntax colors,WYSIWYG or Markdown toggle. Folder/tag organization. Full-text search. Cloud sync. Typography-first. Distraction-free zen mode. Slash-command palette.
+94,Habit Tracker,"habit, streak, routine, daily, tracker, goals, consistency, discipline",Claymorphism + Vibrant & Block-based,"Micro-interactions, Flat Design",Social Proof-Focused + Demo,User Behavior Analytics,Streak warm (amber/orange) + progress green + motivational accents,Streak calendar heatmap. Daily check-in interaction. Gamification (badges/levels/fire). Reminder push. Progress ring charts. Weekly/monthly stats. Motivational micro-copy.
+95,Food Delivery / On-Demand,"delivery, food, order, uber-eats, doordash, takeout, on-demand, courier",Vibrant & Block-based + Motion-Driven,"Glassmorphism, Flat Design",Hero-Centric Design + Feature-Rich,Real-Time Monitoring + Map,Appetizing warm (orange/red) + trust blue + map accent,Restaurant cards with ratings. Menu category horizontal scroll. Cart bottom sheet. Real-time map tracking + driver ETA. Order status stepper. Rating post-delivery.
+96,Ride Hailing / Transportation,"ride, taxi, uber, lyft, transport, carpool, driver, trip, fare",Minimalism + Glassmorphism,"Dark Mode (OLED), Motion-Driven",Conversion-Optimized + Demo,Real-Time Monitoring + Map,Brand primary + map neutral + status indicator colors,Map-centric full-screen UI. Pickup/dropoff pins + route polyline. Driver card (photo/rating/vehicle). Fare estimate. Trip timer. Safety SOS button. Payment sheet.
+97,Recipe & Cooking App,"recipe, cooking, food, kitchen, cookbook, meal, ingredient, chef",Claymorphism + Vibrant & Block-based,"Soft UI Evolution, Organic Biophilic",Hero-Centric Design + Feature-Rich,N/A - Content focused,Warm food tones (terracotta/sage/cream) + appetizing imagery,Step-by-step with checkable instructions. Ingredient list with serving adjuster. Built-in timer per step. Cooking mode (screen-awake + large text). Save/bookmark. Share.
+98,Meditation & Mindfulness,"meditation, mindfulness, calm, breathe, wellness, relaxation, sleep, headspace",Neumorphism + Soft UI Evolution,"Aurora UI, Glassmorphism",Storytelling-Driven + Social Proof,User Behavior Analytics,Ultra-calm pastels (lavender/sage/sky) + breathing animation gradient,Breathing circle animation. Session duration picker. Ambient sound mixer. Streak/consistency tracking. Guided audio player. Sleep timer. Minimal chrome. Slow easing transitions only.
+99,Weather App,"weather, forecast, temperature, climate, rain, sun, location, humidity",Glassmorphism + Aurora UI,"Motion-Driven, Minimalism",Hero-Centric Design,N/A - Utility focused,Atmospheric gradients (sky blue → sunset → storm grey) + temp scale,Location auto-detect. Hourly horizontal scroll + daily/weekly list. Animated weather icons. Air quality index. UV/wind/humidity chips. Radar map overlay. Widget-friendly layout.
+100,Diary & Journal App,"diary, journal, personal, daily, reflection, mood, gratitude, writing",Soft UI Evolution + Minimalism,"Neumorphism, Sketch Hand-Drawn",Storytelling-Driven,N/A - Personal focused,Warm paper tones (cream/linen) + muted ink + mood-coded accents,Calendar month-view entry. Mood tag selector (emoji/color). Photo/voice attachment. Writing prompts. Privacy lock (FaceID/PIN). Search across entries. Export to PDF.
+101,CRM & Client Management,"crm, client, customer, sales, pipeline, contact, lead, deal, hubspot",Flat Design + Minimalism,"Soft UI Evolution, Micro-interactions",Feature-Rich Showcase + Demo,Sales Intelligence Dashboard,Professional blue + pipeline stage colors + closed-won green,Contact card list with avatar. Pipeline kanban board. Activity timeline. Quick-log (call/email/meeting). Deal amount + probability. Tag/segment filter. Mobile quick-actions.
+102,Inventory & Stock Management,"inventory, stock, warehouse, product, barcode, supply, sku, management",Flat Design + Minimalism,"Dark Mode (OLED), Accessible & Ethical",Feature-Rich Showcase,Real-Time Monitoring + Data-Dense,Functional neutral + status traffic-light (green/amber/red) + scanner accent,Product list/grid with thumbnails. Barcode/QR scanner. Stock level badges. Low-stock alert banner. Category/location filter. Batch edit. Reorder trigger. Audit log.
+103,Flashcard & Study Tool,"flashcard, quiz, study, spaced-repetition, anki, learn, memory, exam",Claymorphism + Micro-interactions,"Vibrant & Block-based, Flat Design",Feature-Rich Showcase + Demo,Learning Analytics,Playful primary + correct green + incorrect red + progress blue,3D card flip animation. Spaced repetition algorithm. Deck browser. Session progress bar. Streak tracking. Timed quiz mode. Share/import decks. Rich text + image cards.
+104,Booking & Appointment App,"booking, appointment, schedule, calendar, reservation, slot, service",Soft UI Evolution + Flat Design,"Minimalism, Micro-interactions",Conversion-Optimized,Drill-Down Analytics,Trust blue + available green + booked grey + confirm accent,Calendar strip or month picker. Available time-slot grid. Service + staff selector. Confirmation summary. Reminder push. Reschedule/cancel flow. Two-sided (provider ↔ client).
+105,Invoice & Billing Tool,"invoice, billing, payment, receipt, freelance, estimate, quote, accounting",Minimalism + Flat Design,"Swiss Modernism 2.0, Accessible & Ethical",Conversion-Optimized + Trust,Financial Dashboard,Professional navy + paid green + overdue red + neutral grey,Invoice template with line items. Tax/discount calculation. Status badges (Draft/Sent/Paid/Overdue). PDF export + share. Payment link generation. Client address book. Recurring invoices.
+106,Grocery & Shopping List,"grocery, shopping, list, supermarket, checklist, pantry, meal-plan, buy",Flat Design + Vibrant & Block-based,"Claymorphism, Micro-interactions",Minimal & Direct + Demo,N/A - List focused,Fresh green + food-category colors + checkmark accent,Category-grouped list. Tap-to-check interaction (with strikethrough). Quantity stepper. Share list with family. Store aisle sorting. Barcode scan to add. Frequently bought suggestions.
+107,Timer & Pomodoro,"timer, pomodoro, countdown, stopwatch, focus, clock, productivity, interval",Minimalism + Neumorphism,"Dark Mode (OLED), Micro-interactions",Minimal & Direct,N/A - Utility focused,High-contrast on dark + focus red/amber + break green,Large centered countdown digits. Circular progress ring. Session/break auto-switch. Session history log. Custom interval settings. Sound + haptic alerts. Focus stats chart.
+108,Parenting & Baby Tracker,"baby, parenting, child, feeding, sleep, diaper, milestone, family, newborn",Claymorphism + Soft UI Evolution,"Vibrant & Block-based, Accessible & Ethical",Social Proof-Focused + Trust,User Behavior Analytics,Soft pastels (baby pink/sky blue/mint/peach) + warm accents,Feed/sleep/diaper quick-log buttons. Growth percentile chart. Milestone timeline with photos. Multiple child profiles. Partner invite + shared access. Pediatric reference. One-handed operation.
+109,Scanner & Document Manager,"scanner, document, ocr, pdf, scan, camera, file, archive, digitize",Minimalism + Flat Design,"Dark Mode (OLED), Accessible & Ethical",Feature-Rich Showcase + Demo,N/A - Tool focused,Clean white + camera viewfinder accent + file-type color coding,Camera capture with auto-edge detection. Crop/rotate/enhance. OCR text extraction overlay. PDF multi-page creation. Folder tree organization. Cloud sync. Share/export. Batch scan mode.
+110,Calendar & Scheduling App,"calendar, scheduling, planner, agenda, events, reminder, appointment, organize, date, sync",Flat Design + Micro-interactions,"Minimalism, Soft UI Evolution",Feature-Rich Showcase + Demo,N/A - Calendar focused,Clean blue + event category accent colors + success green,Event color coding. Week/month/day views. Recurring events. Conflict detection. Multi-calendar sync.
+111,Password Manager,"password, security, vault, credentials, login, secure, encrypt, keychain, 2fa, biometric",Minimalism + Accessible & Ethical,"Dark Mode (OLED), Trust & Authority",Trust & Authority + Feature-Rich,N/A - Vault focused,Trust blue + security green + dark neutral,Security-first. Zero-knowledge architecture. Biometric unlock. Breach alert dashboard. Password generator.
+112,Expense Splitter / Bill Split,"split, expense, bill, aa, share, friends, group, settle, debt, payment, owe",Flat Design + Vibrant & Block-based,"Minimalism, Micro-interactions",Minimal & Direct + Demo,N/A - Balance focused,Success green + alert red + neutral grey + avatar accent colors,Group expense tracking. Debt simplification algorithm. Payment reminders. Multi-currency. Receipt photo import.
+113,Voice Recorder & Memo,"voice, recorder, memo, audio, transcription, dictate, recording, microphone, note, otter",Minimalism + AI-Native UI,"Flat Design, Dark Mode (OLED)",Interactive Product Demo + Minimal,N/A - Recording focused,Clean white + recording red + waveform accent,Waveform display. Background recording. Auto-transcription (AI). Tag/organize. Cloud sync.
+114,Bookmark & Read-Later,"bookmark, read-later, save, article, pocket, link, reading, archive, collection, raindrop",Minimalism + Flat Design,"Editorial Grid, Swiss Modernism 2.0",Minimal & Direct + Demo,N/A - List focused,Paper warm white + ink neutral + minimal accent + tag colors,Fast save via share sheet. Article distraction-free view. Tags and collections. Offline sync. Reading progress.
+115,Translator App,"translate, language, text, voice, ocr, dictionary, multilingual, real-time, detect, deepl",Flat Design + AI-Native UI,"Minimalism, Micro-interactions",Feature-Rich Showcase + Interactive Demo,N/A - Utility focused,Global blue + neutral grey + language flag accent,Real-time camera translation (OCR). Voice input and output. Offline mode. Conversation mode. Phrasebook.
+116,Calculator & Unit Converter,"calculator, converter, unit, math, currency, measurement, scientific, formula, percentage",Neumorphism + Minimalism,"Flat Design, Dark Mode (OLED)",Minimal & Direct,N/A - Utility focused,Dark functional + orange operation keys + clear button hierarchy,Scientific mode toggle. Live currency rates. Calculation history. Widget support. Gesture input.
+117,Alarm & World Clock,"alarm, clock, world, timezone, timer, wake, sleep, schedule, reminder, bedtime",Dark Mode (OLED) + Minimalism,"Neumorphism, Flat Design",Minimal & Direct,N/A - Utility focused,Deep dark + ambient glow accent + timezone gradient,Gentle wake (gradual volume). Timezone visualizer. Sleep tracking integration. Smart alarm skip. Bedtime mode.
+118,File Manager & Transfer,"file, manager, transfer, folder, document, storage, cloud, share, organize, compress",Flat Design + Minimalism,"Accessible & Ethical, Dark Mode (OLED)",Feature-Rich Showcase + Demo,N/A - File tree focused,"Functional neutral + file type color coding (PDF orange, doc blue, image purple)",Folder tree navigation. File type preview. Wireless P2P transfer. Cloud integration. Compress and extract.
+119,Email Client,"email, mail, inbox, compose, thread, newsletter, filter, reply, gmail, spark, superhuman",Flat Design + Minimalism,"Micro-interactions, Soft UI Evolution",Feature-Rich Showcase + Demo,N/A - Inbox focused,Clean white + brand primary + priority red + snooze amber,Unified inbox. Swipe actions (archive/delete/snooze). Priority sorting. Smart reply. Unsubscribe tool.
+120,Casual Puzzle Game,"puzzle, casual, match, brain, game, relaxing, level, tiles, logic, block, three",Claymorphism + Vibrant & Block-based,"Micro-interactions, Motion-Driven",Feature-Rich Showcase + Social Proof,N/A - Game focused,Cheerful pastels + progression gradient + reward gold + bright accent,Satisfying match/clear animations. Progressive difficulty. Daily challenges. No-skip tutorials. Offline play.
+121,Trivia & Quiz Game,"trivia, quiz, knowledge, question, answer, challenge, leaderboard, fact, brain, compete",Vibrant & Block-based + Micro-interactions,"Claymorphism, Flat Design",Feature-Rich Showcase + Social Proof,Leaderboard Analytics,Energetic blue + correct green + incorrect red + leaderboard gold,Timer pressure UX. Category selection. Streak system. Real-time multiplayer. Daily quiz mode.
+122,Card & Board Game,"card, board, chess, checkers, poker, strategy, turn-based, multiplayer, classic, tabletop",3D & Hyperrealism + Flat Design,"Motion-Driven, Dark Mode (OLED)",Feature-Rich Showcase,N/A - Game focused,Game-theme felt green + dark wood + card back patterns,Real-time or async multiplayer. Game state sync. Tutorial mode. Match history. ELO rating system.
+123,Idle & Clicker Game,"idle, clicker, incremental, passive, cookie, adventure, progress, offline, collect, prestige",Vibrant & Block-based + Motion-Driven,"Claymorphism, 3D & Hyperrealism",Feature-Rich Showcase,N/A - Progress focused,Coin gold + upgrade blue + prestige purple + progress green,Offline progress calculation. Satisfying number animations. Upgrade tree clarity. Prestige system. Optional ads.
+124,Word & Crossword Game,"word, crossword, wordle, spelling, vocabulary, letters, grid, puzzle, dictionary, daily",Minimalism + Flat Design,"Swiss Modernism 2.0, Micro-interactions",Minimal & Direct + Demo,N/A - Game focused,Clean white + warm letter tiles + success green + shake red,Daily challenge with shareable results. Physical keyboard feel. Difficulty levels. Dictionary hints. Streak stats.
+125,Arcade & Retro Game,"arcade, retro, 8bit, action, shoot, runner, tap, reflex, endless, pixel, classic, score",Pixel Art + Retro-Futurism,"Vibrant & Block-based, Motion-Driven",Feature-Rich Showcase + Hero-Centric,N/A - Score focused,Neon on black + pixel palette + score gold + danger red,Instant play with no login. Game Center leaderboards. Haptic feedback on collision. Offline. Controller support.
+126,Photo Editor & Filters,"photo, edit, filter, vsco, snapseed, enhance, crop, retouch, adjust, luts, preset, adjust",Minimalism + Dark Mode (OLED),"Motion-Driven, Flat Design",Feature-Rich Showcase + Interactive Demo,N/A - Editor focused,Dark editor background + vibrant filter preview strip + tool icon accent,Non-destructive editing. Filter preview carousel. Histogram. RAW support. Batch export. Social share direct.
+127,Short Video Editor,"video, edit, capcut, inshot, clip, reel, tiktok, trim, effects, transitions, music, timeline",Dark Mode (OLED) + Motion-Driven,"Vibrant & Block-based, Glassmorphism",Feature-Rich Showcase + Hero-Centric,N/A - Timeline editor focused,Dark background + timeline track accent colors + effect preview vivid,Multi-track timeline. Licensed music library. Text overlays. Auto-captions. Export 9:16 / 16:9 / 1:1.
+128,Drawing & Sketching Canvas,"drawing, sketch, procreate, canvas, paint, illustration, digital, brush, layers, art, stylus",Minimalism + Dark Mode (OLED),"Anti-Polish Raw, Motion-Driven",Interactive Product Demo + Storytelling,N/A - Canvas focused,Neutral canvas + full-spectrum color picker + tool panel dark,Pressure sensitivity. Infinite canvas (pan/zoom). Layer management. Undo history. Export PNG/PSD/SVG.
+129,Music Creation & Beat Maker,"music, beat, daw, garageband, create, loop, sample, instrument, track, compose, record, midi",Dark Mode (OLED) + Motion-Driven,"Cyberpunk UI, Glassmorphism",Interactive Product Demo + Storytelling,N/A - DAW focused,Dark studio background + track colors rainbow + waveform accent + BPM pulse,Touch piano and drum pad. Loop browser. MIDI support. Export MP3/WAV. Low-latency audio engine.
+130,Meme & Sticker Maker,"meme, sticker, maker, funny, caption, template, edit, share, viral, emoji, creator, reaction",Vibrant & Block-based + Flat Design,"Gen Z Chaos, Claymorphism",Feature-Rich Showcase + Social Proof,N/A - Creator focused,Bold primary + comedic yellow + viral red + high saturation accent,Template library. Caption text overlay. Font variety. Reaction sticker packs. Share to all platforms. Fast creation.
+131,AI Photo & Avatar Generator,"ai, photo, avatar, lensa, portrait, generate, selfie, style, filter, prisma, art",AI-Native UI + Aurora UI,"Glassmorphism, Minimalism",Feature-Rich Showcase + Social Proof,N/A - Generation focused,AI purple + aurora gradients + before/after neutral,Style selection. Multiple output variations. Privacy policy prominent. Fast generation. Credits/subscription system.
+132,Link-in-Bio Page Builder,"bio, link, linktree, personal, page, creator, social, portfolio, profile, landing, custom",Vibrant & Block-based + Bento Box Grid,"Minimalism, Glassmorphism",Conversion-Optimized + Social Proof,Analytics (click tracking),Brand-customizable + accent link color + clean white canvas,Drag-drop builder. Theme templates. Click analytics. Custom domain. Social icon integration. QR code export.
+133,Wardrobe & Outfit Planner,"wardrobe, outfit, fashion, clothes, closet, style, wear, plan, capsule, ootd, lookbook",Minimalism + Motion-Driven,"Aurora UI, Soft UI Evolution",Storytelling-Driven + Feature-Rich,N/A - Wardrobe focused,Clean fashion neutral + full clothes color palette + accent,Photo catalog of clothes. AI outfit suggestions. Calendar integration. Capsule wardrobe. Season filtering.
+134,Plant Care Tracker,"plant, care, water, garden, tracker, reminder, species, photo, grow, health, planta",Organic Biophilic + Soft UI Evolution,"Claymorphism, Flat Design",Storytelling-Driven + Social Proof,N/A - Plant collection focused,Nature greens + earth brown + sunny yellow reminder + water blue,Plant database with care guides. Watering reminders. Growth photo timeline. AI health diagnosis. Collection sharing.
+135,Book & Reading Tracker,"book, reading, tracker, goodreads, library, shelf, progress, review, notes, goal, literature",Swiss Modernism 2.0 + Minimalism,"E-Ink Paper, Soft UI Evolution",Social Proof-Focused + Feature-Rich,N/A - Library focused,Warm paper white + ink brown + reading progress green + book cover colors,Barcode scan to add. Progress percentage. Annual reading goal. Notes and quotes. Friends activity. Genre stats.
+136,Couple & Relationship App,"couple, relationship, partner, love, date, anniversary, memory, shared, intimate, between",Aurora UI + Soft UI Evolution,"Claymorphism, Glassmorphism",Storytelling-Driven + Social Proof,N/A - Couple focused,Warm romantic pink/rose + soft gradient + memory photo tones,Shared timeline. Anniversary countdowns. Secret chat. Photo albums. Love language quiz. Date night ideas.
+137,Family Calendar & Chores,"family, calendar, chores, tasks, household, shared, kids, schedule, cozi, organize, member",Flat Design + Claymorphism,"Accessible & Ethical, Vibrant & Block-based",Feature-Rich Showcase + Social Proof,N/A - Family hub focused,Warm playful + member color coding + chore completion green,Member color coding. Chore assignment rotation. Recurring events. Shared shopping list. Allowance tracking.
+138,Mood Tracker,"mood, emotion, feeling, mental, daily, journal, wellbeing, check-in, log, track, daylio",Soft UI Evolution + Minimalism,"Aurora UI, Neumorphism",Storytelling-Driven + Social Proof,N/A - Mood chart focused,Emotion gradient (blue sad to yellow happy) + pastel per mood + insight accent,One-tap daily check-in. Emotion wheel selector. Mood calendar heatmap. Pattern insights. Export and share.
+139,Gift & Wishlist,"gift, wishlist, present, birthday, occasion, registry, idea, shop, list, share, surprise",Vibrant & Block-based + Soft UI Evolution,"Claymorphism, Flat Design",Minimal & Direct + Conversion,N/A - List focused,Celebration warm pink/gold/red + category colors + surprise accent,Add from any URL. Price range filter. Reserved-by-others system. Occasion calendar. Collaborative list. Surprise mode.
+140,Running & Cycling GPS,"running, cycling, gps, strava, track, route, speed, distance, cadence, pace, workout, sport",Dark Mode (OLED) + Vibrant & Block-based,"Motion-Driven, Glassmorphism",Feature-Rich Showcase + Social Proof,Performance Analytics,Energetic orange + map accent + pace zones (green/yellow/red),Live GPS tracking. Route map. Auto-pause detection. Segment leaderboards. Training zones. Social feed. Garmin sync.
+141,Yoga & Stretching Guide,"yoga, stretch, flexibility, pose, asana, guided, session, calm, routine, wellness, down-dog",Organic Biophilic + Soft UI Evolution,"Neumorphism, Minimalism",Storytelling-Driven + Social Proof,N/A - Session focused,Earth calming sage/terracotta/cream + breathing gradient + warm accent,Pose library with illustrations. Guided sessions with audio. Breathing exercises. Progress calendar. Beginner to advanced.
+142,Sleep Tracker,"sleep, tracker, alarm, cycle, quality, snore, analysis, rem, deep, smart, wake, insomnia",Dark Mode (OLED) + Neumorphism,"Glassmorphism, Minimalism",Feature-Rich Showcase + Social Proof,Healthcare Analytics,Deep midnight blue + stars/moon accent + sleep quality gradient (poor red to great green),Sleep cycle detection. Smart alarm wakes at light sleep. Snore detection. Weekly trends. Apple Health integration.
+143,Calorie & Nutrition Counter,"calorie, nutrition, food, diet, macro, protein, carb, fat, log, fitness, myfitnesspal",Flat Design + Vibrant & Block-based,"Minimalism, Claymorphism",Feature-Rich Showcase + Social Proof,Healthcare Analytics,"Healthy green + macro colors (protein blue, carb orange, fat yellow) + progress circle",Barcode scanner food log. Large database. Macro goals. Restaurant lookup. Recipe builder. AI photo food logging.
+144,Period & Cycle Tracker,"period, cycle, menstrual, fertility, ovulation, pms, log, women, health, flo, clue, hormone",Soft UI Evolution + Aurora UI,"Accessible & Ethical, Claymorphism",Social Proof-Focused + Trust,Healthcare Analytics,Rose/blush + lavender + fertility green + soft calendar tones,Cycle prediction. Symptom logging. Fertility window. Personalized insights. Privacy-first. Partner sharing option.
+145,Medication & Pill Reminder,"medication, pill, reminder, dose, schedule, prescription, drug, health, medisafe, refill",Accessible & Ethical + Flat Design,"Minimalism, Trust & Authority",Trust & Authority + Feature-Rich,N/A - Schedule focused,Medical trust blue + missed alert red + taken green + clean white,Multi-medication schedule. Caregiver sharing. Refill reminders. Drug interaction warnings. Large touch targets.
+146,Water & Hydration Reminder,"water, hydration, drink, reminder, daily, tracker, glasses, intake, health, cup, aqua",Claymorphism + Vibrant & Block-based,"Flat Design, Micro-interactions",Minimal & Direct + Demo,N/A - Daily goal focused,Refreshing blue + water wave animation + goal progress accent,Tap to log quickly. Animated fill visualization. Custom reminders. Goal by weight/weather. Streak system. Widget.
+147,Fasting & Intermittent Timer,"fasting, intermittent, 16:8, timer, fast, eating, window, keto, diet, zero, weight, protocol",Minimalism + Dark Mode (OLED),"Neumorphism, Flat Design",Feature-Rich Showcase + Social Proof,N/A - Timer focused,Fasting deep blue/purple + eating window green + timeline neutral,"Protocol selector (16:8, 18:6, OMAD). Circular countdown timer. Fasting history log. Tips during fast. Electrolytes."
+148,Anonymous Community / Confession,"anonymous, community, confess, whisper, secret, vent, share, safe, private, social, yikyak",Dark Mode (OLED) + Minimalism,"Glassmorphism, Soft UI Evolution",Social Proof-Focused + Feature-Rich,User Behavior Analytics,Dark protective + subtle gradient + upvote green + empathy warm accent,Anonymous posting with moderation. Safety reporting. Reaction system. Trending topics. Mental health resources link.
+149,Local Events & Discovery,"local, events, discovery, meetup, nearby, social, city, activities, calendar, community, explore",Vibrant & Block-based + Motion-Driven,"Glassmorphism, Flat Design",Hero-Centric Design + Feature-Rich,Event Analytics,City vibrant + event category colors + map accent + date highlight,Location-based discovery. Category filters. RSVP flow. Map view. Friend attendance. Organizer tools. Reminders.
+150,Study Together / Virtual Coworking,"study, focus, cowork, pomodoro, virtual, together, session, accountability, live, stream, room",Minimalism + Soft UI Evolution,"Flat Design, Dark Mode (OLED)",Social Proof-Focused + Feature-Rich,User Behavior Analytics,Calm focus blue + session progress indicator + ambient warm neutrals,Live study rooms with video/avatar presence. Shared focus timer. Ambient music. Goals sharing. Streak accountability.
+151,Coding Challenge & Practice,"coding, leetcode, challenge, algorithm, practice, programming, competitive, skill, interview, problem",Dark Mode (OLED) + Cyberpunk UI,"Minimalism, Flat Design",Feature-Rich Showcase + Social Proof,Student Analytics,Code editor dark + success green + difficulty gradient (easy green / medium amber / hard red),Code editor with syntax highlight. Multiple languages. Hint system. Solution explanation. Company tags. Contest mode.
+152,Kids Learning (ABC & Math),"kids, children, learning, abc, math, phonics, numbers, education, games, preschool, early",Claymorphism + Vibrant & Block-based,"Micro-interactions, Flat Design",Social Proof-Focused + Trust,Parent Dashboard,Bright primary + child-safe pastels + reward gold + interactive accent,Age-appropriate UI for 2-8. No ads. No dark patterns. Curriculum aligned. Parent progress reports. Reward system.
+153,Music Instrument Learning,"music, instrument, piano, guitar, learn, lesson, tutorial, notes, play, chord, practice, simply",Vibrant & Block-based + Motion-Driven,"Dark Mode (OLED), Soft UI Evolution",Interactive Product Demo + Social Proof,Learning Analytics,Musical warm deep red/brown + note color system + skill progress bar,Interactive instrument on-screen. Sheet music display. Song library. Slow-tempo practice. Recording and playback. Teacher mode.
+154,Parking Finder,"parking, spot, finder, map, pay, meter, garage, location, car, reserve, spothero",Minimalism + Glassmorphism,"Flat Design, Micro-interactions",Conversion-Optimized + Feature-Rich,Real-Time Monitoring + Map,Trust blue + available green + occupied red + map neutral,Real-time availability. In-app navigation. Payment integration. Parking timer alert. Favorite spots. Street vs garage.
+155,Public Transit Guide,"transit, bus, metro, subway, train, route, schedule, map, city, commute, trip, citymapper",Flat Design + Accessible & Ethical,"Minimalism, Motion-Driven",Feature-Rich Showcase + Interactive Demo,Real-Time Monitoring + Map,Transit brand line colors + real-time indicator green/red + map neutral,Real-time arrivals. Offline maps. Disruption alerts. Multi-modal routing. Fare calculation. Accessibility features.
+156,Road Trip Planner,"road, trip, drive, route, planner, travel, stop, map, adventure, scenic, car, wanderlog",Aurora UI + Organic Biophilic,"Motion-Driven, Vibrant & Block-based",Storytelling-Driven + Hero-Centric,N/A - Trip focused,Adventure warm sunset orange + map teal + stop markers + road neutral,Route planning with stops. Point-of-interest discovery. Gas/food/hotel along route. Offline maps. Trip sharing.
+157,VPN & Privacy Tool,"vpn, privacy, secure, anonymous, encrypt, proxy, ip, protect, shield, network, nordvpn",Minimalism + Dark Mode (OLED),"Cyberpunk UI, Trust & Authority",Trust & Authority + Conversion-Optimized,N/A - Connection focused,Dark shield blue + connected green + disconnected red + trust accent,One-tap connect. Server selection by country. No-log policy prominent. Speed indicator. Kill switch. Protocol choice.
+158,Emergency SOS & Safety,"emergency, sos, safety, alert, location, help, danger, crisis, first-aid, guard, bsafe",Accessible & Ethical + Flat Design,"Dark Mode (OLED), Minimalism",Trust & Authority + Social Proof,N/A - Safety focused,Alert red + safety blue + location green + high contrast critical,One-tap SOS. Emergency contacts auto-notify. Live location sharing. Fake call feature. Safe walk mode. Local emergency numbers.
+159,Wallpaper & Theme App,"wallpaper, theme, background, customize, aesthetic, home-screen, lock-screen, widget, design, zedge",Vibrant & Block-based + Aurora UI,"Glassmorphism, Motion-Driven",Feature-Rich Showcase + Social Proof,N/A - Gallery focused,Content-driven + trending aesthetic palettes + download accent,Category browsing. Preview on device. Daily wallpaper auto-set. Widget matching. Creator uploads. Resolution auto-fit.
+160,White Noise & Ambient Sound,"white noise, ambient, sound, sleep, focus, rain, nature, relax, concentration, background, noisli",Minimalism + Dark Mode (OLED),"Neumorphism, Organic Biophilic",Minimal & Direct + Social Proof,N/A - Player focused,Calming dark + ambient texture visual + subtle sound wave + sleep blue,Sound mixer with multiple simultaneous layers. Sleep timer with fade. Custom soundscapes. Offline. Background audio.
+161,Home Decoration & Interior Design,"home, interior, decor, design, furniture, room, renovation, ar, plan, inspire, 3d, houzz",Minimalism + 3D Product Preview,"Organic Biophilic, Aurora UI",Storytelling-Driven + Feature-Rich,N/A - Project focused,Neutral interior palette + material texture accent + AR blue,AR room visualization. Style quiz. Product catalog with purchase links. 3D room planner. Mood board. Before/after.
diff --git a/.claude/skills/ui-ux-pro-max/data/react-performance.csv b/.claude/skills/ui-ux-pro-max/data/react-performance.csv
new file mode 100644
index 000000000..671465f29
--- /dev/null
+++ b/.claude/skills/ui-ux-pro-max/data/react-performance.csv
@@ -0,0 +1,45 @@
+No,Category,Issue,Keywords,Platform,Description,Do,Don't,Code Example Good,Code Example Bad,Severity
+1,Async Waterfall,Defer Await,async await defer branch,React/Next.js,Move await into branches where actually used to avoid blocking unused code paths,Move await operations into branches where they're needed,Await at top of function blocking all branches,"if (skip) return { skipped: true }; const data = await fetch()","const data = await fetch(); if (skip) return { skipped: true }",Critical
+2,Async Waterfall,Promise.all Parallel,promise all parallel concurrent,React/Next.js,Execute independent async operations concurrently using Promise.all(),Use Promise.all() for independent operations,Sequential await for independent operations,"const [user, posts] = await Promise.all([fetchUser(), fetchPosts()])","const user = await fetchUser(); const posts = await fetchPosts()",Critical
+3,Async Waterfall,Dependency Parallelization,better-all dependency parallel,React/Next.js,Use better-all for operations with partial dependencies to maximize parallelism,Use better-all to start each task at earliest possible moment,Wait for unrelated data before starting dependent fetch,"await all({ user() {}, config() {}, profile() { return fetch((await this.$.user).id) } })","const [user, config] = await Promise.all([...]); const profile = await fetchProfile(user.id)",Critical
+4,Async Waterfall,API Route Optimization,api route waterfall promise,React/Next.js,In API routes start independent operations immediately even if not awaited yet,Start promises early and await late,Sequential awaits in API handlers,"const sessionP = auth(); const configP = fetchConfig(); const session = await sessionP","const session = await auth(); const config = await fetchConfig()",Critical
+5,Async Waterfall,Suspense Boundaries,suspense streaming boundary,React/Next.js,Use Suspense to show wrapper UI faster while data loads,Wrap async components in Suspense boundaries,Await data blocking entire page render,"<Suspense fallback={<Skeleton />}><DataDisplay /></Suspense>","const data = await fetchData(); return <DataDisplay data={data} />",High
+6,Bundle Size,Barrel Imports,barrel import direct path,React/Next.js,Import directly from source files instead of barrel files to avoid loading unused modules,Import directly from source path,Import from barrel/index files,"import Check from 'lucide-react/dist/esm/icons/check'","import { Check } from 'lucide-react'",Critical
+7,Bundle Size,Dynamic Imports,dynamic import lazy next,React/Next.js,Use next/dynamic to lazy-load large components not needed on initial render,Use dynamic() for heavy components,Import heavy components at top level,"const Monaco = dynamic(() => import('./monaco'), { ssr: false })","import { MonacoEditor } from './monaco-editor'",Critical
+8,Bundle Size,Defer Third Party,analytics defer third-party,React/Next.js,Load analytics and logging after hydration since they don't block interaction,Load non-critical scripts after hydration,Include analytics in main bundle,"const Analytics = dynamic(() => import('@vercel/analytics'), { ssr: false })","import { Analytics } from '@vercel/analytics/react'",Medium
+9,Bundle Size,Conditional Loading,conditional module lazy,React/Next.js,Load large data or modules only when a feature is activated,Dynamic import when feature enabled,Import large modules unconditionally,"useEffect(() => { if (enabled) import('./heavy.js') }, [enabled])","import { heavyData } from './heavy.js'",High
+10,Bundle Size,Preload Intent,preload hover focus intent,React/Next.js,Preload heavy bundles on hover/focus before they're needed,Preload on user intent signals,Load only on click,"onMouseEnter={() => import('./editor')}","onClick={() => import('./editor')}",Medium
+11,Server,React.cache Dedup,react cache deduplicate request,React/Next.js,Use React.cache() for server-side request deduplication within single request,Wrap data fetchers with cache(),Fetch same data multiple times in tree,"export const getUser = cache(async () => await db.user.find())","export async function getUser() { return await db.user.find() }",Medium
+12,Server,LRU Cache Cross-Request,lru cache cross request,React/Next.js,Use LRU cache for data shared across sequential requests,Use LRU for cross-request caching,Refetch same data on every request,"const cache = new LRUCache({ max: 1000, ttl: 5*60*1000 })","Always fetch from database",High
+13,Server,Minimize Serialization,serialization rsc boundary,React/Next.js,Only pass fields that client actually uses across RSC boundaries,Pass only needed fields to client components,Pass entire objects to client,"<Profile name={user.name} />","<Profile user={user} /> // 50 fields serialized",High
+14,Server,Parallel Fetching,parallel fetch component composition,React/Next.js,Restructure components to parallelize data fetching in RSC,Use component composition for parallel fetches,Sequential fetches in parent component,"<Header /><Sidebar /> // both fetch in parallel","const header = await fetchHeader(); return <><div>{header}</div><Sidebar /></>",Critical
+15,Server,After Non-blocking,after non-blocking logging,React/Next.js,Use Next.js after() to schedule work after response is sent,Use after() for logging/analytics,Block response for non-critical operations,"after(async () => { await logAction() }); return Response.json(data)","await logAction(); return Response.json(data)",Medium
+16,Client,SWR Deduplication,swr dedup cache revalidate,React/Next.js,Use SWR for automatic request deduplication and caching,Use useSWR for client data fetching,Manual fetch in useEffect,"const { data } = useSWR('/api/users', fetcher)","useEffect(() => { fetch('/api/users').then(setUsers) }, [])",Medium-High
+17,Client,Event Listener Dedup,event listener deduplicate global,React/Next.js,Share global event listeners across component instances,Use useSWRSubscription for shared listeners,Register listener per component instance,"useSWRSubscription('global-keydown', () => { window.addEventListener... })","useEffect(() => { window.addEventListener('keydown', handler) }, [])",Low
+18,Rerender,Defer State Reads,state read callback subscription,React/Next.js,Don't subscribe to state only used in callbacks,Read state on-demand in callbacks,Subscribe to state used only in handlers,"const handleClick = () => { const params = new URLSearchParams(location.search) }","const params = useSearchParams(); const handleClick = () => { params.get('ref') }",Medium
+19,Rerender,Memoized Components,memo extract expensive,React/Next.js,Extract expensive work into memoized components for early returns,Extract to memo() components,Compute expensive values before early return,"const UserAvatar = memo(({ user }) => ...); if (loading) return <Skeleton />","const avatar = useMemo(() => compute(user)); if (loading) return <Skeleton />",Medium
+20,Rerender,Narrow Dependencies,effect dependency primitive,React/Next.js,Specify primitive dependencies instead of objects in effects,Use primitive values in dependency arrays,Use object references as dependencies,"useEffect(() => { console.log(user.id) }, [user.id])","useEffect(() => { console.log(user.id) }, [user])",Low
+21,Rerender,Derived State,derived boolean subscription,React/Next.js,Subscribe to derived booleans instead of continuous values,Use derived boolean state,Subscribe to continuous values,"const isMobile = useMediaQuery('(max-width: 767px)')","const width = useWindowWidth(); const isMobile = width < 768",Medium
+22,Rerender,Functional setState,functional setstate callback,React/Next.js,Use functional setState updates for stable callbacks and no stale closures,Use functional form: setState(curr => ...),Reference state directly in setState,"setItems(curr => [...curr, newItem])","setItems([...items, newItem]) // items in deps",Medium
+23,Rerender,Lazy State Init,usestate lazy initialization,React/Next.js,Pass function to useState for expensive initial values,Use function form for expensive init,Compute expensive value directly,"useState(() => buildSearchIndex(items))","useState(buildSearchIndex(items)) // runs every render",Medium
+24,Rerender,Transitions,starttransition non-urgent,React/Next.js,Mark frequent non-urgent state updates as transitions,Use startTransition for non-urgent updates,Block UI on every state change,"startTransition(() => setScrollY(window.scrollY))","setScrollY(window.scrollY) // blocks on every scroll",Medium
+25,Rendering,SVG Animation Wrapper,svg animation wrapper div,React/Next.js,Wrap SVG in div and animate wrapper for hardware acceleration,Animate div wrapper around SVG,Animate SVG element directly,"<div class='animate-spin'><svg>...</svg></div>","<svg class='animate-spin'>...</svg>",Low
+26,Rendering,Content Visibility,content-visibility auto,React/Next.js,Apply content-visibility: auto to defer off-screen rendering,Use content-visibility for long lists,Render all list items immediately,".item { content-visibility: auto; contain-intrinsic-size: 0 80px }","Render 1000 items without optimization",High
+27,Rendering,Hoist Static JSX,hoist static jsx element,React/Next.js,Extract static JSX outside components to avoid re-creation,Hoist static elements to module scope,Create static elements inside components,"const skeleton = <div class='animate-pulse' />; function C() { return skeleton }","function C() { return <div class='animate-pulse' /> }",Low
+28,Rendering,Hydration No Flicker,hydration mismatch flicker,React/Next.js,Use inline script to set client-only data before hydration,Inject sync script for client-only values,Use useEffect causing flash,"<script dangerouslySetInnerHTML={{ __html: 'el.className = localStorage.theme' }} />","useEffect(() => setTheme(localStorage.theme), []) // flickers",Medium
+29,Rendering,Conditional Render,conditional render ternary,React/Next.js,Use ternary instead of && when condition can be 0 or NaN,Use explicit ternary for conditionals,Use && with potentially falsy numbers,"{count > 0 ? <Badge>{count}</Badge> : null}","{count && <Badge>{count}</Badge>} // renders '0'",Low
+30,Rendering,Activity Component,activity show hide preserve,React/Next.js,Use Activity component to preserve state/DOM for toggled components,Use Activity for expensive toggle components,Unmount/remount on visibility toggle,"<Activity mode={isOpen ? 'visible' : 'hidden'}><Menu /></Activity>","{isOpen && <Menu />} // loses state",Medium
+31,JS Perf,Batch DOM CSS,batch dom css reflow,React/Next.js,Group CSS changes via classes or cssText to minimize reflows,Use class toggle or cssText,Change styles one property at a time,"element.classList.add('highlighted')","el.style.width='100px'; el.style.height='200px'",Medium
+32,JS Perf,Index Map Lookup,map index lookup find,React/Next.js,Build Map for repeated lookups instead of multiple .find() calls,Build index Map for O(1) lookups,Use .find() in loops,"const byId = new Map(users.map(u => [u.id, u])); byId.get(id)","users.find(u => u.id === order.userId) // O(n) each time",Low-Medium
+33,JS Perf,Cache Property Access,cache property loop,React/Next.js,Cache object property lookups in hot paths,Cache values before loops,Access nested properties in loops,"const val = obj.config.settings.value; for (...) process(val)","for (...) process(obj.config.settings.value)",Low-Medium
+34,JS Perf,Cache Function Results,memoize cache function,React/Next.js,Use module-level Map to cache repeated function results,Use Map cache for repeated calls,Recompute same values repeatedly,"const cache = new Map(); if (cache.has(x)) return cache.get(x)","slugify(name) // called 100 times same input",Medium
+35,JS Perf,Cache Storage API,localstorage cache read,React/Next.js,Cache localStorage/sessionStorage reads in memory,Cache storage reads in Map,Read storage on every call,"if (!cache.has(key)) cache.set(key, localStorage.getItem(key))","localStorage.getItem('theme') // every call",Low-Medium
+36,JS Perf,Combine Iterations,combine filter map loop,React/Next.js,Combine multiple filter/map into single loop,Single loop for multiple categorizations,Chain multiple filter() calls,"for (u of users) { if (u.isAdmin) admins.push(u); if (u.isTester) testers.push(u) }","users.filter(admin); users.filter(tester); users.filter(inactive)",Low-Medium
+37,JS Perf,Length Check First,length check array compare,React/Next.js,Check array lengths before expensive comparisons,Early return if lengths differ,Always run expensive comparison,"if (a.length !== b.length) return true; // then compare","a.sort().join() !== b.sort().join() // even when lengths differ",Medium-High
+38,JS Perf,Early Return,early return exit function,React/Next.js,Return early when result is determined to skip processing,Return immediately on first error,Process all items then check errors,"for (u of users) { if (!u.email) return { error: 'Email required' } }","let hasError; for (...) { if (!email) hasError=true }; if (hasError)...",Low-Medium
+39,JS Perf,Hoist RegExp,regexp hoist module,React/Next.js,Don't create RegExp inside render - hoist or memoize,Hoist RegExp to module scope,Create RegExp every render,"const EMAIL_RE = /^[^@]+@[^@]+$/; function validate() { EMAIL_RE.test(x) }","function C() { const re = new RegExp(pattern); re.test(x) }",Low-Medium
+40,JS Perf,Loop Min Max,loop min max sort,React/Next.js,Use loop for min/max instead of sort - O(n) vs O(n log n),Single pass loop for min/max,Sort array to find min/max,"let max = arr[0]; for (x of arr) if (x > max) max = x","arr.sort((a,b) => b-a)[0] // O(n log n)",Low
+41,JS Perf,Set Map Lookups,set map includes has,React/Next.js,Use Set/Map for O(1) lookups instead of array.includes(),Convert to Set for membership checks,Use .includes() for repeated checks,"const allowed = new Set(['a','b']); allowed.has(id)","const allowed = ['a','b']; allowed.includes(id)",Low-Medium
+42,JS Perf,toSorted Immutable,tosorted sort immutable,React/Next.js,Use toSorted() instead of sort() to avoid mutating arrays,Use toSorted() for immutability,Mutate arrays with sort(),"users.toSorted((a,b) => a.name.localeCompare(b.name))","users.sort((a,b) => a.name.localeCompare(b.name)) // mutates",Medium-High
+43,Advanced,Event Handler Refs,useeffectevent ref handler,React/Next.js,Store callbacks in refs for stable effect subscriptions,Use useEffectEvent for stable handlers,Re-subscribe on every callback change,"const onEvent = useEffectEvent(handler); useEffect(() => { listen(onEvent) }, [])","useEffect(() => { listen(handler) }, [handler]) // re-subscribes",Low
+44,Advanced,useLatest Hook,uselatest ref callback,React/Next.js,Access latest values in callbacks without adding to dependency arrays,Use useLatest for fresh values in stable callbacks,Add callback to effect dependencies,"const cbRef = useLatest(cb); useEffect(() => { setTimeout(() => cbRef.current()) }, [])","useEffect(() => { setTimeout(() => cb()) }, [cb]) // re-runs",Low
diff --git a/.claude/skills/ui-ux-pro-max/data/stacks/angular.csv b/.claude/skills/ui-ux-pro-max/data/stacks/angular.csv
new file mode 100644
index 000000000..75cb670f2
--- /dev/null
+++ b/.claude/skills/ui-ux-pro-max/data/stacks/angular.csv
@@ -0,0 +1,51 @@
+No,Category,Guideline,Description,Do,Don't,Code Good,Code Bad,Severity,Docs URL
+1,Components,Use standalone components,Angular 17+ default; no NgModule needed,Standalone components for all new code,NgModule-based components for new projects,"@Component({ standalone: true imports: [CommonModule] })","@NgModule({ declarations: [MyComp] })",High,https://angular.dev/guide/components/importing
+2,Components,Use signals for state,Signals are Angular's reactive primitive for fine-grained reactivity,Signals for component state over class properties,Mutable class properties without signals,"count = signal(0); increment() { this.count.update(v => v + 1) }","count = 0; increment() { this.count++ }",High,https://angular.dev/guide/signals
+3,Components,Use @if/@for/@switch control flow,Built-in control flow syntax replaces *ngIf/*ngFor directives,@if and @for in templates,*ngIf and *ngFor structural directives,"@if (isLoggedIn) { <Dashboard /> } @else { <Login /> }","<div *ngIf=""isLoggedIn""><Dashboard /></div>",High,https://angular.dev/guide/templates/control-flow
+4,Components,Use input() and output() signals,Signal-based inputs/outputs replace @Input()/@Output() decorators,input() and output() for component API,@Input() and @Output() decorators,"name = input<string>(); clicked = output<void>()","@Input() name: string; @Output() clicked = new EventEmitter()",High,https://angular.dev/guide/components/inputs
+5,Components,Use content projection,ng-content for flexible component composition,ng-content with select for named slots,Rigid templates that can't be customized,"<ng-content select=""[header]"" /> <ng-content />","<div class=""header"">{{ title }}</div>",Medium,https://angular.dev/guide/components/content-projection
+6,Components,Keep components small,Single responsibility; components should do one thing,Extract sub-components when template exceeds 50 lines,Monolithic components handling multiple concerns,"<UserAvatar /> <UserDetails /> <UserActions />",One 300-line component template,Medium,https://angular.dev/guide/components
+7,Components,Use OnPush change detection,Reduces re-renders by only checking on input changes or signal updates,OnPush for all components,Default change detection strategy,"changeDetection: ChangeDetectionStrategy.OnPush","changeDetection: ChangeDetectionStrategy.Default",High,https://angular.dev/guide/components/lifecycle
+8,Components,Avoid direct DOM manipulation,Use renderer or ElementRef sparingly; prefer template bindings,Template bindings and Angular directives,Direct document.querySelector or innerHTML,"[class.active]=""isActive""","this.el.nativeElement.classList.add('active')",High,https://angular.dev/guide/components/host-elements
+9,Routing,Lazy load feature routes,Load route chunks on demand to reduce initial bundle,loadComponent() for all feature routes,Eager-loaded routes in app config,"{ path: 'admin' loadComponent: () => import('./admin/admin.component') }","{ path: 'admin' component: AdminComponent }",High,https://angular.dev/guide/routing/lazy-loading
+10,Routing,Use route guards with functional API,Protect routes with canActivate/canMatch functional guards,Functional guards returning boolean or UrlTree,Class-based guards with CanActivate interface,"canActivate: [() => inject(AuthService).isLoggedIn()]","canActivate: [AuthGuard]",High,https://angular.dev/guide/routing/common-router-tasks#preventing-unauthorized-access
+11,Routing,Use route resolvers for data,Pre-fetch data before route activation using resolve,ResolveFn for route data,Fetching data in ngOnInit causing flash of empty state,"resolve: { user: () => inject(UserService).getUser() }",Fetch in ngOnInit with loading state flickering,Medium,https://angular.dev/guide/routing/common-router-tasks#resolve
+12,Routing,Type route params with inject,Use inject(ActivatedRoute) with signals or toSignal,Typed route params via ActivatedRoute,Untyped route.snapshot.params string access,"const id = toSignal(route.paramMap.pipe(map(p => p.get('id'))))","const id = this.route.snapshot.params['id']",Medium,https://angular.dev/api/router/ActivatedRoute
+13,Routing,Use nested routes for layouts,Compose shared layouts using router-outlet nesting,Nested routes with shared layout components,Duplicating layout code across routes,"{ path: 'app' component: ShellComponent children: [...] }",Duplicate header/sidebar in each route component,Medium,https://angular.dev/guide/routing/router-tutorial-toh#child-route-configuration
+14,Routing,Configure preloading strategies,Preload lazy modules in background after initial load,PreloadAllModules or custom strategy,No preloading causing delayed navigation,"provideRouter(routes withPreloading(PreloadAllModules))","provideRouter(routes)",Low,https://angular.dev/api/router/PreloadAllModules
+15,State,Use signals for local state,Signals provide synchronous reactive state without RxJS overhead,signal() for component-local reactive state,BehaviorSubject for simple local state,"const items = signal<Item[]>([]); addItem(i: Item) { this.items.update(arr => [...arr i]) }","items$ = new BehaviorSubject<Item[]>([])",High,https://angular.dev/guide/signals
+16,State,Use computed() for derived state,Lazily evaluated derived values that update when dependencies change,computed() for values derived from other signals,Duplicated state or manual sync,"readonly total = computed(() => this.items().reduce((s i) => s + i.price 0))","this.total = this.items.reduce(...) // called manually",High,https://angular.dev/guide/signals#computed-signals
+17,State,Use effect() carefully,Effects run side effects when signals change; avoid overuse,effect() for side effects like logging or localStorage sync,effect() for deriving state (use computed instead),"effect(() => localStorage.setItem('cart' JSON.stringify(this.cart())))","effect(() => { this.total.set(this.items().length) })",Medium,https://angular.dev/guide/signals#effects
+18,State,Use NgRx Signal Store for complex state,NgRx Signal Store is the modern lightweight state management for Angular,@ngrx/signals SignalStore for feature state,Full NgRx reducer/action/effect boilerplate for simple state,"const Store = signalStore(withState({ count: 0 }) withMethods(s => ({ increment: () => patchState(s { count: s.count() + 1 }) })))","createReducer(on(increment state => ({ ...state count: state.count + 1 })))",Medium,https://ngrx.io/guide/signals
+19,State,Inject services for shared state,Services with signals share state across components without a store,Injectable service with signals for cross-component state,Prop drilling or @Input chains for shared state,"@Injectable({ providedIn: 'root' }) class CartService { items = signal<Item[]>([]) }","@Input() cartItems passed through 4 component levels",Medium,https://angular.dev/guide/di/creating-injectable-service
+20,State,Avoid mixing RxJS and signals unnecessarily,Use toSignal() to bridge RxJS into signal world at the boundary,toSignal() to convert observable to signal at component edge,Subscribing in components and storing in signal manually,"readonly user = toSignal(this.userService.user$)","this.userService.user$.subscribe(u => this.user.set(u))",Medium,https://angular.dev/guide/rxjs-interop
+21,Forms,Use typed reactive forms,FormGroup/FormControl with explicit generics for compile-time safety,FormBuilder with typed controls,Untyped FormControl or any casts,"fb.group<LoginForm>({ email: fb.control('') password: fb.control('') })","new FormGroup({ email: new FormControl(null) })",High,https://angular.dev/guide/forms/typed-forms
+22,Forms,Use reactive forms over template-driven,Reactive forms scale better and are fully testable,ReactiveFormsModule for all non-trivial forms,FormsModule with ngModel for complex forms,"<input [formControl]=""emailControl"" />","<input [(ngModel)]=""email"" />",Medium,https://angular.dev/guide/forms/reactive-forms
+23,Forms,Write custom validators as functions,Functional validators are composable and tree-shakeable,ValidatorFn functions for custom validation,Class-based validators implementing Validator interface,"const noSpaces: ValidatorFn = ctrl => ctrl.value?.includes(' ') ? { noSpaces: true } : null","class NoSpacesValidator implements Validator { validate(c) {} }",Medium,https://angular.dev/guide/forms/form-validation#custom-validators
+24,Forms,Use updateOn for performance,Control when validation runs to avoid per-keystroke validation overhead,updateOn: 'blur' or 'submit' for expensive validators,Default updateOn: 'change' for async validators,"fb.control('' { updateOn: 'blur' validators: [Validators.email] })","fb.control('' [Validators.email]) // validates on every key",Low,https://angular.dev/api/forms/AbstractControl#updateOn
+25,Forms,Use FormArray for dynamic fields,FormArray manages variable-length lists of controls,FormArray for add/remove field scenarios,Manually tracking index-based controls,"get items(): FormArray { return this.form.get('items') as FormArray }","items: [FormControl] managed outside form",Medium,https://angular.dev/guide/forms/reactive-forms#using-the-formarray-class
+26,Forms,Display validation errors clearly,Use form control touched and dirty states to show errors at the right time,Show errors after field is touched,Show all errors on page load,"@if (email.invalid && email.touched) { <span>Invalid email</span> }","@if (email.invalid) { <span>Invalid email</span> }",Medium,https://angular.dev/guide/forms/form-validation
+27,Performance,Apply OnPush to all components,OnPush + signals eliminates most unnecessary change detection cycles,OnPush change detection everywhere,Default strategy which checks entire tree on every event,changeDetection: ChangeDetectionStrategy.OnPush,changeDetection: ChangeDetectionStrategy.Default,High,https://angular.dev/best-practices/skipping-component-subtrees
+28,Performance,Use trackBy in @for blocks,Stable identity for list items prevents full DOM re-creation on change,track item.id in @for,"@for (item of items; track item.id) { <li>{{ item.name }}</li> }","@for (item of items; track $index) { <li>{{ item.name }}</li> }",High,https://angular.dev/guide/templates/control-flow#track-and-identity
+29,Performance,Use @defer for below-the-fold content,Defer blocks lazy-load components when they enter the viewport,@defer with on viewport for non-critical UI,Eagerly loading all components at startup,"@defer (on viewport) { <HeavyChart /> } @placeholder { <Skeleton /> }","<HeavyChart /> loaded at startup",High,https://angular.dev/guide/defer
+30,Performance,Use NgOptimizedImage,Enforces image best practices: lazy loading LCP hints and proper sizing,NgOptimizedImage for all img tags,Plain img tags for CMS or user content,"<img ngSrc=""/hero.jpg"" width=""800"" height=""400"" priority />","<img src=""/hero.jpg"" />",High,https://angular.dev/guide/image-optimization
+31,Performance,Tree-shake unused Angular features,Import only what you use from Angular packages,Import specific Angular modules needed,Import BrowserAnimationsModule when not using animations,"import { NgOptimizedImage } from '@angular/common'","import { CommonModule } from '@angular/common' // entire module",Medium,https://angular.dev/tools/cli/build
+32,Performance,Avoid subscribe in components,Subscriptions leak and cause bugs; prefer async pipe or toSignal,toSignal() or async pipe instead of manual subscribe,Manual subscribe without unsubscribe in ngOnDestroy,"readonly data = toSignal(this.service.data$)","this.service.data$.subscribe(d => this.data = d)",High,https://angular.dev/guide/rxjs-interop
+33,Performance,Use SSR with Angular Universal,Pre-render pages for faster LCP and better SEO,SSR or SSG for public-facing routes,Pure CSR for SEO-critical pages,"ng add @angular/ssr","// no SSR, client renders empty shell",Medium,https://angular.dev/guide/ssr
+34,Performance,Minimize bundle with standalone APIs,Standalone components + provideRouter() eliminate dead NgModule code,provideRouter() and provideHttpClient() in app.config,Root AppModule with all imports,provideRouter(routes) in app.config.ts,"@NgModule({ imports: [RouterModule.forRoot(routes)] })",Medium,https://angular.dev/guide/routing/standalone
+35,Testing,Use TestBed for component tests,TestBed sets up Angular DI for realistic component testing,TestBed.configureTestingModule for component tests,Instantiate components with new keyword,"TestBed.configureTestingModule({ imports: [MyComponent] })","const comp = new MyComponent()",High,https://angular.dev/guide/testing/components-basics
+36,Testing,Use Angular CDK component harnesses,Harnesses provide a stable testing API that survives template refactors,MatButtonHarness and custom HarnessLoader,Direct native element queries that break on template changes,"const btn = await loader.getHarness(MatButtonHarness)","fixture.debugElement.query(By.css('button'))",Medium,https://material.angular.io/cdk/test-harnesses/overview
+37,Testing,Use Spectator for less boilerplate,Spectator wraps TestBed with a cleaner API reducing test setup noise,Spectator for unit tests,Raw TestBed for every test,"const spectator = createComponentFactory(MyComponent)","TestBed.configureTestingModule({ declarations: [MyComponent] providers: [...] })",Low,https://github.com/ngneat/spectator
+38,Testing,Mock services with jasmine.createSpyObj,Isolate unit tests by providing mock implementations of dependencies,SpyObj or jest.fn() mocks for services,Real HTTP calls in unit tests,"const spy = jasmine.createSpyObj('UserService' ['getUser']); spy.getUser.and.returnValue(of(user))","providers: [UserService] // real service in unit test",High,https://angular.dev/guide/testing/services
+39,Testing,Write integration tests for routes,Test full route navigation including guards and resolvers,RouterTestingHarness for route integration tests,Mock all routing behavior in unit tests,"const harness = await RouterTestingHarness.create(); await harness.navigateByUrl('/home')","// manually calling route guard methods",Medium,https://angular.dev/api/router/testing/RouterTestingHarness
+40,Testing,Test signal-based components,Signals update synchronously; no async flush needed in most cases,Read signal value directly in test assertions,TestBed.tick() or fakeAsync for signal reads,"component.count.set(5); expect(component.double()).toBe(10)","fakeAsync(() => { component.count.set(5); tick(); expect(component.double()).toBe(10) })",Medium,https://angular.dev/guide/testing
+41,Styling,Use ViewEncapsulation.Emulated,Default emulation scopes styles to component preventing global leaks,Emulated or None for intentional global styles,ViewEncapsulation.None for component-specific styles,ViewEncapsulation.Emulated (default),ViewEncapsulation.None on feature components,Medium,https://angular.dev/guide/components/styling#style-scoping
+42,Styling,Use :host selector,Style the component's host element using :host pseudo-class,":host for host element styles",Adding wrapper div just for styling,":host { display: block; padding: 1rem }","<div class=""wrapper"">...</div> + .wrapper { padding: 1rem }",Medium,https://angular.dev/guide/components/styling#host-element
+43,Styling,Use CSS custom properties for theming,CSS variables work across component boundaries and enable dynamic theming,CSS custom properties for colors and spacing,Hardcoded hex values in component styles,":root { --primary: #6200ee } button { background: var(--primary) }","button { background: #6200ee }",Medium,https://angular.dev/guide/components/styling
+44,Styling,Integrate Tailwind with Angular,Tailwind utilities work alongside Angular's ViewEncapsulation via global stylesheet,Add Tailwind in styles.css and use utility classes in templates,Custom CSS for layout that Tailwind already handles,"<div class=""flex items-center gap-4 p-6"">","<div class=""my-custom-flex""> /* .my-custom-flex { display: flex } */",Low,https://tailwindcss.com/docs/guides/angular
+45,Styling,Use Angular Material theming tokens,Material 3 uses design tokens for systematic theming,M3 token-based theming for Angular Material,Overriding Angular Material CSS with deep selectors,"@include mat.button-theme($my-theme)","::ng-deep .mat-button { background: red }",Medium,https://material.angular.io/guide/theming
+46,Architecture,Use injection tokens for config,Provide configuration via InjectionToken for testability and flexibility,InjectionToken for environment-specific values,Importing environment.ts directly in services,"const API_URL = new InjectionToken<string>('apiUrl'); provide: [{ provide: API_URL useValue: env.apiUrl }]","constructor(private env: Environment) { this.url = env.apiUrl }",Medium,https://angular.dev/guide/di/dependency-injection-providers#using-an-injectiontoken-object
+47,Architecture,Use HTTP interceptors,Intercept requests for auth headers error handling and logging,Functional interceptors with withInterceptors(),Service-level header management in every request,"withInterceptors([authInterceptor errorInterceptor])","httpClient.get(url { headers: { Authorization: token } }) in every call",High,https://angular.dev/guide/http/interceptors
+48,Architecture,Organize by feature not type,Feature-based folder structure scales better than type-based,Feature folders with collocated component service and routes,Flat folders: all-components/ all-services/,"src/features/checkout/checkout.component.ts checkout.service.ts checkout.routes.ts","src/components/checkout.component.ts src/services/checkout.service.ts",Medium,https://angular.dev/style-guide#folders-by-feature-structure
+49,Architecture,Use environment configurations,Separate environment values for dev staging and prod via Angular build configs,angular.json fileReplacements for env configs,Hardcoded API URLs or feature flags in source,"fileReplacements: [{ replace: environment.ts with: environment.prod.ts }]","const API = 'https://api.example.com' // hardcoded in service",High,https://angular.dev/tools/cli/environments
+50,Architecture,Prefer inject() over constructor DI,inject() function is composable and works in more contexts than constructor injection,inject() for dependency injection,Constructor parameters for new code,"readonly http = inject(HttpClient); readonly router = inject(Router)","constructor(private http: HttpClient private router: Router) {}",Medium,https://angular.dev/api/core/inject
diff --git a/.claude/skills/ui-ux-pro-max/data/stacks/astro.csv b/.claude/skills/ui-ux-pro-max/data/stacks/astro.csv
new file mode 100644
index 000000000..cacba81c9
--- /dev/null
+++ b/.claude/skills/ui-ux-pro-max/data/stacks/astro.csv
@@ -0,0 +1,54 @@
+No,Category,Guideline,Description,Do,Don't,Code Good,Code Bad,Severity,Docs URL
+1,Architecture,Use Islands Architecture,Astro's partial hydration only loads JS for interactive components,Interactive components with client directives,Hydrate entire page like traditional SPA,<Counter client:load />,Everything as client component,High,https://docs.astro.build/en/concepts/islands/
+2,Architecture,Default to zero JS,Astro ships zero JS by default - add only when needed,Static components without client directive,Add client:load to everything,<Header /> (static),<Header client:load /> (unnecessary),High,https://docs.astro.build/en/basics/astro-components/
+3,Architecture,Choose right client directive,Different directives for different hydration timing,client:visible for below-fold client:idle for non-critical,client:load for everything,<Comments client:visible />,<Comments client:load />,Medium,https://docs.astro.build/en/reference/directives-reference/#client-directives
+4,Architecture,Use content collections,Type-safe content management for blogs docs,Content collections for structured content,Loose markdown files without schema,const posts = await getCollection('blog'),import.meta.glob('./posts/*.md'),High,https://docs.astro.build/en/guides/content-collections/
+5,Architecture,Define collection schemas,Zod schemas for content validation,Schema with required fields and types,No schema validation,"defineCollection({ schema: z.object({...}) })",defineCollection({}),High,https://docs.astro.build/en/guides/content-collections/#defining-a-collection-schema
+6,Routing,Use file-based routing,Create routes by adding .astro files in pages/,pages/ directory for routes,Manual route configuration,src/pages/about.astro,Custom router setup,Medium,https://docs.astro.build/en/basics/astro-pages/
+7,Routing,Dynamic routes with brackets,Use [param] for dynamic routes,Bracket notation for params,Query strings for dynamic content,pages/blog/[slug].astro,pages/blog.astro?slug=x,Medium,https://docs.astro.build/en/guides/routing/#dynamic-routes
+8,Routing,Use getStaticPaths for SSG,Generate static pages at build time,getStaticPaths for known dynamic routes,Fetch at runtime for static content,"export async function getStaticPaths() { return [...] }",No getStaticPaths with dynamic route,High,https://docs.astro.build/en/reference/api-reference/#getstaticpaths
+9,Routing,Enable SSR when needed,Server-side rendering for dynamic content,output: 'server' or 'hybrid' for dynamic,SSR for purely static sites,"export const prerender = false;",SSR for static blog,Medium,https://docs.astro.build/en/guides/server-side-rendering/
+10,Components,Keep .astro for static,Use .astro components for static content,Astro components for layout structure,React/Vue for static markup,<Layout><slot /></Layout>,<ReactLayout>{children}</ReactLayout>,High,
+11,Components,Use framework components for interactivity,React Vue Svelte for complex interactivity,Framework component with client directive,Astro component with inline scripts,<ReactCounter client:load />,<script> in .astro for complex state,Medium,https://docs.astro.build/en/guides/framework-components/
+12,Components,Pass data via props,Astro components receive props in frontmatter,Astro.props for component data,Global state for simple data,"const { title } = Astro.props;",Import global store,Low,https://docs.astro.build/en/basics/astro-components/#component-props
+13,Components,Use slots for composition,Named and default slots for flexible layouts,<slot /> for child content,Props for HTML content,<slot name="header" />,<Component header={<div>...</div>} />,Medium,https://docs.astro.build/en/basics/astro-components/#slots
+14,Components,Colocate component styles,Scoped styles in component file,<style> in same .astro file,Separate CSS files for component styles,<style> .card { } </style>,import './Card.css',Low,
+15,Styling,Use scoped styles by default,Astro scopes styles to component automatically,<style> for component-specific styles,Global styles for everything,<style> h1 { } </style> (scoped),<style is:global> for everything,Medium,https://docs.astro.build/en/guides/styling/#scoped-styles
+16,Styling,Use is:global sparingly,Global styles only when truly needed,is:global for base styles or overrides,is:global for component styles,<style is:global> body { } </style>,<style is:global> .card { } </style>,Medium,
+17,Styling,Integrate Tailwind properly,Use @astrojs/tailwind integration,Official Tailwind integration,Manual Tailwind setup,npx astro add tailwind,Manual PostCSS config,Low,https://docs.astro.build/en/guides/integrations-guide/tailwind/
+18,Styling,Use CSS variables for theming,Define tokens in :root,CSS custom properties for themes,Hardcoded colors everywhere,:root { --primary: #3b82f6; },color: #3b82f6; everywhere,Medium,
+19,Data,Fetch in frontmatter,Data fetching in component frontmatter,Top-level await in frontmatter,useEffect for initial data,const data = await fetch(url),client-side fetch on mount,High,https://docs.astro.build/en/guides/data-fetching/
+20,Data,Use Astro.glob for local files,Import multiple local files,Astro.glob for markdown/data files,Manual imports for each file,const posts = await Astro.glob('./posts/*.md'),"import post1; import post2;",Medium,
+21,Data,Prefer content collections over glob,Type-safe collections for structured content,getCollection() for blog/docs,Astro.glob for structured content,await getCollection('blog'),await Astro.glob('./blog/*.md'),High,
+22,Data,Use environment variables correctly,Import.meta.env for env vars,PUBLIC_ prefix for client vars,Expose secrets to client,import.meta.env.PUBLIC_API_URL,import.meta.env.SECRET in client,High,https://docs.astro.build/en/guides/environment-variables/
+23,Performance,Preload critical assets,Use link preload for important resources,Preload fonts above-fold images,No preload hints,"<link rel=""preload"" href=""font.woff2"" as=""font"">",No preload for critical assets,Medium,
+24,Performance,Optimize images with astro:assets,Built-in image optimization,<Image /> component for optimization,<img> for local images,"import { Image } from 'astro:assets';","<img src=""./image.jpg"">",High,https://docs.astro.build/en/guides/images/
+25,Performance,Use picture for responsive images,Multiple formats and sizes,<Picture /> for art direction,Single image size for all screens,<Picture /> with multiple sources,<Image /> with single size,Medium,
+26,Performance,Lazy load below-fold content,Defer loading non-critical content,loading=lazy for images client:visible for components,Load everything immediately,"<img loading=""lazy"">",No lazy loading,Medium,
+27,Performance,Minimize client directives,Each directive adds JS bundle,Audit client: usage regularly,Sprinkle client:load everywhere,Only interactive components hydrated,Every component with client:load,High,
+28,ViewTransitions,Enable View Transitions,Smooth page transitions,<ViewTransitions /> in head,Full page reloads,"import { ViewTransitions } from 'astro:transitions';",No transition API,Medium,https://docs.astro.build/en/guides/view-transitions/
+29,ViewTransitions,Use transition:name,Named elements for morphing,transition:name for persistent elements,Unnamed transitions,"<header transition:name=""header"">",<header> without name,Low,
+30,ViewTransitions,Handle transition:persist,Keep state across navigations,transition:persist for media players,Re-initialize on every navigation,"<video transition:persist id=""player"">",Video restarts on navigation,Medium,
+31,ViewTransitions,Add fallback for no-JS,Graceful degradation,Content works without JS,Require JS for basic navigation,Static content accessible,Broken without ViewTransitions JS,High,
+32,SEO,Use built-in SEO component,Head management for meta tags,Astro SEO integration or manual head,No meta tags,"<title>{title}</title><meta name=""description"">",No SEO tags,High,
+33,SEO,Generate sitemap,Automatic sitemap generation,@astrojs/sitemap integration,Manual sitemap maintenance,npx astro add sitemap,Hand-written sitemap.xml,Medium,https://docs.astro.build/en/guides/integrations-guide/sitemap/
+34,SEO,Add RSS feed for content,RSS for blogs and content sites,@astrojs/rss for feed generation,No RSS feed,rss() helper in pages/rss.xml.js,No feed for blog,Low,https://docs.astro.build/en/guides/rss/
+35,SEO,Use canonical URLs,Prevent duplicate content issues,Astro.url for canonical generation,"<link rel=""canonical"" href={Astro.url}>",No canonical tags,Medium,
+36,Integrations,Use official integrations,Astro's integration system,npx astro add for integrations,Manual configuration,npx astro add react,Manual React setup,Medium,https://docs.astro.build/en/guides/integrations-guide/
+37,Integrations,Configure integrations in astro.config,Centralized configuration,integrations array in config,Scattered configuration,"integrations: [react(), tailwind()]",Multiple config files,Low,
+38,Integrations,Use adapter for deployment,Platform-specific adapters,Correct adapter for host,Wrong or no adapter,@astrojs/vercel for Vercel,No adapter for SSR,High,https://docs.astro.build/en/guides/deploy/
+39,TypeScript,Enable TypeScript,Type safety for Astro projects,tsconfig.json with astro types,No TypeScript,Astro TypeScript template,JavaScript only,Medium,https://docs.astro.build/en/guides/typescript/
+40,TypeScript,Type component props,Define prop interfaces,Props interface in frontmatter,Untyped props,"interface Props { title: string }",No props typing,Medium,
+41,TypeScript,Use strict mode,Catch errors early,strict: true in tsconfig,Loose TypeScript config,strictest template,base template,Low,
+42,Markdown,Use MDX for components,Components in markdown content,@astrojs/mdx for interactive docs,Plain markdown with workarounds,<Component /> in .mdx,HTML in .md files,Medium,https://docs.astro.build/en/guides/integrations-guide/mdx/
+43,Markdown,Configure markdown plugins,Extend markdown capabilities,remarkPlugins rehypePlugins in config,Manual HTML for features,remarkPlugins: [remarkToc],Manual TOC in every post,Low,
+44,Markdown,Use frontmatter for metadata,Structured post metadata,Frontmatter with typed schema,Inline metadata,title date in frontmatter,# Title as first line,Medium,
+45,API,Use API routes for endpoints,Server endpoints in pages/api,pages/api/[endpoint].ts for APIs,External API for simple endpoints,pages/api/posts.json.ts,Separate Express server,Medium,https://docs.astro.build/en/guides/endpoints/
+46,API,Return proper responses,Use Response object,new Response() with headers,Plain objects,return new Response(JSON.stringify(data)),return data,Medium,
+47,API,Handle methods correctly,Export named method handlers,export GET POST handlers,Single default export,export const GET = async () => {},export default async () => {},Low,
+48,Security,Sanitize user content,Prevent XSS in dynamic content,set:html only for trusted content,set:html with user input,"<Fragment set:html={sanitized} />","<div set:html={userInput} />",High,
+49,Security,Use HTTPS in production,Secure connections,HTTPS for all production sites,HTTP in production,https://example.com,http://example.com,High,
+50,Security,Validate API input,Check and sanitize all input,Zod validation for API routes,Trust all input,const body = schema.parse(data),const body = await request.json(),High,
+51,Build,Use hybrid rendering,Mix static and dynamic pages,output: 'hybrid' for flexibility,All SSR or all static,prerender per-page basis,Single rendering mode,Medium,https://docs.astro.build/en/guides/server-side-rendering/#hybrid-rendering
+52,Build,Analyze bundle size,Monitor JS bundle impact,Build output shows bundle sizes,Ignore bundle growth,Check astro build output,No size monitoring,Medium,
+53,Build,Use prefetch,Preload linked pages,prefetch integration,No prefetch for navigation,npx astro add prefetch,Manual prefetch,Low,https://docs.astro.build/en/guides/prefetch/
diff --git a/.claude/skills/ui-ux-pro-max/data/stacks/flutter.csv b/.claude/skills/ui-ux-pro-max/data/stacks/flutter.csv
new file mode 100644
index 000000000..b8dfd0d69
--- /dev/null
+++ b/.claude/skills/ui-ux-pro-max/data/stacks/flutter.csv
@@ -0,0 +1,53 @@
+No,Category,Guideline,Description,Do,Don't,Code Good,Code Bad,Severity,Docs URL
+1,Widgets,Use StatelessWidget when possible,Immutable widgets are simpler,StatelessWidget for static UI,StatefulWidget for everything,class MyWidget extends StatelessWidget,class MyWidget extends StatefulWidget (static),Medium,https://api.flutter.dev/flutter/widgets/StatelessWidget-class.html
+2,Widgets,Keep widgets small,Single responsibility principle,Extract widgets into smaller pieces,Large build methods,Column(children: [Header() Content()]),500+ line build method,Medium,
+3,Widgets,Use const constructors,Compile-time constants for performance,const MyWidget() when possible,Non-const for static widgets,const Text('Hello'),Text('Hello') for literals,High,https://dart.dev/guides/language/language-tour#constant-constructors
+4,Widgets,Prefer composition over inheritance,Combine widgets using children,Compose widgets,Extend widget classes,Container(child: MyContent()),class MyContainer extends Container,Medium,
+5,State,Use setState correctly,Minimal state in StatefulWidget,setState for UI state changes,setState for business logic,setState(() { _counter++; }),Complex logic in setState,Medium,https://api.flutter.dev/flutter/widgets/State/setState.html
+6,State,Avoid setState in build,Never call setState during build,setState in callbacks only,setState in build method,onPressed: () => setState(() {}),build() { setState(); },High,
+7,State,Use state management for complex apps,Provider Riverpod BLoC,State management for shared state,setState for global state,Provider.of<MyState>(context),Global setState calls,Medium,
+8,State,Prefer Riverpod or Provider,Recommended state solutions,Riverpod for new projects,InheritedWidget manually,ref.watch(myProvider),Custom InheritedWidget,Medium,https://riverpod.dev/
+9,State,Dispose resources,Clean up controllers and subscriptions,dispose() for cleanup,Memory leaks from subscriptions,@override void dispose() { controller.dispose(); },No dispose implementation,High,
+10,Layout,Use Column and Row,Basic layout widgets,Column Row for linear layouts,Stack for simple layouts,"Column(children: [Text(), Button()])",Stack for vertical list,Medium,https://api.flutter.dev/flutter/widgets/Column-class.html
+11,Layout,Use Expanded and Flexible,Control flex behavior,Expanded to fill space,Fixed sizes in flex containers,Expanded(child: Container()),Container(width: 200) in Row,Medium,
+12,Layout,Use SizedBox for spacing,Consistent spacing,SizedBox for gaps,Container for spacing only,SizedBox(height: 16),Container(height: 16),Low,
+13,Layout,Use LayoutBuilder for responsive,Respond to constraints,LayoutBuilder for adaptive layouts,Fixed sizes for responsive,LayoutBuilder(builder: (context constraints) {}),Container(width: 375),Medium,https://api.flutter.dev/flutter/widgets/LayoutBuilder-class.html
+14,Layout,Avoid deep nesting,Keep widget tree shallow,Extract deeply nested widgets,10+ levels of nesting,Extract widget to method or class,Column(Row(Column(Row(...)))),Medium,
+15,Lists,Use ListView.builder,Lazy list building,ListView.builder for long lists,ListView with children for large lists,"ListView.builder(itemCount: 100, itemBuilder: ...)",ListView(children: items.map(...).toList()),High,https://api.flutter.dev/flutter/widgets/ListView-class.html
+16,Lists,Provide itemExtent when known,Skip measurement,itemExtent for fixed height items,No itemExtent for uniform lists,ListView.builder(itemExtent: 50),ListView.builder without itemExtent,Medium,
+17,Lists,Use keys for stateful items,Preserve widget state,Key for stateful list items,No key for dynamic lists,ListTile(key: ValueKey(item.id)),ListTile without key,High,
+18,Lists,Use SliverList for custom scroll,Custom scroll effects,CustomScrollView with Slivers,Nested ListViews,CustomScrollView(slivers: [SliverList()]),ListView inside ListView,Medium,https://api.flutter.dev/flutter/widgets/SliverList-class.html
+19,Navigation,Use Navigator 2.0 or GoRouter,Declarative routing,go_router for navigation,Navigator.push for complex apps,GoRouter(routes: [...]),Navigator.push everywhere,Medium,https://pub.dev/packages/go_router
+20,Navigation,Use named routes,Organized navigation,Named routes for clarity,Anonymous routes,Navigator.pushNamed(context '/home'),Navigator.push(context MaterialPageRoute()),Low,
+21,Navigation,Handle back button (PopScope),Android back behavior and predictive back (Android 14+),Use PopScope widget (WillPopScope is deprecated),Use WillPopScope,"PopScope(canPop: false, onPopInvoked: (didPop) => ...)",WillPopScope(onWillPop: ...),High,https://api.flutter.dev/flutter/widgets/PopScope-class.html
+22,Navigation,Pass typed arguments,Type-safe route arguments,Typed route arguments,Dynamic arguments,MyRoute(id: '123'),arguments: {'id': '123'},Medium,
+23,Async,Use FutureBuilder,Async UI building,FutureBuilder for async data,setState for async,FutureBuilder(future: fetchData()),fetchData().then((d) => setState()),Medium,https://api.flutter.dev/flutter/widgets/FutureBuilder-class.html
+24,Async,Use StreamBuilder,Stream UI building,StreamBuilder for streams,Manual stream subscription,StreamBuilder(stream: myStream),stream.listen in initState,Medium,https://api.flutter.dev/flutter/widgets/StreamBuilder-class.html
+25,Async,Handle loading and error states,Complete async UI states,ConnectionState checks,Only success state,if (snapshot.connectionState == ConnectionState.waiting),No loading indicator,High,
+26,Async,Cancel subscriptions,Clean up stream subscriptions,Cancel in dispose,Memory leaks,subscription.cancel() in dispose,No subscription cleanup,High,
+27,Theming,Use ThemeData,Consistent theming,ThemeData for app theme,Hardcoded colors,Theme.of(context).primaryColor,Color(0xFF123456) everywhere,Medium,https://api.flutter.dev/flutter/material/ThemeData-class.html
+28,Theming,Use ColorScheme,Material 3 color system,ColorScheme for colors,Individual color properties,colorScheme: ColorScheme.fromSeed(),primaryColor: Colors.blue,Medium,
+29,Theming,Access theme via context,Dynamic theme access,Theme.of(context),Static theme reference,Theme.of(context).textTheme.bodyLarge,TextStyle(fontSize: 16),Medium,
+30,Theming,Support dark mode,Respect system theme,darkTheme in MaterialApp,Light theme only,"MaterialApp(theme: light, darkTheme: dark)",MaterialApp(theme: light),Medium,
+31,Animation,Use implicit animations,Simple animations,AnimatedContainer AnimatedOpacity,Explicit for simple transitions,AnimatedContainer(duration: Duration()),AnimationController for fade,Low,https://api.flutter.dev/flutter/widgets/AnimatedContainer-class.html
+32,Animation,Use AnimationController for complex,Fine-grained control,AnimationController with Ticker,Implicit for complex sequences,AnimationController(vsync: this),AnimatedContainer for staggered,Medium,
+33,Animation,Dispose AnimationControllers,Clean up animation resources,dispose() for controllers,Memory leaks,controller.dispose() in dispose,No controller disposal,High,
+34,Animation,Use Hero for transitions,Shared element transitions,Hero for navigation animations,Manual shared element,Hero(tag: 'image' child: Image()),Custom shared element animation,Low,https://api.flutter.dev/flutter/widgets/Hero-class.html
+35,Forms,Use Form widget,Form validation,Form with GlobalKey,Individual validation,Form(key: _formKey child: ...),TextField without Form,Medium,https://api.flutter.dev/flutter/widgets/Form-class.html
+36,Forms,Use TextEditingController,Control text input,Controller for text fields,onChanged for all text,final controller = TextEditingController(),onChanged: (v) => setState(),Medium,
+37,Forms,Validate on submit,Form validation flow,_formKey.currentState!.validate(),Skip validation,if (_formKey.currentState!.validate()),Submit without validation,High,
+38,Forms,Dispose controllers,Clean up text controllers,dispose() for controllers,Memory leaks,controller.dispose() in dispose,No controller disposal,High,
+39,Performance,Use const widgets,Reduce rebuilds,const for static widgets,No const for literals,const Icon(Icons.add),Icon(Icons.add),High,
+40,Performance,Avoid rebuilding entire tree,Minimal rebuild scope,Isolate changing widgets,setState on parent,Consumer only around changing widget,setState on root widget,High,
+41,Performance,Use RepaintBoundary,Isolate repaints,RepaintBoundary for animations,Full screen repaints,RepaintBoundary(child: AnimatedWidget()),Animation without boundary,Medium,https://api.flutter.dev/flutter/widgets/RepaintBoundary-class.html
+42,Performance,Profile with DevTools,Measure before optimizing,Flutter DevTools profiling,Guess at performance,DevTools performance tab,Optimize without measuring,Medium,https://docs.flutter.dev/tools/devtools
+43,Accessibility,Use Semantics widget,Screen reader support,Semantics for accessibility,Missing accessibility info,Semantics(label: 'Submit button'),GestureDetector without semantics,High,https://api.flutter.dev/flutter/widgets/Semantics-class.html
+44,Accessibility,Support large fonts,MediaQuery text scaling,MediaQuery.textScaleFactor,Fixed font sizes,style: Theme.of(context).textTheme,TextStyle(fontSize: 14),High,
+45,Accessibility,Test with screen readers,TalkBack and VoiceOver,Test accessibility regularly,Skip accessibility testing,Regular TalkBack testing,No screen reader testing,High,
+46,Testing,Use widget tests,Test widget behavior,WidgetTester for UI tests,Unit tests only,testWidgets('...' (tester) async {}),Only test() for UI,Medium,https://docs.flutter.dev/testing
+47,Testing,Use integration tests,Full app testing,integration_test package,Manual testing only,IntegrationTestWidgetsFlutterBinding,Manual E2E testing,Medium,
+48,Testing,Mock dependencies,Isolate tests,Mockito or mocktail,Real dependencies in tests,when(mock.method()).thenReturn(),Real API calls in tests,Medium,
+49,Platform,Use Platform checks,Platform-specific code,Platform.isIOS Platform.isAndroid,Same code for all platforms,if (Platform.isIOS) {},Hardcoded iOS behavior,Medium,
+50,Platform,Use kIsWeb for web,Web platform detection,kIsWeb for web checks,Platform for web,if (kIsWeb) {},Platform.isWeb (doesn't exist),Medium,
+51,Packages,Use pub.dev packages,Community packages,Popular maintained packages,Custom implementations,cached_network_image,Custom image cache,Medium,https://pub.dev/
+52,Packages,Check package quality,Quality before adding,Pub points and popularity,Any package without review,100+ pub points,Unmaintained packages,Medium,
diff --git a/.claude/skills/ui-ux-pro-max/data/stacks/html-tailwind.csv b/.claude/skills/ui-ux-pro-max/data/stacks/html-tailwind.csv
new file mode 100644
index 000000000..51ff57a68
--- /dev/null
+++ b/.claude/skills/ui-ux-pro-max/data/stacks/html-tailwind.csv
@@ -0,0 +1,56 @@
+No,Category,Guideline,Description,Do,Don't,Code Good,Code Bad,Severity,Docs URL
+1,Animation,Use Tailwind animate utilities,Built-in animations are optimized and respect reduced-motion,Use animate-pulse animate-spin animate-ping,Custom @keyframes for simple effects,animate-pulse,@keyframes pulse {...},Medium,https://tailwindcss.com/docs/animation
+2,Animation,Limit bounce animations,Continuous bounce is distracting and causes motion sickness,Use animate-bounce sparingly on CTAs only,Multiple bounce animations on page,Single CTA with animate-bounce,5+ elements with animate-bounce,High,
+3,Animation,Transition duration,Use appropriate transition speeds for UI feedback,duration-150 to duration-300 for UI,duration-1000 or longer for UI elements,transition-all duration-200,transition-all duration-1000,Medium,https://tailwindcss.com/docs/transition-duration
+4,Animation,Hover transitions,Add smooth transitions on hover state changes,Add transition class with hover states,Instant hover changes without transition,hover:bg-gray-100 transition-colors,hover:bg-gray-100 (no transition),Low,
+5,Z-Index,Use Tailwind z-* scale,Consistent stacking context with predefined scale,z-0 z-10 z-20 z-30 z-40 z-50,Arbitrary z-index values,z-50 for modals,z-[9999],Medium,https://tailwindcss.com/docs/z-index
+6,Z-Index,Fixed elements z-index,Fixed navigation and modals need explicit z-index,z-50 for nav z-40 for dropdowns,Relying on DOM order for stacking,fixed top-0 z-50,fixed top-0 (no z-index),High,
+7,Z-Index,Negative z-index for backgrounds,Use negative z-index for decorative backgrounds,z-[-1] for background elements,Positive z-index for backgrounds,-z-10 for decorative,z-10 for background,Low,
+8,Layout,Container max-width,Limit content width for readability,max-w-7xl mx-auto for main content,Full-width content on large screens,max-w-7xl mx-auto px-4,w-full (no max-width),Medium,https://tailwindcss.com/docs/container
+9,Layout,Responsive padding,Adjust padding for different screen sizes,px-4 md:px-6 lg:px-8,Same padding all sizes,px-4 sm:px-6 lg:px-8,px-8 (same all sizes),Medium,
+10,Layout,Grid gaps,Use consistent gap utilities for spacing,gap-4 gap-6 gap-8,Margins on individual items,grid gap-6,grid with mb-4 on each item,Medium,https://tailwindcss.com/docs/gap
+11,Layout,Flexbox alignment,Use flex utilities for alignment,items-center justify-between,Multiple nested wrappers,flex items-center justify-between,Nested divs for alignment,Low,
+12,Images,Aspect ratio,Maintain consistent image aspect ratios,aspect-video aspect-square,No aspect ratio on containers,aspect-video rounded-lg,No aspect control,Medium,https://tailwindcss.com/docs/aspect-ratio
+13,Images,Object fit,Control image scaling within containers,object-cover object-contain,Stretched distorted images,object-cover w-full h-full,No object-fit,Medium,https://tailwindcss.com/docs/object-fit
+14,Images,Lazy loading,Defer loading of off-screen images,loading='lazy' on images,All images eager load,<img loading='lazy'>,<img> without lazy,High,
+15,Images,Responsive images,Serve appropriate image sizes,srcset and sizes attributes,Same large image all devices,srcset with multiple sizes,4000px image everywhere,High,
+16,Typography,Prose plugin,Use @tailwindcss/typography for rich text,prose prose-lg for article content,Custom styles for markdown,prose prose-lg max-w-none,Custom text styling,Medium,https://tailwindcss.com/docs/typography-plugin
+17,Typography,Line height,Use appropriate line height for readability,leading-relaxed for body text,Default tight line height,leading-relaxed (1.625),leading-none or leading-tight,Medium,https://tailwindcss.com/docs/line-height
+18,Typography,Font size scale,Use consistent text size scale,text-sm text-base text-lg text-xl,Arbitrary font sizes,text-lg,text-[17px],Low,https://tailwindcss.com/docs/font-size
+19,Typography,Text truncation,Handle long text gracefully,truncate or line-clamp-*,Overflow breaking layout,line-clamp-2,No overflow handling,Medium,https://tailwindcss.com/docs/text-overflow
+20,Colors,Opacity utilities,Use color opacity utilities,bg-black/50 text-white/80,Separate opacity class,bg-black/50,bg-black opacity-50,Low,https://tailwindcss.com/docs/background-color
+21,Colors,Dark mode,Support dark mode with dark: prefix,dark:bg-gray-900 dark:text-white,No dark mode support,dark:bg-gray-900,Only light theme,Medium,https://tailwindcss.com/docs/dark-mode
+22,Colors,Semantic colors,Use semantic color naming in config,primary secondary danger success,Generic color names in components,bg-primary,bg-blue-500 everywhere,Medium,
+23,Spacing,Consistent spacing scale,Use Tailwind spacing scale consistently,p-4 m-6 gap-8,Arbitrary pixel values,p-4 (1rem),p-[15px],Low,https://tailwindcss.com/docs/customizing-spacing
+24,Spacing,Negative margins,Use sparingly for overlapping effects,-mt-4 for overlapping elements,Negative margins for layout fixing,-mt-8 for card overlap,-m-2 to fix spacing issues,Medium,
+25,Spacing,Space between,Use space-y-* for vertical lists,space-y-4 on flex/grid column,Margin on each child,space-y-4,Each child has mb-4,Low,https://tailwindcss.com/docs/space
+26,Forms,Focus states,Always show focus indicators,focus:ring-2 focus:ring-blue-500,Remove focus outline,focus:ring-2 focus:ring-offset-2,focus:outline-none (no replacement),High,
+27,Forms,Input sizing,Consistent input dimensions,h-10 px-3 for inputs,Inconsistent input heights,h-10 w-full px-3,Various heights per input,Medium,
+28,Forms,Disabled states,Clear disabled styling,disabled:opacity-50 disabled:cursor-not-allowed,No disabled indication,disabled:opacity-50,Same style as enabled,Medium,
+29,Forms,Placeholder styling,Style placeholder text appropriately,placeholder:text-gray-400,Dark placeholder text,placeholder:text-gray-400,Default dark placeholder,Low,
+30,Responsive,Mobile-first approach,Start with mobile styles and add breakpoints,Default mobile + md: lg: xl:,Desktop-first approach,text-sm md:text-base,text-base max-md:text-sm,Medium,https://tailwindcss.com/docs/responsive-design
+31,Responsive,Breakpoint testing,Test at standard breakpoints,320 375 768 1024 1280 1536,Only test on development device,Test all breakpoints,Single device testing,High,
+32,Responsive,Hidden/shown utilities,Control visibility per breakpoint,hidden md:block,Different content per breakpoint,hidden md:flex,Separate mobile/desktop components,Low,https://tailwindcss.com/docs/display
+33,Buttons,Button sizing,Consistent button dimensions,px-4 py-2 or px-6 py-3,Inconsistent button sizes,px-4 py-2 text-sm,Various padding per button,Medium,
+34,Buttons,Touch targets,Minimum 44px touch target on mobile,min-h-[44px] on mobile,Small buttons on mobile,min-h-[44px] min-w-[44px],h-8 w-8 on mobile,High,
+35,Buttons,Loading states,Show loading feedback,disabled + spinner icon,Clickable during loading,<Button disabled><Spinner/></Button>,Button without loading state,High,
+36,Buttons,Icon buttons,Accessible icon-only buttons,aria-label on icon buttons,Icon button without label,<button aria-label='Close'><XIcon/></button>,<button><XIcon/></button>,High,
+37,Cards,Card structure,Consistent card styling,rounded-lg shadow-md p-6,Inconsistent card styles,rounded-2xl shadow-lg p-6,Mixed card styling,Low,
+38,Cards,Card hover states,Interactive cards should have hover feedback,hover:shadow-lg transition-shadow,No hover on clickable cards,hover:shadow-xl transition-shadow,Static cards that are clickable,Medium,
+39,Cards,Card spacing,Consistent internal card spacing,space-y-4 for card content,Inconsistent internal spacing,space-y-4 or p-6,Mixed mb-2 mb-4 mb-6,Low,
+40,Accessibility,Screen reader text,Provide context for screen readers,sr-only for hidden labels,Missing context for icons,<span class='sr-only'>Close menu</span>,No label for icon button,High,https://tailwindcss.com/docs/screen-readers
+41,Accessibility,Focus visible,Show focus only for keyboard users,focus-visible:ring-2,Focus on all interactions,focus-visible:ring-2,focus:ring-2 (shows on click too),Medium,
+42,Accessibility,Reduced motion,Respect user motion preferences,motion-reduce:animate-none,Ignore motion preferences,motion-reduce:transition-none,No reduced motion support,High,https://tailwindcss.com/docs/hover-focus-and-other-states#prefers-reduced-motion
+43,Performance,Configure content paths,Tailwind needs to know where classes are used,Use 'content' array in config,Use deprecated 'purge' option (v2),"content: ['./src/**/*.{js,ts,jsx,tsx}']",purge: [...],High,https://tailwindcss.com/docs/content-configuration
+44,Performance,JIT mode,Use JIT for faster builds and smaller bundles,JIT enabled (default in v3),Full CSS in development,Tailwind v3 defaults,Tailwind v2 without JIT,Medium,
+45,Performance,Avoid @apply bloat,Use @apply sparingly,Direct utilities in HTML,Heavy @apply usage,class='px-4 py-2 rounded',@apply px-4 py-2 rounded;,Low,https://tailwindcss.com/docs/reusing-styles
+46,Plugins,Official plugins,Use official Tailwind plugins,@tailwindcss/forms typography aspect-ratio,Custom implementations,@tailwindcss/forms,Custom form reset CSS,Medium,https://tailwindcss.com/docs/plugins
+47,Plugins,Custom utilities,Create utilities for repeated patterns,Custom utility in config,Repeated arbitrary values,Custom shadow utility,"shadow-[0_4px_20px_rgba(0,0,0,0.1)] everywhere",Medium,
+48,Layout,Container Queries,Use @container for component-based responsiveness,Use @container and @lg: etc.,Media queries for component internals,@container @lg:grid-cols-2,@media (min-width: ...) inside component,Medium,https://github.com/tailwindlabs/tailwindcss-container-queries
+49,Interactivity,Group and Peer,Style based on parent/sibling state,group-hover peer-checked,JS for simple state interactions,group-hover:text-blue-500,onMouseEnter={() => setHover(true)},Low,https://tailwindcss.com/docs/hover-focus-and-other-states#styling-based-on-parent-state
+50,Customization,Arbitrary Values,Use [] for one-off values,w-[350px] for specific needs,Creating config for single use,top-[117px] (if strictly needed),style={{ top: '117px' }},Low,https://tailwindcss.com/docs/adding-custom-styles#using-arbitrary-values
+51,Colors,Theme color variables,Define colors in Tailwind theme and use directly,bg-primary text-success border-cta,bg-[var(--color-primary)] text-[var(--color-success)],bg-primary,bg-[var(--color-primary)],Medium,https://tailwindcss.com/docs/customizing-colors
+52,Colors,Use bg-linear-to-* for gradients,Tailwind v4 uses bg-linear-to-* syntax for gradients,bg-linear-to-r bg-linear-to-b,bg-gradient-to-* (deprecated in v4),bg-linear-to-r from-blue-500 to-purple-500,bg-gradient-to-r from-blue-500 to-purple-500,Medium,https://tailwindcss.com/docs/background-image
+53,Layout,Use shrink-0 shorthand,Shorter class name for flex-shrink-0,shrink-0 shrink,flex-shrink-0 flex-shrink,shrink-0,flex-shrink-0,Low,https://tailwindcss.com/docs/flex-shrink
+54,Layout,Use size-* for square dimensions,Single utility for equal width and height,size-4 size-8 size-12,Separate h-* w-* for squares,size-6,h-6 w-6,Low,https://tailwindcss.com/docs/size
+55,Images,SVG explicit dimensions,Add width/height attributes to SVGs to prevent layout shift before CSS loads,<svg class='size-6' width='24' height='24'>,SVG without explicit dimensions,<svg class='size-6' width='24' height='24'>,<svg class='size-6'>,High,
diff --git a/.claude/skills/ui-ux-pro-max/data/stacks/jetpack-compose.csv b/.claude/skills/ui-ux-pro-max/data/stacks/jetpack-compose.csv
new file mode 100644
index 000000000..971ff9e30
--- /dev/null
+++ b/.claude/skills/ui-ux-pro-max/data/stacks/jetpack-compose.csv
@@ -0,0 +1,53 @@
+No,Category,Guideline,Description,Do,Don't,Code Good,Code Bad,Severity,Docs URL
+1,Composable,Pure UI composables,Composable functions should only render UI,Accept state and callbacks,Calling usecase/repo,Pure UI composable,Business logic in UI,High,https://developer.android.com/jetpack/compose/mental-model
+2,Composable,Small composables,Each composable has single responsibility,Split into components,Huge composable,Reusable UI,Monolithic UI,Medium,
+3,Composable,Stateless by default,Prefer stateless composables,Hoist state,Local mutable state,Stateless UI,Hidden state,High,https://developer.android.com/jetpack/compose/state#state-hoisting
+4,State,Single source of truth,UI state comes from one source,StateFlow from VM,Multiple states,Unified UiState,Scattered state,High,https://developer.android.com/topic/architecture/ui-layer
+5,State,Model UI State,Use sealed interface/data class,UiState.Loading,Boolean flags,Explicit state,Flag hell,High,
+6,State,remember only UI state,remember for UI-only state,"Scroll, animation",Business state,Correct remember,Misuse remember,High,https://developer.android.com/jetpack/compose/state
+7,State,rememberSaveable,Persist state across config,rememberSaveable,remember,State survives,State lost,High,https://developer.android.com/jetpack/compose/state#restore-ui-state
+8,State,derivedStateOf,Optimize recomposition,derivedStateOf,Recompute always,Optimized,Jank,Medium,https://developer.android.com/jetpack/compose/performance
+9,SideEffect,LaunchedEffect keys,Use correct keys,LaunchedEffect(id),LaunchedEffect(Unit),Scoped effect,Infinite loop,High,https://developer.android.com/jetpack/compose/side-effects
+10,SideEffect,rememberUpdatedState,Avoid stale lambdas,rememberUpdatedState,Capture directly,Safe callback,Stale state,Medium,https://developer.android.com/jetpack/compose/side-effects
+11,SideEffect,DisposableEffect,Clean up resources,onDispose,No cleanup,No leak,Memory leak,High,
+12,Architecture,Unidirectional data flow,UI → VM → State,onEvent,Two-way binding,Predictable flow,Hard debug,High,https://developer.android.com/topic/architecture
+13,Architecture,No business logic in UI,Logic belongs to VM,Collect state,Call repo,Clean UI,Fat UI,High,
+14,Architecture,Expose immutable state,Expose StateFlow,asStateFlow,Mutable exposed,Safe API,State mutation,High,
+15,Lifecycle,Lifecycle-aware collect,Use collectAsStateWithLifecycle,Lifecycle aware,collectAsState,No leak,Leak,High,https://developer.android.com/jetpack/compose/lifecycle
+16,Navigation,Event-based navigation,VM emits navigation event,"VM: Channel + receiveAsFlow(), V: Collect with Dispatchers.Main.immediate",Nav in UI,Decoupled nav,Using State / SharedFlow for navigation -> event is replayed and navigation fires again (StateFlow),High,https://developer.android.com/jetpack/compose/navigation
+17,Navigation,Typed routes,Use sealed routes,sealed class Route,String routes,Type-safe,Runtime crash,Medium,
+18,Performance,Stable parameters,Prefer immutable/stable params,@Immutable,Mutable params,Stable recomposition,Extra recomposition,High,https://developer.android.com/jetpack/compose/performance
+19,Performance,Use key in Lazy,Provide stable keys,key=id,No key,Stable list,Item jump,High,
+20,Performance,Avoid heavy work,No heavy computation in UI,Precompute in VM,Compute in UI,Smooth UI,Jank,High,
+21,Performance,Remember expensive objects,remember heavy objects,remember,Recreate each recomposition,Efficient,Wasteful,Medium,
+22,Theming,Design system,Centralized theme,Material3 tokens,Hardcoded values,Consistent UI,Inconsistent,High,https://developer.android.com/jetpack/compose/themes
+23,Theming,Dark mode support,Theme-based colors,colorScheme,Fixed color,Adaptive UI,Broken dark,Medium,
+24,Layout,Prefer Modifier over extra layouts,Use Modifier to adjust layout instead of adding wrapper composables,Use Modifier.padding(),Wrap content with extra Box,Padding via modifier,Box just for padding,High,https://developer.android.com/jetpack/compose/modifiers
+25,Layout,Avoid deep layout nesting,Deep layout trees increase measure & layout cost,Keep layout flat,Box ? Column ? Box ? Row,Flat hierarchy,Deep nested tree,High,
+26,Layout,Use Row/Column for linear layout,Linear layouts are simpler and more performant,Use Row / Column,Custom layout for simple cases,Row/Column usage,Over-engineered layout,High,
+27,Layout,Use Box only for overlapping content,Box should be used only when children overlap,Stack elements,Use Box as Column,Proper overlay,Misused Box,Medium,
+28,Layout,Prefer LazyColumn over Column scroll,Lazy layouts are virtualized and efficient,LazyColumn,Column.verticalScroll(),Lazy list,Scrollable Column,High,https://developer.android.com/jetpack/compose/lists
+29,Layout,Avoid nested scroll containers,Nested scrolling causes UX & performance issues,Single scroll container,Scroll inside scroll,One scroll per screen,Nested scroll,High,
+30,Layout,Avoid fillMaxSize by default,fillMaxSize may break parent constraints,Use exact size,Fill max everywhere,Constraint-aware size,Overfilled layout,Medium,
+31,Layout,Avoid intrinsic size unless necessary,Intrinsic measurement is expensive,Explicit sizing,IntrinsicSize.Min,Predictable layout,Expensive measure,High,https://developer.android.com/jetpack/compose/layout/intrinsics
+32,Layout,Use Arrangement and Alignment APIs,Declare layout intent explicitly,Use Arrangement / Alignment,Manual spacing hacks,Declarative spacing,Magic spacing,High,
+33,Layout,Extract reusable layout patterns,Repeated layouts should be shared,Create layout composable,Copy-paste layouts,Reusable scaffold,Duplicated layout,High,
+34,Theming,No hardcoded text style,Use typography,MaterialTheme.typography,Hardcode sp,Scalable,Inconsistent,Medium,
+35,Testing,Stateless UI testing,Composable easy to test,Pass state,Hidden state,Testable,Hard test,High,https://developer.android.com/jetpack/compose/testing
+36,Testing,Use testTag,Stable UI selectors,Modifier.testTag,Find by text,Stable tests,Flaky tests,Medium,
+37,Preview,Multiple previews,Preview multiple states,@Preview,Single preview,Better dev UX,Misleading,Low,https://developer.android.com/jetpack/compose/tooling/preview
+38,DI,Inject VM via Hilt,Use hiltViewModel,@HiltViewModel,Manual VM,Clean DI,Coupling,High,https://developer.android.com/training/dependency-injection/hilt-jetpack
+39,DI,No DI in UI,Inject in VM,Constructor inject,Inject composable,Proper scope,Wrong scope,High,
+40,Accessibility,Content description,Accessible UI,contentDescription,Ignore a11y,Inclusive,A11y fail,Medium,https://developer.android.com/jetpack/compose/accessibility
+41,Accessibility,Semantics,Use semantics API,Modifier.semantics,None,Testable a11y,Invisible,Medium,
+42,Animation,Compose animation APIs,Use animate*AsState,AnimatedVisibility,Manual anim,Smooth,Jank,Medium,https://developer.android.com/jetpack/compose/animation
+43,Animation,Avoid animation logic in VM,Animation is UI concern,Animate in UI,Animate in VM,Correct layering,Mixed concern,Low,
+44,Modularization,Feature-based UI modules,UI per feature,:feature:ui,God module,Scalable,Tight coupling,High,https://developer.android.com/topic/modularization
+45,Modularization,Public UI contracts,Expose minimal UI API,Interface/Route,Expose impl,Encapsulated,Leaky module,Medium,
+46,State,Snapshot state only,Use Compose state,mutableStateOf,Custom observable,Compose aware,Buggy UI,Medium,
+47,State,Avoid mutable collections,Immutable list/map,PersistentList,MutableList,Stable UI,Silent bug,High,
+48,Lifecycle,RememberCoroutineScope usage,Only for UI jobs,UI coroutine,Long jobs,Scoped job,Leak,Medium,https://developer.android.com/jetpack/compose/side-effects#remembercoroutinescope
+49,Interop,Interop View carefully,Use AndroidView,Isolated usage,Mix everywhere,Safe interop,Messy UI,Low,https://developer.android.com/jetpack/compose/interop
+50,Interop,Avoid legacy patterns,No LiveData in UI,StateFlow,LiveData,Modern stack,Legacy debt,Medium,
+51,Debug,Use layout inspector,Inspect recomposition,Tools,Blind debug,Fast debug,Guessing,Low,https://developer.android.com/studio/debug/layout-inspector
+52,Debug,Enable recomposition counts,Track recomposition,Debug flags,Ignore,Performance aware,Hidden jank,Low,
diff --git a/.claude/skills/ui-ux-pro-max/data/stacks/laravel.csv b/.claude/skills/ui-ux-pro-max/data/stacks/laravel.csv
new file mode 100644
index 000000000..c32f20843
--- /dev/null
+++ b/.claude/skills/ui-ux-pro-max/data/stacks/laravel.csv
@@ -0,0 +1,51 @@
+No,Category,Guideline,Description,Do,Don't,Code Good,Code Bad,Severity,Docs URL
+1,Blade Templates,Use Blade components for reusable UI,Extract repeated markup into named Blade components,Use x-* components with @props for all reusable UI,Duplicate HTML blocks across views,<x-card :title="$title">{{ $slot }}</x-card>,@include('card' ['title' => $title]),High,https://laravel.com/docs/blade#components
+2,Blade Templates,Use layouts with @extends and @section,Define one master layout and extend it per page,@extends layout with named @section blocks,Duplicate header/footer HTML in every view,@extends('layouts.app') @section('content'),Full HTML in every view file,High,https://laravel.com/docs/blade#layouts-using-template-inheritance
+3,Blade Templates,Use @props for component type-safety,Declare accepted props inside components with @props,@props with defaults to document component API,Pass arbitrary variables without declaration,@props(['title' => '' 'variant' => 'primary']),No @props declaration in component,Medium,https://laravel.com/docs/blade#component-data-and-attributes
+4,Blade Templates,Use conditional CSS classes with @class,Build class strings conditionally without ternary noise,@class directive for conditional class binding,String concatenation or nested ternaries,@class(['btn' 'btn-primary' => $primary 'btn-disabled' => $disabled]),class="btn {{ $primary ? 'btn-primary' : '' }}",Medium,https://laravel.com/docs/blade#conditional-classes-and-styles
+5,Blade Templates,Use named slots for flexible layouts,Named slots let callers inject content into specific regions,@slot('header') and $slot for flexible component APIs,Hard-code all sub-sections inside components,"<x-modal><x-slot:header>Title</x-slot>Body</x-modal>",<x-modal title="Title">Body with no slot control</x-modal>,Medium,https://laravel.com/docs/blade#slots
+6,Blade Templates,Use Blade directives instead of raw PHP,Blade directives are readable and IDE-supported,@if @foreach @forelse @empty instead of <?php ?>,Raw PHP tags inside Blade templates,@forelse($items as $item) ... @empty <p>None</p> @endforelse,<?php foreach($items as $item): ?>,High,https://laravel.com/docs/blade#blade-directives
+7,Blade Templates,Escape output with {{ }},Use double curly braces for XSS-safe output,{{ }} for all user-supplied or dynamic text,{!! !!} for untrusted data,{{ $user->name }},{!! $user->name !!},High,https://laravel.com/docs/blade#displaying-data
+8,Blade Templates,Use @vite for asset loading,Vite integration handles cache busting and HMR automatically,@vite(['resources/css/app.css' 'resources/js/app.js']),Manual script/link tags with hardcoded paths,@vite(['resources/css/app.css' 'resources/js/app.js']),<link href="/css/app.css?v=123">,High,https://laravel.com/docs/vite
+9,Livewire,Bind inputs with wire:model,Two-way data binding keeps component state in sync,wire:model for all form inputs managed by Livewire,Manual JavaScript listeners syncing to component,<input wire:model="email">,<input @change="$wire.email = $event.target.value">,High,https://livewire.laravel.com/docs/properties
+10,Livewire,Use wire:model.live for real-time validation,Validate on input rather than only on submit,wire:model.live + #[Validate] for instant feedback,Only validate on form submit,<input wire:model.live="email"> with #[Validate('email')],<input wire:model="email"> with validate() on submit only,Medium,https://livewire.laravel.com/docs/validation
+11,Livewire,Use wire:click for actions,Bind UI events to component methods cleanly,wire:click for buttons and interactive elements,JavaScript fetch calls replicating Livewire actions,<button wire:click="save">Save</button>,<button onclick="fetch('/save')">Save</button>,High,https://livewire.laravel.com/docs/actions
+12,Livewire,Use lifecycle hooks appropriately,mount() for init; updated() for reactive side effects,mount() for initialization updatedFoo() for property changes,Heavy logic in render() or __construct(),public function mount(): void { $this->items = Item::all(); },public function render(): View { $this->items = Item::all(); },Medium,https://livewire.laravel.com/docs/lifecycle-hooks
+13,Livewire,Use lazy loading for heavy components,Defer render of expensive components until visible,wire:init or lazy attribute on components,Load all Livewire components on page load,<livewire:analytics-chart lazy />,<livewire:analytics-chart /> with heavy DB queries on mount,Medium,https://livewire.laravel.com/docs/lazy
+14,Livewire,Integrate Alpine.js for local UI state,Use Alpine.js for UI-only state that doesn't need server round-trips,x-data / x-show / x-transition for tooltips dropdowns,Livewire server calls for purely visual toggle state,<div x-data="{ open: false }"><button @click="open = !open">,<button wire:click="toggleDropdown"> for a local dropdown,Medium,https://livewire.laravel.com/docs/alpine
+15,Livewire,Use wire:loading for feedback,Always indicate to users when a server action is in progress,wire:loading.attr="disabled" and wire:loading elements,Provide no feedback while Livewire request is in flight,<button wire:click="save" wire:loading.attr="disabled">Save</button>,<button wire:click="save">Save</button> with no loading state,High,https://livewire.laravel.com/docs/wire-loading
+16,Livewire,Handle file uploads with WithFileUploads,Livewire's trait manages chunked upload and temp storage,WithFileUploads trait + wire:model for file inputs,Manual multipart form submissions for Livewire pages,use WithFileUploads; public $photo; <input wire:model="photo" type="file">,<form action="/upload" method="POST" enctype="multipart/form-data">,Medium,https://livewire.laravel.com/docs/uploads
+17,Inertia.js,Use Inertia page components as route endpoints,Each page is a Vue/React component rendered server-side via Inertia::render(),Inertia::render('Dashboard' ['data' => $data]) in controllers,Return JSON and fetch from JavaScript,return Inertia::render('Users/Index' ['users' => $users]);,return response()->json($users); with client-side fetch,High,https://inertiajs.com/responses
+18,Inertia.js,Share global data via HandleInertiaRequests,Middleware share() provides auth user and flash to every page,Share auth/flash in HandleInertiaRequests middleware,Pass auth to every Inertia::render() call,public function share(Request $r): array { return ['auth' => ['user' => $r->user()]]; },Inertia::render('Page' ['auth' => auth()->user()]) every controller,High,https://inertiajs.com/shared-data
+19,Inertia.js,Use <Link> for client-side navigation,Inertia Link intercepts clicks for SPA-like transitions,<Link href="/dashboard"> instead of <a href>,Regular <a> tags for internal navigation,<Link href={route('dashboard')}>Dashboard</Link>,<a href="/dashboard">Dashboard</a>,High,https://inertiajs.com/links
+20,Inertia.js,Use useForm for form state and submission,Inertia's useForm manages progress errors and transforms,"useForm for all page-level forms, form.post() for submit",Axios/fetch for form submissions on Inertia pages,"const form = useForm({ name: '' }); form.post('/users');","axios.post('/users', { name });",High,https://inertiajs.com/forms
+21,Inertia.js,Use persistent layouts to preserve state,Wrap pages in a persistent layout so header/sidebar don't remount,layout property on page component for persistent UI,Re-render full layout on every page visit,MyPage.layout = (page) => <AppLayout>{page}</AppLayout>,No layout — full page reload feel on navigation,Medium,https://inertiajs.com/pages#persistent-layouts
+22,Inertia.js,Enable SSR for public pages,Server-side rendering improves SEO and first paint,Enable Inertia SSR for marketing and public pages,Client-only rendering for all pages including public,php artisan inertia:start-ssr with @inertiaHead,No SSR on pages requiring good SEO,Medium,https://inertiajs.com/server-side-rendering
+23,Styling,Set up Tailwind CSS via Vite,Use Vite + tailwindcss plugin for fast HMR and optimized builds,Install tailwindcss @tailwindcss/vite and configure vite.config.js,Laravel Mix or manual PostCSS pipeline for new projects,plugins: [tailwindcss()] in vite.config.js + @import 'tailwindcss' in app.css,Laravel Mix with require('tailwindcss') in webpack,High,https://tailwindcss.com/docs/installation/framework-guides
+24,Styling,Purge unused styles via content config,Tailwind scans Blade and JS files to tree-shake unused classes,content: ['./resources/views/**/*.blade.php' './resources/js/**/*.{js,vue}'],No content config — ship all 3MB of CSS,content: ['./resources/**/*.blade.php' './resources/**/*.js'],content: [],High,https://tailwindcss.com/docs/content-configuration
+25,Styling,Use dark mode class strategy,class-based dark mode integrates with server-rendered preference,darkMode: 'class' with a toggle that sets class on <html>,Media query only — no user override possible,darkMode: 'class'; document.documentElement.classList.toggle('dark'),darkMode: 'media' — no programmatic control,Medium,https://tailwindcss.com/docs/dark-mode
+26,Styling,Use @apply sparingly in component CSS,Extract only truly repeated multi-class patterns,@apply for BEM base classes shared across many components,@apply for every single element — defeats Tailwind's purpose,@apply flex items-center gap-2 (shared button base),@apply text-sm for a single use,Low,https://tailwindcss.com/docs/functions-and-directives#apply
+27,Styling,Configure custom design tokens in CSS,Define brand colors spacing fonts as CSS variables consumed by Tailwind,Custom @theme tokens matched to brand guidelines,Magic color hex codes scattered across Blade templates,@theme { --color-brand: oklch(0.6 0.2 250); },bg-[#1a2b3c] inline throughout templates,Medium,https://tailwindcss.com/docs/theme
+28,Components,Use anonymous Blade components for UI primitives,Blade files in resources/views/components/ auto-register as x-* components,Anonymous components for buttons alerts badges cards,Blade @includes for anything reusable,<x-badge variant="success">Active</x-badge>,@include('partials.badge' ['variant' => 'success']),Medium,https://laravel.com/docs/blade#anonymous-components
+29,Components,Use class-based components for complex logic,PHP class components can inject services and pre-process data,app/View/Components/ class when component needs PHP logic,Blade @php blocks for business logic inside templates,class AlertComponent { public function __construct(public string $type) {} },@php $color = $type === 'error' ? 'red' : 'green'; @endphp,Medium,https://laravel.com/docs/blade#components
+30,Components,Forward extra attributes with $attributes,Pass through HTML attributes like class id aria to root element,$attributes->merge() on root element of components,Ignore caller-provided HTML attributes silently,<div {{ $attributes->merge(['class' => 'btn']) }}>,<div class="btn"> — drops extra class/id from caller,High,https://laravel.com/docs/blade#component-attributes
+31,Components,Separate variant logic from templates,Keep variant/size/color logic in a PHP class or helper not in Blade,Variant class or match() expression in component class,Long @if chains for variants inside Blade templates,"public function classes(): string { return match($this->variant) { 'primary' => 'bg-blue-600', } }","@if($variant === 'primary') bg-blue-600 @elseif($variant === 'secondary')...",Medium,https://laravel.com/docs/blade#components
+32,Components,Provide default slot content,Use {{ $slot ?? '' }} or named slot defaults so components are usable empty,Default content in slots for optional regions,Require every slot to be filled — throws errors on empty usage,{{ $icon ?? '' }} in component Blade file,{{ $icon }} — fatal if caller omits slot,Low,https://laravel.com/docs/blade#slots
+33,Components,Use component namespacing for packages,Prefix third-party or module components to avoid collisions,Register custom prefix via Blade::componentNamespace(),Mix first-party and package component names with no prefix,Blade::componentNamespace('Modules\\Shop\\Views' 'shop'); <x-shop::product-card />,<x-product-card /> colliding with first-party card,Low,https://laravel.com/docs/blade#manually-registering-components
+34,Forms,Validate with Form Request classes,Move validation rules out of controllers into dedicated FormRequest classes,php artisan make:request and define rules() + authorize(),Inline validate() in controller actions,class StorePostRequest extends FormRequest { public function rules() { return ['title' => 'required|max:255']; } },public function store(Request $r) { $r->validate(['title' => 'required']); },High,https://laravel.com/docs/validation#form-request-validation
+35,Forms,Preserve old input on validation failure,Use old() to repopulate form fields after server-side error redirect,old('field') as default value on all form inputs,Empty form fields when validation fails,<input name="email" value="{{ old('email') }}">,<input name="email">,High,https://laravel.com/docs/validation#repopulating-forms
+36,Forms,Display validation errors with @error,Use the @error directive for inline field-level error messages,@error('field') to show per-field messages,Dump $errors->all() in one block at top of form,@error('email') <p class="text-red-500">{{ $message }}</p> @enderror,@foreach($errors->all() as $e) {{ $e }} @endforeach,Medium,https://laravel.com/docs/validation#quick-displaying-the-validation-errors
+37,Forms,Use CSRF token on all forms,CSRF protection is enabled by default — include @csrf in every form,@csrf in every POST/PUT/PATCH/DELETE form,Disable VerifyCsrfToken middleware for convenience,<form method="POST">@csrf ...,<form method="POST"> without @csrf,High,https://laravel.com/docs/csrf
+38,Forms,Use method spoofing for PUT/PATCH/DELETE,HTML forms only support GET/POST — use @method for REST actions,@method('PUT') inside form for update/delete routes,Route::post for all mutations including updates,"<form method=""POST"">@csrf @method('PUT')",<form method="POST" action="/users/update">,Medium,https://laravel.com/docs/routing#form-method-spoofing
+39,Forms,Display flash messages consistently,Flash success/error in controller; read in layout with session(),session('status') in layout for global flash display,Re-query DB or pass flash from every controller individually,@if(session('success')) <div class="alert">{{ session('success') }}</div> @endif,if($user) return back()->with(['user' => $user]);,Medium,https://laravel.com/docs/session#flash-data
+40,Performance,Eager load relationships to prevent N+1,Always eager load related models used in views with with(),with() in queries before passing collections to views,Lazy-load relations inside Blade loops,User::with('posts' 'avatar')->get(),User::all() then @foreach $user->posts in Blade,High,https://laravel.com/docs/eloquent-relationships#eager-loading
+41,Performance,Cache rendered Blade fragments,Use cache() helper to wrap expensive rendered partials,cache() around slow partials that change infrequently,Re-render identical content on every request,@php echo cache()->remember('sidebar' 3600 fn() => view('sidebar')->render()); @endphp,{{ view('sidebar')->render() }} on every page load,Medium,https://laravel.com/docs/cache
+42,Performance,Paginate large data sets,Always paginate collections in list views,->paginate() or ->simplePaginate() with {{ $items->links() }},->get() for large tables in views,User::paginate(20) with <x-pagination :links="$users" />,User::all() passed to Blade,High,https://laravel.com/docs/pagination
+43,Performance,Queue slow background tasks,Offload emails notifications and heavy processing to queues,Dispatch jobs for anything taking >200ms,Block HTTP request with slow operations,ProcessImage::dispatch($file); return back();,Storage::put(); Mail::send(); Image::resize(); in controller,High,https://laravel.com/docs/queues
+44,Performance,Use route model binding,Laravel resolves models automatically — avoids manual find(),Type-hint model in controller method,Manual User::findOrFail($id) in every method,public function show(User $user): View { return view('users.show' compact('user')); },public function show($id) { $user = User::findOrFail($id); },Medium,https://laravel.com/docs/routing#route-model-binding
+45,Performance,Enable HTTP response caching for static content,Cache control headers for pages that rarely change,Cache-Control headers via middleware for public pages,No caching — serve every response fresh,response()->view('home')->header('Cache-Control' 'public, max-age=3600'),No cache headers on marketing pages,Medium,https://laravel.com/docs/responses#response-headers
+46,Security,Escape all output in Blade,{{ }} auto-escapes HTML — never use {!! !!} on user data,{{ }} for all untrusted or dynamic content,{!! !!} for user-controlled strings,{{ $comment->body }},{!! $comment->body !!},High,https://laravel.com/docs/blade#displaying-data
+47,Security,Protect routes with Gate and Policy,Use policies for authorization — never inline permission checks in views,@can / Gate::allows() for UI visibility; policy()->authorize() for actions,Hardcode role checks inline across templates,@can('update' $post) <a href="{{ route('posts.edit' $post) }}">Edit</a> @endcan,@if(auth()->user()->role === 'admin') <a href="/edit">,High,https://laravel.com/docs/authorization#policies
+48,Security,Validate and authorize file uploads,Check MIME type size and store outside public root,Store in storage/app/private + validate mimes and max,Store raw upload in public/ without validation,"'avatar' => ['required' 'image' 'mimes:jpg,png' 'max:2048']",'avatar' => 'required' with no MIME or size check,High,https://laravel.com/docs/filesystem#file-uploads
+49,Security,Use signed URLs for temporary links,Generate expiring URLs for private downloads or email confirmations,URL::signedRoute() or temporarySignedRoute(),Expose sequential IDs in download URLs without auth,URL::temporarySignedRoute('file.download' now()->addMinutes(30) ['file' => $id]),route('file.download' $id) with no expiry or signature,High,https://laravel.com/docs/urls#signed-urls
+50,Security,Set a strict Content Security Policy,CSP headers prevent XSS injection of external scripts,spatie/laravel-csp or custom middleware to emit CSP header,No CSP — browser runs any injected script,Header: Content-Security-Policy: default-src 'self'; script-src 'self',No Content-Security-Policy header on responses,Medium,https://laravel.com/docs/middleware
diff --git a/.claude/skills/ui-ux-pro-max/data/stacks/nextjs.csv b/.claude/skills/ui-ux-pro-max/data/stacks/nextjs.csv
new file mode 100644
index 000000000..8762161a9
--- /dev/null
+++ b/.claude/skills/ui-ux-pro-max/data/stacks/nextjs.csv
@@ -0,0 +1,53 @@
+No,Category,Guideline,Description,Do,Don't,Code Good,Code Bad,Severity,Docs URL
+1,Routing,Use App Router for new projects,App Router is the recommended approach in Next.js 14+,app/ directory with page.tsx,pages/ for new projects,app/dashboard/page.tsx,pages/dashboard.tsx,Medium,https://nextjs.org/docs/app
+2,Routing,Use file-based routing,Create routes by adding files in app directory,page.tsx for routes layout.tsx for layouts,Manual route configuration,app/blog/[slug]/page.tsx,Custom router setup,Medium,https://nextjs.org/docs/app/building-your-application/routing
+3,Routing,Colocate related files,Keep components styles tests with their routes,Component files alongside page.tsx,Separate components folder,app/dashboard/_components/,components/dashboard/,Low,
+4,Routing,Use route groups for organization,Group routes without affecting URL,Parentheses for route groups,Nested folders affecting URL,(marketing)/about/page.tsx,marketing/about/page.tsx,Low,https://nextjs.org/docs/app/building-your-application/routing/route-groups
+5,Routing,Handle loading states,Use loading.tsx for route loading UI,loading.tsx alongside page.tsx,Manual loading state management,app/dashboard/loading.tsx,useState for loading in page,Medium,https://nextjs.org/docs/app/building-your-application/routing/loading-ui-and-streaming
+6,Routing,Handle errors with error.tsx,Catch errors at route level,error.tsx with reset function,try/catch in every component,app/dashboard/error.tsx,try/catch in page component,High,https://nextjs.org/docs/app/building-your-application/routing/error-handling
+7,Rendering,Use Server Components by default,Server Components reduce client JS bundle,Keep components server by default,Add 'use client' unnecessarily,export default function Page(),('use client') for static content,High,https://nextjs.org/docs/app/building-your-application/rendering/server-components
+8,Rendering,Mark Client Components explicitly,'use client' for interactive components,Add 'use client' only when needed,Server Component with hooks/events,('use client') for onClick useState,No directive with useState,High,https://nextjs.org/docs/app/building-your-application/rendering/client-components
+9,Rendering,Push Client Components down,Keep Client Components as leaf nodes,Client wrapper for interactive parts only,Mark page as Client Component,<InteractiveButton/> in Server Page,('use client') on page.tsx,High,
+10,Rendering,Use streaming for better UX,Stream content with Suspense boundaries,Suspense for slow data fetches,Wait for all data before render,<Suspense><SlowComponent/></Suspense>,await allData then render,Medium,https://nextjs.org/docs/app/building-your-application/routing/loading-ui-and-streaming
+11,Rendering,Choose correct rendering strategy,SSG for static SSR for dynamic ISR for semi-static,generateStaticParams for known paths,SSR for static content,export const revalidate = 3600,fetch without cache config,Medium,
+12,DataFetching,Fetch data in Server Components,Fetch directly in async Server Components,async function Page() { const data = await fetch() },useEffect for initial data,const data = await fetch(url),useEffect(() => fetch(url)),High,https://nextjs.org/docs/app/building-your-application/data-fetching
+13,DataFetching,Configure caching explicitly (Next.js 15+),Next.js 15 changed defaults to uncached for fetch,Explicitly set cache: 'force-cache' for static data,Assume default is cached (it's not in Next.js 15),fetch(url { cache: 'force-cache' }),fetch(url) // Uncached in v15,High,https://nextjs.org/docs/app/building-your-application/upgrading/version-15
+14,DataFetching,Deduplicate fetch requests,React and Next.js dedupe same requests,Same fetch call in multiple components,Manual request deduplication,Multiple components fetch same URL,Custom cache layer,Low,
+15,DataFetching,Use Server Actions for mutations,Server Actions for form submissions,action={serverAction} in forms,API route for every mutation,<form action={createPost}>,<form onSubmit={callApiRoute}>,Medium,https://nextjs.org/docs/app/building-your-application/data-fetching/server-actions-and-mutations
+16,DataFetching,Revalidate data appropriately,Use revalidatePath/revalidateTag after mutations,Revalidate after Server Action,'use client' with manual refetch,revalidatePath('/posts'),router.refresh() everywhere,Medium,https://nextjs.org/docs/app/building-your-application/caching#revalidating
+17,Images,Use next/image for optimization,Automatic image optimization and lazy loading,<Image> component for all images,<img> tags directly,<Image src={} alt={} width={} height={}>,<img src={}/>,High,https://nextjs.org/docs/app/building-your-application/optimizing/images
+18,Images,Provide width and height,Prevent layout shift with dimensions,width and height props or fill,Missing dimensions,<Image width={400} height={300}/>,<Image src={url}/>,High,
+19,Images,Use fill for responsive images,Fill container with object-fit,fill prop with relative parent,Fixed dimensions for responsive,"<Image fill className=""object-cover""/>",<Image width={window.width}/>,Medium,
+20,Images,Configure remote image domains,Whitelist external image sources,remotePatterns in next.config.js,Allow all domains,remotePatterns: [{ hostname: 'cdn.example.com' }],domains: ['*'],High,https://nextjs.org/docs/app/api-reference/components/image#remotepatterns
+21,Images,Use priority for LCP images,Mark above-fold images as priority,priority prop on hero images,All images with priority,<Image priority src={hero}/>,<Image priority/> on every image,Medium,
+22,Fonts,Use next/font for fonts,Self-hosted fonts with zero layout shift,next/font/google or next/font/local,External font links,import { Inter } from 'next/font/google',"<link href=""fonts.googleapis.com""/>",Medium,https://nextjs.org/docs/app/building-your-application/optimizing/fonts
+23,Fonts,Apply font to layout,Set font in root layout for consistency,className on body in layout.tsx,Font in individual pages,<body className={inter.className}>,Each page imports font,Low,
+24,Fonts,Use variable fonts,Variable fonts reduce bundle size,Single variable font file,Multiple font weights as files,Inter({ subsets: ['latin'] }),Inter_400 Inter_500 Inter_700,Low,
+25,Metadata,Use generateMetadata for dynamic,Generate metadata based on params,export async function generateMetadata(),Hardcoded metadata everywhere,generateMetadata({ params }),export const metadata = {},Medium,https://nextjs.org/docs/app/building-your-application/optimizing/metadata
+26,Metadata,Include OpenGraph images,Add OG images for social sharing,opengraph-image.tsx or og property,Missing social preview images,opengraph: { images: ['/og.png'] },No OG configuration,Medium,
+27,Metadata,Use metadata API,Export metadata object for static metadata,export const metadata = {},Manual head tags,export const metadata = { title: 'Page' },<head><title>Page</title></head>,Medium,
+28,API,Use Route Handlers for APIs,app/api routes for API endpoints,app/api/users/route.ts,pages/api for new projects,export async function GET(request),export default function handler,Medium,https://nextjs.org/docs/app/building-your-application/routing/route-handlers
+29,API,Return proper Response objects,Use NextResponse for API responses,NextResponse.json() for JSON,Plain objects or res.json(),return NextResponse.json({ data }),return { data },Medium,
+30,API,Handle HTTP methods explicitly,Export named functions for methods,Export GET POST PUT DELETE,Single handler for all methods,export async function POST(),switch(req.method),Low,
+31,API,Validate request body,Validate input before processing,Zod or similar for validation,Trust client input,const body = schema.parse(await req.json()),const body = await req.json(),High,
+32,Middleware,Use middleware for auth,Protect routes with middleware.ts,middleware.ts at root,Auth check in every page,export function middleware(request),if (!session) redirect in page,Medium,https://nextjs.org/docs/app/building-your-application/routing/middleware
+33,Middleware,Match specific paths,Configure middleware matcher,config.matcher for specific routes,Run middleware on all routes,matcher: ['/dashboard/:path*'],No matcher config,Medium,
+34,Middleware,Keep middleware edge-compatible,Middleware runs on Edge runtime,Edge-compatible code only,Node.js APIs in middleware,Edge-compatible auth check,fs.readFile in middleware,High,
+35,Environment,Use NEXT_PUBLIC prefix,Client-accessible env vars need prefix,NEXT_PUBLIC_ for client vars,Server vars exposed to client,NEXT_PUBLIC_API_URL,API_SECRET in client code,High,https://nextjs.org/docs/app/building-your-application/configuring/environment-variables
+36,Environment,Validate env vars,Check required env vars exist,Validate on startup,Undefined env at runtime,if (!process.env.DATABASE_URL) throw,process.env.DATABASE_URL (might be undefined),High,
+37,Environment,Use .env.local for secrets,Local env file for development secrets,.env.local gitignored,Secrets in .env committed,.env.local with secrets,.env with DATABASE_PASSWORD,High,
+38,Performance,Analyze bundle size,Use @next/bundle-analyzer,Bundle analyzer in dev,Ship large bundles blindly,ANALYZE=true npm run build,No bundle analysis,Medium,https://nextjs.org/docs/app/building-your-application/optimizing/bundle-analyzer
+39,Performance,Use dynamic imports,Code split with next/dynamic,dynamic() for heavy components,Import everything statically,const Chart = dynamic(() => import('./Chart')),import Chart from './Chart',Medium,https://nextjs.org/docs/app/building-your-application/optimizing/lazy-loading
+40,Performance,Avoid layout shifts,Reserve space for dynamic content,Skeleton loaders aspect ratios,Content popping in,"<Skeleton className=""h-48""/>",No placeholder for async content,High,
+41,Performance,Use Partial Prerendering,Combine static and dynamic in one route,Static shell with Suspense holes,Full dynamic or static pages,Static header + dynamic content,Entire page SSR,Low,https://nextjs.org/docs/app/building-your-application/rendering/partial-prerendering
+42,Link,Use next/link for navigation,Client-side navigation with prefetching,"<Link href=""""> for internal links",<a> for internal navigation,"<Link href=""/about"">About</Link>","<a href=""/about"">About</a>",High,https://nextjs.org/docs/app/api-reference/components/link
+43,Link,Prefetch strategically,Control prefetching behavior,prefetch={false} for low-priority,Prefetch all links,<Link prefetch={false}>,Default prefetch on every link,Low,
+44,Link,Use scroll option appropriately,Control scroll behavior on navigation,scroll={false} for tabs pagination,Always scroll to top,<Link scroll={false}>,Manual scroll management,Low,
+45,Config,Use next.config.js correctly,Configure Next.js behavior,Proper config options,Deprecated or wrong options,images: { remotePatterns: [] },images: { domains: [] },Medium,https://nextjs.org/docs/app/api-reference/next-config-js
+46,Config,Enable strict mode,Catch potential issues early,reactStrictMode: true,Strict mode disabled,reactStrictMode: true,reactStrictMode: false,Medium,
+47,Config,Configure redirects and rewrites,Use config for URL management,redirects() rewrites() in config,Manual redirect handling,redirects: async () => [...],res.redirect in pages,Medium,https://nextjs.org/docs/app/api-reference/next-config-js/redirects
+48,Deployment,Use Vercel for easiest deploy,Vercel optimized for Next.js,Deploy to Vercel,Self-host without knowledge,vercel deploy,Complex Docker setup for simple app,Low,https://nextjs.org/docs/app/building-your-application/deploying
+49,Deployment,Configure output for self-hosting,Set output option for deployment target,output: 'standalone' for Docker,Default output for containers,output: 'standalone',No output config for Docker,Medium,https://nextjs.org/docs/app/building-your-application/deploying#self-hosting
+50,Security,Sanitize user input,Never trust user input,Escape sanitize validate all input,Direct interpolation of user data,DOMPurify.sanitize(userInput),dangerouslySetInnerHTML={{ __html: userInput }},High,
+51,Security,Use CSP headers,Content Security Policy for XSS protection,Configure CSP in next.config.js,No security headers,headers() with CSP,No CSP configuration,High,https://nextjs.org/docs/app/building-your-application/configuring/content-security-policy
+52,Security,Validate Server Action input,Server Actions are public endpoints,Validate and authorize in Server Action,Trust Server Action input,Auth check + validation in action,Direct database call without check,High,
diff --git a/.claude/skills/ui-ux-pro-max/data/stacks/nuxt-ui.csv b/.claude/skills/ui-ux-pro-max/data/stacks/nuxt-ui.csv
new file mode 100644
index 000000000..7146e8483
--- /dev/null
+++ b/.claude/skills/ui-ux-pro-max/data/stacks/nuxt-ui.csv
@@ -0,0 +1,51 @@
+No,Category,Guideline,Description,Do,Don't,Code Good,Code Bad,Severity,Docs URL
+1,Installation,Add Nuxt UI module,Install and configure Nuxt UI in your Nuxt project,pnpm add @nuxt/ui and add to modules,Manual component imports,"modules: ['@nuxt/ui']","import { UButton } from '@nuxt/ui'",High,https://ui.nuxt.com/docs/getting-started/installation/nuxt
+2,Installation,Import Tailwind and Nuxt UI CSS,Required CSS imports in main.css file,@import tailwindcss and @import @nuxt/ui,Skip CSS imports,"@import ""tailwindcss""; @import ""@nuxt/ui"";",No CSS imports,High,https://ui.nuxt.com/docs/getting-started/installation/nuxt
+3,Installation,Wrap app with UApp component,UApp provides global configs for Toast Tooltip and overlays,<UApp> wrapper in app.vue,Skip UApp wrapper,<UApp><NuxtPage/></UApp>,<NuxtPage/> without wrapper,High,https://ui.nuxt.com/docs/components/app
+4,Components,Use U prefix for components,All Nuxt UI components use U prefix by default,UButton UInput UModal,Button Input Modal,<UButton>Click</UButton>,<Button>Click</Button>,Medium,https://ui.nuxt.com/docs/getting-started/installation/nuxt
+5,Components,Use semantic color props,Use semantic colors like primary secondary error,color="primary" color="error",Hardcoded colors,"<UButton color=""primary"">","<UButton class=""bg-green-500"">",Medium,https://ui.nuxt.com/docs/getting-started/theme/design-system
+6,Components,Use variant prop for styling,Nuxt UI provides solid outline soft subtle ghost link variants,variant="soft" variant="outline",Custom button classes,"<UButton variant=""soft"">","<UButton class=""border bg-transparent"">",Medium,https://ui.nuxt.com/docs/components/button
+7,Components,Use size prop consistently,Components support xs sm md lg xl sizes,size="sm" size="lg",Arbitrary sizing classes,"<UButton size=""lg"">","<UButton class=""text-xl px-6"">",Low,https://ui.nuxt.com/docs/components/button
+8,Icons,Use icon prop with Iconify format,Nuxt UI supports Iconify icons via icon prop,icon="lucide:home" icon="heroicons:user",i-lucide-home format,"<UButton icon=""lucide:home"">","<UButton icon=""i-lucide-home"">",Medium,https://ui.nuxt.com/docs/getting-started/integrations/icons/nuxt
+9,Icons,Use leadingIcon and trailingIcon,Position icons with dedicated props for clarity,leadingIcon="lucide:plus" trailingIcon="lucide:arrow-right",Manual icon positioning,"<UButton leadingIcon=""lucide:plus"">","<UButton><Icon name=""lucide:plus""/>Add</UButton>",Low,https://ui.nuxt.com/docs/components/button
+10,Theming,Configure colors in app.config.ts,Runtime color configuration without restart,ui.colors.primary in app.config.ts,Hardcoded colors in components,"defineAppConfig({ ui: { colors: { primary: 'blue' } } })","<UButton class=""bg-blue-500"">",High,https://ui.nuxt.com/docs/getting-started/theme/design-system
+11,Theming,Use @theme directive for custom colors,Define design tokens in CSS with Tailwind @theme,@theme { --color-brand-500: #xxx },Inline color definitions,@theme { --color-brand-500: #ef4444; },:style="{ color: '#ef4444' }",Medium,https://ui.nuxt.com/docs/getting-started/theme/design-system
+12,Theming,Extend semantic colors in nuxt.config,Register new colors like tertiary in theme.colors,theme.colors array in ui config,Use undefined colors,"ui: { theme: { colors: ['primary', 'tertiary'] } }","<UButton color=""tertiary""> without config",Medium,https://ui.nuxt.com/docs/getting-started/theme/design-system
+13,Forms,Use UForm with schema validation,UForm supports Zod Yup Joi Valibot schemas,:schema prop with validation schema,Manual form validation,"<UForm :schema=""schema"" :state=""state"">",Manual @blur validation,High,https://ui.nuxt.com/docs/components/form
+14,Forms,Use UFormField for field wrapper,Provides label error message and validation display,UFormField with name prop,Manual error handling,"<UFormField name=""email"" label=""Email"">",<div><label>Email</label><UInput/><span>error</span></div>,Medium,https://ui.nuxt.com/docs/components/form-field
+15,Forms,Handle form submit with @submit,UForm emits submit event with validated data,@submit handler on UForm,@click on submit button,"<UForm @submit=""onSubmit"">","<UButton @click=""onSubmit"">",Medium,https://ui.nuxt.com/docs/components/form
+16,Forms,Use validateOn prop for validation timing,Control when validation triggers (blur change input),validateOn="['blur']" for performance,Always validate on input,"<UForm :validateOn=""['blur', 'change']"">","<UForm> (validates on every keystroke)",Low,https://ui.nuxt.com/docs/components/form
+17,Overlays,Use v-model:open for overlay control,Modal Slideover Drawer use v-model:open,v-model:open for controlled state,Manual show/hide logic,"<UModal v-model:open=""isOpen"">",<UModal v-if="isOpen">,Medium,https://ui.nuxt.com/docs/components/modal
+18,Overlays,Use useOverlay composable for programmatic overlays,Open overlays programmatically without template refs,useOverlay().open(MyModal),Template ref and manual control,"const overlay = useOverlay(); overlay.open(MyModal, { props })","const modal = ref(); modal.value.open()",Medium,https://ui.nuxt.com/docs/components/modal
+19,Overlays,Use title and description props,Built-in header support for overlays,title="Confirm" description="Are you sure?",Manual header content,"<UModal title=""Confirm"" description=""Are you sure?"">","<UModal><template #header><h2>Confirm</h2></template>",Low,https://ui.nuxt.com/docs/components/modal
+20,Dashboard,Use UDashboardSidebar for navigation,Provides collapsible resizable sidebar with mobile support,UDashboardSidebar with header default footer slots,Custom sidebar implementation,<UDashboardSidebar><template #header>...</template></UDashboardSidebar>,<aside class="w-64 border-r">,Medium,https://ui.nuxt.com/docs/components/dashboard-sidebar
+21,Dashboard,Use UDashboardGroup for layout,Wraps dashboard components with sidebar state management,UDashboardGroup > UDashboardSidebar + UDashboardPanel,Manual layout flex containers,<UDashboardGroup><UDashboardSidebar/><UDashboardPanel/></UDashboardGroup>,"<div class=""flex""><aside/><main/></div>",Medium,https://ui.nuxt.com/docs/components/dashboard-group
+22,Dashboard,Use UDashboardNavbar for top navigation,Responsive navbar with mobile menu support,UDashboardNavbar in dashboard layout,Custom navbar implementation,<UDashboardNavbar :links="navLinks"/>,<nav class="border-b">,Low,https://ui.nuxt.com/docs/components/dashboard-navbar
+23,Tables,Use UTable with data and columns props,Powered by TanStack Table with built-in features,:data and :columns props,Manual table markup,"<UTable :data=""users"" :columns=""columns""/>","<table><tr v-for=""user in users"">",High,https://ui.nuxt.com/docs/components/table
+24,Tables,Define columns with accessorKey,Column definitions use accessorKey for data binding,accessorKey: 'email' in column def,String column names only,"{ accessorKey: 'email', header: 'Email' }","['name', 'email']",Medium,https://ui.nuxt.com/docs/components/table
+25,Tables,Use cell slot for custom rendering,Customize cell content with scoped slots,#cell-columnName slot,Override entire table,<template #cell-status="{ row }">,Manual column render function,Medium,https://ui.nuxt.com/docs/components/table
+26,Tables,Enable sorting with sortable column option,Add sortable: true to column definition,sortable: true in column,Manual sort implementation,"{ accessorKey: 'name', sortable: true }",@click="sortBy('name')",Low,https://ui.nuxt.com/docs/components/table
+27,Navigation,Use UNavigationMenu for nav links,Horizontal or vertical navigation with dropdown support,UNavigationMenu with items array,Manual nav with v-for,"<UNavigationMenu :items=""navItems""/>","<nav><a v-for=""item in items"">",Medium,https://ui.nuxt.com/docs/components/navigation-menu
+28,Navigation,Use UBreadcrumb for page hierarchy,Automatic breadcrumb with NuxtLink support,:items array with label and to,Manual breadcrumb links,"<UBreadcrumb :items=""breadcrumbs""/>","<nav><span v-for=""crumb in crumbs"">",Low,https://ui.nuxt.com/docs/components/breadcrumb
+29,Navigation,Use UTabs for tabbed content,Tab navigation with content panels,UTabs with items containing slot content,Manual tab state,"<UTabs :items=""tabs""/>","<div><button @click=""tab=1"">",Medium,https://ui.nuxt.com/docs/components/tabs
+30,Feedback,Use useToast for notifications,Composable for toast notifications,useToast().add({ title description }),Alert components for toasts,"const toast = useToast(); toast.add({ title: 'Saved' })",<UAlert v-if="showSuccess">,High,https://ui.nuxt.com/docs/components/toast
+31,Feedback,Use UAlert for inline messages,Static alert messages with icon and actions,UAlert with title description color,Toast for static messages,"<UAlert title=""Warning"" color=""warning""/>",useToast for inline alerts,Medium,https://ui.nuxt.com/docs/components/alert
+32,Feedback,Use USkeleton for loading states,Placeholder content during data loading,USkeleton with appropriate size,Spinner for content loading,<USkeleton class="h-4 w-32"/>,<UIcon name="lucide:loader" class="animate-spin"/>,Low,https://ui.nuxt.com/docs/components/skeleton
+33,Color Mode,Use UColorModeButton for theme toggle,Built-in light/dark mode toggle button,UColorModeButton component,Manual color mode logic,<UColorModeButton/>,"<button @click=""toggleColorMode"">",Low,https://ui.nuxt.com/docs/components/color-mode-button
+34,Color Mode,Use UColorModeSelect for theme picker,Dropdown to select system light or dark mode,UColorModeSelect component,Custom select for theme,<UColorModeSelect/>,"<USelect v-model=""colorMode"" :items=""modes""/>",Low,https://ui.nuxt.com/docs/components/color-mode-select
+35,Customization,Use ui prop for component styling,Override component styles via ui prop,ui prop with slot class overrides,Global CSS overrides,"<UButton :ui=""{ base: 'rounded-full' }""/>",<UButton class="!rounded-full"/>,Medium,https://ui.nuxt.com/docs/getting-started/theme/components
+36,Customization,Configure default variants in nuxt.config,Set default color and size for all components,theme.defaultVariants in ui config,Repeat props on every component,"ui: { theme: { defaultVariants: { color: 'neutral' } } }","<UButton color=""neutral""> everywhere",Medium,https://ui.nuxt.com/docs/getting-started/installation/nuxt
+37,Customization,Use app.config.ts for theme overrides,Runtime theme customization,defineAppConfig with ui key,nuxt.config for runtime values,"defineAppConfig({ ui: { button: { defaultVariants: { size: 'sm' } } } })","nuxt.config ui.button.size: 'sm'",Medium,https://ui.nuxt.com/docs/getting-started/theme/components
+38,Performance,Enable component detection,Tree-shake unused component CSS,experimental.componentDetection: true,Include all component CSS,"ui: { experimental: { componentDetection: true } }","ui: {} (includes all CSS)",Low,https://ui.nuxt.com/docs/getting-started/installation/nuxt
+39,Performance,Use UTable virtualize for large data,Enable virtualization for 1000+ rows,:virtualize prop on UTable,Render all rows,"<UTable :data=""largeData"" virtualize/>","<UTable :data=""largeData""/>",Medium,https://ui.nuxt.com/docs/components/table
+40,Accessibility,Use semantic component props,Components have built-in ARIA support,Use title description label props,Skip accessibility props,"<UModal title=""Settings"">","<UModal><h2>Settings</h2>",Medium,https://ui.nuxt.com/docs/components/modal
+41,Accessibility,Use UFormField for form accessibility,Automatic label-input association,UFormField wraps inputs,Manual id and for attributes,"<UFormField label=""Email""><UInput/></UFormField>","<label for=""email"">Email</label><UInput id=""email""/>",High,https://ui.nuxt.com/docs/components/form-field
+42,Content,Use UContentToc for table of contents,Automatic TOC with active heading highlight,UContentToc with :links,Manual TOC implementation,"<UContentToc :links=""toc""/>","<nav><a v-for=""heading in headings"">",Low,https://ui.nuxt.com/docs/components/content-toc
+43,Content,Use UContentSearch for docs search,Command palette for documentation search,UContentSearch with Nuxt Content,Custom search implementation,<UContentSearch/>,<UCommandPalette :groups="searchResults"/>,Low,https://ui.nuxt.com/docs/components/content-search
+44,AI/Chat,Use UChatMessages for chat UI,Designed for Vercel AI SDK integration,UChatMessages with messages array,Custom chat message list,"<UChatMessages :messages=""messages""/>","<div v-for=""msg in messages"">",Medium,https://ui.nuxt.com/docs/components/chat-messages
+45,AI/Chat,Use UChatPrompt for input,Enhanced textarea for AI prompts,UChatPrompt with v-model,Basic textarea,<UChatPrompt v-model="prompt"/>,<UTextarea v-model="prompt"/>,Medium,https://ui.nuxt.com/docs/components/chat-prompt
+46,Editor,Use UEditor for rich text,TipTap-based editor with toolbar support,UEditor with v-model:content,Custom TipTap setup,"<UEditor v-model:content=""content""/>",Manual TipTap initialization,Medium,https://ui.nuxt.com/docs/components/editor
+47,Links,Use to prop for navigation,UButton and ULink support NuxtLink to prop,to="/dashboard" for internal links,href for internal navigation,"<UButton to=""/dashboard"">","<UButton href=""/dashboard"">",Medium,https://ui.nuxt.com/docs/components/button
+48,Links,Use external prop for outside links,Explicitly mark external links,target="_blank" with external URLs,Forget rel="noopener","<UButton to=""https://example.com"" target=""_blank"">","<UButton href=""https://..."">",Low,https://ui.nuxt.com/docs/components/link
+49,Loading,Use loadingAuto on buttons,Automatic loading state from @click promise,loadingAuto prop on UButton,Manual loading state,"<UButton loadingAuto @click=""async () => await save()"">","<UButton :loading=""isLoading"" @click=""save"">",Low,https://ui.nuxt.com/docs/components/button
+50,Loading,Use UForm loadingAuto,Auto-disable form during submit,loadingAuto on UForm (default true),Manual form disabled state,"<UForm @submit=""handleSubmit"">","<UForm :disabled=""isSubmitting"">",Low,https://ui.nuxt.com/docs/components/form
diff --git a/.claude/skills/ui-ux-pro-max/data/stacks/nuxtjs.csv b/.claude/skills/ui-ux-pro-max/data/stacks/nuxtjs.csv
new file mode 100644
index 000000000..c275d0de8
--- /dev/null
+++ b/.claude/skills/ui-ux-pro-max/data/stacks/nuxtjs.csv
@@ -0,0 +1,59 @@
+No,Category,Guideline,Description,Do,Don't,Code Good,Code Bad,Severity,Docs URL
+1,Routing,Use file-based routing,Create routes by adding files in pages directory,pages/ directory with index.vue,Manual route configuration,pages/dashboard/index.vue,Custom router setup,Medium,https://nuxt.com/docs/getting-started/routing
+2,Routing,Use dynamic route parameters,Create dynamic routes with bracket syntax,[id].vue for dynamic params,Hardcoded routes for dynamic content,pages/posts/[id].vue,pages/posts/post1.vue,Medium,https://nuxt.com/docs/getting-started/routing
+3,Routing,Use catch-all routes,Handle multiple path segments with [...slug],[...slug].vue for catch-all,Multiple nested dynamic routes,pages/[...slug].vue,pages/[a]/[b]/[c].vue,Low,https://nuxt.com/docs/getting-started/routing
+4,Routing,Define page metadata with definePageMeta,Set page-level configuration and middleware,definePageMeta for layout middleware title,Manual route meta configuration,"definePageMeta({ layout: 'admin', middleware: 'auth' })",router.beforeEach for page config,High,https://nuxt.com/docs/api/utils/define-page-meta
+5,Routing,Use validate for route params,Validate dynamic route parameters before rendering,validate function in definePageMeta,Manual validation in setup,"definePageMeta({ validate: (route) => /^\d+$/.test(route.params.id) })",if (!valid) navigateTo('/404'),Medium,https://nuxt.com/docs/api/utils/define-page-meta
+6,Rendering,Use SSR by default,Server-side rendering is enabled by default,Keep ssr: true (default),Disable SSR unnecessarily,ssr: true (default),ssr: false for all pages,High,https://nuxt.com/docs/guide/concepts/rendering
+7,Rendering,Use .client suffix for client-only components,Mark components to render only on client,ComponentName.client.vue suffix,v-if with process.client check,Comments.client.vue,<div v-if="process.client"><Comments/></div>,Medium,https://nuxt.com/docs/guide/directory-structure/components
+8,Rendering,Use .server suffix for server-only components,Mark components to render only on server,ComponentName.server.vue suffix,Manual server check,HeavyMarkdown.server.vue,v-if="process.server",Low,https://nuxt.com/docs/guide/directory-structure/components
+9,DataFetching,Use useFetch for simple data fetching,Wrapper around useAsyncData for URL fetching,useFetch for API calls,$fetch in onMounted,"const { data } = await useFetch('/api/posts')","onMounted(async () => { data.value = await $fetch('/api/posts') })",High,https://nuxt.com/docs/api/composables/use-fetch
+10,DataFetching,Use useAsyncData for complex fetching,Fine-grained control over async data,useAsyncData for CMS or custom fetching,useFetch for non-URL data sources,"const { data } = await useAsyncData('posts', () => cms.getPosts())","const { data } = await useFetch(() => cms.getPosts())",Medium,https://nuxt.com/docs/api/composables/use-async-data
+11,DataFetching,Use $fetch for non-reactive requests,$fetch for event handlers and non-component code,$fetch in event handlers or server routes,useFetch in click handlers,"async function submit() { await $fetch('/api/submit', { method: 'POST' }) }","async function submit() { await useFetch('/api/submit') }",High,https://nuxt.com/docs/api/utils/dollarfetch
+12,DataFetching,Use lazy option for non-blocking fetch,Defer data fetching for better initial load,lazy: true for below-fold content,Blocking fetch for non-critical data,"useFetch('/api/comments', { lazy: true })",await useFetch('/api/comments') for footer,Medium,https://nuxt.com/docs/api/composables/use-fetch
+13,DataFetching,Use server option to control fetch location,Choose where data is fetched,server: false for client-only data,Server fetch for user-specific client data,"useFetch('/api/user-preferences', { server: false })",useFetch for localStorage-dependent data,Medium,https://nuxt.com/docs/api/composables/use-fetch
+14,DataFetching,Use pick to reduce payload size,Select only needed fields from response,pick option for large responses,Fetching entire objects when few fields needed,"useFetch('/api/user', { pick: ['id', 'name'] })",useFetch('/api/user') then destructure,Low,https://nuxt.com/docs/api/composables/use-fetch
+15,DataFetching,Use transform for data manipulation,Transform data before storing in state,transform option for data shaping,Manual transformation after fetch,"useFetch('/api/posts', { transform: (posts) => posts.map(p => p.title) })",const titles = data.value.map(p => p.title),Low,https://nuxt.com/docs/api/composables/use-fetch
+16,DataFetching,Handle loading and error states,Always handle pending and error states,Check status pending error refs,Ignoring loading states,"<div v-if=""status === 'pending'"">Loading...</div>",No loading indicator,High,https://nuxt.com/docs/getting-started/data-fetching
+17,Lifecycle,Avoid side effects in script setup root,Move side effects to lifecycle hooks,Side effects in onMounted,setInterval in root script setup,"onMounted(() => { interval = setInterval(...) })","<script setup>setInterval(...)</script>",High,https://nuxt.com/docs/guide/concepts/nuxt-lifecycle
+18,Lifecycle,Use onMounted for DOM access,Access DOM only after component is mounted,onMounted for DOM manipulation,Direct DOM access in setup,"onMounted(() => { document.getElementById('el') })","<script setup>document.getElementById('el')</script>",High,https://nuxt.com/docs/api/composables/on-mounted
+19,Lifecycle,Use nextTick for post-render access,Wait for DOM updates before accessing elements,await nextTick() after state changes,Immediate DOM access after state change,"count.value++; await nextTick(); el.value.focus()","count.value++; el.value.focus()",Medium,https://nuxt.com/docs/api/utils/next-tick
+20,Lifecycle,Use onPrehydrate for pre-hydration logic,Run code before Nuxt hydrates the page,onPrehydrate for client setup,onMounted for hydration-critical code,"onPrehydrate(() => { console.log(window) })",onMounted for pre-hydration needs,Low,https://nuxt.com/docs/api/composables/on-prehydrate
+21,Server,Use server/api for API routes,Create API endpoints in server/api directory,server/api/users.ts for /api/users,Manual Express setup,server/api/hello.ts -> /api/hello,app.get('/api/hello'),High,https://nuxt.com/docs/guide/directory-structure/server
+22,Server,Use defineEventHandler for handlers,Define server route handlers,defineEventHandler for all handlers,export default function,"export default defineEventHandler((event) => { return { hello: 'world' } })","export default function(req, res) {}",High,https://nuxt.com/docs/guide/directory-structure/server
+23,Server,Use server/routes for non-api routes,Routes without /api prefix,server/routes for custom paths,server/api for non-api routes,server/routes/sitemap.xml.ts,server/api/sitemap.xml.ts,Medium,https://nuxt.com/docs/guide/directory-structure/server
+24,Server,Use getQuery and readBody for input,Access query params and request body,getQuery(event) readBody(event),Direct event access,"const { id } = getQuery(event)",event.node.req.query,Medium,https://nuxt.com/docs/guide/directory-structure/server
+25,Server,Validate server input,Always validate input in server handlers,Zod or similar for validation,Trust client input,"const body = await readBody(event); schema.parse(body)",const body = await readBody(event),High,https://nuxt.com/docs/guide/directory-structure/server
+26,State,Use useState for shared reactive state,SSR-friendly shared state across components,useState for cross-component state,ref for shared state,"const count = useState('count', () => 0)",const count = ref(0) in composable,High,https://nuxt.com/docs/api/composables/use-state
+27,State,Use unique keys for useState,Prevent state conflicts with unique keys,Descriptive unique keys for each state,Generic or duplicate keys,"useState('user-preferences', () => ({}))",useState('data') in multiple places,Medium,https://nuxt.com/docs/api/composables/use-state
+28,State,Use Pinia for complex state,Pinia for advanced state management,@pinia/nuxt for complex apps,Custom state management,useMainStore() with Pinia,Custom reactive store implementation,Medium,https://nuxt.com/docs/getting-started/state-management
+29,State,Use callOnce for one-time async operations,Ensure async operations run only once,callOnce for store initialization,Direct await in component,"await callOnce(store.fetch)",await store.fetch() on every render,Medium,https://nuxt.com/docs/api/utils/call-once
+30,SEO,Use useSeoMeta for SEO tags,Type-safe SEO meta tag management,useSeoMeta for meta tags,useHead for simple meta,"useSeoMeta({ title: 'Home', ogTitle: 'Home', description: '...' })","useHead({ meta: [{ name: 'description', content: '...' }] })",High,https://nuxt.com/docs/api/composables/use-seo-meta
+31,SEO,Use reactive values in useSeoMeta,Dynamic SEO tags with refs or getters,Computed getters for dynamic values,Static values for dynamic content,"useSeoMeta({ title: () => post.value.title })","useSeoMeta({ title: post.value.title })",Medium,https://nuxt.com/docs/api/composables/use-seo-meta
+32,SEO,Use useHead for non-meta head elements,Scripts styles links in head,useHead for scripts and links,useSeoMeta for scripts,"useHead({ script: [{ src: '/analytics.js' }] })","useSeoMeta({ script: '...' })",Medium,https://nuxt.com/docs/api/composables/use-head
+33,SEO,Include OpenGraph tags,Add OG tags for social sharing,ogTitle ogDescription ogImage,Missing social preview,"useSeoMeta({ ogImage: '/og.png', twitterCard: 'summary_large_image' })",No OG configuration,Medium,https://nuxt.com/docs/api/composables/use-seo-meta
+34,Middleware,Use defineNuxtRouteMiddleware,Define route middleware properly,defineNuxtRouteMiddleware wrapper,export default function,"export default defineNuxtRouteMiddleware((to, from) => {})","export default function(to, from) {}",High,https://nuxt.com/docs/guide/directory-structure/middleware
+35,Middleware,Use navigateTo for redirects,Redirect in middleware with navigateTo,return navigateTo('/login'),router.push in middleware,"if (!auth) return navigateTo('/login')","if (!auth) router.push('/login')",High,https://nuxt.com/docs/api/utils/navigate-to
+36,Middleware,Reference middleware in definePageMeta,Apply middleware to specific pages,middleware array in definePageMeta,Global middleware for page-specific,definePageMeta({ middleware: ['auth'] }),Global auth check for one page,Medium,https://nuxt.com/docs/guide/directory-structure/middleware
+37,Middleware,Use .global suffix for global middleware,Apply middleware to all routes,auth.global.ts for app-wide auth,Manual middleware on every page,middleware/auth.global.ts,middleware: ['auth'] on every page,Medium,https://nuxt.com/docs/guide/directory-structure/middleware
+38,ErrorHandling,Use createError for errors,Create errors with proper status codes,createError with statusCode,throw new Error,"throw createError({ statusCode: 404, statusMessage: 'Not Found' })",throw new Error('Not Found'),High,https://nuxt.com/docs/api/utils/create-error
+39,ErrorHandling,Use NuxtErrorBoundary for local errors,Handle errors within component subtree,NuxtErrorBoundary for component errors,Global error page for local errors,"<NuxtErrorBoundary @error=""log""><template #error=""{ error }"">",error.vue for component errors,Medium,https://nuxt.com/docs/getting-started/error-handling
+40,ErrorHandling,Use clearError to recover from errors,Clear error state and optionally redirect,clearError({ redirect: '/' }),Manual error state reset,clearError({ redirect: '/home' }),error.value = null,Medium,https://nuxt.com/docs/api/utils/clear-error
+41,ErrorHandling,Use short statusMessage,Keep statusMessage brief for security,Short generic messages,Detailed error info in statusMessage,"createError({ statusCode: 400, statusMessage: 'Bad Request' })","createError({ statusMessage: 'Invalid user ID: 123' })",High,https://nuxt.com/docs/getting-started/error-handling
+42,Link,Use NuxtLink for internal navigation,Client-side navigation with prefetching,<NuxtLink to> for internal links,<a href> for internal links,<NuxtLink to="/about">About</NuxtLink>,<a href="/about">About</a>,High,https://nuxt.com/docs/api/components/nuxt-link
+43,Link,Configure prefetch behavior,Control when prefetching occurs,prefetchOn for interaction-based,Default prefetch for low-priority,"<NuxtLink prefetch-on=""interaction"">",Always default prefetch,Low,https://nuxt.com/docs/api/components/nuxt-link
+44,Link,Use useRouter for programmatic navigation,Navigate programmatically,useRouter().push() for navigation,Direct window.location,"const router = useRouter(); router.push('/dashboard')",window.location.href = '/dashboard',Medium,https://nuxt.com/docs/api/composables/use-router
+45,Link,Use navigateTo in composables,Navigate outside components,navigateTo() in middleware or plugins,useRouter in non-component code,return navigateTo('/login'),router.push in middleware,Medium,https://nuxt.com/docs/api/utils/navigate-to
+46,AutoImports,Leverage auto-imports,Use auto-imported composables directly,Direct use of ref computed useFetch,Manual imports for Nuxt composables,"const count = ref(0)","import { ref } from 'vue'; const count = ref(0)",Medium,https://nuxt.com/docs/guide/concepts/auto-imports
+47,AutoImports,Use #imports for explicit imports,Explicit imports when needed,#imports for clarity or disabled auto-imports,"import from 'vue' when auto-import enabled","import { ref } from '#imports'","import { ref } from 'vue'",Low,https://nuxt.com/docs/guide/concepts/auto-imports
+48,AutoImports,Configure third-party auto-imports,Add external package auto-imports,imports.presets in nuxt.config,Manual imports everywhere,"imports: { presets: [{ from: 'vue-i18n', imports: ['useI18n'] }] }",import { useI18n } everywhere,Low,https://nuxt.com/docs/guide/concepts/auto-imports
+49,Plugins,Use defineNuxtPlugin,Define plugins properly,defineNuxtPlugin wrapper,export default function,"export default defineNuxtPlugin((nuxtApp) => {})","export default function(ctx) {}",High,https://nuxt.com/docs/guide/directory-structure/plugins
+50,Plugins,Use provide for injection,Provide helpers across app,return { provide: {} } for type safety,nuxtApp.provide without types,"return { provide: { hello: (name) => `Hello ${name}!` } }","nuxtApp.provide('hello', fn)",Medium,https://nuxt.com/docs/guide/directory-structure/plugins
+51,Plugins,Use .client or .server suffix,Control plugin execution environment,plugin.client.ts for client-only,if (process.client) checks,analytics.client.ts,"if (process.client) { // analytics }",Medium,https://nuxt.com/docs/guide/directory-structure/plugins
+52,Environment,Use runtimeConfig for env vars,Access environment variables safely,runtimeConfig in nuxt.config,process.env directly,"runtimeConfig: { apiSecret: '', public: { apiBase: '' } }",process.env.API_SECRET in components,High,https://nuxt.com/docs/guide/going-further/runtime-config
+53,Environment,Use NUXT_ prefix for env override,Override config with environment variables,NUXT_API_SECRET NUXT_PUBLIC_API_BASE,Custom env var names,NUXT_PUBLIC_API_BASE=https://api.example.com,API_BASE=https://api.example.com,High,https://nuxt.com/docs/guide/going-further/runtime-config
+54,Environment,Access public config with useRuntimeConfig,Get public config in components,useRuntimeConfig().public,Direct process.env access,const config = useRuntimeConfig(); config.public.apiBase,process.env.NUXT_PUBLIC_API_BASE,High,https://nuxt.com/docs/api/composables/use-runtime-config
+55,Environment,Keep secrets in private config,Server-only secrets in runtimeConfig root,runtimeConfig.apiSecret (server only),Secrets in public config,runtimeConfig: { dbPassword: '' },runtimeConfig: { public: { dbPassword: '' } },High,https://nuxt.com/docs/guide/going-further/runtime-config
+56,Performance,Use Lazy prefix for code splitting,Lazy load components with Lazy prefix,<LazyComponent> for below-fold,Eager load all components,<LazyMountainsList v-if="show"/>,<MountainsList/> for hidden content,Medium,https://nuxt.com/docs/guide/directory-structure/components
+57,Performance,Use useLazyFetch for non-blocking data,Alias for useFetch with lazy: true,useLazyFetch for secondary data,useFetch for all requests,"const { data } = useLazyFetch('/api/comments')",await useFetch for comments section,Medium,https://nuxt.com/docs/api/composables/use-lazy-fetch
+58,Performance,Use lazy hydration for interactivity,Delay component hydration until needed,LazyComponent with hydration strategy,Immediate hydration for all,<LazyModal hydrate-on-visible/>,<Modal/> in footer,Low,https://nuxt.com/docs/guide/going-further/experimental-features
diff --git a/.claude/skills/ui-ux-pro-max/data/stacks/react-native.csv b/.claude/skills/ui-ux-pro-max/data/stacks/react-native.csv
new file mode 100644
index 000000000..209e893c3
--- /dev/null
+++ b/.claude/skills/ui-ux-pro-max/data/stacks/react-native.csv
@@ -0,0 +1,52 @@
+No,Category,Guideline,Description,Do,Don't,Code Good,Code Bad,Severity,Docs URL
+1,Components,Use functional components,Hooks-based components are standard,Functional components with hooks,Class components,const App = () => { },class App extends Component,Medium,https://reactnative.dev/docs/intro-react
+2,Components,Keep components small,Single responsibility principle,Split into smaller components,Large monolithic components,<Header /><Content /><Footer />,500+ line component,Medium,
+3,Components,Use TypeScript,Type safety for props and state,TypeScript for new projects,JavaScript without types,const Button: FC<Props> = () => { },const Button = (props) => { },Medium,
+4,Components,Colocate component files,Keep related files together,Component folder with styles,Flat structure,components/Button/index.tsx styles.ts,components/Button.tsx styles/button.ts,Low,
+5,Styling,Use StyleSheet.create,Optimized style objects,StyleSheet for all styles,Inline style objects,StyleSheet.create({ container: {} }),style={{ margin: 10 }},High,https://reactnative.dev/docs/stylesheet
+6,Styling,Avoid inline styles,Prevent object recreation,Styles in StyleSheet,Inline style objects in render,style={styles.container},"style={{ margin: 10, padding: 5 }}",Medium,
+7,Styling,Use flexbox for layout,React Native uses flexbox,flexDirection alignItems justifyContent,Absolute positioning everywhere,flexDirection: 'row',position: 'absolute' everywhere,Medium,https://reactnative.dev/docs/flexbox
+8,Styling,Handle platform differences,Platform-specific styles,Platform.select or .ios/.android files,Same styles for both platforms,"Platform.select({ ios: {}, android: {} })",Hardcoded iOS values,Medium,https://reactnative.dev/docs/platform-specific-code
+9,Styling,Use responsive dimensions,Scale for different screens,Dimensions or useWindowDimensions,Fixed pixel values,useWindowDimensions(),width: 375,Medium,
+10,Navigation,Use React Navigation,Standard navigation library,React Navigation for routing,Manual navigation management,createStackNavigator(),Custom navigation state,Medium,https://reactnavigation.org/
+11,Navigation,Type navigation params,Type-safe navigation,Typed navigation props,Untyped navigation,"navigation.navigate<RootStackParamList>('Home', { id })","navigation.navigate('Home', { id })",Medium,
+12,Navigation,Use deep linking,Support URL-based navigation,Configure linking prop,No deep link support,linking: { prefixes: [] },No linking configuration,Medium,https://reactnavigation.org/docs/deep-linking/
+13,Navigation,Handle back button,Android back button handling,useFocusEffect with BackHandler,Ignore back button,BackHandler.addEventListener,No back handler,High,
+14,State,Use useState for local state,Simple component state,useState for UI state,Class component state,"const [count, setCount] = useState(0)",this.state = { count: 0 },Medium,
+15,State,Use useReducer for complex state,Complex state logic,useReducer for related state,Multiple useState for related values,useReducer(reducer initialState),5+ useState calls,Medium,
+16,State,Use context sparingly,Context for global state,Context for theme auth locale,Context for frequently changing data,ThemeContext for app theme,Context for list item data,Medium,
+17,State,Consider Zustand or Redux,External state management,Zustand for simple Redux for complex,useState for global state,create((set) => ({ })),Prop drilling global state,Medium,
+18,Lists,Use FlatList for long lists,Virtualized list rendering,FlatList for 50+ items,ScrollView with map,<FlatList data={items} />,<ScrollView>{items.map()}</ScrollView>,High,https://reactnative.dev/docs/flatlist
+19,Lists,Provide keyExtractor,Unique keys for list items,keyExtractor with stable ID,Index as key,keyExtractor={(item) => item.id},"keyExtractor={(_, index) => index}",High,
+20,Lists,Optimize renderItem,Memoize list item components,React.memo for list items,Inline render function,renderItem={({ item }) => <MemoizedItem item={item} />},renderItem={({ item }) => <View>...</View>},High,
+21,Lists,Use getItemLayout for fixed height,Skip measurement for performance,getItemLayout when height known,Dynamic measurement for fixed items,"getItemLayout={(_, index) => ({ length: 50, offset: 50 * index, index })}",No getItemLayout for fixed height,Medium,
+22,Lists,Implement windowSize,Control render window,Smaller windowSize for memory,Default windowSize for large lists,windowSize={5},windowSize={21} for huge lists,Medium,
+23,Performance,Use React.memo,Prevent unnecessary re-renders,memo for pure components,No memoization,export default memo(MyComponent),export default MyComponent,Medium,
+24,Performance,Use useCallback for handlers,Stable function references,useCallback for props,New function on every render,"useCallback(() => {}, [deps])",() => handlePress(),Medium,
+25,Performance,Use useMemo for expensive ops,Cache expensive calculations,useMemo for heavy computations,Recalculate every render,"useMemo(() => expensive(), [deps])",const result = expensive(),Medium,
+26,Performance,Avoid anonymous functions in JSX,Prevent re-renders,Named handlers or useCallback,Inline arrow functions,onPress={handlePress},onPress={() => doSomething()},Medium,
+27,Performance,Use Hermes engine,Improved startup and memory,Enable Hermes in build,JavaScriptCore for new projects,hermes_enabled: true,hermes_enabled: false,Medium,https://reactnative.dev/docs/hermes
+28,Images,Use expo-image,Modern performant image component for React Native,"Use expo-image for caching, blurring, and performance",Use default Image for heavy lists or unmaintained libraries,<Image source={url} cachePolicy='memory-disk' /> (expo-image),<FastImage source={url} />,Medium,https://docs.expo.dev/versions/latest/sdk/image/
+29,Images,Specify image dimensions,Prevent layout shifts,width and height for remote images,No dimensions for network images,<Image style={{ width: 100 height: 100 }} />,<Image source={{ uri }} /> no size,High,
+30,Images,Use resizeMode,Control image scaling,resizeMode cover contain,Stretch images,"resizeMode=""cover""",No resizeMode,Low,
+31,Forms,Use controlled inputs,State-controlled form fields,value + onChangeText,Uncontrolled inputs,<TextInput value={text} onChangeText={setText} />,<TextInput defaultValue={text} />,Medium,
+32,Forms,Handle keyboard,Manage keyboard visibility,KeyboardAvoidingView,Content hidden by keyboard,"<KeyboardAvoidingView behavior=""padding"">",No keyboard handling,High,https://reactnative.dev/docs/keyboardavoidingview
+33,Forms,Use proper keyboard types,Appropriate keyboard for input,keyboardType for input type,Default keyboard for all,"keyboardType=""email-address""","keyboardType=""default"" for email",Low,
+34,Touch,Use Pressable,Modern touch handling,Pressable for touch interactions,TouchableOpacity for new code,<Pressable onPress={} />,<TouchableOpacity onPress={} />,Low,https://reactnative.dev/docs/pressable
+35,Touch,Provide touch feedback,Visual feedback on press,Ripple or opacity change,No feedback on press,android_ripple={{ color: 'gray' }},No press feedback,Medium,
+36,Touch,Set hitSlop for small targets,Increase touch area,hitSlop for icons and small buttons,Tiny touch targets,hitSlop={{ top: 10 bottom: 10 }},44x44 with no hitSlop,Medium,
+37,Animation,Use Reanimated,High-performance animations,react-native-reanimated,Animated API for complex,useSharedValue useAnimatedStyle,Animated.timing for gesture,Medium,https://docs.swmansion.com/react-native-reanimated/
+38,Animation,Run on UI thread,worklets for smooth animation,Run animations on UI thread,JS thread animations,runOnUI(() => {}),Animated on JS thread,High,
+39,Animation,Use gesture handler,Native gesture recognition,react-native-gesture-handler,JS-based gesture handling,<GestureDetector>,<View onTouchMove={} />,Medium,https://docs.swmansion.com/react-native-gesture-handler/
+40,Async,Handle loading states,Show loading indicators,ActivityIndicator during load,Empty screen during load,{isLoading ? <ActivityIndicator /> : <Content />},No loading state,Medium,
+41,Async,Handle errors gracefully,Error boundaries and fallbacks,Error UI for failed requests,Crash on error,{error ? <ErrorView /> : <Content />},No error handling,High,
+42,Async,Cancel async operations,Cleanup on unmount,AbortController or cleanup,Memory leaks from async,useEffect cleanup,No cleanup for subscriptions,High,
+43,Accessibility,Add accessibility labels,Describe UI elements,accessibilityLabel for all interactive,Missing labels,"accessibilityLabel=""Submit form""",<Pressable> without label,High,https://reactnative.dev/docs/accessibility
+44,Accessibility,Use accessibility roles,Semantic meaning,accessibilityRole for elements,Wrong roles,"accessibilityRole=""button""",No role for button,Medium,
+45,Accessibility,Support screen readers,Test with TalkBack/VoiceOver,Test with screen readers,Skip accessibility testing,Regular TalkBack testing,No screen reader testing,High,
+46,Testing,Use React Native Testing Library,Component testing,render and fireEvent,Enzyme or manual testing,render(<Component />),shallow(<Component />),Medium,https://callstack.github.io/react-native-testing-library/
+47,Testing,Test on real devices,Real device behavior,Test on iOS and Android devices,Simulator only,Device testing in CI,Simulator only testing,High,
+48,Testing,Use Detox for E2E,End-to-end testing,Detox for critical flows,Manual E2E testing,detox test,Manual testing only,Medium,https://wix.github.io/Detox/
+49,Native,Use native modules carefully,Bridge has overhead,Batch native calls,Frequent bridge crossing,Batch updates,Call native on every keystroke,High,
+50,Native,Use Expo when possible,Simplified development,Expo for standard features,Bare RN for simple apps,expo install package,react-native link package,Low,https://docs.expo.dev/
+51,Native,Handle permissions,Request permissions properly,Check and request permissions,Assume permissions granted,PermissionsAndroid.request(),Access without permission check,High,https://reactnative.dev/docs/permissionsandroid
diff --git a/.claude/skills/ui-ux-pro-max/data/stacks/react.csv b/.claude/skills/ui-ux-pro-max/data/stacks/react.csv
new file mode 100644
index 000000000..9f891f4ab
--- /dev/null
+++ b/.claude/skills/ui-ux-pro-max/data/stacks/react.csv
@@ -0,0 +1,54 @@
+No,Category,Guideline,Description,Do,Don't,Code Good,Code Bad,Severity,Docs URL
+1,State,Use useState for local state,Simple component state should use useState hook,useState for form inputs toggles counters,Class components this.state,"const [count, setCount] = useState(0)",this.state = { count: 0 },Medium,https://react.dev/reference/react/useState
+2,State,Lift state up when needed,Share state between siblings by lifting to parent,Lift shared state to common ancestor,Prop drilling through many levels,Parent holds state passes down,Deep prop chains,Medium,https://react.dev/learn/sharing-state-between-components
+3,State,Use useReducer for complex state,Complex state logic benefits from reducer pattern,useReducer for state with multiple sub-values,Multiple useState for related values,useReducer with action types,5+ useState calls that update together,Medium,https://react.dev/reference/react/useReducer
+4,State,Avoid unnecessary state,Derive values from existing state when possible,Compute derived values in render,Store derivable values in state,const total = items.reduce(...),"const [total, setTotal] = useState(0)",High,https://react.dev/learn/choosing-the-state-structure
+5,State,Initialize state lazily,Use function form for expensive initial state,useState(() => computeExpensive()),useState(computeExpensive()),useState(() => JSON.parse(data)),useState(JSON.parse(data)),Medium,https://react.dev/reference/react/useState#avoiding-recreating-the-initial-state
+6,Effects,Clean up effects,Return cleanup function for subscriptions timers,Return cleanup function in useEffect,No cleanup for subscriptions,useEffect(() => { sub(); return unsub; }),useEffect(() => { subscribe(); }),High,https://react.dev/reference/react/useEffect#connecting-to-an-external-system
+7,Effects,Specify dependencies correctly,Include all values used inside effect in deps array,All referenced values in dependency array,Empty deps with external references,[value] when using value in effect,[] when using props/state in effect,High,https://react.dev/reference/react/useEffect#specifying-reactive-dependencies
+8,Effects,Avoid unnecessary effects,Don't use effects for transforming data or events,Transform data during render handle events directly,useEffect for derived state or event handling,const filtered = items.filter(...),useEffect(() => setFiltered(items.filter(...))),High,https://react.dev/learn/you-might-not-need-an-effect
+9,Effects,Use refs for non-reactive values,Store values that don't trigger re-renders in refs,useRef for interval IDs DOM elements,useState for values that don't need render,const intervalRef = useRef(null),"const [intervalId, setIntervalId] = useState()",Medium,https://react.dev/reference/react/useRef
+10,Rendering,Use keys properly,Stable unique keys for list items,Use stable IDs as keys,Array index as key for dynamic lists,key={item.id},key={index},High,https://react.dev/learn/rendering-lists#keeping-list-items-in-order-with-key
+11,Rendering,Memoize expensive calculations,Use useMemo for costly computations,useMemo for expensive filtering/sorting,Recalculate every render,"useMemo(() => expensive(), [deps])",const result = expensiveCalc(),Medium,https://react.dev/reference/react/useMemo
+12,Rendering,Memoize callbacks passed to children,Use useCallback for functions passed as props,useCallback for handlers passed to memoized children,New function reference every render,"useCallback(() => {}, [deps])",const handler = () => {},Medium,https://react.dev/reference/react/useCallback
+13,Rendering,Use React.memo wisely,Wrap components that render often with same props,memo for pure components with stable props,memo everything or nothing,memo(ExpensiveList),memo(SimpleButton),Low,https://react.dev/reference/react/memo
+14,Rendering,Avoid inline object/array creation in JSX,Create objects outside render or memoize,Define style objects outside component,Inline objects in props,<div style={styles.container}>,<div style={{ margin: 10 }}>,Medium,
+15,Components,Keep components small and focused,Single responsibility for each component,One concern per component,Large multi-purpose components,<UserAvatar /><UserName />,<UserCard /> with 500 lines,Medium,
+16,Components,Use composition over inheritance,Compose components using children and props,Use children prop for flexibility,Inheritance hierarchies,<Card>{content}</Card>,class SpecialCard extends Card,Medium,https://react.dev/learn/thinking-in-react
+17,Components,Colocate related code,Keep related components and hooks together,Related files in same directory,Flat structure with many files,components/User/UserCard.tsx,components/UserCard.tsx + hooks/useUser.ts,Low,
+18,Components,Use fragments to avoid extra DOM,Fragment or <> for multiple elements without wrapper,<> for grouping without DOM node,Extra div wrappers,<>{items.map(...)}</>,<div>{items.map(...)}</div>,Low,https://react.dev/reference/react/Fragment
+19,Props,Destructure props,Destructure props for cleaner component code,Destructure in function signature,props.name props.value throughout,"function User({ name, age })",function User(props),Low,
+20,Props,Provide default props values,Use default parameters or defaultProps,Default values in destructuring,Undefined checks throughout,function Button({ size = 'md' }),if (size === undefined) size = 'md',Low,
+21,Props,Avoid prop drilling,Use context or composition for deeply nested data,Context for global data composition for UI,Passing props through 5+ levels,<UserContext.Provider>,<A user={u}><B user={u}><C user={u}>,Medium,https://react.dev/learn/passing-data-deeply-with-context
+22,Props,Validate props with TypeScript,Use TypeScript interfaces for prop types,interface Props { name: string },PropTypes or no validation,interface ButtonProps { onClick: () => void },Button.propTypes = {},Medium,
+23,Events,Use synthetic events correctly,React normalizes events across browsers,e.preventDefault() e.stopPropagation(),Access native event unnecessarily,onClick={(e) => e.preventDefault()},onClick={(e) => e.nativeEvent.preventDefault()},Low,https://react.dev/reference/react-dom/components/common#react-event-object
+24,Events,Avoid binding in render,Use arrow functions in class or hooks,Arrow functions in functional components,bind in render or constructor,const handleClick = () => {},this.handleClick.bind(this),Medium,
+25,Events,Pass event handlers not call results,Pass function reference not invocation,onClick={handleClick},onClick={handleClick()} causing immediate call,onClick={handleClick},onClick={handleClick()},High,
+26,Forms,Controlled components for forms,Use state to control form inputs,value + onChange for inputs,Uncontrolled inputs with refs,<input value={val} onChange={setVal}>,<input ref={inputRef}>,Medium,https://react.dev/reference/react-dom/components/input#controlling-an-input-with-a-state-variable
+27,Forms,Handle form submission properly,Prevent default and handle in submit handler,onSubmit with preventDefault,onClick on submit button only,<form onSubmit={handleSubmit}>,<button onClick={handleSubmit}>,Medium,
+28,Forms,Debounce rapid input changes,Debounce search/filter inputs,useDeferredValue or debounce for search,Filter on every keystroke,useDeferredValue(searchTerm),useEffect filtering on every change,Medium,https://react.dev/reference/react/useDeferredValue
+29,Hooks,Follow rules of hooks,Only call hooks at top level and in React functions,Hooks at component top level,Hooks in conditions loops or callbacks,"const [x, setX] = useState()","if (cond) { const [x, setX] = useState() }",High,https://react.dev/reference/rules/rules-of-hooks
+30,Hooks,Custom hooks for reusable logic,Extract shared stateful logic to custom hooks,useCustomHook for reusable patterns,Duplicate hook logic across components,const { data } = useFetch(url),Duplicate useEffect/useState in components,Medium,https://react.dev/learn/reusing-logic-with-custom-hooks
+31,Hooks,Name custom hooks with use prefix,Custom hooks must start with use,useFetch useForm useAuth,fetchData or getData for hook,function useFetch(url),function fetchData(url),High,
+32,Context,Use context for global data,Context for theme auth locale,Context for app-wide state,Context for frequently changing data,<ThemeContext.Provider>,Context for form field values,Medium,https://react.dev/learn/passing-data-deeply-with-context
+33,Context,Split contexts by concern,Separate contexts for different domains,ThemeContext + AuthContext,One giant AppContext,<ThemeProvider><AuthProvider>,<AppProvider value={{theme user...}}>,Medium,
+34,Context,Memoize context values,Prevent unnecessary re-renders with useMemo,useMemo for context value object,New object reference every render,"value={useMemo(() => ({...}), [])}","value={{ user, theme }}",High,
+35,Performance,Use React DevTools Profiler,Profile to identify performance bottlenecks,Profile before optimizing,Optimize without measuring,React DevTools Profiler,Guessing at bottlenecks,Medium,https://react.dev/learn/react-developer-tools
+36,Performance,Lazy load components,Use React.lazy for code splitting,lazy() for routes and heavy components,Import everything upfront,const Page = lazy(() => import('./Page')),import Page from './Page',Medium,https://react.dev/reference/react/lazy
+37,Performance,Virtualize long lists,Use windowing for lists over 100 items,react-window or react-virtual,Render thousands of DOM nodes,<VirtualizedList items={items}/>,{items.map(i => <Item />)},High,
+38,Performance,Batch state updates,React 18 auto-batches but be aware,Let React batch related updates,Manual batching with flushSync,setA(1); setB(2); // batched,flushSync(() => setA(1)),Low,https://react.dev/learn/queueing-a-series-of-state-updates
+39,ErrorHandling,Use error boundaries,Catch JavaScript errors in component tree,ErrorBoundary wrapping sections,Let errors crash entire app,<ErrorBoundary><App/></ErrorBoundary>,No error handling,High,https://react.dev/reference/react/Component#catching-rendering-errors-with-an-error-boundary
+40,ErrorHandling,Handle async errors,Catch errors in async operations,try/catch in async handlers,Unhandled promise rejections,try { await fetch() } catch(e) {},await fetch() // no catch,High,
+41,Testing,Test behavior not implementation,Test what user sees and does,Test renders and interactions,Test internal state or methods,expect(screen.getByText('Hello')),expect(component.state.name),Medium,https://testing-library.com/docs/react-testing-library/intro/
+42,Testing,Use testing-library queries,Use accessible queries,getByRole getByLabelText,getByTestId for everything,getByRole('button'),getByTestId('submit-btn'),Medium,https://testing-library.com/docs/queries/about#priority
+43,Accessibility,Use semantic HTML,Proper HTML elements for their purpose,button for clicks nav for navigation,div with onClick for buttons,<button onClick={...}>,<div onClick={...}>,High,https://react.dev/reference/react-dom/components#all-html-components
+44,Accessibility,Manage focus properly,Handle focus for modals dialogs,Focus trap in modals return focus on close,No focus management,useEffect to focus input,Modal without focus trap,High,
+45,Accessibility,Announce dynamic content,Use ARIA live regions for updates,aria-live for dynamic updates,Silent updates to screen readers,"<div aria-live=""polite"">{msg}</div>",<div>{msg}</div>,Medium,
+46,Accessibility,Label form controls,Associate labels with inputs,htmlFor matching input id,Placeholder as only label,"<label htmlFor=""email"">Email</label>","<input placeholder=""Email""/>",High,
+47,TypeScript,Type component props,Define interfaces for all props,interface Props with all prop types,any or missing types,interface Props { name: string },function Component(props: any),High,
+48,TypeScript,Type state properly,Provide types for useState,useState<Type>() for complex state,Inferred any types,useState<User | null>(null),useState(null),Medium,
+49,TypeScript,Type event handlers,Use React event types,React.ChangeEvent<HTMLInputElement>,Generic Event type,onChange: React.ChangeEvent<HTMLInputElement>,onChange: Event,Medium,
+50,TypeScript,Use generics for reusable components,Generic components for flexible typing,Generic props for list components,Union types for flexibility,<List<T> items={T[]}>,<List items={any[]}>,Medium,
+51,Patterns,Container/Presentational split,Separate data logic from UI,Container fetches presentational renders,Mixed data and UI in one,<UserContainer><UserView/></UserContainer>,<User /> with fetch and render,Low,
+52,Patterns,Render props for flexibility,Share code via render prop pattern,Render prop for customizable rendering,Duplicate logic across components,<DataFetcher render={data => ...}/>,Copy paste fetch logic,Low,https://react.dev/reference/react/cloneElement#passing-data-with-a-render-prop
+53,Patterns,Compound components,Related components sharing state,Tab + TabPanel sharing context,Prop drilling between related,<Tabs><Tab/><TabPanel/></Tabs>,<Tabs tabs={[]} panels={[...]}/>,Low,
diff --git a/.claude/skills/ui-ux-pro-max/data/stacks/shadcn.csv b/.claude/skills/ui-ux-pro-max/data/stacks/shadcn.csv
new file mode 100644
index 000000000..fb86e8d1c
--- /dev/null
+++ b/.claude/skills/ui-ux-pro-max/data/stacks/shadcn.csv
@@ -0,0 +1,61 @@
+No,Category,Guideline,Description,Do,Don't,Code Good,Code Bad,Severity,Docs URL
+1,Setup,Use CLI for installation,Install components via shadcn CLI for proper setup,npx shadcn@latest add component-name,Manual copy-paste from docs,npx shadcn@latest add button,Copy component code manually,High,https://ui.shadcn.com/docs/cli
+2,Setup,Initialize project properly,Run init command to set up components.json and globals.css,npx shadcn@latest init before adding components,Skip init and add components directly,npx shadcn@latest init,npx shadcn@latest add button (without init),High,https://ui.shadcn.com/docs/installation
+3,Setup,Configure path aliases,Set up proper import aliases in tsconfig and components.json,Use @/components/ui path aliases,Relative imports like ../../components,import { Button } from "@/components/ui/button",import { Button } from "../../components/ui/button",Medium,https://ui.shadcn.com/docs/installation
+4,Theming,Use CSS variables for colors,Define colors as CSS variables in globals.css for theming,CSS variables in :root and .dark,Hardcoded color values in components,bg-primary text-primary-foreground,bg-blue-500 text-white,High,https://ui.shadcn.com/docs/theming
+5,Theming,Follow naming convention,Use semantic color names with foreground pattern,primary/primary-foreground secondary/secondary-foreground,Generic color names,--primary --primary-foreground,--blue --light-blue,Medium,https://ui.shadcn.com/docs/theming
+6,Theming,Support dark mode,Include .dark class styles for all custom CSS,Define both :root and .dark color schemes,Only light mode colors,.dark { --background: 240 10% 3.9%; },No .dark class styles,High,https://ui.shadcn.com/docs/dark-mode
+7,Components,Use component variants,Leverage cva variants for consistent styling,Use variant prop for different styles,Inline conditional classes,<Button variant="destructive">,<Button className={isError ? "bg-red-500" : "bg-blue-500"}>,Medium,https://ui.shadcn.com/docs/components/button
+8,Components,Compose with className,Add custom classes via className prop for overrides,Extend with className for one-off customizations,Modify component source directly,<Button className="w-full">,Edit button.tsx to add w-full,Medium,https://ui.shadcn.com/docs/components/button
+9,Components,Use size variants consistently,Apply size prop for consistent sizing across components,size="sm" size="lg" for sizing,Mix size classes inconsistently,<Button size="lg">,<Button className="text-lg px-8 py-4">,Medium,https://ui.shadcn.com/docs/components/button
+10,Components,Prefer compound components,Use provided sub-components for complex UI,Card + CardHeader + CardContent pattern,Single component with many props,<Card><CardHeader><CardTitle>,<Card title="x" content="y" footer="z">,Medium,https://ui.shadcn.com/docs/components/card
+11,Dialog,Use Dialog for modal content,Dialog component for overlay modal windows,Dialog for confirmations forms details,Alert for modal content,<Dialog><DialogContent>,<Alert> styled as modal,High,https://ui.shadcn.com/docs/components/dialog
+12,Dialog,Handle dialog state properly,Use open and onOpenChange for controlled dialogs,Controlled state with useState,Uncontrolled with default open only,"<Dialog open={open} onOpenChange={setOpen}>","<Dialog defaultOpen={true}>",Medium,https://ui.shadcn.com/docs/components/dialog
+13,Dialog,Include proper dialog structure,Use DialogHeader DialogTitle DialogDescription,Complete semantic structure,Missing title or description,<DialogHeader><DialogTitle><DialogDescription>,<DialogContent><p>Content</p></DialogContent>,High,https://ui.shadcn.com/docs/components/dialog
+14,Sheet,Use Sheet for side panels,Sheet component for slide-out panels and drawers,Sheet for navigation filters settings,Dialog for side content,<Sheet side="right">,<Dialog> with slide animation,Medium,https://ui.shadcn.com/docs/components/sheet
+15,Sheet,Specify sheet side,Set side prop for sheet slide direction,Explicit side="left" or side="right",Default side without consideration,<Sheet><SheetContent side="left">,<Sheet><SheetContent>,Low,https://ui.shadcn.com/docs/components/sheet
+16,Form,Use Form with react-hook-form,Integrate Form component with react-hook-form for validation,useForm + Form + FormField pattern,Custom form handling without Form,<Form {...form}><FormField control={form.control}>,<form onSubmit={handleSubmit}>,High,https://ui.shadcn.com/docs/components/form
+17,Form,Use FormField for inputs,Wrap inputs in FormField for proper labeling and errors,FormField + FormItem + FormLabel + FormControl,Input without FormField wrapper,<FormField><FormItem><FormLabel><FormControl><Input>,<Input onChange={...}>,High,https://ui.shadcn.com/docs/components/form
+18,Form,Display form messages,Use FormMessage for validation error display,FormMessage after FormControl,Custom error text without FormMessage,<FormControl><Input/></FormControl><FormMessage/>,<Input/>{error && <span>{error}</span>},Medium,https://ui.shadcn.com/docs/components/form
+19,Form,Use Zod for validation,Define form schema with Zod for type-safe validation,zodResolver with form schema,Manual validation logic,zodResolver(formSchema),validate: (values) => { if (!values.email) },Medium,https://ui.shadcn.com/docs/components/form
+20,Select,Use Select for dropdowns,Select component for option selection,Select for choosing from list,Native select element,<Select><SelectTrigger><SelectContent>,<select><option>,Medium,https://ui.shadcn.com/docs/components/select
+21,Select,Structure Select properly,Include Trigger Value Content and Items,Complete Select structure,Missing SelectValue or SelectContent,<SelectTrigger><SelectValue/></SelectTrigger><SelectContent><SelectItem>,<Select><option>,High,https://ui.shadcn.com/docs/components/select
+22,Command,Use Command for search,Command component for searchable lists and palettes,Command for command palette search,Input with custom dropdown,<Command><CommandInput><CommandList>,<Input><div className="dropdown">,Medium,https://ui.shadcn.com/docs/components/command
+23,Command,Group command items,Use CommandGroup for categorized items,CommandGroup with heading for sections,Flat list without grouping,<CommandGroup heading="Suggestions"><CommandItem>,<CommandItem> without groups,Low,https://ui.shadcn.com/docs/components/command
+24,Table,Use Table for data display,Table component for structured data,Table for tabular data display,Div grid for table-like layouts,<Table><TableHeader><TableBody><TableRow>,<div className="grid">,Medium,https://ui.shadcn.com/docs/components/table
+25,Table,Include proper table structure,Use TableHeader TableBody TableRow TableCell,Semantic table structure,Missing thead or tbody,<TableHeader><TableRow><TableHead>,<Table><TableRow> without header,High,https://ui.shadcn.com/docs/components/table
+26,DataTable,Use DataTable for complex tables,Combine Table with TanStack Table for features,DataTable pattern for sorting filtering pagination,Custom table implementation,useReactTable + Table components,Custom sort filter pagination logic,Medium,https://ui.shadcn.com/docs/components/data-table
+27,Tabs,Use Tabs for content switching,Tabs component for tabbed interfaces,Tabs for related content sections,Custom tab implementation,<Tabs><TabsList><TabsTrigger><TabsContent>,<div onClick={() => setTab(...)},Medium,https://ui.shadcn.com/docs/components/tabs
+28,Tabs,Set default tab value,Specify defaultValue for initial tab,defaultValue on Tabs component,No default leaving first tab,<Tabs defaultValue="account">,<Tabs> without defaultValue,Low,https://ui.shadcn.com/docs/components/tabs
+29,Accordion,Use Accordion for collapsible,Accordion for expandable content sections,Accordion for FAQ settings panels,Custom collapse implementation,<Accordion><AccordionItem><AccordionTrigger>,<div onClick={() => setOpen(!open)}>,Medium,https://ui.shadcn.com/docs/components/accordion
+30,Accordion,Choose accordion type,Use type="single" or type="multiple" appropriately,type="single" for one open type="multiple" for many,Default type without consideration,<Accordion type="single" collapsible>,<Accordion> without type,Low,https://ui.shadcn.com/docs/components/accordion
+31,Toast,Use Sonner for toasts,Sonner integration for toast notifications,toast() from sonner for notifications,Custom toast implementation,toast("Event created"),setShowToast(true),Medium,https://ui.shadcn.com/docs/components/sonner
+32,Toast,Add Toaster to layout,Include Toaster component in root layout,<Toaster /> in app layout,Toaster in individual pages,app/layout.tsx: <Toaster />,page.tsx: <Toaster />,High,https://ui.shadcn.com/docs/components/sonner
+33,Toast,Use toast variants,Apply toast.success toast.error for context,Semantic toast methods,Generic toast for all messages,toast.success("Saved!") toast.error("Failed"),toast("Saved!") toast("Failed"),Medium,https://ui.shadcn.com/docs/components/sonner
+34,Popover,Use Popover for floating content,Popover for dropdown menus and floating panels,Popover for contextual actions,Absolute positioned divs,<Popover><PopoverTrigger><PopoverContent>,<div className="relative"><div className="absolute">,Medium,https://ui.shadcn.com/docs/components/popover
+35,Popover,Handle popover alignment,Use align and side props for positioning,Explicit alignment configuration,Default alignment for all,<PopoverContent align="start" side="bottom">,<PopoverContent>,Low,https://ui.shadcn.com/docs/components/popover
+36,DropdownMenu,Use DropdownMenu for actions,DropdownMenu for action lists and context menus,DropdownMenu for user menu actions,Popover for action lists,<DropdownMenu><DropdownMenuTrigger><DropdownMenuContent>,<Popover> for menu actions,Medium,https://ui.shadcn.com/docs/components/dropdown-menu
+37,DropdownMenu,Group menu items,Use DropdownMenuGroup and DropdownMenuSeparator,Organized menu with separators,Flat list of items,<DropdownMenuGroup><DropdownMenuItem><DropdownMenuSeparator>,<DropdownMenuItem> without organization,Low,https://ui.shadcn.com/docs/components/dropdown-menu
+38,Tooltip,Use Tooltip for hints,Tooltip for icon buttons and truncated text,Tooltip for additional context,Title attribute for tooltips,<Tooltip><TooltipTrigger><TooltipContent>,<button title="Delete">,Medium,https://ui.shadcn.com/docs/components/tooltip
+39,Tooltip,Add TooltipProvider,Wrap app or section in TooltipProvider,TooltipProvider at app level,TooltipProvider per tooltip,<TooltipProvider><App/></TooltipProvider>,<Tooltip><TooltipProvider>,High,https://ui.shadcn.com/docs/components/tooltip
+40,Skeleton,Use Skeleton for loading,Skeleton component for loading placeholders,Skeleton matching content layout,Spinner for content loading,<Skeleton className="h-4 w-[200px]"/>,<Spinner/> for card loading,Medium,https://ui.shadcn.com/docs/components/skeleton
+41,Skeleton,Match skeleton dimensions,Size skeleton to match loaded content,Skeleton same size as expected content,Generic skeleton size,<Skeleton className="h-12 w-12 rounded-full"/>,<Skeleton/> without sizing,Medium,https://ui.shadcn.com/docs/components/skeleton
+42,AlertDialog,Use AlertDialog for confirms,AlertDialog for destructive action confirmation,AlertDialog for delete confirmations,Dialog for confirmations,<AlertDialog><AlertDialogTrigger><AlertDialogContent>,<Dialog> for delete confirmation,High,https://ui.shadcn.com/docs/components/alert-dialog
+43,AlertDialog,Include action buttons,Use AlertDialogAction and AlertDialogCancel,Standard confirm/cancel pattern,Custom buttons in AlertDialog,<AlertDialogCancel>Cancel</AlertDialogCancel><AlertDialogAction>,<Button>Cancel</Button><Button>Confirm</Button>,Medium,https://ui.shadcn.com/docs/components/alert-dialog
+44,Sidebar,Use Sidebar for navigation,Sidebar component for app navigation,Sidebar for main app navigation,Custom sidebar implementation,<SidebarProvider><Sidebar><SidebarContent>,<div className="w-64 fixed">,Medium,https://ui.shadcn.com/docs/components/sidebar
+45,Sidebar,Wrap in SidebarProvider,Use SidebarProvider for sidebar state management,SidebarProvider at layout level,Sidebar without provider,<SidebarProvider><Sidebar></SidebarProvider>,<Sidebar> without provider,High,https://ui.shadcn.com/docs/components/sidebar
+46,Sidebar,Use SidebarTrigger,Include SidebarTrigger for mobile toggle,SidebarTrigger for responsive toggle,Custom toggle button,<SidebarTrigger/>,<Button onClick={() => toggleSidebar()}>,Medium,https://ui.shadcn.com/docs/components/sidebar
+47,Chart,Use Chart for data viz,Chart component with Recharts integration,Chart component for dashboards,Direct Recharts without wrapper,<ChartContainer config={chartConfig}>,<ResponsiveContainer><BarChart>,Medium,https://ui.shadcn.com/docs/components/chart
+48,Chart,Define chart config,Create chartConfig for consistent theming,chartConfig with color definitions,Inline colors in charts,"{ desktop: { label: ""Desktop"", color: ""#2563eb"" } }",<Bar fill="#2563eb"/>,Medium,https://ui.shadcn.com/docs/components/chart
+49,Chart,Use ChartTooltip,Apply ChartTooltip for interactive charts,ChartTooltip with ChartTooltipContent,Recharts Tooltip directly,<ChartTooltip content={<ChartTooltipContent/>}/>,<Tooltip/> from recharts,Low,https://ui.shadcn.com/docs/components/chart
+50,Blocks,Use blocks for scaffolding,Start from shadcn blocks for common layouts,npx shadcn@latest add dashboard-01,Build dashboard from scratch,npx shadcn@latest add login-01,Custom login page from scratch,Medium,https://ui.shadcn.com/blocks
+51,Blocks,Customize block components,Modify copied block code to fit needs,Edit block files after installation,Use blocks without modification,Customize dashboard-01 layout,Use dashboard-01 as-is,Low,https://ui.shadcn.com/blocks
+52,A11y,Use semantic components,Shadcn components have built-in ARIA,Rely on component accessibility,Override ARIA attributes,<Button> has button role,<div role="button">,High,https://ui.shadcn.com/docs/components/button
+53,A11y,Maintain focus management,Dialog Sheet handle focus automatically,Let components manage focus,Custom focus handling,<Dialog> traps focus,document.querySelector().focus(),High,https://ui.shadcn.com/docs/components/dialog
+54,A11y,Provide labels,Use FormLabel and aria-label appropriately,FormLabel for form inputs,Placeholder as only label,<FormLabel>Email</FormLabel><Input/>,<Input placeholder="Email"/>,High,https://ui.shadcn.com/docs/components/form
+55,Performance,Import components individually,Import only needed components,Named imports from component files,Import all from index,import { Button } from "@/components/ui/button",import { Button Card Dialog } from "@/components/ui",Medium,
+56,Performance,Lazy load dialogs,Dynamic import for heavy dialog content,React.lazy for dialog content,Import all dialogs upfront,const HeavyContent = lazy(() => import('./Heavy')),import HeavyContent from './Heavy',Medium,
+57,Customization,Extend variants with cva,Add new variants using class-variance-authority,Extend buttonVariants for new styles,Inline classes for variants,"variants: { size: { xl: ""h-14 px-8"" } }",className="h-14 px-8",Medium,https://ui.shadcn.com/docs/components/button
+58,Customization,Create custom components,Build new components following shadcn patterns,Use cn() and cva for custom components,Different patterns for custom,const Custom = ({ className }) => <div className={cn("base" className)}>,const Custom = ({ style }) => <div style={style}>,Medium,
+59,Patterns,Use asChild for composition,asChild prop for component composition,Slot pattern with asChild,Wrapper divs for composition,<Button asChild><Link href="/">,<Button><Link href="/"></Link></Button>,Medium,https://ui.shadcn.com/docs/components/button
+60,Patterns,Combine with React Hook Form,Form + useForm for complete forms,RHF Controller with shadcn inputs,Custom form state management,<FormField control={form.control} name="email">,<Input value={email} onChange={(e) => setEmail(e.target.value)},High,https://ui.shadcn.com/docs/components/form
diff --git a/.claude/skills/ui-ux-pro-max/data/stacks/svelte.csv b/.claude/skills/ui-ux-pro-max/data/stacks/svelte.csv
new file mode 100644
index 000000000..39b6d2e44
--- /dev/null
+++ b/.claude/skills/ui-ux-pro-max/data/stacks/svelte.csv
@@ -0,0 +1,54 @@
+No,Category,Guideline,Description,Do,Don't,Code Good,Code Bad,Severity,Docs URL
+1,Reactivity,Use $: for reactive statements,Automatic dependency tracking,$: for derived values,Manual recalculation,$: doubled = count * 2,let doubled; count && (doubled = count * 2),Medium,https://svelte.dev/docs/svelte-components#script-3-$-marks-a-statement-as-reactive
+2,Reactivity,Trigger reactivity with assignment,Svelte tracks assignments not mutations,Reassign arrays/objects to trigger update,Mutate without reassignment,"items = [...items, newItem]",items.push(newItem),High,https://svelte.dev/docs/svelte-components#script-2-assignments-are-reactive
+3,Reactivity,Use $state in Svelte 5,Runes for explicit reactivity,let count = $state(0),Implicit reactivity in Svelte 5,let count = $state(0),let count = 0 (Svelte 5),Medium,https://svelte.dev/blog/runes
+4,Reactivity,Use $derived for computed values,$derived replaces $: in Svelte 5,let doubled = $derived(count * 2),$: in Svelte 5,let doubled = $derived(count * 2),$: doubled = count * 2 (Svelte 5),Medium,
+5,Reactivity,Use $effect for side effects,$effect replaces $: side effects,Use $effect for subscriptions,$: for side effects in Svelte 5,$effect(() => console.log(count)),$: console.log(count) (Svelte 5),Medium,
+6,Props,Export let for props,Declare props with export let,export let propName,Props without export,export let count = 0,let count = 0,High,https://svelte.dev/docs/svelte-components#script-1-export-creates-a-component-prop
+7,Props,Use $props in Svelte 5,$props rune for prop access,let { name } = $props(),export let in Svelte 5,"let { name, age = 0 } = $props()",export let name; export let age = 0,Medium,
+8,Props,Provide default values,Default props with assignment,export let count = 0,Required props without defaults,export let count = 0,export let count,Low,
+9,Props,Use spread props,Pass through unknown props,{...$$restProps} on elements,Manual prop forwarding,<button {...$$restProps}>,<button class={$$props.class}>,Low,https://svelte.dev/docs/basic-markup#attributes-and-props
+10,Bindings,Use bind: for two-way binding,Simplified input handling,bind:value for inputs,on:input with manual update,<input bind:value={name}>,<input value={name} on:input={e => name = e.target.value}>,Low,https://svelte.dev/docs/element-directives#bind-property
+11,Bindings,Bind to DOM elements,Reference DOM nodes,bind:this for element reference,querySelector in onMount,<div bind:this={el}>,onMount(() => el = document.querySelector()),Medium,
+12,Bindings,Use bind:group for radios/checkboxes,Simplified group handling,bind:group for radio/checkbox groups,Manual checked handling,"<input type=""radio"" bind:group={selected}>","<input type=""radio"" checked={selected === value}>",Low,
+13,Events,Use on: for event handlers,Event directive syntax,on:click={handler},addEventListener in onMount,<button on:click={handleClick}>,onMount(() => btn.addEventListener()),Medium,https://svelte.dev/docs/element-directives#on-eventname
+14,Events,Forward events with on:event,Pass events to parent,on:click without handler,createEventDispatcher for DOM events,<button on:click>,"dispatch('click', event)",Low,
+15,Events,Use createEventDispatcher,Custom component events,dispatch for custom events,on:event for custom events,"dispatch('save', { data })",on:save without dispatch,Medium,https://svelte.dev/docs/svelte#createeventdispatcher
+16,Lifecycle,Use onMount for initialization,Run code after component mounts,onMount for setup and data fetching,Code in script body for side effects,onMount(() => fetchData()),fetchData() in script body,High,https://svelte.dev/docs/svelte#onmount
+17,Lifecycle,Return cleanup from onMount,Automatic cleanup on destroy,Return function from onMount,Separate onDestroy for paired cleanup,onMount(() => { sub(); return unsub }),onMount(sub); onDestroy(unsub),Medium,
+18,Lifecycle,Use onDestroy sparingly,Only when onMount cleanup not possible,onDestroy for non-mount cleanup,onDestroy for mount-related cleanup,onDestroy for store unsubscribe,onDestroy(() => clearInterval(id)),Low,
+19,Lifecycle,Avoid beforeUpdate/afterUpdate,Usually not needed,Reactive statements instead,beforeUpdate for derived state,$: if (x) doSomething(),beforeUpdate(() => doSomething()),Low,
+20,Stores,Use writable for mutable state,Basic reactive store,writable for shared mutable state,Local variables for shared state,const count = writable(0),let count = 0 in module,Medium,https://svelte.dev/docs/svelte-store#writable
+21,Stores,Use readable for read-only state,External data sources,readable for derived/external data,writable for read-only data,"readable(0, set => interval(set))",writable(0) for timer,Low,https://svelte.dev/docs/svelte-store#readable
+22,Stores,Use derived for computed stores,Combine or transform stores,derived for computed values,Manual subscription for derived,"derived(count, $c => $c * 2)",count.subscribe(c => doubled = c * 2),Medium,https://svelte.dev/docs/svelte-store#derived
+23,Stores,Use $ prefix for auto-subscription,Automatic subscribe/unsubscribe,$storeName in components,Manual subscription,{$count},count.subscribe(c => value = c),High,
+24,Stores,Clean up custom subscriptions,Unsubscribe when component destroys,Return unsubscribe from onMount,Leave subscriptions open,onMount(() => store.subscribe(fn)),store.subscribe(fn) in script,High,
+25,Slots,Use slots for composition,Content projection,<slot> for flexible content,Props for all content,<slot>Default</slot>,"<Component content=""text""/>",Medium,https://svelte.dev/docs/special-elements#slot
+26,Slots,Name slots for multiple areas,Multiple content areas,"<slot name=""header"">",Single slot for complex layouts,"<slot name=""header""><slot name=""footer"">",<slot> with complex conditionals,Low,
+27,Slots,Check slot content with $$slots,Conditional slot rendering,$$slots.name for conditional rendering,Always render slot wrapper,"{#if $$slots.footer}<slot name=""footer""/>{/if}","<div><slot name=""footer""/></div>",Low,
+28,Styling,Use scoped styles by default,Styles scoped to component,<style> for component styles,Global styles for component,:global() only when needed,<style> all global,Medium,https://svelte.dev/docs/svelte-components#style
+29,Styling,Use :global() sparingly,Escape scoping when needed,:global for third-party styling,Global for all styles,:global(.external-lib),<style> without scoping,Medium,
+30,Styling,Use CSS variables for theming,Dynamic styling,CSS custom properties,Inline styles for themes,"style=""--color: {color}""","style=""color: {color}""",Low,
+31,Transitions,Use built-in transitions,Svelte transition directives,transition:fade for simple effects,Manual CSS transitions,<div transition:fade>,<div class:fade={visible}>,Low,https://svelte.dev/docs/element-directives#transition-fn
+32,Transitions,Use in: and out: separately,Different enter/exit animations,in:fly out:fade for asymmetric,Same transition for both,<div in:fly out:fade>,<div transition:fly>,Low,
+33,Transitions,Add local modifier,Prevent ancestor trigger,transition:fade|local,Global transitions for lists,<div transition:slide|local>,<div transition:slide>,Medium,
+34,Actions,Use actions for DOM behavior,Reusable DOM logic,use:action for DOM enhancements,onMount for each usage,<div use:clickOutside>,onMount(() => setupClickOutside(el)),Medium,https://svelte.dev/docs/element-directives#use-action
+35,Actions,Return update and destroy,Lifecycle methods for actions,"Return { update, destroy }",Only initial setup,"return { update(params) {}, destroy() {} }",return destroy only,Medium,
+36,Actions,Pass parameters to actions,Configure action behavior,use:action={params},Hardcoded action behavior,<div use:tooltip={options}>,<div use:tooltip>,Low,
+37,Logic,Use {#if} for conditionals,Template conditionals,{#if} {:else if} {:else},Ternary in expressions,{#if cond}...{:else}...{/if},{cond ? a : b} for complex,Low,https://svelte.dev/docs/logic-blocks#if
+38,Logic,Use {#each} for lists,List rendering,{#each} with key,Map in expression,{#each items as item (item.id)},{items.map(i => `<div>${i}</div>`)},Medium,
+39,Logic,Always use keys in {#each},Proper list reconciliation,(item.id) for unique key,Index as key or no key,{#each items as item (item.id)},"{#each items as item, i (i)}",High,
+40,Logic,Use {#await} for promises,Handle async states,{#await} for loading/error states,Manual promise handling,{#await promise}...{:then}...{:catch},{#if loading}...{#if error},Medium,https://svelte.dev/docs/logic-blocks#await
+41,SvelteKit,Use +page.svelte for routes,File-based routing,+page.svelte for route components,Custom routing setup,routes/about/+page.svelte,routes/About.svelte,Medium,https://kit.svelte.dev/docs/routing
+42,SvelteKit,Use +page.js for data loading,Load data before render,load function in +page.js,onMount for data fetching,export function load() {},onMount(() => fetchData()),High,https://kit.svelte.dev/docs/load
+43,SvelteKit,Use +page.server.js for server-only,Server-side data loading,+page.server.js for sensitive data,+page.js for API keys,+page.server.js with DB access,+page.js with DB access,High,
+44,SvelteKit,Use form actions,Server-side form handling,+page.server.js actions,API routes for forms,export const actions = { default },fetch('/api/submit'),Medium,https://kit.svelte.dev/docs/form-actions
+45,SvelteKit,Use $app/stores for app state,$page $navigating $updated,$page for current page data,Manual URL parsing,import { page } from '$app/stores',window.location.pathname,Medium,https://kit.svelte.dev/docs/modules#$app-stores
+46,Performance,Use {#key} for forced re-render,Reset component state,{#key id} for fresh instance,Manual destroy/create,{#key item.id}<Component/>{/key},on:change={() => component = null},Low,https://svelte.dev/docs/logic-blocks#key
+47,Performance,Avoid unnecessary reactivity,Not everything needs $:,$: only for side effects,$: for simple assignments,$: if (x) console.log(x),$: y = x (when y = x works),Low,
+48,Performance,Use immutable compiler option,Skip equality checks,immutable: true for large lists,Default for all components,<svelte:options immutable/>,Default without immutable,Low,
+49,TypeScript,"Use lang=""ts"" in script",TypeScript support,"<script lang=""ts"">",JavaScript for typed projects,"<script lang=""ts"">",<script> with JSDoc,Medium,https://svelte.dev/docs/typescript
+50,TypeScript,Type props with interface,Explicit prop types,interface $$Props for types,Untyped props,interface $$Props { name: string },export let name,Medium,
+51,TypeScript,Type events with createEventDispatcher,Type-safe events,createEventDispatcher<Events>(),Untyped dispatch,createEventDispatcher<{ save: Data }>(),createEventDispatcher(),Medium,
+52,Accessibility,Use semantic elements,Proper HTML in templates,button nav main appropriately,div for everything,<button on:click>,<div on:click>,High,
+53,Accessibility,Add aria to dynamic content,Accessible state changes,aria-live for updates,Silent dynamic updates,"<div aria-live=""polite"">{message}</div>",<div>{message}</div>,Medium,
diff --git a/.claude/skills/ui-ux-pro-max/data/stacks/swiftui.csv b/.claude/skills/ui-ux-pro-max/data/stacks/swiftui.csv
new file mode 100644
index 000000000..1009d75cc
--- /dev/null
+++ b/.claude/skills/ui-ux-pro-max/data/stacks/swiftui.csv
@@ -0,0 +1,51 @@
+No,Category,Guideline,Description,Do,Don't,Code Good,Code Bad,Severity,Docs URL
+1,Views,Use struct for views,SwiftUI views are value types,struct MyView: View,class MyView: View,struct ContentView: View { var body: some View },class ContentView: View,High,https://developer.apple.com/documentation/swiftui/view
+2,Views,Keep views small and focused,Single responsibility for each view,Extract subviews for complex layouts,Large monolithic views,Extract HeaderView FooterView,500+ line View struct,Medium,
+3,Views,Use body computed property,body returns the view hierarchy,var body: some View { },func body() -> some View,"var body: some View { Text(""Hello"") }",func body() -> Text,High,
+4,Views,Prefer composition over inheritance,Compose views using ViewBuilder,Combine smaller views,Inheritance hierarchies,VStack { Header() Content() },class SpecialView extends BaseView,Medium,
+5,State,Use @State for local state,Simple value types owned by view,@State for view-local primitives,@State for shared data,@State private var count = 0,@State var sharedData: Model,High,https://developer.apple.com/documentation/swiftui/state
+6,State,Use @Binding for two-way data,Pass mutable state to child views,@Binding for child input,@State in child for parent data,@Binding var isOn: Bool,$isOn to pass binding,Medium,https://developer.apple.com/documentation/swiftui/binding
+7,State,Use @StateObject for reference types,ObservableObject owned by view,@StateObject for view-created objects,@ObservedObject for owned objects,@StateObject private var vm = ViewModel(),@ObservedObject var vm = ViewModel(),High,https://developer.apple.com/documentation/swiftui/stateobject
+8,State,Use @ObservedObject for injected objects,Reference types passed from parent,@ObservedObject for injected dependencies,@StateObject for injected objects,@ObservedObject var vm: ViewModel,@StateObject var vm: ViewModel (injected),High,https://developer.apple.com/documentation/swiftui/observedobject
+9,State,Use @EnvironmentObject for shared state,App-wide state injection,@EnvironmentObject for global state,Prop drilling through views,@EnvironmentObject var settings: Settings,Pass settings through 5 views,Medium,https://developer.apple.com/documentation/swiftui/environmentobject
+10,State,Use @Published in ObservableObject,Automatically publish property changes,@Published for observed properties,Manual objectWillChange calls,@Published var items: [Item] = [],var items: [Item] { didSet { objectWillChange.send() } },Medium,
+11,Observable,Use @Observable macro (iOS 17+),Modern observation without Combine,@Observable class for view models,ObservableObject for new projects,@Observable class ViewModel { },class ViewModel: ObservableObject,Medium,https://developer.apple.com/documentation/observation
+12,Observable,Use @Bindable for @Observable,Create bindings from @Observable,@Bindable var vm for bindings,@Binding with @Observable,@Bindable var viewModel,$viewModel.name with @Observable,Medium,
+13,Layout,Use VStack HStack ZStack,Standard stack-based layouts,Stacks for linear arrangements,GeometryReader for simple layouts,VStack { Text() Image() },GeometryReader for vertical list,Medium,https://developer.apple.com/documentation/swiftui/vstack
+14,Layout,Use LazyVStack LazyHStack for lists,Lazy loading for performance,Lazy stacks for long lists,Regular stacks for 100+ items,LazyVStack { ForEach(items) },VStack { ForEach(largeArray) },High,https://developer.apple.com/documentation/swiftui/lazyvstack
+15,Layout,Use GeometryReader sparingly,Only when needed for sizing,GeometryReader for responsive layouts,GeometryReader everywhere,GeometryReader for aspect ratio,GeometryReader wrapping everything,Medium,
+16,Layout,Use spacing and padding consistently,Consistent spacing throughout app,Design system spacing values,Magic numbers for spacing,.padding(16) or .padding(),".padding(13), .padding(17)",Low,
+17,Layout,Use frame modifiers correctly,Set explicit sizes when needed,.frame(maxWidth: .infinity),Fixed sizes for responsive content,.frame(maxWidth: .infinity),.frame(width: 375),Medium,
+18,Modifiers,Order modifiers correctly,Modifier order affects rendering,Background before padding for full coverage,Wrong modifier order,.padding().background(Color.red),.background(Color.red).padding(),High,
+19,Modifiers,Create custom ViewModifiers,Reusable modifier combinations,ViewModifier for repeated styling,Duplicate modifier chains,struct CardStyle: ViewModifier,.shadow().cornerRadius() everywhere,Medium,https://developer.apple.com/documentation/swiftui/viewmodifier
+20,Modifiers,Use conditional modifiers carefully,Avoid changing view identity,if-else with same view type,Conditional that changes view identity,Text(title).foregroundColor(isActive ? .blue : .gray),if isActive { Text().bold() } else { Text() },Medium,
+21,Navigation,Use NavigationStack (iOS 16+),Modern navigation with type-safe paths,NavigationStack with navigationDestination,NavigationView for new projects,NavigationStack { },NavigationView { } (deprecated),Medium,https://developer.apple.com/documentation/swiftui/navigationstack
+22,Navigation,Use navigationDestination,Type-safe navigation destinations,.navigationDestination(for:),NavigationLink(destination:),.navigationDestination(for: Item.self),NavigationLink(destination: DetailView()),Medium,
+23,Navigation,Use @Environment for dismiss,Programmatic navigation dismissal,@Environment(\.dismiss) var dismiss,presentationMode (deprecated),@Environment(\.dismiss) var dismiss,@Environment(\.presentationMode),Low,
+24,Lists,Use List for scrollable content,Built-in scrolling and styling,List for standard scrollable content,ScrollView + VStack for simple lists,List { ForEach(items) { } },ScrollView { VStack { ForEach } },Low,https://developer.apple.com/documentation/swiftui/list
+25,Lists,Provide stable identifiers,Use Identifiable or explicit id,Identifiable protocol or id parameter,Index as identifier,ForEach(items) where Item: Identifiable,"ForEach(items.indices, id: \.self)",High,
+26,Lists,Use onDelete and onMove,Standard list editing,onDelete for swipe to delete,Custom delete implementation,.onDelete(perform: delete),.onTapGesture for delete,Low,
+27,Forms,Use Form for settings,Grouped input controls,Form for settings screens,Manual grouping for forms,Form { Section { Toggle() } },VStack { Toggle() },Low,https://developer.apple.com/documentation/swiftui/form
+28,Forms,Use @FocusState for keyboard,Manage keyboard focus,@FocusState for text field focus,Manual first responder handling,@FocusState private var isFocused: Bool,UIKit first responder,Medium,https://developer.apple.com/documentation/swiftui/focusstate
+29,Forms,Validate input properly,Show validation feedback,Real-time validation feedback,Submit without validation,TextField with validation state,TextField without error handling,Medium,
+30,Async,Use .task for async work,Automatic cancellation on view disappear,.task for view lifecycle async,onAppear with Task,.task { await loadData() },onAppear { Task { await loadData() } },Medium,https://developer.apple.com/documentation/swiftui/view/task(priority:_:)
+31,Async,Handle loading states,Show progress during async operations,ProgressView during loading,Empty view during load,if isLoading { ProgressView() },No loading indicator,Medium,
+32,Async,Use @MainActor for UI updates,Ensure UI updates on main thread,@MainActor on view models,Manual DispatchQueue.main,@MainActor class ViewModel,DispatchQueue.main.async,Medium,
+33,Animation,Use withAnimation,Animate state changes,withAnimation for state transitions,No animation for state changes,withAnimation { isExpanded.toggle() },isExpanded.toggle(),Low,https://developer.apple.com/documentation/swiftui/withanimation(_:_:)
+34,Animation,Use .animation modifier,Apply animations to views,.animation(.spring()) on view,Manual animation timing,.animation(.easeInOut),CABasicAnimation equivalent,Low,
+35,Animation,Respect reduced motion,Check accessibility settings,Check accessibilityReduceMotion,Ignore motion preferences,@Environment(\.accessibilityReduceMotion),Always animate regardless,High,
+36,Preview,Use #Preview macro (Xcode 15+),Modern preview syntax,#Preview for view previews,PreviewProvider protocol,#Preview { ContentView() },struct ContentView_Previews: PreviewProvider,Low,
+37,Preview,Create multiple previews,Test different states and devices,Multiple previews for states,Single preview only,"#Preview(""Light"") { } #Preview(""Dark"") { }",Single preview configuration,Low,
+38,Preview,Use preview data,Dedicated preview mock data,Static preview data,Production data in previews,Item.preview for preview,Fetch real data in preview,Low,
+39,Performance,Avoid expensive body computations,Body should be fast to compute,Precompute in view model,Heavy computation in body,vm.computedValue in body,Complex calculation in body,High,
+40,Performance,Use Equatable views,Skip unnecessary view updates,Equatable for complex views,Default equality for all views,struct MyView: View Equatable,No Equatable conformance,Medium,
+41,Performance,Profile with Instruments,Measure before optimizing,Use SwiftUI Instruments,Guess at performance issues,Profile with Instruments,Optimize without measuring,Medium,
+42,Accessibility,Add accessibility labels,Describe UI elements,.accessibilityLabel for context,Missing labels,".accessibilityLabel(""Close button"")",Button without label,High,https://developer.apple.com/documentation/swiftui/view/accessibilitylabel(_:)-1d7jv
+43,Accessibility,Support Dynamic Type,Respect text size preferences,Scalable fonts and layouts,Fixed font sizes,.font(.body) with Dynamic Type,.font(.system(size: 16)),High,
+44,Accessibility,Use semantic views,Proper accessibility traits,Correct accessibilityTraits,Wrong semantic meaning,Button for actions Image for display,Image that acts like button,Medium,
+45,Testing,Use ViewInspector for testing,Third-party view testing,ViewInspector for unit tests,UI tests only,ViewInspector assertions,Only XCUITest,Medium,
+46,Testing,Test view models,Unit test business logic,XCTest for view model,Skip view model testing,Test ViewModel methods,No unit tests,Medium,
+47,Testing,Use preview as visual test,Previews catch visual regressions,Multiple preview configurations,No visual verification,Preview different states,Single preview only,Low,
+48,Architecture,Use MVVM pattern,Separate view and logic,ViewModel for business logic,Logic in View,ObservableObject ViewModel,@State for complex logic,Medium,
+49,Architecture,Keep views dumb,Views display view model state,View reads from ViewModel,Business logic in View,view.items from vm.items,Complex filtering in View,Medium,
+50,Architecture,Use dependency injection,Inject dependencies for testing,Initialize with dependencies,Hard-coded dependencies,init(service: ServiceProtocol),let service = RealService(),Medium,
diff --git a/.claude/skills/ui-ux-pro-max/data/stacks/threejs.csv b/.claude/skills/ui-ux-pro-max/data/stacks/threejs.csv
new file mode 100644
index 000000000..7035a9974
--- /dev/null
+++ b/.claude/skills/ui-ux-pro-max/data/stacks/threejs.csv
@@ -0,0 +1,54 @@
+Category,Guideline,Description,Do,Don't,Code Good,Code Bad,Severity,Docs URL
+Setup,CDN Version Lock,Always use Three.js r128 from cdnjs. It is the stable CDN baseline. Never use a floating 'latest' URL — it silently breaks when the CDN updates without warning.,Pin to the exact r128 cdnjs URL in every HTML file,Use unpkg@latest or any unversioned CDN URL that can silently update,"<script src=""https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js""></script>","<script src=""https://unpkg.com/three@latest""></script>",Critical,https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js
+Setup,CapsuleGeometry Does Not Exist in r128,THREE.CapsuleGeometry was introduced in r142. Using it on the r128 CDN throws 'CapsuleGeometry is not a constructor' and crashes the entire scene. Build a capsule from primitives instead.,Build a capsule from CylinderGeometry plus two SphereGeometry end caps,Call THREE.CapsuleGeometry on r128 — it is undefined and throws immediately,"const body = new THREE.Mesh(new THREE.CylinderGeometry(0.5, 0.5, 1, 16), mat); const topCap = new THREE.Mesh(new THREE.SphereGeometry(0.5, 16, 8), mat); const botCap = new THREE.Mesh(new THREE.SphereGeometry(0.5, 16, 8), mat); topCap.position.y = 0.5; botCap.position.y = -0.5; const group = new THREE.Group(); group.add(body, topCap, botCap);","const cap = new THREE.CapsuleGeometry(0.5, 1, 4, 8); // TypeError: CapsuleGeometry is not a constructor on r128",Critical,https://threejs.org/docs/#api/en/geometries/CapsuleGeometry
+Setup,OrbitControls Must Be Loaded Separately,OrbitControls is NOT bundled in the core Three.js r128 CDN file. It lives in examples/js and must be loaded from a separate cdnjs script tag. THREE.OrbitControls is undefined without it.,Load the OrbitControls script from cdnjs examples path before your scene script,Expect THREE.OrbitControls to exist after loading only the core Three.js CDN script,"<!-- Load AFTER core Three.js script --> <script src=""https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/examples/js/controls/OrbitControls.min.js""></script>","<!-- Core only loaded — OrbitControls undefined --> <script src=""https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js""></script>",Critical,https://cdnjs.com/libraries/three.js/r128
+Setup,Custom Drag Orbit Fallback,When OrbitControls cannot be loaded implement spherical orbit using mousedown/mousemove/mouseup. The key is rotating in spherical coordinates so both horizontal AND vertical drag work correctly.,Rotate camera in spherical coordinates so both axes respond correctly to drag,Move camera.position.x directly — vertical drag is silently ignored and the orbit is incorrect,"let dragging = false; let prev = { x: 0, y: 0 }; const radius = camera.position.length(); let theta = 0; let phi = Math.PI / 2; canvas.addEventListener('mousedown', () => dragging = true); canvas.addEventListener('mouseup', () => dragging = false); canvas.addEventListener('mousemove', e => { if (!dragging) return; theta -= (e.clientX - prev.x) * 0.005; phi = Math.max(0.1, Math.min(Math.PI - 0.1, phi - (e.clientY - prev.y) * 0.005)); camera.position.set(radius * Math.sin(phi) * Math.sin(theta), radius * Math.cos(phi), radius * Math.sin(phi) * Math.cos(theta)); camera.lookAt(scene.position); prev = { x: e.clientX, y: e.clientY }; });","let dragging = false; let prev = { x: 0, y: 0 }; canvas.addEventListener('mousemove', e => { if (!dragging) return; camera.position.x += (e.clientX - prev.x) * 0.005; camera.lookAt(scene.position); prev = { x: e.clientX, y: e.clientY }; }); // BUG: Y-drag ignored; orbit is a horizontal slide not a sphere",High,https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent
+Setup,ESM vs CDN Import,When using a bundler import Three.js as an ES module. When using CDN the THREE global is already available — do not import it again. Mixing both loads Three.js twice and causes subtle runtime errors.,Match import style to build environment: ESM import for bundlers; rely on the window.THREE global for CDN pages,Mix a CDN script tag with an ES module import in the same file,"// Bundler project (Vite / webpack): import * as THREE from 'three'; // CDN project — no import needed; THREE is already global after the script tag","<!-- CDN script --> <script src=""r128.cdn""></script> <script type=""module""> import * as THREE from 'three'; // loads Three.js twice — version mismatch risk </script>",Critical,https://threejs.org/docs/#manual/en/introduction/Installation
+Setup,Single Renderer Per Page,Create one WebGLRenderer instance for the lifetime of the page. Multiple renderers compete for the browser GPU context limit (8–16 contexts) and cause context-lost errors especially on mobile.,Reuse a single renderer and swap scene content instead of recreating the renderer,Create a new renderer on each component mount or scene transition,"const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true }); renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2)); renderer.setSize(canvas.clientWidth, canvas.clientHeight); // renderer lives for the page lifetime","function showScene() { const renderer = new THREE.WebGLRenderer(); document.body.appendChild(renderer.domElement); } showScene(); showScene(); // two GPU contexts — crashes on mobile",Critical,https://threejs.org/docs/#api/en/renderers/WebGLRenderer
+Setup,Pixel Ratio Cap at 2,Cap devicePixelRatio at 2. Retina displays report 3x or higher. Going from 2x to 3x multiplies pixel count by 2.25x with no visible quality improvement at normal viewing distance.,"Apply Math.min(window.devicePixelRatio, 2) — cap is at 2 not at 3",Pass window.devicePixelRatio directly without any cap,"renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));",renderer.setPixelRatio(window.devicePixelRatio); // 3x display = 9 pixels per CSS pixel = 2.25x GPU cost for zero quality gain,High,https://threejs.org/docs/#api/en/renderers/WebGLRenderer.setPixelRatio
+Setup,Alpha Canvas Plus CSS Background,Set alpha:true on the renderer and control the background color through CSS rather than a renderer clear color. This composites the canvas correctly over any HTML content behind it.,Set alpha:true on renderer and let body or a parent div provide the background color,Set a solid renderer clear color when the canvas must composite over HTML behind it,"const renderer = new THREE.WebGLRenderer({ alpha: true }); renderer.setClearColor(0x000000, 0); // fully transparent canvas // body { background: #0d0d0d; } handles the visible color","renderer.setClearColor(0x111827); // fully opaque — HTML behind the canvas is blocked",Medium,https://threejs.org/docs/#api/en/renderers/WebGLRenderer.setClearColor
+Camera,Aspect Ratio on Resize,Always update camera.aspect and call camera.updateProjectionMatrix() inside every resize handler. A stale aspect ratio causes the entire scene to appear stretched or squashed horizontally.,Update camera.aspect then call updateProjectionMatrix() on every resize,Let aspect ratio become stale after the browser window changes size,"window.addEventListener('resize', () => { camera.aspect = canvas.clientWidth / canvas.clientHeight; camera.updateProjectionMatrix(); renderer.setSize(canvas.clientWidth, canvas.clientHeight); });","// No resize handler — scene stretches to fill a wider window without correcting the projection",High,https://threejs.org/docs/#api/en/cameras/PerspectiveCamera
+Camera,FOV Range 45 to 75,Use a field of view between 45 and 75 degrees. Below 45 creates compressed telephoto distortion. Above 90 creates visible fisheye distortion at frame edges.,Start at 75 for general interactive scenes; use 45–55 for product close-ups,Use FOV above 90 or below 30 without a deliberate artistic reason,"const camera = new THREE.PerspectiveCamera(75, aspect, 0.1, 1000); // general const camera = new THREE.PerspectiveCamera(50, aspect, 0.1, 1000); // product shot","const camera = new THREE.PerspectiveCamera(120, aspect, 0.1, 1000); // fisheye distortion at all edges",Medium,https://threejs.org/docs/#api/en/cameras/PerspectiveCamera
+Camera,Explicit Position and lookAt,Always set an explicit camera position and call camera.lookAt() before the first render. The default camera at the origin pointing down -Z makes subjects at arbitrary coordinates invisible or tiny.,Set camera.position.set() and camera.lookAt() to frame the subject before the first render,Leave the camera at default position (0 0 0) with no lookAt — subject may be behind the camera or microscopic,"camera.position.set(0, 1.5, 5); camera.lookAt(new THREE.Vector3(0, 0, 0));","// No position or lookAt set — subject at y:2 is behind or above the default camera view",Medium,https://threejs.org/docs/#api/en/cameras/Camera.lookAt
+Camera,OrbitControls vs GSAP Camera Rig,Use OrbitControls for model viewers and exploratory scenes where the user needs free-look. Use a GSAP scroll-driven camera rig for product reveals or storytelling where the camera path must stay fixed.,Match camera control approach to the UX intent of the scene,Use OrbitControls for a scripted reveal — users can orbit away from the reveal before it completes,"// Scroll storytelling — GSAP controls the path: gsap.to(camera.position, { z: 2, scrollTrigger: { trigger: '.scene', scrub: 1 } }); // Free-look model viewer — OrbitControls: const controls = new THREE.OrbitControls(camera, renderer.domElement); controls.enableDamping = true; // call controls.update() in animate()","// Scripted product reveal: const controls = new THREE.OrbitControls(camera, renderer.domElement); // user can rotate away before the animation completes",High,https://threejs.org/docs/#examples/en/controls/OrbitControls
+Geometry,Never Create Geometry Per Frame,Creating a new geometry inside animate() allocates a fresh GPU buffer every frame and exhausts VRAM within seconds. Create all geometry exactly once before the loop starts. Use attribute mutation if positions must change per frame.,Create all geometry before the animation loop; mutate BufferAttribute arrays in-place if needed,Call any new XxxGeometry() constructor inside the animation loop,"const geo = new THREE.SphereGeometry(1, 32, 32); // created once const mesh = new THREE.Mesh(geo, mat); scene.add(mesh); const clock = new THREE.Clock(); function animate() { requestAnimationFrame(animate); mesh.rotation.y += clock.getDelta() * 0.8; // delta time renderer.render(scene, camera); }","function animate() { requestAnimationFrame(animate); const geo = new THREE.BoxGeometry(1, 1, 1); // NEW GPU buffer every frame — VRAM exhaustion }",Critical,https://threejs.org/docs/#api/en/core/BufferGeometry
+Geometry,Share Geometry Across Meshes,When multiple objects share the same shape create one geometry instance and pass it to every Mesh. Each Mesh gets its own transform and material while all share a single GPU buffer.,Create one geometry and pass the same reference to every Mesh constructor,Create a separate identical geometry inside a loop for each object,"const geo = new THREE.BoxGeometry(1, 1, 1); // one GPU buffer for (let i = 0; i < 200; i++) { const m = new THREE.Mesh(geo, mat); m.position.set(Math.random() * 10, 0, Math.random() * 10); scene.add(m); }","for (let i = 0; i < 200; i++) { const geo = new THREE.BoxGeometry(1, 1, 1); // 200 separate GPU buffers scene.add(new THREE.Mesh(geo, mat)); }",Critical,https://threejs.org/docs/#api/en/core/BufferGeometry
+Geometry,dispose on Scene Removal,Call geometry.dispose() and material.dispose() and texture.dispose() for every texture map when removing objects from the scene. Three.js never releases GPU resources automatically — they stay in VRAM until explicitly freed.,Dispose of geometry + material + every texture map before calling scene.remove(),Call scene.remove() alone without any dispose calls,"function removeMesh(mesh) { scene.remove(mesh); mesh.geometry.dispose(); if (mesh.material.map) mesh.material.map.dispose(); if (mesh.material.normalMap) mesh.material.normalMap.dispose(); mesh.material.dispose(); }","scene.remove(mesh); // geometry and all texture maps stay in GPU VRAM forever",Critical,https://threejs.org/docs/#api/en/core/BufferGeometry.dispose
+Geometry,Segment Count Budget,Use the minimum segment count that achieves the desired silhouette quality. Hero objects: 32–64 segments. Background objects: 8–16. Particle stand-ins: 6–8. High counts on background geometry waste GPU draw calls with zero visible benefit.,Apply a tiered segment budget based on the visual priority of each object in the scene,Default every sphere and cylinder to 64+ segments regardless of its role,"const bgSphere = new THREE.SphereGeometry(0.5, 8, 8); // background const heroSphere = new THREE.SphereGeometry(1, 64, 64); // foreground product","const particleSphere = new THREE.SphereGeometry(0.1, 64, 64); // 64 segments × 1000 particles = massive overdraw",Medium,https://threejs.org/docs/#api/en/geometries/SphereGeometry
+Geometry,BufferGeometry for Custom Vertex Data,For any custom shape use BufferGeometry with setAttribute('position' ...) and a Float32Array. The legacy THREE.Geometry class was removed in r125 and throws ReferenceError in r128.,Use THREE.BufferGeometry with a Float32Array position attribute for custom vertex data,Reference or instantiate the removed THREE.Geometry class,"const geo = new THREE.BufferGeometry(); geo.setAttribute('position', new THREE.BufferAttribute(new Float32Array(vertices), 3)); geo.setAttribute('normal', new THREE.BufferAttribute(new Float32Array(normals), 3));","const geo = new THREE.Geometry(); geo.vertices.push(new THREE.Vector3(0, 0, 0)); // ReferenceError: Geometry is not defined in r128",High,https://threejs.org/docs/#api/en/core/BufferGeometry
+Materials,MeshBasicMaterial vs MeshStandardMaterial,MeshBasicMaterial ignores all lights and is significantly cheaper — use it for UI overlays HUDs and flat-colored decorative elements. MeshStandardMaterial is PBR-accurate and requires lights. Never use StandardMaterial where BasicMaterial suffices.,Use MeshBasicMaterial for any object that does not need lighting; use MeshStandardMaterial for physical objects,Apply MeshStandardMaterial to flat UI elements that never receive light — lights still run for them,"const uiMat = new THREE.MeshBasicMaterial({ color: 0xffffff }); // no lighting cost const physMat = new THREE.MeshStandardMaterial({ color: 0x4f46e5, roughness: 0.4, metalness: 0.6 });","const mat = new THREE.MeshStandardMaterial({ color: 0xffffff }); // on a 2D HUD card — lighting calculation runs with no visual benefit",Medium,https://threejs.org/docs/#api/en/materials/MeshStandardMaterial
+Materials,Share Material Instances,Share one material instance across all meshes that have identical properties. Call mat.clone() only when individual meshes genuinely need different property values. Duplicate materials waste GPU VRAM.,Assign the same material reference to all meshes with identical visual properties,Create a new material inside a loop for objects that look identical,"const mat = new THREE.MeshStandardMaterial({ color: 0x4f46e5, roughness: 0.5 }); meshA.material = mat; meshB.material = mat; meshC.material = mat; // one GPU material","for (const m of meshes) { m.material = new THREE.MeshStandardMaterial({ color: 0x4f46e5 }); } // N redundant GPU materials",High,https://threejs.org/docs/#api/en/materials/Material
+Materials,Dispose Textures Explicitly,Textures are the single largest consumer of GPU VRAM in most Three.js scenes. Call texture.dispose() when switching scenes or removing objects — Three.js does not garbage-collect GPU resources automatically.,Track all loaded textures and call dispose() on each one during scene teardown or on object removal,Load textures without any cleanup path — they persist in VRAM for the entire page lifetime,"const tex = new THREE.TextureLoader().load('img.jpg'); mesh.material.map = tex; // on teardown: tex.dispose(); mesh.material.dispose();","const tex = new THREE.TextureLoader().load('img.jpg'); scene.remove(mesh); // tex occupies GPU VRAM until page reload",High,https://threejs.org/docs/#api/en/textures/Texture.dispose
+Lighting,Ambient Plus Directional Minimum,Any scene using MeshStandardMaterial or MeshPhongMaterial requires at minimum one AmbientLight (fill) and one DirectionalLight (shading direction). Without both the objects render as solid black — the material is there but no light reaches it.,Add AmbientLight for fill and DirectionalLight for shading whenever PBR or Phong materials are used,Use MeshStandardMaterial without adding any lights to the scene,"scene.add(new THREE.AmbientLight(0xffffff, 0.4)); const dirLight = new THREE.DirectionalLight(0xffffff, 1.0); dirLight.position.set(5, 10, 7.5); scene.add(dirLight);","const mesh = new THREE.Mesh(geo, new THREE.MeshStandardMaterial({ color: 0x4f46e5 })); scene.add(mesh); // renders completely black — no lights in scene",Critical,https://threejs.org/docs/#api/en/lights/DirectionalLight
+Lighting,Enable shadowMap Before castShadow,renderer.shadowMap.enabled = true must be set before any castShadow or receiveShadow flags. Without it the shadow map is never allocated and all shadow flags are silently ignored.,Set renderer.shadowMap.enabled = true first then set castShadow and receiveShadow on lights and meshes,Set castShadow on a light or mesh without enabling renderer.shadowMap.enabled — shadows never render,"renderer.shadowMap.enabled = true; renderer.shadowMap.type = THREE.PCFSoftShadowMap; dirLight.castShadow = true; dirLight.shadow.mapSize.width = 2048; dirLight.shadow.mapSize.height = 2048; heroMesh.castShadow = true; ground.receiveShadow = true;","dirLight.castShadow = true; heroMesh.castShadow = true; // renderer.shadowMap.enabled never set — shadows silently do not render",High,https://threejs.org/docs/#api/en/renderers/WebGLRenderer.shadowMap
+Lighting,Selective Shadow Casting,Shadow map rendering redraws the entire scene from the light's perspective every frame. Enable castShadow only on the primary directional light and receiveShadow only on hero meshes and the ground plane.,Enable shadows only on the key light and the most important meshes,Enable castShadow and receiveShadow on every object in the scene including particles,"renderer.shadowMap.enabled = true; renderer.shadowMap.type = THREE.PCFSoftShadowMap; dirLight.castShadow = true; heroMesh.castShadow = true; ground.receiveShadow = true; // particles and background meshes: no shadow flags","for (const m of allMeshes) { m.castShadow = true; m.receiveShadow = true; } // shadow map pass over particle system — expensive with no visible gain",High,https://threejs.org/docs/#api/en/renderers/WebGLRenderer.shadowMap
+Lighting,Skip Lights for MeshBasicMaterial,MeshBasicMaterial completely ignores all scene lights. Adding lights solely to illuminate BasicMaterial objects wastes a light pass on every frame with zero visible effect.,Omit lights entirely when every material in the scene is MeshBasicMaterial,Add AmbientLight and DirectionalLight to a scene that uses only MeshBasicMaterial,"// Scene uses only MeshBasicMaterial — no lights needed const mat = new THREE.MeshBasicMaterial({ color: 0x00ffff }); const mesh = new THREE.Mesh(geo, mat); scene.add(mesh); // MeshBasicMaterial is always fully lit by definition","scene.add(new THREE.AmbientLight(0xffffff, 1.0)); // wasted per-frame light pass — BasicMaterial ignores it entirely",Low,https://threejs.org/docs/#api/en/materials/MeshBasicMaterial
+Raycasting,Single Shared Raycaster,Create exactly one Raycaster instance outside all event handlers. Store mouse coordinates in pointermove (cheap). Call setFromCamera and intersectObjects together inside the animate() loop — once per frame instead of once per mouse event.,Create one Raycaster; store mouse in pointermove; call setFromCamera + intersectObjects inside animate(),Create a new THREE.Raycaster() inside a mousemove handler or call setFromCamera inside the event listener,"const raycaster = new THREE.Raycaster(); const mouse = new THREE.Vector2(); canvas.addEventListener('pointermove', e => { // only store coords — no raycasting here mouse.x = (e.clientX / canvas.clientWidth) * 2 - 1; mouse.y = -(e.clientY / canvas.clientHeight) * 2 + 1; }); // setFromCamera and intersectObjects run once per frame in animate()","window.addEventListener('mousemove', e => { const rc = new THREE.Raycaster(); // new allocation per event rc.setFromCamera(mouse, camera); rc.intersectObjects(targets, true); // fires 200+ times/sec });",Critical,https://threejs.org/docs/#api/en/core/Raycaster
+Raycasting,NDC Mouse Coordinates,Raycasting requires mouse in Normalized Device Coordinates: X from -1 (left) to +1 (right) and Y from +1 (top) to -1 (bottom). The Y axis is inverted relative to screen space. A missing negation on Y causes all raycasts to miss or hit the wrong objects.,Apply the full NDC formula — including the negation on the Y axis,Forget to negate Y — raycasting appears to work but hits objects mirrored vertically,"mouse.x = (e.clientX / canvas.clientWidth) * 2 - 1; mouse.y = -(e.clientY / canvas.clientHeight) * 2 + 1; // Y is INVERTED","mouse.x = (e.clientX / canvas.clientWidth) * 2 - 1; mouse.y = (e.clientY / canvas.clientHeight) * 2 - 1; // BUG: Y not negated — raycasting is mirrored",Critical,https://threejs.org/docs/#api/en/core/Raycaster.setFromCamera
+Raycasting,setFromCamera and intersectObjects in animate,Call raycaster.setFromCamera(mouse camera) and then raycaster.intersectObjects(targets true) inside the animate() loop. setFromCamera must come before intersectObjects every frame — without it the raycaster uses a stale ray direction.,Call setFromCamera then intersectObjects in order inside every animate() frame,Call intersectObjects without calling setFromCamera first — the raycaster uses a stale or zero ray,"function animate() { requestAnimationFrame(animate); raycaster.setFromCamera(mouse, camera); // update ray direction first const hits = raycaster.intersectObjects(targets, true); // then test intersections if (hits.length > 0) { document.body.style.cursor = 'pointer'; } else { document.body.style.cursor = 'auto'; } renderer.render(scene, camera); }","function animate() { requestAnimationFrame(animate); const hits = raycaster.intersectObjects(targets, true); // BUG: setFromCamera never called — stale ray — hits is always empty renderer.render(scene, camera); }",Critical,https://threejs.org/docs/#api/en/core/Raycaster
+Raycasting,Recursive Flag for Groups and GLTF,Pass true as the second argument to intersectObjects when testing Groups or GLTF loaded models. Geometry lives on child Mesh objects — without recursive:true the parent group is tested but has no geometry and hits is always empty.,Use intersectObjects(targets true) for Groups or any loaded model,Raycast against a parent Group without the recursive flag,"const hits = raycaster.intersectObjects(scene.children, true); // catches all descendant meshes","const hits = raycaster.intersectObjects([modelGroup]); // recursive defaults to false — misses all children",High,https://threejs.org/docs/#api/en/core/Raycaster.intersectObjects
+Raycasting,Cursor Feedback on Hover,Set document.body.style.cursor = 'pointer' when intersections are found and reset to 'auto' when none are found. Without cursor feedback users cannot discover that 3D objects are interactive.,Update cursor to pointer on hit; reset to auto on miss in the same animate loop block,Run raycasting and read hits without ever updating the cursor style,"if (hits.length > 0) { document.body.style.cursor = 'pointer'; } else { document.body.style.cursor = 'auto'; }","raycaster.setFromCamera(mouse, camera); raycaster.intersectObjects(targets, true); // hits ignored — cursor never changes — objects feel non-interactive",Medium,https://developer.mozilla.org/en-US/docs/Web/CSS/cursor
+Animation,requestAnimationFrame Loop Only,Drive the render loop exclusively with requestAnimationFrame or renderer.setAnimationLoop(). Never use setInterval or setTimeout — they are not synchronized to the display refresh rate and keep running when the tab is hidden draining battery.,Use requestAnimationFrame or renderer.setAnimationLoop() as the sole render loop driver,Use setInterval or setTimeout for render timing,"function animate() { requestAnimationFrame(animate); renderer.render(scene, camera); } animate();","setInterval(() => renderer.render(scene, camera), 16); // not display-synced; runs at full speed even when tab is hidden",Critical,https://threejs.org/docs/#api/en/renderers/WebGLRenderer.setAnimationLoop
+Animation,THREE.Clock for Delta Time,"Use THREE.Clock and clock.getDelta() for all time-based motion. A hardcoded increment like += 0.01 runs at 2x speed on 120Hz displays and at unpredictable speed when frames drop under load. CRITICAL: call getDelta() exactly ONCE per animate() frame and store the result in a local dt variable. getDelta() resets the internal clock on every call — a second call in the same frame always returns ~0, silently breaking any animation block that uses it.","Call clock.getDelta() once at the top of animate(); store result in dt; reuse dt everywhere in that frame","Call clock.getDelta() more than once per frame or inside a helper called from animate()","const clock = new THREE.Clock(); function animate() { requestAnimationFrame(animate); const dt = clock.getDelta(); // called ONCE — reuse dt below mesh.rotation.y += dt * 0.8; particles.rotation.y += dt * 0.1; // reuse dt, not a second getDelta() renderer.render(scene, camera); }","function animate() { requestAnimationFrame(animate); mesh.rotation.y += 0.01; // 0.01 rad/frame — runs 2x faster on 120Hz than on 60Hz }",High,https://threejs.org/docs/#api/en/core/Clock
+Animation,Lerp for Smooth Pointer Follow,Use value += (target - value) * alpha each frame to smoothly interpolate toward a moving target. An alpha of 0.03–0.1 produces organic easing for camera follow pointer-tracking and hover scale effects without requiring GSAP.,Apply the lerp formula each frame with a small alpha for smooth organic motion,Snap a value directly to the target producing an instant jarring jump,"// In animate(): cameraTargetX = mouse.x * 3; camera.position.x += (cameraTargetX - camera.position.x) * 0.05; camera.position.y += (cameraTargetY - camera.position.y) * 0.05; camera.lookAt(scene.position);","// In animate(): camera.position.x = mouse.x * 3; // instant snap — jarring with no easing",Medium,https://threejs.org/docs/#api/en/math/MathUtils.lerp
+Animation,GSAP for Multi-Step Sequences,Use GSAP timelines for any animation with more than two sequential steps or for scroll-linked camera paths. GSAP timelines can be paused reversed and scrubbed — far more maintainable than boolean state machines.,Use GSAP timelines for sequences with more than two steps and for scroll-driven animations,Implement multi-step sequences with boolean flags and manual frame counters,"const tl = gsap.timeline({ defaults: { ease: 'power2.out' } }); tl.from(mesh.position, { y: -3, duration: 1 }) .to(mesh.rotation, { y: Math.PI, duration: 1 }, '-=0.3') .to(camera.position, { z: 2, duration: 1.5 });","let step = 0; let t = 0; function animate() { if (step === 0 && (t += 0.01) >= 1) step = 1; } // grows unmanageable with 3+ steps",High,https://gsap.com/docs/v3/GSAP/Timeline/
+Animation,Pause Render Loop on Tab Hidden,Use renderer.setAnimationLoop() as the loop driver so you can pass null to pause and a function to resume. Continuous rendering in a hidden tab wastes CPU GPU and battery with no user benefit.,Use renderer.setAnimationLoop(animate) to drive the loop; pass null to pause on visibilitychange,Drive with internal requestAnimationFrame and never stop the loop when the tab is hidden,"renderer.setAnimationLoop(animate); // use setAnimationLoop as the driver — not requestAnimationFrame inside animate function animate() { const dt = clock.getDelta(); renderer.render(scene, camera); } document.addEventListener('visibilitychange', () => { if (document.hidden) renderer.setAnimationLoop(null); else renderer.setAnimationLoop(animate); });","function animate() { requestAnimationFrame(animate); // self-referencing RAF cannot be stopped externally renderer.render(scene, camera); } animate(); // runs forever in background tab — drains battery",High,https://developer.mozilla.org/en-US/docs/Web/API/Page_Visibility_API
+GSAP,Load GSAP Before Scene Script,Load GSAP from its own CDN script tag before your scene script. In bundler projects install via npm and import. GSAP is a completely separate library from Three.js — never try to import it from the Three.js package.,Load GSAP CDN before the scene script; or npm install gsap and import separately,Import gsap from three or expect it to be defined without a separate load,"<!-- CDN: load GSAP before your scene script --> <script src=""https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js""></script> <!-- Bundler: --> // import gsap from 'gsap'; import { ScrollTrigger } from 'gsap/ScrollTrigger';","import gsap from 'three'; // undefined — GSAP has nothing to do with Three.js",Critical,https://gsap.com/docs/v3/Installation
+GSAP,Register ScrollTrigger Before Use,Call gsap.registerPlugin(ScrollTrigger) once at the top of your script before any scrollTrigger config object. Without registration the ScrollTrigger name is undefined and the tween throws immediately.,Call gsap.registerPlugin(ScrollTrigger) as the first line before any gsap.to/from/timeline with scrollTrigger,Include scrollTrigger config in gsap.to() calls without first registering the plugin,"gsap.registerPlugin(ScrollTrigger); gsap.to(camera.position, { z: 2, scrollTrigger: { trigger: '.hero-section', scrub: 1 } });","gsap.to(mesh.position, { scrollTrigger: { trigger: '.section', scrub: true } }); // TypeError: ScrollTrigger is not a constructor — not registered",Critical,https://gsap.com/docs/v3/Plugins/ScrollTrigger/
+GSAP,Tween Three.js Properties Directly,GSAP can tween any numeric JavaScript property including mesh.position.x mesh.rotation.y and material.opacity. No wrapper or adaptor is needed. Note: to tween material.opacity the material must have transparent:true set before the tween starts.,Pass Three.js object properties directly to gsap.to(); set transparent:true before tweening opacity,Use a plain proxy object then manually copy values to Three.js properties every frame,"gsap.to(mesh.rotation, { y: Math.PI * 2, duration: 2, ease: 'power1.inOut' }); mesh.material.transparent = true; // required before tweening opacity gsap.to(mesh.material, { opacity: 0, duration: 1 });","const tw = { v: 0 }; gsap.to(tw, { v: Math.PI * 2, onUpdate: () => mesh.rotation.y = tw.v }); // unnecessary proxy wrapper",Medium,https://gsap.com/docs/v3/GSAP/gsap.to()
+GSAP,scrub for Scroll-Driven Camera Path,Use scrub:true or scrub:1 to link camera movement continuously to scroll position as a 0–1 ratio. scrub:1 adds a 1-second lag for cinematic smoothness. onEnter/onLeave fire only once and create jarring snaps — not the right tool for a camera path.,Use scrub:1 for any scroll-controlled camera movement,Use onEnter or onLeave callbacks for camera motion — they snap instead of scrubbing,"gsap.registerPlugin(ScrollTrigger); gsap.to(camera.position, { x: 5, y: 2, z: 0, ease: 'none', scrollTrigger: { trigger: '.canvas-wrapper', start: 'top top', end: 'bottom bottom', scrub: 1 } });","gsap.to(camera.position, { z: 0, scrollTrigger: { trigger: '.section', onEnter: () => {} } }); // fires once at scroll threshold — not a continuous scrub",High,https://gsap.com/docs/v3/Plugins/ScrollTrigger/
+Performance,InstancedMesh for Repeated Objects,Use THREE.InstancedMesh when rendering 50 or more identical objects. It submits all N transforms in one draw call instead of N draw calls and reduces CPU-GPU communication overhead dramatically.,Use InstancedMesh for any group of 50+ meshes sharing the same geometry and material,Create 50+ separate Mesh objects with the same geometry and material,"const COUNT = 500; const iMesh = new THREE.InstancedMesh(geo, mat, COUNT); const matrix = new THREE.Matrix4(); for (let i = 0; i < COUNT; i++) { matrix.setPosition(Math.random()*10, Math.random()*10, Math.random()*10); iMesh.setMatrixAt(i, matrix); } iMesh.instanceMatrix.needsUpdate = true; scene.add(iMesh);","for (let i = 0; i < 500; i++) { scene.add(new THREE.Mesh(geo, mat)); } // 500 separate draw calls per frame",High,https://threejs.org/docs/#api/en/objects/InstancedMesh
+Performance,Tone Mapping and sRGB Encoding,Enable ACESFilmicToneMapping and sRGBEncoding on the renderer for accurate perceptual color. Without tone mapping colors appear washed out or over-saturated. These are renderer properties set after construction and take effect immediately.,Set renderer.toneMapping and renderer.outputEncoding after construction for all production scenes,Leave tone mapping and output encoding at defaults when the scene targets realistic visuals,"renderer.toneMapping = THREE.ACESFilmicToneMapping; renderer.toneMappingExposure = 1.0; renderer.outputEncoding = THREE.sRGBEncoding; // correct for r128","const renderer = new THREE.WebGLRenderer(); // defaults: NoToneMapping + LinearEncoding — colors appear flat and incorrect",Medium,https://threejs.org/docs/#api/en/renderers/WebGLRenderer.toneMapping
+Performance,antialias Set at Construction Only,The antialias option can only be set at WebGLRenderer construction time. Setting renderer.antialias after construction has absolutely no effect — the WebGL context is already created without it. Decide before instantiating.,Set antialias:true inside the WebGLRenderer constructor options object,Construct the renderer without antialias then try to enable it by assigning the property,"const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true }); // antialias baked into the WebGL context","const renderer = new THREE.WebGLRenderer(); renderer.antialias = true; // no effect — context created without AA — edges remain aliased",High,https://threejs.org/docs/#api/en/renderers/WebGLRenderer
+Performance,FogExp2 for Depth and Far Culling,Use scene.fog to create atmospheric depth. As a secondary benefit objects that disappear into fog before the far plane stop contributing to draw calls — useful in scenes with large view distances.,Add FogExp2 to scenes with view distances above 100 units for both visual atmosphere and implicit far culling,Ignore fog in scenes with far:1000+ and many distant objects that contribute tiny pixels per draw call,"scene.fog = new THREE.FogExp2(0x0a0a0a, 0.02); // exponential — density feels more natural than linear","// far: 2000 with no fog — hundreds of distant objects too small to see still cost draw calls per frame",Low,https://threejs.org/docs/#api/en/scenes/FogExp2
+Particles,BufferGeometry Plus Points for Particle Systems,Build all particle systems with BufferGeometry plus a Float32Array position attribute rendered as Points. Never use individual Mesh objects as particles — they cannot scale past a few hundred with good performance.,Use Points plus BufferGeometry for all particle effects,Create hundreds of individual Mesh objects to simulate a particle system,"const COUNT = 3000; const geo = new THREE.BufferGeometry(); const pos = new Float32Array(COUNT * 3); for (let i = 0; i < COUNT * 3; i++) pos[i] = (Math.random() - 0.5) * 20; geo.setAttribute('position', new THREE.BufferAttribute(pos, 3)); const particles = new THREE.Points(geo, new THREE.PointsMaterial({ size: 0.05, color: 0xffffff })); scene.add(particles);","for (let i = 0; i < 500; i++) { scene.add(new THREE.Mesh(new THREE.SphereGeometry(0.05, 8, 8), mat)); } // 500 separate draw calls per frame",High,https://threejs.org/docs/#api/en/objects/Points
+Particles,Particle Count Ceiling,Start particle systems at 1000–3000 particles. Beyond 50000 causes sustained frame drops on mid-range mobile. Always test on a real device before increasing the count — desktop and mobile GPU performance ratios can be 10:1.,Start at 3000 particles and profile on actual mobile hardware before raising the limit,Set particle count at 100000 or higher without any mobile profiling,"const COUNT = 3000; // safe mobile baseline — profile before going higher const pos = new Float32Array(COUNT * 3);","const COUNT = 150000; // 60fps on desktop — 8fps on a mid-range Android phone",High,https://threejs.org/docs/#api/en/objects/Points
+Particles,needsUpdate After Buffer Mutation,After mutating any BufferAttribute array values per frame you must set geometry.attributes.position.needsUpdate = true so Three.js re-uploads the changed buffer to the GPU. Without it the GPU still uses the old data and particles appear completely frozen.,Set needsUpdate = true on the position attribute after every per-frame mutation of the array,Mutate the Float32Array values without flagging needsUpdate — positions update in JS but not on the GPU,"// In animate(): const pos = geo.attributes.position.array; for (let i = 0; i < pos.length; i += 3) { pos[i + 1] += Math.sin(clock.getElapsedTime() + i) * 0.001; // Y component } geo.attributes.position.needsUpdate = true; // GPU re-upload","// In animate(): pos[1] += 0.001; // JS array updated — GPU buffer is stale — particles do not move",Critical,https://threejs.org/docs/#api/en/core/BufferAttribute.needsUpdate
+Responsive,Canvas Dimensions Not Window,Size the renderer and camera to the canvas element's clientWidth and clientHeight — not window.innerWidth and innerHeight. This is correct when the canvas is inside a flex or grid container that does not fill the full viewport.,Use canvas.clientWidth and canvas.clientHeight for all renderer and camera sizing,Hardcode renderer size to window.innerWidth/innerHeight when the canvas may be inside a container,"renderer.setSize(canvas.clientWidth, canvas.clientHeight); camera.aspect = canvas.clientWidth / canvas.clientHeight; camera.updateProjectionMatrix();","renderer.setSize(window.innerWidth, window.innerHeight); // wrong when canvas lives inside a sidebar or grid column",High,https://threejs.org/docs/#api/en/renderers/WebGLRenderer.setSize
+Responsive,ResizeObserver Over window resize Event,Use ResizeObserver on the canvas container instead of the window resize event. ResizeObserver fires when the container element changes size independently of the browser window — common in split-pane layouts and sidebar collapsing.,Attach ResizeObserver to the canvas parent element for accurate container-aware resize detection,Use only window.addEventListener('resize') for canvas sizing when the canvas is not fullscreen,"const ro = new ResizeObserver(entries => { const { width, height } = entries[0].contentRect; renderer.setSize(width, height); camera.aspect = width / height; camera.updateProjectionMatrix(); }); ro.observe(canvas.parentElement);","window.addEventListener('resize', () => { renderer.setSize(window.innerWidth, window.innerHeight); }); // misses container-only resize events in split-pane UIs",Medium,https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver
+Responsive,Touch Events for Mobile Interaction,Add touchstart and touchmove listeners alongside mouse events so the scene remains interactive on mobile. Normalize touch coordinates to the same NDC range as mouse events and pass passive:false on touchmove if you call preventDefault.,Handle both mouse and touch input for any interactive 3D scene,Add only mouse event listeners and leave touch users with no interaction,"canvas.addEventListener('touchmove', e => { e.preventDefault(); const t = e.touches[0]; mouse.x = (t.clientX / canvas.clientWidth) * 2 - 1; mouse.y = -(t.clientY / canvas.clientHeight) * 2 + 1; }, { passive: false }); canvas.addEventListener('touchstart', e => { e.preventDefault(); }, { passive: false });","canvas.addEventListener('mousemove', handleMouse); // touch events unhandled — mobile users get no interaction",Medium,https://developer.mozilla.org/en-US/docs/Web/API/Touch_events
+Accessibility,prefers-reduced-motion,"Check window.matchMedia('(prefers-reduced-motion: reduce)') before starting any auto-rotation, particle animation, or camera movement. Users who enable this OS preference have motion sickness or vestibular disorders. IMPORTANT: reading .matches once at page load is a one-time snapshot — if the user changes their OS accessibility setting mid-session the scene will not react. Attach a 'change' listener to the MediaQueryList so noMotion stays in sync at runtime.","Use matchMedia.addEventListener('change') to keep noMotion reactive; gate all auto-animation on the live value","Read .matches once at startup and never update it — the scene ignores mid-session OS setting changes","const mq = window.matchMedia('(prefers-reduced-motion: reduce)'); let noMotion = mq.matches; mq.addEventListener('change', e => { noMotion = e.matches; }); // In animate(): if (!noMotion) { mesh.rotation.y += dt * 0.8; particles.rotation.y += dt * 0.1; }","const noMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches; // one-time snapshot — mid-session OS change is ignored entirely",High,https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion
+Accessibility,Canvas aria-label,Add role='img' and a descriptive aria-label to renderer.domElement after appending it to the DOM. Screen readers receive no information from a WebGL canvas — the aria-label is the only description they can announce to users.,Set role='img' and a meaningful aria-label on renderer.domElement before or after appending it,Append the canvas to the DOM with no accessibility attributes — invisible to screen readers,"renderer.domElement.setAttribute('role', 'img'); renderer.domElement.setAttribute('aria-label', 'Interactive 3D product viewer. Drag to rotate. Scroll to zoom.'); document.body.appendChild(renderer.domElement);","document.body.appendChild(renderer.domElement); // bare canvas — screen readers announce nothing",Medium,https://developer.mozilla.org/en-US/docs/Web/HTML/Element/canvas#accessibility_concerns
+Production,Bundler Stack for Production,For production use Three.js via npm plus Vite. You get full tree-shaking reduced bundle size access to the complete examples/jsm library including OrbitControls GLTFLoader and EffectComposer and TypeScript support.,Use npm install three plus Vite or Webpack for any production client-facing project,Serve raw CDN script tags in a production application that needs tree-shaking or TypeScript,"npm install three gsap // then in your JS: import * as THREE from 'three'; import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'; import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';","<!-- In a Vite/React production build: --> <script src=""https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js""></script> // no tree-shaking — entire Three.js ships",Medium,https://threejs.org/docs/#manual/en/introduction/Installation
+Production,GLTFLoader with scene traverse,Load 3D models using GLTFLoader and traverse gltf.scene to configure castShadow receiveShadow and material overrides on all child Mesh nodes. Calling scene.add(gltf.scene) alone silently skips all shadow and material configuration.,Use GLTFLoader and traverse the entire gltf.scene graph to set up shadows and materials on every Mesh child,Load a GLTF model and pass gltf.scene directly to scene.add without traversing child meshes,"import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js'; const loader = new GLTFLoader(); loader.load('model.glb', gltf => { gltf.scene.traverse(child => { if (child.isMesh) { child.castShadow = true; child.receiveShadow = true; } }); scene.add(gltf.scene); });","loader.load('model.glb', gltf => { scene.add(gltf.scene); // shadows and material setup silently skipped on all children });",Medium,https://threejs.org/docs/#examples/en/loaders/GLTFLoader
+Production,LOD for Distance-Based Detail,Use THREE.LOD to automatically swap high-detail and low-detail geometry as objects move closer or farther from the camera. This maintains frame rate in scenes with many objects spread across a large depth range.,Use THREE.LOD to reduce triangle count on distant objects automatically,Render the same high-polygon geometry for every object regardless of its distance from the camera,"const lod = new THREE.LOD(); lod.addLevel(highDetailMesh, 0); // used when < 15 units away lod.addLevel(medDetailMesh, 15); // 15–50 units lod.addLevel(lowDetailMesh, 50); // 50+ units scene.add(lod);","scene.add(highDetailMesh); // 64k-triangle mesh rendered at full cost whether 1 unit or 100 units from camera",Medium,https://threejs.org/docs/#api/en/objects/LOD
diff --git a/.claude/skills/ui-ux-pro-max/data/stacks/vue.csv b/.claude/skills/ui-ux-pro-max/data/stacks/vue.csv
new file mode 100644
index 000000000..86b05cffd
--- /dev/null
+++ b/.claude/skills/ui-ux-pro-max/data/stacks/vue.csv
@@ -0,0 +1,50 @@
+No,Category,Guideline,Description,Do,Don't,Code Good,Code Bad,Severity,Docs URL
+1,Composition,Use Composition API for new projects,Composition API offers better TypeScript support and logic reuse,<script setup> for components,Options API for new projects,<script setup>,export default { data() },Medium,https://vuejs.org/guide/extras/composition-api-faq.html
+2,Composition,Use script setup syntax,Cleaner syntax with automatic exports,<script setup> with defineProps,setup() function manually,<script setup>,<script> setup() { return {} },Low,https://vuejs.org/api/sfc-script-setup.html
+3,Reactivity,Use ref for primitives,ref() for primitive values that need reactivity,ref() for strings numbers booleans,reactive() for primitives,const count = ref(0),const count = reactive(0),Medium,https://vuejs.org/guide/essentials/reactivity-fundamentals.html
+4,Reactivity,Use reactive for objects,reactive() for complex objects and arrays,reactive() for objects with multiple properties,ref() for complex objects,const state = reactive({ user: null }),const state = ref({ user: null }),Medium,
+5,Reactivity,Access ref values with .value,Remember .value in script unwrap in template,Use .value in script,Forget .value in script,count.value++,count++ (in script),High,
+6,Reactivity,Use computed for derived state,Computed properties cache and update automatically,computed() for derived values,Methods for derived values,const doubled = computed(() => count.value * 2),const doubled = () => count.value * 2,Medium,https://vuejs.org/guide/essentials/computed.html
+7,Reactivity,Use shallowRef for large objects,Avoid deep reactivity for performance,shallowRef for large data structures,ref for large nested objects,const bigData = shallowRef(largeObject),const bigData = ref(largeObject),Medium,https://vuejs.org/api/reactivity-advanced.html#shallowref
+8,Watchers,Use watchEffect for simple cases,Auto-tracks dependencies,watchEffect for simple reactive effects,watch with explicit deps when not needed,watchEffect(() => console.log(count.value)),"watch(count, (val) => console.log(val))",Low,https://vuejs.org/guide/essentials/watchers.html
+9,Watchers,Use watch for specific sources,Explicit control over what to watch,watch with specific refs,watchEffect for complex conditional logic,"watch(userId, fetchUser)",watchEffect with conditionals,Medium,
+10,Watchers,Clean up side effects,Return cleanup function in watchers,Return cleanup in watchEffect,Leave subscriptions open,watchEffect((onCleanup) => { onCleanup(unsub) }),watchEffect without cleanup,High,
+11,Props,Define props with defineProps,Type-safe prop definitions,defineProps with TypeScript,Props without types,defineProps<{ msg: string }>(),defineProps(['msg']),Medium,https://vuejs.org/guide/typescript/composition-api.html#typing-component-props
+12,Props,Use withDefaults for default values,Provide defaults for optional props,withDefaults with defineProps,Defaults in destructuring,"withDefaults(defineProps<Props>(), { count: 0 })",const { count = 0 } = defineProps(),Medium,
+13,Props,Avoid mutating props,Props should be read-only,Emit events to parent for changes,Direct prop mutation,"emit('update:modelValue', newVal)",props.modelValue = newVal,High,
+14,Emits,Define emits with defineEmits,Type-safe event emissions,defineEmits with types,Emit without definition,defineEmits<{ change: [id: number] }>(),"emit('change', id) without define",Medium,https://vuejs.org/guide/typescript/composition-api.html#typing-component-emits
+15,Emits,Use v-model for two-way binding,Simplified parent-child data flow,v-model with modelValue prop,:value + @input manually,"<Child v-model=""value""/>","<Child :value=""value"" @input=""value = $event""/>",Low,https://vuejs.org/guide/components/v-model.html
+16,Lifecycle,Use onMounted for DOM access,DOM is ready in onMounted,onMounted for DOM operations,Access DOM in setup directly,onMounted(() => el.value.focus()),el.value.focus() in setup,High,https://vuejs.org/api/composition-api-lifecycle.html
+17,Lifecycle,Clean up in onUnmounted,Remove listeners and subscriptions,onUnmounted for cleanup,Leave listeners attached,onUnmounted(() => window.removeEventListener()),No cleanup on unmount,High,
+18,Lifecycle,Avoid onBeforeMount for data,Use onMounted or setup for data fetching,Fetch in onMounted or setup,Fetch in onBeforeMount,onMounted(async () => await fetchData()),onBeforeMount(async () => await fetchData()),Low,
+19,Components,Use single-file components,Keep template script style together,.vue files for components,Separate template/script files,Component.vue with all parts,Component.js + Component.html,Low,
+20,Components,Use PascalCase for components,Consistent component naming,PascalCase in imports and templates,kebab-case in script,<MyComponent/>,<my-component/>,Low,https://vuejs.org/style-guide/rules-strongly-recommended.html
+21,Components,Prefer composition over mixins,Composables replace mixins,Composables for shared logic,Mixins for code reuse,const { data } = useApi(),mixins: [apiMixin],Medium,
+22,Composables,Name composables with use prefix,Convention for composable functions,useFetch useAuth useForm,getData or fetchApi,export function useFetch(),export function fetchData(),Medium,https://vuejs.org/guide/reusability/composables.html
+23,Composables,Return refs from composables,Maintain reactivity when destructuring,Return ref values,Return reactive objects that lose reactivity,return { data: ref(null) },return reactive({ data: null }),Medium,
+24,Composables,Accept ref or value params,Use toValue for flexible inputs,toValue() or unref() for params,Only accept ref or only value,const val = toValue(maybeRef),const val = maybeRef.value,Low,https://vuejs.org/api/reactivity-utilities.html#tovalue
+25,Templates,Use v-bind shorthand,Cleaner template syntax,:prop instead of v-bind:prop,Full v-bind syntax,"<div :class=""cls"">","<div v-bind:class=""cls"">",Low,
+26,Templates,Use v-on shorthand,Cleaner event binding,@event instead of v-on:event,Full v-on syntax,"<button @click=""handler"">","<button v-on:click=""handler"">",Low,
+27,Templates,Avoid v-if with v-for,v-if has higher priority causes issues,Wrap in template or computed filter,v-if on same element as v-for,<template v-for><div v-if>,<div v-for v-if>,High,https://vuejs.org/style-guide/rules-essential.html#avoid-v-if-with-v-for
+28,Templates,Use key with v-for,Proper list rendering and updates,Unique key for each item,Index as key for dynamic lists,"v-for=""item in items"" :key=""item.id""","v-for=""(item, i) in items"" :key=""i""",High,
+29,State,Use Pinia for global state,Official state management for Vue 3,Pinia stores for shared state,Vuex for new projects,const store = useCounterStore(),Vuex with mutations,Medium,https://pinia.vuejs.org/
+30,State,Define stores with defineStore,Composition API style stores,Setup stores with defineStore,Options stores for complex state,"defineStore('counter', () => {})","defineStore('counter', { state })",Low,
+31,State,Use storeToRefs for destructuring,Maintain reactivity when destructuring,storeToRefs(store),Direct destructuring,const { count } = storeToRefs(store),const { count } = store,High,https://pinia.vuejs.org/core-concepts/#destructuring-from-a-store
+32,Routing,Use useRouter and useRoute,Composition API router access,useRouter() useRoute() in setup,this.$router this.$route,const router = useRouter(),this.$router.push(),Medium,https://router.vuejs.org/guide/advanced/composition-api.html
+33,Routing,Lazy load route components,Code splitting for routes,() => import() for components,Static imports for all routes,component: () => import('./Page.vue'),component: Page,Medium,https://router.vuejs.org/guide/advanced/lazy-loading.html
+34,Routing,Use navigation guards,Protect routes and handle redirects,beforeEach for auth checks,Check auth in each component,router.beforeEach((to) => {}),Check auth in onMounted,Medium,
+35,Performance,Use v-once for static content,Skip re-renders for static elements,v-once on never-changing content,v-once on dynamic content,<div v-once>{{ staticText }}</div>,<div v-once>{{ dynamicText }}</div>,Low,https://vuejs.org/api/built-in-directives.html#v-once
+36,Performance,Use v-memo for expensive lists,Memoize list items,v-memo with dependency array,Re-render entire list always,"<div v-for v-memo=""[item.id]"">",<div v-for> without memo,Medium,https://vuejs.org/api/built-in-directives.html#v-memo
+37,Performance,Use shallowReactive for flat objects,Avoid deep reactivity overhead,shallowReactive for flat state,reactive for simple objects,shallowReactive({ count: 0 }),reactive({ count: 0 }),Low,
+38,Performance,Use defineAsyncComponent,Lazy load heavy components,defineAsyncComponent for modals dialogs,Import all components eagerly,defineAsyncComponent(() => import()),import HeavyComponent from,Medium,https://vuejs.org/guide/components/async.html
+39,TypeScript,Use generic components,Type-safe reusable components,Generic with defineComponent,Any types in components,"<script setup lang=""ts"" generic=""T"">",<script setup> without types,Medium,https://vuejs.org/guide/typescript/composition-api.html
+40,TypeScript,Type template refs,Proper typing for DOM refs,ref<HTMLInputElement>(null),ref(null) without type,const input = ref<HTMLInputElement>(null),const input = ref(null),Medium,
+41,TypeScript,Use PropType for complex props,Type complex prop types,PropType<User> for object props,Object without type,type: Object as PropType<User>,type: Object,Medium,
+42,Testing,Use Vue Test Utils,Official testing library,mount shallowMount for components,Manual DOM testing,import { mount } from '@vue/test-utils',document.createElement,Medium,https://test-utils.vuejs.org/
+43,Testing,Test component behavior,Focus on inputs and outputs,Test props emit and rendered output,Test internal implementation,expect(wrapper.text()).toContain(),expect(wrapper.vm.internalState),Medium,
+44,Forms,Use v-model modifiers,Built-in input handling,.lazy .number .trim modifiers,Manual input parsing,"<input v-model.number=""age"">","<input v-model=""age""> then parse",Low,https://vuejs.org/guide/essentials/forms.html#modifiers
+45,Forms,Use VeeValidate or FormKit,Form validation libraries,VeeValidate for complex forms,Manual validation logic,useField useForm from vee-validate,Custom validation in each input,Medium,
+46,Accessibility,Use semantic elements,Proper HTML elements in templates,button nav main for purpose,div for everything,<button @click>,<div @click>,High,
+47,Accessibility,Bind aria attributes dynamically,Keep ARIA in sync with state,":aria-expanded=""isOpen""",Static ARIA values,":aria-expanded=""menuOpen""","aria-expanded=""true""",Medium,
+48,SSR,Use Nuxt for SSR,Full-featured SSR framework,Nuxt 3 for SSR apps,Manual SSR setup,npx nuxi init my-app,Custom SSR configuration,Medium,https://nuxt.com/
+49,SSR,Handle hydration mismatches,Client/server content must match,ClientOnly for browser-only content,Different content server/client,<ClientOnly><BrowserWidget/></ClientOnly>,<div>{{ Date.now() }}</div>,High,
diff --git a/.claude/skills/ui-ux-pro-max/data/styles.csv b/.claude/skills/ui-ux-pro-max/data/styles.csv
new file mode 100644
index 000000000..8bacc703f
--- /dev/null
+++ b/.claude/skills/ui-ux-pro-max/data/styles.csv
@@ -0,0 +1,85 @@
+No,Style Category,Type,Keywords,Primary Colors,Secondary Colors,Effects & Animation,Best For,Do Not Use For,Light Mode ✓,Dark Mode ✓,Performance,Accessibility,Mobile-Friendly,Conversion-Focused,Framework Compatibility,Era/Origin,Complexity,AI Prompt Keywords,CSS/Technical Keywords,Implementation Checklist,Design System Variables
+1,Minimalism & Swiss Style,General,"Clean, simple, spacious, functional, white space, high contrast, geometric, sans-serif, grid-based, essential","Monochromatic, Black #000000, White #FFFFFF","Neutral (Beige #F5F1E8, Grey #808080, Taupe #B38B6D), Primary accent","Subtle hover (200-250ms), smooth transitions, sharp shadows if any, clear type hierarchy, fast loading","Enterprise apps, dashboards, documentation sites, SaaS platforms, professional tools","Creative portfolios, entertainment, playful brands, artistic experiments",✓ Full,✓ Full,⚡ Excellent,✓ WCAG AAA,✓ High,◐ Medium,"Tailwind 10/10, Bootstrap 9/10, MUI 9/10",1950s Swiss,Low,"Design a minimalist landing page. Use: white space, geometric layouts, sans-serif fonts, high contrast, grid-based structure, essential elements only. Avoid shadows and gradients. Focus on clarity and functionality.","display: grid, gap: 2rem, font-family: sans-serif, color: #000 or #FFF, max-width: 1200px, clean borders, no box-shadow unless necessary","☐ Grid-based layout 12-16 columns, ☐ Typography hierarchy clear, ☐ No unnecessary decorations, ☐ WCAG AAA contrast verified, ☐ Mobile responsive grid","--spacing: 2rem, --border-radius: 0px, --font-weight: 400-700, --shadow: none, --accent-color: single primary only"
+2,Neumorphism,General,"Soft UI, embossed, debossed, convex, concave, light source, subtle depth, rounded (12-16px), monochromatic","Light pastels: Soft Blue #C8E0F4, Soft Pink #F5E0E8, Soft Grey #E8E8E8","Tints/shades (±30%), gradient subtlety, color harmony","Soft box-shadow (multiple: -5px -5px 15px, 5px 5px 15px), smooth press (150ms), inner subtle shadow","Health/wellness apps, meditation platforms, fitness trackers, minimal interaction UIs","Complex apps, critical accessibility, data-heavy dashboards, high-contrast required",✓ Full,◐ Partial,⚡ Good,⚠ Low contrast,✓ Good,◐ Medium,"Tailwind 8/10, CSS-in-JS 9/10",2020s Modern,Medium,"Create a neumorphic UI with soft 3D effects. Use light pastels, rounded corners (12-16px), subtle soft shadows (multiple layers), no hard lines, monochromatic color scheme with light/dark variations. Embossed/debossed effect on interactive elements.","border-radius: 12-16px, box-shadow: -5px -5px 15px rgba(0,0,0,0.1), 5px 5px 15px rgba(255,255,255,0.8), background: linear-gradient(145deg, color1, color2), transform: scale on press","☐ Rounded corners 12-16px consistent, ☐ Multiple shadow layers (2-3), ☐ Pastel color verified, ☐ Monochromatic palette checked, ☐ Press animation smooth 150ms","--border-radius: 14px, --shadow-soft-1: -5px -5px 15px, --shadow-soft-2: 5px 5px 15px, --color-light: #F5F5F5, --color-primary: single pastel"
+3,Glassmorphism,General,"Frosted glass, transparent, blurred background, layered, vibrant background, light source, depth, multi-layer","Translucent white: rgba(255,255,255,0.1-0.3)","Vibrant: Electric Blue #0080FF, Neon Purple #8B00FF, Vivid Pink #FF1493, Teal #20B2AA","Backdrop blur (10-20px), subtle border (1px solid rgba white 0.2), light reflection, Z-depth","Modern SaaS, financial dashboards, high-end corporate, lifestyle apps, modal overlays, navigation","Low-contrast backgrounds, critical accessibility, performance-limited, dark text on dark",✓ Full,✓ Full,⚠ Good,⚠ Ensure 4.5:1,✓ Good,✓ High,"Tailwind 9/10, MUI 8/10, Chakra 8/10",2020s Modern,Medium,"Design a glassmorphic interface with frosted glass effect. Use backdrop blur (10-20px), translucent overlays (rgba 10-30% opacity), vibrant background colors, subtle borders, light source reflection, layered depth. Perfect for modern overlays and cards.","backdrop-filter: blur(15px), background: rgba(255, 255, 255, 0.15), border: 1px solid rgba(255,255,255,0.2), -webkit-backdrop-filter: blur(15px), z-index layering for depth","☐ Backdrop-filter blur 10-20px, ☐ Translucent white 15-30% opacity, ☐ Subtle border 1px light, ☐ Vibrant background verified, ☐ Text contrast 4.5:1 checked","--blur-amount: 15px, --glass-opacity: 0.15, --border-color: rgba(255,255,255,0.2), --background: vibrant color, --text-color: light/dark based on BG"
+4,Brutalism,General,"Raw, unpolished, stark, high contrast, plain text, default fonts, visible borders, asymmetric, anti-design","Primary: Red #FF0000, Blue #0000FF, Yellow #FFFF00, Black #000000, White #FFFFFF","Limited: Neon Green #00FF00, Hot Pink #FF00FF, minimal secondary","No smooth transitions (instant), sharp corners (0px), bold typography (700+), visible grid, large blocks","Design portfolios, artistic projects, counter-culture brands, editorial/media sites, tech blogs","Corporate environments, conservative industries, critical accessibility, customer-facing professional",✓ Full,✓ Full,⚡ Excellent,✓ WCAG AAA,◐ Medium,✗ Low,"Tailwind 10/10, Bootstrap 7/10",1950s Brutalist,Low,"Create a brutalist design with raw, unpolished, stark aesthetic. Use pure primary colors (red, blue, yellow), black & white, no smooth transitions (instant), sharp corners, bold large typography, visible grid lines, default system fonts, intentional 'broken' design elements.","border-radius: 0px, transition: none or 0s, font-family: system-ui or monospace, font-weight: 700+, border: visible 2-4px, colors: #FF0000, #0000FF, #FFFF00, #000000, #FFFFFF","☐ No border-radius (0px), ☐ No transitions (instant), ☐ Bold typography (700+), ☐ Pure primary colors used, ☐ Visible grid/borders, ☐ Asymmetric layout intentional","--border-radius: 0px, --transition-duration: 0s, --font-weight: 700-900, --colors: primary only, --border-style: visible, --grid-visible: true"
+5,3D & Hyperrealism,General,"Depth, realistic textures, 3D models, spatial navigation, tactile, skeuomorphic elements, rich detail, immersive","Deep Navy #001F3F, Forest Green #228B22, Burgundy #800020, Gold #FFD700, Silver #C0C0C0","Complex gradients (5-10 stops), realistic lighting, shadow variations (20-40% darker)","WebGL/Three.js 3D, realistic shadows (layers), physics lighting, parallax (3-5 layers), smooth 3D (300-400ms)","Gaming, product showcase, immersive experiences, high-end e-commerce, architectural viz, VR/AR","Low-end mobile, performance-limited, critical accessibility, data tables/forms",◐ Partial,◐ Partial,❌ Poor,⚠ Not accessible,✗ Low,◐ Medium,"Three.js 10/10, R3F 10/10, Babylon.js 10/10",2020s Modern,High,"Build an immersive 3D interface using realistic textures, 3D models (Three.js/Babylon.js), complex shadows, realistic lighting, parallax scrolling (3-5 layers), physics-based motion. Include skeuomorphic elements with tactile detail.","transform: translate3d, perspective: 1000px, WebGL canvas, Three.js/Babylon.js library, box-shadow: complex multi-layer, background: complex gradients, filter: drop-shadow()","☐ WebGL/Three.js integrated, ☐ 3D models loaded, ☐ Parallax 3-5 layers, ☐ Realistic lighting verified, ☐ Complex shadows rendered, ☐ Physics animation smooth 300-400ms","--perspective: 1000px, --parallax-layers: 5, --lighting-intensity: realistic, --shadow-depth: 20-40%, --animation-duration: 300-400ms"
+6,Vibrant & Block-based,General,"Bold, energetic, playful, block layout, geometric shapes, high color contrast, duotone, modern, energetic","Neon Green #39FF14, Electric Purple #BF00FF, Vivid Pink #FF1493, Bright Cyan #00FFFF, Sunburst #FFAA00","Complementary: Orange #FF7F00, Shocking Pink #FF006E, Lime #CCFF00, triadic schemes","Large sections (48px+ gaps), animated patterns, bold hover (color shift), scroll-snap, large type (32px+), 200-300ms","Startups, creative agencies, gaming, social media, youth-focused, entertainment, consumer","Financial institutions, healthcare, formal business, government, conservative, elderly",✓ Full,✓ Full,⚡ Good,◐ Ensure WCAG,✓ High,✓ High,"Tailwind 10/10, Chakra 9/10, Styled 9/10",2020s Modern,Medium,"Design an energetic, vibrant interface with bold block layouts, geometric shapes, high color contrast, large typography (32px+), animated background patterns, duotone effects. Perfect for startups and youth-focused apps. Use 4-6 contrasting colors from complementary/triadic schemes.","display: flex/grid with large gaps (48px+), font-size: 32px+, background: animated patterns (CSS), color: neon/vibrant colors, animation: continuous pattern movement","☐ Block layout with 48px+ gaps, ☐ Large typography 32px+, ☐ 4-6 vibrant colors max, ☐ Animated patterns active, ☐ Scroll-snap enabled, ☐ High contrast verified (7:1+)","--block-gap: 48px, --typography-size: 32px+, --color-palette: 4-6 vibrant colors, --animation: continuous pattern, --contrast-ratio: 7:1+"
+7,Dark Mode (OLED),General,"Dark theme, low light, high contrast, deep black, midnight blue, eye-friendly, OLED, night mode, power efficient","Deep Black #000000, Dark Grey #121212, Midnight Blue #0A0E27","Vibrant accents: Neon Green #39FF14, Electric Blue #0080FF, Gold #FFD700, Plasma Purple #BF00FF","Minimal glow (text-shadow: 0 0 10px), dark-to-light transitions, low white emission, high readability, visible focus","Night-mode apps, coding platforms, entertainment, eye-strain prevention, OLED devices, low-light","Print-first content, high-brightness outdoor, color-accuracy-critical",✗ No,✓ Only,⚡ Excellent,✓ WCAG AAA,✓ High,◐ Low,"Tailwind 10/10, MUI 10/10, Chakra 10/10",2020s Modern,Low,"Create an OLED-optimized dark interface with deep black (#000000), dark grey (#121212), midnight blue accents. Use minimal glow effects, vibrant neon accents (green, blue, gold, purple), high contrast text. Optimize for eye comfort and OLED power saving.","background: #000000 or #121212, color: #FFFFFF or #E0E0E0, text-shadow: 0 0 10px neon-color (sparingly), filter: brightness(0.8) if needed, color-scheme: dark","☐ Deep black #000000 or #121212, ☐ Vibrant neon accents used, ☐ Text contrast 7:1+, ☐ Minimal glow effects, ☐ OLED power optimization, ☐ No white (#FFFFFF) background","--bg-black: #000000, --bg-dark-grey: #121212, --text-primary: #FFFFFF, --accent-neon: neon colors, --glow-effect: minimal, --oled-optimized: true"
+8,Accessible & Ethical,General,"High contrast, large text (16px+), keyboard navigation, screen reader friendly, WCAG compliant, focus state, semantic","WCAG AA/AAA (4.5:1 min), simple primary, clear secondary, high luminosity (7:1+)","Symbol-based colors (not color-only), supporting patterns, inclusive combinations","Clear focus rings (3-4px), ARIA labels, skip links, responsive design, reduced motion, 44x44px touch targets","Government, healthcare, education, inclusive products, large audience, legal compliance, public",None - accessibility universal,✓ Full,✓ Full,⚡ Excellent,✓ WCAG AAA,✓ High,✓ High,All frameworks 10/10,Universal,Low,"Design with WCAG AAA compliance. Include: high contrast (7:1+), large text (16px+), keyboard navigation, screen reader compatibility, focus states visible (3-4px ring), semantic HTML, ARIA labels, skip links, reduced motion support (prefers-reduced-motion), 44x44px touch targets.","color-contrast: 7:1+, font-size: 16px+, outline: 3-4px on :focus-visible, aria-label, role attributes, @media (prefers-reduced-motion), touch-target: 44x44px, cursor: pointer","☐ WCAG AAA verified, ☐ 7:1+ contrast checked, ☐ Keyboard navigation tested, ☐ Screen reader tested, ☐ Focus visible 3-4px, ☐ Semantic HTML used, ☐ Touch targets 44x44px","--contrast-ratio: 7:1, --font-size-min: 16px, --focus-ring: 3-4px, --touch-target: 44x44px, --wcag-level: AAA, --keyboard-accessible: true, --sr-tested: true"
+9,Claymorphism,General,"Soft 3D, chunky, playful, toy-like, bubbly, thick borders (3-4px), double shadows, rounded (16-24px)","Pastel: Soft Peach #FDBCB4, Baby Blue #ADD8E6, Mint #98FF98, Lilac #E6E6FA, light BG","Soft gradients (pastel-to-pastel), light/dark variations (20-30%), gradient subtle","Inner+outer shadows (subtle, no hard lines), soft press (200ms ease-out), fluffy elements, smooth transitions","Educational apps, children's apps, SaaS platforms, creative tools, fun-focused, onboarding, casual games","Formal corporate, professional services, data-critical, serious/medical, legal apps, finance",✓ Full,◐ Partial,⚡ Good,⚠ Ensure 4.5:1,✓ High,✓ High,"Tailwind 9/10, CSS-in-JS 9/10",2020s Modern,Medium,"Design a playful, toy-like interface with soft 3D, chunky elements, bubbly aesthetic, rounded edges (16-24px), thick borders (3-4px), double shadows (inner + outer), pastel colors, smooth animations. Perfect for children's apps and creative tools.","border-radius: 16-24px, border: 3-4px solid, box-shadow: inset -2px -2px 8px, 4px 4px 8px, background: pastel-gradient, animation: soft bounce (cubic-bezier 0.34, 1.56)","☐ Border-radius 16-24px, ☐ Thick borders 3-4px, ☐ Double shadows (inner+outer), ☐ Pastel colors used, ☐ Soft bounce animations, ☐ Playful interactions","--border-radius: 20px, --border-width: 3-4px, --shadow-inner: inset -2px -2px 8px, --shadow-outer: 4px 4px 8px, --color-palette: pastels, --animation: bounce"
+10,Aurora UI,General,"Vibrant gradients, smooth blend, Northern Lights effect, mesh gradient, luminous, atmospheric, abstract","Complementary: Blue-Orange, Purple-Yellow, Electric Blue #0080FF, Magenta #FF1493, Cyan #00FFFF","Smooth transitions (Blue→Purple→Pink→Teal), iridescent effects, blend modes (screen, multiply)","Large flowing CSS/SVG gradients, subtle 8-12s animations, depth via color layering, smooth morph","Modern SaaS, creative agencies, branding, music platforms, lifestyle, premium products, hero sections","Data-heavy dashboards, critical accessibility, content-heavy where distraction issues",✓ Full,✓ Full,⚠ Good,⚠ Text contrast,✓ Good,✓ High,"Tailwind 9/10, CSS-in-JS 10/10",2020s Modern,Medium,"Create a vibrant gradient interface inspired by Northern Lights with mesh gradients, smooth color blends, flowing animations. Use complementary color pairs (blue-orange, purple-yellow), flowing background gradients, subtle continuous animations (8-12s loops), iridescent effects.","background: conic-gradient or radial-gradient with multiple stops, animation: @keyframes gradient (8-12s), background-size: 200% 200%, filter: saturate(1.2), blend-mode: screen or multiply","☐ Mesh/flowing gradients applied, ☐ 8-12s animation loop, ☐ Complementary colors used, ☐ Smooth color transitions, ☐ Iridescent effect subtle, ☐ Text contrast verified","--gradient-colors: complementary pairs, --animation-duration: 8-12s, --blend-mode: screen, --color-saturation: 1.2, --effect: iridescent, --loop-smooth: true"
+11,Retro-Futurism,General,"Vintage sci-fi, 80s aesthetic, neon glow, geometric patterns, CRT scanlines, pixel art, cyberpunk, synthwave","Neon Blue #0080FF, Hot Pink #FF006E, Cyan #00FFFF, Deep Black #1A1A2E, Purple #5D34D0","Metallic Silver #C0C0C0, Gold #FFD700, duotone, 80s Pink #FF10F0, neon accents","CRT scanlines (::before overlay), neon glow (text-shadow+box-shadow), glitch effects (skew/offset keyframes)","Gaming, entertainment, music platforms, tech brands, artistic projects, nostalgic, cyberpunk","Conservative industries, critical accessibility, professional/corporate, elderly, legal/finance",✓ Full,✓ Dark focused,⚠ Moderate,⚠ High contrast/strain,◐ Medium,◐ Medium,"Tailwind 8/10, CSS-in-JS 9/10",1980s Retro,Medium,"Build a retro-futuristic (cyberpunk/vaporwave) interface with neon colors (blue, pink, cyan), deep black background, 80s aesthetic, CRT scanlines, glitch effects, neon glow text/borders, monospace fonts, geometric patterns. Use neon text-shadow and animated glitch effects.","color: neon colors (#0080FF, #FF006E, #00FFFF), text-shadow: 0 0 10px neon, background: #000 or #1A1A2E, font-family: monospace, animation: glitch (skew+offset), filter: hue-rotate","☐ Neon colors used, ☐ CRT scanlines effect, ☐ Glitch animations active, ☐ Monospace font, ☐ Deep black background, ☐ Glow effects applied, ☐ 80s patterns present","--neon-colors: #0080FF #FF006E #00FFFF, --background: #000000, --font-family: monospace, --effect: glitch+glow, --scanline-opacity: 0.3, --crt-effect: true"
+12,Flat Design,General,"2D, minimalist, bold colors, no shadows, clean lines, simple shapes, typography-focused, modern, icon-heavy","Solid bright: Red, Orange, Blue, Green, limited palette (4-6 max)","Complementary colors, muted secondaries, high saturation, clean accents","No gradients/shadows, simple hover (color/opacity shift), fast loading, clean transitions (150-200ms ease), minimal icons","Web apps, mobile apps, cross-platform, startup MVPs, user-friendly, SaaS, dashboards, corporate","Complex 3D, premium/luxury, artistic portfolios, immersive experiences, high-detail",✓ Full,✓ Full,⚡ Excellent,✓ WCAG AAA,✓ High,✓ High,"Tailwind 10/10, Bootstrap 10/10, MUI 9/10",2010s Modern,Low,"Create a flat, 2D interface with bold colors, no shadows/gradients, clean lines, simple geometric shapes, icon-heavy, typography-focused, minimal ornamentation. Use 4-6 solid, bright colors in a limited palette with high saturation.","box-shadow: none, background: solid color, border-radius: 0-4px, color: solid (no gradients), fill: solid, stroke: 1-2px, font: bold sans-serif, icons: simplified SVG","☐ No shadows/gradients, ☐ 4-6 solid colors max, ☐ Clean lines consistent, ☐ Simple shapes used, ☐ Icon-heavy layout, ☐ High saturation colors, ☐ Fast loading verified","--shadow: none, --color-palette: 4-6 solid, --border-radius: 2px, --gradient: none, --icons: simplified SVG, --animation: minimal 150-200ms"
+13,Skeuomorphism,General,"Realistic, texture, depth, 3D appearance, real-world metaphors, shadows, gradients, tactile, detailed, material","Rich realistic: wood, leather, metal colors, detailed gradients (8-12 stops), metallic effects","Realistic lighting gradients, shadow variations (30-50% darker), texture overlays, material colors","Realistic shadows (layers), depth (perspective), texture details (noise, grain), realistic animations (300-500ms)","Legacy apps, gaming, immersive storytelling, premium products, luxury, realistic simulations, education","Modern enterprise, critical accessibility, low-performance, web (use Flat/Modern)",◐ Partial,◐ Partial,❌ Poor,⚠ Textures reduce readability,✗ Low,◐ Medium,"CSS-in-JS 7/10, Custom 8/10",2007-2012 iOS,High,"Design a realistic, textured interface with 3D depth, real-world metaphors (leather, wood, metal), complex gradients (8-12 stops), realistic shadows, grain/texture overlays, tactile press animations. Perfect for premium/luxury products.","background: complex gradient (8-12 stops), box-shadow: realistic multi-layer, background-image: texture overlay (noise, grain), filter: drop-shadow, transform: scale on press (300-500ms)","☐ Realistic textures applied, ☐ Complex gradients 8-12 stops, ☐ Multi-layer shadows, ☐ Texture overlays present, ☐ Tactile animations smooth, ☐ Depth effect pronounced","--gradient-stops: 8-12, --texture-overlay: noise+grain, --shadow-layers: 3+, --animation-duration: 300-500ms, --depth-effect: pronounced, --tactile: true"
+14,Liquid Glass,General,"Flowing glass, morphing, smooth transitions, fluid effects, translucent, animated blur, iridescent, chromatic aberration","Vibrant iridescent (rainbow spectrum), translucent base with opacity shifts, gradient fluidity","Chromatic aberration (Red-Cyan), iridescent oil-spill, fluid gradient blends, holographic effects","Morphing elements (SVG/CSS), fluid animations (400-600ms curves), dynamic blur (backdrop-filter), color transitions","Premium SaaS, high-end e-commerce, creative platforms, branding experiences, luxury portfolios","Performance-limited, critical accessibility, complex data, budget projects",✓ Full,✓ Full,⚠ Moderate-Poor,⚠ Text contrast,◐ Medium,✓ High,"Framer Motion 10/10, GSAP 10/10",2020s Modern,High,"Create a premium liquid glass effect with morphing shapes, flowing animations, chromatic aberration, iridescent gradients, smooth 400-600ms transitions. Use SVG morphing for shape changes, dynamic blur, smooth color transitions creating a fluid, premium feel.","animation: morphing SVG paths (400-600ms), backdrop-filter: blur + saturate, filter: hue-rotate + brightness, blend-mode: screen, background: iridescent gradient","☐ Morphing animations 400-600ms, ☐ Chromatic aberration applied, ☐ Dynamic blur active, ☐ Iridescent gradients, ☐ Smooth color transitions, ☐ Premium feel achieved","--morph-duration: 400-600ms, --blur-amount: 15px, --chromatic-aberration: true, --iridescent: true, --blend-mode: screen, --smooth-transitions: true"
+15,Motion-Driven,General,"Animation-heavy, microinteractions, smooth transitions, scroll effects, parallax, entrance anim, page transitions","Bold colors emphasize movement, high contrast animated, dynamic gradients, accent action colors","Transitional states, success (Green #22C55E), error (Red #EF4444), neutral feedback","Scroll anim (Intersection Observer), hover (300-400ms), entrance, parallax (3-5 layers), page transitions","Portfolio sites, storytelling platforms, interactive experiences, entertainment apps, creative, SaaS","Data dashboards, critical accessibility, low-power devices, content-heavy, motion-sensitive",✓ Full,✓ Full,⚠ Good,⚠ Prefers-reduced-motion,✓ Good,✓ High,"GSAP 10/10, Framer Motion 10/10",2020s Modern,High,"Build an animation-heavy interface with scroll-triggered animations, microinteractions, parallax scrolling (3-5 layers), smooth transitions (300-400ms), entrance animations, page transitions. Use Intersection Observer for scroll effects, transform for performance, GPU acceleration.","animation: @keyframes scroll-reveal, transform: translateY/X, Intersection Observer API, will-change: transform, scroll-behavior: smooth, animation-duration: 300-400ms","☐ Scroll animations active, ☐ Parallax 3-5 layers, ☐ Entrance animations smooth, ☐ Page transitions fluid, ☐ GPU accelerated, ☐ Prefers-reduced-motion respected","--animation-duration: 300-400ms, --parallax-layers: 5, --scroll-behavior: smooth, --gpu-accelerated: true, --entrance-animation: true, --page-transition: smooth"
+16,Micro-interactions,General,"Small animations, gesture-based, tactile feedback, subtle animations, contextual interactions, responsive","Subtle color shifts (10-20%), feedback: Green #22C55E, Red #EF4444, Amber #F59E0B","Accent feedback, neutral supporting, clear action indicators","Small hover (50-100ms), loading spinners, success/error state anim, gesture-triggered (swipe/pinch), haptic","Mobile apps, touchscreen UIs, productivity tools, user-friendly, consumer apps, interactive components","Desktop-only, critical performance, accessibility-first (alternatives needed)",✓ Full,✓ Full,⚡ Excellent,✓ Good,✓ High,✓ High,"Framer Motion 10/10, React Spring 9/10",2020s Modern,Medium,"Design with delightful micro-interactions: small 50-100ms animations, gesture-based responses, tactile feedback, loading spinners, success/error states, subtle hover effects, haptic feedback triggers for mobile. Focus on responsive, contextual interactions.","animation: short 50-100ms, transition: hover states, @media (hover: hover) for desktop, :active for press, haptic-feedback CSS/API, loading animation smooth loop","☐ Micro-animations 50-100ms, ☐ Gesture-responsive, ☐ Tactile feedback visual/haptic, ☐ Loading spinners smooth, ☐ Success/error states clear, ☐ Hover effects subtle","--micro-animation-duration: 50-100ms, --gesture-responsive: true, --haptic-feedback: true, --loading-animation: smooth, --state-feedback: success+error"
+17,Inclusive Design,General,"Accessible, color-blind friendly, high contrast, haptic feedback, voice interaction, screen reader, WCAG AAA, universal","WCAG AAA (7:1+ contrast), avoid red-green only, symbol-based indicators, high contrast primary","Supporting patterns (stripes, dots, hatch), symbols, combinations, clear non-color indicators","Haptic feedback (vibration), voice guidance, focus indicators (4px+ ring), motion options, alt content, semantic","Public services, education, healthcare, finance, government, accessible consumer, inclusive",None - accessibility universal,✓ Full,✓ Full,⚡ Excellent,✓ WCAG AAA,✓ High,✓ High,All frameworks 10/10,Universal,Low,"Design for universal accessibility: high contrast (7:1+), large text (16px+), keyboard-only navigation, screen reader optimization, WCAG AAA compliance, symbol-based color indicators (not color-only), haptic feedback, voice interaction support, reduced motion options.","aria-* attributes complete, role attributes semantic, focus-visible: 3-4px ring, color-contrast: 7:1+, @media (prefers-reduced-motion), alt text on all images, form labels properly associated","☐ WCAG AAA verified, ☐ 7:1+ contrast all text, ☐ Keyboard accessible (Tab/Enter), ☐ Screen reader tested, ☐ Focus visible 3-4px, ☐ No color-only indicators, ☐ Haptic fallback","--contrast-ratio: 7:1, --font-size: 16px+, --keyboard-accessible: true, --sr-compatible: true, --wcag-level: AAA, --color-symbols: true, --haptic: enabled"
+18,Zero Interface,General,"Minimal visible UI, voice-first, gesture-based, AI-driven, invisible controls, predictive, context-aware, ambient","Neutral backgrounds: Soft white #FAFAFA, light grey #F0F0F0, warm off-white #F5F1E8","Subtle feedback: light green, light red, minimal UI elements, soft accents","Voice recognition UI, gesture detection, AI predictions (smooth reveal), progressive disclosure, smart suggestions","Voice assistants, AI platforms, future-forward UX, smart home, contextual computing, ambient experiences","Complex workflows, data-entry heavy, traditional systems, legacy support, explicit control",✓ Full,✓ Full,⚡ Excellent,✓ Excellent,✓ High,✓ High,"Tailwind 10/10, Custom 10/10",2020s AI-Era,Low,"Create a voice-first, gesture-based, AI-driven interface with minimal visible UI, progressive disclosure, voice recognition UI, gesture detection, AI predictions, smart suggestions, context-aware actions. Hide controls until needed.","voice-commands: Web Speech API, gesture-detection: touch events, AI-predictions: hidden by default (reveal on hover), progressive-disclosure: show on demand, minimal UI visible","☐ Voice commands responsive, ☐ Gesture detection active, ☐ AI predictions hidden/revealed, ☐ Progressive disclosure working, ☐ Minimal visible UI, ☐ Smart suggestions contextual","--voice-ui: enabled, --gesture-detection: active, --ai-predictions: smart, --progressive-disclosure: true, --visible-ui: minimal, --context-aware: true"
+19,Soft UI Evolution,General,"Evolved soft UI, better contrast, modern aesthetics, subtle depth, accessibility-focused, improved shadows, hybrid","Improved contrast pastels: Soft Blue #87CEEB, Soft Pink #FFB6C1, Soft Green #90EE90, better hierarchy","Better combinations, accessible secondary, supporting with improved contrast, modern accents","Improved shadows (softer than flat, clearer than neumorphism), modern (200-300ms), focus visible, WCAG AA/AAA","Modern enterprise apps, SaaS platforms, health/wellness, modern business tools, professional, hybrid","Extreme minimalism, critical performance, systems without modern OS",✓ Full,✓ Full,⚡ Excellent,✓ WCAG AA+,✓ High,✓ High,"Tailwind 9/10, MUI 9/10, Chakra 9/10",2020s Modern,Medium,"Design evolved neumorphism with improved contrast (WCAG AA+), modern aesthetics, subtle depth, accessibility focus. Use soft shadows (softer than flat but clearer than pure neumorphism), better color hierarchy, improved focus states, modern 200-300ms animations.","box-shadow: softer multi-layer (0 2px 4px), background: improved contrast pastels, border-radius: 8-12px, animation: 200-300ms smooth, outline: 2-3px on focus, contrast: 4.5:1+","☐ Improved contrast AA/AAA, ☐ Soft shadows modern, ☐ Border-radius 8-12px, ☐ Animations 200-300ms, ☐ Focus states visible, ☐ Color hierarchy clear","--shadow-soft: modern blend, --border-radius: 10px, --animation-duration: 200-300ms, --contrast-ratio: 4.5:1+, --color-hierarchy: improved, --wcag-level: AA+"
+20,Hero-Centric Design,Landing Page,"Large hero section, compelling headline, high-contrast CTA, product showcase, value proposition, hero image/video, dramatic visual","Brand primary color, white/light backgrounds for contrast, accent color for CTA","Supporting colors for secondary CTAs, accent highlights, trust elements (testimonials, logos)","Smooth scroll reveal, fade-in animations on hero, subtle background parallax, CTA glow/pulse effect","SaaS landing pages, product launches, service landing pages, B2B platforms, tech companies","Complex navigation, multi-page experiences, data-heavy applications",✓ Full,✓ Full,⚡ Good,✓ WCAG AA,✓ Full,✓ Very High,"Tailwind 10/10, Bootstrap 9/10",2020s Modern,Medium,"Design a hero-centric landing page. Use: full-width hero section, compelling headline (60-80 chars), high-contrast CTA button, product screenshot or video, value proposition above fold, gradient or image background, clear visual hierarchy.","min-height: 100vh, display: flex, align-items: center, background: linear-gradient or image, text-shadow for readability, max-width: 800px for text, button with hover scale (1.05)","☐ Hero section full viewport height, ☐ Headline visible above fold, ☐ CTA button high contrast, ☐ Background image optimized (WebP), ☐ Text readable on background, ☐ Mobile responsive layout","--hero-min-height: 100vh, --headline-size: clamp(2rem, 5vw, 4rem), --cta-padding: 1rem 2rem, --overlay-opacity: 0.5, --text-shadow: 0 2px 4px rgba(0,0,0,0.3)"
+21,Conversion-Optimized,Landing Page,"Form-focused, minimalist design, single CTA focus, high contrast, urgency elements, trust signals, social proof, clear value","Primary brand color, high-contrast white/light backgrounds, warning/urgency colors for time-limited offers","Secondary CTA color (muted), trust element colors (testimonial highlights), accent for key benefits","Hover states on CTA (color shift, slight scale), form field focus animations, loading spinner, success feedback","E-commerce product pages, free trial signups, lead generation, SaaS pricing pages, limited-time offers","Complex feature explanations, multi-product showcases, technical documentation",✓ Full,✓ Full,⚡ Excellent,✓ WCAG AA,✓ Full (mobile-optimized),✓ Very High,"Tailwind 10/10, Bootstrap 9/10",2020s Modern,Medium,"Design a conversion-optimized landing page. Use: single primary CTA, minimal distractions, trust badges, urgency elements (limited time), social proof (testimonials), clear value proposition, form above fold, progress indicators.","form with focus states, input:focus ring, button: primary color high contrast, position: sticky for CTA, max-width: 600px for form, loading spinner, success/error states","☐ Single primary CTA visible, ☐ Form fields minimal (3-5), ☐ Trust badges present, ☐ Social proof above fold, ☐ Mobile form optimized, ☐ Loading states implemented, ☐ A/B test ready","--cta-color: high contrast primary, --form-max-width: 600px, --input-height: 48px, --focus-ring: 3px solid accent, --success-color: #22C55E, --error-color: #EF4444"
+22,Feature-Rich Showcase,Landing Page,"Multiple feature sections, grid layout, benefit cards, visual feature demonstrations, interactive elements, problem-solution pairs","Primary brand, bright secondary colors for feature cards, contrasting accent for CTAs","Supporting colors for: benefits (green), problems (red/orange), features (blue/purple), social proof (neutral)","Card hover effects (lift/scale), icon animations on scroll, feature toggle animations, smooth section transitions","Enterprise SaaS, software tools landing pages, platform services, complex product explanations, B2B products","Simple product pages, early-stage startups with few features, entertainment landing pages",✓ Full,✓ Full,⚡ Good,✓ WCAG AA,✓ Good,✓ High,"Tailwind 10/10, Bootstrap 9/10",2020s Modern,Medium,"Design a feature showcase landing page. Use: grid layout for features (3-4 columns), feature cards with icons, benefit-focused copy, alternating sections, comparison tables, interactive demos, problem-solution pairs.","display: grid, grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)), gap: 2rem, card hover effects (translateY -4px), icon containers, alternating background colors","☐ Feature grid responsive, ☐ Icons consistent style, ☐ Card hover effects smooth, ☐ Alternating sections contrast, ☐ Benefits clearly stated, ☐ Mobile stacks properly","--card-padding: 2rem, --card-radius: 12px, --icon-size: 48px, --grid-gap: 2rem, --section-padding: 4rem 0, --hover-transform: translateY(-4px)"
+23,Minimal & Direct,Landing Page,"Minimal text, white space heavy, single column layout, direct messaging, clean typography, visual-centric, fast-loading","Monochromatic primary, white background, single accent color for CTA, black/dark grey text","Minimal secondary colors, reserved for critical CTAs only, neutral supporting elements","Very subtle hover effects, minimal animations, fast page load (no heavy animations), smooth scroll","Simple service landing pages, indie products, consulting services, micro SaaS, freelancer portfolios","Feature-heavy products, complex explanations, multi-product showcases",✓ Full,✓ Full,⚡ Excellent,✓ WCAG AAA,✓ Full,✓ High,"Tailwind 10/10, Bootstrap 9/10",2020s Modern,Medium,"Design a minimal direct landing page. Use: single column layout, maximum white space, essential content only, one CTA, clean typography, no decorative elements, fast loading, direct messaging.","max-width: 680px, margin: 0 auto, padding: 4rem 2rem, font-size: 18-20px, line-height: 1.6, minimal animations, no box-shadow, clean borders only","☐ Single column centered, ☐ White space generous, ☐ One primary CTA only, ☐ No decorative images, ☐ Page weight < 500KB, ☐ Load time < 2s","--content-max-width: 680px, --spacing-large: 4rem, --font-size-body: 18px, --line-height: 1.6, --color-text: #1a1a1a, --color-bg: #ffffff"
+24,Social Proof-Focused,Landing Page,"Testimonials prominent, client logos displayed, case studies sections, reviews/ratings, user avatars, success metrics, credibility markers","Primary brand, trust colors (blue), success/growth colors (green), neutral backgrounds","Testimonial highlight colors, logo grid backgrounds (light grey), badge/achievement colors","Testimonial carousel animations, logo grid fade-in, stat counter animations (number count-up), review star ratings","B2B SaaS, professional services, premium products, e-commerce conversion pages, established brands","Startup MVPs, products without users, niche/experimental products",✓ Full,✓ Full,⚡ Good,✓ WCAG AA,✓ Full,✓ High,"Tailwind 10/10, Bootstrap 9/10",2020s Modern,Medium,"Design a social proof landing page. Use: testimonials with photos, client logos grid, case study cards, review ratings (stars), user count metrics, success stories, trust indicators, before/after comparisons.","testimonial cards with avatar, logo grid (grayscale filter), star rating SVGs, counter animations (count-up), blockquote styling, carousel for testimonials, metric cards","☐ Testimonials with real photos, ☐ Logo grid 6-12 logos, ☐ Star ratings accessible, ☐ Metrics animated on scroll, ☐ Case studies linked, ☐ Mobile carousel works","--avatar-size: 64px, --logo-height: 40px, --star-color: #FBBF24, --metric-font-size: 3rem, --testimonial-bg: #F9FAFB, --blockquote-border: 4px solid accent"
+25,Interactive Product Demo,Landing Page,"Embedded product mockup/video, interactive elements, product walkthrough, step-by-step guides, hover-to-reveal features, embedded demos","Primary brand, interface colors matching product, demo highlight colors for interactive elements","Product UI colors, tutorial step colors (numbered progression), hover state indicators","Product animation playback, step progression animations, hover reveal effects, smooth zoom on interaction","SaaS platforms, tool/software products, productivity apps landing pages, developer tools, productivity software","Simple services, consulting, non-digital products, complexity-averse audiences",✓ Full,✓ Full,⚠ Good (video/interactive),✓ WCAG AA,✓ Good,✓ Very High,"Tailwind 10/10, Bootstrap 9/10",2020s Modern,Medium,"Design an interactive demo landing page. Use: embedded product mockup, video walkthrough, step-by-step guide, hover-to-reveal features, live demo button, screenshot carousel, feature highlights on interaction.","video element with controls, position: relative for overlays, hover reveal (opacity transition), step indicators, modal for full demo, screenshot lightbox, play button overlay","☐ Demo video loads fast, ☐ Fallback for no-JS, ☐ Step indicators clear, ☐ Hover states obvious, ☐ Mobile touch friendly, ☐ Demo CTA prominent","--video-aspect-ratio: 16/9, --overlay-bg: rgba(0,0,0,0.7), --step-indicator-size: 32px, --play-button-size: 80px, --transition-duration: 300ms"
+26,Trust & Authority,Landing Page,"Certificates/badges displayed, expert credentials, case studies with metrics, before/after comparisons, industry recognition, security badges","Professional colors (blue/grey), trust colors, certification badge colors (gold/silver accents)","Certificate highlight colors, metric showcase colors, comparison highlight (success green)","Badge hover effects, metric pulse animations, certificate carousel, smooth stat reveal","Healthcare/medical landing pages, financial services, enterprise software, premium/luxury products, legal services","Casual products, entertainment, viral/social-first products",✓ Full,✓ Full,⚡ Excellent,✓ WCAG AAA,✓ Full,✓ High,"Tailwind 10/10, Bootstrap 9/10",2020s Modern,Medium,"Design a trust-focused landing page. Use: certification badges, security indicators, expert credentials, industry awards, case study metrics, compliance logos (GDPR, SOC2), guarantee badges, professional photography.","badge grid layout, shield icons, lock icons for security, certificate styling, metric cards with icons, professional color scheme (blue/grey), subtle shadows for depth","☐ Security badges visible, ☐ Certifications verified, ☐ Metrics with sources, ☐ Professional imagery, ☐ Guarantee clearly stated, ☐ Contact info accessible","--badge-height: 48px, --trust-color: #1E40AF, --security-green: #059669, --card-shadow: 0 4px 6px rgba(0,0,0,0.1), --metric-highlight: #F59E0B"
+27,Storytelling-Driven,Landing Page,"Narrative flow, visual story progression, section transitions, consistent character/brand voice, emotional messaging, journey visualization","Brand primary, warm/emotional colors, varied accent colors per story section, high visual variety","Story section color coding, emotional state colors (calm, excitement, success), transitional gradients","Section-to-section animations, scroll-triggered reveals, character/icon animations, morphing transitions, parallax narrative","Brand/startup stories, mission-driven products, premium/lifestyle brands, documentary-style products, educational","Technical/complex products (unless narrative-driven), traditional enterprise software",✓ Full,✓ Full,⚠ Moderate (animations),✓ WCAG AA,✓ Good,✓ High,"Tailwind 10/10, Bootstrap 9/10",2020s Modern,Medium,"Design a storytelling landing page. Use: narrative flow sections, scroll-triggered reveals, chapter-like structure, emotional imagery, brand journey visualization, founder story, mission statement, timeline progression.","scroll-snap sections, Intersection Observer for reveals, parallax backgrounds, section transitions, timeline CSS, narrative typography (varied sizes), image-text alternating","☐ Story flows naturally, ☐ Scroll reveals smooth, ☐ Sections timed well, ☐ Emotional hooks present, ☐ Mobile story readable, ☐ Skip option available","--section-min-height: 100vh, --reveal-duration: 600ms, --narrative-font: serif, --chapter-spacing: 8rem, --timeline-color: accent, --parallax-speed: 0.5"
+28,Data-Dense Dashboard,BI/Analytics,"Multiple charts/widgets, data tables, KPI cards, minimal padding, grid layout, space-efficient, maximum data visibility","Neutral primary (light grey/white #F5F5F5), data colors (blue/green/red), dark text #333333","Chart colors: success (green #22C55E), warning (amber #F59E0B), alert (red #EF4444), neutral (grey)","Hover tooltips, chart zoom on click, row highlighting on hover, smooth filter animations, data loading spinners","Business intelligence dashboards, financial analytics, enterprise reporting, operational dashboards, data warehousing","Marketing dashboards, consumer-facing analytics, simple reporting",✓ Full,✓ Full,⚡ Excellent,✓ WCAG AA,◐ Medium,✗ Not applicable,"Recharts 9/10, Chart.js 9/10, D3.js 10/10",2020s Modern,Medium,"Design a data-dense dashboard. Use: multiple chart widgets, KPI cards row, data tables with sorting, minimal padding (8-12px), efficient grid layout, filter sidebar, dense but readable typography, maximum information density.","display: grid, grid-template-columns: repeat(12, 1fr), gap: 8px, padding: 12px, font-size: 12-14px, overflow: auto for tables, compact card design, sticky headers","☐ Grid layout 12 columns, ☐ KPI cards responsive, ☐ Tables sortable, ☐ Filters functional, ☐ Loading states for data, ☐ Export functionality","--grid-gap: 8px, --card-padding: 12px, --font-size-small: 12px, --table-row-height: 36px, --sidebar-width: 240px, --header-height: 56px"
+29,Heat Map & Heatmap Style,BI/Analytics,"Color-coded grid/matrix, data intensity visualization, geographical heat maps, correlation matrices, cell-based representation, gradient coloring","Gradient scale: Cool (blue #0080FF) to hot (red #FF0000), neutral middle (white/yellow)","Support gradients: Light (cool blue) to dark (warm red), divergent for positive/negative data, monochromatic options","Color gradient transitions on data change, cell highlighting on hover, tooltip reveal on click, smooth color animation","Geographical analysis, performance matrices, correlation analysis, user behavior heatmaps, temperature/intensity data","Linear data representation, categorical comparisons (use bar charts), small datasets",✓ Full,✓ Full (with adjustments),⚡ Excellent,⚠ Colorblind considerations,◐ Medium,✗ Not applicable,"Recharts 9/10, Chart.js 9/10, D3.js 10/10",2020s Modern,Medium,"Design a heatmap visualization. Use: color gradient scale (cool to hot), cell-based grid, intensity legend, hover tooltips, geographic or matrix layout, divergent color scheme for +/- values, accessible color alternatives.","display: grid, background: linear-gradient for legend, cell hover states, tooltip positioning, color scale (blue→white→red), SVG for geographic, canvas for large datasets","☐ Color scale clear, ☐ Legend visible, ☐ Tooltips informative, ☐ Colorblind alternatives, ☐ Zoom/pan for geo, ☐ Performance for large data","--heatmap-cool: #0080FF, --heatmap-neutral: #FFFFFF, --heatmap-hot: #FF0000, --cell-size: 24px, --legend-width: 200px, --tooltip-bg: rgba(0,0,0,0.9)"
+30,Executive Dashboard,BI/Analytics,"High-level KPIs, large key metrics, minimal detail, summary view, trend indicators, at-a-glance insights, executive summary","Brand colors, professional palette (blue/grey/white), accent for KPIs, red for alerts/concerns","KPI highlight colors: positive (green), negative (red), neutral (grey), trend arrow colors","KPI value animations (count-up), trend arrow direction animations, metric card hover lift, alert pulse effect","C-suite dashboards, business summary reports, decision-maker dashboards, strategic planning views","Detailed analyst dashboards, technical deep-dives, operational monitoring",✓ Full,✓ Full,⚡ Excellent,✓ WCAG AA,✗ Low (not mobile-optimized),✗ Not applicable,"Recharts 9/10, Chart.js 9/10, D3.js 10/10",2020s Modern,Medium,"Design an executive dashboard. Use: large KPI cards (4-6 max), trend sparklines, high-level summary only, clean layout with white space, traffic light indicators (red/yellow/green), at-a-glance insights, minimal detail.","display: flex for KPI row, large font-size (24-48px) for metrics, sparkline SVG inline, status indicators (border-left color), card shadows for hierarchy, responsive breakpoints","☐ KPIs 4-6 maximum, ☐ Trends visible, ☐ Status colors clear, ☐ One-page view, ☐ Mobile simplified, ☐ Print-friendly layout","--kpi-font-size: 48px, --sparkline-height: 32px, --status-green: #22C55E, --status-yellow: #F59E0B, --status-red: #EF4444, --card-min-width: 280px"
+31,Real-Time Monitoring,BI/Analytics,"Live data updates, status indicators, alert notifications, streaming data visualization, active monitoring, streaming charts","Alert colors: critical (red #FF0000), warning (orange #FFA500), normal (green #22C55E), updating (blue animation)","Status indicator colors, chart line colors varying by metric, streaming data highlight colors","Real-time chart animations, alert pulse/glow, status indicator blink animation, smooth data stream updates, loading effect","System monitoring dashboards, DevOps dashboards, real-time analytics, stock market dashboards, live event tracking","Historical analysis, long-term trend reports, archived data dashboards",✓ Full,✓ Full,⚡ Good (real-time load),✓ WCAG AA,◐ Medium,✗ Not applicable,"Recharts 9/10, Chart.js 9/10, D3.js 10/10",2020s Modern,Medium,"Design a real-time monitoring dashboard. Use: live status indicators (pulsing), streaming charts, alert notifications, connection status, auto-refresh indicators, critical alerts prominent, system health overview.","animation: pulse for live, WebSocket for streaming, position: fixed for alerts, status-dot with animation, chart real-time updates, notification toast, connection indicator","☐ Live updates working, ☐ Alert sounds optional, ☐ Connection status shown, ☐ Auto-refresh indicated, ☐ Critical alerts prominent, ☐ Offline fallback","--pulse-animation: pulse 2s infinite, --alert-z-index: 1000, --live-indicator: #22C55E, --critical-color: #DC2626, --update-interval: 5s, --toast-duration: 5s"
+32,Drill-Down Analytics,BI/Analytics,"Hierarchical data exploration, expandable sections, interactive drill-down paths, summary-to-detail flow, context preservation","Primary brand, breadcrumb colors, drill-level indicator colors, hierarchy depth colors","Drill-down path indicator colors, level-specific colors, highlight colors for selected level, transition colors","Drill-down expand animations, breadcrumb click transitions, smooth detail reveal, level change smooth, data reload animation","Sales analytics, product analytics, funnel analysis, multi-dimensional data exploration, business intelligence","Simple linear data, single-metric dashboards, streaming real-time dashboards",✓ Full,✓ Full,⚡ Good,✓ WCAG AA,◐ Medium,✗ Not applicable,"Recharts 9/10, Chart.js 9/10, D3.js 10/10",2020s Modern,Medium,"Design a drill-down analytics dashboard. Use: breadcrumb navigation, expandable sections, summary-to-detail flow, back button prominent, level indicators, context preservation, hierarchical data display.","breadcrumb nav with separators, details/summary for expand, transition for drill animation, position: sticky breadcrumb, nested grid layouts, smooth scroll to detail","☐ Breadcrumbs clear, ☐ Back navigation easy, ☐ Expand animation smooth, ☐ Context preserved, ☐ Mobile drill works, ☐ Deep links supported","--breadcrumb-separator: /, --expand-duration: 300ms, --level-indent: 24px, --back-button-size: 40px, --context-bar-height: 48px, --drill-transition: 300ms ease"
+33,Comparative Analysis Dashboard,BI/Analytics,"Side-by-side comparisons, period-over-period metrics, A/B test results, regional comparisons, performance benchmarks","Comparison colors: primary (blue), comparison (orange/purple), delta indicator (green/red)","Winning metric color (green), losing metric color (red), neutral comparison (grey), benchmark colors","Comparison bar animations (grow to value), delta indicator animations (direction arrows), highlight on compare","Period-over-period reporting, A/B test dashboards, market comparison, competitive analysis, regional performance","Single metric dashboards, future projections (use forecasting), real-time only (no historical)",✓ Full,✓ Full,⚡ Excellent,✓ WCAG AA,◐ Medium,✗ Not applicable,"Recharts 9/10, Chart.js 9/10, D3.js 10/10",2020s Modern,Medium,"Design a comparison dashboard. Use: side-by-side metrics, period selectors (vs last month), delta indicators (+/-), benchmark lines, A/B comparison tables, winning/losing highlights, percentage change badges.","display: flex for side-by-side, gap for comparison spacing, color coding (green up, red down), arrow indicators, diff highlighting, comparison table zebra striping","☐ Period selector works, ☐ Deltas calculated, ☐ Colors meaningful, ☐ Benchmarks shown, ☐ Mobile stacks properly, ☐ Export comparison","--positive-color: #22C55E, --negative-color: #EF4444, --neutral-color: #6B7280, --comparison-gap: 2rem, --arrow-size: 16px, --badge-padding: 4px 8px"
+34,Predictive Analytics,BI/Analytics,"Forecast lines, confidence intervals, trend projections, scenario modeling, AI-driven insights, anomaly detection visualization","Forecast line color (distinct from actual), confidence interval shading, anomaly highlight (red alert), trend colors","High confidence (dark color), low confidence (light color), anomaly colors (red/orange), normal trend (green/blue)","Forecast line animation on draw, confidence band fade-in, anomaly pulse alert, smoothing function animations","Forecasting dashboards, anomaly detection systems, trend prediction dashboards, AI-powered analytics, budget planning","Historical-only dashboards, simple reporting, real-time operational dashboards",✓ Full,✓ Full,⚠ Good (computation),✓ WCAG AA,◐ Medium,✗ Not applicable,"Recharts 9/10, Chart.js 9/10, D3.js 10/10",2020s Modern,Medium,"Design a predictive analytics dashboard. Use: forecast lines (dashed), confidence intervals (shaded bands), trend projections, anomaly highlights, scenario toggles, AI insight cards, probability indicators.","stroke-dasharray for forecast lines, fill-opacity for confidence bands, anomaly markers (circles), tooltip for predictions, toggle switches for scenarios, gradient for probability","☐ Forecast line distinct, ☐ Confidence bands visible, ☐ Anomalies highlighted, ☐ Scenarios switchable, ☐ Predictions dated, ☐ Accuracy shown","--forecast-dash: 5 5, --confidence-opacity: 0.2, --anomaly-color: #F59E0B, --prediction-color: #8B5CF6, --scenario-toggle-width: 48px, --ai-accent: #6366F1"
+35,User Behavior Analytics,BI/Analytics,"Funnel visualization, user flow diagrams, conversion tracking, engagement metrics, user journey mapping, cohort analysis","Funnel stage colors: high engagement (green), drop-off (red), conversion (blue), user flow arrows (grey)","Stage completion colors (success), abandonment colors (warning), engagement levels (gradient), cohort colors","Funnel animation (fill-down), flow diagram animations (connection draw), conversion pulse, engagement bar fill","Conversion funnel analysis, user journey tracking, engagement analytics, cohort analysis, retention tracking","Real-time operational metrics, technical system monitoring, financial transactions",✓ Full,✓ Full,⚡ Good,✓ WCAG AA,✓ Good,✗ Not applicable,"Recharts 9/10, Chart.js 9/10, D3.js 10/10",2020s Modern,Medium,"Design a user behavior analytics dashboard. Use: funnel visualization, user flow diagrams (Sankey), conversion metrics, engagement heatmaps, cohort tables, retention curves, session replay indicators.","SVG funnel with gradients, Sankey diagram library, percentage labels, cohort grid cells, retention chart (line/area), click heatmap overlay, session timeline","☐ Funnel stages clear, ☐ Flow diagram readable, ☐ Conversions calculated, ☐ Cohorts comparable, ☐ Retention trends visible, ☐ Privacy compliant","--funnel-width: 100%, --stage-colors: gradient, --flow-opacity: 0.6, --cohort-cell-size: 40px, --retention-line-color: #3B82F6, --engagement-scale: 5 levels"
+36,Financial Dashboard,BI/Analytics,"Revenue metrics, profit/loss visualization, budget tracking, financial ratios, portfolio performance, cash flow, audit trail","Financial colors: profit (green #22C55E), loss (red #EF4444), neutral (grey), trust (dark blue #003366)","Revenue highlight (green), expenses (red), budget variance (orange/red), balance (grey), accuracy (blue)","Number animations (count-up), trend direction indicators, percentage change animations, profit/loss color transitions","Financial reporting, accounting dashboards, portfolio tracking, budget monitoring, banking analytics","Simple business dashboards, entertainment/social metrics, non-financial data",✓ Full,✓ Full,⚡ Excellent,✓ WCAG AAA,✗ Low,✗ Not applicable,"Recharts 9/10, Chart.js 9/10, D3.js 10/10",2020s Modern,Medium,"Design a financial dashboard. Use: revenue/expense charts, profit margins, budget vs actual, cash flow waterfall, financial ratios, audit trail table, currency formatting, period comparisons.","number formatting (Intl.NumberFormat), waterfall chart (positive/negative bars), variance coloring, table with totals row, sparkline for trends, sticky column headers","☐ Currency formatted, ☐ Decimals consistent, ☐ P&L clear, ☐ Budget variance shown, ☐ Audit trail complete, ☐ Export to Excel","--currency-symbol: $, --decimal-places: 2, --profit-color: #22C55E, --loss-color: #EF4444, --variance-threshold: 10%, --table-header-bg: #F3F4F6"
+37,Sales Intelligence Dashboard,BI/Analytics,"Deal pipeline, sales metrics, territory performance, sales rep leaderboard, win-loss analysis, quota tracking, forecast accuracy","Sales colors: won (green), lost (red), in-progress (blue), blocked (orange), quota met (gold), quota missed (grey)","Pipeline stage colors, rep performance colors, quota achievement colors, forecast accuracy colors","Deal movement animations, metric updates, leaderboard ranking changes, gauge needle movements, status change highlights","CRM dashboards, sales management, opportunity tracking, performance management, quota planning","Marketing analytics, customer support metrics, HR dashboards",✓ Full,✓ Full,⚡ Good,✓ WCAG AA,◐ Medium,✗ Not applicable,"Recharts 9/10, Chart.js 9/10",2020s Modern,Medium,"Design a sales intelligence dashboard. Use: pipeline funnel, deal cards (kanban), quota gauges, leaderboard table, territory map, win/loss ratios, forecast accuracy, activity timeline.","kanban columns (flex), gauge chart (SVG arc), leaderboard ranking styles, map integration (Mapbox/Google), timeline vertical, deal card with status border","☐ Pipeline stages shown, ☐ Deals draggable, ☐ Quotas visualized, ☐ Rankings updated, ☐ Territory clickable, ☐ CRM integration","--pipeline-colors: stage gradient, --gauge-track: #E5E7EB, --gauge-fill: primary, --rank-1-color: #FFD700, --rank-2-color: #C0C0C0, --rank-3-color: #CD7F32"
+38,Neubrutalism,General,"Bold borders, black outlines, primary colors, thick shadows, no gradients, flat colors, 45° shadows, playful, Gen Z","#FFEB3B (Yellow), #FF5252 (Red), #2196F3 (Blue), #000000 (Black borders)","Limited accent colors, high contrast combinations, no gradients allowed","box-shadow: 4px 4px 0 #000, border: 3px solid #000, no gradients, sharp corners (0px), bold typography","Gen Z brands, startups, creative agencies, Figma-style apps, Notion-style interfaces, tech blogs","Luxury brands, finance, healthcare, conservative industries (too playful)",✓ Full,✓ Full,⚡ Excellent,✓ WCAG AAA,✓ High,✓ High,"Tailwind 10/10, Bootstrap 8/10",2020s Modern,Low,"Design a neubrutalist interface. Use: high contrast, hard black borders (3px+), bright pop colors, no blur, sharp or slightly rounded corners, bold typography, hard shadows (offset 4px 4px), raw aesthetic but functional.","border: 3px solid black, box-shadow: 5px 5px 0px black, colors: #FFDB58 #FF6B6B #4ECDC4, font-weight: 700, no gradients","☐ Hard borders (2-4px), ☐ Hard offset shadows, ☐ High saturation colors, ☐ Bold typography, ☐ No blurs/gradients, ☐ Distinctive 'ugly-cute' look","--border-width: 3px, --shadow-offset: 4px, --shadow-color: #000, --colors: high saturation, --font: bold sans"
+39,Bento Box Grid,General,"Modular cards, asymmetric grid, varied sizes, Apple-style, dashboard tiles, negative space, clean hierarchy, cards","Neutral base + brand accent, #FFFFFF, #F5F5F5, brand primary","Subtle gradients, shadow variations, accent highlights for interactive cards","grid-template with varied spans, rounded-xl (16px), subtle shadows, hover scale (1.02), smooth transitions","Dashboards, product pages, portfolios, Apple-style marketing, feature showcases, SaaS","Dense data tables, text-heavy content, real-time monitoring",✓ Full,✓ Full,⚡ Excellent,✓ WCAG AA,✓ High,✓ High,"Tailwind 10/10, CSS Grid 10/10",2020s Apple,Low,"Design a Bento Box grid layout. Use: modular cards with varied sizes (1x1, 2x1, 2x2), Apple-style aesthetic, rounded corners (16-24px), soft shadows, clean hierarchy, asymmetric grid, neutral backgrounds (#F5F5F7), hover effects.","display: grid, grid-template-columns: repeat(4, 1fr), grid-auto-rows: 200px, gap: 16px, border-radius: 24px, background: #FFFFFF, box-shadow: 0 4px 6px rgba(0,0,0,0.05)","☐ Grid responsive (4→2→1 cols), ☐ Card spans varied, ☐ Rounded corners consistent, ☐ Shadows subtle, ☐ Content fits cards, ☐ Hover scale (1.02)","--grid-gap: 16px, --card-radius: 24px, --card-bg: #FFFFFF, --page-bg: #F5F5F7, --shadow: 0 4px 6px rgba(0,0,0,0.05), --hover-scale: 1.02"
+40,Y2K Aesthetic,General,"Neon pink, chrome, metallic, bubblegum, iridescent, glossy, retro-futurism, 2000s, futuristic nostalgia","#FF69B4 (Hot Pink), #00FFFF (Cyan), #C0C0C0 (Silver), #9400D3 (Purple)","Metallic gradients, glossy overlays, iridescent effects, chrome textures","linear-gradient metallic, glossy buttons, 3D chrome effects, glow animations, bubble shapes","Fashion brands, music platforms, Gen Z brands, nostalgia marketing, entertainment, youth-focused","B2B enterprise, healthcare, finance, conservative industries, elderly users",✓ Full,◐ Partial,⚠ Good,⚠ Check contrast,✓ Good,✓ High,"Tailwind 8/10, CSS-in-JS 9/10",Y2K 2000s,Medium,"Design a Y2K aesthetic interface. Use: neon pink/cyan colors, chrome/metallic textures, bubblegum gradients, glossy buttons, iridescent effects, 2000s futurism, star/sparkle decorations, bubble shapes, tech-optimistic vibe.","background: linear-gradient(135deg, #FF69B4, #00FFFF), filter: drop-shadow for glow, border-radius: 50% for bubbles, metallic gradients (silver/chrome), text-shadow: neon glow, ::before for sparkles","☐ Neon colors balanced, ☐ Chrome effects visible, ☐ Glossy buttons styled, ☐ Bubble shapes decorative, ☐ Sparkle animations, ☐ Retro fonts loaded","--neon-pink: #FF69B4, --neon-cyan: #00FFFF, --chrome-silver: #C0C0C0, --glossy-gradient: linear-gradient(180deg, white 0%, transparent 50%), --glow-blur: 10px"
+41,Cyberpunk UI,General,"Neon, dark mode, terminal, HUD, sci-fi, glitch, dystopian, futuristic, matrix, tech noir","#00FF00 (Matrix Green), #FF00FF (Magenta), #00FFFF (Cyan), #0D0D0D (Dark)","Neon gradients, scanline overlays, glitch colors, terminal green accents","Neon glow (text-shadow), glitch animations (skew/offset), scanlines (::before overlay), terminal fonts","Gaming platforms, tech products, crypto apps, sci-fi applications, developer tools, entertainment","Corporate enterprise, healthcare, family apps, conservative brands, elderly users",✗ No,✓ Only,⚠ Moderate,⚠ Limited (dark+neon),◐ Medium,◐ Medium,"Tailwind 8/10, Custom CSS 10/10",2020s Cyberpunk,Medium,"Design a cyberpunk interface. Use: neon colors on dark (#0D0D0D), terminal/HUD aesthetic, glitch effects, scanlines overlay, matrix green accents, monospace fonts, angular shapes, dystopian tech feel.","background: #0D0D0D, color: #00FF00 or #FF00FF, font-family: monospace, text-shadow: 0 0 10px neon, animation: glitch (transform skew), ::before scanlines (repeating-linear-gradient)","☐ Dark background only, ☐ Neon accents visible, ☐ Glitch effect subtle, ☐ Scanlines optional, ☐ Monospace font, ☐ Terminal aesthetic","--bg-dark: #0D0D0D, --neon-green: #00FF00, --neon-magenta: #FF00FF, --neon-cyan: #00FFFF, --scanline-opacity: 0.1, --glitch-duration: 0.3s"
+42,Organic Biophilic,General,"Nature, organic shapes, green, sustainable, rounded, flowing, wellness, earthy, natural textures","#228B22 (Forest Green), #8B4513 (Earth Brown), #87CEEB (Sky Blue), #F5F5DC (Beige)","Natural gradients, earth tones, sky blues, organic textures, wood/stone colors","Rounded corners (16-24px), organic curves (border-radius variations), natural shadows, flowing SVG shapes","Wellness apps, sustainability brands, eco products, health apps, meditation, organic food brands","Tech-focused products, gaming, industrial, urban brands",✓ Full,✓ Full,⚡ Excellent,✓ WCAG AA,✓ High,✓ High,"Tailwind 10/10, CSS 10/10",2020s Sustainable,Low,"Design a biophilic organic interface. Use: nature-inspired colors (greens, browns), organic curved shapes, rounded corners (16-24px), natural textures (wood, stone), flowing SVG elements, wellness aesthetic, earthy palette.","border-radius: 16-24px (varied), background: earth tones, SVG organic shapes (blob), box-shadow: natural soft, color: #228B22 #8B4513 #87CEEB, texture overlays (subtle)","☐ Earth tones dominant, ☐ Organic curves present, ☐ Natural textures subtle, ☐ Green accents, ☐ Rounded everywhere, ☐ Calming feel","--forest-green: #228B22, --earth-brown: #8B4513, --sky-blue: #87CEEB, --cream-bg: #F5F5DC, --organic-radius: 24px, --shadow-soft: 0 8px 32px rgba(0,0,0,0.08)"
+43,AI-Native UI,General,"Chatbot, conversational, voice, assistant, agentic, ambient, minimal chrome, streaming text, AI interactions","Neutral + single accent, #6366F1 (AI Purple), #10B981 (Success), #F5F5F5 (Background)","Status indicators, streaming highlights, context card colors, subtle accent variations","Typing indicators (3-dot pulse), streaming text animations, pulse animations, context cards, smooth reveals","AI products, chatbots, voice assistants, copilots, AI-powered tools, conversational interfaces","Traditional forms, data-heavy dashboards, print-first content",✓ Full,✓ Full,⚡ Excellent,✓ WCAG AA,✓ High,✓ High,"Tailwind 10/10, React 10/10",2020s AI-Era,Low,"Design an AI-native interface. Use: minimal chrome, conversational layout, streaming text area, typing indicators (3-dot pulse), context cards, subtle AI accent color (#6366F1), clean input field, response bubbles.","chat bubble layout (flex-direction: column), typing animation (3 dots pulse), streaming text (overflow: hidden + animation), input: sticky bottom, context cards (border-left accent), minimal borders","☐ Chat layout responsive, ☐ Typing indicator smooth, ☐ Input always visible, ☐ Context cards styled, ☐ AI responses distinct, ☐ User messages aligned right","--ai-accent: #6366F1, --user-bubble-bg: #E0E7FF, --ai-bubble-bg: #F9FAFB, --input-height: 48px, --typing-dot-size: 8px, --message-gap: 16px"
+44,Memphis Design,General,"80s, geometric, playful, postmodern, shapes, patterns, squiggles, triangles, neon, abstract, bold","#FF71CE (Hot Pink), #FFCE5C (Yellow), #86CCCA (Teal), #6A7BB4 (Blue Purple)","Complementary geometric colors, pattern fills, contrasting accent shapes","transform: rotate(), clip-path: polygon(), mix-blend-mode, repeating patterns, bold shapes","Creative agencies, music sites, youth brands, event promotion, artistic portfolios, entertainment","Corporate finance, healthcare, legal, elderly users, conservative brands",✓ Full,✓ Full,⚡ Excellent,⚠ Check contrast,✓ Good,◐ Medium,"Tailwind 9/10, CSS 10/10",1980s Postmodern,Medium,"Design a Memphis style interface. Use: bold geometric shapes (triangles, squiggles, circles), bright clashing colors, 80s postmodern aesthetic, playful patterns, dotted textures, asymmetric layouts, decorative elements.","clip-path: polygon() for shapes, background: repeating patterns, transform: rotate() for tilted elements, mix-blend-mode for overlays, border: dashed/dotted patterns, bold sans-serif","☐ Geometric shapes visible, ☐ Colors bold/clashing, ☐ Patterns present, ☐ Layout asymmetric, ☐ Playful decorations, ☐ 80s vibe achieved","--memphis-pink: #FF71CE, --memphis-yellow: #FFCE5C, --memphis-teal: #86CCCA, --memphis-purple: #6A7BB4, --pattern-size: 20px, --shape-rotation: 15deg"
+45,Vaporwave,General,"Synthwave, retro-futuristic, 80s-90s, neon, glitch, nostalgic, sunset gradient, dreamy, aesthetic","#FF71CE (Pink), #01CDFE (Cyan), #05FFA1 (Mint), #B967FF (Purple)","Sunset gradients, glitch overlays, VHS effects, neon accents, pastel variations","text-shadow glow, linear-gradient, filter: hue-rotate(), glitch animations, retro scan lines","Music platforms, gaming, creative portfolios, tech startups, entertainment, artistic projects","Business apps, e-commerce, education, healthcare, enterprise software",✓ Full,✓ Dark focused,⚠ Moderate,⚠ Poor (motion),◐ Medium,◐ Medium,"Tailwind 8/10, CSS-in-JS 9/10",1980s-90s Retro,Medium,"Design a vaporwave aesthetic interface. Use: sunset gradients (pink/cyan/purple), 80s-90s nostalgia, glitch effects, Greek statue imagery, palm trees, grid patterns, neon glow, retro-futuristic feel, dreamy atmosphere.","background: linear-gradient(180deg, #FF71CE, #01CDFE, #B967FF), filter: hue-rotate(), text-shadow: neon glow, retro grid (perspective + linear-gradient), VHS scanlines","☐ Sunset gradient present, ☐ Neon glow applied, ☐ Retro grid visible, ☐ Glitch effects subtle, ☐ Dreamy atmosphere, ☐ 80s-90s aesthetic","--vapor-pink: #FF71CE, --vapor-cyan: #01CDFE, --vapor-mint: #05FFA1, --vapor-purple: #B967FF, --grid-color: rgba(255,255,255,0.1), --glow-intensity: 15px"
+46,Dimensional Layering,General,"Depth, overlapping, z-index, layers, 3D, shadows, elevation, floating, cards, spatial hierarchy","Neutral base (#FFFFFF, #F5F5F5, #E0E0E0) + brand accent for elevated elements","Shadow variations (sm/md/lg/xl), elevation colors, highlight colors for top layers","z-index stacking, box-shadow elevation (4 levels), transform: translateZ(), backdrop-filter, parallax","Dashboards, card layouts, modals, navigation, product showcases, SaaS interfaces","Print-style layouts, simple blogs, low-end devices, flat design requirements",✓ Full,✓ Full,⚠ Good,⚠ Moderate (SR issues),✓ Good,✓ High,"Tailwind 10/10, MUI 10/10, Chakra 10/10",2020s Modern,Medium,"Design with dimensional layering. Use: z-index depth (multiple layers), overlapping cards, elevation shadows (4 levels), floating elements, parallax depth, backdrop blur for hierarchy, spatial UI feel.","z-index: 1-4 levels, box-shadow: elevation scale (sm/md/lg/xl), transform: translateZ(), backdrop-filter: blur(), position: relative for stacking, parallax on scroll","☐ Layers clearly defined, ☐ Shadows show depth, ☐ Overlaps intentional, ☐ Hierarchy clear, ☐ Performance optimized, ☐ Mobile depth maintained","--elevation-1: 0 1px 3px rgba(0,0,0,0.1), --elevation-2: 0 4px 6px rgba(0,0,0,0.1), --elevation-3: 0 10px 20px rgba(0,0,0,0.1), --elevation-4: 0 20px 40px rgba(0,0,0,0.15), --blur-amount: 8px"
+47,Exaggerated Minimalism,General,"Bold minimalism, oversized typography, high contrast, negative space, loud minimal, statement design","#000000 (Black), #FFFFFF (White), single vibrant accent only","Minimal - single accent color, no secondary colors, extreme restraint","font-size: clamp(3rem 10vw 12rem), font-weight: 900, letter-spacing: -0.05em, massive whitespace","Fashion, architecture, portfolios, agency landing pages, luxury brands, editorial","E-commerce catalogs, dashboards, forms, data-heavy, elderly users, complex apps",✓ Full,✓ Full,⚡ Excellent,✓ WCAG AA,✓ High,✓ High,"Tailwind 10/10, Typography.js 10/10",2020s Modern,Low,"Design with exaggerated minimalism. Use: oversized typography (clamp 3rem-12rem), extreme negative space, black/white primary, single accent color only, bold statements, minimal elements, dramatic contrast.","font-size: clamp(3rem, 10vw, 12rem), font-weight: 900, letter-spacing: -0.05em, color: #000 or #FFF, padding: 8rem+, single accent, no decorations","☐ Typography oversized, ☐ White space extreme, ☐ Black/white dominant, ☐ Single accent only, ☐ Elements minimal, ☐ Statement clear","--type-giant: clamp(3rem, 10vw, 12rem), --type-weight: 900, --spacing-huge: 8rem, --color-primary: #000000, --color-bg: #FFFFFF, --accent: single color only"
+48,Kinetic Typography,General,"Motion text, animated type, moving letters, dynamic, typing effect, morphing, scroll-triggered text","Flexible - high contrast recommended, bold colors for emphasis, animation-friendly palette","Accent colors for emphasis, transition colors, gradient text fills","@keyframes text animation, typing effect, background-clip: text, GSAP ScrollTrigger, split text","Hero sections, marketing sites, video platforms, storytelling, creative portfolios, landing pages","Long-form content, accessibility-critical, data interfaces, forms, elderly users",✓ Full,✓ Full,⚠ Moderate,❌ Poor (motion),✓ Good,✓ Very High,"GSAP 10/10, Framer Motion 10/10",2020s Modern,High,"Design with kinetic typography. Use: animated text, scroll-triggered reveals, typing effects, letter-by-letter animations, morphing text, gradient text fills, oversized hero text, text as the main visual element.","@keyframes for text animation, background-clip: text, GSAP SplitText, typing effect (steps()), transform on letters, scroll-triggered (Intersection Observer), variable fonts for morphing","☐ Text animations smooth, ☐ Prefers-reduced-motion respected, ☐ Fallback for no-JS, ☐ Mobile performance ok, ☐ Typing effect timed, ☐ Scroll triggers work","--text-animation-duration: 1s, --letter-delay: 0.05s, --typing-speed: 100ms, --gradient-text: linear-gradient(90deg, #color1, #color2), --morph-duration: 0.5s"
+49,Parallax Storytelling,General,"Scroll-driven, narrative, layered scrolling, immersive, progressive disclosure, cinematic, scroll-triggered","Story-dependent, often gradients and natural colors, section-specific palettes","Section transition colors, depth layer colors, narrative mood colors","transform: translateY(scroll), position: fixed/sticky, perspective: 1px, scroll-triggered animations","Brand storytelling, product launches, case studies, portfolios, annual reports, marketing campaigns","E-commerce, dashboards, mobile-first, SEO-critical, accessibility-required",✓ Full,✓ Full,❌ Poor,❌ Poor (motion),✗ Low,✓ High,"GSAP ScrollTrigger 10/10, Locomotive Scroll 10/10",2020s Modern,High,"Design a parallax storytelling page. Use: scroll-driven narrative, layered backgrounds (3-5 layers), fixed/sticky sections, cinematic transitions, progressive disclosure, full-screen chapters, depth perception.","position: fixed/sticky, transform: translateY(calc()), perspective: 1px, z-index layering, scroll-snap-type, Intersection Observer for triggers, will-change: transform","☐ Layers parallax smoothly, ☐ Story flows naturally, ☐ Mobile alternative provided, ☐ Performance optimized, ☐ Skip option available, ☐ Reduced motion fallback","--parallax-speed-bg: 0.3, --parallax-speed-mid: 0.6, --parallax-speed-fg: 1, --section-height: 100vh, --transition-duration: 600ms, --perspective: 1px"
+50,Swiss Modernism 2.0,General,"Grid system, Helvetica, modular, asymmetric, international style, rational, clean, mathematical spacing","#000000, #FFFFFF, #F5F5F5, single vibrant accent only","Minimal secondary, accent for emphasis only, no gradients","display: grid, grid-template-columns: repeat(12 1fr), gap: 1rem, mathematical ratios, clear hierarchy","Corporate sites, architecture, editorial, SaaS, museums, professional services, documentation","Playful brands, children's sites, entertainment, gaming, emotional storytelling",✓ Full,✓ Full,⚡ Excellent,✓ WCAG AAA,✓ High,✓ High,"Tailwind 10/10, Bootstrap 9/10, Foundation 10/10",1950s Swiss + 2020s,Low,"Design with Swiss Modernism 2.0. Use: strict grid system (12 columns), Helvetica/Inter fonts, mathematical spacing, asymmetric balance, high contrast, minimal decoration, clean hierarchy, single accent color.","display: grid, grid-template-columns: repeat(12, 1fr), gap: 1rem (8px base unit), font-family: Inter/Helvetica, font-weight: 400-700, color: #000/#FFF, single accent","☐ 12-column grid strict, ☐ Spacing mathematical, ☐ Typography hierarchy clear, ☐ Single accent only, ☐ No decorations, ☐ High contrast verified","--grid-columns: 12, --grid-gap: 1rem, --base-unit: 8px, --font-primary: Inter, --color-text: #000000, --color-bg: #FFFFFF, --accent: single vibrant"
+51,HUD / Sci-Fi FUI,General,"Futuristic, technical, wireframe, neon, data, transparency, iron man, sci-fi, interface","Neon Cyan #00FFFF, Holographic Blue #0080FF, Alert Red #FF0000","Transparent Black, Grid Lines #333333","Glow effects, scanning animations, ticker text, blinking markers, fine line drawing","Sci-fi games, space tech, cybersecurity, movie props, immersive dashboards","Standard corporate, reading heavy content, accessible public services",✓ Low,✓ Full,⚠ Moderate (renders),⚠ Poor (thin lines),◐ Medium,✗ Low,"React 9/10, Canvas 10/10",2010s Sci-Fi,High,"Design a futuristic HUD (Heads Up Display) or FUI. Use: thin lines (1px), neon cyan/blue on black, technical markers, decorative brackets, data visualization, monospaced tech fonts, glowing elements, transparency.","border: 1px solid rgba(0,255,255,0.5), color: #00FFFF, background: transparent or rgba(0,0,0,0.8), font-family: monospace, text-shadow: 0 0 5px cyan","☐ Fine lines 1px, ☐ Neon glow text/borders, ☐ Monospaced font, ☐ Dark/Transparent BG, ☐ Decorative tech markers, ☐ Holographic feel","--hud-color: #00FFFF, --bg-color: rgba(0,10,20,0.9), --line-width: 1px, --glow: 0 0 5px, --font: monospace"
+52,Pixel Art,General,"Retro, 8-bit, 16-bit, gaming, blocky, nostalgic, pixelated, arcade","Primary colors (NES Palette), brights, limited palette","Black outlines, shading via dithering or block colors","Frame-by-frame sprite animation, blinking cursor, instant transitions, marquee text","Indie games, retro tools, creative portfolios, nostalgia marketing, Web3/NFT","Professional corporate, modern SaaS, high-res photography sites",✓ Full,✓ Full,⚡ Excellent,✓ Good (if contrast ok),✓ High,◐ Medium,"CSS (box-shadow) 8/10, Canvas 10/10",1980s Arcade,Medium,"Design a pixel art inspired interface. Use: pixelated fonts, 8-bit or 16-bit aesthetic, sharp edges (image-rendering: pixelated), limited color palette, blocky UI elements, retro gaming feel.","font-family: 'Press Start 2P', image-rendering: pixelated, box-shadow: 4px 0 0 #000 (pixel border), no anti-aliasing","☐ Pixelated fonts loaded, ☐ Images sharp (no blur), ☐ CSS box-shadow for pixel borders, ☐ Retro palette, ☐ Blocky layout","--pixel-size: 4px, --font: pixel font, --border-style: pixel-shadow, --anti-alias: none"
+53,Bento Grids,General,"Apple-style, modular, cards, organized, clean, hierarchy, grid, rounded, soft","Off-white #F5F5F7, Clean White #FFFFFF, Text #1D1D1F","Subtle accents, soft shadows, blurred backdrops","Hover scale (1.02), soft shadow expansion, smooth layout shifts, content reveal","Product features, dashboards, personal sites, marketing summaries, galleries","Long-form reading, data tables, complex forms",✓ Full,✓ Full,⚡ Excellent,✓ WCAG AA,✓ High,✓ High,"CSS Grid 10/10, Tailwind 10/10",2020s Apple/Linear,Low,"Design a Bento Grid layout. Use: modular grid system, rounded corners (16-24px), different card sizes (1x1, 2x1, 2x2), card-based hierarchy, soft backgrounds (#F5F5F7), subtle borders, content-first, Apple-style aesthetic.","display: grid, grid-template-columns: repeat(auto-fit, minmax(...)), gap: 1rem, border-radius: 20px, background: #FFF, box-shadow: subtle","☐ Grid layout (CSS Grid), ☐ Rounded corners 16-24px, ☐ Varied card spans, ☐ Content fits card size, ☐ Responsive re-flow, ☐ Apple-like aesthetic","--grid-gap: 20px, --card-radius: 24px, --card-bg: #FFFFFF, --page-bg: #F5F5F7, --shadow: soft"
+55,Spatial UI (VisionOS),General,"Glass, depth, immersion, spatial, translucent, gaze, gesture, apple, vision-pro","Frosted Glass #FFFFFF (15-30% opacity), System White","Vibrant system colors for active states, deep shadows for depth","Parallax depth, dynamic lighting response, gaze-hover effects, smooth scale on focus","Spatial computing apps, VR/AR interfaces, immersive media, futuristic dashboards","Text-heavy documents, high-contrast requirements, non-3D capable devices",✓ Full,✓ Full,⚠ Moderate (blur cost),⚠ Contrast risks,✓ High (if adapted),✓ High,"SwiftUI, React (Three.js/Fiber)",2024 Spatial Era,High,"Design a VisionOS-style spatial interface. Use: frosted glass panels, depth layers, translucent backgrounds (15-30% opacity), vibrant colors for active states, gaze-hover effects, floating windows, immersive feel.","backdrop-filter: blur(40px) saturate(180%), background: rgba(255,255,255,0.2), border-radius: 24px, box-shadow: 0 8px 32px rgba(0,0,0,0.1), transform: scale on focus, depth via shadows","☐ Glass effect visible, ☐ Depth layers clear, ☐ Hover states defined, ☐ Colors vibrant on active, ☐ Floating feel achieved, ☐ Contrast maintained","--glass-bg: rgba(255,255,255,0.2), --glass-blur: 40px, --glass-saturate: 180%, --window-radius: 24px, --depth-shadow: 0 8px 32px rgba(0,0,0,0.1), --focus-scale: 1.02"
+56,E-Ink / Paper,General,"Paper-like, matte, high contrast, texture, reading, calm, slow tech, monochrome","Off-White #FDFBF7, Paper White #F5F5F5, Ink Black #1A1A1A","Pencil Grey #4A4A4A, Highlighter Yellow #FFFF00 (accent)","No motion blur, distinct page turns, grain/noise texture, sharp transitions (no fade)","Reading apps, digital newspapers, minimal journals, distraction-free writing, slow-living brands","Gaming, video platforms, high-energy marketing, dark mode dependent apps",✓ Full,✗ Low (inverted only),⚡ Excellent,✓ WCAG AAA,✓ High,✓ Medium,"Tailwind 10/10, CSS 10/10",2020s Digital Well-being,Low,"Design an e-ink/paper style interface. Use: high contrast black on off-white, paper texture, no animations (instant transitions), reading-focused, minimal UI chrome, distraction-free, calm aesthetic, monochrome.","background: #FDFBF7 (paper white), color: #1A1A1A, transition: none, font-family: serif for reading, no gradients, border: 1px solid #E0E0E0, texture overlay (noise)","☐ Paper background color, ☐ High contrast text, ☐ No animations, ☐ Reading optimized, ☐ Distraction-free, ☐ Print-friendly","--paper-bg: #FDFBF7, --ink-color: #1A1A1A, --pencil-grey: #4A4A4A, --border-color: #E0E0E0, --font-reading: Georgia, --transition: none"
+57,Gen Z Chaos / Maximalism,General,"Chaos, clutter, stickers, raw, collage, mixed media, loud, internet culture, ironic","Clashing Brights: #FF00FF, #00FF00, #FFFF00, #0000FF","Gradients, rainbow, glitch, noise, heavily saturated mix","Marquee scrolls, jitter, sticker layering, GIF overload, random placement, drag-and-drop","Gen Z lifestyle brands, music artists, creative portfolios, viral marketing, fashion","Corporate, government, healthcare, banking, serious tools",✓ Full,✓ Full,⚠ Poor (heavy assets),❌ Poor,◐ Medium,✓ High (Viral),CSS-in-JS 8/10,2023+ Internet Core,High,"Design a Gen Z chaos maximalist interface. Use: clashing bright colors, sticker overlays, collage aesthetic, raw/unpolished feel, mixed media, ironic elements, loud typography, GIF-heavy, internet culture references.","mix-blend-mode: multiply/screen, transform: rotate(random), animation: jitter, marquee text, position: absolute for scattered elements, filter: saturate(150%), z-index chaos","☐ Colors clash intentionally, ☐ Stickers/overlays present, ☐ Layout chaotic but usable, ☐ GIFs optimized, ☐ Mobile scrollable, ☐ Performance acceptable","--chaos-pink: #FF00FF, --chaos-green: #00FF00, --chaos-yellow: #FFFF00, --chaos-blue: #0000FF, --jitter-amount: 5deg, --saturate: 150%"
+58,Biomimetic / Organic 2.0,General,"Nature-inspired, cellular, fluid, breathing, generative, algorithms, life-like","Cellular Pink #FF9999, Chlorophyll Green #00FF41, Bioluminescent Blue","Deep Ocean #001E3C, Coral #FF7F50, Organic gradients","Breathing animations, fluid morphing, generative growth, physics-based movement","Sustainability tech, biotech, advanced health, meditation, generative art platforms","Standard SaaS, data grids, strict corporate, accounting",✓ Full,✓ Full,⚠ Moderate,✓ Good,✓ Good,✓ High,"Canvas 10/10, WebGL 10/10",2024+ Generative,High,"Design a biomimetic organic interface. Use: cellular/fluid shapes, breathing animations, generative patterns, bioluminescent colors, physics-based movement, nature algorithms, life-like elements, flowing gradients.","SVG morphing (SMIL or GSAP), canvas for generative, animation: breathing (scale pulse), filter: blur for organic, clip-path for cellular, WebGL for advanced, physics libraries","☐ Organic shapes present, ☐ Animations feel alive, ☐ Generative elements, ☐ Performance monitored, ☐ Mobile fallback, ☐ Accessibility alt content","--cellular-pink: #FF9999, --chlorophyll: #00FF41, --bioluminescent: #00FFFF, --breathing-duration: 4s, --morph-ease: cubic-bezier(0.4, 0, 0.2, 1), --organic-blur: 20px"
+59,Anti-Polish / Raw Aesthetic,General,"Hand-drawn, collage, scanned textures, unfinished, imperfect, authentic, human, sketch, raw marks, creative process","Paper White #FAFAF8, Pencil Grey #4A4A4A, Marker Black #1A1A1A, Kraft Brown #C4A77D","Watercolor washes, pencil shading, ink splatters, tape textures, aged paper tones","No smooth transitions, hand-drawn animations, paper texture overlays, jitter effects, sketch reveal","Creative portfolios, artist sites, indie brands, handmade products, authentic storytelling, editorial","Corporate enterprise, fintech, healthcare, government, polished SaaS",✓ Full,✓ Full,⚡ Excellent,✓ WCAG AA,✓ High,✓ High,"CSS 10/10, SVG 10/10",2025+ Anti-Digital,Low,"Design with anti-polish raw aesthetic. Use: hand-drawn elements, scanned textures, unfinished look, paper/pencil textures, collage style, authentic imperfection, sketch marks, tape/sticker overlays, human touch.","background: url(paper-texture.png), filter: grayscale() contrast(), border: hand-drawn SVG, transform: rotate(small random), no smooth transitions, sketch-style fonts, opacity variations","☐ Textures loaded, ☐ Hand-drawn elements present, ☐ Imperfections intentional, ☐ Authentic feel achieved, ☐ Performance ok with textures, ☐ Accessibility maintained","--paper-bg: #FAFAF8, --pencil-color: #4A4A4A, --marker-black: #1A1A1A, --kraft-brown: #C4A77D, --sketch-rotation: random(-3deg, 3deg), --texture-opacity: 0.3"
+60,Tactile Digital / Deformable UI,General,"Jelly buttons, chrome, clay, squishy, deformable, bouncy, physical, tactile feedback, press response","Gradient metallics, Chrome Silver #C0C0C0, Jelly Pink #FF9ECD, Soft Blue #87CEEB","Glossy highlights, shadow depth, reflection effects, material-specific colors","Press deformation (scale + squish), bounce-back (cubic-bezier), material response, haptic-like feedback, spring physics","Modern mobile apps, playful brands, entertainment, gaming UI, consumer products, interactive demos","Enterprise software, data dashboards, accessibility-critical, professional tools",✓ Full,✓ Full,⚠ Good,⚠ Motion sensitive,✓ High,✓ Very High,"Framer Motion 10/10, React Spring 10/10, GSAP 10/10",2025+ Tactile Era,Medium,"Design a tactile deformable interface. Use: jelly/squishy buttons, press deformation effect, bounce-back animations, chrome/clay materials, spring physics, haptic-like feedback, material response, 3D depth on interaction.","transform: scale(0.95) on active, animation: bounce (cubic-bezier(0.34, 1.56, 0.64, 1)), box-shadow: inset for press, filter: brightness on press, spring physics (react-spring/framer-motion)","☐ Press effect visible, ☐ Bounce-back smooth, ☐ Material feels tactile, ☐ Spring physics tuned, ☐ Mobile touch responsive, ☐ Reduced motion option","--press-scale: 0.95, --bounce-duration: 400ms, --spring-stiffness: 300, --spring-damping: 20, --material-glossy: linear-gradient(135deg, white 0%, transparent 60%), --depth-shadow: 0 10px 30px rgba(0,0,0,0.2)"
+61,Nature Distilled,General,"Muted earthy, skin tones, wood, soil, sand, terracotta, warmth, organic materials, handmade warmth","Terracotta #C67B5C, Sand Beige #D4C4A8, Warm Clay #B5651D, Soft Cream #F5F0E1","Earth Brown #8B4513, Olive Green #6B7B3C, Warm Stone #9C8B7A, muted gradients","Subtle parallax, natural easing (ease-out), texture overlays, grain effects, soft shadows","Wellness brands, sustainable products, artisan goods, organic food, spa/beauty, home decor","Tech startups, gaming, nightlife, corporate finance, high-energy brands",✓ Full,◐ Partial,⚡ Excellent,✓ WCAG AA,✓ High,✓ High,"Tailwind 10/10, CSS 10/10",2025+ Handmade Warmth,Low,"Design with nature distilled aesthetic. Use: muted earthy colors (terracotta, sand, olive), organic materials feel, warm tones, handmade warmth, natural textures, artisan quality, sustainable vibe, soft gradients.","background: warm earth tones, color: #C67B5C #D4C4A8 #6B7B3C, border-radius: organic (varied), box-shadow: soft natural, texture overlays (grain), font: humanist sans-serif","☐ Earth tones dominant, ☐ Warm feel achieved, ☐ Textures subtle, ☐ Handmade quality, ☐ Sustainable messaging, ☐ Calming aesthetic","--terracotta: #C67B5C, --sand-beige: #D4C4A8, --warm-clay: #B5651D, --soft-cream: #F5F0E1, --olive-green: #6B7B3C, --grain-opacity: 0.1"
+62,Interactive Cursor Design,General,"Custom cursor, cursor as tool, hover effects, cursor feedback, pointer transformation, cursor trail, magnetic cursor","Brand-dependent, cursor accent color, high contrast for visibility","Trail colors, hover state colors, magnetic zone indicators, feedback colors","Cursor scale on hover, magnetic pull to elements, cursor morphing, trail effects, blend mode cursors, click feedback","Creative portfolios, interactive experiences, agency sites, product showcases, gaming, entertainment","Mobile-first (no cursor), accessibility-critical, data-heavy dashboards, forms",✓ Full,✓ Full,⚡ Good,⚠ Not for touch/SR,✗ No cursor,✓ High,"GSAP 10/10, Framer Motion 10/10, Custom JS 10/10",2025+ Interactive,Medium,"Design with interactive cursor effects. Use: custom cursor, cursor morphing on hover, magnetic cursor pull, cursor trails, blend mode cursors, click feedback animations, cursor as interaction tool, pointer transformation.","cursor: none (custom), position: fixed for cursor element, mix-blend-mode: difference, transform on hover targets, magnetic effect (JS position lerp), trail with opacity fade, scale on click","☐ Custom cursor works, ☐ Hover morph smooth, ☐ Magnetic pull subtle, ☐ Trail performance ok, ☐ Click feedback visible, ☐ Touch fallback provided","--cursor-size: 20px, --cursor-hover-scale: 1.5, --magnetic-distance: 100px, --trail-length: 10, --trail-fade: 0.1, --blend-mode: difference"
+63,Voice-First Multimodal,General,"Voice UI, multimodal, audio feedback, conversational, hands-free, ambient, contextual, speech recognition","Calm neutrals: Soft White #FAFAFA, Muted Blue #6B8FAF, Gentle Purple #9B8FBB","Audio waveform colors, status indicators (listening/processing/speaking), success/error tones","Voice waveform visualization, listening pulse, processing spinner, speak animation, smooth transitions","Voice assistants, accessibility apps, hands-free tools, smart home, automotive UI, cooking apps","Visual-heavy content, data entry, complex forms, noisy environments",✓ Full,✓ Full,⚡ Excellent,✓ Excellent,✓ High,✓ High,"Web Speech API 10/10, React 10/10",2025+ Voice Era,Medium,"Design a voice-first multimodal interface. Use: voice waveform visualization, listening state indicator, speaking animation, minimal visible UI, audio feedback cues, hands-free optimized, conversational flow, ambient design.","Web Speech API integration, canvas for waveform, animation: pulse for listening, status indicators (color change), audio visualization (Web Audio API), minimal chrome, large touch targets","☐ Voice recognition works, ☐ Visual feedback clear, ☐ Listening state obvious, ☐ Speaking animation smooth, ☐ Fallback UI provided, ☐ Accessibility excellent","--listening-color: #6B8FAF, --speaking-color: #22C55E, --waveform-height: 60px, --pulse-duration: 1.5s, --indicator-size: 24px, --voice-accent: #9B8FBB"
+64,3D Product Preview,General,"360 product view, rotatable, zoomable, touch-to-spin, AR preview, product configurator, interactive 3D model","Product-dependent, neutral backgrounds: Soft Grey #E8E8E8, Pure White #FFFFFF","Shadow gradients, reflection planes, environment lighting colors, accent highlights","Drag-to-rotate, pinch-to-zoom, spin animation, AR placement, material switching, smooth orbit controls","E-commerce, furniture, fashion, automotive, electronics, jewelry, product configurators","Content-heavy sites, blogs, dashboards, low-bandwidth, accessibility-critical",◐ Partial,◐ Partial,❌ Poor (3D rendering),⚠ Alt content needed,◐ Medium,✓ Very High,"Three.js 10/10, model-viewer 10/10, Spline 9/10",2025+ E-commerce 3D,High,"Design a 3D product preview interface. Use: 360° rotation, drag-to-spin, pinch-to-zoom, AR preview button, material/color switcher, hotspot annotations, orbit controls, product configurator, smooth rendering.","Three.js or model-viewer, OrbitControls, touch events for rotation, WebXR for AR, canvas with WebGL, loading placeholder, LOD for performance, environment lighting","☐ 3D model loads fast, ☐ Rotation smooth, ☐ Zoom works (pinch/scroll), ☐ AR button functional, ☐ Colors switchable, ☐ Mobile touch works","--canvas-bg: #F5F5F5, --hotspot-color: #3B82F6, --loading-spinner: primary, --rotation-speed: 0.5, --zoom-min: 0.5, --zoom-max: 2"
+65,Gradient Mesh / Aurora Evolved,General,"Complex gradients, mesh gradients, multi-color blend, aurora effect, flowing colors, iridescent, holographic, prismatic","Multi-stop gradients: Cyan #00FFFF, Magenta #FF00FF, Yellow #FFFF00, Blue #0066FF, Green #00FF66","Complementary mesh points, smooth color transitions, iridescent overlays, chromatic shifts","CSS mesh-gradient (experimental), SVG gradients, canvas gradients, smooth color morphing, flowing animation","Hero sections, backgrounds, creative brands, music platforms, fashion, lifestyle, premium products","Data interfaces, text-heavy content, accessibility-critical, conservative brands",✓ Full,✓ Full,⚠ Good,⚠ Text contrast,✓ Good,✓ High,"CSS 8/10, SVG 10/10, Canvas 10/10",2025+ Gradient Evolution,Medium,"Design with gradient mesh aurora effect. Use: multi-color mesh gradients, flowing color transitions, aurora/northern lights feel, iridescent overlays, holographic shimmer, prismatic effects, smooth color morphing.","background: conic-gradient or mesh (SVG), animation: gradient flow (background-position), filter: hue-rotate for shimmer, mix-blend-mode: screen, canvas for complex mesh, multiple gradient layers","☐ Mesh gradient visible, ☐ Colors flow smoothly, ☐ Aurora effect achieved, ☐ Performance acceptable, ☐ Text remains readable, ☐ Mobile renders ok","--mesh-color-1: #00FFFF, --mesh-color-2: #FF00FF, --mesh-color-3: #FFFF00, --mesh-color-4: #00FF66, --flow-duration: 10s, --shimmer-intensity: 0.3"
+66,Editorial Grid / Magazine,General,"Magazine layout, asymmetric grid, editorial typography, pull quotes, drop caps, column layout, print-inspired","High contrast: Black #000000, White #FFFFFF, accent brand color","Muted supporting, pull quote highlights, byline colors, section dividers","Smooth scroll, reveal on scroll, parallax images, text animations, page-flip transitions","News sites, blogs, magazines, editorial content, long-form articles, journalism, publishing","Dashboards, apps, e-commerce catalogs, real-time data, short-form content",✓ Full,✓ Full,⚡ Excellent,✓ WCAG AAA,✓ High,✓ Medium,"CSS Grid 10/10, Tailwind 10/10",2020s Editorial Digital,Low,"Design an editorial magazine layout. Use: asymmetric grid, pull quotes, drop caps, multi-column text, large imagery, bylines, section dividers, print-inspired typography, article hierarchy, white space balance.","display: grid with named areas, column-count for text, ::first-letter for drop caps, blockquote styling, figure/figcaption, gap variations, font: serif for body, variable widths","☐ Grid asymmetric, ☐ Typography editorial, ☐ Pull quotes styled, ☐ Drop caps present, ☐ Images large/impactful, ☐ Mobile reflows well","--grid-cols: asymmetric, --body-font: Georgia/Merriweather, --heading-font: bold sans, --drop-cap-size: 4em, --pull-quote-size: 1.5em, --column-gap: 2rem"
+67,Chromatic Aberration / RGB Split,General,"RGB split, color fringing, glitch, retro tech, VHS, analog error, distortion, lens effect","Offset RGB: Red #FF0000, Green #00FF00, Blue #0000FF, Black #000000","Neon accents, scan lines, noise overlays, error colors","RGB offset animation, glitch timing, scan line movement, noise flicker, distortion on hover","Music platforms, gaming, tech brands, creative portfolios, nightlife, entertainment, video platforms","Corporate, healthcare, finance, accessibility-critical, elderly users",✓ Full,✓ Dark preferred,⚠ Good,⚠ Can cause strain,◐ Medium,✓ High,"CSS filters 10/10, GSAP 10/10",2020s Retro-Tech,Medium,"Design with chromatic aberration RGB split effect. Use: color channel offset (R/G/B), glitch aesthetic, retro tech feel, VHS error look, lens distortion, scan lines, noise overlay, analog imperfection.","filter: drop-shadow with offset colors, text-shadow: RGB offset (-2px 0 red, 2px 0 cyan), animation: glitch (random offset), ::before for scanlines, mix-blend-mode: screen for overlays","☐ RGB split visible, ☐ Glitch effect controlled, ☐ Scan lines subtle, ☐ Performance ok, ☐ Readability maintained, ☐ Reduced motion option","--rgb-offset: 2px, --red-channel: #FF0000, --green-channel: #00FF00, --blue-channel: #0000FF, --glitch-duration: 0.3s, --scanline-opacity: 0.1"
+68,Vintage Analog / Retro Film,General,"Film grain, VHS, cassette tape, polaroid, analog warmth, faded colors, light leaks, vintage photography","Faded Cream #F5E6C8, Warm Sepia #D4A574, Muted Teal #4A7B7C, Soft Pink #E8B4B8","Grain overlays, light leak oranges, shadow blues, vintage paper tones, desaturated accents","Film grain overlay, VHS tracking effect, polaroid shake, fade-in transitions, light leak animations","Photography portfolios, music/vinyl brands, vintage fashion, nostalgia marketing, film industry, cafes","Modern tech, SaaS, healthcare, children's apps, corporate enterprise",✓ Full,◐ Partial,⚡ Good,✓ WCAG AA,✓ High,✓ High,"CSS filters 10/10, Canvas 9/10",1970s-90s Analog Revival,Medium,"Design with vintage analog film aesthetic. Use: film grain overlay, faded/desaturated colors, warm sepia tones, light leaks, VHS tracking effect, polaroid frame, analog warmth, nostalgic photography feel.","filter: sepia() contrast() saturate(0.8), background: noise texture overlay, animation: VHS tracking (transform skew), light leak gradient overlay, border for polaroid frame, grain via SVG filter","☐ Film grain visible, ☐ Colors faded/warm, ☐ Light leaks present, ☐ Nostalgic feel achieved, ☐ Performance with filters, ☐ Images look vintage","--sepia-amount: 20%, --contrast: 1.1, --saturation: 0.8, --grain-opacity: 0.15, --light-leak-color: rgba(255,200,100,0.2), --warm-tint: #F5E6C8"
+69,Bauhaus (包豪斯),Mobile,"bauhaus, geometric, constructivist, primary colors, hard shadow, bold, tactile, functional, poster, mechanical, architectural","Primary Red #D02020, Primary Blue #1040C0, Primary Yellow #F0C020","Background #F0F0F0 (Off-white), Foreground #121212 (Stark Black), Muted #E0E0E0","Hard offset shadows (4px 4px 0px black), mechanical press active:translate, no smooth hover — instant 0ms transitions, dot grid pattern on sections, slide-over transitions","Mobile-first apps needing high personality, onboarding flows, branding-forward product screens, artisan/design brands, editorial mobile experiences","Enterprise dashboards, accessibility-critical contexts (requires extra a11y work), data-heavy screens, conservative industries",✓ Full,◐ Partial (primary palette only),⚡ Excellent,⚠ WCAG AA (high contrast primaries; verify yellow text separately),✓ Mobile-First,◐ Medium,"React Native 10/10, Expo 10/10, SwiftUI 9/10, Flutter 9/10, Tailwind 9/10",1919 Bauhaus Movement,Medium,"Design a Bauhaus mobile app. Use strict geometric shapes (circles and squares only), primary color blocking (Red #D02020, Blue #1040C0, Yellow #F0C020), hard 4px offset black shadows, OFF-WHITE canvas (#F0F0F0), massive bold uppercase headlines (Outfit Black 900), rectangular full-width buttons with mechanical press animation. No gradients. No rounded cards. No soft transitions.","border-radius: 0px (cards/inputs) or 9999px (buttons/FAB), box-shadow: 4px 4px 0px 0px #121212, active:translate-x-[2px] active:translate-y-[2px] active:shadow-none, border: 2px solid #121212, font-family: Outfit, font-weight: 900 uppercase tracking-tighter (headlines)","☐ Geometric shapes only (circle/square), ☐ Primary color blocking applied, ☐ Hard offset shadows 4px, ☐ border-2 border-black on all elements, ☐ Mechanical press active state, ☐ Outfit Black 900 uppercase headlines, ☐ Safe area (pt-safe pb-safe) respected, ☐ Thumb-friendly h-12/h-14 touch targets, ☐ No hover states (mobile-only), ☐ Vertical rhythm single-column stack","--color-red: #D02020, --color-blue: #1040C0, --color-yellow: #F0C020, --color-bg: #F0F0F0, --color-fg: #121212, --border-width: 2px, --shadow-hard: 4px 4px 0px 0px #121212, --radius-block: 0px, --radius-pill: 9999px, --font-display: Outfit, --font-weight-hero: 900"
+70,Minimalist Monochrome,Mobile,"monochrome, black white, editorial, austere, typographic, sharp, zero radius, high contrast, brutalist, pocket editorial, serif, mechanical","Pure Black #000000, Pure White #FFFFFF","Muted #F5F5F5, Dark Gray #525252, Border Light #E5E5E5","Instant inversion active state (tap → bg-black text-white, zero transition-none), no shadows (strictly 2D), full-bleed horizontal rules (4px black section dividers), subtle paper noise texture (opacity: 0.03), slide-in page transitions with hard edge","Luxury fashion e-commerce mobile, editorial publications, high-end portfolio apps, experimental/avant-garde brands, digital exhibitions","Entertainment, colorful brands, friendly consumer apps, anything requiring visual warmth or gradient",✓ Full (Light Mode Enforced),◐ Dark by section only (inverted sections),⚡ Excellent,✓ WCAG AAA (pure black/white),✓ Mobile-First,◐ Medium,"React Native 10/10, Expo 10/10, SwiftUI 9/10, Tailwind 9/10",2020s Editorial Mobile,Medium,"Design a minimalist monochrome mobile app. Use ONLY black (#000000) and white (#FFFFFF). Zero border-radius on every element. No shadows — depth is created by 1–4px black borders and color inversion only. Typography is the primary visual: Playfair Display for heroes (text-5xl–text-6xl, tracking-tighter, leading-[0.9]), Source Serif 4 for body, JetBrains Mono for labels/tags. Tap states instantly invert (bg-black text-white). Full-width horizontal rules separate sections. Use the word 'MENU' instead of hamburger icon.","border-radius: 0px (ALL elements including modals), box-shadow: none, active:bg-black active:text-white transition-none, border-b-4 border-black (section dividers), divide-y divide-black (lists), font-family: Playfair Display (headers) + Source Serif 4 (body) + JetBrains Mono (labels), background-image: noise SVG opacity-[0.03]","☐ 0px border-radius on ALL elements, ☐ No shadows anywhere, ☐ Instant inversion on every tap (transition-none), ☐ 4px black line separates hero from content, ☐ Safe area respected (pt-safe pb-safe), ☐ h-14 touch targets, ☐ Sticky section headers with border-b, ☐ Typography hero: word spans full screen width, ☐ Paper noise texture on backgrounds, ☐ Menu word-label instead of icon","--color-bg: #FFFFFF, --color-fg: #000000, --color-muted: #F5F5F5, --color-muted-fg: #525252, --color-border: #000000, --color-border-light: #E5E5E5, --radius: 0px, --shadow: none, --border-hairline: 1px solid #E5E5E5, --border-thin: 1px solid #000000, --border-thick: 2px solid #000000, --border-heavy: 4px solid #000000, --font-display: Playfair Display, --font-body: Source Serif 4, --font-mono: JetBrains Mono"
+71,Modern Dark (Cinema Mobile),Mobile,"dark mode, cinematic, ambient light, glassmorphism, deep black, indigo, glow, blur, atmospheric, reanimated, haptic, premium, layered, frosted glass, linear gradient","Deep #020203, Base #050506, Elevated #0a0a0c, Accent #5E6AD2","Foreground #EDEDEF, Muted #8A8F98, Accent Glow rgba(94 106 210/0.2), Border rgba(255 255 255/0.08), Surface rgba(255 255 255/0.05)","Expo.out Bezier(0.16,1,0.3,1) easing; spring modals (damping:20 stiffness:90); haptic-linked press (Impact Light/Medium); animated ambient light blobs (Reanimated translateX/Y slow oscillation); BlurView glassmorphism headers/nav (intensity 20); scale press 0.97 → 1.0; avoid pure #000000 (OLED smear)","Developer tools, pro productivity apps, fintech/trading dashboards, media/streaming platforms, AI tool interfaces, high-end gaming companion apps","Consumer apps needing warmth, children's apps, health/medical contexts where dark feels harsh, high-accessibility contexts needing maximum contrast",✓ Light mode only as exception,✓ Dark Mode Primary,⚠ Good (blur effects require native driver),⚠ WCAG AA (requires careful accent contrast check),✓ Mobile-First,◐ Medium,"React Native 10/10, Expo 10/10, react-native-skia 9/10, SwiftUI 8/10",2020s Cinematic Mobile,High,"Design a cinematic dark mobile app. Background: LinearGradient from #0a0a0f (top) to #020203 (bottom). Add 2–3 absolute animated 'blob' views: circular, blurRadius 30–50, opacity 0.08–0.12, slow Reanimated oscillation. Cards: borderRadius 16, border rgba(255,255,255,0.08) hairline, subtle top-edge shine gradient. Primary button: #5E6AD2, scale press 0.97, haptic on press. BlurView (intensity 20, tint dark) for tab bar and headers. Typography: Inter 700 for headers, 400 for body. Never use pure #000000. Accent glow: rgba(94,106,210,0.2) behind primary actions.","borderRadius: 16 (cards/buttons), background: LinearGradient #0a0a0f→#020203, border: StyleSheet.hairlineWidth rgba(255,255,255,0.08), BlurView intensity={20} tint='dark', useAnimatedStyle + withRepeat (blob oscillation), Easing.bezier(0.16,1,0.3,1), withSpring damping:20 stiffness:90, Haptics.impactAsync(ImpactFeedbackStyle.Light), scale: 0.97 press","☐ No pure #000000 backgrounds, ☐ LinearGradient base screen, ☐ Animated ambient blobs (Reanimated, native driver), ☐ BlurView on tab bar and headers, ☐ borderRadius 16 on all cards, ☐ Haptic feedback on every Pressable, ☐ Bezier(0.16,1,0.3,1) easing used, ☐ Accent glow behind primary button, ☐ No solid grey borders (rgba only), ☐ Bottom sheets replace all modals","--bg-deep: #020203, --bg-base: #050506, --bg-elevated: #0a0a0c, --surface: rgba(255 255 255/0.05), --foreground: #EDEDEF, --foreground-muted: #8A8F98, --accent: #5E6AD2, --accent-glow: rgba(94 106 210/0.2), --border: rgba(255 255 255/0.08), --radius: 16px, --easing: cubic-bezier(0.16 1 0.3 1), --font: Inter"
+72,SaaS Mobile (High-Tech Boutique),Mobile,"saas, electric blue, gradient, fintech, spring animation, dual font, glassmorphism, boutique, premium, calistoga, inter, mono, tactile, haptic, bento","Electric Blue #0052FF, Gradient End #4D7CFF","Background #FAFAFA, Foreground #0F172A, Muted #F1F5F9, Card #FFFFFF, Border #E2E8F0","Spring animations (mass:1 damping:15 stiffness:120); gradient buttons (0052FF→4D7CFF); scale press 0.96→1.0 with haptics; floating FAB with gentle bobbing (Reanimated); glassmorphism BlurView navigation bars; staggered fade-in entrance (Y:20→0 + opacity:0→1); pulsing status dot on section badges; layout transitions (LayoutAnimation or Reanimated entering)","B2B SaaS mobile dashboards, fintech apps, developer tool mobile companions, marketing analytics apps, HR/operations apps, modern business productivity","Pure consumer entertainment, children's apps, highly decorative lifestyle apps, contexts where Electric Blue feels too corporate",✓ Full,◐ Partial,⚡ Excellent,✓ WCAG AA,✓ Mobile-First,✓ High,"React Native 10/10, Expo 10/10, NativeWind 10/10, SwiftUI 8/10, Flutter 9/10",2020s SaaS Mobile,Medium,"Design a high-tech boutique SaaS mobile app. Primary canvas: #FAFAFA (warm off-white). Cards: #FFFFFF with 1pt Slate-200 border, iOS shadow (shadowOpacity:0.1, shadowRadius:10, offset y:4), Android elevation:4, padding 24px, borderRadius 16. Buttons: LinearGradient #0052FF→#4D7CFF, height 56px, borderRadius 16, scale press 0.96 + haptic. Section badges: rounded pill with rgba(0,82,255,0.05) bg and rgba(0,82,255,0.2) border + PulseDot + JetBrains Mono text. Typography: Calistoga for heroes (36–42pt), Inter for body (16–18pt), JetBrains Mono for data labels. All screen transitions: spring (mass:1 damping:15 stiffness:120). Always include SafeAreaView.","borderRadius: 16 (buttons/cards), LinearGradient colors={['#0052FF','#4D7CFF']}, shadowOpacity: 0.1, shadowRadius: 10, elevation: 4, Haptics.impactAsync(ImpactFeedbackStyle.Light) on press, withSpring({mass:1, damping:15, stiffness:120}), withTiming Y:20→0 opacity:0→1 staggered entrance, LayoutAnimation.configureNext for list updates, BlurView on nav bars","☐ SafeAreaView wraps all screens, ☐ All touch targets ≥ 44×44px, ☐ Spring config used for all transitions, ☐ Gradient buttons (not flat), ☐ Haptic on every Pressable, ☐ Section badges with PulseDot, ☐ Staggered entrance animation on screen mount, ☐ JetBrains Mono for data labels, ☐ Calistoga for hero headlines, ☐ Elevation/shadow on cards","--bg: #FAFAFA, --fg: #0F172A, --muted: #F1F5F9, --accent: #0052FF, --accent-sec: #4D7CFF, --card: #FFFFFF, --border: #E2E8F0, --radius: 16px, --shadow: shadowOpacity 0.1 shadowRadius 10, --spring: mass 1 damping 15 stiffness 120, --font-display: Calistoga, --font-body: Inter, --font-mono: JetBrains Mono"
+73,Terminal CLI (Mobile),Mobile,"terminal, cli, matrix green, monospace, hacker, ascii, command line, developer, web3, crypto, sci-fi, OLED, retro-future, field operative","Matrix Green #33FF00, OLED Black #050505","Amber #FFB000, Muted Green #1A3D1A, Error Red #FF3333, Border Green #33FF00","Blinking cursor (500ms opacity loop), typewriter text reveal hook, scanline overlay (repeating lines 0.05 opacity), ASCII art headers, instant color inversion on press (bg-green text-black), haptic on every keystroke, boot sequence splash on launch","Developer tools, Web3/blockchain apps, geek-culture apps, ARG games, sci-fi/noir gaming companions, hacker/security tools, creative studio portfolios","Consumer products, health apps, anything requiring approachability or warmth, children's apps, standard enterprise contexts",✗ No,✓ OLED Dark Only,⚡ Excellent,✓ High contrast (green on black ≫4.5:1 ratio),✓ Mobile-First (OLED optimized),✗ Low,"React Native 10/10, Expo 10/10, NativeWind 9/10",Retro-Future 1980s–2020s,Medium,"Design a Mobile Terminal CLI app. Background: #050505 OLED black. ALL text in Matrix Green #33FF00. Font: JetBrains Mono or SpaceMono ONLY — zero border-radius everywhere. ASCII borders using +, -, |, * characters instead of standard containers. Buttons displayed as [ EXECUTE ] or > PROCEED. On press: instantly inverts to green bg + black text + haptic. Cursor: blinking View opacity 0→1 at 500ms. Show boot sequence on launch (fake log scroll). Progress bars as [#####-----] text. Status bar footer: [BATTERY:88%] [NET:CONNECTED]. Scanline overlay: absolute View with repeating 1px horizontal lines at opacity 0.05. Typewriter effect on new data.","borderRadius: 0 (ALL elements), borderWidth: 1, borderColor: '#33FF00', backgroundColor: '#050505', color: '#33FF00', fontFamily: 'SpaceMono-Regular' or JetBrains Mono, fontSize: 12 or 14 or 16 only, lineHeight: 1.2x fontSize, Haptics.impactAsync(Light) on every press, useAnimatedValue blink 500ms, hitSlop: 12px all sides for bracketed buttons","☐ 0px border-radius everywhere, ☐ ASCII-style borders on cards, ☐ Boot sequence on launch, ☐ Blinking cursor component, ☐ Typewriter hook for new content, ☐ Scanline overlay (0.05 opacity), ☐ Haptic on every button press, ☐ Footer status bar component, ☐ hitSlop on all bracketed buttons (44×44dp), ☐ Reduced motion respected","--bg: #050505, --fg-primary: #33FF00, --fg-amber: #FFB000, --fg-muted: #1A3D1A, --fg-error: #FF3333, --border: #33FF00, --radius: 0px, --font: SpaceMono-Regular or JetBrains Mono, --font-sizes: 12 14 16 only, --blink-duration: 500ms, --scanline-opacity: 0.05"
+74,Kinetic Brutalism (Mobile),Mobile,"kinetic, brutalism, motion, marquee, acid yellow, uppercase, oversized, aggressive typography, street, zine, high contrast, scroll-driven, haptic, reanimated","Acid Yellow #DFE104, Rich Black #09090B","Off-white #FAFAFA, Dark Gray #27272A, Zinc #A1A1AA, Border Zinc #3F3F46","Infinite marquee (Reanimated, Linear easing, 5s loop, hard clip), hero parallax (scale 1.0→1.3 + fade), sticky section header push, card flood inversion on press (bg→#DFE104, text→#000000), haptic Medium on every press, scroll-triggered interpolate transforms, 0px radius, 2px borders, 100ms color transitions","Immersive storytelling apps, brand flagship mobile, music/culture platforms, sports apps, underground zines, limited-edition product drops, performance dashboards","Calm informational apps, healthcare, finance contexts needing trust, children's, any context where aggressive typography feels inappropriate",✓ Dark Primary,◐ Dark only (inverted sections),⚡ Excellent (native driver required),⚠ WCAG AA (verify zinc body text on dark bg),✓ Mobile-First,✓ High energy,"React Native 10/10, Expo 10/10, Reanimated 10/10, NativeWind 9/10",2020s Mobile Brutalism,High,"Design a Kinetic Brutalism mobile app. Canvas: #09090B. Primary accent: Acid Yellow #DFE104 (text: #000000). Typography: Space Grotesk BOLD. Display text: 60–120pt, uppercase, letterSpacing -1, lineHeight 0.9–1.1x. Body: 18–20pt. Labels: 12pt uppercase letterSpacing +2. Add infinite marquee rows (Reanimated, no easing, hard edge clip). Hero text parallax on scroll (Interpolate: scale 1.0→1.3, opacity 1→0). Card press: instantly flood to #DFE104 + flip text to #000. Haptic Medium on every press. 0px radius. 2px solid borders. NO shadows. No gradients. Scale all fonts by (windowWidth / 375 * size) for responsiveness.","borderRadius: 0, borderWidth: 2, borderColor: '#3F3F46', backgroundColor: '#09090B', color: '#FAFAFA', fontWeight: '800 or 900', letterSpacing: -1 (large) or 2 (labels), lineHeight: 0.9–1.1 * fontSize, Reanimated withRepeat marquee timing 5000ms Easing.linear, Interpolate scroll→scale + opacity, Haptics.impactAsync(Medium), scale press: 0.95, 100ms color transitions","☐ Infinite marquee rows (Reanimated, no fade edges), ☐ Hero parallax scroll (scale+opacity Interpolate), ☐ All display text uppercase, ☐ 0px border-radius, ☐ 2px borders, ☐ Acid yellow card flood on press, ☐ Haptic Medium on every interaction, ☐ Font scale helper (windowWidth/375*size), ☐ Safe area for massive headers, ☐ Reduced motion stops marquees","--bg: #09090B, --fg: #FAFAFA, --muted: #27272A, --muted-fg: #A1A1AA, --accent: #DFE104, --accent-fg: #000000, --border: #3F3F46, --radius: 0px, --border-width: 2px, --shadow: none, --marquee-speed: 5000ms, --press-duration: 100ms, --font: Space Grotesk or Inter"
+75,Flat Design Mobile (Touch-First),Mobile,"flat, 2D, no shadow, color blocking, geometric, bold, poster, icon, touch-first, minimal, clean, tailored, cross-platform","Blue #3B82F6, Emerald #10B981","Background #FFFFFF, Surface #F3F4F6, Text #111827, Amber #F59E0B, Border #E5E7EB","Immediate press feedback (scale 0.97, no delay), color section blocking (full-width contrasting View), zero elevation/shadow, solid icon containers (colored squares/circles), geometric low-opacity shape overlays, bottom tabs solid fill (no floating)","Cross-platform apps (iOS+Android parity), information-dense dashboards, system UI, brand illustration, onboarding flows, marketing pages, icon design","Ultra-premium contexts needing depth/shadow, dark-mode-first products, contexts where flat design reads as unfinished or sterile",✓ Full,◐ Partial (Dark mode via color swap only),⚡ Excellent (no GPU effects),✓ WCAG AA (large bold type helps),✓ Mobile-First,✓ High,"React Native 10/10, Expo 10/10, NativeWind 10/10, Flutter 9/10, SwiftUI 9/10",2010s–2020s Flat Mobile,Low,"Design a Flat Mobile app. NO shadows (shadowOpacity: 0, elevation: 0). Color creates all hierarchy. Sections: full-width View blocks alternating contrasting bg colors (Blue Hero → White Content → Gray Block). Buttons: solid #3B82F6, borderRadius 8, height 56. Cards: backgroundColor #FFFFFF (on gray bg) or #DBEAFE (blue tint) — no shadow. Text: fontWeight 800 letterSpacing -0.5 (heads), 600 (sub), 400 (body). Inputs: #F3F4F6 bg, focused: borderWidth 2 borderColor #3B82F6. Icons: Lucide strokeWidth 2.5 inside solid colored square/circle. Press feedback: scale 0.97 Pressable. Use position absolute low-opacity geometric shapes (circles, rotated squares) as background decoration.","shadowOpacity: 0, elevation: 0, borderRadius: 6/12/999, height: 48 minimum touch targets, spacing: 4/8/16/24/32/48 system, backgroundColor (section blocking), Pressable scale: pressed ? 0.97 : 1, fontWeight: '800' heads / '600' sub / '400' body, letterSpacing: -0.5 heads / 1 labels, textTransform: 'uppercase' labels, strokeWidth={2.5} icons, borderWidth: 3/4 for featured CTAs","☐ Zero elevation AND shadowOpacity on all elements, ☐ Color-blocking sections (not borders), ☐ All touch targets ≥ 48×48, ☐ No gradients on flat elements, ☐ Icons inside solid colored containers, ☐ Pressable scale feedback, ☐ Geometric shapes as bg decoration, ☐ Bold flat bottom tabs (no floating), ☐ Primary headlines much larger than body, ☐ 4pt spacing system throughout","--bg: #FFFFFF, --surface: #F3F4F6, --fg: #111827, --primary: #3B82F6, --secondary: #10B981, --accent: #F59E0B, --border: #E5E7EB, --radius-sm: 6px, --radius-md: 12px, --radius-pill: 999px, --shadow: none, --elevation: 0, --touch-target: 48px, --spacing: 4 8 16 24 32 48"
+76,Material You (MD3 Mobile),Mobile,"material design 3, md3, tonal surfaces, pills, soft curves, android, md3 easing, state layers, haptic, fab, google","Primary Violet #6750A4, Secondary Container #E8DEF8, Tertiary #7D5260","Surface #FFFBFE, On Surface #1C1B1F, Surface Container #F3EDF7, Outline #79747E","Tonal elevation (overlay colors instead of strong shadows), pill-shaped buttons and chips (borderRadius 999), emphasized easing Easing.bezier(0.2,0,0,1), state layers (pressed overlays 10–15% opacity), Reanimated-filled label float for inputs, HapticFeedback on FAB/toggles","Android ecosystem apps, cross-platform productivity tools, MD3-based admin panels, data-heavy back-office UI with Material UI","Ultra-minimal brutalist brands, terminal/hacker aesthetics, monochrome editorial apps",✓ Full,✓ Full,⚠ Good (requires gradients and overlays),✓ WCAG AA (with MD3 token checks),✓ Mobile-First,✓ High,"React Native 9/10, Expo 10/10, React Native Paper 9/10","Material Design 3",Medium,"Design a Material You (MD3) mobile app. Use #FFFBFE background, #6750A4 primary, #E8DEF8 secondary container, #F3EDF7 surface container. All interactive elements are pill-shaped (borderRadius: 999). Buttons use Pressable with scale: 0.95 on press and state-layer overlays (black 10% or primary 12%). Inputs use filled M3 style: background #E7E0EC with floating label animation on focus. Elevation is tonal (layering containers) plus light shadow/elevation on Android. Animations use emphasized easing (0.2,0,0,1) at 100–400ms. FABs are tertiary-colored rounded squares/circles with level 3 elevation.","borderRadius: 999 (buttons/chips), containerRadius: 16–28, backgroundColor: '#FFFBFE', colorPrimary: '#6750A4', colorSecondaryContainer: '#E8DEF8', colorSurfaceContainer: '#F3EDF7', outlineColor: '#79747E', Pressable state-layer overlay (opacity 0.1–0.15), Easing.bezier(0.2,0,0,1), HapticFeedback.impactMedium on FAB, floating label using Reanimated translateY/scale","☐ MD3 color tokens applied (background/surface/container), ☐ All CTAs are pill-shaped, ☐ State-layer overlays instead of opacity 0.5 hacks, ☐ Emphasized easing used for all animations, ☐ Floating label inputs implemented, ☐ FAB uses tertiary color with correct elevation, ☐ Safe areas respected for organic shapes, ☐ No pure white background, ☐ No harsh box-shadows (ambient only)","--md3-bg: #FFFBFE, --md3-on-surface: #1C1B1F, --md3-primary: #6750A4, --md3-on-primary: #FFFFFF, --md3-secondary-container: #E8DEF8, --md3-on-secondary-container: #1D192B, --md3-tertiary: #7D5260, --md3-surface-container: #F3EDF7, --md3-outline: #79747E, --radius-pill: 999px, --easing-emphasized: cubic-bezier(0.2,0,0,1)"
+77,Neo Brutalism (Mobile),Mobile,"neo brutalism, pop art, stickers, thick borders, cream background, hot red, vivid yellow, soft violet, hard offset shadow, mechanical press, collage","Cream #FFFDF5, Hot Red #FF6B6B, Vivid Yellow #FFD93D","Soft Violet #C4B5FD, Pure Black #000000, White #FFFFFF","Thick 4px black borders on all major elements, hard offset shadows (4–8px, no blur), mechanical press: translateX/Y equal to shadow offset, slightly rotated cards/badges (-2deg/2deg), high-saturation color blocking, spring/linear animations only","Creative tools, collab platforms, Gen Z marketing & e-commerce, portfolio sites, sticker-book style content apps","Serious enterprise apps, conservative industries, sober fintech, accessibility-first contexts (must tune contrast)",✓ Light-first,✗ Dark,⚠ Moderate (shadows + transforms),⚠ Requires careful contrast tuning,✓ Mobile-First,✓ High,"React Native 10/10, Expo 10/10, NativeWind 9/10",2020s Neo-Brutalism,High,"Design a Mobile Neo-Brutalist app. Background: Cream #FFFDF5. All content blocks: white or violet with borderWidth 4 borderColor #000. Shadows are solid offset blocks (no blur) using an extra View behind offset by 4px or 8px. Typography: Space Grotesk Bold/Black only (700–900). Buttons: 56px tall, 4px border, 0 radius; press animation translates button to cover the shadow. Cards slightly rotated (-1deg, 2deg). Colors: Hot Red #FF6B6B for primary, Yellow #FFD93D for focus/badges, Soft Violet #C4B5FD as tertiary. Animation: spring/linear only, no ease-out luxury motion.","borderWidth: 4 (primary), 2 (secondary), borderRadius: 0 or 999 (badges only), backgroundColor: '#FFFDF5', shadow implemented as offset View, transform: [{translateX:4},{translateY:4}] on PressIn, fontFamily: 'SpaceGrotesk-Bold', fontWeight: '700/900', transform: [{ rotate: '-1deg' }] on cards, padding: 20,"☐ 4px borders on major elements, ☐ Hard offset shadow implemented via extra View, ☐ Mechanical press hides shadow, ☐ Cream canvas background, ☐ Pop-art color palette used, ☐ Cards/badges slightly rotated, ☐ No gradients or soft shadows, ☐ Only bold/black type weights, ☐ Badges slapped with absolute positioning, ☐ Anti-patterns (no subtle gray, no blur) avoided","--bg: #FFFDF5, --ink: #000000, --accent-primary: #FF6B6B, --accent-secondary: #FFD93D, --accent-muted: #C4B5FD, --white: #FFFFFF, --border-primary: 4px solid #000000, --shadow-offset-small: 4px, --shadow-offset-medium: 8px, --radius: 0px, --radius-pill: 999px, --font: Space Grotesk"
+78,Bold Typography (Mobile Poster),Mobile,"bold typography, editorial, poster, broadsheet, vermillion, negative space, edge-to-edge type, underline CTA, near-black, warm white","Near Black #0A0A0A, Warm White #FAFAFA","Muted #1A1A1A, Secondary Text #737373, Accent Vermillion #FF3D00, Border #262626","Hero headlines 48–72px (5:1 vs body size), tight tracking (-1.5px), edge-to-edge type, massive vertical spacing (60px+), underline CTAs (2–3px accent line), instant 200ms transitions (no bounce), strictly 0px radius containers, color shifts for active state instead of elevation","Creative brand heroes, reading-focused apps, event/exhibition pages, editorial mobile experiences, landing hero sections","Utility dashboards, kids apps, playful consumer products, contexts needing many icons or heavy imagery",✓ Dark Mode Primary,◐ Light sections optional,⚡ Excellent,✓ Contrast 18:1 achievable,✓ Mobile-First,✓ High,"React Native 10/10, Expo 10/10",Editorial 2020s,Medium,"Design a Bold Typography mobile screen. Background #0A0A0A, text #FAFAFA, accent #FF3D00. Use Inter Tight/Inter 600+ for all type; JetBrains Mono for labels. Headline: 56–72px, tracking -1.5, lineHeight 1.1, full-bleed width with slight bleed off-screen. Body: 16–18px, leading 1.6. Buttons: underline CTA (accent text + 2px underline block), or inverted box with 0 radius. No shadows, no rounded corners. Layout: single column, paddingHorizontal 24, vertical gaps 64 between sections. Animation: 200ms, Easing.bezier(0.25,0,0,1), slight slide-up 10px + fade on mount.","backgroundColor: '#0A0A0A', color: '#FAFAFA', accent: '#FF3D00', borderColor: '#262626', borderRadius: 0, paddingHorizontal: 24, headline style: fontSize:56–72, fontWeight:'700/800', letterSpacing:-1.5, lineHeight:1.1*fontSize, body: fontSize:16–18, lineHeight:1.6*fontSize, underline CTA: 2–3px height View under text, transition: 200ms cubic-bezier(0.25,0,0,1)","☐ H1 at least 4–5× body size, ☐ All containers 0 radius, ☐ Underline CTA pattern used, ☐ Large vertical gaps between sections, ☐ No shadows or soft corners, ☐ Accent used only for interaction, ☐ Text bleeds to/over screen edges, ☐ Animation timings 200ms, ☐ Accessible contrast ≥ 18:1, ☐ Body text never below 16px","--bg: #0A0A0A, --fg: #FAFAFA, --muted: #1A1A1A, --muted-fg: #737373, --accent: #FF3D00, --accent-fg: #0A0A0A, --border: #262626, --font-primary: Inter Tight, --font-display: Playfair Display Italic, --font-mono: JetBrains Mono"
+79,Academia (Scholarly Mobile),Mobile,"academia, library, mahogany, parchment, brass, crimson, serif, drop cap, arch-top, vignette, leather, scholarly, tactile","Mahogany #1C1714, Oak #251E19","Parchment #E8DFD4, Worn Leather #3D332B, Faded Ink #9C8B7A, Brass #C9A962, Library Crimson #8B2635","Deep mahogany backgrounds, oak surface cards, brass accented CTAs, arch-top hero/imagery, heavy vignette overlays, sepia-tinted images, drop caps with brass Cinzel, Roman numeral volume headings, slow timing-based animations (Easing.out poly(4)), zero neon or modern tech cues","Knowledge management apps, deep reading tools, ritual-heavy personal brands, lore-heavy RPG/roleplay apps, culture-specific community platforms","Hyper-modern tech dashboards, neon/glassmorphism, playful Gen Z branding",✓ Dark Rich,◐ Light parchment sections,⚠ Moderate (vignette + shadows),✓ Legible (serif optimized),◐ Mobile-First,◐ Medium,"React Native 9/10, Expo 10/10",Timeless Scholarly,High,"Design a Scholarly Academia mobile app. Background #1C1714 (mahogany), alt surfaces #251E19 (oak), text #E8DFD4 (parchment). Accent brass #C9A962 for CTAs + borders; crimson #8B2635 for wax seals. Typography: Cormorant Garamond (headings), Crimson Pro (body), Cinzel (labels/overlines). Use arch-top hero containers (borderTopRadius 100). Cards: oak bg, 1px wood-grain border. Inputs: worn-leather background, brass focus border. Global vignette overlay and ornate brass dividers (Unicode glyph + gradient line). Animations: no spring, only Timing with Easing.out(Easing.poly(4)).","backgroundColor: '#1C1714', altSurface: '#251E19', textColor: '#E8DFD4', mutedBg: '#3D332B', borderColor: '#4A3F35', brass: '#C9A962', crimson: '#8B2635', borderRadius: 4 (default), archTopRadius: 100 for hero, shadowOpacity:0.4 shadowRadius:6 elevation:8 for cards, textShadow on headings, vignette overlay via LinearGradient","☐ Mahogany/oak/parchment palette applied, ☐ Brass used on all tappable items, ☐ Arch-top imagery used in hero/cards, ☐ Drop caps & Roman numerals used, ☐ Vignette overlay present, ☐ No sans-serif body fonts, ☐ No neon/bright modern colors, ☐ Animations use non-spring timing, ☐ Inputs use worn-leather style, ☐ Wax seal badges implemented","--bg: #1C1714, --bg-alt: #251E19, --fg: #E8DFD4, --muted: #3D332B, --muted-fg: #9C8B7A, --border: #4A3F35, --accent-brass: #C9A962, --accent-crimson: #8B2635, --radius: 4px, --arch-radius: 100px, --shadow-card: 0 4px 6px rgba(0,0,0,0.4), --font-heading: Cormorant Garamond, --font-body: Crimson Pro, --font-label: Cinzel"
+80,Cyberpunk Mobile HUD,Mobile,"cyberpunk, neon, glitch, chamfered, orbitron, jetbrains, scanlines, crt, hud, matrix, military, decker","Void #0A0A0F, Card #12121A","Neon Green #00FF88, Neon Magenta #FF00FF, Cyber Cyan #00D4FF, Neutral Text #E0E0E0, Alert Red #FF3366, Border #2A2A3A","Deep void background with neon radiance, chamfered 45° corners via SVG/Skia, scanline overlay, CRT flicker opacity oscillation, glitch animations (translateX ±2), neon pulses around buttons, HUD corner brackets, terminal prompt text inputs, heavy use of blurView holographic panels","Gaming dashboards, crypto/cyberpunk apps, sci-fi companion tools, hacker OS skins, data-heavy monitoring HUDs","Serious enterprise, health/finance requiring calm trust, minimal editorial apps",✗ Light,✓ Dark-only,⚠ Moderate–Heavy (Skia/blur/animations),⚠ Requires careful reduced-motion handling,✓ Mobile-First HUD,✓ High,"React Native 10/10, Skia 9/10, Expo 10/10",Cyber-Noir,High,"Design a Cyberpunk mobile HUD. Background #0A0A0F, card #12121A. Accents: #00FF88 (primary), #FF00FF, #00D4FF. Typography: Orbitron for headings, JetBrains Mono for data. All shapes use chamfered corners via SVG or Skia clipPath. Buttons: neon glow shadows, scale 0.98 + haptic on press, optional glitch jitter on active. Global scanline overlay (semi-transparent horizontal lines) and CRT flicker (root opacity 0.98–1). Inputs: prompt style with '>' in accent, custom blinking block cursor. HUD cards use corner brackets and subtle gradients.","backgroundColor: '#0A0A0F', cardBg: '#12121A', accent: '#00FF88', accent2: '#FF00FF', accent3: '#00D4FF', borderColor: '#2A2A3A', destructive: '#FF3366', borderRadius: 0, chamfer via SVG path, shadowColor accent with animated radius, scanline overlay View pointerEvents='none', withRepeat glitch translateX [-2,2,0], Easing.steps(2)","☐ Chamfered corners used instead of radius, ☐ Scanline & CRT flicker implemented, ☐ Orbitron + JetBrains Mono typography, ☐ Neon glow shadows on primary buttons, ☐ Glitch animation on active states, ☐ Prompt-style inputs with custom cursor, ☐ HUD corner brackets implemented, ☐ Safe-area system status bar styled, ☐ Reduced motion disables glitch/flicker, ☐ Icons configured with Lucide accent color","--bg: #0A0A0F, --card: #12121A, --fg: #E0E0E0, --muted: #1C1C2E, --accent: #00FF88, --accent2: #FF00FF, --accent3: #00D4FF, --border: #2A2A3A, --destructive: #FF3366, --radius: 0px, --font-heading: Orbitron, --font-body: JetBrains Mono"
+81,Bitcoin DeFi (Mobile),Mobile,"web3, bitcoin, defi, digital gold, fintech, wallet, orange, glassmorphism, gradient, blur, holographic, trust, precision","Bitcoin Orange #F7931A, Burnt Orange #EA580C, Digital Gold #FFD600","Void #030304, Dark Matter #0F1115, Pure Light #FFFFFF, Stardust #94A3B8, Border Dim rgba(30,41,59,0.2)","Deep void + dark matter surfaces, Bitcoin orange/gold gradients for CTAs, pill buttons with glowing shadows, glassmorphic BlurView nav, monospace data rows, gradient text balances + masked orange-gold, pulsing status indicators and vertical ledger timelines, ultra-thin borders, high-precision typography","DeFi dashboards, wallets, NFT marketplaces, Web3 social, metaverse utilities, high-tech fintech brands","Playful casual apps, low-tech brands, ultra-minimal editorial apps",✗ Light,✓ Dark-only,⚠ Moderate (gradients+blur),✓ WCAG AA with care,✓ Mobile-First,✓ High,"React Native 10/10, Expo 10/10, Reanimated 10/10",Fintech/Web3,High,"Design a Bitcoin DeFi mobile app. Background #030304, cards #0F1115, text #FFFFFF, muted #94A3B8. Primary CTA: LinearGradient #EA580C→#F7931A with orange glow shadow. Typography: Space Grotesk Bold for headings, Inter for body, JetBrains Mono for prices/hashes. Use BlurView (intensity 20) for nav bars and floating panels. Cards as 'blocks' with hairline borders and light orange glow on active. Use grid background (low-opacity 50px grid). Gradient text for key balances via MaskedView and LinearGradient orange→gold. Status indicators pulse using Reanimated. Ledger timelines drawn as vertical gradient line with pulsing dots.","backgroundColor: '#030304', cardBg: '#0F1115', textColor: '#FFFFFF', mutedText: '#94A3B8', borderColor: 'rgba(30,41,59,0.2)', accentBitcoin: '#F7931A', accentBurnt: '#EA580C', accentGold: '#FFD600', borderRadius: 24 for cards, radiusPill: 999 for buttons, BlurView intensity 20, LinearGradient on CTAs, shadowColor '#F7931A' shadowRadius up to 10, JetBrains Mono for numeric text","☐ Void/dark-matter palette applied, ☐ Bitcoin orange/gold gradient buttons, ☐ BlurView nav implemented, ☐ Monospace for numeric data, ☐ Hairline borders on blocks, ☐ Gradient text on balances, ☐ Pulsing network status indicators, ☐ Ledger vertical timeline, ☐ Haptics on money actions, ☐ SafeArea + FlashList for heavy lists","--bg-void: #030304, --bg-surface: #0F1115, --fg: #FFFFFF, --fg-muted: #94A3B8, --border-dim: rgba(30,41,59,0.2), --accent-bitcoin: #F7931A, --accent-burnt: #EA580C, --accent-gold: #FFD600, --radius-card: 24px, --radius-pill: 999px, --blur-intensity: 20, --font-heading: Space Grotesk, --font-body: Inter, --font-mono: JetBrains Mono"
+82,Claymorphism (Mobile),Mobile,"claymorphism, clay, 3d, soft, bubbly, candy, playful, rounded, squish, tactile, inflate, silicone, haptic, spring","Vivid Violet #7C3AED, Hot Pink #DB2777","Canvas #F4F1FA, Soft Charcoal #332F3A, Emerald #10B981, Amber #F59E0B, Lavender-Gray #635F69","Multi-layer shadow stacks (nested View) to simulate clay depth, LinearGradient #A78BFA→#7C3AED buttons, borderRadius 40–50 outer / 32 cards / 20 buttons, Reanimated spring squish (scale 0.92 on press), BlurView glass-clay hybrid cards, floating blobs with slow ±20px drift, Haptics Light on every press","Children education apps, teen social products, crypto gamification, creative tools, brand mascot-led apps","Serious enterprise, high-density data, editorial reading apps, fintech trust signals",✓ Light,⚠ Dark (adjusted),⚠ Moderate–Heavy (shadows+blur),✓ WCAG AA (careful),✓ Mobile-First (thumb zone),✓ High,"React Native 10/10, Reanimated 10/10, Expo 10/10",Consumer/Education,High,"Design a high-fidelity Claymorphism mobile app. Background #F4F1FA (cool lavender-white, never pure white). Primary CTA: LinearGradient #A78BFA to #7C3AED, borderRadius 20, height 56. Cards: borderRadius 32, backgroundColor rgba(255,255,255,0.7) with BlurView. Multi-layer shadow: outer offset(12,12) rgba(160,150,180,0.2) + highlight offset(-8,-8) white. Typography: Nunito Black 900 for headings (48px hero, 32px section, 22px card), DM Sans Medium 500 for body 16px. Spring animations: scale 0.92 on press, spring back damping 10. Background blobs drift ±20px over 8–10s. Bento 2-column grid with hero card spanning full width. Haptics.impactAsync Light on every button press.","backgroundColor: '#F4F1FA', cardBg: 'rgba(255,255,255,0.7)', textPrimary: '#332F3A', textMuted: '#635F69', accentPrimary: '#7C3AED', accentSecondary: '#DB2777', success: '#10B981', warning: '#F59E0B', radiusOuter: 50, radiusCard: 32, radiusButton: 20, shadowStack: 'nested View', gradientButton: ['#A78BFA', '#7C3AED'], springDamping: 10","☐ Background uses #F4F1FA (no pure white), ☐ Multi-layer clay shadow stack applied, ☐ Cards use blurred glass-clay hybrid, ☐ Buttons squish to scale 0.92 on press, ☐ Spring physics on all interactions, ☐ Nunito Black for headings, ☐ Background blobs drifting, ☐ Haptics on every press, ☐ Nested border radius (card 32, inner 24), ☐ Bento layout with hero span","--bg: #F4F1FA, --card-bg: rgba(255,255,255,0.7), --text: #332F3A, --muted: #635F69, --accent: #7C3AED, --accent2: #DB2777, --success: #10B981, --warning: #F59E0B, --radius-outer: 50px, --radius-card: 32px, --radius-button: 20px, --font-heading: Nunito Black, --font-body: DM Sans"
+83,Enterprise SaaS (Mobile),Mobile,"enterprise, saas, b2b, professional, indigo, violet, gradient, polished, trustworthy, clean, approachable, spring, haptic","Indigo #4F46E5, Violet #7C3AED","Slate 50 #F8FAFC, White #FFFFFF, Slate 900 #0F172A, Slate 500 #64748B, Emerald #10B981, Slate 200 #E2E8F0","Indigo→Violet gradient primary CTAs + active tab highlights, colored card shadows rgba(79,70,229,0.08), pill buttons or 12pt radius, full-width CTA at screen bottom, spring press scale 0.97, floating label inputs with animated focus border, skeletal loading pulses (Indigo/Slate tint), Bottom Sheets with drag dismiss, swipe-to-action list cards, scroll-linked title collapse","B2B backend management, productivity tools, government and finance mobile apps, SaaS companion apps, enterprise dashboards","Pure consumer entertainment, Gen-Z youth apps, gaming UI, ultra-minimal editorial",✓ Light,✓ Dark-ready (token inversion),✓ Performant,✓ WCAG AA,✓ Mobile-First (Safe Area strict),✓ High,"React Native 10/10, Reanimated 10/10, NativeWind 9/10",Enterprise/SaaS,High,"Design a Modern Enterprise SaaS mobile app. Background #F8FAFC, surfaces #FFFFFF, primary #4F46E5 (Indigo), secondary #7C3AED (Violet). Typography: Plus Jakarta Sans, ExtraBold 800 for screen titles, Bold 700 for section headers, SemiBold 600 for buttons, Regular 400 for body. Line height 1.1–1.2 for titles, 1.4–1.5 for body. Primary button: full-width, LinearGradient Indigo→Violet, pill-shaped or radius 12, scale 0.95 on press with medium haptic. Cards: white bg, 16pt radius, hairline border, shadow rgba(79,70,229,0.08). Inputs: white bg, 8pt radius, floating label, Indigo border on focus. Bottom Tab Navigation (3–5 items), gradient active tab icon. Screen padding 16–20pt. Vertical rhythm 24pt between sections, 12pt between items. Shared Element Transition for hero cards opening to detail.","backgroundColor: '#F8FAFC', surfaceBg: '#FFFFFF', textPrimary: '#0F172A', textMuted: '#64748B', primary: '#4F46E5', secondary: '#7C3AED', success: '#10B981', border: '#E2E8F0', radiusCard: 16, radiusButton: 999, radiusInput: 8, shadowCard: 'rgba(79,70,229,0.08)', gradientPrimary: ['#4F46E5', '#7C3AED'], screenPadding: 20","☐ Background #F8FAFC applied, ☐ Indigo→Violet gradient on primary CTA, ☐ Colored card shadows (not gray), ☐ Plus Jakarta Sans typography, ☐ Floating label inputs with Indigo focus, ☐ Scale 0.97 press with haptic Medium, ☐ Bottom Tab Navigation implemented, ☐ Safe Area strict compliance, ☐ Skeletal loading placeholders, ☐ Reduced Motion fallback","--bg: #F8FAFC, --surface: #FFFFFF, --text: #0F172A, --muted: #64748B, --primary: #4F46E5, --secondary: #7C3AED, --success: #10B981, --border: #E2E8F0, --radius-card: 16px, --radius-pill: 999px, --radius-input: 8px, --shadow-card: rgba(79,70,229,0.08), --font: Plus Jakarta Sans"
+84,Sketch Hand-Drawn (Mobile),Mobile,"sketch, hand-drawn, handwriting, wobbly, imperfect, paper, kalam, organic, collage, post-it, tape, offset shadow, scribble","Red Marker #FF4D4D, Pencil Black #2D2D2D","Warm Paper #FDFBF7, Old Paper #E5E0D8, Blue Ballpoint #2D5DA1, Post-it Yellow #FFF9C4","Wobbly borderRadius (unique per corner: 15/25/20/10), borderWidth 2–3 solid/dashed, hard offset shadow via rear View (4px,4px) #2D2D2D, Kalam Bold headings, PatrickHand Regular body, slight rotation (-1deg/1deg) on cards, absolute SVG scribble overlays (arrows/tape/tacks), jiggle -2deg↔2deg on error, LayoutAnimation spring on layout changes, Haptics on press, paper texture repeating background","Low-fidelity prototyping, creative brands, children/picturebook apps, education tools, journaling apps, gamified puzzles","Enterprise dashboards, high-density data tables, fintech precision tools, medical or legal apps",✓ Light,⚠ Dark (requires texture inversion),✓ Lightweight,⚠ Moderate (small/muted text risk),✓ Mobile-First (wobbly touch targets 48x48),✗ Low-Conversion,"React Native 10/10, Reanimated 9/10, Expo 9/10",Creative/Education,Medium,"Design a Hand-Drawn (Sketch) mobile app. Background #FDFBF7 (warm paper texture). Typography: Kalam Bold for headings (high weight, felt-tip style), PatrickHand Regular for body (human but legible). Colors: Pencil Black #2D2D2D for all text and borders, Red Marker #FF4D4D for accents, Blue Ballpoint #2D5DA1for input focus. Cards: white background, wobbly corner radii (e.g., 15/25/20/10), borderWidth 3, rotate -1deg or +1deg. Hard offset shadow implemented as a second View behind the card offset 4px right and 4px down. Buttons: Post-it yellow #FFF9C4 for primary CTA, press state shifts the button (translateX 4, translateY 4) to cover the shadow. Inputs: PatrickHand font, wobbly border, focus changes to Blue Ballpoint. Add absolute SVG tape and tack decorations. Error: jiggle animation -2deg to +2deg. All touch targets minimum 48x48.","backgroundColor: '#FDFBF7', cardBg: '#FFFFFF', textPrimary: '#2D2D2D', accentRed: '#FF4D4D', accentBlue: '#2D5DA1', accentYellow: '#FFF9C4', border: '#2D2D2D', shadowView: 'offset 4px 4px #2D2D2D', wobblyRadius: [15,25,20,10], fontHeading: 'Kalam-Bold', fontBody: 'PatrickHand-Regular'","☐ Warm paper background texture applied, ☐ Kalam Bold headings, ☐ Wobbly corner radii on all cards, ☐ Hard offset shadow View (not blur), ☐ Cards slightly rotated, ☐ Button press shifts to cover shadow, ☐ SVG tape/tack decorations, ☐ PatrickHand for inputs, ☐ Jiggle error animation, ☐ Minimum 48x48 touch targets","--bg: #FDFBF7, --text: #2D2D2D, --accent-red: #FF4D4D, --accent-blue: #2D5DA1, --postit: #FFF9C4, --border-width: 3px, --shadow-offset: 4px 4px, --font-heading: Kalam Bold, --font-body: Patrick Hand, --rotation-card: -1deg to 1deg"
+85,Neumorphism (Mobile),Mobile,"neumorphism, soft ui, dual shadow, extruded, inset, clay surface, monochromatic, cool grey, haptic, ceramic, physical, depth","Accent Violet #6C63FF, Clay Base #E0E5EC","Text Dark #3D4852, Text Muted #6B7280, Shadow Light rgba(255,255,255,0.6), Shadow Dark rgba(163,177,198,0.7), Inset Background #D1D9E6","Full-screen #E0E5EC base, dual-layer shadow via nested View (light top-left + dark bottom-right), extruded convex resting state, inset concave pressed/input state, Reanimated scale 0.97 on press, shadow opacity interpolates 1→0.4 on press, Haptics Light on every interaction, 8pt grid, no blur shadows (no shadowRadius blend), nested depth (extruded card contains inset icon slot)","Minimal hardware controls, smart home apps, aesthetic utility tools, health monitors, brand showcase pages","High-density data, bright multi-color apps, apps needing strong visual hierarchy via color, dark-mode-only products",✓ Light-only,✗ Dark (breaks material metaphor),✓ Lightweight,⚠ Moderate (low-contrast risk),✓ Mobile-First,✗ Low-Conversion,"React Native 10/10, react-native-shadow-2 9/10, Reanimated 9/10",Tools/Lifestyle,Medium,"Design a Neumorphism (Soft UI) mobile app. Entire background is a single color #E0E5EC (Cool Clay). No other background colors. Dual shadows: outer dark shadowColor rgba(163,177,198,0.7) offset(6,6) radius 10 + outer light #FFFFFF offset(-6,-6) radius 10 using nested View or react-native-shadow-2. Extruded (convex) for resting buttons and cards. Inset (concave) for inputs and pressed states. Buttons: height 56, borderRadius 16, scale 0.97 on press with shadow opacity→0.4, Haptics.impactAsync Light. Cards: padding 24, borderRadius 32, nested inner icon container uses inset style. Inputs: height 50, borderRadius 16, backgroundColor #E0E5EC (NOT white), inset depth effect, focus borderColor #6C63FF width 1.5. Typography: Plus Jakarta Sans Bold or System. Heading 24–32pt, body 16pt, caption 12pt, letterSpacing -0.5 for headings. Animation: 250ms Bezier(0.4,0,0.2,1). No black shadows, no pure white backgrounds.","backgroundColor: '#E0E5EC', textPrimary: '#3D4852', textMuted: '#6B7280', accent: '#6C63FF', shadowLight: 'rgba(255,255,255,0.6)', shadowDark: 'rgba(163,177,198,0.7)', insetBg: '#D1D9E6', radiusCard: 32, radiusButton: 16, radiusPill: 999, shadowOffset: 6, shadowRadius: 10","☐ Single #E0E5EC base applied across all screens, ☐ Dual shadow (light+dark) implemented via nested View, ☐ Extruded resting state on cards/buttons, ☐ Inset concave state on inputs, ☐ Scale 0.97 press + shadow opacity interpolation, ☐ Haptics Light on all presses, ☐ No black shadows or white backgrounds, ☐ Nested depth pattern (extruded→inset), ☐ Accent #6C63FF on active/focus only, ☐ 8pt grid spacing","--bg: #E0E5EC, --text: #3D4852, --muted: #6B7280, --accent: #6C63FF, --shadow-light: rgba(255,255,255,0.6), --shadow-dark: rgba(163,177,198,0.7), --inset-bg: #D1D9E6, --radius-card: 32px, --radius-button: 16px, --font: Plus Jakarta Sans or System"
diff --git a/.claude/skills/ui-ux-pro-max/data/typography.csv b/.claude/skills/ui-ux-pro-max/data/typography.csv
new file mode 100644
index 000000000..51a63f01a
--- /dev/null
+++ b/.claude/skills/ui-ux-pro-max/data/typography.csv
@@ -0,0 +1,74 @@
+No,Font Pairing Name,Category,Heading Font,Body Font,Mood/Style Keywords,Best For,Google Fonts URL,CSS Import,Tailwind Config,Notes
+1,Classic Elegant,"Serif + Sans",Playfair Display,Inter,"elegant, luxury, sophisticated, timeless, premium, editorial","Luxury brands, fashion, spa, beauty, editorial, magazines, high-end e-commerce","https://fonts.google.com/share?selection.family=Inter:wght@300;400;500;600;700|Playfair+Display:wght@400;500;600;700","@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Playfair+Display:wght@400;500;600;700&display=swap');","fontFamily: { serif: ['Playfair Display', 'serif'], sans: ['Inter', 'sans-serif'] }","High contrast between elegant heading and clean body. Perfect for luxury/premium."
+2,Modern Professional,"Sans + Sans",Poppins,Open Sans,"modern, professional, clean, corporate, friendly, approachable","SaaS, corporate sites, business apps, startups, professional services","https://fonts.google.com/share?selection.family=Open+Sans:wght@300;400;500;600;700|Poppins:wght@400;500;600;700","@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&family=Poppins:wght@400;500;600;700&display=swap');","fontFamily: { heading: ['Poppins', 'sans-serif'], body: ['Open Sans', 'sans-serif'] }","Geometric Poppins for headings, humanist Open Sans for readability."
+3,Tech Startup,"Sans + Sans",Space Grotesk,DM Sans,"tech, startup, modern, innovative, bold, futuristic","Tech companies, startups, SaaS, developer tools, AI products","https://fonts.google.com/share?selection.family=DM+Sans:wght@400;500;700|Space+Grotesk:wght@400;500;600;700","@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&family=Space+Grotesk:wght@400;500;600;700&display=swap');","fontFamily: { heading: ['Space Grotesk', 'sans-serif'], body: ['DM Sans', 'sans-serif'] }","Space Grotesk has unique character, DM Sans is highly readable."
+4,Editorial Classic,"Serif + Serif",Cormorant Garamond,Libre Baskerville,"editorial, classic, literary, traditional, refined, bookish","Publishing, blogs, news sites, literary magazines, book covers","https://fonts.google.com/share?selection.family=Cormorant+Garamond:wght@400;500;600;700|Libre+Baskerville:wght@400;700","@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600;700&family=Libre+Baskerville:wght@400;700&display=swap');","fontFamily: { heading: ['Cormorant Garamond', 'serif'], body: ['Libre Baskerville', 'serif'] }","All-serif pairing for traditional editorial feel."
+5,Minimal Swiss,"Sans + Sans",Inter,Inter,"minimal, clean, swiss, functional, neutral, professional","Dashboards, admin panels, documentation, enterprise apps, design systems","https://fonts.google.com/share?selection.family=Inter:wght@300;400;500;600;700","@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');","fontFamily: { sans: ['Inter', 'sans-serif'] }","Single font family with weight variations. Ultimate simplicity."
+6,Playful Creative,"Display + Sans",Fredoka,Nunito,"playful, friendly, fun, creative, warm, approachable","Children's apps, educational, gaming, creative tools, entertainment","https://fonts.google.com/share?selection.family=Fredoka:wght@400;500;600;700|Nunito:wght@300;400;500;600;700","@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@400;500;600;700&family=Nunito:wght@300;400;500;600;700&display=swap');","fontFamily: { heading: ['Fredoka', 'sans-serif'], body: ['Nunito', 'sans-serif'] }","Rounded, friendly fonts perfect for playful UIs."
+7,Bold Statement,"Display + Sans",Bebas Neue,Source Sans 3,"bold, impactful, strong, dramatic, modern, headlines","Marketing sites, portfolios, agencies, event pages, sports","https://fonts.google.com/share?selection.family=Bebas+Neue|Source+Sans+3:wght@300;400;500;600;700","@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Source+Sans+3:wght@300;400;500;600;700&display=swap');","fontFamily: { display: ['Bebas Neue', 'sans-serif'], body: ['Source Sans 3', 'sans-serif'] }","Bebas Neue for large headlines only. All-caps display font."
+8,Wellness Calm,"Serif + Sans",Lora,Raleway,"calm, wellness, health, relaxing, natural, organic","Health apps, wellness, spa, meditation, yoga, organic brands","https://fonts.google.com/share?selection.family=Lora:wght@400;500;600;700|Raleway:wght@300;400;500;600;700","@import url('https://fonts.googleapis.com/css2?family=Lora:wght@400;500;600;700&family=Raleway:wght@300;400;500;600;700&display=swap');","fontFamily: { serif: ['Lora', 'serif'], sans: ['Raleway', 'sans-serif'] }","Lora's organic curves with Raleway's elegant simplicity."
+9,Developer Mono,"Mono + Sans",JetBrains Mono,IBM Plex Sans,"code, developer, technical, precise, functional, hacker","Developer tools, documentation, code editors, tech blogs, CLI apps","https://fonts.google.com/share?selection.family=IBM+Plex+Sans:wght@300;400;500;600;700|JetBrains+Mono:wght@400;500;600;700","@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600;700&display=swap');","fontFamily: { mono: ['JetBrains Mono', 'monospace'], sans: ['IBM Plex Sans', 'sans-serif'] }","JetBrains for code, IBM Plex for UI. Developer-focused."
+10,Retro Vintage,"Display + Serif",Abril Fatface,Merriweather,"retro, vintage, nostalgic, dramatic, decorative, bold","Vintage brands, breweries, restaurants, creative portfolios, posters","https://fonts.google.com/share?selection.family=Abril+Fatface|Merriweather:wght@300;400;700","@import url('https://fonts.googleapis.com/css2?family=Abril+Fatface&family=Merriweather:wght@300;400;700&display=swap');","fontFamily: { display: ['Abril Fatface', 'serif'], body: ['Merriweather', 'serif'] }","Abril Fatface for hero headlines only. High-impact vintage feel."
+11,Geometric Modern,"Sans + Sans",Outfit,Work Sans,"geometric, modern, clean, balanced, contemporary, versatile","General purpose, portfolios, agencies, modern brands, landing pages","https://fonts.google.com/share?selection.family=Outfit:wght@300;400;500;600;700|Work+Sans:wght@300;400;500;600;700","@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&family=Work+Sans:wght@300;400;500;600;700&display=swap');","fontFamily: { heading: ['Outfit', 'sans-serif'], body: ['Work Sans', 'sans-serif'] }","Both geometric but Outfit more distinctive for headings."
+12,Luxury Serif,"Serif + Sans",Cormorant,Montserrat,"luxury, high-end, fashion, elegant, refined, premium","Fashion brands, luxury e-commerce, jewelry, high-end services","https://fonts.google.com/share?selection.family=Cormorant:wght@400;500;600;700|Montserrat:wght@300;400;500;600;700","@import url('https://fonts.googleapis.com/css2?family=Cormorant:wght@400;500;600;700&family=Montserrat:wght@300;400;500;600;700&display=swap');","fontFamily: { serif: ['Cormorant', 'serif'], sans: ['Montserrat', 'sans-serif'] }","Cormorant's elegance with Montserrat's geometric precision."
+13,Friendly SaaS,"Sans + Sans",Plus Jakarta Sans,Plus Jakarta Sans,"friendly, modern, saas, clean, approachable, professional","SaaS products, web apps, dashboards, B2B, productivity tools","https://fonts.google.com/share?selection.family=Plus+Jakarta+Sans:wght@300;400;500;600;700","@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700&display=swap');","fontFamily: { sans: ['Plus Jakarta Sans', 'sans-serif'] }","Single versatile font. Modern alternative to Inter."
+14,News Editorial,"Serif + Sans",Newsreader,Roboto,"news, editorial, journalism, trustworthy, readable, informative","News sites, blogs, magazines, journalism, content-heavy sites","https://fonts.google.com/share?selection.family=Newsreader:wght@400;500;600;700|Roboto:wght@300;400;500;700","@import url('https://fonts.googleapis.com/css2?family=Newsreader:wght@400;500;600;700&family=Roboto:wght@300;400;500;700&display=swap');","fontFamily: { serif: ['Newsreader', 'serif'], sans: ['Roboto', 'sans-serif'] }","Newsreader designed for long-form reading. Roboto for UI."
+15,Handwritten Charm,"Script + Sans",Caveat,Quicksand,"handwritten, personal, friendly, casual, warm, charming","Personal blogs, invitations, creative portfolios, lifestyle brands","https://fonts.google.com/share?selection.family=Caveat:wght@400;500;600;700|Quicksand:wght@300;400;500;600;700","@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@400;500;600;700&family=Quicksand:wght@300;400;500;600;700&display=swap');","fontFamily: { script: ['Caveat', 'cursive'], sans: ['Quicksand', 'sans-serif'] }","Use Caveat sparingly for accents. Quicksand for body."
+16,Corporate Trust,"Sans + Sans",Lexend,Source Sans 3,"corporate, trustworthy, accessible, readable, professional, clean","Enterprise, government, healthcare, finance, accessibility-focused","https://fonts.google.com/share?selection.family=Lexend:wght@300;400;500;600;700|Source+Sans+3:wght@300;400;500;600;700","@import url('https://fonts.googleapis.com/css2?family=Lexend:wght@300;400;500;600;700&family=Source+Sans+3:wght@300;400;500;600;700&display=swap');","fontFamily: { heading: ['Lexend', 'sans-serif'], body: ['Source Sans 3', 'sans-serif'] }","Lexend designed for readability. Excellent accessibility."
+17,Brutalist Raw,"Mono + Mono",Space Mono,Space Mono,"brutalist, raw, technical, monospace, minimal, stark","Brutalist designs, developer portfolios, experimental, tech art","https://fonts.google.com/share?selection.family=Space+Mono:wght@400;700","@import url('https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&display=swap');","fontFamily: { mono: ['Space Mono', 'monospace'] }","All-mono for raw brutalist aesthetic. Limited weights."
+18,Fashion Forward,"Sans + Sans",Syne,Manrope,"fashion, avant-garde, creative, bold, artistic, edgy","Fashion brands, creative agencies, art galleries, design studios","https://fonts.google.com/share?selection.family=Manrope:wght@300;400;500;600;700|Syne:wght@400;500;600;700","@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@300;400;500;600;700&family=Syne:wght@400;500;600;700&display=swap');","fontFamily: { heading: ['Syne', 'sans-serif'], body: ['Manrope', 'sans-serif'] }","Syne's unique character for headlines. Manrope for readability."
+19,Soft Rounded,"Sans + Sans",Varela Round,Nunito Sans,"soft, rounded, friendly, approachable, warm, gentle","Children's products, pet apps, friendly brands, wellness, soft UI","https://fonts.google.com/share?selection.family=Nunito+Sans:wght@300;400;500;600;700|Varela+Round","@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@300;400;500;600;700&family=Varela+Round&display=swap');","fontFamily: { heading: ['Varela Round', 'sans-serif'], body: ['Nunito Sans', 'sans-serif'] }","Both rounded and friendly. Perfect for soft UI designs."
+20,Premium Sans,"Sans + Sans",Satoshi,General Sans,"premium, modern, clean, sophisticated, versatile, balanced","Premium brands, modern agencies, SaaS, portfolios, startups","https://fonts.google.com/share?selection.family=DM+Sans:wght@400;500;700","@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&display=swap');","fontFamily: { sans: ['DM Sans', 'sans-serif'] }","Note: Satoshi/General Sans on Fontshare. DM Sans as Google alternative."
+21,Vietnamese Friendly,"Sans + Sans",Be Vietnam Pro,Noto Sans,"vietnamese, international, readable, clean, multilingual, accessible","Vietnamese sites, multilingual apps, international products","https://fonts.google.com/share?selection.family=Be+Vietnam+Pro:wght@300;400;500;600;700|Noto+Sans:wght@300;400;500;600;700","@import url('https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@300;400;500;600;700&family=Noto+Sans:wght@300;400;500;600;700&display=swap');","fontFamily: { sans: ['Be Vietnam Pro', 'Noto Sans', 'sans-serif'] }","Be Vietnam Pro excellent Vietnamese support. Noto as fallback."
+22,Japanese Elegant,"Serif + Sans",Noto Serif JP,Noto Sans JP,"japanese, elegant, traditional, modern, multilingual, readable","Japanese sites, Japanese restaurants, cultural sites, anime/manga","https://fonts.google.com/share?selection.family=Noto+Sans+JP:wght@300;400;500;700|Noto+Serif+JP:wght@400;500;600;700","@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;400;500;700&family=Noto+Serif+JP:wght@400;500;600;700&display=swap');","fontFamily: { serif: ['Noto Serif JP', 'serif'], sans: ['Noto Sans JP', 'sans-serif'] }","Noto fonts excellent Japanese support. Traditional + modern feel."
+23,Korean Modern,"Sans + Sans",Noto Sans KR,Noto Sans KR,"korean, modern, clean, professional, multilingual, readable","Korean sites, K-beauty, K-pop, Korean businesses, multilingual","https://fonts.google.com/share?selection.family=Noto+Sans+KR:wght@300;400;500;700","@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;700&display=swap');","fontFamily: { sans: ['Noto Sans KR', 'sans-serif'] }","Clean Korean typography. Single font with weight variations."
+24,Chinese Traditional,"Serif + Sans",Noto Serif TC,Noto Sans TC,"chinese, traditional, elegant, cultural, multilingual, readable","Traditional Chinese sites, cultural content, Taiwan/Hong Kong markets","https://fonts.google.com/share?selection.family=Noto+Sans+TC:wght@300;400;500;700|Noto+Serif+TC:wght@400;500;600;700","@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@300;400;500;700&family=Noto+Serif+TC:wght@400;500;600;700&display=swap');","fontFamily: { serif: ['Noto Serif TC', 'serif'], sans: ['Noto Sans TC', 'sans-serif'] }","Traditional Chinese character support. Elegant pairing."
+25,Chinese Simplified,"Sans + Sans",Noto Sans SC,Noto Sans SC,"chinese, simplified, modern, professional, multilingual, readable","Simplified Chinese sites, mainland China market, business apps","https://fonts.google.com/share?selection.family=Noto+Sans+SC:wght@300;400;500;700","@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700&display=swap');","fontFamily: { sans: ['Noto Sans SC', 'sans-serif'] }","Simplified Chinese support. Clean modern look."
+26,Arabic Elegant,"Serif + Sans",Noto Naskh Arabic,Noto Sans Arabic,"arabic, elegant, traditional, cultural, RTL, readable","Arabic sites, Middle East market, Islamic content, bilingual sites","https://fonts.google.com/share?selection.family=Noto+Naskh+Arabic:wght@400;500;600;700|Noto+Sans+Arabic:wght@300;400;500;700","@import url('https://fonts.googleapis.com/css2?family=Noto+Naskh+Arabic:wght@400;500;600;700&family=Noto+Sans+Arabic:wght@300;400;500;700&display=swap');","fontFamily: { serif: ['Noto Naskh Arabic', 'serif'], sans: ['Noto Sans Arabic', 'sans-serif'] }","RTL support. Naskh for traditional, Sans for modern Arabic."
+27,Thai Modern,"Sans + Sans",Noto Sans Thai,Noto Sans Thai,"thai, modern, readable, clean, multilingual, accessible","Thai sites, Southeast Asia, tourism, Thai restaurants","https://fonts.google.com/share?selection.family=Noto+Sans+Thai:wght@300;400;500;700","@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Thai:wght@300;400;500;700&display=swap');","fontFamily: { sans: ['Noto Sans Thai', 'sans-serif'] }","Clean Thai typography. Excellent readability."
+28,Hebrew Modern,"Sans + Sans",Noto Sans Hebrew,Noto Sans Hebrew,"hebrew, modern, RTL, clean, professional, readable","Hebrew sites, Israeli market, Jewish content, bilingual sites","https://fonts.google.com/share?selection.family=Noto+Sans+Hebrew:wght@300;400;500;700","@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Hebrew:wght@300;400;500;700&display=swap');","fontFamily: { sans: ['Noto Sans Hebrew', 'sans-serif'] }","RTL support. Clean modern Hebrew typography."
+29,Legal Professional,"Serif + Sans",EB Garamond,Lato,"legal, professional, traditional, trustworthy, formal, authoritative","Law firms, legal services, contracts, formal documents, government","https://fonts.google.com/share?selection.family=EB+Garamond:wght@400;500;600;700|Lato:wght@300;400;700","@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:wght@400;500;600;700&family=Lato:wght@300;400;700&display=swap');","fontFamily: { serif: ['EB Garamond', 'serif'], sans: ['Lato', 'sans-serif'] }","EB Garamond for authority. Lato for clean body text."
+30,Medical Clean,"Sans + Sans",Figtree,Noto Sans,"medical, clean, accessible, professional, healthcare, trustworthy","Healthcare, medical clinics, pharma, health apps, accessibility","https://fonts.google.com/share?selection.family=Figtree:wght@300;400;500;600;700|Noto+Sans:wght@300;400;500;700","@import url('https://fonts.googleapis.com/css2?family=Figtree:wght@300;400;500;600;700&family=Noto+Sans:wght@300;400;500;700&display=swap');","fontFamily: { heading: ['Figtree', 'sans-serif'], body: ['Noto Sans', 'sans-serif'] }","Clean, accessible fonts for medical contexts."
+31,Financial Trust,"Sans + Sans",IBM Plex Sans,IBM Plex Sans,"financial, trustworthy, professional, corporate, banking, serious","Banks, finance, insurance, investment, fintech, enterprise","https://fonts.google.com/share?selection.family=IBM+Plex+Sans:wght@300;400;500;600;700","@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@300;400;500;600;700&display=swap');","fontFamily: { sans: ['IBM Plex Sans', 'sans-serif'] }","IBM Plex conveys trust and professionalism. Excellent for data."
+32,Real Estate Luxury,"Serif + Sans",Cinzel,Josefin Sans,"real estate, luxury, elegant, sophisticated, property, premium","Real estate, luxury properties, architecture, interior design","https://fonts.google.com/share?selection.family=Cinzel:wght@400;500;600;700|Josefin+Sans:wght@300;400;500;600;700","@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500;600;700&family=Josefin+Sans:wght@300;400;500;600;700&display=swap');","fontFamily: { serif: ['Cinzel', 'serif'], sans: ['Josefin Sans', 'sans-serif'] }","Cinzel's elegance for headlines. Josefin for modern body."
+33,Restaurant Menu,"Serif + Sans",Playfair Display SC,Karla,"restaurant, menu, culinary, elegant, foodie, hospitality","Restaurants, cafes, food blogs, culinary, hospitality","https://fonts.google.com/share?selection.family=Karla:wght@300;400;500;600;700|Playfair+Display+SC:wght@400;700","@import url('https://fonts.googleapis.com/css2?family=Karla:wght@300;400;500;600;700&family=Playfair+Display+SC:wght@400;700&display=swap');","fontFamily: { display: ['Playfair Display SC', 'serif'], sans: ['Karla', 'sans-serif'] }","Small caps Playfair for menu headers. Karla for descriptions."
+34,Art Deco,"Display + Sans",Poiret One,Didact Gothic,"art deco, vintage, 1920s, elegant, decorative, gatsby","Vintage events, art deco themes, luxury hotels, classic cocktails","https://fonts.google.com/share?selection.family=Didact+Gothic|Poiret+One","@import url('https://fonts.googleapis.com/css2?family=Didact+Gothic&family=Poiret+One&display=swap');","fontFamily: { display: ['Poiret One', 'sans-serif'], sans: ['Didact Gothic', 'sans-serif'] }","Poiret One for art deco headlines only. Didact for body."
+35,Magazine Style,"Serif + Sans",Libre Bodoni,Public Sans,"magazine, editorial, publishing, refined, journalism, print","Magazines, online publications, editorial content, journalism","https://fonts.google.com/share?selection.family=Libre+Bodoni:wght@400;500;600;700|Public+Sans:wght@300;400;500;600;700","@import url('https://fonts.googleapis.com/css2?family=Libre+Bodoni:wght@400;500;600;700&family=Public+Sans:wght@300;400;500;600;700&display=swap');","fontFamily: { serif: ['Libre Bodoni', 'serif'], sans: ['Public Sans', 'sans-serif'] }","Bodoni's editorial elegance. Public Sans for clean UI."
+36,Crypto/Web3,"Sans + Sans",Orbitron,Exo 2,"crypto, web3, futuristic, tech, blockchain, digital","Crypto platforms, NFT, blockchain, web3, futuristic tech","https://fonts.google.com/share?selection.family=Exo+2:wght@300;400;500;600;700|Orbitron:wght@400;500;600;700","@import url('https://fonts.googleapis.com/css2?family=Exo+2:wght@300;400;500;600;700&family=Orbitron:wght@400;500;600;700&display=swap');","fontFamily: { display: ['Orbitron', 'sans-serif'], body: ['Exo 2', 'sans-serif'] }","Orbitron for futuristic headers. Exo 2 for readable body."
+37,Gaming Bold,"Display + Sans",Russo One,Chakra Petch,"gaming, bold, action, esports, competitive, energetic","Gaming, esports, action games, competitive sports, entertainment","https://fonts.google.com/share?selection.family=Chakra+Petch:wght@300;400;500;600;700|Russo+One","@import url('https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@300;400;500;600;700&family=Russo+One&display=swap');","fontFamily: { display: ['Russo One', 'sans-serif'], body: ['Chakra Petch', 'sans-serif'] }","Russo One for impact. Chakra Petch for techy body text."
+38,Indie/Craft,"Display + Sans",Amatic SC,Cabin,"indie, craft, handmade, artisan, organic, creative","Craft brands, indie products, artisan, handmade, organic products","https://fonts.google.com/share?selection.family=Amatic+SC:wght@400;700|Cabin:wght@400;500;600;700","@import url('https://fonts.googleapis.com/css2?family=Amatic+SC:wght@400;700&family=Cabin:wght@400;500;600;700&display=swap');","fontFamily: { display: ['Amatic SC', 'sans-serif'], sans: ['Cabin', 'sans-serif'] }","Amatic for handwritten feel. Cabin for readable body."
+39,Startup Bold,"Sans + Sans",Clash Display,Satoshi,"startup, bold, modern, innovative, confident, dynamic","Startups, pitch decks, product launches, bold brands","https://fonts.google.com/share?selection.family=Outfit:wght@400;500;600;700|Rubik:wght@300;400;500;600;700","@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700&family=Rubik:wght@300;400;500;600;700&display=swap');","fontFamily: { heading: ['Outfit', 'sans-serif'], body: ['Rubik', 'sans-serif'] }","Note: Clash Display on Fontshare. Outfit as Google alternative."
+40,E-commerce Clean,"Sans + Sans",Rubik,Nunito Sans,"ecommerce, clean, shopping, product, retail, conversion","E-commerce, online stores, product pages, retail, shopping","https://fonts.google.com/share?selection.family=Nunito+Sans:wght@300;400;500;600;700|Rubik:wght@300;400;500;600;700","@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@300;400;500;600;700&family=Rubik:wght@300;400;500;600;700&display=swap');","fontFamily: { heading: ['Rubik', 'sans-serif'], body: ['Nunito Sans', 'sans-serif'] }","Clean readable fonts perfect for product descriptions."
+41,Academic/Research,"Serif + Sans",Crimson Pro,Atkinson Hyperlegible,"academic, research, scholarly, accessible, readable, educational","Universities, research papers, academic journals, educational","https://fonts.google.com/share?selection.family=Atkinson+Hyperlegible:wght@400;700|Crimson+Pro:wght@400;500;600;700","@import url('https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:wght@400;700&family=Crimson+Pro:wght@400;500;600;700&display=swap');","fontFamily: { serif: ['Crimson Pro', 'serif'], sans: ['Atkinson Hyperlegible', 'sans-serif'] }","Crimson for scholarly headlines. Atkinson for accessibility."
+42,Dashboard Data,"Mono + Sans",Fira Code,Fira Sans,"dashboard, data, analytics, code, technical, precise","Dashboards, analytics, data visualization, admin panels","https://fonts.google.com/share?selection.family=Fira+Code:wght@400;500;600;700|Fira+Sans:wght@300;400;500;600;700","@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500;600;700&family=Fira+Sans:wght@300;400;500;600;700&display=swap');","fontFamily: { mono: ['Fira Code', 'monospace'], sans: ['Fira Sans', 'sans-serif'] }","Fira family cohesion. Code for data, Sans for labels."
+43,Music/Entertainment,"Display + Sans",Righteous,Poppins,"music, entertainment, fun, energetic, bold, performance","Music platforms, entertainment, events, festivals, performers","https://fonts.google.com/share?selection.family=Poppins:wght@300;400;500;600;700|Righteous","@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&family=Righteous&display=swap');","fontFamily: { display: ['Righteous', 'sans-serif'], sans: ['Poppins', 'sans-serif'] }","Righteous for bold entertainment headers. Poppins for body."
+44,Minimalist Portfolio,"Sans + Sans",Archivo,Space Grotesk,"minimal, portfolio, designer, creative, clean, artistic","Design portfolios, creative professionals, minimalist brands","https://fonts.google.com/share?selection.family=Archivo:wght@300;400;500;600;700|Space+Grotesk:wght@300;400;500;600;700","@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@300;400;500;600;700&family=Space+Grotesk:wght@300;400;500;600;700&display=swap');","fontFamily: { heading: ['Space Grotesk', 'sans-serif'], body: ['Archivo', 'sans-serif'] }","Space Grotesk for distinctive headers. Archivo for clean body."
+45,Kids/Education,"Display + Sans",Baloo 2,Comic Neue,"kids, education, playful, friendly, colorful, learning","Children's apps, educational games, kid-friendly content","https://fonts.google.com/share?selection.family=Baloo+2:wght@400;500;600;700|Comic+Neue:wght@300;400;700","@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@400;500;600;700&family=Comic+Neue:wght@300;400;700&display=swap');","fontFamily: { display: ['Baloo 2', 'sans-serif'], sans: ['Comic Neue', 'sans-serif'] }","Fun, playful fonts for children. Comic Neue is readable comic style."
+46,Wedding/Romance,"Script + Serif",Great Vibes,Cormorant Infant,"wedding, romance, elegant, script, invitation, feminine","Wedding sites, invitations, romantic brands, bridal","https://fonts.google.com/share?selection.family=Cormorant+Infant:wght@300;400;500;600;700|Great+Vibes","@import url('https://fonts.googleapis.com/css2?family=Cormorant+Infant:wght@300;400;500;600;700&family=Great+Vibes&display=swap');","fontFamily: { script: ['Great Vibes', 'cursive'], serif: ['Cormorant Infant', 'serif'] }","Great Vibes for elegant accents. Cormorant for readable text."
+47,Science/Tech,"Sans + Sans",Exo,Roboto Mono,"science, technology, research, data, futuristic, precise","Science, research, tech documentation, data-heavy sites","https://fonts.google.com/share?selection.family=Exo:wght@300;400;500;600;700|Roboto+Mono:wght@300;400;500;700","@import url('https://fonts.googleapis.com/css2?family=Exo:wght@300;400;500;600;700&family=Roboto+Mono:wght@300;400;500;700&display=swap');","fontFamily: { sans: ['Exo', 'sans-serif'], mono: ['Roboto Mono', 'monospace'] }","Exo for modern tech feel. Roboto Mono for code/data."
+48,Accessibility First,"Sans + Sans",Atkinson Hyperlegible,Atkinson Hyperlegible,"accessible, readable, inclusive, WCAG, dyslexia-friendly, clear","Accessibility-critical sites, government, healthcare, inclusive design","https://fonts.google.com/share?selection.family=Atkinson+Hyperlegible:wght@400;700","@import url('https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:wght@400;700&display=swap');","fontFamily: { sans: ['Atkinson Hyperlegible', 'sans-serif'] }","Designed for maximum legibility. Excellent for accessibility."
+49,Sports/Fitness,"Sans + Sans",Barlow Condensed,Barlow,"sports, fitness, athletic, energetic, condensed, action","Sports, fitness, gyms, athletic brands, competition","https://fonts.google.com/share?selection.family=Barlow+Condensed:wght@400;500;600;700|Barlow:wght@300;400;500;600;700","@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@400;500;600;700&family=Barlow:wght@300;400;500;600;700&display=swap');","fontFamily: { display: ['Barlow Condensed', 'sans-serif'], body: ['Barlow', 'sans-serif'] }","Condensed for impact headlines. Regular Barlow for body."
+50,Luxury Minimalist,"Serif + Sans",Bodoni Moda,Jost,"luxury, minimalist, high-end, sophisticated, refined, premium","Luxury minimalist brands, high-end fashion, premium products","https://fonts.google.com/share?selection.family=Bodoni+Moda:wght@400;500;600;700|Jost:wght@300;400;500;600;700","@import url('https://fonts.googleapis.com/css2?family=Bodoni+Moda:wght@400;500;600;700&family=Jost:wght@300;400;500;600;700&display=swap');","fontFamily: { serif: ['Bodoni Moda', 'serif'], sans: ['Jost', 'sans-serif'] }","Bodoni's high contrast elegance. Jost for geometric body."
+51,Tech/HUD Mono,"Mono + Mono",Share Tech Mono,Fira Code,"tech, futuristic, hud, sci-fi, data, monospaced, precise","Sci-fi interfaces, developer tools, cybersecurity, dashboards","https://fonts.google.com/share?selection.family=Fira+Code:wght@300;400;500;600;700|Share+Tech+Mono","@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@300;400;500;600;700&family=Share+Tech+Mono&display=swap');","fontFamily: { hud: ['Share Tech Mono', 'monospace'], code: ['Fira Code', 'monospace'] }","Share Tech Mono has that classic sci-fi look."
+52,Pixel Retro,"Display + Sans",Press Start 2P,VT323,"pixel, retro, gaming, 8-bit, nostalgic, arcade","Pixel art games, retro websites, creative portfolios","https://fonts.google.com/share?selection.family=Press+Start+2P|VT323","@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=VT323&display=swap');","fontFamily: { pixel: ['Press Start 2P', 'cursive'], terminal: ['VT323', 'monospace'] }","Press Start 2P is very wide/large. VT323 is better for body text."
+53,Neubrutalist Bold,"Display + Sans",Lexend Mega,Public Sans,"bold, neubrutalist, loud, strong, geometric, quirky","Neubrutalist designs, Gen Z brands, bold marketing","https://fonts.google.com/share?selection.family=Lexend+Mega:wght@100..900|Public+Sans:wght@100..900","@import url('https://fonts.googleapis.com/css2?family=Lexend+Mega:wght@100..900&family=Public+Sans:wght@100..900&display=swap');","fontFamily: { mega: ['Lexend Mega', 'sans-serif'], body: ['Public Sans', 'sans-serif'] }","Lexend Mega has distinct character and variable weight."
+54,Academic/Archival,"Serif + Serif",EB Garamond,Crimson Text,"academic, old-school, university, research, serious, traditional","University sites, archives, research papers, history","https://fonts.google.com/share?selection.family=Crimson+Text:wght@400;600;700|EB+Garamond:wght@400;500;600;700;800","@import url('https://fonts.googleapis.com/css2?family=Crimson+Text:wght@400;600;700&family=EB+Garamond:wght@400;500;600;700;800&display=swap');","fontFamily: { classic: ['EB Garamond', 'serif'], text: ['Crimson Text', 'serif'] }","Classic academic aesthetic. Very legible."
+55,Spatial Clear,"Sans + Sans",Inter,Inter,"spatial, legible, glass, system, clean, neutral","Spatial computing, AR/VR, glassmorphism interfaces","https://fonts.google.com/share?selection.family=Inter:wght@300;400;500;600","@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&display=swap');","fontFamily: { sans: ['Inter', 'sans-serif'] }","Optimized for readability on dynamic backgrounds."
+56,Kinetic Motion,"Display + Mono",Syncopate,Space Mono,"kinetic, motion, futuristic, speed, wide, tech","Music festivals, automotive, high-energy brands","https://fonts.google.com/share?selection.family=Space+Mono:wght@400;700|Syncopate:wght@400;700","@import url('https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&family=Syncopate:wght@400;700&display=swap');","fontFamily: { display: ['Syncopate', 'sans-serif'], mono: ['Space Mono', 'monospace'] }","Syncopate's wide stance works well with motion effects."
+57,Gen Z Brutal,"Display + Sans",Anton,Epilogue,"brutal, loud, shouty, meme, internet, bold","Gen Z marketing, streetwear, viral campaigns","https://fonts.google.com/share?selection.family=Anton|Epilogue:wght@400;500;600;700","@import url('https://fonts.googleapis.com/css2?family=Anton&family=Epilogue:wght@400;500;600;700&display=swap');","fontFamily: { display: ['Anton', 'sans-serif'], body: ['Epilogue', 'sans-serif'] }","Anton is impactful and condensed. Good for stickers/badges."57,Bauhaus Geometric,"Geometric Sans + Single Weight","Outfit","Outfit","bauhaus, geometric, constructivist, bold, uppercase, architectural, mechanical, poster, tactile","Bauhaus mobile apps, bold editorial mobile, design-forward branding apps, art/culture platforms","https://fonts.google.com/share?selection.family=Outfit:wght@400;500;700;900","@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;700;900&display=swap');","fontFamily: { display: ['Outfit', 'sans-serif'], body: ['Outfit', 'sans-serif'] }","Single-family system: Outfit 900 uppercase tracking-tighter for heroes; Outfit 700 uppercase for buttons/nav; Outfit 500 for body. Scale aggressively: text-4xl–text-5xl headlines on mobile."
+58,Minimalist Monochrome Editorial,"Serif + Serif + Mono (Triple Stack)",Playfair Display,Source Serif 4,"monochrome, editorial, austere, typographic, pocket manifesto, luxury, high contrast, brutalist mobile","Luxury fashion mobile apps, editorial publications, digital exhibitions, portfolio apps, high-contrast e-reader aesthetics","https://fonts.google.com/share?selection.family=JetBrains+Mono:wght@400;500|Playfair+Display:ital,wght@0,400;0,700;0,900;1,400|Source+Serif+4:ital,wght@0,300;0,400;0,600;1,300","@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500&family=Playfair+Display:ital,wght@0,400;0,700;0,900;1,400&family=Source+Serif+4:ital,wght@0,300;0,400;0,600;1,300&display=swap');","fontFamily: { display: ['Playfair Display', 'serif'], body: ['Source Serif 4', 'serif'], mono: ['JetBrains Mono', 'monospace'] }","Triple stack: Playfair Display 900 tracking-tighter leading-[0.9] for heroes (text-5xl–text-6xl breaks words graphically). Source Serif 4 300–600 for body legibility. JetBrains Mono 400–500 uppercase tracking-widest for tags/dates/labels. NO UI sans-serif — 100% serif/mono."
+59,Modern Dark Cinema (Inter System),"Sans + Mono",Inter,Inter,"dark, cinematic, technical, precision, clean, premium, developer, professional, high-end utility","Developer tools, fintech/trading, AI dashboards, streaming platforms, high-end productivity apps","https://fonts.google.com/share?selection.family=Inter:wght@300;400;500;600;700","@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');","fontFamily: { sans: ['Inter', 'sans-serif'] }","Single-family precision system: Inter 700 (-1.5 tracking) for Display 48pt; Inter 600 (-0.5 tracking) for H1 32pt / H2 24pt; Inter 400 for body 16pt; Inter 500 uppercase +1.2 tracking for labels/mono. Gradient text via mask-view + react-native-linear-gradient (#FFFFFF → rgba(255,255,255,0.7)) on major headers."
+60,SaaS Mobile Boutique (Calistoga + Inter),"Display Serif + Sans + Mono",Calistoga,Inter,"saas, boutique, electric, warm, editorial, bold, premium, fintech, business, dual font, human warmth","B2B SaaS mobile, fintech apps, analytics dashboards, marketing tools, operations platforms","https://fonts.google.com/share?selection.family=Calistoga:ital@0;1|Inter:wght@300;400;500;600;700|JetBrains+Mono:wght@400;500","@import url('https://fonts.googleapis.com/css2?family=Calistoga:ital@0;1&family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');","fontFamily: { display: ['Calistoga', 'serif'], body: ['Inter', 'sans-serif'], mono: ['JetBrains Mono', 'monospace'] }","Tri-stack: Calistoga (adds human warmth) for heroes 36–42pt leading-1.1; Inter 400–600 for body/UI 16–18pt; JetBrains Mono 12pt uppercase tracking-[1.5] for data labels and section badges. Scale: Hero 36–42pt, Section H2 28–32pt, Body 16–18pt, Label 12pt. Avoid italic Calistoga except editorial callouts."
+61,Terminal CLI Monospace,"Mono + Mono (Single Family)",JetBrains Mono,JetBrains Mono,"terminal, cli, hacker, monospace, matrix, developer, retro-future, command line, precision, OLED","Developer tools, Web3/blockchain apps, hacker aesthetic, sci-fi games, ARG, security tools, geek-culture portfolios","https://fonts.google.com/share?selection.family=JetBrains+Mono:ital,wght@0,400;0,500;1,400","@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,400;0,500;1,400&display=swap');","fontFamily: { mono: ['JetBrains Mono', 'monospace'] }","Single monospace system: use ONLY JetBrains Mono (or SpaceMono-Regular as system fallback). Strict sizes: 12pt / 14pt / 16pt only — no in-between. Weight: 400 normal (bold ruins mono character). Line height: 1.2x font size for information density. Letter spacing: normal (monospaced auto-spacing). All UI labels uppercase. ASCII borders and text-based progress bars."
+62,Kinetic Brutalism (Space Grotesk),"Geometric Sans (Single Dominant)",Space Grotesk,Space Grotesk,"kinetic, brutalist, aggressive, uppercase, oversized, display, motion, street, bold, high-energy, zine","Music/culture apps, sports platforms, brand flagship mobile, performance dashboards, underground product drops","https://fonts.google.com/share?selection.family=Space+Grotesk:wght@400;500;600;700","@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&display=swap');","fontFamily: { display: ['Space Grotesk', 'sans-serif'], body: ['Space Grotesk', 'sans-serif'] }","Dominant single-family system: Space Grotesk 700–900 for ALL display. Scale: Hero 60–120pt (windowWidth/375*size), Section 40–50pt, Card titles 28–32pt, Body 18–20pt, Labels 12pt. ALL display/buttons/nav: UPPERCASE, letterSpacing -1 (large) / +2 (labels), lineHeight 0.9–1.1x. Use Inter as fallback. Font scale must use PixelRatio helper for responsive sizing."
+63,Flat Design Mobile (System Bold),"Sans + Sans",Inter,Inter,"flat, clean, system, bold, geometric, cross-platform, icon, poster, minimal, functional, responsive","Cross-platform apps, dashboards, system UI, onboarding, marketing pages, informational apps, icon-heavy interfaces","https://fonts.google.com/share?selection.family=Inter:wght@400;600;700;800","@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800&display=swap');","fontFamily: { sans: ['Inter', 'sans-serif'] }","System-first strategy: Inter as primary, falls back to system SF/Roboto on iOS/Android. Scale: Headlines fontWeight 800 letterSpacing -0.5; Subheadings fontWeight 600 fontSize 18; Body fontWeight 400 lineHeight 24; Labels fontWeight 700 uppercase letterSpacing 1. Thick weights carry all hierarchy since there are no shadows. Use aggressive size contrast (poster rule: body 16pt vs headline 40pt+). Avoid italic."
+64,Material You MD3 (Roboto System),"Sans (System Default)",Roboto,Roboto,"material design 3, md3, android, google, tonal, friendly, rounded, accessible, adaptive","Android apps, cross-platform tools, productivity software, data-heavy B2B dashboards, enterprise mobile","https://fonts.google.com/share?selection.family=Roboto:ital,wght@0,300;0,400;0,500;0,700;1,400","@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;0,400;0,500;0,700;1,400&display=swap');","fontFamily: { sans: ['Roboto', 'sans-serif'] }","MD3 type scale: Display Large 56px/400/64px. Headline Large 32px/500/40px. Title Large 22px/500/28px. Body Large 16px/400/24px. Label Medium 12px/500/16px. Buttons and Labels: letterSpacing 0.1px. Use system Roboto on Android; load from Google Fonts for iOS parity. Never use custom weights beyond 300–700."
+65,Neo Brutalism Mobile (Space Grotesk Heavy),"Geometric Sans (Bold-Only)",Space Grotesk,Space Grotesk,"neo brutalism, pop art, loud, bold, heavy, stickers, mechanical, high contrast, cream, gen-z","Creative tools, Gen-Z marketing, e-commerce for youth culture, content portfolios, collage-style apps","https://fonts.google.com/share?selection.family=Space+Grotesk:wght@700","@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@700&display=swap');","fontFamily: { display: ['Space Grotesk', 'sans-serif'], body: ['Space Grotesk', 'sans-serif'] }","Strictly 700 (Bold) and 900 (Black/Heavy) ONLY — never Regular or Light. Display: 48–64px. Heading: 24–32px. Body: 18–20px (stays heavy for brutalist density). Labels: 14px ALL CAPS letterSpacing 2. All buttons and navigation: uppercase. System bold as fallback. No italic, no thin weights."
+66,Bold Typography Mobile (Inter-Tight Poster),"Sans + Serif (Display) + Mono","Inter","Playfair Display","bold typography, editorial, poster, near-black, vermillion, luxury, type-as-hero, manifesto, high-contrast","Creative brand flagships, reading platforms, event apps, flash pages, luxury mobile experiences","https://fonts.google.com/share?selection.family=Inter:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400|JetBrains+Mono:wght@400|Playfair+Display:ital@1","@import url('https://fonts.googleapis.com/css2?family=Inter:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400&family=JetBrains+Mono:wght@400&family=Playfair+Display:ital@1&display=swap');","fontFamily: { display: ['Inter', 'sans-serif'], quote: ['Playfair Display', 'serif'], mono: ['JetBrains Mono', 'monospace'] }","Tri-stack: Inter 600–800 for all UI (letterSpacing -1.5px heroes, -0.5px subheads). Playfair Display Italic ONLY for pull quotes. JetBrains Mono for labels and stats. Scale: 12px labels, 16px body, 22px sub, 32px section, 40px H2, 56px H1, 72px Hero Statement. 5:1 ratio H1:Body is mandatory. lineHeight 1.1 headlines, 1.6 body. Underlines (2–3pt accent) replace buttons for interactions."
+67,Academia Mobile (Cormorant + Crimson + Cinzel),"Serif + Book Serif + Engraved (Triple Stack)","Cormorant Garamond","Crimson Pro","academia, library, mahogany, parchment, brass, scholarly, prestige, antique, victorian, leather","Knowledge management apps, scholarly reading tools, personal brand portfolios, RPG games, cultural community platforms","https://fonts.google.com/share?selection.family=Cinzel:wght@400;500;600|Cormorant+Garamond:ital,wght@0,300;0,500;0,700;1,300;1,500|Crimson+Pro:ital,wght@0,300;0,400;0,600;1,300;1,400","@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500;600&family=Cormorant+Garamond:ital,wght@0,300;0,500;0,700;1,300;1,500&family=Crimson+Pro:ital,wght@0,300;0,400;0,600;1,300;1,400&display=swap');","fontFamily: { heading: ['Cormorant Garamond', 'serif'], body: ['Crimson Pro', 'serif'], display: ['Cinzel', 'serif'] }","Triple-stack: Cormorant Garamond Medium for all headings (32–40px tight leading). Crimson Pro Regular for body reading text (16–18px, lineHeight 24–26px). Cinzel SemiBold for ALL-CAPS labels, overlines, section prefixes (10–12px, letterSpacing 2–3px). Drop caps: first letter 60px Cinzel in Brass #C9A962. Section prefix: VOLUME I/II/III in Cinzel 10px. NO sans-serif anywhere."
+68,Cyberpunk Mobile (Orbitron + JetBrains Mono),"Tech Display + Mono","Orbitron","JetBrains Mono","cyberpunk, neon, glitch, hud, sci-fi, dark, matrix green, magenta, chamfered, tactical","Gaming companion apps, fintech/crypto, data visualization, dark brand apps, cyberpunk narrative games","https://fonts.google.com/share?selection.family=JetBrains+Mono:wght@400;500|Orbitron:wght@700;900","@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500&family=Orbitron:wght@700;900&display=swap');","fontFamily: { heading: ['Orbitron', 'sans-serif'], body: ['JetBrains Mono', 'monospace'] }","Dual-stack: Orbitron 700–900 for H1 (42px uppercase letterSpacing 4, fontWeight 900). JetBrains Mono 400–500 for all body/data text (14px letterSpacing 1). Labels: 10px uppercase opacity 0.7. Heading scale aggressive: H1 42px, H2 28px, Section 20px. Body 14px monospace only. NO mixed sans-serif. Fallback: monospace system font. Orbitron requires loading — use NativeWind or useFonts hook."
+69,Web3 Bitcoin DeFi (Space Grotesk + Inter + Mono),"Geometric Sans + Sans + Mono (Triple)","Space Grotesk","Inter","web3, bitcoin, defi, digital gold, fintech, crypto, trustless, luminescent, precision, dark","DeFi protocols and wallets, NFT platforms, metaverse social apps, high-tech brand landing pages","https://fonts.google.com/share?selection.family=Inter:wght@400;500;600;700|JetBrains+Mono:wght@400;500|Space+Grotesk:wght@500;600;700","@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&family=Space+Grotesk:wght@500;600;700&display=swap');","fontFamily: { heading: ['Space Grotesk', 'sans-serif'], body: ['Inter', 'sans-serif'], mono: ['JetBrains Mono', 'monospace'] }","Tri-stack: Space Grotesk 600–700 for headings (geometric, technical character). Inter 400–600 for all body and UI text (high legibility). JetBrains Mono Medium for all data/stats/prices/hashes (technical accuracy). Buttons: Inter Bold uppercase letterSpacing 1.5. Balance figures use MaskedView gradient text (orange→gold). Heading scale: H1 36–42px, H2 24–28px, body 16–18px, mono labels 12–14px."
+70,Claymorphism Mobile (Nunito + DM Sans),"Display Rounded + Geometric Sans","Nunito","DM Sans","claymorphism, clay, rounded, playful, candy, bubbly, soft, 3d, children, education, tactile, spring, nunito, dm sans","Children education apps, teen social, brand mascot apps, creative tools, fintech gamification","https://fonts.google.com/share?selection.family=DM+Sans:ital,wght@0,400;0,500;0,700;1,400|Nunito:ital,wght@0,700;0,800;0,900;1,700","@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,wght@0,400;0,500;0,700;1,400&family=Nunito:ital,wght@0,700;0,800;0,900;1,700&display=swap');","fontFamily: { display: ['Nunito', 'sans-serif'], body: ['DM Sans', 'sans-serif'] }","Dual-stack: Nunito Black (900) or ExtraBold (800) for ALL headings — rounded terminals are mandatory. DM Sans Medium (500) for body text — clean and geometric. Scale: Hero 48px lineHeight 52 letterSpacing -1. Section Title 32px lineHeight 38. Card Title 22px lineHeight 28. Body 16px lineHeight 24. Never use Nunito for body text (too decorative at small sizes). Never use weights below 700 for any heading. includeFontPadding: false on all Nunito Text components for vertical centering in rounded buttons."
+71,Enterprise SaaS Mobile (Plus Jakarta Sans),"Geometric Sans (Single Family)","Plus Jakarta Sans","Plus Jakarta Sans","enterprise, saas, b2b, professional, indigo, modern, approachable, legible, ios dynamic type, android scaling","B2B SaaS apps, productivity tools, government and finance mobile apps, admin dashboards, enterprise onboarding","https://fonts.google.com/share?selection.family=Plus+Jakarta+Sans:ital,wght@0,400;0,600;0,700;0,800;1,400","@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,400;0,600;0,700;0,800;1,400&display=swap');","fontFamily: { sans: ['Plus Jakarta Sans', 'sans-serif'] }","Single-family system: Plus Jakarta Sans balances professional authority with mobile approachability. Weight scale: ExtraBold 800 for screen titles/hero (line height 1.1–1.2). Bold 700 for section headers. SemiBold 600 for card titles and buttons. Regular 400 for body text (line height 1.4–1.5). Must support iOS Dynamic Type and Android font scaling — never hardcode pixel sizes without respecting system font scale. Button text: uppercase, letterSpacing 0.5. Caption: 12px Regular. Muted: Slate 500 #64748B."
+72,Sketch Hand-Drawn Mobile (Kalam + Patrick Hand),"Handwritten + Handwritten (Dual)","Kalam","Patrick Hand","sketch, hand-drawn, handwriting, human, imperfect, organic, paper, kalam, patrick hand, education, journal, creative","Journaling apps, prototype tools, children's picturebook apps, creative platforms, gamified puzzle apps","https://fonts.google.com/share?selection.family=Kalam:wght@400;700|Patrick+Hand","@import url('https://fonts.googleapis.com/css2?family=Kalam:wght@400;700&family=Patrick+Hand&display=swap');","fontFamily: { heading: ['Kalam', 'cursive'], body: ['Patrick Hand', 'cursive'] }","Dual handwritten stack: Kalam Bold (700) for all headings — high visual weight, felt-tip marker aesthetic, conveys intentional messiness. Patrick Hand Regular for all body text — highly legible at mobile sizes while remaining distinctly human. Scale: Heading 28–36px with lineHeight adjusted for descenders. Body 16–18px lineHeight 1.5. Labels 14px. Vary font sizes slightly between adjacent elements for spontaneous feel. Avoid alignment: 'center' for long body text — left-aligned reads more naturally. Both fonts require useFonts loading in Expo. Never use these fonts for financial figures or legal text."
+73,Neumorphism Mobile (Plus Jakarta Sans + System),"Geometric Sans (System Fallback)","Plus Jakarta Sans","Plus Jakarta Sans","neumorphism, soft ui, monochromatic, cool grey, minimal, physical, depth, ceramic, system font, utility","Smart home controls, minimal tools, aesthetic dashboards, health monitors, brand showcase pages","https://fonts.google.com/share?selection.family=Plus+Jakarta+Sans:ital,wght@0,400;0,500;0,700;1,400","@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,400;0,500;0,700;1,400&display=swap');","fontFamily: { sans: ['Plus Jakarta Sans', 'sans-serif'] }","Single-family or System fallback: Plus Jakarta Sans Bold/Medium pairs beautifully with the monochromatic #E0E5EC surface — subtle geometry without competing with the depth effect. Heading: 24–32px Bold (700), letterSpacing -0.5 for modern premium feel. Body: 16px Medium (500), lineHeight 1.4. Caption: 12px Regular (400). Use Text Primary #3D4852 (7.5:1 contrast against #E0E5EC) for all primary text. Use Text Muted #6B7280 (4.6:1 contrast) for secondary text. Accent color #6C63FF only on active labels or focus indicators. Never use italic or thin weights — they lose legibility against the embossed background. System (SF Pro / Roboto) is an acceptable fallback for performance-sensitive implementations."
diff --git a/.claude/skills/ui-ux-pro-max/data/ui-reasoning.csv b/.claude/skills/ui-ux-pro-max/data/ui-reasoning.csv
new file mode 100644
index 000000000..8b6ca2fb2
--- /dev/null
+++ b/.claude/skills/ui-ux-pro-max/data/ui-reasoning.csv
@@ -0,0 +1,162 @@
+No,UI_Category,Recommended_Pattern,Style_Priority,Color_Mood,Typography_Mood,Key_Effects,Decision_Rules,Anti_Patterns,Severity
+1,SaaS (General),Hero + Features + CTA,Glassmorphism + Flat Design,Trust blue + Accent contrast,Professional + Hierarchy,Subtle hover (200-250ms) + Smooth transitions,"{""if_ux_focused"": ""prioritize-minimalism"", ""if_data_heavy"": ""add-glassmorphism""}",Excessive animation + Dark mode by default,HIGH
+2,Micro SaaS,Hero-Centric + Trust,Motion-Driven + Vibrant & Block,Bold primaries + Accent contrast,Modern + Energetic typography,Scroll-triggered animations + Parallax,"{""if_pre_launch"": ""use-waitlist-pattern"", ""if_video_ready"": ""add-hero-video""}",Static design + No video + Poor mobile,HIGH
+3,E-commerce,Feature-Rich Showcase,Vibrant & Block-based,Brand primary + Success green,Engaging + Clear hierarchy,Card hover lift (200ms) + Scale effect,"{""if_luxury"": ""switch-to-liquid-glass"", ""if_conversion_focused"": ""add-urgency-colors""}",Flat design without depth + Text-heavy pages,HIGH
+4,E-commerce Luxury,Feature-Rich Showcase,Liquid Glass + Glassmorphism,Premium colors + Minimal accent,Elegant + Refined typography,Chromatic aberration + Fluid animations (400-600ms),"{""if_checkout"": ""emphasize-trust"", ""if_hero_needed"": ""use-3d-hyperrealism""}",Vibrant & Block-based + Playful colors,HIGH
+5,B2B Service,Feature-Rich Showcase + Trust,Trust & Authority + Minimalism,Professional blue + Neutral grey,Formal + Clear typography,Section transitions + Feature reveals,"{""must_have"": ""case-studies"", ""must_have"": ""roi-messaging""}",Playful design + Hidden credentials + AI purple/pink gradients,HIGH
+6,Financial Dashboard,Data-Dense Dashboard,Dark Mode (OLED) + Data-Dense,Dark bg + Red/Green alerts + Trust blue,Clear + Readable typography,Real-time number animations + Alert pulse,"{""must_have"": ""real-time-updates"", ""must_have"": ""high-contrast""}",Light mode default + Slow rendering,HIGH
+7,Analytics Dashboard,Data-Dense + Drill-Down,Data-Dense + Heat Map,Cool→Hot gradients + Neutral grey,Clear + Functional typography,Hover tooltips + Chart zoom + Filter animations,"{""must_have"": ""data-export"", ""if_large_dataset"": ""virtualize-lists""}",Ornate design + No filtering,HIGH
+8,Healthcare App,Social Proof-Focused,Neumorphism + Accessible & Ethical,Calm blue + Health green,Readable + Large type (16px+),Soft box-shadow + Smooth press (150ms),"{""must_have"": ""wcag-aaa-compliance"", ""if_medication"": ""red-alert-colors""}",Bright neon colors + Motion-heavy animations + AI purple/pink gradients,HIGH
+9,Educational App,Feature-Rich Showcase,Claymorphism + Micro-interactions,Playful colors + Clear hierarchy,Friendly + Engaging typography,Soft press (200ms) + Fluffy elements,"{""if_gamification"": ""add-progress-animation"", ""if_children"": ""increase-playfulness""}",Dark modes + Complex jargon,MEDIUM
+10,Creative Agency,Storytelling-Driven,Brutalism + Motion-Driven,Bold primaries + Artistic freedom,Bold + Expressive typography,CRT scanlines + Neon glow + Glitch effects,"{""must_have"": ""case-studies"", ""if_boutique"": ""increase-artistic-freedom""}",Corporate minimalism + Hidden portfolio,HIGH
+11,Portfolio/Personal,Storytelling-Driven,Motion-Driven + Minimalism,Brand primary + Artistic,Expressive + Variable typography,Parallax (3-5 layers) + Scroll-triggered reveals,"{""if_creative_field"": ""add-brutalism"", ""if_minimal_portfolio"": ""reduce-motion""}",Corporate templates + Generic layouts,MEDIUM
+12,Gaming,Feature-Rich Showcase,3D & Hyperrealism + Retro-Futurism,Vibrant + Neon + Immersive,Bold + Impactful typography,WebGL 3D rendering + Glitch effects,"{""if_competitive"": ""add-real-time-stats"", ""if_casual"": ""increase-playfulness""}",Minimalist design + Static assets,HIGH
+13,Government/Public Service,Minimal & Direct,Accessible & Ethical + Minimalism,Professional blue + High contrast,Clear + Large typography,Clear focus rings (3-4px) + Skip links,"{""must_have"": ""wcag-aaa"", ""must_have"": ""keyboard-navigation""}",Ornate design + Low contrast + Motion effects + AI purple/pink gradients,HIGH
+14,Fintech/Crypto,Trust & Authority,Minimalism + Accessible & Ethical,Navy + Trust Blue + Gold,Professional + Trustworthy,Smooth state transitions + Number animations,"{""must_have"": ""security-first"", ""if_dashboard"": ""use-dark-mode""}",Playful design + Unclear fees + AI purple/pink gradients,HIGH
+15,Social Media App,Feature-Rich Showcase,Vibrant & Block-based + Motion-Driven,Vibrant + Engagement colors,Modern + Bold typography,Large scroll animations + Icon animations,"{""if_engagement_metric"": ""add-motion"", ""if_content_focused"": ""minimize-chrome""}",Heavy skeuomorphism + Accessibility ignored,MEDIUM
+16,Productivity Tool,Interactive Demo + Feature-Rich,Flat Design + Micro-interactions,Clear hierarchy + Functional colors,Clean + Efficient typography,Quick actions (150ms) + Task animations,"{""must_have"": ""keyboard-shortcuts"", ""if_collaboration"": ""add-real-time-cursors""}",Complex onboarding + Slow performance,HIGH
+17,Design System/Component Library,Feature-Rich + Documentation,Minimalism + Accessible & Ethical,Clear hierarchy + Code-like structure,Monospace + Clear typography,Code copy animations + Component previews,"{""must_have"": ""search"", ""must_have"": ""code-examples""}",Poor documentation + No live preview,HIGH
+18,AI/Chatbot Platform,Interactive Demo + Minimal,AI-Native UI + Minimalism,Neutral + AI Purple (#6366F1),Modern + Clear typography,Streaming text + Typing indicators + Fade-in,"{""must_have"": ""conversational-ui"", ""must_have"": ""context-awareness""}",Heavy chrome + Slow response feedback,HIGH
+19,NFT/Web3 Platform,Feature-Rich Showcase,Cyberpunk UI + Glassmorphism,Dark + Neon + Gold (#FFD700),Bold + Modern typography,Wallet connect animations + Transaction feedback,"{""must_have"": ""wallet-integration"", ""must_have"": ""gas-fees-display""}",Light mode default + No transaction status,HIGH
+20,Creator Economy Platform,Social Proof + Feature-Rich,Vibrant & Block-based + Bento Box Grid,Vibrant + Brand colors,Modern + Bold typography,Engagement counter animations + Profile reveals,"{""must_have"": ""creator-profiles"", ""must_have"": ""monetization-display""}",Generic layout + Hidden earnings,MEDIUM
+21,Remote Work/Collaboration Tool,Feature-Rich + Real-Time,Soft UI Evolution + Minimalism,Calm Blue + Neutral grey,Clean + Readable typography,Real-time presence indicators + Notification badges,"{""must_have"": ""status-indicators"", ""must_have"": ""video-integration""}",Cluttered interface + No presence,HIGH
+22,Mental Health App,Social Proof-Focused,Neumorphism + Accessible & Ethical,Calm Pastels + Trust colors,Calming + Readable typography,Soft press + Breathing animations,"{""must_have"": ""privacy-first"", ""if_meditation"": ""add-breathing-animation""}",Bright neon + Motion overload,HIGH
+23,Pet Tech App,Storytelling + Feature-Rich,Claymorphism + Vibrant & Block-based,Playful + Warm colors,Friendly + Playful typography,Pet profile animations + Health tracking charts,"{""must_have"": ""pet-profiles"", ""if_health"": ""add-vet-integration""}",Generic design + No personality,MEDIUM
+24,Smart Home/IoT Dashboard,Real-Time Monitoring,Glassmorphism + Dark Mode (OLED),Dark + Status indicator colors,Clear + Functional typography,Device status pulse + Quick action animations,"{""must_have"": ""real-time-controls"", ""must_have"": ""energy-monitoring""}",Slow updates + No automation,HIGH
+25,EV/Charging Ecosystem,Hero-Centric + Feature-Rich,Minimalism + Aurora UI,Electric Blue (#009CD1) + Green,Modern + Clear typography,Range estimation animations + Map interactions,"{""must_have"": ""charging-map"", ""must_have"": ""range-calculator""}",Poor map UX + Hidden costs,HIGH
+26,Subscription Box Service,Feature-Rich + Conversion,Vibrant & Block-based + Motion-Driven,Brand + Excitement colors,Engaging + Clear typography,Unboxing reveal animations + Product carousel,"{""must_have"": ""personalization-quiz"", ""must_have"": ""subscription-management""}",Confusing pricing + No unboxing preview,HIGH
+27,Podcast Platform,Storytelling + Feature-Rich,Dark Mode (OLED) + Minimalism,Dark + Audio waveform accents,Modern + Clear typography,Waveform visualizations + Episode transitions,"{""must_have"": ""audio-player-ux"", ""must_have"": ""episode-discovery""}",Poor audio player + Cluttered layout,HIGH
+28,Dating App,Social Proof + Feature-Rich,Vibrant & Block-based + Motion-Driven,Warm + Romantic (Pink/Red gradients),Modern + Friendly typography,Profile card swipe + Match animations,"{""must_have"": ""profile-cards"", ""must_have"": ""safety-features""}",Generic profiles + No safety,HIGH
+29,Micro-Credentials/Badges Platform,Trust & Authority + Feature,Minimalism + Flat Design,Trust Blue + Gold (#FFD700),Professional + Clear typography,Badge reveal animations + Progress tracking,"{""must_have"": ""credential-verification"", ""must_have"": ""progress-display""}",No verification + Hidden progress,MEDIUM
+30,Knowledge Base/Documentation,FAQ + Minimal,Minimalism + Accessible & Ethical,Clean hierarchy + Minimal color,Clear + Readable typography,Search highlight + Smooth scrolling,"{""must_have"": ""search-first"", ""must_have"": ""version-switching""}",Poor navigation + No search,HIGH
+31,Hyperlocal Services,Conversion + Feature-Rich,Minimalism + Vibrant & Block-based,Location markers + Trust colors,Clear + Functional typography,Map hover + Provider card reveals,"{""must_have"": ""map-integration"", ""must_have"": ""booking-system""}",No map + Hidden reviews,HIGH
+32,Beauty/Spa/Wellness Service,Hero-Centric + Social Proof,Soft UI Evolution + Neumorphism,Soft pastels (Pink Sage Cream) + Gold accents,Elegant + Calming typography,Soft shadows + Smooth transitions (200-300ms) + Gentle hover,"{""must_have"": ""booking-system"", ""must_have"": ""before-after-gallery"", ""if_luxury"": ""add-gold-accents""}",Bright neon colors + Harsh animations + Dark mode,HIGH
+33,Luxury/Premium Brand,Storytelling + Feature-Rich,Liquid Glass + Glassmorphism,Black + Gold (#FFD700) + White,Elegant + Refined typography,Slow parallax + Premium reveals (400-600ms),"{""must_have"": ""high-quality-imagery"", ""must_have"": ""storytelling""}",Cheap visuals + Fast animations,HIGH
+34,Restaurant/Food Service,Hero-Centric + Conversion,Vibrant & Block-based + Motion-Driven,Warm colors (Orange Red Brown),Appetizing + Clear typography,Food image reveal + Menu hover effects,"{""must_have"": ""high_quality_images"", ""if_delivery"": ""emphasize-speed""}",Low-quality imagery + Outdated hours,HIGH
+35,Fitness/Gym App,Feature-Rich + Data,Vibrant & Block-based + Dark Mode (OLED),Energetic (Orange #FF6B35) + Dark bg,Bold + Motivational typography,Progress ring animations + Achievement unlocks,"{""must_have"": ""progress-tracking"", ""must_have"": ""workout-plans""}",Static design + No gamification,HIGH
+36,Real Estate/Property,Hero-Centric + Feature-Rich,Glassmorphism + Minimalism,Trust Blue + Gold + White,Professional + Confident,3D property tour zoom + Map hover,"{""if_luxury"": ""add-3d-models"", ""must_have"": ""map-integration""}",Poor photos + No virtual tours,HIGH
+37,Travel/Tourism Agency,Storytelling-Driven + Hero,Aurora UI + Motion-Driven,Vibrant destination + Sky Blue,Inspirational + Engaging,Destination parallax + Itinerary animations,"{""if_experience_focused"": ""use-storytelling"", ""must_have"": ""mobile-booking""}",Generic photos + Complex booking,HIGH
+38,Hotel/Hospitality,Hero-Centric + Social Proof,Liquid Glass + Minimalism,Warm neutrals + Gold (#D4AF37),Elegant + Welcoming typography,Room gallery + Amenity reveals,"{""must_have"": ""room-booking"", ""must_have"": ""virtual-tour""}",Poor photos + Complex booking,HIGH
+39,Wedding/Event Planning,Storytelling + Social Proof,Soft UI Evolution + Aurora UI,Soft Pink (#FFD6E0) + Gold + Cream,Elegant + Romantic typography,Gallery reveals + Timeline animations,"{""must_have"": ""portfolio-gallery"", ""must_have"": ""planning-tools""}",Generic templates + No portfolio,HIGH
+40,Legal Services,Trust & Authority + Minimal,Trust & Authority + Minimalism,Navy Blue (#1E3A5F) + Gold + White,Professional + Authoritative typography,Practice area reveal + Attorney profile animations,"{""must_have"": ""case-results"", ""must_have"": ""credential-display""}",Outdated design + Hidden credentials + AI purple/pink gradients,HIGH
+41,Insurance Platform,Conversion + Trust,Trust & Authority + Flat Design,Trust Blue (#0066CC) + Green + Neutral,Clear + Professional typography,Quote calculator animations + Policy comparison,"{""must_have"": ""quote-calculator"", ""must_have"": ""policy-comparison""}",Confusing pricing + No trust signals + AI purple/pink gradients,HIGH
+42,Banking/Traditional Finance,Trust & Authority + Feature,Minimalism + Accessible & Ethical,Navy (#0A1628) + Trust Blue + Gold,Professional + Trustworthy typography,Smooth number animations + Security indicators,"{""must_have"": ""security-first"", ""must_have"": ""accessibility""}",Playful design + Poor security UX + AI purple/pink gradients,HIGH
+43,Online Course/E-learning,Feature-Rich + Social Proof,Claymorphism + Vibrant & Block-based,Vibrant learning colors + Progress green,Friendly + Engaging typography,Progress bar animations + Certificate reveals,"{""must_have"": ""progress-tracking"", ""must_have"": ""video-player""}",Boring design + No gamification,HIGH
+44,Non-profit/Charity,Storytelling + Trust,Accessible & Ethical + Organic Biophilic,Cause-related colors + Trust + Warm,Heartfelt + Readable typography,Impact counter animations + Story reveals,"{""must_have"": ""impact-stories"", ""must_have"": ""donation-transparency""}",No impact data + Hidden financials,HIGH
+45,Music Streaming,Feature-Rich Showcase,Dark Mode (OLED) + Vibrant & Block-based,Dark (#121212) + Vibrant accents + Album art colors,Modern + Bold typography,Waveform visualization + Playlist animations,"{""must_have"": ""audio-player-ux"", ""if_discovery_focused"": ""add-playlist-recommendations""}",Cluttered layout + Poor audio player UX,HIGH
+46,Video Streaming/OTT,Hero-Centric + Feature-Rich,Dark Mode (OLED) + Motion-Driven,Dark bg + Poster colors + Brand accent,Bold + Engaging typography,Video player animations + Content carousel (parallax),"{""must_have"": ""continue-watching"", ""if_personalized"": ""add-recommendations""}",Static layout + Slow video player,HIGH
+47,Job Board/Recruitment,Conversion-Optimized + Feature-Rich,Flat Design + Minimalism,Professional Blue + Success Green + Neutral,Clear + Professional typography,Search/filter animations + Application flow,"{""must_have"": ""advanced-search"", ""if_salary_focused"": ""highlight-compensation""}",Outdated forms + Hidden filters,HIGH
+48,Marketplace (P2P),Feature-Rich Showcase + Social Proof,Vibrant & Block-based + Flat Design,Trust colors + Category colors + Success green,Modern + Engaging typography,Review star animations + Listing hover effects,"{""must_have"": ""seller-profiles"", ""must_have"": ""secure-payment""}",Low trust signals + Confusing layout,HIGH
+49,Logistics/Delivery,Feature-Rich Showcase + Real-Time,Minimalism + Flat Design,Blue (#2563EB) + Orange (tracking) + Green,Clear + Functional typography,Real-time tracking animation + Status pulse,"{""must_have"": ""tracking-map"", ""must_have"": ""delivery-updates""}",Static tracking + No map integration + AI purple/pink gradients,HIGH
+50,Agriculture/Farm Tech,Feature-Rich Showcase,Organic Biophilic + Flat Design,Earth Green (#4A7C23) + Brown + Sky Blue,Clear + Informative typography,Data visualization + Weather animations,"{""must_have"": ""sensor-dashboard"", ""if_crop_focused"": ""add-health-indicators""}",Generic design + Ignored accessibility + AI purple/pink gradients,MEDIUM
+51,Construction/Architecture,Hero-Centric + Feature-Rich,Minimalism + 3D & Hyperrealism,Grey (#4A4A4A) + Orange (safety) + Blueprint Blue,Professional + Bold typography,3D model viewer + Timeline animations,"{""must_have"": ""project-portfolio"", ""if_team_collaboration"": ""add-real-time-updates""}",2D-only layouts + Poor image quality + AI purple/pink gradients,HIGH
+52,Automotive/Car Dealership,Hero-Centric + Feature-Rich,Motion-Driven + 3D & Hyperrealism,Brand colors + Metallic + Dark/Light,Bold + Confident typography,360 product view + Configurator animations,"{""must_have"": ""vehicle-comparison"", ""must_have"": ""financing-calculator""}",Static product pages + Poor UX,HIGH
+53,Photography Studio,Storytelling-Driven + Hero-Centric,Motion-Driven + Minimalism,Black + White + Minimal accent,Elegant + Minimal typography,Full-bleed gallery + Before/after reveal,"{""must_have"": ""portfolio-showcase"", ""if_booking"": ""add-calendar-system""}",Heavy text + Poor image showcase,HIGH
+54,Coworking Space,Hero-Centric + Feature-Rich,Vibrant & Block-based + Glassmorphism,Energetic colors + Wood tones + Brand,Modern + Engaging typography,Space tour video + Amenity reveal animations,"{""must_have"": ""virtual-tour"", ""must_have"": ""booking-system""}",Outdated photos + Confusing layout,MEDIUM
+55,Home Services (Plumber/Electrician),Conversion-Optimized + Trust,Flat Design + Trust & Authority,Trust Blue + Safety Orange + Grey,Professional + Clear typography,Emergency contact highlight + Service menu animations,"{""must_have"": ""emergency-contact"", ""must_have"": ""certifications-display""}",Hidden contact info + No certifications,HIGH
+56,Childcare/Daycare,Social Proof-Focused + Trust,Claymorphism + Vibrant & Block-based,Playful pastels + Safe colors + Warm,Friendly + Playful typography,Parent portal animations + Activity gallery reveal,"{""must_have"": ""parent-communication"", ""must_have"": ""safety-certifications""}",Generic design + Hidden safety info,HIGH
+57,Senior Care/Elderly,Trust & Authority + Accessible,Accessible & Ethical + Soft UI Evolution,Calm Blue + Warm neutrals + Large text,Large + Clear typography (18px+),Large touch targets + Clear navigation,"{""must_have"": ""wcag-aaa"", ""must_have"": ""family-portal""}",Small text + Complex navigation + AI purple/pink gradients,HIGH
+58,Medical Clinic,Trust & Authority + Conversion,Accessible & Ethical + Minimalism,Medical Blue (#0077B6) + Trust White,Professional + Readable typography,Online booking flow + Doctor profile reveals,"{""must_have"": ""appointment-booking"", ""must_have"": ""insurance-info""}",Outdated interface + Confusing booking + AI purple/pink gradients,HIGH
+59,Pharmacy/Drug Store,Conversion-Optimized + Trust,Flat Design + Accessible & Ethical,Pharmacy Green + Trust Blue + Clean White,Clear + Functional typography,Prescription upload flow + Refill reminders,"{""must_have"": ""prescription-management"", ""must_have"": ""drug-interaction-warnings""}",Confusing layout + Privacy concerns + AI purple/pink gradients,HIGH
+60,Dental Practice,Social Proof-Focused + Conversion,Soft UI Evolution + Minimalism,Fresh Blue + White + Smile Yellow,Friendly + Professional typography,Before/after gallery + Patient testimonial carousel,"{""must_have"": ""before-after-gallery"", ""must_have"": ""appointment-system""}",Poor imagery + No testimonials,HIGH
+61,Veterinary Clinic,Social Proof-Focused + Trust,Claymorphism + Accessible & Ethical,Caring Blue + Pet colors + Warm,Friendly + Welcoming typography,Pet profile management + Service animations,"{""must_have"": ""pet-portal"", ""must_have"": ""emergency-contact""}",Generic design + Hidden services,MEDIUM
+62,Florist/Plant Shop,Hero-Centric + Conversion,Organic Biophilic + Vibrant & Block-based,Natural Green + Floral pinks/purples,Elegant + Natural typography,Product reveal + Seasonal transitions,"{""must_have"": ""delivery-scheduling"", ""must_have"": ""care-guides""}",Poor imagery + No seasonal content,MEDIUM
+63,Bakery/Cafe,Hero-Centric + Conversion,Vibrant & Block-based + Soft UI Evolution,Warm Brown + Cream + Appetizing accents,Warm + Inviting typography,Menu hover + Order animations,"{""must_have"": ""menu-display"", ""must_have"": ""online-ordering""}",Poor food photos + Hidden hours,HIGH
+64,Brewery/Winery,Storytelling + Hero-Centric,Motion-Driven + Storytelling-Driven,Deep amber/burgundy + Gold + Craft,Artisanal + Heritage typography,Tasting note reveals + Heritage timeline,"{""must_have"": ""product-showcase"", ""must_have"": ""story-heritage""}",Generic product pages + No story,HIGH
+65,Airline,Conversion + Feature-Rich,Minimalism + Glassmorphism,Sky Blue + Brand colors + Trust,Clear + Professional typography,Flight search animations + Boarding pass reveals,"{""must_have"": ""flight-search"", ""must_have"": ""mobile-first""}",Complex booking + Poor mobile,HIGH
+66,News/Media Platform,Hero-Centric + Feature-Rich,Minimalism + Flat Design,Brand colors + High contrast,Clear + Readable typography,Breaking news badge + Article reveal animations,"{""must_have"": ""mobile-first-reading"", ""must_have"": ""category-navigation""}",Cluttered layout + Slow loading,HIGH
+67,Magazine/Blog,Storytelling + Hero-Centric,Swiss Modernism 2.0 + Motion-Driven,Editorial colors + Brand + Clean white,Editorial + Elegant typography,Article transitions + Category reveals,"{""must_have"": ""article-showcase"", ""must_have"": ""newsletter-signup""}",Poor typography + Slow loading,HIGH
+68,Freelancer Platform,Feature-Rich + Conversion,Flat Design + Minimalism,Professional Blue + Success Green,Clear + Professional typography,Skill match animations + Review reveals,"{""must_have"": ""portfolio-display"", ""must_have"": ""skill-matching""}",Poor profiles + No reviews,HIGH
+69,Marketing Agency,Storytelling + Feature-Rich,Brutalism + Motion-Driven,Bold brand colors + Creative freedom,Bold + Expressive typography,Portfolio reveals + Results animations,"{""must_have"": ""portfolio"", ""must_have"": ""results-metrics""}",Boring design + Hidden work,HIGH
+70,Event Management,Hero-Centric + Feature-Rich,Vibrant & Block-based + Motion-Driven,Event theme colors + Excitement accents,Bold + Engaging typography,Countdown timer + Registration flow,"{""must_have"": ""registration"", ""must_have"": ""agenda-display""}",Confusing registration + No countdown,HIGH
+71,Membership/Community,Social Proof + Conversion,Vibrant & Block-based + Soft UI Evolution,Community brand colors + Engagement,Friendly + Engaging typography,Member counter + Benefit reveals,"{""must_have"": ""member-benefits"", ""must_have"": ""pricing-tiers""}",Hidden benefits + No community proof,HIGH
+72,Newsletter Platform,Minimal + Conversion,Minimalism + Flat Design,Brand primary + Clean white + CTA,Clean + Readable typography,Subscribe form + Archive reveals,"{""must_have"": ""subscribe-form"", ""must_have"": ""sample-content""}",Complex signup + No preview,MEDIUM
+73,Digital Products/Downloads,Feature-Rich + Conversion,Vibrant & Block-based + Motion-Driven,Product colors + Brand + Success green,Modern + Clear typography,Product preview + Instant delivery animations,"{""must_have"": ""product-preview"", ""must_have"": ""instant-delivery""}",No preview + Slow delivery,HIGH
+74,Church/Religious Organization,Hero-Centric + Social Proof,Accessible & Ethical + Soft UI Evolution,Warm Gold + Deep Purple/Blue + White,Welcoming + Clear typography,Service time highlights + Event calendar,"{""must_have"": ""service-times"", ""must_have"": ""community-events""}",Outdated design + Hidden info,MEDIUM
+75,Sports Team/Club,Hero-Centric + Feature-Rich,Vibrant & Block-based + Motion-Driven,Team colors + Energetic accents,Bold + Impactful typography,Score animations + Schedule reveals,"{""must_have"": ""schedule"", ""must_have"": ""roster""}",Static content + Poor fan engagement,HIGH
+76,Museum/Gallery,Storytelling + Feature-Rich,Minimalism + Motion-Driven,Art-appropriate neutrals + Exhibition accents,Elegant + Minimal typography,Virtual tour + Collection reveals,"{""must_have"": ""virtual-tour"", ""must_have"": ""exhibition-info""}",Cluttered layout + No online access,HIGH
+77,Theater/Cinema,Hero-Centric + Conversion,Dark Mode (OLED) + Motion-Driven,Dark + Spotlight accents + Gold,Dramatic + Bold typography,Seat selection + Trailer reveals,"{""must_have"": ""showtimes"", ""must_have"": ""seat-selection""}",Poor booking UX + No trailers,HIGH
+78,Language Learning App,Feature-Rich + Social Proof,Claymorphism + Vibrant & Block-based,Playful colors + Progress indicators,Friendly + Clear typography,Progress animations + Achievement unlocks,"{""must_have"": ""progress-tracking"", ""must_have"": ""gamification""}",Boring design + No motivation,HIGH
+79,Coding Bootcamp,Feature-Rich + Social Proof,Dark Mode (OLED) + Minimalism,Code editor colors + Brand + Success,Technical + Clear typography,Terminal animations + Career outcome reveals,"{""must_have"": ""curriculum"", ""must_have"": ""career-outcomes""}",Light mode only + Hidden results,HIGH
+80,Cybersecurity Platform,Trust & Authority + Real-Time,Cyberpunk UI + Dark Mode (OLED),Matrix Green (#00FF00) + Deep Black,Technical + Clear typography,Threat visualization + Alert animations,"{""must_have"": ""real-time-monitoring"", ""must_have"": ""threat-display""}",Light mode + Poor data viz,HIGH
+81,Developer Tool / IDE,Minimal + Documentation,Dark Mode (OLED) + Minimalism,Dark syntax theme + Blue focus,Monospace + Functional typography,Syntax highlighting + Command palette,"{""must_have"": ""keyboard-shortcuts"", ""must_have"": ""documentation""}",Light mode default + Slow performance,HIGH
+82,Biotech / Life Sciences,Storytelling + Data,Glassmorphism + Clean Science,Sterile White + DNA Blue + Life Green,Scientific + Clear typography,Data visualization + Research reveals,"{""must_have"": ""data-accuracy"", ""must_have"": ""clean-aesthetic""}",Cluttered data + Poor credibility,HIGH
+83,Space Tech / Aerospace,Immersive + Feature-Rich,Holographic/HUD + Dark Mode,Deep Space Black + Star White + Metallic,Futuristic + Precise typography,Telemetry animations + 3D renders,"{""must_have"": ""high-tech-feel"", ""must_have"": ""precision-data""}",Generic design + No immersion,HIGH
+84,Architecture / Interior,Portfolio + Hero-Centric,Exaggerated Minimalism + High Imagery,Monochrome + Gold Accent + High Imagery,Architectural + Elegant typography,Project gallery + Blueprint reveals,"{""must_have"": ""high-res-images"", ""must_have"": ""project-portfolio""}",Poor imagery + Cluttered layout,HIGH
+85,Quantum Computing Interface,Immersive + Interactive,Holographic/HUD + Dark Mode,Quantum Blue (#00FFFF) + Deep Black,Futuristic + Scientific typography,Probability visualizations + Qubit state animations,"{""must_have"": ""complexity-visualization"", ""must_have"": ""scientific-credibility""}",Generic tech design + No viz,HIGH
+86,Biohacking / Longevity App,Data-Dense + Storytelling,Biomimetic/Organic 2.0 + Minimalism,Cellular Pink/Red + DNA Blue + White,Scientific + Clear typography,Biological data viz + Progress animations,"{""must_have"": ""data-privacy"", ""must_have"": ""scientific-credibility""}",Generic health app + No privacy,HIGH
+87,Autonomous Drone Fleet Manager,Real-Time + Feature-Rich,HUD/Sci-Fi FUI + Real-Time,Tactical Green + Alert Red + Map Dark,Technical + Functional typography,Telemetry animations + 3D spatial awareness,"{""must_have"": ""real-time-telemetry"", ""must_have"": ""safety-alerts""}",Slow updates + Poor spatial viz,HIGH
+88,Generative Art Platform,Showcase + Feature-Rich,Minimalism + Gen Z Chaos,Neutral (#F5F5F5) + User Content,Minimal + Content-focused typography,Gallery masonry + Minting animations,"{""must_have"": ""fast-loading"", ""must_have"": ""creator-attribution""}",Heavy chrome + Slow loading,HIGH
+89,Spatial Computing OS / App,Immersive + Interactive,Spatial UI (VisionOS) + Glassmorphism,Frosted Glass + System Colors + Depth,Spatial + Readable typography,Depth hierarchy + Gaze interactions,"{""must_have"": ""depth-hierarchy"", ""must_have"": ""environment-awareness""}",2D design + No spatial depth,HIGH
+90,Sustainable Energy / Climate Tech,Data + Trust,Organic Biophilic + E-Ink/Paper,Earth Green + Sky Blue + Solar Yellow,Clear + Informative typography,Impact viz + Progress animations,"{""must_have"": ""data-transparency"", ""must_have"": ""impact-visualization""}",Greenwashing + No real data,HIGH
+91,Personal Finance Tracker,Interactive Product Demo,Glassmorphism + Dark Mode (OLED),Calm blue + success green + alert red + chart accents,Modern + Clear hierarchy,Backdrop blur (10-20px) + Translucent overlays,"{""if_light_mode_needed"": ""provide-theme-toggle"", ""if_low_performance"": ""fallback-to-flat""}",Pure white backgrounds,HIGH
+92,Chat & Messaging App,Feature-Rich Showcase + Demo,Minimalism + Micro-interactions,Brand primary + bubble contrast (sender/receiver) + typing grey,Professional + Clean hierarchy,Subtle hover 200ms + Smooth transitions + Clean,"{""if_ux_focused"": ""prioritize-clarity"", ""if_mobile"": ""optimize-touch-targets""}",Excessive decoration,HIGH
+93,Notes & Writing App,Minimal & Direct,Minimalism + Flat Design,Clean white/cream + minimal accent + editor syntax colors,Professional + Clean hierarchy,Color shift hover + Fast 150ms transitions + No shadows,"{""if_ux_focused"": ""prioritize-clarity"", ""if_mobile"": ""optimize-touch-targets""}",Excessive decoration + Complex shadows + 3D effects,HIGH
+94,Habit Tracker,Social Proof-Focused + Demo,Claymorphism + Vibrant & Block-based,Streak warm (amber/orange) + progress green + motivational accents,Playful + Rounded + Friendly,Multi-layer shadows + Spring bounce + Soft press 200ms,"{""if_trust_needed"": ""add-testimonials""}",Muted colors + Low energy,HIGH
+95,Food Delivery / On-Demand,Hero-Centric Design + Feature-Rich,Vibrant & Block-based + Motion-Driven,Appetizing warm (orange/red) + trust blue + map accent,Energetic + Bold + Large,Scroll animations + Parallax + Page transitions,"{""if_ux_focused"": ""prioritize-clarity"", ""if_mobile"": ""optimize-touch-targets""}",Muted colors + Low energy,HIGH
+96,Ride Hailing / Transportation,Conversion-Optimized + Demo,Minimalism + Glassmorphism,Brand primary + map neutral + status indicator colors,Professional + Clean hierarchy,Backdrop blur (10-20px) + Translucent overlays,"{""if_low_performance"": ""fallback-to-flat"", ""if_conversion_focused"": ""add-urgency-colors""}",Excessive decoration,HIGH
+97,Recipe & Cooking App,Hero-Centric Design + Feature-Rich,Claymorphism + Vibrant & Block-based,Warm food tones (terracotta/sage/cream) + appetizing imagery,Playful + Rounded + Friendly,Multi-layer shadows + Spring bounce + Soft press 200ms,"{""if_ux_focused"": ""prioritize-clarity"", ""if_mobile"": ""optimize-touch-targets""}",Muted colors + Low energy,HIGH
+98,Meditation & Mindfulness,Storytelling-Driven + Social Proof,Neumorphism + Soft UI Evolution,Ultra-calm pastels (lavender/sage/sky) + breathing animation gradient,Subtle + Soft + Monochromatic,Dual shadows (light+dark) + Soft press 150ms,"{""if_trust_needed"": ""add-testimonials""}",Inconsistent styling + Poor contrast ratios,HIGH
+99,Weather App,Hero-Centric Design,Glassmorphism + Aurora UI,Atmospheric gradients (sky blue → sunset → storm grey) + temp scale,Modern + Clear hierarchy,Backdrop blur (10-20px) + Translucent overlays,"{""if_low_performance"": ""fallback-to-flat""}",Inconsistent styling + Poor contrast ratios,HIGH
+100,Diary & Journal App,Storytelling-Driven,Soft UI Evolution + Minimalism,Warm paper tones (cream/linen) + muted ink + mood-coded accents,Professional + Clean hierarchy,Subtle hover 200ms + Smooth transitions + Clean,"{""if_ux_focused"": ""prioritize-clarity"", ""if_mobile"": ""optimize-touch-targets""}",Excessive decoration,HIGH
+101,CRM & Client Management,Feature-Rich Showcase + Demo,Flat Design + Minimalism,Professional blue + pipeline stage colors + closed-won green,Professional + Clean hierarchy,Color shift hover + Fast 150ms transitions + No shadows,"{""if_ux_focused"": ""prioritize-clarity"", ""if_mobile"": ""optimize-touch-targets""}",Excessive decoration + Complex shadows + 3D effects,HIGH
+102,Inventory & Stock Management,Feature-Rich Showcase,Flat Design + Minimalism,Functional neutral + status traffic-light (green/amber/red) + scanner accent,Professional + Clean hierarchy,Color shift hover + Fast 150ms transitions + No shadows,"{""if_ux_focused"": ""prioritize-clarity"", ""if_mobile"": ""optimize-touch-targets""}",Excessive decoration + Complex shadows + 3D effects,HIGH
+103,Flashcard & Study Tool,Feature-Rich Showcase + Demo,Claymorphism + Micro-interactions,Playful primary + correct green + incorrect red + progress blue,Playful + Rounded + Friendly,Multi-layer shadows + Spring bounce + Soft press 200ms,"{""if_ux_focused"": ""prioritize-clarity"", ""if_mobile"": ""optimize-touch-targets""}",Inconsistent styling + Poor contrast ratios,HIGH
+104,Booking & Appointment App,Conversion-Optimized,Soft UI Evolution + Flat Design,Trust blue + available green + booked grey + confirm accent,Bold + Clean + Sans-serif,Color shift hover + Fast 150ms transitions + No shadows,"{""if_conversion_focused"": ""add-urgency-colors""}",Complex shadows + 3D effects,HIGH
+105,Invoice & Billing Tool,Conversion-Optimized + Trust,Minimalism + Flat Design,Professional navy + paid green + overdue red + neutral grey,Professional + Clean hierarchy,Color shift hover + Fast 150ms transitions + No shadows,"{""if_conversion_focused"": ""add-urgency-colors""}",Excessive decoration + Complex shadows + 3D effects,HIGH
+106,Grocery & Shopping List,Minimal & Direct + Demo,Flat Design + Vibrant & Block-based,Fresh green + food-category colors + checkmark accent,Bold + Clean + Sans-serif,Color shift hover + Fast 150ms transitions + No shadows,"{""if_ux_focused"": ""prioritize-clarity"", ""if_mobile"": ""optimize-touch-targets""}",Complex shadows + 3D effects + Muted colors + Low energy,HIGH
+107,Timer & Pomodoro,Minimal & Direct,Minimalism + Neumorphism,High-contrast on dark + focus red/amber + break green,Professional + Clean hierarchy,Dual shadows (light+dark) + Soft press 150ms,"{""if_ux_focused"": ""prioritize-clarity"", ""if_mobile"": ""optimize-touch-targets""}",Excessive decoration,HIGH
+108,Parenting & Baby Tracker,Social Proof-Focused + Trust,Claymorphism + Soft UI Evolution,Soft pastels (baby pink/sky blue/mint/peach) + warm accents,Playful + Rounded + Friendly,Multi-layer shadows + Spring bounce + Soft press 200ms,"{""if_trust_needed"": ""add-testimonials""}",Inconsistent styling + Poor contrast ratios,HIGH
+109,Scanner & Document Manager,Feature-Rich Showcase + Demo,Minimalism + Flat Design,Clean white + camera viewfinder accent + file-type color coding,Professional + Clean hierarchy,Color shift hover + Fast 150ms transitions + No shadows,"{""if_ux_focused"": ""prioritize-clarity"", ""if_mobile"": ""optimize-touch-targets""}",Excessive decoration + Complex shadows + 3D effects,HIGH
+110,Calendar & Scheduling App,Feature-Rich Showcase + Demo,Flat Design + Micro-interactions,Clean blue + event category accent colors + success green,Bold + Clean + Sans-serif,Color shift hover + Fast 150ms transitions + No shadows,"{""if_ux_focused"": ""prioritize-clarity"", ""if_mobile"": ""optimize-touch-targets""}",Complex shadows + 3D effects,HIGH
+111,Password Manager,Trust & Authority + Feature-Rich,Minimalism + Accessible & Ethical,Trust blue + security green + dark neutral,Professional + Clean hierarchy,Subtle hover 200ms + Smooth transitions + Clean,"{""if_ux_focused"": ""prioritize-clarity"", ""if_mobile"": ""optimize-touch-targets""}",Excessive decoration + Color-only indicators,HIGH
+112,Expense Splitter / Bill Split,Minimal & Direct + Demo,Flat Design + Vibrant & Block-based,Success green + alert red + neutral grey + avatar accent colors,Bold + Clean + Sans-serif,Color shift hover + Fast 150ms transitions + No shadows,"{""if_ux_focused"": ""prioritize-clarity"", ""if_mobile"": ""optimize-touch-targets""}",Complex shadows + 3D effects + Muted colors + Low energy,HIGH
+113,Voice Recorder & Memo,Interactive Product Demo + Minimal,Minimalism + AI-Native UI,Clean white + recording red + waveform accent,Professional + Clean hierarchy,Subtle hover 200ms + Smooth transitions + Clean,"{""if_ux_focused"": ""prioritize-clarity"", ""if_mobile"": ""optimize-touch-targets""}",Excessive decoration,HIGH
+114,Bookmark & Read-Later,Minimal & Direct + Demo,Minimalism + Flat Design,Paper warm white + ink neutral + minimal accent + tag colors,Professional + Clean hierarchy,Color shift hover + Fast 150ms transitions + No shadows,"{""if_ux_focused"": ""prioritize-clarity"", ""if_mobile"": ""optimize-touch-targets""}",Excessive decoration + Complex shadows + 3D effects,HIGH
+115,Translator App,Feature-Rich Showcase + Interactive Demo,Flat Design + AI-Native UI,Global blue + neutral grey + language flag accent,Bold + Clean + Sans-serif,Color shift hover + Fast 150ms transitions + No shadows,"{""if_ux_focused"": ""prioritize-clarity"", ""if_mobile"": ""optimize-touch-targets""}",Complex shadows + 3D effects,HIGH
+116,Calculator & Unit Converter,Minimal & Direct,Neumorphism + Minimalism,Dark functional + orange operation keys + clear button hierarchy,Professional + Clean hierarchy,Dual shadows (light+dark) + Soft press 150ms,"{""if_ux_focused"": ""prioritize-clarity"", ""if_mobile"": ""optimize-touch-targets""}",Excessive decoration,HIGH
+117,Alarm & World Clock,Minimal & Direct,Dark Mode (OLED) + Minimalism,Deep dark + ambient glow accent + timezone gradient,Professional + Clean hierarchy,Subtle glow + Neon accents + High contrast,"{""if_light_mode_needed"": ""provide-theme-toggle""}",Excessive decoration + Pure white backgrounds,HIGH
+118,File Manager & Transfer,Feature-Rich Showcase + Demo,Flat Design + Minimalism,"Functional neutral + file type color coding (PDF orange, doc blue, image purple)",Professional + Clean hierarchy,Color shift hover + Fast 150ms transitions + No shadows,"{""if_ux_focused"": ""prioritize-clarity"", ""if_mobile"": ""optimize-touch-targets""}",Excessive decoration + Complex shadows + 3D effects,HIGH
+119,Email Client,Feature-Rich Showcase + Demo,Flat Design + Minimalism,Clean white + brand primary + priority red + snooze amber,Professional + Clean hierarchy,Color shift hover + Fast 150ms transitions + No shadows,"{""if_ux_focused"": ""prioritize-clarity"", ""if_mobile"": ""optimize-touch-targets""}",Excessive decoration + Complex shadows + 3D effects,HIGH
+120,Casual Puzzle Game,Feature-Rich Showcase + Social Proof,Claymorphism + Vibrant & Block-based,Cheerful pastels + progression gradient + reward gold + bright accent,Playful + Rounded + Friendly,Multi-layer shadows + Spring bounce + Soft press 200ms,"{""if_trust_needed"": ""add-testimonials""}",Muted colors + Low energy,HIGH
+121,Trivia & Quiz Game,Feature-Rich Showcase + Social Proof,Vibrant & Block-based + Micro-interactions,Energetic blue + correct green + incorrect red + leaderboard gold,Energetic + Bold + Large,Haptic feedback + Small 50-100ms animations,"{""if_trust_needed"": ""add-testimonials""}",Muted colors + Low energy,HIGH
+122,Card & Board Game,Feature-Rich Showcase,3D & Hyperrealism + Flat Design,Game-theme felt green + dark wood + card back patterns,Bold + Clean + Sans-serif,Color shift hover + Fast 150ms transitions + No shadows,"{""if_ux_focused"": ""prioritize-clarity"", ""if_mobile"": ""optimize-touch-targets""}",Complex shadows + 3D effects,HIGH
+123,Idle & Clicker Game,Feature-Rich Showcase,Vibrant & Block-based + Motion-Driven,Coin gold + upgrade blue + prestige purple + progress green,Energetic + Bold + Large,Scroll animations + Parallax + Page transitions,"{""if_ux_focused"": ""prioritize-clarity"", ""if_mobile"": ""optimize-touch-targets""}",Muted colors + Low energy,HIGH
+124,Word & Crossword Game,Minimal & Direct + Demo,Minimalism + Flat Design,Clean white + warm letter tiles + success green + shake red,Professional + Clean hierarchy,Color shift hover + Fast 150ms transitions + No shadows,"{""if_ux_focused"": ""prioritize-clarity"", ""if_mobile"": ""optimize-touch-targets""}",Excessive decoration + Complex shadows + 3D effects,HIGH
+125,Arcade & Retro Game,Feature-Rich Showcase + Hero-Centric,Pixel Art + Retro-Futurism,Neon on black + pixel palette + score gold + danger red,Nostalgic + Monospace + Neon,Subtle hover (200ms) + Smooth transitions,"{""if_ux_focused"": ""prioritize-clarity"", ""if_mobile"": ""optimize-touch-targets""}",Inconsistent styling + Poor contrast ratios,HIGH
+126,Photo Editor & Filters,Feature-Rich Showcase + Interactive Demo,Minimalism + Dark Mode (OLED),Dark editor background + vibrant filter preview strip + tool icon accent,Professional + Clean hierarchy,Subtle glow + Neon accents + High contrast,"{""if_light_mode_needed"": ""provide-theme-toggle""}",Excessive decoration + Pure white backgrounds,HIGH
+127,Short Video Editor,Feature-Rich Showcase + Hero-Centric,Dark Mode (OLED) + Motion-Driven,Dark background + timeline track accent colors + effect preview vivid,High contrast + Light on dark,Subtle glow + Neon accents + High contrast,"{""if_light_mode_needed"": ""provide-theme-toggle""}",Pure white backgrounds,HIGH
+128,Drawing & Sketching Canvas,Interactive Product Demo + Storytelling,Minimalism + Dark Mode (OLED),Neutral canvas + full-spectrum color picker + tool panel dark,Professional + Clean hierarchy,Subtle glow + Neon accents + High contrast,"{""if_light_mode_needed"": ""provide-theme-toggle""}",Excessive decoration + Pure white backgrounds,HIGH
+129,Music Creation & Beat Maker,Interactive Product Demo + Storytelling,Dark Mode (OLED) + Motion-Driven,Dark studio background + track colors rainbow + waveform accent + BPM pulse,High contrast + Light on dark,Subtle glow + Neon accents + High contrast,"{""if_light_mode_needed"": ""provide-theme-toggle""}",Pure white backgrounds,HIGH
+130,Meme & Sticker Maker,Feature-Rich Showcase + Social Proof,Vibrant & Block-based + Flat Design,Bold primary + comedic yellow + viral red + high saturation accent,Bold + Clean + Sans-serif,Color shift hover + Fast 150ms transitions + No shadows,"{""if_trust_needed"": ""add-testimonials""}",Complex shadows + 3D effects + Muted colors + Low energy,HIGH
+131,AI Photo & Avatar Generator,Feature-Rich Showcase + Social Proof,AI-Native UI + Aurora UI,AI purple + aurora gradients + before/after neutral,Elegant + Gradient-friendly,Flowing gradients 8-12s + Color morphing,"{""if_trust_needed"": ""add-testimonials""}",Inconsistent styling + Poor contrast ratios,HIGH
+132,Link-in-Bio Page Builder,Conversion-Optimized + Social Proof,Vibrant & Block-based + Bento Box Grid,Brand-customizable + accent link color + clean white canvas,Energetic + Bold + Large,Large section gaps 48px+ + Color shift hover + Scroll-snap,"{""if_conversion_focused"": ""add-urgency-colors"", ""if_trust_needed"": ""add-testimonials""}",Muted colors + Low energy,HIGH
+133,Wardrobe & Outfit Planner,Storytelling-Driven + Feature-Rich,Minimalism + Motion-Driven,Clean fashion neutral + full clothes color palette + accent,Professional + Clean hierarchy,Subtle hover 200ms + Smooth transitions + Clean,"{""if_ux_focused"": ""prioritize-clarity"", ""if_mobile"": ""optimize-touch-targets""}",Excessive decoration,HIGH
+134,Plant Care Tracker,Storytelling-Driven + Social Proof,Organic Biophilic + Soft UI Evolution,Nature greens + earth brown + sunny yellow reminder + water blue,Warm + Humanist + Natural,Rounded 16-24px + Natural shadows + Flowing SVG,"{""if_trust_needed"": ""add-testimonials""}",Inconsistent styling + Poor contrast ratios,HIGH
+135,Book & Reading Tracker,Social Proof-Focused + Feature-Rich,Swiss Modernism 2.0 + Minimalism,Warm paper white + ink brown + reading progress green + book cover colors,Professional + Clean hierarchy,Subtle hover 200ms + Smooth transitions + Clean,"{""if_trust_needed"": ""add-testimonials""}",Excessive decoration,HIGH
+136,Couple & Relationship App,Storytelling-Driven + Social Proof,Aurora UI + Soft UI Evolution,Warm romantic pink/rose + soft gradient + memory photo tones,Elegant + Gradient-friendly,Flowing gradients 8-12s + Color morphing,"{""if_trust_needed"": ""add-testimonials""}",Inconsistent styling + Poor contrast ratios,HIGH
+137,Family Calendar & Chores,Feature-Rich Showcase + Social Proof,Flat Design + Claymorphism,Warm playful + member color coding + chore completion green,Playful + Rounded + Friendly,Multi-layer shadows + Spring bounce + Soft press 200ms,"{""if_trust_needed"": ""add-testimonials""}",Complex shadows + 3D effects,HIGH
+138,Mood Tracker,Storytelling-Driven + Social Proof,Soft UI Evolution + Minimalism,Emotion gradient (blue sad to yellow happy) + pastel per mood + insight accent,Professional + Clean hierarchy,Subtle hover 200ms + Smooth transitions + Clean,"{""if_trust_needed"": ""add-testimonials""}",Excessive decoration,HIGH
+139,Gift & Wishlist,Minimal & Direct + Conversion,Vibrant & Block-based + Soft UI Evolution,Celebration warm pink/gold/red + category colors + surprise accent,Energetic + Bold + Large,Large section gaps 48px+ + Color shift hover + Scroll-snap,"{""if_conversion_focused"": ""add-urgency-colors""}",Muted colors + Low energy,HIGH
+140,Running & Cycling GPS,Feature-Rich Showcase + Social Proof,Dark Mode (OLED) + Vibrant & Block-based,Energetic orange + map accent + pace zones (green/yellow/red),High contrast + Light on dark,Subtle glow + Neon accents + High contrast,"{""if_light_mode_needed"": ""provide-theme-toggle"", ""if_trust_needed"": ""add-testimonials""}",Pure white backgrounds + Muted colors + Low energy,HIGH
+141,Yoga & Stretching Guide,Storytelling-Driven + Social Proof,Organic Biophilic + Soft UI Evolution,Earth calming sage/terracotta/cream + breathing gradient + warm accent,Warm + Humanist + Natural,Rounded 16-24px + Natural shadows + Flowing SVG,"{""if_trust_needed"": ""add-testimonials""}",Inconsistent styling + Poor contrast ratios,HIGH
+142,Sleep Tracker,Feature-Rich Showcase + Social Proof,Dark Mode (OLED) + Neumorphism,Deep midnight blue + stars/moon accent + sleep quality gradient (poor red to great green),High contrast + Light on dark,Dual shadows (light+dark) + Soft press 150ms,"{""if_light_mode_needed"": ""provide-theme-toggle"", ""if_trust_needed"": ""add-testimonials""}",Pure white backgrounds,HIGH
+143,Calorie & Nutrition Counter,Feature-Rich Showcase + Social Proof,Flat Design + Vibrant & Block-based,"Healthy green + macro colors (protein blue, carb orange, fat yellow) + progress circle",Bold + Clean + Sans-serif,Color shift hover + Fast 150ms transitions + No shadows,"{""if_trust_needed"": ""add-testimonials""}",Complex shadows + 3D effects + Muted colors + Low energy,HIGH
+144,Period & Cycle Tracker,Social Proof-Focused + Trust,Soft UI Evolution + Aurora UI,Rose/blush + lavender + fertility green + soft calendar tones,Elegant + Gradient-friendly,Flowing gradients 8-12s + Color morphing,"{""if_trust_needed"": ""add-testimonials""}",Inconsistent styling + Poor contrast ratios,HIGH
+145,Medication & Pill Reminder,Trust & Authority + Feature-Rich,Accessible & Ethical + Flat Design,Medical trust blue + missed alert red + taken green + clean white,Bold + Clean + Sans-serif,Color shift hover + Fast 150ms transitions + No shadows,"{""if_ux_focused"": ""prioritize-clarity"", ""if_mobile"": ""optimize-touch-targets""}",Complex shadows + 3D effects + Color-only indicators,HIGH
+146,Water & Hydration Reminder,Minimal & Direct + Demo,Claymorphism + Vibrant & Block-based,Refreshing blue + water wave animation + goal progress accent,Playful + Rounded + Friendly,Multi-layer shadows + Spring bounce + Soft press 200ms,"{""if_ux_focused"": ""prioritize-clarity"", ""if_mobile"": ""optimize-touch-targets""}",Muted colors + Low energy,HIGH
+147,Fasting & Intermittent Timer,Feature-Rich Showcase + Social Proof,Minimalism + Dark Mode (OLED),Fasting deep blue/purple + eating window green + timeline neutral,Professional + Clean hierarchy,Subtle glow + Neon accents + High contrast,"{""if_light_mode_needed"": ""provide-theme-toggle"", ""if_trust_needed"": ""add-testimonials""}",Excessive decoration + Pure white backgrounds,HIGH
+148,Anonymous Community / Confession,Social Proof-Focused + Feature-Rich,Dark Mode (OLED) + Minimalism,Dark protective + subtle gradient + upvote green + empathy warm accent,Professional + Clean hierarchy,Subtle glow + Neon accents + High contrast,"{""if_light_mode_needed"": ""provide-theme-toggle"", ""if_trust_needed"": ""add-testimonials""}",Excessive decoration + Pure white backgrounds,HIGH
+149,Local Events & Discovery,Hero-Centric Design + Feature-Rich,Vibrant & Block-based + Motion-Driven,City vibrant + event category colors + map accent + date highlight,Energetic + Bold + Large,Scroll animations + Parallax + Page transitions,"{""if_ux_focused"": ""prioritize-clarity"", ""if_mobile"": ""optimize-touch-targets""}",Muted colors + Low energy,HIGH
+150,Study Together / Virtual Coworking,Social Proof-Focused + Feature-Rich,Minimalism + Soft UI Evolution,Calm focus blue + session progress indicator + ambient warm neutrals,Professional + Clean hierarchy,Subtle hover 200ms + Smooth transitions + Clean,"{""if_trust_needed"": ""add-testimonials""}",Excessive decoration,HIGH
+151,Coding Challenge & Practice,Feature-Rich Showcase + Social Proof,Dark Mode (OLED) + Cyberpunk UI,Code editor dark + success green + difficulty gradient (easy green / medium amber / hard red),High contrast + Light on dark,Subtle glow + Neon accents + High contrast,"{""if_light_mode_needed"": ""provide-theme-toggle"", ""if_trust_needed"": ""add-testimonials""}",Pure white backgrounds,HIGH
+152,Kids Learning (ABC & Math),Social Proof-Focused + Trust,Claymorphism + Vibrant & Block-based,Bright primary + child-safe pastels + reward gold + interactive accent,Playful + Rounded + Friendly,Multi-layer shadows + Spring bounce + Soft press 200ms,"{""if_trust_needed"": ""add-testimonials""}",Muted colors + Low energy,HIGH
+153,Music Instrument Learning,Interactive Product Demo + Social Proof,Vibrant & Block-based + Motion-Driven,Musical warm deep red/brown + note color system + skill progress bar,Energetic + Bold + Large,Scroll animations + Parallax + Page transitions,"{""if_trust_needed"": ""add-testimonials""}",Muted colors + Low energy,HIGH
+154,Parking Finder,Conversion-Optimized + Feature-Rich,Minimalism + Glassmorphism,Trust blue + available green + occupied red + map neutral,Professional + Clean hierarchy,Backdrop blur (10-20px) + Translucent overlays,"{""if_low_performance"": ""fallback-to-flat"", ""if_conversion_focused"": ""add-urgency-colors""}",Excessive decoration,HIGH
+155,Public Transit Guide,Feature-Rich Showcase + Interactive Demo,Flat Design + Accessible & Ethical,Transit brand line colors + real-time indicator green/red + map neutral,Bold + Clean + Sans-serif,Color shift hover + Fast 150ms transitions + No shadows,"{""if_ux_focused"": ""prioritize-clarity"", ""if_mobile"": ""optimize-touch-targets""}",Complex shadows + 3D effects + Color-only indicators,HIGH
+156,Road Trip Planner,Storytelling-Driven + Hero-Centric,Aurora UI + Organic Biophilic,Adventure warm sunset orange + map teal + stop markers + road neutral,Elegant + Gradient-friendly,Flowing gradients 8-12s + Color morphing,"{""if_ux_focused"": ""prioritize-clarity"", ""if_mobile"": ""optimize-touch-targets""}",Inconsistent styling + Poor contrast ratios,HIGH
+157,VPN & Privacy Tool,Trust & Authority + Conversion-Optimized,Minimalism + Dark Mode (OLED),Dark shield blue + connected green + disconnected red + trust accent,Professional + Clean hierarchy,Subtle glow + Neon accents + High contrast,"{""if_light_mode_needed"": ""provide-theme-toggle"", ""if_conversion_focused"": ""add-urgency-colors""}",Excessive decoration + Pure white backgrounds,HIGH
+158,Emergency SOS & Safety,Trust & Authority + Social Proof,Accessible & Ethical + Flat Design,Alert red + safety blue + location green + high contrast critical,Bold + Clean + Sans-serif,Color shift hover + Fast 150ms transitions + No shadows,"{""if_trust_needed"": ""add-testimonials""}",Complex shadows + 3D effects + Color-only indicators,HIGH
+159,Wallpaper & Theme App,Feature-Rich Showcase + Social Proof,Vibrant & Block-based + Aurora UI,Content-driven + trending aesthetic palettes + download accent,Energetic + Bold + Large,Large section gaps 48px+ + Color shift hover + Scroll-snap,"{""if_trust_needed"": ""add-testimonials""}",Muted colors + Low energy,HIGH
+160,White Noise & Ambient Sound,Minimal & Direct + Social Proof,Minimalism + Dark Mode (OLED),Calming dark + ambient texture visual + subtle sound wave + sleep blue,Professional + Clean hierarchy,Subtle glow + Neon accents + High contrast,"{""if_light_mode_needed"": ""provide-theme-toggle"", ""if_trust_needed"": ""add-testimonials""}",Excessive decoration + Pure white backgrounds,HIGH
+161,Home Decoration & Interior Design,Storytelling-Driven + Feature-Rich,Minimalism + 3D Product Preview,Neutral interior palette + material texture accent + AR blue,Professional + Clean hierarchy,Subtle hover 200ms + Smooth transitions + Clean,"{""if_ux_focused"": ""prioritize-clarity"", ""if_mobile"": ""optimize-touch-targets""}",Excessive decoration,HIGH
diff --git a/.claude/skills/ui-ux-pro-max/data/ux-guidelines.csv b/.claude/skills/ui-ux-pro-max/data/ux-guidelines.csv
new file mode 100644
index 000000000..e347aeda7
--- /dev/null
+++ b/.claude/skills/ui-ux-pro-max/data/ux-guidelines.csv
@@ -0,0 +1,100 @@
+No,Category,Issue,Platform,Description,Do,Don't,Code Example Good,Code Example Bad,Severity
+1,Navigation,Smooth Scroll,Web,Anchor links should scroll smoothly to target section,Use scroll-behavior: smooth on html element,Jump directly without transition,html { scroll-behavior: smooth; },<a href='#section'> without CSS,High
+2,Navigation,Sticky Navigation,Web,Fixed nav should not obscure content,Add padding-top to body equal to nav height,Let nav overlap first section content,pt-20 (if nav is h-20),No padding compensation,Medium
+3,Navigation,Active State,All,Current page/section should be visually indicated,Highlight active nav item with color/underline,No visual feedback on current location,text-primary border-b-2,All links same style,Medium
+4,Navigation,Back Button,Mobile,Users expect back to work predictably,Preserve navigation history properly,Break browser/app back button behavior,history.pushState(),location.replace(),High
+5,Navigation,Deep Linking,All,URLs should reflect current state for sharing,Update URL on state/view changes,Static URLs for dynamic content,Use query params or hash,Single URL for all states,Medium
+6,Navigation,Breadcrumbs,Web,Show user location in site hierarchy,Use for sites with 3+ levels of depth,Use for flat single-level sites,Home > Category > Product,Only on deep nested pages,Low
+7,Animation,Excessive Motion,All,Too many animations cause distraction and motion sickness,Animate 1-2 key elements per view maximum,Animate everything that moves,Single hero animation,animate-bounce on 5+ elements,High
+8,Animation,Duration Timing,All,Animations should feel responsive not sluggish,Use 150-300ms for micro-interactions,Use animations longer than 500ms for UI,transition-all duration-200,duration-1000,Medium
+9,Animation,Reduced Motion,All,Respect user's motion preferences,Check prefers-reduced-motion media query,Ignore accessibility motion settings,@media (prefers-reduced-motion: reduce),No motion query check,High
+10,Animation,Loading States,All,Show feedback during async operations,Use skeleton screens or spinners,Leave UI frozen with no feedback,animate-pulse skeleton,Blank screen while loading,High
+11,Animation,Hover vs Tap,All,Hover effects don't work on touch devices,Use click/tap for primary interactions,Rely only on hover for important actions,onClick handler,onMouseEnter only,High
+12,Animation,Continuous Animation,All,Infinite animations are distracting,Use for loading indicators only,Use for decorative elements,animate-spin on loader,animate-bounce on icons,Medium
+13,Animation,Transform Performance,Web,Some CSS properties trigger expensive repaints,Use transform and opacity for animations,Animate width/height/top/left properties,transform: translateY(),top: 10px animation,Medium
+14,Animation,Easing Functions,All,Linear motion feels robotic,Use ease-out for entering ease-in for exiting,Use linear for UI transitions,ease-out,linear,Low
+15,Layout,Z-Index Management,Web,Stacking context conflicts cause hidden elements,Define z-index scale system (10 20 30 50),Use arbitrary large z-index values,z-10 z-20 z-50,z-[9999],High
+16,Layout,Overflow Hidden,Web,Hidden overflow can clip important content,Test all content fits within containers,Blindly apply overflow-hidden,overflow-auto with scroll,overflow-hidden truncating content,Medium
+17,Layout,Fixed Positioning,Web,Fixed elements can overlap or be inaccessible,Account for safe areas and other fixed elements,Stack multiple fixed elements carelessly,Fixed nav + fixed bottom with gap,Multiple overlapping fixed elements,Medium
+18,Layout,Stacking Context,Web,New stacking contexts reset z-index,Understand what creates new stacking context,Expect z-index to work across contexts,Parent with z-index isolates children,z-index: 9999 not working,Medium
+19,Layout,Content Jumping,Web,Layout shift when content loads is jarring,Reserve space for async content,Let images/content push layout around,aspect-ratio or fixed height,No dimensions on images,High
+20,Layout,Viewport Units,Web,100vh can be problematic on mobile browsers,Use dvh or account for mobile browser chrome,Use 100vh for full-screen mobile layouts,min-h-dvh or min-h-screen,h-screen on mobile,Medium
+21,Layout,Container Width,Web,Content too wide is hard to read,Limit max-width for text content (65-75ch),Let text span full viewport width,max-w-prose or max-w-3xl,Full width paragraphs,Medium
+22,Touch,Touch Target Size,Mobile,Small buttons are hard to tap accurately,Minimum 44x44px touch targets,Tiny clickable areas,min-h-[44px] min-w-[44px],w-6 h-6 buttons,High
+23,Touch,Touch Spacing,Mobile,Adjacent touch targets need adequate spacing,Minimum 8px gap between touch targets,Tightly packed clickable elements,gap-2 between buttons,gap-0 or gap-1,Medium
+24,Touch,Gesture Conflicts,Mobile,Custom gestures can conflict with system,Avoid horizontal swipe on main content,Override system gestures,Vertical scroll primary,Horizontal swipe carousel only,Medium
+25,Touch,Tap Delay,Mobile,300ms tap delay feels laggy,Use touch-action CSS or fastclick,Default mobile tap handling,touch-action: manipulation,No touch optimization,Medium
+26,Touch,Pull to Refresh,Mobile,Accidental refresh is frustrating,Disable where not needed,Enable by default everywhere,overscroll-behavior: contain,Default overscroll,Low
+27,Touch,Haptic Feedback,Mobile,Tactile feedback improves interaction feel,Use for confirmations and important actions,Overuse vibration feedback,navigator.vibrate(10),Vibrate on every tap,Low
+28,Interaction,Focus States,All,Keyboard users need visible focus indicators,Use visible focus rings on interactive elements,Remove focus outline without replacement,focus:ring-2 focus:ring-blue-500,outline-none without alternative,High
+29,Interaction,Hover States,Web,Visual feedback on interactive elements,Change cursor and add subtle visual change,No hover feedback on clickable elements,hover:bg-gray-100 cursor-pointer,No hover style,Medium
+30,Interaction,Active States,All,Show immediate feedback on press/click,Add pressed/active state visual change,No feedback during interaction,active:scale-95,No active state,Medium
+31,Interaction,Disabled States,All,Clearly indicate non-interactive elements,Reduce opacity and change cursor,Confuse disabled with normal state,opacity-50 cursor-not-allowed,Same style as enabled,Medium
+32,Interaction,Loading Buttons,All,Prevent double submission during async actions,Disable button and show loading state,Allow multiple clicks during processing,disabled={loading} spinner,Button clickable while loading,High
+33,Interaction,Error Feedback,All,Users need to know when something fails,Show clear error messages near problem,Silent failures with no feedback,Red border + error message,No indication of error,High
+34,Interaction,Success Feedback,All,Confirm successful actions to users,Show success message or visual change,No confirmation of completed action,Toast notification or checkmark,Action completes silently,Medium
+35,Interaction,Confirmation Dialogs,All,Prevent accidental destructive actions,Confirm before delete/irreversible actions,Delete without confirmation,Are you sure modal,Direct delete on click,High
+36,Accessibility,Color Contrast,All,Text must be readable against background,Minimum 4.5:1 ratio for normal text,Low contrast text,#333 on white (7:1),#999 on white (2.8:1),High
+37,Accessibility,Color Only,All,Don't convey information by color alone,Use icons/text in addition to color,Red/green only for error/success,Red text + error icon,Red border only for error,High
+38,Accessibility,Alt Text,All,Images need text alternatives,Descriptive alt text for meaningful images,Empty or missing alt attributes,alt='Dog playing in park',alt='' for content images,High
+39,Accessibility,Heading Hierarchy,Web,Screen readers use headings for navigation,Use sequential heading levels h1-h6,Skip heading levels or misuse for styling,h1 then h2 then h3,h1 then h4,Medium
+40,Accessibility,ARIA Labels,All,Interactive elements need accessible names,Add aria-label for icon-only buttons,Icon buttons without labels,aria-label='Close menu',<button><Icon/></button>,High
+41,Accessibility,Keyboard Navigation,Web,All functionality accessible via keyboard,Tab order matches visual order,Keyboard traps or illogical tab order,tabIndex for custom order,Unreachable elements,High
+42,Accessibility,Screen Reader,All,Content should make sense when read aloud,Use semantic HTML and ARIA properly,Div soup with no semantics,<nav> <main> <article>,<div> for everything,Medium
+43,Accessibility,Form Labels,All,Inputs must have associated labels,Use label with for attribute or wrap input,Placeholder-only inputs,<label for='email'>,placeholder='Email' only,High
+44,Accessibility,Error Messages,All,Error messages must be announced,Use aria-live or role=alert for errors,Visual-only error indication,role='alert',Red border only,High
+45,Accessibility,Skip Links,Web,Allow keyboard users to skip navigation,Provide skip to main content link,No skip link on nav-heavy pages,Skip to main content link,100 tabs to reach content,Medium
+46,Performance,Image Optimization,All,Large images slow page load,Use appropriate size and format (WebP),Unoptimized full-size images,srcset with multiple sizes,4000px image for 400px display,High
+47,Performance,Lazy Loading,All,Load content as needed,Lazy load below-fold images and content,Load everything upfront,loading='lazy',All images eager load,Medium
+48,Performance,Code Splitting,Web,Large bundles slow initial load,Split code by route/feature,Single large bundle,dynamic import(),All code in main bundle,Medium
+49,Performance,Caching,Web,Repeat visits should be fast,Set appropriate cache headers,No caching strategy,Cache-Control headers,Every request hits server,Medium
+50,Performance,Font Loading,Web,Web fonts can block rendering,Use font-display swap or optional,Invisible text during font load,font-display: swap,FOIT (Flash of Invisible Text),Medium
+51,Performance,Third Party Scripts,Web,External scripts can block rendering,Load non-critical scripts async/defer,Synchronous third-party scripts,async or defer attribute,<script src='...'> in head,Medium
+52,Performance,Bundle Size,Web,Large JavaScript slows interaction,Monitor and minimize bundle size,Ignore bundle size growth,Bundle analyzer,No size monitoring,Medium
+53,Performance,Render Blocking,Web,CSS/JS can block first paint,Inline critical CSS defer non-critical,Large blocking CSS files,Critical CSS inline,All CSS in head,Medium
+54,Forms,Input Labels,All,Every input needs a visible label,Always show label above or beside input,Placeholder as only label,<label>Email</label><input>,placeholder='Email' only,High
+55,Forms,Error Placement,All,Errors should appear near the problem,Show error below related input,Single error message at top of form,Error under each field,All errors at form top,Medium
+56,Forms,Inline Validation,All,Validate as user types or on blur,Validate on blur for most fields,Validate only on submit,onBlur validation,Submit-only validation,Medium
+57,Forms,Input Types,All,Use appropriate input types,Use email tel number url etc,Text input for everything,type='email',type='text' for email,Medium
+58,Forms,Autofill Support,Web,Help browsers autofill correctly,Use autocomplete attribute properly,Block or ignore autofill,autocomplete='email',autocomplete='off' everywhere,Medium
+59,Forms,Required Indicators,All,Mark required fields clearly,Use asterisk or (required) text,No indication of required fields,* required indicator,Guess which are required,Medium
+60,Forms,Password Visibility,All,Let users see password while typing,Toggle to show/hide password,No visibility toggle,Show/hide password button,Password always hidden,Medium
+61,Forms,Submit Feedback,All,Confirm form submission status,Show loading then success/error state,No feedback after submit,Loading -> Success message,Button click with no response,High
+62,Forms,Input Affordance,All,Inputs should look interactive,Use distinct input styling,Inputs that look like plain text,Border/background on inputs,Borderless inputs,Medium
+63,Forms,Mobile Keyboards,Mobile,Show appropriate keyboard for input type,Use inputmode attribute,Default keyboard for all inputs,inputmode='numeric',Text keyboard for numbers,Medium
+64,Responsive,Mobile First,Web,Design for mobile then enhance for larger,Start with mobile styles then add breakpoints,Desktop-first causing mobile issues,Default mobile + md: lg: xl:,Desktop default + max-width queries,Medium
+65,Responsive,Breakpoint Testing,Web,Test at all common screen sizes,Test at 320 375 414 768 1024 1440,Only test on your device,Multiple device testing,Single device development,Medium
+66,Responsive,Touch Friendly,Web,Mobile layouts need touch-sized targets,Increase touch targets on mobile,Same tiny buttons on mobile,Larger buttons on mobile,Desktop-sized targets on mobile,High
+67,Responsive,Readable Font Size,All,Text must be readable on all devices,Minimum 16px body text on mobile,Tiny text on mobile,text-base or larger,text-xs for body text,High
+68,Responsive,Viewport Meta,Web,Set viewport for mobile devices,Use width=device-width initial-scale=1,Missing or incorrect viewport,<meta name='viewport'...>,No viewport meta tag,High
+69,Responsive,Horizontal Scroll,Web,Avoid horizontal scrolling,Ensure content fits viewport width,Content wider than viewport,max-w-full overflow-x-hidden,Horizontal scrollbar on mobile,High
+70,Responsive,Image Scaling,Web,Images should scale with container,Use max-width: 100% on images,Fixed width images overflow,max-w-full h-auto,width='800' fixed,Medium
+71,Responsive,Table Handling,Web,Tables can overflow on mobile,Use horizontal scroll or card layout,Wide tables breaking layout,overflow-x-auto wrapper,Table overflows viewport,Medium
+72,Typography,Line Height,All,Adequate line height improves readability,Use 1.5-1.75 for body text,Cramped or excessive line height,leading-relaxed (1.625),leading-none (1),Medium
+73,Typography,Line Length,Web,Long lines are hard to read,Limit to 65-75 characters per line,Full-width text on large screens,max-w-prose,Full viewport width text,Medium
+74,Typography,Font Size Scale,All,Consistent type hierarchy aids scanning,Use consistent modular scale,Random font sizes,Type scale (12 14 16 18 24 32),Arbitrary sizes,Medium
+75,Typography,Font Loading,Web,Fonts should load without layout shift,Reserve space with fallback font,Layout shift when fonts load,font-display: swap + similar fallback,No fallback font,Medium
+76,Typography,Contrast Readability,All,Body text needs good contrast,Use darker text on light backgrounds,Gray text on gray background,text-gray-900 on white,text-gray-400 on gray-100,High
+77,Typography,Heading Clarity,All,Headings should stand out from body,Clear size/weight difference,Headings similar to body text,Bold + larger size,Same size as body,Medium
+78,Feedback,Loading Indicators,All,Show system status during waits,Show spinner/skeleton for operations > 300ms,No feedback during loading,Skeleton or spinner,Frozen UI,High
+79,Feedback,Empty States,All,Guide users when no content exists,Show helpful message and action,Blank empty screens,No items yet. Create one!,Empty white space,Medium
+80,Feedback,Error Recovery,All,Help users recover from errors,Provide clear next steps,Error without recovery path,Try again button + help link,Error message only,Medium
+81,Feedback,Progress Indicators,All,Show progress for multi-step processes,Step indicators or progress bar,No indication of progress,Step 2 of 4 indicator,No step information,Medium
+82,Feedback,Toast Notifications,All,Transient messages for non-critical info,Auto-dismiss after 3-5 seconds,Toasts that never disappear,Auto-dismiss toast,Persistent toast,Medium
+83,Feedback,Confirmation Messages,All,Confirm successful actions,Brief success message,Silent success,Saved successfully toast,No confirmation,Medium
+84,Content,Truncation,All,Handle long content gracefully,Truncate with ellipsis and expand option,Overflow or broken layout,line-clamp-2 with expand,Overflow or cut off,Medium
+85,Content,Date Formatting,All,Use locale-appropriate date formats,Use relative or locale-aware dates,Ambiguous date formats,2 hours ago or locale format,01/02/03,Low
+86,Content,Number Formatting,All,Format large numbers for readability,Use thousand separators or abbreviations,Long unformatted numbers,"1.2K or 1,234",1234567,Low
+87,Content,Placeholder Content,All,Show realistic placeholders during dev,Use realistic sample data,Lorem ipsum everywhere,Real sample content,Lorem ipsum,Low
+88,Onboarding,User Freedom,All,Users should be able to skip tutorials,Provide Skip and Back buttons,Force linear unskippable tour,Skip Tutorial button,Locked overlay until finished,Medium
+89,Search,Autocomplete,Web,Help users find results faster,Show predictions as user types,Require full type and enter,Debounced fetch + dropdown,No suggestions,Medium
+90,Search,No Results,Web,Dead ends frustrate users,Show 'No results' with suggestions,Blank screen or '0 results',Try searching for X instead,No results found.,Medium
+91,Data Entry,Bulk Actions,Web,Editing one by one is tedious,Allow multi-select and bulk edit,Single row actions only,Checkbox column + Action bar,Repeated actions per row,Low
+92,AI Interaction,Disclaimer,All,Users need to know they talk to AI,Clearly label AI generated content,Present AI as human,AI Assistant label,Fake human name without label,High
+93,AI Interaction,Streaming,All,Waiting for full text is slow,Stream text response token by token,Show loading spinner for 10s+,Typewriter effect,Spinner until 100% complete,Medium
+94,Spatial UI,Gaze Hover,VisionOS,Elements should respond to eye tracking before pinch,Scale/highlight element on look,Static element until pinch,hoverEffect(),onTap only,High
+95,Spatial UI,Depth Layering,VisionOS,UI needs Z-depth to separate content from environment,Use glass material and z-offset,Flat opaque panels blocking view,.glassBackgroundEffect(),bg-white,Medium
+96,Sustainability,Auto-Play Video,Web,Video consumes massive data and energy,Click-to-play or pause when off-screen,Auto-play high-res video loops,playsInline muted preload='none',autoplay loop,Medium
+97,Sustainability,Asset Weight,Web,Heavy 3D/Image assets increase carbon footprint,Compress and lazy load 3D models,Load 50MB textures,Draco compression,Raw .obj files,Medium
+98,AI Interaction,Feedback Loop,All,AI needs user feedback to improve,Thumps up/down or 'Regenerate',Static output only,Feedback component,Read-only text,Low
+99,Accessibility,Motion Sensitivity,All,Parallax/Scroll-jacking causes nausea,Respect prefers-reduced-motion,Force scroll effects,@media (prefers-reduced-motion),ScrollTrigger.create(),High
\ No newline at end of file
diff --git a/.claude/skills/ui-ux-pro-max/scripts/core.py b/.claude/skills/ui-ux-pro-max/scripts/core.py
new file mode 100755
index 000000000..8d0206548
--- /dev/null
+++ b/.claude/skills/ui-ux-pro-max/scripts/core.py
@@ -0,0 +1,262 @@
+#!/usr/bin/env python3
+# -*- coding: utf-8 -*-
+"""
+UI/UX Pro Max Core - BM25 search engine for UI/UX style guides
+"""
+
+import csv
+import re
+from pathlib import Path
+from math import log
+from collections import defaultdict
+
+# ============ CONFIGURATION ============
+DATA_DIR = Path(__file__).parent.parent / "data"
+MAX_RESULTS = 3
+
+CSV_CONFIG = {
+    "style": {
+        "file": "styles.csv",
+        "search_cols": ["Style Category", "Keywords", "Best For", "Type", "AI Prompt Keywords"],
+        "output_cols": ["Style Category", "Type", "Keywords", "Primary Colors", "Effects & Animation", "Best For", "Light Mode ✓", "Dark Mode ✓", "Performance", "Accessibility", "Framework Compatibility", "Complexity", "AI Prompt Keywords", "CSS/Technical Keywords", "Implementation Checklist", "Design System Variables"]
+    },
+    "color": {
+        "file": "colors.csv",
+        "search_cols": ["Product Type", "Notes"],
+        "output_cols": ["Product Type", "Primary", "On Primary", "Secondary", "On Secondary", "Accent", "On Accent", "Background", "Foreground", "Card", "Card Foreground", "Muted", "Muted Foreground", "Border", "Destructive", "On Destructive", "Ring", "Notes"]
+    },
+    "chart": {
+        "file": "charts.csv",
+        "search_cols": ["Data Type", "Keywords", "Best Chart Type", "When to Use", "When NOT to Use", "Accessibility Notes"],
+        "output_cols": ["Data Type", "Keywords", "Best Chart Type", "Secondary Options", "When to Use", "When NOT to Use", "Data Volume Threshold", "Color Guidance", "Accessibility Grade", "Accessibility Notes", "A11y Fallback", "Library Recommendation", "Interactive Level"]
+    },
+    "landing": {
+        "file": "landing.csv",
+        "search_cols": ["Pattern Name", "Keywords", "Conversion Optimization", "Section Order"],
+        "output_cols": ["Pattern Name", "Keywords", "Section Order", "Primary CTA Placement", "Color Strategy", "Conversion Optimization"]
+    },
+    "product": {
+        "file": "products.csv",
+        "search_cols": ["Product Type", "Keywords", "Primary Style Recommendation", "Key Considerations"],
+        "output_cols": ["Product Type", "Keywords", "Primary Style Recommendation", "Secondary Styles", "Landing Page Pattern", "Dashboard Style (if applicable)", "Color Palette Focus"]
+    },
+    "ux": {
+        "file": "ux-guidelines.csv",
+        "search_cols": ["Category", "Issue", "Description", "Platform"],
+        "output_cols": ["Category", "Issue", "Platform", "Description", "Do", "Don't", "Code Example Good", "Code Example Bad", "Severity"]
+    },
+    "typography": {
+        "file": "typography.csv",
+        "search_cols": ["Font Pairing Name", "Category", "Mood/Style Keywords", "Best For", "Heading Font", "Body Font"],
+        "output_cols": ["Font Pairing Name", "Category", "Heading Font", "Body Font", "Mood/Style Keywords", "Best For", "Google Fonts URL", "CSS Import", "Tailwind Config", "Notes"]
+    },
+    "icons": {
+        "file": "icons.csv",
+        "search_cols": ["Category", "Icon Name", "Keywords", "Best For"],
+        "output_cols": ["Category", "Icon Name", "Keywords", "Library", "Import Code", "Usage", "Best For", "Style"]
+    },
+    "react": {
+        "file": "react-performance.csv",
+        "search_cols": ["Category", "Issue", "Keywords", "Description"],
+        "output_cols": ["Category", "Issue", "Platform", "Description", "Do", "Don't", "Code Example Good", "Code Example Bad", "Severity"]
+    },
+    "web": {
+        "file": "app-interface.csv",
+        "search_cols": ["Category", "Issue", "Keywords", "Description"],
+        "output_cols": ["Category", "Issue", "Platform", "Description", "Do", "Don't", "Code Example Good", "Code Example Bad", "Severity"]
+    },
+    "google-fonts": {
+        "file": "google-fonts.csv",
+        "search_cols": ["Family", "Category", "Stroke", "Classifications", "Keywords", "Subsets", "Designers"],
+        "output_cols": ["Family", "Category", "Stroke", "Classifications", "Styles", "Variable Axes", "Subsets", "Designers", "Popularity Rank", "Google Fonts URL"]
+    }
+}
+
+STACK_CONFIG = {
+    "react":            {"file": "stacks/react.csv"},
+    "nextjs":           {"file": "stacks/nextjs.csv"},
+    "vue":              {"file": "stacks/vue.csv"},
+    "svelte":           {"file": "stacks/svelte.csv"},
+    "astro":            {"file": "stacks/astro.csv"},
+    "swiftui":          {"file": "stacks/swiftui.csv"},
+    "react-native":     {"file": "stacks/react-native.csv"},
+    "flutter":          {"file": "stacks/flutter.csv"},
+    "nuxtjs":           {"file": "stacks/nuxtjs.csv"},
+    "nuxt-ui":          {"file": "stacks/nuxt-ui.csv"},
+    "html-tailwind":    {"file": "stacks/html-tailwind.csv"},
+    "shadcn":           {"file": "stacks/shadcn.csv"},
+    "jetpack-compose":  {"file": "stacks/jetpack-compose.csv"},
+    "threejs":          {"file": "stacks/threejs.csv"},
+    "angular":          {"file": "stacks/angular.csv"},
+    "laravel":          {"file": "stacks/laravel.csv"},
+}
+
+# Common columns for all stacks
+_STACK_COLS = {
+    "search_cols": ["Category", "Guideline", "Description", "Do", "Don't"],
+    "output_cols": ["Category", "Guideline", "Description", "Do", "Don't", "Code Good", "Code Bad", "Severity", "Docs URL"]
+}
+
+AVAILABLE_STACKS = list(STACK_CONFIG.keys())
+
+
+# ============ BM25 IMPLEMENTATION ============
+class BM25:
+    """BM25 ranking algorithm for text search"""
+
+    def __init__(self, k1=1.5, b=0.75):
+        self.k1 = k1
+        self.b = b
+        self.corpus = []
+        self.doc_lengths = []
+        self.avgdl = 0
+        self.idf = {}
+        self.doc_freqs = defaultdict(int)
+        self.N = 0
+
+    def tokenize(self, text):
+        """Lowercase, split, remove punctuation, filter short words"""
+        text = re.sub(r'[^\w\s]', ' ', str(text).lower())
+        return [w for w in text.split() if len(w) > 2]
+
+    def fit(self, documents):
+        """Build BM25 index from documents"""
+        self.corpus = [self.tokenize(doc) for doc in documents]
+        self.N = len(self.corpus)
+        if self.N == 0:
+            return
+        self.doc_lengths = [len(doc) for doc in self.corpus]
+        self.avgdl = sum(self.doc_lengths) / self.N
+
+        for doc in self.corpus:
+            seen = set()
+            for word in doc:
+                if word not in seen:
+                    self.doc_freqs[word] += 1
+                    seen.add(word)
+
+        for word, freq in self.doc_freqs.items():
+            self.idf[word] = log((self.N - freq + 0.5) / (freq + 0.5) + 1)
+
+    def score(self, query):
+        """Score all documents against query"""
+        query_tokens = self.tokenize(query)
+        scores = []
+
+        for idx, doc in enumerate(self.corpus):
+            score = 0
+            doc_len = self.doc_lengths[idx]
+            term_freqs = defaultdict(int)
+            for word in doc:
+                term_freqs[word] += 1
+
+            for token in query_tokens:
+                if token in self.idf:
+                    tf = term_freqs[token]
+                    idf = self.idf[token]
+                    numerator = tf * (self.k1 + 1)
+                    denominator = tf + self.k1 * (1 - self.b + self.b * doc_len / self.avgdl)
+                    score += idf * numerator / denominator
+
+            scores.append((idx, score))
+
+        return sorted(scores, key=lambda x: x[1], reverse=True)
+
+
+# ============ SEARCH FUNCTIONS ============
+def _load_csv(filepath):
+    """Load CSV and return list of dicts"""
+    with open(filepath, 'r', encoding='utf-8') as f:
+        return list(csv.DictReader(f))
+
+
+def _search_csv(filepath, search_cols, output_cols, query, max_results):
+    """Core search function using BM25"""
+    if not filepath.exists():
+        return []
+
+    data = _load_csv(filepath)
+
+    # Build documents from search columns
+    documents = [" ".join(str(row.get(col, "")) for col in search_cols) for row in data]
+
+    # BM25 search
+    bm25 = BM25()
+    bm25.fit(documents)
+    ranked = bm25.score(query)
+
+    # Get top results with score > 0
+    results = []
+    for idx, score in ranked[:max_results]:
+        if score > 0:
+            row = data[idx]
+            results.append({col: row.get(col, "") for col in output_cols if col in row})
+
+    return results
+
+
+def detect_domain(query):
+    """Auto-detect the most relevant domain from query"""
+    query_lower = query.lower()
+
+    domain_keywords = {
+        "color": ["color", "palette", "hex", "#", "rgb", "token", "semantic", "accent", "destructive", "muted", "foreground"],
+        "chart": ["chart", "graph", "visualization", "trend", "bar", "pie", "scatter", "heatmap", "funnel"],
+        "landing": ["landing", "page", "cta", "conversion", "hero", "testimonial", "pricing", "section"],
+        "product": ["saas", "ecommerce", "e-commerce", "fintech", "healthcare", "gaming", "portfolio", "crypto", "dashboard", "fitness", "restaurant", "hotel", "travel", "music", "education", "learning", "legal", "insurance", "medical", "beauty", "pharmacy", "dental", "pet", "dating", "wedding", "recipe", "delivery", "ride", "booking", "calendar", "timer", "tracker", "diary", "note", "chat", "messenger", "crm", "invoice", "parking", "transit", "vpn", "alarm", "weather", "sleep", "meditation", "fasting", "habit", "grocery", "meme", "wardrobe", "plant care", "reading", "flashcard", "puzzle", "trivia", "arcade", "photography", "streaming", "podcast", "newsletter", "marketplace", "freelancer", "coworking", "airline", "museum", "theater", "church", "non-profit", "charity", "kindergarten", "daycare", "senior care", "veterinary", "florist", "bakery", "brewery", "construction", "automotive", "real estate", "logistics", "agriculture", "coding bootcamp"],
+        "style": ["style", "design", "ui", "minimalism", "glassmorphism", "neumorphism", "brutalism", "dark mode", "flat", "aurora", "prompt", "css", "implementation", "variable", "checklist", "tailwind"],
+        "ux": ["ux", "usability", "accessibility", "wcag", "touch", "scroll", "animation", "keyboard", "navigation", "mobile"],
+        "typography": ["font pairing", "typography pairing", "heading font", "body font"],
+        "google-fonts": ["google font", "font family", "font weight", "font style", "variable font", "noto", "font for", "find font", "font subset", "font language", "monospace font", "serif font", "sans serif font", "display font", "handwriting font", "font", "typography", "serif", "sans"],
+        "icons": ["icon", "icons", "lucide", "heroicons", "symbol", "glyph", "pictogram", "svg icon"],
+        "react": ["react", "next.js", "nextjs", "suspense", "memo", "usecallback", "useeffect", "rerender", "bundle", "waterfall", "barrel", "dynamic import", "rsc", "server component"],
+        "web": ["aria", "focus", "outline", "semantic", "virtualize", "autocomplete", "form", "input type", "preconnect"]
+    }
+
+    scores = {domain: sum(1 for kw in keywords if re.search(r'\b' + re.escape(kw) + r'\b', query_lower)) for domain, keywords in domain_keywords.items()}
+    best = max(scores, key=scores.get)
+    return best if scores[best] > 0 else "style"
+
+
+def search(query, domain=None, max_results=MAX_RESULTS):
+    """Main search function with auto-domain detection"""
+    if domain is None:
+        domain = detect_domain(query)
+
+    config = CSV_CONFIG.get(domain, CSV_CONFIG["style"])
+    filepath = DATA_DIR / config["file"]
+
+    if not filepath.exists():
+        return {"error": f"File not found: {filepath}", "domain": domain}
+
+    results = _search_csv(filepath, config["search_cols"], config["output_cols"], query, max_results)
+
+    return {
+        "domain": domain,
+        "query": query,
+        "file": config["file"],
+        "count": len(results),
+        "results": results
+    }
+
+
+def search_stack(query, stack, max_results=MAX_RESULTS):
+    """Search stack-specific guidelines"""
+    if stack not in STACK_CONFIG:
+        return {"error": f"Unknown stack: {stack}. Available: {', '.join(AVAILABLE_STACKS)}"}
+
+    filepath = DATA_DIR / STACK_CONFIG[stack]["file"]
+
+    if not filepath.exists():
+        return {"error": f"Stack file not found: {filepath}", "stack": stack}
+
+    results = _search_csv(filepath, _STACK_COLS["search_cols"], _STACK_COLS["output_cols"], query, max_results)
+
+    return {
+        "domain": "stack",
+        "stack": stack,
+        "query": query,
+        "file": STACK_CONFIG[stack]["file"],
+        "count": len(results),
+        "results": results
+    }
diff --git a/.claude/skills/ui-ux-pro-max/scripts/design_system.py b/.claude/skills/ui-ux-pro-max/scripts/design_system.py
new file mode 100644
index 000000000..d3152e5fb
--- /dev/null
+++ b/.claude/skills/ui-ux-pro-max/scripts/design_system.py
@@ -0,0 +1,1148 @@
+#!/usr/bin/env python3
+# -*- coding: utf-8 -*-
+"""
+Design System Generator - Aggregates search results and applies reasoning
+to generate comprehensive design system recommendations.
+
+Usage:
+    from design_system import generate_design_system
+    result = generate_design_system("SaaS dashboard", "My Project")
+    
+    # With persistence (Master + Overrides pattern)
+    result = generate_design_system("SaaS dashboard", "My Project", persist=True)
+    result = generate_design_system("SaaS dashboard", "My Project", persist=True, page="dashboard")
+"""
+
+import csv
+import json
+import os
+from datetime import datetime
+from pathlib import Path
+from core import search, DATA_DIR
+
+
+# ============ CONFIGURATION ============
+REASONING_FILE = "ui-reasoning.csv"
+
+SEARCH_CONFIG = {
+    "product": {"max_results": 1},
+    "style": {"max_results": 3},
+    "color": {"max_results": 2},
+    "landing": {"max_results": 2},
+    "typography": {"max_results": 2}
+}
+
+
+# ============ DESIGN SYSTEM GENERATOR ============
+class DesignSystemGenerator:
+    """Generates design system recommendations from aggregated searches."""
+
+    def __init__(self):
+        self.reasoning_data = self._load_reasoning()
+
+    def _load_reasoning(self) -> list:
+        """Load reasoning rules from CSV."""
+        filepath = DATA_DIR / REASONING_FILE
+        if not filepath.exists():
+            return []
+        with open(filepath, 'r', encoding='utf-8') as f:
+            return list(csv.DictReader(f))
+
+    def _multi_domain_search(self, query: str, style_priority: list = None) -> dict:
+        """Execute searches across multiple domains."""
+        results = {}
+        for domain, config in SEARCH_CONFIG.items():
+            if domain == "style" and style_priority:
+                # For style, also search with priority keywords
+                priority_query = " ".join(style_priority[:2]) if style_priority else query
+                combined_query = f"{query} {priority_query}"
+                results[domain] = search(combined_query, domain, config["max_results"])
+            else:
+                results[domain] = search(query, domain, config["max_results"])
+        return results
+
+    def _find_reasoning_rule(self, category: str) -> dict:
+        """Find matching reasoning rule for a category."""
+        category_lower = category.lower()
+
+        # Try exact match first
+        for rule in self.reasoning_data:
+            if rule.get("UI_Category", "").lower() == category_lower:
+                return rule
+
+        # Try partial match
+        for rule in self.reasoning_data:
+            ui_cat = rule.get("UI_Category", "").lower()
+            if ui_cat in category_lower or category_lower in ui_cat:
+                return rule
+
+        # Try keyword match
+        for rule in self.reasoning_data:
+            ui_cat = rule.get("UI_Category", "").lower()
+            keywords = ui_cat.replace("/", " ").replace("-", " ").split()
+            if any(kw in category_lower for kw in keywords):
+                return rule
+
+        return {}
+
+    def _apply_reasoning(self, category: str, search_results: dict) -> dict:
+        """Apply reasoning rules to search results."""
+        rule = self._find_reasoning_rule(category)
+
+        if not rule:
+            return {
+                "pattern": "Hero + Features + CTA",
+                "style_priority": ["Minimalism", "Flat Design"],
+                "color_mood": "Professional",
+                "typography_mood": "Clean",
+                "key_effects": "Subtle hover transitions",
+                "anti_patterns": "",
+                "decision_rules": {},
+                "severity": "MEDIUM"
+            }
+
+        # Parse decision rules JSON
+        decision_rules = {}
+        try:
+            decision_rules = json.loads(rule.get("Decision_Rules", "{}"))
+        except json.JSONDecodeError:
+            pass
+
+        return {
+            "pattern": rule.get("Recommended_Pattern", ""),
+            "style_priority": [s.strip() for s in rule.get("Style_Priority", "").split("+")],
+            "color_mood": rule.get("Color_Mood", ""),
+            "typography_mood": rule.get("Typography_Mood", ""),
+            "key_effects": rule.get("Key_Effects", ""),
+            "anti_patterns": rule.get("Anti_Patterns", ""),
+            "decision_rules": decision_rules,
+            "severity": rule.get("Severity", "MEDIUM")
+        }
+
+    def _select_best_match(self, results: list, priority_keywords: list) -> dict:
+        """Select best matching result based on priority keywords."""
+        if not results:
+            return {}
+
+        if not priority_keywords:
+            return results[0]
+
+        # First: try exact style name match
+        for priority in priority_keywords:
+            priority_lower = priority.lower().strip()
+            for result in results:
+                style_name = result.get("Style Category", "").lower()
+                if priority_lower in style_name or style_name in priority_lower:
+                    return result
+
+        # Second: score by keyword match in all fields
+        scored = []
+        for result in results:
+            result_str = str(result).lower()
+            score = 0
+            for kw in priority_keywords:
+                kw_lower = kw.lower().strip()
+                # Higher score for style name match
+                if kw_lower in result.get("Style Category", "").lower():
+                    score += 10
+                # Lower score for keyword field match
+                elif kw_lower in result.get("Keywords", "").lower():
+                    score += 3
+                # Even lower for other field matches
+                elif kw_lower in result_str:
+                    score += 1
+            scored.append((score, result))
+
+        scored.sort(key=lambda x: x[0], reverse=True)
+        return scored[0][1] if scored and scored[0][0] > 0 else results[0]
+
+    def _extract_results(self, search_result: dict) -> list:
+        """Extract results list from search result dict."""
+        return search_result.get("results", [])
+
+    def generate(self, query: str, project_name: str = None) -> dict:
+        """Generate complete design system recommendation."""
+        # Step 1: First search product to get category
+        product_result = search(query, "product", 1)
+        product_results = product_result.get("results", [])
+        category = "General"
+        if product_results:
+            category = product_results[0].get("Product Type", "General")
+
+        # Step 2: Get reasoning rules for this category
+        reasoning = self._apply_reasoning(category, {})
+        style_priority = reasoning.get("style_priority", [])
+
+        # Step 3: Multi-domain search with style priority hints
+        search_results = self._multi_domain_search(query, style_priority)
+        search_results["product"] = product_result  # Reuse product search
+
+        # Step 4: Select best matches from each domain using priority
+        style_results = self._extract_results(search_results.get("style", {}))
+        color_results = self._extract_results(search_results.get("color", {}))
+        typography_results = self._extract_results(search_results.get("typography", {}))
+        landing_results = self._extract_results(search_results.get("landing", {}))
+
+        best_style = self._select_best_match(style_results, reasoning.get("style_priority", []))
+        best_color = color_results[0] if color_results else {}
+        best_typography = typography_results[0] if typography_results else {}
+        best_landing = landing_results[0] if landing_results else {}
+
+        # Step 5: Build final recommendation
+        # Combine effects from both reasoning and style search
+        style_effects = best_style.get("Effects & Animation", "")
+        reasoning_effects = reasoning.get("key_effects", "")
+        combined_effects = style_effects if style_effects else reasoning_effects
+
+        return {
+            "project_name": project_name or query.upper(),
+            "category": category,
+            "pattern": {
+                "name": best_landing.get("Pattern Name", reasoning.get("pattern", "Hero + Features + CTA")),
+                "sections": best_landing.get("Section Order", "Hero > Features > CTA"),
+                "cta_placement": best_landing.get("Primary CTA Placement", "Above fold"),
+                "color_strategy": best_landing.get("Color Strategy", ""),
+                "conversion": best_landing.get("Conversion Optimization", "")
+            },
+            "style": {
+                "name": best_style.get("Style Category", "Minimalism"),
+                "type": best_style.get("Type", "General"),
+                "effects": style_effects,
+                "keywords": best_style.get("Keywords", ""),
+                "best_for": best_style.get("Best For", ""),
+                "performance": best_style.get("Performance", ""),
+                "accessibility": best_style.get("Accessibility", ""),
+                "light_mode": best_style.get("Light Mode ✓", ""),
+                "dark_mode": best_style.get("Dark Mode ✓", ""),
+            },
+            "colors": {
+                "primary": best_color.get("Primary", "#2563EB"),
+                "on_primary": best_color.get("On Primary", ""),
+                "secondary": best_color.get("Secondary", "#3B82F6"),
+                "accent": best_color.get("Accent", "#F97316"),
+                "background": best_color.get("Background", "#F8FAFC"),
+                "foreground": best_color.get("Foreground", "#1E293B"),
+                "muted": best_color.get("Muted", ""),
+                "border": best_color.get("Border", ""),
+                "destructive": best_color.get("Destructive", ""),
+                "ring": best_color.get("Ring", ""),
+                "notes": best_color.get("Notes", ""),
+                # Keep legacy keys for backward compat in MASTER.md
+                "cta": best_color.get("Accent", "#F97316"),
+                "text": best_color.get("Foreground", "#1E293B"),
+            },
+            "typography": {
+                "heading": best_typography.get("Heading Font", "Inter"),
+                "body": best_typography.get("Body Font", "Inter"),
+                "mood": best_typography.get("Mood/Style Keywords", reasoning.get("typography_mood", "")),
+                "best_for": best_typography.get("Best For", ""),
+                "google_fonts_url": best_typography.get("Google Fonts URL", ""),
+                "css_import": best_typography.get("CSS Import", "")
+            },
+            "key_effects": combined_effects,
+            "anti_patterns": reasoning.get("anti_patterns", ""),
+            "decision_rules": reasoning.get("decision_rules", {}),
+            "severity": reasoning.get("severity", "MEDIUM")
+        }
+
+
+# ============ OUTPUT FORMATTERS ============
+BOX_WIDTH = 90  # Wider box for more content
+
+
+def hex_to_ansi(hex_color: str) -> str:
+    """Convert hex color to ANSI True Color swatch (██) with fallback."""
+    if not hex_color or not hex_color.startswith('#'):
+        return ""
+    colorterm = os.environ.get('COLORTERM', '')
+    if colorterm not in ('truecolor', '24bit'):
+        return ""
+    hex_color = hex_color.lstrip('#')
+    if len(hex_color) != 6:
+        return ""
+    r, g, b = int(hex_color[0:2], 16), int(hex_color[2:4], 16), int(hex_color[4:6], 16)
+    return f"\033[38;2;{r};{g};{b}m██\033[0m "
+
+
+def ansi_ljust(s: str, width: int) -> str:
+    """Like str.ljust but accounts for zero-width ANSI escape sequences."""
+    import re
+    visible_len = len(re.sub(r'\033\[[0-9;]*m', '', s))
+    pad = width - visible_len
+    return s + (" " * max(0, pad))
+
+
+def section_header(name: str, width: int) -> str:
+    """Create a Unicode section separator: ├─── NAME ───...┤"""
+    label = f"─── {name} "
+    fill = "─" * (width - len(label) - 1)
+    return f"├{label}{fill}┤"
+
+
+def format_ascii_box(design_system: dict) -> str:
+    """Format design system as Unicode box with ANSI color swatches."""
+    project = design_system.get("project_name", "PROJECT")
+    pattern = design_system.get("pattern", {})
+    style = design_system.get("style", {})
+    colors = design_system.get("colors", {})
+    typography = design_system.get("typography", {})
+    effects = design_system.get("key_effects", "")
+    anti_patterns = design_system.get("anti_patterns", "")
+
+    def wrap_text(text: str, prefix: str, width: int) -> list:
+        """Wrap long text into multiple lines."""
+        if not text:
+            return []
+        words = text.split()
+        lines = []
+        current_line = prefix
+        for word in words:
+            if len(current_line) + len(word) + 1 <= width - 2:
+                current_line += (" " if current_line != prefix else "") + word
+            else:
+                if current_line != prefix:
+                    lines.append(current_line)
+                current_line = prefix + word
+        if current_line != prefix:
+            lines.append(current_line)
+        return lines
+
+    # Build sections from pattern
+    sections = pattern.get("sections", "").split(">")
+    sections = [s.strip() for s in sections if s.strip()]
+
+    # Build output lines
+    lines = []
+    w = BOX_WIDTH - 1
+
+    # Header with double-line box
+    lines.append("╔" + "═" * w + "╗")
+    lines.append(ansi_ljust(f"║  TARGET: {project} - RECOMMENDED DESIGN SYSTEM", BOX_WIDTH) + "║")
+    lines.append("╚" + "═" * w + "╝")
+    lines.append("┌" + "─" * w + "┐")
+
+    # Pattern section
+    lines.append(section_header("PATTERN", BOX_WIDTH + 1))
+    lines.append(f"│  Name: {pattern.get('name', '')}".ljust(BOX_WIDTH) + "│")
+    if pattern.get('conversion'):
+        lines.append(f"│     Conversion: {pattern.get('conversion', '')}".ljust(BOX_WIDTH) + "│")
+    if pattern.get('cta_placement'):
+        lines.append(f"│     CTA: {pattern.get('cta_placement', '')}".ljust(BOX_WIDTH) + "│")
+    lines.append("│     Sections:".ljust(BOX_WIDTH) + "│")
+    for i, section in enumerate(sections, 1):
+        lines.append(f"│       {i}. {section}".ljust(BOX_WIDTH) + "│")
+
+    # Style section
+    lines.append(section_header("STYLE", BOX_WIDTH + 1))
+    lines.append(f"│  Name: {style.get('name', '')}".ljust(BOX_WIDTH) + "│")
+    light = style.get("light_mode", "")
+    dark = style.get("dark_mode", "")
+    if light or dark:
+        lines.append(f"│     Mode Support: Light {light}  Dark {dark}".ljust(BOX_WIDTH) + "│")
+    if style.get("keywords"):
+        for line in wrap_text(f"Keywords: {style.get('keywords', '')}", "│     ", BOX_WIDTH):
+            lines.append(line.ljust(BOX_WIDTH) + "│")
+    if style.get("best_for"):
+        for line in wrap_text(f"Best For: {style.get('best_for', '')}", "│     ", BOX_WIDTH):
+            lines.append(line.ljust(BOX_WIDTH) + "│")
+    if style.get("performance") or style.get("accessibility"):
+        perf_a11y = f"Performance: {style.get('performance', '')} | Accessibility: {style.get('accessibility', '')}"
+        lines.append(f"│     {perf_a11y}".ljust(BOX_WIDTH) + "│")
+
+    # Colors section (extended palette with ANSI swatches)
+    lines.append(section_header("COLORS", BOX_WIDTH + 1))
+    color_entries = [
+        ("Primary",      "primary",      "--color-primary"),
+        ("On Primary",   "on_primary",   "--color-on-primary"),
+        ("Secondary",    "secondary",    "--color-secondary"),
+        ("Accent/CTA",   "accent",       "--color-accent"),
+        ("Background",   "background",   "--color-background"),
+        ("Foreground",   "foreground",   "--color-foreground"),
+        ("Muted",        "muted",        "--color-muted"),
+        ("Border",       "border",       "--color-border"),
+        ("Destructive",  "destructive",  "--color-destructive"),
+        ("Ring",         "ring",         "--color-ring"),
+    ]
+    for label, key, css_var in color_entries:
+        hex_val = colors.get(key, "")
+        if not hex_val:
+            continue
+        swatch = hex_to_ansi(hex_val)
+        content = f"│     {swatch}{label + ':':14s} {hex_val:10s} ({css_var})"
+        lines.append(ansi_ljust(content, BOX_WIDTH) + "│")
+    if colors.get("notes"):
+        for line in wrap_text(f"Notes: {colors.get('notes', '')}", "│     ", BOX_WIDTH):
+            lines.append(line.ljust(BOX_WIDTH) + "│")
+
+    # Typography section
+    lines.append(section_header("TYPOGRAPHY", BOX_WIDTH + 1))
+    lines.append(f"│  {typography.get('heading', '')} / {typography.get('body', '')}".ljust(BOX_WIDTH) + "│")
+    if typography.get("mood"):
+        for line in wrap_text(f"Mood: {typography.get('mood', '')}", "│     ", BOX_WIDTH):
+            lines.append(line.ljust(BOX_WIDTH) + "│")
+    if typography.get("best_for"):
+        for line in wrap_text(f"Best For: {typography.get('best_for', '')}", "│     ", BOX_WIDTH):
+            lines.append(line.ljust(BOX_WIDTH) + "│")
+    if typography.get("google_fonts_url"):
+        lines.append(f"│     Google Fonts: {typography.get('google_fonts_url', '')}".ljust(BOX_WIDTH) + "│")
+    if typography.get("css_import"):
+        lines.append(f"│     CSS Import: {typography.get('css_import', '')[:70]}...".ljust(BOX_WIDTH) + "│")
+
+    # Key Effects section
+    if effects:
+        lines.append(section_header("KEY EFFECTS", BOX_WIDTH + 1))
+        for line in wrap_text(effects, "│     ", BOX_WIDTH):
+            lines.append(line.ljust(BOX_WIDTH) + "│")
+
+    # Anti-patterns section
+    if anti_patterns:
+        lines.append(section_header("AVOID", BOX_WIDTH + 1))
+        for line in wrap_text(anti_patterns, "│     ", BOX_WIDTH):
+            lines.append(line.ljust(BOX_WIDTH) + "│")
+
+    # Pre-Delivery Checklist section
+    lines.append(section_header("PRE-DELIVERY CHECKLIST", BOX_WIDTH + 1))
+    checklist_items = [
+        "[ ] No emojis as icons (use SVG: Heroicons/Lucide)",
+        "[ ] cursor-pointer on all clickable elements",
+        "[ ] Hover states with smooth transitions (150-300ms)",
+        "[ ] Light mode: text contrast 4.5:1 minimum",
+        "[ ] Focus states visible for keyboard nav",
+        "[ ] prefers-reduced-motion respected",
+        "[ ] Responsive: 375px, 768px, 1024px, 1440px"
+    ]
+    for item in checklist_items:
+        lines.append(f"│     {item}".ljust(BOX_WIDTH) + "│")
+
+    lines.append("└" + "─" * w + "┘")
+
+    return "\n".join(lines)
+
+
+def format_markdown(design_system: dict) -> str:
+    """Format design system as markdown."""
+    project = design_system.get("project_name", "PROJECT")
+    pattern = design_system.get("pattern", {})
+    style = design_system.get("style", {})
+    colors = design_system.get("colors", {})
+    typography = design_system.get("typography", {})
+    effects = design_system.get("key_effects", "")
+    anti_patterns = design_system.get("anti_patterns", "")
+
+    lines = []
+    lines.append(f"## Design System: {project}")
+    lines.append("")
+
+    # Pattern section
+    lines.append("### Pattern")
+    lines.append(f"- **Name:** {pattern.get('name', '')}")
+    if pattern.get('conversion'):
+        lines.append(f"- **Conversion Focus:** {pattern.get('conversion', '')}")
+    if pattern.get('cta_placement'):
+        lines.append(f"- **CTA Placement:** {pattern.get('cta_placement', '')}")
+    if pattern.get('color_strategy'):
+        lines.append(f"- **Color Strategy:** {pattern.get('color_strategy', '')}")
+    lines.append(f"- **Sections:** {pattern.get('sections', '')}")
+    lines.append("")
+
+    # Style section
+    lines.append("### Style")
+    lines.append(f"- **Name:** {style.get('name', '')}")
+    light = style.get("light_mode", "")
+    dark = style.get("dark_mode", "")
+    if light or dark:
+        lines.append(f"- **Mode Support:** Light {light} | Dark {dark}")
+    if style.get('keywords'):
+        lines.append(f"- **Keywords:** {style.get('keywords', '')}")
+    if style.get('best_for'):
+        lines.append(f"- **Best For:** {style.get('best_for', '')}")
+    if style.get('performance') or style.get('accessibility'):
+        lines.append(f"- **Performance:** {style.get('performance', '')} | **Accessibility:** {style.get('accessibility', '')}")
+    lines.append("")
+
+    # Colors section (extended palette)
+    lines.append("### Colors")
+    lines.append("| Role | Hex | CSS Variable |")
+    lines.append("|------|-----|--------------|")
+    md_color_entries = [
+        ("Primary",      "primary",      "--color-primary"),
+        ("On Primary",   "on_primary",   "--color-on-primary"),
+        ("Secondary",    "secondary",    "--color-secondary"),
+        ("Accent/CTA",   "accent",       "--color-accent"),
+        ("Background",   "background",   "--color-background"),
+        ("Foreground",   "foreground",   "--color-foreground"),
+        ("Muted",        "muted",        "--color-muted"),
+        ("Border",       "border",       "--color-border"),
+        ("Destructive",  "destructive",  "--color-destructive"),
+        ("Ring",         "ring",         "--color-ring"),
+    ]
+    for label, key, css_var in md_color_entries:
+        hex_val = colors.get(key, "")
+        if hex_val:
+            lines.append(f"| {label} | `{hex_val}` | `{css_var}` |")
+    if colors.get("notes"):
+        lines.append(f"\n*Notes: {colors.get('notes', '')}*")
+    lines.append("")
+
+    # Typography section
+    lines.append("### Typography")
+    lines.append(f"- **Heading:** {typography.get('heading', '')}")
+    lines.append(f"- **Body:** {typography.get('body', '')}")
+    if typography.get("mood"):
+        lines.append(f"- **Mood:** {typography.get('mood', '')}")
+    if typography.get("best_for"):
+        lines.append(f"- **Best For:** {typography.get('best_for', '')}")
+    if typography.get("google_fonts_url"):
+        lines.append(f"- **Google Fonts:** {typography.get('google_fonts_url', '')}")
+    if typography.get("css_import"):
+        lines.append(f"- **CSS Import:**")
+        lines.append(f"```css")
+        lines.append(f"{typography.get('css_import', '')}")
+        lines.append(f"```")
+    lines.append("")
+
+    # Key Effects section
+    if effects:
+        lines.append("### Key Effects")
+        lines.append(f"{effects}")
+        lines.append("")
+
+    # Anti-patterns section
+    if anti_patterns:
+        lines.append("### Avoid (Anti-patterns)")
+        newline_bullet = '\n- '
+        lines.append(f"- {anti_patterns.replace(' + ', newline_bullet)}")
+        lines.append("")
+
+    # Pre-Delivery Checklist section
+    lines.append("### Pre-Delivery Checklist")
+    lines.append("- [ ] No emojis as icons (use SVG: Heroicons/Lucide)")
+    lines.append("- [ ] cursor-pointer on all clickable elements")
+    lines.append("- [ ] Hover states with smooth transitions (150-300ms)")
+    lines.append("- [ ] Light mode: text contrast 4.5:1 minimum")
+    lines.append("- [ ] Focus states visible for keyboard nav")
+    lines.append("- [ ] prefers-reduced-motion respected")
+    lines.append("- [ ] Responsive: 375px, 768px, 1024px, 1440px")
+    lines.append("")
+
+    return "\n".join(lines)
+
+
+# ============ MAIN ENTRY POINT ============
+def generate_design_system(query: str, project_name: str = None, output_format: str = "ascii", 
+                           persist: bool = False, page: str = None, output_dir: str = None) -> str:
+    """
+    Main entry point for design system generation.
+
+    Args:
+        query: Search query (e.g., "SaaS dashboard", "e-commerce luxury")
+        project_name: Optional project name for output header
+        output_format: "ascii" (default) or "markdown"
+        persist: If True, save design system to design-system/ folder
+        page: Optional page name for page-specific override file
+        output_dir: Optional output directory (defaults to current working directory)
+
+    Returns:
+        Formatted design system string
+    """
+    generator = DesignSystemGenerator()
+    design_system = generator.generate(query, project_name)
+    
+    # Persist to files if requested
+    if persist:
+        persist_design_system(design_system, page, output_dir, query)
+
+    if output_format == "markdown":
+        return format_markdown(design_system)
+    return format_ascii_box(design_system)
+
+
+# ============ PERSISTENCE FUNCTIONS ============
+def persist_design_system(design_system: dict, page: str = None, output_dir: str = None, page_query: str = None) -> dict:
+    """
+    Persist design system to design-system/<project>/ folder using Master + Overrides pattern.
+    
+    Args:
+        design_system: The generated design system dictionary
+        page: Optional page name for page-specific override file
+        output_dir: Optional output directory (defaults to current working directory)
+        page_query: Optional query string for intelligent page override generation
+    
+    Returns:
+        dict with created file paths and status
+    """
+    base_dir = Path(output_dir) if output_dir else Path.cwd()
+    
+    # Use project name for project-specific folder
+    project_name = design_system.get("project_name", "default")
+    project_slug = project_name.lower().replace(' ', '-')
+    
+    design_system_dir = base_dir / "design-system" / project_slug
+    pages_dir = design_system_dir / "pages"
+    
+    created_files = []
+    
+    # Create directories
+    design_system_dir.mkdir(parents=True, exist_ok=True)
+    pages_dir.mkdir(parents=True, exist_ok=True)
+    
+    master_file = design_system_dir / "MASTER.md"
+    
+    # Generate and write MASTER.md
+    master_content = format_master_md(design_system)
+    with open(master_file, 'w', encoding='utf-8') as f:
+        f.write(master_content)
+    created_files.append(str(master_file))
+    
+    # If page is specified, create page override file with intelligent content
+    if page:
+        page_file = pages_dir / f"{page.lower().replace(' ', '-')}.md"
+        page_content = format_page_override_md(design_system, page, page_query)
+        with open(page_file, 'w', encoding='utf-8') as f:
+            f.write(page_content)
+        created_files.append(str(page_file))
+    
+    return {
+        "status": "success",
+        "design_system_dir": str(design_system_dir),
+        "created_files": created_files
+    }
+
+
+def format_master_md(design_system: dict) -> str:
+    """Format design system as MASTER.md with hierarchical override logic."""
+    project = design_system.get("project_name", "PROJECT")
+    pattern = design_system.get("pattern", {})
+    style = design_system.get("style", {})
+    colors = design_system.get("colors", {})
+    typography = design_system.get("typography", {})
+    effects = design_system.get("key_effects", "")
+    anti_patterns = design_system.get("anti_patterns", "")
+    
+    timestamp = datetime.now().strftime("%Y-%m-%d %H:%M:%S")
+    
+    lines = []
+    
+    # Logic header
+    lines.append("# Design System Master File")
+    lines.append("")
+    lines.append("> **LOGIC:** When building a specific page, first check `design-system/pages/[page-name].md`.")
+    lines.append("> If that file exists, its rules **override** this Master file.")
+    lines.append("> If not, strictly follow the rules below.")
+    lines.append("")
+    lines.append("---")
+    lines.append("")
+    lines.append(f"**Project:** {project}")
+    lines.append(f"**Generated:** {timestamp}")
+    lines.append(f"**Category:** {design_system.get('category', 'General')}")
+    lines.append("")
+    lines.append("---")
+    lines.append("")
+    
+    # Global Rules section
+    lines.append("## Global Rules")
+    lines.append("")
+    
+    # Color Palette
+    lines.append("### Color Palette")
+    lines.append("")
+    lines.append("| Role | Hex | CSS Variable |")
+    lines.append("|------|-----|--------------|")
+    master_color_entries = [
+        ("Primary",      "primary",      "--color-primary"),
+        ("On Primary",   "on_primary",   "--color-on-primary"),
+        ("Secondary",    "secondary",    "--color-secondary"),
+        ("Accent/CTA",   "accent",       "--color-accent"),
+        ("Background",   "background",   "--color-background"),
+        ("Foreground",   "foreground",   "--color-foreground"),
+        ("Muted",        "muted",        "--color-muted"),
+        ("Border",       "border",       "--color-border"),
+        ("Destructive",  "destructive",  "--color-destructive"),
+        ("Ring",         "ring",         "--color-ring"),
+    ]
+    for label, key, css_var in master_color_entries:
+        hex_val = colors.get(key, "")
+        if hex_val:
+            lines.append(f"| {label} | `{hex_val}` | `{css_var}` |")
+    lines.append("")
+    if colors.get("notes"):
+        lines.append(f"**Color Notes:** {colors.get('notes', '')}")
+        lines.append("")
+    
+    # Typography
+    lines.append("### Typography")
+    lines.append("")
+    lines.append(f"- **Heading Font:** {typography.get('heading', 'Inter')}")
+    lines.append(f"- **Body Font:** {typography.get('body', 'Inter')}")
+    if typography.get("mood"):
+        lines.append(f"- **Mood:** {typography.get('mood', '')}")
+    if typography.get("google_fonts_url"):
+        lines.append(f"- **Google Fonts:** [{typography.get('heading', '')} + {typography.get('body', '')}]({typography.get('google_fonts_url', '')})")
+    lines.append("")
+    if typography.get("css_import"):
+        lines.append("**CSS Import:**")
+        lines.append("```css")
+        lines.append(typography.get("css_import", ""))
+        lines.append("```")
+        lines.append("")
+    
+    # Spacing Variables
+    lines.append("### Spacing Variables")
+    lines.append("")
+    lines.append("| Token | Value | Usage |")
+    lines.append("|-------|-------|-------|")
+    lines.append("| `--space-xs` | `4px` / `0.25rem` | Tight gaps |")
+    lines.append("| `--space-sm` | `8px` / `0.5rem` | Icon gaps, inline spacing |")
+    lines.append("| `--space-md` | `16px` / `1rem` | Standard padding |")
+    lines.append("| `--space-lg` | `24px` / `1.5rem` | Section padding |")
+    lines.append("| `--space-xl` | `32px` / `2rem` | Large gaps |")
+    lines.append("| `--space-2xl` | `48px` / `3rem` | Section margins |")
+    lines.append("| `--space-3xl` | `64px` / `4rem` | Hero padding |")
+    lines.append("")
+    
+    # Shadow Depths
+    lines.append("### Shadow Depths")
+    lines.append("")
+    lines.append("| Level | Value | Usage |")
+    lines.append("|-------|-------|-------|")
+    lines.append("| `--shadow-sm` | `0 1px 2px rgba(0,0,0,0.05)` | Subtle lift |")
+    lines.append("| `--shadow-md` | `0 4px 6px rgba(0,0,0,0.1)` | Cards, buttons |")
+    lines.append("| `--shadow-lg` | `0 10px 15px rgba(0,0,0,0.1)` | Modals, dropdowns |")
+    lines.append("| `--shadow-xl` | `0 20px 25px rgba(0,0,0,0.15)` | Hero images, featured cards |")
+    lines.append("")
+    
+    # Component Specs section
+    lines.append("---")
+    lines.append("")
+    lines.append("## Component Specs")
+    lines.append("")
+    
+    # Buttons
+    lines.append("### Buttons")
+    lines.append("")
+    lines.append("```css")
+    lines.append("/* Primary Button */")
+    lines.append(".btn-primary {")
+    lines.append(f"  background: {colors.get('cta', '#F97316')};")
+    lines.append("  color: white;")
+    lines.append("  padding: 12px 24px;")
+    lines.append("  border-radius: 8px;")
+    lines.append("  font-weight: 600;")
+    lines.append("  transition: all 200ms ease;")
+    lines.append("  cursor: pointer;")
+    lines.append("}")
+    lines.append("")
+    lines.append(".btn-primary:hover {")
+    lines.append("  opacity: 0.9;")
+    lines.append("  transform: translateY(-1px);")
+    lines.append("}")
+    lines.append("")
+    lines.append("/* Secondary Button */")
+    lines.append(".btn-secondary {")
+    lines.append(f"  background: transparent;")
+    lines.append(f"  color: {colors.get('primary', '#2563EB')};")
+    lines.append(f"  border: 2px solid {colors.get('primary', '#2563EB')};")
+    lines.append("  padding: 12px 24px;")
+    lines.append("  border-radius: 8px;")
+    lines.append("  font-weight: 600;")
+    lines.append("  transition: all 200ms ease;")
+    lines.append("  cursor: pointer;")
+    lines.append("}")
+    lines.append("```")
+    lines.append("")
+    
+    # Cards
+    lines.append("### Cards")
+    lines.append("")
+    lines.append("```css")
+    lines.append(".card {")
+    lines.append(f"  background: {colors.get('background', '#FFFFFF')};")
+    lines.append("  border-radius: 12px;")
+    lines.append("  padding: 24px;")
+    lines.append("  box-shadow: var(--shadow-md);")
+    lines.append("  transition: all 200ms ease;")
+    lines.append("  cursor: pointer;")
+    lines.append("}")
+    lines.append("")
+    lines.append(".card:hover {")
+    lines.append("  box-shadow: var(--shadow-lg);")
+    lines.append("  transform: translateY(-2px);")
+    lines.append("}")
+    lines.append("```")
+    lines.append("")
+    
+    # Inputs
+    lines.append("### Inputs")
+    lines.append("")
+    lines.append("```css")
+    lines.append(".input {")
+    lines.append("  padding: 12px 16px;")
+    lines.append("  border: 1px solid #E2E8F0;")
+    lines.append("  border-radius: 8px;")
+    lines.append("  font-size: 16px;")
+    lines.append("  transition: border-color 200ms ease;")
+    lines.append("}")
+    lines.append("")
+    lines.append(".input:focus {")
+    lines.append(f"  border-color: {colors.get('primary', '#2563EB')};")
+    lines.append("  outline: none;")
+    lines.append(f"  box-shadow: 0 0 0 3px {colors.get('primary', '#2563EB')}20;")
+    lines.append("}")
+    lines.append("```")
+    lines.append("")
+    
+    # Modals
+    lines.append("### Modals")
+    lines.append("")
+    lines.append("```css")
+    lines.append(".modal-overlay {")
+    lines.append("  background: rgba(0, 0, 0, 0.5);")
+    lines.append("  backdrop-filter: blur(4px);")
+    lines.append("}")
+    lines.append("")
+    lines.append(".modal {")
+    lines.append("  background: white;")
+    lines.append("  border-radius: 16px;")
+    lines.append("  padding: 32px;")
+    lines.append("  box-shadow: var(--shadow-xl);")
+    lines.append("  max-width: 500px;")
+    lines.append("  width: 90%;")
+    lines.append("}")
+    lines.append("```")
+    lines.append("")
+    
+    # Style section
+    lines.append("---")
+    lines.append("")
+    lines.append("## Style Guidelines")
+    lines.append("")
+    lines.append(f"**Style:** {style.get('name', 'Minimalism')}")
+    lines.append("")
+    if style.get("keywords"):
+        lines.append(f"**Keywords:** {style.get('keywords', '')}")
+        lines.append("")
+    if style.get("best_for"):
+        lines.append(f"**Best For:** {style.get('best_for', '')}")
+        lines.append("")
+    if effects:
+        lines.append(f"**Key Effects:** {effects}")
+        lines.append("")
+    
+    # Layout Pattern
+    lines.append("### Page Pattern")
+    lines.append("")
+    lines.append(f"**Pattern Name:** {pattern.get('name', '')}")
+    lines.append("")
+    if pattern.get('conversion'):
+        lines.append(f"- **Conversion Strategy:** {pattern.get('conversion', '')}")
+    if pattern.get('cta_placement'):
+        lines.append(f"- **CTA Placement:** {pattern.get('cta_placement', '')}")
+    lines.append(f"- **Section Order:** {pattern.get('sections', '')}")
+    lines.append("")
+    
+    # Anti-Patterns section
+    lines.append("---")
+    lines.append("")
+    lines.append("## Anti-Patterns (Do NOT Use)")
+    lines.append("")
+    if anti_patterns:
+        anti_list = [a.strip() for a in anti_patterns.split("+")]
+        for anti in anti_list:
+            if anti:
+                lines.append(f"- ❌ {anti}")
+    lines.append("")
+    lines.append("### Additional Forbidden Patterns")
+    lines.append("")
+    lines.append("- ❌ **Emojis as icons** — Use SVG icons (Heroicons, Lucide, Simple Icons)")
+    lines.append("- ❌ **Missing cursor:pointer** — All clickable elements must have cursor:pointer")
+    lines.append("- ❌ **Layout-shifting hovers** — Avoid scale transforms that shift layout")
+    lines.append("- ❌ **Low contrast text** — Maintain 4.5:1 minimum contrast ratio")
+    lines.append("- ❌ **Instant state changes** — Always use transitions (150-300ms)")
+    lines.append("- ❌ **Invisible focus states** — Focus states must be visible for a11y")
+    lines.append("")
+    
+    # Pre-Delivery Checklist
+    lines.append("---")
+    lines.append("")
+    lines.append("## Pre-Delivery Checklist")
+    lines.append("")
+    lines.append("Before delivering any UI code, verify:")
+    lines.append("")
+    lines.append("- [ ] No emojis used as icons (use SVG instead)")
+    lines.append("- [ ] All icons from consistent icon set (Heroicons/Lucide)")
+    lines.append("- [ ] `cursor-pointer` on all clickable elements")
+    lines.append("- [ ] Hover states with smooth transitions (150-300ms)")
+    lines.append("- [ ] Light mode: text contrast 4.5:1 minimum")
+    lines.append("- [ ] Focus states visible for keyboard navigation")
+    lines.append("- [ ] `prefers-reduced-motion` respected")
+    lines.append("- [ ] Responsive: 375px, 768px, 1024px, 1440px")
+    lines.append("- [ ] No content hidden behind fixed navbars")
+    lines.append("- [ ] No horizontal scroll on mobile")
+    lines.append("")
+    
+    return "\n".join(lines)
+
+
+def format_page_override_md(design_system: dict, page_name: str, page_query: str = None) -> str:
+    """Format a page-specific override file with intelligent AI-generated content."""
+    project = design_system.get("project_name", "PROJECT")
+    timestamp = datetime.now().strftime("%Y-%m-%d %H:%M:%S")
+    page_title = page_name.replace("-", " ").replace("_", " ").title()
+    
+    # Detect page type and generate intelligent overrides
+    page_overrides = _generate_intelligent_overrides(page_name, page_query, design_system)
+    
+    lines = []
+    
+    lines.append(f"# {page_title} Page Overrides")
+    lines.append("")
+    lines.append(f"> **PROJECT:** {project}")
+    lines.append(f"> **Generated:** {timestamp}")
+    lines.append(f"> **Page Type:** {page_overrides.get('page_type', 'General')}")
+    lines.append("")
+    lines.append("> ⚠️ **IMPORTANT:** Rules in this file **override** the Master file (`design-system/MASTER.md`).")
+    lines.append("> Only deviations from the Master are documented here. For all other rules, refer to the Master.")
+    lines.append("")
+    lines.append("---")
+    lines.append("")
+    
+    # Page-specific rules with actual content
+    lines.append("## Page-Specific Rules")
+    lines.append("")
+    
+    # Layout Overrides
+    lines.append("### Layout Overrides")
+    lines.append("")
+    layout = page_overrides.get("layout", {})
+    if layout:
+        for key, value in layout.items():
+            lines.append(f"- **{key}:** {value}")
+    else:
+        lines.append("- No overrides — use Master layout")
+    lines.append("")
+    
+    # Spacing Overrides
+    lines.append("### Spacing Overrides")
+    lines.append("")
+    spacing = page_overrides.get("spacing", {})
+    if spacing:
+        for key, value in spacing.items():
+            lines.append(f"- **{key}:** {value}")
+    else:
+        lines.append("- No overrides — use Master spacing")
+    lines.append("")
+    
+    # Typography Overrides
+    lines.append("### Typography Overrides")
+    lines.append("")
+    typography = page_overrides.get("typography", {})
+    if typography:
+        for key, value in typography.items():
+            lines.append(f"- **{key}:** {value}")
+    else:
+        lines.append("- No overrides — use Master typography")
+    lines.append("")
+    
+    # Color Overrides
+    lines.append("### Color Overrides")
+    lines.append("")
+    colors = page_overrides.get("colors", {})
+    if colors:
+        for key, value in colors.items():
+            lines.append(f"- **{key}:** {value}")
+    else:
+        lines.append("- No overrides — use Master colors")
+    lines.append("")
+    
+    # Component Overrides
+    lines.append("### Component Overrides")
+    lines.append("")
+    components = page_overrides.get("components", [])
+    if components:
+        for comp in components:
+            lines.append(f"- {comp}")
+    else:
+        lines.append("- No overrides — use Master component specs")
+    lines.append("")
+    
+    # Page-Specific Components
+    lines.append("---")
+    lines.append("")
+    lines.append("## Page-Specific Components")
+    lines.append("")
+    unique_components = page_overrides.get("unique_components", [])
+    if unique_components:
+        for comp in unique_components:
+            lines.append(f"- {comp}")
+    else:
+        lines.append("- No unique components for this page")
+    lines.append("")
+    
+    # Recommendations
+    lines.append("---")
+    lines.append("")
+    lines.append("## Recommendations")
+    lines.append("")
+    recommendations = page_overrides.get("recommendations", [])
+    if recommendations:
+        for rec in recommendations:
+            lines.append(f"- {rec}")
+    lines.append("")
+    
+    return "\n".join(lines)
+
+
+def _generate_intelligent_overrides(page_name: str, page_query: str, design_system: dict) -> dict:
+    """
+    Generate intelligent overrides based on page type using layered search.
+    
+    Uses the existing search infrastructure to find relevant style, UX, and layout
+    data instead of hardcoded page types.
+    """
+    from core import search
+    
+    page_lower = page_name.lower()
+    query_lower = (page_query or "").lower()
+    combined_context = f"{page_lower} {query_lower}"
+    
+    # Search across multiple domains for page-specific guidance
+    style_search = search(combined_context, "style", max_results=1)
+    ux_search = search(combined_context, "ux", max_results=3)
+    landing_search = search(combined_context, "landing", max_results=1)
+    
+    # Extract results from search response
+    style_results = style_search.get("results", [])
+    ux_results = ux_search.get("results", [])
+    landing_results = landing_search.get("results", [])
+    
+    # Detect page type from search results or context
+    page_type = _detect_page_type(combined_context, style_results)
+    
+    # Build overrides from search results
+    layout = {}
+    spacing = {}
+    typography = {}
+    colors = {}
+    components = []
+    unique_components = []
+    recommendations = []
+    
+    # Extract style-based overrides
+    if style_results:
+        style = style_results[0]
+        style_name = style.get("Style Category", "")
+        keywords = style.get("Keywords", "")
+        best_for = style.get("Best For", "")
+        effects = style.get("Effects & Animation", "")
+        
+        # Infer layout from style keywords
+        if any(kw in keywords.lower() for kw in ["data", "dense", "dashboard", "grid"]):
+            layout["Max Width"] = "1400px or full-width"
+            layout["Grid"] = "12-column grid for data flexibility"
+            spacing["Content Density"] = "High — optimize for information display"
+        elif any(kw in keywords.lower() for kw in ["minimal", "simple", "clean", "single"]):
+            layout["Max Width"] = "800px (narrow, focused)"
+            layout["Layout"] = "Single column, centered"
+            spacing["Content Density"] = "Low — focus on clarity"
+        else:
+            layout["Max Width"] = "1200px (standard)"
+            layout["Layout"] = "Full-width sections, centered content"
+        
+        if effects:
+            recommendations.append(f"Effects: {effects}")
+    
+    # Extract UX guidelines as recommendations
+    for ux in ux_results:
+        category = ux.get("Category", "")
+        do_text = ux.get("Do", "")
+        dont_text = ux.get("Don't", "")
+        if do_text:
+            recommendations.append(f"{category}: {do_text}")
+        if dont_text:
+            components.append(f"Avoid: {dont_text}")
+    
+    # Extract landing pattern info for section structure
+    if landing_results:
+        landing = landing_results[0]
+        sections = landing.get("Section Order", "")
+        cta_placement = landing.get("Primary CTA Placement", "")
+        color_strategy = landing.get("Color Strategy", "")
+        
+        if sections:
+            layout["Sections"] = sections
+        if cta_placement:
+            recommendations.append(f"CTA Placement: {cta_placement}")
+        if color_strategy:
+            colors["Strategy"] = color_strategy
+    
+    # Add page-type specific defaults if no search results
+    if not layout:
+        layout["Max Width"] = "1200px"
+        layout["Layout"] = "Responsive grid"
+    
+    if not recommendations:
+        recommendations = [
+            "Refer to MASTER.md for all design rules",
+            "Add specific overrides as needed for this page"
+        ]
+    
+    return {
+        "page_type": page_type,
+        "layout": layout,
+        "spacing": spacing,
+        "typography": typography,
+        "colors": colors,
+        "components": components,
+        "unique_components": unique_components,
+        "recommendations": recommendations
+    }
+
+
+def _detect_page_type(context: str, style_results: list) -> str:
+    """Detect page type from context and search results."""
+    context_lower = context.lower()
+    
+    # Check for common page type patterns
+    page_patterns = [
+        (["dashboard", "admin", "analytics", "data", "metrics", "stats", "monitor", "overview"], "Dashboard / Data View"),
+        (["checkout", "payment", "cart", "purchase", "order", "billing"], "Checkout / Payment"),
+        (["settings", "profile", "account", "preferences", "config"], "Settings / Profile"),
+        (["landing", "marketing", "homepage", "hero", "home", "promo"], "Landing / Marketing"),
+        (["login", "signin", "signup", "register", "auth", "password"], "Authentication"),
+        (["pricing", "plans", "subscription", "tiers", "packages"], "Pricing / Plans"),
+        (["blog", "article", "post", "news", "content", "story"], "Blog / Article"),
+        (["product", "item", "detail", "pdp", "shop", "store"], "Product Detail"),
+        (["search", "results", "browse", "filter", "catalog", "list"], "Search Results"),
+        (["empty", "404", "error", "not found", "zero"], "Empty State"),
+    ]
+    
+    for keywords, page_type in page_patterns:
+        if any(kw in context_lower for kw in keywords):
+            return page_type
+    
+    # Fallback: try to infer from style results
+    if style_results:
+        style_name = style_results[0].get("Style Category", "").lower()
+        best_for = style_results[0].get("Best For", "").lower()
+        
+        if "dashboard" in best_for or "data" in best_for:
+            return "Dashboard / Data View"
+        elif "landing" in best_for or "marketing" in best_for:
+            return "Landing / Marketing"
+    
+    return "General"
+
+
+# ============ CLI SUPPORT ============
+if __name__ == "__main__":
+    import argparse
+
+    parser = argparse.ArgumentParser(description="Generate Design System")
+    parser.add_argument("query", help="Search query (e.g., 'SaaS dashboard')")
+    parser.add_argument("--project-name", "-p", type=str, default=None, help="Project name")
+    parser.add_argument("--format", "-f", choices=["ascii", "markdown"], default="ascii", help="Output format")
+
+    args = parser.parse_args()
+
+    result = generate_design_system(args.query, args.project_name, args.format)
+    print(result)
diff --git a/.claude/skills/ui-ux-pro-max/scripts/search.py b/.claude/skills/ui-ux-pro-max/scripts/search.py
new file mode 100644
index 000000000..d782d315f
--- /dev/null
+++ b/.claude/skills/ui-ux-pro-max/scripts/search.py
@@ -0,0 +1,114 @@
+#!/usr/bin/env python3
+# -*- coding: utf-8 -*-
+"""
+UI/UX Pro Max Search - BM25 search engine for UI/UX style guides
+Usage: python search.py "<query>" [--domain <domain>] [--stack <stack>] [--max-results 3]
+       python search.py "<query>" --design-system [-p "Project Name"]
+       python search.py "<query>" --design-system --persist [-p "Project Name"] [--page "dashboard"]
+
+Domains: style, prompt, color, chart, landing, product, ux, typography, google-fonts
+Stacks: react, nextjs, vue, svelte, astro, swiftui, react-native, flutter, nuxtjs, nuxt-ui, html-tailwind, shadcn, jetpack-compose, threejs
+
+Persistence (Master + Overrides pattern):
+  --persist    Save design system to design-system/MASTER.md
+  --page       Also create a page-specific override file in design-system/pages/
+"""
+
+import argparse
+import sys
+import io
+from core import CSV_CONFIG, AVAILABLE_STACKS, MAX_RESULTS, search, search_stack
+from design_system import generate_design_system, persist_design_system
+
+# Force UTF-8 for stdout/stderr to handle emojis on Windows (cp1252 default)
+if sys.stdout.encoding and sys.stdout.encoding.lower() != 'utf-8':
+    sys.stdout = io.TextIOWrapper(sys.stdout.buffer, encoding='utf-8')
+if sys.stderr.encoding and sys.stderr.encoding.lower() != 'utf-8':
+    sys.stderr = io.TextIOWrapper(sys.stderr.buffer, encoding='utf-8')
+
+
+def format_output(result):
+    """Format results for Claude consumption (token-optimized)"""
+    if "error" in result:
+        return f"Error: {result['error']}"
+
+    output = []
+    if result.get("stack"):
+        output.append(f"## UI Pro Max Stack Guidelines")
+        output.append(f"**Stack:** {result['stack']} | **Query:** {result['query']}")
+    else:
+        output.append(f"## UI Pro Max Search Results")
+        output.append(f"**Domain:** {result['domain']} | **Query:** {result['query']}")
+    output.append(f"**Source:** {result['file']} | **Found:** {result['count']} results\n")
+
+    for i, row in enumerate(result['results'], 1):
+        output.append(f"### Result {i}")
+        for key, value in row.items():
+            value_str = str(value)
+            if len(value_str) > 300:
+                value_str = value_str[:300] + "..."
+            output.append(f"- **{key}:** {value_str}")
+        output.append("")
+
+    return "\n".join(output)
+
+
+if __name__ == "__main__":
+    parser = argparse.ArgumentParser(description="UI Pro Max Search")
+    parser.add_argument("query", help="Search query")
+    parser.add_argument("--domain", "-d", choices=list(CSV_CONFIG.keys()), help="Search domain")
+    parser.add_argument("--stack", "-s", choices=AVAILABLE_STACKS, help=f"Stack-specific search. Available: {', '.join(AVAILABLE_STACKS)}")
+    parser.add_argument("--max-results", "-n", type=int, default=MAX_RESULTS, help="Max results (default: 3)")
+    parser.add_argument("--json", action="store_true", help="Output as JSON")
+    # Design system generation
+    parser.add_argument("--design-system", "-ds", action="store_true", help="Generate complete design system recommendation")
+    parser.add_argument("--project-name", "-p", type=str, default=None, help="Project name for design system output")
+    parser.add_argument("--format", "-f", choices=["ascii", "markdown"], default="ascii", help="Output format for design system")
+    # Persistence (Master + Overrides pattern)
+    parser.add_argument("--persist", action="store_true", help="Save design system to design-system/MASTER.md (creates hierarchical structure)")
+    parser.add_argument("--page", type=str, default=None, help="Create page-specific override file in design-system/pages/")
+    parser.add_argument("--output-dir", "-o", type=str, default=None, help="Output directory for persisted files (default: current directory)")
+
+    args = parser.parse_args()
+
+    # Design system takes priority
+    if args.design_system:
+        result = generate_design_system(
+            args.query, 
+            args.project_name, 
+            args.format,
+            persist=args.persist,
+            page=args.page,
+            output_dir=args.output_dir
+        )
+        print(result)
+        
+        # Print persistence confirmation
+        if args.persist:
+            project_slug = args.project_name.lower().replace(' ', '-') if args.project_name else "default"
+            print("\n" + "=" * 60)
+            print(f"✅ Design system persisted to design-system/{project_slug}/")
+            print(f"   📄 design-system/{project_slug}/MASTER.md (Global Source of Truth)")
+            if args.page:
+                page_filename = args.page.lower().replace(' ', '-')
+                print(f"   📄 design-system/{project_slug}/pages/{page_filename}.md (Page Overrides)")
+            print("")
+            print(f"📖 Usage: When building a page, check design-system/{project_slug}/pages/[page].md first.")
+            print(f"   If exists, its rules override MASTER.md. Otherwise, use MASTER.md.")
+            print("=" * 60)
+    # Stack search
+    elif args.stack:
+        result = search_stack(args.query, args.stack, args.max_results)
+        if args.json:
+            import json
+            print(json.dumps(result, indent=2, ensure_ascii=False))
+        else:
+            print(format_output(result))
+    # Domain search
+    else:
+        result = search(args.query, args.domain, args.max_results)
+        if args.json:
+            import json
+            print(json.dumps(result, indent=2, ensure_ascii=False))
+        else:
+            print(format_output(result))
diff --git a/.dockerignore b/.dockerignore
index f1c74a2b5..15af35d04 100644
--- a/.dockerignore
+++ b/.dockerignore
@@ -1,10 +1,21 @@
 .venv/
 .git/
+.git-rewrite/
 .env
+config/.reload
+config/providers.json
+config/heartbeats.yaml
+config/smart-router.json
+.pytest_cache/
+.handoffs/
 __pycache__/
+**/__pycache__/
 *.pyc
 dashboard/data/
+dashboard/frontend/dist/
 workspace/
+backups/
+logs/
 ADWs/logs/
 ADWs/__pycache__/
 .claude/agent-memory/
@@ -12,5 +23,6 @@ ADWs/__pycache__/
 etus-boilerplate-agentic-engineer/
 social-media-skills/
 node_modules/
+**/node_modules/
 .DS_Store
 *.zip
diff --git a/.env.example b/.env.example
index 1ebe24fdf..6e346ffe4 100644
--- a/.env.example
+++ b/.env.example
@@ -10,13 +10,118 @@
 # a browser session. Keep it secret — grants full API access.
 # Generate with: python -c "import secrets; print(secrets.token_urlsafe(32))"
 # Usage: curl -H "Authorization: Bearer $DASHBOARD_API_TOKEN" ...
-DASHBOARD_API_TOKEN=
+#
+# On Swarm this comes from the stack's `environment:` section, not this
+# file — left commented out on purpose. entrypoint.sh now guards against an
+# empty value here clobbering the real one (confirmed live 2026-07-14: a
+# blank line here, copied verbatim into the config volume on first boot,
+# silently erased the Docker-injected token and broke every API call with
+# "Authentication required"), but there's no reason to keep the footgun
+# loaded — uncomment and set a value only for non-Swarm/local setups.
+# DASHBOARD_API_TOKEN=
 # Optional: which user the token impersonates (defaults to first admin)
 DASHBOARD_API_USER=
 
+# ── Approval Bridge Token (goal-ticket-unification) ──
+# Dedicated credential for POST /api/approvals/{id}/decision — the shared
+# Telegram approve/reject gate (publish + sub-goal decomposition). Deliberately
+# separate from DASHBOARD_API_TOKEN: an agent inherits its own env, and if the
+# approval endpoint accepted the admin token, an agent could approve its own
+# publish. Only the dashboard (validates) and the telegram bot in
+# TELEGRAM_MODE=provider (sends the decision) should ever have this — never
+# the scheduler, which spawns agent subprocesses (see provider_fallback.py
+# _build_agent_run_env, which strips it from any agent's env regardless).
+# Generate with: python -c "import secrets; print(secrets.token_urlsafe(32))"
+# APPROVAL_BRIDGE_TOKEN=
+# Telegram user ids allowed to press an approve/reject button — comma or
+# semicolon-separated. Per-individual, not per-chat/group (Vault V3).
+# APPROVAL_APPROVER_IDS=
+
+# ── Postiz publish bridge (goal-ticket-unification + social-media-production) ──
+# Used only by the dashboard (never by agent subprocesses — POSTIZ_API_KEY is
+# denylisted in provider_fallback.py's agent env). POSTIZ_URL is the Postiz
+# origin (without /public/v1); POSTIZ_API_KEY is generated in its UI. When
+# more than one account exists for a platform, pin the intended one via the
+# POSTIZ_INTEGRATION_*_ID vars below (all four platforms MediaJob supports).
+# Media referenced by URL (legacy ticket-publish flow) is fail-closed: only
+# HTTPS hosts explicitly listed in POSTIZ_ALLOWED_MEDIA_HOSTS are accepted,
+# preventing an agent-controlled URL from becoming an SSRF primitive in
+# Postiz. MediaJob's own render upload (social-media-production) instead
+# streams the local MP4 directly via POST /public/v1/upload — it never goes
+# through this URL-allowlist path.
+#
+# All of the below can also be set via the admin-only, authenticated
+# PUT /api/integrations/core/postiz endpoint (masked GET, "keep current on
+# blank/masked submit") instead of editing this file by hand — see
+# dashboard/backend/routes/integrations_core_postiz.py.
+# POSTIZ_URL=https://postiz.example.com
+# POSTIZ_API_KEY=
+# POSTIZ_INTEGRATION_INSTAGRAM_ID=
+# POSTIZ_INTEGRATION_YOUTUBE_ID=
+# POSTIZ_INTEGRATION_LINKEDIN_ID=
+# POSTIZ_INTEGRATION_TIKTOK_ID=
+# POSTIZ_ALLOWED_MEDIA_HOSTS=cdn.example.com,storage.example.com
+# POSTIZ_REQUEST_TIMEOUT_SECONDS=120
+# POSTIZ_UPLOAD_TIMEOUT_SECONDS=900
+# POSTIZ_PUBLISH_TIMEOUT_SECONDS=90
+# POSTIZ_PUBLISH_POLL_SECONDS=3
+# Telegram bridge timeout must exceed POSTIZ_PUBLISH_TIMEOUT_SECONDS.
+# APPROVAL_DECISION_TIMEOUT_SECONDS=105
+# Only needed if POSTIZ_URL resolves to a private/internal/loopback address
+# (e.g. an internal Swarm alias) — the admin config endpoint's SSRF guard
+# blocks those by default. Comma-separated hostnames.
+# POSTIZ_URL_ALLOWED_INTERNAL_HOSTS=
+
+# ── social-media-production (MediaJob pipeline: brief -> HyperFrames render
+# -> Postiz draft/schedule) ──
+# MEDIA_WORKSPACE is a persistent volume shared between the dashboard
+# (streaming/upload) and the media-worker service (rendering) — never a
+# tmpfs or ephemeral container path. MEDIA_TIMEZONE is the timezone users
+# enter scheduled_at in; MediaJob always converts to UTC before calling
+# Postiz (never relies on the container's implicit local timezone).
+# MEDIA_WORKSPACE=/workspace/media
+# MEDIA_TIMEZONE=America/Bahia
+# MEDIA_RENDER_CONCURRENCY=1
+# MEDIA_JOB_TIMEOUT_SECONDS=3600
+# MEDIA_MAX_FILE_SIZE_BYTES=1073741824
+# MEDIA_RETENTION_DAYS=7
+# draft: never auto-publishes (default, safe for smoke tests). schedule:
+# allowed only once a job is approved, has a future scheduled_at, and the
+# target Postiz integration is active — see routes/media_jobs.py's /schedule.
+# SOCIAL_DEFAULT_POST_MODE=draft
+
+# ── MinIO / S3 media host (int-minio skill, Option A) ──
+# Publishing agents upload generated media here and pass the public URL to
+# Postiz. The bucket must allow public read (bucket policy). Unlike
+# POSTIZ_API_KEY, MINIO_* IS available to agent subprocesses — they need it to
+# upload (uploading to a bucket is not the publish action; the Instagram post
+# itself still requires human approval). Whatever host serves the public URL
+# must also appear in POSTIZ_ALLOWED_MEDIA_HOSTS above.
+# MINIO_ENDPOINT=https://s3.example.com
+# MINIO_ACCESS_KEY=
+# MINIO_SECRET_KEY=
+# MINIO_BUCKET=post
+# MINIO_PUBLIC_BASE=https://s3.example.com
+# MINIO_SET_PUBLIC_ACL=0
+
 # Dashboard session secret. Required in production.
 EVONEXUS_SECRET_KEY=
 
+# ── Dashboard resource limits (VPS / Docker Swarm) ──
+# Override defaults via Portainer env vars when deploying the stack.
+# EVONEXUS_DASHBOARD_CPUS: max CPUs for the dashboard container
+#   (default 2 — dashboard runs Flask + terminal-server + agent PTYs)
+# EVONEXUS_DASHBOARD_MEMORY: max memory for the dashboard container
+#   (default 2048M — 1GB crashes with 2-3 agent tabs open)
+# EVONEXUS_DASHBOARD_CPUS=2
+# EVONEXUS_DASHBOARD_MEMORY=2048M
+
+# ── Terminal-server guard-rails ──
+# Max simultaneous Claude/openclaude PTY sessions (each uses 200-400MB).
+# Old sessions without an active viewer are reaped after the TTL expires.
+# TERMINAL_MAX_ACTIVE_SESSIONS=4
+# TERMINAL_DETACHED_TTL_MINUTES=30
+
 # Comma-separated list of allowed browser origins for the Flask dashboard.
 # Use "*" for local development; set explicit origins in production.
 CORS_ALLOWED_ORIGINS=*
@@ -26,24 +131,52 @@ CORS_ALLOWED_ORIGINS=*
 # Configure via dashboard (Providers page) or edit config/providers.json.
 # The active provider determines which CLI (claude or openclaude) is used.
 #
+# HOW KEY RESOLUTION WORKS (read this before debugging a 401):
+#   1. Each provider entry in config/providers.json has its own env_vars —
+#      including its own OPENAI_API_KEY. That key ALWAYS wins for that
+#      provider. The Providers page in the dashboard writes it for you.
+#   2. Keys below in this .env are FALLBACKS, used only when the provider
+#      entry has no usable key (empty or "[REDACTED]" placeholder).
+#   3. NVIDIA_API_KEY from this .env is only applied to *.nvidia.com
+#      endpoints — it is never sent to other gateways.
+# So: to fix an invalid/expired key for one provider, update it on the
+# Providers page (or in config/providers.json), not here.
+#
 # Anthropic (default): no extra config needed — uses native 'claude' CLI.
 #
-# OpenRouter (200+ models):
+# OpenRouter (200+ models) — key: https://openrouter.ai/settings/keys
 #   CLAUDE_CODE_USE_OPENAI=1
 #   OPENAI_BASE_URL=https://openrouter.ai/api/v1
 #   OPENAI_API_KEY=sk-or-...
 #   OPENAI_MODEL=anthropic/claude-sonnet-4
 #
-# OpenAI:
+# OpenAI — key: https://platform.openai.com/api-keys
 #   CLAUDE_CODE_USE_OPENAI=1
 #   OPENAI_API_KEY=sk-...
 #   OPENAI_MODEL=gpt-4.1
 #
-# Google Gemini:
+# Google Gemini — key: https://aistudio.google.com/apikey
 #   CLAUDE_CODE_USE_GEMINI=1
 #   GEMINI_API_KEY=...
 #   GEMINI_MODEL=gemini-2.5-pro
 #
+# NVIDIA NIM — key: https://build.nvidia.com (Get API Key on any model page)
+#   CLAUDE_CODE_USE_OPENAI=1
+#   OPENAI_BASE_URL=https://integrate.api.nvidia.com/v1
+#   NVIDIA_API_KEY=nvapi-...
+#   OPENAI_MODEL=<model id from build.nvidia.com>
+#
+# OmniRoute (self-hosted gateway, 237+ providers with auto-fallback):
+#   Deploy: https://github.com/diegosouzapw/OmniRoute — see the optional
+#   `omniroute` service in evonexus-vps.stack.example.yml.
+#   Key: OmniRoute dashboard → Endpoints → create an API key (sk-...).
+#   Keys are stored in OmniRoute's SQLite volume — wiping the volume
+#   invalidates every key; generate a new one after a reset.
+#   CLAUDE_CODE_USE_OPENAI=1
+#   OPENAI_BASE_URL=http://omniroute:20128/v1   # Swarm-internal DNS alias
+#   OPENAI_API_KEY=sk-...                        # key from the step above
+#   OPENAI_MODEL=auto                            # let OmniRoute route+fallback
+#
 # Install openclaude for non-Anthropic providers:
 #   npm install -g @gitlawb/openclaude
 
@@ -124,6 +257,13 @@ EVOLUTION_API_KEY=
 # Your Evolution Go instance URL and API key
 EVOLUTION_GO_URL=
 EVOLUTION_GO_KEY=
+# WhatsApp instance to send FROM (Evolution Go). Defaults to "sistema-britto"
+# in code if unset — override only if your instance is named differently.
+EVOLUTION_GO_INSTANCE=
+# Superadmin's WhatsApp number to send TO (E.164 without "+", e.g. 5511999999999).
+# Used by the Operacional-diário routines (Review Todoist, Email Triage,
+# Sync Meetings, Status Diário) and by daily_status_report.py.
+WHATSAPP_PHONE=
 
 # ── Evo AI CRM ──────────────────────────────────────
 # Your Evo AI CRM instance URL and access token
diff --git a/.github/workflows/docker-image.yml b/.github/workflows/docker-image.yml
new file mode 100644
index 000000000..d7600d453
--- /dev/null
+++ b/.github/workflows/docker-image.yml
@@ -0,0 +1,56 @@
+name: Build and Push Docker Images to Docker Hub
+
+on:
+  push:
+    branches:
+      - main
+    tags:
+      - 'v*'
+
+jobs:
+  build-and-push:
+    runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        include:
+          - image: evo-nexus-dashboard
+            dockerfile: ./Dockerfile.swarm.dashboard
+          - image: evo-nexus-runtime
+            dockerfile: ./Dockerfile.swarm
+    steps:
+      - name: Checkout do código
+        uses: actions/checkout@v4
+
+      - name: Set up QEMU
+        uses: docker/setup-qemu-action@v3
+
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v3
+
+      - name: Login no Docker Hub
+        uses: docker/login-action@v3
+        with:
+          username: ${{ secrets.DOCKERHUB_USERNAME }}
+          password: ${{ secrets.DOCKERHUB_TOKEN }}
+
+      - name: Docker meta
+        id: meta
+        uses: docker/metadata-action@v5
+        with:
+          images: ${{ secrets.DOCKERHUB_USERNAME }}/${{ matrix.image }}
+          tags: |
+            type=raw,value=latest,enable=${{ github.ref == 'refs/heads/main' }}
+            type=sha,prefix=,format=short,enable=${{ github.ref == 'refs/heads/main' }}
+            type=semver,pattern={{version}},enable=${{ startsWith(github.ref, 'refs/tags/') }}
+            type=ref,event=tag,enable=${{ startsWith(github.ref, 'refs/tags/') }}
+
+      - name: Build e Push da Imagem
+        uses: docker/build-push-action@v5
+        with:
+          context: .
+          file: ${{ matrix.dockerfile }}
+          push: true
+          tags: ${{ steps.meta.outputs.tags }}
+          labels: ${{ steps.meta.outputs.labels }}
+          cache-from: type=gha
+          cache-to: type=gha,mode=max
diff --git a/.github/workflows/docker-publish-britto.yml b/.github/workflows/docker-publish-britto.yml
new file mode 100644
index 000000000..cf4bc86ed
--- /dev/null
+++ b/.github/workflows/docker-publish-britto.yml
@@ -0,0 +1,92 @@
+name: Build & Publish (Docker Hub Sistema Britto)
+
+# Builda as imagens Swarm (evo-nexus-runtime e evo-nexus-dashboard) e publica
+# no SEU Docker Hub, a partir da SUA branch. Diferente da docker-publish.yml
+# oficial (que publica no namespace evoapicloud), esta usa o seu usuário via
+# secrets, então é seguro rodar no seu fork/branch.
+#
+# Secrets necessários no repositório (Settings → Secrets and variables → Actions):
+#   * DOCKERHUB_USERNAME  — seu usuário do Docker Hub (também vira o namespace)
+#   * DOCKERHUB_TOKEN     — Access Token do Docker Hub (Account Settings → Security)
+#
+# Triggers:
+#   * push na branch main  -> publica :latest e :sha-xxxx
+#   * push de tag vX.Y.Z                                     -> publica :vX.Y.Z e :latest
+#   * disparo manual (workflow_dispatch)                     -> builda e publica
+
+on:
+  push:
+    branches: [main]
+    tags: ['v*']
+  workflow_dispatch:
+
+env:
+  REGISTRY: docker.io
+
+jobs:
+  build-and-push:
+    name: Build & push ${{ matrix.image }}
+    runs-on: ubuntu-latest
+    permissions:
+      contents: read
+    strategy:
+      fail-fast: false
+      matrix:
+        include:
+          - image: evo-nexus-runtime
+            dockerfile: Dockerfile.swarm
+          - image: evo-nexus-dashboard
+            dockerfile: Dockerfile.swarm.dashboard
+          - image: evo-nexus-media-worker
+            dockerfile: Dockerfile.media-worker
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Set up QEMU (arm64)
+        uses: docker/setup-qemu-action@v3
+        with:
+          platforms: arm64
+
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v3
+
+      - name: Login to Docker Hub
+        uses: docker/login-action@v3
+        with:
+          registry: ${{ env.REGISTRY }}
+          username: ${{ secrets.DOCKERHUB_USERNAME }}
+          password: ${{ secrets.DOCKERHUB_TOKEN }}
+
+      - name: Extract metadata (tags, labels)
+        id: meta
+        uses: docker/metadata-action@v5
+        with:
+          images: ${{ env.REGISTRY }}/${{ secrets.DOCKERHUB_USERNAME }}/${{ matrix.image }}
+          flavor: |
+            latest=true
+          tags: |
+            type=ref,event=branch
+            type=ref,event=tag
+            type=semver,pattern={{version}}
+            type=sha,prefix=sha-,format=short
+
+      - name: Build and push
+        uses: docker/build-push-action@v5
+        with:
+          context: .
+          file: ${{ matrix.dockerfile }}
+          # amd64 só já cobre VPS comum; adicione linux/arm64 se sua VPS for ARM
+          platforms: linux/amd64
+          push: true
+          tags: ${{ steps.meta.outputs.tags }}
+          labels: ${{ steps.meta.outputs.labels }}
+          # CACHEBUST muda a cada run e invalida a camada `npm install -g
+          # @anthropic-ai/claude-code / @gitlawb/openclaude@latest / ...` —
+          # sem isso, cache-from/cache-to type=gha reaproveitaria a camada
+          # antiga entre builds e "@latest" nunca puxaria versão nova.
+          build-args: |
+            CACHEBUST=${{ github.run_id }}
+          cache-from: type=gha,scope=${{ matrix.image }}
+          cache-to: type=gha,scope=${{ matrix.image }},mode=max
diff --git a/.gitignore b/.gitignore
index 9cc7035be..9b000f22c 100644
--- a/.gitignore
+++ b/.gitignore
@@ -62,6 +62,13 @@ dashboard/frontend/node_modules/
 dashboard/terminal-server/node_modules/
 dashboard/frontend/dist/
 
+# social-media-production: media-worker's pinned HyperFrames install +
+# downloaded chrome-headless-shell binary — package.json/package-lock.json
+# ARE tracked (deterministic install source of truth), the resolved
+# node_modules/browser download are not.
+media_worker/node_modules/
+media_worker/chrome-headless-shell/
+
 # ── Evo Method (separate project) ────────
 _evo/
 _evo-output/
@@ -134,3 +141,29 @@ plugins/*/
 
 # ── Brain Repo raw transcripts (not backed up to brain repo) ──
 memory/raw-transcripts/
+
+# ── Private root-level workspace data (business content, runtime) ──
+# These top-level folders hold the user's private operational output and must
+# never be committed (especially not in a public PR). Mirrors workspace/** rule.
+/community/
+/courses/
+/daily-logs/
+/finance/
+/logs/
+/meetings/
+/projects/
+/social/
+/strategy/
+
+# ── Local backups & reload triggers ──
+*.bak.telegram
+.env.bak*
+config/.reload
+config/social.env
+
+# ── One-off integration test scaffolding (may contain hardcoded creds) ──
+scripts/ghost_integration_test.py
+.git-rewrite
+
+# Local Portainer import with Postiz secrets
+/postiz-vps.env
diff --git a/ADWs/logs/health-report-2026-06-16.md b/ADWs/logs/health-report-2026-06-16.md
new file mode 100644
index 000000000..8ddcdb1ad
--- /dev/null
+++ b/ADWs/logs/health-report-2026-06-16.md
@@ -0,0 +1,169 @@
+# ═══════════════════════════════════════════════════════════════════════════
+# RELATÓRIO DE DIAGNÓSTICO — EvoNexus
+# Gerado: 2026-06-16
+# ═══════════════════════════════════════════════════════════════════════════
+
+## 1. RESUMO EXECUTIVO
+
+| Métrica | Valor |
+|---------|-------|
+| Total de heartbeat runs (all time) | 421 |
+| Success | 294 (70%) |
+| Fail | 123 (29%) |
+| Running (presos) | 4 |
+| Heartbeats habilitados | 21 |
+| Agentes com falha recorrente | 10+ |
+
+**Problema #1**: 29% de falha nos heartbeats — a maioria por "exit code 1" (erro genérico do openclaude).
+**Problema #2**: zara-2h lidera com 20 falhas (nunca conseguiu completar).
+**Problema #3**: 4 heartbeats "running" travados no DB (zombie runs).
+**Problema #4**: Nenhum mecanismo de retry inteligente — quando falha, só alerta no Telegram.
+
+---
+
+## 2. FALHAS POR HEARTBEAT (hoje, 2026-06-16)
+
+### 2.1. Falhas CRÍTICAS (100% fail, nunca success)
+
+| Heartbeat | Fails | Causa | Ação |
+|-----------|-------|-------|------|
+| autopilot-bolt-executor | 10/10 | exit code 1 (openclaude crash) | Ver agent file, provavelmente .md corrompido |
+| autopilot-compass-planner | 5/5 | exit code 1 | Ver agent file |
+| autopilot-grid-tester | 5/5 | exit code 1 | Ver agent file |
+| autopilot-raven-critic | 5/5 | exit code 1 | Ver agent file |
+| autopilot-vault-security | 5/5 | exit code 1 | Ver agent file |
+
+### 2.2. Falhas PARCIAIS (mix de success/fail)
+
+| Heartbeat | Fails | Success | Causa | Ação |
+|-----------|-------|---------|-------|------|
+| zara-2h | 20 | 3 | "unknown option '---" | Agent .md corrompido (parse error) |
+| autopilot-oath-verifier | 8 | 2 | exit code 1 | Ver agent file |
+| autopilot-pixel-social-media | 7 | 2 | exit code 1 | Ver agent file |
+| autopilot-hawk-debugger | 7 | 4 | exit code 1 | Ver agent file |
+| autopilot-helm-conductor | 6 | 4 | exit code 1 | Ver agent file |
+| autopilot-mako-marketing | 6 | 5 | exit code 1 | Ver agent file |
+| autopilot-sage-strategy | 6 | 5 | context window warning + exit code 1 | Adicionar modelo na context window table |
+| autopilot-quill-writer | 5 | 6 | exit code 1 | Ver agent file |
+| autopilot-scout-explorer | 5 | 5 | context window warning + exit code 1 | Adicionar modelo na context window table |
+| autopilot-clawdia-assistant | 4 | 1 | exit code 1 | Ver agent file |
+| autopilot-dex-data | 4 | 1 | context window warning + exit code 1 | Adicionar modelo na context window table |
+
+### 2.3. Funcionando OK
+
+| Heartbeat | Success | Observação |
+|-----------|---------|------------|
+| integrations-health | 31 | 100% |
+| zara-2h | 3 | 3/23 — quase sempre falha |
+
+---
+
+## 3. CAUSAS RAIZ IDENTIFICADAS
+
+### 3.1. "exit code 1" genérico (maioria das falhas)
+
+O `heartbeat_runner.py` chama `openclaude --print --max-turns N --dangerously-skip-permissions --output-format json -- <prompt>`. Quando o agente .md tem conteúdo mal-formado (ex: YAML frontmatter quebrado, caracteres especiais não-escapados), o openclaude retorna exit code 1 sem output legível.
+
+**Padrão**: heartbeats que NUNCA dão success (bolt, compass, grid, raven, vault) provavelmente têm .md corrompido.
+
+**Solução**: Script de validação que lê cada .claude/agents/*.md e tenta parse do frontmatter + body.
+
+### 3.2. "context window warning" (sage, scout, clawdia, dex)
+
+O modelo `minimaxai/minimax-m3` não está na tabela de context windows do openclaude. Isso causa warning repetido e pode levar a truncation silencioso → resposta vazia → exit code 1.
+
+**Solução**: Adicionar `minimaxai/minimax-m3` à context window table.
+
+### 3.3. zara-2h: "unknown option '---"
+
+O agent file do zara-cs provavelmente tem conteúdo que o openclaude interpreta como CLI option em vez de system prompt. O `--` separator pode estar sendo mal-parsado.
+
+**Solução**: Revisar `.claude/agents/zara-cs.md` e limpar caracteres especiais.
+
+### 3.4. 4 heartbeats "running" travados
+
+Zombie runs no DB que nunca completam. Provavelmente heartbeats que foram interrompidos (processo morto) sem cleanup.
+
+**Solução**: Script de limpeza que marca runs "running" com mais de 2h como "timeout".
+
+### 3.5. Sem retry inteligente
+
+Quando um heartbeat falha, não há retry. O próximo disparo só acontece no próximo intervalo (15min a 6h). Para heartbeats críticos, isso é inaceitável.
+
+**Solução**: Implementar retry com backoff exponencial (1min, 2min, 4min) antes de desistir.
+
+### 3.6. Sem report de sucesso
+
+Hoje só recebemos alertas de falha no Telegram. Não há visibilidade do que está funcionando.
+
+**Solução**: Já implementado `_step_report_success` — precisa ser deployado.
+
+### 3.7. Concorrência → 429
+
+Múltiplos heartbeats disparando simultaneamente contra o mesmo modelo NVIDIA → burst 429.
+
+**Solução**: Já implementado per-model inflight lock — precisa ser deployado.
+
+---
+
+## 4. PLANO DE AÇÃO (ordem de prioridade)
+
+### P0 — CRÍTICO (faz agora)
+
+1. **Validar todos os agent .md files** — script que identifica corrompidos
+2. **Limpar zombie runs** — marca runs "running" >2h como "timeout"
+3. **Adicionar minimax-m3 na context window table** — elimina warning
+4. **Corrigir zara-cs.md** — remover caracteres que quebram parsing
+5. **Reiniciar app.py** — aplica per-model lock + success reports
+
+### P1 — ALTO (faz esta semana)
+
+6. **Retry inteligente** — 3 tentativas com backoff exponencial por heartbeat
+7. **Script de validação de agentes** — roda no scheduler semanalmente
+8. **Mover heartbeats 100% fail para disabled** — evita ruído (bolt, compass, grid, raven, vault)
+
+### P2 — MÉDIO (faz este mês)
+
+9. **Goal "EvoNexus Self-Heal"** — goal de sistema que auto-corrige problemas
+10. **Dashboard de saúde** — página que mostra success rate por heartbeat
+11. **Alerta de degradação** — se success rate < 50% em 24h, alerta
+
+---
+
+## 5. DADOS TÉCNICOS
+
+### 5.1. Chain NVIDIA (11 modelos, pós-remoção v4-pro)
+
+```
+1.  minimaxai/minimax-m3
+2.  stepfun-ai/step-3.7-flash
+3.  moonshotai/kimi-k2.6
+4.  deepseek-ai/deepseek-v4-flash
+5.  z-ai/glm-5.1
+6.  nvidia/nemotron-3-ultra-550b-a55b
+7.  nvidia/nemotron-3-super-120b-a12b
+8.  qwen/qwen3.5-122b-a10b
+9.  qwen/qwen3.5-397b-a17b
+10. openai/gpt-oss-120b
+11. microsoft/phi-4-multimodal-instruct
+12. stepfun-ai/step-3.5-flash
+```
+
+### 5.2. Rotinas (metrics.json)
+
+| Rotina | Runs | Success Rate | Custo |
+|--------|------|-------------|-------|
+| uso_modelos_dia | 18 | 83% | $0.0014 |
+| ai-news-daily-sage | 4 | 100% | $3.19 |
+| memory-sync | 12 | 92% | $0.66 |
+| good-morning | 10 | 90% | $0.62 |
+| end-of-day | 10 | 100% | $0.23 |
+
+### 5.3. Processos
+
+| Processo | PID | Status |
+|----------|-----|--------|
+| scheduler.py | 2079434 | ✅ running |
+| app.py (Flask) | 3653906 | ✅ running |
+| terminal-server | 3595718 | ✅ running |
+| uso_modelos_dia | 3662520 | ✅ completed (9/12 OK) |
diff --git a/ADWs/routines/approval_queue.py b/ADWs/routines/approval_queue.py
new file mode 100644
index 000000000..76cd3013f
--- /dev/null
+++ b/ADWs/routines/approval_queue.py
@@ -0,0 +1,167 @@
+#!/usr/bin/env python3
+"""
+ADWs/routines/approval_queue.py — Fila de aprovação para posts e publicações.
+
+Quando um agente (mako, pixel, social) gera conteúdo para publicar,
+o conteúdo vai pra fila de aprovação em vez de ser publicado direto.
+O Telegram notifica você com o conteúdo + comandos para aprovar/reprovar.
+
+Tabela no DB: approval_queue
+    id, content_type, title, body, media_url, agent, status, created_at, decided_at
+
+Comandos:
+    /aprovar <id> — aprova e publica
+    /reprovar <id> — reprova e descarta
+    /fila — mostra pendentes
+"""
+from __future__ import annotations
+
+import json
+import sqlite3
+import sys
+from datetime import datetime, timezone
+from pathlib import Path
+
+WORKSPACE = Path(__file__).resolve().parent.parent.parent
+DB_PATH = WORKSPACE / "dashboard" / "data" / "evonexus.db"
+
+
+def _get_db():
+    conn = sqlite3.connect(str(DB_PATH), timeout=30)
+    conn.row_factory = sqlite3.Row
+    conn.execute("PRAGMA journal_mode=WAL")
+    return conn
+
+
+def _ensure_table():
+    conn = _get_db()
+    conn.execute("""
+        CREATE TABLE IF NOT EXISTS approval_queue (
+            id INTEGER PRIMARY KEY AUTOINCREMENT,
+            content_type VARCHAR(50) NOT NULL,
+            title VARCHAR(500),
+            body TEXT,
+            media_url VARCHAR(500),
+            agent VARCHAR(100),
+            status VARCHAR(20) DEFAULT 'pending',
+            created_at VARCHAR(30),
+            decided_at VARCHAR(30),
+            rejection_reason VARCHAR(500)
+        )
+    """)
+    conn.commit()
+    conn.close()
+
+
+def add_to_queue(content_type: str, title: str = "", body: str = "",
+                  media_url: str = "", agent: str = "") -> int:
+    """Add content to approval queue. Returns the queue item id."""
+    _ensure_table()
+    conn = _get_db()
+    now = datetime.now(timezone.utc).strftime("%Y-%m-%dT%H:%M:%S.%fZ")
+    cur = conn.execute("""
+        INSERT INTO approval_queue (content_type, title, body, media_url, agent, status, created_at)
+        VALUES (?, ?, ?, ?, ?, 'pending', ?)
+    """, (content_type, title, body, media_url, agent, now))
+    conn.commit()
+    item_id = cur.lastrowid or 0
+    conn.close()
+    return item_id
+
+
+def get_pending() -> list[dict]:
+    """Get all pending approval items."""
+    _ensure_table()
+    conn = _get_db()
+    rows = conn.execute(
+        "SELECT * FROM approval_queue WHERE status='pending' ORDER BY created_at DESC LIMIT 20"
+    ).fetchall()
+    conn.close()
+    return [dict(r) for r in rows]
+
+
+def approve(item_id: int) -> bool:
+    """Approve and item. Returns True if found."""
+    conn = _get_db()
+    now = datetime.now(timezone.utc).strftime("%Y-%m-%dT%H:%M:%S.%fZ")
+    cur = conn.execute(
+        "UPDATE approval_queue SET status='approved', decided_at=? WHERE id=? AND status='pending'",
+        (now, item_id)
+    )
+    conn.commit()
+    ok = cur.rowcount > 0
+    conn.close()
+    return ok
+
+
+def reject(item_id: int, reason: str = "") -> bool:
+    """Reject an item. Returns True if found."""
+    conn = _get_db()
+    now = datetime.now(timezone.utc).strftime("%Y-%m-%dT%H:%M:%S.%fZ")
+    cur = conn.execute(
+        "UPDATE approval_queue SET status='rejected', decided_at=?, rejection_reason=? WHERE id=? AND status='pending'",
+        (now, reason, item_id)
+    )
+    conn.commit()
+    ok = cur.rowcount > 0
+    conn.close()
+    return ok
+
+
+def get_stats() -> dict:
+    """Get approval queue stats."""
+    _ensure_table()
+    conn = _get_db()
+    rows = conn.execute(
+        "SELECT status, COUNT(*) as cnt FROM approval_queue GROUP BY status"
+    ).fetchall()
+    conn.close()
+    return {r["status"]: r["cnt"] for r in rows}
+
+
+def format_telegram_notification(item: dict) -> str:
+    """Format a queue item for Telegram notification."""
+    ct = item.get("content_type", "post")
+    title = item.get("title", "Sem título")[:100]
+    body = item.get("body", "")[:300]
+    agent = item.get("agent", "sistema")
+    item_id = item["id"]
+
+    return (
+        f"🔔 <b>Aprovação Pendente</b>\n\n"
+        f"📝 <b>{title}</b> ({ct})\n"
+        f"🤖 Por: {agent}\n"
+        f"📋 {body}\n\n"
+        f"✅ <code>/aprovar {item_id}</code>\n"
+        f"❌ <code>/reprovar {item_id}</code>"
+    )
+
+
+def format_pending_list(items: list[dict]) -> str:
+    """Format pending items list for Telegram."""
+    if not items:
+        return "📋 Fila de aprovação: vazia ✨"
+
+    lines = [f"📋 <b>Fila de Aprovação</b> ({len(items)} pendentes)\n"]
+    for item in items[:10]:
+        title = item.get("title", "Sem título")[:60]
+        ct = item.get("content_type", "?")
+        agent = item.get("agent", "?")
+        lines.append(f"  #{item['id']} | {ct} | {title} | 🤖 {agent}")
+
+    if len(items) > 10:
+        lines.append(f"\n... e mais {len(items) - 10}")
+
+    lines.append(f"\n✅ <code>/aprovar &lt;id&gt;</code> | ❌ <code>/reprovar &lt;id&gt;</code>")
+    return "\n".join(lines)
+
+
+if __name__ == "__main__":
+    # Quick test
+    _ensure_table()
+    stats = get_stats()
+    print(f"Stats: {stats}")
+    pending = get_pending()
+    print(f"Pending: {len(pending)}")
+    for p in pending[:3]:
+        print(f"  #{p['id']} | {p['content_type']} | {p.get('title','')[:50]}")
diff --git a/ADWs/routines/custom/ai_news_daily_draft.py b/ADWs/routines/custom/ai_news_daily_draft.py
new file mode 100644
index 000000000..e0907f9c3
--- /dev/null
+++ b/ADWs/routines/custom/ai_news_daily_draft.py
@@ -0,0 +1,221 @@
+#!/usr/bin/env python3
+"""ADW: AI News Daily Draft -- cria draft diario e pede aprovacao | @sage/@quill/@raven/@mako"""
+
+import json
+import os
+import sys
+from datetime import datetime
+from pathlib import Path
+
+sys.path.insert(0, os.path.dirname(os.path.dirname(os.path.dirname(os.path.abspath(__file__)))))
+from runner import banner, run_claude, send_telegram, summary  # noqa: E402
+
+
+WORKSPACE = Path(__file__).resolve().parents[3]
+AI_NEWS_DIR = WORKSPACE / "workspace" / "marketing" / "ai-news"
+QUEUE_PATH = AI_NEWS_DIR / "queue.json"
+DRAFTS_DIR = AI_NEWS_DIR / "drafts"
+
+
+def _today() -> str:
+    return datetime.now().strftime("%Y-%m-%d")
+
+
+def _notify(text: str) -> None:
+    chat_id = os.environ.get("TELEGRAM_CHAT_ID")
+    if chat_id:
+        send_telegram(text, chat_id=chat_id)
+
+
+def _load_next_item() -> dict:
+    if not QUEUE_PATH.exists():
+        raise FileNotFoundError(f"Fila nao encontrada: {QUEUE_PATH}")
+    data = json.loads(QUEUE_PATH.read_text(encoding="utf-8"))
+    items = data.get("items", [])
+    for item in sorted(items, key=lambda x: x.get("priority", 999)):
+        if item.get("status") in ("queued", "ready"):
+            return item
+    raise RuntimeError("Fila sem itens queued/ready")
+
+
+def _update_queue_item(item_id: str, updates: dict) -> None:
+    data = json.loads(QUEUE_PATH.read_text(encoding="utf-8"))
+    for item in data.get("items", []):
+        if item.get("id") == item_id:
+            item.update(updates)
+            break
+    else:
+        raise RuntimeError(f"Item nao encontrado na fila: {item_id}")
+    data["updated_at"] = datetime.now().isoformat()
+    QUEUE_PATH.write_text(json.dumps(data, ensure_ascii=False, indent=2) + "\n", encoding="utf-8")
+
+
+def _write_result(path: Path, result: dict) -> None:
+    path.parent.mkdir(parents=True, exist_ok=True)
+    stdout = result.get("stdout", "") or ""
+    path.write_text(stdout.strip() + "\n", encoding="utf-8")
+
+
+def _has_substantive_output(path: Path, min_chars: int = 400) -> bool:
+    if not path.exists():
+        return False
+    text = path.read_text(encoding="utf-8").strip()
+    weak_starts = (
+        "Vou ler ",
+        "Vou começar ",
+        "Let me ",
+    )
+    if len(text) < min_chars:
+        return False
+    return not text.startswith(weak_starts)
+
+
+def main() -> None:
+    banner("AI News Daily Draft", "fila -> draft Ghost -> aprovacao Telegram")
+    DRAFTS_DIR.mkdir(parents=True, exist_ok=True)
+
+    item = _load_next_item()
+    item_id = item["id"]
+    today = _today()
+    run_dir = DRAFTS_DIR / f"{today}-{item_id}"
+    run_dir.mkdir(parents=True, exist_ok=True)
+
+    selection_path = run_dir / "01-sage-selection.md"
+    draft_path = run_dir / "02-quill-draft.md"
+    review_path = run_dir / "03-raven-review.md"
+    final_path = run_dir / "04-final-ghost-brief.md"
+
+    item_json = json.dumps(item, ensure_ascii=False, indent=2)
+    results = []
+    _update_queue_item(item_id, {
+        "status": "drafting",
+        "draft_started_at": datetime.now().isoformat(),
+        "draft_dir": str(run_dir),
+    })
+
+    sage_result = run_claude(
+        f"""
+Voce e Sage. Selecione e refine este item da fila para o AI News de hoje:
+
+{item_json}
+
+Leia tambem {QUEUE_PATH} para contexto.
+Escreva {selection_path} com:
+- tese editorial
+- por que isso importa agora
+- promessa do post
+- publico-alvo
+- 3 fontes/links a validar
+- angulo Sistema Britto/Evolution
+""".strip(),
+        log_name="ai-news-daily-sage",
+        timeout=600,
+        agent="sage-strategy",
+    )
+    results.append(sage_result)
+    _write_result(selection_path, sage_result)
+
+    quill_result = run_claude(
+        f"""
+Voce e Quill. Leia {selection_path}.
+
+Escreva o blogpost AI News em portugues BR em {draft_path}.
+Formato:
+- titulo SEO
+- slug sugerido
+- meta description
+- HTML/Markdown do artigo
+- fontes citadas com links
+- bloco "por que isso importa para negocios brasileiros"
+- CTA sutil para Sistema Britto/Evolution
+
+Nao invente fatos. Se uma fonte nao puder ser validada, marque como pendente.
+""".strip(),
+        log_name="ai-news-daily-quill",
+        timeout=900,
+        agent="quill-writer",
+    )
+    results.append(quill_result)
+    _write_result(draft_path, quill_result)
+
+    raven_result = run_claude(
+        f"""
+Voce e Raven. Revise {draft_path}.
+
+Escreva {review_path} com:
+- problemas factuais
+- riscos de promessa/clickbait
+- links fracos ou faltantes
+- ajustes obrigatorios antes do draft Ghost
+- veredito: APPROVE_DRAFT ou REVISE
+""".strip(),
+        log_name="ai-news-daily-raven",
+        timeout=600,
+        agent="raven-critic",
+    )
+    results.append(raven_result)
+    _write_result(review_path, raven_result)
+
+    mako_result = run_claude(
+        f"""
+Voce e Mako. Leia:
+- {draft_path}
+- {review_path}
+- .claude/skills/social-ai-trends-blog/SKILL.md
+- .claude/skills/custom-int-ghost/SKILL.md
+- /home/sistemabritto/.codex/skills/evolution-blog-post-ghost/SKILL.md se acessivel
+
+Tarefa:
+1. Aplicar revisao/humanizacao no texto.
+2. Fazer SEO e link building interno quando houver links relevantes.
+3. Gerar ou preparar imagem/thumbnail usando o padrao Sistema Britto.
+4. Criar um Ghost draft, status draft. Nao publicar.
+5. Escrever {final_path} com titulo, slug, preview/admin URL, caminho da imagem, pendencias e texto da mensagem de aprovacao.
+
+Regra absoluta: nao publicar e nao compartilhar no LinkedIn. Aprovacao humana primeiro.
+Inclua no final uma linha:
+TELEGRAM_APPROVAL: [mensagem curta com titulo + link/caminho + pergunta de OK]
+""".strip(),
+        log_name="ai-news-daily-mako",
+        timeout=1200,
+        agent="mako-marketing",
+    )
+    results.append(mako_result)
+    _write_result(final_path, mako_result)
+
+    summary(results, "AI News Daily Draft")
+
+    output_ok = all(
+        _has_substantive_output(path)
+        for path in (selection_path, draft_path, review_path, final_path)
+    )
+
+    if all(r.get("success") for r in results) and output_ok:
+        _update_queue_item(item_id, {
+            "status": "drafted",
+            "drafted_at": datetime.now().isoformat(),
+            "draft_dir": str(run_dir),
+            "final_brief": str(final_path),
+            "approval_status": "pending",
+        })
+        approval = ""
+        stdout = results[-1].get("stdout", "")
+        for line in reversed(stdout.splitlines()):
+            if line.strip().startswith("TELEGRAM_APPROVAL:"):
+                approval = line.split(":", 1)[1].strip()
+                break
+        if not approval:
+            approval = f"AI News draft pronto para aprovacao: {final_path}"
+        _notify(approval)
+    else:
+        _update_queue_item(item_id, {
+            "status": "failed",
+            "failed_at": datetime.now().isoformat(),
+            "draft_dir": str(run_dir),
+            "final_brief": str(final_path),
+            "failure_reason": "agent_failed_or_empty_output",
+        })
+
+
+if __name__ == "__main__":
+    main()
diff --git a/ADWs/routines/custom/ai_news_weekly_x_research.py b/ADWs/routines/custom/ai_news_weekly_x_research.py
new file mode 100644
index 000000000..1173eee55
--- /dev/null
+++ b/ADWs/routines/custom/ai_news_weekly_x_research.py
@@ -0,0 +1,238 @@
+#!/usr/bin/env python3
+"""ADW: AI News Weekly X Research -- coleta X e monta fila editorial | @sage/@mako"""
+
+import json
+import os
+import subprocess
+import sys
+from datetime import datetime
+from pathlib import Path
+
+sys.path.insert(0, os.path.dirname(os.path.dirname(os.path.dirname(os.path.abspath(__file__)))))
+from runner import banner, run_claude, send_telegram, summary  # noqa: E402
+
+
+WORKSPACE = Path(__file__).resolve().parents[3]
+SKILL_DIR = WORKSPACE / ".claude" / "skills" / "social-ai-trends-blog"
+OUT_DIR = WORKSPACE / "workspace" / "marketing" / "ai-news"
+RAW_OUT = OUT_DIR / "trends_raw.json"
+QUEUE_OUT = OUT_DIR / "queue.json"
+
+
+def _week_id() -> str:
+    year, week, _ = datetime.now().isocalendar()
+    return f"{year}-W{week:02d}"
+
+
+def _notify(text: str) -> None:
+    chat_id = os.environ.get("TELEGRAM_CHAT_ID")
+    if chat_id:
+        send_telegram(text, chat_id=chat_id)
+
+
+def _write_result(path: Path, result: dict) -> None:
+    path.parent.mkdir(parents=True, exist_ok=True)
+    stdout = result.get("stdout", "") or ""
+    path.write_text(stdout.strip() + "\n", encoding="utf-8")
+
+
+def _fallback_queue(raw: dict, week: str) -> dict:
+    product_hooks = {
+        "Agentes de IA / Agentic": "Evo AI: agentes conectados ao CRM e ao WhatsApp.",
+        "IA para código/dev": "Evolution API: automacao e infraestrutura aberta para times tecnicos.",
+        "Modelos novos (GPT/Claude/Gemini/Llama)": "Sistema Britto: escolha pragmatica de modelos por uso real.",
+        "OpenAI / Anthropic / Big Labs": "Evo AI: arquitetura multi-modelo sem dependencia cega de um unico lab.",
+        "IA generativa de imagem/vídeo": "Marketing com IA: producao visual com aprovacao humana.",
+        "Automação / Workflows com IA": "Evo AI + Evolution API: workflows reais em canais de atendimento.",
+        "Chatbots / Atendimento / WhatsApp": "Evolution API: WhatsApp open source para atendimento com IA.",
+        "IA no trabalho / produtividade": "Sistema Britto: IA operacional, nao palestra.",
+        "Open source / modelos abertos": "Evolution API: open source, controle de infra e menor lock-in.",
+        "Regulação / ética / segurança": "Sistema Britto: governanca e uso responsavel em operacoes reais.",
+        "Negócios / startups / investimento": "Sistema Britto: separar hype de ROI operacional.",
+    }
+    items = []
+    topics_ranked = raw.get("topics_ranked", [])[:12]
+    if not topics_ranked:
+        topics_ranked = [
+            {"topic": "Agentes de IA / Agentic", "count": 0, "total_score": 0, "top_tweets": []},
+            {"topic": "Automação / Workflows com IA", "count": 0, "total_score": 0, "top_tweets": []},
+            {"topic": "Chatbots / Atendimento / WhatsApp", "count": 0, "total_score": 0, "top_tweets": []},
+            {"topic": "IA para código/dev", "count": 0, "total_score": 0, "top_tweets": []},
+            {"topic": "Open source / modelos abertos", "count": 0, "total_score": 0, "top_tweets": []},
+            {"topic": "Modelos novos (GPT/Claude/Gemini/Llama)", "count": 0, "total_score": 0, "top_tweets": []},
+            {"topic": "Regulação / ética / segurança", "count": 0, "total_score": 0, "top_tweets": []},
+        ]
+
+    for idx, topic in enumerate(topics_ranked, 1):
+        top_tweets = topic.get("top_tweets", [])[:3]
+        urls = [tweet.get("url", "") for tweet in top_tweets if tweet.get("url")]
+        label = topic.get("topic", "IA geral")
+        items.append({
+            "id": f"ai-news-{week}-{idx:02d}",
+            "status": "queued",
+            "priority": idx,
+            "title": f"{label}: o sinal do X para negocios com IA",
+            "angle": (
+                f"O tema '{label}' concentrou {topic.get('count', 0)} sinais no X "
+                f"e score agregado {round(topic.get('total_score', 0), 1)}."
+            ),
+            "product_hook": product_hooks.get(label, "Sistema Britto: transformar tendencia em execucao."),
+            "source_urls": urls,
+            "target_reader": "fundadores, operadores e lideres que precisam aplicar IA em negocios reais",
+            "draft_due": "daily-19h",
+        })
+    return {
+        "generated_at": datetime.now().isoformat(),
+        "week": week,
+        "status": "ready",
+        "source": "x-api" if raw.get("topics_ranked") else "fallback-editorial",
+        "items": items,
+    }
+
+
+def _queue_needs_fallback(path: Path) -> bool:
+    if not path.exists():
+        return True
+    try:
+        data = json.loads(path.read_text(encoding="utf-8"))
+    except json.JSONDecodeError:
+        return True
+    return not data.get("items")
+
+
+def main() -> None:
+    banner("AI News Weekly X Research", "X trends -> Sage -> Mako -> fila editorial")
+    OUT_DIR.mkdir(parents=True, exist_ok=True)
+
+    # fetch_ai_trends.py precisa de SOCIAL_TWITTER_1_BEARER_TOKEN — se a
+    # credencial estiver ausente/expirada ou a chamada à API do X falhar,
+    # essa falha NÃO pode derrubar a rotina inteira: já existe um fallback
+    # editorial pronto mais abaixo (_fallback_queue) pra exatamente esse
+    # caso, mas o RuntimeError original matava o processo ANTES de chegar
+    # lá — Sage/Mako nunca rodavam, sem log visível (subprocess.Popen do
+    # /api/routines/<id>/run descarta stdout/stderr). Confirmado ao vivo
+    # 2026-07-14: rotina disparada via API, processo morreu sem nenhuma
+    # métrica registrada, nem o passo mais básico (Sage) chegou a rodar.
+    fetch_script = SKILL_DIR / "fetch_ai_trends.py"
+    try:
+        result = subprocess.run(
+            [sys.executable, str(fetch_script), "--days", "7", "--per-query", "100", "--out", str(RAW_OUT)],
+            cwd=str(WORKSPACE),
+            timeout=300,
+            capture_output=True,
+            text=True,
+        )
+        if result.returncode != 0:
+            raise RuntimeError(result.stderr or result.stdout or "fetch_ai_trends failed")
+        raw_preview = json.loads(RAW_OUT.read_text(encoding="utf-8"))
+    except Exception as exc:
+        print(f"[ai-news-weekly] fetch_ai_trends falhou, seguindo com fallback editorial: {exc}", flush=True)
+        raw_preview = {
+            "topics_ranked": [],
+            "total_tweets_collected": 0,
+            "api_errors": [{"status": "fetch_failed", "detail": str(exc)[:300]}],
+        }
+        RAW_OUT.parent.mkdir(parents=True, exist_ok=True)
+        RAW_OUT.write_text(json.dumps(raw_preview, ensure_ascii=False, indent=2) + "\n", encoding="utf-8")
+
+    week = _week_id()
+    pauta_path = OUT_DIR / f"[C]pauta-{week}.md"
+    sage_path = OUT_DIR / f"[C]sage-curadoria-{week}.md"
+
+    collected = raw_preview.get("total_tweets_collected", 0)
+    topics = len(raw_preview.get("topics_ranked", []))
+    api_errors = raw_preview.get("api_errors", [])
+
+    results = []
+    sage_result = run_claude(
+        f"""
+Voce e Sage. Leia:
+- {RAW_OUT}
+- .claude/skills/social-ai-trends-blog/SKILL.md
+- memory/index.md se existir
+
+Objetivo: escolher os viral topics mais relevantes para Sistema Britto/Evolution.
+Nao copie tweets. Use os tweets como sinal de demanda.
+
+Escreva {sage_path} com:
+- ranking dos 15 temas
+- motivo estrategico para Sistema Britto
+- gancho de produto quando fizer sentido
+- risco/editorial guardrail
+- prioridade: P0/P1/P2
+""".strip(),
+        log_name="ai-news-weekly-sage",
+        timeout=900,
+        agent="sage-strategy",
+    )
+    results.append(sage_result)
+    _write_result(sage_path, sage_result)
+
+    mako_result = run_claude(
+        f"""
+Voce e Mako. Leia:
+- {RAW_OUT}
+- {sage_path}
+- .claude/skills/social-ai-trends-blog/SKILL.md
+
+Monte a pauta semanal e a fila diaria de AI News.
+
+Crie/atualize:
+1. {pauta_path}
+2. {QUEUE_OUT}
+
+O queue.json deve ser JSON valido, com:
+{{
+  "generated_at": "...",
+  "week": "{week}",
+  "status": "ready",
+  "items": [
+    {{
+      "id": "ai-news-{week}-01",
+      "status": "queued",
+      "priority": 1,
+      "title": "...",
+      "angle": "...",
+      "product_hook": "...",
+      "source_urls": ["..."],
+      "target_reader": "...",
+      "draft_due": "daily-19h"
+    }}
+  ]
+}}
+
+Inclua 7 a 15 itens. Priorize relevancia para Sistema Britto, nao hype vazio.
+""".strip(),
+        log_name="ai-news-weekly-mako",
+        timeout=900,
+        agent="mako-marketing",
+    )
+    results.append(mako_result)
+    _write_result(pauta_path, mako_result)
+
+    if _queue_needs_fallback(QUEUE_OUT):
+        QUEUE_OUT.write_text(
+            json.dumps(_fallback_queue(raw_preview, week), ensure_ascii=False, indent=2) + "\n",
+            encoding="utf-8",
+        )
+
+    summary(results, "AI News Weekly X Research")
+
+    if all(r.get("success") for r in results):
+        queue_source = "x-api"
+        try:
+            queue_source = json.loads(QUEUE_OUT.read_text(encoding="utf-8")).get("source", queue_source)
+        except Exception:
+            pass
+        error_note = ""
+        if api_errors:
+            first = api_errors[0]
+            error_note = f" X API: HTTP {first.get('status', '?')}."
+        _notify(
+            f"AI News semanal pronto: {collected} tweets, {topics} temas. "
+            f"Fonte da fila: {queue_source}.{error_note} Fila: {QUEUE_OUT}"
+        )
+
+
+if __name__ == "__main__":
+    main()
diff --git a/ADWs/routines/daily_status_report.py b/ADWs/routines/daily_status_report.py
new file mode 100644
index 000000000..3d75e862f
--- /dev/null
+++ b/ADWs/routines/daily_status_report.py
@@ -0,0 +1,164 @@
+#!/usr/bin/env python3
+"""
+ADWs/routines/daily_status_report.py — Report diário de status para WhatsApp.
+
+Coleta: rotinas executadas, tasks/goals, tickets abertos, falhas recentes.
+Envia resumo compacto via WhatsApp (Evolution Go API).
+
+Usage:
+  python3 daily_status_report.py --phone 5511999999999
+  python3 daily_status_report.py --dry-run   # só imprime, não envia
+"""
+from __future__ import annotations
+
+import argparse
+import json
+import sys
+from datetime import datetime, timedelta, timezone
+from pathlib import Path
+
+WORKSPACE = Path(__file__).resolve().parent.parent.parent
+sys.path.insert(0, str(WORKSPACE / "dashboard" / "backend"))
+
+DB_PATH = WORKSPACE / "dashboard" / "data" / "evonexus.db"
+BRT_OFFSET = timedelta(hours=-3)
+
+
+def _now_utc() -> datetime:
+    return datetime.now(timezone.utc)
+
+
+def _now_brt() -> datetime:
+    return _now_utc() + BRT_OFFSET
+
+
+def _get_db():
+    import sqlite3
+    conn = sqlite3.connect(str(DB_PATH), timeout=30)
+    conn.row_factory = sqlite3.Row
+    conn.execute("PRAGMA journal_mode=WAL")
+    return conn
+
+
+def generate_report() -> str:
+    """Gera report diário como string formatada."""
+    import os
+    conn = _get_db()
+    now_brt = _now_brt()
+    today_utc = (now_brt - BRT_OFFSET).strftime("%Y-%m-%d") + "T00:00:00.000000Z"
+    yesterday_utc = (_now_brt() - timedelta(days=1)).strftime("%Y-%m-%d") + "T00:00:00.000000Z"
+
+    lines = [f"📋 <b>Status Diário — {now_brt.strftime('%d/%m/%Y')}</b>"]
+
+    # ── Scheduled Tasks (today) ──
+    try:
+        task_rows = conn.execute(
+            "SELECT name, status, last_run, error FROM scheduled_tasks WHERE created_at > ? ORDER BY status DESC, name ASC",
+            (today_utc,),
+        ).fetchall()
+        if task_rows:
+            ok_tasks = [r for r in task_rows if r["status"] == "success"]
+            fail_tasks = [r for r in task_rows if r["status"] == "fail"]
+            lines.append(f"\n📌 <b>Rotinas hoje:</b> {len(ok_tasks)} ok / {len(fail_tasks)} fail")
+            for r in fail_tasks[:8]:
+                err = (r["error"] or "sem detalhe")[:60]
+                lines.append(f"  ❌ {r['name']}: {err}")
+    except Exception:
+        pass
+
+    # ── Goal Tasks ──
+    try:
+        gt_rows = conn.execute(
+            "SELECT status, COUNT(*) as cnt FROM goal_tasks GROUP BY status"
+        ).fetchall()
+        gt_stats = {r["status"]: r["cnt"] for r in gt_rows}
+        if gt_stats:
+            done = gt_stats.get("done", 0)
+            open_ = gt_stats.get("open", 0)
+            in_prog = gt_stats.get("in_progress", 0)
+            lines.append(f"\n🎯 <b>Goals:</b> {done} done / {in_prog} em andamento / {open_} abertos")
+    except Exception:
+        pass
+
+    # ── Tickets ──
+    try:
+        open_tickets = conn.execute(
+            "SELECT COUNT(*) as cnt FROM tickets WHERE status='open'"
+        ).fetchone()["cnt"]
+        blocked_tickets = conn.execute(
+            "SELECT COUNT(*) as cnt FROM tickets WHERE status='blocked'"
+        ).fetchone()["cnt"]
+        in_progress_tickets = conn.execute(
+            "SELECT COUNT(*) as cnt FROM tickets WHERE status='in_progress'"
+        ).fetchone()["cnt"]
+        lines.append(f"\n🎫 <b>Tickets:</b> {open_tickets} open / {in_progress_tickets} em andamento / {blocked_tickets} bloqueados")
+
+        pending_assign = conn.execute(
+            "SELECT title, priority, assignee_agent FROM tickets WHERE status IN ('open','in_progress','blocked') ORDER BY CASE priority WHEN 'urgent' THEN 1 WHEN 'high' THEN 2 ELSE 3 END, created_at ASC LIMIT 5"
+        ).fetchall()
+        if pending_assign:
+            lines.append("\n  <b>Top tickets:</b>")
+            for t in pending_assign:
+                pri_icon = "🔴" if t["priority"] == "urgent" else ("🟡" if t["priority"] == "high" else "🔵")
+                assignee = t["assignee_agent"] or "sem agente"
+                title = t["title"][:45]
+                lines.append(f"  {pri_icon} {title} — {assignee}")
+    except Exception:
+        pass
+
+    # ── Heartbeat failures (last 24h) ──
+    try:
+        last24 = (_now_utc() - timedelta(hours=24)).strftime("%Y-%m-%dT%H:%M:%S.%fZ")
+        hb_fails = conn.execute(
+            "SELECT heartbeat_id, error FROM heartbeat_runs WHERE started_at > ? AND status='fail' ORDER BY started_at DESC LIMIT 5"
+        , (last24,)).fetchall()
+        if hb_fails:
+            lines.append(f"\n⚠️ <b>Falhas (24h):</b> {len(hb_fails)}")
+            for h in hb_fails:
+                err = (h["error"] or "exit code 1")[:70]
+                lines.append(f"  • {h['heartbeat_id']}: {err}")
+    except Exception:
+        pass
+
+    # ── Footer ──
+    lines.append(f"\n🕐 Gerado em {now_brt.strftime('%H:%M BRT')}")
+    return "\n".join(lines)
+
+
+def main() -> int:
+    parser = argparse.ArgumentParser(description="Report diário de status via WhatsApp")
+    parser.add_argument("--phone", required=False, help="Número WhatsApp (ex: 5511999999999). Também lê WHATSAPP_PHONE do .env")
+    parser.add_argument("--dry-run", action="store_true", help="Apenas imprime, não envia")
+    args = parser.parse_args()
+
+    phone = args.phone or os.environ.get("WHATSAPP_PHONE", "")
+
+    report = generate_report()
+
+    if args.dry_run:
+        print(report)
+        return 0
+
+    if not phone:
+        print("[daily_status_report] ERRO: passe --phone ou defina WHATSAPP_PHONE no .env")
+        return 1
+
+    try:
+        from notifications import send_whatsapp
+    except ImportError:
+        print("[daily_status_report] ERRO: não foi importar notifications.send_whatsapp")
+        return 1
+
+    ok = send_whatsapp(report, phone)
+    if ok:
+        print(f"[daily_status_report] enviado para {phone}")
+    else:
+        print(f"[daily_status_report] FALHA ao enviar (cheque EVOLUTION_GO_URL/KEY no .env)")
+        return 1
+
+    return 0
+
+
+if __name__ == "__main__":
+    import os
+    sys.exit(main())
diff --git a/ADWs/routines/hourly_report.py b/ADWs/routines/hourly_report.py
new file mode 100644
index 000000000..dc9c16d83
--- /dev/null
+++ b/ADWs/routines/hourly_report.py
@@ -0,0 +1,176 @@
+#!/usr/bin/env python3
+"""
+ADWs/routines/hourly_report.py — Relatório horário de atividade do EvoNexus.
+
+Roda de hora em hora durante horário comercial (08h-20h BRT).
+Coleta: heartbeats executados, tasks completadas, rotinas, erros.
+Envia resumo compacto via Telegram.
+
+Usage:
+    python3 hourly_report.py                    # gera e envia
+    python3 hourly_report.py --dry-run          # só imprime, não envia
+"""
+from __future__ import annotations
+
+import json
+import os
+import sys
+from datetime import datetime, timezone, timedelta
+from pathlib import Path
+
+WORKSPACE = Path(__file__).resolve().parent.parent.parent
+sys.path.insert(0, str(WORKSPACE / "dashboard" / "backend"))
+
+DB_PATH = WORKSPACE / "dashboard" / "data" / "evonexus.db"
+BRT_OFFSET = timedelta(hours=-3)
+
+
+def _now_brt() -> datetime:
+    return datetime.now(timezone.utc) + BRT_OFFSET
+
+
+def _get_db():
+    import sqlite3
+    conn = sqlite3.connect(str(DB_PATH), timeout=30)
+    conn.row_factory = sqlite3.Row
+    conn.execute("PRAGMA journal_mode=WAL")
+    return conn
+
+
+def generate_report() -> str:
+    """Generate hourly activity report as formatted string."""
+    conn = _get_db()
+    now_brt = _now_brt()
+    hour_ago_utc = (now_brt - timedelta(hours=1)).strftime("%Y-%m-%dT%H:%M:%S.%fZ")
+    today_utc = now_brt.strftime("%Y-%m-%d") + "T00:00:00.000000Z"
+
+    # ── Heartbeats (last hour) ──
+    hb_runs = conn.execute(
+        """SELECT heartbeat_id, status, duration_ms, error, triggered_by
+           FROM heartbeat_runs
+           WHERE started_at > ?
+           ORDER BY started_at DESC""",
+        (hour_ago_utc,)
+    ).fetchall()
+
+    # ── Heartbeats (today) ──
+    hb_today = conn.execute(
+        """SELECT status, COUNT(*) as cnt
+           FROM heartbeat_runs
+           WHERE started_at > ?
+           GROUP BY status""",
+        (today_utc,)
+    ).fetchall()
+    hb_today_stats = {r["status"]: r["cnt"] for r in hb_today}
+
+    # ── Tasks (today) ──
+    tasks_today = conn.execute(
+        """SELECT status, COUNT(*) as cnt
+           FROM scheduled_tasks
+           WHERE created_at > ?
+           GROUP BY status""",
+        (today_utc,)
+    ).fetchall()
+    task_stats = {r["status"]: r["cnt"] for r in tasks_today}
+
+    # ── Goal Tasks ──
+    goal_tasks = conn.execute(
+        """SELECT status, COUNT(*) as cnt
+           FROM goal_tasks
+           GROUP BY status"""
+    ).fetchall()
+    gt_stats = {r["status"]: r["cnt"] for r in goal_tasks}
+
+    # ── Pending approvals (tickets) ──
+    pending_tickets = conn.execute(
+        """SELECT COUNT(*) as cnt FROM tickets WHERE status='open'"""
+    ).fetchone()["cnt"]
+
+    # ── Zombie runs ──
+    zombies = conn.execute(
+        """SELECT COUNT(*) as cnt FROM heartbeat_runs
+           WHERE status='running' AND started_at < ?""",
+        ((now_brt - timedelta(hours=2)).strftime("%Y-%m-%dT%H:%M:%S.%fZ"),)
+    ).fetchone()["cnt"]
+
+    # ── Top failures (last hour) ──
+    failures = [r for r in hb_runs if r["status"] == "fail"]
+
+    conn.close()
+
+    # ── Format ──
+    hour_str = now_brt.strftime("%H:%M")
+    lines = [f"📊 <b>Relatório {hour_str} BRT</b>"]
+
+    # Heartbeat summary
+    ok = hb_today_stats.get("success", 0)
+    fail = hb_today_stats.get("fail", 0)
+    running = hb_today_stats.get("running", 0)
+    total = ok + fail + running
+    rate = f"{(ok / max(1, ok + fail) * 100):.0f}%" if (ok + fail) > 0 else "N/A"
+    lines.append(f"❤️ Heartbeats hoje: <b>{ok} ok</b> / {fail} fail / {running} running ({rate})")
+
+    # Last hour detail
+    if hb_runs:
+        last_hour_ok = sum(1 for r in hb_runs if r["status"] == "success")
+        last_hour_fail = sum(1 for r in hb_runs if r["status"] == "fail")
+        lines.append(f"⏱ Última hora: +{last_hour_ok} ok / -{last_hour_fail} fail")
+
+    # Failures detail
+    if failures:
+        lines.append(f"\n⚠️ <b>Falhas ({len(failures)})</b>:")
+        for f in failures[:5]:  # max 5
+            err = (f["error"] or "exit code 1")[:80]
+            lines.append(f"  • {f['heartbeat_id']}: {err}")
+
+    # Tasks
+    if task_stats:
+        t_pending = task_stats.get("pending", 0)
+        t_completed = task_stats.get("completed", 0)
+        t_failed = task_stats.get("failed", 0)
+        lines.append(f"\n📌 Tasks: {t_completed} ok / {t_failed} fail / {t_pending} pending")
+
+    # Goal tasks
+    if gt_stats:
+        gt_open = gt_stats.get("open", 0)
+        gt_done = gt_stats.get("done", 0)
+        lines.append(f"🎯 Goals: {gt_done} done / {gt_open} open")
+
+    # Pending tickets
+    if pending_tickets > 0:
+        lines.append(f"🎫 Tickets abertos: {pending_tickets}")
+
+    # Zombies
+    if zombies > 0:
+        lines.append(f"🧟 Zombie runs: {zombies} (recomendo limpeza)")
+
+    # Footer
+    lines.append(f"\n🕐 Próximo relatório: {(now_brt + timedelta(hours=1)).strftime('%H:%M')}")
+
+    return "\n".join(lines)
+
+
+def main() -> int:
+    import argparse
+    p = argparse.ArgumentParser()
+    p.add_argument("--dry-run", action="store_true", help="Only print, don't send")
+    args = p.parse_args()
+
+    report = generate_report()
+
+    if args.dry_run:
+        print(report)
+        return 0
+
+    from notifications import notify_hourly_report
+    sent = notify_hourly_report(report)
+    if sent:
+        print(f"[hourly_report] sent at {_now_brt().strftime('%H:%M BRT')}")
+    else:
+        print(f"[hourly_report] NOT sent (Telegram not configured)")
+        print(report)
+    return 0
+
+
+if __name__ == "__main__":
+    sys.exit(main())
diff --git a/ADWs/routines/memory_sync.py b/ADWs/routines/memory_sync.py
index 81f74e1ef..bec4b6172 100644
--- a/ADWs/routines/memory_sync.py
+++ b/ADWs/routines/memory_sync.py
@@ -1,41 +1,156 @@
 #!/usr/bin/env python3
-"""ADW: Memory Sync — Consolidates memory via Clawdia"""
-
-import sys, os
-sys.path.insert(0, os.path.dirname(os.path.dirname(os.path.abspath(__file__))))
-from runner import run_claude, banner, summary
-
-PROMPT = """Run the memory consolidation routine:
-
-1. Read the last 3 daily logs in 'workspace/daily-logs/' (most recent first)
-2. Read the meeting summaries from the last 3 days in 'workspace/meetings/summaries/'
-3. Analyze recent git log: `git log --oneline --since="3 days ago"` and `git diff --stat HEAD~10` to understand what changed in the workspace
-4. For each source, extract:
-   - Decisions made → save in memory/ as type 'project'
-   - New people or new context about people → save as type 'user' or update existing
-   - Feedback or approach corrections → save as type 'feedback'
-   - New terms or external references → save as type 'reference'
-   - Skills or routines created/changed → update references if relevant
-5. Before saving, check if similar memory already exists — update instead of duplicating
-6. **Ingest propagation** — when saving/updating a memory, check which OTHER memories reference the same entity and update them too. Examples:
-   - New info about a person → update their people/ file AND any projects/ that mention them
-   - New project detail → update glossary.md if it has a codename entry
-   - Role change → update people/ file, glossary.md nicknames table, and CLAUDE.md hot cache
-7. Update MEMORY.md with pointers to new files
-8. Update memory/index.md — ensure all files in memory/ are cataloged by category
-9. Append operations to memory/log.md with format: [DATE] SYNC — summary of changes
-
-Report at the end: how many memories created/updated by type, and how many cross-references propagated.
-Be concise — don't create memories for obvious things or things already documented in code."""
+"""ADW: Memory Sync — deterministic daily memory snapshot."""
+
+from __future__ import annotations
+
+import re
+import subprocess
+import sys
+from datetime import datetime
+from pathlib import Path
+
+sys.path.insert(0, str(Path(__file__).resolve().parents[1]))
+from runner import banner, run_script, summary
+
+WORKSPACE = Path(__file__).resolve().parents[2]
+MEMORY_DIR = WORKSPACE / "memory"
+SNAPSHOT_PATH = MEMORY_DIR / "context" / "automated-memory-sync.md"
+INDEX_PATH = MEMORY_DIR / "index.md"
+MEMORY_INDEX_PATH = MEMORY_DIR / "MEMORY.md"
+LOG_PATH = MEMORY_DIR / "log.md"
+
+
+def _latest_file(root: Path) -> Path | None:
+    if not root.is_dir():
+        return None
+    files = [
+        path for path in root.rglob("*")
+        if path.is_file() and path.name != ".gitkeep" and path.suffix.lower() in {".md", ".html", ".txt"}
+    ]
+    if not files:
+        return None
+    return max(files, key=lambda path: path.stat().st_mtime)
+
+
+def _read_excerpt(path: Path | None, limit: int = 7000) -> str:
+    if path is None:
+        return "_No source file found._"
+    try:
+        text = path.read_text(encoding="utf-8", errors="replace")
+    except OSError as exc:
+        return f"_Could not read {path}: {exc}_"
+    if path.suffix.lower() == ".html":
+        text = re.sub(r"<script\\b[^>]*>.*?</script>", " ", text, flags=re.I | re.S)
+        text = re.sub(r"<style\\b[^>]*>.*?</style>", " ", text, flags=re.I | re.S)
+        text = re.sub(r"<[^>]+>", " ", text)
+        text = re.sub(r"\\s+", " ", text).strip()
+    return text[:limit].strip() or "_Source file is empty._"
+
+
+def _git_output(args: list[str]) -> str:
+    try:
+        result = subprocess.run(
+            args,
+            cwd=WORKSPACE,
+            text=True,
+            stdout=subprocess.PIPE,
+            stderr=subprocess.PIPE,
+            timeout=20,
+            check=False,
+        )
+    except (OSError, subprocess.TimeoutExpired) as exc:
+        return f"_Command failed: {' '.join(args)} ({exc})_"
+    output = (result.stdout or result.stderr or "").strip()
+    return output or "_No output._"
+
+
+def _ensure_index_entry(path: Path) -> None:
+    entry = "- [Automated Memory Sync](memory/context/automated-memory-sync.md) — Latest bounded daily memory snapshot"
+    try:
+        content = path.read_text(encoding="utf-8") if path.exists() else "# Memory Index\n"
+    except OSError:
+        return
+    if "memory/context/automated-memory-sync.md" in content:
+        return
+    if "## Context" in content:
+        content = content.replace("## Context\n", f"## Context\n{entry}\n", 1)
+    else:
+        content = content.rstrip() + f"\n\n## Context\n{entry}\n"
+    path.write_text(content, encoding="utf-8")
+
+
+def _run_sync() -> dict:
+    MEMORY_DIR.mkdir(exist_ok=True)
+    SNAPSHOT_PATH.parent.mkdir(parents=True, exist_ok=True)
+
+    now = datetime.now().strftime("%Y-%m-%d %H:%M")
+    daily = _latest_file(WORKSPACE / "workspace" / "daily-logs")
+    meeting = _latest_file(WORKSPACE / "workspace" / "meetings" / "summaries")
+    git_log = _git_output(["git", "log", "--oneline", "--since=24 hours ago", "-n", "20"])
+    diff_stat = _git_output(["git", "diff", "--stat", "HEAD~5"])
+
+    daily_label = daily.relative_to(WORKSPACE) if daily else "none"
+    meeting_label = meeting.relative_to(WORKSPACE) if meeting else "none"
+    content = f"""# Automated Memory Sync
+
+Last updated: {now}
+
+This file is maintained by `ADWs/routines/memory_sync.py`. It is intentionally bounded so the daily routine stays reliable and does not spend an open-ended agent session scanning the workspace.
+
+## Sources
+
+- Daily log: `{daily_label}`
+- Meeting summary: `{meeting_label}`
+- Git window: last 24 hours, max 20 commits
+- Diff window: `git diff --stat HEAD~5`
+
+## Recent Daily Log Excerpt
+
+{_read_excerpt(daily)}
+
+## Recent Meeting Summary Excerpt
+
+{_read_excerpt(meeting)}
+
+## Git Activity
+
+```text
+{git_log}
+```
+
+## Diff Stat
+
+```text
+{diff_stat}
+```
+"""
+    SNAPSHOT_PATH.write_text(content, encoding="utf-8")
+
+    _ensure_index_entry(INDEX_PATH)
+    _ensure_index_entry(MEMORY_INDEX_PATH)
+
+    LOG_PATH.parent.mkdir(parents=True, exist_ok=True)
+    with LOG_PATH.open("a", encoding="utf-8") as f:
+        f.write(
+            f"\n[{datetime.now().date()}] SYNC — Automated bounded snapshot updated "
+            f"from daily log `{daily_label}`, meeting `{meeting_label}`, and git activity. "
+            "1 memory updated, 0 created, 0 cross-references propagated."
+        )
+
+    return {
+        "ok": True,
+        "summary": "updated automated-memory-sync.md from bounded sources",
+    }
+
 
 def main():
-    banner("🧠 Memory Sync", "Logs • Meetings → Memory | @clawdia")
-    results = []
-    results.append(run_claude(PROMPT, log_name="memory-sync", timeout=600, agent="clawdia-assistant"))
+    banner("Memory Sync", "Bounded snapshot -> memory/context")
+    results = [run_script(_run_sync, log_name="memory-sync", timeout=60)]
     summary(results, "Memory Sync")
 
+
 if __name__ == "__main__":
     try:
         main()
     except KeyboardInterrupt:
-        print("\n⚠ Cancelled.")
+        print("\nCancelled.")
diff --git a/ADWs/routines/uso_modelos_dia.py b/ADWs/routines/uso_modelos_dia.py
new file mode 100755
index 000000000..688bc5445
--- /dev/null
+++ b/ADWs/routines/uso_modelos_dia.py
@@ -0,0 +1,307 @@
+#!/usr/bin/env python3
+"""
+Routines/uso_modelos_dia.py — Exercita visivelmente cada modelo NVIDIA disponível.
+
+Roda diariamente via scheduler.py + pode ser disparada manualmente.
+Cada modelo é pingado com um prompt curto que pede um resumo em PT-BR
++ registra token usage e custo no log/JSONL de routines (ADWs/logs/metrics.json).
+Resultado: fica visível no /costs qual modelo está sendo usado.
+
+Outputs:
+    ADWs/logs/routines/uso_modelos_dia-{DATE}.jsonl  — 1 entry por modelo
+
+Usage:
+    python3 uso_modelos_dia.py                # roda todos os modelos do chain
+    python3 uso_modelos_dia.py --only nvidia  # só NVIDIA (default)
+    python3 uso_modelos_dia.py --models model1,model2
+"""
+
+from __future__ import annotations
+
+import argparse
+import json
+import os
+import re
+import sys
+import time
+import urllib.error
+import urllib.request
+from datetime import datetime, timezone, date
+from pathlib import Path
+
+WORKSPACE = Path(__file__).resolve().parent.parent.parent
+sys.path.insert(0, str(WORKSPACE / "dashboard" / "backend"))
+
+# Mirrors the chain in provider_fallback.NVIDIA_MODEL_CHAIN — kept in sync
+# intentionally so the rotina exercises the same models the dispatcher rotates
+# through on 429. Authoritative order from Felipe (2026-06-16) — validated by
+# POST /v1/chat/completions on each model returning 200.
+NVIDIA_DAILY_MODELS = [
+    "minimaxai/minimax-m3",                  # 1
+    "stepfun-ai/step-3.7-flash",             # 2
+    "moonshotai/kimi-k2.6",                  # 3
+    "deepseek-ai/deepseek-v4-flash",         # 4
+    "z-ai/glm-5.1",                          # 5
+    "nvidia/nemotron-3-ultra-550b-a55b",     # 6
+    "nvidia/nemotron-3-super-120b-a12b",     # 7
+    "qwen/qwen3.5-122b-a10b",                # 8
+    "qwen/qwen3.5-397b-a17b",                # 9
+    "openai/gpt-oss-120b",                   # 10
+    "microsoft/phi-4-multimodal-instruct",   # 11
+    "stepfun-ai/step-3.5-flash",             # 12
+]
+
+OPENROUTER_DAILY_MODELS = [
+    "openrouter/owl-alpha",
+]
+
+PROMPT = (
+    "Responda em PT-BR em 1-2 frases: por que modelos NVIDIA NIM são úteis "
+    "para múltiplos agentes operando em paralelo com budget limitado? "
+    "Cite 1 benefício operacional concreto."
+)
+
+NVIDIA_BASE_URL = "https://integrate.api.nvidia.com/v1"
+OPENROUTER_BASE_URL = "https://openrouter.ai/api/v1"
+
+LOGS_DIR = WORKSPACE / "ADWs" / "logs" / "routines"
+LOGS_DIR.mkdir(parents=True, exist_ok=True)
+
+
+def _now_iso() -> str:
+    return datetime.now(timezone.utc).strftime("%Y-%m-%dT%H:%M:%S.%fZ")
+
+
+def _get_api_key(provider: str) -> str:
+    """Read API key from env first, then config/providers.json."""
+    if provider == "nvidia":
+        env_key = os.environ.get("NVIDIA_API_KEY") or os.environ.get("OPENAI_API_KEY", "")
+        if env_key:
+            return env_key
+        cfg_path = WORKSPACE / "config" / "providers.json"
+        if cfg_path.is_file():
+            try:
+                cfg = json.loads(cfg_path.read_text(encoding="utf-8"))
+                ek = (cfg.get("providers", {}).get("nvidia", {})
+                      .get("env_vars", {}).get("OPENAI_API_KEY", ""))
+                if ek and "****" not in ek:
+                    return ek
+            except Exception:
+                pass
+        return ""
+    if provider == "openrouter":
+        return os.environ.get("OPENROUTER_API_KEY", "") or os.environ.get("OPENAI_API_KEY", "")
+    return ""
+
+
+def _call_chat(base_url: str, model: str, api_key: str, prompt: str, timeout: int = 120) -> dict:
+    """Single chat completion call. Returns {ok, output, error, duration_ms, ...}."""
+    url = f"{base_url.rstrip('/')}/chat/completions"
+    body = json.dumps({
+        "model": model,
+        "messages": [{"role": "user", "content": prompt}],
+        "max_tokens": 200,
+        "temperature": 0.3,
+        "stream": False,
+    }).encode("utf-8")
+
+    req = urllib.request.Request(
+        url, data=body, method="POST",
+        headers={
+            "Content-Type": "application/json",
+            "Authorization": f"Bearer {api_key}",
+        },
+    )
+    start = time.time()
+    try:
+        with urllib.request.urlopen(req, timeout=timeout) as resp:
+            data = json.loads(resp.read().decode("utf-8"))
+            choice = (data.get("choices") or [{}])[0]
+            msg = choice.get("message") or {}
+            text = (msg.get("content") or "").strip()
+            refusal = msg.get("refusal")
+            if not text and refusal:
+                text = f"[refusal] {refusal}"
+            usage = data.get("usage", {}) or {}
+            return {
+                "ok": True,
+                "output": text,
+                "tokens_in": usage.get("prompt_tokens"),
+                "tokens_out": usage.get("completion_tokens"),
+                "total_tokens": usage.get("total_tokens"),
+                "duration_ms": int((time.time() - start) * 1000),
+                "error": None,
+                "status_code": 200,
+                "finish_reason": choice.get("finish_reason"),
+            }
+    except urllib.error.HTTPError as e:
+        body = e.read().decode("utf-8", errors="replace")[:1500]
+        return {
+            "ok": False, "output": "", "error": body,
+            "duration_ms": int((time.time() - start) * 1000),
+            "status_code": e.code, "tokens_in": None, "tokens_out": None, "total_tokens": None,
+        }
+    except (urllib.error.URLError, TimeoutError, OSError) as e:
+        return {
+            "ok": False, "output": "", "error": str(e),
+            "duration_ms": int((time.time() - start) * 1000),
+            "status_code": None, "tokens_in": None, "tokens_out": None, "total_tokens": None,
+        }
+
+
+def _log_entry(name: str, entry: dict, today: str) -> Path:
+    log_file = LOGS_DIR / f"{name}-{today}.jsonl"
+    with open(log_file, "a", encoding="utf-8") as f:
+        f.write(json.dumps(entry, ensure_ascii=False) + "\n")
+    return log_file
+
+
+def run(nvidia_only: bool = True, only: list[str] | None = None) -> dict:
+    """Exercise each model once. Returns summary for stdout and metrics."""
+    started = _now_iso()
+    today = date.today().isoformat()
+    results: list[dict] = []
+    summary = {"nvidia_ok": 0, "nvidia_fail": 0, "openrouter_ok": 0, "openrouter_fail": 0}
+
+    targets_nvidia = [m for m in NVIDIA_DAILY_MODELS if not only or m in only] if only else NVIDIA_DAILY_MODELS
+    nvidia_key = _get_api_key("nvidia")
+    if not nvidia_key:
+        print("[uso_modelos_dia] ERRO: NVIDIA API key não encontrada (env NVIDIA_API_KEY ou config/providers.json)")
+        return summary
+
+    print(f"[uso_modelos_dia] Exercitando {len(targets_nvidia)} modelos NVIDIA…", flush=True)
+    for model in targets_nvidia:
+        r = _call_chat(NVIDIA_BASE_URL, model, nvidia_key, PROMPT)
+        entry = {
+            "ts": _now_iso(),
+            "routine": "uso_modelos_dia",
+            "provider": "nvidia",
+            "model": model,
+            "ok": r["ok"],
+            "duration_ms": r["duration_ms"],
+            "tokens_in": r["tokens_in"],
+            "tokens_out": r["tokens_out"],
+            "total_tokens": r["total_tokens"],
+            "status_code": r["status_code"],
+            "error": r["error"],
+            "output_preview": (r["output"] or "")[:160],
+        }
+        results.append(entry)
+        _log_entry("uso_modelos_dia", entry, today)
+        if r["ok"]:
+            summary["nvidia_ok"] += 1
+            print(f"  ✓ NVIDIA:{model} ok ({r['duration_ms']}ms, t={r['total_tokens']})", flush=True)
+        else:
+            summary["nvidia_fail"] += 1
+            err_snippet = (r["error"] or "").splitlines()[0][:120] if r["error"] else "?"
+            print(f"  ✗ NVIDIA:{model} FAIL ({r['status_code']}) {err_snippet}", flush=True)
+
+    # OpenRouter only on explicit request — avoid burning credits for daily exercise
+    if not nvidia_only and not only:
+        or_key = _get_api_key("openrouter")
+        if or_key:
+            print("[uso_modelos_dia] Exercitando OpenRouter…", flush=True)
+            for model in OPENROUTER_DAILY_MODELS:
+                r = _call_chat(OPENROUTER_BASE_URL, model, or_key, PROMPT)
+                entry = {
+                    "ts": _now_iso(),
+                    "routine": "uso_modelos_dia",
+                    "provider": "openrouter",
+                    "model": model,
+                    "ok": r["ok"],
+                    "duration_ms": r["duration_ms"],
+                    "tokens_in": r["tokens_in"],
+                    "tokens_out": r["tokens_out"],
+                    "total_tokens": r["total_tokens"],
+                    "status_code": r["status_code"],
+                    "error": r["error"],
+                    "output_preview": (r["output"] or "")[:160],
+                }
+                results.append(entry)
+                _log_entry("uso_modelos_dia", entry, today)
+                if r["ok"]:
+                    summary["openrouter_ok"] += 1
+                    print(f"  ✓ OpenRouter:{model} ok ({r['duration_ms']}ms)", flush=True)
+                else:
+                    summary["openrouter_fail"] += 1
+                    print(f"  ✗ OpenRouter:{model} FAIL ({r['status_code']})", flush=True)
+
+    # Update metrics.json keyed by routine name
+    _update_metrics(results)
+
+    finished = _now_iso()
+    print(f"[uso_modelos_dia] Done in {started} → {finished}. "
+          f"NVIDIA ok={summary['nvidia_ok']} fail={summary['nvidia_fail']}.",
+          flush=True)
+    return summary
+
+
+def _update_metrics(results: list[dict]) -> None:
+    """Light-touch append to ADWs/logs/metrics.json so /costs reflects usage."""
+    metrics_path = WORKSPACE / "ADWs" / "logs" / "metrics.json"
+    today = date.today().isoformat()
+
+    try:
+        existing = json.loads(metrics_path.read_text(encoding="utf-8")) if metrics_path.is_file() else {}
+    except Exception:
+        existing = {}
+
+    name = "uso_modelos_dia"
+    entry = existing.setdefault(name, {
+        "agent": "system", "runs": 0, "successes": 0, "success_rate": 0,
+        "avg_seconds": 0, "total_input_tokens": 0, "total_output_tokens": 0,
+        "total_cost_usd": 0.0, "avg_cost_usd": 0.0, "last_run": None,
+    })
+
+    total_runs_before = entry.get("runs", 0)
+    new_runs = len(results)
+    successes = sum(1 for r in results if r.get("ok"))
+    new_total_tokens = sum((r.get("total_tokens") or 0) for r in results)
+    new_in = sum((r.get("tokens_in") or 0) for r in results)
+    new_out = sum((r.get("tokens_out") or 0) for r in results)
+    total_ms = sum((r.get("duration_ms") or 0) for r in results)
+
+    entry["runs"] += new_runs
+    entry["successes"] += successes
+    if entry["runs"] > 0:
+        # 0-100 percentage, matching ADWs/runner.py's convention for every
+        # other routine's success_rate field — this one used to store a 0-1
+        # fraction instead, which every consumer (Routines.tsx, overview.py)
+        # reads assuming 0-100. Confirmed live: 25/30 real successes stored
+        # as 0.8333 displayed/classified as "0.8333% success" / "critical"
+        # instead of the real 83.3% / "healthy".
+        entry["success_rate"] = round((entry["successes"] / entry["runs"]) * 100, 1)
+    # Aggregate token totals
+    entry["total_input_tokens"] = entry.get("total_input_tokens", 0) + new_in
+    entry["total_output_tokens"] = entry.get("total_output_tokens", 0) + new_out
+    # Running average seconds (weighted by call count)
+    prev_avg_s = entry.get("avg_seconds", 0) or 0
+    prev_count = total_runs_before
+    entry["avg_seconds"] = round(
+        ((prev_avg_s * prev_count) + (total_ms / 1000)) / max(1, entry["runs"]), 3
+    )
+    # Light cost estimate: ~$0.00018/1k input, $0.0006/1k output (rough NVIDIA tier-1 estimate)
+    est_cost = (new_in / 1_000_000) * 0.18 + (new_out / 1_000_000) * 0.60
+    entry["total_cost_usd"] = round(entry.get("total_cost_usd", 0) + est_cost, 6)
+    entry["avg_cost_usd"] = round(entry["total_cost_usd"] / max(1, entry["runs"]), 6)
+    entry["last_run"] = _now_iso()
+
+    metrics_path.write_text(json.dumps(existing, ensure_ascii=False, indent=2), encoding="utf-8")
+
+
+def main() -> int:
+    p = argparse.ArgumentParser()
+    p.add_argument("--all-providers", action="store_true",
+                   help="Também exercita OpenRouter (desligado por padrão).")
+    p.add_argument("--models", type=str, default="",
+                   help="Lista separada por vírgula — só exercita esses modelos.")
+    args = p.parse_args()
+
+    only = [m.strip() for m in args.models.split(",") if m.strip()] or None
+    summary = run(nvidia_only=not args.all_providers, only=only)
+    # Exit 0 if at least one NVIDIA model succeeded
+    return 0 if (summary["nvidia_ok"] > 0) else 1
+
+
+if __name__ == "__main__":
+    sys.exit(main())
diff --git a/ADWs/runner.py b/ADWs/runner.py
index 5a2cda4b8..ae6ebeb2f 100644
--- a/ADWs/runner.py
+++ b/ADWs/runner.py
@@ -45,6 +45,39 @@ def _parse_usage(json_result: dict) -> dict:
     }
 
 
+def _agent_prompt(agent: str | None) -> str:
+    """Return agent persona text without YAML frontmatter."""
+    if not agent:
+        return ""
+    agent_file = WORKSPACE / ".claude" / "agents" / f"{agent}.md"
+    try:
+        content = agent_file.read_text(encoding="utf-8")
+    except OSError:
+        return f"You are the {agent} agent."
+    if content.startswith("---"):
+        parts = content.split("---", 2)
+        if len(parts) == 3:
+            content = parts[2]
+    for marker in ("\n# Persistent Agent Memory", "\n## MEMORY.md"):
+        if marker in content:
+            content = content.split(marker, 1)[0]
+    return content.strip()
+
+
+def _embed_agent_for_openclaude(prompt: str, agent: str | None) -> str:
+    """OpenClaude can misparse --agent frontmatter; embed persona in prompt."""
+    persona = _agent_prompt(agent)
+    if not persona:
+        return prompt
+    return (
+        f"{persona}\n\n"
+        f"CRITICAL: You MUST fully embody this agent persona. "
+        f"You are NOT Claude, OpenClaude, or a generic assistant — you ARE {agent}. "
+        f"Never break character. Follow ALL instructions above.\n\n"
+        f"---\n\nTask:\n{prompt}"
+    )
+
+
 def _save_metrics(log_name, duration, returncode, agent, stdout, usage=None):
     """Save accumulated metrics per routine in metrics.json."""
     metrics_file = LOGS_DIR / "metrics.json"
@@ -70,6 +103,8 @@ def _save_metrics(log_name, duration, returncode, agent, stdout, usage=None):
     m["avg_seconds"] = round(m["total_seconds"] / m["runs"], 1)
     m["last_run"] = datetime.now().isoformat()
     m["agent"] = agent or "none"
+    m["last_returncode"] = returncode
+    m["last_success"] = returncode == 0
 
     if returncode == 0:
         m["successes"] += 1
@@ -127,13 +162,16 @@ def _log_to_file(log_name, prompt, stdout, stderr, returncode, duration, usage=N
 _ALLOWED_CLI_COMMANDS = frozenset({"claude", "openclaude"})
 
 
-def _spawn_cli(cli_command: str, prompt: str, agent: str | None, provider_env: dict) -> subprocess.Popen:
+def _spawn_cli(cli_command: str, prompt: str, agent: str | None, provider_env: dict, max_turns: int) -> subprocess.Popen:
     """Spawn a CLI process using only hardcoded command strings.
 
     Uses a dictionary lookup so that the subprocess argument is always
     a static string, satisfying semgrep/opengrep subprocess injection rules.
     """
-    base_args = ["--print", "--dangerously-skip-permissions", "--output-format", "json"]
+    base_args = ["--print", "--max-turns", str(max_turns), "--dangerously-skip-permissions", "--output-format", "json"]
+    if cli_command == "openclaude":
+        prompt = _embed_agent_for_openclaude(prompt, agent)
+        agent = None
     if agent:
         base_args.extend(["--agent", agent])
     base_args.append(prompt)
@@ -195,7 +233,7 @@ def _get_provider_config() -> tuple[str, dict]:
         return "claude", {}
 
 
-def run_claude(prompt: str, log_name: str = "unnamed", timeout: int = 600, agent: str = None) -> dict:
+def run_claude(prompt: str, log_name: str = "unnamed", timeout: int = 600, agent: str = None, max_turns: int = 10) -> dict:
     """
     Execute AI CLI (claude or openclaude) with streaming output.
 
@@ -207,6 +245,7 @@ def run_claude(prompt: str, log_name: str = "unnamed", timeout: int = 600, agent
         log_name: Name for logs
         timeout: Timeout in seconds
         agent: Agent name (.claude/agents/*.md) — if None, runs without agent
+        max_turns: Maximum CLI tool-use turns before stopping the run
     """
     cli_command, provider_env = _get_provider_config()
 
@@ -214,13 +253,83 @@ def run_claude(prompt: str, log_name: str = "unnamed", timeout: int = 600, agent
         agent_label = f"@{agent}"
     else:
         agent_label = ""
+
+    use_fallback = os.environ.get("ADW_PROVIDER_FALLBACK", "1").lower() not in (
+        "0", "false", "no",
+    )
+    if use_fallback:
+        try:
+            sys.path.insert(0, str(WORKSPACE / "dashboard" / "backend"))
+            from provider_fallback import invoke_with_fallback
+
+            provider_label = "[fallback]"
+            console.print(f"  [step]▶[/step] {log_name} [dim]{agent_label} {provider_label}[/dim]", end="")
+            start_time = datetime.now()
+            result = invoke_with_fallback(
+                prompt=prompt,
+                max_turns=max_turns,
+                timeout_seconds=timeout,
+                agent=agent or "",
+            )
+            duration = (datetime.now() - start_time).total_seconds()
+            stdout = result.get("output", "") or ""
+            stderr = result.get("error", "") or ""
+            success = result.get("status") == "success"
+
+            usage = None
+            if result.get("tokens_in") is not None or result.get("tokens_out") is not None or result.get("cost_usd") is not None:
+                usage = {
+                    "input_tokens": result.get("tokens_in") or 0,
+                    "output_tokens": result.get("tokens_out") or 0,
+                    "cache_creation_tokens": result.get("cache_creation_tokens") or 0,
+                    "cache_read_tokens": result.get("cache_read_tokens") or 0,
+                    "cost_usd": result.get("cost_usd") or 0,
+                }
+
+            result_text = stdout
+            try:
+                json_result = json.loads(stdout)
+                usage = usage or _parse_usage(json_result)
+                result_text = json_result.get("result", stdout)
+            except (json.JSONDecodeError, TypeError, AttributeError):
+                pass
+
+            full_prompt = f"[agent:{agent}] {prompt}" if agent else prompt
+            returncode = 0 if success else 1
+            _log_to_file(log_name, full_prompt, result_text, stderr, returncode, duration, usage)
+            _save_metrics(log_name, duration, returncode, agent, result_text, usage)
+
+            model_info = f" | {result.get('provider_id')}:{result.get('model')}" if result.get("provider_id") else ""
+            if success:
+                cost_str = ""
+                if usage:
+                    tokens_total = usage["input_tokens"] + usage["output_tokens"]
+                    cost_str = f" | {tokens_total:,}tok | ${usage['cost_usd']:.2f}"
+                console.print(f"\r  [success]✓[/success] {log_name} [dim]({duration:.0f}s{cost_str}{model_info})[/dim]")
+            else:
+                console.print(f"\r  [error]✗[/error] {log_name} [dim](fallback exhausted, {duration:.0f}s{model_info})[/dim]")
+                if stderr:
+                    for err_line in stderr.strip().splitlines()[:3]:
+                        console.print(f"    [error]{err_line}[/error]")
+
+            return {
+                "success": success,
+                "stdout": result_text,
+                "stderr": stderr,
+                "returncode": returncode,
+                "duration": duration,
+                "usage": usage,
+            }
+        except Exception as e:
+            console.print(f"\r  [warning]⚠[/warning] {log_name} [dim](fallback unavailable: {e}; using active provider)[/dim]")
+
     provider_label = f"[{cli_command}]" if cli_command != "claude" else ""
     console.print(f"  [step]▶[/step] {log_name} [dim]{agent_label} {provider_label}[/dim]", end="")
 
     start_time = datetime.now()
 
     try:
-        process = _spawn_cli(cli_command, prompt, agent, provider_env)
+        process = _spawn_cli(cli_command, prompt, agent, provider_env, max_turns)
 
         stdout_lines = []
         line_count = 0
@@ -298,6 +407,7 @@ def run_skill(
     timeout: int = 600,
     agent: str = None,
     notify_telegram: bool | str = False,
+    notify_whatsapp: bool | str = False,
 ) -> dict:
     """Execute a skill via CLI, optionally with an agent.
 
@@ -307,10 +417,17 @@ def run_skill(
             True            — Python sends ONE Telegram after the skill; reads
                               chat_id from TELEGRAM_CHAT_ID env var.
             "<chat_id>"     — same as True but overrides the chat_id.
+        notify_whatsapp: Controls post-skill WhatsApp notification (via the
+            Evolution Go "sistema-britto" instance — see
+            dashboard/backend/notifications.py::send_whatsapp).
+            False (default) — no notification.
+            True            — Python sends ONE WhatsApp after the skill; reads
+                              the destination phone from WHATSAPP_PHONE env var.
+            "<phone>"       — same as True but overrides the phone number.
 
-    The agent is asked to output a line "TELEGRAM_MSG: <text>" in its stdout.
-    Python reads that line and calls send_telegram() exactly once.
-    The agent NEVER calls the Telegram MCP tool directly.
+    The agent is asked to output a line "TELEGRAM_MSG: <text>" / "WHATSAPP_MSG:
+    <text>" in its stdout. Python reads that line and sends exactly once per
+    channel. The agent NEVER calls the Telegram/WhatsApp tools directly.
     """
     chat_id = None
     if notify_telegram:
@@ -320,6 +437,14 @@ def run_skill(
             else os.environ.get("TELEGRAM_CHAT_ID", "")
         ) or None
 
+    whatsapp_phone = None
+    if notify_whatsapp:
+        whatsapp_phone = (
+            notify_whatsapp
+            if isinstance(notify_whatsapp, str)
+            else os.environ.get("WHATSAPP_PHONE", "")
+        ) or None
+
     prompt = f"Execute the skill /{skill_name} {args}".strip()
     if chat_id:
         prompt += (
@@ -330,22 +455,63 @@ def run_skill(
             f"o sistema Python lê essa linha e envia a notificação automaticamente.\n"
             f"---"
         )
+    if whatsapp_phone:
+        prompt += (
+            f"\n\n---\n"
+            f"Ao finalizar, escreva na última linha do output:\n"
+            f"WHATSAPP_MSG: [emoji] [nome da rotina] [data] | [resultado 1] | [resultado 2]\n"
+            f"Apenas UMA linha WHATSAPP_MSG:. NÃO use nenhuma ferramenta de WhatsApp — "
+            f"o sistema Python lê essa linha e envia a notificação automaticamente.\n"
+            f"---"
+        )
 
     result = run_claude(prompt, log_name or skill_name, timeout, agent=agent)
 
-    if chat_id and result.get("returncode", -1) == 0:
+    if result.get("returncode", -1) == 0:
         stdout = result.get("stdout", "")
-        for line in reversed(stdout.splitlines()):
-            line = line.strip()
-            if line.startswith("TELEGRAM_MSG:"):
-                msg = line[len("TELEGRAM_MSG:"):].strip()
-                if msg:
-                    send_telegram(msg, chat_id=chat_id)
-                break  # only ever send one message
+        if chat_id:
+            for line in reversed(stdout.splitlines()):
+                line = line.strip()
+                if line.startswith("TELEGRAM_MSG:"):
+                    msg = line[len("TELEGRAM_MSG:"):].strip()
+                    if msg:
+                        send_telegram(msg, chat_id=chat_id)
+                    break  # only ever send one message
+        if whatsapp_phone:
+            for line in reversed(stdout.splitlines()):
+                line = line.strip()
+                if line.startswith("WHATSAPP_MSG:"):
+                    msg = line[len("WHATSAPP_MSG:"):].strip()
+                    if msg:
+                        send_whatsapp(msg, whatsapp_phone)
+                    break  # only ever send one message
 
     return result
 
 
+def send_whatsapp(text: str, phone: str) -> bool:
+    """Send a WhatsApp message via the dashboard backend's Evolution Go
+    integration (Sistema Britto's own "sistema-britto" instance).
+
+    Delegates to dashboard/backend/notifications.py::send_whatsapp instead of
+    duplicating the Evolution Go HTTP call — that module already owns
+    EVOLUTION_GO_URL/KEY/INSTANCE resolution, and ADWs/routines/daily_status_report.py
+    already imports it the same way.
+    """
+    sys.path.insert(0, str(WORKSPACE / "dashboard" / "backend"))
+    try:
+        from notifications import send_whatsapp as _send_whatsapp
+    except ImportError:
+        console.print("  [warning]⚠ WhatsApp not available (notifications module import failed)[/warning]")
+        return False
+    ok = _send_whatsapp(text, phone)
+    if ok:
+        console.print("  [success]✓[/success] WhatsApp enviado")
+    else:
+        console.print("  [warning]⚠ WhatsApp not configured or send failed[/warning]")
+    return ok
+
+
 def run_script(func, log_name: str = "unnamed", timeout: int = 120) -> dict:
     """
     Execute a pure Python function (no Claude CLI, no AI, no tokens).
diff --git a/CHANGELOG.md b/CHANGELOG.md
index c1a796f8d..d0e8cce88 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -5,6 +5,27 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [0.33.0] - 2026-04-25
+
+Plugin contract release. Five PRs merged in one day to unblock the EvoNexus Plugin Nutri (and any future plugin needing per-endpoint role enforcement, public token-bound portals, or safe uninstall). Plus a UX fix so `409 CONFLICT` from plugin install actually says *why* it conflicted.
+
+### Added
+
+- **`requires_role` on `PluginWritableResource`** (PR #55) — plugins can declare a list of roles allowed on each writable endpoint. The host returns `403` when `current_user.role` is not in the list. `'admin'` always passes (super-user override). Backwards compatible: resources without the field accept any authenticated user.
+- **Auto-injected readonly bind params** (PR #55) — every `readonly_data` query receives `:current_user_id` and `:current_user_role` server-side. Plugins reference them directly in SQL for scoping (`WHERE primary_nutritionist_id = :current_user_id`). Both names are reserved — clients that try to spoof them via `?current_user_id=...` get `400`.
+- **`public_pages` capability** (PR #53) — token-bound public portals at `/p/{slug}/{route_prefix}/{token}`. Token validated against a plugin-declared `token_source.column`. CSP, rate limit, and security headers applied. Read-only `readonly_data` queries can be exposed to the portal via `public_via` + `bind_token_param`.
+- **HTML shell content negotiation** (PR #56) — when a request includes `text/html` in `Accept`, the host renders a minimal HTML shell that loads the plugin bundle as a module and instantiates the declared custom element with `data-token`. Programmatic clients (`Accept: application/javascript`, default `*/*`) keep getting the raw bundle. Plugins ship a single JS bundle and get a working browser experience for free.
+- **`safe_uninstall` capability** (PR #54) — three-step uninstall wizard with `preserved_tables` (renamed to `_orphan_{slug}_*` instead of dropped), pre-uninstall hook (sandboxed: read-only DB, no `BRAIN_REPO_MASTER_KEY`), and required user confirmation (checkbox + typed phrase + ZIP password). Reinstall verifies SHA256 and restores access to preserved data.
+- **Rate limit + security headers** (PR #52) — `flask-limiter` with in-memory storage on the public share endpoint and any future `/p/...` route. Five security headers applied to public responses (`Referrer-Policy`, `Cache-Control: no-store`, HSTS, `X-Content-Type-Options`, `Pragma`).
+
+### Fixed
+
+- **Plugin install wizard now shows the actual reason for `409 CONFLICT`.** The frontend was treating any 4xx as an opaque error string. Now `buildError` in `lib/api.ts` falls back to `data.conflicts[0]` when the standard `error`/`message` fields are absent (which is the case for the plugin preview endpoint), so a version mismatch shows up as `"409 CONFLICT: Plugin 'nutri' requires EvoNexus >= 0.33.0, but installed version is 0.32.3."` instead of just `"409 CONFLICT"`. `PluginInstallModal` also fixes the type of `conflicts` (was `Record<string, unknown>`, the backend always returned `string[]`) and renders each conflict as a list item.
+
+### Compat
+
+- All existing plugins (PM Essentials, etc.) work unchanged. New manifest fields default to absent / `None` and the auto-injected bind params are silently ignored if the SQL doesn't reference them. The `409` body shape for plugin install was already `{conflicts: [...], manifest, ...}` — only the frontend's interpretation changed.
+
 ## [0.32.3] - 2026-04-25
 
 Patch release fixing a long-standing Workspace UI bug where folders refused to open and the dev console flooded with `400 Path is a directory` requests, plus a small UX win on the file share dialog (reuse existing share links instead of generating a new token every time). Also includes the upstream PR #51 (private-repo plugin update flow + ClickUp webhook compat + DetachedInstanceError).
diff --git a/Dockerfile b/Dockerfile
index 9785ec052..291840e5a 100644
--- a/Dockerfile
+++ b/Dockerfile
@@ -14,9 +14,11 @@ ENV PATH="/root/.local/bin:$PATH"
 RUN npm install -g @anthropic-ai/claude-code
 
 # Install OpenClaude CLI (required for non-Anthropic providers: OpenAI, Codex OAuth, OpenRouter, Gemini, etc.)
-# Pin to @latest to avoid the npm dist-tag lag; min supported is 0.3.0
-# (first version with the Codex shortcut endpoint fix, openclaude#566).
-RUN npm install -g @gitlawb/openclaude@latest
+# Pinned to a tested version instead of @latest — floating @latest meant every
+# image rebuild could silently change CLI behavior (backoff, error bodies,
+# provider rotation) without anyone testing the new release first. Bump this
+# deliberately after validating the new version, not automatically.
+RUN npm install -g @gitlawb/openclaude@0.23.0
 
 # Install GitHub CLI
 RUN curl -fsSL https://cli.github.com/packages/githubcli-archive-keyring.gpg | dd of=/usr/share/keyrings/githubcli-archive-keyring.gpg \
diff --git a/Dockerfile.dev b/Dockerfile.dev
index 86f7ca5b6..80bd41357 100644
--- a/Dockerfile.dev
+++ b/Dockerfile.dev
@@ -32,9 +32,10 @@ RUN apt-get update && apt-get install -y --no-install-recommends \
     && rm -rf /var/lib/apt/lists/*
 
 # CLIs usadas pelo terminal embutido (/agents) e pela página de providers (/providers)
+# openclaude pinado (não @latest) — ver Dockerfile principal para o motivo.
 RUN npm install -g \
         @anthropic-ai/claude-code \
-        @gitlawb/openclaude@latest
+        @gitlawb/openclaude@0.23.0
 
 # uv
 RUN curl -LsSf https://astral.sh/uv/install.sh | sh
diff --git a/Dockerfile.media-worker b/Dockerfile.media-worker
new file mode 100644
index 000000000..cce7d80f4
--- /dev/null
+++ b/Dockerfile.media-worker
@@ -0,0 +1,128 @@
+# ============================================================================
+# Dockerfile.media-worker — social-media-production render worker
+#
+# Isolated Swarm service (replicas=1) that runs the CPU-heavy part of the
+# social-media pipeline: OpenCode/HyperFrames composition, deterministic
+# HyperFrames render, ffprobe validation. Never runs inside the dashboard
+# web process (Etapa 3). Talks to the dashboard exclusively through
+# DASHBOARD_API_TOKEN + /api/media/jobs/* — no direct DB/socket access.
+#
+# Root is /workspace (not /app) deliberately: provider_fallback.py resolves
+# its WORKSPACE constant as two parents up from its own file location
+# (dashboard/backend/provider_fallback.py -> repo root) to find
+# config/providers.json and .env — mirroring the exact layout of
+# Dockerfile.swarm/Dockerfile.swarm.dashboard means that resolution, and the
+# evonexus_config volume mount path, need no special-casing for this image.
+#
+# System dependencies below were verified, not guessed: built and ran
+# `hyperframes doctor` inside this exact image (see
+# workspace/development/features/social-media-production/ for the report) —
+# every apt package here is required to turn Chrome from "missing shared
+# library" into a passing doctor check on node:22-slim (Debian 12/bookworm).
+# ============================================================================
+FROM node:22-slim
+
+RUN apt-get update && apt-get install -y --no-install-recommends \
+        python3 python3-pip python3-venv \
+        curl ca-certificates git jq unzip \
+        ffmpeg \
+        # Headless Chrome runtime deps (Debian 12/bookworm package names —
+        # verified via `hyperframes doctor` inside this image, not guessed).
+        fonts-liberation fonts-noto-color-emoji \
+        libasound2 libatk-bridge2.0-0 libatk1.0-0 libatspi2.0-0 libcairo2 \
+        libcups2 libdbus-1-3 libdrm2 libexpat1 libgbm1 libglib2.0-0 \
+        libgtk-3-0 libnspr4 libnss3 libpango-1.0-0 libx11-6 libx11-xcb1 \
+        libxcb1 libxcomposite1 libxdamage1 libxext6 libxfixes3 libxkbcommon0 \
+        libxrandr2 xdg-utils \
+    && rm -rf /var/lib/apt/lists/*
+
+RUN curl -LsSf https://astral.sh/uv/install.sh | sh
+ENV PATH="/root/.local/bin:${PATH}"
+
+# opencode CLI — pinned to the same version as Dockerfile.swarm /
+# Dockerfile.swarm.dashboard (never @latest — see those files for why).
+ARG CACHEBUST=1
+RUN npm install -g opencode-ai@1.17.18
+
+ENV TZ=America/Bahia
+RUN ln -snf /usr/share/zoneinfo/${TZ} /etc/localtime && echo "${TZ}" > /etc/timezone
+
+WORKDIR /workspace
+
+# HyperFrames — deterministic install (Etapa 4): package.json + lockfile,
+# `npm ci`, pinned version (0.7.64, verified against npm registry
+# 2026-07-19). Never `npx hyperframes` without this lockfile on the render
+# critical path.
+COPY media_worker/package.json media_worker/package-lock.json ./
+RUN npm ci
+
+# chrome-headless-shell — the officially recommended browser for HyperFrames'
+# optimized capture path (`hyperframes doctor` prints this exact command when
+# only a regular Chrome/Chromium is available). Pinned by whatever
+# @puppeteer/browsers resolves for this Node/Chrome-for-Testing release at
+# build time; rebuild to pick up a newer Chrome-for-Testing release.
+RUN npx --yes @puppeteer/browsers install chrome-headless-shell \
+    && CHS_BIN="$(find /workspace/chrome-headless-shell -type f -name 'chrome-headless-shell' | head -1)" \
+    && ln -s "$CHS_BIN" /usr/local/bin/chrome-headless-shell
+ENV HYPERFRAMES_BROWSER_PATH=/usr/local/bin/chrome-headless-shell
+
+# media_render.py resolves the hyperframes binary relative to the job's own
+# project/ directory first (no per-job node_modules — each job is a fresh
+# composition, not a fresh npm install) and falls back to PATH — put the one
+# pinned install on PATH so every job finds the same deterministic binary.
+RUN ln -s /workspace/node_modules/.bin/hyperframes /usr/local/bin/hyperframes
+
+# Python deps — minimal on purpose (media_executor/media_render/
+# media_validation/media_manifest/media_workspace/postiz_client/
+# provider_fallback/sdk_client only need requests + jsonschema; the worker
+# never imports Flask/SQLAlchemy/chromadb — those stay in the dashboard image).
+COPY media_worker/requirements.txt /workspace/media_worker/requirements.txt
+# --break-system-packages: node:22-slim's Python 3.11 is Debian-managed
+# (PEP 668) and refuses system-wide pip installs by default. Safe here — the
+# container has no other Python workload to conflict with.
+RUN uv pip install --system --break-system-packages -r /workspace/media_worker/requirements.txt
+
+# Application code — the worker script plus the specific dashboard/backend
+# modules it imports directly (not via HTTP; only DB/RBAC-facing operations
+# go through the API — see media_worker/worker.py's module docstring).
+COPY media_worker/worker.py /workspace/media_worker/worker.py
+COPY dashboard/backend/sdk_client.py \
+     dashboard/backend/provider_fallback.py \
+     dashboard/backend/media_executor.py \
+     dashboard/backend/media_render.py \
+     dashboard/backend/media_validation.py \
+     dashboard/backend/media_manifest.py \
+     dashboard/backend/media_workspace.py \
+     dashboard/backend/media_state_machine.py \
+     dashboard/backend/postiz_client.py \
+     /workspace/dashboard/backend/
+
+# opencode needs its own provider config discoverable via
+# ~/.config/opencode/opencode.json (same mechanism as Dockerfile.swarm.dashboard) —
+# scoped here to just the HyperFrames + social-media-production skills
+# (Etapa 5 / ADR-6), never the full 199-skill catalog.
+COPY media_worker/opencode.json /root/.config/opencode/opencode.json
+COPY .claude/skills-media /workspace/.claude/skills-media
+# Canonical source is .claude/skills/social-media-production/ (same
+# convention as every other EvoNexus skill) — copied into the worker's
+# scoped skills directory at build time rather than duplicated on disk.
+COPY .claude/skills/social-media-production /workspace/.claude/skills-media/social-media-production
+
+# config/.env are provided by the evonexus_config volume at runtime; these
+# empty placeholders only satisfy path checks so the build-time verification
+# steps below (opencode --version, hyperframes doctor) don't need a live
+# volume mounted during `docker build`.
+RUN mkdir -p /workspace/config /workspace/workspace/.locks
+
+# Build-time verification (briefing Etapa 4: "Crie um teste de build que
+# falhe quando essas dependências não estiverem disponíveis"). Fails the
+# image build if Chrome/FFmpeg/Node aren't all green.
+RUN hyperframes doctor || (echo "hyperframes doctor reported a hard failure" && exit 1)
+RUN ffmpeg -version && ffprobe -version && opencode --version
+
+LABEL org.opencontainers.image.title="evo-nexus-media-worker" \
+      org.opencontainers.image.description="social-media-production render worker (HyperFrames + OpenCode via OmniRoute + FFmpeg)" \
+      org.opencontainers.image.source="https://github.com/EvolutionAPI/evo-nexus" \
+      org.opencontainers.image.licenses="MIT"
+
+CMD ["python3", "media_worker/worker.py"]
diff --git a/Dockerfile.swarm b/Dockerfile.swarm
index e49b69ce9..a403fd94d 100644
--- a/Dockerfile.swarm
+++ b/Dockerfile.swarm
@@ -26,14 +26,33 @@ RUN apt-get update && apt-get install -y --no-install-recommends \
 RUN curl -LsSf https://astral.sh/uv/install.sh | sh
 ENV PATH="/root/.local/bin:${PATH}"
 
+# Cache-buster: docker-publish-britto.yml builds with cache-from/cache-to
+# type=gha, so without this the block below stays cached forever across CI
+# runs and "@latest" silently freezes at whatever version first built the
+# layer. Passing a build-arg that changes every run (e.g. github.run_id)
+# invalidates this layer and everything after it, forcing a fresh npm/apt
+# install on every stack deploy.
+ARG CACHEBUST=1
+
 # Install Claude Code CLI (default provider)
 RUN npm install -g @anthropic-ai/claude-code
 
-# Install OpenClaude CLI — pinned to @latest which is ≥0.3.0 (the first
-# release with the Codex shortcut endpoint fix that resolves the
-# api.responses.write scope issue). Upstream setup.py also installs @latest
-# so Swarm and VPS behavior stay aligned.
-RUN npm install -g @gitlawb/openclaude@latest
+# Install OpenClaude CLI — pinned to a tested version instead of @latest.
+# Floating @latest meant every Swarm redeploy could silently ship a new CLI
+# release (backoff, error-body, provider-rotation behavior all changed
+# under us across recent releases) without anyone testing it first. Bump
+# this deliberately after validating the new version.
+RUN npm install -g @gitlawb/openclaude@0.23.0
+
+# Install opencode CLI — provider "opencode_omnirouter" (spike, ver
+# workspace/development/features/runtime-harness-agnostic-eval/). Pinned
+# pela mesma razão do openclaude acima.
+RUN npm install -g opencode-ai@1.17.18
+
+# sharp — optional peer dep the CLI's own Read tool needs to process image
+# files (photos, reference images, screenshots). Without it, Read on any
+# image fails every time with "image support is not installed".
+RUN npm install -g sharp
 
 # GitHub CLI
 RUN curl -fsSL https://cli.github.com/packages/githubcli-archive-keyring.gpg \
@@ -46,6 +65,10 @@ RUN curl -fsSL https://cli.github.com/packages/githubcli-archive-keyring.gpg \
 # Todoist CLI (used by int-todoist skill)
 RUN npm install -g todoist-ts-cli
 
+# Bun — required by Claude Code channel plugins (the telegram channel's
+# start script is `bun install && bun server.ts`)
+RUN npm install -g bun
+
 # Timezone (default America/Sao_Paulo, override via TZ env var)
 ENV TZ=America/Sao_Paulo
 RUN ln -snf /usr/share/zoneinfo/${TZ} /etc/localtime && echo "${TZ}" > /etc/timezone
@@ -54,11 +77,27 @@ WORKDIR /workspace
 
 # Python deps (cache-friendly layer)
 COPY pyproject.toml uv.lock ./
-RUN uv venv .venv && uv sync
+RUN uv venv .venv && uv sync --no-dev
+
+# LiteLLM proxy — fronts NVIDIA NIM with an Anthropic-compatible /v1/messages
+# endpoint so `claude --channels` (Telegram bot) can run without an Anthropic
+# key. Used by scripts/telegram_swarm_entry.sh.
+RUN uv pip install --python .venv/bin/python 'litellm[proxy]'
 
 # Application code — everything else
 COPY . .
 
+# .claude/settings.json ships CLAUDE_CODE_EXPERIMENTAL_AGENT_TEAMS=1, which
+# isolates background sub-agents in a git worktree. COPY only brings tracked
+# files, never .git, so /workspace has no repo and every background-agent
+# launch inside the container fails with "not in a git repository and no
+# WorktreeCreate hooks are configured". An empty repo is enough for worktree
+# creation to succeed.
+RUN cd /workspace && git init -q \
+    && git config user.email "bot@evonexus.local" \
+    && git config user.name "EvoNexus" \
+    && git commit -q --allow-empty -m "baseline (image build)"
+
 # Stash first-boot defaults somewhere the bootstrap entrypoint can find them.
 # /workspace/config is a writable volume in Swarm; on first boot entrypoint.sh
 # copies these seeds into it so the dashboard has something to edit.
@@ -70,6 +109,14 @@ RUN mkdir -p /workspace/_defaults/config \
           cp /workspace/.env.example /workspace/_defaults/.env.example; \
        fi
 
+# Stash .claude so the entrypoint can re-seed built-ins into the mounted
+# /workspace/.claude volume on every boot (custom-*/plugin-* files persist).
+# agent-memory is excluded — it has its own volume and must never be reset.
+RUN if [ -d /workspace/.claude ]; then \
+          cp -a /workspace/.claude /workspace/_defaults/claude \
+          && rm -rf /workspace/_defaults/claude/agent-memory; \
+       fi
+
 # Bootstrap / secrets-to-env / wait-for-config wrapper
 COPY entrypoint.sh /usr/local/bin/entrypoint.sh
 RUN chmod +x /usr/local/bin/entrypoint.sh
diff --git a/Dockerfile.swarm.dashboard b/Dockerfile.swarm.dashboard
index e19a2f237..f60f4b585 100644
--- a/Dockerfile.swarm.dashboard
+++ b/Dockerfile.swarm.dashboard
@@ -43,7 +43,7 @@ FROM python:3.12-slim AS runtime
 # System deps: curl for healthcheck + Node.js 22 for terminal-server binary.
 # We use NodeSource so the final image is clean (no build toolchain).
 RUN apt-get update && apt-get install -y --no-install-recommends \
-        curl ca-certificates gnupg openssl \
+        curl ca-certificates git gnupg openssl \
     && curl -fsSL https://deb.nodesource.com/setup_22.x | bash - \
     && apt-get install -y --no-install-recommends nodejs \
     && apt-get clean \
@@ -53,12 +53,31 @@ RUN apt-get update && apt-get install -y --no-install-recommends \
 RUN curl -LsSf https://astral.sh/uv/install.sh | sh
 ENV PATH="/root/.local/bin:${PATH}"
 
-# Both CLIs — the Providers page in the UI switches between them at runtime.
-# @gitlawb/openclaude@latest is pinned to the npm dist-tag which as of the
-# current fix is ≥0.3.0 (first version with the Codex shortcut endpoint).
+# Cache-buster: docker-publish-britto.yml builds with cache-from/cache-to
+# type=gha, so without this the block below stays cached forever across CI
+# runs and "@latest" silently freezes at whatever version first built the
+# layer. Passing a build-arg that changes every run (e.g. github.run_id)
+# invalidates this layer, forcing a fresh npm install on every stack deploy.
+ARG CACHEBUST=1
+
+# CLIs — the Providers page in the UI switches between them at runtime.
+# @gitlawb/openclaude is pinned to a tested version instead of @latest —
+# floating @latest meant every redeploy could silently ship a new CLI release
+# without anyone testing it first. Bump deliberately after validating.
+# @openai/codex is used only to run the supported Codex device-auth flow and
+# persist ~/.codex/auth.json for OpenClaude's codex_auth provider.
+# sharp is an optional peer dep the CLI's own Read tool needs to process
+# image files (photos, reference images, screenshots) — without it, Read
+# on any image fails with "image support is not installed" every time.
+# opencode-ai é o provider "opencode_omnirouter" (spike, ver
+# workspace/development/features/runtime-harness-agnostic-eval/) — pinado
+# pela mesma razão do openclaude acima.
 RUN npm install -g \
         @anthropic-ai/claude-code \
-        @gitlawb/openclaude@latest
+        @gitlawb/openclaude@0.23.0 \
+        opencode-ai@1.17.18 \
+        @openai/codex \
+        sharp
 
 # Timezone
 ENV TZ=America/Sao_Paulo
@@ -70,16 +89,37 @@ WORKDIR /workspace
 COPY pyproject.toml uv.lock ./
 RUN uv venv .venv && uv sync --no-dev
 
+# MemPalace (Base de Conhecimento — busca semântica local, chromadb).
+# Pré-instalado na imagem: o install via botão do dashboard cai na layer do
+# container e some a cada redeploy; os dados (chroma/sources) persistem no
+# volume dashboard/data.
+RUN uv pip install --python .venv/bin/python mempalace
+
 # Application code
 COPY dashboard/       dashboard/
 COPY social-auth/     social-auth/
 COPY scheduler.py     ./
+COPY backup.py        ./
 COPY .claude/         .claude/
 COPY memory/          memory/
 COPY ADWs/            ADWs/
 COPY config/          config/
+COPY docs/            docs/
 COPY Makefile         ./
 COPY .env.example     ./
+# Config do provider "opencode_omnirouter" (baseURL/apiKey do OmniRoute) —
+# heartbeats rodam neste container (Flask+terminal-server+heartbeats).
+COPY opencode.json    ./
+# `opencode run` só descobre esse provider customizado subindo diretórios a
+# partir do seu cwd até achar um opencode.json — funciona pra sessões cujo
+# workingDir está sob /workspace, mas NÃO pra sessões com workingDir fora
+# dessa árvore (ex.: pastas de agente fora do repo). Copiar pro config
+# global do XDG (~/.config/opencode, container roda como root => /root)
+# resolve isso: é encontrado não importa o cwd da sessão. Confirmado ao vivo
+# 2026-07-14 — sem isso, `-m opencode/auto` falha com
+# "ProviderModelNotFoundError: Model not found: opencode/auto." fora de
+# /workspace (mascarado como "Unexpected server error" genérico no NDJSON).
+RUN mkdir -p /root/.config/opencode && cp opencode.json /root/.config/opencode/opencode.json
 
 # Pre-compiled terminal-server node_modules from stage 2
 COPY --from=terminal-build /terminal/node_modules dashboard/terminal-server/node_modules
@@ -90,11 +130,28 @@ COPY --from=frontend-build /frontend/dist dashboard/frontend/dist
 # SQLite data dir (matches upstream Dockerfile.dashboard)
 RUN mkdir -p dashboard/data
 
+# .claude/settings.json ships CLAUDE_CODE_EXPERIMENTAL_AGENT_TEAMS=1, which
+# isolates background sub-agents in a git worktree. COPY only brings tracked
+# files, never .git, so /workspace has no repo and every background-agent
+# launch inside the container fails with "not in a git repository and no
+# WorktreeCreate hooks are configured". An empty repo is enough for worktree
+# creation to succeed.
+RUN cd /workspace && git init -q \
+    && git config user.email "bot@evonexus.local" \
+    && git config user.name "EvoNexus" \
+    && git commit -q --allow-empty -m "baseline (image build)"
+
 # First-boot defaults for the bootstrap entrypoint (writable config volume)
 RUN mkdir -p /workspace/_defaults/config \
     && cp -a /workspace/config/. /workspace/_defaults/config/ 2>/dev/null || true \
     && cp /workspace/.env.example /workspace/_defaults/.env.example 2>/dev/null || true
 
+# Stash .claude so the entrypoint can re-seed built-ins into the mounted
+# /workspace/.claude volume on every boot (custom-*/plugin-* files persist).
+# agent-memory is excluded — it has its own volume and must never be reset.
+RUN cp -a /workspace/.claude /workspace/_defaults/claude \
+    && rm -rf /workspace/_defaults/claude/agent-memory
+
 # Bootstrap wrapper (config volume + source .env + wait-for-key)
 COPY entrypoint.sh /usr/local/bin/entrypoint.sh
 RUN chmod +x /usr/local/bin/entrypoint.sh
diff --git a/HANDOFF-evo-nexus-backup-restore-plugins.md b/HANDOFF-evo-nexus-backup-restore-plugins.md
new file mode 100644
index 000000000..7a86e03d9
--- /dev/null
+++ b/HANDOFF-evo-nexus-backup-restore-plugins.md
@@ -0,0 +1,402 @@
+# Handoff: Restore VPS, Backup SQLite e Plugins 500
+
+Data: 2026-07-05  
+Status: em andamento
+
+## 1. Objetivo
+
+Restaurar corretamente o EvoNexus na VPS a partir de um backup local, sem perder integrações, plugins, dados do dashboard e workspace. Durante a restauração foi descoberto que o backup atual pode capturar bancos SQLite em estado inconsistente por copiar `*.db` sem incluir/aplicar WAL, causando `database disk image is malformed` no container. Também surgiu um erro novo: a área de plugins está retornando `500 Internal Server Error`, e localmente a aplicação está pedindo criação de usuário, indicando divergência de DB/config entre ambiente local e VPS.
+
+## 2. Contexto essencial
+
+- Repositório local: `/home/sistemabritto/Documentos/evo-nexus`.
+- Stack VPS: Docker Swarm, serviço principal `evonexus_evonexus_dashboard`.
+- Imagens usadas na VPS:
+  - `excarplex/evo-nexus-dashboard:latest`
+  - `excarplex/evo-nexus-runtime:latest`
+- Stack file local relevante: `evonexus-vps.stack.yml`.
+- O dashboard usa SQLite em `/workspace/dashboard/data/evonexus.db`.
+- Na VPS, o mount real do DB do dashboard é:
+  - `evonexus_evonexus_dashboard_data -> /workspace/dashboard/data`
+- A configuração persistente e integrações passam por `/workspace/config/.env`.
+- O entrypoint faz symlink:
+  - `/workspace/.env -> /workspace/config/.env`
+- Portanto, o `.env` correto em Swarm é o do volume `config`, não um arquivo solto dentro da imagem.
+- O stack monta `/workspace/config`, mas não monta `/workspace/.env` diretamente. Isso é esperado porque o entrypoint cria o symlink.
+- Integrações core são avaliadas por variáveis de ambiente carregadas de `.env`, conforme `dashboard/backend/routes/integrations.py`.
+- O backup local atual inclui `.env` e `dashboard/data/evonexus.db`, mas o script atual exclui `.db-wal` e `.db-shm`.
+- Isso é perigoso quando SQLite está em WAL: copiar só o `.db` pode gerar backup sem transações recentes ou até malformado.
+- O usuário pediu para corrigir o backup e fazer push para GitHub, mas interrompeu antes da edição.
+- O usuário agora quer handoff para continuar com Fable/outra sessão.
+
+## 3. O que já foi feito
+
+1. Analisamos logs iniciais da VPS.
+   - O endpoint `POST /api/backups/<zip>/restore` retornava `202`.
+   - Isso significa apenas “job aceito”, não “restore concluído”.
+
+2. Foi identificado um bug de UX/API no restore:
+   - `dashboard/backend/routes/backups.py` guarda `_running_jobs["restore"]`.
+   - Mas `/api/backups/status` retorna só `_running_jobs["backup"]`.
+   - Resultado: o frontend não mostra erro/conclusão real do restore.
+
+3. Foi identificado que o frontend usa restore em modo `merge` por padrão.
+   - Em `merge`, arquivos existentes não são sobrescritos.
+   - Isso explicava parcialmente “subiu mas não apareceu nada”.
+   - O usuário refez via browser com `replace`.
+
+4. O restore via browser continuou sem visibilidade real.
+   - Foi recomendado rodar restore manual dentro do container.
+
+5. Na VPS, `docker ps` mostrou container do dashboard:
+   - ID inicial usado: `59573e9af77c`
+   - Nome: `evonexus_evonexus_dashboard.1...`
+
+6. Descobrimos que a imagem da VPS não contém `/workspace/backup.py`.
+   - Existe apenas `/workspace/ADWs/routines/backup.py`.
+   - Então foi usado um script Python inline para extrair o ZIP diretamente.
+
+7. O usuário restaurou o ZIP manualmente dentro do container:
+   - ZIP: `/workspace/backups/evonexus-backup-20260704-203851.zip`
+   - Saída:
+     - `created_at: 2026-07-04T20:38:51.761046`
+     - `file_count: 580`
+     - `RESTORE COMPLETE`
+     - `restored: 580`
+
+8. Após restart do serviço, o dashboard entrou em crash loop.
+   - Logs mostraram:
+     - `sqlite3.DatabaseError: database disk image is malformed`
+     - SQL: `PRAGMA main.table_info("users")`
+   - Causa provável: `evonexus.db` restaurado veio inconsistente/corrompido.
+
+9. Tentamos recuperar SQLite com `.recover`.
+   - Primeiro foi usado o volume errado por suspeita de nome.
+   - Depois o usuário inspecionou mounts e confirmou o volume correto:
+     - `evonexus_evonexus_dashboard_data -> /workspace/dashboard/data`
+
+10. O usuário pausou o dashboard:
+    - `docker service scale evonexus_evonexus_dashboard=0`
+
+11. O usuário rodou recovery no volume correto.
+    - Houve um erro intermediário por comando quebrado em múltiplas linhas e por falta de espaço em `sqlite3 evonexus.db ".recover"`.
+    - Isso gerou um `evonexus.db` vazio e a aplicação passou a pedir setup/criação de usuário.
+    - Esse caminho foi descartado porque zerou o DB.
+
+12. Recuperamos a partir do backup `evonexus.db.bad.manual`.
+    - Comando usado:
+      ```bash
+      docker run --rm -v evonexus_evonexus_dashboard_data:/data alpine sh -lc 'apk add --no-cache sqlite >/dev/null; cd /data; rm -f evonexus.db evonexus.db-wal evonexus.db-shm; sqlite3 evonexus.db.bad.manual ".recover" | sqlite3 evonexus.db; sqlite3 evonexus.db "PRAGMA integrity_check;"; ls -lh evonexus.db evonexus.db.bad.manual; sqlite3 evonexus.db ".tables"; sqlite3 evonexus.db "select count(*) from users;"'
+      ```
+    - Saída relevante:
+      - `ok`
+      - tabelas presentes, incluindo `users`, `plugins_installed`, `runtime_configs`, `brain_repo_configs`, `knowledge_connections`
+      - `select count(*) from users;` retornou `1`
+
+13. O dashboard foi escalado de volta:
+    ```bash
+    docker service scale evonexus_evonexus_dashboard=1
+    ```
+    - Logs mostraram Flask subindo corretamente.
+    - O erro `database disk image is malformed` sumiu.
+
+14. O usuário informou que “subiu uma parte”, mas integrações ainda não voltaram.
+    - Foi analisado o código local e confirmado que integrações dependem do `.env`.
+    - O `entrypoint.sh` carrega `/workspace/config/.env`.
+    - O backup atual provavelmente incluiu `.env` no caminho raiz, mas em Swarm o caminho persistente real é `config/.env` via symlink.
+
+15. Foi iniciada análise local para corrigir `backup.py`.
+    - `backup.py` atual coleta arquivos ignorados pelo git com:
+      - walk dinâmico de `workspace`, `memory`, `plugins`
+      - `git ls-files --others --ignored --exclude-standard`
+    - `.env`, `config/workspace.yaml`, `dashboard/data/evonexus.db` são ignorados pelo git e entram no backup.
+    - `.db-wal` e `.db-shm` são explicitamente excluídos por `EXCLUDE_EXTENSIONS`.
+    - Localmente existe:
+      - `dashboard/data/evonexus.db`
+      - `dashboard/data/evonexus.db-wal`
+      - `dashboard/data/mempalace/chroma.sqlite3`
+    - `dashboard/data/evonexus.db` local passa `PRAGMA integrity_check`.
+    - `dashboard/data/mempalace/chroma.sqlite3` local passa `PRAGMA integrity_check`.
+
+16. Foi preparado o plano de correção, mas nenhuma alteração foi aplicada antes da interrupção:
+    - Alterar `backup.py` para gerar snapshots consistentes de SQLite usando `sqlite3.Connection.backup()`.
+    - Ao zipar arquivos SQLite vivos, escrever a cópia snapshot no ZIP, não o arquivo `.db` direto.
+    - Manter exclusão de `.db-wal` e `.db-shm`, desde que o snapshot incorpore WAL corretamente.
+    - Stagear e commitar apenas `backup.py` porque o worktree tem muitas mudanças não relacionadas.
+
+17. O usuário adicionou novo problema:
+    - Plugins retornando:
+      - `500 INTERNAL SERVER ERROR`
+      - HTML padrão do Flask.
+    - Localhost pedindo criação de usuário.
+    - Essa parte ainda não foi investigada.
+
+## 4. Estado atual
+
+- VPS:
+  - Dashboard voltou a subir depois do SQLite recovery.
+  - Último log bom visto:
+    - Flask rodando em `0.0.0.0:8080`
+    - `/api/version` retornando `200`
+  - O banco recuperado tem pelo menos 1 usuário.
+  - Parte dos dados aparece.
+  - Integrações ainda não aparecem corretamente.
+  - Plugins agora dão `500 Internal Server Error` segundo o usuário.
+
+- Local:
+  - Repo em `/home/sistemabritto/Documentos/evo-nexus`.
+  - Branch atual no momento da análise:
+    - `feat/chat-openclaude-provider-routing`
+  - Remote:
+    - `origin` e `fork` apontam para `github.com/sistemabritto/evo-nexus.git`
+  - `gh auth status` estava autenticado como `sistemabritto`.
+  - Worktree está sujo com muitas mudanças não relacionadas.
+  - Importante: não usar `git add -A`.
+  - Apenas `backup.py` deve ser stageado para o fix de backup, salvo se o próximo agente fizer correções adicionais específicas.
+
+- Problemas confirmados:
+  - Backup atual pode gerar SQLite inconsistente.
+  - Restore via browser não expõe status/erro real de restore.
+  - Integrações dependem de `/workspace/config/.env` no Swarm.
+  - Plugins 500 ainda sem diagnóstico.
+  - Localhost pedindo criação de usuário indica DB local ausente/zerado/inconsistente ou app apontando para outro `dashboard/data/evonexus.db`.
+
+## 5. Próximos passos
+
+1. Não criar usuário novo ainda, nem local nem VPS, até entender qual DB/config está sendo lido.
+
+2. Diagnosticar plugins 500 na VPS:
+   ```bash
+   docker service logs evonexus_evonexus_dashboard --since 20m 2>&1 | grep -iE "plugin|traceback|exception|error|500" -A20 -B10
+   ```
+   Também abrir a rota que falha e olhar traceback completo:
+   ```bash
+   docker service logs -f evonexus_evonexus_dashboard
+   ```
+   Depois acessar Plugins no browser para capturar a exceção.
+
+3. Confirmar se as integrações estão no `.env` persistente da VPS:
+   ```bash
+   docker run --rm -v evonexus_evonexus_config:/config alpine sh -lc 'ls -lah /config && sed -n "1,220p" /config/.env'
+   ```
+   Atenção: esse comando exibe segredos. Não colar output completo em canais públicos. Se precisar compartilhar, mascarar tokens.
+
+4. Conferir se o ZIP restaurado continha `.env` e/ou `config/.env`:
+   ```bash
+   docker run --rm -v evonexus_evonexus_backups:/backups alpine sh -lc 'apk add --no-cache unzip >/dev/null; unzip -l /backups/evonexus-backup-20260704-203851.zip | grep -E "(^| )(\.env|config/\.env)$"'
+   ```
+   Se só havia `.env`, o restore manual escreveu `/workspace/.env` no container, mas em Swarm o symlink aponta para `/workspace/config/.env`. É necessário garantir que backup e restore preservem `config/.env`.
+
+5. Corrigir `backup.py` local para snapshot SQLite consistente.
+   Implementação sugerida:
+   - importar `sqlite3`;
+   - criar helper `_is_sqlite_file(path: Path)`;
+   - criar helper `_write_sqlite_snapshot_to_zip(zf, src, rel, tmpdir)`;
+   - usar `sqlite3.connect(f"file:{src}?mode=ro", uri=True)` e `src_conn.backup(dst_conn)`;
+   - escrever snapshot temporário no ZIP com o mesmo `rel`;
+   - para SQLite inválido ou vazio, cair para `zf.write` com aviso, ou falhar explicitamente para bancos críticos.
+
+6. Ajustar coleta de env para Swarm:
+   - Garantir que `config/.env` entre no backup se existir.
+   - Hoje `git check-ignore` indica que `config/.env` é ignorado por regra `.env`, então deve entrar via `git ls-files --others --ignored`.
+   - Mesmo assim, validar manifesto do próximo backup para confirmar.
+
+7. Gerar backup novo local após corrigir script.
+   - Ideal: parar serviços locais que escrevem SQLite antes do backup.
+   - Se estiver usando Docker Compose local:
+     ```bash
+     docker compose stop || true
+     python backup.py backup
+     docker compose start || true
+     ```
+   - Se estiver rodando app local sem Docker, parar o processo Flask/terminal antes.
+   - Validar ZIP gerado:
+     ```bash
+     python - <<'PY'
+     from pathlib import Path
+     import json, zipfile, sqlite3, tempfile
+     zips = sorted(Path("backups").glob("evonexus-backup-*.zip"))
+     p = zips[-1]
+     print(p)
+     with zipfile.ZipFile(p) as z:
+         m = json.loads(z.read("manifest.json"))
+         files = [e["path"] for e in m["files"]]
+         for target in [".env", "config/.env", "dashboard/data/evonexus.db", "dashboard/data/mempalace/chroma.sqlite3"]:
+             print(target, target in files)
+         with tempfile.NamedTemporaryFile(suffix=".db") as tmp:
+             tmp.write(z.read("dashboard/data/evonexus.db"))
+             tmp.flush()
+             con = sqlite3.connect(tmp.name)
+             print("evonexus integrity:", con.execute("PRAGMA integrity_check").fetchone()[0])
+             print("users:", con.execute("select count(*) from users").fetchone()[0])
+             con.close()
+     PY
+     ```
+
+8. Testar `backup.py` com uma execução real.
+   - O backup novo deve não gerar DB malformado.
+   - Conferir tamanho e manifesto.
+
+9. Commit e push:
+   - Usar apenas `backup.py` se for só o fix de backup.
+   - Como worktree está misto:
+     ```bash
+     git diff -- backup.py
+     git add backup.py
+     git commit -m "Fix consistent SQLite backup snapshots"
+     git push -u fork feat/chat-openclaude-provider-routing
+     ```
+   - Se preferir branch nova para esse fix:
+     ```bash
+     git switch -c codex/fix-sqlite-backup-snapshots
+     git add backup.py
+     git commit -m "Fix consistent SQLite backup snapshots"
+     git push -u fork codex/fix-sqlite-backup-snapshots
+     ```
+   - Não stagear arquivos não relacionados.
+
+10. Depois de gerar backup novo, restaurar na VPS com mais cuidado:
+    - Escalar serviços que escrevem para os volumes para 0:
+      ```bash
+      docker service scale evonexus_evonexus_dashboard=0
+      docker service scale evonexus_evonexus_scheduler=0
+      docker service scale evonexus_evonexus_telegram=0
+      ```
+    - Subir ZIP novo para volume `evonexus_evonexus_backups`.
+    - Restaurar com script robusto que respeite symlink/env:
+      - Para arquivos `config/.env`, escrever em `/workspace/config/.env`.
+      - Para `.env`, decidir se deve copiar para `config/.env` no Swarm.
+    - Subir serviços novamente.
+
+11. Corrigir bug do status de restore no backend/frontend.
+    - Backend: `/api/backups/status` deve aceitar `?type=restore` ou retornar ambos `backup` e `restore`.
+    - Frontend: quando `handleRestore`, pollar status de restore, não backup.
+    - Logar exceções de thread com traceback, não só `str(e)`.
+
+## 6. Perguntas em aberto
+
+- O backup novo deve incluir os dois caminhos `.env` e `config/.env`, ou normalizar para `config/.env` no Swarm?
+- O restore web deve sobrescrever `.env`/`config/.env` automaticamente? Isso pode quebrar produção se o backup veio de local com URLs/keys diferentes.
+- O erro 500 de plugins vem do DB recuperado, de plugin instalado ausente no volume `plugins`, de schema antigo, ou de config `.env` faltante?
+- O usuário quer preservar exatamente o usuário/login antigo ou aceita recriar usuário se os dados principais forem recuperados?
+- O backup deve falhar quando banco crítico SQLite não passar `integrity_check`, ou deve incluir com warning?
+- Deve haver comando oficial de restore para imagens Swarm, já que `/workspace/backup.py` não existe no container `excarplex/evo-nexus-dashboard:latest`?
+
+## 7. Artefatos relevantes
+
+### Arquivos locais
+
+- `backup.py`
+  - Script de backup/restore local.
+  - Precisa ser corrigido para snapshots SQLite.
+
+- `evonexus-vps.stack.yml`
+  - Stack Swarm.
+  - Mostra volumes persistentes e environment.
+
+- `entrypoint.sh`
+  - Cria `/workspace/config/.env`.
+  - Gera `EVONEXUS_SECRET_KEY` e `KNOWLEDGE_MASTER_KEY` se faltarem.
+  - Symlinka `/workspace/.env` para `/workspace/config/.env`.
+  - Faz source do `.env`.
+
+- `dashboard/backend/routes/backups.py`
+  - Endpoint de backup/restore.
+  - Bug: status expõe backup, não restore.
+
+- `dashboard/backend/routes/integrations.py`
+  - Integrações core dependem de env vars.
+  - Custom/plugin integrations também avaliam env vars.
+
+- `dashboard/backend/routes/plugins.py`
+  - Provável ponto para investigar 500 de plugins.
+
+- `dashboard/backend/models.py`
+  - Tabelas relevantes: `users`, `plugins_installed`, `runtime_configs`, `brain_repo_configs`, `knowledge_connections`.
+
+### Comandos usados na VPS
+
+Confirmar mounts do serviço:
+```bash
+docker service inspect evonexus_evonexus_dashboard --format '{{range .Spec.TaskTemplate.ContainerSpec.Mounts}}{{println .Source "->" .Target}}{{end}}'
+```
+
+Saída relevante:
+```text
+evonexus_evonexus_dashboard_data -> /workspace/dashboard/data
+evonexus_evonexus_config -> /workspace/config
+evonexus_evonexus_workspace -> /workspace/workspace
+evonexus_evonexus_memory -> /workspace/memory
+evonexus_evonexus_agent_memory -> /workspace/.claude/agent-memory
+```
+
+Recovery que funcionou:
+```bash
+docker service scale evonexus_evonexus_dashboard=0
+docker run --rm -v evonexus_evonexus_dashboard_data:/data alpine sh -lc 'apk add --no-cache sqlite >/dev/null; cd /data; rm -f evonexus.db evonexus.db-wal evonexus.db-shm; sqlite3 evonexus.db.bad.manual ".recover" | sqlite3 evonexus.db; sqlite3 evonexus.db "PRAGMA integrity_check;"; ls -lh evonexus.db evonexus.db.bad.manual; sqlite3 evonexus.db ".tables"; sqlite3 evonexus.db "select count(*) from users;"'
+docker service scale evonexus_evonexus_dashboard=1
+```
+
+Saída relevante:
+```text
+defensive off
+ok
+users
+1
+```
+
+Logs bons após recovery:
+```text
+Serving Flask app 'app'
+Running on http://127.0.0.1:8080
+GET /api/version HTTP/1.1" 200
+```
+
+Erro anterior:
+```text
+sqlite3.DatabaseError: database disk image is malformed
+sqlalchemy.exc.DatabaseError: [SQL: PRAGMA main.table_info("users")]
+```
+
+### Estado Git local no momento da análise
+
+Branch:
+```text
+feat/chat-openclaude-provider-routing
+```
+
+Worktree tinha muitas mudanças não relacionadas. Exemplos:
+```text
+ M .claude/skills/create-goal/SKILL.md
+ M ADWs/routines/memory_sync.py
+ M Makefile
+ M dashboard/backend/app.py
+ M dashboard/backend/models.py
+ M dashboard/backend/notifications.py
+ M dashboard/backend/routes/overview.py
+ M dashboard/terminal-server/src/claude-bridge.js
+ M scripts/post_to_x.py
+ M start-services.sh
+?? dashboard/backend/routes/instagram.py
+?? tests/backend/test_mempalace_routes.py
+```
+
+Não stagear tudo.
+
+## 8. Instruções pra próxima sessão
+
+- Falar em português com o usuário, direto e operacional.
+- O usuário está em modo incidente; priorize comandos prontos e curtos.
+- Evitar comandos multiline complexos na VPS porque o terminal dele quebrou heredocs e linhas longas com indentação.
+- Preferir comandos de uma linha quando o usuário for copiar para VPS.
+- Não pedir para ele colar `.env` completo sem mascarar segredos.
+- Não mandar criar usuário novo enquanto houver chance de o app estar apontando para DB errado.
+- Não usar `git add -A`; o worktree local tem várias mudanças de outros trabalhos.
+- Antes de qualquer push, revisar `git diff -- backup.py` e stagear só o escopo.
+- Corrigir primeiro a causa raiz do backup SQLite. Sem isso, repetir restore pode recriar o problema.
+- Para o 500 de plugins, buscar traceback real nos logs antes de editar código.
+- Lembrar que a imagem Swarm atual não tem `/workspace/backup.py`; qualquer procedimento de restore na VPS precisa usar script inline, incluir `backup.py` na imagem, ou restaurar via UI corrigida.
+- Se for fazer PR, usar draft PR e explicar claramente:
+  - root cause: SQLite copiado enquanto WAL ativo;
+  - fix: snapshot consistente via SQLite backup API;
+  - impacto: backups restauráveis e menos risco de DB malformado.
diff --git a/Makefile b/Makefile
index bbcec2ede..16b23f3f1 100644
--- a/Makefile
+++ b/Makefile
@@ -13,11 +13,9 @@
 PYTHON := $(shell command -v uv >/dev/null 2>&1 && echo "uv run python" || echo "python3")
 ADW_DIR := ADWs/routines
 
-# Load .env if it exists
-ifneq (,$(wildcard .env))
-include .env
-export
-endif
+# Do not include .env here. GNU make does not parse shell-style .env files
+# safely when values contain spaces or slashes. Long-running services load .env
+# through start-services.sh; Python routines read provider config/env at runtime.
 
 # ── Setup ──────────────────────────────────
 
@@ -150,18 +148,54 @@ uninstall:          ## 🗑️  Full cleanup — stop services, remove nginx, da
 bling-auth:         ## 🔐 Bling OAuth2 login (one-time: capture access + refresh tokens into .env)
 	@python3 .claude/skills/int-bling/scripts/bling_auth.py
 
-telegram:           ## 📨 Start Telegram bot in background (screen)
-	@if screen -list | grep -q '\.telegram'; then \
+telegram:           ## 📨 Start Telegram bot using active provider in background (screen)
+	@command -v screen >/dev/null 2>&1 || { echo "❌ 'screen' is not installed — run: sudo apt install screen"; exit 1; }
+	@pkill -f '[e]xternal_plugins/telegram.*start' 2>/dev/null || true
+	@pkill -f '[c]laude --channels plugin:telegram' 2>/dev/null || true
+	@if screen -list | grep -qE '\.telegram[[:space:]]'; then \
 		echo "⚠ Telegram bot is already running. Use 'make telegram-stop' first or 'make telegram-attach' to connect."; \
 	else \
-		screen -dmS telegram claude --channels plugin:telegram@claude-plugins-official --dangerously-skip-permissions; \
-		echo "✅ Telegram bot running in background (screen: telegram)"; \
+		screen -dmS telegram python3 scripts/telegram_provider_bot.py; \
+		printf "⏳ Waiting for Telegram provider bot"; \
+		for i in $$(seq 1 10); do \
+			pgrep -af '[p]ython3 scripts/telegram_provider_bot.py' >/dev/null && break; \
+			printf "."; sleep 1; \
+		done; \
+		pgrep -af '[p]ython3 scripts/telegram_provider_bot.py' >/dev/null && echo " ✅ ready" || { echo " ❌ Telegram provider bot did not start — check: screen -r telegram"; exit 1; }; \
+		echo "✅ Telegram bot running with active EvoNexus provider (screen: telegram)"; \
 		echo "📺 Ver: screen -r telegram"; \
 		echo "🛑 Parar: make telegram-stop"; \
 	fi
 
-telegram-stop:      ## 🛑 Stop the Telegram bot
-	@screen -S telegram -X quit 2>/dev/null && echo "✅ Telegram bot stopped" || echo "⚠ Was not running"
+telegram-channel:   ## 🧪 Start legacy Claude Code Channels Telegram bot via LiteLLM proxy
+	@command -v screen >/dev/null 2>&1 || { echo "❌ 'screen' is not installed — run: sudo apt install screen"; exit 1; }
+	@command -v bun >/dev/null 2>&1 || [ -x "$$HOME/.bun/bin/bun" ] || { echo "❌ 'bun' is not installed (required by the telegram plugin MCP) — run: curl -fsSL https://bun.sh/install | bash"; exit 1; }
+	@command -v curl >/dev/null 2>&1 || { echo "❌ 'curl' is not installed"; exit 1; }
+	@[ -x .venv/bin/litellm ] || { echo "❌ litellm not installed in .venv — run: uv pip install 'litellm[proxy]'"; exit 1; }
+	@if screen -list | grep -q '\.telegram-proxy'; then \
+		echo "ℹ LiteLLM proxy already running (screen: telegram-proxy)"; \
+	else \
+		screen -dmS telegram-proxy bash scripts/telegram_litellm_proxy.sh; \
+		printf "⏳ Starting LiteLLM proxy (Anthropic→NVIDIA) on :4000"; \
+		for i in $$(seq 1 30); do \
+			curl -s -m2 http://127.0.0.1:4000/health/readiness >/dev/null 2>&1 && break; \
+			printf "."; sleep 1; \
+		done; \
+		curl -s -m2 http://127.0.0.1:4000/health/readiness >/dev/null 2>&1 && echo " ✅ ready" || { echo " ❌ proxy failed to start — check: screen -r telegram-proxy"; exit 1; }; \
+	fi
+	@if screen -list | grep -qE '\.telegram[[:space:]]'; then \
+		echo "⚠ Telegram bot is already running. Use 'make telegram-stop' first or 'make telegram-attach' to connect."; \
+	else \
+		screen -dmS telegram env ANTHROPIC_BASE_URL=http://127.0.0.1:4000 ANTHROPIC_AUTH_TOKEN=sk-evonexus-telegram-local ANTHROPIC_MODEL=telegram-nvidia claude --channels plugin:telegram@claude-plugins-official --dangerously-skip-permissions; \
+		echo "✅ Legacy Telegram channel running (screen: telegram)"; \
+	fi
+
+telegram-stop:      ## 🛑 Stop the Telegram bot (and its LiteLLM proxy)
+	@screen -S telegram -X quit 2>/dev/null && echo "✅ Telegram bot stopped" || echo "⚠ Bot was not running"
+	@screen -S telegram-debug -X quit 2>/dev/null && echo "✅ Telegram debug bot stopped" || true
+	@screen -S telegram-proxy -X quit 2>/dev/null && echo "✅ LiteLLM proxy stopped" || echo "⚠ Proxy was not running"
+	@pkill -f '[e]xternal_plugins/telegram.*start' 2>/dev/null && echo "✅ Legacy Telegram plugin stopped" || true
+	@pkill -f '[c]laude --channels plugin:telegram' 2>/dev/null && echo "✅ Legacy Telegram channel stopped" || true
 
 telegram-attach:    ## 📺 Connect to Telegram terminal (Ctrl+A D to detach)
 	@screen -r telegram
diff --git a/PROMPT-CODEX-VPS-DEPLOY.md b/PROMPT-CODEX-VPS-DEPLOY.md
new file mode 100644
index 000000000..8e95bb532
--- /dev/null
+++ b/PROMPT-CODEX-VPS-DEPLOY.md
@@ -0,0 +1,214 @@
+# Prompt para o Codex — Migração do EvoNexus para VPS
+
+## Contexto geral
+
+O EvoNexus é um sistema de orquestração de agentes (Claude Code, cronjobs, rotinas, dashboard Flask+React com terminal embutido) que roda localmente no meu PC. Preciso migrá-lo para minha VPS onde já rodam outros serviços (Hermes, EvoCRM, Traefik, pgvector). O PC não fica ligado a maior parte do dia, então a migração para VPS é obrigatória.
+
+**Objetivo final:** EvoNexus rodando na VPS como serviço Docker Swarm, na mesma rede `network_public` dos outros serviços, acessível via subdomínio `nexus.workflowapi.com.br` através do Traefik.
+
+## Ambiente da VPS (informações conhecidas)
+
+### Rede Docker
+- **`network_public`** — rede Docker external já criada na VPS, usada por Hermes, EvoCRM, Traefik. Todos os serviços do Swarm ficam nela.
+- **`hermes_internal`** — rede secundária usada pelo Hermes (não precisa mexer aqui).
+
+### Traefik (reverse proxy)
+- Já rodando na VPS como serviço Docker Swarm
+- Entry points: `websecure` (443/TLS) e `web` (80)
+- Cert resolver: `letsencryptresolver` (também existe `letsencrypt` em algumas stacks)
+- Padrão de labels: `traefik.enable=true`, `traefik.docker.network=network_public`, `traefik.http.routers.X.rule=Host(...)`, etc.
+- Domínio base: `*.workflowapi.com.br`
+
+### Banco de dados
+- **`pgvector`** — container PostgreSQL com extensão pgvector já rodando na `network_public`, usado pelo EvoCRM.
+- Password do postgres: definida via env `POSTGRES_PASSWORD` na VPS.
+- **IMPORTANTE:** O EvoNexus usa **SQLite** (`dashboard.db`) como seu banco — NÃO usa Postgres nativamente. O `pyproject.toml` inclui `psycopg2-binary` e `alembic` como deps, mas o app roda em SQLite por padrão.
+
+**Decisão sobre banco:** Preciso que o Codex verifique se o EvoNexus pode continuar usando SQLite (mais simples, menos um container pra subir) ou se há benefício real em migrar para o `pgvector` que já existe na VPS. Avaliar: o `dashboard.db` é um arquivo SQLite que vive dentro de um volume Docker — se reiniciar o container ou redeploiar a imagem, os dados persistem desde que o volume esteja nomeado. Para um sistema de orquestração que provavelmente tem pouco volume de escrita no DB (a maior parte é logs e agent memory em arquivos), SQLite com volume nomeado é suficiente. Confirmar isso analisando o código.
+
+### Serviços já presentes na VPS
+- Hermes Agent (profiles: mistica, excarplex) — porta 9119 (dashboard), 8642 (API server)
+- EvoCRM — auth (3001), crm (3000), core (5555), processor (8000), bot_runtime (8080), gateway (3030), redis (6379)
+- Traefik — reverse proxy com TLS automático via Let's Encrypt
+- pgvector — PostgreSQL 15+ com extensão vector
+
+## Estado atual do EvoNexus (local)
+
+### Dockerfiles existentes
+1. **`Dockerfile.swarm`** — runtime image (Python + Node 22 + claude-code CLI + openclaude CLI + gh CLI + todoist CLI + uv). Usa entrypoint.sh com bootstrap de config volume, geração de secret key, wait-for-key, Docker Secrets support. ENTRYPOINT = `entrypoint.sh`, CMD = `bash`.
+2. **`Dockerfile.swarm.dashboard`** — dashboard image (3-stage: frontend build com Vite → terminal-server node-pty compile → runtime Python 3.12 + Node 22 + uv + ambos CLIs). Inclui `start-dashboard.sh` que sobe Flask (:8080) + terminal-server (:32352) simultaneamente. HEALTHCHECK em `/api/version`.
+3. **`Dockerfile`** — runtime para local (sem Swarm bootstrap).
+4. **`Dockerfile.dashboard`** — dashboard Python-only (sem terminal-server, sem Node no runtime).
+5. **`Dockerfile.dev`** — dev local com volumes montados.
+
+### Compose files existentes
+- **`docker-compose.yml`** — local com build (3 services: dashboard, telegram, runner).
+- **`docker-compose.dev.yml`** — local dev com hot reload.
+- **`docker-compose.hub.yml`** — para usuários finais, puxa imagens do Docker Hub `evoapicloud/evo-nexus-*`. Sem rede externa, sem Traefik.
+- **`docker-compose.proxy.yml`** — igual o hub mas com `expose` em vez de `ports` (para reverse proxy).
+- **`evonexus.stack.yml`** — stack para Portainer/Swarm, usa rede `traefik-public` (external) e Traefik labels. **Este é o mais próximo do que preciso, mas usa `traefik-public` em vez de `network_public`.**
+
+### CI/CD
+- **`.github/workflows/docker-publish-britto.yml`** — workflow GitHub Actions que builda `Dockerfile.swarm` e `Dockerfile.swarm.dashboard` e publica no Docker Hub do meu usuário (`sistemabritto`). Triggers: push na branch `feat/chat-openclaude-provider-routing`, tags `v*`, e manual. Já configurado com secrets `DOCKERHUB_USERNAME` e `DOCKERHUB_TOKEN`.
+
+### Git
+- Fork: `https://github.com/sistemabritto/evo-nexus.git`
+- Branch ativa: `feat/chat-openclaude-provider-routing`
+- Origin: mesmo repo (push)
+
+### Estrutura de serviços do EvoNexus
+1. **dashboard** — Flask backend (:8080) + React frontend (servido como static) + Node terminal-server (:32352). Tudo num único container.
+2. **telegram** — bot que escuta mensagens Telegram via Claude Code com plugin `plugin:telegram@claude-plugins-official`.
+3. **scheduler** — executa `scheduler.py` (rotinas automáticas com a lib `schedule`).
+
+Todos os 3 serviços compartilham volumes: `config`, `workspace`, `memory`, `adw_logs`, `agent_memory`, `claude_auth`, `codex_auth`.
+
+### entrypoint.sh
+- Cria `/workspace/config` a partir de defaults na primeira boot
+- Gera `EVONEXUS_SECRET_KEY` e `KNOWLEDGE_MASTER_KEY` automaticamente
+- Sela `.env` do config volume como env vars
+- Se `REQUIRE_ANTHROPIC_KEY=1`, espera em loop 30s até a key aparecer (configurada via dashboard UI)
+
+### Configuração pós-deploy
+- Tudo (Anthropic API key, OpenRouter, NVIDIA NIM, Stripe, Omie, Bling, Asaas, Todoist, Telegram bot token, etc.) é configurado via dashboard UI após o primeiro boot
+- Não há secrets no stack file — zero secrets committed
+
+## O que eu preciso que o Codex faça
+
+### 1. Auditoria do estado atual
+
+Verificar se os Dockerfiles Swarm (`Dockerfile.swarm` e `Dockerfile.swarm.dashboard`) estão completos e corretos para buildar. Pontos de atenção:
+
+- **`Dockerfile.swarm.dashboard`** Stage 2 (terminal-build): Node 22-slim + python3 + make + g++ para compilar `node-pty`. Verificar se o `dashboard/terminal-server/package.json` e `package-lock.json` existem e estão commitados.
+- **`Dockerfile.swarm.dashboard`** Stage 1 (frontend-build): `npm install --legacy-peer-deps` resolve conflito de peer deps do React. Confirmar que `dashboard/frontend/package.json` está commitado.
+- **`start-dashboard.sh`**: Verificar se tem permissão de execução (chmod +x) e se o `sed -i 's/\r//'` (remoção de CRLF) está presente — sem isso, scripts bash com line endings Windows quebram no Linux.
+- **`entrypoint.sh`**: Mesma coisa — verificar line endings e permissão.
+- **`.dockerignore`**: Confirmar que exclui `.env`, `.git`, `node_modules`, `__pycache__`, `.venv`, `workspace/`, `dashboard/data/`, `ADWs/logs/`, `.claude/agent-memory/`, `.claude/.env` para não vazar secrets nem dados locais na imagem.
+
+Reportar qualquer arquivo faltante, erro de sintaxe, ou inconsistência.
+
+### 2. Criar o stack file para a VPS
+
+Baseado no `evonexus.stack.yml` existente, criar um **novo arquivo `evonexus-vps.stack.yml`** com as seguintes alterações:
+
+**a) Rede:** Trocar `traefik-public` por `network_public` (external: true, name: network_public) — é a rede que já existe na minha VPS.
+
+**b) Traefik labels:** Atualizar para o domínio `nexus.workflowapi.com.br`:
+- `traefik.http.routers.evonexus_dashboard.rule=Host(\`nexus.workflowapi.com.br\`)`
+- `traefik.http.routers.evonexus_terminal.rule=Host(\`nexus.workflowapi.com.br\`) && PathPrefix(\`/terminal\`)`
+- Usar `traefik.docker.network=network_public`
+- Usar `traefik.http.routers.X.entrypoints=websecure`
+- Usar `traefik.http.routers.X.tls.certresolver=letsencryptresolver` (padrão da VPS)
+
+**c) Imagens:** Usar `sistemabritto/evo-nexus-dashboard:latest` e `sistemabritto/evo-nexus-runtime:latest` (meu namespace no Docker Hub, não o `evoapicloud`).
+
+**d) Volumes:** Manter os mesmos volumes nomeados do stack original:
+```
+evonexus_config, evonexus_workspace, evonexus_dashboard_data, evonexus_memory,
+evonexus_adw_logs, evonexus_agent_memory, evonexus_claude_auth, evonexus_codex_auth
+```
+
+**e) Banco de dados:** Por enquanto manter SQLite (dashboard.db dentro do volume `evonexus_dashboard_data`). Não adicionar um serviço de Postgres ao stack — o EvoNexus não precisa. Confirmar que o `dashboard.db` está dentro de um volume nomeado e não no filesystem efêmero do container.
+
+**f) Environment:** Manter variáveis do stack original:
+```
+TZ=America/Sao_Paulo
+EVONEXUS_PORT=8080
+TERMINAL_SERVER_PORT=32352
+FORWARDED_ALLOW_IPS=*
+REQUIRE_ANTHROPIC_KEY=1  (telegram + scheduler)
+```
+
+**g) Healthcheck:** O `Dockerfile.swarm.dashboard` já tem HEALTHCHECK em `/api/version`. Não precisa duplicar no compose.
+
+**h) Resource limits:** Manter os limites do stack original (1 CPU, 1024M por serviço) — ajustar se necessário para a VPS.
+
+### 3. Verificar o fluxo de build e publish
+
+Confirmar que o `.github/workflows/docker-publish-britto.yml` está correto e vai funcionar:
+
+- **Triggers:** Push na branch `feat/chat-openclaude-provider-routing` → build + push `:latest` e `:sha-XXXX`
+- **Namespace:** `${{ secrets.DOCKERHUB_USERNAME }}` → deve resolver para `sistemabritto`
+- **Imagens:** `evo-nexus-runtime` (Dockerfile.swarm) e `evo-nexus-dashboard` (Dockerfile.swarm.dashboard)
+- **Platforms:** `linux/amd64` (VPS é x86_64)
+- **Secrets necessários:** `DOCKERHUB_USERNAME` e `DOCKERHUB_TOKEN` — confirmar que estão configurados no repo GitHub (Settings → Secrets and variables → Actions)
+
+Após fazer push da branch, as imagens devem aparecer em `https://hub.docker.com/r/sistemabritto/evo-nexus-dashboard/tags` e `https://hub.docker.com/r/sistemabritto/evo-nexus-runtime/tags`.
+
+### 4. Checklist de deploy na VPS
+
+Criar um checklist passo a passo do que precisa ser feito na VPS para subir o EvoNexus. Deve incluir:
+
+1. **Pré-requisitos na VPS:**
+   - Confirmar que `network_public` existe: `docker network ls | grep network_public`
+   - Confirmar que Traefik está rodando e acessível
+   - Confirmar que o domínio `nexus.workflowapi.com.br` aponta para o IP da VPS (DNS A record)
+   - Confirmar que Docker Swarm está ativo: `docker node ls`
+
+2. **Deploy do stack:**
+   ```bash
+   # Copiar evonexus-vps.stack.yml para a VPS
+   docker stack deploy -c evonexus-vps.stack.yml evonexus
+   ```
+
+3. **Verificação pós-deploy:**
+   - `docker service ls` — ver se os 3 serviços (dashboard, telegram, scheduler) estão `Replicas 1/1`
+   - `docker service logs evonexus_evonexus_dashboard --tail 50` — ver se Flask e terminal-server subiram
+   - `curl -k https://nexus.workflowapi.com.br/api/version` — deve retornar JSON com a versão
+   - Abrir `https://nexus.workflowapi.com.br` no navegador — wizard de setup deve aparecer
+
+4. **Configuração via dashboard UI:**
+   - Criar conta admin
+   - Configurar provider (Anthropic API key, ou NVIDIA NIM, ou OpenRouter)
+   - Configurar Telegram bot token (se for usar o canal Telegram)
+   - Configurar integrações (Omie, Bling, Asaas, etc. — conforme necessário)
+
+5. **DNS:**
+   - Adicionar registro A `nexus` → IP da VPS (ou CNAME se já tiver wildcard `*.workflowapi.com.br`)
+
+### 5. Validação final
+
+Rodar uma verificação local antes do deploy na VPS:
+
+```bash
+# Buildar localmente as imagens Swarm para testar
+docker build -f Dockerfile.swarm -t evo-nexus-runtime:test .
+docker build -f Dockerfile.swarm.dashboard -t evo-nexus-dashboard:test .
+
+# Subir com o stack file novo (adaptando para não precisar da rede externa)
+docker compose -f evonexus-vps.stack.yml up -d  # pode precisar ajustes pra local
+```
+
+Confirmar que as imagens buildam sem erro e o container dashboard inicia corretamente com `curl http://localhost:8080/api/version` respondendo.
+
+## Pontos de atenção específicos
+
+1. **Line endings:** O repo foi desenvolvido em Windows em algum momento. Verificar se `entrypoint.sh` e `start-dashboard.sh` têm CRLF (quebrariam no Linux da VPS). Se tiverem, converter para LF com `sed -i 's/\r$//'` ou `dos2unix`.
+
+2. **Permissões de execução:** `entrypoint.sh` e `start-dashboard.sh` precisam de `chmod +x`. Os Dockerfiles Swarm já fazem `chmod +x` no `entrypoint.sh`, mas confirmar que `start-dashboard.sh` também recebe.
+
+3. **Volume `dashboard.db`:** O arquivo `dashboard.db` (SQLite) está em `dashboard/data/` e é montado como volume `evonexus_dashboard_data` no container (`/workspace/dashboard/data`). Confirmar que o volume nomeado cobre esse path e que o DB persiste entre deploys.
+
+4. **`.claude/` no build:** O `Dockerfile.swarm.dashboard` copia `.claude/` inteiro (`COPY .claude/ .claude/`), exceto o que está no `.dockerignore`. Confirmar que `.claude/agent-memory/` e `.claude/.env` estão excluídos (já estão no `.dockerignore`).
+
+5. **`config/` no build:** The `Dockerfile.swarm.dashboard` copia `config/` inteiro. Confirmar que `providers.json` e `heartbeats.yaml` (que podem ter dados sensíveis locais) não vão parar na imagem — idealmente só os `.example` deveriam ir, ou então sobrescrever via volume em runtime.
+
+6. **`_defaults/` bootstrap:** O `Dockerfile.swarm.dashboard` cria `/workspace/_defaults/` a partir de `config/` e `.env.example` no build. O `entrypoint.sh` usa isso para popular o volume `config` na primeira boot. Verificar que isso funciona corretamente — o container dashboard precisa ter `entrypoint.sh` antes de `start-dashboard.sh`.
+
+7. **Replicas:** Como Hermes, EvoCRM e agora EvoNexus vão competir por recursos na mesma VPS, confirmar que os limites de CPU/memória do stack file estão adequados. Hermes aloca 1 CPU / 1GB, EvoCRM serviços menores. EvoNexus com 3 serviços a 1 CPU / 1GB cada é 3GB total — pode ser pesado. Avaliar se o scheduler e o telegram precisam de tantos recursos, ou se podem ser reduzidos (0.5 CPU / 512M talvez).
+
+8. **Dependência entre serviços:** No `docker-compose.hub.yml`, `telegram` e `scheduler` têm `depends_on: dashboard (condition: service_healthy)`. No `evonexus.stack.yml` não tem `depends_on` (Swarm não suporta condition). Como o `entrypoint.sh` já faz wait-for-key, isso é OK — telegram e scheduler esperam a key aparecer, que só é configurada depois do dashboard estar acessível. Confirmar que isso funciona.
+
+## Resumo do que entregar
+
+1. ✅ Auditoria dos Dockerfiles e scripts → report do que está OK e do que precisa correção
+2. ✅ Novo arquivo `evonexus-vps.stack.yml` → stack file pronto pra VPS
+3. ✅ Verificação do workflow de CI/CD → confirma que build/push vai funcionar
+4. ✅ Checklist de deploy na VPS → passo a passo
+5. ✅ Validação local → build test das imagens antes do push
+
+## Observação
+
+O projeto está em `/home/sistemabritto/Documentos/evo-nexus/`. A branch ativa é `feat/chat-openclaude-provider-routing`. O fork no GitHub é `sistemabritto/evo-nexus`.
+
+Responda em português. Seja direto e técnico. Execute os comandos necessários para validar o que estão pedindo — não apenas descreva o que faria.
diff --git a/PROMPT-OMNIROUTE-CONFIG.md b/PROMPT-OMNIROUTE-CONFIG.md
new file mode 100644
index 000000000..ca43fb7e5
--- /dev/null
+++ b/PROMPT-OMNIROUTE-CONFIG.md
@@ -0,0 +1,247 @@
+# Prompt — Configurar o OmniRoute com um agente (Claude Code)
+
+Este arquivo é um **prompt pronto pra copiar e colar** num agente de código
+(Claude Code, Codex CLI, ou qualquer agente com acesso a shell/HTTP) para
+**auditar e otimizar um OmniRoute remoto** — o gateway de IA da stack
+[Omni-Nexus](https://github.com/sistemabritto/omni-nexus#readme).
+
+Contém a configuração de produção real da **Sistema Britto** (VPS Swarm),
+incluindo **triangulação de providers, fallback hierárquico, concurrency caps,
+e resiliência never-stop**.
+
+> Mantido por [Sistema Britto](https://sistemabritto.com.br) ·
+> Versão: **3.8.46+** · OmniRoute é um projeto de [Diego Souza](https://github.com/diegosouzapw/OmniRoute) (MIT)
+
+---
+
+## Pré-requisitos
+
+1. **OmniRoute no ar** — dashboard em `https://omni.SEU-DOMINIO.com.br`.
+2. **Access Token Admin** — seção **Access Tokens** no dashboard (formato `oma_live_...`).
+3. Agente com acesso HTTP (curl) ao endpoint do OmniRoute.
+
+---
+
+## O prompt
+
+````text
+Você vai auditar e otimizar um gateway OmniRoute remoto via management API.
+Trabalhe em etapas, SEMPRE leia o estado antes de alterar, e valide cada
+mudança com chamada real.
+
+Servidor: {{OMNIROUTE_URL}}
+Access Token (scope admin): {{ADMIN_TOKEN}}
+
+## Fatos importantes sobre a API
+
+- Access Tokens `oma_live_...` autenticam a maioria das rotas de gerenciamento
+  (`Authorization: Bearer ...`) mas NÃO servem para inferência (`/v1/*`) nem
+  para `/api/settings/<sub>` (exigem sessão dashboard OU API key `sk-...`
+  com scope `manage`).
+- API keys de inferência (`sk-...`) são criadas via `POST /api/keys`.
+- `/v1/chat/completions` do OmniRoute strema SSE por padrão — sempre mande
+  `"stream": false` em testes que fazem parse do JSON.
+- Rotas de lifecycle (`/api/services/*`, `/api/mcp/*`, `/api/plugins/*`)
+  são loopback-only — não tente por token remoto.
+- O PATCH `/api/providers` só aceita os campos: `ids[]`, `isActive`. Outros
+  campos como `maxConcurrent`, `rateLimitProtection` precisam ser setados
+  pelo **dashboard UI** (não expostos via API remota).
+- O refresh automático de quota (`autoRefreshProviderQuotaInterval`) controla
+  quanto tempo o sistema espera entre checagens de rate limit dos providers.
+- O combo strategy `auto` é zero-config e usa LKGP (Last Known Good Provider):
+  variantes `auto/<categoria>[:<tier>]` (coding, reasoning, fast, cheap, free,
+  pro...) são anunciadas em `GET /v1/models`.
+
+---
+
+## Etapa 1 — Validar acesso e inventariar
+
+1. `GET /api/cli/whoami` → confirme scope admin.
+2. `GET /api/settings` → salve o JSON completo (baseline).
+3. `GET /api/providers` → liste conexões e anote `testStatus` e `backoffLevel`.
+4. `GET /api/monitoring/health` → veja circuit breakers abertos (devem ser 0).
+
+## Etapa 2 — Keys nomeadas para telemetria
+
+1. `POST /api/keys {"name":"<consumidor>-provider"}` → key de inferência
+   nomeada (ex.: evonexus-provider, bot-x, ide-y).
+2. `POST /api/keys {"name":"agent-manage","scopes":["manage"]}` → key admin
+   para rotas `/api/settings/*`.
+
+## Etapa 3 — Otimizações globais de resiliência (APLICAR NA ORDEM)
+
+### 3.1 — Resetar circuit breakers
+
+`POST /api/resilience/reset {}` → providers que estavam HALF_OPEN/OPEN
+voltam a CLOSED. Isso evita que providers bons fiquem excluídos por falhas
+passadas.
+
+### 3.2 — Retry config
+
+`PATCH /api/settings` com access token:
+
+```json
+{
+  "requestRetry": 5,
+  "maxRetryIntervalSec": 60,
+  "autoRefreshProviderQuota": true,
+  "autoRefreshProviderQuotaInterval": 120,
+  "disableSessionStickiness": false,
+  "debugMode": false
+}
+```
+
+**requestRetry=5**: mais tentativas antes de "Maximum combo retry limit".
+**maxRetryIntervalSec=60**: providers têm 1 minuto pra se recuperar.
+**autoRefreshProviderQuotaInterval=120**: quota checada a cada 2 minutos.
+
+### 3.3 — Criar combo estratégico
+
+`POST /api/combos {"name":"NEVE-Mastery","strategy":"auto","modePack":"quality-first"}`
+
+Este combo usa o **Auto-Combo Engine** com 12 fatores de scoring:
+health(0.20), quota(0.15), costInv(0.15), latencyInv(0.12), taskFit(0.08),
+stability(0.05), tierPriority(0.05), tierAffinity(0.05),
+specificityMatch(0.05), contextAffinity(0.05), connectionDensity(0.05).
+
+O modePack `quality-first` favorece taskFit(0.37) + stability(0.15) para
+produção de conteúdo, coding e análise — ideal para agentes autônomos.
+
+### 3.4 — max_concurrent por provider (DASHBOARD obrigatório)
+
+O PATCH `/api/providers` NÃO aceita `maxConcurrent` remotamente. Acesse o
+dashboard e configure manualmente cada conexão no menu **Providers**:
+
+| Provider | max_concurrent | Motivo |
+|----------|:--------------:|--------|
+| **NVIDIA** (free) | **3** | Free tier robusto, aguenta paralelismo |
+| **Claude** (OAuth) | **1** | OAuth Pro serializa por segurança |
+| **Codex** (OAuth) | **1** | OAuth Plus, serializado |
+| **Gemini** (API key) | **2** | Rate limit agressivo |
+| **Gemini Web** (free) | **2** | Idem |
+| **Nous Research** (free) | **2** | Gratuito, bom paralelismo |
+| **xAI** (API key) | **2** | Estável, aceita 2 |
+| **Groq** (free) | **1** | Só transcrição de áudio |
+| **OpenRouter** (API key) | **1** | Quando tiver crédito |
+| **Perplexity Web** (free) | **1** | Uso esporádico |
+
+Com `maxConcurrent` setado, o OmniRoute ativa **quota-share request
+serialization** — um semáforo por conexão que filtra requisições em excesso.
+Isso é o que previne o erro "Maximum combo retry limit reached" causado por
+5 agentes batendo no mesmo provider simultaneamente.
+
+### 3.5 — Reativar conexões desligadas
+
+Se encontrar conexões com `isActive: false` (ex.: Codex), ative com:
+`PATCH /api/providers {"ids":["<id>"],"isActive":true}`
+
+Para conexões `credits_exhausted` que tenham
+`providerSpecificData.importFreeModelsOnly: true`, tente forçar re-teste:
+`POST /api/providers/<id>/test` (se a rota existir na versão).
+
+## Etapa 4 — Validar fim-a-fim
+
+1. `POST /v1/chat/completions {"model":"auto","messages":[{"role":"user",
+   "content":"hi"}],"max_tokens":10,"stream":false}` → HTTP 200 + headers
+   `X-OmniRoute-Provider`, `X-OmniRoute-Model`.
+2. `GET /v1/models` → liste variantes `auto/` anunciadas (`auto/coding`,
+   `auto/fast`, `auto/cheap`, etc.).
+3. Teste com `model: "auto/coding"` (bias para coding tasks).
+4. Teste com `model: "nvidia/deepseek-ai/deepseek-v4-flash"` (forçar NVIDIA).
+
+## Etapa 5 — Relatório
+
+Entregue: tabela antes/depois com as settings alteradas, keys criadas (nome +
+4 últimos chars, NUNCA a key completa), status dos circuit breakers,
+conexões ativas vs. inativas, e recomendação de uso:
+
+```
+# Uso recomendado em qualquer CLI agnóstica (Hermes, OpenCode, etc.)
+OPENAI_BASE_URL=https://omniroute.seudominio.com.br/v1
+OPENAI_API_KEY=sk-...chave-criada-na-etapa-2
+
+# Para coding pesado
+model: "auto/coding"
+# Para tasks gerais (distribui entre todos providers)
+model: "auto"
+# Para forçar combo criado
+model: "NEVE-Mastery"
+# Para forçar provider específico
+model: "nvidia/deepseek-ai/deepseek-v4-flash"
+model: "cc/claude-sonnet-4-6"
+```
+
+---
+
+## Estratégia de Roteamento (triangulação)
+
+O OmniRoute com `strategy: auto` + `modePack: quality-first` distribui
+requests entre os providers ativos baseado em **12 fatores de scoring**.
+O resultado prático para 5 agentes simultâneos:
+
+```
+Agente 1 → NVIDIA (deepseek-v4-flash)    [coding leve]
+Agente 2 → Claude (sonnet-4-6)           [heavy task]
+Agente 3 → Nous (Hermes-4-405B)          [coding pesado]
+Agente 4 → xAI (Grok-4.3)               [pesquisa]
+Agente 5 → Gemini (3.1-pro-preview)      [análise]
+```
+
+Se um falha (ex.: Gemini 429), redistribui automaticamente via LKGP:
+```
+Gemini caiu → fallback: NVIDIA (qwen3.5-122b)
+NVIDIA lotado → xAI ou Nous
+Tudo saturado → Codex (gratuito, última barreira)
+```
+
+### Hierarquia de fallback na prática:
+
+1. **NVIDIA Free Tier** (deepseek, qwen, glm-5.2, nemotron) — primary
+2. **Claude OAuth** (sonnet, haiku, opus) — backup + heavy reasoning
+3. **Nous Research** (Hermes-4-405B/70B) — coding gratuito
+4. **xAI** (Grok-4.3) — pesquisa geral
+5. **Gemini/ Gemini Web** (3.1-pro, 3.5-flash) — análise
+6. **Codex** (gratuito, OAuth Plus) — última barreira
+7. **Groq** (exclusivo para transcrição de áudio)
+8. **OpenRouter** (quando recarregar créditos)
+9. **Perplexity Web** (pesquisa especializada)
+
+---
+
+## Estratégia de Resiliência (3 camadas)
+
+### Camada 1 — Provider Circuit Breaker
+- OAuth: degrada em 5 falhas, abre em 8, reset 60s
+- API key: degrada em 7, abre em 12, reset 30s
+- Providers marcados OPEN são pulados pelo combo routing
+
+### Camada 2 — Connection Cooldown (account-level)
+- 429 → `rateLimitedUntil` com backoff exponencial
+- `baseCooldownMs * 2 ** failureIndex`
+- Providers OAuth com quota reset detectam automaticamente via refresh
+
+### Camada 3 — Model Lockout (model-level)
+- Modelos específicos com 403/404/429 entram em lockout individual
+- `baseCooldownMs=120s`, `maxCooldownMs=30min`
+- Habilitar no Dashboard → Settings → Model Lockout
+
+---
+
+## Regras de segurança
+
+- NÃO altere: requireLogin, senhas, JWT/API secrets, portas, proxy global.
+- NÃO reinicie serviços nem chame rotas de lifecycle.
+- NÃO imprima keys/tokens completos no relatório.
+- Toda mudança deve ser reversível com um único PATCH/PUT (documente o valor anterior).
+- maxConcurrent e rateLimitProtection só pelo dashboard (não via API remota).
+````
+
+---
+
+## Referências
+
+- [OmniRoute Auto-Combo Docs](https://omni.workflowapi.com.br/docs/routing/AUTO-COMBO)
+- [OmniRoute Resilience Guide](https://omni.workflowapi.com.br/docs/architecture/RESILIENCE_GUIDE)
+- [OmniRoute Architecture](https://omni.workflowapi.com.br/docs/architecture/ARCHITECTURE)
+- [README do Omni-Nexus](README.md)
+- [Stack de exemplo na VPS](evonexus-vps.stack.example.yml)
\ No newline at end of file
diff --git a/README.md b/README.md
index 70be4e381..b06dc3e0c 100644
--- a/README.md
+++ b/README.md
@@ -8,276 +8,321 @@
   <img src="public/cover.svg" alt="EvoNexus" width="100%"/>
 </p>
 
-<h1 align="center">EvoNexus</h1>
+<h1 align="center">Omni-Nexus</h1>
 
 <p align="center">
-  Multi-agent operating layer built around the Claude Code CLI — part of the Evolution Foundation ecosystem.
+  Distribuição turbinada do <a href="https://github.com/evolution-foundation/evo-nexus">EvoNexus</a> pronta para VPS —
+  com gateway de IA <a href="https://github.com/diegosouzapw/OmniRoute">OmniRoute</a> embutido na stack,
+  seletor de providers e bot do Telegram multi-provider.
 </p>
 
 <p align="center">
-  <a href="https://github.com/evolution-foundation/evo-nexus/releases/latest"><img src="https://img.shields.io/github/v/release/evolution-foundation/evo-nexus?include_prereleases&label=version&color=00ffa7" alt="Latest version" /></a>
+  Uma camada de upgrade mantida por <a href="https://sistemabritto.com.br">Sistema Britto</a> sobre o EvoNexus da Evolution Foundation.
+</p>
+
+<p align="center">
+  <a href="https://github.com/evolution-foundation/evo-nexus"><img src="https://img.shields.io/badge/upstream-evolution--foundation%2Fevo--nexus-00ffa7" alt="Upstream" /></a>
   <a href="https://opensource.org/licenses/Apache-2.0"><img src="https://img.shields.io/badge/License-Apache%202.0-blue.svg" alt="License: Apache 2.0" /></a>
-  <a href="https://docs.evolutionfoundation.com.br"><img src="https://img.shields.io/badge/Docs-evolutionfoundation.com.br-00ffa7" alt="Documentation" /></a>
-  <a href="https://evolutionfoundation.com.br/community"><img src="https://img.shields.io/badge/Community-Join%20us-white" alt="Community" /></a>
+  <a href="https://sistemabritto.com.br"><img src="https://img.shields.io/badge/by-sistemabritto.com.br-white" alt="Sistema Britto" /></a>
 </p>
 
 <p align="center">
-  <a href="https://evolutionfoundation.com.br">Website</a> &middot;
-  <a href="https://docs.evolutionfoundation.com.br">Documentation</a> &middot;
-  <a href="#quick-start">Quick Start</a> &middot;
-  <a href="#web-dashboard">Dashboard</a> &middot;
-  <a href="https://evolutionfoundation.com.br/community">Community</a> &middot;
-  <a href="mailto:suporte@evofoundation.com.br">Support</a>
+  <a href="https://sistemabritto.com.br">Sistema Britto</a> &middot;
+  <a href="#como-funciona-passo-a-passo-guia-sem-jargão">Como funciona (guia sem jargão)</a> &middot;
+  <a href="https://github.com/evolution-foundation/evo-nexus">Projeto original</a> &middot;
+  <a href="#deploy-completo-na-vps-passo-a-passo">Deploy na VPS</a> &middot;
+  <a href="#omniroute--o-gateway-de-ia-da-stack">OmniRoute</a> &middot;
+  <a href="#bot-do-telegram-multi-provider">Telegram</a> &middot;
+  <a href="#créditos--agradecimentos">Créditos</a>
 </p>
 
 ---
 
-> **Disclaimer:** EvoNexus is an independent, **unofficial open-source project**. It is **not affiliated with, endorsed by, or sponsored by Anthropic**. "Claude" and "Claude Code" are trademarks of Anthropic, PBC. This project integrates with Claude Code as a third-party tool and requires users to provide their own installation and credentials.
+> **Disclaimer:** assim como o EvoNexus original, este é um projeto open source **não oficial**, **não afiliado, endossado ou patrocinado pela Anthropic**. "Claude" e "Claude Code" são marcas da Anthropic, PBC. O projeto integra o Claude Code como ferramenta de terceiros e exige que você forneça sua própria instalação e credenciais.
 
 ---
 
-## What It Is
+## O que é este fork
 
-EvoNexus is an open source, **unofficial** multi-agent operating layer built around the [Claude Code](https://docs.anthropic.com/en/docs/claude-code) CLI protocol — but **not locked to any single LLM provider**. It runs natively on Anthropic's `claude` CLI by default, and can transparently switch to OpenAI, Google Gemini, OpenRouter (200+ models), AWS Bedrock, Google Vertex AI, or Codex Auth via [OpenClaude](https://www.npmjs.com/package/@gitlawb/openclaude). Same agents, same skills, same workflows — your choice of backend.
+O [EvoNexus](https://github.com/evolution-foundation/evo-nexus) é uma camada operacional multi-agente construída sobre o CLI do Claude Code: **38 agentes especializados** (17 de negócio + 21 de engenharia), 190+ skills, rotinas agendadas, heartbeats, tickets, goals e um dashboard web completo. Toda essa base vem do projeto original da [Evolution Foundation](https://evolutionfoundation.com.br) — leia o [README upstream](https://github.com/evolution-foundation/evo-nexus#readme) para conhecer a plataforma em profundidade.
 
-It turns a single CLI installation into a team of **38 specialized agents** organized in two ortogonal layers — **17 business agents** (operations, finance, community, marketing, HR, legal, product, data, learning retention) and **21 engineering agents** (architecture, planning, code review, testing, debugging, security, design, cycle orchestration, retrospective — 19 derived from [oh-my-claudecode](https://github.com/yeachan-heo/oh-my-claudecode), MIT, by Yeachan Heo + 2 native: Helm and Mirror). The engineering layer follows a canonical 6-phase workflow documented in `.claude/rules/dev-phases.md`.
+O **Omni-Nexus** é a camada de upgrade do [Sistema Britto](https://sistemabritto.com.br) em cima disso, com um objetivo claro: **rodar o EvoNexus inteiro numa VPS com Docker Swarm, sem depender de nenhum gateway de IA externo e sem exigir login claude.ai** — usando o provider que você quiser, inclusive vários ao mesmo tempo com fallback automático.
 
-**This is not a chatbot.** It is a real operating layer that runs routines, generates HTML reports, syncs meetings, triages emails, monitors community health, tracks financial metrics, and consolidates everything into a unified dashboard — all automated.
+> Se você não é técnico e só quer entender **o que esse sistema faz pela sua empresa e como usá-lo no dia a dia**, vá direto para [Como funciona, passo a passo (guia sem jargão)](#como-funciona-passo-a-passo-guia-sem-jargão). O restante deste README é a documentação técnica do deploy e da infraestrutura.
 
-## Part of the Evolution Foundation ecosystem
+### O upgrade em resumo
 
-EvoNexus is one of the projects maintained by Evolution Foundation. It is the operating layer that orchestrates the Foundation's own work — including the development of [Evo CRM Community](https://github.com/evolution-foundation/evo-crm-community), [Evolution API](https://github.com/evolution-foundation/evolution-api) and [Evolution Go](https://github.com/evolution-foundation/evolution-go).
+| Camada | O que foi adicionado |
+|---|---|
+| **OmniRoute na stack** | Gateway de IA self-hosted ([OmniRoute](https://github.com/diegosouzapw/OmniRoute), 237+ providers) como serviço do Swarm, com DNS interno, auth nativa e volume persistente |
+| **Seletor de providers** | Provider `omnirouter` no dashboard + roteamento OpenClaude no terminal/chat, Codex OAuth via device auth, NVIDIA NIM, resolução de chaves por provider |
+| **Telegram multi-provider** | Bot em modo `provider`: responde pelo provider ativo, troca de provider no chat com `/provider`, áudio (Whisper/Groq), imagens, leitura de URLs e memória por conversa — sem login claude.ai |
+| **Pipeline de deploy VPS** | GitHub Actions → imagens no seu Docker Hub → stack de exemplo para Portainer/Traefik com volumes persistentes e backups SQLite consistentes |
+| **Hardening** | Dezenas de correções de produção: precedência de chaves por provider, auto-updater do CLI travado, trust/permissions como root em container, recuperação de EIO no terminal, allowlist do Telegram re-seedada a cada boot |
 
-### Why EvoNexus?
+---
 
-- **Markdown-first agents** — agents are `.md` files with system prompts, not code. No SDK, no compile step. Add an agent by dropping a file in `.claude/agents/`, or package reusable bundles via the plugin system (see [`docs/introduction.md`](docs/introduction.md))
-- **Skills as instructions** — reusable capabilities are markdown too. 190+ skills covering finance, community, social, engineering, data, legal, HR, ops, product, CS
-- **Multi-provider by design** — default runs on Anthropic's native `claude` CLI, but can switch to OpenRouter, OpenAI, Gemini, AWS Bedrock, Google Vertex, or Codex Auth via [OpenClaude](https://www.npmjs.com/package/@gitlawb/openclaude) without touching a line of code. Your keys, your model choice, no vendor lock-in
-- **MCP integrations** — first-class support for Google Calendar, Gmail, GitHub, Linear, Telegram, Canva, Notion, and more via the Model Context Protocol
-- **Slash commands** — `/clawdia`, `/flux`, `/pulse`, `/apex` invoke agents directly from the terminal
-- **Persistent memory** — `CLAUDE.md` + per-agent memory survives across sessions
-- **CLI-first, local-only** — runs anywhere the Claude CLI (or OpenClaude) runs. Your data never leaves your infrastructure
+## Como funciona, passo a passo (guia sem jargão)
 
----
+Esqueça "gateway", "Swarm" e "provider" por um momento. Esta seção explica **o que o sistema faz** e **como você usa isso no seu trabalho**, sem pressupor conhecimento técnico.
 
-## Key Features
-
-- **Multi-Provider** — runs on Anthropic (native `claude`) or any of 6 alternate backends via [OpenClaude](https://www.npmjs.com/package/@gitlawb/openclaude): OpenRouter (200+ models), OpenAI, Google Gemini, Codex Auth, AWS Bedrock, Google Vertex AI. Switch providers from the dashboard, no code changes
-- **17 Core Business Agents + Custom** — Ops, Finance, Projects, Community, Social, Strategy, Sales, Courses, Learning Retention, Personal, Knowledge, Marketing, HR, Customer Success, Legal, Product, Data — plus user-created `custom-*` agents (gitignored)
-- **21 Engineering Agents** — architecture, planning, code review, testing, debugging, security, design, cycle orchestration, retrospective
-- **190+ Skills + Custom** — organized by domain prefix (`social-`, `fin-`, `int-`, `prod-`, `mkt-`, `gog-`, `obs-`, `discord-`, `pulse-`, `sage-`, `hr-`, `legal-`, `ops-`, `cs-`, `data-`, `pm-`, `dev-`)
-- **7 Core + 20 Custom Routines** — daily, weekly, and monthly ADWs managed by a scheduler
-- **Web Dashboard** — React + Flask app with auth, roles, web terminal, service management
-- **19+ Integrations** — Google Calendar, Gmail, Linear, GitHub, Discord, Telegram, Stripe, Omie, Bling, Asaas, Fathom, Todoist, YouTube, Instagram, LinkedIn, Evolution API, Evolution Go, Evo CRM, and more
-- **Persistent Memory** — two-tier system (CLAUDE.md + memory/) with LLM Wiki pattern
-- **Knowledge Base** — optional semantic search via [MemPalace](https://github.com/milla-jovovich/mempalace) (local ChromaDB vectors, one-click install)
-- **Full Observability** — JSONL logs, execution metrics, cost tracking per routine
-- **Heartbeats** — proactive agents that wake on a schedule, run a 9-step protocol, and decide whether to act
-- **Goal Cascade** — Mission → Project → Goal → Task hierarchy
-- **Tickets** — persistent conversation/work threads with atomic checkout
+### A ideia central
 
----
+Você não fica configurando ferramenta nem escrevendo prompt o dia inteiro. Você diz **o que quer alcançar**, o sistema quebra isso em passos concretos, um time de agentes de IA especializados executa, e você só aparece pra **aprovar ou corrigir o rumo** — pelo dashboard ou pelo Telegram, do celular.
 
-## Screenshots
+O ciclo é sempre o mesmo, em 4 níveis, cada um mais concreto que o anterior:
 
-<p align="center">
-  <img src="public/print-overview.webp" alt="Overview" width="49%" />
-  <img src="public/print-chat.webp" alt="Agent Chat" width="49%" />
-</p>
-<p align="center">
-  <img src="public/print-agents.webp" alt="Agents" width="49%" />
-  <img src="public/print-integrations.webp" alt="Integrations" width="49%" />
-</p>
-<p align="center">
-  <img src="public/print-costs.webp" alt="Costs" width="49%" />
-</p>
+```
+Missão            "o que eu quero pra minha empresa" (ex.: faturar R$1M até dez/2026)
+  └─ Projeto       uma frente de trabalho (ex.: "Evo AI", "Lançamento do curso X")
+       └─ Meta      um número que prova progresso (ex.: "100 clientes pagantes", "vender 200 vagas")
+            └─ Ticket   uma tarefa real, do tamanho de uma tarde (ex.: "escrever 5 posts pro Instagram")
+```
 
----
+Você só precisa criar o topo (a Missão). **A partir daí a IA sugere o resto** — os Projetos, as Metas de cada projeto, e a quebra de cada Meta em Tickets — e cada sugestão só se torna real depois que você aprova ou rejeita, geralmente com um toque no Telegram. Nada é criado por trás das suas costas.
 
-## Quick Start
+### O passo a passo na prática
 
-> **Starting out?** After installing, open Claude Code and call **`/oracle`**. It's the official entry point of EvoNexus: runs the initial setup, interviews you about your business, shows what the toolkit can automate for you, and delivers a phased activation plan.
+1. **Você cria uma Missão** — a página `/goals` no dashboard, ou simplesmente descreve o objetivo pra IA. Ex.: "Quero R$1M de faturamento até dezembro."
+2. **A IA sugere Projetos** — em minutos, você recebe no Telegram algo como: *"Sugiro 3 projetos pra essa missão: Evo AI, Evento X e Academia Y. Aprovar?"* Um toque e os projetos existem.
+3. **A IA sugere Metas por Projeto** — pra cada projeto aprovado, chega outra sugestão: *"Pro projeto Evo AI, sugiro as metas: 100 clientes pagantes até 30/06, lançar a v2 da cobrança."* Aprovar de novo.
+4. **A IA quebra cada Meta em Tickets** — tarefas do tamanho certo pra alguém (humano ou agente) executar essa semana, já com prioridade e responsável sugeridos.
+5. **Os agentes trabalham os Tickets** — cada Ticket tem um agente-dono (ex.: Pixel pra conteúdo de redes sociais, Nex pra propostas comerciais, Flux pra financeiro). Eles avançam o trabalho sozinhos entre as reuniões — é o mecanismo de **heartbeat**: o agente "acorda" de tempos em tempos, olha a fila de tickets dele, decide se há algo a fazer, e age.
+6. **O progresso sobe sozinho** — quando um Ticket é resolvido, a Meta correspondente avança automaticamente; quando todas as Metas de um Projeto terminam, o Projeto se marca como concluído. Você acompanha em `/goals` sem precisar atualizar planilha nenhuma.
+7. **Você só entra pra decidir, não pra operar** — cada rung acima (Missão→Projeto, Projeto→Meta, Meta→Ticket) para numa aprovação. Publicar conteúdo real nas redes também para numa aprovação antes de ir ao ar. A IA propõe; você decide.
 
-### Method 1 — Docker (no setup, runs anywhere)
+### Onde você vê tudo isso
 
-```bash
-curl -O https://raw.githubusercontent.com/evolution-foundation/evo-nexus/main/docker-compose.hub.yml
-docker compose -f docker-compose.hub.yml up -d
-open http://localhost:8080
-```
+| Página | Pra que serve |
+|---|---|
+| **Projetos** | Suas frentes de trabalho ativas, criar novo projeto |
+| **Metas** | A árvore Missão → Projeto → Meta, com % de progresso |
+| **Kanban** | Os Tickets — o trabalho real, dia a dia |
+| **Agentes** | Seu "time": 38 especialistas (financeiro, comercial, social media, jurídico, dados, etc.) |
+| **Habilidades** | O que cada agente sabe fazer (190+ skills prontas) |
+| **Heartbeats** | Quais agentes estão em modo proativo e com que frequência acordam |
+| **Rotinas** | Relatórios e ações automáticas em horário fixo (briefing de manhã, fechamento do dia, etc.) |
+| **Gatilhos** | Eventos que acordam um agente na hora (ex.: alguém te mencionou num ticket) |
+| **Atividades** | Histórico de tudo que aconteceu — auditoria |
+| **Modelos** | Templates reutilizáveis (relatórios, documentos) |
+
+### Um exemplo concreto — gerar clientes pelas redes sociais
+
+Isso conecta direto com o objetivo de negócio de atrair clientes, seguidores, receita e autoridade pelo conteúdo:
+
+1. Você cria a Meta "5.000 seguidores no Instagram até setembro" dentro de um Projeto de marketing.
+2. A IA quebra em Tickets: calendário de conteúdo, 10 posts, 3 reels, 1 sequência de e-mail de nutrição.
+3. O agente **Pixel** (social media) pega os tickets de conteúdo e produz os posts.
+4. Antes de qualquer coisa ir ao ar, cai uma aprovação no seu Telegram com o texto e a mídia exatos — você aprova, rejeita ou pede ajuste.
+5. Aprovado, a publicação sai de verdade nas redes (via integração com o Postiz) — sem fabricar sucesso: o sistema só marca como publicado depois de confirmar de fato na plataforma.
+6. Seguidores/leads que isso gera alimentam de volta a Meta e, no fim da cadeia, a Missão de faturamento.
+
+**O ganho pra sua rotina:** você troca "lembrar de postar, escrever o texto, editar a imagem, publicar, acompanhar" por "aprovar um Telegram por dia". O sistema é a memória e a mão de obra; você é a decisão.
+
+---
 
-The setup wizard loads on first boot. Paste your Anthropic / OpenAI / Codex key and you're done. Full guide: [docs/guides/docker-install.md](docs/guides/docker-install.md).
+## OmniRoute — o gateway de IA da stack
 
-### Method 2 — One command (CLI)
+O upgrade mais importante deste fork: o [OmniRoute](https://github.com/diegosouzapw/OmniRoute) (MIT, criado por [diegosouzapw](https://github.com/diegosouzapw)) roda **dentro da sua stack Swarm** como o serviço opcional `omniroute`, e o EvoNexus fala com ele pela rede interna.
 
-```bash
-npx @evoapi/evo-nexus
-```
+**Por que isso importa:**
 
-### Method 3 — Manual clone (developers / contributors)
+- **Fim da dependência externa** — se um gateway público cai (503), seu bot e seus heartbeats caem junto. Self-hosted, o único ponto de falha é a sua VPS.
+- **237+ providers com fallback automático** — configure OpenAI, Anthropic, Gemini, DeepSeek, Groq, NVIDIA e o que mais quiser no dashboard do OmniRoute; com `OPENAI_MODEL=auto` ele roteia pro melhor disponível e cai pro próximo se um falhar.
+- **Codex OAuth embutido** — conecte sua conta ChatGPT Plus/Pro no OmniRoute e use a cota do Codex como um provider comum.
+- **Compressão de tokens** (RTK/Caveman) — reduz o custo de contexto em 15–95% dependendo do conteúdo.
+- **Latência mínima** — o EvoNexus acessa `http://omniroute:20128/v1` via alias DNS do Swarm, sem sair pra internet e sem passar pelo Traefik.
 
-```bash
-git clone --depth 1 https://github.com/evolution-foundation/evo-nexus.git
-cd evo-nexus
+**Como fica a arquitetura:**
 
-# Interactive setup wizard
-make setup
+```
+Telegram / Dashboard / Heartbeats / Rotinas
+        |
+        v
+EvoNexus (provider ativo: omnirouter)
+        |
+        v  http://omniroute:20128/v1  (rede interna do Swarm)
+OmniRoute (self-hosted)
+        |
+        +-- Codex OAuth (ChatGPT Plus)      [priority 1]
+        +-- NVIDIA NIM                       [fallback]
+        +-- OpenRouter / Gemini / DeepSeek…  [fallback]
 ```
 
-### Prerequisites
+**Segurança:** o dashboard do OmniRoute usa a **auth nativa** (login + sessão JWT). Não coloque basic-auth do Traefik na frente — as chamadas internas do dashboard (SSE/WS/API) usam header `Authorization` próprio e entram em loop de 401. O `REQUIRE_API_KEY=true` garante que a API `/v1` só responde com chave válida.
 
-| Tool | Required | Install |
-|---|---|---|
-| **Claude Code** | Yes (CLI install) | `npm install -g @anthropic-ai/claude-code` |
-| **Python 3.11+** | Yes (CLI install) | via `uv` |
-| **Node.js 18+** | Yes (CLI install) | [nodejs.org](https://nodejs.org) |
-| **uv** | Yes (CLI install) | `curl -LsSf https://astral.sh/uv/install.sh \| sh` |
-| **Docker Engine 24+** | Yes (Docker install) | [docs.docker.com/engine/install](https://docs.docker.com/engine/install/) |
+**Configuração assistida por agente:** [PROMPT-OMNIROUTE-CONFIG.md](PROMPT-OMNIROUTE-CONFIG.md) — prompt pronto pra colar num Claude Code (ou agente similar) que audita e otimiza o seu OmniRoute pela management API: keys nomeadas com telemetria de custo, compressão com auto-trigger, refresh de quota e reativação de modelos `:free`. Extraído de uma configuração real em produção.
 
 ---
 
-## AI Providers
+## Seletor de providers
 
-EvoNexus runs on **Anthropic's Claude** by default. For OpenAI, Gemini, Bedrock, OpenRouter, Vertex AI, or Codex Auth, it switches to [OpenClaude](https://www.npmjs.com/package/@gitlawb/openclaude).
+A página **Providers** do dashboard ganhou o provider **OMNIROUTER** (qualquer endpoint OpenAI-compatível com URL, chave e modelo customizados), somando-se aos existentes (Anthropic nativo, OpenRouter, OpenAI, Gemini, NVIDIA NIM, Codex Auth, Bedrock, Vertex).
 
-| Provider | Binary | Key env vars |
-|---|---|---|
-| **Anthropic** (default) | `claude` | native auth |
-| **OpenRouter** (200+ models) | `openclaude` | `CLAUDE_CODE_USE_OPENAI`, `OPENAI_BASE_URL`, `OPENAI_API_KEY`, `OPENAI_MODEL` |
-| **OpenAI** | `openclaude` | `CLAUDE_CODE_USE_OPENAI`, `OPENAI_API_KEY`, `OPENAI_MODEL` |
-| **Google Gemini** | `openclaude` | `CLAUDE_CODE_USE_GEMINI`, `GEMINI_API_KEY`, `GEMINI_MODEL` |
-| **Codex Auth** | `openclaude` | `CLAUDE_CODE_USE_OPENAI`, `OPENAI_MODEL=codexplan` |
-| **AWS Bedrock** | `openclaude` | `CLAUDE_CODE_USE_BEDROCK`, `AWS_REGION`, `AWS_BEARER_TOKEN_BEDROCK` |
-| **Google Vertex AI** | `openclaude` | `CLAUDE_CODE_USE_VERTEX`, `ANTHROPIC_VERTEX_PROJECT_ID`, `CLOUD_ML_REGION` |
+Regras de resolução de chave que este fork corrigiu e agora documenta (leia antes de debugar um 401):
 
-```bash
-npm install -g @gitlawb/openclaude
-```
+1. **A chave do próprio provider em `config/providers.json` sempre vence** — é ela que a página Providers grava.
+2. As chaves do `.env` são **fallback**, usadas só quando o provider não tem chave própria.
+3. `NVIDIA_API_KEY` do ambiente só é enviada para endpoints `*.nvidia.com` — nunca vaza para outros gateways.
 
-The setup wizard asks which provider you want during `make setup`, and you can switch at any time from the **Providers** page in the dashboard.
+O terminal e o chat do dashboard usam o CLI [OpenClaude](https://www.npmjs.com/package/@gitlawb/openclaude) para providers não-Anthropic, com ambiente limpo por sessão, `--fallback-model` automático e auto-update do CLI desativado em produção (um self-update no meio da sessão matava o processo).
 
 ---
 
-## Web Dashboard
+## Bot do Telegram multi-provider
+
+No EvoNexus original, o canal do Telegram usa o modo nativo do Claude Code (channels) — que **exige login claude.ai dentro do container** e não funciona com providers OpenAI-compatíveis. Este fork adiciona o **modo `provider`** (`TELEGRAM_MODE=provider`, padrão na stack): um runtime próprio que responde pelo provider ativo do dashboard.
 
-A full web UI at `http://localhost:8080`:
+O que o bot faz:
 
-| Page | What it does |
+| Recurso | Como |
 |---|---|
-| **Overview** | Unified dashboard with metrics from all agents |
-| **Systems** | Register and manage apps/services |
-| **Reports** | Browse HTML reports generated by routines |
-| **Agents** | View agent definitions and system prompts |
-| **Routines** | Metrics per routine + manual run |
-| **Tasks** | Schedule one-off actions at a specific date/time |
-| **Skills** | Browse all 190+ skills by category |
-| **Templates** | Preview HTML report templates |
-| **Services** | Start/stop scheduler, channels with live logs |
-| **Memory** | Browse agent and global memory files |
-| **Knowledge** | Semantic search via [MemPalace](https://github.com/milla-jovovich/mempalace) |
-| **Integrations** | Status of all connected services + OAuth setup |
-| **Chat** | Embedded Claude Code terminal (xterm.js + WebSocket) |
-| **Users** | User management with roles |
-| **Audit Log** | Full audit trail of all actions |
-| **Config** | View CLAUDE.md, routines config, workspace settings |
+| Responder pelo provider ativo | Chat Completions no provider configurado (OmniRoute, NVIDIA, OpenRouter, Codex…) |
+| **Trocar de provider no chat** | `/provider omnirouter` · `/provider status` · `/provider default` (volta ao global) |
+| Sessão nova | `/new` (limpa a memória local da conversa) |
+| Áudio → texto | Transcrição via Whisper na API da Groq (`/groq set <key>` para configurar) |
+| Imagens | Descreve e responde sobre fotos enviadas |
+| URLs | Baixa e resume links colados na conversa |
+| Memória por chat | Histórico local por conversa, com identificação de quem falou |
+| Fallback | Se o provider primário falha, percorre a cadeia `fallback_providers` do providers.json |
 
-```bash
-make dashboard-app   # Start Flask + React on :8080
-```
+Benefício direto: o bot **sobrevive a redeploys sem re-login** (nada de sessão claude.ai pra expirar) e você escolhe o custo por conversa — manda o dia a dia pro modelo barato e troca pro modelo forte com um comando.
 
 ---
 
-## Architecture
+## Deploy completo na VPS (passo a passo)
 
-```
-User (human)
-    |
-    v
-Claude Code (orchestrator)
-    |
-    +-- Clawdia   — ops: agenda, emails, tasks, decisions, dashboard
-    +-- Flux      — finance: Stripe, ERP, MRR, cash flow, monthly close
-    +-- Atlas     — projects: Linear, GitHub, milestones, sprints
-    +-- Pulse     — community: Discord, WhatsApp, sentiment, FAQ
-    +-- Pixel     — social: content, calendar, cross-platform analytics
-    +-- Sage      — strategy: OKRs, roadmap, prioritization, scenarios
-    +-- Nex       — sales: pipeline, proposals, qualification
-    +-- Mentor    — courses: learning paths, modules
-    +-- Kai       — personal: health, habits, routine
-    +-- Oracle    — entry point: onboarding, business discovery
-    +-- Mako      — marketing: campaigns, content, SEO, brand
-    +-- Aria      — HR: recruiting, onboarding, performance
-    +-- Zara      — customer success: triage, escalation, health
-    +-- Lex       — legal: contracts, compliance, NDA, risk
-    +-- Nova      — product: specs, roadmaps, metrics, research
-    +-- Dex       — data/BI: analysis, SQL, dashboards
-```
+### Pré-requisitos
 
-Each agent has:
-- System prompt in `.claude/agents/`
-- Slash command in `.claude/commands/`
-- Persistent memory in `.claude/agent-memory/`
-- Related skills in `.claude/skills/`
+- VPS com **Docker Swarm** inicializado (`docker swarm init`)
+- **Traefik** rodando e conectado à rede externa `network_public` (entrypoint TLS `websecure`, cert resolver `letsencryptresolver`)
+- **Portainer** (recomendado) ou acesso SSH para `docker stack deploy`
+- Dois subdomínios apontando pra VPS (A record): um pro EvoNexus (ex.: `nexus.seudominio.com.br`) e um pro dashboard do OmniRoute (ex.: `omni.seudominio.com.br`)
 
----
+### 1. Publique as imagens no seu Docker Hub
 
-## Documentation
+O workflow [`.github/workflows/docker-publish-britto.yml`](.github/workflows/docker-publish-britto.yml) builda as duas imagens Swarm (`evo-nexus-runtime` e `evo-nexus-dashboard`) e publica **no seu namespace** do Docker Hub. Faça fork deste repositório e configure os secrets em *Settings → Secrets and variables → Actions*:
 
-| Resource | Link |
+| Secret | Valor |
 |---|---|
-| Website | [evolutionfoundation.com.br](https://evolutionfoundation.com.br) |
-| Documentation | [docs.evolutionfoundation.com.br](https://docs.evolutionfoundation.com.br) |
-| Community | [evolutionfoundation.com.br/community](https://evolutionfoundation.com.br/community) |
-| Getting Started | [docs/getting-started.md](docs/getting-started.md) |
-| Architecture | [docs/architecture.md](docs/architecture.md) |
-| Routines | [ROUTINES.md](ROUTINES.md) |
-| Roadmap | [ROADMAP.md](ROADMAP.md) |
-| Changelog | [CHANGELOG.md](CHANGELOG.md) |
-| Contributing | [CONTRIBUTING.md](CONTRIBUTING.md) |
-| Security | [SECURITY.md](SECURITY.md) |
+| `DOCKERHUB_USERNAME` | seu usuário do Docker Hub (vira o namespace das imagens) |
+| `DOCKERHUB_TOKEN` | Access Token (Docker Hub → Account Settings → Security) |
 
----
+Qualquer push na branch de deploy (ou tag `vX.Y.Z`, ou disparo manual) publica `:latest` e `:sha-xxxx`. Build típico: ~2 min com cache.
+
+### 2. Suba a stack no Portainer
 
-## Contributing
+Use a [`evonexus-vps.stack.example.yml`](evonexus-vps.stack.example.yml) como base (Portainer → Stacks → Add stack → Web editor). Ela sobe 4 serviços:
 
-Contributions are welcome! Please read [CONTRIBUTING.md](CONTRIBUTING.md) for guidelines on how to submit issues, propose features, and open pull requests.
+| Serviço | O que é |
+|---|---|
+| `evonexus_dashboard` | Flask + React + terminal web + heartbeats (exposto via Traefik) |
+| `evonexus_scheduler` | Rotinas agendadas (ADWs) |
+| `evonexus_telegram` | Bot do Telegram em modo provider |
+| `omniroute` | Gateway de IA (opcional, mas recomendado) |
 
-Join our [community](https://evolutionfoundation.com.br/community) to discuss ideas and collaborate.
+Preencha as variáveis da stack (aba *Environment variables* do Portainer):
 
----
+| Variável | Como gerar |
+|---|---|
+| `EVONEXUS_DOMAIN` | seu domínio (ex.: `nexus.seudominio.com.br`) |
+| `DASHBOARD_API_TOKEN` | `openssl rand -base64 32` |
+| `OMNIROUTE_DOMAIN` | domínio do dashboard do OmniRoute (ex.: `omni.seudominio.com.br`) |
+| `OMNIROUTE_INITIAL_PASSWORD` | senha de login do dashboard do OmniRoute |
+| `OMNIROUTE_JWT_SECRET` | `openssl rand -base64 48` |
+| `OMNIROUTE_API_KEY_SECRET` | `openssl rand -hex 32` |
+| `OMNIROUTE_STORAGE_KEY` | `openssl rand -hex 32` — **guarde bem: cifra o SQLite do OmniRoute; perder = perder as configs** |
+| `SMTP_*` | opcionais (notificações por email) |
+
+A stack **não contém nenhuma credencial de propósito** — todos os tokens de integrações (Google, Stripe, Linear…) são configurados depois, pela UI.
+
+### 3. Configure o OmniRoute
+
+1. Acesse `https://omni.seudominio.com.br` e faça login com a `OMNIROUTE_INITIAL_PASSWORD`.
+2. Na aba de **providers**, conecte o que você usa: Codex OAuth (ChatGPT Plus), NVIDIA, Gemini, DeepSeek, etc. A **ordem de prioridade** define o roteamento do `auto`.
+3. Na aba **Endpoints**, gere uma **API key** (`sk-...`) para o EvoNexus.
+
+> ⚠️ As keys vivem no SQLite do volume `omniroute_data`. Se você zerar o volume, **todas as keys morrem** — gere uma nova e atualize no EvoNexus. E pra zerar o volume no Swarm: `docker volume rm` falha com "volume in use" enquanto containers parados de tasks antigas existirem; remova-os antes com `docker ps -a --filter volume=omniroute_data -q | xargs docker rm -f`.
+
+### 4. Plugue o OmniRoute como provider do EvoNexus
+
+Acesse `https://nexus.seudominio.com.br` → **Providers** → **OMNIROUTER**:
+
+| Campo | Valor |
+|---|---|
+| Base URL | `http://omniroute:20128/v1` (DNS interno do Swarm — não use a URL pública) |
+| API Key | a key gerada no passo 3 |
+| Model | `auto` (deixa o OmniRoute rotear e fazer fallback) |
 
-## Security
+Marque como provider ativo. Pronto: dashboard, terminal, heartbeats, rotinas e Telegram passam a responder pelo OmniRoute.
 
-For security issues, **do not open a public issue**. Email **suporte@evofoundation.com.br** or use GitHub's private vulnerability reporting. See [SECURITY.md](SECURITY.md) for details.
+### 5. Telegram (opcional)
+
+1. Crie um bot no [@BotFather](https://t.me/BotFather) e pegue o token.
+2. No dashboard → **Integrations**, salve `TELEGRAM_BOT_TOKEN` e `TELEGRAM_CHAT_ID` (seu chat id).
+3. O serviço `evonexus_telegram` já sobe em `TELEGRAM_MODE=provider`. Mande um `ping` — deve responder pelo provider ativo.
+
+> ⚠️ Cada deploy precisa do **seu próprio bot/token** — dois pollers no mesmo token brigam (HTTP 409) e um rouba as mensagens do outro.
+
+### 6. Atualizações
+
+Push na branch de deploy → GitHub Actions publica as imagens novas → na VPS:
+
+```bash
+docker service update --force --image SEU_USUARIO/evo-nexus-dashboard:latest evonexus_evonexus_dashboard
+docker service update --force --image SEU_USUARIO/evo-nexus-runtime:latest  evonexus_evonexus_telegram
+docker service update --force --image SEU_USUARIO/evo-nexus-runtime:latest  evonexus_evonexus_scheduler
+```
+
+### Troubleshooting rápido
+
+| Sintoma | Causa provável |
+|---|---|
+| `401 Unauthorized: chave API inválida/expirada` | Key do provider errada **no providers.json** (a página Providers grava lá; o `.env` é só fallback) — ou key do OmniRoute morta por reset de volume |
+| Bot responde `All providers failed` | Provider ativo sem chave válida; teste `/provider status` no chat |
+| Terminal morre com exit 1 no meio da sessão | Auto-update do CLI (já travado com `DISABLE_AUTOUPDATER=1` nesta versão) |
+| `workspace has not been trusted` como root | Entrypoints desta versão re-seedam o trust e exportam `IS_SANDBOX=1` a cada boot — confira se está na imagem atualizada |
+| Dashboard do OmniRoute em loop de 401 | Basic-auth do Traefik na frente — remova; a auth é nativa |
 
 ---
 
-## Credits & Acknowledgments
+## O que vem do upstream (e continua aqui)
 
-EvoNexus stands on the shoulders of great open source projects:
+Tudo do EvoNexus original está preservado: os 38 agentes, as 190+ skills, rotinas/scheduler, heartbeats (protocolo de 9 passos), goals (cascata Mission → Project → Goal → Ticket, com sugestão automática por IA em cada degrau, aprovada pelo humano), tickets com checkout atômico, memória persistente em duas camadas, knowledge base semântica, dashboard completo com auditoria e gestão de usuários, e as 19+ integrações (Google, Linear, GitHub, Discord, Stripe, Omie, Bling, Asaas, Fathom, Todoist…).
 
-- **[oh-my-claudecode](https://github.com/yeachan-heo/oh-my-claudecode)** by **Yeachan Heo** (MIT) — 19 of the 21 engineering agents (including `apex-architect`, `bolt-executor`, `lens-reviewer`) and all `dev-*` skills are derived from OMC v4.11.4. The 2 native agents (`helm-conductor`, `mirror-retro`) and the 6-phase workflow (`.claude/rules/dev-phases.md`) are EvoNexus-native additions. See [NOTICE.md](NOTICE.md) for the full list of derived components and modifications.
+Documentação da plataforma: [README original](https://github.com/evolution-foundation/evo-nexus#readme) · [docs.evolutionfoundation.com.br](https://docs.evolutionfoundation.com.br) · [docs/getting-started.md](docs/getting-started.md) · [docs/architecture.md](docs/architecture.md) · [ROUTINES.md](ROUTINES.md) · [CHANGELOG.md](CHANGELOG.md)
 
 ---
 
-## License
+## Créditos & Agradecimentos
+
+Este fork existe porque outros construíram coisas excelentes antes:
+
+- **[EvoNexus](https://github.com/evolution-foundation/evo-nexus)** pela **[Evolution Foundation](https://evolutionfoundation.com.br)** — a plataforma inteira: agentes, skills, rotinas, heartbeats, goals, tickets, dashboard e integrações. Este repositório é um fork derivado; todo o mérito da base é deles. Site: [evolutionfoundation.com.br](https://evolutionfoundation.com.br) · Suporte: suporte@evofoundation.com.br
+- **[OmniRoute](https://github.com/diegosouzapw/OmniRoute)** por **[Diego Souza](https://github.com/diegosouzapw)** (MIT) — o gateway de IA self-hosted que esta distribuição embute na stack.
+- **[oh-my-claudecode](https://github.com/yeachan-heo/oh-my-claudecode)** por **Yeachan Heo** (MIT) — 19 dos 21 agentes de engenharia e as skills `dev-*` derivam do OMC (herdado do upstream). Detalhes em [NOTICE.md](NOTICE.md).
+- **[OpenClaude](https://www.npmjs.com/package/@gitlawb/openclaude)** — o CLI que permite rodar o protocolo do Claude Code em providers alternativos.
+
+A camada de upgrade (OmniRoute na stack, seletor de providers, Telegram multi-provider, pipeline VPS e hardening) é mantida por **[Sistema Britto](https://sistemabritto.com.br)**.
+
+---
 
-EvoNexus is licensed under the Apache License 2.0, with additional brand-protection conditions (LOGO/copyright preservation and Usage Notification requirement). See [LICENSE](LICENSE) for full details.
+## Licença
 
-For licensing inquiries, contact **suporte@evofoundation.com.br**.
+Este fork mantém integralmente a licença do EvoNexus original: **Apache License 2.0 com condições adicionais de proteção de marca** — preservação de LOGO/copyright nos componentes de frontend e requisito de notificação de uso. Veja [LICENSE](LICENSE) para o texto completo.
 
-## Trademarks
+Em conformidade com essas condições, esta distribuição **não remove nem modifica** o LOGO e as informações de copyright do EvoNexus no console e nas aplicações. Para questões de licenciamento do EvoNexus, contate **suporte@evofoundation.com.br**.
 
-"Evolution Foundation", "Evolution" and "EvoNexus" are trademarks of Evolution Foundation. See [TRADEMARKS.md](TRADEMARKS.md) for the brand assets policy.
+## Marcas
 
-Third-party attributions are documented in [NOTICE](NOTICE) and [NOTICE.md](NOTICE.md).
+"Evolution Foundation", "Evolution" e "EvoNexus" são marcas da Evolution Foundation — veja [TRADEMARKS.md](TRADEMARKS.md). "Omni-Nexus" nomeia apenas esta distribuição derivada e não é afiliado à Evolution Foundation além da relação de fork. Atribuições de terceiros: [NOTICE](NOTICE) e [NOTICE.md](NOTICE.md).
 
 ---
 
 <p align="center">
-  An unofficial community toolkit for <a href="https://docs.anthropic.com/en/docs/claude-code">Claude Code</a>
+  Um toolkit comunitário não oficial para o <a href="https://docs.anthropic.com/en/docs/claude-code">Claude Code</a>
   <br/>
-  Made by <a href="https://evolutionfoundation.com.br">Evolution Foundation</a> · © 2026
+  Base por <a href="https://evolutionfoundation.com.br">Evolution Foundation</a> · Upgrade por <a href="https://sistemabritto.com.br">Sistema Britto</a> · © 2026
   <br/>
-  <sub>Not affiliated with Anthropic</sub>
+  <sub>Não afiliado à Anthropic</sub>
 </p>
diff --git a/backup.py b/backup.py
index abb0c15b2..16d81e242 100644
--- a/backup.py
+++ b/backup.py
@@ -11,6 +11,7 @@
 import json
 import os
 import platform
+import sqlite3
 import subprocess
 import sys
 import tempfile
@@ -224,9 +225,61 @@ def collect_files() -> list[str]:
         if full_path.is_file():
             files.add(line)
 
+    # Explicit env candidates — in Swarm the persistent env lives at
+    # config/.env (with /workspace/.env symlinked to it), so both paths
+    # must land in the backup regardless of what git ls-files reports.
+    for candidate in (".env", "config/.env"):
+        p = WORKSPACE / candidate
+        if p.is_file():
+            files.add(candidate)
+
     return sorted(files)
 
 
+SQLITE_MAGIC = b"SQLite format 3\x00"
+
+
+def _is_sqlite_file(path: Path) -> bool:
+    """Detect a SQLite database by its 16-byte header magic."""
+    try:
+        with open(path, "rb") as f:
+            return f.read(16) == SQLITE_MAGIC
+    except OSError:
+        return False
+
+
+def _snapshot_sqlite(src: Path, tmpdir: Path, index: int) -> Path | None:
+    """Create a consistent point-in-time copy of a (possibly live) SQLite DB.
+
+    Uses the SQLite Online Backup API, which folds pending WAL frames into
+    the copy — copying the bare .db file of a WAL-mode database that is
+    being written to can produce a malformed or stale backup.
+
+    Returns the snapshot path, or None if the backup API failed (caller
+    falls back to a raw copy with a warning).
+    """
+    dst = tmpdir / f"{index:04d}-{src.name}"
+    src_conn = None
+    dst_conn = None
+    try:
+        src_conn = sqlite3.connect(f"file:{src}?mode=ro", uri=True)
+        dst_conn = sqlite3.connect(dst)
+        src_conn.backup(dst_conn)
+        check = dst_conn.execute("PRAGMA quick_check").fetchone()
+        if not check or check[0] != "ok":
+            dst.unlink(missing_ok=True)
+            return None
+        return dst
+    except sqlite3.Error:
+        dst.unlink(missing_ok=True)
+        return None
+    finally:
+        if dst_conn is not None:
+            dst_conn.close()
+        if src_conn is not None:
+            src_conn.close()
+
+
 def _format_size(size_bytes: int) -> str:
     """Format bytes to human-readable size."""
     for unit in ["B", "KB", "MB", "GB"]:
@@ -253,46 +306,72 @@ def backup_local(s3_upload: bool = False, s3_bucket: str = None) -> Path:
     zip_name = f"evonexus-backup-{timestamp}.zip"
     zip_path = BACKUPS_DIR / zip_name
 
-    # Build manifest
-    file_entries = []
-    total_size = 0
-    for rel in files:
-        full = WORKSPACE / rel
-        size = full.stat().st_size
-        total_size += size
-        file_entries.append({"path": rel, "size": size})
-
-    manifest = {
-        "version": _get_version(),
-        "workspace_name": _get_workspace_name(),
-        "created_at": datetime.now().isoformat(),
-        "hostname": platform.node(),
-        "file_count": len(files),
-        "total_size": total_size,
-        "files": file_entries,
-    }
-
-    # Create ZIP
-    if HAS_RICH:
-        with Progress(
-            SpinnerColumn(),
-            TextColumn("[progress.description]{task.description}"),
-            BarColumn(),
-            TextColumn("{task.completed}/{task.total}"),
-            console=console,
-        ) as progress:
-            task = progress.add_task("Compressing...", total=len(files))
+    with tempfile.TemporaryDirectory(prefix="evonexus-backup-") as tmp:
+        tmpdir = Path(tmp)
+
+        # Resolve the actual source for each file. Live SQLite databases get
+        # a consistent snapshot (WAL folded in); everything else is zipped
+        # straight from the workspace.
+        sources: dict[str, Path] = {}
+        snapshot_failures: list[str] = []
+        for i, rel in enumerate(files):
+            full = WORKSPACE / rel
+            if _is_sqlite_file(full):
+                snap = _snapshot_sqlite(full, tmpdir, i)
+                if snap is None:
+                    snapshot_failures.append(rel)
+                    sources[rel] = full
+                else:
+                    sources[rel] = snap
+            else:
+                sources[rel] = full
+
+        for rel in snapshot_failures:
+            msg = f"SQLite snapshot failed for {rel} — raw copy included (may be inconsistent)"
+            if HAS_RICH:
+                console.print(f"  [yellow]⚠ {msg}[/]")
+            else:
+                print(f"  {YELLOW}⚠ {msg}{RESET}")
+
+        # Build manifest (sizes reflect what actually goes into the ZIP)
+        file_entries = []
+        total_size = 0
+        for rel in files:
+            size = sources[rel].stat().st_size
+            total_size += size
+            file_entries.append({"path": rel, "size": size})
+
+        manifest = {
+            "version": _get_version(),
+            "workspace_name": _get_workspace_name(),
+            "created_at": datetime.now().isoformat(),
+            "hostname": platform.node(),
+            "file_count": len(files),
+            "total_size": total_size,
+            "files": file_entries,
+        }
+
+        # Create ZIP
+        if HAS_RICH:
+            with Progress(
+                SpinnerColumn(),
+                TextColumn("[progress.description]{task.description}"),
+                BarColumn(),
+                TextColumn("{task.completed}/{task.total}"),
+                console=console,
+            ) as progress:
+                task = progress.add_task("Compressing...", total=len(files))
+                with zipfile.ZipFile(zip_path, "w", zipfile.ZIP_DEFLATED) as zf:
+                    zf.writestr("manifest.json", json.dumps(manifest, indent=2))
+                    for rel in files:
+                        zf.write(sources[rel], rel)
+                        progress.advance(task)
+        else:
+            print(f"  Compressing {len(files)} files...")
             with zipfile.ZipFile(zip_path, "w", zipfile.ZIP_DEFLATED) as zf:
                 zf.writestr("manifest.json", json.dumps(manifest, indent=2))
                 for rel in files:
-                    zf.write(WORKSPACE / rel, rel)
-                    progress.advance(task)
-    else:
-        print(f"  Compressing {len(files)} files...")
-        with zipfile.ZipFile(zip_path, "w", zipfile.ZIP_DEFLATED) as zf:
-            zf.writestr("manifest.json", json.dumps(manifest, indent=2))
-            for rel in files:
-                zf.write(WORKSPACE / rel, rel)
+                    zf.write(sources[rel], rel)
 
     zip_size = zip_path.stat().st_size
 
@@ -375,6 +454,20 @@ def cleanup_old_backups(s3_bucket: str = None):
 # ── Restore ──────────────────────────────────────
 
 
+def _remove_stale_wal(dest: Path, data: bytes) -> None:
+    """After replacing a SQLite DB, drop leftover -wal/-shm from the old DB.
+
+    Backups store WAL-folded snapshots (no -wal/-shm in the ZIP). If the
+    destination had a live WAL-mode database, its journal files survive the
+    overwrite and SQLite then reports 'database disk image is malformed'
+    when pairing them with the freshly restored file.
+    """
+    if data[:16] != SQLITE_MAGIC:
+        return
+    for suffix in ("-wal", "-shm"):
+        Path(str(dest) + suffix).unlink(missing_ok=True)
+
+
 def restore_local(zip_path: Path, mode: str = "merge"):
     """Restore workspace from a ZIP backup."""
     banner("Backup — Restore")
@@ -417,6 +510,7 @@ def restore_local(zip_path: Path, mode: str = "merge"):
                         dest.parent.mkdir(parents=True, exist_ok=True)
                         data = zf.read(rel)
                         dest.write_bytes(data)
+                        _remove_stale_wal(dest, data)
                         restored += 1
                     progress.advance(task)
         else:
@@ -434,6 +528,7 @@ def restore_local(zip_path: Path, mode: str = "merge"):
                     dest.parent.mkdir(parents=True, exist_ok=True)
                     data = zf.read(rel)
                     dest.write_bytes(data)
+                    _remove_stale_wal(dest, data)
                     restored += 1
 
     if HAS_RICH:
diff --git a/config/heartbeats.example.yaml b/config/heartbeats.example.yaml
index a1ef5aa61..2adf3f387 100644
--- a/config/heartbeats.example.yaml
+++ b/config/heartbeats.example.yaml
@@ -1,30 +1,34 @@
-# Heartbeats — Proactive Agent Configuration
-# Source of truth for all heartbeat definitions.
-# DB mirrors this file; UI reads/writes through the API which updates both.
+# Heartbeats — Proactive Agent Configuration (Example)
+# Copy of the live Sistema Britto configuration with sensitive values
+# replaced by placeholders. Use this as a reference or template.
+#
+# The real configuration is in heartbeats.yaml (gitignored).
 #
 # Fields:
-#   id              — unique slug (kebab-case)
-#   agent           — agent file stem from .claude/agents/ (without .md)
-#   interval_seconds — minimum 60; use multiples of 3600 for hourly cadences
-#   max_turns       — hard cap on Claude turns per run (default: 10)
-#   timeout_seconds — hard kill timeout for subprocess (default: 600)
+#   id                 — unique slug (kebab-case)
+#   agent              — agent file stem from .claude/agents/ (without .md)
+#   interval_seconds   — minimum 60; use multiples of 3600 for hourly cadences
+#   max_turns          — hard cap on Claude turns per run (default: 10)
+#   timeout_seconds    — hard kill timeout for subprocess (default: 600)
 #   lock_timeout_seconds — stale lock cleanup threshold (default: 1800)
-#   wake_triggers   — list from: [interval, new_task, mention, manual, approval_decision]
-#   enabled         — false = dormant; set true via UI toggle or YAML edit to activate
-#   goal_id         — (stub, Feature 1.2) links to a goal for context injection
-#   required_secrets — (stub, Feature 2.3) list of .env key names this agent needs
-#   decision_prompt — the decision question the agent answers in step 4 of the protocol
-#   handler         — (Wave 2.2r) optional Python module.function for in-process handlers.
-#                     If set, heartbeat_runner calls this function directly instead of
-#                     spawning a Claude CLI subprocess. max_turns must be 0.
-#                     Format: "module_name.function_name"
+#   wake_triggers      — list from: [interval, new_task, mention, manual, approval_decision]
+#   enabled            — false = dormant; set true via UI toggle or YAML edit to activate
+#   goal_id            — (optional) links to a goal for context injection
+#   required_secrets   — list of .env key names this agent needs at runtime
+#   decision_prompt    — the decision question the agent answers in step 4 of the protocol
+#   handler            — (optional) Python module.function for in-process handlers.
+#                        If set, heartbeat_runner calls this function directly instead of
+#                        spawning a Claude CLI subprocess. max_turns must be 0.
+#                        Format: "module_name.function_name"
 #
-# IMPORTANT: All seeds start with enabled: false.
-# Davidson enables individually via UI toggle after reviewing in staging.
+# IMPORTANT: All seeds start with enabled: false in this example.
+# Enable individually via UI toggle after reviewing.
 
 heartbeats:
 
-  # Atlas — Linear/GitHub triage every 4 hours
+  # Atlas — Project pipeline check every 4 hours
+  # Monitors Evo CRM for leads stuck in early stages and checks Nexus tickets/goal_tasks
+  # assigned to atlas-project. No longer uses Linear or GitHub.
   - id: atlas-4h
     agent: atlas-project
     interval_seconds: 14400  # 4 hours
@@ -37,15 +41,23 @@ heartbeats:
       - manual
     enabled: false
     goal_id: null
-    required_secrets: []
+    required_secrets:
+      - EVO_CRM_TOKEN  # API token for int-evo-crm skill
     decision_prompt: >
-      You are Atlas, the project agent. Review Linear for stale PRs and issues older
-      than 3 days with no activity. Check GitHub for open PRs waiting on review.
-      Decide: should you act now (comment, triage, escalate) or is there nothing
-      urgent? Respond with a JSON object: {"action": "work"|"skip", "reason": "<1 sentence>",
-      "tasks": [<list of issue ids to touch, if action=work>]}.
+      You are Atlas, the project agent. Linear/GitHub triage is retired — Felipe
+      manages the sales pipeline via Evo CRM (int-evo-crm skill, pipelines/stages/items)
+      and delivery work via the Nexus dashboard itself (tickets and goal_tasks in this
+      workspace DB). Check Evo CRM pipelines for items stuck in an early stage (e.g.
+      "Novo Lead") for more than 3 days with no stage change or follow-up. Check Nexus
+      tickets with status open/in_progress assigned to you (atlas-project) and overdue
+      goal_tasks. Decide: should you act now (follow up on a stuck lead, comment/triage
+      a ticket, escalate) or is there nothing urgent? Respond with JSON:
+      {"action": "work"|"skip", "reason": "<1 sentence>",
+      "tasks": [<list of pipeline item ids or ticket ids to touch, if action=work>]}.
 
   # Zara — Customer support queue triage every 2 hours
+  # Scans the Nexus ticket system for open/pending tickets assigned to zara-cs.
+  # Picks the highest-priority item and decides whether to act.
   - id: zara-2h
     agent: zara-cs
     interval_seconds: 7200  # 2 hours
@@ -68,6 +80,8 @@ heartbeats:
       "ticket_id": "<id or null>"}.
 
   # Flux — Payments and financial alerts every 6 hours
+  # Checks AbacatePay for failed/pending PIX or boleto payments and Evo CRM
+  # for billing items needing attention. No longer uses Stripe or Omie.
   - id: flux-6h
     agent: flux-finance
     interval_seconds: 21600  # 6 hours
@@ -80,16 +94,143 @@ heartbeats:
     enabled: false
     goal_id: null
     required_secrets:
-      - STRIPE_KEY
-      - OMIE_APP_KEY
+      - ABACATEPAY_API_KEY  # AbacatePay API key for payment checks
+      - EVO_CRM_TOKEN       # API token for int-evo-crm billing items
     decision_prompt: >
-      You are Flux, the finance agent. Check Stripe for failed payments or
-      subscriptions that lapsed in the last 6 hours. Check Omie for pending NF-e
-      that need action. Decide: is there something urgent requiring action or escalation
-      to Davidson via Telegram? Respond with JSON:
+      You are Flux, the finance agent. Check AbacatePay (list_checkouts,
+      list_transparent via the custom-int-abacatepay skill) for failed or pending
+      PIX/boleto payments in the last 6 hours. Check Evo CRM (int-evo-crm skill)
+      for billing/CRM items that need action. Decide: is there something urgent
+      requiring action or escalation to Felipe via Telegram? Respond with JSON:
       {"action": "work"|"skip", "reason": "<1 sentence>",
       "alerts": [<list of critical items, if any>]}.
 
+  # goal-planner — decomposes a human-authored top-level Goal into tickets.
+  # Event-driven only: wakes on goal_created (fired by POST /api/goals when a
+  # Goal with no parent_goal_id is created), not on an interval. interval_seconds
+  # is a required field but never fires a job since "interval" isn't in
+  # wake_triggers. See .claude/agents/goal-planner.md.
+  - id: goal-planner
+    agent: goal-planner
+    interval_seconds: 86400  # unused placeholder — no "interval" wake trigger
+    max_turns: 15
+    timeout_seconds: 300
+    lock_timeout_seconds: 1800
+    wake_triggers:
+      - goal_created
+      - manual
+    enabled: false
+    goal_id: null
+    required_secrets: []
+    decision_prompt: >
+      You are goal-planner. A top-level Goal was just created — its id is in the
+      Trigger payload above. Decompose it into 2-6 concrete, assignable tickets
+      per your agent instructions (.claude/agents/goal-planner.md), or skip if it
+      already has tickets (idempotency) or there is no goal_id in the trigger
+      payload.
+
+  # project-planner — proposes Projects for a human-authored Mission.
+  # Event-driven only: wakes on mission_created. See .claude/agents/project-planner.md.
+  - id: project-planner
+    agent: project-planner
+    interval_seconds: 86400  # unused placeholder — no "interval" wake trigger
+    max_turns: 15
+    timeout_seconds: 300
+    lock_timeout_seconds: 1800
+    wake_triggers:
+      - mission_created
+      - manual
+    enabled: false
+    goal_id: null
+    required_secrets: []
+    decision_prompt: >
+      You are project-planner. A Mission was just created — its id is in the
+      Trigger payload above. Propose 1-4 Projects per your agent instructions
+      (.claude/agents/project-planner.md) via POST /api/approvals
+      (gate_type=project_suggestion) — never create a Project directly. Skip
+      if it already has Projects (idempotency) or there is no mission_id in
+      the trigger payload.
+
+  # goal-suggester — proposes Goals for a Project (human-created, or itself
+  # created from an approved project-planner proposal — intentional cascade).
+  # Event-driven only: wakes on project_created. See .claude/agents/goal-suggester.md.
+  - id: goal-suggester
+    agent: goal-suggester
+    interval_seconds: 86400  # unused placeholder — no "interval" wake trigger
+    max_turns: 15
+    timeout_seconds: 300
+    lock_timeout_seconds: 1800
+    wake_triggers:
+      - project_created
+      - manual
+    enabled: false
+    goal_id: null
+    required_secrets: []
+    decision_prompt: >
+      You are goal-suggester. A Project was just created — its id is in the
+      Trigger payload above. Propose 2-6 measurable Goals per your agent
+      instructions (.claude/agents/goal-suggester.md) via POST /api/approvals
+      (gate_type=goal_suggestion) — never create a Goal directly. Skip if it
+      already has Goals (idempotency) or there is no project_id in the
+      trigger payload.
+
+  # pixel-growth-6h — keeps the content-ticket queue topped up for any Goal
+  # Pixel already touches, so the growth funnel never stalls between human
+  # check-ins. State-monitor agent (see STATE_MONITOR_AGENTS in
+  # heartbeat_runner.py) — it must run even with an empty ticket inbox,
+  # because an empty inbox for a content Goal is exactly the case it exists
+  # to fix. See workspace/development/features/growth-content-heartbeat/.
+  - id: pixel-growth-6h
+    agent: pixel-social-media
+    interval_seconds: 21600  # 6 hours — content isn't as time-urgent as CS/finance
+    max_turns: 15
+    timeout_seconds: 300
+    lock_timeout_seconds: 1800
+    wake_triggers:
+      - interval
+      - manual
+      - mention
+    enabled: false
+    goal_id: null
+    required_secrets: []
+    decision_prompt: >
+      You are Pixel, the social media agent, waking up in growth-heartbeat
+      mode to keep the content pipeline full — not to write content directly.
+      List active Goals (GET /api/goals?status=active) that already have at
+      least one ticket assigned to you (GET /api/tickets?assignee_agent=pixel-social-media&goal_id=<id>)
+      — those are the content/growth Goals you own. For each, count YOUR
+      tickets in status open/in_progress linked to it. If that count is below
+      3 and the Goal is not achieved/cancelled/past its due_date, propose up to
+      3 new, concrete content tickets (specific titles, not generic "create a
+      post") via POST /api/tickets with assignee_agent=pixel-social-media and
+      goal_id set — check existing titles first so you never propose a near-
+      duplicate. Never set publish_intent here or publish anything directly —
+      that stays gated behind the existing Telegram approval + Postiz
+      confirmation flow. If every Goal you own already has enough queued
+      work, action=skip. Respond with JSON:
+      {"action": "work"|"skip", "reason": "<1 sentence>",
+      "goals_topped_up": [<list of goal ids you created tickets for, if any>]}.
+
+  # deadline-check — panorama 2026-07-17 item 4: checks for overdue Goals and
+  # Tickets and alerts via Telegram. Zero Claude CLI invocations (in-process
+  # Python handler, same shape as integrations-health). Closes the gap
+  # between Weekly Review runs (scheduler.py, Fridays) — nothing else
+  # proactively surfaces a vencido Goal/Ticket before then.
+  - id: deadline-check
+    agent: system
+    interval_seconds: 14400  # 4 hours
+    max_turns: 0
+    timeout_seconds: 60
+    lock_timeout_seconds: 1800
+    wake_triggers:
+      - interval
+      - manual
+    enabled: false
+    goal_id: null
+    required_secrets: []
+    handler: deadline_check.tick
+    decision_prompt: ""
+
   # integrations-health — Wave 2.2r in-process HTTP health check for plugin integrations
   # Runs every 15 minutes; zero Claude CLI invocations (in-process Python handler).
   # Enable via UI toggle after reviewing plugin integrations in /integrations.
diff --git a/config/heartbeats.yaml b/config/heartbeats.yaml
new file mode 100644
index 000000000..4f84a6a37
--- /dev/null
+++ b/config/heartbeats.yaml
@@ -0,0 +1,112 @@
+heartbeats:
+- id: atlas-4h
+  agent: atlas-project
+  interval_seconds: 14400
+  max_turns: 10
+  timeout_seconds: 300
+  lock_timeout_seconds: 1800
+  wake_triggers:
+  - interval
+  - mention
+  - manual
+  enabled: true
+  goal_id: null
+  required_secrets: []
+  decision_prompt: 'You are Atlas, the project agent. Review Linear for stale PRs
+    and issues older than 3 days with no activity. Check GitHub for open PRs waiting
+    on review. Decide: should you act now (comment, triage, escalate) or is there
+    nothing urgent? Respond with a JSON object: {"action": "work"|"skip", "reason":
+    "<1 sentence>", "tasks": [<list of issue ids to touch, if action=work>]}.
+
+    '
+- id: zara-2h
+  agent: zara-cs
+  interval_seconds: 7200
+  max_turns: 15
+  timeout_seconds: 300
+  lock_timeout_seconds: 1800
+  wake_triggers:
+  - interval
+  - new_task
+  - manual
+  enabled: true
+  goal_id: null
+  required_secrets: []
+  decision_prompt: 'You are Zara, the customer success agent. Check the support queue
+    for tickets with status "open" or "pending" assigned to you. Pick the highest-priority
+    ticket (by urgency label, then oldest created_at). Decide: should you work on
+    it now or is the queue empty/nothing actionable? Respond with JSON: {"action":
+    "work"|"skip", "reason": "<1 sentence>", "ticket_id": "<id or null>"}.
+
+    '
+- id: flux-6h
+  agent: flux-finance
+  interval_seconds: 21600
+  max_turns: 10
+  timeout_seconds: 300
+  lock_timeout_seconds: 1800
+  wake_triggers:
+  - interval
+  - manual
+  enabled: true
+  goal_id: null
+  required_secrets:
+  - STRIPE_KEY
+  - OMIE_APP_KEY
+  decision_prompt: 'You are Flux, the finance agent. Check Stripe for failed payments
+    or subscriptions that lapsed in the last 6 hours. Check Omie for pending NF-e
+    that need action. Decide: is there something urgent requiring action or escalation
+    to Davidson via Telegram? Respond with JSON: {"action": "work"|"skip", "reason":
+    "<1 sentence>", "alerts": [<list of critical items, if any>]}.
+
+    '
+- id: integrations-health
+  agent: system
+  interval_seconds: 3600
+  max_turns: 0
+  timeout_seconds: 60
+  lock_timeout_seconds: 1800
+  wake_triggers:
+  - interval
+  - manual
+  enabled: false
+  goal_id: null
+  required_secrets: []
+  decision_prompt: ''
+  handler: plugin_integration_health.tick
+- id: nexus-orchestrator
+  agent: system
+  interval_seconds: 300
+  max_turns: 0
+  timeout_seconds: 120
+  lock_timeout_seconds: 600
+  wake_triggers:
+  - interval
+  - manual
+  # Hybrid execution: NVIDIA agents do the work (free), then structure_via_nvidia
+  # forces the outcome JSON via response_format=json_schema (heartbeat_outcome.py).
+  enabled: true
+  goal_id: null
+  required_secrets: []
+  decision_prompt: ''
+  handler: nexus_orchestrator.tick
+- id: goal-planner
+  agent: goal-planner
+  interval_seconds: 86400
+  max_turns: 15
+  timeout_seconds: 300
+  lock_timeout_seconds: 1800
+  wake_triggers:
+  - goal_created
+  - manual
+  enabled: false
+  goal_id: null
+  required_secrets: []
+  decision_prompt: 'You are goal-planner. A top-level Goal was just created — its
+    id is in the Trigger payload above. Decompose it into 2-6 concrete, assignable
+    tickets per your agent instructions (.claude/agents/goal-planner.md), or skip
+    if it already has tickets (idempotency) or there is no goal_id in the trigger
+    payload.
+
+    '
+
diff --git a/config/litellm-telegram.yaml b/config/litellm-telegram.yaml
new file mode 100644
index 000000000..a70f0c716
--- /dev/null
+++ b/config/litellm-telegram.yaml
@@ -0,0 +1,36 @@
+# LiteLLM proxy — Anthropic /v1/messages → NVIDIA NIM (OpenAI-compatible)
+#
+# Why: the Telegram bot runs via `claude --channels` (real Claude binary), which
+# only speaks the Anthropic Messages API. NVIDIA NIM is OpenAI-compatible. This
+# proxy translates between them so the bot can run on an NVIDIA model instead of
+# Anthropic. Point the bot at it with ANTHROPIC_BASE_URL + ANTHROPIC_AUTH_TOKEN.
+#
+# Start:  make telegram   (launches this proxy + the channel)
+# Model: z-ai/glm-5.1 on NVIDIA NIM.
+# MiniMax M3 works for direct calls, but can leave Claude Code channels stuck
+# in "Clauding..." through the Anthropic translation path.
+
+model_list:
+  # Named entry used by ANTHROPIC_MODEL.
+  # Use the native nvidia_nim provider (NOT openai/): the Anthropic /v1/messages
+  # endpoint routes openai/ models through the OpenAI Responses API, which NVIDIA
+  # NIM does not implement (→ 404). nvidia_nim/ forces /chat/completions.
+  - model_name: telegram-nvidia
+    litellm_params:
+      model: nvidia_nim/z-ai/glm-5.1
+      api_key: os.environ/NVIDIA_API_KEY
+
+  # Wildcard so Claude Code's background/small-model calls (title generation,
+  # quota probes) also route to NVIDIA instead of failing with an unknown model.
+  - model_name: "*"
+    litellm_params:
+      model: nvidia_nim/z-ai/glm-5.1
+      api_key: os.environ/NVIDIA_API_KEY
+
+litellm_settings:
+  # NVIDIA NIM rejects some OpenAI params Claude Code sends — drop them instead
+  # of returning 400 and breaking the conversation.
+  drop_params: true
+
+general_settings:
+  master_key: sk-evonexus-telegram-local
diff --git a/config/providers.example.json b/config/providers.example.json
index 17a4d61fd..863106cea 100644
--- a/config/providers.example.json
+++ b/config/providers.example.json
@@ -1,5 +1,6 @@
 {
   "active_provider": "anthropic",
+  "telegram_provider": "",
   "providers": {
     "anthropic": {
       "name": "Anthropic (Claude nativo)",
@@ -20,6 +21,35 @@
       },
       "default_base_url": "https://openrouter.ai/api/v1",
       "default_model": "anthropic/claude-sonnet-4",
+      "requires_logout": true,
+      "mode": "code"
+    },
+    "nvidia": {
+      "name": "NVIDIA NIM",
+      "description": "Modelos hospedados na NVIDIA (DeepSeek, Llama, Qwen, etc.) via API OpenAI-compatível",
+      "cli_command": "openclaude",
+      "mode": "code",
+      "env_vars": {
+        "CLAUDE_CODE_USE_OPENAI": "1",
+        "OPENAI_BASE_URL": "https://integrate.api.nvidia.com/v1",
+        "OPENAI_API_KEY": "",
+        "OPENAI_MODEL": ""
+      },
+      "default_base_url": "https://integrate.api.nvidia.com/v1",
+      "default_model": "z-ai/glm-5.1",
+      "fallback_models": [
+        "minimaxai/minimax-m3"
+      ],
+      "model_tiers": {
+        "opus": "z-ai/glm-5.1",
+        "sonnet": "z-ai/glm-5.1",
+        "haiku": "z-ai/glm-5.1"
+      },
+      "fallback_providers": [
+        "openrouter",
+        "codex_auth",
+        "anthropic"
+      ],
       "requires_logout": true
     },
     "omnirouter": {
@@ -34,7 +64,8 @@
       },
       "default_base_url": "",
       "default_model": "",
-      "requires_logout": true
+      "requires_logout": true,
+      "mode": "code"
     },
     "openai": {
       "name": "OpenAI (API Key)",
diff --git a/config/providers.json b/config/providers.json
new file mode 100644
index 000000000..cc9d9d2fe
--- /dev/null
+++ b/config/providers.json
@@ -0,0 +1,178 @@
+{
+  "active_provider": "opencode",
+  "providers": {
+    "omnirouter": {
+      "name": "OpenClaude (via OmniRoute)",
+      "description": "Gateway de IA auto-hospedado na VPS — roteia 237+ providers com fallback automático e compressão de tokens.",
+      "cli_command": "openclaude",
+      "mode": "code",
+      "env_vars": {
+        "CLAUDE_CODE_USE_OPENAI": "1",
+        "OPENAI_BASE_URL": "http://omniroute:20128/v1",
+        "OPENAI_API_KEY": "[REDACTED]",
+        "OPENAI_MODEL": "auto"
+      },
+      "default_base_url": "http://omniroute:20128/v1",
+      "default_model": "auto",
+      "requires_logout": true,
+      "fallback_providers": [
+        "nvidia",
+        "anthropic"
+      ]
+    },
+    "anthropic": {
+      "name": "Anthropic (Claude nativo)",
+      "cli_command": "claude",
+      "env_vars": {},
+      "requires_logout": false,
+      "description": "Claude Code oficial via Anthropic API"
+    },
+    "openrouter": {
+      "name": "OpenRouter",
+      "cli_command": "openclaude",
+      "env_vars": {
+        "CLAUDE_CODE_USE_OPENAI": "1",
+        "OPENAI_BASE_URL": "https://openrouter.ai/api/v1",
+        "OPENAI_API_KEY": "[REDACTED]",
+        "OPENAI_MODEL": "openrouter/owl-alpha"
+      },
+      "default_base_url": "https://openrouter.ai/api/v1",
+      "default_model": "openrouter/owl-alpha",
+      "requires_logout": true,
+      "mode": "code",
+      "fallback_models": [
+        "openrouter/owl-alpha",
+        "nex-agi/nex-n2-pro:free"
+      ],
+      "description": "200+ modelos via OpenRouter (Claude, GPT, Gemini, Llama, etc.)"
+    },
+    "nvidia": {
+      "name": "NVIDIA NIM",
+      "description": "Modelos hospedados na NVIDIA (DeepSeek, Llama, Qwen, etc.) via API OpenAI-compatível",
+      "cli_command": "openclaude",
+      "mode": "code",
+      "env_vars": {
+        "CLAUDE_CODE_USE_OPENAI": "1",
+        "OPENAI_BASE_URL": "https://integrate.api.nvidia.com/v1",
+        "OPENAI_API_KEY": "[REDACTED]",
+        "OPENAI_MODEL": "stepfun-ai/step-3.7-flash"
+      },
+      "default_base_url": "https://integrate.api.nvidia.com/v1",
+      "default_model": "stepfun-ai/step-3.7-flash",
+      "requires_logout": true,
+      "fallback_models": [
+        "stepfun-ai/step-3.7-flash",
+        "deepseek-ai/deepseek-v4-flash",
+        "z-ai/glm-5.1",
+        "moonshotai/kimi-k2.6",
+        "nvidia/nemotron-3-ultra-550b-a55b",
+        "nvidia/nemotron-3-super-120b-a12b",
+        "qwen/qwen3.5-122b-a10b",
+        "qwen/qwen3.5-397b-a17b",
+        "openai/gpt-oss-120b",
+        "microsoft/phi-4-multimodal-instruct",
+        "stepfun-ai/step-3.5-flash",
+        "minimaxai/minimax-m3"
+      ],
+      "model_tiers": {
+        "opus": "minimaxai/minimax-m3",
+        "sonnet": "minimaxai/minimax-m3",
+        "haiku": "minimaxai/minimax-m3"
+      },
+      "fallback_providers": [
+        "omnirouter",
+        "anthropic"
+      ]
+    },
+    "openai": {
+      "name": "OpenAI",
+      "description": "GPT-4.x via API Key ou GPT-5.x via Codex OAuth",
+      "cli_command": "openclaude",
+      "env_vars": {
+        "CLAUDE_CODE_USE_OPENAI": "1",
+        "OPENAI_API_KEY": "[REDACTED]",
+        "OPENAI_MODEL": ""
+      },
+      "default_model": "gpt-4.1",
+      "requires_logout": true
+    },
+    "gemini": {
+      "name": "Google Gemini (em breve)",
+      "cli_command": "openclaude",
+      "env_vars": {
+        "CLAUDE_CODE_USE_GEMINI": "1",
+        "GEMINI_API_KEY": "[REDACTED]",
+        "GEMINI_MODEL": "gemini-2.5-pro"
+      },
+      "default_model": "gemini-2.5-pro",
+      "requires_logout": true,
+      "coming_soon": true,
+      "description": "Gemini 2.5 Pro/Flash via Google AI"
+    },
+    "bedrock": {
+      "name": "AWS Bedrock (em breve)",
+      "cli_command": "openclaude",
+      "env_vars": {
+        "CLAUDE_CODE_USE_BEDROCK": "1",
+        "AWS_REGION": "",
+        "AWS_BEARER_TOKEN_BEDROCK": "[REDACTED]"
+      },
+      "requires_logout": true,
+      "coming_soon": true,
+      "description": "Claude via AWS Bedrock"
+    },
+    "vertex": {
+      "name": "Google Vertex AI (em breve)",
+      "cli_command": "openclaude",
+      "env_vars": {
+        "CLAUDE_CODE_USE_VERTEX": "1",
+        "ANTHROPIC_VERTEX_PROJECT_ID": "",
+        "CLOUD_ML_REGION": ""
+      },
+      "default_region": "us-east5",
+      "requires_logout": true,
+      "coming_soon": true,
+      "description": "Claude via Google Cloud Vertex AI"
+    },
+    "opencode": {
+      "name": "OpenCode",
+      "description": "Harness opencode — CLI agêntico com tool-use nativo, roteável por qualquer endpoint OpenAI-compatível (Base URL/API Key editáveis abaixo, igual ao OpenClaude). Ativado como active_provider em 2026-07-12; ver workspace/development/features/runtime-harness-agnostic-eval/.",
+      "cli_command": "opencode",
+      "mode": "code",
+      "env_vars": {
+        "OPENAI_BASE_URL": "https://omni.workflowapi.com.br/v1",
+        "OPENAI_API_KEY": "[REDACTED]"
+      },
+      "default_base_url": "https://omni.workflowapi.com.br/v1",
+      "default_model": "auto",
+      "requires_logout": false,
+      "fallback_providers": [
+        "nvidia",
+        "anthropic"
+      ]
+    },
+    "codex_auth": {
+      "name": "OpenAI Codex (OAuth)",
+      "description": "GPT-5.x via ChatGPT Codex — login OAuth, sem API key",
+      "cli_command": "openclaude",
+      "env_vars": {
+        "CLAUDE_CODE_USE_OPENAI": "1",
+        "OPENAI_MODEL": "codexplan"
+      },
+      "default_model": "codexplan",
+      "auth_type": "oauth",
+      "auth_file": "~/.codex/auth.json",
+      "requires_logout": true,
+      "setup_hint": "Use o botão Login para autenticar via OAuth do ChatGPT",
+      "mode": "code",
+      "fallback_providers": [
+        "nvidia"
+      ],
+      "fallback_models": [
+        "codexplan",
+        "codexspark"
+      ]
+    }
+  },
+  "telegram_provider": ""
+}
diff --git a/dashboard/backend/app.py b/dashboard/backend/app.py
index 2dccb5979..b57161fe5 100644
--- a/dashboard/backend/app.py
+++ b/dashboard/backend/app.py
@@ -8,7 +8,7 @@
 from datetime import timedelta
 
 from dotenv import load_dotenv
-from flask import Flask, send_from_directory, request, jsonify
+from flask import Flask, send_from_directory, request, jsonify, g
 from flask_cors import CORS
 from flask_login import LoginManager, current_user, login_user
 
@@ -42,6 +42,14 @@ def _cors_allowed_origins():
     return "*" if not _is_production() else []
 
 app = Flask(__name__, static_folder=None)
+
+# Atrás do Traefik o scheme visto pelo Flask é http; sem honrar
+# X-Forwarded-Proto/Host, request.host_url gera redirect_uri http:// nos
+# fluxos OAuth (social-auth blueprints) e o provedor recusa o callback.
+# A porta 8080 não é exposta diretamente na VPS, então confiar em 1 hop
+# de proxy é seguro; sem os headers (acesso local) nada muda.
+from werkzeug.middleware.proxy_fix import ProxyFix
+app.wsgi_app = ProxyFix(app.wsgi_app, x_proto=1, x_host=1)
 # Persist secret key so sessions survive restarts
 _secret_key = os.environ.get("EVONEXUS_SECRET_KEY")
 if not _secret_key:
@@ -75,8 +83,12 @@ def _cors_allowed_origins():
 app.config["SQLALCHEMY_DATABASE_URI"] = f"sqlite:///{WORKSPACE / 'dashboard' / 'data' / 'evonexus.db'}"
 app.config["SQLALCHEMY_TRACK_MODIFICATIONS"] = False
 app.config["REMEMBER_COOKIE_DURATION"] = timedelta(days=30)
-# SameSite=Strict prevents cross-origin cookie riding (CSRF defense layer 1).
-app.config["SESSION_COOKIE_SAMESITE"] = "Strict"
+# SameSite=Lax: bloqueia cookie em requests cross-site mutantes (POST/iframe/
+# subresource — onde CSRF acontece) mas permite navegação top-level GET.
+# Strict quebrava TODO fluxo OAuth montado no dashboard: o redirect de volta
+# do provedor (twitter.com → /callback/twitter) é cross-site, o cookie de
+# sessão não era enviado e o state salvo em session sumia → "Invalid state".
+app.config["SESSION_COOKIE_SAMESITE"] = "Lax"
 
 # --- JSON encoding for API responses ---
 # With ensure_ascii=True (Flask default) jsonify escapes every non-ASCII
@@ -93,6 +105,12 @@ def _cors_allowed_origins():
 
 CORS(app, origins=_cors_allowed_origins(), supports_credentials=True)
 
+# --------------- Rate limiting (in-memory, single-process Flask) ---------------
+# Vault audit §2.S1 CRITICAL: all public endpoints require rate limiting.
+# The limiter singleton lives in rate_limit.py to avoid circular imports with blueprints.
+from rate_limit import limiter
+limiter.init_app(app)
+
 # --------------- Database ---------------
 from models import db, User, BrainRepoConfig, needs_setup, seed_roles, seed_systems
 db.init_app(app)
@@ -132,6 +150,7 @@ def _cors_allowed_origins():
                 goal_id TEXT,
                 required_secrets TEXT DEFAULT '[]',
                 decision_prompt TEXT NOT NULL,
+                handler TEXT,
                 created_at TEXT NOT NULL,
                 updated_at TEXT NOT NULL
             );
@@ -179,6 +198,7 @@ def _cors_allowed_origins():
                 current_value REAL NOT NULL DEFAULT 0,
                 due_date TEXT,
                 status TEXT NOT NULL DEFAULT 'active' CHECK(status IN ('active','achieved','on-hold','cancelled')),
+                completed_at TEXT,
                 created_at TEXT NOT NULL,
                 updated_at TEXT NOT NULL
             );
@@ -189,7 +209,8 @@ def _cors_allowed_origins():
                 title TEXT NOT NULL,
                 description TEXT,
                 workspace_folder_path TEXT,
-                status TEXT NOT NULL DEFAULT 'active',
+                status TEXT NOT NULL DEFAULT 'active' CHECK(status IN ('active','completed','on-hold','cancelled')),
+                completed_at TEXT,
                 created_at TEXT NOT NULL,
                 updated_at TEXT NOT NULL
             );
@@ -205,6 +226,7 @@ def _cors_allowed_origins():
                 current_value REAL NOT NULL DEFAULT 0.0,
                 due_date TEXT,
                 status TEXT NOT NULL DEFAULT 'active' CHECK(status IN ('active','achieved','on-hold','cancelled')),
+                completed_at TEXT,
                 created_at TEXT NOT NULL,
                 updated_at TEXT NOT NULL
             );
@@ -219,6 +241,8 @@ def _cors_allowed_origins():
                 locked_at TEXT,
                 locked_by TEXT,
                 due_date TEXT,
+                started_at TEXT,
+                completed_at TEXT,
                 created_at TEXT NOT NULL,
                 updated_at TEXT NOT NULL
             );
@@ -228,7 +252,11 @@ def _cors_allowed_origins():
             CREATE INDEX IF NOT EXISTS idx_goal_tasks_goal_status ON goal_tasks(goal_id, status);
         """)
         _conn.commit()
-    # Always ensure view and trigger exist (idempotent — safe to run on every startup)
+    # Always ensure view exists (idempotent — safe to run on every startup).
+    # trg_task_done_updates_goal used to be recreated here too, but
+    # goals.current_value now has a single source of truth (tickets, see
+    # heartbeat_outcome._recompute_goal_from_tickets) — the trigger is dropped
+    # in the migration below and must never be recreated on boot.
     _cur.executescript("""
         CREATE VIEW IF NOT EXISTS goal_progress_v AS
         SELECT g.id as goal_id, g.slug, g.target_value,
@@ -239,13 +267,6 @@ def _cors_allowed_origins():
                     ELSE 0 END as pct_complete
         FROM goals g LEFT JOIN goal_tasks t ON t.goal_id = g.id
         GROUP BY g.id;
-        CREATE TRIGGER IF NOT EXISTS trg_task_done_updates_goal
-        AFTER UPDATE OF status ON goal_tasks
-        WHEN NEW.goal_id IS NOT NULL AND NEW.status = 'done' AND OLD.status != 'done'
-        BEGIN
-          UPDATE goals SET current_value = current_value + 1, updated_at = datetime('now') WHERE id = NEW.goal_id;
-          UPDATE goals SET status = 'achieved' WHERE id = NEW.goal_id AND current_value >= target_value AND status = 'active';
-        END;
     """)
     _conn.commit()
     # No seed data — Goals start empty. Users create Mission → Project → Goal via UI
@@ -335,6 +356,12 @@ def _cors_allowed_origins():
         _conn.commit()
     # --- End thread-areas migration ---
 
+    # --- task_id link on tickets (ticket <-> goal_task real FK) ---
+    if "task_id" not in _ticket_cols:
+        _cur.execute("ALTER TABLE tickets ADD COLUMN task_id INTEGER REFERENCES goal_tasks(id) ON DELETE SET NULL")
+        _conn.commit()
+    # --- End task_id migration ---
+
     # --- Plugin provenance: source_plugin on tables that plugins can seed ---
     # When a plugin installs rows into projects/goals/missions/goal_tasks/
     # tickets/triggers, the row gets tagged with its slug. Uninstall then
@@ -352,6 +379,239 @@ def _cors_allowed_origins():
 
     # --- End tickets migration ---
 
+    # --- goal-ticket-unification: approval + due_date columns on tickets ---
+    _ticket_cols = {row[1] for row in _cur.execute("PRAGMA table_info(tickets)").fetchall()}
+    if "due_date" not in _ticket_cols:
+        _cur.execute("ALTER TABLE tickets ADD COLUMN due_date TEXT")
+        _conn.commit()
+    if "requires_human_approval" not in _ticket_cols:
+        _cur.execute("ALTER TABLE tickets ADD COLUMN requires_human_approval INTEGER NOT NULL DEFAULT 0")
+        _conn.commit()
+    if "blocked_reason" not in _ticket_cols:
+        _cur.execute("ALTER TABLE tickets ADD COLUMN blocked_reason TEXT")
+        _conn.commit()
+    # --- End ticket approval columns ---
+
+    # --- goal-ticket-unification: sub-goal columns on goals ---
+    _goal_cols = {row[1] for row in _cur.execute("PRAGMA table_info(goals)").fetchall()}
+    if "parent_goal_id" not in _goal_cols:
+        _cur.execute("ALTER TABLE goals ADD COLUMN parent_goal_id INTEGER REFERENCES goals(id) ON DELETE SET NULL")
+        _conn.commit()
+    if "decomposition_state" not in _goal_cols:
+        _cur.execute("ALTER TABLE goals ADD COLUMN decomposition_state TEXT")
+        _conn.commit()
+    # --- End goal sub-goal columns ---
+
+    # --- goal-ticket-unification: goal_relations table (decorative this feature) ---
+    _cur.executescript("""
+        CREATE TABLE IF NOT EXISTS goal_relations (
+            id INTEGER PRIMARY KEY AUTOINCREMENT,
+            goal_id INTEGER NOT NULL REFERENCES goals(id) ON DELETE CASCADE,
+            related_goal_id INTEGER NOT NULL REFERENCES goals(id) ON DELETE CASCADE,
+            relation_type TEXT NOT NULL DEFAULT 'relates_to'
+                CHECK(relation_type IN ('blocks','depends_on','relates_to')),
+            created_at TEXT NOT NULL,
+            CHECK (goal_id != related_goal_id)
+        );
+        CREATE INDEX IF NOT EXISTS idx_goal_relations_goal ON goal_relations(goal_id);
+        CREATE INDEX IF NOT EXISTS idx_goal_relations_related ON goal_relations(related_goal_id);
+    """)
+    _conn.commit()
+    # --- End goal_relations migration ---
+
+    # --- goal-ticket-unification: pending_approvals table (shared publish + decomposition gate) ---
+    # gate_type/mission_id/project_id cover ai-hierarchy-suggestions too
+    # (project_suggestion, goal_suggestion) — a fresh install gets the final
+    # shape directly; the rebuild block right below upgrades a DB that already
+    # has this table from before those two gate_types existed (SQLite can't
+    # ALTER a CHECK constraint in place).
+    _cur.executescript("""
+        CREATE TABLE IF NOT EXISTS pending_approvals (
+            id INTEGER PRIMARY KEY AUTOINCREMENT,
+            gate_type TEXT NOT NULL CHECK(gate_type IN ('publish','decomposition','project_suggestion','goal_suggestion')),
+            ticket_id TEXT REFERENCES tickets(id) ON DELETE CASCADE,
+            goal_id INTEGER REFERENCES goals(id) ON DELETE CASCADE,
+            mission_id INTEGER REFERENCES missions(id) ON DELETE CASCADE,
+            project_id INTEGER REFERENCES projects(id) ON DELETE CASCADE,
+            agent TEXT,
+            attempt INTEGER NOT NULL DEFAULT 0,
+            idempotency_key TEXT NOT NULL UNIQUE,
+            status TEXT NOT NULL DEFAULT 'pending'
+                CHECK(status IN ('pending','approved','rejected','expired','published')),
+            payload TEXT,
+            telegram_chat_id TEXT,
+            telegram_message_id INTEGER,
+            approver_from_id TEXT,
+            reject_reason TEXT,
+            decided_by TEXT,
+            created_at TEXT NOT NULL,
+            nudged_at TEXT,
+            decided_at TEXT,
+            expires_at TEXT NOT NULL
+        );
+        CREATE INDEX IF NOT EXISTS idx_pending_approvals_status ON pending_approvals(status, expires_at);
+    """)
+    _conn.commit()
+    # --- End pending_approvals migration ---
+
+    # --- ai-hierarchy-suggestions: upgrade a pre-existing pending_approvals
+    # (created before project_suggestion/goal_suggestion existed) in place.
+    # SQLite has no ALTER-a-CHECK-constraint — rebuild the table, copy rows,
+    # swap. Detected by sniffing the live CHECK text rather than a version
+    # flag, so this is safe to run unconditionally on every boot.
+    _cur.execute(
+        "SELECT sql FROM sqlite_master WHERE type='table' AND name='pending_approvals'"
+    )
+    _pa_row = _cur.fetchone()
+    if _pa_row and "project_suggestion" not in (_pa_row[0] or ""):
+        _cur.executescript("""
+            ALTER TABLE pending_approvals RENAME TO pending_approvals_old;
+            CREATE TABLE pending_approvals (
+                id INTEGER PRIMARY KEY AUTOINCREMENT,
+                gate_type TEXT NOT NULL CHECK(gate_type IN ('publish','decomposition','project_suggestion','goal_suggestion')),
+                ticket_id TEXT REFERENCES tickets(id) ON DELETE CASCADE,
+                goal_id INTEGER REFERENCES goals(id) ON DELETE CASCADE,
+                mission_id INTEGER REFERENCES missions(id) ON DELETE CASCADE,
+                project_id INTEGER REFERENCES projects(id) ON DELETE CASCADE,
+                agent TEXT,
+                attempt INTEGER NOT NULL DEFAULT 0,
+                idempotency_key TEXT NOT NULL UNIQUE,
+                status TEXT NOT NULL DEFAULT 'pending'
+                    CHECK(status IN ('pending','approved','rejected','expired','published')),
+                payload TEXT,
+                telegram_chat_id TEXT,
+                telegram_message_id INTEGER,
+                approver_from_id TEXT,
+                reject_reason TEXT,
+                decided_by TEXT,
+                created_at TEXT NOT NULL,
+                nudged_at TEXT,
+                decided_at TEXT,
+                expires_at TEXT NOT NULL
+            );
+            INSERT INTO pending_approvals (
+                id, gate_type, ticket_id, goal_id, agent, attempt, idempotency_key,
+                status, payload, telegram_chat_id, telegram_message_id,
+                approver_from_id, reject_reason, decided_by, created_at, nudged_at,
+                decided_at, expires_at
+            )
+            SELECT
+                id, gate_type, ticket_id, goal_id, agent, attempt, idempotency_key,
+                status, payload, telegram_chat_id, telegram_message_id,
+                approver_from_id, reject_reason, decided_by, created_at, nudged_at,
+                decided_at, expires_at
+            FROM pending_approvals_old;
+            DROP TABLE pending_approvals_old;
+            CREATE INDEX IF NOT EXISTS idx_pending_approvals_status ON pending_approvals(status, expires_at);
+        """)
+        _conn.commit()
+    # --- End pending_approvals CHECK-constraint upgrade ---
+
+    # --- completed_at/started_at + projects.status CHECK constraint ---
+    # missions/goals/goal_tasks: plain additive ALTER (no CHECK involved).
+    _cur.execute("PRAGMA table_info(missions)")
+    if "completed_at" not in {row[1] for row in _cur.fetchall()}:
+        _cur.execute("ALTER TABLE missions ADD COLUMN completed_at TEXT")
+        _conn.commit()
+
+    _cur.execute("PRAGMA table_info(goals)")
+    if "completed_at" not in {row[1] for row in _cur.fetchall()}:
+        _cur.execute("ALTER TABLE goals ADD COLUMN completed_at TEXT")
+        _conn.commit()
+
+    _cur.execute("PRAGMA table_info(goal_tasks)")
+    _gt_cols = {row[1] for row in _cur.fetchall()}
+    if "started_at" not in _gt_cols:
+        _cur.execute("ALTER TABLE goal_tasks ADD COLUMN started_at TEXT")
+        _conn.commit()
+    if "completed_at" not in _gt_cols:
+        _cur.execute("ALTER TABLE goal_tasks ADD COLUMN completed_at TEXT")
+        _conn.commit()
+
+    # projects.status has no CHECK constraint today (unlike missions/goals) —
+    # SQLite can't ALTER one in, so this rebuilds the table (rename + create +
+    # copy + drop) the same way the pending_approvals upgrade above does.
+    # Sniffed via the missing completed_at column rather than a version flag,
+    # so this stays idempotent and safe to run on every boot.
+    _cur.execute("PRAGMA table_info(projects)")
+    if "completed_at" not in {row[1] for row in _cur.fetchall()}:
+        _cur.executescript("""
+            ALTER TABLE projects RENAME TO projects_old;
+            CREATE TABLE projects (
+                id INTEGER PRIMARY KEY AUTOINCREMENT,
+                slug TEXT UNIQUE NOT NULL,
+                mission_id INTEGER REFERENCES missions(id) ON DELETE CASCADE,
+                title TEXT NOT NULL,
+                description TEXT,
+                workspace_folder_path TEXT,
+                status TEXT NOT NULL DEFAULT 'active' CHECK(status IN ('active','completed','on-hold','cancelled')),
+                completed_at TEXT,
+                created_at TEXT NOT NULL,
+                updated_at TEXT NOT NULL
+            );
+            INSERT INTO projects (
+                id, slug, mission_id, title, description, workspace_folder_path,
+                status, created_at, updated_at
+            )
+            SELECT
+                id, slug, mission_id, title, description, workspace_folder_path,
+                CASE
+                    WHEN status IN ('active','completed','on-hold','cancelled') THEN status
+                    WHEN status = 'achieved' THEN 'completed'
+                    ELSE 'active'
+                END,
+                created_at, updated_at
+            FROM projects_old;
+            DROP TABLE projects_old;
+            CREATE INDEX IF NOT EXISTS idx_projects_mission ON projects(mission_id);
+            CREATE INDEX IF NOT EXISTS idx_projects_status ON projects(status);
+        """)
+        _conn.commit()
+    # --- End completed_at/started_at + projects.status CHECK constraint ---
+
+    # --- goal-ticket-unification: drop legacy goal_tasks-driven rollup trigger ---
+    # current_value now has a single source of truth (tickets — see
+    # heartbeat_outcome._recompute_goal_from_tickets). The CREATE TRIGGER
+    # that used to live in the "Always ensure view and trigger exist" block
+    # above was deleted so it stops being recreated on every boot; this DROP
+    # handles existing DBs that already have the trigger installed.
+    _cur.execute("DROP TRIGGER IF EXISTS trg_task_done_updates_goal")
+    _conn.commit()
+    # --- End trigger drop ---
+
+    # --- ticket_activity reconciliation (Feature 1.3, run unconditionally) ---
+    # The CREATE TABLE IF NOT EXISTS ticket_activity above lives inside
+    # `if "tickets" not in _existing_tables2:` (line ~277). On any install
+    # where `tickets` already existed before ticket_activity was added to that
+    # executescript, the whole block — including ticket_activity's own
+    # CREATE TABLE — never ran, so the table can be missing entirely or stuck
+    # on an older column set with no path to catch up. Confirmed live
+    # 2026-07-15: production hit `sqlite3.OperationalError: table
+    # ticket_activity has no column named X` from heartbeat_outcome.py's
+    # INSERT (id, ticket_id, actor, action, payload, created_at) — that
+    # gated CREATE TABLE was the only place this table's shape was ever
+    # declared. Run unconditionally so it self-heals regardless of when
+    # `tickets` was created.
+    _cur.execute("""
+        CREATE TABLE IF NOT EXISTS ticket_activity (
+            id TEXT PRIMARY KEY,
+            ticket_id TEXT NOT NULL REFERENCES tickets(id) ON DELETE CASCADE,
+            actor TEXT NOT NULL,
+            action TEXT NOT NULL,
+            payload TEXT,
+            created_at TEXT NOT NULL
+        );
+    """)
+    _cur.execute("CREATE INDEX IF NOT EXISTS idx_activity_ticket_created ON ticket_activity(ticket_id, created_at);")
+    _conn.commit()
+    _activity_cols = {row[1] for row in _cur.execute("PRAGMA table_info(ticket_activity)").fetchall()}
+    for _col, _decl in (("actor", "TEXT NOT NULL DEFAULT ''"), ("action", "TEXT NOT NULL DEFAULT ''"),
+                         ("payload", "TEXT"), ("created_at", "TEXT NOT NULL DEFAULT ''")):
+        if _col not in _activity_cols:
+            _cur.execute(f"ALTER TABLE ticket_activity ADD COLUMN {_col} {_decl}")
+            _conn.commit()
+    # --- End ticket_activity reconciliation ---
+
     # --- Knowledge connections migration (pgvector-knowledge feature) ---
     _existing_tables3 = {row[0] for row in _cur.execute("SELECT name FROM sqlite_master WHERE type='table'").fetchall()}
     if "knowledge_connections" not in _existing_tables3:
@@ -450,9 +710,11 @@ def _cors_allowed_origins():
                 PRIMARY KEY (plugin_slug, handler_path)
             );
             CREATE INDEX IF NOT EXISTS idx_plugins_status ON plugins_installed(status);
-            CREATE INDEX IF NOT EXISTS idx_plugin_audit_plugin ON plugin_audit_log(plugin_id, created_at);
             CREATE INDEX IF NOT EXISTS idx_hook_cb_disabled ON plugin_hook_circuit_state(disabled_until);
         """)
+        _pal_cols = {row[1] for row in _cur.execute("PRAGMA table_info(plugin_audit_log)").fetchall()}
+        if "plugin_id" in _pal_cols:
+            _cur.execute("CREATE INDEX IF NOT EXISTS idx_plugin_audit_plugin ON plugin_audit_log(plugin_id, created_at)")
         _conn.commit()
     # --- End plugins migration ---
 
@@ -516,6 +778,10 @@ def _cors_allowed_origins():
     # source_plugin: tag heartbeats that were contributed by a plugin so the
     # plugin detail page can filter them via GET /api/heartbeats?source_plugin=.
     _hb_cols = {row[1] for row in _cur.execute("PRAGMA table_info(heartbeats)").fetchall()}
+    if "handler" not in _hb_cols:
+        _cur.execute("ALTER TABLE heartbeats ADD COLUMN handler TEXT")
+        _conn.commit()
+        _hb_cols.add("handler")
     if "source_plugin" not in _hb_cols:
         _cur.execute("ALTER TABLE heartbeats ADD COLUMN source_plugin TEXT")
         _conn.commit()
@@ -603,6 +869,94 @@ def _cors_allowed_origins():
         _conn.commit()
     # --- End Wave 2.2r migration ---
 
+    # --- B3 safe_uninstall migration: plugin_orphans table ---
+    _existing_tables_b3 = {row[0] for row in _cur.execute("SELECT name FROM sqlite_master WHERE type='table'").fetchall()}
+    if "plugin_orphans" not in _existing_tables_b3:
+        _cur.executescript("""
+            CREATE TABLE IF NOT EXISTS plugin_orphans (
+                id TEXT PRIMARY KEY,
+                slug TEXT NOT NULL,
+                tablename TEXT NOT NULL,
+                orphaned_at TEXT NOT NULL,
+                orphaned_by_user_id INTEGER,
+                original_plugin_version TEXT,
+                original_sha256 TEXT,
+                original_publisher_url TEXT,
+                recovered_at TEXT,
+                UNIQUE(slug, tablename)
+            );
+            CREATE INDEX IF NOT EXISTS idx_plugin_orphans_slug ON plugin_orphans(slug);
+        """)
+        _conn.commit()
+    # --- End B3 safe_uninstall migration ---
+
+    # --- social-media-production migration: media_jobs table ---
+    _existing_tables_smp = {row[0] for row in _cur.execute("SELECT name FROM sqlite_master WHERE type='table'").fetchall()}
+    if "media_jobs" not in _existing_tables_smp:
+        _cur.executescript(
+            """
+            CREATE TABLE media_jobs (
+                id TEXT PRIMARY KEY,
+                project_id INTEGER REFERENCES projects(id) ON DELETE SET NULL,
+                campaign_id TEXT,
+                goal_id INTEGER REFERENCES goals(id) ON DELETE SET NULL,
+                task_id INTEGER REFERENCES goal_tasks(id) ON DELETE SET NULL,
+                created_by TEXT NOT NULL DEFAULT 'system',
+                title TEXT NOT NULL,
+                brief TEXT,
+                platform TEXT NOT NULL CHECK(platform IN ('instagram','youtube','linkedin','tiktok')),
+                postiz_integration_id TEXT,
+                format TEXT NOT NULL DEFAULT 'vertical',
+                width INTEGER NOT NULL,
+                height INTEGER NOT NULL,
+                fps INTEGER NOT NULL DEFAULT 30,
+                duration_seconds REAL NOT NULL,
+                language TEXT NOT NULL DEFAULT 'pt-BR',
+                caption TEXT,
+                platform_settings TEXT,
+                publication_mode TEXT NOT NULL DEFAULT 'draft' CHECK(publication_mode IN ('draft','schedule')),
+                scheduled_at TEXT,
+                scheduled_at_utc TEXT,
+                timezone TEXT NOT NULL DEFAULT 'America/Bahia',
+                status TEXT NOT NULL DEFAULT 'queued' CHECK(status IN (
+                    'queued','preparing','generating','rendering','validating',
+                    'ready_for_review','rejected','approved','uploading',
+                    'creating_draft','draft_created','scheduling','scheduled',
+                    'published','retryable_failure','failed','cancelled'
+                )),
+                workspace_path TEXT,
+                render_path TEXT,
+                render_sha256 TEXT,
+                render_size_bytes INTEGER,
+                render_duration_seconds REAL,
+                render_width INTEGER,
+                render_height INTEGER,
+                render_fps INTEGER,
+                render_has_audio INTEGER,
+                postiz_media_id TEXT,
+                postiz_media_path TEXT,
+                postiz_media_name TEXT,
+                postiz_post_id TEXT,
+                attempt_count INTEGER NOT NULL DEFAULT 0,
+                last_error TEXT,
+                reject_reason TEXT,
+                locked_at TEXT,
+                locked_by TEXT,
+                lock_timeout_seconds INTEGER,
+                created_at TEXT NOT NULL,
+                updated_at TEXT NOT NULL,
+                approved_at TEXT,
+                published_at TEXT,
+                CHECK ((locked_at IS NULL AND locked_by IS NULL) OR (locked_at IS NOT NULL AND locked_by IS NOT NULL))
+            );
+            CREATE INDEX idx_media_jobs_status ON media_jobs(status);
+            CREATE INDEX idx_media_jobs_project ON media_jobs(project_id);
+            CREATE INDEX idx_media_jobs_locked ON media_jobs(locked_at);
+            """
+        )
+        _conn.commit()
+    # --- End social-media-production migration ---
+
     # Fix corrupted datetime columns (NULL or non-string values crash SQLAlchemy)
     for _tbl, _col in [("roles", "created_at"), ("users", "created_at"), ("users", "last_login")]:
         try:
@@ -621,6 +975,9 @@ def _cors_allowed_origins():
     # ({active_provider, providers: {...}}), copy providers.example.json
     # over it. This recovers from broken state left by older versions of
     # the onboarding wizard that naively wrote {<id>: {api_key, enabled}}.
+    # If the schema is valid but older than the bundled example, merge missing
+    # providers/fields from providers.example.json without overwriting secrets
+    # stored in the persistent Docker volume.
     try:
         _providers_file = WORKSPACE / "config" / "providers.json"
         _providers_example = WORKSPACE / "config" / "providers.example.json"
@@ -639,6 +996,18 @@ def _cors_allowed_origins():
                 import shutil as _shutil
                 _shutil.copy2(_providers_example, _providers_file)
                 print("[migration] providers.json had invalid schema, restored from providers.example.json")
+            elif _ok and _providers_example.is_file():
+                try:
+                    from routes.providers import _merge_provider_defaults as _merge_provider_defaults
+                    _merged, _changed = _merge_provider_defaults(_data)
+                    if _changed:
+                        _providers_file.write_text(
+                            _json.dumps(_merged, indent=2, ensure_ascii=False) + "\n",
+                            encoding="utf-8",
+                        )
+                        print("[migration] providers.json merged missing provider defaults")
+                except Exception as _merge_exc:
+                    print(f"[migration] providers.json default merge skipped: {_merge_exc}")
     except Exception as _mig_exc:
         print(f"[migration] providers.json normalization skipped: {_mig_exc}")
     # --- End providers.json migration ---
@@ -732,7 +1101,7 @@ def _cors_allowed_origins():
 
 @login_manager.user_loader
 def load_user(user_id):
-    return User.query.get(int(user_id))
+    return db.session.get(User, int(user_id))
 
 @login_manager.unauthorized_handler
 def unauthorized():
@@ -751,10 +1120,20 @@ def unauthorized():
     "/api/agents/active",
 }
 
+from routes._helpers import valid_approval_bridge_token
+
+
 def _try_api_token_auth():
     """Resolve an Authorization: Bearer <token> header against DASHBOARD_API_TOKEN.
     On match, log in the configured service user for the duration of this request.
     Returns True if a valid token was found and applied, False otherwise.
+
+    Sets g.auth_via_api_token = True on success — any route that must be
+    reachable ONLY by a real human sitting at a logged-in browser session
+    (not by an agent that happens to hold DASHBOARD_API_TOKEN, which many
+    do via EvoClient) checks this flag. See
+    routes/approvals.py::decide_approval_via_dashboard for the concrete case
+    this exists for (panorama 2026-07-17, item 1).
     """
     expected = os.environ.get("DASHBOARD_API_TOKEN", "").strip()
     if not expected:
@@ -776,6 +1155,7 @@ def _try_api_token_auth():
         return False
     # Log in for this request only (no remember cookie)
     login_user(user, remember=False, fresh=False)
+    g.auth_via_api_token = True
     return True
 
 
@@ -796,6 +1176,7 @@ def auth_middleware():
         path in PUBLIC_PATHS
         or path.startswith("/api/docs")
         or path.startswith("/api/triggers/webhook/")
+        or path.startswith("/api/instagram/webhook")
         or (path.startswith("/api/shares/") and "/view" in path)
         or path.startswith("/api/knowledge/v1/")
     ):
@@ -806,6 +1187,18 @@ def auth_middleware():
         if path not in PUBLIC_PATHS:
             return jsonify({"error": "Setup required", "needs_setup": True}), 403
 
+    # Approval bridge (goal-ticket-unification V11): the Telegram bot's
+    # callback_query handler calls /api/approvals/*/decision with
+    # APPROVAL_BRIDGE_TOKEN, never DASHBOARD_API_TOKEN — that token alone
+    # doesn't satisfy _try_api_token_auth below, so without this branch the
+    # request 401s before routes/approvals.py's own auth check ever runs.
+    # Deliberately NOT added to PUBLIC_PATHS (that would skip auth entirely)
+    # and NOT folded into _try_api_token_auth (that would let the bridge
+    # token authenticate on every other endpoint too — V11 scopes it to this
+    # one path only).
+    if path.startswith("/api/approvals/") and valid_approval_bridge_token(request.headers.get("Authorization")):
+        return None
+
     # Try API token auth first (Bearer header) for headless agents / CLI tools
     if not current_user.is_authenticated:
         if _try_api_token_auth():
@@ -842,6 +1235,9 @@ def auth_middleware():
 from routes.heartbeats import bp as heartbeats_bp
 from routes.goals import bp as goals_bp
 from routes.tickets import bp as tickets_bp
+from routes.media_jobs import bp as media_jobs_bp
+from routes.integrations_core_postiz import bp as integrations_core_postiz_bp
+from routes.approvals import bp as approvals_bp
 from routes.health import bp as health_bp
 from routes.knowledge import bp as knowledge_bp
 from routes.knowledge_public import bp as knowledge_public_bp
@@ -850,6 +1246,8 @@ def auth_middleware():
 from routes.databases import bp as databases_bp
 from routes.plugins import bp as plugins_bp
 from routes.mcp_servers import bp as mcp_servers_bp
+from routes.plugin_public_pages import bp as plugin_public_pages_bp
+from routes.instagram import bp as instagram_api_bp
 
 # Brain Repo + Onboarding blueprints (loaded after routes are created)
 try:
@@ -890,6 +1288,9 @@ def auth_middleware():
 app.register_blueprint(triggers_bp)
 app.register_blueprint(terminal_proxy_bp)
 
+# Instagram API routes (webhooks, publish, comments, DMs)
+app.register_blueprint(instagram_api_bp)
+
 # Mount the terminal-server WebSocket proxy on the same Sock instance the
 # rest of the app uses. Done after the blueprint is registered so route
 # names are unique. Without this, browsers connecting from a host other
@@ -914,6 +1315,9 @@ def auth_middleware():
 app.register_blueprint(heartbeats_bp)
 app.register_blueprint(goals_bp)
 app.register_blueprint(tickets_bp)
+app.register_blueprint(media_jobs_bp)
+app.register_blueprint(integrations_core_postiz_bp)
+app.register_blueprint(approvals_bp)
 app.register_blueprint(health_bp)
 app.register_blueprint(knowledge_bp)
 app.register_blueprint(knowledge_public_bp)
@@ -922,8 +1326,15 @@ def auth_middleware():
 app.register_blueprint(databases_bp)
 app.register_blueprint(plugins_bp)
 app.register_blueprint(mcp_servers_bp)
+# B2.0: plugin public pages (unauthenticated, token-bound portals)
+app.register_blueprint(plugin_public_pages_bp)
 
 # --------------- Social Auth blueprints ---------------
+# The social-auth package lives as a sibling directory; add it once so the
+# dashboard backend can mount the same OAuth blueprints on port 8080.
+SOCIAL_AUTH_DIR = WORKSPACE / "social-auth"
+if SOCIAL_AUTH_DIR.is_dir() and str(SOCIAL_AUTH_DIR) not in sys.path:
+    sys.path.insert(0, str(SOCIAL_AUTH_DIR))
 from auth.youtube import bp as youtube_auth_bp
 from auth.instagram import bp as instagram_auth_bp
 from auth.linkedin import bp as linkedin_auth_bp
diff --git a/dashboard/backend/brain_repo/git_ops.py b/dashboard/backend/brain_repo/git_ops.py
index dad7ada11..6781f421a 100644
--- a/dashboard/backend/brain_repo/git_ops.py
+++ b/dashboard/backend/brain_repo/git_ops.py
@@ -7,6 +7,8 @@
 log = logging.getLogger(__name__)
 
 DEFAULT_TIMEOUT = 60  # seconds
+DEFAULT_GIT_USER_NAME = "EvoNexus"
+DEFAULT_GIT_USER_EMAIL = "evonexus@users.noreply.github.com"
 
 
 def _masked_url(url: str, token: str) -> str:
@@ -27,6 +29,27 @@ def _run(cmd: list[str], cwd: Path | None = None, timeout: int = DEFAULT_TIMEOUT
     )
 
 
+def _ensure_identity(repo_dir: Path) -> None:
+    """Ensure local git author identity exists before commit/tag operations."""
+    name_result = _run(["git", "config", "--get", "user.name"], cwd=repo_dir, timeout=10)
+    if name_result.returncode != 0 or not name_result.stdout.strip():
+        result = _run(["git", "config", "user.name", DEFAULT_GIT_USER_NAME], cwd=repo_dir, timeout=10)
+        if result.returncode != 0:
+            raise RuntimeError(
+                f"git config user.name failed (exit {result.returncode}): "
+                f"stderr={result.stderr[:200]!r}"
+            )
+
+    email_result = _run(["git", "config", "--get", "user.email"], cwd=repo_dir, timeout=10)
+    if email_result.returncode != 0 or not email_result.stdout.strip():
+        result = _run(["git", "config", "user.email", DEFAULT_GIT_USER_EMAIL], cwd=repo_dir, timeout=10)
+        if result.returncode != 0:
+            raise RuntimeError(
+                f"git config user.email failed (exit {result.returncode}): "
+                f"stderr={result.stderr[:200]!r}"
+            )
+
+
 def clone(url: str, token: str, target: Path) -> None:
     """Clone a repository using a token-embedded HTTPS URL.
 
@@ -56,6 +79,8 @@ def commit_all(repo_dir: Path, message: str) -> bool:
     Returns False if there was nothing to commit (git exits 1 with no staged
     changes), True on success, raises RuntimeError on other failures.
     """
+    _ensure_identity(repo_dir)
+
     add_result = _run(["git", "add", "-A"], cwd=repo_dir)
     if add_result.returncode != 0:
         raise RuntimeError(
@@ -164,6 +189,7 @@ def create_tag(repo_dir: Path, tag: str, message: str, force: bool = False) -> b
     Returns False on failure (never raises).
     """
     try:
+        _ensure_identity(repo_dir)
         cmd = ["git", "tag", "-a", tag, "-m", message]
         if force:
             cmd.insert(2, "-f")
diff --git a/dashboard/backend/brain_repo/github_api.py b/dashboard/backend/brain_repo/github_api.py
index 8c20e71a3..e552717a0 100644
--- a/dashboard/backend/brain_repo/github_api.py
+++ b/dashboard/backend/brain_repo/github_api.py
@@ -68,7 +68,7 @@ def _post(url: str, token: str, payload: dict) -> tuple[int, dict | None]:
 
 
 def detect_brain_repos(token: str) -> list[dict]:
-    """Find repos owned by the authenticated user that carry a ``.evo-brain`` marker.
+    """Find private repos owned by the authenticated user that can be Brain Repo candidates.
 
     Previous implementation used ``/search/code?q=filename:.evo-brain`` which had
     two bugs in practice: GitHub's code index doesn't reliably include dotfiles,
@@ -80,7 +80,11 @@ def detect_brain_repos(token: str) -> list[dict]:
     per private repo (cheap at ≤100 repos), but the result reflects the
     current state of the remote, not the indexer.
 
-    Returns list of {name, full_name, html_url, private, description}.
+    Empty/existing repos are valid candidates because the connect pipeline can
+    initialize the ``.evo-brain`` marker after cloning. Each item includes
+    ``has_evo_brain`` so the UI can distinguish initialized repos later.
+
+    Returns list of {name, full_name, html_url, private, description, has_evo_brain}.
     """
     repos = list_user_repos(token)
     results = []
@@ -91,8 +95,12 @@ def detect_brain_repos(token: str) -> list[dict]:
         owner, name = full_name.split("/", 1)
         contents_url = f"{_API_BASE}/repos/{owner}/{name}/contents/.evo-brain"
         status, _body, _ = _get(contents_url, token)
+        candidate = dict(repo)
+        candidate["has_evo_brain"] = status == 200
         if status == 200:
-            results.append(repo)
+            results.insert(0, candidate)
+        elif status == 404:
+            results.append(candidate)
         elif status not in (200, 404):
             # 403 rate-limit, 5xx, network hiccup — log and move on, the user
             # can retry. Don't error the whole listing for one flaky repo.
diff --git a/dashboard/backend/brain_repo/job_runner.py b/dashboard/backend/brain_repo/job_runner.py
index 3099b558c..7bbf9719e 100644
--- a/dashboard/backend/brain_repo/job_runner.py
+++ b/dashboard/backend/brain_repo/job_runner.py
@@ -55,6 +55,7 @@
 JOB_KIND_SYNC = "sync"
 JOB_KIND_MILESTONE = "milestone"
 JOB_KIND_BOOTSTRAP = "bootstrap"
+JOB_KIND_CLONE = "clone"
 JOB_KIND_WATCHER = "watcher"
 
 # Max time a job may hold sync_in_progress before the janitor reclaims it.
@@ -133,6 +134,38 @@ def _check_cancel(flask_app, user_id: int) -> None:
             raise JobCancelled()
 
 
+def resolve_local_path(stored: str | None, repo_name: str | None, workspace: Path) -> Path | None:
+    """Resolve o working dir do brain repo de forma portátil entre máquinas.
+
+    local_path é persistido como string absoluta no DB; quando o dashboard.db
+    migra de máquina (backup/restore local ↔ VPS) ele aponta para o filesystem
+    antigo e o sync falhava com "missing or corrupt" mesmo com o clone
+    presente no caminho canônico. Tenta o path gravado e, se não existir,
+    re-deriva {workspace}/dashboard/data/brain-repos/{repo_name}.
+    Retorna None quando nenhum candidato tem um clone válido.
+    """
+    candidates: list[Path] = []
+    if stored:
+        candidates.append(Path(stored))
+    if repo_name:
+        candidates.append(workspace / "dashboard" / "data" / "brain-repos" / repo_name)
+    for candidate in candidates:
+        if candidate.is_dir() and (candidate / ".git").is_dir():
+            return candidate
+    return None
+
+
+def _persist_local_path(flask_app, user_id: int, new_path: str) -> None:
+    """Regrava config.local_path após uma re-derivação bem-sucedida."""
+    from models import BrainRepoConfig, db  # type: ignore[import]
+
+    with flask_app.app_context():
+        config = BrainRepoConfig.query.filter_by(user_id=user_id).first()
+        if config is not None and config.local_path != new_path:
+            config.local_path = new_path
+            db.session.commit()
+
+
 def _load_config_snapshot(flask_app, user_id: int) -> dict | None:
     """Copy the fields the pipeline needs out of the session.
 
@@ -369,11 +402,6 @@ def run_sync_pipeline(
                 error = "local_path not configured — repo not yet cloned"
                 return
 
-            repo_dir = Path(local_path)
-            if not repo_dir.is_dir() or not (repo_dir / ".git").is_dir():
-                error = f"Local brain repo at {local_path} is missing or corrupt — re-connect"
-                return
-
             token = _decrypt_snapshot_token(snap["encrypted_token"])
             if not token:
                 error = "Could not decrypt stored token — re-connect the brain repo"
@@ -381,6 +409,26 @@ def run_sync_pipeline(
 
             from brain_repo import git_ops  # type: ignore[import]
 
+            repo_dir = resolve_local_path(local_path, snap["repo_name"], workspace)
+            if repo_dir is None:
+                # Working tree ausente (volume novo / DB restaurado de outra
+                # máquina) mas credencial e URL estão no config — re-clona no
+                # caminho canônico em vez de exigir re-connect manual.
+                if not snap["repo_url"] or not snap["repo_name"]:
+                    error = f"Local brain repo at {local_path} is missing or corrupt — re-connect"
+                    return
+                repo_dir = (
+                    workspace / "dashboard" / "data" / "brain-repos" / snap["repo_name"]
+                )
+                if repo_dir.exists():
+                    shutil.rmtree(repo_dir, ignore_errors=True)
+                repo_dir.parent.mkdir(parents=True, exist_ok=True)
+                _check_cancel(flask_app, user_id)
+                git_ops.clone(snap["repo_url"], token, repo_dir)
+                log.info("job_runner %s: re-cloned brain repo into %s", kind, repo_dir)
+            if str(repo_dir) != local_path:
+                _persist_local_path(flask_app, user_id, str(repo_dir))
+
             _check_cancel(flask_app, user_id)
             copied, dropped = _mirror_workspace(flask_app, user_id, workspace, repo_dir)
             log.info(
@@ -527,6 +575,72 @@ def run_bootstrap_pipeline(
             )
 
 
+def run_clone_pipeline(
+    flask_app,
+    user_id: int,
+    *,
+    token: str,
+    repo_url: str,
+    repo_name: str,
+) -> None:
+    """Clone an existing Brain Repo and persist local_path.
+
+    Connecting an existing repo does not need the initial skeleton bootstrap,
+    but sync still requires a local git working tree under dashboard/data.
+    """
+    from models import BrainRepoConfig, db  # type: ignore[import]
+
+    with _job_lock:
+        error: str | None = None
+        try:
+            workspace = Path(__file__).resolve().parent.parent.parent.parent
+            base_dir = workspace / "dashboard" / "data" / "brain-repos"
+            base_dir.mkdir(parents=True, exist_ok=True)
+            local_path = base_dir / repo_name
+
+            if local_path.exists():
+                shutil.rmtree(local_path, ignore_errors=True)
+
+            from brain_repo import git_ops, manifest  # type: ignore[import]
+
+            git_ops.clone(repo_url, token, local_path)
+            _check_cancel(flask_app, user_id)
+
+            # Existing empty/non-brain repos are accepted: initialize the
+            # skeleton and push it so future detect/restore calls can see it.
+            if not (local_path / ".evo-brain").exists():
+                import subprocess
+
+                subprocess.run(
+                    ["git", "config", "user.name", "EvoNexus"],
+                    cwd=local_path, check=True, capture_output=True, timeout=10,
+                )
+                subprocess.run(
+                    ["git", "config", "user.email", "evonexus@users.noreply.github.com"],
+                    cwd=local_path, check=True, capture_output=True, timeout=10,
+                )
+                manifest.initialize_brain_repo(local_path, {"workspace_name": repo_name})
+                if git_ops.commit_all(local_path, "feat(brain-repo): initialize existing repo"):
+                    pushed, push_err = git_ops.push(local_path, token, with_tags=False)
+                    if not pushed:
+                        error = f"initial brain repo push failed: {push_err}"
+                        return
+
+            with flask_app.app_context():
+                config = BrainRepoConfig.query.filter_by(user_id=user_id).first()
+                if config is not None:
+                    config.local_path = str(local_path)
+                    db.session.commit()
+
+        except JobCancelled:
+            error = "cancelled by user"
+        except Exception as exc:
+            error = f"clone failed: {exc}"
+            log.exception("clone pipeline raised")
+        finally:
+            _release_db_lock(flask_app, user_id, success=error is None, error=error)
+
+
 # ────────────────────────────────────────────────────────────────────────
 # Public enqueue API — what route handlers call.
 # ────────────────────────────────────────────────────────────────────────
@@ -586,6 +700,29 @@ def enqueue_bootstrap(
     return True
 
 
+def enqueue_clone(
+    flask_app,
+    user_id: int,
+    *,
+    token: str,
+    repo_url: str,
+    repo_name: str,
+) -> bool:
+    """Spawn daemon thread cloning an existing Brain Repo. Returns False if busy."""
+    if not _acquire_db_lock(flask_app, user_id, JOB_KIND_CLONE):
+        return False
+
+    t = threading.Thread(
+        target=run_clone_pipeline,
+        args=(flask_app, user_id),
+        kwargs={"token": token, "repo_url": repo_url, "repo_name": repo_name},
+        name=f"brain-repo-clone-{user_id}",
+        daemon=True,
+    )
+    t.start()
+    return True
+
+
 def request_cancel(flask_app, user_id: int) -> bool:
     """Set cancel_requested=1 on the active job. No-op if idle. Returns True if a job was flagged."""
     from models import BrainRepoConfig, db  # type: ignore[import]
diff --git a/dashboard/backend/deadline_check.py b/dashboard/backend/deadline_check.py
new file mode 100644
index 000000000..6851dbd76
--- /dev/null
+++ b/dashboard/backend/deadline_check.py
@@ -0,0 +1,89 @@
+"""Panorama 2026-07-17, item 4 — in-process heartbeat handler that checks for
+overdue Goals and Tickets and alerts via Telegram.
+
+Called by heartbeat_runner when heartbeat config has
+``handler: deadline_check.tick``. Zero Claude CLI invocations — pure SQL +
+an HTTP POST to Telegram, same shape as plugin_integration_health.tick.
+
+Before this, nothing proactively surfaced a Goal or Ticket past its
+due_date — the human only found out by opening /goals or /kanban. Weekly
+Review (scheduler.py) covers this once a week; this closes the gap between
+runs with a cheap, LLM-free check every few hours.
+"""
+
+from __future__ import annotations
+
+import logging
+import sqlite3
+from pathlib import Path
+
+log = logging.getLogger(__name__)
+
+WORKSPACE = Path(__file__).resolve().parent.parent.parent
+DB_PATH = WORKSPACE / "dashboard" / "data" / "evonexus.db"
+
+_MAX_ITEMS_PER_ALERT = 8
+
+
+def _overdue_goals(conn: sqlite3.Connection) -> list[sqlite3.Row]:
+    return conn.execute(
+        "SELECT id, title, due_date FROM goals "
+        "WHERE status = 'active' AND due_date IS NOT NULL AND due_date < date('now') "
+        "ORDER BY due_date ASC"
+    ).fetchall()
+
+
+def _overdue_tickets(conn: sqlite3.Connection) -> list[sqlite3.Row]:
+    return conn.execute(
+        "SELECT id, title, due_date FROM tickets "
+        "WHERE status IN ('open', 'in_progress', 'blocked') "
+        "AND due_date IS NOT NULL AND due_date < date('now') "
+        "ORDER BY due_date ASC"
+    ).fetchall()
+
+
+def _build_alert(goals: list[sqlite3.Row], tickets: list[sqlite3.Row]) -> str:
+    lines = [f"⏰ <b>{len(goals)} Meta(s) e {len(tickets)} Ticket(s) vencidos</b>"]
+    if goals:
+        lines.append("\n🎯 Metas:")
+        for g in goals[:_MAX_ITEMS_PER_ALERT]:
+            lines.append(f"  • #{g['id']} {g['title']} — venceu {g['due_date']}")
+        if len(goals) > _MAX_ITEMS_PER_ALERT:
+            lines.append(f"  … e mais {len(goals) - _MAX_ITEMS_PER_ALERT}")
+    if tickets:
+        lines.append("\n🎫 Tickets:")
+        for t in tickets[:_MAX_ITEMS_PER_ALERT]:
+            lines.append(f"  • {t['title']} — venceu {t['due_date']}")
+        if len(tickets) > _MAX_ITEMS_PER_ALERT:
+            lines.append(f"  … e mais {len(tickets) - _MAX_ITEMS_PER_ALERT}")
+    return "\n".join(lines)
+
+
+def tick() -> dict:
+    """Main handler — checks for overdue Goals/Tickets, alerts if any exist.
+
+    Returns a summary dict for logging purposes. Deliberately re-alerts every
+    run while something stays overdue (no dedup table) — an in-process check
+    every few hours is cheap, and a repeated nudge is the point, not a bug.
+    """
+    if not DB_PATH.exists():
+        return {"error": "db not found", "overdue_goals": 0, "overdue_tickets": 0, "alerted": False}
+
+    conn = sqlite3.connect(str(DB_PATH))
+    conn.row_factory = sqlite3.Row
+    try:
+        goals = _overdue_goals(conn)
+        tickets = _overdue_tickets(conn)
+    finally:
+        conn.close()
+
+    alerted = False
+    if goals or tickets:
+        from notifications import send_telegram_alert
+        alerted = send_telegram_alert(_build_alert(goals, tickets))
+
+    log.info(
+        "deadline_check.tick: overdue_goals=%d overdue_tickets=%d alerted=%s",
+        len(goals), len(tickets), alerted,
+    )
+    return {"overdue_goals": len(goals), "overdue_tickets": len(tickets), "alerted": alerted}
diff --git a/dashboard/backend/heartbeat_dispatcher.py b/dashboard/backend/heartbeat_dispatcher.py
index a19f91605..4208a9317 100644
--- a/dashboard/backend/heartbeat_dispatcher.py
+++ b/dashboard/backend/heartbeat_dispatcher.py
@@ -26,6 +26,12 @@
 _executor = ThreadPoolExecutor(max_workers=4, thread_name_prefix="hb-worker")
 _schedule_lock = threading.Lock()
 
+# Execution lock — prevents same heartbeat_id from running concurrently.
+# Slot is reserved in dispatch() (main thread) before _executor.submit(),
+# released in _run()'s finally block (worker thread).
+_running: set[str] = set()
+_running_lock = threading.Lock()
+
 # Debounce window (seconds)
 DEBOUNCE_SECONDS = 30
 
@@ -130,6 +136,15 @@ def dispatch(heartbeat_id: str, trigger_type: str, payload: dict | None = None)
     # Generate run_id
     run_id = str(uuid.uuid4())
 
+    # Reserve execution slot — atomic check+add under lock.
+    # Done in main thread (not in _run) to avoid TOCTOU race between workers.
+    with _running_lock:
+        if heartbeat_id in _running:
+            _record_trigger(heartbeat_id, trigger_type, payload, coalesced_into=None)
+            print(f"[dispatcher] {heartbeat_id} already running, coalesced run_id={run_id}", flush=True)
+            return False, None
+        _running.add(heartbeat_id)
+
     def _run():
         from heartbeat_runner import run_heartbeat
         try:
@@ -142,6 +157,9 @@ def _run():
             )
         except Exception as exc:
             print(f"[dispatcher] ERROR running {heartbeat_id} run_id={run_id}: {exc}", flush=True)
+        finally:
+            with _running_lock:
+                _running.discard(heartbeat_id)
 
     print(f"[dispatcher] dispatching {heartbeat_id} trigger_type={trigger_type} run_id={run_id}", flush=True)
     _executor.submit(_run)
@@ -189,15 +207,15 @@ def _sync_heartbeats_to_db():
                     """INSERT INTO heartbeats
                        (id, agent, interval_seconds, max_turns, timeout_seconds,
                         lock_timeout_seconds, wake_triggers, enabled, goal_id,
-                        required_secrets, decision_prompt, source_plugin,
+                        required_secrets, decision_prompt, handler, source_plugin,
                         created_at, updated_at)
-                       VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)""",
+                       VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)""",
                     (
                         hb.id, hb.agent, hb.interval_seconds, hb.max_turns,
                         hb.timeout_seconds, hb.lock_timeout_seconds,
                         json.dumps(hb.wake_triggers), int(hb.enabled), hb.goal_id,
                         json.dumps(hb.required_secrets), hb.decision_prompt,
-                        hb.source_plugin,
+                        hb.handler, hb.source_plugin,
                         now, now,
                     ),
                 )
@@ -207,14 +225,14 @@ def _sync_heartbeats_to_db():
                     """UPDATE heartbeats SET
                        agent=?, interval_seconds=?, max_turns=?, timeout_seconds=?,
                        lock_timeout_seconds=?, wake_triggers=?, goal_id=?,
-                       required_secrets=?, decision_prompt=?, source_plugin=?,
+                       required_secrets=?, decision_prompt=?, handler=?, source_plugin=?,
                        updated_at=?
                        WHERE id=?""",
                     (
                         hb.agent, hb.interval_seconds, hb.max_turns, hb.timeout_seconds,
                         hb.lock_timeout_seconds, json.dumps(hb.wake_triggers), hb.goal_id,
                         json.dumps(hb.required_secrets), hb.decision_prompt,
-                        hb.source_plugin, now,
+                        hb.handler, hb.source_plugin, now,
                         hb.id,
                     ),
                 )
@@ -224,8 +242,47 @@ def _sync_heartbeats_to_db():
         conn.close()
 
 
+def _seconds_since_last_run(heartbeat_id: str) -> float | None:
+    """Seconds since this heartbeat's most recent run started, or None if it
+    has never run. Used by register_interval_jobs to catch up on heartbeats
+    that are overdue relative to their OWN history — see that function's
+    docstring for why this matters.
+    """
+    conn = _get_db()
+    try:
+        row = conn.execute(
+            "SELECT started_at FROM heartbeat_runs WHERE heartbeat_id = ? "
+            "ORDER BY started_at DESC LIMIT 1",
+            (heartbeat_id,),
+        ).fetchone()
+    finally:
+        conn.close()
+    if not row or not row["started_at"]:
+        return None
+    try:
+        last = datetime.strptime(row["started_at"], "%Y-%m-%dT%H:%M:%S.%fZ").replace(tzinfo=timezone.utc)
+    except ValueError:
+        return None
+    return (datetime.now(timezone.utc) - last).total_seconds()
+
+
 def register_interval_jobs():
-    """Register schedule jobs for all heartbeats with 'interval' wake trigger."""
+    """Register schedule jobs for all heartbeats with 'interval' wake trigger.
+
+    `schedule.every(N).do(job)` always counts the first firing from THIS
+    call, not from any persisted history — so a heartbeat that's mid-
+    interval when the process restarts (a redeploy, a crash, `reload_config`
+    after a plugin install) has its countdown reset to the full N, and
+    starts looking "overdue" relative to its configured cadence even though
+    nothing is actually broken. Confirmed live 2026-07-14: several redeploys
+    in a short window left atlas-4h/zara-2h/flux-6h looking hours behind
+    schedule purely because of restart timing, not a stuck dispatcher.
+    Fires an immediate catch-up dispatch for anything already overdue by its
+    own last-run history before/alongside registering the periodic job, so
+    a redeploy costs at most one wasted-looking cycle, never a multi-hour
+    stall. dispatch()'s existing 30s debounce makes this safe to call
+    repeatedly (e.g. on every plugin-triggered reload_config).
+    """
     _sync_heartbeats_to_db()
     heartbeats = _load_enabled_heartbeats()
 
@@ -245,6 +302,15 @@ def register_interval_jobs():
         interval_secs = hb["interval_seconds"]
         hb_id = hb["id"]
 
+        # Catch-up: if this heartbeat is already overdue by its own history
+        # (last real run further back than its interval), fire it now
+        # instead of waiting a full fresh interval from this process start.
+        elapsed = _seconds_since_last_run(hb_id)
+        if elapsed is not None and elapsed >= interval_secs:
+            print(f"[dispatcher] {hb_id} overdue ({elapsed:.0f}s since last run, "
+                  f"interval {interval_secs}s) — catch-up dispatch", flush=True)
+            dispatch(hb_id, "interval")
+
         # Use schedule library (same as scheduler.py)
         # Tag the job so we can cancel it if needed
         tag = f"hb-interval-{hb_id}"
@@ -276,6 +342,7 @@ def _job():
             registered += 1
 
     print(f"[dispatcher] {registered} interval jobs registered", flush=True)
+    return registered
 
 
 def start_dispatcher_thread():
diff --git a/dashboard/backend/heartbeat_outcome.py b/dashboard/backend/heartbeat_outcome.py
new file mode 100644
index 000000000..41d8d76d0
--- /dev/null
+++ b/dashboard/backend/heartbeat_outcome.py
@@ -0,0 +1,1022 @@
+"""Interpret an agent's heartbeat result and apply it to the kanban.
+
+The old model fired "✅ Heartbeat OK" for every successful run, including
+no-op skips — pure noise. This module replaces that with outcome-driven
+behaviour: the agent ends its run with a structured JSON block describing what
+it did, and we (1) move the ticket on the board, (2) record a comment + activity,
+and (3) decide whether anything is worth telling Felipe on Telegram.
+
+Agent output contract (the agent appends this JSON to its final message):
+
+    {
+      "action": "work" | "skip" | "blocked",
+      "ticket_id": "<id or null>",
+      "result": "<one-line natural-language summary of what was done>",
+      "new_status": "in_progress" | "review" | "resolved" | "blocked" | null,
+      "blocked_reason": "<why it is stuck, if blocked>",
+      "needs": "<what Felipe must provide to unblock: data, credential, decision>"
+    }
+
+Notification policy (decided with Felipe 2026-06-17):
+  - action=skip  → silent (nothing to report)
+  - action=work  → notify the *result* (not tokens/cost)
+  - action=blocked → notify, because Felipe needs to intervene
+  - unparseable / no JSON → silent (no more "heartbeat ok" spam)
+"""
+
+from __future__ import annotations
+
+import json
+import os
+import re
+import time
+from datetime import datetime, timedelta, timezone
+
+# Valid ticket states (see .claude/rules/tickets.md)
+_VALID_STATUS = {"open", "in_progress", "blocked", "review", "resolved", "closed"}
+_STATUS_ALIASES = {
+    "done": "resolved",
+    "complete": "resolved",
+    "completed": "resolved",
+    "finished": "resolved",
+    "in progress": "in_progress",
+    "inprogress": "in_progress",
+    "review_needed": "review",
+    "needs_review": "review",
+}
+
+
+def _now_iso() -> str:
+    return datetime.now(timezone.utc).isoformat()
+
+
+def _normalize_status(raw: str | None) -> str | None:
+    if not raw:
+        return None
+    s = str(raw).strip().lower()
+    s = _STATUS_ALIASES.get(s, s)
+    return s if s in _VALID_STATUS else None
+
+
+def _unwrap_provider_output(text: str) -> str:
+    """Unwrap the CLI/provider JSON envelope to get the assistant's actual text.
+
+    step7 returns the raw CLI output, which for `--output-format json` is an
+    envelope like {"type":"result","result":"<assistant text>","usage":{…}}.
+    The agent's outcome JSON lives INSIDE that text with escaped quotes. We must
+    json.loads the envelope (which un-escapes the inner text) before scanning for
+    the {"action":…} block. Handles stream-json (multi-line) too.
+    """
+    s = (text or "").strip()
+    if not s.startswith("{"):
+        return text
+
+    def _content_of(obj):
+        if not isinstance(obj, dict):
+            return None
+        if "action" in obj:
+            return json.dumps(obj)  # already the outcome itself
+        for key in ("result", "content", "text", "message", "response", "output"):
+            v = obj.get(key)
+            if isinstance(v, str) and v.strip():
+                return v
+        return None
+
+    # Single JSON envelope
+    try:
+        got = _content_of(json.loads(s))
+        if got is not None:
+            return got
+    except json.JSONDecodeError:
+        pass
+    # stream-json: scan lines bottom-up for the last decodable envelope with content
+    for line in reversed(s.splitlines()):
+        line = line.strip()
+        if not line.startswith("{"):
+            continue
+        try:
+            got = _content_of(json.loads(line))
+        except json.JSONDecodeError:
+            continue
+        if got is not None:
+            return got
+    return text
+
+
+def parse_agent_outcome(output) -> dict | None:
+    """Extract the structured outcome JSON from an agent's free-form output.
+
+    Returns the parsed dict (with at least an "action" key) or None if no
+    structured outcome could be found.
+    """
+    if isinstance(output, dict):
+        return output if "action" in output else None
+    if not output:
+        return None
+    text = _unwrap_provider_output(str(output))
+
+    candidates: list[str] = []
+    # 1. fenced ```json ... ``` blocks
+    for m in re.finditer(r"```(?:json)?\s*(\{.*?\})\s*```", text, re.DOTALL):
+        candidates.append(m.group(1))
+    # 2. raw JSON objects scanned with the decoder (handles nesting)
+    decoder = json.JSONDecoder()
+    idx = 0
+    while True:
+        start = text.find("{", idx)
+        if start == -1:
+            break
+        try:
+            obj, end = decoder.raw_decode(text[start:])
+            if isinstance(obj, dict):
+                candidates.append(json.dumps(obj))
+            idx = start + max(end, 1)
+        except json.JSONDecodeError:
+            idx = start + 1
+
+    # Prefer the last candidate that carries an "action" key
+    for cand in reversed(candidates):
+        try:
+            obj = json.loads(cand)
+        except (json.JSONDecodeError, TypeError):
+            continue
+        if isinstance(obj, dict) and "action" in obj:
+            return obj
+    return None
+
+
+_OUTCOME_SCHEMA = {
+    "type": "object",
+    "properties": {
+        "action": {"type": "string", "enum": ["work", "skip", "blocked"]},
+        "ticket_id": {"type": ["string", "null"]},
+        "result": {"type": "string"},
+        "new_status": {"type": ["string", "null"]},
+        "blocked_reason": {"type": "string"},
+        "needs": {"type": "string"},
+        "publish_intent": {"type": ["boolean", "null"]},
+        "publish_target": {"type": ["string", "null"]},
+        "publish_content": {"type": ["string", "null"]},
+        "publish_media": {
+            "type": ["array", "null"],
+            "items": {"type": "string"},
+        },
+    },
+    # publish_intent is required (not just present-with-default) so the
+    # strict json_schema call is forced to emit it explicitly — the publish
+    # gate below is fail-closed and only trusts an EXPLICIT False (Vault V5).
+    "required": [
+        "action", "result", "publish_intent", "publish_target",
+        "publish_content", "publish_media",
+    ],
+}
+
+# goal-ticket-unification Step 7 (ADR SPEC 3g) — agents that can cause a
+# ticket to represent a public post/message. Mirrors STATE_MONITOR_AGENTS
+# (heartbeat_runner.py) as a constant + env override pattern.
+PUBLISHING_AGENTS = set(
+    (os.environ.get("PUBLISHING_AGENTS") or "pixel-social-media,mako-marketing,pulse-community").split(",")
+)
+# Closed set (Vault V9) — never build a URL/call from an arbitrary agent-supplied string.
+PUBLISH_CHANNELS = set(
+    (os.environ.get("PUBLISH_CHANNELS") or "instagram,linkedin,x,youtube,discord,whatsapp").split(",")
+)
+
+# Self-healing review loop (goal-ticket-unification Step 6, ADR SPEC 2b-2d).
+# A ticket whose executor sets new_status="review" gets a pass/fail verdict
+# before it's allowed to reach resolved — either from raven/oath running
+# in-session (anthropic provider, embedded by heartbeat_runner's prompt
+# addendum) or, the default path, from verdict_via_nvidia below after the
+# provider_fallback lock has already been released. Never a 2nd
+# invoke_with_fallback (mutex is re-entrant-unsafe).
+_VERDICT_SCHEMA = {
+    "type": "object",
+    "properties": {
+        "verdict": {"type": "string", "enum": ["pass", "fail"]},
+        "critique": {"type": "string"},
+        "blocking_issues": {"type": "array", "items": {"type": "string"}},
+        "confidence": {"type": "string", "enum": ["high", "medium", "low"]},
+    },
+    "required": ["verdict", "critique"],
+}
+
+# Max fail-bounces (review -> in_progress -> review) before a ticket parks in
+# blocked/review_exhausted for a human. Scoped since the last manual reopen
+# (ticket_activity action='review_reset') so a ticket a human fixes and
+# reopens doesn't inherit its old bounce count (Raven-F4a).
+MAX_REVIEW_BOUNCES = 2
+
+
+def parse_verdict(output) -> dict | None:
+    """Extract a structured review verdict from free-form output.
+
+    Mirrors parse_agent_outcome's candidate-scanning machine but keys on
+    "verdict" instead of "action" — an in-session anthropic run may emit BOTH
+    the outcome JSON and the verdict JSON in the same final message.
+    """
+    if isinstance(output, dict):
+        return output if "verdict" in output else None
+    if not output:
+        return None
+    text = _unwrap_provider_output(str(output))
+
+    candidates: list[str] = []
+    for m in re.finditer(r"```(?:json)?\s*(\{.*?\})\s*```", text, re.DOTALL):
+        candidates.append(m.group(1))
+    decoder = json.JSONDecoder()
+    idx = 0
+    while True:
+        start = text.find("{", idx)
+        if start == -1:
+            break
+        try:
+            obj, end = decoder.raw_decode(text[start:])
+            if isinstance(obj, dict):
+                candidates.append(json.dumps(obj))
+            idx = start + max(end, 1)
+        except json.JSONDecodeError:
+            idx = start + 1
+
+    for cand in reversed(candidates):
+        try:
+            obj = json.loads(cand)
+        except (json.JSONDecodeError, TypeError):
+            continue
+        if isinstance(obj, dict) and "verdict" in obj:
+            return obj
+    return None
+
+
+# Large models that reliably honor response_format=json_schema with good content.
+# A short chain so a 429 on one rotates to the next (NVIDIA is free; the limit is
+# rate, not cost — see the model-chain rationale).
+_STRUCTURER_MODELS = [
+    "nvidia/nemotron-3-ultra-550b-a55b",
+    "qwen/qwen3.5-397b-a17b",
+    "qwen/qwen3.5-122b-a10b",
+]
+
+
+def _nvidia_key_and_base() -> tuple[str, str]:
+    import os
+    key = os.environ.get("NVIDIA_API_KEY") or os.environ.get("OPENAI_API_KEY") or ""
+    base = "https://integrate.api.nvidia.com/v1"
+    if not key:
+        # last resort: read NVIDIA_API_KEY from .env at repo root
+        try:
+            from pathlib import Path
+            env = Path(__file__).resolve().parents[2] / ".env"
+            for line in env.read_text(encoding="utf-8").splitlines():
+                if line.strip().startswith("NVIDIA_API_KEY="):
+                    key = line.split("=", 1)[1].strip()
+                    break
+        except Exception:  # noqa: BLE001
+            pass
+    return key, base
+
+
+def structure_via_nvidia(agent_output, agent: str, conn) -> dict | None:
+    """Structure the agent's report into outcome JSON using NVIDIA (free).
+
+    The executor models run via the agentic CLI and rarely emit clean JSON. This
+    makes a single, cheap completion call with response_format=json_schema (strict)
+    on a large model, which guarantees structurally-valid JSON. Free — keeps the
+    whole loop on NVIDIA. Falls through to Claude only if every NVIDIA model fails.
+    """
+    import json as _json
+    import urllib.request
+    import urllib.error
+
+    report = _unwrap_provider_output(str(agent_output or "")).strip()
+    if not report:
+        return None
+    key, base = _nvidia_key_and_base()
+    if not key:
+        return None
+
+    rows = conn.execute(
+        "SELECT id, title FROM tickets WHERE assignee_agent = ? "
+        "AND status IN ('open','in_progress') ORDER BY priority_rank DESC LIMIT 10",
+        (agent,),
+    ).fetchall()
+    tickets = [{"id": (r["id"] if hasattr(r, "keys") else r[0]),
+                "title": (r["title"] if hasattr(r, "keys") else r[1])} for r in rows]
+
+    prompt = (
+        "Converta o relatório de um agente em um JSON de outcome.\n"
+        f"Tickets atribuídos ao agente: {_json.dumps(tickets, ensure_ascii=False)}\n\n"
+        f"Relatório do agente:\n{report[:4000]}\n\n"
+        "Regras:\n"
+        "- action='work' se o agente ENTREGOU ou avançou algo concreto (existe um "
+        "resultado). Defina new_status: 'resolved' se concluiu, 'review' se precisa "
+        "revisão, 'in_progress' se avançou parcialmente.\n"
+        "- action='blocked' se depende de algo que só o humano fornece (credencial, "
+        "acesso, dado, decisão). Preencha blocked_reason e needs.\n"
+        "- action='skip' SOMENTE se nada acionável foi feito.\n"
+        "- result: 1 frase em pt-BR com o resultado concreto. ticket_id: o id tratado.\n"
+        "- publish_intent: true se o resultado é algo que seria publicado externamente "
+        "(post, mensagem, conteúdo pronto pra sair); false se o agente decidiu "
+        "explicitamente NÃO publicar agora (rascunho, aguardando revisão); null se a "
+        "tarefa não envolve publicação alguma.\n"
+        "- publish_target: plataforma de destino. publish_content: texto EXATO que deve "
+        "ser publicado (não um resumo). publish_media: URLs HTTPS das mídias, ou null."
+    )
+    body = {
+        "messages": [{"role": "user", "content": prompt}],
+        "temperature": 0.2,
+        "max_tokens": 600,
+        "response_format": {"type": "json_schema",
+                            "json_schema": {"name": "outcome", "schema": _OUTCOME_SCHEMA,
+                                            "strict": True}},
+    }
+    for model in _STRUCTURER_MODELS:
+        body["model"] = model
+        try:
+            req = urllib.request.Request(
+                base + "/chat/completions",
+                data=_json.dumps(body).encode("utf-8"),
+                headers={"Authorization": f"Bearer {key}", "Content-Type": "application/json"},
+            )
+            with urllib.request.urlopen(req, timeout=90) as resp:
+                data = _json.loads(resp.read().decode("utf-8"))
+            content = (data.get("choices") or [{}])[0].get("message", {}).get("content")
+            if content:
+                parsed = _json.loads(content)
+                if isinstance(parsed, dict) and "action" in parsed:
+                    return parsed
+        except urllib.error.HTTPError as e:
+            if e.code == 429:
+                continue  # rate-limited → next model
+            continue
+        except Exception:  # noqa: BLE001
+            continue
+    return None
+
+
+def verdict_via_nvidia(work_report, conn) -> dict | None:
+    """Get a pass/fail review verdict on a work report via NVIDIA (free), HTTP.
+
+    Default path for the self-healing review loop (ADR SPEC 2c): a plain,
+    read-only completion call with response_format=json_schema (strict) on
+    _VERDICT_SCHEMA — no filesystem, no subagents, no mutex. Called AFTER the
+    provider_fallback lock from the executor's run has already been released,
+    so this never nests inside invoke_with_fallback (C1).
+    """
+    import json as _json
+    import urllib.request
+    import urllib.error
+
+    report = _unwrap_provider_output(str(work_report or "")).strip()
+    if not report:
+        return None
+    key, base = _nvidia_key_and_base()
+    if not key:
+        return None
+
+    prompt = (
+        "Você é um revisor cético e rigoroso. Avalie o relatório de trabalho abaixo "
+        "e decida se o trabalho está pronto para ser considerado concluído (pass) ou "
+        "precisa de correção (fail).\n\n"
+        f"Relatório do agente:\n{report[:4000]}\n\n"
+        "Regras:\n"
+        "- verdict='pass' apenas se o relatório descreve um resultado concreto, "
+        "verificado (build/teste passou, evidência real), sem pendências bloqueantes.\n"
+        "- verdict='fail' se falta evidência, se o próprio relatório admite algo "
+        "incompleto/quebrado, ou se a alegação de conclusão não é sustentada.\n"
+        "- critique: 1-3 frases em pt-BR explicando a decisão.\n"
+        "- blocking_issues: lista curta dos problemas que bloqueiam pass (vazio se pass)."
+    )
+    body = {
+        "messages": [{"role": "user", "content": prompt}],
+        "temperature": 0.1,
+        "max_tokens": 500,
+        "response_format": {"type": "json_schema",
+                            "json_schema": {"name": "verdict", "schema": _VERDICT_SCHEMA,
+                                            "strict": True}},
+    }
+    for model in _STRUCTURER_MODELS:
+        body["model"] = model
+        try:
+            req = urllib.request.Request(
+                base + "/chat/completions",
+                data=_json.dumps(body).encode("utf-8"),
+                headers={"Authorization": f"Bearer {key}", "Content-Type": "application/json"},
+            )
+            with urllib.request.urlopen(req, timeout=90) as resp:
+                data = _json.loads(resp.read().decode("utf-8"))
+            content = (data.get("choices") or [{}])[0].get("message", {}).get("content")
+            if content:
+                parsed = _json.loads(content)
+                if isinstance(parsed, dict) and "verdict" in parsed:
+                    return parsed
+        except urllib.error.HTTPError as e:
+            if e.code == 429:
+                continue  # rate-limited → next model
+            continue
+        except Exception:  # noqa: BLE001
+            continue
+    return None
+
+
+def structure_via_claude(agent_output, agent: str, conn) -> dict | None:
+    """Hybrid fallback: NVIDIA executes (free, heavy), Claude structures (cheap).
+
+    The NVIDIA models do the actual work but often fail to emit the outcome JSON
+    reliably (they narrate, hit max turns, or answer generically). When the raw
+    parse fails, we ask the native `claude` CLI (Anthropic subscription) to turn
+    the agent's report into the outcome JSON — one turn, no tools, ~hundreds of
+    tokens, so it barely touches the Anthropic quota. Returns the outcome dict or
+    None if Claude is unavailable / also fails.
+    """
+    import os
+    import shutil
+    import subprocess
+
+    claude_bin = shutil.which("claude")
+    if not claude_bin:
+        return None
+
+    report = _unwrap_provider_output(str(agent_output or "")).strip()
+    if not report:
+        return None
+
+    # Inbox the agent could have acted on (id + title), so Claude can pick ticket_id
+    rows = conn.execute(
+        "SELECT id, title FROM tickets WHERE assignee_agent = ? "
+        "AND status IN ('open','in_progress') ORDER BY priority_rank DESC LIMIT 10",
+        (agent,),
+    ).fetchall()
+    tickets = []
+    for r in rows:
+        try:
+            tickets.append({"id": r["id"], "title": r["title"]})
+        except (TypeError, KeyError, IndexError):
+            tickets.append({"id": r[0], "title": r[1]})
+
+    prompt = (
+        "Você converte o relatório de um agente em um único JSON de outcome. "
+        "Tickets atribuídos ao agente (escolha o ticket_id correto):\n"
+        f"{json.dumps(tickets, ensure_ascii=False)}\n\n"
+        f"Relatório do agente:\n{report[:4000]}\n\n"
+        "Responda SOMENTE com este JSON (uma linha, nada antes/depois):\n"
+        '{"action":"work"|"skip"|"blocked","ticket_id":"<id ou null>",'
+        '"result":"<o que o agente concluiu, 1 frase pt-BR>",'
+        '"new_status":"in_progress"|"review"|"resolved"|null,'
+        '"blocked_reason":"<se blocked>","needs":"<se blocked, o que precisa do humano>",'
+        '"publish_intent":true|false|null,"publish_target":"instagram"|"linkedin"|null,'
+        '"publish_content":"<texto exato ou null>","publish_media":["<URL HTTPS>"]|null}\n'
+        "Regras: action=work se o agente entregou/avançou algo; blocked se ele "
+        "depende de dado/credencial/decisão humana; skip se nada foi feito. "
+        "Se houver publicação, publish_content deve ser o texto final completo, "
+        "não o resumo de result."
+    )
+
+    # Clean env so the `claude` CLI uses the Anthropic subscription, not the
+    # NVIDIA/OpenAI override vars that may be set for the rest of the workspace.
+    env = {k: v for k, v in os.environ.items()
+           if not (k.startswith("OPENAI_") or k.startswith("CLAUDE_CODE_USE_")
+                   or k in ("ANTHROPIC_BASE_URL", "NVIDIA_API_KEY"))}
+    try:
+        proc = subprocess.run(
+            [claude_bin, "--print", "--output-format", "json",
+             "--max-turns", "1", "--tools", "", "--", prompt],
+            capture_output=True, text=True, timeout=90, env=env,
+        )
+    except (subprocess.TimeoutExpired, Exception):  # noqa: BLE001
+        return None
+    if proc.returncode != 0:
+        return None
+    return parse_agent_outcome(proc.stdout)
+
+
+def _ticket_title(ticket_id: str, conn) -> str:
+    row = conn.execute("SELECT title FROM tickets WHERE id = ?", (ticket_id,)).fetchone()
+    if not row:
+        return ticket_id
+    try:
+        return row["title"] or ticket_id
+    except (TypeError, KeyError, IndexError):
+        return (row[0] if row[0] else ticket_id)
+
+
+def _recompute_goal_from_tickets(goal_id, conn) -> None:
+    """Single source of truth for goals.current_value: COUNT of terminal tickets.
+
+    Idempotent recompute (not an increment) so it stays correct no matter how
+    many times it runs for the same goal — reopen/re-resolve, mixed
+    goal_id-only/goal_id+task_id populations, all converge to the same number.
+    goal_tasks is frozen legacy: this function is the only writer of
+    current_value left after goal-ticket-unification (was previously
+    triple/quadruple-written by _advance_goal_for_ticket,
+    _sync_goal_task_from_ticket, trg_task_done_updates_goal, and the
+    current_value field on PATCH /api/goals/{id}).
+    """
+    if not goal_id:
+        return
+    goal_row = conn.execute("SELECT metric_type FROM goals WHERE id = ?", (goal_id,)).fetchone()
+    if not goal_row:
+        return
+    metric_type = goal_row["metric_type"] if hasattr(goal_row, "keys") else goal_row[0]
+    if metric_type != "count":
+        # COUNT-of-terminal-tickets only makes sense for count goals — for
+        # currency/percentage/boolean goals it would clobber the real value
+        # (e.g. R$45.000 MRR -> 1) on the first ticket status transition.
+        return
+    done = conn.execute(
+        "SELECT COUNT(*) FROM tickets WHERE goal_id = ? AND status IN ('resolved','closed')",
+        (goal_id,),
+    ).fetchone()[0]
+    conn.execute(
+        "UPDATE goals SET current_value = ?, updated_at = ? WHERE id = ?",
+        (float(done), _now_iso(), goal_id),
+    )
+    conn.execute(
+        "UPDATE goals SET status = 'achieved', completed_at = ? "
+        "WHERE id = ? AND current_value >= target_value AND status = 'active'",
+        (_now_iso(), goal_id),
+    )
+    conn.execute(
+        "UPDATE goals SET status = 'active', completed_at = NULL "
+        "WHERE id = ? AND current_value < target_value AND status = 'achieved'",
+        (goal_id,),
+    )
+
+    # Project rollup (ai-hierarchy-suggestions quick-spec): this is the
+    # common real-world path a Goal reaches 'achieved' (ticket resolution),
+    # so this is where the Mission->Project->Goal chain's terminal state
+    # needs to bubble up, not just the ORM-side routes/goals.py::patch_goal.
+    row = conn.execute("SELECT project_id, status FROM goals WHERE id = ?", (goal_id,)).fetchone()
+    if row:
+        project_id = row["project_id"] if hasattr(row, "keys") else row[0]
+        goal_status = row["status"] if hasattr(row, "keys") else row[1]
+        if goal_status == "achieved" and project_id:
+            _maybe_complete_project_raw(project_id, conn)
+
+
+def _maybe_complete_project_raw(project_id, conn) -> None:
+    """Raw-SQL twin of routes/goals.py::_maybe_complete_project.
+
+    This module only ever has a raw sqlite3 connection (no Flask app/request
+    context to reach the ORM from), so the rollup check is duplicated here
+    rather than shared — same reasoning _recompute_goal_from_tickets itself
+    already follows for this whole module.
+    """
+    proj = conn.execute("SELECT status FROM projects WHERE id = ?", (project_id,)).fetchone()
+    if not proj:
+        return
+    proj_status = proj["status"] if hasattr(proj, "keys") else proj[0]
+    if proj_status == "completed":
+        return
+    rows = conn.execute("SELECT status FROM goals WHERE project_id = ?", (project_id,)).fetchall()
+    if not rows:
+        return
+    statuses = [r["status"] if hasattr(r, "keys") else r[0] for r in rows]
+    if all(s in ("achieved", "cancelled") for s in statuses):
+        now = _now_iso()
+        conn.execute(
+            "UPDATE projects SET status = 'completed', completed_at = ?, updated_at = ? WHERE id = ?",
+            (now, now, project_id),
+        )
+
+
+def _move_ticket(ticket_id: str, new_status: str, agent: str, comment: str, conn) -> None:
+    """Update ticket status + log a comment and an activity event."""
+    now = _now_iso()
+    prev = conn.execute("SELECT goal_id FROM tickets WHERE id = ?", (ticket_id,)).fetchone()
+    goal_id = (prev["goal_id"] if prev and hasattr(prev, "keys") else (prev[0] if prev else None))
+    resolved_at = now if new_status in ("resolved", "closed") else None
+    conn.execute(
+        "UPDATE tickets SET status = ?, updated_at = ?, "
+        "resolved_at = COALESCE(?, resolved_at) WHERE id = ?",
+        (new_status, now, resolved_at, ticket_id),
+    )
+    _recompute_goal_from_tickets(goal_id, conn)
+    if comment:
+        import uuid
+        conn.execute(
+            "INSERT INTO ticket_comments (id, ticket_id, author, body, mentions, created_at) "
+            "VALUES (?, ?, ?, ?, ?, ?)",
+            (str(uuid.uuid4()), ticket_id, f"agent:{agent}", comment, "[]", now),
+        )
+        conn.execute(
+            "INSERT INTO ticket_activity (id, ticket_id, actor, action, payload, created_at) "
+            "VALUES (?, ?, ?, ?, ?, ?)",
+            (str(uuid.uuid4()), ticket_id, f"agent:{agent}", "status_changed",
+             json.dumps({"new_status": new_status}), now),
+        )
+    conn.commit()
+
+
+def _publish_context_line(ticket_id: str, conn) -> str:
+    """Mission/Project context line so an approval doesn't get lost among
+    several Sistema Britto projects being worked in parallel — the ticket
+    only carries goal_id, so walk goal -> project -> mission."""
+    try:
+        row = conn.execute(
+            "SELECT p.title AS project_title, m.title AS mission_title "
+            "FROM tickets t "
+            "LEFT JOIN goals g ON g.id = t.goal_id "
+            "LEFT JOIN projects p ON p.id = g.project_id "
+            "LEFT JOIN missions m ON m.id = p.mission_id "
+            "WHERE t.id = ?",
+            (ticket_id,),
+        ).fetchone()
+    except Exception:
+        return ""
+    if not row:
+        return ""
+    project_title = row["project_title"] if hasattr(row, "keys") else row[0]
+    mission_title = row["mission_title"] if hasattr(row, "keys") else row[1]
+    if not project_title and not mission_title:
+        return ""
+    return f"Missão: {mission_title or '—'} · Projeto: {project_title or '—'}"
+
+
+def _build_publish_approval_body(target: str, outcome: dict, context_line: str = "") -> str:
+    """Build the Telegram approval body from what will ACTUALLY be published.
+
+    Trust-critical fix: this used to show outcome["result"] — the agent's
+    free-text summary — while _run_publish_action later publishes
+    outcome["publish_content"]/publish_media, a DIFFERENT pair of fields.
+    A human approving the summary never saw the exact text/media going live.
+    Show the real publish_content/publish_media here so "aprovar" means
+    "aprovei exatamente isto", not "aprovei um resumo disso".
+    """
+    content = (outcome.get("publish_content") or "").strip()
+    media_urls = outcome.get("publish_media") or []
+    if not isinstance(media_urls, list):
+        media_urls = []
+
+    lines = [context_line] if context_line else []
+    lines.append(f"Plataforma: {target}")
+    if content:
+        lines.append("")
+        lines.append("Texto que será publicado:")
+        lines.append(content[:800])
+    else:
+        # Should never reach here in practice — _run_publish_action fails
+        # closed on empty publish_content — but never show a blank approval.
+        lines.append("")
+        lines.append("⚠️ publish_content vazio — a publicação será recusada até isso ser preenchido.")
+    if media_urls:
+        lines.append("")
+        lines.append("Mídia:")
+        lines.extend(f"🖼 {u}" for u in media_urls[:5])
+
+    return "\n".join(lines)[:1500]
+
+
+def _maybe_park_for_publish(ticket_id: str, agent: str, outcome: dict, title: str, conn) -> dict | None:
+    """Gate a publishing agent's resolve/close behind human Telegram approval.
+
+    Fail-closed (Vault V5/V9, ADR SPEC 3g): only an EXPLICIT publish_intent=False
+    bypasses the gate — absent/None (e.g. the free-form parse_agent_outcome path,
+    where the field may simply be missing) still gates. Returns None when there's
+    nothing to gate (not a publishing agent, or intent explicitly False); a
+    "blocked"/"result" notification spec otherwise (see apply_outcome's contract).
+    """
+    if agent not in PUBLISHING_AGENTS:
+        return None
+    if outcome.get("publish_intent") is False:
+        return None
+
+    target = outcome.get("publish_target")
+    if target not in PUBLISH_CHANNELS:
+        reason = f"publish_target inválido: {target!r}"
+        conn.execute("UPDATE tickets SET blocked_reason = 'agent_blocked' WHERE id = ?", (ticket_id,))
+        _move_ticket(ticket_id, "blocked", agent, reason, conn)
+        return {
+            "kind": "blocked", "agent": agent, "ticket_id": ticket_id, "ticket_title": title,
+            "reason": reason, "needs": "Revisar manualmente.",
+        }
+
+    # Idempotency key scoped by attempt (Vault V7) — a prior rejected/expired
+    # row for this ticket must not collide with this fresh park.
+    attempt = conn.execute(
+        "SELECT COUNT(*) FROM pending_approvals WHERE ticket_id = ? AND gate_type = 'publish'",
+        (ticket_id,),
+    ).fetchone()[0]
+    idempotency_key = f"publish:{ticket_id}:{attempt}"
+    now = _now_iso()
+    expires_at = (datetime.now(timezone.utc) + timedelta(hours=8)).strftime("%Y-%m-%dT%H:%M:%S.%fZ")
+    payload = {
+        "title": f"Aprovar publicação: {title}",
+        "body": _build_publish_approval_body(target, outcome, _publish_context_line(ticket_id, conn)),
+        "outcome": outcome,
+    }
+    conn.execute(
+        "INSERT OR IGNORE INTO pending_approvals "
+        "(gate_type, ticket_id, agent, attempt, idempotency_key, status, payload, created_at, expires_at) "
+        "VALUES ('publish', ?, ?, ?, ?, 'pending', ?, ?, ?)",
+        (ticket_id, agent, attempt, idempotency_key, json.dumps(payload, ensure_ascii=False), now, expires_at),
+    )
+    conn.commit()
+    approval_row = conn.execute(
+        "SELECT id FROM pending_approvals WHERE idempotency_key = ?", (idempotency_key,)
+    ).fetchone()
+    approval_id = approval_row["id"] if hasattr(approval_row, "keys") else approval_row[0]
+
+    conn.execute(
+        "UPDATE tickets SET blocked_reason = 'pending_human_approval', requires_human_approval = 1 WHERE id = ?",
+        (ticket_id,),
+    )
+    _move_ticket(ticket_id, "blocked", agent, "Aguardando aprovação humana para publicar.", conn)
+
+    from notifications import send_approval_request
+    message_id = send_approval_request(approval_id, payload["title"], payload["body"])
+    if message_id is not None:
+        conn.execute(
+            "UPDATE pending_approvals SET telegram_message_id = ? WHERE id = ?",
+            (message_id, approval_id),
+        )
+        conn.commit()
+
+    return {
+        "kind": "result", "agent": agent, "ticket_title": title,
+        "new_status": "blocked", "summary": "Aguardando aprovação humana para publicar (Telegram).",
+    }
+
+
+def _run_publish_action(approval_row, conn) -> dict:
+    """Execute the actual publish effect for an approved publish-gate approval.
+
+    Security-critical (ADR SPEC 3f — this is the real incident that motivated
+    this whole feature: an orchestrator once fabricated "published
+    successfully" without actually publishing). NEVER return published=True
+    without genuine confirmation from the external platform's API.
+
+    Postiz's POST /public/v1/posts only confirms that a workflow was created.
+    We therefore poll GET /public/v1/posts and return published=True only after
+    every returned post id reaches state=PUBLISHED. QUEUE/ERROR/timeouts remain
+    fail-closed and the ticket is not resolved.
+
+    HTTP transport lives in postiz_client.PostizClient (social-media-production
+    feature) — this function is the only caller for the legacy ticket-publish
+    flow, kept separate from the MediaJob pipeline's use of the same client.
+    """
+    from postiz_client import PostizClient, PostizError, build_instagram_payload
+
+    try:
+        payload = json.loads(approval_row.payload or "{}")
+    except (ValueError, TypeError):
+        payload = {}
+    outcome = payload.get("outcome") or {}
+    target = outcome.get("publish_target")
+    content = (outcome.get("publish_content") or "").strip()
+
+    if target not in PUBLISH_CHANNELS:
+        return {"published": False, "detail": f"publish_target inválido: {target!r}."}
+    if not content:
+        return {
+            "published": False,
+            "detail": "publish_content vazio; o resumo result nunca é publicado como conteúdo.",
+        }
+
+    client = PostizClient.from_env()
+    if client is None:
+        return {
+            "published": False,
+            "detail": "POSTIZ_URL/POSTIZ_API_KEY não configurados no serviço do dashboard.",
+        }
+
+    try:
+        integrations = client.list_integrations()
+    except PostizError as exc:
+        return {"published": False, "detail": f"Falha ao consultar integrações do Postiz: {exc}"}
+
+    integration = client.select_integration(target, integrations)
+    if not integration:
+        return {
+            "published": False,
+            "detail": f"Nenhuma integração Postiz ativa e inequívoca para {target!r}.",
+        }
+
+    media_urls = outcome.get("publish_media") or []
+    if not isinstance(media_urls, list):
+        return {"published": False, "detail": "publish_media deve ser uma lista de URLs HTTPS."}
+    media = []
+    for index, media_url in enumerate(media_urls):
+        if not isinstance(media_url, str) or not client.is_safe_media_url(media_url):
+            return {"published": False, "detail": f"URL de mídia inválida: {media_url!r}."}
+        media.append({"id": f"evonexus-{index}", "path": media_url})
+
+    if target == "instagram" and not media:
+        return {
+            "published": False,
+            "detail": "Instagram requer publish_media com ao menos uma URL HTTPS.",
+        }
+
+    # instagram gets the real per-platform builder (post_type="post" matches
+    # the pre-refactor behavior exactly); every other legacy PUBLISH_CHANNELS
+    # target (linkedin/x/youtube/discord/whatsapp) keeps the old generic
+    # {"__type": target} shape — MediaJob's dedicated builders in
+    # postiz_client.py are for the new pipeline, not this legacy ticket flow.
+    settings = build_instagram_payload(post_type="post") if target == "instagram" else {"__type": target}
+
+    try:
+        created = client.create_post_now(
+            integration_id=integration["id"], content=content, media=media, settings=settings,
+            now_iso_utc=_now_iso(),
+        )
+    except PostizError as exc:
+        return {"published": False, "detail": f"Postiz recusou a publicação: {exc}"}
+
+    post_ids = [item.get("postId") for item in created if isinstance(item, dict) and item.get("postId")]
+    if not post_ids:
+        return {"published": False, "detail": f"Postiz não retornou postId: {created!r}"}
+
+    wait_seconds = float(os.environ.get("POSTIZ_PUBLISH_TIMEOUT_SECONDS", "90"))
+    poll_seconds = max(float(os.environ.get("POSTIZ_PUBLISH_POLL_SECONDS", "3")), 0.1)
+    window = (
+        (datetime.now(timezone.utc) - timedelta(days=1)).isoformat(),
+        (datetime.now(timezone.utc) + timedelta(days=1)).isoformat(),
+    )
+    try:
+        return client.wait_for_publication(
+            post_ids, wait_seconds=wait_seconds, poll_seconds=poll_seconds, window=window
+        )
+    except PostizError as exc:
+        return {"published": False, "detail": f"Falha ao confirmar publicação no Postiz: {exc}"}
+
+
+def _last_review_reset_at(ticket_id: str, conn) -> str | None:
+    """created_at of the most recent 'review_reset' activity for this ticket, if any."""
+    row = conn.execute(
+        "SELECT created_at FROM ticket_activity WHERE ticket_id = ? AND action = 'review_reset' "
+        "ORDER BY created_at DESC LIMIT 1",
+        (ticket_id,),
+    ).fetchone()
+    if not row:
+        return None
+    return row["created_at"] if hasattr(row, "keys") else row[0]
+
+
+def _count_review_bounces(ticket_id: str, conn) -> int:
+    """Count of 'review_bounce' activity since the last 'review_reset' (or all-time if none).
+
+    Scoping to the last reset means a manually-reopened ticket (see
+    review_reset semantics in .claude/rules/tickets.md and routes/tickets.py)
+    starts its bounce budget over, instead of inheriting a stale count from a
+    previous review cycle (Raven-F4a).
+    """
+    since = _last_review_reset_at(ticket_id, conn)
+    if since:
+        row = conn.execute(
+            "SELECT COUNT(*) FROM ticket_activity WHERE ticket_id = ? AND action = 'review_bounce' "
+            "AND created_at > ?",
+            (ticket_id, since),
+        ).fetchone()
+    else:
+        row = conn.execute(
+            "SELECT COUNT(*) FROM ticket_activity WHERE ticket_id = ? AND action = 'review_bounce'",
+            (ticket_id,),
+        ).fetchone()
+    return row[0] if row else 0
+
+
+def _apply_review_verdict(ticket_id: str, agent: str, verdict_obj: dict, conn) -> dict:
+    """Route a parsed review verdict: pass -> resolved; fail -> bounce or exhaust.
+
+    Returns {"verdict": "pass"|"fail", "critique": str, "exhausted": bool, "bounce": int}.
+    """
+    verdict = str(verdict_obj.get("verdict", "")).strip().lower()
+    critique = (verdict_obj.get("critique") or "").strip()
+
+    if verdict == "pass":
+        _move_ticket(ticket_id, "resolved", agent, critique or "Revisão: aprovado.", conn)
+        return {"verdict": "pass", "critique": critique, "exhausted": False, "bounce": 0}
+
+    n = _count_review_bounces(ticket_id, conn)
+    if n < MAX_REVIEW_BOUNCES:
+        _move_ticket(ticket_id, "in_progress", agent,
+                     f"Revisão reprovou: {critique}" if critique else "Revisão reprovou.", conn)
+        import uuid
+        conn.execute(
+            "INSERT INTO ticket_activity (id, ticket_id, actor, action, payload, created_at) "
+            "VALUES (?, ?, ?, ?, ?, ?)",
+            (str(uuid.uuid4()), ticket_id, f"agent:{agent}", "review_bounce",
+             json.dumps({"critique": critique}), _now_iso()),
+        )
+        conn.commit()
+        return {"verdict": "fail", "critique": critique, "exhausted": False, "bounce": n + 1}
+
+    # Bounces exhausted — own blocked_reason ('review_exhausted'), distinct
+    # from 'agent_blocked' (AC8 separates the two semantics, Raven-F4b), plus
+    # an explicit human notification (never the generic blocked queue).
+    conn.execute("UPDATE tickets SET blocked_reason = 'review_exhausted' WHERE id = ?", (ticket_id,))
+    _move_ticket(ticket_id, "blocked", agent,
+                 f"Revisão esgotou {MAX_REVIEW_BOUNCES} tentativas." +
+                 (f" Última crítica: {critique}" if critique else ""), conn)
+    return {"verdict": "fail", "critique": critique, "exhausted": True, "bounce": n}
+
+
+def apply_outcome(heartbeat_id: str, agent: str, result: dict, conn) -> dict | None:
+    """Apply the agent's outcome to the kanban and return a notification spec.
+
+    Returns a dict {kind, ...} describing what (if anything) to notify, or None
+    for silence. The caller (heartbeat_runner) turns this into a Telegram message.
+    """
+    status = result.get("status", "fail")
+
+    # Technical failure of the run itself — surface it compactly, it may be real.
+    if status != "success":
+        return {
+            "kind": "tech_fail",
+            "agent": agent,
+            "heartbeat_id": heartbeat_id,
+            "error": (result.get("error") or "execução falhou")[:300],
+        }
+
+    raw_output = result.get("output") or result.get("result") or result.get("handler_result")
+    outcome = parse_agent_outcome(raw_output)
+    if not outcome:
+        # NVIDIA executed but didn't emit clean JSON → structure it. Try NVIDIA
+        # first (free, json_schema-forced), then Claude as a last resort.
+        outcome = structure_via_nvidia(raw_output, agent, conn)
+    if not outcome:
+        outcome = structure_via_claude(raw_output, agent, conn)
+    if not outcome:
+        return None  # nobody could structure it → silent no-op (no spam)
+
+    action = str(outcome.get("action", "")).strip().lower()
+    ticket_id = outcome.get("ticket_id") or None
+    summary = (outcome.get("result") or "").strip()
+
+    if action == "skip":
+        return None
+
+    if action == "blocked":
+        reason = (outcome.get("blocked_reason") or summary or "sem detalhes").strip()
+        needs = (outcome.get("needs") or "").strip()
+        title = _ticket_title(ticket_id, conn) if ticket_id else ""
+        if ticket_id:
+            _move_ticket(ticket_id, "blocked", agent,
+                         f"Bloqueado: {reason}" + (f"\nPrecisa: {needs}" if needs else ""), conn)
+        return {
+            "kind": "blocked",
+            "agent": agent,
+            "ticket_id": ticket_id or "",
+            "ticket_title": title,
+            "reason": reason,
+            "needs": needs,
+        }
+
+    if action == "work":
+        new_status = _normalize_status(outcome.get("new_status")) or "in_progress"
+        title = _ticket_title(ticket_id, conn) if ticket_id else ""
+
+        # Self-healing review loop (Step 6): a ticket the executor thinks is
+        # done doesn't go straight to resolved — it needs a pass/fail verdict
+        # first. Try to parse one already embedded in this same response
+        # (in-session anthropic path, heartbeat_runner's prompt addendum);
+        # if absent (the nvidia default), fetch one via the read-only HTTP
+        # fallback — never a 2nd invoke_with_fallback.
+        if ticket_id and new_status == "review":
+            _move_ticket(ticket_id, "review", agent, summary or "Trabalho enviado para revisão.", conn)
+            verdict = parse_verdict(raw_output) or verdict_via_nvidia(raw_output, conn)
+            if not verdict:
+                # No reviewer available this run — leave parked in review for
+                # a human or the next wake, rather than silently auto-passing.
+                return {
+                    "kind": "result", "agent": agent, "ticket_title": title,
+                    "new_status": "review", "summary": summary or "Aguardando revisão.",
+                }
+            review = _apply_review_verdict(ticket_id, agent, verdict, conn)
+            if review["verdict"] == "pass":
+                gate = _maybe_park_for_publish(ticket_id, agent, outcome, title, conn)
+                if gate is not None:
+                    return gate
+                return {
+                    "kind": "result", "agent": agent, "ticket_title": title,
+                    "new_status": "resolved", "summary": review["critique"] or "Revisão aprovada.",
+                }
+            if review["exhausted"]:
+                return {
+                    "kind": "blocked", "agent": agent, "ticket_id": ticket_id, "ticket_title": title,
+                    "reason": f"Revisão reprovou {MAX_REVIEW_BOUNCES}x: {review['critique'] or 'sem detalhes'}",
+                    "needs": "Revisar o ticket manualmente — bounces de revisão esgotados.",
+                }
+            return {
+                "kind": "result", "agent": agent, "ticket_title": title,
+                "new_status": "in_progress",
+                "summary": f"Revisão reprovou (bounce {review['bounce']}/{MAX_REVIEW_BOUNCES}): "
+                           f"{review['critique'] or 'sem detalhes'}",
+            }
+
+        if ticket_id:
+            if new_status in ("resolved", "closed"):
+                gate = _maybe_park_for_publish(ticket_id, agent, outcome, title, conn)
+                if gate is not None:
+                    return gate
+            _move_ticket(ticket_id, new_status, agent, summary or "Trabalho realizado.", conn)
+        if not summary:
+            return None  # worked but reported nothing meaningful → stay silent
+        return {
+            "kind": "result",
+            "agent": agent,
+            "ticket_title": title,
+            "new_status": new_status,
+            "summary": summary,
+        }
+
+    return None
diff --git a/dashboard/backend/heartbeat_runner.py b/dashboard/backend/heartbeat_runner.py
index 9966643ba..2000b2b65 100644
--- a/dashboard/backend/heartbeat_runner.py
+++ b/dashboard/backend/heartbeat_runner.py
@@ -36,6 +36,49 @@
 LOGS_DIR = WORKSPACE / "ADWs" / "logs" / "heartbeats"
 AGENTS_DIR = WORKSPACE / ".claude" / "agents"
 
+# Agents that monitor external state (Linear, Stripe, Omie, …) and may have work
+# to do even with an empty ticket inbox. These bypass the empty-inbox cost guard;
+# every other agent skips (without invoking Claude) when it has no assigned work.
+# goal-planner is here for the same reason: it decomposes Goals, not tickets —
+# its own ticket inbox is always empty, so without this it would never run.
+STATE_MONITOR_AGENTS = {
+    "atlas-project", "flux-finance", "goal-planner",
+    # ai-hierarchy-suggestions: same zero-inbox, event-only shape as
+    # goal-planner, one rung each higher in the Mission -> Project -> Goal
+    # -> Ticket chain.
+    "project-planner", "goal-suggester",
+    # growth-content-heartbeat: pixel-social-media's growth heartbeat exists
+    # specifically to top up a Goal's content-ticket queue WHEN IT'S LOW —
+    # the exact case an empty inbox would otherwise cost-guard away.
+    "pixel-social-media",
+}
+
+# Review-loop subagent instructions (goal-ticket-unification Step 6, ADR SPEC
+# 2c): appended to the executor's prompt ONLY when the pre-run active_provider
+# is 'anthropic' (native subagent/Task support). Any other provider (nvidia
+# default) gets none of this — the verdict comes from
+# heartbeat_outcome.verdict_via_nvidia after the run's lock has released.
+_VERDICT_JSON_HINT = (
+    '{"verdict": "pass"|"fail", "critique": "<1-3 frases pt-BR>", '
+    '"blocking_issues": ["<opcional>"], "confidence": "high"|"medium"|"low"}'
+)
+
+REVIEW_LOOP_SUBAGENT_INSTRUCTIONS = f"""
+
+---
+
+## Revisão em sessão (só se você decidir new_status="review")
+
+Se, e SOMENTE se, o `new_status` da sua resposta for "review": ANTES de
+responder, invoque os subagentes `raven-critic` e depois `oath-verifier`
+(Task tool) na MESMA sessão para revisar criticamente o que você acabou de
+entregar. Depois de rodar os dois, decida o veredito final e ANEXE este
+segundo JSON de veredito logo após o JSON de outcome, na mesma resposta (uma
+linha, nada entre eles):
+
+{_VERDICT_JSON_HINT}
+"""
+
 
 def _now_iso() -> str:
     return datetime.now(timezone.utc).strftime("%Y-%m-%dT%H:%M:%S.%fZ")
@@ -80,13 +123,13 @@ def _upsert_heartbeat_from_yaml(heartbeat_id: str) -> dict | None:
             """INSERT OR REPLACE INTO heartbeats
                (id, agent, interval_seconds, max_turns, timeout_seconds,
                 lock_timeout_seconds, wake_triggers, enabled, goal_id,
-                required_secrets, decision_prompt, created_at, updated_at)
-               VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)""",
+                required_secrets, decision_prompt, handler, created_at, updated_at)
+               VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)""",
             (
                 hb.id, hb.agent, hb.interval_seconds, hb.max_turns,
                 hb.timeout_seconds, hb.lock_timeout_seconds,
                 json.dumps(hb.wake_triggers), int(hb.enabled), hb.goal_id,
-                json.dumps(hb.required_secrets), hb.decision_prompt,
+                json.dumps(hb.required_secrets), hb.decision_prompt, hb.handler,
                 now, now,
             ),
         )
@@ -103,7 +146,15 @@ def step1_load_identity(agent: str) -> str:
     agent_file = AGENTS_DIR / f"{agent}.md"
     if not agent_file.exists():
         raise FileNotFoundError(f"Agent file not found: {agent_file}")
-    return agent_file.read_text(encoding="utf-8")
+    content = agent_file.read_text(encoding="utf-8")
+    if content.startswith("---"):
+        parts = content.split("---", 2)
+        if len(parts) == 3:
+            content = parts[2]
+    for marker in ("\n# Persistent Agent Memory", "\n## MEMORY.md"):
+        if marker in content:
+            content = content.split(marker, 1)[0]
+    return content.strip()
 
 
 # ── Step 2: Check approvals (stub) ───────────────────────────────────────────
@@ -129,7 +180,7 @@ def step3_query_inbox(agent: str, conn) -> list:
         rows = conn.execute(
             """SELECT id, title, description, priority, status, goal_id, project_id, created_at
                FROM tickets
-               WHERE assignee_agent = ? AND status IN ('open','in_progress')
+               WHERE assignee_agent = ? AND status IN ('open','in_progress','review')
                AND locked_at IS NULL
                ORDER BY
                  CASE priority
@@ -174,10 +225,45 @@ def step5_atomic_checkout(task_id: str | None, run_id: str, conn) -> bool:
     return True
 
 
+def _load_trigger_payload(trigger_id: str | None, conn) -> dict | None:
+    """Load the JSON payload attached to a non-interval wake trigger, if any.
+
+    e.g. the goal_created trigger's {"goal_id": <id>} — see step6's docstring.
+    """
+    if not trigger_id:
+        return None
+    try:
+        row = conn.execute(
+            "SELECT payload FROM heartbeat_triggers WHERE id = ?", (trigger_id,)
+        ).fetchone()
+    except Exception:
+        return None
+    if not row:
+        return None
+    raw = row["payload"] if hasattr(row, "keys") else row[0]
+    if not raw:
+        return None
+    try:
+        return json.loads(raw)
+    except (json.JSONDecodeError, TypeError):
+        return None
+
+
 # ── Step 6: Assemble context ──────────────────────────────────────────────────
 
-def step6_assemble_context(identity: str, decision_context: dict, goal_id: str | None) -> str:
-    """Build the full prompt for Claude. Injects goal chain (Mission→Project→Goal) if goal_id is set."""
+def step6_assemble_context(
+    identity: str,
+    decision_context: dict,
+    goal_id: str | None,
+    trigger_payload: dict | None = None,
+) -> str:
+    """Build the full prompt for Claude. Injects goal chain (Mission→Project→Goal) if goal_id is set.
+
+    trigger_payload surfaces the data attached to a non-interval wake (e.g. the
+    goal_created trigger's {"goal_id": <id>}, needed by goal-planner to know
+    WHICH goal to decompose — its ticket inbox is always empty, see
+    STATE_MONITOR_AGENTS).
+    """
     inbox_summary = ""
     if decision_context.get("inbox_count", 0) > 0:
         inbox_summary = f"\n\nPending inbox items: {decision_context['inbox_count']}"
@@ -188,16 +274,43 @@ def step6_assemble_context(identity: str, decision_context: dict, goal_id: str |
     if decision_context.get("pending_approvals", 0) > 0:
         approvals_summary = f"\n\nPending approvals: {decision_context['pending_approvals']}"
 
+    trigger_summary = ""
+    if trigger_payload:
+        trigger_summary = f"\n\nTrigger payload: {json.dumps(trigger_payload, ensure_ascii=False)}"
+
     base_prompt = f"""{identity}
 
 ---
 
 ## Heartbeat Decision Context
 
-{decision_context['decision_prompt']}{inbox_summary}{approvals_summary}
+{decision_context['decision_prompt']}{inbox_summary}{approvals_summary}{trigger_summary}
+
+---
+
+## Sua tarefa — responda em UMA única mensagem
+
+Decida o que fazer com o item de MAIOR prioridade da sua inbox acima, usando o que
+você já sabe sobre ele (título e descrição). NÃO narre ("vou fazer", "primeiro
+preciso ler"), NÃO peça para abrir arquivos — DECIDA AGORA e entregue o resultado
+na própria resposta.
 
-Respond concisely. If you decide to work, describe what you are doing.
-If you decide to skip, briefly explain why.
+- `work` — você consegue entregar/avançar agora: uma decisão, um plano objetivo,
+  um texto pronto, uma resposta. Coloque o conteúdo/resultado concreto em `result`
+  e ajuste `new_status`.
+- `blocked` — depende de algo que só o Felipe fornece (credencial, acesso, dado,
+  aprovação, uma decisão dele). Preencha `blocked_reason` e `needs`.
+- `skip` — a inbox está vazia ou nada é acionável agora.
+
+## Responda SOMENTE com este JSON — nada antes, nada depois, tudo em uma linha:
+
+{{"action": "work"|"skip"|"blocked", "ticket_id": "<id da inbox ou null>", "result": "<resultado concreto em pt-BR>", "new_status": "in_progress"|"review"|"resolved"|null, "blocked_reason": "<por que travou, se blocked>", "needs": "<o que precisa do Felipe, se blocked>", "publish_intent": true|false|null, "publish_target": "instagram"|"linkedin"|null, "publish_content": "<texto EXATO a publicar ou null>", "publish_media": ["<URL HTTPS de mídia>"]|null}}
+
+`result` deve dizer o RESULTADO entregue, não "analisei" — ex.: "Plano P0: 3 canais
+(WhatsApp, IG, e-mail), oferta X, 1 post/dia; sucesso = 20 leads", não "vou montar o plano".
+Se `publish_intent=true`, `publish_content` é obrigatório e deve conter o texto
+final completo; nunca coloque somente um resumo em `result`. Para Instagram,
+`publish_media` deve conter ao menos uma URL HTTPS da mídia final.
 """
 
     # Inject goal chain context (F1.2) if goal_id is set
@@ -220,7 +333,74 @@ def step7_invoke_claude(
     max_turns: int,
     timeout_seconds: int,
 ) -> dict:
-    """Invoke Claude via subprocess with hard timeout. Returns result dict."""
+    """Invoke the agent CLI with automatic provider fallback.
+
+    Routes through provider_fallback.invoke_with_fallback so a 429/quota error
+    on the active provider rotates to the next model/provider in the chain
+    (ending at native `claude`) instead of failing the whole heartbeat run.
+
+    Disable with HEARTBEAT_PROVIDER_FALLBACK=0 (or if provider_fallback is
+    unavailable) → falls back to a direct native `claude` call. The returned
+    dict keeps the same contract step8_persist expects.
+    """
+    use_fallback = os.environ.get("HEARTBEAT_PROVIDER_FALLBACK", "1").lower() not in (
+        "0", "false", "no",
+    )
+    if use_fallback:
+        try:
+            from provider_fallback import invoke_with_fallback
+
+            result = invoke_with_fallback(
+                prompt=prompt,
+                max_turns=max_turns,
+                timeout_seconds=timeout_seconds,
+                # The heartbeat prompt already embeds the full agent identity
+                # from .claude/agents/{agent}.md. Passing --agent here breaks
+                # OpenClaude-backed providers, which can misparse the expanded
+                # agent markdown as CLI options.
+                agent="",
+            )
+            # Preserve the step7 contract; provider_fallback already returns
+            # status/output/error/duration_ms/tokens_*/cost_usd and adds
+            # provider_id/model/attempt metadata for observability.
+            result.setdefault("tokens_in", None)
+            result.setdefault("tokens_out", None)
+            result.setdefault("cost_usd", None)
+            if result.get("status") == "success" and result.get("attempt_number", 0) > 1:
+                print(
+                    f"[heartbeat_runner] step7 fallback succeeded via "
+                    f"{result.get('provider_id')}:{result.get('model')} "
+                    f"(attempt #{result.get('attempt_number')})",
+                    flush=True,
+                )
+            elif result.get("status") != "success" and result.get("attempt_number", 0) > 1:
+                print(
+                    f"[heartbeat_runner] step7 fallback exhausted; last "
+                    f"{result.get('provider_id')}:{result.get('model')} "
+                    f"(attempt #{result.get('attempt_number')})",
+                    flush=True,
+                )
+            return result
+        except Exception as exc:
+            print(
+                f"[heartbeat_runner] provider_fallback unavailable ({exc}); "
+                f"using native claude",
+                flush=True,
+            )
+
+    return _step7_invoke_claude_native(agent, prompt, max_turns, timeout_seconds)
+
+
+def _step7_invoke_claude_native(
+    agent: str,
+    prompt: str,
+    max_turns: int,
+    timeout_seconds: int,
+) -> dict:
+    """Invoke native `claude` via subprocess with hard timeout. Returns result dict.
+
+    Legacy direct path — used when provider fallback is disabled or unavailable.
+    """
     import shutil
 
     claude_bin = shutil.which("claude")
@@ -240,6 +420,7 @@ def step7_invoke_claude(
         "--max-turns", str(max_turns),
         "--dangerously-skip-permissions",
         "--output-format", "json",
+        "--",
         prompt,  # positional argument — Claude CLI does not have a -p flag
     ]
 
@@ -250,6 +431,28 @@ def step7_invoke_claude(
     status = "success"
 
     try:
+        # V10: this is the SECOND agent-subprocess call site (the first is
+        # provider_fallback._invoke_cli) — reached when provider fallback is
+        # disabled/unavailable. Without env=_build_agent_run_env(), Popen
+        # inherits the full parent env unfiltered, including
+        # APPROVAL_BRIDGE_TOKEN, making the env-isolation in
+        # provider_fallback.py bypassable just by disabling fallback.
+        # DASHBOARD_API_TOKEN is intentionally NOT denylisted — see the
+        # comment on _AGENT_ENV_DENYLIST_EXACT in provider_fallback.py.
+        try:
+            from provider_fallback import _build_agent_run_env
+            agent_env = _build_agent_run_env()
+        except Exception:
+            # provider_fallback unavailable — apply the same denylist inline
+            # rather than let this fallback become the leak V10 closed.
+            _denylist_exact = {"APPROVAL_BRIDGE_TOKEN", "POSTIZ_API_KEY"}
+            _denylist_prefixes = ("SOCIAL_", "INSTAGRAM_", "LINKEDIN_", "TWITTER_", "DISCORD_")
+            agent_env = {
+                k: v for k, v in os.environ.items()
+                if k not in _denylist_exact and not k.startswith(_denylist_prefixes)
+            }
+            agent_env["DISABLE_AUTOUPDATER"] = "1"
+
         proc = subprocess.Popen(
             cmd,
             stdout=subprocess.PIPE,
@@ -257,6 +460,7 @@ def step7_invoke_claude(
             text=True,
             cwd=str(WORKSPACE),
             start_new_session=True,  # new process group for clean kill
+            env=agent_env,
         )
 
         try:
@@ -354,19 +558,188 @@ def step8_persist(run_id: str, heartbeat_id: str, result: dict, trigger_id: str
 
 # ── Step 9: Release checkout ──────────────────────────────────────────────────
 
-def step9_release_checkout(task_id: str | None, run_id: str, conn):
-    """Release task lock. Stub in F1.1."""
-    if not task_id:
+def step9_release_checkout(ticket_id: str | None, agent_slug: str, conn):
+    """Release ticket lock on the tickets table (Feature 1.3)."""
+    if not ticket_id:
         return
     try:
         conn.execute(
-            """UPDATE tasks SET locked_at = NULL, locked_by = NULL
+            """UPDATE tickets SET locked_at = NULL, locked_by = NULL
                WHERE id = ? AND locked_by = ?""",
-            (task_id, run_id),
+            (ticket_id, agent_slug),
+        )
+        conn.execute(
+            """INSERT INTO ticket_activity (ticket_id, event, actor, metadata)
+               VALUES (?, 'release', ?, '{}')""",
+            (ticket_id, f"agent:{agent_slug}"),
         )
         conn.commit()
-    except Exception:
-        pass  # Table may not exist in F1.1
+    except Exception as exc:
+        print(f"[heartbeat_runner] step9 release WARNING ticket={ticket_id}: {exc}", flush=True)
+
+
+# ── Failure alert (runs between persist and release) ──────────────────────────
+
+def _classify_failure(result: dict) -> str:
+    """Return a short failure category: timeout | provider_exhausted | auth | unknown."""
+    error = (result.get("error") or "").lower()
+    status = result.get("status", "")
+    if status == "timeout":
+        return "timeout"
+    if result.get("fallback_exhausted"):
+        return "provider_exhausted"
+    if any(kw in error for kw in ("401", "403", "unauthorized", "invalid_api_key", "authentication")):
+        return "auth"
+    return "unknown"
+
+
+def step_alert_on_failure(heartbeat_id: str, result: dict) -> bool:
+    """Send a compact alert when a heartbeat run fails. Returns True if sent.
+
+    Alert is sent only for non-success statuses (fail, timeout).
+    Categories: timeout, provider_exhausted, auth, unknown.
+    """
+    status = result.get("status", "success")
+    if status == "success":
+        return False
+
+    category = _classify_failure(result)
+    agent = result.get("agent", heartbeat_id)
+    duration_s = ""
+    if result.get("duration_ms"):
+        duration_s = f"{result['duration_ms'] / 1000:.1f}s"
+
+    error_preview = ""
+    if result.get("error"):
+        error_preview = result["error"][:200].replace("\n", " ")
+
+    # Build compact Telegram message
+    lines = [
+        f"⚠️ <b>Heartbeat Fail</b>",
+        f"",
+        f"🔧 <b>{heartbeat_id}</b>  |  🤖 {agent}",
+        f"📌 Status: <code>{status}</code>  |  🏷 {category}",
+    ]
+    if duration_s:
+        lines.append(f"⏱ {duration_s}")
+    if result.get("provider_id"):
+        lines.append(f"🔗 Provider: {result['provider_id']}:{result.get('model', '?')}")
+    if result.get("attempt_number"):
+        lines.append(f"🔄 Attempt #{result['attempt_number']}")
+    if error_preview:
+        lines.append(f"")
+        lines.append(f"📝 <pre>{error_preview}</pre>")
+
+    text = "\n".join(lines)
+
+    from notifications import send_telegram_alert
+    sent = send_telegram_alert(text)
+    if sent:
+        print(f"[heartbeat_runner] alert sent for {heartbeat_id} fail ({category})", flush=True)
+    else:
+        print(f"[heartbeat_runner] alert NOT sent (Telegram not configured) for {heartbeat_id}", flush=True)
+    return sent
+
+
+# ── Success report ───────────────────────────────────────────────────────────
+
+def _extract_progress_preview(result: dict, limit: int = 3) -> str:
+    """Extract a short user-facing progress preview from provider output."""
+    raw = result.get("result") or result.get("output") or result.get("handler_result") or ""
+    if isinstance(raw, dict):
+        raw = json.dumps(raw, ensure_ascii=False)
+    raw = str(raw).strip()
+    if not raw:
+        return ""
+    if raw.startswith("{"):
+        try:
+            data = json.loads(raw)
+            if isinstance(data, dict):
+                for key in ("summary", "result", "message", "answer", "progress", "report"):
+                    value = data.get(key)
+                    if isinstance(value, str) and value.strip():
+                        raw = value.strip()
+                        break
+        except (json.JSONDecodeError, TypeError):
+            pass
+    lines = [line.strip(" -•*") for line in raw.splitlines()]
+    lines = [line for line in lines if line and not line.lower().startswith(("[fallback]", "stop_reason", "session_id"))]
+    preview_lines = []
+    for line in lines:
+        line = " ".join(line.split())
+        if line and line not in preview_lines:
+            preview_lines.append(line)
+        if len(preview_lines) >= limit:
+            break
+    return "\n".join(f"• {line}" for line in preview_lines[:limit])
+
+
+def _step_report_success(heartbeat_id: str, result: dict) -> bool:
+    """Send a compact Telegram notification when a heartbeat run completes.
+
+    Sent only for status = 'success'.
+    Returns True if sent, False if not (Telegram not configured, status not success).
+    """
+    status = result.get("status", "fail")
+    if status != "success":
+        return False
+
+    # Debounce by heartbeat_id — skip if same heartbeat reported <30s ago
+    _last_reported = getattr(_step_report_success, "_last_sent", {})
+    now = datetime.now(timezone.utc)
+    last = _last_reported.get(heartbeat_id)
+    if last and (now - last).total_seconds() < 30:
+        return False
+    _last_reported[heartbeat_id] = now
+    _step_report_success._last_sent = _last_reported  # type: ignore[attr-defined]
+
+    agent = result.get("agent", heartbeat_id)
+    duration_s = ""
+    if result.get("duration_ms"):
+        duration_s = f"{result['duration_ms'] / 1000:.1f}s"
+
+    cost_str = ""
+    if result.get("cost_usd") is not None and result["cost_usd"] > 0:
+        cost_str = f"  |  💰 US${result['cost_usd']:.4f}"
+
+    provider_str = ""
+    if result.get("provider_id"):
+        provider_str = f"  |  🔗 {result['provider_id']}:{result.get('model', '?')}"
+
+    lines = [
+        f"✅ <b>Heartbeat OK</b>",
+        f"",
+        f"🔧 <b>{heartbeat_id}</b>  |  🤖 {agent}",
+        f"⏱ {duration_s}{cost_str}{provider_str}",
+    ]
+
+    progress = _extract_progress_preview(result)
+    if progress:
+        lines.extend([
+            "",
+            "📌 Progresso:",
+            progress[:650],
+        ])
+    else:
+        lines.extend([
+            "",
+            "📌 Progresso: execução concluída sem saída detalhada.",
+        ])
+
+    if result.get("tokens_in") is not None or result.get("tokens_out") is not None:
+        tok_in = result.get("tokens_in") or 0
+        tok_out = result.get("tokens_out") or 0
+        lines.append(f"📊 Tokens: {tok_in:,} in / {tok_out:,} out")
+
+    text = "\n".join(lines)
+
+    from notifications import send_telegram_alert
+    sent = send_telegram_alert(text)
+    if sent:
+        print(f"[heartbeat_runner] success report sent for {heartbeat_id}", flush=True)
+    else:
+        print(f"[heartbeat_runner] success report NOT sent (Telegram not configured) for {heartbeat_id}", flush=True)
+    return sent
 
 
 # ── System heartbeat dispatcher ───────────────────────────────────────────────
@@ -462,16 +835,50 @@ def run_heartbeat(heartbeat_id: str, triggered_by: str = "manual", trigger_id: s
 
         result = {"status": "fail", "error": None, "duration_ms": None, "agent": hb["agent"]}
         full_prompt = ""
-        task_id = None
-
+        ticket_id = None
         try:
-            # Special case: agent='system' heartbeats run a Python script directly
-            # instead of invoking Claude. The script path is resolved by heartbeat id.
-            if hb["agent"] == "system":
+            # Special case: legacy agent='system' heartbeats without explicit handler
+            # run a Python script directly, resolved by heartbeat id.
+            # System heartbeats with `handler` use the in-process handler path below.
+            if hb["agent"] == "system" and not hb.get("handler"):
                 full_prompt = f"[system heartbeat] {heartbeat_id}"
                 result = _run_system_heartbeat(heartbeat_id, hb["timeout_seconds"])
                 result["agent"] = "system"
                 result["started_at"] = started_at
+            elif hb.get("handler"):
+                # In-process handlers do not have/need a Claude agent identity.
+                _handler_ref = hb.get("handler") or ""
+                full_prompt = f"[handler heartbeat] {heartbeat_id}"
+                print(f"[heartbeat_runner] step7 in-process handler={_handler_ref}", flush=True)
+                import importlib
+                import time as _time
+                _t0 = _time.time()
+                try:
+                    _mod_name, _fn_name = _handler_ref.rsplit(".", 1)
+                    _mod = importlib.import_module(_mod_name)
+                    _fn = getattr(_mod, _fn_name)
+                    _handler_result = _fn()
+                    _duration_ms = round((_time.time() - _t0) * 1000)
+                    result = {
+                        "status": "success",
+                        "error": None,
+                        "agent": hb.get("agent", "system"),
+                        "duration_ms": _duration_ms,
+                        "started_at": started_at,
+                        "handler_result": _handler_result,
+                    }
+                    print(f"[heartbeat_runner] step7 in-process handler done duration_ms={_duration_ms}", flush=True)
+                except Exception as _h_exc:
+                    import traceback
+                    _duration_ms = round((_time.time() - _t0) * 1000)
+                    result = {
+                        "status": "fail",
+                        "error": traceback.format_exc(),
+                        "agent": hb.get("agent", "system"),
+                        "duration_ms": _duration_ms,
+                        "started_at": started_at,
+                    }
+                    print(f"[heartbeat_runner] step7 in-process handler failed: {_h_exc}", flush=True)
             else:
                 # Step 1
                 identity = step1_load_identity(hb["agent"])
@@ -485,74 +892,87 @@ def run_heartbeat(heartbeat_id: str, triggered_by: str = "manual", trigger_id: s
                 inbox = step3_query_inbox(hb["agent"], conn)
                 print(f"[heartbeat_runner] step3 inbox={len(inbox)}", flush=True)
 
+                # Cost guard: executor agents don't burn tokens "deciding to skip".
+                # If there's no assigned work and no pending approvals, skip the
+                # Claude invocation entirely (silent, ~zero cost). State-monitor
+                # agents (Linear/Stripe/etc.) opt out via STATE_MONITOR_AGENTS.
+                if (not inbox and not approvals
+                        and hb["agent"] not in STATE_MONITOR_AGENTS):
+                    print(f"[heartbeat_runner] cost-guard: empty inbox/approvals for {hb['agent']}, skipping without Claude", flush=True)
+                    result = {"status": "success", "error": None, "agent": hb["agent"],
+                              "duration_ms": 0, "output": '{"action":"skip","reason":"no assigned work"}'}
+                    step8_persist(run_id, heartbeat_id, result, trigger_id, triggered_by, "", conn)
+                    return
+
                 # Step 4
                 decision_ctx = step4_pick_priority(identity, approvals, inbox, hb["decision_prompt"])
                 print(f"[heartbeat_runner] step4 decision context assembled", flush=True)
 
-                # Step 5
-                task_id = None  # no specific task in F1.1
-                checkout_ok = step5_atomic_checkout(task_id, run_id, conn)
-                if not checkout_ok:
-                    print(f"[heartbeat_runner] step5 checkout conflict, skipping", flush=True)
-                    result = {"status": "success", "error": None, "agent": hb["agent"], "duration_ms": 0}
-                    step8_persist(run_id, heartbeat_id, result, trigger_id, triggered_by, "", conn)
-                    return
-
                 # Step 6
-                full_prompt = step6_assemble_context(identity, decision_ctx, hb.get("goal_id"))
-                print(f"[heartbeat_runner] step6 prompt assembled ({len(full_prompt)} chars)", flush=True)
-
-                # Step 7 — in-process handler OR Claude CLI subprocess
-                _handler_ref = hb.get("handler") or ""
-                if _handler_ref:
-                    # Wave 2.2r: in-process Python handler (e.g. plugin_integration_health.tick)
-                    # Format: "module_name.function_name"
-                    print(f"[heartbeat_runner] step7 in-process handler={_handler_ref}", flush=True)
-                    import importlib
-                    import time as _time
-                    _t0 = _time.time()
+                trigger_payload = _load_trigger_payload(trigger_id, conn)
+                full_prompt = step6_assemble_context(identity, decision_ctx, hb.get("goal_id"), trigger_payload)
+
+                # Self-healing review loop (Step 6, ADR SPEC 2c): read
+                # active_provider PRE-run (not provider_id, which only
+                # exists post-fallback, Raven-F2) to decide whether the
+                # executor should be asked to review its own "review"-bound
+                # work in-session via subagents. Read-only lookup — does not
+                # touch run_env/Popen construction (Step 4 scope).
+                try:
+                    from provider_fallback import _read_providers_config
+                    active_provider = _read_providers_config().get("active_provider", "nvidia")
+                except Exception:
+                    active_provider = "nvidia"
+                if active_provider == "anthropic":
+                    full_prompt += REVIEW_LOOP_SUBAGENT_INSTRUCTIONS
+                print(f"[heartbeat_runner] step6 prompt assembled ({len(full_prompt)} chars, active_provider={active_provider})", flush=True)
+
+                # Step 7 — Claude CLI subprocess
+                print(f"[heartbeat_runner] step7 invoking claude agent={hb['agent']} max_turns={hb['max_turns']} timeout={hb['timeout_seconds']}s", flush=True)
+                invoke_result = step7_invoke_claude(
+                    agent=hb["agent"],
+                    prompt=full_prompt,
+                    max_turns=hb["max_turns"],
+                    timeout_seconds=hb["timeout_seconds"],
+                )
+                invoke_result["agent"] = hb["agent"]
+                invoke_result["started_at"] = started_at
+                result = invoke_result
+                print(f"[heartbeat_runner] step7 done status={result['status']} duration_ms={result.get('duration_ms')}", flush=True)
+
+                # Extract ticket_id from Claude's JSON output for atomic checkout
+                spec = None
+                if invoke_result.get("status") == "success" and invoke_result.get("output"):
                     try:
-                        _mod_name, _fn_name = _handler_ref.rsplit(".", 1)
-                        _mod = importlib.import_module(_mod_name)
-                        _fn = getattr(_mod, _fn_name)
-                        _handler_result = _fn()
-                        _duration_ms = round((_time.time() - _t0) * 1000)
-                        invoke_result = {
-                            "status": "success",
-                            "error": None,
-                            "agent": hb.get("agent", "system"),
-                            "duration_ms": _duration_ms,
-                            "started_at": started_at,
-                            "handler_result": _handler_result,
-                        }
-                        print(f"[heartbeat_runner] step7 in-process handler done duration_ms={_duration_ms}", flush=True)
-                    except Exception as _h_exc:
-                        import traceback
-                        _duration_ms = round((_time.time() - _t0) * 1000)
-                        invoke_result = {
-                            "status": "fail",
-                            "error": traceback.format_exc(),
-                            "agent": hb.get("agent", "system"),
-                            "duration_ms": _duration_ms,
-                            "started_at": started_at,
-                        }
-                        print(f"[heartbeat_runner] step7 in-process handler failed: {_h_exc}", flush=True)
-                    invoke_result["agent"] = hb.get("agent", "system")
-                    invoke_result["started_at"] = started_at
-                    result = invoke_result
-                else:
-                    # Standard Claude CLI subprocess
-                    print(f"[heartbeat_runner] step7 invoking claude agent={hb['agent']} max_turns={hb['max_turns']} timeout={hb['timeout_seconds']}s", flush=True)
-                    invoke_result = step7_invoke_claude(
-                        agent=hb["agent"],
-                        prompt=full_prompt,
-                        max_turns=hb["max_turns"],
-                        timeout_seconds=hb["timeout_seconds"],
+                        from heartbeat_outcome import parse_agent_outcome
+                        spec = parse_agent_outcome(invoke_result["output"])
+                        if spec and spec.get("action") == "work":
+                            ticket_id = spec.get("ticket_id")
+                    except Exception as parse_exc:
+                        print(f"[heartbeat_runner] WARNING outcome parse failed: {parse_exc}", flush=True)
+
+                # Step 5 (moved after step7 — checkout the ticket Claude chose)
+                if ticket_id:
+                    agent_slug = hb.get("agent", "unknown")
+                    now = _now_iso()
+                    cur = conn.execute(
+                        """UPDATE tickets SET locked_at = ?, locked_by = ?, lock_timeout_seconds = 1800
+                           WHERE id = ? AND locked_at IS NULL""",
+                        (now, agent_slug, ticket_id),
                     )
-                    invoke_result["agent"] = hb["agent"]
-                    invoke_result["started_at"] = started_at
-                    result = invoke_result
-                    print(f"[heartbeat_runner] step7 done status={result['status']} duration_ms={result.get('duration_ms')}", flush=True)
+                    if cur.rowcount == 0:
+                        print(f"[heartbeat_runner] step5 checkout CONFLICT ticket={ticket_id} already locked", flush=True)
+                        ticket_id = None
+                    else:
+                        conn.execute(
+                            """INSERT INTO ticket_activity (ticket_id, event, actor, metadata)
+                               VALUES (?, 'checkout', ?, ?)""",
+                            (ticket_id, f"agent:{agent_slug}", f'{{"run_id":"{run_id}","triggered_by":"{triggered_by}"}}'),
+                        )
+                        conn.commit()
+                        print(f"[heartbeat_runner] step5 checkout OK ticket={ticket_id} agent={agent_slug}", flush=True)
+                else:
+                    print(f"[heartbeat_runner] step5 no ticket to checkout (action={spec.get('action','unknown') if spec else 'no_output'})", flush=True)
 
         except Exception as exc:
             import traceback
@@ -569,8 +989,14 @@ def run_heartbeat(heartbeat_id: str, triggered_by: str = "manual", trigger_id: s
         step8_persist(run_id, heartbeat_id, result, trigger_id, triggered_by, full_prompt, conn)
         print(f"[heartbeat_runner] step8 persisted run_id={run_id} status={result['status']}", flush=True)
 
+        # Notifications — success or failure via centralized module
+        try:
+            _send_heartbeat_notification(heartbeat_id, hb["agent"], result, conn)
+        except Exception as notif_exc:
+            print(f"[heartbeat_runner] notification error (non-fatal): {notif_exc}", flush=True)
+
         # Step 9
-        step9_release_checkout(task_id, run_id, conn)
+        step9_release_checkout(ticket_id, hb["agent"], conn)
         print(f"[heartbeat_runner] step9 checkout released", flush=True)
 
         print(f"[heartbeat_runner] DONE run_id={run_id} status={result['status']}", flush=True)
@@ -581,6 +1007,48 @@ def run_heartbeat(heartbeat_id: str, triggered_by: str = "manual", trigger_id: s
     return run_id
 
 
+def _send_heartbeat_notification(heartbeat_id: str, agent: str, result: dict, conn=None):
+    """Outcome-driven notification + kanban movement.
+
+    Policy (decided with Felipe 2026-06-17): no more "Heartbeat OK". We only
+    message Telegram when an agent actually advanced/finished a task (the result)
+    or got blocked and needs intervention. Skips and empty runs stay silent.
+    See heartbeat_outcome.apply_outcome for the agent JSON contract.
+    """
+    from heartbeat_outcome import apply_outcome
+
+    own_conn = conn is None
+    if own_conn:
+        conn = _get_db()
+    try:
+        spec = apply_outcome(heartbeat_id, agent, result, conn)
+    finally:
+        if own_conn:
+            conn.close()
+
+    if not spec:
+        return  # silence — nothing worth reporting
+
+    kind = spec.get("kind")
+    if kind == "result":
+        from notifications import notify_agent_result
+        notify_agent_result(spec["agent"], spec.get("ticket_title", ""),
+                            spec.get("new_status", ""), spec.get("summary", ""))
+    elif kind == "blocked":
+        from notifications import notify_agent_blocked
+        notify_agent_blocked(spec["agent"], spec.get("ticket_title", ""),
+                            spec.get("reason", ""), spec.get("needs", ""),
+                            ticket_id=spec.get("ticket_id", ""))
+    elif kind == "tech_fail":
+        from notifications import notify_heartbeat_failure
+        notify_heartbeat_failure(
+            heartbeat_id=heartbeat_id, agent=agent,
+            error=spec.get("error", "unknown"),
+            duration_ms=result.get("duration_ms") or 0,
+            attempt=result.get("attempt_number", 0),
+        )
+
+
 def main():
     parser = argparse.ArgumentParser(description="Heartbeat Runner — 9-step proactive agent protocol")
     parser.add_argument("--heartbeat-id", required=True, help="Heartbeat ID (e.g. atlas-4h)")
diff --git a/dashboard/backend/heartbeat_schema.py b/dashboard/backend/heartbeat_schema.py
index 2a797d0da..627b8fd46 100644
--- a/dashboard/backend/heartbeat_schema.py
+++ b/dashboard/backend/heartbeat_schema.py
@@ -10,10 +10,18 @@
 WORKSPACE = Path(__file__).resolve().parent.parent.parent
 
 VALID_WAKE_TRIGGERS = frozenset(
-    {"interval", "new_task", "mention", "manual", "approval_decision"}
+    {
+        "interval", "new_task", "mention", "manual", "approval_decision", "goal_created",
+        # ai-hierarchy-suggestions: same event-driven shape as goal_created,
+        # one rung up the Mission -> Project -> Goal -> Ticket hierarchy.
+        "mission_created", "project_created",
+    }
 )
 
-WakeTrigger = Literal["interval", "new_task", "mention", "manual", "approval_decision"]
+WakeTrigger = Literal[
+    "interval", "new_task", "mention", "manual", "approval_decision", "goal_created",
+    "mission_created", "project_created",
+]
 
 
 class HeartbeatConfig(BaseModel):
@@ -22,14 +30,15 @@ class HeartbeatConfig(BaseModel):
     id: Annotated[str, Field(min_length=1, max_length=100, pattern=r"^[a-z0-9-]+$")]
     agent: Annotated[str, Field(min_length=1, max_length=100)]
     interval_seconds: Annotated[int, Field(ge=60)]
-    max_turns: Annotated[int, Field(ge=1, le=100)] = 10
+    max_turns: Annotated[int, Field(ge=0, le=100)] = 10
     timeout_seconds: Annotated[int, Field(ge=30, le=3600)] = 600
     lock_timeout_seconds: Annotated[int, Field(ge=60)] = 1800
     wake_triggers: Annotated[List[WakeTrigger], Field(min_length=1)]
     enabled: bool = False
     goal_id: Optional[str] = None
     required_secrets: List[str] = Field(default_factory=list)
-    decision_prompt: Annotated[str, Field(min_length=20)]
+    decision_prompt: str
+    handler: Optional[str] = None
     source_plugin: Optional[str] = None  # AC4: set to plugin slug for plugin-contributed heartbeats
 
     @field_validator("agent")
@@ -70,6 +79,18 @@ def triggers_must_be_valid(cls, v: list) -> list:
 
     @model_validator(mode="after")
     def interval_trigger_requires_interval_field(self) -> "HeartbeatConfig":
+        if self.handler:
+            if self.max_turns != 0:
+                raise ValueError("Heartbeats with handler must set max_turns=0")
+            return self
+
+        if self.max_turns < 1:
+            raise ValueError("Claude heartbeats without handler must set max_turns >= 1")
+        if len(self.decision_prompt.strip()) < 20:
+            raise ValueError(
+                "Claude heartbeats without handler must provide decision_prompt "
+                "with at least 20 characters"
+            )
         return self
 
 
diff --git a/dashboard/backend/media_executor.py b/dashboard/backend/media_executor.py
new file mode 100644
index 000000000..b653f6ba5
--- /dev/null
+++ b/dashboard/backend/media_executor.py
@@ -0,0 +1,115 @@
+"""OpenCodeMediaExecutor — runs OpenCode (via OmniRoute) against a MediaJob's
+isolated workspace to produce a HyperFrames composition + publication manifest.
+
+Deliberately thin: all subprocess mechanics (env allowlist/denylist, timeout +
+process-group SIGKILL, cross-platform lock semantics, NDJSON parsing, provider
+fallback chain) live in provider_fallback.py and are reused as-is (ADR-5 in
+workspace/development/features/social-media-production/[C]architecture-*.md)
+— this module only builds the prompt and interprets the result.
+
+The OpenCode process NEVER performs the final render or ffprobe validation
+(briefing Etapa 6): those are deterministic steps the worker runs itself
+after this function returns, via media_render.py. This function's only job
+is getting the agent to produce ./project (the composition) and
+./output/publication_manifest.json inside the job's isolated workspace.
+"""
+
+from __future__ import annotations
+
+from pathlib import Path
+
+from provider_fallback import invoke_with_fallback
+
+# Hard ceiling regardless of caller-provided timeout — MEDIA_JOB_TIMEOUT_SECONDS
+# governs the whole job (composition + render + validation + upload); the
+# composition step alone must leave room for the rest.
+MAX_COMPOSITION_TIMEOUT_SECONDS = 1800
+
+
+class MediaExecutionError(Exception):
+    """Raised when OpenCode fails to produce a usable composition step.
+
+    Carries the raw provider_fallback result dict so callers can persist
+    `last_error`/`attempt_count` on the MediaJob without re-deriving it.
+    """
+
+    def __init__(self, message: str, result: dict | None = None):
+        super().__init__(message)
+        self.result = result or {}
+
+
+def build_composition_prompt(manifest_relpath: str) -> str:
+    """The prompt intentionally references a manifest FILE PATH, never inlines
+    the brief/brand assets/secrets (briefing Etapa 6: 'O prompt do OpenCode
+    deve apontar para arquivos de manifesto, em vez de incluir grandes
+    quantidades de dados e segredos na linha de comando').
+    """
+    return (
+        "Você está operando dentro do workspace isolado deste job de produção de mídia social. "
+        f"Leia o manifesto de entrada em '{manifest_relpath}' (caminho relativo ao seu diretório de "
+        "trabalho atual — não é um caminho absoluto do host).\n\n"
+        "Siga a skill 'social-media-production' do início ao fim:\n"
+        "1. Leia o manifesto do job e o contexto de projeto/campanha nele referenciado.\n"
+        "2. Leia a identidade visual disponível em './input/brand/' (se houver).\n"
+        "3. Selecione a skill HyperFrames apropriada para o formato/plataforma pedidos.\n"
+        "4. Crie o projeto da composição em './project/' (diretório isolado deste job).\n"
+        "5. Use apenas os assets disponíveis em './input/assets/' e './input/brand/' — nunca busque "
+        "mídia externa.\n"
+        "6. Respeite resolução, duração e fps exatos declarados no manifesto; produza legendas "
+        "legíveis em celular quando houver texto na tela.\n"
+        "7. NÃO renderize o vídeo final e NÃO rode ffprobe — o worker faz isso depois, de forma "
+        "determinística.\n"
+        "8. Produza './output/publication_manifest.json' de acordo com o schema documentado na "
+        "skill.\n"
+        "9. Encerre sem publicar nada e sem jamais buscar ou usar credenciais do Postiz.\n"
+    )
+
+
+def run_opencode_media_job(
+    job_workspace: Path,
+    *,
+    manifest_relpath: str = "input/job.json",
+    timeout_seconds: int = 900,
+    force_provider: str | None = None,
+    force_model: str | None = None,
+) -> dict:
+    """Invoke OpenCode (via the OmniRoute-backed provider chain) to produce the
+    composition + publication_manifest.json for one MediaJob.
+
+    Returns the raw provider_fallback result dict on status="success". Raises
+    MediaExecutionError otherwise — callers decide the MediaJob state
+    transition (usually -> retryable_failure, or -> failed after enough
+    attempts).
+    """
+    job_workspace = Path(job_workspace).resolve()
+    manifest_path = job_workspace / manifest_relpath
+    if not manifest_path.is_file():
+        raise MediaExecutionError(f"Manifesto de entrada não encontrado: {manifest_path}")
+
+    effective_timeout = min(int(timeout_seconds), MAX_COMPOSITION_TIMEOUT_SECONDS)
+    prompt = build_composition_prompt(manifest_relpath)
+
+    result = invoke_with_fallback(
+        prompt=prompt,
+        timeout_seconds=effective_timeout,
+        agent="",  # no .claude/agents persona — the social-media-production skill IS the instructions
+        force_provider=force_provider,
+        force_model=force_model,
+        cwd=job_workspace,
+    )
+
+    status = result.get("status")
+    if status != "success":
+        raise MediaExecutionError(
+            f"OpenCode falhou ao gerar a composição (status={status}): {result.get('error')}",
+            result=result,
+        )
+
+    manifest_output = job_workspace / "output" / "publication_manifest.json"
+    if not manifest_output.is_file():
+        raise MediaExecutionError(
+            "OpenCode terminou com sucesso mas não produziu output/publication_manifest.json.",
+            result=result,
+        )
+
+    return result
diff --git a/dashboard/backend/media_manifest.py b/dashboard/backend/media_manifest.py
new file mode 100644
index 000000000..f2074c13d
--- /dev/null
+++ b/dashboard/backend/media_manifest.py
@@ -0,0 +1,87 @@
+"""Schema validation for the agent-produced publication_manifest.json
+(briefing Etapa 5): "Valide esse manifesto com schema. Não confie em paths
+arbitrários fornecidos pelo agente."
+
+The manifest is the only channel through which the OpenCode/HyperFrames
+process hands the render's declared properties back to the worker — every
+field is treated as untrusted input until validated here, and `render_file`
+in particular is resolved through media_workspace.resolve_within() before
+ever being opened.
+"""
+
+from __future__ import annotations
+
+import json
+from pathlib import Path
+
+import jsonschema
+
+from media_workspace import PathSecurityError, resolve_within
+
+PUBLICATION_MANIFEST_SCHEMA = {
+    "type": "object",
+    "required": [
+        "job_id", "render_file", "title", "platform", "format",
+        "width", "height", "fps", "duration_seconds",
+    ],
+    "additionalProperties": True,
+    "properties": {
+        "job_id": {"type": "string", "minLength": 1},
+        "render_file": {"type": "string", "minLength": 1},
+        "title": {"type": "string", "minLength": 1, "maxLength": 500},
+        "caption": {"type": "string"},
+        "platform": {"type": "string", "enum": ["instagram", "youtube", "linkedin", "tiktok"]},
+        "format": {"type": "string", "enum": ["vertical", "horizontal", "square"]},
+        "width": {"type": "integer", "minimum": 1, "maximum": 8192},
+        "height": {"type": "integer", "minimum": 1, "maximum": 8192},
+        "fps": {"type": "integer", "enum": [24, 30, 60]},
+        "duration_seconds": {"type": "number", "exclusiveMinimum": 0, "maximum": 3600},
+        "platform_settings": {
+            "type": "object",
+            "required": ["__type"],
+            "properties": {"__type": {"type": "string", "minLength": 1}},
+        },
+    },
+}
+
+
+class ManifestValidationError(ValueError):
+    pass
+
+
+def validate_manifest_dict(data: dict) -> None:
+    try:
+        jsonschema.validate(instance=data, schema=PUBLICATION_MANIFEST_SCHEMA)
+    except jsonschema.ValidationError as exc:
+        raise ManifestValidationError(f"publication_manifest.json inválido: {exc.message}") from None
+
+
+def load_and_validate_manifest(job_dir: Path, manifest_relpath: str = "output/publication_manifest.json") -> dict:
+    """Load, schema-validate, and return the manifest — plus resolve+return
+    the absolute, workspace-confined path of the declared render_file so
+    callers never do their own ad-hoc path joining on agent-controlled input.
+    """
+    try:
+        manifest_path = resolve_within(job_dir, manifest_relpath)
+    except PathSecurityError as exc:
+        raise ManifestValidationError(str(exc)) from None
+
+    if not manifest_path.is_file():
+        raise ManifestValidationError(f"Manifesto não encontrado: {manifest_path}")
+
+    try:
+        data = json.loads(manifest_path.read_text(encoding="utf-8"))
+    except (json.JSONDecodeError, UnicodeDecodeError) as exc:
+        raise ManifestValidationError(f"publication_manifest.json não é JSON válido: {exc}") from None
+    if not isinstance(data, dict):
+        raise ManifestValidationError("publication_manifest.json deve ser um objeto JSON.")
+
+    validate_manifest_dict(data)
+
+    try:
+        render_path = resolve_within(job_dir, data["render_file"])
+    except PathSecurityError as exc:
+        raise ManifestValidationError(f"render_file inválido: {exc}") from None
+
+    data["_resolved_render_path"] = str(render_path)
+    return data
diff --git a/dashboard/backend/media_render.py b/dashboard/backend/media_render.py
new file mode 100644
index 000000000..a97cc274b
--- /dev/null
+++ b/dashboard/backend/media_render.py
@@ -0,0 +1,99 @@
+"""Deterministic HyperFrames render step.
+
+Runs directly on the worker (never delegated back to the agent) — briefing
+Etapa 6: "A renderização final e a validação podem ser executadas pelo
+worker depois que o OpenCode terminar, para que etapas críticas sejam
+determinísticas." CLI flags below are taken verbatim from the HyperFrames
+CLI reference (`npx hyperframes render --help`; see
+`.claude/skills/hyperframes-cli/SKILL.md`), not guessed.
+"""
+
+from __future__ import annotations
+
+import shutil
+import subprocess
+from pathlib import Path
+
+VALID_FPS = (24, 30, 60)
+VALID_QUALITY = ("draft", "standard", "high")
+
+
+class RenderError(Exception):
+    def __init__(self, message: str, log: str = ""):
+        super().__init__(message)
+        self.log = log
+
+
+def _resolve_hyperframes_bin(project_dir: Path) -> str:
+    """Prefer the project-local install (deterministic, pinned via
+    package.json/lockfile — briefing Etapa 4) over a bare `hyperframes` on
+    PATH.
+    """
+    local_bin = project_dir / "node_modules" / ".bin" / "hyperframes"
+    if local_bin.is_file():
+        return str(local_bin)
+    global_bin = shutil.which("hyperframes")
+    if global_bin:
+        return global_bin
+    raise RenderError("Binário hyperframes não encontrado (nem local em node_modules/.bin, nem no PATH).")
+
+
+def render_composition(
+    project_dir: Path,
+    output_path: Path,
+    *,
+    fps: int,
+    quality: str = "high",
+    format_: str = "mp4",
+    timeout_seconds: int = 900,
+    strict: bool = True,
+) -> dict:
+    project_dir = Path(project_dir).resolve()
+    output_path = Path(output_path).resolve()
+    if fps not in VALID_FPS:
+        raise ValueError(f"fps inválido para HyperFrames: {fps!r} (aceita {VALID_FPS})")
+    if quality not in VALID_QUALITY:
+        raise ValueError(f"quality inválida: {quality!r} (aceita {VALID_QUALITY})")
+
+    binary = _resolve_hyperframes_bin(project_dir)
+    output_path.parent.mkdir(parents=True, exist_ok=True)
+    cmd = [
+        binary, "render",
+        "--output", str(output_path),
+        "--fps", str(fps),
+        "--quality", quality,
+        "--format", format_,
+    ]
+    if strict:
+        cmd.append("--strict")
+
+    try:
+        proc = subprocess.run(
+            cmd, cwd=str(project_dir), capture_output=True, text=True, timeout=timeout_seconds
+        )
+    except subprocess.TimeoutExpired as exc:
+        log = (exc.stdout or "") + (exc.stderr or "")
+        raise RenderError(f"hyperframes render excedeu {timeout_seconds}s", log=log) from None
+
+    log = (proc.stdout or "") + "\n" + (proc.stderr or "")
+    if proc.returncode != 0:
+        raise RenderError(f"hyperframes render saiu com código {proc.returncode}", log=log)
+    if not output_path.is_file():
+        raise RenderError("hyperframes render retornou código 0 mas não produziu o arquivo de saída.", log=log)
+    return {"log": log, "output_path": str(output_path)}
+
+
+def run_doctor(cwd: Path, timeout_seconds: int = 60) -> dict:
+    """`hyperframes doctor` — environment diagnostic (Chrome/FFmpeg/Node/memory).
+    Used both by the Docker image build-time test (Etapa 4) and by the
+    worker's own startup health check.
+    """
+    binary = _resolve_hyperframes_bin(Path(cwd))
+    try:
+        proc = subprocess.run(
+            [binary, "doctor"], cwd=str(cwd), capture_output=True, text=True, timeout=timeout_seconds
+        )
+    except subprocess.TimeoutExpired as exc:
+        return {"ok": False, "log": (exc.stdout or "") + (exc.stderr or "")}
+    log = (proc.stdout or "") + "\n" + (proc.stderr or "")
+    return {"ok": proc.returncode == 0, "log": log}
diff --git a/dashboard/backend/media_state_machine.py b/dashboard/backend/media_state_machine.py
new file mode 100644
index 000000000..ac4e1058d
--- /dev/null
+++ b/dashboard/backend/media_state_machine.py
@@ -0,0 +1,90 @@
+"""MediaJob state machine — explicit transition matrix (Feature: social-media-production).
+
+SQLite CHECK constrains the *domain* of `media_jobs.status` values but has no
+concept of valid transitions. This module is the single source of truth for
+"can status X move to status Y" — every route that mutates `MediaJob.status`
+must go through `assert_transition()` instead of writing the column directly,
+mirroring how `tickets` routes never bypass `has_permission()`.
+"""
+
+from __future__ import annotations
+
+MEDIA_JOB_STATES = (
+    "queued",
+    "preparing",
+    "generating",
+    "rendering",
+    "validating",
+    "ready_for_review",
+    "rejected",
+    "approved",
+    "uploading",
+    "creating_draft",
+    "draft_created",
+    "scheduling",
+    "scheduled",
+    "published",
+    "retryable_failure",
+    "failed",
+    "cancelled",
+)
+
+# Terminal states — no outgoing transition except explicit re-queue handled
+# by the route layer (a brand-new attempt_count cycle, not a raw transition).
+TERMINAL_STATES = frozenset({"published", "failed", "cancelled"})
+
+# Adjacency: state -> set of states it may transition into.
+MEDIA_JOB_TRANSITIONS: dict[str, frozenset[str]] = {
+    "queued": frozenset({"preparing", "cancelled", "failed"}),
+    "preparing": frozenset({"generating", "retryable_failure", "failed", "cancelled"}),
+    "generating": frozenset({"rendering", "retryable_failure", "failed", "cancelled"}),
+    "rendering": frozenset({"validating", "retryable_failure", "failed", "cancelled"}),
+    "validating": frozenset({"ready_for_review", "retryable_failure", "failed"}),
+    "ready_for_review": frozenset({"approved", "rejected", "cancelled"}),
+    "rejected": frozenset({"queued"}),  # explicit "recriar" re-queues from scratch
+    "approved": frozenset({"uploading", "cancelled"}),
+    "uploading": frozenset({"creating_draft", "retryable_failure", "failed"}),
+    "creating_draft": frozenset({"draft_created", "retryable_failure", "failed"}),
+    "draft_created": frozenset({"scheduling"}),
+    "scheduling": frozenset({"scheduled", "retryable_failure", "failed"}),
+    "scheduled": frozenset({"published", "retryable_failure", "failed"}),
+    "published": frozenset(),
+    "retryable_failure": frozenset({"preparing", "generating", "rendering", "validating",
+                                     "uploading", "creating_draft", "scheduling", "failed", "cancelled"}),
+    "failed": frozenset(),
+    "cancelled": frozenset(),
+}
+
+assert set(MEDIA_JOB_TRANSITIONS) == set(MEDIA_JOB_STATES)
+
+
+class InvalidTransition(ValueError):
+    def __init__(self, current: str, target: str):
+        self.current = current
+        self.target = target
+        allowed = sorted(MEDIA_JOB_TRANSITIONS.get(current, frozenset()))
+        super().__init__(
+            f"Cannot move MediaJob from '{current}' to '{target}'. "
+            f"Allowed from '{current}': {allowed or '(terminal state)'}"
+        )
+
+
+def assert_transition(current: str, target: str) -> None:
+    """Raise InvalidTransition if current -> target is not an allowed edge."""
+    if target not in MEDIA_JOB_STATES:
+        raise InvalidTransition(current, target)
+    allowed = MEDIA_JOB_TRANSITIONS.get(current, frozenset())
+    if target not in allowed:
+        raise InvalidTransition(current, target)
+
+
+def can_transition(current: str, target: str) -> bool:
+    try:
+        assert_transition(current, target)
+        return True
+    except InvalidTransition:
+        return False
+
+
+def allowed_targets(current: str) -> list[str]:
+    return sorted(MEDIA_JOB_TRANSITIONS.get(current, frozenset()))
diff --git a/dashboard/backend/media_validation.py b/dashboard/backend/media_validation.py
new file mode 100644
index 000000000..554277a6c
--- /dev/null
+++ b/dashboard/backend/media_validation.py
@@ -0,0 +1,157 @@
+"""MP4 validation via ffprobe (briefing Etapa 8).
+
+A MediaJob is never allowed to reach `ready_for_review` on the strength of a
+render process's exit code alone — every field declared in the job's
+manifest (resolution, duration, fps, audio presence) is independently
+re-derived from the actual file with ffprobe and compared.
+"""
+
+from __future__ import annotations
+
+import json
+import subprocess
+from dataclasses import dataclass
+from pathlib import Path
+
+ALLOWED_VIDEO_CODECS = frozenset({"h264", "hevc"})
+DURATION_TOLERANCE_SECONDS = 0.75
+FPS_TOLERANCE = 1.0
+DEFAULT_MAX_SIZE_BYTES = 1024 * 1024 * 1024  # 1 GiB, overridden by MEDIA_MAX_FILE_SIZE_BYTES
+
+
+class ValidationError(ValueError):
+    """A specific, human-readable reason the render failed validation."""
+
+
+@dataclass
+class VideoMetadata:
+    duration_seconds: float
+    width: int
+    height: int
+    fps: float
+    video_codec: str
+    has_audio: bool
+    size_bytes: int
+    format_name: str
+
+    def to_dict(self) -> dict:
+        return {
+            "render_duration_seconds": self.duration_seconds,
+            "render_width": self.width,
+            "render_height": self.height,
+            "render_fps": round(self.fps),
+            "render_has_audio": self.has_audio,
+            "render_size_bytes": self.size_bytes,
+        }
+
+
+def _run_ffprobe(path: Path, timeout_seconds: int = 60) -> dict:
+    cmd = ["ffprobe", "-v", "error", "-print_format", "json", "-show_format", "-show_streams", str(path)]
+    try:
+        proc = subprocess.run(cmd, capture_output=True, text=True, timeout=timeout_seconds)
+    except subprocess.TimeoutExpired:
+        raise ValidationError(f"ffprobe excedeu {timeout_seconds}s") from None
+    except FileNotFoundError:
+        raise ValidationError("ffprobe não encontrado no PATH do worker.") from None
+    if proc.returncode != 0:
+        raise ValidationError(f"ffprobe falhou (exit {proc.returncode}): {(proc.stderr or '')[:500]}")
+    try:
+        return json.loads(proc.stdout)
+    except json.JSONDecodeError:
+        raise ValidationError("ffprobe retornou JSON inválido.") from None
+
+
+def _parse_fps(rate: str) -> float:
+    if not rate or rate == "0/0":
+        return 0.0
+    if "/" in rate:
+        num, den = rate.split("/", 1)
+        den_f = float(den)
+        return float(num) / den_f if den_f else 0.0
+    return float(rate)
+
+
+def extract_metadata(path: Path) -> VideoMetadata:
+    path = Path(path)
+    if not path.is_file():
+        raise ValidationError(f"Arquivo não encontrado ou não é um arquivo regular: {path}")
+
+    size_bytes = path.stat().st_size
+    if size_bytes <= 0:
+        raise ValidationError("Arquivo vazio (0 bytes).")
+
+    probe = _run_ffprobe(path)
+    fmt = probe.get("format") or {}
+    streams = probe.get("streams") or []
+    video_streams = [s for s in streams if s.get("codec_type") == "video"]
+    audio_streams = [s for s in streams if s.get("codec_type") == "audio"]
+    if not video_streams:
+        raise ValidationError("Nenhum stream de vídeo encontrado no arquivo.")
+    v = video_streams[0]
+
+    duration_raw = fmt.get("duration") or v.get("duration") or "0"
+    try:
+        duration = float(duration_raw)
+    except (TypeError, ValueError):
+        duration = 0.0
+
+    return VideoMetadata(
+        duration_seconds=duration,
+        width=int(v.get("width") or 0),
+        height=int(v.get("height") or 0),
+        fps=_parse_fps(v.get("r_frame_rate", "0/0")),
+        video_codec=str(v.get("codec_name") or ""),
+        has_audio=bool(audio_streams),
+        size_bytes=size_bytes,
+        format_name=str(fmt.get("format_name") or ""),
+    )
+
+
+def validate_mp4(
+    path: Path,
+    *,
+    expected_width: int,
+    expected_height: int,
+    expected_duration_seconds: float,
+    expected_fps: int,
+    max_size_bytes: int = DEFAULT_MAX_SIZE_BYTES,
+    require_audio: bool | None = None,
+    workspace_root: Path | None = None,
+) -> VideoMetadata:
+    """Raises ValidationError with the specific failing rule. Never treats a
+    render process's exit code as sufficient on its own — every rule below is
+    independently checked against the actual bytes on disk.
+    """
+    path = Path(path).resolve()
+    if workspace_root is not None:
+        workspace_root = Path(workspace_root).resolve()
+        if workspace_root != path and workspace_root not in path.parents:
+            raise ValidationError(f"Path do render fora do workspace do job: {path}")
+
+    meta = extract_metadata(path)
+
+    if meta.size_bytes > max_size_bytes:
+        raise ValidationError(f"Arquivo excede o tamanho máximo permitido: {meta.size_bytes} > {max_size_bytes} bytes")
+    if "mp4" not in meta.format_name and "mov" not in meta.format_name:
+        raise ValidationError(f"Container inesperado: {meta.format_name!r} (esperado mp4)")
+    if meta.video_codec not in ALLOWED_VIDEO_CODECS:
+        raise ValidationError(
+            f"Codec de vídeo não permitido: {meta.video_codec!r} (aceita {sorted(ALLOWED_VIDEO_CODECS)})"
+        )
+    if meta.width != expected_width or meta.height != expected_height:
+        raise ValidationError(
+            f"Resolução {meta.width}x{meta.height} não bate com o esperado {expected_width}x{expected_height}"
+        )
+    if abs(meta.duration_seconds - expected_duration_seconds) > DURATION_TOLERANCE_SECONDS:
+        raise ValidationError(
+            f"Duração {meta.duration_seconds:.2f}s fora da tolerância de "
+            f"{expected_duration_seconds:.2f}s (±{DURATION_TOLERANCE_SECONDS}s)"
+        )
+    if abs(meta.fps - expected_fps) > FPS_TOLERANCE:
+        raise ValidationError(f"FPS {meta.fps:.2f} fora da tolerância de {expected_fps} (±{FPS_TOLERANCE})")
+    if require_audio is True and not meta.has_audio:
+        raise ValidationError("Áudio esperado (require_audio=True) mas ausente no render.")
+    if require_audio is False and meta.has_audio:
+        raise ValidationError("Áudio presente no render mas não esperado (require_audio=False).")
+
+    return meta
diff --git a/dashboard/backend/media_workspace.py b/dashboard/backend/media_workspace.py
new file mode 100644
index 000000000..d112b93c3
--- /dev/null
+++ b/dashboard/backend/media_workspace.py
@@ -0,0 +1,139 @@
+"""Per-job persistent workspace management for MediaJob (social-media-production).
+
+Layout (briefing Etapa 7):
+
+    MEDIA_WORKSPACE/jobs/<job-id>/
+        input/job.json          # manifest the backend writes for OpenCode to read
+        input/brand/            # visual identity assets, copied in (allowlisted types)
+        input/assets/           # other authorized assets
+        project/                # HyperFrames composition, authored by OpenCode
+        output/final.mp4
+        output/publication_manifest.json
+        logs/opencode.ndjson
+        logs/render.log
+
+Every function here enforces "a job can only touch its own directory" — no
+path derived from a manifest, an uploaded filename, or a job_id must ever be
+allowed to resolve outside MEDIA_WORKSPACE/jobs/<job-id>/.
+"""
+
+from __future__ import annotations
+
+import hashlib
+import os
+import re
+import uuid
+from pathlib import Path
+
+ALLOWED_ASSET_EXTENSIONS = frozenset({
+    ".png", ".jpg", ".jpeg", ".webp", ".svg", ".gif",
+    ".mp4", ".mov", ".webm",
+    ".mp3", ".wav", ".m4a",
+    ".ttf", ".otf", ".woff", ".woff2",
+    ".json",
+})
+
+_JOB_ID_RE = re.compile(r"^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$")
+_SAFE_NAME_RE = re.compile(r"[^A-Za-z0-9._-]+")
+
+
+class PathSecurityError(ValueError):
+    """Raised whenever a resolved path would escape the job's own workspace."""
+
+
+def media_workspace_root() -> Path:
+    return Path(os.environ.get("MEDIA_WORKSPACE", "/workspace/media")).resolve()
+
+
+def new_job_id() -> str:
+    return str(uuid.uuid4())
+
+
+def is_valid_job_id(job_id: str) -> bool:
+    return bool(job_id) and bool(_JOB_ID_RE.match(job_id))
+
+
+def job_dir(job_id: str) -> Path:
+    """The root directory for one job. Never accepts anything but a
+    server-generated uuid4 — job_id is never taken from client-controlled
+    path segments beyond the DB primary key itself.
+    """
+    if not is_valid_job_id(job_id):
+        raise PathSecurityError(f"job_id inválido (esperado uuid4): {job_id!r}")
+    return media_workspace_root() / "jobs" / job_id
+
+
+def ensure_job_scaffold(job_id: str) -> Path:
+    base = job_dir(job_id)
+    for sub in ("input/brand", "input/assets", "project", "output", "logs"):
+        (base / sub).mkdir(parents=True, exist_ok=True)
+    _link_skills_dir(base)
+    return base
+
+
+def _link_skills_dir(job_workspace: Path) -> None:
+    """Make the HyperFrames + social-media-production skills discoverable at
+    `<job_workspace>/.claude/skills/` — OpenCode's `skill` tool looks for
+    skills relative to its cwd (same convention as Claude Code), and
+    media_executor.run_opencode_media_job() always runs with
+    cwd=job_workspace (ADR-5/ADR-6). A symlink avoids copying the skill
+    catalog into every job directory. Best-effort: a job scaffold must never
+    fail just because this convenience symlink couldn't be created (e.g. the
+    shared skills dir isn't mounted yet in a dev environment).
+    """
+    skills_source = Path(os.environ.get("MEDIA_SKILLS_DIR", "/workspace/.claude/skills-media"))
+    if not skills_source.is_dir():
+        return
+    claude_dir = job_workspace / ".claude"
+    claude_dir.mkdir(parents=True, exist_ok=True)
+    link_path = claude_dir / "skills"
+    if link_path.is_symlink() or link_path.exists():
+        return
+    try:
+        link_path.symlink_to(skills_source, target_is_directory=True)
+    except OSError:
+        pass
+
+
+def resolve_within(base: Path, relative_path: str) -> Path:
+    """Resolve `relative_path` against `base` and refuse anything that
+    escapes it — rejects absolute paths, `..` traversal, and symlink escapes.
+    This is the single choke point for any path an agent or a manifest hands
+    back to the backend (briefing: 'não aceite paths absolutos enviados pelo
+    agente').
+    """
+    base = base.resolve()
+    if Path(relative_path).is_absolute():
+        raise PathSecurityError(f"Path absoluto não permitido: {relative_path!r}")
+    candidate = (base / relative_path).resolve()
+    if candidate != base and base not in candidate.parents:
+        raise PathSecurityError(f"Path escapa do workspace do job: {relative_path!r}")
+    return candidate
+
+
+def safe_asset_filename(original_name: str) -> str:
+    """Sanitize an uploaded/asset filename: strip directory components,
+    replace unsafe characters, and enforce an extension allowlist.
+    """
+    name = Path(original_name).name  # drop any directory component
+    ext = Path(name).suffix.lower()
+    if ext not in ALLOWED_ASSET_EXTENSIONS:
+        raise PathSecurityError(f"Extensão de asset não permitida: {ext!r}")
+    stem = _SAFE_NAME_RE.sub("_", Path(name).stem).strip("._") or "asset"
+    return f"{stem}{ext}"
+
+
+def sha256_file(path: Path, chunk_size: int = 1024 * 1024) -> str:
+    """Stream the file in chunks — never loads the whole video into memory."""
+    digest = hashlib.sha256()
+    with Path(path).open("rb") as fh:
+        while True:
+            chunk = fh.read(chunk_size)
+            if not chunk:
+                break
+            digest.update(chunk)
+    return digest.hexdigest()
+
+
+def retention_cutoff_days() -> int:
+    return int(os.environ.get("MEDIA_RETENTION_DAYS", "7"))
diff --git a/dashboard/backend/models.py b/dashboard/backend/models.py
index a151bcd81..18d415633 100644
--- a/dashboard/backend/models.py
+++ b/dashboard/backend/models.py
@@ -116,6 +116,7 @@ class LoginThrottle(db.Model):
     "heartbeats": ["view", "execute", "manage"],
     "goals": ["view", "execute", "manage"],
     "tickets": ["view", "execute", "manage"],
+    "media_jobs": ["view", "execute", "manage"],
 }
 
 # Agent layer mapping (file-stem names)
@@ -194,6 +195,7 @@ class LoginThrottle(db.Model):
             "knowledge": ["view", "manage"],
             "heartbeats": ["view", "execute"],
             "tickets": ["view", "execute"],
+            "media_jobs": ["view", "execute"],
         },
     },
     "viewer": {
@@ -219,6 +221,7 @@ class LoginThrottle(db.Model):
             "knowledge": ["view"],
             "heartbeats": ["view"],
             "tickets": ["view"],
+            "media_jobs": ["view"],
         },
     },
 }
@@ -498,6 +501,7 @@ class Heartbeat(db.Model):
     goal_id = db.Column(db.String(100), nullable=True)  # FK stub for Feature 1.2
     required_secrets = db.Column(db.Text, nullable=True, default="[]")  # JSON array
     decision_prompt = db.Column(db.Text, nullable=False)
+    handler = db.Column(db.Text, nullable=True)  # Python handler path (e.g., "plugin_integration_health.tick")
     source_plugin = db.Column(db.Text, nullable=True)  # Wave 1.1: plugin slug if contributed by a plugin
     created_at = db.Column(db.String(30), default=lambda: datetime.now(timezone.utc).strftime("%Y-%m-%dT%H:%M:%S.%fZ"))
     updated_at = db.Column(db.String(30), default=lambda: datetime.now(timezone.utc).strftime("%Y-%m-%dT%H:%M:%S.%fZ"), onupdate=lambda: datetime.now(timezone.utc).strftime("%Y-%m-%dT%H:%M:%S.%fZ"))
@@ -628,6 +632,7 @@ class Mission(db.Model):
     current_value = db.Column(db.Float, nullable=False, default=0)
     due_date = db.Column(db.String(20))
     status = db.Column(db.String(20), nullable=False, default="active")
+    completed_at = db.Column(db.String(30), nullable=True)
     created_at = db.Column(db.String(30), nullable=False)
     updated_at = db.Column(db.String(30), nullable=False)
 
@@ -644,6 +649,7 @@ def to_dict(self, include_projects=False):
             "current_value": self.current_value,
             "due_date": self.due_date,
             "status": self.status,
+            "completed_at": self.completed_at,
             "created_at": self.created_at,
             "updated_at": self.updated_at,
         }
@@ -662,6 +668,7 @@ class GoalProject(db.Model):
     description = db.Column(db.Text)
     workspace_folder_path = db.Column(db.String(500))
     status = db.Column(db.String(20), nullable=False, default="active")
+    completed_at = db.Column(db.String(30), nullable=True)
     created_at = db.Column(db.String(30), nullable=False)
     updated_at = db.Column(db.String(30), nullable=False)
 
@@ -676,6 +683,7 @@ def to_dict(self, include_goals=False):
             "description": self.description,
             "workspace_folder_path": self.workspace_folder_path,
             "status": self.status,
+            "completed_at": self.completed_at,
             "created_at": self.created_at,
             "updated_at": self.updated_at,
         }
@@ -698,6 +706,13 @@ class Goal(db.Model):
     current_value = db.Column(db.Float, nullable=False, default=0.0)
     due_date = db.Column(db.String(20))
     status = db.Column(db.String(20), nullable=False, default="active")
+    completed_at = db.Column(db.String(30), nullable=True)
+    # Self-FK for agent-authored sub-goals (goal-ticket-unification). NULL =
+    # top-level, human-created goal; set = sub-goal proposed by goal-planner.
+    parent_goal_id = db.Column(db.Integer, db.ForeignKey("goals.id", ondelete="SET NULL"), nullable=True)
+    # NULL for top-level goals; 'proposed'|'approved'|'rejected' for sub-goals
+    # awaiting/past the decomposition-gate Telegram approval.
+    decomposition_state = db.Column(db.String(20), nullable=True)
     created_at = db.Column(db.String(30), nullable=False)
     updated_at = db.Column(db.String(30), nullable=False)
 
@@ -716,6 +731,9 @@ def to_dict(self, include_tasks=False):
             "current_value": self.current_value,
             "due_date": self.due_date,
             "status": self.status,
+            "completed_at": self.completed_at,
+            "parent_goal_id": self.parent_goal_id,
+            "decomposition_state": self.decomposition_state,
             "created_at": self.created_at,
             "updated_at": self.updated_at,
         }
@@ -737,6 +755,8 @@ class GoalTask(db.Model):
     locked_at = db.Column(db.String(30))
     locked_by = db.Column(db.String(100))
     due_date = db.Column(db.String(20))
+    started_at = db.Column(db.String(30), nullable=True)
+    completed_at = db.Column(db.String(30), nullable=True)
     created_at = db.Column(db.String(30), nullable=False)
     updated_at = db.Column(db.String(30), nullable=False)
 
@@ -752,6 +772,8 @@ def to_dict(self):
             "locked_at": self.locked_at,
             "locked_by": self.locked_by,
             "due_date": self.due_date,
+            "started_at": self.started_at,
+            "completed_at": self.completed_at,
             "created_at": self.created_at,
             "updated_at": self.updated_at,
         }
@@ -792,6 +814,16 @@ class Ticket(db.Model):
     priority_rank = db.Column(db.Integer, nullable=False, default=2)  # derived
     project_id = db.Column(db.Integer, db.ForeignKey("projects.id", ondelete="SET NULL"), nullable=True)
     goal_id = db.Column(db.Integer, db.ForeignKey("goals.id", ondelete="SET NULL"), nullable=True)
+    # Legacy FK to the goal_task this ticket used to mirror. goal_tasks is now
+    # frozen (goal-ticket-unification): current_value is computed solely from
+    # tickets.goal_id (see heartbeat_outcome._recompute_goal_from_tickets),
+    # so task_id is read-only historical linkage, not a rollup input.
+    task_id = db.Column(db.Integer, db.ForeignKey("goal_tasks.id", ondelete="SET NULL"), nullable=True)
+    due_date = db.Column(db.String(20), nullable=True)
+    requires_human_approval = db.Column(db.Integer, nullable=False, default=0)
+    # App-level enum (no CHECK constraint): 'pending_human_approval' |
+    # 'agent_blocked' | 'review_exhausted'. See .claude/rules/tickets.md.
+    blocked_reason = db.Column(db.String(30), nullable=True)
     assignee_agent = db.Column(db.String(100), nullable=True)
     locked_at = db.Column(db.String(30), nullable=True)
     locked_by = db.Column(db.String(100), nullable=True)
@@ -822,6 +854,10 @@ def to_dict(self):
             "priority_rank": self.priority_rank,
             "project_id": self.project_id,
             "goal_id": self.goal_id,
+            "task_id": self.task_id,
+            "due_date": self.due_date,
+            "requires_human_approval": self.requires_human_approval,
+            "blocked_reason": self.blocked_reason,
             "assignee_agent": self.assignee_agent,
             "locked_at": self.locked_at,
             "locked_by": self.locked_by,
@@ -842,6 +878,201 @@ def to_dict(self):
         }
 
 
+class PendingApproval(db.Model):
+    """Shared publish + decomposition Telegram approval gate (goal-ticket-unification)."""
+
+    __tablename__ = "pending_approvals"
+    __table_args__ = (
+        db.CheckConstraint(
+            "gate_type IN ('publish','decomposition','project_suggestion','goal_suggestion')",
+            name="ck_approval_gate_type",
+        ),
+        db.CheckConstraint(
+            "status IN ('pending','approved','rejected','expired','published')",
+            name="ck_approval_status",
+        ),
+    )
+
+    id = db.Column(db.Integer, primary_key=True, autoincrement=True)
+    gate_type = db.Column(db.String(20), nullable=False)
+    ticket_id = db.Column(db.String(36), db.ForeignKey("tickets.id", ondelete="CASCADE"), nullable=True)
+    goal_id = db.Column(db.Integer, db.ForeignKey("goals.id", ondelete="CASCADE"), nullable=True)
+    # ai-hierarchy-suggestions (Mission -> Wing... no, Mission -> Project
+    # suggestion, Project -> Goal suggestion): the "parent" for those two
+    # gate_types isn't a goal, so they get their own FK columns rather than
+    # overloading goal_id (an unrelated mission/project id could numerically
+    # collide with a real goal id and trigger the wrong ON DELETE CASCADE).
+    mission_id = db.Column(db.Integer, db.ForeignKey("missions.id", ondelete="CASCADE"), nullable=True)
+    project_id = db.Column(db.Integer, db.ForeignKey("projects.id", ondelete="CASCADE"), nullable=True)
+    agent = db.Column(db.String(100), nullable=True)
+    attempt = db.Column(db.Integer, nullable=False, default=0)
+    idempotency_key = db.Column(db.String(200), unique=True, nullable=False)
+    status = db.Column(db.String(20), nullable=False, default="pending")
+    payload = db.Column(db.Text, nullable=True)
+    telegram_chat_id = db.Column(db.String(50), nullable=True)
+    telegram_message_id = db.Column(db.Integer, nullable=True)
+    approver_from_id = db.Column(db.String(50), nullable=True)
+    reject_reason = db.Column(db.Text, nullable=True)
+    decided_by = db.Column(db.String(100), nullable=True)
+    created_at = db.Column(db.String(30), nullable=False)
+    nudged_at = db.Column(db.String(30), nullable=True)
+    decided_at = db.Column(db.String(30), nullable=True)
+    expires_at = db.Column(db.String(30), nullable=False)
+
+    def to_dict(self):
+        return {
+            "id": self.id,
+            "gate_type": self.gate_type,
+            "ticket_id": self.ticket_id,
+            "goal_id": self.goal_id,
+            "mission_id": self.mission_id,
+            "project_id": self.project_id,
+            "agent": self.agent,
+            "attempt": self.attempt,
+            "idempotency_key": self.idempotency_key,
+            "status": self.status,
+            "payload": self.payload,
+            "telegram_chat_id": self.telegram_chat_id,
+            "telegram_message_id": self.telegram_message_id,
+            "approver_from_id": self.approver_from_id,
+            "reject_reason": self.reject_reason,
+            "decided_by": self.decided_by,
+            "created_at": self.created_at,
+            "nudged_at": self.nudged_at,
+            "decided_at": self.decided_at,
+            "expires_at": self.expires_at,
+        }
+
+
+# --------------- MediaJob model (social-media-production) ---------------
+
+MEDIA_JOB_PLATFORMS = ("instagram", "youtube", "linkedin", "tiktok")
+MEDIA_JOB_PUBLICATION_MODES = ("draft", "schedule")
+
+
+class MediaJob(db.Model):
+    """A social-media video production job: brief -> HyperFrames render ->
+    ffprobe validation -> human review -> Postiz upload -> draft/schedule.
+
+    Status is never written directly by route code — every transition must
+    go through media_state_machine.assert_transition() first (see that
+    module for the full matrix and the reasoning behind each edge).
+    """
+
+    __tablename__ = "media_jobs"
+    __table_args__ = (
+        db.CheckConstraint(
+            "platform IN ('instagram','youtube','linkedin','tiktok')",
+            name="ck_media_job_platform",
+        ),
+        db.CheckConstraint(
+            "publication_mode IN ('draft','schedule')",
+            name="ck_media_job_publication_mode",
+        ),
+        db.CheckConstraint(
+            "(locked_at IS NULL AND locked_by IS NULL) OR (locked_at IS NOT NULL AND locked_by IS NOT NULL)",
+            name="ck_media_job_lock_consistency",
+        ),
+    )
+
+    id = db.Column(db.String(36), primary_key=True)  # uuid4
+    project_id = db.Column(db.Integer, db.ForeignKey("projects.id", ondelete="SET NULL"), nullable=True)
+    campaign_id = db.Column(db.String(200), nullable=True)
+    goal_id = db.Column(db.Integer, db.ForeignKey("goals.id", ondelete="SET NULL"), nullable=True)
+    task_id = db.Column(db.Integer, db.ForeignKey("goal_tasks.id", ondelete="SET NULL"), nullable=True)
+    created_by = db.Column(db.String(100), nullable=False, default="system")
+    title = db.Column(db.String(500), nullable=False)
+    brief = db.Column(db.Text, nullable=True)
+    platform = db.Column(db.String(20), nullable=False)
+    postiz_integration_id = db.Column(db.String(100), nullable=True)
+    format = db.Column(db.String(20), nullable=False, default="vertical")
+    width = db.Column(db.Integer, nullable=False)
+    height = db.Column(db.Integer, nullable=False)
+    fps = db.Column(db.Integer, nullable=False, default=30)
+    duration_seconds = db.Column(db.Float, nullable=False)
+    language = db.Column(db.String(10), nullable=False, default="pt-BR")
+    caption = db.Column(db.Text, nullable=True)
+    platform_settings = db.Column(db.Text, nullable=True)  # JSON string
+    publication_mode = db.Column(db.String(10), nullable=False, default="draft")
+    scheduled_at = db.Column(db.String(30), nullable=True)       # user-facing, MEDIA_TIMEZONE
+    scheduled_at_utc = db.Column(db.String(30), nullable=True)   # normalized ISO-8601 UTC
+    timezone = db.Column(db.String(50), nullable=False, default="America/Bahia")
+    status = db.Column(db.String(20), nullable=False, default="queued")
+    workspace_path = db.Column(db.Text, nullable=True)
+    render_path = db.Column(db.Text, nullable=True)
+    render_sha256 = db.Column(db.String(64), nullable=True)
+    render_size_bytes = db.Column(db.Integer, nullable=True)
+    render_duration_seconds = db.Column(db.Float, nullable=True)
+    render_width = db.Column(db.Integer, nullable=True)
+    render_height = db.Column(db.Integer, nullable=True)
+    render_fps = db.Column(db.Integer, nullable=True)
+    render_has_audio = db.Column(db.Integer, nullable=True)  # 0/1, SQLite has no bool
+    postiz_media_id = db.Column(db.String(100), nullable=True)
+    postiz_media_path = db.Column(db.Text, nullable=True)
+    postiz_media_name = db.Column(db.String(300), nullable=True)
+    postiz_post_id = db.Column(db.String(100), nullable=True)
+    attempt_count = db.Column(db.Integer, nullable=False, default=0)
+    last_error = db.Column(db.Text, nullable=True)
+    reject_reason = db.Column(db.Text, nullable=True)
+    locked_at = db.Column(db.String(30), nullable=True)
+    locked_by = db.Column(db.String(100), nullable=True)
+    lock_timeout_seconds = db.Column(db.Integer, nullable=True)
+    created_at = db.Column(db.String(30), nullable=False)
+    updated_at = db.Column(db.String(30), nullable=False)
+    approved_at = db.Column(db.String(30), nullable=True)
+    published_at = db.Column(db.String(30), nullable=True)
+
+    def to_dict(self) -> dict:
+        return {
+            "id": self.id,
+            "project_id": self.project_id,
+            "campaign_id": self.campaign_id,
+            "goal_id": self.goal_id,
+            "task_id": self.task_id,
+            "created_by": self.created_by,
+            "title": self.title,
+            "brief": self.brief,
+            "platform": self.platform,
+            "postiz_integration_id": self.postiz_integration_id,
+            "format": self.format,
+            "width": self.width,
+            "height": self.height,
+            "fps": self.fps,
+            "duration_seconds": self.duration_seconds,
+            "language": self.language,
+            "caption": self.caption,
+            "platform_settings": json.loads(self.platform_settings) if self.platform_settings else {},
+            "publication_mode": self.publication_mode,
+            "scheduled_at": self.scheduled_at,
+            "scheduled_at_utc": self.scheduled_at_utc,
+            "timezone": self.timezone,
+            "status": self.status,
+            "workspace_path": self.workspace_path,
+            "render_path": self.render_path,
+            "render_sha256": self.render_sha256,
+            "render_size_bytes": self.render_size_bytes,
+            "render_duration_seconds": self.render_duration_seconds,
+            "render_width": self.render_width,
+            "render_height": self.render_height,
+            "render_fps": self.render_fps,
+            "render_has_audio": bool(self.render_has_audio) if self.render_has_audio is not None else None,
+            "postiz_media_id": self.postiz_media_id,
+            "postiz_media_path": self.postiz_media_path,
+            "postiz_media_name": self.postiz_media_name,
+            "postiz_post_id": self.postiz_post_id,
+            "attempt_count": self.attempt_count,
+            "last_error": self.last_error,
+            "reject_reason": self.reject_reason,
+            "locked_at": self.locked_at,
+            "locked_by": self.locked_by,
+            "lock_timeout_seconds": self.lock_timeout_seconds,
+            "created_at": self.created_at,
+            "updated_at": self.updated_at,
+            "approved_at": self.approved_at,
+            "published_at": self.published_at,
+        }
+
+
 class TicketComment(db.Model):
     __tablename__ = "ticket_comments"
 
@@ -1222,3 +1453,41 @@ def to_dict(self) -> dict:
             "detail": json.loads(self.detail_json or "{}"),
             "created_at": self.created_at.strftime("%Y-%m-%dT%H:%M:%S.%fZ") if self.created_at else None,
         }
+
+
+class SocialPost(db.Model):
+    """Queue of social media posts waiting to be published.
+
+    Status flow: pending → publishing → published | failed | cancelled
+    """
+
+    __tablename__ = "social_posts"
+
+    id = db.Column(db.Integer, primary_key=True)
+    platform = db.Column(db.String(20), nullable=False, default="twitter")  # twitter, linkedin, etc.
+    account_index = db.Column(db.Integer, nullable=False, default=1)  # SOCIAL_TWITTER_<N>
+    text = db.Column(db.Text, nullable=False)
+    media_path = db.Column(db.String(500), nullable=True)  # local file path for attached image
+    status = db.Column(db.String(20), nullable=False, default="pending")
+    scheduled_at = db.Column(db.DateTime, nullable=True)  # NULL = publish immediately
+    published_at = db.Column(db.DateTime, nullable=True)
+    error = db.Column(db.Text, nullable=True)
+    external_id = db.Column(db.String(100), nullable=True)  # tweet id, etc.
+    created_at = db.Column(db.DateTime, default=lambda: datetime.now(timezone.utc))
+    retry_count = db.Column(db.Integer, nullable=False, default=0)
+
+    def to_dict(self) -> dict:
+        return {
+            "id": self.id,
+            "platform": self.platform,
+            "account_index": self.account_index,
+            "text": self.text,
+            "media_path": self.media_path,
+            "status": self.status,
+            "scheduled_at": self.scheduled_at.strftime("%Y-%m-%dT%H:%M:%S.%fZ") if self.scheduled_at else None,
+            "published_at": self.published_at.strftime("%Y-%m-%dT%H:%M:%S.%fZ") if self.published_at else None,
+            "error": self.error,
+            "external_id": self.external_id,
+            "created_at": self.created_at.strftime("%Y-%m-%dT%H:%M:%S.%fZ") if self.created_at else None,
+            "retry_count": self.retry_count,
+        }
diff --git a/dashboard/backend/nexus_orchestrator.py b/dashboard/backend/nexus_orchestrator.py
new file mode 100644
index 000000000..66dba21ad
--- /dev/null
+++ b/dashboard/backend/nexus_orchestrator.py
@@ -0,0 +1,138 @@
+"""Nexus orchestrator — "cada agente na sua hora, só com task real".
+
+Replaces the old model (18 autopilot heartbeats firing every 15 min, in
+parallel, burning tokens to decide "skip"). This is a cheap Python handler
+(no LLM) that runs on a heartbeat interval and:
+
+  1. Looks at the real queue — open/in_progress tickets assigned to an agent,
+     not locked, highest priority first, preferring those tied to active goals.
+  2. Picks ONE and dispatches that agent's heartbeat in the background.
+  3. Does nothing (zero cost) when the queue is empty.
+
+So agents only spend tokens when there's actual work, and they run one at a
+time instead of stampeding. The agent run itself moves the kanban and reports
+the result/blocker (see heartbeat_outcome + heartbeat_runner).
+
+Tunables (env):
+  ORCHESTRATOR_DRY_RUN=1     → log what it would dispatch, don't run the agent
+  ORCHESTRATOR_MAX_INFLIGHT  → max concurrent agent runs it will start (default 1)
+"""
+
+from __future__ import annotations
+
+import os
+import sqlite3
+import threading
+from pathlib import Path
+
+WORKSPACE = Path(__file__).resolve().parents[2]
+DB_PATH = WORKSPACE / "dashboard" / "data" / "evonexus.db"
+
+# Agents the orchestrator will dispatch. State monitors (atlas/flux) keep their
+# own scheduled heartbeats and are not driven by the queue.
+_EXCLUDE_AGENTS = {"system"}
+
+# Track in-flight runs started by the orchestrator (process-local).
+_inflight: set[str] = set()
+_inflight_lock = threading.Lock()
+
+
+def _get_db() -> sqlite3.Connection:
+    conn = sqlite3.connect(str(DB_PATH), timeout=30)
+    conn.row_factory = sqlite3.Row
+    return conn
+
+
+def _next_ticket(conn) -> sqlite3.Row | None:
+    """Highest-priority actionable ticket assigned to an agent.
+
+    Prefers tickets linked to an active goal, then priority_rank, then age.
+    """
+    # Advance the board: 'open' first, then 'review', then 'in_progress' (push them
+    # toward resolved). Anti-loop guard: skip tickets touched in the last 15 min, so
+    # a ticket that stays in_progress isn't hammered every cycle. 'blocked' is never
+    # auto-processed — it waits for the human.
+    return conn.execute(
+        """
+        SELECT t.id, t.title, t.assignee_agent, t.priority, t.goal_id
+        FROM tickets t
+        LEFT JOIN goals g ON g.id = t.goal_id
+        WHERE t.status IN ('open', 'review', 'in_progress')
+          AND t.locked_at IS NULL
+          AND t.assignee_agent IS NOT NULL
+          AND t.assignee_agent NOT IN ('system')
+          AND (t.status = 'open'
+               OR t.updated_at IS NULL
+               OR t.updated_at < datetime('now', '-15 minutes'))
+        ORDER BY
+          CASE WHEN g.status = 'active' THEN 0 ELSE 1 END,
+          CASE t.status WHEN 'open' THEN 0 WHEN 'review' THEN 1 ELSE 2 END,
+          COALESCE(t.priority_rank, 0) DESC,
+          t.created_at ASC
+        LIMIT 1
+        """
+    ).fetchone()
+
+
+def _heartbeat_id_for_agent(conn, agent: str) -> str | None:
+    """Find a heartbeat to run for this agent (prefer the autopilot one)."""
+    row = conn.execute(
+        "SELECT id FROM heartbeats WHERE agent = ? "
+        "ORDER BY CASE WHEN id LIKE 'autopilot-%' THEN 0 ELSE 1 END LIMIT 1",
+        (agent,),
+    ).fetchone()
+    return row["id"] if row else None
+
+
+def _dispatch_agent(heartbeat_id: str) -> None:
+    """Run the agent heartbeat in a background thread, releasing inflight after."""
+    def _run():
+        try:
+            from heartbeat_runner import run_heartbeat
+            run_heartbeat(heartbeat_id, triggered_by="orchestrator")
+        except Exception as exc:  # noqa: BLE001
+            print(f"[orchestrator] run failed for {heartbeat_id}: {exc}", flush=True)
+        finally:
+            with _inflight_lock:
+                _inflight.discard(heartbeat_id)
+
+    threading.Thread(target=_run, name=f"orch-{heartbeat_id}", daemon=True).start()
+
+
+def tick() -> dict:
+    """One orchestration cycle. Cheap; safe to call frequently."""
+    max_inflight = int(os.environ.get("ORCHESTRATOR_MAX_INFLIGHT", "1"))
+    dry_run = os.environ.get("ORCHESTRATOR_DRY_RUN", "0").lower() in ("1", "true", "yes")
+
+    with _inflight_lock:
+        inflight_now = len(_inflight)
+    if inflight_now >= max_inflight:
+        return {"dispatched": None, "reason": f"max_inflight reached ({inflight_now})"}
+
+    conn = _get_db()
+    try:
+        ticket = _next_ticket(conn)
+        if not ticket:
+            return {"dispatched": None, "reason": "queue empty"}
+
+        agent = ticket["assignee_agent"]
+        hb_id = _heartbeat_id_for_agent(conn, agent)
+        if not hb_id:
+            return {"dispatched": None, "reason": f"no heartbeat for agent {agent}",
+                    "ticket": ticket["id"]}
+
+        with _inflight_lock:
+            if hb_id in _inflight:
+                return {"dispatched": None, "reason": f"{hb_id} already running"}
+            if not dry_run:
+                _inflight.add(hb_id)
+
+        if dry_run:
+            return {"dispatched": None, "dry_run": True, "would_dispatch": hb_id,
+                    "agent": agent, "ticket": ticket["id"], "title": ticket["title"]}
+
+        _dispatch_agent(hb_id)
+        return {"dispatched": hb_id, "agent": agent, "ticket": ticket["id"],
+                "title": ticket["title"]}
+    finally:
+        conn.close()
diff --git a/dashboard/backend/notifications.py b/dashboard/backend/notifications.py
new file mode 100644
index 000000000..d05745381
--- /dev/null
+++ b/dashboard/backend/notifications.py
@@ -0,0 +1,392 @@
+#!/usr/bin/env python3
+"""
+notifications.py — Canal único de feedback pro Telegram.
+
+Centraliza TODAS as notificações positivas e negativas do EvoNexus.
+Qualquer módulo pode chamar:
+    from notifications import notify_success, notify_failure, notify_info
+
+Estratégia de debounce por categoria:
+- Heartbeat success: 30s por heartbeat_id (evita spam de 15min interval)
+- Task completion: 60s por task_id
+- Rotina: 120s por rotina
+- Aprovação pendente: sem debounce (sempre notifica)
+- Relatório horário: sem debounce
+"""
+from __future__ import annotations
+
+import html
+import json
+import os
+import sys
+import time
+import urllib.parse
+import urllib.request
+from datetime import datetime, timezone
+from pathlib import Path
+
+WORKSPACE = Path(__file__).resolve().parent.parent.parent
+
+# ── Load .env so TELEGRAM_BOT_TOKEN / TELEGRAM_CHAT_ID are available ──
+_env_file = WORKSPACE / ".env"
+if _env_file.exists():
+    for _line in _env_file.read_text(encoding="utf-8").splitlines():
+        _line = _line.strip()
+        if _line and not _line.startswith("#") and "=" in _line:
+            _k, _v = _line.split("=", 1)
+            os.environ.setdefault(_k.strip(), _v.strip())
+
+# ── Debounce state ──────────────────────────────────────────────────────────
+# In-memory only — resets on restart. Good enough for debounce within a session.
+_debounce_state: dict[str, float] = {}
+DEFAULT_DEBOUNCE = {
+    "heartbeat_success": 30,
+    "heartbeat_failure": 900,  # 15min por heartbeat — evita spam em falhas recorrentes
+    "task_success": 60,
+    "task_failure": 0,
+    "routine_success": 120,
+    "routine_failure": 0,
+    "approval_pending": 0,       # always notify
+    "hourly_report": 0,         # always notify
+    "agent_event": 60,
+}
+
+
+def _should_send(category: str, key: str) -> bool:
+    """Check debounce. Returns True if should send."""
+    debounce_secs = DEFAULT_DEBOUNCE.get(category, 0)
+    if debounce_secs == 0:
+        return True
+    now = time.time()
+    full_key = f"{category}:{key}"
+    last = _debounce_state.get(full_key, 0)
+    if now - last >= debounce_secs:
+        _debounce_state[full_key] = now
+        return True
+    return False
+
+
+def _append_bot_memory(chat_id: str, text: str) -> None:
+    """Mirror a system-pushed notification into the Telegram bot's own chat memory.
+
+    scripts/telegram_provider_bot.py runs as a SEPARATE service/container and
+    builds conversation context purely from what flowed through its own reply
+    loop (append_chat_memory calls in run_orchestrated_reply). Messages this
+    module sends via _send_telegram — heartbeat alerts, outcome notifications,
+    approval pings — go straight to the Telegram HTTP API from the dashboard
+    container and never touch that memory file, so the bot has no idea it (or
+    the system) already told the user something. Reported live 2026-07-15:
+    user asked the bot about content from a notification it had just received
+    and the bot had no memory of it ever being sent.
+    /root/.claude is the evonexus_claude_auth volume, mounted at the same
+    path in dashboard, telegram AND scheduler — writing the exact JSONL
+    format telegram_provider_bot.py itself uses closes the gap without any
+    network call between the two services. Best-effort: a failure here must
+    never break the actual notification send.
+    """
+    try:
+        scripts_dir = str(WORKSPACE / "scripts")
+        if scripts_dir not in sys.path:
+            sys.path.insert(0, scripts_dir)
+        import telegram_provider_bot as _tpb
+        _tpb.append_chat_memory(chat_id, "assistant", text, speaker="Sistema")
+    except Exception:
+        pass
+
+
+def _send_telegram(text: str) -> bool:
+    """Send Telegram message. Returns True on success."""
+    token = os.environ.get("TELEGRAM_BOT_TOKEN", "")
+    cid = os.environ.get("TELEGRAM_CHAT_ID", "")
+    if not token or not cid:
+        return False
+    try:
+        payload = urllib.parse.urlencode({
+            "chat_id": cid,
+            "text": text,
+            "parse_mode": "HTML",
+            "disable_web_page_preview": True,
+        }).encode()
+        url = f"https://api.telegram.org/bot{token}/sendMessage"
+        req = urllib.request.Request(url, data=payload, method="POST")
+        with urllib.request.urlopen(req, timeout=15) as resp:
+            ok = resp.status == 200
+    except Exception:
+        return False
+    if ok:
+        _append_bot_memory(cid, text)
+    return ok
+
+
+def send_telegram_alert(text: str) -> bool:
+    """Send a preformatted Telegram alert.
+
+    Used by heartbeat_runner and other modules that already build the final
+    HTML message. Returns False only when Telegram credentials are missing or
+    Telegram rejects/fails the request.
+    """
+    return _send_telegram(text)
+
+
+def send_approval_request(approval_id: int, title: str, body: str) -> int | None:
+    """Send a Telegram approval prompt with an inline approve/reject keyboard.
+
+    Shared by both goal-ticket-unification gates (publish + decomposition,
+    ADR §3c) — the two gates differ only in what they park, not in how they
+    notify. `title`/`body` are agent-authored content (an agent could write
+    arbitrary text into a ticket/goal payload), so both are HTML-escaped
+    before going into a parse_mode=HTML message (Vault V8) — otherwise a
+    stray `<`/`&` in an agent's summary would either break the Telegram
+    render or, worse, let injected markup control the approval prompt itself.
+    Returns the sent message's message_id (for future reference), or None if
+    Telegram credentials are missing or the send fails.
+    """
+    token = os.environ.get("TELEGRAM_BOT_TOKEN", "")
+    cid = os.environ.get("TELEGRAM_CHAT_ID", "")
+    if not token or not cid:
+        return None
+    safe_title = html.escape(title or "")
+    safe_body = html.escape(body or "")
+    reply_markup = {
+        "inline_keyboard": [[
+            {"text": "✅ Aprovar", "callback_data": f"apr:{approval_id}:a"},
+            {"text": "❌ Rejeitar", "callback_data": f"apr:{approval_id}:r"},
+        ]]
+    }
+    text = f"🔔 <b>{safe_title}</b>\n\n{safe_body}"
+    try:
+        payload = json.dumps({
+            "chat_id": cid,
+            "text": text,
+            "parse_mode": "HTML",
+            "disable_web_page_preview": True,
+            "reply_markup": reply_markup,
+        }).encode()
+        url = f"https://api.telegram.org/bot{token}/sendMessage"
+        req = urllib.request.Request(url, data=payload, headers={"Content-Type": "application/json"}, method="POST")
+        with urllib.request.urlopen(req, timeout=15) as resp:
+            result = json.loads(resp.read().decode("utf-8"))
+    except Exception:
+        return None
+    if not result.get("ok"):
+        return None
+    _append_bot_memory(cid, text)
+    message_id = (result.get("result") or {}).get("message_id")
+    return int(message_id) if message_id is not None else None
+
+
+def send_whatsapp(text: str, phone: str, instance: str | None = None) -> bool:
+    """Send a WhatsApp message via Evolution Go API.
+
+    Reads EVOLUTION_GO_URL and EVOLUTION_GO_KEY from environment (.env).
+    `instance` is the Evolution Go WhatsApp instance to send FROM — defaults
+    to EVOLUTION_GO_INSTANCE if set, else "sistema-britto" (Sistema Britto's
+    own connected number, already registered in EvoCRM/evolution_go). This
+    used to be hardcoded to "nature" — a different instance entirely — so
+    every message silently went out from the wrong number. Returns True if
+    sent, False on any failure.
+    """
+    import json
+    import urllib.request
+    import urllib.error
+
+    url = os.environ.get("EVOLUTION_GO_URL", "").rstrip("/")
+    key = os.environ.get("EVOLUTION_GO_KEY", "")
+    if not url or not key:
+        return False
+    instance = instance or os.environ.get("EVOLUTION_GO_INSTANCE") or "sistema-britto"
+    try:
+        payload = json.dumps({"number": phone, "text": text}).encode("utf-8")
+        req = urllib.request.Request(
+            f"{url}/message/sendText/{instance}",
+            data=payload,
+            method="POST",
+            headers={"apikey": key, "Content-Type": "application/json"},
+        )
+        with urllib.request.urlopen(req, timeout=15) as resp:
+            return resp.status in (200, 201)
+    except Exception:
+        return False
+
+
+def _esc(s: str) -> str:
+    """Escape HTML special chars for Telegram parse_mode=HTML."""
+    return (s or "").replace("&", "&amp;").replace("<", "&lt;").replace(">", "&gt;")
+
+
+def notify_agent_result(agent: str, ticket_title: str, new_status: str,
+                        summary: str) -> bool:
+    """Outcome-driven: an agent advanced/finished a task. Report the RESULT.
+
+    This is the signal Felipe wants — what got done, not that a heartbeat ran.
+    """
+    status_emoji = "✅" if new_status in ("resolved", "closed") else "🟢"
+    status_label = {
+        "resolved": "concluída", "closed": "fechada", "review": "em revisão",
+        "in_progress": "em andamento", "blocked": "bloqueada",
+    }.get(new_status, new_status)
+    title = f" · <b>{_esc(ticket_title)}</b>" if ticket_title else ""
+    text = (
+        f"{status_emoji} <b>{_esc(agent)}</b>{title}\n"
+        f"➡️ {status_label}\n\n"
+        f"{_esc(summary[:600])}"
+    )
+    return _send_telegram(text)
+
+
+def notify_agent_blocked(agent: str, ticket_title: str, reason: str,
+                         needs: str = "", ticket_id: str = "") -> bool:
+    """Outcome-driven: an agent is blocked and needs Felipe to intervene.
+
+    The ticket id is embedded as a marker so a Telegram REPLY to this message is
+    routed back to the ticket (telegram_provider_bot unblocks it with the reply).
+    """
+    title = f" · <b>{_esc(ticket_title)}</b>" if ticket_title else ""
+    needs_line = f"\n\n🙋 <b>Preciso de você:</b> {_esc(needs[:300])}" if needs else ""
+    hint = "\n\n<i>Responda (reply) esta mensagem para desbloquear.</i>" if ticket_id else ""
+    marker = f"\n#tkt:{ticket_id}" if ticket_id else ""
+    text = (
+        f"🔴 <b>{_esc(agent)}</b> bloqueado{title}\n\n"
+        f"{_esc(reason[:400])}"
+        f"{needs_line}"
+        f"{hint}"
+        f"{marker}"
+    )
+    return _send_telegram(text)
+
+
+def _now() -> str:
+    return datetime.now(timezone.utc).strftime("%H:%M UTC")
+
+
+# ── Public API ──────────────────────────────────────────────────────────────
+
+def notify_heartbeat_success(heartbeat_id: str, agent: str, duration_ms: int,
+                            model: str = "", cost_usd: float = 0,
+                            tokens_in: int = 0, tokens_out: int = 0) -> bool:
+    """Report heartbeat success to Telegram."""
+    if not _should_send("heartbeat_success", heartbeat_id):
+        return False
+
+    dur = f"{duration_ms / 1000:.1f}s" if duration_ms else "?"
+    cost = f" | 💰 ${cost_usd:.4f}" if cost_usd and cost_usd > 0 else ""
+    model_str = f" | 🔗 {model}" if model else ""
+    tok = ""
+    if tokens_in and tokens_out:
+        tok = f"\n📊 {tokens_in:,} in / {tokens_out:,} out"
+
+    text = (
+        f"✅ <b>Heartbeat OK</b>\n\n"
+        f"🔧 <b>{heartbeat_id}</b> | 🤖 {agent}\n"
+        f"⏱ {dur}{cost}{model_str}{tok}"
+    )
+    return _send_telegram(text)
+
+
+def notify_heartbeat_failure(heartbeat_id: str, agent: str, error: str,
+                             duration_ms: int = 0, attempt: int = 0) -> bool:
+    """Report heartbeat failure to Telegram."""
+    if not _should_send("heartbeat_failure", heartbeat_id):
+        return False
+
+    dur = f"{duration_ms / 1000:.1f}s" if duration_ms else "?"
+    att = f" | 🔄 attempt #{attempt}" if attempt > 1 else ""
+    err = error[:200].replace("\n", " ") if error else "unknown"
+
+    text = (
+        f"⚠️ <b>Heartbeat FAIL</b>\n\n"
+        f"🔧 <b>{heartbeat_id}</b> | 🤖 {agent}\n"
+        f"⏱ {dur}{att}\n"
+        f"📝 <code>{err}</code>"
+    )
+    return _send_telegram(text)
+
+
+def notify_task_success(task_name: str, task_type: str = "",
+                       result_preview: str = "") -> bool:
+    """Report task completion to Telegram."""
+    if not _should_send("task_success", task_name):
+        return False
+
+    preview = f"\n📋 {result_preview[:150]}" if result_preview else ""
+    text = (
+        f"✅ <b>Task Completa</b>\n\n"
+        f"📌 <b>{task_name}</b> ({task_type}){preview}"
+    )
+    return _send_telegram(text)
+
+
+def notify_task_failure(task_name: str, error: str) -> bool:
+    """Report task failure to Telegram."""
+    if not _should_send("task_failure", f"{task_name}:{int(time.time())}"):
+        return False
+
+    text = (
+        f"❌ <b>Task Falhou</b>\n\n"
+        f"📌 <b>{task_name}</b>\n"
+        f"📝 <code>{error[:200]}</code>"
+    )
+    return _send_telegram(text)
+
+
+def notify_routine_success(routine_name: str, duration_s: float = 0) -> bool:
+    """Report routine completion to Telegram."""
+    if not _should_send("routine_success", routine_name):
+        return False
+
+    dur = f"⏱ {duration_s:.0f}s" if duration_s > 0 else ""
+    text = (
+        f"✅ <b>Rotina OK</b>\n\n"
+        f"🔄 <b>{routine_name}</b> {dur}"
+    )
+    return _send_telegram(text)
+
+
+def notify_approval_pending(item_name: str, item_type: str = "post",
+                            details: str = "", approve_cmd: str = "",
+                            reject_cmd: str = "") -> bool:
+    """Report pending approval — ALWAYS sends (no debounce)."""
+    text = (
+        f"🔔 <b>Aprovação Pendente</b>\n\n"
+        f"📝 <b>{item_name}</b> ({item_type})\n"
+    )
+    if details:
+        text += f"📋 {details[:300]}\n"
+    text += f"\n"
+    if approve_cmd:
+        text += f"✅ <code>{approve_cmd}</code>\n"
+    if reject_cmd:
+        text += f"❌ <code>{reject_cmd}</code>\n"
+    if not approve_cmd and not reject_cmd:
+        text += f"\nResponda com o ID para aprovar/reprovar"
+
+    return _send_telegram(text)
+
+
+def notify_hourly_report(report_text: str) -> bool:
+    """Send hourly activity report — ALWAYS sends."""
+    text = f"📊 <b>Relatório Horário</b>\n\n{report_text}"
+    return _send_telegram(text)
+
+
+def notify_agent_event(agent: str, event: str, details: str = "") -> bool:
+    """Report agent events (started, completed action, etc)."""
+    if not _should_send("agent_event", f"{agent}:{event}"):
+        return False
+
+    text = (
+        f"🤖 <b>{agent}</b>\n"
+        f"📌 {event}\n"
+    )
+    if details:
+        text += f"📋 {details[:200]}"
+
+    return _send_telegram(text)
+
+
+def notify_info(title: str, message: str) -> bool:
+    """Generic info notification."""
+    if not _should_send("info", f"{title}:{int(time.time())}"):
+        return False
+    text = f"ℹ️ <b>{title}</b>\n\n{message[:400]}"
+    return _send_telegram(text)
diff --git a/dashboard/backend/plugin_integration_health.py b/dashboard/backend/plugin_integration_health.py
index decec246a..14c93f801 100644
--- a/dashboard/backend/plugin_integration_health.py
+++ b/dashboard/backend/plugin_integration_health.py
@@ -18,7 +18,7 @@
 
 WORKSPACE = Path(__file__).resolve().parent.parent.parent
 PLUGINS_DIR = WORKSPACE / "plugins"
-DB_PATH = WORKSPACE / "dashboard" / "data" / "dashboard.db"
+DB_PATH = WORKSPACE / "dashboard" / "data" / "evonexus.db"
 
 # Hard cap on HTTP timeout regardless of what the manifest declares (ADR decision 4)
 _MAX_TIMEOUT_SECONDS = 10
diff --git a/dashboard/backend/plugin_schema.py b/dashboard/backend/plugin_schema.py
index 1c30bf319..7f49f1e3b 100644
--- a/dashboard/backend/plugin_schema.py
+++ b/dashboard/backend/plugin_schema.py
@@ -62,6 +62,10 @@ class Capability(str, Enum):
     # Wave 2.1 — full-screen plugin UI pages + writable data
     ui_pages = "ui_pages"
     writable_data = "writable_data"
+    # B2.0 — unauthenticated public pages served by the host (token-bound)
+    public_pages = "public_pages"
+    # B3 — safe uninstall with data preservation and 3-step wizard
+    safe_uninstall = "safe_uninstall"
 
 
 class PluginMcpServer(BaseModel):
@@ -303,6 +307,13 @@ class ReadonlyQuery(BaseModel):
     id: Annotated[str, Field(min_length=1, max_length=100)]
     description: Annotated[str, Field(min_length=1, max_length=500)]
     sql: Annotated[str, Field(min_length=1)]
+    # B2.0: expose this query on the public portal without host auth.
+    # Value is the PluginPublicPage.id that gates access.
+    public_via: Optional[str] = None
+    # B2.0: named SQL parameter in ``sql`` that receives the URL token value.
+    # Required when public_via is set.  The parameter must appear in ``sql``
+    # as :token_param (e.g. ``WHERE magic_link_token = :token``).
+    bind_token_param: Optional[str] = None
 
     @field_validator("id")
     @classmethod
@@ -566,6 +577,14 @@ class PluginWritableResource(BaseModel):
     )
     # Optional JSON Schema for payload validation (jsonschema library)
     json_schema: Optional[WritableResourceJsonSchema] = None
+    # Wave 2.1.x: optional endpoint-level RBAC. When set, only authenticated
+    # users whose ``current_user.role`` is in this list may POST/PUT/DELETE this
+    # resource.  Empty/None means any authenticated user passes (legacy default).
+    # Role 'admin' always passes regardless of the list (super-user override).
+    # Plugins use this to gate writable resources by role without needing a host
+    # PR or app-layer wrapper.  See evonexus-plugin-nutri for split-endpoint
+    # patterns (patients_admin vs patients_clinical).
+    requires_role: Optional[List[Annotated[str, Field(min_length=1, max_length=64)]]] = None
 
     @field_validator("id")
     @classmethod
@@ -585,6 +604,232 @@ def table_pattern(cls, v: str) -> str:
             )
         return v
 
+    @field_validator("requires_role")
+    @classmethod
+    def requires_role_pattern(cls, v: Optional[List[str]]) -> Optional[List[str]]:
+        if v is None:
+            return v
+        for role in v:
+            if not re.match(r"^[a-z][a-z0-9-]*$", role):
+                raise ValueError(
+                    f"requires_role entry '{role}' must match ^[a-z][a-z0-9-]*$ (kebab-case)"
+                )
+        return v
+
+
+class PluginPublicPageTokenSource(BaseModel):
+    """Token source declaration for a public page (B2.0).
+
+    The host validates the incoming token against ``column`` in ``table``
+    using a parametric query.  Table must be slug-prefixed (enforced by the
+    PluginManifest validator ``public_pages_tables_slug_prefixed``).
+
+    B2.0 v1 deliberately does NOT support a ``revoked_when`` SQL fragment to
+    prevent SQL injection.  Revocation is the plugin's responsibility: nulling
+    or rotating the token column value causes the next request to 404.
+    """
+
+    # Plugin-owned table containing the token column (validated slug-prefixed)
+    table: Annotated[str, Field(min_length=1, max_length=200)]
+    # Column in ``table`` that holds the token value
+    column: Annotated[str, Field(min_length=1, max_length=100)]
+
+    @field_validator("table")
+    @classmethod
+    def table_identifier(cls, v: str) -> str:
+        if not re.match(r"^[a-z][a-z0-9_]*$", v):
+            raise ValueError(
+                f"token_source.table '{v}' must match ^[a-z][a-z0-9_]*$"
+            )
+        return v
+
+    @field_validator("column")
+    @classmethod
+    def column_identifier(cls, v: str) -> str:
+        if not re.match(r"^[a-z][a-z0-9_]*$", v):
+            raise ValueError(
+                f"token_source.column '{v}' must match ^[a-z][a-z0-9_]*$"
+            )
+        return v
+
+
+class PluginPublicPage(BaseModel):
+    """A public (unauthenticated) page declared in plugin.yaml under public_pages (B2.0).
+
+    The host registers ``/p/{slug}/{route_prefix}/{token}`` as a public route
+    and validates the token against ``token_source.column`` in ``token_source.table``
+    on every request.  Only B2.0 (read-only, no PIN) is supported in v1.
+    B2.1 (PIN + writable + auto_set_columns) is deferred.
+    """
+
+    # Unique identifier within this plugin's public_pages list
+    id: Annotated[str, Field(min_length=1, max_length=100)]
+    # Human-readable label for audit logs and admin UI
+    description: Annotated[str, Field(min_length=1, max_length=500)]
+    # URL prefix segment, without leading/trailing slashes (e.g. "portal")
+    route_prefix: Annotated[str, Field(min_length=1, max_length=100)]
+    # Token source — which plugin table/column the URL token is validated against
+    token_source: PluginPublicPageTokenSource
+    # Plugin JS bundle path (must be under ui/public/)
+    bundle: Annotated[str, Field(min_length=1, max_length=500)]
+    # Web component tag name registered by the bundle
+    custom_element_name: Annotated[str, Field(min_length=1, max_length=200)]
+    # auth_mode: only "token" is supported in B2.0 (B2.1 will add "pin")
+    auth_mode: Literal["token"] = "token"
+    # Rate limit override per page (requests/minute/IP); defaults to global limiter
+    rate_limit_per_ip: Optional[int] = None
+    # Optional action name to write to the audit log on each page view
+    audit_action: Optional[str] = None
+
+    @field_validator("id")
+    @classmethod
+    def id_pattern(cls, v: str) -> str:
+        if not re.match(r"^[a-z0-9_]+$", v):
+            raise ValueError(f"PluginPublicPage id '{v}' must match ^[a-z0-9_]+$")
+        return v
+
+    @field_validator("route_prefix")
+    @classmethod
+    def route_prefix_clean(cls, v: str) -> str:
+        """No leading/trailing slashes; only lowercase alphanum + hyphens."""
+        v = v.strip("/")
+        if not re.match(r"^[a-z0-9][a-z0-9-]*[a-z0-9]$|^[a-z0-9]$", v):
+            raise ValueError(
+                f"route_prefix '{v}' must be lowercase alphanum+hyphens, no slashes"
+            )
+        return v
+
+    @field_validator("bundle")
+    @classmethod
+    def bundle_in_public_subtree(cls, v: str) -> str:
+        """Bundle must live under ui/public/ to prevent leaking authenticated bundles."""
+        if not v.startswith("ui/public/"):
+            raise ValueError(
+                f"PluginPublicPage bundle '{v}' must start with 'ui/public/' "
+                "(authenticated ui_pages bundles are not accessible from public routes)."
+            )
+        ext = Path(v).suffix.lower()
+        if ext not in {".js", ".mjs"}:
+            raise ValueError(
+                f"PluginPublicPage bundle '{v}' must have a .js or .mjs extension."
+            )
+        return v
+
+    @field_validator("custom_element_name")
+    @classmethod
+    def custom_element_name_has_hyphen(cls, v: str) -> str:
+        if "-" not in v:
+            raise ValueError(
+                f"custom_element_name '{v}' must contain at least one hyphen "
+                "(Web Components specification requirement)."
+            )
+        return v
+
+    @field_validator("rate_limit_per_ip")
+    @classmethod
+    def rate_limit_positive(cls, v: Optional[int]) -> Optional[int]:
+        if v is not None and v < 1:
+            raise ValueError("rate_limit_per_ip must be a positive integer")
+        return v
+
+
+class PluginPreUninstallHook(BaseModel):
+    """Pre-uninstall hook declaration (B3 safe_uninstall).
+
+    Executed as a sandboxed subprocess before the uninstall wizard proceeds.
+    The hook must produce a file in ``output_dir`` when ``must_produce_file``
+    is true — if it does not, the uninstall is blocked.
+    """
+
+    # Relative path to the hook script inside the plugin directory
+    script: Annotated[str, Field(min_length=1, max_length=500)]
+    # Output directory pattern (supports {slug} and {timestamp} interpolation)
+    output_dir: Annotated[str, Field(min_length=1, max_length=500)]
+    # Seconds before the subprocess is killed (max 600)
+    timeout_seconds: int = 600
+    # If true, uninstall is blocked when the hook exits cleanly but produces no file
+    must_produce_file: bool = True
+
+    @field_validator("script")
+    @classmethod
+    def script_relative(cls, v: str) -> str:
+        if v.startswith("/") or ".." in v:
+            raise ValueError(
+                f"pre_uninstall_hook.script '{v}' must be relative and must not traverse upward"
+            )
+        return v
+
+    @field_validator("timeout_seconds")
+    @classmethod
+    def timeout_in_range(cls, v: int) -> int:
+        if not 1 <= v <= 600:
+            raise ValueError("timeout_seconds must be between 1 and 600")
+        return v
+
+
+class PluginUserConfirmation(BaseModel):
+    """User confirmation gate for safe_uninstall (B3).
+
+    Defines the checkbox label and the exact phrase the user must type
+    to enable the Uninstall button.  Phrase matching is case-sensitive.
+    """
+
+    checkbox_label: Annotated[str, Field(min_length=1, max_length=1000)]
+    typed_phrase: Annotated[str, Field(min_length=1, max_length=200)]
+
+
+class PluginSafeUninstall(BaseModel):
+    """Safe uninstall declaration for plugins holding regulated data (B3).
+
+    When ``enabled`` is true the host enforces:
+    1. A 3-step wizard (pre-hook → checkbox → typed phrase + ZIP password).
+    2. Preserved tables are NOT dropped and are renamed ``_orphan_{slug}_{table}``.
+    3. Host-entity cascades respect ``preserved_host_entities`` filters.
+    4. Reinstall detects orphaned tables and restores access after SHA256 verify.
+
+    Plugins not declaring this block continue to use the default cascade-DELETE.
+    """
+
+    enabled: bool = False
+    # Human-readable regulatory reason shown to the admin before they confirm
+    reason: Optional[str] = None
+    # Pre-uninstall hook run before the wizard
+    pre_uninstall_hook: Optional[PluginPreUninstallHook] = None
+    # Checkbox + typed phrase gate
+    user_confirmation: Optional[PluginUserConfirmation] = None
+    # Tables that must NOT be dropped on uninstall (renamed to _orphan_{slug}_{table})
+    preserved_tables: List[str] = Field(default_factory=list)
+    # Host-managed entity classes to partially preserve (table → WHERE clause EXCLUDING rows to delete)
+    # Dict mapping host table name to a SQL WHERE expression for rows that SHOULD be preserved.
+    # e.g. {"tickets": "source_plugin = 'nutri' AND linked_resource LIKE 'nutri_patients/%'"}
+    preserved_host_entities: Dict[str, str] = Field(default_factory=dict)
+    # If true, Uninstall button is completely disabled in the UI (for active audit windows, etc.)
+    block_uninstall: bool = False
+
+    @field_validator("preserved_tables")
+    @classmethod
+    def table_names_identifier(cls, v: List[str]) -> List[str]:
+        for name in v:
+            if not re.match(r"^[a-z][a-z0-9_]*$", name):
+                raise ValueError(
+                    f"preserved_tables entry '{name}' must match ^[a-z][a-z0-9_]*$"
+                )
+        return v
+
+    @field_validator("preserved_host_entities")
+    @classmethod
+    def host_entity_tables_known(cls, v: Dict[str, str]) -> Dict[str, str]:
+        _ALLOWED_HOST_TABLES = frozenset({
+            "triggers", "tickets", "goal_tasks", "goals", "projects", "missions"
+        })
+        for table in v:
+            if table not in _ALLOWED_HOST_TABLES:
+                raise ValueError(
+                    f"preserved_host_entities key '{table}' is not a known host entity table. "
+                    f"Allowed: {sorted(_ALLOWED_HOST_TABLES)}"
+                )
+        return v
+
 
 class PluginUIEntryPoints(BaseModel):
     """Typed container for ui_entry_points in plugin.yaml (Wave 2.1).
@@ -655,6 +900,16 @@ class PluginManifest(BaseModel):
     # env_vars_needed is kept as deprecated warning-only for backwards compatibility.
     integrations: Optional[List["PluginIntegration"]] = None
 
+    # --- B2.0: Public pages (unauthenticated, token-bound) ---
+    # Declared under public_pages: in plugin.yaml.
+    # Requires Capability.public_pages in capabilities list.
+    public_pages: Optional[List[PluginPublicPage]] = None
+
+    # --- B3: Safe uninstall with data preservation ---
+    # Declared under safe_uninstall: in plugin.yaml.
+    # Requires Capability.safe_uninstall in capabilities list.
+    safe_uninstall: Optional[PluginSafeUninstall] = None
+
     @field_validator("id")
     @classmethod
     def slug_pattern(cls, v: str) -> str:
@@ -802,6 +1057,133 @@ def pages_bundle_paths_unique(self) -> "PluginManifest":
         return self
 
 
+    @model_validator(mode="after")
+    def safe_uninstall_requires_capability(self) -> "PluginManifest":
+        """B3: safe_uninstall block requires Capability.safe_uninstall in capabilities."""
+        if self.safe_uninstall and Capability.safe_uninstall not in self.capabilities:
+            raise ValueError(
+                "safe_uninstall is declared but Capability.safe_uninstall is missing "
+                "from capabilities list."
+            )
+        return self
+
+    @model_validator(mode="after")
+    def safe_uninstall_preserved_tables_slug_prefixed(self) -> "PluginManifest":
+        """B3: preserved_tables must start with {slug_under}."""
+        if not self.safe_uninstall or not self.safe_uninstall.preserved_tables:
+            return self
+        slug_under = self.id.replace("-", "_") + "_"
+        for table in self.safe_uninstall.preserved_tables:
+            if not table.lower().startswith(slug_under):
+                raise ValueError(
+                    f"safe_uninstall.preserved_tables entry '{table}' does not start "
+                    f"with required prefix '{slug_under}'. "
+                    "Preserved tables must be plugin-owned."
+                )
+        return self
+
+    @model_validator(mode="after")
+    def safe_uninstall_enabled_requires_confirmation(self) -> "PluginManifest":
+        """B3: if safe_uninstall.enabled is true, user_confirmation is required."""
+        su = self.safe_uninstall
+        if su and su.enabled and not su.block_uninstall and not su.user_confirmation:
+            raise ValueError(
+                "safe_uninstall.enabled is true but user_confirmation is not declared. "
+                "Admin must confirm with a checkbox + typed phrase."
+            )
+        return self
+
+    @model_validator(mode="after")
+    def readonly_data_no_orphan_table_references(self) -> "PluginManifest":
+        """Vault B3.S4: readonly_data SQL must not reference _orphan_* tables.
+
+        Orphan tables are renamed on uninstall to prevent hostile reinstall from
+        accessing them via readonly_data declarations.
+        """
+        if not self.readonly_data:
+            return self
+        _TABLE_RE = re.compile(
+            r"\b(?:FROM|JOIN)\s+([a-zA-Z_][a-zA-Z0-9_]*)",
+            re.IGNORECASE,
+        )
+        for query in self.readonly_data:
+            tables = _TABLE_RE.findall(query.sql)
+            for table in tables:
+                if table.lower().startswith("_orphan_"):
+                    raise ValueError(
+                        f"ReadonlyQuery '{query.id}' references orphan table '{table}'. "
+                        "Queries must not reference _orphan_* tables — these are preserved "
+                        "from a previous uninstall and are inaccessible under the plugin namespace."
+                    )
+        return self
+
+    @model_validator(mode="after")
+    def public_pages_require_capability(self) -> "PluginManifest":
+        """B2.0: public_pages block requires Capability.public_pages in capabilities."""
+        if self.public_pages and Capability.public_pages not in self.capabilities:
+            raise ValueError(
+                "public_pages is declared but Capability.public_pages is missing "
+                "from capabilities list."
+            )
+        return self
+
+    @model_validator(mode="after")
+    def public_pages_tables_slug_prefixed(self) -> "PluginManifest":
+        """B2.0: token_source.table must start with {slug_under} (same guard as readonly/writable)."""
+        if not self.public_pages:
+            return self
+        slug_under = self.id.replace("-", "_") + "_"
+        for page in self.public_pages:
+            table = page.token_source.table
+            if not table.lower().startswith(slug_under):
+                raise ValueError(
+                    f"PluginPublicPage '{page.id}' token_source.table '{table}' "
+                    f"does not start with required prefix '{slug_under}'. "
+                    "Public page token sources must only reference the plugin's own tables."
+                )
+        return self
+
+    @model_validator(mode="after")
+    def public_pages_ids_unique(self) -> "PluginManifest":
+        """B2.0: public page ids and route_prefixes must be unique within a plugin."""
+        if not self.public_pages:
+            return self
+        seen_ids: set[str] = set()
+        seen_prefixes: set[str] = set()
+        for page in self.public_pages:
+            if page.id in seen_ids:
+                raise ValueError(
+                    f"Duplicate PluginPublicPage id '{page.id}' in public_pages."
+                )
+            if page.route_prefix in seen_prefixes:
+                raise ValueError(
+                    f"Duplicate PluginPublicPage route_prefix '{page.route_prefix}' in public_pages."
+                )
+            seen_ids.add(page.id)
+            seen_prefixes.add(page.route_prefix)
+        return self
+
+    @model_validator(mode="after")
+    def readonly_public_via_references_valid_page(self) -> "PluginManifest":
+        """B2.0: readonly_data[].public_via must reference a declared public_pages[].id."""
+        has_public_via = [q for q in self.readonly_data if q.public_via]
+        if not has_public_via:
+            return self
+        page_ids = {p.id for p in (self.public_pages or [])}
+        for query in has_public_via:
+            if query.public_via not in page_ids:
+                raise ValueError(
+                    f"ReadonlyQuery '{query.id}' references public_via='{query.public_via}' "
+                    "which is not declared in public_pages."
+                )
+            if not query.bind_token_param:
+                raise ValueError(
+                    f"ReadonlyQuery '{query.id}' has public_via set but bind_token_param "
+                    "is missing. The query must declare which SQL parameter receives the token."
+                )
+        return self
+
+
 def load_plugin_manifest(plugin_dir: Path) -> PluginManifest:
     """Load and validate plugin.yaml from a plugin directory.
 
diff --git a/dashboard/backend/postiz_client.py b/dashboard/backend/postiz_client.py
new file mode 100644
index 000000000..55c1fae69
--- /dev/null
+++ b/dashboard/backend/postiz_client.py
@@ -0,0 +1,415 @@
+"""PostizClient — the single server-side HTTP client for the self-hosted Postiz
+instance (social-media-production feature).
+
+Extracted from dashboard/backend/heartbeat_outcome.py, which used to make
+these HTTP calls inline with bare `requests` calls. That logic is now here,
+and heartbeat_outcome.py calls into this module instead — there must be only
+ONE Postiz client in the codebase (explicit requirement of the
+social-media-production briefing: "Não crie um segundo cliente Postiz").
+
+Paths confirmed twice, not guessed: first against the official Postiz
+public API docs (docs.postiz.com, 2026-07-19), then corrected against the
+real self-hosted instance at POSTIZ_URL (also 2026-07-19) — the generic
+docs describe the SaaS convention (`/public/v1/...`, own subdomain), but
+this self-hosted single-domain deployment (postiz-vps.stack.yml, Next.js
+API routes) serves the backend under an `/api` prefix. GET
+/api/public/v1/integrations, GET/POST /api/public/v1/posts and POST
+/api/public/v1/upload were each hit for real and returned sane JSON
+(empty array / validation errors), confirming the prefix — never assume
+the SaaS path works against a self-hosted instance without checking:
+  - POST /api/public/v1/upload            multipart -> {id, path, name}
+  - POST /api/public/v1/posts             {type: draft|schedule|now, date, posts:[...]}
+  - GET  /api/public/v1/posts             polling for state confirmation
+  - GET  /api/public/v1/integrations      list connected accounts
+  - PUT  /api/public/v1/posts/{id}/status {status: draft|schedule}
+
+Security invariants (do not relax without re-reading the ADR):
+  - POSTIZ_API_KEY is never logged, never included in a raised exception
+    message verbatim (see _redact).
+  - Media referenced by URL (not uploaded via upload_file) must pass
+    is_safe_media_url() — HTTPS only, no userinfo, host in the configured
+    allowlist. Prevents an agent-influenced URL from becoming an SSRF
+    primitive against the Postiz instance.
+  - upload_file() streams the file from disk; it never reads the whole
+    video into memory.
+"""
+
+from __future__ import annotations
+
+import mimetypes
+import os
+from dataclasses import dataclass
+from pathlib import Path
+from typing import Any
+from urllib.parse import urlparse
+
+import requests
+
+MEDIA_JOB_PLATFORMS = ("instagram", "youtube", "linkedin", "tiktok")
+
+
+class PostizError(Exception):
+    """Base class for all PostizClient errors. Message is always redacted."""
+
+
+class PostizConfigError(PostizError):
+    """POSTIZ_URL/POSTIZ_API_KEY missing or invalid configuration."""
+
+
+class PostizAPIError(PostizError):
+    def __init__(self, message: str, status_code: int | None = None):
+        super().__init__(message)
+        self.status_code = status_code
+
+
+# ── Per-platform settings builders (confirmed against docs.postiz.com/public-api/providers/*) ──
+
+def build_instagram_payload(post_type: str = "post", standalone: bool = False) -> dict:
+    if post_type not in ("post", "story"):
+        raise ValueError(f"Instagram post_type inválido: {post_type!r} (aceita 'post' ou 'story')")
+    return {"__type": "instagram-standalone" if standalone else "instagram", "post_type": post_type}
+
+
+def build_youtube_payload(title: str, visibility: str = "unlisted", made_for_kids: str = "no") -> dict:
+    if visibility not in ("public", "unlisted", "private"):
+        raise ValueError(f"YouTube type/visibility inválido: {visibility!r}")
+    if made_for_kids not in ("yes", "no"):
+        raise ValueError(f"YouTube selfDeclaredMadeForKids inválido: {made_for_kids!r}")
+    if not title or not (2 <= len(title) <= 100):
+        raise ValueError("YouTube title deve ter entre 2 e 100 caracteres")
+    return {"__type": "youtube", "title": title, "type": visibility, "selfDeclaredMadeForKids": made_for_kids}
+
+
+def build_linkedin_payload(page: bool = False) -> dict:
+    return {"__type": "linkedin-page" if page else "linkedin"}
+
+
+def build_tiktok_payload(privacy_level: str = "SELF_ONLY") -> dict:
+    allowed = {"PUBLIC_TO_EVERYONE", "MUTUAL_FOLLOW_FRIENDS", "FOLLOWER_OF_CREATOR", "SELF_ONLY"}
+    if privacy_level not in allowed:
+        raise ValueError(f"TikTok privacy_level inválido: {privacy_level!r}")
+    return {
+        "__type": "tiktok",
+        "privacy_level": privacy_level,
+        "duet": False,
+        "stitch": False,
+        "comment": True,
+        "autoAddMusic": "no",
+        "brand_content_toggle": False,
+        "brand_organic_toggle": False,
+        "video_made_with_ai": False,
+        "content_posting_method": "DIRECT_POST",
+    }
+
+
+PLATFORM_SETTINGS_BUILDERS = {
+    "instagram": build_instagram_payload,
+    "youtube": build_youtube_payload,
+    "linkedin": build_linkedin_payload,
+    "tiktok": build_tiktok_payload,
+}
+
+
+def build_platform_settings(platform: str, **kwargs) -> dict:
+    builder = PLATFORM_SETTINGS_BUILDERS.get(platform)
+    if builder is None:
+        raise ValueError(
+            f"Plataforma sem payload builder implementado: {platform!r}. "
+            f"Suportadas: {sorted(PLATFORM_SETTINGS_BUILDERS)}"
+        )
+    return builder(**kwargs)
+
+
+@dataclass
+class PostizClient:
+    base_url: str
+    api_key: str
+    request_timeout: float = 30.0
+    upload_timeout: float = 900.0
+    allowed_media_hosts: frozenset[str] = frozenset()
+    integration_ids: dict[str, str] | None = None  # {"instagram": "...", ...}
+
+    def __post_init__(self):
+        self.base_url = (self.base_url or "").strip().rstrip("/")
+        self.api_key = (self.api_key or "").strip()
+        if not self.base_url or not self.api_key:
+            raise PostizConfigError("POSTIZ_URL/POSTIZ_API_KEY não configurados.")
+        parsed = urlparse(self.base_url)
+        if parsed.scheme != "https":
+            raise PostizConfigError("POSTIZ_URL deve ser HTTPS.")
+
+    @classmethod
+    def from_env(cls) -> "PostizClient | None":
+        """Build a client from environment variables, or None if unconfigured.
+
+        Never raises for "just not configured" — callers check for None and
+        report that as a 4xx, not a 500.
+        """
+        url = os.environ.get("POSTIZ_URL", "").strip()
+        key = os.environ.get("POSTIZ_API_KEY", "").strip()
+        if not url or not key:
+            return None
+        hosts = frozenset(
+            h.strip().lower()
+            for h in os.environ.get("POSTIZ_ALLOWED_MEDIA_HOSTS", "").split(",")
+            if h.strip()
+        )
+        integration_ids = {
+            platform: os.environ.get(f"POSTIZ_INTEGRATION_{platform.upper()}_ID", "").strip()
+            for platform in MEDIA_JOB_PLATFORMS
+        }
+        try:
+            return cls(
+                base_url=url,
+                api_key=key,
+                # POSTIZ_REQUEST_TIMEOUT_SECONDS is the current name (Etapa 15);
+                # POSTIZ_HTTP_TIMEOUT_SECONDS is the pre-existing name used by
+                # the legacy publish-gate flow — honor it if set so an already
+                # deployed .env keeps working without a forced rename.
+                request_timeout=float(
+                    os.environ.get("POSTIZ_REQUEST_TIMEOUT_SECONDS")
+                    or os.environ.get("POSTIZ_HTTP_TIMEOUT_SECONDS")
+                    or "120"
+                ),
+                upload_timeout=float(os.environ.get("POSTIZ_UPLOAD_TIMEOUT_SECONDS", "900")),
+                allowed_media_hosts=hosts,
+                integration_ids={k: v for k, v in integration_ids.items() if v},
+            )
+        except PostizConfigError:
+            return None
+
+    # ── internal helpers ─────────────────────────────────────────────────
+
+    def _headers(self) -> dict:
+        return {"Authorization": self.api_key}
+
+    def _redact(self, text: str) -> str:
+        """Strip the API key out of any string before it can reach a log/exception."""
+        if not text or not self.api_key:
+            return text
+        return text.replace(self.api_key, "***REDACTED***")
+
+    def _request(self, method: str, path: str, *, timeout: float, **kwargs) -> requests.Response:
+        url = f"{self.base_url}{path}"
+        try:
+            response = requests.request(method, url, timeout=timeout, **kwargs)
+        except Exception as exc:
+            # Broad on purpose (not just requests.RequestException): any
+            # unexpected exception's message still gets redacted before it
+            # can propagate — the API key must never leak into a log/UI
+            # error string via an exception type this didn't anticipate.
+            raise PostizAPIError(f"Falha de rede ao chamar Postiz {path}: {self._redact(str(exc))}") from None
+        if response.status_code >= 400:
+            body_preview = self._redact((response.text or "")[:500])
+            raise PostizAPIError(
+                f"Postiz respondeu {response.status_code} em {path}: {body_preview}",
+                status_code=response.status_code,
+            )
+        return response
+
+    # ── integrations ─────────────────────────────────────────────────────
+
+    def list_integrations(self) -> list[dict]:
+        response = self._request(
+            "GET", "/api/public/v1/integrations", headers=self._headers(), timeout=self.request_timeout
+        )
+        try:
+            data = response.json()
+        except ValueError:
+            raise PostizAPIError("Postiz retornou um corpo não-JSON em /integrations.") from None
+        if not isinstance(data, list):
+            raise PostizAPIError(f"Formato inesperado de /integrations: {type(data).__name__}")
+        return data
+
+    def select_integration(self, platform: str, integrations: list[dict] | None = None) -> dict | None:
+        if integrations is None:
+            integrations = self.list_integrations()
+        configured_id = (self.integration_ids or {}).get(platform, "")
+        candidates = [
+            item for item in integrations
+            if isinstance(item, dict) and item.get("identifier") == platform and not item.get("disabled")
+        ]
+        if configured_id:
+            return next((item for item in candidates if item.get("id") == configured_id), None)
+        return candidates[0] if len(candidates) == 1 else None
+
+    def test_connection(self) -> dict:
+        """Best-effort health probe used by the admin config screen."""
+        try:
+            integrations = self.list_integrations()
+        except PostizError as exc:
+            return {"ok": False, "detail": str(exc)}
+        by_platform = {}
+        for platform in MEDIA_JOB_PLATFORMS:
+            match = self.select_integration(platform, integrations)
+            by_platform[platform] = {"connected": match is not None, "id": match.get("id") if match else None}
+        return {"ok": True, "detail": f"{len(integrations)} integrações encontradas.", "platforms": by_platform}
+
+    # ── media URL safety (for URL-referenced media, not local uploads) ───
+
+    def is_safe_media_url(self, value: str) -> bool:
+        parsed = urlparse(value)
+        if parsed.scheme != "https" or not parsed.hostname or parsed.username or parsed.password:
+            return False
+        hostname = parsed.hostname.lower()
+        return bool(self.allowed_media_hosts) and any(
+            hostname == allowed or hostname.endswith(f".{allowed}") for allowed in self.allowed_media_hosts
+        )
+
+    # ── upload ────────────────────────────────────────────────────────────
+
+    def upload_file(self, file_path: Path) -> dict:
+        """Multipart-upload a local file to POST /api/public/v1/upload.
+
+        Streams from disk (requests reads file-like objects in chunks — the
+        whole video is never materialized in memory). Returns the raw
+        {id, path, name} the Postiz API hands back; the caller is
+        responsible for persisting these onto the MediaJob row before doing
+        anything else (idempotency — see media_state_machine ADR-7).
+        """
+        file_path = Path(file_path)
+        if not file_path.is_file():
+            raise PostizError(f"Arquivo de upload não encontrado: {file_path}")
+        content_type = mimetypes.guess_type(file_path.name)[0] or "application/octet-stream"
+        with file_path.open("rb") as fh:
+            files = {"file": (file_path.name, fh, content_type)}
+            response = self._request(
+                "POST", "/api/public/v1/upload", headers=self._headers(), files=files, timeout=self.upload_timeout
+            )
+        try:
+            data = response.json()
+        except ValueError:
+            raise PostizAPIError("Postiz retornou um corpo não-JSON em /upload.") from None
+        if isinstance(data, list):
+            data = data[0] if data else {}
+        if not isinstance(data, dict) or not data.get("id") or not data.get("path"):
+            raise PostizAPIError(f"Resposta de upload sem id/path: {data!r}")
+        return {"id": data["id"], "path": data["path"], "name": data.get("name") or file_path.name}
+
+    # ── post creation ────────────────────────────────────────────────────
+
+    def _create_post_raw(
+        self,
+        *,
+        integration_id: str,
+        content: str,
+        media: list[dict],
+        settings: dict,
+        post_type: str,
+        date_iso_utc: str,
+        extra: dict | None = None,
+    ) -> list[dict]:
+        if post_type not in ("draft", "schedule", "now"):
+            raise ValueError(f"post_type inválido: {post_type!r}")
+        body = {
+            "type": post_type,
+            "date": date_iso_utc,
+            "shortLink": False,
+            "tags": [],
+            **(extra or {}),
+            "posts": [{
+                "integration": {"id": integration_id},
+                "value": [{"content": content, "image": media}],
+                "settings": settings,
+            }],
+        }
+        response = self._request(
+            "POST", "/api/public/v1/posts", headers={**self._headers(), "Content-Type": "application/json"},
+            json=body, timeout=self.request_timeout,
+        )
+        try:
+            created = response.json()
+        except ValueError:
+            raise PostizAPIError("Postiz retornou um corpo não-JSON em POST /posts.") from None
+        if not isinstance(created, list):
+            raise PostizAPIError(f"Resposta inesperada de POST /posts: {created!r}")
+        return created
+
+    def create_draft(self, *, integration_id: str, content: str, media: list[dict], settings: dict,
+                      now_iso_utc: str) -> list[dict]:
+        """type=draft — 'the post is created and stored against the integration
+        but not scheduled or published' (confirmed via docs.postiz.com). The
+        `date` field is still required by the schema even though it has no
+        scheduling effect in draft state; pass the current UTC timestamp.
+        """
+        return self._create_post_raw(
+            integration_id=integration_id, content=content, media=media, settings=settings,
+            post_type="draft", date_iso_utc=now_iso_utc,
+        )
+
+    def schedule_post(self, *, integration_id: str, content: str, media: list[dict], settings: dict,
+                       scheduled_at_utc: str) -> list[dict]:
+        return self._create_post_raw(
+            integration_id=integration_id, content=content, media=media, settings=settings,
+            post_type="schedule", date_iso_utc=scheduled_at_utc,
+        )
+
+    def create_post_now(self, *, integration_id: str, content: str, media: list[dict], settings: dict,
+                         now_iso_utc: str) -> list[dict]:
+        """type=now — publishes immediately. Never called by the media-jobs
+        pipeline in this feature (SOCIAL_DEFAULT_POST_MODE=draft always);
+        kept for parity with the existing publish-gate flow in
+        heartbeat_outcome.py, which this class now backs. `creationMethod`
+        is not part of the documented public API schema but was present in
+        the pre-refactor payload for this legacy flow — preserved here
+        verbatim rather than silently dropped; the new draft/schedule paths
+        used by MediaJob do NOT set it (only documented fields).
+        """
+        return self._create_post_raw(
+            integration_id=integration_id, content=content, media=media, settings=settings,
+            post_type="now", date_iso_utc=now_iso_utc, extra={"creationMethod": "API"},
+        )
+
+    def change_status(self, post_id: str, status: str) -> dict:
+        if status not in ("draft", "schedule"):
+            raise ValueError(f"status inválido: {status!r}")
+        response = self._request(
+            "PUT", f"/api/public/v1/posts/{post_id}/status",
+            headers={**self._headers(), "Content-Type": "application/json"},
+            json={"status": status}, timeout=self.request_timeout,
+        )
+        try:
+            return response.json()
+        except ValueError:
+            return {"id": post_id, "state": status}
+
+    # ── publication confirmation (fail-closed polling) ──────────────────
+
+    def wait_for_publication(self, post_ids: list[str], *, wait_seconds: float, poll_seconds: float,
+                              window: tuple[str, str]) -> dict:
+        """Poll GET /api/public/v1/posts until every id reaches state=PUBLISHED.
+
+        Fail-closed by design (ADR SPEC 3f, ported verbatim from
+        heartbeat_outcome._wait_for_postiz_publication): QUEUE/ERROR/timeout
+        never resolve as published=True. Not used for draft-mode jobs (a
+        draft never enters a publishing workflow), only for the legacy
+        publish-gate 'now' path this client also backs.
+        """
+        import time as _time
+
+        deadline = _time.monotonic() + wait_seconds
+        start_iso, end_iso = window
+        while _time.monotonic() <= deadline:
+            response = self._request(
+                "GET", "/api/public/v1/posts", headers=self._headers(),
+                params={"startDate": start_iso, "endDate": end_iso}, timeout=self.request_timeout,
+            )
+            try:
+                body = response.json()
+            except ValueError:
+                raise PostizAPIError("Postiz retornou um corpo não-JSON em GET /posts.") from None
+            posts = body.get("posts", body) if isinstance(body, dict) else body
+            states = {
+                item.get("id"): item.get("state")
+                for item in posts or []
+                if isinstance(item, dict) and item.get("id") in post_ids
+            }
+            if any(states.get(pid) == "ERROR" for pid in post_ids):
+                return {"published": False, "detail": f"Postiz marcou publicação como ERROR: {states}."}
+            if all(states.get(pid) == "PUBLISHED" for pid in post_ids):
+                return {"published": True, "detail": f"Postiz confirmou PUBLISHED para {', '.join(post_ids)}."}
+            _time.sleep(poll_seconds)
+        return {
+            "published": False,
+            "detail": f"Postiz não confirmou PUBLISHED em {wait_seconds:g}s para {', '.join(post_ids)}.",
+        }
diff --git a/dashboard/backend/provider_fallback.py b/dashboard/backend/provider_fallback.py
new file mode 100644
index 000000000..7a9f0765a
--- /dev/null
+++ b/dashboard/backend/provider_fallback.py
@@ -0,0 +1,930 @@
+"""Provider Fallback Engine — automatic 429/quota detection & provider rotation.
+
+Reads the active provider from config/providers.json and its fallback_models /
+fallback_providers configuration. When a subprocess call returns 429/quota
+errors, this module cycles to the next model (within the same provider) or
+to the next provider entirely.
+
+Cooldown tracking prevents thrashing — a model/provider that 429'd gets a
+cooldown window before we try it again.
+
+Usage:
+    from provider_fallback import FallbackEngine
+
+    engine = FallbackEngine()
+    for attempt in engine.attempts(prompt, max_turns=10, timeout=600):
+        result = attempt.run()
+        if result["status"] == "success":
+            break
+        # engine automatically records 429 and advances to next model/provider
+"""
+
+from __future__ import annotations
+
+import contextlib
+import fcntl
+import json
+import os
+import re
+import shutil
+import signal
+import subprocess
+import threading
+import time
+from dataclasses import dataclass, field
+from pathlib import Path
+from typing import Iterator
+
+WORKSPACE = Path(__file__).resolve().parent.parent.parent
+PROVIDERS_CONFIG = WORKSPACE / "config" / "providers.json"
+
+
+def _usable_secret(value: str | None) -> bool:
+    if not value:
+        return False
+    value = value.strip()
+    return value not in {"[REDACTED]", "REDACTED", "your_bot_token_here", "your_chat_id_here"}
+
+
+def _load_workspace_env() -> None:
+    """Load root .env without depending on python-dotenv."""
+    env_file = WORKSPACE / ".env"
+    if not env_file.exists():
+        return
+    for line in env_file.read_text(encoding="utf-8").splitlines():
+        stripped = line.strip()
+        if not stripped or stripped.startswith("#") or "=" not in stripped:
+            continue
+        key, value = stripped.split("=", 1)
+        key = key.strip()
+        value = value.strip().strip("'\"")
+        if key and _usable_secret(value):
+            os.environ.setdefault(key, value)
+
+
+_load_workspace_env()
+
+# ── Per-model inflight lock ──────────────────────────────────────────────────
+# Prevents two heartbeat threads from picking the same model at the same
+# instant and getting back-to-back 429s. Each call acquires the model key for
+# the duration of its HTTP round-trip; the next caller will pick a different
+# model from the chain instead of doubling up.
+_inflight_locks: dict[str, threading.Lock] = {}
+_inflight_locks_guard = threading.Lock()
+
+
+def _model_lock(model_key: str) -> threading.Lock:
+    with _inflight_locks_guard:
+        lk = _inflight_locks.get(model_key)
+        if lk is None:
+            lk = threading.Lock()
+            _inflight_locks[model_key] = lk
+        return lk
+
+# ── Error patterns that trigger fallback ──────────────────────────────────────
+
+_429_PATTERNS = [
+    re.compile(r"429", re.IGNORECASE),
+    re.compile(r"rate.?limit", re.IGNORECASE),
+    re.compile(r"quota", re.IGNORECASE),
+    re.compile(r"too many requests", re.IGNORECASE),
+    re.compile(r"resource.?exhausted", re.IGNORECASE),
+    re.compile(r"capacity", re.IGNORECASE),
+    re.compile(r"overloaded", re.IGNORECASE),
+    re.compile(r"service.?unavailable", re.IGNORECASE),
+    re.compile(r"temporarily.?unavailable", re.IGNORECASE),
+    re.compile(r"insufficient_quota", re.IGNORECASE),
+    re.compile(r"billing.?limit", re.IGNORECASE),
+    re.compile(r"plan.?limit", re.IGNORECASE),
+    re.compile(r"maximum combo retry limit reached", re.IGNORECASE),
+]
+
+# Fatal errors that should NOT trigger fallback (auth / config issues)
+_FATAL_PATTERNS = [
+    re.compile(r"401", re.IGNORECASE),
+    re.compile(r"403", re.IGNORECASE),
+    re.compile(r"invalid.?api.?key", re.IGNORECASE),
+    re.compile(r"authentication", re.IGNORECASE),
+    re.compile(r"unauthorized", re.IGNORECASE),
+    re.compile(r"forbidden", re.IGNORECASE),
+]
+
+
+def is_429_error(error_text: str) -> bool:
+    """Check if error text indicates a 429/rate-limit/quota issue."""
+    if not error_text:
+        return False
+    has_429 = any(p.search(error_text) for p in _429_PATTERNS)
+    has_fatal = any(p.search(error_text) for p in _FATAL_PATTERNS)
+    if has_fatal and not has_429:
+        return False
+    return has_429
+
+
+# ── Cooldown tracking ─────────────────────────────────────────────────────────
+
+_cooldowns: dict[str, float] = {}
+DEFAULT_COOLDOWN_SECONDS = 60   # 1 min — faster rotation through the NVIDIA chain
+
+# A model that hangs (no response, no error, no 429) previously ate the FULL
+# timeout_seconds of a single attempt before the chain could advance — with
+# timeout_seconds=900 and 12 NVIDIA models, worst case was 3h stuck on one
+# call. Confirmed live 2026-07-14 (ai-news-weekly-x-research: sage step stuck
+# 11+ min with zero attempt-failed log lines). Cap each attempt so a hang
+# gets cut and the chain rotates quickly; the overall deadline below still
+# respects the caller's timeout_seconds as a TOTAL budget.
+PER_ATTEMPT_TIMEOUT_CAP = 180
+
+
+def set_cooldown(key: str, duration_seconds: float = DEFAULT_COOLDOWN_SECONDS):
+    _cooldowns[key] = time.time() + duration_seconds
+
+
+def is_on_cooldown(key: str) -> bool:
+    deadline = _cooldowns.get(key)
+    if deadline is None:
+        return False
+    if time.time() > deadline:
+        _cooldowns.pop(key, None)
+        return False
+    return True
+
+
+def clear_cooldown(key: str):
+    _cooldowns.pop(key, None)
+
+
+def clear_all_cooldowns():
+    _cooldowns.clear()
+
+
+def _agent_prompt(agent: str | None) -> str:
+    """Return agent persona text without YAML frontmatter."""
+    if not agent:
+        return ""
+    agent_file = WORKSPACE / ".claude" / "agents" / f"{agent}.md"
+    try:
+        content = agent_file.read_text(encoding="utf-8")
+    except OSError:
+        return f"You are the {agent} agent."
+    if content.startswith("---"):
+        parts = content.split("---", 2)
+        if len(parts) == 3:
+            content = parts[2]
+    for marker in ("\n# Persistent Agent Memory", "\n## MEMORY.md"):
+        if marker in content:
+            content = content.split(marker, 1)[0]
+    return content.strip()
+
+
+def _embed_agent_for_openclaude(prompt: str, agent: str | None) -> str:
+    """OpenClaude can misparse --agent frontmatter; embed persona in prompt.
+
+    Reused as-is for opencode (validated 2026-07-12, spike/opencode-runtime):
+    same embed-in-prompt pattern works unmodified, no adaptation needed.
+    """
+    persona = _agent_prompt(agent)
+    if not persona:
+        return prompt
+    return (
+        f"{persona}\n\n"
+        f"CRITICAL: You MUST fully embody this agent persona. "
+        f"You are NOT Claude, OpenClaude, or a generic assistant — you ARE {agent}. "
+        f"Never break character. Follow ALL instructions above.\n\n"
+        f"---\n\nTask:\n{prompt}"
+    )
+
+
+# ── Config reading ─────────────────────────────────────────────────────────────
+
+def _read_providers_config() -> dict:
+    try:
+        if PROVIDERS_CONFIG.is_file():
+            return json.loads(PROVIDERS_CONFIG.read_text(encoding="utf-8"))
+    except (json.JSONDecodeError, OSError):
+        pass
+    return {"active_provider": "nvidia", "providers": {}}
+
+
+# ── Default fallback chains ───────────────────────────────────────────────────
+
+# NVIDIA: models are independent — quota on one doesn't block others.
+# Primary is GLM 5.1 on NVIDIA; if quota/rate-limit hits, rotate inside
+# NVIDIA first, then leave the provider only after these core models fail.
+# NVIDIA chain — 12 models validated on integrate.api.nvidia.com/v1.
+# Two principles shape the order:
+#   1. Don't double up on the same model — multiple agents pulling the same
+#      model at once produces burst 429s that waste quotas. The dispatcher
+#      uses per-model inflight locks above to stagger picks; this list is the
+#      fallback rotation when one model hits quota.
+#   2. Variety matters more than "best first" because of cooldown windows —
+#      if z-ai/glm-5.1 just bounced, we should be able to keep working
+#      without leaving NVIDIA. Hence deepseek + kimi + mistral + stepfun all
+#      having slots equal to their flagship counterparts.
+#
+# Felipe-specified order (validated 2026-06-16, returning 200 on /chat/completions).
+NVIDIA_MODEL_CHAIN = [
+    "stepfun-ai/step-3.7-flash",            # 1  — StepFun 3.7 Flash
+    "deepseek-ai/deepseek-v4-flash",        # 2  — DeepSeek V4 Flash
+    "z-ai/glm-5.1",                         # 3  — Z.AI GLM 5.1 (flagship)
+    "moonshotai/kimi-k2.6",                 # 4  — Moonshot Kimi K2.6
+    "nvidia/nemotron-3-ultra-550b-a55b",    # 5  — NVIDIA Nemotron 3 Ultra 550B
+    "nvidia/nemotron-3-super-120b-a12b",    # 6  — NVIDIA Nemotron 3 Super 120B
+    "qwen/qwen3.5-122b-a10b",               # 7  — Qwen 3.5 122B A10B
+    "qwen/qwen3.5-397b-a17b",               # 8  — Qwen 3.5 397B A17B (big MoE)
+    "openai/gpt-oss-120b",                  # 9  — OpenAI GPT-OSS 120B
+    "microsoft/phi-4-multimodal-instruct",  # 10 — Microsoft Phi-4 Multimodal
+    "stepfun-ai/step-3.5-flash",            # 11 — StepFun 3.5 Flash
+    "minimaxai/minimax-m3",                 # 12 — MiniMax M3
+]
+
+# Provider chain: NVIDIA (12 models) → OpenRouter (owl-alpha + nex-n2-pro free) → Claude
+# NVIDIA is always first — OpenRouter only as last resort when all 12 NVIDIA models are on cooldown.
+# OpenRouter models must be FREE (no paid tier) to avoid burning credits unintentionally.
+DEFAULT_PROVIDER_CHAIN = [
+    {
+        "provider_id": "nvidia",
+        "cli_command": "openclaude",
+        "base_url": "https://integrate.api.nvidia.com/v1",
+        "env_vars": {
+            "CLAUDE_CODE_USE_OPENAI": "1",
+            "OPENAI_BASE_URL": "https://integrate.api.nvidia.com/v1",
+        },
+        "model_chain": NVIDIA_MODEL_CHAIN,
+    },
+    {
+        "provider_id": "openrouter",
+        "cli_command": "openclaude",
+        "base_url": "https://openrouter.ai/api/v1",
+        "env_vars": {
+            "CLAUDE_CODE_USE_OPENAI": "1",
+            "OPENAI_BASE_URL": "https://openrouter.ai/api/v1",
+        },
+        "model_chain": [
+            "openrouter/owl-alpha",
+            "nex-agi/nex-n2-pro:free",
+        ],
+    },
+    {
+        "provider_id": "anthropic",
+        "cli_command": "claude",
+        "base_url": None,
+        "env_vars": {},
+        "model_chain": [None],
+    },
+]
+
+
+def _resolve_provider_chain(config: dict) -> list[dict]:
+    """Build the provider chain from config, falling back to defaults."""
+    active_id = config.get("active_provider", "nvidia")
+    providers = config.get("providers", {})
+    active_prov = providers.get(active_id, {})
+
+    explicit_chain = active_prov.get("fallback_providers")
+    if isinstance(explicit_chain, list) and explicit_chain:
+        chain = [_build_provider_entry(active_id, providers)]
+        for pid in explicit_chain:
+            if pid in providers:
+                chain.append(_build_provider_entry(pid, providers))
+        return chain if len(chain) >= 2 else DEFAULT_PROVIDER_CHAIN
+
+    return DEFAULT_PROVIDER_CHAIN
+
+
+def _build_provider_entry(provider_id: str, providers: dict) -> dict:
+    prov = providers.get(provider_id, {})
+    env_vars = {k: v for k, v in prov.get("env_vars", {}).items()
+                if v and k not in ("OPENAI_API_KEY", "OPENAI_MODEL")}
+
+    primary_model = prov.get("default_model") or prov.get("env_vars", {}).get("OPENAI_MODEL")
+    model_chain = []
+    if primary_model:
+        model_chain.append(primary_model)
+    for fallback_model in prov.get("fallback_models", []):
+        if fallback_model and fallback_model not in model_chain:
+            model_chain.append(fallback_model)
+
+    if not model_chain and prov.get("cli_command") == "claude":
+        model_chain = [None]
+
+    return {
+        "provider_id": provider_id,
+        "cli_command": prov.get("cli_command", "openclaude"),
+        "base_url": prov.get("default_base_url") or prov.get("env_vars", {}).get("OPENAI_BASE_URL"),
+        "env_vars": env_vars,
+        "model_chain": model_chain,
+    }
+
+
+def _get_api_key(provider_id: str, config: dict) -> str:
+    if provider_id in {"codex_auth", "anthropic"}:
+        return ""
+
+    prov = config.get("providers", {}).get(provider_id, {})
+    env_vars = prov.get("env_vars", {})
+    base_url = (env_vars.get("OPENAI_BASE_URL") or prov.get("default_base_url") or "").lower()
+
+    # A chave do próprio provider vence. config/providers.json pode conter
+    # placeholders [REDACTED] — _usable_secret filtra e caímos no env do
+    # processo. A NVIDIA_API_KEY do env só vale para endpoints da NVIDIA:
+    # antes ela tinha precedência global e sequestrava chamadas a outros
+    # gateways (omnirouter recebia a chave NVIDIA → 401).
+    for key_name in ("OPENAI_API_KEY", "NVIDIA_API_KEY", "GEMINI_API_KEY"):
+        val = env_vars.get(key_name, "")
+        if _usable_secret(val):
+            return val
+
+    fallback_keys = ["OPENAI_API_KEY", "GEMINI_API_KEY"]
+    if "nvidia.com" in base_url:
+        fallback_keys.insert(0, "NVIDIA_API_KEY")
+    for key_name in fallback_keys:
+        value = os.environ.get(key_name, "")
+        if _usable_secret(value):
+            return value
+
+    return ""
+
+
+# ── Attempt record ─────────────────────────────────────────────────────────────
+
+@dataclass
+class FallbackAttempt:
+    attempt_number: int
+    provider_id: str
+    model: str | None
+    cli_command: str
+    prompt: str
+    max_turns: int
+    timeout_seconds: int
+    agent: str = ""
+    env_overrides: dict = field(default_factory=dict)
+    cwd: "Path | None" = None
+    _result: dict | None = field(default=None, repr=False)
+
+    def run(self) -> dict:
+        self._result = _invoke_cli(
+            cli_command=self.cli_command,
+            prompt=self.prompt,
+            max_turns=self.max_turns,
+            timeout_seconds=self.timeout_seconds,
+            agent=self.agent,
+            env_overrides=self.env_overrides,
+            provider_id=self.provider_id,
+            model=self.model,
+            cwd=self.cwd,
+        )
+        return self._result
+
+    @property
+    def result(self) -> dict | None:
+        return self._result
+
+    @property
+    def is_429(self) -> bool:
+        if not self._result:
+            return False
+        error = self._result.get("error") or ""
+        output = self._result.get("output") or ""
+        return is_429_error(error) or is_429_error(output)
+
+    @property
+    def is_fatal(self) -> bool:
+        """Fatal means auth/config errors that are unlikely to be fixed by another model."""
+        if not self._result:
+            return False
+        if self._result.get("status") == "success":
+            return False
+        if self.is_429:
+            return False
+        error = (self._result.get("error") or self._result.get("output") or "").lower()
+        fatal_terms = (
+            "invalid_api_key", "invalid api key", "401", "403",
+            "unauthorized", "forbidden", "authentication", "api key",
+            "no usable api key", "has no usable api key",
+        )
+        return any(term in error for term in fatal_terms)
+
+
+# ── Agent subprocess env isolation (goal-ticket-unification V10) ────────────
+# Two call sites build the env for an agent subprocess: _invoke_cli below,
+# and heartbeat_runner._step7_invoke_claude_native (the legacy direct path,
+# used when provider fallback is disabled/unavailable). Both MUST go through
+# this one helper — agents run with --dangerously-skip-permissions, so
+# whatever lands in their env is theirs to use. Before this, both call sites
+# did `dict(os.environ)` unfiltered, meaning an agent could read
+# APPROVAL_BRIDGE_TOKEN out of its own env and call the approval-decision
+# endpoint to approve its own publish, or read social-platform credentials
+# and publish directly instead of going through the approval gate at all
+# (Vault V1c/V2). DASHBOARD_API_TOKEN is NOT denylisted: it is what
+# sdk_client.EvoClient uses for every legitimate agent call (create-ticket,
+# manage-heartbeats, the goal-planner heartbeat, etc.), and it alone never
+# authorizes /api/approvals/*/decision — that endpoint requires the separate
+# APPROVAL_BRIDGE_TOKEN (see routes/_helpers.py::valid_approval_bridge_token),
+# which stays denylisted below. Denylist, not allowlist, because most of
+# os.environ (PATH, locale, provider config, etc.) legitimately needs to
+# reach the agent.
+_AGENT_ENV_DENYLIST_EXACT = {"APPROVAL_BRIDGE_TOKEN", "POSTIZ_API_KEY"}
+_AGENT_ENV_DENYLIST_PREFIXES = ("SOCIAL_", "INSTAGRAM_", "LINKEDIN_", "TWITTER_", "DISCORD_")
+
+
+def _build_agent_run_env(env_overrides: dict | None = None) -> dict:
+    """Build the subprocess env for an agent run, minus the denylisted keys."""
+    run_env = {
+        k: v for k, v in os.environ.items()
+        if k not in _AGENT_ENV_DENYLIST_EXACT and not k.startswith(_AGENT_ENV_DENYLIST_PREFIXES)
+    }
+    if env_overrides:
+        for k, v in env_overrides.items():
+            if v is not None:
+                run_env[k] = str(v)
+    # Impede o CLI de se auto-migrar pro instalador nativo no meio da run
+    # (mata o processo com exit 1).
+    run_env["DISABLE_AUTOUPDATER"] = "1"
+    return run_env
+
+
+# ── Core invocation ─────────────────────────────────────────────────────────────
+
+def _invoke_cli(
+    cli_command: str,
+    prompt: str,
+    max_turns: int,
+    timeout_seconds: int,
+    agent: str = "",
+    env_overrides: dict | None = None,
+    provider_id: str | None = None,
+    model: str | None = None,
+    cwd: Path | None = None,
+) -> dict:
+    cli_bin = shutil.which(cli_command)
+    if not cli_bin:
+        return {
+            "status": "fail",
+            "error": f"{cli_command} binary not found in PATH",
+            "output": "",
+            "duration_ms": 0,
+            "tokens_in": None, "tokens_out": None, "cost_usd": None,
+        }
+
+    output_mode = "envelope"
+    if cli_command == "opencode":
+        # opencode não tem --max-turns nem --dangerously-skip-permissions — o
+        # equivalente de bypass de permissão é --auto (validado spike
+        # 2026-07-12). Seleção de modelo é via -m provider/model, não por
+        # env var OPENAI_MODEL — provider_id precisa bater com uma entry em
+        # opencode.json (ver opencode.json na raiz do workspace).
+        prompt = _embed_agent_for_openclaude(prompt, agent)
+        agent = ""
+        model_ref = f"{provider_id}/{model}" if model else f"{provider_id}/auto"
+        cmd = [cli_bin, "run", prompt, "-m", model_ref, "--format", "json", "--auto"]
+        output_mode = "opencode-ndjson"
+    else:
+        cmd = [cli_bin, "--print", "--max-turns", str(max_turns),
+               "--dangerously-skip-permissions", "--output-format", "json"]
+        if cli_command == "openclaude":
+            prompt = _embed_agent_for_openclaude(prompt, agent)
+            agent = ""
+        if agent:
+            cmd.extend(["--agent", agent])
+        cmd.extend(["--", prompt])
+
+    run_env = _build_agent_run_env(env_overrides)
+
+    # Acquire a per-model inflight lock so concurrent calls cannot pick the same
+    # model at the same instant (the canonical cause of burst 429s on shared
+    # providers). Non-blocking acquire: if another worker is mid-flight against
+    # this model, return a sentinel and let the caller skip to the next chain
+    # member instead of doubling up the quota burn.
+    model_key = f"{provider_id}:{model}" if model else f"{provider_id}:native-{os.getpid()}"
+    lk = _model_lock(model_key)
+    if not lk.acquire(blocking=False):
+        return {
+            "status": "fail",
+            "error": f"model {model} busy (concurrent call in flight) — skip to next model",
+            "output": "",
+            "duration_ms": 0,
+            "tokens_in": None, "tokens_out": None, "cost_usd": None,
+            "fallback_exhausted": False,
+            "skip_advance_model": True,
+        }
+    try:
+        return _invoke_cli_run(cmd, run_env, timeout_seconds, cwd or WORKSPACE, output_mode=output_mode)
+    finally:
+        lk.release()
+
+    # The CLI emits a JSON result envelope (--output-format json) carrying token
+    # usage and cost — parse it so heartbeat runs land accurate numbers on the
+    # /costs page instead of nulls. Best-effort: never let parsing break a run.
+    tokens_in = tokens_out = cost_usd = None
+    try:
+        envelope = json.loads(output)
+        usage = envelope.get("usage") or {}
+        tokens_in = usage.get("input_tokens")
+        tokens_out = usage.get("output_tokens")
+        cost_usd = envelope.get("total_cost_usd")
+    except (json.JSONDecodeError, AttributeError, TypeError):
+        pass
+
+    return {
+        "status": status, "output": output, "error": error,
+        "duration_ms": duration_ms,
+        "tokens_in": tokens_in, "tokens_out": tokens_out, "cost_usd": cost_usd,
+    }
+
+
+
+def _parse_opencode_ndjson(output: str) -> dict:
+    """opencode --format json emits one JSON event per line (step_start, text,
+    step_finish, ...) instead of Claude Code's single envelope. Validated
+    2026-07-12 against a real OmniRoute call — step_finish carries
+    tokens.{input,output} and cost; text events carry the assistant's reply.
+    """
+    tokens_in = tokens_out = cost_usd = None
+    text_parts: list[str] = []
+    saw_error = False
+    error_message = ""
+    for line in output.splitlines():
+        line = line.strip()
+        if not line:
+            continue
+        try:
+            event = json.loads(line)
+        except (json.JSONDecodeError, TypeError):
+            continue
+        etype = event.get("type")
+        part = event.get("part") or {}
+        if etype == "text":
+            t = part.get("text")
+            if t:
+                text_parts.append(t)
+        elif etype == "error":
+            saw_error = True
+            err = event.get("error") or {}
+            msg = err.get("data", {}).get("message") if isinstance(err.get("data"), dict) else None
+            error_message = msg or err.get("name") or error_message
+        elif etype == "step_finish":
+            usage = part.get("tokens") or {}
+            if usage.get("input") is not None:
+                tokens_in = usage.get("input")
+            if usage.get("output") is not None:
+                tokens_out = usage.get("output")
+            if part.get("cost") is not None:
+                cost_usd = part.get("cost")
+    return {
+        "text": "\n".join(text_parts),
+        "tokens_in": tokens_in, "tokens_out": tokens_out, "cost_usd": cost_usd,
+        "saw_error": saw_error, "error_message": error_message,
+    }
+
+
+def _invoke_cli_run(cmd: list, run_env: dict, timeout_seconds: int, workspace: Path,
+                     output_mode: str = "envelope") -> dict:
+    """Inner run — assume the per-model inflight lock is already held.
+    Holds the subprocess, parses tokens, applies backoff on 429, returns dict.
+    """
+    import subprocess as _sp
+    start_time = time.time()
+    proc = None
+    output = ""
+    error = None
+    status = "success"
+
+    try:
+        proc = _sp.Popen(
+            cmd, stdout=_sp.PIPE, stderr=_sp.PIPE,
+            text=True, cwd=str(workspace), start_new_session=True, env=run_env,
+        )
+        try:
+            stdout, stderr = proc.communicate(timeout=timeout_seconds)
+            output = stdout or ""
+            if proc.returncode != 0:
+                status = "fail"
+                error = stderr[:2000] if stderr else f"exit code {proc.returncode}"
+        except _sp.TimeoutExpired:
+            try:
+                os.killpg(os.getpgid(proc.pid), signal.SIGKILL)
+            except (ProcessLookupError, OSError):
+                proc.kill()
+            try:
+                proc.communicate(timeout=5)
+            except _sp.TimeoutExpired:
+                pass
+            status = "timeout"
+            error = f"Killed after {timeout_seconds}s timeout"
+    except Exception as exc:
+        status = "fail"
+        error = str(exc)
+
+    duration_ms = int((time.time() - start_time) * 1000)
+
+    tokens_in = tokens_out = cost_usd = None
+    if output_mode == "opencode-ndjson":
+        parsed = _parse_opencode_ndjson(output)
+        tokens_in, tokens_out, cost_usd = parsed["tokens_in"], parsed["tokens_out"], parsed["cost_usd"]
+        if parsed["saw_error"]:
+            status = "fail"
+            # troca o "exit code 1" genérico pela mensagem real do evento de
+            # erro do opencode — is_429_error()/is_fatal também escaneiam
+            # `output` (o ndjson bruto), então a detecção de 429/fatal já
+            # funcionava antes disso; isso só melhora a legibilidade do log.
+            if parsed["error_message"] and (not error or error.startswith("exit code")):
+                error = parsed["error_message"]
+            elif not error:
+                error = "opencode emitted an error event in the ndjson stream"
+        if status == "success" and not parsed["text"] and tokens_in is None:
+            # nem texto nem step_finish — stream vazio/quebrado, não confia
+            status = "fail"
+            error = error or "opencode produced no text/step_finish events"
+    else:
+        try:
+            envelope = json.loads(output)
+            usage = envelope.get("usage") or {}
+            tokens_in = usage.get("input_tokens")
+            tokens_out = usage.get("output_tokens")
+            cost_usd = envelope.get("total_cost_usd")
+            if status != "success" and envelope.get("type") == "result" and envelope.get("result") and envelope.get("is_error") is False:
+                status = "success"
+                error = None
+        except (json.JSONDecodeError, AttributeError, TypeError):
+            pass
+
+    return {
+        "status": status, "output": output, "error": error,
+        "duration_ms": duration_ms,
+        "tokens_in": tokens_in, "tokens_out": tokens_out, "cost_usd": cost_usd,
+    }
+
+
+# ── Fallback Engine ─────────────────────────────────────────────────────────────
+
+class FallbackEngine:
+    """Iterates through provider + model chains, falling back on 429/quota errors."""
+
+    def __init__(self, provider_chain: list[dict] | None = None):
+        if provider_chain is None:
+            config = _read_providers_config()
+            provider_chain = _resolve_provider_chain(config)
+        self.provider_chain = provider_chain
+        self._attempts_log: list[FallbackAttempt] = []
+
+    def attempts(
+        self,
+        prompt: str,
+        max_turns: int = 10,
+        timeout_seconds: int = 600,
+        agent: str = "",
+        force_provider: str | None = None,
+        force_model: str | None = None,
+        cwd: Path | None = None,
+    ) -> Iterator[FallbackAttempt]:
+        config = _read_providers_config()
+        attempt_num = 0
+        deadline = time.time() + timeout_seconds
+
+        chain = self.provider_chain
+        if force_provider:
+            chain = [p for p in chain if p["provider_id"] == force_provider]
+            if not chain and force_provider == "nvidia":
+                chain = [DEFAULT_PROVIDER_CHAIN[0]]
+
+        for provider_entry in chain:
+            provider_id = provider_entry["provider_id"]
+            cli_command = provider_entry["cli_command"]
+            base_url = provider_entry.get("base_url")
+            model_chain = provider_entry.get("model_chain", [None])
+            base_env = dict(provider_entry.get("env_vars", {}))
+
+            if base_url:
+                base_env["OPENAI_BASE_URL"] = base_url
+
+            api_key = _get_api_key(provider_id, config)
+            if api_key:
+                base_env["OPENAI_API_KEY"] = api_key
+                # openclaude ≥0.18 detects the NVIDIA NIM base URL and requires
+                # the key in NVIDIA_API_KEY — derive it so auth doesn't fail and
+                # wrongly skip to the next provider. Mirrors provider-config.js.
+                if "nvidia.com" in (base_url or "") and "NVIDIA_API_KEY" not in base_env:
+                    base_env["NVIDIA_API_KEY"] = api_key
+
+            for model in model_chain:
+                if force_model and model != force_model:
+                    continue
+
+                cooldown_key = f"{provider_id}:{model}" if model else provider_id
+                if is_on_cooldown(cooldown_key):
+                    continue
+
+                # Provider-level cooldown (NVIDIA exempt — models independent)
+                if is_on_cooldown(provider_id) and provider_id != "nvidia":
+                    continue
+
+                remaining = deadline - time.time()
+                if remaining < 20:
+                    return
+                attempt_timeout = int(min(remaining, PER_ATTEMPT_TIMEOUT_CAP))
+
+                attempt_num += 1
+
+                env_overrides = dict(base_env)
+                if model:
+                    env_overrides["OPENAI_MODEL"] = model
+
+                attempt = FallbackAttempt(
+                    attempt_number=attempt_num,
+                    provider_id=provider_id,
+                    model=model,
+                    cli_command=cli_command,
+                    prompt=prompt,
+                    max_turns=max_turns,
+                    timeout_seconds=attempt_timeout,
+                    agent=agent,
+                    env_overrides=env_overrides,
+                    cwd=cwd,
+                )
+                self._attempts_log.append(attempt)
+                yield attempt
+
+                # After caller runs the attempt, check result
+                if attempt.result is None:
+                    continue
+
+                if attempt.result.get("status") == "success":
+                    return
+
+                if attempt.is_429:
+                    set_cooldown(cooldown_key)
+                    print(f"[fallback] 429 on {provider_id}:{model} — "
+                          f"cooldown {DEFAULT_COOLDOWN_SECONDS}s, trying next", flush=True)
+                    continue
+
+                if attempt.is_fatal:
+                    print(f"[fallback] fatal error on {provider_id}:{model} — "
+                          f"skipping to next provider", flush=True)
+                    break
+
+                continue
+
+    @property
+    def attempts_log(self) -> list[FallbackAttempt]:
+        return list(self._attempts_log)
+
+    def last_successful_attempt(self) -> FallbackAttempt | None:
+        for a in reversed(self._attempts_log):
+            if a.result and a.result.get("status") == "success":
+                return a
+        return None
+
+
+# ── Convenience: single call with automatic fallback ───────────────────────────
+
+# ── Cross-container workspace-bash mutex ─────────────────────────────────────
+# Heartbeats (dashboard service) and the Telegram orchestrator (telegram
+# service, since the 2026-07-15 rewire) both funnel through this function,
+# each running in its OWN container, and both can spawn a real Bash/Agent-
+# capable CLI session against the SAME /workspace tree with zero coordination
+# — two concurrent runs (e.g. two Telegram chats, or a heartbeat + a Telegram
+# message) can race on the same file or git working tree.
+#
+# A DB-row lock (the tickets.locked_at/locked_by pattern) won't work here:
+# dashboard.db lives on the evonexus_dashboard_data volume, which is only
+# mounted in the dashboard service — telegram and scheduler don't have it, so
+# a sqlite-based lock would silently be per-container and coordinate nothing.
+# evonexus_workspace IS mounted at the same path (/workspace/workspace) in
+# all three services, so flock() on a file there is a real, OS-enforced,
+# cross-container mutex — and unlike the ticket lock, it needs no janitor
+# sweep: the OS releases it automatically if the holding process dies.
+_ORCH_LOCK_PATH = WORKSPACE / "workspace" / ".locks" / "orchestrator-bash.lock"
+_ORCH_LOCK_WAIT_SECONDS = float(os.environ.get("ORCHESTRATOR_LOCK_WAIT_SECONDS", "120"))
+_ORCH_LOCK_POLL_SECONDS = 0.5
+
+
+@contextlib.contextmanager
+def _workspace_bash_lock(holder: str) -> Iterator[None]:
+    """Block until the workspace-wide Bash mutex is free, then hold it.
+
+    Raises TimeoutError if it can't acquire within _ORCH_LOCK_WAIT_SECONDS —
+    callers should turn that into a clean "busy" result rather than letting
+    it propagate as an unhandled exception.
+    """
+    _ORCH_LOCK_PATH.parent.mkdir(parents=True, exist_ok=True)
+    fd = os.open(str(_ORCH_LOCK_PATH), os.O_CREAT | os.O_RDWR, 0o644)
+    deadline = time.time() + _ORCH_LOCK_WAIT_SECONDS
+    acquired = False
+    try:
+        while time.time() < deadline:
+            try:
+                fcntl.flock(fd, fcntl.LOCK_EX | fcntl.LOCK_NB)
+                acquired = True
+                break
+            except BlockingIOError:
+                time.sleep(_ORCH_LOCK_POLL_SECONDS)
+        if not acquired:
+            raise TimeoutError(
+                f"workspace busy — another agentic run held the lock for {_ORCH_LOCK_WAIT_SECONDS}s"
+            )
+        try:
+            os.ftruncate(fd, 0)
+            os.write(fd, f"{holder}:pid={os.getpid()}:since={time.time()}\n".encode())
+        except OSError:
+            pass  # best-effort observability only, never block on it
+        yield
+    finally:
+        if acquired:
+            try:
+                fcntl.flock(fd, fcntl.LOCK_UN)
+            except OSError:
+                pass
+        os.close(fd)
+
+
+def invoke_with_fallback(
+    prompt: str,
+    max_turns: int = 10,
+    timeout_seconds: int = 600,
+    agent: str = "",
+    force_provider: str | None = None,
+    force_model: str | None = None,
+    cwd: Path | None = None,
+) -> dict:
+    """Invoke CLI with automatic 429 fallback. Returns the first successful result.
+
+    `cwd` (social-media-production): when given, the subprocess runs in that
+    directory instead of the shared repo-root WORKSPACE, and the
+    cross-container `_workspace_bash_lock` is skipped entirely — that mutex
+    exists to protect concurrent Bash/Agent sessions racing on the shared
+    `/workspace` git worktree (heartbeats vs. the Telegram orchestrator); an
+    isolated job directory (e.g. a media-worker rendering job) is not part
+    of that tree and gains nothing from serializing behind it. Concurrency
+    for isolated-cwd callers is the caller's own responsibility (e.g. the
+    media-worker's replicas=1 + per-job DB lock).
+    """
+    if cwd is not None:
+        return _invoke_with_fallback_locked(
+            prompt=prompt, max_turns=max_turns, timeout_seconds=timeout_seconds,
+            agent=agent, force_provider=force_provider, force_model=force_model, cwd=cwd,
+        )
+    holder = f"agent={agent or 'none'}"
+    try:
+        with _workspace_bash_lock(holder):
+            return _invoke_with_fallback_locked(
+                prompt=prompt, max_turns=max_turns, timeout_seconds=timeout_seconds,
+                agent=agent, force_provider=force_provider, force_model=force_model,
+            )
+    except TimeoutError as exc:
+        print(f"[fallback] {exc}", flush=True)
+        return {
+            "status": "busy",
+            "error": str(exc),
+            "output": "", "duration_ms": 0,
+            "fallback_exhausted": False, "total_attempts": 0,
+        }
+
+
+def _invoke_with_fallback_locked(
+    prompt: str,
+    max_turns: int = 10,
+    timeout_seconds: int = 600,
+    agent: str = "",
+    force_provider: str | None = None,
+    force_model: str | None = None,
+    cwd: Path | None = None,
+) -> dict:
+    engine = FallbackEngine()
+    last_result = None
+
+    for attempt in engine.attempts(
+        prompt=prompt, max_turns=max_turns, timeout_seconds=timeout_seconds,
+        agent=agent, force_provider=force_provider, force_model=force_model, cwd=cwd,
+    ):
+        result = attempt.run()
+        result["provider_id"] = attempt.provider_id
+        result["model"] = attempt.model
+        result["attempt_number"] = attempt.attempt_number
+
+        if result["status"] == "success":
+            if attempt.attempt_number > 1:
+                print(f"[fallback] SUCCESS on attempt #{attempt.attempt_number} "
+                      f"({attempt.provider_id}:{attempt.model})", flush=True)
+            return result
+
+        if result.get("skip_advance_model"):
+            print(f"[fallback] skip {attempt.provider_id}:{attempt.model} ({result.get('error')})", flush=True)
+            continue
+
+        last_result = result
+        print(f"[fallback] attempt #{attempt.attempt_number} failed "
+              f"({attempt.provider_id}:{attempt.model}) status={result['status']}", flush=True)
+
+    if last_result:
+        last_result["fallback_exhausted"] = True
+        last_result["total_attempts"] = len(engine.attempts_log)
+    else:
+        last_result = {
+            "status": "fail",
+            "error": "No attempts made — all providers on cooldown or no chain configured",
+            "output": "", "duration_ms": 0,
+            "fallback_exhausted": True, "total_attempts": 0,
+        }
+
+    return last_result
diff --git a/dashboard/backend/rate_limit.py b/dashboard/backend/rate_limit.py
new file mode 100644
index 000000000..c1b499398
--- /dev/null
+++ b/dashboard/backend/rate_limit.py
@@ -0,0 +1,26 @@
+"""Shared Flask-Limiter instance for EvoNexus.
+
+Placing the limiter here (rather than in app.py directly) breaks the
+circular-import chain: app.py initialises it, route blueprints import it.
+
+Usage in a blueprint::
+
+    from rate_limit import limiter
+
+    @bp.route("/api/shares/<token>/view")
+    @limiter.limit("60 per minute")
+    def view_share(token: str):
+        ...
+"""
+
+from flask_limiter import Limiter
+from flask_limiter.util import get_remote_address
+
+# Uninitialised instance — app.py calls limiter.init_app(app) at startup.
+limiter = Limiter(
+    get_remote_address,
+    # Default: generous to avoid false positives on authenticated API routes.
+    # Individual endpoints override with @limiter.limit() decorators.
+    default_limits=["600 per minute"],
+    storage_uri="memory://",
+)
diff --git a/dashboard/backend/routes/_helpers.py b/dashboard/backend/routes/_helpers.py
index a523492fb..aaf93c2e4 100644
--- a/dashboard/backend/routes/_helpers.py
+++ b/dashboard/backend/routes/_helpers.py
@@ -1,7 +1,9 @@
 """Shared helpers for route modules."""
 
 import logging
+import os
 import re
+import secrets
 from pathlib import Path
 
 log = logging.getLogger(__name__)
@@ -9,6 +11,28 @@
 WORKSPACE = Path(__file__).resolve().parent.parent.parent.parent
 
 
+def valid_approval_bridge_token(auth_header: str | None) -> bool:
+    """Constant-time check against APPROVAL_BRIDGE_TOKEN (goal-ticket-unification).
+
+    Dedicated credential for the shared Telegram approval-decision endpoint —
+    deliberately NOT DASHBOARD_API_TOKEN, so an agent that inherits the admin
+    token cannot approve its own publish/decomposition gate (Vault V1). Used
+    both by app.py's before_request (to let the bot's bridge-token request
+    reach the route at all, V11) and by routes/approvals.py's own handler (to
+    reject a valid admin token that got the request past before_request via
+    the normal login flow, V1). Shared here instead of duplicated so both
+    call sites can't drift.
+    """
+    expected = os.environ.get("APPROVAL_BRIDGE_TOKEN", "").strip()
+    if not expected:
+        return False
+    header = auth_header or ""
+    if not header.startswith("Bearer "):
+        return False
+    provided = header[len("Bearer "):].strip()
+    return bool(provided) and secrets.compare_digest(provided, expected)
+
+
 def parse_frontmatter(text: str) -> dict:
     """Extract key-value pairs from YAML-style --- frontmatter."""
     m = re.match(r"^---\s*\n(.*?)\n---", text, re.DOTALL)
diff --git a/dashboard/backend/routes/_mempalace_worker.py b/dashboard/backend/routes/_mempalace_worker.py
index 9a357467b..032066c4a 100644
--- a/dashboard/backend/routes/_mempalace_worker.py
+++ b/dashboard/backend/routes/_mempalace_worker.py
@@ -5,7 +5,7 @@
     {
         "palace_path": "...",
         "status_file": "...",
-        "targets": [{"path": "...", "wing": "..."}]
+        "targets": [{"path": "...", "wing": "...", "room": "..."}]
     }
 
 Writes progress to the status file after every processed file so the
@@ -38,16 +38,23 @@
 )
 
 
-def ensure_mempalace_yaml(source_path: str, wing_override: str | None) -> None:
+def ensure_mempalace_yaml(
+    source_path: str, wing_override: str | None, room_override: str | None = None
+) -> None:
     """Auto-create a minimal mempalace.yaml in the source dir if missing.
 
     mempalace.miner.load_config() calls sys.exit(1) when it can't find the
     config, which would abort the whole mining run. To let the dashboard
     index any folder the user adds without asking them to hand-write a yaml,
     we drop a sensible default in place on first run: one wing named after
-    the folder (or the label the user gave), and a single "general" room.
-    Users can still edit the file by hand later if they want to categorize
-    their content into multiple rooms.
+    the folder (or the label the user gave), and one room.
+
+    room_override lets the dashboard's hierarchy sync (Mission -> Wing,
+    Project -> Room) name that single room after the owning Project instead
+    of the generic "general" — every file under a Project's
+    workspace_folder_path then routes to a room named after that Project
+    (miner.detect_room's Priority 1 matches the folder path against the
+    room name). Users can still hand-edit the file later to add more rooms.
     """
     src = Path(source_path).expanduser().resolve()
     yaml_path = src / "mempalace.yaml"
@@ -56,10 +63,11 @@ def ensure_mempalace_yaml(source_path: str, wing_override: str | None) -> None:
         return
 
     wing = wing_override or src.name or "default"
+    room = room_override or "general"
     content = (
         f"wing: {wing}\n"
         "rooms:\n"
-        "  - name: general\n"
+        f"  - name: {room}\n"
         "    description: All project files\n"
     )
     try:
@@ -154,7 +162,7 @@ def publish(
         # Drop a default mempalace.yaml in the source dir if it doesn't
         # have one yet. This lets the dashboard index any folder on first
         # run instead of failing silently with 100% skipped.
-        ensure_mempalace_yaml(source_path, t.get("wing"))
+        ensure_mempalace_yaml(source_path, t.get("wing"), t.get("room"))
 
         try:
             config = load_config(source_path)
diff --git a/dashboard/backend/routes/approvals.py b/dashboard/backend/routes/approvals.py
new file mode 100644
index 000000000..0cbfbdc71
--- /dev/null
+++ b/dashboard/backend/routes/approvals.py
@@ -0,0 +1,622 @@
+"""Approvals API — shared Telegram approve/reject gate (goal-ticket-unification).
+
+One `pending_approvals` table serves both gates (publish + decomposition, ADR
+SPEC 3). This module owns only the decision endpoint's infrastructure: auth,
+idempotent state transition, and correlation back to the ticket/goal. The
+business effect of an approval (actually publishing, actually creating
+sub-goal tickets) is wired in Step 7 — see the TODO markers below.
+"""
+
+from __future__ import annotations
+
+import json
+import os
+import re
+import sqlite3
+import uuid
+from datetime import datetime, timedelta, timezone
+from pathlib import Path
+
+from flask import Blueprint, jsonify, request, g
+from flask_login import current_user
+
+from models import db, has_permission, Ticket, TICKET_PRIORITIES, PRIORITY_RANK, GoalProject, Goal
+from routes._helpers import valid_approval_bridge_token
+
+bp = Blueprint("approvals", __name__)
+
+WORKSPACE = Path(__file__).resolve().parent.parent.parent.parent
+
+
+def _now() -> str:
+    return datetime.now(timezone.utc).strftime("%Y-%m-%dT%H:%M:%S.%fZ")
+
+
+def _db_path() -> str:
+    return str(WORKSPACE / "dashboard" / "data" / "evonexus.db")
+
+
+def _require(action: str, resource: str = "goals"):
+    if not has_permission(current_user.role, resource, action):
+        return jsonify({"error": "Forbidden"}), 403
+    return None
+
+
+def _approver_allowlist() -> set[str]:
+    """Individuals allowed to decide an approval (Vault V3 — not a chat/group).
+
+    Sourced from the same access.json the Telegram bot reads (TELEGRAM_STATE/
+    channels/telegram/access.json isn't reachable from this container — the
+    dashboard doesn't mount it — so this allowlist comes from the
+    APPROVAL_APPROVER_IDS env var instead, semicolon/comma-separated Telegram
+    user ids). The bot performs its own allowlist check before ever calling
+    this endpoint (§3d); this is defense in depth — decided_by is derived
+    from from_id, so this is the last check before that value is trusted.
+    """
+    raw = os.environ.get("APPROVAL_APPROVER_IDS", "")
+    ids = {i.strip() for i in re.split(r"[,;]", raw) if i.strip()}
+    return ids
+
+
+@bp.route("/api/approvals/<int:approval_id>/decision", methods=["POST"])
+def decide_approval(approval_id: int):
+    # V1: dedicated bridge token only — the general admin DASHBOARD_API_TOKEN
+    # is explicitly rejected here even if it got the request past
+    # before_request via the normal login flow.
+    if not valid_approval_bridge_token(request.headers.get("Authorization")):
+        return jsonify({"error": "forbidden"}), 403
+
+    data = request.get_json(silent=True) or {}
+    decision = data.get("decision")
+    if decision not in ("approve", "reject"):
+        return jsonify({"error": "decision must be 'approve' or 'reject'"}), 400
+
+    from_id = str(data.get("from_id") or "")
+    # V4: decided_by is DERIVED server-side from from_id after revalidating
+    # against the allowlist — never trust a decided_by in the body, it's
+    # forgeable by anyone who has the bridge token (the bot process).
+    if not from_id or from_id not in _approver_allowlist():
+        return jsonify({"error": "not an approver"}), 403
+    decided_by = f"telegram:{from_id}"
+    reason = str(data.get("reason") or "")[:500]
+
+    return _apply_decision(approval_id, decision, decided_by, reason, from_id)
+
+
+@bp.route("/api/approvals/<int:approval_id>/dashboard-decision", methods=["POST"])
+def decide_approval_via_dashboard(approval_id: int):
+    """Fallback decision path from the dashboard's own /approvals page
+    (panorama 2026-07-17, item 1) — for when the Telegram message got lost
+    or several Missions/Projects are mid-approval at once. Deliberately a
+    SEPARATE, narrower gate than the normal `_require` pattern:
+
+    - g.auth_via_api_token must be falsy — rejects DASHBOARD_API_TOKEN bearer
+      auth outright, even though that token maps to an admin `current_user`
+      and would otherwise pass `_require("manage")`. Many agents hold that
+      token via EvoClient; letting it decide approvals here would silently
+      reopen the exact hole V1 closed for /decision (an agent approving its
+      own publish/decomposition gate). Only a real browser session (cookie
+      set at /login, not a per-request Bearer login) may reach this line.
+    - current_user.role must be exactly "admin" (superadmin), not just
+      whatever role happens to have "manage" on the goals resource.
+    """
+    if getattr(g, "auth_via_api_token", False):
+        return jsonify({"error": "forbidden — use the Telegram approval flow for API/agent callers"}), 403
+    if not current_user.is_authenticated or current_user.role != "admin":
+        return jsonify({"error": "forbidden"}), 403
+
+    data = request.get_json(silent=True) or {}
+    decision = data.get("decision")
+    if decision not in ("approve", "reject"):
+        return jsonify({"error": "decision must be 'approve' or 'reject'"}), 400
+
+    decided_by = f"dashboard:{current_user.username}"
+    reason = str(data.get("reason") or "")[:500]
+
+    return _apply_decision(approval_id, decision, decided_by, reason, approver_from_id=None)
+
+
+def _apply_decision(approval_id: int, decision: str, decided_by: str, reason: str,
+                     approver_from_id: str | None) -> tuple:
+    """Shared effect logic for both decision entry points above — the atomic
+    checkout and the per-gate_type business effect (publish/decompose/
+    project_suggestion/goal_suggestion) are identical regardless of which
+    channel (Telegram bridge token vs dashboard session) made the call; only
+    the auth check and decided_by provenance differ between callers.
+    """
+    new_status = "approved" if decision == "approve" else "rejected"
+    now = _now()
+
+    # Atomic checkout: WHERE status='pending' + rowcount is the idempotency
+    # mechanism (Vault V6) — a second press on the same approval is a no-op
+    # 409, never a double-effect.
+    cur = db.session.execute(
+        db.text(
+            "UPDATE pending_approvals SET status=:s, decided_at=:t, decided_by=:b, "
+            "reject_reason=:r, approver_from_id=:f WHERE id=:id AND status='pending'"
+        ),
+        {"s": new_status, "t": now, "b": decided_by, "r": reason, "f": approver_from_id, "id": approval_id},
+    )
+    if cur.rowcount == 0:
+        db.session.rollback()
+        return jsonify({"error": "already decided or not found"}), 409
+    db.session.commit()
+
+    row = db.session.execute(
+        db.text(
+            "SELECT gate_type, ticket_id, goal_id, mission_id, project_id, agent, payload "
+            "FROM pending_approvals WHERE id=:id"
+        ),
+        {"id": approval_id},
+    ).fetchone()
+
+    if row.gate_type == "publish":
+        from heartbeat_outcome import _move_ticket, _run_publish_action
+
+        conn = sqlite3.connect(_db_path())
+        try:
+            if decision == "approve":
+                result = _run_publish_action(row, conn)
+                if result["published"]:
+                    conn.execute(
+                        "UPDATE pending_approvals SET status='published' WHERE id=?", (approval_id,)
+                    )
+                    _move_ticket(row.ticket_id, "resolved", row.agent or "system",
+                                 f"Publicado: {result['detail']}", conn)
+                else:
+                    # Approved but nothing was actually published (no automated
+                    # integration for the target) — back to in_progress, not
+                    # resolved, so the ticket doesn't silently claim completion.
+                    _move_ticket(row.ticket_id, "in_progress", row.agent or "system",
+                                 f"Aprovado mas publicação falhou/pendente: {result['detail']}", conn)
+                    conn.execute(
+                        "UPDATE tickets SET blocked_reason=NULL, requires_human_approval=0 WHERE id=?",
+                        (row.ticket_id,),
+                    )
+            else:
+                _move_ticket(row.ticket_id, "in_progress", row.agent or "system",
+                             f"Publicação rejeitada: {reason or 'sem motivo informado'}", conn)
+                conn.execute(
+                    "UPDATE tickets SET blocked_reason=NULL, requires_human_approval=0 WHERE id=?",
+                    (row.ticket_id,),
+                )
+            conn.commit()
+        finally:
+            conn.close()
+    elif row.gate_type == "decomposition":
+        db.session.execute(
+            db.text("UPDATE goals SET decomposition_state=:s, updated_at=:t WHERE id=:id"),
+            {"s": new_status, "t": now, "id": row.goal_id},
+        )
+        db.session.commit()
+
+        if new_status == "approved":
+            try:
+                payload = json.loads(row.payload or "{}")
+            except (ValueError, TypeError):
+                payload = {}
+            from routes.tickets import _get_agent_slugs
+
+            # pending_approvals.status and goals.decomposition_state are
+            # already committed to 'approved' above (CAS point of no return —
+            # a 2nd decision on this approval_id 409s, and goal-planner
+            # refuses to re-propose a goal whose decomposition_state is
+            # non-null). If this loop dies partway, silently leaving zero
+            # tickets behind an "approved" state would be a real data-loss
+            # bug: the human sees the Telegram approval succeed and never
+            # learns nothing was actually created. isinstance guards the
+            # common malformed-payload case (goal-planner double-encoding
+            # "tickets" as a string, etc.) without losing the rest of the
+            # batch; the try/except is defense in depth for anything else,
+            # and always alerts + re-raises rather than swallowing.
+            created = 0
+            try:
+                for t in payload.get("tickets") or []:
+                    if not isinstance(t, dict):
+                        continue
+                    t_title = (t.get("title") or "").strip()
+                    if not t_title:
+                        continue
+                    t_priority = t.get("priority") if t.get("priority") in TICKET_PRIORITIES else "medium"
+                    t_assignee = t.get("assignee_agent")
+                    if t_assignee and t_assignee not in _get_agent_slugs():
+                        t_assignee = "clawdia-assistant"
+                    db.session.add(Ticket(
+                        id=str(uuid.uuid4()), title=t_title, description=t.get("description"),
+                        status="open", priority=t_priority, priority_rank=PRIORITY_RANK[t_priority],
+                        assignee_agent=t_assignee, goal_id=row.goal_id,
+                        created_by="system:approval", source_agent="goal-planner",
+                        created_at=now, updated_at=now,
+                    ))
+                    created += 1
+                db.session.commit()
+            except Exception as exc:
+                db.session.rollback()
+                from notifications import send_telegram_alert
+                send_telegram_alert(
+                    f"⚠️ Aprovação de decomposição #{approval_id} (Goal #{row.goal_id}) foi "
+                    f"registrada como aprovada, mas a criação dos tickets falhou: {exc}. "
+                    f"Nenhum ticket foi criado e a aprovação já foi consumida (não pode ser "
+                    f"repetida) — intervenção manual necessária."
+                )
+                raise
+
+            if created == 0 and (payload.get("tickets") or []):
+                from notifications import send_telegram_alert
+                send_telegram_alert(
+                    f"⚠️ Aprovação de decomposição #{approval_id} (Goal #{row.goal_id}) foi "
+                    f"aprovada, mas nenhum ticket válido foi encontrado no payload — confira "
+                    f"manualmente."
+                )
+        # reject: decomposition_state='rejected' already set above, zero
+        # tickets created — nothing else to do.
+        #
+        # R1 (ADR Sign-off — Raven's reservation, closed here): deliberately
+        # NEVER call dispatch("goal-planner", "goal_created", ...) from this
+        # branch. A re-dispatch would bypass create_goal's `parent_goal_id IS
+        # NULL` guard (that guard only covers goal CREATION, not this
+        # approval-triggered re-wake) and let sub-goals nest to arbitrary
+        # depth. The tickets from an approved decomposition are created
+        # directly above, straight from the payload the human already saw
+        # and approved — no heartbeat is woken to re-decompose anything.
+
+    elif row.gate_type == "project_suggestion":
+        # ai-hierarchy-suggestions (quick-spec): Mission -> Project rung.
+        # Unlike decomposition, there's no parent-side "state" column to
+        # flip (Mission has no decomposition_state) — pending_approvals.status
+        # (already CAS'd to approved/rejected above) is the sole durable
+        # record of this decision.
+        if new_status == "approved":
+            try:
+                payload = json.loads(row.payload or "{}")
+            except (ValueError, TypeError):
+                payload = {}
+
+            created_project_ids: list[int] = []
+            try:
+                for item in payload.get("projects") or []:
+                    if not isinstance(item, dict):
+                        continue
+                    p_title = (item.get("title") or "").strip()
+                    p_slug = (item.get("slug") or "").strip()
+                    if not p_title or not p_slug:
+                        continue
+                    if GoalProject.query.filter_by(slug=p_slug).first():
+                        continue  # duplicate slug — skip, don't crash the batch
+                    project = GoalProject(
+                        slug=p_slug, title=p_title, description=item.get("description"),
+                        mission_id=row.mission_id, status="active",
+                        created_at=now, updated_at=now,
+                    )
+                    db.session.add(project)
+                    db.session.flush()  # need project.id before the cascade dispatch below
+                    created_project_ids.append(project.id)
+                db.session.commit()
+            except Exception as exc:
+                db.session.rollback()
+                from notifications import send_telegram_alert
+                send_telegram_alert(
+                    f"⚠️ Aprovação de sugestão de Projects #{approval_id} (Mission #{row.mission_id}) "
+                    f"foi registrada como aprovada, mas a criação falhou: {exc}. Nenhum Project foi "
+                    f"criado e a aprovação já foi consumida — intervenção manual necessária."
+                )
+                raise
+
+            if not created_project_ids and (payload.get("projects") or []):
+                from notifications import send_telegram_alert
+                send_telegram_alert(
+                    f"⚠️ Aprovação de sugestão de Projects #{approval_id} (Mission #{row.mission_id}) "
+                    f"foi aprovada, mas nenhum Project válido foi encontrado no payload — confira "
+                    f"manualmente."
+                )
+
+            # Cascade by design (quick-spec ai-hierarchy-suggestions): each
+            # created Project wakes goal-suggester for itself. Still gated by
+            # its own human approval before any Goal exists — never runs
+            # away unsupervised, same reasoning as create_project's own
+            # unconditional project_created dispatch.
+            from heartbeat_dispatcher import dispatch
+            for pid in created_project_ids:
+                try:
+                    dispatch("goal-suggester", "project_created", {"project_id": pid})
+                except Exception:  # noqa: BLE001 — best-effort, never fail the decision response
+                    pass
+        # reject: zero projects created — nothing else to do.
+
+    elif row.gate_type == "goal_suggestion":
+        # ai-hierarchy-suggestions: Project -> Goal rung. Goals created here
+        # have no parent_goal_id (their parent is a Project, not a Goal), so
+        # they're indistinguishable from a human-created top-level goal —
+        # correctly falling under create_goal's own `parent_goal_id IS NULL`
+        # rule if ever created via that route. Here we create them directly
+        # (same reasoning as the decomposition/project_suggestion branches)
+        # and dispatch goal_created ourselves per created goal.
+        if new_status == "approved":
+            try:
+                payload = json.loads(row.payload or "{}")
+            except (ValueError, TypeError):
+                payload = {}
+
+            created_goal_ids: list[int] = []
+            try:
+                for item in payload.get("goals") or []:
+                    if not isinstance(item, dict):
+                        continue
+                    g_title = (item.get("title") or "").strip()
+                    g_slug = (item.get("slug") or "").strip()
+                    if not g_title or not g_slug:
+                        continue
+                    if Goal.query.filter_by(slug=g_slug).first():
+                        continue  # duplicate slug — skip, don't crash the batch
+
+                    metric_type = item.get("metric_type") or "count"
+                    if metric_type not in ("count", "currency", "percentage", "boolean"):
+                        metric_type = "count"
+                    target_value = item.get("target_value")
+                    if metric_type == "boolean":
+                        target_value = 1.0 if target_value is None else target_value
+                    elif target_value is None:
+                        continue  # no target and not boolean — not a measurable goal, skip
+
+                    goal = Goal(
+                        slug=g_slug, project_id=row.project_id, title=g_title,
+                        description=item.get("description"), target_metric=item.get("target_metric"),
+                        metric_type=metric_type, target_value=target_value, current_value=0,
+                        due_date=item.get("due_date"), status="active",
+                        created_at=now, updated_at=now,
+                    )
+                    db.session.add(goal)
+                    db.session.flush()
+                    created_goal_ids.append(goal.id)
+                db.session.commit()
+            except Exception as exc:
+                db.session.rollback()
+                from notifications import send_telegram_alert
+                send_telegram_alert(
+                    f"⚠️ Aprovação de sugestão de Goals #{approval_id} (Project #{row.project_id}) "
+                    f"foi registrada como aprovada, mas a criação falhou: {exc}. Nenhuma Goal foi "
+                    f"criada e a aprovação já foi consumida — intervenção manual necessária."
+                )
+                raise
+
+            if not created_goal_ids and (payload.get("goals") or []):
+                from notifications import send_telegram_alert
+                send_telegram_alert(
+                    f"⚠️ Aprovação de sugestão de Goals #{approval_id} (Project #{row.project_id}) "
+                    f"foi aprovada, mas nenhuma Goal válida foi encontrada no payload — confira "
+                    f"manualmente."
+                )
+
+            # Cascade by design: each created Goal wakes the existing
+            # goal-planner heartbeat, same as a human-created top-level goal.
+            from heartbeat_dispatcher import dispatch
+            for gid in created_goal_ids:
+                try:
+                    dispatch("goal-planner", "goal_created", {"goal_id": gid})
+                except Exception:  # noqa: BLE001
+                    pass
+        # reject: zero goals created — nothing else to do.
+
+    return jsonify({"status": "ok", "approval_id": approval_id, "decision": new_status}), 200
+
+
+def _gate_context_line(gate_type: str, mission_id, project_id, goal_id) -> str:
+    """Mission/Project context line so an approval doesn't get lost among
+    several Sistema Britto missions/projects being decomposed in parallel —
+    the Telegram audit's médio-priority gap #3, generalized across gates."""
+    try:
+        if gate_type == "project_suggestion" and mission_id:
+            row = db.session.execute(
+                db.text("SELECT title FROM missions WHERE id=:i"), {"i": mission_id}
+            ).fetchone()
+            if row:
+                return f"Missão: {row[0]}"
+        elif gate_type == "goal_suggestion" and project_id:
+            row = db.session.execute(
+                db.text("SELECT title FROM projects WHERE id=:i"), {"i": project_id}
+            ).fetchone()
+            if row:
+                return f"Projeto: {row[0]}"
+        elif gate_type == "decomposition" and goal_id:
+            row = db.session.execute(
+                db.text(
+                    "SELECT g.title AS goal_title, p.title AS project_title "
+                    "FROM goals g LEFT JOIN projects p ON p.id = g.project_id WHERE g.id=:i"
+                ),
+                {"i": goal_id},
+            ).fetchone()
+            if row:
+                return f"Projeto: {row[1] or '—'} · Meta: {row[0]}"
+    except Exception:
+        return ""
+    return ""
+
+
+def _render_structured_items(gate_type: str, payload: dict) -> str:
+    """Render the actual proposed items (titles) from payload, independent of
+    whatever free text the agent wrote in payload["body"]. Closes the gap
+    where the structured list only reliably lives in the DB, not in what the
+    human actually sees on Telegram (Telegram audit finding #2)."""
+    key = {"decomposition": "tickets", "project_suggestion": "projects", "goal_suggestion": "goals"}.get(gate_type)
+    if not key:
+        return ""
+    items = payload.get(key)
+    if not isinstance(items, list) or not items:
+        return ""
+    titled = [item["title"] for item in items if isinstance(item, dict) and item.get("title")]
+    if not titled:
+        return ""
+    lines = [f"\nItens propostos ({len(titled)}):"]
+    lines.extend(f"• {t}" for t in titled[:10])
+    if len(titled) > 10:
+        lines.append(f"… e mais {len(titled) - 10}")
+    return "\n".join(lines)
+
+
+def _approval_to_dict(row) -> dict:
+    try:
+        payload = json.loads(row.payload or "{}")
+    except (ValueError, TypeError):
+        payload = {}
+    context_line = _gate_context_line(row.gate_type, row.mission_id, row.project_id, row.goal_id)
+    items_block = _render_structured_items(row.gate_type, payload)
+    return {
+        "id": row.id,
+        "gate_type": row.gate_type,
+        "status": row.status,
+        "agent": row.agent,
+        "ticket_id": row.ticket_id,
+        "goal_id": row.goal_id,
+        "mission_id": row.mission_id,
+        "project_id": row.project_id,
+        "title": payload.get("title"),
+        "body": payload.get("body"),
+        "context": context_line or None,
+        "items_preview": items_block.strip() or None,
+        "created_at": row.created_at,
+        "expires_at": row.expires_at,
+        "decided_at": row.decided_at,
+        "decided_by": row.decided_by,
+    }
+
+
+@bp.route("/api/approvals", methods=["GET"])
+def list_approvals():
+    """Dashboard fallback visibility (panorama 2026-07-17, item 1) — before
+    this, pending_approvals only ever surfaced as a Telegram message with no
+    equivalent view in the dashboard itself. Read-only; deciding still goes
+    through decide_approval_via_dashboard below."""
+    denied = _require("view")
+    if denied:
+        return denied
+    status_filter = request.args.get("status", "pending")
+    gate_type_filter = request.args.get("gate_type")
+
+    query = "SELECT * FROM pending_approvals WHERE 1=1"
+    params: dict = {}
+    if status_filter and status_filter != "all":
+        query += " AND status=:status"
+        params["status"] = status_filter
+    if gate_type_filter:
+        query += " AND gate_type=:gate_type"
+        params["gate_type"] = gate_type_filter
+    query += " ORDER BY created_at DESC LIMIT 100"
+
+    rows = db.session.execute(db.text(query), params).fetchall()
+    return jsonify({"approvals": [_approval_to_dict(r) for r in rows]})
+
+
+@bp.route("/api/approvals/<int:approval_id>", methods=["GET"])
+def get_approval(approval_id: int):
+    denied = _require("view")
+    if denied:
+        return denied
+    row = db.session.execute(
+        db.text("SELECT * FROM pending_approvals WHERE id=:id"), {"id": approval_id}
+    ).fetchone()
+    if not row:
+        return jsonify({"error": "not found"}), 404
+    return jsonify(_approval_to_dict(row))
+
+
+@bp.route("/api/approvals", methods=["POST"])
+def create_approval():
+    """Propose a pending_approvals row (goal-planner's decomposition-gate write
+    path, ADR SPEC 3h/Step 7). goal-planner has no chat surface — it calls this
+    via EvoClient with DASHBOARD_API_TOKEN — so `attempt` is computed
+    server-side (Vault V7) rather than trusted from the caller, keeping the
+    idempotency-key scoping correct even if goal-planner retries a call.
+    """
+    denied = _require("execute")
+    if denied:
+        return denied
+
+    data = request.get_json(silent=True) or {}
+    gate_type = data.get("gate_type")
+    valid_gate_types = ("publish", "decomposition", "project_suggestion", "goal_suggestion")
+    if gate_type not in valid_gate_types:
+        return jsonify({"error": f"gate_type must be one of {valid_gate_types}"}), 400
+
+    goal_id = data.get("goal_id")
+    ticket_id = data.get("ticket_id")
+    mission_id = data.get("mission_id")
+    project_id = data.get("project_id")
+    agent = data.get("agent")
+    payload = data.get("payload") or {}
+
+    if gate_type == "decomposition":
+        if not goal_id:
+            return jsonify({"error": "goal_id is required for gate_type=decomposition"}), 400
+        attempt = db.session.execute(
+            db.text("SELECT COUNT(*) FROM pending_approvals WHERE goal_id=:g AND gate_type='decomposition'"),
+            {"g": goal_id},
+        ).scalar() or 0
+        idempotency_key = f"decomp:{goal_id}:{attempt}"
+    elif gate_type == "publish":
+        if not ticket_id:
+            return jsonify({"error": "ticket_id is required for gate_type=publish"}), 400
+        attempt = db.session.execute(
+            db.text("SELECT COUNT(*) FROM pending_approvals WHERE ticket_id=:t AND gate_type='publish'"),
+            {"t": ticket_id},
+        ).scalar() or 0
+        idempotency_key = f"publish:{ticket_id}:{attempt}"
+    elif gate_type == "project_suggestion":
+        if not mission_id:
+            return jsonify({"error": "mission_id is required for gate_type=project_suggestion"}), 400
+        attempt = db.session.execute(
+            db.text(
+                "SELECT COUNT(*) FROM pending_approvals WHERE mission_id=:m AND gate_type='project_suggestion'"
+            ),
+            {"m": mission_id},
+        ).scalar() or 0
+        idempotency_key = f"projsug:{mission_id}:{attempt}"
+    else:  # goal_suggestion
+        if not project_id:
+            return jsonify({"error": "project_id is required for gate_type=goal_suggestion"}), 400
+        attempt = db.session.execute(
+            db.text(
+                "SELECT COUNT(*) FROM pending_approvals WHERE project_id=:p AND gate_type='goal_suggestion'"
+            ),
+            {"p": project_id},
+        ).scalar() or 0
+        idempotency_key = f"goalsug:{project_id}:{attempt}"
+
+    now = _now()
+    expires_at = (datetime.now(timezone.utc) + timedelta(hours=8)).strftime("%Y-%m-%dT%H:%M:%S.%fZ")
+
+    db.session.execute(
+        db.text(
+            "INSERT OR IGNORE INTO pending_approvals "
+            "(gate_type, ticket_id, goal_id, mission_id, project_id, agent, attempt, idempotency_key, "
+            "status, payload, created_at, expires_at) "
+            "VALUES (:gt, :tid, :gid, :mid, :pid, :a, :att, :k, 'pending', :p, :c, :e)"
+        ),
+        {
+            "gt": gate_type, "tid": ticket_id, "gid": goal_id, "mid": mission_id, "pid": project_id,
+            "a": agent, "att": attempt, "k": idempotency_key,
+            "p": json.dumps(payload, ensure_ascii=False), "c": now, "e": expires_at,
+        },
+    )
+    db.session.commit()
+
+    row = db.session.execute(
+        db.text("SELECT id FROM pending_approvals WHERE idempotency_key=:k"), {"k": idempotency_key}
+    ).fetchone()
+
+    body_parts = [
+        _gate_context_line(gate_type, mission_id, project_id, goal_id),
+        payload.get("body") or "",
+        _render_structured_items(gate_type, payload),
+    ]
+    telegram_body = "\n".join(p for p in body_parts if p).strip()[:1500]
+
+    from notifications import send_approval_request
+    message_id = send_approval_request(row.id, payload.get("title") or "Aprovação pendente", telegram_body)
+    if message_id is not None:
+        db.session.execute(
+            db.text("UPDATE pending_approvals SET telegram_message_id=:m WHERE id=:id"),
+            {"m": message_id, "id": row.id},
+        )
+        db.session.commit()
+
+    return jsonify({"id": row.id, "idempotency_key": idempotency_key, "status": "pending"}), 201
diff --git a/dashboard/backend/routes/backups.py b/dashboard/backend/routes/backups.py
index 22948994c..784d34c5f 100644
--- a/dashboard/backend/routes/backups.py
+++ b/dashboard/backend/routes/backups.py
@@ -114,6 +114,8 @@ def _run():
                 zip_path.unlink(missing_ok=True)
             _running_jobs["backup"] = {"status": "done"}
         except Exception as e:
+            import traceback
+            traceback.print_exc()
             _running_jobs["backup"] = {"status": "error", "error": str(e)}
 
     _running_jobs["backup"] = {"status": "running"}
@@ -126,11 +128,14 @@ def _run():
 
 @bp.route("/api/backups/status")
 def backup_status():
-    """Check status of running backup job."""
+    """Check status of a running job. ?type=backup (default) or ?type=restore."""
     denied = _require("config", "view")
     if denied:
         return denied
-    job = _running_jobs.get("backup", {"status": "idle"})
+    job_type = request.args.get("type", "backup")
+    if job_type not in ("backup", "restore"):
+        return jsonify({"error": "Invalid type. Use 'backup' or 'restore'"}), 400
+    job = _running_jobs.get(job_type, {"status": "idle"})
     return jsonify(job)
 
 
@@ -150,6 +155,11 @@ def restore_backup(filename):
     if mode not in ("merge", "replace"):
         return jsonify({"error": "Invalid mode. Use 'merge' or 'replace'"}), 400
 
+    # Capture the app object here — the worker thread has no request/app
+    # context, and _post_restore_migrate needs one (current_app, db.create_all).
+    from flask import current_app
+    app = current_app._get_current_object()
+
     def _run():
         try:
             import sys
@@ -159,10 +169,13 @@ def _run():
 
             # After restore, run auto-migrate to fix schema differences
             # (old backups may have missing columns or corrupted data)
-            _post_restore_migrate()
+            with app.app_context():
+                _post_restore_migrate()
 
             _running_jobs["restore"] = {"status": "done", "mode": mode}
         except Exception as e:
+            import traceback
+            traceback.print_exc()
             _running_jobs["restore"] = {"status": "error", "error": str(e)}
 
     _running_jobs["restore"] = {"status": "running"}
diff --git a/dashboard/backend/routes/brain_repo.py b/dashboard/backend/routes/brain_repo.py
index 5bd8dd03f..66591072d 100644
--- a/dashboard/backend/routes/brain_repo.py
+++ b/dashboard/backend/routes/brain_repo.py
@@ -348,7 +348,9 @@ def connect():
     # + first commit + push) moved to job_runner.enqueue_bootstrap below — it's the
     # slow part and Cloudflare's 100 s request limit was killing first-time connects.
     bootstrap_pending = False
+    clone_pending = False
     bootstrap_params: dict | None = None
+    clone_params: dict | None = None
     if create_repo:
         try:
             from brain_repo.github_api import create_private_repo, get_github_username
@@ -401,6 +403,12 @@ def connect():
             abort(400, description="Repository must be private")
         repo_owner = repo_info.get("owner", {}).get("login", "")
         repo_name = repo_info.get("name", "")
+        clone_pending = True
+        clone_params = {
+            "token": token,
+            "repo_url": repo_url,
+            "repo_name": repo_name,
+        }
 
     # Encrypt and store token.
     #
@@ -471,6 +479,17 @@ def connect():
             )
         except ImportError:
             log.error("connect: job_runner unavailable — bootstrap will not run")
+    elif clone_pending and clone_params is not None:
+        try:
+            from brain_repo import job_runner
+            from flask import current_app
+            job_runner.enqueue_clone(
+                current_app._get_current_object(),  # type: ignore[attr-defined]
+                current_user.id,
+                **clone_params,
+            )
+        except ImportError:
+            log.error("connect: job_runner unavailable — clone will not run")
 
     return jsonify(config.to_dict())
 
@@ -632,9 +651,22 @@ def sync_force():
     if not local_path:
         abort(400, description="local_path not configured — repo not yet cloned")
 
-    repo_dir = Path(local_path)
-    if not repo_dir.is_dir() or not (repo_dir / ".git").is_dir():
-        abort(500, description=f"Local brain repo at {local_path} is missing or corrupt — re-connect")
+    try:
+        from brain_repo import job_runner
+    except ImportError:
+        abort(500, description="job_runner module unavailable")
+
+    workspace = Path(__file__).resolve().parent.parent.parent.parent
+    repo_dir = job_runner.resolve_local_path(local_path, config.repo_name, workspace)
+    if repo_dir is None:
+        # Sem working tree local. Com repo_url + repo_name no config o
+        # pipeline re-clona sozinho; sem eles só re-connect resolve.
+        if not config.repo_url or not config.repo_name:
+            abort(500, description=f"Local brain repo at {local_path} is missing or corrupt — re-connect")
+    elif str(repo_dir) != local_path:
+        # DB restaurado de outra máquina — regrava o path desta.
+        config.local_path = str(repo_dir)
+        db.session.commit()
 
     # Quick token-decryption probe so bad keys fail fast (before enqueueing).
     # The pipeline re-decrypts inside the thread — we just surface the error
@@ -642,13 +674,6 @@ def sync_force():
     token = _decrypt_token(config)
     if not token:
         abort(500, description="Could not decrypt stored token — re-connect the brain repo")
-
-    try:
-        from brain_repo import job_runner
-    except ImportError:
-        abort(500, description="job_runner module unavailable")
-
-    workspace = Path(__file__).resolve().parent.parent.parent.parent
     now = datetime.now(timezone.utc)
     # Seconds in the tag name avoids "tag already exists" on rapid re-clicks
     tag_name = f"milestone/manual-{now.strftime('%Y-%m-%d-%H-%M-%S')}"
@@ -703,20 +728,27 @@ def tag_milestone():
     if not local_path:
         abort(400, description="local_path not configured — repo not yet cloned")
 
-    repo_dir = Path(local_path)
-    if not repo_dir.is_dir() or not (repo_dir / ".git").is_dir():
-        abort(500, description=f"Local brain repo at {local_path} is missing or corrupt — re-connect")
-
-    token = _decrypt_token(config)
-    if not token:
-        abort(500, description="Could not decrypt stored token — re-connect the brain repo")
-
     try:
         from brain_repo import job_runner
     except ImportError:
         abort(500, description="job_runner module unavailable")
 
     workspace = Path(__file__).resolve().parent.parent.parent.parent
+    repo_dir = job_runner.resolve_local_path(local_path, config.repo_name, workspace)
+    if repo_dir is None:
+        # Sem working tree local. Com repo_url + repo_name no config o
+        # pipeline re-clona sozinho; sem eles só re-connect resolve.
+        if not config.repo_url or not config.repo_name:
+            abort(500, description=f"Local brain repo at {local_path} is missing or corrupt — re-connect")
+    elif str(repo_dir) != local_path:
+        # DB restaurado de outra máquina — regrava o path desta.
+        config.local_path = str(repo_dir)
+        db.session.commit()
+
+    token = _decrypt_token(config)
+    if not token:
+        abort(500, description="Could not decrypt stored token — re-connect the brain repo")
+
     tag = f"milestone/{name}"
     now = datetime.now(timezone.utc)
 
diff --git a/dashboard/backend/routes/costs.py b/dashboard/backend/routes/costs.py
index 4ef0cf5ad..e3fda7c90 100644
--- a/dashboard/backend/routes/costs.py
+++ b/dashboard/backend/routes/costs.py
@@ -13,16 +13,119 @@
 LOGS_DIR = WORKSPACE / "ADWs" / "logs"
 
 
+def _resolve_agent_slug(short_or_full: str, known_assignee_slugs: set[str]) -> str | None:
+    """Routine/heartbeat cost records use two different agent-name shapes:
+    heartbeats.agent already carries the full slug ("pixel-social-media"),
+    but routine cost records (ADWs metrics.json) carry the SHORT docstring
+    alias ("pixel" — see _helpers.py::_AGENT_ALIASES), which never appears
+    on a Ticket.assignee_agent. Resolve by prefix match against slugs that
+    actually show up on tickets, rather than hardcoding a name map that
+    would silently drift if an agent's .md file gets renamed.
+    Returns None on no match or on an ambiguous (2+) match — better to drop
+    that agent's cost into "unallocated" than guess wrong.
+    """
+    if short_or_full in known_assignee_slugs:
+        return short_or_full
+    matches = [s for s in known_assignee_slugs if s.startswith(f"{short_or_full}-")]
+    return matches[0] if len(matches) == 1 else None
+
+
+def _estimated_cost_by_mission_and_project(by_agent: list[dict]) -> dict:
+    """Proportional-allocation ESTIMATE of spend per Mission/Project.
+
+    There is no direct link from a cost record (routine run, heartbeat run)
+    to the specific Goal/Ticket it was working on — costs are per-agent
+    totals, not per-task. This allocates each agent's total cost across the
+    Missions/Projects that agent's tickets belong to, weighted by ticket
+    count, since ticket count is the only per-agent-per-mission signal that
+    actually exists in the schema today. Explicitly labeled "estimated" in
+    the response — never presented as an exact ledger.
+    """
+    ticket_rows = db.session.execute(db.text(
+        "SELECT t.assignee_agent AS agent, "
+        "       COALESCE(t.project_id, g.project_id) AS project_id, "
+        "       p.title AS project_title, p.mission_id AS mission_id, m.title AS mission_title "
+        "FROM tickets t "
+        "LEFT JOIN goals g ON g.id = t.goal_id "
+        "LEFT JOIN projects p ON p.id = COALESCE(t.project_id, g.project_id) "
+        "LEFT JOIN missions m ON m.id = p.mission_id "
+        "WHERE t.assignee_agent IS NOT NULL"
+    )).fetchall()
+
+    known_slugs = {r.agent for r in ticket_rows}
+
+    # agent -> total ticket count (denominator for proportional allocation)
+    agent_ticket_totals: dict[str, int] = {}
+    # agent -> [(mission_id, mission_title, project_id, project_title, count)]
+    agent_breakdown: dict[str, list] = {}
+    for r in ticket_rows:
+        agent_ticket_totals[r.agent] = agent_ticket_totals.get(r.agent, 0) + 1
+        agent_breakdown.setdefault(r.agent, []).append(r)
+
+    mission_totals: dict[int, dict] = {}
+    project_totals: dict[int, dict] = {}
+    unallocated = 0.0
+
+    for entry in by_agent:
+        agent_cost = float(entry.get("cost") or 0)
+        if agent_cost <= 0:
+            continue
+        resolved = _resolve_agent_slug(entry["agent"], known_slugs)
+        total_tickets = agent_ticket_totals.get(resolved or "", 0)
+        if not resolved or total_tickets == 0:
+            unallocated += agent_cost
+            continue
+
+        for r in agent_breakdown[resolved]:
+            share = agent_cost / total_tickets
+            if r.mission_id:
+                bucket = mission_totals.setdefault(
+                    r.mission_id, {"mission_id": r.mission_id, "title": r.mission_title, "estimated_cost": 0.0, "ticket_count": 0}
+                )
+                bucket["estimated_cost"] += share
+                bucket["ticket_count"] += 1
+            if r.project_id:
+                bucket = project_totals.setdefault(
+                    r.project_id, {"project_id": r.project_id, "title": r.project_title, "estimated_cost": 0.0, "ticket_count": 0}
+                )
+                bucket["estimated_cost"] += share
+                bucket["ticket_count"] += 1
+            if not r.mission_id and not r.project_id:
+                unallocated += share
+
+    by_mission = sorted(
+        [{**v, "estimated_cost": round(v["estimated_cost"], 4)} for v in mission_totals.values()],
+        key=lambda x: x["estimated_cost"], reverse=True,
+    )
+    by_project = sorted(
+        [{**v, "estimated_cost": round(v["estimated_cost"], 4)} for v in project_totals.values()],
+        key=lambda x: x["estimated_cost"], reverse=True,
+    )
+    return {
+        "by_mission": by_mission,
+        "by_project": by_project,
+        "unallocated_cost": round(unallocated, 4),
+        "methodology": "estimativa por alocação proporcional (custo do agente / tickets do agente) — "
+                        "não é um ledger exato, pois custos são registrados por agente/rotina, não por ticket",
+    }
+
+
+_EMPTY_COSTS_RESPONSE = {
+    "total_cost": 0, "by_routine": [], "by_agent": [], "today": 0, "week": 0, "month_estimate": 0,
+    "by_mission": [], "by_project": [], "unallocated_cost": 0, "methodology": "",
+}
+
+
 @bp.route("/api/costs")
 def costs_summary():
     content = safe_read(METRICS_PATH)
     if not content:
-        return jsonify({"total_cost": 0, "by_routine": [], "by_agent": [], "today": 0, "week": 0, "month_estimate": 0})
+        return jsonify(_EMPTY_COSTS_RESPONSE)
 
     try:
         data = json.loads(content)
     except json.JSONDecodeError:
-        return jsonify({"total_cost": 0, "by_routine": [], "by_agent": [], "today": 0, "week": 0, "month_estimate": 0})
+        return jsonify(_EMPTY_COSTS_RESPONSE)
 
     total = 0.0
     by_routine = []
@@ -82,6 +185,15 @@ def costs_summary():
             "total_cost": round(hb_cost, 5),
             "avg_cost": round(hb_avg, 5),
         })
+        hb_agent_name = hb_agents.get(row.heartbeat_id)
+        if hb_agent_name:
+            agent_costs[hb_agent_name] = agent_costs.get(hb_agent_name, 0.0) + hb_cost
+
+    # Combined per-agent totals (routines + heartbeats) feed the Mission/
+    # Project estimate below — kept separate from `by_agent` above (routines
+    # only) so that response shape stays backward compatible.
+    combined_by_agent = [{"agent": a, "cost": round(c, 4)} for a, c in agent_costs.items()]
+    mission_project_estimate = _estimated_cost_by_mission_and_project(combined_by_agent)
 
     # Calculate today and week from JSONL logs (routines)
     today_cost = 0.0
@@ -147,6 +259,10 @@ def costs_summary():
         "by_routine": by_routine,
         "by_heartbeat": by_heartbeat,
         "by_agent": by_agent,
+        "by_mission": mission_project_estimate["by_mission"],
+        "by_project": mission_project_estimate["by_project"],
+        "unallocated_cost": mission_project_estimate["unallocated_cost"],
+        "methodology": mission_project_estimate["methodology"],
     })
 
 
diff --git a/dashboard/backend/routes/goals.py b/dashboard/backend/routes/goals.py
index 00bd4c2a5..d689f36dd 100644
--- a/dashboard/backend/routes/goals.py
+++ b/dashboard/backend/routes/goals.py
@@ -26,6 +26,25 @@ def _now() -> str:
     return datetime.now(timezone.utc).strftime("%Y-%m-%dT%H:%M:%S.%fZ")
 
 
+def _sync_mempalace_for_project(p: GoalProject) -> None:
+    """Best-effort MemPalace source sync (Mission -> Wing, Project -> Room).
+
+    Never raises — a MemPalace hiccup must not fail a project create/update.
+    """
+    if not p.workspace_folder_path:
+        return
+    try:
+        from routes.mempalace import sync_project_source
+        mission_title = p.mission.title if p.mission_id and p.mission else None
+        sync_project_source(
+            workspace_folder_path=p.workspace_folder_path,
+            mission_title=mission_title,
+            project_slug=p.slug,
+        )
+    except Exception:  # noqa: BLE001
+        pass
+
+
 def _db_path() -> str:
     return str(WORKSPACE / "dashboard" / "data" / "evonexus.db")
 
@@ -76,6 +95,16 @@ def create_mission():
     db.session.add(m)
     db.session.commit()
     audit(current_user, "create", "goals", f"Created mission #{m.id}: {m.title}")
+
+    # ai-hierarchy-suggestions: wake project-planner to propose Projects for
+    # this Mission (parked behind a Telegram approval, never created
+    # directly — see routes/approvals.py's project_suggestion branch).
+    try:
+        from heartbeat_dispatcher import dispatch
+        dispatch("project-planner", "mission_created", {"mission_id": m.id})
+    except Exception as exc:  # noqa: BLE001 — best-effort, never block mission creation
+        print(f"[goals] WARNING: could not dispatch mission_created for mission #{m.id}: {exc}", flush=True)
+
     return jsonify(m.to_dict()), 201
 
 
@@ -156,6 +185,18 @@ def create_project():
     db.session.add(p)
     db.session.commit()
     audit(current_user, "create", "goals", f"Created project #{p.id}: {p.title}")
+    _sync_mempalace_for_project(p)
+
+    # ai-hierarchy-suggestions: wake goal-suggester to propose Goals for this
+    # Project — fires unconditionally, including for Projects created from an
+    # approved project_suggestion (intentional cascade: each rung still needs
+    # its own human approval, so this never runs away unsupervised).
+    try:
+        from heartbeat_dispatcher import dispatch
+        dispatch("goal-suggester", "project_created", {"project_id": p.id})
+    except Exception as exc:  # noqa: BLE001 — best-effort, never block project creation
+        print(f"[goals] WARNING: could not dispatch project_created for project #{p.id}: {exc}", flush=True)
+
     return jsonify(p.to_dict()), 201
 
 
@@ -166,12 +207,23 @@ def patch_project(project_id: int):
         return denied
     p = GoalProject.query.get_or_404(project_id)
     data = request.get_json() or {}
+    old_status = p.status
     for field in ("title", "description", "mission_id", "workspace_folder_path", "status"):
         if field in data:
             setattr(p, field, data[field])
     p.updated_at = _now()
+
+    # completed_at tracks the terminal transition specifically, not just any
+    # edit (unlike updated_at, which changes on every PATCH). Cleared if the
+    # project is reopened from 'completed' back to something else.
+    if p.status == "completed" and old_status != "completed":
+        p.completed_at = _now()
+    elif p.status != "completed" and old_status == "completed":
+        p.completed_at = None
+
     db.session.commit()
     audit(current_user, "update", "goals", f"Updated project #{p.id}: {p.title}")
+    _sync_mempalace_for_project(p)
     return jsonify(p.to_dict())
 
 
@@ -197,10 +249,13 @@ def list_goals():
     project_id = request.args.get("project_id", type=int)
     status_filter = request.args.get("status")
     due_filter = request.args.get("due_date")
+    parent_goal_id = request.args.get("parent_goal_id", type=int)
 
     q = Goal.query
     if project_id:
         q = q.filter_by(project_id=project_id)
+    if parent_goal_id:
+        q = q.filter_by(parent_goal_id=parent_goal_id)
     if status_filter:
         q = q.filter_by(status=status_filter)
 
@@ -239,6 +294,11 @@ def create_goal():
         return jsonify({"error": "slug, title, and project_id are required"}), 400
     if Goal.query.filter_by(slug=data["slug"]).first():
         return jsonify({"error": f"Goal slug '{data['slug']}' already exists"}), 409
+    # Sub-goal (agent-authored, has a parent) must always carry a due_date —
+    # ADR SPEC 5a. Without this, an agent-proposed decomposition tree has no
+    # deadline to bound it.
+    if data.get("parent_goal_id") and not data.get("due_date"):
+        return jsonify({"error": "sub-goal requires due_date"}), 400
     now = _now()
     g = Goal(
         slug=data["slug"],
@@ -251,12 +311,25 @@ def create_goal():
         current_value=data.get("current_value", 0.0),
         due_date=data.get("due_date"),
         status=data.get("status", "active"),
+        parent_goal_id=data.get("parent_goal_id"),
+        decomposition_state=data.get("decomposition_state"),
         created_at=now,
         updated_at=now,
     )
     db.session.add(g)
     db.session.commit()
     audit(current_user, "create", "goals", f"Created goal #{g.id}: {g.title}")
+
+    # goal-planner emitter (ADR SPEC 5b): only human-authored TOP-LEVEL goals
+    # fire goal_created — sub-goals (parent_goal_id set) never re-trigger the
+    # planner on creation, or decomposition would recurse infinitely.
+    if g.parent_goal_id is None:
+        try:
+            from heartbeat_dispatcher import dispatch
+            dispatch("goal-planner", "goal_created", {"goal_id": g.id})
+        except Exception as exc:  # noqa: BLE001 — best-effort, never block goal creation
+            print(f"[goals] WARNING: could not dispatch goal_created for goal #{g.id}: {exc}", flush=True)
+
     return jsonify(g.to_dict()), 201
 
 
@@ -267,16 +340,62 @@ def patch_goal(goal_id: int):
         return denied
     g = Goal.query.get_or_404(goal_id)
     data = request.get_json() or {}
+    old_status = g.status
+    # current_value is intentionally not accepted here — it has a single
+    # source of truth (COUNT of resolved/closed tickets, see
+    # heartbeat_outcome._recompute_goal_from_tickets). Manual drift
+    # correction goes through POST /api/goals/{id}/recalculate instead.
     for field in ("title", "description", "target_metric", "metric_type", "target_value",
-                  "current_value", "due_date", "status", "project_id"):
+                  "due_date", "status", "project_id"):
         if field in data:
             setattr(g, field, data[field])
     g.updated_at = _now()
+
+    _TERMINAL_GOAL_STATUSES = ("achieved", "cancelled")
+    if g.status in _TERMINAL_GOAL_STATUSES and old_status not in _TERMINAL_GOAL_STATUSES:
+        g.completed_at = _now()
+    elif g.status not in _TERMINAL_GOAL_STATUSES and old_status in _TERMINAL_GOAL_STATUSES:
+        g.completed_at = None
+
     db.session.commit()
     audit(current_user, "update", "goals", f"Updated goal #{g.id}: {g.title}")
+
+    if g.status in _TERMINAL_GOAL_STATUSES and old_status not in _TERMINAL_GOAL_STATUSES:
+        _maybe_complete_project(g.project_id)
+
     return jsonify(g.to_dict())
 
 
+def _maybe_complete_project(project_id: int) -> None:
+    """Project rollup: if every Goal under this Project is now in a terminal
+    state (achieved/cancelled), mark the Project 'completed' automatically.
+
+    Called whenever a Goal transitions INTO a terminal status — from
+    patch_goal (manual) and from heartbeat_outcome._recompute_goal_from_tickets
+    (the ticket-resolution path, the common case post goal-ticket-unification).
+    Best-effort: a project with zero Goals is never auto-completed (nothing
+    to roll up from), and any failure here must never break the Goal update
+    that triggered it.
+    """
+    try:
+        project = GoalProject.query.get(project_id)
+        if not project or project.status == "completed":
+            return
+        goals = Goal.query.filter_by(project_id=project_id).all()
+        if not goals:
+            return
+        if all(g.status in ("achieved", "cancelled") for g in goals):
+            project.status = "completed"
+            project.completed_at = _now()
+            project.updated_at = _now()
+            db.session.commit()
+            audit(current_user, "update", "goals",
+                  f"Auto-completed project #{project.id}: all {len(goals)} goal(s) terminal")
+    except Exception as exc:  # noqa: BLE001 — never break the Goal update that triggered this
+        db.session.rollback()
+        print(f"[goals] WARNING: project rollup failed for project #{project_id}: {exc}", flush=True)
+
+
 @bp.route("/api/goals/<int:goal_id>", methods=["DELETE"])
 def delete_goal(goal_id: int):
     denied = _require("manage")
@@ -291,24 +410,24 @@ def delete_goal(goal_id: int):
 
 @bp.route("/api/goals/<int:goal_id>/recalculate", methods=["POST"])
 def recalculate_goal(goal_id: int):
-    """Drift correction: recompute current_value from goal_progress_v."""
+    """Drift correction: recompute current_value from the single source of
+    truth (tickets), not the legacy goal_progress_v (goal_tasks) view — see
+    heartbeat_outcome._recompute_goal_from_tickets."""
     denied = _require("execute")
     if denied:
         return denied
-    g = Goal.query.get_or_404(goal_id)
+    Goal.query.get_or_404(goal_id)
 
+    from heartbeat_outcome import _recompute_goal_from_tickets
     conn = sqlite3.connect(_db_path())
-    row = conn.execute(
-        "SELECT done_tasks, pct_complete FROM goal_progress_v WHERE goal_id = ?", (goal_id,)
-    ).fetchone()
-    conn.close()
-
-    if row:
-        g.current_value = float(row[0])
-        if g.current_value >= g.target_value and g.status == "active":
-            g.status = "achieved"
-    g.updated_at = _now()
-    db.session.commit()
+    try:
+        _recompute_goal_from_tickets(goal_id, conn)
+        conn.commit()
+    finally:
+        conn.close()
+
+    db.session.expire_all()
+    g = Goal.query.get_or_404(goal_id)
     audit(current_user, "recalculate", "goals", f"Recalculated goal #{goal_id}")
     return jsonify(g.to_dict())
 
@@ -383,7 +502,21 @@ def patch_goal_task(task_id: int):
                   "goal_id", "due_date", "locked_at", "locked_by"):
         if field in data:
             setattr(t, field, data[field])
-    t.updated_at = _now()
+
+    now = _now()
+    t.updated_at = now
+
+    # started_at marks the FIRST time this task left 'open' — never
+    # overwritten on later status churn (e.g. done -> open -> done again).
+    if old_status == "open" and t.status != "open" and not t.started_at:
+        t.started_at = now
+    # completed_at tracks the terminal transition specifically, cleared if
+    # the task is reopened from 'done'.
+    if t.status == "done" and old_status != "done":
+        t.completed_at = now
+    elif t.status != "done" and old_status == "done":
+        t.completed_at = None
+
     db.session.commit()
 
     # If status changed to done and there's a goal, trigger recalc via the view
@@ -407,23 +540,17 @@ def delete_goal_task(task_id: int):
 
 
 def _recalculate_goal_value(goal_id: int):
-    """Internal helper: sync goal.current_value with done tasks count."""
+    """Internal helper: sync goal.current_value via the single source of
+    truth (tickets) — see heartbeat_outcome._recompute_goal_from_tickets.
+    goal_progress_v (goal_tasks) is frozen legacy post goal-ticket-unification."""
+    from heartbeat_outcome import _recompute_goal_from_tickets
     conn = sqlite3.connect(_db_path())
-    row = conn.execute(
-        "SELECT done_tasks FROM goal_progress_v WHERE goal_id = ?", (goal_id,)
-    ).fetchone()
-    conn.close()
-
-    if row is None:
-        return
-    g = Goal.query.get(goal_id)
-    if g is None:
-        return
-    g.current_value = float(row[0])
-    if g.current_value >= g.target_value and g.status == "active":
-        g.status = "achieved"
-    g.updated_at = _now()
-    db.session.commit()
+    try:
+        _recompute_goal_from_tickets(goal_id, conn)
+        conn.commit()
+    finally:
+        conn.close()
+    db.session.expire_all()
 
 
 # --------------- Link routine to goal ---------------
diff --git a/dashboard/backend/routes/heartbeats.py b/dashboard/backend/routes/heartbeats.py
index e53842e6a..30dc8f6ad 100644
--- a/dashboard/backend/routes/heartbeats.py
+++ b/dashboard/backend/routes/heartbeats.py
@@ -200,7 +200,7 @@ def update_heartbeat(heartbeat_id):
     updatable = {
         "agent", "interval_seconds", "max_turns", "timeout_seconds",
         "lock_timeout_seconds", "wake_triggers", "enabled",
-        "goal_id", "required_secrets", "decision_prompt",
+        "goal_id", "required_secrets", "decision_prompt", "handler",
     }
 
     for field, value in data.items():
@@ -317,14 +317,17 @@ def manual_run(heartbeat_id):
 
     hb = Heartbeat.query.get_or_404(heartbeat_id)
 
+    if not hb.enabled:
+        return jsonify({"error": "Heartbeat is disabled", "heartbeat_id": heartbeat_id}), 400
+
     from heartbeat_dispatcher import dispatch
     dispatched, run_id = dispatch(heartbeat_id, "manual")
 
     if not dispatched:
         return jsonify({
-            "warning": "Heartbeat debounced or disabled — no run dispatched",
+            "error": "Heartbeat is debounced or already running",
             "heartbeat_id": heartbeat_id,
-        }), 200
+        }), 409
 
     audit(current_user, "execute", "heartbeats", f"manual run {heartbeat_id} run_id={run_id}")
     return jsonify({"run_id": run_id, "heartbeat_id": heartbeat_id, "status": "dispatched"}), 202
@@ -390,3 +393,50 @@ def reindex_heartbeats():
         return jsonify({"reindexed": len(yaml_cfg.heartbeats)})
     except Exception as exc:
         return jsonify({"error": str(exc)}), 500
+
+
+# ── Approval Queue ──────────────────────────────────────────────────────────
+
+@bp.route("/api/approvals")
+def list_approvals():
+    """List pending approval items."""
+    from routes._helpers import WORKSPACE
+    import sys
+    sys.path.insert(0, str(WORKSPACE / "ADWs" / "routines"))
+    from approval_queue import get_pending, get_stats
+
+    return jsonify({
+        "pending": get_pending(),
+        "stats": get_stats(),
+    })
+
+
+@bp.route("/api/approvals/<int:item_id>/approve", methods=["POST"])
+def approve_item(item_id):
+    """Approve a queued item."""
+    from routes._helpers import WORKSPACE
+    import sys
+    sys.path.insert(0, str(WORKSPACE / "ADWs" / "routines"))
+    from approval_queue import approve
+
+    ok = approve(item_id)
+    if not ok:
+        return jsonify({"error": "Item not found or already decided"}), 404
+    return jsonify({"status": "approved", "id": item_id})
+
+
+@bp.route("/api/approvals/<int:item_id>/reject", methods=["POST"])
+def reject_item(item_id):
+    """Reject a queued item."""
+    data = request.get_json() or {}
+    reason = data.get("reason", "")
+
+    from routes._helpers import WORKSPACE
+    import sys
+    sys.path.insert(0, str(WORKSPACE / "ADWs" / "routines"))
+    from approval_queue import reject
+
+    ok = reject(item_id, reason)
+    if not ok:
+        return jsonify({"error": "Item not found or already decided"}), 404
+    return jsonify({"status": "rejected", "id": item_id})
diff --git a/dashboard/backend/routes/instagram.py b/dashboard/backend/routes/instagram.py
new file mode 100644
index 000000000..eec0faeff
--- /dev/null
+++ b/dashboard/backend/routes/instagram.py
@@ -0,0 +1,685 @@
+"""Instagram Graph API routes — webhooks, publish, comments, DMs."""
+
+import hashlib
+import hmac
+import json
+import logging
+import os
+import threading
+import urllib.error
+import urllib.parse
+import urllib.request
+from datetime import datetime, timezone
+from pathlib import Path
+
+import requests as http
+from flask import Blueprint, jsonify, request, current_app
+
+log = logging.getLogger(__name__)
+
+bp = Blueprint("instagram_api", __name__)
+
+WORKSPACE = Path(__file__).resolve().parent.parent.parent.parent
+ENV_PATH = WORKSPACE / ".env"
+
+# ── Helpers ──────────────────────────────────────────────────────────────────
+
+GRAPH_BASE = "https://graph.facebook.com/v25.0"
+
+
+def _read_env() -> dict:
+    env = {}
+    if not ENV_PATH.exists():
+        return env
+    with open(ENV_PATH) as f:
+        for line in f:
+            line = line.strip()
+            if not line or line.startswith("#") or "=" not in line:
+                continue
+            key, value = line.split("=", 1)
+            env[key.strip()] = value.strip().strip('"')
+    return env
+
+
+def _get_ig_accounts() -> list[dict]:
+    """Return all configured Instagram accounts from env."""
+    env = _read_env()
+    accounts = []
+    # Find all SOCIAL_INSTAGRAM_N_ indices
+    import re
+    pattern = re.compile(r"^SOCIAL_INSTAGRAM_(\d+)_")
+    indices = set()
+    for key in env:
+        m = pattern.match(key)
+        if m:
+            indices.add(int(m.group(1)))
+    for idx in sorted(indices):
+        prefix = f"SOCIAL_INSTAGRAM_{idx}"
+        token = env.get(f"{prefix}_ACCESS_TOKEN", "")
+        account_id = env.get(f"{prefix}_ACCOUNT_ID", "")
+        label = env.get(f"{prefix}_LABEL", f"Conta {idx}")
+        if token:
+            accounts.append({
+                "index": idx,
+                "label": label,
+                "access_token": token,
+                "account_id": account_id,
+            })
+    return accounts
+
+
+def _graph_get(path: str, params: dict, token: str) -> dict:
+    """Make a GET request to Graph API."""
+    params["access_token"] = token
+    url = f"{GRAPH_BASE}/{path}?{urllib.parse.urlencode(params)}"
+    with urllib.request.urlopen(url, timeout=30) as resp:
+        return json.loads(resp.read())
+
+
+def _graph_post(path: str, data: dict, token: str) -> dict:
+    """Make a POST request to Graph API."""
+    data["access_token"] = token
+    body = urllib.parse.urlencode(data).encode()
+    req = urllib.request.Request(f"{GRAPH_BASE}/{path}", data=body, method="POST")
+    with urllib.request.urlopen(req, timeout=30) as resp:
+        return json.loads(resp.read())
+
+
+def _graph_post_json(path: str, payload: dict, token: str) -> dict:
+    """Make a POST request with JSON body to Graph API."""
+    payload["access_token"] = token
+    body = json.dumps(payload).encode()
+    req = urllib.request.Request(
+        f"{GRAPH_BASE}/{path}",
+        data=body,
+        headers={"Content-Type": "application/json"},
+        method="POST",
+    )
+    with urllib.request.urlopen(req, timeout=30) as resp:
+        return json.loads(resp.read())
+
+
+# ── Webhook Verification (GET) ──────────────────────────────────────────────
+
+@bp.route("/api/instagram/webhook", methods=["GET"])
+def instagram_webhook_verify():
+    """Verify Instagram/Meta webhook subscription.
+
+    Meta sends a GET request with:
+      hub.mode=subscribe
+      hub.challenge=<random_string>
+      hub.verify_token=<VERIFY_TOKEN>
+    """
+    mode = request.args.get("hub.mode", "")
+    challenge = request.args.get("hub.challenge", "")
+    verify_token = request.args.get("hub.verify_token", "")
+
+    env = _read_env()
+    expected_token = env.get("INSTAGRAM_WEBHOOK_VERIFY_TOKEN", "")
+
+    if mode == "subscribe" and verify_token == expected_token:
+        log.info("Instagram webhook verified successfully")
+        return challenge, 200
+
+    log.warning("Instagram webhook verification failed: mode=%s token_match=%s", mode, verify_token == expected_token)
+    return jsonify({"error": "Verification failed"}), 403
+
+
+# ── Webhook Receiver (POST) ─────────────────────────────────────────────────
+
+@bp.route("/api/instagram/webhook", methods=["POST"])
+def instagram_webhook_receive():
+    """Receive Instagram webhook events (comments, messages).
+
+    Meta sends POST with JSON body containing entry changes.
+    We process asynchronously and return 200 immediately.
+    """
+    # Validate signature if app secret is set
+    env = _read_env()
+    app_secret = env.get("META_APP_SECRET", "")
+
+    if app_secret:
+        signature = request.headers.get("X-Hub-Signature-256", "")
+        if not _verify_signature(request.data, signature, app_secret):
+            log.warning("Instagram webhook: invalid signature")
+            return jsonify({"status": "ok"}), 200  # Don't reveal invalid sig
+
+    try:
+        data = request.get_json(silent=True) or {}
+    except Exception:
+        log.warning("Instagram webhook: failed to parse JSON body")
+        return jsonify({"status": "ok"}), 200
+
+    log.info("Instagram webhook received: object=%s entries=%d",
+             data.get("object"), len(data.get("entry", [])))
+
+    # Process asynchronously
+    app = current_app._get_current_object()
+
+    def _process():
+        with app.app_context():
+            _handle_webhook_entries(data, app)
+
+    thread = threading.Thread(target=_process, daemon=True)
+    thread.start()
+
+    return jsonify({"status": "ok"}), 200
+
+
+def _verify_signature(payload: bytes, signature: str, app_secret: str) -> bool:
+    """Verify X-Hub-Signature-256 from Meta."""
+    if not signature.startswith("sha256="):
+        return False
+    expected = hmac.new(app_secret.encode(), payload, hashlib.sha256).hexdigest()
+    return hmac.compare_digest(f"sha256={expected}", signature)
+
+
+def _handle_webhook_entries(data: dict, app):
+    """Process webhook entries — comments and messages."""
+    from models import db  # Import here to avoid circular deps
+
+    for entry in data.get("entry", []):
+        entry_id = entry.get("id", "")
+        changes = entry.get("changes", [])
+
+        for change in changes:
+            field = change.get("field", "")
+            value = change.get("value", {})
+
+            if field == "comments":
+                _handle_comment(value, entry_id, app)
+            elif field == "messages":
+                _handle_message(value, entry_id, app)
+            elif field == "mentions":
+                _handle_mention(value, entry_id, app)
+            else:
+                log.info("Instagram webhook: unhandled field=%s", field)
+
+
+def _handle_comment(value: dict, page_id: str, app):
+    """Handle a new comment on an Instagram media."""
+    comment_id = value.get("id", "")
+    text = value.get("text", "")
+    media_id = value.get("media", {}).get("id", "")
+    from_user = value.get("from", {}).get("username", "")
+
+    log.info("Instagram comment: id=%s from=%s media=%s text=%s",
+             comment_id, from_user, media_id, text[:80])
+
+    # Store in activity log
+    try:
+        from models import ActivityLog
+        log_entry = ActivityLog(
+            source="instagram",
+            event_type="comment",
+            external_id=comment_id,
+            from_user=from_user,
+            content=text,
+            media_id=media_id,
+            page_id=page_id,
+            created_at=datetime.now(timezone.utc),
+        )
+        from models import db
+        db.session.add(log_entry)
+        db.session.commit()
+    except Exception as e:
+        log.warning("Failed to log Instagram comment: %s", e)
+
+    # Auto-reply logic: if comment contains certain keywords, reply
+    # This can be extended with AI agent integration
+    _maybe_auto_reply_comment(comment_id, text, from_user, app)
+
+
+def _handle_message(value: dict, page_id: str, app):
+    """Handle a new DM on Instagram."""
+    message = value.get("message", {})
+    message_id = message.get("id", "")
+    text = message.get("text", "")
+    from_user = value.get("from", {}).get("username", "")
+
+    log.info("Instagram DM: id=%s from=%s text=%s", message_id, from_user, text[:80])
+
+    # Store in activity log
+    try:
+        from models import ActivityLog
+        log_entry = ActivityLog(
+            source="instagram",
+            event_type="dm",
+            external_id=message_id,
+            from_user=from_user,
+            content=text,
+            page_id=page_id,
+            created_at=datetime.now(timezone.utc),
+        )
+        from models import db
+        db.session.add(log_entry)
+        db.session.commit()
+    except Exception as e:
+        log.warning("Failed to log Instagram DM: %s", e)
+
+    # Auto-reply with link
+    _maybe_auto_reply_dm(message_id, text, from_user, app)
+
+
+def _handle_mention(value: dict, page_id: str, app):
+    """Handle Instagram mention."""
+    media_id = value.get("media_id", "")
+    log.info("Instagram mention: media_id=%s", media_id)
+
+
+def _maybe_auto_reply_comment(comment_id: str, text: str, from_user: str, app):
+    """Auto-reply to a comment if it matches rules."""
+    env = _read_env()
+    auto_reply_enabled = env.get("INSTAGRAM_AUTO_REPLY_COMMENTS", "false").lower() == "true"
+    if not auto_reply_enabled:
+        return
+
+    reply_text = env.get("INSTAGRAM_COMMENT_REPLY_TEXT", "")
+    if not reply_text:
+        return
+
+    accounts = _get_ig_accounts()
+    if not accounts:
+        return
+
+    token = accounts[0]["access_token"]
+
+    try:
+        result = _graph_post(
+            f"{comment_id}/replies",
+            {"message": reply_text},
+            token,
+        )
+        log.info("Instagram comment reply sent: %s", result.get("id"))
+    except Exception as e:
+        log.warning("Failed to reply to comment %s: %s", comment_id, e)
+
+
+def _maybe_auto_reply_dm(message_id: str, text: str, from_user: str, app):
+    """Auto-reply to a DM with configured link."""
+    env = _read_env()
+    auto_reply_enabled = env.get("INSTAGRAM_AUTO_REPLY_DM", "false").lower() == "true"
+    if not auto_reply_enabled:
+        return
+
+    reply_text = env.get("INSTAGRAM_DM_REPLY_TEXT", "")
+    if not reply_text:
+        return
+
+    accounts = _get_ig_accounts()
+    if not accounts:
+        return
+
+    token = accounts[0]["access_token"]
+    ig_account_id = accounts[0]["account_id"]
+
+    try:
+        # Send DM reply via Instagram Messaging API
+        payload = {
+            "recipient": {"id": from_user},
+            "message": {"text": reply_text},
+        }
+        result = _graph_post_json(
+            f"{ig_account_id}/messages",
+            payload,
+            token,
+        )
+        log.info("Instagram DM reply sent: %s", result.get("id"))
+    except Exception as e:
+        log.warning("Failed to reply to DM from %s: %s", from_user, e)
+
+
+# ── API: Account Info ───────────────────────────────────────────────────────
+
+@bp.route("/api/instagram/accounts")
+def instagram_accounts():
+    """List configured Instagram accounts."""
+    accounts = _get_ig_accounts()
+    # Don't expose tokens
+    return jsonify({
+        "accounts": [
+            {"index": a["index"], "label": a["label"], "account_id": a["account_id"]}
+            for a in accounts
+        ]
+    })
+
+
+@bp.route("/api/instagram/profile/<int:account_idx>")
+def instagram_profile(account_idx):
+    """Get Instagram profile info."""
+    accounts = _get_ig_accounts()
+    account = next((a for a in accounts if a["index"] == account_idx), None)
+    if not account:
+        return jsonify({"error": "Account not found"}), 404
+
+    try:
+        result = _graph_get(
+            account["account_id"],
+            {"fields": "id,username,name,biography,followers_count,follows_count,media_count,profile_picture_url,website"},
+            account["access_token"],
+        )
+        return jsonify(result)
+    except urllib.error.HTTPError as e:
+        return jsonify({"error": e.read().decode()}), e.code
+
+
+# ── API: Publish ────────────────────────────────────────────────────────────
+
+@bp.route("/api/instagram/publish", methods=["POST"])
+def instagram_publish():
+    """Publish a post to Instagram.
+
+    Expects JSON:
+    {
+        "account_idx": 1,
+        "image_url": "https://...",   // or video_url
+        "caption": "Post caption",
+        "is_reel": false,
+        "share_to_feed": true  // for reels
+    }
+    """
+    data = request.get_json(silent=True) or {}
+    account_idx = data.get("account_idx", 1)
+    image_url = data.get("image_url", "")
+    video_url = data.get("video_url", "")
+    caption = data.get("caption", "")
+    is_reel = data.get("is_reel", False)
+    share_to_feed = data.get("share_to_feed", True)
+
+    if not image_url and not video_url:
+        return jsonify({"error": "image_url or video_url is required"}), 400
+
+    accounts = _get_ig_accounts()
+    account = next((a for a in accounts if a["index"] == account_idx), None)
+    if not account:
+        return jsonify({"error": "Account not found"}), 404
+
+    token = account["access_token"]
+    ig_id = account["account_id"]
+
+    try:
+        if is_reel or video_url:
+            # Publish video/reel
+            media_url = video_url or image_url
+            # Step 1: Create video container
+            container = _graph_post(
+                f"{ig_id}/media",
+                {
+                    "media_type": "REELS" if is_reel else "VIDEO",
+                    "video_url": media_url,
+                    "caption": caption,
+                    "share_to_feed": str(share_to_feed).lower(),
+                },
+                token,
+            )
+            creation_id = container.get("id")
+
+            # Step 2: Wait and check status
+            import time
+            for _ in range(30):
+                status = _graph_get(
+                    creation_id,
+                    {"fields": "status_code"},
+                    token,
+                )
+                if status.get("status_code") == "FINISHED":
+                    break
+                if status.get("status_code") == "ERROR":
+                    return jsonify({"error": "Video processing failed", "status": status}), 500
+                time.sleep(2)
+
+            # Step 3: Publish
+            result = _graph_post(
+                f"{ig_id}/media_publish",
+                {"creation_id": creation_id},
+                token,
+            )
+        else:
+            # Publish image
+            # Step 1: Create media container
+            container = _graph_post(
+                f"{ig_id}/media",
+                {
+                    "image_url": image_url,
+                    "caption": caption,
+                },
+                token,
+            )
+            creation_id = container.get("id")
+
+            # Step 2: Publish
+            result = _graph_post(
+                f"{ig_id}/media_publish",
+                {"creation_id": creation_id},
+                token,
+            )
+
+        log.info("Instagram post published: %s", result.get("id"))
+        return jsonify({"id": result.get("id"), "status": "published"})
+
+    except urllib.error.HTTPError as e:
+        error_body = e.read().decode()
+        log.error("Instagram publish failed: %s", error_body)
+        return jsonify({"error": error_body}), e.code
+    except Exception as e:
+        log.error("Instagram publish failed: %s", e)
+        return jsonify({"error": str(e)}), 500
+
+
+# ── API: Comments ───────────────────────────────────────────────────────────
+
+@bp.route("/api/instagram/comments/<int:account_idx>/<media_id>")
+def instagram_comments(account_idx, media_id):
+    """Get comments on a media."""
+    accounts = _get_ig_accounts()
+    account = next((a for a in accounts if a["index"] == account_idx), None)
+    if not account:
+        return jsonify({"error": "Account not found"}), 404
+
+    try:
+        result = _graph_get(
+            f"{media_id}/comments",
+            {"fields": "id,text,username,timestamp,like_count,replies{id,text,username,timestamp}", "limit": 50},
+            account["access_token"],
+        )
+        return jsonify(result)
+    except urllib.error.HTTPError as e:
+        return jsonify({"error": e.read().decode()}), e.code
+
+
+@bp.route("/api/instagram/comments/<int:account_idx>/reply", methods=["POST"])
+def instagram_reply_comment(account_idx):
+    """Reply to a comment.
+
+    Expects JSON:
+    {
+        "comment_id": "...",
+        "message": "Reply text"
+    }
+    """
+    data = request.get_json(silent=True) or {}
+    comment_id = data.get("comment_id", "")
+    message = data.get("message", "")
+
+    if not comment_id or not message:
+        return jsonify({"error": "comment_id and message are required"}), 400
+
+    accounts = _get_ig_accounts()
+    account = next((a for a in accounts if a["index"] == account_idx), None)
+    if not account:
+        return jsonify({"error": "Account not found"}), 404
+
+    try:
+        result = _graph_post(
+            f"{comment_id}/replies",
+            {"message": message},
+            account["access_token"],
+        )
+        return jsonify({"id": result.get("id"), "status": "replied"})
+    except urllib.error.HTTPError as e:
+        return jsonify({"error": e.read().decode()}), e.code
+
+
+@bp.route("/api/instagram/comments/<int:account_idx>/hide", methods=["POST"])
+def instagram_hide_comment(account_idx):
+    """Hide a comment.
+
+    Expects JSON: {"comment_id": "..."}
+    """
+    data = request.get_json(silent=True) or {}
+    comment_id = data.get("comment_id", "")
+
+    accounts = _get_ig_accounts()
+    account = next((a for a in accounts if a["index"] == account_idx), None)
+    if not account:
+        return jsonify({"error": "Account not found"}), 404
+
+    try:
+        result = _graph_post(
+            comment_id,
+            {"hidden": "true"},
+            account["access_token"],
+        )
+        return jsonify(result)
+    except urllib.error.HTTPError as e:
+        return jsonify({"error": e.read().decode()}), e.code
+
+
+# ── API: DMs ────────────────────────────────────────────────────────────────
+
+@bp.route("/api/instagram/dm/<int:account_idx>/send", methods=["POST"])
+def instagram_send_dm(account_idx):
+    """Send a DM to a user.
+
+    Expects JSON:
+    {
+        "recipient_username": "username",
+        "message": "Hello! Check out: https://..."
+    }
+    """
+    data = request.get_json(silent=True) or {}
+    recipient = data.get("recipient_username", "")
+    message = data.get("message", "")
+
+    if not recipient or not message:
+        return jsonify({"error": "recipient_username and message are required"}), 400
+
+    accounts = _get_ig_accounts()
+    account = next((a for a in accounts if a["index"] == account_idx), None)
+    if not account:
+        return jsonify({"error": "Account not found"}), 404
+
+    token = account["access_token"]
+    ig_id = account["account_id"]
+
+    try:
+        # First, get the user's IG ID from username
+        user_search = _graph_get(
+            "ig_users",
+            {"username": recipient},
+            token,
+        )
+        user_id = user_search.get("id")
+
+        if not user_id:
+            # Try searching via the user's IG ID
+            return jsonify({"error": f"User '{recipient}' not found"}), 404
+
+        # Send the message
+        payload = {
+            "recipient": {"id": user_id},
+            "message": {"text": message},
+        }
+        result = _graph_post_json(
+            f"{ig_id}/messages",
+            payload,
+            token,
+        )
+        return jsonify({"id": result.get("id"), "status": "sent"})
+    except urllib.error.HTTPError as e:
+        error_body = e.read().decode()
+        # If user search fails, try sending directly with username
+        if "ig_users" in str(e.url):
+            try:
+                payload = {
+                    "recipient": {"username": recipient},
+                    "message": {"text": message},
+                }
+                result = _graph_post_json(
+                    f"{ig_id}/messages",
+                    payload,
+                    token,
+                )
+                return jsonify({"id": result.get("id"), "status": "sent"})
+            except Exception as e2:
+                return jsonify({"error": str(e2)}), 500
+        return jsonify({"error": error_body}), e.code
+
+
+@bp.route("/api/instagram/dm/<int:account_idx>/conversations")
+def instagram_conversations(account_idx):
+    """Get DM conversations."""
+    accounts = _get_ig_accounts()
+    account = next((a for a in accounts if a["index"] == account_idx), None)
+    if not account:
+        return jsonify({"error": "Account not found"}), 404
+
+    try:
+        result = _graph_get(
+            f"{account['account_id']}/conversations",
+            {"fields": "id,participants,messages{id,text,from,to,timestamp}", "limit": 25},
+            account["access_token"],
+        )
+        return jsonify(result)
+    except urllib.error.HTTPError as e:
+        return jsonify({"error": e.read().decode()}), e.code
+
+
+# ── API: Media ──────────────────────────────────────────────────────────────
+
+@bp.route("/api/instagram/media/<int:account_idx>")
+def instagram_media(account_idx):
+    """Get recent media for an account."""
+    accounts = _get_ig_accounts()
+    account = next((a for a in accounts if a["index"] == account_idx), None)
+    if not account:
+        return jsonify({"error": "Account not found"}), 404
+
+    limit = request.args.get("limit", 25, type=int)
+
+    try:
+        result = _graph_get(
+            f"{account['account_id']}/media",
+            {
+                "fields": "id,caption,media_type,media_url,thumbnail_url,permalink,timestamp,like_count,comments_count",
+                "limit": limit,
+            },
+            account["access_token"],
+        )
+        return jsonify(result)
+    except urllib.error.HTTPError as e:
+        return jsonify({"error": e.read().decode()}), e.code
+
+
+# ── API: Insights ───────────────────────────────────────────────────────────
+
+@bp.route("/api/instagram/insights/<int:account_idx>")
+def instagram_insights(account_idx):
+    """Get account insights."""
+    accounts = _get_ig_accounts()
+    account = next((a for a in accounts if a["index"] == account_idx), None)
+    if not account:
+        return jsonify({"error": "Account not found"}), 404
+
+    try:
+        result = _graph_get(
+            f"{account['account_id']}/insights",
+            {
+                "metric": "impressions,reach,profile_views,follower_count",
+                "period": "day",
+            },
+            account["access_token"],
+        )
+        return jsonify(result)
+    except urllib.error.HTTPError as e:
+        return jsonify({"error": e.read().decode()}), e.code
diff --git a/dashboard/backend/routes/integrations.py b/dashboard/backend/routes/integrations.py
index 972cb0492..e3981ab33 100644
--- a/dashboard/backend/routes/integrations.py
+++ b/dashboard/backend/routes/integrations.py
@@ -23,7 +23,7 @@
 WORKSPACE = Path(__file__).resolve().parent.parent.parent.parent
 SKILLS_DIR = WORKSPACE / ".claude" / "skills"
 PLUGINS_DIR = WORKSPACE / "plugins"
-DB_PATH = WORKSPACE / "dashboard" / "data" / "dashboard.db"
+DB_PATH = WORKSPACE / "dashboard" / "data" / "evonexus.db"
 
 #
 # Each entry declares the env vars that must all be set for the integration to
@@ -51,6 +51,25 @@
     {"name": "Evolution Go", "keys": ["EVOLUTION_GO_KEY", "EVOLUTION_GO_URL"], "category": "messaging"},
     {"name": "Evo CRM", "keys": ["EVO_CRM_TOKEN", "EVO_CRM_URL"], "category": "crm"},
     {"name": "AI Image Creator", "keys": ["AI_IMG_CREATOR_"], "category": "creative", "prefix": True},
+    # Postiz — social publishing bridge. Called server-side by the dashboard
+    # after a human approves a publish gate, or by the MediaJob pipeline
+    # (social-media-production) after a MediaJob is approved. POSTIZ_API_KEY
+    # is denylisted from agent subprocess env (goal-ticket-unification).
+    # POSTIZ_INTEGRATION_*_ID pin a specific connected account when a
+    # platform has more than one. This entry is read-only status (configured
+    # bool) — use PUT /api/integrations/core/postiz for masked admin config.
+    {"name": "Postiz", "keys": [
+        "POSTIZ_URL", "POSTIZ_API_KEY",
+        "POSTIZ_INTEGRATION_INSTAGRAM_ID", "POSTIZ_INTEGRATION_YOUTUBE_ID",
+        "POSTIZ_INTEGRATION_LINKEDIN_ID", "POSTIZ_INTEGRATION_TIKTOK_ID",
+        "POSTIZ_ALLOWED_MEDIA_HOSTS",
+    ], "category": "social"},
+    # MinIO / S3 — media host for the publish flow (int-minio skill). Agents
+    # upload generated images here and pass the public URL to Postiz.
+    {"name": "MinIO / S3 Media", "keys": [
+        "MINIO_ENDPOINT", "MINIO_ACCESS_KEY", "MINIO_SECRET_KEY",
+        "MINIO_BUCKET", "MINIO_PUBLIC_BASE",
+    ], "category": "storage"},
     # Note: LLM providers (OpenAI, Anthropic, Gemini) are NOT listed here.
     # Agents/classifiers use Claude Code as the runner (subprocess); Knowledge
     # embedder accepts OpenAI as an opt-in via Knowledge Settings.
diff --git a/dashboard/backend/routes/integrations_core_postiz.py b/dashboard/backend/routes/integrations_core_postiz.py
new file mode 100644
index 000000000..15174bcb6
--- /dev/null
+++ b/dashboard/backend/routes/integrations_core_postiz.py
@@ -0,0 +1,205 @@
+"""PUT/POST/GET /api/integrations/core/postiz — admin config for the Postiz
+publish bridge (briefing Etapa 13).
+
+Persists into the same WORKSPACE/.env file already used by
+routes/integrations.py's custom/plugin integration config (via
+_upsert_env_vars) — POSTIZ_URL/POSTIZ_API_KEY/etc. are already read from
+os.environ everywhere else in the codebase (postiz_client.PostizClient.from_env,
+heartbeat_outcome, routes/integrations.py's INTEGRATIONS registry). This
+endpoint does not introduce a second source of truth for those values — it
+adds masking, "keep current on masked submit", SSRF-guarded URL validation,
+and a test-connection action on top of the existing .env persistence.
+"""
+
+from __future__ import annotations
+
+import ipaddress
+import os
+import socket
+from urllib.parse import urlparse
+
+from flask import Blueprint, jsonify, request
+from flask_login import current_user
+
+from models import audit
+from routes._helpers import WORKSPACE
+from routes.integrations import _upsert_env_vars
+from routes.knowledge import _require_xhr
+from postiz_client import PostizClient
+
+bp = Blueprint("integrations_core_postiz", __name__)
+
+_ALLOWED_KEYS = (
+    "POSTIZ_URL",
+    "POSTIZ_API_KEY",
+    "POSTIZ_INTEGRATION_INSTAGRAM_ID",
+    "POSTIZ_INTEGRATION_YOUTUBE_ID",
+    "POSTIZ_INTEGRATION_LINKEDIN_ID",
+    "POSTIZ_INTEGRATION_TIKTOK_ID",
+    "POSTIZ_REQUEST_TIMEOUT_SECONDS",
+    "POSTIZ_UPLOAD_TIMEOUT_SECONDS",
+    "SOCIAL_DEFAULT_POST_MODE",
+    "MEDIA_TIMEZONE",
+)
+_SECRET_KEYS = frozenset({"POSTIZ_API_KEY"})
+_MASK = "****"
+
+
+def _require_admin():
+    """Stricter than the generic RBAC resource check — this endpoint can
+    write POSTIZ_API_KEY, so briefing Etapa 13 explicitly requires
+    'acesso apenas administrativo', not just integrations:manage.
+    """
+    _require_xhr()
+    if not current_user.is_authenticated or current_user.role != "admin":
+        return jsonify({"error": "Forbidden — apenas administradores."}), 403
+    return None
+
+
+def _mask_secret(value: str) -> str:
+    if not value:
+        return ""
+    if len(value) < 8:
+        return _MASK
+    return value[:4] + _MASK + value[-4:]
+
+
+def _is_private_host(hostname: str) -> bool:
+    try:
+        ip = ipaddress.ip_address(hostname)
+        return ip.is_private or ip.is_loopback or ip.is_link_local
+    except ValueError:
+        pass
+    try:
+        resolved = socket.gethostbyname(hostname)
+        ip = ipaddress.ip_address(resolved)
+        return ip.is_private or ip.is_loopback or ip.is_link_local
+    except (socket.gaierror, ValueError):
+        return False
+
+
+def _validate_postiz_url(url: str) -> str | None:
+    """Returns an error string, or None if the URL is acceptable.
+
+    SSRF guard (briefing Etapa 13: "bloqueio de URLs internas arbitrárias
+    ... exceto hosts explicitamente permitidos"): HTTPS required, and the
+    resolved host must not be private/loopback/link-local unless it is
+    explicitly allowlisted via POSTIZ_URL_ALLOWED_INTERNAL_HOSTS (comma-
+    separated) — needed for self-hosted Postiz reachable only over an
+    internal Swarm network alias.
+    """
+    parsed = urlparse(url)
+    if parsed.scheme != "https":
+        return "POSTIZ_URL deve ser HTTPS."
+    if not parsed.hostname:
+        return "POSTIZ_URL inválida."
+    allowed_internal = {
+        h.strip().lower()
+        for h in os.environ.get("POSTIZ_URL_ALLOWED_INTERNAL_HOSTS", "").split(",")
+        if h.strip()
+    }
+    if parsed.hostname.lower() in allowed_internal:
+        return None
+    if _is_private_host(parsed.hostname):
+        return (
+            f"POSTIZ_URL resolve para um host interno/privado ({parsed.hostname}) — "
+            "isso não é permitido a menos que o host esteja em "
+            "POSTIZ_URL_ALLOWED_INTERNAL_HOSTS."
+        )
+    return None
+
+
+def _current_masked_config() -> dict:
+    values = {k: os.environ.get(k, "") for k in _ALLOWED_KEYS}
+    return {k: (_mask_secret(v) if k in _SECRET_KEYS else v) for k, v in values.items()}
+
+
+@bp.route("/api/integrations/core/postiz", methods=["GET"])
+def get_postiz_config():
+    denied = _require_admin()
+    if denied:
+        return denied
+    configured = bool(os.environ.get("POSTIZ_URL")) and bool(os.environ.get("POSTIZ_API_KEY"))
+    return jsonify({"config": _current_masked_config(), "configured": configured})
+
+
+@bp.route("/api/integrations/core/postiz", methods=["PUT"])
+def put_postiz_config():
+    denied = _require_admin()
+    if denied:
+        return denied
+    data = request.get_json(silent=True) or {}
+
+    updates: dict[str, str] = {}
+    for key in _ALLOWED_KEYS:
+        if key not in data:
+            continue
+        value = data[key]
+        if not isinstance(value, str):
+            return jsonify({"error": f"{key} deve ser uma string."}), 400
+        if key in _SECRET_KEYS and (_MASK in value or value == ""):
+            continue  # masked or blank submit — keep the currently stored secret
+        updates[key] = value
+
+    if "POSTIZ_URL" in updates:
+        error = _validate_postiz_url(updates["POSTIZ_URL"])
+        if error:
+            return jsonify({"error": error}), 400
+        updates["POSTIZ_URL"] = updates["POSTIZ_URL"].rstrip("/")
+
+    for key in ("POSTIZ_REQUEST_TIMEOUT_SECONDS", "POSTIZ_UPLOAD_TIMEOUT_SECONDS"):
+        if key in updates:
+            try:
+                float(updates[key])
+            except ValueError:
+                return jsonify({"error": f"{key} deve ser numérico."}), 400
+
+    if "SOCIAL_DEFAULT_POST_MODE" in updates and updates["SOCIAL_DEFAULT_POST_MODE"] not in ("draft", "schedule"):
+        return jsonify({"error": "SOCIAL_DEFAULT_POST_MODE deve ser 'draft' ou 'schedule'."}), 400
+
+    if not updates:
+        return jsonify({"error": "Nenhum campo válido para atualizar."}), 400
+
+    env_path = WORKSPACE / ".env"
+    _upsert_env_vars(env_path, updates, section_comment="core-postiz (social-media-production)")
+    try:
+        env_path.chmod(0o600)  # restrict permission — briefing: "arquivo com permissão restrita"
+    except OSError:
+        pass
+
+    # Reload dotenv in-process (same idiom as configure_plugin_integration)
+    # so this dashboard process picks up the change without a restart.
+    try:
+        from dotenv import load_dotenv  # type: ignore
+        load_dotenv(env_path, override=True)
+    except Exception:
+        pass
+    for key, value in updates.items():
+        os.environ[key] = value
+
+    audit(current_user, "manage", "integrations", f"updated core postiz config: keys={sorted(updates.keys())}")
+
+    configured = bool(os.environ.get("POSTIZ_URL")) and bool(os.environ.get("POSTIZ_API_KEY"))
+    return jsonify({
+        "config": _current_masked_config(),
+        "configured": configured,
+        "note": (
+            "Valores aplicados neste processo do dashboard imediatamente. "
+            "Outros serviços do Swarm (media-worker, scheduler, telegram) leem "
+            "estas mesmas variáveis do arquivo .env no boot — reinicie-os "
+            "(docker service update) se precisarem do novo valor."
+        ),
+    })
+
+
+@bp.route("/api/integrations/core/postiz/test", methods=["POST"])
+def test_postiz_connection():
+    denied = _require_admin()
+    if denied:
+        return denied
+    client = PostizClient.from_env()
+    if client is None:
+        return jsonify({"ok": False, "detail": "POSTIZ_URL/POSTIZ_API_KEY não configurados."}), 400
+    result = client.test_connection()
+    audit(current_user, "execute", "integrations", f"tested postiz connection: ok={result.get('ok')}")
+    return jsonify(result), (200 if result.get("ok") else 502)
diff --git a/dashboard/backend/routes/media_jobs.py b/dashboard/backend/routes/media_jobs.py
new file mode 100644
index 000000000..c21e4ef54
--- /dev/null
+++ b/dashboard/backend/routes/media_jobs.py
@@ -0,0 +1,528 @@
+"""Media Jobs API — social-media-production pipeline orchestration.
+
+Ownership split (see workspace/development/features/social-media-production/
+[C]architecture-social-media-production.md):
+  - CPU-heavy composition+render+validation (queued/retryable_failure ->
+    ready_for_review) runs in the isolated media-worker service, which polls
+    this API (`/run` to claim) and reports progress via PATCH — never inside
+    this Flask process (Etapa 3: "em vez de executar renderizações dentro
+    do processo web do dashboard").
+  - I/O-bound Postiz upload/draft/schedule (approved -> draft_created ->
+    scheduled) runs directly here — no CPU-bound work, and the render file
+    is readable from the shared evonexus_media volume.
+"""
+
+from __future__ import annotations
+
+import json
+import os
+from datetime import datetime, timezone
+from pathlib import Path
+from zoneinfo import ZoneInfo
+
+from flask import Blueprint, jsonify, request, send_file
+from flask_login import current_user
+
+from models import db, MediaJob, has_permission, audit
+from media_state_machine import assert_transition, can_transition, InvalidTransition, allowed_targets
+from media_workspace import ensure_job_scaffold, new_job_id, media_workspace_root, PathSecurityError
+from postiz_client import PostizClient, PostizError, MEDIA_JOB_PLATFORMS, build_platform_settings
+
+bp = Blueprint("media_jobs", __name__)
+
+_WORKER_PATCHABLE_FIELDS = (
+    "render_path", "render_sha256", "render_size_bytes", "render_duration_seconds",
+    "render_width", "render_height", "render_fps", "render_has_audio", "last_error",
+    "title", "brief", "caption",
+)
+
+
+def _require(action: str):
+    if not has_permission(current_user.role, "media_jobs", action):
+        return jsonify({"error": "Forbidden"}), 403
+    return None
+
+
+def _now() -> str:
+    return datetime.now(timezone.utc).strftime("%Y-%m-%dT%H:%M:%S.%fZ")
+
+
+def _transition(job: MediaJob, target: str) -> None:
+    """Single choke point for every status write — no route may set
+    `job.status` directly (briefing: "Valide transições").
+    """
+    assert_transition(job.status, target)
+    job.status = target
+    job.updated_at = _now()
+
+
+def _invalid_transition_response(job: MediaJob, target: str):
+    return jsonify({
+        "error": "invalid_transition",
+        "detail": f"MediaJob está em '{job.status}', não pode ir para '{target}'.",
+        "current_status": job.status,
+        "allowed_from_current": allowed_targets(job.status),
+    }), 409
+
+
+def _localize_to_utc(local_iso: str, tz_name: str) -> str:
+    """MEDIA_TIMEZONE input -> normalized ISO-8601 UTC (briefing Etapa 10:
+    the user enters America/Bahia; Postiz gets UTC). Never relies on the
+    container's implicit local timezone — always resolves via zoneinfo.
+    """
+    try:
+        tz = ZoneInfo(tz_name)
+    except Exception as exc:
+        raise ValueError(f"timezone inválido: {tz_name!r}") from exc
+    try:
+        dt = datetime.fromisoformat(local_iso)
+    except ValueError as exc:
+        raise ValueError(f"scheduled_at inválido (esperado ISO-8601): {local_iso!r}") from exc
+    if dt.tzinfo is None:
+        dt = dt.replace(tzinfo=tz)
+    return dt.astimezone(timezone.utc).strftime("%Y-%m-%dT%H:%M:%S.000Z")
+
+
+def _resolve_platform_settings(job: MediaJob) -> dict:
+    if job.platform_settings:
+        try:
+            data = json.loads(job.platform_settings)
+            if isinstance(data, dict) and data.get("__type"):
+                return data
+        except (json.JSONDecodeError, TypeError):
+            pass
+    if job.platform == "youtube":
+        return build_platform_settings("youtube", title=(job.title or "Vídeo")[:100])
+    if job.platform in ("instagram", "linkedin", "tiktok"):
+        return build_platform_settings(job.platform)
+    raise ValueError(f"Plataforma sem builder de settings: {job.platform!r}")
+
+
+# ── CRUD ─────────────────────────────────────────────────────────────────
+
+@bp.route("/api/media/jobs")
+def list_media_jobs():
+    denied = _require("view")
+    if denied:
+        return denied
+    query = MediaJob.query
+    status = request.args.get("status")
+    if status:
+        query = query.filter(MediaJob.status == status)
+    project_id = request.args.get("project_id", type=int)
+    if project_id:
+        query = query.filter(MediaJob.project_id == project_id)
+    platform = request.args.get("platform")
+    if platform:
+        query = query.filter(MediaJob.platform == platform)
+    limit = min(request.args.get("limit", default=200, type=int) or 200, 500)
+    jobs = query.order_by(MediaJob.created_at.desc()).limit(limit).all()
+    return jsonify([j.to_dict() for j in jobs])
+
+
+@bp.route("/api/media/jobs/<string:job_id>")
+def get_media_job(job_id):
+    denied = _require("view")
+    if denied:
+        return denied
+    job = MediaJob.query.get_or_404(job_id)
+    return jsonify(job.to_dict())
+
+
+@bp.route("/api/media/jobs", methods=["POST"])
+def create_media_job():
+    denied = _require("execute")
+    if denied:
+        return denied
+    data = request.get_json() or {}
+
+    required = ["title", "platform", "width", "height", "duration_seconds"]
+    missing = [f for f in required if data.get(f) in (None, "")]
+    if missing:
+        return jsonify({"error": f"Campos obrigatórios ausentes: {missing}"}), 400
+
+    platform = data["platform"]
+    if platform not in MEDIA_JOB_PLATFORMS:
+        return jsonify({"error": f"platform inválido: {platform!r}. Aceita: {list(MEDIA_JOB_PLATFORMS)}"}), 400
+
+    publication_mode = data.get("publication_mode", os.environ.get("SOCIAL_DEFAULT_POST_MODE", "draft"))
+    if publication_mode not in ("draft", "schedule"):
+        return jsonify({"error": f"publication_mode inválido: {publication_mode!r}"}), 400
+
+    tz_name = data.get("timezone") or os.environ.get("MEDIA_TIMEZONE", "America/Bahia")
+    scheduled_at = data.get("scheduled_at")
+    scheduled_at_utc = None
+    if scheduled_at:
+        try:
+            scheduled_at_utc = _localize_to_utc(scheduled_at, tz_name)
+        except ValueError as exc:
+            return jsonify({"error": str(exc)}), 400
+        if publication_mode == "schedule":
+            scheduled_dt = datetime.strptime(scheduled_at_utc, "%Y-%m-%dT%H:%M:%S.000Z").replace(tzinfo=timezone.utc)
+            if scheduled_dt <= datetime.now(timezone.utc):
+                return jsonify({"error": "scheduled_at precisa estar no futuro."}), 400
+
+    platform_settings = data.get("platform_settings")
+    if platform_settings is not None and not isinstance(platform_settings, dict):
+        return jsonify({"error": "platform_settings deve ser um objeto."}), 400
+
+    job_id = new_job_id()
+    now = _now()
+    job = MediaJob(
+        id=job_id,
+        project_id=data.get("project_id"),
+        campaign_id=data.get("campaign_id"),
+        goal_id=data.get("goal_id"),
+        task_id=data.get("task_id"),
+        created_by=getattr(current_user, "username", "system"),
+        title=data["title"],
+        brief=data.get("brief"),
+        platform=platform,
+        postiz_integration_id=data.get("postiz_integration_id"),
+        format=data.get("format", "vertical"),
+        width=int(data["width"]),
+        height=int(data["height"]),
+        fps=int(data.get("fps", 30)),
+        duration_seconds=float(data["duration_seconds"]),
+        language=data.get("language", "pt-BR"),
+        caption=data.get("caption"),
+        platform_settings=json.dumps(platform_settings) if platform_settings else None,
+        publication_mode=publication_mode,
+        scheduled_at=scheduled_at,
+        scheduled_at_utc=scheduled_at_utc,
+        timezone=tz_name,
+        status="queued",
+        attempt_count=0,
+        created_at=now,
+        updated_at=now,
+    )
+    db.session.add(job)
+    db.session.commit()
+
+    # Scaffold the isolated workspace + write the input manifest OpenCode will read.
+    base = ensure_job_scaffold(job_id)
+    job.workspace_path = str(base)
+    manifest = {
+        "job_id": job_id, "title": job.title, "brief": job.brief, "platform": job.platform,
+        "format": job.format, "width": job.width, "height": job.height, "fps": job.fps,
+        "duration_seconds": job.duration_seconds, "language": job.language, "caption": job.caption,
+        "platform_settings": platform_settings or {},
+        "project_id": job.project_id, "campaign_id": job.campaign_id,
+    }
+    (base / "input" / "job.json").write_text(json.dumps(manifest, indent=2, ensure_ascii=False), encoding="utf-8")
+    db.session.commit()
+
+    audit(current_user, "execute", "media_jobs", f"create media job {job_id} ({platform})")
+    return jsonify(job.to_dict()), 201
+
+
+@bp.route("/api/media/jobs/<string:job_id>", methods=["PATCH"])
+def update_media_job(job_id):
+    """Worker progress-reporting endpoint. Also used for minor pre-run edits
+    (title/brief/caption). Any `status` change goes through the same
+    transition matrix every other action uses — the worker cannot bypass it.
+    """
+    denied = _require("execute")
+    if denied:
+        return denied
+    job = MediaJob.query.get_or_404(job_id)
+    data = request.get_json() or {}
+
+    target_status = data.get("status")
+    if target_status:
+        try:
+            assert_transition(job.status, target_status)
+        except InvalidTransition as exc:
+            return jsonify({
+                "error": "invalid_transition", "detail": str(exc),
+                "allowed_from_current": allowed_targets(job.status),
+            }), 409
+        job.status = target_status
+        if target_status in ("ready_for_review", "failed", "cancelled"):
+            # Worker relinquishes the lock once its portion of the pipeline ends.
+            job.locked_at = None
+            job.locked_by = None
+
+    for field in _WORKER_PATCHABLE_FIELDS:
+        if field in data:
+            setattr(job, field, data[field])
+
+    job.updated_at = _now()
+    db.session.commit()
+    audit(current_user, "execute", "media_jobs", f"update media job {job_id}")
+    return jsonify(job.to_dict())
+
+
+# ── Pipeline actions ─────────────────────────────────────────────────────
+
+@bp.route("/api/media/jobs/<string:job_id>/run", methods=["POST"])
+def run_media_job(job_id):
+    """Atomic claim + (re)start. Used both by a human clicking "Iniciar" and
+    by the media-worker's polling loop. Mirrors routes/tickets.py's
+    checkout_ticket: the atomicity comes from `WHERE locked_at IS NULL` in a
+    raw UPDATE, not from a read-then-write in Python.
+    """
+    denied = _require("execute")
+    if denied:
+        return denied
+    data = request.get_json(silent=True) or {}
+    locked_by = data.get("agent") or "media-worker"
+
+    job = MediaJob.query.get_or_404(job_id)
+
+    if job.status == "rejected":
+        _transition(job, "queued")
+        job.attempt_count = 0
+        job.last_error = None
+        db.session.commit()
+
+    if job.status not in ("queued", "retryable_failure"):
+        return _invalid_transition_response(job, "preparing")
+
+    now = _now()
+    result = db.session.execute(
+        db.text(
+            "UPDATE media_jobs SET locked_at = :now, locked_by = :agent, "
+            "status = 'preparing', updated_at = :now, attempt_count = attempt_count + 1 "
+            "WHERE id = :id AND locked_at IS NULL AND status IN ('queued','retryable_failure')"
+        ),
+        {"id": job_id, "agent": locked_by, "now": now},
+    )
+    db.session.commit()
+    if result.rowcount == 0:
+        db.session.refresh(job)
+        return jsonify({
+            "error": "already_locked_or_invalid_state",
+            "locked_by": job.locked_by, "status": job.status,
+        }), 409
+
+    db.session.refresh(job)
+    audit(current_user, "execute", "media_jobs", f"run media job {job_id}")
+    return jsonify(job.to_dict())
+
+
+@bp.route("/api/media/jobs/<string:job_id>/cancel", methods=["POST"])
+def cancel_media_job(job_id):
+    denied = _require("execute")
+    if denied:
+        return denied
+    job = MediaJob.query.get_or_404(job_id)
+    if not can_transition(job.status, "cancelled"):
+        return _invalid_transition_response(job, "cancelled")
+    _transition(job, "cancelled")
+    job.locked_at = None
+    job.locked_by = None
+    db.session.commit()
+    audit(current_user, "execute", "media_jobs", f"cancelled media job {job_id}")
+    return jsonify(job.to_dict())
+
+
+@bp.route("/api/media/jobs/<string:job_id>/approve", methods=["POST"])
+def approve_media_job(job_id):
+    denied = _require("manage")
+    if denied:
+        return denied
+    job = MediaJob.query.get_or_404(job_id)
+    if not can_transition(job.status, "approved"):
+        return _invalid_transition_response(job, "approved")
+    _transition(job, "approved")
+    job.approved_at = _now()
+    db.session.commit()
+    audit(current_user, "manage", "media_jobs", f"approved media job {job_id}")
+    return jsonify(job.to_dict())
+
+
+@bp.route("/api/media/jobs/<string:job_id>/reject", methods=["POST"])
+def reject_media_job(job_id):
+    denied = _require("manage")
+    if denied:
+        return denied
+    data = request.get_json() or {}
+    reason = (data.get("reason") or "").strip()
+    if not reason:
+        return jsonify({"error": "reason (comentário) é obrigatório para rejeitar."}), 400
+    job = MediaJob.query.get_or_404(job_id)
+    if not can_transition(job.status, "rejected"):
+        return _invalid_transition_response(job, "rejected")
+    _transition(job, "rejected")
+    job.reject_reason = reason
+    db.session.commit()
+    audit(current_user, "manage", "media_jobs", f"rejected media job {job_id}: {reason}")
+    return jsonify(job.to_dict())
+
+
+@bp.route("/api/media/jobs/<string:job_id>/create-draft", methods=["POST"])
+def create_draft_media_job(job_id):
+    """Upload the render + create a Postiz draft. I/O-bound (HTTP calls to
+    Postiz), so it runs synchronously here rather than in the media-worker —
+    per the briefing, rendering must be worker-isolated; upload/draft
+    creation is explicitly "backend OU worker".
+
+    Idempotent (ADR-7): re-POSTing a job that already has postiz_media_id/
+    postiz_post_id never re-uploads or re-creates — it returns the existing
+    state.
+    """
+    denied = _require("manage")
+    if denied:
+        return denied
+    job = MediaJob.query.get_or_404(job_id)
+
+    if job.status == "draft_created" and job.postiz_post_id:
+        return jsonify(job.to_dict())  # already done — idempotent no-op
+
+    if job.status not in ("approved", "retryable_failure", "uploading", "creating_draft"):
+        return _invalid_transition_response(job, "uploading")
+
+    if not job.render_path or not Path(job.render_path).is_file():
+        return jsonify({"error": "render_missing", "detail": "MediaJob não tem um render válido em disco."}), 400
+
+    client = PostizClient.from_env()
+    if client is None:
+        return jsonify({"error": "postiz_not_configured", "detail": "POSTIZ_URL/POSTIZ_API_KEY não configurados."}), 400
+
+    if job.status == "approved":
+        _transition(job, "uploading")
+        db.session.commit()
+    elif job.status == "retryable_failure":
+        # Resume into whichever create-draft substage makes sense given what
+        # already succeeded before the failure — never re-do a completed
+        # step (ADR-7 idempotency).
+        _transition(job, "creating_draft" if job.postiz_media_id else "uploading")
+        db.session.commit()
+
+    try:
+        if not job.postiz_media_id:
+            uploaded = client.upload_file(Path(job.render_path))
+            job.postiz_media_id = uploaded["id"]
+            job.postiz_media_path = uploaded["path"]
+            job.postiz_media_name = uploaded["name"]
+            db.session.commit()  # persist immediately — idempotency checkpoint
+
+        if job.status == "uploading":
+            _transition(job, "creating_draft")
+            db.session.commit()
+
+        if not job.postiz_post_id:
+            integrations = client.list_integrations()
+            integration = client.select_integration(job.platform, integrations)
+            if not integration:
+                raise PostizError(f"Nenhuma integração Postiz ativa e inequívoca para {job.platform!r}.")
+            settings = _resolve_platform_settings(job)
+            media = [{"id": job.postiz_media_id, "path": job.postiz_media_path}]
+            # If this job will be scheduled later, store the real target date now —
+            # PUT /posts/{id}/status only *resumes* publishing "at its stored date",
+            # it cannot set a new one (confirmed against docs.postiz.com).
+            draft_date = job.scheduled_at_utc if (job.publication_mode == "schedule" and job.scheduled_at_utc) else _now()
+            created = client.create_draft(
+                integration_id=integration["id"], content=job.caption or "", media=media,
+                settings=settings, now_iso_utc=draft_date,
+            )
+            post_ids = [item.get("postId") for item in created if isinstance(item, dict) and item.get("postId")]
+            if not post_ids:
+                raise PostizError(f"Postiz não retornou postId: {created!r}")
+            job.postiz_post_id = post_ids[0]
+            db.session.commit()
+
+        _transition(job, "draft_created")
+        job.locked_at = None
+        job.locked_by = None
+        db.session.commit()
+    except (PostizError, ValueError) as exc:
+        _transition(job, "retryable_failure")
+        job.last_error = str(exc)
+        db.session.commit()
+        return jsonify({"error": "postiz_error", "detail": str(exc)}), 502
+
+    audit(current_user, "manage", "media_jobs", f"created postiz draft for media job {job_id}")
+    return jsonify(job.to_dict())
+
+
+@bp.route("/api/media/jobs/<string:job_id>/schedule", methods=["POST"])
+def schedule_media_job(job_id):
+    denied = _require("manage")
+    if denied:
+        return denied
+    job = MediaJob.query.get_or_404(job_id)
+
+    if job.publication_mode != "schedule":
+        return jsonify({"error": "not_schedule_mode", "detail": "publication_mode do job não é 'schedule'."}), 400
+    if not job.scheduled_at_utc:
+        return jsonify({"error": "missing_scheduled_at", "detail": "scheduled_at não definido para este job."}), 400
+    try:
+        scheduled_dt = datetime.strptime(job.scheduled_at_utc, "%Y-%m-%dT%H:%M:%S.000Z").replace(tzinfo=timezone.utc)
+    except ValueError:
+        return jsonify({"error": "invalid_scheduled_at", "detail": job.scheduled_at_utc}), 400
+    if scheduled_dt <= datetime.now(timezone.utc):
+        return jsonify({"error": "scheduled_at_not_future", "detail": "scheduled_at_utc precisa estar no futuro."}), 400
+    if not job.postiz_post_id:
+        return jsonify({"error": "missing_postiz_post_id", "detail": "Job ainda não tem draft criado no Postiz."}), 400
+    if not can_transition(job.status, "scheduling"):
+        return _invalid_transition_response(job, "scheduling")
+
+    client = PostizClient.from_env()
+    if client is None:
+        return jsonify({"error": "postiz_not_configured"}), 400
+
+    _transition(job, "scheduling")
+    db.session.commit()
+    try:
+        client.change_status(job.postiz_post_id, "schedule")
+    except PostizError as exc:
+        _transition(job, "retryable_failure")
+        job.last_error = str(exc)
+        db.session.commit()
+        return jsonify({"error": "postiz_error", "detail": str(exc)}), 502
+
+    _transition(job, "scheduled")
+    db.session.commit()
+    audit(current_user, "manage", "media_jobs", f"scheduled media job {job_id}")
+    return jsonify(job.to_dict())
+
+
+# ── Observability ────────────────────────────────────────────────────────
+
+@bp.route("/api/media/jobs/<string:job_id>/logs")
+def get_media_job_logs(job_id):
+    denied = _require("view")
+    if denied:
+        return denied
+    job = MediaJob.query.get_or_404(job_id)
+    logs: dict[str, str] = {}
+    if job.workspace_path:
+        logs_dir = Path(job.workspace_path) / "logs"
+        if logs_dir.is_dir():
+            for f in sorted(logs_dir.glob("*")):
+                if f.is_file():
+                    try:
+                        content = f.read_text(encoding="utf-8", errors="replace")
+                    except OSError:
+                        continue
+                    logs[f.name] = content[-32 * 1024:]  # tail last 32KB
+    return jsonify({
+        "job_id": job_id, "status": job.status, "attempt_count": job.attempt_count,
+        "last_error": job.last_error, "logs": logs,
+    })
+
+
+@bp.route("/api/media/jobs/<string:job_id>/video")
+def get_media_job_video(job_id):
+    denied = _require("view")
+    if denied:
+        return denied
+    job = MediaJob.query.get_or_404(job_id)
+    if not job.render_path:
+        return jsonify({"error": "no_render_available"}), 404
+
+    root = media_workspace_root()
+    try:
+        resolved = Path(job.render_path).resolve()
+        if resolved != root and root not in resolved.parents:
+            raise PathSecurityError("render_path fora do workspace de mídia")
+    except (OSError, PathSecurityError):
+        return jsonify({"error": "invalid_render_path"}), 400
+    if not resolved.is_file():
+        return jsonify({"error": "file_not_found"}), 404
+
+    # conditional=True makes Flask/Werkzeug handle Range requests (video
+    # scrubbing in the browser) and If-Modified-Since automatically.
+    return send_file(str(resolved), mimetype="video/mp4", conditional=True, download_name=f"{job_id}.mp4")
diff --git a/dashboard/backend/routes/mempalace.py b/dashboard/backend/routes/mempalace.py
index a20e947af..8b2e67904 100644
--- a/dashboard/backend/routes/mempalace.py
+++ b/dashboard/backend/routes/mempalace.py
@@ -30,7 +30,38 @@ def _mempalace_available():
         return False, None
 
 
+# Fontes seedadas no primeiro uso — as memórias do workspace e dos agentes
+# são o motivo de existir da base (recall semântico após /clear). O usuário
+# pode remover/adicionar pela UI normalmente; o seed só acontece quando
+# sources.json ainda não existe.
+DEFAULT_SOURCES = [
+    ("memory", "Memória do workspace", "memoria"),
+    (".claude/agent-memory", "Memória dos agentes", "agentes"),
+    ("workspace/development", "Artefatos de desenvolvimento", "desenvolvimento"),
+]
+
+
+def _seed_default_sources():
+    now = datetime.now(timezone.utc).isoformat()
+    sources = []
+    for rel, label, wing in DEFAULT_SOURCES:
+        path = (WORKSPACE / rel).resolve()
+        if path.is_dir():
+            sources.append({
+                "path": str(path),
+                "label": label,
+                "wing": wing,
+                "added_at": now,
+                "last_indexed": None,
+            })
+    if sources:
+        _save_sources(sources)
+    return sources
+
+
 def _load_sources():
+    if not SOURCES_FILE.exists():
+        return _seed_default_sources()
     try:
         return json.loads(SOURCES_FILE.read_text(encoding="utf-8"))
     except Exception:
@@ -45,8 +76,18 @@ def _save_sources(sources):
 def _get_mining_status():
     try:
         status = json.loads(MINING_STATUS_FILE.read_text(encoding="utf-8"))
-        # Check if process is still alive
         pid = status.get("pid")
+        # O worker publica phase="done" antes de sair — o check de PID sozinho
+        # não basta: o child exitado vira zumbi (ninguém dá wait()) e
+        # os.kill(pid, 0) segue passando, prendendo a UI em "in progress".
+        if status.get("phase") in ("done", "error"):
+            if pid:
+                try:
+                    os.waitpid(pid, os.WNOHANG)  # reap do zumbi (best-effort)
+                except (OSError, ChildProcessError):
+                    pass
+            MINING_STATUS_FILE.unlink(missing_ok=True)
+            return None
         if pid:
             try:
                 os.kill(pid, 0)
@@ -171,6 +212,7 @@ def add_source():
     path = data.get("path", "").strip()
     label = data.get("label", "").strip()
     wing = data.get("wing", "").strip() or None
+    room = data.get("room", "").strip() or None
 
     if not path:
         return jsonify({"error": "path is required"}), 400
@@ -194,6 +236,7 @@ def add_source():
         "path": str(resolved),
         "label": label or resolved.name,
         "wing": wing,
+        "room": room,
         "added_at": datetime.now(timezone.utc).isoformat(),
         "last_indexed": None,
     })
@@ -201,6 +244,68 @@ def add_source():
     return jsonify({"status": "added", "sources": sources}), 201
 
 
+def sync_project_source(*, workspace_folder_path: str, mission_title: str | None, project_slug: str) -> None:
+    """Upsert a MemPalace source for a Project's workspace folder.
+
+    Hierarchy mapping (confirmed with Felipe): Mission -> Wing, Project ->
+    Room. Called from routes/goals.py whenever a Project is created/updated
+    with a non-null workspace_folder_path — mirrors how goal_created wakes
+    goal-planner, but here it's a plain upsert, not an agent trigger.
+
+    Best-effort: MemPalace being uninstalled, the path not existing yet, or
+    any other failure must never block project creation — this is purely
+    additive bookkeeping for semantic search, not part of the goals data
+    model's correctness.
+    """
+    try:
+        resolved = Path(workspace_folder_path).expanduser().resolve()
+        if not resolved.is_dir():
+            return
+        wing = (mission_title or "sem-missao").strip() or "sem-missao"
+        room = project_slug.strip()
+        if not room:
+            return
+
+        sources = _load_sources()
+        found = False
+        for s in sources:
+            if s["path"] == str(resolved):
+                s["wing"] = wing
+                s["room"] = room
+                found = True
+        if not found:
+            sources.append({
+                "path": str(resolved),
+                "label": room,
+                "wing": wing,
+                "room": room,
+                "added_at": datetime.now(timezone.utc).isoformat(),
+                "last_indexed": None,
+            })
+        _save_sources(sources)
+
+        # ensure_mempalace_yaml (the worker) only writes rooms/wing when the
+        # folder has NO mempalace.yaml yet — a no-op for a folder mined
+        # before this sync existed. Patch the still-untouched auto-generated
+        # default ("general", the only room) so re-mining routes content to
+        # the Project's own room without clobbering a hand-customized config
+        # (multiple rooms, or a room already renamed by the user).
+        yaml_path = resolved / "mempalace.yaml"
+        if yaml_path.exists():
+            try:
+                import yaml as _yaml
+                cfg = _yaml.safe_load(yaml_path.read_text(encoding="utf-8")) or {}
+                rooms = cfg.get("rooms") or []
+                if len(rooms) == 1 and rooms[0].get("name") == "general":
+                    cfg["wing"] = wing
+                    cfg["rooms"] = [{"name": room, "description": "All project files"}]
+                    yaml_path.write_text(_yaml.safe_dump(cfg, sort_keys=False), encoding="utf-8")
+            except Exception:  # noqa: BLE001
+                pass
+    except Exception:  # noqa: BLE001
+        pass
+
+
 @bp.route("/api/mempalace/sources/<int:idx>", methods=["DELETE"])
 @require_permission("mempalace", "manage")
 def delete_source(idx):
@@ -247,7 +352,7 @@ def mine():
         "palace_path": str(PALACE_DIR),
         "status_file": str(MINING_STATUS_FILE),
         "targets": [
-            {"path": t["path"], "wing": t.get("wing") or None}
+            {"path": t["path"], "wing": t.get("wing") or None, "room": t.get("room") or None}
             for t in targets
         ],
     }
diff --git a/dashboard/backend/routes/overview.py b/dashboard/backend/routes/overview.py
index 79df49ba1..127594a6c 100644
--- a/dashboard/backend/routes/overview.py
+++ b/dashboard/backend/routes/overview.py
@@ -1,9 +1,10 @@
 """Overview endpoint — summary data for the dashboard home."""
 
 import json
-from datetime import datetime
+from datetime import datetime, timedelta, timezone
 from flask import Blueprint, jsonify
 from routes._helpers import WORKSPACE, safe_read
+from models import db
 
 bp = Blueprint("overview", __name__)
 
@@ -88,8 +89,18 @@ def _build_routines(raw_metrics: dict) -> list[dict]:
     """Transform raw metrics into routines table."""
     routines = []
     for name, v in sorted(raw_metrics.items(), key=lambda x: x[1].get("last_run", ""), reverse=True):
-        rate = v.get("success_rate", 0)
-        status = "healthy" if rate >= 90 else ("warning" if rate >= 50 else "critical")
+        # Derived fresh from raw counts, not the stored success_rate field —
+        # see the comment in Routines.tsx's transformRoutineMetrics for why
+        # (one routine used to write it as a 0-1 fraction instead of 0-100).
+        runs_v = v.get("runs", 0)
+        rate = round((v.get("successes", 0) / runs_v) * 100, 1) if runs_v > 0 else 0
+        last_success = v.get("last_success")
+        if last_success is False:
+            status = "critical"
+        elif last_success is True and rate < 90:
+            status = "warning"
+        else:
+            status = "healthy" if rate >= 90 else ("warning" if rate >= 50 else "critical")
         routines.append({
             "name": name,
             "last_run": (v.get("last_run") or "")[:16],
@@ -99,6 +110,69 @@ def _build_routines(raw_metrics: dict) -> list[dict]:
     return routines[:10]
 
 
+def _needs_attention() -> dict:
+    """Aggregated cross-system health (panorama 2026-07-17, item 19) — before
+    this, answering "is anything wrong right now" meant visiting Heartbeats,
+    Kanban and the Telegram approval history separately. One query per
+    signal, each cheap and best-effort (a failure in one must never blank
+    the whole card).
+    """
+    heartbeat_failures: list[dict] = []
+    try:
+        rows = db.session.execute(db.text(
+            "SELECT hr.heartbeat_id, hr.error, hr.started_at "
+            "FROM heartbeat_runs hr "
+            "JOIN (SELECT heartbeat_id, MAX(started_at) AS max_started "
+            "      FROM heartbeat_runs GROUP BY heartbeat_id) latest "
+            "  ON latest.heartbeat_id = hr.heartbeat_id AND latest.max_started = hr.started_at "
+            "WHERE hr.status = 'fail' "
+            "ORDER BY hr.started_at DESC LIMIT 20"
+        )).fetchall()
+        heartbeat_failures = [
+            {"heartbeat_id": r.heartbeat_id, "error": (r.error or "")[:200], "started_at": r.started_at}
+            for r in rows
+        ]
+    except Exception:
+        pass
+
+    stale_locked_tickets: list[dict] = []
+    try:
+        rows = db.session.execute(db.text(
+            "SELECT id, title, locked_by, locked_at, lock_timeout_seconds FROM tickets "
+            "WHERE locked_at IS NOT NULL "
+            "AND datetime(locked_at, '+' || lock_timeout_seconds || ' seconds') < datetime('now') "
+            "LIMIT 20"
+        )).fetchall()
+        stale_locked_tickets = [
+            {"id": r.id, "title": r.title, "locked_by": r.locked_by, "locked_at": r.locked_at}
+            for r in rows
+        ]
+    except Exception:
+        pass
+
+    aged_approvals: list[dict] = []
+    try:
+        cutoff = (datetime.now(timezone.utc) - timedelta(hours=24)).strftime("%Y-%m-%dT%H:%M:%S.%fZ")
+        rows = db.session.execute(db.text(
+            "SELECT id, gate_type, created_at FROM pending_approvals "
+            "WHERE status = 'pending' AND created_at < :cutoff "
+            "ORDER BY created_at ASC LIMIT 20"
+        ), {"cutoff": cutoff}).fetchall()
+        aged_approvals = [
+            {"id": r.id, "gate_type": r.gate_type, "created_at": r.created_at}
+            for r in rows
+        ]
+    except Exception:
+        pass
+
+    return {
+        "heartbeat_failures": heartbeat_failures,
+        "stale_locked_tickets": stale_locked_tickets,
+        "aged_approvals": aged_approvals,
+        "total": len(heartbeat_failures) + len(stale_locked_tickets) + len(aged_approvals),
+    }
+
+
 @bp.route("/api/overview")
 def overview():
     raw_metrics = _metrics_summary()
@@ -118,4 +192,5 @@ def overview():
         "metrics": _build_overview_metrics(raw_metrics, ic),
         "routines": _build_routines(raw_metrics),
         "integration_count": ic,
+        "needs_attention": _needs_attention(),
     })
diff --git a/dashboard/backend/routes/plugin_public_pages.py b/dashboard/backend/routes/plugin_public_pages.py
new file mode 100644
index 000000000..3b88264db
--- /dev/null
+++ b/dashboard/backend/routes/plugin_public_pages.py
@@ -0,0 +1,431 @@
+"""Plugin public pages — unauthenticated token-bound portals (B2.0).
+
+Routes registered here bypass the ``before_request`` auth gate in ``app.py``.
+The host validates the URL token against a plugin-declared column in a
+plugin-owned table on every request.
+
+B2.0 scope (read-only, no PIN):
+  GET  /p/<slug>/<route_prefix>/<token>          — serve portal bundle
+  GET  /p/<slug>/<route_prefix>/<token>/data     — serve public readonly query
+  GET  /p/<slug>/public-assets/<path:subpath>    — serve ui/public/ static assets
+
+B2.1 (PIN + writable + token-bind) is deferred.
+
+Security controls applied here:
+  - Rate limit 60 req/min/IP (from rate_limit.py) on portal + data endpoints
+  - Vault §B2.S2: Referrer-Policy, Cache-Control no-store, HSTS on every response
+  - Token validated parametrically (no SQL injection risk on token value)
+  - table/column identifiers validated via PluginPublicPage schema at install time
+  - Path traversal prevented by realpath + startswith containment check
+  - MIME whitelist on public asset serving
+"""
+
+from __future__ import annotations
+
+import os
+import sqlite3
+from pathlib import Path
+from typing import Any, Dict, Optional
+
+from flask import Blueprint, abort, jsonify, request, Response, after_this_request
+
+from models import audit
+from rate_limit import limiter
+
+bp = Blueprint("plugin_public_pages", __name__)
+
+# Resolved once at module load; identical to plugins.py pattern.
+WORKSPACE = Path(__file__).resolve().parent.parent.parent.parent
+PLUGINS_DIR = WORKSPACE / "plugins"
+DB_PATH = WORKSPACE / "dashboard" / "data" / "evonexus.db"
+
+# ---------------------------------------------------------------------------
+# Module-level public prefix cache.
+# Updated on install/uninstall via register_public_prefix / unregister_public_prefix.
+# Read by app.py before_request middleware to bypass auth for /p/... paths.
+# ---------------------------------------------------------------------------
+
+# Set of string prefixes, each entry like "/p/nutri/portal"
+_PLUGIN_PUBLIC_PREFIXES: set[str] = set()
+
+
+def register_public_prefix(slug: str, route_prefix: str) -> None:
+    """Add a plugin's public route prefix to the auth bypass cache.
+
+    Called by plugin_loader.py (or routes/plugins.py) after a successful install.
+    """
+    _PLUGIN_PUBLIC_PREFIXES.add(f"/p/{slug}/{route_prefix}")
+
+
+def unregister_public_prefix(slug: str, route_prefix: str) -> None:
+    """Remove a plugin's public route prefix from the auth bypass cache.
+
+    Called by routes/plugins.py during uninstall.
+    """
+    _PLUGIN_PUBLIC_PREFIXES.discard(f"/p/{slug}/{route_prefix}")
+
+
+def get_public_prefixes() -> frozenset[str]:
+    """Read-only snapshot of the current public prefix set.
+
+    Used by app.py before_request middleware.
+    """
+    return frozenset(_PLUGIN_PUBLIC_PREFIXES)
+
+
+# ---------------------------------------------------------------------------
+# Helpers
+# ---------------------------------------------------------------------------
+
+def _security_headers(response: Response) -> Response:
+    """Vault §B2.S2: mandatory security headers on all public-page responses."""
+    response.headers["Referrer-Policy"] = "no-referrer"
+    response.headers["Cache-Control"] = "no-store, private, no-cache, must-revalidate"
+    response.headers["Pragma"] = "no-cache"
+    response.headers["X-Content-Type-Options"] = "nosniff"
+    response.headers["Strict-Transport-Security"] = "max-age=63072000; includeSubDomains"
+    return response
+
+
+def _get_db() -> sqlite3.Connection:
+    conn = sqlite3.connect(str(DB_PATH), timeout=10)
+    conn.row_factory = sqlite3.Row
+    return conn
+
+
+def _load_page_config(slug: str, route_prefix: str) -> Optional[Dict[str, Any]]:
+    """Return the installed public_pages config for the given slug + route_prefix.
+
+    Reads from the manifest stored in plugins_installed (same pattern as plugins.py).
+    Returns None if not found or not installed.
+    """
+    import json as _json
+    conn = _get_db()
+    try:
+        row = conn.execute(
+            "SELECT manifest_json FROM plugins_installed WHERE slug = ? AND status = 'active'",
+            (slug,),
+        ).fetchone()
+        if not row:
+            return None
+        manifest = _json.loads(row["manifest_json"])
+        for page in manifest.get("public_pages") or []:
+            if page.get("route_prefix") == route_prefix:
+                return page
+        return None
+    finally:
+        conn.close()
+
+
+def _validate_token(page_config: Dict[str, Any], token: str) -> bool:
+    """Validate the URL token against the plugin-declared token_source column.
+
+    Uses a parametric query — only the `?` value is user-supplied.
+    Table and column names come from the manifest (validated at install by
+    PluginPublicPage schema; both are slug-prefixed and identifier-safe).
+    """
+    token_source = page_config.get("token_source", {})
+    table = token_source.get("table", "")
+    column = token_source.get("column", "")
+
+    if not table or not column:
+        return False
+
+    # Identifiers are validated at install time (PluginPublicPage schema) to
+    # match ^[a-z][a-z0-9_]*$ — safe to interpolate here.
+    sql = f"SELECT 1 FROM {table} WHERE {column} = ?"  # noqa: S608 — identifiers whitelisted at install
+
+    # The plugin DB is kept inside the plugin's own data directory.
+    # EvoNexus uses the shared evonexus.db for all plugin tables (no per-plugin DB).
+    conn = _get_db()
+    try:
+        row = conn.execute(sql, (token,)).fetchone()
+        return row is not None
+    except sqlite3.OperationalError:
+        # Table doesn't exist yet (e.g. install in progress) — fail closed.
+        return False
+    finally:
+        conn.close()
+
+
+def _serve_bundle(slug: str, bundle_path: str) -> Response:
+    """Serve a plugin's ui/public/ bundle file (no auth check needed here —
+    caller already verified token; bundle is the entire page shell).
+
+    ``bundle_path`` is relative to the plugin dir (e.g. "ui/public/portal.js").
+    """
+    plugin_dir = PLUGINS_DIR / slug
+    ui_public_root = os.path.realpath(str(plugin_dir / "ui" / "public"))
+    # Strip "ui/public/" prefix to get the sub-path
+    relative = bundle_path[len("ui/public/"):]
+    requested = os.path.realpath(os.path.join(ui_public_root, relative))
+
+    # Containment check — must stay inside plugins/{slug}/ui/public/
+    if not requested.startswith(ui_public_root + os.sep) and requested != ui_public_root:
+        abort(404)
+
+    if not os.path.isfile(requested):
+        abort(404)
+
+    ext = os.path.splitext(requested)[1].lower()
+    mime_map = {
+        ".js": "application/javascript; charset=utf-8",
+        ".mjs": "application/javascript; charset=utf-8",
+        ".css": "text/css; charset=utf-8",
+        ".json": "application/json; charset=utf-8",
+        ".html": "text/html; charset=utf-8",
+    }
+    mime = mime_map.get(ext)
+    if not mime:
+        abort(404)
+
+    with open(requested, "rb") as fh:
+        content = fh.read()
+
+    resp = Response(content, mimetype=mime)
+    resp.headers["X-Content-Type-Options"] = "nosniff"
+    # Content-Security-Policy: restrict resource loading to same origin.
+    # 'unsafe-inline' is included for inline scripts in plugin bundles (Web Component pattern).
+    resp.headers["Content-Security-Policy"] = (
+        "default-src 'self'; script-src 'self' 'unsafe-inline'; "
+        "style-src 'self' 'unsafe-inline'; img-src 'self' data:; "
+        "connect-src 'self'; frame-ancestors 'none'"
+    )
+    return resp
+
+
+# ---------------------------------------------------------------------------
+# Endpoints
+# ---------------------------------------------------------------------------
+
+@bp.route("/p/<slug>/<route_prefix>/<token>", methods=["GET"])
+@limiter.limit("60 per minute")
+def portal_page(slug: str, route_prefix: str, token: str):
+    """Serve the plugin portal page after validating the URL token.
+
+    Flow:
+    1. Load page config from plugins_installed manifest.
+    2. Validate token against token_source.column (parametric SQL).
+    3. Serve the plugin's ui/public/ bundle.
+    4. Apply security headers.
+    """
+    @after_this_request
+    def _headers(response: Response) -> Response:
+        return _security_headers(response)
+
+    page_config = _load_page_config(slug, route_prefix)
+    if not page_config:
+        return jsonify({"error": "Link inválido ou expirado", "code": "not_found"}), 404
+
+    if not _validate_token(page_config, token):
+        ip = request.remote_addr or "-"
+        audit(
+            None,
+            page_config.get("audit_action") or "portal_view_denied",
+            f"plugins/{slug}/public_pages/{route_prefix}",
+            detail=f"token={token[:8]}... ip={ip} reason=token_invalid",
+        )
+        return jsonify({"error": "Link inválido ou expirado", "code": "not_found"}), 404
+
+    # Token valid — log successful view
+    ip = request.remote_addr or "-"
+    ua = (request.headers.get("User-Agent", "-") or "-")[:200]
+    audit(
+        None,
+        page_config.get("audit_action") or "portal_view",
+        f"plugins/{slug}/public_pages/{route_prefix}",
+        detail=f"token={token[:8]}... ip={ip} ua={ua[:80]}",
+    )
+
+    bundle_path = page_config.get("bundle", "")
+
+    # Wave 2.1.x — content negotiation: browsers send Accept: text/html and
+    # expect a rendered page; programmatic clients (or asset prefetchers) can
+    # fetch the raw bundle by NOT sending text/html in Accept (or by hitting
+    # /p/{slug}/public-assets/{file} directly, which does not require a token).
+    #
+    # When the caller wants HTML, generate a minimal shell that loads the bundle
+    # and instantiates the declared custom element. Without this, browsers see
+    # the JS source. With this, the portal renders.
+    accept = (request.headers.get("Accept") or "").lower()
+    wants_html = "text/html" in accept and "application/javascript" not in accept
+    if wants_html:
+        return _serve_html_shell(slug, page_config, token)
+
+    return _serve_bundle(slug, bundle_path)
+
+
+def _serve_html_shell(slug: str, page_config: dict, token: str) -> Response:
+    """Render a minimal HTML page that boots the plugin's custom element.
+
+    The shell is generated server-side so plugin authors only ship a JS bundle
+    (custom element definition). The bundle is fetched as a module from
+    /p/{slug}/public-assets/{file} (no auth required for assets — they contain
+    no patient data; data lives behind the token-gated /data endpoint).
+
+    The custom element receives the URL token via ``data-token`` attribute so
+    the bundle does not need to re-parse window.location.
+    """
+    from html import escape as h
+    bundle_path = page_config.get("bundle", "") or ""
+    if not bundle_path.startswith("ui/public/"):
+        abort(404)
+    bundle_relative = bundle_path[len("ui/public/"):]
+    custom_element = page_config.get("custom_element_name") or ""
+    if not custom_element or not all(c.isalnum() or c in "-" for c in custom_element):
+        # Defense in depth — schema already validates this on install
+        abort(500)
+    label = page_config.get("description") or page_config.get("label") or "Portal"
+
+    # CSP for the shell:
+    #  - script-src 'self' allows the bundle module from same origin (public-assets/)
+    #  - style-src 'self' 'unsafe-inline' covers minimal inline shell styling
+    #  - img-src 'self' data: covers logos embedded as data URIs (brand workaround)
+    #  - connect-src 'self' so the bundle can fetch /p/{slug}/{route}/{token}/data
+    asset_url = f"/p/{h(slug)}/public-assets/{h(bundle_relative)}"
+    body = (
+        "<!doctype html>"
+        "<html lang=\"pt-BR\"><head>"
+        "<meta charset=\"utf-8\">"
+        "<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">"
+        "<meta name=\"robots\" content=\"noindex, nofollow\">"
+        f"<title>{h(label)}</title>"
+        "<style>"
+        "html,body{margin:0;padding:0;background:#f7f7f9;"
+        "font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;}"
+        "</style>"
+        "</head><body>"
+        f"<{custom_element} data-token=\"{h(token)}\" data-slug=\"{h(slug)}\"></{custom_element}>"
+        f"<script type=\"module\" src=\"{asset_url}\"></script>"
+        "</body></html>"
+    )
+    resp = Response(body, mimetype="text/html; charset=utf-8")
+    resp.headers["X-Content-Type-Options"] = "nosniff"
+    resp.headers["Content-Security-Policy"] = (
+        "default-src 'self'; "
+        "script-src 'self' 'unsafe-inline'; "
+        "style-src 'self' 'unsafe-inline'; "
+        "img-src 'self' data:; "
+        "connect-src 'self'; "
+        "frame-ancestors 'none'"
+    )
+    return resp
+
+
+@bp.route("/p/<slug>/<route_prefix>/<token>/data", methods=["GET"])
+@limiter.limit("120 per minute")
+def portal_data(slug: str, route_prefix: str, token: str):
+    """Serve public readonly query results bound to the URL token.
+
+    Requires a ``query_id`` query-string param that matches a declared
+    readonly_data entry with ``public_via`` pointing to this page.
+    """
+    @after_this_request
+    def _headers(response: Response) -> Response:
+        return _security_headers(response)
+
+    query_id = request.args.get("query_id", "").strip()
+    if not query_id:
+        return jsonify({"error": "query_id is required", "code": "bad_request"}), 400
+
+    page_config = _load_page_config(slug, route_prefix)
+    if not page_config:
+        return jsonify({"error": "Link inválido ou expirado", "code": "not_found"}), 404
+
+    if not _validate_token(page_config, token):
+        return jsonify({"error": "Link inválido ou expirado", "code": "not_found"}), 404
+
+    # Load readonly_data entries from the manifest to find the matching public query
+    import json as _json
+    conn_meta = _get_db()
+    try:
+        row = conn_meta.execute(
+            "SELECT manifest_json FROM plugins_installed WHERE slug = ? AND status = 'active'",
+            (slug,),
+        ).fetchone()
+        if not row:
+            return jsonify({"error": "Plugin not found", "code": "not_found"}), 404
+        manifest = _json.loads(row["manifest_json"])
+    finally:
+        conn_meta.close()
+
+    # Find the query
+    public_page_id = page_config.get("id")
+    query_spec = None
+    for q in manifest.get("readonly_data") or []:
+        if q.get("id") == query_id and q.get("public_via") == public_page_id:
+            query_spec = q
+            break
+
+    if not query_spec:
+        return jsonify({"error": "Query not found or not public", "code": "not_found"}), 404
+
+    bind_param = query_spec.get("bind_token_param")
+    sql = query_spec.get("sql", "")
+
+    # Execute query with token bound to the declared parameter
+    conn_data = _get_db()
+    try:
+        if bind_param:
+            rows = conn_data.execute(sql, {bind_param: token}).fetchall()
+        else:
+            rows = conn_data.execute(sql).fetchall()
+        results = [dict(r) for r in rows]
+    except sqlite3.OperationalError as exc:
+        return jsonify({"error": "Query execution failed", "detail": str(exc)}), 500
+    finally:
+        conn_data.close()
+
+    return jsonify({"query_id": query_id, "rows": results})
+
+
+@bp.route("/p/<slug>/public-assets/<path:subpath>", methods=["GET"])
+def portal_static(slug: str, subpath: str):
+    """Serve plugin static assets from ui/public/ (no token required).
+
+    CSS, images, and other non-JS assets referenced by the portal bundle.
+    Path must stay within plugins/{slug}/ui/public/ (containment check).
+    """
+    @after_this_request
+    def _headers(response: Response) -> Response:
+        return _security_headers(response)
+
+    plugin_dir = PLUGINS_DIR / slug
+    ui_public_root = os.path.realpath(str(plugin_dir / "ui" / "public"))
+    requested = os.path.realpath(os.path.join(ui_public_root, subpath))
+
+    # Containment check
+    if not requested.startswith(ui_public_root + os.sep):
+        abort(404)
+
+    if not os.path.isfile(requested):
+        abort(404)
+
+    ext = os.path.splitext(requested)[1].lower()
+    mime_map = {
+        ".js": "application/javascript; charset=utf-8",
+        ".mjs": "application/javascript; charset=utf-8",
+        ".css": "text/css; charset=utf-8",
+        ".png": "image/png",
+        ".jpg": "image/jpeg",
+        ".jpeg": "image/jpeg",
+        ".webp": "image/webp",
+        ".json": "application/json; charset=utf-8",
+        ".html": "text/html; charset=utf-8",
+        ".ico": "image/x-icon",
+        ".woff2": "font/woff2",
+        ".woff": "font/woff",
+        ".ttf": "font/ttf",
+    }
+    mime = mime_map.get(ext)
+    if not mime:
+        abort(404)
+
+    with open(requested, "rb") as fh:
+        content = fh.read()
+
+    resp = Response(content, mimetype=mime)
+    resp.headers["X-Content-Type-Options"] = "nosniff"
+    # Static assets can be cached by the browser (shorter TTL for public portal)
+    resp.headers["Cache-Control"] = "public, max-age=300"
+    return resp
diff --git a/dashboard/backend/routes/plugins.py b/dashboard/backend/routes/plugins.py
index a7f33cdce..5b92d7280 100644
--- a/dashboard/backend/routes/plugins.py
+++ b/dashboard/backend/routes/plugins.py
@@ -13,8 +13,11 @@
 import os
 import shutil
 import sqlite3
+import subprocess
+import tempfile
 import threading
 import time
+import uuid
 from datetime import datetime, timezone
 from pathlib import Path
 from typing import Any
@@ -778,6 +781,40 @@ def install_plugin():
     except RuntimeError as exc:
         return jsonify({"error": str(exc)}), 409
 
+    # B3: Check for orphaned tables from a previous uninstall (safe_uninstall).
+    # If orphans exist, verify SHA256 to prevent hostile reinstall (Vault B3.S3).
+    _orphan_check_conn = _get_db()
+    try:
+        _orphan_rows = _orphan_check_conn.execute(
+            "SELECT tablename, original_sha256, original_plugin_version FROM plugin_orphans "
+            "WHERE slug = ? AND recovered_at IS NULL",
+            (slug,),
+        ).fetchall()
+    except Exception:
+        _orphan_rows = []
+    finally:
+        _orphan_check_conn.close()
+
+    if _orphan_rows:
+        # Verify SHA256: the plugin being installed must match what was originally installed.
+        _install_sha256 = tarball_sha256 or ""
+        _original_sha256s = {row[1] for row in _orphan_rows if row[1]}
+        if _original_sha256s and _install_sha256:
+            if _install_sha256 not in _original_sha256s:
+                _admin_confirm = data.get("confirmed_sha256_change", False)
+                if not _admin_confirm:
+                    return jsonify({
+                        "error": "sha256_mismatch",
+                        "detail": (
+                            "Source changed since last install — possible hostile reinstall. "
+                            "This plugin has orphaned tables from a previous install. "
+                            "Pass confirmed_sha256_change=true to override (will be audited)."
+                        ),
+                        "orphaned_tables": [row[0] for row in _orphan_rows],
+                        "expected_sha256": list(_original_sha256s),
+                        "provided_sha256": _install_sha256,
+                    }), 409
+
     plugin_dir = PLUGINS_DIR / slug
     state: dict[str, Any] = {
         "slug": slug,
@@ -788,6 +825,40 @@ def install_plugin():
     conn = _get_db()
 
     try:
+        # B3: Recover orphaned tables BEFORE copying/migrating (Vault B3.S3).
+        # Rename _orphan_{slug}_{table} back to {table} so install.sql can use them.
+        _recovered_tables: list[str] = []
+        if _orphan_rows:
+            _recovery_conn = _get_db()
+            try:
+                for _orphan_row in _orphan_rows:
+                    _orig_table = _orphan_row[0]
+                    _orphan_table_name = f"_orphan_{slug}_{_orig_table}"
+                    _existing = {
+                        row[0] for row in _recovery_conn.execute(
+                            "SELECT name FROM sqlite_master WHERE type='table'"
+                        ).fetchall()
+                    }
+                    if _orphan_table_name in _existing:
+                        _recovery_conn.execute(
+                            f"ALTER TABLE {_orphan_table_name} RENAME TO {_orig_table}"
+                        )
+                        _recovery_conn.commit()
+                        _recovered_tables.append(_orig_table)
+                        logger.info("B3 reinstall: recovered orphaned table '%s'", _orig_table)
+
+                # Mark orphans as recovered in plugin_orphans
+                if _recovered_tables:
+                    _now = _now_iso()
+                    for _t in _recovered_tables:
+                        _recovery_conn.execute(
+                            "UPDATE plugin_orphans SET recovered_at = ? WHERE slug = ? AND tablename = ?",
+                            (_now, slug, _t),
+                        )
+                    _recovery_conn.commit()
+            finally:
+                _recovery_conn.close()
+
         # --- Step: copy plugin source to plugins/{slug}/ ---
         plugin_dir.mkdir(parents=True, exist_ok=True)
 
@@ -1164,9 +1235,172 @@ def uninstall_plugin(slug: str):
     if not plugin_dir.exists():
         return jsonify({"error": f"Plugin '{slug}' not found"}), 404
 
+    # --- B3: safe_uninstall enforcement ---
+    # Load the installed manifest to check if safe_uninstall capability is declared.
+    _force_uninstall = os.environ.get("EVONEXUS_ALLOW_FORCE_UNINSTALL", "").strip() == "1"
+    _manifest_for_b3: dict = {}
+    _safe_uninstall_spec: dict = {}
+    try:
+        _manifest_conn = _get_db()
+        _manifest_row = _manifest_conn.execute(
+            "SELECT manifest_json FROM plugins_installed WHERE slug = ?", (slug,)
+        ).fetchone()
+        _manifest_conn.close()
+        if _manifest_row:
+            _manifest_for_b3 = json.loads(_manifest_row["manifest_json"] or "{}")
+            _safe_uninstall_spec = _manifest_for_b3.get("safe_uninstall") or {}
+    except Exception as _exc:
+        logger.warning("B3: could not load manifest for safe_uninstall check: %s", _exc)
+
+    _su_enabled = _safe_uninstall_spec.get("enabled", False)
+    _block_uninstall = _safe_uninstall_spec.get("block_uninstall", False)
+
+    if _block_uninstall and not _force_uninstall:
+        return jsonify({
+            "error": "uninstall_blocked",
+            "detail": _safe_uninstall_spec.get("reason", "Plugin has declared block_uninstall: true."),
+            "code": "blocked",
+        }), 409
+
+    if _su_enabled and not _force_uninstall:
+        # Vault B3.S1: backend enforcement — require admin + confirmation_phrase + exported_at
+        if not hasattr(current_user, "role") or getattr(current_user, "role", None) != "admin":
+            return jsonify({
+                "error": "admin_required",
+                "detail": "Only admin users may uninstall plugins with safe_uninstall enabled.",
+                "code": "forbidden",
+            }), 403
+
+        _body = request.get_json(force=True, silent=True) or {}
+        _phrase_required = (_safe_uninstall_spec.get("user_confirmation") or {}).get("typed_phrase", "")
+        _phrase_given = _body.get("confirmation_phrase", "")
+        if _phrase_required and _phrase_given != _phrase_required:
+            return jsonify({
+                "error": "confirmation_phrase_mismatch",
+                "detail": f"Typed phrase must be exactly: {_phrase_required}",
+                "code": "bad_request",
+            }), 400
+
+        _exported_at = _body.get("exported_at", "")
+        if _exported_at:
+            if not os.path.exists(_exported_at):
+                return jsonify({
+                    "error": "export_file_not_found",
+                    "detail": f"Export file not found at path: {_exported_at}",
+                    "code": "bad_request",
+                }), 400
+
+        # Vault B3.S1: zip_password must be present (the actual encryption happens in the pre-hook)
+        _zip_password = _body.get("zip_password", "")
+        if not _zip_password:
+            return jsonify({
+                "error": "zip_password_required",
+                "detail": "A ZIP password is required to encrypt the export archive.",
+                "code": "bad_request",
+            }), 400
+
+    if _force_uninstall:
+        # Vault B3.S6: force-uninstall MUST produce an audit row with reason
+        _force_reason = (request.get_json(force=True, silent=True) or {}).get("force_reason", "")
+        logger.warning(
+            "FORCE UNINSTALL activated for '%s' (EVONEXUS_ALLOW_FORCE_UNINSTALL=1). reason=%r user=%s",
+            slug, _force_reason, getattr(current_user, "username", "unknown"),
+        )
+    # --- End B3 enforcement gate ---
+
     conn = _get_db()
+    _orphan_records: list[str] = []  # B3: populated during orphan table rename phase
     try:
-        # Pre-uninstall hook
+        # B3: Sandboxed pre-uninstall hook (Vault B3.S2)
+        # Run BEFORE the legacy hook so it has access to DB state.
+        _su_hook_spec = _safe_uninstall_spec.get("pre_uninstall_hook") or {}
+        if _su_enabled and not _force_uninstall and _su_hook_spec:
+            _hook_script = _su_hook_spec.get("script", "")
+            _hook_output_dir_template = _su_hook_spec.get("output_dir", "")
+            _hook_timeout = _su_hook_spec.get("timeout_seconds", 600)
+            _must_produce = _su_hook_spec.get("must_produce_file", True)
+            _hook_script_path = plugin_dir / _hook_script
+
+            if _hook_script_path.exists():
+                _ts = datetime.now(timezone.utc).strftime("%Y%m%d_%H%M%S")
+                _output_dir_str = _hook_output_dir_template.format(slug=slug, timestamp=_ts)
+                _output_dir_path = (WORKSPACE / _output_dir_str).resolve()
+                _output_dir_path.mkdir(parents=True, exist_ok=True)
+
+                # Create a read-only copy of the DB for the hook (Vault B3.S2)
+                _db_readonly_path = ""
+                try:
+                    _tmp_db = tempfile.NamedTemporaryFile(suffix=".db", delete=False)
+                    _tmp_db.close()
+                    _tmp_db_path = _tmp_db.name
+                    _src_conn = sqlite3.connect(str(DB_PATH))
+                    _bk_conn = sqlite3.connect(_tmp_db_path)
+                    _src_conn.backup(_bk_conn)
+                    _src_conn.close()
+                    _bk_conn.close()
+                    _db_readonly_path = _tmp_db_path
+                except Exception as _dbe:
+                    logger.warning("B3: could not create DB snapshot for hook: %s", _dbe)
+
+                # Vault B3.S2: locked-down env — NO BRAIN_REPO_MASTER_KEY
+                _hook_env = {
+                    "PATH": os.environ.get("PATH", "/usr/bin:/bin"),
+                    "PLUGIN_SLUG": slug,
+                    "PLUGIN_VERSION": _manifest_for_b3.get("version", ""),
+                    "OUTPUT_DIR": str(_output_dir_path),
+                    "DB_READONLY_PATH": _db_readonly_path,
+                }
+
+                try:
+                    _proc = subprocess.run(
+                        ["python3", str(_hook_script_path)],
+                        cwd=str(plugin_dir),
+                        env=_hook_env,
+                        capture_output=True,
+                        text=True,
+                        timeout=_hook_timeout,
+                    )
+                    _hook_stdout = _proc.stdout[:5000]
+                    _hook_stderr = _proc.stderr[:5000]
+                    _hook_exit = _proc.returncode
+
+                    _audit(conn, slug, "safe_uninstall_hook", {
+                        "exit_code": _hook_exit,
+                        "stdout": _hook_stdout,
+                        "stderr": _hook_stderr,
+                        "output_dir": str(_output_dir_path),
+                    })
+
+                    if _hook_exit != 0:
+                        return jsonify({
+                            "error": "pre_hook_failed",
+                            "detail": "Pre-uninstall hook failed — uninstall aborted to prevent data loss.",
+                            "exit_code": _hook_exit,
+                            "stderr": _hook_stderr,
+                        }), 400
+
+                    if _must_produce:
+                        _produced = any(_output_dir_path.iterdir()) if _output_dir_path.exists() else False
+                        if not _produced:
+                            return jsonify({
+                                "error": "pre_hook_no_output",
+                                "detail": "Pre-uninstall hook produced no files — uninstall aborted to prevent data loss.",
+                            }), 400
+
+                except subprocess.TimeoutExpired:
+                    return jsonify({
+                        "error": "pre_hook_timeout",
+                        "detail": f"Pre-uninstall hook exceeded timeout of {_hook_timeout}s.",
+                    }), 400
+                finally:
+                    # Clean up DB snapshot
+                    if _db_readonly_path:
+                        try:
+                            os.unlink(_db_readonly_path)
+                        except Exception:
+                            pass
+
+        # Legacy pre-uninstall hook (non-B3 path)
         pre_hook = plugin_dir / "hooks" / "pre-uninstall.sh"
         if pre_hook.exists():
             try:
@@ -1219,14 +1453,75 @@ def uninstall_plugin(slug: str):
         # Delete host rows this plugin seeded (goals/tasks/triggers capabilities).
         # DELETE WHERE source_plugin = ? leaves user-created rows untouched.
         # Order matters because of FKs: children → parents.
+        # B3: respect preserved_host_entities filters from safe_uninstall spec.
+        _preserved_host_entities = _safe_uninstall_spec.get("preserved_host_entities") or {}
         for _tbl in ("triggers", "tickets", "goal_tasks", "goals", "projects", "missions"):
             try:
-                conn.execute(f"DELETE FROM {_tbl} WHERE source_plugin = ?", (slug,))
+                _where = "source_plugin = ?"
+                if _tbl in _preserved_host_entities and not _force_uninstall:
+                    # Preserve rows matching the declared WHERE clause.
+                    # Only the base condition (source_plugin = ?) is parameterized;
+                    # the preservation clause comes from the manifest (validated at install).
+                    _preserve_clause = _preserved_host_entities[_tbl]
+                    _where = f"(source_plugin = ?) AND NOT ({_preserve_clause})"
+                conn.execute(f"DELETE FROM {_tbl} WHERE {_where}", (slug,))
                 conn.commit()
             except Exception as exc:
                 logger.warning("Uninstall: failed to clean %s: %s", _tbl, exc)
 
-        # SQL uninstall
+        # B3: Rename preserved tables to _orphan_{slug}_{tablename} BEFORE SQL uninstall.
+        # This removes them from the plugin namespace (Vault B3.S4) and records them
+        # in plugin_orphans so reinstall can detect and recover them.
+        _preserved_tables = _safe_uninstall_spec.get("preserved_tables") or []
+        if _preserved_tables and _su_enabled and not _force_uninstall:
+            _orphan_conn = sqlite3.connect(str(DB_PATH))
+            try:
+                _existing_tables_set = {
+                    row[0] for row in _orphan_conn.execute(
+                        "SELECT name FROM sqlite_master WHERE type='table'"
+                    ).fetchall()
+                }
+                _user_id = getattr(current_user, "id", None)
+                _plugin_version = _manifest_for_b3.get("version", "")
+                _plugin_sha256 = _manifest_for_b3.get("source_sha256", "")
+                _plugin_publisher_url = _manifest_for_b3.get("source_url", "")
+
+                for _orig_table in _preserved_tables:
+                    if _orig_table not in _existing_tables_set:
+                        logger.info("B3: preserved table '%s' does not exist, skipping", _orig_table)
+                        continue
+                    _orphan_name = f"_orphan_{slug}_{_orig_table}"
+                    try:
+                        # Rename to orphan name
+                        _orphan_conn.execute(f"ALTER TABLE {_orig_table} RENAME TO {_orphan_name}")
+                        _orphan_conn.commit()
+                        logger.info("B3: renamed '%s' to '%s'", _orig_table, _orphan_name)
+
+                        # Record in plugin_orphans
+                        _orphan_conn.execute(
+                            "INSERT OR REPLACE INTO plugin_orphans "
+                            "(id, slug, tablename, orphaned_at, orphaned_by_user_id, "
+                            " original_plugin_version, original_sha256, original_publisher_url) "
+                            "VALUES (?, ?, ?, ?, ?, ?, ?, ?)",
+                            (
+                                str(uuid.uuid4()),
+                                slug,
+                                _orig_table,
+                                _now_iso(),
+                                _user_id,
+                                _plugin_version,
+                                _plugin_sha256,
+                                _plugin_publisher_url,
+                            ),
+                        )
+                        _orphan_conn.commit()
+                        _orphan_records.append(_orig_table)
+                    except Exception as _te:
+                        logger.warning("B3: failed to rename table '%s': %s", _orig_table, _te)
+            finally:
+                _orphan_conn.close()
+
+        # SQL uninstall (runs after preserved tables are renamed — DROP won't touch them)
         uninstall_sql = plugin_dir / "migrations" / "uninstall.sql"
         if uninstall_sql.exists():
             try:
@@ -1294,10 +1589,15 @@ def uninstall_plugin(slug: str):
         # Reload scheduler
         _reload_scheduler()
 
-        _audit(conn, slug, "uninstall", {
+        _audit_action = "plugin_uninstall_safe" if (_su_enabled and not _force_uninstall) else "uninstall"
+        if _force_uninstall:
+            _audit_action = "plugin_uninstall_force"
+        _audit(conn, slug, _audit_action, {
             "removed_env_keys": _removed_env_keys,
             "removed_health_cache_count": _health_cache_removed,
             "mcp_audit": _mcp_audit,
+            "preserved_tables": _orphan_records,
+            "force_uninstall": _force_uninstall,
         }, success=True)
         invalidate_agent_meta_cache()
         return jsonify({
@@ -1305,6 +1605,7 @@ def uninstall_plugin(slug: str):
             "status": "uninstalled",
             "mcp_audit": _mcp_audit,
             "removed_env_keys": _removed_env_keys,
+            "preserved_tables": _orphan_records,
         })
 
     except Exception as exc:
@@ -1820,10 +2121,17 @@ def readonly_data(slug: str, query_name: str):
     if not sql:
         return jsonify({"error": "Invalid query declaration"}), 500
 
-    # Build query params from request.args — only declared params allowed
+    # Build query params from request.args — only declared params allowed.
+    # Wave 2.1.x reserved params (current_user_id, current_user_role) are
+    # injected server-side below and MUST NOT come from the client.
+    _RESERVED_PARAMS = {"current_user_id", "current_user_role"}
     declared_params = query_decl.get("params", {})
     params: dict = {}
     for key, value in request.args.items():
+        if key in _RESERVED_PARAMS:
+            return jsonify({
+                "error": f"Parameter '{key}' is reserved and cannot be supplied by the client"
+            }), 400
         if key not in declared_params:
             return jsonify({"error": f"Parameter '{key}' not declared in manifest"}), 400
         params[key] = value
@@ -1845,6 +2153,15 @@ def readonly_data(slug: str, query_name: str):
     elif ":limit" in sql:
         params["limit"] = 1000
 
+    # Wave 2.1.x — auto-inject current_user identity bind params (Gap 5 fix
+    # from evonexus-plugin-nutri Step 3). Plugins reference these as
+    # :current_user_id and :current_user_role in their SQL to enforce
+    # server-side scoping (e.g. `WHERE primary_nutritionist_id = :current_user_id`).
+    # These keys are reserved — manifest params with the same name are
+    # silently overridden.  Always present, regardless of declaration.
+    params["current_user_id"] = getattr(current_user, "id", None)
+    params["current_user_role"] = getattr(current_user, "role", "viewer")
+
     try:
         conn = _get_db()
         cur = conn.execute(sql, params)
@@ -1926,6 +2243,19 @@ def writable_data(slug: str, resource_id: str):
         )
         return jsonify({"error": "Internal manifest error"}), 500
 
+    # Wave 2.1.x — endpoint-level RBAC enforcement (Gap 1 fix from
+    # evonexus-plugin-nutri Step 3 RBAC decision). When requires_role is set
+    # in the manifest, only users whose role is in the list may mutate.
+    # 'admin' always passes (super-user override).
+    requires_role = resource_decl.get("requires_role")
+    if requires_role:
+        actor_role = getattr(current_user, "role", "viewer")
+        if actor_role != "admin" and actor_role not in requires_role:
+            return jsonify({
+                "error": f"Resource '{resource_id}' requires role in {requires_role}, "
+                         f"current role is '{actor_role}'"
+            }), 403
+
     allowed_columns: list[str] = resource_decl.get("allowed_columns") or []
     method = request.method
 
diff --git a/dashboard/backend/routes/providers.py b/dashboard/backend/routes/providers.py
index a2127ef85..65a006656 100644
--- a/dashboard/backend/routes/providers.py
+++ b/dashboard/backend/routes/providers.py
@@ -17,7 +17,7 @@
 import urllib.parse
 from pathlib import Path
 
-from flask import Blueprint, jsonify, redirect, request, session
+from flask import Blueprint, jsonify, request, session, url_for
 from flask_login import login_required
 
 from routes._helpers import WORKSPACE
@@ -25,14 +25,18 @@
 bp = Blueprint("providers", __name__)
 
 PROVIDERS_CONFIG = WORKSPACE / "config" / "providers.json"
+PROVIDERS_EXAMPLE_CONFIG = WORKSPACE / "config" / "providers.example.json"
 
 OPENAI_CLIENT_ID = "app_EMoamEEZ73f0CkXaXp7hrann"
 OPENAI_AUTH_URL = "https://auth.openai.com/oauth/authorize"
 OPENAI_TOKEN_URL = "https://auth.openai.com/oauth/token"
+OPENAI_BROWSER_REDIRECT_URI = "http://localhost:1455/auth/callback"
 CODEX_AUTH_FILE = Path.home() / ".codex" / "auth.json"
+_CODEX_DEVICE_PROCESS = None
+_CODEX_DEVICE_OUTPUT = ""
 
 # Allowlisted CLI commands — only these binaries can be spawned
-ALLOWED_CLI_COMMANDS = frozenset({"claude", "openclaude"})
+ALLOWED_CLI_COMMANDS = frozenset({"claude", "openclaude", "opencode"})
 
 # Allowlisted env var names — only these can be injected into subprocess
 ALLOWED_ENV_VARS = frozenset({
@@ -49,6 +53,7 @@
     "CODEX_API_KEY",
     "GEMINI_API_KEY",
     "GEMINI_MODEL",
+    "NVIDIA_API_KEY",
     "AWS_REGION",
     "AWS_BEARER_TOKEN_BEDROCK",
     "ANTHROPIC_VERTEX_PROJECT_ID",
@@ -56,16 +61,72 @@
 })
 
 
+def _merge_provider_defaults(config: dict) -> tuple[dict, bool]:
+    """Merge providers.example.json into an existing config without overwriting secrets."""
+    if not PROVIDERS_EXAMPLE_CONFIG.is_file():
+        return config, False
+
+    try:
+        defaults = json.loads(PROVIDERS_EXAMPLE_CONFIG.read_text(encoding="utf-8"))
+    except (json.JSONDecodeError, OSError):
+        return config, False
+
+    changed = False
+    if not isinstance(config, dict):
+        config = {}
+        changed = True
+
+    for key, value in defaults.items():
+        if key == "providers":
+            continue
+        if key not in config:
+            config[key] = value
+            changed = True
+
+    providers = config.setdefault("providers", {})
+    if not isinstance(providers, dict):
+        config["providers"] = {}
+        providers = config["providers"]
+        changed = True
+
+    for provider_id, default_provider in (defaults.get("providers") or {}).items():
+        if provider_id not in providers or not isinstance(providers.get(provider_id), dict):
+            providers[provider_id] = default_provider
+            changed = True
+            continue
+
+        provider = providers[provider_id]
+        for key, value in default_provider.items():
+            if key == "env_vars":
+                env = provider.setdefault("env_vars", {})
+                if not isinstance(env, dict):
+                    provider["env_vars"] = {}
+                    env = provider["env_vars"]
+                    changed = True
+                for env_key, env_default in (value or {}).items():
+                    if env_key not in env:
+                        env[env_key] = env_default
+                        changed = True
+            elif key not in provider:
+                provider[key] = value
+                changed = True
+
+    return config, changed
+
+
 def _read_config() -> dict:
     """Read providers.json. If missing, copy from providers.example.json."""
     try:
         if not PROVIDERS_CONFIG.is_file():
-            example = PROVIDERS_CONFIG.parent / "providers.example.json"
-            if example.is_file():
+            if PROVIDERS_EXAMPLE_CONFIG.is_file():
                 import shutil as _shutil
-                _shutil.copy2(example, PROVIDERS_CONFIG)
+                _shutil.copy2(PROVIDERS_EXAMPLE_CONFIG, PROVIDERS_CONFIG)
         if PROVIDERS_CONFIG.is_file():
-            return json.loads(PROVIDERS_CONFIG.read_text(encoding="utf-8"))
+            config = json.loads(PROVIDERS_CONFIG.read_text(encoding="utf-8"))
+            config, changed = _merge_provider_defaults(config)
+            if changed:
+                _write_config(config)
+            return config
     except (json.JSONDecodeError, OSError):
         pass
     return {"active_provider": "anthropic", "providers": {}}
@@ -102,6 +163,8 @@ def _run_cli_version(command: str, env: dict | None = None) -> dict:
             result = subprocess.run(["openclaude", "--version"], **run_kwargs)  # noqa: S603, S607
         elif command == "claude":
             result = subprocess.run(["claude", "--version"], **run_kwargs)  # noqa: S603, S607
+        elif command == "opencode":
+            result = subprocess.run(["opencode", "--version"], **run_kwargs)  # noqa: S603, S607
         else:
             return {"installed": False, "version": None, "path": None}
 
@@ -169,6 +232,64 @@ def _save_codex_auth(tokens: dict):
     CODEX_AUTH_FILE.write_text(json.dumps(auth_data, indent=2), encoding="utf-8")
 
 
+def _external_url(endpoint: str) -> str:
+    """Build an externally visible URL behind Traefik/nginx when available."""
+    proto = request.headers.get("X-Forwarded-Proto", request.scheme)
+    host = request.headers.get("X-Forwarded-Host", request.host)
+    if host:
+        return urllib.parse.urlunparse((proto, host, url_for(endpoint), "", "", ""))
+    return url_for(endpoint, _external=True)
+
+
+def _exchange_openai_code(code: str, code_verifier: str, redirect_uri: str):
+    import requests as http_req
+
+    return http_req.post(OPENAI_TOKEN_URL, data={
+        "grant_type": "authorization_code",
+        "code": code,
+        "redirect_uri": redirect_uri,
+        "client_id": OPENAI_CLIENT_ID,
+        "code_verifier": code_verifier,
+    }, timeout=30)
+
+
+def _activate_codex_provider():
+    config = _read_config()
+    providers = config.get("providers", {})
+    config["active_provider"] = "codex_auth" if "codex_auth" in providers else "openai"
+    _write_config(config)
+
+
+def _strip_ansi(text: str) -> str:
+    return re.sub(r"\x1b\[[0-9;]*m", "", text or "")
+
+
+def _codex_auth_has_token() -> bool:
+    if not CODEX_AUTH_FILE.is_file():
+        return False
+    try:
+        auth = json.loads(CODEX_AUTH_FILE.read_text(encoding="utf-8"))
+    except (json.JSONDecodeError, OSError):
+        return False
+    tokens = auth.get("tokens", {})
+    return bool(
+        tokens.get("access_token")
+        or auth.get("openai-codex", {}).get("access")
+        or auth.get("access_token")
+    )
+
+
+def _terminate_codex_device_process():
+    global _CODEX_DEVICE_PROCESS
+    proc = _CODEX_DEVICE_PROCESS
+    if proc and proc.poll() is None:
+        try:
+            proc.terminate()
+        except OSError:
+            pass
+    _CODEX_DEVICE_PROCESS = None
+
+
 # ── Endpoints ──────────────────────────────────────────────
 
 
@@ -180,16 +301,22 @@ def list_providers():
     active = config.get("active_provider", "anthropic")
     providers = config.get("providers", {})
 
-    # Check CLI installation status for both binaries
+    # Check CLI installation status for each binary
     claude_status = _check_cli("claude")
     openclaude_status = _check_cli("openclaude")
+    opencode_status = _check_cli("opencode")
+    cli_status_by_command = {
+        "claude": claude_status,
+        "openclaude": openclaude_status,
+        "opencode": opencode_status,
+    }
 
     result = []
     for key, prov in providers.items():
         cli = prov.get("cli_command", "claude")
         if cli not in ALLOWED_CLI_COMMANDS:
             continue
-        cli_status = claude_status if cli == "claude" else openclaude_status
+        cli_status = cli_status_by_command.get(cli, claude_status)
 
         # Mask env var values for API response
         env_vars = prov.get("env_vars", {})
@@ -230,6 +357,7 @@ def list_providers():
         "active_provider": active,
         "claude_installed": claude_status["installed"],
         "openclaude_installed": openclaude_status["installed"],
+        "opencode_installed": opencode_status["installed"],
     })
 
 
@@ -317,6 +445,15 @@ def update_provider_config(provider_id):
         # Reject values with shell metacharacters
         if not isinstance(value, str) or re.search(r'[;&|`$\n\r]', value):
             continue
+        # Never wipe a stored secret with an empty field — the UI submits
+        # blank password inputs when the user edits other fields (e.g. model),
+        # which would silently erase the saved key.
+        if (
+            value == ""
+            and existing.get(key)
+            and any(tag in key for tag in ("KEY", "SECRET", "TOKEN"))
+        ):
+            continue
         existing[key] = value
 
     provider["env_vars"] = existing
@@ -374,11 +511,16 @@ def openai_auth_start():
 
     session["openai_code_verifier"] = code_verifier
     session["openai_oauth_state"] = state
+    # This OAuth client is registered by OpenAI/Codex for the local CLI
+    # callback. Hydra rejects arbitrary public dashboard domains with
+    # authorize_hydra_invalid_request, so browser auth must keep the registered
+    # localhost redirect and let the user paste the final URL back into the UI.
+    session["openai_redirect_uri"] = OPENAI_BROWSER_REDIRECT_URI
 
     params = {
         "response_type": "code",
         "client_id": OPENAI_CLIENT_ID,
-        "redirect_uri": "http://localhost:1455/auth/callback",
+        "redirect_uri": OPENAI_BROWSER_REDIRECT_URI,
         "scope": "openid profile email offline_access api.connectors.read api.connectors.invoke",
         "code_challenge": code_challenge,
         "code_challenge_method": "S256",
@@ -387,15 +529,47 @@ def openai_auth_start():
         "codex_cli_simplified_flow": "true",
     }
     url = f"{OPENAI_AUTH_URL}?{urllib.parse.urlencode(params)}"
-    return jsonify({"authorize_url": url})
+    return jsonify({"authorize_url": url, "redirect_uri": OPENAI_BROWSER_REDIRECT_URI})
+
+
+@bp.route("/auth/callback")
+@login_required
+def openai_auth_callback():
+    """Complete Codex OAuth when OpenAI redirects back to the dashboard."""
+    code = request.args.get("code")
+    state = request.args.get("state")
+    expected_state = session.pop("openai_oauth_state", None)
+    code_verifier = session.pop("openai_code_verifier", None)
+    redirect_uri = session.pop("openai_redirect_uri", None) or OPENAI_BROWSER_REDIRECT_URI
+
+    if not code:
+        return "Codex OAuth falhou: callback sem codigo de autorizacao.", 400
+    if expected_state and state != expected_state:
+        return "Codex OAuth falhou: state invalido.", 400
+    if not code_verifier:
+        return "Codex OAuth falhou: sessao expirada. Volte ao dashboard e inicie o login novamente.", 400
+
+    resp = _exchange_openai_code(code, code_verifier, redirect_uri)
+    if resp.status_code != 200:
+        return f"Codex OAuth falhou na troca de token (HTTP {resp.status_code}).", 400
+
+    _save_codex_auth(resp.json())
+    _activate_codex_provider()
+    return (
+        "<!doctype html><meta charset='utf-8'>"
+        "<title>Codex OAuth conectado</title>"
+        "<body style='font-family:system-ui;background:#0b1018;color:#e2e8f0;padding:32px'>"
+        "<h1 style='font-size:18px'>Codex OAuth conectado</h1>"
+        "<p>Token salvo. Você já pode voltar ao EvoNexus.</p>"
+        "<script>setTimeout(() => window.close(), 1200)</script>"
+        "</body>"
+    )
 
 
 @bp.route("/api/providers/openai/auth-complete", methods=["POST"])
 @login_required
 def openai_auth_complete():
     """Receive callback URL pasted by user, extract code, exchange for tokens."""
-    import requests as http_req
-
     data = request.get_json(silent=True) or {}
     callback_url = data.get("callback_url", "")
 
@@ -411,26 +585,16 @@ def openai_auth_complete():
         return jsonify({"error": "Sessao expirada - inicie o login novamente"}), 400
 
     session.pop("openai_oauth_state", None)
+    redirect_uri = session.pop("openai_redirect_uri", None) or OPENAI_BROWSER_REDIRECT_URI
 
-    resp = http_req.post(OPENAI_TOKEN_URL, data={
-        "grant_type": "authorization_code",
-        "code": code,
-        "redirect_uri": "http://localhost:1455/auth/callback",
-        "client_id": OPENAI_CLIENT_ID,
-        "code_verifier": code_verifier,
-    }, timeout=30)
+    resp = _exchange_openai_code(code, code_verifier, redirect_uri)
 
     if resp.status_code != 200:
         return jsonify({"error": f"Falha na troca de token (HTTP {resp.status_code})"}), 400
 
     _save_codex_auth(resp.json())
 
-    config = _read_config()
-    # Use dedicated codex_auth provider key when OAuth is used (falls back to
-    # openai for backward compatibility if codex_auth is not configured).
-    providers = config.get("providers", {})
-    config["active_provider"] = "codex_auth" if "codex_auth" in providers else "openai"
-    _write_config(config)
+    _activate_codex_provider()
 
     return jsonify({"status": "ok", "message": "Autenticado com sucesso!"})
 
@@ -438,73 +602,122 @@ def openai_auth_complete():
 @bp.route("/api/providers/openai/device-start", methods=["POST"])
 @login_required
 def openai_device_start():
-    """Start device auth flow."""
-    import requests as http_req
+    """Start Codex device auth through the official Codex CLI.
 
-    resp = http_req.post("https://auth.openai.com/deviceauth/usercode", json={
-        "client_id": OPENAI_CLIENT_ID,
-    }, timeout=15)
+    Direct POSTs to auth.openai.com/deviceauth/usercode are Cloudflare-gated
+    for ordinary HTTP clients. The Codex CLI performs the supported device
+    flow and persists ~/.codex/auth.json after authorization.
+    """
+    global _CODEX_DEVICE_PROCESS, _CODEX_DEVICE_OUTPUT
 
-    if resp.status_code != 200:
-        return jsonify({"error": "Device auth nao disponivel para sua organizacao"}), 400
+    codex_bin = shutil.which("codex")
+    if not codex_bin:
+        return jsonify({
+            "error": "Codex CLI nao esta instalado no container",
+            "hint": "Atualize para uma imagem que inclua @openai/codex.",
+        }), 503
+
+    _terminate_codex_device_process()
+    _CODEX_DEVICE_OUTPUT = ""
 
-    data = resp.json()
-    session["openai_device_auth_id"] = data["device_auth_id"]
-    session["openai_device_user_code"] = data["user_code"]
+    try:
+        proc = subprocess.Popen(  # noqa: S603
+            [codex_bin, "login", "--device-auth"],
+            stdout=subprocess.PIPE,
+            stderr=subprocess.STDOUT,
+            text=True,
+            bufsize=1,
+            env={**os.environ, "HOME": str(Path.home())},
+        )
+    except OSError as exc:
+        return jsonify({"error": f"Falha ao iniciar Codex CLI: {exc}"}), 500
+
+    _CODEX_DEVICE_PROCESS = proc
+    deadline = time.time() + 20
+    output = ""
+    user_code = None
+    verification_url = "https://auth.openai.com/codex/device"
+
+    while time.time() < deadline:
+        line = proc.stdout.readline() if proc.stdout else ""
+        if line:
+            output += line
+            clean = _strip_ansi(output)
+            url_match = re.search(r"https://auth\.openai\.com/codex/device", clean)
+            code_match = re.search(r"\b([A-Z0-9]{4}-[A-Z0-9]{5})\b", clean)
+            if url_match:
+                verification_url = url_match.group(0)
+            if code_match:
+                user_code = code_match.group(1)
+                break
+        elif proc.poll() is not None:
+            break
+        else:
+            time.sleep(0.1)
+
+    _CODEX_DEVICE_OUTPUT = output
+    if not user_code:
+        rc = proc.poll()
+        _CODEX_DEVICE_PROCESS = None
+        return jsonify({
+            "error": "Codex CLI nao retornou um codigo de device auth",
+            "exit_code": rc,
+            "output": _strip_ansi(output)[-1000:],
+        }), 500
+
+    session["openai_device_auth_started_at"] = int(time.time())
 
     return jsonify({
-        "user_code": data["user_code"],
-        "verification_url": "https://auth.openai.com/codex/device",
-        "interval": data.get("interval", 5),
-        "expires_in": data.get("expires_in", 900),
+        "user_code": user_code,
+        "verification_url": verification_url,
+        "interval": 5,
+        "expires_in": 900,
+        "method": "codex_cli",
     })
 
 
 @bp.route("/api/providers/openai/device-poll", methods=["POST"])
 @login_required
 def openai_device_poll():
-    """Poll for device auth authorization."""
-    import requests as http_req
+    """Poll the Codex CLI device-auth subprocess."""
+    global _CODEX_DEVICE_PROCESS, _CODEX_DEVICE_OUTPUT
 
-    device_auth_id = session.get("openai_device_auth_id")
-    user_code = session.get("openai_device_user_code")
-    if not device_auth_id:
+    if not session.get("openai_device_auth_started_at"):
         return jsonify({"status": "error", "message": "Nenhum login pendente"}), 400
 
-    resp = http_req.post("https://auth.openai.com/deviceauth/token", json={
-        "device_auth_id": device_auth_id,
-        "user_code": user_code,
-    }, timeout=15)
+    if _codex_auth_has_token():
+        _terminate_codex_device_process()
+        _activate_codex_provider()
+        session.pop("openai_device_auth_started_at", None)
+        return jsonify({"status": "authorized"})
 
-    if resp.status_code in (403, 404):
+    proc = _CODEX_DEVICE_PROCESS
+    if not proc:
         return jsonify({"status": "pending"})
 
-    if resp.status_code != 200:
-        return jsonify({"status": "error", "message": "Polling falhou"}), 500
-
-    auth_data = resp.json()
-
-    token_resp = http_req.post(OPENAI_TOKEN_URL, data={
-        "grant_type": "authorization_code",
-        "code": auth_data["authorization_code"],
-        "code_verifier": auth_data["code_verifier"],
-        "client_id": OPENAI_CLIENT_ID,
-    }, timeout=15)
+    rc = proc.poll()
+    if rc is None:
+        return jsonify({"status": "pending"})
 
-    if token_resp.status_code != 200:
-        return jsonify({"status": "error", "message": "Token exchange falhou"}), 500
+    try:
+        rest = proc.stdout.read() if proc.stdout else ""
+    except Exception:
+        rest = ""
+    _CODEX_DEVICE_OUTPUT += rest
+    _CODEX_DEVICE_PROCESS = None
 
-    _save_codex_auth(token_resp.json())
+    if _codex_auth_has_token():
+        _activate_codex_provider()
+        session.pop("openai_device_auth_started_at", None)
+        return jsonify({"status": "authorized"})
 
-    config = _read_config()
-    providers = config.get("providers", {})
-    config["active_provider"] = "codex_auth" if "codex_auth" in providers else "openai"
-    _write_config(config)
-
-    session.pop("openai_device_auth_id", None)
-    session.pop("openai_device_user_code", None)
+    return jsonify({
+        "status": "error",
+        "message": "Codex device auth terminou sem salvar token",
+        "exit_code": rc,
+        "output": _strip_ansi(_CODEX_DEVICE_OUTPUT)[-1000:],
+    }), 500
 
-    return jsonify({"status": "authorized"})
 
 
 @bp.route("/api/providers/openai/status")
diff --git a/dashboard/backend/routes/routines.py b/dashboard/backend/routes/routines.py
index 0a535d950..0cc86ac9b 100644
--- a/dashboard/backend/routes/routines.py
+++ b/dashboard/backend/routes/routines.py
@@ -124,6 +124,8 @@ def list_adws():
     "flux-2": {"per_image": 0.03, "input_per_1m": 0, "output_per_1m": 0},
     "flux.2": {"per_image": 0.03, "input_per_1m": 0, "output_per_1m": 0},
     "gpt-5-image": {"per_image": 0.04, "input_per_1m": 0.005, "output_per_1m": 0.015},
+    # OpenAI Images API — billed per token (text input / image output rates).
+    "gpt-image-2": {"per_image": 0.0, "input_per_1m": 5.0, "output_per_1m": 40.0},
     "seedream": {"per_image": 0.02, "input_per_1m": 0, "output_per_1m": 0},
     "riverflow": {"per_image": 0.02, "input_per_1m": 0, "output_per_1m": 0},
 }
@@ -147,7 +149,13 @@ def _estimate_image_cost(entry: dict) -> float:
         return 0.03
 
     cost = pricing["per_image"]
-    if total_tokens > 0 and pricing["input_per_1m"] > 0:
+    prompt_tokens = tokens.get("prompt_tokens", 0)
+    completion_tokens = tokens.get("completion_tokens", 0)
+    if prompt_tokens and completion_tokens and pricing.get("output_per_1m", 0) > 0:
+        # Split billing: text input vs image output rates (OpenAI Images API)
+        cost += (prompt_tokens / 1_000_000) * pricing["input_per_1m"]
+        cost += (completion_tokens / 1_000_000) * pricing["output_per_1m"]
+    elif total_tokens > 0 and pricing["input_per_1m"] > 0:
         cost += (total_tokens / 1_000_000) * pricing["input_per_1m"]
     return round(cost, 6)
 
diff --git a/dashboard/backend/routes/shares.py b/dashboard/backend/routes/shares.py
index 458b6550d..901ebb071 100644
--- a/dashboard/backend/routes/shares.py
+++ b/dashboard/backend/routes/shares.py
@@ -5,10 +5,11 @@
 from datetime import datetime, timezone, timedelta
 from pathlib import Path
 
-from flask import Blueprint, jsonify, request, Response
+from flask import Blueprint, jsonify, request, Response, after_this_request
 from flask_login import login_required, current_user
 
 from models import db, FileShare, audit, has_workspace_folder_access
+from rate_limit import limiter
 from routes.auth_routes import require_permission
 
 bp = Blueprint("shares", __name__)
@@ -184,6 +185,7 @@ def revoke_share(token: str):
 # ── Public endpoint (no auth required) ──────────────────────────────────────
 
 @bp.route("/api/shares/<token>/view", methods=["GET"])
+@limiter.limit("60 per minute")
 def view_share(token: str):
     """Serve the file content for a valid share token. No authentication required."""
     share = FileShare.query.filter_by(token=token).first()
@@ -214,6 +216,16 @@ def view_share(token: str):
     ua = (request.headers.get("User-Agent", "-") or "-")[:200]
     audit(None, "share_view", "shares", detail=f"token={token} ip={ip} ua={ua[:80]}")
 
+    # Vault §2.S2: security headers on all public share responses.
+    @after_this_request
+    def _add_security_headers(response):
+        response.headers["Referrer-Policy"] = "no-referrer"
+        response.headers["Cache-Control"] = "no-store, private, no-cache, must-revalidate"
+        response.headers["Pragma"] = "no-cache"
+        response.headers["X-Content-Type-Options"] = "nosniff"
+        response.headers["Strict-Transport-Security"] = "max-age=63072000; includeSubDomains"
+        return response
+
     suffix = full.suffix.lower()
 
     # HTML/HTM: serve raw so browser renders it as a full page
diff --git a/dashboard/backend/routes/tickets.py b/dashboard/backend/routes/tickets.py
index 4b68aa89a..2a15a15f4 100644
--- a/dashboard/backend/routes/tickets.py
+++ b/dashboard/backend/routes/tickets.py
@@ -42,6 +42,10 @@ def _require(action: str) -> Optional[tuple]:
     return None
 
 
+def _db_path() -> str:
+    return str(WORKSPACE / "dashboard" / "data" / "evonexus.db")
+
+
 def _now() -> str:
     return datetime.now(timezone.utc).strftime("%Y-%m-%dT%H:%M:%S.%fZ")
 
@@ -262,17 +266,34 @@ def create_ticket():
     source_agent = (data.get("source_agent") or "").strip() or None
     source_session_id = (data.get("source_session_id") or "").strip() or None
 
+    # Closed-set validation (ADR "assignee selection"): an assignee_agent must
+    # be a known .claude/agents/*.md slug. Unknown/invalid values would leave
+    # the ticket orphaned (no heartbeat ever queries it) — route to the
+    # clawdia-assistant triage bucket instead and record what was attempted
+    # so a human can reassign it.
+    assignee_agent = (data.get("assignee_agent") or "").strip() or None
+    invalid_assignee = None
+    if assignee_agent and assignee_agent not in _get_agent_slugs():
+        invalid_assignee = assignee_agent
+        assignee_agent = "clawdia-assistant"
+
+    description = data.get("description")
+    if invalid_assignee:
+        note = f"[auto-routed] assignee_agent inválido tentado: '{invalid_assignee}' — reatribuir manualmente."
+        description = f"{description}\n\n{note}" if description else note
+
     now = _now()
     ticket = Ticket(
         id=str(uuid.uuid4()),
         title=title,
-        description=data.get("description"),
+        description=description,
         status=status,
         priority=priority,
         priority_rank=PRIORITY_RANK[priority],
-        assignee_agent=data.get("assignee_agent"),
+        assignee_agent=assignee_agent,
         project_id=data.get("project_id"),
         goal_id=data.get("goal_id"),
+        task_id=data.get("task_id"),
         created_by=current_user.username,
         source_agent=source_agent,
         source_session_id=source_session_id,
@@ -285,6 +306,8 @@ def create_ticket():
         activity_payload["source_agent"] = source_agent
     if source_session_id:
         activity_payload["source_session_id"] = source_session_id
+    if invalid_assignee:
+        activity_payload["invalid_assignee_agent"] = invalid_assignee
     _log_activity(ticket.id, current_user.username, "created", activity_payload)
     db.session.commit()
 
@@ -303,6 +326,7 @@ def update_ticket(ticket_id: str):
     ticket = Ticket.query.get_or_404(ticket_id)
     data = request.get_json() or {}
     changes: dict = {}
+    old_goal_id = ticket.goal_id
 
     if "status" in data:
         new_status = data["status"]
@@ -313,6 +337,13 @@ def update_ticket(ticket_id: str):
         changes["status"] = {"from": old_status, "to": new_status}
         if new_status in ("resolved", "closed") and not ticket.resolved_at:
             ticket.resolved_at = _now()
+        # Manual reopen (a human, via UI/API, walking a ticket back from a
+        # terminal-ish state) resets the review-loop bounce budget — see
+        # heartbeat_outcome._count_review_bounces and .claude/rules/tickets.md.
+        # Distinct from an agent's fail-bounce (review->in_progress, which
+        # INCREMENTS the count) and from a publish-reject (Step 7 scope).
+        if old_status in ("blocked", "resolved", "closed") and new_status in ("open", "in_progress"):
+            _log_activity(ticket_id, current_user.username, "review_reset", {"from": old_status, "to": new_status})
 
     if "priority" in data:
         new_priority = data["priority"]
@@ -341,6 +372,9 @@ def update_ticket(ticket_id: str):
     if "goal_id" in data:
         ticket.goal_id = data["goal_id"]
 
+    if "task_id" in data:
+        ticket.task_id = data["task_id"]
+
     # Thread-areas: allow persisting the SDK session ID back from the frontend (R1 mitigation)
     if "thread_session_id" in data:
         ticket.thread_session_id = data["thread_session_id"] or None
@@ -350,6 +384,27 @@ def update_ticket(ticket_id: str):
     _log_activity(ticket_id, current_user.username, "status_changed" if "status" in changes else "updated", changes)
     db.session.commit()
 
+    # Recompute the linked goal's current_value — same single source of truth
+    # heartbeat-driven resolutions get via heartbeat_outcome._move_ticket.
+    # Manual/UI/API status changes need it too, or the goal only progresses
+    # when an agent happens to be the one closing the ticket. Fires on ANY
+    # status change (not just into resolved/closed) so a ticket walked BACK
+    # from resolved/closed to blocked/open correctly drops the goal's count.
+    # Also fires on a bare goal_id change (rebind, no status change) so BOTH
+    # the origin goal (which loses the ticket) and the destination goal
+    # (which gains it) stay in sync — recomputing only ticket.goal_id (the
+    # post-change value) would leave the origin goal inflated forever.
+    if ("status" in changes or "goal_id" in data) and (old_goal_id or ticket.goal_id):
+        import sqlite3
+        from heartbeat_outcome import _recompute_goal_from_tickets
+        _conn = sqlite3.connect(_db_path())
+        try:
+            for _gid in {gid for gid in (old_goal_id, ticket.goal_id) if gid}:
+                _recompute_goal_from_tickets(_gid, _conn)
+            _conn.commit()
+        finally:
+            _conn.close()
+
     audit(current_user, "update", "tickets", f"updated ticket {ticket_id}: {list(data.keys())}")
     return jsonify(ticket.to_dict())
 
@@ -378,6 +433,19 @@ def delete_ticket(ticket_id: str):
         ticket.updated_at = now
         _log_activity(ticket_id, current_user.username, "status_changed", {"from": old_status, "to": "closed"})
         db.session.commit()
+
+        # Same recompute update_ticket does for this exact transition
+        # (any status -> closed) — the soft-close path must not skip it.
+        if ticket.goal_id:
+            import sqlite3
+            from heartbeat_outcome import _recompute_goal_from_tickets
+            _conn = sqlite3.connect(_db_path())
+            try:
+                _recompute_goal_from_tickets(ticket.goal_id, _conn)
+                _conn.commit()
+            finally:
+                _conn.close()
+
         audit(current_user, "update", "tickets", f"closed ticket {ticket_id}")
         return jsonify({"deleted": ticket_id, "hard": False, "ticket": ticket.to_dict()})
 
@@ -511,6 +579,7 @@ def bulk_action():
 
     now = _now()
     updated = 0
+    goal_ids_to_recompute: set[int] = set()
 
     try:
         for tid in ids:
@@ -523,13 +592,21 @@ def bulk_action():
                 ticket.resolved_at = ticket.resolved_at or now
                 ticket.updated_at = now
                 _log_activity(tid, current_user.username, "status_changed", {"from": old, "to": "closed"})
+                if ticket.goal_id:
+                    goal_ids_to_recompute.add(ticket.goal_id)
             elif action == "reopen":
                 old = ticket.status
                 ticket.status = "open"
                 ticket.resolved_at = None
                 ticket.updated_at = now
                 _log_activity(tid, current_user.username, "status_changed", {"from": old, "to": "open"})
+                if old in ("blocked", "resolved", "closed"):
+                    _log_activity(tid, current_user.username, "review_reset", {"from": old, "to": "open"})
+                if ticket.goal_id:
+                    goal_ids_to_recompute.add(ticket.goal_id)
             elif action == "delete":
+                if ticket.goal_id:
+                    goal_ids_to_recompute.add(ticket.goal_id)
                 db.session.delete(ticket)
                 _log_activity(tid, current_user.username, "deleted", {})
             elif action == "reassign":
@@ -538,8 +615,13 @@ def bulk_action():
                 ticket.updated_at = now
                 _log_activity(tid, current_user.username, "assigned", {"assignee_agent": new_agent})
             elif action == "relink_goal":
+                old_goal_id = ticket.goal_id
+                if old_goal_id:
+                    goal_ids_to_recompute.add(old_goal_id)
                 ticket.goal_id = payload.get("goal_id")
                 ticket.updated_at = now
+                if ticket.goal_id:
+                    goal_ids_to_recompute.add(ticket.goal_id)
                 _log_activity(tid, current_user.username, "updated", {"goal_id": ticket.goal_id})
             updated += 1
         db.session.commit()
@@ -547,6 +629,17 @@ def bulk_action():
         db.session.rollback()
         return jsonify({"error": f"bulk action failed: {exc}"}), 500
 
+    if goal_ids_to_recompute:
+        import sqlite3
+        from heartbeat_outcome import _recompute_goal_from_tickets
+        _conn = sqlite3.connect(_db_path())
+        try:
+            for goal_id in goal_ids_to_recompute:
+                _recompute_goal_from_tickets(goal_id, _conn)
+            _conn.commit()
+        finally:
+            _conn.close()
+
     audit(current_user, "manage", "tickets", f"bulk {action} on {updated} tickets")
     return jsonify({"updated": updated, "action": action})
 
diff --git a/dashboard/backend/ticket_janitor.py b/dashboard/backend/ticket_janitor.py
index 3a8a726c1..dc3ff0283 100644
--- a/dashboard/backend/ticket_janitor.py
+++ b/dashboard/backend/ticket_janitor.py
@@ -11,6 +11,12 @@
 
 JANITOR_INTERVAL_SECONDS = int(os.getenv("TICKET_JANITOR_INTERVAL", "300"))  # 5 min default
 
+# Approval lifecycle policy (goal-ticket-unification ADR §3i) — proposed
+# numbers, Felipe-confirmed as assumption: 8h auto-reject covers an overnight
+# unattended run, two re-nudges at 2h/4h so an unanswered approval doesn't
+# silently sit until the deadline.
+APPROVAL_RENUDGE_WINDOWS_SECONDS = (2 * 3600, 4 * 3600)
+
 _janitor_started = False
 _janitor_lock = threading.Lock()
 
@@ -19,6 +25,10 @@ def _now() -> str:
     return datetime.now(timezone.utc).strftime("%Y-%m-%dT%H:%M:%S.%fZ")
 
 
+def _parse_iso(ts: str) -> datetime:
+    return datetime.strptime(ts.rstrip("Z"), "%Y-%m-%dT%H:%M:%S.%f").replace(tzinfo=timezone.utc)
+
+
 def release_expired_locks(app=None) -> int:
     """Find and release all expired ticket locks.
 
@@ -80,6 +90,120 @@ def release_expired_locks(app=None) -> int:
     return released
 
 
+def sweep_pending_approvals(app=None) -> int:
+    """TTL / re-nudge / auto-reject sweep for pending_approvals (ADR §3i).
+
+    Runs on the same 5-min cadence as the ticket-lock sweep so a pending
+    Telegram approval never blocks the pipeline indefinitely: two re-nudges
+    (2h, 4h) via a fresh send_approval_request, then auto-reject at 8h. On
+    auto-reject, publish parks unwind the ticket back to in_progress (nothing
+    was ever published — the approval never fired); decomposition parks mark
+    the sub-goal rejected (ticket creation for it is Step 7's job, so there's
+    nothing else to unwind here).
+
+    `payload` is expected to be a JSON object with "title"/"body" strings
+    (the same content the Step 7 caller passed to send_approval_request when
+    the row was created) — re-nudges resend that content verbatim so the
+    approver sees the same prompt again.
+    """
+    swept = 0
+    try:
+        from models import db
+        from notifications import send_approval_request
+
+        now_dt = datetime.now(timezone.utc)
+        now = _now()
+
+        rows = db.session.execute(
+            db.text(
+                "SELECT id, gate_type, ticket_id, goal_id, payload, created_at, nudged_at, expires_at "
+                "FROM pending_approvals WHERE status = 'pending'"
+            )
+        ).fetchall()
+
+        for row in rows:
+            try:
+                expired = row.expires_at and _parse_iso(row.expires_at) <= now_dt
+            except (ValueError, TypeError):
+                expired = False
+
+            if expired:
+                cur = db.session.execute(
+                    db.text("UPDATE pending_approvals SET status='expired', decided_at=:t WHERE id=:id AND status='pending'"),
+                    {"t": now, "id": row.id},
+                )
+                if cur.rowcount == 0:
+                    continue  # decided by a human in the race window — leave it alone
+                if row.gate_type == "publish" and row.ticket_id:
+                    db.session.execute(
+                        db.text(
+                            "UPDATE tickets SET status='in_progress', requires_human_approval=0, "
+                            "blocked_reason=NULL, updated_at=:t WHERE id=:tid"
+                        ),
+                        {"t": now, "tid": row.ticket_id},
+                    )
+                    db.session.execute(
+                        db.text(
+                            "INSERT INTO ticket_comments (id, ticket_id, author, body, mentions, created_at) "
+                            "VALUES (:id, :tid, 'system:approval', :body, '[]', :t)"
+                        ),
+                        {
+                            "id": str(uuid.uuid4()), "tid": row.ticket_id,
+                            "body": "Aprovação expirou (8h sem resposta) — nada foi publicado.",
+                            "t": now,
+                        },
+                    )
+                elif row.gate_type == "decomposition" and row.goal_id:
+                    db.session.execute(
+                        db.text("UPDATE goals SET decomposition_state='rejected', updated_at=:t WHERE id=:id"),
+                        {"t": now, "id": row.goal_id},
+                    )
+                db.session.commit()
+                swept += 1
+                continue
+
+            # Re-nudge windows — send again once elapsed crosses a window
+            # that the last nudge (if any) hadn't crossed yet.
+            try:
+                elapsed = (now_dt - _parse_iso(row.created_at)).total_seconds()
+            except (ValueError, TypeError):
+                continue
+            last_nudge_elapsed = None
+            if row.nudged_at:
+                try:
+                    last_nudge_elapsed = (_parse_iso(row.nudged_at) - _parse_iso(row.created_at)).total_seconds()
+                except (ValueError, TypeError):
+                    last_nudge_elapsed = None
+
+            for window in APPROVAL_RENUDGE_WINDOWS_SECONDS:
+                if elapsed >= window and (last_nudge_elapsed is None or last_nudge_elapsed < window):
+                    title, body = "Aprovação pendente", f"Ticket {row.ticket_id}" if row.ticket_id else f"Goal {row.goal_id}"
+                    try:
+                        payload = json.loads(row.payload) if row.payload else {}
+                        title = payload.get("title") or title
+                        body = payload.get("body") or body
+                    except (ValueError, TypeError):
+                        pass
+                    message_id = send_approval_request(row.id, title, body)
+                    if message_id is not None:
+                        db.session.execute(
+                            db.text("UPDATE pending_approvals SET nudged_at=:t, telegram_message_id=:mid WHERE id=:id"),
+                            {"t": now, "id": row.id, "mid": message_id},
+                        )
+                        db.session.commit()
+                        swept += 1
+                    break
+
+    except Exception as exc:
+        try:
+            db.session.rollback()
+        except Exception:
+            pass
+        print(f"[ticket_janitor] ERROR in sweep_pending_approvals: {exc}", flush=True)
+
+    return swept
+
+
 def _janitor_loop(app):
     """Background loop — reclaims expired ticket AND brain-repo locks.
 
@@ -92,6 +216,7 @@ def _janitor_loop(app):
         try:
             with app.app_context():
                 release_expired_locks()
+                sweep_pending_approvals()
         except Exception as exc:
             print(f"[ticket_janitor] loop error: {exc}", flush=True)
         # Brain-repo stale-lock sweep. Runs in the same context; failures are
diff --git a/dashboard/frontend/index.html b/dashboard/frontend/index.html
index 9f57cf680..66454b20c 100644
--- a/dashboard/frontend/index.html
+++ b/dashboard/frontend/index.html
@@ -6,7 +6,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <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;600;700&display=swap" rel="stylesheet" />
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet" />
     <!--
       Wave 2.1 CSP hardening (connect-src):
       - 'self' covers all /api/* and /plugins/* fetch calls
diff --git a/dashboard/frontend/src/App.tsx b/dashboard/frontend/src/App.tsx
index d6f411a2f..f44186cf6 100644
--- a/dashboard/frontend/src/App.tsx
+++ b/dashboard/frontend/src/App.tsx
@@ -41,6 +41,10 @@ const HeartbeatsList = lazyDefault(() => import('./pages/Heartbeats'))
 const HeartbeatDetail = lazyNamed(() => import('./pages/Heartbeats'), 'HeartbeatDetail')
 const Activity = lazyDefault(() => import('./pages/Activity'))
 const Goals = lazyDefault(() => import('./pages/Goals'))
+const Media = lazyDefault(() => import('./pages/Media'))
+const ProjectsOverview = lazyDefault(() => import('./pages/ProjectsOverview'))
+const Kanban = lazyDefault(() => import('./pages/Kanban'))
+const Approvals = lazyDefault(() => import('./pages/Approvals'))
 const Plugins = lazyDefault(() => import('./pages/Plugins'))
 const PluginDetail = lazyDefault(() => import('./pages/PluginDetail'))
 const McpServers = lazyDefault(() => import('./pages/McpServers'))
@@ -266,14 +270,18 @@ function AppContent() {
               {hasPermission('users', 'manage') && <Route path="/roles" element={<Roles />} />}
               {hasPermission('workspace', 'manage') && <Route path="/shares" element={<ShareLinks />} />}
               <Route path="/goals" element={<Goals />} />
+              {hasPermission('media_jobs', 'view') && <Route path="/media" element={<Media />} />}
+              <Route path="/projects" element={<ProjectsOverview />} />
               <Route path="/plugins" element={<Plugins />} />
               <Route path="/plugins/:slug" element={<PluginDetail />} />
               <Route path="/mcp-servers" element={<McpServers />} />
               {/* Wave 2.1: full-screen plugin UI pages (catch-all, must come after /plugins/:slug) */}
               <Route path="/plugins-ui/:slug/*" element={<PluginPageHost />} />
               {hasPermission('tickets', 'view') && <Route path="/topics" element={<Topics />} />}
+              {hasPermission('tickets', 'view') && <Route path="/kanban" element={<Kanban />} />}
               {hasPermission('tickets', 'view') && <Route path="/issues" element={<Navigate to="/topics" replace />} />}
               {hasPermission('tickets', 'view') && <Route path="/tickets/:id" element={<TicketDetail />} />}
+              {hasPermission('goals', 'view') && <Route path="/approvals" element={<Approvals />} />}
               {hasPermission('knowledge', 'view') && (
                 <>
                   {/* Top-level Knowledge shell: only Connections + Settings */}
diff --git a/dashboard/frontend/src/components/AgentChat.tsx b/dashboard/frontend/src/components/AgentChat.tsx
index b60ff6643..0551042a5 100644
--- a/dashboard/frontend/src/components/AgentChat.tsx
+++ b/dashboard/frontend/src/components/AgentChat.tsx
@@ -1,14 +1,15 @@
 import { useEffect, useRef, useState, useCallback } from 'react'
-import { useToast } from './Toast'
 import Markdown from './Markdown'
 import { AgentAvatar } from './AgentAvatar'
+import TerminalHudPanel from './TerminalHudPanel'
+import CreateTicketModal, { type CreatedTicket } from './CreateTicketModal'
 import { useNotifications } from '../context/NotificationContext'
 import {
   Send, Square, ChevronDown, ChevronRight,
   FileCode, Terminal as TermIcon, CheckCircle2,
   Paperclip, X, File as FileIcon, ImageIcon, Upload,
   Ticket as TicketIcon, Plus, ShieldAlert, Check, Ban,
-  Pencil, Copy, FileText, Edit2,
+  Pencil, Copy, FileText, Edit2, Mic, Loader2,
 } from 'lucide-react'
 
 interface SkillItem {
@@ -26,6 +27,21 @@ interface SlashPopup {
   anchorStart: number
 }
 
+// Same shape as AgentTerminal's HudState — kept as a separate local type
+// (not a shared import) since these two components don't otherwise share
+// types and a one-off duplication is simpler than introducing a shared
+// types module for a single interface.
+interface HudState {
+  busy: boolean
+  heavy: boolean
+  providerId: string
+  providerModel: string
+  tokensPerSec: number
+  totalTokens: number | null
+  bestTokensPerSec: number
+  shift: boolean
+}
+
 interface PermissionRequest {
   requestId: string
   toolName: string
@@ -80,7 +96,6 @@ type Status = 'idle' | 'connecting' | 'running' | 'error'
 
 export default function AgentChat({ agent, sessionId, accentColor = '#00FFA7', externalLoading = false, externalError = null, onPendingCountChange, onNeedsAttention, workingDir: _workingDir, threadTicketId: _threadTicketId, onTurnCompleted }: AgentChatProps) {
   const { dismissBySession } = useNotifications()
-  const toast = useToast()
   const [messages, setMessages] = useState<ChatMessage[]>([])
   const [input, setInput] = useState('')
   const [status, setStatus] = useState<Status>('idle')
@@ -91,6 +106,7 @@ export default function AgentChat({ agent, sessionId, accentColor = '#00FFA7', e
   const [ticketId, setTicketId] = useState<string | null>(null)
   const [tickets, setTickets] = useState<{ id: string; title: string; status: string }[]>([])
   const [showTicketPicker, setShowTicketPicker] = useState(false)
+  const [showCreateTicketModal, setShowCreateTicketModal] = useState(false)
   const [allSkills, setAllSkills] = useState<SkillItem[]>([])
   const [slashPopup, setSlashPopup] = useState<SlashPopup>({
     open: false, query: '', items: [], selectedIndex: 0, anchorStart: -1,
@@ -99,6 +115,7 @@ export default function AgentChat({ agent, sessionId, accentColor = '#00FFA7', e
   const [editingUuid, setEditingUuid] = useState<string | null>(null)
   const [editingText, setEditingText] = useState('')
   const [copiedIndex, setCopiedIndex] = useState<number | null>(null)
+  const [hud, setHud] = useState<HudState | null>(null)
   const wsRef = useRef<WebSocket | null>(null)
   const scrollRef = useRef<HTMLDivElement>(null)
   const inputRef = useRef<HTMLTextAreaElement>(null)
@@ -107,6 +124,74 @@ export default function AgentChat({ agent, sessionId, accentColor = '#00FFA7', e
   const dragCounterRef = useRef(0)
   const subagentToolRef = useRef<{ toolName: string; toolUseId: string; input: string; parentToolUseId: string } | null>(null)
 
+  // Mic (terminal-ux-upgrade Sprint 6, moved here from the raw Terminal —
+  // this chat UI already has a working input row + attach button, so the
+  // mic reuses the same POST /api/transcribe proxy (Sprint 5) and drops the
+  // transcribed text into the same `input` state as typing would.
+  type MicState = 'idle' | 'recording' | 'transcribing'
+  const [micState, setMicState] = useState<MicState>('idle')
+  const [micError, setMicError] = useState<string | null>(null)
+  const mediaRecorderRef = useRef<MediaRecorder | null>(null)
+  const audioChunksRef = useRef<Blob[]>([])
+
+  useEffect(() => {
+    return () => {
+      try {
+        mediaRecorderRef.current?.stream.getTracks().forEach((t) => t.stop())
+      } catch {
+        // stream may already be stopped/released — nothing to clean up
+      }
+    }
+  }, [])
+
+  async function toggleRecording() {
+    if (micState === 'recording') {
+      mediaRecorderRef.current?.stop()
+      return
+    }
+    if (micState === 'transcribing') return
+    setMicError(null)
+    let stream: MediaStream
+    try {
+      stream = await navigator.mediaDevices.getUserMedia({ audio: true })
+    } catch (e) {
+      const name = e instanceof DOMException ? e.name : ''
+      setMicError(name === 'NotAllowedError' ? 'Permissão de microfone negada' : 'Não foi possível acessar o microfone')
+      return
+    }
+    const mr = new MediaRecorder(stream)
+    audioChunksRef.current = []
+    mr.ondataavailable = (e) => {
+      if (e.data.size > 0) audioChunksRef.current.push(e.data)
+    }
+    mr.onstop = async () => {
+      stream.getTracks().forEach((t) => t.stop())
+      setMicState('transcribing')
+      const blob = new Blob(audioChunksRef.current, { type: mr.mimeType || 'audio/webm' })
+      try {
+        const res = await fetch(`${TS_HTTP}/api/transcribe`, {
+          method: 'POST',
+          headers: { 'Content-Type': blob.type || 'audio/webm' },
+          body: blob,
+        })
+        const data = await res.json().catch(() => null)
+        if (!res.ok) throw new Error((data && data.error) || `HTTP ${res.status}`)
+        const text = ((data && data.text) || '').trim()
+        if (text) {
+          setInput((prev) => (prev ? `${prev} ${text}` : text))
+          inputRef.current?.focus()
+        }
+      } catch (e) {
+        setMicError(e instanceof Error ? e.message : 'Falha ao transcrever áudio')
+      } finally {
+        setMicState('idle')
+      }
+    }
+    mediaRecorderRef.current = mr
+    mr.start()
+    setMicState('recording')
+  }
+
   // Auto-dismiss global notifications when the user opens this session
   useEffect(() => {
     if (sessionId) {
@@ -136,29 +221,36 @@ export default function AgentChat({ agent, sessionId, accentColor = '#00FFA7', e
 
     setStatus('connecting')
     setErrorMsg(null)
+    setHud(null)
     let cancelled = false
-    let ws: WebSocket | null = null
+    let reconnectTimer: ReturnType<typeof setTimeout> | null = null
+    let reconnectAttempts = 0
+
+    // The server keeps the session alive when the socket drops — rejoining
+    // restores chat history, so a dead WS only needs a reconnect with
+    // capped exponential backoff instead of staying dead until remount.
+    function scheduleReconnect() {
+      if (cancelled || reconnectTimer) return
+      const delay = Math.min(1000 * 2 ** reconnectAttempts, 15000)
+      reconnectAttempts++
+      setStatus('connecting')
+      reconnectTimer = setTimeout(() => {
+        reconnectTimer = null
+        connect()
+      }, delay)
+    }
 
-    ;(async () => {
-      // 1) HTTP preflight — fails fast on ECONNREFUSED so we can show a real error
-      //    instead of hanging in 'connecting' forever (same pattern as AgentTerminal).
-      try {
-        const res = await fetch(`${TS_HTTP}/api/health`)
-        if (!res.ok) throw new Error(`HTTP ${res.status}`)
-      } catch {
-        if (cancelled) return
-        setStatus('error')
-        setErrorMsg(`Could not reach terminal-server at ${TS_HTTP}. Is it running?`)
-        return
-      }
+    function connect() {
       if (cancelled) return
 
-      // 2) Open WS
-      ws = new WebSocket(`${TS_WS}/ws`)
+      // Open WS
+      const ws = new WebSocket(`${TS_WS}/ws`)
       wsRef.current = ws
 
       ws.onopen = () => {
-        ws!.send(JSON.stringify({ type: 'join_session', sessionId }))
+        reconnectAttempts = 0
+        setErrorMsg(null)
+        ws.send(JSON.stringify({ type: 'join_session', sessionId }))
         setStatus('idle')
       }
 
@@ -273,26 +365,60 @@ export default function AgentChat({ agent, sessionId, accentColor = '#00FFA7', e
       }
 
       ws.onerror = () => {
-        if (cancelled) return
-        setStatus('error')
-        setErrorMsg('WebSocket error')
+        // onclose always follows onerror — reconnect is handled there.
       }
 
       ws.onclose = () => {
         if (pingRef.current) { clearInterval(pingRef.current); pingRef.current = null }
+        if (cancelled) return
+        scheduleReconnect()
       }
 
       pingRef.current = setInterval(() => {
-        if (ws!.readyState === WebSocket.OPEN) {
-          ws!.send(JSON.stringify({ type: 'ping' }))
+        if (ws.readyState === WebSocket.OPEN) {
+          ws.send(JSON.stringify({ type: 'ping' }))
         }
       }, 25000)
+    }
+
+    ;(async () => {
+      // HTTP preflight — fails fast on ECONNREFUSED so we can show a real error
+      // instead of hanging in 'connecting' forever (same pattern as AgentTerminal).
+      try {
+        const res = await fetch(`${TS_HTTP}/api/health`)
+        if (!res.ok) throw new Error(`HTTP ${res.status}`)
+      } catch {
+        if (cancelled) return
+        setStatus('error')
+        setErrorMsg(`Could not reach terminal-server at ${TS_HTTP}. Is it running?`)
+        return
+      }
+      if (cancelled) return
+      connect()
     })()
 
+    // Returning to the tab reconnects immediately instead of waiting out
+    // the backoff (browsers also throttle timers in hidden tabs, so the
+    // pending reconnect may not have fired while the tab was away).
+    const onVisible = () => {
+      if (document.hidden || cancelled) return
+      const ws = wsRef.current
+      if (ws && (ws.readyState === WebSocket.OPEN || ws.readyState === WebSocket.CONNECTING)) return
+      if (reconnectTimer) {
+        clearTimeout(reconnectTimer)
+        reconnectTimer = null
+      }
+      reconnectAttempts = 0
+      connect()
+    }
+    document.addEventListener('visibilitychange', onVisible)
+
     return () => {
       cancelled = true
+      document.removeEventListener('visibilitychange', onVisible)
+      if (reconnectTimer) { clearTimeout(reconnectTimer); reconnectTimer = null }
       if (pingRef.current) { clearInterval(pingRef.current); pingRef.current = null }
-      try { ws?.close() } catch {}
+      try { wsRef.current?.close() } catch {}
       wsRef.current = null
     }
   }, [sessionId])
@@ -346,28 +472,9 @@ export default function AgentChat({ agent, sessionId, accentColor = '#00FFA7', e
     }
   }, [sessionId])
 
-  const createAndBindTicket = useCallback(async () => {
-    const title = prompt('New ticket title:')
-    if (!title?.trim()) return
-    try {
-      const res = await fetch('/api/tickets', {
-        method: 'POST',
-        credentials: 'include',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({
-          title: title.trim(),
-          assignee_agent: agent,
-          priority: 'medium',
-          status: 'open',
-        }),
-      })
-      if (!res.ok) throw new Error('Failed to create')
-      const ticket = await res.json()
-      await bindTicket(ticket.id)
-    } catch (err: any) {
-      toast.error('Falha ao criar ticket', err?.message)
-    }
-  }, [agent, bindTicket])
+  const handleTicketCreated = useCallback(async (ticket: CreatedTicket) => {
+    await bindTicket(ticket.id)
+  }, [bindTicket])
 
   const respondToApproval = useCallback((requestId: string, approved: boolean) => {
     if (!wsRef.current || wsRef.current.readyState !== WebSocket.OPEN) return
@@ -384,6 +491,22 @@ export default function AgentChat({ agent, sessionId, accentColor = '#00FFA7', e
       setIsThinking(false)
     }
 
+    // HUD updates aren't chat messages — handled here (before the messages
+    // reducer below) instead of adding a case to that switch.
+    if (msg.type === 'hud_update') {
+      setHud({
+        busy: !!msg.busy,
+        heavy: !!msg.heavy,
+        providerId: msg.providerId || '',
+        providerModel: msg.providerModel || '',
+        tokensPerSec: typeof msg.tokensPerSec === 'number' ? msg.tokensPerSec : 0,
+        totalTokens: typeof msg.totalTokens === 'number' ? msg.totalTokens : null,
+        bestTokensPerSec: typeof msg.bestTokensPerSec === 'number' ? msg.bestTokensPerSec : 0,
+        shift: !!msg.shift,
+      })
+      return
+    }
+
     setMessages(prev => {
       const copy = [...prev]
 
@@ -902,116 +1025,134 @@ export default function AgentChat({ agent, sessionId, accentColor = '#00FFA7', e
   const inputDisabled = isConnecting || !!effectiveError
   const canSend = (input.trim().length > 0 || attachedFiles.length > 0) && !inputDisabled && status !== 'running'
 
-  return (
+  // Top-row badges (connection status, ticket pill, pending-approval) used to
+  // be `absolute top-3 ...` overlays fixed to the container's top edge — that
+  // worked when the HUD dashboard row didn't exist yet, but the HUD row is
+  // itself normal-flow content starting at that same top edge, so once `hud`
+  // arrives the badges render on top of the LCD readout (reported live
+  // 2026-07-15: "No ticket" pill overlapping the tok/s panel). Fix: render
+  // these as normal flex children INSIDE the HUD row (flex-wrap, so mobile
+  // reflows instead of clipping) whenever hud exists; keep the original
+  // absolute-overlay behavior only for the pre-HUD state, where there's no
+  // HUD row underneath to collide with.
+  const cornerStatusBadge = (isConnecting || effectiveError) ? (
     <div
-      className="flex flex-col h-full bg-[#0C111D] relative"
-      onDragEnter={handleDragEnter}
-      onDragLeave={handleDragLeave}
-      onDragOver={handleDragOver}
-      onDrop={handleDrop}
+      className={hud
+        ? 'relative flex flex-shrink-0 items-center gap-1.5 px-2 py-1 rounded-full border text-[10px] max-w-[220px] sm:max-w-[280px]'
+        : 'absolute top-3 right-3 z-40 flex items-center gap-1.5 px-2 py-1 rounded-full border text-[10px] max-w-[280px]'}
+      style={{
+        background: effectiveError ? '#ef444415' : '#F59E0B15',
+        borderColor: effectiveError ? '#ef444440' : '#F59E0B40',
+        color: effectiveError ? '#ef4444' : '#F59E0B',
+      }}
+      title={effectiveError || 'Connecting...'}
     >
-      {/* Corner status indicator */}
-      {(isConnecting || effectiveError) && (
+      <span
+        className={`w-1.5 h-1.5 rounded-full flex-shrink-0 ${effectiveError ? '' : 'animate-pulse'}`}
+        style={{ background: effectiveError ? '#ef4444' : '#F59E0B' }}
+      />
+      <span className="truncate">{effectiveError || 'Connecting...'}</span>
+    </div>
+  ) : null
+
+  const ticketPillBlock = sessionId ? (
+    <div className={hud ? 'relative flex-shrink-0' : 'absolute top-3 left-3 z-40'}>
+      <button
+        onClick={() => setShowTicketPicker(v => !v)}
+        className="flex items-center gap-1.5 px-2.5 py-1 rounded-full border text-[10px] transition-colors"
+        style={{
+          background: ticketId ? `${accentColor}10` : '#161b22',
+          borderColor: ticketId ? `${accentColor}30` : '#21262d',
+          color: ticketId ? accentColor : '#667085',
+        }}
+        title={ticketId ? `Ticket #${ticketId.slice(0, 8)} attached` : 'Attach to a ticket'}
+      >
+        <TicketIcon size={11} />
+        <span className="font-mono">
+          {ticketId ? `#${ticketId.slice(0, 8)}` : 'No ticket'}
+        </span>
+      </button>
+      {showTicketPicker && (
         <div
-          className="absolute top-3 right-3 z-40 flex items-center gap-1.5 px-2 py-1 rounded-full border text-[10px] max-w-[280px]"
-          style={{
-            background: effectiveError ? '#ef444415' : '#F59E0B15',
-            borderColor: effectiveError ? '#ef444440' : '#F59E0B40',
-            color: effectiveError ? '#ef4444' : '#F59E0B',
-          }}
-          title={effectiveError || 'Connecting...'}
+          className="absolute mt-1.5 left-0 w-72 rounded-lg border bg-[#161b22] shadow-xl z-50 max-h-80 overflow-y-auto"
+          style={{ borderColor: '#21262d' }}
         >
-          <span
-            className={`w-1.5 h-1.5 rounded-full ${effectiveError ? '' : 'animate-pulse'}`}
-            style={{ background: effectiveError ? '#ef4444' : '#F59E0B' }}
-          />
-          <span className="truncate">{effectiveError || 'Connecting...'}</span>
-        </div>
-      )}
-
-      {/* Ticket binding pill (Feature 1.3) */}
-      {sessionId && (
-        <div className="absolute top-3 left-3 z-40">
+          <div className="px-3 py-2 border-b border-[#21262d] text-[10px] text-[#667085] uppercase tracking-wider">
+            Attach to ticket
+          </div>
+          {ticketId && (
+            <button
+              onClick={() => bindTicket(null)}
+              className="w-full text-left px-3 py-2 text-xs text-red-400 hover:bg-white/5 border-b border-[#21262d] flex items-center gap-2"
+            >
+              <X size={12} /> Detach current ticket
+            </button>
+          )}
           <button
-            onClick={() => setShowTicketPicker(v => !v)}
-            className="flex items-center gap-1.5 px-2.5 py-1 rounded-full border text-[10px] transition-colors"
-            style={{
-              background: ticketId ? `${accentColor}10` : '#161b22',
-              borderColor: ticketId ? `${accentColor}30` : '#21262d',
-              color: ticketId ? accentColor : '#667085',
-            }}
-            title={ticketId ? `Ticket #${ticketId.slice(0, 8)} attached` : 'Attach to a ticket'}
+            onClick={() => { setShowTicketPicker(false); setShowCreateTicketModal(true) }}
+            className="w-full text-left px-3 py-2 text-xs text-[#e6edf3] hover:bg-white/5 border-b border-[#21262d] flex items-center gap-2"
+            style={{ color: accentColor }}
           >
-            <TicketIcon size={11} />
-            <span className="font-mono">
-              {ticketId ? `#${ticketId.slice(0, 8)}` : 'No ticket'}
-            </span>
+            <Plus size={12} /> Create new ticket
           </button>
-          {showTicketPicker && (
-            <div
-              className="absolute mt-1.5 left-0 w-72 rounded-lg border bg-[#161b22] shadow-xl z-50 max-h-80 overflow-y-auto"
-              style={{ borderColor: '#21262d' }}
-            >
-              <div className="px-3 py-2 border-b border-[#21262d] text-[10px] text-[#667085] uppercase tracking-wider">
-                Attach to ticket
-              </div>
-              {ticketId && (
-                <button
-                  onClick={() => bindTicket(null)}
-                  className="w-full text-left px-3 py-2 text-xs text-red-400 hover:bg-white/5 border-b border-[#21262d] flex items-center gap-2"
-                >
-                  <X size={12} /> Detach current ticket
-                </button>
-              )}
+          {tickets.length === 0 ? (
+            <div className="px-3 py-3 text-[11px] text-[#667085] italic">
+              No open tickets for @{agent}
+            </div>
+          ) : (
+            tickets.map(t => (
               <button
-                onClick={createAndBindTicket}
-                className="w-full text-left px-3 py-2 text-xs text-[#e6edf3] hover:bg-white/5 border-b border-[#21262d] flex items-center gap-2"
-                style={{ color: accentColor }}
+                key={t.id}
+                onClick={() => bindTicket(t.id)}
+                className="w-full text-left px-3 py-2 text-xs hover:bg-white/5 transition-colors flex items-start gap-2"
               >
-                <Plus size={12} /> Create new ticket
+                <span
+                  className="font-mono text-[10px] mt-0.5 shrink-0"
+                  style={{ color: t.id === ticketId ? accentColor : '#667085' }}
+                >
+                  #{t.id.slice(0, 6)}
+                </span>
+                <span className="text-[#e6edf3] truncate flex-1">{t.title}</span>
+                {t.id === ticketId && <CheckCircle2 size={11} style={{ color: accentColor }} />}
               </button>
-              {tickets.length === 0 ? (
-                <div className="px-3 py-3 text-[11px] text-[#667085] italic">
-                  No open tickets for @{agent}
-                </div>
-              ) : (
-                tickets.map(t => (
-                  <button
-                    key={t.id}
-                    onClick={() => bindTicket(t.id)}
-                    className="w-full text-left px-3 py-2 text-xs hover:bg-white/5 transition-colors flex items-start gap-2"
-                  >
-                    <span
-                      className="font-mono text-[10px] mt-0.5 shrink-0"
-                      style={{ color: t.id === ticketId ? accentColor : '#667085' }}
-                    >
-                      #{t.id.slice(0, 6)}
-                    </span>
-                    <span className="text-[#e6edf3] truncate flex-1">{t.title}</span>
-                    {t.id === ticketId && <CheckCircle2 size={11} style={{ color: accentColor }} />}
-                  </button>
-                ))
-              )}
-            </div>
+            ))
           )}
         </div>
       )}
+    </div>
+  ) : null
 
-      {/* Pending approval badge */}
-      {pendingApprovals.length > 0 && (
-        <div
-          className="absolute top-3 z-40 flex items-center gap-1.5 px-2.5 py-1 rounded-full border text-[10px] animate-pulse"
-          style={{
-            right: sessionId ? '12px' : '12px',
-            background: '#F59E0B15',
-            borderColor: '#F59E0B40',
-            color: '#F59E0B',
-          }}
-        >
-          <ShieldAlert size={11} />
-          <span>{pendingApprovals.length === 1 ? 'Awaiting your approval' : `${pendingApprovals.length} awaiting approval`}</span>
-        </div>
-      )}
+  const pendingApprovalBadge = pendingApprovals.length > 0 ? (
+    <div
+      className={hud
+        ? 'relative flex flex-shrink-0 items-center gap-1.5 px-2.5 py-1 rounded-full border text-[10px] animate-pulse'
+        : 'absolute top-3 z-40 flex items-center gap-1.5 px-2.5 py-1 rounded-full border text-[10px] animate-pulse'}
+      style={{
+        ...(hud ? {} : { right: '12px' }),
+        background: '#F59E0B15',
+        borderColor: '#F59E0B40',
+        color: '#F59E0B',
+      }}
+    >
+      <ShieldAlert size={11} />
+      <span>{pendingApprovals.length === 1 ? 'Awaiting your approval' : `${pendingApprovals.length} awaiting approval`}</span>
+    </div>
+  ) : null
+
+  return (
+    <div
+      className="flex flex-col h-full bg-[#0C111D] relative"
+      onDragEnter={handleDragEnter}
+      onDragLeave={handleDragLeave}
+      onDragOver={handleDragOver}
+      onDrop={handleDrop}
+    >
+      {/* Top badges — absolute-overlay only until the HUD row exists (see
+          cornerStatusBadge/ticketPillBlock/pendingApprovalBadge above);
+          once hud arrives they move inline into the HUD row below instead. */}
+      {!hud && cornerStatusBadge}
+      {!hud && ticketPillBlock}
+      {!hud && pendingApprovalBadge}
 
       {/* Drag-drop overlay */}
       {isDragging && (
@@ -1034,6 +1175,20 @@ export default function AgentChat({ agent, sessionId, accentColor = '#00FFA7', e
         </div>
       )}
 
+      {/* Dashboard row (car-panel HUD, same component/shape as the Terminal
+          — see TerminalHudPanel.tsx) — only appears once the backend has
+          sent at least one hud_update, same as the Terminal. */}
+      {hud && (
+        <div className="flex-shrink-0 flex flex-wrap items-center gap-2 px-4 py-1.5 border-b border-[#21262d] bg-[#0d1117]">
+          <TerminalHudPanel hud={hud} accentColor={accentColor} />
+          {ticketPillBlock}
+          <div className="ml-auto flex flex-wrap items-center justify-end gap-2">
+            {cornerStatusBadge}
+            {pendingApprovalBadge}
+          </div>
+        </div>
+      )}
+
       {/* Messages area */}
       <div ref={scrollRef} className="flex-1 overflow-y-auto px-6 py-6 space-y-5">
         {messages.length === 0 && (
@@ -1334,6 +1489,28 @@ export default function AgentChat({ agent, sessionId, accentColor = '#00FFA7', e
               }}
             />
 
+            {/* Mic button (Sprint 6) */}
+            <button
+              type="button"
+              onClick={toggleRecording}
+              disabled={micState === 'transcribing'}
+              title={
+                micState === 'recording' ? 'Parar gravação' :
+                micState === 'transcribing' ? 'Transcrevendo…' : 'Gravar áudio'
+              }
+              className={`flex-shrink-0 flex items-center justify-center w-7 h-7 rounded-lg transition-colors mb-0.5 ${
+                micState === 'recording'
+                  ? 'text-[#ef4444] bg-[#ef4444]/15'
+                  : micState === 'transcribing'
+                  ? 'cursor-wait text-[#4b5563]'
+                  : 'text-[#667085] hover:text-[#e6edf3] hover:bg-[#21262d]'
+              }`}
+            >
+              {micState === 'transcribing'
+                ? <Loader2 size={14} className="animate-spin" />
+                : <Mic size={14} />}
+            </button>
+
             {/* Textarea */}
             <textarea
               ref={inputRef}
@@ -1376,6 +1553,9 @@ export default function AgentChat({ agent, sessionId, accentColor = '#00FFA7', e
               </button>
             )}
           </div>
+          {micError && (
+            <div className="mt-1 text-[10px] text-[#ef4444]">{micError}</div>
+          )}
           </div>{/* end input row wrapper (relative) */}
         </div>
 
@@ -1392,6 +1572,14 @@ export default function AgentChat({ agent, sessionId, accentColor = '#00FFA7', e
           50% { opacity: 1; }
         }
       `}</style>
+
+      {showCreateTicketModal && (
+        <CreateTicketModal
+          onClose={() => setShowCreateTicketModal(false)}
+          onCreated={handleTicketCreated}
+          defaultAssigneeAgent={agent}
+        />
+      )}
     </div>
   )
 }
diff --git a/dashboard/frontend/src/components/AgentTerminal.tsx b/dashboard/frontend/src/components/AgentTerminal.tsx
index ef438a0ab..28ba68b5c 100644
--- a/dashboard/frontend/src/components/AgentTerminal.tsx
+++ b/dashboard/frontend/src/components/AgentTerminal.tsx
@@ -3,6 +3,7 @@ import { Terminal } from '@xterm/xterm'
 import { FitAddon } from '@xterm/addon-fit'
 import { WebLinksAddon } from '@xterm/addon-web-links'
 import '@xterm/xterm/css/xterm.css'
+import TerminalHudPanel from './TerminalHudPanel'
 
 interface AgentTerminalProps {
   agent: string
@@ -73,6 +74,25 @@ const CC_WEB_WS = override
 
 type Status = 'connecting' | 'ready' | 'starting' | 'running' | 'error' | 'exited'
 
+// Terminal HUD (see workspace/development/features/terminal-hud) — only
+// populated for opencode REPL sessions; claude/openclaude (pty-interactive)
+// sessions never send 'hud_update', so this stays null for them and the
+// semaphore/gear panel just doesn't render.
+interface HudState {
+  busy: boolean
+  heavy: boolean
+  providerId: string
+  providerModel: string
+  tokensPerSec: number
+  totalTokens: number | null
+  bestTokensPerSec: number
+  shift: boolean
+}
+
+function isEioMessage(message: unknown) {
+  return /\bEIO\b|read EIO|write EIO/i.test(String(message || ''))
+}
+
 export default function AgentTerminal({ agent, sessionId: externalSessionId, workingDir, accentColor = '#00FFA7' }: AgentTerminalProps) {
   const containerRef = useRef<HTMLDivElement>(null)
   const termRef = useRef<Terminal | null>(null)
@@ -82,6 +102,23 @@ export default function AgentTerminal({ agent, sessionId: externalSessionId, wor
   const pingRef = useRef<ReturnType<typeof setInterval> | null>(null)
   const [status, setStatus] = useState<Status>('connecting')
   const [errorMsg, setErrorMsg] = useState<string | null>(null)
+  const [hud, setHud] = useState<HudState | null>(null)
+  // opencode REPL sessions get a dedicated input bar below (see render) —
+  // xterm becomes output-only for them so typed keys never reach the
+  // onData forwarder below and the two input paths can't double-process a
+  // keystroke (that's what broke typing the first time this was tried).
+  // Ref because onData is registered once at mount and would otherwise
+  // only ever see the null `hud` from that first render (stale closure).
+  const isOpencodeRef = useRef(false)
+  const [inputValue, setInputValue] = useState('')
+  // Mirrors `status` for the onData closure below, which is registered once
+  // on mount and would otherwise only ever see the 'connecting' status from
+  // that first render (React state, not a ref, doesn't update in a stale
+  // closure).
+  const statusRef = useRef<Status>('connecting')
+  useEffect(() => {
+    statusRef.current = status
+  }, [status])
 
   // Mount xterm once
   useEffect(() => {
@@ -159,15 +196,35 @@ export default function AgentTerminal({ agent, sessionId: externalSessionId, wor
     // alternative.
     const AUTO_REPLY_RE = /^\x1b\[(\?|>)[0-9;]*[a-zA-Z]$|^\x1b\[[0-9;]*[nRct]$/
     term.onData((data) => {
-      // TEMP DEBUG: log every onData payload so we can see what's being
-      // sent to the pty on startup
-      const hex = Array.from(data).map((c) => (c as unknown as string).charCodeAt(0).toString(16).padStart(2, '0')).join('')
-      // eslint-disable-next-line no-console
-      console.log('[xterm onData]', data.length, 'B  hex:', hex, '  match:', AUTO_REPLY_RE.test(data))
+      // opencode sessions type into the dedicated input bar instead (see
+      // render) — xterm here is output-only for them.
+      if (isOpencodeRef.current) return
       if (AUTO_REPLY_RE.test(data)) return
-      if (wsRef.current?.readyState === WebSocket.OPEN) {
-        wsRef.current.send(JSON.stringify({ type: 'input', data }))
+      const ws = wsRef.current
+      if (!ws || ws.readyState !== WebSocket.OPEN) return
+
+      // The CLI process can die mid-session (provider crash, exit 1, etc.)
+      // without the user noticing beyond the small status badge. Forwarding
+      // raw keystrokes to a dead PTY used to just vanish — the server has
+      // nothing to write them to. Treat "user typed something" as an
+      // implicit restart request instead of a dead end.
+      if (statusRef.current === 'exited' || statusRef.current === 'error') {
+        statusRef.current = 'starting'
+        setStatus('starting')
+        term!.write('\r\n\x1b[33m[Restarting agent]\x1b[0m\r\n')
+        ws.send(JSON.stringify({
+          type: 'start_claude',
+          options: {
+            dangerouslySkipPermissions: true,
+            agent,
+            cols: term!.cols,
+            rows: term!.rows,
+          },
+        }))
+        return
       }
+
+      ws.send(JSON.stringify({ type: 'input', data }))
     })
 
     return () => {
@@ -184,14 +241,33 @@ export default function AgentTerminal({ agent, sessionId: externalSessionId, wor
     const term = termRef.current
     if (!term) return
 
+    let reconnectTimer: ReturnType<typeof setTimeout> | null = null
+    let reconnectAttempts = 0
+    let alreadyActive = false
+
+    // The server keeps the pty alive when the socket drops, so a dead WS
+    // only needs a rejoin — reconnect with capped exponential backoff
+    // instead of leaving the terminal dead until the component remounts.
+    function scheduleReconnect(sessionId: string) {
+      if (cancelled || reconnectTimer) return
+      const delay = Math.min(1000 * 2 ** reconnectAttempts, 15000)
+      reconnectAttempts++
+      setStatus('connecting')
+      reconnectTimer = setTimeout(() => {
+        reconnectTimer = null
+        connect(sessionId, true)
+      }, delay)
+    }
+
     async function run() {
       setStatus('connecting')
       setErrorMsg(null)
+      isOpencodeRef.current = false
+      setHud(null)
       term!.clear()
 
       // 1) Use provided sessionId or find-or-create for this agent
       let sessionId: string
-      let alreadyActive = false
       try {
         if (externalSessionId) {
           // Use the specific session provided by the parent (multi-tab mode)
@@ -223,11 +299,35 @@ export default function AgentTerminal({ agent, sessionId: externalSessionId, wor
       if (cancelled) return
       sessionIdRef.current = sessionId
 
+      connect(sessionId, false)
+    }
+
+    function connect(sessionId: string, isReconnect: boolean) {
+      if (cancelled) return
+
       // 2) Open WS
       const ws = new WebSocket(`${CC_WEB_WS}/ws`)
       wsRef.current = ws
 
+      const startClaude = () => {
+        setStatus('starting')
+        const fit = fitRef.current
+        if (fit) {
+          try { fit.fit() } catch {}
+        }
+        ws.send(JSON.stringify({
+          type: 'start_claude',
+          options: {
+            dangerouslySkipPermissions: true,
+            agent,
+            cols: term!.cols,
+            rows: term!.rows,
+          },
+        }))
+      }
+
       ws.onopen = () => {
+        setErrorMsg(null)
         ws.send(JSON.stringify({ type: 'join_session', sessionId }))
       }
 
@@ -238,12 +338,18 @@ export default function AgentTerminal({ agent, sessionId: externalSessionId, wor
 
         switch (msg.type) {
           case 'session_joined': {
+            reconnectAttempts = 0
+            // On reconnect the server replays the whole buffer — clear
+            // first so it doesn't duplicate what's already on screen.
+            if (isReconnect) term!.clear()
             // Replay any buffered output
             if (Array.isArray(msg.outputBuffer)) {
               msg.outputBuffer.forEach((chunk: string) => term!.write(chunk))
             }
-            // If an agent is already running in this session, just attach
-            if (msg.active || alreadyActive) {
+            // If an agent is already running in this session, just attach.
+            // alreadyActive is only trustworthy on the first join — after a
+            // reconnect the process may have died while we were away.
+            if (msg.active || (!isReconnect && alreadyActive)) {
               setStatus('running')
               // Nudge a resize so the pty matches the current terminal size
               const fit = fitRef.current
@@ -251,6 +357,12 @@ export default function AgentTerminal({ agent, sessionId: externalSessionId, wor
                 try { fit.fit() } catch {}
                 ws.send(JSON.stringify({ type: 'resize', cols: term!.cols, rows: term!.rows }))
               }
+            } else if (isReconnect) {
+              // Process ended while we were disconnected. Restart it in-place
+              // so a transient proxy/browser socket drop doesn't force a full
+              // page refresh to get the agent moving again.
+              term!.write('\r\n\x1b[33m[Reconnected - restarting agent]\x1b[0m\r\n')
+              startClaude()
             } else {
               // Start Claude with --agent <agent>
               // Pass cols/rows up-front so the pty is born at the right
@@ -258,20 +370,7 @@ export default function AgentTerminal({ agent, sessionId: externalSessionId, wor
               // queries during startup can echo back into the prompt as
               // literal text ("0?1;2c0?1;2c") before the first resize
               // message arrives.
-              setStatus('starting')
-              const fit = fitRef.current
-              if (fit) {
-                try { fit.fit() } catch {}
-              }
-              ws.send(JSON.stringify({
-                type: 'start_claude',
-                options: {
-                  dangerouslySkipPermissions: true,
-                  agent,
-                  cols: term!.cols,
-                  rows: term!.rows,
-                },
-              }))
+              startClaude()
             }
             break
           }
@@ -290,23 +389,51 @@ export default function AgentTerminal({ agent, sessionId: externalSessionId, wor
             }
             break
           case 'exit':
-            setStatus('exited')
-            term!.write(`\r\n\x1b[33m[Process exited${msg.code != null ? ` with code ${msg.code}` : ''}]\x1b[0m\r\n`)
+            // EIO is no longer sent as a signal from the server — the
+            // server now forwards signal: null for PTY EIO events. But
+            // keep backward-compat: if an old server still sends 'EIO',
+            // treat it as a normal exit (not an error that restarts).
+            if (msg.signal === 'EIO') {
+              setStatus('exited')
+              term!.write(`\r\n\x1b[33m[Process exited${msg.code != null ? ` with code ${msg.code}` : ''}]\x1b[0m\r\n`)
+            } else {
+              setStatus('exited')
+              term!.write(`\r\n\x1b[33m[Process exited${msg.code != null ? ` with code ${msg.code}` : ''}]\x1b[0m\r\n`)
+            }
             break
           case 'error':
-            setStatus('error')
-            setErrorMsg(msg.message || 'Unknown error')
-            term!.write(`\r\n\x1b[31m[Error] ${msg.message || ''}\x1b[0m\r\n`)
+            // EIO no longer reaches here — the server converts it to a
+            // normal 'exit' event. If it somehow still arrives, treat it
+            // as an exit, not a retryable error.
+            if (isEioMessage(msg.message)) {
+              setStatus('exited')
+              term!.write('\r\n\x1b[33m[Process exited]\x1b[0m\r\n')
+            } else {
+              setStatus('error')
+              setErrorMsg(msg.message || 'Unknown error')
+              term!.write(`\r\n\x1b[31m[Error] ${msg.message || ''}\x1b[0m\r\n`)
+            }
             break
           case 'pong':
             break
+          case 'hud_update':
+            isOpencodeRef.current = true
+            setHud({
+              busy: !!msg.busy,
+              heavy: !!msg.heavy,
+              providerId: msg.providerId || '',
+              providerModel: msg.providerModel || '',
+              tokensPerSec: typeof msg.tokensPerSec === 'number' ? msg.tokensPerSec : 0,
+              totalTokens: typeof msg.totalTokens === 'number' ? msg.totalTokens : null,
+              bestTokensPerSec: typeof msg.bestTokensPerSec === 'number' ? msg.bestTokensPerSec : 0,
+              shift: !!msg.shift,
+            })
+            break
         }
       }
 
       ws.onerror = () => {
-        if (cancelled) return
-        setStatus('error')
-        setErrorMsg('WebSocket error')
+        // onclose always follows onerror — reconnect is handled there.
       }
 
       ws.onclose = () => {
@@ -314,6 +441,8 @@ export default function AgentTerminal({ agent, sessionId: externalSessionId, wor
           clearInterval(pingRef.current)
           pingRef.current = null
         }
+        if (cancelled) return
+        scheduleReconnect(sessionId)
       }
 
       // Keepalive
@@ -324,10 +453,33 @@ export default function AgentTerminal({ agent, sessionId: externalSessionId, wor
       }, 25000)
     }
 
+    // Returning to the tab reconnects immediately instead of waiting out
+    // the backoff (browsers also throttle timers in hidden tabs, so the
+    // pending reconnect may not have fired while the tab was away).
+    const onVisible = () => {
+      if (document.hidden || cancelled) return
+      const sessionId = sessionIdRef.current
+      if (!sessionId) return
+      const ws = wsRef.current
+      if (ws && (ws.readyState === WebSocket.OPEN || ws.readyState === WebSocket.CONNECTING)) return
+      if (reconnectTimer) {
+        clearTimeout(reconnectTimer)
+        reconnectTimer = null
+      }
+      reconnectAttempts = 0
+      connect(sessionId, true)
+    }
+    document.addEventListener('visibilitychange', onVisible)
+
     run()
 
     return () => {
       cancelled = true
+      document.removeEventListener('visibilitychange', onVisible)
+      if (reconnectTimer) {
+        clearTimeout(reconnectTimer)
+        reconnectTimer = null
+      }
       if (pingRef.current) {
         clearInterval(pingRef.current)
         pingRef.current = null
@@ -383,8 +535,91 @@ export default function AgentTerminal({ agent, sessionId: externalSessionId, wor
         )}
       </div>
 
+      {/* Dashboard row (car-panel HUD, Sprint 3) — own row instead of
+          crammed into the 32px status bar above, so the LCD readout has
+          real width to work with instead of truncating provider/model. */}
+      {hud && (
+        <div className="flex-shrink-0 flex items-center gap-2 px-4 py-1.5 border-b border-[#21262d] bg-[#0d1117]">
+          <TerminalHudPanel hud={hud} accentColor={accentColor} />
+
+          {/* Semaphore (Sprint 2): 3 fixed lights, only the active one
+              lit — green=waiting for a prompt, yellow=working,
+              red=last completed turn was heavy (>20k tokens). Priority
+              red > yellow > green when both could apply (a heavy turn
+              just finished right as a new one starts). Always visible,
+              including on mobile. */}
+          <div className="ml-auto flex items-center gap-1" title={
+            hud.heavy ? 'contexto/tokens grande no último turno'
+              : hud.busy ? 'trabalhando…'
+              : 'esperando prompt'
+          }>
+            {(['#22c55e', '#eab308', '#ef4444'] as const).map((color, i) => {
+              const activeIdx = hud.heavy ? 2 : hud.busy ? 1 : 0
+              const isActive = i === activeIdx
+              return (
+                <span
+                  key={color}
+                  className="inline-block h-1.5 w-1.5 rounded-full transition-opacity duration-200"
+                  style={{
+                    backgroundColor: color,
+                    opacity: isActive ? 1 : 0.18,
+                    boxShadow: isActive ? `0 0 5px ${color}aa` : 'none',
+                  }}
+                />
+              )
+            })}
+          </div>
+        </div>
+      )}
+
       {/* xterm */}
       <div ref={containerRef} className="flex-1 min-h-0 px-4 py-3 bg-[#0C111D]" />
+
+      {/* Dedicated input bar (opencode sessions only, i.e. hud !== null) —
+          keeps what you type visually separate from the AI's streamed
+          response instead of both sharing the same scrollback, which read
+          as confusing (couldn't tell where your line ended and the reply
+          began). xterm above is output-only for these sessions — see the
+          isOpencodeRef guard in the onData handler. */}
+      {hud && (
+        <form
+          onSubmit={(e) => {
+            e.preventDefault()
+            const text = inputValue.trim()
+            if (!text) return
+            const ws = wsRef.current
+            if (!ws || ws.readyState !== WebSocket.OPEN) return
+            // One WS message with the whole line + newline — the server's
+            // opencode keystroke handler iterates char-by-char and submits
+            // on \n either way, so this is equivalent to typing it out.
+            ws.send(JSON.stringify({ type: 'input', data: text + '\n' }))
+            setInputValue('')
+          }}
+          className="flex-shrink-0 flex items-end gap-2 border-t border-[#21262d] bg-[#0d1117] px-3 py-2"
+        >
+          <textarea
+            value={inputValue}
+            onChange={(e) => setInputValue(e.target.value)}
+            onKeyDown={(e) => {
+              if (e.key === 'Enter' && !e.shiftKey) {
+                e.preventDefault()
+                e.currentTarget.form?.requestSubmit()
+              }
+            }}
+            placeholder="Digite sua mensagem… (Shift+Enter para nova linha)"
+            rows={1}
+            className="flex-1 resize-none rounded-md border border-[#21262d] bg-[#0a0e14] px-3 py-1.5 text-[13px] leading-normal text-[#e6edf3] placeholder:text-[#4b5563] outline-none focus:border-[#3a4256]"
+          />
+          <button
+            type="submit"
+            disabled={!inputValue.trim() || hud.busy}
+            className="flex-shrink-0 rounded-md px-3 py-1.5 text-[12px] font-medium transition-opacity disabled:opacity-40"
+            style={{ background: accentColor, color: '#04120a' }}
+          >
+            Enviar
+          </button>
+        </form>
+      )}
     </div>
   )
 }
diff --git a/dashboard/frontend/src/components/CreateProjectModal.tsx b/dashboard/frontend/src/components/CreateProjectModal.tsx
new file mode 100644
index 000000000..8f8389434
--- /dev/null
+++ b/dashboard/frontend/src/components/CreateProjectModal.tsx
@@ -0,0 +1,275 @@
+import { useEffect, useRef, useState } from 'react'
+import { FolderKanban, X } from 'lucide-react'
+import { api } from '../lib/api'
+
+export interface CreatedProject {
+  id: number
+  slug: string
+  title: string
+  mission_id: number | null
+  [key: string]: unknown
+}
+
+interface MissionOption {
+  id: number
+  title: string
+}
+
+function Field({ label, children }: { label: string; children: React.ReactNode }) {
+  return (
+    <div className="mb-3.5">
+      <label className="block text-[11px] font-ticket-mono uppercase tracking-wider text-[#667085] mb-1.5">
+        {label}
+      </label>
+      {children}
+    </div>
+  )
+}
+
+const inputClass =
+  'w-full bg-[#0C111D] border border-[#21262d] rounded-lg px-3 py-2 text-sm text-[#e6edf3] placeholder-[#667085] focus:outline-none focus:border-[#00FFA7]/50 transition-colors'
+
+function slugify(value: string): string {
+  return value
+    .toLowerCase()
+    .trim()
+    .replace(/[^a-z0-9]+/g, '-')
+    .replace(/^-+|-+$/g, '')
+}
+
+interface CreateProjectModalProps {
+  onClose: () => void
+  onCreated: (project: CreatedProject) => void
+  // Pre-select and lock a mission — used when opened from inside a specific
+  // Mission's card in Goals.tsx. Left undefined when opened from a
+  // mission-agnostic entry point (e.g. the Projects overview page).
+  defaultMissionId?: number
+}
+
+export default function CreateProjectModal({ onClose, onCreated, defaultMissionId }: CreateProjectModalProps) {
+  const [missions, setMissions] = useState<MissionOption[]>([])
+  const [missionsLoading, setMissionsLoading] = useState(defaultMissionId === undefined)
+  const [missionId, setMissionId] = useState<string>(defaultMissionId ? String(defaultMissionId) : '')
+  const [creatingMission, setCreatingMission] = useState(false)
+  const [newMissionTitle, setNewMissionTitle] = useState('')
+
+  const [slug, setSlug] = useState('')
+  const [slugTouched, setSlugTouched] = useState(false)
+  const [title, setTitle] = useState('')
+  const [description, setDescription] = useState('')
+  const [workspaceFolderPath, setWorkspaceFolderPath] = useState('')
+  const [status, setStatus] = useState('active')
+
+  const [submitting, setSubmitting] = useState(false)
+  const [error, setError] = useState('')
+  const titleRef = useRef<HTMLInputElement>(null)
+
+  useEffect(() => {
+    titleRef.current?.focus()
+    const handler = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') onClose()
+    }
+    document.addEventListener('keydown', handler)
+    return () => document.removeEventListener('keydown', handler)
+  }, [onClose])
+
+  useEffect(() => {
+    if (defaultMissionId !== undefined) return
+    let cancelled = false
+    ;(async () => {
+      try {
+        const data = await api.get('/missions')
+        if (!cancelled) setMissions((data || []).map((m: any) => ({ id: m.id, title: m.title })))
+      } catch {
+        // Non-fatal — the picker just stays empty; user can still create a
+        // mission inline below, or leave the project unassigned.
+      } finally {
+        if (!cancelled) setMissionsLoading(false)
+      }
+    })()
+    return () => { cancelled = true }
+  }, [defaultMissionId])
+
+  const handleTitleChange = (value: string) => {
+    setTitle(value)
+    if (!slugTouched) setSlug(slugify(value))
+  }
+
+  const handleSubmit = async () => {
+    setError('')
+    if (!title.trim()) { setError('Título é obrigatório'); return }
+    if (!slug.trim()) { setError('Slug é obrigatório'); return }
+    if (creatingMission && !newMissionTitle.trim()) { setError('Dê um título pra Missão nova'); return }
+
+    setSubmitting(true)
+    try {
+      let resolvedMissionId: number | null = missionId ? Number(missionId) : null
+
+      if (creatingMission) {
+        const missionSlug = slugify(newMissionTitle)
+        const mission = await api.post('/missions', { slug: missionSlug, title: newMissionTitle.trim() })
+        resolvedMissionId = mission.id
+      }
+
+      const project = await api.post('/projects', {
+        slug: slug.trim(),
+        title: title.trim(),
+        description: description.trim() || undefined,
+        workspace_folder_path: workspaceFolderPath.trim() || undefined,
+        mission_id: resolvedMissionId,
+        status,
+      })
+      onCreated(project as CreatedProject)
+      onClose()
+    } catch (e: any) {
+      setError(e?.message || 'Falha ao criar projeto')
+    } finally {
+      setSubmitting(false)
+    }
+  }
+
+  return (
+    <div
+      className="fixed inset-0 bg-black/60 z-50 flex items-center justify-center p-4"
+      onClick={onClose}
+      role="presentation"
+    >
+      <div
+        role="dialog"
+        aria-modal="true"
+        aria-labelledby="create-project-title"
+        onClick={(e) => e.stopPropagation()}
+        className="dialog-enter bg-[#161b22] border border-[#21262d] rounded-xl w-full max-w-lg shadow-2xl"
+      >
+        <div className="flex items-center justify-between px-6 py-4 border-b border-[#21262d]">
+          <div className="flex items-center gap-2.5">
+            <div className="w-8 h-8 rounded-lg bg-[#00FFA7]/10 border border-[#00FFA7]/25 flex items-center justify-center shrink-0">
+              <FolderKanban size={15} className="text-[#00FFA7]" />
+            </div>
+            <h3 id="create-project-title" className="font-display text-[15px] font-semibold text-white tracking-tight">
+              Novo projeto
+            </h3>
+          </div>
+          <button onClick={onClose} className="text-[#667085] hover:text-white transition-colors">
+            <X size={16} />
+          </button>
+        </div>
+
+        <div className="px-6 py-5">
+          {error && (
+            <div className="mb-3.5 px-3 py-2 bg-red-500/10 border border-red-500/20 rounded-lg text-xs text-red-400">
+              {error}
+            </div>
+          )}
+
+          <Field label="Título">
+            <input
+              ref={titleRef}
+              value={title}
+              onChange={(e) => handleTitleChange(e.target.value)}
+              placeholder="Evo AI"
+              className={inputClass}
+            />
+          </Field>
+
+          <Field label="Slug (identificador único)">
+            <input
+              value={slug}
+              onChange={(e) => { setSlug(e.target.value); setSlugTouched(true) }}
+              placeholder="evo-ai"
+              className={inputClass}
+            />
+          </Field>
+
+          <Field label="Descrição (opcional)">
+            <input
+              value={description}
+              onChange={(e) => setDescription(e.target.value)}
+              placeholder="Do que se trata este projeto"
+              className={inputClass}
+            />
+          </Field>
+
+          <Field label="Pasta do workspace (opcional)">
+            <input
+              value={workspaceFolderPath}
+              onChange={(e) => setWorkspaceFolderPath(e.target.value)}
+              placeholder="workspace/development/features/evo-ai"
+              className={inputClass}
+            />
+            <p className="text-[10px] text-[#667085] mt-1.5">
+              Se preenchido, essa pasta é indexada no MemPalace como uma Room
+              (a Missão vira a Wing) pra busca semântica.
+            </p>
+          </Field>
+
+          {defaultMissionId === undefined && (
+            <Field label="Missão">
+              {creatingMission ? (
+                <div className="flex gap-2">
+                  <input
+                    value={newMissionTitle}
+                    onChange={(e) => setNewMissionTitle(e.target.value)}
+                    placeholder="Título da nova Missão"
+                    className={inputClass}
+                  />
+                  <button
+                    onClick={() => { setCreatingMission(false); setNewMissionTitle('') }}
+                    className="px-3 text-xs text-[#667085] hover:text-white transition-colors shrink-0"
+                  >
+                    Cancelar
+                  </button>
+                </div>
+              ) : (
+                <div className="flex gap-2">
+                  <select
+                    value={missionId}
+                    onChange={(e) => setMissionId(e.target.value)}
+                    disabled={missionsLoading}
+                    className={inputClass}
+                  >
+                    <option value="">— sem missão —</option>
+                    {missions.map((m) => (
+                      <option key={m.id} value={m.id}>{m.title}</option>
+                    ))}
+                  </select>
+                  <button
+                    onClick={() => setCreatingMission(true)}
+                    className="px-3 text-xs text-[#00FFA7] hover:underline shrink-0 whitespace-nowrap"
+                  >
+                    + Nova
+                  </button>
+                </div>
+              )}
+              {missions.length === 0 && !missionsLoading && !creatingMission && (
+                <p className="text-[10px] text-[#667085] mt-1.5">
+                  Nenhuma Missão ainda — pode criar o projeto sem uma, ou clicar em "+ Nova".
+                </p>
+              )}
+            </Field>
+          )}
+
+          <Field label="Status">
+            <select value={status} onChange={(e) => setStatus(e.target.value)} className={inputClass}>
+              <option value="active">Ativo</option>
+              <option value="on-hold">Em espera</option>
+            </select>
+          </Field>
+        </div>
+
+        <div className="flex justify-end gap-2 px-6 py-4 border-t border-[#21262d]">
+          <button onClick={onClose} className="px-4 py-2 text-sm text-[#667085] hover:text-white transition-colors">
+            Cancelar
+          </button>
+          <button
+            onClick={handleSubmit}
+            disabled={submitting}
+            className="px-4 py-2 text-sm bg-[#00FFA7] text-black font-semibold rounded-lg hover:bg-[#00FFA7]/90 transition-colors disabled:opacity-50"
+          >
+            {submitting ? 'Criando...' : 'Criar'}
+          </button>
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/dashboard/frontend/src/components/CreateTicketModal.tsx b/dashboard/frontend/src/components/CreateTicketModal.tsx
new file mode 100644
index 000000000..118164cda
--- /dev/null
+++ b/dashboard/frontend/src/components/CreateTicketModal.tsx
@@ -0,0 +1,221 @@
+import { useEffect, useRef, useState } from 'react'
+import { ArrowDown, ArrowUp, Minus, Ticket as TicketIcon, X } from 'lucide-react'
+import { api } from '../lib/api'
+import { getAllAgentSlugs } from '../lib/agent-meta'
+
+export type TicketPriority = 'urgent' | 'high' | 'medium' | 'low'
+
+// Loose shape matching the backend's Ticket.to_dict() — callers (Kanban,
+// AgentChat) cast to their own local, more specific ticket type as needed.
+export interface CreatedTicket {
+  id: string
+  title: string
+  description: string | null
+  status: string
+  priority: TicketPriority
+  assignee_agent: string | null
+  goal_id: number | null
+  [key: string]: unknown
+}
+
+interface GoalOption {
+  id: number
+  title: string
+}
+
+const PRIORITY_OPTIONS: Array<{ value: TicketPriority; label: string; icon: React.ReactNode }> = [
+  { value: 'urgent', label: 'Urgente', icon: <ArrowUp size={12} /> },
+  { value: 'high', label: 'Alta', icon: <ArrowUp size={12} className="opacity-70" /> },
+  { value: 'medium', label: 'Média', icon: <Minus size={12} /> },
+  { value: 'low', label: 'Baixa', icon: <ArrowDown size={12} /> },
+]
+
+function Field({ label, children }: { label: string; children: React.ReactNode }) {
+  return (
+    <div className="mb-3.5">
+      <label className="block text-[11px] font-ticket-mono uppercase tracking-wider text-[#667085] mb-1.5">
+        {label}
+      </label>
+      {children}
+    </div>
+  )
+}
+
+const inputClass =
+  'w-full bg-[#0C111D] border border-[#21262d] rounded-lg px-3 py-2 text-sm text-[#e6edf3] placeholder-[#667085] focus:outline-none focus:border-[#00FFA7]/50 transition-colors'
+
+interface CreateTicketModalProps {
+  onClose: () => void
+  onCreated: (ticket: CreatedTicket) => void
+  defaultAssigneeAgent?: string
+}
+
+export default function CreateTicketModal({ onClose, onCreated, defaultAssigneeAgent }: CreateTicketModalProps) {
+  const [title, setTitle] = useState('')
+  const [description, setDescription] = useState('')
+  const [priority, setPriority] = useState<TicketPriority>('medium')
+  const [assigneeAgent, setAssigneeAgent] = useState(defaultAssigneeAgent || '')
+  const [goalId, setGoalId] = useState('')
+  const [goals, setGoals] = useState<GoalOption[]>([])
+  const [titleMissing, setTitleMissing] = useState(false)
+  const [submitting, setSubmitting] = useState(false)
+  const [error, setError] = useState('')
+
+  const titleRef = useRef<HTMLInputElement>(null)
+  const agents = getAllAgentSlugs()
+
+  useEffect(() => {
+    titleRef.current?.focus()
+  }, [])
+
+  useEffect(() => {
+    // OQ1 (resolved): goal picker lists active goals only, to keep it short.
+    api.get('/goals?status=active').then(setGoals).catch(() => setGoals([]))
+  }, [])
+
+  useEffect(() => {
+    const handler = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') onClose()
+    }
+    document.addEventListener('keydown', handler)
+    return () => document.removeEventListener('keydown', handler)
+  }, [onClose])
+
+  const handleSubmit = async () => {
+    const trimmed = title.trim()
+    if (!trimmed) {
+      setTitleMissing(true)
+      titleRef.current?.focus()
+      return
+    }
+    setSubmitting(true)
+    setError('')
+    try {
+      const ticket = await api.post('/tickets', {
+        title: trimmed,
+        description: description.trim() || null,
+        priority,
+        assignee_agent: assigneeAgent || null,
+        goal_id: goalId ? Number(goalId) : null,
+      })
+      onCreated(ticket)
+      onClose()
+    } catch (err: any) {
+      setError(err?.message || 'Falha ao criar ticket')
+    } finally {
+      setSubmitting(false)
+    }
+  }
+
+  return (
+    <div
+      className="fixed inset-0 bg-black/60 z-50 flex items-center justify-center p-4"
+      onClick={onClose}
+      role="presentation"
+    >
+      <div
+        role="dialog"
+        aria-modal="true"
+        aria-labelledby="create-ticket-title"
+        onClick={(e) => e.stopPropagation()}
+        className="dialog-enter bg-[#161b22] border border-[#21262d] rounded-xl w-full max-w-lg shadow-2xl"
+      >
+        <div className="flex items-center justify-between px-6 py-4 border-b border-[#21262d]">
+          <div className="flex items-center gap-2.5">
+            <div className="w-8 h-8 rounded-lg bg-[#00FFA7]/10 border border-[#00FFA7]/25 flex items-center justify-center shrink-0">
+              <TicketIcon size={15} className="text-[#00FFA7]" />
+            </div>
+            <h3 id="create-ticket-title" className="font-display text-[15px] font-semibold text-white tracking-tight">
+              Novo ticket
+            </h3>
+          </div>
+          <button onClick={onClose} className="text-[#667085] hover:text-white transition-colors">
+            <X size={16} />
+          </button>
+        </div>
+
+        <div className="px-6 py-5">
+          {error && (
+            <div className="mb-3.5 px-3 py-2 bg-red-500/10 border border-red-500/20 rounded-lg text-xs text-red-400">
+              {error}
+            </div>
+          )}
+
+          <Field label="Título">
+            <input
+              ref={titleRef}
+              value={title}
+              onChange={(e) => { setTitle(e.target.value); if (titleMissing) setTitleMissing(false) }}
+              placeholder="O que precisa ser feito?"
+              className={`${inputClass} ${titleMissing ? 'border-red-500/60 focus:border-red-500/60' : ''}`}
+              aria-invalid={titleMissing}
+            />
+            {titleMissing && <p className="mt-1 text-[11px] text-red-400">Título é obrigatório.</p>}
+          </Field>
+
+          <Field label="Descrição (opcional)">
+            <textarea
+              value={description}
+              onChange={(e) => setDescription(e.target.value)}
+              placeholder="Contexto adicional, critérios de aceite, links..."
+              rows={3}
+              className={`${inputClass} resize-none`}
+            />
+          </Field>
+
+          <div className="grid grid-cols-2 gap-3">
+            <Field label="Prioridade">
+              <select
+                value={priority}
+                onChange={(e) => setPriority(e.target.value as TicketPriority)}
+                className={inputClass}
+              >
+                {PRIORITY_OPTIONS.map((p) => (
+                  <option key={p.value} value={p.value}>{p.label}</option>
+                ))}
+              </select>
+            </Field>
+            <Field label="Responsável">
+              <select
+                value={assigneeAgent}
+                onChange={(e) => setAssigneeAgent(e.target.value)}
+                className={inputClass}
+              >
+                <option value="">Sem responsável</option>
+                {agents.map((a) => (
+                  <option key={a.slug} value={a.slug}>{a.label} ({a.slug})</option>
+                ))}
+              </select>
+            </Field>
+          </div>
+
+          <Field label="Vincular a uma meta (opcional)">
+            <select
+              value={goalId}
+              onChange={(e) => setGoalId(e.target.value)}
+              className={inputClass}
+            >
+              <option value="">Nenhuma</option>
+              {goals.map((g) => (
+                <option key={g.id} value={g.id}>{g.title}</option>
+              ))}
+            </select>
+          </Field>
+
+          <div className="flex justify-end gap-2 mt-2">
+            <button onClick={onClose} className="px-4 py-2 text-sm text-[#667085] hover:text-white transition-colors">
+              Cancelar
+            </button>
+            <button
+              onClick={handleSubmit}
+              disabled={submitting}
+              className="px-4 py-2 text-sm bg-[#00FFA7] text-black font-semibold rounded-lg hover:bg-[#00FFA7]/90 transition-colors disabled:opacity-50"
+            >
+              {submitting ? 'Criando...' : 'Criar ticket'}
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/dashboard/frontend/src/components/PluginInstallModal.tsx b/dashboard/frontend/src/components/PluginInstallModal.tsx
index 834e3708e..ccc327039 100644
--- a/dashboard/frontend/src/components/PluginInstallModal.tsx
+++ b/dashboard/frontend/src/components/PluginInstallModal.tsx
@@ -7,7 +7,10 @@ import SecurityScanSection, { type ScanVerdict, type ScanResult } from './Securi
 interface PreviewResult {
   manifest: Record<string, unknown>
   warnings: string[]
-  conflicts?: Record<string, unknown>
+  // Backend returns conflicts as a list of human-readable strings (not a dict).
+  // See plugin_loader.PluginInstaller.preview() — each blocker is a string
+  // appended to result["conflicts"].
+  conflicts?: string[]
 }
 
 interface Props {
@@ -140,7 +143,9 @@ export default function PluginInstallModal({ onClose, onInstalled }: Props) {
 
   const manifest = preview?.manifest ?? {}
   const warnings = preview?.warnings ?? []
-  const conflicts = preview?.conflicts ? Object.keys(preview.conflicts) : []
+  const conflicts: string[] = Array.isArray(preview?.conflicts)
+    ? (preview!.conflicts as string[]).filter((c): c is string => typeof c === 'string' && c.length > 0)
+    : []
 
   // Install button is amber for WARN, normal green otherwise
   const installBtnClass =
@@ -338,7 +343,11 @@ export default function PluginInstallModal({ onClose, onInstalled }: Props) {
                   <p className="text-xs font-medium text-red-400 mb-1 flex items-center gap-1.5">
                     <AlertTriangle size={12} /> {t('plugins.conflicts')}
                   </p>
-                  <p className="text-xs text-red-300/80">{conflicts.join(', ')}</p>
+                  <ul className="space-y-0.5 list-disc list-inside">
+                    {conflicts.map((c, i) => (
+                      <li key={i} className="text-xs text-red-300/80">{c}</li>
+                    ))}
+                  </ul>
                 </div>
               )}
 
diff --git a/dashboard/frontend/src/components/PluginUninstall.tsx b/dashboard/frontend/src/components/PluginUninstall.tsx
new file mode 100644
index 000000000..181a1f611
--- /dev/null
+++ b/dashboard/frontend/src/components/PluginUninstall.tsx
@@ -0,0 +1,320 @@
+/**
+ * PluginUninstall — B3 safe_uninstall 3-step wizard.
+ *
+ * Shown instead of window.confirm() when the plugin manifest declares
+ * safe_uninstall.enabled: true.
+ *
+ * Step 1 — Regulatory reason + "I accept responsibility" checkbox.
+ * Step 2 — ZIP password input (Vault B3.S5: AES-256 export encryption).
+ * Step 3 — Typed confirmation phrase + Uninstall button.
+ *
+ * For plugins without safe_uninstall (or safe_uninstall.enabled: false),
+ * render nothing — the caller falls back to the legacy window.confirm() path.
+ *
+ * Force-uninstall banner: if EVONEXUS_ALLOW_FORCE_UNINSTALL=1 is detected
+ * in the API response, a persistent orange alert is shown.
+ */
+
+import { useState } from 'react'
+import { AlertTriangle, Lock, Shield, Trash2, X } from 'lucide-react'
+import { api } from '../lib/api'
+
+export interface SafeUninstallSpec {
+  enabled?: boolean
+  block_uninstall?: boolean
+  reason?: string
+  user_confirmation?: {
+    checkbox_label?: string
+    typed_phrase?: string
+  }
+  pre_uninstall_hook?: {
+    script?: string
+    output_dir?: string
+    timeout_seconds?: number
+    must_produce_file?: boolean
+  }
+  preserved_tables?: string[]
+}
+
+interface Props {
+  slug: string
+  safeUninstall: SafeUninstallSpec
+  forceUninstallActive?: boolean
+  onClose: () => void
+  onUninstalled: () => void
+}
+
+type Step = 1 | 2 | 3
+
+export default function PluginUninstall({
+  slug,
+  safeUninstall,
+  forceUninstallActive = false,
+  onClose,
+  onUninstalled,
+}: Props) {
+  const [step, setStep] = useState<Step>(1)
+  const [checkboxChecked, setCheckboxChecked] = useState(false)
+  const [zipPassword, setZipPassword] = useState('')
+  const [zipPasswordConfirm, setZipPasswordConfirm] = useState('')
+  const [typedPhrase, setTypedPhrase] = useState('')
+  const [uninstalling, setUninstalling] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+
+  const requiredPhrase = safeUninstall?.user_confirmation?.typed_phrase ?? ''
+  const checkboxLabel =
+    safeUninstall?.user_confirmation?.checkbox_label ??
+    'Tenho uma cópia dos dados exportados e assumo responsabilidade pela retenção legal.'
+  const reason = safeUninstall?.reason ?? ''
+  const preservedTables = safeUninstall?.preserved_tables ?? []
+
+  const phraseMatches = typedPhrase === requiredPhrase
+  const passwordsMatch = zipPassword === zipPasswordConfirm && zipPassword.length >= 8
+
+  async function handleUninstall() {
+    setUninstalling(true)
+    setError(null)
+    try {
+      const body: Record<string, unknown> = {
+        confirmation_phrase: typedPhrase,
+        zip_password: zipPassword,
+      }
+      await api.delete(`/plugins/${slug}`, body)
+      onUninstalled()
+    } catch (e: unknown) {
+      setError(e instanceof Error ? e.message : 'Unexpected error during uninstall.')
+      setUninstalling(false)
+    }
+  }
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/60 p-4">
+      <div className="relative w-full max-w-lg rounded-xl border border-neutral-800 bg-neutral-900 shadow-2xl">
+        {/* Header */}
+        <div className="flex items-center justify-between border-b border-neutral-800 px-6 py-4">
+          <div className="flex items-center gap-2 text-red-400">
+            <Trash2 className="h-5 w-5" />
+            <span className="font-semibold">Desinstalar plugin: {slug}</span>
+          </div>
+          <button
+            onClick={onClose}
+            className="rounded p-1 text-neutral-400 hover:text-white"
+            aria-label="Fechar"
+          >
+            <X className="h-4 w-4" />
+          </button>
+        </div>
+
+        {/* Force-uninstall alert */}
+        {forceUninstallActive && (
+          <div className="mx-6 mt-4 rounded border border-orange-500 bg-orange-950 px-4 py-3 text-sm text-orange-200">
+            <strong>⚠ Force uninstall ATIVO — todas proteções desabilitadas</strong>
+            <p className="mt-1 text-orange-300">
+              EVONEXUS_ALLOW_FORCE_UNINSTALL=1 está definido. Esta ação ignora a confirmação e
+              preservação de dados. Todas as ações são auditadas.
+            </p>
+          </div>
+        )}
+
+        <div className="space-y-5 px-6 py-5">
+          {/* Step indicator */}
+          <div className="flex items-center gap-2 text-xs text-neutral-500">
+            {([1, 2, 3] as Step[]).map((s) => (
+              <span
+                key={s}
+                className={`flex h-6 w-6 items-center justify-center rounded-full text-xs font-bold ${
+                  step === s
+                    ? 'bg-[#00FFA7] text-black'
+                    : step > s
+                    ? 'bg-green-700 text-white'
+                    : 'bg-neutral-700 text-neutral-400'
+                }`}
+              >
+                {s}
+              </span>
+            ))}
+          </div>
+
+          {/* ── Step 1: Reason + checkbox ── */}
+          {step === 1 && (
+            <div className="space-y-4">
+              <div className="flex items-start gap-3 rounded border border-red-800 bg-red-950/40 p-4">
+                <AlertTriangle className="mt-0.5 h-5 w-5 shrink-0 text-red-400" />
+                <div className="text-sm text-red-200">
+                  <p className="font-semibold">Aviso regulatório</p>
+                  <p className="mt-1 whitespace-pre-wrap">{reason}</p>
+                </div>
+              </div>
+
+              {preservedTables.length > 0 && (
+                <div className="rounded border border-neutral-700 bg-neutral-800 p-3 text-xs text-neutral-300">
+                  <p className="font-semibold text-neutral-200">
+                    Tabelas preservadas (renomeadas, não excluídas):
+                  </p>
+                  <ul className="mt-2 list-inside list-disc space-y-0.5">
+                    {preservedTables.map((t) => (
+                      <li key={t} className="font-mono text-[#00FFA7]">
+                        {t} → _orphan_{slug}_{t}
+                      </li>
+                    ))}
+                  </ul>
+                </div>
+              )}
+
+              <label className="flex cursor-pointer items-start gap-3">
+                <input
+                  type="checkbox"
+                  checked={checkboxChecked}
+                  onChange={(e) => setCheckboxChecked(e.target.checked)}
+                  className="mt-0.5 h-4 w-4 accent-[#00FFA7]"
+                />
+                <span className="text-sm text-neutral-200">{checkboxLabel}</span>
+              </label>
+
+              <div className="flex justify-end gap-2">
+                <button
+                  onClick={onClose}
+                  className="rounded-lg border border-neutral-700 px-4 py-2 text-sm text-neutral-300 hover:bg-neutral-800"
+                >
+                  Cancelar
+                </button>
+                <button
+                  disabled={!checkboxChecked}
+                  onClick={() => setStep(2)}
+                  className="rounded-lg bg-red-600 px-4 py-2 text-sm font-semibold text-white hover:bg-red-700 disabled:cursor-not-allowed disabled:opacity-40"
+                >
+                  Próximo →
+                </button>
+              </div>
+            </div>
+          )}
+
+          {/* ── Step 2: ZIP password ── */}
+          {step === 2 && (
+            <div className="space-y-4">
+              <div className="flex items-start gap-3 rounded border border-amber-700 bg-amber-950/30 p-4">
+                <Lock className="mt-0.5 h-5 w-5 shrink-0 text-amber-400" />
+                <div className="text-sm text-amber-200">
+                  <p className="font-semibold">Senha do export (AES-256)</p>
+                  <p className="mt-1 text-amber-300">
+                    O arquivo de export será criptografado com esta senha. Anote em local seguro —
+                    sem ela, o arquivo é inutilizável.
+                  </p>
+                </div>
+              </div>
+
+              <div className="space-y-3">
+                <div>
+                  <label className="mb-1 block text-xs font-medium text-neutral-400">
+                    Senha (mín. 8 caracteres)
+                  </label>
+                  <input
+                    type="password"
+                    value={zipPassword}
+                    onChange={(e) => setZipPassword(e.target.value)}
+                    placeholder="Senha do ZIP de export"
+                    className="w-full rounded border border-neutral-700 bg-neutral-800 px-3 py-2 text-sm text-white placeholder-neutral-500 focus:border-[#00FFA7] focus:outline-none"
+                  />
+                </div>
+                <div>
+                  <label className="mb-1 block text-xs font-medium text-neutral-400">
+                    Confirmar senha
+                  </label>
+                  <input
+                    type="password"
+                    value={zipPasswordConfirm}
+                    onChange={(e) => setZipPasswordConfirm(e.target.value)}
+                    placeholder="Repita a senha"
+                    className="w-full rounded border border-neutral-700 bg-neutral-800 px-3 py-2 text-sm text-white placeholder-neutral-500 focus:border-[#00FFA7] focus:outline-none"
+                  />
+                  {zipPassword && zipPasswordConfirm && !passwordsMatch && (
+                    <p className="mt-1 text-xs text-red-400">
+                      {zipPassword.length < 8
+                        ? 'Senha deve ter pelo menos 8 caracteres.'
+                        : 'Senhas não coincidem.'}
+                    </p>
+                  )}
+                </div>
+              </div>
+
+              <div className="flex justify-between gap-2">
+                <button
+                  onClick={() => setStep(1)}
+                  className="rounded-lg border border-neutral-700 px-4 py-2 text-sm text-neutral-300 hover:bg-neutral-800"
+                >
+                  ← Voltar
+                </button>
+                <button
+                  disabled={!passwordsMatch}
+                  onClick={() => setStep(3)}
+                  className="rounded-lg bg-amber-600 px-4 py-2 text-sm font-semibold text-white hover:bg-amber-700 disabled:cursor-not-allowed disabled:opacity-40"
+                >
+                  Próximo →
+                </button>
+              </div>
+            </div>
+          )}
+
+          {/* ── Step 3: Typed phrase confirmation ── */}
+          {step === 3 && (
+            <div className="space-y-4">
+              <div className="flex items-start gap-3 rounded border border-neutral-700 bg-neutral-800 p-4">
+                <Shield className="mt-0.5 h-5 w-5 shrink-0 text-neutral-400" />
+                <div className="text-sm text-neutral-200">
+                  <p>
+                    Digite exatamente a frase abaixo para confirmar a desinstalação:
+                  </p>
+                  <p className="mt-2 rounded bg-neutral-900 px-3 py-1.5 font-mono text-[#00FFA7]">
+                    {requiredPhrase}
+                  </p>
+                </div>
+              </div>
+
+              <input
+                type="text"
+                value={typedPhrase}
+                onChange={(e) => setTypedPhrase(e.target.value)}
+                placeholder={requiredPhrase}
+                className="w-full rounded border border-neutral-700 bg-neutral-800 px-3 py-2 text-sm text-white placeholder-neutral-500 focus:border-[#00FFA7] focus:outline-none"
+              />
+              {typedPhrase && !phraseMatches && (
+                <p className="text-xs text-red-400">
+                  Texto deve ser exatamente: <span className="font-mono">{requiredPhrase}</span>
+                </p>
+              )}
+
+              {error && (
+                <p className="rounded border border-red-800 bg-red-950/40 px-3 py-2 text-sm text-red-300">
+                  {error}
+                </p>
+              )}
+
+              <div className="flex justify-between gap-2">
+                <button
+                  onClick={() => setStep(2)}
+                  className="rounded-lg border border-neutral-700 px-4 py-2 text-sm text-neutral-300 hover:bg-neutral-800"
+                >
+                  ← Voltar
+                </button>
+                <button
+                  disabled={!phraseMatches || uninstalling}
+                  onClick={handleUninstall}
+                  className="flex items-center gap-2 rounded-lg bg-red-600 px-4 py-2 text-sm font-semibold text-white hover:bg-red-700 disabled:cursor-not-allowed disabled:opacity-40"
+                >
+                  {uninstalling ? (
+                    <>Desinstalando…</>
+                  ) : (
+                    <>
+                      <Trash2 className="h-4 w-4" />
+                      Desinstalar definitivamente
+                    </>
+                  )}
+                </button>
+              </div>
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/dashboard/frontend/src/components/PostizCoreConfigCard.tsx b/dashboard/frontend/src/components/PostizCoreConfigCard.tsx
new file mode 100644
index 000000000..f127d9113
--- /dev/null
+++ b/dashboard/frontend/src/components/PostizCoreConfigCard.tsx
@@ -0,0 +1,229 @@
+import { useEffect, useState } from 'react'
+import { Video, CheckCircle2, AlertCircle, Loader2, Eye, EyeOff, RefreshCw } from 'lucide-react'
+import { api } from '../lib/api'
+
+// Admin-only config panel for the Postiz publish bridge core integration
+// (social-media-production, briefing Etapa 13/14). Deliberately a small,
+// self-contained component instead of touching the generic 2000+ line
+// Integrations.tsx custom-integration machinery — Postiz has its own
+// dedicated, masked-secret admin endpoint
+// (routes/integrations_core_postiz.py), not the generic env-var CRUD used
+// by custom/plugin integrations.
+
+const FIELDS: { key: string; label: string; secret?: boolean; placeholder?: string }[] = [
+  { key: 'POSTIZ_URL', label: 'Postiz URL', placeholder: 'https://post.workflowapi.com.br' },
+  { key: 'POSTIZ_API_KEY', label: 'API Key', secret: true, placeholder: '****' },
+  { key: 'POSTIZ_INTEGRATION_INSTAGRAM_ID', label: 'Integration ID — Instagram' },
+  { key: 'POSTIZ_INTEGRATION_YOUTUBE_ID', label: 'Integration ID — YouTube' },
+  { key: 'POSTIZ_INTEGRATION_LINKEDIN_ID', label: 'Integration ID — LinkedIn' },
+  { key: 'POSTIZ_INTEGRATION_TIKTOK_ID', label: 'Integration ID — TikTok' },
+  { key: 'POSTIZ_REQUEST_TIMEOUT_SECONDS', label: 'Timeout de requisição (s)', placeholder: '120' },
+  { key: 'POSTIZ_UPLOAD_TIMEOUT_SECONDS', label: 'Timeout de upload (s)', placeholder: '900' },
+]
+
+type TestResult = {
+  ok: boolean
+  detail?: string
+  platforms?: Record<string, { connected: boolean; id: string | null }>
+}
+
+export default function PostizCoreConfigCard() {
+  const [values, setValues] = useState<Record<string, string>>({})
+  const [defaultMode, setDefaultMode] = useState<'draft' | 'schedule'>('draft')
+  const [timezone, setTimezone] = useState('America/Bahia')
+  const [configured, setConfigured] = useState(false)
+  const [loading, setLoading] = useState(true)
+  const [saving, setSaving] = useState(false)
+  const [testing, setTesting] = useState(false)
+  const [testResult, setTestResult] = useState<TestResult | null>(null)
+  const [showSecret, setShowSecret] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+  const [saveNote, setSaveNote] = useState<string | null>(null)
+
+  const load = () => {
+    setLoading(true)
+    setError(null)
+    api.get('/integrations/core/postiz')
+      .then((data) => {
+        setValues(data?.config || {})
+        setDefaultMode((data?.config?.SOCIAL_DEFAULT_POST_MODE as 'draft' | 'schedule') || 'draft')
+        setTimezone(data?.config?.MEDIA_TIMEZONE || 'America/Bahia')
+        setConfigured(!!data?.configured)
+      })
+      .catch((e) => setError(e?.message || 'Falha ao carregar configuração do Postiz'))
+      .finally(() => setLoading(false))
+  }
+
+  useEffect(() => { load() }, [])
+
+  const handleSave = async () => {
+    setSaving(true)
+    setError(null)
+    setSaveNote(null)
+    try {
+      const body = {
+        ...values,
+        SOCIAL_DEFAULT_POST_MODE: defaultMode,
+        MEDIA_TIMEZONE: timezone,
+      }
+      const data = await api.put('/integrations/core/postiz', body)
+      setValues(data?.config || {})
+      setConfigured(!!data?.configured)
+      setSaveNote(data?.note || 'Configuração salva.')
+    } catch (e: any) {
+      setError(e?.message || 'Falha ao salvar')
+    } finally {
+      setSaving(false)
+    }
+  }
+
+  const handleTest = async () => {
+    setTesting(true)
+    setTestResult(null)
+    setError(null)
+    try {
+      const data = await api.post('/integrations/core/postiz/test')
+      setTestResult(data)
+    } catch (e: any) {
+      setTestResult({ ok: false, detail: e?.message || 'Falha ao testar conexão' })
+    } finally {
+      setTesting(false)
+    }
+  }
+
+  return (
+    <div className="mb-6">
+      <div className="flex items-center gap-2.5 mb-3">
+        <div className="flex items-center justify-center w-7 h-7 rounded-lg bg-[#00FFA7]/8 border border-[#00FFA7]/15">
+          <Video size={14} className="text-[#00FFA7]" />
+        </div>
+        <h2 className="text-base font-semibold text-[#e6edf3]">Postiz (produção de mídia social)</h2>
+        <span
+          className="text-xs px-2 py-0.5 rounded-full border"
+          style={{
+            color: configured ? '#00FFA7' : '#8b949e',
+            borderColor: configured ? 'rgba(0,255,167,0.3)' : '#21262d',
+            background: configured ? 'rgba(0,255,167,0.08)' : 'transparent',
+          }}
+        >
+          {configured ? 'Conectado' : 'Não configurado'}
+        </span>
+      </div>
+
+      <div className="rounded-xl border border-[#21262d] bg-[#161b22] p-5">
+        {loading ? (
+          <div className="flex items-center gap-2 text-sm text-[#8b949e]">
+            <Loader2 size={14} className="animate-spin" /> Carregando...
+          </div>
+        ) : (
+          <>
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
+              {FIELDS.map((field) => (
+                <div key={field.key}>
+                  <label className="block text-xs text-[#8b949e] mb-1">{field.label}</label>
+                  <div className="relative">
+                    <input
+                      type={field.secret && !showSecret ? 'password' : 'text'}
+                      value={values[field.key] ?? ''}
+                      placeholder={field.placeholder}
+                      onChange={(e) => setValues((v) => ({ ...v, [field.key]: e.target.value }))}
+                      className="w-full bg-[#0d1117] border border-[#21262d] rounded-lg px-3 py-2 text-sm text-[#e6edf3] focus:outline-none focus:border-[#00FFA7]/40"
+                    />
+                    {field.secret && (
+                      <button
+                        type="button"
+                        onClick={() => setShowSecret((s) => !s)}
+                        className="absolute right-2 top-1/2 -translate-y-1/2 text-[#8b949e] hover:text-[#e6edf3]"
+                      >
+                        {showSecret ? <EyeOff size={14} /> : <Eye size={14} />}
+                      </button>
+                    )}
+                  </div>
+                </div>
+              ))}
+
+              <div>
+                <label className="block text-xs text-[#8b949e] mb-1">Modo de publicação padrão</label>
+                <select
+                  value={defaultMode}
+                  onChange={(e) => setDefaultMode(e.target.value as 'draft' | 'schedule')}
+                  className="w-full bg-[#0d1117] border border-[#21262d] rounded-lg px-3 py-2 text-sm text-[#e6edf3] focus:outline-none focus:border-[#00FFA7]/40"
+                >
+                  <option value="draft">draft (nunca publica sozinho)</option>
+                  <option value="schedule">schedule (agenda após aprovação)</option>
+                </select>
+              </div>
+              <div>
+                <label className="block text-xs text-[#8b949e] mb-1">Timezone (entrada do usuário)</label>
+                <input
+                  type="text"
+                  value={timezone}
+                  onChange={(e) => setTimezone(e.target.value)}
+                  placeholder="America/Bahia"
+                  className="w-full bg-[#0d1117] border border-[#21262d] rounded-lg px-3 py-2 text-sm text-[#e6edf3] focus:outline-none focus:border-[#00FFA7]/40"
+                />
+              </div>
+            </div>
+
+            {error && (
+              <div className="flex items-center gap-2 text-xs text-[#f85149] mb-3">
+                <AlertCircle size={13} /> {error}
+              </div>
+            )}
+            {saveNote && !error && (
+              <div className="text-xs text-[#8b949e] mb-3">{saveNote}</div>
+            )}
+            {testResult && (
+              <div className="mb-3 text-xs">
+                <div className={`flex items-center gap-2 ${testResult.ok ? 'text-[#00FFA7]' : 'text-[#f85149]'}`}>
+                  {testResult.ok ? <CheckCircle2 size={13} /> : <AlertCircle size={13} />}
+                  {testResult.detail}
+                </div>
+                {testResult.platforms && (
+                  <div className="mt-2 flex flex-wrap gap-2">
+                    {Object.entries(testResult.platforms).map(([platform, info]) => (
+                      <span
+                        key={platform}
+                        className="px-2 py-0.5 rounded-full border text-[11px]"
+                        style={{
+                          color: info.connected ? '#00FFA7' : '#8b949e',
+                          borderColor: info.connected ? 'rgba(0,255,167,0.3)' : '#21262d',
+                        }}
+                      >
+                        {platform}: {info.connected ? 'conectado' : 'não conectado'}
+                      </span>
+                    ))}
+                  </div>
+                )}
+              </div>
+            )}
+
+            <div className="flex items-center gap-2">
+              <button
+                onClick={handleSave}
+                disabled={saving}
+                className="px-3 py-1.5 rounded-lg text-sm font-medium bg-[#00FFA7]/10 border border-[#00FFA7]/30 text-[#00FFA7] hover:bg-[#00FFA7]/15 disabled:opacity-50"
+              >
+                {saving ? 'Salvando...' : 'Salvar'}
+              </button>
+              <button
+                onClick={handleTest}
+                disabled={testing || !configured}
+                className="px-3 py-1.5 rounded-lg text-sm font-medium bg-[#161b22] border border-[#21262d] text-[#e6edf3] hover:border-[#8b949e]/40 disabled:opacity-50"
+              >
+                {testing ? 'Testando...' : 'Testar conexão'}
+              </button>
+              <button
+                onClick={load}
+                className="ml-auto p-1.5 rounded-lg text-[#8b949e] hover:text-[#e6edf3] hover:bg-[#21262d]"
+                title="Recarregar"
+              >
+                <RefreshCw size={14} />
+              </button>
+            </div>
+          </>
+        )}
+      </div>
+    </div>
+  )
+}
diff --git a/dashboard/frontend/src/components/Sidebar.tsx b/dashboard/frontend/src/components/Sidebar.tsx
index 42bb21eb2..8c1438c26 100644
--- a/dashboard/frontend/src/components/Sidebar.tsx
+++ b/dashboard/frontend/src/components/Sidebar.tsx
@@ -4,11 +4,11 @@ import { useTranslation } from 'react-i18next'
 import { useAuth } from '../context/AuthContext'
 import NotificationBell from './NotificationBell'
 import {
-  LayoutDashboard, Bot, Clock, Zap, Layout, Calendar, CalendarClock,
+  LayoutDashboard, Bot, Clock, Zap, Layout, Calendar,
   Brain, Plug, DollarSign, FolderOpen, Cpu,
   Monitor, Users, ScrollText, LogOut, Menu, X, Shield, BookOpen, Library, Database,
-  ArrowUpCircle, ChevronDown, Webhook, HardDriveDownload, Settings, Share2, Heart, Target, Ticket, Activity, Package,
-  Puzzle, Terminal,
+  ArrowUpCircle, ChevronDown, Webhook, HardDriveDownload, Settings, Share2, Heart, Target, Activity, Package,
+  Puzzle, Terminal, Columns3, FolderKanban, CheckCircle2, Video,
 } from 'lucide-react'
 import {
   getAllPluginSidebarGroups,
@@ -52,15 +52,24 @@ const navGroups: NavGroup[] = [
     key: 'operations',
     collapsible: true,
     items: [
+      // Ordem pedida pelo Felipe: hierarquia de trabalho primeiro
+      // (Projetos → Metas → Kanban), depois o resto do time. 'Tasks'
+      // removido do menu — as tarefas de trabalho real hoje são tickets,
+      // visíveis no Kanban (goal-ticket-unification); a rota /tasks
+      // continua existindo, só não aparece mais aqui.
+      { to: '/projects', labelKey: 'projects', icon: FolderKanban, resource: 'goals' },
+      { to: '/goals', labelKey: 'goals', icon: Target, resource: 'goals' },
+      { to: '/kanban', labelKey: 'kanban', icon: Columns3, resource: 'tickets' },
+      { to: '/media', labelKey: 'media', icon: Video, resource: 'media_jobs' },
+      // Fallback de visibilidade/aprovação — antes só existia como mensagem
+      // no Telegram (panorama 2026-07-17, item 1).
+      { to: '/approvals', labelKey: 'approvals', icon: CheckCircle2, resource: 'goals' },
       { to: '/agents', labelKey: 'agents', icon: Bot, resource: 'agents' },
       { to: '/skills', labelKey: 'skills', icon: Zap, resource: 'skills' },
+      { to: '/heartbeats', labelKey: 'heartbeats', icon: Heart, resource: 'heartbeats' },
       { to: '/routines', labelKey: 'routines', icon: Clock, resource: 'routines' },
-      { to: '/tasks', labelKey: 'tasks', icon: CalendarClock, resource: 'tasks' },
       { to: '/triggers', labelKey: 'triggers', icon: Webhook, resource: 'triggers' },
-      { to: '/heartbeats', labelKey: 'heartbeats', icon: Heart, resource: 'heartbeats' },
       { to: '/activity', labelKey: 'activity', icon: Activity, resource: 'scheduler' },
-      { to: '/goals', labelKey: 'goals', icon: Target, resource: 'goals' },
-      { to: '/topics', labelKey: 'issues', icon: Ticket, resource: 'tickets' },
       { to: '/templates', labelKey: 'templates', icon: Layout, resource: 'templates' },
     ],
   },
@@ -229,7 +238,7 @@ export default function Sidebar() {
 
         <div
           className={`overflow-hidden transition-all duration-200 ease-in-out ${
-            group.collapsible && isCollapsed ? 'max-h-0 opacity-0' : 'max-h-96 opacity-100'
+            group.collapsible && isCollapsed ? 'max-h-0 opacity-0' : 'max-h-[720px] opacity-100'
           }`}
         >
           <div className="flex flex-col gap-0.5">
@@ -289,7 +298,7 @@ export default function Sidebar() {
               )}
               <div
                 className={`overflow-hidden transition-all duration-200 ease-in-out ${
-                  group.collapsible !== false && isCollapsed ? 'max-h-0 opacity-0' : 'max-h-96 opacity-100'
+                  group.collapsible !== false && isCollapsed ? 'max-h-0 opacity-0' : 'max-h-[720px] opacity-100'
                 }`}
               >
                 <div className="flex flex-col gap-0.5">
diff --git a/dashboard/frontend/src/components/TerminalHudPanel.tsx b/dashboard/frontend/src/components/TerminalHudPanel.tsx
new file mode 100644
index 000000000..4b452add4
--- /dev/null
+++ b/dashboard/frontend/src/components/TerminalHudPanel.tsx
@@ -0,0 +1,183 @@
+import { useEffect, useRef, useState } from 'react'
+
+// Terminal HUD — gear/LCD panel (see workspace/development/features/terminal-hud).
+// The gear number carries no meaning of its own — there's no fixed
+// "model X = gear Y" scale to define, and none was asked for. It's the
+// visual "something changed" cue: it advances whenever the backend marks a
+// hud_update as `shift` (provider or model actually changed since the last
+// update). The LCD readout next to it carries the real information:
+// provider, model, live tokens/s.
+interface HudState {
+  busy: boolean
+  heavy: boolean
+  providerId: string
+  providerModel: string
+  tokensPerSec: number
+  totalTokens: number | null
+  bestTokensPerSec: number
+  shift: boolean
+}
+
+interface Props {
+  hud: HudState
+  accentColor: string
+}
+
+// Fires once on the specific tick where `busy` flips true -> false — the
+// moment a turn closes and the live char-based tokens/s estimate is
+// replaced by the real reconciled number (see claude-bridge.js's
+// _emitHudUpdate at turn close). That's the one moment a "needle settle"
+// kick reads as physical rather than jittery — every other tick the number
+// just drifts smoothly as text streams in, no kick needed.
+function useSettleTick(busy: boolean) {
+  const [tick, setTick] = useState(0)
+  const prevBusy = useRef(busy)
+  useEffect(() => {
+    if (prevBusy.current && !busy) {
+      setTick((t) => t + 1)
+    }
+    prevBusy.current = busy
+  }, [busy])
+  return tick
+}
+
+function useGear(providerId: string, providerModel: string, shift: boolean) {
+  const [gear, setGear] = useState(1)
+  const prevKey = useRef('')
+
+  useEffect(() => {
+    const key = `${providerId}/${providerModel}`
+    if (shift && key !== prevKey.current && prevKey.current !== '') {
+      setGear((g) => (g % 5) + 1)
+    }
+    prevKey.current = key
+    // Only re-runs when the shift signal or the provider/model identity
+    // itself changes — not on every hud_update tick (those fire on every
+    // streamed text fragment and would otherwise re-run this on each one).
+  }, [shift, providerId, providerModel])
+
+  return gear
+}
+
+// H-pattern gate coordinates (5-speed, no reverse) in the shifter SVG's
+// 24x24 viewBox — three columns (x=6/12/18) x two rows (y=6/18), plus a
+// neutral crossbar at y=12 you'd have to pass through on a real shifter.
+const GATE_POS: Record<number, [number, number]> = {
+  1: [6, 6], 2: [6, 18], 3: [12, 6], 4: [12, 18], 5: [18, 6],
+}
+
+export default function TerminalHudPanel({ hud, accentColor }: Props) {
+  const gear = useGear(hud.providerId, hud.providerModel, hud.shift)
+  const settleTick = useSettleTick(hud.busy)
+  // Sprint 3 (terminal-ux-upgrade): tokensPerSec is now a fixed
+  // typical-throughput baseline per model (see claude-bridge.js's
+  // _avgTokensPerSecFor), not a live-measured instantaneous rate — so
+  // there's no meaningful "personal best" to flag anymore (every tick
+  // trivially equals the baseline). The PB badge that used to compare
+  // against bestTokensPerSec is gone; the number just reads as "médio".
+  const speed = Math.max(0, Math.round(hud.tokensPerSec))
+  const [puckX, puckY] = GATE_POS[gear] ?? GATE_POS[1]
+  const routeLabel = `${hud.providerId}/${hud.providerModel}`
+
+  return (
+    <div
+      className="flex items-center gap-2 rounded-md border border-[#21262d] bg-[#0a0e14] px-2 py-1"
+      title={routeLabel}
+    >
+      {/* Shifter knob — H-gate diagram with a puck that slides between the
+          5 positions (CSS transform transition, not a remount) plus a
+          numeral badge on the corner. Reads as "gear changed" the same way
+          a real shifter would, instead of just an incrementing digit.
+          Bumped from 32px to 44px + brighter gate/bezel contrast — the
+          32px version read as a barely-visible dark smudge in the panel. */}
+      <div
+        className="relative flex h-11 w-11 flex-shrink-0 items-center justify-center rounded-lg"
+        style={{
+          background: 'radial-gradient(circle at 35% 28%, #2a3346, #0a0e17 72%)',
+          border: '1.5px solid #3a4256',
+          boxShadow: 'inset 0 1px 2px rgba(255,255,255,0.10), inset 0 -3px 6px rgba(0,0,0,0.6), 0 1px 3px rgba(0,0,0,0.4)',
+        }}
+      >
+        <svg viewBox="0 0 24 24" className="h-full w-full p-1.5">
+          {/* gate lines */}
+          <path
+            d="M6 6 V18 M12 6 V18 M18 6 V12 M6 12 H18"
+            stroke="#5a6478"
+            strokeWidth="1.6"
+            strokeLinecap="round"
+            fill="none"
+          />
+          {/* puck — position transitions via CSS transform, not a re-mount */}
+          <circle
+            r="3"
+            fill={hud.busy ? accentColor : '#8b95a8'}
+            style={{
+              transform: `translate(${puckX}px, ${puckY}px)`,
+              transition: 'transform 280ms cubic-bezier(0.34, 1.56, 0.64, 1)',
+              filter: hud.busy ? `drop-shadow(0 0 4px ${accentColor})` : 'drop-shadow(0 0 1px rgba(0,0,0,0.6))',
+            }}
+          />
+        </svg>
+        {/* Gear numeral badge — `key={gear}` replays the kick animation on
+            every shift, same trick the old plain-numeral version used. */}
+        <div
+          key={gear}
+          className="absolute -top-2 -left-2 flex h-5 w-5 items-center justify-center rounded-full font-mono text-[11px] font-bold"
+          style={{
+            background: '#111826',
+            border: '1.5px solid #3a4256',
+            color: hud.busy ? accentColor : '#c3cad9',
+            textShadow: hud.busy ? `0 0 6px ${accentColor}cc` : 'none',
+            animation: 'terminal-hud-gear-kick 260ms cubic-bezier(0.34, 1.56, 0.64, 1)',
+          }}
+        >
+          {gear}
+        </div>
+      </div>
+
+      {/* LCD readout — full route label, no more aggressive truncation
+          now that this panel has its own full-width dashboard row. */}
+      <div
+        className="flex min-w-0 flex-col justify-center rounded-sm px-1.5 py-0.5 font-mono leading-tight"
+        style={{
+          background: '#04120a',
+          color: '#5fffb0',
+          boxShadow: 'inset 0 0 4px rgba(0,0,0,0.6)',
+          // Idle "breathing" — a slow, subtle pulse instead of a static
+          // display while nothing is happening. Not applied while busy —
+          // that would read as "still thinking" flicker instead of calm idle.
+          animation: hud.busy ? 'none' : 'terminal-hud-breathe 3.2s ease-in-out infinite',
+        }}
+      >
+        <span className="text-[9px] tracking-wide opacity-90 truncate max-w-[65vw] sm:max-w-[320px]">
+          {routeLabel}
+        </span>
+        <span
+          key={settleTick}
+          className="text-[10px] font-bold tabular-nums inline-block"
+          style={{ animation: 'terminal-hud-needle-settle 320ms cubic-bezier(0.34, 1.56, 0.64, 1)' }}
+        >
+          {speed} tok/s <span className="text-[8px] font-normal opacity-60">méd</span>
+        </span>
+      </div>
+
+      <style>{`
+        @keyframes terminal-hud-breathe {
+          0%, 100% { opacity: 0.75; }
+          50% { opacity: 1; }
+        }
+        @keyframes terminal-hud-gear-kick {
+          0% { transform: scale(1); }
+          40% { transform: scale(1.28); }
+          100% { transform: scale(1); }
+        }
+        @keyframes terminal-hud-needle-settle {
+          0% { transform: translateX(0); }
+          30% { transform: translateX(2px); }
+          60% { transform: translateX(-1px); }
+          100% { transform: translateX(0); }
+        }
+      `}</style>
+    </div>
+  )
+}
diff --git a/dashboard/frontend/src/i18n/locales/en-US/index.ts b/dashboard/frontend/src/i18n/locales/en-US/index.ts
index 675e120e6..8bb5559ff 100644
--- a/dashboard/frontend/src/i18n/locales/en-US/index.ts
+++ b/dashboard/frontend/src/i18n/locales/en-US/index.ts
@@ -181,7 +181,11 @@ const translations = {
       memory: 'Memory',
       knowledge: 'Knowledge',
       heartbeats: 'Heartbeats',
+      projects: 'Projects',
       goals: 'Goals',
+      kanban: 'Kanban',
+      media: 'Media',
+      approvals: 'Approvals',
       tasks: 'Tasks',
       triggers: 'Triggers',
       routines: 'Routines',
@@ -1046,7 +1050,7 @@ const translations = {
         tabDevice: 'Device Auth',
         generateLink: 'Generate auth link',
         step1Open: '1. Open this link to login',
-        step2Paste: '2. Authorize access, then paste the callback URL here',
+        step2Paste: '2. Authorize access and paste the final localhost URL here. Do not replace localhost with your domain',
         callbackPlaceholder: 'http://localhost:1455/auth/callback?code=...',
         confirm: 'Confirm',
         verifying: 'Verifying...',
diff --git a/dashboard/frontend/src/i18n/locales/es/index.ts b/dashboard/frontend/src/i18n/locales/es/index.ts
index 721276f40..4c6948e79 100644
--- a/dashboard/frontend/src/i18n/locales/es/index.ts
+++ b/dashboard/frontend/src/i18n/locales/es/index.ts
@@ -169,7 +169,11 @@ const translations = {
       memory: 'Memoria',
       knowledge: 'Conocimiento',
       heartbeats: 'Heartbeats',
+      projects: 'Proyectos',
       goals: 'Metas',
+      kanban: 'Kanban',
+      media: 'Medios',
+      approvals: 'Aprobaciones',
       tasks: 'Tareas',
       triggers: 'Disparadores',
       routines: 'Rutinas',
@@ -1029,7 +1033,7 @@ const translations = {
         tabDevice: 'Autenticación por dispositivo',
         generateLink: 'Generar enlace de autenticación',
         step1Open: '1. Abre este enlace para iniciar sesión',
-        step2Paste: '2. Autoriza el acceso y pega aquí la URL de callback',
+        step2Paste: '2. Autoriza el acceso y pega aquí la URL final con localhost. No cambies localhost por tu dominio',
         callbackPlaceholder: 'http://localhost:1455/auth/callback?code=...',
         confirm: 'Confirmar',
         verifying: 'Verificando...',
diff --git a/dashboard/frontend/src/i18n/locales/pt-BR/index.ts b/dashboard/frontend/src/i18n/locales/pt-BR/index.ts
index 941c612fb..1ce19e1ac 100644
--- a/dashboard/frontend/src/i18n/locales/pt-BR/index.ts
+++ b/dashboard/frontend/src/i18n/locales/pt-BR/index.ts
@@ -176,7 +176,11 @@ const translations = {
       memory: 'Memória',
       knowledge: 'Conhecimento',
       heartbeats: 'Heartbeats',
+      projects: 'Projetos',
       goals: 'Metas',
+      kanban: 'Kanban',
+      media: 'Mídias',
+      approvals: 'Aprovações',
       tasks: 'Tarefas',
       triggers: 'Gatilhos',
       routines: 'Rotinas',
@@ -1036,7 +1040,7 @@ const translations = {
         tabDevice: 'Autenticação por dispositivo',
         generateLink: 'Gerar link de autenticação',
         step1Open: '1. Abra este link para fazer login',
-        step2Paste: '2. Autorize o acesso e cole aqui a URL de callback',
+        step2Paste: '2. Autorize o acesso e cole aqui a URL final com localhost. Não troque localhost pelo domínio',
         callbackPlaceholder: 'http://localhost:1455/auth/callback?code=...',
         confirm: 'Confirmar',
         verifying: 'Verificando...',
diff --git a/dashboard/frontend/src/index.css b/dashboard/frontend/src/index.css
index dbf9db260..aba8c1aa6 100644
--- a/dashboard/frontend/src/index.css
+++ b/dashboard/frontend/src/index.css
@@ -1,5 +1,14 @@
 @import "tailwindcss";
 
+@theme {
+  /* Ticket system typography (Kanban card + CreateTicketModal) — a distinct
+     display face for titles, paired with a technical mono for meta/IDs.
+     Scoped as an additive utility; does not touch the app-wide `font-mono`
+     token used elsewhere. */
+  --font-display: 'Space Grotesk', sans-serif;
+  --font-ticket-mono: 'JetBrains Mono', ui-monospace, monospace;
+}
+
 :root {
   --evo-green: #00FFA7;
   --bg-primary: #0C111D;
diff --git a/dashboard/frontend/src/lib/agent-meta.ts b/dashboard/frontend/src/lib/agent-meta.ts
index 1432962b0..846cd5630 100644
--- a/dashboard/frontend/src/lib/agent-meta.ts
+++ b/dashboard/frontend/src/lib/agent-meta.ts
@@ -151,3 +151,14 @@ export function getAgentMeta(name: string): AgentMeta {
   const base = _registry[name] || DEFAULT_META
   return { ...base, command: _registry[name]?.command || `/${name}` }
 }
+
+/**
+ * All known agent slugs (native seed + hydrated plugin agents), sorted by
+ * display label. Synchronous — reflects whatever hydrateAgentMeta() has
+ * loaded so far (native seed is always present even pre-hydration).
+ */
+export function getAllAgentSlugs(): Array<{ slug: string; label: string }> {
+  return Object.entries(_registry)
+    .map(([slug, meta]) => ({ slug, label: meta.label }))
+    .sort((a, b) => a.label.localeCompare(b.label))
+}
diff --git a/dashboard/frontend/src/lib/api.ts b/dashboard/frontend/src/lib/api.ts
index 213989d4f..efc8c44ad 100644
--- a/dashboard/frontend/src/lib/api.ts
+++ b/dashboard/frontend/src/lib/api.ts
@@ -15,7 +15,20 @@ async function buildError(res: Response): Promise<Error> {
   let detail = ''
   try {
     const data = await res.clone().json()
-    detail = data?.error || data?.description || data?.message || ''
+    // Try common error shapes first, then plugin-preview-shaped responses
+    // (`{conflicts: [...], manifest, ...}`). Without this, plugin install
+    // 409s surfaced as "409 CONFLICT" with no hint at the actual reason
+    // (e.g. version mismatch).
+    detail =
+      data?.error ||
+      data?.description ||
+      data?.message ||
+      (Array.isArray(data?.conflicts) && data.conflicts.length > 0
+        ? data.conflicts.join(' • ')
+        : '') ||
+      (Array.isArray(data?.details) && data.details.length > 0
+        ? data.details.join(' • ')
+        : '')
   } catch {
     try {
       const text = await res.text()
@@ -73,11 +86,12 @@ export const api = {
     if (!res.ok) throw await buildError(res);
     return res.json();
   },
-  delete: async (path: string) => {
+  delete: async (path: string, body?: unknown) => {
     const res = await fetch(`${API}/api${path}`, {
       method: 'DELETE',
-      headers: { ...XHR_HEADER },
+      headers: { 'Content-Type': 'application/json', ...XHR_HEADER },
       credentials: 'include',
+      body: body ? JSON.stringify(body) : undefined,
     });
     if (!res.ok) throw await buildError(res);
     return res.json();
diff --git a/dashboard/frontend/src/lib/integrationMeta.ts b/dashboard/frontend/src/lib/integrationMeta.ts
index e8ccb282d..fe8896652 100644
--- a/dashboard/frontend/src/lib/integrationMeta.ts
+++ b/dashboard/frontend/src/lib/integrationMeta.ts
@@ -185,7 +185,7 @@ const INTEGRATION_META: IntegrationMeta[] = [
   },
   {
     id: 'ai image creator',
-    description: 'Geração de imagens AI — Gemini, FLUX.2, Riverflow, SeedDream, GPT-5',
+    description: 'Geração de imagens AI — Gemini, FLUX.2, Riverflow, SeedDream, GPT-5, gpt-image-2',
     docsUrl: '/docs/skills/ai-image-creator',
     fields: [
       { envKey: 'AI_IMG_CREATOR_CF_ACCOUNT_ID', label: 'Cloudflare Account ID', hint: 'Account ID do Cloudflare (Dashboard → Overview)', required: false },
@@ -193,6 +193,8 @@ const INTEGRATION_META: IntegrationMeta[] = [
       { envKey: 'AI_IMG_CREATOR_CF_TOKEN', label: 'Cloudflare API Token', hint: 'Token com permissão AI Gateway', required: false },
       { envKey: 'AI_IMG_CREATOR_OPENROUTER_KEY', label: 'OpenRouter API Key', hint: 'Chave sk-or-... do OpenRouter (alternativa ao CF Gateway)', required: false },
       { envKey: 'AI_IMG_CREATOR_GEMINI_KEY', label: 'Google AI Studio Key', hint: 'Chave AI... do Google AI Studio (alternativa)', required: false },
+      { envKey: 'AI_IMG_CREATOR_OPENAI_KEY', label: 'OpenAI API Key', hint: 'Chave sk-... de plataforma para gpt-image-2 (api.openai.com) — token ChatGPT Plus/Codex NÃO gera imagens', required: false },
+      { envKey: 'AI_IMG_CREATOR_OMNIROUTE_KEY', label: 'OmniRoute API Key', hint: 'Key do gateway OmniRoute — base http://omniroute:20128/v1 já embutida (override via AI_IMG_CREATOR_OMNIROUTE_BASE_URL se rodar fora da stack)', required: false },
     ],
   },
   // LLM providers (OpenAI, Anthropic, Gemini) are intentionally NOT listed.
diff --git a/dashboard/frontend/src/pages/Agents.tsx b/dashboard/frontend/src/pages/Agents.tsx
index b849f28ec..5d1abf88d 100644
--- a/dashboard/frontend/src/pages/Agents.tsx
+++ b/dashboard/frontend/src/pages/Agents.tsx
@@ -32,6 +32,30 @@ import {
 import { api } from '../lib/api'
 import { AgentAvatar } from '../components/AgentAvatar'
 
+// Terminal-server URL for the HUD status poll — same proxy pattern as
+// AgentDetail.tsx: go through the dashboard's /terminal proxy in
+// production (CSP blocks direct cross-port fetches), direct port in Vite
+// dev (no proxy mounted there).
+const isViteDev = import.meta.env.DEV
+const TS_HTTP = isViteDev
+  ? `http://${window.location.hostname}:32352`
+  : `${window.location.origin}/terminal`
+
+interface HudSession {
+  sessionId: string
+  agent: string
+  busy: boolean
+  heavy: boolean
+  providerId: string
+  providerModel: string
+  tokensPerSec: number
+}
+
+interface HudAgentStatus {
+  busy: boolean
+  heavy: boolean
+}
+
 type Category = 'business' | 'engineering' | 'custom'
 type EngTier = 'reasoning' | 'execution' | 'speed'
 
@@ -292,7 +316,34 @@ function formatAgentName(name: string): string {
     .join(' ')
 }
 
-function AgentCard({ agent, isRunning }: { agent: Agent; isRunning: boolean }) {
+// 3-dot semaphore mirroring the Terminal HUD's (AgentTerminal.tsx): green
+// idle, yellow working, red heavy context/tokens on the last turn.
+function HudSemaphore({ status }: { status: HudAgentStatus }) {
+  const activeIdx = status.heavy ? 2 : status.busy ? 1 : 0
+  return (
+    <div
+      className="flex items-center gap-1"
+      title={status.heavy ? 'contexto/tokens grande no último turno' : status.busy ? 'trabalhando…' : 'sessão aberta, esperando prompt'}
+    >
+      {(['#22c55e', '#eab308', '#ef4444'] as const).map((color, i) => {
+        const isActive = i === activeIdx
+        return (
+          <span
+            key={color}
+            className="inline-block h-1.5 w-1.5 rounded-full transition-opacity duration-200"
+            style={{
+              backgroundColor: color,
+              opacity: isActive ? 1 : 0.18,
+              boxShadow: isActive ? `0 0 5px ${color}aa` : 'none',
+            }}
+          />
+        )
+      })}
+    </div>
+  )
+}
+
+function AgentCard({ agent, isRunning, hudStatus }: { agent: Agent; isRunning: boolean; hudStatus?: HudAgentStatus }) {
   const meta = getMeta(agent.name, agent)
   const isActive = agent.memory_count > 0
   const tier = getEngineeringTier(agent.name)
@@ -372,6 +423,7 @@ function AgentCard({ agent, isRunning }: { agent: Agent; isRunning: boolean }) {
 
         {/* Status dot + running badge */}
         <div className="flex items-center gap-2">
+          {hudStatus && <HudSemaphore status={hudStatus} />}
           {isRunning && (
             <span className="flex items-center gap-1 rounded-full bg-[#00FFA7]/10 px-2 py-0.5 text-[10px] font-semibold uppercase tracking-wider text-[#00FFA7] border border-[#00FFA7]/20">
               <span className="relative flex h-1.5 w-1.5">
@@ -641,6 +693,7 @@ export default function Agents() {
   const [agents, setAgents] = useState<Agent[]>([])
   const [loading, setLoading] = useState(true)
   const [runningAgents, setRunningAgents] = useState<string[]>([])
+  const [hudSessions, setHudSessions] = useState<HudSession[]>([])
   const [filter, setFilter] = useState<FilterValue>('all')
   const [query, setQuery] = useState('')
   const [recentNames] = useState(getRecentAgents)
@@ -668,6 +721,43 @@ export default function Agents() {
     return () => clearInterval(interval)
   }, [])
 
+  // Poll opencode terminal HUD status every 4 seconds — reflects the same
+  // semaphore shown inside an open terminal tab (see AgentTerminal.tsx),
+  // aggregated here so a superadmin can see who's working without opening
+  // any single terminal. Only opencode sessions report this (see
+  // server.js's /api/sessions/hud-status) — other providers don't track
+  // turn boundaries yet.
+  useEffect(() => {
+    const fetchHud = () => {
+      fetch(`${TS_HTTP}/api/sessions/hud-status`, { credentials: 'include' })
+        .then((r) => r.json())
+        .then((data) => setHudSessions(data.sessions || []))
+        .catch(() => {})
+    }
+    fetchHud()
+    const interval = setInterval(fetchHud, 4000)
+    return () => clearInterval(interval)
+  }, [])
+
+  // One entry per agent with at least one live opencode session — heavy
+  // wins over busy if the agent has multiple sessions in different states.
+  const hudByAgent = useMemo(() => {
+    const map: Record<string, HudAgentStatus> = {}
+    for (const s of hudSessions) {
+      const prev = map[s.agent]
+      map[s.agent] = {
+        busy: (prev?.busy || s.busy),
+        heavy: (prev?.heavy || s.heavy),
+      }
+    }
+    return map
+  }, [hudSessions])
+
+  const workingAgentNames = useMemo(
+    () => Object.entries(hudByAgent).filter(([, st]) => st.busy).map(([name]) => name),
+    [hudByAgent]
+  )
+
   const totalMemories = agents.reduce((sum, a) => sum + a.memory_count, 0)
   const activeCount = agents.filter((a) => a.memory_count > 0).length
 
@@ -742,6 +832,28 @@ export default function Agents() {
         {/* Stats bar */}
         {!loading && agents.length > 0 && (
           <div className="mt-4 flex items-center gap-6 text-sm">
+            {/* Superadmin-facing summary: exactly how many + which agents
+                have a live opencode terminal session mid-turn right now
+                (see hudByAgent above — sourced from the same semaphore
+                shown inside each terminal tab). Only rendered once at
+                least one agent is actually working, so it doesn't add
+                permanent noise to an otherwise idle dashboard. */}
+            {workingAgentNames.length > 0 && (
+              <div
+                className="flex items-center gap-2"
+                title={`Trabalhando agora: ${workingAgentNames.map(formatAgentName).join(', ')}`}
+              >
+                <span className="relative flex h-2 w-2">
+                  <span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-[#eab308] opacity-75" />
+                  <span className="relative inline-flex h-2 w-2 rounded-full bg-[#eab308]" style={{ boxShadow: '0 0 6px rgba(234,179,8,0.6)' }} />
+                </span>
+                <span className="text-[#8b949e]">
+                  <span className="font-medium text-[#e6edf3]">{workingAgentNames.length}</span>{' '}
+                  trabalhando agora:{' '}
+                  <span className="text-[#e6edf3]">{workingAgentNames.map(formatAgentName).join(', ')}</span>
+                </span>
+              </div>
+            )}
             <div className="flex items-center gap-2">
               <span
                 className="inline-block h-2 w-2 rounded-full bg-[#22C55E]"
@@ -903,7 +1015,7 @@ export default function Agents() {
               />
               <div className={gridClass}>
                 {grouped.business.map((agent) => (
-                  <AgentCard key={agent.name} agent={agent} isRunning={isRunning(agent.name)} />
+                  <AgentCard key={agent.name} agent={agent} isRunning={isRunning(agent.name)} hudStatus={hudByAgent[agent.name]} />
                 ))}
               </div>
             </section>
@@ -931,7 +1043,7 @@ export default function Agents() {
                     <SubSectionHeader label={TIER_LABELS[tier]} count={grouped.engineering[tier].length} />
                     <div className={gridClass}>
                       {grouped.engineering[tier].map((agent) => (
-                        <AgentCard key={agent.name} agent={agent} isRunning={isRunning(agent.name)} />
+                        <AgentCard key={agent.name} agent={agent} isRunning={isRunning(agent.name)} hudStatus={hudByAgent[agent.name]} />
                       ))}
                     </div>
                   </div>
@@ -942,7 +1054,7 @@ export default function Agents() {
                   <SubSectionHeader label="Other" count={grouped.engineering.other.length} />
                   <div className={gridClass}>
                     {grouped.engineering.other.map((agent) => (
-                      <AgentCard key={agent.name} agent={agent} isRunning={isRunning(agent.name)} />
+                      <AgentCard key={agent.name} agent={agent} isRunning={isRunning(agent.name)} hudStatus={hudByAgent[agent.name]} />
                     ))}
                   </div>
                 </div>
@@ -960,7 +1072,7 @@ export default function Agents() {
               />
               <div className={gridClass}>
                 {grouped.custom.map((agent) => (
-                  <AgentCard key={agent.name} agent={agent} isRunning={isRunning(agent.name)} />
+                  <AgentCard key={agent.name} agent={agent} isRunning={isRunning(agent.name)} hudStatus={hudByAgent[agent.name]} />
                 ))}
               </div>
             </section>
diff --git a/dashboard/frontend/src/pages/Approvals.tsx b/dashboard/frontend/src/pages/Approvals.tsx
new file mode 100644
index 000000000..922663c72
--- /dev/null
+++ b/dashboard/frontend/src/pages/Approvals.tsx
@@ -0,0 +1,228 @@
+import { useEffect, useState } from 'react'
+import { useToast } from '../components/Toast'
+import { useConfirm } from '../components/ConfirmDialog'
+import { CheckCircle2, XCircle, Clock, RefreshCw, ExternalLink } from 'lucide-react'
+import { api } from '../lib/api'
+import { Link } from 'react-router-dom'
+
+interface ApprovalItem {
+  id: number
+  gate_type: 'publish' | 'decomposition' | 'project_suggestion' | 'goal_suggestion'
+  status: 'pending' | 'approved' | 'rejected' | 'expired' | 'published'
+  agent: string | null
+  ticket_id: string | null
+  goal_id: number | null
+  mission_id: number | null
+  project_id: number | null
+  title: string | null
+  body: string | null
+  context: string | null
+  items_preview: string | null
+  created_at: string
+  expires_at: string
+  decided_at: string | null
+  decided_by: string | null
+}
+
+const GATE_LABELS: Record<string, string> = {
+  publish: 'Publicação',
+  decomposition: 'Decomposição (Meta → Tickets)',
+  project_suggestion: 'Sugestão de Projetos',
+  goal_suggestion: 'Sugestão de Metas',
+}
+
+const GATE_COLORS: Record<string, string> = {
+  publish: 'bg-[#00FFA7]/10 text-[#00FFA7] border-[#00FFA7]/20',
+  decomposition: 'bg-blue-500/10 text-blue-400 border-blue-500/20',
+  project_suggestion: 'bg-purple-500/10 text-purple-400 border-purple-500/20',
+  goal_suggestion: 'bg-orange-500/10 text-orange-400 border-orange-500/20',
+}
+
+const STATUS_COLORS: Record<string, string> = {
+  pending: 'bg-yellow-500/10 text-yellow-400',
+  approved: 'bg-green-500/10 text-green-400',
+  rejected: 'bg-red-500/10 text-red-400',
+  expired: 'bg-white/10 text-white/40',
+  published: 'bg-green-500/10 text-green-400',
+}
+
+const STATUS_LABELS: Record<string, string> = {
+  pending: 'Pendente', approved: 'Aprovada', rejected: 'Rejeitada',
+  expired: 'Expirada', published: 'Publicada',
+}
+
+function timeAgo(iso: string): string {
+  const diffMs = Date.now() - new Date(iso).getTime()
+  const mins = Math.floor(diffMs / 60000)
+  if (mins < 1) return 'agora'
+  if (mins < 60) return `há ${mins}min`
+  const hours = Math.floor(mins / 60)
+  if (hours < 24) return `há ${hours}h`
+  return `há ${Math.floor(hours / 24)}d`
+}
+
+function relatedLink(a: ApprovalItem): { to: string; label: string } | null {
+  if (a.ticket_id) return { to: `/tickets/${a.ticket_id}`, label: 'Ver ticket' }
+  if (a.goal_id) return { to: '/goals', label: 'Ver metas' }
+  if (a.project_id) return { to: '/goals', label: 'Ver projeto' }
+  if (a.mission_id) return { to: '/goals', label: 'Ver missão' }
+  return null
+}
+
+export default function Approvals() {
+  const toast = useToast()
+  const confirm = useConfirm()
+  const [approvals, setApprovals] = useState<ApprovalItem[]>([])
+  const [loading, setLoading] = useState(true)
+  const [statusFilter, setStatusFilter] = useState('pending')
+  const [actingId, setActingId] = useState<number | null>(null)
+
+  const fetchApprovals = () => {
+    setLoading(true)
+    api.get(`/approvals?status=${statusFilter}`)
+      .then((data: { approvals: ApprovalItem[] }) => setApprovals(data.approvals || []))
+      .catch(() => setApprovals([]))
+      .finally(() => setLoading(false))
+  }
+
+  useEffect(() => {
+    fetchApprovals()
+  }, [statusFilter])
+
+  const decide = async (a: ApprovalItem, decision: 'approve' | 'reject') => {
+    const verb = decision === 'approve' ? 'Aprovar' : 'Rejeitar'
+    const ok = await confirm({
+      title: `${verb} ${GATE_LABELS[a.gate_type] || a.gate_type}`,
+      description: a.context
+        ? `${a.context}\n\n${a.title || ''}`
+        : (a.title || 'Confirmar decisão?'),
+      confirmText: verb,
+      variant: decision === 'reject' ? 'danger' : 'default',
+    })
+    if (!ok) return
+
+    setActingId(a.id)
+    try {
+      await api.post(`/approvals/${a.id}/dashboard-decision`, { decision })
+      toast.success(`${verb === 'Aprovar' ? 'Aprovado' : 'Rejeitado'} com sucesso`)
+      fetchApprovals()
+    } catch (e) {
+      toast.error(`Erro ao ${decision === 'approve' ? 'aprovar' : 'rejeitar'}`, String(e))
+    } finally {
+      setActingId(null)
+    }
+  }
+
+  return (
+    <div className="p-6 max-w-4xl mx-auto">
+      <div className="flex items-center justify-between mb-6">
+        <div>
+          <h1 className="text-xl font-semibold text-white">Aprovações</h1>
+          <p className="text-sm text-white/50 mt-1">
+            Fallback do dashboard para as aprovações que normalmente chegam no Telegram —
+            decidir aqui exige sessão de admin logada, nunca token de API.
+          </p>
+        </div>
+        <button
+          onClick={fetchApprovals}
+          className="flex items-center gap-2 px-3 py-2 rounded-lg text-sm text-white/60 hover:text-white hover:bg-white/5 transition"
+        >
+          <RefreshCw size={14} className={loading ? 'animate-spin' : ''} />
+          Atualizar
+        </button>
+      </div>
+
+      <div className="flex gap-2 mb-4">
+        {['pending', 'approved', 'rejected', 'expired', 'published', 'all'].map((s) => (
+          <button
+            key={s}
+            onClick={() => setStatusFilter(s)}
+            className={`px-3 py-1.5 rounded-full text-xs font-medium transition border ${
+              statusFilter === s
+                ? 'bg-[#00FFA7]/10 text-[#00FFA7] border-[#00FFA7]/30'
+                : 'text-white/50 border-white/10 hover:text-white/80'
+            }`}
+          >
+            {STATUS_LABELS[s] || 'Todas'}
+          </button>
+        ))}
+      </div>
+
+      {loading && approvals.length === 0 && (
+        <div className="text-white/40 text-sm py-12 text-center">Carregando…</div>
+      )}
+
+      {!loading && approvals.length === 0 && (
+        <div className="text-white/40 text-sm py-12 text-center border border-white/5 rounded-xl">
+          Nenhuma aprovação {statusFilter !== 'all' ? STATUS_LABELS[statusFilter]?.toLowerCase() : ''} agora.
+        </div>
+      )}
+
+      <div className="flex flex-col gap-3">
+        {approvals.map((a) => {
+          const link = relatedLink(a)
+          return (
+            <div key={a.id} className="rounded-xl border border-white/10 bg-white/[0.02] p-4">
+              <div className="flex items-center justify-between mb-2">
+                <div className="flex items-center gap-2">
+                  <span className={`px-2 py-0.5 rounded-md text-xs font-medium border ${GATE_COLORS[a.gate_type] || ''}`}>
+                    {GATE_LABELS[a.gate_type] || a.gate_type}
+                  </span>
+                  <span className={`px-2 py-0.5 rounded-md text-xs font-medium ${STATUS_COLORS[a.status] || ''}`}>
+                    {STATUS_LABELS[a.status] || a.status}
+                  </span>
+                </div>
+                <span className="flex items-center gap-1 text-xs text-white/40">
+                  <Clock size={12} />
+                  {timeAgo(a.created_at)}
+                </span>
+              </div>
+
+              {a.context && (
+                <div className="text-xs text-white/50 mb-1">{a.context}</div>
+              )}
+              <div className="text-sm text-white/90 font-medium mb-1">{a.title || `Aprovação #${a.id}`}</div>
+              {a.body && <div className="text-sm text-white/60 whitespace-pre-wrap mb-2">{a.body}</div>}
+              {a.items_preview && (
+                <pre className="text-xs text-white/50 whitespace-pre-wrap bg-white/[0.02] rounded-lg p-2 mb-2">
+                  {a.items_preview}
+                </pre>
+              )}
+
+              <div className="flex items-center justify-between mt-3">
+                <div className="flex items-center gap-3 text-xs text-white/40">
+                  {a.agent && <span>via @{a.agent}</span>}
+                  {a.decided_by && <span>decidido por {a.decided_by}</span>}
+                  {link && (
+                    <Link to={link.to} className="flex items-center gap-1 text-[#00FFA7] hover:underline">
+                      <ExternalLink size={12} /> {link.label}
+                    </Link>
+                  )}
+                </div>
+
+                {a.status === 'pending' && (
+                  <div className="flex gap-2">
+                    <button
+                      disabled={actingId === a.id}
+                      onClick={() => decide(a, 'reject')}
+                      className="flex items-center gap-1 px-3 py-1.5 rounded-lg text-xs font-medium text-red-400 border border-red-500/20 hover:bg-red-500/10 transition disabled:opacity-50"
+                    >
+                      <XCircle size={14} /> Rejeitar
+                    </button>
+                    <button
+                      disabled={actingId === a.id}
+                      onClick={() => decide(a, 'approve')}
+                      className="flex items-center gap-1 px-3 py-1.5 rounded-lg text-xs font-medium text-[#00FFA7] border border-[#00FFA7]/30 hover:bg-[#00FFA7]/10 transition disabled:opacity-50"
+                    >
+                      <CheckCircle2 size={14} /> Aprovar
+                    </button>
+                  </div>
+                )}
+              </div>
+            </div>
+          )
+        })}
+      </div>
+    </div>
+  )
+}
diff --git a/dashboard/frontend/src/pages/Backups.tsx b/dashboard/frontend/src/pages/Backups.tsx
index 07e6a7aca..e4d62acf1 100644
--- a/dashboard/frontend/src/pages/Backups.tsx
+++ b/dashboard/frontend/src/pages/Backups.tsx
@@ -748,6 +748,8 @@ export default function Backups() {
   const [config, setConfig] = useState<BackupConfig | null>(null)
   const [loading, setLoading] = useState(true)
   const [jobStatus, setJobStatus] = useState<string>('idle')
+  const [jobKind, setJobKind] = useState<'backup' | 'restore'>('backup')
+  const [jobError, setJobError] = useState<string | null>(null)
   const [showRestoreModal, setShowRestoreModal] = useState<string | null>(null)
   const [restoreMode, setRestoreMode] = useState<'merge' | 'replace'>('merge')
   const [uploading, setUploading] = useState(false)
@@ -836,23 +838,27 @@ export default function Backups() {
     return () => clearInterval(interval)
   }, [config?.brain_repo_configured])
 
-  // Poll job status while running
+  // Poll job status while running — the backend tracks backup and restore
+  // jobs separately, so the poll must ask for the kind that was started.
   useEffect(() => {
     if (jobStatus !== 'running') return
     const interval = setInterval(async () => {
       try {
-        const status = await api.get('/backups/status')
+        const status = await api.get(`/backups/status?type=${jobKind}`)
         if (status.status !== 'running') {
           setJobStatus(status.status)
+          setJobError(status.error || null)
           fetchData()
         }
       } catch {}
     }, 2000)
     return () => clearInterval(interval)
-  }, [jobStatus, fetchData])
+  }, [jobStatus, jobKind, fetchData])
 
   const handleBackup = async (target: 'local' | 's3' = 'local') => {
     try {
+      setJobKind('backup')
+      setJobError(null)
       setJobStatus('running')
       await api.post('/backups', { target })
     } catch (err) {
@@ -965,6 +971,8 @@ export default function Backups() {
 
   const handleRestore = async (filename: string) => {
     try {
+      setJobKind('restore')
+      setJobError(null)
       setJobStatus('running')
       setShowRestoreModal(null)
       await api.post(`/backups/${filename}/restore`, { mode: restoreMode })
@@ -1108,7 +1116,10 @@ export default function Backups() {
       {jobStatus === 'error' && (
         <div className="flex items-center gap-2 px-4 py-3 mb-4 rounded-lg bg-red-500/10 border border-red-500/20 text-red-400 text-sm">
           <AlertCircle size={16} />
-          {t('backups.statusBanner.failed')}
+          <span>
+            {t('backups.statusBanner.failed')}
+            {jobError && <span className="opacity-80"> — {jobError}</span>}
+          </span>
           <button onClick={() => setJobStatus('idle')} className="ml-auto text-xs opacity-60 hover:opacity-100">{t('backups.statusBanner.dismiss')}</button>
         </div>
       )}
diff --git a/dashboard/frontend/src/pages/Costs.tsx b/dashboard/frontend/src/pages/Costs.tsx
index 8687e9393..68d56b951 100644
--- a/dashboard/frontend/src/pages/Costs.tsx
+++ b/dashboard/frontend/src/pages/Costs.tsx
@@ -1,5 +1,5 @@
 import { useEffect, useState } from 'react'
-import { DollarSign, Zap, Activity, Calculator, Image, type LucideIcon } from 'lucide-react'
+import { DollarSign, Zap, Activity, Calculator, Image, Target, type LucideIcon } from 'lucide-react'
 import { api } from '../lib/api'
 import { useTranslation } from 'react-i18next'
 import {
@@ -33,6 +33,10 @@ interface CostData {
     total_cost: number
     avg_cost: number
   }[]
+  by_mission: { mission_id: number; title: string; estimated_cost: number; ticket_count: number }[]
+  by_project: { project_id: number; title: string; estimated_cost: number; ticket_count: number }[]
+  unallocated_cost: number
+  methodology: string
 }
 
 function normalizeCostData(raw: any): CostData {
@@ -67,6 +71,10 @@ function normalizeCostData(raw: any): CostData {
     by_agent: byAgent,
     by_routine: normalizedByRoutine,
     by_heartbeat: normalizedByHeartbeat,
+    by_mission: Array.isArray(raw?.by_mission) ? raw.by_mission : [],
+    by_project: Array.isArray(raw?.by_project) ? raw.by_project : [],
+    unallocated_cost: Number(raw?.unallocated_cost || 0),
+    methodology: raw?.methodology || '',
   }
 }
 
@@ -132,6 +140,38 @@ interface ImageCosts {
   totals: { count: number; total_tokens: number; total_seconds: number; total_bytes: number; total_cost_usd?: number }
 }
 
+// Entries logged by older skill versions miss token_usage.total_tokens and
+// other fields — unguarded access crashed the whole page render.
+function normalizeImageCosts(raw: any): ImageCosts | null {
+  if (!raw || !Array.isArray(raw.entries)) return null
+  const entries: ImageCostEntry[] = raw.entries.map((e: any) => ({
+    timestamp: typeof e?.timestamp === 'string' ? e.timestamp : '',
+    model: typeof e?.model === 'string' ? e.model : 'unknown',
+    provider: typeof e?.provider === 'string' ? e.provider : '',
+    mode: typeof e?.mode === 'string' ? e.mode : '',
+    output_file: typeof e?.output_file === 'string' ? e.output_file : '',
+    size_bytes: Number(e?.size_bytes || 0),
+    elapsed_seconds: Number(e?.elapsed_seconds || 0),
+    token_usage: {
+      prompt_tokens: Number(e?.token_usage?.prompt_tokens || 0),
+      completion_tokens: Number(e?.token_usage?.completion_tokens || 0),
+      total_tokens: Number(e?.token_usage?.total_tokens || 0),
+    },
+    estimated_cost_usd: typeof e?.estimated_cost_usd === 'number' ? e.estimated_cost_usd : undefined,
+  }))
+  const t = raw.totals || {}
+  return {
+    entries,
+    totals: {
+      count: Number(t.count ?? entries.length),
+      total_tokens: Number(t.total_tokens || 0),
+      total_seconds: Number(t.total_seconds || 0),
+      total_bytes: Number(t.total_bytes || 0),
+      total_cost_usd: typeof t.total_cost_usd === 'number' ? t.total_cost_usd : undefined,
+    },
+  }
+}
+
 function relativeTime(ts: string): string {
   try {
     const diff = Date.now() - new Date(ts).getTime()
@@ -162,7 +202,7 @@ export default function Costs() {
       api.get('/routines/image-costs').catch(() => null),
     ]).then(([costRaw, imgRaw]) => {
       if (costRaw) setData(normalizeCostData(costRaw))
-      if (imgRaw) setImageCosts(imgRaw)
+      if (imgRaw) setImageCosts(normalizeImageCosts(imgRaw))
     }).finally(() => setLoading(false))
   }, [])
 
@@ -382,6 +422,70 @@ export default function Costs() {
         )}
       </div>
 
+      {/* Gasto por Missão/Projeto — estimativa (panorama 2026-07-17, item 2) */}
+      {(data.by_mission.length > 0 || data.by_project.length > 0 || data.unallocated_cost > 0) && (
+        <div className="bg-[#161b22] border border-[#21262d] rounded-2xl overflow-hidden mt-6 transition-all duration-300 hover:shadow-[0_0_32px_rgba(0,255,167,0.04)]">
+          <div className="p-5 border-b border-[#21262d]">
+            <h2 className="text-base font-semibold text-[#e6edf3] flex items-center gap-2.5">
+              <div className="flex items-center justify-center w-7 h-7 rounded-lg bg-[#00FFA7]/8 border border-[#00FFA7]/15">
+                <Target size={14} className="text-[#00FFA7]" />
+              </div>
+              Gasto por Missão / Projeto (estimado)
+            </h2>
+            {data.methodology && (
+              <p className="text-xs text-[#667085] mt-2">{data.methodology}</p>
+            )}
+          </div>
+          <div className="grid md:grid-cols-2 divide-y md:divide-y-0 md:divide-x divide-[#21262d]/60">
+            <div>
+              <div className="px-4 py-2 text-[11px] uppercase tracking-wider text-[#667085] font-medium">Por Missão</div>
+              {data.by_mission.length === 0 ? (
+                <div className="px-4 pb-4 text-sm text-[#667085]">Sem dados suficientes ainda.</div>
+              ) : (
+                <table className="w-full text-sm">
+                  <tbody>
+                    {data.by_mission.map((m) => (
+                      <tr key={m.mission_id} className="border-t border-[#21262d]/60">
+                        <td className="p-3 text-[#e6edf3] text-[13px]">{m.title}</td>
+                        <td className="p-3 text-right text-[#8b949e] tabular-nums text-[13px]">{m.ticket_count} ticket(s)</td>
+                        <td className="p-3 text-right text-[#e6edf3] tabular-nums text-[13px] font-medium">
+                          ~${m.estimated_cost.toFixed(4)}
+                        </td>
+                      </tr>
+                    ))}
+                  </tbody>
+                </table>
+              )}
+            </div>
+            <div>
+              <div className="px-4 py-2 text-[11px] uppercase tracking-wider text-[#667085] font-medium">Por Projeto</div>
+              {data.by_project.length === 0 ? (
+                <div className="px-4 pb-4 text-sm text-[#667085]">Sem dados suficientes ainda.</div>
+              ) : (
+                <table className="w-full text-sm">
+                  <tbody>
+                    {data.by_project.map((p) => (
+                      <tr key={p.project_id} className="border-t border-[#21262d]/60">
+                        <td className="p-3 text-[#e6edf3] text-[13px]">{p.title}</td>
+                        <td className="p-3 text-right text-[#8b949e] tabular-nums text-[13px]">{p.ticket_count} ticket(s)</td>
+                        <td className="p-3 text-right text-[#e6edf3] tabular-nums text-[13px] font-medium">
+                          ~${p.estimated_cost.toFixed(4)}
+                        </td>
+                      </tr>
+                    ))}
+                  </tbody>
+                </table>
+              )}
+            </div>
+          </div>
+          {data.unallocated_cost > 0 && (
+            <div className="px-4 py-3 border-t border-[#21262d]/60 text-xs text-[#667085]">
+              ${data.unallocated_cost.toFixed(4)} não alocados (custo de agente sem ticket correspondente vinculado a uma Missão/Projeto).
+            </div>
+          )}
+        </div>
+      )}
+
       {/* Image Generation Costs */}
       {imageCosts && imageCosts.entries.length > 0 && (
         <div className="bg-[#161b22] border border-[#21262d] rounded-2xl overflow-hidden mt-6 transition-all duration-300 hover:shadow-[0_0_32px_rgba(0,255,167,0.04)]">
diff --git a/dashboard/frontend/src/pages/Goals.tsx b/dashboard/frontend/src/pages/Goals.tsx
index 49c1edf41..b5d7aae11 100644
--- a/dashboard/frontend/src/pages/Goals.tsx
+++ b/dashboard/frontend/src/pages/Goals.tsx
@@ -1,10 +1,12 @@
 import { useEffect, useState, useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
+import { useSearchParams, useNavigate } from 'react-router-dom'
 import {
   Target, ChevronDown, ChevronRight, Plus, RefreshCw,
   CheckCircle2, Circle, Clock, XCircle, PauseCircle,
-  X,
+  X, Ticket as TicketIcon, ArrowUp, Minus, ArrowDown,
 } from 'lucide-react'
+import CreateProjectModal from '../components/CreateProjectModal'
 
 // ---- Types ----
 
@@ -21,6 +23,15 @@ interface GoalTask {
   updated_at: string
 }
 
+interface GoalTicket {
+  id: string
+  title: string
+  status: 'open' | 'in_progress' | 'blocked' | 'review' | 'resolved' | 'closed'
+  priority: 'urgent' | 'high' | 'medium' | 'low'
+  assignee_agent: string | null
+  due_date: string | null
+}
+
 interface Goal {
   id: number
   slug: string
@@ -33,9 +44,14 @@ interface Goal {
   current_value: number
   due_date: string | null
   status: 'active' | 'achieved' | 'on-hold' | 'cancelled'
+  parent_goal_id: number | null
   created_at: string
   updated_at: string
+  // Legacy, frozen since goal-ticket-unification — kept only for goals that
+  // predate it. New work lives in `tickets` below.
   tasks?: GoalTask[]
+  // The real work items: tickets linked via tickets.goal_id.
+  tickets?: GoalTicket[]
 }
 
 interface GoalProject {
@@ -176,6 +192,27 @@ function Select(props: React.SelectHTMLAttributes<HTMLSelectElement>) {
 
 // ---- Task row ----
 
+const PRIORITY_ICON: Record<string, React.ReactNode> = {
+  urgent: <ArrowUp size={10} className="text-red-400" />,
+  high: <ArrowUp size={10} className="text-orange-400" />,
+  medium: <Minus size={10} className="text-yellow-400" />,
+  low: <ArrowDown size={10} className="text-[#667085]" />,
+}
+
+function PriorityBadge({ priority }: { priority: number | string | null | undefined }) {
+  if (priority === null || priority === undefined) return null
+  // GoalTask.priority is a legacy numeric rank; Ticket.priority is a label —
+  // normalize both to the same visual so the two lists read consistently.
+  const label = typeof priority === 'number'
+    ? (priority >= 4 ? 'urgent' : priority === 3 ? 'high' : priority === 2 ? 'medium' : 'low')
+    : priority
+  return (
+    <span className="inline-flex items-center gap-0.5 shrink-0" title={`priority: ${label}`}>
+      {PRIORITY_ICON[label] || null}
+    </span>
+  )
+}
+
 function TaskRow({ task, onStatusChange }: { task: GoalTask; onStatusChange: (id: number, status: string) => void }) {
   return (
     <div className="flex items-center gap-3 py-1.5 px-2 rounded-lg hover:bg-white/5 group">
@@ -185,6 +222,7 @@ function TaskRow({ task, onStatusChange }: { task: GoalTask; onStatusChange: (id
       >
         {statusIcon(task.status, 14)}
       </button>
+      <PriorityBadge priority={task.priority} />
       <span className={`text-xs flex-1 ${task.status === 'done' ? 'line-through text-[#667085]' : 'text-[#D0D5DD]'}`}>
         {task.title}
       </span>
@@ -200,6 +238,31 @@ function TaskRow({ task, onStatusChange }: { task: GoalTask; onStatusChange: (id
   )
 }
 
+function TicketRow({ ticket }: { ticket: GoalTicket }) {
+  const navigate = useNavigate()
+  const done = ticket.status === 'resolved' || ticket.status === 'closed'
+  return (
+    <div
+      onClick={() => navigate(`/tickets/${ticket.id}`)}
+      className="flex items-center gap-3 py-1.5 px-2 rounded-lg hover:bg-white/5 group cursor-pointer"
+    >
+      {statusIcon(ticket.status === 'resolved' || ticket.status === 'closed' ? 'done' : ticket.status === 'in_progress' ? 'in_progress' : 'open', 14)}
+      <PriorityBadge priority={ticket.priority} />
+      <span className={`text-xs flex-1 ${done ? 'line-through text-[#667085]' : 'text-[#D0D5DD]'}`}>
+        {ticket.title}
+      </span>
+      {ticket.assignee_agent && (
+        <span className="text-[10px] text-[#667085] shrink-0">@{ticket.assignee_agent}</span>
+      )}
+      {ticket.due_date && (
+        <span className={`text-[10px] shrink-0 ${isOverdue(ticket.due_date) ? 'text-red-400' : isDueSoon(ticket.due_date) ? 'text-yellow-400' : 'text-[#667085]'}`}>
+          {ticket.due_date}
+        </span>
+      )}
+    </div>
+  )
+}
+
 // ---- Goal row ----
 
 function GoalRow({
@@ -217,6 +280,8 @@ function GoalRow({
   const p = pct(goal.current_value, goal.target_value)
   const tasks = goal.tasks || []
   const doneTasks = tasks.filter((t) => t.status === 'done').length
+  const tickets = goal.tickets || []
+  const doneTickets = tickets.filter((tk) => tk.status === 'resolved' || tk.status === 'closed').length
 
   return (
     <div className="border border-[#21262d] rounded-lg mb-2 overflow-hidden">
@@ -226,6 +291,9 @@ function GoalRow({
       >
         {expanded ? <ChevronDown size={14} className="text-[#667085] shrink-0" /> : <ChevronRight size={14} className="text-[#667085] shrink-0" />}
         {statusIcon(goal.status)}
+        <span className="text-[8px] tracking-wider uppercase text-[#667085] bg-[#21262d] px-1.5 py-0.5 rounded shrink-0">
+          {goal.parent_goal_id ? 'Sub-meta' : 'Meta'}
+        </span>
         <span className="text-sm text-[#D0D5DD] flex-1 font-medium">{goal.title}</span>
 
         {/* Progress */}
@@ -258,16 +326,38 @@ function GoalRow({
 
       {expanded && (
         <div className="border-t border-[#21262d] bg-[#0C111D]/40 px-4 py-2">
-          {tasks.length === 0 ? (
-            <p className="text-xs text-[#667085] py-1">No tasks. <button onClick={() => onCreateTask(goal.id)} className="text-[#00FFA7] hover:underline">Add one</button></p>
-          ) : (
+          {/* Tickets are the real work items post goal-ticket-unification —
+              shown first, since this is what's actually being worked on. */}
+          {tickets.length > 0 && (
+            <div className="mb-2">
+              <div className="flex items-center gap-1.5 text-[10px] text-[#667085] mb-1">
+                <TicketIcon size={11} />
+                {doneTickets}/{tickets.length} tickets done
+              </div>
+              {tickets.map((tk) => (
+                <TicketRow key={tk.id} ticket={tk} />
+              ))}
+            </div>
+          )}
+
+          {/* Legacy goal_tasks — frozen since goal-ticket-unification, only
+              shown for goals that predate it. Never created going forward. */}
+          {tasks.length > 0 && (
             <div className="mb-1">
-              <div className="text-[10px] text-[#667085] mb-1">{doneTasks}/{tasks.length} tasks done</div>
+              <div className="text-[10px] text-[#667085] mb-1">
+                {doneTasks}/{tasks.length} tasks done (legado)
+              </div>
               {tasks.map((t) => (
                 <TaskRow key={t.id} task={t} onStatusChange={onTaskStatusChange} />
               ))}
             </div>
           )}
+
+          {tickets.length === 0 && tasks.length === 0 && (
+            <p className="text-xs text-[#667085] py-1">
+              Nenhum ticket ainda. <button onClick={() => onCreateTask(goal.id)} className="text-[#00FFA7] hover:underline">Adicionar um</button>
+            </p>
+          )}
           <button
             onClick={() => onCreateTask(goal.id)}
             className="flex items-center gap-1 text-xs text-[#667085] hover:text-[#00FFA7] transition-colors mt-1"
@@ -312,6 +402,7 @@ function ProjectCard({
       >
         {expanded ? <ChevronDown size={16} className="text-[#667085]" /> : <ChevronRight size={16} className="text-[#667085]" />}
         <div className="flex-1">
+          <span className="text-[9px] tracking-widest uppercase text-[#667085] font-semibold block">Projeto</span>
           <div className="flex items-center gap-2">
             <span className="text-white font-semibold text-sm">{project.title}</span>
             <span className="text-[10px] text-[#667085] bg-[#21262d] px-2 py-0.5 rounded-full">{project.slug}</span>
@@ -322,13 +413,16 @@ function ProjectCard({
         </div>
         <div className="flex items-center gap-4 shrink-0">
           <div className="text-right">
+            {/* Aggregate across child Goals — Project itself has no metric of
+                its own, this is a rollup, not a distinct target (see the
+                "Projeto" label above: it's a grouping, not a measurable). */}
             <div className="text-xs text-[#667085]">{active} active · {achieved} achieved</div>
             {totalTarget > 0 && (
               <div className="flex items-center gap-2 mt-1">
                 <div className="w-32">
                   <ProgressBar current={totalCurrent} target={totalTarget} />
                 </div>
-                <span className="text-xs text-[#00FFA7] font-mono">{pct(totalCurrent, totalTarget)}%</span>
+                <span className="text-xs text-[#667085] font-mono">{pct(totalCurrent, totalTarget)}% agregado</span>
               </div>
             )}
           </div>
@@ -362,6 +456,82 @@ function ProjectCard({
   )
 }
 
+// ---- Create Mission Modal ----
+
+function CreateMissionModal({ onClose, onCreated }: { onClose: () => void; onCreated: () => void }) {
+  const [form, setForm] = useState({
+    slug: '', title: '', description: '', target_metric: '', target_value: '', due_date: '', status: 'active',
+  })
+  const [loading, setLoading] = useState(false)
+  const [error, setError] = useState('')
+
+  const handleSubmit = async () => {
+    if (!form.slug || !form.title) { setError('Slug and title are required'); return }
+    setLoading(true)
+    try {
+      await apiFetch('/api/missions', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          ...form,
+          target_value: form.target_value ? Number(form.target_value) : undefined,
+        }),
+      })
+      onCreated()
+      onClose()
+    } catch (e: any) {
+      setError(e.message)
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  return (
+    <Modal title="Create Mission" onClose={onClose}>
+      {error && <div className="text-red-400 text-xs mb-3">{error}</div>}
+      <Field label="Slug (unique identifier)">
+        <Input value={form.slug} onChange={(e) => setForm({ ...form, slug: e.target.value })} placeholder="evo-revenue-1m-q4-2026" />
+      </Field>
+      <Field label="Title">
+        <Input value={form.title} onChange={(e) => setForm({ ...form, title: e.target.value })} placeholder="Evolution MRR $1M Q4 2026" />
+      </Field>
+      <Field label="Description">
+        <Input value={form.description} onChange={(e) => setForm({ ...form, description: e.target.value })} placeholder="Optional description" />
+      </Field>
+      <div className="grid grid-cols-2 gap-3">
+        <Field label="Target metric">
+          <Input value={form.target_metric} onChange={(e) => setForm({ ...form, target_metric: e.target.value })} placeholder="MRR" />
+        </Field>
+        <Field label="Target value">
+          <Input type="number" value={form.target_value} onChange={(e) => setForm({ ...form, target_value: e.target.value })} placeholder="1000000" />
+        </Field>
+      </div>
+      <div className="grid grid-cols-2 gap-3">
+        <Field label="Due date">
+          <Input type="date" value={form.due_date} onChange={(e) => setForm({ ...form, due_date: e.target.value })} />
+        </Field>
+        <Field label="Status">
+          <Select value={form.status} onChange={(e) => setForm({ ...form, status: e.target.value })}>
+            <option value="active">Active</option>
+            <option value="on-hold">On Hold</option>
+          </Select>
+        </Field>
+      </div>
+      <div className="flex justify-end gap-2 mt-4">
+        <button onClick={onClose} className="px-4 py-2 text-sm text-[#667085] hover:text-white transition-colors">Cancel</button>
+        <button
+          onClick={handleSubmit}
+          disabled={loading}
+          className="px-4 py-2 text-sm bg-[#00FFA7] text-black font-semibold rounded-lg hover:bg-[#00FFA7]/90 transition-colors disabled:opacity-50"
+        >
+          {loading ? 'Creating...' : 'Create'}
+        </button>
+      </div>
+    </Modal>
+  )
+}
+
+
 // ---- Create Goal Modal ----
 
 function CreateGoalModal({ projectId, onClose, onCreated }: { projectId: number; onClose: () => void; onCreated: () => void }) {
@@ -507,6 +677,7 @@ type DueFilter = 'all' | 'overdue' | 'this-week' | 'this-month'
 
 export default function Goals() {
   const { t } = useTranslation()
+  const [searchParams] = useSearchParams()
   const [missions, setMissions] = useState<Mission[]>([])
   const [loading, setLoading] = useState(true)
   const [error, setError] = useState('')
@@ -514,6 +685,8 @@ export default function Goals() {
   const [dueFilter, setDueFilter] = useState<DueFilter>('all')
   const [createGoalForProject, setCreateGoalForProject] = useState<number | null>(null)
   const [createTaskForGoal, setCreateTaskForGoal] = useState<number | null>(null)
+  const [showCreateMission, setShowCreateMission] = useState(false)
+  const [createProjectForMission, setCreateProjectForMission] = useState<number | null>(null)
 
   const load = useCallback(async () => {
     try {
@@ -528,8 +701,11 @@ export default function Goals() {
               ...proj,
               goals: await Promise.all(
                 (proj.goals || []).map(async (goal: Goal) => {
-                  const tasks = await apiFetch(`/api/goal-tasks?goal_id=${goal.id}`)
-                  return { ...goal, tasks }
+                  const [tasks, ticketsResp] = await Promise.all([
+                    apiFetch(`/api/goal-tasks?goal_id=${goal.id}`),
+                    apiFetch(`/api/tickets?goal_id=${goal.id}&limit=100&display_mode=all`),
+                  ])
+                  return { ...goal, tasks, tickets: ticketsResp.tickets || [] }
                 })
               ),
             }))
@@ -546,6 +722,14 @@ export default function Goals() {
 
   useEffect(() => { load() }, [load])
 
+  useEffect(() => {
+    if (loading) return
+    const projectId = searchParams.get('project')
+    if (!projectId) return
+    const el = document.getElementById(`project-${projectId}`)
+    el?.scrollIntoView({ behavior: 'smooth', block: 'center' })
+  }, [loading, missions, searchParams])
+
   const handleTaskStatusChange = async (taskId: number, status: string) => {
     try {
       await apiFetch(`/api/goal-tasks/${taskId}`, {
@@ -629,12 +813,20 @@ export default function Goals() {
             <p className="text-xs text-[#667085]">Mission → Project → Goal → Task hierarchy</p>
           </div>
         </div>
-        <button
-          onClick={load}
-          className="flex items-center gap-2 px-3 py-1.5 text-xs text-[#667085] hover:text-white border border-[#21262d] rounded-lg hover:border-[#344054] transition-colors"
-        >
-          <RefreshCw size={12} /> Refresh
-        </button>
+        <div className="flex items-center gap-2">
+          <button
+            onClick={() => setShowCreateMission(true)}
+            className="flex items-center gap-2 px-3 py-1.5 text-xs bg-[#00FFA7]/15 text-[#00FFA7] border border-[#00FFA7]/30 rounded-lg hover:bg-[#00FFA7]/25 transition-colors"
+          >
+            <Plus size={12} /> {t('goals.newMission')}
+          </button>
+          <button
+            onClick={load}
+            className="flex items-center gap-2 px-3 py-1.5 text-xs text-[#667085] hover:text-white border border-[#21262d] rounded-lg hover:border-[#344054] transition-colors"
+          >
+            <RefreshCw size={12} /> Refresh
+          </button>
+        </div>
       </div>
 
       {/* Top urgent goals stats */}
@@ -692,9 +884,15 @@ export default function Goals() {
       {filteredMissions.length === 0 ? (
         <div className="text-center py-16 px-4">
           <p className="text-sm text-[#e6edf3] mb-2">Nenhuma Mission criada ainda.</p>
-          <p className="text-xs text-[#667085] max-w-md mx-auto">
-            Missions são os objetivos de topo da sua organização. Projects e Goals descendem delas. Use a skill <code className="text-[#00FFA7]">/create-goal</code> para criar a primeira.
+          <p className="text-xs text-[#667085] max-w-md mx-auto mb-4">
+            Missions são os objetivos de topo da sua organização. Projects e Goals descendem delas.
           </p>
+          <button
+            onClick={() => setShowCreateMission(true)}
+            className="px-4 py-2 text-sm bg-[#00FFA7] text-black font-semibold rounded-lg hover:bg-[#00FFA7]/90 transition-colors"
+          >
+            Criar sua primeira Mission
+          </button>
         </div>
       ) : (
         filteredMissions.map((mission) => (
@@ -705,7 +903,8 @@ export default function Goals() {
                 <div className="flex items-center gap-3">
                   <Target size={18} className="text-[#00FFA7]" />
                   <div>
-                    <h2 className="text-white font-bold text-base">{mission.title}</h2>
+                    <span className="text-[9px] tracking-widest uppercase text-[#00FFA7]/70 font-semibold">Missão</span>
+                    <h2 className="text-white font-bold text-base leading-tight">{mission.title}</h2>
                     {mission.description && <p className="text-xs text-[#667085] mt-0.5">{mission.description}</p>}
                   </div>
                 </div>
@@ -730,21 +929,41 @@ export default function Goals() {
               <p className="text-xs text-[#667085] px-2">No projects in this mission.</p>
             ) : (
               (mission.projects || []).map((project) => (
-                <ProjectCard
-                  key={project.id}
-                  project={project}
-                  onTaskStatusChange={handleTaskStatusChange}
-                  onRecalculate={handleRecalculate}
-                  onCreateGoal={(pid) => setCreateGoalForProject(pid)}
-                  onCreateTask={(gid) => setCreateTaskForGoal(gid)}
-                />
+                <div id={`project-${project.id}`} key={project.id}>
+                  <ProjectCard
+                    project={project}
+                    onTaskStatusChange={handleTaskStatusChange}
+                    onRecalculate={handleRecalculate}
+                    onCreateGoal={(pid) => setCreateGoalForProject(pid)}
+                    onCreateTask={(gid) => setCreateTaskForGoal(gid)}
+                  />
+                </div>
               ))
             )}
+            <button
+              onClick={() => setCreateProjectForMission(mission.id)}
+              className="flex items-center gap-1 text-xs text-[#667085] hover:text-[#00FFA7] transition-colors mt-1 px-2"
+            >
+              <Plus size={12} /> {t('goals.newProject')}
+            </button>
           </div>
         ))
       )}
 
       {/* Modals */}
+      {showCreateMission && (
+        <CreateMissionModal
+          onClose={() => setShowCreateMission(false)}
+          onCreated={load}
+        />
+      )}
+      {createProjectForMission !== null && (
+        <CreateProjectModal
+          defaultMissionId={createProjectForMission}
+          onClose={() => setCreateProjectForMission(null)}
+          onCreated={load}
+        />
+      )}
       {createGoalForProject !== null && (
         <CreateGoalModal
           projectId={createGoalForProject}
diff --git a/dashboard/frontend/src/pages/Integrations.tsx b/dashboard/frontend/src/pages/Integrations.tsx
index 2499943be..6e321111e 100644
--- a/dashboard/frontend/src/pages/Integrations.tsx
+++ b/dashboard/frontend/src/pages/Integrations.tsx
@@ -39,6 +39,7 @@ import { api } from '../lib/api'
 import IntegrationDrawer from '../components/IntegrationDrawer'
 import { getIntegrationMeta } from '../lib/integrationMeta'
 import { useTranslation } from 'react-i18next'
+import PostizCoreConfigCard from '../components/PostizCoreConfigCard'
 
 interface EnvVarSpec {
   name: string
@@ -1262,6 +1263,8 @@ export default function Integrations() {
             </div>
           </div>
 
+          <PostizCoreConfigCard />
+
           {/* Core Integrations */}
           <div className="mb-10">
             <div className="flex items-center gap-2.5 mb-4">
diff --git a/dashboard/frontend/src/pages/Kanban.tsx b/dashboard/frontend/src/pages/Kanban.tsx
new file mode 100644
index 000000000..00a358598
--- /dev/null
+++ b/dashboard/frontend/src/pages/Kanban.tsx
@@ -0,0 +1,301 @@
+import { useCallback, useEffect, useMemo, useState } from 'react'
+import { useNavigate } from 'react-router-dom'
+import {
+  AlertTriangle,
+  ArrowDown,
+  ArrowUp,
+  CheckCircle,
+  Clock,
+  Columns3,
+  Eye,
+  Lock,
+  Minus,
+  Plus,
+  RefreshCw,
+  Search,
+  Ticket,
+  XCircle,
+} from 'lucide-react'
+import { AgentIcon } from '../components/AgentIcon'
+import { useToast } from '../components/Toast'
+import { api } from '../lib/api'
+import CreateTicketModal, { type CreatedTicket } from '../components/CreateTicketModal'
+
+type TicketStatus = 'open' | 'in_progress' | 'blocked' | 'review' | 'resolved' | 'closed' | 'archived'
+type TicketPriority = 'urgent' | 'high' | 'medium' | 'low'
+
+interface TicketItem {
+  id: string
+  title: string
+  description: string | null
+  status: TicketStatus
+  priority: TicketPriority
+  priority_rank: number
+  assignee_agent: string | null
+  locked_at: string | null
+  locked_by: string | null
+  updated_at: string
+  is_thread: boolean
+}
+
+const STATUSES: Array<{ id: TicketStatus; label: string; icon: React.ReactNode; tone: string }> = [
+  { id: 'open', label: 'Open', icon: <Clock size={13} />, tone: 'text-blue-400 border-blue-500/25 bg-blue-500/10' },
+  { id: 'in_progress', label: 'In Progress', icon: <RefreshCw size={13} />, tone: 'text-[#00FFA7] border-[#00FFA7]/25 bg-[#00FFA7]/10' },
+  { id: 'blocked', label: 'Blocked', icon: <AlertTriangle size={13} />, tone: 'text-red-400 border-red-500/25 bg-red-500/10' },
+  { id: 'review', label: 'Review', icon: <Eye size={13} />, tone: 'text-purple-400 border-purple-500/25 bg-purple-500/10' },
+  { id: 'resolved', label: 'Resolved', icon: <CheckCircle size={13} />, tone: 'text-gray-300 border-gray-500/25 bg-gray-500/10' },
+  { id: 'closed', label: 'Closed', icon: <XCircle size={13} />, tone: 'text-[#667085] border-[#344054] bg-[#21262d]' },
+]
+
+const PRIORITY_ICON: Record<TicketPriority, React.ReactNode> = {
+  urgent: <ArrowUp size={11} />,
+  high: <ArrowUp size={11} className="opacity-70" />,
+  medium: <Minus size={11} />,
+  low: <ArrowDown size={11} />,
+}
+
+const PRIORITY_TONE: Record<TicketPriority, string> = {
+  urgent: 'text-red-400 border-red-500/25 bg-red-500/10',
+  high: 'text-orange-400 border-orange-500/25 bg-orange-500/10',
+  medium: 'text-yellow-400 border-yellow-500/25 bg-yellow-500/10',
+  low: 'text-[#667085] border-[#344054] bg-[#21262d]',
+}
+
+const PRIORITY_RAIL: Record<TicketPriority, string> = {
+  urgent: 'bg-red-500',
+  high: 'bg-orange-400',
+  medium: 'bg-yellow-400',
+  low: 'bg-[#344054]',
+}
+
+function formatAge(iso: string): string {
+  const diff = Date.now() - new Date(iso).getTime()
+  const minutes = Math.max(1, Math.floor(diff / 60000))
+  if (minutes < 60) return `${minutes}m`
+  const hours = Math.floor(minutes / 60)
+  if (hours < 48) return `${hours}h`
+  return `${Math.floor(hours / 24)}d`
+}
+
+export default function Kanban() {
+  const navigate = useNavigate()
+  const toast = useToast()
+  const [tickets, setTickets] = useState<TicketItem[]>([])
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState<string | null>(null)
+  const [query, setQuery] = useState('')
+  const [updating, setUpdating] = useState<string | null>(null)
+  const [showCreateModal, setShowCreateModal] = useState(false)
+
+  const fetchTickets = useCallback(async () => {
+    setLoading(true)
+    setError(null)
+    try {
+      const params = new URLSearchParams()
+      params.set('limit', '500')
+      params.set('display_mode', 'all')
+      if (query.trim()) params.set('q', query.trim())
+      const data = await api.get(`/tickets?${params.toString()}`)
+      setTickets((data.tickets || []).filter((t: TicketItem) => t.status !== 'archived'))
+    } catch (err: any) {
+      setError(err?.message || 'Failed to load Kanban')
+    } finally {
+      setLoading(false)
+    }
+  }, [query])
+
+  useEffect(() => {
+    fetchTickets()
+  }, [fetchTickets])
+
+  const grouped = useMemo(() => {
+    const base = Object.fromEntries(STATUSES.map((s) => [s.id, [] as TicketItem[]])) as Record<TicketStatus, TicketItem[]>
+    tickets.forEach((ticket) => {
+      if (base[ticket.status]) base[ticket.status].push(ticket)
+    })
+    return base
+  }, [tickets])
+
+  const moveTicket = async (ticket: TicketItem, status: TicketStatus) => {
+    if (ticket.status === status) return
+    const previous = tickets
+    setUpdating(ticket.id)
+    setTickets((current) => current.map((item) => item.id === ticket.id ? { ...item, status } : item))
+    try {
+      await api.patch(`/tickets/${ticket.id}`, { status })
+    } catch (err: any) {
+      setTickets(previous)
+      toast.error('Falha ao mover ticket', err?.message)
+    } finally {
+      setUpdating(null)
+    }
+  }
+
+  const handleTicketCreated = (ticket: CreatedTicket) => {
+    setTickets((current) => [ticket as unknown as TicketItem, ...current])
+  }
+
+  return (
+    <div className="min-h-screen bg-[#0C111D]">
+      <div className="flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between mb-6">
+        <div className="flex items-center gap-3">
+          <div className="w-10 h-10 rounded-xl bg-[#161b22] border border-[#21262d] flex items-center justify-center">
+            <Columns3 size={20} className="text-[#00FFA7]" />
+          </div>
+          <div>
+            <h1 className="text-2xl font-bold text-[#e6edf3]">Kanban</h1>
+            <p className="text-sm text-[#667085]">{tickets.length} tickets ativos por status operacional</p>
+          </div>
+        </div>
+
+        <div className="flex items-center gap-2">
+          <div className="relative">
+            <Search size={14} className="absolute left-3 top-1/2 -translate-y-1/2 text-[#667085]" />
+            <input
+              value={query}
+              onChange={(e) => setQuery(e.target.value)}
+              placeholder="Buscar tickets..."
+              className="w-56 bg-[#161b22] border border-[#21262d] rounded-lg pl-9 pr-3 py-2 text-sm text-[#e6edf3] placeholder-[#667085] focus:outline-none focus:border-[#00FFA7]/50 transition-colors"
+            />
+          </div>
+          <button
+            onClick={fetchTickets}
+            className="flex items-center gap-2 px-3 py-2 text-xs border border-[#21262d] bg-[#161b22] text-[#667085] hover:text-[#00FFA7] hover:border-[#00FFA7]/30 rounded-lg transition-colors"
+          >
+            <RefreshCw size={14} className={loading ? 'animate-spin' : ''} />
+            Atualizar
+          </button>
+          <button
+            onClick={() => setShowCreateModal(true)}
+            className="flex items-center gap-2 px-3 py-2 text-xs font-semibold bg-[#00FFA7] text-black rounded-lg hover:bg-[#00FFA7]/90 transition-colors"
+          >
+            <Plus size={14} />
+            Novo ticket
+          </button>
+        </div>
+      </div>
+
+      {error && (
+        <div className="mb-4 px-4 py-3 bg-red-500/10 border border-red-500/20 rounded-xl text-sm text-red-400">
+          {error}
+        </div>
+      )}
+
+      {/* Mobile/tablet (<xl): horizontal snap-scroll, one column at a time — avoids
+          stacking 6 full-height sections vertically (~3000px of scroll). At xl+
+          (1280px), enough width exists for all 6 columns side by side without
+          scrolling, so we drop the scroll/snap behavior and let the grid share
+          the viewport naturally instead of forcing a hardcoded min-width that
+          exceeded common 1280-1439px desktop/laptop viewports and cropped them. */}
+      <div className="flex xl:grid xl:grid-cols-6 gap-3 pb-4 overflow-x-auto xl:overflow-visible snap-x snap-mandatory xl:snap-none -mx-4 px-4 xl:mx-0 xl:px-0">
+        {STATUSES.map((column) => {
+          const items = grouped[column.id] || []
+          return (
+            <section
+              key={column.id}
+              className="bg-[#161b22] border border-[#21262d] rounded-xl min-h-[420px] xl:min-h-[520px] w-[85vw] sm:w-[320px] xl:w-auto shrink-0 xl:shrink flex flex-col snap-start xl:snap-align-none"
+            >
+              <header className="flex items-center justify-between px-3 py-3 border-b border-[#21262d]">
+                <span className={`inline-flex items-center gap-1.5 px-2 py-1 rounded-full border text-xs font-medium ${column.tone}`}>
+                  {column.icon}
+                  {column.label}
+                </span>
+                <span className="text-xs text-[#667085]">{items.length}</span>
+              </header>
+
+              <div className="flex-1 p-2 space-y-2">
+                {loading ? (
+                  <div className="text-xs text-[#667085] px-2 py-6 text-center">Carregando...</div>
+                ) : items.length === 0 ? (
+                  <div className="text-xs text-[#667085] px-2 py-6 text-center border border-dashed border-[#21262d] rounded-lg">
+                    Vazio
+                  </div>
+                ) : (
+                  items.map((ticket) => (
+                    <article
+                      key={ticket.id}
+                      className="group relative overflow-hidden bg-[#0C111D] border border-[#21262d] hover:border-[#344054] rounded-lg pl-3.5 pr-3 py-3 transition-colors"
+                    >
+                      <span
+                        aria-hidden="true"
+                        className={`absolute left-0 top-0 bottom-0 w-[3px] ${PRIORITY_RAIL[ticket.priority]}`}
+                      />
+
+                      <button
+                        onClick={() => navigate(`/tickets/${ticket.id}`)}
+                        className="w-full text-left"
+                      >
+                        <div className="flex items-start gap-2">
+                          {ticket.is_thread ? (
+                            ticket.assignee_agent ? <AgentIcon agent={ticket.assignee_agent} size={18} /> : <Ticket size={14} className="text-[#00FFA7] mt-0.5" />
+                          ) : (
+                            <Ticket size={14} className="text-[#667085] mt-0.5" />
+                          )}
+                          <div className="min-w-0 flex-1">
+                            <div className="flex items-start gap-1.5">
+                              <h2 className="font-display text-[13.5px] font-semibold text-[#e6edf3] leading-snug tracking-tight line-clamp-2">
+                                {ticket.title}
+                              </h2>
+                              {ticket.locked_at && <Lock size={12} className="text-orange-400 shrink-0 mt-0.5" aria-label={`Locked by ${ticket.locked_by || 'agent'}`} />}
+                            </div>
+                            {ticket.description && (
+                              <p className="mt-1 text-xs text-[#8b949e] leading-relaxed line-clamp-2">{ticket.description}</p>
+                            )}
+                          </div>
+                        </div>
+                      </button>
+
+                      <div className="mt-3 flex items-center justify-between gap-2">
+                        <span className={`inline-flex items-center gap-1 px-1.5 py-0.5 rounded border font-ticket-mono text-[10px] font-medium uppercase tracking-wide ${PRIORITY_TONE[ticket.priority]}`}>
+                          {PRIORITY_ICON[ticket.priority]}
+                          {ticket.priority}
+                        </span>
+                        <span className="font-ticket-mono text-[10px] text-[#667085]">{formatAge(ticket.updated_at)}</span>
+                      </div>
+
+                      <div className="mt-2.5 pt-2.5 border-t border-[#21262d]/60 flex items-center justify-between gap-2">
+                        <span className="font-ticket-mono text-[10px] text-[#667085] truncate">
+                          {ticket.assignee_agent ? `@${ticket.assignee_agent}` : 'sem agente'}
+                        </span>
+                        <select
+                          value={ticket.status}
+                          disabled={updating === ticket.id}
+                          onChange={(e) => moveTicket(ticket, e.target.value as TicketStatus)}
+                          className="max-w-[112px] bg-[#161b22] border border-[#21262d] rounded-md px-2 py-1 text-[11px] text-[#e6edf3] focus:outline-none focus:border-[#00FFA7]/50 disabled:opacity-60"
+                          aria-label="Mover ticket"
+                        >
+                          {STATUSES.map((s) => (
+                            <option key={s.id} value={s.id}>{s.label}</option>
+                          ))}
+                        </select>
+                      </div>
+                    </article>
+                  ))
+                )}
+              </div>
+            </section>
+          )
+        })}
+      </div>
+
+      {tickets.length === 0 && !loading && (
+        <div className="mt-2 flex items-center justify-center gap-3 text-xs text-[#667085]">
+          Nenhum ticket ativo ainda.
+          <button
+            onClick={() => setShowCreateModal(true)}
+            className="flex items-center gap-1.5 text-[#00FFA7] hover:underline"
+          >
+            <Plus size={12} /> Criar o primeiro ticket
+          </button>
+        </div>
+      )}
+
+      {showCreateModal && (
+        <CreateTicketModal
+          onClose={() => setShowCreateModal(false)}
+          onCreated={handleTicketCreated}
+        />
+      )}
+    </div>
+  )
+}
diff --git a/dashboard/frontend/src/pages/Media.tsx b/dashboard/frontend/src/pages/Media.tsx
new file mode 100644
index 000000000..015234aae
--- /dev/null
+++ b/dashboard/frontend/src/pages/Media.tsx
@@ -0,0 +1,502 @@
+import { useEffect, useState, useCallback } from 'react'
+import {
+  Video, Plus, RefreshCw, Play, X, CheckCircle2, XCircle, AlertCircle,
+  Clock, Loader2, Upload, CalendarClock, FileText, Film,
+} from 'lucide-react'
+import { api } from '../lib/api'
+
+// "Mídias" — MediaJob pipeline management UI (social-media-production,
+// briefing Etapa 14). Priority: functionality + consistency with the
+// existing dark theme, not a from-scratch design system (briefing:
+// "Para o MVP, priorize funcionalidade... Não reescreva todo o frontend").
+
+const PLATFORMS = ['instagram', 'youtube', 'linkedin', 'tiktok'] as const
+const FORMATS = ['vertical', 'horizontal', 'square'] as const
+
+interface MediaJob {
+  id: string
+  project_id: number | null
+  campaign_id: string | null
+  title: string
+  brief: string | null
+  platform: string
+  format: string
+  width: number
+  height: number
+  fps: number
+  duration_seconds: number
+  caption: string | null
+  publication_mode: 'draft' | 'schedule'
+  scheduled_at: string | null
+  scheduled_at_utc: string | null
+  timezone: string
+  status: string
+  render_path: string | null
+  render_sha256: string | null
+  render_size_bytes: number | null
+  render_duration_seconds: number | null
+  postiz_media_id: string | null
+  postiz_post_id: string | null
+  attempt_count: number
+  last_error: string | null
+  reject_reason: string | null
+  created_at: string
+  updated_at: string
+  approved_at: string | null
+}
+
+const STATUS_COLOR: Record<string, string> = {
+  queued: '#8b949e',
+  preparing: '#58a6ff',
+  generating: '#58a6ff',
+  rendering: '#d29922',
+  validating: '#d29922',
+  ready_for_review: '#a371f7',
+  rejected: '#f85149',
+  approved: '#00FFA7',
+  uploading: '#58a6ff',
+  creating_draft: '#58a6ff',
+  draft_created: '#00FFA7',
+  scheduling: '#d29922',
+  scheduled: '#00FFA7',
+  published: '#00FFA7',
+  retryable_failure: '#d29922',
+  failed: '#f85149',
+  cancelled: '#8b949e',
+}
+
+function StatusBadge({ status }: { status: string }) {
+  const color = STATUS_COLOR[status] || '#8b949e'
+  return (
+    <span
+      className="text-xs px-2 py-0.5 rounded-full border whitespace-nowrap"
+      style={{ color, borderColor: `${color}55`, background: `${color}14` }}
+    >
+      {status}
+    </span>
+  )
+}
+
+function fmtBytes(n: number | null): string {
+  if (!n) return '—'
+  if (n < 1024 * 1024) return `${(n / 1024).toFixed(0)} KB`
+  return `${(n / (1024 * 1024)).toFixed(1)} MB`
+}
+
+const emptyForm = {
+  title: '', brief: '', platform: 'instagram' as (typeof PLATFORMS)[number],
+  format: 'vertical' as (typeof FORMATS)[number], width: 1080, height: 1920, fps: 30,
+  duration_seconds: 20, language: 'pt-BR', caption: '', publication_mode: 'draft' as 'draft' | 'schedule',
+  scheduled_at: '', timezone: 'America/Bahia', project_id: '',
+}
+
+export default function Media() {
+  const [jobs, setJobs] = useState<MediaJob[]>([])
+  const [loading, setLoading] = useState(true)
+  const [statusFilter, setStatusFilter] = useState<string>('')
+  const [error, setError] = useState<string | null>(null)
+
+  const [createOpen, setCreateOpen] = useState(false)
+  const [form, setForm] = useState(emptyForm)
+  const [creating, setCreating] = useState(false)
+
+  const [selected, setSelected] = useState<MediaJob | null>(null)
+  const [logs, setLogs] = useState<{ logs: Record<string, string>; last_error: string | null } | null>(null)
+  const [rejectReason, setRejectReason] = useState('')
+  const [busy, setBusy] = useState(false)
+
+  const load = useCallback(() => {
+    setLoading(true)
+    setError(null)
+    const qs = statusFilter ? `?status=${statusFilter}` : ''
+    api.get(`/media/jobs${qs}`)
+      .then((data) => setJobs(Array.isArray(data) ? data : []))
+      .catch((e) => setError(e?.message || 'Falha ao carregar mídias'))
+      .finally(() => setLoading(false))
+  }, [statusFilter])
+
+  useEffect(() => { load() }, [load])
+
+  const openDetail = (job: MediaJob) => {
+    setSelected(job)
+    setLogs(null)
+    api.get(`/media/jobs/${job.id}/logs`).then(setLogs).catch(() => {})
+  }
+
+  const refreshSelected = async () => {
+    if (!selected) return
+    try {
+      const fresh = await api.get(`/media/jobs/${selected.id}`)
+      setSelected(fresh)
+      setJobs((prev) => prev.map((j) => (j.id === fresh.id ? fresh : j)))
+      api.get(`/media/jobs/${fresh.id}/logs`).then(setLogs).catch(() => {})
+    } catch { /* ignore */ }
+  }
+
+  const handleCreate = async () => {
+    setCreating(true)
+    setError(null)
+    try {
+      const body: Record<string, unknown> = {
+        title: form.title,
+        brief: form.brief || undefined,
+        platform: form.platform,
+        format: form.format,
+        width: Number(form.width),
+        height: Number(form.height),
+        fps: Number(form.fps),
+        duration_seconds: Number(form.duration_seconds),
+        language: form.language,
+        caption: form.caption || undefined,
+        publication_mode: form.publication_mode,
+        timezone: form.timezone,
+      }
+      if (form.scheduled_at) body.scheduled_at = form.scheduled_at
+      if (form.project_id) body.project_id = Number(form.project_id)
+      await api.post('/media/jobs', body)
+      setCreateOpen(false)
+      setForm(emptyForm)
+      load()
+    } catch (e: any) {
+      setError(e?.message || 'Falha ao criar mídia')
+    } finally {
+      setCreating(false)
+    }
+  }
+
+  const action = async (job: MediaJob, path: string, body?: unknown) => {
+    setBusy(true)
+    setError(null)
+    try {
+      await api.post(`/media/jobs/${job.id}/${path}`, body)
+      load()
+      if (selected?.id === job.id) refreshSelected()
+    } catch (e: any) {
+      setError(e?.message || `Falha em ${path}`)
+    } finally {
+      setBusy(false)
+    }
+  }
+
+  return (
+    <div className="p-6 max-w-[1400px] mx-auto">
+      <div className="flex items-center justify-between mb-6">
+        <div className="flex items-center gap-2.5">
+          <div className="flex items-center justify-center w-9 h-9 rounded-xl bg-[#00FFA7]/8 border border-[#00FFA7]/15">
+            <Video size={18} className="text-[#00FFA7]" />
+          </div>
+          <div>
+            <h1 className="text-lg font-semibold text-[#e6edf3]">Mídias</h1>
+            <p className="text-xs text-[#8b949e]">Produção de vídeo social — briefing → HyperFrames → validação → Postiz</p>
+          </div>
+        </div>
+        <div className="flex items-center gap-2">
+          <select
+            value={statusFilter}
+            onChange={(e) => setStatusFilter(e.target.value)}
+            className="bg-[#0d1117] border border-[#21262d] rounded-lg px-3 py-1.5 text-sm text-[#e6edf3]"
+          >
+            <option value="">Todos os status</option>
+            {Object.keys(STATUS_COLOR).map((s) => (
+              <option key={s} value={s}>{s}</option>
+            ))}
+          </select>
+          <button onClick={load} className="p-2 rounded-lg text-[#8b949e] hover:text-[#e6edf3] hover:bg-[#21262d]">
+            <RefreshCw size={16} />
+          </button>
+          <button
+            onClick={() => setCreateOpen(true)}
+            className="flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-sm font-medium bg-[#00FFA7]/10 border border-[#00FFA7]/30 text-[#00FFA7] hover:bg-[#00FFA7]/15"
+          >
+            <Plus size={14} /> Criar Mídia
+          </button>
+        </div>
+      </div>
+
+      {error && (
+        <div className="mb-4 flex items-center gap-2 text-sm text-[#f85149] bg-[#f85149]/10 border border-[#f85149]/30 rounded-lg px-3 py-2">
+          <AlertCircle size={14} /> {error}
+        </div>
+      )}
+
+      <div className="rounded-xl border border-[#21262d] bg-[#161b22] overflow-hidden">
+        <table className="w-full text-sm">
+          <thead>
+            <tr className="border-b border-[#21262d] text-[#8b949e] text-xs uppercase tracking-wide">
+              <th className="text-left px-4 py-2.5 font-medium">Título</th>
+              <th className="text-left px-4 py-2.5 font-medium">Plataforma</th>
+              <th className="text-left px-4 py-2.5 font-medium">Status</th>
+              <th className="text-left px-4 py-2.5 font-medium">Duração</th>
+              <th className="text-left px-4 py-2.5 font-medium">Tamanho</th>
+              <th className="text-left px-4 py-2.5 font-medium">Tentativas</th>
+              <th className="text-left px-4 py-2.5 font-medium">Postiz</th>
+              <th className="text-left px-4 py-2.5 font-medium">Ações</th>
+            </tr>
+          </thead>
+          <tbody>
+            {loading ? (
+              <tr><td colSpan={8} className="px-4 py-8 text-center text-[#8b949e]">
+                <Loader2 size={16} className="animate-spin inline mr-2" /> Carregando...
+              </td></tr>
+            ) : jobs.length === 0 ? (
+              <tr><td colSpan={8} className="px-4 py-8 text-center text-[#8b949e]">Nenhuma mídia ainda.</td></tr>
+            ) : jobs.map((job) => (
+              <tr
+                key={job.id}
+                className="border-b border-[#21262d]/60 hover:bg-[#0d1117]/60 cursor-pointer"
+                onClick={() => openDetail(job)}
+              >
+                <td className="px-4 py-2.5 text-[#e6edf3]">
+                  {job.title}
+                  {job.last_error && (
+                    <div className="text-[11px] text-[#f85149] truncate max-w-[280px]">{job.last_error}</div>
+                  )}
+                </td>
+                <td className="px-4 py-2.5 text-[#8b949e]">{job.platform}</td>
+                <td className="px-4 py-2.5"><StatusBadge status={job.status} /></td>
+                <td className="px-4 py-2.5 text-[#8b949e]">{job.render_duration_seconds ?? job.duration_seconds}s</td>
+                <td className="px-4 py-2.5 text-[#8b949e]">{fmtBytes(job.render_size_bytes)}</td>
+                <td className="px-4 py-2.5 text-[#8b949e]">{job.attempt_count}</td>
+                <td className="px-4 py-2.5 text-[#8b949e] text-xs">
+                  {job.postiz_post_id ? `post: ${job.postiz_post_id.slice(0, 10)}…` : '—'}
+                </td>
+                <td className="px-4 py-2.5" onClick={(e) => e.stopPropagation()}>
+                  <div className="flex items-center gap-1.5">
+                    {['queued', 'rejected', 'retryable_failure'].includes(job.status) && (
+                      <button
+                        disabled={busy}
+                        onClick={() => action(job, 'run')}
+                        title="Iniciar"
+                        className="p-1.5 rounded-lg text-[#00FFA7] hover:bg-[#00FFA7]/10"
+                      ><Play size={14} /></button>
+                    )}
+                    {!['published', 'failed', 'cancelled'].includes(job.status) && (
+                      <button
+                        disabled={busy}
+                        onClick={() => action(job, 'cancel')}
+                        title="Cancelar"
+                        className="p-1.5 rounded-lg text-[#f85149] hover:bg-[#f85149]/10"
+                      ><X size={14} /></button>
+                    )}
+                  </div>
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+
+      {/* Create modal */}
+      {createOpen && (
+        <div className="fixed inset-0 bg-black/60 flex items-center justify-center z-50 p-4" onClick={() => setCreateOpen(false)}>
+          <div
+            className="bg-[#161b22] border border-[#21262d] rounded-2xl p-6 w-full max-w-2xl max-h-[85vh] overflow-y-auto"
+            onClick={(e) => e.stopPropagation()}
+          >
+            <div className="flex items-center justify-between mb-4">
+              <h2 className="text-base font-semibold text-[#e6edf3]">Nova Mídia</h2>
+              <button onClick={() => setCreateOpen(false)} className="text-[#8b949e] hover:text-[#e6edf3]"><X size={18} /></button>
+            </div>
+            <div className="grid grid-cols-2 gap-3">
+              <div className="col-span-2">
+                <label className="block text-xs text-[#8b949e] mb-1">Título *</label>
+                <input value={form.title} onChange={(e) => setForm((f) => ({ ...f, title: e.target.value }))}
+                  className="w-full bg-[#0d1117] border border-[#21262d] rounded-lg px-3 py-2 text-sm text-[#e6edf3]" />
+              </div>
+              <div className="col-span-2">
+                <label className="block text-xs text-[#8b949e] mb-1">Briefing</label>
+                <textarea value={form.brief} onChange={(e) => setForm((f) => ({ ...f, brief: e.target.value }))} rows={3}
+                  className="w-full bg-[#0d1117] border border-[#21262d] rounded-lg px-3 py-2 text-sm text-[#e6edf3]" />
+              </div>
+              <div>
+                <label className="block text-xs text-[#8b949e] mb-1">Plataforma</label>
+                <select value={form.platform} onChange={(e) => setForm((f) => ({ ...f, platform: e.target.value as any }))}
+                  className="w-full bg-[#0d1117] border border-[#21262d] rounded-lg px-3 py-2 text-sm text-[#e6edf3]">
+                  {PLATFORMS.map((p) => <option key={p} value={p}>{p}</option>)}
+                </select>
+              </div>
+              <div>
+                <label className="block text-xs text-[#8b949e] mb-1">Formato</label>
+                <select value={form.format} onChange={(e) => setForm((f) => ({ ...f, format: e.target.value as any }))}
+                  className="w-full bg-[#0d1117] border border-[#21262d] rounded-lg px-3 py-2 text-sm text-[#e6edf3]">
+                  {FORMATS.map((f) => <option key={f} value={f}>{f}</option>)}
+                </select>
+              </div>
+              <div>
+                <label className="block text-xs text-[#8b949e] mb-1">Largura (px)</label>
+                <input type="number" value={form.width} onChange={(e) => setForm((f) => ({ ...f, width: Number(e.target.value) }))}
+                  className="w-full bg-[#0d1117] border border-[#21262d] rounded-lg px-3 py-2 text-sm text-[#e6edf3]" />
+              </div>
+              <div>
+                <label className="block text-xs text-[#8b949e] mb-1">Altura (px)</label>
+                <input type="number" value={form.height} onChange={(e) => setForm((f) => ({ ...f, height: Number(e.target.value) }))}
+                  className="w-full bg-[#0d1117] border border-[#21262d] rounded-lg px-3 py-2 text-sm text-[#e6edf3]" />
+              </div>
+              <div>
+                <label className="block text-xs text-[#8b949e] mb-1">FPS</label>
+                <select value={form.fps} onChange={(e) => setForm((f) => ({ ...f, fps: Number(e.target.value) }))}
+                  className="w-full bg-[#0d1117] border border-[#21262d] rounded-lg px-3 py-2 text-sm text-[#e6edf3]">
+                  {[24, 30, 60].map((f) => <option key={f} value={f}>{f}</option>)}
+                </select>
+              </div>
+              <div>
+                <label className="block text-xs text-[#8b949e] mb-1">Duração (s)</label>
+                <input type="number" value={form.duration_seconds} onChange={(e) => setForm((f) => ({ ...f, duration_seconds: Number(e.target.value) }))}
+                  className="w-full bg-[#0d1117] border border-[#21262d] rounded-lg px-3 py-2 text-sm text-[#e6edf3]" />
+              </div>
+              <div className="col-span-2">
+                <label className="block text-xs text-[#8b949e] mb-1">Legenda sugerida</label>
+                <textarea value={form.caption} onChange={(e) => setForm((f) => ({ ...f, caption: e.target.value }))} rows={2}
+                  className="w-full bg-[#0d1117] border border-[#21262d] rounded-lg px-3 py-2 text-sm text-[#e6edf3]" />
+              </div>
+              <div>
+                <label className="block text-xs text-[#8b949e] mb-1">Modo de publicação</label>
+                <select value={form.publication_mode} onChange={(e) => setForm((f) => ({ ...f, publication_mode: e.target.value as any }))}
+                  className="w-full bg-[#0d1117] border border-[#21262d] rounded-lg px-3 py-2 text-sm text-[#e6edf3]">
+                  <option value="draft">draft</option>
+                  <option value="schedule">schedule</option>
+                </select>
+              </div>
+              <div>
+                <label className="block text-xs text-[#8b949e] mb-1">Data desejada ({form.timezone})</label>
+                <input type="datetime-local" value={form.scheduled_at} onChange={(e) => setForm((f) => ({ ...f, scheduled_at: e.target.value }))}
+                  className="w-full bg-[#0d1117] border border-[#21262d] rounded-lg px-3 py-2 text-sm text-[#e6edf3]" />
+              </div>
+              <div>
+                <label className="block text-xs text-[#8b949e] mb-1">Project ID (opcional)</label>
+                <input value={form.project_id} onChange={(e) => setForm((f) => ({ ...f, project_id: e.target.value }))}
+                  className="w-full bg-[#0d1117] border border-[#21262d] rounded-lg px-3 py-2 text-sm text-[#e6edf3]" />
+              </div>
+            </div>
+            <div className="flex justify-end gap-2 mt-5">
+              <button onClick={() => setCreateOpen(false)} className="px-3 py-1.5 rounded-lg text-sm text-[#8b949e] hover:bg-[#21262d]">Cancelar</button>
+              <button
+                disabled={creating || !form.title}
+                onClick={handleCreate}
+                className="px-3 py-1.5 rounded-lg text-sm font-medium bg-[#00FFA7]/10 border border-[#00FFA7]/30 text-[#00FFA7] hover:bg-[#00FFA7]/15 disabled:opacity-50"
+              >
+                {creating ? 'Criando...' : 'Criar e enfileirar'}
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+
+      {/* Detail drawer */}
+      {selected && (
+        <div className="fixed inset-0 bg-black/60 flex justify-end z-50" onClick={() => setSelected(null)}>
+          <div className="bg-[#161b22] border-l border-[#21262d] w-full max-w-xl h-full overflow-y-auto p-6" onClick={(e) => e.stopPropagation()}>
+            <div className="flex items-center justify-between mb-4">
+              <h2 className="text-base font-semibold text-[#e6edf3]">{selected.title}</h2>
+              <button onClick={() => setSelected(null)} className="text-[#8b949e] hover:text-[#e6edf3]"><X size={18} /></button>
+            </div>
+
+            <div className="flex items-center gap-2 mb-4">
+              <StatusBadge status={selected.status} />
+              <span className="text-xs text-[#8b949e]">{selected.platform} · {selected.format} · {selected.width}x{selected.height} · {selected.fps}fps</span>
+            </div>
+
+            {selected.render_path && ['ready_for_review', 'approved', 'uploading', 'creating_draft', 'draft_created', 'scheduling', 'scheduled', 'published'].includes(selected.status) && (
+              <div className="mb-4 rounded-lg overflow-hidden border border-[#21262d] bg-black">
+                <video
+                  key={selected.id}
+                  controls
+                  className="w-full max-h-[360px]"
+                  src={`/api/media/jobs/${selected.id}/video`}
+                >
+                  <Film size={24} />
+                </video>
+              </div>
+            )}
+
+            {selected.last_error && (
+              <div className="mb-4 text-xs text-[#f85149] bg-[#f85149]/10 border border-[#f85149]/30 rounded-lg px-3 py-2">
+                {selected.last_error}
+              </div>
+            )}
+            {selected.reject_reason && (
+              <div className="mb-4 text-xs text-[#d29922] bg-[#d29922]/10 border border-[#d29922]/30 rounded-lg px-3 py-2">
+                Rejeitado: {selected.reject_reason}
+              </div>
+            )}
+
+            <div className="grid grid-cols-2 gap-2 text-xs text-[#8b949e] mb-4">
+              <div>Tentativas: <span className="text-[#e6edf3]">{selected.attempt_count}</span></div>
+              <div>Checksum: <span className="text-[#e6edf3]">{selected.render_sha256 ? selected.render_sha256.slice(0, 12) + '…' : '—'}</span></div>
+              <div>Postiz media: <span className="text-[#e6edf3]">{selected.postiz_media_id || '—'}</span></div>
+              <div>Postiz post: <span className="text-[#e6edf3]">{selected.postiz_post_id || '—'}</span></div>
+              <div>Criado: <span className="text-[#e6edf3]">{selected.created_at}</span></div>
+              <div>Atualizado: <span className="text-[#e6edf3]">{selected.updated_at}</span></div>
+            </div>
+
+            <div className="flex flex-wrap gap-2 mb-5">
+              {selected.status === 'ready_for_review' && (
+                <>
+                  <button disabled={busy} onClick={() => action(selected, 'approve')}
+                    className="flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-sm font-medium bg-[#00FFA7]/10 border border-[#00FFA7]/30 text-[#00FFA7] hover:bg-[#00FFA7]/15">
+                    <CheckCircle2 size={14} /> Aprovar
+                  </button>
+                  <div className="flex items-center gap-1.5">
+                    <input
+                      value={rejectReason}
+                      onChange={(e) => setRejectReason(e.target.value)}
+                      placeholder="Motivo da rejeição"
+                      className="bg-[#0d1117] border border-[#21262d] rounded-lg px-2 py-1.5 text-xs text-[#e6edf3] w-40"
+                    />
+                    <button
+                      disabled={busy || !rejectReason.trim()}
+                      onClick={() => { action(selected, 'reject', { reason: rejectReason }); setRejectReason('') }}
+                      className="flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-sm font-medium bg-[#f85149]/10 border border-[#f85149]/30 text-[#f85149] hover:bg-[#f85149]/15 disabled:opacity-50"
+                    >
+                      <XCircle size={14} /> Rejeitar
+                    </button>
+                  </div>
+                </>
+              )}
+              {selected.status === 'approved' && (
+                <button disabled={busy} onClick={() => action(selected, 'create-draft')}
+                  className="flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-sm font-medium bg-[#58a6ff]/10 border border-[#58a6ff]/30 text-[#58a6ff] hover:bg-[#58a6ff]/15">
+                  <Upload size={14} /> Criar draft no Postiz
+                </button>
+              )}
+              {selected.status === 'draft_created' && selected.publication_mode === 'schedule' && (
+                <button disabled={busy} onClick={() => action(selected, 'schedule')}
+                  className="flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-sm font-medium bg-[#d29922]/10 border border-[#d29922]/30 text-[#d29922] hover:bg-[#d29922]/15">
+                  <CalendarClock size={14} /> Agendar
+                </button>
+              )}
+              {['queued', 'rejected', 'retryable_failure'].includes(selected.status) && (
+                <button disabled={busy} onClick={() => action(selected, 'run')}
+                  className="flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-sm font-medium bg-[#00FFA7]/10 border border-[#00FFA7]/30 text-[#00FFA7] hover:bg-[#00FFA7]/15">
+                  <Play size={14} /> {selected.status === 'rejected' ? 'Recriar' : 'Iniciar'}
+                </button>
+              )}
+              {!['published', 'failed', 'cancelled'].includes(selected.status) && (
+                <button disabled={busy} onClick={() => action(selected, 'cancel')}
+                  className="flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-sm font-medium bg-[#161b22] border border-[#21262d] text-[#8b949e] hover:text-[#f85149] hover:border-[#f85149]/30">
+                  <X size={14} /> Cancelar
+                </button>
+              )}
+            </div>
+
+            <div className="flex items-center gap-2 mb-2">
+              <FileText size={14} className="text-[#8b949e]" />
+              <h3 className="text-sm font-medium text-[#e6edf3]">Logs</h3>
+              <button onClick={refreshSelected} className="ml-auto p-1 rounded text-[#8b949e] hover:text-[#e6edf3]"><RefreshCw size={13} /></button>
+            </div>
+            {logs?.logs && Object.keys(logs.logs).length > 0 ? (
+              Object.entries(logs.logs).map(([name, content]) => (
+                <details key={name} className="mb-2 rounded-lg border border-[#21262d] bg-[#0d1117]">
+                  <summary className="px-3 py-2 text-xs text-[#8b949e] cursor-pointer">{name}</summary>
+                  <pre className="px-3 pb-3 text-[11px] text-[#8b949e] whitespace-pre-wrap max-h-64 overflow-y-auto">{content}</pre>
+                </details>
+              ))
+            ) : (
+              <div className="text-xs text-[#8b949e] flex items-center gap-1.5"><Clock size={12} /> Sem logs ainda.</div>
+            )}
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}
diff --git a/dashboard/frontend/src/pages/Overview.tsx b/dashboard/frontend/src/pages/Overview.tsx
index 90c2acdb2..b415db2cc 100644
--- a/dashboard/frontend/src/pages/Overview.tsx
+++ b/dashboard/frontend/src/pages/Overview.tsx
@@ -15,6 +15,10 @@ import {
   BarChart3,
   GitBranch,
   Settings,
+  AlertTriangle,
+  HeartCrack,
+  Lock,
+  CheckCircle2,
   type LucideIcon,
 } from 'lucide-react'
 import { api } from '../lib/api'
@@ -40,6 +44,12 @@ interface OverviewData {
     status: 'healthy' | 'warning' | 'critical'
     runs: number
   }[]
+  needs_attention?: {
+    heartbeat_failures: { heartbeat_id: string; error: string; started_at: string }[]
+    stale_locked_tickets: { id: string; title: string; locked_by: string; locked_at: string }[]
+    aged_approvals: { id: number; gate_type: string; created_at: string }[]
+    total: number
+  }
 }
 
 interface ActiveAgent {
@@ -288,6 +298,62 @@ export default function Overview() {
         )}
       </div>
 
+      {/* Precisa de atenção — health agregado (panorama 2026-07-17, item 19) */}
+      {!loading && data?.needs_attention && data.needs_attention.total > 0 && (
+        <div className="bg-red-500/[0.04] border border-red-500/20 rounded-2xl p-5 mb-6">
+          <h2 className="text-base font-semibold text-[#e6edf3] flex items-center gap-2.5 mb-4">
+            <div className="flex items-center justify-center w-7 h-7 rounded-lg bg-red-500/10 border border-red-500/20">
+              <AlertTriangle size={14} className="text-red-400" />
+            </div>
+            Precisa de atenção ({data.needs_attention.total})
+          </h2>
+          <div className="grid grid-cols-1 md:grid-cols-3 gap-4 text-sm">
+            <div>
+              <div className="flex items-center gap-2 text-[#8b949e] mb-2">
+                <HeartCrack size={13} /> Heartbeats com falha ({data.needs_attention.heartbeat_failures.length})
+              </div>
+              {data.needs_attention.heartbeat_failures.length === 0 ? (
+                <div className="text-[#667085] text-xs">Nenhum</div>
+              ) : (
+                data.needs_attention.heartbeat_failures.slice(0, 4).map((h) => (
+                  <Link key={h.heartbeat_id} to="/heartbeats" className="block text-xs text-[#e6edf3] hover:text-red-300 truncate mb-1">
+                    {h.heartbeat_id} — {h.error}
+                  </Link>
+                ))
+              )}
+            </div>
+            <div>
+              <div className="flex items-center gap-2 text-[#8b949e] mb-2">
+                <Lock size={13} /> Tickets travados ({data.needs_attention.stale_locked_tickets.length})
+              </div>
+              {data.needs_attention.stale_locked_tickets.length === 0 ? (
+                <div className="text-[#667085] text-xs">Nenhum</div>
+              ) : (
+                data.needs_attention.stale_locked_tickets.slice(0, 4).map((t) => (
+                  <Link key={t.id} to={`/tickets/${t.id}`} className="block text-xs text-[#e6edf3] hover:text-red-300 truncate mb-1">
+                    {t.title} — {t.locked_by}
+                  </Link>
+                ))
+              )}
+            </div>
+            <div>
+              <div className="flex items-center gap-2 text-[#8b949e] mb-2">
+                <CheckCircle2 size={13} /> Aprovações pendentes há +24h ({data.needs_attention.aged_approvals.length})
+              </div>
+              {data.needs_attention.aged_approvals.length === 0 ? (
+                <div className="text-[#667085] text-xs">Nenhuma</div>
+              ) : (
+                data.needs_attention.aged_approvals.slice(0, 4).map((a) => (
+                  <Link key={a.id} to="/approvals" className="block text-xs text-[#e6edf3] hover:text-red-300 truncate mb-1">
+                    #{a.id} — {a.gate_type}
+                  </Link>
+                ))
+              )}
+            </div>
+          </div>
+        </div>
+      )}
+
       {/* Active Agents Bar */}
       <ActiveAgentsBar agents={activeAgents} loading={agentsLoading} />
 
diff --git a/dashboard/frontend/src/pages/PluginDetail.tsx b/dashboard/frontend/src/pages/PluginDetail.tsx
index 01b3b9930..efeb8d594 100644
--- a/dashboard/frontend/src/pages/PluginDetail.tsx
+++ b/dashboard/frontend/src/pages/PluginDetail.tsx
@@ -9,6 +9,7 @@ import {
 import { api } from '../lib/api'
 import type { Plugin } from '../components/PluginCard'
 import UpdatePreviewModal from '../components/UpdatePreviewModal'
+import PluginUninstall, { type SafeUninstallSpec } from '../components/PluginUninstall'
 
 interface HealthResult {
   slug: string
@@ -147,6 +148,9 @@ export default function PluginDetail() {
   // Wave 2.0 — Icon fallback state
   const [iconError, setIconError] = useState(false)
 
+  // B3 — Safe uninstall wizard state
+  const [showUninstallWizard, setShowUninstallWizard] = useState(false)
+
   // Wave 2.3 — MCP restart banner dismiss (persisted via localStorage)
   const mcpBannerKey = `mcp-restart-dismissed-${slug}`
   const [mcpBannerDismissed, setMcpBannerDismissed] = useState<boolean>(
@@ -191,16 +195,24 @@ export default function PluginDetail() {
     }
   }
 
-  async function handleUninstall() {
-    if (!slug || !window.confirm(t('plugins.confirmUninstall'))) return
-    setRemoving(true)
-    try {
-      await api.delete(`/plugins/${slug}`)
-      navigate('/plugins')
-    } catch (e: unknown) {
-      setError(e instanceof Error ? e.message : t('common.unexpectedError'))
-      setRemoving(false)
+  function handleUninstall() {
+    if (!slug) return
+    // B3: If plugin declares safe_uninstall.enabled, open the wizard instead of window.confirm.
+    const manifest = (plugin as unknown as Record<string, unknown> | null)?.manifest_json as Record<string, unknown> | undefined
+    const safeUninstall = (manifest?.safe_uninstall ?? {}) as SafeUninstallSpec
+    if (safeUninstall?.enabled) {
+      setShowUninstallWizard(true)
+      return
     }
+    // Legacy path: simple confirm dialog
+    if (!window.confirm(t('plugins.confirmUninstall'))) return
+    setRemoving(true)
+    api.delete(`/plugins/${slug}`)
+      .then(() => navigate('/plugins'))
+      .catch((e: unknown) => {
+        setError(e instanceof Error ? e.message : t('common.unexpectedError'))
+        setRemoving(false)
+      })
   }
 
   async function handleToggle() {
@@ -425,7 +437,21 @@ export default function PluginDetail() {
     mcpItems.length > 0 ||
     integrationItems.length > 0
 
+  // B3: Extract safe_uninstall spec from manifest for the wizard
+  const _manifest = (plugin as unknown as Record<string, unknown> | null)?.manifest_json as Record<string, unknown> | undefined
+  const _safeUninstallSpec = (_manifest?.safe_uninstall ?? {}) as SafeUninstallSpec
+
   return (
+    <>
+    {/* B3: Safe uninstall wizard overlay */}
+    {showUninstallWizard && slug && (
+      <PluginUninstall
+        slug={slug}
+        safeUninstall={_safeUninstallSpec}
+        onClose={() => setShowUninstallWizard(false)}
+        onUninstalled={() => navigate('/plugins')}
+      />
+    )}
     <div className="max-w-3xl mx-auto">
       {/* Back */}
       <button
@@ -679,5 +705,6 @@ export default function PluginDetail() {
         />
       )}
     </div>
+    </>
   )
 }
diff --git a/dashboard/frontend/src/pages/ProjectsOverview.tsx b/dashboard/frontend/src/pages/ProjectsOverview.tsx
new file mode 100644
index 000000000..a0222f5e9
--- /dev/null
+++ b/dashboard/frontend/src/pages/ProjectsOverview.tsx
@@ -0,0 +1,194 @@
+import { useEffect, useState } from 'react'
+import { useNavigate } from 'react-router-dom'
+import { useTranslation } from 'react-i18next'
+import { FolderKanban, Plus, RefreshCw, Target } from 'lucide-react'
+import CreateProjectModal, { type CreatedProject } from '../components/CreateProjectModal'
+
+// ---- Types (mirrors Goals.tsx) ----
+
+interface Goal {
+  id: number
+  status: 'active' | 'achieved' | 'on-hold' | 'cancelled'
+  target_value: number
+  current_value: number
+}
+
+interface GoalProject {
+  id: number
+  slug: string
+  mission_id: number | null
+  title: string
+  description: string | null
+  status: string
+  goals?: Goal[]
+}
+
+interface Mission {
+  id: number
+  title: string
+  projects?: GoalProject[]
+}
+
+interface ProjectRow {
+  project: GoalProject
+  missionTitle: string
+  goalCount: number
+  totalTarget: number
+  totalCurrent: number
+}
+
+// ---- Helpers ----
+
+const API = import.meta.env.DEV ? 'http://localhost:8080' : ''
+
+async function apiFetch(path: string) {
+  const res = await fetch(API + path, { credentials: 'include' })
+  if (!res.ok) throw new Error(`${res.status} ${res.statusText}`)
+  return res.json()
+}
+
+function pct(current: number, target: number) {
+  if (target <= 0) return 0
+  return Math.min(100, Math.round((current / target) * 100))
+}
+
+function ProgressBar({ current, target }: { current: number; target: number }) {
+  const p = pct(current, target)
+  return (
+    <div className="w-full bg-[#21262d] rounded-full h-2">
+      <div
+        className={`h-2 rounded-full transition-all duration-300 ${p >= 100 ? 'bg-[#00FFA7]' : 'bg-blue-400'}`}
+        style={{ width: `${p}%` }}
+      />
+    </div>
+  )
+}
+
+// ---- Main component ----
+
+export default function ProjectsOverview() {
+  const { t } = useTranslation()
+  const navigate = useNavigate()
+  const [rows, setRows] = useState<ProjectRow[]>([])
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState('')
+  const [showCreate, setShowCreate] = useState(false)
+
+  const load = async () => {
+    try {
+      setError('')
+      setLoading(true)
+      const missions: Mission[] = await apiFetch('/api/missions')
+      const flattened: ProjectRow[] = missions.flatMap((mission) =>
+        (mission.projects || []).map((project) => {
+          const goals = project.goals || []
+          return {
+            project,
+            missionTitle: mission.title,
+            goalCount: goals.length,
+            totalTarget: goals.reduce((s, g) => s + g.target_value, 0),
+            totalCurrent: goals.reduce((s, g) => s + g.current_value, 0),
+          }
+        })
+      )
+      setRows(flattened)
+    } catch (e: any) {
+      setError(e.message)
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  useEffect(() => { load() }, [])
+
+  if (loading) {
+    return (
+      <div className="flex items-center justify-center h-64">
+        <div className="text-[#667085] text-sm">Loading projects...</div>
+      </div>
+    )
+  }
+
+  if (error) {
+    return (
+      <div className="flex items-center justify-center h-64">
+        <div className="text-red-400 text-sm">Error: {error}</div>
+      </div>
+    )
+  }
+
+  return (
+    <div className="max-w-5xl mx-auto">
+      {/* Header */}
+      <div className="flex items-center justify-between mb-6">
+        <div className="flex items-center gap-3">
+          <FolderKanban size={20} className="text-[#00FFA7]" />
+          <div>
+            <h1 className="text-white font-semibold text-lg">{t('nav.projects')}</h1>
+            <p className="text-xs text-[#667085]">Clique num projeto pra abrir em Goals</p>
+          </div>
+        </div>
+        <div className="flex items-center gap-2">
+          <button
+            onClick={load}
+            className="flex items-center gap-2 px-3 py-1.5 text-xs text-[#667085] hover:text-white border border-[#21262d] rounded-lg hover:border-[#344054] transition-colors"
+          >
+            <RefreshCw size={12} /> Refresh
+          </button>
+          <button
+            onClick={() => setShowCreate(true)}
+            className="flex items-center gap-2 px-3 py-1.5 text-xs font-semibold bg-[#00FFA7] text-black rounded-lg hover:bg-[#00FFA7]/90 transition-colors"
+          >
+            <Plus size={12} /> Novo projeto
+          </button>
+        </div>
+      </div>
+
+      {rows.length === 0 ? (
+        <div className="text-center py-16 px-4">
+          <p className="text-sm text-[#e6edf3] mb-3">Nenhum projeto ainda.</p>
+          <button
+            onClick={() => setShowCreate(true)}
+            className="inline-flex items-center gap-1.5 text-sm text-[#00FFA7] hover:underline"
+          >
+            <Plus size={14} /> Criar o primeiro projeto
+          </button>
+        </div>
+      ) : (
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+          {rows.map(({ project, missionTitle, goalCount, totalTarget, totalCurrent }) => (
+            <button
+              key={project.id}
+              onClick={() => navigate(`/goals?project=${project.id}`)}
+              className="text-left bg-[#161b22] border border-[#21262d] rounded-xl p-5 hover:border-[#00FFA7]/40 transition-colors"
+            >
+              <div className="flex items-center gap-1.5 text-[10px] text-[#667085] mb-2">
+                <Target size={10} />
+                <span className="truncate">{missionTitle}</span>
+              </div>
+              <div className="flex items-center gap-2 mb-1">
+                <span className="text-white font-semibold text-sm">{project.title}</span>
+                <span className="text-[10px] text-[#667085] bg-[#21262d] px-2 py-0.5 rounded-full">{project.slug}</span>
+              </div>
+              {project.description && (
+                <p className="text-xs text-[#667085] mb-3 line-clamp-2">{project.description}</p>
+              )}
+              <div className="flex items-center justify-between text-[11px] text-[#667085] mb-1.5">
+                <span>{goalCount} goal{goalCount === 1 ? '' : 's'}</span>
+                {totalTarget > 0 && <span className="text-[#00FFA7] font-mono">{pct(totalCurrent, totalTarget)}%</span>}
+              </div>
+              {totalTarget > 0 && <ProgressBar current={totalCurrent} target={totalTarget} />}
+            </button>
+          ))}
+        </div>
+      )}
+
+      {showCreate && (
+        <CreateProjectModal
+          onClose={() => setShowCreate(false)}
+          onCreated={(_project: CreatedProject) => load()}
+        />
+      )}
+    </div>
+  )
+}
diff --git a/dashboard/frontend/src/pages/Providers.tsx b/dashboard/frontend/src/pages/Providers.tsx
index 28bec044f..220515b7f 100644
--- a/dashboard/frontend/src/pages/Providers.tsx
+++ b/dashboard/frontend/src/pages/Providers.tsx
@@ -664,7 +664,7 @@ export default function Providers() {
                       </a>
                     </div>
                     <div className="space-y-2">
-                      <p className="text-xs text-[#5a6b7f]"><span className="text-white font-medium">2.</span> Authorize access, then copy the URL from the error page:</p>
+                      <p className="text-xs text-[#5a6b7f]"><span className="text-white font-medium">2.</span> Authorize access, then paste the final localhost callback URL here. Do not replace localhost with your domain.</p>
                       <input type="text" value={callbackUrl} onChange={(e) => setCallbackUrl(e.target.value)}
                         placeholder="http://localhost:1455/auth/callback?code=..."
                         className={inp} autoComplete="off" />
diff --git a/dashboard/frontend/src/pages/Routines.tsx b/dashboard/frontend/src/pages/Routines.tsx
index 0d96fdefe..e036b3a5f 100644
--- a/dashboard/frontend/src/pages/Routines.tsx
+++ b/dashboard/frontend/src/pages/Routines.tsx
@@ -88,12 +88,22 @@ function transformRoutineMetrics(data: any): Routine[] {
   return Object.entries(metrics).map(([name, m]: [string, any]) => {
     const runs = Number(m.runs || 0)
     const successes = Number(m.successes || 0)
-    const successRate = Number(m.success_rate || (runs > 0 ? (successes / runs) * 100 : 0))
+    // Always derived fresh from raw counts, never trusting the stored
+    // success_rate field directly — one routine (uso_modelos_dia) used to
+    // write it as a 0-1 fraction instead of the 0-100 percentage every
+    // other routine's metrics use (ADWs/runner.py), which silently rendered
+    // as "0.8333% success" / misclassified as critical instead of 83.3% /
+    // healthy. Deriving from runs/successes here is immune to any producer
+    // writing success_rate in the wrong units again.
+    const successRate = runs > 0 ? (successes / runs) * 100 : 0
     const totalTokens = Number(m.total_input_tokens || 0) + Number(m.total_output_tokens || 0)
     const totalCost = Number(m.total_cost_usd || 0)
     const avgCost = Number(m.avg_cost_usd || 0)
     const avgSeconds = Number(m.avg_seconds || 0)
+    const lastSuccess = typeof m.last_success === 'boolean' ? m.last_success : null
     const status: 'healthy' | 'warning' | 'critical' =
+      lastSuccess === false ? 'critical' :
+      lastSuccess === true && successRate < 90 ? 'warning' :
       successRate >= 90 ? 'healthy' : successRate >= 70 ? 'warning' : 'critical'
     return {
       name,
diff --git a/dashboard/frontend/src/pages/TicketDetail.tsx b/dashboard/frontend/src/pages/TicketDetail.tsx
index 753f91f56..47b7b8d67 100644
--- a/dashboard/frontend/src/pages/TicketDetail.tsx
+++ b/dashboard/frontend/src/pages/TicketDetail.tsx
@@ -132,6 +132,32 @@ export default function TicketDetail() {
   )
   // Mobile drawer state
   const [mobileDrawerOpen, setMobileDrawerOpen] = useState(false)
+  // Parent chain (Mission > Project > Goal) — lazy-loaded when the ticket
+  // has a goal_id, since that field was never surfaced anywhere before.
+  const [parentChain, setParentChain] = useState<{
+    goal: { id: number; title: string } | null
+    project: { id: number; title: string } | null
+    mission: { id: number; title: string } | null
+  } | null>(null)
+
+  useEffect(() => {
+    if (!ticket?.goal_id) {
+      setParentChain(null)
+      return
+    }
+    let cancelled = false
+    ;(async () => {
+      try {
+        const goal = await api.get(`/goals/${ticket.goal_id}`)
+        const project = goal.project_id ? await api.get(`/projects/${goal.project_id}`) : null
+        const mission = project?.mission_id ? await api.get(`/missions/${project.mission_id}`) : null
+        if (!cancelled) setParentChain({ goal, project, mission })
+      } catch {
+        if (!cancelled) setParentChain(null)
+      }
+    })()
+    return () => { cancelled = true }
+  }, [ticket?.goal_id])
 
   const handleToggleSidebar = useCallback(() => {
     setSidebarCollapsed(prev => {
@@ -661,6 +687,20 @@ export default function TicketDetail() {
             )}
           </div>
 
+          {parentChain?.goal && (
+            <div className="col-span-2 sm:col-span-4">
+              <p className="text-[#667085] mb-1.5">Goal chain</p>
+              <button
+                onClick={() => navigate(`/goals?project=${parentChain.project?.id ?? ''}`)}
+                className="text-[#e6edf3] hover:text-[#00FFA7] transition-colors text-xs text-left"
+              >
+                {parentChain.mission ? `${parentChain.mission.title} › ` : ''}
+                {parentChain.project ? `${parentChain.project.title} › ` : ''}
+                {parentChain.goal.title}
+              </button>
+            </div>
+          )}
+
           {(ticket.source_agent || ticket.source_session_id) && (
             <div>
               <p className="text-[#667085] mb-1.5">Source</p>
diff --git a/dashboard/frontend/src/pages/onboarding/StepBrainChoose.tsx b/dashboard/frontend/src/pages/onboarding/StepBrainChoose.tsx
index c66fd5606..a50f066fa 100644
--- a/dashboard/frontend/src/pages/onboarding/StepBrainChoose.tsx
+++ b/dashboard/frontend/src/pages/onboarding/StepBrainChoose.tsx
@@ -33,12 +33,12 @@ export default function StepBrainChoose({ token, onNext, onBack }: StepBrainChoo
   useEffect(() => {
     if (mode === 'existing') {
       setLoadingRepos(true)
-      api.get('/brain-repo/detect')
+      api.get(`/brain-repo/detect?token=${encodeURIComponent(token)}`)
         .then((data: { repos: Repo[] }) => setRepos(data.repos || []))
         .catch(() => setRepos([]))
         .finally(() => setLoadingRepos(false))
     }
-  }, [mode])
+  }, [mode, token])
 
   const handleSave = async () => {
     setError('')
diff --git a/dashboard/terminal-server/package-lock.json b/dashboard/terminal-server/package-lock.json
index 0611b4de1..09b58b074 100644
--- a/dashboard/terminal-server/package-lock.json
+++ b/dashboard/terminal-server/package-lock.json
@@ -12,6 +12,8 @@
         "@anthropic-ai/claude-agent-sdk": "0.2.119",
         "cors": "^2.8.5",
         "express": "^4.19.2",
+        "marked": "^15.0.12",
+        "marked-terminal": "^7.3.0",
         "node-pty": "^1.0.0",
         "uuid": "^10.0.0",
         "ws": "^8.18.0"
@@ -182,6 +184,16 @@
         "node": ">=6.9.0"
       }
     },
+    "node_modules/@colors/colors": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/@colors/colors/-/colors-1.5.0.tgz",
+      "integrity": "sha512-ooWCrlZP11i8GImSjTHYHLkvFDP48nS4+204nGb1RiX/WXYHmJA2III9/e2DWVabCESdW7hBAEzHRqUn9OUVvQ==",
+      "license": "MIT",
+      "optional": true,
+      "engines": {
+        "node": ">=0.1.90"
+      }
+    },
     "node_modules/@hono/node-server": {
       "version": "1.19.14",
       "resolved": "https://registry.npmjs.org/@hono/node-server/-/node-server-1.19.14.tgz",
@@ -519,6 +531,18 @@
         "node": ">= 0.6"
       }
     },
+    "node_modules/@sindresorhus/is": {
+      "version": "4.6.0",
+      "resolved": "https://registry.npmjs.org/@sindresorhus/is/-/is-4.6.0.tgz",
+      "integrity": "sha512-t09vSN3MdfsyCHoFcTRCH/iUtG7OJ0CsjzB8cjAmKc/va/kIgeDI/TxsigdncE/4be734m0cvIYwNaV4i2XqAw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sindresorhus/is?sponsor=1"
+      }
+    },
     "node_modules/accepts": {
       "version": "1.3.8",
       "resolved": "https://registry.npmjs.org/accepts/-/accepts-1.3.8.tgz",
@@ -565,6 +589,54 @@
         }
       }
     },
+    "node_modules/ansi-escapes": {
+      "version": "7.3.0",
+      "resolved": "https://registry.npmjs.org/ansi-escapes/-/ansi-escapes-7.3.0.tgz",
+      "integrity": "sha512-BvU8nYgGQBxcmMuEeUEmNTvrMVjJNSH7RgW24vXexN4Ven6qCvy4TntnvlnwnMLTVlcRQQdbRY8NKnaIoeWDNg==",
+      "license": "MIT",
+      "dependencies": {
+        "environment": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/ansi-regex": {
+      "version": "6.2.2",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.2.2.tgz",
+      "integrity": "sha512-Bq3SmSpyFHaWjPk8If9yc6svM8c56dB5BAtW4Qbw5jHTwwXXcTLoRMkpDJp6VL0XzlWaCHTXrkFURMYmD0sLqg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-regex?sponsor=1"
+      }
+    },
+    "node_modules/ansi-styles": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+      "license": "MIT",
+      "dependencies": {
+        "color-convert": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/any-promise": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/any-promise/-/any-promise-1.3.0.tgz",
+      "integrity": "sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A==",
+      "license": "MIT"
+    },
     "node_modules/array-flatten": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/array-flatten/-/array-flatten-1.1.1.tgz",
@@ -663,6 +735,108 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/chalk": {
+      "version": "5.6.2",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-5.6.2.tgz",
+      "integrity": "sha512-7NzBL0rN6fMUW+f7A6Io4h40qQlG+xGmtMxfbnH/K7TAtt8JQWVQK+6g0UXKMeVJoyV5EkkNsErQ8pVD3bLHbA==",
+      "license": "MIT",
+      "engines": {
+        "node": "^12.17.0 || ^14.13 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/chalk?sponsor=1"
+      }
+    },
+    "node_modules/char-regex": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/char-regex/-/char-regex-1.0.2.tgz",
+      "integrity": "sha512-kWWXztvZ5SBQV+eRgKFeh8q5sLuZY2+8WUIzlxWVTg+oGwY14qylx1KbKzHd8P6ZYkAg0xyIDU9JMHhyJMZ1jw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/cli-highlight": {
+      "version": "2.1.11",
+      "resolved": "https://registry.npmjs.org/cli-highlight/-/cli-highlight-2.1.11.tgz",
+      "integrity": "sha512-9KDcoEVwyUXrjcJNvHD0NFc/hiwe/WPVYIleQh2O1N2Zro5gWJZ/K+3DGn8w8P/F6FxOgzyC5bxDyHIgCSPhGg==",
+      "license": "ISC",
+      "dependencies": {
+        "chalk": "^4.0.0",
+        "highlight.js": "^10.7.1",
+        "mz": "^2.4.0",
+        "parse5": "^5.1.1",
+        "parse5-htmlparser2-tree-adapter": "^6.0.0",
+        "yargs": "^16.0.0"
+      },
+      "bin": {
+        "highlight": "bin/highlight"
+      },
+      "engines": {
+        "node": ">=8.0.0",
+        "npm": ">=5.0.0"
+      }
+    },
+    "node_modules/cli-highlight/node_modules/chalk": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+      "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+      "license": "MIT",
+      "dependencies": {
+        "ansi-styles": "^4.1.0",
+        "supports-color": "^7.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/chalk?sponsor=1"
+      }
+    },
+    "node_modules/cli-table3": {
+      "version": "0.6.5",
+      "resolved": "https://registry.npmjs.org/cli-table3/-/cli-table3-0.6.5.tgz",
+      "integrity": "sha512-+W/5efTR7y5HRD7gACw9yQjqMVvEMLBHmboM/kPWam+H+Hmyrgjh6YncVKK122YZkXrLudzTuAukUw9FnMf7IQ==",
+      "license": "MIT",
+      "dependencies": {
+        "string-width": "^4.2.0"
+      },
+      "engines": {
+        "node": "10.* || >= 12.*"
+      },
+      "optionalDependencies": {
+        "@colors/colors": "1.5.0"
+      }
+    },
+    "node_modules/cliui": {
+      "version": "7.0.4",
+      "resolved": "https://registry.npmjs.org/cliui/-/cliui-7.0.4.tgz",
+      "integrity": "sha512-OcRE68cOsVMXp1Yvonl/fzkQOyjLSu/8bhPDfQt0e0/Eb283TKP20Fs2MqoPsr9SwA595rRCA+QMzYc9nBP+JQ==",
+      "license": "ISC",
+      "dependencies": {
+        "string-width": "^4.2.0",
+        "strip-ansi": "^6.0.0",
+        "wrap-ansi": "^7.0.0"
+      }
+    },
+    "node_modules/color-convert": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+      "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+      "license": "MIT",
+      "dependencies": {
+        "color-name": "~1.1.4"
+      },
+      "engines": {
+        "node": ">=7.0.0"
+      }
+    },
+    "node_modules/color-name": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+      "license": "MIT"
+    },
     "node_modules/content-disposition": {
       "version": "0.5.4",
       "resolved": "https://registry.npmjs.org/content-disposition/-/content-disposition-0.5.4.tgz",
@@ -778,6 +952,18 @@
       "integrity": "sha512-WMwm9LhRUo+WUaRN+vRuETqG89IgZphVSNkdFgeb6sS/E4OrDIN7t48CAewSHXc6C8lefD8KKfr5vY61brQlow==",
       "license": "MIT"
     },
+    "node_modules/emoji-regex": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
+      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
+      "license": "MIT"
+    },
+    "node_modules/emojilib": {
+      "version": "2.4.0",
+      "resolved": "https://registry.npmjs.org/emojilib/-/emojilib-2.4.0.tgz",
+      "integrity": "sha512-5U0rVMU5Y2n2+ykNLQqMoqklN9ICBT/KsvC1Gz6vqHbz2AXXGkG+Pm5rMWk/8Vjrr/mY9985Hi8DYzn1F09Nyw==",
+      "license": "MIT"
+    },
     "node_modules/encodeurl": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-2.0.0.tgz",
@@ -787,6 +973,18 @@
         "node": ">= 0.8"
       }
     },
+    "node_modules/environment": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/environment/-/environment-1.1.0.tgz",
+      "integrity": "sha512-xUtoPkMggbz0MPyPiIWr1Kp4aeWJjDZ6SMvURhimjdZgsRuDplF5/s9hcgGhyXMhs+6vpnuoiZ2kFiu3FMnS8Q==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/es-define-property": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/es-define-property/-/es-define-property-1.0.1.tgz",
@@ -817,6 +1015,15 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/escalade": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.2.0.tgz",
+      "integrity": "sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/escape-html": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/escape-html/-/escape-html-1.0.3.tgz",
@@ -984,6 +1191,15 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/get-caller-file": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-2.0.5.tgz",
+      "integrity": "sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==",
+      "license": "ISC",
+      "engines": {
+        "node": "6.* || 8.* || >= 10.*"
+      }
+    },
     "node_modules/get-intrinsic": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.3.0.tgz",
@@ -1033,6 +1249,15 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/has-flag": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+      "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/has-symbols": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.1.0.tgz",
@@ -1057,6 +1282,15 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/highlight.js": {
+      "version": "10.7.3",
+      "resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-10.7.3.tgz",
+      "integrity": "sha512-tzcUFauisWKNHaRkN4Wjl/ZA07gENAjFl3J/c480dprkGTg5EQstgaNFqBfUqCq54kZRIEcreTsAgF/m2quD7A==",
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": "*"
+      }
+    },
     "node_modules/hono": {
       "version": "4.12.15",
       "resolved": "https://registry.npmjs.org/hono/-/hono-4.12.15.tgz",
@@ -1122,6 +1356,15 @@
         "node": ">= 0.10"
       }
     },
+    "node_modules/is-fullwidth-code-point": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
+      "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/is-promise": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/is-promise/-/is-promise-4.0.0.tgz",
@@ -1168,6 +1411,39 @@
       "integrity": "sha512-fQhoXdcvc3V28x7C7BMs4P5+kNlgUURe2jmUT1T//oBRMDrqy1QPelJimwZGo7Hg9VPV3EQV5Bnq4hbFy2vetA==",
       "license": "BSD-2-Clause"
     },
+    "node_modules/marked": {
+      "version": "15.0.12",
+      "resolved": "https://registry.npmjs.org/marked/-/marked-15.0.12.tgz",
+      "integrity": "sha512-8dD6FusOQSrpv9Z1rdNMdlSgQOIP880DHqnohobOmYLElGEqAL/JvxvuxZO16r4HtjTlfPRDC1hbvxC9dPN2nA==",
+      "license": "MIT",
+      "bin": {
+        "marked": "bin/marked.js"
+      },
+      "engines": {
+        "node": ">= 18"
+      }
+    },
+    "node_modules/marked-terminal": {
+      "version": "7.3.0",
+      "resolved": "https://registry.npmjs.org/marked-terminal/-/marked-terminal-7.3.0.tgz",
+      "integrity": "sha512-t4rBvPsHc57uE/2nJOLmMbZCQ4tgAccAED3ngXQqW6g+TxA488JzJ+FK3lQkzBQOI1mRV/r/Kq+1ZlJ4D0owQw==",
+      "license": "MIT",
+      "dependencies": {
+        "ansi-escapes": "^7.0.0",
+        "ansi-regex": "^6.1.0",
+        "chalk": "^5.4.1",
+        "cli-highlight": "^2.1.11",
+        "cli-table3": "^0.6.5",
+        "node-emoji": "^2.2.0",
+        "supports-hyperlinks": "^3.1.0"
+      },
+      "engines": {
+        "node": ">=16.0.0"
+      },
+      "peerDependencies": {
+        "marked": ">=1 <16"
+      }
+    },
     "node_modules/math-intrinsics": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/math-intrinsics/-/math-intrinsics-1.1.0.tgz",
@@ -1243,6 +1519,17 @@
       "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==",
       "license": "MIT"
     },
+    "node_modules/mz": {
+      "version": "2.7.0",
+      "resolved": "https://registry.npmjs.org/mz/-/mz-2.7.0.tgz",
+      "integrity": "sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q==",
+      "license": "MIT",
+      "dependencies": {
+        "any-promise": "^1.0.0",
+        "object-assign": "^4.0.1",
+        "thenify-all": "^1.0.0"
+      }
+    },
     "node_modules/negotiator": {
       "version": "0.6.3",
       "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-0.6.3.tgz",
@@ -1258,6 +1545,21 @@
       "integrity": "sha512-5m3bsyrjFWE1xf7nz7YXdN4udnVtXK6/Yfgn5qnahL6bCkf2yKt4k3nuTKAtT4r3IG8JNR2ncsIMdZuAzJjHQQ==",
       "license": "MIT"
     },
+    "node_modules/node-emoji": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/node-emoji/-/node-emoji-2.2.0.tgz",
+      "integrity": "sha512-Z3lTE9pLaJF47NyMhd4ww1yFTAP8YhYI8SleJiHzM46Fgpm5cnNzSl9XfzFNqbaz+VlJrIj3fXQ4DeN1Rjm6cw==",
+      "license": "MIT",
+      "dependencies": {
+        "@sindresorhus/is": "^4.6.0",
+        "char-regex": "^1.0.2",
+        "emojilib": "^2.4.0",
+        "skin-tone": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
     "node_modules/node-pty": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/node-pty/-/node-pty-1.1.0.tgz",
@@ -1310,6 +1612,27 @@
         "wrappy": "1"
       }
     },
+    "node_modules/parse5": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/parse5/-/parse5-5.1.1.tgz",
+      "integrity": "sha512-ugq4DFI0Ptb+WWjAdOK16+u/nHfiIrcE+sh8kZMaM0WllQKLI9rOUq6c2b7cwPkXdzfQESqvoqK6ug7U/Yyzug==",
+      "license": "MIT"
+    },
+    "node_modules/parse5-htmlparser2-tree-adapter": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/parse5-htmlparser2-tree-adapter/-/parse5-htmlparser2-tree-adapter-6.0.1.tgz",
+      "integrity": "sha512-qPuWvbLgvDGilKc5BoicRovlT4MtYT6JfJyBOMDsKoiT+GiuP5qyrPCnR9HcPECIJJmZh5jRndyNThnhhb/vlA==",
+      "license": "MIT",
+      "dependencies": {
+        "parse5": "^6.0.1"
+      }
+    },
+    "node_modules/parse5-htmlparser2-tree-adapter/node_modules/parse5": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/parse5/-/parse5-6.0.1.tgz",
+      "integrity": "sha512-Ofn/CTFzRGTTxwpNEs9PP93gXShHcTq255nzRYSKe8AkVpZY7e1fpmTfOyoIvjP5HG7Z2ZM7VS9PPhQGW2pOpw==",
+      "license": "MIT"
+    },
     "node_modules/parseurl": {
       "version": "1.3.3",
       "resolved": "https://registry.npmjs.org/parseurl/-/parseurl-1.3.3.tgz",
@@ -1411,6 +1734,15 @@
         "url": "https://opencollective.com/express"
       }
     },
+    "node_modules/require-directory": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/require-directory/-/require-directory-2.1.1.tgz",
+      "integrity": "sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/require-from-string": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/require-from-string/-/require-from-string-2.0.2.tgz",
@@ -1639,6 +1971,18 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/skin-tone": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/skin-tone/-/skin-tone-2.0.0.tgz",
+      "integrity": "sha512-kUMbT1oBJCpgrnKoSr0o6wPtvRWT9W9UKvGLwfJYO2WuahZRHOpEyL1ckyMGgMWh0UdpmaoFqKKD29WTomNEGA==",
+      "license": "MIT",
+      "dependencies": {
+        "unicode-emoji-modifier-base": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/statuses": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/statuses/-/statuses-2.0.2.tgz",
@@ -1648,6 +1992,90 @@
         "node": ">= 0.8"
       }
     },
+    "node_modules/string-width": {
+      "version": "4.2.3",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
+      "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
+      "license": "MIT",
+      "dependencies": {
+        "emoji-regex": "^8.0.0",
+        "is-fullwidth-code-point": "^3.0.0",
+        "strip-ansi": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/strip-ansi": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
+      "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+      "license": "MIT",
+      "dependencies": {
+        "ansi-regex": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/strip-ansi/node_modules/ansi-regex": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
+      "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/supports-color": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+      "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+      "license": "MIT",
+      "dependencies": {
+        "has-flag": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/supports-hyperlinks": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/supports-hyperlinks/-/supports-hyperlinks-3.2.0.tgz",
+      "integrity": "sha512-zFObLMyZeEwzAoKCyu1B91U79K2t7ApXuQfo8OuxwXLDgcKxuwM+YvcbIhm6QWqz7mHUH1TVytR1PwVVjEuMig==",
+      "license": "MIT",
+      "dependencies": {
+        "has-flag": "^4.0.0",
+        "supports-color": "^7.0.0"
+      },
+      "engines": {
+        "node": ">=14.18"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/supports-hyperlinks?sponsor=1"
+      }
+    },
+    "node_modules/thenify": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/thenify/-/thenify-3.3.1.tgz",
+      "integrity": "sha512-RVZSIV5IG10Hk3enotrhvz0T9em6cyHBLkH/YAZuKqd8hRkKhSfCGIcP2KUY0EPxndzANBmNllzWPwak+bheSw==",
+      "license": "MIT",
+      "dependencies": {
+        "any-promise": "^1.0.0"
+      }
+    },
+    "node_modules/thenify-all": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/thenify-all/-/thenify-all-1.6.0.tgz",
+      "integrity": "sha512-RNxQH/qI8/t3thXJDwcstUO4zeqo64+Uy/+sNVRBx4Xn2OX+OZ9oP+iJnNFqplFra2ZUVeKCSa2oVWi3T4uVmA==",
+      "license": "MIT",
+      "dependencies": {
+        "thenify": ">= 3.1.0 < 4"
+      },
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
     "node_modules/toidentifier": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/toidentifier/-/toidentifier-1.0.1.tgz",
@@ -1676,6 +2104,15 @@
         "node": ">= 0.6"
       }
     },
+    "node_modules/unicode-emoji-modifier-base": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/unicode-emoji-modifier-base/-/unicode-emoji-modifier-base-1.0.0.tgz",
+      "integrity": "sha512-yLSH4py7oFH3oG/9K+XWrz1pSi3dfUrWEnInbxMfArOfc1+33BlGPQtLsOYwvdMy11AwUBetYuaRxSPqgkq+8g==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/unpipe": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/unpipe/-/unpipe-1.0.0.tgz",
@@ -1731,6 +2168,23 @@
         "node": ">= 8"
       }
     },
+    "node_modules/wrap-ansi": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
+      "integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==",
+      "license": "MIT",
+      "dependencies": {
+        "ansi-styles": "^4.0.0",
+        "string-width": "^4.1.0",
+        "strip-ansi": "^6.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
+      }
+    },
     "node_modules/wrappy": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
@@ -1758,6 +2212,42 @@
         }
       }
     },
+    "node_modules/y18n": {
+      "version": "5.0.8",
+      "resolved": "https://registry.npmjs.org/y18n/-/y18n-5.0.8.tgz",
+      "integrity": "sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/yargs": {
+      "version": "16.2.2",
+      "resolved": "https://registry.npmjs.org/yargs/-/yargs-16.2.2.tgz",
+      "integrity": "sha512-Nt9ZJjXTv5R8MHbqby/wXQ6Gi0Bb3TcYZkR1bzuL4yB2OxWPkXknz513gEF0GoA6tn00UpbPvERW8rzCuWCA6w==",
+      "license": "MIT",
+      "dependencies": {
+        "cliui": "^7.0.2",
+        "escalade": "^3.1.1",
+        "get-caller-file": "^2.0.5",
+        "require-directory": "^2.1.1",
+        "string-width": "^4.2.0",
+        "y18n": "^5.0.5",
+        "yargs-parser": "^20.2.2"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/yargs-parser": {
+      "version": "20.2.9",
+      "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-20.2.9.tgz",
+      "integrity": "sha512-y11nGElTIV+CT3Zv9t7VKl+Q3hTQoT9a1Qzezhhl6Rp21gJ/IVTW7Z3y9EWXhuUBC2Shnf+DX0antecpAwSP8w==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/zod": {
       "version": "4.3.6",
       "resolved": "https://registry.npmjs.org/zod/-/zod-4.3.6.tgz",
diff --git a/dashboard/terminal-server/package.json b/dashboard/terminal-server/package.json
index aa1ead355..fa2b4175b 100644
--- a/dashboard/terminal-server/package.json
+++ b/dashboard/terminal-server/package.json
@@ -17,6 +17,8 @@
     "@anthropic-ai/claude-agent-sdk": "0.2.119",
     "cors": "^2.8.5",
     "express": "^4.19.2",
+    "marked": "^15.0.12",
+    "marked-terminal": "^7.3.0",
     "node-pty": "^1.0.0",
     "uuid": "^10.0.0",
     "ws": "^8.18.0"
diff --git a/dashboard/terminal-server/src/chat-bridge.js b/dashboard/terminal-server/src/chat-bridge.js
index caf138b1c..52135c088 100644
--- a/dashboard/terminal-server/src/chat-bridge.js
+++ b/dashboard/terminal-server/src/chat-bridge.js
@@ -9,12 +9,196 @@ const os = require('os');
 const {
   loadProviderConfig,
   resolveProviderModel,
+  getProviderMode,
 } = require('./provider-config');
 let sdkModule = null;
 
 // Workspace root is three levels up from this file (dashboard/terminal-server/src/).
 const WORKSPACE_ROOT = path.resolve(__dirname, '..', '..', '..');
 
+// Chat HUD (car-dashboard panel, same component as the Terminal — see
+// TerminalHudPanel.tsx). Chat sessions are short-lived (one per
+// startSession call, not a persistent REPL like claude-bridge's opencode
+// sessions), so this only tracks what's needed for the shift-detection
+// diff between hud_update ticks — much smaller than claude-bridge's
+// per-session HUD bookkeeping.
+const CHAT_HUD_HEAVY_TOKEN_THRESHOLD = 20_000;
+
+/**
+ * Emits a `hud_update`-shaped event through the same `onMessage` channel
+ * every other chat event goes through — server.js already forwards
+ * anything unrecognized as `{ type: 'chat_event', event: msg }`, and
+ * AgentChat.tsx's handleChatEvent special-cases `hud_update` before it
+ * hits the messages-array reducer (see that file). No server.js changes
+ * needed; this piggybacks on existing plumbing.
+ */
+function _emitChatHud(session, onMessage, patch = {}) {
+  if (!onMessage) return;
+  const providerId = patch.providerId ?? session.lastHudProviderId;
+  const providerModel = patch.providerModel ?? session.lastHudProviderModel;
+  const shift = providerId !== session.lastHudProviderId || providerModel !== session.lastHudProviderModel;
+  session.lastHudProviderId = providerId;
+  session.lastHudProviderModel = providerModel;
+  onMessage({
+    type: 'hud_update',
+    busy: false,
+    tokensPerSec: 0,
+    totalTokens: null,
+    heavy: false,
+    bestTokensPerSec: 0,
+    ...patch,
+    providerId,
+    providerModel,
+    shift,
+  });
+}
+
+/**
+ * Build provider fallback chain from config.
+ * Returns array of { providerId, model, cliCommand, envVars, baseUrl } attempts.
+ * Order: active provider's primary model → fallback_models → fallback_providers (with their chains).
+ */
+function buildProviderFallbackChain(providerConfig) {
+  const providers = providerConfig.providers || {};
+  const activeId = providerConfig.active;
+  const activeProvider = providers[activeId] || providerConfig;
+
+  const chain = [];
+
+  // Primary model from active provider
+  const primaryModel = resolveProviderModel(activeProvider);
+  const activeCliCommand = activeProvider.cli_command || providerConfig.cli_command || 'openclaude';
+  const activeEnvVars = { ...(activeProvider.env_vars || {}), ...(providerConfig.env_vars || {}) };
+  const activeBaseUrl = activeEnvVars.OPENAI_BASE_URL || activeProvider.default_base_url;
+
+  if (primaryModel) {
+    chain.push({
+      providerId: activeId,
+      model: primaryModel,
+      cliCommand: activeCliCommand,
+      envVars: { ...activeEnvVars, OPENAI_MODEL: primaryModel },
+      baseUrl: activeBaseUrl,
+    });
+  }
+
+  // Fallback models within same provider
+  for (const fallbackModel of (activeProvider.fallback_models || [])) {
+    if (fallbackModel && fallbackModel !== primaryModel) {
+      chain.push({
+        providerId: activeId,
+        model: fallbackModel,
+        cliCommand: activeCliCommand,
+        envVars: { ...activeEnvVars, OPENAI_MODEL: fallbackModel },
+        baseUrl: activeBaseUrl,
+      });
+    }
+  }
+
+  // Fallback providers
+  for (const fallbackProviderId of (activeProvider.fallback_providers || [])) {
+    const fp = providers[fallbackProviderId];
+    if (!fp) continue;
+
+    const fpModel = resolveProviderModel(fp);
+    const fpCliCommand = fp.cli_command || 'openclaude';
+    // Somente o env do próprio provider de fallback — misturar o env do
+    // provider ativo faria o attempt reutilizar a base URL/key erradas
+    // (ex.: fallback "omnirouter" chamando a NVIDIA de novo).
+    const fpEnvVars = { ...(fp.env_vars || {}) };
+    const fpBaseUrl = fpEnvVars.OPENAI_BASE_URL || fp.default_base_url;
+
+    if (fpModel) {
+      chain.push({
+        providerId: fallbackProviderId,
+        model: fpModel,
+        cliCommand: fpCliCommand,
+        envVars: { ...fpEnvVars, OPENAI_MODEL: fpModel },
+        baseUrl: fpBaseUrl,
+      });
+    }
+    for (const fbModel of (fp.fallback_models || [])) {
+      if (fbModel && fbModel !== fpModel) {
+        chain.push({
+          providerId: fallbackProviderId,
+          model: fbModel,
+          cliCommand: fpCliCommand,
+          envVars: { ...fpEnvVars, OPENAI_MODEL: fbModel },
+          baseUrl: fpBaseUrl,
+        });
+      }
+    }
+  }
+
+  // Final fallback: anthropic (native claude)
+  if (activeId !== 'anthropic') {
+    chain.push({
+      providerId: 'anthropic',
+      model: null,
+      cliCommand: 'claude',
+      envVars: {},
+      baseUrl: null,
+    });
+  }
+
+  return chain;
+}
+
+/**
+ * CLIs that implement the Agent SDK's subprocess wire protocol — the SDK
+ * always spawns pathToClaudeCodeExecutable with its own flags
+ * (--input-format stream-json --output-format stream-json --verbose,
+ * --permission-prompt-tool stdio, etc.) and talks to it over stdin/stdout
+ * with a control_request/control_response JSON protocol (see
+ * ProcessTransport in @anthropic-ai/claude-agent-sdk/sdk.mjs). claude and
+ * openclaude both speak that protocol; opencode does not — it has its own
+ * CLI shape (`opencode run <msg> -m <provider>/<model> --format json`) and
+ * TUI, unrelated to Claude Code's. Spawning opencode through the SDK fails
+ * immediately (unrecognized args, no control protocol reply) — that's the
+ * "exit code 1 / chat does nothing" failure mode. Chat can't drive opencode
+ * this way (yet — provider_fallback.py's headless "opencode run" +
+ * ndjson-parsing and the Terminal's native PTY spawn are the two paths that
+ * do work today), so any attempt using a non-SDK CLI is skipped here and the
+ * configured fallback_providers carry the conversation instead.
+ */
+const SDK_COMPATIBLE_CLI = new Set(['claude', 'openclaude']);
+
+/**
+ * Check if an error is a retryable provider error (429, 503, quota, capacity).
+ * Includes detection for "Maximum combo retry limit reached".
+ */
+function isRetryableProviderError(error) {
+  if (!error) return false;
+  const msg = String(error.message || error).toLowerCase();
+
+  // "Maximum combo retry limit reached" — provider exhausted internal retries
+  if (msg.includes('maximum combo retry limit reached')) return true;
+
+  // Standard retryable patterns
+  const retryablePatterns = [
+    '429', 'rate limit', 'rate-limit', 'quota', 'too many requests',
+    'resource exhausted', 'capacity', 'overloaded',
+    'service unavailable', 'temporarily unavailable',
+    'insufficient quota', 'billing limit', 'plan limit'
+  ];
+
+  return retryablePatterns.some(p => msg.includes(p));
+}
+
+/**
+ * Check if an error is fatal (auth/config) and should NOT trigger fallback.
+ */
+function isFatalProviderError(error) {
+  if (!error) return false;
+  const msg = String(error.message || error).toLowerCase();
+
+  const fatalPatterns = [
+    '401', '403', 'invalid api key', 'authentication',
+    'unauthorized', 'forbidden', 'no usable api key'
+  ];
+
+  return fatalPatterns.some(p => msg.includes(p));
+}
+
 /**
  * Read chat.trustMode from config/workspace.yaml.
  * Uses a targeted regex — no YAML dep needed.
@@ -43,6 +227,37 @@ const NEEDS_APPROVAL = new Set([
   'Write', 'Edit', 'Bash', 'NotebookEdit', 'Agent',
 ]);
 
+/**
+ * Read an agent's persistent memory (.claude/agent-memory/{agent}/), if any.
+ *
+ * Native Claude Code sessions get CLAUDE.md + .claude/rules/*.md auto-loaded
+ * via the 'claude_code' systemPrompt preset, including memory-recall.md,
+ * which tells the agent to self-serve read its own agent-memory folder.
+ * External providers replace the system prompt entirely (see the
+ * isExternalProvider branch below), so they never get that instruction —
+ * every session starts cold. Mirrors ClaudeBridge.loadAgentMemory in
+ * claude-bridge.js (Terminal); kept as a separate copy since these two
+ * files don't share a util module today.
+ */
+function loadAgentMemory(agent) {
+  if (!agent) return '';
+  const dir = path.join(WORKSPACE_ROOT, '.claude', 'agent-memory', agent);
+  const parts = [];
+  for (const file of ['learnings.md', 'MEMORY.md']) {
+    try {
+      const content = fs.readFileSync(path.join(dir, file), 'utf8').trim();
+      if (content) parts.push(`### ${file}\n${content}`);
+    } catch {
+      // File doesn't exist yet — this agent has no persisted memory. Fine.
+    }
+  }
+  if (!parts.length) return '';
+  const MAX_CHARS = 4000;
+  let combined = parts.join('\n\n');
+  if (combined.length > MAX_CHARS) combined = combined.slice(-MAX_CHARS);
+  return combined;
+}
+
 /**
  * Parse a .claude/agents/{name}.md file into an AgentDefinition.
  * Extracts YAML frontmatter for metadata and the body as the prompt.
@@ -157,6 +372,116 @@ function resolveClaudeExecutable() {
   return _claudeExecutablePath;
 }
 
+/**
+ * Resolve the CLI binary for external (non-Anthropic) providers.
+ * Mirrors ClaudeBridge.findClaudeCommand: shell `which` first, then hardcoded
+ * paths. Returns null when nothing is found — the SDK needs a real path, so
+ * the caller falls back to the plain chat-completion session.
+ * Hardcoded dispatch per command to satisfy semgrep.
+ */
+const _cliBinaryCache = new Map();
+function resolveCliBinary(cliCommand) {
+  if (_cliBinaryCache.has(cliCommand)) return _cliBinaryCache.get(cliCommand);
+
+  const { execSync } = require('child_process');
+  try {
+    // Hardcoded dispatch per command (not a template) to satisfy semgrep,
+    // mirroring ClaudeBridge.findClaudeCommand.
+    let resolved;
+    if (cliCommand === 'openclaude') {
+      resolved = execSync('which openclaude', { encoding: 'utf8', stdio: ['pipe', 'pipe', 'ignore'] }).trim();
+    } else if (cliCommand === 'opencode') {
+      resolved = execSync('which opencode', { encoding: 'utf8', stdio: ['pipe', 'pipe', 'ignore'] }).trim();
+    } else {
+      resolved = execSync('which claude', { encoding: 'utf8', stdio: ['pipe', 'pipe', 'ignore'] }).trim();
+    }
+    if (resolved) {
+      console.log(`[chat-bridge] Found ${cliCommand} at: ${resolved}`);
+      _cliBinaryCache.set(cliCommand, resolved);
+      return resolved;
+    }
+  } catch { /* which failed — try hardcoded paths */ }
+
+  const home = process.env.HOME || '/';
+  let candidates;
+  if (cliCommand === 'openclaude') {
+    candidates = [
+      path.join(home, '.local', 'bin', 'openclaude'),
+      '/usr/local/bin/openclaude',
+      '/usr/bin/openclaude',
+    ];
+  } else if (cliCommand === 'opencode') {
+    candidates = [
+      path.join(home, '.local', 'bin', 'opencode'),
+      '/usr/local/bin/opencode',
+      '/usr/bin/opencode',
+    ];
+  } else {
+    candidates = [
+      path.join(home, '.claude', 'local', 'claude'),
+      path.join(home, '.local', 'bin', 'claude'),
+      '/usr/local/bin/claude',
+      '/usr/bin/claude',
+    ];
+  }
+  for (const p of candidates) {
+    try {
+      if (fs.existsSync(p)) {
+        console.log(`[chat-bridge] Found ${cliCommand} at hardcoded path: ${p}`);
+        _cliBinaryCache.set(cliCommand, p);
+        return p;
+      }
+    } catch { continue; }
+  }
+
+  console.error(`[chat-bridge] ${cliCommand} not found anywhere`);
+  _cliBinaryCache.set(cliCommand, null);
+  return null;
+}
+
+/**
+ * Build the environment for an external-provider CLI process.
+ * Same approach as ClaudeBridge: whitelist essential system vars (no full
+ * process.env spread — stale OPENAI_API_KEY would override Codex OAuth) and
+ * layer the provider's env_vars on top. The SDK passes this object as the
+ * child process env verbatim.
+ */
+const PROVIDER_SYSTEM_VARS = [
+  'HOME', 'USER', 'SHELL', 'PATH', 'LANG', 'LC_ALL', 'LC_CTYPE',
+  'LOGNAME', 'HOSTNAME', 'XDG_RUNTIME_DIR', 'XDG_DATA_HOME',
+  'XDG_CONFIG_HOME', 'XDG_CACHE_HOME', 'TMPDIR',
+  'SSH_AUTH_SOCK', 'SSH_AGENT_PID',
+  'NVM_DIR', 'NVM_BIN', 'NVM_INC',
+  'CODEX_HOME', 'CLAUDE_CONFIG_DIR',
+  // Container marker exported by entrypoint.sh — required for the SDK CLI's
+  // --dangerously-skip-permissions/bypass mode to work as root.
+  'IS_SANDBOX',
+];
+function buildProviderEnv(providerConfig) {
+  const env = {};
+  for (const key of PROVIDER_SYSTEM_VARS) {
+    if (process.env[key]) env[key] = process.env[key];
+  }
+  const providerEnv = { ...(providerConfig.env_vars || {}) };
+  // Same model defaults as ClaudeBridge — codexplan/codexspark route to the
+  // Codex backend; a raw gpt-5.x would silently bypass Codex OAuth.
+  if (!providerEnv.OPENAI_MODEL) {
+    if (providerConfig.active === 'codex_auth') providerEnv.OPENAI_MODEL = 'codexplan';
+    else if (providerConfig.active === 'openai') providerEnv.OPENAI_MODEL = 'gpt-4.1';
+  }
+  // O auto-updater do CLI migra a instalação npm pro instalador nativo no
+  // meio da sessão e mata o processo com exit 1.
+  // OPENCLAUDE_MAX_RETRIES: o default do CLI são 10 retries com backoff
+  // exponencial (até ~35s cada ≈ 2,5min por modelo) — quem rotaciona é a
+  // nossa fallback chain, então o retry interno fica curto.
+  return {
+    OPENCLAUDE_MAX_RETRIES: '3',
+    ...env,
+    ...providerEnv,
+    DISABLE_AUTOUPDATER: '1',
+  };
+}
+
 /**
  * Scan a tool_result text for a ticket-creation response.
  * Returns the ticket id if a POST /api/tickets response is detected, else null.
@@ -241,6 +566,11 @@ function detectCreatedTicketId(text) {
 class ChatBridge {
   constructor() {
     this.sessions = new Map(); // sessionId -> { query, abortController, active, sdkSessionId }
+    // Rate limiting state for OpenAI-compatible providers
+    this._lastRequestTime = 0;
+    this._minIntervalMs = parseInt(process.env.CHAT_MIN_INTERVAL_MS || '2000', 10);
+    this._maxRetries = parseInt(process.env.CHAT_MAX_RETRIES || '3', 10);
+    this._baseDelayMs = parseInt(process.env.CHAT_BASE_DELAY_MS || '5000', 10);
   }
 
   _buildChatCompletionSystemPrompt(agentName, cwd, sessionId) {
@@ -274,6 +604,70 @@ class ChatBridge {
     return '';
   }
 
+  /**
+   * Enforce minimum interval between requests, then fetch with retry/backoff.
+   * Retries on 429 (rate limited) and 503 (upstream unavailable).
+   * Does NOT retry internally on "Maximum combo retry limit reached" — lets
+   * outer fallback loop advance to next model/provider instead.
+   */
+  async _rateLimitedFetch(url, options) {
+    // Enforce minimum interval between requests
+    const now = Date.now();
+    const elapsed = now - this._lastRequestTime;
+    if (elapsed < this._minIntervalMs) {
+      const wait = this._minIntervalMs - elapsed;
+      console.log(`[chat-bridge] Rate limit: aguardando ${wait}ms antes do próximo request...`);
+      await new Promise((r) => setTimeout(r, wait));
+    }
+
+    for (let attempt = 0; attempt <= this._maxRetries; attempt++) {
+      this._lastRequestTime = Date.now();
+
+      const resp = await fetch(url, options);
+
+      if (resp.ok) return resp;
+
+      // Check for "Maximum combo retry limit reached" — provider-level
+      // combo exhaustion. Don't retry internally; let outer loop rotate
+      // to next model/provider in chain.
+      if (resp.status === 503) {
+        const bodyText = await resp.text().catch(() => '');
+        // resp.text() consumiu o body — qualquer retorno daqui pra frente
+        // precisa de um Response reconstruído pra o caller ler o erro.
+        const remake = () => new Response(bodyText, { status: resp.status, statusText: resp.statusText, headers: resp.headers });
+        if (bodyText.includes('Maximum combo retry limit reached')) {
+          console.warn(`[chat-bridge] Provider combo exhausted (503): ${bodyText.slice(0, 200)}`);
+          // Não faz retry interno — deixa o loop externo rotacionar o provider.
+          return remake();
+        }
+        if (attempt === this._maxRetries) return remake();
+      }
+
+      const isRetryable = resp.status === 429 || resp.status === 503;
+      if (!isRetryable || attempt === this._maxRetries) {
+        return resp; // let caller handle non-retryable errors or final failure
+      }
+
+      // Exponential backoff: base * 2^attempt (5s, 10s, 20s)
+      const delay = this._baseDelayMs * Math.pow(2, attempt);
+      let retryAfter = delay;
+      const retryAfterHeader = resp.headers.get('Retry-After');
+      if (retryAfterHeader) {
+        const parsed = parseInt(retryAfterHeader, 10);
+        if (!isNaN(parsed)) retryAfter = parsed * 1000;
+      }
+
+      console.warn(
+        `[chat-bridge] ${resp.status} no request (tentativa ${attempt + 1}/${this._maxRetries + 1}). ` +
+        `Aguardando ${Math.round(retryAfter / 1000)}s antes de tentar novamente...`
+      );
+      await new Promise((r) => setTimeout(r, retryAfter));
+    }
+
+    // Should not reach here, but return last error response
+    throw new Error(`_rateLimitedFetch: todas as ${this._maxRetries + 1} tentativas falharam`);
+  }
+
   async _startOpenAICompatibleSession(sessionId, options, providerConfig) {
     const {
       agentName,
@@ -291,18 +685,6 @@ class ChatBridge {
 
     const abortController = new AbortController();
     const cwd = workingDir || process.cwd();
-    const env = providerConfig.env_vars || {};
-    const model = resolveProviderModel(providerConfig);
-    const baseUrl = (env.OPENAI_BASE_URL || 'https://api.openai.com/v1').replace(/\/+$/, '');
-    const apiKey = env.OPENAI_API_KEY || env.CODEX_API_KEY || '';
-
-    if (!model) {
-      throw new Error(`Provider "${providerConfig.active}" sem modelo configurado. Defina o campo Model em Providers.`);
-    }
-    if (!apiKey) {
-      throw new Error(`Provider "${providerConfig.active}" sem API key configurada para Chat Completion.`);
-    }
-
     const runtimePrompt = this._buildChatCompletionSystemPrompt(agentName, cwd, sessionId);
 
     let finalPrompt = prompt || '';
@@ -311,31 +693,81 @@ class ChatBridge {
       finalPrompt += `\n\n[Attached files]\n${names}\n`;
     }
 
+    const makeAttempts = () => {
+      const providers = providerConfig.providers || {};
+      const activeProvider = providers[providerConfig.active] || providerConfig;
+      const providerOrder = [
+        providerConfig.active,
+        ...(Array.isArray(providerConfig.fallback_providers) ? providerConfig.fallback_providers : []),
+      ].filter(Boolean);
+      const attempts = [];
+
+      for (const providerId of providerOrder) {
+        const p = providers[providerId] || (providerId === providerConfig.active ? activeProvider : null);
+        if (!p) continue;
+        const env = p.env_vars || {};
+        const baseUrl = (env.OPENAI_BASE_URL || 'https://api.openai.com/v1').replace(/\/+$/, '');
+        const apiKey = env.OPENAI_API_KEY || env.NVIDIA_API_KEY || env.CODEX_API_KEY || '';
+        const primaryModel = resolveProviderModel(p);
+        const models = [];
+        if (primaryModel) models.push(primaryModel);
+        for (const m of (Array.isArray(p.fallback_models) ? p.fallback_models : [])) {
+          if (m && !models.includes(m)) models.push(m);
+        }
+        for (const model of models) {
+          attempts.push({ providerId, baseUrl, apiKey, model });
+        }
+      }
+      return attempts;
+    };
+
+    const attempts = makeAttempts();
+    if (attempts.length === 0) {
+      throw new Error(`Provider "${providerConfig.active}" sem modelo configurado. Defina o campo Model em Providers.`);
+    }
+
     const session = { active: true, abortController, sdkSessionId: null };
     this.sessions.set(sessionId, session);
 
     (async () => {
       try {
-        const resp = await fetch(`${baseUrl}/chat/completions`, {
-          method: 'POST',
-          headers: {
-            Authorization: `Bearer ${apiKey}`,
-            'Content-Type': 'application/json',
-          },
-          body: JSON.stringify({
-            model,
-            stream: true,
-            messages: [
-              { role: 'system', content: runtimePrompt },
-              { role: 'user', content: finalPrompt },
-            ],
-          }),
-          signal: abortController.signal,
-        });
+        let resp = null;
+        let selectedAttempt = null;
+        let lastBody = '';
+        for (const attempt of attempts) {
+          if (!attempt.apiKey) {
+            lastBody = `Provider "${attempt.providerId}" sem API key configurada para Chat Completion.`;
+            continue;
+          }
+          selectedAttempt = attempt;
+          console.log(`[chat-bridge] Chat fallback attempt ${attempt.providerId}:${attempt.model}`);
+          resp = await this._rateLimitedFetch(`${attempt.baseUrl}/chat/completions`, {
+            method: 'POST',
+            headers: {
+              Authorization: `Bearer ${attempt.apiKey}`,
+              'Content-Type': 'application/json',
+            },
+            body: JSON.stringify({
+              model: attempt.model,
+              stream: true,
+              messages: [
+                { role: 'system', content: runtimePrompt },
+                { role: 'user', content: finalPrompt },
+              ],
+            }),
+            signal: abortController.signal,
+          });
+
+          if (resp.ok && resp.body) break;
+
+          lastBody = await resp.text().catch(() => '');
+          if (![429, 503].includes(resp.status)) break;
+          console.warn(`[chat-bridge] ${resp.status} on ${attempt.providerId}:${attempt.model}; trying next fallback`);
+        }
 
-        if (!resp.ok || !resp.body) {
-          const body = await resp.text().catch(() => '');
-          throw new Error(`Chat Completion falhou (${resp.status}): ${body.slice(0, 240)}`);
+        if (!resp || !resp.ok || !resp.body) {
+          const label = selectedAttempt ? `${selectedAttempt.providerId}:${selectedAttempt.model}` : providerConfig.active;
+          throw new Error(`Chat Completion falhou em ${label} (${resp?.status || 'no-response'}): ${lastBody.slice(0, 240)}`);
         }
 
         if (onMessage) {
@@ -408,8 +840,24 @@ class ChatBridge {
     } = options;
 
     const providerConfig = loadProviderConfig();
-    if (providerConfig.active !== 'anthropic') {
-      return this._startOpenAICompatibleSession(sessionId, options, providerConfig);
+    const isExternalProvider = !!providerConfig.active && providerConfig.active !== 'anthropic';
+    let externalCliPath = null;
+    if (isExternalProvider) {
+      // Code-mode providers go through the Agent SDK with the openclaude
+      // binary — full tool calling, streaming, session resume. Only genuinely
+      // chat-completion-only models keep the plain REST path.
+      if (getProviderMode(providerConfig) !== 'code') {
+        return this._startOpenAICompatibleSession(sessionId, options, providerConfig);
+      }
+      if (SDK_COMPATIBLE_CLI.has(providerConfig.cli_command)) {
+        externalCliPath = resolveCliBinary(providerConfig.cli_command || 'openclaude');
+        if (!externalCliPath) {
+          console.warn(`[chat-bridge] ${providerConfig.cli_command} binary not found — falling back to chat completion. Install with: npm install -g @gitlawb/openclaude`);
+          return this._startOpenAICompatibleSession(sessionId, options, providerConfig);
+        }
+      } else {
+        console.warn(`[chat-bridge] Active provider "${providerConfig.active}" uses cli_command "${providerConfig.cli_command}", which doesn't speak the Agent SDK protocol — Chat will use its fallback_providers instead`);
+      }
     }
 
     const { query: sdkQuery } = await loadSDK();
@@ -426,8 +874,14 @@ class ChatBridge {
       abortController,
     };
 
-    const claudeExe = resolveClaudeExecutable();
-    if (claudeExe) queryOptions.pathToClaudeCodeExecutable = claudeExe;
+    if (isExternalProvider && externalCliPath) {
+      queryOptions.pathToClaudeCodeExecutable = externalCliPath;
+      queryOptions.env = buildProviderEnv(providerConfig);
+      console.log(`[chat-bridge] External provider "${providerConfig.active}" via ${externalCliPath} (model: ${resolveProviderModel(providerConfig) || 'default'})`);
+    } else if (!isExternalProvider) {
+      const claudeExe = resolveClaudeExecutable();
+      if (claudeExe) queryOptions.pathToClaudeCodeExecutable = claudeExe;
+    }
 
     // Load agent definition from .claude/agents/{name}.md
     if (agentName) {
@@ -458,13 +912,30 @@ class ChatBridge {
         if (systemPromptExtras && !sdkSessionId) {
           promptAppend = promptAppend + '\n\n' + systemPromptExtras;
         }
-        queryOptions.systemPrompt = {
-          type: 'preset',
-          preset: 'claude_code',
-          append: promptAppend,
-        };
-        if (agentDef.model) queryOptions.model = agentDef.model;
-        console.log(`[chat-bridge] Loaded agent "${agentName}" via systemPrompt.append (${agentDef.prompt.length} chars, model: ${agentDef.model || 'inherit'})`);
+        if (isExternalProvider) {
+          // Mirror ClaudeBridge: --append-system-prompt is too weak for GPT
+          // models, so REPLACE the system prompt to force the agent persona.
+          // agentDef.model is a Claude model name — meaningless here; the
+          // model comes from the provider's OPENAI_MODEL env var.
+          const priorMemory = loadAgentMemory(agentName);
+          if (priorMemory) {
+            promptAppend += '\n\n## Previous Session Memory (yours — resume/summarize before acting)\n' + priorMemory;
+          }
+          queryOptions.systemPrompt = promptAppend + '\n\n' +
+            'CRITICAL: You MUST fully embody this agent persona. ' +
+            'You are NOT Claude, OpenClaude, or a generic assistant — you ARE ' + agentName + '. ' +
+            'When asked who you are, ALWAYS respond as ' + agentName + '. ' +
+            'Never break character. Follow ALL instructions above.';
+          console.log(`[chat-bridge] Loaded agent "${agentName}" via systemPrompt replace (${agentDef.prompt.length} chars, external provider)`);
+        } else {
+          queryOptions.systemPrompt = {
+            type: 'preset',
+            preset: 'claude_code',
+            append: promptAppend,
+          };
+          if (agentDef.model) queryOptions.model = agentDef.model;
+          console.log(`[chat-bridge] Loaded agent "${agentName}" via systemPrompt.append (${agentDef.prompt.length} chars, model: ${agentDef.model || 'inherit'})`);
+        }
       } else {
         console.warn(`[chat-bridge] Agent "${agentName}" not found, running without agent`);
       }
@@ -585,75 +1056,254 @@ class ChatBridge {
       abortController,
       agentName,
       sdkSessionId: sdkSessionId || null,
+      lastHudProviderId: null,
+      lastHudProviderModel: null,
     };
     this.sessions.set(sessionId, session);
 
-    // Run query in background
-    (async () => {
-      try {
-        console.log(`[chat-bridge] Starting query for session ${sessionId}, agent: ${agentName}, resume: ${sdkSessionId || 'new'}`);
-        console.log(`[chat-bridge] Query options:`, JSON.stringify({ cwd: queryOptions.cwd, agent: queryOptions.agent, resume: queryOptions.resume, allowedTools: queryOptions.allowedTools?.length }, null, 2));
-        const q = sdkQuery({ prompt: finalPrompt, options: queryOptions });
-        console.log(`[chat-bridge] Query created, starting iteration...`);
+    // Build provider fallback chain for external providers
+    let fallbackChain = [];
+    let currentFallbackIndex = 0;
+    if (isExternalProvider) {
+      // Drop attempts whose cli_command can't speak the Agent SDK protocol
+      // (see SDK_COMPATIBLE_CLI) — e.g. opencode. buildProviderFallbackChain
+      // always appends a trailing native-anthropic entry when the active
+      // provider isn't anthropic, so this never filters down to empty.
+      fallbackChain = buildProviderFallbackChain(providerConfig)
+        .filter((attempt) => SDK_COMPATIBLE_CLI.has(attempt.cliCommand));
+      console.log(`[chat-bridge] Built fallback chain with ${fallbackChain.length} attempts:`,
+        fallbackChain.map(c => `${c.providerId}:${c.model || 'native'}`).join(' → '));
+    }
 
-        for await (const message of q) {
-          if (!session.active) break;
+    // Run query with provider fallback
+    const runQueryWithFallback = async () => {
+      while (currentFallbackIndex < (fallbackChain.length || 1)) {
+        if (!session.active) return;
+
+        // Apply current fallback config if using external provider
+        if (isExternalProvider && fallbackChain.length > 0) {
+          const attempt = fallbackChain[currentFallbackIndex];
+          console.log(`[chat-bridge] Attempt ${currentFallbackIndex + 1}/${fallbackChain.length}: ${attempt.providerId}:${attempt.model || 'native'}`);
+
+          // AbortController novo por attempt — abortar o anterior mata um
+          // child preso no backoff de retry sem derrubar a sessão nova.
+          if (currentFallbackIndex > 0) {
+            const freshAbort = new AbortController();
+            queryOptions.abortController = freshAbort;
+            session.abortController = freshAbort;
+          }
 
-          const eventDetail = message.type === 'stream_event' ? ` event=${message.event?.type} cb=${message.event?.content_block?.type || message.event?.delta?.type || ''}` : '';
-          if (message.type === 'system') {
-            console.log(`[chat-bridge] System message: subtype=${message.subtype}, agent=${message.agent || 'none'}, data=${JSON.stringify(message).slice(0, 200)}`);
+          // Env do attempt montado do zero (vars de sistema + env do provider
+          // do attempt). NUNCA herdar o env do provider que falhou — uma
+          // OPENAI_BASE_URL/NVIDIA_API_KEY antiga sequestraria a chamada.
+          if (attempt.providerId === 'anthropic' && attempt.cliCommand === 'claude') {
+            // Claude nativo: env limpo, credenciais vêm de ~/.claude via HOME.
+            delete queryOptions.env;
           } else {
-            console.log(`[chat-bridge] Message received: type=${message.type}${eventDetail}`);
+            queryOptions.env = buildProviderEnv({
+              active: attempt.providerId,
+              env_vars: { ...attempt.envVars },
+            });
+            if (attempt.baseUrl) {
+              queryOptions.env.OPENAI_BASE_URL = attempt.baseUrl;
+            }
           }
 
-          // Capture SDK session ID from any message that has it
-          if (message.session_id && !session.sdkSessionId) {
-            session.sdkSessionId = message.session_id;
-            if (onMessage) {
-              onMessage({ type: 'session_id', sdkSessionId: message.session_id });
+          // Update CLI path if provider changed
+          if (attempt.cliCommand && attempt.cliCommand !== providerConfig.cli_command) {
+            const cliPath = resolveCliBinary(attempt.cliCommand);
+            if (cliPath) {
+              queryOptions.pathToClaudeCodeExecutable = cliPath;
             }
           }
 
-          // Auto-detect ticket creation in tool_result blocks.
-          if (message.type === 'user') {
-            const content = message.message?.content || message.content;
-            if (Array.isArray(content)) {
-              for (const block of content) {
-                if (block.type !== 'tool_result') continue;
-                const raw = Array.isArray(block.content)
-                  ? block.content.map(c => (typeof c === 'string' ? c : c?.text || '')).join('\n')
-                  : (typeof block.content === 'string' ? block.content : '');
-                const ticketId = detectCreatedTicketId(raw);
-                if (ticketId) {
-                  console.log(`[chat-bridge] ✓ Detected ticket creation: ${ticketId} — auto-binding to session ${sessionId}`);
-                  if (onMessage) {
-                    onMessage({ type: 'ticket_detected', ticketId });
+          // Cada attempt começa uma run nova — não deixar o session_id da
+          // tentativa que falhou grudar no cliente.
+          session.sdkSessionId = sdkSessionId || null;
+        }
+
+        const hudProviderId = (isExternalProvider && fallbackChain.length > 0)
+          ? fallbackChain[currentFallbackIndex].providerId
+          : (providerConfig.active || 'anthropic');
+        const hudProviderModel = (isExternalProvider && fallbackChain.length > 0)
+          ? (fallbackChain[currentFallbackIndex].model || 'native')
+          : (resolveProviderModel(providerConfig) || 'default');
+        const turnStartedAt = Date.now();
+        _emitChatHud(session, onMessage, { busy: true, providerId: hudProviderId, providerModel: hudProviderModel });
+
+        let advanceAfterErrorResult = false;
+        try {
+          console.log(`[chat-bridge] Starting query for session ${sessionId}, agent: ${agentName}, resume: ${sdkSessionId || 'new'}`);
+          console.log(`[chat-bridge] Query options:`, JSON.stringify({ cwd: queryOptions.cwd, agent: queryOptions.agent, resume: queryOptions.resume, allowedTools: queryOptions.allowedTools?.length }, null, 2));
+          const q = sdkQuery({ prompt: finalPrompt, options: queryOptions });
+          console.log(`[chat-bridge] Query created, starting iteration...`);
+
+          for await (const message of q) {
+            if (!session.active) break;
+
+            const eventDetail = message.type === 'stream_event' ? ` event=${message.event?.type} cb=${message.event?.content_block?.type || message.event?.delta?.type || ''}` : '';
+            if (message.type === 'system') {
+              console.log(`[chat-bridge] System message: subtype=${message.subtype}, agent=${message.agent || 'none'}, data=${JSON.stringify(message).slice(0, 200)}`);
+            } else {
+              console.log(`[chat-bridge] Message received: type=${message.type}${eventDetail}`);
+            }
+
+            // O CLI faz retry interno com backoff exponencial e anuncia cada
+            // tentativa como system/api_retry. Em erro de capacidade (5xx/429)
+            // com fallback disponível, não vale esperar o backoff — corta e
+            // rotaciona o provider imediatamente.
+            if (message.type === 'system' && message.subtype === 'api_retry') {
+              const status = Number(message.error_status) || 0;
+              const attemptNum = Number(message.attempt) || 0;
+              const retryableStatus = status === 429 || (status >= 500 && status <= 599);
+              const hasMoreFallbacks = isExternalProvider &&
+                currentFallbackIndex < fallbackChain.length - 1;
+              if (hasMoreFallbacks && retryableStatus && attemptNum >= 2) {
+                console.warn(`[chat-bridge] api_retry ${attemptNum}x status=${status} on attempt ${currentFallbackIndex + 1} — advancing fallback chain early`);
+                advanceAfterErrorResult = true;
+                // Aborta ANTES do break: o child pode estar dormindo dezenas
+                // de segundos no backoff e o cleanup do iterator esperaria ele.
+                try { queryOptions.abortController.abort(); } catch {}
+                break;
+              }
+            }
+
+            // Erro de provider (503/429 do OmniRoute, "Maximum combo retry
+            // limit reached", etc.) NÃO vira exceção no Agent SDK — a query
+            // termina "normal" com um result de erro. Detectar aqui e avançar
+            // a cadeia de fallback em vez de entregar o erro pro chat.
+            if (message.type === 'result') {
+              // Real usage — same fields _transformMessage's 'result' case
+              // already reads (msg.usage, msg.duration_ms). tokensPerSec is
+              // a rough turn-average (total tokens / wall time), not a live
+              // streaming rate like the Terminal's opencode path gets from
+              // per-line NDJSON ticks — the Agent SDK doesn't expose partial
+              // usage, only the final total.
+              const usage = message.usage || {};
+              const totalTokens = (usage.input_tokens || 0) + (usage.output_tokens || 0) +
+                (usage.cache_creation_input_tokens || 0) + (usage.cache_read_input_tokens || 0);
+              const elapsedSec = Math.max(0.001, (Date.now() - turnStartedAt) / 1000);
+              _emitChatHud(session, onMessage, {
+                busy: false,
+                tokensPerSec: totalTokens > 0 ? Math.round(totalTokens / elapsedSec) : 0,
+                totalTokens: totalTokens || null,
+                heavy: totalTokens > CHAT_HUD_HEAVY_TOKEN_THRESHOLD,
+              });
+
+              const isErrorResult = message.is_error === true ||
+                (message.subtype && message.subtype !== 'success');
+              if (isErrorResult) {
+                const errText = [message.result, ...(Array.isArray(message.errors) ? message.errors : [])]
+                  .filter((x) => typeof x === 'string' && x)
+                  .join(' ') || JSON.stringify(message).slice(0, 500);
+                const hasMoreFallbacks = isExternalProvider &&
+                  currentFallbackIndex < fallbackChain.length - 1;
+                if (hasMoreFallbacks && session.active && !isFatalProviderError(errText)) {
+                  console.warn(`[chat-bridge] Error result (subtype=${message.subtype}) on attempt ${currentFallbackIndex + 1}: ${errText.slice(0, 300)} — advancing fallback chain`);
+                  advanceAfterErrorResult = true;
+                  break; // sai do for-await; o while tenta o próximo provider/modelo
+                }
+              }
+            }
+
+            // Capture SDK session ID from any message that has it
+            if (message.session_id && !session.sdkSessionId) {
+              session.sdkSessionId = message.session_id;
+              if (onMessage) {
+                onMessage({ type: 'session_id', sdkSessionId: message.session_id });
+              }
+            }
+
+            // Auto-detect ticket creation in tool_result blocks.
+            if (message.type === 'user') {
+              const content = message.message?.content || message.content;
+              if (Array.isArray(content)) {
+                for (const block of content) {
+                  if (block.type !== 'tool_result') continue;
+                  const raw = Array.isArray(block.content)
+                    ? block.content.map(c => (typeof c === 'string' ? c : c?.text || '')).join('\n')
+                    : (typeof block.content === 'string' ? block.content : '');
+                  const ticketId = detectCreatedTicketId(raw);
+                  if (ticketId) {
+                    console.log(`[chat-bridge] ✓ Detected ticket creation: ${ticketId} — auto-binding to session ${sessionId}`);
+                    if (onMessage) {
+                      onMessage({ type: 'ticket_detected', ticketId });
+                    }
                   }
                 }
               }
             }
-          }
 
-          if (onMessage) {
-            onMessage(this._transformMessage(message));
+            if (onMessage) {
+              onMessage(this._transformMessage(message));
+            }
+          }
+          console.log(`[chat-bridge] Query iteration finished for session ${sessionId}`);
+
+          // Result de erro detectado no meio da iteração — tenta o próximo
+          // provider/modelo da cadeia em vez de encerrar a sessão.
+          if (advanceAfterErrorResult && session.active) {
+            // Mata o child da tentativa que falhou (pode estar dormindo no
+            // backoff de retry) — a próxima iteração cria um controller novo.
+            try { queryOptions.abortController.abort(); } catch {}
+            currentFallbackIndex++;
+            const next = fallbackChain[currentFallbackIndex];
+            console.warn(`[chat-bridge] Advancing to fallback ${currentFallbackIndex + 1}/${fallbackChain.length}: ${next.providerId}:${next.model || 'native'}`);
+            continue;
           }
-        }
-        console.log(`[chat-bridge] Query iteration finished for session ${sessionId}`);
 
-        session.active = false;
-        this.sessions.delete(sessionId);
-        if (onComplete) onComplete({ sdkSessionId: session.sdkSessionId });
-      } catch (err) {
-        console.error(`[chat-bridge] Error in session ${sessionId}:`, err.message || err);
-        session.active = false;
-        this.sessions.delete(sessionId);
-        if (err.name === 'AbortError') {
+          session.active = false;
+          this.sessions.delete(sessionId);
           if (onComplete) onComplete({ sdkSessionId: session.sdkSessionId });
-        } else {
-          if (onError) onError(err);
+          return; // Success - exit fallback loop
+
+        } catch (err) {
+          // Abort interno disparado pelo avanço da cadeia (api_retry) — não é
+          // cancelamento do usuário; segue pro próximo provider/modelo.
+          if (advanceAfterErrorResult && session.active) {
+            currentFallbackIndex++;
+            const next = fallbackChain[currentFallbackIndex];
+            console.warn(`[chat-bridge] Advancing to fallback ${currentFallbackIndex + 1}/${fallbackChain.length} after internal abort: ${next.providerId}:${next.model || 'native'}`);
+            continue;
+          }
+
+          console.error(`[chat-bridge] Error in session ${sessionId} (attempt ${currentFallbackIndex + 1}):`, err.message || err);
+
+          // Avança a cadeia em qualquer erro não-fatal enquanto houver
+          // fallback — erros do CLI chegam como "process exited with code N"
+          // sem o texto 503/429, então filtrar só por padrão retryable
+          // deixaria a sessão morrer exatamente no caso que queremos cobrir.
+          const isRetryable = isExternalProvider && isRetryableProviderError(err);
+          const isFatal = isExternalProvider && isFatalProviderError(err);
+          const isAbort = err.name === 'AbortError';
+
+          if (!isFatal && !isAbort && isExternalProvider && session.active &&
+              currentFallbackIndex < fallbackChain.length - 1) {
+            currentFallbackIndex++;
+            console.warn(`[chat-bridge] ${isRetryable ? 'Retryable' : 'Non-fatal'} error, advancing to fallback ${currentFallbackIndex + 1}/${fallbackChain.length}: ${fallbackChain[currentFallbackIndex].providerId}:${fallbackChain[currentFallbackIndex].model || 'native'}`);
+            // Continue loop to try next fallback
+            continue;
+          }
+
+          if (isFatal) {
+            console.error(`[chat-bridge] Fatal provider error, not falling back: ${err.message}`);
+          }
+
+          // No more fallbacks or fatal error - propagate error
+          _emitChatHud(session, onMessage, { busy: false, tokensPerSec: 0 });
+          session.active = false;
+          this.sessions.delete(sessionId);
+          if (err.name === 'AbortError') {
+            if (onComplete) onComplete({ sdkSessionId: session.sdkSessionId });
+          } else {
+            if (onError) onError(err);
+          }
+          return;
         }
       }
-    })();
+    };
+
+    runQueryWithFallback();
 
     return { sessionId, sdkSessionId: session.sdkSessionId };
   }
@@ -866,4 +1516,11 @@ class ChatBridge {
   }
 }
 
-module.exports = { ChatBridge };
+module.exports = {
+  ChatBridge,
+  // Exportados para testes
+  buildProviderFallbackChain,
+  isRetryableProviderError,
+  isFatalProviderError,
+  SDK_COMPATIBLE_CLI,
+};
diff --git a/dashboard/terminal-server/src/claude-bridge.js b/dashboard/terminal-server/src/claude-bridge.js
index baa68ae45..27fee7d1e 100644
--- a/dashboard/terminal-server/src/claude-bridge.js
+++ b/dashboard/terminal-server/src/claude-bridge.js
@@ -1,12 +1,344 @@
 const { spawn } = require('node-pty');
+const cp = require('child_process');
 const path = require('path');
 const fs = require('fs');
+const os = require('os');
+
+// chalk (used inside marked-terminal) auto-detects color support from THIS
+// process's own stdout — but this process is a backend service with no real
+// tty of its own; the actual renderer is the browser's xterm.js, which
+// supports full color regardless. Without this, chalk sees "no tty" and
+// silently strips every ANSI code before marked-terminal's output ever
+// leaves this process. Must be set before requiring marked-terminal —
+// chalk reads it once at import time.
+process.env.FORCE_COLOR = process.env.FORCE_COLOR || '1';
+
+const { marked } = require('marked');
+const TerminalRenderer = require('marked-terminal').default;
+
+// Renders the opencode REPL's response markdown (headers, bold, lists, code
+// blocks) as ANSI-styled terminal output instead of dumping raw markdown
+// syntax. reflowText:false — the pty/xterm.js already wraps at the real
+// terminal width; re-wrapping here at a fixed guess would fight that.
+marked.setOptions({
+  renderer: new TerminalRenderer({ reflowText: false }),
+});
+
+// Workspace root is three levels up from this file (dashboard/terminal-server/src/).
+const WORKSPACE_ROOT = path.resolve(__dirname, '..', '..', '..');
 const {
   loadProviderConfig,
   resolveProviderModel,
   getProviderMode,
 } = require('./provider-config');
 
+
+function readTerminalTrustMode() {
+  try {
+    const yaml = fs.readFileSync(path.join(WORKSPACE_ROOT, 'config', 'workspace.yaml'), 'utf8');
+    const m = yaml.match(/^chat:\s*\n(?:[ \t]+[^\n]*\n)*?[ \t]+trustMode:\s*(true|false)/m);
+    return m ? m[1] === 'true' : false;
+  } catch {
+    return false;
+  }
+}
+
+function terminalPromptAcceptInput(buffer) {
+  const clean = String(buffer || '').replace(/\x1b\[[0-9;?]*[ -/]*[@-~]/g, '');
+  if (/Do you trust the files in this folder\?/i.test(clean)) return '\r';
+  // First-run bypass-permissions confirmation dialog (Claude Code /
+  // OpenClaude v0.22+): "1. No, exit / 2. Yes, I accept" — accept is option 2.
+  if (/\b2\.\s*Yes, I accept/i.test(clean)) return '2\r';
+  if (/Do you want to proceed\?/i.test(clean)
+    || /Allow (this )?(command|tool|operation)/i.test(clean)
+    || /permission (request|required|to use|to run)/i.test(clean)
+    || /\b1\.\s*(Yes|Allow|Proceed)/i.test(clean)) {
+    return '1\r';
+  }
+  return null;
+}
+
+
+// A real pty (node-pty) has a line discipline that turns \n into \r\n on
+// output; a plain string piped to onOutput doesn't. Terminals move down one
+// row on \n but don't return to column 0 without an explicit \r, so raw
+// multi-line text from opencode's NDJSON `text` events renders as a
+// staircase (each line starting one column further right than the last).
+function toTerminalText(text) {
+  return text.replace(/\r?\n/g, '\r\n');
+}
+
+// marked-terminal throws on some malformed/edge-case markdown rather than
+// degrading gracefully — a rendering bug shouldn't ever hide the model's
+// actual answer, so fall back to the raw text if parsing fails.
+function renderMarkdown(text) {
+  try {
+    return marked(text).replace(/\n+$/, '');
+  } catch {
+    return text;
+  }
+}
+
+function isPtyEio(error) {
+  return error?.code === 'EIO' || /\bEIO\b|read EIO|write EIO/i.test(error?.message || '');
+}
+
+// Max time a single `opencode run` turn may take before we kill it and
+// report a timeout instead of leaving the user waiting forever. Confirmed
+// live (2026-07-13) that 120s was too short for real multi-step agentic
+// work (reviewing drafts, reading multiple files, rewriting content) — the
+// watchdog killed a turn mid-task that was doing legitimate work, not
+// hanging. 10 minutes is still provisional; Fase 3 burn-in
+// (runtime-harness-agnostic-eval feature folder) should replace it with an
+// evidence-based number once real task latencies are observed.
+const OPENCODE_TURN_TIMEOUT_MS = 600_000;
+
+// Above this many tokens in a single step, the terminal HUD (see
+// terminal-hud feature folder) marks the turn "heavy" (red semaphore
+// light). Confirmed live 2026-07-14: a trivial "ping" already used
+// ~32k input tokens — `opencode run` is a fresh headless process per
+// turn with no prompt caching across calls, so the full system
+// prompt + tool definitions get resent every single time. 20k made
+// the semaphore red on essentially every turn, not just genuinely
+// large ones. Raised well above that per-turn baseline so "heavy"
+// means an unusually large turn again, not the opencode norm.
+const HUD_HEAVY_TOKEN_THRESHOLD = 60_000;
+
+// Confirmed live 2026-07-14 (opencode --print-logs --log-level DEBUG, plus
+// `opencode export <sessionID>`): the NDJSON stream, the debug logs and the
+// exported session JSON all only ever carry the *requested* alias
+// (providerID=opencode modelID=auto) — opencode never records which
+// concrete model OmniRoute actually routed "auto" to. That data only exists
+// in the HTTP response OmniRoute itself sends back (`x-omniroute-model` /
+// `x-omniroute-provider` headers, confirmed via direct curl), and opencode's
+// own HTTP client swallows it. So instead of parsing it out of opencode,
+// _probeOmniRouteRoute below asks OmniRoute directly with a throwaway
+// 1-token call and reads those headers.
+const OMNIROUTE_PROBE_MIN_INTERVAL_MS = 20_000;
+const OMNIROUTE_PROBE_TIMEOUT_MS = 6_000;
+
+// Only meaningful while the session is on an "auto" alias — a pinned model
+// (e.g. nvidia's fixed model) is already the real model, nothing to probe.
+// Throttled per-session so rapid-fire messages don't double the request
+// volume against OmniRoute just to refresh a cosmetic HUD label.
+async function _probeOmniRouteRoute(session) {
+  if (session.providerModel !== 'auto-routing' && session.providerModel !== 'auto') return null;
+  const baseUrl = session.providerEnvVars && session.providerEnvVars.OPENAI_BASE_URL;
+  const apiKey = session.providerEnvVars && session.providerEnvVars.OPENAI_API_KEY;
+  if (!baseUrl || !apiKey) return null;
+  const now = Date.now();
+  if (session.lastRouteProbeAt && now - session.lastRouteProbeAt < OMNIROUTE_PROBE_MIN_INTERVAL_MS) {
+    return null;
+  }
+  session.lastRouteProbeAt = now;
+  const controller = new AbortController();
+  const timer = setTimeout(() => controller.abort(), OMNIROUTE_PROBE_TIMEOUT_MS);
+  try {
+    const resp = await fetch(`${baseUrl.replace(/\/$/, '')}/chat/completions`, {
+      method: 'POST',
+      headers: { Authorization: `Bearer ${apiKey}`, 'Content-Type': 'application/json' },
+      body: JSON.stringify({ model: 'auto', messages: [{ role: 'user', content: '.' }], max_tokens: 1, stream: false }),
+      signal: controller.signal,
+    });
+    const realModel = resp.headers.get('x-omniroute-model');
+    const realProvider = resp.headers.get('x-omniroute-provider');
+    if (!realModel && !realProvider) return null;
+    return { providerId: realProvider || null, providerModel: realModel || null };
+  } catch (err) {
+    // Cosmetic HUD data only — logged for diagnosability, never lets a
+    // probe failure affect the real turn.
+    console.warn('[bridge] OmniRoute route probe request failed:', err && err.message);
+    return null;
+  } finally {
+    clearTimeout(timer);
+  }
+}
+
+// Sprint 3 (terminal-ux-upgrade): the tok/s figure used to be recomputed
+// live from chars-streamed-so-far ÷ elapsed-time on every 'text' fragment,
+// which swings wildly early in a turn (a 3-char fragment after 40ms reads
+// as a nonsense instantaneous rate) — that's the "varia demais" the HUD
+// needle was chasing. Replaced with a fixed typical-throughput-per-model
+// baseline: stable during a turn, changes only when the model changes.
+// totalTokens (the real step_finish count) stays live/accurate — only the
+// speed readout is now a constant. Matched by substring against whatever
+// providerModel string is active, since it may be the config's raw model
+// id ("auto-routing") or a real model name if Sprint 2 ever recovers one.
+const MODEL_AVG_TOKENS_PER_SEC = {
+  'opus': 35,
+  'sonnet': 55,
+  'haiku': 95,
+  'fable': 70,
+  'gpt-5': 60,
+  'gpt-4': 70,
+  'gemini': 65,
+  'deepseek': 50,
+  'glm': 45,
+  'qwen': 55,
+  'kimi': 50,
+  'nemotron': 45,
+  'minimax': 55,
+  'grok': 60,
+  'pickle': 60,
+};
+const DEFAULT_AVG_TOKENS_PER_SEC = 50;
+
+function _avgTokensPerSecFor(providerModel) {
+  const m = (providerModel || '').toLowerCase();
+  for (const key in MODEL_AVG_TOKENS_PER_SEC) {
+    if (m.includes(key)) return MODEL_AVG_TOKENS_PER_SEC[key];
+  }
+  return DEFAULT_AVG_TOKENS_PER_SEC;
+}
+
+// ~4 chars/token is the usual rough English/Portuguese estimate — opencode
+// doesn't stream incremental token counts, only a total per completed step,
+// so this is what drives the live tokens/s readout while a turn is still
+// running. Reconciled with the real total from `step_finish` as soon as
+// it's available.
+const HUD_CHARS_PER_TOKEN_ESTIMATE = 4;
+
+/**
+ * Read an agent's persistent memory (.claude/agent-memory/{agent}/), if any.
+ *
+ * Native Claude Code sessions get CLAUDE.md + .claude/rules/*.md auto-loaded
+ * on startup, including memory-recall.md, which tells the agent to go read
+ * its own agent-memory folder before acting. Non-Anthropic providers
+ * (openclaude/opencode) don't go through that auto-load — the persona
+ * embedding here only injects the agent's own .md file — so without this,
+ * every non-Anthropic session starts cold with zero memory of prior
+ * sessions. Reads learnings.md (dated lessons) and MEMORY.md (curated
+ * summary) when present and concatenates them; learnings.md is append-only
+ * so only the tail (most recent entries) is kept to bound prompt size.
+ */
+function loadAgentMemory(agent) {
+  if (!agent) return '';
+  const dir = path.join(WORKSPACE_ROOT, '.claude', 'agent-memory', agent);
+  const parts = [];
+  for (const file of ['learnings.md', 'MEMORY.md']) {
+    try {
+      const content = fs.readFileSync(path.join(dir, file), 'utf8').trim();
+      if (content) parts.push(`### ${file}\n${content}`);
+    } catch {
+      // File doesn't exist yet — this agent has no persisted memory. Fine.
+    }
+  }
+  if (!parts.length) return '';
+  const MAX_CHARS = 4000;
+  let combined = parts.join('\n\n');
+  if (combined.length > MAX_CHARS) combined = combined.slice(-MAX_CHARS);
+  return combined;
+}
+
+/**
+ * Build the agent persona block (persona .md + enforce-character text +
+ * prior-session memory) shared by the openclaude --system-prompt path and
+ * the opencode REPL path below.
+ */
+/**
+ * Keep the global opencode config (~/.config/opencode/opencode.json) in
+ * sync with WHATEVER provider is currently active, instead of relying on a
+ * static file that only ever defined one hardcoded "opencode" provider
+ * block. Before this, switching config/providers.json's active_provider to
+ * anything else with cli_command "opencode" would reproduce the exact same
+ * ProviderModelNotFoundError bug already fixed for the "opencode" entry —
+ * `opencode run -m <providerId>/<model>` only resolves if opencode.json has
+ * a provider block under that exact key. Runs once per session creation
+ * (cheap — a few KB JSON read/write), merges into the existing file rather
+ * than overwriting it, so manually-added provider/model entries (e.g. a
+ * test xai/grok-4.3 model) survive.
+ *
+ * Also where the "build" agent's `skill` tool gets disabled — see the
+ * comment on that line for why (94% token reduction, measured live).
+ */
+function _ensureOpencodeProviderConfig(providerId, modelArg, providerEnvVars) {
+  if (!providerId || !providerEnvVars?.OPENAI_BASE_URL || !providerEnvVars?.OPENAI_API_KEY) return;
+  const configDir = path.join(os.homedir(), '.config', 'opencode');
+  const configPath = path.join(configDir, 'opencode.json');
+  let config = { $schema: 'https://opencode.ai/config.json', provider: {}, agent: {} };
+  try {
+    const existing = JSON.parse(fs.readFileSync(configPath, 'utf8'));
+    if (existing && typeof existing === 'object') config = existing;
+  } catch {
+    // No file yet, or it's malformed — start fresh rather than fail the turn.
+  }
+  if (!config.provider || typeof config.provider !== 'object') config.provider = {};
+  const existingProvider = config.provider[providerId] || {};
+  config.provider[providerId] = {
+    ...existingProvider,
+    npm: '@ai-sdk/openai-compatible',
+    name: existingProvider.name || providerId,
+    options: {
+      baseURL: providerEnvVars.OPENAI_BASE_URL,
+      apiKey: providerEnvVars.OPENAI_API_KEY,
+    },
+    models: {
+      ...(existingProvider.models || {}),
+      [modelArg]: (existingProvider.models && existingProvider.models[modelArg]) || { name: modelArg },
+    },
+  };
+  if (!config.agent || typeof config.agent !== 'object') config.agent = {};
+  // Confirmed live 2026-07-14: with 194+ skills under .claude/skills/, the
+  // "build" agent's auto-discovered <available_skills> tool description
+  // alone cost ~30k tokens on every single turn — an isolated dir with no
+  // skills used 2,076 input tokens for "ping"; the repo root (same prompt,
+  // same model) used ~32,000-37,000. Skills are loaded on-demand by
+  // opencode's own `skill` tool, not needed for ordinary agent chat/REPL
+  // turns — this workspace's actual skill invocation flow is Claude Code's
+  // native slash commands, unrelated to this tool. Disabling it here cuts
+  // routine turn cost by roughly 15x with no loss of the slash-command flow.
+  config.agent.build = {
+    ...(config.agent.build || {}),
+    tools: { ...(config.agent.build?.tools || {}), skill: false },
+  };
+  try {
+    fs.mkdirSync(configDir, { recursive: true });
+    const tmpPath = `${configPath}.tmp-${process.pid}`;
+    fs.writeFileSync(tmpPath, JSON.stringify(config, null, 2));
+    fs.renameSync(tmpPath, configPath);
+  } catch (err) {
+    console.warn('[bridge] failed to write dynamic opencode provider config:', err && err.message);
+  }
+}
+
+function buildAgentPersona(agent, workingDir) {
+  const rootAgentFile = path.join(WORKSPACE_ROOT, '.claude', 'agents', `${agent}.md`);
+  const cwdAgentFile = path.join(workingDir, '.claude', 'agents', `${agent}.md`);
+  const agentFile = fs.existsSync(rootAgentFile) ? rootAgentFile : cwdAgentFile;
+  let agentPrompt = '';
+  let agentTier = null;
+  try {
+    const content = fs.readFileSync(agentFile, 'utf8');
+    const match = content.match(/^---\n[\s\S]*?\n---\n([\s\S]*)$/);
+    agentPrompt = match ? match[1].trim() : content;
+    for (const marker of ['\n# Persistent Agent Memory', '\n## MEMORY.md']) {
+      if (agentPrompt.includes(marker)) {
+        agentPrompt = agentPrompt.split(marker, 1)[0].trim();
+      }
+    }
+    const fmMatch = content.match(/^---\n([\s\S]*?)\n---\n/);
+    if (fmMatch) {
+      const tierMatch = fmMatch[1].match(/^model:\s*["']?([a-z0-9.-]+)["']?\s*$/mi);
+      if (tierMatch) agentTier = tierMatch[1].toLowerCase();
+    }
+  } catch {
+    agentPrompt = `You are the ${agent} agent.`;
+  }
+
+  const priorMemory = loadAgentMemory(agent);
+  if (priorMemory) {
+    agentPrompt += '\n\n## Previous Session Memory (yours — resume/summarize before acting)\n' + priorMemory;
+  }
+
+  const enforcePrompt = agentPrompt + '\n\n' +
+    'CRITICAL: You MUST fully embody this agent persona. ' +
+    'You are NOT Claude, OpenClaude, or a generic assistant — you ARE ' + agent + '. ' +
+    'When asked who you are, ALWAYS respond as ' + agent + '. ' +
+    'Never break character. Follow ALL instructions above.';
+
+  return { prompt: enforcePrompt, agentTier };
+}
+
 class ClaudeBridge {
   constructor() {
     this.sessions = new Map();
@@ -30,6 +362,8 @@ class ClaudeBridge {
       let resolved;
       if (cliCommand === 'openclaude') {
         resolved = execSync('which openclaude', { encoding: 'utf8', stdio: ['pipe', 'pipe', 'ignore'] }).trim();
+      } else if (cliCommand === 'opencode') {
+        resolved = execSync('which opencode', { encoding: 'utf8', stdio: ['pipe', 'pipe', 'ignore'] }).trim();
       } else {
         resolved = execSync('which claude', { encoding: 'utf8', stdio: ['pipe', 'pipe', 'ignore'] }).trim();
       }
@@ -43,18 +377,27 @@ class ClaudeBridge {
 
     // Fallback: check common hardcoded paths
     const home = process.env.HOME || '/';
-    const paths = cliCommand === 'openclaude'
-      ? [
-          path.join(home, '.local', 'bin', 'openclaude'),
-          '/usr/local/bin/openclaude',
-          '/usr/bin/openclaude',
-        ]
-      : [
-          path.join(home, '.claude', 'local', 'claude'),
-          path.join(home, '.local', 'bin', 'claude'),
-          '/usr/local/bin/claude',
-          '/usr/bin/claude',
-        ];
+    let paths;
+    if (cliCommand === 'openclaude') {
+      paths = [
+        path.join(home, '.local', 'bin', 'openclaude'),
+        '/usr/local/bin/openclaude',
+        '/usr/bin/openclaude',
+      ];
+    } else if (cliCommand === 'opencode') {
+      paths = [
+        path.join(home, '.local', 'bin', 'opencode'),
+        '/usr/local/bin/opencode',
+        '/usr/bin/opencode',
+      ];
+    } else {
+      paths = [
+        path.join(home, '.claude', 'local', 'claude'),
+        path.join(home, '.local', 'bin', 'claude'),
+        '/usr/local/bin/claude',
+        '/usr/bin/claude',
+      ];
+    }
 
     for (const p of paths) {
       try {
@@ -71,6 +414,30 @@ class ClaudeBridge {
     return cliCommand;
   }
 
+  /**
+   * True when the CLI has a persisted conversation file for this session id
+   * in this workingDir — i.e. a previous run got far enough to save state,
+   * so `--resume <id>` will succeed. Checks the config dirs used by both
+   * claude (~/.claude) and openclaude (~/.openclaude), plus
+   * CLAUDE_CONFIG_DIR when set.
+   */
+  _hasPersistedConversation(sessionId, workingDir) {
+    const home = process.env.HOME || '/';
+    const slug = String(workingDir).replace(/[^a-zA-Z0-9]/g, '-');
+    const configDirs = [
+      process.env.CLAUDE_CONFIG_DIR,
+      path.join(home, '.openclaude'),
+      path.join(home, '.claude'),
+    ].filter(Boolean);
+    return configDirs.some((dir) => {
+      try {
+        return fs.existsSync(path.join(dir, 'projects', slug, `${sessionId}.jsonl`));
+      } catch {
+        return false;
+      }
+    });
+  }
+
   async startSession(sessionId, options = {}) {
     if (this.sessions.has(sessionId)) {
       const existing = this.sessions.get(sessionId);
@@ -88,6 +455,9 @@ class ClaudeBridge {
       if (existing.process) {
         try { existing.process.kill('SIGKILL'); } catch (_) {}
       }
+      if (existing.currentChild) {
+        try { existing.currentChild.kill('SIGKILL'); } catch (_) {}
+      }
       this.sessions.delete(sessionId);
     }
 
@@ -98,6 +468,7 @@ class ClaudeBridge {
       onOutput = () => {},
       onExit = () => {},
       onError = () => {},
+      onHudUpdate = () => {},
       cols = 80,
       rows = 24
     } = options;
@@ -122,6 +493,20 @@ class ClaudeBridge {
         );
       }
 
+      // opencode's own interactive TUI (default full-screen and --mini) don't
+      // render reliably inside this embedded pty — confirmed live on the VPS
+      // (2026-07-13, see runtime-harness-agnostic-eval feature folder):
+      // default mode overlaps frames from resize/redraw, --mini hides
+      // response text in a self-overwriting status area. Drive it headlessly
+      // instead — `opencode run --format json` + NDJSON parsing, the same
+      // approach already proven in provider_fallback.py for every heartbeat
+      // — and render the text ourselves.
+      if (providerConfig.cli_command === 'opencode') {
+        return this._startOpencodeReplSession(sessionId, {
+          workingDir, agent, onOutput, onExit, onError, onHudUpdate,
+        }, providerConfig.active || 'anthropic', providerModel, providerConfig.env_vars || {});
+      }
+
       const cliCommand = this.findClaudeCommand(providerConfig.cli_command);
 
       console.log(`Starting session ${sessionId} with ${providerConfig.cli_command}`);
@@ -129,16 +514,29 @@ class ClaudeBridge {
       console.log(`Working directory: ${workingDir}`);
       console.log(`Agent: ${agent || 'none'}`);
       console.log(`Terminal size: ${cols}x${rows}`);
-      if (dangerouslySkipPermissions) {
-        console.log(`⚠️ WARNING: Skipping permissions with --dangerously-skip-permissions flag`);
+      const terminalTrustMode = dangerouslySkipPermissions || readTerminalTrustMode();
+      if (terminalTrustMode) {
+        console.log(`⚠️ WARNING: Terminal trust mode enabled`);
       }
 
-      // Don't use --dangerously-skip-permissions when running as root —
-      // Claude/OpenClaude block this flag for root users.
-      // The trust prompt is auto-accepted via PTY detection below instead.
+      // Claude Code and OpenClaude v0.22+ refuse --dangerously-skip-permissions
+      // as root unless IS_SANDBOX=1 marks a containerized environment — the
+      // --allow-dangerously-skip-permissions flag does NOT lift that check (it
+      // only makes bypass mode available as an option). So always pass the skip
+      // flag in trust mode and inject IS_SANDBOX=1 into the child env when
+      // running as root (the clean-env whitelist below would otherwise drop it).
       const isRoot = process.getuid && process.getuid() === 0;
-      const args = (dangerouslySkipPermissions && !isRoot) ? ['--dangerously-skip-permissions'] : [];
-      if (agent) {
+      const active = providerConfig.active || 'anthropic';
+      const args = [];
+      let agentTier = null;
+
+      if (terminalTrustMode) {
+        args.push('--dangerously-skip-permissions');
+        if (isRoot) {
+          console.log('[permissions] Running as root in trust mode — injecting IS_SANDBOX=1 for the CLI root check');
+        }
+      }
+      if (agent && active === 'anthropic') {
         args.push('--agent', agent);
       }
 
@@ -146,29 +544,53 @@ class ClaudeBridge {
       // --append-system-prompt is too weak — GPT models ignore appended instructions.
       // --system-prompt REPLACES the default system prompt, ensuring the agent persona
       // takes priority over CLAUDE.md and other context that mentions "Claude".
-      const active = providerConfig.active || 'anthropic';
       if (active !== 'anthropic' && agent) {
-        // Read the agent definition file to build a strong system prompt
-        const agentFile = path.join(workingDir, '.claude', 'agents', `${agent}.md`);
-        let agentPrompt = '';
-        try {
-          const content = fs.readFileSync(agentFile, 'utf8');
-          // Extract body (after YAML frontmatter ---)
-          const match = content.match(/^---\n[\s\S]*?\n---\n([\s\S]*)$/);
-          agentPrompt = match ? match[1].trim() : content;
-        } catch {
-          agentPrompt = `You are the ${agent} agent.`;
+        const persona = buildAgentPersona(agent, workingDir);
+        agentTier = persona.agentTier;
+        args.push('--system-prompt', persona.prompt);
+      }
+
+      // Pin the CLI conversation to the terminal-server session UUID so a
+      // crash, provider error, or terminal-server restart doesn't lose the
+      // conversation: the first start registers the id with --session-id,
+      // and any later start of the same session resumes it with --resume.
+      const UUID_RE = /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i;
+      if (UUID_RE.test(sessionId)) {
+        if (this._hasPersistedConversation(sessionId, workingDir)) {
+          console.log(`[bridge] Resuming persisted conversation for session ${sessionId}`);
+          args.push('--resume', sessionId);
+        } else {
+          args.push('--session-id', sessionId);
         }
+      }
 
-        const enforcePrompt = agentPrompt + '\n\n' +
-          'CRITICAL: You MUST fully embody this agent persona. ' +
-          'You are NOT Claude, OpenClaude, or a generic assistant — you ARE ' + agent + '. ' +
-          'When asked who you are, ALWAYS respond as ' + agent + '. ' +
-          'Never break character. Follow ALL instructions above.';
+      // Copy so per-session overrides don't leak into the shared config object.
+      const providerEnv = { ...(providerConfig.env_vars || {}) };
 
-        args.push('--system-prompt', enforcePrompt);
+      // Per-agent model tier: agents declare model: opus|sonnet|haiku in
+      // their frontmatter; providers.json maps each tier to a provider model
+      // via the provider's "model_tiers" field.
+      const tierModel = agentTier && providerConfig.model_tiers
+        ? providerConfig.model_tiers[agentTier]
+        : null;
+      if (active !== 'anthropic' && tierModel) {
+        providerEnv['OPENAI_MODEL'] = tierModel;
+        console.log(`[provider] Agent ${agent} tier "${agentTier}" → model ${tierModel}`);
+      }
+
+      // Automatic model fallback when the primary is overloaded. The CLI
+      // accepts a single fallback — pass the first configured entry that
+      // differs from the primary model.
+      const fallbackModels = Array.isArray(providerConfig.fallback_models)
+        ? providerConfig.fallback_models
+        : [];
+      if (active !== 'anthropic') {
+        const primary = providerEnv['OPENAI_MODEL'] || '';
+        const fallback = fallbackModels.find((m) => m && m !== primary);
+        if (fallback) {
+          args.push('--fallback-model', fallback);
+        }
       }
-      const providerEnv = providerConfig.env_vars || {};
 
       // Build a CLEAN environment for the spawned CLI process.
       // We DON'T spread process.env — it may contain stale/cached vars
@@ -181,6 +603,9 @@ class ClaudeBridge {
         'SSH_AUTH_SOCK', 'SSH_AGENT_PID',
         'NVM_DIR', 'NVM_BIN', 'NVM_INC',
         'CODEX_HOME', 'CLAUDE_CONFIG_DIR',
+        // Container marker exported by entrypoint.sh — required for
+        // --dangerously-skip-permissions to work as root.
+        'IS_SANDBOX',
       ];
       const cleanEnv = {};
       for (const key of SYSTEM_VARS) {
@@ -192,7 +617,7 @@ class ClaudeBridge {
       // to route to the Codex backend — a raw 'gpt-5.x' falls back to the
       // regular chat completions API, which bypasses Codex OAuth entirely.
       //
-      //   codexplan  → GPT-5.4 on Codex backend (high reasoning)
+      //   codexplan  → GPT-5.5 on Codex backend (high reasoning)
       //   codexspark → GPT-5.3 Codex Spark (faster)
       //
       // For the plain 'openai' provider (API key mode), default to gpt-4.1.
@@ -212,6 +637,13 @@ class ClaudeBridge {
         env: {
           ...cleanEnv,
           ...providerEnv,
+          // Lift the CLI's root/sudo guard for --dangerously-skip-permissions
+          // inside the container (see comment above spawn args).
+          ...(terminalTrustMode && isRoot ? { IS_SANDBOX: '1' } : {}),
+          // O auto-updater do CLI migra a instalação npm pro instalador
+          // nativo no meio da sessão e mata o processo com exit 1
+          // ("OpenClaude has switched from npm to the native installer").
+          DISABLE_AUTOUPDATER: '1',
           TERM: 'xterm-256color',
           FORCE_COLOR: '1',
           COLORTERM: 'truecolor'
@@ -226,45 +658,59 @@ class ClaudeBridge {
         workingDir,
         created: new Date(),
         active: true,
-        killTimeout: null
+        killTimeout: null,
+        // Tracks whether onExit has already fired so the late-arriving
+        // 'error' (EIO) event from node-pty doesn't double-fire onExit
+        // or surface a misleading "read EIO" toast to the user.
+        exited: false,
       };
 
       this.sessions.set(sessionId, session);
 
-      // Track if we've seen the trust prompt
-      let trustPromptHandled = false;
       let dataBuffer = '';
+      let lastAutoAcceptAt = 0;
 
       claudeProcess.onData((data) => {
         if (process.env.DEBUG) {
           console.log(`Session ${sessionId} output:`, data);
         }
 
-        // Buffer data to check for trust prompt
+        // Buffer data to check for interactive trust / permission prompts.
         dataBuffer += data;
-        
-        // Check for trust prompt and auto-accept it
-        if (!trustPromptHandled && dataBuffer.includes('Do you trust the files in this folder?')) {
-          trustPromptHandled = true;
-          console.log(`Auto-accepting trust prompt for session ${sessionId}`);
-          // The prompt shows "Enter to confirm" which means option 1 is already selected
-          // Just send Enter to confirm
-          setTimeout(() => {
-            claudeProcess.write('\r');
-            console.log(`Sent Enter to accept trust prompt for session ${sessionId}`);
-          }, 500);
+
+        const acceptInput = terminalTrustMode ? terminalPromptAcceptInput(dataBuffer) : null;
+        if (acceptInput) {
+          const now = Date.now();
+          if (now - lastAutoAcceptAt > 1200) {
+            lastAutoAcceptAt = now;
+            dataBuffer = '';
+            console.log(`Auto-accepting terminal permission prompt for session ${sessionId}`);
+            setTimeout(() => {
+              claudeProcess.write(acceptInput);
+            }, 250);
+          }
         }
-        
+
         // Clear buffer periodically to prevent memory issues
         if (dataBuffer.length > 10000) {
           dataBuffer = dataBuffer.slice(-5000);
         }
-        
+
         onOutput(data);
       });
 
       claudeProcess.onExit((exitCode, signal) => {
+        // node-pty 1.1.0+ passes exitCode as an object {exitCode, signal}
+        // in some code paths. Normalize so the rest of the pipeline always
+        // sees a number (or null).
+        if (exitCode && typeof exitCode === 'object') {
+          signal = exitCode.signal != null ? exitCode.signal : signal;
+          exitCode = exitCode.exitCode != null ? exitCode.exitCode : exitCode;
+        }
         console.log(`Claude session ${sessionId} exited with code ${exitCode}, signal ${signal}`);
+        // Mark as exited so the late-arriving 'error' (EIO) handler
+        // knows the exit has already been reported and stays silent.
+        session.exited = true;
         // Clear kill timeout if process exited naturally
         if (session.killTimeout) {
           clearTimeout(session.killTimeout);
@@ -276,15 +722,36 @@ class ClaudeBridge {
       });
 
       claudeProcess.on('error', (error) => {
-        console.error(`Claude session ${sessionId} error:`, error);
+        if (isPtyEio(error)) {
+          // EIO on the master side of the PTY is a known artifact when the
+          // child process has already exited — node-pty's read loop hits
+          // the closed slave FD and emits 'error' before (or alongside)
+          // the 'exit' event. If onExit already fired, we're done — don't
+          // double-report. If not, treat it as a normal exit (code 1,
+          // signal null) instead of an error so the frontend shows a
+          // clean "[Process exited]" rather than a scary "read EIO".
+          if (session.exited) {
+            console.warn(`Claude session ${sessionId} EIO after exit — suppressed`);
+            return;
+          }
+          console.warn(`Claude session ${sessionId} PTY closed with EIO; treating as exit`);
+        } else {
+          console.error(`Claude session ${sessionId} error:`, error);
+        }
         // Clear kill timeout if process errored
         if (session.killTimeout) {
           clearTimeout(session.killTimeout);
           session.killTimeout = null;
         }
+        session.exited = true;
         session.active = false;
         this.sessions.delete(sessionId);
-        onError(error);
+        if (isPtyEio(error)) {
+          // Signal null (not 'EIO') so the frontend doesn't restart-loop
+          onExit(1, null);
+        } else {
+          onError(error);
+        }
       });
 
       console.log(`Claude session ${sessionId} started successfully`);
@@ -296,15 +763,441 @@ class ClaudeBridge {
     }
   }
 
+  /**
+   * Start an opencode session as a headless REPL instead of an interactive
+   * pty process. No long-lived child process — each submitted line spawns
+   * its own `opencode run` call (see _runOpencodeTurn), so there's no CLI
+   * "process" for this session to crash or hang mid-conversation; a turn
+   * that fails or times out just reports an error and leaves the session
+   * ready for the next message.
+   */
+  async _startOpencodeReplSession(sessionId, options, providerId, providerModel, providerEnvVars = {}) {
+    const { workingDir, agent, onOutput, onExit, onError, onHudUpdate } = options;
+    const cliBin = this.findClaudeCommand('opencode');
+
+    // Keeps opencode.json's provider block in sync with whichever provider
+    // is actually active — see _ensureOpencodeProviderConfig for why this
+    // is required for any provider other than the original hardcoded
+    // "opencode" one to work at all.
+    _ensureOpencodeProviderConfig(providerId, providerModel || 'auto', providerEnvVars);
+
+    let personaPrefix = null;
+    if (agent) {
+      const persona = buildAgentPersona(agent, workingDir);
+      personaPrefix = persona.prompt;
+    }
+
+    const session = {
+      workingDir,
+      created: new Date(),
+      active: true,
+      exited: false,
+      isOpencode: true,
+      process: null,
+      currentChild: null,
+      busy: false,
+      lineBuffer: '',
+      opencodeSessionId: null,
+      // Persona slug (e.g. "atlas-project") — lets a global status endpoint
+      // (GET /api/sessions/hud-status, see server.js) report which agents
+      // are working without touching any per-session terminal socket.
+      agentName: agent || null,
+      personaPrefix,
+      // cliProviderId/cliModelArg are the ONLY values ever passed to `opencode
+      // run -m <...>` — fixed at session creation, never touched again.
+      // providerId/providerModel below are a SEPARATE pair used purely for
+      // the HUD display (rewritten to "auto-routing" for a nicer label, and
+      // later to the real routed model/provider by _probeOmniRouteRoute).
+      // Confirmed live 2026-07-14 (docker exec into the deployed container):
+      // reusing one pair for both purposes meant the HUD's "auto-routing"
+      // display label was also getting sent as the actual `-m` argument —
+      // `-m opencode/auto-routing` fails with ProviderModelNotFoundError
+      // ("auto-routing" isn't a model opencode.json defines; only "auto" is)
+      // — masked by opencode as a generic "Unexpected server error". Manual
+      // `-m opencode/auto` in the same container succeeded immediately.
+      cliProviderId: providerId,
+      cliModelArg: providerModel || 'auto',
+      providerId,
+      // "auto-routing" instead of the bare "auto" from providers.json's
+      // default_model — that string means "OmniRoute decides server-side",
+      // not a model name, and showing it unlabeled on the HUD reads as a
+      // broken/generic value. Overwritten with the real provider/model the
+      // moment the OmniRoute probe resolves one (see _probeOmniRouteRoute).
+      providerModel: providerModel && providerModel !== 'auto' ? providerModel : 'auto-routing',
+      // OPENAI_BASE_URL/OPENAI_API_KEY come from this provider's own
+      // dashboard-editable config (same fields every other provider uses),
+      // already resolved from placeholders to real secrets by
+      // loadProviderConfig() before reaching here — opencode.json points
+      // its "opencode" provider at {env:OPENAI_BASE_URL}/{env:OPENAI_API_KEY}.
+      providerEnvVars,
+      cliBin,
+      onOutput,
+      onExit,
+      onError,
+      onHudUpdate: onHudUpdate || (() => {}),
+      // Tracks the provider/model shown in the last hud_update sent — lets
+      // us tell the frontend "this specific update is a change" (fires the
+      // gear-shift animation) vs. just a routine tick.
+      lastHudProviderId: null,
+      lastHudProviderModel: null,
+      bestTokensPerSec: 0,
+    };
+    this.sessions.set(sessionId, session);
+
+    onOutput(
+      `\x1b[36mopencode (${providerId}/${session.providerModel}) — modo REPL headless.\x1b[0m\r\n` +
+      `Digite sua mensagem e pressione Enter.\r\n\r\n`
+    );
+
+    console.log(`[bridge] opencode REPL session ${sessionId} ready (agent: ${agent || 'none'})`);
+    return session;
+  }
+
+  /**
+   * Build the environment for an `opencode run` child process. Mirrors the
+   * SYSTEM_VARS whitelist used for the pty-spawned CLIs above — no full
+   * process.env spread, so a stale OPENAI_API_KEY etc. can't hijack the
+   * call. OPENAI_BASE_URL/OPENAI_API_KEY come from providerEnvVars (the
+   * "opencode" provider's own dashboard-editable config, same fields every
+   * other provider uses) — opencode.json resolves them via
+   * {env:OPENAI_BASE_URL}/{env:OPENAI_API_KEY}.
+   */
+  _buildOpencodeEnv(providerEnvVars = {}) {
+    const SYSTEM_VARS = [
+      'HOME', 'USER', 'SHELL', 'PATH', 'LANG', 'LC_ALL', 'LC_CTYPE',
+      'LOGNAME', 'HOSTNAME', 'XDG_RUNTIME_DIR', 'XDG_DATA_HOME',
+      'XDG_CONFIG_HOME', 'XDG_CACHE_HOME', 'TMPDIR',
+      'SSH_AUTH_SOCK', 'SSH_AGENT_PID',
+      'NVM_DIR', 'NVM_BIN', 'NVM_INC',
+      'CODEX_HOME', 'CLAUDE_CONFIG_DIR', 'IS_SANDBOX',
+    ];
+    const env = {};
+    for (const key of SYSTEM_VARS) {
+      if (process.env[key]) env[key] = process.env[key];
+    }
+    if (providerEnvVars.OPENAI_BASE_URL) env.OPENAI_BASE_URL = providerEnvVars.OPENAI_BASE_URL;
+    if (providerEnvVars.OPENAI_API_KEY) env.OPENAI_API_KEY = providerEnvVars.OPENAI_API_KEY;
+    env.DISABLE_AUTOUPDATER = '1';
+    return env;
+  }
+
+  /**
+   * Handle raw keystrokes for an opencode REPL session: echo printable
+   * characters, support backspace and Ctrl+C (clears the pending line —
+   * can't interrupt an in-flight turn without killing it), and submit the
+   * buffered line on Enter. No cursor movement / history — MVP REPL, not a
+   * full line editor.
+   */
+  _handleOpencodeKeystrokes(sessionId, session, data) {
+    // xterm sends escape sequences (arrows, function keys, etc.) as a
+    // single multi-byte chunk starting with ESC. Swallow the whole thing
+    // instead of leaking its raw bytes into the message buffer.
+    if (data.length > 1 && data.charCodeAt(0) === 0x1b) return;
+
+    for (const ch of data) {
+      if (ch === '\r' || ch === '\n') {
+        session.onOutput('\r\n');
+        const line = session.lineBuffer;
+        session.lineBuffer = '';
+        if (!line.trim()) continue;
+        if (session.busy) {
+          session.onOutput('\x1b[33m(ainda processando a mensagem anterior — aguarde)\x1b[0m\r\n');
+          continue;
+        }
+        this._runOpencodeTurn(sessionId, session, line);
+      } else if (ch === '\x7f' || ch === '\b') {
+        if (session.lineBuffer.length > 0) {
+          session.lineBuffer = session.lineBuffer.slice(0, -1);
+          session.onOutput('\b \b');
+        }
+      } else if (ch === '\x03') {
+        session.lineBuffer = '';
+        session.onOutput('^C\r\n');
+      } else if (ch >= ' ') {
+        session.lineBuffer += ch;
+        session.onOutput(ch);
+      }
+    }
+  }
+
+  /**
+   * Push a status snapshot to the terminal HUD (see the terminal-hud
+   * feature folder — semaphore + gear/LCD panel). `shift` is computed here,
+   * not passed in: true only on the specific update where providerId or
+   * providerModel actually changed since the last one sent, so the frontend
+   * knows to play the gear-shift animation instead of a routine tick.
+   */
+  _emitHudUpdate(session, patch = {}) {
+    const providerId = patch.providerId || session.providerId;
+    const providerModel = patch.providerModel || session.providerModel;
+    const shift = providerId !== session.lastHudProviderId || providerModel !== session.lastHudProviderModel;
+    session.lastHudProviderId = providerId;
+    session.lastHudProviderModel = providerModel;
+    if (typeof patch.tokensPerSec === 'number' && patch.tokensPerSec > session.bestTokensPerSec) {
+      session.bestTokensPerSec = patch.tokensPerSec;
+    }
+    const payload = {
+      busy: session.busy,
+      providerId,
+      providerModel,
+      tokensPerSec: null,
+      totalTokens: null,
+      heavy: false,
+      ...patch,
+      bestTokensPerSec: session.bestTokensPerSec,
+      shift,
+    };
+    // Stashed on the session so GET /api/sessions/hud-status can report
+    // this turn's state to callers with no open WebSocket (the /agents
+    // page) — onHudUpdate above only reaches whoever has this one
+    // terminal tab open right now.
+    session.lastHud = payload;
+    session.onHudUpdate(payload);
+  }
+
+  /**
+   * Run one `opencode run` turn headlessly and stream its NDJSON `text`
+   * events into session.onOutput as they arrive. Same event shape already
+   * parsed in provider_fallback.py::_parse_opencode_ndjson — kept as a
+   * separate JS implementation since these two bridges don't share a util
+   * module today.
+   */
+  _runOpencodeTurn(sessionId, session, message) {
+    session.busy = true;
+
+    let fullMessage = message;
+    if (session.personaPrefix) {
+      fullMessage = `${session.personaPrefix}\n\n---\n\nTask:\n${message}`;
+      session.personaPrefix = null; // embed only once — -s keeps the rest of the context
+    }
+
+    this._attemptOpencodeTurn(sessionId, session, fullMessage, 0);
+  }
+
+  /**
+   * One `opencode run` attempt for a turn. On timeout, retries once with the
+   * same message instead of failing outright — a stuck attempt (like the
+   * OmniRoute "auggie" LKGP hang from 2026-07-13) is often transient, and a
+   * silent retry costs nothing the user wasn't already waiting for. Only
+   * gives up and reports an error after the retry ALSO times out.
+   */
+  _attemptOpencodeTurn(sessionId, session, fullMessage, attemptNumber) {
+    const modelRef = `${session.cliProviderId}/${session.cliModelArg}`;
+    // No --agent flag — defaults to opencode's "build" agent, which is what
+    // the original spike validated for real tool-use (bash calls + reported
+    // text). The zero-token/no-response symptom seen live on 2026-07-13
+    // turned out to be unrelated to agent choice (--agent plan didn't fix
+    // it either) — root cause was the OmniRoute "auto" combo routing to a
+    // stuck "auggie" candidate (see runtime-harness-agnostic-eval feature
+    // folder + omniroute-gateway memory). Fixed on the gateway side by
+    // removing "auggie" from the auto/* combo pools.
+    const args = ['run', fullMessage, '-m', modelRef, '--format', 'json', '--auto'];
+    if (session.opencodeSessionId) {
+      args.push('-s', session.opencodeSessionId);
+    }
+
+    if (attemptNumber === 0) {
+      session.onOutput('\x1b[90m…\x1b[0m');
+    }
+
+    let child;
+    try {
+      child = cp.spawn(session.cliBin, args, {
+        cwd: session.workingDir,
+        env: this._buildOpencodeEnv(session.providerEnvVars),
+        // Node leaves a child's stdin as an open, never-EOF'd pipe by
+        // default — opencode blocks reading it before ever calling the
+        // model, so the call just hangs forever with no output, no exit,
+        // no error (confirmed locally, 2026-07-13: identical spawn args
+        // via bash with stdin inherited from a real TTY complete in
+        // under a second; the same spawn() call in Node without this
+        // hangs indefinitely). `run` never reads stdin for anything we
+        // use here, so closing it costs nothing.
+        stdio: ['ignore', 'pipe', 'pipe'],
+      });
+    } catch (error) {
+      session.busy = false;
+      session.onOutput(`\r\x1b[K\r\n\x1b[31m[opencode] falha ao executar: ${error.message}\x1b[0m\r\n\r\n`);
+      return;
+    }
+    session.currentChild = child;
+    if (attemptNumber === 0) {
+      this._emitHudUpdate(session);
+    }
+
+    let stdoutBuffer = '';
+    let stderrBuffer = '';
+    let textBuffer = '';
+    let sawText = false;
+    let charsSoFar = 0;
+    let realTotalTokens = null;
+    let sawError = false;
+    let errorMessage = '';
+    let timedOut = false;
+
+    const killTimer = setTimeout(() => {
+      timedOut = true;
+      console.warn(`[bridge] opencode turn for session ${sessionId} exceeded ${OPENCODE_TURN_TIMEOUT_MS}ms (attempt ${attemptNumber + 1}) — killing`);
+      try { child.kill('SIGKILL'); } catch (_) {}
+    }, OPENCODE_TURN_TIMEOUT_MS);
+
+    const processLine = (rawLine) => {
+      const line = rawLine.trim();
+      if (!line) return;
+      let event;
+      try {
+        event = JSON.parse(line);
+      } catch {
+        return;
+      }
+      const sid = event.sessionID || event.session_id;
+      if (sid && !session.opencodeSessionId) {
+        session.opencodeSessionId = sid;
+      }
+      const part = event.part || {};
+      if (event.type === 'text') {
+        const text = part.text;
+        if (text) {
+          // Buffered, not streamed straight to onOutput — the response is
+          // markdown (headers, bold, lists, code blocks) and arrives in
+          // arbitrary-sized fragments; parsing each fragment as markdown on
+          // its own would mangle syntax split across two chunks (e.g.
+          // "**bo" + "ld**"). Rendered whole once the turn closes.
+          sawText = true;
+          textBuffer += text;
+          charsSoFar += text.length;
+          const estTokens = charsSoFar / HUD_CHARS_PER_TOKEN_ESTIMATE;
+          this._emitHudUpdate(session, {
+            tokensPerSec: _avgTokensPerSecFor(session.providerModel),
+            totalTokens: Math.round(estTokens),
+          });
+        }
+      } else if (event.type === 'error') {
+        sawError = true;
+        const err = event.error || {};
+        errorMessage = (err.data && err.data.message) || err.name || 'erro desconhecido';
+      } else if (event.type === 'step_finish') {
+        // Real token count for the step that just closed — reconciles the
+        // char-based live estimate above. Multiple steps can happen in one
+        // turn (tool calls between text replies); keep the running total.
+        const tokens = part.tokens;
+        if (tokens) {
+          const stepTotal = (tokens.input || 0) + (tokens.output || 0);
+          realTotalTokens = (realTotalTokens || 0) + stepTotal;
+          this._emitHudUpdate(session, {
+            tokensPerSec: _avgTokensPerSecFor(session.providerModel),
+            totalTokens: realTotalTokens,
+            heavy: realTotalTokens > HUD_HEAVY_TOKEN_THRESHOLD,
+          });
+        }
+      }
+    };
+
+    child.stdout.setEncoding('utf8');
+    child.stdout.on('data', (chunk) => {
+      stdoutBuffer += chunk;
+      let idx;
+      while ((idx = stdoutBuffer.indexOf('\n')) !== -1) {
+        processLine(stdoutBuffer.slice(0, idx));
+        stdoutBuffer = stdoutBuffer.slice(idx + 1);
+      }
+    });
+
+    child.stderr.setEncoding('utf8');
+    child.stderr.on('data', (chunk) => {
+      stderrBuffer += chunk;
+    });
+
+    child.on('close', (code) => {
+      clearTimeout(killTimer);
+      if (stdoutBuffer.trim()) processLine(stdoutBuffer);
+      session.currentChild = null;
+
+      if (timedOut && !sawText && attemptNumber < 1) {
+        console.warn(`[bridge] opencode turn timed out for session ${sessionId}, retrying once`);
+        session.onOutput(`\r\x1b[K\r\n\x1b[33m[opencode] sem resposta em ${Math.round(OPENCODE_TURN_TIMEOUT_MS / 1000)}s — tentando de novo\x1b[0m\r\n`);
+        this._attemptOpencodeTurn(sessionId, session, fullMessage, attemptNumber + 1);
+        return; // stays busy — the retry owns finishing the turn
+      }
+
+      session.busy = false;
+      this._emitHudUpdate(session, {
+        tokensPerSec: 0,
+        totalTokens: realTotalTokens,
+        heavy: (realTotalTokens || 0) > HUD_HEAVY_TOKEN_THRESHOLD,
+      });
+
+      // Only *after* the real turn's own child process/network work is
+      // fully done — not concurrently with it (see _probeOmniRouteRoute).
+      // Firing this in parallel with the turn made the VPS visibly slower
+      // on live testing (extra TLS handshake + request competing for
+      // CPU/bandwidth right when the real turn needed it) and the label
+      // update would frequently land after the user had stopped watching
+      // anyway. Fire-and-forget: just refreshes the HUD label whenever it
+      // resolves, doesn't block or affect the next turn.
+      _probeOmniRouteRoute(session)
+        .then((route) => {
+          if (!route || (!route.providerId && !route.providerModel)) return;
+          if (route.providerId) session.providerId = route.providerId;
+          if (route.providerModel) session.providerModel = route.providerModel;
+          this._emitHudUpdate(session, { tokensPerSec: 0 });
+        })
+        .catch((err) => {
+          console.warn(`[bridge] OmniRoute route probe failed for session ${sessionId}:`, err && err.message);
+        });
+
+      session.onOutput('\r\x1b[K'); // clear the "…" placeholder either way
+
+      if (textBuffer) {
+        session.onOutput(toTerminalText(renderMarkdown(textBuffer)));
+      }
+
+      if (timedOut) {
+        session.onOutput(`\r\n\x1b[31m[opencode] sem resposta em ${Math.round(OPENCODE_TURN_TIMEOUT_MS / 1000)}s, de novo mesmo depois de tentar outra vez — desisti\x1b[0m\r\n`);
+      } else if (sawError) {
+        session.onOutput(`\r\n\x1b[31m[opencode] ${toTerminalText(errorMessage)}\x1b[0m\r\n`);
+      } else if (code !== 0) {
+        const stderrTail = stderrBuffer.trim().slice(0, 300);
+        session.onOutput(`\r\n\x1b[31m[opencode] processo saiu com código ${code}${stderrTail ? ': ' + toTerminalText(stderrTail) : ''}\x1b[0m\r\n`);
+      } else if (!sawText) {
+        session.onOutput('\r\n\x1b[33m[opencode] sem resposta de texto nesse turno.\x1b[0m\r\n');
+      }
+      session.onOutput('\r\n');
+    });
+
+    child.on('error', (error) => {
+      clearTimeout(killTimer);
+      session.currentChild = null;
+      session.busy = false;
+      this._emitHudUpdate(session, { tokensPerSec: 0 });
+      session.onOutput(`\r\x1b[K\r\n\x1b[31m[opencode] falha ao executar: ${error.message}\x1b[0m\r\n\r\n`);
+    });
+  }
+
   async sendInput(sessionId, data) {
     const session = this.sessions.get(sessionId);
     if (!session || !session.active) {
       throw new Error(`Session ${sessionId} not found or not active`);
     }
 
+    if (session.isOpencode) {
+      this._handleOpencodeKeystrokes(sessionId, session, data);
+      return true;
+    }
+
     try {
       session.process.write(data);
+      return true;
     } catch (error) {
+      if (isPtyEio(error)) {
+        // Process already exited — don't surface EIO; treat as silent exit
+        if (!session.exited) {
+          session.exited = true;
+        }
+        session.active = false;
+        this.sessions.delete(sessionId);
+        return false;
+      }
       throw new Error(`Failed to send input to session ${sessionId}: ${error.message}`);
     }
   }
@@ -315,9 +1208,16 @@ class ClaudeBridge {
       throw new Error(`Session ${sessionId} not found or not active`);
     }
 
+    if (session.isOpencode) return; // no real pty to resize in REPL mode
+
     try {
       session.process.resize(cols, rows);
     } catch (error) {
+      if (isPtyEio(error)) {
+        session.active = false;
+        this.sessions.delete(sessionId);
+        return;
+      }
       console.warn(`Failed to resize session ${sessionId}:`, error.message);
     }
   }
@@ -328,6 +1228,21 @@ class ClaudeBridge {
       return;
     }
 
+    if (session.isOpencode) {
+      if (session.currentChild) {
+        try { session.currentChild.kill('SIGKILL'); } catch (_) {}
+      }
+      // Sprint 7 (terminal-ux-upgrade): attachments uploaded during this
+      // session (see POST /api/upload) live in a per-session dir under the
+      // workingDir — best-effort cleanup on stop (Q6). Not awaited: a slow
+      // FS shouldn't hold up session teardown, and a leftover .uploads dir
+      // from a failed rm is not a correctness problem, just tidiness.
+      fs.rm(path.join(session.workingDir, '.uploads', sessionId), { recursive: true, force: true }, () => {});
+      session.active = false;
+      this.sessions.delete(sessionId);
+      return;
+    }
+
     try {
       // Clear any existing kill timeout
       if (session.killTimeout) {
@@ -337,7 +1252,7 @@ class ClaudeBridge {
 
       if (session.active && session.process) {
         session.process.kill('SIGTERM');
-        
+
         session.killTimeout = setTimeout(() => {
           if (session.active && session.process) {
             session.process.kill('SIGKILL');
diff --git a/dashboard/terminal-server/src/provider-config.js b/dashboard/terminal-server/src/provider-config.js
index 2065d480e..ccb82270c 100644
--- a/dashboard/terminal-server/src/provider-config.js
+++ b/dashboard/terminal-server/src/provider-config.js
@@ -3,8 +3,11 @@ const path = require('path');
 
 const WORKSPACE_ROOT = path.resolve(__dirname, '..', '..', '..');
 const PROVIDERS_PATH = path.join(WORKSPACE_ROOT, 'config', 'providers.json');
+const PROVIDERS_EXAMPLE_PATH = path.join(WORKSPACE_ROOT, 'config', 'providers.example.json');
 
-const ALLOWED_CLI = new Set(['claude', 'openclaude']);
+const ALLOWED_CLI = new Set(['claude', 'openclaude', 'opencode']);
+const ALLOWED_MODES = new Set(['code', 'chat']);
+const DEFAULT_CODE_PROVIDERS = new Set(['openrouter', 'omnirouter', 'nvidia', 'codex_auth']);
 const ALLOWED_ENV_VARS = new Set([
   'ANTHROPIC_API_KEY',
   'CLAUDE_CODE_USE_OPENAI',
@@ -18,12 +21,69 @@ const ALLOWED_ENV_VARS = new Set([
   'CODEX_API_KEY',
   'GEMINI_API_KEY',
   'GEMINI_MODEL',
+  'NVIDIA_API_KEY',
   'AWS_REGION',
   'AWS_BEARER_TOKEN_BEDROCK',
   'ANTHROPIC_VERTEX_PROJECT_ID',
   'CLOUD_ML_REGION',
 ]);
 
+// providers.json stores API keys as "[REDACTED]" placeholders; the real secrets
+// live in .env. The terminal-server doesn't load dotenv, so read them here and
+// swap placeholders for the real value — otherwise openclaude gets a bogus key
+// and every request 401s.
+const _SECRET_KEYS = ['OPENAI_API_KEY', 'NVIDIA_API_KEY', 'GEMINI_API_KEY', 'ANTHROPIC_API_KEY', 'CODEX_API_KEY'];
+
+function _isPlaceholderSecret(v) {
+  return !v || /redact/i.test(v) || v.trim().startsWith('[');
+}
+
+let _envSecretsCache = null;
+function _readEnvSecrets() {
+  if (_envSecretsCache) return _envSecretsCache;
+  const out = {};
+  try {
+    const txt = fs.readFileSync(path.join(WORKSPACE_ROOT, '.env'), 'utf8');
+    for (const line of txt.split('\n')) {
+      const t = line.trim();
+      if (!t || t.startsWith('#') || !t.includes('=')) continue;
+      const i = t.indexOf('=');
+      out[t.slice(0, i).trim()] = t.slice(i + 1).trim();
+    }
+  } catch (_) { /* no .env file */ }
+  _envSecretsCache = out;
+  return out;
+}
+
+// For each secret, the .env may hold it under a related name (NVIDIA uses an
+// OpenAI-compatible endpoint, so OPENAI_API_KEY is fed by NVIDIA_API_KEY).
+const _SECRET_FALLBACKS = {
+  OPENAI_API_KEY: ['OPENAI_API_KEY', 'NVIDIA_API_KEY'],
+  NVIDIA_API_KEY: ['NVIDIA_API_KEY', 'OPENAI_API_KEY'],
+  GEMINI_API_KEY: ['GEMINI_API_KEY'],
+  ANTHROPIC_API_KEY: ['ANTHROPIC_API_KEY'],
+  CODEX_API_KEY: ['CODEX_API_KEY'],
+};
+
+function _resolveSecrets(envObj) {
+  const secrets = _readEnvSecrets();
+  const lookup = (cands) => {
+    for (const c of cands) {
+      const v = process.env[c] || secrets[c];
+      if (v && !_isPlaceholderSecret(v)) return v;
+    }
+    return null;
+  };
+  for (const k of _SECRET_KEYS) {
+    if (k in envObj && _isPlaceholderSecret(envObj[k])) {
+      const real = lookup(_SECRET_FALLBACKS[k] || [k]);
+      if (real) envObj[k] = real;
+      else delete envObj[k]; // no real value → drop placeholder so it can't 401
+    }
+  }
+  return envObj;
+}
+
 function _normalizeModel(model) {
   return (model || '').trim().toLowerCase();
 }
@@ -57,42 +117,156 @@ function resolveProviderModel(providerConfig) {
 function getProviderMode(providerConfig) {
   const active = providerConfig?.active || 'anthropic';
   if (active === 'anthropic') return 'anthropic';
+  // Explicit per-provider mode in providers.json wins over the name heuristic —
+  // model names like "openrouter/owl-alpha" are agentic but don't match isCodeModel.
+  if (ALLOWED_MODES.has(providerConfig?.mode)) return providerConfig.mode;
+  // These providers run through OpenClaude in the Terminal. Opaque hosted model
+  // names such as z-ai/glm-5.2 should not be downgraded to Chat by heuristic.
+  if (DEFAULT_CODE_PROVIDERS.has(active)) return 'code';
   const model = resolveProviderModel(providerConfig);
   if (isCodeModel(model)) return 'code';
   return 'chat';
 }
 
+function _mergeProviderDefaults(config) {
+  try {
+    if (!fs.existsSync(PROVIDERS_EXAMPLE_PATH)) return config;
+    const defaults = JSON.parse(fs.readFileSync(PROVIDERS_EXAMPLE_PATH, 'utf8'));
+    if (!config || typeof config !== 'object' || Array.isArray(config)) config = {};
+
+    for (const [key, value] of Object.entries(defaults)) {
+      if (key === 'providers') continue;
+      if (!(key in config)) config[key] = value;
+    }
+
+    if (!config.providers || typeof config.providers !== 'object' || Array.isArray(config.providers)) {
+      config.providers = {};
+    }
+
+    for (const [providerId, defaultProvider] of Object.entries(defaults.providers || {})) {
+      const existing = config.providers[providerId];
+      if (!existing || typeof existing !== 'object' || Array.isArray(existing)) {
+        config.providers[providerId] = defaultProvider;
+        continue;
+      }
+
+      for (const [key, value] of Object.entries(defaultProvider)) {
+        if (key === 'env_vars') {
+          if (!existing.env_vars || typeof existing.env_vars !== 'object' || Array.isArray(existing.env_vars)) {
+            existing.env_vars = {};
+          }
+          for (const [envKey, envDefault] of Object.entries(value || {})) {
+            if (!(envKey in existing.env_vars)) existing.env_vars[envKey] = envDefault;
+          }
+        } else if (!(key in existing)) {
+          existing[key] = value;
+        }
+      }
+    }
+  } catch (_) {
+    return config;
+  }
+  return config;
+}
+
 function loadProviderConfig() {
   try {
     if (!fs.existsSync(PROVIDERS_PATH)) {
-      return { cli_command: 'claude', env_vars: {}, active: 'anthropic' };
+      return { cli_command: 'claude', env_vars: {}, active: 'anthropic', fallback_models: [], fallback_providers: [], providers: {}, model_tiers: {} };
     }
 
-    const config = JSON.parse(fs.readFileSync(PROVIDERS_PATH, 'utf8'));
+    const config = _mergeProviderDefaults(JSON.parse(fs.readFileSync(PROVIDERS_PATH, 'utf8')));
     const active = config.active_provider || 'anthropic';
     const provider = config.providers?.[active] || {};
 
     let cliCommand = provider.cli_command || 'claude';
     if (!ALLOWED_CLI.has(cliCommand)) cliCommand = 'claude';
 
-    const envVars = Object.fromEntries(
-      Object.entries(provider.env_vars || {}).filter(
+    const sanitizeEnv = (rawEnv = {}) => Object.fromEntries(
+      Object.entries(rawEnv).filter(
         ([k, v]) => v !== '' && ALLOWED_ENV_VARS.has(k)
       )
     );
 
+    const envVars = _resolveSecrets(sanitizeEnv(provider.env_vars || {}));
+
     if (active === 'codex_auth' && 'OPENAI_API_KEY' in envVars) {
       delete envVars.OPENAI_API_KEY;
     }
 
+    // OpenClaude ≥0.18 detects the NVIDIA NIM base URL and requires the key
+    // in NVIDIA_API_KEY — derive it so the UI only asks for one key field.
+    if (
+      !envVars.NVIDIA_API_KEY &&
+      envVars.OPENAI_API_KEY &&
+      /\bnvidia\.com\b/i.test(envVars.OPENAI_BASE_URL || '')
+    ) {
+      envVars.NVIDIA_API_KEY = envVars.OPENAI_API_KEY;
+    }
+
+    // Ordered fallback chain — the CLI consumes the first entry
+    // (--fallback-model); the full list is used by Chat Completion fallback.
+    const fallbackModels = Array.isArray(provider.fallback_models)
+      ? provider.fallback_models
+          .filter((m) => typeof m === 'string' && m.trim())
+          .map((m) => m.trim())
+      : [];
+
+    const fallbackProviders = Array.isArray(provider.fallback_providers)
+      ? provider.fallback_providers
+          .filter((p) => typeof p === 'string' && p.trim())
+          .map((p) => p.trim())
+      : [];
+
+    const providers = {};
+    for (const [id, p] of Object.entries(config.providers || {})) {
+      let pCliCommand = p.cli_command || 'claude';
+      if (!ALLOWED_CLI.has(pCliCommand)) pCliCommand = 'claude';
+      const pEnv = _resolveSecrets(sanitizeEnv(p.env_vars || {}));
+      if (id === 'codex_auth' && 'OPENAI_API_KEY' in pEnv) delete pEnv.OPENAI_API_KEY;
+      if (!pEnv.NVIDIA_API_KEY && pEnv.OPENAI_API_KEY && /\bnvidia\.com\b/i.test(pEnv.OPENAI_BASE_URL || '')) {
+        pEnv.NVIDIA_API_KEY = pEnv.OPENAI_API_KEY;
+      }
+      providers[id] = {
+        cli_command: pCliCommand,
+        env_vars: pEnv,
+        active: id,
+        provider_name: p.name || id,
+        mode: ALLOWED_MODES.has(p.mode) ? p.mode : null,
+        fallback_models: Array.isArray(p.fallback_models)
+          ? p.fallback_models.filter((m) => typeof m === 'string' && m.trim()).map((m) => m.trim())
+          : [],
+        fallback_providers: Array.isArray(p.fallback_providers)
+          ? p.fallback_providers.filter((fp) => typeof fp === 'string' && fp.trim()).map((fp) => fp.trim())
+          : [],
+        model_tiers: {},
+      };
+      if (p.model_tiers && typeof p.model_tiers === 'object' && !Array.isArray(p.model_tiers)) {
+        for (const [tier, model] of Object.entries(p.model_tiers)) {
+          if (typeof model === 'string' && model.trim()) {
+            providers[id].model_tiers[tier.toLowerCase()] = model.trim();
+          }
+        }
+      }
+    }
+
+    // Per-tier model map: agents declare model: opus|sonnet|haiku in their
+    // frontmatter; providers.json maps each tier to a provider model.
+    const modelTiers = providers[active]?.model_tiers || {};
+
     return {
       cli_command: cliCommand,
       env_vars: envVars,
       active,
       provider_name: provider.name || active,
+      mode: ALLOWED_MODES.has(provider.mode) ? provider.mode : null,
+      fallback_models: fallbackModels,
+      fallback_providers: fallbackProviders,
+      providers,
+      model_tiers: modelTiers,
     };
   } catch {
-    return { cli_command: 'claude', env_vars: {}, active: 'anthropic' };
+    return { cli_command: 'claude', env_vars: {}, active: 'anthropic', fallback_models: [], fallback_providers: [], providers: {}, model_tiers: {} };
   }
 }
 
@@ -103,4 +277,3 @@ module.exports = {
   isCodeModel,
   isChatCompletionModel,
 };
-
diff --git a/dashboard/terminal-server/src/server.js b/dashboard/terminal-server/src/server.js
index f5f8605ad..b3f206066 100644
--- a/dashboard/terminal-server/src/server.js
+++ b/dashboard/terminal-server/src/server.js
@@ -11,6 +11,30 @@ const SessionStore = require('./utils/session-store');
 const ChatLogger = require('./utils/chat-logger');
 const { loadProviderConfig, getProviderMode } = require('./provider-config');
 
+function isEioError(error) {
+  const message = typeof error === 'string' ? error : (error?.message || '');
+  return error?.code === 'EIO' || /\bEIO\b|read EIO|write EIO/i.test(message);
+}
+
+// Sprint 7 (terminal-ux-upgrade): attachment upload limits (Q6 default).
+const UPLOAD_MAX_BYTES = 20 * 1024 * 1024;
+const UPLOAD_MIME_ALLOWLIST = new Set([
+  'image/png', 'image/jpeg', 'image/webp', 'image/gif',
+  'application/pdf', 'text/plain', 'text/markdown', 'text/csv',
+  'application/json', 'application/octet-stream',
+]);
+
+// Strips any path components and anything outside a safe charset — the
+// filename comes from a query param (user-controlled), so this is the one
+// line standing between it and a path-traversal write (`../../etc/passwd`
+// etc.). path.basename() alone drops directories; the regex replace then
+// drops everything that isn't alphanumeric/dot/dash/underscore.
+function sanitizeUploadFilename(name) {
+  const base = path.basename(String(name || 'arquivo'));
+  const cleaned = base.replace(/[^a-zA-Z0-9._-]/g, '_').slice(0, 120);
+  return cleaned || 'arquivo';
+}
+
 class TerminalServer {
   constructor(options = {}) {
     this.port = options.port || 32352;
@@ -26,6 +50,15 @@ class TerminalServer {
     );
     this.autoSaveIntervalMs = options.autoSaveIntervalMs ?? 30000;
 
+    // Guard-rails de memória: cada PTY claude/openclaude consome 200-400MB.
+    // Sem teto, abas demais derrubam o container por OOM (limite da stack).
+    const maxActive = parseInt(process.env.TERMINAL_MAX_ACTIVE_SESSIONS || '', 10);
+    this.maxActiveSessions = options.maxActiveSessions
+      ?? (Number.isFinite(maxActive) && maxActive > 0 ? maxActive : 4);
+    const detachedMin = parseFloat(process.env.TERMINAL_DETACHED_TTL_MINUTES || '');
+    this.detachedTtlMs = options.detachedTtlMs
+      ?? (Number.isFinite(detachedMin) && detachedMin >= 0 ? detachedMin * 60 * 1000 : 30 * 60 * 1000);
+
     this.app = express();
     this.claudeSessions = new Map();
     this.webSocketConnections = new Map();
@@ -83,9 +116,46 @@ class TerminalServer {
 
     this.sessionGcInterval = setInterval(() => {
       void this.purgeStaleSessions();
+      void this.reapDetachedSessions();
     }, this.sessionGcIntervalMs);
   }
 
+  /**
+   * Recolhe PTYs ativos que estão sem nenhum viewer conectado E sem produzir
+   * output há mais de detachedTtlMs. Fechar a aba do navegador não mata o
+   * processo (de propósito, permite reconectar) — sem este reaper cada aba
+   * aberta/fechada deixa um claude de 200-400MB vivo até o OOM do container.
+   * A sessão continua no store (buffer preservado) e pode ser reiniciada.
+   */
+  async reapDetachedSessions() {
+    if (this.detachedTtlMs <= 0) return { reaped: 0 };
+    const now = Date.now();
+    let reaped = 0;
+    for (const [sessionId, session] of this.claudeSessions.entries()) {
+      if (!session.active) continue;
+      const viewers = session.connections instanceof Set
+        ? session.connections.size
+        : (Array.isArray(session.connections) ? session.connections.length : 0);
+      if (viewers > 0) continue;
+      // Só recolhe PTYs de terminal — sessões de chat não seguram processo.
+      const pty = this.claudeBridge.getSession(sessionId);
+      if (!pty || !pty.active) continue;
+      const lastTouch = new Date(session.lastActivity || session.created || 0).getTime();
+      if (!Number.isFinite(lastTouch) || (now - lastTouch) <= this.detachedTtlMs) continue;
+
+      reaped += 1;
+      console.log(`[session-gc] Reaping detached idle session ${sessionId} (sem viewer há ${Math.round((now - lastTouch) / 60000)}min)`);
+      try {
+        await this.claudeBridge.stopSession(sessionId);
+      } catch (error) {
+        if (this.dev) console.warn(`Failed to reap session ${sessionId}:`, error.message);
+      }
+      session.active = false;
+    }
+    if (reaped > 0) await this.saveSessionsToDisk();
+    return { reaped };
+  }
+
   async saveSessionsToDisk() {
     await this.sessionStore.saveSessions(this.claudeSessions);
   }
@@ -275,10 +345,14 @@ class TerminalServer {
 
       // Scope reuse by (agentName, ticketId) when ticketId is provided.
       // Without ticketId the old behaviour is preserved (reuse by agentName alone).
+      // Never reuse a session that already has a live viewer attached — two
+      // concurrent terminals would share one PTY and mirror/duplicate every
+      // keystroke. The busy session keeps its viewer; the caller gets a fresh one.
       for (const [id, s] of this.claudeSessions.entries()) {
         const agentMatch = s.agentName === agentName;
         const ticketMatch = ticketId ? s.ticketId === ticketId : !s.ticketId;
-        if (agentMatch && ticketMatch) {
+        const busy = s.connections && s.connections.size > 0;
+        if (agentMatch && ticketMatch && !busy) {
           return res.json({
             success: true,
             sessionId: id,
@@ -381,6 +455,121 @@ class TerminalServer {
       res.json({ sessions });
     });
 
+    // Aggregate HUD status across every live opencode REPL session — lets
+    // the /agents page show "N agentes trabalhando agora" and which ones,
+    // without opening any individual terminal tab. Only opencode sessions
+    // carry busy/heavy telemetry today (see claude-bridge.js's
+    // _emitHudUpdate) — native claude/openclaude PTY sessions don't track
+    // turn boundaries, so they're left out rather than reported as a
+    // meaningless always-false busy flag.
+    this.app.get('/api/sessions/hud-status', (req, res) => {
+      const sessions = [];
+      for (const [id, s] of this.claudeBridge.sessions.entries()) {
+        if (!s.isOpencode || !s.active || !s.agentName) continue;
+        const hud = s.lastHud || {};
+        sessions.push({
+          sessionId: id,
+          agent: s.agentName,
+          busy: !!s.busy,
+          heavy: !!hud.heavy,
+          providerId: s.providerId,
+          providerModel: s.providerModel,
+          tokensPerSec: typeof hud.tokensPerSec === 'number' ? hud.tokensPerSec : 0,
+        });
+      }
+      res.json({ sessions });
+    });
+
+    // Sprint 5 (terminal-ux-upgrade): audio -> text, proxied server-side so
+    // GROQ_API_KEY never reaches the browser. Body is the raw audio blob
+    // (whatever MIME the MediaRecorder produced — webm/opus in every
+    // Chromium/Firefox build that matters here); express.raw() is scoped to
+    // this one route only, the rest of the app keeps using express.json().
+    // No multer/form-data dependency needed — Node 22 has FormData/Blob/
+    // fetch as globals, sufficient for this single outbound multipart call.
+    this.app.post(
+      '/api/transcribe',
+      express.raw({ type: '*/*', limit: '25mb' }),
+      async (req, res) => {
+        const apiKey = process.env.GROQ_API_KEY;
+        if (!apiKey) {
+          return res.status(503).json({ error: 'GROQ_API_KEY não configurada no terminal-server.' });
+        }
+        const audio = req.body;
+        if (!Buffer.isBuffer(audio) || audio.length === 0) {
+          return res.status(400).json({ error: 'Corpo da requisição vazio — envie o áudio como binário.' });
+        }
+        try {
+          const form = new FormData();
+          const mime = req.headers['content-type'] || 'audio/webm';
+          form.append('file', new Blob([audio], { type: mime }), 'audio.webm');
+          form.append('model', 'whisper-large-v3-turbo');
+
+          const groqRes = await fetch('https://api.groq.com/openai/v1/audio/transcriptions', {
+            method: 'POST',
+            headers: { Authorization: `Bearer ${apiKey}` },
+            body: form,
+          });
+          const data = await groqRes.json().catch(() => null);
+          if (!groqRes.ok) {
+            // Groq's error payload is safe to relay — it never echoes the
+            // key back. Logged without the key too (apiKey never touches
+            // console.* in this handler).
+            console.warn(`[transcribe] Groq returned ${groqRes.status}:`, data);
+            return res.status(502).json({ error: (data && data.error && data.error.message) || `Groq respondeu ${groqRes.status}` });
+          }
+          res.json({ text: (data && data.text) || '' });
+        } catch (error) {
+          console.error('[transcribe] falha ao chamar Groq:', error.message);
+          res.status(502).json({ error: 'Falha ao transcrever o áudio.' });
+        }
+      }
+    );
+
+    // Sprint 7 (terminal-ux-upgrade): attach a photo/document to a prompt.
+    // Reuses the raw-body pattern from /api/transcribe (Sprint 5) — a
+    // single-file binary body, no multer/multipart parsing needed. Saves
+    // under a per-session dir inside the session's own workingDir (never
+    // outside it) so the opencode agent can reference the path directly in
+    // its prompt; cleaned up on session stop (see claude-bridge.js
+    // stopSession, Q6). Best-effort: whether the agent's own Read tool
+    // actually picks up an image (vs. a text document) depends on the
+    // underlying model's multimodal support — not something this endpoint
+    // can guarantee, only the file being there for it to try.
+    this.app.post(
+      '/api/upload',
+      express.raw({ type: '*/*', limit: '20mb' }),
+      async (req, res) => {
+        const sessionId = String(req.query.sessionId || '');
+        const session = sessionId && this.claudeBridge.sessions.get(sessionId);
+        if (!session || !session.active) {
+          return res.status(404).json({ error: 'Sessão não encontrada ou inativa.' });
+        }
+        const file = req.body;
+        if (!Buffer.isBuffer(file) || file.length === 0) {
+          return res.status(400).json({ error: 'Arquivo vazio.' });
+        }
+        if (file.length > UPLOAD_MAX_BYTES) {
+          return res.status(413).json({ error: `Arquivo excede o limite de ${UPLOAD_MAX_BYTES / 1024 / 1024}MB.` });
+        }
+        const mime = String(req.headers['content-type'] || '').split(';')[0].trim();
+        if (mime && !UPLOAD_MIME_ALLOWLIST.has(mime)) {
+          return res.status(415).json({ error: `Tipo de arquivo não permitido: ${mime}` });
+        }
+        const filename = sanitizeUploadFilename(req.query.filename);
+        const dir = path.join(session.workingDir, '.uploads', sessionId);
+        try {
+          await fs.promises.mkdir(dir, { recursive: true });
+          const destPath = path.join(dir, `${Date.now()}-${filename}`);
+          await fs.promises.writeFile(destPath, file);
+          res.json({ path: destPath, filename });
+        } catch (error) {
+          console.error('[upload] falha ao salvar arquivo:', error.message);
+          res.status(500).json({ error: 'Falha ao salvar o arquivo.' });
+        }
+      }
+    );
+
     // Create a NEW session for an agent (always creates, never reuses)
     this.app.post('/api/sessions/create', (req, res) => {
       const { agentName, workingDir } = req.body;
@@ -618,14 +807,34 @@ class TerminalServer {
           const session = this.claudeSessions.get(wsInfo.claudeSessionId);
           if (session && session.connections.has(wsId) && session.active && session.agent === 'claude') {
             try {
-              await this.claudeBridge.sendInput(wsInfo.claudeSessionId, data.data);
+              const accepted = await this.claudeBridge.sendInput(wsInfo.claudeSessionId, data.data);
+              if (accepted === false) {
+                session.active = false;
+                this.broadcastToSession(wsInfo.claudeSessionId, { type: 'exit', code: 1, signal: null });
+              }
             } catch (error) {
+              if (isEioError(error)) {
+                session.active = false;
+                this.broadcastToSession(wsInfo.claudeSessionId, { type: 'exit', code: 1, signal: null });
+                break;
+              }
               if (this.dev) console.error(`Failed to send input to session ${wsInfo.claudeSessionId}:`, error.message);
               this.sendToWebSocket(wsInfo.ws, {
                 type: 'error',
                 message: 'Agent is not running in this session. Please start an agent first.',
               });
             }
+          } else if (session && !session.active) {
+            // The CLI process already died (crash, provider error, etc.) —
+            // without this, typing into a dead session silently vanished:
+            // the client kept sending 'input' with nothing telling it the
+            // PTY was gone, so the user saw no feedback at all ("send a
+            // prompt and nothing happens"). Tell the client explicitly so
+            // it can offer/trigger a restart instead of a dead end.
+            this.sendToWebSocket(wsInfo.ws, {
+              type: 'error',
+              message: 'Session has exited. Restart the agent to continue.',
+            });
           }
         }
         break;
@@ -924,6 +1133,10 @@ class TerminalServer {
       outputBuffer: session.outputBuffer.slice(-200),
       chatHistory,
       ticketId: session.ticketId || null,
+      // Sprint 4 (terminal-ux-upgrade): when attaching to an already-active
+      // session, no 'claude_started' broadcast follows — this is the only
+      // message that tells the frontend which input mode to use.
+      isOpencode: !!this.claudeBridge.sessions.get(claudeSessionId)?.isOpencode,
     });
 
     if (this.dev) console.log(`WebSocket ${wsId} joined session ${claudeSessionId}`);
@@ -958,12 +1171,30 @@ class TerminalServer {
       // through reverse proxies like Traefik). The session is already
       // running — replay the buffer and tell the client it's attached
       // instead of surfacing a misleading error toast.
-      this.sendToWebSocket(wsInfo.ws, { type: 'claude_started', sessionId: wsInfo.claudeSessionId });
+      this.sendToWebSocket(wsInfo.ws, {
+        type: 'claude_started',
+        sessionId: wsInfo.claudeSessionId,
+        // Sprint 4 (terminal-ux-upgrade): tells the frontend whether to
+        // route typing through the dedicated input bar (opencode REPL,
+        // line-based) or raw xterm keystrokes (claude/openclaude PTY,
+        // needs arrows/Ctrl-C/interactive TUI).
+        isOpencode: !!this.claudeBridge.sessions.get(wsInfo.claudeSessionId)?.isOpencode,
+      });
       return;
     }
 
     const sessionId = wsInfo.claudeSessionId;
 
+    // Teto de PTYs simultâneos — proteção contra OOM do container.
+    const activePtys = Array.from(this.claudeSessions.values()).filter((s) => s.active).length;
+    if (activePtys >= this.maxActiveSessions) {
+      this.sendToWebSocket(wsInfo.ws, {
+        type: 'error',
+        message: `Limite de ${this.maxActiveSessions} sessões ativas atingido — encerre uma sessão/aba antes de iniciar outra. (Ajustável via TERMINAL_MAX_ACTIVE_SESSIONS; sessões ociosas sem aba aberta são recolhidas automaticamente.)`,
+      });
+      return;
+    }
+
     try {
       // Ensure agent name from session is passed even if options don't include it
       const agentForSession = (options && options.agent) || session.agentName || null;
@@ -977,6 +1208,9 @@ class TerminalServer {
         onOutput: (data) => {
           const currentSession = this.claudeSessions.get(sessionId);
           if (!currentSession) return;
+          // Output conta como atividade — o reaper de sessões destacadas só
+          // recolhe PTYs parados E sem viewer.
+          currentSession.lastActivity = new Date();
           currentSession.outputBuffer.push(data);
           if (currentSession.outputBuffer.length > currentSession.maxBufferSize) {
             currentSession.outputBuffer.shift();
@@ -991,7 +1225,20 @@ class TerminalServer {
         onError: (error) => {
           const currentSession = this.claudeSessions.get(sessionId);
           if (currentSession) currentSession.active = false;
-          this.broadcastToSession(sessionId, { type: 'error', message: error.message });
+          if (isEioError(error)) {
+            // EIO is a PTY artifact when the child exits — treat as normal
+            // exit with signal null so the frontend shows "Process exited"
+            // instead of the scary "read EIO" error toast.
+            this.broadcastToSession(sessionId, { type: 'exit', code: 1, signal: null });
+          } else {
+            this.broadcastToSession(sessionId, { type: 'error', message: error.message });
+          }
+        },
+        onHudUpdate: (hud) => {
+          // terminal-hud feature: semaphore + gear/LCD panel. opencode REPL
+          // sessions only (claude-bridge.js's onHudUpdate is a no-op for the
+          // pty-interactive claude/openclaude path).
+          this.broadcastToSession(sessionId, { type: 'hud_update', ...hud });
         },
       });
 
@@ -1001,8 +1248,17 @@ class TerminalServer {
       session.lastActivity = new Date();
       if (!session.sessionStartTime) session.sessionStartTime = new Date();
 
-      this.broadcastToSession(sessionId, { type: 'claude_started', sessionId });
+      this.broadcastToSession(sessionId, {
+        type: 'claude_started',
+        sessionId,
+        isOpencode: !!this.claudeBridge.sessions.get(sessionId)?.isOpencode,
+      });
     } catch (error) {
+      if (isEioError(error)) {
+        session.active = false;
+        this.broadcastToSession(sessionId, { type: 'exit', code: 1, signal: null });
+        return;
+      }
       if (this.dev) console.error(`Error starting Claude in session ${wsInfo.claudeSessionId}:`, error);
       this.sendToWebSocket(wsInfo.ws, { type: 'error', message: `Failed to start Claude Code: ${error.message}` });
     }
diff --git a/dashboard/terminal-server/test/chat-bridge-fallback.test.js b/dashboard/terminal-server/test/chat-bridge-fallback.test.js
new file mode 100644
index 000000000..012ae8e8b
--- /dev/null
+++ b/dashboard/terminal-server/test/chat-bridge-fallback.test.js
@@ -0,0 +1,176 @@
+const assert = require('assert/strict');
+const test = require('node:test');
+
+const {
+  buildProviderFallbackChain,
+  isRetryableProviderError,
+  isFatalProviderError,
+  SDK_COMPATIBLE_CLI,
+} = require('../src/chat-bridge');
+
+// Fixture no formato retornado por loadProviderConfig()
+function makeConfig() {
+  const nvidiaEnv = {
+    CLAUDE_CODE_USE_OPENAI: '1',
+    OPENAI_BASE_URL: 'https://integrate.api.nvidia.com/v1',
+    OPENAI_API_KEY: 'nvapi-XXX',
+    OPENAI_MODEL: 'stepfun-ai/step-3.7-flash',
+    NVIDIA_API_KEY: 'nvapi-XXX',
+  };
+  const omniEnv = {
+    CLAUDE_CODE_USE_OPENAI: '1',
+    OPENAI_BASE_URL: 'http://omniroute:20128/v1',
+    OPENAI_API_KEY: 'omni-key',
+    OPENAI_MODEL: 'auto',
+  };
+  return {
+    cli_command: 'openclaude',
+    env_vars: { ...nvidiaEnv },
+    active: 'nvidia',
+    mode: 'code',
+    fallback_models: ['deepseek-ai/deepseek-v4-flash'],
+    fallback_providers: ['omnirouter', 'anthropic'],
+    providers: {
+      nvidia: {
+        cli_command: 'openclaude',
+        env_vars: { ...nvidiaEnv },
+        active: 'nvidia',
+        mode: 'code',
+        fallback_models: ['deepseek-ai/deepseek-v4-flash'],
+        fallback_providers: ['omnirouter', 'anthropic'],
+        model_tiers: {},
+      },
+      omnirouter: {
+        cli_command: 'openclaude',
+        env_vars: { ...omniEnv },
+        active: 'omnirouter',
+        mode: 'code',
+        fallback_models: [],
+        fallback_providers: [],
+        model_tiers: {},
+      },
+      anthropic: {
+        cli_command: 'claude',
+        env_vars: {},
+        active: 'anthropic',
+        mode: null,
+        fallback_models: [],
+        fallback_providers: [],
+        model_tiers: {},
+      },
+    },
+    model_tiers: {},
+  };
+}
+
+test('chain: primário → fallback_models → fallback_providers → anthropic', () => {
+  const chain = buildProviderFallbackChain(makeConfig());
+  const labels = chain.map((c) => `${c.providerId}:${c.model || 'native'}`);
+  assert.deepEqual(labels, [
+    'nvidia:stepfun-ai/step-3.7-flash',
+    'nvidia:deepseek-ai/deepseek-v4-flash',
+    'omnirouter:auto',
+    'anthropic:native',
+  ]);
+});
+
+test('attempt de fallback usa o env do PRÓPRIO provider, não do ativo', () => {
+  const chain = buildProviderFallbackChain(makeConfig());
+  const omni = chain.find((c) => c.providerId === 'omnirouter');
+  assert.ok(omni, 'omnirouter deve estar na cadeia');
+  assert.equal(omni.baseUrl, 'http://omniroute:20128/v1');
+  assert.equal(omni.envVars.OPENAI_BASE_URL, 'http://omniroute:20128/v1');
+  assert.equal(omni.envVars.OPENAI_API_KEY, 'omni-key');
+  // A chave NVIDIA não pode vazar pro attempt do gateway — sequestra a chamada.
+  assert.equal(omni.envVars.NVIDIA_API_KEY, undefined);
+});
+
+test('attempt final anthropic é claude nativo com env limpo', () => {
+  const chain = buildProviderFallbackChain(makeConfig());
+  const last = chain[chain.length - 1];
+  assert.equal(last.providerId, 'anthropic');
+  assert.equal(last.cliCommand, 'claude');
+  assert.deepEqual(last.envVars, {});
+  assert.equal(last.model, null);
+});
+
+test('cadeia vazia quando o provider ativo é anthropic (caminho nativo não usa fallback)', () => {
+  const config = makeConfig();
+  config.active = 'anthropic';
+  config.env_vars = {};
+  const chain = buildProviderFallbackChain(config);
+  assert.equal(chain.length, 0);
+});
+
+test('isRetryableProviderError reconhece o 503 do OmniRoute', () => {
+  assert.ok(isRetryableProviderError(new Error('API Error: 503 Maximum combo retry limit reached')));
+  assert.ok(isRetryableProviderError(new Error('429 Too Many Requests')));
+  assert.ok(isRetryableProviderError(new Error('Service Unavailable')));
+  assert.ok(!isRetryableProviderError(new Error('SyntaxError: unexpected token')));
+});
+
+test('isFatalProviderError reconhece erros de auth', () => {
+  assert.ok(isFatalProviderError(new Error('401 Unauthorized')));
+  assert.ok(isFatalProviderError(new Error('invalid api key')));
+  assert.ok(!isFatalProviderError(new Error('503 Service Unavailable')));
+});
+
+// opencode não implementa o protocolo de subprocesso do Agent SDK
+// (--input-format stream-json / control_request-response) — só claude e
+// openclaude falam esse protocolo. Um attempt com cli_command "opencode" na
+// cadeia (ex.: se o provider ativo algum dia ganhar um OPENAI_MODEL) tem que
+// ser filtrado pelo chamador antes de spawnar via SDK, senão é o crash
+// "exit code 1 / chat não responde" que motivou esse teste.
+function makeOpencodeConfig() {
+  const opencodeEnv = { OPENAI_MODEL: 'auto' };
+  const anthropicEnv = {};
+  return {
+    cli_command: 'opencode',
+    env_vars: { ...opencodeEnv },
+    active: 'opencode',
+    mode: 'code',
+    fallback_models: [],
+    fallback_providers: ['anthropic'],
+    providers: {
+      opencode: {
+        cli_command: 'opencode',
+        env_vars: { ...opencodeEnv },
+        active: 'opencode',
+        mode: 'code',
+        fallback_models: [],
+        fallback_providers: ['anthropic'],
+        model_tiers: {},
+      },
+      anthropic: {
+        cli_command: 'claude',
+        env_vars: { ...anthropicEnv },
+        active: 'anthropic',
+        mode: null,
+        fallback_models: [],
+        fallback_providers: [],
+        model_tiers: {},
+      },
+    },
+    model_tiers: {},
+  };
+}
+
+test('cadeia crua inclui o attempt opencode (documenta o que precisa ser filtrado)', () => {
+  const chain = buildProviderFallbackChain(makeOpencodeConfig());
+  const labels = chain.map((c) => `${c.providerId}:${c.cliCommand}`);
+  assert.deepEqual(labels, ['opencode:opencode', 'anthropic:claude']);
+});
+
+test('filtro por SDK_COMPATIBLE_CLI remove o attempt opencode e mantém o anthropic nativo', () => {
+  const chain = buildProviderFallbackChain(makeOpencodeConfig())
+    .filter((attempt) => SDK_COMPATIBLE_CLI.has(attempt.cliCommand));
+  assert.equal(chain.length, 1);
+  assert.equal(chain[0].providerId, 'anthropic');
+  assert.equal(chain[0].cliCommand, 'claude');
+});
+
+test('SDK_COMPATIBLE_CLI aceita claude e openclaude, rejeita opencode', () => {
+  assert.ok(SDK_COMPATIBLE_CLI.has('claude'));
+  assert.ok(SDK_COMPATIBLE_CLI.has('openclaude'));
+  assert.ok(!SDK_COMPATIBLE_CLI.has('opencode'));
+});
diff --git a/dashboard/terminal-server/test/manual/fallback-e2e.js b/dashboard/terminal-server/test/manual/fallback-e2e.js
new file mode 100644
index 000000000..63f013fb6
--- /dev/null
+++ b/dashboard/terminal-server/test/manual/fallback-e2e.js
@@ -0,0 +1,119 @@
+// Teste E2E MANUAL do fallback do chat-bridge (fora do `npm test` — precisa
+// do binário openclaude instalado e sobe processos reais do Agent SDK).
+//
+//   node test/manual/fallback-e2e.js
+//
+// Provider primário responde 503 "Maximum combo retry limit reached" (mock A);
+// fallback (mock B) responde um chat completion válido em SSE.
+// Esperado: a sessão NÃO crasha — rotaciona pro mock B em segundos e completa
+// com o texto "FALLBACK-OK", zero results de erro entregues ao UI.
+const http = require('http');
+const path = require('path');
+
+const TS_ROOT = path.resolve(__dirname, '..', '..');
+
+// ---- Mock A: sempre 503 combo ----
+const serverA = http.createServer((req, res) => {
+  console.log(`[mockA] ${req.method} ${req.url}`);
+  res.writeHead(503, { 'Content-Type': 'application/json' });
+  res.end(JSON.stringify({ error: { message: 'Maximum combo retry limit reached', code: 503 } }));
+});
+
+// ---- Mock B: OpenAI-compatible SSE ----
+const serverB = http.createServer((req, res) => {
+  console.log(`[mockB] ${req.method} ${req.url}`);
+  let body = '';
+  req.on('data', (c) => (body += c));
+  req.on('end', () => {
+    if (!req.url.includes('/chat/completions')) {
+      res.writeHead(200, { 'Content-Type': 'application/json' });
+      res.end(JSON.stringify({ data: [{ id: 'good-model' }] }));
+      return;
+    }
+    res.writeHead(200, {
+      'Content-Type': 'text/event-stream',
+      'Cache-Control': 'no-cache',
+      Connection: 'keep-alive',
+    });
+    const send = (obj) => res.write(`data: ${JSON.stringify(obj)}\n\n`);
+    const base = { id: 'chatcmpl-mock', object: 'chat.completion.chunk', created: Date.now() / 1000 | 0, model: 'good-model' };
+    send({ ...base, choices: [{ index: 0, delta: { role: 'assistant', content: 'FALLBACK-OK' }, finish_reason: null }] });
+    send({ ...base, choices: [{ index: 0, delta: {}, finish_reason: 'stop' }] });
+    res.write('data: [DONE]\n\n');
+    res.end();
+  });
+});
+
+function mkProvider(id, port, model) {
+  return {
+    cli_command: 'openclaude',
+    env_vars: {
+      CLAUDE_CODE_USE_OPENAI: '1',
+      OPENAI_BASE_URL: `http://127.0.0.1:${port}/v1`,
+      OPENAI_API_KEY: `${id}-key`,
+      OPENAI_MODEL: model,
+    },
+    active: id,
+    mode: 'code',
+    fallback_models: [],
+    fallback_providers: id === 'mockbad' ? ['mockgood'] : [],
+    model_tiers: {},
+  };
+}
+
+async function main() {
+  await new Promise((r) => serverA.listen(45031, '127.0.0.1', r));
+  await new Promise((r) => serverB.listen(45032, '127.0.0.1', r));
+
+  const fakeConfig = {
+    ...mkProvider('mockbad', 45031, 'bad-model'),
+    providers: {
+      mockbad: mkProvider('mockbad', 45031, 'bad-model'),
+      mockgood: mkProvider('mockgood', 45032, 'good-model'),
+    },
+  };
+
+  // Injeta o loadProviderConfig fake ANTES de carregar o chat-bridge
+  const providerConfigMod = require(path.join(TS_ROOT, 'src/provider-config'));
+  providerConfigMod.loadProviderConfig = () => JSON.parse(JSON.stringify(fakeConfig));
+  const { ChatBridge } = require(path.join(TS_ROOT, 'src/chat-bridge'));
+
+  const bridge = new ChatBridge();
+  const events = [];
+  let done, fail;
+  const finished = new Promise((res, rej) => { done = res; fail = rej; });
+  const timer = setTimeout(() => fail(new Error('TIMEOUT 120s')), 120000);
+
+  await bridge.startSession('e2e-test', {
+    agentName: null,
+    workingDir: '/tmp',
+    prompt: 'diga apenas: oi',
+    onMessage: (m) => {
+      events.push(m);
+      if (m.type === 'text_delta' || m.type === 'result') {
+        console.log('[event]', JSON.stringify(m).slice(0, 200));
+      }
+    },
+    onError: (err) => { clearTimeout(timer); fail(err); },
+    onComplete: () => { clearTimeout(timer); done(); },
+  });
+
+  try {
+    await finished;
+    const text = events.filter((e) => e.type === 'text_delta').map((e) => e.text).join('');
+    console.log('\n=== RESULTADO ===');
+    console.log('completou sem crash:', true);
+    console.log('texto recebido:', JSON.stringify(text.slice(0, 200)));
+    const errResults = events.filter((e) => e.type === 'result' && e.isError);
+    console.log('results de erro entregues ao UI:', errResults.length);
+    process.exit(0);
+  } catch (err) {
+    console.error('\n=== FALHOU ===');
+    console.error(err.message || err);
+    process.exit(1);
+  } finally {
+    serverA.close(); serverB.close();
+  }
+}
+
+main();
diff --git a/dashboard/terminal-server/test/provider-config.test.js b/dashboard/terminal-server/test/provider-config.test.js
new file mode 100644
index 000000000..592bd4e11
--- /dev/null
+++ b/dashboard/terminal-server/test/provider-config.test.js
@@ -0,0 +1,58 @@
+const assert = require('assert/strict');
+const test = require('node:test');
+
+const {
+  getProviderMode,
+  isCodeModel,
+} = require('../src/provider-config');
+
+test('getProviderMode returns anthropic for the native provider', () => {
+  assert.equal(getProviderMode({ active: 'anthropic' }), 'anthropic');
+});
+
+test('getProviderMode falls back to the model-name heuristic', () => {
+  assert.equal(
+    getProviderMode({ active: 'custom', env_vars: { OPENAI_MODEL: 'qwen-coder' } }),
+    'code'
+  );
+  assert.equal(
+    getProviderMode({ active: 'custom', env_vars: { OPENAI_MODEL: 'openrouter/owl-alpha' } }),
+    'chat'
+  );
+});
+
+test('explicit mode overrides the model-name heuristic', () => {
+  assert.equal(
+    getProviderMode({ active: 'openrouter', mode: 'code', env_vars: { OPENAI_MODEL: 'openrouter/owl-alpha' } }),
+    'code'
+  );
+  assert.equal(
+    getProviderMode({ active: 'openrouter', mode: 'chat', env_vars: { OPENAI_MODEL: 'qwen-coder' } }),
+    'chat'
+  );
+});
+
+test('invalid mode values are ignored', () => {
+  assert.equal(
+    getProviderMode({ active: 'openrouter', mode: 'bogus', env_vars: { OPENAI_MODEL: 'openrouter/owl-alpha' } }),
+    'code'
+  );
+});
+
+test('OpenClaude terminal providers default to code mode for opaque hosted models', () => {
+  assert.equal(
+    getProviderMode({ active: 'omnirouter', env_vars: { OPENAI_MODEL: 'z-ai/glm-5.2' } }),
+    'code'
+  );
+  assert.equal(
+    getProviderMode({ active: 'nvidia', env_vars: { OPENAI_MODEL: 'z-ai/glm-5.2' } }),
+    'code'
+  );
+});
+
+test('isCodeModel recognizes codex aliases and coder names', () => {
+  assert.equal(isCodeModel('codexplan'), true);
+  assert.equal(isCodeModel('codexspark'), true);
+  assert.equal(isCodeModel('devstral-small'), true);
+  assert.equal(isCodeModel('gpt-4.1'), false);
+});
diff --git a/docker-compose.hub.yml b/docker-compose.hub.yml
index b61d691e6..6c5a239cc 100644
--- a/docker-compose.hub.yml
+++ b/docker-compose.hub.yml
@@ -41,6 +41,9 @@ services:
       - evonexus_memory:/workspace/memory
       - evonexus_adw_logs:/workspace/ADWs/logs
       - evonexus_agent_memory:/workspace/.claude/agent-memory
+      - evonexus_claude_auth:/root/.claude
+      - evonexus_codex_auth:/root/.codex
+      - evonexus_openclaude_auth:/root/.openclaude
     restart: unless-stopped
     healthcheck:
       test: ["CMD", "curl", "-fsS", "http://localhost:8080/api/version"]
@@ -66,6 +69,9 @@ services:
       - evonexus_memory:/workspace/memory
       - evonexus_adw_logs:/workspace/ADWs/logs
       - evonexus_agent_memory:/workspace/.claude/agent-memory
+      - evonexus_claude_auth:/root/.claude
+      - evonexus_codex_auth:/root/.codex
+      - evonexus_openclaude_auth:/root/.openclaude
     stdin_open: true
     tty: true
     restart: unless-stopped
@@ -88,6 +94,7 @@ services:
       - evonexus_memory:/workspace/memory
       - evonexus_adw_logs:/workspace/ADWs/logs
       - evonexus_agent_memory:/workspace/.claude/agent-memory
+      - evonexus_codex_auth:/root/.codex
     restart: unless-stopped
     depends_on:
       dashboard:
@@ -104,3 +111,6 @@ volumes:
   evonexus_memory:
   evonexus_adw_logs:
   evonexus_agent_memory:
+  evonexus_claude_auth:
+  evonexus_codex_auth:
+  evonexus_openclaude_auth:
diff --git a/docker-compose.yml b/docker-compose.yml
index 7050e9aaa..c3aa2a07e 100644
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -15,6 +15,7 @@ services:
       - TERMINAL_SERVER_PORT=32352
     volumes:
       - claude-auth:/root/.claude
+      - openclaude-auth:/root/.openclaude
       - ./config:/workspace/config
       - ./workspace:/workspace/workspace
       - ./dashboard/data:/workspace/dashboard/data
@@ -82,6 +83,7 @@ services:
 
 volumes:
   claude-auth:
+  openclaude-auth:
   daily-logs:
   projects:
   community:
diff --git a/docs/agents/engineering-layer.md b/docs/agents/engineering-layer.md
index 3eb6fb31e..38c17b82d 100644
--- a/docs/agents/engineering-layer.md
+++ b/docs/agents/engineering-layer.md
@@ -119,7 +119,7 @@ Skills that orchestrate the engineering agents.
 ### Tier 3 — Meta / utilities (5)
 
 - `dev-cancel` — clean stop of any active eng workflow
-- `dev-remember` — quick context persistence (lighter than mempalace)
+- `dev-remember` — quick context persistence (lighter than mempalace). See [MemPalace Guide](mempalace-guide.md) for the full memory reference.
 - `dev-ask` — single-shot query to a specific model (Claude/Codex/Gemini)
 - `dev-learner` — extract reusable skills from conversation patterns
 - `dev-skillify` — convert current conversation into a new skill
diff --git a/docs/agents/mempalace-guide.md b/docs/agents/mempalace-guide.md
new file mode 100644
index 000000000..18a075f95
--- /dev/null
+++ b/docs/agents/mempalace-guide.md
@@ -0,0 +1,131 @@
+# Guia curto — MemPalace para agentes
+
+Este guia diz, em uma página, **quando** um agente deve usar MemPalace e **como** ler/escrever memória no workspace. Para o brief técnico completo, veja `workspace/development/research/[C]research-mempalace-agent-guide-2026-06-16.md`.
+
+## 30-seconds cheatsheet
+
+- **Buscar:** `evo.get("/api/mempalace/search", params={"q": "...", "n": 5})`
+- **Indexar:** `evo.post("/api/mempalace/mine")`
+- **Status:** `evo.get("/api/mempalace/status")`
+- **Privado (1 agente):** `.claude/agent-memory/{agent}/`
+- **Compartilhado (todos):** `memory/*.md`
+- **Semântico (grande volume):** MemPalace
+
+## TL;DR
+
+| Onde | Use para | Como acessar |
+|---|---|---|
+| `.claude/agent-memory/{agent}/` | Notas privadas de um agente (decisões, gotchas, padrões de uma sessão) | Leitura/escrita de arquivo `.md` |
+| `memory/*.md` | Conhecimento compartilhado entre **todos** os agentes (pessoas, projetos, glossário, contexto) | Leitura/escrita de arquivo `.md`; o conteúdo vira hot cache via `CLAUDE.md` |
+| **MemPalace** (`dashboard/data/mempalace/`) | Busca semântica + BM25 sobre fontes grandes (código, docs, transcrições) | API REST `/api/mempalace/*`, MCP, CLI ou SDK Python |
+
+`memory/*.md` e MemPalace **não competem**: o markdown é a fonte curada, o MemPalace é o índice de busca.
+
+## Quando usar qual
+
+```
+Preciso guardar uma informação?
+│
+├── Contexto técnico de UMA sessão (gotcha, decisão local)
+│   → .claude/agent-memory/{agente}/   (markdown)
+│
+├── Conhecimento que TODOS os agentes precisam (pessoa, projeto, glossário)
+│   → memory/*.md                       (markdown)
+│
+└── Preciso BUSCAR semanticamente em muitos arquivos
+    → MemPalace                         (índice)
+```
+
+Regra do `dev-remember`: nota compartilhada → `memory/`. Quando o volume e a busca semântica justificarem (centenas de arquivos), use MemPalace.
+
+## Como ler
+
+### API REST (rotinas, heartbeats, scripts)
+
+```python
+from dashboard.backend.sdk_client import evo
+
+hits = evo.get("/api/mempalace/search", params={
+    "q": "como funciona o provider fallback",
+    "wing": "evo-nexus",
+    "n": 5,
+})
+for r in hits.get("results", []):
+    print(f"[{r['similarity']:.2f}] {r['source_file']}")
+```
+
+Outros endpoints úteis:
+
+| Método | Rota | Função |
+|---|---|---|
+| GET | `/api/mempalace/status` | Versão, drawers, wings, rooms, status do mining |
+| GET | `/api/mempalace/sources` | Fontes configuradas |
+| POST | `/api/mempalace/mine` | Dispara reindexação (opcional `source_index`) |
+
+Tudo requer `DASHBOARD_API_TOKEN` (injetado automaticamente pelo `evo` SDK).
+
+### MCP (dentro do Claude Code)
+
+```bash
+claude mcp add mempalace -- python -m mempalace.mcp_server \
+  --palace /home/sistemabritto/Documentos/evo-nexus/dashboard/data/mempalace
+```
+
+Depois, a tool `search_memories` aparece direto na sessão.
+
+### CLI (debug rápido)
+
+```bash
+.venv/bin/mempalace search "autenticação jwt" \
+  --palace dashboard/data/mempalace -n 5
+```
+
+## Como escrever
+
+**Ninguém escreve drawers à mão.** O ciclo é:
+
+1. Escreva o conteúdo em arquivos (`.md`, `.py`, `.ts`, …) dentro de uma fonte registrada.
+2. Dispare a indexação: `POST /api/mempalace/mine`.
+3. Acompanhe `GET /api/mempalace/status` (`mining.phase`, `files_done/total`).
+4. Pronto — buscas já enxergam o conteúdo.
+
+Para fixar `wing` e `rooms` de uma fonte, crie um `mempalace.yaml` na raiz dela. Caso contrário, o worker assume `wing = nome do diretório`, `room = general`.
+
+## Estrutura Wing → Room → Drawer
+
+| Nível | O que é | Exemplo |
+|---|---|---|
+| **Wing** | Projeto ou categoria top-level | `evo-nexus`, `evo-ai`, `docs` |
+| **Room** | Tópico dentro da wing | `architecture`, `decisions`, `technical` |
+| **Drawer** | Chunk de ~800 caracteres + metadata | Indexado automaticamente |
+
+Filtre por `wing`/`room` na busca quando souber o domínio — corta ruído.
+
+## MemPalace vs Knowledge Base (pgvector)
+
+São produtos **diferentes** no mesmo dashboard:
+
+| | MemPalace | Knowledge Base |
+|---|---|---|
+| Storage | ChromaDB local em `dashboard/data/mempalace/` | Postgres + pgvector (BYO) |
+| Escopo | Memória pessoal do workspace, offline | Multi-tenant, API-first para times e produtos (ex.: Evo Academy) |
+| Rota | `/api/mempalace/*` | `/api/knowledge/*` e `/api/knowledge/v1/*` |
+| Skills | — | `knowledge-{query,summarize,ingest,browse,organize,admin}` |
+
+Se a busca é para o agente raciocinar localmente, é MemPalace. Se é para servir clientes externos via API, é Knowledge Base.
+
+## Versão e observações
+
+- **MemPalace 3.4.0** instalado em `.venv/` (verificado em 2026-06-16).
+- Embedding padrão: `all-MiniLM-L6-v2` (384-dim, inglês). Para pt-BR, considere trocar para `embeddinggemma-300m-ONNX` — exige `mempalace repair rebuild-index`.
+- Worker de mining é subprocesso detached: se o dashboard reiniciar no meio, o worker antigo termina sozinho; o `/status` faz PID check no próximo poll.
+- ChromaDB não tem auth própria — a segurança vem do `require_permission` no Flask (`mempalace:view` e `mempalace:manage`).
+
+## Próximos passos sugeridos
+
+- Indexar `memory/` e `workspace/development/` como fontes do MemPalace para deixar todo o conhecimento curado searchable.
+- Atualizar `.claude/skills/dev-remember/SKILL.md` com link direto para este guia.
+
+---
+
+**Brief técnico completo:** `workspace/development/research/[C]research-mempalace-agent-guide-2026-06-16.md`
diff --git a/docs/agents/overview.md b/docs/agents/overview.md
index 8c7e74f08..d3ddec892 100644
--- a/docs/agents/overview.md
+++ b/docs/agents/overview.md
@@ -120,6 +120,8 @@ Memory is organized by type:
 
 Each memory file uses frontmatter (`name`, `description`, `type`) and a `MEMORY.md` index file tracks all entries. Agents read memory at the start of each session and update it as they learn.
 
+For semantic search over large volumes of content (code, docs, transcripts), use **MemPalace** — the local vector memory system. See [MemPalace Guide](mempalace-guide.md) for the complete reference on when and how to use it.
+
 ## Custom Agents
 
 You can create your own agents with the `custom-` prefix. Custom agents are gitignored (personal to your workspace) and appear in the dashboard with a gray "custom" badge.
diff --git a/docs/dashboard/brain-repo.md b/docs/dashboard/brain-repo.md
new file mode 100644
index 000000000..88736f6ff
--- /dev/null
+++ b/docs/dashboard/brain-repo.md
@@ -0,0 +1,47 @@
+# Brain Repo — GitHub Backup
+
+The **Brain Repo** backs up the knowledge layers of the workspace (`memory/`, `workspace/`, `customizations/`, `config-safe/`) to a private GitHub repository — with secrets scanning before every push. It lives in the dashboard sidebar and gives you versioned, off-machine snapshots of everything the agents have learned.
+
+## What Gets Synced
+
+On every sync the pipeline runs: **mirror → secrets scan → commit → (tag) → push**.
+
+- Watched folders: `memory/`, `workspace/`, `customizations/`, `config-safe/`
+- `workspace/projects/` is **excluded** — user-cloned git repos have their own GitHub
+- Any file containing a detected secret is dropped from the mirror before the commit — never pushed
+
+## Connecting
+
+1. Open **Brain Repo** in the dashboard sidebar
+2. Provide a GitHub token (encrypted at rest with `BRAIN_REPO_MASTER_KEY`)
+3. Create a new repo or connect an existing one — the local working clone lives under `dashboard/data/brain-repos/<repo-name>`
+
+## Syncing
+
+- **Sync now** — enqueues a mirror+commit+push (async; the UI polls `sync_in_progress`)
+- **Milestone** — same pipeline with a named tag (`milestone/<name>`), for marking known-good states
+- Snapshots/tags can be browsed and restored from the UI
+
+## Portability (local ↔ VPS)
+
+The local clone path is stored in the DB, but it is resolved **per machine** at sync time:
+
+1. If the stored path has a valid clone, it's used as-is.
+2. If not (e.g. the `dashboard.db` was restored from a backup made on another machine), the canonical path `{workspace}/dashboard/data/brain-repos/{repo_name}` is tried and persisted back.
+3. If no clone exists anywhere — fresh volume, new VPS — the sync pipeline **re-clones automatically** from GitHub using the stored token and URL, then proceeds. The first sync after a migration just takes a bit longer.
+
+"Re-connect" is only required when the stored credentials themselves are missing or can't be decrypted (e.g. `BRAIN_REPO_MASTER_KEY` changed).
+
+## Troubleshooting
+
+| Error | Cause | Fix |
+|---|---|---|
+| `Local brain repo … is missing or corrupt — re-connect` | No valid clone and no `repo_url`/`repo_name` stored | Reconnect the repo from the UI |
+| `Could not decrypt stored token — re-connect` | `BRAIN_REPO_MASTER_KEY` missing or changed | Restore the key in `.env`, or reconnect with a fresh token |
+| `SYNC_IN_PROGRESS` (409) | Another sync is running | Wait for it, or cancel from the UI |
+| `git push failed` | Token expired / repo permissions | Regenerate the GitHub token and reconnect |
+
+## Related
+
+- Source: `dashboard/backend/routes/brain_repo.py`, `dashboard/backend/brain_repo/job_runner.py`
+- [Environment Variables](../reference/env-variables.md) — `BRAIN_REPO_MASTER_KEY`
diff --git a/docs/dashboard/providers.md b/docs/dashboard/providers.md
index 3ba375498..b36c19a0f 100644
--- a/docs/dashboard/providers.md
+++ b/docs/dashboard/providers.md
@@ -9,6 +9,8 @@ EvoNexus uses Anthropic's `claude` CLI by default. To run on any other backend (
 | Provider | Binary | Notes |
 |---|---|---|
 | **Anthropic** (default) | `claude` | Native Anthropic auth, no extra config |
+| **NVIDIA NIM** | `openclaude` | OpenAI-compatible endpoint (`integrate.api.nvidia.com/v1`) — DeepSeek, GLM, Kimi, Qwen, Nemotron and other hosted models with generous free tiers |
+| **OmniRoute** (`omnirouter`) | `openclaude` | Self-hosted gateway (237+ providers, automatic fallback, token compression). On the VPS stack it runs as the `omniroute` service and is reached via the internal Swarm alias `http://omniroute:20128/v1` — works even when the container has no external DNS |
 | **OpenRouter** | `openclaude` | 200+ models via one API — Claude, GPT, Gemini, Llama, etc. |
 | **OpenAI** | `openclaude` | GPT-4o, GPT-4.1, o3 via OpenAI API |
 | **Google Gemini** | `openclaude` | Gemini 2.5 Pro/Flash via Google AI |
@@ -37,6 +39,22 @@ The active provider is stored in `config/providers.json`. Both the terminal-serv
 
 A green "Active" badge marks the currently selected provider. Every other provider can still be configured and tested without affecting the active one.
 
+## Fallback Chain (heartbeats and background runs)
+
+Heartbeats and other background invocations don't call the active provider blindly — they go through `dashboard/backend/provider_fallback.py`, which builds a **provider chain** and rotates on failure (429/quota, network errors, non-zero exits):
+
+- The chain starts at `active_provider` and follows its `fallback_providers` list in `config/providers.json` (e.g. `nvidia → omnirouter → anthropic`).
+- Within a provider, `fallback_models` rotates through alternate models before leaving the provider (NVIDIA ships a 12-model chain).
+- The last link is usually `anthropic` (native `claude`) — note that on a fresh VPS container this requires a `claude` login, otherwise the final attempt exits with code 1.
+- Failed provider/model pairs go on a short cooldown so parallel runs don't hammer a throttled endpoint.
+- Disable with `HEARTBEAT_PROVIDER_FALLBACK=0`.
+
+**VPS note:** containers on the Swarm stack may not resolve external hosts (ENOTFOUND on `integrate.api.nvidia.com`, `openrouter.ai`, …). Keep `omnirouter` in the chain — it resolves via internal Docker DNS and is the reliable path for heartbeats on the VPS.
+
+## Per-Channel Provider: `telegram_provider`
+
+`config/providers.json` also accepts a `telegram_provider` key that overrides the provider used by the **Telegram provider bot** (Magneto) without touching the terminal's `active_provider`. On the VPS this is set to `omnirouter` for the DNS reason above. See [Telegram Integration](../integrations/telegram.md#provider-mode-magneto).
+
 ## Testing a Provider
 
 Each provider card has a **Test** button that runs `<binary> --version` with the configured env vars merged into the environment, then reports success or failure inline. This is a sanity check — it verifies that the binary is installed, in `$PATH`, and that the env var injection works. It does **not** validate that your API key actually authenticates against the remote service (use the terminal after activating for that).
diff --git a/docs/heartbeats.md b/docs/heartbeats.md
index 07d8c43ed..b9d5820c6 100644
--- a/docs/heartbeats.md
+++ b/docs/heartbeats.md
@@ -95,6 +95,15 @@ Look at the run's `stderr_tail` and `stdout_tail`. Common causes:
 - Agent hit `max_turns` before returning (raise the cap or tighten the prompt)
 - Agent hit `timeout_seconds` (integration call was slow — raise timeout or add a retry inside the agent)
 
+### Provider fallback (exit code 1, `attempt #N`)
+
+Heartbeat runs go through the **provider fallback chain** (`provider_fallback.py`): starting at the `active_provider` in `config/providers.json` and rotating through `fallback_models` / `fallback_providers` on 429s and errors. A failure notification with `attempt #3` means the whole chain was exhausted — check each link:
+
+- External providers (NVIDIA, OpenRouter) fail with ENOTFOUND on VPS containers without external DNS — keep `omnirouter` (the internal OmniRoute gateway) in the chain.
+- The final `anthropic` link runs native `claude`, which needs a login; on a fresh container it exits with code 1 in seconds.
+
+See [Providers → Fallback Chain](dashboard/providers.md#fallback-chain-heartbeats-and-background-runs).
+
 ### YAML and DB drift
 
 If you edited `config/heartbeats.yaml` by hand and the dashboard still shows the old state, run:
diff --git a/docs/integrations/overview.md b/docs/integrations/overview.md
index a16a729a5..7ce314409 100644
--- a/docs/integrations/overview.md
+++ b/docs/integrations/overview.md
@@ -51,6 +51,7 @@ Direct HTTP calls to service APIs, executed by skills and routines via Python sc
 | YouTube | @pixel | `int-youtube`, `social-youtube-report` |
 | Instagram | @pixel | `int-instagram`, `social-instagram-report` |
 | LinkedIn | @pixel | `int-linkedin`, `social-linkedin-report` |
+| X / Twitter | @pixel | `post_to_x.py`, `publish_scheduled.py` (posting via editorial calendar) |
 | Evolution API | @pulse | `int-evolution-api`, `pulse-daily` |
 | Evolution Go | @pulse | `int-evolution-go`, `pulse-daily` |
 | Evo CRM | @nex | `int-evo-crm` |
@@ -59,12 +60,12 @@ API clients read credentials from `.env` at runtime.
 
 ### OAuth Flows
 
-Social media accounts (YouTube, Instagram, LinkedIn) use OAuth for authentication. The dashboard provides a built-in OAuth flow:
+Social media accounts (YouTube, Instagram, LinkedIn, X/Twitter) use OAuth for authentication. The dashboard provides a built-in OAuth flow:
 
 1. Go to **Integrations** in the dashboard
 2. Click **Connect** on the platform you want
 3. Complete the OAuth consent screen
-4. Tokens are saved to `.env` automatically
+4. Tokens are saved automatically — `SOCIAL_*` keys go to the persistent store `config/social.env` (see [X / Twitter](x-twitter.md#how-tokens-are-stored)); other keys go to `.env`
 
 OAuth requires client credentials configured in `.env`:
 
@@ -129,6 +130,7 @@ See individual integration guides for setup steps:
 - [YouTube](youtube.md) -- Channel stats, videos, engagement (OAuth)
 - [Instagram](instagram.md) -- Profile, posts, engagement (Graph API + OAuth)
 - [LinkedIn](linkedin.md) -- Profile and org stats (OAuth)
+- [X / Twitter](x-twitter.md) -- Automated posting with token rotation (OAuth PKCE)
 
 **Development:**
 - [GitHub](github.md) -- PRs, issues, releases via MCP + CLI
diff --git a/docs/integrations/telegram.md b/docs/integrations/telegram.md
index 540fcf12e..29bd88b9a 100644
--- a/docs/integrations/telegram.md
+++ b/docs/integrations/telegram.md
@@ -4,6 +4,8 @@ Telegram provides real-time messaging and notifications via a bot connected thro
 
 > **Channel mode:** Telegram also works as a [Channel](../guides/channels.md#setup-telegram) — a bidirectional chat bridge that pushes messages into your Claude Code session. Start with `make telegram`. See the [Channels Guide](../guides/channels.md) for full setup including pairing and security.
 
+> **Provider mode:** on headless deployments (VPS/Swarm) where Channels can't run — non-Anthropic providers can't reliably call the `reply` MCP tool — the bot runs in **provider mode** instead. See [Provider Mode (Magneto)](#provider-mode-magneto) below.
+
 ## Setup
 
 ### 1. Create a Bot
@@ -69,6 +71,23 @@ reply(chat_id="...", text="Your reply", reply_to="message_id")
 - The Bot API has no history or search -- only incoming messages are visible
 - Access control is managed via the `/telegram:access` skill
 
+## Provider Mode (Magneto)
+
+`scripts/telegram_provider_bot.py` is a standalone bot runtime that answers chat messages using the workspace's configured LLM provider via plain chat completions — no Claude Code session, no MCP. It's the default on the VPS stack (`TELEGRAM_MODE=provider`), where it runs as the `evonexus_telegram` service.
+
+Key facts:
+
+- **Provider**: reads `telegram_provider` from `config/providers.json` (falls back to `active_provider`). On the VPS it points at `omnirouter` — the internal OmniRoute gateway — because containers can't resolve external provider hosts. Switch at runtime with the `/provider <id>` chat command.
+- **No tools**: the model behind the bot is a plain chat completion — it cannot execute HTTP calls or shell commands by itself. Everything it should "know how to do" is fetched **server-side by the runtime and injected into the prompt**:
+  - **URL contents** — links in your message are fetched and their text injected, so the bot can "read" pages.
+  - **MemPalace recall** — the message is used as a semantic query against `GET /api/mempalace/search`; top hits are injected as persistent workspace memory.
+  - **Nexus status** — when the message mentions crons/rotinas/heartbeats/scheduler, the runtime calls `GET /api/heartbeats` (last run + error per heartbeat) and `GET /api/routines` and injects real data, so "how are the crons doing?" gets answered with facts instead of "I don't have access".
+- **Voice notes**: audio messages are transcribed via Groq Whisper (`GROQ_API_KEY`) and treated as text input.
+- **Memory**: a rolling window of the last messages per chat is kept on disk and injected as conversation memory.
+- **Heartbeat notifications**: heartbeat failures and outcomes are pushed to the configured chat — this is where `⚠️ Heartbeat FAIL` alerts come from.
+
+To extend what the bot can answer, follow the same pattern: add a `fetch_*_context()` function that detects the topic, calls the API server-side, and injects the result into `build_prompt()` — do **not** add prompt instructions telling the model to call APIs itself (it can't).
+
 ## Skills That Use Telegram
 
 | Skill | What it does |
diff --git a/docs/integrations/x-twitter.md b/docs/integrations/x-twitter.md
new file mode 100644
index 000000000..34d17140b
--- /dev/null
+++ b/docs/integrations/x-twitter.md
@@ -0,0 +1,61 @@
+# X / Twitter Integration
+
+Automated posting to X via OAuth 2.0 (PKCE). The editorial calendar routine ("Publicar Posts Sociais (X)") dispatches scheduled posts through `scripts/publish_scheduled.py` → `scripts/post_to_x.py`, with automatic token refresh and rate-limit retry.
+
+## How Tokens Are Stored
+
+X rotates the **refresh token on every refresh** — the old one is invalidated immediately. Because of that, tokens live in a dedicated, writable, persistent store instead of static env vars:
+
+| Store | Path | Notes |
+|---|---|---|
+| **Social token store** | `config/social.env` | Source of truth for all `SOCIAL_*` keys. Gitignored, `chmod 600`. On the VPS it sits in the `evonexus_config` volume — shared by the dashboard and the scheduler, survives redeploys |
+| Root `.env` | `.env` | Holds `TWITTER_CLIENT_ID` / `TWITTER_CLIENT_SECRET`; also receives tokens when connecting via the standalone `social-auth` app |
+| Process env | — | Env vars of the stack; lowest precedence for `SOCIAL_*` keys |
+
+Precedence for `SOCIAL_*` keys: `config/social.env` wins (it holds the freshest rotated tokens), **except** when a manual reconnection wrote a newer `TOKEN_CREATED_AT` to `.env` — then that account's keys from `.env` win. `scripts/seed_social_env.py` exports the social keys from `.env` into `config/social.env` (use `--print` to paste the content on another machine).
+
+## Connecting an Account
+
+### Via the dashboard (recommended on the VPS)
+
+1. Make sure `TWITTER_CLIENT_ID` (and optionally `TWITTER_CLIENT_SECRET`) are configured — the X app must list `https://<your-dashboard-domain>/callback/twitter` as a callback URL.
+2. Open `https://<your-dashboard-domain>/connect/twitter` and authorize.
+3. Tokens are written to `config/social.env` in the shared volume — the scheduler picks them up on the next posting run, no restart needed.
+
+### Via the standalone app (local)
+
+```bash
+python3 social-auth/app.py     # opens localhost:8765
+```
+
+Connect X there; tokens land in the root `.env`. Run `python3 scripts/seed_social_env.py` afterwards to sync them into `config/social.env`.
+
+## Posting
+
+```bash
+python3 scripts/post_to_x.py "Tweet text" [--media image.png] [--account N] [--dry-run]
+```
+
+- Auto-refreshes expired access tokens (X access tokens last ~2h) and persists the rotated pair back to `config/social.env`.
+- Retries with backoff on 429 (free tier resets every 15 min).
+- Multi-account via `SOCIAL_TWITTER_<N>_*` and `--account N`.
+
+## Rules That Save You Pain
+
+- **Only one side should post/refresh.** If both your local machine and the VPS refresh the same refresh token, each rotation invalidates the other side's token and the integration dies with `"Value passed for the token was invalid"`. Pick where the posting routine runs (normally the VPS scheduler) and let the other side go stale.
+- **A bearer token is read-only.** Posting requires the OAuth user-context flow with `tweet.write` — an app-only `BEARER_TOKEN` cannot publish.
+- If the refresh token is ever invalidated, reconnect via the dashboard (`/connect/twitter`) — there is no way to revive it.
+
+## Troubleshooting
+
+| Error | Cause | Fix |
+|---|---|---|
+| `No SOCIAL_TWITTER account found` | No tokens in `config/social.env` / `.env` | Connect via `/connect/twitter` (dashboard) or `social-auth/app.py` (local) |
+| `Invalid state — CSRF protection` on callback | Session cookie not sent on the cross-site redirect | Fixed in the dashboard (SameSite=Lax + ProxyFix); update the image if you still see it |
+| `Token expired (401) and refresh failed` | Refresh token rotated elsewhere or revoked | Reconnect the account |
+| `Only SOCIAL_TWITTER bearer token found` | Account saved with app-only bearer | Redo the OAuth flow (needs `tweet.write`) |
+
+## Related
+
+- [Social Accounts env pattern](../reference/env-variables.md#social-accounts)
+- Source: `scripts/post_to_x.py`, `scripts/publish_scheduled.py`, `social-auth/auth/twitter.py`, `social-auth/env_manager.py`
diff --git a/docs/llms-full.txt b/docs/llms-full.txt
index 82f7cff17..9558e1875 100644
--- a/docs/llms-full.txt
+++ b/docs/llms-full.txt
@@ -535,7 +535,7 @@ Skills that orchestrate the engineering agents.
 ### Tier 3 — Meta / utilities (5)
 
 - `dev-cancel` — clean stop of any active eng workflow
-- `dev-remember` — quick context persistence (lighter than mempalace)
+- `dev-remember` — quick context persistence (lighter than mempalace). See [MemPalace Guide](mempalace-guide.md) for the full memory reference.
 - `dev-ask` — single-shot query to a specific model (Claude/Codex/Gemini)
 - `dev-learner` — extract reusable skills from conversation patterns
 - `dev-skillify` — convert current conversation into a new skill
@@ -876,6 +876,141 @@ This agent is not used in any scheduled routines.
 Persistent memory at `.claude/agent-memory/mako/`. Stores project context, user preferences, and feedback across sessions.
 
 
+---
+
+# Guia curto — MemPalace para agentes
+
+Este guia diz, em uma página, **quando** um agente deve usar MemPalace e **como** ler/escrever memória no workspace. Para o brief técnico completo, veja `workspace/development/research/[C]research-mempalace-agent-guide-2026-06-16.md`.
+
+## 30-seconds cheatsheet
+
+- **Buscar:** `evo.get("/api/mempalace/search", params={"q": "...", "n": 5})`
+- **Indexar:** `evo.post("/api/mempalace/mine")`
+- **Status:** `evo.get("/api/mempalace/status")`
+- **Privado (1 agente):** `.claude/agent-memory/{agent}/`
+- **Compartilhado (todos):** `memory/*.md`
+- **Semântico (grande volume):** MemPalace
+
+## TL;DR
+
+| Onde | Use para | Como acessar |
+|---|---|---|
+| `.claude/agent-memory/{agent}/` | Notas privadas de um agente (decisões, gotchas, padrões de uma sessão) | Leitura/escrita de arquivo `.md` |
+| `memory/*.md` | Conhecimento compartilhado entre **todos** os agentes (pessoas, projetos, glossário, contexto) | Leitura/escrita de arquivo `.md`; o conteúdo vira hot cache via `CLAUDE.md` |
+| **MemPalace** (`dashboard/data/mempalace/`) | Busca semântica + BM25 sobre fontes grandes (código, docs, transcrições) | API REST `/api/mempalace/*`, MCP, CLI ou SDK Python |
+
+`memory/*.md` e MemPalace **não competem**: o markdown é a fonte curada, o MemPalace é o índice de busca.
+
+## Quando usar qual
+
+```
+Preciso guardar uma informação?
+│
+├── Contexto técnico de UMA sessão (gotcha, decisão local)
+│   → .claude/agent-memory/{agente}/   (markdown)
+│
+├── Conhecimento que TODOS os agentes precisam (pessoa, projeto, glossário)
+│   → memory/*.md                       (markdown)
+│
+└── Preciso BUSCAR semanticamente em muitos arquivos
+    → MemPalace                         (índice)
+```
+
+Regra do `dev-remember`: nota compartilhada → `memory/`. Quando o volume e a busca semântica justificarem (centenas de arquivos), use MemPalace.
+
+## Como ler
+
+### API REST (rotinas, heartbeats, scripts)
+
+```python
+from dashboard.backend.sdk_client import evo
+
+hits = evo.get("/api/mempalace/search", params={
+    "q": "como funciona o provider fallback",
+    "wing": "evo-nexus",
+    "n": 5,
+})
+for r in hits.get("results", []):
+    print(f"[{r['similarity']:.2f}] {r['source_file']}")
+```
+
+Outros endpoints úteis:
+
+| Método | Rota | Função |
+|---|---|---|
+| GET | `/api/mempalace/status` | Versão, drawers, wings, rooms, status do mining |
+| GET | `/api/mempalace/sources` | Fontes configuradas |
+| POST | `/api/mempalace/mine` | Dispara reindexação (opcional `source_index`) |
+
+Tudo requer `DASHBOARD_API_TOKEN` (injetado automaticamente pelo `evo` SDK).
+
+### MCP (dentro do Claude Code)
+
+```bash
+claude mcp add mempalace -- python -m mempalace.mcp_server \
+  --palace /home/sistemabritto/Documentos/evo-nexus/dashboard/data/mempalace
+```
+
+Depois, a tool `search_memories` aparece direto na sessão.
+
+### CLI (debug rápido)
+
+```bash
+.venv/bin/mempalace search "autenticação jwt" \
+  --palace dashboard/data/mempalace -n 5
+```
+
+## Como escrever
+
+**Ninguém escreve drawers à mão.** O ciclo é:
+
+1. Escreva o conteúdo em arquivos (`.md`, `.py`, `.ts`, …) dentro de uma fonte registrada.
+2. Dispare a indexação: `POST /api/mempalace/mine`.
+3. Acompanhe `GET /api/mempalace/status` (`mining.phase`, `files_done/total`).
+4. Pronto — buscas já enxergam o conteúdo.
+
+Para fixar `wing` e `rooms` de uma fonte, crie um `mempalace.yaml` na raiz dela. Caso contrário, o worker assume `wing = nome do diretório`, `room = general`.
+
+## Estrutura Wing → Room → Drawer
+
+| Nível | O que é | Exemplo |
+|---|---|---|
+| **Wing** | Projeto ou categoria top-level | `evo-nexus`, `evo-ai`, `docs` |
+| **Room** | Tópico dentro da wing | `architecture`, `decisions`, `technical` |
+| **Drawer** | Chunk de ~800 caracteres + metadata | Indexado automaticamente |
+
+Filtre por `wing`/`room` na busca quando souber o domínio — corta ruído.
+
+## MemPalace vs Knowledge Base (pgvector)
+
+São produtos **diferentes** no mesmo dashboard:
+
+| | MemPalace | Knowledge Base |
+|---|---|---|
+| Storage | ChromaDB local em `dashboard/data/mempalace/` | Postgres + pgvector (BYO) |
+| Escopo | Memória pessoal do workspace, offline | Multi-tenant, API-first para times e produtos (ex.: Evo Academy) |
+| Rota | `/api/mempalace/*` | `/api/knowledge/*` e `/api/knowledge/v1/*` |
+| Skills | — | `knowledge-{query,summarize,ingest,browse,organize,admin}` |
+
+Se a busca é para o agente raciocinar localmente, é MemPalace. Se é para servir clientes externos via API, é Knowledge Base.
+
+## Versão e observações
+
+- **MemPalace 3.4.0** instalado em `.venv/` (verificado em 2026-06-16).
+- Embedding padrão: `all-MiniLM-L6-v2` (384-dim, inglês). Para pt-BR, considere trocar para `embeddinggemma-300m-ONNX` — exige `mempalace repair rebuild-index`.
+- Worker de mining é subprocesso detached: se o dashboard reiniciar no meio, o worker antigo termina sozinho; o `/status` faz PID check no próximo poll.
+- ChromaDB não tem auth própria — a segurança vem do `require_permission` no Flask (`mempalace:view` e `mempalace:manage`).
+
+## Próximos passos sugeridos
+
+- Indexar `memory/` e `workspace/development/` como fontes do MemPalace para deixar todo o conhecimento curado searchable.
+- Atualizar `.claude/skills/dev-remember/SKILL.md` com link direto para este guia.
+
+---
+
+**Brief técnico completo:** `workspace/development/research/[C]research-mempalace-agent-guide-2026-06-16.md`
+
+
 ---
 
 # Mentor — Courses & Education
@@ -1169,6 +1304,8 @@ Memory is organized by type:
 
 Each memory file uses frontmatter (`name`, `description`, `type`) and a `MEMORY.md` index file tracks all entries. Agents read memory at the start of each session and update it as they learn.
 
+For semantic search over large volumes of content (code, docs, transcripts), use **MemPalace** — the local vector memory system. See [MemPalace Guide](mempalace-guide.md) for the complete reference on when and how to use it.
+
 ## Custom Agents
 
 You can create your own agents with the `custom-` prefix. Custom agents are gitignored (personal to your workspace) and appear in the dashboard with a gray "custom" badge.
@@ -1636,6 +1773,57 @@ Web UI built with:
 API clients in `.claude/skills/int-*/scripts/` that connect to external services. Each integration has a SKILL.md describing usage and a Python client script.
 
 
+---
+
+# Brain Repo — GitHub Backup
+
+The **Brain Repo** backs up the knowledge layers of the workspace (`memory/`, `workspace/`, `customizations/`, `config-safe/`) to a private GitHub repository — with secrets scanning before every push. It lives in the dashboard sidebar and gives you versioned, off-machine snapshots of everything the agents have learned.
+
+## What Gets Synced
+
+On every sync the pipeline runs: **mirror → secrets scan → commit → (tag) → push**.
+
+- Watched folders: `memory/`, `workspace/`, `customizations/`, `config-safe/`
+- `workspace/projects/` is **excluded** — user-cloned git repos have their own GitHub
+- Any file containing a detected secret is dropped from the mirror before the commit — never pushed
+
+## Connecting
+
+1. Open **Brain Repo** in the dashboard sidebar
+2. Provide a GitHub token (encrypted at rest with `BRAIN_REPO_MASTER_KEY`)
+3. Create a new repo or connect an existing one — the local working clone lives under `dashboard/data/brain-repos/<repo-name>`
+
+## Syncing
+
+- **Sync now** — enqueues a mirror+commit+push (async; the UI polls `sync_in_progress`)
+- **Milestone** — same pipeline with a named tag (`milestone/<name>`), for marking known-good states
+- Snapshots/tags can be browsed and restored from the UI
+
+## Portability (local ↔ VPS)
+
+The local clone path is stored in the DB, but it is resolved **per machine** at sync time:
+
+1. If the stored path has a valid clone, it's used as-is.
+2. If not (e.g. the `dashboard.db` was restored from a backup made on another machine), the canonical path `{workspace}/dashboard/data/brain-repos/{repo_name}` is tried and persisted back.
+3. If no clone exists anywhere — fresh volume, new VPS — the sync pipeline **re-clones automatically** from GitHub using the stored token and URL, then proceeds. The first sync after a migration just takes a bit longer.
+
+"Re-connect" is only required when the stored credentials themselves are missing or can't be decrypted (e.g. `BRAIN_REPO_MASTER_KEY` changed).
+
+## Troubleshooting
+
+| Error | Cause | Fix |
+|---|---|---|
+| `Local brain repo … is missing or corrupt — re-connect` | No valid clone and no `repo_url`/`repo_name` stored | Reconnect the repo from the UI |
+| `Could not decrypt stored token — re-connect` | `BRAIN_REPO_MASTER_KEY` missing or changed | Restore the key in `.env`, or reconnect with a fresh token |
+| `SYNC_IN_PROGRESS` (409) | Another sync is running | Wait for it, or cancel from the UI |
+| `git push failed` | Token expired / repo permissions | Regenerate the GitHub token and reconnect |
+
+## Related
+
+- Source: `dashboard/backend/routes/brain_repo.py`, `dashboard/backend/brain_repo/job_runner.py`
+- [Environment Variables](../reference/env-variables.md) — `BRAIN_REPO_MASTER_KEY`
+
+
 ---
 
 # Settings
@@ -2206,6 +2394,8 @@ EvoNexus uses Anthropic's `claude` CLI by default. To run on any other backend (
 | Provider | Binary | Notes |
 |---|---|---|
 | **Anthropic** (default) | `claude` | Native Anthropic auth, no extra config |
+| **NVIDIA NIM** | `openclaude` | OpenAI-compatible endpoint (`integrate.api.nvidia.com/v1`) — DeepSeek, GLM, Kimi, Qwen, Nemotron and other hosted models with generous free tiers |
+| **OmniRoute** (`omnirouter`) | `openclaude` | Self-hosted gateway (237+ providers, automatic fallback, token compression). On the VPS stack it runs as the `omniroute` service and is reached via the internal Swarm alias `http://omniroute:20128/v1` — works even when the container has no external DNS |
 | **OpenRouter** | `openclaude` | 200+ models via one API — Claude, GPT, Gemini, Llama, etc. |
 | **OpenAI** | `openclaude` | GPT-4o, GPT-4.1, o3 via OpenAI API |
 | **Google Gemini** | `openclaude` | Gemini 2.5 Pro/Flash via Google AI |
@@ -2234,6 +2424,22 @@ The active provider is stored in `config/providers.json`. Both the terminal-serv
 
 A green "Active" badge marks the currently selected provider. Every other provider can still be configured and tested without affecting the active one.
 
+## Fallback Chain (heartbeats and background runs)
+
+Heartbeats and other background invocations don't call the active provider blindly — they go through `dashboard/backend/provider_fallback.py`, which builds a **provider chain** and rotates on failure (429/quota, network errors, non-zero exits):
+
+- The chain starts at `active_provider` and follows its `fallback_providers` list in `config/providers.json` (e.g. `nvidia → omnirouter → anthropic`).
+- Within a provider, `fallback_models` rotates through alternate models before leaving the provider (NVIDIA ships a 12-model chain).
+- The last link is usually `anthropic` (native `claude`) — note that on a fresh VPS container this requires a `claude` login, otherwise the final attempt exits with code 1.
+- Failed provider/model pairs go on a short cooldown so parallel runs don't hammer a throttled endpoint.
+- Disable with `HEARTBEAT_PROVIDER_FALLBACK=0`.
+
+**VPS note:** containers on the Swarm stack may not resolve external hosts (ENOTFOUND on `integrate.api.nvidia.com`, `openrouter.ai`, …). Keep `omnirouter` in the chain — it resolves via internal Docker DNS and is the reliable path for heartbeats on the VPS.
+
+## Per-Channel Provider: `telegram_provider`
+
+`config/providers.json` also accepts a `telegram_provider` key that overrides the provider used by the **Telegram provider bot** (Magneto) without touching the terminal's `active_provider`. On the VPS this is set to `omnirouter` for the DNS reason above. See [Telegram Integration](../integrations/telegram.md#provider-mode-magneto).
+
 ## Testing a Provider
 
 Each provider card has a **Test** button that runs `<binary> --version` with the configured env vars merged into the environment, then reports success or failure inline. This is a sanity check — it verifies that the binary is installed, in `$PATH`, and that the env var injection works. It does **not** validate that your API key actually authenticates against the remote service (use the terminal after activating for that).
@@ -4571,6 +4777,15 @@ Look at the run's `stderr_tail` and `stdout_tail`. Common causes:
 - Agent hit `max_turns` before returning (raise the cap or tighten the prompt)
 - Agent hit `timeout_seconds` (integration call was slow — raise timeout or add a retry inside the agent)
 
+### Provider fallback (exit code 1, `attempt #N`)
+
+Heartbeat runs go through the **provider fallback chain** (`provider_fallback.py`): starting at the `active_provider` in `config/providers.json` and rotating through `fallback_models` / `fallback_providers` on 429s and errors. A failure notification with `attempt #3` means the whole chain was exhausted — check each link:
+
+- External providers (NVIDIA, OpenRouter) fail with ENOTFOUND on VPS containers without external DNS — keep `omnirouter` (the internal OmniRoute gateway) in the chain.
+- The final `anthropic` link runs native `claude`, which needs a login; on a fresh container it exits with code 1 in seconds.
+
+See [Providers → Fallback Chain](dashboard/providers.md#fallback-chain-heartbeats-and-background-runs).
+
 ### YAML and DB drift
 
 If you edited `config/heartbeats.yaml` by hand and the dashboard still shows the old state, run:
@@ -6169,6 +6384,7 @@ Direct HTTP calls to service APIs, executed by skills and routines via Python sc
 | YouTube | @pixel | `int-youtube`, `social-youtube-report` |
 | Instagram | @pixel | `int-instagram`, `social-instagram-report` |
 | LinkedIn | @pixel | `int-linkedin`, `social-linkedin-report` |
+| X / Twitter | @pixel | `post_to_x.py`, `publish_scheduled.py` (posting via editorial calendar) |
 | Evolution API | @pulse | `int-evolution-api`, `pulse-daily` |
 | Evolution Go | @pulse | `int-evolution-go`, `pulse-daily` |
 | Evo CRM | @nex | `int-evo-crm` |
@@ -6177,12 +6393,12 @@ API clients read credentials from `.env` at runtime.
 
 ### OAuth Flows
 
-Social media accounts (YouTube, Instagram, LinkedIn) use OAuth for authentication. The dashboard provides a built-in OAuth flow:
+Social media accounts (YouTube, Instagram, LinkedIn, X/Twitter) use OAuth for authentication. The dashboard provides a built-in OAuth flow:
 
 1. Go to **Integrations** in the dashboard
 2. Click **Connect** on the platform you want
 3. Complete the OAuth consent screen
-4. Tokens are saved to `.env` automatically
+4. Tokens are saved automatically — `SOCIAL_*` keys go to the persistent store `config/social.env` (see [X / Twitter](x-twitter.md#how-tokens-are-stored)); other keys go to `.env`
 
 OAuth requires client credentials configured in `.env`:
 
@@ -6247,6 +6463,7 @@ See individual integration guides for setup steps:
 - [YouTube](youtube.md) -- Channel stats, videos, engagement (OAuth)
 - [Instagram](instagram.md) -- Profile, posts, engagement (Graph API + OAuth)
 - [LinkedIn](linkedin.md) -- Profile and org stats (OAuth)
+- [X / Twitter](x-twitter.md) -- Automated posting with token rotation (OAuth PKCE)
 
 **Development:**
 - [GitHub](github.md) -- PRs, issues, releases via MCP + CLI
@@ -6378,6 +6595,8 @@ Telegram provides real-time messaging and notifications via a bot connected thro
 
 > **Channel mode:** Telegram also works as a [Channel](../guides/channels.md#setup-telegram) — a bidirectional chat bridge that pushes messages into your Claude Code session. Start with `make telegram`. See the [Channels Guide](../guides/channels.md) for full setup including pairing and security.
 
+> **Provider mode:** on headless deployments (VPS/Swarm) where Channels can't run — non-Anthropic providers can't reliably call the `reply` MCP tool — the bot runs in **provider mode** instead. See [Provider Mode (Magneto)](#provider-mode-magneto) below.
+
 ## Setup
 
 ### 1. Create a Bot
@@ -6443,6 +6662,23 @@ reply(chat_id="...", text="Your reply", reply_to="message_id")
 - The Bot API has no history or search -- only incoming messages are visible
 - Access control is managed via the `/telegram:access` skill
 
+## Provider Mode (Magneto)
+
+`scripts/telegram_provider_bot.py` is a standalone bot runtime that answers chat messages using the workspace's configured LLM provider via plain chat completions — no Claude Code session, no MCP. It's the default on the VPS stack (`TELEGRAM_MODE=provider`), where it runs as the `evonexus_telegram` service.
+
+Key facts:
+
+- **Provider**: reads `telegram_provider` from `config/providers.json` (falls back to `active_provider`). On the VPS it points at `omnirouter` — the internal OmniRoute gateway — because containers can't resolve external provider hosts. Switch at runtime with the `/provider <id>` chat command.
+- **No tools**: the model behind the bot is a plain chat completion — it cannot execute HTTP calls or shell commands by itself. Everything it should "know how to do" is fetched **server-side by the runtime and injected into the prompt**:
+  - **URL contents** — links in your message are fetched and their text injected, so the bot can "read" pages.
+  - **MemPalace recall** — the message is used as a semantic query against `GET /api/mempalace/search`; top hits are injected as persistent workspace memory.
+  - **Nexus status** — when the message mentions crons/rotinas/heartbeats/scheduler, the runtime calls `GET /api/heartbeats` (last run + error per heartbeat) and `GET /api/routines` and injects real data, so "how are the crons doing?" gets answered with facts instead of "I don't have access".
+- **Voice notes**: audio messages are transcribed via Groq Whisper (`GROQ_API_KEY`) and treated as text input.
+- **Memory**: a rolling window of the last messages per chat is kept on disk and injected as conversation memory.
+- **Heartbeat notifications**: heartbeat failures and outcomes are pushed to the configured chat — this is where `⚠️ Heartbeat FAIL` alerts come from.
+
+To extend what the bot can answer, follow the same pattern: add a `fetch_*_context()` function that detects the topic, calls the API server-side, and injects the result into `build_prompt()` — do **not** add prompt instructions telling the model to call APIs itself (it can't).
+
 ## Skills That Use Telegram
 
 | Skill | What it does |
@@ -6527,6 +6763,71 @@ The `int-todoist` skill uses the `todoist` CLI:
 | End of Day | 21:00 BRT daily | `make eod` |
 
 
+---
+
+# X / Twitter Integration
+
+Automated posting to X via OAuth 2.0 (PKCE). The editorial calendar routine ("Publicar Posts Sociais (X)") dispatches scheduled posts through `scripts/publish_scheduled.py` → `scripts/post_to_x.py`, with automatic token refresh and rate-limit retry.
+
+## How Tokens Are Stored
+
+X rotates the **refresh token on every refresh** — the old one is invalidated immediately. Because of that, tokens live in a dedicated, writable, persistent store instead of static env vars:
+
+| Store | Path | Notes |
+|---|---|---|
+| **Social token store** | `config/social.env` | Source of truth for all `SOCIAL_*` keys. Gitignored, `chmod 600`. On the VPS it sits in the `evonexus_config` volume — shared by the dashboard and the scheduler, survives redeploys |
+| Root `.env` | `.env` | Holds `TWITTER_CLIENT_ID` / `TWITTER_CLIENT_SECRET`; also receives tokens when connecting via the standalone `social-auth` app |
+| Process env | — | Env vars of the stack; lowest precedence for `SOCIAL_*` keys |
+
+Precedence for `SOCIAL_*` keys: `config/social.env` wins (it holds the freshest rotated tokens), **except** when a manual reconnection wrote a newer `TOKEN_CREATED_AT` to `.env` — then that account's keys from `.env` win. `scripts/seed_social_env.py` exports the social keys from `.env` into `config/social.env` (use `--print` to paste the content on another machine).
+
+## Connecting an Account
+
+### Via the dashboard (recommended on the VPS)
+
+1. Make sure `TWITTER_CLIENT_ID` (and optionally `TWITTER_CLIENT_SECRET`) are configured — the X app must list `https://<your-dashboard-domain>/callback/twitter` as a callback URL.
+2. Open `https://<your-dashboard-domain>/connect/twitter` and authorize.
+3. Tokens are written to `config/social.env` in the shared volume — the scheduler picks them up on the next posting run, no restart needed.
+
+### Via the standalone app (local)
+
+```bash
+python3 social-auth/app.py     # opens localhost:8765
+```
+
+Connect X there; tokens land in the root `.env`. Run `python3 scripts/seed_social_env.py` afterwards to sync them into `config/social.env`.
+
+## Posting
+
+```bash
+python3 scripts/post_to_x.py "Tweet text" [--media image.png] [--account N] [--dry-run]
+```
+
+- Auto-refreshes expired access tokens (X access tokens last ~2h) and persists the rotated pair back to `config/social.env`.
+- Retries with backoff on 429 (free tier resets every 15 min).
+- Multi-account via `SOCIAL_TWITTER_<N>_*` and `--account N`.
+
+## Rules That Save You Pain
+
+- **Only one side should post/refresh.** If both your local machine and the VPS refresh the same refresh token, each rotation invalidates the other side's token and the integration dies with `"Value passed for the token was invalid"`. Pick where the posting routine runs (normally the VPS scheduler) and let the other side go stale.
+- **A bearer token is read-only.** Posting requires the OAuth user-context flow with `tweet.write` — an app-only `BEARER_TOKEN` cannot publish.
+- If the refresh token is ever invalidated, reconnect via the dashboard (`/connect/twitter`) — there is no way to revive it.
+
+## Troubleshooting
+
+| Error | Cause | Fix |
+|---|---|---|
+| `No SOCIAL_TWITTER account found` | No tokens in `config/social.env` / `.env` | Connect via `/connect/twitter` (dashboard) or `social-auth/app.py` (local) |
+| `Invalid state — CSRF protection` on callback | Session cookie not sent on the cross-site redirect | Fixed in the dashboard (SameSite=Lax + ProxyFix); update the image if you still see it |
+| `Token expired (401) and refresh failed` | Refresh token rotated elsewhere or revoked | Reconnect the account |
+| `Only SOCIAL_TWITTER bearer token found` | Account saved with app-only bearer | Redo the OAuth flow (needs `tweet.write`) |
+
+## Related
+
+- [Social Accounts env pattern](../reference/env-variables.md#social-accounts)
+- Source: `scripts/post_to_x.py`, `scripts/publish_scheduled.py`, `social-auth/auth/twitter.py`, `social-auth/env_manager.py`
+
+
 ---
 
 # YouTube Integration
@@ -6798,6 +7099,183 @@ extensions and indexes.
 - Source for the validation: `dashboard/backend/knowledge/auto_migrator.py`.
 
 
+---
+
+# EvoNexus Plugin Contract
+
+This document describes the plugin.yaml schema for EvoNexus plugins, including capabilities, validated fields, and host-enforced contracts.
+
+---
+
+## plugin.yaml — Top-Level Fields
+
+```yaml
+schema_version: "1.0"       # required; must be "1.0"
+name: string                 # human-readable name
+slug: string                 # kebab-case identifier; unique across plugins
+version: string              # semver
+description: string
+author: string
+capabilities:                # list of declared capabilities (see below)
+  - capability_name
+```
+
+---
+
+## Capabilities
+
+A capability must be declared in `capabilities:` before the corresponding block is used. Unknown capabilities are rejected at install time.
+
+| Capability | Enum value | Purpose |
+|---|---|---|
+| `readonly_data` | `readonly_data` | Expose plugin data to agent queries |
+| `custom_tools` | `custom_tools` | Register callable tools on agents |
+| `public_pages` | `public_pages` | Token-gated public web pages served by host |
+| `safe_uninstall` | `safe_uninstall` | 3-step uninstall wizard with data preservation |
+
+---
+
+## `public_pages` — Token-Gated Public Pages
+
+Requires `capabilities: [public_pages]`.
+
+```yaml
+public_pages:
+  - id: string                       # unique within this plugin
+    description: string
+    route_prefix: string             # e.g. "orders"; becomes /p/<slug>/orders/<token>
+    token_source:
+      table: string                  # must start with <slug>_ (snake_case)
+      column: string                 # column holding the access token (snake_case)
+    bundle: string                   # must start with ui/public/
+    custom_element_name: string      # e.g. "my-plugin-orders"
+    auth_mode: token                 # only "token" supported in v1
+    rate_limit_per_ip: string        # e.g. "60/minute"
+    audit_action: string             # logged per request
+```
+
+### Routes
+
+| Method | Path | Description |
+|---|---|---|
+| `GET` | `/p/<slug>/<prefix>/<token>` | Serve the HTML bundle (portal entry) |
+| `GET` | `/p/<slug>/<prefix>/<token>/data` | Run a `public_via`-tagged readonly query |
+| `GET` | `/p/<slug>/<prefix>/<token>/public-assets/<path>` | Serve static assets from `ui/public/` |
+
+All three endpoints:
+1. Validate the token parametrically against `token_source.table/column` (SQL: `SELECT 1 FROM <table> WHERE <column> = ?`)
+2. Apply rate limiting (60 req/min on portal, 120 req/min on data)
+3. Emit security headers (CSP, X-Content-Type-Options, Referrer-Policy, HSTS)
+4. Write an audit log row
+
+### Linking a `readonly_data` query to a public page
+
+```yaml
+readonly_data:
+  queries:
+    - name: order_summary
+      sql: "SELECT id, status, total FROM nutri_orders WHERE id = :order_id"
+      public_via: orders          # id of the public_page above
+      bind_token_param: order_id  # parameter name that receives the token value
+```
+
+`public_via` must reference a declared `public_pages[].id`. When set, `bind_token_param` is required; the validated token value is injected at query time.
+
+---
+
+## `safe_uninstall` — 3-Step Uninstall Wizard
+
+Requires `capabilities: [safe_uninstall]`.
+
+```yaml
+safe_uninstall:
+  enabled: bool                     # true = enforce wizard; false = legacy confirm()
+  block_uninstall: bool             # if true, uninstall is unconditionally blocked (409)
+  reason: string                    # displayed in wizard Step 1 (regulatory context)
+
+  user_confirmation:
+    checkbox_label: string          # Step 1 checkbox text
+    typed_phrase: string            # Step 3 required phrase (exact match)
+
+  pre_uninstall_hook:
+    script: string                  # relative path inside plugin dir (e.g. scripts/export.py)
+    output_dir: string              # where the export lands (relative to plugin dir)
+    timeout_seconds: int            # 1–600
+    must_produce_file: bool         # if true, fail if output_dir is empty after hook
+
+  preserved_tables:                 # tables to rename rather than drop
+    - <slug>_tablename              # must be prefixed with <slug>_
+
+  preserved_host_entities:          # host-managed tables with partial row preservation
+    host_table_name:
+      "SQL condition for rows to KEEP"
+                                    # rows matching NOT (condition) are deleted
+
+  block_uninstall: false
+```
+
+### Host enforcement
+
+When `enabled: true`:
+
+1. **Admin role required** — non-admin users receive 403.
+2. **Confirmation phrase** — `DELETE /api/plugins/<slug>` body must include `confirmation_phrase` matching `user_confirmation.typed_phrase`.
+3. **Export verification** — `exported_at` path must be provided and the file must exist.
+4. **ZIP password** — `zip_password` must be present (forwarded to pre-uninstall hook if configured).
+5. **Pre-uninstall hook** — if configured, runs in a sandboxed subprocess with no secret env vars (only `PLUGIN_SLUG`, `PLUGIN_VERSION`, `OUTPUT_DIR`, `DB_READONLY_PATH`). Hook failure aborts uninstall.
+6. **Preserved tables** — tables listed in `preserved_tables` are renamed to `_orphan_<slug>_<tablename>` and recorded in `plugin_orphans`. They are **not dropped**.
+7. **Cascade-DELETE filtering** — for tables listed in `preserved_host_entities`, only rows NOT matching the preservation condition are deleted.
+
+### Force-uninstall escape hatch
+
+Setting `EVONEXUS_ALLOW_FORCE_UNINSTALL=1` in the host environment bypasses all safe_uninstall checks. Every force-uninstall is logged as `plugin_uninstall_force` in the audit table with the acting user's identity. This flag is intended for emergency recovery only.
+
+### Reinstall after safe_uninstall
+
+On reinstall of a plugin with orphaned tables:
+
+1. Host checks `plugin_orphans` for unrecovered rows.
+2. If present, compares `tarball_sha256` of the incoming tarball against `original_sha256` recorded at uninstall time.
+3. SHA256 mismatch → install blocked unless request includes `confirmed_sha256_change: true` (explicit operator acknowledgment).
+4. On SHA256 match (or explicit override): orphan tables are renamed back (`_orphan_<slug>_<table>` → `<table>`) before install.sql runs.
+
+### `plugin_orphans` table (host-managed)
+
+```sql
+CREATE TABLE plugin_orphans (
+    id TEXT PRIMARY KEY,
+    slug TEXT NOT NULL,
+    tablename TEXT NOT NULL,        -- original name (before _orphan_ prefix)
+    orphaned_at TEXT NOT NULL,
+    orphaned_by_user_id INTEGER,
+    original_plugin_version TEXT,
+    original_sha256 TEXT,
+    original_publisher_url TEXT,
+    recovered_at TEXT,              -- NULL until reinstall recovery
+    UNIQUE(slug, tablename)
+);
+```
+
+---
+
+## Security Notes
+
+- Plugin SQL identifiers (`table`, `column`) are validated at install time against `^[a-z][a-z0-9_]*$`. The host never interpolates untrusted input into SQL identifiers.
+- Token values in public-page routes are always bound as SQL parameters (`?`), never interpolated.
+- Pre-uninstall hooks run with a read-only DB copy; no write access and no secret env vars.
+- SQL in `readonly_data.queries` must not reference `_orphan_*` tables (rejected at install via schema validator).
+- Rate limiting is applied at the IP level on all public endpoints (flask-limiter, in-memory storage, single-process).
+
+---
+
+## Changelog
+
+| Version | Change |
+|---|---|
+| v1.0.0 | Initial contract: `readonly_data`, `custom_tools` |
+| v1.1.0 | Added `public_pages` (B2) and `safe_uninstall` (B3) capabilities |
+
+
 ---
 
 # OpenAI Codex (OAuth) — Provider Guide
@@ -7453,6 +7931,8 @@ Social media accounts are managed via the dashboard Integrations page after OAut
 SOCIAL_{PLATFORM}_{N}_{FIELD}
 ```
 
+**Where they live:** `SOCIAL_*` keys are written to `config/social.env` — a dedicated, gitignored token store (on the VPS: the `evonexus_config` volume, shared between dashboard and scheduler). This matters because some platforms (X) rotate refresh tokens on every refresh, so the store must be writable and persistent. The root `.env` and process env are still read as fallbacks; `SOCIAL_ENV_PATH` overrides the store location. See [X / Twitter](../integrations/x-twitter.md#how-tokens-are-stored) for the precedence rules.
+
 Examples:
 
 ```env
@@ -7519,6 +7999,10 @@ Configure via the dashboard at `/knowledge/settings` — the provider is locked
 | `AI_IMG_CREATOR_CF_TOKEN` | Gateway mode | Gateway auth token (from gateway Settings > Authentication) |
 | `AI_IMG_CREATOR_OPENROUTER_KEY` | Direct OpenRouter | OpenRouter API key (starts with `sk-or-...`) |
 | `AI_IMG_CREATOR_GEMINI_KEY` | Direct Google | Google AI Studio API key (starts with `AI...`) |
+| `AI_IMG_CREATOR_OPENAI_KEY` | OpenAI Images API | Platform key (billing on platform.openai.com) for `gpt-image-2`. Falls back to `OPENAI_API_KEY`. ChatGPT Plus/Codex OAuth tokens cannot generate images |
+| `AI_IMG_CREATOR_OMNIROUTE_KEY` | OmniRoute gateway | Key of the self-hosted OmniRoute gateway (`--provider omniroute`) |
+| `AI_IMG_CREATOR_OMNIROUTE_BASE_URL` | Optional | OmniRoute base URL — defaults to `http://omniroute:20128/v1` (VPS stack alias) |
+| `NVIDIA_API_KEY` | NVIDIA NIM | Enables `--provider nvidia` (FLUX models, free tier) |
 
 Gateway mode activates when all three `AI_IMG_CREATOR_CF_*` vars are set. Falls back to direct mode if gateway fails. You only need one provider configured (either Cloudflare or at least one direct key).
 
@@ -7526,6 +8010,10 @@ Gateway mode activates when all three `AI_IMG_CREATOR_CF_*` vars are set. Falls
 - **Cloudflare Gateway**: [dash.cloudflare.com](https://dash.cloudflare.com) > AI > AI Gateway > Create Gateway. See [docs/skills/ai-image-creator.md](../skills/ai-image-creator.md) for full setup.
 - **OpenRouter key**: [openrouter.ai/keys](https://openrouter.ai/keys) > Create Key.
 - **Google AI Studio key**: [aistudio.google.com/apikey](https://aistudio.google.com/apikey) > Create API Key.
+- **OpenAI platform key**: [platform.openai.com/api-keys](https://platform.openai.com/api-keys) > Create — must be a billing-enabled platform key.
+- **OmniRoute key**: from your self-hosted OmniRoute instance (Dashboard → API Keys).
+
+All of these can be pasted in the dashboard card **Integrations → AI Image Creator**.
 
 
 ---
@@ -8627,7 +9115,7 @@ The `/tasks` page shows:
 
 # AI Image Creator
 
-Generate PNG images using AI models — Gemini, FLUX.2, Riverflow, SeedDream, GPT-5 Image — routed through Cloudflare AI Gateway (BYOK) or directly via OpenRouter/Google AI Studio. Also analyzes and describes existing images using multimodal vision.
+Generate PNG images using AI models — Gemini, FLUX.2, Riverflow, SeedDream, GPT-5 Image, GPT Image 2 — routed through Cloudflare AI Gateway (BYOK), directly via OpenRouter/Google AI Studio/NVIDIA NIM/OpenAI, or through the self-hosted OmniRoute gateway. Also analyzes and describes existing images using multimodal vision.
 
 **Skill name:** `ai-image-creator`
 **Trigger:** "generate an image", "create a PNG", "make an icon", "describe this image", "analyze this image"
@@ -8645,6 +9133,10 @@ The `ai-image-creator` skill wraps a Python script (`generate-image.py`) that ca
 | `flux2` | `black-forest-labs/flux.2-max` | OpenRouter | Image-only |
 | `seedream` | `bytedance-seed/seedream-4.5` | OpenRouter | Image-only |
 | `gpt5` | `openai/gpt-5-image` | OpenRouter | Multimodal |
+| `image2` | `gpt-image-2` | OpenAI Images API / OmniRoute | Image-only |
+| `nvidia-flux2-klein-4b` | `black-forest-labs/flux.2-klein-4b` | NVIDIA NIM | Image-only |
+| `nvidia-flux-dev` | `black-forest-labs/flux.1-dev` | NVIDIA NIM | Image-only |
+| `nvidia-flux-schnell` | `black-forest-labs/flux.1-schnell` | NVIDIA NIM | Image-only |
 
 **Multimodal** models (gemini, gpt5) accept reference images for editing/style transfer and can analyze existing images. **Image-only** models (riverflow, flux2, seedream) generate from text prompts only.
 
@@ -8749,18 +9241,53 @@ export AI_IMG_CREATOR_GEMINI_KEY="AIyour-key-here"
 
 ---
 
+## Setup Option D: OpenAI Images API (gpt-image-2)
+
+Direct access to OpenAI's `gpt-image-2` via the Images API. Excellent text rendering (including Portuguese accents) — the best pick for text-critical art.
+
+1. Get a **platform API key** at [platform.openai.com](https://platform.openai.com) (billing required). **ChatGPT Plus / Codex OAuth tokens cannot generate images** — they lack the images scope and return 401.
+2. Set the key (or paste it in the dashboard **Integrations → AI Image Creator** card):
+
+```bash
+export AI_IMG_CREATOR_OPENAI_KEY="sk-..."   # falls back to OPENAI_API_KEY
+```
+
+3. Use `--provider openai` (or just say "image2" — the keyword auto-selects the provider). `-a` maps to the supported sizes (1024x1024, 1536x1024, 1024x1536); `-r` and `--analyze` are not supported here.
+
+---
+
+## Setup Option E: OmniRoute Gateway (self-hosted)
+
+Routes the same `gpt-image-2` Images API call through the self-hosted [OmniRoute](../dashboard/providers.md) gateway instead of api.openai.com. Only the key is needed — the base URL defaults to the VPS stack alias `http://omniroute:20128/v1`.
+
+```bash
+export AI_IMG_CREATOR_OMNIROUTE_KEY="your-omniroute-key"
+# outside the Swarm stack, point at your gateway:
+export AI_IMG_CREATOR_OMNIROUTE_BASE_URL="https://your-gateway/v1"   # optional
+```
+
+Use `--provider omniroute`. The gateway must proxy `POST /v1/images/generations`.
+
+---
+
 ## Environment Variables Reference
 
-| Variable | Option A | Option B | Option C | Description |
-|----------|----------|----------|----------|-------------|
-| `AI_IMG_CREATOR_CF_ACCOUNT_ID` | Required | — | — | Cloudflare account ID |
-| `AI_IMG_CREATOR_CF_GATEWAY_ID` | Required | — | — | AI Gateway name |
-| `AI_IMG_CREATOR_CF_TOKEN` | Required | — | — | Gateway auth token |
-| `AI_IMG_CREATOR_OPENROUTER_KEY` | Optional* | Required | — | OpenRouter API key |
-| `AI_IMG_CREATOR_GEMINI_KEY` | Optional* | — | Required | Google AI Studio API key |
+| Variable | Option A | Option B | Option C | Option D | Option E | Description |
+|----------|----------|----------|----------|----------|----------|-------------|
+| `AI_IMG_CREATOR_CF_ACCOUNT_ID` | Required | — | — | — | — | Cloudflare account ID |
+| `AI_IMG_CREATOR_CF_GATEWAY_ID` | Required | — | — | — | — | AI Gateway name |
+| `AI_IMG_CREATOR_CF_TOKEN` | Required | — | — | — | — | Gateway auth token |
+| `AI_IMG_CREATOR_OPENROUTER_KEY` | Optional* | Required | — | — | — | OpenRouter API key |
+| `AI_IMG_CREATOR_GEMINI_KEY` | Optional* | — | Required | — | — | Google AI Studio API key |
+| `AI_IMG_CREATOR_OPENAI_KEY` | — | — | — | Required | — | OpenAI platform key for gpt-image-2 (falls back to `OPENAI_API_KEY`) |
+| `AI_IMG_CREATOR_OMNIROUTE_KEY` | — | — | — | — | Required | OmniRoute gateway key |
+| `AI_IMG_CREATOR_OMNIROUTE_BASE_URL` | — | — | — | — | Optional | Gateway base URL (default `http://omniroute:20128/v1`) |
+| `NVIDIA_API_KEY` | — | — | — | — | — | Enables `--provider nvidia` (FLUX models, free tier) |
 
 *For Option A (gateway), provider keys are stored in Cloudflare as BYOK — you do not need to set `OPENROUTER_KEY` or `GEMINI_KEY` locally. Gateway mode activates when all three `CF_*` vars are set and falls back to direct mode if the gateway fails.
 
+All of these can also be configured from the dashboard: **Integrations → AI Image Creator**.
+
 Add these to your `.env` file (used by the workspace) or directly to your shell profile. See [env-variables.md](env-variables.md) for full reference.
 
 ---
@@ -8852,6 +9379,9 @@ Typical Pixel workflow:
 | `uv: command not found` | uv not installed | `curl -LsSf https://astral.sh/uv/install.sh \| sh` or `brew install uv` |
 | `BYOK key not found` | Wrong alias in CF Provider Keys | Verify aliases: `default` for OpenRouter, `aistudio` for Google AI Studio |
 | Image-only model + reference image | riverflow/flux2/seedream don't accept reference images | Switch to a multimodal model: `gemini` or `gpt5` |
+| `401` on `--provider openai` with a ChatGPT Plus/Codex token | OAuth tokens lack the images scope | Use a **platform** API key (billing on platform.openai.com) |
+| `AI_IMG_CREATOR_OMNIROUTE_KEY not set` | OmniRoute provider selected without a key | Paste the gateway key in **Integrations → AI Image Creator** or the `.env` |
+| 404/error via OmniRoute | Gateway doesn't proxy `/v1/images/generations` | Use `--provider openai` with a platform key instead |
 
 
 ---
diff --git a/docs/plugin-contract.md b/docs/plugin-contract.md
new file mode 100644
index 000000000..9ca0006cf
--- /dev/null
+++ b/docs/plugin-contract.md
@@ -0,0 +1,173 @@
+# EvoNexus Plugin Contract
+
+This document describes the plugin.yaml schema for EvoNexus plugins, including capabilities, validated fields, and host-enforced contracts.
+
+---
+
+## plugin.yaml — Top-Level Fields
+
+```yaml
+schema_version: "1.0"       # required; must be "1.0"
+name: string                 # human-readable name
+slug: string                 # kebab-case identifier; unique across plugins
+version: string              # semver
+description: string
+author: string
+capabilities:                # list of declared capabilities (see below)
+  - capability_name
+```
+
+---
+
+## Capabilities
+
+A capability must be declared in `capabilities:` before the corresponding block is used. Unknown capabilities are rejected at install time.
+
+| Capability | Enum value | Purpose |
+|---|---|---|
+| `readonly_data` | `readonly_data` | Expose plugin data to agent queries |
+| `custom_tools` | `custom_tools` | Register callable tools on agents |
+| `public_pages` | `public_pages` | Token-gated public web pages served by host |
+| `safe_uninstall` | `safe_uninstall` | 3-step uninstall wizard with data preservation |
+
+---
+
+## `public_pages` — Token-Gated Public Pages
+
+Requires `capabilities: [public_pages]`.
+
+```yaml
+public_pages:
+  - id: string                       # unique within this plugin
+    description: string
+    route_prefix: string             # e.g. "orders"; becomes /p/<slug>/orders/<token>
+    token_source:
+      table: string                  # must start with <slug>_ (snake_case)
+      column: string                 # column holding the access token (snake_case)
+    bundle: string                   # must start with ui/public/
+    custom_element_name: string      # e.g. "my-plugin-orders"
+    auth_mode: token                 # only "token" supported in v1
+    rate_limit_per_ip: string        # e.g. "60/minute"
+    audit_action: string             # logged per request
+```
+
+### Routes
+
+| Method | Path | Description |
+|---|---|---|
+| `GET` | `/p/<slug>/<prefix>/<token>` | Serve the HTML bundle (portal entry) |
+| `GET` | `/p/<slug>/<prefix>/<token>/data` | Run a `public_via`-tagged readonly query |
+| `GET` | `/p/<slug>/<prefix>/<token>/public-assets/<path>` | Serve static assets from `ui/public/` |
+
+All three endpoints:
+1. Validate the token parametrically against `token_source.table/column` (SQL: `SELECT 1 FROM <table> WHERE <column> = ?`)
+2. Apply rate limiting (60 req/min on portal, 120 req/min on data)
+3. Emit security headers (CSP, X-Content-Type-Options, Referrer-Policy, HSTS)
+4. Write an audit log row
+
+### Linking a `readonly_data` query to a public page
+
+```yaml
+readonly_data:
+  queries:
+    - name: order_summary
+      sql: "SELECT id, status, total FROM nutri_orders WHERE id = :order_id"
+      public_via: orders          # id of the public_page above
+      bind_token_param: order_id  # parameter name that receives the token value
+```
+
+`public_via` must reference a declared `public_pages[].id`. When set, `bind_token_param` is required; the validated token value is injected at query time.
+
+---
+
+## `safe_uninstall` — 3-Step Uninstall Wizard
+
+Requires `capabilities: [safe_uninstall]`.
+
+```yaml
+safe_uninstall:
+  enabled: bool                     # true = enforce wizard; false = legacy confirm()
+  block_uninstall: bool             # if true, uninstall is unconditionally blocked (409)
+  reason: string                    # displayed in wizard Step 1 (regulatory context)
+
+  user_confirmation:
+    checkbox_label: string          # Step 1 checkbox text
+    typed_phrase: string            # Step 3 required phrase (exact match)
+
+  pre_uninstall_hook:
+    script: string                  # relative path inside plugin dir (e.g. scripts/export.py)
+    output_dir: string              # where the export lands (relative to plugin dir)
+    timeout_seconds: int            # 1–600
+    must_produce_file: bool         # if true, fail if output_dir is empty after hook
+
+  preserved_tables:                 # tables to rename rather than drop
+    - <slug>_tablename              # must be prefixed with <slug>_
+
+  preserved_host_entities:          # host-managed tables with partial row preservation
+    host_table_name:
+      "SQL condition for rows to KEEP"
+                                    # rows matching NOT (condition) are deleted
+
+  block_uninstall: false
+```
+
+### Host enforcement
+
+When `enabled: true`:
+
+1. **Admin role required** — non-admin users receive 403.
+2. **Confirmation phrase** — `DELETE /api/plugins/<slug>` body must include `confirmation_phrase` matching `user_confirmation.typed_phrase`.
+3. **Export verification** — `exported_at` path must be provided and the file must exist.
+4. **ZIP password** — `zip_password` must be present (forwarded to pre-uninstall hook if configured).
+5. **Pre-uninstall hook** — if configured, runs in a sandboxed subprocess with no secret env vars (only `PLUGIN_SLUG`, `PLUGIN_VERSION`, `OUTPUT_DIR`, `DB_READONLY_PATH`). Hook failure aborts uninstall.
+6. **Preserved tables** — tables listed in `preserved_tables` are renamed to `_orphan_<slug>_<tablename>` and recorded in `plugin_orphans`. They are **not dropped**.
+7. **Cascade-DELETE filtering** — for tables listed in `preserved_host_entities`, only rows NOT matching the preservation condition are deleted.
+
+### Force-uninstall escape hatch
+
+Setting `EVONEXUS_ALLOW_FORCE_UNINSTALL=1` in the host environment bypasses all safe_uninstall checks. Every force-uninstall is logged as `plugin_uninstall_force` in the audit table with the acting user's identity. This flag is intended for emergency recovery only.
+
+### Reinstall after safe_uninstall
+
+On reinstall of a plugin with orphaned tables:
+
+1. Host checks `plugin_orphans` for unrecovered rows.
+2. If present, compares `tarball_sha256` of the incoming tarball against `original_sha256` recorded at uninstall time.
+3. SHA256 mismatch → install blocked unless request includes `confirmed_sha256_change: true` (explicit operator acknowledgment).
+4. On SHA256 match (or explicit override): orphan tables are renamed back (`_orphan_<slug>_<table>` → `<table>`) before install.sql runs.
+
+### `plugin_orphans` table (host-managed)
+
+```sql
+CREATE TABLE plugin_orphans (
+    id TEXT PRIMARY KEY,
+    slug TEXT NOT NULL,
+    tablename TEXT NOT NULL,        -- original name (before _orphan_ prefix)
+    orphaned_at TEXT NOT NULL,
+    orphaned_by_user_id INTEGER,
+    original_plugin_version TEXT,
+    original_sha256 TEXT,
+    original_publisher_url TEXT,
+    recovered_at TEXT,              -- NULL until reinstall recovery
+    UNIQUE(slug, tablename)
+);
+```
+
+---
+
+## Security Notes
+
+- Plugin SQL identifiers (`table`, `column`) are validated at install time against `^[a-z][a-z0-9_]*$`. The host never interpolates untrusted input into SQL identifiers.
+- Token values in public-page routes are always bound as SQL parameters (`?`), never interpolated.
+- Pre-uninstall hooks run with a read-only DB copy; no write access and no secret env vars.
+- SQL in `readonly_data.queries` must not reference `_orphan_*` tables (rejected at install via schema validator).
+- Rate limiting is applied at the IP level on all public endpoints (flask-limiter, in-memory storage, single-process).
+
+---
+
+## Changelog
+
+| Version | Change |
+|---|---|
+| v1.0.0 | Initial contract: `readonly_data`, `custom_tools` |
+| v1.1.0 | Added `public_pages` (B2) and `safe_uninstall` (B3) capabilities |
diff --git a/docs/postiz-portainer-swarm.md b/docs/postiz-portainer-swarm.md
new file mode 100644
index 000000000..14cbe4e12
--- /dev/null
+++ b/docs/postiz-portainer-swarm.md
@@ -0,0 +1,326 @@
+# Postiz no Portainer / Docker Swarm
+
+Esta instalação expõe o Postiz em `https://post.workflowapi.com.br` e permite
+que o Omni Nexus em `https://nexus.workflowapi.com.br` publique somente depois
+da aprovação humana do ticket.
+
+## 1. Pré-requisitos na VPS
+
+Confirme no manager do Swarm:
+
+```bash
+df -h /
+free -h
+docker network inspect network_public >/dev/null
+docker service inspect postgres_postgres >/dev/null
+docker service inspect postgres_postgres \
+  --format '{{json .Spec.TaskTemplate.Networks}}'
+```
+
+O último comando precisa mostrar a mesma rede overlay externa usada pelo
+Traefik, normalmente `network_public`. Se o PostgreSQL não estiver nessa rede:
+
+```bash
+docker service update --network-add network_public postgres_postgres
+```
+
+Crie também um registro DNS `A`:
+
+```text
+post.workflowapi.com.br -> IPv4 da VPS
+```
+
+## 2. Criar o banco do Postiz
+
+O PostgreSQL `postgres:14` existente serve para o Postiz. Não use o `pgvector`:
+o Postiz usa Prisma/PostgreSQL comum e não exige a extensão vector. A stack
+inclui o serviço one-shot `postiz-db-bootstrap`, que usa a senha administrativa
+do PostgreSQL compartilhado para criar:
+
+```text
+role: postiz_user
+database: postiz_db_local
+owner: postiz_user
+```
+
+Portanto, ao importar o `postiz-vps.env` preenchido, não é necessário executar
+SQL manualmente. O bootstrap é idempotente e pode rodar novamente em updates.
+
+Como alternativa manual, no repositório do Omni Nexus, no manager:
+
+No repositório do Omni Nexus, no manager:
+
+```bash
+export POSTIZ_DB_PASSWORD="$(openssl rand -hex 24)"
+export POSTGRES_ADMIN_PASSWORD='<senha do role postgres existente>'
+sudo -E bash scripts/bootstrap_postiz_database.sh
+```
+
+Guarde o valor de `POSTIZ_DB_PASSWORD`; ele precisa ser exatamente o mesmo no
+Portainer. O script cria apenas `postiz_user` e `postiz_db_local`. O Temporal
+continua com PostgreSQL dedicado para evitar misturar lifecycle e migrations.
+
+Se o serviço ou usuário administrativo tiver outro nome:
+
+```bash
+POSTGRES_SERVICE_NAME=postgres_postgres \
+POSTGRES_ADMIN_USER=postgres \
+POSTIZ_DB_PASSWORD="$POSTIZ_DB_PASSWORD" \
+sudo -E bash scripts/bootstrap_postiz_database.sh
+```
+
+## 3. Criar a stack no Portainer
+
+1. Abra **Stacks → Add stack**.
+2. Nome sugerido: `postiz`.
+3. Use **Web editor** ou envie `postiz-vps.stack.yml`.
+4. Cadastre estas variáveis na seção **Environment variables**:
+
+| Variável | Valor |
+|---|---|
+| `POSTIZ_DOMAIN` | `post.workflowapi.com.br` |
+| `POSTIZ_DATABASE_HOST` | `postgres_postgres` |
+| `POSTGRES_ADMIN_PASSWORD` | senha real do role `postgres` compartilhado |
+| `POSTIZ_DB_PASSWORD` | valor criado no passo 2 |
+| `POSTIZ_JWT_SECRET` | saída de `openssl rand -base64 48` |
+| `TEMPORAL_DB_PASSWORD` | saída de `openssl rand -hex 24` |
+| `POSTIZ_DISABLE_REGISTRATION` | `false` no primeiro acesso |
+| `FACEBOOK_APP_ID` | App ID da Meta para Instagram/Facebook |
+| `FACEBOOK_APP_SECRET` | App Secret da Meta |
+| `LINKEDIN_CLIENT_ID` | Client ID do app LinkedIn |
+| `LINKEDIN_CLIENT_SECRET` | Client Secret do app LinkedIn |
+
+Depois clique em **Deploy the stack**.
+
+Neste workspace também pode existir `postiz-vps.env`, já populado com segredos
+locais e credenciais sociais reutilizadas do Omni Nexus. Esse arquivo é
+gitignored e tem permissão `0600`; cole-o no **Advanced mode** do Portainer em
+vez de usar o `.example`. O `.example` nunca contém segredos reais.
+
+O stack cria:
+
+- bootstrap one-shot do banco compartilhado;
+- Postiz;
+- Redis dedicado;
+- PostgreSQL dedicado do Temporal;
+- Temporal Server;
+- Elasticsearch de visibility;
+- Temporal UI apenas na rede interna, sem rota pública.
+
+## 4. Primeiro acesso e OAuth
+
+No primeiro start, a imagem oficial executa `pnpm run prisma-db-push` antes de
+subir os processos. Esse comando aplica o schema Prisma inicial no banco vazio;
+não existe uma migration SQL separada para você executar. Em upgrades, o mesmo
+startup sincroniza o schema novamente.
+
+O botão Google reutiliza `YOUTUBE_CLIENT_ID` e `YOUTUBE_CLIENT_SECRET`. No
+Google Cloud Console, adicione:
+
+```text
+Authorized JavaScript origin:
+https://post.workflowapi.com.br
+
+Authorized redirect URI:
+https://post.workflowapi.com.br/integrations/social/youtube
+```
+
+SMTP no Postiz usa `EMAIL_PROVIDER=nodemailer` e as variáveis `EMAIL_*`. As
+variáveis `N8N_SMTP_*` não são lidas pelo Postiz. Com SMTP habilitado, novas
+contas locais precisam abrir o link de ativação recebido por e-mail.
+
+Se `/auth` abrir, mas `/api/auth/can-register` retornar Cloudflare 502, não é
+falha de SMTP: o Next.js/frontend está vivo, porém o backend NestJS na porta
+interna 3000 não iniciou. Verifique, nesta ordem:
+
+```bash
+docker service ps postiz_postiz --no-trunc
+docker service logs --tail 300 postiz_postiz
+docker service logs --tail 200 postiz_temporal
+docker service logs --tail 200 postiz_temporal-postgresql
+docker service logs --tail 200 postiz_temporal-elasticsearch
+```
+
+Erros contendo `P1001`, `P1000` ou `prisma` apontam para banco/credenciais.
+Erros contendo `ECONNREFUSED temporal:7233`, `Name resolution failed for target
+dns:temporal:7233` ou `failed to lookup address information` apontam para o DNS
+interno/serviço do Temporal. O SMTP e o botão Google só entram depois que
+`/api/auth/can-register` já está respondendo.
+
+A stack declara aliases explícitos para `temporal`, `temporal-postgresql`,
+`temporal-elasticsearch` e `postiz-redis` na rede overlay interna. Depois de
+alterar essa parte, não use apenas **Update the stack** com uma definição antiga:
+substitua integralmente o conteúdo pelo `postiz-vps.stack.yml` atual e faça o
+redeploy. Em seguida, force a recriação das tasks:
+
+```bash
+docker service update \
+  --health-cmd 'timeout 5 bash -c "</dev/tcp/$(hostname)/7233"' \
+  --health-interval 15s \
+  --health-timeout 6s \
+  --health-retries 10 \
+  --health-start-period 120s \
+  postiz_temporal
+docker service ps postiz_temporal --no-trunc
+```
+
+O `auto-setup` vincula a porta `7233` ao IP da própria task, não ao endereço
+`127.0.0.1`. Por isso, o healthcheck usa `$(hostname)`, que resolve para o IP
+atual do container. O primeiro comando acima também substitui um healthcheck
+antigo diretamente no serviço, inicia uma nova atualização e retoma um update
+que tenha sido pausado; não execute outro `--force` logo depois.
+
+Não force PostgreSQL, Elasticsearch e Temporal ao mesmo tempo. Reiniciar as
+dependências enquanto o Temporal está conectado provoca perda temporária do
+banco, desligamento dos shards e erros como `Not enough hosts to serve the
+request`. Após o redeploy da stack, aguarde `postiz_temporal-postgresql` e
+`postiz_temporal-elasticsearch` ficarem estáveis; então force somente o
+Temporal e espere a task permanecer em `Running` e saudável.
+
+Quando o Temporal estiver estável, confirme o alias pela task atual do Postiz e
+só então recrie o Postiz:
+
+```bash
+CID=$(docker ps \
+  --filter label=com.docker.swarm.service.name=postiz_postiz \
+  -q | head -1)
+
+docker exec "$CID" getent hosts temporal
+docker exec "$CID" getent hosts temporal-postgresql
+docker exec "$CID" getent hosts temporal-elasticsearch
+docker service update --force postiz_postiz
+```
+
+Os três comandos precisam retornar endereços da rede overlay. Se `temporal`
+ainda não resolver, confira se Postiz e Temporal estão conectados à mesma rede:
+
+```bash
+docker network inspect postiz_postiz_internal
+docker service inspect postiz_postiz \
+  --format '{{json .Spec.TaskTemplate.Networks}}'
+docker service inspect postiz_temporal \
+  --format '{{json .Spec.TaskTemplate.Networks}}'
+```
+
+Abra `https://post.workflowapi.com.br`, crie a conta administrativa e conecte
+Instagram e LinkedIn.
+
+Cadastre nos provedores OAuth os callbacks exibidos pela própria UI do Postiz.
+Como regra, todos devem usar o domínio público HTTPS do Postiz, nunca
+`localhost`, IP da VPS ou `nexus.workflowapi.com.br`.
+
+Callbacks usados pela versão atual do Postiz:
+
+```text
+https://post.workflowapi.com.br/integrations/social/instagram
+https://post.workflowapi.com.br/integrations/social/facebook
+https://post.workflowapi.com.br/integrations/social/linkedin
+```
+
+Depois do primeiro usuário, altere no Portainer:
+
+```text
+POSTIZ_DISABLE_REGISTRATION=true
+```
+
+e atualize a stack.
+
+## 5. Criar a API key e localizar integrações
+
+No Postiz, abra **Settings → Public API**, gere/rotacione a API key e teste:
+
+```bash
+export POSTIZ_URL=https://post.workflowapi.com.br
+export POSTIZ_API_KEY='SUA_CHAVE'
+
+curl -fsS \
+  -H "Authorization: $POSTIZ_API_KEY" \
+  "$POSTIZ_URL/public/v1/integrations"
+```
+
+Copie os `id` das integrações cujo `identifier` seja `instagram` e `linkedin`.
+
+## 6. Conectar o Omni Nexus ao Postiz
+
+Duas formas — escolha uma:
+
+**Via UI (sem Portainer, recomendado):** abra `nexus.workflowapi.com.br →
+Integrações`. Os cards **Postiz** e **MinIO / S3 Media** já aparecem (são
+integrações de primeira classe). Preencha os campos e salve — a UI grava no
+`.env` do volume e aplica na hora (`load_dotenv override` + `os.environ`), sem
+mexer no Portainer nem reiniciar.
+
+**Via Portainer (durável entre redeploys):** no serviço `evonexus_dashboard`:
+
+```text
+POSTIZ_URL=https://post.workflowapi.com.br
+POSTIZ_API_KEY=<API key do Postiz>
+POSTIZ_INTEGRATION_INSTAGRAM_ID=<id retornado pela API>
+POSTIZ_INTEGRATION_LINKEDIN_ID=<id retornado pela API>
+POSTIZ_ALLOWED_MEDIA_HOSTS=s3.workflowapi.com.br,post.workflowapi.com.br
+POSTIZ_PUBLISH_TIMEOUT_SECONDS=90
+POSTIZ_PUBLISH_POLL_SECONDS=3
+```
+
+No serviço `evonexus_telegram`, configure:
+
+```text
+APPROVAL_DECISION_TIMEOUT_SECONDS=105
+```
+
+`POSTIZ_API_KEY` deve existir somente no dashboard. O código remove essa chave
+do ambiente dos subprocessos dos agentes.
+
+### MinIO / S3 para mídia (Opção A — agentes fazem upload)
+
+O Instagram exige uma URL pública de mídia. Os agentes publicadores geram a
+imagem e sobem no bucket público via o skill `int-minio`, depois passam a URL
+em `publish_media`. Configure (UI ou Portainer) no dashboard **e** nos serviços
+`evonexus_telegram` / `evonexus_scheduler` (qualquer processo que dispara
+agente):
+
+```text
+MINIO_ENDPOINT=https://s3.workflowapi.com.br
+MINIO_ACCESS_KEY=<access key>
+MINIO_SECRET_KEY=<secret key>
+MINIO_BUCKET=post
+MINIO_PUBLIC_BASE=https://s3.workflowapi.com.br
+```
+
+O bucket `post` precisa ter **leitura pública** (bucket policy — o "set
+public"). Ao contrário do `POSTIZ_API_KEY`, o `MINIO_SECRET_KEY` **fica
+disponível aos agentes** (eles precisam pra upload). Isso não fura o gate: subir
+imagem num bucket não é publicar — o post no Instagram ainda exige sua aprovação
+no Telegram. Garanta que `s3.workflowapi.com.br` esteja em
+`POSTIZ_ALLOWED_MEDIA_HOSTS`.
+
+## 7. Teste end-to-end
+
+1. Crie um ticket atribuído a um agente publicador.
+2. O outcome deve conter `publish_intent=true`, `publish_target`,
+   `publish_content` e, para Instagram, `publish_media`.
+3. Aprove pelo Telegram.
+4. O dashboard envia `POST /public/v1/posts` ao Postiz.
+5. O ticket só vira `resolved` quando `GET /public/v1/posts` confirmar
+   `state=PUBLISHED` para o `postId` criado.
+
+Se o Postiz responder `QUEUE`, `ERROR` ou não confirmar no timeout, o ticket
+volta para `in_progress`; ele nunca é marcado como publicado por suposição.
+
+## Diagnóstico rápido
+
+```bash
+docker service ls | grep -E 'postiz|temporal'
+docker service ps postiz_postiz --no-trunc
+docker service logs -f --tail 200 postiz_postiz
+docker service logs -f --tail 200 postiz_temporal
+docker service logs -f --tail 200 postiz_temporal-elasticsearch
+```
+
+Se o Postiz não alcançar `postgres_postgres`, confira se ambos os serviços
+estão conectados à `network_public` e se o DNS interno do Swarm resolve:
+
+```bash
+docker run --rm --network network_public postgres:16-alpine \
+  pg_isready -h postgres_postgres -p 5432
+```
diff --git a/docs/reference/env-variables.md b/docs/reference/env-variables.md
index e378d78a3..2d202f5a1 100644
--- a/docs/reference/env-variables.md
+++ b/docs/reference/env-variables.md
@@ -134,6 +134,8 @@ Social media accounts are managed via the dashboard Integrations page after OAut
 SOCIAL_{PLATFORM}_{N}_{FIELD}
 ```
 
+**Where they live:** `SOCIAL_*` keys are written to `config/social.env` — a dedicated, gitignored token store (on the VPS: the `evonexus_config` volume, shared between dashboard and scheduler). This matters because some platforms (X) rotate refresh tokens on every refresh, so the store must be writable and persistent. The root `.env` and process env are still read as fallbacks; `SOCIAL_ENV_PATH` overrides the store location. See [X / Twitter](../integrations/x-twitter.md#how-tokens-are-stored) for the precedence rules.
+
 Examples:
 
 ```env
@@ -200,6 +202,10 @@ Configure via the dashboard at `/knowledge/settings` — the provider is locked
 | `AI_IMG_CREATOR_CF_TOKEN` | Gateway mode | Gateway auth token (from gateway Settings > Authentication) |
 | `AI_IMG_CREATOR_OPENROUTER_KEY` | Direct OpenRouter | OpenRouter API key (starts with `sk-or-...`) |
 | `AI_IMG_CREATOR_GEMINI_KEY` | Direct Google | Google AI Studio API key (starts with `AI...`) |
+| `AI_IMG_CREATOR_OPENAI_KEY` | OpenAI Images API | Platform key (billing on platform.openai.com) for `gpt-image-2`. Falls back to `OPENAI_API_KEY`. ChatGPT Plus/Codex OAuth tokens cannot generate images |
+| `AI_IMG_CREATOR_OMNIROUTE_KEY` | OmniRoute gateway | Key of the self-hosted OmniRoute gateway (`--provider omniroute`) |
+| `AI_IMG_CREATOR_OMNIROUTE_BASE_URL` | Optional | OmniRoute base URL — defaults to `http://omniroute:20128/v1` (VPS stack alias) |
+| `NVIDIA_API_KEY` | NVIDIA NIM | Enables `--provider nvidia` (FLUX models, free tier) |
 
 Gateway mode activates when all three `AI_IMG_CREATOR_CF_*` vars are set. Falls back to direct mode if gateway fails. You only need one provider configured (either Cloudflare or at least one direct key).
 
@@ -207,3 +213,7 @@ Gateway mode activates when all three `AI_IMG_CREATOR_CF_*` vars are set. Falls
 - **Cloudflare Gateway**: [dash.cloudflare.com](https://dash.cloudflare.com) > AI > AI Gateway > Create Gateway. See [docs/skills/ai-image-creator.md](../skills/ai-image-creator.md) for full setup.
 - **OpenRouter key**: [openrouter.ai/keys](https://openrouter.ai/keys) > Create Key.
 - **Google AI Studio key**: [aistudio.google.com/apikey](https://aistudio.google.com/apikey) > Create API Key.
+- **OpenAI platform key**: [platform.openai.com/api-keys](https://platform.openai.com/api-keys) > Create — must be a billing-enabled platform key.
+- **OmniRoute key**: from your self-hosted OmniRoute instance (Dashboard → API Keys).
+
+All of these can be pasted in the dashboard card **Integrations → AI Image Creator**.
diff --git a/docs/skills/ai-image-creator.md b/docs/skills/ai-image-creator.md
index 7759ba775..5ca3051d7 100644
--- a/docs/skills/ai-image-creator.md
+++ b/docs/skills/ai-image-creator.md
@@ -1,6 +1,6 @@
 # AI Image Creator
 
-Generate PNG images using AI models — Gemini, FLUX.2, Riverflow, SeedDream, GPT-5 Image — routed through Cloudflare AI Gateway (BYOK) or directly via OpenRouter/Google AI Studio. Also analyzes and describes existing images using multimodal vision.
+Generate PNG images using AI models — Gemini, FLUX.2, Riverflow, SeedDream, GPT-5 Image, GPT Image 2 — routed through Cloudflare AI Gateway (BYOK), directly via OpenRouter/Google AI Studio/NVIDIA NIM/OpenAI, or through the self-hosted OmniRoute gateway. Also analyzes and describes existing images using multimodal vision.
 
 **Skill name:** `ai-image-creator`
 **Trigger:** "generate an image", "create a PNG", "make an icon", "describe this image", "analyze this image"
@@ -18,6 +18,10 @@ The `ai-image-creator` skill wraps a Python script (`generate-image.py`) that ca
 | `flux2` | `black-forest-labs/flux.2-max` | OpenRouter | Image-only |
 | `seedream` | `bytedance-seed/seedream-4.5` | OpenRouter | Image-only |
 | `gpt5` | `openai/gpt-5-image` | OpenRouter | Multimodal |
+| `image2` | `gpt-image-2` | OpenAI Images API / OmniRoute | Image-only |
+| `nvidia-flux2-klein-4b` | `black-forest-labs/flux.2-klein-4b` | NVIDIA NIM | Image-only |
+| `nvidia-flux-dev` | `black-forest-labs/flux.1-dev` | NVIDIA NIM | Image-only |
+| `nvidia-flux-schnell` | `black-forest-labs/flux.1-schnell` | NVIDIA NIM | Image-only |
 
 **Multimodal** models (gemini, gpt5) accept reference images for editing/style transfer and can analyze existing images. **Image-only** models (riverflow, flux2, seedream) generate from text prompts only.
 
@@ -122,18 +126,53 @@ export AI_IMG_CREATOR_GEMINI_KEY="AIyour-key-here"
 
 ---
 
+## Setup Option D: OpenAI Images API (gpt-image-2)
+
+Direct access to OpenAI's `gpt-image-2` via the Images API. Excellent text rendering (including Portuguese accents) — the best pick for text-critical art.
+
+1. Get a **platform API key** at [platform.openai.com](https://platform.openai.com) (billing required). **ChatGPT Plus / Codex OAuth tokens cannot generate images** — they lack the images scope and return 401.
+2. Set the key (or paste it in the dashboard **Integrations → AI Image Creator** card):
+
+```bash
+export AI_IMG_CREATOR_OPENAI_KEY="sk-..."   # falls back to OPENAI_API_KEY
+```
+
+3. Use `--provider openai` (or just say "image2" — the keyword auto-selects the provider). `-a` maps to the supported sizes (1024x1024, 1536x1024, 1024x1536); `-r` and `--analyze` are not supported here.
+
+---
+
+## Setup Option E: OmniRoute Gateway (self-hosted)
+
+Routes the same `gpt-image-2` Images API call through the self-hosted [OmniRoute](../dashboard/providers.md) gateway instead of api.openai.com. Only the key is needed — the base URL defaults to the VPS stack alias `http://omniroute:20128/v1`.
+
+```bash
+export AI_IMG_CREATOR_OMNIROUTE_KEY="your-omniroute-key"
+# outside the Swarm stack, point at your gateway:
+export AI_IMG_CREATOR_OMNIROUTE_BASE_URL="https://your-gateway/v1"   # optional
+```
+
+Use `--provider omniroute`. The gateway must proxy `POST /v1/images/generations`.
+
+---
+
 ## Environment Variables Reference
 
-| Variable | Option A | Option B | Option C | Description |
-|----------|----------|----------|----------|-------------|
-| `AI_IMG_CREATOR_CF_ACCOUNT_ID` | Required | — | — | Cloudflare account ID |
-| `AI_IMG_CREATOR_CF_GATEWAY_ID` | Required | — | — | AI Gateway name |
-| `AI_IMG_CREATOR_CF_TOKEN` | Required | — | — | Gateway auth token |
-| `AI_IMG_CREATOR_OPENROUTER_KEY` | Optional* | Required | — | OpenRouter API key |
-| `AI_IMG_CREATOR_GEMINI_KEY` | Optional* | — | Required | Google AI Studio API key |
+| Variable | Option A | Option B | Option C | Option D | Option E | Description |
+|----------|----------|----------|----------|----------|----------|-------------|
+| `AI_IMG_CREATOR_CF_ACCOUNT_ID` | Required | — | — | — | — | Cloudflare account ID |
+| `AI_IMG_CREATOR_CF_GATEWAY_ID` | Required | — | — | — | — | AI Gateway name |
+| `AI_IMG_CREATOR_CF_TOKEN` | Required | — | — | — | — | Gateway auth token |
+| `AI_IMG_CREATOR_OPENROUTER_KEY` | Optional* | Required | — | — | — | OpenRouter API key |
+| `AI_IMG_CREATOR_GEMINI_KEY` | Optional* | — | Required | — | — | Google AI Studio API key |
+| `AI_IMG_CREATOR_OPENAI_KEY` | — | — | — | Required | — | OpenAI platform key for gpt-image-2 (falls back to `OPENAI_API_KEY`) |
+| `AI_IMG_CREATOR_OMNIROUTE_KEY` | — | — | — | — | Required | OmniRoute gateway key |
+| `AI_IMG_CREATOR_OMNIROUTE_BASE_URL` | — | — | — | — | Optional | Gateway base URL (default `http://omniroute:20128/v1`) |
+| `NVIDIA_API_KEY` | — | — | — | — | — | Enables `--provider nvidia` (FLUX models, free tier) |
 
 *For Option A (gateway), provider keys are stored in Cloudflare as BYOK — you do not need to set `OPENROUTER_KEY` or `GEMINI_KEY` locally. Gateway mode activates when all three `CF_*` vars are set and falls back to direct mode if the gateway fails.
 
+All of these can also be configured from the dashboard: **Integrations → AI Image Creator**.
+
 Add these to your `.env` file (used by the workspace) or directly to your shell profile. See [env-variables.md](env-variables.md) for full reference.
 
 ---
@@ -225,3 +264,6 @@ Typical Pixel workflow:
 | `uv: command not found` | uv not installed | `curl -LsSf https://astral.sh/uv/install.sh \| sh` or `brew install uv` |
 | `BYOK key not found` | Wrong alias in CF Provider Keys | Verify aliases: `default` for OpenRouter, `aistudio` for Google AI Studio |
 | Image-only model + reference image | riverflow/flux2/seedream don't accept reference images | Switch to a multimodal model: `gemini` or `gpt5` |
+| `401` on `--provider openai` with a ChatGPT Plus/Codex token | OAuth tokens lack the images scope | Use a **platform** API key (billing on platform.openai.com) |
+| `AI_IMG_CREATOR_OMNIROUTE_KEY not set` | OmniRoute provider selected without a key | Paste the gateway key in **Integrations → AI Image Creator** or the `.env` |
+| 404/error via OmniRoute | Gateway doesn't proxy `/v1/images/generations` | Use `--provider openai` with a platform key instead |
diff --git a/entrypoint.sh b/entrypoint.sh
index eb1e88706..ff7610d18 100755
--- a/entrypoint.sh
+++ b/entrypoint.sh
@@ -60,6 +60,34 @@ if [ -d "$DEFAULTS_DIR" ]; then
     done
 fi
 
+# --- 2b. Seed/refresh /workspace/.claude from image defaults ---------------
+# /workspace/.claude may be a named volume (persists custom-* skills/agents/
+# commands and plugin-* artifacts across restarts). Built-ins are re-copied
+# from the image on every boot so upgrades propagate; anything not shipped
+# in the image (custom-*, plugin-*, settings.local.json) is left untouched.
+# agent-memory is not in the stash — it has its own volume.
+if [ -d "$DEFAULTS_DIR/claude" ]; then
+    mkdir -p /workspace/.claude
+    cp -a "$DEFAULTS_DIR/claude/." /workspace/.claude/ 2>/dev/null || true
+fi
+
+# --- 2c. Ensure per-agent memory dirs exist ---------------------------------
+# agent-memory is its own volume and starts completely empty on first deploy
+# (or if it was created before an agent existed) — no per-agent subfolder
+# exists until something writes there. Agents are instructed to read/write
+# files like .claude/agent-memory/{slug}/_improvements.md at the start of
+# every session; a missing directory turns that into repeated tool failures
+# and trips the harness's "Stopped: repeated tool failures detected" gate.
+# Re-run on every boot (idempotent) so it also heals volumes already broken
+# by this gap, not just fresh ones.
+if [ -d /workspace/.claude/agents ]; then
+    for agent_file in /workspace/.claude/agents/*.md; do
+        [ -f "$agent_file" ] || continue
+        slug="$(basename "$agent_file" .md)"
+        mkdir -p "/workspace/.claude/agent-memory/$slug"
+    done
+fi
+
 # --- 3. Ensure EVONEXUS_SECRET_KEY exists (Flask session signing) ----------
 # Without this, Flask invalidates every session on restart. We generate it
 # once on first boot and persist it in the same .env the UI edits.
@@ -107,11 +135,45 @@ fi
 
 # --- 5. Source .env (UI-configured values become env vars) -----------------
 # Using `set -a` so every variable assigned here is auto-exported.
+#
+# Confirmed live 2026-07-14: .env.example ships secrets meant to come from
+# the Swarm stack's `environment:` section (e.g. DASHBOARD_API_TOKEN=, no
+# default) as blank lines — first boot copies that verbatim into
+# $CONFIG_DIR/.env (step 2 above). Docker sets the real value on the
+# container BEFORE this script runs, but sourcing .env here with `set -a`
+# blindly re-exports every line in it, including blank ones, silently
+# clobbering correct values with an empty string. DASHBOARD_API_TOKEN doing
+# this broke every Bearer-token API call with "Authentication required" —
+# not because the token was wrong, but because the server-side value had
+# already been erased by the time Flask read it, while `docker exec ...
+# printenv` (a fresh process, never ran this script) still showed the real
+# one, which made it look like a token mismatch instead of an overwrite.
+# DASHBOARD_API_USER has the same blank-in-.env.example /
+# set-in-stack shape (lower severity — it has a documented "first admin"
+# fallback — but the same silent-clobber risk if the stack ever pins a
+# specific user). Generalized fix: snapshot every exported var Docker may
+# have injected, source .env, then restore any that ended up empty when
+# they weren't before — non-empty file values still win (so the
+# Providers/Settings UI can update them), only genuinely empty ones are
+# prevented from erasing a real value. Covers the whole class, not just
+# the two instances found so far.
+declare -A _PRE_ENV
+while IFS= read -r _name; do
+    _PRE_ENV["$_name"]="${!_name}"
+done < <(compgen -e)
+
 set -a
 # shellcheck disable=SC1091
 . "$CONFIG_DIR/.env" 2>/dev/null || true
 set +a
 
+for _name in "${!_PRE_ENV[@]}"; do
+    if [ -z "${!_name:-}" ] && [ -n "${_PRE_ENV[$_name]}" ]; then
+        export "$_name=${_PRE_ENV[$_name]}"
+    fi
+done
+unset _PRE_ENV _name
+
 # --- 6. Optional: _FILE env vars (explicit Docker Secrets pattern) ---------
 for file_var in $(compgen -A variable | grep -E '_FILE$' || true); do
     var="${file_var%_FILE}"
@@ -137,17 +199,102 @@ fi
 # a key. Instead of crash-looping, we wait and re-read .env every 30s. When
 # the user saves the key in dashboard → Providers, it lands in .env and
 # we pick it up on the next iteration — no manual restart needed.
+#
+# Confirmed live 2026-07-14: this gate only ever checked ANTHROPIC_API_KEY,
+# hardcoded — a workspace whose active_provider is opencode/openclaude
+# (credentials live in config/providers.json's per-provider env_vars, not a
+# top-level ANTHROPIC_API_KEY) waits here FOREVER, even with a fully working
+# non-Anthropic provider configured. scheduler.py never even starts, so no
+# routine — core or custom — ever runs; this was mistaken for a
+# config/routines.yaml bug before the entrypoint log revealed the real
+# blocker. Fix: also unblock when config/providers.json's active provider
+# has a real (non-empty, non-"[REDACTED]") credential — same check
+# _get_provider_config() in ADWs/runner.py already does at call time.
+_has_usable_provider() {
+    [ -n "${ANTHROPIC_API_KEY:-}" ] && return 0
+    _PYBIN="/workspace/.venv/bin/python3"
+    [ -x "$_PYBIN" ] || _PYBIN="$(command -v python3 || true)"
+    [ -n "$_PYBIN" ] || return 1
+    "$_PYBIN" -c "
+import json, sys
+try:
+    cfg = json.load(open('$CONFIG_DIR/providers.json'))
+except Exception:
+    sys.exit(1)
+active = cfg.get('active_provider')
+provider = (cfg.get('providers') or {}).get(active) or {}
+env_vars = provider.get('env_vars') or {}
+key = env_vars.get('OPENAI_API_KEY') or env_vars.get('ANTHROPIC_API_KEY') or ''
+sys.exit(0 if key and key != '[REDACTED]' else 1)
+" 2>/dev/null
+}
+
 if [ "${REQUIRE_ANTHROPIC_KEY:-0}" = "1" ]; then
-    while [ -z "${ANTHROPIC_API_KEY:-}" ]; do
-        echo "[$(date -Is)] waiting for ANTHROPIC_API_KEY — configure via dashboard → Providers" >&2
+    while ! _has_usable_provider; do
+        echo "[$(date -Is)] waiting for a usable provider (ANTHROPIC_API_KEY or an active provider with a real key in Providers) — configure via dashboard → Providers" >&2
         sleep 30
         set -a
         # shellcheck disable=SC1091
         . "$CONFIG_DIR/.env" 2>/dev/null || true
         set +a
     done
-    echo "[$(date -Is)] ANTHROPIC_API_KEY detected — starting $*" >&2
+    echo "[$(date -Is)] usable provider detected — starting $*" >&2
+fi
+
+# --- 8b. Claude CLI headless bootstrap --------------------------------------
+# Heartbeats/routines invoke `claude --print --dangerously-skip-permissions`
+# as root. Two first-run gates block that in a fresh container:
+#   1) /root/.claude.json lives in the container layer (wiped on redeploy);
+#      without the trust flags for /workspace the CLI ignores the project's
+#      .claude/settings.json permissions and fails with "this workspace has
+#      not been trusted".
+#   2) Claude Code refuses --dangerously-skip-permissions as root unless
+#      IS_SANDBOX=1 signals a containerized environment.
+# Same fix as start-dashboard.sh / telegram_swarm_entry.sh.
+export IS_SANDBOX="${IS_SANDBOX:-1}"
+# Restore the latest backup BEFORE seeding/patching. The main config is a
+# sibling of /root/.claude/ (the volume) and is wiped on redeploy; blind
+# seeding here would shadow the backup restore downstream (telegram wrapper /
+# start-dashboard check "[ ! -f ]") and lose account state — e.g. the
+# channels feature gate — that only the backup carries.
+if [ ! -f /root/.claude.json ]; then
+    _latest_backup=$(ls -t /root/.claude/backups/.claude.json.backup.* 2>/dev/null | head -n1 || true)
+    if [ -n "${_latest_backup:-}" ] && [ -f "$_latest_backup" ]; then
+        echo "[$(date -Is)] restoring /root/.claude.json from $_latest_backup" >&2
+        cp "$_latest_backup" /root/.claude.json
+    fi
+fi
+unset _latest_backup
+_PYBIN="/workspace/.venv/bin/python3"
+[ -x "$_PYBIN" ] || _PYBIN="$(command -v python3 || true)"
+if [ -n "$_PYBIN" ]; then
+    "$_PYBIN" - <<'EOF' || echo "[$(date -Is)] WARNING: could not patch /root/.claude.json flags" >&2
+import json, os
+
+path = "/root/.claude.json"
+cfg = {}
+if os.path.exists(path):
+    try:
+        with open(path) as f:
+            cfg = json.load(f)
+    except Exception:
+        cfg = {}
+
+cfg.setdefault("theme", "dark")
+cfg["hasCompletedOnboarding"] = True
+cfg["hasSeenWelcome"] = True
+cfg["bypassPermissionsModeAccepted"] = True
+project = cfg.setdefault("projects", {}).setdefault("/workspace", {})
+project["hasTrustDialogAccepted"] = True
+project["hasCompletedProjectOnboarding"] = True
+
+with open(path, "w") as f:
+    json.dump(cfg, f, indent=2)
+EOF
+else
+    echo "[$(date -Is)] WARNING: no python3 — /root/.claude.json not patched" >&2
 fi
+unset _PYBIN
 
 # --- 9. Hand off to the actual process -------------------------------------
 exec "$@"
diff --git a/evonexus-vps.stack.example.yml b/evonexus-vps.stack.example.yml
new file mode 100644
index 000000000..c4d51838b
--- /dev/null
+++ b/evonexus-vps.stack.example.yml
@@ -0,0 +1,391 @@
+## ============================================================================
+## EvoNexus — Stack de exemplo para VPS / Docker Swarm (Portainer)
+##
+## Pré-requisitos na VPS:
+##   * Docker Swarm inicializado (docker swarm init)
+##   * Traefik já rodando e conectado à rede externa `network_public`
+##     - entrypoint TLS: websecure
+##     - cert resolver: letsencryptresolver
+##   * Um domínio apontando para a VPS (A record)
+##
+## Como usar (Portainer → Stacks → Add stack → Web editor):
+##   1. Cole este arquivo.
+##   2. Preencha as variáveis de ambiente da stack (aba "Environment variables"):
+##        EVONEXUS_DOMAIN      → seu domínio (ex.: nexus.seudominio.com.br)
+##        DASHBOARD_API_TOKEN  → gere com: openssl rand -base64 32
+##      As SMTP_* são opcionais (notificações por email).
+##   3. Deploy. No primeiro boot, acesse https://SEU_DOMINIO e configure
+##      providers (NVIDIA/OpenRouter/Codex...), integrações e tokens pela UI —
+##      esta stack não contém nenhuma credencial de propósito.
+##
+## Telegram (opcional):
+##   * Crie um bot no @BotFather e salve o token em dashboard → Integrations
+##     (TELEGRAM_BOT_TOKEN) e seu chat id (TELEGRAM_CHAT_ID).
+##   * TELEGRAM_MODE=provider → o bot responde pelo provider ativo do
+##     dashboard (NVIDIA, OmniRouter, OpenRouter, Codex...). O modo
+##     `channels` (nativo do Claude Code) exige login claude.ai no container
+##     (`docker exec -it <cid> claude /login`) e NÃO funciona via providers
+##     OpenAI-compatíveis.
+##   * Cada deploy precisa do SEU próprio bot/token — dois pollers no mesmo
+##     token brigam (HTTP 409) e um rouba as mensagens do outro.
+## ============================================================================
+version: "3.7"
+
+services:
+
+  evonexus_dashboard:
+    image: excarplex/evo-nexus-dashboard:latest
+
+    volumes:
+      - evonexus_config:/workspace/config
+      - evonexus_workspace:/workspace/workspace
+      - evonexus_dashboard_data:/workspace/dashboard/data
+      - evonexus_memory:/workspace/memory
+      - evonexus_backups:/workspace/backups
+      - evonexus_adw_logs:/workspace/ADWs/logs
+      - evonexus_claude_workspace:/workspace/.claude
+      - evonexus_agent_memory:/workspace/.claude/agent-memory
+      - evonexus_claude_auth:/root/.claude
+      - evonexus_codex_auth:/root/.codex
+      - evonexus_openclaude_auth:/root/.openclaude
+      ## social-media-production: same volume the media-worker renders into.
+      ## The dashboard needs read access to serve /api/media/jobs/{id}/video
+      ## and to upload the finished MP4 directly to Postiz — it never
+      ## renders here itself (see Dockerfile.media-worker).
+      - evonexus_media:/workspace/media
+
+    networks:
+      network_public:
+        # Alias fixo para os outros serviços acharem a API independente do
+        # nome que você der à stack no Portainer.
+        aliases:
+          - evonexus-dashboard
+
+    environment:
+      - DASHBOARD_API_TOKEN=${DASHBOARD_API_TOKEN}
+      - DASHBOARD_API_USER=${DASHBOARD_API_USER:-admin}
+      ## Postiz is called only by the dashboard after human approval.
+      - POSTIZ_URL=${POSTIZ_URL}
+      - POSTIZ_API_KEY=${POSTIZ_API_KEY}
+      - POSTIZ_INTEGRATION_INSTAGRAM_ID=${POSTIZ_INTEGRATION_INSTAGRAM_ID}
+      - POSTIZ_INTEGRATION_YOUTUBE_ID=${POSTIZ_INTEGRATION_YOUTUBE_ID}
+      - POSTIZ_INTEGRATION_LINKEDIN_ID=${POSTIZ_INTEGRATION_LINKEDIN_ID}
+      - POSTIZ_INTEGRATION_TIKTOK_ID=${POSTIZ_INTEGRATION_TIKTOK_ID}
+      - POSTIZ_ALLOWED_MEDIA_HOSTS=${POSTIZ_ALLOWED_MEDIA_HOSTS}
+      - POSTIZ_REQUEST_TIMEOUT_SECONDS=${POSTIZ_REQUEST_TIMEOUT_SECONDS:-120}
+      - POSTIZ_UPLOAD_TIMEOUT_SECONDS=${POSTIZ_UPLOAD_TIMEOUT_SECONDS:-900}
+      - POSTIZ_PUBLISH_TIMEOUT_SECONDS=${POSTIZ_PUBLISH_TIMEOUT_SECONDS:-90}
+      - POSTIZ_PUBLISH_POLL_SECONDS=${POSTIZ_PUBLISH_POLL_SECONDS:-3}
+      ## social-media-production (MediaJob pipeline)
+      - MEDIA_WORKSPACE=/workspace/media
+      - MEDIA_TIMEZONE=${MEDIA_TIMEZONE:-America/Bahia}
+      - MEDIA_MAX_FILE_SIZE_BYTES=${MEDIA_MAX_FILE_SIZE_BYTES:-1073741824}
+      - MEDIA_RETENTION_DAYS=${MEDIA_RETENTION_DAYS:-7}
+      - SOCIAL_DEFAULT_POST_MODE=${SOCIAL_DEFAULT_POST_MODE:-draft}
+      - EVONEXUS_API_URL=http://localhost:8080
+      - CORS_ALLOWED_ORIGINS=https://${EVONEXUS_DOMAIN}
+      - TZ=${TZ:-America/Sao_Paulo}
+      - EVONEXUS_PORT=8080
+      - TERMINAL_SERVER_PORT=32352
+      - FORWARDED_ALLOW_IPS=*
+      ## Guard-rails do terminal: teto de PTYs claude simultâneos (cada aba
+      ## de agente consome 200-400MB) e TTL pra recolher sessões sem viewer.
+      - TERMINAL_MAX_ACTIVE_SESSIONS=${TERMINAL_MAX_ACTIVE_SESSIONS:-4}
+      - TERMINAL_DETACHED_TTL_MINUTES=${TERMINAL_DETACHED_TTL_MINUTES:-30}
+      - SMTP_DOMAIN=${SMTP_DOMAIN}
+      - SMTP_USERNAME=${SMTP_USERNAME}
+      - SMTP_PASSWORD=${SMTP_PASSWORD}
+      - SMTP_ADDRESS=${SMTP_ADDRESS}
+      - SMTP_PORT=${SMTP_PORT}
+      - SMTP_AUTHENTICATION=${SMTP_AUTHENTICATION}
+      - SMTP_ENABLE_STARTTLS_AUTO=${SMTP_ENABLE_STARTTLS_AUTO}
+
+    deploy:
+      placement:
+        constraints:
+          - node.role == manager
+      resources:
+        limits:
+          ## O dashboard hospeda Flask + terminal-server + os processos
+          ## claude/openclaude das abas de agente — 1GB cai com 2-3 abas.
+          ## Suba EVONEXUS_DASHBOARD_MEMORY conforme a RAM da sua VPS.
+          cpus: "${EVONEXUS_DASHBOARD_CPUS:-2}"
+          memory: ${EVONEXUS_DASHBOARD_MEMORY:-2048M}
+      labels:
+        - traefik.enable=true
+        - traefik.docker.network=network_public
+
+        ## Flask API + React SPA em :8080
+        - traefik.http.routers.evonexus_dashboard.rule=Host(`${EVONEXUS_DOMAIN}`)
+        - traefik.http.routers.evonexus_dashboard.entrypoints=websecure
+        - traefik.http.routers.evonexus_dashboard.priority=1
+        - traefik.http.routers.evonexus_dashboard.tls.certresolver=letsencryptresolver
+        - traefik.http.routers.evonexus_dashboard.service=evonexus_dashboard
+        - traefik.http.services.evonexus_dashboard.loadbalancer.server.port=8080
+        - traefik.http.services.evonexus_dashboard.loadbalancer.passHostHeader=true
+
+        ## Terminal-server embutido em :32352. /terminal é removido do path.
+        - traefik.http.routers.evonexus_terminal.rule=Host(`${EVONEXUS_DOMAIN}`) && PathPrefix(`/terminal`)
+        - traefik.http.routers.evonexus_terminal.entrypoints=websecure
+        - traefik.http.routers.evonexus_terminal.priority=10
+        - traefik.http.routers.evonexus_terminal.tls.certresolver=letsencryptresolver
+        - traefik.http.routers.evonexus_terminal.service=evonexus_terminal
+        - traefik.http.routers.evonexus_terminal.middlewares=evonexus_terminal_strip
+        - traefik.http.middlewares.evonexus_terminal_strip.stripprefix.prefixes=/terminal
+        - traefik.http.services.evonexus_terminal.loadbalancer.server.port=32352
+        - traefik.http.services.evonexus_terminal.loadbalancer.passHostHeader=true
+
+  evonexus_telegram:
+    image: excarplex/evo-nexus-runtime:latest
+    # Wrapper com dois modos (TELEGRAM_MODE=channels|provider, default auto):
+    #   provider — telegram_provider_bot.py no provider ativo do dashboard
+    #              (NVIDIA, OmniRouter, OpenRouter, Codex...). Recomendado.
+    #   channels — claude --channels direto na Anthropic; requer claude /login
+    #              no volume de auth e plano com channels habilitado.
+    command: ["bash", "scripts/telegram_swarm_entry.sh"]
+
+    volumes:
+      - evonexus_config:/workspace/config
+      - evonexus_workspace:/workspace/workspace
+      - evonexus_memory:/workspace/memory
+      - evonexus_adw_logs:/workspace/ADWs/logs
+      - evonexus_claude_workspace:/workspace/.claude
+      - evonexus_agent_memory:/workspace/.claude/agent-memory
+      - evonexus_claude_auth:/root/.claude
+      - evonexus_codex_auth:/root/.codex
+      - evonexus_openclaude_auth:/root/.openclaude
+
+    networks:
+      - network_public
+
+    environment:
+      - DASHBOARD_API_TOKEN=${DASHBOARD_API_TOKEN}
+      - DASHBOARD_API_USER=${DASHBOARD_API_USER:-admin}
+      - APPROVAL_BRIDGE_TOKEN=${APPROVAL_BRIDGE_TOKEN}
+      - APPROVAL_DECISION_TIMEOUT_SECONDS=${APPROVAL_DECISION_TIMEOUT_SECONDS:-105}
+      - EVONEXUS_API_URL=http://evonexus-dashboard:8080
+      - TELEGRAM_MODE=${TELEGRAM_MODE:-provider}
+      - TZ=${TZ:-America/Sao_Paulo}
+      - SMTP_DOMAIN=${SMTP_DOMAIN}
+      - SMTP_USERNAME=${SMTP_USERNAME}
+      - SMTP_PASSWORD=${SMTP_PASSWORD}
+      - SMTP_ADDRESS=${SMTP_ADDRESS}
+      - SMTP_PORT=${SMTP_PORT}
+      - SMTP_AUTHENTICATION=${SMTP_AUTHENTICATION}
+      - SMTP_ENABLE_STARTTLS_AUTO=${SMTP_ENABLE_STARTTLS_AUTO}
+
+    stdin_open: true
+    tty: true
+
+    deploy:
+      placement:
+        constraints:
+          - node.role == manager
+      resources:
+        limits:
+          ## O bot roda com RAG do MemPalace (busca semântica no prompt).
+          ## 1024M derrubava com memória recente + contexto injetado.
+          cpus: "1"
+          memory: 1536M
+
+  evonexus_scheduler:
+    image: excarplex/evo-nexus-runtime:latest
+    command: ["uv", "run", "python", "scheduler.py"]
+
+    volumes:
+      - evonexus_config:/workspace/config
+      - evonexus_workspace:/workspace/workspace
+      - evonexus_memory:/workspace/memory
+      - evonexus_adw_logs:/workspace/ADWs/logs
+      - evonexus_claude_workspace:/workspace/.claude
+      - evonexus_agent_memory:/workspace/.claude/agent-memory
+      - evonexus_codex_auth:/root/.codex
+
+    networks:
+      - network_public
+
+    environment:
+      - DASHBOARD_API_TOKEN=${DASHBOARD_API_TOKEN}
+      - DASHBOARD_API_USER=${DASHBOARD_API_USER:-admin}
+      - EVONEXUS_API_URL=http://evonexus-dashboard:8080
+      - TZ=${TZ:-America/Sao_Paulo}
+      ## O entrypoint espera em loop de 30s até a ANTHROPIC_API_KEY aparecer
+      ## no .env (configurada via dashboard → Providers). Sem crash-loop
+      ## enquanto o usuário ainda está fazendo o onboarding.
+      - REQUIRE_ANTHROPIC_KEY=1
+      - SMTP_DOMAIN=${SMTP_DOMAIN}
+      - SMTP_USERNAME=${SMTP_USERNAME}
+      - SMTP_PASSWORD=${SMTP_PASSWORD}
+      - SMTP_ADDRESS=${SMTP_ADDRESS}
+      - SMTP_PORT=${SMTP_PORT}
+      - SMTP_AUTHENTICATION=${SMTP_AUTHENTICATION}
+      - SMTP_ENABLE_STARTTLS_AUTO=${SMTP_ENABLE_STARTTLS_AUTO}
+
+    deploy:
+      placement:
+        constraints:
+          - node.role == manager
+      resources:
+        limits:
+          cpus: "1"
+          memory: 1024M
+
+  ## --------------------------------------------------------------------------
+  ## social-media-production — media-worker (HyperFrames + OpenCode/OmniRoute
+  ## + FFmpeg render/validate). Isolated on purpose: CPU-heavy rendering never
+  ## runs inside the dashboard's web process. replicas=1 + concurrency=1
+  ## (enforced by the worker's own polling loop) — only one render at a time.
+  ## Never mounts /var/run/docker.sock, never publishes a port.
+  ## --------------------------------------------------------------------------
+  evonexus_media_worker:
+    image: excarplex/evo-nexus-media-worker:latest
+
+    volumes:
+      - evonexus_media:/workspace/media
+      # Only what the worker actually needs to run OpenCode via the active
+      # OmniRoute-backed provider — no dashboard_data, no .claude auth
+      # volumes for other CLIs, no backups.
+      - evonexus_config:/workspace/config
+
+    networks:
+      - network_public
+
+    environment:
+      - DASHBOARD_API_TOKEN=${DASHBOARD_API_TOKEN}
+      - EVONEXUS_API_URL=http://evonexus-dashboard:8080
+      - MEDIA_WORKSPACE=/workspace/media
+      - MEDIA_SKILLS_DIR=/workspace/.claude/skills-media
+      - MEDIA_WORKER_POLL_SECONDS=${MEDIA_WORKER_POLL_SECONDS:-10}
+      - MEDIA_JOB_TIMEOUT_SECONDS=${MEDIA_JOB_TIMEOUT_SECONDS:-3600}
+      - MEDIA_MAX_FILE_SIZE_BYTES=${MEDIA_MAX_FILE_SIZE_BYTES:-1073741824}
+      - TZ=${TZ:-America/Bahia}
+
+    deploy:
+      replicas: 1
+      placement:
+        constraints:
+          - node.role == manager
+      resources:
+        ## First service in this stack to use `reservations` (not just
+        ## `limits`) — rendering is the first genuinely CPU-heavy workload
+        ## introduced here, and without a guaranteed floor a render could
+        ## starve the dashboard's Flask/terminal processes on an 8 vCPU box.
+        ## See workspace/development/features/social-media-production/
+        ## [C]architecture-social-media-production.md ADR-9.
+        reservations:
+          cpus: "1.0"
+          memory: 1024M
+        limits:
+          cpus: "4.0"
+          memory: 5120M
+      ## No HTTP port to healthcheck against (the worker is a polling loop,
+      ## not a server) — liveness is a touched-file heartbeat instead.
+      # Uncomment if your Swarm/Portainer version supports HEALTHCHECK CMD
+      # test overrides at the compose level:
+      # healthcheck:
+      #   test: ["CMD-SHELL", "test $(($(date +%s) - $(date -r /tmp/media-worker.alive +%s))) -lt 120"]
+      #   interval: 30s
+      #   timeout: 5s
+      #   retries: 3
+      #   start_period: 60s
+
+  ## --------------------------------------------------------------------------
+  ## OPCIONAL — OmniRoute (https://github.com/diegosouzapw/OmniRoute, MIT)
+  ## Gateway de IA local: roteia 237+ providers (90+ com free tier) por um
+  ## único endpoint OpenAI-compatível, com fallback automático, compressão de
+  ## tokens e bridges de protocolo. Rodando DENTRO da stack, o provider
+  ## "omnirouter" do EvoNexus aponta para http://omniroute:20128/v1 e nunca
+  ## depende de um gateway externo fora do ar.
+  ##
+  ## Setup pós-deploy:
+  ##   1. Acesse o dashboard do OmniRoute (via túnel SSH, mais seguro:
+  ##        ssh -L 20128:127.0.0.1:20128 root@SUA_VPS
+  ##      + `docker service update --publish-add published=20128,target=20128,mode=host <stack>_omniroute`
+  ##      ou exponha via Traefik com autenticação — veja labels comentadas).
+  ##   2. Conecte providers (NVIDIA NIM, OpenRouter, Codex OAuth, ...).
+  ##   3. Gere uma API key em "Endpoints".
+  ##   4. No EvoNexus (dashboard → Providers → OMNIROUTER):
+  ##        OPENAI_BASE_URL = http://omniroute:20128/v1
+  ##        OPENAI_API_KEY  = a key gerada
+  ##        OPENAI_MODEL    = auto   (roteamento com fallback automático)
+  ## ATENÇÃO: o volume guarda keys de providers — não exponha o dashboard
+  ## publicamente sem autenticação (REQUIRE_API_KEY=true + auth no Traefik).
+  ## --------------------------------------------------------------------------
+  omniroute:
+    image: diegosouzapw/omniroute:latest
+
+    volumes:
+      - omniroute_data:/app/data
+
+    networks:
+      network_public:
+        aliases:
+          - omniroute
+
+    ## Auth NATIVA do OmniRoute (login com INITIAL_PASSWORD, sessão JWT em
+    ## cookie). NÃO coloque basic-auth do Traefik na frente do dashboard: as
+    ## chamadas internas (SSE/WS/API) usam Authorization próprio e entram em
+    ## loop de 401 com o basic-auth do proxy.
+    ## Preencha via env da stack no Portainer:
+    ##   OMNIROUTE_DOMAIN           → subdomínio do dashboard (ex.: omni.seudominio.com.br)
+    ##   OMNIROUTE_INITIAL_PASSWORD → senha de login do dashboard
+    ##   OMNIROUTE_JWT_SECRET       → openssl rand -base64 48
+    ##   OMNIROUTE_API_KEY_SECRET   → openssl rand -hex 32
+    ##   OMNIROUTE_STORAGE_KEY      → openssl rand -hex 32
+    environment:
+      - TZ=${TZ:-America/Sao_Paulo}
+      - PORT=20128
+      - REQUIRE_API_KEY=true
+      - INITIAL_PASSWORD=${OMNIROUTE_INITIAL_PASSWORD}
+      - JWT_SECRET=${OMNIROUTE_JWT_SECRET}
+      - API_KEY_SECRET=${OMNIROUTE_API_KEY_SECRET}
+      - STORAGE_ENCRYPTION_KEY=${OMNIROUTE_STORAGE_KEY}
+      - AUTH_COOKIE_SECURE=true
+      - OMNIROUTE_TRUST_PROXY=true
+      - NEXT_PUBLIC_BASE_URL=https://${OMNIROUTE_DOMAIN}
+      - OMNIROUTE_PUBLIC_BASE_URL=https://${OMNIROUTE_DOMAIN}
+      - CORS_ALLOWED_ORIGINS=https://${OMNIROUTE_DOMAIN}
+
+    deploy:
+      placement:
+        constraints:
+          - node.role == manager
+      resources:
+        limits:
+          cpus: "1"
+          memory: 1024M
+      ## Para expor o dashboard do OmniRoute via Traefik (auth nativa acima
+      ## protege o acesso), descomente:
+      # labels:
+      #   - traefik.enable=true
+      #   - traefik.docker.network=network_public
+      #   - traefik.http.routers.omniroute.rule=Host(`${OMNIROUTE_DOMAIN}`)
+      #   - traefik.http.routers.omniroute.entrypoints=websecure
+      #   - traefik.http.routers.omniroute.tls.certresolver=letsencryptresolver
+      #   - traefik.http.routers.omniroute.service=omniroute
+      #   - traefik.http.services.omniroute.loadbalancer.server.port=20128
+      #   - traefik.http.services.omniroute.loadbalancer.passHostHeader=true
+
+volumes:
+  evonexus_config:
+  evonexus_workspace:
+  evonexus_dashboard_data:
+  evonexus_memory:
+  evonexus_backups:
+  evonexus_adw_logs:
+  evonexus_claude_workspace:
+  evonexus_agent_memory:
+  evonexus_claude_auth:
+  evonexus_codex_auth:
+  evonexus_openclaude_auth:
+  ## social-media-production: MediaJob workspaces + renders. Shared between
+  ## evonexus_dashboard (streaming/upload) and evonexus_media_worker
+  ## (rendering). Not wiped by MEDIA_RETENTION_DAYS immediately after
+  ## upload — see media_workspace.py.
+  evonexus_media:
+  omniroute_data:
+
+networks:
+  network_public:
+    external: true
+    name: network_public
diff --git a/evonexus-vps.stack.yml b/evonexus-vps.stack.yml
new file mode 100644
index 000000000..c70d58c0d
--- /dev/null
+++ b/evonexus-vps.stack.yml
@@ -0,0 +1,305 @@
+## ============================================================================
+## EvoNexus — VPS / Docker Swarm stack (pessoal — Sistema Britto)
+##
+## Target VPS:
+##   * Traefik already attached to external network_public
+##   * TLS entrypoint: websecure
+##   * Cert resolver: letsencryptresolver
+##   * Public hosts: nexus.workflowapi.com.br (EvoNexus)
+##                   omni.workflowapi.com.br  (OmniRoute)
+##
+## Segredos ficam FORA do repo: os valores reais (DASHBOARD_API_TOKEN,
+## OMNIROUTE_*, SMTP_*) são preenchidos como variáveis de ambiente
+## da stack no Portainer. Os placeholders abaixo marcam onde entram.
+##   DASHBOARD_API_TOKEN        → openssl rand -base64 32
+##   APPROVAL_BRIDGE_TOKEN      → openssl rand -base64 32 (SÓ em
+##     evonexus_dashboard + evonexus_telegram — NUNCA em evonexus_scheduler,
+##     que spawna os subprocessos dos agentes; ver goal-ticket-unification
+##     ADR SPEC 3f / Vault V1c-V2-V10)
+##   OMNIROUTE_INITIAL_PASSWORD → openssl rand -base64 12 (senha de login)
+##   OMNIROUTE_JWT_SECRET       → openssl rand -base64 48
+##   OMNIROUTE_API_KEY_SECRET   → openssl rand -hex 32
+##   OMNIROUTE_STORAGE_KEY      → openssl rand -hex 32
+## ============================================================================
+version: "3.7"
+
+services:
+
+  evonexus_dashboard:
+    image: excarplex/evo-nexus-dashboard:latest
+
+    volumes:
+      - evonexus_config:/workspace/config
+      - evonexus_workspace:/workspace/workspace
+      - evonexus_dashboard_data:/workspace/dashboard/data
+      - evonexus_memory:/workspace/memory
+      - evonexus_backups:/workspace/backups
+      - evonexus_adw_logs:/workspace/ADWs/logs
+      - evonexus_claude_workspace:/workspace/.claude
+      - evonexus_agent_memory:/workspace/.claude/agent-memory
+      - evonexus_claude_auth:/root/.claude
+      - evonexus_codex_auth:/root/.codex
+      - evonexus_openclaude_auth:/root/.openclaude
+
+    networks:
+      network_public:
+        aliases:
+          - evonexus-dashboard
+
+    environment:
+      - DASHBOARD_API_TOKEN=${DASHBOARD_API_TOKEN}
+      - DASHBOARD_API_USER=${DASHBOARD_API_USER:-admin}
+      ## Validates the Telegram bot's approval-decision calls
+      ## (/api/approvals/*/decision) — dedicated credential, deliberately
+      ## separate from DASHBOARD_API_TOKEN (goal-ticket-unification Vault V1).
+      - APPROVAL_BRIDGE_TOKEN=${APPROVAL_BRIDGE_TOKEN}
+      - APPROVAL_DECISION_TIMEOUT_SECONDS=${APPROVAL_DECISION_TIMEOUT_SECONDS:-105}
+      ## Telegram user ids allowed to press an approve/reject button — comma
+      ## or semicolon-separated (Vault V3, per-individual not per-chat).
+      - APPROVAL_APPROVER_IDS=${APPROVAL_APPROVER_IDS}
+      ## Postiz is called only by the dashboard after human approval.
+      - POSTIZ_URL=${POSTIZ_URL}
+      - POSTIZ_API_KEY=${POSTIZ_API_KEY}
+      - POSTIZ_INTEGRATION_INSTAGRAM_ID=${POSTIZ_INTEGRATION_INSTAGRAM_ID}
+      - POSTIZ_INTEGRATION_LINKEDIN_ID=${POSTIZ_INTEGRATION_LINKEDIN_ID}
+      - POSTIZ_ALLOWED_MEDIA_HOSTS=${POSTIZ_ALLOWED_MEDIA_HOSTS}
+      - POSTIZ_PUBLISH_TIMEOUT_SECONDS=${POSTIZ_PUBLISH_TIMEOUT_SECONDS:-90}
+      - POSTIZ_PUBLISH_POLL_SECONDS=${POSTIZ_PUBLISH_POLL_SECONDS:-3}
+      ## MinIO/S3 media host (int-minio, Option A). Available to agent
+      ## subprocesses so they can upload generated media; unlike POSTIZ_API_KEY
+      ## it is NOT a publish credential (the Instagram post still needs
+      ## approval), so it is intentionally not denylisted from agents.
+      - MINIO_ENDPOINT=${MINIO_ENDPOINT}
+      - MINIO_ACCESS_KEY=${MINIO_ACCESS_KEY}
+      - MINIO_SECRET_KEY=${MINIO_SECRET_KEY}
+      - MINIO_BUCKET=${MINIO_BUCKET:-post}
+      - MINIO_PUBLIC_BASE=${MINIO_PUBLIC_BASE}
+      - EVONEXUS_API_URL=http://localhost:8080
+      - CORS_ALLOWED_ORIGINS=https://nexus.workflowapi.com.br
+      - TZ=America/Sao_Paulo
+      - EVONEXUS_PORT=8080
+      - TERMINAL_SERVER_PORT=32352
+      - FORWARDED_ALLOW_IPS=*
+      ## Guard-rails do terminal: teto de PTYs claude simultâneos (cada um
+      ## consome 200-400MB) e TTL pra recolher sessões sem aba aberta.
+      - TERMINAL_MAX_ACTIVE_SESSIONS=${TERMINAL_MAX_ACTIVE_SESSIONS:-4}
+      - TERMINAL_DETACHED_TTL_MINUTES=${TERMINAL_DETACHED_TTL_MINUTES:-30}
+      - SMTP_DOMAIN=${SMTP_DOMAIN}
+      - SMTP_USERNAME=${SMTP_USERNAME}
+      - SMTP_PASSWORD=${SMTP_PASSWORD}
+      - SMTP_ADDRESS=${SMTP_ADDRESS}
+      - SMTP_PORT=${SMTP_PORT}
+      - SMTP_AUTHENTICATION=${SMTP_AUTHENTICATION}
+      - SMTP_ENABLE_STARTTLS_AUTO=${SMTP_ENABLE_STARTTLS_AUTO}
+
+    deploy:
+      placement:
+        constraints:
+          - node.role == manager
+      resources:
+        limits:
+          ## O dashboard hospeda Flask + terminal-server + os processos
+          ## claude/openclaude das abas — 1GB derrubava com 2-3 agentes.
+          cpus: "${EVONEXUS_DASHBOARD_CPUS:-2}"
+          memory: ${EVONEXUS_DASHBOARD_MEMORY:-2048M}
+      labels:
+        - traefik.enable=true
+        - traefik.docker.network=network_public
+
+        ## Flask API + React SPA on :8080
+        - traefik.http.routers.evonexus_dashboard.rule=Host(`nexus.workflowapi.com.br`)
+        - traefik.http.routers.evonexus_dashboard.entrypoints=websecure
+        - traefik.http.routers.evonexus_dashboard.priority=1
+        - traefik.http.routers.evonexus_dashboard.tls.certresolver=letsencryptresolver
+        - traefik.http.routers.evonexus_dashboard.service=evonexus_dashboard
+        - traefik.http.services.evonexus_dashboard.loadbalancer.server.port=8080
+        - traefik.http.services.evonexus_dashboard.loadbalancer.passHostHeader=true
+
+        ## Embedded terminal-server on :32352. /terminal is stripped before proxying.
+        - traefik.http.routers.evonexus_terminal.rule=Host(`nexus.workflowapi.com.br`) && PathPrefix(`/terminal`)
+        - traefik.http.routers.evonexus_terminal.entrypoints=websecure
+        - traefik.http.routers.evonexus_terminal.priority=10
+        - traefik.http.routers.evonexus_terminal.tls.certresolver=letsencryptresolver
+        - traefik.http.routers.evonexus_terminal.service=evonexus_terminal
+        - traefik.http.routers.evonexus_terminal.middlewares=evonexus_terminal_strip
+        - traefik.http.middlewares.evonexus_terminal_strip.stripprefix.prefixes=/terminal
+        - traefik.http.services.evonexus_terminal.loadbalancer.server.port=32352
+        - traefik.http.services.evonexus_terminal.loadbalancer.passHostHeader=true
+
+  evonexus_telegram:
+    image: excarplex/evo-nexus-runtime:latest
+    # TELEGRAM_MODE=provider → telegram_provider_bot.py no provider ativo do
+    # dashboard (NVIDIA, OmniRoute, OpenRouter, Codex...). O modo channels
+    # exige login claude.ai e não funciona via providers OpenAI-compatíveis.
+    command: ["bash", "scripts/telegram_swarm_entry.sh"]
+
+    volumes:
+      - evonexus_config:/workspace/config
+      - evonexus_workspace:/workspace/workspace
+      - evonexus_memory:/workspace/memory
+      - evonexus_adw_logs:/workspace/ADWs/logs
+      - evonexus_claude_workspace:/workspace/.claude
+      - evonexus_agent_memory:/workspace/.claude/agent-memory
+      - evonexus_claude_auth:/root/.claude
+      - evonexus_codex_auth:/root/.codex
+      - evonexus_openclaude_auth:/root/.openclaude
+
+    networks:
+      - network_public
+
+    environment:
+      - DASHBOARD_API_TOKEN=${DASHBOARD_API_TOKEN}
+      - DASHBOARD_API_USER=${DASHBOARD_API_USER:-admin}
+      ## Sends approval-decision calls to the dashboard's bridge-only route —
+      ## see the matching var on evonexus_dashboard above.
+      - APPROVAL_BRIDGE_TOKEN=${APPROVAL_BRIDGE_TOKEN}
+      - APPROVAL_DECISION_TIMEOUT_SECONDS=${APPROVAL_DECISION_TIMEOUT_SECONDS:-105}
+      ## MinIO/S3 for agents spawned via chat (a publishing agent messaged here
+      ## uploads media the same way heartbeat-spawned ones do). See dashboard.
+      - MINIO_ENDPOINT=${MINIO_ENDPOINT}
+      - MINIO_ACCESS_KEY=${MINIO_ACCESS_KEY}
+      - MINIO_SECRET_KEY=${MINIO_SECRET_KEY}
+      - MINIO_BUCKET=${MINIO_BUCKET:-post}
+      - MINIO_PUBLIC_BASE=${MINIO_PUBLIC_BASE}
+      - EVONEXUS_API_URL=http://evonexus-dashboard:8080
+      - TELEGRAM_MODE=provider
+      - TZ=America/Sao_Paulo
+      - SMTP_DOMAIN=${SMTP_DOMAIN}
+      - SMTP_USERNAME=${SMTP_USERNAME}
+      - SMTP_PASSWORD=${SMTP_PASSWORD}
+      - SMTP_ADDRESS=${SMTP_ADDRESS}
+      - SMTP_PORT=${SMTP_PORT}
+      - SMTP_AUTHENTICATION=${SMTP_AUTHENTICATION}
+      - SMTP_ENABLE_STARTTLS_AUTO=${SMTP_ENABLE_STARTTLS_AUTO}
+
+    stdin_open: true
+    tty: true
+
+    deploy:
+      placement:
+        constraints:
+          - node.role == manager
+      resources:
+        limits:
+          cpus: "1"
+          memory: "1536M"
+
+  evonexus_scheduler:
+    image: excarplex/evo-nexus-runtime:latest
+    command: ["uv", "run", "python", "scheduler.py"]
+
+    volumes:
+      - evonexus_config:/workspace/config
+      - evonexus_workspace:/workspace/workspace
+      - evonexus_memory:/workspace/memory
+      - evonexus_adw_logs:/workspace/ADWs/logs
+      - evonexus_claude_workspace:/workspace/.claude
+      - evonexus_agent_memory:/workspace/.claude/agent-memory
+      - evonexus_codex_auth:/root/.codex
+
+    networks:
+      - network_public
+
+    environment:
+      - DASHBOARD_API_TOKEN=${DASHBOARD_API_TOKEN}
+      - DASHBOARD_API_USER=${DASHBOARD_API_USER:-admin}
+      - EVONEXUS_API_URL=http://evonexus-dashboard:8080
+      ## MinIO/S3 for agents a routine might spawn to prepare a social post.
+      - MINIO_ENDPOINT=${MINIO_ENDPOINT}
+      - MINIO_ACCESS_KEY=${MINIO_ACCESS_KEY}
+      - MINIO_SECRET_KEY=${MINIO_SECRET_KEY}
+      - MINIO_BUCKET=${MINIO_BUCKET:-post}
+      - MINIO_PUBLIC_BASE=${MINIO_PUBLIC_BASE}
+      - TZ=America/Sao_Paulo
+      - REQUIRE_ANTHROPIC_KEY=1
+      - SMTP_DOMAIN=${SMTP_DOMAIN}
+      - SMTP_USERNAME=${SMTP_USERNAME}
+      - SMTP_PASSWORD=${SMTP_PASSWORD}
+      - SMTP_ADDRESS=${SMTP_ADDRESS}
+      - SMTP_PORT=${SMTP_PORT}
+      - SMTP_AUTHENTICATION=${SMTP_AUTHENTICATION}
+      - SMTP_ENABLE_STARTTLS_AUTO=${SMTP_ENABLE_STARTTLS_AUTO}
+
+    deploy:
+      placement:
+        constraints:
+          - node.role == manager
+      resources:
+        limits:
+          cpus: "1"
+          memory: "1024M"
+
+  ## OmniRoute — gateway de IA (237+ providers, fallback automático,
+  ## compressão de tokens). O provider "omnirouter" do EvoNexus aponta
+  ## para http://omniroute:20128/v1 (DNS interno via alias).
+  ## Dashboard público em omni.workflowapi.com.br com auth nativa (login).
+  omniroute:
+    image: diegosouzapw/omniroute:latest
+
+    volumes:
+      - omniroute_data:/app/data
+
+    networks:
+      network_public:
+        aliases:
+          - omniroute
+
+    ## Auth NATIVA do OmniRoute (login com INITIAL_PASSWORD, sessão JWT em
+    ## cookie). NÃO usar basic-auth do Traefik na frente: as chamadas
+    ## internas do dashboard (SSE/WS/API) usam Authorization próprio e
+    ## entram em loop de 401 com o basic-auth.
+    ## Segredos via env da stack no Portainer:
+    ##   OMNIROUTE_INITIAL_PASSWORD → senha de login do dashboard
+    ##   OMNIROUTE_JWT_SECRET       → openssl rand -base64 48
+    ##   OMNIROUTE_API_KEY_SECRET   → openssl rand -hex 32
+    ##   OMNIROUTE_STORAGE_KEY      → openssl rand -hex 32
+    environment:
+      - TZ=America/Sao_Paulo
+      - PORT=20128
+      - REQUIRE_API_KEY=true
+      - INITIAL_PASSWORD=${OMNIROUTE_INITIAL_PASSWORD}
+      - JWT_SECRET=${OMNIROUTE_JWT_SECRET}
+      - API_KEY_SECRET=${OMNIROUTE_API_KEY_SECRET}
+      - STORAGE_ENCRYPTION_KEY=${OMNIROUTE_STORAGE_KEY}
+      - AUTH_COOKIE_SECURE=true
+      - OMNIROUTE_TRUST_PROXY=true
+      - NEXT_PUBLIC_BASE_URL=https://omni.workflowapi.com.br
+      - OMNIROUTE_PUBLIC_BASE_URL=https://omni.workflowapi.com.br
+      - CORS_ALLOWED_ORIGINS=https://omni.workflowapi.com.br
+
+    deploy:
+      placement:
+        constraints:
+          - node.role == manager
+      resources:
+        limits:
+          cpus: "1"
+          memory: "1024M"
+      labels:
+        - traefik.enable=true
+        - traefik.docker.network=network_public
+        - traefik.http.routers.omniroute.rule=Host(`omni.workflowapi.com.br`)
+        - traefik.http.routers.omniroute.entrypoints=websecure
+        - traefik.http.routers.omniroute.tls.certresolver=letsencryptresolver
+        - traefik.http.routers.omniroute.service=omniroute
+        - traefik.http.services.omniroute.loadbalancer.server.port=20128
+        - traefik.http.services.omniroute.loadbalancer.passHostHeader=true
+
+volumes:
+  evonexus_config:
+  evonexus_workspace:
+  evonexus_dashboard_data:
+  evonexus_memory:
+  evonexus_backups:
+  evonexus_adw_logs:
+  evonexus_claude_workspace:
+  evonexus_agent_memory:
+  evonexus_claude_auth:
+  evonexus_codex_auth:
+  evonexus_openclaude_auth:
+  omniroute_data:
+
+networks:
+  network_public:
+    external: true
+    name: network_public
diff --git a/evonexus.stack.yml b/evonexus.stack.yml
index 45d5931f7..b015c53f4 100644
--- a/evonexus.stack.yml
+++ b/evonexus.stack.yml
@@ -34,6 +34,7 @@ services:
       - evonexus_agent_memory:/workspace/.claude/agent-memory
       - evonexus_claude_auth:/root/.claude
       - evonexus_codex_auth:/root/.codex
+      - evonexus_openclaude_auth:/root/.openclaude
 
     networks:
       - traefik-public
@@ -99,6 +100,7 @@ services:
       - evonexus_agent_memory:/workspace/.claude/agent-memory
       - evonexus_claude_auth:/root/.claude
       - evonexus_codex_auth:/root/.codex
+      - evonexus_openclaude_auth:/root/.openclaude
 
     networks:
       - traefik-public
@@ -159,6 +161,7 @@ volumes:
   evonexus_agent_memory:
   evonexus_claude_auth:
   evonexus_codex_auth:
+  evonexus_openclaude_auth:
 
 networks:
   traefik-public:
diff --git a/media_worker/opencode.json b/media_worker/opencode.json
new file mode 100644
index 000000000..6e374d92c
--- /dev/null
+++ b/media_worker/opencode.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://opencode.ai/config.json",
+  "provider": {
+    "opencode": {
+      "npm": "@ai-sdk/openai-compatible",
+      "name": "OpenCode",
+      "options": {
+        "baseURL": "{env:OPENAI_BASE_URL}",
+        "apiKey": "{env:OPENAI_API_KEY}"
+      },
+      "models": {
+        "auto": { "name": "OpenCode auto (LKGP)" }
+      }
+    }
+  },
+  "agent": {
+    "build": {
+      "steps": 20,
+      "tools": { "skill": true }
+    }
+  }
+}
diff --git a/media_worker/package-lock.json b/media_worker/package-lock.json
new file mode 100644
index 000000000..f02678268
--- /dev/null
+++ b/media_worker/package-lock.json
@@ -0,0 +1,2438 @@
+{
+  "name": "evo-nexus-media-worker",
+  "version": "1.0.0",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "": {
+      "name": "evo-nexus-media-worker",
+      "version": "1.0.0",
+      "dependencies": {
+        "hyperframes": "0.7.64"
+      }
+    },
+    "node_modules/@emnapi/runtime": {
+      "version": "1.11.2",
+      "resolved": "https://registry.npmjs.org/@emnapi/runtime/-/runtime-1.11.2.tgz",
+      "integrity": "sha512-kyOl3X0DuTiT1h2ft8r2fYO8JYtU9a9Xis/zBSiGArNaagCOWx90N1k2wxp18czFDH+OgcWGb5ZP/XMt3dcyPA==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "tslib": "^2.4.0"
+      }
+    },
+    "node_modules/@esbuild/aix-ppc64": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.25.12.tgz",
+      "integrity": "sha512-Hhmwd6CInZ3dwpuGTF8fJG6yoWmsToE+vYgD4nytZVxcu1ulHpUQRAB1UJ8+N1Am3Mz4+xOByoQoSZf4D+CpkA==",
+      "cpu": [
+        "ppc64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "aix"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/android-arm": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.25.12.tgz",
+      "integrity": "sha512-VJ+sKvNA/GE7Ccacc9Cha7bpS8nyzVv0jdVgwNDaR4gDMC/2TTRc33Ip8qrNYUcpkOHUT5OZ0bUcNNVZQ9RLlg==",
+      "cpu": [
+        "arm"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/android-arm64": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.25.12.tgz",
+      "integrity": "sha512-6AAmLG7zwD1Z159jCKPvAxZd4y/VTO0VkprYy+3N2FtJ8+BQWFXU+OxARIwA46c5tdD9SsKGZ/1ocqBS/gAKHg==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/android-x64": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.25.12.tgz",
+      "integrity": "sha512-5jbb+2hhDHx5phYR2By8GTWEzn6I9UqR11Kwf22iKbNpYrsmRB18aX/9ivc5cabcUiAT/wM+YIZ6SG9QO6a8kg==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/darwin-arm64": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.25.12.tgz",
+      "integrity": "sha512-N3zl+lxHCifgIlcMUP5016ESkeQjLj/959RxxNYIthIg+CQHInujFuXeWbWMgnTo4cp5XVHqFPmpyu9J65C1Yg==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/darwin-x64": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.25.12.tgz",
+      "integrity": "sha512-HQ9ka4Kx21qHXwtlTUVbKJOAnmG1ipXhdWTmNXiPzPfWKpXqASVcWdnf2bnL73wgjNrFXAa3yYvBSd9pzfEIpA==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/freebsd-arm64": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.25.12.tgz",
+      "integrity": "sha512-gA0Bx759+7Jve03K1S0vkOu5Lg/85dou3EseOGUes8flVOGxbhDDh/iZaoek11Y8mtyKPGF3vP8XhnkDEAmzeg==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/freebsd-x64": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.25.12.tgz",
+      "integrity": "sha512-TGbO26Yw2xsHzxtbVFGEXBFH0FRAP7gtcPE7P5yP7wGy7cXK2oO7RyOhL5NLiqTlBh47XhmIUXuGciXEqYFfBQ==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-arm": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.25.12.tgz",
+      "integrity": "sha512-lPDGyC1JPDou8kGcywY0YILzWlhhnRjdof3UlcoqYmS9El818LLfJJc3PXXgZHrHCAKs/Z2SeZtDJr5MrkxtOw==",
+      "cpu": [
+        "arm"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-arm64": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.25.12.tgz",
+      "integrity": "sha512-8bwX7a8FghIgrupcxb4aUmYDLp8pX06rGh5HqDT7bB+8Rdells6mHvrFHHW2JAOPZUbnjUpKTLg6ECyzvas2AQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-ia32": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.25.12.tgz",
+      "integrity": "sha512-0y9KrdVnbMM2/vG8KfU0byhUN+EFCny9+8g202gYqSSVMonbsCfLjUO+rCci7pM0WBEtz+oK/PIwHkzxkyharA==",
+      "cpu": [
+        "ia32"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-loong64": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.25.12.tgz",
+      "integrity": "sha512-h///Lr5a9rib/v1GGqXVGzjL4TMvVTv+s1DPoxQdz7l/AYv6LDSxdIwzxkrPW438oUXiDtwM10o9PmwS/6Z0Ng==",
+      "cpu": [
+        "loong64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-mips64el": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.25.12.tgz",
+      "integrity": "sha512-iyRrM1Pzy9GFMDLsXn1iHUm18nhKnNMWscjmp4+hpafcZjrr2WbT//d20xaGljXDBYHqRcl8HnxbX6uaA/eGVw==",
+      "cpu": [
+        "mips64el"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-ppc64": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.25.12.tgz",
+      "integrity": "sha512-9meM/lRXxMi5PSUqEXRCtVjEZBGwB7P/D4yT8UG/mwIdze2aV4Vo6U5gD3+RsoHXKkHCfSxZKzmDssVlRj1QQA==",
+      "cpu": [
+        "ppc64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-riscv64": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.25.12.tgz",
+      "integrity": "sha512-Zr7KR4hgKUpWAwb1f3o5ygT04MzqVrGEGXGLnj15YQDJErYu/BGg+wmFlIDOdJp0PmB0lLvxFIOXZgFRrdjR0w==",
+      "cpu": [
+        "riscv64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-s390x": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.25.12.tgz",
+      "integrity": "sha512-MsKncOcgTNvdtiISc/jZs/Zf8d0cl/t3gYWX8J9ubBnVOwlk65UIEEvgBORTiljloIWnBzLs4qhzPkJcitIzIg==",
+      "cpu": [
+        "s390x"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-x64": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.25.12.tgz",
+      "integrity": "sha512-uqZMTLr/zR/ed4jIGnwSLkaHmPjOjJvnm6TVVitAa08SLS9Z0VM8wIRx7gWbJB5/J54YuIMInDquWyYvQLZkgw==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/netbsd-arm64": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-arm64/-/netbsd-arm64-0.25.12.tgz",
+      "integrity": "sha512-xXwcTq4GhRM7J9A8Gv5boanHhRa/Q9KLVmcyXHCTaM4wKfIpWkdXiMog/KsnxzJ0A1+nD+zoecuzqPmCRyBGjg==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "netbsd"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/netbsd-x64": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.25.12.tgz",
+      "integrity": "sha512-Ld5pTlzPy3YwGec4OuHh1aCVCRvOXdH8DgRjfDy/oumVovmuSzWfnSJg+VtakB9Cm0gxNO9BzWkj6mtO1FMXkQ==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "netbsd"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/openbsd-arm64": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-arm64/-/openbsd-arm64-0.25.12.tgz",
+      "integrity": "sha512-fF96T6KsBo/pkQI950FARU9apGNTSlZGsv1jZBAlcLL1MLjLNIWPBkj5NlSz8aAzYKg+eNqknrUJ24QBybeR5A==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "openbsd"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/openbsd-x64": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.25.12.tgz",
+      "integrity": "sha512-MZyXUkZHjQxUvzK7rN8DJ3SRmrVrke8ZyRusHlP+kuwqTcfWLyqMOE3sScPPyeIXN/mDJIfGXvcMqCgYKekoQw==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "openbsd"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/openharmony-arm64": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/openharmony-arm64/-/openharmony-arm64-0.25.12.tgz",
+      "integrity": "sha512-rm0YWsqUSRrjncSXGA7Zv78Nbnw4XL6/dzr20cyrQf7ZmRcsovpcRBdhD43Nuk3y7XIoW2OxMVvwuRvk9XdASg==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "openharmony"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/sunos-x64": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.25.12.tgz",
+      "integrity": "sha512-3wGSCDyuTHQUzt0nV7bocDy72r2lI33QL3gkDNGkod22EsYl04sMf0qLb8luNKTOmgF/eDEDP5BFNwoBKH441w==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "sunos"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/win32-arm64": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.25.12.tgz",
+      "integrity": "sha512-rMmLrur64A7+DKlnSuwqUdRKyd3UE7oPJZmnljqEptesKM8wx9J8gx5u0+9Pq0fQQW8vqeKebwNXdfOyP+8Bsg==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/win32-ia32": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.25.12.tgz",
+      "integrity": "sha512-HkqnmmBoCbCwxUKKNPBixiWDGCpQGVsrQfJoVGYLPT41XWF8lHuE5N6WhVia2n4o5QK5M4tYr21827fNhi4byQ==",
+      "cpu": [
+        "ia32"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/win32-x64": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.25.12.tgz",
+      "integrity": "sha512-alJC0uCZpTFrSL0CCDjcgleBXPnCrEAhTBILpeAp7M/OFgoqtAetfBzX0xM00MUsVVPpVjlPuMbREqnZCXaTnA==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@google/genai": {
+      "version": "1.52.0",
+      "resolved": "https://registry.npmjs.org/@google/genai/-/genai-1.52.0.tgz",
+      "integrity": "sha512-gwSvbpiN/17O9TbsqSsE/OzZcpv5Fo4RQjdngGgogtuB9RsyJ8ZHhX5KjHj1bp5N9snN2eK8LDGXSaWW2hof8Q==",
+      "hasInstallScript": true,
+      "license": "Apache-2.0",
+      "optional": true,
+      "dependencies": {
+        "google-auth-library": "^10.3.0",
+        "p-retry": "^4.6.2",
+        "protobufjs": "^7.5.4",
+        "ws": "^8.18.0"
+      },
+      "engines": {
+        "node": ">=20.0.0"
+      },
+      "peerDependencies": {
+        "@modelcontextprotocol/sdk": "^1.25.2"
+      },
+      "peerDependenciesMeta": {
+        "@modelcontextprotocol/sdk": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@hono/node-server": {
+      "version": "1.19.14",
+      "resolved": "https://registry.npmjs.org/@hono/node-server/-/node-server-1.19.14.tgz",
+      "integrity": "sha512-GwtvgtXxnWsucXvbQXkRgqksiH2Qed37H9xHZocE5sA3N8O8O8/8FA3uclQXxXVzc9XBZuEOMK7+r02FmSpHtw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=18.14.1"
+      },
+      "peerDependencies": {
+        "hono": "^4"
+      }
+    },
+    "node_modules/@img/colour": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@img/colour/-/colour-1.1.0.tgz",
+      "integrity": "sha512-Td76q7j57o/tLVdgS746cYARfSyxk8iEfRxewL9h4OMzYhbW4TAcppl0mT4eyqXddh6L/jwoM75mo7ixa/pCeQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@img/sharp-darwin-arm64": {
+      "version": "0.34.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-darwin-arm64/-/sharp-darwin-arm64-0.34.5.tgz",
+      "integrity": "sha512-imtQ3WMJXbMY4fxb/Ndp6HBTNVtWCUI0WdobyheGf5+ad6xX8VIDO8u2xE4qc/fr08CKG/7dDseFtn6M6g/r3w==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-darwin-arm64": "1.2.4"
+      }
+    },
+    "node_modules/@img/sharp-darwin-x64": {
+      "version": "0.34.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-darwin-x64/-/sharp-darwin-x64-0.34.5.tgz",
+      "integrity": "sha512-YNEFAF/4KQ/PeW0N+r+aVVsoIY0/qxxikF2SWdp+NRkmMB7y9LBZAVqQ4yhGCm/H3H270OSykqmQMKLBhBJDEw==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-darwin-x64": "1.2.4"
+      }
+    },
+    "node_modules/@img/sharp-libvips-darwin-arm64": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-darwin-arm64/-/sharp-libvips-darwin-arm64-1.2.4.tgz",
+      "integrity": "sha512-zqjjo7RatFfFoP0MkQ51jfuFZBnVE2pRiaydKJ1G/rHZvnsrHAOcQALIi9sA5co5xenQdTugCvtb1cuf78Vf4g==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-darwin-x64": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-darwin-x64/-/sharp-libvips-darwin-x64-1.2.4.tgz",
+      "integrity": "sha512-1IOd5xfVhlGwX+zXv2N93k0yMONvUlANylbJw1eTah8K/Jtpi15KC+WSiaX/nBmbm2HxRM1gZ0nSdjSsrZbGKg==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linux-arm": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-arm/-/sharp-libvips-linux-arm-1.2.4.tgz",
+      "integrity": "sha512-bFI7xcKFELdiNCVov8e44Ia4u2byA+l3XtsAj+Q8tfCwO6BQ8iDojYdvoPMqsKDkuoOo+X6HZA0s0q11ANMQ8A==",
+      "cpu": [
+        "arm"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linux-arm64": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-arm64/-/sharp-libvips-linux-arm64-1.2.4.tgz",
+      "integrity": "sha512-excjX8DfsIcJ10x1Kzr4RcWe1edC9PquDRRPx3YVCvQv+U5p7Yin2s32ftzikXojb1PIFc/9Mt28/y+iRklkrw==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linux-ppc64": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-ppc64/-/sharp-libvips-linux-ppc64-1.2.4.tgz",
+      "integrity": "sha512-FMuvGijLDYG6lW+b/UvyilUWu5Ayu+3r2d1S8notiGCIyYU/76eig1UfMmkZ7vwgOrzKzlQbFSuQfgm7GYUPpA==",
+      "cpu": [
+        "ppc64"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linux-riscv64": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-riscv64/-/sharp-libvips-linux-riscv64-1.2.4.tgz",
+      "integrity": "sha512-oVDbcR4zUC0ce82teubSm+x6ETixtKZBh/qbREIOcI3cULzDyb18Sr/Wcyx7NRQeQzOiHTNbZFF1UwPS2scyGA==",
+      "cpu": [
+        "riscv64"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linux-s390x": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-s390x/-/sharp-libvips-linux-s390x-1.2.4.tgz",
+      "integrity": "sha512-qmp9VrzgPgMoGZyPvrQHqk02uyjA0/QrTO26Tqk6l4ZV0MPWIW6LTkqOIov+J1yEu7MbFQaDpwdwJKhbJvuRxQ==",
+      "cpu": [
+        "s390x"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linux-x64": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-x64/-/sharp-libvips-linux-x64-1.2.4.tgz",
+      "integrity": "sha512-tJxiiLsmHc9Ax1bz3oaOYBURTXGIRDODBqhveVHonrHJ9/+k89qbLl0bcJns+e4t4rvaNBxaEZsFtSfAdquPrw==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linuxmusl-arm64": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linuxmusl-arm64/-/sharp-libvips-linuxmusl-arm64-1.2.4.tgz",
+      "integrity": "sha512-FVQHuwx1IIuNow9QAbYUzJ+En8KcVm9Lk5+uGUQJHaZmMECZmOlix9HnH7n1TRkXMS0pGxIJokIVB9SuqZGGXw==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linuxmusl-x64": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linuxmusl-x64/-/sharp-libvips-linuxmusl-x64-1.2.4.tgz",
+      "integrity": "sha512-+LpyBk7L44ZIXwz/VYfglaX/okxezESc6UxDSoyo2Ks6Jxc4Y7sGjpgU9s4PMgqgjj1gZCylTieNamqA1MF7Dg==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-linux-arm": {
+      "version": "0.34.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linux-arm/-/sharp-linux-arm-0.34.5.tgz",
+      "integrity": "sha512-9dLqsvwtg1uuXBGZKsxem9595+ujv0sJ6Vi8wcTANSFpwV/GONat5eCkzQo/1O6zRIkh0m/8+5BjrRr7jDUSZw==",
+      "cpu": [
+        "arm"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linux-arm": "1.2.4"
+      }
+    },
+    "node_modules/@img/sharp-linux-arm64": {
+      "version": "0.34.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linux-arm64/-/sharp-linux-arm64-0.34.5.tgz",
+      "integrity": "sha512-bKQzaJRY/bkPOXyKx5EVup7qkaojECG6NLYswgktOZjaXecSAeCWiZwwiFf3/Y+O1HrauiE3FVsGxFg8c24rZg==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linux-arm64": "1.2.4"
+      }
+    },
+    "node_modules/@img/sharp-linux-ppc64": {
+      "version": "0.34.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linux-ppc64/-/sharp-linux-ppc64-0.34.5.tgz",
+      "integrity": "sha512-7zznwNaqW6YtsfrGGDA6BRkISKAAE1Jo0QdpNYXNMHu2+0dTrPflTLNkpc8l7MUP5M16ZJcUvysVWWrMefZquA==",
+      "cpu": [
+        "ppc64"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linux-ppc64": "1.2.4"
+      }
+    },
+    "node_modules/@img/sharp-linux-riscv64": {
+      "version": "0.34.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linux-riscv64/-/sharp-linux-riscv64-0.34.5.tgz",
+      "integrity": "sha512-51gJuLPTKa7piYPaVs8GmByo7/U7/7TZOq+cnXJIHZKavIRHAP77e3N2HEl3dgiqdD/w0yUfiJnII77PuDDFdw==",
+      "cpu": [
+        "riscv64"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linux-riscv64": "1.2.4"
+      }
+    },
+    "node_modules/@img/sharp-linux-s390x": {
+      "version": "0.34.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linux-s390x/-/sharp-linux-s390x-0.34.5.tgz",
+      "integrity": "sha512-nQtCk0PdKfho3eC5MrbQoigJ2gd1CgddUMkabUj+rBevs8tZ2cULOx46E7oyX+04WGfABgIwmMC0VqieTiR4jg==",
+      "cpu": [
+        "s390x"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linux-s390x": "1.2.4"
+      }
+    },
+    "node_modules/@img/sharp-linux-x64": {
+      "version": "0.34.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linux-x64/-/sharp-linux-x64-0.34.5.tgz",
+      "integrity": "sha512-MEzd8HPKxVxVenwAa+JRPwEC7QFjoPWuS5NZnBt6B3pu7EG2Ge0id1oLHZpPJdn3OQK+BQDiw9zStiHBTJQQQQ==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linux-x64": "1.2.4"
+      }
+    },
+    "node_modules/@img/sharp-linuxmusl-arm64": {
+      "version": "0.34.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linuxmusl-arm64/-/sharp-linuxmusl-arm64-0.34.5.tgz",
+      "integrity": "sha512-fprJR6GtRsMt6Kyfq44IsChVZeGN97gTD331weR1ex1c1rypDEABN6Tm2xa1wE6lYb5DdEnk03NZPqA7Id21yg==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linuxmusl-arm64": "1.2.4"
+      }
+    },
+    "node_modules/@img/sharp-linuxmusl-x64": {
+      "version": "0.34.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linuxmusl-x64/-/sharp-linuxmusl-x64-0.34.5.tgz",
+      "integrity": "sha512-Jg8wNT1MUzIvhBFxViqrEhWDGzqymo3sV7z7ZsaWbZNDLXRJZoRGrjulp60YYtV4wfY8VIKcWidjojlLcWrd8Q==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linuxmusl-x64": "1.2.4"
+      }
+    },
+    "node_modules/@img/sharp-wasm32": {
+      "version": "0.34.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-wasm32/-/sharp-wasm32-0.34.5.tgz",
+      "integrity": "sha512-OdWTEiVkY2PHwqkbBI8frFxQQFekHaSSkUIJkwzclWZe64O1X4UlUjqqqLaPbUpMOQk6FBu/HtlGXNblIs0huw==",
+      "cpu": [
+        "wasm32"
+      ],
+      "license": "Apache-2.0 AND LGPL-3.0-or-later AND MIT",
+      "optional": true,
+      "dependencies": {
+        "@emnapi/runtime": "^1.7.0"
+      },
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-win32-arm64": {
+      "version": "0.34.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-win32-arm64/-/sharp-win32-arm64-0.34.5.tgz",
+      "integrity": "sha512-WQ3AgWCWYSb2yt+IG8mnC6Jdk9Whs7O0gxphblsLvdhSpSTtmu69ZG1Gkb6NuvxsNACwiPV6cNSZNzt0KPsw7g==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "Apache-2.0 AND LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-win32-ia32": {
+      "version": "0.34.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-win32-ia32/-/sharp-win32-ia32-0.34.5.tgz",
+      "integrity": "sha512-FV9m/7NmeCmSHDD5j4+4pNI8Cp3aW+JvLoXcTUo0IqyjSfAZJ8dIUmijx1qaJsIiU+Hosw6xM5KijAWRJCSgNg==",
+      "cpu": [
+        "ia32"
+      ],
+      "license": "Apache-2.0 AND LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-win32-x64": {
+      "version": "0.34.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-win32-x64/-/sharp-win32-x64-0.34.5.tgz",
+      "integrity": "sha512-+29YMsqY2/9eFEiW93eqWnuLcWcufowXewwSNIT6UwZdUUCrM3oFjMWH/Z6/TMmb4hlFenmfAVbpWeup2jryCw==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "Apache-2.0 AND LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@protobufjs/aspromise": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@protobufjs/aspromise/-/aspromise-1.1.2.tgz",
+      "integrity": "sha512-j+gKExEuLmKwvz3OgROXtrJ2UG2x8Ch2YZUxahh+s1F2HZ+wAceUNLkvy6zKCPVRkU++ZWQrdxsUeQXmcg4uoQ==",
+      "license": "BSD-3-Clause",
+      "optional": true
+    },
+    "node_modules/@protobufjs/base64": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@protobufjs/base64/-/base64-1.1.2.tgz",
+      "integrity": "sha512-AZkcAA5vnN/v4PDqKyMR5lx7hZttPDgClv83E//FMNhR2TMcLUhfRUBHCmSl0oi9zMgDDqRUJkSxO3wm85+XLg==",
+      "license": "BSD-3-Clause",
+      "optional": true
+    },
+    "node_modules/@protobufjs/codegen": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/@protobufjs/codegen/-/codegen-2.0.5.tgz",
+      "integrity": "sha512-zgXFLzW3Ap33e6d0Wlj4MGIm6Ce8O89n/apUaGNB/jx+hw+ruWEp7EwGUshdLKVRCxZW12fp9r40E1mQrf/34g==",
+      "license": "BSD-3-Clause",
+      "optional": true
+    },
+    "node_modules/@protobufjs/eventemitter": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@protobufjs/eventemitter/-/eventemitter-1.1.1.tgz",
+      "integrity": "sha512-vW1GmwMZNnL+gMRaovlh9yZX74kc+TTU3FObkkurpMaRtBfLP3ldjS9KQWlwZgraRE0+dheEEoAxdzcJQ8eXZg==",
+      "license": "BSD-3-Clause",
+      "optional": true
+    },
+    "node_modules/@protobufjs/fetch": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@protobufjs/fetch/-/fetch-1.1.1.tgz",
+      "integrity": "sha512-GpptLrs57adMSuHi3VNj0mAF8dwh36LMaYF6XyJ6JMWlVsc+t42tm1HSEDmOs3A8fC9yyeisgLhsTVQokOZ0zw==",
+      "license": "BSD-3-Clause",
+      "optional": true,
+      "dependencies": {
+        "@protobufjs/aspromise": "^1.1.1"
+      }
+    },
+    "node_modules/@protobufjs/float": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@protobufjs/float/-/float-1.0.2.tgz",
+      "integrity": "sha512-Ddb+kVXlXst9d+R9PfTIxh1EdNkgoRe5tOX6t01f1lYWOvJnSPDBlG241QLzcyPdoNTsblLUdujGSE4RzrTZGQ==",
+      "license": "BSD-3-Clause",
+      "optional": true
+    },
+    "node_modules/@protobufjs/path": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@protobufjs/path/-/path-1.1.2.tgz",
+      "integrity": "sha512-6JOcJ5Tm08dOHAbdR3GrvP+yUUfkjG5ePsHYczMFLq3ZmMkAD98cDgcT2iA1lJ9NVwFd4tH/iSSoe44YWkltEA==",
+      "license": "BSD-3-Clause",
+      "optional": true
+    },
+    "node_modules/@protobufjs/pool": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@protobufjs/pool/-/pool-1.1.0.tgz",
+      "integrity": "sha512-0kELaGSIDBKvcgS4zkjz1PeddatrjYcmMWOlAuAPwAeccUrPHdUqo/J6LiymHHEiJT5NrF1UVwxY14f+fy4WQw==",
+      "license": "BSD-3-Clause",
+      "optional": true
+    },
+    "node_modules/@protobufjs/utf8": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@protobufjs/utf8/-/utf8-1.1.2.tgz",
+      "integrity": "sha512-b1UQwcEZ4yCnMCD8DAL1VlbvBJE9/IX4FTIp7BG1xYpf29SLazLSrqUkj4w7Y5y7cCVP6E5tcqqcI0xemPkHug==",
+      "license": "BSD-3-Clause",
+      "optional": true
+    },
+    "node_modules/@puppeteer/browsers": {
+      "version": "3.0.6",
+      "resolved": "https://registry.npmjs.org/@puppeteer/browsers/-/browsers-3.0.6.tgz",
+      "integrity": "sha512-B/gKoqlFkzhvzsI6jo9K1cZz9o5ypviVv/xu8CwA4grZzyVwN+XfkT+tu8T1zrauuEXv6VhS2oGX+6NL95WcKA==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "modern-tar": "^0.7.6",
+        "yargs": "^18.0.0"
+      },
+      "bin": {
+        "browsers": "lib/main-cli.js"
+      },
+      "engines": {
+        "node": ">=22.12.0"
+      },
+      "peerDependencies": {
+        "proxy-agent": ">=8.0.1",
+        "yauzl": "^2.10.0 || ^3.4.0"
+      },
+      "peerDependenciesMeta": {
+        "proxy-agent": {
+          "optional": true
+        },
+        "yauzl": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@swc/helpers": {
+      "version": "0.5.23",
+      "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.23.tgz",
+      "integrity": "sha512-5lSsMOTXURePglDfvuAQUqkGek9Hg2kksOYay2m0+XR++b2NWYL/4sWyuvVBIs8oKnJaxkdi9whaL/sqN13afw==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "tslib": "^2.8.0"
+      }
+    },
+    "node_modules/@types/node": {
+      "version": "26.1.1",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-26.1.1.tgz",
+      "integrity": "sha512-nxAkRSVkN1Y0JC1W8ky/fTfkGsMmcrRsbx+3XoZE+rMOX71kLYTV7fLXpqud1GpbpP5TuffXFqfX7fH2GgZREw==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "undici-types": "~8.3.0"
+      }
+    },
+    "node_modules/@types/retry": {
+      "version": "0.12.0",
+      "resolved": "https://registry.npmjs.org/@types/retry/-/retry-0.12.0.tgz",
+      "integrity": "sha512-wWKOClTTiizcZhXnPY4wikVAwmdYHp8q6DmC+EJUzAMsycb7HB32Kh9RN4+0gExjmPmZSAQjgURXIGATPegAvA==",
+      "license": "MIT",
+      "optional": true
+    },
+    "node_modules/adm-zip": {
+      "version": "0.5.18",
+      "resolved": "https://registry.npmjs.org/adm-zip/-/adm-zip-0.5.18.tgz",
+      "integrity": "sha512-ufJnssQGbxzLNS1Ho9bCtX4rQKCCvoVuDLHoJyc3F9dOGDB4BkWs2Ci0kv53lqocAEQ/Cbi+I2XCsNYGqVYqng==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=12.0"
+      }
+    },
+    "node_modules/agent-base": {
+      "version": "7.1.4",
+      "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-7.1.4.tgz",
+      "integrity": "sha512-MnA+YT8fwfJPgBx3m60MNqakm30XOkyIoH1y6huTQvC0PwZG7ki8NacLBcrPbNoo8vEZy7Jpuk7+jMO+CUovTQ==",
+      "license": "MIT",
+      "optional": true,
+      "engines": {
+        "node": ">= 14"
+      }
+    },
+    "node_modules/ansi-regex": {
+      "version": "6.2.2",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.2.2.tgz",
+      "integrity": "sha512-Bq3SmSpyFHaWjPk8If9yc6svM8c56dB5BAtW4Qbw5jHTwwXXcTLoRMkpDJp6VL0XzlWaCHTXrkFURMYmD0sLqg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-regex?sponsor=1"
+      }
+    },
+    "node_modules/ansi-styles": {
+      "version": "6.2.3",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-6.2.3.tgz",
+      "integrity": "sha512-4Dj6M28JB+oAH8kFkTLUo+a2jwOFkuqb3yucU0CANcRRUbxS0cP0nZYCGjcc3BNXwRIsUVmDGgzawme7zvJHvg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/base64-js": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/base64-js/-/base64-js-1.5.1.tgz",
+      "integrity": "sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "MIT"
+    },
+    "node_modules/bignumber.js": {
+      "version": "9.3.1",
+      "resolved": "https://registry.npmjs.org/bignumber.js/-/bignumber.js-9.3.1.tgz",
+      "integrity": "sha512-Ko0uX15oIUS7wJ3Rb30Fs6SkVbLmPBAKdlm7q9+ak9bbIeFf0MwuBsQV6z7+X768/cHsfg+WlysDWJcmthjsjQ==",
+      "license": "MIT",
+      "optional": true,
+      "engines": {
+        "node": "*"
+      }
+    },
+    "node_modules/boolean": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/boolean/-/boolean-3.2.0.tgz",
+      "integrity": "sha512-d0II/GO9uf9lfUHH2BQsjxzRJZBdsjgsBiW4BvhWk/3qoKwQFjIDVN19PfX8F2D/r9PCMTtLWjYVCFrpeYUzsw==",
+      "deprecated": "Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.",
+      "license": "MIT"
+    },
+    "node_modules/brotli": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/brotli/-/brotli-1.3.3.tgz",
+      "integrity": "sha512-oTKjJdShmDuGW94SyyaoQvAjf30dZaHnjJ8uAF+u2/vGJkJbJPJAT1gDiOJP5v1Zb6f9KEyW/1HpuaWIXtGHPg==",
+      "license": "MIT",
+      "dependencies": {
+        "base64-js": "^1.1.2"
+      }
+    },
+    "node_modules/buffer-equal-constant-time": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/buffer-equal-constant-time/-/buffer-equal-constant-time-1.0.1.tgz",
+      "integrity": "sha512-zRpUiDwd/xk6ADqPMATG8vc9VPrkck7T07OIx0gnjmJAnHnTVXNQG3vfvWNuiZIkwu9KrKdA1iJKfsfTVxE6NA==",
+      "license": "BSD-3-Clause",
+      "optional": true
+    },
+    "node_modules/bundle-name": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/bundle-name/-/bundle-name-4.1.0.tgz",
+      "integrity": "sha512-tjwM5exMg6BGRI+kNmTntNsvdZS1X8BFYS6tnJ2hdH0kVxM6/eVZ2xy+FqStSWvYmtfFMDLIxurorHwDKfDz5Q==",
+      "license": "MIT",
+      "dependencies": {
+        "run-applescript": "^7.0.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/chromium-bidi": {
+      "version": "16.0.1",
+      "resolved": "https://registry.npmjs.org/chromium-bidi/-/chromium-bidi-16.0.1.tgz",
+      "integrity": "sha512-J63PGu/9PpeCwLIcKYyzWP6yaVL5pxuBc0shlYCYM8BaAkmlwiQboXO1iNbOgSDbVklEyYFfNEcHD8oOAWacUA==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "mitt": "^3.0.1",
+        "zod": "^3.24.1"
+      },
+      "engines": {
+        "node": ">=20.19.0 <22.0.0 || >=22.12.0"
+      },
+      "peerDependencies": {
+        "devtools-protocol": "*"
+      }
+    },
+    "node_modules/citty": {
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/citty/-/citty-0.2.2.tgz",
+      "integrity": "sha512-+6vJA3L98yv+IdfKGZHBNiGW5KHn22e/JwID0Strsz8h4S/csAu/OuICwxrg44k5MRiZHWIo8XXuJgQTriRP4w==",
+      "license": "MIT"
+    },
+    "node_modules/cliui": {
+      "version": "9.0.1",
+      "resolved": "https://registry.npmjs.org/cliui/-/cliui-9.0.1.tgz",
+      "integrity": "sha512-k7ndgKhwoQveBL+/1tqGJYNz097I7WOvwbmmU2AR5+magtbjPWQTS1C5vzGkBC8Ym8UWRzfKUzUUqFLypY4Q+w==",
+      "license": "ISC",
+      "dependencies": {
+        "string-width": "^7.2.0",
+        "strip-ansi": "^7.1.0",
+        "wrap-ansi": "^9.0.0"
+      },
+      "engines": {
+        "node": ">=20"
+      }
+    },
+    "node_modules/clone": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/clone/-/clone-2.1.2.tgz",
+      "integrity": "sha512-3Pe/CF1Nn94hyhIYpjtiLhdCoEoz0DqQ+988E9gmeEdQZlojxnOb74wctFyuwWQHzqyf9X7C7MG8juUpqBJT8w==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
+    "node_modules/compare-versions": {
+      "version": "6.1.1",
+      "resolved": "https://registry.npmjs.org/compare-versions/-/compare-versions-6.1.1.tgz",
+      "integrity": "sha512-4hm4VPpIecmlg59CHXnRDnqGplJFrbLG4aFEl5vl6cK1u76ws3LLvX7ikFnTDl5vo39sjWD6AaDPYodJp/NNHg==",
+      "license": "MIT"
+    },
+    "node_modules/data-uri-to-buffer": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/data-uri-to-buffer/-/data-uri-to-buffer-4.0.1.tgz",
+      "integrity": "sha512-0R9ikRb668HB7QDxT1vkpuUBtqc53YyAwMwGeUFKRojY/NWKvdZ+9UYtRfGmhqNbRkTSVpMbmyhXipFFv2cb/A==",
+      "license": "MIT",
+      "optional": true,
+      "engines": {
+        "node": ">= 12"
+      }
+    },
+    "node_modules/debug": {
+      "version": "4.4.3",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.3.tgz",
+      "integrity": "sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA==",
+      "license": "MIT",
+      "dependencies": {
+        "ms": "^2.1.3"
+      },
+      "engines": {
+        "node": ">=6.0"
+      },
+      "peerDependenciesMeta": {
+        "supports-color": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/default-browser": {
+      "version": "5.5.0",
+      "resolved": "https://registry.npmjs.org/default-browser/-/default-browser-5.5.0.tgz",
+      "integrity": "sha512-H9LMLr5zwIbSxrmvikGuI/5KGhZ8E2zH3stkMgM5LpOWDutGM2JZaj460Udnf1a+946zc7YBgrqEWwbk7zHvGw==",
+      "license": "MIT",
+      "dependencies": {
+        "bundle-name": "^4.1.0",
+        "default-browser-id": "^5.0.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/default-browser-id": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/default-browser-id/-/default-browser-id-5.0.1.tgz",
+      "integrity": "sha512-x1VCxdX4t+8wVfd1so/9w+vQ4vx7lKd2Qp5tDRutErwmR85OgmfX7RlLRMWafRMY7hbEiXIbudNrjOAPa/hL8Q==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/define-data-property": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/define-data-property/-/define-data-property-1.1.4.tgz",
+      "integrity": "sha512-rBMvIzlpA8v6E+SJZoo++HAYqsLrkg7MSfIinMPFhmkorw7X+dOXVJQs+QT69zGkzMyfDnIMN2Wid1+NbL3T+A==",
+      "license": "MIT",
+      "dependencies": {
+        "es-define-property": "^1.0.0",
+        "es-errors": "^1.3.0",
+        "gopd": "^1.0.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/define-lazy-prop": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/define-lazy-prop/-/define-lazy-prop-3.0.0.tgz",
+      "integrity": "sha512-N+MeXYoqr3pOgn8xfyRPREN7gHakLYjhsHhWGT3fWAiL4IkAt0iDw14QiiEm2bE30c5XX5q0FtAA3CK5f9/BUg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/define-properties": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/define-properties/-/define-properties-1.2.1.tgz",
+      "integrity": "sha512-8QmQKqEASLd5nx0U1B1okLElbUuuttJ/AnYmRXbbbGDWh6uS208EjD4Xqq/I9wK7u0v6O08XhTWnt5XtEbR6Dg==",
+      "license": "MIT",
+      "dependencies": {
+        "define-data-property": "^1.0.1",
+        "has-property-descriptors": "^1.0.0",
+        "object-keys": "^1.1.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/detect-libc": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.1.2.tgz",
+      "integrity": "sha512-Btj2BOOO83o3WyH59e8MgXsxEQVcarkUOpEYrubB0urwnN10yQ364rsiByU11nZlqWYZm05i/of7io4mzihBtQ==",
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/detect-node": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/detect-node/-/detect-node-2.1.0.tgz",
+      "integrity": "sha512-T0NIuQpnTvFDATNuHN5roPwSBG83rFsuO+MXXH9/3N1eFbn4wcPjttvjMLEPWJ0RGUYgQE7cGgS3tNxbqCGM7g==",
+      "license": "MIT"
+    },
+    "node_modules/devtools-protocol": {
+      "version": "0.0.1638949",
+      "resolved": "https://registry.npmjs.org/devtools-protocol/-/devtools-protocol-0.0.1638949.tgz",
+      "integrity": "sha512-mXwg4Fqnv0WR4iuAT/gYUmctNkjILwXFHyZ+m7Ty1dfr0ezZt2U3gnrrJTfRobJTHoXf+IbuFvFITzLrLFjwJA==",
+      "license": "BSD-3-Clause"
+    },
+    "node_modules/dfa": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/dfa/-/dfa-1.2.0.tgz",
+      "integrity": "sha512-ED3jP8saaweFTjeGX8HQPjeC1YYyZs98jGNZx6IiBvxW7JG5v492kamAQB3m2wop07CvU/RQmzcKr6bgcC5D/Q==",
+      "license": "MIT"
+    },
+    "node_modules/ecdsa-sig-formatter": {
+      "version": "1.0.11",
+      "resolved": "https://registry.npmjs.org/ecdsa-sig-formatter/-/ecdsa-sig-formatter-1.0.11.tgz",
+      "integrity": "sha512-nagl3RYrbNv6kQkeJIpt6NJZy8twLB/2vtz6yN9Z4vRKHN4/QZJIEbqohALSgwKdnksuY3k5Addp5lg8sVoVcQ==",
+      "license": "Apache-2.0",
+      "optional": true,
+      "dependencies": {
+        "safe-buffer": "^5.0.1"
+      }
+    },
+    "node_modules/emoji-regex": {
+      "version": "10.6.0",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-10.6.0.tgz",
+      "integrity": "sha512-toUI84YS5YmxW219erniWD0CIVOo46xGKColeNQRgOzDorgBi1v4D71/OFzgD9GO2UGKIv1C3Sp8DAn0+j5w7A==",
+      "license": "MIT"
+    },
+    "node_modules/es-define-property": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/es-define-property/-/es-define-property-1.0.1.tgz",
+      "integrity": "sha512-e3nRfgfUZ4rNGL232gUgX06QNyyez04KdjFrF+LTRoOXmrOgFKDg4BCdsjW8EnT69eqdYGmRpJwiPVYNrCaW3g==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/es-errors": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/es-errors/-/es-errors-1.3.0.tgz",
+      "integrity": "sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/es6-error": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/es6-error/-/es6-error-4.1.1.tgz",
+      "integrity": "sha512-Um/+FxMr9CISWh0bi5Zv0iOD+4cFh5qLeks1qhAopKVAJw3drgKbKySikp7wGhDL0HPeaja0P5ULZrxLkniUVg==",
+      "license": "MIT"
+    },
+    "node_modules/esbuild": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.25.12.tgz",
+      "integrity": "sha512-bbPBYYrtZbkt6Os6FiTLCTFxvq4tt3JKall1vRwshA3fdVztsLAatFaZobhkBC8/BrPetoa0oksYoKXoG4ryJg==",
+      "hasInstallScript": true,
+      "license": "MIT",
+      "bin": {
+        "esbuild": "bin/esbuild"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "optionalDependencies": {
+        "@esbuild/aix-ppc64": "0.25.12",
+        "@esbuild/android-arm": "0.25.12",
+        "@esbuild/android-arm64": "0.25.12",
+        "@esbuild/android-x64": "0.25.12",
+        "@esbuild/darwin-arm64": "0.25.12",
+        "@esbuild/darwin-x64": "0.25.12",
+        "@esbuild/freebsd-arm64": "0.25.12",
+        "@esbuild/freebsd-x64": "0.25.12",
+        "@esbuild/linux-arm": "0.25.12",
+        "@esbuild/linux-arm64": "0.25.12",
+        "@esbuild/linux-ia32": "0.25.12",
+        "@esbuild/linux-loong64": "0.25.12",
+        "@esbuild/linux-mips64el": "0.25.12",
+        "@esbuild/linux-ppc64": "0.25.12",
+        "@esbuild/linux-riscv64": "0.25.12",
+        "@esbuild/linux-s390x": "0.25.12",
+        "@esbuild/linux-x64": "0.25.12",
+        "@esbuild/netbsd-arm64": "0.25.12",
+        "@esbuild/netbsd-x64": "0.25.12",
+        "@esbuild/openbsd-arm64": "0.25.12",
+        "@esbuild/openbsd-x64": "0.25.12",
+        "@esbuild/openharmony-arm64": "0.25.12",
+        "@esbuild/sunos-x64": "0.25.12",
+        "@esbuild/win32-arm64": "0.25.12",
+        "@esbuild/win32-ia32": "0.25.12",
+        "@esbuild/win32-x64": "0.25.12"
+      }
+    },
+    "node_modules/escalade": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.2.0.tgz",
+      "integrity": "sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/escape-string-regexp": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
+      "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/extend": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/extend/-/extend-3.0.2.tgz",
+      "integrity": "sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g==",
+      "license": "MIT",
+      "optional": true
+    },
+    "node_modules/fast-deep-equal": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
+      "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==",
+      "license": "MIT"
+    },
+    "node_modules/fetch-blob": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/fetch-blob/-/fetch-blob-3.2.0.tgz",
+      "integrity": "sha512-7yAQpD2UMJzLi1Dqv7qFYnPbaPx7ZfFK6PiIxQ4PfkGPyNyl2Ugx+a/umUonmKqjhM4DnfbMvdX6otXq83soQQ==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/jimmywarting"
+        },
+        {
+          "type": "paypal",
+          "url": "https://paypal.me/jimmywarting"
+        }
+      ],
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "node-domexception": "^1.0.0",
+        "web-streams-polyfill": "^3.0.3"
+      },
+      "engines": {
+        "node": "^12.20 || >= 14.13"
+      }
+    },
+    "node_modules/fontkit": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/fontkit/-/fontkit-2.0.4.tgz",
+      "integrity": "sha512-syetQadaUEDNdxdugga9CpEYVaQIxOwk7GlwZWWZ19//qW4zE5bknOKeMBDYAASwnpaSHKJITRLMF9m1fp3s6g==",
+      "license": "MIT",
+      "dependencies": {
+        "@swc/helpers": "^0.5.12",
+        "brotli": "^1.3.2",
+        "clone": "^2.1.2",
+        "dfa": "^1.2.0",
+        "fast-deep-equal": "^3.1.3",
+        "restructure": "^3.0.0",
+        "tiny-inflate": "^1.0.3",
+        "unicode-properties": "^1.4.0",
+        "unicode-trie": "^2.0.0"
+      }
+    },
+    "node_modules/formdata-polyfill": {
+      "version": "4.0.10",
+      "resolved": "https://registry.npmjs.org/formdata-polyfill/-/formdata-polyfill-4.0.10.tgz",
+      "integrity": "sha512-buewHzMvYL29jdeQTVILecSaZKnt/RJWjoZCF5OW60Z67/GmSLBkOFM7qh1PI3zFNtJbaZL5eQu1vLfazOwj4g==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "fetch-blob": "^3.1.2"
+      },
+      "engines": {
+        "node": ">=12.20.0"
+      }
+    },
+    "node_modules/gaxios": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/gaxios/-/gaxios-7.2.0.tgz",
+      "integrity": "sha512-CUVb4wcYe+771XevyH6HtGmXFAGGKkIC3kswAP8Z1JCe0j80JMaTPZH930DWFrvo0atjh18Arc0pEyUCWa5bfg==",
+      "license": "Apache-2.0",
+      "optional": true,
+      "dependencies": {
+        "extend": "^3.0.2",
+        "https-proxy-agent": "^7.0.1",
+        "node-fetch": "^3.3.2"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/gcp-metadata": {
+      "version": "8.1.2",
+      "resolved": "https://registry.npmjs.org/gcp-metadata/-/gcp-metadata-8.1.2.tgz",
+      "integrity": "sha512-zV/5HKTfCeKWnxG0Dmrw51hEWFGfcF2xiXqcA3+J90WDuP0SvoiSO5ORvcBsifmx/FoIjgQN3oNOGaQ5PhLFkg==",
+      "license": "Apache-2.0",
+      "optional": true,
+      "dependencies": {
+        "gaxios": "^7.0.0",
+        "google-logging-utils": "^1.0.0",
+        "json-bigint": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/get-caller-file": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-2.0.5.tgz",
+      "integrity": "sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==",
+      "license": "ISC",
+      "engines": {
+        "node": "6.* || 8.* || >= 10.*"
+      }
+    },
+    "node_modules/get-east-asian-width": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/get-east-asian-width/-/get-east-asian-width-1.6.0.tgz",
+      "integrity": "sha512-QRbvDIbx6YklUe6RxeTeleMR0yv3cYH6PsPZHcnVn7xv7zO1BHN8r0XETu8n6Ye3Q+ahtSarc3WgtNWmehIBfA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/giget": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/giget/-/giget-3.3.0.tgz",
+      "integrity": "sha512-gzi2D96p+AMfDcmJHGDj3KJ9NRiwvlFAU5yfa3ROwWZmFUjX4P43x3BcyRaOMMLto1vUo7C+86+MFhYTl6Ryiw==",
+      "license": "MIT",
+      "bin": {
+        "giget": "dist/cli.mjs"
+      }
+    },
+    "node_modules/global-agent": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/global-agent/-/global-agent-3.0.0.tgz",
+      "integrity": "sha512-PT6XReJ+D07JvGoxQMkT6qji/jVNfX/h364XHZOWeRzy64sSFr+xJ5OX7LI3b4MPQzdL4H8Y8M0xzPpsVMwA8Q==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "boolean": "^3.0.1",
+        "es6-error": "^4.1.1",
+        "matcher": "^3.0.0",
+        "roarr": "^2.15.3",
+        "semver": "^7.3.2",
+        "serialize-error": "^7.0.1"
+      },
+      "engines": {
+        "node": ">=10.0"
+      }
+    },
+    "node_modules/globalthis": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/globalthis/-/globalthis-1.0.4.tgz",
+      "integrity": "sha512-DpLKbNU4WylpxJykQujfCcwYWiV/Jhm50Goo0wrVILAv5jOr9d+H+UR3PhSCD2rCCEIg0uc+G+muBTwD54JhDQ==",
+      "license": "MIT",
+      "dependencies": {
+        "define-properties": "^1.2.1",
+        "gopd": "^1.0.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/google-auth-library": {
+      "version": "10.9.0",
+      "resolved": "https://registry.npmjs.org/google-auth-library/-/google-auth-library-10.9.0.tgz",
+      "integrity": "sha512-xtvUqvINPhTaBm7nXqlYPcrMHJPm1lCNdSovxnKKhTm+4JsvQ+KGVYJViLoH9Yxu8w+T0Qv5HubzYT9BLrppJg==",
+      "license": "Apache-2.0",
+      "optional": true,
+      "dependencies": {
+        "base64-js": "^1.3.0",
+        "ecdsa-sig-formatter": "^1.0.11",
+        "gaxios": "^7.1.4",
+        "gcp-metadata": "8.1.2",
+        "google-logging-utils": "1.1.3",
+        "jws": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/google-logging-utils": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/google-logging-utils/-/google-logging-utils-1.1.3.tgz",
+      "integrity": "sha512-eAmLkjDjAFCVXg7A1unxHsLf961m6y17QFqXqAXGj/gVkKFrEICfStRfwUlGNfeCEjNRa32JEWOUTlYXPyyKvA==",
+      "license": "Apache-2.0",
+      "optional": true,
+      "engines": {
+        "node": ">=14"
+      }
+    },
+    "node_modules/gopd": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.2.0.tgz",
+      "integrity": "sha512-ZUKRh6/kUFoAiTAtTYPZJ3hw9wNxx+BIBOijnlG9PnrJsCcSjs1wyyD6vJpaYtgnzDrKYRSqf3OO6Rfa93xsRg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/has-property-descriptors": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/has-property-descriptors/-/has-property-descriptors-1.0.2.tgz",
+      "integrity": "sha512-55JNKuIW+vq4Ke1BjOTjM2YctQIvCT7GFzHwmfZPGo5wnrgkid0YQtnAleFSqumZm4az3n2BS+erby5ipJdgrg==",
+      "license": "MIT",
+      "dependencies": {
+        "es-define-property": "^1.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/hono": {
+      "version": "4.12.31",
+      "resolved": "https://registry.npmjs.org/hono/-/hono-4.12.31.tgz",
+      "integrity": "sha512-zJIHFrl6bq3RDd2YusFNCDlM8qUprxKswyi/OPzPyzKDdyBXDqWx8bZlZ7R+saTdSTatUmb3O7K4SspGPaEOQg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=16.9.0"
+      }
+    },
+    "node_modules/https-proxy-agent": {
+      "version": "7.0.6",
+      "resolved": "https://registry.npmjs.org/https-proxy-agent/-/https-proxy-agent-7.0.6.tgz",
+      "integrity": "sha512-vK9P5/iUfdl95AI+JVyUuIcVtd4ofvtrOr3HNtM2yxC9bnMbEdp3x01OhQNnjb8IJYi38VlTE3mBXwcfvywuSw==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "agent-base": "^7.1.2",
+        "debug": "4"
+      },
+      "engines": {
+        "node": ">= 14"
+      }
+    },
+    "node_modules/hyperframes": {
+      "version": "0.7.64",
+      "resolved": "https://registry.npmjs.org/hyperframes/-/hyperframes-0.7.64.tgz",
+      "integrity": "sha512-AsJnxNpWGqiE5CMRpVAcYu0zrqM4g+TGWMBqIek7J4tZwcKrXAn/CbsDfv58qVY9x0e9wH8mWwPuOwEV5FTwGQ==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@hono/node-server": "^1.8.0",
+        "@puppeteer/browsers": "^3.0.6",
+        "adm-zip": "^0.5.16",
+        "citty": "^0.2.1",
+        "compare-versions": "^6.1.1",
+        "debug": "^4.4.0",
+        "esbuild": "^0.25.12",
+        "fontkit": "^2.0.4",
+        "giget": "^3.2.0",
+        "hono": "^4.0.0",
+        "ignore": "^5.3.2",
+        "onnxruntime-node": "1.23.2",
+        "open": "^10.0.0",
+        "postcss": "^8.5.8",
+        "prettier": "^3.8.1",
+        "puppeteer-core": "^25.2.1",
+        "sharp": "^0.34.5"
+      },
+      "bin": {
+        "hyperframes": "bin/hyperframes.mjs"
+      },
+      "engines": {
+        "node": ">=22"
+      },
+      "optionalDependencies": {
+        "@google/genai": "^1.50.1"
+      }
+    },
+    "node_modules/ignore": {
+      "version": "5.3.2",
+      "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.2.tgz",
+      "integrity": "sha512-hsBTNUqQTDwkWtcdYI2i06Y/nUBEsNEDJKjWdigLvegy8kDuJAS8uRlpkkcQpyEXL0Z/pjDy5HBmMjRCJ2gq+g==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 4"
+      }
+    },
+    "node_modules/is-docker": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/is-docker/-/is-docker-3.0.0.tgz",
+      "integrity": "sha512-eljcgEDlEns/7AXFosB5K/2nCM4P7FQPkGc/DWLy5rmFEWvZayGrik1d9/QIY5nJ4f9YsVvBkA6kJpHn9rISdQ==",
+      "license": "MIT",
+      "bin": {
+        "is-docker": "cli.js"
+      },
+      "engines": {
+        "node": "^12.20.0 || ^14.13.1 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/is-inside-container": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/is-inside-container/-/is-inside-container-1.0.0.tgz",
+      "integrity": "sha512-KIYLCCJghfHZxqjYBE7rEy0OBuTd5xCHS7tHVgvCLkx7StIoaxwNW3hCALgEUjFfeRk+MG/Qxmp/vtETEF3tRA==",
+      "license": "MIT",
+      "dependencies": {
+        "is-docker": "^3.0.0"
+      },
+      "bin": {
+        "is-inside-container": "cli.js"
+      },
+      "engines": {
+        "node": ">=14.16"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/is-wsl": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/is-wsl/-/is-wsl-3.1.1.tgz",
+      "integrity": "sha512-e6rvdUCiQCAuumZslxRJWR/Doq4VpPR82kqclvcS0efgt430SlGIk05vdCN58+VrzgtIcfNODjozVielycD4Sw==",
+      "license": "MIT",
+      "dependencies": {
+        "is-inside-container": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=16"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/json-bigint": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/json-bigint/-/json-bigint-1.0.0.tgz",
+      "integrity": "sha512-SiPv/8VpZuWbvLSMtTDU8hEfrZWg/mH/nV/b4o0CYbSxu1UIQPLdwKOCIyLQX+VIPO5vrLX3i8qtqFyhdPSUSQ==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "bignumber.js": "^9.0.0"
+      }
+    },
+    "node_modules/json-stringify-safe": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/json-stringify-safe/-/json-stringify-safe-5.0.1.tgz",
+      "integrity": "sha512-ZClg6AaYvamvYEE82d3Iyd3vSSIjQ+odgjaTzRuO3s7toCdFKczob2i0zCh7JE8kWn17yvAWhUVxvqGwUalsRA==",
+      "license": "ISC"
+    },
+    "node_modules/jwa": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/jwa/-/jwa-2.0.1.tgz",
+      "integrity": "sha512-hRF04fqJIP8Abbkq5NKGN0Bbr3JxlQ+qhZufXVr0DvujKy93ZCbXZMHDL4EOtodSbCWxOqR8MS1tXA5hwqCXDg==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "buffer-equal-constant-time": "^1.0.1",
+        "ecdsa-sig-formatter": "1.0.11",
+        "safe-buffer": "^5.0.1"
+      }
+    },
+    "node_modules/jws": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/jws/-/jws-4.0.1.tgz",
+      "integrity": "sha512-EKI/M/yqPncGUUh44xz0PxSidXFr/+r0pA70+gIYhjv+et7yxM+s29Y+VGDkovRofQem0fs7Uvf4+YmAdyRduA==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "jwa": "^2.0.1",
+        "safe-buffer": "^5.0.1"
+      }
+    },
+    "node_modules/long": {
+      "version": "5.3.2",
+      "resolved": "https://registry.npmjs.org/long/-/long-5.3.2.tgz",
+      "integrity": "sha512-mNAgZ1GmyNhD7AuqnTG3/VQ26o760+ZYBPKjPvugO8+nLbYfX6TVpJPseBvopbdY+qpZ/lKUnmEc1LeZYS3QAA==",
+      "license": "Apache-2.0",
+      "optional": true
+    },
+    "node_modules/matcher": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/matcher/-/matcher-3.0.0.tgz",
+      "integrity": "sha512-OkeDaAZ/bQCxeFAozM55PKcKU0yJMPGifLwV4Qgjitu+5MoAfSQN4lsLJeXZ1b8w0x+/Emda6MZgXS1jvsapng==",
+      "license": "MIT",
+      "dependencies": {
+        "escape-string-regexp": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/mitt": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/mitt/-/mitt-3.0.1.tgz",
+      "integrity": "sha512-vKivATfr97l2/QBCYAkXYDbrIWPM2IIKEl7YPhjCvKlG3kE2gm+uBo6nEXK3M5/Ffh/FLpKExzOQ3JJoJGFKBw==",
+      "license": "MIT"
+    },
+    "node_modules/modern-tar": {
+      "version": "0.7.6",
+      "resolved": "https://registry.npmjs.org/modern-tar/-/modern-tar-0.7.6.tgz",
+      "integrity": "sha512-sweCIVXzx1aIGTCdzcMlSZt1h8k5Tmk08VNAuRk3IU28XamGiOH5ypi11g6De2CH7PhYqSSnGy2A/EFhbWnVKg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=18.0.0"
+      }
+    },
+    "node_modules/ms": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
+      "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
+      "license": "MIT"
+    },
+    "node_modules/nanoid": {
+      "version": "3.3.16",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.16.tgz",
+      "integrity": "sha512-bzlKTyNJ7+LdGIIwy8ijFpIqEQIvafahV7eYykJ8Cvh42EdJeODoJ6gUJXpQJvej1BddH8OqTXZNE/KfbWAu8Q==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "bin": {
+        "nanoid": "bin/nanoid.cjs"
+      },
+      "engines": {
+        "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
+      }
+    },
+    "node_modules/node-domexception": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/node-domexception/-/node-domexception-1.0.0.tgz",
+      "integrity": "sha512-/jKZoMpw0F8GRwl4/eLROPA3cfcXtLApP0QzLmUT/HuPCZWyB7IY9ZrMeKw2O/nFIqPQB3PVM9aYm0F312AXDQ==",
+      "deprecated": "Use your platform's native DOMException instead",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/jimmywarting"
+        },
+        {
+          "type": "github",
+          "url": "https://paypal.me/jimmywarting"
+        }
+      ],
+      "license": "MIT",
+      "optional": true,
+      "engines": {
+        "node": ">=10.5.0"
+      }
+    },
+    "node_modules/node-fetch": {
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-3.3.2.tgz",
+      "integrity": "sha512-dRB78srN/l6gqWulah9SrxeYnxeddIG30+GOqK/9OlLVyLg3HPnr6SqOWTWOXKRwC2eGYCkZ59NNuSgvSrpgOA==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "data-uri-to-buffer": "^4.0.0",
+        "fetch-blob": "^3.1.4",
+        "formdata-polyfill": "^4.0.10"
+      },
+      "engines": {
+        "node": "^12.20.0 || ^14.13.1 || >=16.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/node-fetch"
+      }
+    },
+    "node_modules/object-keys": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/object-keys/-/object-keys-1.1.1.tgz",
+      "integrity": "sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/onnxruntime-common": {
+      "version": "1.23.2",
+      "resolved": "https://registry.npmjs.org/onnxruntime-common/-/onnxruntime-common-1.23.2.tgz",
+      "integrity": "sha512-5LFsC9Dukzp2WV6kNHYLNzp8sT6V02IubLCbzw2Xd6X5GOlr65gAX6xiJwyi2URJol/s71gaQLC5F2C25AAR2w==",
+      "license": "MIT"
+    },
+    "node_modules/onnxruntime-node": {
+      "version": "1.23.2",
+      "resolved": "https://registry.npmjs.org/onnxruntime-node/-/onnxruntime-node-1.23.2.tgz",
+      "integrity": "sha512-OBTsG0W8ddBVOeVVVychpVBS87A9YV5sa2hJ6lc025T97Le+J4v++PwSC4XFs1C62SWyNdof0Mh4KvnZgtt4aw==",
+      "hasInstallScript": true,
+      "license": "MIT",
+      "os": [
+        "win32",
+        "darwin",
+        "linux"
+      ],
+      "dependencies": {
+        "adm-zip": "^0.5.16",
+        "global-agent": "^3.0.0",
+        "onnxruntime-common": "1.23.2"
+      }
+    },
+    "node_modules/open": {
+      "version": "10.2.0",
+      "resolved": "https://registry.npmjs.org/open/-/open-10.2.0.tgz",
+      "integrity": "sha512-YgBpdJHPyQ2UE5x+hlSXcnejzAvD0b22U2OuAP+8OnlJT+PjWPxtgmGqKKc+RgTM63U9gN0YzrYc71R2WT/hTA==",
+      "license": "MIT",
+      "dependencies": {
+        "default-browser": "^5.2.1",
+        "define-lazy-prop": "^3.0.0",
+        "is-inside-container": "^1.0.0",
+        "wsl-utils": "^0.1.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/p-retry": {
+      "version": "4.6.2",
+      "resolved": "https://registry.npmjs.org/p-retry/-/p-retry-4.6.2.tgz",
+      "integrity": "sha512-312Id396EbJdvRONlngUx0NydfrIQ5lsYu0znKVUzVvArzEIt08V1qhtyESbGVd1FGX7UKtiFp5uwKZdM8wIuQ==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "@types/retry": "0.12.0",
+        "retry": "^0.13.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/pako": {
+      "version": "0.2.9",
+      "resolved": "https://registry.npmjs.org/pako/-/pako-0.2.9.tgz",
+      "integrity": "sha512-NUcwaKxUxWrZLpDG+z/xZaCgQITkA/Dv4V/T6bw7VON6l1Xz/VnrBqrYjZQ12TamKHzITTfOEIYUj48y2KXImA==",
+      "license": "MIT"
+    },
+    "node_modules/picocolors": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
+      "integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==",
+      "license": "ISC"
+    },
+    "node_modules/postcss": {
+      "version": "8.5.20",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.20.tgz",
+      "integrity": "sha512-lW616l85ucIQL+FocMmL7pQFPqBmwejrCMg+iPxyImlrANNJG9NHq/RkyCZopDhd8C3LA03PHRJDjkbGu8vvug==",
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/postcss"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "nanoid": "^3.3.16",
+        "picocolors": "^1.1.1",
+        "source-map-js": "^1.2.1"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14"
+      }
+    },
+    "node_modules/prettier": {
+      "version": "3.9.5",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.9.5.tgz",
+      "integrity": "sha512-/FVl766LpUfB5vXgCYOYa0MeV/441Ia99AeICQIQFTY/Nw0roZwULcXpku5i1/m5kt/baz+s4Zogspd839HSMg==",
+      "license": "MIT",
+      "bin": {
+        "prettier": "bin/prettier.cjs"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/prettier/prettier?sponsor=1"
+      }
+    },
+    "node_modules/protobufjs": {
+      "version": "7.6.5",
+      "resolved": "https://registry.npmjs.org/protobufjs/-/protobufjs-7.6.5.tgz",
+      "integrity": "sha512-/FPD0nUc9jH6rfFjji9IBqOz4pcSE3CsT1m7Ep6Mdb0LxSUMj8hgl6GomOvZzpNpAqqGaXA0P3VSrZLFzIhQrw==",
+      "hasInstallScript": true,
+      "license": "BSD-3-Clause",
+      "optional": true,
+      "dependencies": {
+        "@protobufjs/aspromise": "^1.1.2",
+        "@protobufjs/base64": "^1.1.2",
+        "@protobufjs/codegen": "^2.0.5",
+        "@protobufjs/eventemitter": "^1.1.1",
+        "@protobufjs/fetch": "^1.1.1",
+        "@protobufjs/float": "^1.0.2",
+        "@protobufjs/path": "^1.1.2",
+        "@protobufjs/pool": "^1.1.0",
+        "@protobufjs/utf8": "^1.1.1",
+        "@types/node": ">=13.7.0",
+        "long": "^5.3.2"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      }
+    },
+    "node_modules/puppeteer-core": {
+      "version": "25.3.0",
+      "resolved": "https://registry.npmjs.org/puppeteer-core/-/puppeteer-core-25.3.0.tgz",
+      "integrity": "sha512-fm+wpUr2oigH1PXZvwgATrM2tYWHMDG8ASzTEe9uukCye4X5Ldx1K5BTHPFKITrIWvQQAQ256d1NpbEveBcKjA==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@puppeteer/browsers": "3.0.6",
+        "chromium-bidi": "16.0.1",
+        "devtools-protocol": "0.0.1638949",
+        "typed-query-selector": "^2.12.2",
+        "webdriver-bidi-protocol": "0.4.2",
+        "ws": "^8.21.0"
+      },
+      "engines": {
+        "node": ">=22.12.0"
+      }
+    },
+    "node_modules/restructure": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/restructure/-/restructure-3.0.2.tgz",
+      "integrity": "sha512-gSfoiOEA0VPE6Tukkrr7I0RBdE0s7H1eFCDBk05l1KIQT1UIKNc5JZy6jdyW6eYH3aR3g5b3PuL77rq0hvwtAw==",
+      "license": "MIT"
+    },
+    "node_modules/retry": {
+      "version": "0.13.1",
+      "resolved": "https://registry.npmjs.org/retry/-/retry-0.13.1.tgz",
+      "integrity": "sha512-XQBQ3I8W1Cge0Seh+6gjj03LbmRFWuoszgK9ooCpwYIrhhoO80pfq4cUkU5DkknwfOfFteRwlZ56PYOGYyFWdg==",
+      "license": "MIT",
+      "optional": true,
+      "engines": {
+        "node": ">= 4"
+      }
+    },
+    "node_modules/roarr": {
+      "version": "2.15.4",
+      "resolved": "https://registry.npmjs.org/roarr/-/roarr-2.15.4.tgz",
+      "integrity": "sha512-CHhPh+UNHD2GTXNYhPWLnU8ONHdI+5DI+4EYIAOaiD63rHeYlZvyh8P+in5999TTSFgUYuKUAjzRI4mdh/p+2A==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "boolean": "^3.0.1",
+        "detect-node": "^2.0.4",
+        "globalthis": "^1.0.1",
+        "json-stringify-safe": "^5.0.1",
+        "semver-compare": "^1.0.0",
+        "sprintf-js": "^1.1.2"
+      },
+      "engines": {
+        "node": ">=8.0"
+      }
+    },
+    "node_modules/run-applescript": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/run-applescript/-/run-applescript-7.1.0.tgz",
+      "integrity": "sha512-DPe5pVFaAsinSaV6QjQ6gdiedWDcRCbUuiQfQa2wmWV7+xC9bGulGI8+TdRmoFkAPaBXk8CrAbnlY2ISniJ47Q==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/safe-buffer": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
+      "integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "MIT",
+      "optional": true
+    },
+    "node_modules/semver": {
+      "version": "7.8.5",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.8.5.tgz",
+      "integrity": "sha512-Y7/KDsb8LjooZpwaqGyulO6DQlksgCncchHGk+sZIY4SBvUocMBEFH5Ur1fI4dV+Jvl0w6cjvucaIi40puRioA==",
+      "license": "ISC",
+      "bin": {
+        "semver": "bin/semver.js"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/semver-compare": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/semver-compare/-/semver-compare-1.0.0.tgz",
+      "integrity": "sha512-YM3/ITh2MJ5MtzaM429anh+x2jiLVjqILF4m4oyQB18W7Ggea7BfqdH/wGMK7dDiMghv/6WG7znWMwUDzJiXow==",
+      "license": "MIT"
+    },
+    "node_modules/serialize-error": {
+      "version": "7.0.1",
+      "resolved": "https://registry.npmjs.org/serialize-error/-/serialize-error-7.0.1.tgz",
+      "integrity": "sha512-8I8TjW5KMOKsZQTvoxjuSIa7foAwPWGOts+6o7sgjz41/qMD9VQHEDxi6PBvK2l0MXUmqZyNpUK+T2tQaaElvw==",
+      "license": "MIT",
+      "dependencies": {
+        "type-fest": "^0.13.1"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/sharp": {
+      "version": "0.34.5",
+      "resolved": "https://registry.npmjs.org/sharp/-/sharp-0.34.5.tgz",
+      "integrity": "sha512-Ou9I5Ft9WNcCbXrU9cMgPBcCK8LiwLqcbywW3t4oDV37n1pzpuNLsYiAV8eODnjbtQlSDwZ2cUEeQz4E54Hltg==",
+      "hasInstallScript": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@img/colour": "^1.0.0",
+        "detect-libc": "^2.1.2",
+        "semver": "^7.7.3"
+      },
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-darwin-arm64": "0.34.5",
+        "@img/sharp-darwin-x64": "0.34.5",
+        "@img/sharp-libvips-darwin-arm64": "1.2.4",
+        "@img/sharp-libvips-darwin-x64": "1.2.4",
+        "@img/sharp-libvips-linux-arm": "1.2.4",
+        "@img/sharp-libvips-linux-arm64": "1.2.4",
+        "@img/sharp-libvips-linux-ppc64": "1.2.4",
+        "@img/sharp-libvips-linux-riscv64": "1.2.4",
+        "@img/sharp-libvips-linux-s390x": "1.2.4",
+        "@img/sharp-libvips-linux-x64": "1.2.4",
+        "@img/sharp-libvips-linuxmusl-arm64": "1.2.4",
+        "@img/sharp-libvips-linuxmusl-x64": "1.2.4",
+        "@img/sharp-linux-arm": "0.34.5",
+        "@img/sharp-linux-arm64": "0.34.5",
+        "@img/sharp-linux-ppc64": "0.34.5",
+        "@img/sharp-linux-riscv64": "0.34.5",
+        "@img/sharp-linux-s390x": "0.34.5",
+        "@img/sharp-linux-x64": "0.34.5",
+        "@img/sharp-linuxmusl-arm64": "0.34.5",
+        "@img/sharp-linuxmusl-x64": "0.34.5",
+        "@img/sharp-wasm32": "0.34.5",
+        "@img/sharp-win32-arm64": "0.34.5",
+        "@img/sharp-win32-ia32": "0.34.5",
+        "@img/sharp-win32-x64": "0.34.5"
+      }
+    },
+    "node_modules/source-map-js": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
+      "integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==",
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/sprintf-js": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.1.3.tgz",
+      "integrity": "sha512-Oo+0REFV59/rz3gfJNKQiBlwfHaSESl1pcGyABQsnnIfWOFt6JNj5gCog2U6MLZ//IGYD+nA8nI+mTShREReaA==",
+      "license": "BSD-3-Clause"
+    },
+    "node_modules/string-width": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-7.2.0.tgz",
+      "integrity": "sha512-tsaTIkKW9b4N+AEj+SVA+WhJzV7/zMhcSu78mLKWSk7cXMOSHsBKFWUs0fWwq8QyK3MgJBQRX6Gbi4kYbdvGkQ==",
+      "license": "MIT",
+      "dependencies": {
+        "emoji-regex": "^10.3.0",
+        "get-east-asian-width": "^1.0.0",
+        "strip-ansi": "^7.1.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/strip-ansi": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.2.0.tgz",
+      "integrity": "sha512-yDPMNjp4WyfYBkHnjIRLfca1i6KMyGCtsVgoKe/z1+6vukgaENdgGBZt+ZmKPc4gavvEZ5OgHfHdrazhgNyG7w==",
+      "license": "MIT",
+      "dependencies": {
+        "ansi-regex": "^6.2.2"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/strip-ansi?sponsor=1"
+      }
+    },
+    "node_modules/tiny-inflate": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/tiny-inflate/-/tiny-inflate-1.0.3.tgz",
+      "integrity": "sha512-pkY1fj1cKHb2seWDy0B16HeWyczlJA9/WW3u3c4z/NiWDsO3DOU5D7nhTLE9CF0yXv/QZFY7sEJmj24dK+Rrqw==",
+      "license": "MIT"
+    },
+    "node_modules/tslib": {
+      "version": "2.8.1",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
+      "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
+      "license": "0BSD"
+    },
+    "node_modules/type-fest": {
+      "version": "0.13.1",
+      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.13.1.tgz",
+      "integrity": "sha512-34R7HTnG0XIJcBSn5XhDd7nNFPRcXYRZrBB2O2jdKqYODldSzBAqzsWoZYYvduky73toYS/ESqxPvkDf/F0XMg==",
+      "license": "(MIT OR CC0-1.0)",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/typed-query-selector": {
+      "version": "2.12.2",
+      "resolved": "https://registry.npmjs.org/typed-query-selector/-/typed-query-selector-2.12.2.tgz",
+      "integrity": "sha512-EOPFbyIub4ngnEdqi2yOcNeDLaX/0jcE1JoAXQDDMIthap7FoN795lc/SHfIq2d416VufXpM8z/lD+WRm2gfOQ==",
+      "license": "MIT"
+    },
+    "node_modules/undici-types": {
+      "version": "8.3.0",
+      "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-8.3.0.tgz",
+      "integrity": "sha512-j375ScV60dom+YkPFIfTLcOiPxkN/buHz5GobjLhixFuANaNs3C9l4GmrWqejgXWJ7BbJcFYpTEUkS1Ge8bpZQ==",
+      "license": "MIT",
+      "optional": true
+    },
+    "node_modules/unicode-properties": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/unicode-properties/-/unicode-properties-1.4.1.tgz",
+      "integrity": "sha512-CLjCCLQ6UuMxWnbIylkisbRj31qxHPAurvena/0iwSVbQ2G1VY5/HjV0IRabOEbDHlzZlRdCrD4NhB0JtU40Pg==",
+      "license": "MIT",
+      "dependencies": {
+        "base64-js": "^1.3.0",
+        "unicode-trie": "^2.0.0"
+      }
+    },
+    "node_modules/unicode-trie": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/unicode-trie/-/unicode-trie-2.0.0.tgz",
+      "integrity": "sha512-x7bc76x0bm4prf1VLg79uhAzKw8DVboClSN5VxJuQ+LKDOVEW9CdH+VY7SP+vX7xCYQqzzgQpFqz15zeLvAtZQ==",
+      "license": "MIT",
+      "dependencies": {
+        "pako": "^0.2.5",
+        "tiny-inflate": "^1.0.0"
+      }
+    },
+    "node_modules/web-streams-polyfill": {
+      "version": "3.3.3",
+      "resolved": "https://registry.npmjs.org/web-streams-polyfill/-/web-streams-polyfill-3.3.3.tgz",
+      "integrity": "sha512-d2JWLCivmZYTSIoge9MsgFCZrt571BikcWGYkjC1khllbTeDlGqZ2D8vD8E/lJa8WGWbb7Plm8/XJYV7IJHZZw==",
+      "license": "MIT",
+      "optional": true,
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/webdriver-bidi-protocol": {
+      "version": "0.4.2",
+      "resolved": "https://registry.npmjs.org/webdriver-bidi-protocol/-/webdriver-bidi-protocol-0.4.2.tgz",
+      "integrity": "sha512-VSV+fzfChirL3e7jay2yUC7B4HQCGtEWEg/MSSQbK+qWbqeGlRLlXTzPpYr3XGUvbpDHumWZBJxgesg4N7dbtA==",
+      "license": "Apache-2.0"
+    },
+    "node_modules/wrap-ansi": {
+      "version": "9.0.2",
+      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-9.0.2.tgz",
+      "integrity": "sha512-42AtmgqjV+X1VpdOfyTGOYRi0/zsoLqtXQckTmqTeybT+BDIbM/Guxo7x3pE2vtpr1ok6xRqM9OpBe+Jyoqyww==",
+      "license": "MIT",
+      "dependencies": {
+        "ansi-styles": "^6.2.1",
+        "string-width": "^7.0.0",
+        "strip-ansi": "^7.1.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
+      }
+    },
+    "node_modules/ws": {
+      "version": "8.21.1",
+      "resolved": "https://registry.npmjs.org/ws/-/ws-8.21.1.tgz",
+      "integrity": "sha512-+0NTnW77fFN/DjQi6k/Sq/Yvk4Sgajw7urW8V+asjXnRgDs9gyGkdb7EzgfhA4goXsRIZKE28fzIXBHEzhuiWw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=10.0.0"
+      },
+      "peerDependencies": {
+        "bufferutil": "^4.0.1",
+        "utf-8-validate": ">=5.0.2"
+      },
+      "peerDependenciesMeta": {
+        "bufferutil": {
+          "optional": true
+        },
+        "utf-8-validate": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/wsl-utils": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/wsl-utils/-/wsl-utils-0.1.0.tgz",
+      "integrity": "sha512-h3Fbisa2nKGPxCpm89Hk33lBLsnaGBvctQopaBSOW/uIs6FTe1ATyAnKFJrzVs9vpGdsTe73WF3V4lIsk4Gacw==",
+      "license": "MIT",
+      "dependencies": {
+        "is-wsl": "^3.1.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/y18n": {
+      "version": "5.0.8",
+      "resolved": "https://registry.npmjs.org/y18n/-/y18n-5.0.8.tgz",
+      "integrity": "sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/yargs": {
+      "version": "18.0.0",
+      "resolved": "https://registry.npmjs.org/yargs/-/yargs-18.0.0.tgz",
+      "integrity": "sha512-4UEqdc2RYGHZc7Doyqkrqiln3p9X2DZVxaGbwhn2pi7MrRagKaOcIKe8L3OxYcbhXLgLFUS3zAYuQjKBQgmuNg==",
+      "license": "MIT",
+      "dependencies": {
+        "cliui": "^9.0.1",
+        "escalade": "^3.1.1",
+        "get-caller-file": "^2.0.5",
+        "string-width": "^7.2.0",
+        "y18n": "^5.0.5",
+        "yargs-parser": "^22.0.0"
+      },
+      "engines": {
+        "node": "^20.19.0 || ^22.12.0 || >=23"
+      }
+    },
+    "node_modules/yargs-parser": {
+      "version": "22.0.0",
+      "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-22.0.0.tgz",
+      "integrity": "sha512-rwu/ClNdSMpkSrUb+d6BRsSkLUq1fmfsY6TOpYzTwvwkg1/NRG85KBy3kq++A8LKQwX6lsu+aWad+2khvuXrqw==",
+      "license": "ISC",
+      "engines": {
+        "node": "^20.19.0 || ^22.12.0 || >=23"
+      }
+    },
+    "node_modules/zod": {
+      "version": "3.25.76",
+      "resolved": "https://registry.npmjs.org/zod/-/zod-3.25.76.tgz",
+      "integrity": "sha512-gzUt/qt81nXsFGKIFcC3YnfEAx5NkunCfnDlvuBSSFS02bcXu4Lmea0AFIUwbLWxWPx3d9p8S5QoaujKcNQxcQ==",
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/colinhacks"
+      }
+    }
+  }
+}
diff --git a/media_worker/package.json b/media_worker/package.json
new file mode 100644
index 000000000..ccef6afa7
--- /dev/null
+++ b/media_worker/package.json
@@ -0,0 +1,9 @@
+{
+  "name": "evo-nexus-media-worker",
+  "version": "1.0.0",
+  "private": true,
+  "description": "Pinned HyperFrames CLI install for the OmniNexus media-worker (social-media-production). Never install via npx without a lockfile in the render critical path.",
+  "dependencies": {
+    "hyperframes": "0.7.64"
+  }
+}
diff --git a/media_worker/requirements.txt b/media_worker/requirements.txt
new file mode 100644
index 000000000..bec92d72b
--- /dev/null
+++ b/media_worker/requirements.txt
@@ -0,0 +1,5 @@
+# Minimal — the worker never imports Flask/SQLAlchemy/chromadb (those live
+# only in the dashboard image). Kept in sync with pyproject.toml's pins for
+# the same two packages.
+requests>=2.31
+jsonschema>=4.21
diff --git a/media_worker/worker.py b/media_worker/worker.py
new file mode 100644
index 000000000..7b88d1bb5
--- /dev/null
+++ b/media_worker/worker.py
@@ -0,0 +1,168 @@
+#!/usr/bin/env python3
+"""media-worker — polling loop that claims queued MediaJobs via the dashboard
+API and runs the CPU-heavy pipeline (OpenCode composition -> HyperFrames
+render -> ffprobe validation) locally, in this isolated container.
+
+Never touches the SQLite DB directly. Like the scheduler/telegram services,
+it talks to the dashboard exclusively through DASHBOARD_API_TOKEN +
+/api/media/jobs/* (see dashboard/backend/routes/media_jobs.py) — a single
+source of truth for state transitions (the state machine is enforced
+server-side), matching the existing service-to-service pattern in this
+project (no service other than the dashboard itself mounts the SQLite
+volume).
+
+Concurrency: exactly one job in flight per process (briefing Etapa 3), and
+`replicas: 1` at the Swarm level makes that also the cluster-wide ceiling.
+"""
+
+from __future__ import annotations
+
+import json
+import os
+import sys
+import time
+import traceback
+from pathlib import Path
+
+BACKEND_DIR = Path(__file__).resolve().parent.parent / "dashboard" / "backend"
+sys.path.insert(0, str(BACKEND_DIR))
+
+from sdk_client import evo  # noqa: E402
+from media_executor import run_opencode_media_job, MediaExecutionError  # noqa: E402
+from media_render import render_composition, run_doctor, RenderError  # noqa: E402
+from media_validation import validate_mp4, ValidationError  # noqa: E402
+from media_manifest import load_and_validate_manifest, ManifestValidationError  # noqa: E402
+from media_workspace import job_dir, media_workspace_root, sha256_file  # noqa: E402
+
+POLL_SECONDS = float(os.environ.get("MEDIA_WORKER_POLL_SECONDS", "10"))
+JOB_TIMEOUT_SECONDS = int(os.environ.get("MEDIA_JOB_TIMEOUT_SECONDS", "3600"))
+MAX_FILE_SIZE_BYTES = int(os.environ.get("MEDIA_MAX_FILE_SIZE_BYTES", str(1024 * 1024 * 1024)))
+HEARTBEAT_FILE = Path(os.environ.get("MEDIA_WORKER_HEARTBEAT_FILE", "/tmp/media-worker.alive"))
+AGENT_NAME = "media-worker"
+
+
+def _touch_heartbeat() -> None:
+    try:
+        HEARTBEAT_FILE.write_text(str(time.time()))
+    except OSError:
+        pass
+
+
+def _patch(job_id: str, **fields) -> dict:
+    return evo.patch(f"/api/media/jobs/{job_id}", fields)
+
+
+def _fail_job(job_id: str, error: str, terminal: bool = False) -> None:
+    status = "failed" if terminal else "retryable_failure"
+    try:
+        _patch(job_id, status=status, last_error=error[:4000])
+    except Exception:
+        print(f"[media-worker] could not report failure for {job_id}: {traceback.format_exc()}", flush=True)
+
+
+def _claim_next_job() -> dict | None:
+    """Try queued jobs first, then jobs eligible for automatic retry.
+    `/run` is the atomic claim (mirrors tickets.checkout_ticket) — if another
+    process (or a human clicking "Iniciar") wins the race, `/run` 409s and we
+    just move on to the next candidate.
+    """
+    for status in ("queued", "retryable_failure"):
+        try:
+            jobs = evo.get("/api/media/jobs", params={"status": status, "limit": 5})
+        except Exception:
+            print(f"[media-worker] failed to list {status} jobs: {traceback.format_exc()}", flush=True)
+            continue
+        for job in jobs or []:
+            try:
+                return evo.post(f"/api/media/jobs/{job['id']}/run", {"agent": AGENT_NAME})
+            except Exception:
+                continue
+    return None
+
+
+def process_job(job: dict) -> None:
+    job_id = job["id"]
+    base = job_dir(job_id)
+    print(f"[media-worker] processing job {job_id} ({job.get('platform')}, {job.get('width')}x{job.get('height')})", flush=True)
+
+    # ── 1. Composition via OpenCode/OmniRoute (never a direct model call) ──
+    _patch(job_id, status="generating")
+    try:
+        run_opencode_media_job(base, timeout_seconds=min(JOB_TIMEOUT_SECONDS, 1800))
+    except MediaExecutionError as exc:
+        try:
+            (base / "logs" / "opencode.ndjson").write_text(
+                json.dumps(exc.result, ensure_ascii=False, indent=2), encoding="utf-8"
+            )
+        except OSError:
+            pass
+        _fail_job(job_id, f"Composição falhou: {exc}")
+        return
+
+    # ── 2. Schema-validate the manifest the agent produced ─────────────
+    try:
+        load_and_validate_manifest(base)
+    except ManifestValidationError as exc:
+        _fail_job(job_id, f"Manifesto inválido: {exc}")
+        return
+
+    # ── 3. Deterministic render — worker-driven, never the agent ───────
+    _patch(job_id, status="rendering")
+    output_path = base / "output" / "final.mp4"
+    try:
+        render_composition(
+            base / "project", output_path,
+            fps=int(job["fps"]), quality="high", timeout_seconds=min(JOB_TIMEOUT_SECONDS, 1800),
+        )
+    except RenderError as exc:
+        try:
+            (base / "logs" / "render.log").write_text(exc.log, encoding="utf-8")
+        except OSError:
+            pass
+        _fail_job(job_id, f"Render falhou: {exc}")
+        return
+
+    # ── 4. ffprobe validation — never trust exit 0 alone ────────────────
+    _patch(job_id, status="validating")
+    try:
+        meta = validate_mp4(
+            output_path,
+            expected_width=int(job["width"]), expected_height=int(job["height"]),
+            expected_duration_seconds=float(job["duration_seconds"]), expected_fps=int(job["fps"]),
+            max_size_bytes=MAX_FILE_SIZE_BYTES, workspace_root=media_workspace_root(),
+        )
+    except ValidationError as exc:
+        _fail_job(job_id, f"Validação falhou: {exc}")
+        return
+
+    checksum = sha256_file(output_path)
+    _patch(job_id, status="ready_for_review", render_path=str(output_path), render_sha256=checksum, **meta.to_dict())
+    print(f"[media-worker] job {job_id} ready_for_review (sha256={checksum[:12]}...)", flush=True)
+
+
+def main() -> None:
+    print(f"[media-worker] started, polling every {POLL_SECONDS}s (job timeout {JOB_TIMEOUT_SECONDS}s)", flush=True)
+    doctor = run_doctor(Path.cwd())
+    print(f"[media-worker] hyperframes doctor ok={doctor['ok']}", flush=True)
+    while True:
+        _touch_heartbeat()
+        try:
+            job = _claim_next_job()
+        except Exception:
+            print(f"[media-worker] poll error: {traceback.format_exc()}", flush=True)
+            job = None
+        if job is None:
+            time.sleep(POLL_SECONDS)
+            continue
+        try:
+            process_job(job)
+        except Exception:
+            print(f"[media-worker] unhandled error processing {job.get('id')}: {traceback.format_exc()}", flush=True)
+            try:
+                _fail_job(job["id"], f"Erro inesperado: {traceback.format_exc()[-2000:]}")
+            except Exception:
+                pass
+
+
+if __name__ == "__main__":
+    main()
diff --git a/opencode.json b/opencode.json
new file mode 100644
index 000000000..d6edbe09b
--- /dev/null
+++ b/opencode.json
@@ -0,0 +1,29 @@
+{
+  "$schema": "https://opencode.ai/config.json",
+  "provider": {
+    "opencode": {
+      "npm": "@ai-sdk/openai-compatible",
+      "name": "OpenCode",
+      "options": {
+        "baseURL": "{env:OPENAI_BASE_URL}",
+        "apiKey": "{env:OPENAI_API_KEY}"
+      },
+      "models": {
+        "auto": {
+          "name": "OpenCode auto (LKGP)"
+        },
+        "auto/coding": {
+          "name": "OpenCode auto/coding"
+        },
+        "xai/grok-4.3": {
+          "name": "xAI Grok 4.3 via OpenCode (teste de custo metrificado, nao-assinatura)"
+        }
+      }
+    }
+  },
+  "agent": {
+    "build": {
+      "steps": 15
+    }
+  }
+}
diff --git a/postiz-vps.env.example b/postiz-vps.env.example
new file mode 100644
index 000000000..dc2d01c9f
--- /dev/null
+++ b/postiz-vps.env.example
@@ -0,0 +1,38 @@
+# Copy to postiz-vps.env and fill secrets, or use the generated local file.
+POSTIZ_DOMAIN=post.workflowapi.com.br
+POSTIZ_DATABASE_HOST=postgres_postgres
+POSTGRES_ADMIN_PASSWORD=PASSWORD_OF_EXISTING_POSTGRES_ROLE
+POSTIZ_DB_PASSWORD=GENERATE_WITH_OPENSSL_RAND_HEX_24
+POSTIZ_JWT_SECRET=GENERATE_WITH_OPENSSL_RAND_BASE64_48
+TEMPORAL_DB_PASSWORD=GENERATE_WITH_OPENSSL_RAND_HEX_24
+POSTIZ_DISABLE_REGISTRATION=false
+POSTIZ_API_LIMIT=100
+TZ=America/Bahia
+FACEBOOK_APP_ID=
+FACEBOOK_APP_SECRET=
+LINKEDIN_CLIENT_ID=
+LINKEDIN_CLIENT_SECRET=
+YOUTUBE_CLIENT_ID=
+YOUTUBE_CLIENT_SECRET=
+EMAIL_PROVIDER=nodemailer
+EMAIL_FROM_ADDRESS=workflowapistudio@gmail.com
+EMAIL_FROM_NAME=Omni Nexus
+EMAIL_HOST=smtp.gmail.com
+EMAIL_PORT=587
+EMAIL_SECURE=false
+EMAIL_USER=workflowapistudio@gmail.com
+EMAIL_PASS=GMAIL_APP_PASSWORD
+X_URL=
+X_API_KEY=
+X_API_SECRET=
+THREADS_APP_ID=
+THREADS_APP_SECRET=
+TIKTOK_CLIENT_ID=
+TIKTOK_CLIENT_SECRET=
+REDDIT_CLIENT_ID=
+REDDIT_CLIENT_SECRET=
+PINTEREST_CLIENT_ID=
+PINTEREST_CLIENT_SECRET=
+DISCORD_CLIENT_ID=
+DISCORD_CLIENT_SECRET=
+DISCORD_BOT_TOKEN_ID=
diff --git a/postiz-vps.stack.yml b/postiz-vps.stack.yml
new file mode 100644
index 000000000..1042abe26
--- /dev/null
+++ b/postiz-vps.stack.yml
@@ -0,0 +1,330 @@
+## ============================================================================
+## Postiz — Docker Swarm / Portainer stack for workflowapi.com.br
+##
+## Public URL: https://post.workflowapi.com.br
+## Existing dependencies:
+##   * Traefik attached to the external overlay network `network_public`
+##   * Shared PostgreSQL service reachable as `postgres_postgres` on that network
+##
+## Before deploying, run scripts/bootstrap_postiz_database.sh on the manager.
+## Configure every ${...} variable in Portainer's stack environment editor.
+## ============================================================================
+version: "3.8"
+
+services:
+  postiz-db-bootstrap:
+    image: postgres:16-alpine
+    environment:
+      PGHOST: ${POSTIZ_DATABASE_HOST:-postgres_postgres}
+      PGPORT: "5432"
+      PGUSER: postgres
+      PGPASSWORD: ${POSTGRES_ADMIN_PASSWORD}
+      POSTIZ_DB_PASSWORD: ${POSTIZ_DB_PASSWORD}
+    command:
+      - /bin/sh
+      - -ec
+      - |
+        until pg_isready -h "$$PGHOST" -p "$$PGPORT" -U "$$PGUSER" -d postgres; do
+          echo "Waiting for shared PostgreSQL at $$PGHOST:$$PGPORT..."
+          sleep 3
+        done
+        psql --dbname postgres --set ON_ERROR_STOP=1 \
+          --set db_password="$$POSTIZ_DB_PASSWORD" <<'SQL'
+        SELECT format('CREATE ROLE postiz_user LOGIN PASSWORD %L', :'db_password')
+        WHERE NOT EXISTS (SELECT 1 FROM pg_roles WHERE rolname = 'postiz_user') \gexec
+
+        SELECT 'CREATE DATABASE postiz_db_local OWNER postiz_user'
+        WHERE NOT EXISTS (SELECT 1 FROM pg_database WHERE datname = 'postiz_db_local') \gexec
+
+        ALTER ROLE postiz_user WITH LOGIN PASSWORD :'db_password';
+        GRANT ALL PRIVILEGES ON DATABASE postiz_db_local TO postiz_user;
+        SQL
+        echo "Postiz database bootstrap completed."
+    networks:
+      - network_public
+    deploy:
+      replicas: 1
+      placement:
+        constraints:
+          - node.role == manager
+      restart_policy:
+        condition: none
+      resources:
+        limits:
+          cpus: "0.25"
+          memory: 128M
+
+  postiz:
+    image: ghcr.io/gitroomhq/postiz-app:latest
+
+    environment:
+      MAIN_URL: https://${POSTIZ_DOMAIN:-post.workflowapi.com.br}
+      FRONTEND_URL: https://${POSTIZ_DOMAIN:-post.workflowapi.com.br}
+      NEXT_PUBLIC_BACKEND_URL: https://${POSTIZ_DOMAIN:-post.workflowapi.com.br}/api
+      BACKEND_INTERNAL_URL: http://localhost:3000
+
+      JWT_SECRET: ${POSTIZ_JWT_SECRET}
+      DATABASE_URL: postgresql://postiz_user:${POSTIZ_DB_PASSWORD}@${POSTIZ_DATABASE_HOST:-postgres_postgres}:5432/postiz_db_local
+      REDIS_URL: redis://postiz-redis:6379
+      TEMPORAL_ADDRESS: temporal:7233
+
+      IS_GENERAL: "true"
+      DISABLE_REGISTRATION: ${POSTIZ_DISABLE_REGISTRATION:-false}
+      API_LIMIT: ${POSTIZ_API_LIMIT:-100}
+      NX_ADD_PLUGINS: "false"
+      TZ: ${TZ:-America/Bahia}
+
+      STORAGE_PROVIDER: local
+      UPLOAD_DIRECTORY: /uploads
+      NEXT_PUBLIC_UPLOAD_DIRECTORY: /uploads
+      NEXT_PUBLIC_UPLOAD_STATIC_DIRECTORY: /uploads
+
+      ## Meta app credentials are used by Facebook and Instagram.
+      FACEBOOK_APP_ID: ${FACEBOOK_APP_ID:-}
+      FACEBOOK_APP_SECRET: ${FACEBOOK_APP_SECRET:-}
+      LINKEDIN_CLIENT_ID: ${LINKEDIN_CLIENT_ID:-}
+      LINKEDIN_CLIENT_SECRET: ${LINKEDIN_CLIENT_SECRET:-}
+      YOUTUBE_CLIENT_ID: ${YOUTUBE_CLIENT_ID:-}
+      YOUTUBE_CLIENT_SECRET: ${YOUTUBE_CLIENT_SECRET:-}
+
+      ## Postiz uses EMAIL_* names, not the N8N_SMTP_* names from n8n.
+      ## Enabling a provider makes new LOCAL accounts require email activation.
+      EMAIL_PROVIDER: ${EMAIL_PROVIDER:-nodemailer}
+      EMAIL_FROM_ADDRESS: ${EMAIL_FROM_ADDRESS:-workflowapistudio@gmail.com}
+      EMAIL_FROM_NAME: ${EMAIL_FROM_NAME:-Omni Nexus}
+      EMAIL_HOST: ${EMAIL_HOST:-smtp.gmail.com}
+      EMAIL_PORT: ${EMAIL_PORT:-587}
+      EMAIL_SECURE: ${EMAIL_SECURE:-false}
+      EMAIL_USER: ${EMAIL_USER:-workflowapistudio@gmail.com}
+      EMAIL_PASS: ${EMAIL_PASS}
+
+      ## Optional providers. Leave blank until needed.
+      X_URL: ${X_URL:-}
+      X_API_KEY: ${X_API_KEY:-}
+      X_API_SECRET: ${X_API_SECRET:-}
+      THREADS_APP_ID: ${THREADS_APP_ID:-}
+      THREADS_APP_SECRET: ${THREADS_APP_SECRET:-}
+      TIKTOK_CLIENT_ID: ${TIKTOK_CLIENT_ID:-}
+      TIKTOK_CLIENT_SECRET: ${TIKTOK_CLIENT_SECRET:-}
+      REDDIT_CLIENT_ID: ${REDDIT_CLIENT_ID:-}
+      REDDIT_CLIENT_SECRET: ${REDDIT_CLIENT_SECRET:-}
+      PINTEREST_CLIENT_ID: ${PINTEREST_CLIENT_ID:-}
+      PINTEREST_CLIENT_SECRET: ${PINTEREST_CLIENT_SECRET:-}
+      DISCORD_CLIENT_ID: ${DISCORD_CLIENT_ID:-}
+      DISCORD_CLIENT_SECRET: ${DISCORD_CLIENT_SECRET:-}
+      DISCORD_BOT_TOKEN_ID: ${DISCORD_BOT_TOKEN_ID:-}
+
+    volumes:
+      - postiz_config:/config
+      - postiz_uploads:/uploads
+
+    healthcheck:
+      test:
+        - CMD-SHELL
+        - >-
+          node -e "fetch('http://localhost:3000/auth/can-register')
+          .then(r=>{if(!r.ok)process.exit(1)})
+          .catch(()=>process.exit(1))"
+      interval: 20s
+      timeout: 10s
+      retries: 15
+      start_period: 120s
+
+    networks:
+      postiz_internal:
+        aliases:
+          - postiz
+      network_public:
+
+    deploy:
+      replicas: 1
+      placement:
+        constraints:
+          - node.role == manager
+      restart_policy:
+        condition: any
+        delay: 10s
+      update_config:
+        order: stop-first
+        failure_action: rollback
+      resources:
+        limits:
+          cpus: "2.00"
+          memory: 3072M
+        reservations:
+          cpus: "0.50"
+          memory: 768M
+      labels:
+        - traefik.enable=true
+        - traefik.docker.network=network_public
+        - traefik.http.routers.postiz.rule=Host(`${POSTIZ_DOMAIN:-post.workflowapi.com.br}`)
+        - traefik.http.routers.postiz.entrypoints=websecure
+        - traefik.http.routers.postiz.tls=true
+        - traefik.http.routers.postiz.tls.certresolver=letsencryptresolver
+        - traefik.http.routers.postiz.service=postiz
+        - traefik.http.services.postiz.loadbalancer.server.port=5000
+        - traefik.http.services.postiz.loadbalancer.passHostHeader=true
+
+  postiz-redis:
+    image: redis:7.2-alpine
+    command: ["redis-server", "--appendonly", "yes", "--save", "60", "1"]
+    volumes:
+      - postiz_redis:/data
+    networks:
+      postiz_internal:
+        aliases:
+          - postiz-redis
+    healthcheck:
+      test: ["CMD", "redis-cli", "ping"]
+      interval: 10s
+      timeout: 3s
+      retries: 10
+    deploy:
+      replicas: 1
+      placement:
+        constraints:
+          - node.role == manager
+      restart_policy:
+        condition: any
+      resources:
+        limits:
+          cpus: "0.25"
+          memory: 256M
+
+  temporal-postgresql:
+    image: postgres:16-alpine
+    environment:
+      POSTGRES_USER: temporal
+      POSTGRES_PASSWORD: ${TEMPORAL_DB_PASSWORD}
+      POSTGRES_DB: temporal
+      TZ: ${TZ:-America/Bahia}
+    volumes:
+      - temporal_postgres:/var/lib/postgresql/data
+    networks:
+      postiz_internal:
+        aliases:
+          - temporal-postgresql
+    healthcheck:
+      test: ["CMD-SHELL", "pg_isready -U temporal -d temporal"]
+      interval: 10s
+      timeout: 5s
+      retries: 15
+    deploy:
+      replicas: 1
+      placement:
+        constraints:
+          - node.role == manager
+      restart_policy:
+        condition: any
+      resources:
+        limits:
+          cpus: "0.50"
+          memory: 768M
+
+  temporal-elasticsearch:
+    image: elasticsearch:7.17.27
+    environment:
+      discovery.type: single-node
+      xpack.security.enabled: "false"
+      cluster.routing.allocation.disk.threshold_enabled: "true"
+      cluster.routing.allocation.disk.watermark.low: 5gb
+      cluster.routing.allocation.disk.watermark.high: 3gb
+      cluster.routing.allocation.disk.watermark.flood_stage: 2gb
+      ES_JAVA_OPTS: -Xms512m -Xmx512m
+    volumes:
+      - temporal_elasticsearch:/usr/share/elasticsearch/data
+    networks:
+      postiz_internal:
+        aliases:
+          - temporal-elasticsearch
+    healthcheck:
+      test: ["CMD-SHELL", "curl -fsS http://localhost:9200/_cluster/health || exit 1"]
+      interval: 15s
+      timeout: 5s
+      retries: 30
+    deploy:
+      replicas: 1
+      placement:
+        constraints:
+          - node.role == manager
+      restart_policy:
+        condition: any
+      resources:
+        limits:
+          cpus: "1.00"
+          memory: 1024M
+        reservations:
+          memory: 512M
+
+  temporal:
+    image: temporalio/auto-setup:1.28.1
+    environment:
+      DB: postgres12
+      DB_PORT: "5432"
+      POSTGRES_USER: temporal
+      POSTGRES_PWD: ${TEMPORAL_DB_PASSWORD}
+      POSTGRES_SEEDS: temporal-postgresql
+      ENABLE_ES: "true"
+      ES_SEEDS: temporal-elasticsearch
+      ES_VERSION: v7
+      TEMPORAL_NAMESPACE: default
+    networks:
+      postiz_internal:
+        aliases:
+          - temporal
+    healthcheck:
+      test:
+        - CMD-SHELL
+        - 'timeout 5 bash -c "</dev/tcp/$(hostname)/7233"'
+      interval: 15s
+      timeout: 6s
+      retries: 10
+      start_period: 120s
+    deploy:
+      replicas: 1
+      placement:
+        constraints:
+          - node.role == manager
+      restart_policy:
+        condition: any
+        delay: 10s
+      resources:
+        limits:
+          cpus: "1.00"
+          memory: 1024M
+
+  temporal-ui:
+    image: temporalio/ui:2.34.0
+    environment:
+      TEMPORAL_ADDRESS: temporal:7233
+      TEMPORAL_CORS_ORIGINS: https://${POSTIZ_DOMAIN:-post.workflowapi.com.br}
+    networks:
+      postiz_internal:
+        aliases:
+          - temporal-ui
+    deploy:
+      replicas: 1
+      placement:
+        constraints:
+          - node.role == manager
+      restart_policy:
+        condition: any
+      resources:
+        limits:
+          cpus: "0.25"
+          memory: 256M
+
+volumes:
+  postiz_config:
+  postiz_uploads:
+  postiz_redis:
+  temporal_postgres:
+  temporal_elasticsearch:
+
+networks:
+  postiz_internal:
+    driver: overlay
+    attachable: true
+  network_public:
+    external: true
+    name: network_public
diff --git a/pyproject.toml b/pyproject.toml
index 802fcdc0c..db3506095 100644
--- a/pyproject.toml
+++ b/pyproject.toml
@@ -1,6 +1,6 @@
 [project]
 name = "evo-nexus"
-version = "0.32.3"
+version = "0.33.0"
 description = "Unofficial open source toolkit for Claude Code — AI-powered business operating system"
 requires-python = ">=3.10"
 dependencies = [
@@ -22,14 +22,22 @@ dependencies = [
     "psycopg2-binary",
     "alembic>=1.13",
     "tiktoken>=0.7",
-    "sentence-transformers>=3.0",
     "openai>=1.0",
     "google-genai>=0.3",
     "anthropic>=0.25",
-    "marker-pdf>=1.6.1",
     "watchdog>=4.0",
     "sqlparse>=0.4,<1.0",
     "jsonschema>=4.21",
+    "flask-limiter>=3.5",
+]
+
+[project.optional-dependencies]
+knowledge-ml = [
+    "marker-pdf>=1.6.1",
+    "sentence-transformers>=3.0",
+]
+local-embeddings = [
+    "sentence-transformers>=3.0",
 ]
 
 [project.scripts]
diff --git a/scheduler.py b/scheduler.py
index 144cd40e7..d732770c0 100644
--- a/scheduler.py
+++ b/scheduler.py
@@ -72,10 +72,24 @@ def release_lock():
 
 
 def run_adw(name: str, script: str, args: str = ""):
-    """Execute a routine as subprocess."""
+    """Execute a routine as subprocess.
+
+    YAML-configured routines are always requested with a "custom/" prefix
+    (see _load_routines_from_yaml) even when the real script lives elsewhere
+    — e.g. daily_status_report.py sits directly in ADWs/routines/ (not
+    custom/), and publish_scheduled.py sits at the repo's top-level scripts/.
+    Moving either would break their own ROOT-relative path resolution
+    (calendar/ledger/DB paths computed from Path(__file__).parent chains), so
+    this tries a few candidate locations instead of relocating them:
+    1. exactly what the caller asked for (custom/<script>)
+    2. ADWs/routines/<basename>, ignoring any custom/ prefix
+    3. top-level scripts/<basename>
+    """
     now = datetime.now().strftime("%H:%M")
-    script_path = ROUTINES_DIR / script
-    if not script_path.exists():
+    basename = Path(script).name
+    candidates = [ROUTINES_DIR / script, ROUTINES_DIR / basename, WORKSPACE / "scripts" / basename]
+    script_path = next((p for p in candidates if p.exists()), None)
+    if script_path is None:
         print(f"  {now} ✗ {name} — script not found: {script}")
         return
 
@@ -99,6 +113,14 @@ def run_adw(name: str, script: str, args: str = ""):
         print(f"  {now} ✗ {name} error: {e}")
 
 
+def _hourly_report_safe():
+    """Wrapper that only runs hourly report during business hours (08h-20h BRT)."""
+    from datetime import datetime, timezone, timedelta
+    brt = datetime.now(timezone.utc) + timedelta(hours=-3)
+    if 8 <= brt.hour < 20:
+        run_adw("Hourly Report", "hourly_report.py")
+
+
 def setup_schedule():
     """Configure core routines. Custom routines loaded from config/routines.yaml."""
     import schedule
@@ -107,15 +129,41 @@ def setup_schedule():
     schedule.every().day.at("07:00").do(run_adw, "Good Morning", "good_morning.py")
     schedule.every().day.at("21:00").do(run_adw, "End of Day", "end_of_day.py")
     schedule.every().day.at("21:15").do(run_adw, "Memory Sync", "memory_sync.py")
-    # Disabled — replaced by Weekly Review (Team) in routines.yaml
-    # schedule.every().friday.at("08:00").do(run_adw, "Weekly Review", "weekly_review.py")
+    # Reativado (panorama 2026-07-17, item 4) — o comentário anterior dizia
+    # "replaced by Weekly Review (Team) in routines.yaml", mas essa entrada
+    # nunca existiu em config/routines.yaml; nada mais checa Goal/Ticket
+    # vencido sem isto.
+    schedule.every().friday.at("08:00").do(run_adw, "Weekly Review", "weekly_review.py")
     schedule.every().sunday.at("09:00").do(run_adw, "Memory Lint", "memory_lint.py")
     schedule.every().day.at("21:00").do(run_adw, "Daily Backup", "backup.py")
+    # Exercise every NVIDIA model so the active chain has fresh live traffic
+    # evidence in /costs. Runs late at night to stay out of the way of heartbeats.
+    schedule.every().day.at("04:00").do(run_adw, "Uso Modelos DIA", "uso_modelos_dia.py")
+
+    # Hourly activity report during business hours (08h-20h BRT)
+    schedule.every().hour.do(_hourly_report_safe)
 
     # ── Custom routines (from config/routines.yaml if exists) ──
     _load_custom_routines(schedule)
 
 
+def _coerce_interval(interval, time_str):
+    """Return an interval in minutes, or None to fall back to a daily .at(time).
+
+    Accepts an explicit `interval` (minutes) or a cron-style `*/N * * * *` time
+    field (common mistake / convenience), converting it to N minutes. Anything
+    else (HH:MM) returns None so the caller uses the daily-at path.
+    """
+    if interval is not None:
+        return int(interval)
+    if isinstance(time_str, str):
+        import re
+        m = re.match(r"^\*/(\d+)\s+\*\s+\*\s+\*\s+\*$", time_str.strip())
+        if m:
+            return int(m.group(1))
+    return None
+
+
 def _load_routines_from_yaml(schedule, config_path: Path, is_plugin: bool = False,
                              disabled_make_ids: set | None = None):
     """Load routines from a single YAML file into the schedule.
@@ -155,10 +203,15 @@ def _load_routines_from_yaml(schedule, config_path: Path, is_plugin: bool = Fals
                 if make_id in _disabled:
                     print(f"  [{source_label}] skipped disabled routine '{name}' ({make_id})")
                     continue
-            if r.get("interval"):
-                schedule.every(int(r["interval"])).minutes.do(run_adw, name, f"custom/{script}", args)
-            elif r.get("time"):
-                schedule.every().day.at(r["time"]).do(run_adw, name, f"custom/{script}", args)
+            try:
+                interval_min = _coerce_interval(r.get("interval"), r.get("time"))
+                if interval_min is not None:
+                    schedule.every(interval_min).minutes.do(run_adw, name, f"custom/{script}", args)
+                elif r.get("time"):
+                    schedule.every().day.at(r["time"]).do(run_adw, name, f"custom/{script}", args)
+            except Exception as exc:
+                print(f"  [{source_label}] SKIPPED routine '{name}': invalid schedule "
+                      f"(time={r.get('time')!r}, interval={r.get('interval')!r}): {exc}")
 
         for r in config.get("weekly", []) or []:
             if not r.get("enabled", True):
@@ -175,10 +228,15 @@ def _load_routines_from_yaml(schedule, config_path: Path, is_plugin: bool = Fals
             day = r.get("day", "friday").lower()
             time_str = r.get("time", "09:00")
             days = r.get("days", [day])
-            for d in days:
-                getattr(schedule.every(), d, schedule.every().friday).at(time_str).do(
-                    run_adw, name, f"custom/{script}", args
-                )
+            try:
+                for d in days:
+                    getattr(schedule.every(), d, schedule.every().friday).at(time_str).do(
+                        run_adw, name, f"custom/{script}", args
+                    )
+            except Exception as exc:
+                print(f"  [{source_label}] SKIPPED weekly routine '{name}': invalid time "
+                      f"{time_str!r}: {exc}")
+                continue
 
         global _monthly_routines
         monthly = config.get("monthly", []) or []
@@ -200,10 +258,21 @@ def _load_routines_from_yaml(schedule, config_path: Path, is_plugin: bool = Fals
             _monthly_routines = monthly
 
     except Exception as e:
-        if is_plugin:
-            print(f"  Warning: Failed to load plugin routines from {config_path}: {e}")
-        else:
-            raise
+        # Confirmed live 2026-07-14: a single bad indent in config/routines.yaml
+        # (invalid YAML) raised here and propagated all the way up through
+        # setup_schedule() -> main(), crashing the scheduler process before it
+        # ever reached its run loop — before ANY routine, including the
+        # hardcoded core ones registered earlier in setup_schedule(), could
+        # fire. If the container restart-loops on the same broken file, every
+        # routine goes silent indefinitely with no error visible anywhere
+        # except scheduler logs. Never crash the whole process over the
+        # custom-routines file — log loudly and keep going with whatever
+        # loaded successfully (core routines are registered before this call,
+        # so they're unaffected either way).
+        source = "core config" if not is_plugin else f"plugin routines from {config_path}"
+        print(f"  ERROR: Failed to load {source} ({config_path}): {e}", flush=True)
+        print(f"  Scheduler continuing WITHOUT these routines — fix {config_path} and "
+              f"send SIGHUP (or restart) to reload.", flush=True)
 
 
 def _load_disabled_routines() -> dict[str, set]:
diff --git a/scripts/bootstrap_postiz_database.sh b/scripts/bootstrap_postiz_database.sh
new file mode 100755
index 000000000..0bb6b7610
--- /dev/null
+++ b/scripts/bootstrap_postiz_database.sh
@@ -0,0 +1,42 @@
+#!/usr/bin/env bash
+set -euo pipefail
+
+SERVICE_NAME="${POSTGRES_SERVICE_NAME:-postgres_postgres}"
+ADMIN_USER="${POSTGRES_ADMIN_USER:-postgres}"
+DB_NAME="postiz_db_local"
+DB_USER="postiz_user"
+
+if [[ -z "${POSTIZ_DB_PASSWORD:-}" ]]; then
+  echo "Set POSTIZ_DB_PASSWORD first. Use a URL-safe value, e.g.:" >&2
+  echo "  export POSTIZ_DB_PASSWORD=\$(openssl rand -hex 24)" >&2
+  exit 1
+fi
+
+if [[ -z "${POSTGRES_ADMIN_PASSWORD:-}" ]]; then
+  echo "Set POSTGRES_ADMIN_PASSWORD to the password of the existing postgres role." >&2
+  exit 1
+fi
+
+container_id="$(docker ps \
+  --filter "label=com.docker.swarm.service.name=${SERVICE_NAME}" \
+  --format '{{.ID}}' | head -n 1)"
+
+if [[ -z "$container_id" ]]; then
+  echo "No running container found for Swarm service ${SERVICE_NAME}." >&2
+  exit 1
+fi
+
+docker exec -i -e PGPASSWORD="$POSTGRES_ADMIN_PASSWORD" "$container_id" \
+  psql --username "$ADMIN_USER" --dbname postgres \
+  --set ON_ERROR_STOP=1 --set db_password="$POSTIZ_DB_PASSWORD" <<'SQL'
+SELECT format('CREATE ROLE postiz_user LOGIN PASSWORD %L', :'db_password')
+WHERE NOT EXISTS (SELECT 1 FROM pg_roles WHERE rolname = 'postiz_user') \gexec
+
+SELECT 'CREATE DATABASE postiz_db_local OWNER postiz_user'
+WHERE NOT EXISTS (SELECT 1 FROM pg_database WHERE datname = 'postiz_db_local') \gexec
+
+ALTER ROLE postiz_user WITH LOGIN PASSWORD :'db_password';
+GRANT ALL PRIVILEGES ON DATABASE postiz_db_local TO postiz_user;
+SQL
+
+echo "Postiz database is ready in ${SERVICE_NAME}: ${DB_NAME} (owner ${DB_USER})."
diff --git a/scripts/continue_zapclub_community.py b/scripts/continue_zapclub_community.py
new file mode 100644
index 000000000..6fb25b239
--- /dev/null
+++ b/scripts/continue_zapclub_community.py
@@ -0,0 +1,97 @@
+import base64, json, time, urllib.request, urllib.error
+from pathlib import Path
+from PIL import Image, ImageOps
+BASE='https://go.workflowapi.com.br'; ADMIN='ab7493b4527e089973ad0cfed079d118'
+ROOT=Path('/home/sistemabritto/Documentos/evo-nexus'); OUT=ROOT/'workspace/assets/images/zapclub-groups/processed-small'; OUT.mkdir(parents=True,exist_ok=True)
+LOGO=Path('/home/sistemabritto/.hermes/image_cache/img_52d95475f17f.jpg')
+PARTICIPANT='557199841612@s.whatsapp.net'
+GROUPS=[('Conquistador de Tokens','conquistador-de-tokens.png'),('Triangulador de Modelos','triangulador-de-modelos.png'),('Manipulador de Ferramentas e Integrações','manipulador-de-ferramentas-e-integracoes.png'),('Desenvolvedor de Skills','desenvolvedor-de-skills.png'),('Maestro de Rotinas','maestro-de-rotinas.png')]
+
+def req(method,path,token,body=None,timeout=180,retries=2):
+    data=json.dumps(body,ensure_ascii=False).encode() if body is not None else None
+    for attempt in range(retries+1):
+        r=urllib.request.Request(BASE+path,data=data,method=method,headers={'apikey':token,'Content-Type':'application/json','Accept':'application/json','User-Agent':'Mozilla/5.0'})
+        try:
+            raw=urllib.request.urlopen(r,timeout=timeout).read().decode(); return json.loads(raw) if raw else {}
+        except urllib.error.HTTPError as e:
+            txt=e.read().decode(errors='ignore')
+            if ('429' in txt or e.code==429 or 'rate-overlimit' in txt) and attempt<retries:
+                time.sleep(30); continue
+            raise RuntimeError(f'{method} {path} HTTP {e.code}: {txt[:800]}')
+        except TimeoutError:
+            if attempt<retries: time.sleep(10); continue
+            raise
+
+def token():
+    data=req('GET','/instance/all',ADMIN,timeout=60)
+    for i in data.get('data',[]):
+        if i.get('name')=='felipe': return i['token']
+    raise RuntimeError('felipe token not found')
+
+def groups(tok):
+    d=req('GET','/group/list',tok,timeout=180)
+    return d.get('data') if isinstance(d.get('data'),list) else []
+
+def find(gs,name,parent=None):
+    for g in gs:
+        if g.get('Name')==name and (parent is None or bool(g.get('IsParent'))==parent): return g.get('JID')
+
+def find_child_same_community(gs,community_jid):
+    for g in gs:
+        if g.get('LinkedParentJID')==community_jid: return g.get('JID')
+
+def extract_jid(resp):
+    d=resp.get('data') or resp.get('group') or resp.get('community') or resp
+    return d.get('JID') or d.get('jid') if isinstance(d,dict) else None
+
+def prep(src,dst,size=320):
+    im=Image.open(src).convert('RGB')
+    im=ImageOps.pad(im,(size,size),method=Image.Resampling.LANCZOS,color=(8,12,10))
+    im.save(dst,'JPEG',quality=75,optimize=True)
+    return dst
+
+def imgstr(path): return 'data:image/jpeg;base64,'+base64.b64encode(Path(path).read_bytes()).decode()
+
+def set_photo(tok,jid,path):
+    return req('POST','/group/photo',tok,{'groupJid':jid,'image':imgstr(path)},timeout=240,retries=1)
+
+def main():
+    tok=token(); print('token ok',flush=True)
+    community_img=prep(LOGO,OUT/'community.jpg')
+    imgmap={title:prep(ROOT/'workspace/assets/images/zapclub-groups'/file,OUT/(Path(file).stem+'.jpg')) for title,file in GROUPS}
+    gs=groups(tok)
+    community=find(gs,'IA para Negócios',True)
+    if not community:
+        r=req('POST','/community/create',tok,{'communityName':'IA para Negócios'},timeout=180); community=extract_jid(r)
+    if not community: raise RuntimeError('community jid missing')
+    print('community',community,flush=True)
+    try: print('community photo',set_photo(tok,community,community_img),flush=True)
+    except Exception as e: print('WARN community photo',e,flush=True)
+    gs=groups(tok)
+    first=find(gs,'Conquistador de Tokens',False)
+    temp=find(gs,'Teste ZapClub TEMP',False)
+    default_child=find_child_same_community(gs,community)
+    if not first and temp:
+        req('POST','/group/name',tok,{'groupJid':temp,'name':'Conquistador de Tokens'},timeout=180); first=temp; print('renamed temp to first',first,flush=True); time.sleep(5)
+    elif not first and default_child:
+        req('POST','/group/name',tok,{'groupJid':default_child,'name':'Conquistador de Tokens'},timeout=180); first=default_child; print('renamed default child to first',first,flush=True); time.sleep(5)
+    result=[]
+    for title,_ in GROUPS:
+        gs=groups(tok); jid=find(gs,title,False)
+        if not jid:
+            print('creating',title,flush=True)
+            r=req('POST','/group/create',tok,{'groupName':title,'participants':[PARTICIPANT]},timeout=240,retries=2)
+            print('create resp',json.dumps(r,ensure_ascii=False)[:500],flush=True)
+            jid=extract_jid(r)
+            time.sleep(20)
+        if not jid: raise RuntimeError('missing jid '+title)
+        try: print('photo',title,set_photo(tok,jid,imgmap[title]),flush=True)
+        except Exception as e: print('WARN photo',title,e,flush=True)
+        result.append((title,jid))
+    print('adding to community',flush=True)
+    r=req('POST','/community/add',tok,{'communityJid':community,'groupJid':[j for _,j in result]},timeout=240,retries=2)
+    print('add resp',json.dumps(r,ensure_ascii=False)[:1000],flush=True)
+    out={'community':{'name':'IA para Negócios','jid':community},'groups':[{'name':t,'jid':j} for t,j in result]}
+    (OUT/'result.json').write_text(json.dumps(out,ensure_ascii=False,indent=2))
+    print('RESULT_JSON',json.dumps(out,ensure_ascii=False),flush=True)
+if __name__=='__main__': main()
diff --git a/scripts/create_zapclub_community.py b/scripts/create_zapclub_community.py
new file mode 100644
index 000000000..823f8c1ae
--- /dev/null
+++ b/scripts/create_zapclub_community.py
@@ -0,0 +1,125 @@
+import base64, json, time, urllib.request, urllib.error
+from pathlib import Path
+from PIL import Image, ImageOps
+
+BASE='https://go.workflowapi.com.br'
+ADMIN='ab7493b4527e089973ad0cfed079d118'
+ROOT=Path('/home/sistemabritto/Documentos/evo-nexus')
+SRC_LOGO=Path('/home/sistemabritto/.hermes/image_cache/img_52d95475f17f.jpg')
+OUT=ROOT/'workspace/assets/images/zapclub-groups/processed'
+OUT.mkdir(parents=True, exist_ok=True)
+GROUPS=[
+ ('Conquistador de Tokens','conquistador-de-tokens.png'),
+ ('Triangulador de Modelos','triangulador-de-modelos.png'),
+ ('Manipulador de Ferramentas e Integrações','manipulador-de-ferramentas-e-integracoes.png'),
+ ('Desenvolvedor de Skills','desenvolvedor-de-skills.png'),
+ ('Maestro de Rotinas','maestro-de-rotinas.png'),
+]
+
+def req(method,path,token,body=None,timeout=45):
+    data=json.dumps(body,ensure_ascii=False).encode() if body is not None else None
+    r=urllib.request.Request(BASE+path,data=data,method=method,headers={'apikey':token,'Content-Type':'application/json','Accept':'application/json','User-Agent':'Mozilla/5.0'})
+    try:
+        raw=urllib.request.urlopen(r,timeout=timeout).read().decode()
+        return json.loads(raw) if raw else {'message':'success'}
+    except urllib.error.HTTPError as e:
+        txt=e.read().decode(errors='ignore')
+        raise RuntimeError(f'{method} {path} HTTP {e.code}: {txt[:800]}')
+
+def get_felipe_token():
+    data=req('GET','/instance/all',ADMIN)
+    items = data.get('data', []) if isinstance(data, dict) else data
+    for inst in items:
+        if isinstance(inst, dict) and inst.get('name') == 'felipe':
+            return str(inst['token'])
+    raise RuntimeError('instância felipe não encontrada')
+
+def square_jpeg(src,dst,size=640):
+    im=Image.open(src).convert('RGB')
+    im=ImageOps.pad(im,(size,size),method=Image.Resampling.LANCZOS,color=(8,12,10),centering=(0.5,0.5))
+    im.save(dst,'JPEG',quality=86,optimize=True)
+    return dst
+
+def data_url(path):
+    return 'data:image/jpeg;base64,'+base64.b64encode(Path(path).read_bytes()).decode()
+
+def extract_jid(resp):
+    data=resp.get('data', resp.get('group', resp.get('community', resp)))
+    if isinstance(data,dict):
+        return data.get('JID') or data.get('jid') or data.get('id')
+    return None
+
+def group_list(token):
+    resp=req('GET','/group/list',token,timeout=60)
+    data=resp.get('data') or resp.get('groups') or []
+    return data if isinstance(data,list) else []
+
+def find_by_name(groups,name,is_parent=None):
+    for g in groups:
+        if (g.get('Name') or g.get('name')) == name:
+            if is_parent is None or bool(g.get('IsParent'))==is_parent:
+                return g.get('JID') or g.get('jid')
+    return None
+
+def set_photo(token,jid,img_path):
+    return req('POST','/group/photo',token,{'groupJid':jid,'image':data_url(img_path)},timeout=60)
+
+def main():
+    token=get_felipe_token()
+    # process images
+    logo_jpg=square_jpeg(SRC_LOGO, OUT/'community-ia-para-negocios.jpg')
+    processed={}
+    for title,file in GROUPS:
+        processed[title]=square_jpeg(ROOT/'workspace/assets/images/zapclub-groups'/file, OUT/(Path(file).stem+'.jpg'))
+    print('processed images ok')
+
+    existing=group_list(token)
+    community_jid=find_by_name(existing,'IA para Negócios',True)
+    if community_jid:
+        print('community exists', community_jid)
+    else:
+        resp=req('POST','/community/create',token,{'communityName':'IA para Negócios'},timeout=60)
+        print('community create resp', json.dumps(resp,ensure_ascii=False)[:1000])
+        community_jid=extract_jid(resp)
+        if not community_jid:
+            # refresh list fallback
+            time.sleep(3); community_jid=find_by_name(group_list(token),'IA para Negócios',True)
+        if not community_jid: raise RuntimeError('Não consegui extrair JID da comunidade')
+    print('community_jid',community_jid)
+    try:
+        print('set community photo', json.dumps(set_photo(token,community_jid,logo_jpg),ensure_ascii=False)[:500])
+    except Exception as e:
+        print('WARN community photo failed:', e)
+
+    existing=group_list(token)
+    group_jids=[]
+    for title,_ in GROUPS:
+        jid=find_by_name(existing,title,False)
+        if jid:
+            print('group exists',title,jid)
+        else:
+            # Try empty participant list first; if API rejects, retry with known Felipe phone from previous config.
+            payload={'groupName':title,'participants':[]}
+            try:
+                resp=req('POST','/group/create',token,payload,timeout=60)
+            except Exception as e:
+                print('empty participants failed for', title, e)
+                resp=req('POST','/group/create',token,{'groupName':title,'participants':['557196815772']},timeout=60)
+            print('group create',title,json.dumps(resp,ensure_ascii=False)[:800])
+            jid=extract_jid(resp)
+            if not jid:
+                time.sleep(3); jid=find_by_name(group_list(token),title,False)
+            if not jid: raise RuntimeError(f'Não consegui extrair JID do grupo {title}')
+        try:
+            print('set group photo',title,json.dumps(set_photo(token,jid,processed[title]),ensure_ascii=False)[:500])
+        except Exception as e:
+            print('WARN group photo failed',title,e)
+        group_jids.append((title,jid))
+
+    resp=req('POST','/community/add',token,{'communityJid':community_jid,'groupJid':[jid for _,jid in group_jids]},timeout=90)
+    print('community add resp',json.dumps(resp,ensure_ascii=False)[:1200])
+    result={'community':{'name':'IA para Negócios','jid':community_jid},'groups':[{'name':t,'jid':j} for t,j in group_jids]}
+    (OUT/'zapclub-community-result.json').write_text(json.dumps(result,ensure_ascii=False,indent=2))
+    print('RESULT_JSON',json.dumps(result,ensure_ascii=False))
+
+if __name__=='__main__': main()
diff --git a/scripts/generate_zapclub_covers.py b/scripts/generate_zapclub_covers.py
new file mode 100644
index 000000000..4445c0481
--- /dev/null
+++ b/scripts/generate_zapclub_covers.py
@@ -0,0 +1,36 @@
+import json, subprocess, pathlib, sys
+root = pathlib.Path('/home/sistemabritto/Documentos/evo-nexus')
+skill = root/'.claude/skills/ai-image-creator/scripts/generate-image.py'
+items = json.loads((root/'workspace/assets/prompts/zapclub_group_covers.json').read_text())
+outdir = root/'workspace/assets/images/zapclub-groups'
+outdir.mkdir(parents=True, exist_ok=True)
+base_style = """
+Square WhatsApp community/group cover art for the brand ZapClub, tagline IA PARA NEGÓCIOS.
+Visual identity: premium dark charcoal/black background, vibrant neon green #00FFA7, crisp white, modern tech startup aesthetic, clean vector + 3D hybrid, high contrast, centered composition, subtle glow, speech-bubble motif, upward analytics bars, tiny floating data squares, elegant sans-serif typography. Portuguese text must be perfectly spelled and readable.
+Do not use mockups, people, watermarks, distorted letters, random extra words, or clutter.
+""".strip()
+# Use the already generated successful test for the first group.
+test = outdir/'test-image2.png'
+first = outdir/'conquistador-de-tokens.png'
+if test.exists() and not first.exists():
+    first.write_bytes(test.read_bytes())
+for item in items:
+    out = outdir/f"{item['name']}.png"
+    if out.exists() and out.stat().st_size > 100_000:
+        print('SKIP existing', out, flush=True)
+        continue
+    prompt = f"""{base_style}
+Main title text: "{item['title']}".
+Small subtitle text: "IA PARA NEGÓCIOS".
+Concept: {item['concept']}.
+Create a polished square icon/banner that can be used as a WhatsApp group photo, with the title large and readable, ZapClub-style neon green speech/data visual language, professional and cohesive with the provided ZapClub logo."""
+    prompt_path = root/f"workspace/assets/prompts/{item['name']}.txt"
+    prompt_path.write_text(prompt)
+    cmd = ['uv','run','python',str(skill),'-o',str(out),'--provider','openai','-m','image2','-a','1:1','--prompt-file',str(prompt_path)]
+    print('GENERATING', item['title'], flush=True)
+    p = subprocess.run(cmd, cwd=str(root), text=True, capture_output=True, timeout=240)
+    print(p.stdout[-2000:], flush=True)
+    if p.returncode != 0:
+        print(p.stderr[-4000:], file=sys.stderr, flush=True)
+        sys.exit(p.returncode)
+print('DONE', outdir, flush=True)
diff --git a/scripts/media_host.py b/scripts/media_host.py
new file mode 100644
index 000000000..208bba58b
--- /dev/null
+++ b/scripts/media_host.py
@@ -0,0 +1,88 @@
+#!/usr/bin/env python3
+"""Host media on the Nexus S3 bucket and return a public presigned URL.
+
+Instagram fetches media server-side, so it needs a public https URL. Instead of
+making the bucket public, we upload the file and hand out a short-lived presigned
+GET URL (default 1h) — enough for the Graph API to download during publishing.
+
+Reuses the same S3 config as backups (BACKUP_S3_BUCKET + AWS_* / AWS_ENDPOINT_URL).
+
+Usage:
+  python3 scripts/media_host.py <local_file> [expires_seconds]
+"""
+
+from __future__ import annotations
+
+import mimetypes
+import os
+import sys
+import time
+from pathlib import Path
+
+ROOT = Path(__file__).resolve().parent.parent
+DEFAULT_PREFIX = "social-media/"
+DEFAULT_EXPIRES = 3600
+
+
+def _load_dotenv() -> None:
+    env_path = ROOT / ".env"
+    if not env_path.exists():
+        return
+    for line in env_path.read_text(encoding="utf-8").splitlines():
+        line = line.strip()
+        if not line or line.startswith("#") or "=" not in line:
+            continue
+        key, value = line.split("=", 1)
+        key, value = key.strip(), value.strip()
+        if key and key not in os.environ:
+            os.environ[key] = value
+
+
+def _s3_client():
+    import boto3  # imported lazily so non-upload paths don't require it
+    endpoint = os.environ.get("AWS_ENDPOINT_URL")
+    return boto3.client("s3", endpoint_url=endpoint) if endpoint else boto3.client("s3")
+
+
+def is_configured() -> bool:
+    return bool(os.environ.get("BACKUP_S3_BUCKET"))
+
+
+def upload_and_presign(local_path: str | Path, *, prefix: str = DEFAULT_PREFIX,
+                       expires: int = DEFAULT_EXPIRES) -> str:
+    """Upload a local file to S3 and return a presigned GET URL."""
+    bucket = os.environ.get("BACKUP_S3_BUCKET")
+    if not bucket:
+        raise RuntimeError("BACKUP_S3_BUCKET not configured in .env")
+    p = Path(local_path)
+    if not p.is_file():
+        raise FileNotFoundError(f"media file not found: {p}")
+
+    s3 = _s3_client()
+    key = f"{prefix}{int(time.time())}-{p.name}"
+    ctype = mimetypes.guess_type(p.name)[0] or "application/octet-stream"
+    s3.upload_file(str(p), bucket, key, ExtraArgs={"ContentType": ctype})
+    return s3.generate_presigned_url(
+        "get_object",
+        Params={"Bucket": bucket, "Key": key},
+        ExpiresIn=expires,
+    )
+
+
+def main() -> int:
+    _load_dotenv()
+    if len(sys.argv) < 2:
+        print("Usage: media_host.py <local_file> [expires_seconds]")
+        return 1
+    expires = int(sys.argv[2]) if len(sys.argv) > 2 else DEFAULT_EXPIRES
+    try:
+        url = upload_and_presign(sys.argv[1], expires=expires)
+    except Exception as e:  # noqa: BLE001
+        print(f"error: {e}", file=sys.stderr)
+        return 1
+    print(url)
+    return 0
+
+
+if __name__ == "__main__":
+    raise SystemExit(main())
diff --git a/scripts/post_social.py b/scripts/post_social.py
new file mode 100755
index 000000000..9ad268a02
--- /dev/null
+++ b/scripts/post_social.py
@@ -0,0 +1,217 @@
+#!/usr/bin/env python3
+"""Dispatch a social post to available channels.
+
+Current state (2026-06-16):
+  - X (Twitter): publication works via scripts/post_to_x.py (OAuth2 user-context,
+    auto-refresh, retry on 429). Wired here.
+  - Instagram: publishes via scripts/post_to_instagram.py (Graph API, Instagram
+    Login or Facebook Login token). Requires media at a public https URL; local
+    files fall back to the manual queue with a reason.
+  - LinkedIn: no API integration in this workspace. Falls back to a manual queue.
+
+Usage:
+  python3 scripts/post_social.py x "tweet text" [--media img.png] [--account 1] [--dry-run]
+  python3 scripts/post_social.py instagram "caption" --media https://host/foto.jpg [--dry-run]
+  python3 scripts/post_social.py all "post body" [--media https://host/foto.jpg] [--dry-run]
+  python3 scripts/post_social.py --show-queue
+"""
+
+from __future__ import annotations
+
+import argparse
+import json
+import subprocess
+import sys
+from datetime import datetime, timezone
+from pathlib import Path
+
+ROOT = Path(__file__).resolve().parent.parent
+POST_SCRIPT = ROOT / "scripts" / "post_to_x.py"
+IG_SCRIPT = ROOT / "scripts" / "post_to_instagram.py"
+QUEUE_PATH = ROOT / "workspace" / "social" / "manual_post_queue.jsonl"
+LOG_PATH = ROOT / "workspace" / "social" / "post_dispatch_log.jsonl"
+
+SUPPORTED_AUTO = {"x": "X (Twitter)", "instagram": "Instagram"}
+MANUAL_CHANNELS = {"linkedin": "LinkedIn"}
+
+VIDEO_EXTS = (".mp4", ".mov", ".m4v")
+
+
+def now_iso() -> str:
+    return datetime.now(timezone.utc).isoformat(timespec="seconds")
+
+
+def append_jsonl(path: Path, record: dict) -> None:
+    path.parent.mkdir(parents=True, exist_ok=True)
+    with path.open("a", encoding="utf-8") as f:
+        f.write(json.dumps(record, ensure_ascii=False) + "\n")
+
+
+def dispatch_x(text: str, media: Path | None, account: int | None, dry_run: bool) -> dict:
+    cmd = [sys.executable, str(POST_SCRIPT), text]
+    if account is not None:
+        cmd.extend(["--account", str(account)])
+    if media is not None:
+        cmd.extend(["--media", str(media)])
+    if dry_run:
+        cmd.append("--dry-run")
+    try:
+        result = subprocess.run(cmd, capture_output=True, text=True, timeout=180)
+    except subprocess.TimeoutExpired:
+        return {"channel": "x", "status": "error", "error": "timeout posting to X"}
+    return {
+        "channel": "x",
+        "status": "ok" if result.returncode == 0 else "error",
+        "stdout": result.stdout.strip()[:2000],
+        "stderr": result.stderr.strip()[:1000],
+        "returncode": result.returncode,
+    }
+
+
+def dispatch_instagram(text: str, media: Path | None, account: int | None, dry_run: bool) -> dict:
+    """Publish to Instagram via Graph API.
+
+    Media may be a public https URL or a local file — local files are uploaded to
+    S3 (presigned URL) by post_to_instagram.py since the API fetches media
+    server-side. With no media at all, falls back to the manual queue.
+    """
+    media_str = str(media) if media else ""
+    if not media_str:
+        reason = "Instagram requires media (image or video) — none provided."
+        return queue_manual_reason("instagram", "Instagram", text, media, reason)
+
+    # Local files are uploaded to S3 by post_to_instagram.py; https URLs pass through.
+    is_video = media_str.lower().split("?")[0].endswith(VIDEO_EXTS)
+    cmd = [sys.executable, str(IG_SCRIPT), "--caption", text]
+    if is_video:
+        cmd.extend(["--video-url", media_str, "--reels"])
+    else:
+        cmd.extend(["--image-url", media_str])
+    if account is not None:
+        cmd.extend(["--account", str(account)])
+    if dry_run:
+        cmd.append("--dry-run")
+    try:
+        result = subprocess.run(cmd, capture_output=True, text=True, timeout=360)
+    except subprocess.TimeoutExpired:
+        return {"channel": "instagram", "status": "error", "error": "timeout publishing to Instagram"}
+    return {
+        "channel": "instagram",
+        "status": "ok" if result.returncode == 0 else "error",
+        "stdout": result.stdout.strip()[:2000],
+        "stderr": result.stderr.strip()[:1000],
+        "returncode": result.returncode,
+    }
+
+
+def queue_manual_reason(channel: str, label: str, text: str, media: Path | None, reason: str) -> dict:
+    record = {
+        "queued_at": now_iso(),
+        "channel": channel,
+        "label": label,
+        "text": text,
+        "media": str(media) if media else None,
+        "length": len(text),
+        "reason": reason,
+    }
+    append_jsonl(QUEUE_PATH, record)
+    return {
+        "channel": channel,
+        "status": "queued_manual",
+        "reason": reason,
+        "queue_path": str(QUEUE_PATH.relative_to(ROOT)),
+    }
+
+
+def queue_manual(channel: str, text: str, media: Path | None) -> dict:
+    record = {
+        "queued_at": now_iso(),
+        "channel": channel,
+        "label": MANUAL_CHANNELS[channel],
+        "text": text,
+        "media": str(media) if media else None,
+        "length": len(text),
+    }
+    append_jsonl(QUEUE_PATH, record)
+    return {
+        "channel": channel,
+        "status": "queued_manual",
+        "queue_path": str(QUEUE_PATH.relative_to(ROOT)),
+        "instruction": (
+            f"Open {MANUAL_CHANNELS[channel]} and paste the text. "
+            f"Row written to {QUEUE_PATH.relative_to(ROOT)}."
+        ),
+    }
+
+
+def show_queue() -> int:
+    if not QUEUE_PATH.exists():
+        print(json.dumps({"queue_path": str(QUEUE_PATH.relative_to(ROOT)), "pending": []}, indent=2))
+        return 0
+    rows = []
+    for line in QUEUE_PATH.read_text(encoding="utf-8").splitlines():
+        line = line.strip()
+        if line:
+            try:
+                rows.append(json.loads(line))
+            except json.JSONDecodeError:
+                continue
+    print(json.dumps({"queue_path": str(QUEUE_PATH.relative_to(ROOT)), "pending": rows}, indent=2, ensure_ascii=False))
+    return 0
+
+
+def parse_channel_arg(raw: str) -> list[str]:
+    if raw == "all":
+        return list(SUPPORTED_AUTO) + list(MANUAL_CHANNELS)
+    return [c.strip() for c in raw.split(",") if c.strip()]
+
+
+def main() -> int:
+    parser = argparse.ArgumentParser(description="Dispatch a social post across channels")
+    parser.add_argument("channel", nargs="?", default="all",
+                        help="x | instagram | linkedin | comma list | all (default)")
+    parser.add_argument("text", nargs="?", help="Post body. Reads stdin if omitted.")
+    parser.add_argument("--media", help="Media to attach: local file path (X) or public https URL (Instagram).")
+    parser.add_argument("--account", type=int, help="SOCIAL_TWITTER_<N> account index")
+    parser.add_argument("--dry-run", action="store_true", help="Validate without publishing")
+    parser.add_argument("--show-queue", action="store_true", help="Print manual post queue and exit")
+    args = parser.parse_args()
+
+    if args.show_queue:
+        return show_queue()
+
+    if not args.text:
+        args.text = sys.stdin.read().strip()
+    if not args.text:
+        raise SystemExit("post body is required (arg or stdin)")
+
+    channels = parse_channel_arg(args.channel)
+    unknown = [c for c in channels if c not in SUPPORTED_AUTO and c not in MANUAL_CHANNELS]
+    if unknown:
+        raise SystemExit(f"unknown channels: {unknown}. supported: {list(SUPPORTED_AUTO | MANUAL_CHANNELS)}")
+
+    results: list[dict] = []
+    text_for_x = args.text if len(args.text) <= 280 else args.text[:277] + "..."
+    for ch in channels:
+        if ch == "x":
+            results.append(dispatch_x(text_for_x, args.media, args.account, args.dry_run))
+        elif ch == "instagram":
+            results.append(dispatch_instagram(args.text, args.media, args.account, args.dry_run))
+        else:
+            results.append(queue_manual(ch, args.text, args.media))
+
+    summary = {
+        "dispatched_at": now_iso(),
+        "channels": channels,
+        "dry_run": args.dry_run,
+        "results": results,
+    }
+    append_jsonl(LOG_PATH, summary)
+    print(json.dumps(summary, indent=2, ensure_ascii=False))
+
+    failed_auto = [r for r in results if r.get("channel") in SUPPORTED_AUTO and r.get("status") != "ok"]
+    return 1 if failed_auto else 0
+
+
+if __name__ == "__main__":
+    raise SystemExit(main())
diff --git a/scripts/post_to_instagram.py b/scripts/post_to_instagram.py
new file mode 100644
index 000000000..470432dd1
--- /dev/null
+++ b/scripts/post_to_instagram.py
@@ -0,0 +1,267 @@
+#!/usr/bin/env python3
+"""Publish a post to Instagram via the Graph API.
+
+Supports both Meta products:
+  - "Instagram API com Login do Instagram" tokens (IGAA...) → graph.instagram.com
+  - "Login do Facebook" tokens (EAA...) → graph.facebook.com (needs a linked Page)
+
+IMPORTANT: Instagram fetches the media server-side, so the image/video must be at
+a PUBLIC https URL. The API does not accept a direct binary upload of a local file.
+
+Publishing is a 2-step (image) or 3-step (reels/carousel) flow:
+  1. create a media container        POST /<ig-id>/media
+  2. (video) poll until FINISHED     GET  /<container-id>?fields=status_code
+  3. publish the container           POST /<ig-id>/media_publish
+
+Usage:
+  post_to_instagram.py --image-url https://host/foto.jpg --caption "texto" [--account 1]
+  post_to_instagram.py --video-url https://host/reel.mp4 --caption "texto" --reels
+  post_to_instagram.py --image-url URL1 --image-url URL2 --caption "..." --carousel
+  add --dry-run to validate inputs without publishing
+"""
+
+from __future__ import annotations
+
+import argparse
+import json
+import os
+import re
+import sys
+import time
+import urllib.error
+import urllib.parse
+import urllib.request
+from pathlib import Path
+
+ROOT = Path(__file__).resolve().parent.parent
+
+FB_BASE_URL = "https://graph.facebook.com/v25.0"
+IG_BASE_URL = "https://graph.instagram.com/v23.0"
+
+
+def _load_dotenv() -> None:
+    env_path = ROOT / ".env"
+    if not env_path.exists():
+        return
+    for line in env_path.read_text(encoding="utf-8").splitlines():
+        line = line.strip()
+        if not line or line.startswith("#") or "=" not in line:
+            continue
+        key, value = line.split("=", 1)
+        key, value = key.strip(), value.strip()
+        if key and key not in os.environ:
+            os.environ[key] = value
+
+
+def _get_account(index: int | None) -> dict:
+    """Resolve a SOCIAL_INSTAGRAM_<N> account from env (first one if index omitted)."""
+    indices = sorted(
+        int(m.group(1))
+        for k in os.environ
+        if (m := re.match(r"^SOCIAL_INSTAGRAM_(\d+)_LABEL$", k))
+    )
+    if not indices:
+        return {}
+    idx = index if index in indices else indices[0]
+    return {
+        "index": idx,
+        "label": os.environ.get(f"SOCIAL_INSTAGRAM_{idx}_LABEL", f"Account {idx}"),
+        "access_token": os.environ.get(f"SOCIAL_INSTAGRAM_{idx}_ACCESS_TOKEN", ""),
+        "page_token": os.environ.get(f"SOCIAL_INSTAGRAM_{idx}_PAGE_TOKEN", ""),
+        "account_id": os.environ.get(f"SOCIAL_INSTAGRAM_{idx}_ACCOUNT_ID", ""),
+    }
+
+
+def _token(account: dict) -> str:
+    return account.get("page_token") or account.get("access_token", "")
+
+
+def _resolve_media(ref: str) -> str:
+    """Return a public https URL for a media reference.
+
+    If `ref` is already an https URL, use it as-is. If it is a local file, upload
+    it to S3 and return a presigned URL (requires BACKUP_S3_* configured).
+    """
+    if ref.startswith("https://"):
+        return ref
+    if ref.startswith("http://"):
+        raise ValueError(f"media must be https (Instagram rejects http): {ref}")
+    # treat as local file → host on S3
+    import media_host
+    if not media_host.is_configured():
+        raise ValueError(
+            f"'{ref}' is a local file but no S3 bucket is configured (BACKUP_S3_BUCKET). "
+            "Pass a public https URL instead."
+        )
+    return media_host.upload_and_presign(ref)
+
+
+def _is_ig_login_token(token: str) -> bool:
+    return token.startswith("IG")
+
+
+def _api_post(base: str, path: str, params: dict) -> dict:
+    url = f"{base}/{path}"
+    data = urllib.parse.urlencode(params).encode("utf-8")
+    req = urllib.request.Request(url, data=data, method="POST")
+    try:
+        with urllib.request.urlopen(req, timeout=60) as resp:
+            return json.loads(resp.read().decode("utf-8"))
+    except urllib.error.HTTPError as e:
+        body = e.read().decode("utf-8", errors="replace")
+        return {"error": f"HTTP {e.code}", "detail": body[:600]}
+    except Exception as e:  # noqa: BLE001
+        return {"error": str(e)}
+
+
+def _api_get(base: str, path: str, params: dict) -> dict:
+    url = f"{base}/{path}?{urllib.parse.urlencode(params)}"
+    try:
+        with urllib.request.urlopen(url, timeout=30) as resp:
+            return json.loads(resp.read().decode("utf-8"))
+    except urllib.error.HTTPError as e:
+        body = e.read().decode("utf-8", errors="replace")
+        return {"error": f"HTTP {e.code}", "detail": body[:600]}
+    except Exception as e:  # noqa: BLE001
+        return {"error": str(e)}
+
+
+def _wait_for_container(base: str, container_id: str, token: str,
+                        timeout_s: int = 300, interval_s: int = 5) -> dict:
+    """Poll a video/reel container until it finishes processing."""
+    deadline = time.time() + timeout_s
+    last = {}
+    while time.time() < deadline:
+        last = _api_get(base, container_id, {"fields": "status_code,status", "access_token": token})
+        if "error" in last:
+            return last
+        code = last.get("status_code", "")
+        if code == "FINISHED":
+            return last
+        if code == "ERROR":
+            return {"error": "container processing failed", "detail": last.get("status", "")}
+        time.sleep(interval_s)
+    return {"error": "timeout waiting for container to finish", "detail": json.dumps(last)}
+
+
+def publish(account: dict, *, caption: str, image_urls: list[str],
+            video_url: str | None, reels: bool, carousel: bool,
+            dry_run: bool) -> dict:
+    token = _token(account)
+    base = IG_BASE_URL if _is_ig_login_token(token) else FB_BASE_URL
+    ig_id = account.get("account_id", "") or ("me" if _is_ig_login_token(token) else "")
+
+    if not token or not ig_id:
+        return {"status": "error", "error": "missing access_token or account_id in .env"}
+    if not image_urls and not video_url:
+        return {"status": "error", "error": "provide --image-url and/or --video-url (https URL or local file)"}
+
+    plan = {
+        "account": account.get("label"),
+        "ig_id": ig_id,
+        "api": base,
+        "type": "reels" if reels else "carousel" if carousel else "image",
+        "media": video_url or (image_urls if carousel else image_urls[0]),
+        "caption_len": len(caption),
+    }
+    if dry_run:
+        return {"status": "dry_run", "plan": plan}
+
+    # Resolve local files → public presigned S3 URLs (https URLs pass through)
+    try:
+        image_urls = [_resolve_media(u) for u in image_urls]
+        if video_url:
+            video_url = _resolve_media(video_url)
+    except Exception as e:  # noqa: BLE001
+        return {"status": "error", "step": "resolve_media", "error": str(e)}
+
+    # ── Step 1: build container(s) ──
+    if reels and video_url:
+        cont = _api_post(base, f"{ig_id}/media", {
+            "media_type": "REELS", "video_url": video_url,
+            "caption": caption, "access_token": token,
+        })
+        if "error" in cont:
+            return {"status": "error", "step": "create_container", **cont}
+        creation_id = cont["id"]
+
+    elif carousel:
+        if len(image_urls) < 2:
+            return {"status": "error", "error": "carousel needs at least 2 --image-url"}
+        children = []
+        for url in image_urls:
+            item = _api_post(base, f"{ig_id}/media", {
+                "image_url": url, "is_carousel_item": "true", "access_token": token,
+            })
+            if "error" in item:
+                return {"status": "error", "step": "carousel_item", "url": url, **item}
+            children.append(item["id"])
+        cont = _api_post(base, f"{ig_id}/media", {
+            "media_type": "CAROUSEL", "children": ",".join(children),
+            "caption": caption, "access_token": token,
+        })
+        if "error" in cont:
+            return {"status": "error", "step": "carousel_container", **cont}
+        creation_id = cont["id"]
+
+    else:  # single image
+        cont = _api_post(base, f"{ig_id}/media", {
+            "image_url": image_urls[0], "caption": caption, "access_token": token,
+        })
+        if "error" in cont:
+            return {"status": "error", "step": "create_container", **cont}
+        creation_id = cont["id"]
+
+    # ── Step 2: wait until the container finished processing, then publish ──
+    ready = _wait_for_container(base, creation_id, token)
+    if "error" in ready:
+        return {"status": "error", "step": "processing", "creation_id": creation_id, **ready}
+
+    pub = _api_post(base, f"{ig_id}/media_publish", {
+        "creation_id": creation_id, "access_token": token,
+    })
+    if "error" in pub:
+        return {"status": "error", "step": "publish", "creation_id": creation_id, **pub}
+
+    media_id = pub.get("id", "")
+    permalink = ""
+    perm = _api_get(base, media_id, {"fields": "permalink", "access_token": token})
+    if "error" not in perm:
+        permalink = perm.get("permalink", "")
+
+    return {"status": "ok", "media_id": media_id, "permalink": permalink, "plan": plan}
+
+
+def main() -> int:
+    _load_dotenv()
+    parser = argparse.ArgumentParser(description="Publish a post to Instagram")
+    parser.add_argument("--caption", default="", help="Post caption / text")
+    parser.add_argument("--image-url", action="append", default=[],
+                        help="Public https image URL (repeat for carousel)")
+    parser.add_argument("--video-url", help="Public https video URL (use with --reels)")
+    parser.add_argument("--reels", action="store_true", help="Publish video as a Reel")
+    parser.add_argument("--carousel", action="store_true", help="Publish multiple images as a carousel")
+    parser.add_argument("--account", type=int, help="SOCIAL_INSTAGRAM_<N> index (default: first)")
+    parser.add_argument("--dry-run", action="store_true", help="Validate inputs without publishing")
+    args = parser.parse_args()
+
+    account = _get_account(args.account)
+    if not account:
+        print(json.dumps({"status": "error", "error": "no SOCIAL_INSTAGRAM_* account in .env"}, indent=2))
+        return 1
+
+    result = publish(
+        account,
+        caption=args.caption,
+        image_urls=args.image_url,
+        video_url=args.video_url,
+        reels=args.reels,
+        carousel=args.carousel,
+        dry_run=args.dry_run,
+    )
+    print(json.dumps(result, indent=2, ensure_ascii=False))
+    return 0 if result.get("status") in {"ok", "dry_run"} else 1
+
+
+if __name__ == "__main__":
+    raise SystemExit(main())
diff --git a/scripts/post_to_x.py b/scripts/post_to_x.py
new file mode 100644
index 000000000..e2f68ad4f
--- /dev/null
+++ b/scripts/post_to_x.py
@@ -0,0 +1,383 @@
+#!/usr/bin/env python3
+"""Post a tweet using an X OAuth2 user-context token.
+
+Requires SOCIAL_TWITTER_<N>_ACCESS_TOKEN with tweet.write scope.
+Media upload also requires media.write scope.
+App-only bearer tokens cannot publish tweets.
+
+Features:
+  - Auto-refresh expired access tokens via refresh_token
+  - Retry with exponential backoff on 429/rate-limit
+  - Multi-account support via --account N
+  - Dry-run mode for validation
+"""
+
+from __future__ import annotations
+
+import argparse
+import base64
+import json
+import mimetypes
+import os
+import sys
+import time
+import urllib.error
+import urllib.parse
+import urllib.request
+from pathlib import Path
+
+
+ROOT = Path(__file__).resolve().parent.parent
+ENV_PATH = ROOT / ".env"
+# Token store persistente. X rotaciona o refresh_token a cada refresh, então os
+# tokens precisam viver num arquivo gravável e persistente. Na VPS o .env da
+# raiz não existe dentro do container e env vars de stack são estáticas —
+# config/ é volume (evonexus_config), então config/social.env sobrevive a
+# redeploys. Override via SOCIAL_ENV_PATH.
+SOCIAL_ENV_PATH = Path(os.environ.get("SOCIAL_ENV_PATH") or (ROOT / "config" / "social.env"))
+TWEET_URL = "https://api.x.com/2/tweets"
+MEDIA_UPLOAD_URL = "https://api.x.com/2/media/upload"
+TOKEN_REFRESH_URL = "https://api.x.com/2/oauth2/token"
+
+# Retry configuration
+MAX_RETRIES = 3
+BASE_BACKOFF_SECONDS = 15
+RATE_LIMIT_BACKOFF_SECONDS = 900  # 15 min — X free tier resets every 15 min
+
+
+def _parse_env_file(path: Path) -> dict[str, str]:
+    if not path.exists():
+        return {}
+    parsed: dict[str, str] = {}
+    for line in path.read_text(encoding="utf-8").splitlines():
+        line = line.strip()
+        if not line or line.startswith("#") or "=" not in line:
+            continue
+        key, value = line.split("=", 1)
+        parsed[key.strip()] = value.strip().strip('"').strip("'")
+    return parsed
+
+
+def read_env() -> dict[str, str]:
+    """Merged env: processo < .env da raiz < social.env.
+
+    social.env vence porque é onde o auto-refresh grava os tokens novos — o
+    .env da raiz e as env vars de stack ficam desatualizados após o primeiro
+    refresh (X invalida o refresh_token antigo a cada rotação). Exceção: uma
+    reconexão manual via social-auth grava no .env; se o TOKEN_CREATED_AT de
+    um prefixo for mais recente lá, as chaves desse prefixo no .env vencem.
+    """
+    root = _parse_env_file(ENV_PATH)
+    social = _parse_env_file(SOCIAL_ENV_PATH)
+
+    merged = dict(root)
+    merged.update(social)
+    for key, root_created in root.items():
+        if not key.endswith("_TOKEN_CREATED_AT"):
+            continue
+        prefix = key[: -len("_TOKEN_CREATED_AT")]
+        social_created = social.get(key, "")
+        if root_created > social_created:
+            for k, v in root.items():
+                if k.startswith(prefix + "_"):
+                    merged[k] = v
+
+    env: dict[str, str] = dict(os.environ)
+    for key, value in merged.items():
+        # Tokens sociais rotacionam: o arquivo (social.env) é o source of
+        # truth e vence env vars estáticas de stack. Demais chaves mantêm a
+        # precedência clássica (env var do processo vence arquivo).
+        if key.startswith("SOCIAL_"):
+            env[key] = value
+        else:
+            env.setdefault(key, value)
+    return env
+
+
+def write_env(key: str, value: str):
+    """Update a key in the persistent social token store (social.env)."""
+    lines = []
+    found = False
+    if SOCIAL_ENV_PATH.exists():
+        for line in SOCIAL_ENV_PATH.read_text(encoding="utf-8").splitlines():
+            stripped = line.strip()
+            if stripped and not stripped.startswith("#") and "=" in stripped:
+                k = stripped.split("=", 1)[0].strip()
+                if k == key:
+                    lines.append(f"{key}={value}\n")
+                    found = True
+                    continue
+            lines.append(line if line.endswith("\n") else line + "\n")
+    if not found:
+        lines.append(f"{key}={value}\n")
+    SOCIAL_ENV_PATH.parent.mkdir(parents=True, exist_ok=True)
+    with open(SOCIAL_ENV_PATH, "w") as f:
+        f.writelines(lines)
+
+
+def twitter_prefix(env: dict[str, str], index: int | None) -> str:
+    if index is not None:
+        return f"SOCIAL_TWITTER_{index}"
+    indices = sorted(
+        int(key.split("_")[2])
+        for key in env
+        if key.startswith("SOCIAL_TWITTER_") and key.endswith("_ACCESS_TOKEN")
+    )
+    if indices:
+        return f"SOCIAL_TWITTER_{indices[0]}"
+    bearer_indices = sorted(
+        int(key.split("_")[2])
+        for key in env
+        if key.startswith("SOCIAL_TWITTER_") and key.endswith("_BEARER_TOKEN")
+    )
+    if bearer_indices:
+        raise SystemExit(
+            "Only SOCIAL_TWITTER bearer token found. X posting requires OAuth user context with tweet.write. "
+            "Run: python3 social-auth/app.py and reconnect X/Twitter."
+        )
+    raise SystemExit("No SOCIAL_TWITTER account found. Run: python3 social-auth/app.py")
+
+
+def refresh_access_token(env: dict[str, str], prefix: str) -> str | None:
+    """Refresh an expired X access token using the refresh token.
+
+    Returns the new access token on success, None on failure.
+    Persists the new tokens in social.env (see SOCIAL_ENV_PATH).
+    """
+    refresh_token = env.get(f"{prefix}_REFRESH_TOKEN", "")
+    client_id = env.get("TWITTER_CLIENT_ID", "")
+
+    if not refresh_token:
+        return None
+    if not client_id:
+        # Can't refresh without client_id
+        return None
+
+    data = urllib.parse.urlencode({
+        "grant_type": "refresh_token",
+        "refresh_token": refresh_token,
+        "client_id": client_id,
+    }).encode("utf-8")
+
+    req = urllib.request.Request(
+        TOKEN_REFRESH_URL,
+        data=data,
+        method="POST",
+        headers={
+            "Content-Type": "application/x-www-form-urlencoded",
+        },
+    )
+    try:
+        with urllib.request.urlopen(req, timeout=30) as resp:
+            result = json.loads(resp.read().decode("utf-8"))
+    except (urllib.error.HTTPError, Exception) as exc:
+        body = ""
+        if isinstance(exc, urllib.error.HTTPError):
+            body = exc.read().decode("utf-8", "ignore")
+        print(f"  [warn] Token refresh failed: {body[:200]}", file=sys.stderr)
+        return None
+
+    new_access = result.get("access_token", "")
+    new_refresh = result.get("refresh_token", "")
+
+    if not new_access:
+        return None
+
+    # Save new tokens
+    write_env(f"{prefix}_ACCESS_TOKEN", new_access)
+    if new_refresh:
+        write_env(f"{prefix}_REFRESH_TOKEN", new_refresh)
+    from datetime import datetime, timezone
+    write_env(f"{prefix}_TOKEN_CREATED_AT", datetime.now(timezone.utc).isoformat())
+
+    print(f"  [info] Token refreshed for {prefix}", file=sys.stderr)
+    return new_access
+
+
+def _is_rate_limit_error(exc: urllib.error.HTTPError) -> bool:
+    """Check if an HTTPError is a rate-limit (429) response."""
+    if exc.code == 429:
+        return True
+    try:
+        body = exc.read().decode("utf-8", "ignore").lower()
+        return "rate limit" in body or "too many" in body
+    except Exception:
+        return False
+
+
+def _get_retry_after(exc: urllib.error.HTTPError) -> int:
+    """Extract Retry-After header value in seconds, or return default."""
+    try:
+        retry_after = exc.headers.get("Retry-After", "")
+        if retry_after:
+            return int(retry_after)
+    except (ValueError, TypeError):
+        pass
+    return RATE_LIMIT_BACKOFF_SECONDS
+
+
+def upload_media(path: Path, access_token: str) -> str:
+    if not path.exists():
+        raise SystemExit(f"Media file not found: {path}")
+    media_type = mimetypes.guess_type(path.name)[0] or "application/octet-stream"
+    payload = json.dumps(
+        {
+            "media": base64.b64encode(path.read_bytes()).decode("ascii"),
+            "media_category": "tweet_image",
+            "media_type": media_type,
+        }
+    ).encode("utf-8")
+    req = urllib.request.Request(
+        MEDIA_UPLOAD_URL,
+        data=payload,
+        method="POST",
+        headers={
+            "Authorization": f"Bearer {access_token}",
+            "Content-Type": "application/json",
+        },
+    )
+    try:
+        with urllib.request.urlopen(req, timeout=60) as resp:
+            result = json.loads(resp.read().decode("utf-8"))
+    except urllib.error.HTTPError as exc:
+        body = exc.read().decode("utf-8", "ignore")
+        raise RuntimeError(f"X media upload HTTP {exc.code}: {body[:500]}") from exc
+    media_id = result.get("data", {}).get("id")
+    if not media_id:
+        raise RuntimeError(f"X media upload returned no media id: {json.dumps(result)[:500]}")
+    return media_id
+
+
+def post_tweet(text: str, access_token: str, media_ids: list[str] | None = None) -> dict:
+    body: dict[str, object] = {"text": text}
+    if media_ids:
+        body["media"] = {"media_ids": media_ids}
+    payload = json.dumps(body).encode("utf-8")
+
+    req = urllib.request.Request(
+        TWEET_URL,
+        data=payload,
+        method="POST",
+        headers={
+            "Authorization": f"Bearer {access_token}",
+            "Content-Type": "application/json",
+        },
+    )
+    try:
+        with urllib.request.urlopen(req, timeout=30) as resp:
+            return json.loads(resp.read().decode("utf-8"))
+    except urllib.error.HTTPError as exc:
+        body = exc.read().decode("utf-8", "ignore")
+        raise RuntimeError(f"X API HTTP {exc.code}: {body[:500]}") from exc
+
+
+def post_tweet_with_retry(
+    text: str,
+    access_token: str,
+    media_ids: list[str] | None = None,
+    prefix: str = "SOCIAL_TWITTER_1",
+    env: dict[str, str] | None = None,
+) -> dict:
+    """Post a tweet with automatic retry + token refresh on 429/expiry.
+
+    Strategy:
+      1. Try posting. If 429 → backoff and retry.
+      2. If token expired (401) → refresh token and retry.
+      3. After MAX_RETRIES exhausted, raise RuntimeError.
+    """
+    if env is None:
+        env = read_env()
+
+    current_token = access_token
+
+    for attempt in range(1, MAX_RETRIES + 1):
+        try:
+            return post_tweet(text, current_token, media_ids)
+        except (urllib.error.HTTPError, RuntimeError) as exc:
+            is_429 = False
+            is_401 = False
+
+            if isinstance(exc, urllib.error.HTTPError):
+                is_429 = _is_rate_limit_error(exc)
+                is_401 = exc.code == 401
+
+            # Token expired — try refresh
+            if is_401 and env:
+                new_token = refresh_access_token(env, prefix)
+                if new_token:
+                    current_token = new_token
+                    continue
+                else:
+                    raise RuntimeError(
+                        "Token expired (401) and refresh failed. "
+                        "Reconnect X/Twitter via python3 social-auth/app.py."
+                    ) from exc
+
+            # Rate limit — backoff
+            if is_429 and attempt < MAX_RETRIES:
+                wait = RATE_LIMIT_BACKOFF_SECONDS if attempt == 1 else BASE_BACKOFF_SECONDS * (2 ** (attempt - 1))
+                print(
+                    f"  [rate-limit] Attempt {attempt}/{MAX_RETRIES} — "
+                    f"waiting {wait}s before retry...",
+                    file=sys.stderr,
+                )
+                time.sleep(wait)
+                continue
+
+            # Last attempt or non-retryable error
+            if is_429:
+                raise RuntimeError(
+                    f"X rate limit exceeded after {MAX_RETRIES} attempts. "
+                    f"Free tier resets every 15 minutes. Try again later or use --dry-run to validate."
+                ) from exc
+            raise
+
+    raise RuntimeError(f"Failed after {MAX_RETRIES} attempts")
+
+
+def main() -> int:
+    parser = argparse.ArgumentParser(description="Post a tweet to X using OAuth user context")
+    parser.add_argument("text", nargs="?", help="Tweet text. Reads stdin when omitted.")
+    parser.add_argument("--account", type=int, help="SOCIAL_TWITTER_<N> account index")
+    parser.add_argument("--media", type=Path, help="Image file to attach to the tweet")
+    parser.add_argument("--dry-run", action="store_true", help="Validate token selection without posting")
+    args = parser.parse_args()
+
+    text = args.text if args.text is not None else sys.stdin.read()
+    text = text.strip()
+    if not text:
+        raise SystemExit("Tweet text is required")
+    if len(text) > 280:
+        raise SystemExit(f"Tweet is {len(text)} characters; X limit is 280 for this script")
+
+    env = read_env()
+    prefix = twitter_prefix(env, args.account)
+    access_token = env.get(f"{prefix}_ACCESS_TOKEN")
+    if not access_token:
+        raise SystemExit(
+            f"{prefix}_ACCESS_TOKEN missing. Bearer/app-only auth cannot publish. "
+            "Reconnect X/Twitter through python3 social-auth/app.py."
+        )
+
+    if args.dry_run:
+        print(
+            json.dumps(
+                {
+                    "ok": True,
+                    "account": prefix,
+                    "chars": len(text),
+                    "media": str(args.media) if args.media else None,
+                },
+                indent=2,
+            )
+        )
+        return 0
+
+    media_ids = [upload_media(args.media, access_token)] if args.media else None
+    result = post_tweet_with_retry(text, access_token, media_ids, prefix=prefix, env=env)
+    print(json.dumps(result, indent=2, ensure_ascii=False))
+    return 0
+
+
+if __name__ == "__main__":
+    raise SystemExit(main())
diff --git a/scripts/publish_scheduled.py b/scripts/publish_scheduled.py
new file mode 100755
index 000000000..d1ffb157c
--- /dev/null
+++ b/scripts/publish_scheduled.py
@@ -0,0 +1,420 @@
+#!/usr/bin/env python3
+"""Schedule and dispatch the day's social posts from the editorial calendar.
+
+Reads `workspace/marketing/calendars/[C]calendario-editorial-*.md`, finds the
+posts scheduled for *today* (BRT), and when the local BRT clock passes each
+slot's target time, invokes `scripts/post_social.py` once per post. A JSONL
+ledger at `workspace/social/scheduled_posts.jsonl` keeps idempotency — a post
+is only dispatched once.
+
+State (2026-06-16):
+- X path: automated via scripts/post_to_x.py → scripts/post_social.py x
+- IG / LinkedIn: no API in this workspace → fall back to manual queue log
+  inside post_social.py. Scheduled posts still get queued; the cron-like
+  behaviour here just moves clock-watching out of the operator's hands.
+
+Window logic: a slot fires when current BRT time is within
+`[target, target + window_minutes]` AND the post was not yet dispatched.
+Default window = 60 minutes so a routine run every 15-30 minutes won't miss
+slots if the scheduler hiccups.
+
+Usage:
+    python3 scripts/publish_scheduled.py                    # process today's slots
+    python3 scripts/publish_scheduled.py --date 2026-06-17  # specific day
+    python3 scripts/publish_scheduled.py --dry-run          # show plan, no dispatch
+    python3 scripts/publish_scheduled.py --window 90        # widen or narrow window
+"""
+
+from __future__ import annotations
+
+import argparse
+import json
+import re
+import subprocess
+import sys
+from datetime import datetime, time, timedelta
+from pathlib import Path
+from zoneinfo import ZoneInfo
+
+ROOT = Path(__file__).resolve().parent.parent
+CALENDAR_DIR = ROOT / "workspace" / "marketing" / "calendars"
+DISPATCH_SCRIPT = ROOT / "scripts" / "post_social.py"
+LEDGER_PATH = ROOT / "workspace" / "social" / "scheduled_posts.jsonl"
+
+BRT = ZoneInfo("America/Sao_Paulo")
+
+# Legacy format: "### Dia 1 — Seg 16/06"
+DAY_HEADER_RE = re.compile(r"^###\s+Dia\s+(\d+)\s+—\s+\w+\s+(\d{2})/(\d{2})\b")
+# V2 format: "### 🟦 Seg 16/06 — DIA 1 · EIXO ..."
+DAY_HEADER_V2_RE = re.compile(
+    r"^###\s+[^\w]*\s*(\w{3})\s+(\d{2})/(\d{2})\s+—\s+DIA\s+(\d+)\b"
+)
+SLOT_LINE_RE = re.compile(
+    r"^\|\s*(X|LinkedIn|Instagram)\s*\|\s*(\d{1,2}):(\d{2})\s*\|"
+)
+CHANNEL_ALIAS = {"X": "x", "LinkedIn": "linkedin", "Instagram": "instagram"}
+
+# Cadência table parser — matches the "Cadência e horários" section
+# Format: | Dia | X | LinkedIn | Instagram |
+#         | Seg 16 | — | 09:00 | — |   (v2: with date)
+#         | Seg | — | 09:00 | — |        (legacy: day name only)
+CADENCIA_HEADER_RE = re.compile(r"^\|\s*Dia\s*\|\s*X\s*\|\s*LinkedIn\s*\|\s*Instagram\s*\|")
+CADENCIA_ROW_RE = re.compile(
+    r"^\|\s*(\w+(?:\s+\d{2})?)\s*\|\s*([^|]*?)\s*\|\s*([^|]*?)\s*\|\s*([^|]*?)\s*\|"
+)
+DAY_NAME_TO_INDEX = {
+    "seg": 0, "ter": 1, "qua": 2, "qui": 3, "sex": 4, "sáb": 5, "dom": 5,
+    "sab": 5,  # without accent
+}
+TIME_RE = re.compile(r"(\d{1,2}):(\d{2})")
+
+
+def brt_now() -> datetime:
+    return datetime.now(BRT)
+
+
+def brt_today_str() -> str:
+    return brt_now().strftime("%d/%m")
+
+
+def parse_day_label(label: str) -> datetime:
+    """Convert 'Dia 1 — Seg 16/06' → datetime in current year (BRT-naive date)."""
+    m = DAY_HEADER_RE.search(label)
+    if not m:
+        raise ValueError(f"unrecognized day header: {label!r}")
+    _, dd, mm = m.groups()
+    today = brt_now().date()
+    return datetime(today.year, int(mm), int(dd))
+
+
+def parse_day_label_v2(day_name: str, dd: str, mm: str) -> datetime:
+    """Convert ('Seg', '16', '06') → datetime in current year (BRT-naive date)."""
+    today = brt_now().date()
+    return datetime(today.year, int(mm), int(dd))
+
+
+def parse_any_day_header(line: str) -> tuple[int, datetime] | None:
+    """Return (day_index, date) for a day header in legacy or v2 format, else None.
+
+    Legacy: '### Dia 1 — Seg 16/06'
+    V2:     '### 🟦 Seg 16/06 — DIA 1 · EIXO ...'
+    """
+    m = DAY_HEADER_RE.search(line)
+    if m:
+        day_index, dd, mm = m.groups()
+        today = brt_now().date()
+        return int(day_index), datetime(today.year, int(mm), int(dd))
+    m = DAY_HEADER_V2_RE.search(line)
+    if m:
+        day_name, dd, mm, day_index = m.groups()
+        return int(day_index), parse_day_label_v2(day_name, dd, mm)
+    return None
+
+
+def find_latest_calendar() -> Path:
+    if not CALENDAR_DIR.exists():
+        raise SystemExit(f"calendar dir not found: {CALENDAR_DIR}")
+    files = [p for p in CALENDAR_DIR.iterdir()
+             if p.is_file() and p.name.startswith("[C]calendario-editorial-") and p.suffix == ".md"]
+    files.sort()
+    if not files:
+        raise SystemExit(f"no editorial calendar under {CALENDAR_DIR}")
+    return files[-1]
+
+
+def parse_cadencia_table(calendar_text: str) -> dict[int, dict[str, time]]:
+    """Parse the cadência/horários table → {day_index: {channel: time}}.
+
+    The cadência table maps day-of-week names to channel times:
+      | Dia | X | LinkedIn | Instagram |
+      | Seg | — | 09:00 | — |
+
+    We match day names to Dia headers by order (1st day = first row, etc.).
+    """
+    in_cadencia = False
+    rows: list[tuple[str, str, str, str]] = []
+    for raw in calendar_text.splitlines():
+        stripped = raw.strip()
+        if CADENCIA_HEADER_RE.match(stripped):
+            in_cadencia = True
+            continue
+        if in_cadencia:
+            if not stripped.startswith("|"):
+                break  # end of table
+            m = CADENCIA_ROW_RE.match(stripped)
+            if m:
+                rows.append(m.groups())
+
+    # Map rows to day indices by matching day names to Dia headers
+    # First, collect all Dia header dates in order (legacy + v2 formats)
+    day_dates: list[tuple[int, datetime]] = []
+    for raw in calendar_text.splitlines():
+        parsed = parse_any_day_header(raw)
+        if parsed:
+            day_dates.append(parsed)
+
+    result: dict[int, dict[str, time]] = {}
+    for row_day_name, x_cell, li_cell, ig_cell in rows:
+        day_key = row_day_name.strip().lower()[:3]
+        # Find matching Dia header by day-of-week
+        day_idx = None
+        for idx, dt in day_dates:
+            if dt.strftime("%a").lower()[:3] == day_key:
+                day_idx = idx
+                break
+        if day_idx is None:
+            # Fallback: match by position
+            row_pos = list(DAY_NAME_TO_INDEX.get(day_key, -1) for _ in [0])
+            continue
+
+        slots: dict[str, time] = {}
+        for channel_key, cell in [("x", x_cell), ("linkedin", li_cell), ("instagram", ig_cell)]:
+            cell = cell.strip()
+            if cell == "—" or cell == "-" or not cell:
+                continue
+            m_time = TIME_RE.search(cell)
+            if m_time:
+                slots[channel_key] = time(int(m_time.group(1)), int(m_time.group(2)))
+        if slots:
+            result[day_idx] = slots
+
+    return result
+
+
+def parse_slots(calendar_text: str) -> list[dict]:
+    """Return one record per day with its (channel, time, slug_day).
+
+    Tries the inline SLOT_LINE_RE first (legacy format). If no slots found,
+    falls back to parsing the cadência table at the bottom of the calendar.
+    """
+    # Try legacy inline format first
+    days: list[dict] = []
+    current: dict | None = None
+    for raw in calendar_text.splitlines():
+        m_header = DAY_HEADER_RE.search(raw)
+        if m_header:
+            if current is not None:
+                days.append(current)
+            current = {"day_index": int(m_header.group(1)), "date": parse_day_label(raw), "slots": []}
+            continue
+        if current is None:
+            continue
+        m_slot = SLOT_LINE_RE.match(raw)
+        if not m_slot:
+            continue
+        channel_raw, hh, mm = m_slot.groups()
+        channel = CHANNEL_ALIAS[channel_raw]
+        current["slots"].append({"channel": channel, "time": time(int(hh), int(mm))})
+    if current is not None:
+        days.append(current)
+
+    if any(d["slots"] for d in days):
+        return days  # legacy format worked
+
+    # Fallback: parse cadência table
+    cadencia = parse_cadencia_table(calendar_text)
+    if not cadencia:
+        return days  # return empty (will show no_slots)
+
+    # Build day records from Dia headers + cadencia mapping (legacy + v2)
+    days = []
+    for raw in calendar_text.splitlines():
+        parsed = parse_any_day_header(raw)
+        if not parsed:
+            continue
+        idx, dt = parsed
+        day_slots = []
+        for channel, t in cadencia.get(idx, {}).items():
+            day_slots.append({"channel": channel, "time": t})
+        days.append({"day_index": idx, "date": dt, "slots": day_slots})
+
+    return days
+
+
+# Tolerate v2 label suffixes: "Hook Reels", "CTA slide 7", "Hook T1", etc.
+HOOK_RE = re.compile(r"\|\s*\*{0,2}Hook[^|]*\|\s*(.+?)\s*\|")
+BODY_RE = re.compile(r"\|\s*\*{0,2}Ângulo[^|]*\|\s*(.+?)\s*\|")
+CTA_RE = re.compile(r"\|\s*\*{0,2}CTA[^|]*\|\s*(.+?)\s*\|")
+
+
+def extract_post_text(calendar_text: str, day_index: int) -> str:
+    """Extract post body from a day's section in the calendar.
+
+    Looks for the Hook field in the day's content table and builds a
+    post-ready string: hook + angle + CTA.
+    """
+    # Find the section for this day (matches legacy '### Dia N' and v2 headers)
+    lines = calendar_text.splitlines()
+    in_section = False
+    hook = angle = cta = ""
+    for line in lines:
+        parsed = parse_any_day_header(line)
+        if parsed:
+            if parsed[0] == day_index:
+                in_section = True
+                continue
+            if in_section:
+                break  # reached the next day's section
+            continue
+        if in_section:
+            m = HOOK_RE.match(line)
+            if m:
+                hook = m.group(1).strip().strip('"').strip("'")
+                continue
+            m = BODY_RE.match(line)
+            if m:
+                angle = m.group(1).strip()
+                continue
+            m = CTA_RE.match(line)
+            if m:
+                cta = m.group(1).strip()
+                continue
+
+    parts = [p for p in [hook, angle, cta] if p]
+    if parts:
+        return " ".join(parts)
+    return ""
+
+
+def slot_key(day_index: int, channel: str, slot_time: time) -> str:
+    return f"d{day_index}-{channel}-{slot_time.strftime('%H%M')}"
+
+
+def load_ledger() -> set[str]:
+    if not LEDGER_PATH.exists():
+        return set()
+    seen: set[str] = set()
+    for line in LEDGER_PATH.read_text(encoding="utf-8").splitlines():
+        line = line.strip()
+        if not line:
+            continue
+        try:
+            row = json.loads(line)
+        except json.JSONDecodeError:
+            continue
+        if row.get("key"):
+            seen.add(row["key"])
+    return seen
+
+
+def append_ledger(row: dict) -> None:
+    LEDGER_PATH.parent.mkdir(parents=True, exist_ok=True)
+    with LEDGER_PATH.open("a", encoding="utf-8") as f:
+        f.write(json.dumps(row, ensure_ascii=False) + "\n")
+
+
+def dispatch(text: str, channel: str, day_index: int, dry_run: bool) -> dict:
+    """Delegate to scripts/post_social.py so we keep one source of dispatch truth."""
+    cmd = [sys.executable, str(DISPATCH_SCRIPT), channel, text]
+    if dry_run:
+        cmd.append("--dry-run")
+    try:
+        proc = subprocess.run(cmd, capture_output=True, text=True, timeout=60)
+    except subprocess.TimeoutExpired:
+        return {"channel": channel, "status": "error", "error": "timeout in post_social.py"}
+    return {
+        "channel": channel,
+        "status": "dispatched" if proc.returncode == 0 else "error",
+        "returncode": proc.returncode,
+        "stdout_tail": proc.stdout.strip().splitlines()[-3:],
+        "stderr_tail": proc.stderr.strip().splitlines()[-3:],
+    }
+
+
+def select_target_day(days: list[dict], force_date: datetime | None) -> dict | None:
+    target = force_date.date() if force_date else brt_now().date()
+    for day in days:
+        if day["date"].date() == target:
+            return day
+    return None
+
+
+def main() -> int:
+    parser = argparse.ArgumentParser(description="Dispatch scheduled social posts for the day")
+    parser.add_argument("--date", help="Target date dd/mm/yyyy; default = today BRT")
+    parser.add_argument("--window", type=int, default=60,
+                        help="Minutes after slot time the post is still eligible (default 60)")
+    parser.add_argument("--dry-run", action="store_true", help="Show what would be dispatched; don't write anything")
+    parser.add_argument("--calendar", help="Path to a specific calendar file (overrides latest detection)")
+    args = parser.parse_args()
+
+    calendar_path = Path(args.calendar) if args.calendar else find_latest_calendar()
+    days = parse_slots(calendar_path.read_text(encoding="utf-8"))
+
+    force_date = None
+    if args.date:
+        try:
+            force_date = datetime.strptime(args.date, "%d/%m/%Y").replace(tzinfo=BRT)
+        except ValueError:
+            raise SystemExit(f"--date must be dd/mm/yyyy, got {args.date!r}")
+
+    day = select_target_day(days, force_date)
+    if day is None:
+        target = (force_date or brt_now()).strftime("%d/%m/%Y")
+        print(json.dumps({"status": "no_slots", "calendar": calendar_path.name,
+                          "target_date": target, "dispatched": []}, indent=2, ensure_ascii=False))
+        return 0
+
+    now = brt_now()
+    seen = load_ledger()
+    dispatched: list[dict] = []
+    untouched: list[dict] = []
+
+    for slot in day["slots"]:
+        slot_dt = now.replace(hour=slot["time"].hour, minute=slot["time"].minute,
+                              second=0, microsecond=0)
+        slot_end = slot_dt + timedelta(minutes=args.window)
+        key = slot_key(day["day_index"], slot["channel"], slot["time"])
+
+        if key in seen:
+            untouched.append({"key": key, "reason": "already_dispatched",
+                              "slot_brt": slot_dt.strftime("%H:%M")})
+            continue
+
+        if now < slot_dt:
+            untouched.append({"key": key, "reason": "not_yet",
+                              "slot_brt": slot_dt.strftime("%H:%M"),
+                              "window_ends_brt": slot_end.strftime("%H:%M")})
+            continue
+        if now >= slot_end:
+            untouched.append({"key": key, "reason": "window_expired",
+                              "slot_brt": slot_dt.strftime("%H:%M"),
+                              "window_ends_brt": slot_end.strftime("%H:%M")})
+            continue
+
+        post_text = extract_post_text(calendar_path.read_text(encoding="utf-8"), day["day_index"])
+        if not post_text:
+            post_text = f"[W{calendar_path.stem.split('-')[-1]}-D{day['day_index']}-{slot['channel']}]"
+        result = dispatch(post_text, slot["channel"], day["day_index"], args.dry_run)
+        record = {
+            "key": key,
+            "slot_brt": slot_dt.strftime("%H:%M"),
+            "channel": slot["channel"],
+            "day_index": day["day_index"],
+            "calendar": calendar_path.name,
+            "dispatched_at": now.isoformat(timespec="seconds"),
+            "dry_run": args.dry_run,
+            **result,
+        }
+        if not args.dry_run:
+            append_ledger(record)
+        dispatched.append(record)
+
+    summary = {
+        "status": "ok",
+        "calendar": calendar_path.name,
+        "target_date": day["date"].strftime("%d/%m/%Y"),
+        "brt_now": now.strftime("%Y-%m-%d %H:%M:%S"),
+        "window_minutes": args.window,
+        "dry_run": args.dry_run,
+        "dispatched_count": len(dispatched),
+        "dispatched": dispatched,
+        "untouched": untouched,
+    }
+    print(json.dumps(summary, indent=2, ensure_ascii=False))
+    failed = [r for r in dispatched if r.get("status") == "error"]
+    return 1 if failed else 0
+
+
+if __name__ == "__main__":
+    raise SystemExit(main())
diff --git a/scripts/seed_social_env.py b/scripts/seed_social_env.py
new file mode 100644
index 000000000..369cba5f4
--- /dev/null
+++ b/scripts/seed_social_env.py
@@ -0,0 +1,57 @@
+#!/usr/bin/env python3
+"""Seed config/social.env from the root .env social credentials.
+
+config/social.env is the persistent social token store (see post_to_x.py):
+on the VPS it lives in the evonexus_config volume, so refreshed tokens
+survive redeploys. Run this after (re)authenticating via social-auth to
+export the fresh tokens, then copy the file to the VPS at
+/workspace/config/social.env.
+
+Usage:
+    python3 scripts/seed_social_env.py            # write config/social.env
+    python3 scripts/seed_social_env.py --print    # print to stdout (to paste on the VPS)
+"""
+
+from __future__ import annotations
+
+import sys
+from pathlib import Path
+
+ROOT = Path(__file__).resolve().parent.parent
+ENV_PATH = ROOT / ".env"
+SOCIAL_ENV_PATH = ROOT / "config" / "social.env"
+
+EXTRA_KEYS = {"TWITTER_CLIENT_ID", "TWITTER_CLIENT_SECRET"}
+
+HEADER = (
+    "# Token store persistente das redes sociais (gitignored).\n"
+    "# X rotaciona o refresh_token a cada refresh — post_to_x.py grava aqui.\n"
+    "# Na VPS este arquivo vive em /workspace/config (volume evonexus_config).\n"
+)
+
+
+def main() -> int:
+    if not ENV_PATH.exists():
+        raise SystemExit(f".env não encontrado em {ENV_PATH}")
+    keep = []
+    for line in ENV_PATH.read_text(encoding="utf-8").splitlines():
+        stripped = line.strip()
+        if not stripped or stripped.startswith("#") or "=" not in stripped:
+            continue
+        key = stripped.split("=", 1)[0].strip()
+        if key.startswith("SOCIAL_") or key in EXTRA_KEYS:
+            keep.append(stripped)
+    if not keep:
+        raise SystemExit("Nenhuma chave SOCIAL_* encontrada no .env")
+    content = HEADER + "\n".join(keep) + "\n"
+    if "--print" in sys.argv:
+        print(content, end="")
+        return 0
+    SOCIAL_ENV_PATH.write_text(content, encoding="utf-8")
+    SOCIAL_ENV_PATH.chmod(0o600)
+    print(f"{SOCIAL_ENV_PATH} gravado com {len(keep)} chaves.")
+    return 0
+
+
+if __name__ == "__main__":
+    raise SystemExit(main())
diff --git a/scripts/telegram_litellm_proxy.sh b/scripts/telegram_litellm_proxy.sh
new file mode 100755
index 000000000..d1a8ea9fb
--- /dev/null
+++ b/scripts/telegram_litellm_proxy.sh
@@ -0,0 +1,28 @@
+#!/usr/bin/env bash
+# Start the LiteLLM proxy that fronts NVIDIA NIM with an Anthropic-compatible
+# /v1/messages endpoint, so `claude --channels` (Telegram bot) can run on NVIDIA.
+set -euo pipefail
+cd "$(dirname "$0")/.."
+
+# LiteLLM config references os.environ/NVIDIA_API_KEY. Prefer an explicit env
+# value, then .env, then the dashboard-managed provider config.
+if [ -z "${NVIDIA_API_KEY:-}" ]; then
+  if [ -f .env ]; then
+    NVIDIA_API_KEY="$(awk -F= '/^NVIDIA_API_KEY=/{sub(/^NVIDIA_API_KEY=/,""); gsub(/^["'\'']|["'\'']$/, ""); print; exit}' .env)"
+  fi
+  if [ -z "${NVIDIA_API_KEY:-}" ] && [ -f config/providers.json ]; then
+    NVIDIA_API_KEY="$(node -e "const fs=require('fs'); const c=JSON.parse(fs.readFileSync('config/providers.json','utf8')); const e=c.providers?.nvidia?.env_vars||{}; process.stdout.write(e.NVIDIA_API_KEY || e.OPENAI_API_KEY || '')")"
+  fi
+  export NVIDIA_API_KEY
+fi
+
+if [ -z "${NVIDIA_API_KEY:-}" ]; then
+  echo "NVIDIA_API_KEY is missing. Configure NVIDIA in the dashboard or set it in .env." >&2
+  exit 1
+fi
+
+PORT="${LITELLM_PORT:-4000}"
+exec .venv/bin/litellm \
+  --config config/litellm-telegram.yaml \
+  --host 127.0.0.1 \
+  --port "$PORT"
diff --git a/scripts/telegram_provider_bot.py b/scripts/telegram_provider_bot.py
new file mode 100644
index 000000000..a02f13122
--- /dev/null
+++ b/scripts/telegram_provider_bot.py
@@ -0,0 +1,1144 @@
+#!/usr/bin/env python3
+"""Telegram bot runtime backed by the active EvoNexus provider.
+
+This intentionally bypasses Claude Code Channels for provider-backed chat:
+non-Anthropic models can answer in the terminal without reliably calling the
+Telegram `reply` MCP tool, which means users see no message in Telegram.
+"""
+
+from __future__ import annotations
+
+import json
+import os
+import re
+import subprocess
+import sys
+import tempfile
+import threading
+import time
+import urllib.error
+import urllib.parse
+import urllib.request
+from concurrent.futures import ThreadPoolExecutor
+from pathlib import Path
+
+
+ROOT = Path(__file__).resolve().parent.parent
+sys.path.insert(0, str(ROOT / "dashboard" / "backend"))
+# Same agentic-CLI fallback engine the heartbeats already run in production
+# (dashboard/backend/heartbeat_runner.py) — real tool-use (Bash, Agent/Task
+# spawning) instead of a bare chat completion. _parse_opencode_ndjson is
+# reused as-is to extract plain text from opencode's event stream.
+from provider_fallback import invoke_with_fallback, _parse_opencode_ndjson  # noqa: E402
+
+PROVIDERS_PATH = ROOT / "config" / "providers.json"
+TELEGRAM_STATE = Path.home() / ".claude" / "channels" / "telegram"
+TELEGRAM_ENV = TELEGRAM_STATE / ".env"
+ACCESS_FILE = TELEGRAM_STATE / "access.json"
+DIRECT_STATE = TELEGRAM_STATE / "direct_state.json"
+CHAT_MEMORY_DIR = TELEGRAM_STATE / "memory"
+INBOX_DIR = TELEGRAM_STATE / "inbox"
+GROQ_TRANSCRIPTION_URL = "https://api.groq.com/openai/v1/audio/transcriptions"
+GROQ_TRANSCRIPTION_MODEL = os.environ.get("GROQ_TRANSCRIPTION_MODEL", "whisper-large-v3-turbo")
+MAX_MEMORY_MESSAGES = 8
+MAX_MEMORY_CHARS = 1800
+MAX_STORED_MESSAGE_CHARS = 1600
+
+# Orchestrator tuning — real agentic runs (Bash/Agent/Task spawning) need far
+# more headroom than a plain chat completion; defaults mirror heartbeat ranges
+# (10-50 turns, several hundred seconds) instead of the old 2 turns/120s.
+TELEGRAM_MAX_TURNS = int(os.environ.get("TELEGRAM_MAX_TURNS", "25"))
+TELEGRAM_TIMEOUT = int(os.environ.get("TELEGRAM_TIMEOUT", "600"))
+TELEGRAM_MAX_CONCURRENT = int(os.environ.get("TELEGRAM_MAX_CONCURRENT", "4"))
+
+
+def _load_workspace_env() -> None:
+    """Load root .env without depending on python-dotenv."""
+    env_file = ROOT / ".env"
+    if not env_file.exists():
+        return
+    for line in env_file.read_text(encoding="utf-8").splitlines():
+        stripped = line.strip()
+        if not stripped or stripped.startswith("#") or "=" not in stripped:
+            continue
+        key, value = stripped.split("=", 1)
+        key = key.strip()
+        value = value.strip().strip("'\"")
+        if key and _usable_secret(value):
+            os.environ.setdefault(key, value)
+
+
+def _usable_secret(value: str | None) -> bool:
+    if not value:
+        return False
+    value = value.strip()
+    return value not in {"[REDACTED]", "your_bot_token_here", "your_chat_id_here", "REDACTED"}
+
+
+_load_workspace_env()
+GROQ_AUDIO_SUFFIXES = {
+    ".oga": ".ogg",
+    ".opus": ".opus",
+    ".ogg": ".ogg",
+    ".mp3": ".mp3",
+    ".m4a": ".m4a",
+    ".mp4": ".mp4",
+    ".mpeg": ".mpeg",
+    ".mpga": ".mpga",
+    ".wav": ".wav",
+    ".webm": ".webm",
+    ".flac": ".flac",
+}
+
+SECRET_PATTERNS: tuple[tuple[re.Pattern[str], str], ...] = (
+    (
+        re.compile(
+            r"(?i)\b(NVIDIA_API_KEY|OPENAI_API_KEY|ANTHROPIC_API_KEY|TELEGRAM_BOT_TOKEN)\b\s*[:=]\s*['\"]?[^'\"\s;]+"
+        ),
+        r"\1=[REDACTED]",
+    ),
+    (re.compile(r"\bsk-[A-Za-z0-9]{16,}\b"), "[REDACTED]"),
+    (re.compile(r"\bgsk_[A-Za-z0-9]{16,}\b"), "[REDACTED]"),
+    (re.compile(r"\bgh[pousr]_[A-Za-z0-9]{16,}\b"), "[REDACTED]"),
+    (re.compile(r"\boxb-[A-Za-z0-9-]{16,}\b"), "[REDACTED]"),
+)
+
+
+def log(message: str) -> None:
+    print(f"[telegram-provider] {message}", flush=True)
+
+
+def read_json(path: Path, default: dict) -> dict:
+    try:
+        return json.loads(path.read_text(encoding="utf-8"))
+    except Exception:
+        return default
+
+
+def redact_secrets(text: str) -> str:
+    redacted = text
+    for pattern, replacement in SECRET_PATTERNS:
+        redacted = pattern.sub(replacement, redacted)
+    return redacted
+
+
+def read_telegram_token() -> str:
+    if os.environ.get("TELEGRAM_BOT_TOKEN"):
+        return os.environ["TELEGRAM_BOT_TOKEN"]
+    try:
+        for line in TELEGRAM_ENV.read_text(encoding="utf-8").splitlines():
+            if line.startswith("TELEGRAM_BOT_TOKEN="):
+                return line.split("=", 1)[1].strip().strip('"').strip("'")
+    except OSError:
+        pass
+    raise RuntimeError(f"TELEGRAM_BOT_TOKEN missing in {TELEGRAM_ENV}")
+
+
+def read_env_value(path: Path, key: str) -> str | None:
+    try:
+        for line in path.read_text(encoding="utf-8").splitlines():
+            line = line.strip()
+            if not line or line.startswith("#") or "=" not in line:
+                continue
+            name, value = line.split("=", 1)
+            if name.strip() == key:
+                return value.strip().strip('"').strip("'")
+    except OSError:
+        return None
+    return None
+
+
+def read_groq_api_key() -> str:
+    if os.environ.get("GROQ_API_KEY"):
+        return os.environ["GROQ_API_KEY"]
+    for path in (ROOT / ".env", TELEGRAM_ENV):
+        value = read_env_value(path, "GROQ_API_KEY")
+        if value:
+            return value
+    config = read_json(PROVIDERS_PATH, {})
+    for provider in config.get("providers", {}).values():
+        env = provider.get("env_vars", {})
+        value = env.get("GROQ_API_KEY")
+        if value:
+            return str(value)
+    raise RuntimeError("GROQ_API_KEY nao configurada")
+
+
+def write_env_value(path: Path, key: str, value: str) -> None:
+    path.parent.mkdir(parents=True, exist_ok=True)
+    lines: list[str] = []
+    replaced = False
+    try:
+        existing = path.read_text(encoding="utf-8").splitlines()
+    except OSError:
+        existing = []
+    for line in existing:
+        if line.strip().startswith(f"{key}="):
+            lines.append(f"{key}={value}")
+            replaced = True
+        else:
+            lines.append(line)
+    if not replaced:
+        lines.append(f"{key}={value}")
+    path.write_text("\n".join(lines).rstrip() + "\n", encoding="utf-8")
+
+
+def parse_groq_command(text: str) -> str | None:
+    if not text.startswith("/groq"):
+        return None
+    parts = text.split(maxsplit=2)
+    if len(parts) == 1:
+        return "status"
+    action = parts[1].strip().lower()
+    if action in {"status", "set"}:
+        return action if action == "status" else f"set {parts[2].strip() if len(parts) > 2 else ''}"
+    return "help"
+
+
+def handle_groq_command(command: str) -> str:
+    if command == "status":
+        try:
+            read_groq_api_key()
+            return f"Groq configurado. Modelo de transcricao: {GROQ_TRANSCRIPTION_MODEL}"
+        except Exception as exc:
+            return f"Groq nao configurado: {exc}\nUse: /groq set <GROQ_API_KEY>"
+    if command.startswith("set "):
+        value = command.split(" ", 1)[1].strip()
+        if not value.startswith("gsk_"):
+            return "Chave Groq invalida. Ela deve comecar com gsk_."
+        write_env_value(TELEGRAM_ENV, "GROQ_API_KEY", value)
+        return "Groq configurado para transcricao de audio."
+    return "Comandos: /groq status | /groq set <GROQ_API_KEY>"
+
+
+def api(token: str, method: str, payload: dict | None = None, timeout: int = 35) -> dict:
+    url = f"https://api.telegram.org/bot{token}/{method}"
+    data = None
+    headers = {}
+    if payload is not None:
+        data = json.dumps(payload).encode("utf-8")
+        headers["Content-Type"] = "application/json"
+    req = urllib.request.Request(url, data=data, headers=headers)
+    with urllib.request.urlopen(req, timeout=timeout) as resp:
+        return json.loads(resp.read().decode("utf-8"))
+
+
+def download_telegram_file(token: str, file_id: str) -> tuple[Path, str]:
+    data = api(token, "getFile", {"file_id": file_id}, timeout=20)
+    file_path = data.get("result", {}).get("file_path")
+    if not file_path:
+        raise RuntimeError("Telegram nao retornou file_path")
+    suffix = GROQ_AUDIO_SUFFIXES.get(Path(file_path).suffix.lower(), ".ogg")
+    url = f"https://api.telegram.org/file/bot{token}/{file_path}"
+    with urllib.request.urlopen(url, timeout=60) as resp:
+        audio_bytes = resp.read()
+    tmp = tempfile.NamedTemporaryFile(prefix="telegram-audio-", suffix=suffix, delete=False)
+    try:
+        tmp.write(audio_bytes)
+        return Path(tmp.name), suffix
+    finally:
+        tmp.close()
+
+
+def save_telegram_file(token: str, file_id: str, *, suffix: str | None = None) -> Path:
+    data = api(token, "getFile", {"file_id": file_id}, timeout=20)
+    file_path = data.get("result", {}).get("file_path")
+    if not file_path:
+        raise RuntimeError("Telegram nao retornou file_path")
+    file_suffix = suffix or Path(file_path).suffix or ".bin"
+    url = f"https://api.telegram.org/file/bot{token}/{file_path}"
+    with urllib.request.urlopen(url, timeout=60) as resp:
+        content = resp.read()
+    INBOX_DIR.mkdir(parents=True, exist_ok=True)
+    target = INBOX_DIR / f"{int(time.time() * 1000)}-{Path(file_path).stem}{file_suffix}"
+    target.write_bytes(content)
+    return target
+
+
+def multipart_form_data(fields: dict[str, str], files: dict[str, tuple[str, bytes, str]]) -> tuple[bytes, str]:
+    boundary = f"----evonexus-{int(time.time() * 1000)}"
+    chunks: list[bytes] = []
+    for name, value in fields.items():
+        chunks.extend([
+            f"--{boundary}\r\n".encode("utf-8"),
+            f'Content-Disposition: form-data; name="{name}"\r\n\r\n'.encode("utf-8"),
+            str(value).encode("utf-8"),
+            b"\r\n",
+        ])
+    for name, (filename, content, content_type) in files.items():
+        chunks.extend([
+            f"--{boundary}\r\n".encode("utf-8"),
+            (
+                f'Content-Disposition: form-data; name="{name}"; filename="{filename}"\r\n'
+                f"Content-Type: {content_type}\r\n\r\n"
+            ).encode("utf-8"),
+            content,
+            b"\r\n",
+        ])
+    chunks.append(f"--{boundary}--\r\n".encode("utf-8"))
+    return b"".join(chunks), boundary
+
+
+def transcribe_audio(audio_path: Path) -> str:
+    api_key = read_groq_api_key()
+    upload_suffix = GROQ_AUDIO_SUFFIXES.get(audio_path.suffix.lower(), ".ogg")
+    upload_path = audio_path
+    temp_upload: Path | None = None
+    if audio_path.suffix.lower() != upload_suffix:
+        temp = tempfile.NamedTemporaryFile(prefix="groq-upload-", suffix=upload_suffix, delete=False)
+        try:
+            temp.write(audio_path.read_bytes())
+            temp_upload = Path(temp.name)
+            upload_path = temp_upload
+        finally:
+            temp.close()
+    try:
+        proc = subprocess.run(
+            [
+                "curl",
+                "-sS",
+                "-H",
+                f"Authorization: Bearer {api_key}",
+                "-F",
+                f"file=@{upload_path}",
+                "-F",
+                f"model={GROQ_TRANSCRIPTION_MODEL}",
+                "-F",
+                "response_format=json",
+                "-F",
+                "language=pt",
+                GROQ_TRANSCRIPTION_URL,
+            ],
+            text=True,
+            capture_output=True,
+            timeout=120,
+        )
+    finally:
+        if temp_upload:
+            try:
+                temp_upload.unlink()
+            except OSError:
+                pass
+    if proc.returncode != 0:
+        raise RuntimeError((proc.stderr or proc.stdout or "curl failed").strip()[:240])
+    data = json.loads(proc.stdout)
+    if data.get("error"):
+        raise RuntimeError(str(data["error"].get("message") or data["error"])[:240])
+    text = str(data.get("text") or "").strip()
+    if not text:
+        raise RuntimeError("Groq nao retornou transcricao")
+    return text
+
+
+def message_audio_file_id(message: dict) -> str | None:
+    voice = message.get("voice") or {}
+    audio = message.get("audio") or {}
+    document = message.get("document") or {}
+    mime_type = str(document.get("mime_type") or "")
+    if voice.get("file_id"):
+        return str(voice["file_id"])
+    if audio.get("file_id"):
+        return str(audio["file_id"])
+    if mime_type.startswith("audio/") and document.get("file_id"):
+        return str(document["file_id"])
+    return None
+
+
+def message_image_file_id(message: dict) -> tuple[str, str] | None:
+    photos = message.get("photo") or []
+    if photos:
+        largest = max(photos, key=lambda item: int(item.get("file_size") or item.get("width") or 0))
+        if largest.get("file_id"):
+            return str(largest["file_id"]), ".jpg"
+    document = message.get("document") or {}
+    mime_type = str(document.get("mime_type") or "")
+    if mime_type.startswith("image/") and document.get("file_id"):
+        suffix = Path(str(document.get("file_name") or "")).suffix or f".{mime_type.split('/', 1)[1]}"
+        return str(document["file_id"]), suffix
+    return None
+
+
+def handle_audio_message(token: str, chat_id: str, file_id: str) -> str:
+    audio_path: Path | None = None
+    try:
+        audio_path, _suffix = download_telegram_file(token, file_id)
+        return transcribe_audio(audio_path)
+    finally:
+        if audio_path:
+            try:
+                audio_path.unlink()
+            except OSError:
+                pass
+
+
+def allowed_chat(chat_id: str, from_id: str) -> bool:
+    access = read_json(ACCESS_FILE, {"allowFrom": [], "groups": {}, "dmPolicy": "pairing"})
+    if chat_id in {str(x) for x in access.get("allowFrom", [])}:
+        return True
+    if from_id in {str(x) for x in access.get("allowFrom", [])}:
+        return True
+    return chat_id in access.get("groups", {})
+
+
+def approval_approvers() -> set[str]:
+    """Individuals allowed to press an approval button (Vault V3).
+
+    Deliberately per-INDIVIDUAL, not per-chat like allowed_chat() — a Telegram
+    group's `allowed_chat` entry would let any member of that group approve a
+    publish/decomposition gate, which is a materially different (weaker)
+    guarantee than "Felipe personally pressed the button". access.json
+    doesn't have a dedicated "approvers" key yet; it reuses `allowFrom`,
+    which today already only lists individual Telegram user ids (not chat/
+    group ids) for DM pairing — see the seeding in telegram_swarm_entry.sh.
+    An explicit "approvers" list, if ever added to access.json, takes
+    precedence. APPROVAL_APPROVER_IDS (env, documented in .env.example and
+    passed via evonexus-vps.stack.yml) is merged in too — union, not
+    override, so operators setting the env don't silently lose whoever is
+    already paired via access.json.allowFrom.
+    """
+    access = read_json(ACCESS_FILE, {"allowFrom": [], "approvers": [], "groups": {}})
+    explicit = access.get("approvers")
+    approvers = {str(x) for x in explicit} if explicit else {str(x) for x in access.get("allowFrom", [])}
+    env_ids = os.environ.get("APPROVAL_APPROVER_IDS", "")
+    for part in re.split(r"[,;]", env_ids):
+        part = part.strip()
+        if part:
+            approvers.add(part)
+    return approvers
+
+
+def decide_approval_via_api(approval_id: int, decision: str, from_id: str) -> dict:
+    """Call POST /api/approvals/{id}/decision with the dedicated bridge token.
+
+    Molde de unblock_ticket (mesmo motivo: o serviço telegram não monta o
+    volume do DB, então a decisão vai pela API REST do dashboard). Usa
+    APPROVAL_BRIDGE_TOKEN — NUNCA DASHBOARD_API_TOKEN — e manda `from_id` no
+    corpo, nunca `decided_by`: quem deriva decided_by é o servidor, depois de
+    revalidar from_id contra a allowlist (Vault V4 — um decided_by vindo do
+    corpo seria forjável por qualquer um com o bridge token).
+    """
+    base_url = os.environ.get("EVONEXUS_API_URL", "").strip().rstrip("/")
+    token = os.environ.get("APPROVAL_BRIDGE_TOKEN", "").strip()
+    if not base_url or not token:
+        return {"ok": False, "toast": "Bridge de aprovação não configurado neste serviço."}
+
+    payload = json.dumps({"decision": decision, "from_id": from_id}).encode()
+    headers = {"Authorization": f"Bearer {token}", "Content-Type": "application/json"}
+    req = urllib.request.Request(
+        f"{base_url}/api/approvals/{approval_id}/decision", data=payload, headers=headers, method="POST",
+    )
+    try:
+        # Publish approval can synchronously wait for Postiz to confirm
+        # state=PUBLISHED (dashboard default: up to 90s). Keep the bot's HTTP
+        # timeout slightly above that window instead of failing at 15s while
+        # the server continues publishing in the background.
+        timeout = float(os.environ.get("APPROVAL_DECISION_TIMEOUT_SECONDS", "105"))
+        with urllib.request.urlopen(req, timeout=timeout) as resp:
+            body = json.loads(resp.read().decode("utf-8"))
+        label = "aprovada ✅" if decision == "approve" else "rejeitada ❌"
+        return {"ok": True, "toast": f"Decisão registrada: {label}", "body": body}
+    except urllib.error.HTTPError as exc:
+        if exc.code == 409:
+            return {"ok": False, "toast": "Já decidido antes — nada mudou."}
+        body = exc.read().decode("utf-8", "ignore")
+        return {"ok": False, "toast": f"Erro ao decidir (HTTP {exc.code})", "detail": body[:200]}
+    except Exception as exc:  # noqa: BLE001
+        return {"ok": False, "toast": f"Erro ao decidir: {exc}"}
+
+
+def active_provider_info() -> tuple[str, str | None, str | None]:
+    config = read_json(PROVIDERS_PATH, {"active_provider": "anthropic", "providers": {}})
+    provider_id = (
+        os.environ.get("TELEGRAM_PROVIDER")
+        or config.get("telegram_provider")
+        or config.get("active_provider")
+        or "anthropic"
+    )
+    provider = config.get("providers", {}).get(provider_id, {})
+    env = provider.get("env_vars", {})
+    model = env.get("OPENAI_MODEL") or env.get("GEMINI_MODEL") or provider.get("default_model")
+    base_url = env.get("OPENAI_BASE_URL") or provider.get("default_base_url")
+    return provider_id, model, base_url
+
+
+def set_telegram_provider(provider_id: str | None) -> str:
+    config = read_json(PROVIDERS_PATH, {"active_provider": "anthropic", "providers": {}})
+    if provider_id in {"", "active", "global", "default", "none", None}:
+        config.pop("telegram_provider", None)
+        PROVIDERS_PATH.write_text(json.dumps(config, indent=2) + "\n", encoding="utf-8")
+        active = config.get("active_provider") or "anthropic"
+        return f"Telegram agora segue o provider global: {active}"
+    if provider_id not in config.get("providers", {}):
+        available = ", ".join(sorted(config.get("providers", {}).keys()))
+        return f"Provider invalido: {provider_id}. Disponiveis: {available}"
+    config["telegram_provider"] = provider_id
+    PROVIDERS_PATH.write_text(json.dumps(config, indent=2) + "\n", encoding="utf-8")
+    provider = config.get("providers", {}).get(provider_id, {})
+    env = provider.get("env_vars", {})
+    model = env.get("OPENAI_MODEL") or env.get("GEMINI_MODEL") or provider.get("default_model") or "default"
+    return f"Telegram agora usa provider: {provider_id}\nmodel: {model}"
+
+
+def chat_memory_path(chat_id: str) -> Path:
+    safe_chat_id = re.sub(r"[^0-9A-Za-z_-]", "_", str(chat_id))
+    return CHAT_MEMORY_DIR / f"{safe_chat_id}.jsonl"
+
+
+def load_chat_memory(chat_id: str) -> list[dict]:
+    path = chat_memory_path(chat_id)
+    if not path.exists():
+        return []
+    messages: list[dict] = []
+    try:
+        for line in path.read_text(encoding="utf-8").splitlines():
+            line = line.strip()
+            if not line:
+                continue
+            try:
+                entry = json.loads(line)
+            except json.JSONDecodeError:
+                continue
+            if entry.get("role") in {"user", "assistant"} and entry.get("text"):
+                messages.append(entry)
+    except OSError:
+        return []
+    return messages
+
+
+def append_chat_memory(chat_id: str, role: str, text: str, *, speaker: str | None = None) -> None:
+    CHAT_MEMORY_DIR.mkdir(parents=True, exist_ok=True)
+    path = chat_memory_path(chat_id)
+    entry = {
+        "role": role,
+        "text": redact_secrets(text)[:MAX_STORED_MESSAGE_CHARS],
+        "ts": int(time.time()),
+    }
+    if speaker:
+        entry["speaker"] = speaker
+    with open(path, "a", encoding="utf-8") as f:
+        f.write(json.dumps(entry, ensure_ascii=False) + "\n")
+
+
+def clear_chat_memory(chat_id: str) -> None:
+    path = chat_memory_path(chat_id)
+    try:
+        path.unlink()
+    except FileNotFoundError:
+        pass
+
+
+def env_presence(keys: tuple[str, ...]) -> str:
+    values: list[str] = []
+    for key in keys:
+        value = os.environ.get(key, "")
+        values.append(f"{key}={'present' if value else 'missing'}")
+    return ", ".join(values)
+
+
+def skill_context(name: str) -> str:
+    skill_md = ROOT / ".claude" / "skills" / name / "SKILL.md"
+    if not skill_md.is_file():
+        return f"Skill {name}: nao encontrada."
+    text = skill_md.read_text(encoding="utf-8")
+    excerpt = "\n".join(line for line in text.splitlines() if line.startswith(("name:", "description:", "envKeys:", "# Ghost Blog Integration", "## Configuração", "## Auth", "- **Admin API**", "- **Content API**", "### Admin API"))).strip()
+    return f"Skill {name} disponível no workspace:\n{excerpt}"
+
+
+def workspace_context() -> str:
+    nexus_api_url = os.environ.get("EVONEXUS_API_URL", "")
+    has_api = bool(nexus_api_url and os.environ.get("DASHBOARD_API_TOKEN", "").strip())
+    nexus_line = (
+        f"Nexus REST API: {nexus_api_url}" if nexus_api_url
+        else "Nexus REST API: (environ EVONEXUS_API_URL nao definida)"
+    )
+    if has_api:
+        nexus_line += (
+            " — disponivel com DASHBOARD_API_TOKEN. "
+            "Endpoints: GET/POST /api/goals, /api/missions, /api/projects, "
+            "/api/tickets, /api/mempalace/search?q=&n="
+        )
+    else:
+        nexus_line += " — sem token, modo leitura URL apenas."
+    return "\n".join([
+        skill_context("custom-int-ghost"),
+        f"Env Ghost: {env_presence(('GHOST_URL', 'GHOST_CONTENT_API_KEY', 'GHOST_ADMIN_API_KEY'))}.",
+        "Ghost Admin API usa JWT HS256 gerado de GHOST_ADMIN_API_KEY no formato id:secret; header Authorization: Ghost ***",
+        nexus_line,
+    ])
+
+
+def format_chat_memory(messages: list[dict], *, current_speaker: str | None = None) -> str:
+    lines: list[str] = []
+    for entry in messages[-MAX_MEMORY_MESSAGES:]:
+        role = entry.get("role", "?")
+        text = redact_secrets(str(entry.get("text", "")).strip())
+        if not text:
+            continue
+        speaker = entry.get("speaker")
+        if role == "user":
+            label = f"Usuário{f' ({speaker})' if speaker else ''}"
+        else:
+            label = "Assistente"
+        lines.append(f"{label}: {text}")
+    if current_speaker:
+        lines.append(f"Usuário ({current_speaker}):")
+    memory = "\n".join(lines).strip()
+    if len(memory) <= MAX_MEMORY_CHARS:
+        return memory
+    return memory[-MAX_MEMORY_CHARS:]
+
+
+_URL_RE = re.compile(r"https?://[^\s)>\]\"']+")
+
+
+def fetch_url_context(text: str, max_urls: int = 3, max_chars: int = 6000) -> str:
+    """Fetch the content of URLs mentioned in the message so the model can 'read'
+    them. The bot talks to NVIDIA via plain chat completions (no browser tool), so
+    without this it always answers 'não consigo navegar'. We fetch server-side and
+    inject the text."""
+    urls = []
+    for u in _URL_RE.findall(text or ""):
+        u = u.rstrip(".,;")
+        if u not in urls:
+            urls.append(u)
+        if len(urls) >= max_urls:
+            break
+    if not urls:
+        return ""
+    blocks = []
+    for u in urls:
+        try:
+            req = urllib.request.Request(u, headers={"User-Agent": "Mozilla/5.0 (EvoNexus)"})
+            with urllib.request.urlopen(req, timeout=15) as resp:
+                ctype = resp.headers.get("Content-Type", "")
+                raw = resp.read(300000).decode("utf-8", "replace")
+            if "html" in ctype.lower() or raw.lstrip()[:1] == "<":
+                raw = re.sub(r"<(script|style)\b.*?</\1>", " ", raw, flags=re.DOTALL | re.I)
+                raw = re.sub(r"<[^>]+>", " ", raw)
+                raw = re.sub(r"\s+", " ", raw)
+            blocks.append(f"[Conteudo de {u}]\n{raw.strip()[:max_chars]}")
+        except Exception as e:  # noqa: BLE001
+            blocks.append(f"[Falha ao acessar {u}: {e}]")
+    return "\n\n".join(blocks)
+
+
+def fetch_mempalace_context(text: str, max_results: int = 3) -> str:
+    """Search MemPalace for context relevant to the user's question.
+
+    Uses EVONEXUS_API_URL + DASHBOARD_API_TOKEN from env (set inside the Docker
+    container on the VPS). Falls back silently if unreachable/unconfigured.
+    """
+    if not text or len(text.strip()) < 5:
+        return ""
+    base_url = os.environ.get("EVONEXUS_API_URL", "").strip().rstrip("/")
+    token = os.environ.get("DASHBOARD_API_TOKEN", "").strip()
+    if not base_url or not token:
+        return ""
+    params = urllib.parse.urlencode({"q": text.strip()[:200], "n": max_results})
+    url = f"{base_url}/api/mempalace/search?{params}"
+    req = urllib.request.Request(
+        url,
+        headers={"Authorization": f"Bearer {token}", "Accept": "application/json"},
+    )
+    try:
+        with urllib.request.urlopen(req, timeout=10) as resp:
+            data = json.loads(resp.read().decode("utf-8"))
+    except Exception:
+        return ""
+    results = data.get("results") or data.get("data", {}).get("results") or []
+    if not results:
+        return ""
+    blocks = []
+    for r in results[:max_results]:
+        sim = r.get("similarity", r.get("score", 0))
+        source = r.get("source_file", r.get("source", "?"))
+        content = r.get("content", r.get("text", "")).strip()[:600]
+        if content:
+            blocks.append(f"[MemPalace {sim:.2f} — {source}]\n{content}")
+    ctx = "\n\n".join(blocks)
+    return ctx[:2500]
+
+
+_NEXUS_STATUS_TERMS = (
+    "heartbeat", "heart beat", "cron", "rotina", "routine",
+    "scheduler", "agendad", "agendamento", "adw",
+)
+
+
+def _nexus_api_get(path: str, timeout: int = 10) -> dict | None:
+    """GET on the Nexus REST API using env credentials. None if unavailable."""
+    base_url = os.environ.get("EVONEXUS_API_URL", "").strip().rstrip("/")
+    token = os.environ.get("DASHBOARD_API_TOKEN", "").strip()
+    if not base_url or not token:
+        return None
+    req = urllib.request.Request(
+        f"{base_url}{path}",
+        headers={"Authorization": f"Bearer {token}", "Accept": "application/json"},
+    )
+    try:
+        with urllib.request.urlopen(req, timeout=timeout) as resp:
+            return json.loads(resp.read().decode("utf-8"))
+    except Exception:
+        return None
+
+
+def fetch_nexus_status_context(text: str) -> str:
+    """Fetch real cron/heartbeat status server-side and inject it in the prompt.
+
+    The model behind this bot is a plain chat completion — it cannot execute
+    HTTP calls by itself. Whenever the user asks about crons/heartbeats we do
+    the API calls here and hand the model the data, same pattern as
+    fetch_url_context/fetch_mempalace_context.
+    """
+    lower = (text or "").lower()
+    if not any(term in lower for term in _NEXUS_STATUS_TERMS):
+        return ""
+    blocks: list[str] = []
+
+    hb_data = _nexus_api_get("/api/heartbeats")
+    if hb_data:
+        lines = []
+        for hb in hb_data.get("heartbeats", []):
+            last = hb.get("last_run") or {}
+            status = last.get("status", "nunca rodou")
+            when = last.get("started_at", "")
+            err = (last.get("error") or "").strip().replace("\n", " ")[:180]
+            line = (
+                f"- {hb.get('id')} (agente {hb.get('agent')}, "
+                f"{'ativo' if hb.get('enabled') else 'desativado'}): "
+                f"última run {status}{f' em {when}' if when else ''}"
+            )
+            if err:
+                line += f" — erro: {err}"
+            lines.append(line)
+        if lines:
+            blocks.append("Heartbeats:\n" + "\n".join(lines))
+
+    rt_data = _nexus_api_get("/api/routines")
+    if rt_data:
+        metrics = rt_data.get("metrics", {})
+        ran = [
+            (rid, m) for rid, m in metrics.items()
+            if isinstance(m, dict) and m.get("last_run")
+        ]
+        ran.sort(key=lambda kv: kv[1].get("last_run") or "", reverse=True)
+        lines = [
+            f"- {rid}: última run {m.get('last_run')}, "
+            f"{m.get('runs', 0)} runs, {m.get('success_rate', 0)}% sucesso"
+            for rid, m in ran[:12]
+        ]
+        if lines:
+            blocks.append("Rotinas (cron) com execução registrada:\n" + "\n".join(lines))
+
+    if not blocks:
+        return ""
+    return "\n\n".join(blocks)[:3000]
+
+
+def build_prompt(chat_id: str, prompt_text: str, *, speaker: str | None = None) -> str:
+    memory = format_chat_memory(load_chat_memory(chat_id), current_speaker=speaker)
+    clean_prompt = redact_secrets(prompt_text.strip())
+    parts = [
+        "Voce e o runtime Telegram do EvoNexus, operando dentro do workspace local.",
+        "Responda em portugues, curto e objetivo.",
+        "Nao diga que nao tem acesso a ferramentas de forma generica.",
+        "Quando a mensagem contiver URLs, o conteudo delas ja foi buscado e esta abaixo em 'Conteudo das URLs' — USE esse conteudo; nunca diga que nao consegue navegar.",
+        "Quando o usuario pedir uma acao, tente executar pelo workspace/integracoes disponiveis.",
+        "O runtime deste bot consulta a API REST do Nexus por voce: quando a pergunta envolve cron/rotinas/heartbeats, os dados reais ja vem injetados abaixo em 'Status atual do Nexus'. "
+        "Responda com base nesses dados. Se um bloco de status nao veio, diga que a API nao respondeu (nao diga que 'falta endpoint' ou que 'nao tem acesso').",
+        "Se houver bloqueio real, responda somente o bloqueio concreto: credencial, arquivo, permissao, endpoint ou erro.",
+        "Se a mensagem veio de audio transcrito, use a transcricao apenas como entrada interna; nao repita a transcricao ao usuario.",
+        "Use a memoria recente abaixo apenas quando for relevante; ignore respostas antigas que negaram acesso genericamente.",
+        "Contexto de integracoes locais:",
+        workspace_context(),
+        "",
+    ]
+    url_ctx = fetch_url_context(clean_prompt)
+    if url_ctx:
+        parts.extend(["Conteudo das URLs mencionadas:", url_ctx, ""])
+    status_ctx = fetch_nexus_status_context(clean_prompt)
+    if status_ctx:
+        parts.extend([
+            "Status atual do Nexus (dados REAIS buscados agora na API — use-os para responder; nao diga que falta endpoint):",
+            status_ctx,
+            "",
+        ])
+    if memory:
+        parts.extend([
+            "Memoria recente da conversa:",
+            memory,
+            "",
+        ])
+    mem_ctx = fetch_mempalace_context(clean_prompt)
+    if mem_ctx:
+        parts.extend([
+            "Contexto do MemPalace (memoria persistente do workspace):",
+            mem_ctx,
+            "",
+        ])
+    parts.extend([
+        "Mensagem atual:",
+        clean_prompt,
+    ])
+    return "\n".join(parts).strip()
+
+
+def is_provider_question(text: str) -> bool:
+    # Only a SHORT message can be a "which model are you using?" question. Pasted
+    # docs (llms.txt, etc.) mention "api/model/nvidia/usar" and were wrongly caught
+    # here, making the bot reply the provider status instead of answering.
+    if len(text.strip()) > 80:
+        return False
+    lower = text.lower()
+    provider_terms = ("provider", "modelo", "model", "llm", "nvidia", "codex", "openai")
+    question_terms = ("qual", "quem", "usando", "rodando", "ta com", "tá com")
+    return any(term in lower for term in provider_terms) and any(term in lower for term in question_terms)
+
+
+def parse_provider_command(text: str) -> str | None:
+    if not text.startswith("/provider"):
+        return None
+    parts = text.split(maxsplit=1)
+    return parts[1].strip() if len(parts) > 1 else "status"
+
+
+_chat_run_locks: dict[str, threading.Lock] = {}
+_chat_run_locks_guard = threading.Lock()
+
+
+def _chat_lock(chat_id: str) -> threading.Lock:
+    with _chat_run_locks_guard:
+        lk = _chat_run_locks.get(chat_id)
+        if lk is None:
+            lk = threading.Lock()
+            _chat_run_locks[chat_id] = lk
+        return lk
+
+
+_executor = ThreadPoolExecutor(max_workers=TELEGRAM_MAX_CONCURRENT, thread_name_prefix="telegram-orch")
+
+
+def _extract_reply_text(result: dict) -> str:
+    """Pull the assistant's final text out of a provider_fallback result.
+
+    result["output"] is the raw subprocess stdout — either a Claude/OpenClaude
+    JSON envelope ({"type":"result","result":"..."}) or opencode's ndjson
+    event stream, depending on which CLI answered. Falls back to the raw
+    output if neither shape parses, rather than raising.
+    """
+    output = (result.get("output") or "").strip()
+    try:
+        envelope = json.loads(output)
+        if isinstance(envelope, dict) and envelope.get("result"):
+            return str(envelope["result"]).strip()
+    except (json.JSONDecodeError, TypeError):
+        pass
+    try:
+        parsed = _parse_opencode_ndjson(output)
+        if parsed.get("text"):
+            return str(parsed["text"]).strip()
+    except Exception:
+        pass
+    return output
+
+
+def invoke_orchestrator(prompt: str) -> tuple[str, str]:
+    """Run the message through the same agentic-CLI fallback engine the
+    heartbeats use — real tool-use (Bash, Agent/Task spawning of any
+    .claude/agents/*.md specialist), routed through the active provider
+    chain in config/providers.json (opencode by default).
+    """
+    result = invoke_with_fallback(
+        prompt=prompt,
+        agent="",  # no fixed persona — the model self-dispatches to any of
+                   # the 38 specialist agents via the Agent/Task tool, same
+                   # as a normal interactive Claude Code session would.
+        max_turns=TELEGRAM_MAX_TURNS,
+        timeout_seconds=TELEGRAM_TIMEOUT,
+    )
+    if result.get("status") == "busy":
+        raise RuntimeError(
+            "sistema ocupado com outra execução (heartbeat ou outro chat) — tenta de novo em instantes"
+        )
+    if result.get("status") != "success":
+        raise RuntimeError(result.get("error") or f"status={result.get('status')}")
+    text = _extract_reply_text(result)
+    if not text:
+        raise RuntimeError("orchestrator returned empty response")
+    used = f"{result.get('provider_id') or '?'}:{result.get('model') or 'default'}"
+    return text, used
+
+
+def _typing_loop(token: str, chat_id: str, stop_event: threading.Event) -> None:
+    while not stop_event.is_set():
+        try:
+            api(token, "sendChatAction", {"chat_id": chat_id, "action": "typing"}, timeout=10)
+        except Exception:
+            pass
+        stop_event.wait(4)
+
+
+def run_orchestrated_reply(
+    token: str,
+    chat_id: str,
+    prompt: str,
+    *,
+    memory_user_text: str,
+    speaker: str | None,
+) -> None:
+    """Background task: ack, keep 'typing' alive, run the orchestrator, reply.
+
+    Serialized per chat_id (a lock, not the executor) so one chat's messages
+    never interleave while other chats keep running concurrently — this is
+    what lets the poll loop submit long agentic runs without stalling.
+    """
+    with _chat_lock(chat_id):
+        try:
+            api(token, "sendMessage", {"chat_id": chat_id, "text": "Recebido, trabalhando nisso..."})
+        except Exception:
+            pass
+        stop_typing = threading.Event()
+        typing_thread = threading.Thread(target=_typing_loop, args=(token, chat_id, stop_typing), daemon=True)
+        typing_thread.start()
+        try:
+            answer, used = invoke_orchestrator(prompt)
+        except Exception as exc:
+            answer = f"Falhei ao orquestrar: {exc}"
+            used = "error"
+        finally:
+            stop_typing.set()
+            typing_thread.join(timeout=2)
+        log(f"orchestrated-reply chat={chat_id} via {used}")
+        api(token, "sendMessage", {"chat_id": chat_id, "text": answer[:3900]})
+        if used != "error":
+            append_chat_memory(chat_id, "user", memory_user_text, speaker=speaker)
+            append_chat_memory(chat_id, "assistant", answer, speaker="Magneto")
+
+
+def load_offset() -> int | None:
+    state = read_json(DIRECT_STATE, {})
+    offset = state.get("offset")
+    return int(offset) if isinstance(offset, int) else None
+
+
+def save_offset(offset: int) -> None:
+    TELEGRAM_STATE.mkdir(parents=True, exist_ok=True)
+    DIRECT_STATE.write_text(json.dumps({"offset": offset}, indent=2) + "\n", encoding="utf-8")
+
+
+def unblock_ticket(ticket_id: str, reply_text: str, author: str) -> str:
+    """Ponte Telegram→ticket: anexa a resposta do humano como comentário e reabre
+    o ticket (blocked→open) para o orquestrador retomar. Cada round da entrevista
+    é um ciclo: agente pergunta (blocked) → humano responde (reply) → reabre.
+
+    Vai pela API REST do dashboard (EVONEXUS_API_URL + DASHBOARD_API_TOKEN), não
+    por sqlite direto: o serviço telegram não monta o volume
+    evonexus_dashboard_data (só o dashboard monta) — abrir
+    dashboard/data/evonexus.db aqui sempre resultava em "Banco de tickets não
+    encontrado". Confirmado ao vivo 2026-07-15/16.
+    """
+    base_url = os.environ.get("EVONEXUS_API_URL", "").strip().rstrip("/")
+    token = os.environ.get("DASHBOARD_API_TOKEN", "").strip()
+    if not base_url or not token:
+        return "Não consigo desbloquear — EVONEXUS_API_URL/DASHBOARD_API_TOKEN não configurados neste serviço."
+
+    headers = {"Authorization": f"Bearer {token}", "Content-Type": "application/json"}
+
+    try:
+        req = urllib.request.Request(f"{base_url}/api/tickets/{ticket_id}", headers=headers)
+        with urllib.request.urlopen(req, timeout=10) as resp:
+            ticket = json.loads(resp.read().decode("utf-8"))
+    except urllib.error.HTTPError as exc:
+        if exc.code == 404:
+            return f"Ticket {ticket_id[:8]} não encontrado."
+        return f"Erro ao buscar ticket: HTTP {exc.code}"
+    except Exception as exc:  # noqa: BLE001
+        return f"Erro ao buscar ticket: {exc}"
+
+    tid = ticket["id"]
+    try:
+        comment_payload = json.dumps({"body": reply_text, "author": f"human:{author}"}).encode()
+        req = urllib.request.Request(
+            f"{base_url}/api/tickets/{tid}/comments", data=comment_payload, headers=headers, method="POST",
+        )
+        urllib.request.urlopen(req, timeout=10).read()
+
+        status_payload = json.dumps({"status": "open"}).encode()
+        req = urllib.request.Request(
+            f"{base_url}/api/tickets/{tid}", data=status_payload, headers=headers, method="PATCH",
+        )
+        urllib.request.urlopen(req, timeout=10).read()
+    except Exception as exc:  # noqa: BLE001
+        return f"Erro ao desbloquear: {exc}"
+
+    return (f"✅ Desbloqueado: {ticket['title'][:60]}\n"
+            f"Sua resposta foi anexada — {ticket.get('assignee_agent')} retoma na próxima rodada.")
+
+
+def main() -> int:
+    token = read_telegram_token()
+    me = api(token, "getMe")
+    username = me.get("result", {}).get("username", "unknown")
+    log(f"polling @{username}; provider follows {PROVIDERS_PATH}")
+
+    offset = load_offset()
+    while True:
+        try:
+            payload = {
+                "timeout": 25, "limit": 20,
+                "allowed_updates": ["message", "edited_message", "callback_query"],
+            }
+            if offset is not None:
+                payload["offset"] = offset
+            updates = api(token, "getUpdates", payload, timeout=35).get("result", [])
+            for update in updates:
+                offset = int(update["update_id"]) + 1
+                save_offset(offset)
+
+                cq = update.get("callback_query")
+                if cq:
+                    data = cq.get("data") or ""
+                    from_id = str((cq.get("from") or {}).get("id", ""))
+                    cq_message = cq.get("message") or {}
+                    cq_chat_id = str((cq_message.get("chat") or {}).get("id", ""))
+                    m = re.match(r"^apr:(\d+):([ar])$", data)
+                    decision_registered = False
+                    if m and from_id in approval_approvers():
+                        decision = "approve" if m.group(2) == "a" else "reject"
+                        resp = decide_approval_via_api(int(m.group(1)), decision, from_id)
+                        api(token, "answerCallbackQuery", {"callback_query_id": cq["id"], "text": resp["toast"]})
+                        log(f"approval-decision chat={cq_chat_id} approval={m.group(1)} decision={decision} ok={resp['ok']}")
+                        decision_registered = resp.get("ok") is True
+                    else:
+                        api(token, "answerCallbackQuery", {"callback_query_id": cq["id"], "text": "não autorizado"})
+                        log(f"approval-decision dropped from_id={from_id} data={data!r}")
+                    # Only remove the buttons once the decision is actually
+                    # registered — an unauthorized press or a transient API
+                    # failure (5xx/timeout) must leave the keyboard intact so
+                    # the legitimate approver can still press it.
+                    if decision_registered and cq_chat_id and cq_message.get("message_id"):
+                        api(token, "editMessageReplyMarkup", {
+                            "chat_id": cq_chat_id, "message_id": cq_message["message_id"],
+                        })
+                    continue
+
+                message = update.get("message") or update.get("edited_message") or {}
+                text = (message.get("text") or "").strip()
+                chat = message.get("chat") or {}
+                sender = message.get("from") or {}
+                chat_id = str(chat.get("id", ""))
+                from_id = str(sender.get("id", ""))
+                sender_name = (
+                    sender.get("username")
+                    or " ".join(part for part in [sender.get("first_name"), sender.get("last_name")] if part)
+                    or None
+                )
+                if not chat_id:
+                    continue
+                if not allowed_chat(chat_id, from_id):
+                    log(f"dropped non-allowlisted chat={chat_id}")
+                    continue
+                # Ponte de tickets: reply a uma notificação de bloqueio (#tkt:<id>)
+                # anexa a resposta e reabre o ticket para o orquestrador retomar.
+                reply_src = (message.get("reply_to_message") or {}).get("text") or ""
+                m_tkt = re.search(r"#tkt:([0-9a-fA-F-]+)", reply_src)
+                if m_tkt and text:
+                    result = unblock_ticket(m_tkt.group(1), text, sender_name or "humano")
+                    api(token, "sendMessage", {"chat_id": chat_id, "text": result})
+                    log(f"ticket-unblock chat={chat_id} ticket={m_tkt.group(1)[:8]}")
+                    continue
+                audio_file_id = message_audio_file_id(message)
+                if audio_file_id:
+                    api(token, "sendChatAction", {"chat_id": chat_id, "action": "typing"}, timeout=10)
+                    try:
+                        transcription = handle_audio_message(token, chat_id, audio_file_id)
+                    except Exception as exc:
+                        api(token, "sendMessage", {"chat_id": chat_id, "text": f"Falhei ao transcrever audio: {exc}"})
+                        log(f"audio-transcribe-fail chat={chat_id}: {exc}")
+                        continue
+                    prompt = build_prompt(chat_id, transcription, speaker=sender_name)
+                    _executor.submit(
+                        run_orchestrated_reply, token, chat_id, prompt,
+                        memory_user_text=f"[audio transcrito] {transcription}", speaker=sender_name,
+                    )
+                    continue
+                image_info = message_image_file_id(message)
+                if image_info:
+                    api(token, "sendChatAction", {"chat_id": chat_id, "action": "typing"}, timeout=10)
+                    try:
+                        image_file_id, suffix = image_info
+                        image_path = save_telegram_file(token, image_file_id, suffix=suffix)
+                    except Exception as exc:
+                        api(token, "sendMessage", {"chat_id": chat_id, "text": f"Falhei ao processar imagem: {exc}"})
+                        log(f"image-download-fail chat={chat_id}: {exc}")
+                        continue
+                    caption = (message.get("caption") or "").strip()
+                    prompt_text = (
+                        "Analise a imagem recebida no Telegram.\n"
+                        f"Caminho local da imagem: {image_path}\n"
+                        f"Legenda/mensagem do usuario: {caption or '(sem legenda)'}\n"
+                        "Se conseguir acessar o arquivo, descreva o que ve e responda ao pedido do usuario."
+                    )
+                    prompt = build_prompt(chat_id, prompt_text, speaker=sender_name)
+                    _executor.submit(
+                        run_orchestrated_reply, token, chat_id, prompt,
+                        memory_user_text=f"[imagem] {caption or image_path}", speaker=sender_name,
+                    )
+                    continue
+                if not text:
+                    continue
+                if text.startswith("/start"):
+                    api(token, "sendMessage", {"chat_id": chat_id, "text": "EvoNexus online. Pode mandar."})
+                    continue
+                if text.startswith("/new"):
+                    clear_chat_memory(chat_id)
+                    api(token, "sendMessage", {"chat_id": chat_id, "text": "Sessao nova iniciada. Memoria local limpa."})
+                    continue
+                groq_command = parse_groq_command(text)
+                if groq_command is not None:
+                    answer = handle_groq_command(groq_command)
+                    api(token, "sendMessage", {"chat_id": chat_id, "text": answer})
+                    log(f"groq-command chat={chat_id} {groq_command.split(' ', 1)[0]}")
+                    continue
+                provider_command = parse_provider_command(text)
+                if provider_command is not None:
+                    if provider_command == "status":
+                        provider_id, model, base_url = active_provider_info()
+                        answer = f"provider: {provider_id}\nmodel: {model or 'default'}"
+                        if base_url:
+                            answer += f"\nbase_url: {base_url}"
+                    else:
+                        answer = set_telegram_provider(provider_command)
+                    api(token, "sendMessage", {"chat_id": chat_id, "text": answer})
+                    log(f"provider-command chat={chat_id} {provider_command}")
+                    continue
+                if is_provider_question(text):
+                    provider_id, model, base_url = active_provider_info()
+                    answer = (
+                        "Estou usando o provider ativo do EvoNexus:\n"
+                        f"provider: {provider_id}\n"
+                        f"model: {model or 'default'}"
+                    )
+                    if base_url:
+                        answer += f"\nbase_url: {base_url}"
+                    api(token, "sendMessage", {"chat_id": chat_id, "text": answer})
+                    log(f"provider-info chat={chat_id} {provider_id}:{model or 'default'}")
+                    continue
+                prompt = build_prompt(chat_id, text, speaker=sender_name)
+                _executor.submit(
+                    run_orchestrated_reply, token, chat_id, prompt,
+                    memory_user_text=text, speaker=sender_name,
+                )
+        except urllib.error.HTTPError as exc:
+            body = exc.read().decode("utf-8", "ignore")
+            log(f"telegram http error {exc.code}: {body[:300]}")
+            time.sleep(5)
+        except KeyboardInterrupt:
+            return 0
+        except Exception as exc:
+            log(f"loop error: {exc}")
+            time.sleep(5)
+
+
+if __name__ == "__main__":
+    sys.exit(main())
diff --git a/scripts/telegram_swarm_entry.sh b/scripts/telegram_swarm_entry.sh
new file mode 100755
index 000000000..d482f7ae2
--- /dev/null
+++ b/scripts/telegram_swarm_entry.sh
@@ -0,0 +1,161 @@
+#!/usr/bin/env bash
+# Swarm entrypoint for the Telegram bot service.
+#
+# Two runtime modes (TELEGRAM_MODE=channels|provider, default: auto):
+#   * channels — `claude --channels` direto na Anthropic. Requer login
+#     claude.ai no volume de auth (rode `claude /login` uma vez via docker
+#     exec; persiste em /root/.claude/.credentials.json). A disponibilidade
+#     de channels é verificada server-side pela Anthropic e NÃO funciona
+#     através de proxies OpenAI-compatíveis (NVIDIA NIM etc.).
+#   * provider — scripts/telegram_provider_bot.py: bot de polling que
+#     responde pelo provider ativo em config/providers.json (NVIDIA NIM,
+#     OpenAI, ...). Não depende de channels nem de login Anthropic. É o
+#     mesmo runtime do `make telegram` local.
+#
+# Auto: se existir login claude.ai → channels; senão → provider. O antigo
+# caminho LiteLLM-proxy foi removido: channels atrás do proxy nunca passa
+# na verificação server-side, então o canal ficava morto ("desconectado").
+set -euo pipefail
+cd /workspace
+
+CONFIG_DIR=/workspace/config
+CHANNEL_DIR="$HOME/.claude/channels/telegram"
+
+reload_env() {
+    set -a
+    # shellcheck disable=SC1091
+    . "$CONFIG_DIR/.env" 2>/dev/null || true
+    set +a
+}
+
+# --- 1. Decide runtime mode --------------------------------------------------
+reload_env
+MODE="${TELEGRAM_MODE:-auto}"
+if [ "$MODE" = "auto" ]; then
+    if grep -q '"claudeAiOauth"' /root/.claude/.credentials.json 2>/dev/null; then
+        MODE=channels
+    else
+        MODE=provider
+    fi
+fi
+echo "[$(date -Is)] telegram mode: $MODE" >&2
+
+# --- 2. Wait for the bot token (both modes need it) --------------------------
+# Lands in config/.env via dashboard → Integrations, or comes pre-set in the
+# channel dir from a previous boot. No crash-loop while onboarding.
+has_channel_token() {
+    grep -q '^TELEGRAM_BOT_TOKEN=..*' "$CHANNEL_DIR/.env" 2>/dev/null
+}
+while [ -z "${TELEGRAM_BOT_TOKEN:-}" ] && ! has_channel_token; do
+    echo "[$(date -Is)] waiting for TELEGRAM_BOT_TOKEN — configure via dashboard → Integrations" >&2
+    sleep 30
+    reload_env
+done
+
+# --- 3. Seed channel config on the auth volume -------------------------------
+mkdir -p "$CHANNEL_DIR"
+if [ ! -f "$CHANNEL_DIR/.env" ] && [ -n "${TELEGRAM_BOT_TOKEN:-}" ]; then
+    printf 'TELEGRAM_BOT_TOKEN=%s\n' "$TELEGRAM_BOT_TOKEN" > "$CHANNEL_DIR/.env"
+    chmod 600 "$CHANNEL_DIR/.env"
+    echo "[$(date -Is)] seeded $CHANNEL_DIR/.env" >&2
+fi
+if [ -n "${TELEGRAM_CHAT_ID:-}" ]; then
+    if [ ! -f "$CHANNEL_DIR/access.json" ]; then
+        printf '{"dmPolicy":"allowlist","allowFrom":["%s"],"groups":{},"pending":{}}\n' \
+            "$TELEGRAM_CHAT_ID" > "$CHANNEL_DIR/access.json"
+        chmod 600 "$CHANNEL_DIR/access.json"
+        echo "[$(date -Is)] seeded $CHANNEL_DIR/access.json (allowlist: $TELEGRAM_CHAT_ID)" >&2
+    else
+        # The file may predate TELEGRAM_CHAT_ID landing in .env (first DM
+        # creates it with the sender stuck in "pending", and the bot keeps
+        # answering with the pairing prompt forever). Merge the owner into
+        # the allowlist on every boot — idempotent.
+        _tmp_acc=$(mktemp)
+        if jq --arg id "$TELEGRAM_CHAT_ID" \
+              '.dmPolicy //= "allowlist"
+               | .allowFrom = ((.allowFrom // []) + [$id] | unique)
+               | .pending = ((.pending // {}) | del(.[$id]))' \
+              "$CHANNEL_DIR/access.json" > "$_tmp_acc" 2>/dev/null; then
+            mv "$_tmp_acc" "$CHANNEL_DIR/access.json"
+            chmod 600 "$CHANNEL_DIR/access.json"
+            echo "[$(date -Is)] ensured $TELEGRAM_CHAT_ID in access.json allowlist" >&2
+        else
+            rm -f "$_tmp_acc"
+            echo "[$(date -Is)] WARNING: could not patch access.json allowlist" >&2
+        fi
+    fi
+fi
+
+# --- 4. Restore /root/.claude.json (same rationale as start-dashboard.sh) --
+# The main CLI config is a SIBLING of /root/.claude/ (the volume), so it
+# lives in the container layer and is wiped on redeploy. Restore the latest
+# backup from the volume, or seed a minimal one to skip first-run prompts.
+if [ ! -f /root/.claude.json ]; then
+    latest_backup=$(ls -t /root/.claude/backups/.claude.json.backup.* 2>/dev/null | head -n1 || true)
+    if [ -n "${latest_backup:-}" ] && [ -f "${latest_backup}" ]; then
+        echo "[$(date -Is)] restoring /root/.claude.json from ${latest_backup}" >&2
+        cp "${latest_backup}" /root/.claude.json
+    else
+        echo "[$(date -Is)] seeding minimal /root/.claude.json" >&2
+        cat > /root/.claude.json <<'EOF'
+{
+  "theme": "dark",
+  "hasCompletedOnboarding": true,
+  "hasSeenWelcome": true,
+  "bypassPermissionsModeAccepted": true,
+  "telemetry": false
+}
+EOF
+    fi
+fi
+
+# Whatever the restore produced, force the first-run flags — a backup taken
+# from a half-initialized run leaves claude stuck at the theme picker or at
+# the /workspace trust dialog, and the channel never starts.
+_tmp_cfg=$(mktemp)
+if jq '.theme //= "dark"
+       | .hasCompletedOnboarding = true
+       | .hasSeenWelcome = true
+       | .bypassPermissionsModeAccepted = true
+       | .projects["/workspace"] = ((.projects["/workspace"] // {}) + {
+           "hasTrustDialogAccepted": true,
+           "hasCompletedProjectOnboarding": true
+         })' \
+      /root/.claude.json > "$_tmp_cfg" 2>/dev/null; then
+    mv "$_tmp_cfg" /root/.claude.json
+else
+    rm -f "$_tmp_cfg"
+    echo "[$(date -Is)] WARNING: could not patch /root/.claude.json flags" >&2
+fi
+
+# The container runs as root; Claude Code refuses --dangerously-skip-
+# permissions as root unless it knows it's inside a sandboxed container.
+export IS_SANDBOX=1
+
+# --- 5. Run the bot -----------------------------------------------------------
+if [ "$MODE" = "provider" ]; then
+    echo "[$(date -Is)] starting telegram_provider_bot.py on the active provider" >&2
+    exec /workspace/.venv/bin/python scripts/telegram_provider_bot.py
+fi
+
+# channels mode — the claude.ai OAuth login must win: any Anthropic env
+# credential (possibly sourced from config/.env) would shadow it and fail
+# the server-side channels entitlement check.
+unset ANTHROPIC_BASE_URL ANTHROPIC_AUTH_TOKEN ANTHROPIC_MODEL ANTHROPIC_API_KEY 2>/dev/null || true
+
+if [ "$MODE" = "channels" ] && ! grep -q '"claudeAiOauth"' /root/.claude/.credentials.json 2>/dev/null; then
+    echo "[$(date -Is)] WARNING: TELEGRAM_MODE=channels but no claude.ai login on the auth volume — run 'claude /login' via docker exec or the channel will stay dead" >&2
+fi
+
+# First boot: the plugin cache lives on the /root/.claude volume and starts
+# empty — install the telegram channel plugin before starting the channel.
+if [ ! -d "$HOME/.claude/plugins/cache/claude-plugins-official/telegram" ]; then
+    echo "[$(date -Is)] installing telegram channel plugin" >&2
+    claude plugin marketplace add anthropics/claude-plugins-official >/dev/null 2>&1 || true
+    claude plugin install telegram@claude-plugins-official --scope user \
+        || echo "[$(date -Is)] WARNING: telegram plugin install failed" >&2
+fi
+
+exec claude \
+    --channels "plugin:telegram@claude-plugins-official" \
+    --dangerously-skip-permissions
diff --git a/scripts/update_hyperframes_skills.sh b/scripts/update_hyperframes_skills.sh
new file mode 100755
index 000000000..6a0e36a2a
--- /dev/null
+++ b/scripts/update_hyperframes_skills.sh
@@ -0,0 +1,106 @@
+#!/usr/bin/env bash
+# scripts/update_hyperframes_skills.sh — refresh the official HyperFrames
+# skill catalog inside .claude/skills-media/ (social-media-production,
+# briefing Etapa 5).
+#
+# `hyperframes skills update` (bundled in the `hyperframes` npm package,
+# pinned in media_worker/package.json) is the OFFICIAL, non-interactive
+# updater — verified locally 2026-07-19: it does NOT accept a project-local
+# target directory (its --dir flag only scopes prune/removed-detection, not
+# the install itself); it always writes to the user's HOME-level skill
+# directories (~/.claude/skills/, ~/.agents/skills/, and a few other AI-tool
+# conventions it auto-detects). This script runs that official updater, then
+# copies (never symlinks — the Docker build context can't follow symlinks
+# outside the repo) exactly the skill folders it reports as "installed"
+# into this repo's .claude/skills-media/, where the media-worker image
+# bakes them in (Dockerfile.media-worker).
+#
+# Non-interactive. Never run this automatically at container/production
+# startup — it is a deliberate, reviewed, human-triggered update:
+#   1. Run it.
+#   2. Read the diff it prints.
+#   3. `git add .claude/skills-media && git commit` only if the diff looks right.
+#
+# Never touches .claude/skills-media/social-media-production/ (the
+# EvoNexus-authored skill, not part of the official HyperFrames catalog).
+
+set -euo pipefail
+
+REPO_ROOT="$(cd "$(dirname "${BASH_SOURCE[0]}")/.." && pwd)"
+TARGET_DIR="$REPO_ROOT/.claude/skills-media"
+CUSTOM_SKILL="social-media-production"
+
+# Prefer the pinned, lockfile-installed binary over a bare `npx hyperframes`
+# (which would resolve @latest and defeat the whole point of pinning).
+if [[ -x "$REPO_ROOT/media_worker/node_modules/.bin/hyperframes" ]]; then
+  HF_BIN="$REPO_ROOT/media_worker/node_modules/.bin/hyperframes"
+elif command -v hyperframes >/dev/null 2>&1; then
+  HF_BIN="$(command -v hyperframes)"
+else
+  echo "error: hyperframes binary not found. Run 'npm ci' in media_worker/ first." >&2
+  exit 1
+fi
+
+echo "==> Using $($HF_BIN --version 2>/dev/null || echo "$HF_BIN")"
+echo "==> Running: $HF_BIN skills update (writes to ~/.claude/skills, ~/.agents/skills — official, HOME-scoped installer)"
+
+UPDATE_JSON="$(mktemp)"
+trap 'rm -f "$UPDATE_JSON"' EXIT
+
+# --json prints pure JSON on stdout (the interactive progress boxes go to
+# stderr, which is left to print normally so a human running this sees them).
+"$HF_BIN" skills update --json > "$UPDATE_JSON"
+
+# "installed" = just (re)installed this run; "current" = already at latest
+# and left untouched. Both mean "present and up to date" — copy both.
+INSTALLED_SKILLS="$(python3 -c "
+import json
+with open('$UPDATE_JSON') as f:
+    data = json.load(f)
+names = sorted(set(data.get('installed', [])) | set(data.get('current', [])))
+for name in names:
+    print(name)
+")"
+
+if [[ -z "$INSTALLED_SKILLS" ]]; then
+  echo "error: 'hyperframes skills update --json' reported zero installed/current skills — aborting, nothing copied." >&2
+  cat "$UPDATE_JSON" >&2
+  exit 1
+fi
+
+echo "==> Official updater reports these skills present:"
+echo "$INSTALLED_SKILLS" | sed 's/^/     - /'
+
+mkdir -p "$TARGET_DIR"
+
+echo "==> Copying into $TARGET_DIR (custom skill '$CUSTOM_SKILL' is never touched by this script)"
+while IFS= read -r skill; do
+  [[ -z "$skill" ]] && continue
+  if [[ "$skill" == "$CUSTOM_SKILL" ]]; then
+    echo "     skipping '$skill' (not part of the official catalog)"
+    continue
+  fi
+  SRC="$HOME/.claude/skills/$skill"
+  if [[ ! -d "$SRC" ]]; then
+    echo "     warn: '$skill' reported installed but not found at $SRC — skipping" >&2
+    continue
+  fi
+  rm -rf "$TARGET_DIR/$skill"
+  cp -a "$SRC" "$TARGET_DIR/$skill"
+  echo "     synced $skill"
+done <<< "$INSTALLED_SKILLS"
+
+echo
+echo "==> Diff (review before committing):"
+if git -C "$REPO_ROOT" rev-parse --is-inside-work-tree >/dev/null 2>&1; then
+  git -C "$REPO_ROOT" add -N "$TARGET_DIR" >/dev/null 2>&1 || true
+  git -C "$REPO_ROOT" --no-pager diff --stat -- "$TARGET_DIR"
+else
+  echo "    (not a git repo — skipping diff)"
+fi
+
+echo
+echo "==> Done. Review the diff above, then:"
+echo "      git add .claude/skills-media && git commit -m 'chore: update hyperframes skills'"
+echo "    This script does NOT run automatically in production — it is meant"
+echo "    to be run by hand and committed deliberately (briefing Etapa 5)."
diff --git a/setup.py b/setup.py
index 6094d75c8..ee6a27a6f 100644
--- a/setup.py
+++ b/setup.py
@@ -863,7 +863,7 @@ def check_prerequisites():
     # "route OpenAI Codex shortcuts to correct endpoint" fix (#566) which
     # the codex_auth provider flow relies on.
     if not _check_tool("OpenClaude", ["openclaude", "--version"],
-                        install_cmd="npm install -g @gitlawb/openclaude@latest",
+                        install_cmd="npm install -g @gitlawb/openclaude@0.23.0",
                         min_version=(0, 3, 0)):
         missing.append("openclaude")
 
@@ -1732,7 +1732,7 @@ def _ensure_user_has_tools(service_user: str) -> None:
     if rc != 0:
         print(f"  {DIM}{T('tool_installing_verb', name=f'OpenClaude for {service_user}')}{RESET}")
         os.system(
-            f"su - {service_user} -c 'npm install -g @gitlawb/openclaude@latest --prefix ~/.local' "
+            f"su - {service_user} -c 'npm install -g @gitlawb/openclaude@0.23.0 --prefix ~/.local' "
             f">/dev/null 2>&1"
         )
 
@@ -2068,7 +2068,7 @@ def main():
                 print(f"  {DIM}Upgrading OpenClaude for {service_user} (found {oc_version}, need 0.3.0+)...{RESET}")
             else:
                 print(f"  {DIM}Installing OpenClaude for {service_user}...{RESET}")
-            os.system(f"su - {service_user} -c 'npm install -g @gitlawb/openclaude@latest --prefix ~/.local' >/dev/null 2>&1")
+            os.system(f"su - {service_user} -c 'npm install -g @gitlawb/openclaude@0.23.0 --prefix ~/.local' >/dev/null 2>&1")
             print(f"  {GREEN}✓{RESET} OpenClaude installed")
 
         # Sync deps as service user
diff --git a/social-auth/app.py b/social-auth/app.py
index a079184d2..8744e2efc 100644
--- a/social-auth/app.py
+++ b/social-auth/app.py
@@ -47,8 +47,10 @@ def disconnect(platform, index):
 
 if __name__ == "__main__":
     port = int(os.environ.get("SOCIAL_AUTH_PORT", 8765))
+    host = os.environ.get("SOCIAL_AUTH_HOST", "0.0.0.0")
+    display_host = "localhost" if host in {"0.0.0.0", "::"} else host
     print(f"\n  🔑 Evolution Social Auth")
-    print(f"  📍 http://localhost:{port}")
+    print(f"  📍 http://{display_host}:{port}")
     print(f"  ⛔ Ctrl+C para parar\n")
-    webbrowser.open(f"http://localhost:{port}")
-    app.run(host="127.0.0.1", port=port, debug=False)
+    webbrowser.open(f"http://{display_host}:{port}")
+    app.run(host=host, port=port, debug=False)
diff --git a/social-auth/auth/twitter.py b/social-auth/auth/twitter.py
index 48c5c1999..26bfc7a98 100644
--- a/social-auth/auth/twitter.py
+++ b/social-auth/auth/twitter.py
@@ -33,7 +33,7 @@ def connect():
         <html><body style="background:#0C111D;color:#F9FAFB;font-family:Inter,sans-serif;display:flex;justify-content:center;align-items:center;height:100vh;">
         <div style="background:#182230;border:1px solid #344054;border-radius:12px;padding:40px;max-width:500px;width:100%;">
             <h2 style="color:#00FFA7;">X / Twitter — Adicionar Conta</h2>
-            <p style="color:#D0D5DD;margin-bottom:20px;">Cole seu Bearer Token (App-only) ou configure TWITTER_CLIENT_ID no .env pra usar OAuth:</p>
+            <p style="color:#D0D5DD;margin-bottom:20px;">Cole um Bearer Token para leitura ou configure TWITTER_CLIENT_ID no .env para OAuth com escrita:</p>
             <form action="/save/twitter" method="POST">
                 <input name="label" type="text" placeholder="Account label (e.g. Main)" style="width:100%;padding:12px;background:#0C111D;border:1px solid #344054;border-radius:8px;color:#F9FAFB;font-size:14px;margin-bottom:12px;">
                 <input name="bearer_token" type="text" placeholder="Bearer Token" style="width:100%;padding:12px;background:#0C111D;border:1px solid #344054;border-radius:8px;color:#F9FAFB;font-size:14px;margin-bottom:20px;">
@@ -55,7 +55,7 @@ def connect():
         "response_type": "code",
         "client_id": client_id,
         "redirect_uri": _redirect_uri(),
-        "scope": "tweet.read users.read follows.read offline.access",
+        "scope": "tweet.read tweet.write users.read follows.read media.write offline.access",
         "state": state,
         "code_challenge": code_challenge,
         "code_challenge_method": "S256",
@@ -87,13 +87,17 @@ def callback():
     if not code:
         return f"Error: {request.args.get('error', 'no code')}", 400
 
-    data = urllib.parse.urlencode({
+    token_payload = {
         "code": code,
         "grant_type": "authorization_code",
         "client_id": env.get("TWITTER_CLIENT_ID", ""),
         "redirect_uri": _redirect_uri(),
         "code_verifier": session.get("twitter_code_verifier", ""),
-    }).encode()
+    }
+    client_secret = env.get("TWITTER_CLIENT_SECRET", "")
+    if client_secret:
+        token_payload["client_secret"] = client_secret
+    data = urllib.parse.urlencode(token_payload).encode()
 
     req = urllib.request.Request("https://api.x.com/2/oauth2/token", data=data, method="POST",
                                  headers={"Content-Type": "application/x-www-form-urlencoded"})
diff --git a/social-auth/env_manager.py b/social-auth/env_manager.py
index a040cff6f..4c6ba2cd0 100644
--- a/social-auth/env_manager.py
+++ b/social-auth/env_manager.py
@@ -1,4 +1,11 @@
-"""Manage .env — multi-account support for social platforms."""
+"""Manage social credentials — multi-account support for social platforms.
+
+Tokens SOCIAL_* vivem em config/social.env (na VPS: volume evonexus_config,
+compartilhado entre dashboard e scheduler e persistente entre redeploys —
+o .env da raiz não existe/persiste dentro dos containers). Demais chaves
+(TWITTER_CLIENT_ID etc.) continuam no .env da raiz, com os.environ como
+camada base para env vars de stack.
+"""
 
 import os
 import re
@@ -6,15 +13,18 @@
 from datetime import datetime, timezone
 
 ENV_PATH = Path(__file__).resolve().parent.parent / ".env"
+SOCIAL_ENV_PATH = Path(
+    os.environ.get("SOCIAL_ENV_PATH")
+    or (Path(__file__).resolve().parent.parent / "config" / "social.env")
+)
 
-# ── Low-level .env read/write ────────────────────────
+# ── Low-level read/write ────────────────────────
 
-def read_env() -> dict:
-    """Read all vars from .env."""
+def _parse_file(path: Path) -> dict:
     env = {}
-    if not ENV_PATH.exists():
+    if not path.exists():
         return env
-    with open(ENV_PATH) as f:
+    with open(path) as f:
         for line in f:
             line = line.strip()
             if not line or line.startswith("#") or "=" not in line:
@@ -24,12 +34,25 @@ def read_env() -> dict:
     return env
 
 
+def read_env() -> dict:
+    """Merged vars: os.environ < .env < social.env."""
+    env = dict(os.environ)
+    env.update(_parse_file(ENV_PATH))
+    env.update(_parse_file(SOCIAL_ENV_PATH))
+    return env
+
+
+def _target_path(key: str) -> Path:
+    return SOCIAL_ENV_PATH if key.startswith("SOCIAL_") else ENV_PATH
+
+
 def set_env(key: str, value: str):
-    """Set or update a key in .env."""
+    """Set or update a key in its store (SOCIAL_* → social.env; resto → .env)."""
+    path = _target_path(key)
     lines = []
     found = False
-    if ENV_PATH.exists():
-        with open(ENV_PATH) as f:
+    if path.exists():
+        with open(path) as f:
             for line in f:
                 stripped = line.strip()
                 if stripped and not stripped.startswith("#") and "=" in stripped:
@@ -41,25 +64,31 @@ def set_env(key: str, value: str):
                 lines.append(line if line.endswith("\n") else line + "\n")
     if not found:
         lines.append(f"{key}={value}\n")
-    with open(ENV_PATH, "w") as f:
+    path.parent.mkdir(parents=True, exist_ok=True)
+    with open(path, "w") as f:
         f.writelines(lines)
+    try:
+        path.chmod(0o600)
+    except OSError:
+        pass
 
 
 def delete_env(key: str):
-    """Remove a key from .env."""
-    if not ENV_PATH.exists():
-        return
-    lines = []
-    with open(ENV_PATH) as f:
-        for line in f:
-            stripped = line.strip()
-            if stripped and not stripped.startswith("#") and "=" in stripped:
-                k = stripped.split("=", 1)[0].strip()
-                if k == key:
-                    continue
-            lines.append(line if line.endswith("\n") else line + "\n")
-    with open(ENV_PATH, "w") as f:
-        f.writelines(lines)
+    """Remove a key from both stores."""
+    for path in (ENV_PATH, SOCIAL_ENV_PATH):
+        if not path.exists():
+            continue
+        lines = []
+        with open(path) as f:
+            for line in f:
+                stripped = line.strip()
+                if stripped and not stripped.startswith("#") and "=" in stripped:
+                    k = stripped.split("=", 1)[0].strip()
+                    if k == key:
+                        continue
+                lines.append(line if line.endswith("\n") else line + "\n")
+        with open(path, "w") as f:
+            f.writelines(lines)
 
 
 # ── Multi-account management ─────────────────────────
@@ -100,8 +129,10 @@ def delete_env(key: str):
         "icon": "𝕏",
         "auth_type": "bearer_or_oauth",
         "fields": ["BEARER_TOKEN", "ACCESS_TOKEN", "REFRESH_TOKEN", "USER_ID", "TOKEN_CREATED_AT"],
-        "required": ["BEARER_TOKEN"],
-        "expires": False,
+        "required_any": ["ACCESS_TOKEN", "BEARER_TOKEN"],
+        "expires": True,
+        "ttl_days": 180,
+        "timestamp_field": "TOKEN_CREATED_AT",
     },
     "tiktok": {
         "name": "TikTok",
@@ -181,8 +212,11 @@ def get_accounts(platform: str) -> list[dict]:
             detail = label
             days_left = None
 
+            if platform == "twitter" and "BEARER_TOKEN" in fields and "ACCESS_TOKEN" not in fields:
+                detail = f"{label} (read-only app bearer; posting requires OAuth tweet.write)"
+
             # Check expiration
-            if cfg.get("expires") and cfg.get("timestamp_field"):
+            if cfg.get("expires") and cfg.get("timestamp_field") and cfg["timestamp_field"] in fields:
                 ts = fields.get(cfg["timestamp_field"])
                 if ts:
                     try:
diff --git a/start-dashboard.sh b/start-dashboard.sh
index b56848bf3..a9114497f 100755
--- a/start-dashboard.sh
+++ b/start-dashboard.sh
@@ -75,6 +75,36 @@ EOF
     fi
 fi
 
+# Whatever the restore produced, force the first-run flags — a backup taken
+# from a half-initialized run leaves claude stuck at the theme picker or at
+# the /workspace trust dialog. Without the trust flag every heartbeat's
+# `claude` subprocess ignores .claude/settings.json permissions and fails
+# with "this workspace has not been trusted". (Same patch as
+# telegram_swarm_entry.sh, but via python3 — this image has no jq.)
+python3 - <<'EOF' || echo "[start-dashboard] WARNING: could not patch /root/.claude.json flags"
+import json
+
+path = "/root/.claude.json"
+with open(path) as f:
+    cfg = json.load(f)
+
+cfg.setdefault("theme", "dark")
+cfg["hasCompletedOnboarding"] = True
+cfg["hasSeenWelcome"] = True
+cfg["bypassPermissionsModeAccepted"] = True
+project = cfg.setdefault("projects", {}).setdefault("/workspace", {})
+project["hasTrustDialogAccepted"] = True
+project["hasCompletedProjectOnboarding"] = True
+
+with open(path, "w") as f:
+    json.dump(cfg, f, indent=2)
+EOF
+
+# The container runs as root; Claude Code refuses --dangerously-skip-
+# permissions as root unless it knows it's inside a sandboxed container.
+# Heartbeat subprocesses (heartbeat_runner/provider_fallback) inherit this.
+export IS_SANDBOX=1
+
 # Start terminal-server in the background
 node /workspace/dashboard/terminal-server/bin/server.js --port "${TERMINAL_PORT}" &
 TERMINAL_PID=$!
diff --git a/start-services.sh b/start-services.sh
index 5ca78ff74..798753f09 100755
--- a/start-services.sh
+++ b/start-services.sh
@@ -17,14 +17,70 @@ cd "$SCRIPT_DIR" || exit 1
 
 # Load environment variables
 if [ -f .env ]; then
-  set -a
-  source .env
-  set +a
+  while IFS= read -r line || [ -n "$line" ]; do
+    line="${line%$'\r'}"
+    [[ -z "$line" || "$line" =~ ^[[:space:]]*# ]] && continue
+    [[ "$line" != *"="* ]] && continue
+    key="${line%%=*}"
+    value="${line#*=}"
+    key="$(printf '%s' "$key" | xargs)"
+    [[ "$key" =~ ^[A-Za-z_][A-Za-z0-9_]*$ ]] || continue
+    export "$key=$value"
+  done < .env
 fi
 
 # Ensure logs dir exists (fresh installs / reboots after manual cleanup)
 mkdir -p "$SCRIPT_DIR/logs"
 
+if [ -x "$SCRIPT_DIR/.venv/bin/python" ]; then
+  PYTHON_BIN="$SCRIPT_DIR/.venv/bin/python"
+elif [ -x "$SCRIPT_DIR/.venv/bin/python3" ]; then
+  PYTHON_BIN="$SCRIPT_DIR/.venv/bin/python3"
+else
+  PYTHON_BIN="python3"
+fi
+
+start_detached() {
+  local log_file="$1"
+  shift
+  if command -v setsid >/dev/null 2>&1; then
+    setsid "$@" > "$log_file" 2>&1 < /dev/null &
+  else
+    nohup "$@" > "$log_file" 2>&1 < /dev/null &
+  fi
+}
+
+kill_repo_pid_file() {
+  local pid_file="$1"
+  local expected_name="$2"
+  [ -f "$pid_file" ] || return 0
+
+  local pid
+  pid="$(tr -cd '0-9' < "$pid_file")"
+  [ -n "$pid" ] || return 0
+  [ -d "/proc/$pid" ] || return 0
+
+  local cwd cmdline
+  cwd="$(readlink "/proc/$pid/cwd" 2>/dev/null || true)"
+  cmdline="$(tr '\0' ' ' < "/proc/$pid/cmdline" 2>/dev/null || true)"
+  if [ "$cwd" = "$SCRIPT_DIR" ] && [[ "$cmdline" == *"$expected_name"* ]]; then
+    kill "$pid" 2>/dev/null || true
+    sleep 1
+    kill -0 "$pid" 2>/dev/null && kill -TERM "$pid" 2>/dev/null || true
+  fi
+}
+
+kill_tcp_port() {
+  local port="$1"
+  if command -v fuser >/dev/null 2>&1; then
+    fuser -k -n tcp "$port" 2>/dev/null || true
+  elif command -v lsof >/dev/null 2>&1; then
+    local pids
+    pids=$(lsof -ti "tcp:$port" 2>/dev/null || true)
+    [ -n "$pids" ] && kill $pids 2>/dev/null || true
+  fi
+}
+
 # Kill existing services (including scheduler).
 #
 # The Python patterns used to be `python.*app.py` and `python.*scheduler.py`,
@@ -34,26 +90,20 @@ mkdir -p "$SCRIPT_DIR/logs"
 # listener by its actual port; fall back to a strict pattern pinned to the
 # Python binary we spawn and the absolute script path so at worst we match
 # siblings inside this repo, never strangers.
-pkill -f 'terminal-server/bin/server.js' 2>/dev/null
+TERMINAL_PORT="${EVONEXUS_TERMINAL_PORT:-32352}"
 DASHBOARD_PORT="${EVONEXUS_PORT:-8080}"
-if command -v fuser >/dev/null 2>&1; then
-  fuser -k -n tcp "$DASHBOARD_PORT" 2>/dev/null || true
-elif command -v lsof >/dev/null 2>&1; then
-  pids=$(lsof -ti "tcp:$DASHBOARD_PORT" 2>/dev/null || true)
-  [ -n "$pids" ] && kill $pids 2>/dev/null || true
-fi
-# Also kill by pinned interpreter + absolute script path (no generic python wildcard).
-VENV_PY="$SCRIPT_DIR/.venv/bin/python"
-pkill -f "$VENV_PY $SCRIPT_DIR/dashboard/backend/app.py" 2>/dev/null || true
-pkill -f "$VENV_PY $SCRIPT_DIR/scheduler.py" 2>/dev/null || true
+kill_tcp_port "$TERMINAL_PORT"
+kill_tcp_port "$DASHBOARD_PORT"
+kill_repo_pid_file "$SCRIPT_DIR/ADWs/logs/scheduler.pid" "scheduler.py"
+kill_repo_pid_file "$SCRIPT_DIR/ADWs/logs/scheduler-shell.pid" "scheduler.py"
 sleep 1
 
 # Start terminal-server (must run FROM the project root for agent discovery)
-nohup node dashboard/terminal-server/bin/server.js > "$SCRIPT_DIR/logs/terminal-server.log" 2>&1 &
+start_detached "$SCRIPT_DIR/logs/terminal-server.log" node dashboard/terminal-server/bin/server.js
 
 # Start scheduler
-nohup "$SCRIPT_DIR/.venv/bin/python" scheduler.py > "$SCRIPT_DIR/logs/scheduler.log" 2>&1 &
+start_detached "$SCRIPT_DIR/logs/scheduler.log" "$PYTHON_BIN" scheduler.py
 
 # Start Flask dashboard
 cd dashboard/backend || exit 1
-nohup "$SCRIPT_DIR/.venv/bin/python" app.py > "$SCRIPT_DIR/logs/dashboard.log" 2>&1 &
+start_detached "$SCRIPT_DIR/logs/dashboard.log" "$PYTHON_BIN" app.py
diff --git a/tests/backend/test_costs_mission_estimate.py b/tests/backend/test_costs_mission_estimate.py
new file mode 100644
index 000000000..ff6a086be
--- /dev/null
+++ b/tests/backend/test_costs_mission_estimate.py
@@ -0,0 +1,189 @@
+"""
+tests/backend/test_costs_mission_estimate.py
+
+Panorama 2026-07-17, item 2 — /api/costs gains an ESTIMATED breakdown of
+spend by Mission/Project. There is no direct link from a cost record
+(routine run, heartbeat run) to a specific Goal/Ticket, so this allocates
+each agent's total cost across the Missions/Projects that agent's tickets
+belong to, weighted by ticket count — explicitly labeled as an estimate, not
+an exact ledger.
+
+Run:
+    cd /path/to/workspace && pytest tests/backend/test_costs_mission_estimate.py -v
+"""
+
+from __future__ import annotations
+
+import importlib
+import json
+import sys
+import uuid
+from pathlib import Path
+
+import pytest
+
+REPO_ROOT = Path(__file__).resolve().parents[2]
+BACKEND_DIR = REPO_ROOT / "dashboard" / "backend"
+sys.path.insert(0, str(BACKEND_DIR))
+
+NOW = "2026-07-17T00:00:00.000000Z"
+
+
+@pytest.fixture
+def app(tmp_path):
+    import flask
+    from flask_login import LoginManager
+    import models as _models
+    importlib.reload(_models)
+
+    _app = flask.Flask(__name__)
+    _app.config["TESTING"] = True
+    _app.config["SECRET_KEY"] = "test-costs-mission"
+    _app.config["SQLALCHEMY_DATABASE_URI"] = "sqlite:///:memory:"
+    _app.config["SQLALCHEMY_TRACK_MODIFICATIONS"] = False
+    _models.db.init_app(_app)
+
+    _login_manager = LoginManager()
+    _login_manager.init_app(_app)
+
+    @_login_manager.user_loader
+    def _load_user(user_id):
+        return _models.User.query.get(int(user_id))
+
+    with _app.app_context():
+        _models.db.create_all()
+        admin = _models.User(username="admin", role="admin")
+        admin.set_password("password")
+        _models.db.session.add(admin)
+        _models.db.session.commit()
+
+        mission = _models.Mission(slug="m1", title="Evolution MRR", created_at=NOW, updated_at=NOW)
+        _models.db.session.add(mission)
+        _models.db.session.commit()
+        project = _models.GoalProject(slug="p1", title="Evo AI", mission_id=mission.id, created_at=NOW, updated_at=NOW)
+        _models.db.session.add(project)
+        _models.db.session.commit()
+        goal = _models.Goal(slug="g1", title="100 clientes", project_id=project.id, created_at=NOW, updated_at=NOW)
+        _models.db.session.add(goal)
+        _models.db.session.commit()
+
+        # 3 tickets assigned to pixel-social-media under this Goal/Project/Mission
+        for i in range(3):
+            _models.db.session.add(_models.Ticket(
+                id=str(uuid.uuid4()), title=f"Post {i}", status="open", priority="medium",
+                priority_rank=2, goal_id=goal.id, assignee_agent="pixel-social-media",
+                created_at=NOW, updated_at=NOW,
+            ))
+        # 1 ticket assigned to an agent with no cost record anywhere
+        _models.db.session.add(_models.Ticket(
+            id=str(uuid.uuid4()), title="Orphan work", status="open", priority="medium",
+            priority_rank=2, assignee_agent="clawdia-assistant", created_at=NOW, updated_at=NOW,
+        ))
+        _models.db.session.commit()
+
+    import routes.costs as _costs_routes
+    importlib.reload(_costs_routes)
+    _app.register_blueprint(_costs_routes.bp)
+    return _app
+
+
+@pytest.fixture
+def client(app):
+    with app.test_client() as c:
+        with c.session_transaction() as sess:
+            sess["_user_id"] = "1"
+            sess["_fresh"] = True
+        yield c
+
+
+def _write_metrics(tmp_path, monkeypatch, data: dict):
+    import routes.costs as costs_module
+    metrics_file = tmp_path / "metrics.json"
+    metrics_file.write_text(json.dumps(data))
+    monkeypatch.setattr(costs_module, "METRICS_PATH", metrics_file)
+    monkeypatch.setattr(costs_module, "LOGS_DIR", tmp_path)
+
+
+def test_pixel_routine_cost_allocates_to_its_mission_and_project(client, tmp_path, monkeypatch):
+    # metrics.json agent field uses the SHORT docstring alias ("pixel"),
+    # tickets use the full slug ("pixel-social-media") — the allocator must
+    # bridge that gap via prefix match.
+    _write_metrics(tmp_path, monkeypatch, {
+        "pixel-growth": {"total_cost_usd": 9.0, "runs": 3, "agent": "pixel", "total_input_tokens": 0, "total_output_tokens": 0},
+    })
+
+    resp = client.get("/api/costs")
+    assert resp.status_code == 200
+    body = resp.get_json()
+
+    assert len(body["by_mission"]) == 1
+    assert body["by_mission"][0]["title"] == "Evolution MRR"
+    assert body["by_mission"][0]["estimated_cost"] == pytest.approx(9.0)
+    assert body["by_mission"][0]["ticket_count"] == 3
+
+    assert len(body["by_project"]) == 1
+    assert body["by_project"][0]["title"] == "Evo AI"
+    assert body["by_project"][0]["estimated_cost"] == pytest.approx(9.0)
+
+    assert body["unallocated_cost"] == 0
+    assert "estimativa" in body["methodology"]
+
+
+def test_cost_for_agent_with_no_tickets_is_unallocated(client, tmp_path, monkeypatch):
+    _write_metrics(tmp_path, monkeypatch, {
+        "ai-news": {"total_cost_usd": 5.0, "runs": 1, "agent": "sage", "total_input_tokens": 0, "total_output_tokens": 0},
+    })
+    resp = client.get("/api/costs")
+    body = resp.get_json()
+    assert body["by_mission"] == []
+    assert body["unallocated_cost"] == pytest.approx(5.0)
+
+
+def test_ambiguous_short_name_prefix_is_unallocated(client, tmp_path, monkeypatch):
+    """If two ticket assignee_agent slugs share the same short-name prefix,
+    resolving would be a guess — must fall back to unallocated rather than
+    picking one arbitrarily."""
+    import models as _models
+    with client.application.app_context():
+        _models.db.session.add(_models.Ticket(
+            id=str(uuid.uuid4()), title="Other pixel-ish agent", status="open", priority="medium",
+            priority_rank=2, assignee_agent="pixel-other-thing", created_at=NOW, updated_at=NOW,
+        ))
+        _models.db.session.commit()
+
+    _write_metrics(tmp_path, monkeypatch, {
+        "pixel-growth": {"total_cost_usd": 9.0, "runs": 3, "agent": "pixel", "total_input_tokens": 0, "total_output_tokens": 0},
+    })
+    resp = client.get("/api/costs")
+    body = resp.get_json()
+    assert body["unallocated_cost"] == pytest.approx(9.0)
+    assert body["by_mission"] == []
+
+
+def test_ticket_with_no_goal_or_project_contributes_to_unallocated(client, tmp_path, monkeypatch):
+    import models as _models
+    with client.application.app_context():
+        _models.db.session.add(_models.Ticket(
+            id=str(uuid.uuid4()), title="Freestanding ticket", status="open", priority="medium",
+            priority_rank=2, assignee_agent="pixel-social-media", created_at=NOW, updated_at=NOW,
+        ))
+        _models.db.session.commit()
+
+    _write_metrics(tmp_path, monkeypatch, {
+        "pixel-growth": {"total_cost_usd": 12.0, "runs": 4, "agent": "pixel", "total_input_tokens": 0, "total_output_tokens": 0},
+    })
+    resp = client.get("/api/costs")
+    body = resp.get_json()
+    # 3 tickets under the Mission/Project + 1 freestanding = 4 total tickets,
+    # each worth 12/4 = 3.0; the freestanding one goes to unallocated.
+    assert body["by_mission"][0]["estimated_cost"] == pytest.approx(9.0)
+    assert body["unallocated_cost"] == pytest.approx(3.0)
+
+
+def test_empty_metrics_file_returns_empty_estimate_shape(client, tmp_path, monkeypatch):
+    monkeypatch.setattr(sys.modules["routes.costs"], "METRICS_PATH", tmp_path / "does-not-exist.json")
+    resp = client.get("/api/costs")
+    body = resp.get_json()
+    assert body["by_mission"] == []
+    assert body["by_project"] == []
+    assert body["unallocated_cost"] == 0
diff --git a/tests/backend/test_mempalace_routes.py b/tests/backend/test_mempalace_routes.py
new file mode 100644
index 000000000..0a0167247
--- /dev/null
+++ b/tests/backend/test_mempalace_routes.py
@@ -0,0 +1,1007 @@
+"""Regression tests for dashboard/backend/routes/mempalace.py.
+
+Covers the three MemPalace flows used by agents (heartbeats + routines):
+
+1. ``/api/mempalace/status``     — installation probe + stats shape
+2. ``/api/mempalace/sources``    — add/delete + path-allowlist (the
+   security-sensitive endpoint — must reject paths outside $HOME and
+   ``$WORKSPACE`` even though they exist on disk)
+3. ``/api/mempalace/search``     — semantic search contract (query, wing,
+   room, clamping of ``n``)
+4. ``/api/mempalace/install``    — install flow (already installed, success,
+   failure, timeout)
+5. ``/api/mempalace/mine``       — mining flow (no sources, invalid index,
+   concurrent 409, success)
+6. RBAC enforcement               — viewer blocked on manage endpoints
+7. Helper function edge cases     — corrupt sources, palace stats errors,
+   search exception handling
+
+The tests are unit-style: we patch ``mempalace.searcher.search_memories``
+and the persistent files (``sources.json``, ``mining_status.json``) so the
+suite runs without a live chromadb, and they validate the blueprint's
+behavior, not the chromadb internals.
+
+Skips oracle: there is no live chromadb on CI and the SDK does not ship
+its own unit tests for the blueprint layer.
+
+Run::
+
+    python -m pytest tests/backend/test_mempalace_routes.py -v
+"""
+
+from __future__ import annotations
+
+import json
+import subprocess
+import sys
+from pathlib import Path
+from types import SimpleNamespace
+from unittest.mock import MagicMock, patch
+
+import pytest
+
+
+# ---------------------------------------------------------------------------
+# Path setup — mirror test_workspace.py
+# ---------------------------------------------------------------------------
+REPO_ROOT = Path(__file__).resolve().parents[2]
+BACKEND_DIR = REPO_ROOT / "dashboard" / "backend"
+sys.path.insert(0, str(BACKEND_DIR))
+
+
+# ---------------------------------------------------------------------------
+# Fixtures
+# ---------------------------------------------------------------------------
+
+
+def _build_app_with_admin(tmp_palace_dir: Path):
+    """Return a Flask app whose mempalace blueprint points at tmp_palace_dir.
+
+    We do NOT init db/login — this suite exercises helper-level behavior
+    by calling the blueprint view functions directly with a mocked
+    ``current_user``. That keeps tests fast and avoids pulling in the auth
+    machinery that other suites (test_workspace.py) already cover.
+    """
+    import flask
+
+    app = flask.Flask(__name__)
+    app.config["TESTING"] = True
+
+    import routes.mempalace as mp
+    mp.PALACE_DIR = tmp_palace_dir
+    mp.SOURCES_FILE = tmp_palace_dir / "sources.json"
+    mp.MINING_STATUS_FILE = tmp_palace_dir / "mining_status.json"
+
+    app.register_blueprint(mp.bp)
+
+    return app, mp
+
+
+@pytest.fixture()
+def tmp_palace_dir(tmp_path):
+    d = tmp_path / "mempalace"
+    d.mkdir()
+    return d
+
+
+@pytest.fixture()
+def app(tmp_palace_dir):
+    flask_app, _ = _build_app_with_admin(tmp_palace_dir)
+    return flask_app
+
+
+def _patch_auth(user, *, can_view=True, can_manage=None):
+    """Return a ``with``-stack patching auth_routes decorators consistently.
+
+    ``can_manage`` defaults to True for admins, False otherwise.
+    """
+    if can_manage is None:
+        can_manage = (user.role == "admin")
+    return [
+        patch("routes.auth_routes.current_user", user),
+        patch(
+            "routes.auth_routes.has_permission",
+            side_effect=lambda res, act: (act == "view" and can_view) or (act == "manage" and can_manage),
+        ),
+    ]
+
+
+@pytest.fixture()
+def admin_user():
+    u = SimpleNamespace()
+    u.is_authenticated = True
+    u.role = "admin"
+    u.username = "testadmin"
+    u.id = 1
+    return u
+
+
+@pytest.fixture()
+def viewer_user():
+    u = SimpleNamespace()
+    u.is_authenticated = True
+    u.role = "viewer"
+    u.username = "testviewer"
+    u.id = 2
+    return u
+
+
+def _call_view(app, view_function, user, **path_kwargs):
+    """Invoke a blueprint view as ``user`` over the test client."""
+    with patch("routes.auth_routes.current_user", user), \
+         patch("routes.auth_routes.has_permission",
+               side_effect=lambda role, res, act: act in {"view"} or role == "admin"), \
+         app.test_request_context():
+        with app.test_client() as client:
+            # Manually invoke the view function so we bypass route rules
+            # (sanity for `int:` prefix in URL where the blueprint uses
+            # straight routes — they're already registered, but this keeps
+            # the helper explicit).
+            response = view_function(**path_kwargs)
+            return response
+
+
+# ---------------------------------------------------------------------------
+# 1. Status endpoint
+# ---------------------------------------------------------------------------
+
+
+class TestStatusEndpoint:
+    """Verify the ``/api/mempalace/status`` shape and fallbacks."""
+
+    def test_status_installed_returns_version(self, app, admin_user, tmp_palace_dir):
+        import routes.mempalace as mp
+
+        with patch("routes.auth_routes.current_user", admin_user), \
+             patch("routes.auth_routes.has_permission", return_value=True), \
+             patch.object(mp, "_mempalace_available", return_value=(True, "3.4.0")), \
+             patch.object(mp, "_get_palace_stats",
+                          return_value={"total_drawers": 0, "wings": [], "rooms": []}), \
+             app.test_request_context():
+                response = mp.status()
+                data = json.loads(response.get_data(as_text=True))
+
+        assert data["installed"] is True
+        assert data["version"] == "3.4.0"
+        assert data["stats"]["total_drawers"] == 0
+        # Primeiro acesso seeda as fontes padrão (memory/, agent-memory,
+        # workspace/development) — count reflete os diretórios existentes.
+        assert data["sources_count"] == len(mp._load_sources())
+        assert data["mining"] is None
+
+    def test_status_not_installed_returns_error_shape(self, app, admin_user):
+        import routes.mempalace as mp
+
+        with patch("routes.auth_routes.current_user", admin_user), \
+             patch("routes.auth_routes.has_permission", return_value=True), \
+             patch.object(mp, "_mempalace_available", return_value=(False, None)), \
+             app.test_request_context():
+                response = mp.status()
+                data = json.loads(response.get_data(as_text=True))
+
+        assert data["installed"] is False
+        assert data["version"] is None
+        assert data["stats"] is None  # no stats when not installed
+        assert "palace_path" in data
+
+
+# ---------------------------------------------------------------------------
+# 2. Sources endpoint — add/delete/path allowlist
+# ---------------------------------------------------------------------------
+
+
+class TestSourcesEndpoint:
+    """Verify ``/api/mempalace/sources`` CRUD + path allowlist."""
+
+    def test_add_source_happy_path(self, app, admin_user, tmp_palace_dir):
+        import routes.mempalace as mp
+
+        target = tmp_palace_dir / "src"
+        target.mkdir()
+
+        with patch("routes.auth_routes.current_user", admin_user), \
+             patch("routes.auth_routes.has_permission", return_value=True), \
+             app.test_request_context(json={"path": str(target), "label": "src", "wing": "evo-nexus"}):
+                response = mp.add_source()
+                data = json.loads(response.get_data(as_text=True))
+
+        assert response.status_code == 201
+        assert data["status"] == "added"
+        assert len(data["sources"]) == 1
+        assert data["sources"][0]["label"] == "src"
+        assert data["sources"][0]["wing"] == "evo-nexus"
+
+    def test_add_source_rejects_missing_path(self, app, admin_user):
+        import routes.mempalace as mp
+
+        with patch("routes.auth_routes.current_user", admin_user), \
+             patch("routes.auth_routes.has_permission", return_value=True), \
+             app.test_request_context(json={"path": ""}):
+                response = mp.add_source()
+                assert response.status_code == 400
+
+    def test_add_source_rejects_nonexistent_dir(self, app, admin_user, tmp_path):
+        import routes.mempalace as mp
+
+        bogus = tmp_path / "does-not-exist"
+        with patch("routes.auth_routes.current_user", admin_user), \
+             patch("routes.auth_routes.has_permission", return_value=True), \
+             app.test_request_context(json={"path": str(bogus)}):
+                response = mp.add_source()
+                assert response.status_code == 400
+
+    def test_add_source_rejects_duplicate(self, app, admin_user, tmp_palace_dir):
+        import routes.mempalace as mp
+
+        target = tmp_palace_dir / "src"
+        target.mkdir()
+
+        # First add succeeds
+        with patch("routes.auth_routes.current_user", admin_user), \
+             patch("routes.auth_routes.has_permission", return_value=True), \
+             app.test_request_context(json={"path": str(target)}):
+                first = mp.add_source()
+
+        # Second add with same resolved path → 409
+        with patch("routes.auth_routes.current_user", admin_user), \
+             patch("routes.auth_routes.has_permission", return_value=True), \
+             app.test_request_context(json={"path": str(target)}):
+                second = mp.add_source()
+                assert second.status_code == 409
+
+        assert first.status_code == 201
+
+    def test_add_source_blocks_path_outside_home_and_workspace(
+        self, app, admin_user, tmp_path, monkeypatch
+    ):
+        """A source must live under $HOME or $WORKSPACE.
+
+        This guards against accidentally exporting ``/etc`` or ``/var/log``
+        as an indexable directory.
+        """
+        import routes.mempalace as mp
+
+        # Pretend $HOME and $WORKSPACE both live under a neutral subtree.
+        # Anything outside those two is rejected — even if it is a real
+        # readable directory.
+        safe_zone = tmp_path / "safe"
+        safe_zone.mkdir()
+        outside = tmp_path / "outside"
+        outside.mkdir()
+        target = outside / "leaked"
+        target.mkdir()
+
+        monkeypatch.setattr(Path, "home", lambda: safe_zone)
+        # WORKSPACE is read off the blueprint module — point at safe_zone
+        # so any .resolve() walk that requires the workspace prefix sees it.
+
+        with patch("routes.auth_routes.current_user", admin_user), \
+             patch("routes.auth_routes.has_permission", return_value=True), \
+             app.test_request_context(json={"path": str(target)}):
+                response = mp.add_source()
+                assert response.status_code == 400
+                body = json.loads(response.get_data(as_text=True))
+                assert "outside" in body["error"].lower() or "within" in body["error"].lower()
+
+    def test_delete_source_by_index(self, app, admin_user, tmp_palace_dir):
+        import routes.mempalace as mp
+
+        target = tmp_palace_dir / "src"
+        target.mkdir()
+        mp._save_sources([{"path": str(target), "label": "src", "wing": None}])
+
+        with patch("routes.auth_routes.current_user", admin_user), \
+             patch("routes.auth_routes.has_permission", return_value=True), \
+             app.test_request_context():
+                response = mp.delete_source(0)
+                data = json.loads(response.get_data(as_text=True))
+
+        assert data["status"] == "removed"
+        assert data["sources"] == []
+
+    def test_delete_source_out_of_range_404(self, app, admin_user, tmp_palace_dir):
+        import routes.mempalace as mp
+
+        with patch("routes.auth_routes.current_user", admin_user), \
+             patch("routes.auth_routes.has_permission", return_value=True), \
+             app.test_request_context():
+                response = mp.delete_source(99)
+                assert response.status_code == 404
+
+
+# ---------------------------------------------------------------------------
+# 3. Search endpoint
+# ---------------------------------------------------------------------------
+
+
+class TestSearchEndpoint:
+    """Verify the search route contracts: required query, clamping of ``n``."""
+
+    def test_search_requires_query(self, app, admin_user):
+        import routes.mempalace as mp
+
+        with patch("routes.auth_routes.current_user", admin_user), \
+             patch("routes.auth_routes.has_permission", return_value=True), \
+             patch.object(mp, "_mempalace_available", return_value=(True, "3.4.0")), \
+             app.test_request_context():
+                response = mp.search()
+                assert response.status_code == 400
+                body = json.loads(response.get_data(as_text=True))
+                assert "q" in body["error"]
+
+    def test_search_returns_not_installed_error(self, app, admin_user):
+        import routes.mempalace as mp
+
+        with patch("routes.auth_routes.current_user", admin_user), \
+             patch("routes.auth_routes.has_permission", return_value=True), \
+             patch.object(mp, "_mempalace_available", return_value=(False, None)), \
+             app.test_request_context(query_string={"q": "anything"}):
+                response = mp.search()
+                assert response.status_code == 400
+
+    def test_search_calls_mempalace_and_returns_payload(self, app, admin_user):
+        import routes.mempalace as mp
+
+        fake_payload = {
+            "query": "jwt auth",
+            "filters": {"wing": "evo-nexus", "room": None},
+            "total_before_filter": 1,
+            "results": [
+                {
+                    "text": "JWT auth uses HS256 by default...",
+                    "wing": "evo-nexus",
+                    "room": "technical",
+                    "source_file": "auth.md",
+                    "similarity": 0.81,
+                    "distance": 0.19,
+                }
+            ],
+        }
+
+        with patch("routes.auth_routes.current_user", admin_user), \
+             patch("routes.auth_routes.has_permission", return_value=True), \
+             patch.object(mp, "_mempalace_available", return_value=(True, "3.4.0")), \
+             patch(
+                "mempalace.searcher.search_memories",
+                return_value=fake_payload,
+             ) as mock_search, \
+             app.test_request_context(query_string={
+                 "q": "jwt auth", "wing": "evo-nexus", "n": "10",
+             }):
+                response = mp.search()
+                data = json.loads(response.get_data(as_text=True))
+
+        assert data["query"] == "jwt auth"
+        assert len(data["results"]) == 1
+        assert data["results"][0]["source_file"] == "auth.md"
+        # Verify the wrapper passes the right kwargs to mempalace
+        kwargs = mock_search.call_args.kwargs
+        assert kwargs["query"] == "jwt auth"
+        assert kwargs["wing"] == "evo-nexus"
+        assert kwargs["n_results"] == 10
+
+    def test_search_clamps_n_to_50(self, app, admin_user):
+        """Requests for n>50 must be clamped server-side, not forwarded."""
+        import routes.mempalace as mp
+
+        with patch("routes.auth_routes.current_user", admin_user), \
+             patch("routes.auth_routes.has_permission", return_value=True), \
+             patch.object(mp, "_mempalace_available", return_value=(True, "3.4.0")), \
+             patch(
+                "mempalace.searcher.search_memories",
+                return_value={"query": "x", "results": []},
+             ) as mock_search, \
+             app.test_request_context(query_string={"q": "anything", "n": "500"}):
+                response = mp.search()
+                assert response.status_code == 200
+
+        kwargs = mock_search.call_args.kwargs
+        # Blueprint clamps to min(client_n, 50)
+        assert kwargs["n_results"] == 50
+
+
+# ---------------------------------------------------------------------------
+# 4. Mining state file — PID janitor behavior
+# ---------------------------------------------------------------------------
+
+
+class TestMiningStatusLifecycle:
+    """Verify the PID-aliveness check in ``_get_mining_status``."""
+
+    def test_get_mining_status_unlinks_when_pid_dead(self, app, admin_user, tmp_palace_dir):
+        import routes.mempalace as mp
+
+        # Seed a status file with a dead PID. PID 99999999 is essentially
+        # guaranteed not to exist on a fresh test box.
+        mp.PALACE_DIR = tmp_palace_dir
+        mp.MINING_STATUS_FILE = tmp_palace_dir / "mining_status.json"
+        mp.MINING_STATUS_FILE.write_text(json.dumps({
+            "pid": 99999999,
+            "phase": "scanning",
+            "started_at": "2026-06-16T00:00:00Z",
+        }))
+
+        result = mp._get_mining_status()
+
+        assert result is None  # treated as no mining
+        assert not mp.MINING_STATUS_FILE.exists()  # stale file cleaned up
+
+    def test_get_mining_status_returns_when_pid_alive(self, app, admin_user, tmp_palace_dir):
+        import routes.mempalace as mp
+
+        mp.PALACE_DIR = tmp_palace_dir
+        mp.MINING_STATUS_FILE = tmp_palace_dir / "mining_status.json"
+        seed = {"pid": None, "phase": "scanning", "started_at": "2026-06-16T00:00:00Z"}
+        mp.MINING_STATUS_FILE.write_text(json.dumps(seed))
+
+        result = mp._get_mining_status()
+        assert result == seed  # no PID → still alive (active or just-initialized)
+
+
+# ---------------------------------------------------------------------------
+# 5. Authn/authz gate — confirm the decorator is wired
+# ---------------------------------------------------------------------------
+
+
+class TestPermissionWiring:
+    """Quick check that view-level permission gates are not silently dropped.
+
+    We invoke the view functions directly with an *unauthenticated* user
+    and patch ``current_user.is_authenticated = False`` to make sure the
+    ``require_permission`` decorator still aborts on 401 — not just 403.
+    """
+
+    def test_unauthenticated_user_is_rejected(self, app, tmp_palace_dir):
+        import routes.mempalace as mp
+        from flask import abort
+
+        anon = SimpleNamespace()
+        anon.is_authenticated = False
+
+        with patch("routes.auth_routes.current_user", anon), \
+             patch(
+                "routes.auth_routes.has_permission",
+                side_effect=lambda r, res, act: False,
+             ), \
+             app.test_request_context():
+                with pytest.raises(Exception):
+                    # The decorator abort()s with 401 — Flask converts that
+                    # into an HTTPException in test_request_context.
+                    mp.status()
+
+        # If we reached here without a 401, the gate is missing.
+        # (abort(401) raises HTTPException which pytest propagated.)
+
+
+# ---------------------------------------------------------------------------
+# 6. Install endpoint
+# ---------------------------------------------------------------------------
+
+
+class TestInstallEndpoint:
+    """Verify ``/api/mempalace/install`` behavior.
+
+    Covers: already_installed, install success (uv + pip fallback),
+    install failure, and timeout.
+    """
+
+    def test_install_already_installed_returns_200(self, app, admin_user):
+        import routes.mempalace as mp
+
+        with patch("routes.auth_routes.current_user", admin_user), \
+             patch("routes.auth_routes.has_permission", return_value=True), \
+             patch.object(mp, "_mempalace_available", return_value=(True, "3.4.0")), \
+             app.test_request_context():
+                response = mp.install()
+                data = json.loads(response.get_data(as_text=True))
+
+        assert response.status_code == 200
+        assert data["status"] == "already_installed"
+
+    def test_install_success_via_uv(self, app, admin_user, tmp_palace_dir):
+        """When mempalace is not installed, install via uv and init."""
+        import routes.mempalace as mp
+
+        mp.PALACE_DIR = tmp_palace_dir
+
+        mock_result = MagicMock()
+        mock_result.returncode = 0
+
+        with patch("routes.auth_routes.current_user", admin_user), \
+             patch("routes.auth_routes.has_permission", return_value=True), \
+             patch.object(mp, "_mempalace_available", return_value=(False, None)), \
+             patch("routes.mempalace.shutil.which", return_value="/usr/bin/uv"), \
+             patch("routes.mempalace.subprocess.run", return_value=mock_result) as mock_run, \
+             app.test_request_context():
+                response = mp.install()
+                data = json.loads(response.get_data(as_text=True))
+
+        assert response.status_code == 200
+        assert data["status"] == "installed"
+        # First call = install, second call = init
+        assert mock_run.call_count == 2
+        install_cmd = mock_run.call_args_list[0][0][0]
+        assert "uv" in install_cmd
+
+    def test_install_success_via_pip_fallback(self, app, admin_user, tmp_palace_dir):
+        """When uv is not available, fall back to pip."""
+        import routes.mempalace as mp
+
+        mp.PALACE_DIR = tmp_palace_dir
+
+        mock_result = MagicMock()
+        mock_result.returncode = 0
+
+        with patch("routes.auth_routes.current_user", admin_user), \
+             patch("routes.auth_routes.has_permission", return_value=True), \
+             patch.object(mp, "_mempalace_available", return_value=(False, None)), \
+             patch("routes.mempalace.shutil.which", return_value=None), \
+             patch("routes.mempalace.subprocess.run", return_value=mock_result) as mock_run, \
+             app.test_request_context():
+                response = mp.install()
+                data = json.loads(response.get_data(as_text=True))
+
+        assert response.status_code == 200
+        assert data["status"] == "installed"
+        # Verify pip fallback was used
+        install_cmd = mock_run.call_args_list[0][0][0]
+        assert "-m" in install_cmd and "pip" in install_cmd
+
+    def test_install_failure_returns_500_with_stderr(self, app, admin_user, tmp_palace_dir):
+        """Nonzero returncode from install command → 500 + stderr detail."""
+        import routes.mempalace as mp
+
+        mp.PALACE_DIR = tmp_palace_dir
+
+        mock_result = MagicMock()
+        mock_result.returncode = 1
+        mock_result.stderr = "Could not find a version satisfying mempalace"
+
+        with patch("routes.auth_routes.current_user", admin_user), \
+             patch("routes.auth_routes.has_permission", return_value=True), \
+             patch.object(mp, "_mempalace_available", return_value=(False, None)), \
+             patch("routes.mempalace.shutil.which", return_value=None), \
+             patch("routes.mempalace.subprocess.run", return_value=mock_result), \
+             app.test_request_context():
+                response = mp.install()
+                data = json.loads(response.get_data(as_text=True))
+
+        assert response.status_code == 500
+        assert data["status"] == "error"
+        assert "mempalace" in data["detail"]
+
+    def test_install_timeout_returns_500(self, app, admin_user, tmp_palace_dir):
+        """subprocess.TimeoutExpired → 500 + timeout message."""
+        import routes.mempalace as mp
+
+        mp.PALACE_DIR = tmp_palace_dir
+
+        with patch("routes.auth_routes.current_user", admin_user), \
+             patch("routes.auth_routes.has_permission", return_value=True), \
+             patch.object(mp, "_mempalace_available", return_value=(False, None)), \
+             patch("routes.mempalace.shutil.which", return_value=None), \
+             patch("routes.mempalace.subprocess.run",
+                   side_effect=subprocess.TimeoutExpired(cmd="pip", timeout=120)), \
+             app.test_request_context():
+                response = mp.install()
+                data = json.loads(response.get_data(as_text=True))
+
+        assert response.status_code == 500
+        assert data["status"] == "error"
+        assert "timed out" in data["detail"]
+
+
+# ---------------------------------------------------------------------------
+# 7. Mine endpoint
+# ---------------------------------------------------------------------------
+
+
+class TestMineEndpoint:
+    """Verify ``/api/mempalace/mine`` behavior.
+
+    Covers: not installed, no sources, invalid source index, concurrent
+    mining (409), and success (worker spawn).
+    """
+
+    def test_mine_not_installed_returns_400(self, app, admin_user):
+        import routes.mempalace as mp
+
+        with patch("routes.auth_routes.current_user", admin_user), \
+             patch("routes.auth_routes.has_permission", return_value=True), \
+             patch.object(mp, "_mempalace_available", return_value=(False, None)), \
+             app.test_request_context(json={}):
+                response = mp.mine()
+                data = json.loads(response.get_data(as_text=True))
+
+        assert response.status_code == 400
+        assert "not installed" in data["error"]
+
+    def test_mine_no_sources_returns_400(self, app, admin_user):
+        import routes.mempalace as mp
+
+        with patch("routes.auth_routes.current_user", admin_user), \
+             patch("routes.auth_routes.has_permission", return_value=True), \
+             patch.object(mp, "_mempalace_available", return_value=(True, "3.4.0")), \
+             app.test_request_context(json={}):
+                response = mp.mine()
+                data = json.loads(response.get_data(as_text=True))
+
+        assert response.status_code == 400
+        assert "No sources" in data["error"]
+
+    def test_mine_invalid_source_index_returns_404(self, app, admin_user, tmp_palace_dir):
+        """source_index out of range → 404."""
+        import routes.mempalace as mp
+
+        mp.PALACE_DIR = tmp_palace_dir
+        target = tmp_palace_dir / "src"
+        target.mkdir()
+        mp._save_sources([{"path": str(target), "label": "src", "wing": None,
+                           "added_at": "2026-01-01T00:00:00Z", "last_indexed": None}])
+
+        with patch("routes.auth_routes.current_user", admin_user), \
+             patch("routes.auth_routes.has_permission", return_value=True), \
+             patch.object(mp, "_mempalace_available", return_value=(True, "3.4.0")), \
+             app.test_request_context(json={"source_index": 99}):
+                response = mp.mine()
+                data = json.loads(response.get_data(as_text=True))
+
+        assert response.status_code == 404
+        assert "Invalid source index" in data["error"]
+
+    def test_mine_already_in_progress_returns_409(
+        self, app, admin_user, tmp_palace_dir
+    ):
+        """If mining is already in progress → 409."""
+        import routes.mempalace as mp
+
+        mp.PALACE_DIR = tmp_palace_dir
+        mp.MINING_STATUS_FILE = tmp_palace_dir / "mining_status.json"
+        target = tmp_palace_dir / "src"
+        target.mkdir()
+        mp._save_sources([{"path": str(target), "label": "src", "wing": None,
+                           "added_at": "2026-01-01T00:00:00Z", "last_indexed": None}])
+
+        # Seed a status file with a "dead" PID — but _get_mining_status
+        # returns None for dead PIDs. We need to make it think mining is
+        # alive, so we mock _get_mining_status directly.
+        with patch("routes.auth_routes.current_user", admin_user), \
+             patch("routes.auth_routes.has_permission", return_value=True), \
+             patch.object(mp, "_mempalace_available", return_value=(True, "3.4.0")), \
+             patch.object(mp, "_get_mining_status", return_value={"pid": 12345}), \
+             app.test_request_context(json={}):
+                response = mp.mine()
+                data = json.loads(response.get_data(as_text=True))
+
+        assert response.status_code == 409
+        assert "already in progress" in data["error"]
+
+    def test_mine_success_spawns_worker(
+        self, app, admin_user, tmp_palace_dir
+    ):
+        """Successful mine call spawns subprocess, writes status, updates sources."""
+        import routes.mempalace as mp
+
+        mp.PALACE_DIR = tmp_palace_dir
+        mp.MINING_STATUS_FILE = tmp_palace_dir / "mining_status.json"
+        target = tmp_palace_dir / "src"
+        target.mkdir()
+        mp._save_sources([{"path": str(target), "label": "src", "wing": "evo-nexus",
+                           "added_at": "2026-01-01T00:00:00Z", "last_indexed": None}])
+
+        mock_process = MagicMock()
+        mock_process.pid = 99999
+        mock_process.stdin = MagicMock()
+
+        with patch("routes.auth_routes.current_user", admin_user), \
+             patch("routes.auth_routes.has_permission", return_value=True), \
+             patch.object(mp, "_mempalace_available", return_value=(True, "3.4.0")), \
+             patch.object(mp, "_get_mining_status", return_value=None), \
+             patch("routes.mempalace.subprocess.Popen", return_value=mock_process) as mock_popen, \
+             app.test_request_context(json={}):
+                response = mp.mine()
+                data = json.loads(response.get_data(as_text=True))
+
+        assert response.status_code == 200
+        assert data["status"] == "started"
+        assert data["pid"] == 99999
+        # Popen was called with the worker script
+        mock_popen.assert_called_once()
+        # Status file was seeded
+        assert mp.MINING_STATUS_FILE.exists()
+        status_data = json.loads(mp.MINING_STATUS_FILE.read_text())
+        assert status_data["pid"] == 99999
+        assert status_data["phase"] == "scanning"
+        # last_indexed was updated on the source
+        sources = mp._load_sources()
+        assert sources[0]["last_indexed"] is not None
+
+    def test_mine_specific_source_index(
+        self, app, admin_user, tmp_palace_dir
+    ):
+        """Mine with source_index=0 targets only that source."""
+        import routes.mempalace as mp
+
+        mp.PALACE_DIR = tmp_palace_dir
+        mp.MINING_STATUS_FILE = tmp_palace_dir / "mining_status.json"
+        src1 = tmp_palace_dir / "src1"
+        src2 = tmp_palace_dir / "src2"
+        src1.mkdir()
+        src2.mkdir()
+        mp._save_sources([
+            {"path": str(src1), "label": "src1", "wing": None,
+             "added_at": "2026-01-01T00:00:00Z", "last_indexed": None},
+            {"path": str(src2), "label": "src2", "wing": None,
+             "added_at": "2026-01-01T00:00:00Z", "last_indexed": None},
+        ])
+
+        mock_process = MagicMock()
+        mock_process.pid = 88888
+        mock_process.stdin = MagicMock()
+
+        with patch("routes.auth_routes.current_user", admin_user), \
+             patch("routes.auth_routes.has_permission", return_value=True), \
+             patch.object(mp, "_mempalace_available", return_value=(True, "3.4.0")), \
+             patch.object(mp, "_get_mining_status", return_value=None), \
+             patch("routes.mempalace.subprocess.Popen", return_value=mock_process), \
+             app.test_request_context(json={"source_index": 0}):
+                response = mp.mine()
+                data = json.loads(response.get_data(as_text=True))
+
+        assert response.status_code == 200
+        # Only src1 should have been updated
+        sources = mp._load_sources()
+        assert sources[0]["last_indexed"] is not None
+        assert sources[1]["last_indexed"] is None
+
+
+# ---------------------------------------------------------------------------
+# 8. RBAC — viewer blocked on manage endpoints
+# ---------------------------------------------------------------------------
+
+
+class TestRBACEnforcement:
+    """Verify that a viewer-role user is blocked from manage endpoints.
+
+    Viewers should get 403 on POST /sources, DELETE /sources/<idx>,
+    POST /install, POST /mine — but still be allowed on GET /status,
+    GET /sources, GET /search.
+    """
+
+    def test_viewer_can_view_status(self, app, viewer_user):
+        import routes.mempalace as mp
+
+        with patch("routes.auth_routes.current_user", viewer_user), \
+             patch("routes.auth_routes.has_permission", return_value=True), \
+             patch.object(mp, "_mempalace_available", return_value=(False, None)), \
+             app.test_request_context():
+                response = mp.status()
+                # 200 — viewer has view permission
+                assert response.status_code == 200
+
+    def test_viewer_can_list_sources(self, app, viewer_user):
+        import routes.mempalace as mp
+
+        with patch("routes.auth_routes.current_user", viewer_user), \
+             patch("routes.auth_routes.has_permission", return_value=True), \
+             app.test_request_context():
+                response = mp.list_sources()
+                assert response.status_code == 200
+
+    def test_viewer_blocked_from_add_source(self, app, viewer_user, tmp_palace_dir):
+        """Viewer hitting POST /sources → 403."""
+        import routes.mempalace as mp
+
+        target = tmp_palace_dir / "src"
+        target.mkdir()
+
+        with patch("routes.auth_routes.current_user", viewer_user), \
+             patch("routes.auth_routes.has_permission", return_value=False), \
+             app.test_request_context(json={"path": str(target)}):
+                with pytest.raises(Exception):
+                    mp.add_source()
+
+    def test_viewer_blocked_from_delete_source(self, app, viewer_user, tmp_palace_dir):
+        """Viewer hitting DELETE /sources/<idx> → 403."""
+        import routes.mempalace as mp
+
+        target = tmp_palace_dir / "src"
+        target.mkdir()
+        mp._save_sources([{"path": str(target), "label": "src", "wing": None,
+                           "added_at": "2026-01-01T00:00:00Z", "last_indexed": None}])
+
+        with patch("routes.auth_routes.current_user", viewer_user), \
+             patch("routes.auth_routes.has_permission", return_value=False), \
+             app.test_request_context():
+                with pytest.raises(Exception):
+                    mp.delete_source(0)
+
+    def test_viewer_blocked_from_install(self, app, viewer_user):
+        """Viewer hitting POST /install → 403."""
+        import routes.mempalace as mp
+
+        with patch("routes.auth_routes.current_user", viewer_user), \
+             patch("routes.auth_routes.has_permission", return_value=False), \
+             app.test_request_context():
+                with pytest.raises(Exception):
+                    mp.install()
+
+    def test_viewer_blocked_from_mine(self, app, viewer_user):
+        """Viewer hitting POST /mine → 403."""
+        import routes.mempalace as mp
+
+        with patch("routes.auth_routes.current_user", viewer_user), \
+             patch("routes.auth_routes.has_permission", return_value=False), \
+             app.test_request_context(json={}):
+                with pytest.raises(Exception):
+                    mp.mine()
+
+
+# ---------------------------------------------------------------------------
+# 9. Helper function edge cases
+# ---------------------------------------------------------------------------
+
+
+class TestHelperEdgeCases:
+    """Verify edge cases in helper functions."""
+
+    def test_load_sources_missing_file_seeds_defaults(self, app, admin_user, tmp_palace_dir):
+        """When sources.json doesn't exist, _load_sources seeds the default
+        workspace sources (memory/, agent-memory, workspace/development) for
+        the directories that exist, and persists them."""
+        import routes.mempalace as mp
+
+        mp.SOURCES_FILE = tmp_palace_dir / "nonexistent_sources.json"
+        result = mp._load_sources()
+
+        expected = [rel for rel, _, _ in mp.DEFAULT_SOURCES if (mp.WORKSPACE / rel).is_dir()]
+        assert len(result) == len(expected)
+        for src in result:
+            assert src["wing"] in {w for _, _, w in mp.DEFAULT_SOURCES}
+            assert src["last_indexed"] is None
+        if expected:
+            assert mp.SOURCES_FILE.exists()
+
+    def test_load_sources_corrupt_json_returns_empty_list(self, app, admin_user, tmp_palace_dir):
+        """When sources.json is corrupt, _load_sources returns []."""
+        import routes.mempalace as mp
+
+        mp.SOURCES_FILE = tmp_palace_dir / "sources.json"
+        mp.SOURCES_FILE.write_text("not valid json {{{", encoding="utf-8")
+
+        result = mp._load_sources()
+        assert result == []
+
+    def test_mempalace_available_returns_true_when_imported(self, app, admin_user):
+        """_mempalace_available returns (True, version) when import succeeds."""
+        import routes.mempalace as mp
+
+        # mempalace is already importable in test env (mocked or real)
+        # We just verify the function doesn't crash
+        installed, version = mp._mempalace_available()
+        assert isinstance(installed, bool)
+
+    def test_get_palace_stats_returns_none_on_exception(self, app, admin_user, tmp_palace_dir):
+        """_get_palace_stats returns None when chromadb raises."""
+        import routes.mempalace as mp
+
+        mp.PALACE_DIR = tmp_palace_dir
+
+        with patch("routes.mempalace.chromadb.PersistentClient",
+                   side_effect=Exception("chroma not available")):
+            result = mp._get_palace_stats()
+
+        assert result is None
+
+    def test_get_palace_stats_missing_collection(self, app, admin_user, tmp_palace_dir):
+        """_get_palace_stats returns zeroed stats when collection doesn't exist."""
+        import routes.mempalace as mp
+
+        mp.PALACE_DIR = tmp_palace_dir
+
+        mock_client = MagicMock()
+        mock_client.get_collection.side_effect = Exception("collection not found")
+
+        with patch("routes.mempalace.chromadb.PersistentClient", return_value=mock_client):
+            result = mp._get_palace_stats()
+
+        assert result == {"total_drawers": 0, "wings": [], "rooms": []}
+
+    def test_search_exception_returns_500(self, app, admin_user):
+        """When search_memories raises, the endpoint returns 500."""
+        import routes.mempalace as mp
+
+        with patch("routes.auth_routes.current_user", admin_user), \
+             patch("routes.auth_routes.has_permission", return_value=True), \
+             patch.object(mp, "_mempalace_available", return_value=(True, "3.4.0")), \
+             patch("mempalace.searcher.search_memories",
+                   side_effect=RuntimeError("embedding model failed")), \
+             app.test_request_context(query_string={"q": "test"}):
+                response = mp.search()
+                data = json.loads(response.get_data(as_text=True))
+
+        assert response.status_code == 500
+        assert "embedding model failed" in data["error"]
+
+    def test_search_wing_room_filter_passthrough(self, app, admin_user):
+        """Verify wing and room filters are passed to search_memories."""
+        import routes.mempalace as mp
+
+        with patch("routes.auth_routes.current_user", admin_user), \
+             patch("routes.auth_routes.has_permission", return_value=True), \
+             patch.object(mp, "_mempalace_available", return_value=(True, "3.4.0")), \
+             patch("mempalace.searcher.search_memories",
+                   return_value={"query": "x", "results": []}) as mock_search, \
+             app.test_request_context(query_string={
+                 "q": "test", "wing": "evo-nexus", "room": "technical",
+             }):
+                mp.search()
+
+        kwargs = mock_search.call_args.kwargs
+        assert kwargs["wing"] == "evo-nexus"
+        assert kwargs["room"] == "technical"
+
+    def test_set_mining_status_writes_file(self, app, admin_user, tmp_palace_dir):
+        """_set_mining_status writes JSON to the status file."""
+        import routes.mempalace as mp
+
+        mp.PALACE_DIR = tmp_palace_dir
+        mp.MINING_STATUS_FILE = tmp_palace_dir / "mining_status.json"
+
+        status = {"pid": 1234, "phase": "scanning", "files_done": 0}
+        mp._set_mining_status(status)
+
+        assert mp.MINING_STATUS_FILE.exists()
+        written = json.loads(mp.MINING_STATUS_FILE.read_text())
+        assert written["pid"] == 1234
+        assert written["phase"] == "scanning"
+
+    def test_path_validation_symlink_within_home(self, app, admin_user, tmp_palace_dir, monkeypatch):
+        """A symlink that resolves within $HOME should be accepted."""
+        import routes.mempalace as mp
+
+        # Create a real dir inside the fake home
+        safe_zone = tmp_palace_dir / "safe"
+        safe_zone.mkdir()
+        real_dir = safe_zone / "actual"
+        real_dir.mkdir()
+
+        # Create a symlink pointing to the real dir
+        link_dir = tmp_palace_dir / "link"
+        try:
+            link_dir.symlink_to(real_dir)
+        except OSError:
+            pytest.skip("symlinks not supported on this platform")
+
+        monkeypatch.setattr(Path, "home", lambda: safe_zone)
+
+        with patch("routes.auth_routes.current_user", admin_user), \
+             patch("routes.auth_routes.has_permission", return_value=True), \
+             app.test_request_context(json={"path": str(link_dir)}):
+                response = mp.add_source()
+                # The resolved path is inside safe_zone ($HOME) → accepted
+                assert response.status_code == 201
+
+    def test_path_validation_rejects_path_traversal(
+        self, app, admin_user, tmp_palace_dir, monkeypatch
+    ):
+        """A path using .. to escape $HOME must be rejected."""
+        import routes.mempalace as mp
+
+        safe_zone = tmp_palace_dir / "safe"
+        safe_zone.mkdir()
+        outside = tmp_palace_dir / "outside"
+        outside.mkdir()
+
+        monkeypatch.setattr(Path, "home", lambda: safe_zone)
+
+        # Use a path that resolves outside home via ..
+        traversal_path = safe_zone / ".." / "outside"
+
+        with patch("routes.auth_routes.current_user", admin_user), \
+             patch("routes.auth_routes.has_permission", return_value=True), \
+             app.test_request_context(json={"path": str(traversal_path)}):
+                response = mp.add_source()
+                assert response.status_code == 400
+                body = json.loads(response.get_data(as_text=True))
+                assert "within" in body["error"].lower() or "outside" in body["error"].lower()
diff --git a/tests/backend/test_overview_needs_attention.py b/tests/backend/test_overview_needs_attention.py
new file mode 100644
index 000000000..1824ced65
--- /dev/null
+++ b/tests/backend/test_overview_needs_attention.py
@@ -0,0 +1,213 @@
+"""
+tests/backend/test_overview_needs_attention.py
+
+Panorama 2026-07-17, item 19 — /api/overview gains a "needs_attention" block
+aggregating 3 signals that previously required visiting 3 separate pages:
+heartbeats whose LATEST run failed, tickets with a lock past its own
+lock_timeout_seconds still visible (the janitor should have cleared it — if
+it's still here, that's a bug worth surfacing), and approvals pending > 24h.
+
+Run:
+    cd /path/to/workspace && pytest tests/backend/test_overview_needs_attention.py -v
+"""
+
+from __future__ import annotations
+
+import importlib
+import sys
+import uuid
+from datetime import datetime, timedelta, timezone
+from pathlib import Path
+
+import pytest
+
+REPO_ROOT = Path(__file__).resolve().parents[2]
+BACKEND_DIR = REPO_ROOT / "dashboard" / "backend"
+sys.path.insert(0, str(BACKEND_DIR))
+
+NOW = datetime.now(timezone.utc)
+
+
+def _iso(dt: datetime) -> str:
+    return dt.strftime("%Y-%m-%dT%H:%M:%S.%fZ")
+
+
+@pytest.fixture
+def app():
+    import flask
+    from flask_login import LoginManager
+    import models as _models
+    importlib.reload(_models)
+
+    _app = flask.Flask(__name__)
+    _app.config["TESTING"] = True
+    _app.config["SECRET_KEY"] = "test-overview-attention"
+    _app.config["SQLALCHEMY_DATABASE_URI"] = "sqlite:///:memory:"
+    _app.config["SQLALCHEMY_TRACK_MODIFICATIONS"] = False
+    _models.db.init_app(_app)
+
+    _login_manager = LoginManager()
+    _login_manager.init_app(_app)
+
+    @_login_manager.user_loader
+    def _load_user(user_id):
+        return _models.User.query.get(int(user_id))
+
+    with _app.app_context():
+        _models.db.create_all()
+        admin = _models.User(username="admin", role="admin")
+        admin.set_password("password")
+        _models.db.session.add(admin)
+        _models.db.session.commit()
+
+    import routes.overview as _overview_routes
+    importlib.reload(_overview_routes)
+    _app.register_blueprint(_overview_routes.bp)
+    return _app
+
+
+@pytest.fixture
+def client(app):
+    with app.test_client() as c:
+        with c.session_transaction() as sess:
+            sess["_user_id"] = "1"
+            sess["_fresh"] = True
+        yield c
+
+
+def test_empty_state_has_zero_total(client):
+    resp = client.get("/api/overview")
+    assert resp.status_code == 200
+    attention = resp.get_json()["needs_attention"]
+    assert attention == {
+        "heartbeat_failures": [], "stale_locked_tickets": [], "aged_approvals": [], "total": 0,
+    }
+
+
+def test_heartbeat_with_latest_run_failed_is_flagged(client):
+    import models as _models
+    with client.application.app_context():
+        hb = _models.Heartbeat(
+            id="atlas-4h", agent="atlas-project", interval_seconds=14400,
+            decision_prompt="check things", created_at=_iso(NOW), updated_at=_iso(NOW),
+        )
+        _models.db.session.add(hb)
+        _models.db.session.commit()
+        # older successful run, then a more recent failed run — only the
+        # LATEST run's status should decide whether this heartbeat is flagged.
+        _models.db.session.add(_models.HeartbeatRun(
+            run_id=str(uuid.uuid4()), heartbeat_id="atlas-4h", status="success",
+            started_at=_iso(NOW - timedelta(hours=2)),
+        ))
+        _models.db.session.add(_models.HeartbeatRun(
+            run_id=str(uuid.uuid4()), heartbeat_id="atlas-4h", status="fail",
+            error="subprocess timeout", started_at=_iso(NOW - timedelta(minutes=5)),
+        ))
+        _models.db.session.commit()
+
+    resp = client.get("/api/overview")
+    failures = resp.get_json()["needs_attention"]["heartbeat_failures"]
+    assert len(failures) == 1
+    assert failures[0]["heartbeat_id"] == "atlas-4h"
+    assert "timeout" in failures[0]["error"]
+
+
+def test_heartbeat_whose_latest_run_succeeded_is_not_flagged(client):
+    import models as _models
+    with client.application.app_context():
+        hb = _models.Heartbeat(
+            id="zara-2h", agent="zara-cs", interval_seconds=7200,
+            decision_prompt="check things", created_at=_iso(NOW), updated_at=_iso(NOW),
+        )
+        _models.db.session.add(hb)
+        _models.db.session.commit()
+        _models.db.session.add(_models.HeartbeatRun(
+            run_id=str(uuid.uuid4()), heartbeat_id="zara-2h", status="fail",
+            error="old failure", started_at=_iso(NOW - timedelta(hours=3)),
+        ))
+        _models.db.session.add(_models.HeartbeatRun(
+            run_id=str(uuid.uuid4()), heartbeat_id="zara-2h", status="success",
+            started_at=_iso(NOW - timedelta(minutes=10)),
+        ))
+        _models.db.session.commit()
+
+    resp = client.get("/api/overview")
+    assert resp.get_json()["needs_attention"]["heartbeat_failures"] == []
+
+
+def test_stale_locked_ticket_is_flagged(client):
+    import models as _models
+    with client.application.app_context():
+        _models.db.session.add(_models.Ticket(
+            id=str(uuid.uuid4()), title="Ticket travado", status="in_progress", priority="medium",
+            priority_rank=2, locked_by="bolt-executor",
+            locked_at=_iso(NOW - timedelta(hours=2)), lock_timeout_seconds=1800,  # 30min timeout, locked 2h ago
+            created_at=_iso(NOW), updated_at=_iso(NOW),
+        ))
+        _models.db.session.commit()
+
+    resp = client.get("/api/overview")
+    stale = resp.get_json()["needs_attention"]["stale_locked_tickets"]
+    assert len(stale) == 1
+    assert stale[0]["title"] == "Ticket travado"
+
+
+def test_fresh_locked_ticket_is_not_flagged(client):
+    import models as _models
+    with client.application.app_context():
+        _models.db.session.add(_models.Ticket(
+            id=str(uuid.uuid4()), title="Ticket recente", status="in_progress", priority="medium",
+            priority_rank=2, locked_by="bolt-executor",
+            locked_at=_iso(NOW - timedelta(minutes=2)), lock_timeout_seconds=1800,
+            created_at=_iso(NOW), updated_at=_iso(NOW),
+        ))
+        _models.db.session.commit()
+
+    resp = client.get("/api/overview")
+    assert resp.get_json()["needs_attention"]["stale_locked_tickets"] == []
+
+
+def test_approval_pending_over_24h_is_flagged(client):
+    import models as _models
+    with client.application.app_context():
+        db_conn = _models.db.session
+        db_conn.execute(_models.db.text(
+            "INSERT INTO pending_approvals (gate_type, agent, attempt, idempotency_key, status, created_at, expires_at) "
+            "VALUES ('publish', 'pixel-social-media', 0, :k, 'pending', :c, :e)"
+        ), {"k": "test-key-1", "c": _iso(NOW - timedelta(hours=30)), "e": _iso(NOW + timedelta(hours=8))})
+        db_conn.commit()
+
+    resp = client.get("/api/overview")
+    aged = resp.get_json()["needs_attention"]["aged_approvals"]
+    assert len(aged) == 1
+    assert aged[0]["gate_type"] == "publish"
+
+
+def test_recent_approval_is_not_flagged(client):
+    import models as _models
+    with client.application.app_context():
+        db_conn = _models.db.session
+        db_conn.execute(_models.db.text(
+            "INSERT INTO pending_approvals (gate_type, agent, attempt, idempotency_key, status, created_at, expires_at) "
+            "VALUES ('publish', 'pixel-social-media', 0, :k, 'pending', :c, :e)"
+        ), {"k": "test-key-2", "c": _iso(NOW - timedelta(hours=1)), "e": _iso(NOW + timedelta(hours=8))})
+        db_conn.commit()
+
+    resp = client.get("/api/overview")
+    assert resp.get_json()["needs_attention"]["aged_approvals"] == []
+
+
+def test_decided_approval_over_24h_old_is_not_flagged(client):
+    """Only status='pending' counts — an old but already-decided approval
+    must never show up as needing attention."""
+    import models as _models
+    with client.application.app_context():
+        db_conn = _models.db.session
+        db_conn.execute(_models.db.text(
+            "INSERT INTO pending_approvals (gate_type, agent, attempt, idempotency_key, status, created_at, expires_at, decided_at) "
+            "VALUES ('publish', 'pixel-social-media', 0, :k, 'approved', :c, :e, :d)"
+        ), {"k": "test-key-3", "c": _iso(NOW - timedelta(hours=30)), "e": _iso(NOW + timedelta(hours=8)), "d": _iso(NOW - timedelta(hours=29))})
+        db_conn.commit()
+
+    resp = client.get("/api/overview")
+    assert resp.get_json()["needs_attention"]["aged_approvals"] == []
diff --git a/tests/backend/test_plugin_public_pages_html_shell.py b/tests/backend/test_plugin_public_pages_html_shell.py
new file mode 100644
index 000000000..172851d46
--- /dev/null
+++ b/tests/backend/test_plugin_public_pages_html_shell.py
@@ -0,0 +1,229 @@
+"""Wave 2.1.x — content negotiation for plugin public pages.
+
+When a browser hits /p/{slug}/{route}/{token}, the host generates a minimal
+HTML shell that loads the plugin bundle as a module and instantiates the
+declared custom element. Programmatic clients (no text/html in Accept) keep
+getting the raw bundle for backwards compat.
+
+Covers:
+- HTML accept → renders shell with custom element + bundle script tag
+- Token embedded in data-token attribute on custom element
+- No HTML accept → bundle served as application/javascript (legacy)
+- Bundle path enforced inside ui/public/ (containment guard reused)
+- CSP + X-Content-Type-Options headers present on shell
+- Custom element name enforced alphanum-dash (defense in depth)
+- Invalid token → 404 (no shell leaked)
+"""
+
+from __future__ import annotations
+
+import json
+import sqlite3
+import sys
+from pathlib import Path
+
+import pytest
+
+REPO_ROOT = Path(__file__).resolve().parents[2]
+BACKEND_DIR = REPO_ROOT / "dashboard" / "backend"
+sys.path.insert(0, str(BACKEND_DIR))
+
+
+@pytest.fixture
+def tmp_db(tmp_path):
+    """Temp SQLite DB with plugins_installed (manifest_json column) + nutri_patients."""
+    db_path = tmp_path / "test.db"
+    conn = sqlite3.connect(str(db_path))
+    manifest_json = json.dumps({
+        "id": "nutri",
+        "public_pages": [
+            {
+                "id": "portal",
+                "description": "Portal do paciente",
+                "route_prefix": "portal",
+                "bundle": "ui/public/portal.js",
+                "custom_element_name": "nutri-patient-portal",
+                "auth_mode": "token",
+                "token_source": {"table": "nutri_patients", "column": "magic_link_token"},
+                "audit_action": "portal_view",
+            }
+        ],
+        "readonly_data": [],
+    })
+    conn.executescript(
+        """
+        CREATE TABLE plugins_installed (
+            slug TEXT PRIMARY KEY, enabled INTEGER, status TEXT,
+            manifest_json TEXT, capabilities_disabled TEXT
+        );
+        CREATE TABLE nutri_patients (
+            id TEXT PRIMARY KEY, name TEXT, magic_link_token TEXT, status TEXT
+        );
+        INSERT INTO nutri_patients (id, name, magic_link_token, status) VALUES
+            ('p1', 'Alice', 'good-token-123', 'active'),
+            ('p2', 'Bob', NULL, 'active');
+        """
+    )
+    conn.execute(
+        "INSERT INTO plugins_installed (slug, enabled, status, manifest_json, capabilities_disabled) "
+        "VALUES (?, 1, 'active', ?, '{}')",
+        ("nutri", manifest_json),
+    )
+    conn.commit()
+    conn.close()
+    return db_path
+
+
+@pytest.fixture
+def app(tmp_path, tmp_db):
+    """Flask app with plugin_public_pages blueprint pointed at temp DB + bundle."""
+    import flask
+
+    plugins_root = tmp_path / "plugins"
+    plugin_dir = plugins_root / "nutri"
+    bundle_dir = plugin_dir / "ui" / "public"
+    bundle_dir.mkdir(parents=True)
+    (bundle_dir / "portal.js").write_text(
+        "// minimal bundle\ncustomElements.define('nutri-patient-portal', class extends HTMLElement {});\n",
+        encoding="utf-8",
+    )
+
+    import routes.plugin_public_pages as ppp_mod
+    ppp_mod.PLUGINS_DIR = plugins_root
+
+    def _get_db_override():
+        c = sqlite3.connect(str(tmp_db))
+        c.row_factory = sqlite3.Row
+        return c
+    ppp_mod._get_db = _get_db_override
+    # audit() in plugin_public_pages writes to host DB — stub it to no-op
+    ppp_mod.audit = lambda *a, **kw: None
+
+    flask_app = flask.Flask(__name__)
+    flask_app.config["TESTING"] = True
+    flask_app.config["SECRET_KEY"] = "test"
+
+    # flask-limiter is applied at module load — patch in-memory storage
+    from flask_limiter import Limiter
+    if not hasattr(ppp_mod, "_limiter_inited"):
+        try:
+            ppp_mod.limiter.init_app(flask_app)
+        except Exception:
+            pass
+
+    flask_app.register_blueprint(ppp_mod.bp)
+    return flask_app
+
+
+@pytest.fixture
+def client(app):
+    return app.test_client()
+
+
+# ── Content negotiation ──────────────────────────────────────────────────
+
+
+class TestHtmlShellNegotiation:
+    def test_browser_accept_html_returns_shell(self, client):
+        r = client.get(
+            "/p/nutri/portal/good-token-123",
+            headers={"Accept": "text/html,application/xhtml+xml"},
+        )
+        assert r.status_code == 200
+        assert r.mimetype == "text/html"
+        body = r.get_data(as_text=True)
+        assert "<!doctype html>" in body
+        # Token reaches the custom element via data-token
+        assert 'data-token="good-token-123"' in body
+        # Custom element instantiated
+        assert "<nutri-patient-portal" in body
+        # Bundle loaded via public-assets path (no token leaked in script src)
+        assert 'src="/p/nutri/public-assets/portal.js"' in body
+        # noindex prevents portal pages from being indexed
+        assert 'name="robots"' in body and "noindex" in body
+
+    def test_no_html_accept_returns_bundle(self, client):
+        r = client.get(
+            "/p/nutri/portal/good-token-123",
+            headers={"Accept": "application/javascript"},
+        )
+        assert r.status_code == 200
+        assert "javascript" in r.mimetype
+        # Bundle source served verbatim
+        assert b"customElements.define" in r.get_data()
+
+    def test_curl_no_accept_returns_bundle(self, client):
+        # Default test client sets Accept: */* — should NOT trigger HTML shell
+        r = client.get("/p/nutri/portal/good-token-123")
+        assert r.status_code == 200
+        # */* alone shouldn't trip wants_html since text/html not in it explicitly
+        assert "javascript" in r.mimetype
+
+    def test_invalid_token_returns_404_even_with_html_accept(self, client):
+        r = client.get(
+            "/p/nutri/portal/wrong-token",
+            headers={"Accept": "text/html"},
+        )
+        assert r.status_code == 404
+        # Error JSON is the existing 404 response — shell must not leak before validation
+        assert b"<!doctype html>" not in r.get_data()
+
+    def test_html_shell_has_csp_and_no_sniff_headers(self, client):
+        r = client.get(
+            "/p/nutri/portal/good-token-123",
+            headers={"Accept": "text/html"},
+        )
+        assert r.headers.get("X-Content-Type-Options") == "nosniff"
+        csp = r.headers.get("Content-Security-Policy", "")
+        assert "default-src 'self'" in csp
+        assert "frame-ancestors 'none'" in csp
+
+    def test_html_shell_xss_safe_token(self, client):
+        # Inject a token that would XSS if not escaped
+        # But it has to also be a VALID token so we'd need to seed it.
+        # Instead, verify that the page only ever contains the *exact* token
+        # bytes inside the data-token attribute (escape happens via html.escape).
+        r = client.get(
+            "/p/nutri/portal/good-token-123",
+            headers={"Accept": "text/html"},
+        )
+        body = r.get_data(as_text=True)
+        # No raw <script> with token interpolated outside of data-token
+        # (the only <script> tag should be the module loader, not user input)
+        scripts = body.count("<script")
+        assert scripts == 1  # exactly one — the module loader
+        assert 'src="/p/nutri/public-assets/portal.js"' in body
+
+    def test_revoked_token_returns_404(self, client):
+        # p2 has NULL magic_link_token — should not match
+        r = client.get(
+            "/p/nutri/portal/",  # no token at all
+            headers={"Accept": "text/html"},
+        )
+        # Flask routing — may be 404 or 308; accept either
+        assert r.status_code in (404, 308)
+
+
+# ── Backwards compat — existing programmatic clients keep working ────────
+
+
+class TestBackwardsCompatibility:
+    def test_existing_js_only_fetch_unchanged(self, client):
+        """A client that explicitly asks for application/javascript still gets the raw bundle."""
+        r = client.get(
+            "/p/nutri/portal/good-token-123",
+            headers={"Accept": "application/javascript;q=0.9"},
+        )
+        assert r.status_code == 200
+        assert "javascript" in r.mimetype
+
+    def test_html_accept_with_js_also_in_accept_serves_bundle(self, client):
+        """Accept header with both text/html AND application/javascript explicitly
+        is treated as a programmatic client — the JS being asked for is the priority."""
+        r = client.get(
+            "/p/nutri/portal/good-token-123",
+            headers={"Accept": "text/html, application/javascript"},
+        )
+        # wants_html requires text/html present AND js absent
+        assert r.status_code == 200
+        assert "javascript" in r.mimetype
diff --git a/tests/backend/test_plugins_rbac_and_scoping.py b/tests/backend/test_plugins_rbac_and_scoping.py
new file mode 100644
index 000000000..3b41651ce
--- /dev/null
+++ b/tests/backend/test_plugins_rbac_and_scoping.py
@@ -0,0 +1,303 @@
+"""Wave 2.1.x — endpoint-level RBAC + readonly auto-scoping tests.
+
+Covers:
+- PluginWritableResource accepts requires_role list (Pydantic validator)
+- requires_role rejects bad role names
+- writable_data handler returns 403 when role mismatch
+- writable_data handler accepts when role matches OR user is 'admin'
+- readonly_data auto-injects current_user_id and current_user_role
+- readonly_data rejects client-supplied current_user_id (reserved param)
+- backwards-compat: resources without requires_role still work for any user
+"""
+
+from __future__ import annotations
+
+import json
+import sqlite3
+import sys
+import tempfile
+from pathlib import Path
+from unittest.mock import MagicMock, patch
+
+import pytest
+
+REPO_ROOT = Path(__file__).resolve().parents[2]
+BACKEND_DIR = REPO_ROOT / "dashboard" / "backend"
+sys.path.insert(0, str(BACKEND_DIR))
+
+
+# ---------------------------------------------------------------------------
+# Pydantic schema tests — requires_role field
+# ---------------------------------------------------------------------------
+
+
+class TestRequiresRoleSchema:
+    def test_writable_resource_accepts_requires_role(self):
+        from plugin_schema import PluginWritableResource
+        r = PluginWritableResource(
+            id="patients_clinical",
+            description="Clinical fields — nutri only",
+            table="nutri_patients",
+            allowed_columns=["goal", "consent_given_at"],
+            requires_role=["nutricionista", "nutri-admin"],
+        )
+        assert r.requires_role == ["nutricionista", "nutri-admin"]
+
+    def test_writable_resource_requires_role_optional(self):
+        from plugin_schema import PluginWritableResource
+        r = PluginWritableResource(
+            id="open_resource",
+            description="No RBAC — backwards compatible",
+            table="nutri_brand_settings",
+            allowed_columns=["office_name"],
+        )
+        assert r.requires_role is None
+
+    def test_writable_resource_rejects_bad_role_name(self):
+        from plugin_schema import PluginWritableResource
+        from pydantic import ValidationError
+        with pytest.raises(ValidationError):
+            PluginWritableResource(
+                id="test",
+                description="x",
+                table="nutri_test",
+                allowed_columns=["x"],
+                requires_role=["Nutri Admin"],  # uppercase + space — should fail
+            )
+
+    def test_writable_resource_accepts_kebab_case_role(self):
+        from plugin_schema import PluginWritableResource
+        r = PluginWritableResource(
+            id="t",
+            description="x",
+            table="nutri_test",
+            allowed_columns=["x"],
+            requires_role=["nutri-admin", "super-user", "viewer"],
+        )
+        assert r.requires_role == ["nutri-admin", "super-user", "viewer"]
+
+
+# ---------------------------------------------------------------------------
+# Flask app + handlers tests — RBAC enforcement + readonly auto-scoping
+# ---------------------------------------------------------------------------
+
+
+@pytest.fixture
+def tmp_db(tmp_path):
+    """Temp SQLite DB with users + plugins_installed + a fake nutri_test table."""
+    db_path = tmp_path / "test.db"
+    conn = sqlite3.connect(str(db_path))
+    conn.executescript("""
+        CREATE TABLE users (
+            id INTEGER PRIMARY KEY, username TEXT, role TEXT NOT NULL DEFAULT 'viewer'
+        );
+        INSERT INTO users (id, username, role) VALUES
+            (1, 'alice', 'nutricionista'),
+            (2, 'bob',   'recepcao'),
+            (3, 'admin', 'admin');
+        CREATE TABLE plugins_installed (
+            slug TEXT PRIMARY KEY, enabled INTEGER, status TEXT,
+            capabilities_disabled TEXT
+        );
+        INSERT INTO plugins_installed (slug, enabled, status, capabilities_disabled)
+            VALUES ('nutri', 1, 'active', '{}');
+        CREATE TABLE nutri_test (
+            id INTEGER PRIMARY KEY AUTOINCREMENT,
+            name TEXT,
+            owner_id INTEGER
+        );
+        INSERT INTO nutri_test (name, owner_id) VALUES
+            ('Alice patient', 1),
+            ('Alice patient 2', 1),
+            ('Bob patient', 2);
+    """)
+    conn.commit()
+    conn.close()
+    return db_path
+
+
+@pytest.fixture
+def app(tmp_path, tmp_db):
+    """Flask app with plugins blueprint + a fake installed plugin manifest on disk."""
+    import flask
+    from flask_login import LoginManager
+
+    plugins_root = tmp_path / "plugins"
+    plugin_dir = plugins_root / "nutri"
+    plugin_dir.mkdir(parents=True)
+
+    manifest = {
+        "manifest": {
+            "id": "nutri",
+            "writable_data": [
+                {
+                    "id": "test_open",
+                    "description": "open",
+                    "table": "nutri_test",
+                    "allowed_columns": ["name", "owner_id"],
+                },
+                {
+                    "id": "test_clinical",
+                    "description": "clinical",
+                    "table": "nutri_test",
+                    "allowed_columns": ["name", "owner_id"],
+                    "requires_role": ["nutricionista", "nutri-admin"],
+                },
+            ],
+            "readonly_data": [
+                {
+                    "id": "my_rows",
+                    "description": "rows owned by current user",
+                    "sql": "SELECT id, name FROM nutri_test WHERE owner_id = :current_user_id ORDER BY id",
+                },
+                {
+                    "id": "all_rows",
+                    "description": "all rows",
+                    "sql": "SELECT id, name, owner_id FROM nutri_test ORDER BY id",
+                },
+            ],
+        }
+    }
+    (plugin_dir / ".install-manifest.json").write_text(json.dumps(manifest), encoding="utf-8")
+
+    # Patch PLUGINS_DIR + _get_db before importing the blueprint
+    import routes.plugins as plugins_mod
+    plugins_mod.PLUGINS_DIR = plugins_root
+
+    def _get_db_override():
+        c = sqlite3.connect(str(tmp_db))
+        c.row_factory = sqlite3.Row
+        return c
+    plugins_mod._get_db = _get_db_override
+
+    from routes.plugins import bp as plugins_bp
+
+    flask_app = flask.Flask(__name__)
+    flask_app.config["TESTING"] = True
+    flask_app.config["SECRET_KEY"] = "test"
+
+    lm = LoginManager()
+    lm.init_app(flask_app)
+
+    class FakeUser:
+        is_authenticated = True
+        is_active = True
+        is_anonymous = False
+        def __init__(self, uid, role):
+            self.id = uid
+            self.username = f"user{uid}"
+            self.role = role
+        def get_id(self):
+            return str(self.id)
+
+    flask_app._fake_user = None  # set per test
+
+    @lm.user_loader
+    def loader(uid):
+        return flask_app._fake_user if flask_app._fake_user else None
+
+    @lm.unauthorized_handler
+    def unauthorized():
+        return flask.jsonify({"error": "auth required"}), 401
+
+    flask_app.register_blueprint(plugins_bp)
+    flask_app._FakeUser = FakeUser
+    return flask_app
+
+
+@pytest.fixture
+def client(app):
+    return app.test_client()
+
+
+def login_as(app, client, uid, role):
+    app._fake_user = app._FakeUser(uid, role)
+    with client.session_transaction() as sess:
+        sess["_user_id"] = str(uid)
+        sess["_fresh"] = True
+
+
+# ── writable_data RBAC ─────────────────────────────────────────────────────
+
+class TestWritableDataRbac:
+    def test_open_resource_accepts_any_role(self, app, client):
+        """Resource without requires_role works for recepcao (backwards compat)."""
+        login_as(app, client, 2, "recepcao")
+        resp = client.post(
+            "/api/plugins/nutri/data/test_open",
+            json={"name": "new", "owner_id": 2},
+        )
+        assert resp.status_code in (200, 201), resp.get_json()
+
+    def test_clinical_resource_rejects_recepcao(self, app, client):
+        """requires_role=[nutricionista,nutri-admin] → recepcao gets 403."""
+        login_as(app, client, 2, "recepcao")
+        resp = client.post(
+            "/api/plugins/nutri/data/test_clinical",
+            json={"name": "leaked", "owner_id": 2},
+        )
+        assert resp.status_code == 403
+        body = resp.get_json()
+        assert "requires role" in body["error"].lower()
+
+    def test_clinical_resource_accepts_nutricionista(self, app, client):
+        """requires_role=[nutricionista,nutri-admin] → nutricionista passes."""
+        login_as(app, client, 1, "nutricionista")
+        resp = client.post(
+            "/api/plugins/nutri/data/test_clinical",
+            json={"name": "ok", "owner_id": 1},
+        )
+        assert resp.status_code in (200, 201), resp.get_json()
+
+    def test_clinical_resource_admin_override(self, app, client):
+        """role='admin' always passes (super-user override)."""
+        login_as(app, client, 3, "admin")
+        resp = client.post(
+            "/api/plugins/nutri/data/test_clinical",
+            json={"name": "by-admin", "owner_id": 3},
+        )
+        assert resp.status_code in (200, 201), resp.get_json()
+
+
+# ── readonly_data auto-scoping ─────────────────────────────────────────────
+
+class TestReadonlyAutoScoping:
+    def test_current_user_id_injected(self, app, client):
+        """SQL with :current_user_id returns only user 1's rows."""
+        login_as(app, client, 1, "nutricionista")
+        resp = client.get("/api/plugins/nutri/readonly-data/my_rows")
+        assert resp.status_code in (200, 201), resp.get_json()
+        rows = resp.get_json()["rows"]
+        assert len(rows) == 2  # Alice has 2 rows
+        assert all(r["name"].startswith("Alice") for r in rows)
+
+    def test_current_user_id_changes_per_user(self, app, client):
+        """Different user → different rows scoped automatically."""
+        login_as(app, client, 2, "recepcao")
+        resp = client.get("/api/plugins/nutri/readonly-data/my_rows")
+        rows = resp.get_json()["rows"]
+        assert len(rows) == 1  # Bob has 1 row
+        assert rows[0]["name"] == "Bob patient"
+
+    def test_client_cannot_spoof_current_user_id(self, app, client):
+        """?current_user_id=2 from client → 400, identity is server-only."""
+        login_as(app, client, 1, "nutricionista")
+        resp = client.get("/api/plugins/nutri/readonly-data/my_rows?current_user_id=2")
+        assert resp.status_code == 400
+        assert "reserved" in resp.get_json()["error"].lower()
+
+    def test_client_cannot_spoof_current_user_role(self, app, client):
+        login_as(app, client, 2, "recepcao")
+        resp = client.get(
+            "/api/plugins/nutri/readonly-data/all_rows?current_user_role=admin"
+        )
+        assert resp.status_code == 400
+        assert "reserved" in resp.get_json()["error"].lower()
+
+    def test_query_without_current_user_ref_still_works(self, app, client):
+        """Backwards compat — queries that don't reference :current_user_id work fine."""
+        login_as(app, client, 1, "nutricionista")
+        resp = client.get("/api/plugins/nutri/readonly-data/all_rows")
+        assert resp.status_code == 200
+        rows = resp.get_json()["rows"]
+        assert len(rows) == 3  # all rows visible
diff --git a/tests/backend/test_scheduler_routine_resolution.py b/tests/backend/test_scheduler_routine_resolution.py
new file mode 100644
index 000000000..62e40694c
--- /dev/null
+++ b/tests/backend/test_scheduler_routine_resolution.py
@@ -0,0 +1,82 @@
+"""
+tests/backend/test_scheduler_routine_resolution.py
+
+Operação-24/7 audit fix (2026-07-17) — config/routines.yaml's loader always
+requests scripts with a "custom/" prefix (_load_routines_from_yaml), but two
+real, currently-enabled routines don't live there:
+  - daily_status_report.py sits directly in ADWs/routines/ (not custom/)
+  - publish_scheduled.py (the ONLY script that actually dispatches real posts
+    to X via Postiz) sits at the repo's top-level scripts/
+Both used to silently no-op every tick ("script not found: custom/<name>")
+without raising anywhere a human would see it. run_adw() now tries three
+candidate locations before giving up. This proves the fix without needing a
+running scheduler process.
+
+Run:
+    cd /path/to/workspace && pytest tests/backend/test_scheduler_routine_resolution.py -v
+"""
+
+from __future__ import annotations
+
+import importlib.util
+import sys
+from pathlib import Path
+from unittest.mock import patch, MagicMock
+
+import pytest
+
+REPO_ROOT = Path(__file__).resolve().parents[2]
+
+
+@pytest.fixture
+def scheduler_module():
+    spec = importlib.util.spec_from_file_location("scheduler_under_test", REPO_ROOT / "scheduler.py")
+    mod = importlib.util.module_from_spec(spec)
+    spec.loader.exec_module(mod)
+    return mod
+
+
+def _mock_subprocess_run(**overrides):
+    result = MagicMock()
+    result.returncode = 0
+    for k, v in overrides.items():
+        setattr(result, k, v)
+    return result
+
+
+def test_finds_script_directly_in_routines_dir(scheduler_module):
+    """AI News scripts genuinely live in ADWs/routines/custom/ — the
+    common, already-working case must keep working unmodified."""
+    with patch("subprocess.run", return_value=_mock_subprocess_run()) as mock_run:
+        scheduler_module.run_adw("AI News Daily Draft", "custom/ai_news_daily_draft.py")
+    cmd = mock_run.call_args[0][0]
+    assert "ADWs/routines/custom/ai_news_daily_draft.py" in cmd
+
+
+def test_falls_back_to_routines_dir_root_for_daily_status_report(scheduler_module):
+    """daily_status_report.py is requested as 'custom/daily_status_report.py'
+    (the loader always prepends custom/) but the real file is one level up —
+    moving it would break its own ROOT-relative DB path resolution."""
+    with patch("subprocess.run", return_value=_mock_subprocess_run()) as mock_run:
+        scheduler_module.run_adw("Status Diário (WhatsApp)", "custom/daily_status_report.py")
+    cmd = mock_run.call_args[0][0]
+    assert "ADWs/routines/daily_status_report.py" in cmd
+    assert "custom/daily_status_report.py" not in cmd
+
+
+def test_falls_back_to_top_level_scripts_for_publish_scheduled(scheduler_module):
+    """publish_scheduled.py — the routine that actually dispatches posts to X
+    via Postiz — lives at the repo's top-level scripts/, not ADWs/routines/
+    at all. This was the highest-impact silent no-op found in this audit."""
+    with patch("subprocess.run", return_value=_mock_subprocess_run()) as mock_run:
+        scheduler_module.run_adw("Publicar Posts Sociais (X)", "custom/publish_scheduled.py")
+    cmd = mock_run.call_args[0][0]
+    assert "scripts/publish_scheduled.py" in cmd
+
+
+def test_prints_not_found_when_no_candidate_exists(scheduler_module, capsys):
+    with patch("subprocess.run") as mock_run:
+        scheduler_module.run_adw("Rotina Fantasma", "custom/does_not_exist_anywhere.py")
+    mock_run.assert_not_called()
+    captured = capsys.readouterr()
+    assert "script not found" in captured.out
diff --git a/tests/backend/test_telegram_provider_bot.py b/tests/backend/test_telegram_provider_bot.py
new file mode 100644
index 000000000..5e86316ec
--- /dev/null
+++ b/tests/backend/test_telegram_provider_bot.py
@@ -0,0 +1,116 @@
+from __future__ import annotations
+
+import unittest
+from pathlib import Path
+from tempfile import TemporaryDirectory
+
+import scripts.telegram_provider_bot as bot
+
+
+class TelegramProviderBotMemoryTests(unittest.TestCase):
+    def setUp(self) -> None:
+        self._tmp = TemporaryDirectory()
+        bot.CHAT_MEMORY_DIR = Path(self._tmp.name)
+
+    def tearDown(self) -> None:
+        self._tmp.cleanup()
+
+    def test_build_prompt_includes_recent_memory_and_current_message(self) -> None:
+        bot.append_chat_memory("123", "user", "Quero usar NVIDIA", speaker="Felipe")
+        bot.append_chat_memory("123", "assistant", "provider: nvidia", speaker="Magneto")
+
+        prompt = bot.build_prompt("123", "e a memoria?", speaker="Felipe")
+
+        self.assertIn("Memoria recente da conversa:", prompt)
+        self.assertIn("Usuário (Felipe): Quero usar NVIDIA", prompt)
+        self.assertIn("Assistente: provider: nvidia", prompt)
+        self.assertIn("Mensagem atual:", prompt)
+        self.assertIn("e a memoria?", prompt)
+
+    def test_clear_chat_memory_removes_history(self) -> None:
+        bot.append_chat_memory("456", "user", "oi", speaker="Felipe")
+        path = bot.chat_memory_path("456")
+        self.assertTrue(path.exists())
+
+        bot.clear_chat_memory("456")
+
+        self.assertFalse(path.exists())
+        self.assertEqual(bot.load_chat_memory("456"), [])
+
+    def test_append_chat_memory_redacts_secrets(self) -> None:
+        bot.append_chat_memory("789", "user", "API key: sk-abcdefghijklmnopqrstu gsk_abcdefghijklmnopqrstu", speaker="Felipe")
+        entries = bot.load_chat_memory("789")
+
+        self.assertEqual(len(entries), 1)
+        self.assertIn("[REDACTED]", entries[0]["text"])
+        self.assertNotIn("sk-abcdefghijklmnopqrstu", entries[0]["text"])
+        self.assertNotIn("gsk_abcdefghijklmnopqrstu", entries[0]["text"])
+
+    def test_message_audio_file_id_detects_voice_audio_and_audio_documents(self) -> None:
+        self.assertEqual(bot.message_audio_file_id({"voice": {"file_id": "voice-id"}}), "voice-id")
+        self.assertEqual(bot.message_audio_file_id({"audio": {"file_id": "audio-id"}}), "audio-id")
+        self.assertEqual(
+            bot.message_audio_file_id({"document": {"file_id": "doc-id", "mime_type": "audio/ogg"}}),
+            "doc-id",
+        )
+        self.assertIsNone(bot.message_audio_file_id({"document": {"file_id": "doc-id", "mime_type": "image/png"}}))
+
+    def test_message_image_file_id_detects_photo_and_image_documents(self) -> None:
+        self.assertEqual(
+            bot.message_image_file_id({"photo": [{"file_id": "small", "file_size": 10}, {"file_id": "big", "file_size": 20}]}),
+            ("big", ".jpg"),
+        )
+        self.assertEqual(
+            bot.message_image_file_id({"document": {"file_id": "doc-id", "mime_type": "image/png", "file_name": "x.png"}}),
+            ("doc-id", ".png"),
+        )
+        self.assertIsNone(bot.message_image_file_id({"document": {"file_id": "doc-id", "mime_type": "audio/ogg"}}))
+
+    def test_read_groq_api_key_prefers_environment(self) -> None:
+        original = bot.os.environ.get("GROQ_API_KEY")
+        try:
+            bot.os.environ["GROQ_API_KEY"] = "gsk_test_key"
+            self.assertEqual(bot.read_groq_api_key(), "gsk_test_key")
+        finally:
+            if original is None:
+                bot.os.environ.pop("GROQ_API_KEY", None)
+            else:
+                bot.os.environ["GROQ_API_KEY"] = original
+
+    def test_groq_command_can_store_key_in_telegram_env(self) -> None:
+        original_env = bot.TELEGRAM_ENV
+        try:
+            bot.TELEGRAM_ENV = bot.CHAT_MEMORY_DIR / ".env"
+            response = bot.handle_groq_command("set gsk_test_key")
+            self.assertEqual(response, "Groq configurado para transcricao de audio.")
+            self.assertEqual(bot.read_env_value(bot.TELEGRAM_ENV, "GROQ_API_KEY"), "gsk_test_key")
+            self.assertEqual(bot.handle_groq_command("status"), f"Groq configurado. Modelo de transcricao: {bot.GROQ_TRANSCRIPTION_MODEL}")
+        finally:
+            bot.TELEGRAM_ENV = original_env
+
+    def test_provider_chain_uses_strict_telegram_override(self) -> None:
+        original_path = bot.PROVIDERS_PATH
+        cfg = bot.CHAT_MEMORY_DIR / "providers.json"
+        cfg.write_text(
+            """
+{
+  "active_provider": "nvidia",
+  "telegram_provider": "codex_auth",
+  "providers": {
+    "codex_auth": {"fallback_providers": ["nvidia"]},
+    "nvidia": {}
+  }
+}
+""".strip(),
+            encoding="utf-8",
+        )
+        try:
+            bot.PROVIDERS_PATH = cfg
+            self.assertEqual([pid for pid, _ in bot.provider_chain()], ["codex_auth"])
+            self.assertEqual(bot.provider_models("codex_auth", {}), [None])
+        finally:
+            bot.PROVIDERS_PATH = original_path
+
+
+if __name__ == "__main__":
+    unittest.main()
diff --git a/tests/backend/test_whatsapp_notifications.py b/tests/backend/test_whatsapp_notifications.py
new file mode 100644
index 000000000..d2428134f
--- /dev/null
+++ b/tests/backend/test_whatsapp_notifications.py
@@ -0,0 +1,70 @@
+"""
+tests/backend/test_whatsapp_notifications.py
+
+Panorama 2026-07-17, item 3 — notifications.send_whatsapp used to hardcode
+the Evolution Go instance to "nature" (a different client's WhatsApp number),
+so every call silently sent from the wrong number. Now defaults to
+"sistema-britto" (Sistema Britto's own connected instance) and accepts an
+override.
+
+Run:
+    cd /path/to/workspace && pytest tests/backend/test_whatsapp_notifications.py -v
+"""
+
+from __future__ import annotations
+
+import sys
+from pathlib import Path
+from unittest.mock import MagicMock, patch
+
+import pytest
+
+REPO_ROOT = Path(__file__).resolve().parents[2]
+BACKEND_DIR = REPO_ROOT / "dashboard" / "backend"
+sys.path.insert(0, str(BACKEND_DIR))
+
+import notifications  # noqa: E402
+
+
+@pytest.fixture(autouse=True)
+def _evolution_go_env(monkeypatch):
+    monkeypatch.setenv("EVOLUTION_GO_URL", "https://evo.example.com")
+    monkeypatch.setenv("EVOLUTION_GO_KEY", "test-key")
+    monkeypatch.delenv("EVOLUTION_GO_INSTANCE", raising=False)
+
+
+def _mock_response():
+    resp = MagicMock()
+    resp.status = 200
+    resp.__enter__ = MagicMock(return_value=resp)
+    resp.__exit__ = MagicMock(return_value=False)
+    return resp
+
+
+def test_send_whatsapp_defaults_to_sistema_britto_instance():
+    with patch("urllib.request.urlopen", return_value=_mock_response()) as mock_urlopen:
+        ok = notifications.send_whatsapp("oi", "5511999999999")
+    assert ok is True
+    request_obj = mock_urlopen.call_args[0][0]
+    assert request_obj.full_url.endswith("/message/sendText/sistema-britto")
+
+
+def test_send_whatsapp_respects_explicit_instance_override():
+    with patch("urllib.request.urlopen", return_value=_mock_response()) as mock_urlopen:
+        notifications.send_whatsapp("oi", "5511999999999", instance="outro-cliente")
+    request_obj = mock_urlopen.call_args[0][0]
+    assert request_obj.full_url.endswith("/message/sendText/outro-cliente")
+
+
+def test_send_whatsapp_respects_env_instance_override(monkeypatch):
+    monkeypatch.setenv("EVOLUTION_GO_INSTANCE", "env-instance")
+    with patch("urllib.request.urlopen", return_value=_mock_response()) as mock_urlopen:
+        notifications.send_whatsapp("oi", "5511999999999")
+    request_obj = mock_urlopen.call_args[0][0]
+    assert request_obj.full_url.endswith("/message/sendText/env-instance")
+
+
+def test_send_whatsapp_returns_false_without_credentials(monkeypatch):
+    monkeypatch.delenv("EVOLUTION_GO_URL", raising=False)
+    monkeypatch.delenv("EVOLUTION_GO_KEY", raising=False)
+    assert notifications.send_whatsapp("oi", "5511999999999") is False
diff --git a/tests/goals/test_ai_hierarchy_suggestions.py b/tests/goals/test_ai_hierarchy_suggestions.py
new file mode 100644
index 000000000..8c4386840
--- /dev/null
+++ b/tests/goals/test_ai_hierarchy_suggestions.py
@@ -0,0 +1,452 @@
+"""
+tests/goals/test_ai_hierarchy_suggestions.py
+
+ai-hierarchy-suggestions quick-spec — generalizes the goal-ticket-unification
+approval gate one rung up in each direction:
+
+  Mission --(project-planner, gate_type=project_suggestion)--> Project
+  Project --(goal-suggester,  gate_type=goal_suggestion)-----> Goal
+
+Covers: mission_created/project_created dispatch on creation, POST
+/api/approvals accepting mission_id/project_id, approve/reject creating the
+right rows from payload, the intentional cascade (approving a
+project_suggestion wakes goal-suggester per created Project; approving a
+goal_suggestion wakes the existing goal-planner per created Goal), and the
+same malformed-payload resilience already proven for decomposition.
+
+Run:
+    cd /path/to/workspace && pytest tests/goals/test_ai_hierarchy_suggestions.py -v
+"""
+
+from __future__ import annotations
+
+import importlib
+import sys
+from pathlib import Path
+from unittest.mock import patch
+
+import pytest
+
+REPO_ROOT = Path(__file__).resolve().parents[2]
+BACKEND_DIR = REPO_ROOT / "dashboard" / "backend"
+sys.path.insert(0, str(BACKEND_DIR))
+
+NOW = "2026-07-17T00:00:00.000000Z"
+
+
+@pytest.fixture
+def app():
+    import flask
+    from flask_login import LoginManager
+    import models as _models
+    importlib.reload(_models)
+
+    _app = flask.Flask(__name__)
+    _app.config["TESTING"] = True
+    _app.config["SECRET_KEY"] = "test-ai-hierarchy"
+    _app.config["SQLALCHEMY_DATABASE_URI"] = "sqlite:///:memory:"
+    _app.config["SQLALCHEMY_TRACK_MODIFICATIONS"] = False
+
+    _models.db.init_app(_app)
+
+    _login_manager = LoginManager()
+    _login_manager.init_app(_app)
+
+    @_login_manager.user_loader
+    def _load_user(user_id):
+        return _models.User.query.get(int(user_id))
+
+    @_login_manager.unauthorized_handler
+    def _unauthorized():
+        from flask import jsonify
+        return jsonify({"error": "Authentication required"}), 401
+
+    with _app.app_context():
+        _models.db.create_all()
+        admin = _models.User(username="admin", role="admin")
+        admin.set_password("password")
+        _models.db.session.add(admin)
+        _models.db.session.commit()
+
+    import routes.goals as _goals_routes
+    import routes.approvals as _approvals_routes
+    importlib.reload(_goals_routes)
+    importlib.reload(_approvals_routes)
+    _app.register_blueprint(_goals_routes.bp)
+    _app.register_blueprint(_approvals_routes.bp)
+
+    return _app
+
+
+@pytest.fixture
+def client(app):
+    with app.test_client() as c:
+        with c.session_transaction() as sess:
+            sess["_user_id"] = "1"
+            sess["_fresh"] = True
+        yield c
+
+
+@pytest.fixture(autouse=True)
+def _approval_env(monkeypatch):
+    monkeypatch.setenv("APPROVAL_BRIDGE_TOKEN", "test-bridge-token")
+    monkeypatch.setenv("APPROVAL_APPROVER_IDS", "12345")
+    # Same safety net as test_step7_publish_decomposition.py — never let a
+    # real send_approval_request escape to a real Telegram bot during tests.
+    monkeypatch.delenv("TELEGRAM_BOT_TOKEN", raising=False)
+    monkeypatch.delenv("TELEGRAM_CHAT_ID", raising=False)
+
+
+def _bridge_headers():
+    return {"Authorization": "Bearer test-bridge-token"}
+
+
+def _create_mission(client) -> int:
+    with patch("heartbeat_dispatcher.dispatch"):
+        resp = client.post("/api/missions", json={"slug": "m-evo", "title": "Evolution MRR"})
+        assert resp.status_code == 201, resp.get_json()
+        return resp.get_json()["id"]
+
+
+def _create_project(client, mission_id: int | None = None, suffix: str = "a") -> int:
+    with patch("heartbeat_dispatcher.dispatch"):
+        payload = {"slug": f"proj-{suffix}", "title": f"Project {suffix}"}
+        if mission_id is not None:
+            payload["mission_id"] = mission_id
+        resp = client.post("/api/projects", json=payload)
+        assert resp.status_code == 201, resp.get_json()
+        return resp.get_json()["id"]
+
+
+# ---------------------------------------------------------------------------
+# Dispatch on creation
+# ---------------------------------------------------------------------------
+
+def test_create_mission_dispatches_mission_created(client):
+    with patch("heartbeat_dispatcher.dispatch") as mock_dispatch:
+        resp = client.post("/api/missions", json={"slug": "m1", "title": "M1"})
+        mission_id = resp.get_json()["id"]
+    mock_dispatch.assert_called_once_with(
+        "project-planner", "mission_created", {"mission_id": mission_id}
+    )
+
+
+def test_create_project_dispatches_project_created(client):
+    mission_id = _create_mission(client)
+    with patch("heartbeat_dispatcher.dispatch") as mock_dispatch:
+        resp = client.post("/api/projects", json={
+            "slug": "p1", "title": "P1", "mission_id": mission_id,
+        })
+        project_id = resp.get_json()["id"]
+    mock_dispatch.assert_called_once_with(
+        "goal-suggester", "project_created", {"project_id": project_id}
+    )
+
+
+# ---------------------------------------------------------------------------
+# project_suggestion — Mission -> Project
+# ---------------------------------------------------------------------------
+
+def test_project_suggestion_approve_creates_projects_and_cascades(client):
+    mission_id = _create_mission(client)
+
+    payload = {
+        "title": "Aprovar Projects", "body": "resumo",
+        "projects": [
+            {"slug": "evo-ai", "title": "Evo AI", "description": "CRM"},
+            {"slug": "evo-summit", "title": "Evolution Summit"},
+        ],
+    }
+    create_resp = client.post("/api/approvals", json={
+        "gate_type": "project_suggestion", "mission_id": mission_id,
+        "agent": "project-planner", "payload": payload,
+    })
+    assert create_resp.status_code == 201, create_resp.get_json()
+    approval_id = create_resp.get_json()["id"]
+    assert create_resp.get_json()["idempotency_key"] == f"projsug:{mission_id}:0"
+
+    with patch("heartbeat_dispatcher.dispatch") as mock_dispatch:
+        decision_resp = client.post(
+            f"/api/approvals/{approval_id}/decision",
+            json={"decision": "approve", "from_id": "12345"},
+            headers=_bridge_headers(),
+        )
+        assert decision_resp.status_code == 200, decision_resp.get_json()
+
+    projects = client.get(f"/api/projects?mission_id={mission_id}").get_json()
+    assert len(projects) == 2
+    titles = {p["title"] for p in projects}
+    assert titles == {"Evo AI", "Evolution Summit"}
+    for p in projects:
+        assert p["mission_id"] == mission_id
+
+    # Cascade: goal-suggester woken once per created Project.
+    assert mock_dispatch.call_count == 2
+    dispatched_agents = {call.args[0] for call in mock_dispatch.call_args_list}
+    dispatched_triggers = {call.args[1] for call in mock_dispatch.call_args_list}
+    assert dispatched_agents == {"goal-suggester"}
+    assert dispatched_triggers == {"project_created"}
+
+
+def test_project_suggestion_reject_creates_zero_projects(client):
+    mission_id = _create_mission(client)
+    payload = {"title": "t", "body": "b", "projects": [{"slug": "x", "title": "X"}]}
+    create_resp = client.post("/api/approvals", json={
+        "gate_type": "project_suggestion", "mission_id": mission_id,
+        "agent": "project-planner", "payload": payload,
+    })
+    approval_id = create_resp.get_json()["id"]
+
+    with patch("heartbeat_dispatcher.dispatch") as mock_dispatch:
+        decision_resp = client.post(
+            f"/api/approvals/{approval_id}/decision",
+            json={"decision": "reject", "from_id": "12345", "reason": "não agora"},
+            headers=_bridge_headers(),
+        )
+    assert decision_resp.status_code == 200, decision_resp.get_json()
+    assert client.get(f"/api/projects?mission_id={mission_id}").get_json() == []
+    mock_dispatch.assert_not_called()
+
+
+def test_project_suggestion_skips_malformed_and_duplicate_slugs(client):
+    mission_id = _create_mission(client)
+    existing_id = _create_project(client, mission_id=mission_id, suffix="existing")
+
+    payload = {
+        "title": "t", "body": "b",
+        "projects": [
+            "not-a-dict", None, 42,
+            {"slug": "proj-existing", "title": "Duplicate of existing"},  # slug collision
+            {"title": "No slug at all"},  # missing slug
+            {"slug": "brand-new", "title": "Brand New"},
+        ],
+    }
+    create_resp = client.post("/api/approvals", json={
+        "gate_type": "project_suggestion", "mission_id": mission_id,
+        "agent": "project-planner", "payload": payload,
+    })
+    approval_id = create_resp.get_json()["id"]
+
+    with patch("heartbeat_dispatcher.dispatch"):
+        decision_resp = client.post(
+            f"/api/approvals/{approval_id}/decision",
+            json={"decision": "approve", "from_id": "12345"},
+            headers=_bridge_headers(),
+        )
+    assert decision_resp.status_code == 200, decision_resp.get_json()
+
+    projects = client.get(f"/api/projects?mission_id={mission_id}").get_json()
+    titles = {p["title"] for p in projects}
+    assert titles == {"Project existing", "Brand New"}
+    assert len(projects) == 2  # existing (untouched) + the one valid new proposal
+
+
+# ---------------------------------------------------------------------------
+# goal_suggestion — Project -> Goal
+# ---------------------------------------------------------------------------
+
+def test_goal_suggestion_approve_creates_goals_and_cascades(client):
+    project_id = _create_project(client, suffix="b")
+
+    payload = {
+        "title": "Aprovar Goals", "body": "resumo",
+        "goals": [
+            {"slug": "g-100-customers", "title": "100 customers", "metric_type": "count",
+             "target_value": 100, "due_date": "2026-12-31"},
+            {"slug": "g-ship-billing", "title": "Ship billing v2", "metric_type": "boolean",
+             "due_date": "2026-11-30"},
+        ],
+    }
+    create_resp = client.post("/api/approvals", json={
+        "gate_type": "goal_suggestion", "project_id": project_id,
+        "agent": "goal-suggester", "payload": payload,
+    })
+    assert create_resp.status_code == 201, create_resp.get_json()
+    approval_id = create_resp.get_json()["id"]
+    assert create_resp.get_json()["idempotency_key"] == f"goalsug:{project_id}:0"
+
+    with patch("heartbeat_dispatcher.dispatch") as mock_dispatch:
+        decision_resp = client.post(
+            f"/api/approvals/{approval_id}/decision",
+            json={"decision": "approve", "from_id": "12345"},
+            headers=_bridge_headers(),
+        )
+        assert decision_resp.status_code == 200, decision_resp.get_json()
+
+    goals = client.get(f"/api/goals?project_id={project_id}").get_json()
+    assert len(goals) == 2
+    by_title = {g["title"]: g for g in goals}
+    assert by_title["100 customers"]["target_value"] == 100
+    assert by_title["100 customers"]["parent_goal_id"] is None
+    assert by_title["Ship billing v2"]["target_value"] == 1.0  # boolean default
+    for g in goals:
+        assert g["project_id"] == project_id
+
+    # Cascade: goal-planner woken once per created Goal.
+    assert mock_dispatch.call_count == 2
+    dispatched_agents = {call.args[0] for call in mock_dispatch.call_args_list}
+    dispatched_triggers = {call.args[1] for call in mock_dispatch.call_args_list}
+    assert dispatched_agents == {"goal-planner"}
+    assert dispatched_triggers == {"goal_created"}
+
+
+def test_goal_suggestion_reject_creates_zero_goals(client):
+    project_id = _create_project(client, suffix="c")
+    payload = {"title": "t", "body": "b", "goals": [
+        {"slug": "x", "title": "X", "metric_type": "boolean"},
+    ]}
+    create_resp = client.post("/api/approvals", json={
+        "gate_type": "goal_suggestion", "project_id": project_id,
+        "agent": "goal-suggester", "payload": payload,
+    })
+    approval_id = create_resp.get_json()["id"]
+
+    with patch("heartbeat_dispatcher.dispatch") as mock_dispatch:
+        decision_resp = client.post(
+            f"/api/approvals/{approval_id}/decision",
+            json={"decision": "reject", "from_id": "12345"},
+            headers=_bridge_headers(),
+        )
+    assert decision_resp.status_code == 200, decision_resp.get_json()
+    assert client.get(f"/api/goals?project_id={project_id}").get_json() == []
+    mock_dispatch.assert_not_called()
+
+
+def test_goal_suggestion_skips_item_without_target_value_or_boolean(client):
+    project_id = _create_project(client, suffix="d")
+    payload = {
+        "title": "t", "body": "b",
+        "goals": [
+            {"slug": "no-target", "title": "No target, not boolean", "metric_type": "count"},
+            {"slug": "has-target", "title": "Has target", "metric_type": "count", "target_value": 5},
+        ],
+    }
+    create_resp = client.post("/api/approvals", json={
+        "gate_type": "goal_suggestion", "project_id": project_id,
+        "agent": "goal-suggester", "payload": payload,
+    })
+    approval_id = create_resp.get_json()["id"]
+
+    with patch("heartbeat_dispatcher.dispatch"):
+        decision_resp = client.post(
+            f"/api/approvals/{approval_id}/decision",
+            json={"decision": "approve", "from_id": "12345"},
+            headers=_bridge_headers(),
+        )
+    assert decision_resp.status_code == 200, decision_resp.get_json()
+
+    goals = client.get(f"/api/goals?project_id={project_id}").get_json()
+    assert len(goals) == 1
+    assert goals[0]["title"] == "Has target"
+
+
+def test_decision_double_press_project_suggestion_is_noop_409(client):
+    mission_id = _create_mission(client)
+    payload = {"title": "t", "body": "b", "projects": []}
+    create_resp = client.post("/api/approvals", json={
+        "gate_type": "project_suggestion", "mission_id": mission_id,
+        "agent": "project-planner", "payload": payload,
+    })
+    approval_id = create_resp.get_json()["id"]
+
+    with patch("heartbeat_dispatcher.dispatch"):
+        first = client.post(
+            f"/api/approvals/{approval_id}/decision",
+            json={"decision": "approve", "from_id": "12345"},
+            headers=_bridge_headers(),
+        )
+        assert first.status_code == 200
+        second = client.post(
+            f"/api/approvals/{approval_id}/decision",
+            json={"decision": "approve", "from_id": "12345"},
+            headers=_bridge_headers(),
+        )
+        assert second.status_code == 409
+
+
+# ---------------------------------------------------------------------------
+# Telegram approval body — mission/project context + rendered items list
+# (Telegram audit fix, 2026-07-17): must not depend on the agent's free-text
+# body alone to convey what's actually being proposed.
+# ---------------------------------------------------------------------------
+
+def test_project_suggestion_telegram_body_has_mission_context_and_items(client):
+    mission_id = _create_mission(client)  # title="Evolution MRR"
+    payload = {
+        "title": "Aprovar Projects", "body": "resumo curto",
+        "projects": [
+            {"slug": "evo-ai", "title": "Evo AI", "description": "CRM"},
+            {"slug": "evo-summit", "title": "Evolution Summit"},
+        ],
+    }
+    with patch("notifications.send_approval_request") as mock_send:
+        mock_send.return_value = None
+        resp = client.post("/api/approvals", json={
+            "gate_type": "project_suggestion", "mission_id": mission_id,
+            "agent": "project-planner", "payload": payload,
+        })
+    assert resp.status_code == 201, resp.get_json()
+    mock_send.assert_called_once()
+    _, sent_title, sent_body = mock_send.call_args[0]
+    assert "Evolution MRR" in sent_body
+    assert "Evo AI" in sent_body
+    assert "Evolution Summit" in sent_body
+    assert "resumo curto" in sent_body
+
+
+def test_goal_suggestion_telegram_body_has_project_context_and_items(client):
+    mission_id = _create_mission(client)
+    project_id = _create_project(client, mission_id=mission_id, suffix="ctx")
+    payload = {
+        "title": "Aprovar Goals", "body": "resumo",
+        "goals": [{"slug": "g-ctx-1", "title": "100 clientes pagantes", "metric_type": "count", "target_value": 100}],
+    }
+    with patch("notifications.send_approval_request") as mock_send:
+        mock_send.return_value = None
+        resp = client.post("/api/approvals", json={
+            "gate_type": "goal_suggestion", "project_id": project_id,
+            "agent": "goal-suggester", "payload": payload,
+        })
+    assert resp.status_code == 201, resp.get_json()
+    _, _, sent_body = mock_send.call_args[0]
+    assert "Project ctx" in sent_body
+    assert "100 clientes pagantes" in sent_body
+
+
+def test_decomposition_telegram_body_has_goal_and_project_context(client):
+    mission_id = _create_mission(client)
+    project_id = _create_project(client, mission_id=mission_id, suffix="decomp")
+    with patch("heartbeat_dispatcher.dispatch"):
+        goal_resp = client.post("/api/goals", json={
+            "slug": "g-decomp", "title": "Meta de Decomposição", "project_id": project_id,
+        })
+    goal_id = goal_resp.get_json()["id"]
+
+    payload = {
+        "title": "Aprovar decomposição", "body": "resumo",
+        "tickets": [{"title": "Escrever 5 posts"}, {"title": "Gravar 1 reel"}],
+    }
+    with patch("notifications.send_approval_request") as mock_send:
+        mock_send.return_value = None
+        resp = client.post("/api/approvals", json={
+            "gate_type": "decomposition", "goal_id": goal_id,
+            "agent": "goal-planner", "payload": payload,
+        })
+    assert resp.status_code == 201, resp.get_json()
+    _, _, sent_body = mock_send.call_args[0]
+    assert "Meta de Decomposição" in sent_body
+    assert "Escrever 5 posts" in sent_body
+    assert "Gravar 1 reel" in sent_body
+
+
+def test_telegram_body_skips_items_block_when_payload_has_no_list(client):
+    mission_id = _create_mission(client)
+    payload = {"title": "t", "body": "b"}  # no "projects" key at all
+    with patch("notifications.send_approval_request") as mock_send:
+        mock_send.return_value = None
+        client.post("/api/approvals", json={
+            "gate_type": "project_suggestion", "mission_id": mission_id,
+            "agent": "project-planner", "payload": payload,
+        })
+    _, _, sent_body = mock_send.call_args[0]
+    assert "Itens propostos" not in sent_body
diff --git a/tests/goals/test_approvals_dashboard_view.py b/tests/goals/test_approvals_dashboard_view.py
new file mode 100644
index 000000000..568998478
--- /dev/null
+++ b/tests/goals/test_approvals_dashboard_view.py
@@ -0,0 +1,219 @@
+"""
+tests/goals/test_approvals_dashboard_view.py
+
+Panorama 2026-07-17, item 1 — before this, pending_approvals only ever
+surfaced as a Telegram message with no dashboard fallback. Covers:
+  - GET /api/approvals (list, status filter) and GET /api/approvals/<id>
+    (single, with rendered Missão/Projeto context + structured items).
+  - POST /api/approvals/<id>/dashboard-decision — a SEPARATE decision path
+    from /decision, gated so an agent holding DASHBOARD_API_TOKEN (which
+    maps to an admin current_user via _try_api_token_auth) cannot use it —
+    only a real cookie-authenticated admin session can. This is the same
+    threat V1 already closed for the bridge-token endpoint, generalized to
+    the new one.
+
+Run:
+    cd /path/to/workspace && pytest tests/goals/test_approvals_dashboard_view.py -v
+"""
+
+from __future__ import annotations
+
+import importlib
+import sys
+from pathlib import Path
+from unittest.mock import patch
+
+import pytest
+
+REPO_ROOT = Path(__file__).resolve().parents[2]
+BACKEND_DIR = REPO_ROOT / "dashboard" / "backend"
+sys.path.insert(0, str(BACKEND_DIR))
+
+NOW = "2026-07-17T00:00:00.000000Z"
+
+
+@pytest.fixture
+def app():
+    import flask
+    from flask_login import LoginManager
+    import models as _models
+    importlib.reload(_models)
+
+    _app = flask.Flask(__name__)
+    _app.config["TESTING"] = True
+    _app.config["SECRET_KEY"] = "test-approvals-dashboard-view"
+    _app.config["SQLALCHEMY_DATABASE_URI"] = "sqlite:///:memory:"
+    _app.config["SQLALCHEMY_TRACK_MODIFICATIONS"] = False
+
+    _models.db.init_app(_app)
+
+    _login_manager = LoginManager()
+    _login_manager.init_app(_app)
+
+    @_login_manager.user_loader
+    def _load_user(user_id):
+        return _models.User.query.get(int(user_id))
+
+    @_login_manager.unauthorized_handler
+    def _unauthorized():
+        from flask import jsonify
+        return jsonify({"error": "Authentication required"}), 401
+
+    # Test-only shim for the one thing app.py's real before_request normally
+    # provides: setting g.auth_via_api_token when a request "authenticated"
+    # via the API-token path. Simulated here via a header the real bridge
+    # never sends, so we can prove decide_approval_via_dashboard rejects it.
+    @_app.before_request
+    def _simulate_api_token_auth():
+        from flask import request, g
+        if request.headers.get("X-Simulate-Api-Token-Auth") == "1":
+            g.auth_via_api_token = True
+
+    with _app.app_context():
+        _models.db.create_all()
+        admin = _models.User(username="admin", role="admin")
+        admin.set_password("password")
+        _models.db.session.add(admin)
+        viewer = _models.User(username="viewer", role="viewer")
+        viewer.set_password("password")
+        _models.db.session.add(viewer)
+        _models.db.session.commit()
+
+        mission = _models.Mission(slug="m1", title="Evolution MRR", created_at=NOW, updated_at=NOW)
+        _models.db.session.add(mission)
+        _models.db.session.commit()
+
+    import routes.goals as _goals_routes
+    import routes.approvals as _approvals_routes
+    importlib.reload(_goals_routes)
+    importlib.reload(_approvals_routes)
+    _app.register_blueprint(_goals_routes.bp)
+    _app.register_blueprint(_approvals_routes.bp)
+
+    return _app
+
+
+@pytest.fixture
+def admin_client(app):
+    with app.test_client() as c:
+        with c.session_transaction() as sess:
+            sess["_user_id"] = "1"
+            sess["_fresh"] = True
+        yield c
+
+
+@pytest.fixture(autouse=True)
+def _approval_env(monkeypatch):
+    monkeypatch.setenv("APPROVAL_BRIDGE_TOKEN", "test-bridge-token")
+    monkeypatch.setenv("APPROVAL_APPROVER_IDS", "12345")
+    monkeypatch.delenv("TELEGRAM_BOT_TOKEN", raising=False)
+    monkeypatch.delenv("TELEGRAM_CHAT_ID", raising=False)
+
+
+def _create_project_suggestion_approval(client, mission_id=1) -> int:
+    payload = {
+        "title": "Aprovar Projects", "body": "resumo",
+        "projects": [{"slug": "evo-ai", "title": "Evo AI", "description": "CRM"}],
+    }
+    with patch("notifications.send_approval_request", return_value=None):
+        resp = client.post("/api/approvals", json={
+            "gate_type": "project_suggestion", "mission_id": mission_id,
+            "agent": "project-planner", "payload": payload,
+        })
+    assert resp.status_code == 201, resp.get_json()
+    return resp.get_json()["id"]
+
+
+# ---------------------------------------------------------------------------
+# GET /api/approvals — list + single
+# ---------------------------------------------------------------------------
+
+def test_list_defaults_to_pending_only(admin_client):
+    approval_id = _create_project_suggestion_approval(admin_client)
+
+    resp = admin_client.get("/api/approvals")
+    assert resp.status_code == 200
+    approvals = resp.get_json()["approvals"]
+    assert any(a["id"] == approval_id for a in approvals)
+    assert all(a["status"] == "pending" for a in approvals)
+
+
+def test_list_status_all_includes_decided(admin_client):
+    approval_id = _create_project_suggestion_approval(admin_client)
+    with patch("heartbeat_dispatcher.dispatch"):
+        admin_client.post(f"/api/approvals/{approval_id}/dashboard-decision", json={"decision": "reject"})
+
+    pending = admin_client.get("/api/approvals?status=pending").get_json()["approvals"]
+    assert not any(a["id"] == approval_id for a in pending)
+
+    all_approvals = admin_client.get("/api/approvals?status=all").get_json()["approvals"]
+    assert any(a["id"] == approval_id and a["status"] == "rejected" for a in all_approvals)
+
+
+def test_get_single_includes_context_and_items_preview(admin_client):
+    approval_id = _create_project_suggestion_approval(admin_client)
+    resp = admin_client.get(f"/api/approvals/{approval_id}")
+    assert resp.status_code == 200
+    body = resp.get_json()
+    assert body["context"] == "Missão: Evolution MRR"
+    assert "Evo AI" in body["items_preview"]
+
+
+def test_get_single_404_for_missing(admin_client):
+    resp = admin_client.get("/api/approvals/999999")
+    assert resp.status_code == 404
+
+
+# ---------------------------------------------------------------------------
+# POST /api/approvals/<id>/dashboard-decision
+# ---------------------------------------------------------------------------
+
+def test_dashboard_decision_approve_by_admin_session_works(admin_client):
+    approval_id = _create_project_suggestion_approval(admin_client)
+    with patch("heartbeat_dispatcher.dispatch"):
+        resp = admin_client.post(f"/api/approvals/{approval_id}/dashboard-decision", json={"decision": "approve"})
+    assert resp.status_code == 200, resp.get_json()
+
+    detail = admin_client.get(f"/api/approvals/{approval_id}").get_json()
+    assert detail["status"] == "approved"
+    assert detail["decided_by"] == "dashboard:admin"
+
+
+def test_dashboard_decision_rejects_api_token_auth(admin_client):
+    """The core V1-style protection: a caller that reached this handler via
+    DASHBOARD_API_TOKEN (simulated here — see the app fixture's before_request
+    shim) must be rejected even though it maps to an admin current_user."""
+    approval_id = _create_project_suggestion_approval(admin_client)
+    resp = admin_client.post(
+        f"/api/approvals/{approval_id}/dashboard-decision",
+        json={"decision": "approve"},
+        headers={"X-Simulate-Api-Token-Auth": "1"},
+    )
+    assert resp.status_code == 403
+
+    detail = admin_client.get(f"/api/approvals/{approval_id}").get_json()
+    assert detail["status"] == "pending"  # untouched
+
+
+def test_dashboard_decision_rejects_non_admin_role(admin_client):
+    approval_id = _create_project_suggestion_approval(admin_client)
+    with admin_client.session_transaction() as sess:
+        sess["_user_id"] = "2"  # switch to the viewer user created in the app fixture
+        sess["_fresh"] = True
+    resp = admin_client.post(f"/api/approvals/{approval_id}/dashboard-decision", json={"decision": "approve"})
+    assert resp.status_code == 403
+
+
+def test_dashboard_decision_double_press_is_noop_409(admin_client):
+    approval_id = _create_project_suggestion_approval(admin_client)
+    with patch("heartbeat_dispatcher.dispatch"):
+        first = admin_client.post(f"/api/approvals/{approval_id}/dashboard-decision", json={"decision": "approve"})
+        assert first.status_code == 200
+        second = admin_client.post(f"/api/approvals/{approval_id}/dashboard-decision", json={"decision": "approve"})
+    assert second.status_code == 409
+
+
+def test_dashboard_decision_invalid_decision_value_400(admin_client):
+    approval_id = _create_project_suggestion_approval(admin_client)
+    resp = admin_client.post(f"/api/approvals/{approval_id}/dashboard-decision", json={"decision": "maybe"})
+    assert resp.status_code == 400
diff --git a/tests/goals/test_completion_rollup.py b/tests/goals/test_completion_rollup.py
new file mode 100644
index 000000000..e9f9df8fd
--- /dev/null
+++ b/tests/goals/test_completion_rollup.py
@@ -0,0 +1,437 @@
+"""
+tests/goals/test_completion_rollup.py
+
+ultraplan spec (2026-07-17) — completed_at/started_at columns on
+missions/projects/goals/goal_tasks, plus the automatic Project->Goal
+completion rollup, verified on both data-access paths:
+
+  - ORM path: routes/goals.py::patch_goal / patch_project / patch_goal_task
+    and the _maybe_complete_project() helper.
+  - Raw-SQL path: heartbeat_outcome.py::_recompute_goal_from_tickets and
+    _maybe_complete_project_raw() (the real-world path, via ticket
+    resolution).
+
+Run:
+    cd /path/to/workspace && pytest tests/goals/test_completion_rollup.py -v
+"""
+
+from __future__ import annotations
+
+import importlib
+import sqlite3
+import sys
+import uuid
+from pathlib import Path
+from unittest.mock import patch
+
+import pytest
+
+REPO_ROOT = Path(__file__).resolve().parents[2]
+BACKEND_DIR = REPO_ROOT / "dashboard" / "backend"
+sys.path.insert(0, str(BACKEND_DIR))
+
+import heartbeat_outcome  # noqa: E402
+
+NOW = "2026-07-17T00:00:00.000000Z"
+
+
+# ---------------------------------------------------------------------------
+# Raw-sqlite fixture (mirrors tests/goals/test_goal_ticket_rollup.py's conn
+# fixture, extended with the completed_at/started_at columns and the
+# projects.status CHECK this migration adds).
+# ---------------------------------------------------------------------------
+
+@pytest.fixture
+def conn(tmp_path):
+    db_file = tmp_path / "rollup_test.db"
+    c = sqlite3.connect(str(db_file))
+    c.row_factory = sqlite3.Row
+    c.executescript(
+        """
+        CREATE TABLE projects (
+            id INTEGER PRIMARY KEY AUTOINCREMENT,
+            slug TEXT UNIQUE NOT NULL,
+            title TEXT NOT NULL,
+            status TEXT NOT NULL DEFAULT 'active'
+                CHECK(status IN ('active','completed','on-hold','cancelled')),
+            completed_at TEXT,
+            created_at TEXT NOT NULL,
+            updated_at TEXT NOT NULL
+        );
+        CREATE TABLE goals (
+            id INTEGER PRIMARY KEY AUTOINCREMENT,
+            slug TEXT UNIQUE NOT NULL,
+            project_id INTEGER NOT NULL REFERENCES projects(id) ON DELETE CASCADE,
+            title TEXT NOT NULL,
+            metric_type TEXT NOT NULL DEFAULT 'count',
+            target_value REAL NOT NULL DEFAULT 1.0,
+            current_value REAL NOT NULL DEFAULT 0.0,
+            status TEXT NOT NULL DEFAULT 'active',
+            completed_at TEXT,
+            parent_goal_id INTEGER REFERENCES goals(id) ON DELETE SET NULL,
+            decomposition_state TEXT,
+            created_at TEXT NOT NULL,
+            updated_at TEXT NOT NULL
+        );
+        CREATE TABLE goal_tasks (
+            id INTEGER PRIMARY KEY AUTOINCREMENT,
+            goal_id INTEGER REFERENCES goals(id) ON DELETE SET NULL,
+            title TEXT NOT NULL,
+            status TEXT NOT NULL DEFAULT 'open',
+            started_at TEXT,
+            completed_at TEXT,
+            created_at TEXT NOT NULL,
+            updated_at TEXT NOT NULL
+        );
+        CREATE TABLE tickets (
+            id TEXT PRIMARY KEY,
+            title TEXT NOT NULL,
+            status TEXT NOT NULL DEFAULT 'open',
+            goal_id INTEGER REFERENCES goals(id) ON DELETE SET NULL,
+            task_id INTEGER REFERENCES goal_tasks(id) ON DELETE SET NULL,
+            due_date TEXT,
+            requires_human_approval INTEGER NOT NULL DEFAULT 0,
+            blocked_reason TEXT,
+            created_at TEXT NOT NULL,
+            updated_at TEXT NOT NULL,
+            resolved_at TEXT
+        );
+        CREATE TABLE ticket_comments (
+            id TEXT PRIMARY KEY,
+            ticket_id TEXT NOT NULL REFERENCES tickets(id) ON DELETE CASCADE,
+            author TEXT NOT NULL,
+            body TEXT NOT NULL,
+            mentions TEXT,
+            created_at TEXT NOT NULL
+        );
+        CREATE TABLE ticket_activity (
+            id TEXT PRIMARY KEY,
+            ticket_id TEXT NOT NULL REFERENCES tickets(id) ON DELETE CASCADE,
+            actor TEXT NOT NULL,
+            action TEXT NOT NULL,
+            payload TEXT,
+            created_at TEXT NOT NULL
+        );
+        """
+    )
+    c.commit()
+    yield c
+    c.close()
+
+
+def _make_project(conn, slug="proj-rollup") -> int:
+    conn.execute(
+        "INSERT INTO projects (slug, title, created_at, updated_at) VALUES (?, ?, ?, ?)",
+        (slug, "Rollup Test Project", NOW, NOW),
+    )
+    conn.commit()
+    return conn.execute("SELECT id FROM projects WHERE slug = ?", (slug,)).fetchone()[0]
+
+
+def _make_goal(conn, project_id: int, slug: str, target_value=1.0) -> int:
+    conn.execute(
+        "INSERT INTO goals (slug, project_id, title, target_value, current_value, status, "
+        "created_at, updated_at) VALUES (?, ?, ?, ?, 0.0, 'active', ?, ?)",
+        (slug, project_id, f"Goal {slug}", target_value, NOW, NOW),
+    )
+    conn.commit()
+    return conn.execute("SELECT id FROM goals WHERE slug = ?", (slug,)).fetchone()[0]
+
+
+def _make_ticket(conn, goal_id: int) -> str:
+    tid = str(uuid.uuid4())
+    conn.execute(
+        "INSERT INTO tickets (id, title, status, goal_id, created_at, updated_at) "
+        "VALUES (?, ?, 'open', ?, ?, ?)",
+        (tid, f"Ticket {tid[:8]}", goal_id, NOW, NOW),
+    )
+    conn.commit()
+    return tid
+
+
+def _project_row(conn, project_id: int):
+    return conn.execute(
+        "SELECT status, completed_at FROM projects WHERE id = ?", (project_id,)
+    ).fetchone()
+
+
+def _goal_row(conn, goal_id: int):
+    return conn.execute(
+        "SELECT status, completed_at FROM goals WHERE id = ?", (goal_id,)
+    ).fetchone()
+
+
+# ---------------------------------------------------------------------------
+# Raw-SQL path — _recompute_goal_from_tickets / _maybe_complete_project_raw
+# ---------------------------------------------------------------------------
+
+def test_goal_achieved_via_tickets_sets_completed_at(conn):
+    project_id = _make_project(conn, "proj-a")
+    goal_id = _make_goal(conn, project_id, "goal-a", target_value=1.0)
+    ticket = _make_ticket(conn, goal_id)
+
+    heartbeat_outcome._move_ticket(ticket, "resolved", "bolt-executor", "done", conn)
+
+    row = _goal_row(conn, goal_id)
+    assert row["status"] == "achieved"
+    assert row["completed_at"] is not None
+
+
+def test_goal_reopened_clears_completed_at(conn):
+    project_id = _make_project(conn, "proj-b")
+    goal_id = _make_goal(conn, project_id, "goal-b", target_value=1.0)
+    ticket = _make_ticket(conn, goal_id)
+
+    heartbeat_outcome._move_ticket(ticket, "resolved", "bolt-executor", "done", conn)
+    assert _goal_row(conn, goal_id)["completed_at"] is not None
+
+    heartbeat_outcome._move_ticket(ticket, "in_progress", "bolt-executor", "reopened", conn)
+    row = _goal_row(conn, goal_id)
+    assert row["status"] == "active"
+    assert row["completed_at"] is None
+
+
+def test_single_goal_project_completes_when_goal_achieved(conn):
+    project_id = _make_project(conn, "proj-single")
+    goal_id = _make_goal(conn, project_id, "goal-single", target_value=1.0)
+    ticket = _make_ticket(conn, goal_id)
+
+    heartbeat_outcome._move_ticket(ticket, "resolved", "bolt-executor", "done", conn)
+
+    proj = _project_row(conn, project_id)
+    assert proj["status"] == "completed"
+    assert proj["completed_at"] is not None
+
+
+def test_project_waits_for_all_goals_to_go_terminal(conn):
+    project_id = _make_project(conn, "proj-multi")
+    goal_1 = _make_goal(conn, project_id, "goal-multi-1", target_value=1.0)
+    goal_2 = _make_goal(conn, project_id, "goal-multi-2", target_value=1.0)
+    ticket_1 = _make_ticket(conn, goal_1)
+
+    heartbeat_outcome._move_ticket(ticket_1, "resolved", "bolt-executor", "done", conn)
+    # goal_2 still active -> project must NOT complete yet
+    assert _project_row(conn, project_id)["status"] == "active"
+
+    ticket_2 = _make_ticket(conn, goal_2)
+    heartbeat_outcome._move_ticket(ticket_2, "resolved", "bolt-executor", "done", conn)
+
+    proj = _project_row(conn, project_id)
+    assert proj["status"] == "completed"
+    assert proj["completed_at"] is not None
+
+
+def test_cancelled_goal_counts_as_terminal_for_rollup(conn):
+    project_id = _make_project(conn, "proj-cancel")
+    goal_1 = _make_goal(conn, project_id, "goal-cancel-1", target_value=1.0)
+    goal_2 = _make_goal(conn, project_id, "goal-cancel-2", target_value=1.0)
+    conn.execute("UPDATE goals SET status = 'cancelled' WHERE id = ?", (goal_2,))
+    conn.commit()
+
+    ticket_1 = _make_ticket(conn, goal_1)
+    heartbeat_outcome._move_ticket(ticket_1, "resolved", "bolt-executor", "done", conn)
+
+    proj = _project_row(conn, project_id)
+    assert proj["status"] == "completed"
+
+
+def test_already_completed_project_is_not_touched_again(conn):
+    """A second call must not clobber completed_at with a fresh timestamp."""
+    project_id = _make_project(conn, "proj-idempotent")
+    goal_id = _make_goal(conn, project_id, "goal-idempotent", target_value=1.0)
+    ticket = _make_ticket(conn, goal_id)
+    heartbeat_outcome._move_ticket(ticket, "resolved", "bolt-executor", "done", conn)
+
+    first_completed_at = _project_row(conn, project_id)["completed_at"]
+    heartbeat_outcome._maybe_complete_project_raw(project_id, conn)
+    conn.commit()
+
+    assert _project_row(conn, project_id)["completed_at"] == first_completed_at
+
+
+def test_project_rollup_never_raises_for_missing_project_or_goals(conn):
+    heartbeat_outcome._maybe_complete_project_raw(999999, conn)  # no such project
+    project_id = _make_project(conn, "proj-empty")
+    heartbeat_outcome._maybe_complete_project_raw(project_id, conn)  # no goals under it
+    assert _project_row(conn, project_id)["status"] == "active"
+
+
+# ---------------------------------------------------------------------------
+# ORM path — routes/goals.py (patch_project / patch_goal / patch_goal_task)
+# ---------------------------------------------------------------------------
+
+@pytest.fixture
+def app():
+    import flask
+    from flask_login import LoginManager
+    import models as _models
+    importlib.reload(_models)
+
+    _app = flask.Flask(__name__)
+    _app.config["TESTING"] = True
+    _app.config["SECRET_KEY"] = "test-completion-rollup"
+    _app.config["SQLALCHEMY_DATABASE_URI"] = "sqlite:///:memory:"
+    _app.config["SQLALCHEMY_TRACK_MODIFICATIONS"] = False
+
+    _models.db.init_app(_app)
+
+    _login_manager = LoginManager()
+    _login_manager.init_app(_app)
+
+    @_login_manager.user_loader
+    def _load_user(user_id):
+        return _models.User.query.get(int(user_id))
+
+    @_login_manager.unauthorized_handler
+    def _unauthorized():
+        from flask import jsonify
+        return jsonify({"error": "Authentication required"}), 401
+
+    with _app.app_context():
+        _models.db.create_all()
+        admin = _models.User(username="admin", role="admin")
+        admin.set_password("password")
+        _models.db.session.add(admin)
+
+        mission = _models.Mission(slug="m1", title="Mission", created_at=NOW, updated_at=NOW)
+        _models.db.session.add(mission)
+        _models.db.session.commit()
+
+    import routes.goals as _goals_routes
+    importlib.reload(_goals_routes)
+    _app.register_blueprint(_goals_routes.bp)
+
+    return _app
+
+
+@pytest.fixture
+def client(app):
+    with app.test_client() as c:
+        with c.session_transaction() as sess:
+            sess["_user_id"] = "1"
+            sess["_fresh"] = True
+        yield c
+
+
+@pytest.fixture(autouse=True)
+def _no_dispatch_no_mempalace(monkeypatch):
+    # Every create_project()/create_goal() dispatches a heartbeat trigger and
+    # syncs MemPalace as side effects unrelated to this file's scope — mock
+    # both so tests only exercise the completed_at/started_at/rollup logic.
+    monkeypatch.setattr("heartbeat_dispatcher.dispatch", lambda *a, **k: None, raising=False)
+
+
+def _create_project(client, slug="p1", mission_id=1):
+    with patch("heartbeat_dispatcher.dispatch"), patch("routes.goals._sync_mempalace_for_project"):
+        resp = client.post("/api/projects", json={
+            "slug": slug, "title": f"Project {slug}", "mission_id": mission_id,
+        })
+    assert resp.status_code == 201, resp.get_json()
+    return resp.get_json()["id"]
+
+
+def _create_goal(client, project_id, slug, target_value=1.0):
+    with patch("heartbeat_dispatcher.dispatch"):
+        resp = client.post("/api/goals", json={
+            "slug": slug, "title": f"Goal {slug}", "project_id": project_id,
+            "target_value": target_value,
+        })
+    assert resp.status_code == 201, resp.get_json()
+    return resp.get_json()["id"]
+
+
+def test_patch_project_sets_completed_at_on_terminal_status(client):
+    project_id = _create_project(client, "orm-p1")
+    with patch("routes.goals._sync_mempalace_for_project"):
+        resp = client.patch(f"/api/projects/{project_id}", json={"status": "completed"})
+    assert resp.status_code == 200, resp.get_json()
+    body = resp.get_json()
+    assert body["status"] == "completed"
+    assert body["completed_at"] is not None
+
+
+def test_patch_project_clears_completed_at_on_reopen(client):
+    project_id = _create_project(client, "orm-p2")
+    with patch("routes.goals._sync_mempalace_for_project"):
+        client.patch(f"/api/projects/{project_id}", json={"status": "completed"})
+        resp = client.patch(f"/api/projects/{project_id}", json={"status": "active"})
+    assert resp.get_json()["completed_at"] is None
+
+
+def test_patch_goal_terminal_transition_triggers_project_rollup(client):
+    project_id = _create_project(client, "orm-p3")
+    goal_id = _create_goal(client, project_id, "orm-g3")
+
+    resp = client.patch(f"/api/goals/{goal_id}", json={"status": "achieved"})
+    assert resp.status_code == 200, resp.get_json()
+    assert resp.get_json()["completed_at"] is not None
+
+    with patch("routes.goals._sync_mempalace_for_project"):
+        project = client.get(f"/api/projects/{project_id}").get_json()
+    assert project["status"] == "completed"
+    assert project["completed_at"] is not None
+
+
+def test_patch_goal_rollup_waits_for_sibling_goals(client):
+    project_id = _create_project(client, "orm-p4")
+    goal_1 = _create_goal(client, project_id, "orm-g4-1")
+    goal_2 = _create_goal(client, project_id, "orm-g4-2")
+
+    client.patch(f"/api/goals/{goal_1}", json={"status": "achieved"})
+    with patch("routes.goals._sync_mempalace_for_project"):
+        project = client.get(f"/api/projects/{project_id}").get_json()
+    assert project["status"] == "active"
+
+    client.patch(f"/api/goals/{goal_2}", json={"status": "cancelled"})
+    with patch("routes.goals._sync_mempalace_for_project"):
+        project = client.get(f"/api/projects/{project_id}").get_json()
+    assert project["status"] == "completed"
+
+
+def test_patch_goal_reopen_clears_completed_at(client):
+    project_id = _create_project(client, "orm-p5")
+    goal_id = _create_goal(client, project_id, "orm-g5")
+
+    client.patch(f"/api/goals/{goal_id}", json={"status": "achieved"})
+    resp = client.patch(f"/api/goals/{goal_id}", json={"status": "active"})
+    assert resp.get_json()["completed_at"] is None
+
+
+def test_patch_goal_task_sets_started_at_once_and_completed_at(client):
+    import models as _models
+    with client.application.app_context():
+        t = _models.GoalTask(title="Task X", status="open", created_at=NOW, updated_at=NOW)
+        _models.db.session.add(t)
+        _models.db.session.commit()
+        task_id = t.id
+
+    resp = client.patch(f"/api/goal-tasks/{task_id}", json={"status": "in_progress"})
+    body = resp.get_json()
+    assert body["started_at"] is not None
+    first_started_at = body["started_at"]
+
+    resp = client.patch(f"/api/goal-tasks/{task_id}", json={"status": "done"})
+    body = resp.get_json()
+    assert body["completed_at"] is not None
+
+    # Reopen then re-complete: started_at must not move, completed_at clears then resets.
+    client.patch(f"/api/goal-tasks/{task_id}", json={"status": "open"})
+    resp = client.patch(f"/api/goal-tasks/{task_id}", json={"status": "in_progress"})
+    body = resp.get_json()
+    assert body["started_at"] == first_started_at
+
+    resp = client.patch(f"/api/goal-tasks/{task_id}", json={"status": "done"})
+    assert resp.get_json()["completed_at"] is not None
+
+
+def test_patch_goal_task_completed_at_clears_on_reopen(client):
+    import models as _models
+    with client.application.app_context():
+        t = _models.GoalTask(title="Task Y", status="done", created_at=NOW, updated_at=NOW,
+                              completed_at=NOW)
+        _models.db.session.add(t)
+        _models.db.session.commit()
+        task_id = t.id
+
+    resp = client.patch(f"/api/goal-tasks/{task_id}", json={"status": "open"})
+    assert resp.get_json()["completed_at"] is None
diff --git a/tests/goals/test_create_goal_script.py b/tests/goals/test_create_goal_script.py
new file mode 100644
index 000000000..28f308d25
--- /dev/null
+++ b/tests/goals/test_create_goal_script.py
@@ -0,0 +1,57 @@
+"""Regression coverage for the /create-goal helper's API write path."""
+
+from __future__ import annotations
+
+import argparse
+import importlib.util
+from pathlib import Path
+from unittest.mock import Mock, patch
+
+
+REPO_ROOT = Path(__file__).resolve().parents[2]
+SCRIPT = REPO_ROOT / ".claude/skills/create-goal/scripts/nexus_goal.py"
+SPEC = importlib.util.spec_from_file_location("nexus_goal_script", SCRIPT)
+nexus_goal = importlib.util.module_from_spec(SPEC)
+assert SPEC.loader is not None
+SPEC.loader.exec_module(nexus_goal)
+
+
+def test_create_goal_posts_to_dashboard_api():
+    conn = Mock()
+    conn.execute.return_value.fetchone.return_value = None
+    args = argparse.Namespace(
+        slug="api-goal",
+        title="Goal via API",
+        description="Must wake goal-planner",
+        project_slug="global",
+        project_title="Global",
+        mission_slug=None,
+        metric_type="count",
+        target_metric="tickets",
+        target_value=3,
+        current_value=0,
+        due_date="2026-08-01",
+        status="active",
+    )
+    project = {"id": 7, "slug": "global", "created": False}
+    api_goal = {"id": 11, "slug": "api-goal", "title": "Goal via API"}
+
+    with patch.object(nexus_goal, "ensure_project", return_value=project), \
+         patch.object(nexus_goal, "api_post", return_value=api_goal) as mock_post:
+        result = nexus_goal.create_goal(conn, args)
+
+    mock_post.assert_called_once_with("/api/goals", {
+        "slug": "api-goal",
+        "project_id": 7,
+        "title": "Goal via API",
+        "description": "Must wake goal-planner",
+        "target_metric": "tickets",
+        "metric_type": "count",
+        "target_value": 3,
+        "current_value": 0,
+        "due_date": "2026-08-01",
+        "status": "active",
+    })
+    assert result["id"] == 11
+    assert result["created"] is True
+    assert result["project"] == project
diff --git a/tests/goals/test_goal_ticket_rollup.py b/tests/goals/test_goal_ticket_rollup.py
new file mode 100644
index 000000000..4c30d7935
--- /dev/null
+++ b/tests/goals/test_goal_ticket_rollup.py
@@ -0,0 +1,263 @@
+"""
+tests/goals/test_goal_ticket_rollup.py
+
+goal-ticket-unification (Steps 2+3) — single source of truth for
+goals.current_value, verified against a raw sqlite3 DB carrying the migrated
+schema (tickets.goal_id/task_id/status, goals.target_value/current_value).
+
+Proves:
+  - A goal with target_value=2, resolved via two tickets (one goal_id-only,
+    one goal_id+task_id — the mixed population that used to be triple/
+    quadruple-counted), ends at current_value == 2 exactly.
+  - Reopening + re-resolving a ticket is idempotent (stays at 2, never 3).
+  - trg_task_done_updates_goal does not exist after the migration runs, and
+    is not recreated by a second "boot" of the migration.
+
+Run:
+    cd /path/to/workspace && pytest tests/goals/test_goal_ticket_rollup.py -v
+"""
+
+from __future__ import annotations
+
+import sqlite3
+import sys
+import uuid
+from pathlib import Path
+
+import pytest
+
+REPO_ROOT = Path(__file__).resolve().parents[2]
+BACKEND_DIR = REPO_ROOT / "dashboard" / "backend"
+sys.path.insert(0, str(BACKEND_DIR))
+
+import heartbeat_outcome  # noqa: E402
+
+
+NOW = "2026-07-16T00:00:00.000000Z"
+
+
+@pytest.fixture
+def conn(tmp_path):
+    """Temp sqlite3 DB carrying the post-migration schema (goals + tickets)."""
+    db_file = tmp_path / "rollup_test.db"
+    c = sqlite3.connect(str(db_file))
+    c.row_factory = sqlite3.Row
+    c.executescript(
+        """
+        CREATE TABLE projects (
+            id INTEGER PRIMARY KEY AUTOINCREMENT,
+            slug TEXT UNIQUE NOT NULL,
+            title TEXT NOT NULL,
+            status TEXT NOT NULL DEFAULT 'active',
+            completed_at TEXT,
+            created_at TEXT NOT NULL,
+            updated_at TEXT NOT NULL
+        );
+        CREATE TABLE goals (
+            id INTEGER PRIMARY KEY AUTOINCREMENT,
+            slug TEXT UNIQUE NOT NULL,
+            project_id INTEGER NOT NULL REFERENCES projects(id) ON DELETE CASCADE,
+            title TEXT NOT NULL,
+            metric_type TEXT NOT NULL DEFAULT 'count',
+            target_value REAL NOT NULL DEFAULT 1.0,
+            current_value REAL NOT NULL DEFAULT 0.0,
+            status TEXT NOT NULL DEFAULT 'active',
+            completed_at TEXT,
+            parent_goal_id INTEGER REFERENCES goals(id) ON DELETE SET NULL,
+            decomposition_state TEXT,
+            created_at TEXT NOT NULL,
+            updated_at TEXT NOT NULL
+        );
+        CREATE TABLE goal_tasks (
+            id INTEGER PRIMARY KEY AUTOINCREMENT,
+            goal_id INTEGER REFERENCES goals(id) ON DELETE SET NULL,
+            title TEXT NOT NULL,
+            status TEXT NOT NULL DEFAULT 'open',
+            created_at TEXT NOT NULL,
+            updated_at TEXT NOT NULL
+        );
+        CREATE TABLE tickets (
+            id TEXT PRIMARY KEY,
+            title TEXT NOT NULL,
+            status TEXT NOT NULL DEFAULT 'open',
+            goal_id INTEGER REFERENCES goals(id) ON DELETE SET NULL,
+            task_id INTEGER REFERENCES goal_tasks(id) ON DELETE SET NULL,
+            due_date TEXT,
+            requires_human_approval INTEGER NOT NULL DEFAULT 0,
+            blocked_reason TEXT,
+            created_at TEXT NOT NULL,
+            updated_at TEXT NOT NULL,
+            resolved_at TEXT
+        );
+        CREATE TABLE ticket_comments (
+            id TEXT PRIMARY KEY,
+            ticket_id TEXT NOT NULL REFERENCES tickets(id) ON DELETE CASCADE,
+            author TEXT NOT NULL,
+            body TEXT NOT NULL,
+            mentions TEXT,
+            created_at TEXT NOT NULL
+        );
+        CREATE TABLE ticket_activity (
+            id TEXT PRIMARY KEY,
+            ticket_id TEXT NOT NULL REFERENCES tickets(id) ON DELETE CASCADE,
+            actor TEXT NOT NULL,
+            action TEXT NOT NULL,
+            payload TEXT,
+            created_at TEXT NOT NULL
+        );
+        """
+    )
+    c.commit()
+    yield c
+    c.close()
+
+
+def _make_goal(conn, target_value=2.0) -> int:
+    conn.execute(
+        "INSERT INTO projects (slug, title, created_at, updated_at) VALUES (?, ?, ?, ?)",
+        ("proj-rollup", "Rollup Test Project", NOW, NOW),
+    )
+    project_id = conn.execute("SELECT id FROM projects WHERE slug = 'proj-rollup'").fetchone()[0]
+    conn.execute(
+        "INSERT INTO goals (slug, project_id, title, target_value, current_value, status, "
+        "created_at, updated_at) VALUES (?, ?, ?, ?, 0.0, 'active', ?, ?)",
+        ("goal-rollup", project_id, "Rollup Test Goal", target_value, NOW, NOW),
+    )
+    conn.commit()
+    return conn.execute("SELECT id FROM goals WHERE slug = 'goal-rollup'").fetchone()[0]
+
+
+def _make_ticket(conn, goal_id: int, task_id: int | None = None) -> str:
+    tid = str(uuid.uuid4())
+    conn.execute(
+        "INSERT INTO tickets (id, title, status, goal_id, task_id, created_at, updated_at) "
+        "VALUES (?, ?, 'open', ?, ?, ?, ?)",
+        (tid, f"Ticket {tid[:8]}", goal_id, task_id, NOW, NOW),
+    )
+    conn.commit()
+    return tid
+
+
+def _current_value(conn, goal_id: int) -> float:
+    return conn.execute("SELECT current_value FROM goals WHERE id = ?", (goal_id,)).fetchone()[0]
+
+
+def _goal_status(conn, goal_id: int) -> str:
+    return conn.execute("SELECT status FROM goals WHERE id = ?", (goal_id,)).fetchone()[0]
+
+
+# ---------------------------------------------------------------------------
+# AC1 — single source of truth, mixed population, idempotent
+# ---------------------------------------------------------------------------
+
+def test_two_tickets_resolve_to_exactly_target(conn):
+    """goal_id-only ticket + goal_id+task_id ticket, both resolved -> current_value == 2 exactly."""
+    goal_id = _make_goal(conn, target_value=2.0)
+
+    conn.execute(
+        "INSERT INTO goal_tasks (goal_id, title, status, created_at, updated_at) "
+        "VALUES (?, 'legacy task', 'open', ?, ?)",
+        (goal_id, NOW, NOW),
+    )
+    conn.commit()
+    task_id = conn.execute("SELECT id FROM goal_tasks WHERE goal_id = ?", (goal_id,)).fetchone()[0]
+
+    ticket_a = _make_ticket(conn, goal_id)  # goal_id only
+    ticket_b = _make_ticket(conn, goal_id, task_id=task_id)  # goal_id + task_id (mixed population)
+
+    assert _current_value(conn, goal_id) == 0.0
+
+    heartbeat_outcome._move_ticket(ticket_a, "resolved", "bolt-executor", "done", conn)
+    assert _current_value(conn, goal_id) == 1.0
+
+    heartbeat_outcome._move_ticket(ticket_b, "resolved", "bolt-executor", "done", conn)
+    assert _current_value(conn, goal_id) == 2.0  # exactly 2, not 3, not 4
+    assert _goal_status(conn, goal_id) == "achieved"
+
+
+def test_reopen_and_reresolve_is_idempotent(conn):
+    """Reopening a resolved ticket and resolving it again must not double-count."""
+    goal_id = _make_goal(conn, target_value=2.0)
+    ticket_a = _make_ticket(conn, goal_id)
+    ticket_b = _make_ticket(conn, goal_id)
+
+    heartbeat_outcome._move_ticket(ticket_a, "resolved", "bolt-executor", "done", conn)
+    heartbeat_outcome._move_ticket(ticket_b, "resolved", "bolt-executor", "done", conn)
+    assert _current_value(conn, goal_id) == 2.0
+
+    # Reopen one of the two resolved tickets — count must drop back to 1.
+    heartbeat_outcome._move_ticket(ticket_a, "in_progress", "bolt-executor", "reopened", conn)
+    assert _current_value(conn, goal_id) == 1.0
+    assert _goal_status(conn, goal_id) == "active"  # dropped back below target
+
+    # Resolve it again — must land back on 2, not 3.
+    heartbeat_outcome._move_ticket(ticket_a, "resolved", "bolt-executor", "done again", conn)
+    assert _current_value(conn, goal_id) == 2.0
+
+    # Run it a third time for good measure (pure idempotency, no transition).
+    heartbeat_outcome._recompute_goal_from_tickets(goal_id, conn)
+    assert _current_value(conn, goal_id) == 2.0
+
+
+def test_recompute_ignores_tickets_without_goal(conn):
+    heartbeat_outcome._recompute_goal_from_tickets(None, conn)  # must not raise
+    heartbeat_outcome._recompute_goal_from_tickets(999999, conn)  # non-existent goal, must not raise
+
+
+# ---------------------------------------------------------------------------
+# 1e — trigger must not survive a migration re-run ("reboot")
+# ---------------------------------------------------------------------------
+
+def test_trigger_absent_and_not_recreated_on_reboot(conn):
+    # Simulate a DB that still had the legacy trigger before this migration ran.
+    conn.executescript(
+        """
+        CREATE TRIGGER IF NOT EXISTS trg_task_done_updates_goal
+        AFTER UPDATE OF status ON goal_tasks
+        WHEN NEW.goal_id IS NOT NULL AND NEW.status = 'done' AND OLD.status != 'done'
+        BEGIN
+          UPDATE goals SET current_value = current_value + 1, updated_at = datetime('now') WHERE id = NEW.goal_id;
+        END;
+        """
+    )
+    conn.commit()
+    assert conn.execute(
+        "SELECT name FROM sqlite_master WHERE type='trigger' AND name='trg_task_done_updates_goal'"
+    ).fetchone() is not None
+
+    # Apply the migration's DROP (mirrors app.py's `_cur.execute("DROP TRIGGER IF EXISTS ...")`).
+    conn.execute("DROP TRIGGER IF EXISTS trg_task_done_updates_goal")
+    conn.commit()
+    assert conn.execute(
+        "SELECT name FROM sqlite_master WHERE type='trigger' AND name='trg_task_done_updates_goal'"
+    ).fetchone() is None
+
+    # Simulate a second app boot: the "Always ensure view exists" executescript
+    # in app.py no longer contains a CREATE TRIGGER statement (only CREATE VIEW
+    # goal_progress_v) — reproduce that exact statement here and confirm it
+    # does NOT bring the trigger back.
+    conn.executescript(
+        """
+        CREATE VIEW IF NOT EXISTS goal_progress_v AS
+        SELECT g.id as goal_id, g.target_value,
+               COUNT(t.id) as total_tasks,
+               COUNT(CASE WHEN t.status='done' THEN 1 END) as done_tasks
+        FROM goals g LEFT JOIN goal_tasks t ON t.goal_id = g.id
+        GROUP BY g.id;
+        """
+    )
+    conn.commit()
+    assert conn.execute(
+        "SELECT name FROM sqlite_master WHERE type='trigger' AND name='trg_task_done_updates_goal'"
+    ).fetchone() is None
+
+
+def test_app_py_boot_executescript_has_no_create_trigger():
+    """Static check: app.py's idempotent boot block must not contain the trigger DDL."""
+    app_py = (BACKEND_DIR / "app.py").read_text()
+    marker = "Always ensure view exists"
+    assert marker in app_py, "expected the updated boot-block comment to be present"
+    start = app_py.index(marker)
+    end = app_py.index("_conn.commit()", start)
+    boot_block = app_py[start:end]
+    assert "CREATE TRIGGER" not in boot_block
diff --git a/tests/goals/test_publish_approval_content.py b/tests/goals/test_publish_approval_content.py
new file mode 100644
index 000000000..3baf82e1e
--- /dev/null
+++ b/tests/goals/test_publish_approval_content.py
@@ -0,0 +1,116 @@
+"""
+tests/goals/test_publish_approval_content.py
+
+Telegram-approval audit fix (2026-07-17) — the publish-gate approval message
+used to show outcome["result"] (an agent's free-text summary) while
+_run_publish_action actually publishes outcome["publish_content"]/
+publish_media, a DIFFERENT pair of fields. A human approving the summary
+never saw the exact text/media going live. This file proves the fix:
+heartbeat_outcome._build_publish_approval_body now renders the real
+publish_content/publish_media, plus a Missão/Projeto context line via
+_publish_context_line so an approval doesn't get lost among parallel
+Sistema Britto projects.
+
+Run:
+    cd /path/to/workspace && pytest tests/goals/test_publish_approval_content.py -v
+"""
+
+from __future__ import annotations
+
+import sqlite3
+import sys
+from pathlib import Path
+
+import pytest
+
+REPO_ROOT = Path(__file__).resolve().parents[2]
+BACKEND_DIR = REPO_ROOT / "dashboard" / "backend"
+sys.path.insert(0, str(BACKEND_DIR))
+
+import heartbeat_outcome  # noqa: E402
+
+NOW = "2026-07-17T00:00:00.000000Z"
+
+
+def test_body_shows_real_publish_content_not_result():
+    outcome = {
+        "result": "Vou postar sobre a promoção de julho amanhã de manhã.",
+        "publish_content": "🔥 Promoção de julho: 20% OFF em todos os planos até domingo!",
+        "publish_media": ["https://cdn.example.com/promo-julho.png"],
+    }
+    body = heartbeat_outcome._build_publish_approval_body("instagram", outcome)
+
+    assert "20% OFF em todos os planos" in body
+    assert "https://cdn.example.com/promo-julho.png" in body
+    assert "Vou postar sobre a promoção de julho amanhã" not in body
+
+
+def test_body_flags_empty_publish_content():
+    outcome = {"result": "resumo qualquer", "publish_content": "", "publish_media": []}
+    body = heartbeat_outcome._build_publish_approval_body("linkedin", outcome)
+    assert "vazio" in body.lower()
+
+
+def test_body_includes_context_line_when_provided():
+    outcome = {"publish_content": "texto", "publish_media": []}
+    body = heartbeat_outcome._build_publish_approval_body(
+        "x", outcome, context_line="Missão: Evolution MRR $1M · Projeto: Evo AI"
+    )
+    assert body.startswith("Missão: Evolution MRR $1M · Projeto: Evo AI")
+
+
+def test_body_ignores_non_list_publish_media():
+    outcome = {"publish_content": "texto", "publish_media": "not-a-list"}
+    body = heartbeat_outcome._build_publish_approval_body("x", outcome)
+    assert "Mídia:" not in body
+
+
+# ---------------------------------------------------------------------------
+# _publish_context_line — raw sqlite: ticket -> goal -> project -> mission
+# ---------------------------------------------------------------------------
+
+@pytest.fixture
+def conn():
+    c = sqlite3.connect(":memory:")
+    c.row_factory = sqlite3.Row
+    c.executescript(
+        """
+        CREATE TABLE missions (id INTEGER PRIMARY KEY AUTOINCREMENT, title TEXT NOT NULL);
+        CREATE TABLE projects (
+            id INTEGER PRIMARY KEY AUTOINCREMENT, title TEXT NOT NULL,
+            mission_id INTEGER REFERENCES missions(id)
+        );
+        CREATE TABLE goals (
+            id INTEGER PRIMARY KEY AUTOINCREMENT, title TEXT NOT NULL,
+            project_id INTEGER REFERENCES projects(id)
+        );
+        CREATE TABLE tickets (
+            id TEXT PRIMARY KEY, title TEXT NOT NULL, goal_id INTEGER REFERENCES goals(id)
+        );
+        """
+    )
+    c.commit()
+    yield c
+    c.close()
+
+
+def test_context_line_walks_ticket_to_mission(conn):
+    conn.execute("INSERT INTO missions (id, title) VALUES (1, 'Evolution MRR $1M')")
+    conn.execute("INSERT INTO projects (id, title, mission_id) VALUES (1, 'Evo AI', 1)")
+    conn.execute("INSERT INTO goals (id, title, project_id) VALUES (1, '100 clientes', 1)")
+    conn.execute("INSERT INTO tickets (id, title, goal_id) VALUES ('t1', 'Post X', 1)")
+    conn.commit()
+
+    line = heartbeat_outcome._publish_context_line("t1", conn)
+    assert "Evolution MRR $1M" in line
+    assert "Evo AI" in line
+
+
+def test_context_line_empty_when_ticket_has_no_goal(conn):
+    conn.execute("INSERT INTO tickets (id, title, goal_id) VALUES ('t2', 'Post Y', NULL)")
+    conn.commit()
+    assert heartbeat_outcome._publish_context_line("t2", conn) == ""
+
+
+def test_context_line_never_raises_for_missing_ticket(conn):
+    assert heartbeat_outcome._publish_context_line("does-not-exist", conn) == ""
diff --git a/tests/goals/test_step5_step6.py b/tests/goals/test_step5_step6.py
new file mode 100644
index 000000000..68676ab64
--- /dev/null
+++ b/tests/goals/test_step5_step6.py
@@ -0,0 +1,318 @@
+"""
+tests/goals/test_step5_step6.py
+
+goal-ticket-unification Steps 5+6 — goal-planner emitter/assignee-selection,
+and the self-healing review loop's bounce/exhaust/reset logic.
+
+Run:
+    cd /path/to/workspace && pytest tests/goals/test_step5_step6.py -v
+"""
+
+from __future__ import annotations
+
+import importlib
+import sqlite3
+import sys
+import uuid
+from pathlib import Path
+from unittest.mock import patch
+
+import pytest
+
+REPO_ROOT = Path(__file__).resolve().parents[2]
+BACKEND_DIR = REPO_ROOT / "dashboard" / "backend"
+sys.path.insert(0, str(BACKEND_DIR))
+
+import heartbeat_outcome  # noqa: E402
+
+NOW = "2026-07-16T00:00:00.000000Z"
+
+
+# ---------------------------------------------------------------------------
+# Flask app fixture (mirrors tests/tickets/test_tickets.py's pattern)
+# ---------------------------------------------------------------------------
+
+@pytest.fixture
+def app():
+    import flask
+    from flask_login import LoginManager
+    import models as _models
+    importlib.reload(_models)
+
+    _app = flask.Flask(__name__)
+    _app.config["TESTING"] = True
+    _app.config["SECRET_KEY"] = "test-step5-step6"
+    _app.config["SQLALCHEMY_DATABASE_URI"] = "sqlite:///:memory:"
+    _app.config["SQLALCHEMY_TRACK_MODIFICATIONS"] = False
+
+    _models.db.init_app(_app)
+
+    _login_manager = LoginManager()
+    _login_manager.init_app(_app)
+
+    @_login_manager.user_loader
+    def _load_user(user_id):
+        return _models.User.query.get(int(user_id))
+
+    @_login_manager.unauthorized_handler
+    def _unauthorized():
+        from flask import jsonify
+        return jsonify({"error": "Authentication required"}), 401
+
+    with _app.app_context():
+        _models.db.create_all()
+        admin = _models.User(username="admin", role="admin")
+        admin.set_password("password")
+        _models.db.session.add(admin)
+
+        mission = _models.Mission(slug="m1", title="Mission", created_at=NOW, updated_at=NOW)
+        _models.db.session.add(mission)
+        _models.db.session.commit()
+        project = _models.GoalProject(
+            slug="p1", mission_id=mission.id, title="Project", created_at=NOW, updated_at=NOW
+        )
+        _models.db.session.add(project)
+        _models.db.session.commit()
+
+    import routes.goals as _goals_routes
+    import routes.tickets as _tickets_routes
+    importlib.reload(_goals_routes)
+    importlib.reload(_tickets_routes)
+    _app.register_blueprint(_goals_routes.bp)
+    _app.register_blueprint(_tickets_routes.bp)
+
+    return _app
+
+
+@pytest.fixture
+def client(app):
+    # Log in via the session directly (flask_login's default session key) —
+    # avoids routing through /api/auth/login's auth_security/LoginThrottle
+    # machinery, which isn't reloaded alongside `models` per-test and holds
+    # a stale SQLAlchemy binding from whichever test imported it first.
+    with app.test_client() as c:
+        with c.session_transaction() as sess:
+            sess["_user_id"] = "1"
+            sess["_fresh"] = True
+        yield c
+
+
+# ---------------------------------------------------------------------------
+# Step 5 — goal_created emitter (only top-level human goals fire it)
+# ---------------------------------------------------------------------------
+
+def test_top_level_goal_dispatches_goal_created(client):
+    with patch("heartbeat_dispatcher.dispatch") as mock_dispatch:
+        mock_dispatch.return_value = (True, "run-id")
+        resp = client.post("/api/goals", json={
+            "slug": "g-top", "title": "Top-level Goal", "project_id": 1,
+        })
+        assert resp.status_code == 201, resp.get_json()
+        goal_id = resp.get_json()["id"]
+
+        mock_dispatch.assert_called_once_with("goal-planner", "goal_created", {"goal_id": goal_id})
+
+
+def test_subgoal_does_not_dispatch_goal_created(client):
+    with patch("heartbeat_dispatcher.dispatch") as mock_dispatch:
+        mock_dispatch.return_value = (True, "run-id")
+
+        parent = client.post("/api/goals", json={
+            "slug": "g-parent", "title": "Parent Goal", "project_id": 1,
+        })
+        assert parent.status_code == 201
+        parent_id = parent.get_json()["id"]
+        mock_dispatch.reset_mock()  # only care about the sub-goal call below
+
+        sub = client.post("/api/goals", json={
+            "slug": "g-sub", "title": "Sub Goal", "project_id": 1,
+            "parent_goal_id": parent_id, "due_date": "2026-08-01",
+        })
+        assert sub.status_code == 201, sub.get_json()
+        assert sub.get_json()["parent_goal_id"] == parent_id
+
+        mock_dispatch.assert_not_called()
+
+
+def test_subgoal_without_due_date_rejected(client):
+    with patch("heartbeat_dispatcher.dispatch"):
+        parent = client.post("/api/goals", json={
+            "slug": "g-parent2", "title": "Parent Goal 2", "project_id": 1,
+        })
+        parent_id = parent.get_json()["id"]
+
+        resp = client.post("/api/goals", json={
+            "slug": "g-sub-nodate", "title": "Sub Goal no date", "project_id": 1,
+            "parent_goal_id": parent_id,
+        })
+        assert resp.status_code == 400
+        assert "due_date" in resp.get_json()["error"]
+
+
+def test_dispatch_failure_does_not_block_goal_creation(client):
+    """Best-effort: if heartbeat_dispatcher blows up, goal creation still succeeds (201)."""
+    with patch("heartbeat_dispatcher.dispatch", side_effect=RuntimeError("boom")):
+        resp = client.post("/api/goals", json={
+            "slug": "g-dispatch-fail", "title": "Goal", "project_id": 1,
+        })
+        assert resp.status_code == 201, resp.get_json()
+
+
+# ---------------------------------------------------------------------------
+# Step 5 — closed-set assignee_agent validation at POST /api/tickets
+# ---------------------------------------------------------------------------
+
+def test_invalid_assignee_agent_routes_to_clawdia(client):
+    resp = client.post("/api/tickets", json={
+        "title": "Ticket with bogus assignee",
+        "assignee_agent": "not-a-real-agent-slug",
+    })
+    assert resp.status_code == 201, resp.get_json()
+    body = resp.get_json()
+    assert body["assignee_agent"] == "clawdia-assistant"
+    assert "not-a-real-agent-slug" in (body["description"] or "")
+
+
+def test_valid_assignee_agent_passes_through(client):
+    resp = client.post("/api/tickets", json={
+        "title": "Ticket with real assignee",
+        "assignee_agent": "bolt-executor",
+    })
+    assert resp.status_code == 201, resp.get_json()
+    body = resp.get_json()
+    assert body["assignee_agent"] == "bolt-executor"
+    assert not (body["description"] or "")
+
+
+# ---------------------------------------------------------------------------
+# Step 6 — self-healing review loop: bounce / exhaust / reset
+# ---------------------------------------------------------------------------
+
+@pytest.fixture
+def conn(tmp_path):
+    """Temp sqlite3 DB carrying the tickets/ticket_activity/ticket_comments schema."""
+    db_file = tmp_path / "review_loop_test.db"
+    c = sqlite3.connect(str(db_file))
+    c.row_factory = sqlite3.Row
+    c.executescript(
+        """
+        CREATE TABLE goals (
+            id INTEGER PRIMARY KEY AUTOINCREMENT,
+            target_value REAL NOT NULL DEFAULT 1.0,
+            current_value REAL NOT NULL DEFAULT 0.0,
+            status TEXT NOT NULL DEFAULT 'active',
+            updated_at TEXT NOT NULL
+        );
+        CREATE TABLE tickets (
+            id TEXT PRIMARY KEY,
+            title TEXT NOT NULL,
+            status TEXT NOT NULL DEFAULT 'open',
+            goal_id INTEGER,
+            blocked_reason TEXT,
+            created_at TEXT NOT NULL,
+            updated_at TEXT NOT NULL,
+            resolved_at TEXT
+        );
+        CREATE TABLE ticket_comments (
+            id TEXT PRIMARY KEY,
+            ticket_id TEXT NOT NULL,
+            author TEXT NOT NULL,
+            body TEXT NOT NULL,
+            mentions TEXT,
+            created_at TEXT NOT NULL
+        );
+        CREATE TABLE ticket_activity (
+            id TEXT PRIMARY KEY,
+            ticket_id TEXT NOT NULL,
+            actor TEXT NOT NULL,
+            action TEXT NOT NULL,
+            payload TEXT,
+            created_at TEXT NOT NULL
+        );
+        """
+    )
+    c.commit()
+    yield c
+    c.close()
+
+
+def _make_ticket(conn, status="review") -> str:
+    tid = str(uuid.uuid4())
+    conn.execute(
+        "INSERT INTO tickets (id, title, status, created_at, updated_at) VALUES (?, ?, ?, ?, ?)",
+        (tid, f"Ticket {tid[:8]}", status, NOW, NOW),
+    )
+    conn.commit()
+    return tid
+
+
+def test_parse_verdict_finds_json_block():
+    text = 'blah blah\n```json\n{"verdict": "pass", "critique": "looks good"}\n```\nmore text'
+    v = heartbeat_outcome.parse_verdict(text)
+    assert v == {"verdict": "pass", "critique": "looks good"}
+
+
+def test_parse_verdict_none_when_absent():
+    assert heartbeat_outcome.parse_verdict('{"action": "work", "result": "did stuff"}') is None
+    assert heartbeat_outcome.parse_verdict(None) is None
+
+
+def test_three_fails_in_a_row_exhausts_to_blocked(conn):
+    """3 consecutive fail verdicts (no reopen in between) -> 3rd lands on blocked/review_exhausted."""
+    tid = _make_ticket(conn)
+
+    r1 = heartbeat_outcome._apply_review_verdict(tid, "bolt-executor", {"verdict": "fail", "critique": "bug A"}, conn)
+    assert r1 == {"verdict": "fail", "critique": "bug A", "exhausted": False, "bounce": 1}
+    status = conn.execute("SELECT status FROM tickets WHERE id = ?", (tid,)).fetchone()[0]
+    assert status == "in_progress"
+
+    r2 = heartbeat_outcome._apply_review_verdict(tid, "bolt-executor", {"verdict": "fail", "critique": "bug B"}, conn)
+    assert r2 == {"verdict": "fail", "critique": "bug B", "exhausted": False, "bounce": 2}
+
+    r3 = heartbeat_outcome._apply_review_verdict(tid, "bolt-executor", {"verdict": "fail", "critique": "bug C"}, conn)
+    assert r3["exhausted"] is True
+    row = conn.execute("SELECT status, blocked_reason FROM tickets WHERE id = ?", (tid,)).fetchone()
+    assert row["status"] == "blocked"
+    assert row["blocked_reason"] == "review_exhausted"
+
+    # Never loops back to review/in_progress on its own after exhaustion.
+    bounces = conn.execute(
+        "SELECT COUNT(*) FROM ticket_activity WHERE ticket_id = ? AND action = 'review_bounce'", (tid,)
+    ).fetchone()[0]
+    assert bounces == 2  # only the first two fails bounced; the 3rd exhausted instead
+
+
+def test_pass_verdict_resolves(conn):
+    tid = _make_ticket(conn)
+    r = heartbeat_outcome._apply_review_verdict(tid, "bolt-executor", {"verdict": "pass", "critique": "ship it"}, conn)
+    assert r["verdict"] == "pass"
+    status = conn.execute("SELECT status FROM tickets WHERE id = ?", (tid,)).fetchone()[0]
+    assert status == "resolved"
+
+
+def test_manual_reopen_resets_bounce_budget(conn):
+    """A ticket that exhausted, then got manually reopened (review_reset logged),
+    starts a fresh bounce budget — the next 2 fails bounce again instead of
+    immediately re-exhausting."""
+    tid = _make_ticket(conn)
+
+    heartbeat_outcome._apply_review_verdict(tid, "bolt-executor", {"verdict": "fail", "critique": "x"}, conn)
+    heartbeat_outcome._apply_review_verdict(tid, "bolt-executor", {"verdict": "fail", "critique": "y"}, conn)
+    exhausted = heartbeat_outcome._apply_review_verdict(tid, "bolt-executor", {"verdict": "fail", "critique": "z"}, conn)
+    assert exhausted["exhausted"] is True
+
+    # Simulate the manual-reopen path routes/tickets.py logs on a human
+    # walking a blocked ticket back to open/in_progress. Use a real "now" (not
+    # the fixed NOW fixture constant) so it sorts after the bounce rows above,
+    # which were stamped with heartbeat_outcome's own _now_iso().
+    conn.execute(
+        "INSERT INTO ticket_activity (id, ticket_id, actor, action, payload, created_at) "
+        "VALUES (?, ?, ?, 'review_reset', '{}', ?)",
+        (str(uuid.uuid4()), tid, "human:felipe", heartbeat_outcome._now_iso()),
+    )
+    conn.commit()
+
+    assert heartbeat_outcome._count_review_bounces(tid, conn) == 0
+
+    r1 = heartbeat_outcome._apply_review_verdict(tid, "bolt-executor", {"verdict": "fail", "critique": "still broken"}, conn)
+    assert r1 == {"verdict": "fail", "critique": "still broken", "exhausted": False, "bounce": 1}
diff --git a/tests/goals/test_step7_publish_decomposition.py b/tests/goals/test_step7_publish_decomposition.py
new file mode 100644
index 000000000..0a277194a
--- /dev/null
+++ b/tests/goals/test_step7_publish_decomposition.py
@@ -0,0 +1,609 @@
+"""
+tests/goals/test_step7_publish_decomposition.py
+
+goal-ticket-unification Step 7 — publish gate (heartbeat_outcome) and the
+decomposition gate (routes/approvals.py), including the R1 reservation
+(decomposition approval must never re-dispatch goal_created).
+
+Run:
+    cd /path/to/workspace && pytest tests/goals/test_step7_publish_decomposition.py -v
+"""
+
+from __future__ import annotations
+
+import importlib
+import json
+import sqlite3
+import sys
+import uuid
+from pathlib import Path
+from unittest.mock import patch
+
+import pytest
+
+REPO_ROOT = Path(__file__).resolve().parents[2]
+BACKEND_DIR = REPO_ROOT / "dashboard" / "backend"
+sys.path.insert(0, str(BACKEND_DIR))
+
+import heartbeat_outcome  # noqa: E402
+
+NOW = "2026-07-16T00:00:00.000000Z"
+
+
+# ---------------------------------------------------------------------------
+# Flask app fixture (mirrors tests/goals/test_step5_step6.py's pattern, plus
+# the approvals blueprint under test here)
+# ---------------------------------------------------------------------------
+
+@pytest.fixture
+def app():
+    import flask
+    from flask_login import LoginManager
+    import models as _models
+    importlib.reload(_models)
+
+    _app = flask.Flask(__name__)
+    _app.config["TESTING"] = True
+    _app.config["SECRET_KEY"] = "test-step7"
+    _app.config["SQLALCHEMY_DATABASE_URI"] = "sqlite:///:memory:"
+    _app.config["SQLALCHEMY_TRACK_MODIFICATIONS"] = False
+
+    _models.db.init_app(_app)
+
+    _login_manager = LoginManager()
+    _login_manager.init_app(_app)
+
+    @_login_manager.user_loader
+    def _load_user(user_id):
+        return _models.User.query.get(int(user_id))
+
+    @_login_manager.unauthorized_handler
+    def _unauthorized():
+        from flask import jsonify
+        return jsonify({"error": "Authentication required"}), 401
+
+    with _app.app_context():
+        _models.db.create_all()
+        admin = _models.User(username="admin", role="admin")
+        admin.set_password("password")
+        _models.db.session.add(admin)
+
+        mission = _models.Mission(slug="m1", title="Mission", created_at=NOW, updated_at=NOW)
+        _models.db.session.add(mission)
+        _models.db.session.commit()
+        project = _models.GoalProject(
+            slug="p1", mission_id=mission.id, title="Project", created_at=NOW, updated_at=NOW
+        )
+        _models.db.session.add(project)
+        _models.db.session.commit()
+
+    import routes.goals as _goals_routes
+    import routes.tickets as _tickets_routes
+    import routes.approvals as _approvals_routes
+    importlib.reload(_goals_routes)
+    importlib.reload(_tickets_routes)
+    importlib.reload(_approvals_routes)
+    _app.register_blueprint(_goals_routes.bp)
+    _app.register_blueprint(_tickets_routes.bp)
+    _app.register_blueprint(_approvals_routes.bp)
+
+    return _app
+
+
+@pytest.fixture
+def client(app):
+    with app.test_client() as c:
+        with c.session_transaction() as sess:
+            sess["_user_id"] = "1"
+            sess["_fresh"] = True
+        yield c
+
+
+@pytest.fixture(autouse=True)
+def _approval_env(monkeypatch):
+    monkeypatch.setenv("APPROVAL_BRIDGE_TOKEN", "test-bridge-token")
+    monkeypatch.setenv("APPROVAL_APPROVER_IDS", "12345")
+    # Safety net: without this, any test path that reaches the real
+    # notifications.send_approval_request (e.g. POST /api/approvals, which
+    # none of the decomposition tests mock individually) would read the
+    # developer's real TELEGRAM_BOT_TOKEN/TELEGRAM_CHAT_ID from .env and send
+    # an actual Telegram message with test placeholder text. This bit for
+    # real during Step 7 development — see workspace memory
+    # goal-ticket-unification-build-state.md. send_approval_request already
+    # no-ops (returns None) when these are unset, so clearing them here makes
+    # every test in this module safe by construction, not by remembering to
+    # mock each call site.
+    monkeypatch.delenv("TELEGRAM_BOT_TOKEN", raising=False)
+    monkeypatch.delenv("TELEGRAM_CHAT_ID", raising=False)
+
+
+def _bridge_headers():
+    return {"Authorization": "Bearer test-bridge-token"}
+
+
+def _create_subgoal(client, slug_suffix: str) -> tuple[int, int]:
+    """Create a parent + a proposed sub-goal, returning (parent_id, sub_id)."""
+    with patch("heartbeat_dispatcher.dispatch"):
+        parent = client.post("/api/goals", json={
+            "slug": f"g-parent-{slug_suffix}", "title": f"Parent {slug_suffix}", "project_id": 1,
+        })
+        assert parent.status_code == 201, parent.get_json()
+        parent_id = parent.get_json()["id"]
+
+        sub = client.post("/api/goals", json={
+            "slug": f"g-sub-{slug_suffix}", "title": f"Sub Goal {slug_suffix}", "project_id": 1,
+            "parent_goal_id": parent_id, "due_date": "2026-08-01",
+            "decomposition_state": "proposed",
+        })
+        assert sub.status_code == 201, sub.get_json()
+        sub_id = sub.get_json()["id"]
+    return parent_id, sub_id
+
+
+# ---------------------------------------------------------------------------
+# Decomposition gate — POST /api/approvals + decision
+# ---------------------------------------------------------------------------
+
+def test_decomposition_approve_creates_tickets_from_payload(client):
+    _, sub_id = _create_subgoal(client, "d1")
+
+    payload = {
+        "title": "Aprovar decomposição: Sub Goal d1",
+        "body": "resumo em pt-BR",
+        "tickets": [
+            {"title": "Ticket A", "priority": "high", "assignee_agent": "bolt-executor"},
+            {"title": "Ticket B", "priority": "medium", "assignee_agent": "not-a-real-agent-slug"},
+        ],
+    }
+    create_resp = client.post("/api/approvals", json={
+        "gate_type": "decomposition", "goal_id": sub_id, "agent": "goal-planner", "payload": payload,
+    })
+    assert create_resp.status_code == 201, create_resp.get_json()
+    approval_id = create_resp.get_json()["id"]
+    assert create_resp.get_json()["idempotency_key"] == f"decomp:{sub_id}:0"
+
+    decision_resp = client.post(
+        f"/api/approvals/{approval_id}/decision",
+        json={"decision": "approve", "from_id": "12345"},
+        headers=_bridge_headers(),
+    )
+    assert decision_resp.status_code == 200, decision_resp.get_json()
+
+    tickets = client.get(f"/api/tickets?goal_id={sub_id}").get_json()["tickets"]
+    assert len(tickets) == 2
+    titles = {t["title"] for t in tickets}
+    assert titles == {"Ticket A", "Ticket B"}
+    for t in tickets:
+        assert t["goal_id"] == sub_id
+    b = next(t for t in tickets if t["title"] == "Ticket B")
+    # invalid assignee_agent routes to the same clawdia triage bucket as
+    # POST /api/tickets does (create_ticket's own closed-set validation).
+    assert b["assignee_agent"] == "clawdia-assistant"
+
+    goal = client.get(f"/api/goals/{sub_id}").get_json()
+    assert goal["decomposition_state"] == "approved"
+
+
+def test_decomposition_reject_creates_zero_tickets(client):
+    _, sub_id = _create_subgoal(client, "d2")
+
+    payload = {"title": "Aprovar decomposição: Sub Goal d2", "body": "resumo", "tickets": [{"title": "X"}]}
+    create_resp = client.post("/api/approvals", json={
+        "gate_type": "decomposition", "goal_id": sub_id, "agent": "goal-planner", "payload": payload,
+    })
+    approval_id = create_resp.get_json()["id"]
+
+    decision_resp = client.post(
+        f"/api/approvals/{approval_id}/decision",
+        json={"decision": "reject", "from_id": "12345", "reason": "não agora"},
+        headers=_bridge_headers(),
+    )
+    assert decision_resp.status_code == 200, decision_resp.get_json()
+
+    tickets = client.get(f"/api/tickets?goal_id={sub_id}").get_json()["tickets"]
+    assert tickets == []
+
+    goal = client.get(f"/api/goals/{sub_id}").get_json()
+    assert goal["decomposition_state"] == "rejected"
+
+
+def test_decomposition_approve_skips_malformed_ticket_entries(client):
+    """A non-dict entry in payload["tickets"] (e.g. goal-planner double-encoding
+    a string) must not lose the rest of the batch — skip it, create the valid
+    ones."""
+    _, sub_id = _create_subgoal(client, "d6")
+    payload = {
+        "title": "t", "body": "b",
+        "tickets": ["not-a-dict", {"title": "Valid Ticket"}, 42, None],
+    }
+    create_resp = client.post("/api/approvals", json={
+        "gate_type": "decomposition", "goal_id": sub_id, "agent": "goal-planner", "payload": payload,
+    })
+    approval_id = create_resp.get_json()["id"]
+
+    decision_resp = client.post(
+        f"/api/approvals/{approval_id}/decision",
+        json={"decision": "approve", "from_id": "12345"},
+        headers=_bridge_headers(),
+    )
+    assert decision_resp.status_code == 200, decision_resp.get_json()
+
+    tickets = client.get(f"/api/tickets?goal_id={sub_id}").get_json()["tickets"]
+    assert len(tickets) == 1
+    assert tickets[0]["title"] == "Valid Ticket"
+
+
+def test_decomposition_approve_ticket_creation_failure_alerts_and_reraises(client):
+    """The approval row and goals.decomposition_state are already committed to
+    'approved' BEFORE the ticket-creation loop runs (CAS point of no return —
+    a 2nd decision on this approval_id 409s). If the loop dies mid-way anyway
+    (some exception the isinstance guard doesn't catch), silently losing the
+    tickets behind an already-'approved' state would be real data loss: the
+    human sees the Telegram approval succeed and never learns nothing was
+    created. Must alert + re-raise, never swallow."""
+    _, sub_id = _create_subgoal(client, "d7")
+    payload = {
+        "title": "t", "body": "b",
+        "tickets": [{"title": "Ticket A", "assignee_agent": "bolt-executor"}],
+    }
+    create_resp = client.post("/api/approvals", json={
+        "gate_type": "decomposition", "goal_id": sub_id, "agent": "goal-planner", "payload": payload,
+    })
+    approval_id = create_resp.get_json()["id"]
+
+    with patch("routes.tickets._get_agent_slugs", side_effect=RuntimeError("boom")), \
+         patch("notifications.send_telegram_alert") as mock_alert:
+        with pytest.raises(RuntimeError):
+            client.post(
+                f"/api/approvals/{approval_id}/decision",
+                json={"decision": "approve", "from_id": "12345"},
+                headers=_bridge_headers(),
+            )
+
+    mock_alert.assert_called_once()
+    assert "falhou" in mock_alert.call_args[0][0]
+    assert str(approval_id) in mock_alert.call_args[0][0]
+
+    # Zero tickets created — the alert exists precisely because this state
+    # (approved but empty) can't self-heal via a retry.
+    tickets = client.get(f"/api/tickets?goal_id={sub_id}").get_json()["tickets"]
+    assert tickets == []
+
+
+def test_decomposition_approve_never_dispatches_goal_created(client):
+    """R1 (ADR Sign-off reservation): approving a decomposition creates tickets
+    directly from the payload — it must NEVER re-dispatch goal_created, which
+    would bypass create_goal's parent_goal_id-is-None recursion guard."""
+    _, sub_id = _create_subgoal(client, "d3")
+
+    with patch("heartbeat_dispatcher.dispatch") as mock_dispatch:
+        payload = {"title": "t", "body": "b", "tickets": [{"title": "Ticket Z"}]}
+        create_resp = client.post("/api/approvals", json={
+            "gate_type": "decomposition", "goal_id": sub_id, "agent": "goal-planner", "payload": payload,
+        })
+        approval_id = create_resp.get_json()["id"]
+
+        decision_resp = client.post(
+            f"/api/approvals/{approval_id}/decision",
+            json={"decision": "approve", "from_id": "12345"},
+            headers=_bridge_headers(),
+        )
+        assert decision_resp.status_code == 200, decision_resp.get_json()
+        mock_dispatch.assert_not_called()
+
+
+def test_decision_double_press_is_noop_409(client):
+    _, sub_id = _create_subgoal(client, "d4")
+    payload = {"title": "t", "body": "b", "tickets": []}
+    create_resp = client.post("/api/approvals", json={
+        "gate_type": "decomposition", "goal_id": sub_id, "agent": "goal-planner", "payload": payload,
+    })
+    approval_id = create_resp.get_json()["id"]
+
+    first = client.post(
+        f"/api/approvals/{approval_id}/decision",
+        json={"decision": "approve", "from_id": "12345"},
+        headers=_bridge_headers(),
+    )
+    assert first.status_code == 200
+
+    second = client.post(
+        f"/api/approvals/{approval_id}/decision",
+        json={"decision": "approve", "from_id": "12345"},
+        headers=_bridge_headers(),
+    )
+    assert second.status_code == 409
+
+
+# ---------------------------------------------------------------------------
+# Publish gate — heartbeat_outcome.apply_outcome (AC4)
+# ---------------------------------------------------------------------------
+
+@pytest.fixture
+def conn(tmp_path):
+    """Temp sqlite3 DB carrying the tickets/pending_approvals schema this gate touches."""
+    db_file = tmp_path / "publish_gate_test.db"
+    c = sqlite3.connect(str(db_file))
+    c.row_factory = sqlite3.Row
+    c.executescript(
+        """
+        CREATE TABLE goals (
+            id INTEGER PRIMARY KEY AUTOINCREMENT,
+            metric_type TEXT NOT NULL DEFAULT 'count',
+            target_value REAL NOT NULL DEFAULT 1.0,
+            current_value REAL NOT NULL DEFAULT 0.0,
+            status TEXT NOT NULL DEFAULT 'active',
+            updated_at TEXT NOT NULL
+        );
+        CREATE TABLE tickets (
+            id TEXT PRIMARY KEY,
+            title TEXT NOT NULL,
+            status TEXT NOT NULL DEFAULT 'open',
+            goal_id INTEGER,
+            blocked_reason TEXT,
+            requires_human_approval INTEGER NOT NULL DEFAULT 0,
+            created_at TEXT NOT NULL,
+            updated_at TEXT NOT NULL,
+            resolved_at TEXT
+        );
+        CREATE TABLE ticket_comments (
+            id TEXT PRIMARY KEY,
+            ticket_id TEXT NOT NULL,
+            author TEXT NOT NULL,
+            body TEXT NOT NULL,
+            mentions TEXT,
+            created_at TEXT NOT NULL
+        );
+        CREATE TABLE ticket_activity (
+            id TEXT PRIMARY KEY,
+            ticket_id TEXT NOT NULL,
+            actor TEXT NOT NULL,
+            action TEXT NOT NULL,
+            payload TEXT,
+            created_at TEXT NOT NULL
+        );
+        CREATE TABLE pending_approvals (
+            id INTEGER PRIMARY KEY AUTOINCREMENT,
+            gate_type TEXT NOT NULL,
+            ticket_id TEXT,
+            goal_id INTEGER,
+            agent TEXT,
+            attempt INTEGER NOT NULL DEFAULT 0,
+            idempotency_key TEXT NOT NULL UNIQUE,
+            status TEXT NOT NULL DEFAULT 'pending',
+            payload TEXT,
+            telegram_chat_id TEXT,
+            telegram_message_id INTEGER,
+            approver_from_id TEXT,
+            reject_reason TEXT,
+            decided_by TEXT,
+            created_at TEXT NOT NULL,
+            nudged_at TEXT,
+            decided_at TEXT,
+            expires_at TEXT NOT NULL
+        );
+        """
+    )
+    c.commit()
+    yield c
+    c.close()
+
+
+def _make_ticket(conn, status="in_progress") -> str:
+    tid = str(uuid.uuid4())
+    conn.execute(
+        "INSERT INTO tickets (id, title, status, created_at, updated_at) VALUES (?, ?, ?, ?, ?)",
+        (tid, f"Ticket {tid[:8]}", status, NOW, NOW),
+    )
+    conn.commit()
+    return tid
+
+
+def _work_result(ticket_id, publish_intent, publish_target, new_status="resolved"):
+    return {
+        "status": "success",
+        "output": {
+            "action": "work", "ticket_id": ticket_id, "result": "Post pronto para publicar.",
+            "new_status": new_status, "publish_intent": publish_intent, "publish_target": publish_target,
+        },
+    }
+
+
+def test_publish_gate_parks_ticket_pending_approval(conn):
+    tid = _make_ticket(conn)
+    with patch("notifications.send_approval_request", return_value=42) as mock_send:
+        outcome = heartbeat_outcome.apply_outcome(
+            "hb1", "pixel-social-media", _work_result(tid, True, "instagram"), conn
+        )
+    assert outcome["kind"] == "result"
+    assert outcome["new_status"] == "blocked"
+    mock_send.assert_called_once()
+
+    row = conn.execute(
+        "SELECT status, blocked_reason, requires_human_approval FROM tickets WHERE id = ?", (tid,)
+    ).fetchone()
+    assert row["status"] == "blocked"
+    assert row["blocked_reason"] == "pending_human_approval"
+    assert row["requires_human_approval"] == 1
+
+    approval = conn.execute(
+        "SELECT gate_type, status, telegram_message_id FROM pending_approvals WHERE ticket_id = ?", (tid,)
+    ).fetchone()
+    assert approval is not None
+    assert approval["gate_type"] == "publish"
+    assert approval["status"] == "pending"
+    assert approval["telegram_message_id"] == 42
+
+
+def test_publish_intent_false_bypasses_gate(conn):
+    tid = _make_ticket(conn)
+    outcome = heartbeat_outcome.apply_outcome(
+        "hb1", "pixel-social-media", _work_result(tid, False, None), conn
+    )
+    assert outcome["new_status"] == "resolved"
+
+    row = conn.execute("SELECT status FROM tickets WHERE id = ?", (tid,)).fetchone()
+    assert row["status"] == "resolved"
+    count = conn.execute("SELECT COUNT(*) FROM pending_approvals").fetchone()[0]
+    assert count == 0
+
+
+def test_publish_target_invalid_blocks_without_approval(conn):
+    tid = _make_ticket(conn)
+    with patch("notifications.send_approval_request") as mock_send:
+        outcome = heartbeat_outcome.apply_outcome(
+            "hb1", "pixel-social-media", _work_result(tid, True, "myspace"), conn
+        )
+    mock_send.assert_not_called()
+    assert outcome["kind"] == "blocked"
+
+    row = conn.execute("SELECT status, blocked_reason FROM tickets WHERE id = ?", (tid,)).fetchone()
+    assert row["status"] == "blocked"
+    assert row["blocked_reason"] == "agent_blocked"
+    count = conn.execute("SELECT COUNT(*) FROM pending_approvals").fetchone()[0]
+    assert count == 0
+
+
+def test_non_publishing_agent_bypasses_gate(conn):
+    tid = _make_ticket(conn)
+    outcome = heartbeat_outcome.apply_outcome(
+        "hb1", "bolt-executor", _work_result(tid, True, "instagram"), conn
+    )
+    assert outcome["new_status"] == "resolved"
+    count = conn.execute("SELECT COUNT(*) FROM pending_approvals").fetchone()[0]
+    assert count == 0
+
+
+def test_publish_intent_missing_still_gates_fail_closed(conn):
+    """No publish_intent key at all (e.g. free-form parse without the field) —
+    fail-closed still gates, same as an explicit True (Vault V5)."""
+    tid = _make_ticket(conn)
+    result = {
+        "status": "success",
+        "output": {
+            "action": "work", "ticket_id": tid, "result": "Post pronto.",
+            "new_status": "resolved", "publish_target": "linkedin",
+        },
+    }
+    with patch("notifications.send_approval_request", return_value=None):
+        outcome = heartbeat_outcome.apply_outcome("hb1", "mako-marketing", result, conn)
+    assert outcome["new_status"] == "blocked"
+    row = conn.execute("SELECT status FROM tickets WHERE id = ?", (tid,)).fetchone()
+    assert row["status"] == "blocked"
+
+
+def test_run_publish_action_requires_exact_content(conn):
+    class _Row:
+        payload = '{"outcome": {"publish_target": "instagram"}}'
+
+    result = heartbeat_outcome._run_publish_action(_Row(), conn)
+    assert result["published"] is False
+    assert "publish_content" in result["detail"]
+
+
+class _PostizResponse:
+    """Mock for requests.Response as consumed by postiz_client.PostizClient._request
+    (status_code + json()/text; heartbeat_outcome no longer calls requests
+    directly since the social-media-production refactor extracted PostizClient).
+    """
+
+    def __init__(self, body, status_code: int = 200):
+        self._body = body
+        self.status_code = status_code
+        self.text = json.dumps(body) if not isinstance(body, str) else body
+
+    def raise_for_status(self):
+        return None
+
+    def json(self):
+        return self._body
+
+
+def test_run_publish_action_confirms_postiz_published(conn):
+    class _Row:
+        payload = json.dumps({"outcome": {
+            "publish_target": "linkedin",
+            "publish_content": "Texto exato aprovado.",
+            "publish_media": [],
+        }})
+
+    env = {
+        "POSTIZ_URL": "https://postiz.example.com",
+        "POSTIZ_API_KEY": "postiz-key",
+        "POSTIZ_PUBLISH_TIMEOUT_SECONDS": "1",
+        "POSTIZ_PUBLISH_POLL_SECONDS": "0.1",
+    }
+    # Call order inside _run_publish_action: GET integrations, POST posts
+    # (create), GET posts (publication-confirmation poll).
+    responses = [
+        _PostizResponse([{
+            "id": "int-linkedin", "identifier": "linkedin", "disabled": False,
+        }]),
+        _PostizResponse([{"postId": "post-1", "integration": "int-linkedin"}]),
+        _PostizResponse({"posts": [{"id": "post-1", "state": "PUBLISHED"}]}),
+    ]
+    with patch.dict("os.environ", env, clear=False), \
+         patch("postiz_client.requests.request", side_effect=responses) as mock_request:
+        result = heartbeat_outcome._run_publish_action(_Row(), conn)
+
+    assert result["published"] is True
+    assert "PUBLISHED" in result["detail"]
+    assert mock_request.call_count == 3
+    post_call = mock_request.call_args_list[1]
+    assert post_call.args[0] == "POST"
+    assert post_call.args[1].endswith("/public/v1/posts")
+    sent = post_call.kwargs["json"]
+    assert sent["type"] == "now"
+    assert sent["posts"][0]["integration"]["id"] == "int-linkedin"
+    assert sent["posts"][0]["value"][0]["content"] == "Texto exato aprovado."
+    assert sent["posts"][0]["settings"] == {"__type": "linkedin"}
+
+
+def test_run_publish_action_rejects_ambiguous_integration(conn):
+    class _Row:
+        payload = json.dumps({"outcome": {
+            "publish_target": "linkedin", "publish_content": "Texto", "publish_media": [],
+        }})
+
+    integrations = [
+        {"id": "int-1", "identifier": "linkedin", "disabled": False},
+        {"id": "int-2", "identifier": "linkedin", "disabled": False},
+    ]
+    with patch.dict("os.environ", {
+        "POSTIZ_URL": "https://postiz.example.com", "POSTIZ_API_KEY": "key",
+    }, clear=False), patch(
+        "postiz_client.requests.request", return_value=_PostizResponse(integrations)
+    ) as mock_request:
+        result = heartbeat_outcome._run_publish_action(_Row(), conn)
+
+    assert result["published"] is False
+    assert "inequívoca" in result["detail"]
+    # Only the integrations lookup — never a POST to create a post.
+    assert mock_request.call_count == 1
+    assert mock_request.call_args.args[0] == "GET"
+
+
+def test_run_publish_action_instagram_requires_allowlisted_media(conn):
+    class _Row:
+        payload = json.dumps({"outcome": {
+            "publish_target": "instagram",
+            "publish_content": "Legenda aprovada.",
+            "publish_media": ["https://evil.example/image.jpg"],
+        }})
+
+    with patch.dict("os.environ", {
+        "POSTIZ_URL": "https://postiz.example.com",
+        "POSTIZ_API_KEY": "key",
+        "POSTIZ_ALLOWED_MEDIA_HOSTS": "cdn.example.com",
+    }, clear=False), patch(
+        "postiz_client.requests.request",
+        return_value=_PostizResponse([{
+            "id": "int-instagram", "identifier": "instagram", "disabled": False,
+        }]),
+    ) as mock_request:
+        result = heartbeat_outcome._run_publish_action(_Row(), conn)
+
+    assert result["published"] is False
+    assert "URL de mídia inválida" in result["detail"]
+    assert mock_request.call_count == 1
+    assert mock_request.call_args.args[0] == "GET"
diff --git a/tests/heartbeats/test_deadline_check.py b/tests/heartbeats/test_deadline_check.py
new file mode 100644
index 000000000..bff0061f0
--- /dev/null
+++ b/tests/heartbeats/test_deadline_check.py
@@ -0,0 +1,138 @@
+"""
+tests/heartbeats/test_deadline_check.py
+
+Panorama 2026-07-17, item 4 — nothing proactively alerted on an overdue Goal
+or Ticket between Weekly Review runs (Fridays only). deadline_check.tick()
+closes that gap: a cheap, LLM-free heartbeat handler that checks due_date
+and alerts via Telegram.
+
+Run:
+    cd /path/to/workspace && pytest tests/heartbeats/test_deadline_check.py -v
+"""
+
+from __future__ import annotations
+
+import sqlite3
+import sys
+from pathlib import Path
+from unittest.mock import patch
+
+import pytest
+import yaml
+
+REPO_ROOT = Path(__file__).resolve().parents[2]
+BACKEND_DIR = REPO_ROOT / "dashboard" / "backend"
+sys.path.insert(0, str(BACKEND_DIR))
+
+import deadline_check  # noqa: E402
+from heartbeat_schema import HeartbeatConfig  # noqa: E402
+
+
+@pytest.fixture
+def db(tmp_path, monkeypatch):
+    db_file = tmp_path / "deadline_test.db"
+    conn = sqlite3.connect(str(db_file))
+    conn.executescript(
+        """
+        CREATE TABLE goals (id INTEGER PRIMARY KEY, title TEXT, status TEXT, due_date TEXT);
+        CREATE TABLE tickets (id TEXT PRIMARY KEY, title TEXT, status TEXT, due_date TEXT);
+        """
+    )
+    conn.commit()
+    conn.close()
+    monkeypatch.setattr(deadline_check, "DB_PATH", db_file)
+    return db_file
+
+
+def _conn(db_file):
+    c = sqlite3.connect(str(db_file))
+    c.row_factory = sqlite3.Row
+    return c
+
+
+def test_no_overdue_items_does_not_alert(db):
+    with patch("notifications.send_telegram_alert") as mock_alert:
+        result = deadline_check.tick()
+    mock_alert.assert_not_called()
+    assert result == {"overdue_goals": 0, "overdue_tickets": 0, "alerted": False}
+
+
+def test_overdue_goal_triggers_alert(db):
+    conn = _conn(db)
+    conn.execute("INSERT INTO goals (id, title, status, due_date) VALUES (1, 'Meta vencida', 'active', '2020-01-01')")
+    conn.commit()
+    conn.close()
+
+    with patch("notifications.send_telegram_alert", return_value=True) as mock_alert:
+        result = deadline_check.tick()
+
+    mock_alert.assert_called_once()
+    body = mock_alert.call_args[0][0]
+    assert "Meta vencida" in body
+    assert result["overdue_goals"] == 1
+    assert result["alerted"] is True
+
+
+def test_overdue_ticket_triggers_alert(db):
+    conn = _conn(db)
+    conn.execute("INSERT INTO tickets (id, title, status, due_date) VALUES ('t1', 'Ticket vencido', 'open', '2020-01-01')")
+    conn.commit()
+    conn.close()
+
+    with patch("notifications.send_telegram_alert", return_value=True) as mock_alert:
+        result = deadline_check.tick()
+
+    body = mock_alert.call_args[0][0]
+    assert "Ticket vencido" in body
+    assert result["overdue_tickets"] == 1
+
+
+def test_achieved_goal_past_due_date_is_ignored(db):
+    """Only status='active' Goals count — an achieved Goal keeping an old
+    due_date must never trigger a false alarm."""
+    conn = _conn(db)
+    conn.execute("INSERT INTO goals (id, title, status, due_date) VALUES (1, 'Meta feita', 'achieved', '2020-01-01')")
+    conn.commit()
+    conn.close()
+
+    with patch("notifications.send_telegram_alert") as mock_alert:
+        result = deadline_check.tick()
+    mock_alert.assert_not_called()
+    assert result["overdue_goals"] == 0
+
+
+def test_resolved_ticket_past_due_date_is_ignored(db):
+    conn = _conn(db)
+    conn.execute("INSERT INTO tickets (id, title, status, due_date) VALUES ('t1', 'Ticket feito', 'resolved', '2020-01-01')")
+    conn.commit()
+    conn.close()
+
+    with patch("notifications.send_telegram_alert") as mock_alert:
+        result = deadline_check.tick()
+    mock_alert.assert_not_called()
+
+
+def test_future_due_date_does_not_alert(db):
+    conn = _conn(db)
+    conn.execute("INSERT INTO goals (id, title, status, due_date) VALUES (1, 'Meta no futuro', 'active', '2099-01-01')")
+    conn.commit()
+    conn.close()
+
+    with patch("notifications.send_telegram_alert") as mock_alert:
+        deadline_check.tick()
+    mock_alert.assert_not_called()
+
+
+def test_missing_db_returns_error_without_raising(monkeypatch, tmp_path):
+    monkeypatch.setattr(deadline_check, "DB_PATH", tmp_path / "does-not-exist.db")
+    result = deadline_check.tick()
+    assert result["error"] == "db not found"
+
+
+def test_deadline_check_heartbeat_seed_validates():
+    data = yaml.safe_load((REPO_ROOT / "config" / "heartbeats.example.yaml").read_text())
+    heartbeats = [HeartbeatConfig(**hb) for hb in data["heartbeats"]]
+    hb = next(h for h in heartbeats if h.id == "deadline-check")
+    assert hb.handler == "deadline_check.tick"
+    assert hb.max_turns == 0
+    assert hb.enabled is False
diff --git a/tests/heartbeats/test_growth_content_heartbeat.py b/tests/heartbeats/test_growth_content_heartbeat.py
new file mode 100644
index 000000000..e3a251ff2
--- /dev/null
+++ b/tests/heartbeats/test_growth_content_heartbeat.py
@@ -0,0 +1,77 @@
+"""
+tests/heartbeats/test_growth_content_heartbeat.py
+
+growth-content-heartbeat quick-spec (2026-07-17) — pixel-social-media gains an
+interval heartbeat that tops up a Goal's content-ticket queue when it runs
+low, instead of only reacting once per goal_created/project_created event.
+
+Proves:
+  - config/heartbeats.example.yaml still validates as a whole against the
+    pydantic schema (the new pixel-growth-6h entry included).
+  - pixel-growth-6h is shaped correctly (agent, interval, wake_triggers).
+  - pixel-social-media is a STATE_MONITOR_AGENTS member — without this the
+    cost-guard would skip the heartbeat exactly when it's needed (empty
+    ticket inbox = the queue running low that this heartbeat exists to fix).
+
+Run:
+    cd /path/to/workspace && pytest tests/heartbeats/test_growth_content_heartbeat.py -v
+"""
+
+from __future__ import annotations
+
+import sys
+from pathlib import Path
+
+import yaml
+
+REPO_ROOT = Path(__file__).resolve().parents[2]
+BACKEND_DIR = REPO_ROOT / "dashboard" / "backend"
+sys.path.insert(0, str(BACKEND_DIR))
+
+from heartbeat_schema import HeartbeatConfig  # noqa: E402
+from heartbeat_runner import STATE_MONITOR_AGENTS  # noqa: E402
+
+EXAMPLE_YAML = REPO_ROOT / "config" / "heartbeats.example.yaml"
+
+
+def _load_example_heartbeats():
+    data = yaml.safe_load(EXAMPLE_YAML.read_text())
+    return [HeartbeatConfig(**hb) for hb in data["heartbeats"]]
+
+
+def test_example_yaml_validates_with_new_seed():
+    heartbeats = _load_example_heartbeats()
+    ids = [h.id for h in heartbeats]
+    assert "pixel-growth-6h" in ids
+    assert len(heartbeats) >= 8
+
+
+def test_pixel_growth_heartbeat_shape():
+    heartbeats = _load_example_heartbeats()
+    hb = next(h for h in heartbeats if h.id == "pixel-growth-6h")
+    assert hb.agent == "pixel-social-media"
+    assert hb.interval_seconds == 21600
+    assert "interval" in hb.wake_triggers
+    assert hb.enabled is False  # seeds ship dormant
+
+
+def test_pixel_social_media_is_state_monitor_agent():
+    assert "pixel-social-media" in STATE_MONITOR_AGENTS
+
+
+def test_cost_guard_predicate_does_not_skip_pixel_with_empty_inbox():
+    """Mirrors the exact guard condition in heartbeat_runner.py's main loop
+    (`not inbox and not approvals and hb["agent"] not in STATE_MONITOR_AGENTS`)
+    without spinning up the full runner — proves pixel-social-media would NOT
+    be skipped even with a fully empty ticket inbox and no approvals."""
+    inbox = []
+    approvals = []
+    would_skip = not inbox and not approvals and "pixel-social-media" not in STATE_MONITOR_AGENTS
+    assert would_skip is False
+
+
+def test_cost_guard_predicate_still_skips_a_control_agent():
+    inbox = []
+    approvals = []
+    would_skip = not inbox and not approvals and "zara-cs" not in STATE_MONITOR_AGENTS
+    assert would_skip is True
diff --git a/tests/heartbeats/test_publish_env_isolation.py b/tests/heartbeats/test_publish_env_isolation.py
new file mode 100644
index 000000000..bbe078cb3
--- /dev/null
+++ b/tests/heartbeats/test_publish_env_isolation.py
@@ -0,0 +1,25 @@
+"""Postiz credentials must never reach agent subprocesses."""
+
+from __future__ import annotations
+
+import importlib
+import sys
+from pathlib import Path
+
+
+BACKEND_DIR = Path(__file__).resolve().parents[2] / "dashboard" / "backend"
+sys.path.insert(0, str(BACKEND_DIR))
+
+
+def test_postiz_api_key_is_removed_from_agent_env(monkeypatch):
+    monkeypatch.setenv("POSTIZ_API_KEY", "secret-postiz-key")
+    monkeypatch.setenv("POSTIZ_URL", "https://postiz.example.com")
+    monkeypatch.setenv("DASHBOARD_API_TOKEN", "allowed-dashboard-token")
+
+    import provider_fallback
+    importlib.reload(provider_fallback)
+    env = provider_fallback._build_agent_run_env()
+
+    assert "POSTIZ_API_KEY" not in env
+    assert env["POSTIZ_URL"] == "https://postiz.example.com"
+    assert env["DASHBOARD_API_TOKEN"] == "allowed-dashboard-token"
diff --git a/tests/media/conftest.py b/tests/media/conftest.py
new file mode 100644
index 000000000..2acc6f6ca
--- /dev/null
+++ b/tests/media/conftest.py
@@ -0,0 +1,99 @@
+"""Shared fixtures for social-media-production tests.
+
+Mirrors the Flask app fixture pattern in tests/goals/test_step7_publish_decomposition.py
+(in-memory SQLite, models.db.create_all(), seeded users per role) plus the
+media_jobs blueprint and the admin-only postiz core config blueprint.
+"""
+
+from __future__ import annotations
+
+import sys
+from datetime import datetime, timezone
+from pathlib import Path
+
+import pytest
+
+BACKEND_DIR = Path(__file__).resolve().parents[2] / "dashboard" / "backend"
+sys.path.insert(0, str(BACKEND_DIR))
+
+NOW = datetime.now(timezone.utc).strftime("%Y-%m-%dT%H:%M:%S.%fZ")
+
+
+@pytest.fixture
+def app(tmp_path, monkeypatch):
+    import flask
+    from flask_login import LoginManager
+    import importlib
+    import models as _models
+    importlib.reload(_models)
+
+    monkeypatch.setenv("MEDIA_WORKSPACE", str(tmp_path / "media"))
+
+    _app = flask.Flask(__name__)
+    _app.config["TESTING"] = True
+    _app.config["SECRET_KEY"] = "test-media"
+    _app.config["SQLALCHEMY_DATABASE_URI"] = "sqlite:///:memory:"
+    _app.config["SQLALCHEMY_TRACK_MODIFICATIONS"] = False
+
+    _models.db.init_app(_app)
+
+    login_manager = LoginManager()
+    login_manager.init_app(_app)
+
+    @login_manager.user_loader
+    def _load_user(user_id):
+        return _models.db.session.get(_models.User, int(user_id))
+
+    @login_manager.unauthorized_handler
+    def _unauthorized():
+        from flask import jsonify
+        return jsonify({"error": "Authentication required"}), 401
+
+    # Route modules bind `from models import db, ...` at import time — after
+    # reloading `models` above, any already-imported route module (from an
+    # earlier test in this session) still references the *old* db instance.
+    # Reload them too, mirroring tests/goals/test_step7_publish_decomposition.py.
+    import routes.media_jobs as _media_jobs_routes
+    import routes.integrations_core_postiz as _postiz_core_routes
+    importlib.reload(_media_jobs_routes)
+    importlib.reload(_postiz_core_routes)
+    _app.register_blueprint(_media_jobs_routes.bp)
+    _app.register_blueprint(_postiz_core_routes.bp)
+
+    with _app.app_context():
+        _models.db.create_all()
+        admin = _models.User(username="admin", role="admin")
+        admin.set_password("password")
+        viewer = _models.User(username="viewer", role="viewer")
+        viewer.set_password("password")
+        _models.db.session.add_all([admin, viewer])
+        _models.db.session.commit()
+
+    yield _app
+
+
+@pytest.fixture
+def client(app):
+    return app.test_client()
+
+
+@pytest.fixture
+def admin_client(app):
+    """A test client with an authenticated admin session (via Flask-Login
+    test_request_context login, since the real /api/auth/login route isn't
+    registered in this minimal app fixture).
+    """
+    c = app.test_client()
+    with c.session_transaction() as sess:
+        sess["_user_id"] = "1"
+        sess["_fresh"] = True
+    return c
+
+
+@pytest.fixture
+def viewer_client(app):
+    c = app.test_client()
+    with c.session_transaction() as sess:
+        sess["_user_id"] = "2"
+        sess["_fresh"] = True
+    return c
diff --git a/tests/media/test_media_manifest.py b/tests/media/test_media_manifest.py
new file mode 100644
index 000000000..002895111
--- /dev/null
+++ b/tests/media/test_media_manifest.py
@@ -0,0 +1,115 @@
+"""media_manifest.py — publication_manifest.json schema validation + path safety."""
+
+from __future__ import annotations
+
+import json
+import sys
+from pathlib import Path
+
+sys.path.insert(0, str(Path(__file__).resolve().parents[2] / "dashboard" / "backend"))
+
+import pytest
+import media_workspace as mw
+import media_manifest as mm
+
+
+@pytest.fixture
+def job(tmp_path, monkeypatch):
+    monkeypatch.setenv("MEDIA_WORKSPACE", str(tmp_path))
+    job_id = mw.new_job_id()
+    base = mw.ensure_job_scaffold(job_id)
+    return job_id, base
+
+
+VALID_MANIFEST = {
+    "render_file": "output/final.mp4",
+    "title": "Teste OmniNexus",
+    "caption": "Legenda",
+    "platform": "instagram",
+    "format": "vertical",
+    "width": 720,
+    "height": 1280,
+    "fps": 30,
+    "duration_seconds": 6,
+    "platform_settings": {"__type": "instagram", "post_type": "reel"},
+}
+
+
+def _write_manifest(base: Path, data: dict) -> None:
+    (base / "output" / "publication_manifest.json").write_text(json.dumps(data), encoding="utf-8")
+
+
+def test_valid_manifest_loads(job):
+    job_id, base = job
+    (base / "output" / "final.mp4").write_bytes(b"fake")
+    _write_manifest(base, {**VALID_MANIFEST, "job_id": job_id})
+    result = mm.load_and_validate_manifest(base)
+    assert result["_resolved_render_path"] == str((base / "output" / "final.mp4").resolve())
+
+
+@pytest.mark.parametrize("missing_field", [
+    "job_id", "render_file", "title", "platform", "format", "width", "height", "fps", "duration_seconds",
+])
+def test_missing_required_field_rejected(job, missing_field):
+    job_id, base = job
+    data = {**VALID_MANIFEST, "job_id": job_id}
+    del data[missing_field]
+    _write_manifest(base, data)
+    with pytest.raises(mm.ManifestValidationError):
+        mm.load_and_validate_manifest(base)
+
+
+def test_invalid_platform_rejected(job):
+    job_id, base = job
+    _write_manifest(base, {**VALID_MANIFEST, "job_id": job_id, "platform": "facebook"})
+    with pytest.raises(mm.ManifestValidationError):
+        mm.load_and_validate_manifest(base)
+
+
+def test_invalid_fps_rejected(job):
+    job_id, base = job
+    _write_manifest(base, {**VALID_MANIFEST, "job_id": job_id, "fps": 25})
+    with pytest.raises(mm.ManifestValidationError):
+        mm.load_and_validate_manifest(base)
+
+
+@pytest.mark.parametrize("bad_render_file", [
+    "../../../etc/passwd",
+    "/etc/passwd",
+    "../../output/final.mp4",
+])
+def test_path_traversal_in_render_file_rejected(job, bad_render_file):
+    job_id, base = job
+    _write_manifest(base, {**VALID_MANIFEST, "job_id": job_id, "render_file": bad_render_file})
+    with pytest.raises(mm.ManifestValidationError):
+        mm.load_and_validate_manifest(base)
+
+
+def test_missing_manifest_file_rejected(job):
+    _job_id, base = job
+    with pytest.raises(mm.ManifestValidationError):
+        mm.load_and_validate_manifest(base)
+
+
+def test_malformed_json_rejected(job):
+    job_id, base = job
+    (base / "output" / "publication_manifest.json").write_text("{not valid json", encoding="utf-8")
+    with pytest.raises(mm.ManifestValidationError):
+        mm.load_and_validate_manifest(base)
+
+
+def test_platform_settings_requires_type_when_present(job):
+    job_id, base = job
+    data = {**VALID_MANIFEST, "job_id": job_id, "platform_settings": {"post_type": "reel"}}
+    _write_manifest(base, data)
+    with pytest.raises(mm.ManifestValidationError):
+        mm.load_and_validate_manifest(base)
+
+
+def test_extra_fields_tolerated(job):
+    job_id, base = job
+    data = {**VALID_MANIFEST, "job_id": job_id, "notes": "agent's own scratch notes"}
+    (base / "output" / "final.mp4").write_bytes(b"fake")
+    _write_manifest(base, data)
+    result = mm.load_and_validate_manifest(base)
+    assert result["notes"] == "agent's own scratch notes"
diff --git a/tests/media/test_media_validation.py b/tests/media/test_media_validation.py
new file mode 100644
index 000000000..7c501739c
--- /dev/null
+++ b/tests/media/test_media_validation.py
@@ -0,0 +1,112 @@
+"""media_validation.py — ffprobe-based MP4 validation.
+
+Uses the real ffmpeg/ffprobe binaries (not mocked) to generate a tiny test
+clip — this is the same validator the media-worker runs against real
+HyperFrames renders, so exercising it against a real MP4 is more honest than
+mocking subprocess output. Skips if ffmpeg/ffprobe aren't on PATH.
+"""
+
+from __future__ import annotations
+
+import shutil
+import subprocess
+import sys
+from pathlib import Path
+
+sys.path.insert(0, str(Path(__file__).resolve().parents[2] / "dashboard" / "backend"))
+
+import pytest
+import media_validation as mv
+
+pytestmark = pytest.mark.skipif(
+    shutil.which("ffmpeg") is None or shutil.which("ffprobe") is None,
+    reason="ffmpeg/ffprobe not available in this environment",
+)
+
+
+@pytest.fixture(scope="module")
+def sample_clip(tmp_path_factory):
+    """720x1280, 6s, 30fps, h264, no audio — matches the briefing's smoke-test spec."""
+    out = tmp_path_factory.mktemp("clips") / "sample.mp4"
+    subprocess.run(
+        ["ffmpeg", "-y", "-f", "lavfi", "-i", "color=c=blue:s=720x1280:d=6:r=30",
+         "-c:v", "libx264", "-pix_fmt", "yuv420p", str(out)],
+        check=True, capture_output=True,
+    )
+    return out
+
+
+def test_extract_metadata_matches_known_clip(sample_clip):
+    meta = mv.extract_metadata(sample_clip)
+    assert meta.width == 720
+    assert meta.height == 1280
+    assert meta.video_codec == "h264"
+    assert abs(meta.duration_seconds - 6.0) < 0.5
+    assert abs(meta.fps - 30.0) < 1.0
+    assert meta.has_audio is False
+    assert meta.size_bytes > 0
+
+
+def test_validate_mp4_passes_matching_expectations(sample_clip):
+    meta = mv.validate_mp4(
+        sample_clip, expected_width=720, expected_height=1280,
+        expected_duration_seconds=6, expected_fps=30, require_audio=False,
+    )
+    assert meta.width == 720
+
+
+def test_validate_mp4_rejects_resolution_mismatch(sample_clip):
+    with pytest.raises(mv.ValidationError, match="Resolução"):
+        mv.validate_mp4(sample_clip, expected_width=1080, expected_height=1920,
+                         expected_duration_seconds=6, expected_fps=30)
+
+
+def test_validate_mp4_rejects_duration_mismatch(sample_clip):
+    with pytest.raises(mv.ValidationError, match="Duração"):
+        mv.validate_mp4(sample_clip, expected_width=720, expected_height=1280,
+                         expected_duration_seconds=20, expected_fps=30)
+
+
+def test_validate_mp4_rejects_fps_mismatch(sample_clip):
+    with pytest.raises(mv.ValidationError, match="FPS"):
+        mv.validate_mp4(sample_clip, expected_width=720, expected_height=1280,
+                         expected_duration_seconds=6, expected_fps=60)
+
+
+def test_validate_mp4_rejects_unexpected_audio_presence(sample_clip):
+    with pytest.raises(mv.ValidationError, match="Áudio"):
+        mv.validate_mp4(sample_clip, expected_width=720, expected_height=1280,
+                         expected_duration_seconds=6, expected_fps=30, require_audio=True)
+
+
+def test_validate_mp4_rejects_oversized_file(sample_clip):
+    with pytest.raises(mv.ValidationError, match="tamanho"):
+        mv.validate_mp4(sample_clip, expected_width=720, expected_height=1280,
+                         expected_duration_seconds=6, expected_fps=30, max_size_bytes=10)
+
+
+def test_validate_mp4_rejects_path_outside_workspace(sample_clip, tmp_path):
+    other_root = tmp_path / "other-workspace"
+    other_root.mkdir()
+    with pytest.raises(mv.ValidationError, match="workspace"):
+        mv.validate_mp4(sample_clip, expected_width=720, expected_height=1280,
+                         expected_duration_seconds=6, expected_fps=30, workspace_root=other_root)
+
+
+def test_extract_metadata_rejects_missing_file(tmp_path):
+    with pytest.raises(mv.ValidationError, match="não encontrado"):
+        mv.extract_metadata(tmp_path / "does-not-exist.mp4")
+
+
+def test_extract_metadata_rejects_empty_file(tmp_path):
+    f = tmp_path / "empty.mp4"
+    f.write_bytes(b"")
+    with pytest.raises(mv.ValidationError, match="vazio"):
+        mv.extract_metadata(f)
+
+
+def test_extract_metadata_rejects_non_video_file(tmp_path):
+    f = tmp_path / "not-a-video.mp4"
+    f.write_text("this is plain text, not a real mp4")
+    with pytest.raises(mv.ValidationError):
+        mv.extract_metadata(f)
diff --git a/tests/media/test_media_workspace.py b/tests/media/test_media_workspace.py
new file mode 100644
index 000000000..2fdf8550a
--- /dev/null
+++ b/tests/media/test_media_workspace.py
@@ -0,0 +1,107 @@
+"""media_workspace.py — path traversal prevention, sanitization, checksum."""
+
+from __future__ import annotations
+
+import hashlib
+import sys
+from pathlib import Path
+
+sys.path.insert(0, str(Path(__file__).resolve().parents[2] / "dashboard" / "backend"))
+
+import pytest
+import media_workspace as mw
+
+
+@pytest.fixture
+def workspace(tmp_path, monkeypatch):
+    monkeypatch.setenv("MEDIA_WORKSPACE", str(tmp_path))
+    return tmp_path
+
+
+def test_job_id_generation_and_validation():
+    job_id = mw.new_job_id()
+    assert mw.is_valid_job_id(job_id)
+    assert not mw.is_valid_job_id("../../etc/passwd")
+    assert not mw.is_valid_job_id("not-a-uuid")
+    assert not mw.is_valid_job_id("")
+
+
+def test_job_dir_rejects_non_uuid(workspace):
+    with pytest.raises(mw.PathSecurityError):
+        mw.job_dir("../../etc/passwd")
+
+
+def test_ensure_job_scaffold_creates_expected_layout(workspace):
+    job_id = mw.new_job_id()
+    base = mw.ensure_job_scaffold(job_id)
+    for sub in ("input/brand", "input/assets", "project", "output", "logs"):
+        assert (base / sub).is_dir()
+
+
+@pytest.mark.parametrize("bad_path", [
+    "../evil",
+    "/etc/passwd",
+    "a/../../evil",
+    "../../../../etc/shadow",
+    "input/../../../etc/passwd",
+])
+def test_resolve_within_rejects_traversal(workspace, bad_path):
+    job_id = mw.new_job_id()
+    base = mw.ensure_job_scaffold(job_id)
+    with pytest.raises(mw.PathSecurityError):
+        mw.resolve_within(base, bad_path)
+
+
+def test_resolve_within_accepts_legit_relative_path(workspace):
+    job_id = mw.new_job_id()
+    base = mw.ensure_job_scaffold(job_id)
+    resolved = mw.resolve_within(base, "output/final.mp4")
+    assert resolved == (base / "output" / "final.mp4").resolve()
+
+
+def test_resolve_within_rejects_absolute_path(workspace):
+    job_id = mw.new_job_id()
+    base = mw.ensure_job_scaffold(job_id)
+    with pytest.raises(mw.PathSecurityError):
+        mw.resolve_within(base, "/etc/passwd")
+
+
+def test_safe_asset_filename_strips_directories_and_sanitizes():
+    assert mw.safe_asset_filename("../../evil.mp4") == "evil.mp4"
+    assert mw.safe_asset_filename("/etc/passwd.png") == "passwd.png"
+    result = mw.safe_asset_filename("logo weird name!!.PNG")
+    assert result.endswith(".png")
+    assert " " not in result and "!" not in result
+
+
+def test_safe_asset_filename_rejects_disallowed_extension():
+    with pytest.raises(mw.PathSecurityError):
+        mw.safe_asset_filename("script.sh")
+    with pytest.raises(mw.PathSecurityError):
+        mw.safe_asset_filename("payload.exe")
+
+
+def test_sha256_file_streams_correctly(tmp_path):
+    f = tmp_path / "final.mp4"
+    content = b"hello world" * 100_000  # large enough to exercise chunking
+    f.write_bytes(content)
+    expected = hashlib.sha256(content).hexdigest()
+    assert mw.sha256_file(f, chunk_size=4096) == expected
+
+
+def test_skills_symlink_best_effort_when_source_missing(workspace, monkeypatch):
+    monkeypatch.setenv("MEDIA_SKILLS_DIR", "/nonexistent/path")
+    job_id = mw.new_job_id()
+    base = mw.ensure_job_scaffold(job_id)  # must not raise
+    assert not (base / ".claude" / "skills").exists()
+
+
+def test_skills_symlink_created_when_source_exists(workspace, monkeypatch, tmp_path):
+    skills_src = tmp_path.parent / "skills-source"
+    skills_src.mkdir(exist_ok=True)
+    monkeypatch.setenv("MEDIA_SKILLS_DIR", str(skills_src))
+    job_id = mw.new_job_id()
+    base = mw.ensure_job_scaffold(job_id)
+    link = base / ".claude" / "skills"
+    assert link.is_symlink()
+    assert link.resolve() == skills_src.resolve()
diff --git a/tests/media/test_postiz_client.py b/tests/media/test_postiz_client.py
new file mode 100644
index 000000000..44ffe8b69
--- /dev/null
+++ b/tests/media/test_postiz_client.py
@@ -0,0 +1,301 @@
+"""postiz_client.py — HTTP mocked (never touches a real Postiz instance),
+payload builders, URL safety, secret redaction, idempotent-friendly design.
+"""
+
+from __future__ import annotations
+
+import sys
+from pathlib import Path
+from unittest.mock import patch
+
+sys.path.insert(0, str(Path(__file__).resolve().parents[2] / "dashboard" / "backend"))
+
+import pytest
+from postiz_client import (
+    PostizClient, PostizAPIError, PostizConfigError,
+    build_instagram_payload, build_youtube_payload, build_linkedin_payload, build_tiktok_payload,
+    build_platform_settings,
+)
+
+
+class _Resp:
+    def __init__(self, body, status_code=200, text=None):
+        self._body = body
+        self.status_code = status_code
+        self.text = text if text is not None else str(body)
+
+    def json(self):
+        return self._body
+
+
+@pytest.fixture
+def client():
+    return PostizClient(
+        base_url="https://postiz.example.com", api_key="secret-key-123",
+        allowed_media_hosts=frozenset({"cdn.example.com"}),
+        integration_ids={"instagram": "int-ig-1"},
+    )
+
+
+# ── construction / config ────────────────────────────────────────────────
+
+def test_requires_https():
+    with pytest.raises(PostizConfigError):
+        PostizClient(base_url="http://postiz.example.com", api_key="x")
+
+
+def test_requires_url_and_key():
+    with pytest.raises(PostizConfigError):
+        PostizClient(base_url="", api_key="x")
+    with pytest.raises(PostizConfigError):
+        PostizClient(base_url="https://postiz.example.com", api_key="")
+
+
+def test_from_env_returns_none_when_unconfigured(monkeypatch):
+    monkeypatch.delenv("POSTIZ_URL", raising=False)
+    monkeypatch.delenv("POSTIZ_API_KEY", raising=False)
+    assert PostizClient.from_env() is None
+
+
+def test_from_env_builds_client(monkeypatch):
+    monkeypatch.setenv("POSTIZ_URL", "https://postiz.example.com")
+    monkeypatch.setenv("POSTIZ_API_KEY", "key123")
+    monkeypatch.setenv("POSTIZ_INTEGRATION_TIKTOK_ID", "int-tt-1")
+    c = PostizClient.from_env()
+    assert c is not None
+    assert c.base_url == "https://postiz.example.com"
+    assert c.integration_ids["tiktok"] == "int-tt-1"
+
+
+def test_from_env_honors_legacy_timeout_var(monkeypatch):
+    monkeypatch.setenv("POSTIZ_URL", "https://postiz.example.com")
+    monkeypatch.setenv("POSTIZ_API_KEY", "key123")
+    monkeypatch.delenv("POSTIZ_REQUEST_TIMEOUT_SECONDS", raising=False)
+    monkeypatch.setenv("POSTIZ_HTTP_TIMEOUT_SECONDS", "45")
+    c = PostizClient.from_env()
+    assert c.request_timeout == 45.0
+
+
+# ── media URL safety ─────────────────────────────────────────────────────
+
+def test_is_safe_media_url_accepts_allowlisted_https(client):
+    assert client.is_safe_media_url("https://cdn.example.com/x.jpg")
+    assert client.is_safe_media_url("https://sub.cdn.example.com/x.jpg")
+
+
+@pytest.mark.parametrize("url", [
+    "http://cdn.example.com/x.jpg",         # not https
+    "https://evil.example/x.jpg",           # not allowlisted
+    "https://user:pass@cdn.example.com/x",  # userinfo present
+    "not-a-url",
+])
+def test_is_safe_media_url_rejects(client, url):
+    assert not client.is_safe_media_url(url)
+
+
+# ── secret redaction ──────────────────────────────────────────────────────
+
+def test_redact_strips_api_key_from_error_text(client):
+    msg = client._redact(f"failed with key secret-key-123 in body")
+    assert "secret-key-123" not in msg
+    assert "REDACTED" in msg
+
+
+def test_network_error_never_leaks_api_key(client):
+    with patch("postiz_client.requests.request", side_effect=Exception("boom secret-key-123")):
+        with pytest.raises(PostizAPIError) as exc_info:
+            client.list_integrations()
+    assert "secret-key-123" not in str(exc_info.value)
+
+
+# ── upload ────────────────────────────────────────────────────────────────
+
+def test_upload_file_streams_and_parses_response(client, tmp_path):
+    f = tmp_path / "final.mp4"
+    f.write_bytes(b"fake-mp4-bytes")
+    with patch("postiz_client.requests.request", return_value=_Resp(
+        {"id": "media-1", "path": "https://uploads.postiz.com/final.mp4", "name": "final.mp4"}
+    )) as mock_request:
+        result = client.upload_file(f)
+    assert result == {"id": "media-1", "path": "https://uploads.postiz.com/final.mp4", "name": "final.mp4"}
+    call = mock_request.call_args
+    assert call.args[0] == "POST"
+    assert call.args[1].endswith("/public/v1/upload")
+    assert "files" in call.kwargs
+    assert "Authorization" not in str(call.kwargs.get("files"))  # key never embedded in the multipart body
+
+
+def test_upload_file_missing_file_raises(client, tmp_path):
+    with pytest.raises(Exception):
+        client.upload_file(tmp_path / "does-not-exist.mp4")
+
+
+def test_upload_file_rejects_response_without_id_or_path(client, tmp_path):
+    f = tmp_path / "final.mp4"
+    f.write_bytes(b"x")
+    with patch("postiz_client.requests.request", return_value=_Resp({"name": "final.mp4"})):
+        with pytest.raises(PostizAPIError):
+            client.upload_file(f)
+
+
+# ── HTTP error codes ──────────────────────────────────────────────────────
+
+@pytest.mark.parametrize("status_code", [401, 413, 429, 500])
+def test_request_raises_on_http_error(client, status_code):
+    with patch("postiz_client.requests.request", return_value=_Resp({"error": "x"}, status_code=status_code)):
+        with pytest.raises(PostizAPIError) as exc_info:
+            client.list_integrations()
+    assert exc_info.value.status_code == status_code
+
+
+def test_request_raises_on_invalid_json_response(client):
+    resp = _Resp(None, status_code=200)
+    resp.json = lambda: (_ for _ in ()).throw(ValueError("bad json"))
+    with patch("postiz_client.requests.request", return_value=resp):
+        with pytest.raises(PostizAPIError):
+            client.list_integrations()
+
+
+# ── post creation ─────────────────────────────────────────────────────────
+
+def test_create_draft_uses_type_draft(client):
+    with patch("postiz_client.requests.request", return_value=_Resp(
+        [{"postId": "post-1"}]
+    )) as mock_request:
+        client.create_draft(
+            integration_id="int-1", content="Legenda", media=[],
+            settings={"__type": "instagram", "post_type": "post"}, now_iso_utc="2026-07-19T00:00:00.000Z",
+        )
+    sent = mock_request.call_args.kwargs["json"]
+    assert sent["type"] == "draft"
+    assert "creationMethod" not in sent  # only the legacy create_post_now path sets this
+
+
+def test_create_post_now_preserves_legacy_creation_method_field(client):
+    with patch("postiz_client.requests.request", return_value=_Resp([{"postId": "post-1"}])) as mock_request:
+        client.create_post_now(
+            integration_id="int-1", content="x", media=[], settings={"__type": "linkedin"},
+            now_iso_utc="2026-07-19T00:00:00.000Z",
+        )
+    sent = mock_request.call_args.kwargs["json"]
+    assert sent["type"] == "now"
+    assert sent["creationMethod"] == "API"
+
+
+def test_schedule_post_uses_type_schedule_and_future_date(client):
+    with patch("postiz_client.requests.request", return_value=_Resp([{"postId": "post-1"}])) as mock_request:
+        client.schedule_post(
+            integration_id="int-1", content="x", media=[], settings={"__type": "youtube"},
+            scheduled_at_utc="2026-08-01T12:00:00.000Z",
+        )
+    sent = mock_request.call_args.kwargs["json"]
+    assert sent["type"] == "schedule"
+    assert sent["date"] == "2026-08-01T12:00:00.000Z"
+
+
+def test_create_post_raw_rejects_invalid_post_type(client):
+    with pytest.raises(ValueError):
+        client._create_post_raw(
+            integration_id="i", content="x", media=[], settings={}, post_type="bogus", date_iso_utc="now",
+        )
+
+
+def test_change_status_valid_values(client):
+    with patch("postiz_client.requests.request", return_value=_Resp({"id": "post-1", "state": "QUEUE"})) as mock_request:
+        client.change_status("post-1", "schedule")
+    assert mock_request.call_args.args[0] == "PUT"
+    assert mock_request.call_args.args[1].endswith("/public/v1/posts/post-1/status")
+
+
+def test_change_status_rejects_invalid_value(client):
+    with pytest.raises(ValueError):
+        client.change_status("post-1", "published")
+
+
+# ── integration selection ────────────────────────────────────────────────
+
+def test_select_integration_uses_configured_id(client):
+    integrations = [
+        {"id": "int-a", "identifier": "instagram", "disabled": False},
+        {"id": "int-ig-1", "identifier": "instagram", "disabled": False},
+    ]
+    match = client.select_integration("instagram", integrations)
+    assert match["id"] == "int-ig-1"
+
+
+def test_select_integration_ambiguous_without_configured_id():
+    c = PostizClient(base_url="https://postiz.example.com", api_key="k")
+    integrations = [
+        {"id": "int-a", "identifier": "linkedin", "disabled": False},
+        {"id": "int-b", "identifier": "linkedin", "disabled": False},
+    ]
+    assert c.select_integration("linkedin", integrations) is None
+
+
+def test_select_integration_ignores_disabled(client):
+    integrations = [{"id": "int-ig-1", "identifier": "instagram", "disabled": True}]
+    assert client.select_integration("instagram", integrations) is None
+
+
+# ── polling / publication confirmation (fail-closed) ─────────────────────
+
+def test_wait_for_publication_fails_closed_on_timeout(client):
+    with patch("postiz_client.requests.request", return_value=_Resp({"posts": [{"id": "post-1", "state": "QUEUE"}]})):
+        result = client.wait_for_publication(
+            ["post-1"], wait_seconds=0.2, poll_seconds=0.05, window=("start", "end"),
+        )
+    assert result["published"] is False
+
+
+def test_wait_for_publication_fails_closed_on_error_state(client):
+    with patch("postiz_client.requests.request", return_value=_Resp({"posts": [{"id": "post-1", "state": "ERROR"}]})):
+        result = client.wait_for_publication(
+            ["post-1"], wait_seconds=1, poll_seconds=0.05, window=("start", "end"),
+        )
+    assert result["published"] is False
+    assert "ERROR" in result["detail"]
+
+
+def test_wait_for_publication_succeeds_only_on_confirmed_published(client):
+    with patch("postiz_client.requests.request", return_value=_Resp({"posts": [{"id": "post-1", "state": "PUBLISHED"}]})):
+        result = client.wait_for_publication(
+            ["post-1"], wait_seconds=1, poll_seconds=0.05, window=("start", "end"),
+        )
+    assert result["published"] is True
+
+
+# ── platform payload builders (schema confirmed against docs.postiz.com) ──
+
+def test_build_instagram_payload_defaults():
+    assert build_instagram_payload() == {"__type": "instagram", "post_type": "post"}
+
+
+def test_build_instagram_payload_rejects_invalid_post_type():
+    with pytest.raises(ValueError):
+        build_instagram_payload(post_type="reel")  # not a real Postiz post_type value
+
+
+def test_build_youtube_payload_requires_valid_title_length():
+    with pytest.raises(ValueError):
+        build_youtube_payload(title="x")  # too short (min 2 chars)
+
+
+def test_build_youtube_payload_rejects_invalid_visibility():
+    with pytest.raises(ValueError):
+        build_youtube_payload(title="Meu vídeo", visibility="hidden")
+
+
+def test_build_linkedin_payload_page_vs_personal():
+    assert build_linkedin_payload(page=False)["__type"] == "linkedin"
+    assert build_linkedin_payload(page=True)["__type"] == "linkedin-page"
+
+
+def test_build_tiktok_payload_rejects_invalid_privacy_level():
+    with pytest.raises(ValueError):
+        build_tiktok_payload(privacy_level="EVERYONE")
+
+
+def test_build_platform_settings_dispatch_and_unknown_platform():
+    assert build_platform_settings("linkedin")["__type"] == "linkedin"
+    with pytest.raises(ValueError):
+        build_platform_settings("facebook")
diff --git a/tests/media/test_provider_fallback_cwd.py b/tests/media/test_provider_fallback_cwd.py
new file mode 100644
index 000000000..a2e512bbe
--- /dev/null
+++ b/tests/media/test_provider_fallback_cwd.py
@@ -0,0 +1,70 @@
+"""provider_fallback.py — cwd extension (ADR-5): isolated job workspaces run
+subprocesses in their own directory and skip the shared /workspace lock.
+"""
+
+from __future__ import annotations
+
+import sys
+from pathlib import Path
+
+sys.path.insert(0, str(Path(__file__).resolve().parents[2] / "dashboard" / "backend"))
+
+import provider_fallback as pf
+
+
+def test_invoke_cli_run_honors_custom_cwd(tmp_path):
+    result = pf._invoke_cli_run(["/bin/pwd"], {"PATH": "/usr/bin:/bin"}, 5, tmp_path, output_mode="envelope")
+    assert result["status"] == "success"
+    assert result["output"].strip() == str(tmp_path)
+
+
+def test_invoke_cli_run_defaults_to_workspace_when_cwd_omitted():
+    result = pf._invoke_cli_run(["/bin/pwd"], {"PATH": "/usr/bin:/bin"}, 5, pf.WORKSPACE, output_mode="envelope")
+    assert result["output"].strip() == str(pf.WORKSPACE)
+
+
+def test_invoke_with_fallback_skips_workspace_lock_when_cwd_given(tmp_path, monkeypatch):
+    """When cwd is provided, invoke_with_fallback must go straight to
+    _invoke_with_fallback_locked without acquiring _workspace_bash_lock —
+    an isolated media-job directory is not part of the shared /workspace
+    git tree and must not serialize behind heartbeats/Telegram sessions.
+    """
+    calls = {"lock_entered": False}
+
+    class _ExplodingLock:
+        def __enter__(self):
+            calls["lock_entered"] = True
+            raise AssertionError("must not acquire the shared workspace lock when cwd is given")
+
+        def __exit__(self, *a):
+            return False
+
+    def _fake_workspace_bash_lock(holder):
+        return _ExplodingLock()
+
+    monkeypatch.setattr(pf, "_workspace_bash_lock", _fake_workspace_bash_lock)
+    monkeypatch.setattr(pf, "_invoke_with_fallback_locked", lambda **kwargs: {"status": "success", "output": "ok"})
+
+    result = pf.invoke_with_fallback(prompt="hi", cwd=tmp_path)
+    assert result["status"] == "success"
+    assert calls["lock_entered"] is False
+
+
+def test_invoke_with_fallback_still_uses_workspace_lock_without_cwd(monkeypatch):
+    """Backward compatibility: existing callers (heartbeats, ADWs) that never
+    pass cwd keep going through the shared-workspace mutex exactly as before.
+    """
+    calls = {"lock_entered": False}
+
+    import contextlib
+
+    @contextlib.contextmanager
+    def _fake_lock(holder):
+        calls["lock_entered"] = True
+        yield
+
+    monkeypatch.setattr(pf, "_workspace_bash_lock", _fake_lock)
+    monkeypatch.setattr(pf, "_invoke_with_fallback_locked", lambda **kwargs: {"status": "success", "output": "ok"})
+
+    pf.invoke_with_fallback(prompt="hi")
+    assert calls["lock_entered"] is True
diff --git a/tests/media/test_routes_integrations_core_postiz.py b/tests/media/test_routes_integrations_core_postiz.py
new file mode 100644
index 000000000..1a8d1d9fb
--- /dev/null
+++ b/tests/media/test_routes_integrations_core_postiz.py
@@ -0,0 +1,182 @@
+"""routes/integrations_core_postiz.py — admin-only gate, secret masking,
+"keep current on masked/blank submit", SSRF guard, test-connection.
+"""
+
+from __future__ import annotations
+
+import sys
+from pathlib import Path
+from unittest.mock import patch
+
+import pytest
+
+sys.path.insert(0, str(Path(__file__).resolve().parents[2] / "dashboard" / "backend"))
+
+XHR = {"X-Requested-With": "XMLHttpRequest"}
+
+
+@pytest.fixture(autouse=True)
+def _isolate_env_file(app, tmp_path, monkeypatch):
+    """PUT /api/integrations/core/postiz writes to WORKSPACE/.env for real —
+    redirect it to a throwaway path so tests never touch this repo's actual
+    .env file. Depends on `app` so it patches AFTER conftest's
+    importlib.reload(routes.integrations_core_postiz) — reload re-executes
+    the module's top-level `from routes._helpers import WORKSPACE`, which
+    would silently undo a patch applied before it.
+
+    Also snapshots/restores every POSTIZ_*-ish env var: the route's PUT
+    handler intentionally does `os.environ[key] = value` directly (not via
+    monkeypatch) so the change is picked up immediately in-process — correct
+    in production, but it means a PUT test would otherwise leak a real key
+    into every later test in this same pytest process.
+    """
+    import os
+    import routes.integrations_core_postiz as postiz_routes
+    monkeypatch.setattr(postiz_routes, "WORKSPACE", tmp_path)
+
+    snapshot = {k: os.environ.get(k) for k in postiz_routes._ALLOWED_KEYS}
+    yield
+    for k, v in snapshot.items():
+        if v is None:
+            os.environ.pop(k, None)
+        else:
+            os.environ[k] = v
+
+
+def test_viewer_forbidden(viewer_client):
+    resp = viewer_client.get("/api/integrations/core/postiz", headers=XHR)
+    assert resp.status_code == 403
+
+
+def test_admin_get_without_xhr_header_forbidden(admin_client):
+    """_require_xhr() CSRF mitigation — session-cookie auth must carry the header."""
+    resp = admin_client.get("/api/integrations/core/postiz")
+    assert resp.status_code == 403
+
+
+def test_admin_get_returns_masked_config(admin_client, monkeypatch):
+    monkeypatch.setenv("POSTIZ_URL", "https://postiz.example.com")
+    monkeypatch.setenv("POSTIZ_API_KEY", "sk-super-secret-value-123")
+    resp = admin_client.get("/api/integrations/core/postiz", headers=XHR)
+    assert resp.status_code == 200
+    data = resp.get_json()
+    assert data["configured"] is True
+    assert data["config"]["POSTIZ_API_KEY"] != "sk-super-secret-value-123"
+    assert "****" in data["config"]["POSTIZ_API_KEY"]
+    assert data["config"]["POSTIZ_URL"] == "https://postiz.example.com"  # non-secret, not masked
+
+
+def test_put_rejects_non_https_url(admin_client):
+    resp = admin_client.put(
+        "/api/integrations/core/postiz", headers=XHR,
+        json={"POSTIZ_URL": "http://postiz.example.com"},
+    )
+    assert resp.status_code == 400
+
+
+def test_put_ssrf_guard_rejects_private_host(admin_client):
+    resp = admin_client.put(
+        "/api/integrations/core/postiz", headers=XHR,
+        json={"POSTIZ_URL": "https://10.0.0.5"},
+    )
+    assert resp.status_code == 400
+    assert "interno" in resp.get_json()["error"] or "privado" in resp.get_json()["error"]
+
+
+def test_put_ssrf_guard_allows_explicit_allowlisted_internal_host(admin_client, monkeypatch):
+    monkeypatch.setenv("POSTIZ_URL_ALLOWED_INTERNAL_HOSTS", "postiz-internal")
+    resp = admin_client.put(
+        "/api/integrations/core/postiz", headers=XHR,
+        json={"POSTIZ_URL": "https://postiz-internal"},
+    )
+    assert resp.status_code == 200
+
+
+def test_put_sets_url_and_key(admin_client):
+    resp = admin_client.put(
+        "/api/integrations/core/postiz", headers=XHR,
+        json={"POSTIZ_URL": "https://postiz.example.com", "POSTIZ_API_KEY": "brand-new-key"},
+    )
+    assert resp.status_code == 200
+    data = resp.get_json()
+    assert data["configured"] is True
+    assert "****" in data["config"]["POSTIZ_API_KEY"]
+
+
+def test_put_masked_submit_keeps_current_secret(admin_client, monkeypatch):
+    monkeypatch.setenv("POSTIZ_URL", "https://postiz.example.com")
+    monkeypatch.setenv("POSTIZ_API_KEY", "original-secret-key")
+
+    resp = admin_client.put(
+        "/api/integrations/core/postiz", headers=XHR,
+        json={"POSTIZ_API_KEY": "sk-****-abcd"},  # looks masked — must be ignored
+    )
+    # A submit where the only field is masked-and-ignored has nothing left
+    # to update — 400 "nothing to update" is as acceptable as a 200 no-op,
+    # as long as the stored secret is provably untouched either way.
+    assert resp.status_code in (200, 400)
+    import os
+    assert os.environ["POSTIZ_API_KEY"] == "original-secret-key"
+
+
+def test_put_blank_submit_never_wipes_stored_secret(admin_client, monkeypatch):
+    monkeypatch.setenv("POSTIZ_URL", "https://postiz.example.com")
+    monkeypatch.setenv("POSTIZ_API_KEY", "original-secret-key")
+
+    resp = admin_client.put(
+        "/api/integrations/core/postiz", headers=XHR,
+        json={"POSTIZ_API_KEY": ""},
+    )
+    assert resp.status_code in (200, 400)  # 400 if it ends up as "no valid fields"
+    import os
+    assert os.environ["POSTIZ_API_KEY"] == "original-secret-key"
+
+
+def test_put_rejects_invalid_default_post_mode(admin_client):
+    resp = admin_client.put(
+        "/api/integrations/core/postiz", headers=XHR,
+        json={"SOCIAL_DEFAULT_POST_MODE": "publish-immediately"},
+    )
+    assert resp.status_code == 400
+
+
+def test_put_rejects_non_numeric_timeout(admin_client):
+    resp = admin_client.put(
+        "/api/integrations/core/postiz", headers=XHR,
+        json={"POSTIZ_REQUEST_TIMEOUT_SECONDS": "not-a-number"},
+    )
+    assert resp.status_code == 400
+
+
+def test_put_rejects_unknown_keys_silently_ignored(admin_client):
+    """Only the explicit allowlist may ever be written — the briefing is
+    explicit: 'Não permita que o endpoint altere variáveis arbitrárias.'
+    """
+    resp = admin_client.put(
+        "/api/integrations/core/postiz", headers=XHR,
+        json={"DASHBOARD_API_TOKEN": "should-never-be-settable-here"},
+    )
+    assert resp.status_code == 400  # nothing valid to update
+    import os
+    assert "DASHBOARD_API_TOKEN" not in os.environ or os.environ.get("DASHBOARD_API_TOKEN") != "should-never-be-settable-here"
+
+
+def test_test_connection_requires_config(admin_client, monkeypatch):
+    monkeypatch.delenv("POSTIZ_URL", raising=False)
+    monkeypatch.delenv("POSTIZ_API_KEY", raising=False)
+    resp = admin_client.post("/api/integrations/core/postiz/test", headers=XHR)
+    assert resp.status_code == 400
+
+
+def test_test_connection_reports_per_platform_status(admin_client, monkeypatch):
+    monkeypatch.setenv("POSTIZ_URL", "https://postiz.example.com")
+    monkeypatch.setenv("POSTIZ_API_KEY", "key")
+    with patch("routes.integrations_core_postiz.PostizClient") as MockClient:
+        instance = MockClient.from_env.return_value
+        instance.test_connection.return_value = {
+            "ok": True, "detail": "2 integrações encontradas.",
+            "platforms": {"instagram": {"connected": True, "id": "int-1"}},
+        }
+        resp = admin_client.post("/api/integrations/core/postiz/test", headers=XHR)
+    assert resp.status_code == 200
+    assert resp.get_json()["ok"] is True
diff --git a/tests/media/test_routes_media_jobs.py b/tests/media/test_routes_media_jobs.py
new file mode 100644
index 000000000..0e4ca0e69
--- /dev/null
+++ b/tests/media/test_routes_media_jobs.py
@@ -0,0 +1,343 @@
+"""routes/media_jobs.py — Flask test client coverage: auth/RBAC, state
+machine enforcement at the HTTP boundary, idempotency, timezone handling,
+path traversal on the video endpoint.
+
+Postiz is always mocked here — these tests never touch a real Postiz
+instance (opt-in integration tests live elsewhere, gated by env vars).
+"""
+
+from __future__ import annotations
+
+import json
+import sys
+from datetime import datetime, timedelta, timezone
+from pathlib import Path
+from unittest.mock import patch
+
+sys.path.insert(0, str(Path(__file__).resolve().parents[2] / "dashboard" / "backend"))
+
+from postiz_client import PostizError  # noqa: E402
+
+
+def _create_job(client, **overrides):
+    body = {
+        "title": "Teste OmniNexus",
+        "brief": "Vídeo curto de teste",
+        "platform": "instagram",
+        "width": 720,
+        "height": 1280,
+        "fps": 30,
+        "duration_seconds": 6,
+        "publication_mode": "draft",
+    }
+    body.update(overrides)
+    resp = client.post("/api/media/jobs", json=body)
+    return resp
+
+
+# ── creation ──────────────────────────────────────────────────────────────
+
+def test_create_job_requires_fields(admin_client):
+    resp = admin_client.post("/api/media/jobs", json={"title": "x"})
+    assert resp.status_code == 400
+
+
+def test_create_job_rejects_invalid_platform(admin_client):
+    resp = _create_job(admin_client, platform="facebook")
+    assert resp.status_code == 400
+
+
+def test_create_job_defaults_to_queued(admin_client):
+    resp = _create_job(admin_client)
+    assert resp.status_code == 201
+    data = resp.get_json()
+    assert data["status"] == "queued"
+    assert data["attempt_count"] == 0
+
+
+def test_create_job_writes_input_manifest(admin_client, app, tmp_path):
+    resp = _create_job(admin_client)
+    data = resp.get_json()
+    workspace_path = Path(data["workspace_path"])
+    manifest = json.loads((workspace_path / "input" / "job.json").read_text())
+    assert manifest["job_id"] == data["id"]
+    assert manifest["platform"] == "instagram"
+
+
+def test_create_job_schedule_mode_requires_future_date(admin_client):
+    past = (datetime.now(timezone.utc) - timedelta(days=1)).isoformat()
+    resp = _create_job(admin_client, publication_mode="schedule", scheduled_at=past)
+    assert resp.status_code == 400
+
+
+def test_create_job_schedule_mode_accepts_future_date(admin_client):
+    future = (datetime.now(timezone.utc) + timedelta(days=1)).strftime("%Y-%m-%dT%H:%M:%S")
+    resp = _create_job(admin_client, publication_mode="schedule", scheduled_at=future, timezone="America/Bahia")
+    assert resp.status_code == 201
+    data = resp.get_json()
+    assert data["scheduled_at_utc"] is not None
+    assert data["scheduled_at_utc"].endswith("Z")
+
+
+def test_create_job_timezone_conversion_america_bahia_to_utc(admin_client):
+    """America/Bahia is UTC-3 year-round (no DST) — 10:00 local -> 13:00 UTC."""
+    resp = _create_job(
+        admin_client, publication_mode="schedule",
+        scheduled_at="2027-01-15T10:00:00", timezone="America/Bahia",
+    )
+    assert resp.status_code == 201
+    data = resp.get_json()
+    assert data["scheduled_at_utc"] == "2027-01-15T13:00:00.000Z"
+
+
+# ── RBAC ──────────────────────────────────────────────────────────────────
+
+def test_viewer_cannot_create_job(viewer_client):
+    resp = _create_job(viewer_client)
+    assert resp.status_code == 403
+
+
+def test_viewer_cannot_approve(viewer_client, admin_client):
+    created = _create_job(admin_client).get_json()
+    resp = viewer_client.post(f"/api/media/jobs/{created['id']}/approve")
+    assert resp.status_code == 403
+
+
+def test_viewer_can_list_and_view(viewer_client, admin_client):
+    created = _create_job(admin_client).get_json()
+    assert viewer_client.get("/api/media/jobs").status_code == 200
+    assert viewer_client.get(f"/api/media/jobs/{created['id']}").status_code == 200
+
+
+# ── state machine enforcement at the HTTP boundary ──────────────────────
+
+def test_approve_before_ready_for_review_is_409(admin_client):
+    created = _create_job(admin_client).get_json()
+    resp = admin_client.post(f"/api/media/jobs/{created['id']}/approve")
+    assert resp.status_code == 409
+    assert resp.get_json()["error"] == "invalid_transition"
+
+
+def test_create_draft_before_approved_is_409(admin_client):
+    created = _create_job(admin_client).get_json()
+    resp = admin_client.post(f"/api/media/jobs/{created['id']}/create-draft")
+    assert resp.status_code == 409
+
+
+def test_schedule_before_draft_created_is_400_or_409(admin_client):
+    created = _create_job(admin_client).get_json()
+    resp = admin_client.post(f"/api/media/jobs/{created['id']}/schedule")
+    assert resp.status_code in (400, 409)
+
+
+def test_reject_requires_reason(admin_client):
+    created = _create_job(admin_client).get_json()
+    admin_client.patch(f"/api/media/jobs/{created['id']}", json={"status": "preparing"})
+    admin_client.patch(f"/api/media/jobs/{created['id']}", json={"status": "generating"})
+    admin_client.patch(f"/api/media/jobs/{created['id']}", json={"status": "rendering"})
+    admin_client.patch(f"/api/media/jobs/{created['id']}", json={"status": "validating"})
+    admin_client.patch(f"/api/media/jobs/{created['id']}", json={"status": "ready_for_review"})
+    resp = admin_client.post(f"/api/media/jobs/{created['id']}/reject", json={})
+    assert resp.status_code == 400
+    resp2 = admin_client.post(f"/api/media/jobs/{created['id']}/reject", json={"reason": "qualidade ruim"})
+    assert resp2.status_code == 200
+    assert resp2.get_json()["status"] == "rejected"
+
+
+def test_patch_rejects_invalid_status_transition(admin_client):
+    created = _create_job(admin_client).get_json()
+    resp = admin_client.patch(f"/api/media/jobs/{created['id']}", json={"status": "published"})
+    assert resp.status_code == 409
+
+
+# ── /run atomic claim ─────────────────────────────────────────────────────
+
+def test_run_claims_queued_job(admin_client):
+    created = _create_job(admin_client).get_json()
+    resp = admin_client.post(f"/api/media/jobs/{created['id']}/run", json={"agent": "media-worker"})
+    assert resp.status_code == 200
+    data = resp.get_json()
+    assert data["status"] == "preparing"
+    assert data["locked_by"] == "media-worker"
+    assert data["attempt_count"] == 1
+
+
+def test_run_second_claim_conflicts(admin_client):
+    created = _create_job(admin_client).get_json()
+    admin_client.post(f"/api/media/jobs/{created['id']}/run", json={"agent": "worker-a"})
+    resp = admin_client.post(f"/api/media/jobs/{created['id']}/run", json={"agent": "worker-b"})
+    assert resp.status_code == 409
+
+
+def test_run_from_rejected_requeues_and_resets_attempt_count(admin_client):
+    created = _create_job(admin_client).get_json()
+    job_id = created["id"]
+    for status in ("preparing", "generating", "rendering", "validating", "ready_for_review"):
+        admin_client.patch(f"/api/media/jobs/{job_id}", json={"status": status})
+    admin_client.post(f"/api/media/jobs/{job_id}/reject", json={"reason": "x"})
+    resp = admin_client.post(f"/api/media/jobs/{job_id}/run")
+    assert resp.status_code == 200
+    data = resp.get_json()
+    assert data["status"] == "preparing"
+    assert data["last_error"] is None
+
+
+# ── cancel ────────────────────────────────────────────────────────────────
+
+def test_cancel_from_queued(admin_client):
+    created = _create_job(admin_client).get_json()
+    resp = admin_client.post(f"/api/media/jobs/{created['id']}/cancel")
+    assert resp.status_code == 200
+    assert resp.get_json()["status"] == "cancelled"
+
+
+def test_cancel_from_terminal_state_is_409(admin_client):
+    created = _create_job(admin_client).get_json()
+    admin_client.post(f"/api/media/jobs/{created['id']}/cancel")
+    resp = admin_client.post(f"/api/media/jobs/{created['id']}/cancel")
+    assert resp.status_code == 409
+
+
+# ── idempotent create-draft (mocked Postiz) ──────────────────────────────
+
+def _approve_job(client, job_id):
+    for status in ("preparing", "generating", "rendering", "validating", "ready_for_review"):
+        client.patch(f"/api/media/jobs/{job_id}", json={"status": status})
+    return client.post(f"/api/media/jobs/{job_id}/approve")
+
+
+def test_create_draft_requires_render_path(admin_client):
+    created = _create_job(admin_client).get_json()
+    _approve_job(admin_client, created["id"])
+    resp = admin_client.post(f"/api/media/jobs/{created['id']}/create-draft")
+    assert resp.status_code == 400
+    assert resp.get_json()["error"] == "render_missing"
+
+
+def test_create_draft_uploads_once_and_creates_post_once(admin_client, tmp_path, monkeypatch):
+    created = _create_job(admin_client).get_json()
+    job_id = created["id"]
+    render_path = Path(created["workspace_path"]) / "output" / "final.mp4"
+    render_path.write_bytes(b"fake-mp4")
+    admin_client.patch(f"/api/media/jobs/{job_id}", json={"render_path": str(render_path)})
+    _approve_job(admin_client, job_id)
+
+    monkeypatch.setenv("POSTIZ_URL", "https://postiz.example.com")
+    monkeypatch.setenv("POSTIZ_API_KEY", "key")
+
+    with patch("routes.media_jobs.PostizClient") as MockClient:
+        instance = MockClient.from_env.return_value
+        instance.upload_file.return_value = {"id": "media-1", "path": "https://x/final.mp4", "name": "final.mp4"}
+        instance.list_integrations.return_value = [{"id": "int-ig", "identifier": "instagram", "disabled": False}]
+        instance.select_integration.return_value = {"id": "int-ig", "identifier": "instagram"}
+        instance.create_draft.return_value = [{"postId": "post-1"}]
+
+        resp1 = admin_client.post(f"/api/media/jobs/{job_id}/create-draft")
+        assert resp1.status_code == 200
+        assert resp1.get_json()["status"] == "draft_created"
+        assert instance.upload_file.call_count == 1
+        assert instance.create_draft.call_count == 1
+
+        # Idempotent re-POST: already draft_created + postiz_post_id set -> no new calls.
+        resp2 = admin_client.post(f"/api/media/jobs/{job_id}/create-draft")
+        assert resp2.status_code == 200
+        assert instance.upload_file.call_count == 1
+        assert instance.create_draft.call_count == 1
+
+
+def test_create_draft_failure_sets_retryable_and_preserves_uploaded_media_id(admin_client, monkeypatch):
+    created = _create_job(admin_client).get_json()
+    job_id = created["id"]
+    render_path = Path(created["workspace_path"]) / "output" / "final.mp4"
+    render_path.write_bytes(b"fake-mp4")
+    admin_client.patch(f"/api/media/jobs/{job_id}", json={"render_path": str(render_path)})
+    _approve_job(admin_client, job_id)
+
+    monkeypatch.setenv("POSTIZ_URL", "https://postiz.example.com")
+    monkeypatch.setenv("POSTIZ_API_KEY", "key")
+
+    with patch("routes.media_jobs.PostizClient") as MockClient:
+        instance = MockClient.from_env.return_value
+        instance.upload_file.return_value = {"id": "media-1", "path": "https://x/final.mp4", "name": "final.mp4"}
+        instance.list_integrations.side_effect = PostizError("timeout talking to Postiz")
+
+        resp = admin_client.post(f"/api/media/jobs/{job_id}/create-draft")
+        assert resp.status_code == 502
+        data = admin_client.get(f"/api/media/jobs/{job_id}").get_json()
+        assert data["status"] == "retryable_failure"
+        assert data["postiz_media_id"] == "media-1"  # upload result preserved — won't re-upload on retry
+
+        # Retry: upload must NOT happen again (idempotency).
+        instance.list_integrations.side_effect = None
+        instance.list_integrations.return_value = [{"id": "int-ig", "identifier": "instagram", "disabled": False}]
+        instance.select_integration.return_value = {"id": "int-ig", "identifier": "instagram"}
+        instance.create_draft.return_value = [{"postId": "post-1"}]
+        resp2 = admin_client.post(f"/api/media/jobs/{job_id}/create-draft")
+        assert resp2.status_code == 200
+        assert instance.upload_file.call_count == 1
+
+
+# ── schedule ──────────────────────────────────────────────────────────────
+
+def test_schedule_requires_future_date_and_draft_created(admin_client, monkeypatch):
+    future = (datetime.now(timezone.utc) + timedelta(days=1)).strftime("%Y-%m-%dT%H:%M:%S")
+    created = _create_job(admin_client, publication_mode="schedule", scheduled_at=future).get_json()
+    job_id = created["id"]
+    resp = admin_client.post(f"/api/media/jobs/{job_id}/schedule")
+    # Never scheduled: the job never went through create-draft, so it fails
+    # the "has a postiz_post_id" precondition before the state-machine check
+    # is even reached — either error is an acceptable "not ready" signal.
+    assert resp.status_code in (400, 409)
+
+
+def test_schedule_calls_change_status_not_create_post(admin_client, monkeypatch):
+    future = (datetime.now(timezone.utc) + timedelta(days=2)).strftime("%Y-%m-%dT%H:%M:%S")
+    created = _create_job(admin_client, publication_mode="schedule", scheduled_at=future).get_json()
+    job_id = created["id"]
+    render_path = Path(created["workspace_path"]) / "output" / "final.mp4"
+    render_path.write_bytes(b"fake-mp4")
+    admin_client.patch(f"/api/media/jobs/{job_id}", json={"render_path": str(render_path)})
+    _approve_job(admin_client, job_id)
+
+    monkeypatch.setenv("POSTIZ_URL", "https://postiz.example.com")
+    monkeypatch.setenv("POSTIZ_API_KEY", "key")
+
+    with patch("routes.media_jobs.PostizClient") as MockClient:
+        instance = MockClient.from_env.return_value
+        instance.upload_file.return_value = {"id": "media-1", "path": "https://x/final.mp4", "name": "final.mp4"}
+        instance.list_integrations.return_value = [{"id": "int-ig", "identifier": "instagram", "disabled": False}]
+        instance.select_integration.return_value = {"id": "int-ig", "identifier": "instagram"}
+        instance.create_draft.return_value = [{"postId": "post-1"}]
+        admin_client.post(f"/api/media/jobs/{job_id}/create-draft")
+
+        resp = admin_client.post(f"/api/media/jobs/{job_id}/schedule")
+        assert resp.status_code == 200
+        assert resp.get_json()["status"] == "scheduled"
+        instance.change_status.assert_called_once_with("post-1", "schedule")
+        instance.create_draft.assert_called_once()  # never called twice — no duplicate post
+
+
+# ── video endpoint: path traversal defense ───────────────────────────────
+
+def test_video_endpoint_404_when_no_render(admin_client):
+    created = _create_job(admin_client).get_json()
+    resp = admin_client.get(f"/api/media/jobs/{created['id']}/video")
+    assert resp.status_code == 404
+
+
+def test_video_endpoint_rejects_render_path_outside_workspace(admin_client, tmp_path):
+    created = _create_job(admin_client).get_json()
+    outside = tmp_path.parent / "outside-workspace-final.mp4"
+    outside.write_bytes(b"x")
+    admin_client.patch(f"/api/media/jobs/{created['id']}", json={"render_path": str(outside)})
+    resp = admin_client.get(f"/api/media/jobs/{created['id']}/video")
+    assert resp.status_code == 400
+
+
+def test_video_endpoint_serves_file_within_workspace(admin_client):
+    created = _create_job(admin_client).get_json()
+    render_path = Path(created["workspace_path"]) / "output" / "final.mp4"
+    render_path.write_bytes(b"fake-mp4-bytes")
+    admin_client.patch(f"/api/media/jobs/{created['id']}", json={"render_path": str(render_path)})
+    resp = admin_client.get(f"/api/media/jobs/{created['id']}/video")
+    assert resp.status_code == 200
diff --git a/tests/media/test_state_machine.py b/tests/media/test_state_machine.py
new file mode 100644
index 000000000..800103a2b
--- /dev/null
+++ b/tests/media/test_state_machine.py
@@ -0,0 +1,103 @@
+"""media_state_machine.py — transition matrix correctness."""
+
+from __future__ import annotations
+
+import sys
+from pathlib import Path
+
+sys.path.insert(0, str(Path(__file__).resolve().parents[2] / "dashboard" / "backend"))
+
+import pytest
+from media_state_machine import (
+    MEDIA_JOB_STATES, MEDIA_JOB_TRANSITIONS, InvalidTransition,
+    assert_transition, can_transition, allowed_targets,
+)
+
+
+def test_every_state_has_a_transition_entry():
+    assert set(MEDIA_JOB_TRANSITIONS) == set(MEDIA_JOB_STATES)
+
+
+@pytest.mark.parametrize("current,target", [
+    ("queued", "preparing"),
+    ("preparing", "generating"),
+    ("generating", "rendering"),
+    ("rendering", "validating"),
+    ("validating", "ready_for_review"),
+    ("ready_for_review", "approved"),
+    ("ready_for_review", "rejected"),
+    ("rejected", "queued"),
+    ("approved", "uploading"),
+    ("uploading", "creating_draft"),
+    ("creating_draft", "draft_created"),
+    ("draft_created", "scheduling"),
+    ("scheduling", "scheduled"),
+    ("scheduled", "published"),
+])
+def test_valid_transitions_allowed(current, target):
+    assert can_transition(current, target)
+    assert_transition(current, target)  # must not raise
+
+
+@pytest.mark.parametrize("current,target", [
+    ("queued", "approved"),          # cannot skip the whole pipeline
+    ("queued", "ready_for_review"),  # cannot fake completion
+    ("draft_created", "scheduled"),  # must pass through scheduling
+    ("ready_for_review", "scheduling"),  # cannot schedule before approval
+    ("approved", "draft_created"),   # cannot skip upload/creating_draft
+    ("published", "draft_created"),  # terminal state, no outgoing edges
+    ("failed", "queued"),            # terminal state
+    ("cancelled", "queued"),         # terminal state
+    ("rendering", "rendering"),      # not a self-loop
+    ("bogus_state", "queued"),       # unknown source state
+])
+def test_invalid_transitions_rejected(current, target):
+    assert not can_transition(current, target)
+    with pytest.raises(InvalidTransition):
+        assert_transition(current, target)
+
+
+def test_scheduling_never_reachable_before_validation():
+    """Briefing: 'não permita agendar antes de validar'. `retryable_failure`
+    is exempt — it is the resume-a-failed-attempt state, and a job that
+    already passed through draft_created once before failing mid-schedule
+    is allowed to resume directly into scheduling.
+    """
+    for state in MEDIA_JOB_STATES:
+        if state in ("draft_created", "retryable_failure"):
+            continue
+        if can_transition(state, "scheduling"):
+            pytest.fail(f"'{state}' should not be able to reach 'scheduling' directly")
+
+
+def test_uploading_never_reachable_before_approval():
+    """Briefing: 'não permita enviar ao Postiz antes da aprovação'.
+    `retryable_failure` is exempt for the same resume-on-retry reason.
+    """
+    for state in MEDIA_JOB_STATES:
+        if state in ("approved", "retryable_failure"):
+            continue
+        assert not can_transition(state, "uploading"), f"'{state}' should not reach 'uploading' directly"
+
+
+def test_approved_never_reachable_without_review():
+    """Briefing: 'não permita aprovar um job sem render' — approved is only
+    reachable from ready_for_review, which itself is only reachable after
+    validating.
+    """
+    sources = [s for s in MEDIA_JOB_STATES if can_transition(s, "approved")]
+    assert sources == ["ready_for_review"]
+
+
+def test_allowed_targets_matches_transition_map():
+    assert allowed_targets("ready_for_review") == sorted(MEDIA_JOB_TRANSITIONS["ready_for_review"])
+    assert allowed_targets("published") == []
+
+
+def test_error_message_lists_allowed_targets():
+    try:
+        assert_transition("draft_created", "approved")
+    except InvalidTransition as exc:
+        assert "scheduling" in str(exc)
+    else:
+        pytest.fail("expected InvalidTransition")
diff --git a/uv.lock b/uv.lock
index 69360e199..f8ebec9b0 100644
--- a/uv.lock
+++ b/uv.lock
@@ -560,6 +560,18 @@ nvtx = [
     { name = "nvidia-nvtx", marker = "sys_platform == 'linux' or sys_platform == 'win32'" },
 ]
 
+[[package]]
+name = "deprecated"
+version = "1.3.1"
+source = { registry = "https://pypi.org/simple" }
+dependencies = [
+    { name = "wrapt" },
+]
+sdist = { url = "https://files.pythonhosted.org/packages/49/85/12f0a49a7c4ffb70572b6c2ef13c90c88fd190debda93b23f026b25f9634/deprecated-1.3.1.tar.gz", hash = "sha256:b1b50e0ff0c1fddaa5708a2c6b0a6588bb09b892825ab2b214ac9ea9d92a5223", size = 2932523, upload-time = "2025-10-30T08:19:02.757Z" }
+wheels = [
+    { url = "https://files.pythonhosted.org/packages/84/d0/205d54408c08b13550c733c4b85429e7ead111c7f0014309637425520a9a/deprecated-1.3.1-py2.py3-none-any.whl", hash = "sha256:597bfef186b6f60181535a29fbe44865ce137a5079f295b479886c82729d5f3f", size = 11298, upload-time = "2025-10-30T08:19:00.758Z" },
+]
+
 [[package]]
 name = "distlib"
 version = "0.4.0"
@@ -589,7 +601,7 @@ wheels = [
 
 [[package]]
 name = "evo-nexus"
-version = "0.32.2"
+version = "0.33.0"
 source = { virtual = "." }
 dependencies = [
     { name = "alembic" },
@@ -599,12 +611,12 @@ dependencies = [
     { name = "cryptography" },
     { name = "flask" },
     { name = "flask-cors" },
+    { name = "flask-limiter" },
     { name = "flask-login" },
     { name = "flask-sock" },
     { name = "flask-sqlalchemy" },
     { name = "google-genai" },
     { name = "jsonschema" },
-    { name = "marker-pdf" },
     { name = "openai" },
     { name = "psycopg2-binary" },
     { name = "pydantic" },
@@ -614,12 +626,20 @@ dependencies = [
     { name = "requests" },
     { name = "rich" },
     { name = "schedule" },
-    { name = "sentence-transformers" },
     { name = "sqlparse" },
     { name = "tiktoken" },
     { name = "watchdog" },
 ]
 
+[package.optional-dependencies]
+knowledge-ml = [
+    { name = "marker-pdf" },
+    { name = "sentence-transformers" },
+]
+local-embeddings = [
+    { name = "sentence-transformers" },
+]
+
 [package.dev-dependencies]
 dev = [
     { name = "pytest" },
@@ -634,12 +654,13 @@ requires-dist = [
     { name = "cryptography", specifier = ">=42" },
     { name = "flask", specifier = ">=3.0" },
     { name = "flask-cors", specifier = ">=4.0" },
+    { name = "flask-limiter", specifier = ">=3.5" },
     { name = "flask-login", specifier = ">=0.6" },
     { name = "flask-sock", specifier = ">=0.7" },
     { name = "flask-sqlalchemy", specifier = ">=3.1" },
     { name = "google-genai", specifier = ">=0.3" },
     { name = "jsonschema", specifier = ">=4.21" },
-    { name = "marker-pdf", specifier = ">=1.6.1" },
+    { name = "marker-pdf", marker = "extra == 'knowledge-ml'", specifier = ">=1.6.1" },
     { name = "openai", specifier = ">=1.0" },
     { name = "psycopg2-binary" },
     { name = "pydantic", specifier = ">=2.0" },
@@ -649,11 +670,13 @@ requires-dist = [
     { name = "requests", specifier = ">=2.31" },
     { name = "rich", specifier = ">=13.0" },
     { name = "schedule", specifier = ">=1.2" },
-    { name = "sentence-transformers", specifier = ">=3.0" },
+    { name = "sentence-transformers", marker = "extra == 'knowledge-ml'", specifier = ">=3.0" },
+    { name = "sentence-transformers", marker = "extra == 'local-embeddings'", specifier = ">=3.0" },
     { name = "sqlparse", specifier = ">=0.4,<1.0" },
     { name = "tiktoken", specifier = ">=0.7" },
     { name = "watchdog", specifier = ">=4.0" },
 ]
+provides-extras = ["knowledge-ml", "local-embeddings"]
 
 [package.metadata.requires-dev]
 dev = [{ name = "pytest", specifier = ">=9.0.3" }]
@@ -718,6 +741,21 @@ wheels = [
     { url = "https://files.pythonhosted.org/packages/4f/af/72ad54402e599152de6d067324c46fe6a4f531c7c65baf7e96c63db55eaf/flask_cors-6.0.2-py3-none-any.whl", hash = "sha256:e57544d415dfd7da89a9564e1e3a9e515042df76e12130641ca6f3f2f03b699a", size = 13257, upload-time = "2025-12-12T20:31:41.3Z" },
 ]
 
+[[package]]
+name = "flask-limiter"
+version = "4.1.1"
+source = { registry = "https://pypi.org/simple" }
+dependencies = [
+    { name = "flask" },
+    { name = "limits" },
+    { name = "ordered-set" },
+    { name = "typing-extensions" },
+]
+sdist = { url = "https://files.pythonhosted.org/packages/4e/98/71780be5d1afb941219c4b48d241d4e246e3062b017caa4e79c4dc71314c/flask_limiter-4.1.1.tar.gz", hash = "sha256:ca11608fc7eec43dcea606964ca07c3bd4ec1ae89043a0f67f717899a4f48106", size = 403198, upload-time = "2025-12-06T17:39:00.575Z" }
+wheels = [
+    { url = "https://files.pythonhosted.org/packages/75/7c/9fe9ffc83be199011bb0c6deb82cdcbc5a355601e380581de9dbc30490dd/flask_limiter-4.1.1-py3-none-any.whl", hash = "sha256:e1ae13e06e6b3e39a4902e7d240b901586b25932c2add7bd5f5eeb4bdc11111b", size = 30554, upload-time = "2025-12-06T17:38:59.162Z" },
+]
+
 [[package]]
 name = "flask-login"
 version = "0.6.3"
@@ -1155,6 +1193,20 @@ wheels = [
     { url = "https://files.pythonhosted.org/packages/41/45/1a4ed80516f02155c51f51e8cedb3c1902296743db0bbc66608a0db2814f/jsonschema_specifications-2025.9.1-py3-none-any.whl", hash = "sha256:98802fee3a11ee76ecaca44429fda8a41bff98b00a0f2838151b113f210cc6fe", size = 18437, upload-time = "2025-09-08T01:34:57.871Z" },
 ]
 
+[[package]]
+name = "limits"
+version = "5.8.0"
+source = { registry = "https://pypi.org/simple" }
+dependencies = [
+    { name = "deprecated" },
+    { name = "packaging" },
+    { name = "typing-extensions" },
+]
+sdist = { url = "https://files.pythonhosted.org/packages/71/69/826a5d1f45426c68d8f6539f8d275c0e4fcaa57f0c017ec3100986558a41/limits-5.8.0.tar.gz", hash = "sha256:c9e0d74aed837e8f6f50d1fcebcf5fd8130957287206bc3799adaee5092655da", size = 226104, upload-time = "2026-02-05T07:17:35.859Z" }
+wheels = [
+    { url = "https://files.pythonhosted.org/packages/b9/98/cb5ca20618d205a09d5bec7591fbc4130369c7e6308d9a676a28ff3ab22c/limits-5.8.0-py3-none-any.whl", hash = "sha256:ae1b008a43eb43073c3c579398bd4eb4c795de60952532dc24720ab45e1ac6b8", size = 60954, upload-time = "2026-02-05T07:17:34.425Z" },
+]
+
 [[package]]
 name = "mako"
 version = "1.3.11"
@@ -1723,6 +1775,15 @@ wheels = [
     { url = "https://files.pythonhosted.org/packages/86/8a/69176a64335aed183529207ba8bc3d329c2999d852b4f3818027203f50e6/opencv_python_headless-4.11.0.86-cp37-abi3-win_amd64.whl", hash = "sha256:6c304df9caa7a6a5710b91709dd4786bf20a74d57672b3c31f7033cc638174ca", size = 39402386, upload-time = "2025-01-16T13:52:56.418Z" },
 ]
 
+[[package]]
+name = "ordered-set"
+version = "4.1.0"
+source = { registry = "https://pypi.org/simple" }
+sdist = { url = "https://files.pythonhosted.org/packages/4c/ca/bfac8bc689799bcca4157e0e0ced07e70ce125193fc2e166d2e685b7e2fe/ordered-set-4.1.0.tar.gz", hash = "sha256:694a8e44c87657c59292ede72891eb91d34131f6531463aab3009191c77364a8", size = 12826, upload-time = "2022-01-26T14:38:56.6Z" }
+wheels = [
+    { url = "https://files.pythonhosted.org/packages/33/55/af02708f230eb77084a299d7b08175cff006dea4f2721074b92cdb0296c0/ordered_set-4.1.0-py3-none-any.whl", hash = "sha256:046e1132c71fcf3330438a539928932caf51ddbc582496833e23de611de14562", size = 7634, upload-time = "2022-01-26T14:38:48.677Z" },
+]
+
 [[package]]
 name = "packaging"
 version = "26.0"
@@ -3480,6 +3541,92 @@ wheels = [
     { url = "https://files.pythonhosted.org/packages/93/8c/2e650f2afeb7ee576912636c23ddb621c91ac6a98e66dc8d29c3c69446e1/werkzeug-3.1.8-py3-none-any.whl", hash = "sha256:63a77fb8892bf28ebc3178683445222aa500e48ebad5ec77b0ad80f8726b1f50", size = 226459, upload-time = "2026-04-02T18:49:12.72Z" },
 ]
 
+[[package]]
+name = "wrapt"
+version = "2.2.1"
+source = { registry = "https://pypi.org/simple" }
+sdist = { url = "https://files.pythonhosted.org/packages/2d/9f/06263fcd8ad6c405f05a3905fd7a84dd3176eb5ad46e44bccc0cd16348bb/wrapt-2.2.1.tar.gz", hash = "sha256:6744f504375775d7609c82c8d3d94af1c9a6f05586984536905908ba905277b9", size = 127620, upload-time = "2026-05-22T14:49:43.056Z" }
+wheels = [
+    { url = "https://files.pythonhosted.org/packages/b4/8b/84bc1ea68b620fe0e2696a8cff07e82f4b962d952ab14efee8955997bb70/wrapt-2.2.1-cp310-cp310-macosx_10_9_x86_64.whl", hash = "sha256:0f68f478004475d97906686e702ddbddeaf717c0b68ad2794384308f2dc713ae", size = 80093, upload-time = "2026-05-22T14:47:27.074Z" },
+    { url = "https://files.pythonhosted.org/packages/f3/8f/64ec81194a0bc708d9720174c998c8a32116e82b5b32c04e20a7fe01176c/wrapt-2.2.1-cp310-cp310-macosx_11_0_arm64.whl", hash = "sha256:e422b2d647a65d6b080cad5accd09055d3809bdff00c76fba8dca00ca935572a", size = 81183, upload-time = "2026-05-22T14:47:29.062Z" },
+    { url = "https://files.pythonhosted.org/packages/94/c2/3d186944aae923631d1def58f4c4ff8f0b6309906afc0b6978de3e69b3e0/wrapt-2.2.1-cp310-cp310-manylinux1_x86_64.manylinux_2_28_x86_64.manylinux_2_5_x86_64.whl", hash = "sha256:036dfb40128819a751c6f451c6b9c10172c49e4c401aebcdb8ecf2aec1683598", size = 152494, upload-time = "2026-05-22T14:47:30.583Z" },
+    { url = "https://files.pythonhosted.org/packages/01/d1/6b3d0ea995b867d2862aad5619bd5e17de09a9d64a821f46832dcd272d40/wrapt-2.2.1-cp310-cp310-manylinux2014_aarch64.manylinux_2_17_aarch64.manylinux_2_28_aarch64.whl", hash = "sha256:09ac16c081bebfd15d8e4dfa5bdc805990bbd52249ecff22530da7a129d6120b", size = 154310, upload-time = "2026-05-22T14:47:32.175Z" },
+    { url = "https://files.pythonhosted.org/packages/f9/4b/37ecb90a8c3753e580327fb40731a984b754e3df65d2ef932bf359fe4adc/wrapt-2.2.1-cp310-cp310-manylinux_2_31_riscv64.manylinux_2_39_riscv64.whl", hash = "sha256:07be671fa8875971222b0ba9059ed8b4dc738631122feba17c93aa36b4213e9a", size = 149002, upload-time = "2026-05-22T14:47:34.021Z" },
+    { url = "https://files.pythonhosted.org/packages/e7/d0/918884d9dfa84d0d135b42a51c00910f5c5447fe7a5e211a8e16ac324dd4/wrapt-2.2.1-cp310-cp310-musllinux_1_2_aarch64.whl", hash = "sha256:93fc2bf40cd7f4a0256010dce073d44eeb4a351b9bca94d0477ce2b6e62532b3", size = 153185, upload-time = "2026-05-22T14:47:35.722Z" },
+    { url = "https://files.pythonhosted.org/packages/4c/00/382299d8ced610b29b59b099a89eda821e8c489aa152b7183748ac83f32a/wrapt-2.2.1-cp310-cp310-musllinux_1_2_riscv64.whl", hash = "sha256:ba519b2d765df9871a25879e6f7fa78948ea59a2a31f9c1a257e34b651994afc", size = 148040, upload-time = "2026-05-22T14:47:37.052Z" },
+    { url = "https://files.pythonhosted.org/packages/6c/46/62a79b79e35bbebb1207ca5d15b81192f37f20cc5659cf4e3ce955b7fcc8/wrapt-2.2.1-cp310-cp310-musllinux_1_2_x86_64.whl", hash = "sha256:9011395be8db1827d106c6449b4bb6dd17e331ff6ec521f227e4588f1c78e46f", size = 151773, upload-time = "2026-05-22T14:47:38.713Z" },
+    { url = "https://files.pythonhosted.org/packages/a1/db/95c152151d206d4b430516c89725306e92484072f38e65492afde63f6d19/wrapt-2.2.1-cp310-cp310-win32.whl", hash = "sha256:a8f7176b83664af44567e9cc06e0d3827823fcc1a5e52307ebb8ac3aa95860b9", size = 77393, upload-time = "2026-05-22T14:47:40.061Z" },
+    { url = "https://files.pythonhosted.org/packages/13/d3/882d50452c6fbd13f24fe5d2644b97cdad2565a7e1522cbb6312de8a52cf/wrapt-2.2.1-cp310-cp310-win_amd64.whl", hash = "sha256:d7f513d3185e6fec82d0c3518f2e6365d8b4e49f5f45f29640d5162d56a23b54", size = 80350, upload-time = "2026-05-22T14:47:41.194Z" },
+    { url = "https://files.pythonhosted.org/packages/58/0f/148376523b4e370692286a9ba14d5715cf3c5b86da3bd3630926367b6b73/wrapt-2.2.1-cp310-cp310-win_arm64.whl", hash = "sha256:44255c84bc57554fed822e83e70036b51afa9edb56fc7ca56c54410ece7898c9", size = 79149, upload-time = "2026-05-22T14:47:42.835Z" },
+    { url = "https://files.pythonhosted.org/packages/5f/ac/4370bde262c0e633e6c4f0e56d55095710024cf9a5cecc20c59a10de483c/wrapt-2.2.1-cp311-cp311-macosx_10_9_x86_64.whl", hash = "sha256:dd57607acc85678925940bd5df0385ff8332083a32fa8d7a43f8767f4997263c", size = 80321, upload-time = "2026-05-22T14:47:43.996Z" },
+    { url = "https://files.pythonhosted.org/packages/eb/79/b8ff3a61e71babf58a8cf4c0d63358e8bad383e15bf7f35e62d2f6b6e4a4/wrapt-2.2.1-cp311-cp311-macosx_11_0_arm64.whl", hash = "sha256:1ae574d65c9fa8e86f64f6a7c2668f9fcd507b183e0e577619f504b883cb0a6c", size = 81216, upload-time = "2026-05-22T14:47:45.243Z" },
+    { url = "https://files.pythonhosted.org/packages/6e/fd/c0cac1f77c9c4f6fe58a920ca632ce379bb8be928720e11e8d73de28a5e9/wrapt-2.2.1-cp311-cp311-manylinux1_x86_64.manylinux_2_28_x86_64.manylinux_2_5_x86_64.whl", hash = "sha256:9a04c28c10ba7fd12842b109d2edb0678872a2fe65277ca4ff06a0d61edee245", size = 159208, upload-time = "2026-05-22T14:47:47.176Z" },
+    { url = "https://files.pythonhosted.org/packages/d9/4f/744132a7b2fbefa6b81118ec5942eca5fc2e9a129f9055a0c5e46885a549/wrapt-2.2.1-cp311-cp311-manylinux2014_aarch64.manylinux_2_17_aarch64.manylinux_2_28_aarch64.whl", hash = "sha256:3e2f02472a1cbbf3884b365714a810b5947134a95ad6952b554cb8cce9d492b0", size = 160322, upload-time = "2026-05-22T14:47:49.04Z" },
+    { url = "https://files.pythonhosted.org/packages/d6/95/b7cd9a22a06cf93e6482904ee6afc956248983553593fd1009296d1b3b31/wrapt-2.2.1-cp311-cp311-manylinux_2_31_riscv64.manylinux_2_39_riscv64.whl", hash = "sha256:ac2745950b2bff80219c15ebf2fa9d8427eba7e249739f97e55c9d169e47e9e1", size = 153243, upload-time = "2026-05-22T14:47:50.386Z" },
+    { url = "https://files.pythonhosted.org/packages/4c/4a/eb79423192015f46f0db2872e7e04a3dde8d359b83411e8959e7c9287eaa/wrapt-2.2.1-cp311-cp311-musllinux_1_2_aarch64.whl", hash = "sha256:67a97e5b6c457f0cd3cfc19ebb2d84463e60c3ece754cc831e4281a3ca29bb18", size = 159231, upload-time = "2026-05-22T14:47:51.753Z" },
+    { url = "https://files.pythonhosted.org/packages/ec/dc/435015b58ce33c6fc4104158fa91ddb0e809ab03a5751fb7465d1d461456/wrapt-2.2.1-cp311-cp311-musllinux_1_2_riscv64.whl", hash = "sha256:c803a3d331796255af51ba2c79ed0ac8275865b516c09e61f248d1e7aff31ce9", size = 152351, upload-time = "2026-05-22T14:47:53.214Z" },
+    { url = "https://files.pythonhosted.org/packages/77/ac/5d203f98df8fd136b95c5227139aea02d34505e18baf812d0c005df61963/wrapt-2.2.1-cp311-cp311-musllinux_1_2_x86_64.whl", hash = "sha256:9b984d1eb252145d6302c1dbd5e87fc6d404d45531447c84eadec04bf1fcb027", size = 158347, upload-time = "2026-05-22T14:47:54.982Z" },
+    { url = "https://files.pythonhosted.org/packages/52/2f/a92427dbdc74e54c1674abbed27e61b2cb5e7a94441b8c1270c70671d928/wrapt-2.2.1-cp311-cp311-win32.whl", hash = "sha256:8a983a603a18c8708f024f7f6991b2e66159219abbf894634c5056243c55f3cd", size = 77562, upload-time = "2026-05-22T14:47:56.275Z" },
+    { url = "https://files.pythonhosted.org/packages/c8/56/987b9c13b3e1c1a3c6de71284076f996b79caec90e75a87c044a40c23db9/wrapt-2.2.1-cp311-cp311-win_amd64.whl", hash = "sha256:9c210a6994b21aa9b29e81c8d11560e8fdab54c117e9cff37870d0a27bde1343", size = 80616, upload-time = "2026-05-22T14:47:57.854Z" },
+    { url = "https://files.pythonhosted.org/packages/7e/25/d01f560888d99d94a959c85533de349ce68d71ace3f2591d6ea8f632cfed/wrapt-2.2.1-cp311-cp311-win_arm64.whl", hash = "sha256:401229e9d63ca09f9b8891ecf83798d26c11bbb445d11ed9f1836b6d4585b38a", size = 79025, upload-time = "2026-05-22T14:47:59.089Z" },
+    { url = "https://files.pythonhosted.org/packages/89/0c/bfae7b9401583b6d05938cd16dedc43857d96da2f8a3d50d78cc515bf6ff/wrapt-2.2.1-cp312-cp312-macosx_10_13_x86_64.whl", hash = "sha256:3ffad790d9d11d8ecf9f17c4bb671a5b4089e4d8b575c46c5129597f41f836b0", size = 81021, upload-time = "2026-05-22T14:48:00.313Z" },
+    { url = "https://files.pythonhosted.org/packages/26/58/80f6a6599f933f4caecc1cb3ee88a04faf81e8b9bddbd6109c688dd63e0f/wrapt-2.2.1-cp312-cp312-macosx_11_0_arm64.whl", hash = "sha256:628f5220c7a904d5fc78f7075c8d7871433eb6d035c94728a22fdf85f193d2a8", size = 81692, upload-time = "2026-05-22T14:48:01.49Z" },
+    { url = "https://files.pythonhosted.org/packages/17/93/fb357cc7847c58a8ae790be718903afa81a28d23e642c843dc4129e8a0b2/wrapt-2.2.1-cp312-cp312-manylinux1_x86_64.manylinux_2_28_x86_64.manylinux_2_5_x86_64.whl", hash = "sha256:61acce4257a9883669703c525447c5b4c392edf0f987ae77ec32668440158f0e", size = 169364, upload-time = "2026-05-22T14:48:02.791Z" },
+    { url = "https://files.pythonhosted.org/packages/aa/0b/76b601ee309a8bd556af0eecb184394c20b3c49aa9c8e085aa1ffacc2568/wrapt-2.2.1-cp312-cp312-manylinux2014_aarch64.manylinux_2_17_aarch64.manylinux_2_28_aarch64.whl", hash = "sha256:727ab4244622cd6ad2390f322642090c877d2e83a608d2653a7643ae5368d926", size = 171079, upload-time = "2026-05-22T14:48:04.22Z" },
+    { url = "https://files.pythonhosted.org/packages/cd/87/ee3f32d5658e3e26d3e0e457922b47a36dd3bfbdfee7f97bb3e802344a66/wrapt-2.2.1-cp312-cp312-manylinux_2_31_riscv64.manylinux_2_39_riscv64.whl", hash = "sha256:03df9ebed4c73ab93fa8c07e3d41d818dfca1852b15731a3de59457b27814624", size = 160205, upload-time = "2026-05-22T14:48:05.553Z" },
+    { url = "https://files.pythonhosted.org/packages/b1/d0/ae2fd64277a67f5d7bffcf2d05eea1e476263fb2a072baf0b0129ab85984/wrapt-2.2.1-cp312-cp312-musllinux_1_2_aarch64.whl", hash = "sha256:0d9ff006f420b2ec8296aa56ade43ea7da3e997e85769f0aafc5e0661aacb710", size = 168922, upload-time = "2026-05-22T14:48:07.132Z" },
+    { url = "https://files.pythonhosted.org/packages/b1/f3/2d541a060c5bbafb9400bca4917e4d78bfd1f239f404782c86831a8f6b29/wrapt-2.2.1-cp312-cp312-musllinux_1_2_riscv64.whl", hash = "sha256:844c858fc3bb7eacc0ba8efa904935d16aac6a4470948ad1e7e55c9f5a2a665f", size = 158388, upload-time = "2026-05-22T14:48:08.629Z" },
+    { url = "https://files.pythonhosted.org/packages/1d/68/8d92c8800c57e93cb116ae9e9d6cbafc34fade5ee9f9107b6f203fb4dc35/wrapt-2.2.1-cp312-cp312-musllinux_1_2_x86_64.whl", hash = "sha256:87bacdaf225117a342a20d9c03438d701c02112f6e3f351ce9b7f32354f14797", size = 167682, upload-time = "2026-05-22T14:48:10.042Z" },
+    { url = "https://files.pythonhosted.org/packages/30/72/83ea3790ea352439442349388e29ff07b76e0686265f9088bbb505d1608d/wrapt-2.2.1-cp312-cp312-win32.whl", hash = "sha256:2f8c90c8afde51969487be4e1343ae049b268854877d415c2510baf833775052", size = 77857, upload-time = "2026-05-22T14:48:11.782Z" },
+    { url = "https://files.pythonhosted.org/packages/ef/cb/99450668dd3502d62a54a1c8aa56e44f34cb8c1261b381cfe2e7926c3b75/wrapt-2.2.1-cp312-cp312-win_amd64.whl", hash = "sha256:6ce32763ac31ce94fe9aada947e479b1975012bff166da409b4b9e4e376cf7e5", size = 80825, upload-time = "2026-05-22T14:48:13.046Z" },
+    { url = "https://files.pythonhosted.org/packages/e6/3a/87512881be64e743f9ee4c66f4cbe8e884974bef2a5989af71f999653ac7/wrapt-2.2.1-cp312-cp312-win_arm64.whl", hash = "sha256:8d1b4d0e0c2119587a31f5c029abd547e0c81d93b89d394566fe1588659eb579", size = 79087, upload-time = "2026-05-22T14:48:14.323Z" },
+    { url = "https://files.pythonhosted.org/packages/88/d1/a1b08f8f4fac8cbb156fa51cf64ee2c7f7f74f9875ba3cf70b3c58368694/wrapt-2.2.1-cp313-cp313-macosx_10_13_x86_64.whl", hash = "sha256:d2beb1c7cab10603aecdc42f8edd6ff013f9a32e4543474e38e6b77ce9975aeb", size = 80831, upload-time = "2026-05-22T14:48:15.598Z" },
+    { url = "https://files.pythonhosted.org/packages/54/ce/57890814991446a845e09b3445ce8b694f27eb0577004f2c2a36a9772ed4/wrapt-2.2.1-cp313-cp313-macosx_11_0_arm64.whl", hash = "sha256:e0cb7e4dd71f4c32e5e84843cd3c4cd65dda034314004bbe1d7f99af2426ab80", size = 81375, upload-time = "2026-05-22T14:48:17.071Z" },
+    { url = "https://files.pythonhosted.org/packages/38/65/08d7a6c76ac4493bdb668205ee9c1de1bd5daca61717c3e9aa49b4c01499/wrapt-2.2.1-cp313-cp313-manylinux1_x86_64.manylinux_2_28_x86_64.manylinux_2_5_x86_64.whl", hash = "sha256:95821352042722cd9f1108874579a47989d0a7e12a37d87d2fc4af20fd99ab8a", size = 167417, upload-time = "2026-05-22T14:48:18.303Z" },
+    { url = "https://files.pythonhosted.org/packages/62/ce/f1ccbee7a1bfe5cdc6b3da6bab4b45713d628b9294da32a39f563d648140/wrapt-2.2.1-cp313-cp313-manylinux2014_aarch64.manylinux_2_17_aarch64.manylinux_2_28_aarch64.whl", hash = "sha256:abd621552ede77c4c69be7fac44ba911225b0c812b6ba604e5964cf98085b474", size = 166948, upload-time = "2026-05-22T14:48:19.768Z" },
+    { url = "https://files.pythonhosted.org/packages/86/2a/f85d48d1cd4869aee6704028d257d740a47c1c467b457ce396b4b5b55d07/wrapt-2.2.1-cp313-cp313-manylinux_2_31_riscv64.manylinux_2_39_riscv64.whl", hash = "sha256:e3677c7146ce694874941ba82b57092cc4875445aadf29d72807351023105143", size = 158148, upload-time = "2026-05-22T14:48:21.96Z" },
+    { url = "https://files.pythonhosted.org/packages/fe/5c/93939ad11d4a12358ab1aab219a2ef5efa5612e0db6b9fc65af8af1a891b/wrapt-2.2.1-cp313-cp313-musllinux_1_2_aarch64.whl", hash = "sha256:9a5934eaea872e17936b5f45501eba5ab0bce9a74122e172b663d7c28c459c4a", size = 165905, upload-time = "2026-05-22T14:48:23.373Z" },
+    { url = "https://files.pythonhosted.org/packages/e0/22/b8c2aa89862ff58605934d7abf4b70e6a5a1c33df96656f49035ccdf1c8a/wrapt-2.2.1-cp313-cp313-musllinux_1_2_riscv64.whl", hash = "sha256:f5b9daf6b629fce418e0cc3dd0436eac045188fa35deadb7a7f3941d5b8203f9", size = 156712, upload-time = "2026-05-22T14:48:24.767Z" },
+    { url = "https://files.pythonhosted.org/packages/5d/78/bf00a7b02239c12bb02ddcc3c0b971bfcc36e578c5a44f1ccfef5b458545/wrapt-2.2.1-cp313-cp313-musllinux_1_2_x86_64.whl", hash = "sha256:f53ac9f3ef573326d009ed809beff4efcac6451931c2b8132586da4b9e53ff31", size = 166560, upload-time = "2026-05-22T14:48:26.83Z" },
+    { url = "https://files.pythonhosted.org/packages/fe/93/6390ca9c5b787683cef588d04f57c8d41b9a2323b5597a65f18638c90ef2/wrapt-2.2.1-cp313-cp313-win32.whl", hash = "sha256:1ffa9cfd4bdb581539951b14ae661ff20ed0c3599b3e911a131ee0ec5ac11337", size = 77817, upload-time = "2026-05-22T14:48:28.221Z" },
+    { url = "https://files.pythonhosted.org/packages/97/73/ce10f0e71c0cfaa1a65faadb8efd4852028b3bb9ba28932b8889df769d38/wrapt-2.2.1-cp313-cp313-win_amd64.whl", hash = "sha256:368eac1e20fd0bb03dd3cc42bf9887154c3861b60989389ccb5fac032617d215", size = 80736, upload-time = "2026-05-22T14:48:30.139Z" },
+    { url = "https://files.pythonhosted.org/packages/c7/4c/89f4a6818fafbbd840330e4fa3873073e1bfc166133a64cac7f8fde7a5e3/wrapt-2.2.1-cp313-cp313-win_arm64.whl", hash = "sha256:c754dafdf5aaf0b401b644a90a30046929a0dd1a536e0ff0ec959a59155d9c7f", size = 79099, upload-time = "2026-05-22T14:48:31.405Z" },
+    { url = "https://files.pythonhosted.org/packages/bf/f2/9a8741c46f8c208ac0a45b25ba170bcb4fb72a2781d5fb97dbd7b6be73cb/wrapt-2.2.1-cp313-cp313t-macosx_10_13_x86_64.whl", hash = "sha256:ed928d0fda15fc0adc8d13305c8b3c0f2fba5b0669950c9e6d019d9162a3b3e8", size = 82802, upload-time = "2026-05-22T14:48:33.307Z" },
+    { url = "https://files.pythonhosted.org/packages/9c/0d/e9c855716a3705eef1416456bdf062b60620726fdc59428ff670fc3c60dc/wrapt-2.2.1-cp313-cp313t-macosx_11_0_arm64.whl", hash = "sha256:fafb4e739e43544d12cb4abd1605fd4683b6ca6a9ad682b7fd8f4d21973eafa8", size = 83329, upload-time = "2026-05-22T14:48:34.593Z" },
+    { url = "https://files.pythonhosted.org/packages/3b/d6/a88f1c13112b7831adac75cea65d8310e0d696d570c8961844c90a57b865/wrapt-2.2.1-cp313-cp313t-manylinux1_x86_64.manylinux_2_28_x86_64.manylinux_2_5_x86_64.whl", hash = "sha256:74d6a0c31472fe5d814917266b9f46495d7c61ed890af08b468acea92fb89a8d", size = 202937, upload-time = "2026-05-22T14:48:35.859Z" },
+    { url = "https://files.pythonhosted.org/packages/42/65/e29d54aef06a4d898a5b8a25589a0b3769bde454f922fad8f6f89fbfb650/wrapt-2.2.1-cp313-cp313t-manylinux2014_aarch64.manylinux_2_17_aarch64.manylinux_2_28_aarch64.whl", hash = "sha256:ab5be648d5a0b86b7438864f8df3c705a65cef35a2fd3e5561e3e203167e0f27", size = 209997, upload-time = "2026-05-22T14:48:38.153Z" },
+    { url = "https://files.pythonhosted.org/packages/2a/91/e4454263516cf0e12640912fbca9a83654e424f0a6ddb79f5cd7ce14bf33/wrapt-2.2.1-cp313-cp313t-manylinux_2_31_riscv64.manylinux_2_39_riscv64.whl", hash = "sha256:9d8f204c8e3a8bf9ece17e0a83d137fd807440977f8a5e762d59306795011440", size = 194856, upload-time = "2026-05-22T14:48:39.69Z" },
+    { url = "https://files.pythonhosted.org/packages/de/d0/fe0ee202286afdf4a7f77dd29f195703145764d572aec209c5086e57d924/wrapt-2.2.1-cp313-cp313t-musllinux_1_2_aarch64.whl", hash = "sha256:d047f6498c973874ba08ac3f97c69a2c4b2211c8de6f4c205f75cb1c9522596e", size = 205654, upload-time = "2026-05-22T14:48:43.456Z" },
+    { url = "https://files.pythonhosted.org/packages/23/b6/87d860dfc6460c246af70b1fd5c8b76df77571b42a493459423ded94fd7d/wrapt-2.2.1-cp313-cp313t-musllinux_1_2_riscv64.whl", hash = "sha256:7a4fdb9326aab4a5a477a1640e5ad786a8495901009d7e7b038371edd23a9d2b", size = 192206, upload-time = "2026-05-22T14:48:44.858Z" },
+    { url = "https://files.pythonhosted.org/packages/df/46/3eea8cde077d985f239a38c0257087b8064fd9ee9b1a99e282d2c86da4ef/wrapt-2.2.1-cp313-cp313t-musllinux_1_2_x86_64.whl", hash = "sha256:c8cc5094b08abeae52da9c73c8a32003623be691a5193df2f4e3eac3d557c394", size = 198428, upload-time = "2026-05-22T14:48:46.319Z" },
+    { url = "https://files.pythonhosted.org/packages/18/dc/b927ee9c7fc67adc3a5658f246a0d275425eb840ba36e7b702e70f18bde8/wrapt-2.2.1-cp313-cp313t-win32.whl", hash = "sha256:9907a4402ab6db12b7077a0ea5d7a4d028ecb22c8eee2b53527080d347cd1562", size = 79448, upload-time = "2026-05-22T14:48:47.901Z" },
+    { url = "https://files.pythonhosted.org/packages/ec/b3/fd30b473fe498c70e6b9a5f328b8d3fbaf1b8c3c481465f59724bba8eb70/wrapt-2.2.1-cp313-cp313t-win_amd64.whl", hash = "sha256:5590d63f5243251641cf543009b4c9314a79d0598fdb8a8e4cfc918494536c53", size = 83021, upload-time = "2026-05-22T14:48:49.201Z" },
+    { url = "https://files.pythonhosted.org/packages/ee/f3/96c39153a8737a6e9aa85adef254ac4195bea3f2d24efc60472ccc3c9e2e/wrapt-2.2.1-cp313-cp313t-win_arm64.whl", hash = "sha256:c318a64b53d97b841d7b5e637517e50a27be64bc695128422953d4b21710954e", size = 80295, upload-time = "2026-05-22T14:48:50.479Z" },
+    { url = "https://files.pythonhosted.org/packages/0a/a3/11d7f34ebbf3231bc907a3e6d5ee051b14d034c1bc7b65a97d5cc00516df/wrapt-2.2.1-cp314-cp314-macosx_10_15_x86_64.whl", hash = "sha256:6f56a647e4eaf5f0ca40330fb070f566bdf9f7b0db89a1af20d71c28dcd7a0ab", size = 80879, upload-time = "2026-05-22T14:48:51.802Z" },
+    { url = "https://files.pythonhosted.org/packages/13/3c/b74cfd984cef560b900fb1a727af20352d89e1f06bf2e1114dd3f00f5f5a/wrapt-2.2.1-cp314-cp314-macosx_11_0_arm64.whl", hash = "sha256:64b7deeda4b70408e382328d8bbe52a256fe9bc63ae3db86d804608367e5422c", size = 81462, upload-time = "2026-05-22T14:48:53.18Z" },
+    { url = "https://files.pythonhosted.org/packages/15/a3/7c8f704b8dc07dfe0a5d01c2edbfd88317aa8e5e3fa7c743eb7a085ae767/wrapt-2.2.1-cp314-cp314-manylinux1_x86_64.manylinux_2_28_x86_64.manylinux_2_5_x86_64.whl", hash = "sha256:b9cf53ba90717db2e292401de290776c498d4bbfb0d4a559ca2895db8b9dcb5c", size = 167251, upload-time = "2026-05-22T14:48:54.562Z" },
+    { url = "https://files.pythonhosted.org/packages/80/85/a34d1888d97247da6c2ff6118c3a721c73ed8cc4dd198c00208bb73b6f80/wrapt-2.2.1-cp314-cp314-manylinux2014_aarch64.manylinux_2_17_aarch64.manylinux_2_28_aarch64.whl", hash = "sha256:cf3638274ab9d9b724c9baa0b4c04e132cd6faefb78b4dd3dd1a02a4bdaad41e", size = 166316, upload-time = "2026-05-22T14:48:56.065Z" },
+    { url = "https://files.pythonhosted.org/packages/e9/d7/72ffaeb01eebc704afe3fb99e840480f4bda45f0fa66e3381b6a39251c8f/wrapt-2.2.1-cp314-cp314-manylinux_2_31_riscv64.manylinux_2_39_riscv64.whl", hash = "sha256:aed9658797d0b45d6c49adcfc6b41f66e6f2d0c6de3ec79e16cf4b1855df240f", size = 157952, upload-time = "2026-05-22T14:48:57.924Z" },
+    { url = "https://files.pythonhosted.org/packages/24/5b/36f5d6b024e4edfdd90b140742d11ebcf7836daf5c9daf326c55c24db412/wrapt-2.2.1-cp314-cp314-musllinux_1_2_aarch64.whl", hash = "sha256:1d676ee388bc42a04d56dd7deb5605244dac2e35cc2fadbb43c9fa25bbd93508", size = 166130, upload-time = "2026-05-22T14:48:59.384Z" },
+    { url = "https://files.pythonhosted.org/packages/81/06/9296d9e97bfdef5483dfcc859d57b095b257144b2bc5300ab521e06f4bc7/wrapt-2.2.1-cp314-cp314-musllinux_1_2_riscv64.whl", hash = "sha256:e395f7bc31851ef9b612050368cb446e9bc14cd7454b025018980349caf25ae5", size = 156604, upload-time = "2026-05-22T14:49:00.921Z" },
+    { url = "https://files.pythonhosted.org/packages/53/37/16953929ed6776175720e58fc966e779926d8d71e2c7b2273230590ca71f/wrapt-2.2.1-cp314-cp314-musllinux_1_2_x86_64.whl", hash = "sha256:5f1845c2a8cc1180ccccfa45785dd06f562730d19ef75be180334254012b6283", size = 166007, upload-time = "2026-05-22T14:49:02.332Z" },
+    { url = "https://files.pythonhosted.org/packages/b9/73/20ee58c0612dae7c31131a7095345812ed2c7b389019e175f68cde34e5b4/wrapt-2.2.1-cp314-cp314-win32.whl", hash = "sha256:436addbc4bb4fc0a88c702577f51195d7d73683a7f3e0e5b253d8404d7847243", size = 78327, upload-time = "2026-05-22T14:49:03.722Z" },
+    { url = "https://files.pythonhosted.org/packages/22/b3/ef7c3295d02e0448a71c639a36a057f46d524d057c9486291a7a3039e65c/wrapt-2.2.1-cp314-cp314-win_amd64.whl", hash = "sha256:50972a1d974ea07725a7f6b1cec5f8759008afd030a0024843ebe7d52de47f2b", size = 81144, upload-time = "2026-05-22T14:49:05.093Z" },
+    { url = "https://files.pythonhosted.org/packages/ac/dc/7bdf336953f99f4ceb0a584bb8870e42c8f26f93ea10c87834dad62f1668/wrapt-2.2.1-cp314-cp314-win_arm64.whl", hash = "sha256:1c9934ea5d92957e3cd0adbc0845539dccfd62710ebe16195a8c66c53954db36", size = 79569, upload-time = "2026-05-22T14:49:06.413Z" },
+    { url = "https://files.pythonhosted.org/packages/6a/6d/6dfae80150ff1919c356d1dd528f049bcdfaae29b4d284bc957e022caef4/wrapt-2.2.1-cp314-cp314t-macosx_10_15_x86_64.whl", hash = "sha256:17de18fc12cea55b8a9587314cb830573e37fb33b247a7515696350863714188", size = 82892, upload-time = "2026-05-22T14:49:07.925Z" },
+    { url = "https://files.pythonhosted.org/packages/82/7b/4e34766a7d7804ffce9e71befe47e9b3225dc350c49c94493c4ab39fd3a5/wrapt-2.2.1-cp314-cp314t-macosx_11_0_arm64.whl", hash = "sha256:a9dec1aca52dddde7df94818310fa2fe79739c8f385b2014c4cb1035f5508199", size = 83333, upload-time = "2026-05-22T14:49:09.257Z" },
+    { url = "https://files.pythonhosted.org/packages/9d/57/0b34db3e8de44ccfece62d7b337abd1631dd810f5adc5f3db571727836b5/wrapt-2.2.1-cp314-cp314t-manylinux1_x86_64.manylinux_2_28_x86_64.manylinux_2_5_x86_64.whl", hash = "sha256:69f2e9244542cb34dd59c7f073445b9e54ad9f3fce8d93606c368a1b499fc413", size = 202899, upload-time = "2026-05-22T14:49:10.572Z" },
+    { url = "https://files.pythonhosted.org/packages/e5/45/ac0c459f154b99d92789a6cba7ca727185b83513b986f8ec7fe2aacddcbf/wrapt-2.2.1-cp314-cp314t-manylinux2014_aarch64.manylinux_2_17_aarch64.manylinux_2_28_aarch64.whl", hash = "sha256:2d83966dc7f4f45e8b97b5933685ac2e6e67fc0e19246ea314bceb9a8970c956", size = 209986, upload-time = "2026-05-22T14:49:12.229Z" },
+    { url = "https://files.pythonhosted.org/packages/b7/e4/77e37ff33ad018fa81ade52c25fa327b80b56f81d734279a63614fcb4cbc/wrapt-2.2.1-cp314-cp314t-manylinux_2_31_riscv64.manylinux_2_39_riscv64.whl", hash = "sha256:78b0aa6bfb7be8deed0ab23e7aa028cc5210c29bc2d32a04d52b50e517a7307e", size = 194893, upload-time = "2026-05-22T14:49:14.139Z" },
+    { url = "https://files.pythonhosted.org/packages/dd/9d/7ea651d1ab032fc5fa222fbec91d0f8a1397f6ae04ebb93fa7219aa921d7/wrapt-2.2.1-cp314-cp314t-musllinux_1_2_aarch64.whl", hash = "sha256:05d5cb74d1b232ec8cfa130a8f900708699ff2491d97b8f85a4cdc5996294b85", size = 205636, upload-time = "2026-05-22T14:49:15.714Z" },
+    { url = "https://files.pythonhosted.org/packages/09/af/8e88031a701275b9085c54e64bc88c0b1cd55c77eadd400691c371cd76c4/wrapt-2.2.1-cp314-cp314t-musllinux_1_2_riscv64.whl", hash = "sha256:f6518b94edb9150452e9aba08027d4cc293433753ec1fbefb4629a21cbc74181", size = 192267, upload-time = "2026-05-22T14:49:17.283Z" },
+    { url = "https://files.pythonhosted.org/packages/bf/a8/e657ca876b06710194f243d81c4b0896ade646e244bdbec2d87c8c56a8bd/wrapt-2.2.1-cp314-cp314t-musllinux_1_2_x86_64.whl", hash = "sha256:ed55af48b3eb28f43228ca2306788892bcb629eb2b5c4876e2a3659872c2f17a", size = 198378, upload-time = "2026-05-22T14:49:18.785Z" },
+    { url = "https://files.pythonhosted.org/packages/c8/59/822efe4ea722a3961331bfa35b7d90937790d2c20f0616de1997ccc3aebd/wrapt-2.2.1-cp314-cp314t-win32.whl", hash = "sha256:2e08688ab16525897da6589d56d0aebaf417bbe91c2d8e3b96203b1efa596e85", size = 80226, upload-time = "2026-05-22T14:49:20.264Z" },
+    { url = "https://files.pythonhosted.org/packages/ab/31/2a7dc5f6abb2fca0b6e1610e120419f603650aceb4f1d3ac4cae0354e162/wrapt-2.2.1-cp314-cp314t-win_amd64.whl", hash = "sha256:fd0135d34387f5fd087d9be368ea77ea89cf2451dc1cd1c622d35021bcb3ab50", size = 83835, upload-time = "2026-05-22T14:49:21.634Z" },
+    { url = "https://files.pythonhosted.org/packages/9f/c0/782b86e28d1ceebeb74cccea12d2cd3d2ba0bd68e3dec20b1bc5873f6127/wrapt-2.2.1-cp314-cp314t-win_arm64.whl", hash = "sha256:f70db64e8266d7c45d3b735f2e08eeb434b5e03da9a479ae42b2e2e486a21a00", size = 80722, upload-time = "2026-05-22T14:49:23.59Z" },
+    { url = "https://files.pythonhosted.org/packages/53/46/29ac9daf11a86c22a8c38cd9236c62928ccae83f7ceb06bd3b0467cf9d05/wrapt-2.2.1-py3-none-any.whl", hash = "sha256:3aafea2975caef8ca49400640dde02cc7426e798f24870ed01f490bc3cffd32f", size = 61000, upload-time = "2026-05-22T14:49:41.593Z" },
+]
+
 [[package]]
 name = "wsproto"
 version = "1.3.2"